@dr2rai/raid-canvas 0.3.0 → 0.3.2

package/src/RaiBridge.ts

@@ -24,7 +24,13 @@ import {
   type HydrationOptions,
   type SerializationOptions,
 } from './types.js';
-import { createAimNode, createAimEdge, configureAimGraph, CascaisPalette } from './X6Shapes.js';
+import {
+  createAimNode,
+  createAimEdge,
+  configureAimGraph,
+  CascaisPalette,
+  wrapAimText,
+} from './X6Shapes.js';
 
 export class RaiBridge {
   /**
@@ -154,6 +160,34 @@ export class RaiBridge {
         }
       }
 
+      // Extract live rendered SVG path data from X6 EdgeView if available
+      let pathData: string | undefined = customData.pathData;
+      if (!pathData) {
+        const edgeView =
+          typeof (graph as unknown as { findViewByCell?: (cell: unknown) => unknown }).findViewByCell === 'function'
+            ? (
+                graph as unknown as {
+                  findViewByCell: (cell: unknown) => {
+                    getConnectionPathData?: () => string;
+                    container?: Element;
+                  } | null;
+                }
+              ).findViewByCell(edge)
+            : null;
+
+        if (edgeView) {
+          if (typeof edgeView.getConnectionPathData === 'function') {
+            const d = edgeView.getConnectionPathData();
+            if (d && d.trim().length > 0) pathData = d;
+          }
+          if (!pathData && edgeView.container) {
+            const pathEl = edgeView.container.querySelector('path[d]');
+            const d = pathEl?.getAttribute('d');
+            if (d && d.trim().length > 0) pathData = d;
+          }
+        }
+      }
+
       const edgeData: RaidEdgeData = {
         id: edge.id,
         kind: customData.kind ?? 'association',
@@ -167,16 +201,20 @@ export class RaiBridge {
         ...(customData.sourceCardinality !== undefined ? { sourceCardinality: customData.sourceCardinality } : {}),
         ...(customData.targetCardinality !== undefined ? { targetCardinality: customData.targetCardinality } : {}),
         bendPoints,
+        ...(pathData !== undefined ? { pathData } : {}),
       };
 
       edges.push(edgeData);
     }
 
+    const diagramRouting = (graph as unknown as { _aimRoutingMode?: AimRoutingMode })._aimRoutingMode;
+
     return {
       diagramId: 'RaidDiagram',
       archetype: 'InteractiveCanvas',
       nodes,
       edges,
+      ...(diagramRouting !== undefined ? { routing: diagramRouting } : {}),
     };
   }
 
@@ -207,6 +245,79 @@ export class RaiBridge {
     return points.map((p) => `${Math.round(p.x)},${Math.round(p.y)}`).join('; ');
   }
 
+  /**
+   * Computes a clean fallback SVG path connecting source and target nodes
+   * when running in headless environments (e.g. CLI, tests) without an active DOM.
+   */
+  public computeFallbackEdgePath(
+    sourceNode: RaidNodeData,
+    targetNode: RaidNodeData,
+    bendPoints: readonly SvgBendPoint[] = [],
+    routingMode: AimRoutingMode = 'manhattan',
+  ): string {
+    const scx = Math.round(sourceNode.bounds.x + sourceNode.bounds.width / 2);
+    const scy = Math.round(sourceNode.bounds.y + sourceNode.bounds.height / 2);
+    const tcx = Math.round(targetNode.bounds.x + targetNode.bounds.width / 2);
+    const tcy = Math.round(targetNode.bounds.y + targetNode.bounds.height / 2);
+
+    let sx = scx;
+    let sy = scy;
+    let tx = tcx;
+    let ty = tcy;
+
+    const dx = tcx - scx;
+    const dy = tcy - scy;
+
+    if (Math.abs(dx) >= Math.abs(dy)) {
+      if (dx > 0) {
+        sx = Math.round(sourceNode.bounds.x + sourceNode.bounds.width);
+        sy = scy;
+        tx = Math.round(targetNode.bounds.x);
+        ty = tcy;
+      } else {
+        sx = Math.round(sourceNode.bounds.x);
+        sy = scy;
+        tx = Math.round(targetNode.bounds.x + targetNode.bounds.width);
+        ty = tcy;
+      }
+    } else {
+      if (dy > 0) {
+        sx = scx;
+        sy = Math.round(sourceNode.bounds.y + sourceNode.bounds.height);
+        tx = tcx;
+        ty = Math.round(targetNode.bounds.y);
+      } else {
+        sx = scx;
+        sy = Math.round(sourceNode.bounds.y);
+        tx = tcx;
+        ty = Math.round(targetNode.bounds.y + targetNode.bounds.height);
+      }
+    }
+
+    if (bendPoints.length > 0) {
+      return `M ${sx} ${sy} ` + bendPoints.map((p) => `L ${Math.round(p.x)} ${Math.round(p.y)}`).join(' ') + ` L ${tx} ${ty}`;
+    }
+
+    if (routingMode === 'normal') {
+      return `M ${sx} ${sy} L ${tx} ${ty}`;
+    }
+
+    if (routingMode === 'smooth') {
+      const midX = Math.round((sx + tx) / 2);
+      const midY = Math.round((sy + ty) / 2);
+      return `M ${sx} ${sy} Q ${midX} ${sy} ${midX} ${midY} T ${tx} ${ty}`;
+    }
+
+    // Manhattan orthogonal default
+    if (Math.abs(dx) >= Math.abs(dy)) {
+      const midX = Math.round((sx + tx) / 2);
+      return `M ${sx} ${sy} L ${midX} ${sy} L ${midX} ${ty} L ${tx} ${ty}`;
+    } else {
+      const midY = Math.round((sy + ty) / 2);
+      return `M ${sx} ${sy} L ${sx} ${midY} L ${tx} ${midY} L ${tx} ${ty}`;
+    }
+  }
+
   // --------------------------------------------------------------------------
   // Private Helper Implementation
   // --------------------------------------------------------------------------
@@ -296,8 +407,8 @@ export class RaiBridge {
       const sourceNode = nodes.find((n) => n.id === sourceId);
       const targetNode = nodes.find((n) => n.id === targetId);
 
-      // Infer optimal orthogonal docking ports if not explicitly declared
-      if (sourceNode && targetNode) {
+      // Infer optimal orthogonal docking ports only if explicitly requested in options
+      if (options.inferPorts === true && sourceNode && targetNode) {
         const dx =
           targetNode.bounds.x +
           targetNode.bounds.width / 2 -
@@ -349,10 +460,7 @@ export class RaiBridge {
         el.getAttribute(AimSvgContract.ATTR_ROUTING) ??
         el.getAttribute('aim-routing') ??
         undefined;
-      const routing =
-        rawRouting === 'normal' || rawRouting === 'smooth' || rawRouting === 'manhattan'
-          ? (rawRouting as AimRoutingMode)
-          : undefined;
+      const routing = rawRouting ? this.normalizeRouting(rawRouting) : undefined;
 
       edges.push({
         id,
@@ -369,11 +477,18 @@ export class RaiBridge {
       });
     }
 
+    const rawDiagramRouting =
+      svgRoot.getAttribute(AimSvgContract.ATTR_ROUTING) ??
+      svgRoot.getAttribute('aim-routing') ??
+      undefined;
+    const diagramRouting = rawDiagramRouting ? this.normalizeRouting(rawDiagramRouting) : undefined;
+
     return {
       diagramId: svgRoot.getAttribute('id') ?? 'ImportedDiagram',
       archetype: svgRoot.getAttribute('aim-archetype') ?? 'AOAIMDiagram',
       nodes,
       edges,
+      ...(diagramRouting !== undefined ? { routing: diagramRouting } : {}),
     };
   }
 
@@ -397,7 +512,7 @@ export class RaiBridge {
     }
 
     // Check direct geometry attributes (rect, ellipse, circle)
-    const rect = el.querySelector('rect') ?? (el.tagName.toLowerCase() === 'rect' ? el : null);
+    const rect = el.querySelector?.('rect') ?? (el.tagName?.toLowerCase() === 'rect' ? el : null);
     if (rect) {
       if (!transform && rect.getAttribute('x')) x = parseFloat(rect.getAttribute('x')!);
       if (!transform && rect.getAttribute('y')) y = parseFloat(rect.getAttribute('y')!);
@@ -406,7 +521,7 @@ export class RaiBridge {
     }
 
     const ellipse =
-      el.querySelector('ellipse') ?? (el.tagName.toLowerCase() === 'ellipse' ? el : null);
+      el.querySelector?.('ellipse') ?? (el.tagName?.toLowerCase() === 'ellipse' ? el : null);
     if (ellipse) {
       const rx = parseFloat(ellipse.getAttribute('rx') ?? `${width / 2}`);
       const ry = parseFloat(ellipse.getAttribute('ry') ?? `${height / 2}`);
@@ -423,7 +538,7 @@ export class RaiBridge {
     return { x, y, width, height };
   }
 
-  private updateExistingSvg(
+  public updateExistingSvg(
     baseSvg: string,
     model: RaidMetamodel,
     _options: SerializationOptions,
@@ -435,65 +550,313 @@ export class RaiBridge {
     const parser = new DOMParser();
     const doc = parser.parseFromString(baseSvg, 'image/svg+xml');
 
-    // Update node positions and transforms
+    // Ensure defs and arrow markers exist for external vector viewers (Preview, Chrome, Safari)
+    let defs = doc.querySelector('defs');
+    if (!defs) {
+      defs = doc.createElementNS('http://www.w3.org/2000/svg', 'defs');
+      doc.documentElement.insertBefore(defs, doc.documentElement.firstChild);
+    }
+    if (!doc.querySelector('#arrow-classic')) {
+      const marker = doc.createElementNS('http://www.w3.org/2000/svg', 'marker');
+      marker.setAttribute('id', 'arrow-classic');
+      marker.setAttribute('viewBox', '0 0 10 10');
+      marker.setAttribute('refX', '10');
+      marker.setAttribute('refY', '5');
+      marker.setAttribute('markerWidth', '7');
+      marker.setAttribute('markerHeight', '7');
+      marker.setAttribute('orient', 'auto-start-reverse');
+      const path = doc.createElementNS('http://www.w3.org/2000/svg', 'path');
+      path.setAttribute('d', 'M 0 0 L 10 5 L 0 10 z');
+      path.setAttribute('fill', CascaisPalette.WarmGraphite);
+      marker.appendChild(path);
+      defs.appendChild(marker);
+    }
+    if (!doc.querySelector('#arrow-hollow')) {
+      const marker = doc.createElementNS('http://www.w3.org/2000/svg', 'marker');
+      marker.setAttribute('id', 'arrow-hollow');
+      marker.setAttribute('viewBox', '0 0 12 12');
+      marker.setAttribute('refX', '12');
+      marker.setAttribute('refY', '6');
+      marker.setAttribute('markerWidth', '9');
+      marker.setAttribute('markerHeight', '9');
+      marker.setAttribute('orient', 'auto-start-reverse');
+      const polygon = doc.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+      polygon.setAttribute('points', '0 0, 12 6, 0 12');
+      polygon.setAttribute('fill', CascaisPalette.ChalkWhite);
+      polygon.setAttribute('stroke', CascaisPalette.WarmGraphite);
+      polygon.setAttribute('stroke-width', '1.5');
+      marker.appendChild(polygon);
+      defs.appendChild(marker);
+    }
+
+    // Ensure AOAIM style rules are present
+    let style: Element | null = doc.querySelector('style');
+    if (!style) {
+      style = doc.createElementNS('http://www.w3.org/2000/svg', 'style');
+      defs.appendChild(style);
+    }
+    if (style && !style.textContent?.includes('.aim-act text')) {
+      style.textContent = (style.textContent ? style.textContent + '\n' : '') + `
+      .aim-node { cursor: pointer; transition: filter 0.15s ease; }
+      .aim-node:hover { filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); }
+      .aim-edge { fill: none; stroke: ${CascaisPalette.WarmGraphite}; stroke-width: 1.5; }
+      text { font-family: Inter, system-ui, sans-serif; }
+      .aim-act text, .aim-obj text { text-decoration: underline; }
+`;
+    }
+
+    // Update diagram-level routing mode on root <svg>
+    const diagramRouting = _options.routingMode ?? model.routing;
+    if (diagramRouting) {
+      doc.documentElement.setAttribute(AimSvgContract.ATTR_ROUTING, diagramRouting);
+    }
+
+    // Ensure layers exist
+    let nodesLayer = doc.querySelector('.aim-nodes-layer');
+    if (!nodesLayer) {
+      nodesLayer = doc.documentElement;
+    }
+
+    // Remove deleted nodes
+    const existingNodeEls = Array.from(doc.querySelectorAll(AimSvgContract.SELECTOR_NODE));
+    for (const nodeEl of existingNodeEls) {
+      const id = nodeEl.getAttribute(AimSvgContract.ATTR_ID) ?? nodeEl.getAttribute('id');
+      if (id && !model.nodes.some((n) => n.id === id)) {
+        nodeEl.remove();
+      }
+    }
+
+    // Update or insert nodes with canonical archetype shape markup
     for (const node of model.nodes) {
-      const el = doc.querySelector(`[${AimSvgContract.ATTR_ID}="${node.id}"], [id="${node.id}"]`);
-      if (el) {
-        el.setAttribute('transform', `translate(${node.bounds.x}, ${node.bounds.y})`);
-        el.setAttribute(AimSvgContract.ATTR_NODE, 'true');
-        el.setAttribute(AimSvgContract.ATTR_KIND, node.kind);
-
-        const rect = el.querySelector('rect');
-        if (rect) {
-          rect.setAttribute('width', `${node.bounds.width}`);
-          rect.setAttribute('height', `${node.bounds.height}`);
-        }
+      let el = doc.querySelector(`[${AimSvgContract.ATTR_ID}="${node.id}"], [id="${node.id}"]`);
+      if (!el) {
+        el = doc.createElementNS('http://www.w3.org/2000/svg', 'g');
+        nodesLayer.appendChild(el);
+      }
+
+      el.setAttribute('transform', `translate(${node.bounds.x}, ${node.bounds.y})`);
+      el.setAttribute(AimSvgContract.ATTR_NODE, 'true');
+      el.setAttribute(AimSvgContract.ATTR_ID, node.id);
+      el.setAttribute(AimSvgContract.ATTR_KIND, node.kind);
+      el.setAttribute(AimSvgContract.ATTR_DISPLAY_NAME, node.displayName);
+      if (node.stereotype) {
+        el.setAttribute(AimSvgContract.ATTR_STEREOTYPE, node.stereotype);
+      } else {
+        el.removeAttribute(AimSvgContract.ATTR_STEREOTYPE);
+      }
+
+      // Replace inner content with canonical archetype shape markup
+      const innerSvg = this.renderNodeInnerSvg(node);
+      const fragmentDoc = parser.parseFromString(
+        `<g xmlns="http://www.w3.org/2000/svg">${innerSvg}</g>`,
+        'image/svg+xml',
+      );
+
+      while (el.firstChild) {
+        el.removeChild(el.firstChild);
+      }
+
+      for (const child of Array.from(fragmentDoc.documentElement.childNodes)) {
+        el.appendChild(doc.importNode(child, true));
+      }
+    }
+
+    let edgesLayer = doc.querySelector('.aim-edges-layer');
+    if (!edgesLayer) {
+      edgesLayer = doc.documentElement;
+    }
+
+    // Remove deleted edges
+    const existingEdgeEls = Array.from(doc.querySelectorAll(AimSvgContract.SELECTOR_EDGE));
+    for (const edgeEl of existingEdgeEls) {
+      const id = edgeEl.getAttribute(AimSvgContract.ATTR_ID) ?? edgeEl.getAttribute('id');
+      if (id && !model.edges.some((e) => e.id === id)) {
+        edgeEl.remove();
       }
     }
 
-    // Update edge bend points and aim-bends attributes
+    // Update or insert edges with live path geometry
     for (const edge of model.edges) {
-      const el = doc.querySelector(`[${AimSvgContract.ATTR_ID}="${edge.id}"], [id="${edge.id}"]`);
-      if (el) {
-        const bendsString = this.formatBendPoints(edge.bendPoints);
-        el.setAttribute(AimSvgContract.ATTR_BENDS, bendsString);
-        el.setAttribute(AimSvgContract.ATTR_EDGE, 'true');
-        el.setAttribute(AimSvgContract.ATTR_EDGE_KIND, edge.kind);
-        if (edge.sourceId !== undefined) {
-          el.setAttribute(AimSvgContract.ATTR_SOURCE, edge.sourceId);
+      let el = doc.querySelector(`[${AimSvgContract.ATTR_ID}="${edge.id}"], [id="${edge.id}"]`);
+      if (!el) {
+        el = doc.createElementNS('http://www.w3.org/2000/svg', 'g');
+        if (nodesLayer && nodesLayer.parentNode === doc.documentElement) {
+          doc.documentElement.insertBefore(el, nodesLayer);
+        } else {
+          edgesLayer.appendChild(el);
         }
-        if (edge.targetId !== undefined) {
-          el.setAttribute(AimSvgContract.ATTR_TARGET, edge.targetId);
-        }
-        if (edge.sourcePort !== undefined) {
-          el.setAttribute(AimSvgContract.ATTR_SOURCE_PORT, edge.sourcePort);
-        }
-        if (edge.targetPort !== undefined) {
-          el.setAttribute(AimSvgContract.ATTR_TARGET_PORT, edge.targetPort);
-        }
-        if (edge.routing !== undefined) {
-          el.setAttribute(AimSvgContract.ATTR_ROUTING, edge.routing);
-        }
-        if (edge.stereotype !== undefined) {
-          el.setAttribute(AimSvgContract.ATTR_STEREOTYPE, edge.stereotype);
-        }
-        if (edge.sourceCardinality !== undefined) {
-          el.setAttribute('aim-source-cardinality', edge.sourceCardinality);
+      }
+
+      const bendsString = this.formatBendPoints(edge.bendPoints);
+      el.setAttribute(AimSvgContract.ATTR_BENDS, bendsString);
+      el.setAttribute(AimSvgContract.ATTR_EDGE, 'true');
+      el.setAttribute(AimSvgContract.ATTR_ID, edge.id);
+      el.setAttribute(AimSvgContract.ATTR_EDGE_KIND, edge.kind);
+      if (edge.sourceId !== undefined) {
+        el.setAttribute(AimSvgContract.ATTR_SOURCE, edge.sourceId);
+      }
+      if (edge.targetId !== undefined) {
+        el.setAttribute(AimSvgContract.ATTR_TARGET, edge.targetId);
+      }
+      if (edge.sourcePort !== undefined && edge.sourcePort !== '' && edge.sourcePort !== 'auto') {
+        el.setAttribute(AimSvgContract.ATTR_SOURCE_PORT, edge.sourcePort);
+      } else {
+        el.removeAttribute(AimSvgContract.ATTR_SOURCE_PORT);
+      }
+      if (edge.targetPort !== undefined && edge.targetPort !== '' && edge.targetPort !== 'auto') {
+        el.setAttribute(AimSvgContract.ATTR_TARGET_PORT, edge.targetPort);
+      } else {
+        el.removeAttribute(AimSvgContract.ATTR_TARGET_PORT);
+      }
+      if (edge.routing !== undefined) {
+        el.setAttribute(AimSvgContract.ATTR_ROUTING, edge.routing);
+      }
+      if (edge.stereotype !== undefined) {
+        el.setAttribute(AimSvgContract.ATTR_STEREOTYPE, edge.stereotype);
+      }
+      if (edge.sourceCardinality !== undefined) {
+        el.setAttribute('aim-source-cardinality', edge.sourceCardinality);
+      }
+      if (edge.targetCardinality !== undefined) {
+        el.setAttribute('aim-target-cardinality', edge.targetCardinality);
+      }
+
+      // Update or inject <path class="aim-edge"> with rendered path geometry
+      let pathD = edge.pathData;
+      if (!pathD) {
+        const sourceNode = model.nodes.find((n) => n.id === edge.sourceId);
+        const targetNode = model.nodes.find((n) => n.id === edge.targetId);
+        if (sourceNode && targetNode) {
+          pathD = this.computeFallbackEdgePath(sourceNode, targetNode, edge.bendPoints, edge.routing ?? model.routing);
         }
-        if (edge.targetCardinality !== undefined) {
-          el.setAttribute('aim-target-cardinality', edge.targetCardinality);
+      }
+
+      let pathEl = el.querySelector('path.aim-edge') ?? el.querySelector('path');
+      if (!pathEl) {
+        pathEl = doc.createElementNS('http://www.w3.org/2000/svg', 'path');
+        pathEl.setAttribute('class', 'aim-edge');
+        el.appendChild(pathEl);
+      }
+
+      if (pathD) {
+        pathEl.setAttribute('d', pathD);
+      }
+      pathEl.setAttribute('fill', 'none');
+      pathEl.setAttribute('stroke', CascaisPalette.WarmGraphite);
+      pathEl.setAttribute('stroke-width', '1.5');
+
+      if (edge.kind === 'dependency') {
+        pathEl.setAttribute('stroke-dasharray', '5,5');
+      } else {
+        pathEl.removeAttribute('stroke-dasharray');
+      }
+
+      const markerEnd = edge.kind === 'generalization' ? 'url(#arrow-hollow)' : 'url(#arrow-classic)';
+      pathEl.setAttribute('marker-end', markerEnd);
+
+      // Update or inject edge label
+      if (edge.label) {
+        let textEl = el.querySelector('text');
+        if (!textEl) {
+          textEl = doc.createElementNS('http://www.w3.org/2000/svg', 'text');
+          el.appendChild(textEl);
         }
+        const midPoint =
+          edge.bendPoints.length > 0
+            ? (edge.bendPoints[Math.floor(edge.bendPoints.length / 2)] ?? { x: 50, y: 50 })
+            : (() => {
+                const s = model.nodes.find((n) => n.id === edge.sourceId);
+                const t = model.nodes.find((n) => n.id === edge.targetId);
+                if (s && t) {
+                  return {
+                    x: Math.round((s.bounds.x + s.bounds.width / 2 + t.bounds.x + t.bounds.width / 2) / 2),
+                    y: Math.round((s.bounds.y + s.bounds.height / 2 + t.bounds.y + t.bounds.height / 2) / 2),
+                  };
+                }
+                return { x: 50, y: 50 };
+              })();
+        textEl.setAttribute('x', `${midPoint.x}`);
+        textEl.setAttribute('y', `${midPoint.y - 8}`);
+        textEl.setAttribute('font-size', '11');
+        textEl.setAttribute('fill', CascaisPalette.TextSecondary);
+        textEl.setAttribute('text-anchor', 'middle');
+        textEl.textContent = edge.label;
       }
     }
 
     return new XMLSerializer().serializeToString(doc);
   }
 
-  private generateFreshSvg(model: RaidMetamodel, options: SerializationOptions): string {
+  private renderSvgText(
+    text: string,
+    cx: number,
+    cy: number,
+    fontSize: number,
+    fontWeight: string,
+    fill: string,
+    underline: boolean = false,
+  ): string {
+    const wrapped = wrapAimText(text);
+    const lines = wrapped.split('\n');
+    const underlineAttr = underline ? ' text-decoration="underline"' : '';
+    const weightAttr = fontWeight !== 'normal' ? ` font-weight="${fontWeight}"` : '';
+
+    if (lines.length <= 1) {
+      return `      <text x="${cx}" y="${cy}" font-size="${fontSize}"${weightAttr} fill="${fill}" text-anchor="middle" dominant-baseline="central"${underlineAttr}>${lines[0] ?? ''}</text>\n`;
+    }
+
+    const lineHeight = fontSize * 1.25;
+    const startY = cy - ((lines.length - 1) * lineHeight) / 2;
+
+    let tspans = '';
+    lines.forEach((line, idx) => {
+      const y = Math.round(startY + idx * lineHeight);
+      tspans += `<tspan x="${cx}" y="${y}">${line}</tspan>`;
+    });
+
+    return `      <text font-size="${fontSize}"${weightAttr} fill="${fill}" text-anchor="middle" dominant-baseline="central"${underlineAttr}>${tspans}</text>\n`;
+  }
+
+  /**
+   * Generates the canonical inner SVG elements (shapes and styled text)
+   * for a given AOAIM node archetype.
+   */
+  public renderNodeInnerSvg(node: RaidNodeData): string {
+    let svg = '';
+    if (node.kind === 'uc') {
+      const rx = node.bounds.width / 2;
+      const ry = node.bounds.height / 2;
+      svg += `      <ellipse cx="${rx}" cy="${ry}" rx="${rx}" ry="${ry}" fill="${CascaisPalette.ChalkWhite}" stroke="${CascaisPalette.NetGold}" stroke-width="2" />\n`;
+      svg += this.renderSvgText(node.displayName, rx, ry, 13, 'bold', CascaisPalette.TextPrimary, false);
+    } else if (node.kind === 'act') {
+      svg += `      <rect width="${node.bounds.width}" height="${node.bounds.height}" rx="12" ry="12" fill="${CascaisPalette.CanvasCream}" stroke="${CascaisPalette.HeraldicGreen}" stroke-width="2" />\n`;
+      svg += this.renderSvgText(node.displayName, node.bounds.width / 2, node.bounds.height / 2, 13, '600', CascaisPalette.TextPrimary, true);
+    } else if (node.kind === 'obj') {
+      svg += `      <rect width="${node.bounds.width}" height="${node.bounds.height}" fill="${CascaisPalette.ChalkWhite}" stroke="${CascaisPalette.SilverLineDark}" stroke-width="1.5" />\n`;
+      svg += this.renderSvgText(node.displayName, node.bounds.width / 2, node.bounds.height / 2, 12, 'normal', CascaisPalette.TextPrimary, true);
+    } else if (node.kind === 'per') {
+      const isInitiating = node.stereotype?.toLowerCase().includes('initiates') ?? false;
+      const strokeColor = isInitiating ? CascaisPalette.NetGold : CascaisPalette.WarmGraphite;
+      const cx = Math.round(node.bounds.width / 2);
+      svg += `      <rect width="${node.bounds.width}" height="${node.bounds.height}" fill="none" stroke="none" />\n`;
+      svg += `      <path d="M 61 50 v -4 a 8 8 0 0 0 -8 -8 H 37 a 8 8 0 0 0 -8 8 v 4" fill="none" stroke="${strokeColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />\n`;
+      svg += `      <circle cx="45" cy="22" r="8" fill="${CascaisPalette.ChalkWhite}" stroke="${strokeColor}" stroke-width="2" />\n`;
+      svg += this.renderSvgText(node.displayName, cx, 68, 12, '500', CascaisPalette.TextPrimary, false);
+    } else {
+      svg += `      <rect width="${node.bounds.width}" height="${node.bounds.height}" fill="${CascaisPalette.ChalkWhite}" stroke="${CascaisPalette.WarmGraphite}" stroke-width="1.5" />\n`;
+      svg += this.renderSvgText(node.displayName, node.bounds.width / 2, node.bounds.height / 2, 12, 'normal', CascaisPalette.TextPrimary, false);
+    }
+    return svg;
+  }
+
+  public generateFreshSvg(model: RaidMetamodel, options: SerializationOptions): string {
     const width = Math.max(800, ...model.nodes.map((n) => n.bounds.x + n.bounds.width + 100));
     const height = Math.max(600, ...model.nodes.map((n) => n.bounds.y + n.bounds.height + 100));
 
-    let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" id="${model.diagramId}" aim-archetype="${model.archetype}">\n`;
+    const diagramRouting = options.routingMode ?? model.routing;
+    const routingAttr = diagramRouting ? ` ${AimSvgContract.ATTR_ROUTING}="${diagramRouting}"` : '';
+
+    let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" id="${model.diagramId}" aim-archetype="${model.archetype}"${routingAttr}>\n`;
 
     // Definitions & Markers
     svg += `  <defs>\n`;
@@ -509,6 +872,7 @@ export class RaiBridge {
       svg += `      .aim-node:hover { filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); }\n`;
       svg += `      .aim-edge { fill: none; stroke: ${CascaisPalette.WarmGraphite}; stroke-width: 1.5; }\n`;
       svg += `      text { font-family: Inter, system-ui, sans-serif; }\n`;
+      svg += `      .aim-act text, .aim-obj text { text-decoration: underline; }\n`;
       svg += `    </style>\n`;
     }
     svg += `  </defs>\n\n`;
@@ -522,22 +886,41 @@ export class RaiBridge {
       const markerEnd = edge.kind === 'generalization' ? ' marker-end="url(#arrow-hollow)"' : ' marker-end="url(#arrow-classic)"';
 
       // Path data construction
-      let pathD = '';
-      if (edge.bendPoints.length > 0) {
-        const first = edge.bendPoints[0]!;
-        pathD = `M ${first.x} ${first.y} ` + edge.bendPoints.slice(1).map((p) => `L ${p.x} ${p.y}`).join(' ');
+      let pathD = edge.pathData ?? '';
+      if (!pathD) {
+        const sourceNode = model.nodes.find((n) => n.id === edge.sourceId);
+        const targetNode = model.nodes.find((n) => n.id === edge.targetId);
+        if (sourceNode && targetNode) {
+          pathD = this.computeFallbackEdgePath(sourceNode, targetNode, edge.bendPoints, edge.routing ?? model.routing);
+        } else if (edge.bendPoints.length > 0) {
+          const first = edge.bendPoints[0]!;
+          pathD = `M ${first.x} ${first.y} ` + edge.bendPoints.slice(1).map((p) => `L ${p.x} ${p.y}`).join(' ');
+        }
       }
 
-      const sourcePortAttr = edge.sourcePort ? ` ${AimSvgContract.ATTR_SOURCE_PORT}="${edge.sourcePort}"` : '';
-      const targetPortAttr = edge.targetPort ? ` ${AimSvgContract.ATTR_TARGET_PORT}="${edge.targetPort}"` : '';
+      const sourcePortAttr = edge.sourcePort && edge.sourcePort !== 'auto' ? ` ${AimSvgContract.ATTR_SOURCE_PORT}="${edge.sourcePort}"` : '';
+      const targetPortAttr = edge.targetPort && edge.targetPort !== 'auto' ? ` ${AimSvgContract.ATTR_TARGET_PORT}="${edge.targetPort}"` : '';
       const routingAttr = edge.routing ? ` ${AimSvgContract.ATTR_ROUTING}="${edge.routing}"` : '';
 
       svg += `    <g ${AimSvgContract.ATTR_EDGE}="true" ${AimSvgContract.ATTR_ID}="${edge.id}" ${AimSvgContract.ATTR_EDGE_KIND}="${edge.kind}" ${AimSvgContract.ATTR_SOURCE}="${edge.sourceId}" ${AimSvgContract.ATTR_TARGET}="${edge.targetId}"${sourcePortAttr}${targetPortAttr}${routingAttr} ${AimSvgContract.ATTR_BENDS}="${bendsFormatted}">\n`;
       if (pathD) {
-        svg += `      <path d="${pathD}" class="aim-edge"${strokeDash}${markerEnd} />\n`;
+        svg += `      <path d="${pathD}" class="aim-edge" fill="none" stroke="${CascaisPalette.WarmGraphite}" stroke-width="1.5"${strokeDash}${markerEnd} />\n`;
       }
       if (edge.label) {
-        const midPoint = edge.bendPoints[Math.floor(edge.bendPoints.length / 2)] ?? { x: 50, y: 50 };
+        const midPoint =
+          edge.bendPoints.length > 0
+            ? (edge.bendPoints[Math.floor(edge.bendPoints.length / 2)] ?? { x: 50, y: 50 })
+            : (() => {
+                const s = model.nodes.find((n) => n.id === edge.sourceId);
+                const t = model.nodes.find((n) => n.id === edge.targetId);
+                if (s && t) {
+                  return {
+                    x: Math.round((s.bounds.x + s.bounds.width / 2 + t.bounds.x + t.bounds.width / 2) / 2),
+                    y: Math.round((s.bounds.y + s.bounds.height / 2 + t.bounds.y + t.bounds.height / 2) / 2),
+                  };
+                }
+                return { x: 50, y: 50 };
+              })();
         svg += `      <text x="${midPoint.x}" y="${midPoint.y - 8}" font-size="11" fill="${CascaisPalette.TextSecondary}" text-anchor="middle">${edge.label}</text>\n`;
       }
       svg += `    </g>\n`;
@@ -548,21 +931,9 @@ export class RaiBridge {
     svg += `  <!-- Nodes -->\n`;
     svg += `  <g class="aim-nodes-layer">\n`;
     for (const node of model.nodes) {
-      svg += `    <g ${AimSvgContract.ATTR_NODE}="true" ${AimSvgContract.ATTR_ID}="${node.id}" ${AimSvgContract.ATTR_KIND}="${node.kind}" ${AimSvgContract.ATTR_DISPLAY_NAME}="${node.displayName}" transform="translate(${node.bounds.x}, ${node.bounds.y})">\n`;
-
-      if (node.kind === 'uc') {
-        const rx = node.bounds.width / 2;
-        const ry = node.bounds.height / 2;
-        svg += `      <ellipse cx="${rx}" cy="${ry}" rx="${rx}" ry="${ry}" fill="${CascaisPalette.ChalkWhite}" stroke="${CascaisPalette.NetGold}" stroke-width="2" />\n`;
-        svg += `      <text x="${rx}" y="${ry}" font-size="13" font-weight="bold" fill="${CascaisPalette.TextPrimary}" text-anchor="middle" dominant-baseline="central">${node.displayName}</text>\n`;
-      } else if (node.kind === 'act') {
-        svg += `      <rect width="${node.bounds.width}" height="${node.bounds.height}" rx="12" ry="12" fill="${CascaisPalette.CanvasCream}" stroke="${CascaisPalette.HeraldicGreen}" stroke-width="2" />\n`;
-        svg += `      <text x="${node.bounds.width / 2}" y="${node.bounds.height / 2}" font-size="13" font-weight="600" fill="${CascaisPalette.TextPrimary}" text-anchor="middle" dominant-baseline="central">${node.displayName}</text>\n`;
-      } else {
-        svg += `      <rect width="${node.bounds.width}" height="${node.bounds.height}" fill="${CascaisPalette.ChalkWhite}" stroke="${CascaisPalette.WarmGraphite}" stroke-width="1.5" />\n`;
-        svg += `      <text x="${node.bounds.width / 2}" y="${node.bounds.height / 2}" font-size="12" fill="${CascaisPalette.TextPrimary}" text-anchor="middle" dominant-baseline="central">${node.displayName}</text>\n`;
-      }
-
+      const stereotypeAttr = node.stereotype ? ` ${AimSvgContract.ATTR_STEREOTYPE}="${node.stereotype}"` : '';
+      svg += `    <g ${AimSvgContract.ATTR_NODE}="true" ${AimSvgContract.ATTR_ID}="${node.id}" ${AimSvgContract.ATTR_KIND}="${node.kind}" ${AimSvgContract.ATTR_DISPLAY_NAME}="${node.displayName}"${stereotypeAttr} transform="translate(${node.bounds.x}, ${node.bounds.y})">\n`;
+      svg += this.renderNodeInnerSvg(node);
       svg += `    </g>\n`;
     }
     svg += `  </g>\n`;
@@ -571,6 +942,14 @@ export class RaiBridge {
     return svg;
   }
 
+  public normalizeRouting(raw: string): AimRoutingMode {
+    const lower = raw.toLowerCase().trim();
+    if (lower === 'orthogonal' || lower === 'manhattan') return 'manhattan';
+    if (lower === 'straight' || lower === 'normal') return 'normal';
+    if (lower === 'curved' || lower === 'smooth') return 'smooth';
+    return 'manhattan';
+  }
+
   private normalizeKind(kind: string): AimOntologyKind {
     const lower = kind.toLowerCase();
     if (lower === 'uc' || lower === 'usecase') return 'uc';