@dr2rai/raid-canvas 0.3.0 → 0.3.1

package/dist/types.d.ts

@@ -105,6 +105,8 @@ export interface RaidEdgeData {
     readonly routing?: AimRoutingMode;
     /** User-editable or router-computed Manhattan bend points. */
     readonly bendPoints: readonly SvgBendPoint[];
+    /** Precomputed or live SVG path data ('M ... L ...') for standalone vector rendering. */
+    readonly pathData?: string;
 }
 /**
  * Full in-memory metamodel representation corresponding to a `.raid` manifest.
@@ -120,6 +122,8 @@ export interface RaidMetamodel {
     readonly nodes: readonly RaidNodeData[];
     /** Relationships connecting projected nodes. */
     readonly edges: readonly RaidEdgeData[];
+    /** Diagram-level edge routing mode ('manhattan', 'normal', 'smooth'). */
+    readonly routing?: AimRoutingMode;
     /** Additional diagram-level metadata. */
     readonly metadata?: Readonly<Record<string, unknown>>;
 }
@@ -152,6 +156,12 @@ export interface HydrationOptions {
     readonly clearGraph?: boolean;
     /** If true, automatically executes Manhattan routing if bend points are missing. Default: true. */
     readonly autoRouteEdges?: boolean;
+    /**
+     * If true, infers docking ports (e.g. port-right, port-left) based on node geometry when ports
+     * are omitted in the SVG. When false (default), edges bind directly to node cells without ports,
+     * enabling dynamic Manhattan center-aiming routing. Default: false.
+     */
+    readonly inferPorts?: boolean;
     /** Default fallback dimensions when width/height are unspecified in SVG. */
     readonly defaultNodeSize?: {
         readonly width: number;
@@ -168,5 +178,7 @@ export interface SerializationOptions {
     readonly format?: boolean;
     /** Inject Cascais design token CSS variables into `<defs><style>`. Default: true. */
     readonly embedStyles?: boolean;
+    /** Optional diagram-level routing mode to serialize onto root `<svg>` tag. */
+    readonly routingMode?: AimRoutingMode;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/dist/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AA+JH;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,4BAA4B;IAC5B,SAAS,EAAE,UAAU;IACrB,OAAO,EAAE,QAAQ;IACjB,SAAS,EAAE,UAAU;IACrB,iBAAiB,EAAE,kBAAkB;IACrC,eAAe,EAAE,gBAAgB;IACjC,cAAc,EAAE,eAAe;IAE/B,4BAA4B;IAC5B,SAAS,EAAE,UAAU;IACrB,cAAc,EAAE,eAAe;IAC/B,WAAW,EAAE,YAAY;IACzB,WAAW,EAAE,YAAY;IACzB,gBAAgB,EAAE,iBAAiB;IACnC,gBAAgB,EAAE,iBAAiB;IACnC,YAAY,EAAE,aAAa;IAC3B,UAAU,EAAE,WAAW;IAEvB,4BAA4B;IAC5B,aAAa,EAAE,sCAAsC;IACrD,aAAa,EAAE,iCAAiC;CACxC,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAqKH;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,4BAA4B;IAC5B,SAAS,EAAE,UAAU;IACrB,OAAO,EAAE,QAAQ;IACjB,SAAS,EAAE,UAAU;IACrB,iBAAiB,EAAE,kBAAkB;IACrC,eAAe,EAAE,gBAAgB;IACjC,cAAc,EAAE,eAAe;IAE/B,4BAA4B;IAC5B,SAAS,EAAE,UAAU;IACrB,cAAc,EAAE,eAAe;IAC/B,WAAW,EAAE,YAAY;IACzB,WAAW,EAAE,YAAY;IACzB,gBAAgB,EAAE,iBAAiB;IACnC,gBAAgB,EAAE,iBAAiB;IACnC,YAAY,EAAE,aAAa;IAC3B,UAAU,EAAE,WAAW;IAEvB,4BAA4B;IAC5B,aAAa,EAAE,sCAAsC;IACrD,aAAa,EAAE,iCAAiC;CACxC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dr2rai/raid-canvas",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Interactive AntV X6 diagram canvas for AOAIM (.raid) models and ontological SVG contracts",
   "type": "module",
   "main": "./dist/index.js",

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,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}"]`);
@@ -465,11 +625,15 @@ export class RaiBridge {
         if (edge.targetId !== undefined) {
           el.setAttribute(AimSvgContract.ATTR_TARGET, edge.targetId);
         }
-        if (edge.sourcePort !== undefined) {
+        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) {
+        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);
@@ -483,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`;
@@ -509,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`;
@@ -522,22 +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(' ');
+        }
       }
 
-      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`;
@@ -554,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`;
@@ -571,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';