sysml-diagram 0.20.1 → 0.20.2

package/out/main.js

@@ -181834,6 +181834,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;
@@ -183265,19 +183272,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") {
@@ -197210,7 +197222,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 +197873,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 +197890,9 @@ 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. */
+.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;
@@ -197930,7 +197950,11 @@ svg.react-flow__connectionline { z-index: 1; }
  * strip. All connection dots share ONE visible 5px size so the affordance reads the same
  * everywhere. */
 .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. */
@@ -197944,25 +197968,32 @@ svg.react-flow__connectionline { z-index: 1; }
 /* 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
+ * the drag-to-move strip; while a connector is being dragged, React Flow's eligible
+ * ".connectionindicator" twins become pointer-active, so elementFromPoint returns a
+ * connectable end handle for a drop ANYWHERE on the glyph, 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. */
+ * (0,2,0) which otherwise forces pointer-events on every connectable handle. During a drag
+ * we still restrict pointer events to ".connectionindicator". Each DualHandle renders a stacked
+ * target and source. Loose-mode reconnect can end on either twin, while semantic validation
+ * still rejects an incompatible model endpoint. */
 .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; }
+/* 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,10 +198003,14 @@ 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
@@ -199345,6 +199380,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 +199523,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 +199533,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 +199583,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 +199596,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
       }
     )
   ] });
@@ -200188,14 +200325,12 @@ 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;
+    return validPortDropTarget(c, (portId) => myPortIds.includes(portId))?.portId;
   });
   const w = width ?? data.w;
   const h = height ?? data.h;
@@ -200247,207 +200382,219 @@ 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: [
-              /* @__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,
-            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
+  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
+                  }
+                )
+              ] });
             }
-          }
-        ) : 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 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)(
-              DualHandle,
+              NodeResizer,
               {
-                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
-              },
-              `s-${side}-${i}`
+                minWidth,
+                minHeight,
+                maxWidth,
+                maxHeight: min2.maxHeight,
+                isVisible: true,
+                color: "var(--accent)"
+              }
             );
-          });
-        }),
-        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)(
+          })() : 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: "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);
+              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 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 = {
+              width: Math.max(rect.width, 16),
+              height: Math.max(rect.height, 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",
+              {
+                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()
               },
-              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
-      ]
-    }
+              `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
+        ]
+      }
+    )
   );
 }
 function packageFrameTabWidth(w) {
@@ -200509,9 +200656,7 @@ function FrameNode({ id: id2, data, selected: selected2, width, height }) {
   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;
+    return validPortDropTarget(c, (portId) => myPortIds.includes(portId))?.portId;
   });
   const w = width ?? data.w;
   const h = height ?? data.h;
@@ -200582,6 +200727,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",
@@ -200796,17 +200942,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}`
             );
@@ -200824,7 +200972,10 @@ function FrameNode({ id: id2, data, selected: selected2, width, height }) {
           }) !== 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 dropSize = {
+            width: Math.max(rect.width, 16),
+            height: Math.max(rect.height, 16)
+          };
           const outer = portDockAt(rect, ph.side, ph.side);
           return [
             // the DROP target stays centred over the glyph — it is a cover,
@@ -200845,7 +200996,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 +201371,7 @@ async function runExport(command) {
 }
 
 // src/main.ts
-var VERSION2 = true ? "0.20.1" : "dev";
+var VERSION2 = true ? "0.20.2" : "dev";
 function display(file) {
   const rel2 = path9.relative(process.cwd(), file);
   return rel2 && !rel2.startsWith("..") ? rel2.split(path9.sep).join("/") : file;