@uipath/apollo-react 6.25.0 → 6.27.0

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

@@ -79,88 +79,125 @@ var __webpack_exports__ = {};
     __webpack_require__.r(__webpack_exports__);
     __webpack_require__.d(__webpack_exports__, {
         BaseCanvas: ()=>_BaseCanvas__rspack_import_0.BaseCanvas,
-        useIsNodeReadOnly: ()=>_ReadOnlyNodesContext__rspack_import_9.useIsNodeReadOnly
+        useAutoLayout: ()=>_BaseCanvas_hooks__rspack_import_2.useAutoLayout,
+        useEnsureNodesInView: ()=>_BaseCanvas_hooks__rspack_import_2.useEnsureNodesInView,
+        useFitView: ()=>_BaseCanvas_hooks__rspack_import_2.useFitView,
+        useIsNodeReadOnly: ()=>_ReadOnlyNodesContext__rspack_import_9.useIsNodeReadOnly,
+        useMaintainNodesInView: ()=>_BaseCanvas_hooks__rspack_import_2.useMaintainNodesInView
     });
     var _BaseCanvas__rspack_import_0 = __webpack_require__("./BaseCanvas?388c");
     var _BaseCanvas_constants__rspack_import_1 = __webpack_require__("./BaseCanvas.constants");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _BaseCanvas_constants__rspack_import_1)if ([
+        "useAutoLayout",
+        "useMaintainNodesInView",
+        "useEnsureNodesInView",
+        "default",
         "useIsNodeReadOnly",
         "BaseCanvas",
-        "default"
+        "useFitView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_BaseCanvas_constants__rspack_import_1[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
     var _BaseCanvas_hooks__rspack_import_2 = __webpack_require__("./BaseCanvas.hooks");
-    var __rspack_reexport = {};
-    for(const __rspack_import_key in _BaseCanvas_hooks__rspack_import_2)if ([
-        "useIsNodeReadOnly",
-        "BaseCanvas",
-        "default"
-    ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_BaseCanvas_hooks__rspack_import_2[__rspack_import_key];
-    __webpack_require__.d(__webpack_exports__, __rspack_reexport);
     var _BaseCanvas_types__rspack_import_3 = __webpack_require__("./BaseCanvas.types");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _BaseCanvas_types__rspack_import_3)if ([
+        "useAutoLayout",
+        "useMaintainNodesInView",
+        "useEnsureNodesInView",
+        "default",
         "useIsNodeReadOnly",
         "BaseCanvas",
-        "default"
+        "useFitView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_BaseCanvas_types__rspack_import_3[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
     var _BaseCanvasModeProvider__rspack_import_4 = __webpack_require__("./BaseCanvasModeProvider");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _BaseCanvasModeProvider__rspack_import_4)if ([
+        "useAutoLayout",
+        "useMaintainNodesInView",
+        "useEnsureNodesInView",
+        "default",
         "useIsNodeReadOnly",
         "BaseCanvas",
-        "default"
+        "useFitView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_BaseCanvasModeProvider__rspack_import_4[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
     var _CanvasBackground__rspack_import_5 = __webpack_require__("./CanvasBackground");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _CanvasBackground__rspack_import_5)if ([
+        "useAutoLayout",
+        "useMaintainNodesInView",
+        "useEnsureNodesInView",
+        "default",
         "useIsNodeReadOnly",
         "BaseCanvas",
-        "default"
+        "useFitView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_CanvasBackground__rspack_import_5[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
     var _CanvasProviders__rspack_import_6 = __webpack_require__("./CanvasProviders");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _CanvasProviders__rspack_import_6)if ([
+        "useAutoLayout",
+        "useMaintainNodesInView",
+        "useEnsureNodesInView",
+        "default",
         "useIsNodeReadOnly",
         "BaseCanvas",
-        "default"
+        "useFitView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_CanvasProviders__rspack_import_6[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
     var _CanvasThemeContext__rspack_import_7 = __webpack_require__("./CanvasThemeContext");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _CanvasThemeContext__rspack_import_7)if ([
+        "useAutoLayout",
+        "useMaintainNodesInView",
+        "useEnsureNodesInView",
+        "default",
         "useIsNodeReadOnly",
         "BaseCanvas",
-        "default"
+        "useFitView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_CanvasThemeContext__rspack_import_7[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
     var _ConnectedHandlesContext__rspack_import_8 = __webpack_require__("./ConnectedHandlesContext");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _ConnectedHandlesContext__rspack_import_8)if ([
+        "useAutoLayout",
+        "useMaintainNodesInView",
+        "useEnsureNodesInView",
+        "default",
         "useIsNodeReadOnly",
         "BaseCanvas",
-        "default"
+        "useFitView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_ConnectedHandlesContext__rspack_import_8[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
     var _ReadOnlyNodesContext__rspack_import_9 = __webpack_require__("./ReadOnlyNodesContext");
     var _SelectionStateContext__rspack_import_10 = __webpack_require__("./SelectionStateContext");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _SelectionStateContext__rspack_import_10)if ([
+        "useAutoLayout",
+        "useMaintainNodesInView",
+        "useEnsureNodesInView",
+        "default",
         "useIsNodeReadOnly",
         "BaseCanvas",
-        "default"
+        "useFitView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_SelectionStateContext__rspack_import_10[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
 })();
 exports.BaseCanvas = __webpack_exports__.BaseCanvas;
+exports.useAutoLayout = __webpack_exports__.useAutoLayout;
+exports.useEnsureNodesInView = __webpack_exports__.useEnsureNodesInView;
+exports.useFitView = __webpack_exports__.useFitView;
 exports.useIsNodeReadOnly = __webpack_exports__.useIsNodeReadOnly;
+exports.useMaintainNodesInView = __webpack_exports__.useMaintainNodesInView;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "BaseCanvas",
-    "useIsNodeReadOnly"
+    "useAutoLayout",
+    "useEnsureNodesInView",
+    "useFitView",
+    "useIsNodeReadOnly",
+    "useMaintainNodesInView"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

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

@@ -1,6 +1,6 @@
 export { BaseCanvas } from './BaseCanvas';
 export * from './BaseCanvas.constants';
-export * from './BaseCanvas.hooks';
+export { useAutoLayout, useEnsureNodesInView, useFitView, useMaintainNodesInView, } from './BaseCanvas.hooks';
 export * from './BaseCanvas.types';
 export * from './BaseCanvasModeProvider';
 export * from './CanvasBackground';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseCanvas/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAG1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseCanvas/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,OAAO,EACL,aAAa,EACb,oBAAoB,EACpB,UAAU,EACV,sBAAsB,GACvB,MAAM,oBAAoB,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAG1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,cAAc,yBAAyB,CAAC"}

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

@@ -1,7 +1,7 @@
 import { BaseCanvas } from "./BaseCanvas.js";
+import { useAutoLayout, useEnsureNodesInView, useFitView, useMaintainNodesInView } from "./BaseCanvas.hooks.js";
 import { useIsNodeReadOnly } from "./ReadOnlyNodesContext.js";
 export * from "./BaseCanvas.constants.js";
-export * from "./BaseCanvas.hooks.js";
 export * from "./BaseCanvas.types.js";
 export * from "./BaseCanvasModeProvider.js";
 export * from "./CanvasBackground.js";
@@ -9,4 +9,4 @@ export * from "./CanvasProviders.js";
 export * from "./CanvasThemeContext.js";
 export * from "./ConnectedHandlesContext.js";
 export * from "./SelectionStateContext.js";
-export { BaseCanvas, useIsNodeReadOnly };
+export { BaseCanvas, useAutoLayout, useEnsureNodesInView, useFitView, useIsNodeReadOnly, useMaintainNodesInView };

package/dist/canvas/components/BaseNode/BaseNode.cjs

@@ -41,17 +41,20 @@ const toolbar_resolver_cjs_namespaceObject = require("../../utils/toolbar-resolv
 const BaseCanvasModeProvider_cjs_namespaceObject = require("../BaseCanvas/BaseCanvasModeProvider.cjs");
 const CanvasThemeContext_cjs_namespaceObject = require("../BaseCanvas/CanvasThemeContext.cjs");
 const ConnectedHandlesContext_cjs_namespaceObject = require("../BaseCanvas/ConnectedHandlesContext.cjs");
+const ReadOnlyNodesContext_cjs_namespaceObject = require("../BaseCanvas/ReadOnlyNodesContext.cjs");
 const SelectionStateContext_cjs_namespaceObject = require("../BaseCanvas/SelectionStateContext.cjs");
 const SmartHandle_cjs_namespaceObject = require("../ButtonHandle/SmartHandle.cjs");
 const useButtonHandles_cjs_namespaceObject = require("../ButtonHandle/useButtonHandles.cjs");
 const InitialsBadge_cjs_namespaceObject = require("../shared/InitialsBadge.cjs");
 const external_Toolbar_index_cjs_namespaceObject = require("../Toolbar/index.cjs");
+const NodeToolbar_utils_cjs_namespaceObject = require("../Toolbar/NodeToolbar/NodeToolbar.utils.cjs");
 const external_BaseNodeBadgeSlot_cjs_namespaceObject = require("./BaseNodeBadgeSlot.cjs");
 const external_BaseNodeConfigContext_cjs_namespaceObject = require("./BaseNodeConfigContext.cjs");
 const external_BaseNodeContainer_cjs_namespaceObject = require("./BaseNodeContainer.cjs");
 const external_BaseNodeInnerShape_cjs_namespaceObject = require("./BaseNodeInnerShape.cjs");
 const external_BaseNodeMissingManifest_cjs_namespaceObject = require("./BaseNodeMissingManifest.cjs");
 const external_NodeLabel_cjs_namespaceObject = require("./NodeLabel.cjs");
+const NEVER_SHOW_ADD_BUTTON = ()=>false;
 const getContainerWidth = (shape, width)=>{
     const defaultWidth = 'rectangle' === shape ? external_constants_cjs_namespaceObject.DEFAULT_RECTANGLE_NODE_WIDTH : external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE;
     if (width && width !== external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE && width !== external_constants_cjs_namespaceObject.DEFAULT_RECTANGLE_NODE_WIDTH) return width;
@@ -80,6 +83,8 @@ const BaseNodeComponent = (props)=>{
     const validationState = (0, external_hooks_index_cjs_namespaceObject.useElementValidationStatus)(id);
     const nodeTypeRegistry = (0, index_cjs_namespaceObject.useNodeTypeRegistry)();
     const { mode } = (0, BaseCanvasModeProvider_cjs_namespaceObject.useBaseCanvasMode)();
+    const isNodeReadOnly = (0, ReadOnlyNodesContext_cjs_namespaceObject.useIsNodeReadOnly)(id);
+    const canEdit = 'design' === mode && !isNodeReadOnly;
     const connectedHandleIds = (0, ConnectedHandlesContext_cjs_namespaceObject.useConnectedHandles)(id);
     const isConnecting = (0, react_cjs_namespaceObject.useStore)(NodeUtils_cjs_namespaceObject.selectIsConnecting);
     const { multipleNodesSelected } = (0, SelectionStateContext_cjs_namespaceObject.useSelectionState)();
@@ -107,7 +112,7 @@ const BaseNodeComponent = (props)=>{
         mode
     ]);
     const onHandleActionCallback = onHandleActionProp;
-    const shouldShowAddButtonFn = shouldShowAddButtonFnProp;
+    const shouldShowAddButtonFn = isNodeReadOnly ? NEVER_SHOW_ADD_BUTTON : shouldShowAddButtonFnProp;
     const shouldShowButtonHandleNotchesFn = shouldShowButtonHandleNotchesFnProp;
     const executionStatus = executionStatusOverride ?? ('string' == typeof executionState ? executionState : executionState?.status);
     const display = (0, external_react_namespaceObject.useMemo)(()=>(0, manifest_resolver_cjs_namespaceObject.resolveDisplay)(manifest?.display, {
@@ -171,6 +176,10 @@ const BaseNodeComponent = (props)=>{
         manifest,
         statusContext
     ]);
+    const effectiveToolbarConfig = (0, external_react_namespaceObject.useMemo)(()=>toolbarConfig && isNodeReadOnly ? (0, NodeToolbar_utils_cjs_namespaceObject.lockToolbarConfig)(toolbarConfig) : toolbarConfig, [
+        toolbarConfig,
+        isNodeReadOnly
+    ]);
     const adornments = (0, external_react_namespaceObject.useMemo)(()=>{
         const adornmentsFromProps = adornmentsProp ?? {};
         const adornmentsFromResolver = (0, adornment_resolver_cjs_namespaceObject.resolveAdornments)(statusContext);
@@ -339,8 +348,8 @@ const BaseNodeComponent = (props)=>{
         if (multipleNodesSelected) return false;
         const { hasButton, hasLabel } = toolbarSideHandleAffordances;
         const isAddButtonShown = ()=>{
-            if (useSmartHandles) return 'design' === mode && !!selected;
-            const showAddButton = 'design' === mode && !isConnecting && !dragging;
+            if (useSmartHandles) return canEdit && !!selected;
+            const showAddButton = canEdit && !isConnecting && !dragging;
             if (shouldShowAddButtonFn) return shouldShowAddButtonFn({
                 showAddButton,
                 selected: !!selected
@@ -352,7 +361,7 @@ const BaseNodeComponent = (props)=>{
         return false;
     }, [
         toolbarSideHandleAffordances,
-        mode,
+        canEdit,
         multipleNodesSelected,
         useSmartHandles,
         selected,
@@ -370,7 +379,7 @@ const BaseNodeComponent = (props)=>{
         nodeId: id,
         selected: selected ?? false,
         hovered: isHovered,
-        showAddButton: 'design' === mode && !multipleNodesSelected && !isConnecting && !dragging,
+        showAddButton: canEdit && !multipleNodesSelected && !isConnecting && !dragging,
         showNotches,
         nodeWidth: containerWidth,
         nodeHeight: computedHeight,
@@ -388,7 +397,7 @@ const BaseNodeComponent = (props)=>{
                 const handleVisualType = handle.handleType ?? ('source' === handle.type ? 'output' : 'input');
                 const hasConnection = connectedHandleIds.has(handle.id);
                 const isVisible = hasConnection || shouldShowHandles && configVisible;
-                const shouldShowButton = 'design' === mode && selected && handle.showButton && !multipleNodesSelected;
+                const shouldShowButton = canEdit && selected && handle.showButton && !multipleNodesSelected;
                 return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SmartHandle_cjs_namespaceObject.SmartHandle, {
                     type: handle.type,
                     id: handle.id,
@@ -412,7 +421,7 @@ const BaseNodeComponent = (props)=>{
         shouldShowHandles,
         containerWidth,
         computedHeight,
-        mode,
+        canEdit,
         selected,
         showNotches,
         handleAction,
@@ -493,7 +502,8 @@ const BaseNodeComponent = (props)=>{
                         hasBottomHandles: hasVisibleBottomHandles,
                         selected: selected,
                         dragging: dragging,
-                        readonly: 'design' !== mode,
+                        readonly: !canEdit,
+                        discardDraftOnReadonly: isNodeReadOnly,
                         onChange: handleLabelChange
                     }),
                     displayFooter && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
@@ -502,9 +512,9 @@ const BaseNodeComponent = (props)=>{
                     })
                 ]
             }),
-            toolbarConfig && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbar_index_cjs_namespaceObject.NodeToolbar, {
+            effectiveToolbarConfig && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbar_index_cjs_namespaceObject.NodeToolbar, {
                 nodeId: id,
-                config: toolbarConfig,
+                config: effectiveToolbarConfig,
                 expanded: selected || isHovered,
                 hidden: dragging || multipleNodesSelected,
                 offsetToolbar: offsetToolbar

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

@@ -1 +1 @@
-{"version":3,"file":"BaseNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AA4ChF,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,kBAAkB,CAAC;AAkrB1B,eAAO,MAAM,QAAQ,8CAhpBa,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,6CAgpBmB,CAAC"}
+{"version":3,"file":"BaseNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AA+ChF,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,kBAAkB,CAAC;AAosB1B,eAAO,MAAM,QAAQ,8CA/pBa,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,6CA+pBmB,CAAC"}

package/dist/canvas/components/BaseNode/BaseNode.js

@@ -13,17 +13,20 @@ import { resolveToolbar } from "../../utils/toolbar-resolver.js";
 import { useBaseCanvasMode } from "../BaseCanvas/BaseCanvasModeProvider.js";
 import { useCanvasTheme } from "../BaseCanvas/CanvasThemeContext.js";
 import { useConnectedHandles } from "../BaseCanvas/ConnectedHandlesContext.js";
+import { useIsNodeReadOnly } from "../BaseCanvas/ReadOnlyNodesContext.js";
 import { useSelectionState } from "../BaseCanvas/SelectionStateContext.js";
 import { SmartHandle, SmartHandleProvider } from "../ButtonHandle/SmartHandle.js";
 import { useButtonHandles } from "../ButtonHandle/useButtonHandles.js";
 import { InitialsBadge } from "../shared/InitialsBadge.js";
 import { NodeToolbar } from "../Toolbar/index.js";
+import { lockToolbarConfig } from "../Toolbar/NodeToolbar/NodeToolbar.utils.js";
 import { BaseBadgeSlot } from "./BaseNodeBadgeSlot.js";
 import { useBaseNodeOverrideConfig } from "./BaseNodeConfigContext.js";
 import { BaseContainer } from "./BaseNodeContainer.js";
 import { BaseInnerShape } from "./BaseNodeInnerShape.js";
 import { MissingManifestNode } from "./BaseNodeMissingManifest.js";
 import { NodeLabel } from "./NodeLabel.js";
+const NEVER_SHOW_ADD_BUTTON = ()=>false;
 const getContainerWidth = (shape, width)=>{
     const defaultWidth = 'rectangle' === shape ? DEFAULT_RECTANGLE_NODE_WIDTH : DEFAULT_NODE_SIZE;
     if (width && width !== DEFAULT_NODE_SIZE && width !== DEFAULT_RECTANGLE_NODE_WIDTH) return width;
@@ -52,6 +55,8 @@ const BaseNodeComponent = (props)=>{
     const validationState = useElementValidationStatus(id);
     const nodeTypeRegistry = useNodeTypeRegistry();
     const { mode } = useBaseCanvasMode();
+    const isNodeReadOnly = useIsNodeReadOnly(id);
+    const canEdit = 'design' === mode && !isNodeReadOnly;
     const connectedHandleIds = useConnectedHandles(id);
     const isConnecting = useStore(selectIsConnecting);
     const { multipleNodesSelected } = useSelectionState();
@@ -79,7 +84,7 @@ const BaseNodeComponent = (props)=>{
         mode
     ]);
     const onHandleActionCallback = onHandleActionProp;
-    const shouldShowAddButtonFn = shouldShowAddButtonFnProp;
+    const shouldShowAddButtonFn = isNodeReadOnly ? NEVER_SHOW_ADD_BUTTON : shouldShowAddButtonFnProp;
     const shouldShowButtonHandleNotchesFn = shouldShowButtonHandleNotchesFnProp;
     const executionStatus = executionStatusOverride ?? ('string' == typeof executionState ? executionState : executionState?.status);
     const display = useMemo(()=>resolveDisplay(manifest?.display, {
@@ -143,6 +148,10 @@ const BaseNodeComponent = (props)=>{
         manifest,
         statusContext
     ]);
+    const effectiveToolbarConfig = useMemo(()=>toolbarConfig && isNodeReadOnly ? lockToolbarConfig(toolbarConfig) : toolbarConfig, [
+        toolbarConfig,
+        isNodeReadOnly
+    ]);
     const adornments = useMemo(()=>{
         const adornmentsFromProps = adornmentsProp ?? {};
         const adornmentsFromResolver = resolveAdornments(statusContext);
@@ -311,8 +320,8 @@ const BaseNodeComponent = (props)=>{
         if (multipleNodesSelected) return false;
         const { hasButton, hasLabel } = toolbarSideHandleAffordances;
         const isAddButtonShown = ()=>{
-            if (useSmartHandles) return 'design' === mode && !!selected;
-            const showAddButton = 'design' === mode && !isConnecting && !dragging;
+            if (useSmartHandles) return canEdit && !!selected;
+            const showAddButton = canEdit && !isConnecting && !dragging;
             if (shouldShowAddButtonFn) return shouldShowAddButtonFn({
                 showAddButton,
                 selected: !!selected
@@ -324,7 +333,7 @@ const BaseNodeComponent = (props)=>{
         return false;
     }, [
         toolbarSideHandleAffordances,
-        mode,
+        canEdit,
         multipleNodesSelected,
         useSmartHandles,
         selected,
@@ -342,7 +351,7 @@ const BaseNodeComponent = (props)=>{
         nodeId: id,
         selected: selected ?? false,
         hovered: isHovered,
-        showAddButton: 'design' === mode && !multipleNodesSelected && !isConnecting && !dragging,
+        showAddButton: canEdit && !multipleNodesSelected && !isConnecting && !dragging,
         showNotches,
         nodeWidth: containerWidth,
         nodeHeight: computedHeight,
@@ -360,7 +369,7 @@ const BaseNodeComponent = (props)=>{
                 const handleVisualType = handle.handleType ?? ('source' === handle.type ? 'output' : 'input');
                 const hasConnection = connectedHandleIds.has(handle.id);
                 const isVisible = hasConnection || shouldShowHandles && configVisible;
-                const shouldShowButton = 'design' === mode && selected && handle.showButton && !multipleNodesSelected;
+                const shouldShowButton = canEdit && selected && handle.showButton && !multipleNodesSelected;
                 return /*#__PURE__*/ jsx(SmartHandle, {
                     type: handle.type,
                     id: handle.id,
@@ -384,7 +393,7 @@ const BaseNodeComponent = (props)=>{
         shouldShowHandles,
         containerWidth,
         computedHeight,
-        mode,
+        canEdit,
         selected,
         showNotches,
         handleAction,
@@ -465,7 +474,8 @@ const BaseNodeComponent = (props)=>{
                         hasBottomHandles: hasVisibleBottomHandles,
                         selected: selected,
                         dragging: dragging,
-                        readonly: 'design' !== mode,
+                        readonly: !canEdit,
+                        discardDraftOnReadonly: isNodeReadOnly,
                         onChange: handleLabelChange
                     }),
                     displayFooter && /*#__PURE__*/ jsx("div", {
@@ -474,9 +484,9 @@ const BaseNodeComponent = (props)=>{
                     })
                 ]
             }),
-            toolbarConfig && /*#__PURE__*/ jsx(NodeToolbar, {
+            effectiveToolbarConfig && /*#__PURE__*/ jsx(NodeToolbar, {
                 nodeId: id,
-                config: toolbarConfig,
+                config: effectiveToolbarConfig,
                 expanded: selected || isHovered,
                 hidden: dragging || multipleNodesSelected,
                 offsetToolbar: offsetToolbar

package/dist/canvas/components/BaseNode/NodeLabel.cjs

@@ -95,14 +95,15 @@ const EditableLabel = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
         } : void 0
     }));
 EditableLabel.displayName = 'EditableLabel';
-const EmptyLabelPlaceholder = ({ onDoubleClick })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+const EmptyLabelPlaceholder = ({ disabled, onDoubleClick })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
         type: "button",
+        disabled: disabled,
         onDoubleClick: onDoubleClick,
         className: "nodrag nowheel text-sm leading-[18px] font-semibold text-foreground-muted bg-transparent border border-dashed border-border-de-emp rounded-sm cursor-pointer opacity-0 transition-opacity duration-200 min-w-5 min-h-5 hover:opacity-100",
         "aria-label": "Add node label",
         "data-testid": "empty-label-placeholder"
     });
-const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackgroundColor, shape, hasBottomHandles, selected, dragging, centerAdornment, readonly, onChange })=>{
+const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackgroundColor, shape, hasBottomHandles, selected, dragging, centerAdornment, readonly, discardDraftOnReadonly, onChange })=>{
     const [isEditing, setIsEditing] = (0, external_react_namespaceObject.useState)(false);
     const [localLabel, setLocalLabel] = (0, external_react_namespaceObject.useState)('');
     const [localSubLabel, setLocalSubLabel] = (0, external_react_namespaceObject.useState)('');
@@ -147,15 +148,6 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
         isEditing,
         focusTarget
     ]);
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        if (isEditing && (!selected || dragging || readonly)) handleSave();
-    }, [
-        selected,
-        dragging,
-        isEditing,
-        readonly,
-        handleSave
-    ]);
     const handleCancel = (0, external_react_namespaceObject.useCallback)(()=>{
         setIsEditing(false);
         setFocusTarget(null);
@@ -165,6 +157,19 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
         label,
         subLabel
     ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!isEditing) return;
+        if (readonly && discardDraftOnReadonly) handleCancel();
+        else if (!selected || dragging || readonly) handleSave();
+    }, [
+        selected,
+        dragging,
+        isEditing,
+        readonly,
+        discardDraftOnReadonly,
+        handleSave,
+        handleCancel
+    ]);
     const handleKeyDown = (0, external_react_namespaceObject.useCallback)((e)=>{
         if ('Enter' === e.key) {
             e.preventDefault();
@@ -191,6 +196,7 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
         shape: shape,
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(EmptyLabelPlaceholder, {
+                disabled: readonly,
                 onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef)
             }),
             centerAdornment

package/dist/canvas/components/BaseNode/NodeLabel.d.ts

@@ -16,11 +16,12 @@ export interface NodeLabelProps {
     dragging?: boolean;
     centerAdornment?: React.ReactNode;
     readonly?: boolean;
+    discardDraftOnReadonly?: boolean;
     onChange?: (values: {
         label: string;
         subLabel: string;
     }) => void;
 }
-export declare const NodeLabel: import("react").MemoExoticComponent<({ label, subLabel, labelTooltip, labelBackgroundColor, shape, hasBottomHandles, selected, dragging, centerAdornment, readonly, onChange, }: NodeLabelProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const NodeLabel: import("react").MemoExoticComponent<({ label, subLabel, labelTooltip, labelBackgroundColor, shape, hasBottomHandles, selected, dragging, centerAdornment, readonly, discardDraftOnReadonly, onChange, }: NodeLabelProps) => import("react/jsx-runtime").JSX.Element>;
 export {};
 //# sourceMappingURL=NodeLabel.d.ts.map

package/dist/canvas/components/BaseNode/NodeLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeLabel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/NodeLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,UAAU,sBAAsB;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,GAAI,wCAI/B,sBAAsB,4CAmBxB,CAAC;AAqKF,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAClE;AA2LD,eAAO,MAAM,SAAS,mLA7KnB,cAAc,6CA6K+B,CAAC"}
+{"version":3,"file":"NodeLabel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/NodeLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,UAAU,sBAAsB;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,GAAI,wCAI/B,sBAAsB,4CAmBxB,CAAC;AAyKF,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAClE;AAkMD,eAAO,MAAM,SAAS,2MAnLnB,cAAc,6CAmL+B,CAAC"}

package/dist/canvas/components/BaseNode/NodeLabel.js

@@ -66,14 +66,15 @@ const EditableLabel = /*#__PURE__*/ forwardRef(({ shape, backgroundColor, varian
         } : void 0
     }));
 EditableLabel.displayName = 'EditableLabel';
-const EmptyLabelPlaceholder = ({ onDoubleClick })=>/*#__PURE__*/ jsx("button", {
+const EmptyLabelPlaceholder = ({ disabled, onDoubleClick })=>/*#__PURE__*/ jsx("button", {
         type: "button",
+        disabled: disabled,
         onDoubleClick: onDoubleClick,
         className: "nodrag nowheel text-sm leading-[18px] font-semibold text-foreground-muted bg-transparent border border-dashed border-border-de-emp rounded-sm cursor-pointer opacity-0 transition-opacity duration-200 min-w-5 min-h-5 hover:opacity-100",
         "aria-label": "Add node label",
         "data-testid": "empty-label-placeholder"
     });
-const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackgroundColor, shape, hasBottomHandles, selected, dragging, centerAdornment, readonly, onChange })=>{
+const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackgroundColor, shape, hasBottomHandles, selected, dragging, centerAdornment, readonly, discardDraftOnReadonly, onChange })=>{
     const [isEditing, setIsEditing] = useState(false);
     const [localLabel, setLocalLabel] = useState('');
     const [localSubLabel, setLocalSubLabel] = useState('');
@@ -118,15 +119,6 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
         isEditing,
         focusTarget
     ]);
-    useEffect(()=>{
-        if (isEditing && (!selected || dragging || readonly)) handleSave();
-    }, [
-        selected,
-        dragging,
-        isEditing,
-        readonly,
-        handleSave
-    ]);
     const handleCancel = useCallback(()=>{
         setIsEditing(false);
         setFocusTarget(null);
@@ -136,6 +128,19 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
         label,
         subLabel
     ]);
+    useEffect(()=>{
+        if (!isEditing) return;
+        if (readonly && discardDraftOnReadonly) handleCancel();
+        else if (!selected || dragging || readonly) handleSave();
+    }, [
+        selected,
+        dragging,
+        isEditing,
+        readonly,
+        discardDraftOnReadonly,
+        handleSave,
+        handleCancel
+    ]);
     const handleKeyDown = useCallback((e)=>{
         if ('Enter' === e.key) {
             e.preventDefault();
@@ -162,6 +167,7 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
         shape: shape,
         children: [
             /*#__PURE__*/ jsx(EmptyLabelPlaceholder, {
+                disabled: readonly,
                 onDoubleClick: readonly ? void 0 : handleDoubleClick(labelInputRef)
             }),
             centerAdornment

package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.cjs

@@ -66,7 +66,7 @@ function shouldPersistNodeChange(change) {
 function isDefaultViewport(viewport) {
     return 0 === viewport.x && 0 === viewport.y && 1 === viewport.zoom;
 }
-const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onCanvasesChange, onPathChange })=>{
+const HierarchicalCanvas = ({ mode = 'design', readOnlyNodeIds, initialCanvases, initialPath, onCanvasesChange, onPathChange })=>{
     const canvasRef = (0, external_react_namespaceObject.useRef)(null);
     const containerRef = (0, external_react_namespaceObject.useRef)(null);
     const [reactFlowInstance, setReactFlowInstance] = (0, external_react_namespaceObject.useState)(null);
@@ -349,6 +349,7 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
                 onInit: handleInit,
                 onToolbarAction: handleToolbarAction,
                 mode: mode,
+                readOnlyNodeIds: readOnlyNodeIds,
                 defaultViewport: currentCanvas.viewport,
                 fitView: shouldFitView,
                 fitViewOptions: {

package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.d.ts

@@ -2,6 +2,7 @@ import type React from 'react';
 import type { CanvasLevel } from '../../types/canvas.types';
 interface HierarchicalCanvasProps {
     mode?: 'view' | 'design' | 'readonly';
+    readOnlyNodeIds?: ReadonlySet<string>;
     initialCanvases?: Record<string, CanvasLevel>;
     initialPath?: string[];
     onCanvasesChange?: (canvases: Record<string, CanvasLevel>) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"HierarchicalCanvas.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/HierarchicalCanvas/HierarchicalCanvas.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA8B/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAe5D,UAAU,uBAAuB;IAC/B,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;IAKtC,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IAK9C,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IAMvB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,KAAK,IAAI,CAAC;IAInE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACzC;AAyBD,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAmZhE,CAAC"}
+{"version":3,"file":"HierarchicalCanvas.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/HierarchicalCanvas/HierarchicalCanvas.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA8B/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAe5D,UAAU,uBAAuB;IAC/B,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;IAEtC,eAAe,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAKtC,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IAK9C,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IAMvB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,KAAK,IAAI,CAAC;IAInE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACzC;AAyBD,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAqZhE,CAAC"}

package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.js

@@ -38,7 +38,7 @@ function shouldPersistNodeChange(change) {
 function isDefaultViewport(viewport) {
     return 0 === viewport.x && 0 === viewport.y && 1 === viewport.zoom;
 }
-const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onCanvasesChange, onPathChange })=>{
+const HierarchicalCanvas = ({ mode = 'design', readOnlyNodeIds, initialCanvases, initialPath, onCanvasesChange, onPathChange })=>{
     const canvasRef = useRef(null);
     const containerRef = useRef(null);
     const [reactFlowInstance, setReactFlowInstance] = useState(null);
@@ -321,6 +321,7 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
                 onInit: handleInit,
                 onToolbarAction: handleToolbarAction,
                 mode: mode,
+                readOnlyNodeIds: readOnlyNodeIds,
                 defaultViewport: currentCanvas.viewport,
                 fitView: shouldFitView,
                 fitViewOptions: {