@dr2rai/raid-canvas 0.3.0 → 0.3.2

package/dist/RaiBridge.d.ts

@@ -10,7 +10,7 @@
  *   the X6 graph, serializing them back into the SVG document while preserving semantic fidelity.
  */
 import { Graph } from '@antv/x6';
-import { type RaidMetamodel, type SvgBendPoint, type HydrationOptions, type SerializationOptions } from './types.js';
+import { type AimRoutingMode, type RaidNodeData, type RaidMetamodel, type SvgBendPoint, type HydrationOptions, type SerializationOptions } from './types.js';
 export declare class RaiBridge {
     /**
      * Hydrates an AntV X6 graph from an SVG source string or DOM Element.
@@ -42,11 +42,23 @@ export declare class RaiBridge {
      * Formats bend points into the canonical aim-bends format: "x1,y1; x2,y2"
      */
     formatBendPoints(points: readonly SvgBendPoint[]): string;
+    /**
+     * Computes a clean fallback SVG path connecting source and target nodes
+     * when running in headless environments (e.g. CLI, tests) without an active DOM.
+     */
+    computeFallbackEdgePath(sourceNode: RaidNodeData, targetNode: RaidNodeData, bendPoints?: readonly SvgBendPoint[], routingMode?: AimRoutingMode): string;
     private resolveSvgElement;
     private extractMetamodel;
     private extractBounds;
-    private updateExistingSvg;
-    private generateFreshSvg;
+    updateExistingSvg(baseSvg: string, model: RaidMetamodel, _options: SerializationOptions): string;
+    private renderSvgText;
+    /**
+     * Generates the canonical inner SVG elements (shapes and styled text)
+     * for a given AOAIM node archetype.
+     */
+    renderNodeInnerSvg(node: RaidNodeData): string;
+    generateFreshSvg(model: RaidMetamodel, options: SerializationOptions): string;
+    normalizeRouting(raw: string): AimRoutingMode;
     private normalizeKind;
     private normalizeEdgeKind;
     private kindFromShape;

package/dist/RaiBridge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RaiBridge.d.ts","sourceRoot":"","sources":["../src/RaiBridge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAOL,KAAK,aAAa,EAClB,KAAK,YAAY,EAEjB,KAAK,gBAAgB,EACrB,KAAK,oBAAoB,EAC1B,MAAM,YAAY,CAAC;AAGpB,qBAAa,SAAS;IACpB;;;;;;;OAOG;IACI,cAAc,CACnB,SAAS,EAAE,MAAM,GAAG,OAAO,EAC3B,KAAK,EAAE,KAAK,EACZ,OAAO,GAAE,gBAAqB,GAC7B,aAAa,CAuBf;IAED;;;;;;;OAOG;IACI,cAAc,CACnB,KAAK,EAAE,KAAK,EACZ,OAAO,CAAC,EAAE,MAAM,EAChB,OAAO,GAAE,oBAAyB,GACjC,MAAM,CAQR;IAED;;OAEG;IACI,kBAAkB,CAAC,KAAK,EAAE,KAAK,GAAG,aAAa,CAyFrD;IAED;;OAEG;IACI,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,YAAY,EAAE,CAevD;IAED;;OAEG;IACI,gBAAgB,CAAC,MAAM,EAAE,SAAS,YAAY,EAAE,GAAG,MAAM,CAE/D;IAMD,OAAO,CAAC,iBAAiB;IAkBzB,OAAO,CAAC,gBAAgB;IAoJxB,OAAO,CAAC,aAAa;IA8CrB,OAAO,CAAC,iBAAiB;IAkEzB,OAAO,CAAC,gBAAgB;IAkFxB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,aAAa;CAQtB"}
+{"version":3,"file":"RaiBridge.d.ts","sourceRoot":"","sources":["../src/RaiBridge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,YAAY,EAEjB,KAAK,aAAa,EAClB,KAAK,YAAY,EAEjB,KAAK,gBAAgB,EACrB,KAAK,oBAAoB,EAC1B,MAAM,YAAY,CAAC;AASpB,qBAAa,SAAS;IACpB;;;;;;;OAOG;IACI,cAAc,CACnB,SAAS,EAAE,MAAM,GAAG,OAAO,EAC3B,KAAK,EAAE,KAAK,EACZ,OAAO,GAAE,gBAAqB,GAC7B,aAAa,CAuBf;IAED;;;;;;;OAOG;IACI,cAAc,CACnB,KAAK,EAAE,KAAK,EACZ,OAAO,CAAC,EAAE,MAAM,EAChB,OAAO,GAAE,oBAAyB,GACjC,MAAM,CAQR;IAED;;OAEG;IACI,kBAAkB,CAAC,KAAK,EAAE,KAAK,GAAG,aAAa,CAyHrD;IAED;;OAEG;IACI,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,YAAY,EAAE,CAevD;IAED;;OAEG;IACI,gBAAgB,CAAC,MAAM,EAAE,SAAS,YAAY,EAAE,GAAG,MAAM,CAE/D;IAED;;;OAGG;IACI,uBAAuB,CAC5B,UAAU,EAAE,YAAY,EACxB,UAAU,EAAE,YAAY,EACxB,UAAU,GAAE,SAAS,YAAY,EAAO,EACxC,WAAW,GAAE,cAA4B,GACxC,MAAM,CA8DR;IAMD,OAAO,CAAC,iBAAiB;IAkBzB,OAAO,CAAC,gBAAgB;IAwJxB,OAAO,CAAC,aAAa;IA8Cd,iBAAiB,CACtB,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,oBAAoB,GAC7B,MAAM,CAmPR;IAED,OAAO,CAAC,aAAa;IA8BrB;;;OAGG;IACI,kBAAkB,CAAC,IAAI,EAAE,YAAY,GAAG,MAAM,CA0BpD;IAEM,gBAAgB,CAAC,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,oBAAoB,GAAG,MAAM,CA2FnF;IAEM,gBAAgB,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,CAMnD;IAED,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,aAAa;CAQtB"}

package/dist/RaiBridge.js

@@ -10,7 +10,7 @@
  *   the X6 graph, serializing them back into the SVG document while preserving semantic fidelity.
  */
 import { AimSvgContract, } from './types.js';
-import { createAimNode, createAimEdge, configureAimGraph, CascaisPalette } from './X6Shapes.js';
+import { createAimNode, createAimEdge, configureAimGraph, CascaisPalette, wrapAimText, } from './X6Shapes.js';
 export class RaiBridge {
     /**
      * Hydrates an AntV X6 graph from an SVG source string or DOM Element.
@@ -116,6 +116,26 @@ export class RaiBridge {
                     routing = 'manhattan';
                 }
             }
+            // Extract live rendered SVG path data from X6 EdgeView if available
+            let pathData = customData.pathData;
+            if (!pathData) {
+                const edgeView = typeof graph.findViewByCell === 'function'
+                    ? graph.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 = {
                 id: edge.id,
                 kind: customData.kind ?? 'association',
@@ -129,14 +149,17 @@ 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._aimRoutingMode;
         return {
             diagramId: 'RaidDiagram',
             archetype: 'InteractiveCanvas',
             nodes,
             edges,
+            ...(diagramRouting !== undefined ? { routing: diagramRouting } : {}),
         };
     }
     /**
@@ -163,6 +186,70 @@ export class RaiBridge {
     formatBendPoints(points) {
         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.
+     */
+    computeFallbackEdgePath(sourceNode, targetNode, bendPoints = [], routingMode = 'manhattan') {
+        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
     // --------------------------------------------------------------------------
@@ -227,8 +314,8 @@ export class RaiBridge {
             let targetPort = el.getAttribute(AimSvgContract.ATTR_TARGET_PORT) ?? undefined;
             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 -
                     (sourceNode.bounds.x + sourceNode.bounds.width / 2);
@@ -271,9 +358,7 @@ export class RaiBridge {
             const rawRouting = el.getAttribute(AimSvgContract.ATTR_ROUTING) ??
                 el.getAttribute('aim-routing') ??
                 undefined;
-            const routing = rawRouting === 'normal' || rawRouting === 'smooth' || rawRouting === 'manhattan'
-                ? rawRouting
-                : undefined;
+            const routing = rawRouting ? this.normalizeRouting(rawRouting) : undefined;
             edges.push({
                 id,
                 kind,
@@ -288,11 +373,16 @@ export class RaiBridge {
                 bendPoints: effectiveBendPoints,
             });
         }
+        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 } : {}),
         };
     }
     extractBounds(el, defaultSize = { width: 140, height: 60 }) {
@@ -310,7 +400,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'));
@@ -321,7 +411,7 @@ export class RaiBridge {
             if (rect.getAttribute('height'))
                 height = parseFloat(rect.getAttribute('height'));
         }
-        const ellipse = el.querySelector('ellipse') ?? (el.tagName.toLowerCase() === 'ellipse' ? el : null);
+        const ellipse = 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}`);
@@ -342,60 +432,281 @@ 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 = 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);
-                }
-                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);
+            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);
                 }
-                if (edge.stereotype !== undefined) {
-                    el.setAttribute(AimSvgContract.ATTR_STEREOTYPE, edge.stereotype);
+                else {
+                    edgesLayer.appendChild(el);
                 }
-                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);
     }
+    renderSvgText(text, cx, cy, fontSize, fontWeight, fill, underline = false) {
+        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.
+     */
+    renderNodeInnerSvg(node) {
+        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;
+    }
     generateFreshSvg(model, options) {
         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`;
         svg += `    <marker id="arrow-classic" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">\n`;
@@ -410,6 +721,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`;
@@ -421,20 +733,39 @@ export class RaiBridge {
             const strokeDash = edge.kind === 'dependency' ? ' stroke-dasharray="5,5"' : '';
             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`;
@@ -444,27 +775,25 @@ 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`;
         svg += `</svg>\n`;
         return svg;
     }
+    normalizeRouting(raw) {
+        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';
+    }
     normalizeKind(kind) {
         const lower = kind.toLowerCase();
         if (lower === 'uc' || lower === 'usecase')