@dr2rai/raid-canvas 0.2.0 → 0.3.1

package/src/RaiBridge.ts

@@ -15,6 +15,7 @@ import {
   AimSvgContract,
   type AimOntologyKind,
   type AimEdgeKind,
+  type AimRoutingMode,
   type RaidNodeData,
   type RaidEdgeData,
   type RaidMetamodel,
@@ -23,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 {
   /**
@@ -138,6 +145,49 @@ export class RaiBridge {
       const targetPort = edge.getTargetPortId();
       const label = (edge.getLabels()?.[0]?.attrs?.['text']?.['text'] as string | undefined) ?? customData.label;
 
+      let routing: AimRoutingMode | undefined = customData.routing;
+      if (!routing) {
+        const router = edge.getRouter();
+        const routerName = typeof router === 'string' ? router : router?.name;
+        const connector = edge.getConnector();
+        const connectorName = typeof connector === 'string' ? connector : connector?.name;
+        if (connectorName === 'smooth') {
+          routing = 'smooth';
+        } else if (routerName === 'normal') {
+          routing = 'normal';
+        } else if (routerName === 'manhattan') {
+          routing = 'manhattan';
+        }
+      }
+
+      // 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',
@@ -145,21 +195,26 @@ export class RaiBridge {
         targetId: target.id,
         ...(sourcePort !== undefined ? { sourcePort } : {}),
         ...(targetPort !== undefined ? { targetPort } : {}),
+        ...(routing !== undefined ? { routing } : {}),
         ...(label !== undefined ? { label } : {}),
         ...(customData.stereotype !== undefined ? { stereotype: customData.stereotype } : {}),
         ...(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 } : {}),
     };
   }
 
@@ -190,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
   // --------------------------------------------------------------------------
@@ -279,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 -
@@ -328,6 +456,11 @@ export class RaiBridge {
         el.getAttribute('aim-source-cardinality') ?? undefined;
       const targetCardinality =
         el.getAttribute('aim-target-cardinality') ?? undefined;
+      const rawRouting =
+        el.getAttribute(AimSvgContract.ATTR_ROUTING) ??
+        el.getAttribute('aim-routing') ??
+        undefined;
+      const routing = rawRouting ? this.normalizeRouting(rawRouting) : undefined;
 
       edges.push({
         id,
@@ -336,6 +469,7 @@ export class RaiBridge {
         targetId,
         ...(sourcePort !== undefined ? { sourcePort } : {}),
         ...(targetPort !== undefined ? { targetPort } : {}),
+        ...(routing !== undefined ? { routing } : {}),
         ...(label !== undefined ? { label } : {}),
         ...(sourceCardinality !== undefined ? { sourceCardinality } : {}),
         ...(targetCardinality !== undefined ? { targetCardinality } : {}),
@@ -343,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 } : {}),
     };
   }
 
@@ -371,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')!);
@@ -380,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}`);
@@ -397,7 +538,7 @@ export class RaiBridge {
     return { x, y, width, height };
   }
 
-  private updateExistingSvg(
+  public updateExistingSvg(
     baseSvg: string,
     model: RaidMetamodel,
     _options: SerializationOptions,
@@ -409,6 +550,51 @@ export class RaiBridge {
     const parser = new DOMParser();
     const doc = parser.parseFromString(baseSvg, 'image/svg+xml');
 
+    // 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);
+    }
+
+    // Update diagram-level routing mode on root <svg>
+    const diagramRouting = _options.routingMode ?? model.routing;
+    if (diagramRouting) {
+      doc.documentElement.setAttribute(AimSvgContract.ATTR_ROUTING, diagramRouting);
+    }
+
     // Update node positions and transforms
     for (const node of model.nodes) {
       const el = doc.querySelector(`[${AimSvgContract.ATTR_ID}="${node.id}"], [id="${node.id}"]`);
@@ -433,7 +619,25 @@ export class RaiBridge {
         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);
+        }
+        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);
         }
@@ -443,17 +647,83 @@ export class RaiBridge {
         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);
+          }
+        }
+
+        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);
       }
     }
 
     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`;
+  }
+
+  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`;
@@ -469,6 +739,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`;
@@ -482,18 +753,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(' ');
+        }
       }
 
-      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}" ${AimSvgContract.ATTR_BENDS}="${bendsFormatted}">\n`;
+      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`;
@@ -510,13 +804,24 @@ export class RaiBridge {
         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`;
+        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 += `      <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`;
+        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 += `      <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`;
+        svg += this.renderSvgText(node.displayName, node.bounds.width / 2, node.bounds.height / 2, 12, 'normal', CascaisPalette.TextPrimary, false);
       }
 
       svg += `    </g>\n`;
@@ -527,6 +832,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';