@uipath/apollo-react 6.26.0 → 6.27.0

package/dist/canvas/components/StageNode/StageNode.cjs

@@ -31,6 +31,7 @@ const apollo_core_namespaceObject = require("@uipath/apollo-core");
 const index_cjs_namespaceObject = require("../../layouts/index.cjs");
 const external_react_namespaceObject = require("react");
 const nodePropsEqual_cjs_namespaceObject = require("../../utils/nodePropsEqual.cjs");
+const ReadOnlyNodesContext_cjs_namespaceObject = require("../BaseCanvas/ReadOnlyNodesContext.cjs");
 const external_FloatingCanvasPanel_index_cjs_namespaceObject = require("../FloatingCanvasPanel/index.cjs");
 const external_NodeContextMenu_index_cjs_namespaceObject = require("../NodeContextMenu/index.cjs");
 const hooks_index_cjs_namespaceObject = require("../NodePropertiesPanel/hooks/index.cjs");
@@ -51,7 +52,7 @@ const StageNodeInner = (props)=>{
         stageDetails?.tasks
     ]);
     const isException = stageDetails?.isException;
-    const isReadOnly = !!stageDetails?.isReadOnly;
+    const isReadOnly = (0, ReadOnlyNodesContext_cjs_namespaceObject.useIsNodeReadOnly)(id) || !!stageDetails?.isReadOnly;
     const selectedTaskId = stageDetails?.selectedTaskId;
     const status = execution?.stageStatus?.status;
     const [isHovered, setIsHovered] = (0, external_react_namespaceObject.useState)(false);
@@ -65,7 +66,7 @@ const StageNodeInner = (props)=>{
     const [isAddingTask, setIsAddingTask] = (0, external_react_namespaceObject.useState)(false);
     const [isReplacingTask, setIsReplacingTask] = (0, external_react_namespaceObject.useState)(false);
     (0, external_react_namespaceObject.useEffect)(()=>{
-        if (pendingReplaceTask) {
+        if (pendingReplaceTask && !isReadOnly) {
             const match = allTasks.flatMap((group, gi)=>group.map((task, ti)=>({
                         task,
                         groupIndex: gi,
@@ -83,21 +84,22 @@ const StageNodeInner = (props)=>{
     }, [
         pendingReplaceTask,
         selectedTaskId,
-        allTasks
+        allTasks,
+        isReadOnly
     ]);
     (0, external_react_namespaceObject.useEffect)(()=>{
-        if (false === selected) {
+        if (false === selected || isReadOnly) {
             setIsAddingTask(false);
             setIsReplacingTask(false);
         }
     }, [
-        selected
+        selected,
+        isReadOnly
     ]);
-    const shouldShowMenu = (0, external_react_namespaceObject.useMemo)(()=>menuItems && menuItems.length > 0 && (selected || isHovered) && !isReadOnly, [
+    const shouldShowMenu = (0, external_react_namespaceObject.useMemo)(()=>menuItems && menuItems.length > 0 && (selected || isHovered), [
         menuItems,
         selected,
-        isHovered,
-        isReadOnly
+        isHovered
     ]);
     const { setSelectedNodeId } = (0, hooks_index_cjs_namespaceObject.useSetNodeSelection)();
     const handleStageClick = (0, external_react_namespaceObject.useCallback)(()=>{
@@ -107,6 +109,7 @@ const StageNodeInner = (props)=>{
     ]);
     const handleTaskAddClick = (0, external_react_namespaceObject.useCallback)((event)=>{
         event.stopPropagation();
+        if (isReadOnly) return;
         if (onTaskAdd) onTaskAdd();
         else if (onAddTaskFromToolbox) setIsAddingTask(true);
         setSelectedNodeId(id);
@@ -114,7 +117,8 @@ const StageNodeInner = (props)=>{
         onTaskAdd,
         onAddTaskFromToolbox,
         setSelectedNodeId,
-        id
+        id,
+        isReadOnly
     ]);
     const handleAddTaskToolboxItemSelected = (0, external_react_namespaceObject.useCallback)((item)=>{
         onAddTaskFromToolbox?.(item);
@@ -190,7 +194,7 @@ const StageNodeInner = (props)=>{
                     })
                 ]
             }),
-            onAddTaskFromToolbox && isAddingTask && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FloatingCanvasPanel_index_cjs_namespaceObject.FloatingCanvasPanel, {
+            onAddTaskFromToolbox && isAddingTask && !isReadOnly && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FloatingCanvasPanel_index_cjs_namespaceObject.FloatingCanvasPanel, {
                 nodeId: id,
                 offset: 15,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_index_cjs_namespaceObject.Toolbox, {
@@ -201,7 +205,7 @@ const StageNodeInner = (props)=>{
                     onSearch: onTaskToolboxSearch
                 })
             }),
-            onReplaceTaskFromToolbox && isReplacingTask && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FloatingCanvasPanel_index_cjs_namespaceObject.FloatingCanvasPanel, {
+            onReplaceTaskFromToolbox && isReplacingTask && !isReadOnly && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FloatingCanvasPanel_index_cjs_namespaceObject.FloatingCanvasPanel, {
                 nodeId: id,
                 offset: 15,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbox_index_cjs_namespaceObject.Toolbox, {

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

@@ -1 +1 @@
-{"version":3,"file":"StageNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,cAAc,EAAsB,MAAM,mBAAmB,CAAC;AA4M5E,eAAO,MAAM,SAAS,8CAtMS,cAAc,6CAsMmC,CAAC"}
+{"version":3,"file":"StageNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageNode.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,cAAc,EAAsB,MAAM,mBAAmB,CAAC;AAiN5E,eAAO,MAAM,SAAS,8CA3MS,cAAc,6CA2MmC,CAAC"}

package/dist/canvas/components/StageNode/StageNode.js

@@ -3,6 +3,7 @@ import { Spacing } from "@uipath/apollo-core";
 import { Column } from "../../layouts/index.js";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { areNodePropsEqualIgnoringPosition } from "../../utils/nodePropsEqual.js";
+import { useIsNodeReadOnly } from "../BaseCanvas/ReadOnlyNodesContext.js";
 import { FloatingCanvasPanel } from "../FloatingCanvasPanel/index.js";
 import { NodeContextMenu } from "../NodeContextMenu/index.js";
 import { useSetNodeSelection } from "../NodePropertiesPanel/hooks/index.js";
@@ -23,7 +24,7 @@ const StageNodeInner = (props)=>{
         stageDetails?.tasks
     ]);
     const isException = stageDetails?.isException;
-    const isReadOnly = !!stageDetails?.isReadOnly;
+    const isReadOnly = useIsNodeReadOnly(id) || !!stageDetails?.isReadOnly;
     const selectedTaskId = stageDetails?.selectedTaskId;
     const status = execution?.stageStatus?.status;
     const [isHovered, setIsHovered] = useState(false);
@@ -37,7 +38,7 @@ const StageNodeInner = (props)=>{
     const [isAddingTask, setIsAddingTask] = useState(false);
     const [isReplacingTask, setIsReplacingTask] = useState(false);
     useEffect(()=>{
-        if (pendingReplaceTask) {
+        if (pendingReplaceTask && !isReadOnly) {
             const match = allTasks.flatMap((group, gi)=>group.map((task, ti)=>({
                         task,
                         groupIndex: gi,
@@ -55,21 +56,22 @@ const StageNodeInner = (props)=>{
     }, [
         pendingReplaceTask,
         selectedTaskId,
-        allTasks
+        allTasks,
+        isReadOnly
     ]);
     useEffect(()=>{
-        if (false === selected) {
+        if (false === selected || isReadOnly) {
             setIsAddingTask(false);
             setIsReplacingTask(false);
         }
     }, [
-        selected
+        selected,
+        isReadOnly
     ]);
-    const shouldShowMenu = useMemo(()=>menuItems && menuItems.length > 0 && (selected || isHovered) && !isReadOnly, [
+    const shouldShowMenu = useMemo(()=>menuItems && menuItems.length > 0 && (selected || isHovered), [
         menuItems,
         selected,
-        isHovered,
-        isReadOnly
+        isHovered
     ]);
     const { setSelectedNodeId } = useSetNodeSelection();
     const handleStageClick = useCallback(()=>{
@@ -79,6 +81,7 @@ const StageNodeInner = (props)=>{
     ]);
     const handleTaskAddClick = useCallback((event)=>{
         event.stopPropagation();
+        if (isReadOnly) return;
         if (onTaskAdd) onTaskAdd();
         else if (onAddTaskFromToolbox) setIsAddingTask(true);
         setSelectedNodeId(id);
@@ -86,7 +89,8 @@ const StageNodeInner = (props)=>{
         onTaskAdd,
         onAddTaskFromToolbox,
         setSelectedNodeId,
-        id
+        id,
+        isReadOnly
     ]);
     const handleAddTaskToolboxItemSelected = useCallback((item)=>{
         onAddTaskFromToolbox?.(item);
@@ -162,7 +166,7 @@ const StageNodeInner = (props)=>{
                     })
                 ]
             }),
-            onAddTaskFromToolbox && isAddingTask && /*#__PURE__*/ jsx(FloatingCanvasPanel, {
+            onAddTaskFromToolbox && isAddingTask && !isReadOnly && /*#__PURE__*/ jsx(FloatingCanvasPanel, {
                 nodeId: id,
                 offset: 15,
                 children: /*#__PURE__*/ jsx(Toolbox, {
@@ -173,7 +177,7 @@ const StageNodeInner = (props)=>{
                     onSearch: onTaskToolboxSearch
                 })
             }),
-            onReplaceTaskFromToolbox && isReplacingTask && /*#__PURE__*/ jsx(FloatingCanvasPanel, {
+            onReplaceTaskFromToolbox && isReplacingTask && !isReadOnly && /*#__PURE__*/ jsx(FloatingCanvasPanel, {
                 nodeId: id,
                 offset: 15,
                 children: /*#__PURE__*/ jsx(Toolbox, {

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.cjs

@@ -52,9 +52,11 @@ const index_cjs_namespaceObject = require("../../../i18n/index.cjs");
 const external_constants_cjs_namespaceObject = require("../../constants.cjs");
 const useLatestRef_cjs_namespaceObject = require("../../hooks/useLatestRef.cjs");
 const nodePropsEqual_cjs_namespaceObject = require("../../utils/nodePropsEqual.cjs");
+const ReadOnlyNodesContext_cjs_namespaceObject = require("../BaseCanvas/ReadOnlyNodesContext.cjs");
 const SelectionStateContext_cjs_namespaceObject = require("../BaseCanvas/SelectionStateContext.cjs");
 const external_NodeViewportOverlay_cjs_namespaceObject = require("../NodeViewportOverlay.cjs");
 const external_Toolbar_index_cjs_namespaceObject = require("../Toolbar/index.cjs");
+const NodeToolbar_utils_cjs_namespaceObject = require("../Toolbar/NodeToolbar/NodeToolbar.utils.cjs");
 const external_FormattingToolbar_cjs_namespaceObject = require("./FormattingToolbar.cjs");
 const external_markdown_formatting_index_cjs_namespaceObject = require("./markdown-formatting/index.cjs");
 const external_StickyNoteCanvasOptionsContext_cjs_namespaceObject = require("./StickyNoteCanvasOptionsContext.cjs");
@@ -71,7 +73,9 @@ const minHeight = 8 * external_constants_cjs_namespaceObject.GRID_SPACING;
 const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = 'Add text', renderPlaceholderOnSelect = false, readOnly: readOnlyProp, onContentChange, onColorChange, onResize, onResizeStart, onResizeEnd, enableMediaEmbedding: enableMediaEmbeddingProp, formattingActions, markdownComponents: customMarkdownComponents })=>{
     const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
     const canvasOptions = (0, external_StickyNoteCanvasOptionsContext_cjs_namespaceObject.useStickyNoteCanvasOptions)();
-    const readOnly = readOnlyProp ?? canvasOptions.readOnly;
+    const isNodeReadOnly = (0, ReadOnlyNodesContext_cjs_namespaceObject.useIsNodeReadOnly)(id);
+    const stickyNoteReadOnly = readOnlyProp ?? canvasOptions.readOnly;
+    const readOnly = isNodeReadOnly || stickyNoteReadOnly;
     const enableMediaEmbedding = enableMediaEmbeddingProp ?? canvasOptions.enableMediaEmbedding;
     const { updateNodeData, deleteElements } = (0, react_cjs_namespaceObject.useReactFlow)();
     const { multipleNodesSelected } = (0, SelectionStateContext_cjs_namespaceObject.useSelectionState)();
@@ -85,6 +89,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     const formattingToolbarRef = (0, external_react_namespaceObject.useRef)(null);
     const skipBlurRef = (0, external_react_namespaceObject.useRef)(null);
     const resizeActiveRef = (0, external_react_namespaceObject.useRef)(false);
+    const readOnlyRef = (0, useLatestRef_cjs_namespaceObject.useLatestRef)(readOnly);
     const resizeLifecycle = {
         content: data.content,
         id,
@@ -155,6 +160,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     (0, external_react_namespaceObject.useEffect)(()=>{
         if (readOnly) {
             setIsEditing(false);
+            setIsColorPickerOpen(false);
             updateLocalContent(data.content || '');
         }
     }, [
@@ -224,6 +230,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         skipBlurRef.current = selection.value;
         let completed = false;
         const restoreSelection = (next)=>{
+            if (readOnlyRef.current) return;
             setIsEditing(true);
             requestAnimationFrame(()=>{
                 const currentTextarea = textAreaRef.current;
@@ -237,6 +244,10 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         const complete = (next, shouldPersist)=>{
             if (completed) return;
             completed = true;
+            if (readOnlyRef.current) {
+                skipBlurRef.current = null;
+                return;
+            }
             skipBlurRef.current = shouldPersist ? next.value : null;
             setActiveFormats((0, external_markdown_formatting_index_cjs_namespaceObject.detectActiveFormats)(next));
             if (shouldPersist) {
@@ -273,6 +284,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     }, [
         id,
         onContentChange,
+        readOnlyRef,
         updateLocalContent,
         updateNodeData
     ]);
@@ -437,6 +449,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         resizeLifecycleRef
     ]);
     const handleColorChange = (0, external_react_namespaceObject.useCallback)((newColor)=>{
+        if (readOnly) return;
         onColorChange?.(newColor);
         updateNodeData(id, {
             color: newColor
@@ -445,11 +458,15 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     }, [
         id,
         updateNodeData,
-        onColorChange
+        onColorChange,
+        readOnly
     ]);
     const handleToggleColorPicker = (0, external_react_namespaceObject.useCallback)(()=>{
+        if (readOnly) return;
         setIsColorPickerOpen((prev)=>!prev);
-    }, []);
+    }, [
+        readOnly
+    ]);
     const handleEditClick = (0, external_react_namespaceObject.useCallback)(()=>{
         if (readOnly) return;
         setIsEditing(true);
@@ -463,6 +480,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         readOnly
     ]);
     const handleDelete = (0, external_react_namespaceObject.useCallback)(()=>{
+        if (readOnly) return;
         deleteElements({
             nodes: [
                 {
@@ -472,7 +490,8 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         });
     }, [
         id,
-        deleteElements
+        deleteElements,
+        readOnly
     ]);
     const builtInMarkdownComponents = (0, external_react_namespaceObject.useMemo)(()=>({
             a: ({ node: _node, href, children, ...props })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("a", {
@@ -580,7 +599,11 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         color,
         handleDelete
     ]);
-    const shouldRenderToolbarOverlay = !readOnly && selected && !dragging && !isResizing && !multipleNodesSelected;
+    const effectiveToolbarConfig = (0, external_react_namespaceObject.useMemo)(()=>isNodeReadOnly ? (0, NodeToolbar_utils_cjs_namespaceObject.lockToolbarConfig)(toolbarConfig) : toolbarConfig, [
+        isNodeReadOnly,
+        toolbarConfig
+    ]);
+    const shouldRenderToolbarOverlay = !stickyNoteReadOnly && selected && !dragging && !isResizing && !multipleNodesSelected;
     const shouldRenderResizeControls = !readOnly || isResizing;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         children: [
@@ -727,7 +750,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                     }),
                     shouldRenderToolbarOverlay && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbar_index_cjs_namespaceObject.NodeToolbar, {
                         nodeId: id,
-                        config: toolbarConfig,
+                        config: effectiveToolbarConfig,
                         expanded: true,
                         portalToNodeOverlay: true
                     }),

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

@@ -1 +1 @@
-{"version":3,"file":"StickyNoteNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAM1E,OAAsB,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AA+ChE,OAAO,KAAK,EACV,eAAe,EACf,cAAc,EAEd,0BAA0B,EAE3B,MAAM,wBAAwB,CAAC;AAMhC,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,IAAI,EAAE,cAAc,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,SAAS,0BAA0B,EAAE,CAAC;IAC1D,kBAAkB,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;CAC5C;AA4tBD,eAAO,MAAM,cAAc,iUA/rBxB,mBAAmB,6CA+rBwE,CAAC"}
+{"version":3,"file":"StickyNoteNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAM1E,OAAsB,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAiDhE,OAAO,KAAK,EACV,eAAe,EACf,cAAc,EAEd,0BAA0B,EAE3B,MAAM,wBAAwB,CAAC;AAMhC,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,IAAI,EAAE,cAAc,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,SAAS,0BAA0B,EAAE,CAAC;IAC1D,kBAAkB,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;CAC5C;AAsvBD,eAAO,MAAM,cAAc,iUAztBxB,mBAAmB,6CAytBwE,CAAC"}

package/dist/canvas/components/StickyNoteNode/StickyNoteNode.js

@@ -12,9 +12,11 @@ import { useSafeLingui } from "../../../i18n/index.js";
 import { GRID_SPACING } from "../../constants.js";
 import { useLatestRef } from "../../hooks/useLatestRef.js";
 import { areNodePropsEqualIgnoringPosition } from "../../utils/nodePropsEqual.js";
+import { useIsNodeReadOnly } from "../BaseCanvas/ReadOnlyNodesContext.js";
 import { useSelectionState } from "../BaseCanvas/SelectionStateContext.js";
 import { NodeViewportOverlay } from "../NodeViewportOverlay.js";
 import { NodeToolbar } from "../Toolbar/index.js";
+import { lockToolbarConfig } from "../Toolbar/NodeToolbar/NodeToolbar.utils.js";
 import { FormattingToolbar } from "./FormattingToolbar.js";
 import { activeFormatsEqual, continueListOnEnter, detectActiveFormats } from "./markdown-formatting/index.js";
 import { useStickyNoteCanvasOptions } from "./StickyNoteCanvasOptionsContext.js";
@@ -31,7 +33,9 @@ const minHeight = 8 * GRID_SPACING;
 const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = 'Add text', renderPlaceholderOnSelect = false, readOnly: readOnlyProp, onContentChange, onColorChange, onResize, onResizeStart, onResizeEnd, enableMediaEmbedding: enableMediaEmbeddingProp, formattingActions, markdownComponents: customMarkdownComponents })=>{
     const { _ } = useSafeLingui();
     const canvasOptions = useStickyNoteCanvasOptions();
-    const readOnly = readOnlyProp ?? canvasOptions.readOnly;
+    const isNodeReadOnly = useIsNodeReadOnly(id);
+    const stickyNoteReadOnly = readOnlyProp ?? canvasOptions.readOnly;
+    const readOnly = isNodeReadOnly || stickyNoteReadOnly;
     const enableMediaEmbedding = enableMediaEmbeddingProp ?? canvasOptions.enableMediaEmbedding;
     const { updateNodeData, deleteElements } = useReactFlow();
     const { multipleNodesSelected } = useSelectionState();
@@ -45,6 +49,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     const formattingToolbarRef = useRef(null);
     const skipBlurRef = useRef(null);
     const resizeActiveRef = useRef(false);
+    const readOnlyRef = useLatestRef(readOnly);
     const resizeLifecycle = {
         content: data.content,
         id,
@@ -115,6 +120,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     useEffect(()=>{
         if (readOnly) {
             setIsEditing(false);
+            setIsColorPickerOpen(false);
             updateLocalContent(data.content || '');
         }
     }, [
@@ -184,6 +190,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         skipBlurRef.current = selection.value;
         let completed = false;
         const restoreSelection = (next)=>{
+            if (readOnlyRef.current) return;
             setIsEditing(true);
             requestAnimationFrame(()=>{
                 const currentTextarea = textAreaRef.current;
@@ -197,6 +204,10 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         const complete = (next, shouldPersist)=>{
             if (completed) return;
             completed = true;
+            if (readOnlyRef.current) {
+                skipBlurRef.current = null;
+                return;
+            }
             skipBlurRef.current = shouldPersist ? next.value : null;
             setActiveFormats(detectActiveFormats(next));
             if (shouldPersist) {
@@ -233,6 +244,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     }, [
         id,
         onContentChange,
+        readOnlyRef,
         updateLocalContent,
         updateNodeData
     ]);
@@ -397,6 +409,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         resizeLifecycleRef
     ]);
     const handleColorChange = useCallback((newColor)=>{
+        if (readOnly) return;
         onColorChange?.(newColor);
         updateNodeData(id, {
             color: newColor
@@ -405,11 +418,15 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
     }, [
         id,
         updateNodeData,
-        onColorChange
+        onColorChange,
+        readOnly
     ]);
     const handleToggleColorPicker = useCallback(()=>{
+        if (readOnly) return;
         setIsColorPickerOpen((prev)=>!prev);
-    }, []);
+    }, [
+        readOnly
+    ]);
     const handleEditClick = useCallback(()=>{
         if (readOnly) return;
         setIsEditing(true);
@@ -423,6 +440,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         readOnly
     ]);
     const handleDelete = useCallback(()=>{
+        if (readOnly) return;
         deleteElements({
             nodes: [
                 {
@@ -432,7 +450,8 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         });
     }, [
         id,
-        deleteElements
+        deleteElements,
+        readOnly
     ]);
     const builtInMarkdownComponents = useMemo(()=>({
             a: ({ node: _node, href, children, ...props })=>/*#__PURE__*/ jsx("a", {
@@ -540,7 +559,11 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         color,
         handleDelete
     ]);
-    const shouldRenderToolbarOverlay = !readOnly && selected && !dragging && !isResizing && !multipleNodesSelected;
+    const effectiveToolbarConfig = useMemo(()=>isNodeReadOnly ? lockToolbarConfig(toolbarConfig) : toolbarConfig, [
+        isNodeReadOnly,
+        toolbarConfig
+    ]);
+    const shouldRenderToolbarOverlay = !stickyNoteReadOnly && selected && !dragging && !isResizing && !multipleNodesSelected;
     const shouldRenderResizeControls = !readOnly || isResizing;
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
@@ -687,7 +710,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                     }),
                     shouldRenderToolbarOverlay && /*#__PURE__*/ jsx(NodeToolbar, {
                         nodeId: id,
-                        config: toolbarConfig,
+                        config: effectiveToolbarConfig,
                         expanded: true,
                         portalToNodeOverlay: true
                     }),

package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.utils.cjs

@@ -24,14 +24,30 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    isSeparator: ()=>isSeparator
+    isSeparator: ()=>isSeparator,
+    lockToolbarConfig: ()=>lockToolbarConfig
 });
 function isSeparator(item) {
     return 'separator' === item.id;
 }
+function lockToolbarConfig(config) {
+    return {
+        ...config,
+        actions: disableActions(config.actions),
+        ...config.overflowActions && {
+            overflowActions: disableActions(config.overflowActions)
+        }
+    };
+}
+const disableActions = (actions)=>actions.map((action)=>'separator' === action.id ? action : {
+            ...action,
+            disabled: true
+        });
 exports.isSeparator = __webpack_exports__.isSeparator;
+exports.lockToolbarConfig = __webpack_exports__.lockToolbarConfig;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "isSeparator"
+    "isSeparator",
+    "lockToolbarConfig"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.utils.d.ts

@@ -1,4 +1,6 @@
 import type { ExtendedToolbarAction, ToolbarSeparator } from '../shared';
+import type { NodeToolbarConfig } from './NodeToolbar.types';
 export type ProcessedToolbarItem = ExtendedToolbarAction | ToolbarSeparator;
 export declare function isSeparator(item: ProcessedToolbarItem): item is ToolbarSeparator;
+export declare function lockToolbarConfig(config: NodeToolbarConfig): NodeToolbarConfig;
 //# sourceMappingURL=NodeToolbar.utils.d.ts.map

package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeToolbar.utils.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/NodeToolbar/NodeToolbar.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAEzE,MAAM,MAAM,oBAAoB,GAAG,qBAAqB,GAAG,gBAAgB,CAAC;AAE5E,wBAAgB,WAAW,CAAC,IAAI,EAAE,oBAAoB,GAAG,IAAI,IAAI,gBAAgB,CAEhF"}
+{"version":3,"file":"NodeToolbar.utils.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/NodeToolbar/NodeToolbar.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAiB,gBAAgB,EAAE,MAAM,WAAW,CAAC;AACxF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,MAAM,MAAM,oBAAoB,GAAG,qBAAqB,GAAG,gBAAgB,CAAC;AAE5E,wBAAgB,WAAW,CAAC,IAAI,EAAE,oBAAoB,GAAG,IAAI,IAAI,gBAAgB,CAEhF;AASD,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,iBAAiB,GAAG,iBAAiB,CAM9E"}

package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.utils.js

@@ -1,4 +1,17 @@
 function isSeparator(item) {
     return 'separator' === item.id;
 }
-export { isSeparator };
+function lockToolbarConfig(config) {
+    return {
+        ...config,
+        actions: disableActions(config.actions),
+        ...config.overflowActions && {
+            overflowActions: disableActions(config.overflowActions)
+        }
+    };
+}
+const disableActions = (actions)=>actions.map((action)=>'separator' === action.id ? action : {
+            ...action,
+            disabled: true
+        });
+export { isSeparator, lockToolbarConfig };

package/dist/canvas/storybook-utils/components/StoryPage.d.ts

@@ -25,8 +25,22 @@ export interface StoryCardProps {
     title: string;
     code?: string;
     description: ReactNode;
+    previewClassName?: string;
 }
-export declare function StoryCard({ preview, title, code, description }: StoryCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function StoryCard({ preview, title, code, description, previewClassName }: StoryCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function StoryWideContent({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export interface StoryTab {
+    value: string;
+    label: string;
+    content: ReactNode;
+}
+export interface StoryTabsProps {
+    tabs: readonly StoryTab[];
+    label?: string;
+}
+export declare function StoryTabs({ tabs, label }: StoryTabsProps): import("react/jsx-runtime").JSX.Element | null;
 export declare function StoryCode({ children }: {
     children: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/canvas/storybook-utils/components/StoryPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StoryPage.d.ts","sourceRoot":"","sources":["../../../../src/canvas/storybook-utils/components/StoryPage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAwBvC,MAAM,WAAW,cAAc;IAE7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IAEd,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,cAAc,2CAWhF;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAGD,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAc,EAAE,EAAE,iBAAiB,2CAS/F;AAED,MAAM,WAAW,4BAA4B;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAOD,wBAAgB,uBAAuB,CAAC,EACtC,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE,4BAA4B,2CAiB9B;AAED,MAAM,WAAW,cAAc;IAE7B,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IAEd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,SAAS,CAAC;CACxB;AAGD,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,cAAc,2CAa9E;AAGD,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAE9D;AAGD,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAMnE"}
+{"version":3,"file":"StoryPage.d.ts","sourceRoot":"","sources":["../../../../src/canvas/storybook-utils/components/StoryPage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAwBvC,MAAM,WAAW,cAAc;IAE7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IAEd,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,cAAc,2CAWhF;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAGD,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAc,EAAE,EAAE,iBAAiB,2CAS/F;AAED,MAAM,WAAW,4BAA4B;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAOD,wBAAgB,uBAAuB,CAAC,EACtC,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE,4BAA4B,2CAiB9B;AAED,MAAM,WAAW,cAAc;IAE7B,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IAEd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,SAAS,CAAC;IAEvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAGD,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,gBAAgB,EAAE,EAAE,cAAc,2CAahG;AAGD,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,2CAMtE;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,SAAS,QAAQ,EAAE,CAAC;IAE1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAGD,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,KAAqB,EAAE,EAAE,cAAc,kDA2BxE;AAGD,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAE9D;AAGD,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAMnE"}