@uipath/apollo-react 6.24.0 → 6.26.0

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

@@ -35,12 +35,26 @@ const external_BaseCanvas_hooks_cjs_namespaceObject = require("./BaseCanvas.hook
 const external_CanvasBackground_cjs_namespaceObject = require("./CanvasBackground.cjs");
 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 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', 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, 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, 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 isInteractive = 'readonly' !== mode;
     const isDesignMode = 'design' === mode;
+    const stableReadOnlyNodeIds = (0, external_ReadOnlyNodesContext_cjs_namespaceObject.useStableNodeIdSet)(readOnlyNodeIds);
+    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;
+        const guarded = (changes)=>{
+            const allowed = changes.filter((change)=>!('remove' === change.type && stableReadOnlyNodeIds.has(change.id)));
+            if (allowed.length > 0) onNodesChange(allowed);
+        };
+        return guarded;
+    }, [
+        onNodesChange,
+        stableReadOnlyNodeIds
+    ]);
     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)();
@@ -76,6 +90,7 @@ const BaseCanvasInnerComponent = (props)=>{
         isDarkMode: isDarkMode,
         locale: locale,
         stickyNoteOptions: stickyNoteOptions,
+        readOnlyNodeIds: stableReadOnlyNodeIds,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_cjs_namespaceObject.ReactFlow, {
             ...reactFlowProps,
             colorMode: '',
@@ -105,8 +120,9 @@ const BaseCanvasInnerComponent = (props)=>{
             zoomOnDoubleClick: isInteractive && zoomOnDoubleClick,
             panOnDrag: isInteractive ? external_BaseCanvas_constants_cjs_namespaceObject.PAN_ON_DRAG : false,
             onInit: handleInit,
-            onNodesChange: isInteractive ? onNodesChange : void 0,
+            onNodesChange: isInteractive ? handleNodesChange : void 0,
             onEdgesChange: isInteractive ? onEdgesChange : void 0,
+            onBeforeDelete: guardedBeforeDelete,
             onConnect: isDesignMode ? onConnect : void 0,
             onConnectStart: isDesignMode ? onConnectStart : void 0,
             onConnectEnd: isDesignMode ? onConnectEnd : 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;AAIf,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAgNzE,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;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"}

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

@@ -27,6 +27,7 @@ __webpack_require__.d(__webpack_exports__, {
     useAutoLayout: ()=>useAutoLayout,
     useMaintainNodesInView: ()=>useMaintainNodesInView,
     useEnsureNodesInView: ()=>useEnsureNodesInView,
+    useReadOnlyBeforeDelete: ()=>useReadOnlyBeforeDelete,
     useFitView: ()=>useFitView
 });
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
@@ -237,15 +238,46 @@ const useMaintainNodesInView = (nodeIds, fitViewOptions)=>{
         fitViewOptions
     ]);
 };
+function useReadOnlyBeforeDelete(readOnlyNodeIds, onBeforeDelete) {
+    return (0, external_react_namespaceObject.useMemo)(()=>{
+        if (0 === readOnlyNodeIds.size) return onBeforeDelete;
+        return async ({ nodes, edges })=>{
+            const upstream = onBeforeDelete ? await onBeforeDelete({
+                nodes,
+                edges
+            }) : true;
+            if (false === upstream) return false;
+            const candidate = true === upstream ? {
+                nodes,
+                edges
+            } : upstream;
+            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);
+            return {
+                nodes: candidate.nodes.filter((node)=>!vetoedNodeIds.has(node.id)),
+                edges: candidate.edges.filter((edge)=>!touchesVetoedNode(edge) || touchesDeletedNode(edge))
+            };
+        };
+    }, [
+        readOnlyNodeIds,
+        onBeforeDelete
+    ]);
+}
 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;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "useAutoLayout",
     "useEnsureNodesInView",
     "useFitView",
-    "useMaintainNodesInView"
+    "useMaintainNodesInView",
+    "useReadOnlyBeforeDelete"
 ].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

@@ -1,4 +1,4 @@
-import type { Node } from '../../xyflow/react.ts';
+import type { Edge, Node, OnBeforeDelete } from '../../xyflow/react.ts';
 import type { BaseCanvasFitViewOptions, EnsureNodesInViewOptions } from './BaseCanvas.types';
 export declare const useAutoLayout: (nodes: Node[] | undefined, initialAutoLayout?: () => Promise<void> | void, fitViewOptions?: BaseCanvasFitViewOptions) => {
     isReady: boolean;
@@ -12,4 +12,5 @@ export declare const useEnsureNodesInView: () => {
     centerNode: (nodeId: string, options?: EnsureNodesInViewOptions) => void;
 };
 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;
 //# 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,MAAM,0CAA0C,CAAC;AAIrE,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"}
+{"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"}

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

@@ -1,5 +1,5 @@
 import { useReactFlow, useStoreApi } from "../../xyflow/react.js";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { BASE_CANVAS_DEFAULTS, FIT_VIEW_DELAY_MS } from "./BaseCanvas.constants.js";
 const waitForNodeMeasurements = (getNodes)=>new Promise((resolve)=>{
         const startTime = Date.now();
@@ -206,4 +206,33 @@ const useMaintainNodesInView = (nodeIds, fitViewOptions)=>{
         fitViewOptions
     ]);
 };
-export { useAutoLayout, useEnsureNodesInView, useFitView, useMaintainNodesInView };
+function useReadOnlyBeforeDelete(readOnlyNodeIds, onBeforeDelete) {
+    return useMemo(()=>{
+        if (0 === readOnlyNodeIds.size) return onBeforeDelete;
+        return async ({ nodes, edges })=>{
+            const upstream = onBeforeDelete ? await onBeforeDelete({
+                nodes,
+                edges
+            }) : true;
+            if (false === upstream) return false;
+            const candidate = true === upstream ? {
+                nodes,
+                edges
+            } : upstream;
+            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);
+            return {
+                nodes: candidate.nodes.filter((node)=>!vetoedNodeIds.has(node.id)),
+                edges: candidate.edges.filter((edge)=>!touchesVetoedNode(edge) || touchesDeletedNode(edge))
+            };
+        };
+    }, [
+        readOnlyNodeIds,
+        onBeforeDelete
+    ]);
+}
+export { useAutoLayout, useEnsureNodesInView, useFitView, useMaintainNodesInView, useReadOnlyBeforeDelete };

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

@@ -3,16 +3,30 @@ 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 } from "./BaseCanvas.hooks.js";
+import { useAutoLayout, useEnsureNodesInView, useMaintainNodesInView, useReadOnlyBeforeDelete } from "./BaseCanvas.hooks.js";
 import { CanvasBackground } from "./CanvasBackground.js";
 import { CanvasProviders } from "./CanvasProviders.js";
 import { PanShortcutTeachingUI } from "./PanShortcutTeachingUI.js";
+import { useStableNodeIdSet } from "./ReadOnlyNodesContext.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', 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, 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, 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 isInteractive = 'readonly' !== mode;
     const isDesignMode = 'design' === mode;
+    const stableReadOnlyNodeIds = useStableNodeIdSet(readOnlyNodeIds);
+    const guardedBeforeDelete = useReadOnlyBeforeDelete(stableReadOnlyNodeIds, onBeforeDelete);
+    const handleNodesChange = useMemo(()=>{
+        if (!onNodesChange || 0 === stableReadOnlyNodeIds.size) return onNodesChange;
+        const guarded = (changes)=>{
+            const allowed = changes.filter((change)=>!('remove' === change.type && stableReadOnlyNodeIds.has(change.id)));
+            if (allowed.length > 0) onNodesChange(allowed);
+        };
+        return guarded;
+    }, [
+        onNodesChange,
+        stableReadOnlyNodeIds
+    ]);
     const [reactFlowInstance, setReactFlowInstance] = useState();
     const { isReady } = useAutoLayout(nodes, initialAutoLayout, fitViewOptions);
     const { ensureNodesInView, ensureAllNodesInView, centerNode } = useEnsureNodesInView();
@@ -48,6 +62,7 @@ const BaseCanvasInnerComponent = (props)=>{
         isDarkMode: isDarkMode,
         locale: locale,
         stickyNoteOptions: stickyNoteOptions,
+        readOnlyNodeIds: stableReadOnlyNodeIds,
         children: /*#__PURE__*/ jsxs(ReactFlow, {
             ...reactFlowProps,
             colorMode: '',
@@ -77,8 +92,9 @@ const BaseCanvasInnerComponent = (props)=>{
             zoomOnDoubleClick: isInteractive && zoomOnDoubleClick,
             panOnDrag: isInteractive ? PAN_ON_DRAG : false,
             onInit: handleInit,
-            onNodesChange: isInteractive ? onNodesChange : void 0,
+            onNodesChange: isInteractive ? handleNodesChange : void 0,
             onEdgesChange: isInteractive ? onEdgesChange : void 0,
+            onBeforeDelete: guardedBeforeDelete,
             onConnect: isDesignMode ? onConnect : void 0,
             onConnectStart: isDesignMode ? onConnectStart : void 0,
             onConnectEnd: isDesignMode ? onConnectEnd : void 0,

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

@@ -16,6 +16,7 @@ export interface BaseCanvasFitViewOptions {
 }
 export interface BaseCanvasProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> extends ReactFlowProps<NodeType, EdgeType> {
     mode?: 'design' | 'readonly' | 'view';
+    readOnlyNodeIds?: ReadonlySet<string> | readonly string[];
     stickyNoteOptions?: StickyNoteCanvasOptions;
     children?: ReactNode;
     showBackground?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"BaseCanvas.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseCanvas/BaseCanvas.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,IAAI,EACJ,IAAI,EACJ,iBAAiB,EACjB,cAAc,EACf,MAAM,0CAA0C,CAAC;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AAMtF,MAAM,WAAW,wBAAwB;IAOvC,OAAO,CAAC,EACJ,MAAM,GACN;QACE,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IAON,QAAQ,CAAC,EAAE,MAAM,CAAC;IAMlB,OAAO,CAAC,EAAE,MAAM,CAAC;IAMjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AASD,MAAM,WAAW,eAAe,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,CACzF,SAAQ,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAe1C,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;IAMtC,iBAAiB,CAAC,EAAE,uBAAuB,CAAC;IAO5C,QAAQ,CAAC,EAAE,SAAS,CAAC;IAOrB,cAAc,CAAC,EAAE,OAAO,CAAC;IAKzB,eAAe,CAAC,EAAE,MAAM,CAAC;IAKzB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAOlC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IAOtC,aAAa,CAAC,EAAE,MAAM,CAAC;IAOvB,cAAc,CAAC,EAAE,MAAM,CAAC;IAcxB,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAkB/C,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAM/B,4BAA4B,CAAC,EAAE,MAAM,CAAC;IAUtC,cAAc,CAAC,EAAE,wBAAwB,CAAC;IAK1C,eAAe,CAAC,EAAE,oBAAoB,CAAC;IAMvC,WAAW,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAW1B,UAAU,CAAC,EAAE,OAAO,CAAC;IAOrB,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAMD,MAAM,WAAW,wBAAwB;IAKvC,OAAO,CAAC,EAAE,MAAM,CAAC;IAMjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAMlB,OAAO,CAAC,EAAE,MAAM,CAAC;IAMjB,OAAO,CAAC,EAAE,MAAM,CAAC;IAOjB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AASD,MAAM,WAAW,aAAa,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI;IAgBvF,iBAAiB,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,OAAO,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAa/E,oBAAoB,CAAC,OAAO,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAiB/D,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAyBrE,SAAS,EAAE,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,SAAS,CAAC;CAC9D"}
+{"version":3,"file":"BaseCanvas.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseCanvas/BaseCanvas.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,IAAI,EACJ,IAAI,EACJ,iBAAiB,EACjB,cAAc,EACf,MAAM,0CAA0C,CAAC;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AAMtF,MAAM,WAAW,wBAAwB;IAOvC,OAAO,CAAC,EACJ,MAAM,GACN;QACE,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IAON,QAAQ,CAAC,EAAE,MAAM,CAAC;IAMlB,OAAO,CAAC,EAAE,MAAM,CAAC;IAMjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AASD,MAAM,WAAW,eAAe,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,CACzF,SAAQ,cAAc,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAe1C,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;IAmBtC,eAAe,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,SAAS,MAAM,EAAE,CAAC;IAM1D,iBAAiB,CAAC,EAAE,uBAAuB,CAAC;IAO5C,QAAQ,CAAC,EAAE,SAAS,CAAC;IAOrB,cAAc,CAAC,EAAE,OAAO,CAAC;IAKzB,eAAe,CAAC,EAAE,MAAM,CAAC;IAKzB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAOlC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IAOtC,aAAa,CAAC,EAAE,MAAM,CAAC;IAOvB,cAAc,CAAC,EAAE,MAAM,CAAC;IAcxB,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAkB/C,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAM/B,4BAA4B,CAAC,EAAE,MAAM,CAAC;IAUtC,cAAc,CAAC,EAAE,wBAAwB,CAAC;IAK1C,eAAe,CAAC,EAAE,oBAAoB,CAAC;IAMvC,WAAW,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAW1B,UAAU,CAAC,EAAE,OAAO,CAAC;IAOrB,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAMD,MAAM,WAAW,wBAAwB;IAKvC,OAAO,CAAC,EAAE,MAAM,CAAC;IAMjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAMlB,OAAO,CAAC,EAAE,MAAM,CAAC;IAMjB,OAAO,CAAC,EAAE,MAAM,CAAC;IAOjB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AASD,MAAM,WAAW,aAAa,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI;IAgBvF,iBAAiB,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,OAAO,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAa/E,oBAAoB,CAAC,OAAO,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAiB/D,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAyBrE,SAAS,EAAE,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,SAAS,CAAC;CAC9D"}

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

@@ -35,8 +35,9 @@ const StickyNoteCanvasOptionsContext_cjs_namespaceObject = require("../StickyNot
 const external_BaseCanvasModeProvider_cjs_namespaceObject = require("./BaseCanvasModeProvider.cjs");
 const external_CanvasThemeContext_cjs_namespaceObject = require("./CanvasThemeContext.cjs");
 const external_ConnectedHandlesContext_cjs_namespaceObject = require("./ConnectedHandlesContext.cjs");
+const external_ReadOnlyNodesContext_cjs_namespaceObject = require("./ReadOnlyNodesContext.cjs");
 const external_SelectionStateContext_cjs_namespaceObject = require("./SelectionStateContext.cjs");
-function CanvasProviders({ nodes, edges, mode, isDarkMode, locale, stickyNoteOptions, children }) {
+function CanvasProviders({ nodes, edges, mode, isDarkMode, locale, stickyNoteOptions, readOnlyNodeIds, children }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApI18nProvider, {
         component: "canvas",
         locale: locale,
@@ -51,11 +52,14 @@ function CanvasProviders({ nodes, edges, mode, isDarkMode, locale, stickyNoteOpt
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(crossings_index_cjs_namespaceObject.EdgeCrossingsProvider, {
                             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_BaseCanvasModeProvider_cjs_namespaceObject.BaseCanvasModeProvider, {
                                 mode: mode,
-                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StickyNoteCanvasOptionsContext_cjs_namespaceObject.StickyNoteCanvasOptionsProvider, {
-                                    options: stickyNoteOptions,
-                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_SelectionStateContext_cjs_namespaceObject.SelectionStateProvider, {
-                                        nodes: nodes,
-                                        children: children
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ReadOnlyNodesContext_cjs_namespaceObject.ReadOnlyNodesProvider, {
+                                    readOnlyNodeIds: readOnlyNodeIds,
+                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StickyNoteCanvasOptionsContext_cjs_namespaceObject.StickyNoteCanvasOptionsProvider, {
+                                        options: stickyNoteOptions,
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_SelectionStateContext_cjs_namespaceObject.SelectionStateProvider, {
+                                            nodes: nodes,
+                                            children: children
+                                        })
                                     })
                                 })
                             })

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

@@ -10,7 +10,8 @@ interface CanvasProvidersProps {
     isDarkMode?: boolean;
     locale?: BaseCanvasProps['locale'];
     stickyNoteOptions?: StickyNoteCanvasOptions;
+    readOnlyNodeIds?: ReadonlySet<string>;
 }
-export declare function CanvasProviders({ nodes, edges, mode, isDarkMode, locale, stickyNoteOptions, children, }: CanvasProvidersProps): import("react/jsx-runtime").JSX.Element;
+export declare function CanvasProviders({ nodes, edges, mode, isDarkMode, locale, stickyNoteOptions, readOnlyNodeIds, children, }: CanvasProvidersProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=CanvasProviders.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CanvasProviders.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseCanvas/CanvasProviders.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,0CAA0C,CAAC;AAE3E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AACtF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAM1D,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IACnC,iBAAiB,CAAC,EAAE,uBAAuB,CAAC;CAC7C;AAQD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,KAAK,EACL,IAAI,EACJ,UAAU,EACV,MAAM,EACN,iBAAiB,EACjB,QAAQ,GACT,EAAE,oBAAoB,2CAoBtB"}
+{"version":3,"file":"CanvasProviders.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseCanvas/CanvasProviders.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,0CAA0C,CAAC;AAE3E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AACtF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAO1D,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IACnC,iBAAiB,CAAC,EAAE,uBAAuB,CAAC;IAC5C,eAAe,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CACvC;AAQD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,KAAK,EACL,IAAI,EACJ,UAAU,EACV,MAAM,EACN,iBAAiB,EACjB,eAAe,EACf,QAAQ,GACT,EAAE,oBAAoB,2CAsBtB"}

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

@@ -7,8 +7,9 @@ import { StickyNoteCanvasOptionsProvider } from "../StickyNoteNode/StickyNoteCan
 import { BaseCanvasModeProvider } from "./BaseCanvasModeProvider.js";
 import { CanvasThemeProvider } from "./CanvasThemeContext.js";
 import { ConnectedHandlesProvider } from "./ConnectedHandlesContext.js";
+import { ReadOnlyNodesProvider } from "./ReadOnlyNodesContext.js";
 import { SelectionStateProvider } from "./SelectionStateContext.js";
-function CanvasProviders({ nodes, edges, mode, isDarkMode, locale, stickyNoteOptions, children }) {
+function CanvasProviders({ nodes, edges, mode, isDarkMode, locale, stickyNoteOptions, readOnlyNodeIds, children }) {
     return /*#__PURE__*/ jsx(ApI18nProvider, {
         component: "canvas",
         locale: locale,
@@ -23,11 +24,14 @@ function CanvasProviders({ nodes, edges, mode, isDarkMode, locale, stickyNoteOpt
                         children: /*#__PURE__*/ jsx(EdgeCrossingsProvider, {
                             children: /*#__PURE__*/ jsx(BaseCanvasModeProvider, {
                                 mode: mode,
-                                children: /*#__PURE__*/ jsx(StickyNoteCanvasOptionsProvider, {
-                                    options: stickyNoteOptions,
-                                    children: /*#__PURE__*/ jsx(SelectionStateProvider, {
-                                        nodes: nodes,
-                                        children: children
+                                children: /*#__PURE__*/ jsx(ReadOnlyNodesProvider, {
+                                    readOnlyNodeIds: readOnlyNodeIds,
+                                    children: /*#__PURE__*/ jsx(StickyNoteCanvasOptionsProvider, {
+                                        options: stickyNoteOptions,
+                                        children: /*#__PURE__*/ jsx(SelectionStateProvider, {
+                                            nodes: nodes,
+                                            children: children
+                                        })
                                     })
                                 })
                             })

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

@@ -29,7 +29,7 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
-const EMPTY_SET = Object.freeze(new Set());
+const external_set_utils_cjs_namespaceObject = require("./set-utils.cjs");
 class ConnectedHandlesStore {
     map = new Map();
     listeners = new Map();
@@ -46,7 +46,7 @@ class ConnectedHandlesStore {
         };
     }
     getSnapshot(nodeId) {
-        return this.map.get(nodeId) ?? EMPTY_SET;
+        return this.map.get(nodeId) ?? external_set_utils_cjs_namespaceObject.EMPTY_SET;
     }
     update(edges) {
         const nextMap = buildConnectedHandlesMap(edges);
@@ -55,7 +55,7 @@ class ConnectedHandlesStore {
         const changedNodeIds = new Set();
         for (const [nodeId, nextSet] of nextMap){
             const prevSet = prevMap.get(nodeId);
-            if (setsEqual(prevSet, nextSet)) finalMap.set(nodeId, prevSet);
+            if ((0, external_set_utils_cjs_namespaceObject.setsEqual)(prevSet, nextSet)) finalMap.set(nodeId, prevSet);
             else {
                 finalMap.set(nodeId, nextSet);
                 changedNodeIds.add(nodeId);
@@ -70,13 +70,6 @@ class ConnectedHandlesStore {
         }
     }
 }
-function setsEqual(a, b) {
-    if (a === b) return true;
-    if (!a || !b) return false;
-    if (a.size !== b.size) return false;
-    for (const value of a)if (!b.has(value)) return false;
-    return true;
-}
 function buildConnectedHandlesMap(edges) {
     const map = new Map();
     for (const edge of edges){
@@ -122,7 +115,7 @@ function useConnectedHandles(nodeId) {
         store,
         nodeId
     ]);
-    const getSnapshot = (0, external_react_namespaceObject.useCallback)(()=>store?.getSnapshot(nodeId) ?? EMPTY_SET, [
+    const getSnapshot = (0, external_react_namespaceObject.useCallback)(()=>store?.getSnapshot(nodeId) ?? external_set_utils_cjs_namespaceObject.EMPTY_SET, [
         store,
         nodeId
     ]);

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

@@ -1 +1 @@
-{"version":3,"file":"ConnectedHandlesContext.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseCanvas/ConnectedHandlesContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0CAA0C,CAAC;AACrE,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AA6If,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAgBA;AAMD,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,CAgBvE"}
+{"version":3,"file":"ConnectedHandlesContext.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseCanvas/ConnectedHandlesContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0CAA0C,CAAC;AACrE,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AA8Hf,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAgBA;AAMD,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,CAgBvE"}

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useRef, useSyncExternalStore } from "react";
-const EMPTY_SET = Object.freeze(new Set());
+import { EMPTY_SET, setsEqual } from "./set-utils.js";
 class ConnectedHandlesStore {
     map = new Map();
     listeners = new Map();
@@ -41,13 +41,6 @@ class ConnectedHandlesStore {
         }
     }
 }
-function setsEqual(a, b) {
-    if (a === b) return true;
-    if (!a || !b) return false;
-    if (a.size !== b.size) return false;
-    for (const value of a)if (!b.has(value)) return false;
-    return true;
-}
 function buildConnectedHandlesMap(edges) {
     const map = new Map();
     for (const edge of edges){

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

@@ -0,0 +1,111 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    useIsNodeReadOnly: ()=>useIsNodeReadOnly,
+    ReadOnlyNodesProvider: ()=>ReadOnlyNodesProvider,
+    useStableNodeIdSet: ()=>useStableNodeIdSet
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const useIsomorphicLayoutEffect_cjs_namespaceObject = require("../../hooks/useIsomorphicLayoutEffect.cjs");
+const external_set_utils_cjs_namespaceObject = require("./set-utils.cjs");
+class ReadOnlyNodesStore {
+    ids;
+    listeners = new Map();
+    constructor(initial = external_set_utils_cjs_namespaceObject.EMPTY_SET){
+        this.ids = 0 === initial.size ? external_set_utils_cjs_namespaceObject.EMPTY_SET : new Set(initial);
+    }
+    subscribe(nodeId, listener) {
+        let nodeListeners = this.listeners.get(nodeId);
+        if (!nodeListeners) {
+            nodeListeners = new Set();
+            this.listeners.set(nodeId, nodeListeners);
+        }
+        nodeListeners.add(listener);
+        return ()=>{
+            nodeListeners.delete(listener);
+            if (0 === nodeListeners.size) this.listeners.delete(nodeId);
+        };
+    }
+    isReadOnly(nodeId) {
+        return this.ids.has(nodeId);
+    }
+    update(next) {
+        const prev = this.ids;
+        if ((0, external_set_utils_cjs_namespaceObject.setsEqual)(prev, next)) return;
+        const changedNodeIds = new Set();
+        for (const id of next)if (!prev.has(id)) changedNodeIds.add(id);
+        for (const id of prev)if (!next.has(id)) changedNodeIds.add(id);
+        this.ids = 0 === next.size ? external_set_utils_cjs_namespaceObject.EMPTY_SET : new Set(next);
+        for (const nodeId of changedNodeIds){
+            const nodeListeners = this.listeners.get(nodeId);
+            if (nodeListeners) for (const listener of nodeListeners)listener();
+        }
+    }
+}
+const ReadOnlyNodesContext = /*#__PURE__*/ (0, external_react_namespaceObject.createContext)(null);
+function useStableNodeIdSet(ids) {
+    const ref = (0, external_react_namespaceObject.useRef)(external_set_utils_cjs_namespaceObject.EMPTY_SET);
+    const next = void 0 === ids ? external_set_utils_cjs_namespaceObject.EMPTY_SET : ids instanceof Set ? ids : new Set(ids);
+    if (!(0, external_set_utils_cjs_namespaceObject.setsEqual)(ref.current, next)) ref.current = 0 === next.size ? external_set_utils_cjs_namespaceObject.EMPTY_SET : new Set(next);
+    return ref.current;
+}
+const ReadOnlyNodesProvider = ({ children, readOnlyNodeIds })=>{
+    const storeRef = (0, external_react_namespaceObject.useRef)(void 0);
+    if (!storeRef.current) storeRef.current = new ReadOnlyNodesStore(readOnlyNodeIds);
+    (0, useIsomorphicLayoutEffect_cjs_namespaceObject.useIsomorphicLayoutEffect)(()=>{
+        storeRef.current?.update(readOnlyNodeIds ?? external_set_utils_cjs_namespaceObject.EMPTY_SET);
+    }, [
+        readOnlyNodeIds
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ReadOnlyNodesContext.Provider, {
+        value: storeRef.current,
+        children: children
+    });
+};
+function useIsNodeReadOnly(nodeId) {
+    const store = (0, external_react_namespaceObject.useContext)(ReadOnlyNodesContext);
+    const subscribe = (0, external_react_namespaceObject.useCallback)((onStoreChange)=>store?.subscribe(nodeId, onStoreChange) ?? (()=>{}), [
+        store,
+        nodeId
+    ]);
+    const getSnapshot = (0, external_react_namespaceObject.useCallback)(()=>store?.isReadOnly(nodeId) ?? false, [
+        store,
+        nodeId
+    ]);
+    return (0, external_react_namespaceObject.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+}
+exports.ReadOnlyNodesProvider = __webpack_exports__.ReadOnlyNodesProvider;
+exports.useIsNodeReadOnly = __webpack_exports__.useIsNodeReadOnly;
+exports.useStableNodeIdSet = __webpack_exports__.useStableNodeIdSet;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "ReadOnlyNodesProvider",
+    "useIsNodeReadOnly",
+    "useStableNodeIdSet"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,7 @@
+import type React from 'react';
+export declare function useStableNodeIdSet(ids: ReadonlySet<string> | readonly string[] | undefined): ReadonlySet<string>;
+export declare const ReadOnlyNodesProvider: React.FC<React.PropsWithChildren<{
+    readOnlyNodeIds?: ReadonlySet<string>;
+}>>;
+export declare function useIsNodeReadOnly(nodeId: string): boolean;
+//# sourceMappingURL=ReadOnlyNodesContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReadOnlyNodesContext.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseCanvas/ReadOnlyNodesContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAuF/B,wBAAgB,kBAAkB,CAChC,GAAG,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,SAAS,MAAM,EAAE,GAAG,SAAS,GACvD,WAAW,CAAC,MAAM,CAAC,CASrB;AAMD,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAC1C,KAAK,CAAC,iBAAiB,CAAC;IAAE,eAAe,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;CAAE,CAAC,CAoBnE,CAAC;AAOF,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAUzD"}

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

@@ -0,0 +1,71 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useRef, useSyncExternalStore } from "react";
+import { useIsomorphicLayoutEffect } from "../../hooks/useIsomorphicLayoutEffect.js";
+import { EMPTY_SET, setsEqual } from "./set-utils.js";
+class ReadOnlyNodesStore {
+    ids;
+    listeners = new Map();
+    constructor(initial = EMPTY_SET){
+        this.ids = 0 === initial.size ? EMPTY_SET : new Set(initial);
+    }
+    subscribe(nodeId, listener) {
+        let nodeListeners = this.listeners.get(nodeId);
+        if (!nodeListeners) {
+            nodeListeners = new Set();
+            this.listeners.set(nodeId, nodeListeners);
+        }
+        nodeListeners.add(listener);
+        return ()=>{
+            nodeListeners.delete(listener);
+            if (0 === nodeListeners.size) this.listeners.delete(nodeId);
+        };
+    }
+    isReadOnly(nodeId) {
+        return this.ids.has(nodeId);
+    }
+    update(next) {
+        const prev = this.ids;
+        if (setsEqual(prev, next)) return;
+        const changedNodeIds = new Set();
+        for (const id of next)if (!prev.has(id)) changedNodeIds.add(id);
+        for (const id of prev)if (!next.has(id)) changedNodeIds.add(id);
+        this.ids = 0 === next.size ? EMPTY_SET : new Set(next);
+        for (const nodeId of changedNodeIds){
+            const nodeListeners = this.listeners.get(nodeId);
+            if (nodeListeners) for (const listener of nodeListeners)listener();
+        }
+    }
+}
+const ReadOnlyNodesContext = /*#__PURE__*/ createContext(null);
+function useStableNodeIdSet(ids) {
+    const ref = useRef(EMPTY_SET);
+    const next = void 0 === ids ? EMPTY_SET : ids instanceof Set ? ids : new Set(ids);
+    if (!setsEqual(ref.current, next)) ref.current = 0 === next.size ? EMPTY_SET : new Set(next);
+    return ref.current;
+}
+const ReadOnlyNodesProvider = ({ children, readOnlyNodeIds })=>{
+    const storeRef = useRef(void 0);
+    if (!storeRef.current) storeRef.current = new ReadOnlyNodesStore(readOnlyNodeIds);
+    useIsomorphicLayoutEffect(()=>{
+        storeRef.current?.update(readOnlyNodeIds ?? EMPTY_SET);
+    }, [
+        readOnlyNodeIds
+    ]);
+    return /*#__PURE__*/ jsx(ReadOnlyNodesContext.Provider, {
+        value: storeRef.current,
+        children: children
+    });
+};
+function useIsNodeReadOnly(nodeId) {
+    const store = useContext(ReadOnlyNodesContext);
+    const subscribe = useCallback((onStoreChange)=>store?.subscribe(nodeId, onStoreChange) ?? (()=>{}), [
+        store,
+        nodeId
+    ]);
+    const getSnapshot = useCallback(()=>store?.isReadOnly(nodeId) ?? false, [
+        store,
+        nodeId
+    ]);
+    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+export { ReadOnlyNodesProvider, useIsNodeReadOnly, useStableNodeIdSet };