@principal-ai/principal-view-react 0.6.10 → 0.6.12

package/dist/utils/graphConverter.js

@@ -14,13 +14,17 @@ function convertToXYFlowNodes(nodes, configuration, violations = []) {
         if (!typeDefinition) {
             console.warn(`Node type "${node.type}" not found in configuration for node "${node.id}"`);
         }
-        const hasViolations = violations.some(v => v.context?.nodeId === node.id);
+        const hasViolations = violations.some((v) => v.context?.nodeId === node.id);
+        // Groups should render behind other nodes and edges
+        const isGroup = node.data?.canvasType === 'group';
         return {
             id: node.id,
             type: 'custom',
             position: node.position || { x: 0, y: 0 },
+            // Groups have lower zIndex to render behind edges
+            zIndex: isGroup ? -1 : undefined,
             data: {
-                name: node.data.name || node.id,
+                name: node.name || node.id,
                 typeDefinition,
                 state: node.state,
                 hasViolations,
@@ -29,6 +33,22 @@ function convertToXYFlowNodes(nodes, configuration, violations = []) {
         };
     });
 }
+/**
+ * Map canvas side to source handle ID
+ * Source handles use '-out' suffix
+ */
+function sideToSourceHandle(side) {
+    if (!side)
+        return undefined;
+    return `${side}-out`;
+}
+/**
+ * Map canvas side to target handle ID
+ * Target handles use the side name directly
+ */
+function sideToTargetHandle(side) {
+    return side;
+}
 /**
  * Convert our EdgeState to xyflow Edge format
  */
@@ -39,23 +59,30 @@ function convertToXYFlowEdges(edges, configuration, violations = []) {
         if (!typeDefinition) {
             console.warn(`Edge type "${edge.type}" not found in configuration for edge "${edge.id}"`);
         }
-        const hasViolations = violations.some(v => v.context?.edgeId === edge.id);
+        const hasViolations = violations.some((v) => v.context?.edgeId === edge.id);
         const edgeWithHandles = edge;
+        // Get handle IDs from edge data (fromSide/toSide) or explicit handles
+        const fromSide = edge.data?.fromSide;
+        const toSide = edge.data?.toSide;
+        const sourceHandle = edgeWithHandles.sourceHandle || sideToSourceHandle(fromSide);
+        const targetHandle = edgeWithHandles.targetHandle || sideToTargetHandle(toSide);
         // Add arrow marker if edge type is directed
         // Color priority: edge data color > type definition color > default
         const edgeColor = edge.data?.color;
-        const markerEnd = typeDefinition?.directed !== false ? {
-            type: react_1.MarkerType.ArrowClosed,
-            color: edgeColor || typeDefinition?.color || '#888',
-            width: 20,
-            height: 20,
-        } : undefined;
+        const markerEnd = typeDefinition?.directed !== false
+            ? {
+                type: react_1.MarkerType.ArrowClosed,
+                color: edgeColor || typeDefinition?.color || '#888',
+                width: 20,
+                height: 20,
+            }
+            : undefined;
         return {
             id: edge.id,
             source: edge.from,
             target: edge.to,
-            sourceHandle: edgeWithHandles.sourceHandle,
-            targetHandle: edgeWithHandles.targetHandle,
+            sourceHandle,
+            targetHandle,
             type: 'custom',
             animated: typeDefinition?.style === 'animated',
             markerEnd,
@@ -63,6 +90,7 @@ function convertToXYFlowEdges(edges, configuration, violations = []) {
                 typeDefinition,
                 hasViolations,
                 data: edge.data,
+                edgeType: edge.type,
             },
         };
     });
@@ -72,7 +100,7 @@ function convertToXYFlowEdges(edges, configuration, violations = []) {
  */
 function autoLayoutNodes(nodes, edges, layoutType = 'hierarchical') {
     // Skip if all nodes have positions
-    const hasPositions = nodes.every(n => n.position.x !== 0 || n.position.y !== 0);
+    const hasPositions = nodes.every((n) => n.position.x !== 0 || n.position.y !== 0);
     if (hasPositions || layoutType === 'manual') {
         return nodes;
     }
@@ -96,11 +124,11 @@ function applyHierarchicalLayout(nodes, edges) {
     // Build adjacency list
     const adjacency = new Map();
     const inDegree = new Map();
-    nodes.forEach(node => {
+    nodes.forEach((node) => {
         adjacency.set(node.id, []);
         inDegree.set(node.id, 0);
     });
-    edges.forEach(edge => {
+    edges.forEach((edge) => {
         const targets = adjacency.get(edge.source) || [];
         targets.push(edge.target);
         adjacency.set(edge.source, targets);
@@ -124,7 +152,7 @@ function applyHierarchicalLayout(nodes, edges) {
             currentLayer.push(nodeId);
             visited.add(nodeId);
             const neighbors = adjacency.get(nodeId) || [];
-            neighbors.forEach(neighbor => {
+            neighbors.forEach((neighbor) => {
                 const degree = inDegree.get(neighbor) - 1;
                 inDegree.set(neighbor, degree);
                 if (degree === 0 && !visited.has(neighbor)) {
@@ -137,22 +165,22 @@ function applyHierarchicalLayout(nodes, edges) {
         }
     }
     // Handle any remaining nodes (cycles or disconnected)
-    const remainingNodes = nodes.filter(n => !visited.has(n.id)).map(n => n.id);
+    const remainingNodes = nodes.filter((n) => !visited.has(n.id)).map((n) => n.id);
     if (remainingNodes.length > 0) {
         layers.push(remainingNodes);
     }
     // Position nodes based on layers
     const LAYER_HEIGHT = 150;
     const NODE_WIDTH = 200;
-    return nodes.map(node => {
-        const layerIndex = layers.findIndex(layer => layer.includes(node.id));
+    return nodes.map((node) => {
+        const layerIndex = layers.findIndex((layer) => layer.includes(node.id));
         const layer = layers[layerIndex] || [];
         const positionInLayer = layer.indexOf(node.id);
         const layerWidth = layer.length * NODE_WIDTH;
         return {
             ...node,
             position: {
-                x: (positionInLayer * NODE_WIDTH) + (NODE_WIDTH / 2) - (layerWidth / 2),
+                x: positionInLayer * NODE_WIDTH + NODE_WIDTH / 2 - layerWidth / 2,
                 y: layerIndex * LAYER_HEIGHT,
             },
         };

package/dist/utils/graphConverter.js.map

@@ -1 +1 @@
-{"version":3,"file":"graphConverter.js","sourceRoot":"","sources":["../../src/utils/graphConverter.ts"],"names":[],"mappings":";;AAQA,oDA4BC;AAWD,oDA0CC;AAKD,0CAuBC;AArHD,yCAAiE;AAKjE;;GAEG;AACH,SAAgB,oBAAoB,CAClC,KAAkB,EAClB,aAAiC,EACjC,aAA0B,EAAE;IAE5B,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACxB,MAAM,cAAc,GAAG,aAAa,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE1D,oDAAoD;QACpD,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,OAAO,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,0CAA0C,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC;QAC5F,CAAC;QAED,MAAM,aAAa,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC;QAE1E,OAAO;YACL,EAAE,EAAE,IAAI,CAAC,EAAE;YACX,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;YACzC,IAAI,EAAE;gBACJ,IAAI,EAAG,IAAI,CAAC,IAAI,CAAC,IAAe,IAAI,IAAI,CAAC,EAAE;gBAC3C,cAAc;gBACd,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,aAAa;gBACb,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;SACF,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC;AAQD;;GAEG;AACH,SAAgB,oBAAoB,CAClC,KAA2C,EAC3C,aAAiC,EACjC,aAA0B,EAAE;IAE5B,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACxB,MAAM,cAAc,GAAG,aAAa,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE1D,oDAAoD;QACpD,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,OAAO,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,0CAA0C,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC;QAC5F,CAAC;QAED,MAAM,aAAa,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC;QAC1E,MAAM,eAAe,GAAG,IAA4B,CAAC;QAErD,4CAA4C;QAC5C,oEAAoE;QACpE,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,EAAE,KAA2B,CAAC;QACzD,MAAM,SAAS,GAAG,cAAc,EAAE,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC;YACrD,IAAI,EAAE,kBAAU,CAAC,WAAW;YAC5B,KAAK,EAAE,SAAS,IAAI,cAAc,EAAE,KAAK,IAAI,MAAM;YACnD,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;SACX,CAAC,CAAC,CAAC,SAAS,CAAC;QAEd,OAAO;YACL,EAAE,EAAE,IAAI,CAAC,EAAE;YACX,MAAM,EAAE,IAAI,CAAC,IAAI;YACjB,MAAM,EAAE,IAAI,CAAC,EAAE;YACf,YAAY,EAAE,eAAe,CAAC,YAAY;YAC1C,YAAY,EAAE,eAAe,CAAC,YAAY;YAC1C,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,cAAc,EAAE,KAAK,KAAK,UAAU;YAC9C,SAAS;YACT,IAAI,EAAE;gBACJ,cAAc;gBACd,aAAa;gBACb,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;SACF,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC;AAED;;GAEG;AACH,SAAgB,eAAe,CAC7B,KAAgB,EAChB,KAAa,EACb,aAAwE,cAAc;IAEtF,mCAAmC;IACnC,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;IAChF,IAAI,YAAY,IAAI,UAAU,KAAK,QAAQ,EAAE,CAAC;QAC5C,OAAO,KAAK,CAAC;IACf,CAAC;IAED,QAAQ,UAAU,EAAE,CAAC;QACnB,KAAK,cAAc;YACjB,OAAO,uBAAuB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC/C,KAAK,UAAU;YACb,OAAO,mBAAmB,CAAC,KAAK,CAAC,CAAC;QACpC,KAAK,gBAAgB;YACnB,wCAAwC;YACxC,4CAA4C;YAC5C,OAAO,uBAAuB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAC/C;YACE,OAAO,KAAK,CAAC;IACjB,CAAC;AACH,CAAC;AAED;;GAEG;AACH,SAAS,uBAAuB,CAAoC,KAAgB,EAAE,KAAa;IACjG,uBAAuB;IACvB,MAAM,SAAS,GAAG,IAAI,GAAG,EAAoB,CAAC;IAC9C,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAkB,CAAC;IAE3C,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;QACnB,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;QAC3B,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;QACnB,MAAM,OAAO,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;QACjD,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC1B,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACpC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAClE,CAAC,CAAC,CAAC;IAEH,uCAAuC;IACvC,MAAM,MAAM,GAAe,EAAE,CAAC;IAC9B,MAAM,KAAK,GAAa,EAAE,CAAC;IAE3B,+CAA+C;IAC/C,QAAQ,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE;QAClC,IAAI,MAAM,KAAK,CAAC,EAAE,CAAC;YACjB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACrB,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,IAAI,GAAG,EAAU,CAAC;IAElC,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACxB,MAAM,YAAY,GAAa,EAAE,CAAC;QAClC,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;QAE/B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,EAAE,CAAC,EAAE,EAAE,CAAC;YACnC,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,EAAG,CAAC;YAC9B,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAC1B,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YAEpB,MAAM,SAAS,GAAG,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YAC9C,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;gBAC3B,MAAM,MAAM,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAE,GAAG,CAAC,CAAC;gBAC3C,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;gBAC/B,IAAI,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;oBAC3C,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;gBACvB,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;QAED,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,sDAAsD;IACtD,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC5E,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAC9B,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAC9B,CAAC;IAED,iCAAiC;IACjC,MAAM,YAAY,GAAG,GAAG,CAAC;IACzB,MAAM,UAAU,GAAG,GAAG,CAAC;IAEvB,OAAO,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;QACtB,MAAM,UAAU,GAAG,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QACtE,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QACvC,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC/C,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,GAAG,UAAU,CAAC;QAE7C,OAAO;YACL,GAAG,IAAI;YACP,QAAQ,EAAE;gBACR,CAAC,EAAE,CAAC,eAAe,GAAG,UAAU,CAAC,GAAG,CAAC,UAAU,GAAG,CAAC,CAAC,GAAG,CAAC,UAAU,GAAG,CAAC,CAAC;gBACvE,CAAC,EAAE,UAAU,GAAG,YAAY;aAC7B;SACF,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC;AAED;;GAEG;AACH,SAAS,mBAAmB,CAAoC,KAAgB;IAC9E,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;IAE/C,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QAC/B,MAAM,KAAK,GAAG,KAAK,GAAG,SAAS,CAAC;QAChC,OAAO;YACL,GAAG,IAAI;YACP,QAAQ,EAAE;gBACR,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,MAAM;gBACpC,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,MAAM;aACrC;SACF,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC"}
+{"version":3,"file":"graphConverter.js","sourceRoot":"","sources":["../../src/utils/graphConverter.ts"],"names":[],"mappings":"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"}

package/dist/utils/iconResolver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"iconResolver.d.ts","sourceRoot":"","sources":["../../src/utils/iconResolver.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;;;;;GAQG;AAEH,MAAM,WAAW,SAAS;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,GAAE,MAAW,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAcjG;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAEpC,CAAC"}
+{"version":3,"file":"iconResolver.d.ts","sourceRoot":"","sources":["../../src/utils/iconResolver.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;;;;;GAQG;AAEH,MAAM,WAAW,SAAS;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,GAAE,MAAW,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAkBjG;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAEpC,CAAC"}

package/dist/utils/iconResolver.js

@@ -56,7 +56,7 @@ function resolveIcon(icon, size = 20, className) {
         return (0, jsx_runtime_1.jsx)(LucideIcon, { size: size, className: className });
     }
     // Fall back to rendering as text (emoji or unicode)
-    return (0, jsx_runtime_1.jsx)("span", { className: className, style: { fontSize: `${size}px` }, children: icon });
+    return ((0, jsx_runtime_1.jsx)("span", { className: className, style: { fontSize: `${size}px` }, children: icon }));
 }
 /**
  * Icon component that resolves icon strings

package/dist/utils/iconResolver.js.map

@@ -1 +1 @@
-{"version":3,"file":"iconResolver.js","sourceRoot":"","sources":["../../src/utils/iconResolver.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,kCAcC;;AAxCD,0DAA4C;AAkB5C;;;;;;;GAOG;AACH,SAAgB,WAAW,CAAC,IAAa,EAAE,OAAe,EAAE,EAAE,SAAkB;IAC9E,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,sCAAsC;IACtC,8DAA8D;IAC9D,MAAM,UAAU,GAAI,WAAmB,CAAC,IAAI,CAAC,CAAC;IAE9C,2EAA2E;IAC3E,IAAI,UAAU,IAAI,CAAC,OAAO,UAAU,KAAK,UAAU,IAAI,OAAO,UAAU,KAAK,QAAQ,CAAC,EAAE,CAAC;QACvF,OAAO,uBAAC,UAAU,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,GAAI,CAAC;IAC1D,CAAC;IAED,oDAAoD;IACpD,OAAO,iCAAM,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,IAAI,IAAI,EAAE,YAAG,IAAI,GAAQ,CAAC;AACrF,CAAC;AAED;;GAEG;AACI,MAAM,IAAI,GAAwB,CAAC,EAAE,IAAI,EAAE,IAAI,GAAG,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE;IAC1E,OAAO,2DAAG,WAAW,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,CAAC,GAAI,CAAC;AACnD,CAAC,CAAC;AAFW,QAAA,IAAI,QAEf"}
+{"version":3,"file":"iconResolver.js","sourceRoot":"","sources":["../../src/utils/iconResolver.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,kCAkBC;;AA5CD,0DAA4C;AAkB5C;;;;;;;GAOG;AACH,SAAgB,WAAW,CAAC,IAAa,EAAE,OAAe,EAAE,EAAE,SAAkB;IAC9E,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,sCAAsC;IACtC,8DAA8D;IAC9D,MAAM,UAAU,GAAI,WAAmB,CAAC,IAAI,CAAC,CAAC;IAE9C,2EAA2E;IAC3E,IAAI,UAAU,IAAI,CAAC,OAAO,UAAU,KAAK,UAAU,IAAI,OAAO,UAAU,KAAK,QAAQ,CAAC,EAAE,CAAC;QACvF,OAAO,uBAAC,UAAU,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,GAAI,CAAC;IAC1D,CAAC;IAED,oDAAoD;IACpD,OAAO,CACL,iCAAM,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,IAAI,IAAI,EAAE,YACzD,IAAI,GACA,CACR,CAAC;AACJ,CAAC;AAED;;GAEG;AACI,MAAM,IAAI,GAAwB,CAAC,EAAE,IAAI,EAAE,IAAI,GAAG,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE;IAC1E,OAAO,2DAAG,WAAW,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,CAAC,GAAI,CAAC;AACnD,CAAC,CAAC;AAFW,QAAA,IAAI,QAEf"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/principal-view-react",
-  "version": "0.6.10",
+  "version": "0.6.12",
   "description": "React components for graph-based principal view framework",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -14,6 +14,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@principal-ade/industry-theme": "^0.1.4",
     "@principal-ai/principal-view-core": "^0.5.7",
     "@xyflow/react": "^12.0.0",
     "elkjs": "^0.9.0",

package/src/components/ConfigurationSelector.tsx

@@ -56,7 +56,7 @@ export const ConfigurationSelector: React.FC<ConfigurationSelectorProps> = ({
     onConfigChange(event.target.value);
   };
 
-  const selectedConfigData = configurations.find(c => c.name === selectedConfig);
+  const selectedConfigData = configurations.find((c) => c.name === selectedConfig);
 
   const defaultStyle: React.CSSProperties = {
     backgroundColor: 'white',
@@ -97,9 +97,7 @@ export const ConfigurationSelector: React.FC<ConfigurationSelectorProps> = ({
   if (configurations.length === 0) {
     return (
       <div className={className} style={defaultStyle}>
-        <div style={{ ...labelStyle, color: '#999' }}>
-          No configurations available
-        </div>
+        <div style={{ ...labelStyle, color: '#999' }}>No configurations available</div>
       </div>
     );
   }
@@ -125,7 +123,9 @@ export const ConfigurationSelector: React.FC<ConfigurationSelectorProps> = ({
         {configurations.map((config) => (
           <option key={config.name} value={config.name}>
             {config.config.metadata.name}
-            {showVersion && config.config.metadata.version && ` (v${config.config.metadata.version})`}
+            {showVersion &&
+              config.config.metadata.version &&
+              ` (v${config.config.metadata.version})`}
           </option>
         ))}
       </select>

package/src/components/EdgeInfoPanel.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { EdgeState, EdgeTypeDefinition } from '@principal-ai/principal-view-core';
+import { useTheme } from '@principal-ade/industry-theme';
 
 export interface EdgeInfoPanelProps {
   edge: EdgeState;
@@ -22,7 +23,8 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
   onClose,
   onDelete,
 }) => {
-  const color = typeDefinition.color || '#888';
+  const { theme } = useTheme();
+  const edgeColor = typeDefinition.color || theme.colors.primary;
 
   // Get fields to display based on dataSchema
   const displayFields = typeDefinition.dataSchema
@@ -45,27 +47,29 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
         position: 'absolute',
         top: '60px',
         right: '20px',
-        backgroundColor: 'white',
+        backgroundColor: theme.colors.background,
+        color: theme.colors.text,
         borderRadius: '8px',
         boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
         padding: '16px',
         minWidth: '250px',
         maxWidth: '350px',
         zIndex: 1000,
+        border: `1px solid ${theme.colors.border}`,
       }}
     >
       {/* Header */}
-      <div style={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        marginBottom: '12px',
-        paddingBottom: '8px',
-        borderBottom: `2px solid ${color}`,
-      }}>
-        <div style={{ fontWeight: 'bold', fontSize: '14px' }}>
-          Edge Information
-        </div>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: '12px',
+          paddingBottom: '8px',
+          borderBottom: `2px solid ${edgeColor}`,
+        }}
+      >
+        <div style={{ fontWeight: 'bold', fontSize: '14px', color: edgeColor }}>Edge Information</div>
         <button
           onClick={onClose}
           style={{
@@ -73,7 +77,7 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
             background: 'none',
             cursor: 'pointer',
             fontSize: '18px',
-            color: '#666',
+            color: theme.colors.textSecondary,
             padding: '0',
             width: '24px',
             height: '24px',
@@ -88,32 +92,48 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
 
       {/* Edge Type */}
       <div style={{ marginBottom: '12px' }}>
-        <div style={{ fontSize: '10px', color: '#666', marginBottom: '4px' }}>
+        <div style={{ fontSize: '10px', color: theme.colors.textSecondary, marginBottom: '4px' }}>
           Type
         </div>
-        <div style={{
-          fontSize: '12px',
-          padding: '4px 8px',
-          backgroundColor: color,
-          color: 'white',
-          borderRadius: '4px',
-          display: 'inline-block',
-        }}>
+        <div
+          style={{
+            fontSize: '12px',
+            padding: '4px 8px',
+            backgroundColor: edgeColor,
+            color: theme.colors.background,
+            borderRadius: '4px',
+            display: 'inline-block',
+          }}
+        >
           {edge.type}
         </div>
       </div>
 
       {/* Connection Info */}
       <div style={{ marginBottom: '12px' }}>
-        <div style={{ fontSize: '10px', color: '#666', marginBottom: '4px' }}>
+        <div style={{ fontSize: '10px', color: theme.colors.textSecondary, marginBottom: '4px' }}>
           Connection
         </div>
-        <div style={{ fontSize: '12px', color: '#333' }}>
-          <span style={{ fontFamily: 'monospace', backgroundColor: '#f0f0f0', padding: '2px 6px', borderRadius: '3px' }}>
+        <div style={{ fontSize: '12px' }}>
+          <span
+            style={{
+              fontFamily: theme.fonts.monospace,
+              backgroundColor: theme.colors.muted,
+              padding: '2px 6px',
+              borderRadius: '3px',
+            }}
+          >
             {sourceNodeId}
           </span>
-          <span style={{ margin: '0 8px', color: '#888' }}>→</span>
-          <span style={{ fontFamily: 'monospace', backgroundColor: '#f0f0f0', padding: '2px 6px', borderRadius: '3px' }}>
+          <span style={{ margin: '0 8px', color: theme.colors.textMuted }}>→</span>
+          <span
+            style={{
+              fontFamily: theme.fonts.monospace,
+              backgroundColor: theme.colors.muted,
+              padding: '2px 6px',
+              borderRadius: '3px',
+            }}
+          >
             {targetNodeId}
           </span>
         </div>
@@ -122,15 +142,22 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
       {/* Display schema-defined fields */}
       {hasSchemaFields && (
         <div style={{ marginBottom: '12px' }}>
-          <div style={{ fontSize: '10px', color: '#666', marginBottom: '8px', fontWeight: 'bold' }}>
+          <div
+            style={{
+              fontSize: '10px',
+              color: theme.colors.textSecondary,
+              marginBottom: '8px',
+              fontWeight: 'bold',
+            }}
+          >
             Properties
           </div>
           {displayFields.map(({ field, label, value }) => (
             <div key={field} style={{ marginBottom: '8px' }}>
-              <div style={{ fontSize: '10px', color: '#666', marginBottom: '2px' }}>
+              <div style={{ fontSize: '10px', color: theme.colors.textSecondary, marginBottom: '2px' }}>
                 {label}
               </div>
-              <div style={{ fontSize: '12px', color: '#333' }}>
+              <div style={{ fontSize: '12px' }}>
                 {value !== undefined && value !== null
                   ? typeof value === 'object'
                     ? JSON.stringify(value, null, 2)
@@ -145,15 +172,22 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
       {/* Show all edge data if no schema is defined */}
       {!hasSchemaFields && edgeDataEntries.length > 0 && (
         <div style={{ marginBottom: '12px' }}>
-          <div style={{ fontSize: '10px', color: '#666', marginBottom: '8px', fontWeight: 'bold' }}>
+          <div
+            style={{
+              fontSize: '10px',
+              color: theme.colors.textSecondary,
+              marginBottom: '8px',
+              fontWeight: 'bold',
+            }}
+          >
             Data
           </div>
           {edgeDataEntries.map(([key, value]) => (
             <div key={key} style={{ marginBottom: '8px' }}>
-              <div style={{ fontSize: '10px', color: '#666', marginBottom: '2px' }}>
+              <div style={{ fontSize: '10px', color: theme.colors.textSecondary, marginBottom: '2px' }}>
                 {key}
               </div>
-              <div style={{ fontSize: '12px', color: '#333', wordBreak: 'break-word' }}>
+              <div style={{ fontSize: '12px', wordBreak: 'break-word' }}>
                 {value !== undefined && value !== null
                   ? typeof value === 'object'
                     ? JSON.stringify(value, null, 2)
@@ -166,7 +200,15 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
       )}
 
       {/* Metadata */}
-      <div style={{ fontSize: '10px', color: '#999', marginTop: '12px', paddingTop: '8px', borderTop: '1px solid #eee' }}>
+      <div
+        style={{
+          fontSize: '10px',
+          color: theme.colors.textMuted,
+          marginTop: '12px',
+          paddingTop: '8px',
+          borderTop: `1px solid ${theme.colors.border}`,
+        }}
+      >
         ID: {edge.id}
       </div>
 
@@ -181,8 +223,8 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
             marginTop: '12px',
             width: '100%',
             padding: '8px 12px',
-            backgroundColor: '#dc3545',
-            color: 'white',
+            backgroundColor: theme.colors.error,
+            color: theme.colors.background,
             border: 'none',
             borderRadius: '4px',
             cursor: 'pointer',