sysml-diagram 0.20.2 → 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 '"'.`,
@@ -181911,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
   };
@@ -183331,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);
@@ -183391,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,
@@ -183411,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 };
 }
 
@@ -193583,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 += ";";
     }
@@ -195147,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]));
@@ -195158,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) {
@@ -197891,7 +197874,12 @@ svg.react-flow__connectionline { z-index: 1; }
 .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. */
+ * 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 {
@@ -197930,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%;
@@ -197943,12 +197931,9 @@ 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: ${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
@@ -197965,28 +197950,13 @@ 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, 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 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.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; }
@@ -198017,13 +197987,14 @@ svg.react-flow__connectionline { z-index: 1; }
  * (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); }
@@ -198033,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). */
@@ -199966,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;
@@ -200040,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,
@@ -200053,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: [
@@ -200061,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 ? (
@@ -200296,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, "")}`;
@@ -200316,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
@@ -200329,9 +200300,10 @@ function SysmlNode({ id: id2, data, draggable, selected: selected2, width, heigh
   const ctx = useDiagram();
   const node = data.node;
   const myPortIds = node.ports?.map((p) => p.id) ?? [];
-  const connectTargetPortId = useConnection((c) => {
-    return validPortDropTarget(c, (portId) => myPortIds.includes(portId))?.portId;
-  });
+  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";
@@ -200455,6 +200427,7 @@ function SysmlNode({ id: id2, data, draggable, selected: selected2, width, heigh
               hoveredPortId,
               movingPortId: dragId,
               connectTargetPortId,
+              connectTargetPortSide,
               showPortConnectStart: data.kind === "iv" || data.kind === "afv",
               onPortSelect: !ctx.onPortMove && data.ports.length ? portSource : void 0,
               onPortContext: ctx.onContextNode
@@ -200501,7 +200474,6 @@ function SysmlNode({ id: id2, data, draggable, selected: selected2, width, heigh
           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,
@@ -200509,18 +200481,38 @@ function SysmlNode({ id: id2, data, draggable, selected: selected2, width, heigh
               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);
+            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`
+              )
             ];
           }),
           ctx.onPortMove ? ports.map((ph) => {
@@ -200655,9 +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) => {
-    return validPortDropTarget(c, (portId) => myPortIds.includes(portId))?.portId;
-  });
+  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";
@@ -200892,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
@@ -200962,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,
@@ -200970,18 +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 = {
-            width: Math.max(rect.width, 16),
-            height: Math.max(rect.height, 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) => {
@@ -201371,7 +201383,7 @@ async function runExport(command) {
 }
 
 // src/main.ts
-var VERSION2 = true ? "0.20.2" : "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;