likec4 1.23.0 → 1.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "likec4",
-  "version": "1.23.0",
+  "version": "1.24.0",
   "license": "MIT",
   "homepage": "https://likec4.dev",
   "author": "Denis Davydkov <denis@davydkov.com>",
@@ -70,7 +70,7 @@
     "rollup": "4.34.6",
     "type-fest": "4.34.1",
     "vite": "5.4.14",
-    "@likec4/core": "~1.23.0"
+    "@likec4/core": "~1.24.0"
   },
   "devDependencies": {
     "@dagrejs/dagre": "1.1.4",
@@ -93,8 +93,8 @@
     "@vanilla-extract/css": "^1.17.1",
     "@vanilla-extract/dynamic": "^2.1.2",
     "@vanilla-extract/vite-plugin": "^5.0.1",
-    "@xyflow/react": "12.4.2",
-    "@xyflow/system": "0.0.50",
+    "@xyflow/react": "12.4.3",
+    "@xyflow/system": "0.0.51",
     "autoprefixer": "^10.4.20",
     "classnames": "^2.5.1",
     "clsx": "^2.1.1",
@@ -143,17 +143,20 @@
     "vite-plugin-dts": "^4.5.0",
     "vite-plugin-shadow-style": "^1.2.0",
     "vite-plugin-singlefile": "^2.1.0",
+    "vscode-jsonrpc": "8.2.0",
+    "vscode-languageserver": "9.0.1",
+    "vscode-uri": "3.1.0",
     "vscode-languageserver-types": "3.17.5",
     "vitest": "^3.0.4",
     "which": "^5.0.0",
     "yargs": "17.7.2",
-    "@likec4/diagram": "1.23.0",
-    "@likec4/generators": "1.23.0",
-    "@likec4/icons": "1.23.0",
-    "@likec4/layouts": "1.23.0",
-    "@likec4/language-server": "1.23.0",
-    "@likec4/log": "1.23.0",
-    "@likec4/tsconfig": "1.23.0"
+    "@likec4/diagram": "1.24.0",
+    "@likec4/generators": "1.24.0",
+    "@likec4/language-server": "1.24.0",
+    "@likec4/layouts": "1.24.0",
+    "@likec4/log": "1.24.0",
+    "@likec4/tsconfig": "1.24.0",
+    "@likec4/icons": "1.24.0"
   },
   "scripts": {
     "turbo-build": "turbo run build --log-prefix=none --log-order=grouped",
@@ -179,7 +182,7 @@
     "dev:playground:deployment": "pnpm cli:serve ../../apps/playground/src/examples/deployment",
     "dev:template": "pnpm cli:serve ../create-likec4/template",
     "dev:e2e": "pnpm cli:serve ../../e2e/src",
-    "dev:example-cloud": "cli:serve ../../examples/cloud-system",
+    "dev:example-cloud": "pnpm cli:serve ../../examples/cloud-system",
     "dev:failed": "pnpm cli:serve ../../examples/failed",
     "dev:example-dev": "pnpm cli:serve ../../examples/diagrams-dev/likec4",
     "cli": "tsx --conditions=sources src/cli/index.ts",

package/react/index.js

@@ -20077,7 +20077,12 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
     async function autoPan() {
       if (!containerBounds)
         return;
-      const { transform: transform2, panBy: panBy2, autoPanSpeed } = getStoreItems(), [xMovement, yMovement] = calcAutoPan(mousePosition, containerBounds, autoPanSpeed);
+      const { transform: transform2, panBy: panBy2, autoPanSpeed, autoPanOnNodeDrag } = getStoreItems();
+      if (!autoPanOnNodeDrag) {
+        autoPanStarted = !1, cancelAnimationFrame(autoPanId);
+        return;
+      }
+      const [xMovement, yMovement] = calcAutoPan(mousePosition, containerBounds, autoPanSpeed);
       (xMovement !== 0 || yMovement !== 0) && (lastPos.x = (lastPos.x ?? 0) - xMovement / transform2[2], lastPos.y = (lastPos.y ?? 0) - yMovement / transform2[2], await panBy2({ x: xMovement, y: yMovement }) && updateNodes2(lastPos, null)), autoPanId = requestAnimationFrame(autoPan);
     }
     function startDrag(event) {
@@ -20932,6 +20937,7 @@ const selector$n = (s2) => s2.userSelectionActive ? "none" : "all", Panel = forw
   const pointerEvents = useStore$1(selector$n), positionClasses = `${position2}`.split("-");
   return jsx("div", { className: cc(["react-flow__panel", className, ...positionClasses]), style: { ...style2, pointerEvents }, ref, ...rest, children: children2 });
 });
+Panel.displayName = "Panel";
 function Attribution({ proOptions, position: position2 = "bottom-right" }) {
   return proOptions != null && proOptions.hideAttribution ? null : jsx(Panel, { position: position2, className: "react-flow__attribution", "data-message": "Please only hide this attribution when you are subscribed to React Flow Pro: https://pro.reactflow.dev", children: jsx("a", { href: "https://reactflow.dev", target: "_blank", rel: "noopener noreferrer", "aria-label": "React Flow attribution", children: "React Flow" }) });
 }
@@ -21025,9 +21031,11 @@ const defaultNodeOrigin = [0, 0], defaultViewport = { x: 0, y: 0, zoom: 1 }, rea
   setDefaultNodesAndEdges: s2.setDefaultNodesAndEdges,
   setPaneClickDistance: s2.setPaneClickDistance
 }), initPrevValues = {
-  // these are values that are also passed directly to other components
-  // than the StoreUpdater. We can reduce the number of setStore calls
-  // by setting the same values here as prev fields.
+  /*
+   * these are values that are also passed directly to other components
+   * than the StoreUpdater. We can reduce the number of setStore calls
+   * by setting the same values here as prev fields.
+   */
   translateExtent: infiniteExtent,
   nodeOrigin: defaultNodeOrigin,
   minZoom: 0.5,
@@ -21168,15 +21176,15 @@ const useViewportHelper = () => {
       const { width: width2, height, minZoom, maxZoom, panZoom } = store.getState(), viewport = getViewportForBounds(bounds, width2, height, minZoom, maxZoom, (options == null ? void 0 : options.padding) ?? 0.1);
       return panZoom ? (await panZoom.setViewport(viewport, { duration: options == null ? void 0 : options.duration }), Promise.resolve(!0)) : Promise.resolve(!1);
     },
-    screenToFlowPosition: (clientPosition, options = { snapToGrid: !0 }) => {
-      const { transform: transform2, snapGrid, domNode } = store.getState();
+    screenToFlowPosition: (clientPosition, options = {}) => {
+      const { transform: transform2, snapGrid, snapToGrid, domNode } = store.getState();
       if (!domNode)
         return clientPosition;
       const { x: domX, y: domY } = domNode.getBoundingClientRect(), correctedPosition = {
         x: clientPosition.x - domX,
         y: clientPosition.y - domY
-      };
-      return pointToRendererPoint(correctedPosition, transform2, options.snapToGrid, snapGrid);
+      }, _snapGrid = options.snapGrid ?? snapGrid, _snapToGrid = options.snapToGrid ?? snapToGrid;
+      return pointToRendererPoint(correctedPosition, transform2, _snapToGrid, _snapGrid);
     },
     flowToScreenPosition: (flowPosition) => {
       const { transform: transform2, domNode } = store.getState();
@@ -21861,8 +21869,10 @@ function HandleComponent({ type = "source", position: position2 = Position.Top,
       connectingfrom: connectingFrom,
       connectingto: connectingTo,
       valid,
-      // shows where you can start a connection from
-      // and where you can end it while connecting
+      /*
+       * shows where you can start a connection from
+       * and where you can end it while connecting
+       */
       connectionindicator: isConnectable && (!connectionInProcess || isPossibleEndHandle) && (connectionInProcess ? isConnectableEnd : isConnectableStart)
     }
   ]), onMouseDown: onPointerDown2, onTouchStart: onPointerDown2, onClick: connectOnClick ? onClick : void 0, ref, ...rest, children: children2 });
@@ -21979,7 +21989,7 @@ function useNodeObserver({ node: node2, nodeType, hasDimensions, resizeObserver
     }
   }, [node2.id, nodeType, node2.sourcePosition, node2.targetPosition]), nodeRef2;
 }
-function NodeWrapper({ id: id2, onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onDoubleClick, nodesDraggable, elementsSelectable, nodesConnectable, nodesFocusable, resizeObserver, noDragClassName, noPanClassName, disableKeyboardA11y, rfId, nodeTypes: nodeTypes2, nodeExtent, nodeClickDistance, onError }) {
+function NodeWrapper({ id: id2, onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onDoubleClick, nodesDraggable, elementsSelectable, nodesConnectable, nodesFocusable, resizeObserver, noDragClassName, noPanClassName, disableKeyboardA11y, rfId, nodeTypes: nodeTypes2, nodeClickDistance, onError }) {
   const { node: node2, internals, isParent: isParent2 } = useStore$1((s2) => {
     const node22 = s2.nodeLookup.get(id2), isParent22 = s2.parentLookup.has(id2);
     return {
@@ -22059,29 +22069,31 @@ const selector$b = (s2) => ({
 function NodeRendererComponent(props) {
   const { nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, onError } = useStore$1(selector$b, shallow$1), nodeIds = useVisibleNodeIds(props.onlyRenderVisibleElements), resizeObserver = useResizeObserver();
   return jsx("div", { className: "react-flow__nodes", style: containerStyle, children: nodeIds.map((nodeId) => (
-    // The split of responsibilities between NodeRenderer and
-    // NodeComponentWrapper may appear weird. However, it’s designed to
-    // minimize the cost of updates when individual nodes change.
-    //
-    // For example, when you’re dragging a single node, that node gets
-    // updated multiple times per second. If `NodeRenderer` were to update
-    // every time, it would have to re-run the `nodes.map()` loop every
-    // time. This gets pricey with hundreds of nodes, especially if every
-    // loop cycle does more than just rendering a JSX element!
-    //
-    // As a result of this choice, we took the following implementation
-    // decisions:
-    // - NodeRenderer subscribes *only* to node IDs – and therefore
-    //   rerender *only* when visible nodes are added or removed.
-    // - NodeRenderer performs all operations the result of which can be
-    //   shared between nodes (such as creating the `ResizeObserver`
-    //   instance, or subscribing to `selector`). This means extra prop
-    //   drilling into `NodeComponentWrapper`, but it means we need to run
-    //   these operations only once – instead of once per node.
-    // - Any operations that you’d normally write inside `nodes.map` are
-    //   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.
+    /*
+     * The split of responsibilities between NodeRenderer and
+     * NodeComponentWrapper may appear weird. However, it’s designed to
+     * minimize the cost of updates when individual nodes change.
+     *
+     * For example, when you’re dragging a single node, that node gets
+     * updated multiple times per second. If `NodeRenderer` were to update
+     * every time, it would have to re-run the `nodes.map()` loop every
+     * time. This gets pricey with hundreds of nodes, especially if every
+     * loop cycle does more than just rendering a JSX element!
+     *
+     * As a result of this choice, we took the following implementation
+     * decisions:
+     * - NodeRenderer subscribes *only* to node IDs – and therefore
+     *   rerender *only* when visible nodes are added or removed.
+     * - NodeRenderer performs all operations the result of which can be
+     *   shared between nodes (such as creating the `ResizeObserver`
+     *   instance, or subscribing to `selector`). This means extra prop
+     *   drilling into `NodeComponentWrapper`, but it means we need to run
+     *   these operations only once – instead of once per node.
+     * - Any operations that you’d normally write inside `nodes.map` are
+     *   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.
+     */
     jsx(NodeWrapper, { id: nodeId, nodeTypes: props.nodeTypes, nodeExtent: props.nodeExtent, onClick: props.onNodeClick, onMouseEnter: props.onNodeMouseEnter, onMouseMove: props.onNodeMouseMove, onMouseLeave: props.onNodeMouseLeave, onContextMenu: props.onNodeContextMenu, onDoubleClick: props.onNodeDoubleClick, noDragClassName: props.noDragClassName, noPanClassName: props.noPanClassName, rfId: props.rfId, disableKeyboardA11y: props.disableKeyboardA11y, resizeObserver, nodesDraggable, nodesConnectable, nodesFocusable, elementsSelectable, nodeClickDistance: props.nodeClickDistance, onError }, nodeId)
   )) });
 }
@@ -22587,9 +22599,11 @@ const GraphView = memo$2(GraphViewComponent), getInitialState = ({ nodes, edges,
       setEdges(edges2), set2({ hasDefaultEdges: !0 });
     }
   },
-  // Every node gets registerd at a ResizeObserver. Whenever a node
-  // changes its dimensions, this function is called to measure the
-  // new dimensions and update the nodes.
+  /*
+   * Every node gets registerd at a ResizeObserver. Whenever a node
+   * changes its dimensions, this function is called to measure the
+   * new dimensions and update the nodes.
+   */
   updateNodeInternals: (updates, params = { triggerFitView: !0 }) => {
     const { triggerNodeChanges, nodeLookup, parentLookup, fitViewOnInit, fitViewDone, fitViewOnInitOptions, domNode, nodeOrigin: nodeOrigin2, nodeExtent: nodeExtent2, debug: debug2, fitViewSync } = get2(), { changes, updatedInternals } = updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOrigin2, nodeExtent2);
     if (updatedInternals) {
@@ -22724,8 +22738,10 @@ const GraphView = memo$2(GraphViewComponent), getInitialState = ({ nodes, edges,
       maxZoom
     }, options);
   },
-  // we can't call an asnychronous function in updateNodeInternals
-  // for that we created this sync version of fitView
+  /*
+   * we can't call an asnychronous function in updateNodeInternals
+   * for that we created this sync version of fitView
+   */
   fitViewSync: (options) => {
     const { panZoom, width: width22, height: height2, minZoom, maxZoom, nodeLookup } = get2();
     if (!panZoom)
@@ -22774,9 +22790,11 @@ const wrapperStyle = {
   position: "relative",
   zIndex: 0
 };
-function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes: nodeTypes2, edgeTypes: edgeTypes2, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = "Backspace", selectionKeyCode = "Shift", selectionOnDrag = !1, selectionMode = SelectionMode.Full, panActivationKeyCode = "Space", multiSelectionKeyCode = isMacOs() ? "Meta" : "Control", zoomActivationKeyCode = isMacOs() ? "Meta" : "Control", snapToGrid, snapGrid, onlyRenderVisibleElements = !1, selectNodesOnDrag, nodesDraggable, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesReconnectable, elementsSelectable = !0, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = !0, nodeExtent, defaultMarkerColor = "#b1b1b7", zoomOnScroll = !0, zoomOnPinch = !0, panOnScroll = !1, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = !0, panOnDrag = !0, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance = 0, nodeClickDistance = 0, children: children2, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius = 10, onNodesChange, onEdgesChange, noDragClassName = "nodrag", noWheelClassName = "nowheel", noPanClassName = "nopan", fitView: fitView2, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect, elevateEdgesOnSelect, disableKeyboardA11y = !1, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, connectionRadius, isValidConnection, onError, style: style2, id: id2, nodeDragThreshold, viewport, onViewportChange, width: width2, height, colorMode = "light", debug: debug2, ...rest }, ref) {
-  const rfId = id2 || "1", colorModeClassName = useColorModeClass(colorMode);
-  return jsx("div", { "data-testid": "rf__wrapper", ...rest, style: { ...style2, ...wrapperStyle }, ref, className: cc(["react-flow", className, colorModeClassName]), id: id2, children: jsxs(Wrapper, { nodes, edges, width: width2, height, fitView: fitView2, nodeOrigin, nodeExtent, children: [jsx(GraphView, { onInit, onNodeClick, onEdgeClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, nodeTypes: nodeTypes2, edgeTypes: edgeTypes2, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, deleteKeyCode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent, minZoom, maxZoom, preventScrolling, zoomOnScroll, zoomOnPinch, zoomOnDoubleClick, panOnScroll, panOnScrollSpeed, panOnScrollMode, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance, nodeClickDistance, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, defaultMarkerColor, noDragClassName, noWheelClassName, noPanClassName, rfId, disableKeyboardA11y, nodeExtent, viewport, onViewportChange }), jsx(StoreUpdater, { nodes, edges, defaultNodes, defaultEdges, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, nodesDraggable, nodesConnectable, nodesFocusable, edgesFocusable, edgesReconnectable, elementsSelectable, elevateNodesOnSelect, elevateEdgesOnSelect, minZoom, maxZoom, nodeExtent, onNodesChange, onEdgesChange, snapToGrid, snapGrid, connectionMode, translateExtent, connectOnClick, defaultEdgeOptions, fitView: fitView2, fitViewOptions, onNodesDelete, onEdgesDelete, onDelete, onNodeDragStart, onNodeDrag, onNodeDragStop, onSelectionDrag, onSelectionDragStart, onSelectionDragStop, onMove, onMoveStart, onMoveEnd, noPanClassName, nodeOrigin, rfId, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, onError, connectionRadius, isValidConnection, selectNodesOnDrag, nodeDragThreshold, onBeforeDelete, paneClickDistance, debug: debug2 }), jsx(SelectionListener, { onSelectionChange }), children2, jsx(Attribution, { proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId, disableKeyboardA11y })] }) });
+function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTypes: nodeTypes2, edgeTypes: edgeTypes2, onNodeClick, onEdgeClick, onInit, onMove, onMoveStart, onMoveEnd, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onNodesDelete, onEdgesDelete, onDelete, onSelectionChange, onSelectionDragStart, onSelectionDrag, onSelectionDragStop, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onBeforeDelete, connectionMode, connectionLineType = ConnectionLineType.Bezier, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, deleteKeyCode = "Backspace", selectionKeyCode = "Shift", selectionOnDrag = !1, selectionMode = SelectionMode.Full, panActivationKeyCode = "Space", multiSelectionKeyCode = isMacOs() ? "Meta" : "Control", zoomActivationKeyCode = isMacOs() ? "Meta" : "Control", snapToGrid, snapGrid, onlyRenderVisibleElements = !1, selectNodesOnDrag, nodesDraggable, nodesConnectable, nodesFocusable, nodeOrigin = defaultNodeOrigin, edgesFocusable, edgesReconnectable, elementsSelectable = !0, defaultViewport: defaultViewport$1 = defaultViewport, minZoom = 0.5, maxZoom = 2, translateExtent = infiniteExtent, preventScrolling = !0, nodeExtent, defaultMarkerColor = "#b1b1b7", zoomOnScroll = !0, zoomOnPinch = !0, panOnScroll = !1, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = !0, panOnDrag = !0, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance = 0, nodeClickDistance = 0, children: children2, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius = 10, onNodesChange, onEdgesChange, noDragClassName = "nodrag", noWheelClassName = "nowheel", noPanClassName = "nopan", fitView: fitView2, fitViewOptions, connectOnClick, attributionPosition, proOptions, defaultEdgeOptions, elevateNodesOnSelect, elevateEdgesOnSelect, disableKeyboardA11y = !1, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, connectionRadius, isValidConnection, onError, style: style2, id: id2, nodeDragThreshold, viewport, onViewportChange, width: width2, height, colorMode = "light", debug: debug2, onScroll, ...rest }, ref) {
+  const rfId = id2 || "1", colorModeClassName = useColorModeClass(colorMode), wrapperOnScroll = useCallback((e2) => {
+    e2.currentTarget.scrollTo({ top: 0, left: 0, behavior: "instant" }), onScroll == null || onScroll(e2);
+  }, [onScroll]);
+  return jsx("div", { "data-testid": "rf__wrapper", ...rest, onScroll: wrapperOnScroll, style: { ...style2, ...wrapperStyle }, ref, className: cc(["react-flow", className, colorModeClassName]), id: id2, children: jsxs(Wrapper, { nodes, edges, width: width2, height, fitView: fitView2, nodeOrigin, nodeExtent, children: [jsx(GraphView, { onInit, onNodeClick, onEdgeClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, nodeTypes: nodeTypes2, edgeTypes: edgeTypes2, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, deleteKeyCode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent, minZoom, maxZoom, preventScrolling, zoomOnScroll, zoomOnPinch, zoomOnDoubleClick, panOnScroll, panOnScrollSpeed, panOnScrollMode, panOnDrag, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance, nodeClickDistance, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, defaultMarkerColor, noDragClassName, noWheelClassName, noPanClassName, rfId, disableKeyboardA11y, nodeExtent, viewport, onViewportChange }), jsx(StoreUpdater, { nodes, edges, defaultNodes, defaultEdges, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, nodesDraggable, nodesConnectable, nodesFocusable, edgesFocusable, edgesReconnectable, elementsSelectable, elevateNodesOnSelect, elevateEdgesOnSelect, minZoom, maxZoom, nodeExtent, onNodesChange, onEdgesChange, snapToGrid, snapGrid, connectionMode, translateExtent, connectOnClick, defaultEdgeOptions, fitView: fitView2, fitViewOptions, onNodesDelete, onEdgesDelete, onDelete, onNodeDragStart, onNodeDrag, onNodeDragStop, onSelectionDrag, onSelectionDragStart, onSelectionDragStop, onMove, onMoveStart, onMoveEnd, noPanClassName, nodeOrigin, rfId, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, onError, connectionRadius, isValidConnection, selectNodesOnDrag, nodeDragThreshold, onBeforeDelete, paneClickDistance, debug: debug2 }), jsx(SelectionListener, { onSelectionChange }), children2, jsx(Attribution, { proOptions, position: attributionPosition }), jsx(A11yDescriptions, { rfId, disableKeyboardA11y })] }) });
 }
 var index = fixedForwardRef(ReactFlow);
 const selector$6 = (s2) => {
@@ -22907,18 +22925,22 @@ function MiniMapNodes({
   nodeClassName = "",
   nodeBorderRadius = 5,
   nodeStrokeWidth,
-  // We need to rename the prop to be `CapitalCase` so that JSX will render it as
-  // a component properly.
+  /*
+   * We need to rename the prop to be `CapitalCase` so that JSX will render it as
+   * a component properly.
+   */
   nodeComponent: NodeComponent = MiniMapNode,
   onClick
 }) {
   const nodeIds = useStore$1(selectorNodeIds, shallow$1), nodeColorFunc = getAttrFunction(nodeColor), nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor), nodeClassNameFunc = getAttrFunction(nodeClassName), shapeRendering = typeof window > "u" || window.chrome ? "crispEdges" : "geometricPrecision";
   return jsx(Fragment$1, { children: nodeIds.map((nodeId) => (
-    // The split of responsibilities between MiniMapNodes and
-    // NodeComponentWrapper may appear weird. However, it’s designed to
-    // minimize the cost of updates when individual nodes change.
-    //
-    // For more details, see a similar commit in `NodeRenderer/index.tsx`.
+    /*
+     * The split of responsibilities between MiniMapNodes and
+     * NodeComponentWrapper may appear weird. However, it’s designed to
+     * minimize the cost of updates when individual nodes change.
+     *
+     * For more details, see a similar commit in `NodeRenderer/index.tsx`.
+     */
     jsx(NodeComponentWrapper, { id: nodeId, nodeColorFunc, nodeStrokeColorFunc, nodeClassNameFunc, nodeBorderRadius, nodeStrokeWidth, NodeComponent, onClick, shapeRendering }, nodeId)
   )) });
 }
@@ -22962,8 +22984,10 @@ function MiniMapComponent({
   nodeClassName = "",
   nodeBorderRadius = 5,
   nodeStrokeWidth,
-  // We need to rename the prop to be `CapitalCase` so that JSX will render it as
-  // a component properly.
+  /*
+   * We need to rename the prop to be `CapitalCase` so that JSX will render it as
+   * a component properly.
+   */
   nodeComponent,
   bgColor,
   maskColor,
@@ -23153,11 +23177,12 @@ const nodeEqualityFn = (a2, b2) => (a2 == null ? void 0 : a2.internals.positionA
   selectedNodesCount: state.nodes.filter((node2) => node2.selected).length
 });
 function NodeToolbar({ nodeId, children: children2, className, style: style2, isVisible, position: position2 = Position.Top, offset: offset2 = 10, align = "center", ...rest }) {
+  var _a;
   const contextNodeId = useNodeId(), nodesSelector2 = useCallback((state) => (Array.isArray(nodeId) ? nodeId : [nodeId || contextNodeId || ""]).reduce((res, id2) => {
     const node2 = state.nodeLookup.get(id2);
     return node2 && res.set(node2.id, node2), res;
   }, /* @__PURE__ */ new Map()), [nodeId, contextNodeId]), nodes = useStore$1(nodesSelector2, nodesEqualityFn), { x: x2, y: y2, zoom: zoom2, selectedNodesCount } = useStore$1(storeSelector, shallow$1);
-  if (!(typeof isVisible == "boolean" ? isVisible : nodes.size === 1 && nodes.values().next().value.selected && selectedNodesCount === 1) || !nodes.size)
+  if (!(typeof isVisible == "boolean" ? isVisible : nodes.size === 1 && ((_a = nodes.values().next().value) == null ? void 0 : _a.selected) && selectedNodesCount === 1) || !nodes.size)
     return null;
   const nodeRect = getInternalNodesBounds(nodes), nodesArray = Array.from(nodes.values()), zIndex = Math.max(...nodesArray.map((node2) => node2.internals.z + 1)), wrapperStyle2 = {
     position: "absolute",
@@ -39022,6 +39047,17 @@ const diagramMachine = setup({
     },
     "trigger:OpenSource": (_, _params) => {
     },
+    "open source of focused node": enqueueActions(({ context, enqueue }) => {
+      if (!context.focusedNode || !context.features.enableVscode) return;
+      const diagramNode = findDiagramNode(context, context.focusedNode);
+      diagramNode && (enqueue.cancel("openSource"), DiagramNode.deploymentRef(diagramNode) ? enqueue.raise({ type: "open.source", deployment: DiagramNode.deploymentRef(diagramNode) }, {
+        id: "openSource",
+        delay: 100
+      }) : DiagramNode.modelRef(diagramNode) && enqueue.raise({ type: "open.source", element: DiagramNode.modelRef(diagramNode) }, {
+        id: "openSource",
+        delay: 100
+      }));
+    }),
     "xyflow:fitDiagram": ({ context }, params) => {
       const {
         bounds = context.view.bounds,
@@ -39220,6 +39256,7 @@ const diagramMachine = setup({
           ...focusNodesEdges(s2),
           viewportBeforeFocus: { ...s2.context.viewport }
         })),
+        "open source of focused node",
         spawnChild("hotkeyActorLogic", { id: "hotkey" }),
         {
           type: "xyflow:fitDiagram",
@@ -39246,6 +39283,7 @@ const diagramMachine = setup({
                 focusedNode: ({ event }) => event.node.id
               }),
               assign(focusNodesEdges),
+              "open source of focused node",
               {
                 type: "xyflow:fitDiagram",
                 params: focusedBounds
@@ -39259,6 +39297,7 @@ const diagramMachine = setup({
               focusedNode: ({ event }) => event.nodeId
             }),
             assign(focusNodesEdges),
+            "open source of focused node",
             {
               type: "xyflow:fitDiagram",
               params: focusedBounds