@principal-ai/principal-view-react 0.13.7 → 0.13.8

package/dist/components/GraphRenderer.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import '@xyflow/react/dist/style.css';
-import type { Violation, GraphEvent, ExtendedCanvas, ComponentLibrary, PVEventSchema } from '@principal-ai/principal-view-core';
+import type { Violation, GraphEvent, ExtendedCanvas, ComponentLibrary } from '@principal-ai/principal-view-core';
 /** Position change event for tracking node movements */
 export interface NodePositionChange {
     nodeId: string;
@@ -138,20 +138,6 @@ interface GraphRendererBaseProps {
      * Receives the node ID and the click event. If provided, overrides default node selection behavior.
      */
     onNodeClick?: (nodeId: string, event: React.MouseEvent) => void;
-    /**
-     * Whether to show the node detail panel when nodes are clicked.
-     * Defaults to undefined (auto), which shows panel only when onNodeClick is not provided.
-     * Set to true to force showing panel even with custom onNodeClick handler.
-     * Set to false to hide panel completely.
-     */
-    showNodeDetailPanel?: boolean;
-    /**
-     * Optional callback to resolve event references to full event schemas.
-     * When a node has an eventRef (string reference like "order.completed"),
-     * this function is called to retrieve the full event definition.
-     * Return undefined if the event reference cannot be resolved.
-     */
-    resolveEventRef?: (eventRef: string) => PVEventSchema | undefined;
     /**
      * When set, fits the viewport to show these specific nodes.
      * Useful for focusing on a subset of the graph (e.g., scenario nodes).

package/dist/components/GraphRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GraphRenderer.d.ts","sourceRoot":"","sources":["../../src/components/GraphRenderer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"GraphRenderer.d.ts","sourceRoot":"","sources":["../../src/components/GraphRenderer.tsx"],"names":[],"mappings":"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"}

package/dist/components/GraphRenderer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo, useState, useEffect, useCallback, useRef, useImperativeHandle, forwardRef, } from 'react';
+import { useMemo, useState, useEffect, useLayoutEffect, useCallback, useRef, useImperativeHandle, forwardRef, } from 'react';
 import { ReactFlow, Background, BackgroundVariant, Controls, MiniMap, ReactFlowProvider, useReactFlow, useUpdateNodeInternals, useViewport, applyNodeChanges, applyEdgeChanges, } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import { CanvasConverter } from '@principal-ai/principal-view-core';
@@ -7,16 +7,14 @@ import { useTheme } from '@principal-ade/industry-theme';
 import { CustomNode } from '../nodes/CustomNode';
 import { CustomEdge } from '../edges/CustomEdge';
 import { convertToXYFlowNodes, convertToXYFlowEdges, } from '../utils/graphConverter';
-import { EdgeInfoPanel } from './EdgeInfoPanel';
-import { NodeInfoPanel } from './NodeInfoPanel';
 // Define custom node types
-const nodeTypes = {
-    custom: CustomNode,
-};
+// Type assertion needed because ReactFlow's NodeTypes expects generic components
+// but CustomNode is properly typed with CustomNodeData for type safety internally
+const nodeTypes = { custom: CustomNode };
 // Define custom edge types
-const edgeTypes = {
-    custom: CustomEdge,
-};
+// Type assertion needed because ReactFlow's EdgeTypes expects generic components
+// but CustomEdge is properly typed with CustomEdgeData for type safety internally
+const edgeTypes = { custom: CustomEdge };
 const createEmptyEditState = () => ({
     positionChanges: new Map(),
     dimensionChanges: new Map(),
@@ -80,7 +78,7 @@ const CenterIndicator = ({ color }) => {
 /**
  * Inner component that uses ReactFlow hooks
  */
-const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges, violations = [], configName: _configName, showMinimap = false, showControls = true, showBackground = true, backgroundVariant = 'lines', backgroundGap, showCenterIndicator = false, showTooltips = true, fitViewDuration = 200, highlightedNodeId, activeNodeIds, events = [], onEventProcessed, editable = false, onPendingChangesChange, onEditStateChange, editStateRef, onNodeClick: onNodeClickProp, showNodeDetailPanel, resolveEventRef, fitViewToNodeIds, fitViewPadding = 0.2, }) => {
+const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges, violations = [], configName: _configName, showMinimap = false, showControls = true, showBackground = true, backgroundVariant = 'lines', backgroundGap, showCenterIndicator = false, showTooltips = true, fitViewDuration = 200, highlightedNodeId, activeNodeIds, events = [], onEventProcessed, editable = false, onPendingChangesChange, onEditStateChange, editStateRef, onNodeClick: onNodeClickProp, fitViewToNodeIds, fitViewPadding = 0.2, }) => {
     const { fitView, fitBounds, getNodes } = useReactFlow();
     const updateNodeInternals = useUpdateNodeInternals();
     const { theme } = useTheme();
@@ -118,21 +116,16 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     const [selectedEdgeIds, setSelectedEdgeIds] = useState(new Set());
     // Track selected nodes for info panel (supports multi-select)
     const [selectedNodeIds, setSelectedNodeIds] = useState(new Set());
-    // Track whether panel should be shown (only on explicit clicks, not after dragging)
-    const [showNodePanel, setShowNodePanel] = useState(false);
-    const [showEdgePanel, setShowEdgePanel] = useState(false);
     // Track hidden nodes (shift-click to toggle)
     const [hiddenNodeIds, setHiddenNodeIds] = useState(new Set());
     // Track pending connection for edge type picker
     const [pendingConnection, setPendingConnection] = useState(null);
-    // Sync highlightedNodeId to selection state so info panel shows
+    // Sync highlightedNodeId to selection state
     useEffect(() => {
         if (highlightedNodeId) {
             setSelectedNodeIds(new Set([highlightedNodeId]));
-            setShowNodePanel(true);
             // Clear edge selection when highlighting a node
             setSelectedEdgeIds(new Set());
-            setShowEdgePanel(false);
         }
     }, [highlightedNodeId]);
     // ============================================
@@ -289,21 +282,17 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
                 }
                 return next;
             });
-            setShowEdgePanel(true);
         }
         else {
             // Regular click: single select (replace selection)
             const shouldDeselect = selectedEdgeIds.size === 1 && selectedEdgeIds.has(edge.id);
             if (shouldDeselect) {
                 setSelectedEdgeIds(new Set());
-                setShowEdgePanel(false);
             }
             else {
                 setSelectedEdgeIds(new Set([edge.id]));
-                setShowEdgePanel(true);
             }
             setSelectedNodeIds(new Set());
-            setShowNodePanel(false);
         }
     }, [editable, selectedEdgeIds]);
     // Handle node click (toggle selection, supports Cmd/Ctrl for hide/dim)
@@ -342,33 +331,24 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
                 else {
                     next.add(node.id);
                 }
-                // Also update local nodes selection state immediately
+                // Update local nodes selection state immediately for edit mode
                 if (editable) {
                     setXyflowLocalNodes((nodes) => nodes.map((n) => ({
                         ...n,
-                        selected: n.id === node.id ? !prev.has(node.id) : next.has(n.id),
+                        selected: next.has(n.id),
                     })));
                 }
                 return next;
             });
             return;
         }
-        // Determine if we should show the panel based on showNodeDetailPanel prop
-        const shouldShowPanel = showNodeDetailPanel !== false && (showNodeDetailPanel === true || !onNodeClickProp);
-        // If custom node click handler is provided, call it
-        if (onNodeClickProp) {
-            onNodeClickProp(node.id, event);
-            // If showNodeDetailPanel is not explicitly true, return early (old behavior)
-            if (showNodeDetailPanel !== true) {
-                return;
-            }
-        }
         // Regular click: single select (replace selection)
+        event.preventDefault();
+        event.stopPropagation();
         const shouldDeselect = selectedNodeIds.size === 1 && selectedNodeIds.has(node.id);
         if (shouldDeselect) {
             setSelectedNodeIds(new Set());
-            setShowNodePanel(false);
-            // Also update local nodes selection state immediately
+            // Update local nodes selection state immediately for edit mode
             if (editable) {
                 setXyflowLocalNodes((nodes) => nodes.map((n) => ({
                     ...n,
@@ -378,10 +358,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         }
         else {
             setSelectedNodeIds(new Set([node.id]));
-            if (shouldShowPanel) {
-                setShowNodePanel(true);
-            }
-            // Also update local nodes selection state immediately
+            // Update local nodes selection state immediately for edit mode
             if (editable) {
                 setXyflowLocalNodes((nodes) => nodes.map((n) => ({
                     ...n,
@@ -390,152 +367,64 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             }
         }
         setSelectedEdgeIds(new Set());
-        setShowEdgePanel(false);
-    }, [selectedNodeIds, onNodeClickProp, showNodeDetailPanel, editable]);
-    // Handle close edge info panel
-    const onCloseEdgeInfoPanel = useCallback(() => {
-        setSelectedEdgeIds(new Set());
-        setShowEdgePanel(false);
-    }, []);
-    // Handle edge side updates from EdgeInfoPanel
-    const handleUpdateEdgeSides = useCallback((edgeId, fromSide, toSide) => {
-        setLocalEdges((currentEdges) => currentEdges.map((edge) => edge.id === edgeId
-            ? {
-                ...edge,
-                data: {
-                    ...edge.data,
-                    fromSide,
-                    toSide,
-                },
-            }
-            : edge));
-    }, []);
-    // Handle close node info panel
-    const onCloseNodeInfoPanel = useCallback(() => {
-        setSelectedNodeIds(new Set());
-        setShowNodePanel(false);
-    }, []);
+        // If custom node click handler is provided, call it after selection is updated
+        if (onNodeClickProp) {
+            onNodeClickProp(node.id, event);
+        }
+    }, [selectedNodeIds, onNodeClickProp, editable]);
     // Handle pane click (clear selection when clicking empty space)
     const onPaneClick = useCallback(() => {
         setSelectedNodeIds(new Set());
         setSelectedEdgeIds(new Set());
-        setShowNodePanel(false);
-        setShowEdgePanel(false);
-    }, []);
+        // In edit mode, also update local nodes selection state
+        if (editable) {
+            setXyflowLocalNodes((nodes) => nodes.map((n) => ({
+                ...n,
+                selected: false,
+            })));
+        }
+    }, [editable]);
     // Handle selection change from ReactFlow (box selection and clicks)
     const handleSelectionChange = useCallback(({ nodes: selectedNodes, edges: selectedEdges }) => {
         // Ignore selection changes when we're hiding a node
         if (hidingNodeRef.current) {
             return;
         }
-        // Always update selection state, even in read-only mode (for visual feedback)
-        setSelectedNodeIds(new Set(selectedNodes.map((n) => n.id)));
-        setSelectedEdgeIds(new Set(selectedEdges.map((e) => e.id)));
-        // Only show panels in edit mode or when explicitly enabled
+        // In edit mode, we manage selection ourselves via onNodeClick
+        // Skip handleSelectionChange to avoid ReactFlow overwriting our selection state
         if (editable) {
-            // Box selection is an explicit action, so show panels
-            if (selectedNodes.length > 0) {
-                setShowNodePanel(true);
-            }
-            if (selectedEdges.length > 0) {
-                setShowEdgePanel(true);
-            }
+            return;
         }
+        const newSelectedNodeIds = new Set(selectedNodes.map((n) => n.id));
+        // Update selection state for read-only mode (for visual feedback)
+        setSelectedNodeIds(newSelectedNodeIds);
+        setSelectedEdgeIds(new Set(selectedEdges.map((e) => e.id)));
     }, [editable]);
-    // Handle node update (internal - updates local state only)
-    const handleNodeUpdate = useCallback((nodeId, updates) => {
-        if (!editable)
-            return;
-        // Update local nodes
-        setLocalNodes((prev) => prev.map((node) => {
-            if (node.id === nodeId) {
-                return {
-                    ...node,
-                    type: updates.type ?? node.type,
-                    data: updates.data ? { ...node.data, ...updates.data } : node.data,
-                };
-            }
-            return node;
-        }));
-        // Track the change
-        updateEditState((prev) => {
-            const newUpdates = new Map(prev.nodeUpdates);
-            const existing = newUpdates.get(nodeId) || {};
-            newUpdates.set(nodeId, {
-                type: updates.type ?? existing.type,
-                data: updates.data ? { ...existing.data, ...updates.data } : existing.data,
-            });
-            return { ...prev, nodeUpdates: newUpdates };
-        });
-    }, [editable, updateEditState]);
-    // Handle node delete (internal)
-    const handleNodeDelete = useCallback((nodeId) => {
-        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));
-        // Track the change
-        updateEditState((prev) => {
-            const newDeletedNodes = new Set(prev.deletedNodeIds);
-            newDeletedNodes.add(nodeId);
-            // Remove any pending updates for this node
-            const newUpdates = new Map(prev.nodeUpdates);
-            newUpdates.delete(nodeId);
-            // Remove any position changes for this node
-            const newPositions = new Map(prev.positionChanges);
-            newPositions.delete(nodeId);
-            // Remove any dimension changes for this node
-            const newDimensions = new Map(prev.dimensionChanges);
-            newDimensions.delete(nodeId);
-            // Remove created edges that involve this node
-            const newCreatedEdges = prev.createdEdges.filter((e) => e.from !== nodeId && e.to !== nodeId);
-            return {
-                ...prev,
-                deletedNodeIds: newDeletedNodes,
-                nodeUpdates: newUpdates,
-                positionChanges: newPositions,
-                dimensionChanges: newDimensions,
-                createdEdges: newCreatedEdges,
-            };
-        });
-        setSelectedNodeIds(new Set());
-    }, [editable, updateEditState]);
-    // Handle edge delete (internal)
-    const handleEdgeDelete = useCallback((edgeId) => {
-        if (!editable)
-            return;
-        // Find the edge before removing it so we can track its full info
-        const edgeToDelete = localEdges.find((e) => e.id === edgeId);
-        // Remove from local state
-        setLocalEdges((prev) => prev.filter((e) => e.id !== edgeId));
+    // Create edge helper
+    const createEdge = useCallback((from, to, type, sourceHandle, targetHandle) => {
+        const edgeId = `${from}-${to}-${type}-${Date.now()}`;
+        // Add to local state with handle information
+        const newEdge = {
+            id: edgeId,
+            type,
+            from,
+            to,
+            data: {},
+            createdAt: Date.now(),
+            updatedAt: Date.now(),
+            sourceHandle,
+            targetHandle,
+        };
+        setLocalEdges((prev) => [...prev, newEdge]);
         // Track the change
-        updateEditState((prev) => {
-            // Check if this was a newly created edge
-            const createdEdgeIndex = prev.createdEdges.findIndex((e) => e.id === edgeId);
-            if (createdEdgeIndex >= 0) {
-                // Just remove it from created edges
-                const newCreatedEdges = [...prev.createdEdges];
-                newCreatedEdges.splice(createdEdgeIndex, 1);
-                return { ...prev, createdEdges: newCreatedEdges };
-            }
-            // Otherwise mark as deleted with full edge info
-            if (edgeToDelete) {
-                const newDeletedEdges = [
-                    ...prev.deletedEdges,
-                    {
-                        id: edgeId,
-                        from: edgeToDelete.from,
-                        to: edgeToDelete.to,
-                        type: edgeToDelete.type,
-                    },
-                ];
-                return { ...prev, deletedEdges: newDeletedEdges };
-            }
-            return prev;
-        });
-        setSelectedEdgeIds(new Set());
-    }, [editable, updateEditState, localEdges]);
+        updateEditState((prev) => ({
+            ...prev,
+            createdEdges: [
+                ...prev.createdEdges,
+                { id: edgeId, from, to, type, sourceHandle, targetHandle },
+            ],
+        }));
+    }, [updateEditState]);
     // Handle new connection from drag
     const handleConnect = useCallback((connection) => {
         if (!editable || !connection.source || !connection.target)
@@ -568,32 +457,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
                 validTypes: uniqueTypes,
             });
         }
-    }, [editable, nodes, configuration.allowedConnections]);
-    // Create edge helper
-    const createEdge = useCallback((from, to, type, sourceHandle, targetHandle) => {
-        const edgeId = `${from}-${to}-${type}-${Date.now()}`;
-        // Add to local state with handle information
-        const newEdge = {
-            id: edgeId,
-            type,
-            from,
-            to,
-            data: {},
-            createdAt: Date.now(),
-            updatedAt: Date.now(),
-            sourceHandle,
-            targetHandle,
-        };
-        setLocalEdges((prev) => [...prev, newEdge]);
-        // Track the change
-        updateEditState((prev) => ({
-            ...prev,
-            createdEdges: [
-                ...prev.createdEdges,
-                { id: edgeId, from, to, type, sourceHandle, targetHandle },
-            ],
-        }));
-    }, [updateEditState]);
+    }, [editable, nodes, configuration.allowedConnections, createEdge]);
     // Handle edge type selection from picker
     const handleEdgeTypeSelect = useCallback((type) => {
         if (!pendingConnection)
@@ -731,37 +595,6 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     // SELECTED ITEMS
     // ============================================
     // Get first selected edge (for single-selection info panel)
-    const selectedEdgeId = useMemo(() => {
-        if (selectedEdgeIds.size === 0)
-            return null;
-        return selectedEdgeIds.values().next().value;
-    }, [selectedEdgeIds]);
-    const selectedEdge = useMemo(() => {
-        if (!selectedEdgeId)
-            return null;
-        return edges.find((e) => e.id === selectedEdgeId);
-    }, [selectedEdgeId, edges]);
-    const selectedEdgeTypeDefinition = useMemo(() => {
-        if (!selectedEdge)
-            return null;
-        return configuration.edgeTypes[selectedEdge.type];
-    }, [selectedEdge, configuration.edgeTypes]);
-    // Get first selected node (for single-selection info panel)
-    const selectedNodeId = useMemo(() => {
-        if (selectedNodeIds.size === 0)
-            return null;
-        return selectedNodeIds.values().next().value;
-    }, [selectedNodeIds]);
-    const selectedNode = useMemo(() => {
-        if (!selectedNodeId)
-            return null;
-        return nodes.find((n) => n.id === selectedNodeId);
-    }, [selectedNodeId, nodes]);
-    const selectedNodeTypeDefinition = useMemo(() => {
-        if (!selectedNode)
-            return null;
-        return configuration.nodeTypes[selectedNode.type];
-    }, [selectedNode, configuration.nodeTypes]);
     // ============================================
     // ANIMATIONS
     // ============================================
@@ -902,7 +735,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     }, [edges]);
     // Local xyflow nodes state for dragging
     const [xyflowLocalNodes, setXyflowLocalNodes] = useState(xyflowNodesBase);
-    // Sync when base changes
+    // Sync when base node IDs change
     const prevBaseNodesKeyRef = useRef(baseNodesKey);
     useEffect(() => {
         if (prevBaseNodesKeyRef.current !== baseNodesKey) {
@@ -910,6 +743,20 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             setXyflowLocalNodes(xyflowNodesBase);
         }
     }, [baseNodesKey, xyflowNodesBase]);
+    // Sync selection state to local nodes when selectedNodeIds changes (edit mode only)
+    // Use useLayoutEffect to ensure sync happens before paint (prevents flash)
+    const prevSelectedNodeIdsRef = useRef(selectedNodeIds);
+    useLayoutEffect(() => {
+        if (!editable)
+            return;
+        if (prevSelectedNodeIdsRef.current === selectedNodeIds)
+            return;
+        prevSelectedNodeIdsRef.current = selectedNodeIds;
+        setXyflowLocalNodes((localNodes) => localNodes.map((localNode) => ({
+            ...localNode,
+            selected: selectedNodeIds.has(localNode.id),
+        })));
+    }, [editable, selectedNodeIds]);
     // Also sync when entering edit mode or when base nodes change content
     const prevEditableRef = useRef(editable);
     useEffect(() => {
@@ -942,14 +789,19 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     const handleNodesChange = useCallback((changes) => {
         if (!editable)
             return;
-        setXyflowLocalNodes((nds) => applyNodeChanges(changes, nds));
-        // Check if dragging started - hide panel when dragging starts
-        const hasDragging = changes.some((change) => change.type === 'position' &&
-            'dragging' in change &&
-            change.dragging === true);
-        if (hasDragging) {
-            // Hide panel when dragging starts - it won't show again until an explicit click
-            setShowNodePanel(false);
+        // Filter out selection changes - we manage selection ourselves via selectedNodeIds
+        const nonSelectionChanges = changes.filter((change) => change.type !== 'select');
+        // Only apply changes if there are non-selection changes to apply
+        if (nonSelectionChanges.length > 0) {
+            setXyflowLocalNodes((nds) => {
+                // Apply changes but preserve our selection state
+                const updated = applyNodeChanges(nonSelectionChanges, nds);
+                // Restore selection state from our managed selectedNodeIds
+                return updated.map((node) => ({
+                    ...node,
+                    selected: selectedNodeIds.has(node.id),
+                }));
+            });
         }
         // Track position changes on drag end
         const positionChanges = changes.filter((change) => change.type === 'position' &&
@@ -963,22 +815,6 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             change.dimensions !== undefined &&
             'resizing' in change &&
             change.resizing === false);
-        // Debug logging for dimension changes
-        if (process.env.NODE_ENV === 'development') {
-            const allDimensionChanges = changes.filter(c => c.type === 'dimensions');
-            if (allDimensionChanges.length > 0) {
-                console.log('[GraphRenderer] Dimension changes detected:', allDimensionChanges.map(c => ({
-                    // @ts-expect-error - accessing properties for debug
-                    id: c.id,
-                    // @ts-expect-error - accessing properties for debug
-                    dimensions: c.dimensions,
-                    // @ts-expect-error - accessing properties for debug
-                    resizing: c.resizing,
-                    // @ts-expect-error - accessing properties for debug
-                    isGroup: nodes.find(n => n.id === c.id)?.data?.canvasType === 'group'
-                })));
-            }
-        }
         if (dimensionChanges.length > 0) {
             updateEditState((prev) => {
                 const newDimensions = new Map(prev.dimensionChanges);
@@ -1005,7 +841,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
                 return { ...prev, positionChanges: newPositions };
             });
         }
-    }, [editable, updateEditState]);
+    }, [editable, updateEditState, selectedNodeIds]);
     const xyflowEdgesBase = useMemo(() => {
         const converted = convertToXYFlowEdges(edges, configuration, violations);
         // Filter out edges connected to inactive or hidden nodes
@@ -1024,17 +860,6 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             }
             return true;
         });
-        // Debug: Log edge counts to help diagnose disappearing edges
-        if (process.env.NODE_ENV === 'development') {
-            console.log('[GraphRenderer] xyflowEdges computed:', {
-                inputEdges: edges.length,
-                convertedEdges: converted.length,
-                filteredEdges: filtered.length,
-                editable,
-                propEdgesCount: propEdges.length,
-                localEdgesCount: localEdges.length,
-            });
-        }
         const mappedEdges = filtered.map((edge) => {
             const animation = animationState.edgeAnimations[edge.id];
             const isSelected = selectedEdgeIds.has(edge.id);
@@ -1139,18 +964,18 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             }
         }, 150);
         return () => clearTimeout(timeoutId);
-    }, [fitViewToNodeIdsKey, fitViewToNodeIds, fitViewPadding, fitView, fitViewDuration, getNodes]);
+    }, [fitViewToNodeIdsKey, fitViewToNodeIds, fitViewPadding, fitView, fitViewDuration, getNodes, fitBounds]);
     // ============================================
     // RENDER
     // ============================================
-    return (_jsxs(_Fragment, { children: [_jsxs(ReactFlow, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, minZoom: 0.1, maxZoom: 4, defaultEdgeOptions: { type: 'custom' }, onEdgeClick: onEdgeClick, onNodeClick: onNodeClick, onNodeDrag: handleNodeDrag, onNodeDragStop: handleNodeDragStop, proOptions: { hideAttribution: true }, nodesDraggable: editable, elementsSelectable: true, nodesConnectable: editable, edgesReconnectable: editable, reconnectRadius: 25, elevateEdgesOnSelect: true, onNodesChange: handleNodesChange, onEdgesChange: handleEdgesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, onPaneClick: onPaneClick, onSelectionChange: handleSelectionChange, panOnDrag: false, panOnScroll: true, zoomOnScroll: false, zoomOnPinch: true, selectionOnDrag: true, selectionKeyCode: null, multiSelectionKeyCode: null, children: [showBackground && (_jsx(Background, { color: backgroundVariant === 'dots' ? theme.colors.border : theme.colors.textMuted, gap: backgroundGap ?? (backgroundVariant === 'dots' ? 16 : 50), size: backgroundVariant === 'dots' ? 1 : 0.5, variant: backgroundVariant === 'dots'
+    return (_jsxs(_Fragment, { children: [_jsxs(ReactFlow, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, minZoom: 0.1, maxZoom: 4, defaultEdgeOptions: { type: 'custom' }, onEdgeClick: onEdgeClick, onNodeClick: onNodeClick, onNodeDrag: handleNodeDrag, onNodeDragStop: handleNodeDragStop, proOptions: { hideAttribution: true }, nodesDraggable: editable, elementsSelectable: editable, selectNodesOnDrag: false, nodesConnectable: editable, edgesReconnectable: editable, reconnectRadius: 25, elevateEdgesOnSelect: true, onNodesChange: handleNodesChange, onEdgesChange: handleEdgesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, onPaneClick: onPaneClick, onSelectionChange: handleSelectionChange, panOnDrag: !editable, panOnScroll: true, zoomOnScroll: false, zoomOnPinch: true, selectionOnDrag: false, selectionKeyCode: null, multiSelectionKeyCode: "Shift", children: [showBackground && (_jsx(Background, { color: backgroundVariant === 'dots' ? theme.colors.border : theme.colors.textMuted, gap: backgroundGap ?? (backgroundVariant === 'dots' ? 16 : 50), size: backgroundVariant === 'dots' ? 1 : 0.5, variant: backgroundVariant === 'dots'
                             ? BackgroundVariant.Dots
                             : backgroundVariant === 'lines'
                                 ? BackgroundVariant.Lines
                                 : BackgroundVariant.Cross })), showControls && _jsx(Controls, { showZoom: true, showFitView: true, showInteractive: true }), showMinimap && (_jsx(MiniMap, { nodeColor: (node) => {
                             const nodeData = node.data;
                             return nodeData?.typeDefinition?.color || theme.colors.secondary;
-                        }, nodeBorderRadius: 2, pannable: true, zoomable: true })), showCenterIndicator && _jsx(CenterIndicator, { color: theme.colors.textMuted }), editable && alignmentGuides.length > 0 && (_jsx(AlignmentGuidesOverlay, { guides: alignmentGuides, color: theme.colors.primary }))] }, `${baseNodesKey}-${baseEdgesKey}`), selectedEdgeIds.size === 1 && selectedEdge && selectedEdgeTypeDefinition && showEdgePanel && (_jsx(EdgeInfoPanel, { edge: selectedEdge, typeDefinition: selectedEdgeTypeDefinition, sourceNodeId: selectedEdge.from, targetNodeId: selectedEdge.to, onClose: onCloseEdgeInfoPanel, onDelete: editable ? handleEdgeDelete : undefined, onUpdateSides: editable ? handleUpdateEdgeSides : undefined })), selectedNodeIds.size === 1 && selectedNode && selectedNodeTypeDefinition && showNodePanel && showNodeDetailPanel !== false && (_jsx(NodeInfoPanel, { node: selectedNode, typeDefinition: selectedNodeTypeDefinition, availableNodeTypes: configuration.nodeTypes, onClose: onCloseNodeInfoPanel, onDelete: editable ? handleNodeDelete : undefined, onUpdate: editable ? handleNodeUpdate : undefined, resolveEventRef: resolveEventRef })), pendingConnection && (_jsxs("div", { style: {
+                        }, nodeBorderRadius: 2, pannable: true, zoomable: true })), showCenterIndicator && _jsx(CenterIndicator, { color: theme.colors.textMuted }), editable && alignmentGuides.length > 0 && (_jsx(AlignmentGuidesOverlay, { guides: alignmentGuides, color: theme.colors.primary }))] }, `${baseNodesKey}-${baseEdgesKey}`), pendingConnection && (_jsxs("div", { style: {
                     position: 'absolute',
                     top: '50%',
                     left: '50%',
@@ -1423,8 +1248,8 @@ export const GraphRenderer = forwardRef((props, ref) => {
     }
     const { configuration, nodes, edges } = canvasData;
     // Extract only the props that inner component needs
-    const { violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, highlightedNodeId, activeNodeIds, events, onEventProcessed, editable, onPendingChangesChange, onNodeClick, showNodeDetailPanel, resolveEventRef, fitViewToNodeIds, fitViewPadding, } = props;
-    return (_jsx("div", { className: className, style: { width, height, position: 'relative' }, children: _jsx(ReactFlowProvider, { children: _jsx(GraphRendererInner, { configuration: configuration, nodes: nodes, edges: edges, violations: violations, configName: configName, showMinimap: showMinimap, showControls: showControls, showBackground: showBackground, backgroundVariant: backgroundVariant, backgroundGap: backgroundGap, showCenterIndicator: showCenterIndicator, showTooltips: showTooltips, fitViewDuration: fitViewDuration, highlightedNodeId: highlightedNodeId, activeNodeIds: activeNodeIds, events: events, onEventProcessed: onEventProcessed, editable: editable, onPendingChangesChange: onPendingChangesChange, editStateRef: editStateRef, onNodeClick: onNodeClick, showNodeDetailPanel: showNodeDetailPanel, resolveEventRef: resolveEventRef, fitViewToNodeIds: fitViewToNodeIds, fitViewPadding: fitViewPadding }) }) }));
+    const { violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, highlightedNodeId, activeNodeIds, events, onEventProcessed, editable, onPendingChangesChange, onNodeClick, fitViewToNodeIds, fitViewPadding, } = props;
+    return (_jsx("div", { className: className, style: { width, height, position: 'relative' }, children: _jsx(ReactFlowProvider, { children: _jsx(GraphRendererInner, { configuration: configuration, nodes: nodes, edges: edges, violations: violations, configName: configName, showMinimap: showMinimap, showControls: showControls, showBackground: showBackground, backgroundVariant: backgroundVariant, backgroundGap: backgroundGap, showCenterIndicator: showCenterIndicator, showTooltips: showTooltips, fitViewDuration: fitViewDuration, highlightedNodeId: highlightedNodeId, activeNodeIds: activeNodeIds, events: events, onEventProcessed: onEventProcessed, editable: editable, onPendingChangesChange: onPendingChangesChange, editStateRef: editStateRef, onNodeClick: onNodeClick, fitViewToNodeIds: fitViewToNodeIds, fitViewPadding: fitViewPadding }) }) }));
 });
 GraphRenderer.displayName = 'GraphRenderer';
 //# sourceMappingURL=GraphRenderer.js.map