@railtownai/railtracks-visualizer 0.0.33 → 0.0.35

package/dist/cjs/index.js

@@ -3358,27 +3358,25 @@ const getNodePositionWithOrigin = (node, nodeOrigin = [
  * Determines a bounding box that contains all given nodes in an array
  * @internal
  */ const getInternalNodesBounds = (nodeLookup, params = {})=>{
-    if (nodeLookup.size === 0) {
-        return {
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0
-        };
-    }
     let box = {
         x: Infinity,
         y: Infinity,
         x2: -Infinity,
         y2: -Infinity
     };
+    let hasVisibleNodes = false;
     nodeLookup.forEach((node)=>{
         if (params.filter === undefined || params.filter(node)) {
-            const nodeBox = nodeToBox(node);
-            box = getBoundsOfBoxes(box, nodeBox);
+            box = getBoundsOfBoxes(box, nodeToBox(node));
+            hasVisibleNodes = true;
         }
     });
-    return boxToRect(box);
+    return hasVisibleNodes ? boxToRect(box) : {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0
+    };
 };
 const getNodesInside = (nodes, rect, [tx, ty, tScale] = [
     0,
@@ -4123,7 +4121,7 @@ function getEdgeCenter({ sourceX, sourceY, targetX, targetY }) {
         return zIndex;
     }
     const edgeZ = elevateOnSelect && selected ? 1000 : 0;
-    const nodeZ = Math.max(sourceNode.parentId ? sourceNode.internals.z : 0, targetNode.parentId ? targetNode.internals.z : 0);
+    const nodeZ = Math.max(sourceNode.parentId || elevateOnSelect && sourceNode.selected ? sourceNode.internals.z : 0, targetNode.parentId || elevateOnSelect && targetNode.selected ? targetNode.internals.z : 0);
     return edgeZ + nodeZ;
 }
 function isEdgeVisible({ sourceNode, targetNode, width, height, transform }) {
@@ -4639,6 +4637,8 @@ function createMarkerIds(edges, { id, defaultColor, defaultMarkerStart, defaultM
         return markers;
     }, []).sort((a, b)=>a.id.localeCompare(b.id));
 }
+const SELECTED_NODE_Z = 1000;
+const ROOT_PARENT_Z_INCREMENT = 10;
 const defaultOptions = {
     nodeOrigin: [
         0,
@@ -4677,11 +4677,42 @@ function updateAbsolutePositions(nodeLookup, parentLookup, options) {
         }
     }
 }
+function parseHandles(userNode, internalNode) {
+    if (!userNode.handles) {
+        return !userNode.measured ? undefined : internalNode?.internals.handleBounds;
+    }
+    const source = [];
+    const target = [];
+    for (const handle of userNode.handles){
+        const handleBounds = {
+            id: handle.id,
+            width: handle.width ?? 1,
+            height: handle.height ?? 1,
+            nodeId: userNode.id,
+            x: handle.x,
+            y: handle.y,
+            position: handle.position,
+            type: handle.type
+        };
+        if (handle.type === 'source') {
+            source.push(handleBounds);
+        } else if (handle.type === 'target') {
+            target.push(handleBounds);
+        }
+    }
+    return {
+        source,
+        target
+    };
+}
 function adoptUserNodes(nodes, nodeLookup, parentLookup, options) {
     const _options = mergeObjects(adoptUserNodesDefaultOptions, options);
+    let rootParentIndex = {
+        i: -1
+    };
     let nodesInitialized = nodes.length > 0;
     const tmpLookup = new Map(nodeLookup);
-    const selectedNodeZ = _options?.elevateNodesOnSelect ? 1000 : 0;
+    const selectedNodeZ = _options?.elevateNodesOnSelect ? SELECTED_NODE_Z : 0;
     nodeLookup.clear();
     parentLookup.clear();
     for (const userNode of nodes){
@@ -4702,7 +4733,7 @@ function adoptUserNodes(nodes, nodeLookup, parentLookup, options) {
                 internals: {
                     positionAbsolute: clampedPosition,
                     // if user re-initializes the node or removes `measured` for whatever reason, we reset the handleBounds so that the node gets re-measured
-                    handleBounds: !userNode.measured ? undefined : internalNode?.internals.handleBounds,
+                    handleBounds: parseHandles(userNode, internalNode),
                     z: calculateZ(userNode, selectedNodeZ),
                     userNode
                 }
@@ -4713,7 +4744,7 @@ function adoptUserNodes(nodes, nodeLookup, parentLookup, options) {
             nodesInitialized = false;
         }
         if (userNode.parentId) {
-            updateChildNode(internalNode, nodeLookup, parentLookup, options);
+            updateChildNode(internalNode, nodeLookup, parentLookup, options, rootParentIndex);
         }
     }
     return nodesInitialized;
@@ -4736,7 +4767,7 @@ function updateParentLookup(node, parentLookup) {
 }
 /**
  * Updates positionAbsolute and zIndex of a child node and the parentLookup.
- */ function updateChildNode(node, nodeLookup, parentLookup, options) {
+ */ function updateChildNode(node, nodeLookup, parentLookup, options, rootParentIndex) {
     const { elevateNodesOnSelect, nodeOrigin, nodeExtent } = mergeObjects(defaultOptions, options);
     const parentId = node.parentId;
     const parentNode = nodeLookup.get(parentId);
@@ -4745,7 +4776,16 @@ function updateParentLookup(node, parentLookup) {
         return;
     }
     updateParentLookup(node, parentLookup);
-    const selectedNodeZ = elevateNodesOnSelect ? 1000 : 0;
+    // We just want to set the rootParentIndex for the first child
+    if (rootParentIndex && !parentNode.parentId && parentNode.internals.rootParentIndex === undefined) {
+        parentNode.internals.rootParentIndex = ++rootParentIndex.i;
+        parentNode.internals.z = parentNode.internals.z + rootParentIndex.i * ROOT_PARENT_Z_INCREMENT;
+    }
+    // But we need to update rootParentIndex.i also when parent has not been updated
+    if (rootParentIndex && parentNode.internals.rootParentIndex !== undefined) {
+        rootParentIndex.i = parentNode.internals.rootParentIndex;
+    }
+    const selectedNodeZ = elevateNodesOnSelect ? SELECTED_NODE_Z : 0;
     const { x, y, z } = calculateChildXYZ(node, parentNode, nodeOrigin, nodeExtent, selectedNodeZ);
     const { positionAbsolute } = node.internals;
     const positionChanged = x !== positionAbsolute.x || y !== positionAbsolute.y;
@@ -5319,8 +5359,10 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
                 autoPan();
             }
             if (!dragStarted) {
-                const x = pointerPos.xSnapped - (lastPos.x ?? 0);
-                const y = pointerPos.ySnapped - (lastPos.y ?? 0);
+                // Calculate distance in client coordinates for consistent drag threshold behavior across zoom levels
+                const currentMousePosition = getEventPosition(event.sourceEvent, containerBounds);
+                const x = currentMousePosition.x - mousePosition.x;
+                const y = currentMousePosition.y - mousePosition.y;
                 const distance = Math.sqrt(x * x + y * y);
                 if (distance > nodeDragThreshold) {
                     startDrag(event);
@@ -5604,6 +5646,10 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
         previousConnection = newConnection;
     }
     function onPointerUp(event) {
+        // Prevent multi-touch aborting connection
+        if ('touches' in event && event.touches.length > 0) {
+            return;
+        }
         if (connectionStarted) {
             if ((closestHandle || resultHandleDomNode) && connection && isValid) {
                 onConnect?.(connection);
@@ -5761,8 +5807,7 @@ function XYMinimap({ domNode, panZoom, getTransform, getViewScale }) {
         pointer
     };
 }
-/* eslint-disable @typescript-eslint/no-explicit-any */ const viewChanged = (prevViewport, eventViewport)=>prevViewport.x !== eventViewport.x || prevViewport.y !== eventViewport.y || prevViewport.zoom !== eventViewport.k;
-const transformToViewport = (transform)=>({
+/* eslint-disable @typescript-eslint/no-explicit-any */ const transformToViewport = (transform)=>({
         x: transform.x,
         y: transform.y,
         zoom: transform.k
@@ -5786,6 +5831,9 @@ const wheelDelta = (event)=>{
 function createPanOnScrollHandler({ zoomPanValues, noWheelClassName, d3Selection, d3Zoom, panOnScrollMode, panOnScrollSpeed, zoomOnPinch, onPanZoomStart, onPanZoom, onPanZoomEnd }) {
     return (event)=>{
         if (isWrappedWithClass(event, noWheelClassName)) {
+            if (event.ctrlKey) {
+                event.preventDefault(); // stop native page zoom for pinch zooming
+            }
             return false;
         }
         event.preventDefault();
@@ -5824,8 +5872,7 @@ function createPanOnScrollHandler({ zoomPanValues, noWheelClassName, d3Selection
          */ if (!zoomPanValues.isPanScrolling) {
             zoomPanValues.isPanScrolling = true;
             onPanZoomStart?.(event, nextViewport);
-        }
-        if (zoomPanValues.isPanScrolling) {
+        } else {
             onPanZoom?.(event, nextViewport);
             zoomPanValues.panScrollTimeout = setTimeout(()=>{
                 onPanZoomEnd?.(event, nextViewport);
@@ -5895,7 +5942,7 @@ function createPanZoomEndHandler({ zoomPanValues, panOnDrag, panOnScroll, onDrag
         }
         zoomPanValues.usedRightMouseButton = false;
         onDraggingChange(false);
-        if (onPanZoomEnd && viewChanged(zoomPanValues.prevViewport, event.transform)) {
+        if (onPanZoomEnd) {
             const viewport = transformToViewport(event.transform);
             zoomPanValues.prevViewport = viewport;
             clearTimeout(zoomPanValues.timerId);
@@ -5906,10 +5953,11 @@ function createPanZoomEndHandler({ zoomPanValues, panOnDrag, panOnScroll, onDrag
         }
     };
 }
-/* eslint-disable @typescript-eslint/no-explicit-any */ function createFilter({ zoomActivationKeyPressed, zoomOnScroll, zoomOnPinch, panOnDrag, panOnScroll, zoomOnDoubleClick, userSelectionActive, noWheelClassName, noPanClassName, lib }) {
+/* eslint-disable @typescript-eslint/no-explicit-any */ function createFilter({ zoomActivationKeyPressed, zoomOnScroll, zoomOnPinch, panOnDrag, panOnScroll, zoomOnDoubleClick, userSelectionActive, noWheelClassName, noPanClassName, lib, connectionInProgress }) {
     return (event)=>{
         const zoomScroll = zoomActivationKeyPressed || zoomOnScroll;
         const pinchZoom = zoomOnPinch && event.ctrlKey;
+        const isWheelEvent = event.type === 'wheel';
         if (event.button === 1 && event.type === 'mousedown' && (isWrappedWithClass(event, `${lib}-flow__node`) || isWrappedWithClass(event, `${lib}-flow__edge`))) {
             return true;
         }
@@ -5921,15 +5969,19 @@ function createPanZoomEndHandler({ zoomPanValues, panOnDrag, panOnScroll, onDrag
         if (userSelectionActive) {
             return false;
         }
+        // we want to disable pinch-zooming while making a connection
+        if (connectionInProgress && !isWheelEvent) {
+            return false;
+        }
         // if the target element is inside an element with the nowheel class, we prevent zooming
-        if (isWrappedWithClass(event, noWheelClassName) && event.type === 'wheel') {
+        if (isWrappedWithClass(event, noWheelClassName) && isWheelEvent) {
             return false;
         }
         // if the target element is inside an element with the nopan class, we prevent panning
-        if (isWrappedWithClass(event, noPanClassName) && (event.type !== 'wheel' || panOnScroll && event.type === 'wheel' && !zoomActivationKeyPressed)) {
+        if (isWrappedWithClass(event, noPanClassName) && (!isWheelEvent || panOnScroll && isWheelEvent && !zoomActivationKeyPressed)) {
             return false;
         }
-        if (!zoomOnPinch && event.ctrlKey && event.type === 'wheel') {
+        if (!zoomOnPinch && event.ctrlKey && isWheelEvent) {
             return false;
         }
         if (!zoomOnPinch && event.type === 'touchstart' && event.touches?.length > 1) {
@@ -5937,7 +5989,7 @@ function createPanZoomEndHandler({ zoomPanValues, panOnDrag, panOnScroll, onDrag
             return false;
         }
         // when there is no scroll handling enabled, we prevent all wheel events
-        if (!zoomScroll && !panOnScroll && !pinchZoom && event.type === 'wheel') {
+        if (!zoomScroll && !panOnScroll && !pinchZoom && isWheelEvent) {
             return false;
         }
         // if the pane is not movable, we prevent dragging it with mousestart or touchstart
@@ -5951,7 +6003,7 @@ function createPanZoomEndHandler({ zoomPanValues, panOnDrag, panOnScroll, onDrag
         // We only allow right clicks if pan on drag is set to right click
         const buttonAllowed = Array.isArray(panOnDrag) && panOnDrag.includes(event.button) || !event.button || event.button <= 1;
         // default filter for d3-zoom
-        return (!event.ctrlKey || event.type === 'wheel') && buttonAllowed;
+        return (!event.ctrlKey || isWheelEvent) && buttonAllowed;
     };
 }
 function XYPanZoom({ domNode, minZoom, maxZoom, paneClickDistance, translateExtent, viewport, onPanZoom, onPanZoomStart, onPanZoomEnd, onDraggingChange }) {
@@ -5959,10 +6011,7 @@ function XYPanZoom({ domNode, minZoom, maxZoom, paneClickDistance, translateExte
         isZoomingOrPanning: false,
         usedRightMouseButton: false,
         prevViewport: {
-            x: 0,
-            y: 0,
-            zoom: 0
-        },
+            },
         mouseButton: 0,
         timerId: undefined,
         panScrollTimeout: undefined,
@@ -6000,7 +6049,7 @@ function XYPanZoom({ domNode, minZoom, maxZoom, paneClickDistance, translateExte
         return Promise.resolve(false);
     }
     // public functions
-    function update({ noWheelClassName, noPanClassName, onPaneContextMenu, userSelectionActive, panOnScroll, panOnDrag, panOnScrollMode, panOnScrollSpeed, preventScrolling, zoomOnPinch, zoomOnScroll, zoomOnDoubleClick, zoomActivationKeyPressed, lib, onTransformChange }) {
+    function update({ noWheelClassName, noPanClassName, onPaneContextMenu, userSelectionActive, panOnScroll, panOnDrag, panOnScrollMode, panOnScrollSpeed, preventScrolling, zoomOnPinch, zoomOnScroll, zoomOnDoubleClick, zoomActivationKeyPressed, lib, onTransformChange, connectionInProgress }) {
         if (userSelectionActive && !zoomPanValues.isZoomingOrPanning) {
             destroy();
         }
@@ -6062,7 +6111,8 @@ function XYPanZoom({ domNode, minZoom, maxZoom, paneClickDistance, translateExte
             userSelectionActive,
             noPanClassName,
             noWheelClassName,
-            lib
+            lib,
+            connectionInProgress
         });
         d3ZoomInstance.filter(filter);
         /*
@@ -6408,6 +6458,17 @@ function nodeToChildExtent(child, parent, nodeOrigin) {
 }
 function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
     const selection = select(domNode);
+    let params = {
+        controlDirection: getControlDirection('bottom-right'),
+        boundaries: {
+            minWidth: 0,
+            minHeight: 0,
+            maxWidth: Number.MAX_VALUE,
+            maxHeight: Number.MAX_VALUE
+        },
+        resizeDirection: undefined,
+        keepAspectRatio: false
+    };
     function update({ controlPosition, boundaries, keepAspectRatio, resizeDirection, onResizeStart, onResize, onResizeEnd, shouldResize }) {
         let prevValues = {
             ...initPrevValues$1
@@ -6415,13 +6476,20 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
         let startValues = {
             ...initStartValues
         };
-        const controlDirection = getControlDirection(controlPosition);
+        params = {
+            boundaries,
+            resizeDirection,
+            keepAspectRatio,
+            controlDirection: getControlDirection(controlPosition)
+        };
         let node = undefined;
         let containerBounds = null;
         let childNodes = [];
         let parentNode = undefined; // Needed to fix expandParent
         let parentExtent = undefined;
         let childExtent = undefined;
+        // we only want to trigger onResizeEnd if onResize was actually called
+        let resizeDetected = false;
         const dragHandler = drag().on('start', (event)=>{
             const { nodeLookup, transform, snapGrid, snapToGrid, nodeOrigin, paneDomNode } = getStoreItems();
             node = nodeLookup.get(nodeId);
@@ -6503,7 +6571,7 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
             const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues;
             const change = {};
             const nodeOrigin = node.origin ?? storeNodeOrigin;
-            const { width, height, x, y } = getDimensionsAfterResize(startValues, controlDirection, pointerPosition, boundaries, keepAspectRatio, nodeOrigin, parentExtent, childExtent);
+            const { width, height, x, y } = getDimensionsAfterResize(startValues, params.controlDirection, pointerPosition, params.boundaries, params.keepAspectRatio, nodeOrigin, parentExtent, childExtent);
             const isWidthChange = width !== prevWidth;
             const isHeightChange = height !== prevHeight;
             const isXPosChange = x !== prevX && isWidthChange;
@@ -6532,8 +6600,8 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
                 }
             }
             if (isWidthChange || isHeightChange) {
-                change.width = isWidthChange && (!resizeDirection || resizeDirection === 'horizontal') ? width : prevValues.width;
-                change.height = isHeightChange && (!resizeDirection || resizeDirection === 'vertical') ? height : prevValues.height;
+                change.width = isWidthChange && (!params.resizeDirection || params.resizeDirection === 'horizontal') ? width : prevValues.width;
+                change.height = isHeightChange && (!params.resizeDirection || params.resizeDirection === 'vertical') ? height : prevValues.height;
                 prevValues.width = change.width;
                 prevValues.height = change.height;
             }
@@ -6555,8 +6623,8 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
                 prevWidth,
                 height: prevValues.height,
                 prevHeight,
-                affectsX: controlDirection.affectsX,
-                affectsY: controlDirection.affectsY
+                affectsX: params.controlDirection.affectsX,
+                affectsY: params.controlDirection.affectsY
             });
             const nextValues = {
                 ...prevValues,
@@ -6566,15 +6634,20 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
             if (callResize === false) {
                 return;
             }
+            resizeDetected = true;
             onResize?.(event, nextValues);
             onChange(change, childChanges);
         }).on('end', (event)=>{
+            if (!resizeDetected) {
+                return;
+            }
             onResizeEnd?.(event, {
                 ...prevValues
             });
             onEnd?.({
                 ...prevValues
             });
+            resizeDetected = false;
         });
         selection.call(dragHandler);
     }
@@ -8195,7 +8268,11 @@ const selector$k = (s)=>!!s.panZoom;
                     deletedEdges: matchingEdges
                 };
             },
-            getIntersectingNodes: (nodeOrRect, partially = true, nodes)=>{
+            /**
+             * Partial is defined as "the 2 nodes/areas are intersecting partially".
+             * If a is contained in b or b is contained in a, they are both
+             * considered fully intersecting.
+             */ getIntersectingNodes: (nodeOrRect, partially = true, nodes)=>{
                 const isRect = isRectObject(nodeOrRect);
                 const nodeRect = isRect ? nodeOrRect : getNodeRect(nodeOrRect);
                 const hasNodesOption = nodes !== undefined;
@@ -8221,7 +8298,7 @@ const selector$k = (s)=>!!s.panZoom;
                 }
                 const overlappingArea = getOverlappingArea(nodeRect, area);
                 const partiallyVisible = partially && overlappingArea > 0;
-                return partiallyVisible || overlappingArea >= nodeRect.width * nodeRect.height;
+                return partiallyVisible || overlappingArea >= area.width * area.height || overlappingArea >= nodeRect.width * nodeRect.height;
             },
             updateNode,
             updateNodeData: (id, dataUpdate, options = {
@@ -8340,7 +8417,7 @@ const win$1 = typeof window !== 'undefined' ? window : undefined;
     const store = useStoreApi();
     React.useEffect(()=>{
         const updateDimensions = ()=>{
-            if (!domNode.current) {
+            if (!domNode.current || !(domNode.current.checkVisibility?.() ?? true)) {
                 return false;
             }
             const size = getDimensions$1(domNode.current);
@@ -8375,12 +8452,13 @@ const containerStyle = {
 };
 const selector$j = (s)=>({
         userSelectionActive: s.userSelectionActive,
-        lib: s.lib
+        lib: s.lib,
+        connectionInProgress: s.connection.inProgress
     });
 function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, defaultViewport, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling = true, children, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, paneClickDistance }) {
     const store = useStoreApi();
     const zoomPane = React.useRef(null);
-    const { userSelectionActive, lib } = useStore(selector$j, shallow$1);
+    const { userSelectionActive, lib, connectionInProgress } = useStore(selector$j, shallow$1);
     const zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode);
     const panZoom = React.useRef();
     useResizeHandler(zoomPane);
@@ -8458,7 +8536,8 @@ function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true,
             userSelectionActive,
             noWheelClassName,
             lib,
-            onTransformChange
+            onTransformChange,
+            connectionInProgress
         });
     }, [
         onPaneContextMenu,
@@ -8475,7 +8554,8 @@ function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true,
         userSelectionActive,
         noWheelClassName,
         lib,
-        onTransformChange
+        onTransformChange,
+        connectionInProgress
     ]);
     return jsxRuntime.jsx("div", {
         className: "react-flow__renderer",
@@ -8549,12 +8629,25 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
         onPaneContextMenu?.(event);
     };
     const onWheel = onPaneScroll ? (event)=>onPaneScroll(event) : undefined;
-    const onPointerDown = (event)=>{
+    const onClickCapture = (event)=>{
+        const isSelectionOnDragActive = selectionOnDrag && container.current === event.target || !selectionOnDrag || selectionKeyPressed;
+        if (!isSelectionOnDragActive) {
+            return;
+        }
+        event.stopPropagation();
+    };
+    // We are using capture here in order to prevent other pointer events
+    // to be able to create a selection above a node or an edge
+    const onPointerDownCapture = (event)=>{
         const { resetSelectedElements, domNode } = store.getState();
         containerBounds.current = domNode?.getBoundingClientRect();
-        if (!elementsSelectable || !isSelecting || event.button !== 0 || event.target !== container.current || !containerBounds.current) {
+        const isNoKeyEvent = event.target !== container.current && !!event.target.closest('.nokey');
+        const isSelectionActive = selectionOnDrag && container.current === event.target || !selectionOnDrag || selectionKeyPressed;
+        if (!elementsSelectable || !isSelecting || event.button !== 0 || !containerBounds.current || isNoKeyEvent || !isSelectionActive || !event.isPrimary) {
             return;
         }
+        event.stopPropagation();
+        event.preventDefault();
         event.target?.setPointerCapture?.(event.pointerId);
         selectionStarted.current = true;
         selectionInProgress.current = false;
@@ -8658,9 +8751,10 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
         onContextMenu: wrapHandler(onContextMenu, container),
         onWheel: wrapHandler(onWheel, container),
         onPointerEnter: hasActiveSelection ? undefined : onPaneMouseEnter,
-        onPointerDown: hasActiveSelection ? onPointerDown : onPaneMouseMove,
         onPointerMove: hasActiveSelection ? onPointerMove : onPaneMouseMove,
         onPointerUp: hasActiveSelection ? onPointerUp : undefined,
+        onPointerDownCapture: hasActiveSelection ? onPointerDownCapture : undefined,
+        onClickCapture: hasActiveSelection ? onClickCapture : undefined,
         onPointerLeave: onPaneMouseLeave,
         ref: container,
         style: containerStyle,
@@ -9549,6 +9643,7 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
         })
     });
 }
+var NodeWrapper$1 = React.memo(NodeWrapper);
 const selector$b = (s)=>({
         nodesDraggable: s.nodesDraggable,
         nodesConnectable: s.nodesConnectable,
@@ -9588,7 +9683,7 @@ function NodeRendererComponent(props) {
              *   moved into `NodeComponentWrapper`. This ensures they are
              *   memorized – so if `NodeRenderer` *has* to rerender, it only
              *   needs to regenerate the list of nodes, nothing else.
-             */ jsxRuntime.jsx(NodeWrapper, {
+             */ jsxRuntime.jsx(NodeWrapper$1, {
                 id: nodeId,
                 nodeTypes: props.nodeTypes,
                 nodeExtent: props.nodeExtent,
@@ -10582,6 +10677,7 @@ function EdgeWrapper({ id, edgesFocusable, edgesReconnectable, elementsSelectabl
         })
     });
 }
+var EdgeWrapper$1 = React.memo(EdgeWrapper);
 const selector$a = (s)=>({
         edgesFocusable: s.edgesFocusable,
         edgesReconnectable: s.edgesReconnectable,
@@ -10600,7 +10696,7 @@ function EdgeRendererComponent({ defaultMarkerColor, onlyRenderVisibleElements,
                 rfId: rfId
             }),
             edgeIds.map((id)=>{
-                return jsxRuntime.jsx(EdgeWrapper, {
+                return jsxRuntime.jsx(EdgeWrapper$1, {
                     id: id,
                     edgesFocusable: edgesFocusable,
                     edgesReconnectable: edgesReconnectable,
@@ -10985,8 +11081,8 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
     }
     return {
         rfId: '1',
-        width: 0,
-        height: 0,
+        width: width ?? 0,
+        height: height ?? 0,
         transform,
         nodes: storeNodes,
         nodesInitialized,
@@ -12600,7 +12696,7 @@ var css_248z = "/* this gets exported as style.css and can be used for the defau
 styleInject(css_248z);
 
 /**
- * @license lucide-react v0.542.0 - ISC
+ * @license lucide-react v0.546.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -12622,7 +12718,7 @@ const hasA11yProp = (props)=>{
 };
 
 /**
- * @license lucide-react v0.542.0 - ISC
+ * @license lucide-react v0.546.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -14732,18 +14828,66 @@ function cn(...inputs) {
     return str.split(/[-_\s]+/).map((word)=>word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
 }
 /**
- * Formats a currency value (USD dollars)
+ * Formats a currency value (USD dollars) with dynamic precision
  * @param value - The dollar value to format
- * @param precision - The number of decimal places to show. Defaults to 3.
- * @returns The formatted dollar string (eg: $123.002)
- */ function formatCurrency(value, precision = 3) {
+ * @returns The formatted dollar string with appropriate precision
+ */ function formatCurrency(value) {
     if (value === null || value === undefined) {
-        return "$0.000";
+        return "$0.00";
+    }
+    const absValue = Math.abs(value);
+    // Handle zero
+    if (absValue === 0) {
+        return "$0.00";
+    }
+    // Handle whole numbers - format with 3 decimal places
+    if (Number.isInteger(absValue)) {
+        const sign = value < 0 ? "-" : "";
+        return `${sign}$${absValue.toFixed(3)}`;
+    }
+    // For decimal numbers, find the first non-zero decimal place
+    const valueStr = absValue.toString();
+    const decimalIndex = valueStr.indexOf(".");
+    if (decimalIndex === -1) {
+        // No decimal point, treat as whole number
+        const sign = value < 0 ? "-" : "";
+        return `${sign}$${absValue.toFixed(3)}`;
+    }
+    // Find the first non-zero digit after the decimal point
+    let precision = 1;
+    const decimalPart = valueStr.substring(decimalIndex + 1);
+    for(let i = 0; i < decimalPart.length; i++){
+        if (decimalPart[i] !== "0") {
+            precision = i + 1;
+            break;
+        }
+    }
+    // For values >= 1, ensure we show at least 3 decimal places for readability
+    if (absValue >= 1) {
+        precision = Math.max(precision, 3);
     }
-    // Format the dollar value with sp  ecified precision
-    const formatted = Math.abs(value).toFixed(precision);
+    // Cap precision at 8 decimal places
+    precision = Math.min(precision, 8);
+    // Check if the value rounds to a whole number when rounded to the nearest integer
+    // This handles cases like 123.999 -> 124.000, but only if the value is very close to a whole number
+    const roundedToInteger = Math.round(absValue);
+    if (roundedToInteger >= 1 && Number.isInteger(roundedToInteger) && Math.abs(absValue - roundedToInteger) < 0.01) {
+        const sign = value < 0 ? "-" : "";
+        return `${sign}$${roundedToInteger.toFixed(3)}`;
+    }
+    // Round to the determined precision
+    const rounded = absValue.toFixed(precision);
     const sign = value < 0 ? "-" : "";
-    return `${sign}$${formatted}`;
+    const roundedNum = parseFloat(rounded);
+    // If the result is effectively zero (like $0.00000000), display as $0.00
+    if (roundedNum === 0 || rounded === "0.00000000") {
+        return "$0.00";
+    }
+    // If the rounded value is a whole number and >= 1, show 3 decimal places
+    if (roundedNum >= 1 && Number.isInteger(roundedNum)) {
+        return `${sign}$${roundedNum.toFixed(3)}`;
+    }
+    return `${sign}$${rounded}`;
 }
 /**
  * Formats latency in a human-readable format
@@ -16359,7 +16503,7 @@ const CountUpCurrency = ({ value, prefix = "", suffix = "" })=>{
         end: value,
         duration: DEFAULT_COUNTUP_DURATION,
         separator: ",",
-        decimals: 2,
+        decimals: 3,
         decimal: ".",
         prefix: prefix,
         useEasing: true,
@@ -16986,8 +17130,8 @@ const AgentNode = ({ data, id, onInspect })=>{
     const nodeIcon = getNodeIcon(modelProvider);
     const modelName = data.details?.internals?.llm_details?.[data.details?.internals?.llm_details?.length - 1]?.model_name || "Unknown";
     const totalCost = sumTotalCost(data.details?.internals?.llm_details || []);
-    const totalCostFormatted = formatCurrency(totalCost, 2);
-    const totalCostTooltip = `Total cost: ${formatCurrency(totalCost, 5)} USD`;
+    const totalCostFormatted = formatCurrency(totalCost);
+    const totalCostTooltip = `Total cost: ${formatCurrency(totalCost)} USD`;
     const nodeDetails = getOverviewLlmDetails(data.details?.internals?.llm_details || []);
     const inputArray = nodeDetails?.input || [];
     const output = nodeDetails?.output || null;
@@ -19584,7 +19728,7 @@ var correctTargets = function(parent, targets) {
 };
 
 var DIALOG_NAME = "Dialog";
-var [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME);
+var [createDialogContext] = createContextScope(DIALOG_NAME);
 var [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME);
 var Dialog = (props)=>{
     const { __scopeDialog, children, open: openProp, defaultOpen, onOpenChange, modal = true } = props;
@@ -20199,7 +20343,7 @@ const nodeTypes = {
 const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", height = "100dvh", className = "", defaultZoom = 1, defaultPan = {
     x: 0,
     y: 0
-}, disableAutoFit = true, defaultAutoFitDuration = 1000, defaultAutoFitDelay = 250, showTimeline = false, minNodeSpacing = 300, onInspect })=>{
+}, disableAutoFit = true, defaultAutoFitDuration = 1000, defaultAutoFitDelay = 250, showTimeline = false, minNodeSpacing = 300, onInspect, panToNodeId })=>{
     const { theme, isDarkMode } = useTheme();
     const themeColors = theme.colors;
     // Helper function to determine if we should apply minimum dimensions
@@ -20545,6 +20689,39 @@ const AgenticFlowVisualizer = ({ flowData: propFlowData, width = "100dvw", heigh
         defaultAutoFitDuration,
         defaultAutoFitDelay
     ]);
+    // Pan to specific node when panToNodeId prop is provided
+    React.useEffect(()=>{
+        if (!panToNodeId || !reactFlowInstance || disableAutoFit || nodes.length === 0) {
+            return;
+        }
+        // Check if the specified node ID exists in the current nodes array
+        const targetNode = nodes.find((node)=>node.id === panToNodeId);
+        if (!targetNode) {
+            return;
+        }
+        // Pan to the specified node
+        setTimeout(()=>{
+            reactFlowInstance.fitView({
+                nodes: [
+                    {
+                        id: panToNodeId
+                    }
+                ],
+                duration: defaultAutoFitDuration,
+                padding: 0.2,
+                minZoom: defaultZoom,
+                maxZoom: defaultZoom
+            });
+        }, defaultAutoFitDelay);
+    }, [
+        panToNodeId,
+        reactFlowInstance,
+        disableAutoFit,
+        nodes,
+        defaultAutoFitDuration,
+        defaultAutoFitDelay,
+        defaultZoom
+    ]);
     return /*#__PURE__*/ React.createElement("div", {
         ref: containerRef,
         style: {
@@ -23291,7 +23468,7 @@ var SELECTION_KEYS = [
 ];
 var SELECT_NAME = "Select";
 var [Collection, useCollection, createCollectionScope] = createCollection(SELECT_NAME);
-var [createSelectContext, createSelectScope] = createContextScope(SELECT_NAME, [
+var [createSelectContext] = createContextScope(SELECT_NAME, [
     createCollectionScope,
     createPopperScope
 ]);
@@ -24807,7 +24984,7 @@ const FileSelector = ({ files, currentFile, onFileSelect, onRefresh, loading = f
 };
 
 var CHECKBOX_NAME = "Checkbox";
-var [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME);
+var [createCheckboxContext] = createContextScope(CHECKBOX_NAME);
 var [CheckboxProviderImpl, useCheckboxContext] = createCheckboxContext(CHECKBOX_NAME);
 function CheckboxProvider(props) {
     const { __scopeCheckbox, checked: checkedProp, children, defaultChecked, disabled, form, name, onCheckedChange, required, value = "on", // @ts-expect-error