sysml-diagram 0.20.2 → 0.21.0

package/out/main.js

@@ -162498,8 +162498,37 @@ function disjointTargets(node) {
   return out;
 }
 var SysmlDiagramModelProvider = class _SysmlDiagramModelProvider {
+  shared;
   perParseCache = /* @__PURE__ */ new WeakMap();
   featurePaths = new FeaturePathResolver();
+  annotationFeaturePaths = /* @__PURE__ */ new Map();
+  indexEpoch = 0;
+  // REQ-210 — Annotation graphics
+  // Shared services are optional so pure single-document tests stay cheap. In
+  // production they provide both workspace documents and the linker's private
+  // lazy library documents used by inherited members.
+  constructor(shared) {
+    this.shared = shared;
+    shared?.workspace.DocumentBuilder.onBuildPhase(DocumentState.IndexedContent, () => {
+      this.indexEpoch += 1;
+    });
+  }
+  externalDocumentRoot(uri) {
+    if (!this.shared)
+      return void 0;
+    const parsed = URI2.parse(uri);
+    try {
+      const services = this.shared.ServiceRegistry.getServices(parsed);
+      const linker = services.references.Linker;
+      const linked = linker.resolveDocumentRoot?.(parsed);
+      if (linked)
+        return linked;
+    } catch {
+    }
+    if (!this.shared.workspace.LangiumDocuments.hasDocument(parsed))
+      return void 0;
+    return this.shared.workspace.LangiumDocuments.getDocument(parsed)?.parseResult?.value;
+  }
   perParse(root4) {
     let entry = this.perParseCache.get(root4);
     if (!entry) {
@@ -162528,12 +162557,52 @@ var SysmlDiagramModelProvider = class _SysmlDiagramModelProvider {
     const key = `${kind}\0${preferFileOverview ? "F" : "-"}\0${rootSymbol ?? ""}`;
     const cacheKey = kind === "grv" ? `${key}::${gridPreset}${gridPreset === "matrix" ? `::${matrixRelationship}` : ""}` : key;
     const hit = cache.models.get(cacheKey);
+    if (hit && hit.indexEpoch === this.indexEpoch && this.externalRootsAreCurrent(hit.externalRoots))
+      return hit.model;
     if (hit)
-      return hit;
+      cache.models.delete(cacheKey);
     const model = this.computeDiagramModel(document2, root4, rootSymbol, kind, preferFileOverview, gridPreset, matrixRelationship);
-    cache.models.set(cacheKey, model);
+    cache.models.set(cacheKey, {
+      model,
+      externalRoots: this.externalRootsOf(model, document2.uri.toString()),
+      indexEpoch: this.indexEpoch
+    });
     return model;
   }
+  // REQ-210 — Annotation graphics
+  // A model may project members and notes from another document. The anchor's
+  // parse identity does not change when that source file is edited, so validate
+  // those dependency roots before returning a warm per-anchor cache entry.
+  externalRootsAreCurrent(roots) {
+    for (const [uri, root4] of roots) {
+      if (this.externalDocumentRoot(uri) !== root4)
+        return false;
+    }
+    return true;
+  }
+  externalRootsOf(model, anchorUri) {
+    const uris = /* @__PURE__ */ new Set();
+    const add = (source) => {
+      if (source?.uri && source.uri !== anchorUri)
+        uris.add(source.uri);
+    };
+    for (const node of model.nodes) {
+      add(node.source);
+      for (const port of node.ports ?? [])
+        add(port.source);
+    }
+    for (const frame2 of model.frames ?? []) {
+      add(frame2.source);
+      for (const port of frame2.ports ?? [])
+        add(port.source);
+    }
+    add(model.ivBoundary?.source);
+    for (const port of model.ivBoundary?.ports ?? [])
+      add(port.source);
+    for (const edge of model.edges)
+      add(edge.source);
+    return new Map([...uris].map((uri) => [uri, this.externalDocumentRoot(uri)]));
+  }
   computeDiagramModel(document2, root4, rootSymbol, kind, preferFileOverview, gridPreset = "requirements", matrixRelationship = "allocation") {
     const uri = document2.uri.toString();
     const empty2 = (note) => ({
@@ -162549,28 +162618,126 @@ var SysmlDiagramModelProvider = class _SysmlDiagramModelProvider {
       return empty2(`No anchor element found for the ${kind.toUpperCase()} view.`);
     const ctx = { uri, index: index2, anchor, gridPreset, matrixRelationship };
     const overview = isPackage(anchor) || isDocument(anchor);
-    switch (kind) {
-      case "gv":
-        return this.buildGeneralView(ctx);
-      case "iv":
-        return overview ? this.buildInterconnectionOverview(ctx) : this.buildInterconnectionView(ctx);
-      case "afv":
-        return overview ? this.buildActionFlowOverview(ctx) : this.buildActionFlowView(ctx);
-      case "stv":
-        return overview ? this.buildStateTransitionOverview(ctx) : this.buildStateTransitionView(ctx);
-      case "sv":
-        return overview ? this.buildSequenceOverview(ctx) : this.buildSequenceView(ctx);
-      case "cv":
-        return this.buildCaseView(ctx);
-      case "gev":
-        return overview ? this.buildGeometryOverview(ctx) : this.buildGeometryView(ctx);
-      case "grv":
-        return this.buildGridView(ctx);
-      case "bv":
-        return this.buildBrowserView(ctx);
-      default:
-        return empty2(`Unsupported diagram kind ${kind}.`);
+    const build = () => {
+      switch (kind) {
+        case "gv":
+          return this.buildGeneralView(ctx);
+        case "iv":
+          return overview ? this.buildInterconnectionOverview(ctx) : this.buildInterconnectionView(ctx);
+        case "afv":
+          return overview ? this.buildActionFlowOverview(ctx) : this.buildActionFlowView(ctx);
+        case "stv":
+          return overview ? this.buildStateTransitionOverview(ctx) : this.buildStateTransitionView(ctx);
+        case "sv":
+          return overview ? this.buildSequenceOverview(ctx) : this.buildSequenceView(ctx);
+        case "cv":
+          return this.buildCaseView(ctx);
+        case "gev":
+          return overview ? this.buildGeometryOverview(ctx) : this.buildGeometryView(ctx);
+        case "grv":
+          return this.buildGridView(ctx);
+        case "bv":
+          return this.buildBrowserView(ctx);
+        default:
+          return empty2(`Unsupported diagram kind ${kind}.`);
+      }
+    };
+    return this.withNotes(build(), root4, index2, uri);
+  }
+  // REQ-210 — Annotation graphics
+  // issue #229: attach the modeled notes of every DRAWN element to that
+  // element, on every view.
+  //
+  // The General View builds its own richer annotation pass (comment + rep +
+  // metadata, with package placement), the Browser View lists annotations as
+  // tree rows, and the Grid View is a table, so all three are left untouched.
+  // Every other view gets its notes here, once, after the builder (and its
+  // overview tiling / id prefixing) has settled the final node ids.
+  //
+  // A `comment` is always a note. A `doc` documents its owner and already has
+  // a textual home in that owner's `doc` compartment (issue #107), so it only
+  // becomes a note on the views that draw no compartments at all.
+  withNotes(model, root4, index2, uri) {
+    if (model.kind === "gv" || model.kind === "bv" || model.kind === "grv")
+      return model;
+    const docAsNote = model.kind === "sv" || model.kind === "gev";
+    const drawn = /* @__PURE__ */ new Map();
+    const externalUris = /* @__PURE__ */ new Set();
+    const key = (source) => source && `${source.uri}:${source.range.start.line}:${source.range.start.character}`;
+    const claim = (source, target) => {
+      const k = key(source);
+      if (!k)
+        return;
+      if (source && source.uri !== uri)
+        externalUris.add(source.uri);
+      const list = drawn.get(k);
+      if (list)
+        list.push(target);
+      else
+        drawn.set(k, [target]);
+    };
+    for (const n2 of model.nodes) {
+      claim(n2.source, { id: n2.id, parent: n2.parent, frame: n2.frame });
+      for (const port of n2.ports ?? []) {
+        claim(port.source, { id: port.id, parent: n2.parent, frame: n2.frame, port: true });
+      }
+    }
+    for (const f of model.frames ?? []) {
+      claim(f.source, { id: f.id, frame: f.id });
+      for (const port of f.ports ?? []) {
+        claim(port.source, { id: port.id, frame: f.id, port: true });
+      }
     }
+    if (model.ivBoundary) {
+      claim(model.ivBoundary.source, { id: model.ivBoundary.id, frame: model.ivBoundary.id });
+      for (const port of model.ivBoundary.ports ?? []) {
+        claim(port.source, { id: port.id, frame: model.ivBoundary.id, port: true });
+      }
+    }
+    if (!drawn.size)
+      return model;
+    const nodes = [...model.nodes];
+    const edges = [...model.edges];
+    let noteCount = 0;
+    let edgeCount = edges.length;
+    const note = (annotation) => {
+      const targets = drawn.get(key(sourceOf2(annotation.owner, uri)) ?? "")?.filter((target) => annotation.keyword !== "doc" || docAsNote || target.port);
+      if (!targets?.length)
+        return;
+      for (const target of targets) {
+        const id2 = `__note_${noteCount++}__`;
+        nodes.push({
+          id: id2,
+          name: annotation.label,
+          keyword: annotation.keyword,
+          isDef: false,
+          shape: "annotation",
+          type: annotation.body,
+          // Sit in the same container as the element the note is about,
+          // so the note travels with it instead of floating at the root.
+          ...target.parent ? { parent: target.parent } : {},
+          ...target.frame ? { frame: target.frame } : {},
+          source: sourceOf2(annotation.annotation, uri)
+        });
+        edges.push({
+          id: `e${edgeCount++}`,
+          from: id2,
+          to: target.id,
+          kind: "annotation",
+          source: sourceOf2(annotation.annotation, uri)
+        });
+      }
+    };
+    for (const annotation of this.semanticAnnotations(root4, index2))
+      note(annotation);
+    for (const externalUri of externalUris) {
+      const externalRoot = this.externalDocumentRoot(externalUri);
+      if (externalRoot) {
+        for (const annotation of this.semanticAnnotations(externalRoot, this.localIndex(externalRoot)))
+          note(annotation);
+      }
+    }
+    return noteCount ? { ...model, nodes, edges } : model;
   }
   // REQ-224 — Detect the file/anchor-specific view kinds that will render
   // substantive diagram content. The extension uses this to limit the
@@ -162649,6 +162816,132 @@ var SysmlDiagramModelProvider = class _SysmlDiagramModelProvider {
     cache.contents = contents;
     return contents;
   }
+  // REQ-210 — Annotation graphics
+  // Keep the whole-document filter out of each view build. Target resolution
+  // remains live because the workspace index can become more complete without
+  // reparsing the document.
+  annotationMembers(root4) {
+    const cache = this.perParse(root4);
+    if (cache.annotations)
+      return cache.annotations;
+    const comments = [];
+    const docs = [];
+    for (const node of [root4, ...this.rootContents(root4)]) {
+      if (node.$type === "CommentStmt")
+        comments.push(node);
+      else if (node.$type === "DocCommentMember")
+        docs.push(node);
+    }
+    cache.annotations = { comments, docs };
+    return cache.annotations;
+  }
+  // REQ-210 — Annotation graphics
+  // Resolve a document's modeled annotations once for every workspace-index
+  // epoch. Different diagram kinds then only match semantic owners to their
+  // rendered source identities instead of walking and resolving the AST again.
+  semanticAnnotations(root4, index2) {
+    const cache = this.perParse(root4);
+    if (cache.semanticAnnotations?.epoch === this.indexEpoch)
+      return cache.semanticAnnotations.values;
+    const members = this.annotationMembers(root4);
+    const values2 = [];
+    for (const comment of members.comments) {
+      const rawTargets = comment.targets ?? [];
+      const owners = rawTargets.length ? this.commentTargets(comment, index2) : [comment.$container];
+      for (const owner of owners) {
+        if (!owner)
+          continue;
+        values2.push({
+          annotation: comment,
+          owner,
+          keyword: "comment",
+          label: nameOf2(comment) ?? "comment",
+          body: annotationText(trailingBlockBody(comment))
+        });
+      }
+    }
+    for (const doc of members.docs) {
+      if (!doc.$container)
+        continue;
+      values2.push({
+        annotation: doc,
+        owner: doc.$container,
+        keyword: "doc",
+        label: nameOf2(doc) ?? "doc",
+        body: annotationText(docCommentBody(doc))
+      });
+    }
+    cache.semanticAnnotations = { epoch: this.indexEpoch, values: values2 };
+    return values2;
+  }
+  annotationPathResolver(node) {
+    if (!this.shared)
+      return this.featurePaths;
+    try {
+      const services = this.shared.ServiceRegistry.getServices(ast_utils_exports.getDocument(node).uri);
+      let resolver = this.annotationFeaturePaths.get(services);
+      if (!resolver) {
+        resolver = new FeaturePathResolver(services);
+        this.annotationFeaturePaths.set(services, resolver);
+      }
+      return resolver;
+    } catch {
+      return this.featurePaths;
+    }
+  }
+  annotationDescriptionNode(context, description) {
+    if (!description)
+      return void 0;
+    if (!this.shared)
+      return description.node;
+    try {
+      const services = this.shared.ServiceRegistry.getServices(ast_utils_exports.getDocument(context).uri);
+      const linker = services.references.Linker;
+      return linker.resolveIndexedNode?.(description) ?? description.node;
+    } catch {
+      return description.node;
+    }
+  }
+  // REQ-210 — Annotation graphics
+  /** Resolve every `comment about` target by semantic path identity. */
+  commentTargets(comment, index2) {
+    const rawTargets = comment.targets ?? [];
+    if (!rawTargets.length)
+      return [];
+    const root4 = this.documentRootOf(comment);
+    const all = [root4, ...this.rootContents(root4)];
+    const resolver = this.annotationPathResolver(comment);
+    const resolved = rawTargets.map((raw, occurrence) => {
+      const segment = resolver.resolvePropertyPath(comment, "targets", occurrence).segments.at(-1);
+      const linked = segment?.target ?? this.annotationDescriptionNode(comment, segment?.description);
+      if (linked)
+        return linked;
+      const path10 = this.featurePath(raw)?.trim();
+      if (!path10)
+        return void 0;
+      const unrooted = path10.replace(/^\s*\$\s*::\s*/u, "");
+      if (!/::|\./u.test(unrooted)) {
+        for (let scope = comment.$container; scope; scope = scope.$container) {
+          const local = membersOf(scope).find((member) => member !== comment && nameOf2(member) === unrooted);
+          if (local)
+            return local;
+          const declaringIndex = this.localIndex(this.documentRootOf(scope));
+          for (const inherited of this.inheritedTypesOf(scope, declaringIndex)) {
+            const inheritedMember = membersOf(inherited).find((member) => nameOf2(member) === unrooted);
+            if (inheritedMember)
+              return inheritedMember;
+          }
+        }
+        return index2.get(unrooted);
+      }
+      const qualified = all.filter((candidate) => {
+        const qname = qnameOf(candidate);
+        return qname.length > 0 && pathMatchesQName(unrooted, qname);
+      });
+      return qualified.length === 1 ? qualified[0] : void 0;
+    }).filter((target) => target !== void 0);
+    return [...new Set(resolved)];
+  }
   // REQ-192/REQ-193 — prefer Langium's linked typing target. The diagram's
   // local index deliberately contains only the active document, so consulting
   // it alone drops structure declared in an imported workspace/library file
@@ -163723,8 +164016,7 @@ var SysmlDiagramModelProvider = class _SysmlDiagramModelProvider {
       }
     }
     let annotationCount = 0;
-    const annotate = (m, keyword, label, detail, target) => {
-      const owner = target ?? m.$container;
+    const annotate = (m, keyword, label, detail, targets) => {
       const annId = `__annotation_${annotationCount++}__`;
       nodes.push({
         id: annId,
@@ -163736,17 +164028,33 @@ var SysmlDiagramModelProvider = class _SysmlDiagramModelProvider {
         ...packageOf2(m),
         source: sourceOf2(m, uri)
       });
-      if (owner && ids.has(owner)) {
-        edges.push({ id: `e${e++}`, from: annId, to: ids.get(owner), kind: "annotation", source: sourceOf2(m, uri) });
+      const owners = targets?.length ? targets : m.$container ? [m.$container] : [];
+      for (const owner of new Set(owners)) {
+        if (!ids.has(owner))
+          continue;
+        edges.push({
+          id: `e${e++}`,
+          from: annId,
+          to: ids.get(owner),
+          kind: "annotation",
+          source: sourceOf2(m, uri)
+        });
+      }
+    };
+    const drawnAnnotationTarget = (target) => {
+      for (let current2 = target; current2; current2 = current2.$container) {
+        if (ids.has(current2))
+          return current2;
       }
+      return void 0;
     };
     for (const m of all) {
       if (m.$type === "CommentStmt") {
-        const targets = m.targets ?? [];
-        const target = targets.length ? byName.get(lastSeg(String(this.featurePath(targets[0]) ?? ""))) : void 0;
-        if (targets.length && !target)
+        const rawTargets = m.targets ?? [];
+        const targets = rawTargets.length ? this.commentTargets(m, index2).map(drawnAnnotationTarget).filter((target) => target !== void 0) : void 0;
+        if (rawTargets.length && !targets?.length)
           continue;
-        annotate(m, "comment", nameOf2(m) ?? "comment", annotationText(trailingBlockBody(m)), target);
+        annotate(m, "comment", nameOf2(m) ?? "comment", annotationText(trailingBlockBody(m)), targets);
       } else if (m.$type === "RepStmt") {
         const lang = `language "${String(m.language ?? "")}"`;
         const body = annotationText(trailingBlockBody(m));
@@ -163757,7 +164065,7 @@ var SysmlDiagramModelProvider = class _SysmlDiagramModelProvider {
           continue;
         const body = annotationText(docCommentBody(m));
         if (body)
-          annotate(m, "doc", nameOf2(m) ?? "doc", body, owner);
+          annotate(m, "doc", nameOf2(m) ?? "doc", body, owner ? [owner] : void 0);
       } else if (isMetadataDecl(m) && m.isDef !== true && (nameOf2(m) || typeText(m)) && !ids.has(m)) {
         const attrs = metadataAttrsText(m);
         const detail = typeText(m) ? `${typeText(m)}${attrs ? ` { ${attrs} }` : ""}` : attrs;
@@ -170103,6 +170411,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 '"'.`,
@@ -178000,6 +178311,20 @@ var SysmlLinker = class extends DefaultLinker {
   resolveIndexedNode(nodeDescription) {
     return this.loadAstNode(nodeDescription);
   }
+  // REQ-210 — Annotation graphics
+  /**
+   * Return the parsed root for a live workspace or lazily loaded library file.
+   * Diagram projection uses this to collect annotations declared beside an
+   * inherited member without adding standard-library files to the workspace.
+   */
+  resolveDocumentRoot(uri) {
+    const live = this.langiumDocuments().getDocument(uri)?.parseResult?.value;
+    if (live)
+      return live;
+    if (!isStandardLibraryUri(uri))
+      return void 0;
+    return this.parsedLibraryDocument(uri)?.parseResult?.value;
+  }
   /** Parse (once) the standard-library file a precomputed description points at.
    *  Prefers an already-live workspace document when one exists (runtime-loaded
    *  library, or the user opened the file) so there is never a second copy. */
@@ -181911,19 +182236,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
   };
@@ -182201,6 +182522,7 @@ function portLabelPlacement(side, x, y, label, half = PORT_GLYPH_HALF, alongHalf
 }
 var SEQ_MSG_TOP = 76;
 var SEQ_MSG_GAP = 46;
+var SEQ_NOTE_GAP = 40;
 function sequenceSlotBoundaryY(slot) {
   return SEQ_MSG_TOP + (slot - 0.5) * SEQ_MSG_GAP;
 }
@@ -182299,6 +182621,12 @@ function gvNodeCategory(node) {
   };
   return alias[k] ?? "other";
 }
+function withoutOrphanedAnnotations(original, nodes, edges) {
+  const originallyAttached = new Set(original.edges.filter((edge) => edge.kind === "annotation").map((edge) => edge.from));
+  if (originallyAttached.size === 0) return nodes;
+  const stillAttached = new Set(edges.filter((edge) => edge.kind === "annotation").map((edge) => edge.from));
+  return nodes.filter((node) => node.shape !== "annotation" || !originallyAttached.has(node.id) || stillAttached.has(node.id));
+}
 function applyGvFilters(model, hidden) {
   if (model.kind !== "gv" || hidden.size === 0) return model;
   const nodes = model.nodes.filter((n2) => n2.shape === "package" || !hidden.has(gvNodeCategory(n2)));
@@ -182309,7 +182637,7 @@ function applyGvFilters(model, hidden) {
     for (const p of n2.ports ?? []) keptIds.add(p.id);
   }
   const edges = model.edges.filter((e) => keptIds.has(e.from) && keptIds.has(e.to));
-  return { ...model, nodes, edges };
+  return { ...model, nodes: withoutOrphanedAnnotations(model, nodes, edges), edges };
 }
 var PAD = 10;
 var NODE_W = 168;
@@ -182806,9 +183134,10 @@ function applyCaseDefs(model, show) {
   if (hidden.size === 0) return model;
   const edges = model.edges.filter((e) => !hidden.has(e.from) && !hidden.has(e.to));
   const retainedEndpoints = new Set(edges.flatMap((edge) => [edge.from, edge.to]));
+  const nodes = model.nodes.filter((n2) => !hidden.has(n2.id) && (n2.meta?.cvAuxiliary !== true || retainedEndpoints.has(n2.id)));
   return {
     ...model,
-    nodes: model.nodes.filter((n2) => !hidden.has(n2.id) && (n2.meta?.cvAuxiliary !== true || retainedEndpoints.has(n2.id))),
+    nodes: withoutOrphanedAnnotations(model, nodes, edges),
     edges
   };
 }
@@ -182888,7 +183217,7 @@ function applyBehaviorFilters(model, filters) {
     ...nextFrames.flatMap((f) => (f.ports ?? []).map((p) => p.id))
   ]);
   const edges = model.edges.filter((e) => !(model.kind === "afv" && !filters.definedBy && e.kind === "definedBy") && !hiddenPortIds.has(e.from) && !hiddenPortIds.has(e.to) && liveIds.has(e.from) && liveIds.has(e.to));
-  return { ...model, frames: nextFrames, nodes, edges };
+  return { ...model, frames: nextFrames, nodes: withoutOrphanedAnnotations(model, nodes, edges), edges };
 }
 function collapseIvModel(model, hiddenInternals) {
   const frames = model.frames ?? [];
@@ -183331,8 +183660,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 +183718,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 +183738,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 };
 }
 
@@ -183531,6 +183826,7 @@ var GEO_TARGET_H = 520;
 var GEO_DEF_W = 400;
 var GEO_DEF_H = 300;
 var GEO_STRIP_GAP = 16;
+var GEO_STRIP_INSET = 16;
 var GEO_FRAME_ID = "__geoframe__";
 var GEO_EMPTY_W = 560;
 var GEO_EMPTY_H = 320;
@@ -183599,7 +183895,7 @@ function layoutGeometry(nodes, edges, meta) {
     const frame2 = makeGeoFrameNode(kind, GEO_EMPTY_W, GEO_EMPTY_H, {
       geoEmpty: { hLabel: axes.h ?? "x", vLabel: axes.v ?? "z", unit }
     });
-    placeStrip(strip, GEO_MARGIN_LEFT + 16, GEO_EMPTY_H + GEO_STRIP_GAP);
+    placeStrip(strip, GEO_MARGIN_LEFT + GEO_STRIP_INSET, GEO_EMPTY_H + GEO_STRIP_GAP);
     return { nodes: [frame2, ...strip], edges };
   }
   const is3d = placed.some((n2) => n2.data.node.geo.shape !== void 0 || n2.data.node.geo.z !== void 0);
@@ -193583,7 +193879,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 +195442,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 +195468,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) {
@@ -195507,13 +195821,18 @@ var SEQ_EVENT_GAP = 22;
 function layoutSequence(nodes, edges, overrides) {
   const ov = overrides ?? {};
   const lifelines = nodes.filter((n2) => n2.data.node?.shape === "lifeline").sort((a2, b) => Number(a2.data.node?.meta?.order ?? 0) - Number(b.data.node?.meta?.order ?? 0));
+  const lifelineIds = new Set(lifelines.map((n2) => n2.id));
+  const noteNodes = nodes.filter((n2) => n2.data.node?.shape === "annotation");
+  const isMessage = (edge) => edge.data?.edge.kind === "message" && lifelineIds.has(edge.source) && lifelineIds.has(edge.target);
+  const nonMessageEdges = edges.filter((edge) => !isMessage(edge));
+  const msgs = edges.filter(isMessage);
   const slotFor = (e, i) => {
     const s = e.data?.edge.meta?.slot;
     return typeof s === "number" && Number.isFinite(s) && s >= 0 ? s : i;
   };
-  const msgY = edges.map((e, i) => MSG_TOP + slotFor(e, i) * MSG_GAP);
-  const lastMsgY = edges.length ? Math.max(...msgY) : MSG_TOP;
-  let maxSlot = edges.length ? Math.max(...edges.map(slotFor)) : -1;
+  const msgY = msgs.map((e, i) => MSG_TOP + slotFor(e, i) * MSG_GAP);
+  const lastMsgY = msgs.length ? Math.max(...msgY) : MSG_TOP;
+  let maxSlot = msgs.length ? Math.max(...msgs.map(slotFor)) : -1;
   const eventBase = lastMsgY + 22;
   let maxEventY = 0;
   const eventsByLifeline = /* @__PURE__ */ new Map();
@@ -195536,7 +195855,7 @@ function layoutSequence(nodes, edges, overrides) {
     baseX.push(cursorX);
     cursorX += n2.data.w + LIFELINE_MIN_GAP;
   }
-  const msgHandles = edges.map((_edge, i) => ({ id: `m${i}`, y: msgY[i] }));
+  const msgHandles = msgs.map((_edge, i) => ({ id: `m${i}`, y: msgY[i] }));
   const insertHandles = Array.from({ length: Math.max(maxSlot, -1) + 2 }, (_2, k) => ({
     id: `d${k}`,
     y: sequenceSlotBoundaryY(k),
@@ -195547,7 +195866,7 @@ function layoutSequence(nodes, edges, overrides) {
     const w = n2.data.w;
     const x = overrideFor(n2, ov)?.x ?? baseX[i];
     xOf.set(n2.id, x + w / 2);
-    const ys = edges.map((e, idx) => e.source === n2.id || e.target === n2.id ? msgY[idx] : void 0).filter((y) => y != null);
+    const ys = msgs.map((e, idx) => e.source === n2.id || e.target === n2.id ? msgY[idx] : void 0).filter((y) => y != null);
     const activation = ys.length ? { from: Math.min(...ys) - 6, to: Math.max(...ys) + 6 } : void 0;
     return {
       ...n2,
@@ -195566,7 +195885,7 @@ function layoutSequence(nodes, edges, overrides) {
       draggable: true
     };
   });
-  const outEdges = edges.map((e, i) => {
+  const outEdges = msgs.map((e, i) => {
     const y = msgY[i];
     return {
       ...e,
@@ -195603,7 +195922,21 @@ function layoutSequence(nodes, edges, overrides) {
     const h = Math.max(40, bottom - top);
     return { ...n2, position: { x: left, y: top }, width: w, height: h, data: { ...n2.data, w, h }, zIndex: 0 };
   });
-  return { nodes: [...fragmentNodes, ...out], edges: outEdges, height: bodyH };
+  const noteX = out.length ? Math.max(...out.map((node) => node.position.x + (node.width ?? node.data.w))) + SEQ_NOTE_GAP : 20 + SEQ_NOTE_GAP;
+  let noteY = MSG_TOP;
+  const placedNotes = noteNodes.map((n2) => {
+    const o = overrideFor(n2, ov);
+    const y = o?.y ?? noteY;
+    noteY = Math.max(noteY, y + n2.data.h + SEQ_NOTE_GAP);
+    return { ...n2, position: { x: o?.x ?? noteX, y }, draggable: true };
+  });
+  const sequenceNodes = [...fragmentNodes, ...out, ...placedNotes];
+  assignEdgeSides(sequenceNodes, nonMessageEdges);
+  return {
+    nodes: sequenceNodes,
+    edges: [...outEdges, ...nonMessageEdges],
+    height: Math.max(bodyH, noteY)
+  };
 }
 var TILE_PAD = 22;
 var TILE_HEADER = 38;
@@ -195667,7 +196000,12 @@ async function layoutTiledOverview(model, nodes, edges, args) {
     }));
     const localOverrides = overrideSubset(members, args.overrides);
     const meta = tileMeta[frame2.id];
-    const laidPromise = model.kind === "sv" ? Promise.resolve(layoutSequence(detached, tileEdges, localOverrides)) : model.kind === "gev" ? Promise.resolve(layoutGeometry(detached, tileEdges, meta ?? model.meta)) : layoutFlow(detached, tileEdges, {
+    const laidPromise = model.kind === "sv" ? Promise.resolve(layoutSequence(detached, tileEdges, localOverrides)) : model.kind === "gev" ? Promise.resolve(layoutGeometryWithAnnotationEdges(
+      detached,
+      tileEdges,
+      meta ?? model.meta,
+      args.connectPointSpacing
+    )) : layoutFlow(detached, tileEdges, {
       ...args,
       overrides: localOverrides,
       kind: args.kind ?? model.kind,
@@ -196121,13 +196459,25 @@ async function layoutBands(nodes, edges, overrides, direction = "TB", connectPoi
   assignEdgeSides(all, edges, false, connectPointSpacing);
   return { nodes: all, edges };
 }
+function layoutGeometryWithAnnotationEdges(nodes, edges, meta, connectPointSpacing = CONNECT_POINT_SPACING_DEFAULT) {
+  const laid = layoutGeometry(nodes, edges, meta);
+  assignEdgeSides(
+    laid.nodes,
+    laid.edges.filter((edge) => edge.data?.edge.kind === "annotation"),
+    false,
+    connectPointSpacing
+  );
+  return laid;
+}
 async function layoutDiagram(model, nodes, edges, args) {
   const { kind, direction, overrides, connectPointSpacing } = args;
   if (model.meta?.groupMode === "tiled-h" || model.meta?.groupMode === "tiled-v") {
     return layoutTiledOverview(model, nodes, edges, { direction, overrides, kind, connectPointSpacing });
   }
   const profile2 = profileFor(kind);
-  if (profile2.layout === "geometry") return layoutGeometry(nodes, edges, model.meta);
+  if (profile2.layout === "geometry") {
+    return layoutGeometryWithAnnotationEdges(nodes, edges, model.meta, connectPointSpacing);
+  }
   if (profile2.layout === "sequence") return layoutSequence(nodes, edges, overrides);
   if (kind === "gv" && (args.gvMode ?? "group") === "group") {
     return layoutBands(nodes, edges, overrides, direction, connectPointSpacing);
@@ -197891,7 +198241,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 +198285,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 +198298,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 +198317,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 +198354,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 +198371,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). */
@@ -198639,7 +198977,7 @@ function getViewState(sc, anchor, kind) {
 }
 
 // src/node-markup.tsx
-var import_react10 = __toESM(require_react(), 1);
+var import_react11 = __toESM(require_react(), 1);
 var import_server = __toESM(require_server_node(), 1);
 
 // ../extension/src/webview/diagram/flow/context.ts
@@ -198690,7 +199028,7 @@ function useDiagram() {
 }
 
 // ../extension/src/webview/diagram/flow/nodes.tsx
-var import_react8 = __toESM(require_react());
+var import_react9 = __toESM(require_react());
 
 // ../extension/src/webview/diagram/derive.ts
 function edgeKindLabel(kind) {
@@ -199043,6 +199381,7 @@ var DIRECT_NAME_RE = new RegExp(`^${DIRECT_NAME_SEGMENT}$`);
 var DIRECT_PATH_RE = new RegExp(`^${DIRECT_NAME_SEGMENT}(?:\\.${DIRECT_NAME_SEGMENT})*$`);
 function isWritableRelationEndpoint(endpoint) {
   if (!endpoint) return false;
+  if (endpoint.shape === "annotation") return false;
   if (pseudostateEndpointPath(endpoint.keyword)) return true;
   if (!endpoint.source || /^__flow_\d+__(?:\.|$)/u.test(endpoint.id)) return false;
   if (!endpoint.name.trim() && ["if", "while", "loop", "for"].includes(endpoint.keyword.trim().toLowerCase())) return true;
@@ -199063,6 +199402,7 @@ var TERMINAL_RELATION = "finish";
 function relationToolsForNode(keyword, viewKind, shape) {
   const { base, isDefinition, isDecision } = normalizedElementKeyword(keyword);
   const tools = TOOLBOX[viewKind]?.relations ?? [];
+  if (shape === "annotation") return [];
   if (viewKind === "afv" && ["if", "while", "loop", "for"].includes(base)) {
     return tools.filter((tool) => tool.kind === "terminate");
   }
@@ -199139,6 +199479,12 @@ function relationToolsForNode(keyword, viewKind, shape) {
 var import_react7 = __toESM(require_react());
 var import_jsx_runtime3 = __toESM(require_jsx_runtime());
 var ptStr = (pts) => pts.map((p) => `${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(" ");
+var GEO_HANDLE_POSITION = {
+  top: Position3.Top,
+  right: Position3.Right,
+  bottom: Position3.Bottom,
+  left: Position3.Left
+};
 function niceStep(range, target = 5) {
   if (!(range > 0)) return 1;
   const raw = range / target;
@@ -199353,7 +199699,7 @@ function GeoShapeNode({ id: id2, data, selected: selected2 }) {
   const origin = data.origin;
   const iso = data.geo3d && node.geo && origin;
   const approx = node.geo?.approx;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       className: `rf-node rf-geo${selected2 ? " selected" : ""}${approx ? " dgeo-approx" : ""}`,
@@ -199363,19 +199709,38 @@ function GeoShapeNode({ id: id2, data, selected: selected2 }) {
         e.stopPropagation();
         ctx.onContextNode(id2, e.clientX, e.clientY);
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { className: "rf-node-svg", width: w, height: h, style: { overflow: "visible" }, children: [
-        iso ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("g", { className: `dgeo3d-node${selected2 ? " selected" : ""}`, transform: `translate(${-origin.x},${-origin.y})`, children: geoShapeBody(node, data.geo3d) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("text", { className: "dgeo3d-name", x: w / 2, y: -3, textAnchor: "middle", children: node.name })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { className: `dnode-rect${selected2 ? " selected" : ""}`, x: 0, y: 0, width: w, height: h, rx: node.isDef ? 0 : 12 }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("text", { className: "dnode-label", x: w / 2, y: h / 2 + 3, textAnchor: "middle", children: node.name })
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { className: "rf-node-svg", width: w, height: h, style: { overflow: "visible" }, children: [
+          iso ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("g", { className: `dgeo3d-node${selected2 ? " selected" : ""}`, transform: `translate(${-origin.x},${-origin.y})`, children: geoShapeBody(node, data.geo3d) }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("text", { className: "dgeo3d-name", x: w / 2, y: -3, textAnchor: "middle", children: node.name })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { className: `dnode-rect${selected2 ? " selected" : ""}`, x: 0, y: 0, width: w, height: h, rx: node.isDef ? 0 : 12 }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("text", { className: "dnode-label", x: w / 2, y: h / 2 + 3, textAnchor: "middle", children: node.name })
+          ] }),
+          approx ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("text", { className: "dgeo-approx-mark", x: w - 2, y: -3, textAnchor: "end", children: [
+            "\u26A0",
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("title", { children: `${node.name}: ${approx}` })
+          ] }) : null
         ] }),
-        approx ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("text", { className: "dgeo-approx-mark", x: w - 2, y: -3, textAnchor: "end", children: [
-          "\u26A0",
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("title", { children: `${node.name}: ${approx}` })
-        ] }) : null
-      ] })
+        PORT_DOCK_SIDES.flatMap((side) => (data.edgeSideAnchors?.[side] ?? []).map((offset2) => {
+          const point = sidePoint(side, offset2, w, h);
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            Handle,
+            {
+              type: "target",
+              id: sideAnchorHandleId(side, offset2),
+              position: GEO_HANDLE_POSITION[side],
+              style: { left: point.x, top: point.y, transform: "translate(-50%,-50%)" },
+              className: "rf-handle rf-handle-side",
+              isConnectable: true,
+              isConnectableStart: false,
+              isConnectableEnd: true
+            },
+            `${side}-${offset2}`
+          );
+        }))
+      ]
     }
   );
 }
@@ -199504,8 +199869,8 @@ function mountedNodeSidePointOffsets(data, side, connectable, exposeAll) {
 function useMountedHandleRegistration(id2, sideOffsets) {
   const mountedKey = mountedHandleKey(sideOffsets);
   const updateNodeInternals2 = useUpdateNodeInternals();
-  const lastKeyRef = (0, import_react8.useRef)(mountedKey);
-  (0, import_react8.useEffect)(() => {
+  const lastKeyRef = (0, import_react9.useRef)(mountedKey);
+  (0, import_react9.useEffect)(() => {
     if (lastKeyRef.current === mountedKey) return;
     lastKeyRef.current = mountedKey;
     updateNodeInternals2(id2);
@@ -199522,9 +199887,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 gestureRef = (0, import_react8.useRef)(void 0);
-  (0, import_react8.useEffect)(() => () => gestureRef.current?.abort(), []);
+  const [dragId, setDragId] = (0, import_react9.useState)(void 0);
+  const gestureRef = (0, import_react9.useRef)(void 0);
+  (0, import_react9.useEffect)(() => () => gestureRef.current?.abort(), []);
   const onPortPointerDown = (portId, e, origin, draggable = true) => {
     if (e.button !== 0) return;
     e.stopPropagation();
@@ -199966,7 +200331,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 +200405,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 +200418,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 +200426,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 ? (
@@ -200199,8 +200564,8 @@ function ContainerControls({
   ] });
 }
 function InlineEditor({ initial, mode, elementKind, onCommit, onCancel, w }) {
-  const ref = (0, import_react8.useRef)(null);
-  (0, import_react8.useEffect)(() => {
+  const ref = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(() => {
     const el2 = ref.current;
     if (el2) {
       el2.focus();
@@ -200296,9 +200661,9 @@ 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 rawId = (0, import_react9.useId)();
   const clipId = `dnode-clip-${rawId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
   const clip = !CLIP_EXEMPT.has(node.shape) || data.kind === "gv" && node.shape === "actor";
   const elementColorClass = diagramElementColorClass(diagramElementColorTypeForNode(node.shape, node.keyword));
@@ -200316,7 +200681,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 +200694,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";
@@ -200344,7 +200710,7 @@ function SysmlNode({ id: id2, data, draggable, selected: selected2, width, heigh
   const internalNoun = INTERNAL_NOUN[data.kind] ?? "internal parts";
   const featureCompartmentsVisible = node.meta?.featureCompartmentsVisible === true;
   const featureCompartmentHeight = featureBandTopReserve(data);
-  const containerRef = (0, import_react8.useRef)(null);
+  const containerRef = (0, import_react9.useRef)(null);
   const portSource = (pid) => {
     const p = node.ports?.find((pp) => pp.id === pid);
     ctx.onPortSelected?.();
@@ -200371,8 +200737,8 @@ function SysmlNode({ id: id2, data, draggable, selected: selected2, width, heigh
   const nodeSideStartable = directRelation !== void 0 && data.kind !== "sv" && node.shape !== "lifeline" && !isPackageEndpoint(node.shape, node.keyword);
   const selectedPortId = useInteraction(ctx.store, (s) => typeof s.selectedId === "string" && myPortIds.includes(s.selectedId) ? s.selectedId : void 0);
   const dropClass = useDropState(ctx.store, id2);
-  const [hoveredPortId, setHoveredPortId] = (0, import_react8.useState)(void 0);
-  const [sidePointsHovered, setSidePointsHovered] = (0, import_react8.useState)(false);
+  const [hoveredPortId, setHoveredPortId] = (0, import_react9.useState)(void 0);
+  const [sidePointsHovered, setSidePointsHovered] = (0, import_react9.useState)(false);
   const isPackageNode = isPackageEndpoint(node.shape, node.keyword);
   const sideConnectable = data.kind !== "sv" && !isPackageNode;
   const perimeterControl = keepsPerimeterSidePointsMounted(node.shape);
@@ -200455,6 +200821,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 +200868,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 +200875,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,14 +201041,15 @@ 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";
   const partitionKindShown = fitKind(partitionKindFull, Math.max(1, w - 20));
-  const rawClipId = (0, import_react8.useId)();
+  const rawClipId = (0, import_react9.useId)();
   const clipId = `dframe-clip-${rawClipId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
   const structuredPrefix = `\xAB${structuredKeyword}\xBB`;
   const structuredConditionShown = structuredCondition ? fitText(structuredCondition, Math.max(1, w - 24 - structuredPrefix.length * 9 * 0.78), 11) : "";
@@ -200690,7 +201077,7 @@ function FrameNode({ id: id2, data, selected: selected2, width, height }) {
     performer: frame2.meta?.performerLane === true,
     structured: frame2.meta?.structuredControl === true
   }));
-  const containerRef = (0, import_react8.useRef)(null);
+  const containerRef = (0, import_react9.useRef)(null);
   const portSource = (pid) => {
     ctx.onPortSelected?.();
     ctx.onReveal(frame2.ports?.find((p) => p.id === pid)?.source, pid);
@@ -200718,8 +201105,8 @@ function FrameNode({ id: id2, data, selected: selected2, width, height }) {
   const selectedPortId = useInteraction(ctx.store, (s) => typeof s.selectedId === "string" && myPortIds.includes(s.selectedId) ? s.selectedId : void 0);
   const dropClass = useDropState(ctx.store, id2);
   const editing = useInteraction(ctx.store, (s) => s.editing?.nodeId === id2 && !s.editing?.at && !s.editing?.edgeId ? s.editing : void 0);
-  const [hoveredPortId, setHoveredPortId] = (0, import_react8.useState)(void 0);
-  const [sidePointsHovered, setSidePointsHovered] = (0, import_react8.useState)(false);
+  const [hoveredPortId, setHoveredPortId] = (0, import_react9.useState)(void 0);
+  const [sidePointsHovered, setSidePointsHovered] = (0, import_react9.useState)(false);
   const sideConnectable = data.kind !== "sv" && !isPackageFrame && !isPartitionLane && !isOuterViewFrame;
   const sideOffsets = isPartitionLane ? SIDES.map(() => []) : SIDES.map((side) => mountedNodeSidePointOffsets(
     data,
@@ -200892,7 +201279,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 +201349,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 +201356,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) => {
@@ -201088,12 +201494,12 @@ function SeqFragmentNode({ data, width, height }) {
   ] }) });
 }
 var nodeTypes = {
-  sysml: (0, import_react8.memo)(SysmlNode),
-  frame: (0, import_react8.memo)(FrameNode),
-  lane: (0, import_react8.memo)(LaneNode),
-  seqfragment: (0, import_react8.memo)(SeqFragmentNode),
-  geo: (0, import_react8.memo)(GeoShapeNode),
-  geoframe: (0, import_react8.memo)(GeoFrameNode)
+  sysml: (0, import_react9.memo)(SysmlNode),
+  frame: (0, import_react9.memo)(FrameNode),
+  lane: (0, import_react9.memo)(LaneNode),
+  seqfragment: (0, import_react9.memo)(SeqFragmentNode),
+  geo: (0, import_react9.memo)(GeoShapeNode),
+  geoframe: (0, import_react9.memo)(GeoFrameNode)
 };
 
 // src/node-markup.tsx
@@ -201157,13 +201563,13 @@ function renderNodeBody(node, lineStyle, index2) {
     width: node.width ?? node.measured?.width ?? node.data.w,
     height: node.height ?? node.measured?.height ?? node.data.h
   };
-  const markup = (0, import_server.renderToStaticMarkup)((0, import_react10.createElement)(
+  const markup = (0, import_server.renderToStaticMarkup)((0, import_react11.createElement)(
     ReactFlowProvider,
     null,
-    (0, import_react10.createElement)(
+    (0, import_react11.createElement)(
       DiagramContext.Provider,
       { value: exportContext(lineStyle) },
-      (0, import_react10.createElement)(Component, props)
+      (0, import_react11.createElement)(Component, props)
     )
   ));
   const inner = extractNodeSvgInner(markup);
@@ -201343,7 +201749,7 @@ async function runExport(command) {
   const root4 = command.workspace ? path8.resolve(command.workspace) : findWorkspaceRoot(file);
   const settings = diagramSettingsFor(readProjectConfig(root4));
   const sideCar = command.autoLayout ? emptySideCar() : readSideCar(root4, file);
-  const provider = new SysmlDiagramModelProvider();
+  const provider = new SysmlDiagramModelProvider(services.shared);
   const kinds = command.all ? CANVAS_KINDS.filter((kind) => provider.buildAvailableDiagramKinds(document2, command.anchor).some((available) => available.kind === kind)) : [command.view ?? settings.defaultKind];
   const written = [];
   const empty2 = [];
@@ -201371,7 +201777,7 @@ async function runExport(command) {
 }
 
 // src/main.ts
-var VERSION2 = true ? "0.20.2" : "dev";
+var VERSION2 = true ? "0.21.0" : "dev";
 function display(file) {
   const rel2 = path9.relative(process.cwd(), file);
   return rel2 && !rel2.startsWith("..") ? rel2.split(path9.sep).join("/") : file;