@synergenius/flow-weaver 0.33.1 → 0.33.2

package/dist/diagram/renderer.js

@@ -1,8 +1,19 @@
-import { getTheme, getPortColor, getPortRingColor, TYPE_ABBREVIATIONS, NODE_ICON_PATHS, NODE_DEFAULT_COLOR } from './theme.js';
-import { PORT_RADIUS, BORDER_RADIUS, LABEL_HEIGHT, LABEL_GAP, SCOPE_PORT_COLUMN, measureText } from './geometry.js';
+import { getTheme, getPortColor, TYPE_ABBREVIATIONS, NODE_ICON_PATHS, NODE_DEFAULT_COLOR, NODE_VARIANT_COLORS } from './theme.js';
+import { PORT_RADIUS, BORDER_RADIUS, LABEL_GAP, SCOPE_PORT_COLUMN, measureText } from './geometry.js';
 function escapeXml(str) {
     return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 }
+/** Resolve icon color from a node's resolved border hex back to the variant icon color */
+function resolveIconColor(nodeColor, themeName, theme) {
+    if (nodeColor === NODE_DEFAULT_COLOR)
+        return theme.nodeIconColor;
+    for (const v of Object.values(NODE_VARIANT_COLORS)) {
+        if (v.darkBorder === nodeColor || v.border === nodeColor) {
+            return themeName === 'dark' ? v.darkIcon : v.icon;
+        }
+    }
+    return nodeColor; // custom hex — use as-is
+}
 /** Collect all connections (main + scope) for gradient def generation */
 function collectAllConnections(graph) {
     const all = [...graph.connections];
@@ -32,22 +43,22 @@ export function renderSVG(graph, options = {}) {
     parts.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="${vbX} ${vbY} ${vbWidth} ${vbHeight}" width="${svgWidth}" height="${svgHeight}">`);
     // Styles
     parts.push(`<style>`);
-    parts.push(`  text { font-family: Montserrat, 'Segoe UI', Roboto, sans-serif; }`);
-    parts.push(`  .node-label { font-size: 13px; font-weight: 700; fill: ${theme.labelColor}; }`);
+    parts.push(`  text { font-family: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }`);
+    parts.push(`  .node-label { font-size: 18px; font-weight: 600; fill: ${theme.labelColor}; }`);
     parts.push(`  .port-label { font-size: 10px; font-weight: 600; fill: ${theme.labelColor}; }`);
     parts.push(`  .port-type-label { font-size: 10px; font-weight: 600; }`);
     parts.push(`</style>`);
     // Defs (dot grid pattern + node shadow filter + connection gradients)
     parts.push(`<defs>`);
     parts.push(`  <pattern id="dot-grid" width="20" height="20" patternUnits="userSpaceOnUse">`);
-    parts.push(`    <circle cx="10" cy="10" r="1.5" fill="${theme.dotColor}" opacity="${theme.dotOpacity}"/>`);
+    parts.push(`    <circle cx="10" cy="10" r="0.75" fill="${theme.dotColor}" opacity="${theme.dotOpacity}"/>`);
     parts.push(`  </pattern>`);
-    parts.push(`  <filter id="node-shadow" x="-10%" y="-10%" width="130%" height="140%">`);
-    parts.push(`    <feDropShadow dx="0" dy="2" stdDeviation="4" flood-opacity="${theme.nodeShadowOpacity}" flood-color="#000"/>`);
-    parts.push(`  </filter>`);
+    // No drop shadow — matches platform (nodes use outline glow, not shadow)
     for (let i = 0; i < allConnections.length; i++) {
         const conn = allConnections[i];
-        parts.push(`  <linearGradient id="conn-grad-${i}" x1="0%" y1="0%" x2="100%" y2="0%">`);
+        // Use userSpaceOnUse so gradients work on flat horizontal paths
+        // (objectBoundingBox fails when bounding box height is zero)
+        parts.push(`  <linearGradient id="conn-grad-${i}" gradientUnits="userSpaceOnUse" x1="${vbX}" y1="0" x2="${vbX + vbWidth}" y2="0">`);
         parts.push(`    <stop offset="0%" stop-color="${conn.sourceColor}"/>`);
         parts.push(`    <stop offset="100%" stop-color="${conn.targetColor}"/>`);
         parts.push(`  </linearGradient>`);
@@ -56,12 +67,11 @@ export function renderSVG(graph, options = {}) {
     // Background
     parts.push(`<rect x="${vbX}" y="${vbY}" width="${vbWidth}" height="${vbHeight}" fill="${theme.background}"/>`);
     parts.push(`<rect x="${vbX}" y="${vbY}" width="${vbWidth}" height="${vbHeight}" fill="url(#dot-grid)"/>`);
-    // Connections + stubs (same layer, below nodes and labels)
+    // Connections + stubs (below nodes and labels)
     parts.push(`<g class="connections">`);
     for (let i = 0; i < graph.connections.length; i++) {
         renderConnection(parts, graph.connections[i], i, !graph.connections[i].path);
     }
-    // Stubs sit alongside connection paths; short-distance ones start hidden for HTML viewer toggling
     parts.push(`  <g class="stubs">`);
     for (const conn of graph.connections) {
         const hideStubs = !!conn.path;
@@ -72,13 +82,13 @@ export function renderSVG(graph, options = {}) {
     }
     parts.push(`  </g>`);
     parts.push(`</g>`);
-    // Nodes (bodies, icons, port dots — no labels)
+    // Nodes (bodies, icons, port dots)
     parts.push(`<g class="nodes">`);
     for (const node of graph.nodes) {
         parts.push(renderNode(node, theme, themeName, allConnections));
     }
     parts.push(`</g>`);
-    // Labels rendered last so they appear on top of everything (single pass)
+    // Labels rendered last so they appear on top of everything
     parts.push(`<g class="labels">`);
     for (const node of graph.nodes) {
         renderNodeLabel(parts, node, theme);
@@ -87,7 +97,6 @@ export function renderSVG(graph, options = {}) {
             for (const child of node.scopeChildren) {
                 renderNodeLabel(parts, child, theme);
             }
-            // Scope port labels + child port labels
             if (showPortLabels && node.scopePorts) {
                 renderPortLabels(parts, node.id, node.scopePorts.inputs, node.scopePorts.outputs, theme, themeName);
             }
@@ -97,14 +106,6 @@ export function renderSVG(graph, options = {}) {
         }
     }
     parts.push(`</g>`);
-    // Watermark (logo + text)
-    const wmX = vbX + vbWidth - 16;
-    const wmY = vbY + vbHeight - 14;
-    const wmBrand = themeName === 'dark' ? '#8e9eff' : '#5468ff';
-    parts.push(`<g opacity="0.5">`);
-    parts.push(`  <svg x="${wmX - 118}" y="${wmY - 18}" width="22" height="22" viewBox="0 0 256 256" fill="none"><path d="M80 128C134 128 122 49 176 49" stroke="${wmBrand}" stroke-width="14" stroke-linecap="round"/><path d="M80 128C134 128 122 207 176 207" stroke="${wmBrand}" stroke-width="14" stroke-linecap="round"/><rect x="28" y="102" width="52" height="52" rx="10" stroke="${wmBrand}" stroke-width="14"/><rect x="176" y="23" width="52" height="52" rx="10" stroke="${wmBrand}" stroke-width="14"/><rect x="176" y="181" width="52" height="52" rx="10" stroke="${wmBrand}" stroke-width="14"/></svg>`);
-    parts.push(`  <text x="${wmX}" y="${wmY}" text-anchor="end" font-size="14" font-weight="700" fill="${wmBrand}" font-family="Montserrat, 'Segoe UI', Roboto, sans-serif">Flow Weaver</text>`);
-    parts.push(`</g>`);
     parts.push(`</svg>`);
     return parts.join('\n');
 }
@@ -113,7 +114,7 @@ function renderConnection(parts, conn, gradIndex, hidden = false) {
     const dashAttr = conn.isStepConnection ? '' : ' stroke-dasharray="8 4"';
     const displayAttr = hidden ? ' display="none"' : '';
     const pathD = conn.path || 'M0,0';
-    parts.push(`  <path d="${pathD}" fill="none" stroke="url(#conn-grad-${gradIndex})" stroke-width="3"${dashAttr} stroke-linecap="round" data-source="${escapeXml(conn.fromNode)}.${escapeXml(conn.fromPort)}:output" data-target="${escapeXml(conn.toNode)}.${escapeXml(conn.toPort)}:input"${displayAttr}/>`);
+    parts.push(`  <path d="${pathD}" fill="none" stroke="url(#conn-grad-${gradIndex})" stroke-width="1"${dashAttr} stroke-linecap="round" data-source="${escapeXml(conn.fromNode)}.${escapeXml(conn.fromPort)}:output" data-target="${escapeXml(conn.toNode)}.${escapeXml(conn.toPort)}:input"${displayAttr}/>`);
 }
 function renderStub(parts, stub, conn, hidden = false) {
     const dashAttr = stub.dashed ? ' stroke-dasharray="6 3"' : '';
@@ -132,16 +133,17 @@ function renderScopeConnection(parts, conn, allConnections, parentNodeId) {
     if (gradIndex < 0)
         return;
     const dashAttr = conn.isStepConnection ? '' : ' stroke-dasharray="8 4"';
-    parts.push(`    <path d="${conn.path}" fill="none" stroke="url(#conn-grad-${gradIndex})" stroke-width="2.5"${dashAttr} stroke-linecap="round" data-source="${escapeXml(conn.fromNode)}.${escapeXml(conn.fromPort)}:output" data-target="${escapeXml(conn.toNode)}.${escapeXml(conn.toPort)}:input" data-scope="${escapeXml(parentNodeId)}"/>`);
+    parts.push(`    <path d="${conn.path}" fill="none" stroke="url(#conn-grad-${gradIndex})" stroke-width="1"${dashAttr} stroke-linecap="round" data-source="${escapeXml(conn.fromNode)}.${escapeXml(conn.fromPort)}:output" data-target="${escapeXml(conn.toNode)}.${escapeXml(conn.toPort)}:input" data-scope="${escapeXml(parentNodeId)}"/>`);
 }
 // ---- Node rendering ----
 /** Render node body rect + icon */
-function renderNodeBody(parts, node, theme, indent) {
+function renderNodeBody(parts, node, theme, themeName, indent) {
     const strokeColor = node.color !== NODE_DEFAULT_COLOR ? node.color : theme.nodeIconColor;
-    parts.push(`${indent}<rect x="${node.x}" y="${node.y}" width="${node.width}" height="${node.height}" rx="${BORDER_RADIUS}" fill="${theme.nodeFill}" stroke="${strokeColor}" stroke-width="2" filter="url(#node-shadow)"/>`);
+    parts.push(`${indent}<rect x="${node.x}" y="${node.y}" width="${node.width}" height="${node.height}" rx="${BORDER_RADIUS}" fill="${theme.background}" stroke="${strokeColor}" stroke-width="2"/>`);
     const iconPath = NODE_ICON_PATHS[node.icon] ?? NODE_ICON_PATHS.code;
-    const iconColor = node.color !== NODE_DEFAULT_COLOR ? node.color : theme.nodeIconColor;
-    const iconSize = 40;
+    // node.color is a resolved hex (e.g. "#5e9eff"), find matching variant by border value
+    const iconColor = resolveIconColor(node.color, themeName, theme);
+    const iconSize = 50;
     const iconX = node.x + (node.width - iconSize) / 2;
     const iconY = node.y + (node.height - iconSize) / 2;
     parts.push(`${indent}<svg x="${iconX}" y="${iconY}" width="${iconSize}" height="${iconSize}" viewBox="0 -960 960 960"><path d="${iconPath}" fill="${iconColor}"/></svg>`);
@@ -152,57 +154,61 @@ function renderNode(node, theme, themeName, allConnections) {
     if (node.scopeChildren && node.scopeChildren.length > 0) {
         // Scoped node: body rect only (icon omitted — children occupy the inner area)
         const strokeColor = node.color !== NODE_DEFAULT_COLOR ? node.color : theme.nodeIconColor;
-        parts.push(`    <rect x="${node.x}" y="${node.y}" width="${node.width}" height="${node.height}" rx="${BORDER_RADIUS}" fill="${theme.nodeFill}" stroke="${strokeColor}" stroke-width="2" filter="url(#node-shadow)"/>`);
+        parts.push(`    <rect x="${node.x}" y="${node.y}" width="${node.width}" height="${node.height}" rx="${BORDER_RADIUS}" fill="${theme.background}" stroke="${strokeColor}" stroke-width="2"/>`);
         renderScopedContent(parts, node, theme, themeName, allConnections);
     }
     else {
-        renderNodeBody(parts, node, theme, '    ');
+        renderNodeBody(parts, node, theme, themeName, '    ');
     }
     // External port dots (labels rendered in top-level labels pass)
-    renderPortDots(parts, node.id, node.inputs, node.outputs, themeName);
+    renderPortDots(parts, node.id, node.inputs, node.outputs, themeName, theme);
     parts.push(`  </g>`);
     return parts.join('\n');
 }
 function renderScopedContent(parts, node, theme, themeName, allConnections) {
     const children = node.scopeChildren;
     const scopePorts = node.scopePorts;
-    // Scope area inner rectangle
+    // Scope area dividers — matches platform scopeContainerStyle (2px solid outline columns)
+    // Vertical lines at left/right scope port columns + horizontal top/bottom dividers
     const scopeX = node.x + SCOPE_PORT_COLUMN;
-    const scopeY = node.y + 4;
     const scopeW = node.width - SCOPE_PORT_COLUMN * 2;
-    const scopeH = node.height - 8;
-    parts.push(`    <rect x="${scopeX}" y="${scopeY}" width="${scopeW}" height="${scopeH}" rx="4" fill="none" stroke="${theme.scopeAreaStroke}" stroke-width="1" stroke-dasharray="4 2" opacity="0.5"/>`);
+    const scopeRightX = node.x + node.width - SCOPE_PORT_COLUMN;
+    const lineY1 = node.y;
+    const lineY2 = node.y + node.height;
+    const strokeColor = node.color !== NODE_DEFAULT_COLOR ? node.color : theme.nodeIconColor;
+    // Vertical column dividers (left and right scope port columns)
+    parts.push(`    <line x1="${scopeX}" y1="${lineY1}" x2="${scopeX}" y2="${lineY2}" stroke="${strokeColor}" stroke-width="2" opacity="0.5"/>`);
+    parts.push(`    <line x1="${scopeRightX}" y1="${lineY1}" x2="${scopeRightX}" y2="${lineY2}" stroke="${strokeColor}" stroke-width="2" opacity="0.5"/>`);
+    // Horizontal top/bottom area dividers
+    parts.push(`    <line x1="${scopeX}" y1="${lineY1 + 2}" x2="${scopeRightX}" y2="${lineY1 + 2}" stroke="${theme.scopeAreaStroke}" stroke-width="1" opacity="0.3"/>`);
+    parts.push(`    <line x1="${scopeX}" y1="${lineY2 - 2}" x2="${scopeRightX}" y2="${lineY2 - 2}" stroke="${theme.scopeAreaStroke}" stroke-width="1" opacity="0.3"/>`);
     // Scope connections (before ports so ports appear on top)
     for (const conn of node.scopeConnections ?? []) {
         renderScopeConnection(parts, conn, allConnections, node.id);
     }
     // Scope port dots (before children so dots sit on top of connections)
     if (scopePorts) {
-        renderPortDots(parts, node.id, scopePorts.inputs, scopePorts.outputs, themeName);
+        renderPortDots(parts, node.id, scopePorts.inputs, scopePorts.outputs, themeName, theme);
     }
     // Child nodes (all labels handled in top-level labels pass)
     for (const child of children) {
         parts.push(`    <g data-node-id="${escapeXml(child.id)}">`);
-        renderNodeBody(parts, child, theme, '      ');
-        renderPortDots(parts, child.id, child.inputs, child.outputs, themeName);
+        renderNodeBody(parts, child, theme, themeName, '      ');
+        renderPortDots(parts, child.id, child.inputs, child.outputs, themeName, theme);
         parts.push(`    </g>`);
     }
 }
 // ---- Label rendering ----
-/** Render a node name label badge */
+/** Render a node name label (plain text, no badge background — matches platform) */
 function renderNodeLabel(parts, node, theme) {
     const isScoped = !!(node.scopeChildren && node.scopeChildren.length > 0);
     const labelText = escapeXml(node.label);
-    const textWidth = labelText.length * 7;
-    const labelBgWidth = textWidth + 16;
-    const labelBgHeight = LABEL_HEIGHT;
-    const labelBgX = isScoped ? node.x : node.x + node.width / 2 - labelBgWidth / 2;
-    const labelBgY = node.y - LABEL_GAP - labelBgHeight;
-    const labelTextX = isScoped ? node.x + 8 : node.x + node.width / 2;
+    const labelTextX = isScoped ? node.x + 6 : node.x + node.width / 2;
+    const labelTextY = node.y - LABEL_GAP;
     const labelAnchor = isScoped ? 'start' : 'middle';
+    const labelColor = node.color !== NODE_DEFAULT_COLOR ? node.color : theme.labelColor;
     parts.push(`    <g data-label-for="${escapeXml(node.id)}">`);
-    parts.push(`      <rect x="${labelBgX}" y="${labelBgY}" width="${labelBgWidth}" height="${labelBgHeight}" rx="6" fill="${theme.labelBadgeFill}" opacity="0.95"/>`);
-    parts.push(`      <text class="node-label" x="${labelTextX}" y="${labelBgY + labelBgHeight / 2 + 6}" text-anchor="${labelAnchor}" fill="${node.color !== NODE_DEFAULT_COLOR ? node.color : theme.labelColor}">${labelText}</text>`);
+    parts.push(`      <text class="node-label" x="${labelTextX}" y="${labelTextY}" text-anchor="${labelAnchor}" fill="${labelColor}">${labelText}</text>`);
     parts.push(`    </g>`);
 }
 /** Render port labels for a node if showPortLabels is enabled */
@@ -212,51 +218,59 @@ function renderPortLabelsForNode(parts, node, theme, themeName, showPortLabels)
     }
 }
 // ---- Port rendering ----
-/** Render only port dot circles (no labels) */
-function renderPortDots(parts, nodeId, inputs, outputs, themeName) {
+/** Render port indicators: outer ring (port color) + inner bar (bg) matching platform portStyle */
+function renderPortDots(parts, nodeId, inputs, outputs, themeName, theme) {
+    // 2px bar with 2px colored ring (boxShadow) — matches platform portStyle
+    // SVG equivalent: inner rect (subtle bg) + outer rect (port color, slightly larger)
+    const barWidth = 2;
+    const barHeight = 14;
+    const ringWidth = 2; // boxShadow spread
+    const outerW = barWidth + ringWidth * 2; // 6px total
+    const outerH = barHeight + ringWidth * 2; // 18px total
     for (const port of [...inputs, ...outputs]) {
         const color = getPortColor(port.dataType, port.isFailure, themeName);
-        const ringColor = getPortRingColor(port.dataType, port.isFailure, themeName);
         const dir = port.direction === 'INPUT' ? 'input' : 'output';
-        parts.push(`    <circle cx="${port.cx}" cy="${port.cy}" r="${PORT_RADIUS}" fill="${color}" stroke="${ringColor}" stroke-width="2" data-port-id="${escapeXml(nodeId)}.${escapeXml(port.name)}:${dir}" data-direction="${dir}"/>`);
+        const ox = port.cx - outerW / 2;
+        const oy = port.cy - outerH / 2;
+        const ix = port.cx - barWidth / 2;
+        const iy = port.cy - barHeight / 2;
+        // Outer ring (port-type color)
+        parts.push(`    <rect x="${ox}" y="${oy}" width="${outerW}" height="${outerH}" rx="4" fill="${color}" data-port-id="${escapeXml(nodeId)}.${escapeXml(port.name)}:${dir}" data-direction="${dir}"/>`);
+        // Inner bar (subtle bg)
+        parts.push(`    <rect x="${ix}" y="${iy}" width="${barWidth}" height="${barHeight}" rx="2" fill="${theme.background}" pointer-events="none"/>`);
     }
 }
-/** Render only port label badges (no dots) */
+/** Render only port label badges (no dots) — rectangular with port-type border */
 function renderPortLabels(parts, nodeId, inputs, outputs, theme, themeName) {
     for (const port of [...inputs, ...outputs]) {
         const color = getPortColor(port.dataType, port.isFailure, themeName);
         const isInput = port.direction === 'INPUT';
-        const abbrev = TYPE_ABBREVIATIONS[port.dataType] ?? port.dataType;
         const dir = isInput ? 'input' : 'output';
         const portId = `${escapeXml(nodeId)}.${escapeXml(port.name)}:${dir}`;
         const portLabel = port.label;
-        const typeWidth = measureText(abbrev);
         const labelWidth = measureText(portLabel);
-        const pad = 7;
-        const divGap = 4;
-        const badgeWidth = pad + typeWidth + divGap + 1 + divGap + labelWidth + pad;
+        const pad = 6;
+        const gap = 4;
+        const abbrev = TYPE_ABBREVIATIONS[port.dataType] ?? port.dataType;
+        const typeWidth = measureText(abbrev);
+        const badgeWidth = pad + typeWidth + gap + labelWidth + pad;
         const badgeHeight = 16;
         const badgeGap = 5;
-        const rr = badgeHeight / 2;
         const badgeX = isInput
             ? port.cx - PORT_RADIUS - badgeGap - badgeWidth
             : port.cx + PORT_RADIUS + badgeGap;
         const badgeY = port.cy - badgeHeight / 2;
         parts.push(`    <g data-port-label="${portId}">`);
-        parts.push(`      <rect x="${badgeX}" y="${badgeY}" width="${badgeWidth}" height="${badgeHeight}" rx="${rr}" fill="${theme.nodeFill}" stroke="${theme.labelBadgeBorder}" stroke-width="1"/>`);
+        parts.push(`      <rect x="${badgeX}" y="${badgeY}" width="${badgeWidth}" height="${badgeHeight}" rx="3" fill="${theme.background}" stroke="${color}" stroke-width="1"/>`);
         if (isInput) {
             const typeX = badgeX + badgeWidth - pad - typeWidth / 2;
-            const divX = typeX - typeWidth / 2 - divGap;
-            const nameX = divX - divGap;
-            parts.push(`      <line x1="${divX}" y1="${badgeY + 3}" x2="${divX}" y2="${badgeY + badgeHeight - 3}" stroke="${theme.labelBadgeBorder}" stroke-width="1"/>`);
+            const nameX = typeX - typeWidth / 2 - gap;
             parts.push(`      <text class="port-label" x="${nameX}" y="${port.cy + 3.5}" text-anchor="end">${escapeXml(portLabel)}</text>`);
             parts.push(`      <text class="port-type-label" x="${typeX}" y="${port.cy + 3.5}" text-anchor="middle" fill="${color}">${escapeXml(abbrev)}</text>`);
         }
         else {
             const typeX = badgeX + pad + typeWidth / 2;
-            const divX = badgeX + pad + typeWidth + divGap;
-            const nameX = divX + 1 + divGap;
-            parts.push(`      <line x1="${divX}" y1="${badgeY + 3}" x2="${divX}" y2="${badgeY + badgeHeight - 3}" stroke="${theme.labelBadgeBorder}" stroke-width="1"/>`);
+            const nameX = typeX + typeWidth / 2 + gap;
             parts.push(`      <text class="port-type-label" x="${typeX}" y="${port.cy + 3.5}" text-anchor="middle" fill="${color}">${escapeXml(abbrev)}</text>`);
             parts.push(`      <text class="port-label" x="${nameX}" y="${port.cy + 3.5}" text-anchor="start">${escapeXml(portLabel)}</text>`);
         }

package/dist/diagram/theme.d.ts

@@ -4,6 +4,8 @@ export declare const NODE_DEFAULT_COLOR = "#334155";
 export declare const NODE_VARIANT_COLORS: Record<string, {
     border: string;
     darkBorder: string;
+    icon: string;
+    darkIcon: string;
 }>;
 export declare function getTheme(name: 'dark' | 'light'): ThemePalette;
 export declare function getPortColor(dataType: TDataType, isFailure: boolean, theme?: 'dark' | 'light'): string;

package/dist/diagram/theme.js

@@ -28,15 +28,15 @@ const LIGHT_FAILURE_COLOR = '#e34646'; // red-shade-2
 // Light: border = X-shade-2
 export const NODE_DEFAULT_COLOR = '#334155';
 export const NODE_VARIANT_COLORS = {
-    blue: { border: '#548ce3', darkBorder: '#5e9eff' }, // blue-shade-2 / blue-dark-shade-1
-    purple: { border: '#9f5fe3', darkBorder: '#b36bff' }, // purple-shade-2 / purple-dark-shade-1
-    cyan: { border: '#63ccc4', darkBorder: '#6fe5dc' }, // cyan-shade-2 / cyan-dark-shade-1
-    teal: { border: '#63ccc4', darkBorder: '#6fe5dc' }, // alias for cyan
-    orange: { border: '#e3732d', darkBorder: '#ff8133' }, // orange-shade-2 / orange-dark-shade-1
-    pink: { border: '#e349c2', darkBorder: '#ff52da' }, // pink-shade-2 / pink-dark-shade-1
-    green: { border: '#0ec850', darkBorder: '#10e15a' }, // green-shade-2 / green-dark-shade-1
-    red: { border: '#e34646', darkBorder: '#ff4f4f' }, // red-shade-2 / red-dark-shade-1
-    yellow: { border: '#e3a82b', darkBorder: '#ffbd30' }, // yellow-shade-2 / yellow-dark-shade-1
+    blue: { border: '#548ce3', darkBorder: '#5e9eff', icon: '#3a6bbf', darkIcon: '#4a7ad4' }, // blue-shade-2 / blue-dark-shade-1 / blue-shade-3 / blue-dark-shade-3
+    purple: { border: '#9f5fe3', darkBorder: '#b36bff', icon: '#7d44bf', darkIcon: '#9050d4' }, // purple-shade-2 / purple-dark-shade-1
+    cyan: { border: '#63ccc4', darkBorder: '#6fe5dc', icon: '#4aada6', darkIcon: '#56c4bb' }, // cyan-shade-2 / cyan-dark-shade-1
+    teal: { border: '#63ccc4', darkBorder: '#6fe5dc', icon: '#4aada6', darkIcon: '#56c4bb' }, // alias for cyan
+    orange: { border: '#e3732d', darkBorder: '#ff8133', icon: '#bf5a1e', darkIcon: '#d46a28' }, // orange-shade-2 / orange-dark-shade-1
+    pink: { border: '#e349c2', darkBorder: '#ff52da', icon: '#bf349f', darkIcon: '#d43fb5' }, // pink-shade-2 / pink-dark-shade-1
+    green: { border: '#0ec850', darkBorder: '#10e15a', icon: '#0aa53f', darkIcon: '#0dbd4a' }, // green-shade-2 / green-dark-shade-1
+    red: { border: '#e34646', darkBorder: '#ff4f4f', icon: '#bf3333', darkIcon: '#d43b3b' }, // red-shade-2 / red-dark-shade-1
+    yellow: { border: '#e3a82b', darkBorder: '#ffbd30', icon: '#bf8c21', darkIcon: '#d49e28' }, // yellow-shade-2 / yellow-dark-shade-1
 };
 // ---- Theme palettes (exact values from token system) ----
 const DARK_PALETTE = {
@@ -46,13 +46,13 @@ const DARK_PALETTE = {
     labelColor: '#a4beff', // secondary-dark-base (node label text)
     sublabelColor: '#babac0', // color-text-subtle = dark-shade-30
     connectionColor: '#5f5f6d', // color-border-subtle = dark-shade-70
-    dotColor: '#8e9eff', // color-background-dots = primary-dark-tint-1
+    dotColor: '#7b8cd9', // color-background-dots-secondary = primary-dark-tint-2
     labelBadgeFill: '#252538', // color-surface-low = dark-shade-95
     labelBadgeBorder: '#313143', // color-surface-lowest = dark-shade-90
-    nodeIconColor: '#a4beff', // secondary-dark-base (matches label color)
+    nodeIconColor: '#8e9eff', // color-brand-main = primary-dark-tint-1
     scopeAreaStroke: '#5f5f6d', // color-border-subtle = dark-shade-70
-    nodeShadowOpacity: 0.15,
-    dotOpacity: 0.5,
+    nodeShadowOpacity: 0,
+    dotOpacity: 0.4,
 };
 const LIGHT_PALETTE = {
     background: '#f6f7ff', // color-brand-subtle-bg = primary-extended-tint-95
@@ -61,13 +61,13 @@ const LIGHT_PALETTE = {
     labelColor: '#223354', // secondary-base (light)
     sublabelColor: '#808080', // shade-50
     connectionColor: '#b3b3b3', // shade-30
-    dotColor: '#5468ff', // color-background-dots = primary-shade-1
+    dotColor: '#4a5ce0', // color-background-dots-secondary = primary-shade-2
     labelBadgeFill: '#ffffff', // surface-main — 80% opacity applied in renderer
     labelBadgeBorder: '#e6e6e6', // shade-10
-    nodeIconColor: '#5468ff', // primary-base (light)
+    nodeIconColor: '#5468ff', // color-brand-main = primary-base
     scopeAreaStroke: '#cccccc', // color-border-default
-    nodeShadowOpacity: 0.08,
-    dotOpacity: 0.45,
+    nodeShadowOpacity: 0,
+    dotOpacity: 0.4,
 };
 export function getTheme(name) {
     return name === 'light' ? LIGHT_PALETTE : DARK_PALETTE;

package/dist/generated-version.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "0.33.1";
+export declare const VERSION = "0.33.2";
 //# sourceMappingURL=generated-version.d.ts.map

package/dist/generated-version.js

@@ -1,3 +1,3 @@
 // Auto-generated by scripts/generate-version.ts — do not edit manually
-export const VERSION = '0.33.1';
+export const VERSION = '0.33.2';
 //# sourceMappingURL=generated-version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synergenius/flow-weaver",
-  "version": "0.33.1",
+  "version": "0.33.2",
   "description": "Flow Weaver: deterministic TypeScript workflow compiler. Define workflows with JSDoc annotations, compile to standalone functions with zero runtime dependencies.",
   "private": false,
   "type": "module",