@uipath/apollo-react 6.26.0 → 6.28.0

package/dist/canvas/components/AgentCanvas/AgentFlow.cjs

@@ -43,10 +43,12 @@ const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
 const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
 const external_BaseCanvas_index_cjs_namespaceObject = require("../BaseCanvas/index.cjs");
+const NodeRegistryProvider_cjs_namespaceObject = require("../../core/NodeRegistryProvider.cjs");
 const external_types_cjs_namespaceObject = require("../../types.cjs");
 const props_helpers_cjs_namespaceObject = require("../../utils/props-helpers.cjs");
 const external_CanvasPositionControls_cjs_namespaceObject = require("../CanvasPositionControls.cjs");
 const external_StickyNoteNode_index_cjs_namespaceObject = require("../StickyNoteNode/index.cjs");
+const external_agent_flow_manifest_cjs_namespaceObject = require("./agent-flow.manifest.cjs");
 const PaneContextMenu_cjs_namespaceObject = require("./components/PaneContextMenu.cjs");
 const SuggestionGroupPanel_cjs_namespaceObject = require("./components/SuggestionGroupPanel.cjs");
 const TimelinePlayer_cjs_namespaceObject = require("./components/TimelinePlayer.cjs");
@@ -55,8 +57,6 @@ const Edge_cjs_namespaceObject = require("./edges/Edge.cjs");
 const AgentNode_cjs_namespaceObject = require("./nodes/AgentNode.cjs");
 const ResourceNode_cjs_namespaceObject = require("./nodes/ResourceNode.cjs");
 const agent_flow_store_cjs_namespaceObject = require("./store/agent-flow-store.cjs");
-const NodeRegistryProvider_cjs_namespaceObject = require("../../core/NodeRegistryProvider.cjs");
-const external_agent_flow_manifest_cjs_namespaceObject = require("./agent-flow.manifest.cjs");
 const ToolbarContainer = styled_default().div`
   display: flex;
   align-items: center;
@@ -166,7 +166,7 @@ const createResourceNodeWrapper = (opts)=>(props)=>{
             suggestionGroupVersion: opts.suggestionGroupVersion
         });
     };
-const AgentFlowInner = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ children, mode, spans, onEnable, onDisable, onAddBreakpoint, onRemoveBreakpoint, onAddGuardrail, onGoToSource, onErrorAction, onAddResource: _onAddResource, onSelectResource, setSpanForSelectedNode, getNodeFromSelectedSpan, onExpandResource, onCollapseResource, agentNodeTranslations, resourceNodeTranslations, stickyNoteNodeTranslations, canvasTranslations, enableTimelinePlayer, canvasRef, enableMcpTools, enableMemory, enableA2a, enableStickyNotes, enableInstructions, healthScore, onHealthScoreClick, suggestionTranslations, suggestionGroup, onAgentNodePositionChange, onResourceNodePositionChange, onOrganize, onUpdateStickyNote, zoomLevel, onZoomLevelChange })=>{
+const AgentFlowInner = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ children, mode, readOnlyNodeIds, spans, onEnable, onDisable, onAddBreakpoint, onRemoveBreakpoint, onAddGuardrail, onGoToSource, onErrorAction, onAddResource: _onAddResource, onSelectResource, setSpanForSelectedNode, getNodeFromSelectedSpan, onExpandResource, onCollapseResource, agentNodeTranslations, resourceNodeTranslations, stickyNoteNodeTranslations, canvasTranslations, enableTimelinePlayer, canvasRef, enableMcpTools, enableMemory, enableA2a, enableStickyNotes, enableInstructions, healthScore, onHealthScoreClick, suggestionTranslations, suggestionGroup, onAgentNodePositionChange, onResourceNodePositionChange, onOrganize, onUpdateStickyNote, zoomLevel, onZoomLevelChange })=>{
     const { nodes, edges, onNodesChange, onEdgesChange, onConnect, autoArrange, setSelectedNodeId, selectedNodeId, setDragging, expandAgent, collapseAgent, createResourcePlaceholder, actOnSuggestionGroup, currentSuggestionIndex, navigateToNextSuggestion, navigateToPreviousSuggestion, addStickyNote, paneContextMenu, openPaneContextMenu, closePaneContextMenu } = (0, agent_flow_store_cjs_namespaceObject.useAgentFlowStore)();
     const nodeTypesBase = (0, external_react_namespaceObject.useMemo)(()=>({
             stickyNote: (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_index_cjs_namespaceObject.StickyNoteNode, {
@@ -449,6 +449,7 @@ const AgentFlowInner = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({
                     nodeTypes: nodeTypes,
                     edgeTypes: edgeTypes,
                     mode: mode,
+                    readOnlyNodeIds: readOnlyNodeIds,
                     initialAutoLayout: autoArrange,
                     fitViewOptions: adjustedFitViewOptions,
                     defaultViewport: defaultViewport,

package/dist/canvas/components/AgentCanvas/AgentFlow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AgentFlow.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AgentCanvas/AgentFlow.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI/C,OAAO,EAIL,KAAK,cAAc,EAcpB,MAAM,aAAa,CAAC;AAqsBrB,eAAO,MAAM,SAAS,GAAI,OAAO,iBAAiB,CAAC,cAAc,CAAC,4CAQjE,CAAC"}
+{"version":3,"file":"AgentFlow.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AgentCanvas/AgentFlow.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI/C,OAAO,EAIL,KAAK,cAAc,EAcpB,MAAM,aAAa,CAAC;AAssBrB,eAAO,MAAM,SAAS,GAAI,OAAO,iBAAiB,CAAC,cAAc,CAAC,4CAQjE,CAAC"}

package/dist/canvas/components/AgentCanvas/AgentFlow.js

@@ -5,10 +5,12 @@ import { Panel, useReactFlow } from "../../xyflow/react.js";
 import { StickyNote } from "lucide-react";
 import { memo, useCallback, useEffect, useMemo, useRef } from "react";
 import { BaseCanvas } from "../BaseCanvas/index.js";
+import { NodeRegistryProvider } from "../../core/NodeRegistryProvider.js";
 import { DefaultAgentNodeTranslations, DefaultCanvasTranslations, DefaultResourceNodeTranslations, DefaultStickyNoteNodeTranslations, DefaultSuggestionTranslations, isAgentFlowAgentNode, isAgentFlowResourceNode, isStickyNoteNode } from "../../types.js";
 import { hasAgentRunning } from "../../utils/props-helpers.js";
 import { CanvasPositionControls } from "../CanvasPositionControls.js";
 import { StickyNoteNode } from "../StickyNoteNode/index.js";
+import { agentFlowManifest } from "./agent-flow.manifest.js";
 import { PaneContextMenu } from "./components/PaneContextMenu.js";
 import { SuggestionGroupPanel } from "./components/SuggestionGroupPanel.js";
 import { TimelinePlayer } from "./components/TimelinePlayer.js";
@@ -17,8 +19,6 @@ import { Edge } from "./edges/Edge.js";
 import { AgentNodeElement } from "./nodes/AgentNode.js";
 import { ResourceNode } from "./nodes/ResourceNode.js";
 import { AgentFlowProvider, useAgentFlowStore } from "./store/agent-flow-store.js";
-import { NodeRegistryProvider } from "../../core/NodeRegistryProvider.js";
-import { agentFlowManifest } from "./agent-flow.manifest.js";
 const ToolbarContainer = styled.div`
   display: flex;
   align-items: center;
@@ -128,7 +128,7 @@ const createResourceNodeWrapper = (opts)=>(props)=>{
             suggestionGroupVersion: opts.suggestionGroupVersion
         });
     };
-const AgentFlowInner = /*#__PURE__*/ memo(({ children, mode, spans, onEnable, onDisable, onAddBreakpoint, onRemoveBreakpoint, onAddGuardrail, onGoToSource, onErrorAction, onAddResource: _onAddResource, onSelectResource, setSpanForSelectedNode, getNodeFromSelectedSpan, onExpandResource, onCollapseResource, agentNodeTranslations, resourceNodeTranslations, stickyNoteNodeTranslations, canvasTranslations, enableTimelinePlayer, canvasRef, enableMcpTools, enableMemory, enableA2a, enableStickyNotes, enableInstructions, healthScore, onHealthScoreClick, suggestionTranslations, suggestionGroup, onAgentNodePositionChange, onResourceNodePositionChange, onOrganize, onUpdateStickyNote, zoomLevel, onZoomLevelChange })=>{
+const AgentFlowInner = /*#__PURE__*/ memo(({ children, mode, readOnlyNodeIds, spans, onEnable, onDisable, onAddBreakpoint, onRemoveBreakpoint, onAddGuardrail, onGoToSource, onErrorAction, onAddResource: _onAddResource, onSelectResource, setSpanForSelectedNode, getNodeFromSelectedSpan, onExpandResource, onCollapseResource, agentNodeTranslations, resourceNodeTranslations, stickyNoteNodeTranslations, canvasTranslations, enableTimelinePlayer, canvasRef, enableMcpTools, enableMemory, enableA2a, enableStickyNotes, enableInstructions, healthScore, onHealthScoreClick, suggestionTranslations, suggestionGroup, onAgentNodePositionChange, onResourceNodePositionChange, onOrganize, onUpdateStickyNote, zoomLevel, onZoomLevelChange })=>{
     const { nodes, edges, onNodesChange, onEdgesChange, onConnect, autoArrange, setSelectedNodeId, selectedNodeId, setDragging, expandAgent, collapseAgent, createResourcePlaceholder, actOnSuggestionGroup, currentSuggestionIndex, navigateToNextSuggestion, navigateToPreviousSuggestion, addStickyNote, paneContextMenu, openPaneContextMenu, closePaneContextMenu } = useAgentFlowStore();
     const nodeTypesBase = useMemo(()=>({
             stickyNote: (props)=>/*#__PURE__*/ jsx(StickyNoteNode, {
@@ -411,6 +411,7 @@ const AgentFlowInner = /*#__PURE__*/ memo(({ children, mode, spans, onEnable, on
                     nodeTypes: nodeTypes,
                     edgeTypes: edgeTypes,
                     mode: mode,
+                    readOnlyNodeIds: readOnlyNodeIds,
                     initialAutoLayout: autoArrange,
                     fitViewOptions: adjustedFitViewOptions,
                     defaultViewport: defaultViewport,

package/dist/canvas/components/AgentCanvas/nodes/AgentNode.cjs

@@ -32,6 +32,7 @@ const react_cjs_namespaceObject = require("../../../xyflow/react.cjs");
 const external_react_namespaceObject = require("react");
 const external_types_cjs_namespaceObject = require("../../../types.cjs");
 const icon_registry_cjs_namespaceObject = require("../../../utils/icon-registry.cjs");
+const ReadOnlyNodesContext_cjs_namespaceObject = require("../../BaseCanvas/ReadOnlyNodesContext.cjs");
 const BaseNode_cjs_namespaceObject = require("../../BaseNode/BaseNode.cjs");
 const BaseNodeConfigContext_cjs_namespaceObject = require("../../BaseNode/BaseNodeConfigContext.cjs");
 const external_FloatingCanvasPanel_index_cjs_namespaceObject = require("../../FloatingCanvasPanel/index.cjs");
@@ -118,6 +119,8 @@ const AgentNodeComponent = /*#__PURE__*/ (0, external_react_namespaceObject.memo
         hasSuccess,
         hasRunning
     ]);
+    const isNodeReadOnly = (0, ReadOnlyNodesContext_cjs_namespaceObject.useIsNodeReadOnly)(id);
+    const canEditNode = 'design' === mode && !isNodeReadOnly;
     const displayMemory = true === enableMemory && ('design' === mode || 'view' === mode && hasMemory);
     const displayContext = 'design' === mode || 'view' === mode && hasContext;
     const displayEscalation = 'design' === mode || 'view' === mode && hasEscalation;
@@ -135,7 +138,7 @@ const AgentNodeComponent = /*#__PURE__*/ (0, external_react_namespaceObject.memo
             type: 'source',
             handleType: 'artifact',
             label: translations.memory,
-            showButton: 'design' === mode && !hasMemory,
+            showButton: canEditNode && !hasMemory,
             labelBackgroundColor: 'var(--canvas-background-secondary)',
             visible: displayMemory,
             onAction: (_e)=>{
@@ -147,7 +150,7 @@ const AgentNodeComponent = /*#__PURE__*/ (0, external_react_namespaceObject.memo
             type: 'source',
             handleType: 'artifact',
             label: translations.escalations,
-            showButton: 'design' === mode,
+            showButton: canEditNode,
             labelBackgroundColor: 'var(--canvas-background-secondary)',
             visible: displayEscalation,
             onAction: (_e)=>{
@@ -165,7 +168,7 @@ const AgentNodeComponent = /*#__PURE__*/ (0, external_react_namespaceObject.memo
                 type: 'source',
                 handleType: 'artifact',
                 label: translations.context,
-                showButton: 'design' === mode,
+                showButton: canEditNode,
                 labelBackgroundColor: 'var(--canvas-background-secondary)',
                 visible: displayContext,
                 onAction: (_e)=>{
@@ -176,7 +179,7 @@ const AgentNodeComponent = /*#__PURE__*/ (0, external_react_namespaceObject.memo
                 type: 'source',
                 handleType: 'artifact',
                 label: translations.tools,
-                showButton: 'design' === mode,
+                showButton: canEditNode,
                 labelBackgroundColor: 'var(--canvas-background-secondary)',
                 visible: displayTool || displayMcp || displayA2a,
                 onAction: (_e)=>{
@@ -193,7 +196,7 @@ const AgentNodeComponent = /*#__PURE__*/ (0, external_react_namespaceObject.memo
         }
         return configs;
     }, [
-        mode,
+        canEditNode,
         displayContext,
         displayMemory,
         displayMcp,
@@ -253,10 +256,11 @@ const AgentNodeComponent = /*#__PURE__*/ (0, external_react_namespaceObject.memo
         const hasContent = hasSystem || hasUser;
         if (hasContent) return {
             instructionsFooter: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_AgentNode_styles_cjs_namespaceObject.InstructionsPreview, {
-                onClick: (e)=>{
+                $isInteractive: canEditNode,
+                onClick: canEditNode ? (e)=>{
                     e.stopPropagation();
                     onAddInstructions?.();
-                },
+                } : void 0,
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_AgentNode_styles_cjs_namespaceObject.InstructionsLabel, {
                         children: translations.instructions
@@ -291,7 +295,7 @@ const AgentNodeComponent = /*#__PURE__*/ (0, external_react_namespaceObject.memo
             }),
             footerVariant: hasSystem && hasUser ? 'double' : 'single'
         };
-        if ('design' !== mode || !onAddInstructions) return {
+        if (!canEditNode || !onAddInstructions) return {
             instructionsFooter: null,
             footerVariant: 'none'
         };
@@ -315,7 +319,7 @@ const AgentNodeComponent = /*#__PURE__*/ (0, external_react_namespaceObject.memo
     }, [
         enableInstructions,
         data.instructions,
-        mode,
+        canEditNode,
         onAddInstructions,
         translations
     ]);

package/dist/canvas/components/AgentCanvas/nodes/AgentNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AgentNode.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/AgentCanvas/nodes/AgentNode.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAIhF,OAAO,EACL,KAAK,qBAAqB,EAE1B,KAAK,sBAAsB,EAC3B,KAAK,cAAc,EACpB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AA8BlE,UAAU,aAAc,SAAQ,YAAY;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IAEF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC;AAED,UAAU,cAAc;IACtB,IAAI,EAAE,aAAa,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,GAAG,YAAY,GAAG,KAAK,GAAG,MAAM,GAAG,aAAa,GAAG,KAAK,KAAK,IAAI,CAAC;IAClG,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,YAAY,EAAE,qBAAqB,CAAC;IACpC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAEhD,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAujBD,eAAO,MAAM,gBAAgB,8CAxDI,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,GAAG,cAAc,6CAwD1B,CAAC;AAEvD,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"AgentNode.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/AgentCanvas/nodes/AgentNode.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAIhF,OAAO,EACL,KAAK,qBAAqB,EAE1B,KAAK,sBAAsB,EAC3B,KAAK,cAAc,EACpB,MAAM,gBAAgB,CAAC;AAIxB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AA8BlE,UAAU,aAAc,SAAQ,YAAY;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IAEF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC;AAED,UAAU,cAAc;IACtB,IAAI,EAAE,aAAa,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,GAAG,YAAY,GAAG,KAAK,GAAG,MAAM,GAAG,aAAa,GAAG,KAAK,KAAK,IAAI,CAAC;IAClG,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,YAAY,EAAE,qBAAqB,CAAC;IACpC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAEhD,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAikBD,eAAO,MAAM,gBAAgB,8CAxDI,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,GAAG,cAAc,6CAwD1B,CAAC;AAEvD,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,CAAC"}

package/dist/canvas/components/AgentCanvas/nodes/AgentNode.js

@@ -4,6 +4,7 @@ import { Position } from "../../../xyflow/react.js";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { DefaultSuggestionTranslations } from "../../../types.js";
 import { CanvasIcon } from "../../../utils/icon-registry.js";
+import { useIsNodeReadOnly } from "../../BaseCanvas/ReadOnlyNodesContext.js";
 import { BaseNode } from "../../BaseNode/BaseNode.js";
 import { BaseNodeOverrideConfigProvider } from "../../BaseNode/BaseNodeConfigContext.js";
 import { FloatingCanvasPanel } from "../../FloatingCanvasPanel/index.js";
@@ -90,6 +91,8 @@ const AgentNodeComponent = /*#__PURE__*/ memo((props)=>{
         hasSuccess,
         hasRunning
     ]);
+    const isNodeReadOnly = useIsNodeReadOnly(id);
+    const canEditNode = 'design' === mode && !isNodeReadOnly;
     const displayMemory = true === enableMemory && ('design' === mode || 'view' === mode && hasMemory);
     const displayContext = 'design' === mode || 'view' === mode && hasContext;
     const displayEscalation = 'design' === mode || 'view' === mode && hasEscalation;
@@ -107,7 +110,7 @@ const AgentNodeComponent = /*#__PURE__*/ memo((props)=>{
             type: 'source',
             handleType: 'artifact',
             label: translations.memory,
-            showButton: 'design' === mode && !hasMemory,
+            showButton: canEditNode && !hasMemory,
             labelBackgroundColor: 'var(--canvas-background-secondary)',
             visible: displayMemory,
             onAction: (_e)=>{
@@ -119,7 +122,7 @@ const AgentNodeComponent = /*#__PURE__*/ memo((props)=>{
             type: 'source',
             handleType: 'artifact',
             label: translations.escalations,
-            showButton: 'design' === mode,
+            showButton: canEditNode,
             labelBackgroundColor: 'var(--canvas-background-secondary)',
             visible: displayEscalation,
             onAction: (_e)=>{
@@ -137,7 +140,7 @@ const AgentNodeComponent = /*#__PURE__*/ memo((props)=>{
                 type: 'source',
                 handleType: 'artifact',
                 label: translations.context,
-                showButton: 'design' === mode,
+                showButton: canEditNode,
                 labelBackgroundColor: 'var(--canvas-background-secondary)',
                 visible: displayContext,
                 onAction: (_e)=>{
@@ -148,7 +151,7 @@ const AgentNodeComponent = /*#__PURE__*/ memo((props)=>{
                 type: 'source',
                 handleType: 'artifact',
                 label: translations.tools,
-                showButton: 'design' === mode,
+                showButton: canEditNode,
                 labelBackgroundColor: 'var(--canvas-background-secondary)',
                 visible: displayTool || displayMcp || displayA2a,
                 onAction: (_e)=>{
@@ -165,7 +168,7 @@ const AgentNodeComponent = /*#__PURE__*/ memo((props)=>{
         }
         return configs;
     }, [
-        mode,
+        canEditNode,
         displayContext,
         displayMemory,
         displayMcp,
@@ -225,10 +228,11 @@ const AgentNodeComponent = /*#__PURE__*/ memo((props)=>{
         const hasContent = hasSystem || hasUser;
         if (hasContent) return {
             instructionsFooter: /*#__PURE__*/ jsxs(InstructionsPreview, {
-                onClick: (e)=>{
+                $isInteractive: canEditNode,
+                onClick: canEditNode ? (e)=>{
                     e.stopPropagation();
                     onAddInstructions?.();
-                },
+                } : void 0,
                 children: [
                     /*#__PURE__*/ jsx(InstructionsLabel, {
                         children: translations.instructions
@@ -263,7 +267,7 @@ const AgentNodeComponent = /*#__PURE__*/ memo((props)=>{
             }),
             footerVariant: hasSystem && hasUser ? 'double' : 'single'
         };
-        if ('design' !== mode || !onAddInstructions) return {
+        if (!canEditNode || !onAddInstructions) return {
             instructionsFooter: null,
             footerVariant: 'none'
         };
@@ -287,7 +291,7 @@ const AgentNodeComponent = /*#__PURE__*/ memo((props)=>{
     }, [
         enableInstructions,
         data.instructions,
-        mode,
+        canEditNode,
         onAddInstructions,
         translations
     ]);

package/dist/canvas/components/AgentCanvas/nodes/AgentNode.styles.cjs

@@ -91,7 +91,7 @@ const InstructionsPreview = styled_default().div`
   font-size: 9px;
   line-height: 13px;
   color: var(--canvas-foreground-de-emp);
-  cursor: pointer;
+  cursor: ${({ $isInteractive })=>$isInteractive ? 'pointer' : 'default'};
 `;
 const InstructionsLine = styled_default().div`
   white-space: nowrap;

package/dist/canvas/components/AgentCanvas/nodes/AgentNode.styles.d.ts

@@ -9,6 +9,8 @@ export declare const InstructionsLabel: import("@emotion/styled").StyledComponen
 export declare const InstructionsPreview: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
+} & {
+    $isInteractive: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const InstructionsLine: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;

package/dist/canvas/components/AgentCanvas/nodes/AgentNode.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AgentNode.styles.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/AgentCanvas/nodes/AgentNode.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB;;;qHAuBjC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;yGAK7B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;yGAS/B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAQ5B,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;yGAOpC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;yGAMjC,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;yGAIhC,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;yGAGnC,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAI3B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;yGAIhC,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;yGAGhC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;cAA0B,OAAO;yGA0B9D,CAAC;AAEF,eAAO,MAAM,WAAW;;;yGAKvB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;2GAE5B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;2GAG5B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;2GAI7B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;2GAY5B,CAAC"}
+{"version":3,"file":"AgentNode.styles.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/AgentCanvas/nodes/AgentNode.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB;;;qHAuBjC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;yGAK7B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;oBAAgC,OAAO;yGAStE,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAQ5B,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;yGAOpC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;yGAMjC,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;yGAIhC,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;yGAGnC,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAI3B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;yGAIhC,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;yGAGhC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;cAA0B,OAAO;yGA0B9D,CAAC;AAEF,eAAO,MAAM,WAAW;;;yGAKvB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;2GAE5B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;2GAG5B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;2GAI7B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;2GAY5B,CAAC"}

package/dist/canvas/components/AgentCanvas/nodes/AgentNode.styles.js

@@ -37,7 +37,7 @@ const InstructionsPreview = styled.div`
   font-size: 9px;
   line-height: 13px;
   color: var(--canvas-foreground-de-emp);
-  cursor: pointer;
+  cursor: ${({ $isInteractive })=>$isInteractive ? 'pointer' : 'default'};
 `;
 const InstructionsLine = styled.div`
   white-space: nowrap;

package/dist/canvas/components/BaseCanvas/BaseCanvas.cjs

@@ -36,13 +36,15 @@ const external_CanvasBackground_cjs_namespaceObject = require("./CanvasBackgroun
 const external_CanvasProviders_cjs_namespaceObject = require("./CanvasProviders.cjs");
 const external_PanShortcutTeachingUI_cjs_namespaceObject = require("./PanShortcutTeachingUI.cjs");
 const external_ReadOnlyNodesContext_cjs_namespaceObject = require("./ReadOnlyNodesContext.cjs");
+const external_useReadOnlyConnectionCallbacks_cjs_namespaceObject = require("./useReadOnlyConnectionCallbacks.cjs");
 const BaseCanvasInnerComponent = (props)=>{
     const { innerRef, fitViewOptions: fitViewOptionsProps, ...canvasProps } = props;
     const fitViewOptions = fitViewOptionsProps ?? external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.fitViewOptions;
-    const { nodes = [], edges = [], nodeTypes, edgeTypes, children, mode = 'view', readOnlyNodeIds, showBackground = true, backgroundColor = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.background.color, backgroundSecondaryColor = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.background.bgColor, backgroundVariant = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.background.variant, backgroundGap = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.background.gap, backgroundSize = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.background.size, isDarkMode, locale, minZoom = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.zoom.min, maxZoom = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.zoom.max, defaultViewport = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.defaultViewport, defaultEdgeOptions = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.edge, stickyNoteOptions, onNodesChange, onEdgesChange, onConnect, onConnectStart, onConnectEnd, onNodeClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onPaneClick, onInit, onSelectionChange, onBeforeDelete, proOptions = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.pro, connectionMode = react_cjs_namespaceObject.ConnectionMode.Loose, connectionLineComponent, connectionLineStyle, deleteKeyCode = null, selectNodesOnDrag = true, nodesDraggable = true, nodesConnectable = true, elementsSelectable = true, onlyRenderVisibleElements = true, zoomOnDoubleClick = true, snapToGrid = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.snapToGrid, snapGrid = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.snapGrid, initialAutoLayout, maintainNodesInView, onToolbarAction, breakpoints, panShortcutTeachingUIMessage = 'Hold Space and drag to pan around the canvas!', ...reactFlowProps } = canvasProps;
+    const { nodes = [], edges = [], nodeTypes, edgeTypes, children, mode = 'view', readOnlyNodeIds, showBackground = true, backgroundColor = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.background.color, backgroundSecondaryColor = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.background.bgColor, backgroundVariant = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.background.variant, backgroundGap = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.background.gap, backgroundSize = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.background.size, isDarkMode, locale, minZoom = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.zoom.min, maxZoom = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.zoom.max, defaultViewport = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.defaultViewport, defaultEdgeOptions = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.edge, stickyNoteOptions, onNodesChange, onEdgesChange, onConnect, onReconnect, onReconnectStart, onReconnectEnd, onConnectStart, onConnectEnd, isValidConnection, onNodeClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onPaneClick, onInit, onSelectionChange, onBeforeDelete, proOptions = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.pro, connectionMode = react_cjs_namespaceObject.ConnectionMode.Loose, connectionLineComponent, connectionLineStyle, deleteKeyCode = null, selectNodesOnDrag = true, nodesDraggable = true, nodesConnectable = true, elementsSelectable = true, onlyRenderVisibleElements = true, zoomOnDoubleClick = true, snapToGrid = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.snapToGrid, snapGrid = external_BaseCanvas_constants_cjs_namespaceObject.BASE_CANVAS_DEFAULTS.snapGrid, initialAutoLayout, maintainNodesInView, onToolbarAction, breakpoints, panShortcutTeachingUIMessage = 'Hold Space and drag to pan around the canvas!', ...reactFlowProps } = canvasProps;
     const isInteractive = 'readonly' !== mode;
     const isDesignMode = 'design' === mode;
     const stableReadOnlyNodeIds = (0, external_ReadOnlyNodesContext_cjs_namespaceObject.useStableNodeIdSet)(readOnlyNodeIds);
+    const readOnlyEdgeIds = (0, external_BaseCanvas_hooks_cjs_namespaceObject.useReadOnlyEdgeIds)(edges, stableReadOnlyNodeIds);
     const guardedBeforeDelete = (0, external_BaseCanvas_hooks_cjs_namespaceObject.useReadOnlyBeforeDelete)(stableReadOnlyNodeIds, onBeforeDelete);
     const handleNodesChange = (0, external_react_namespaceObject.useMemo)(()=>{
         if (!onNodesChange || 0 === stableReadOnlyNodeIds.size) return onNodesChange;
@@ -55,6 +57,24 @@ const BaseCanvasInnerComponent = (props)=>{
         onNodesChange,
         stableReadOnlyNodeIds
     ]);
+    const handleEdgesChange = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (!onEdgesChange || 0 === readOnlyEdgeIds.size) return onEdgesChange;
+        const guarded = (changes)=>{
+            const allowed = changes.filter((change)=>'remove' === change.type ? !readOnlyEdgeIds.has(change.id) : true);
+            if (allowed.length > 0) onEdgesChange(allowed);
+        };
+        return guarded;
+    }, [
+        onEdgesChange,
+        readOnlyEdgeIds
+    ]);
+    const { guardedIsValidConnection, guardedOnConnect, guardedOnReconnect, guardedOnReconnectEnd } = (0, external_useReadOnlyConnectionCallbacks_cjs_namespaceObject.useReadOnlyConnectionCallbacks)({
+        readOnlyNodeIds: stableReadOnlyNodeIds,
+        isValidConnection,
+        onConnect,
+        onReconnect,
+        onReconnectEnd
+    });
     const [reactFlowInstance, setReactFlowInstance] = (0, external_react_namespaceObject.useState)();
     const { isReady } = (0, external_BaseCanvas_hooks_cjs_namespaceObject.useAutoLayout)(nodes, initialAutoLayout, fitViewOptions);
     const { ensureNodesInView, ensureAllNodesInView, centerNode } = (0, external_BaseCanvas_hooks_cjs_namespaceObject.useEnsureNodesInView)();
@@ -96,6 +116,7 @@ const BaseCanvasInnerComponent = (props)=>{
             colorMode: '',
             nodes: nodes,
             edges: edges,
+            isValidConnection: guardedIsValidConnection,
             nodeTypes: nodeTypes,
             edgeTypes: edgeTypes,
             fitViewOptions: fitViewOptions,
@@ -121,9 +142,12 @@ const BaseCanvasInnerComponent = (props)=>{
             panOnDrag: isInteractive ? external_BaseCanvas_constants_cjs_namespaceObject.PAN_ON_DRAG : false,
             onInit: handleInit,
             onNodesChange: isInteractive ? handleNodesChange : void 0,
-            onEdgesChange: isInteractive ? onEdgesChange : void 0,
+            onEdgesChange: isInteractive ? handleEdgesChange : void 0,
             onBeforeDelete: guardedBeforeDelete,
-            onConnect: isDesignMode ? onConnect : void 0,
+            onConnect: isDesignMode ? guardedOnConnect : void 0,
+            onReconnect: isDesignMode ? guardedOnReconnect : void 0,
+            onReconnectStart: isDesignMode ? onReconnectStart : void 0,
+            onReconnectEnd: isDesignMode ? guardedOnReconnectEnd : void 0,
             onConnectStart: isDesignMode ? onConnectStart : void 0,
             onConnectEnd: isDesignMode ? onConnectEnd : void 0,
             onNodeClick: isInteractive ? onNodeClick : void 0,

package/dist/canvas/components/BaseCanvas/BaseCanvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseCanvas.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseCanvas/BaseCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,IAAI,EACJ,IAAI,EAEL,MAAM,0CAA0C,CAAC;AAElD,OAAO,EAIL,KAAK,YAAY,EAKlB,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAqOzE,eAAO,MAAM,UAAU,EAKjB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,EAC/D,KAAK,EAAE,eAAe,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG;IAC3C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;CACpD,KACE,YAAY,CAAC"}
+{"version":3,"file":"BaseCanvas.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseCanvas/BaseCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,IAAI,EACJ,IAAI,EAEL,MAAM,0CAA0C,CAAC;AAElD,OAAO,EAIL,KAAK,YAAY,EAKlB,MAAM,OAAO,CAAC;AAUf,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAwQzE,eAAO,MAAM,UAAU,EAKjB,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,EAC/D,KAAK,EAAE,eAAe,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG;IAC3C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;CACpD,KACE,YAAY,CAAC"}

package/dist/canvas/components/BaseCanvas/BaseCanvas.hooks.cjs

@@ -28,11 +28,14 @@ __webpack_require__.d(__webpack_exports__, {
     useMaintainNodesInView: ()=>useMaintainNodesInView,
     useEnsureNodesInView: ()=>useEnsureNodesInView,
     useReadOnlyBeforeDelete: ()=>useReadOnlyBeforeDelete,
+    useReadOnlyEdgeIds: ()=>useReadOnlyEdgeIds,
     useFitView: ()=>useFitView
 });
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
 const external_react_namespaceObject = require("react");
 const external_BaseCanvas_constants_cjs_namespaceObject = require("./BaseCanvas.constants.cjs");
+const external_ReadOnlyNodesContext_cjs_namespaceObject = require("./ReadOnlyNodesContext.cjs");
+const external_set_utils_cjs_namespaceObject = require("./set-utils.cjs");
 const waitForNodeMeasurements = (getNodes)=>new Promise((resolve)=>{
         const startTime = Date.now();
         const timeoutInMs = 500;
@@ -254,12 +257,14 @@ function useReadOnlyBeforeDelete(readOnlyNodeIds, onBeforeDelete) {
             const vetoedNodeIds = new Set();
             const deletedNodeIds = new Set();
             for (const node of candidate.nodes)(readOnlyNodeIds.has(node.id) ? vetoedNodeIds : deletedNodeIds).add(node.id);
-            if (0 === vetoedNodeIds.size) return candidate;
             const touchesVetoedNode = (edge)=>vetoedNodeIds.has(edge.source) || vetoedNodeIds.has(edge.target);
             const touchesDeletedNode = (edge)=>deletedNodeIds.has(edge.source) || deletedNodeIds.has(edge.target);
+            const isFrozen = (edge)=>(0, external_ReadOnlyNodesContext_cjs_namespaceObject.isConnectionReadOnly)(readOnlyNodeIds, edge.source, edge.target);
+            const keptEdges = candidate.edges.filter((edge)=>!isFrozen(edge) && (!touchesVetoedNode(edge) || touchesDeletedNode(edge)));
+            if (0 === vetoedNodeIds.size && keptEdges.length === candidate.edges.length) return candidate;
             return {
                 nodes: candidate.nodes.filter((node)=>!vetoedNodeIds.has(node.id)),
-                edges: candidate.edges.filter((edge)=>!touchesVetoedNode(edge) || touchesDeletedNode(edge))
+                edges: keptEdges
             };
         };
     }, [
@@ -267,17 +272,30 @@ function useReadOnlyBeforeDelete(readOnlyNodeIds, onBeforeDelete) {
         onBeforeDelete
     ]);
 }
+function useReadOnlyEdgeIds(edges, readOnlyNodeIds) {
+    return (0, external_react_namespaceObject.useMemo)(()=>{
+        if (0 === readOnlyNodeIds.size) return external_set_utils_cjs_namespaceObject.EMPTY_SET;
+        const frozen = new Set();
+        for (const edge of edges)if ((0, external_ReadOnlyNodesContext_cjs_namespaceObject.isConnectionReadOnly)(readOnlyNodeIds, edge.source, edge.target)) frozen.add(edge.id);
+        return 0 === frozen.size ? external_set_utils_cjs_namespaceObject.EMPTY_SET : frozen;
+    }, [
+        edges,
+        readOnlyNodeIds
+    ]);
+}
 exports.useAutoLayout = __webpack_exports__.useAutoLayout;
 exports.useEnsureNodesInView = __webpack_exports__.useEnsureNodesInView;
 exports.useFitView = __webpack_exports__.useFitView;
 exports.useMaintainNodesInView = __webpack_exports__.useMaintainNodesInView;
 exports.useReadOnlyBeforeDelete = __webpack_exports__.useReadOnlyBeforeDelete;
+exports.useReadOnlyEdgeIds = __webpack_exports__.useReadOnlyEdgeIds;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "useAutoLayout",
     "useEnsureNodesInView",
     "useFitView",
     "useMaintainNodesInView",
-    "useReadOnlyBeforeDelete"
+    "useReadOnlyBeforeDelete",
+    "useReadOnlyEdgeIds"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

package/dist/canvas/components/BaseCanvas/BaseCanvas.hooks.d.ts

@@ -13,4 +13,5 @@ export declare const useEnsureNodesInView: () => {
 };
 export declare const useMaintainNodesInView: (nodeIds?: string[], fitViewOptions?: BaseCanvasFitViewOptions) => void;
 export declare function useReadOnlyBeforeDelete<NodeType extends Node, EdgeType extends Edge>(readOnlyNodeIds: ReadonlySet<string>, onBeforeDelete: OnBeforeDelete<NodeType, EdgeType> | undefined): OnBeforeDelete<NodeType, EdgeType> | undefined;
+export declare function useReadOnlyEdgeIds<EdgeType extends Edge>(edges: EdgeType[], readOnlyNodeIds: ReadonlySet<string>): ReadonlySet<string>;
 //# sourceMappingURL=BaseCanvas.hooks.d.ts.map

package/dist/canvas/components/BaseCanvas/BaseCanvas.hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseCanvas.hooks.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseCanvas/BaseCanvas.hooks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAI3F,OAAO,KAAK,EAAE,wBAAwB,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAqB7F,eAAO,MAAM,aAAa,GACxB,OAAO,IAAI,EAAE,GAAG,SAAS,EACzB,oBAAoB,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,EAC9C,iBAAiB,wBAAwB;;CA+E1C,CAAC;AAEF,eAAO,MAAM,UAAU,GACrB,QAAQ,IAAI,EAAE,EACd,QAAQ,MAAM,EACd,iBAAiB,wBAAwB;;CAgC1C,CAAC;AAEF,eAAO,MAAM,oBAAoB;iCAInB,MAAM,EAAE,YAAY,wBAAwB;qCA4B3C,wBAAwB;yBAqB1B,MAAM,YAAY,wBAAwB;CAgCtD,CAAC;AAqCF,eAAO,MAAM,sBAAsB,GACjC,UAAU,MAAM,EAAE,EAClB,iBAAiB,wBAAwB,SAuE1C,CAAC;AAiBF,wBAAgB,uBAAuB,CAAC,QAAQ,SAAS,IAAI,EAAE,QAAQ,SAAS,IAAI,EAClF,eAAe,EAAE,WAAW,CAAC,MAAM,CAAC,EACpC,cAAc,EAAE,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,SAAS,GAC7D,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,SAAS,CA+BhD"}
+{"version":3,"file":"BaseCanvas.hooks.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseCanvas/BaseCanvas.hooks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAI3F,OAAO,KAAK,EAAE,wBAAwB,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAuB7F,eAAO,MAAM,aAAa,GACxB,OAAO,IAAI,EAAE,GAAG,SAAS,EACzB,oBAAoB,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,EAC9C,iBAAiB,wBAAwB;;CA+E1C,CAAC;AAEF,eAAO,MAAM,UAAU,GACrB,QAAQ,IAAI,EAAE,EACd,QAAQ,MAAM,EACd,iBAAiB,wBAAwB;;CAgC1C,CAAC;AAEF,eAAO,MAAM,oBAAoB;iCAInB,MAAM,EAAE,YAAY,wBAAwB;qCA4B3C,wBAAwB;yBAqB1B,MAAM,YAAY,wBAAwB;CAgCtD,CAAC;AAqCF,eAAO,MAAM,sBAAsB,GACjC,UAAU,MAAM,EAAE,EAClB,iBAAiB,wBAAwB,SAuE1C,CAAC;AA2BF,wBAAgB,uBAAuB,CAAC,QAAQ,SAAS,IAAI,EAAE,QAAQ,SAAS,IAAI,EAClF,eAAe,EAAE,WAAW,CAAC,MAAM,CAAC,EACpC,cAAc,EAAE,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,SAAS,GAC7D,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,SAAS,CAqChD;AAMD,wBAAgB,kBAAkB,CAAC,QAAQ,SAAS,IAAI,EACtD,KAAK,EAAE,QAAQ,EAAE,EACjB,eAAe,EAAE,WAAW,CAAC,MAAM,CAAC,GACnC,WAAW,CAAC,MAAM,CAAC,CAWrB"}

package/dist/canvas/components/BaseCanvas/BaseCanvas.hooks.js

@@ -1,6 +1,8 @@
 import { useReactFlow, useStoreApi } from "../../xyflow/react.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { BASE_CANVAS_DEFAULTS, FIT_VIEW_DELAY_MS } from "./BaseCanvas.constants.js";
+import { isConnectionReadOnly } from "./ReadOnlyNodesContext.js";
+import { EMPTY_SET } from "./set-utils.js";
 const waitForNodeMeasurements = (getNodes)=>new Promise((resolve)=>{
         const startTime = Date.now();
         const timeoutInMs = 500;
@@ -222,12 +224,14 @@ function useReadOnlyBeforeDelete(readOnlyNodeIds, onBeforeDelete) {
             const vetoedNodeIds = new Set();
             const deletedNodeIds = new Set();
             for (const node of candidate.nodes)(readOnlyNodeIds.has(node.id) ? vetoedNodeIds : deletedNodeIds).add(node.id);
-            if (0 === vetoedNodeIds.size) return candidate;
             const touchesVetoedNode = (edge)=>vetoedNodeIds.has(edge.source) || vetoedNodeIds.has(edge.target);
             const touchesDeletedNode = (edge)=>deletedNodeIds.has(edge.source) || deletedNodeIds.has(edge.target);
+            const isFrozen = (edge)=>isConnectionReadOnly(readOnlyNodeIds, edge.source, edge.target);
+            const keptEdges = candidate.edges.filter((edge)=>!isFrozen(edge) && (!touchesVetoedNode(edge) || touchesDeletedNode(edge)));
+            if (0 === vetoedNodeIds.size && keptEdges.length === candidate.edges.length) return candidate;
             return {
                 nodes: candidate.nodes.filter((node)=>!vetoedNodeIds.has(node.id)),
-                edges: candidate.edges.filter((edge)=>!touchesVetoedNode(edge) || touchesDeletedNode(edge))
+                edges: keptEdges
             };
         };
     }, [
@@ -235,4 +239,15 @@ function useReadOnlyBeforeDelete(readOnlyNodeIds, onBeforeDelete) {
         onBeforeDelete
     ]);
 }
-export { useAutoLayout, useEnsureNodesInView, useFitView, useMaintainNodesInView, useReadOnlyBeforeDelete };
+function useReadOnlyEdgeIds(edges, readOnlyNodeIds) {
+    return useMemo(()=>{
+        if (0 === readOnlyNodeIds.size) return EMPTY_SET;
+        const frozen = new Set();
+        for (const edge of edges)if (isConnectionReadOnly(readOnlyNodeIds, edge.source, edge.target)) frozen.add(edge.id);
+        return 0 === frozen.size ? EMPTY_SET : frozen;
+    }, [
+        edges,
+        readOnlyNodeIds
+    ]);
+}
+export { useAutoLayout, useEnsureNodesInView, useFitView, useMaintainNodesInView, useReadOnlyBeforeDelete, useReadOnlyEdgeIds };

package/dist/canvas/components/BaseCanvas/BaseCanvas.js

@@ -3,18 +3,20 @@ import { ConnectionMode, ReactFlow } from "../../xyflow/react.js";
 import { forwardRef, memo, useCallback, useImperativeHandle, useMemo, useState } from "react";
 import { useToolbarActionStore } from "../../hooks/ToolbarActionContext.js";
 import { BASE_CANVAS_DEFAULTS, PAN_ON_DRAG } from "./BaseCanvas.constants.js";
-import { useAutoLayout, useEnsureNodesInView, useMaintainNodesInView, useReadOnlyBeforeDelete } from "./BaseCanvas.hooks.js";
+import { useAutoLayout, useEnsureNodesInView, useMaintainNodesInView, useReadOnlyBeforeDelete, useReadOnlyEdgeIds } from "./BaseCanvas.hooks.js";
 import { CanvasBackground } from "./CanvasBackground.js";
 import { CanvasProviders } from "./CanvasProviders.js";
 import { PanShortcutTeachingUI } from "./PanShortcutTeachingUI.js";
 import { useStableNodeIdSet } from "./ReadOnlyNodesContext.js";
+import { useReadOnlyConnectionCallbacks } from "./useReadOnlyConnectionCallbacks.js";
 const BaseCanvasInnerComponent = (props)=>{
     const { innerRef, fitViewOptions: fitViewOptionsProps, ...canvasProps } = props;
     const fitViewOptions = fitViewOptionsProps ?? BASE_CANVAS_DEFAULTS.fitViewOptions;
-    const { nodes = [], edges = [], nodeTypes, edgeTypes, children, mode = 'view', readOnlyNodeIds, showBackground = true, backgroundColor = BASE_CANVAS_DEFAULTS.background.color, backgroundSecondaryColor = BASE_CANVAS_DEFAULTS.background.bgColor, backgroundVariant = BASE_CANVAS_DEFAULTS.background.variant, backgroundGap = BASE_CANVAS_DEFAULTS.background.gap, backgroundSize = BASE_CANVAS_DEFAULTS.background.size, isDarkMode, locale, minZoom = BASE_CANVAS_DEFAULTS.zoom.min, maxZoom = BASE_CANVAS_DEFAULTS.zoom.max, defaultViewport = BASE_CANVAS_DEFAULTS.defaultViewport, defaultEdgeOptions = BASE_CANVAS_DEFAULTS.edge, stickyNoteOptions, onNodesChange, onEdgesChange, onConnect, onConnectStart, onConnectEnd, onNodeClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onPaneClick, onInit, onSelectionChange, onBeforeDelete, proOptions = BASE_CANVAS_DEFAULTS.pro, connectionMode = ConnectionMode.Loose, connectionLineComponent, connectionLineStyle, deleteKeyCode = null, selectNodesOnDrag = true, nodesDraggable = true, nodesConnectable = true, elementsSelectable = true, onlyRenderVisibleElements = true, zoomOnDoubleClick = true, snapToGrid = BASE_CANVAS_DEFAULTS.snapToGrid, snapGrid = BASE_CANVAS_DEFAULTS.snapGrid, initialAutoLayout, maintainNodesInView, onToolbarAction, breakpoints, panShortcutTeachingUIMessage = 'Hold Space and drag to pan around the canvas!', ...reactFlowProps } = canvasProps;
+    const { nodes = [], edges = [], nodeTypes, edgeTypes, children, mode = 'view', readOnlyNodeIds, showBackground = true, backgroundColor = BASE_CANVAS_DEFAULTS.background.color, backgroundSecondaryColor = BASE_CANVAS_DEFAULTS.background.bgColor, backgroundVariant = BASE_CANVAS_DEFAULTS.background.variant, backgroundGap = BASE_CANVAS_DEFAULTS.background.gap, backgroundSize = BASE_CANVAS_DEFAULTS.background.size, isDarkMode, locale, minZoom = BASE_CANVAS_DEFAULTS.zoom.min, maxZoom = BASE_CANVAS_DEFAULTS.zoom.max, defaultViewport = BASE_CANVAS_DEFAULTS.defaultViewport, defaultEdgeOptions = BASE_CANVAS_DEFAULTS.edge, stickyNoteOptions, onNodesChange, onEdgesChange, onConnect, onReconnect, onReconnectStart, onReconnectEnd, onConnectStart, onConnectEnd, isValidConnection, onNodeClick, onNodeDragStart, onNodeDrag, onNodeDragStop, onPaneClick, onInit, onSelectionChange, onBeforeDelete, proOptions = BASE_CANVAS_DEFAULTS.pro, connectionMode = ConnectionMode.Loose, connectionLineComponent, connectionLineStyle, deleteKeyCode = null, selectNodesOnDrag = true, nodesDraggable = true, nodesConnectable = true, elementsSelectable = true, onlyRenderVisibleElements = true, zoomOnDoubleClick = true, snapToGrid = BASE_CANVAS_DEFAULTS.snapToGrid, snapGrid = BASE_CANVAS_DEFAULTS.snapGrid, initialAutoLayout, maintainNodesInView, onToolbarAction, breakpoints, panShortcutTeachingUIMessage = 'Hold Space and drag to pan around the canvas!', ...reactFlowProps } = canvasProps;
     const isInteractive = 'readonly' !== mode;
     const isDesignMode = 'design' === mode;
     const stableReadOnlyNodeIds = useStableNodeIdSet(readOnlyNodeIds);
+    const readOnlyEdgeIds = useReadOnlyEdgeIds(edges, stableReadOnlyNodeIds);
     const guardedBeforeDelete = useReadOnlyBeforeDelete(stableReadOnlyNodeIds, onBeforeDelete);
     const handleNodesChange = useMemo(()=>{
         if (!onNodesChange || 0 === stableReadOnlyNodeIds.size) return onNodesChange;
@@ -27,6 +29,24 @@ const BaseCanvasInnerComponent = (props)=>{
         onNodesChange,
         stableReadOnlyNodeIds
     ]);
+    const handleEdgesChange = useMemo(()=>{
+        if (!onEdgesChange || 0 === readOnlyEdgeIds.size) return onEdgesChange;
+        const guarded = (changes)=>{
+            const allowed = changes.filter((change)=>'remove' === change.type ? !readOnlyEdgeIds.has(change.id) : true);
+            if (allowed.length > 0) onEdgesChange(allowed);
+        };
+        return guarded;
+    }, [
+        onEdgesChange,
+        readOnlyEdgeIds
+    ]);
+    const { guardedIsValidConnection, guardedOnConnect, guardedOnReconnect, guardedOnReconnectEnd } = useReadOnlyConnectionCallbacks({
+        readOnlyNodeIds: stableReadOnlyNodeIds,
+        isValidConnection,
+        onConnect,
+        onReconnect,
+        onReconnectEnd
+    });
     const [reactFlowInstance, setReactFlowInstance] = useState();
     const { isReady } = useAutoLayout(nodes, initialAutoLayout, fitViewOptions);
     const { ensureNodesInView, ensureAllNodesInView, centerNode } = useEnsureNodesInView();
@@ -68,6 +88,7 @@ const BaseCanvasInnerComponent = (props)=>{
             colorMode: '',
             nodes: nodes,
             edges: edges,
+            isValidConnection: guardedIsValidConnection,
             nodeTypes: nodeTypes,
             edgeTypes: edgeTypes,
             fitViewOptions: fitViewOptions,
@@ -93,9 +114,12 @@ const BaseCanvasInnerComponent = (props)=>{
             panOnDrag: isInteractive ? PAN_ON_DRAG : false,
             onInit: handleInit,
             onNodesChange: isInteractive ? handleNodesChange : void 0,
-            onEdgesChange: isInteractive ? onEdgesChange : void 0,
+            onEdgesChange: isInteractive ? handleEdgesChange : void 0,
             onBeforeDelete: guardedBeforeDelete,
-            onConnect: isDesignMode ? onConnect : void 0,
+            onConnect: isDesignMode ? guardedOnConnect : void 0,
+            onReconnect: isDesignMode ? guardedOnReconnect : void 0,
+            onReconnectStart: isDesignMode ? onReconnectStart : void 0,
+            onReconnectEnd: isDesignMode ? guardedOnReconnectEnd : void 0,
             onConnectStart: isDesignMode ? onConnectStart : void 0,
             onConnectEnd: isDesignMode ? onConnectEnd : void 0,
             onNodeClick: isInteractive ? onNodeClick : void 0,