@xpressai/xircuits-viewer 0.1.0

package/dist/render/colors.js

@@ -0,0 +1,78 @@
+// Color utilities for title bar gradients.
+// Replicates the Xircuits oklch gradient logic from CustomNodeWidget.tsx.
+// Outputs oklch() CSS — requires a modern browser or renderer for full fidelity.
+function parseColor(color) {
+    const named = {
+        red: '#ff0000', blue: '#0000ff', green: '#008000', yellow: '#ffff00',
+        orange: '#ffa500', purple: '#800080', pink: '#ffc0cb', lightpink: '#ffb6c1',
+        cyan: '#00ffff', white: '#ffffff', black: '#000000', gray: '#808080',
+        grey: '#808080', salmon: '#fa8072', coral: '#ff7f50', teal: '#008080',
+        navy: '#000080', maroon: '#800000', lime: '#00ff00', magenta: '#ff00ff',
+        darkred: '#8b0000', darkblue: '#00008b', darkgreen: '#006400',
+        goldenrod: '#daa520', tomato: '#ff6347', orchid: '#da70d6',
+    };
+    const lower = color.toLowerCase().trim();
+    if (named[lower])
+        color = named[lower];
+    const hexMatch = color.match(/^#([0-9a-f]{3,8})$/i);
+    if (hexMatch) {
+        let hex = hexMatch[1];
+        if (hex.length === 3)
+            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+        return {
+            r: parseInt(hex.slice(0, 2), 16) / 255,
+            g: parseInt(hex.slice(2, 4), 16) / 255,
+            b: parseInt(hex.slice(4, 6), 16) / 255,
+        };
+    }
+    const rgbMatch = color.match(/rgb\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/);
+    if (rgbMatch) {
+        return {
+            r: parseInt(rgbMatch[1]) / 255,
+            g: parseInt(rgbMatch[2]) / 255,
+            b: parseInt(rgbMatch[3]) / 255,
+        };
+    }
+    return { r: 0.5, g: 0.5, b: 0.5 };
+}
+function srgbToLinear(c) {
+    return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
+function toOklab(r, g, b) {
+    const l_ = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
+    const m_ = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
+    const s_ = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
+    const l = Math.cbrt(l_), m = Math.cbrt(m_), s = Math.cbrt(s_);
+    return {
+        L: 0.2104542553 * l + 0.7936177850 * m - 0.0040720468 * s,
+        a: 1.9779984951 * l - 2.4285922050 * m + 0.4505937099 * s,
+        b: 0.0259040371 * l + 0.7827717662 * m - 0.8086757660 * s,
+    };
+}
+function rgbToOklch(color) {
+    const { r, g, b } = parseColor(color);
+    const lab = toOklab(srgbToLinear(r), srgbToLinear(g), srgbToLinear(b));
+    const c = Math.sqrt(lab.a * lab.a + lab.b * lab.b);
+    let h = Math.atan2(lab.b, lab.a) * (180 / Math.PI);
+    if (h < 0)
+        h += 360;
+    return { l: lab.L, c, h };
+}
+/**
+ * Replicate the Xircuits title gradient from CustomNodeWidget.tsx:
+ *   const color = new Color(p.background);
+ *   color.alpha = 0.75; color.oklch.c *= 1.2;
+ *   const color1 = color.to('oklch').toString()
+ *   color.oklch.c *= 1.2; color.oklch.l /= 2;
+ *   const color2 = color.to('oklch').toString()
+ */
+export function titleGradient(baseColor) {
+    const oklch = rgbToOklch(baseColor);
+    const c1_c = oklch.c * 1.2;
+    const c1 = `oklch(${(oklch.l * 100).toFixed(1)}% ${c1_c.toFixed(4)} ${oklch.h.toFixed(1)} / 0.75)`;
+    const c2_c = c1_c * 1.2;
+    const c2_l = oklch.l / 2;
+    const c2 = `oklch(${(c2_l * 100).toFixed(1)}% ${c2_c.toFixed(4)} ${oklch.h.toFixed(1)} / 0.75)`;
+    return { color1: c1, color2: c2 };
+}
+//# sourceMappingURL=colors.js.map

package/dist/render/colors.js.map

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

package/dist/render/renderDefs.d.ts

@@ -0,0 +1,4 @@
+import type { XNode } from '../types.js';
+export declare function renderDefs(nodes: XNode[], theme: 'dark' | 'light'): string;
+export declare function colorToGradientId(color: string): string;
+//# sourceMappingURL=renderDefs.d.ts.map

package/dist/render/renderDefs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderDefs.d.ts","sourceRoot":"","sources":["../../src/render/renderDefs.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGzC,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CA8C1E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEvD"}

package/dist/render/renderDefs.js

@@ -0,0 +1,128 @@
+import { el } from '../svg/builder.js';
+import { titleGradient } from './colors.js';
+export function renderDefs(nodes, theme) {
+    const gradients = [];
+    const seenColors = new Set();
+    for (const node of nodes) {
+        if (node.kind === 'comment')
+            continue;
+        const color = node.color;
+        if (seenColors.has(color))
+            continue;
+        seenColors.add(color);
+        const { color1, color2 } = titleGradient(color);
+        const gradId = colorToGradientId(color);
+        gradients.push(el('linearGradient', { id: gradId, x1: '0', y1: '0', x2: '0', y2: '1' }, el('stop', { offset: '0%', 'stop-color': color1 }), el('stop', { offset: '100%', 'stop-color': color2 })));
+    }
+    const style = renderStyleBlock(theme);
+    const flowInSymbol = el('symbol', { id: 'xg-flow-in', viewBox: '0 0 24 24' }, el('path', { stroke: 'none', d: 'M0 0h24v24H0z', fill: 'none' }), el('path', { d: 'M3 12h12' }), el('path', { d: 'M11 8l4 4l-4 4' }), el('path', { d: 'M12 21a9 9 0 0 0 0 -18' }));
+    const flowOutSymbol = el('symbol', { id: 'xg-flow-out', viewBox: '0 0 24 24' }, el('path', { stroke: 'none', d: 'M0 0h24v24H0z', fill: 'none' }), el('path', { d: 'M9 12h12' }), el('path', { d: 'M17 16l4 -4l-4 -4' }), el('path', { d: 'M12 3a9 9 0 1 0 0 18' }));
+    // Node icon symbols (from style/icons/*.svg in the Xircuits repo)
+    const nodeIcons = renderNodeIconSymbols();
+    return el('defs', {}, style, ...gradients, flowInSymbol, flowOutSymbol, nodeIcons);
+}
+export function colorToGradientId(color) {
+    return 'xg-grad-' + color.replace(/[^a-zA-Z0-9]/g, '_');
+}
+function renderNodeIconSymbols() {
+    const s = el;
+    // Each symbol extracted from style/icons/*.svg in the Xircuits repo
+    // All use viewBox="0 0 24 24", stroke="currentColor" (inherited)
+    const icons = [];
+    // start-finish-component.svg (filled direction sign diamond)
+    icons.push(s('symbol', { id: 'xg-icon-start-finish', viewBox: '0 0 24 24', fill: 'currentColor' }, s('path', { stroke: 'none', d: 'M0 0h24v24H0z', fill: 'none' }), s('path', { d: 'M10.52 2.614a2.095 2.095 0 0 1 2.835 -.117l.126 .117l7.905 7.905c.777 .777 .816 2.013 .117 2.836l-.117 .126l-7.905 7.905a2.094 2.094 0 0 1 -2.836 .117l-.126 -.117l-7.907 -7.906a2.096 2.096 0 0 1 -.115 -2.835l.117 -.126l7.905 -7.905zm5.969 9.535l.01 -.116l-.003 -.12l-.016 -.114l-.03 -.11l-.044 -.112l-.052 -.098l-.076 -.105l-.07 -.081l-3.5 -3.5l-.095 -.083a1 1 0 0 0 -1.226 0l-.094 .083l-.083 .094a1 1 0 0 0 0 1.226l.083 .094l1.792 1.793h-5.085l-.117 .007a1 1 0 0 0 0 1.986l.117 .007h5.085l-1.792 1.793l-.083 .094a1 1 0 0 0 1.403 1.403l.094 -.083l3.5 -3.5l.097 -.112l.05 -.074l.037 -.067l.05 -.112l.023 -.076l.025 -.117z' })));
+    // component-library.svg (3D cube outline)
+    icons.push(s('symbol', { id: 'xg-icon-component', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': 2, 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }, s('path', { stroke: 'none', d: 'M0 0h24v24H0z', fill: 'none' }), s('path', { d: 'M21 16.008v-8.018a1.98 1.98 0 0 0 -1 -1.717l-7 -4.008a2.016 2.016 0 0 0 -2 0l-7 4.008c-.619 .355 -1 1.01 -1 1.718v8.018c0 .709 .381 1.363 1 1.717l7 4.008a2.016 2.016 0 0 0 2 0l7 -4.008c.619 -.355 1 -1.01 1 -1.718z' }), s('path', { d: 'M12 22v-10' }), s('path', { d: 'M12 12l8.73 -5.04' }), s('path', { d: 'M3.27 6.96l8.73 5.04' })));
+    // workflow-component.svg (chart dots)
+    icons.push(s('symbol', { id: 'xg-icon-workflow', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': 2, 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }, s('path', { stroke: 'none', d: 'M0 0h24v24H0z', fill: 'none' }), s('path', { d: 'M5 7m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0' }), s('path', { d: 'M16 15m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0' }), s('path', { d: 'M18 6m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0' }), s('path', { d: 'M6 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0' }), s('path', { d: 'M9 17l5 -1.5' }), s('path', { d: 'M6.5 8.5l7.81 5.37' }), s('path', { d: 'M7 7l8 -1' })));
+    // branch-component.svg (arrows split)
+    icons.push(s('symbol', { id: 'xg-icon-branch', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': 2, 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }, s('path', { stroke: 'none', d: 'M0 0h24v24H0z', fill: 'none' }), s('path', { d: 'M21 17h-8l-3.5 -5h-6.5' }), s('path', { d: 'M21 7h-8l-3.495 5' }), s('path', { d: 'M18 10l3 -3l-3 -3' }), s('path', { d: 'M18 20l3 -3l-3 -3' })));
+    // function-component.svg (math function)
+    icons.push(s('symbol', { id: 'xg-icon-function', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': 2.5, 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }, s('path', { stroke: 'none', d: 'M0 0h24v24H0z', fill: 'none' }), s('path', { d: 'M3 19a2 2 0 0 0 2 2c2 0 2 -4 3 -9s1 -9 3 -9a2 2 0 0 1 2 2' }), s('path', { d: 'M5 12h6' }), s('path', { d: 'M15 12l6 6' }), s('path', { d: 'M15 18l6 -6' })));
+    // set-variable-component.svg (world upload)
+    icons.push(s('symbol', { id: 'xg-icon-context_set', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': 2, 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }, s('path', { stroke: 'none', d: 'M0 0h24v24H0z', fill: 'none' }), s('path', { d: 'M21 12a9 9 0 1 0 -9 9' }), s('path', { d: 'M3.6 9h16.8' }), s('path', { d: 'M3.6 15h8.4' }), s('path', { d: 'M11.578 3a17 17 0 0 0 0 18' }), s('path', { d: 'M12.5 3c1.719 2.755 2.5 5.876 2.5 9' }), s('path', { d: 'M18 21v-7m3 3l-3 -3l-3 3' })));
+    // get-variable-component.svg (world download)
+    icons.push(s('symbol', { id: 'xg-icon-context_get', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': 2, 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }, s('path', { stroke: 'none', d: 'M0 0h24v24H0z', fill: 'none' }), s('path', { d: 'M21 12a9 9 0 1 0 -9 9' }), s('path', { d: 'M3.6 9h16.8' }), s('path', { d: 'M3.6 15h8.4' }), s('path', { d: 'M11.578 3a17 17 0 0 0 0 18' }), s('path', { d: 'M12.5 3c1.719 2.755 2.5 5.876 2.5 9' }), s('path', { d: 'M18 14v7m-3 -3l3 3l3 -3' })));
+    // variable-component.svg (variable x)
+    icons.push(s('symbol', { id: 'xg-icon-variable', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': 2, 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }, s('path', { stroke: 'none', d: 'M0 0h24v24H0z', fill: 'none' }), s('path', { d: 'M5 4c-2.5 5 -2.5 10 0 16m14 -16c2.5 5 2.5 10 0 16m-10 -11h1c1 0 1 1 2.016 3.527c.984 2.473 .984 3.473 1.984 3.473h1' }), s('path', { d: 'M8 16c1.5 0 3 -2 4 -3.5s2.5 -3.5 4 -3.5' })));
+    return icons.join('');
+}
+function renderStyleBlock(theme) {
+    const isDark = theme === 'dark';
+    const css = `
+.xg-root {
+  font-family: sans-serif;
+  font-size: 11px;
+}
+.xg-node__border {
+  fill: none;
+  stroke: ${isDark ? 'black' : 'oklch(0.8 0 0)'};
+  stroke-width: 1;
+}
+.xg-node__title-text {
+  fill: white;
+  font-weight: 500;
+  letter-spacing: 0.025rem;
+}
+.xg-node__body {
+  fill: ${isDark
+        ? 'oklch(10% 0 0 / 0.85)'
+        : 'oklch(99% 0 0 / 0.85)'};
+  stroke: none;
+}
+.xg-port__dot {
+  fill: oklch(50% 0 0 / 0.2);
+  stroke: oklch(0 0 0 / 0.2);
+  stroke-width: 1;
+}
+.xg-port__dot--connected {
+  fill: oklch(100% 0 0 / 0.5);
+}
+.xg-port__label {
+  fill: ${isDark ? 'white' : 'black'};
+}
+.xg-port__symbol {
+  font-weight: bold;
+  font-family: Helvetica, Arial, sans-serif;
+}
+.xg-port__symbol--connected { fill: black; }
+.xg-port__symbol--disconnected { fill: grey; }
+.xg-port--flow use {
+  stroke-width: 3;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  fill: none;
+}
+.xg-port--flow--connected use { stroke: oklch(0% 0 0 / 0.8); }
+.xg-port--flow--disconnected use { stroke: oklch(100% 0 0 / 0.8); }
+.xg-edge--flow {
+  stroke: rgb(0, 192, 255);
+  stroke-width: 3;
+  fill: none;
+  stroke-dasharray: 10 2;
+  animation: xg-flow 1s steps(24) infinite;
+  filter: drop-shadow(2px 2px 4px rgb(0 0 0 / 40%)) opacity(60%);
+}
+.xg-edge--data {
+  stroke: gray;
+  stroke-width: 3;
+  fill: none;
+  filter: drop-shadow(2px 2px 4px rgb(0 0 0 / 40%)) opacity(60%);
+}
+.xg-comment__bg {
+  fill: ${isDark ? 'rgba(0, 0, 0, 0.3)' : 'oklch(0.98 0.13 108.65)'};
+  stroke: ${isDark ? 'black' : '#ccc'};
+  stroke-width: 2;
+  rx: 5;
+}
+.xg-comment__text {
+  fill: ${isDark ? 'white' : 'black'};
+}
+@keyframes xg-flow {
+  from { stroke-dashoffset: 24; }
+  to { stroke-dashoffset: 0; }
+}
+`;
+    return el('style', {}, css);
+}
+//# sourceMappingURL=renderDefs.js.map

package/dist/render/renderDefs.js.map

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

package/dist/render/renderEdge.d.ts

@@ -0,0 +1,3 @@
+import type { XEdge, XNode, NodeMetrics, RenderOptions } from '../types.js';
+export declare function renderEdge(edge: XEdge, nodesById: Map<string, XNode>, metricsMap: Map<string, NodeMetrics>, options?: RenderOptions): string;
+//# sourceMappingURL=renderEdge.d.ts.map

package/dist/render/renderEdge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderEdge.d.ts","sourceRoot":"","sources":["../../src/render/renderEdge.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAI5E,wBAAgB,UAAU,CACxB,IAAI,EAAE,KAAK,EACX,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,EAC7B,UAAU,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,EACpC,OAAO,CAAC,EAAE,aAAa,GACtB,MAAM,CAaR"}

package/dist/render/renderEdge.js

@@ -0,0 +1,13 @@
+import { g, el } from '../svg/builder.js';
+import { bezierPath } from '../svg/bezier.js';
+export function renderEdge(edge, nodesById, metricsMap, options) {
+    if (!edge.points || edge.points.length < 2)
+        return '';
+    const p0 = edge.points[0];
+    const p1 = edge.points[edge.points.length - 1];
+    const d = bezierPath(p0.x, p0.y, p1.x, p1.y, 50);
+    const extraClass = options?.edgeClassFn?.(edge) || '';
+    const cls = edge.kind === 'flow' ? 'xg-edge xg-edge--flow' : 'xg-edge xg-edge--data';
+    return g({ class: `xg-edge-group ${extraClass}`.trim(), 'data-edge-id': edge.id }, el('path', { class: cls, d }));
+}
+//# sourceMappingURL=renderEdge.js.map

package/dist/render/renderEdge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderEdge.js","sourceRoot":"","sources":["../../src/render/renderEdge.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,MAAM,UAAU,UAAU,CACxB,IAAW,EACX,SAA6B,EAC7B,UAAoC,EACpC,OAAuB;IAEvB,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;QAAE,OAAO,EAAE,CAAC;IAEtD,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IAC1B,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAC/C,MAAM,CAAC,GAAG,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACjD,MAAM,UAAU,GAAG,OAAO,EAAE,WAAW,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IACtD,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,uBAAuB,CAAC;IAErF,OAAO,CAAC,CACN,EAAE,KAAK,EAAE,iBAAiB,UAAU,EAAE,CAAC,IAAI,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,EAAE,EAAE,EACxE,EAAE,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC9B,CAAC;AACJ,CAAC"}

package/dist/render/renderGraph.d.ts

@@ -0,0 +1,5 @@
+import type { XGraph, RenderOptions } from '../types.js';
+export declare function renderToString(graph: XGraph, options?: RenderOptions): string;
+export declare function renderToElement(graph: XGraph, options?: RenderOptions): SVGSVGElement;
+export declare function renderXircuits(json: unknown, options?: RenderOptions): string;
+//# sourceMappingURL=renderGraph.d.ts.map

package/dist/render/renderGraph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderGraph.d.ts","sourceRoot":"","sources":["../../src/render/renderGraph.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,aAAa,EAAe,MAAM,aAAa,CAAC;AAStE,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CAuCjF;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB,GAAG,aAAa,CAKzF;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CAGjF"}

package/dist/render/renderGraph.js

@@ -0,0 +1,40 @@
+import { svgRoot, g } from '../svg/builder.js';
+import { computeNodeMetrics } from '../layout/metrics.js';
+import { computeViewBox } from '../layout/viewBox.js';
+import { renderDefs } from './renderDefs.js';
+import { renderNode } from './renderNode.js';
+import { renderEdge } from './renderEdge.js';
+import { parse } from '../parser/parse.js';
+export function renderToString(graph, options = {}) {
+    const { theme = 'dark', padding = 40, fitView = true, className, width, height, } = options;
+    const metricsMap = new Map();
+    for (const node of graph.nodes) {
+        metricsMap.set(node.id, computeNodeMetrics(node));
+    }
+    const viewBox = fitView
+        ? computeViewBox(graph.nodes, metricsMap, padding)
+        : { x: -graph.viewport.x, y: -graph.viewport.y, width: width || 800, height: height || 600 };
+    const nodesById = new Map(graph.nodes.map(n => [n.id, n]));
+    const defs = renderDefs(graph.nodes, theme);
+    const edgeElements = graph.edges.map(edge => renderEdge(edge, nodesById, metricsMap, options));
+    const nodeElements = graph.nodes.map(node => renderNode(node, metricsMap.get(node.id), options));
+    const rootClass = ['xg-root', className].filter(Boolean).join(' ');
+    return svgRoot({
+        viewBox: `${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`,
+        class: rootClass,
+        'data-theme': theme,
+        ...(width ? { width } : {}),
+        ...(height ? { height } : {}),
+    }, defs, g({ class: 'xg-edges' }, ...edgeElements), g({ class: 'xg-nodes' }, ...nodeElements));
+}
+export function renderToElement(graph, options = {}) {
+    const svgString = renderToString(graph, options);
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(svgString, 'image/svg+xml');
+    return doc.documentElement;
+}
+export function renderXircuits(json, options = {}) {
+    const graph = parse(json);
+    return renderToString(graph, options);
+}
+//# sourceMappingURL=renderGraph.js.map

package/dist/render/renderGraph.js.map

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

package/dist/render/renderNode.d.ts

@@ -0,0 +1,3 @@
+import type { XNode, NodeMetrics, RenderOptions } from '../types.js';
+export declare function renderNode(node: XNode, metrics: NodeMetrics, options?: RenderOptions): string;
+//# sourceMappingURL=renderNode.d.ts.map

package/dist/render/renderNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderNode.d.ts","sourceRoot":"","sources":["../../src/render/renderNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAMrE,wBAAgB,UAAU,CACxB,IAAI,EAAE,KAAK,EACX,OAAO,EAAE,WAAW,EACpB,OAAO,CAAC,EAAE,aAAa,GACtB,MAAM,CAQR"}

package/dist/render/renderNode.js

@@ -0,0 +1,81 @@
+import { g, rect, text, el, escapeXml } from '../svg/builder.js';
+import { colorToGradientId } from './renderDefs.js';
+import { renderPort } from './renderPort.js';
+import { FONT_SIZE, TITLE_HEIGHT, TITLE_PADDING_X, TITLE_ICON_SIZE, COMMENT_PADDING } from '../layout/metrics.js';
+export function renderNode(node, metrics, options) {
+    const extraClass = options?.nodeClassFn?.(node) || '';
+    if (node.kind === 'comment') {
+        return renderCommentNode(node, metrics, extraClass);
+    }
+    return renderStandardNode(node, metrics, extraClass);
+}
+function renderStandardNode(node, metrics, extraClass) {
+    const gradientId = colorToGradientId(node.color);
+    const { width, height } = metrics;
+    const bodyHeight = height - TITLE_HEIGHT;
+    const elements = [];
+    // Border
+    elements.push(rect({ x: 0, y: 0, width, height, rx: 5, ry: 5, class: 'xg-node__border' }));
+    // Title gradient
+    elements.push(rect({ x: 0, y: 0, width, height: TITLE_HEIGHT, rx: 5, ry: 5, fill: `url(#${gradientId})` }));
+    if (bodyHeight > 0) {
+        elements.push(rect({ x: 0, y: TITLE_HEIGHT - 5, width, height: 5, fill: `url(#${gradientId})` }));
+    }
+    // Icon
+    elements.push(renderNodeIcon(node.kind, TITLE_PADDING_X, (TITLE_HEIGHT - TITLE_ICON_SIZE) / 2));
+    // Name
+    elements.push(text({ x: TITLE_PADDING_X + TITLE_ICON_SIZE + TITLE_PADDING_X, y: TITLE_HEIGHT - 8, 'font-size': FONT_SIZE, class: 'xg-node__title-text' }, node.name.length > 40 ? node.name.slice(0, 39) + '…' : node.name));
+    // Body
+    if (bodyHeight > 0) {
+        elements.push(rect({ x: 0, y: TITLE_HEIGHT, width, height: bodyHeight, rx: 5, ry: 5, class: 'xg-node__body' }));
+        elements.push(rect({ x: 0, y: TITLE_HEIGHT, width, height: Math.min(5, bodyHeight), class: 'xg-node__body' }));
+    }
+    // Ports
+    node.portsIn.forEach((port, i) => elements.push(renderPort(port, width, i, TITLE_HEIGHT)));
+    node.portsOut.forEach((port, i) => elements.push(renderPort(port, width, i, TITLE_HEIGHT)));
+    return g({ class: `xg-node xg-node--${node.kind} ${extraClass}`.trim(), transform: `translate(${node.x}, ${node.y})`, 'data-node-id': node.id }, ...elements);
+}
+function renderCommentNode(node, metrics, extraClass) {
+    const { width, height } = metrics;
+    const commentText = node.extras.commentInput || '';
+    const elements = [];
+    elements.push(rect({ x: 0, y: 0, width, height, rx: 5, ry: 5, class: 'xg-comment__bg' }));
+    elements.push(text({ x: COMMENT_PADDING, y: COMMENT_PADDING + 12, 'font-size': 12, 'font-weight': 'bold', class: 'xg-comment__text' }, 'Comment:'));
+    const lines = commentText.split('\n');
+    const tspans = lines.map((line, i) => el('tspan', { x: COMMENT_PADDING, dy: i === 0 ? 18 : 18 }, escapeXml(line))).join('');
+    elements.push(el('text', { x: COMMENT_PADDING, y: COMMENT_PADDING + 14, 'font-size': 12, class: 'xg-comment__text' }, tspans));
+    return g({ class: `xg-node xg-node--comment ${extraClass}`.trim(), transform: `translate(${node.x}, ${node.y})`, 'data-node-id': node.id }, ...elements);
+}
+// Map node kind → symbol ID (matching getNodeIcon in CustomNodeWidget.tsx)
+function getIconSymbolId(kind, extrasType) {
+    switch (kind) {
+        case 'start':
+        case 'finish':
+            return 'xg-icon-start-finish';
+        case 'workflow':
+            return 'xg-icon-workflow';
+        case 'branch':
+            return 'xg-icon-branch';
+        case 'function':
+            return 'xg-icon-function';
+        case 'context_set':
+            return 'xg-icon-context_set';
+        case 'context_get':
+            return 'xg-icon-context_get';
+        case 'variable':
+            return 'xg-icon-variable';
+        default:
+            return 'xg-icon-component';
+    }
+}
+function renderNodeIcon(kind, x, y) {
+    const symbolId = getIconSymbolId(kind);
+    return el('use', {
+        href: `#${symbolId}`,
+        x, y,
+        width: TITLE_ICON_SIZE,
+        height: TITLE_ICON_SIZE,
+        color: 'white',
+    });
+}
+//# sourceMappingURL=renderNode.js.map

package/dist/render/renderNode.js.map

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

package/dist/render/renderPort.d.ts

@@ -0,0 +1,3 @@
+import type { XPort } from '../types.js';
+export declare function renderPort(port: XPort, nodeWidth: number, rowIndex: number, titleHeight: number): string;
+//# sourceMappingURL=renderPort.d.ts.map

package/dist/render/renderPort.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderPort.d.ts","sourceRoot":"","sources":["../../src/render/renderPort.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAOzC,wBAAgB,UAAU,CACxB,IAAI,EAAE,KAAK,EACX,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,GAClB,MAAM,CAkBR"}

package/dist/render/renderPort.js

@@ -0,0 +1,57 @@
+import { g, text, el } from '../svg/builder.js';
+import { getPortSymbol } from './symbols.js';
+import { PORT_ROW_HEIGHT, PORT_DOT_SIZE, FONT_SIZE, PORT_LABEL_PADDING } from '../layout/metrics.js';
+const SYMBOL_FONT_SIZE = 9;
+export function renderPort(port, nodeWidth, rowIndex, titleHeight) {
+    const isOut = port.direction === 'out';
+    const y = titleHeight + rowIndex * PORT_ROW_HEIGHT;
+    const isConnected = port.linkIds.length > 0;
+    const isFlow = port.kind === 'flow';
+    const dotY = y + (PORT_ROW_HEIGHT - PORT_DOT_SIZE) / 2;
+    if (isOut) {
+        const dotX = nodeWidth - PORT_DOT_SIZE;
+        const dot = renderDot(port, dotX, dotY, isOut, isConnected, isFlow);
+        const label = isFlow ? '' : renderLabel(port.label, dotX - PORT_LABEL_PADDING, y, 'end');
+        return g({ class: `xg-port xg-port--out xg-port--${isFlow ? 'flow' : 'param'}`, 'data-port-id': port.id }, dot, label);
+    }
+    else {
+        const dotX = 0;
+        const dot = renderDot(port, dotX, dotY, isOut, isConnected, isFlow);
+        const label = isFlow ? '' : renderLabel(port.label, PORT_DOT_SIZE + PORT_LABEL_PADDING, y, 'start');
+        return g({ class: `xg-port xg-port--in xg-port--${isFlow ? 'flow' : 'param'}`, 'data-port-id': port.id }, dot, label);
+    }
+}
+function renderDot(port, x, y, isOut, isConnected, isFlow) {
+    const elements = [];
+    const w = PORT_DOT_SIZE;
+    const h = PORT_DOT_SIZE;
+    const r = 8;
+    // Half-rounded rect: out-ports rounded on left, in-ports rounded on right
+    let d;
+    if (isOut) {
+        d = `M${x + r},${y} L${x + w},${y} L${x + w},${y + h} L${x + r},${y + h} A${r},${r} 0 0,1 ${x},${y + h - r} L${x},${y + r} A${r},${r} 0 0,1 ${x + r},${y}Z`;
+    }
+    else {
+        d = `M${x},${y} L${x + w - r},${y} A${r},${r} 0 0,1 ${x + w},${y + r} L${x + w},${y + h - r} A${r},${r} 0 0,1 ${x + w - r},${y + h} L${x},${y + h}Z`;
+    }
+    const connClass = isConnected ? ' xg-port__dot--connected' : '';
+    elements.push(el('path', { d, class: `xg-port__dot${connClass}` }));
+    if (isFlow) {
+        const iconRef = isOut ? '#xg-flow-out' : '#xg-flow-in';
+        const flowClass = isConnected ? 'xg-port--flow--connected' : 'xg-port--flow--disconnected';
+        elements.push(el('g', { class: flowClass }, el('use', { href: iconRef, x: x + 1.5, y: y + 1.5, width: 12, height: 12 })));
+    }
+    else {
+        const symbol = getPortSymbol(port.dataType);
+        if (symbol) {
+            const symClass = isConnected ? 'xg-port__symbol xg-port__symbol--connected' : 'xg-port__symbol xg-port__symbol--disconnected';
+            elements.push(text({ x: x + w / 2, y: y + h - 3, 'text-anchor': 'middle', 'font-size': SYMBOL_FONT_SIZE, class: symClass }, symbol));
+        }
+    }
+    return elements.join('');
+}
+function renderLabel(label, x, y, anchor) {
+    const displayLabel = label.length > 40 ? label.slice(0, 37) + '...' : label;
+    return text({ x, y: y + PORT_ROW_HEIGHT / 2 + FONT_SIZE / 2 - 1, 'text-anchor': anchor, 'font-size': FONT_SIZE, class: 'xg-port__label' }, displayLabel);
+}
+//# sourceMappingURL=renderPort.js.map

package/dist/render/renderPort.js.map

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

package/dist/render/symbols.d.ts

@@ -0,0 +1,6 @@
+export declare const SYMBOL_MAP: Record<string, string | null>;
+export declare const UNKNOWN_SYMBOL = "\u25CE";
+export declare function getPortSymbol(dataType: string | null): string | null;
+export declare const FLOW_IN_ICON: string;
+export declare const FLOW_OUT_ICON: string;
+//# sourceMappingURL=symbols.d.ts.map

package/dist/render/symbols.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"symbols.d.ts","sourceRoot":"","sources":["../../src/render/symbols.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAiBpD,CAAC;AAEF,eAAO,MAAM,cAAc,WAAM,CAAC;AAElC,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAKpE;AAGD,eAAO,MAAM,YAAY,QAOf,CAAC;AAEX,eAAO,MAAM,aAAa,QAOhB,CAAC"}

package/dist/render/symbols.js

@@ -0,0 +1,45 @@
+export const SYMBOL_MAP = {
+    'string': '" "',
+    'int': ' 1',
+    'float': '1.0',
+    'boolean': '⊤⊥',
+    'time.time': '𝘵',
+    'list': '[ ]',
+    'tuple': '( )',
+    'dict': '{ }',
+    'dynalist': '«[]»',
+    'dynatuple': '«()»',
+    'union': ' U',
+    'secret': '🗝️',
+    'chat': '🗨',
+    'any': '[_]',
+    '0': null,
+    'flow': null,
+};
+export const UNKNOWN_SYMBOL = '◎';
+export function getPortSymbol(dataType) {
+    if (!dataType)
+        return null;
+    const lower = dataType.toLowerCase();
+    if (lower in SYMBOL_MAP)
+        return SYMBOL_MAP[lower];
+    return UNKNOWN_SYMBOL;
+}
+// Flow port SVG icons (from CustomPortLabel.tsx)
+export const FLOW_IN_ICON = [
+    '<svg viewBox="0 0 24 24" width="12" height="12">',
+    '<path stroke="none" d="M0 0h24v24H0z" fill="none"/>',
+    '<path d="M3 12h12"/>',
+    '<path d="M11 8l4 4l-4 4"/>',
+    '<path d="M12 21a9 9 0 0 0 0 -18"/>',
+    '</svg>',
+].join('');
+export const FLOW_OUT_ICON = [
+    '<svg viewBox="0 0 24 24" width="12" height="12">',
+    '<path stroke="none" d="M0 0h24v24H0z" fill="none"/>',
+    '<path d="M9 12h12"/>',
+    '<path d="M17 16l4 -4l-4 -4"/>',
+    '<path d="M12 3a9 9 0 1 0 0 18"/>',
+    '</svg>',
+].join('');
+//# sourceMappingURL=symbols.js.map

package/dist/render/symbols.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"symbols.js","sourceRoot":"","sources":["../../src/render/symbols.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAkC;IACvD,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,IAAI;IACX,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,IAAI;IACjB,MAAM,EAAE,KAAK;IACb,OAAO,EAAE,KAAK;IACd,MAAM,EAAE,KAAK;IACb,UAAU,EAAE,MAAM;IAClB,WAAW,EAAE,MAAM;IACnB,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,KAAK;IACf,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,KAAK;IACZ,GAAG,EAAE,IAAI;IACT,MAAM,EAAE,IAAI;CACb,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAC;AAElC,MAAM,UAAU,aAAa,CAAC,QAAuB;IACnD,IAAI,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAC;IAC3B,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;IACrC,IAAI,KAAK,IAAI,UAAU;QAAE,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;IAClD,OAAO,cAAc,CAAC;AACxB,CAAC;AAED,iDAAiD;AACjD,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,kDAAkD;IAClD,qDAAqD;IACrD,sBAAsB;IACtB,4BAA4B;IAC5B,oCAAoC;IACpC,QAAQ;CACT,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEX,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,kDAAkD;IAClD,qDAAqD;IACrD,sBAAsB;IACtB,+BAA+B;IAC/B,kCAAkC;IAClC,QAAQ;CACT,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC"}

package/dist/svg/bezier.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Generate a cubic bezier path between two points.
+ * Matches react-diagrams' DefaultLinkModel.getSVGPath() behavior:
+ * control points offset horizontally by `curvyness` (default 50).
+ */
+export declare function bezierPath(x1: number, y1: number, x2: number, y2: number, curvyness?: number): string;
+//# sourceMappingURL=bezier.d.ts.map

package/dist/svg/bezier.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bezier.d.ts","sourceRoot":"","sources":["../../src/svg/bezier.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,UAAU,CACxB,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,SAAS,GAAE,MAAW,GACrB,MAAM,CAER"}

package/dist/svg/bezier.js

@@ -0,0 +1,9 @@
+/**
+ * Generate a cubic bezier path between two points.
+ * Matches react-diagrams' DefaultLinkModel.getSVGPath() behavior:
+ * control points offset horizontally by `curvyness` (default 50).
+ */
+export function bezierPath(x1, y1, x2, y2, curvyness = 50) {
+    return `M${x1},${y1} C${x1 + curvyness},${y1} ${x2 - curvyness},${y2} ${x2},${y2}`;
+}
+//# sourceMappingURL=bezier.js.map

package/dist/svg/bezier.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bezier.js","sourceRoot":"","sources":["../../src/svg/bezier.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,UAAU,UAAU,CACxB,EAAU,EACV,EAAU,EACV,EAAU,EACV,EAAU,EACV,YAAoB,EAAE;IAEtB,OAAO,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,SAAS,IAAI,EAAE,IAAI,EAAE,GAAG,SAAS,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC;AACrF,CAAC"}

package/dist/svg/builder.d.ts

@@ -0,0 +1,11 @@
+type Attrs = Record<string, string | number | boolean | undefined>;
+export declare function escapeXml(s: string): string;
+export declare function el(tag: string, attrs: Attrs, ...children: string[]): string;
+export declare function g(attrs: Attrs, ...children: string[]): string;
+export declare function rect(attrs: Attrs): string;
+export declare function text(attrs: Attrs, content: string): string;
+export declare function path(attrs: Attrs): string;
+export declare function line(attrs: Attrs): string;
+export declare function svgRoot(attrs: Attrs, ...children: string[]): string;
+export {};
+//# sourceMappingURL=builder.d.ts.map