living-documentation 7.42.0 → 7.44.0

package/dist/src/frontend/diagram/network.js

@@ -2,37 +2,62 @@
 // Creates the vis.js Network, patches _drawNodes for canonical z-order,
 // and wires all network-level events.
 
-import { st, markDirty } from './state.js';
-import { pushSnapshot }  from './history.js';
-import { visNodeProps, SHAPE_DEFAULTS }   from './node-rendering.js';
-import { uploadImageFile } from './image-upload.js';
-import { promptImageName } from './image-name-modal.js';
-import { showToast }       from './toast.js';
-import { t }               from './t.js';
-import { visEdgeProps }   from './edge-rendering.js';
-import { showNodePanel, hideNodePanel } from './node-panel.js';
-import { showEdgePanel, hideEdgePanel } from './edge-panel.js';
-import { startLabelEdit, startEdgeLabelEdit, commitLabelEdit, hideLabelInput } from './label-editor.js';
-import { updateSelectionOverlay, hideSelectionOverlay } from './selection-overlay.js';
-import { drawGrid, onDragEnd, snapToGrid }           from './grid.js';
-import { onDragging, drawAlignmentGuides, clearAlignGuides } from './alignment.js';
-import { drawDebugOverlay }    from './debug.js';
-import { updateZoomDisplay }   from './zoom.js';
-import { expandSelectionToGroup, drawGroupOutlines } from './groups.js';
-import { navigateNodeLink, hideLinkPanel }           from './link-panel.js';
-import { getNearestPort, getPortPosition, drawPortDots, drawPortEdge, distanceToPortEdge, wrapText } from './ports.js';
-import { getLastFreeArrowStyle } from './edge-panel.js';
-import { getLastNodeStyle } from './node-panel.js';
-import { installUnlockHold } from './unlock-hold.js';
+import { st, markDirty } from "./state.js";
+import { pushSnapshot } from "./history.js";
+import { visNodeProps, SHAPE_DEFAULTS } from "./node-rendering.js";
+import { uploadImageFile } from "./image-upload.js";
+import { promptImageName } from "./image-name-modal.js";
+import { showToast } from "./toast.js";
+import { t } from "./t.js";
+import { visEdgeProps } from "./edge-rendering.js";
+import { showNodePanel, hideNodePanel } from "./node-panel.js";
+import { showEdgePanel, hideEdgePanel } from "./edge-panel.js";
+import {
+  startLabelEdit,
+  startEdgeLabelEdit,
+  commitLabelEdit,
+  hideLabelInput,
+} from "./label-editor.js";
+import {
+  updateSelectionOverlay,
+  hideSelectionOverlay,
+} from "./selection-overlay.js";
+import { drawGrid, onDragEnd, snapToGrid } from "./grid.js";
+import {
+  onDragging,
+  drawAlignmentGuides,
+  clearAlignGuides,
+} from "./alignment.js";
+import { drawDebugOverlay } from "./debug.js";
+import { updateZoomDisplay } from "./zoom.js";
+import { expandSelectionToGroup, drawGroupOutlines } from "./groups.js";
+import { navigateNodeLink, hideLinkPanel } from "./link-panel.js";
+import {
+  getNearestPort,
+  getPortPosition,
+  drawPortDots,
+  drawPortEdge,
+  distanceToPortEdge,
+  wrapText,
+} from "./ports.js";
+import { getLastFreeArrowStyle } from "./edge-panel.js";
+import { getLastNodeStyle } from "./node-panel.js";
+import { installUnlockHold } from "./unlock-hold.js";
+import {
+  CUSTOM_SHAPE_TYPE,
+  customShapeIdFromTool,
+  getCustomShapeDefaultSize,
+  getCustomShapeDefinition,
+} from "./custom-shapes.js";
 
 // Module-level port-hover state — shared between initNetwork event handlers and
 // module-level helpers (_onAnchorSnapConnect).
 let _hoveredPortNodeId = null;
-let _hoveredPortKey    = null;
+let _hoveredPortKey = null;
 let _draggingAnchorIds = new Set();
 // Rehook state: tracks which port is hovered while a port edge is selected.
-let _rehookEdgeId      = null;
-let _rehookHoveredNodeId  = null;
+let _rehookEdgeId = null;
+let _rehookHoveredNodeId = null;
 let _rehookHoveredPortKey = null;
 let _pointerDownSelection = { nodeIds: [], edgeIds: [] };
 let _edgeLabelPointerAbort = null;
@@ -42,99 +67,171 @@ let _edgeLabelPointerAbort = null;
 function isRehookable(edgeData) {
   if (!edgeData) return false;
   const fromNode = st.nodes.get(edgeData.from);
-  const toNode   = st.nodes.get(edgeData.to);
-  return !!(fromNode && fromNode.shapeType !== 'anchor') || !!(toNode && toNode.shapeType !== 'anchor');
+  const toNode = st.nodes.get(edgeData.to);
+  return (
+    !!(fromNode && fromNode.shapeType !== "anchor") ||
+    !!(toNode && toNode.shapeType !== "anchor")
+  );
 }
 
 export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
-  const container = document.getElementById('vis-canvas');
+  const container = document.getElementById("vis-canvas");
 
-  const edgeSmooth = edgesStraight ? { enabled: false } : { type: 'continuous' };
+  const edgeSmooth = edgesStraight
+    ? { enabled: false }
+    : { type: "continuous" };
 
   st.nodes = new vis.DataSet(
     savedNodes.map((n) => {
-      const shapeType = n.shapeType || n.renderAs || 'box';
+      const shapeType = n.shapeType || n.renderAs || "box";
       return {
         ...n,
         shapeType,
-        ...visNodeProps(shapeType, n.colorKey || 'c-gray', n.nodeWidth, n.nodeHeight, n.fontSize, n.textAlign, n.textValign),
+        ...visNodeProps(
+          shapeType,
+          n.colorKey || "c-gray",
+          n.nodeWidth,
+          n.nodeHeight,
+          n.fontSize,
+          n.textAlign,
+          n.textValign,
+        ),
         ...(n.locked ? { fixed: { x: true, y: true }, draggable: false } : {}),
       };
-    })
+    }),
   );
   st.edges = new vis.DataSet(
     savedEdges.map((e) => {
       const toNode = savedNodes.find((n) => n.id === e.to);
-      const isAnchor = toNode && toNode.shapeType === 'anchor';
+      const isAnchor = toNode && toNode.shapeType === "anchor";
       const edgeObj = {
         ...e,
-        ...visEdgeProps(e.arrowDir ?? 'to', e.dashes ?? false),
+        ...visEdgeProps(e.arrowDir ?? "to", e.dashes ?? false),
         smooth: isAnchor ? { enabled: false } : edgeSmooth,
-        ...(e.edgeColor ? { color: { color: e.edgeColor, highlight: '#f97316', hover: '#f97316' } } : {}),
+        ...(e.edgeColor
+          ? {
+              color: {
+                color: e.edgeColor,
+                highlight: "#f97316",
+                hover: "#f97316",
+              },
+            }
+          : {}),
         ...(e.edgeWidth ? { width: e.edgeWidth } : {}),
         // Edge labels are always drawn by drawEdgeLabels() in afterDrawing
         // (gives us positioning + rotation control). Hide vis-network's native
         // label text entirely so it never appears alongside ours.
         ...(e.label
-          ? { font: { size: e.fontSize || 11, align: 'middle', color: 'rgba(0,0,0,0)' } }
+          ? {
+              font: {
+                size: e.fontSize || 11,
+                align: "middle",
+                color: "rgba(0,0,0,0)",
+              },
+            }
           : e.fontSize
-            ? { font: { size: e.fontSize,      align: 'middle', color: '#6b7280' } }
-            : {}
-        ),
+            ? { font: { size: e.fontSize, align: "middle", color: "#6b7280" } }
+            : {}),
       };
       // Port edges: hide vis-network's own rendering (line + arrowhead).
       // drawPortEdge() handles all visual output; vis-network edge is a
       // transparent ghost kept only for hit-detection (click selection).
       if (e.fromPort || e.toPort) {
-        edgeObj.color  = { color: 'rgba(0,0,0,0)', highlight: 'rgba(0,0,0,0)', hover: 'rgba(0,0,0,0)' };
+        edgeObj.color = {
+          color: "rgba(0,0,0,0)",
+          highlight: "rgba(0,0,0,0)",
+          hover: "rgba(0,0,0,0)",
+        };
         edgeObj.arrows = { to: { enabled: false }, from: { enabled: false } };
       }
       return edgeObj;
-    })
+    }),
   );
 
   const options = {
     physics: { enabled: false },
-    interaction: { hover: true, navigationButtons: false, keyboard: false, multiselect: true },
-    nodes: { font: { size: 13, face: 'system-ui,-apple-system,sans-serif' }, borderWidth: 1.5, borderWidthSelected: 2.5, shadow: false, widthConstraint: { minimum: 60 }, heightConstraint: { minimum: 28 } },
-    edges: { smooth: edgeSmooth, color: { color: '#a8a29e', highlight: '#f97316', hover: '#f97316' }, width: 1.5, selectionWidth: 2.5, font: { size: 11, align: 'middle', color: 'rgba(0,0,0,0)', strokeColor: 'rgba(0,0,0,0)', background: 'rgba(0,0,0,0)' } },
+    interaction: {
+      hover: true,
+      navigationButtons: false,
+      keyboard: false,
+      multiselect: true,
+    },
+    nodes: {
+      font: { size: 13, face: "system-ui,-apple-system,sans-serif" },
+      borderWidth: 1.5,
+      borderWidthSelected: 2.5,
+      shadow: false,
+      widthConstraint: { minimum: 60 },
+      heightConstraint: { minimum: 28 },
+    },
+    edges: {
+      smooth: edgeSmooth,
+      color: { color: "#a8a29e", highlight: "#f97316", hover: "#f97316" },
+      width: 1.5,
+      selectionWidth: 2.5,
+      font: {
+        size: 11,
+        align: "middle",
+        color: "rgba(0,0,0,0)",
+        strokeColor: "rgba(0,0,0,0)",
+        background: "rgba(0,0,0,0)",
+      },
+    },
     manipulation: {
       enabled: false,
       addEdge(data, callback) {
         // Block edges from/to locked nodes or anchors (free-arrow endpoints).
-        // Also block when the target sits below the source in z-order — the
-        // mouseup handler turns that case into a free-arrow endpoint instead.
+        // Also block when the source sits on top of a lower-z target that
+        // contains it: that target is acting as a background surface, and the
+        // mouseup handler turns the gesture into a free-arrow endpoint instead.
         const fromNode = st.nodes.get(data.from) || {};
-        const toNode   = st.nodes.get(data.to)   || {};
-        const fromZ    = st.canonicalOrder.indexOf(data.from);
-        const toZ      = st.canonicalOrder.indexOf(data.to);
-        const toBelow  = fromZ !== -1 && toZ !== -1 && toZ < fromZ;
-        if (fromNode.locked || toNode.locked || fromNode.shapeType === 'anchor' || toNode.shapeType === 'anchor' || toBelow) {
+        const toNode = st.nodes.get(data.to) || {};
+        const targetContainsSource = lowerZTargetContainsSource(
+          data.from,
+          data.to,
+        );
+        if (
+          fromNode.locked ||
+          toNode.locked ||
+          fromNode.shapeType === "anchor" ||
+          toNode.shapeType === "anchor" ||
+          targetContainsSource
+        ) {
           _addEdgeFromPort = null;
-          setTimeout(() => { if (st.currentTool === 'addEdge') st.network.addEdgeMode(); }, 0);
+          setTimeout(() => {
+            if (st.currentTool === "addEdge") st.network.addEdgeMode();
+          }, 0);
           return;
         }
         pushSnapshot();
-        data.id       = 'e' + Date.now();
-        data.arrowDir = 'to';
-        data.dashes   = false;
+        data.id = "e" + Date.now();
+        data.arrowDir = "to";
+        data.dashes = false;
         // Attach captured port selections — skip for anchor nodes.
-        const fromIsAnchor = fromNode.shapeType === 'anchor';
-        const toIsAnchor   = toNode.shapeType   === 'anchor';
+        const fromIsAnchor = fromNode.shapeType === "anchor";
+        const toIsAnchor = toNode.shapeType === "anchor";
         if (!fromIsAnchor) data.fromPort = _addEdgeFromPort || null;
-        if (!toIsAnchor)   data.toPort   = _hoveredPortKey  || null;
-        Object.assign(data, visEdgeProps('to', false));
+        if (!toIsAnchor) data.toPort = _hoveredPortKey || null;
+        Object.assign(data, visEdgeProps("to", false));
         // Port edges: make vis-network's ghost transparent so only drawPortEdge is visible.
         if (data.fromPort || data.toPort) {
-          data.color  = { color: 'rgba(0,0,0,0)', highlight: 'rgba(0,0,0,0)', hover: 'rgba(0,0,0,0)' };
+          data.color = {
+            color: "rgba(0,0,0,0)",
+            highlight: "rgba(0,0,0,0)",
+            hover: "rgba(0,0,0,0)",
+          };
           data.arrows = { to: { enabled: false }, from: { enabled: false } };
         }
         callback(data);
         markDirty();
         _addEdgeFromPort = null;
         setTimeout(() => {
-          if (st.currentTool === 'addEdge') {
-            window.dispatchEvent(new CustomEvent('diagram:setTool', { detail: { tool: 'select' } }));
+          if (st.currentTool === "addEdge") {
+            window.dispatchEvent(
+              new CustomEvent("diagram:setTool", {
+                detail: { tool: "select" },
+              }),
+            );
           }
         }, 0);
       },
@@ -142,19 +239,27 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
   };
 
   if (st.network) st.network.destroy();
-  st.network = new vis.Network(container, { nodes: st.nodes, edges: st.edges }, options);
+  st.network = new vis.Network(
+    container,
+    { nodes: st.nodes, edges: st.edges },
+    options,
+  );
 
   // ── Lock interception ───────────────────────────────────────────────────────
   // Must be registered BEFORE any other capture-phase mousedown listeners on
   // the container so it can stopImmediatePropagation for locked targets.
   installUnlockHold(container);
-  container.addEventListener('mousedown', (e) => {
-    if (e.button !== 0) return;
-    _pointerDownSelection = {
-      nodeIds: [...(st.selectedNodeIds || [])],
-      edgeIds: [...(st.selectedEdgeIds || [])],
-    };
-  }, { capture: true });
+  container.addEventListener(
+    "mousedown",
+    (e) => {
+      if (e.button !== 0) return;
+      _pointerDownSelection = {
+        nodeIds: [...(st.selectedNodeIds || [])],
+        edgeIds: [...(st.selectedEdgeIds || [])],
+      };
+    },
+    { capture: true },
+  );
 
   // ── Z-order patch ──────────────────────────────────────────────────────────
   // vis.js renders in 3 passes (normal → selected → hovered), which breaks
@@ -164,10 +269,18 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
   st.network.renderer._drawNodes = function (ctx, alwaysShow = false) {
     const bodyNodes = this.body.nodes;
     const bodyEdges = this.body.edges;
-    const margin    = 20;
-    const topLeft     = this.canvas.DOMtoCanvas({ x: -margin, y: -margin });
-    const bottomRight = this.canvas.DOMtoCanvas({ x: this.canvas.frame.canvas.clientWidth + margin, y: this.canvas.frame.canvas.clientHeight + margin });
-    const viewableArea = { top: topLeft.y, left: topLeft.x, bottom: bottomRight.y, right: bottomRight.x };
+    const margin = 20;
+    const topLeft = this.canvas.DOMtoCanvas({ x: -margin, y: -margin });
+    const bottomRight = this.canvas.DOMtoCanvas({
+      x: this.canvas.frame.canvas.clientWidth + margin,
+      y: this.canvas.frame.canvas.clientHeight + margin,
+    });
+    const viewableArea = {
+      top: topLeft.y,
+      left: topLeft.x,
+      bottom: bottomRight.y,
+      right: bottomRight.x,
+    };
 
     // Build a map: canonical index → list of edges whose topmost endpoint is at that index.
     const orderMap = new Map();
@@ -189,11 +302,11 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
       // centre origin — otherwise the ghost line is visible from the node's
       // centre instead of appearing to start at its boundary/port.
       const fromData = st.nodes.get(edge.fromId);
-      const toData   = st.nodes.get(edge.toId);
-      const fromIsAnchor = fromData && fromData.shapeType === 'anchor';
-      const toIsAnchor   = toData   && toData.shapeType   === 'anchor';
+      const toData = st.nodes.get(edge.toId);
+      const fromIsAnchor = fromData && fromData.shapeType === "anchor";
+      const toIsAnchor = toData && toData.shapeType === "anchor";
       const fromLevel = orderMap.get(edge.fromId);
-      const toLevel   = orderMap.get(edge.toId);
+      const toLevel = orderMap.get(edge.toId);
       let level;
       if (fromLevel === undefined && toLevel === undefined) {
         level = 0;
@@ -218,22 +331,24 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
     for (const [level, edges] of edgesByLevel) {
       for (const edge of edges) {
         const fromData = st.nodes.get(edge.fromId);
-        const toData   = st.nodes.get(edge.toId);
-        if (toData   && toData.shapeType   === 'anchor') anchorEdgeLevel.set(edge.toId,   level);
-        if (fromData && fromData.shapeType === 'anchor') anchorEdgeLevel.set(edge.fromId, level);
+        const toData = st.nodes.get(edge.toId);
+        if (toData && toData.shapeType === "anchor")
+          anchorEdgeLevel.set(edge.toId, level);
+        if (fromData && fromData.shapeType === "anchor")
+          anchorEdgeLevel.set(edge.fromId, level);
       }
     }
 
     // Anchors with no connected edge are drawn at level 0 (bottom).
     for (const id of st.canonicalOrder) {
       const n = st.nodes.get(id);
-      if (!n || n.shapeType !== 'anchor') continue;
+      if (!n || n.shapeType !== "anchor") continue;
       if (!anchorEdgeLevel.has(id)) anchorEdgeLevel.set(id, 0);
     }
 
     for (let i = 0; i < st.canonicalOrder.length; i++) {
       const id = st.canonicalOrder[i];
-      const n  = st.nodes.get(id);
+      const n = st.nodes.get(id);
 
       // Draw edges whose level is i, before drawing the node at level i.
       const edges = edgesByLevel.get(i);
@@ -254,7 +369,10 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
           if (level !== i) continue;
           const anchorNode = bodyNodes[anchorId];
           if (!anchorNode) continue;
-          if (alwaysShow === true || anchorNode.isBoundingBoxOverlappingWith(viewableArea) === true) {
+          if (
+            alwaysShow === true ||
+            anchorNode.isBoundingBoxOverlappingWith(viewableArea) === true
+          ) {
             anchorNode.draw(ctx);
           } else {
             anchorNode.updateBoundingBox(ctx, anchorNode.selected);
@@ -263,7 +381,7 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
       }
 
       // Skip anchor nodes here — they were drawn right after their edge above.
-      if (n && n.shapeType === 'anchor') continue;
+      if (n && n.shapeType === "anchor") continue;
 
       const node = bodyNodes[id];
       if (!node) continue;
@@ -280,84 +398,117 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
   // We neutralise _drawEdges (make it a no-op) and instead draw each edge
   // inside _drawNodes, just before the node whose canonical index equals the
   // max index of its two endpoints. This guarantees true z-order interleaving.
-  st.network.renderer._drawEdges = function () { /* no-op — edges drawn in _drawNodes */ };
+  st.network.renderer._drawEdges = function () {
+    /* no-op — edges drawn in _drawNodes */
+  };
 
   // Keep canonicalOrder in sync with DataSet add/remove events
-  st.nodes.on('add', (_, { items }) => {
+  st.nodes.on("add", (_, { items }) => {
     const existing = new Set(st.canonicalOrder);
-    items.forEach((id) => { if (!existing.has(id)) st.canonicalOrder.push(id); });
+    items.forEach((id) => {
+      if (!existing.has(id)) st.canonicalOrder.push(id);
+    });
   });
-  st.nodes.on('remove', (_, { items, oldData }) => {
+  st.nodes.on("remove", (_, { items, oldData }) => {
     const removed = new Set(items);
     st.canonicalOrder = st.canonicalOrder.filter((id) => !removed.has(id));
     // If an anchor was deleted directly, also remove its connected edges.
     (oldData || []).forEach((n) => {
-      if (n.shapeType !== 'anchor') return;
-      const connected = st.edges.get({ filter: (e) => e.from === n.id || e.to === n.id });
+      if (n.shapeType !== "anchor") return;
+      const connected = st.edges.get({
+        filter: (e) => e.from === n.id || e.to === n.id,
+      });
       if (connected.length) st.edges.remove(connected.map((e) => e.id));
     });
   });
 
   // When an edge is removed, delete any anchor node that has no remaining edges.
-  st.edges.on('remove', (_, { oldData }) => {
+  st.edges.on("remove", (_, { oldData }) => {
     const anchorsToCheck = new Set();
     (oldData || []).forEach((edge) => {
-      const toData   = st.nodes.get(edge.to);
+      const toData = st.nodes.get(edge.to);
       const fromData = st.nodes.get(edge.from);
-      if (toData   && toData.shapeType   === 'anchor') anchorsToCheck.add(edge.to);
-      if (fromData && fromData.shapeType === 'anchor') anchorsToCheck.add(edge.from);
+      if (toData && toData.shapeType === "anchor") anchorsToCheck.add(edge.to);
+      if (fromData && fromData.shapeType === "anchor")
+        anchorsToCheck.add(edge.from);
     });
     anchorsToCheck.forEach((anchorId) => {
-      const remaining = st.edges.get({ filter: (e) => e.from === anchorId || e.to === anchorId });
+      const remaining = st.edges.get({
+        filter: (e) => e.from === anchorId || e.to === anchorId,
+      });
       if (remaining.length === 0) st.nodes.remove(anchorId);
     });
   });
 
-  st.network.on('click',        onClickNode);
-  st.network.on('doubleClick',  onDoubleClick);
-  st.network.on('dragStart',    onDragStart);
-  st.network.on('selectNode',   onSelectNode);
-  st.network.on('deselectNode', onDeselectAll);
-  st.network.on('selectEdge',   onSelectEdge);
-  st.network.on('deselectEdge', onDeselectAll);
-  st.network.on('zoom',         updateZoomDisplay);
-  st.network.on('dragging',      onDragging);
-  st.network.on('dragEnd',       (p) => { _draggingAnchorIds.clear(); _hoveredPortNodeId = null; _hoveredPortKey = null; _onAnchorSnapConnect(p); onDragEnd(p); clearAlignGuides(); });
-  st.network.on('beforeDrawing', drawGrid);
-  st.network.on('afterDrawing',  updateSelectionOverlay);
-  st.network.on('afterDrawing',  drawAlignmentGuides);
-  st.network.on('afterDrawing',  (ctx) => drawGroupOutlines(ctx));
-  st.network.on('afterDrawing',  () => drawDebugOverlay());
-  st.network.on('afterDrawing',  drawEdgeLabels);
-  st.network.on('afterDrawing',  (ctx) => {
-    if (_hoveredPortNodeId && (st.currentTool === 'addEdge' || _draggingAnchorIds.size > 0)) {
+  st.network.on("click", onClickNode);
+  st.network.on("doubleClick", onDoubleClick);
+  st.network.on("dragStart", onDragStart);
+  st.network.on("selectNode", onSelectNode);
+  st.network.on("deselectNode", onDeselectAll);
+  st.network.on("selectEdge", onSelectEdge);
+  st.network.on("deselectEdge", onDeselectAll);
+  st.network.on("zoom", updateZoomDisplay);
+  st.network.on("dragging", onDragging);
+  st.network.on("dragEnd", (p) => {
+    _draggingAnchorIds.clear();
+    _hoveredPortNodeId = null;
+    _hoveredPortKey = null;
+    _onAnchorSnapConnect(p);
+    onDragEnd(p);
+    clearAlignGuides();
+  });
+  st.network.on("beforeDrawing", drawGrid);
+  st.network.on("afterDrawing", updateSelectionOverlay);
+  st.network.on("afterDrawing", drawAlignmentGuides);
+  st.network.on("afterDrawing", (ctx) => drawGroupOutlines(ctx));
+  st.network.on("afterDrawing", () => drawDebugOverlay());
+  st.network.on("afterDrawing", drawEdgeLabels);
+  st.network.on("afterDrawing", (ctx) => {
+    if (
+      _hoveredPortNodeId &&
+      (st.currentTool === "addEdge" || _draggingAnchorIds.size > 0)
+    ) {
       drawPortDots(ctx, _hoveredPortNodeId, _hoveredPortKey);
     }
     // Rehook: show port dots on both endpoints of the selected port edge so
     // the user can click a different port to reconnect that end of the arrow.
-    if (_rehookEdgeId && st.currentTool !== 'addEdge' && _draggingAnchorIds.size === 0) {
+    if (
+      _rehookEdgeId &&
+      st.currentTool !== "addEdge" &&
+      _draggingAnchorIds.size === 0
+    ) {
       const edgeData = st.edges.get(_rehookEdgeId);
       if (isRehookable(edgeData)) {
         const fromNode = st.nodes.get(edgeData.from);
-        if (fromNode && fromNode.shapeType !== 'anchor') {
-          drawPortDots(ctx, edgeData.from, _rehookHoveredNodeId === edgeData.from ? _rehookHoveredPortKey : null);
+        if (fromNode && fromNode.shapeType !== "anchor") {
+          drawPortDots(
+            ctx,
+            edgeData.from,
+            _rehookHoveredNodeId === edgeData.from
+              ? _rehookHoveredPortKey
+              : null,
+          );
         }
         const toNode = st.nodes.get(edgeData.to);
-        if (toNode && toNode.shapeType !== 'anchor') {
-          drawPortDots(ctx, edgeData.to, _rehookHoveredNodeId === edgeData.to ? _rehookHoveredPortKey : null);
+        if (toNode && toNode.shapeType !== "anchor") {
+          drawPortDots(
+            ctx,
+            edgeData.to,
+            _rehookHoveredNodeId === edgeData.to ? _rehookHoveredPortKey : null,
+          );
         }
       }
     }
   });
   // Two-click free-arrow: draw an orange dot at the pending first-click origin.
-  st.network.on('afterDrawing', (ctx) => {
-    if (st.currentTool !== 'addEdge' || !st.freeArrowFirstPoint) return;
+  st.network.on("afterDrawing", (ctx) => {
+    if (st.currentTool !== "addEdge" || !st.freeArrowFirstPoint) return;
     const { x, y } = st.freeArrowFirstPoint;
     ctx.beginPath();
     ctx.arc(x, y, 6, 0, Math.PI * 2);
-    ctx.fillStyle = '#f97316';
+    ctx.fillStyle = "#f97316";
     ctx.fill();
-    ctx.strokeStyle = '#ffffff';
+    ctx.strokeStyle = "#ffffff";
     ctx.lineWidth = 2;
     ctx.stroke();
   });
@@ -373,13 +524,13 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
   // hit-detection — this avoids a race with vis-network's capture-phase handlers
   // which may run first and alter selection state before our mousedown fires.
   {
-    let _lr             = null; // active resize: { edgeId, bboxCx, bboxCy, rotation }
-    let _hoverHandle    = null; // { edgeId, bboxCx, bboxCy, rotation } | null
-    let _ld             = null; // active label drag: { edgeId, startMouse, startOffsetX, startOffsetY, dragging }
+    let _lr = null; // active resize: { edgeId, bboxCx, bboxCy, rotation }
+    let _hoverHandle = null; // { edgeId, bboxCx, bboxCy, rotation } | null
+    let _ld = null; // active label drag: { edgeId, startMouse, startOffsetX, startOffsetY, dragging }
     let _hoverLabelDrag = null; // { edgeId } | null
 
     // Draw handles for the selected edge label.
-    st.network.on('afterDrawing', (ctx) => {
+    st.network.on("afterDrawing", (ctx) => {
       if (!st.selectedEdgeIds || st.selectedEdgeIds.length !== 1) return;
       const edgeId = st.selectedEdgeIds[0];
       const e = st.edges.get(edgeId);
@@ -393,9 +544,9 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
       for (const hx of [-bbox.w / 2, bbox.w / 2]) {
         ctx.beginPath();
         ctx.arc(hx, 0, 5, 0, Math.PI * 2);
-        ctx.fillStyle   = '#f97316';
-        ctx.strokeStyle = '#ffffff';
-        ctx.lineWidth   = 1.5;
+        ctx.fillStyle = "#f97316";
+        ctx.strokeStyle = "#ffffff";
+        ctx.lineWidth = 1.5;
         ctx.fill();
         ctx.stroke();
       }
@@ -405,23 +556,36 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
     function edgeLabelHitAt(clientX, clientY) {
       if (!st.network || !st.edgeLabelBBox) return;
       const rect = container.getBoundingClientRect();
-      const cp = st.network.DOMtoCanvas({ x: clientX - rect.left, y: clientY - rect.top });
+      const cp = st.network.DOMtoCanvas({
+        x: clientX - rect.left,
+        y: clientY - rect.top,
+      });
       const hr = 8 / st.network.getScale();
 
       // ── Resize handle detection ──────────────────────────────────────────────
-      for (const edgeId of (st.selectedEdgeIds || [])) {
+      for (const edgeId of st.selectedEdgeIds || []) {
         const edge = st.edges && st.edges.get(edgeId);
         if (!edge || !edge.label) continue;
         const bbox = st.edgeLabelBBox[edgeId];
         if (!bbox) continue;
 
-        const r  = -(bbox.rotation || 0);
-        const dx = cp.x - bbox.cx, dy = cp.y - bbox.cy;
+        const r = -(bbox.rotation || 0);
+        const dx = cp.x - bbox.cx,
+          dy = cp.y - bbox.cy;
         const lx = dx * Math.cos(r) - dy * Math.sin(r);
         const ly = dx * Math.sin(r) + dy * Math.cos(r);
 
-        if (Math.hypot(lx - (-bbox.w / 2), ly) < hr || Math.hypot(lx - (bbox.w / 2), ly) < hr) {
-          return { type: 'handle', edgeId, bboxCx: bbox.cx, bboxCy: bbox.cy, rotation: bbox.rotation || 0 };
+        if (
+          Math.hypot(lx - -bbox.w / 2, ly) < hr ||
+          Math.hypot(lx - bbox.w / 2, ly) < hr
+        ) {
+          return {
+            type: "handle",
+            edgeId,
+            bboxCx: bbox.cx,
+            bboxCy: bbox.cy,
+            rotation: bbox.rotation || 0,
+          };
         }
       }
 
@@ -432,12 +596,13 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
         if (edge && edge.label) {
           const bbox = st.edgeLabelBBox && st.edgeLabelBBox[edgeId];
           if (bbox) {
-            const r  = -(bbox.rotation || 0);
-            const dx = cp.x - bbox.cx, dy = cp.y - bbox.cy;
+            const r = -(bbox.rotation || 0);
+            const dx = cp.x - bbox.cx,
+              dy = cp.y - bbox.cy;
             const lx = dx * Math.cos(r) - dy * Math.sin(r);
             const ly = dx * Math.sin(r) + dy * Math.cos(r);
             if (Math.abs(lx) <= bbox.w / 2 && Math.abs(ly) <= bbox.h / 2) {
-              return { type: 'label', edgeId };
+              return { type: "label", edgeId };
             }
           }
         }
@@ -447,19 +612,30 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
     }
 
     // Track hover during mousemove — computed before any mousedown fires.
-    container.addEventListener('mousemove', (e) => {
+    container.addEventListener("mousemove", (e) => {
       const hit = edgeLabelHitAt(e.clientX, e.clientY);
-      const found = hit && hit.type === 'handle'
-        ? { edgeId: hit.edgeId, bboxCx: hit.bboxCx, bboxCy: hit.bboxCy, rotation: hit.rotation }
-        : null;
+      const found =
+        hit && hit.type === "handle"
+          ? {
+              edgeId: hit.edgeId,
+              bboxCx: hit.bboxCx,
+              bboxCy: hit.bboxCy,
+              rotation: hit.rotation,
+            }
+          : null;
       if (Boolean(found) !== Boolean(_hoverHandle)) {
-        container.style.cursor = found ? 'ew-resize' : (_hoverLabelDrag ? 'grab' : '');
+        container.style.cursor = found
+          ? "ew-resize"
+          : _hoverLabelDrag
+            ? "grab"
+            : "";
       }
       _hoverHandle = found;
 
-      const labelFound = !found && hit && hit.type === 'label' ? { edgeId: hit.edgeId } : null;
+      const labelFound =
+        !found && hit && hit.type === "label" ? { edgeId: hit.edgeId } : null;
       if (Boolean(labelFound) !== Boolean(_hoverLabelDrag)) {
-        if (!found) container.style.cursor = labelFound ? 'grab' : '';
+        if (!found) container.style.cursor = labelFound ? "grab" : "";
       }
       _hoverLabelDrag = labelFound;
     });
@@ -468,14 +644,19 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
       if (e.button !== 0) return false;
       if (!container.contains(e.target)) return false;
       const hit = edgeLabelHitAt(e.clientX, e.clientY);
-      if (hit && hit.type === 'handle') {
+      if (hit && hit.type === "handle") {
         e.preventDefault();
         e.stopImmediatePropagation();
-        _hoverHandle = { edgeId: hit.edgeId, bboxCx: hit.bboxCx, bboxCy: hit.bboxCy, rotation: hit.rotation };
+        _hoverHandle = {
+          edgeId: hit.edgeId,
+          bboxCx: hit.bboxCx,
+          bboxCy: hit.bboxCy,
+          rotation: hit.rotation,
+        };
         _lr = { ..._hoverHandle, dragging: false };
         st.network.setOptions({ interaction: { dragView: false } });
         return true;
-      } else if (hit && hit.type === 'label') {
+      } else if (hit && hit.type === "label") {
         const edge = st.edges && st.edges.get(hit.edgeId);
         if (!edge) return false;
         e.preventDefault();
@@ -500,69 +681,103 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
     // Mousedown: start resize (handles take priority) or label drag.
     // The document-level capture listener runs before vis-network's internal
     // pointer handlers, so a node underneath the edge label cannot start moving.
-    document.addEventListener('pointerdown', startEdgeLabelPointerInteraction, {
+    document.addEventListener("pointerdown", startEdgeLabelPointerInteraction, {
       capture: true,
       signal: _edgeLabelPointerAbort.signal,
     });
-    document.addEventListener('mousedown', startEdgeLabelPointerInteraction, {
+    document.addEventListener("mousedown", startEdgeLabelPointerInteraction, {
       capture: true,
       signal: _edgeLabelPointerAbort.signal,
     });
-    container.addEventListener('pointerdown', (e) => {
-      startEdgeLabelPointerInteraction(e);
-    }, { capture: true, signal: _edgeLabelPointerAbort.signal });
-    container.addEventListener('mousedown', (e) => {
-      startEdgeLabelPointerInteraction(e);
-    }, { capture: true, signal: _edgeLabelPointerAbort.signal });
-
-    document.addEventListener('dblclick', (e) => {
-      if (!container.contains(e.target)) return;
-      const hit = edgeLabelHitAt(e.clientX, e.clientY);
-      if (!hit || hit.type !== 'label') return;
+    container.addEventListener(
+      "pointerdown",
+      (e) => {
+        startEdgeLabelPointerInteraction(e);
+      },
+      { capture: true, signal: _edgeLabelPointerAbort.signal },
+    );
+    container.addEventListener(
+      "mousedown",
+      (e) => {
+        startEdgeLabelPointerInteraction(e);
+      },
+      { capture: true, signal: _edgeLabelPointerAbort.signal },
+    );
 
-      e.preventDefault();
-      e.stopImmediatePropagation();
-      _lr = null;
-      _ld = null;
-      st.network.setOptions({ interaction: { dragView: true } });
-      st.selectedNodeIds = [];
-      st.selectedEdgeIds = [hit.edgeId];
-      st.network.setSelection({ nodes: [], edges: [hit.edgeId] });
-      hideNodePanel();
-      showEdgePanel();
-      startEdgeLabelEdit();
-    }, { capture: true, signal: _edgeLabelPointerAbort.signal });
+    document.addEventListener(
+      "dblclick",
+      (e) => {
+        if (!container.contains(e.target)) return;
+        const hit = edgeLabelHitAt(e.clientX, e.clientY);
+        if (!hit || hit.type !== "label") return;
+
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        _lr = null;
+        _ld = null;
+        st.network.setOptions({ interaction: { dragView: true } });
+        st.selectedNodeIds = [];
+        st.selectedEdgeIds = [hit.edgeId];
+        st.network.setSelection({ nodes: [], edges: [hit.edgeId] });
+        hideNodePanel();
+        showEdgePanel();
+        startEdgeLabelEdit();
+      },
+      { capture: true, signal: _edgeLabelPointerAbort.signal },
+    );
 
     // Update width (resize) or offset (label drag) while dragging.
     function onEdgeLabelPointerMove(e) {
       if (!st.network) return;
       if (_lr) {
-        if (!_lr.dragging) { _lr.dragging = true; pushSnapshot(); }
+        if (!_lr.dragging) {
+          _lr.dragging = true;
+          pushSnapshot();
+        }
         const rect = container.getBoundingClientRect();
-        const cp   = st.network.DOMtoCanvas({ x: e.clientX - rect.left, y: e.clientY - rect.top });
-        const r    = -_lr.rotation;
-        const dx   = cp.x - _lr.bboxCx, dy = cp.y - _lr.bboxCy;
-        const lx   = dx * Math.cos(r) - dy * Math.sin(r);
-        st.edges.update({ id: _lr.edgeId, edgeLabelWidth: Math.max(40, Math.abs(lx) * 2) });
+        const cp = st.network.DOMtoCanvas({
+          x: e.clientX - rect.left,
+          y: e.clientY - rect.top,
+        });
+        const r = -_lr.rotation;
+        const dx = cp.x - _lr.bboxCx,
+          dy = cp.y - _lr.bboxCy;
+        const lx = dx * Math.cos(r) - dy * Math.sin(r);
+        st.edges.update({
+          id: _lr.edgeId,
+          edgeLabelWidth: Math.max(40, Math.abs(lx) * 2),
+        });
         st.network.redraw();
       }
       if (_ld) {
         if (!_ld.dragging) {
-          if (Math.hypot(e.clientX - _ld.startMouse.x, e.clientY - _ld.startMouse.y) < 4) return;
+          if (
+            Math.hypot(
+              e.clientX - _ld.startMouse.x,
+              e.clientY - _ld.startMouse.y,
+            ) < 4
+          )
+            return;
           _ld.dragging = true;
           pushSnapshot();
         }
         const scale = st.network.getScale();
         st.edges.update({
           id: _ld.edgeId,
-          edgeLabelOffsetX: _ld.startOffsetX + (e.clientX - _ld.startMouse.x) / scale,
-          edgeLabelOffsetY: _ld.startOffsetY + (e.clientY - _ld.startMouse.y) / scale,
+          edgeLabelOffsetX:
+            _ld.startOffsetX + (e.clientX - _ld.startMouse.x) / scale,
+          edgeLabelOffsetY:
+            _ld.startOffsetY + (e.clientY - _ld.startMouse.y) / scale,
         });
         st.network.redraw();
       }
     }
-    document.addEventListener('pointermove', onEdgeLabelPointerMove, { signal: _edgeLabelPointerAbort.signal });
-    document.addEventListener('mousemove', onEdgeLabelPointerMove, { signal: _edgeLabelPointerAbort.signal });
+    document.addEventListener("pointermove", onEdgeLabelPointerMove, {
+      signal: _edgeLabelPointerAbort.signal,
+    });
+    document.addEventListener("mousemove", onEdgeLabelPointerMove, {
+      signal: _edgeLabelPointerAbort.signal,
+    });
 
     // Commit on mouseup.
     function onEdgeLabelPointerUp() {
@@ -576,10 +791,18 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
         if (_ld.dragging) markDirty();
         _ld = null;
       }
-      container.style.cursor = _hoverHandle ? 'ew-resize' : (_hoverLabelDrag ? 'grab' : '');
+      container.style.cursor = _hoverHandle
+        ? "ew-resize"
+        : _hoverLabelDrag
+          ? "grab"
+          : "";
     }
-    document.addEventListener('pointerup', onEdgeLabelPointerUp, { signal: _edgeLabelPointerAbort.signal });
-    document.addEventListener('mouseup', onEdgeLabelPointerUp, { signal: _edgeLabelPointerAbort.signal });
+    document.addEventListener("pointerup", onEdgeLabelPointerUp, {
+      signal: _edgeLabelPointerAbort.signal,
+    });
+    document.addEventListener("mouseup", onEdgeLabelPointerUp, {
+      signal: _edgeLabelPointerAbort.signal,
+    });
   }
 
   // ── Free-arrow body drag ──────────────────────────────────────────────────────
@@ -588,25 +811,43 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
   // Fix: capture mousedown on the edge body, disable dragView, move anchors manually.
   {
     let _fad = null; // free-arrow drag state
-    container.addEventListener('mousedown', (e) => {
-      if (e.button !== 0 || !st.network) return;
-      const domPos = { x: e.offsetX, y: e.offsetY };
-      // If the click landed on a node (including an anchor endpoint), don't intercept:
-      // the user wants to move only that endpoint (pivot), not the whole arrow.
-      if (st.network.getNodeAt(domPos)) return;
-      const edgeId = st.network.getEdgeAt(domPos);
-      if (!edgeId) return;
-      const edge  = st.edges.get(edgeId);
-      if (!edge)  return;
-      const fromN = st.nodes.get(edge.from);
-      const toN   = st.nodes.get(edge.to);
-      if (!(fromN && fromN.shapeType === 'anchor' && toN && toN.shapeType === 'anchor')) return;
-      const startPos = st.network.getPositions([edge.from, edge.to]);
-      _fad = { edgeId, fromId: edge.from, toId: edge.to,
-               startMouse: { x: e.clientX, y: e.clientY }, startPos, dragging: false };
-    }, { capture: true });
-
-    document.addEventListener('mousemove', (e) => {
+    container.addEventListener(
+      "mousedown",
+      (e) => {
+        if (e.button !== 0 || !st.network) return;
+        const domPos = { x: e.offsetX, y: e.offsetY };
+        // If the click landed on a node (including an anchor endpoint), don't intercept:
+        // the user wants to move only that endpoint (pivot), not the whole arrow.
+        if (st.network.getNodeAt(domPos)) return;
+        const edgeId = st.network.getEdgeAt(domPos);
+        if (!edgeId) return;
+        const edge = st.edges.get(edgeId);
+        if (!edge) return;
+        const fromN = st.nodes.get(edge.from);
+        const toN = st.nodes.get(edge.to);
+        if (
+          !(
+            fromN &&
+            fromN.shapeType === "anchor" &&
+            toN &&
+            toN.shapeType === "anchor"
+          )
+        )
+          return;
+        const startPos = st.network.getPositions([edge.from, edge.to]);
+        _fad = {
+          edgeId,
+          fromId: edge.from,
+          toId: edge.to,
+          startMouse: { x: e.clientX, y: e.clientY },
+          startPos,
+          dragging: false,
+        };
+      },
+      { capture: true },
+    );
+
+    document.addEventListener("mousemove", (e) => {
       if (!_fad || !st.network) return;
       const dx = e.clientX - _fad.startMouse.x;
       const dy = e.clientY - _fad.startMouse.y;
@@ -619,13 +860,19 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
       const scale = st.network.getScale();
       const fp = _fad.startPos[_fad.fromId];
       const tp = _fad.startPos[_fad.toId];
-      const snap = (x, y) => st.gridEnabled ? snapToGrid(x, y) : { x, y };
-      if (fp) { const p = snap(fp.x + dx / scale, fp.y + dy / scale); st.network.moveNode(_fad.fromId, p.x, p.y); }
-      if (tp) { const p = snap(tp.x + dx / scale, tp.y + dy / scale); st.network.moveNode(_fad.toId,   p.x, p.y); }
+      const snap = (x, y) => (st.gridEnabled ? snapToGrid(x, y) : { x, y });
+      if (fp) {
+        const p = snap(fp.x + dx / scale, fp.y + dy / scale);
+        st.network.moveNode(_fad.fromId, p.x, p.y);
+      }
+      if (tp) {
+        const p = snap(tp.x + dx / scale, tp.y + dy / scale);
+        st.network.moveNode(_fad.toId, p.x, p.y);
+      }
       st.network.redraw();
     });
 
-    document.addEventListener('mouseup', () => {
+    document.addEventListener("mouseup", () => {
       if (!_fad) return;
       if (_fad.dragging) {
         st.network.setOptions({ interaction: { dragView: true } });
@@ -642,67 +889,90 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
   // Path B — two successive CLICKS on empty canvas → free-standing anchor→anchor.
   //          Uses vis-network's own 'click' event: Hammer.js fires 'click' only
   //          for taps, NOT for drags, so Path A drags never bleed into Path B.
-  let _addEdgeFromId   = null;
-  let _addEdgeFromPort = null;  // port key on the source node (null = no port)
+  let _addEdgeFromId = null;
+  let _addEdgeFromPort = null; // port key on the source node (null = no port)
   // _hoveredPortNodeId, _hoveredPortKey, _draggingAnchorIds are module-level.
-  const visCanvas = document.getElementById('vis-canvas');
+  const visCanvas = document.getElementById("vis-canvas");
 
   // Track hovered node + nearest port while in addEdge mode OR while dragging an anchor.
-  visCanvas.addEventListener('mousemove', (e) => {
-    const inAddEdge    = st.currentTool === 'addEdge';
+  visCanvas.addEventListener("mousemove", (e) => {
+    const inAddEdge = st.currentTool === "addEdge";
     const anchorDragging = _draggingAnchorIds.size > 0;
     if ((!inAddEdge && !anchorDragging) || !st.network) return;
 
     const pos = { x: e.offsetX, y: e.offsetY };
-    const cp  = st.network.DOMtoCanvas(pos);
+    const cp = st.network.DOMtoCanvas(pos);
 
     let newPortNodeId = null;
 
     if (inAddEdge) {
       // addEdge mode: use getNodeAt as before
-      const nodeId   = st.network.getNodeAt(pos) || null;
+      const nodeId = st.network.getNodeAt(pos) || null;
       const nodeData = nodeId && st.nodes.get(nodeId);
-      const isAnchor = nodeData && nodeData.shapeType === 'anchor';
+      const isAnchor = nodeData && nodeData.shapeType === "anchor";
       const isLocked = nodeData && nodeData.locked;
-      newPortNodeId  = (nodeId && !isAnchor && !isLocked) ? nodeId : null;
+      newPortNodeId = nodeId && !isAnchor && !isLocked ? nodeId : null;
     } else {
       // Anchor drag: getNodeAt returns the dragged anchor itself — do a canvas-space
       // bounding-box search for any non-anchor node that contains the cursor.
       const SNAP_THRESHOLD = 30;
-      let bestId   = null;
+      let bestId = null;
       let bestDist = Infinity;
-      for (const [candidateId, candidatePos] of Object.entries(st.network.getPositions())) {
+      for (const [candidateId, candidatePos] of Object.entries(
+        st.network.getPositions(),
+      )) {
         if (_draggingAnchorIds.has(candidateId)) continue;
         const candidate = st.nodes.get(candidateId);
-        if (!candidate || candidate.shapeType === 'anchor') continue;
+        if (!candidate || candidate.shapeType === "anchor") continue;
         const bodyNode = st.network.body.nodes[candidateId];
         if (!bodyNode) continue;
-        const w = (bodyNode.shape && bodyNode.shape.width)  || SHAPE_DEFAULTS[candidate.shapeType]?.width  || 120;
-        const h = (bodyNode.shape && bodyNode.shape.height) || SHAPE_DEFAULTS[candidate.shapeType]?.height || 60;
-        const inBox = cp.x >= candidatePos.x - w / 2 - SNAP_THRESHOLD &&
-                      cp.x <= candidatePos.x + w / 2 + SNAP_THRESHOLD &&
-                      cp.y >= candidatePos.y - h / 2 - SNAP_THRESHOLD &&
-                      cp.y <= candidatePos.y + h / 2 + SNAP_THRESHOLD;
+        const w =
+          (bodyNode.shape && bodyNode.shape.width) ||
+          SHAPE_DEFAULTS[candidate.shapeType]?.width ||
+          120;
+        const h =
+          (bodyNode.shape && bodyNode.shape.height) ||
+          SHAPE_DEFAULTS[candidate.shapeType]?.height ||
+          60;
+        const inBox =
+          cp.x >= candidatePos.x - w / 2 - SNAP_THRESHOLD &&
+          cp.x <= candidatePos.x + w / 2 + SNAP_THRESHOLD &&
+          cp.y >= candidatePos.y - h / 2 - SNAP_THRESHOLD &&
+          cp.y <= candidatePos.y + h / 2 + SNAP_THRESHOLD;
         if (inBox) {
           const dist = Math.hypot(candidatePos.x - cp.x, candidatePos.y - cp.y);
-          if (dist < bestDist) { bestDist = dist; bestId = candidateId; }
+          if (dist < bestDist) {
+            bestDist = dist;
+            bestId = candidateId;
+          }
         }
       }
       newPortNodeId = bestId;
     }
 
     const newPortKey = newPortNodeId ? getNearestPort(newPortNodeId, cp) : null;
-    if (newPortNodeId !== _hoveredPortNodeId || newPortKey !== _hoveredPortKey) {
+    if (
+      newPortNodeId !== _hoveredPortNodeId ||
+      newPortKey !== _hoveredPortKey
+    ) {
       _hoveredPortNodeId = newPortNodeId;
-      _hoveredPortKey    = newPortKey;
+      _hoveredPortKey = newPortKey;
       st.network.redraw();
     }
   });
 
   // Rehook hover: track the nearest port on the from/to nodes of the selected port edge.
-  visCanvas.addEventListener('mousemove', (e) => {
-    if (!st.network || st.currentTool === 'addEdge' || _draggingAnchorIds.size > 0) return;
-    const selectedEdge = st.selectedEdgeIds.length === 1 ? st.edges.get(st.selectedEdgeIds[0]) : null;
+  visCanvas.addEventListener("mousemove", (e) => {
+    if (
+      !st.network ||
+      st.currentTool === "addEdge" ||
+      _draggingAnchorIds.size > 0
+    )
+      return;
+    const selectedEdge =
+      st.selectedEdgeIds.length === 1
+        ? st.edges.get(st.selectedEdgeIds[0])
+        : null;
     if (!isRehookable(selectedEdge)) {
       if (_rehookEdgeId !== null) {
         _rehookEdgeId = _rehookHoveredNodeId = _rehookHoveredPortKey = null;
@@ -714,79 +984,99 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
     _rehookEdgeId = selectedEdge.id;
     const cp = st.network.DOMtoCanvas({ x: e.offsetX, y: e.offsetY });
     const REHOOK_THRESHOLD = 15; // world units
-    let newNodeId   = null;
-    let newPortKey  = null;
+    let newNodeId = null;
+    let newPortKey = null;
     let closestDist = Infinity;
 
     for (const nodeId of [selectedEdge.from, selectedEdge.to]) {
       const nodeData = st.nodes.get(nodeId);
-      if (!nodeData || nodeData.shapeType === 'anchor') continue;
+      if (!nodeData || nodeData.shapeType === "anchor") continue;
       const portKey = getNearestPort(nodeId, cp);
       const portPos = getPortPosition(nodeId, portKey);
       if (!portPos) continue;
       const dist = Math.hypot(cp.x - portPos.x, cp.y - portPos.y);
       if (dist <= REHOOK_THRESHOLD && dist < closestDist) {
         closestDist = dist;
-        newNodeId  = nodeId;
+        newNodeId = nodeId;
         newPortKey = portKey;
       }
     }
 
-    if (newNodeId !== _rehookHoveredNodeId || newPortKey !== _rehookHoveredPortKey) {
-      _rehookHoveredNodeId  = newNodeId;
+    if (
+      newNodeId !== _rehookHoveredNodeId ||
+      newPortKey !== _rehookHoveredPortKey
+    ) {
+      _rehookHoveredNodeId = newNodeId;
       _rehookHoveredPortKey = newPortKey;
       st.network.redraw();
     }
   });
 
   // Path A – capture source node on mousedown.
-  visCanvas.addEventListener('mousedown', (e) => {
-    if (st.currentTool !== 'addEdge') return;
-    const nodeId   = st.network.getNodeAt({ x: e.offsetX, y: e.offsetY }) || null;
+  visCanvas.addEventListener("mousedown", (e) => {
+    if (st.currentTool !== "addEdge") return;
+    const nodeId = st.network.getNodeAt({ x: e.offsetX, y: e.offsetY }) || null;
     const nodeData = nodeId && st.nodes.get(nodeId);
     // Block starting an edge from a locked node or an anchor (free-arrow endpoint).
-    if (nodeData && (nodeData.locked || nodeData.shapeType === 'anchor')) { _addEdgeFromId = null; return; }
+    if (nodeData && (nodeData.locked || nodeData.shapeType === "anchor")) {
+      _addEdgeFromId = null;
+      return;
+    }
     // Dragging from a real node cancels any pending two-click origin.
     if (nodeId) st.freeArrowFirstPoint = null;
-    _addEdgeFromId   = nodeId;
+    _addEdgeFromId = nodeId;
     _addEdgeFromPort = _hoveredPortKey;
   });
 
   // Path A – release on empty canvas creates the anchor endpoint.
-  visCanvas.addEventListener('mouseup', (e) => {
-    if (st.currentTool !== 'addEdge' || !_addEdgeFromId) { _addEdgeFromId = null; return; }
-    const pos        = { x: e.offsetX, y: e.offsetY };
-    const targetId   = st.network.getNodeAt(pos);
+  visCanvas.addEventListener("mouseup", (e) => {
+    if (st.currentTool !== "addEdge" || !_addEdgeFromId) {
+      _addEdgeFromId = null;
+      return;
+    }
+    const pos = { x: e.offsetX, y: e.offsetY };
+    const targetId = st.network.getNodeAt(pos);
     const targetData = targetId && st.nodes.get(targetId);
     // Locked targets are non-interactive: treat them exactly like empty canvas
     // so a free-arrow endpoint is created at the release point — matches the
     // behaviour of free arrows drawn over a locked shape (Path B).
-    // Also: if the target sits BELOW the source in z-order (e.g. a post-it on
-    // top of a background image), don't bind to it — the user is aiming at a
-    // point on top of the source's layer, not at the underlying shape.
+    // Also: if the source sits on top of a lower-z target that contains it
+    // (e.g. a post-it on a background image), don't bind to that background.
     const targetLocked = !!(targetData && targetData.locked);
-    const sourceZ      = st.canonicalOrder.indexOf(_addEdgeFromId);
-    const targetZ      = targetId ? st.canonicalOrder.indexOf(targetId) : -1;
-    const targetBelow  = targetId && sourceZ !== -1 && targetZ !== -1 && targetZ < sourceZ;
-    if (!targetId || targetLocked || targetBelow) {
+    const targetContainsSource =
+      targetId && lowerZTargetContainsSource(_addEdgeFromId, targetId);
+    if (!targetId || targetLocked || targetContainsSource) {
       pushSnapshot();
-      const cp       = st.network.DOMtoCanvas(pos);
-      const anchorId = 'a' + Date.now();
+      const cp = st.network.DOMtoCanvas(pos);
+      const anchorId = "a" + Date.now();
       st.nodes.add({
-        id: anchorId, label: '', shapeType: 'anchor', colorKey: 'c-gray',
-        nodeWidth: 8, nodeHeight: 8, fontSize: null, rotation: 0, labelRotation: 0,
-        x: cp.x, y: cp.y,
-        ...visNodeProps('anchor', 'c-gray', 8, 8, null, null, null),
+        id: anchorId,
+        label: "",
+        shapeType: "anchor",
+        colorKey: "c-gray",
+        nodeWidth: 8,
+        nodeHeight: 8,
+        fontSize: null,
+        rotation: 0,
+        labelRotation: 0,
+        x: cp.x,
+        y: cp.y,
+        ...visNodeProps("anchor", "c-gray", 8, 8, null, null, null),
       });
       st.edges.add({
-        id: 'e' + Date.now(), from: _addEdgeFromId, to: anchorId,
-        arrowDir: 'to', dashes: false,
+        id: "e" + Date.now(),
+        from: _addEdgeFromId,
+        to: anchorId,
+        arrowDir: "to",
+        dashes: false,
         smooth: { enabled: false },
-        ...visEdgeProps('to', false),
+        ...visEdgeProps("to", false),
       });
       markDirty();
       st.freeArrowFirstPoint = null;
-      setTimeout(() => { if (st.currentTool === 'addEdge') st.network.addEdgeMode(); }, 0);
+      setTimeout(() => {
+        if (st.currentTool === "addEdge") st.network.addEdgeMode();
+      }, 0);
     }
     _addEdgeFromId = null;
   });
@@ -794,8 +1084,8 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
   // Path B – two successive clicks on empty canvas → free-standing anchor→anchor arrow.
   // vis-network's 'click' event (via Hammer.js) only fires for taps, never for drags,
   // so Path A drag gestures cannot accidentally trigger Path B.
-  st.network.on('click', (params) => {
-    if (st.currentTool !== 'addEdge') return;
+  st.network.on("click", (params) => {
+    if (st.currentTool !== "addEdge") return;
     // Only handle clicks that landed on empty canvas (no node, no edge).
     if (params.nodes.length > 0 || params.edges.length > 0) return;
     const cp = params.pointer.canvas;
@@ -806,26 +1096,71 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
     } else {
       // Second click: create the free-standing anchor→anchor arrow.
       pushSnapshot();
-      const t           = Date.now();
-      const fromId      = 'a' + t;
-      const toId        = 'a' + (t + 1);
-      const anchorProps = visNodeProps('anchor', 'c-gray', 8, 8, null, null, null);
+      const t = Date.now();
+      const fromId = "a" + t;
+      const toId = "a" + (t + 1);
+      const anchorProps = visNodeProps(
+        "anchor",
+        "c-gray",
+        8,
+        8,
+        null,
+        null,
+        null,
+      );
       st.nodes.add([
-        { id: fromId, label: '', shapeType: 'anchor', colorKey: 'c-gray', nodeWidth: 8, nodeHeight: 8, fontSize: null, rotation: 0, labelRotation: 0, x: st.freeArrowFirstPoint.x, y: st.freeArrowFirstPoint.y, ...anchorProps },
-        { id: toId,   label: '', shapeType: 'anchor', colorKey: 'c-gray', nodeWidth: 8, nodeHeight: 8, fontSize: null, rotation: 0, labelRotation: 0, x: cp.x, y: cp.y, ...anchorProps },
+        {
+          id: fromId,
+          label: "",
+          shapeType: "anchor",
+          colorKey: "c-gray",
+          nodeWidth: 8,
+          nodeHeight: 8,
+          fontSize: null,
+          rotation: 0,
+          labelRotation: 0,
+          x: st.freeArrowFirstPoint.x,
+          y: st.freeArrowFirstPoint.y,
+          ...anchorProps,
+        },
+        {
+          id: toId,
+          label: "",
+          shapeType: "anchor",
+          colorKey: "c-gray",
+          nodeWidth: 8,
+          nodeHeight: 8,
+          fontSize: null,
+          rotation: 0,
+          labelRotation: 0,
+          x: cp.x,
+          y: cp.y,
+          ...anchorProps,
+        },
       ]);
-      const edgeId    = 'e' + t;
+      const edgeId = "e" + t;
       const lastStyle = getLastFreeArrowStyle();
-      const arrowDir  = lastStyle.arrowDir  || 'to';
-      const dashes    = lastStyle.dashes    || false;
+      const arrowDir = lastStyle.arrowDir || "to";
+      const dashes = lastStyle.dashes || false;
       st.edges.add({
-        id: edgeId, from: fromId, to: toId,
-        arrowDir, dashes,
+        id: edgeId,
+        from: fromId,
+        to: toId,
+        arrowDir,
+        dashes,
         edgeColor: lastStyle.edgeColor || null,
         edgeWidth: lastStyle.edgeWidth || null,
         smooth: { enabled: false },
         ...visEdgeProps(arrowDir, dashes),
-        ...(lastStyle.edgeColor ? { color: { color: lastStyle.edgeColor, highlight: '#f97316', hover: '#f97316' } } : {}),
+        ...(lastStyle.edgeColor
+          ? {
+              color: {
+                color: lastStyle.edgeColor,
+                highlight: "#f97316",
+                hover: "#f97316",
+              },
+            }
+          : {}),
         ...(lastStyle.edgeWidth ? { width: lastStyle.edgeWidth } : {}),
       });
       st.freeArrowFirstPoint = null;
@@ -840,18 +1175,18 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
     }
   });
 
-  document.getElementById('emptyState').classList.add('hidden');
+  document.getElementById("emptyState").classList.add("hidden");
   updateZoomDisplay();
 
   // vis-network initialises shape.width/height to 50 (not undefined), so
   // needsRefresh() returns false and resize() never runs on the first render.
   // Fix: reset shape.width/height to undefined so needsRefresh() returns true
   // and vis-network's own render loop runs resize() with the correct context.
-  st.network.once('afterDrawing', () => {
+  st.network.once("afterDrawing", () => {
     for (const id of st.network.body.nodeIndices) {
       const bn = st.network.body.nodes[id];
       if (!bn || !bn.shape) continue;
-      bn.shape.width  = undefined;
+      bn.shape.width = undefined;
       bn.shape.height = undefined;
     }
     // Patch CustomShape.distanceToBorder so anchor nodes report 0: arrow tips
@@ -867,7 +1202,7 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
       const orig = proto.distanceToBorder;
       proto.distanceToBorder = function (ctx, angle) {
         const data = st.nodes && st.nodes.get(this.options && this.options.id);
-        if (data && data.shapeType === 'anchor') return 0;
+        if (data && data.shapeType === "anchor") return 0;
         return orig.call(this, ctx, angle);
       };
       proto.__ldAnchorDistancePatched = true;
@@ -875,7 +1210,7 @@ export function initNetwork(savedNodes, savedEdges, edgesStraight = false) {
     }
     st.network.redraw();
   });
-  window.dispatchEvent(new CustomEvent('diagram:network-ready'));
+  window.dispatchEvent(new CustomEvent("diagram:network-ready"));
 }
 
 // ── Anchor snap-to-connect ────────────────────────────────────────────────────
@@ -891,10 +1226,12 @@ function _onAnchorSnapConnect(params) {
 
   for (const anchorId of params.nodes) {
     const anchor = st.nodes.get(anchorId);
-    if (!anchor || anchor.shapeType !== 'anchor') continue;
+    if (!anchor || anchor.shapeType !== "anchor") continue;
 
     // Find the edge this anchor belongs to (as from or to)
-    const connectedEdges = st.edges.get().filter(e => e.from === anchorId || e.to === anchorId);
+    const connectedEdges = st.edges
+      .get()
+      .filter((e) => e.from === anchorId || e.to === anchorId);
     if (connectedEdges.length === 0) continue;
 
     // Current position of dragged anchor
@@ -910,10 +1247,12 @@ function _onAnchorSnapConnect(params) {
     }
     siblingIds.delete(anchorId); // keep sibling (other endpoint) in set to block self-loop
 
-    let bestId   = null;
+    let bestId = null;
     let bestDist = Infinity;
 
-    for (const [candidateId, candidatePos] of Object.entries(st.network.getPositions())) {
+    for (const [candidateId, candidatePos] of Object.entries(
+      st.network.getPositions(),
+    )) {
       if (candidateId === anchorId) continue;
       if (siblingIds.has(candidateId)) continue; // would create a self-loop
 
@@ -922,26 +1261,33 @@ function _onAnchorSnapConnect(params) {
 
       const dist = Math.hypot(candidatePos.x - pos.x, candidatePos.y - pos.y);
 
-      if (candidate.shapeType === 'anchor') {
+      if (candidate.shapeType === "anchor") {
         // Snap to another anchor if within threshold
         if (dist < SNAP_THRESHOLD && dist < bestDist) {
-          bestId   = candidateId;
+          bestId = candidateId;
           bestDist = dist;
         }
       } else {
         // Snap to a regular node if anchor falls within its bounding box (padded by threshold)
         const bodyNode = st.network.body.nodes[candidateId];
         if (!bodyNode) continue;
-        const w = (bodyNode.shape && bodyNode.shape.width)  || SHAPE_DEFAULTS[candidate.shapeType]?.width  || 120;
-        const h = (bodyNode.shape && bodyNode.shape.height) || SHAPE_DEFAULTS[candidate.shapeType]?.height || 60;
+        const w =
+          (bodyNode.shape && bodyNode.shape.width) ||
+          SHAPE_DEFAULTS[candidate.shapeType]?.width ||
+          120;
+        const h =
+          (bodyNode.shape && bodyNode.shape.height) ||
+          SHAPE_DEFAULTS[candidate.shapeType]?.height ||
+          60;
         const cx = candidatePos.x;
         const cy = candidatePos.y;
-        const inBox = pos.x >= cx - w / 2 - SNAP_THRESHOLD &&
-                      pos.x <= cx + w / 2 + SNAP_THRESHOLD &&
-                      pos.y >= cy - h / 2 - SNAP_THRESHOLD &&
-                      pos.y <= cy + h / 2 + SNAP_THRESHOLD;
+        const inBox =
+          pos.x >= cx - w / 2 - SNAP_THRESHOLD &&
+          pos.x <= cx + w / 2 + SNAP_THRESHOLD &&
+          pos.y >= cy - h / 2 - SNAP_THRESHOLD &&
+          pos.y <= cy + h / 2 + SNAP_THRESHOLD;
         if (inBox && dist < bestDist) {
-          bestId   = candidateId;
+          bestId = candidateId;
           bestDist = dist;
         }
       }
@@ -949,17 +1295,21 @@ function _onAnchorSnapConnect(params) {
 
     if (!bestId) continue;
 
-    if (!snapped) { pushSnapshot(); snapped = true; }
+    if (!snapped) {
+      pushSnapshot();
+      snapped = true;
+    }
 
     // Determine which port to attach to on the target node (non-anchor targets only).
     const targetNode = st.nodes.get(bestId);
-    const isAnchorTarget = targetNode && targetNode.shapeType === 'anchor';
+    const isAnchorTarget = targetNode && targetNode.shapeType === "anchor";
     // Use the hovered port (computed by mousemove) when available; fall back to nearest port.
     let portKey = null;
     if (!isAnchorTarget) {
-      portKey = (_hoveredPortNodeId === bestId && _hoveredPortKey)
-        ? _hoveredPortKey
-        : getNearestPort(bestId, pos);
+      portKey =
+        _hoveredPortNodeId === bestId && _hoveredPortKey
+          ? _hoveredPortKey
+          : getNearestPort(bestId, pos);
     }
 
     // Reconnect every edge that uses this anchor as an endpoint
@@ -969,7 +1319,11 @@ function _onAnchorSnapConnect(params) {
         if (portKey) update.fromPort = portKey;
         // Port edges must be transparent ghosts so only drawPortEdge is visible.
         if (portKey || e.toPort) {
-          update.color  = { color: 'rgba(0,0,0,0)', highlight: 'rgba(0,0,0,0)', hover: 'rgba(0,0,0,0)' };
+          update.color = {
+            color: "rgba(0,0,0,0)",
+            highlight: "rgba(0,0,0,0)",
+            hover: "rgba(0,0,0,0)",
+          };
           update.arrows = { to: { enabled: false }, from: { enabled: false } };
         }
         st.edges.update(update);
@@ -979,7 +1333,11 @@ function _onAnchorSnapConnect(params) {
         if (portKey) update.toPort = portKey;
         // Port edges must be transparent ghosts so only drawPortEdge is visible.
         if (portKey || e.fromPort) {
-          update.color  = { color: 'rgba(0,0,0,0)', highlight: 'rgba(0,0,0,0)', hover: 'rgba(0,0,0,0)' };
+          update.color = {
+            color: "rgba(0,0,0,0)",
+            highlight: "rgba(0,0,0,0)",
+            hover: "rgba(0,0,0,0)",
+          };
           update.arrows = { to: { enabled: false }, from: { enabled: false } };
         }
         st.edges.update(update);
@@ -999,133 +1357,146 @@ function _onAnchorSnapConnect(params) {
 // labels to appear twice at different positions.
 function drawEdgeLabels(ctx) {
   try {
-  if (!st.edges || !st.network) return;
-
-  const m   = ctx.getTransform();
-  const dpr = window.devicePixelRatio || 1;
-  const canvasEl      = ctx.canvas;
-  const container     = document.getElementById('vis-canvas').parentElement;
-  const canvasRect    = canvasEl.getBoundingClientRect();
-  const containerRect = container.getBoundingClientRect();
-  const offsetX = canvasRect.left - containerRect.left;
-  const offsetY = canvasRect.top  - containerRect.top;
-
-  st.edges.get().forEach((e) => {
-    // Port edges draw their own labels inside drawPortEdge — skip here.
-    if (e.fromPort || e.toPort) return;
-
-    // Compute bezier midpoint in layout space for every edge (labeled or not)
-    // so the label editor always has an accurate DOM position to open at.
-    const bodyEdge = st.network.body.edges[e.id];
-    let mx, my;
-    if (bodyEdge && bodyEdge.edgeType && typeof bodyEdge.edgeType.getPoint === 'function') {
-      const pt = bodyEdge.edgeType.getPoint(0.5);
-      mx = pt.x;
-      my = pt.y;
-    } else {
-      const positions = st.network.getPositions([e.from, e.to]);
-      const fp = positions[e.from];
-      const tp = positions[e.to];
-      if (!fp || !tp) return;
-      mx = (fp.x + tp.x) / 2;
-      my = (fp.y + tp.y) / 2;
-    }
+    if (!st.edges || !st.network) return;
+
+    const m = ctx.getTransform();
+    const dpr = window.devicePixelRatio || 1;
+    const canvasEl = ctx.canvas;
+    const container = document.getElementById("vis-canvas").parentElement;
+    const canvasRect = canvasEl.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    const offsetX = canvasRect.left - containerRect.left;
+    const offsetY = canvasRect.top - containerRect.top;
+
+    st.edges.get().forEach((e) => {
+      // Port edges draw their own labels inside drawPortEdge — skip here.
+      if (e.fromPort || e.toPort) return;
+
+      // Compute bezier midpoint in layout space for every edge (labeled or not)
+      // so the label editor always has an accurate DOM position to open at.
+      const bodyEdge = st.network.body.edges[e.id];
+      let mx, my;
+      if (
+        bodyEdge &&
+        bodyEdge.edgeType &&
+        typeof bodyEdge.edgeType.getPoint === "function"
+      ) {
+        const pt = bodyEdge.edgeType.getPoint(0.5);
+        mx = pt.x;
+        my = pt.y;
+      } else {
+        const positions = st.network.getPositions([e.from, e.to]);
+        const fp = positions[e.from];
+        const tp = positions[e.to];
+        if (!fp || !tp) return;
+        mx = (fp.x + tp.x) / 2;
+        my = (fp.y + tp.y) / 2;
+      }
 
-    const ox = e.edgeLabelOffsetX || 0;
-    const oy = e.edgeLabelOffsetY || 0;
-    const lx = mx + ox;
-    const ly = my + oy;
+      const ox = e.edgeLabelOffsetX || 0;
+      const oy = e.edgeLabelOffsetY || 0;
+      const lx = mx + ox;
+      const ly = my + oy;
 
-    st.edgeLabelCanvasPos[e.id] = {
-      x: (m.a * lx + m.e) / dpr + offsetX,
-      y: (m.d * ly + m.f) / dpr + offsetY,
-    };
+      st.edgeLabelCanvasPos[e.id] = {
+        x: (m.a * lx + m.e) / dpr + offsetX,
+        y: (m.d * ly + m.f) / dpr + offsetY,
+      };
 
-    // Only draw the label text for edges that have one.
-    if (!e.label) return;
+      // Only draw the label text for edges that have one.
+      if (!e.label) return;
 
-    const fontSize   = e.fontSize || 11;
-    const lineHeight = fontSize * 1.5;
-    const PAD_X = 6, PAD_Y = 4;
+      const fontSize = e.fontSize || 11;
+      const lineHeight = fontSize * 1.5;
+      const PAD_X = 6,
+        PAD_Y = 4;
 
-    ctx.save();
-    ctx.translate(lx, ly);
-    if (e.labelRotation && Math.abs(e.labelRotation) > 0.001) {
-      ctx.rotate(e.labelRotation);
-    }
-    ctx.font = `${fontSize}px system-ui,-apple-system,sans-serif`;
-
-    const fixedW = e.edgeLabelWidth || null;
-    const innerW = fixedW ? fixedW - PAD_X * 2 : null;
-    const lines  = fixedW ? wrapText(ctx, e.label, innerW) : [e.label];
-    const textW  = fixedW ? innerW : ctx.measureText(e.label).width;
-    const boxW   = textW + PAD_X * 2;
-    const boxH   = lines.length * lineHeight + PAD_Y * 2;
-
-    // Always store bbox (needed for resize handles, even when not selected)
-    st.edgeLabelBBox[e.id] = {
-      cx: lx, cy: ly,
-      w: boxW, h: boxH,
-      rotation: e.labelRotation || 0,
-    };
-
-    const totalH   = lines.length * lineHeight;
-    const TEXT_PAD = 3;
-    const isDark   = document.documentElement.classList.contains('dark');
-    const bgFill   = isDark ? 'rgba(3,7,18,0.82)' : 'rgba(249,250,251,0.82)';
+      ctx.save();
+      ctx.translate(lx, ly);
+      if (e.labelRotation && Math.abs(e.labelRotation) > 0.001) {
+        ctx.rotate(e.labelRotation);
+      }
+      ctx.font = `${fontSize}px system-ui,-apple-system,sans-serif`;
+
+      const fixedW = e.edgeLabelWidth || null;
+      const innerW = fixedW ? fixedW - PAD_X * 2 : null;
+      const lines = fixedW ? wrapText(ctx, e.label, innerW) : [e.label];
+      const textW = fixedW ? innerW : ctx.measureText(e.label).width;
+      const boxW = textW + PAD_X * 2;
+      const boxH = lines.length * lineHeight + PAD_Y * 2;
+
+      // Always store bbox (needed for resize handles, even when not selected)
+      st.edgeLabelBBox[e.id] = {
+        cx: lx,
+        cy: ly,
+        w: boxW,
+        h: boxH,
+        rotation: e.labelRotation || 0,
+      };
 
-    // Opaque background tight around the text — makes the arrow appear to pass behind.
-    ctx.save();
-    ctx.fillStyle = bgFill;
-    ctx.fillRect(-textW / 2 - TEXT_PAD, -totalH / 2 - TEXT_PAD,
-                  textW + TEXT_PAD * 2,   totalH + TEXT_PAD * 2);
-    ctx.restore();
+      const totalH = lines.length * lineHeight;
+      const TEXT_PAD = 3;
+      const isDark = document.documentElement.classList.contains("dark");
+      const bgFill = isDark ? "rgba(3,7,18,0.82)" : "rgba(249,250,251,0.82)";
 
-    // Dashed border box — only when the edge is selected
-    if (st.selectedEdgeIds && st.selectedEdgeIds.includes(e.id)) {
+      // Opaque background tight around the text — makes the arrow appear to pass behind.
       ctx.save();
-      ctx.strokeStyle = '#9ca3af';
-      ctx.lineWidth   = 0.8;
-      ctx.setLineDash([3, 3]);
-      ctx.strokeRect(-boxW / 2, -boxH / 2, boxW, boxH);
-      ctx.setLineDash([]);
+      ctx.fillStyle = bgFill;
+      ctx.fillRect(
+        -textW / 2 - TEXT_PAD,
+        -totalH / 2 - TEXT_PAD,
+        textW + TEXT_PAD * 2,
+        totalH + TEXT_PAD * 2,
+      );
       ctx.restore();
-    }
 
-    ctx.fillStyle    = '#6b7280';
-    ctx.textAlign    = 'center';
-    ctx.textBaseline = 'middle';
-    lines.forEach((line, i) => {
-      const y = -totalH / 2 + i * lineHeight + lineHeight / 2;
-      ctx.fillText(line, 0, y);
-    });
+      // Dashed border box — only when the edge is selected
+      if (st.selectedEdgeIds && st.selectedEdgeIds.includes(e.id)) {
+        ctx.save();
+        ctx.strokeStyle = "#9ca3af";
+        ctx.lineWidth = 0.8;
+        ctx.setLineDash([3, 3]);
+        ctx.strokeRect(-boxW / 2, -boxH / 2, boxW, boxH);
+        ctx.setLineDash([]);
+        ctx.restore();
+      }
 
-    ctx.restore();
-  });
-  } catch(err) { console.error('[draw] EXCEPTION:', err); }
+      ctx.fillStyle = "#6b7280";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      lines.forEach((line, i) => {
+        const y = -totalH / 2 + i * lineHeight + lineHeight / 2;
+        ctx.fillText(line, 0, y);
+      });
+
+      ctx.restore();
+    });
+  } catch (err) {
+    console.error("[draw] EXCEPTION:", err);
+  }
 }
 
 // ── Network event handlers ────────────────────────────────────────────────────
 
 // Distance from point (px,py) to segment (ax,ay)-(bx,by) in canvas space.
 function _distToSegment(px, py, ax, ay, bx, by) {
-  const dx = bx - ax, dy = by - ay;
+  const dx = bx - ax,
+    dy = by - ay;
   const lenSq = dx * dx + dy * dy;
   if (lenSq === 0) return Math.hypot(px - ax, py - ay);
   const t = Math.max(0, Math.min(1, ((px - ax) * dx + (py - ay) * dy) / lenSq));
   return Math.hypot(px - (ax + t * dx), py - (ay + t * dy));
 }
 
-
 function nodeContainsCanvasPoint(id, canvasPos) {
-  const n  = st.nodes.get(id);
+  const n = st.nodes.get(id);
   const bn = st.network && st.network.body.nodes[id];
-  if (!n || !bn || n.shapeType === 'anchor') return false;
+  if (!n || !bn || n.shapeType === "anchor") return false;
 
-  const shapeType = n.shapeType || 'box';
-  const defaults  = SHAPE_DEFAULTS[shapeType] || [60, 28];
+  const shapeType = n.shapeType || "box";
+  const defaults = SHAPE_DEFAULTS[shapeType] || [60, 28];
   const W = n.nodeWidth || defaults[0];
-  const H = shapeType === 'circle' ? W : (n.nodeHeight || defaults[1]);
+  const H = shapeType === "circle" ? W : n.nodeHeight || defaults[1];
 
   const dx = canvasPos.x - bn.x;
   const dy = canvasPos.y - bn.y;
@@ -1133,15 +1504,26 @@ function nodeContainsCanvasPoint(id, canvasPos) {
   const lx = rot ? dx * Math.cos(-rot) - dy * Math.sin(-rot) : dx;
   const ly = rot ? dx * Math.sin(-rot) + dy * Math.cos(-rot) : dy;
 
-  if (shapeType === 'circle' || shapeType === 'ellipse') {
+  if (shapeType === "circle" || shapeType === "ellipse") {
     const rx = W / 2;
     const ry = H / 2;
-    return rx > 0 && ry > 0 && ((lx * lx) / (rx * rx) + (ly * ly) / (ry * ry)) <= 1;
+    return (
+      rx > 0 && ry > 0 && (lx * lx) / (rx * rx) + (ly * ly) / (ry * ry) <= 1
+    );
   }
 
   return Math.abs(lx) <= W / 2 && Math.abs(ly) <= H / 2;
 }
 
+function lowerZTargetContainsSource(sourceId, targetId) {
+  if (!sourceId || !targetId) return false;
+  const sourceZ = st.canonicalOrder.indexOf(sourceId);
+  const targetZ = st.canonicalOrder.indexOf(targetId);
+  if (sourceZ === -1 || targetZ === -1 || targetZ >= sourceZ) return false;
+  const sourcePos = st.network && st.network.getPositions([sourceId])[sourceId];
+  return !!(sourcePos && nodeContainsCanvasPoint(targetId, sourcePos));
+}
+
 // Returns the topmost (highest z-order) node containing canvasPos.
 // Ignores anchor nodes and respects st.canonicalOrder.
 function topmostNodeAt(canvasPos) {
@@ -1155,15 +1537,15 @@ function topmostNodeAt(canvasPos) {
 function edgeDrawLevel(edgeData) {
   if (!edgeData) return -1;
   const fromLevel = st.canonicalOrder.indexOf(edgeData.from);
-  const toLevel   = st.canonicalOrder.indexOf(edgeData.to);
+  const toLevel = st.canonicalOrder.indexOf(edgeData.to);
   if (fromLevel === -1 && toLevel === -1) return -1;
   if (fromLevel === -1) return toLevel;
   if (toLevel === -1) return fromLevel;
 
   const fromNode = st.nodes.get(edgeData.from);
-  const toNode   = st.nodes.get(edgeData.to);
-  const fromIsAnchor = fromNode && fromNode.shapeType === 'anchor';
-  const toIsAnchor   = toNode   && toNode.shapeType   === 'anchor';
+  const toNode = st.nodes.get(edgeData.to);
+  const fromIsAnchor = fromNode && fromNode.shapeType === "anchor";
+  const toIsAnchor = toNode && toNode.shapeType === "anchor";
   if (toIsAnchor && !fromIsAnchor) return fromLevel;
   if (fromIsAnchor && !toIsAnchor) return toLevel;
   return Math.max(fromLevel, toLevel);
@@ -1193,7 +1575,7 @@ function edgeLabelAtCanvasPoint(canvasPos) {
     const bbox = st.edgeLabelBBox[edge.id];
     if (!bbox) continue;
 
-    const r  = -(bbox.rotation || 0);
+    const r = -(bbox.rotation || 0);
     const dx = canvasPos.x - bbox.cx;
     const dy = canvasPos.y - bbox.cy;
     const lx = dx * Math.cos(r) - dy * Math.sin(r);
@@ -1212,24 +1594,28 @@ function edgeLabelAtCanvasPoint(canvasPos) {
 function isEdgeInteractive(edge) {
   if (!edge) return false;
   const fromN = st.nodes.get(edge.from);
-  const toN   = st.nodes.get(edge.to);
-  const isFreeArrow = fromN && fromN.shapeType === 'anchor' && toN && toN.shapeType === 'anchor';
+  const toN = st.nodes.get(edge.to);
+  const isFreeArrow =
+    fromN && fromN.shapeType === "anchor" && toN && toN.shapeType === "anchor";
   return isFreeArrow ? !(fromN.locked && toN.locked) : !edge.edgeLocked;
 }
 
 function selectableEdgesForNodes(nodeIds) {
   const selectedSet = new Set(nodeIds);
-  return st.edges.get().filter((e) => {
-    if (!selectedSet.has(e.from) || !selectedSet.has(e.to)) return false;
-    return isEdgeInteractive(e);
-  }).map((e) => e.id);
+  return st.edges
+    .get()
+    .filter((e) => {
+      if (!selectedSet.has(e.from) || !selectedSet.has(e.to)) return false;
+      return isEdgeInteractive(e);
+    })
+    .map((e) => e.id);
 }
 
 function selectNodesFromClick(nodeId, srcEvent) {
   const additive = !!(srcEvent && (srcEvent.metaKey || srcEvent.ctrlKey));
   const clicked = expandSelectionToGroup([nodeId]).filter((id) => {
     const n = st.nodes.get(id);
-    return n && !n.locked && n.shapeType !== 'anchor';
+    return n && !n.locked && n.shapeType !== "anchor";
   });
   if (!clicked.length) return;
 
@@ -1243,7 +1629,7 @@ function selectNodesFromClick(nodeId, srcEvent) {
     });
     nodeIds = Array.from(next).filter((id) => {
       const n = st.nodes.get(id);
-      return n && !n.locked && n.shapeType !== 'anchor';
+      return n && !n.locked && n.shapeType !== "anchor";
     });
   } else {
     nodeIds = clicked;
@@ -1267,62 +1653,107 @@ function selectNodesFromClick(nodeId, srcEvent) {
 
 function onDoubleClick(params) {
   const srcEvent = params.event && params.event.srcEvent;
-  const clientPos = srcEvent ? { x: srcEvent.clientX, y: srcEvent.clientY } : null;
+  const clientPos = srcEvent
+    ? { x: srcEvent.clientX, y: srcEvent.clientY }
+    : null;
   const labelEdgeId = edgeLabelAtCanvasPoint(params.pointer.canvas);
-  const nativeEdgeId = clientPos ? st.network.getEdgeAt(clientPos) : null;
-  const portEdge = nearestPortEdgeAt(params.pointer.canvas);
-  const edgeCandidates = [labelEdgeId, nativeEdgeId, portEdge && portEdge.id, ...params.edges]
-    .filter((id, index, list) => id && list.indexOf(id) === index)
-    .filter((id) => isEdgeInteractive(st.edges.get(id)));
-  const edgeId = edgeCandidates.reduce((bestId, id) => {
-    if (!bestId) return id;
-    return edgeDrawLevel(st.edges.get(id)) >= edgeDrawLevel(st.edges.get(bestId)) ? id : bestId;
-  }, null);
-
   const topNodeId = topmostNodeAt(params.pointer.canvas);
   const topNode = topNodeId && st.nodes.get(topNodeId);
-  const canEditTopNode = topNode && !topNode.locked && topNode.shapeType !== 'anchor';
-  const topNodeWins = canEditTopNode && !labelEdgeId && (!edgeId || st.canonicalOrder.indexOf(topNodeId) >= edgeDrawLevel(st.edges.get(edgeId)));
+  const canEditTopNode =
+    topNode && !topNode.locked && topNode.shapeType !== "anchor";
 
-  if (topNodeWins) {
+  // Direct node double-clicks must edit the node. Dense port-edge diagrams can
+  // have many visual edges crossing a node; those should not steal the edit.
+  // The only exception is an actual edge-label hit, which is intentional.
+  if (canEditTopNode && !labelEdgeId) {
     st.selectedNodeIds = [topNodeId];
     st.selectedEdgeIds = [];
     st.network.setSelection({ nodes: st.selectedNodeIds, edges: [] });
     showNodePanel();
     hideEdgePanel();
     startLabelEdit();
-  } else if (edgeId) {
+    return;
+  }
+
+  const nativeEdgeId = clientPos ? st.network.getEdgeAt(clientPos) : null;
+  const portEdge = nearestPortEdgeAt(params.pointer.canvas);
+  const edgeCandidates = [
+    labelEdgeId,
+    nativeEdgeId,
+    portEdge && portEdge.id,
+    ...params.edges,
+  ]
+    .filter((id, index, list) => id && list.indexOf(id) === index)
+    .filter((id) => isEdgeInteractive(st.edges.get(id)));
+  const edgeId = edgeCandidates.reduce((bestId, id) => {
+    if (!bestId) return id;
+    return edgeDrawLevel(st.edges.get(id)) >=
+      edgeDrawLevel(st.edges.get(bestId))
+      ? id
+      : bestId;
+  }, null);
+
+  if (edgeId) {
     st.selectedNodeIds = [];
     st.selectedEdgeIds = [edgeId];
     st.network.setSelection({ nodes: [], edges: [edgeId] });
     hideNodePanel();
     showEdgePanel();
     startEdgeLabelEdit();
-  } else if (st.currentTool === 'addNode' && st.pendingShape === 'image') {
+  } else if (st.currentTool === "addNode" && st.pendingShape === "image") {
     const canvasPos = params.pointer.canvas;
     pickAndCreateImageNode(canvasPos.x, canvasPos.y);
-  } else if (st.currentTool === 'addNode') {
+  } else if (st.currentTool === "addNode") {
     pushSnapshot();
-    const id         = 'n' + Date.now();
-    const defaults   = SHAPE_DEFAULTS[st.pendingShape] || [100, 40];
-    const fallbackColor = st.pendingShape === 'post-it' ? 'c-amber' : 'c-gray';
-    const lastStyle  = getLastNodeStyle(st.pendingShape);
-    const colorKey   = lastStyle.colorKey  || fallbackColor;
-    const fontSize   = lastStyle.fontSize  || null;
-    const textAlign  = lastStyle.textAlign  || null;
+    const id = "n" + Date.now();
+    const customShapeId = customShapeIdFromTool(st.pendingShape);
+    const shapeType = customShapeId ? CUSTOM_SHAPE_TYPE : st.pendingShape;
+    const customDef = customShapeId
+      ? getCustomShapeDefinition(customShapeId)
+      : null;
+    const defaults = customShapeId
+      ? getCustomShapeDefaultSize(customShapeId)
+      : SHAPE_DEFAULTS[shapeType] || [100, 40];
+    const fallbackColor = shapeType === "post-it" ? "c-amber" : "c-gray";
+    const lastStyle = getLastNodeStyle(shapeType);
+    const colorKey = lastStyle.colorKey || fallbackColor;
+    const fontSize = lastStyle.fontSize || null;
+    const textAlign = lastStyle.textAlign || null;
     const textValign = lastStyle.textValign || null;
-    const rawPos     = params.pointer.canvas;
-    const pos        = st.gridEnabled ? snapToGrid(rawPos.x, rawPos.y) : rawPos;
+    const rawPos = params.pointer.canvas;
+    const pos = st.gridEnabled ? snapToGrid(rawPos.x, rawPos.y) : rawPos;
     st.nodes.add({
-      id, label: st.pendingShape === 'text-free' ? t('diagram.label_input.placeholder') : 'Node',
-      shapeType: st.pendingShape, colorKey,
-      nodeWidth: defaults[0], nodeHeight: defaults[1],
-      fontSize, textAlign, textValign,
-      rotation: 0, labelRotation: 0,
-      x: pos.x, y: pos.y,
-      ...visNodeProps(st.pendingShape, colorKey, defaults[0], defaults[1], fontSize, textAlign, textValign),
+      id,
+      label:
+        shapeType === "text-free"
+          ? t("diagram.label_input.placeholder")
+          : customDef
+            ? customDef.name
+            : "Node",
+      shapeType,
+      customShapeId: customShapeId || null,
+      colorKey,
+      nodeWidth: defaults[0],
+      nodeHeight: defaults[1],
+      fontSize,
+      textAlign,
+      textValign,
+      rotation: 0,
+      labelRotation: 0,
+      x: pos.x,
+      y: pos.y,
+      ...visNodeProps(
+        shapeType,
+        colorKey,
+        defaults[0],
+        defaults[1],
+        fontSize,
+        textAlign,
+        textValign,
+      ),
     });
     markDirty();
+
     setTimeout(() => {
       st.network.selectNodes([id]);
       st.selectedNodeIds = [id];
@@ -1335,9 +1766,9 @@ function onDoubleClick(params) {
 // ── Image node creation ───────────────────────────────────────────────────────
 
 function pickAndCreateImageNode(canvasX, canvasY) {
-  const input = document.createElement('input');
-  input.type   = 'file';
-  input.accept = 'image/*';
+  const input = document.createElement("input");
+  input.type = "file";
+  input.accept = "image/*";
   input.onchange = async () => {
     const file = input.files && input.files[0];
     if (!file) return;
@@ -1347,7 +1778,7 @@ function pickAndCreateImageNode(canvasX, canvasY) {
       const src = await uploadImageFile(file, name);
       createImageNode(src, canvasX, canvasY);
     } catch {
-      showToast(t('diagram.toast.image_import_error'), 'error');
+      showToast(t("diagram.toast.image_import_error"), "error");
     }
   };
   input.click();
@@ -1355,32 +1786,47 @@ function pickAndCreateImageNode(canvasX, canvasY) {
 
 export function createImageNode(imageSrc, canvasX, canvasY) {
   if (!st.network) return;
-  const id      = 'n' + Date.now();
-  const captionId = id + 'c';
+  const id = "n" + Date.now();
+  const captionId = id + "c";
 
   const addNode = (nW, nH) => {
     pushSnapshot();
-    const filename   = imageSrc.split('/').pop() || '';
-    const textDefs   = SHAPE_DEFAULTS['text-free'];
-    const captionH   = textDefs[1];
-    const GAP        = 8;
+    const filename = imageSrc.split("/").pop() || "";
+    const textDefs = SHAPE_DEFAULTS["text-free"];
+    const captionH = textDefs[1];
+    const GAP = 8;
 
-    const groupId = 'g' + Date.now();
+    const groupId = "g" + Date.now();
     st.nodes.add({
-      id, label: '', imageSrc, groupId,
-      shapeType: 'image', colorKey: 'c-gray',
-      nodeWidth: nW, nodeHeight: nH,
-      fontSize: null, rotation: 0, labelRotation: 0,
-      x: canvasX, y: canvasY,
-      ...visNodeProps('image', 'c-gray', nW, nH, null, null, null),
+      id,
+      label: "",
+      imageSrc,
+      groupId,
+      shapeType: "image",
+      colorKey: "c-gray",
+      nodeWidth: nW,
+      nodeHeight: nH,
+      fontSize: null,
+      rotation: 0,
+      labelRotation: 0,
+      x: canvasX,
+      y: canvasY,
+      ...visNodeProps("image", "c-gray", nW, nH, null, null, null),
     });
     st.nodes.add({
-      id: captionId, label: filename, groupId,
-      shapeType: 'text-free', colorKey: 'c-gray',
-      nodeWidth: nW, nodeHeight: captionH,
-      fontSize: null, rotation: 0, labelRotation: 0,
-      x: canvasX, y: canvasY + nH / 2 + GAP + captionH / 2,
-      ...visNodeProps('text-free', 'c-gray', nW, captionH, null, null, null),
+      id: captionId,
+      label: filename,
+      groupId,
+      shapeType: "text-free",
+      colorKey: "c-gray",
+      nodeWidth: nW,
+      nodeHeight: captionH,
+      fontSize: null,
+      rotation: 0,
+      labelRotation: 0,
+      x: canvasX,
+      y: canvasY + nH / 2 + GAP + captionH / 2,
+      ...visNodeProps("text-free", "c-gray", nW, captionH, null, null, null),
     });
     markDirty();
     setTimeout(() => {
@@ -1394,12 +1840,16 @@ export function createImageNode(imageSrc, canvasX, canvasY) {
   img.onload = () => {
     const MAX = 300;
     const ratio = img.naturalWidth / img.naturalHeight;
-    let nW = img.naturalWidth, nH = img.naturalHeight;
-    if (nW > MAX) { nW = MAX; nH = Math.round(MAX / ratio); }
+    let nW = img.naturalWidth,
+      nH = img.naturalHeight;
+    if (nW > MAX) {
+      nW = MAX;
+      nH = Math.round(MAX / ratio);
+    }
     addNode(nW, nH);
   };
   img.onerror = () => {
-    const d = SHAPE_DEFAULTS['image'];
+    const d = SHAPE_DEFAULTS["image"];
     addNode(d[0], d[1]);
   };
   img.src = imageSrc;
@@ -1410,17 +1860,20 @@ export function toggleEdgeStraight() {
   if (!st.network) return;
   pushSnapshot();
   st.edgesStraight = !st.edgesStraight;
-  const smooth = st.edgesStraight ? { enabled: false } : { type: 'continuous' };
+  const smooth = st.edgesStraight ? { enabled: false } : { type: "continuous" };
   // Update global network option first (overrides per-edge inherited defaults).
   st.network.setOptions({ edges: { smooth } });
   // Then update each edge individually, keeping anchor edges always straight.
   const updates = st.edges.get().map((e) => {
     const toData = st.nodes.get(e.to);
-    const s = (toData && toData.shapeType === 'anchor') ? { enabled: false } : smooth;
+    const s =
+      toData && toData.shapeType === "anchor" ? { enabled: false } : smooth;
     return { id: e.id, smooth: s };
   });
   if (updates.length) st.edges.update(updates);
-  document.getElementById('btnEdgeStraight').classList.toggle('tool-active', st.edgesStraight);
+  document
+    .getElementById("btnEdgeStraight")
+    .classList.toggle("tool-active", st.edgesStraight);
   markDirty();
 }
 
@@ -1435,15 +1888,24 @@ function onClickNode(params) {
   // endpoint nodes, reconnect that end to the new port without losing selection.
   if (_rehookEdgeId && _rehookHoveredNodeId && _rehookHoveredPortKey) {
     const edgeData = st.edges.get(_rehookEdgeId);
-    if (edgeData && (edgeData.from === _rehookHoveredNodeId || edgeData.to === _rehookHoveredNodeId)) {
+    if (
+      edgeData &&
+      (edgeData.from === _rehookHoveredNodeId ||
+        edgeData.to === _rehookHoveredNodeId)
+    ) {
       const wasPortEdge = !!(edgeData.fromPort || edgeData.toPort);
       const update = { id: edgeData.id };
-      if (edgeData.from === _rehookHoveredNodeId) update.fromPort = _rehookHoveredPortKey;
-      else                                         update.toPort   = _rehookHoveredPortKey;
+      if (edgeData.from === _rehookHoveredNodeId)
+        update.fromPort = _rehookHoveredPortKey;
+      else update.toPort = _rehookHoveredPortKey;
       // First port assigned on a native edge: hide vis-network's rendering so
       // drawPortEdge() takes over without double-rendering.
       if (!wasPortEdge) {
-        update.color  = { color: 'rgba(0,0,0,0)', highlight: 'rgba(0,0,0,0)', hover: 'rgba(0,0,0,0)' };
+        update.color = {
+          color: "rgba(0,0,0,0)",
+          highlight: "rgba(0,0,0,0)",
+          hover: "rgba(0,0,0,0)",
+        };
         update.arrows = { to: { enabled: false }, from: { enabled: false } };
       }
       pushSnapshot();
@@ -1467,36 +1929,45 @@ function onClickNode(params) {
   // passing it to getEdgeAt() causes a double-subtraction of the container rect and
   // returns null. Passing clientX/Y lets vis-network do its own pixel-perfect detection.
   if (params.nodes.length > 0) {
-    const clientPos = { x: params.event.srcEvent.clientX, y: params.event.srcEvent.clientY };
-    const nativeEdgeId = st.network.getEdgeAt(clientPos);
-    const portEdge = nearestPortEdgeAt(params.pointer.canvas);
-    const edgeId = nativeEdgeId || (portEdge && portEdge.id);
-
-    // First honour the app-managed z-order. vis-network may report an edge or a
-    // lower node at the click point; compare draw levels so the visibly top
-    // element gets the click.
+    const labelEdgeId = edgeLabelAtCanvasPoint(params.pointer.canvas);
     const top = topmostNodeAt(params.pointer.canvas);
     if (top) {
       const topNode = st.nodes.get(top);
-      const topLevel = st.canonicalOrder.indexOf(top);
-      const edgeLevel = edgeId ? edgeDrawLevel(st.edges.get(edgeId)) : -1;
-      if (topNode && !topNode.locked && topNode.shapeType !== 'anchor') {
-        if (!edgeId || topLevel >= edgeLevel) {
-          setTimeout(() => {
-            selectNodesFromClick(top, params.event.srcEvent);
-          }, 0);
-          return;
-        }
+      if (
+        topNode &&
+        !topNode.locked &&
+        topNode.shapeType !== "anchor" &&
+        !labelEdgeId
+      ) {
+        setTimeout(() => {
+          selectNodesFromClick(top, params.event.srcEvent);
+        }, 0);
+        return;
       }
     }
+
+    const clientPos = {
+      x: params.event.srcEvent.clientX,
+      y: params.event.srcEvent.clientY,
+    };
+    const nativeEdgeId = st.network.getEdgeAt(clientPos);
+    const portEdge = nearestPortEdgeAt(params.pointer.canvas);
+    const edgeId = labelEdgeId || nativeEdgeId || (portEdge && portEdge.id);
     if (edgeId) {
-      const edge  = st.edges.get(edgeId);
+      const edge = st.edges.get(edgeId);
       const fromN = edge && st.nodes.get(edge.from);
-      const toN   = edge && st.nodes.get(edge.to);
-      const isFreeArrow = fromN && fromN.shapeType === 'anchor' && toN && toN.shapeType === 'anchor';
+      const toN = edge && st.nodes.get(edge.to);
+      const isFreeArrow =
+        fromN &&
+        fromN.shapeType === "anchor" &&
+        toN &&
+        toN.shapeType === "anchor";
       // If the user clicked directly on an anchor node (not the edge body), keep only
       // that single anchor selected so dragging pivots the arrow instead of moving it whole.
-      const clickedAnAnchor = params.nodes.some(id => { const n = st.nodes.get(id); return n && n.shapeType === 'anchor'; });
+      const clickedAnAnchor = params.nodes.some((id) => {
+        const n = st.nodes.get(id);
+        return n && n.shapeType === "anchor";
+      });
       if (isFreeArrow && clickedAnAnchor) return;
       setTimeout(() => {
         const sel = isFreeArrow
@@ -1515,9 +1986,9 @@ function onClickNode(params) {
     }
     // No edge at click position — apply z-order correction for the topmost node.
     const fallbackTop = topmostNodeAt(params.pointer.canvas);
-    const clickable = params.nodes.filter(id => {
+    const clickable = params.nodes.filter((id) => {
       const n = st.nodes.get(id);
-      return n && !n.locked && n.shapeType !== 'anchor';
+      return n && !n.locked && n.shapeType !== "anchor";
     });
     if (!fallbackTop || !clickable.includes(fallbackTop)) {
       const fallbackEdgeId = params.edges.length > 0 ? params.edges[0] : null;
@@ -1541,7 +2012,7 @@ function onClickNode(params) {
   // misses them when they diverge from the centre-to-centre line.
   // Also check the canvas for port-edge proximity when nothing was hit.
   if (params.nodes.length === 0 && params.edges.length === 0) {
-    const cp        = params.pointer.canvas;
+    const cp = params.pointer.canvas;
 
     // ── Port edge proximity check ──────────────────────────────────────────
     // vis-network's hit detection uses the invisible centre-to-centre ghost,
@@ -1570,7 +2041,7 @@ function onDragStart(params) {
   _draggingAnchorIds.clear();
   for (const id of params.nodes) {
     const n = st.nodes && st.nodes.get(id);
-    if (n && n.shapeType === 'anchor') _draggingAnchorIds.add(id);
+    if (n && n.shapeType === "anchor") _draggingAnchorIds.add(id);
   }
   const expanded = expandSelectionToGroup(params.nodes);
   if (expanded.length > params.nodes.length) {
@@ -1584,17 +2055,32 @@ let _addingEdgesToSelection = false;
 function onSelectNode(params) {
   if (_expandingGroup || _addingEdgesToSelection) return;
   // Filter out anchor nodes — they have no formatting panel.
-  const nonAnchors = params.nodes.filter((id) => { const n = st.nodes.get(id); return !(n && n.shapeType === 'anchor'); });
+  const nonAnchors = params.nodes.filter((id) => {
+    const n = st.nodes.get(id);
+    return !(n && n.shapeType === "anchor");
+  });
   // Drop locked nodes: they are non-interactive until unlocked via long-press.
-  const usable = nonAnchors.filter((id) => { const n = st.nodes.get(id); return n && !n.locked; });
+  const usable = nonAnchors.filter((id) => {
+    const n = st.nodes.get(id);
+    return n && !n.locked;
+  });
   if (usable.length !== nonAnchors.length) {
     _addingEdgesToSelection = true;
-    const anchorIds = params.nodes.filter((id) => { const n = st.nodes.get(id); return n && n.shapeType === 'anchor'; });
-    st.network.setSelection({ nodes: [...usable, ...anchorIds], edges: st.network.getSelectedEdges() });
+    const anchorIds = params.nodes.filter((id) => {
+      const n = st.nodes.get(id);
+      return n && n.shapeType === "anchor";
+    });
+    st.network.setSelection({
+      nodes: [...usable, ...anchorIds],
+      edges: st.network.getSelectedEdges(),
+    });
     _addingEdgesToSelection = false;
   }
   if (!usable.length) {
-    const anchorIds = params.nodes.filter((id) => { const n = st.nodes.get(id); return n && n.shapeType === 'anchor'; });
+    const anchorIds = params.nodes.filter((id) => {
+      const n = st.nodes.get(id);
+      return n && n.shapeType === "anchor";
+    });
     if (anchorIds.length) {
       // Only anchors selected (individual endpoint drag) — keep selection but no panel.
       st.selectedNodeIds = anchorIds;
@@ -1608,7 +2094,10 @@ function onSelectNode(params) {
     hideEdgePanel();
     return;
   }
-  const expanded = expandSelectionToGroup(usable).filter((id) => { const n = st.nodes.get(id); return n && !n.locked; });
+  const expanded = expandSelectionToGroup(usable).filter((id) => {
+    const n = st.nodes.get(id);
+    return n && !n.locked;
+  });
   if (expanded.length > usable.length) {
     _expandingGroup = true;
     st.network.selectNodes(expanded);
@@ -1621,18 +2110,28 @@ function onSelectNode(params) {
   // This makes rubber-band select and multi-select automatically include connected edges.
   // Exclude locked edges — they are non-interactive.
   const selectedSet = new Set(st.selectedNodeIds);
-  st.selectedEdgeIds = st.edges.get().filter((e) => {
-    if (!selectedSet.has(e.from) || !selectedSet.has(e.to)) return false;
-    const fromN = st.nodes.get(e.from);
-    const toN   = st.nodes.get(e.to);
-    const isFreeArrow = fromN && fromN.shapeType === 'anchor' && toN && toN.shapeType === 'anchor';
-    return isFreeArrow ? !(fromN.locked && toN.locked) : !e.edgeLocked;
-  }).map((e) => e.id);
+  st.selectedEdgeIds = st.edges
+    .get()
+    .filter((e) => {
+      if (!selectedSet.has(e.from) || !selectedSet.has(e.to)) return false;
+      const fromN = st.nodes.get(e.from);
+      const toN = st.nodes.get(e.to);
+      const isFreeArrow =
+        fromN &&
+        fromN.shapeType === "anchor" &&
+        toN &&
+        toN.shapeType === "anchor";
+      return isFreeArrow ? !(fromN.locked && toN.locked) : !e.edgeLocked;
+    })
+    .map((e) => e.id);
   // Tell vis-network to visually highlight the free-arrow edges.
   // Use a guard to prevent the resulting selectNode event from re-entering.
   if (st.selectedEdgeIds.length > 0) {
     _addingEdgesToSelection = true;
-    st.network.setSelection({ nodes: st.network.getSelectedNodes(), edges: st.selectedEdgeIds });
+    st.network.setSelection({
+      nodes: st.network.getSelectedNodes(),
+      edges: st.selectedEdgeIds,
+    });
     _addingEdgesToSelection = false;
   }
   hideEdgePanel();
@@ -1647,12 +2146,19 @@ function onSelectEdge(params) {
     const e = st.edges.get(id);
     if (!e) return false;
     const fromN = st.nodes.get(e.from);
-    const toN   = st.nodes.get(e.to);
-    const isFreeArrow = fromN && fromN.shapeType === 'anchor' && toN && toN.shapeType === 'anchor';
+    const toN = st.nodes.get(e.to);
+    const isFreeArrow =
+      fromN &&
+      fromN.shapeType === "anchor" &&
+      toN &&
+      toN.shapeType === "anchor";
     return isFreeArrow ? !(fromN.locked && toN.locked) : !e.edgeLocked;
   });
   if (usable.length !== params.edges.length) {
-    st.network.setSelection({ nodes: st.network.getSelectedNodes(), edges: usable });
+    st.network.setSelection({
+      nodes: st.network.getSelectedNodes(),
+      edges: usable,
+    });
   }
   if (!usable.length) {
     st.selectedEdgeIds = [];
@@ -1672,8 +2178,13 @@ function onSelectEdge(params) {
     const e = st.edges.get(edgeId);
     if (!e) continue;
     const fromN = st.nodes.get(e.from);
-    const toN   = st.nodes.get(e.to);
-    if (fromN && fromN.shapeType === 'anchor' && toN && toN.shapeType === 'anchor') {
+    const toN = st.nodes.get(e.to);
+    if (
+      fromN &&
+      fromN.shapeType === "anchor" &&
+      toN &&
+      toN.shapeType === "anchor"
+    ) {
       freeAnchors.push(e.from, e.to);
     }
   }