sysml-diagram 0.20.1 → 0.20.3

package/out/main.js

@@ -170103,6 +170103,9 @@ function resolveEffectiveSubject(node) {
 
 // ../language-server/out/src/messages.js
 var DIAGNOSTIC_MESSAGES = {
+  // REQ-006 - a broad diagram anchor cannot prove which typed occurrence owns
+  // a connection whose projected ports resolve to their shared definition.
+  EDIT_RELATION_OWNER_AMBIGUOUS_PROJECTED_USAGE: "The relation owner is ambiguous between a type definition and a projected usage. Select the concrete occurrence or explicitly synchronize the definition before creating the connection.",
   // REQ-317 — expression paths diagnose the exact missing feature segment.
   RES001_FEATURE_PATH_SEGMENT: (segment, owner) => `Feature path segment '${segment}' does not exist on '${owner}'.`,
   LEX001_UNTERMINATED_STRING: `Unterminated string literal - missing closing '"'.`,
@@ -181834,6 +181837,13 @@ var DOCK_TANGENT = {
   left: { x: 0, y: 1 },
   right: { x: 0, y: 1 }
 };
+var BODY_SNAP_POINT_HIT_SIZE = 12;
+function bodySnapPointOccludedByPort(point, portRects) {
+  const half = BODY_SNAP_POINT_HIT_SIZE / 2;
+  return portRects.some(
+    (rect) => point.x + half >= rect.x && point.x - half <= rect.x + rect.width && point.y + half >= rect.y && point.y - half <= rect.y + rect.height
+  );
+}
 function portGlyphRect(g, w, h, topReserve = 0) {
   const natural = endpointGlyphSize(g.port);
   const along = g.along ?? natural;
@@ -181904,19 +181914,15 @@ var OPPOSITE_DOCK_SIDE = {
 function portDockSides(side) {
   return [side, OPPOSITE_DOCK_SIDE[side]];
 }
-var PORT_MOVE_STRIP_ACROSS = 10;
 var PORT_MOVE_STRIP_ALONG = 24;
-var PORT_CONNECT_DOT_HIT = 18;
+var PORT_CONNECT_DOT_HIT = 10;
 function portInteractionStrip(rect, side) {
   const vertical = side === "left" || side === "right";
-  const dotHalf = PORT_CONNECT_DOT_HIT / 2;
-  const across = Math.max(PORT_MOVE_STRIP_ACROSS, rect.across - dotHalf);
-  const inward = -(rect.across - across) / 2;
-  const n2 = DOCK_NORMAL[side];
+  const across = Math.max(1, rect.across - PORT_CONNECT_DOT_HIT);
   const run = Math.max(PORT_MOVE_STRIP_ALONG, rect.along);
   return {
-    cx: rect.cx + n2.x * inward,
-    cy: rect.cy + n2.y * inward,
+    cx: rect.cx,
+    cy: rect.cy,
     w: vertical ? across : run,
     h: vertical ? run : across
   };
@@ -183265,19 +183271,24 @@ function modelToFlow(model, opts) {
       // could not be re-arranged. (Geometry nodes are the one exception —
       // their positions are model attributes, see above.)
       draggable: model.kind !== "gev",
-      selectable: true,
-      // issue #58 — a plain (non-promoted) Interconnection View part is
-      // often nearly the whole visible canvas at typical zoom, so its empty
-      // interior must pan the canvas rather than move the part (a click
-      // there still selects it — dragHandle only gates the DRAG gesture,
-      // never click). Every other diagram kind keeps the whole-body drag.
-      // User report 2026-08-11 — the grabbable area was the SVG title TEXT
-      // alone, which a part with hidden internals could barely be moved by
-      // and which carries no move cursor: `.rf-node-header` is the same
-      // full-width title strip a container frame has, so a part behaves the
-      // same whether it draws its internals or not. The text selectors stay
-      // for the title of a node whose header strip is not rendered.
-      ...model.kind === "iv" && !isGeo ? { dragHandle: ".rf-node-header, .dnode-kind, .dnode-label" } : {}
+      selectable: true
+      // issue #226: NO `dragHandle` on a plain node, in any view.
+      //
+      // Issue #58 had scoped an Interconnection View part's drag to its title
+      // strip for one reason: "as long as there is nothing to grab it should be
+      // possible to pan the canvas". Issue #225 then made a left drag under the
+      // select tool an editing gesture that NEVER pans (canvas-navigation.ts,
+      // `panOnDrag: [1]`), and locks the nodes outright under the hand tool, where
+      // a left drag pans over a part regardless. The restriction therefore bought
+      // nothing any more and turned the whole body of every IV part into dead
+      // area: press and drag there and the part did not move and the canvas did
+      // not pan. That is the reported "sometimes I mousedown and drag and it does
+      // not move". A part now moves from anywhere on its body, like every other
+      // node in every other view; a click there still just selects it.
+      //
+      // Container FRAMES keep `.rf-frame-header` (set where they are built): their
+      // interior is deliberately click-through so the connectors drawn underneath
+      // stay selectable, so there is nothing there to grab in the first place.
     });
   }
   if (model.kind === "sv") {
@@ -183319,8 +183330,6 @@ function modelToFlow(model, opts) {
   for (const n2 of renderModelNodes) for (const p of n2.ports ?? []) portIds.add(p.id);
   for (const f of frames) for (const p of f.ports ?? []) portIds.add(p.id);
   for (const p of boundary?.ports ?? []) portIds.add(p.id);
-  const portSideById = /* @__PURE__ */ new Map();
-  for (const n2 of nodes) for (const ph of n2.data.ports ?? []) portSideById.set(ph.port.id, ph.side);
   const ownerOfPort = /* @__PURE__ */ new Map();
   for (const n2 of renderModelNodes) for (const p of n2.ports ?? []) ownerOfPort.set(p.id, n2.id);
   for (const f of frames) for (const p of f.ports ?? []) ownerOfPort.set(p.id, f.id);
@@ -183379,8 +183388,8 @@ function modelToFlow(model, opts) {
       id: e.id,
       source,
       target,
-      ...fromPort ? { sourceHandle: portAnchorHandleId(e.from, savedSourcePortSide ?? portSideById.get(e.from) ?? "right") } : savedSourceHandle ? { sourceHandle: savedSourceHandle } : {},
-      ...toPort ? { targetHandle: portAnchorHandleId(e.to, savedTargetPortSide ?? portSideById.get(e.to) ?? "left") } : savedTargetHandle ? { targetHandle: savedTargetHandle } : {},
+      ...fromPort ? { sourceHandle: savedSourcePortSide ? portAnchorHandleId(e.from, savedSourcePortSide) : e.from } : savedSourceHandle ? { sourceHandle: savedSourceHandle } : {},
+      ...toPort ? { targetHandle: savedTargetPortSide ? portAnchorHandleId(e.to, savedTargetPortSide) : e.to } : savedTargetHandle ? { targetHandle: savedTargetHandle } : {},
       type: "sysml",
       data: {
         kind: model.kind,
@@ -183399,38 +183408,6 @@ function modelToFlow(model, opts) {
       ...frames.length > 0 || boundary ? { zIndex: 4 } : {}
     });
   }
-  const frameIds = /* @__PURE__ */ new Set([...frames.map((f) => f.id), ...boundary ? [boundary.id] : []]);
-  const parentOf = /* @__PURE__ */ new Map();
-  for (const n2 of renderModelNodes) parentOf.set(
-    n2.id,
-    n2.frame ?? (model.kind === "gv" && n2.parent && gvPackageIds.has(n2.parent) ? n2.parent : void 0) ?? (boundary ? boundary.id : void 0)
-  );
-  for (const f of frames) parentOf.set(f.id, f.parent);
-  const isInsideFrame = (nodeId, frameId) => {
-    let cur = nodeId;
-    const seen = /* @__PURE__ */ new Set();
-    while (cur && !seen.has(cur)) {
-      if (cur === frameId) return true;
-      seen.add(cur);
-      cur = parentOf.get(cur);
-    }
-    return false;
-  };
-  const delegated = /* @__PURE__ */ new Set();
-  for (const e of model.edges) {
-    const fo = ownerOfPort.get(e.from);
-    const to = ownerOfPort.get(e.to);
-    const fromOther = to ?? e.to;
-    const toOther = fo ?? e.from;
-    if (fo && frameIds.has(fo) && fromOther !== fo && isInsideFrame(fromOther, fo)) delegated.add(e.from);
-    if (to && frameIds.has(to) && toOther !== to && isInsideFrame(toOther, to)) delegated.add(e.to);
-  }
-  if (delegated.size) {
-    for (const fn of nodes) {
-      const owned = (fn.data.ports ?? []).filter((ph) => delegated.has(ph.port.id)).map((ph) => ph.port.id);
-      if (owned.length) fn.data = { ...fn.data, delegatedPorts: owned };
-    }
-  }
   return { nodes, edges };
 }
 
@@ -193571,7 +193548,6 @@ function geometrySignature(nodes) {
       for (const p of n2.data.ports ?? []) {
         out += `|${p.port.id},${p.side},${p.offset},${p.along ?? ""},${p.shift?.along ?? ""},${p.shift?.across ?? ""}`;
       }
-      for (const id2 of [...n2.data.delegatedPorts ?? []].sort()) out += `|i:${id2}`;
       for (const d of n2.data.structuralDocks ?? []) out += `|d:${d.id},${d.side},${d.offset},${d.family}`;
       out += ";";
     }
@@ -195135,10 +195111,25 @@ function semanticPortHandle(node, handle) {
   if (parsed && portOnNode(node, parsed.portId)) return parsed.portId;
   return portOnNode(node, handle ?? void 0) ? handle ?? void 0 : void 0;
 }
-function choosePortAnchorSide(node, portId) {
+function validConcretePortAnchor(node, handle) {
+  const parsed = parsePortAnchorHandleId(handle);
+  const ph = parsed ? portOnNode(node, parsed.portId) : void 0;
+  return !!ph && portConnectHandleIds(ph.port.id, ph.side).includes(handle);
+}
+function isStrictDescendant(nodeId, ancestorId, byId) {
+  let cur = byId.get(nodeId)?.parentId;
+  const seen = /* @__PURE__ */ new Set();
+  while (cur && !seen.has(cur)) {
+    if (cur === ancestorId) return true;
+    seen.add(cur);
+    cur = byId.get(cur)?.parentId;
+  }
+  return false;
+}
+function inferredPortAnchorSide(node, other, portId, byId) {
   const ph = portOnNode(node, portId);
   if (!ph) return "right";
-  return node.data.delegatedPorts?.includes(portId) ? OPPOSITE[ph.side] : ph.side;
+  return other.id === node.id || isStrictDescendant(other.id, node.id, byId) ? OPPOSITE[ph.side] : ph.side;
 }
 function assignPortAnchorSides(nodes, edges) {
   const byId = new Map(nodes.map((n2) => [n2.id, n2]));
@@ -195146,10 +195137,14 @@ function assignPortAnchorSides(nodes, edges) {
     const source = byId.get(e.source);
     const target = byId.get(e.target);
     if (!source || !target) continue;
-    const sourcePort = semanticPortHandle(source, e.sourceHandle);
-    const targetPort = semanticPortHandle(target, e.targetHandle);
-    if (sourcePort) e.sourceHandle = portAnchorHandleId(sourcePort, choosePortAnchorSide(source, sourcePort));
-    if (targetPort) e.targetHandle = portAnchorHandleId(targetPort, choosePortAnchorSide(target, targetPort));
+    const sourcePort = semanticPortHandle(source, e.sourceHandle) ?? portOnNode(source, e.data?.edge.from)?.port.id;
+    const targetPort = semanticPortHandle(target, e.targetHandle) ?? portOnNode(target, e.data?.edge.to)?.port.id;
+    if (sourcePort && !validConcretePortAnchor(source, e.sourceHandle)) {
+      e.sourceHandle = portAnchorHandleId(sourcePort, inferredPortAnchorSide(source, target, sourcePort, byId));
+    }
+    if (targetPort && !validConcretePortAnchor(target, e.targetHandle)) {
+      e.targetHandle = portAnchorHandleId(targetPort, inferredPortAnchorSide(target, source, targetPort, byId));
+    }
   }
 }
 function densifiedSideOffsets(base, needed) {
@@ -197210,7 +197205,7 @@ body {
  * connect-target -> the whole port square lights up as the ready-to-land cue, with
  * the dotted anchor point (.dport-anchor) naming the dock edge. */
 .dnode-port.moving { stroke: var(--accent); stroke-width: 2.6; filter: drop-shadow(0 0 4px var(--accent)); }
-.dnode-port.connect-target { stroke: var(--cyan); stroke-width: 2.8; fill: var(--cyan); fill-opacity: 0.24; filter: drop-shadow(0 0 5px var(--cyan)); }
+.dnode-port.connect-target { stroke: var(--cyan); stroke-width: 2.8; fill: var(--element-fill); fill-opacity: 1; filter: drop-shadow(0 0 5px var(--cyan)); }
 /* The  connect affordance shown in front of a SELECTED port (drag it to wire). */
 .dport-plus { stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; pointer-events: none; }
 /* The four dotted anchor points a connector docks onto, shown while a connection
@@ -197861,11 +197856,16 @@ svg.react-flow__connectionline { z-index: 1; }
 .rf-frame .dframe-rect { pointer-events: none; }
 .rf-frame-header { position: absolute; pointer-events: auto; cursor: move; }
 /* issue #58 / user report 2026-08-11 \u2014 the matching title strip on an
- * Interconnection View PART node. It is what the node's dragHandle selects, so
- * a part reads and moves identically whether it draws its internals (a frame) or
- * has them hidden (a node) \u2014 and shows the same move cursor either way, instead
- * of React Flow's grab hand over a body that cannot actually be dragged. */
+ * Interconnection View PART node, so a part reads identically whether it draws
+ * its internals (a frame) or has them hidden (a node). Issue 226 removed the
+ * dragHandle this strip used to select; it stays for the title tooltip and to
+ * keep the title area's cursor the same as a frame's. */
 .rf-node-header { position: absolute; pointer-events: auto; cursor: move; }
+/* issue 226. A node whose whole body moves says so over its whole body. React
+ * Flow's grab hand used to sit next to the title strip's move cross even though
+ * only the strip could be grabbed; both are the move cross now. The hand tool's
+ * rules above outrank this one, and a locked node loses the class anyway. */
+.react-flow.rf-tool-select .rf-node-movable { cursor: move; }
 /* REQ-379 \u2014 the frame's BORDER band is hover-sensitive (the interior stays
  * click-through): hovering it reveals and mounts the frame's side connect points,
  * which are drawn on that same border. Stroke-only hit testing, so nothing but the
@@ -197873,6 +197873,14 @@ svg.react-flow__connectionline { z-index: 1; }
 .dframe-hover-band { stroke-width: 12; pointer-events: stroke; }
 .rf-frame .dport-hit { pointer-events: auto; }
 .rf-frame .react-flow__handle { pointer-events: auto; }
+/* REQ-370: a frame is click-through, but its stacked handles still obey React
+ * Flow's active end choice. An inactive twin must not cover an eligible end.
+ * This is also what fixes issue 232: the inactive twin is painted on top, so
+ * while it was reachable elementFromPoint returned it, React Flow read no
+ * connectableend, and the drop was refused across the whole port glyph. The
+ * only dock left was the outer dot, which is why a connector from a contained
+ * part could not land on the inner face of the container's own port. */
+.react-flow.sysml-connecting .rf-frame .react-flow__handle:not(.connectionindicator) { pointer-events: none; }
 .rf-frame .react-flow__resize-control { pointer-events: auto; }
 .rf-node .react-flow__resize-control.fork-join-resize {
   width: 14px;
@@ -197910,8 +197918,8 @@ svg.react-flow__connectionline { z-index: 1; }
 /* Connection handles are invisible at rest and become visible when their node,
  * lifeline, or port is hovered/selected. They create the view's default
  * relationship and remain targets for endpoint reconnection.
- * Each port exposes four handles (top/right/bottom/left) so it behaves as a box
- * with real docking points. Port handles are the PRIMARY connection target in the
+ * Each port exposes two handles, one on its inner face and one on its outer face.
+ * Port handles are the PRIMARY connection target in the
  * Interconnection View and sit ABOVE node-level side handles (which only serve
  * part\u2194part links), so a drop near a port snaps to the port, not the part body. */
 .react-flow__handle.rf-handle { min-width: 0; min-height: 0; border-radius: 50%;
@@ -197923,14 +197931,15 @@ svg.react-flow__connectionline { z-index: 1; }
   background: var(--cyan); border: 1px solid var(--bg-1);
   box-sizing: border-box;
 }
-/* diagram-rules \u2014 Port: the visible connect DOT sits on the port glyph's outer edge
- * (5px dot in an 18px invisible hit box) \u2014 the connect-START affordance and the outer
- * dock point. A SEPARATE glyph-sized portdrop target (below) makes the whole port a
- * reliable DROP landing zone during a drag without covering the dot or the select/move
- * strip. All connection dots share ONE visible 5px size so the affordance reads the same
- * everywhere. */
+/* diagram-rules - two visible port dots sit on the glyph's outer and inner faces.
+ * Each 5px dot has a compact hit box and can start or end a connector. The chosen
+ * handle is the chosen dock point, while the central body stays selectable. */
 .react-flow__handle.rf-handle-port { width: ${PORT_CONNECT_DOT_HIT}px; height: ${PORT_CONNECT_DOT_HIT}px; --rf-dot-size: 5px; z-index: 6; }
-.react-flow__handle.rf-handle-side { width: 12px; height: 12px; --rf-dot-size: 5px; z-index: 2; }
+.react-flow__handle.rf-handle-side { width: ${BODY_SNAP_POINT_HIT_SIZE}px; height: ${BODY_SNAP_POINT_HIT_SIZE}px; --rf-dot-size: 5px; z-index: 2; }
+/* REQ-370: body snap points are hollow circles. Port and pin endpoints are
+ * solid squares, so adjacent targets cannot be mistaken for each other. */
+.react-flow__handle.rf-handle-side::after { background: var(--bg-1); border: 1.5px solid var(--cyan); }
+.react-flow__handle.rf-handle-port::after { border-radius: 1px; }
 /* The start/done centre stays available for normal node selection and dragging
  * even though four 12px handle targets meet over these exact-size glyphs. The
  * perimeter dots remain above the rest of the node and keep their full hit area. */
@@ -197941,28 +197950,20 @@ svg.react-flow__connectionline { z-index: 1; }
 }
 .rf-circular-control-hit:active { cursor: grabbing; }
 .react-flow__handle.rf-handle-port.active { opacity: 0.95; }
-/* The whole-glyph DROP target on a port's inner dock side. It exists ALWAYS (so a
- * delegation connector docking on the inner side resolves and isn't dropped by React
- * Flow), but is click-through AT REST so it never steals the port's click-to-select or
- * the drag-to-move strip; while a connector is being dragged, only React Flow's valid
- * ".connectionindicator" half becomes pointer-active, so elementFromPoint returns a
- * connectable end handle for a drop ANYWHERE on the glyph \u2014 inside or on an edge. It
- * draws nothing (the drop cue is the port SQUARE highlight); its box is sized inline
- * to PORT_GLYPH_SIZE by the renderer. */
-.react-flow__handle.rf-handle-portdrop { --rf-dot-size: 0px; z-index: 5; border-radius: 3px; }
-.react-flow__handle.rf-handle-portdrop::after { display: none; }
-/* Both rules are (0,4,0), higher than React Flow's own .react-flow__handle.connectionindicator
- * (0,2,0) which otherwise forces pointer-events all on every connectable handle. During a drag
- * we still restrict pointer events to ".connectionindicator": each DualHandle renders a stacked
- * target + source, and the non-end half must stay transparent or it can make elementFromPoint
- * choose an invalid handle. */
-.react-flow:not(.sysml-connecting) .react-flow__handle.rf-handle-portdrop { pointer-events: none; }
-.react-flow.sysml-connecting .react-flow__handle.rf-handle-portdrop.connectionindicator { pointer-events: auto; }
 /* REQ-006 \u2014 graph nodes advertise their default drag relationship with modest
  * cyan side dots; all valid targets light up while a drag is in progress. */
 .rf-node-graph:hover .react-flow__handle.rf-handle-side { opacity: 0.85; }
 .react-flow.sysml-connecting .react-flow__handle.rf-handle-side.connectionindicator,
-.react-flow.sysml-connecting .react-flow__handle.rf-handle-lifeline.connectionindicator { opacity: 0.85; }
+.react-flow.sysml-connecting .react-flow__handle.rf-handle-lifeline.connectionindicator { opacity: 0.42; }
+.react-flow.sysml-connecting .react-flow__handle.rf-handle-port.connectionindicator { opacity: 0.42; }
+.react-flow.sysml-connecting .react-flow__handle.rf-handle-port.active { opacity: 1; }
+/* The nearest semantically valid body target is stronger than the candidate
+ * points. Port and pin targets use the highlighted endpoint glyph instead. */
+.react-flow.sysml-connecting .react-flow__handle.rf-handle-side.connectingto.valid { opacity: 1; }
+.react-flow.sysml-connecting .react-flow__handle.rf-handle-side.connectingto.valid::after {
+  background: var(--cyan); box-shadow: 0 0 0 3px rgba(108,209,217,0.4);
+  transform: translate(-50%, -50%) scale(1.35);
+}
 /* issues.md (#2) \u2014 the offset "+" bubble lights up (accent, ringed) while a
  * connector is being CREATED from this port. React Flow flags the start handle
  * with the connectingfrom class; the SQUARE port (not the bubble) lights up as
@@ -197972,23 +197973,28 @@ svg.react-flow__connectionline { z-index: 1; }
 .react-flow__handle.rf-handle:hover { opacity: 1; box-shadow: none; }
 .react-flow__handle.rf-handle:hover::after { box-shadow: 0 0 0 3px rgba(108,209,217,0.4); }
 .react-flow__handle.rf-handle.connectionindicator { cursor: crosshair; }
+/* REQ-370: an opaque port or action pin owns its whole footprint. Keep an
+ * overlapping body handle mounted so an existing edge keeps its handle ID, but
+ * never paint or hit-test it in idle, hover, connect, or reconnect states. */
+.react-flow__handle.rf-handle-side.rf-handle-occluded { visibility: hidden; pointer-events: none; }
 /* REQ-006 \u2014 port move overlay: a transparent hit-target ON the port glyph; drag
  * to slide the port along its owner's edge, click to select. Kept interactive even
  * inside a click-through container frame. */
-.port-drag-hit { pointer-events: auto; cursor: grab; }
+.port-drag-hit { pointer-events: auto; cursor: grab; z-index: 4; }
 .port-drag-hit:active { cursor: grabbing; }
 .rf-frame .port-drag-hit { pointer-events: auto; }
 /* REQ-386 \u2014 a nested-port host's expansion control, on the port's INNER side
  * (diagram-rules \u2014 Nested port expansion control). Sized by the rule, so only its
  * colours and type live here; it reads as part of the port, not as chrome, until
  * hovered. Kept interactive inside a click-through container frame, like the port
- * strip above, and click-through during a connection drag so it can never steal a
- * drop aimed at the port it sits under. */
+ * strip above, and raised above both the strip and face handles so expanding never
+ * makes the collapse control unreachable. It is click-through during a connection
+ * drag so it can never steal a drop aimed at the port it sits under. */
 .dport-toggle {
   display: flex; align-items: center; justify-content: center;
   padding: 0; border: 1px solid var(--fg-3); border-radius: 3px;
   background: var(--bg-1); color: var(--fg-2);
-  cursor: pointer; pointer-events: auto;
+  cursor: pointer; pointer-events: auto; z-index: 7;
 }
 .dport-toggle svg { display: block; }
 .dport-toggle:hover { color: var(--accent); border-color: var(--accent); }
@@ -197998,9 +198004,9 @@ svg.react-flow__connectionline { z-index: 1; }
 /* While a connector is being dragged, the port-move strip must NOT intercept the
  * drop: it sits above the port's connect handle, so elementFromPoint would return
  * the strip (not a handle) and the drop would fall back to the nearest handle,
- * which lets a competing part-side handle steal a drop aimed at the port centre.
- * Making it click-through during a connection lets the full-glyph port handle take
- * every drop \u2014 the port stays fully opaque to connectors. */
+ * which lets a competing part-side handle steal a drop aimed at a face snap point.
+ * Making it click-through during a connection leaves both exact port handles
+ * reachable and lets the nearest one win. */
 .react-flow.sysml-connecting .port-drag-hit { pointer-events: none; }
 /* issue 189 \u2014 the in-place rename editor over a container-part FRAME header must
    be typeable even though the frame body is click-through (pointer-events:none). */
@@ -199345,6 +199351,99 @@ function GeoShapeNode({ id: id2, data, selected: selected2 }) {
   );
 }
 
+// ../extension/src/webview/diagram/flow/connection-gesture.ts
+function validPortDropTarget(connection, isKnownPort) {
+  if (!connection?.inProgress || connection.isValid !== true) return void 0;
+  const handleId = connection.toHandle?.id;
+  const nodeId = connection.toHandle?.nodeId;
+  if (!handleId || !nodeId) return void 0;
+  const portId = parsePortAnchorHandleId(handleId)?.portId ?? handleId;
+  return isKnownPort(portId) ? { nodeId, handleId, portId } : void 0;
+}
+
+// ../extension/src/webview/diagram/flow/pointer-gesture.ts
+var POINTER_DRAG_THRESHOLD_PX = 4;
+function beginPointerGesture(host, spec) {
+  const threshold = spec.threshold ?? POINTER_DRAG_THRESHOLD_PX;
+  let moved = false;
+  let active = true;
+  let captureHeld = false;
+  let lastDelivered;
+  function isOurs(event) {
+    return event?.pointerId === spec.pointerId;
+  }
+  function releaseCapture() {
+    if (!captureHeld) return;
+    captureHeld = false;
+    try {
+      spec.captureTarget?.releasePointerCapture(spec.pointerId);
+    } catch {
+    }
+  }
+  function finish(reason, event) {
+    if (!active) return;
+    active = false;
+    host.unbind("pointermove", onMove);
+    host.unbind("pointerup", onUp);
+    host.unbind("pointercancel", onCancel);
+    host.unbind("blur", onInterrupt);
+    releaseCapture();
+    spec.onEnd({ reason, moved, event });
+  }
+  function deliverMove(event) {
+    if (!moved && Math.hypot(event.clientX - spec.startX, event.clientY - spec.startY) < threshold) return;
+    moved = true;
+    if (lastDelivered?.x === event.clientX && lastDelivered.y === event.clientY) return;
+    lastDelivered = { x: event.clientX, y: event.clientY };
+    spec.onMove(event);
+  }
+  function onMove(event) {
+    if (!active || !isOurs(event)) return;
+    if (event.buttons === 0) {
+      finish("cancel");
+      return;
+    }
+    deliverMove(event);
+  }
+  function onUp(event) {
+    if (!isOurs(event)) return;
+    deliverMove(event);
+    finish("up", event);
+  }
+  function onCancel(event) {
+    if (isOurs(event)) finish("cancel");
+  }
+  function onInterrupt() {
+    finish("cancel");
+  }
+  host.bind("pointermove", onMove);
+  host.bind("pointerup", onUp);
+  host.bind("pointercancel", onCancel);
+  host.bind("blur", onInterrupt);
+  try {
+    if (spec.captureTarget) {
+      spec.captureTarget.setPointerCapture(spec.pointerId);
+      captureHeld = true;
+    }
+  } catch {
+  }
+  return {
+    get moved() {
+      return moved;
+    },
+    get active() {
+      return active;
+    },
+    abort: () => finish("abort")
+  };
+}
+function windowPointerHost() {
+  return {
+    bind: (type, listener) => window.addEventListener(type, listener),
+    unbind: (type, listener) => window.removeEventListener(type, listener)
+  };
+}
+
 // ../extension/src/webview/diagram/flow/nodes.tsx
 var import_jsx_runtime4 = __toESM(require_jsx_runtime());
 var SIDES = [...PORT_DOCK_SIDES];
@@ -199395,7 +199494,9 @@ var SIDE_NORMAL = {
 var clampOffset = (v) => Math.max(0.06, Math.min(0.94, v));
 function usePortDrag(containerRef, w, h, topReserve, onPortMove, onPortPreview, onSelect) {
   const [dragId, setDragId] = (0, import_react8.useState)(void 0);
-  const onPortPointerDown = (portId, e, draggable = true) => {
+  const gestureRef = (0, import_react8.useRef)(void 0);
+  (0, import_react8.useEffect)(() => () => gestureRef.current?.abort(), []);
+  const onPortPointerDown = (portId, e, origin, draggable = true) => {
     if (e.button !== 0) return;
     e.stopPropagation();
     const el2 = containerRef.current;
@@ -199403,40 +199504,47 @@ function usePortDrag(containerRef, w, h, topReserve, onPortMove, onPortPreview,
       onSelect?.(portId);
       return;
     }
-    e.currentTarget.setPointerCapture?.(e.pointerId);
+    gestureRef.current?.abort();
     const rect = el2.getBoundingClientRect();
-    const sx = e.clientX, sy = e.clientY;
-    let moved = false;
     const placement = (cx, cy) => {
       const lx = rect.width ? (cx - rect.left) / rect.width * w : 0;
       const ly = rect.height ? (cy - rect.top) / rect.height * h : 0;
       const nearest = nearestPortOwnerPlacement(lx, ly, w, h, topReserve);
       return { side: nearest.side, offset: clampOffset(nearest.offset) };
     };
-    const move = (ev) => {
-      if (!moved && Math.hypot(ev.clientX - sx, ev.clientY - sy) < 4) return;
-      moved = true;
-      const p = placement(ev.clientX, ev.clientY);
-      setDragId(portId);
-      onPortPreview?.(portId, p.side, p.offset);
-    };
-    const up = (ev) => {
-      window.removeEventListener("pointermove", move);
-      window.removeEventListener("pointerup", up);
-      if (moved) {
+    gestureRef.current = beginPointerGesture(windowPointerHost(), {
+      pointerId: e.pointerId,
+      startX: e.clientX,
+      startY: e.clientY,
+      captureTarget: e.currentTarget,
+      onMove: (ev) => {
         const p = placement(ev.clientX, ev.clientY);
-        onPortMove(portId, p.side, p.offset);
-      } else onSelect?.(portId);
-      setDragId(void 0);
-    };
-    window.addEventListener("pointermove", move);
-    window.addEventListener("pointerup", up);
+        setDragId(portId);
+        onPortPreview?.(portId, p.side, p.offset);
+      },
+      onEnd: ({ reason, moved, event }) => {
+        gestureRef.current = void 0;
+        setDragId(void 0);
+        if (!moved) {
+          if (reason === "up") onSelect?.(portId);
+          return;
+        }
+        if (reason === "up" && event) {
+          const p = placement(event.clientX, event.clientY);
+          onPortMove(portId, p.side, p.offset);
+          return;
+        }
+        onPortPreview?.(portId, origin.side, origin.offset);
+      }
+    });
   };
   return { dragId, onPortPointerDown };
 }
-function DualHandle({ id: id2, side, x, y, kind, active, connectable = true, startable = false, size }) {
-  const style2 = size !== void 0 ? { left: x, top: y, width: size, height: size, transform: "translate(-50%,-50%)" } : { left: x, top: y, transform: "translate(-50%,-50%)" };
-  const cls = `rf-handle rf-handle-${kind}${active ? " active" : ""}`;
+function DualHandle({ id: id2, side, x, y, kind, active, connectable = true, startable = false, size, occluded = false }) {
+  const dimensions = typeof size === "number" ? { width: size, height: size } : size;
+  const style2 = dimensions ? { left: x, top: y, ...dimensions, transform: "translate(-50%,-50%)" } : { left: x, top: y, transform: "translate(-50%,-50%)" };
+  const enabled = connectable && !occluded;
+  const cls = `rf-handle rf-handle-${kind}${active ? " active" : ""}${occluded ? " rf-handle-occluded" : ""}`;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       Handle,
@@ -199446,9 +199554,9 @@ function DualHandle({ id: id2, side, x, y, kind, active, connectable = true, sta
         position: POS[side],
         style: style2,
         className: cls,
-        isConnectable: connectable,
+        isConnectable: enabled,
         isConnectableStart: false,
-        isConnectableEnd: connectable
+        isConnectableEnd: enabled
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -199459,9 +199567,9 @@ function DualHandle({ id: id2, side, x, y, kind, active, connectable = true, sta
         position: POS[side],
         style: style2,
         className: cls,
-        isConnectable: connectable,
-        isConnectableStart: connectable && startable,
-        isConnectableEnd: false
+        isConnectable: enabled,
+        isConnectableStart: enabled && startable,
+        isConnectableEnd: enabled
       }
     )
   ] });
@@ -199829,7 +199937,7 @@ function LifelineBody({ node, w, lineBottom, activation, eventMarks }) {
     ] })
   ] });
 }
-function PortGlyph({ ph, w, h, topReserve = 0, showLabels, selected: selected2, hovered, moving, connectTarget, connectStart, onSelect, onContext }) {
+function PortGlyph({ ph, w, h, topReserve = 0, showLabels, selected: selected2, hovered, moving, connectTargetSide, connectStart, onSelect, onContext }) {
   const rect = portGlyphRect(ph, w, h, topReserve);
   const x = rect.cx;
   const y = rect.cy;
@@ -199903,7 +200011,7 @@ function PortGlyph({ ph, w, h, topReserve = 0, showLabels, selected: selected2,
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "rect",
           {
-            className: `dnode-port${ph.port.pin ? " pin" : ""}${ph.port.ref ? " ref" : ""}${rect.elongated ? " host" : ""}${selected2 ? " selected" : ""}${hovered ? " hovered" : ""}${moving ? " moving" : ""}${connectTarget ? " connect-target" : ""}`,
+            className: `dnode-port${ph.port.pin ? " pin" : ""}${ph.port.ref ? " ref" : ""}${rect.elongated ? " host" : ""}${selected2 ? " selected" : ""}${hovered ? " hovered" : ""}${moving ? " moving" : ""}${connectTargetSide ? " connect-target" : ""}`,
             x: rect.x,
             y: rect.y,
             width: rect.width,
@@ -199916,7 +200024,7 @@ function PortGlyph({ ph, w, h, topReserve = 0, showLabels, selected: selected2,
           d === "out" || d === "inout" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { className: "dport-dir head", d: arrowHead(1) }) : "",
           d === "in" || d === "inout" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { className: "dport-dir head", d: arrowHead(-1) }) : ""
         ] }) : "",
-        selected2 && connectStart && !connectTarget ? (() => {
+        selected2 && connectStart && !connectTargetSide ? (() => {
           const px = x + v.x * (half + PORT_PLUS_GAP);
           const py = y + v.y * (half + PORT_PLUS_GAP);
           return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { className: "dport-plus", children: [
@@ -199924,8 +200032,8 @@ function PortGlyph({ ph, w, h, topReserve = 0, showLabels, selected: selected2,
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: px, y1: py - PORT_PLUS_HALF, x2: px, y2: py + PORT_PLUS_HALF })
           ] });
         })() : "",
-        connectTarget ? (() => {
-          const at2 = portDockAt(rect, ph.side, ph.side);
+        connectTargetSide ? (() => {
+          const at2 = portDockAt(rect, ph.side, connectTargetSide);
           return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { className: "dport-anchor", cx: at2.x, cy: at2.y, r: 1.7 });
         })() : "",
         showLabels && hostLabel ? (
@@ -200159,7 +200267,7 @@ function shapeBody(node, data) {
   }
 }
 var CLIP_EXEMPT = /* @__PURE__ */ new Set(["fork", "join", "dot", "initial", "final", "terminate", "lifeline", "actor"]);
-function NodeBody({ node, data, selectedPortId, hoveredPortId, movingPortId, connectTargetPortId, showPortConnectStart, onPortSelect, onPortContext }) {
+function NodeBody({ node, data, selectedPortId, hoveredPortId, movingPortId, connectTargetPortId, connectTargetPortSide, showPortConnectStart, onPortSelect, onPortContext }) {
   const { w, h } = data;
   const rawId = (0, import_react8.useId)();
   const clipId = `dnode-clip-${rawId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
@@ -200179,7 +200287,7 @@ function NodeBody({ node, data, selectedPortId, hoveredPortId, movingPortId, con
         selected: selectedPortId === ph.port.id,
         hovered: hoveredPortId === ph.port.id,
         moving: movingPortId === ph.port.id,
-        connectTarget: connectTargetPortId === ph.port.id,
+        connectTargetSide: connectTargetPortId === ph.port.id ? connectTargetPortSide : void 0,
         connectStart: showPortConnectStart && (data.kind === "iv" ? ph.port.pin !== true : data.kind === "afv"),
         onSelect: onPortSelect,
         onContext: onPortContext
@@ -200188,15 +200296,14 @@ function NodeBody({ node, data, selectedPortId, hoveredPortId, movingPortId, con
     ))
   ] });
 }
-function SysmlNode({ id: id2, data, selected: selected2, width, height }) {
+function SysmlNode({ id: id2, data, draggable, selected: selected2, width, height }) {
   const ctx = useDiagram();
   const node = data.node;
   const myPortIds = node.ports?.map((p) => p.id) ?? [];
-  const connectTargetPortId = useConnection((c) => {
-    const t = c.inProgress ? c.toHandle?.id : void 0;
-    const portId = parsePortAnchorHandleId(t)?.portId ?? t;
-    return portId && myPortIds.includes(portId) ? portId : void 0;
-  });
+  const connectTargetHandleId = useConnection((c) => validPortDropTarget(c, (portId) => myPortIds.includes(portId))?.handleId);
+  const connectTargetPort = parsePortAnchorHandleId(connectTargetHandleId);
+  const connectTargetPortId = connectTargetPort?.portId;
+  const connectTargetPortSide = connectTargetPort?.side;
   const w = width ?? data.w;
   const h = height ?? data.h;
   const isLifeline = node.shape === "lifeline";
@@ -200247,207 +200354,239 @@ function SysmlNode({ id: id2, data, selected: selected2, width, height }) {
     sideConnectable,
     (selected2 || sidePointsHovered || perimeterControl) && !isPackageNode
   ));
+  const visiblePortRects = ports.map((port) => portGlyphRect(port, w, h, featureCompartmentHeight));
   useMountedHandleRegistration(id2, sideOffsets);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    "div",
-    {
-      ref: containerRef,
-      className: `rf-node${selected2 ? " selected" : ""}${nodeSideStartable ? " rf-node-graph" : ""}${dropClass}`,
-      style: { width: w, height: h, opacity: dim ? 0.18 : 1 },
-      onMouseEnter: () => setSidePointsHovered(true),
-      onMouseLeave: () => setSidePointsHovered(false),
-      onContextMenu: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        ctx.onContextNode(id2, e.clientX, e.clientY);
-      },
-      children: [
-        resizable ? (() => {
-          if (isForkJoinShape(node.shape)) {
-            const horizontal = forkJoinOrientation({ w, h }) === "horizontal";
-            const limits = horizontal ? { minWidth: FORK_JOIN_MIN_LENGTH, minHeight: FORK_JOIN_THICKNESS, maxHeight: FORK_JOIN_THICKNESS } : { minWidth: FORK_JOIN_THICKNESS, maxWidth: FORK_JOIN_THICKNESS, minHeight: FORK_JOIN_MIN_LENGTH };
-            const direction = horizontal ? "horizontal" : "vertical";
-            return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+  return (
+    // issue #226. A movable body advertises the move cursor over its whole
+    // surface, not only over the title strip. The two used to disagree because
+    // only the strip could actually be grabbed (see model-to-flow, dragHandle).
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        ref: containerRef,
+        className: `rf-node${selected2 ? " selected" : ""}${nodeSideStartable ? " rf-node-graph" : ""}${dropClass}${draggable === false ? "" : " rf-node-movable"}`,
+        style: { width: w, height: h, opacity: dim ? 0.18 : 1 },
+        onMouseEnter: () => setSidePointsHovered(true),
+        onMouseLeave: () => setSidePointsHovered(false),
+        onContextMenu: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          ctx.onContextNode(id2, e.clientX, e.clientY);
+        },
+        children: [
+          resizable ? (() => {
+            if (isForkJoinShape(node.shape)) {
+              const horizontal = forkJoinOrientation({ w, h }) === "horizontal";
+              const limits = horizontal ? { minWidth: FORK_JOIN_MIN_LENGTH, minHeight: FORK_JOIN_THICKNESS, maxHeight: FORK_JOIN_THICKNESS } : { minWidth: FORK_JOIN_THICKNESS, maxWidth: FORK_JOIN_THICKNESS, minHeight: FORK_JOIN_MIN_LENGTH };
+              const direction = horizontal ? "horizontal" : "vertical";
+              return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  NodeResizeControl,
+                  {
+                    className: "fork-join-resize",
+                    color: "var(--accent)",
+                    position: horizontal ? "left" : "top",
+                    resizeDirection: direction,
+                    ...limits
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  NodeResizeControl,
+                  {
+                    className: "fork-join-resize",
+                    color: "var(--accent)",
+                    position: horizontal ? "right" : "bottom",
+                    resizeDirection: direction,
+                    ...limits
+                  }
+                )
+              ] });
+            }
+            const min2 = resizeMinFor(node.shape, h);
+            const minWidth = showsControls ? Math.max(min2.minWidth, COLLAPSED_CONTAINER_MIN_WIDTH) : min2.minWidth;
+            const minHeight = Math.max(min2.minHeight, data.featureCompartmentMinHeight ?? 0);
+            const maxWidth = data.kind === "gv" && node.shape !== "package" ? GV_NODE_MAX_WIDTH : void 0;
+            return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              NodeResizer,
+              {
+                minWidth,
+                minHeight,
+                maxWidth,
+                maxHeight: min2.maxHeight,
+                isVisible: true,
+                color: "var(--accent)"
+              }
+            );
+          })() : null,
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            NodeBody,
+            {
+              node,
+              data: liveData,
+              selectedPortId,
+              hoveredPortId,
+              movingPortId: dragId,
+              connectTargetPortId,
+              connectTargetPortSide,
+              showPortConnectStart: data.kind === "iv" || data.kind === "afv",
+              onPortSelect: !ctx.onPortMove && data.ports.length ? portSource : void 0,
+              onPortContext: ctx.onContextNode
+            }
+          ),
+          data.kind === "iv" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              className: "rf-node-header",
+              title: node.name,
+              style: {
+                left: 0,
+                top: 0,
+                height: NODE_COMPARTMENT_TOP,
+                width: containerTitleArea(w, nodeShowsControls(node)).width
+              }
+            }
+          ) : null,
+          SIDES.flatMap((side, si) => {
+            const n2 = SIDE_NORMAL[side];
+            const out = nodeSideHandleOutset(node.shape);
+            const offsets = sideOffsets[si];
+            return offsets.map((offset2, i) => {
+              const { x, y } = sideSurfacePoint(node.shape, side, offset2, w, h, featureCompartmentHeight);
+              const point = { x: x + n2.x * out, y: y + n2.y * out };
+              const occluded = bodySnapPointOccludedByPort(point, visiblePortRects);
+              return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                DualHandle,
+                {
+                  id: sideAnchorHandleId(side, offset2),
+                  side,
+                  x: point.x,
+                  y: point.y,
+                  kind: "side",
+                  occluded,
+                  connectable: sideConnectable,
+                  startable: nodeSideStartable,
+                  size: perimeterControl ? 20 : void 0
+                },
+                `s-${side}-${i}`
+              );
+            });
+          }),
+          node.shape === "initial" || node.shape === "final" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "rf-circular-control-hit", "aria-hidden": "true" }) : null,
+          ports.flatMap((ph) => {
+            const rect = portGlyphRect(ph, w, h, featureCompartmentHeight);
+            const startable = directRelationForHandle(data.kind, {
+              id: ph.port.id,
+              name: ph.port.name,
+              keyword: ph.port.pin ? "pin" : "port",
+              shape: ph.port.pin ? "pin" : "port",
+              source: ph.port.source
+            }) !== void 0;
+            const [outerId, innerId] = portConnectHandleIds(ph.port.id, ph.side);
+            const outer = portDockAt(rect, ph.side, ph.side);
+            const innerSide = OPPOSITE_DOCK_SIDE[ph.side];
+            const inner = portDockAt(rect, ph.side, innerSide);
+            const revealBoth = startable && (ph.port.id === hoveredPortId || ph.port.id === selectedPortId);
+            return [
               /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                NodeResizeControl,
+                DualHandle,
                 {
-                  className: "fork-join-resize",
-                  color: "var(--accent)",
-                  position: horizontal ? "left" : "top",
-                  resizeDirection: direction,
-                  ...limits
-                }
+                  id: outerId,
+                  side: ph.side,
+                  x: outer.x,
+                  y: outer.y,
+                  kind: "port",
+                  active: revealBoth || ph.port.id === connectTargetPortId && connectTargetPortSide === ph.side,
+                  startable
+                },
+                `${ph.port.id}-out`
               ),
               /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                NodeResizeControl,
+                DualHandle,
                 {
-                  className: "fork-join-resize",
-                  color: "var(--accent)",
-                  position: horizontal ? "right" : "bottom",
-                  resizeDirection: direction,
-                  ...limits
-                }
+                  id: innerId,
+                  side: innerSide,
+                  x: inner.x,
+                  y: inner.y,
+                  kind: "port",
+                  active: revealBoth || ph.port.id === connectTargetPortId && connectTargetPortSide === innerSide,
+                  startable
+                },
+                `${ph.port.id}-in`
               )
-            ] });
-          }
-          const min2 = resizeMinFor(node.shape, h);
-          const minWidth = showsControls ? Math.max(min2.minWidth, COLLAPSED_CONTAINER_MIN_WIDTH) : min2.minWidth;
-          const minHeight = Math.max(min2.minHeight, data.featureCompartmentMinHeight ?? 0);
-          const maxWidth = data.kind === "gv" && node.shape !== "package" ? GV_NODE_MAX_WIDTH : void 0;
-          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            NodeResizer,
-            {
-              minWidth,
-              minHeight,
-              maxWidth,
-              maxHeight: min2.maxHeight,
-              isVisible: true,
-              color: "var(--accent)"
-            }
-          );
-        })() : null,
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          NodeBody,
-          {
-            node,
-            data: liveData,
-            selectedPortId,
-            hoveredPortId,
-            movingPortId: dragId,
-            connectTargetPortId,
-            showPortConnectStart: data.kind === "iv" || data.kind === "afv",
-            onPortSelect: !ctx.onPortMove && data.ports.length ? portSource : void 0,
-            onPortContext: ctx.onContextNode
-          }
-        ),
-        data.kind === "iv" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "div",
-          {
-            className: "rf-node-header",
-            title: node.name,
-            style: {
-              left: 0,
-              top: 0,
-              height: NODE_COMPARTMENT_TOP,
-              width: containerTitleArea(w, nodeShowsControls(node)).width
-            }
-          }
-        ) : null,
-        SIDES.flatMap((side, si) => {
-          const n2 = SIDE_NORMAL[side];
-          const out = nodeSideHandleOutset(node.shape);
-          const offsets = sideOffsets[si];
-          return offsets.map((offset2, i) => {
-            const { x, y } = sideSurfacePoint(node.shape, side, offset2, w, h, featureCompartmentHeight);
+            ];
+          }),
+          ctx.onPortMove ? ports.map((ph) => {
+            const rect = portGlyphRect(ph, w, h, featureCompartmentHeight);
+            const nestedChild = ph.port.parentPort !== void 0;
+            const strip = portInteractionStrip(rect, ph.side);
             return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-              DualHandle,
-              {
-                id: sideAnchorHandleId(side, offset2),
-                side,
-                x: x + n2.x * out,
-                y: y + n2.y * out,
-                kind: "side",
-                connectable: sideConnectable,
-                startable: nodeSideStartable,
-                size: perimeterControl ? 20 : void 0
+              "div",
+              {
+                className: "port-drag-hit nodrag",
+                style: { position: "absolute", left: strip.cx, top: strip.cy, width: strip.w, height: strip.h, transform: "translate(-50%,-50%)" },
+                title: nestedChild ? `${ph.port.name} - click to select; drag a dot to connect (moves with its parent port)` : `${ph.port.name} - drag the centre to move along the edge; drag a dot to connect; click to select`,
+                onPointerEnter: () => setHoveredPortId(ph.port.id),
+                onPointerLeave: () => setHoveredPortId((cur) => cur === ph.port.id ? void 0 : cur),
+                onPointerDown: (e) => onPortPointerDown(ph.port.id, e, { side: ph.side, offset: ph.offset }, !nestedChild),
+                onContextMenu: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  ctx.onContextNode(ph.port.id, e.clientX, e.clientY);
+                },
+                onClick: (e) => e.stopPropagation()
               },
-              `s-${side}-${i}`
+              `pd-${ph.port.id}`
             );
-          });
-        }),
-        node.shape === "initial" || node.shape === "final" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "rf-circular-control-hit", "aria-hidden": "true" }) : null,
-        ports.flatMap((ph) => {
-          const rect = portGlyphRect(ph, w, h, featureCompartmentHeight);
-          const c = { x: rect.cx, y: rect.cy };
-          const startable = directRelationForHandle(data.kind, {
-            id: ph.port.id,
-            name: ph.port.name,
-            keyword: ph.port.pin ? "pin" : "port",
-            shape: ph.port.pin ? "pin" : "port",
-            source: ph.port.source
-          }) !== void 0;
-          const active = startable && (ph.port.id === hoveredPortId || ph.port.id === selectedPortId) || ph.port.id === connectTargetPortId;
-          const [outerId, innerId] = portConnectHandleIds(ph.port.id, ph.side);
-          const dropSize = Math.max(rect.across, 16);
-          const outer = portDockAt(rect, ph.side, ph.side);
-          return [
-            // the DROP target stays centred over the glyph — it is a cover,
-            // not a dock point (the edge geometry is `dockPoint`'s business)
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DualHandle, { id: innerId, side: OPPOSITE_DOCK_SIDE[ph.side], x: c.x, y: c.y, kind: "portdrop", size: dropSize, startable: false }, `${ph.port.id}-drop`),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DualHandle, { id: outerId, side: ph.side, x: outer.x, y: outer.y, kind: "port", active, startable }, `${ph.port.id}-out`)
-          ];
-        }),
-        ctx.onPortMove ? ports.map((ph) => {
-          const rect = portGlyphRect(ph, w, h, featureCompartmentHeight);
-          const nestedChild = ph.port.parentPort !== void 0;
-          const strip = portInteractionStrip(rect, ph.side);
-          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "div",
+          }) : null,
+          node.shape === "lifeline" ? (() => {
+            const bottom = data.lineBottom ?? h;
+            const handles = [];
+            for (const mh of data.msgHandles ?? []) {
+              handles.push(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DualHandle, { id: mh.id, side: "right", x: w / 2, y: mh.y, kind: "lifeline", startable: directRelation !== void 0 }, mh.id));
+            }
+            for (const ih of data.insertHandles ?? []) {
+              if (!directRelation || ih.y > bottom - 4) continue;
+              handles.push(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DualHandle, { id: ih.id, side: "right", x: w / 2, y: ih.y, kind: "lifeline", startable: true }, ih.id));
+            }
+            return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: handles });
+          })() : null,
+          ctx.onToggleNestedPort ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            NestedPortToggles,
             {
-              className: "port-drag-hit nodrag",
-              style: { position: "absolute", left: strip.cx, top: strip.cy, width: strip.w, height: strip.h, transform: "translate(-50%,-50%)" },
-              title: nestedChild ? `${ph.port.name} - click to select; drag a dot to connect (moves with its parent port)` : `${ph.port.name} - drag the centre to move along the edge; drag a dot to connect; click to select`,
-              onPointerEnter: () => setHoveredPortId(ph.port.id),
-              onPointerLeave: () => setHoveredPortId((cur) => cur === ph.port.id ? void 0 : cur),
-              onPointerDown: (e) => onPortPointerDown(ph.port.id, e, !nestedChild),
-              onContextMenu: (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                ctx.onContextNode(ph.port.id, e.clientX, e.clientY);
-              },
-              onClick: (e) => e.stopPropagation()
-            },
-            `pd-${ph.port.id}`
-          );
-        }) : null,
-        node.shape === "lifeline" ? (() => {
-          const bottom = data.lineBottom ?? h;
-          const handles = [];
-          for (const mh of data.msgHandles ?? []) {
-            handles.push(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DualHandle, { id: mh.id, side: "right", x: w / 2, y: mh.y, kind: "lifeline", startable: directRelation !== void 0 }, mh.id));
-          }
-          for (const ih of data.insertHandles ?? []) {
-            if (!directRelation || ih.y > bottom - 4) continue;
-            handles.push(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DualHandle, { id: ih.id, side: "right", x: w / 2, y: ih.y, kind: "lifeline", startable: true }, ih.id));
-          }
-          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: handles });
-        })() : null,
-        ctx.onToggleNestedPort ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          NestedPortToggles,
-          {
-            ports,
-            w,
-            h,
-            topReserve: featureCompartmentHeight,
-            onToggle: ctx.onToggleNestedPort
-          }
-        ) : null,
-        showsControls ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          ContainerControls,
-          {
-            id: id2,
-            label: node.name,
-            internalNoun,
-            internalsVisible: !hiddenContainer,
-            featureCompartmentsVisible,
-            cornerRadius: nodeCornerRadius(node.shape, node.isDef, h, (node.compartments?.length ?? 0) > 0),
-            onToggleInternals: ctx.onToggleInternals,
-            onToggleFeatureCompartments: ctx.onToggleFeatureCompartments
-          }
-        ) : null,
-        editingHere && ctx.onEditCommit && ctx.onEditCancel ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          InlineEditor,
-          {
-            initial: editing.initial,
-            mode: editing.mode,
-            elementKind: editing.elementKind,
-            onCommit: ctx.onEditCommit,
-            onCancel: ctx.onEditCancel,
-            w
-          }
-        ) : null
-      ]
-    }
+              ports,
+              w,
+              h,
+              topReserve: featureCompartmentHeight,
+              onToggle: ctx.onToggleNestedPort
+            }
+          ) : null,
+          showsControls ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            ContainerControls,
+            {
+              id: id2,
+              label: node.name,
+              internalNoun,
+              internalsVisible: !hiddenContainer,
+              featureCompartmentsVisible,
+              cornerRadius: nodeCornerRadius(node.shape, node.isDef, h, (node.compartments?.length ?? 0) > 0),
+              onToggleInternals: ctx.onToggleInternals,
+              onToggleFeatureCompartments: ctx.onToggleFeatureCompartments
+            }
+          ) : null,
+          editingHere && ctx.onEditCommit && ctx.onEditCancel ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            InlineEditor,
+            {
+              initial: editing.initial,
+              mode: editing.mode,
+              elementKind: editing.elementKind,
+              onCommit: ctx.onEditCommit,
+              onCancel: ctx.onEditCancel,
+              w
+            }
+          ) : null
+        ]
+      }
+    )
   );
 }
 function packageFrameTabWidth(w) {
@@ -200508,11 +200647,10 @@ function FrameNode({ id: id2, data, selected: selected2, width, height }) {
   const frameSemanticClass = frame2.keyword.startsWith("part") ? "part" : isStructuredControl || isActionElementKeyword(frame2.keyword) ? "action" : frame2.keyword.startsWith("state") ? "state" : void 0;
   const frameBottomHeight = loopUntil ? data.frameBottomHeight ?? LOOP_UNTIL_COMPARTMENT_HEIGHT : 0;
   const myPortIds = isPartitionLane ? [] : frame2.ports?.map((p) => p.id) ?? [];
-  const connectTargetPortId = useConnection((c) => {
-    const t = c.inProgress ? c.toHandle?.id : void 0;
-    const portId = parsePortAnchorHandleId(t)?.portId ?? t;
-    return portId && myPortIds.includes(portId) ? portId : void 0;
-  });
+  const connectTargetHandleId = useConnection((c) => validPortDropTarget(c, (portId) => myPortIds.includes(portId))?.handleId);
+  const connectTargetPort = parsePortAnchorHandleId(connectTargetHandleId);
+  const connectTargetPortId = connectTargetPort?.portId;
+  const connectTargetPortSide = connectTargetPort?.side;
   const w = width ?? data.w;
   const h = height ?? data.h;
   const partitionKindFull = isExhibitLane ? "\xABexhibited by\xBB" : "\xABperformer\xBB";
@@ -200582,6 +200720,7 @@ function FrameNode({ id: id2, data, selected: selected2, width, height }) {
     sideConnectable,
     (selected2 || sidePointsHovered) && !isPackageFrame
   ));
+  const visiblePortRects = showPorts ? ports.map((port) => portGlyphRect(port, w, h, featureCompartmentHeight)) : [];
   useMountedHandleRegistration(id2, sideOffsets);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
@@ -200746,7 +200885,7 @@ function FrameNode({ id: id2, data, selected: selected2, width, height }) {
               selected: selectedPortId === ph.port.id,
               hovered: hoveredPortId === ph.port.id,
               moving: dragId === ph.port.id,
-              connectTarget: connectTargetPortId === ph.port.id,
+              connectTargetSide: connectTargetPortId === ph.port.id ? connectTargetPortSide : void 0,
               connectStart: data.kind === "iv" ? ph.port.pin !== true : data.kind === "afv",
               onSelect: ctx.onPortMove ? void 0 : portSource,
               onContext: ctx.onContextNode
@@ -200796,17 +200935,19 @@ function FrameNode({ id: id2, data, selected: selected2, width, height }) {
         SIDES.flatMap((side, si) => {
           const offsets = sideOffsets[si];
           return offsets.map((offset2, i) => {
-            const { x, y } = sidePoint(side, offset2, w, h, featureCompartmentHeight);
+            const point = sidePoint(side, offset2, w, h, featureCompartmentHeight);
+            const occluded = bodySnapPointOccludedByPort(point, visiblePortRects);
             return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               DualHandle,
               {
                 id: sideAnchorHandleId(side, offset2),
                 side,
-                x,
-                y,
+                x: point.x,
+                y: point.y,
                 kind: "side",
                 connectable: sideConnectable,
-                startable: frameSideStartable
+                startable: frameSideStartable,
+                occluded
               },
               `s-${side}-${i}`
             );
@@ -200814,7 +200955,6 @@ function FrameNode({ id: id2, data, selected: selected2, width, height }) {
         }),
         showPorts ? ports.flatMap((ph) => {
           const rect = portGlyphRect(ph, w, h, featureCompartmentHeight);
-          const c = { x: rect.cx, y: rect.cy };
           const startable = directRelationForHandle(data.kind, {
             id: ph.port.id,
             name: ph.port.name,
@@ -200822,15 +200962,38 @@ function FrameNode({ id: id2, data, selected: selected2, width, height }) {
             shape: ph.port.pin ? "pin" : "port",
             source: ph.port.source
           }) !== void 0;
-          const active = startable && (ph.port.id === hoveredPortId || ph.port.id === selectedPortId) || ph.port.id === connectTargetPortId;
           const [outerId, innerId] = portConnectHandleIds(ph.port.id, ph.side);
-          const dropSize = Math.max(rect.across, 16);
           const outer = portDockAt(rect, ph.side, ph.side);
+          const innerSide = OPPOSITE_DOCK_SIDE[ph.side];
+          const inner = portDockAt(rect, ph.side, innerSide);
+          const revealBoth = startable && (ph.port.id === hoveredPortId || ph.port.id === selectedPortId);
           return [
-            // the DROP target stays centred over the glyph — it is a cover,
-            // not a dock point (the edge geometry is `dockPoint`'s business)
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DualHandle, { id: innerId, side: OPPOSITE_DOCK_SIDE[ph.side], x: c.x, y: c.y, kind: "portdrop", size: dropSize, startable: false }, `${ph.port.id}-drop`),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DualHandle, { id: outerId, side: ph.side, x: outer.x, y: outer.y, kind: "port", active, startable }, `${ph.port.id}-out`)
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              DualHandle,
+              {
+                id: outerId,
+                side: ph.side,
+                x: outer.x,
+                y: outer.y,
+                kind: "port",
+                active: revealBoth || ph.port.id === connectTargetPortId && connectTargetPortSide === ph.side,
+                startable
+              },
+              `${ph.port.id}-out`
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              DualHandle,
+              {
+                id: innerId,
+                side: innerSide,
+                x: inner.x,
+                y: inner.y,
+                kind: "port",
+                active: revealBoth || ph.port.id === connectTargetPortId && connectTargetPortSide === innerSide,
+                startable
+              },
+              `${ph.port.id}-in`
+            )
           ];
         }) : null,
         ctx.onPortMove ? ports.map((ph) => {
@@ -200845,7 +201008,7 @@ function FrameNode({ id: id2, data, selected: selected2, width, height }) {
               title: nestedChild ? `${ph.port.name} - click to select; drag a dot to connect (moves with its parent port)` : `${ph.port.name} - drag the centre to move along the edge; drag a dot to connect; click to select`,
               onPointerEnter: () => setHoveredPortId(ph.port.id),
               onPointerLeave: () => setHoveredPortId((cur) => cur === ph.port.id ? void 0 : cur),
-              onPointerDown: (e) => onPortPointerDown(ph.port.id, e, !nestedChild),
+              onPointerDown: (e) => onPortPointerDown(ph.port.id, e, { side: ph.side, offset: ph.offset }, !nestedChild),
               onContextMenu: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -201220,7 +201383,7 @@ async function runExport(command) {
 }
 
 // src/main.ts
-var VERSION2 = true ? "0.20.1" : "dev";
+var VERSION2 = true ? "0.20.3" : "dev";
 function display(file) {
   const rel2 = path9.relative(process.cwd(), file);
   return rel2 && !rel2.startsWith("..") ? rel2.split(path9.sep).join("/") : file;