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

package/dist/components/GraphRenderer.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const react_2 = require("@xyflow/react");
 require("@xyflow/react/dist/style.css");
 const principal_view_core_1 = require("@principal-ai/principal-view-core");
+const industry_theme_1 = require("@principal-ade/industry-theme");
 const CustomNode_1 = require("../nodes/CustomNode");
 const CustomEdge_1 = require("../edges/CustomEdge");
 const graphConverter_1 = require("../utils/graphConverter");
@@ -31,6 +32,7 @@ const createEmptyEditState = () => ({
  */
 const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges, violations = [], configName: _configName, showMinimap = true, showControls = true, showBackground = true, events = [], onEventProcessed, editable = false, onPendingChangesChange, onEditStateChange, editStateRef, }) => {
     const { fitView } = (0, react_2.useReactFlow)();
+    const { theme } = (0, industry_theme_1.useTheme)();
     // Track active animations
     const [animationState, setAnimationState] = (0, react_1.useState)({
         nodeAnimations: {},
@@ -49,13 +51,25 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     const [localNodes, setLocalNodes] = (0, react_1.useState)(propNodes);
     const [localEdges, setLocalEdges] = (0, react_1.useState)(propEdges);
     // Track the prop values to detect external changes
-    const propNodesKeyRef = (0, react_1.useRef)(propNodes.map(n => n.id).sort().join(','));
-    const propEdgesKeyRef = (0, react_1.useRef)(propEdges.map(e => e.id).sort().join(','));
+    const propNodesKeyRef = (0, react_1.useRef)(propNodes
+        .map((n) => n.id)
+        .sort()
+        .join(','));
+    const propEdgesKeyRef = (0, react_1.useRef)(propEdges
+        .map((e) => e.id)
+        .sort()
+        .join(','));
     // Sync local state with props when props change (e.g., config reload)
     // This only happens when the structure changes, not during editing
     (0, react_1.useEffect)(() => {
-        const newNodesKey = propNodes.map(n => n.id).sort().join(',');
-        const newEdgesKey = propEdges.map(e => e.id).sort().join(',');
+        const newNodesKey = propNodes
+            .map((n) => n.id)
+            .sort()
+            .join(',');
+        const newEdgesKey = propEdges
+            .map((e) => e.id)
+            .sort()
+            .join(',');
         if (newNodesKey !== propNodesKeyRef.current || newEdgesKey !== propEdgesKeyRef.current) {
             propNodesKeyRef.current = newNodesKey;
             propEdgesKeyRef.current = newEdgesKey;
@@ -73,11 +87,11 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     const edges = editable ? localEdges : propEdges;
     // Helper to check if there are pending changes
     const checkHasChanges = (0, react_1.useCallback)((state) => {
-        return state.positionChanges.size > 0 ||
+        return (state.positionChanges.size > 0 ||
             state.nodeUpdates.size > 0 ||
             state.deletedNodeIds.size > 0 ||
             state.createdEdges.length > 0 ||
-            state.deletedEdges.length > 0;
+            state.deletedEdges.length > 0);
     }, []);
     // Helper to update edit state and notify parent
     const updateEditState = (0, react_1.useCallback)((updater) => {
@@ -112,7 +126,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         if (!editable)
             return;
         // Update local nodes
-        setLocalNodes(prev => prev.map(node => {
+        setLocalNodes((prev) => prev.map((node) => {
             if (node.id === nodeId) {
                 return {
                     ...node,
@@ -123,7 +137,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             return node;
         }));
         // Track the change
-        updateEditState(prev => {
+        updateEditState((prev) => {
             const newUpdates = new Map(prev.nodeUpdates);
             const existing = newUpdates.get(nodeId) || {};
             newUpdates.set(nodeId, {
@@ -138,10 +152,10 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         if (!editable)
             return;
         // Remove from local state
-        setLocalNodes(prev => prev.filter(n => n.id !== nodeId));
-        setLocalEdges(prev => prev.filter(e => e.from !== nodeId && e.to !== nodeId));
+        setLocalNodes((prev) => prev.filter((n) => n.id !== nodeId));
+        setLocalEdges((prev) => prev.filter((e) => e.from !== nodeId && e.to !== nodeId));
         // Track the change
-        updateEditState(prev => {
+        updateEditState((prev) => {
             const newDeletedNodes = new Set(prev.deletedNodeIds);
             newDeletedNodes.add(nodeId);
             // Remove any pending updates for this node
@@ -151,7 +165,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             const newPositions = new Map(prev.positionChanges);
             newPositions.delete(nodeId);
             // Remove created edges that involve this node
-            const newCreatedEdges = prev.createdEdges.filter(e => e.from !== nodeId && e.to !== nodeId);
+            const newCreatedEdges = prev.createdEdges.filter((e) => e.from !== nodeId && e.to !== nodeId);
             return {
                 ...prev,
                 deletedNodeIds: newDeletedNodes,
@@ -167,13 +181,13 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         if (!editable)
             return;
         // Find the edge before removing it so we can track its full info
-        const edgeToDelete = localEdges.find(e => e.id === edgeId);
+        const edgeToDelete = localEdges.find((e) => e.id === edgeId);
         // Remove from local state
-        setLocalEdges(prev => prev.filter(e => e.id !== edgeId));
+        setLocalEdges((prev) => prev.filter((e) => e.id !== edgeId));
         // Track the change
-        updateEditState(prev => {
+        updateEditState((prev) => {
             // Check if this was a newly created edge
-            const createdEdgeIndex = prev.createdEdges.findIndex(e => e.id === edgeId);
+            const createdEdgeIndex = prev.createdEdges.findIndex((e) => e.id === edgeId);
             if (createdEdgeIndex >= 0) {
                 // Just remove it from created edges
                 const newCreatedEdges = [...prev.createdEdges];
@@ -182,12 +196,15 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             }
             // Otherwise mark as deleted with full edge info
             if (edgeToDelete) {
-                const newDeletedEdges = [...prev.deletedEdges, {
+                const newDeletedEdges = [
+                    ...prev.deletedEdges,
+                    {
                         id: edgeId,
                         from: edgeToDelete.from,
                         to: edgeToDelete.to,
-                        type: edgeToDelete.type
-                    }];
+                        type: edgeToDelete.type,
+                    },
+                ];
                 return { ...prev, deletedEdges: newDeletedEdges };
             }
             return prev;
@@ -199,14 +216,14 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         if (!editable || !connection.source || !connection.target)
             return;
         // Find source and target node types
-        const sourceNode = nodes.find(n => n.id === connection.source);
-        const targetNode = nodes.find(n => n.id === connection.target);
+        const sourceNode = nodes.find((n) => n.id === connection.source);
+        const targetNode = nodes.find((n) => n.id === connection.target);
         if (!sourceNode || !targetNode)
             return;
         // Find valid edge types for this connection
         const validTypes = configuration.allowedConnections
-            .filter(ac => ac.from === sourceNode.type && ac.to === targetNode.type)
-            .map(ac => ac.via);
+            .filter((ac) => ac.from === sourceNode.type && ac.to === targetNode.type)
+            .map((ac) => ac.via);
         const uniqueTypes = [...new Set(validTypes)];
         if (uniqueTypes.length === 0) {
             console.warn(`No valid edge types for connection from ${sourceNode.type} to ${targetNode.type}`);
@@ -242,11 +259,14 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             sourceHandle,
             targetHandle,
         };
-        setLocalEdges(prev => [...prev, newEdge]);
+        setLocalEdges((prev) => [...prev, newEdge]);
         // Track the change
-        updateEditState(prev => ({
+        updateEditState((prev) => ({
             ...prev,
-            createdEdges: [...prev.createdEdges, { id: edgeId, from, to, type, sourceHandle, targetHandle }],
+            createdEdges: [
+                ...prev.createdEdges,
+                { id: edgeId, from, to, type, sourceHandle, targetHandle },
+            ],
         }));
     }, [updateEditState]);
     // Handle edge type selection from picker
@@ -271,16 +291,16 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         if (!editable || !newConnection.source || !newConnection.target)
             return;
         // Find the original edge in our local state
-        const originalEdge = localEdges.find(e => e.id === oldEdge.id);
+        const originalEdge = localEdges.find((e) => e.id === oldEdge.id);
         if (!originalEdge)
             return;
         // Find source and target node types for validation
-        const sourceNode = nodes.find(n => n.id === newConnection.source);
-        const targetNode = nodes.find(n => n.id === newConnection.target);
+        const sourceNode = nodes.find((n) => n.id === newConnection.source);
+        const targetNode = nodes.find((n) => n.id === newConnection.target);
         if (!sourceNode || !targetNode)
             return;
         // Check if the new connection is valid for this edge type
-        const isValidConnection = configuration.allowedConnections.some(ac => ac.from === sourceNode.type && ac.to === targetNode.type && ac.via === originalEdge.type);
+        const isValidConnection = configuration.allowedConnections.some((ac) => ac.from === sourceNode.type && ac.to === targetNode.type && ac.via === originalEdge.type);
         if (!isValidConnection) {
             console.warn(`Cannot reconnect: ${originalEdge.type} edge not allowed from ${sourceNode.type} to ${targetNode.type}`);
             return;
@@ -288,7 +308,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         // Mark as successful before updating
         edgeReconnectSuccessful.current = true;
         // Update local edges - manually update the edge to preserve its type and id
-        setLocalEdges(prev => prev.map(edge => {
+        setLocalEdges((prev) => prev.map((edge) => {
             if (edge.id === oldEdge.id) {
                 return {
                     ...edge,
@@ -302,9 +322,9 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             return edge;
         }));
         // Track the change - remove old edge and add new one
-        updateEditState(prev => {
+        updateEditState((prev) => {
             // Check if this was a newly created edge
-            const createdEdgeIndex = prev.createdEdges.findIndex(e => e.id === oldEdge.id);
+            const createdEdgeIndex = prev.createdEdges.findIndex((e) => e.id === oldEdge.id);
             if (createdEdgeIndex >= 0) {
                 // Update the created edge entry
                 const newCreatedEdges = [...prev.createdEdges];
@@ -318,20 +338,26 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
                 return { ...prev, createdEdges: newCreatedEdges };
             }
             // For existing edges, track as delete + create
-            const newDeletedEdges = [...prev.deletedEdges, {
+            const newDeletedEdges = [
+                ...prev.deletedEdges,
+                {
                     id: oldEdge.id,
                     from: originalEdge.from,
                     to: originalEdge.to,
                     type: originalEdge.type,
-                }];
-            const newCreatedEdges = [...prev.createdEdges, {
+                },
+            ];
+            const newCreatedEdges = [
+                ...prev.createdEdges,
+                {
                     id: oldEdge.id,
                     from: newConnection.source,
                     to: newConnection.target,
                     type: originalEdge.type,
                     sourceHandle: newConnection.sourceHandle ?? undefined,
                     targetHandle: newConnection.targetHandle ?? undefined,
-                }];
+                },
+            ];
             return { ...prev, deletedEdges: newDeletedEdges, createdEdges: newCreatedEdges };
         });
     }, [editable, localEdges, nodes, configuration.allowedConnections, updateEditState]);
@@ -348,7 +374,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     const selectedEdge = (0, react_1.useMemo)(() => {
         if (!selectedEdgeId)
             return null;
-        return edges.find(e => e.id === selectedEdgeId);
+        return edges.find((e) => e.id === selectedEdgeId);
     }, [selectedEdgeId, edges]);
     const selectedEdgeTypeDefinition = (0, react_1.useMemo)(() => {
         if (!selectedEdge)
@@ -358,7 +384,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     const selectedNode = (0, react_1.useMemo)(() => {
         if (!selectedNodeId)
             return null;
-        return nodes.find(n => n.id === selectedNodeId);
+        return nodes.find((n) => n.id === selectedNodeId);
     }, [selectedNodeId, nodes]);
     const selectedNodeTypeDefinition = (0, react_1.useMemo)(() => {
         if (!selectedNode)
@@ -377,7 +403,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             const edgeId = edgeEvent.edgeId;
             const animation = edgeEvent.animation;
             if (animation && edgeId) {
-                setAnimationState(prev => ({
+                setAnimationState((prev) => ({
                     ...prev,
                     edgeAnimations: {
                         ...prev.edgeAnimations,
@@ -391,7 +417,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
                 }));
                 const duration = animation.duration || 1000;
                 setTimeout(() => {
-                    setAnimationState(prev => {
+                    setAnimationState((prev) => {
                         const newEdgeAnimations = { ...prev.edgeAnimations };
                         delete newEdgeAnimations[edgeId];
                         return { ...prev, edgeAnimations: newEdgeAnimations };
@@ -406,7 +432,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             const newState = stateEvent.newState;
             if (nodeId && newState) {
                 // Update the node's state
-                setLocalNodes(prev => prev.map(node => node.id === nodeId ? { ...node, state: newState } : node));
+                setLocalNodes((prev) => prev.map((node) => (node.id === nodeId ? { ...node, state: newState } : node)));
                 // Trigger animation based on state
                 const stateToAnimation = {
                     processing: 'pulse',
@@ -416,7 +442,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
                 const animationType = stateToAnimation[newState];
                 if (animationType) {
                     const duration = animationType === 'pulse' ? 1500 : animationType === 'flash' ? 1000 : 500;
-                    setAnimationState(prev => ({
+                    setAnimationState((prev) => ({
                         ...prev,
                         nodeAnimations: {
                             ...prev.nodeAnimations,
@@ -425,7 +451,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
                     }));
                     if (animationType !== 'pulse') {
                         setTimeout(() => {
-                            setAnimationState(prev => {
+                            setAnimationState((prev) => {
                                 const newNodeAnimations = { ...prev.nodeAnimations };
                                 delete newNodeAnimations[nodeId];
                                 return { ...prev, nodeAnimations: newNodeAnimations };
@@ -440,7 +466,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             const nodeEvent = latestEvent.payload;
             const nodeId = nodeEvent.nodeId;
             if (nodeId) {
-                setAnimationState(prev => ({
+                setAnimationState((prev) => ({
                     ...prev,
                     nodeAnimations: {
                         ...prev.nodeAnimations,
@@ -448,7 +474,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
                     },
                 }));
                 setTimeout(() => {
-                    setAnimationState(prev => {
+                    setAnimationState((prev) => {
                         const newNodeAnimations = { ...prev.nodeAnimations };
                         delete newNodeAnimations[nodeId];
                         return { ...prev, nodeAnimations: newNodeAnimations };
@@ -465,7 +491,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         const converted = (0, graphConverter_1.convertToXYFlowNodes)(nodes, configuration, violations);
         const layoutType = configuration.display?.layout || 'hierarchical';
         const positioned = (0, graphConverter_1.autoLayoutNodes)(converted, [], layoutType);
-        return positioned.map(node => {
+        return positioned.map((node) => {
             const animation = animationState.nodeAnimations[node.id];
             // Apply any pending position changes
             const pendingPosition = editStateRef.current.positionChanges.get(node.id);
@@ -475,16 +501,21 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
                 data: {
                     ...node.data,
                     editable,
-                    ...(animation ? {
-                        animationType: animation.type,
-                        animationDuration: animation.duration,
-                    } : {}),
+                    ...(animation
+                        ? {
+                            animationType: animation.type,
+                            animationDuration: animation.duration,
+                        }
+                        : {}),
                 },
             };
         });
     }, [nodes, configuration, violations, animationState.nodeAnimations, editable, editStateRef]);
     const baseNodesKey = (0, react_1.useMemo)(() => {
-        return nodes.map(n => n.id).sort().join(',');
+        return nodes
+            .map((n) => n.id)
+            .sort()
+            .join(',');
     }, [nodes]);
     // Local xyflow nodes state for dragging
     const [xyflowLocalNodes, setXyflowLocalNodes] = (0, react_1.useState)(xyflowNodesBase);
@@ -510,16 +541,15 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     const handleNodesChange = (0, react_1.useCallback)((changes) => {
         if (!editable)
             return;
-        setXyflowLocalNodes(nds => (0, react_2.applyNodeChanges)(changes, nds));
+        setXyflowLocalNodes((nds) => (0, react_2.applyNodeChanges)(changes, nds));
         // Track position changes on drag end
-        const positionChanges = changes
-            .filter((change) => change.type === 'position' &&
+        const positionChanges = changes.filter((change) => change.type === 'position' &&
             'position' in change &&
             change.position !== undefined &&
             'dragging' in change &&
             change.dragging === false);
         if (positionChanges.length > 0) {
-            updateEditState(prev => {
+            updateEditState((prev) => {
                 const newPositions = new Map(prev.positionChanges);
                 for (const change of positionChanges) {
                     newPositions.set(change.id, {
@@ -533,7 +563,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     }, [editable, updateEditState]);
     const xyflowEdges = (0, react_1.useMemo)(() => {
         const converted = (0, graphConverter_1.convertToXYFlowEdges)(edges, configuration, violations);
-        return converted.map(edge => {
+        return converted.map((edge) => {
             const animation = animationState.edgeAnimations[edge.id];
             if (animation) {
                 return {
@@ -565,26 +595,28 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     // ============================================
     // RENDER
     // ============================================
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.ReactFlow, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, minZoom: 0.1, maxZoom: 4, defaultEdgeOptions: { type: 'custom' }, onEdgeClick: onEdgeClick, onNodeClick: onNodeClick, proOptions: { hideAttribution: true }, nodesDraggable: editable, elementsSelectable: editable, nodesConnectable: editable, edgesReconnectable: editable, onNodesChange: handleNodesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, panOnDrag: true, selectionOnDrag: false, children: [showBackground && (0, jsx_runtime_1.jsx)(react_2.Background, { color: "#e5e5e5", gap: 16, size: 1 }), showControls && (0, jsx_runtime_1.jsx)(react_2.Controls, { showZoom: true, showFitView: true, showInteractive: true }), showMinimap && ((0, jsx_runtime_1.jsx)(react_2.MiniMap, { nodeColor: (node) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.ReactFlow, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, minZoom: 0.1, maxZoom: 4, defaultEdgeOptions: { type: 'custom' }, onEdgeClick: onEdgeClick, onNodeClick: onNodeClick, proOptions: { hideAttribution: true }, nodesDraggable: editable, elementsSelectable: editable, nodesConnectable: editable, edgesReconnectable: editable, onNodesChange: handleNodesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, panOnDrag: true, selectionOnDrag: false, children: [showBackground && (0, jsx_runtime_1.jsx)(react_2.Background, { color: theme.colors.border, gap: 16, size: 1 }), showControls && (0, jsx_runtime_1.jsx)(react_2.Controls, { showZoom: true, showFitView: true, showInteractive: true }), showMinimap && ((0, jsx_runtime_1.jsx)(react_2.MiniMap, { nodeColor: (node) => {
                             const nodeData = node.data;
-                            return nodeData?.typeDefinition?.color || '#888';
+                            return nodeData?.typeDefinition?.color || theme.colors.secondary;
                         }, nodeBorderRadius: 2, pannable: true, zoomable: true }))] }, baseNodesKey), selectedEdge && selectedEdgeTypeDefinition && ((0, jsx_runtime_1.jsx)(EdgeInfoPanel_1.EdgeInfoPanel, { edge: selectedEdge, typeDefinition: selectedEdgeTypeDefinition, sourceNodeId: selectedEdge.from, targetNodeId: selectedEdge.to, onClose: onCloseEdgeInfoPanel, onDelete: editable ? handleEdgeDelete : undefined })), selectedNode && selectedNodeTypeDefinition && ((0, jsx_runtime_1.jsx)(NodeInfoPanel_1.NodeInfoPanel, { node: selectedNode, typeDefinition: selectedNodeTypeDefinition, availableNodeTypes: configuration.nodeTypes, onClose: onCloseNodeInfoPanel, onDelete: editable ? handleNodeDelete : undefined, onUpdate: editable ? handleNodeUpdate : undefined })), pendingConnection && ((0, jsx_runtime_1.jsxs)("div", { style: {
                     position: 'absolute',
                     top: '50%',
                     left: '50%',
                     transform: 'translate(-50%, -50%)',
-                    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: '200px',
                     zIndex: 1000,
-                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontWeight: 'bold', marginBottom: '12px', fontSize: '14px' }, children: "Select Edge Type" }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: '12px', color: '#666', marginBottom: '12px' }, children: [pendingConnection.from, " \u2192 ", pendingConnection.to] }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: pendingConnection.validTypes.map(type => {
+                    border: `1px solid ${theme.colors.border}`,
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontWeight: 'bold', marginBottom: '12px', fontSize: '14px' }, children: "Select Edge Type" }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: '12px', color: theme.colors.textSecondary, marginBottom: '12px' }, children: [pendingConnection.from, " \u2192 ", pendingConnection.to] }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: pendingConnection.validTypes.map((type) => {
                             const typeDefinition = configuration.edgeTypes[type];
                             return ((0, jsx_runtime_1.jsx)("button", { onClick: () => handleEdgeTypeSelect(type), style: {
                                     padding: '8px 12px',
-                                    backgroundColor: typeDefinition?.color || '#888',
-                                    color: 'white',
+                                    backgroundColor: typeDefinition?.color || theme.colors.secondary,
+                                    color: theme.colors.background,
                                     border: 'none',
                                     borderRadius: '4px',
                                     cursor: 'pointer',
@@ -596,9 +628,9 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
                             marginTop: '12px',
                             width: '100%',
                             padding: '8px 12px',
-                            backgroundColor: '#f0f0f0',
-                            color: '#666',
-                            border: 'none',
+                            backgroundColor: theme.colors.surface,
+                            color: theme.colors.textSecondary,
+                            border: `1px solid ${theme.colors.border}`,
                             borderRadius: '4px',
                             cursor: 'pointer',
                             fontSize: '12px',
@@ -660,11 +692,20 @@ function useCanvasToLegacy(canvas, library) {
             const nodeType = vv?.nodeType || node.type;
             if (!nodeTypes[nodeType]) {
                 // Color priority: vv.fill > node.color > vv.states.idle.color
-                const fillColor = vv?.fill
-                    || (typeof node.color === 'string' ? node.color : undefined)
-                    || vv?.states?.idle?.color;
+                const fillColor = vv?.fill ||
+                    (typeof node.color === 'string' ? node.color : undefined) ||
+                    vv?.states?.idle?.color;
+                // Derive description from text content (everything after line 1) for text nodes
+                let nodeDescription = `${nodeType} node`;
+                if (node.type === 'text' && 'text' in node) {
+                    const lines = node.text.split('\n');
+                    const descFromText = lines.slice(1).join('\n').trim();
+                    if (descFromText) {
+                        nodeDescription = descFromText;
+                    }
+                }
                 nodeTypes[nodeType] = {
-                    description: vv?.description || `${nodeType} node`,
+                    description: nodeDescription,
                     shape: vv?.shape || 'rectangle',
                     icon: vv?.icon,
                     color: fillColor,
@@ -703,8 +744,8 @@ function useCanvasToLegacy(canvas, library) {
                 };
             }
             // Find node types for from/to
-            const fromNode = canvas.nodes?.find(n => n.id === edge.fromNode);
-            const toNode = canvas.nodes?.find(n => n.id === edge.toNode);
+            const fromNode = canvas.nodes?.find((n) => n.id === edge.fromNode);
+            const toNode = canvas.nodes?.find((n) => n.id === edge.toNode);
             const fromType = fromNode?.pv?.nodeType || edge.fromNode;
             const toType = toNode?.pv?.nodeType || edge.toNode;
             allowedConnections.push({
@@ -758,16 +799,12 @@ function useCanvasToLegacy(canvas, library) {
  */
 exports.GraphRenderer = (0, react_1.forwardRef)((props, ref) => {
     const { canvas, library, className, width = '100%', height = '100%' } = props;
+    const { theme } = (0, industry_theme_1.useTheme)();
     // Convert canvas to internal format (merging library types if provided)
     const canvasData = useCanvasToLegacy(canvas, library);
-    // Validate we have required data
-    if (!canvasData) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: className, style: { width, height, display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: (0, jsx_runtime_1.jsx)("p", { style: { color: '#666' }, children: "No canvas data provided." }) }));
-    }
-    const { configuration, nodes, edges } = canvasData;
-    // Internal edit state ref
+    // Internal edit state ref - must be before any conditional returns
     const editStateRef = (0, react_1.useRef)(createEmptyEditState());
-    // Expose imperative handle
+    // Expose imperative handle - must be before any conditional returns
     (0, react_1.useImperativeHandle)(ref, () => ({
         getPendingChanges: () => {
             const state = editStateRef.current;
@@ -781,14 +818,14 @@ exports.GraphRenderer = (0, react_1.forwardRef)((props, ref) => {
                     updates,
                 })),
                 deletedNodeIds: Array.from(state.deletedNodeIds),
-                createdEdges: state.createdEdges.map(e => ({
+                createdEdges: state.createdEdges.map((e) => ({
                     from: e.from,
                     to: e.to,
                     type: e.type,
                     sourceHandle: e.sourceHandle,
                     targetHandle: e.targetHandle,
                 })),
-                deletedEdges: state.deletedEdges.map(e => ({ from: e.from, to: e.to, type: e.type })),
+                deletedEdges: state.deletedEdges.map((e) => ({ from: e.from, to: e.to, type: e.type })),
                 hasChanges: state.positionChanges.size > 0 ||
                     state.nodeUpdates.size > 0 ||
                     state.deletedNodeIds.size > 0 ||
@@ -801,13 +838,26 @@ exports.GraphRenderer = (0, react_1.forwardRef)((props, ref) => {
         },
         hasUnsavedChanges: () => {
             const state = editStateRef.current;
-            return state.positionChanges.size > 0 ||
+            return (state.positionChanges.size > 0 ||
                 state.nodeUpdates.size > 0 ||
                 state.deletedNodeIds.size > 0 ||
                 state.createdEdges.length > 0 ||
-                state.deletedEdges.length > 0;
+                state.deletedEdges.length > 0);
         },
     }), []);
+    // Validate we have required data
+    if (!canvasData) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: className, style: {
+                width,
+                height,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: theme.colors.background,
+                color: theme.colors.textSecondary,
+            }, children: (0, jsx_runtime_1.jsx)("p", { children: "No canvas data provided." }) }));
+    }
+    const { configuration, nodes, edges } = canvasData;
     // Extract only the props that inner component needs
     const { violations, configName, showMinimap, showControls, showBackground, events, onEventProcessed, editable, onPendingChangesChange, } = props;
     return ((0, jsx_runtime_1.jsx)("div", { className: className, style: { width, height, position: 'relative' }, children: (0, jsx_runtime_1.jsx)(react_2.ReactFlowProvider, { children: (0, jsx_runtime_1.jsx)(GraphRendererInner, { configuration: configuration, nodes: nodes, edges: edges, violations: violations, configName: configName, showMinimap: showMinimap, showControls: showControls, showBackground: showBackground, events: events, onEventProcessed: onEventProcessed, editable: editable, onPendingChangesChange: onPendingChangesChange, editStateRef: editStateRef }) }) }));