@uipath/apollo-react 4.18.3 → 4.20.0-pr644.8243dcd

package/dist/canvas/components/AddNodePanel/AddNodePanel.cjs

@@ -31,7 +31,7 @@ const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../../core/index.cjs");
 const external_hooks_index_cjs_namespaceObject = require("../../hooks/index.cjs");
 const external_Toolbox_index_cjs_namespaceObject = require("../Toolbox/index.cjs");
-const AddNodePanel_AddNodePanel = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ onNodeSelect, onClose, onSearch, onNodeHover, items, title, loading }) {
+const AddNodePanel_AddNodePanel = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ onNodeSelect, onClose, onSearch, onNodeHover, items, title, loading, renderEmptyState }) {
     const registry = (0, index_cjs_namespaceObject.useOptionalNodeTypeRegistry)();
     const { previewNodeConnectionInfo } = (0, external_hooks_index_cjs_namespaceObject.usePreviewNode)();
     const nodeListOptions = (0, external_react_namespaceObject.useMemo)(()=>{
@@ -75,7 +75,8 @@ const AddNodePanel_AddNodePanel = /*#__PURE__*/ (0, external_react_namespaceObje
         onItemSelect: handleNodeListItemSelect,
         onSearch: handleSearch,
         onClose: onClose,
-        onItemHover: onNodeHover
+        onItemHover: onNodeHover,
+        renderEmptyState: renderEmptyState
     });
 });
 exports.AddNodePanel = __webpack_exports__.AddNodePanel;

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

@@ -1 +1 @@
-{"version":3,"file":"AddNodePanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodePanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAU9D,eAAO,MAAM,YAAY,yDA2EvB,CAAC"}
+{"version":3,"file":"AddNodePanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodePanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAU9D,eAAO,MAAM,YAAY,yDA6EvB,CAAC"}

package/dist/canvas/components/AddNodePanel/AddNodePanel.js

@@ -3,7 +3,7 @@ import { memo, useCallback, useMemo } from "react";
 import { useOptionalNodeTypeRegistry } from "../../core/index.js";
 import { usePreviewNode } from "../../hooks/index.js";
 import { Toolbox } from "../Toolbox/index.js";
-const AddNodePanel_AddNodePanel = /*#__PURE__*/ memo(function({ onNodeSelect, onClose, onSearch, onNodeHover, items, title, loading }) {
+const AddNodePanel_AddNodePanel = /*#__PURE__*/ memo(function({ onNodeSelect, onClose, onSearch, onNodeHover, items, title, loading, renderEmptyState }) {
     const registry = useOptionalNodeTypeRegistry();
     const { previewNodeConnectionInfo } = usePreviewNode();
     const nodeListOptions = useMemo(()=>{
@@ -47,7 +47,8 @@ const AddNodePanel_AddNodePanel = /*#__PURE__*/ memo(function({ onNodeSelect, on
         onItemSelect: handleNodeListItemSelect,
         onSearch: handleSearch,
         onClose: onClose,
-        onItemHover: onNodeHover
+        onItemHover: onNodeHover,
+        renderEmptyState: renderEmptyState
     });
 });
 export { AddNodePanel_AddNodePanel as AddNodePanel };

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

@@ -1,4 +1,4 @@
-import type { ListItem } from '../Toolbox';
+import type { ListItem, ToolboxEmptyStateRenderer } from '../Toolbox';
 export interface NodeItemData {
     type: string;
     version?: string;
@@ -12,5 +12,6 @@ export interface AddNodePanelProps {
     title?: string;
     items?: ListItem[];
     loading?: boolean;
+    renderEmptyState?: ToolboxEmptyStateRenderer<NodeItemData>;
 }
 //# sourceMappingURL=AddNodePanel.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AddNodePanel.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodePanel.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,MAAM,EACb,gBAAgB,EAAE,OAAO,EACzB,YAAY,EAAE,QAAQ,EAAE,KACrB,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"AddNodePanel.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodePanel.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,yBAAyB,EAAE,MAAM,YAAY,CAAC;AAEtE,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,MAAM,EACb,gBAAgB,EAAE,OAAO,EACzB,YAAY,EAAE,QAAQ,EAAE,KACrB,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAOlB,gBAAgB,CAAC,EAAE,yBAAyB,CAAC,YAAY,CAAC,CAAC;CAC5D"}

package/dist/canvas/components/AgentCanvas/agent-flow.manifest.d.ts

@@ -14,11 +14,11 @@ export declare const agentFlowManifest: {
         id: string;
         name: string;
         sortOrder: number;
-        icon: string;
         tags: string[];
         parentId?: string | undefined;
         color?: string | undefined;
         colorDark?: string | undefined;
+        icon?: string | undefined;
     }[];
     nodes: {
         nodeType: string;
@@ -27,8 +27,8 @@ export declare const agentFlowManifest: {
         sortOrder: number;
         display: {
             label: string;
-            icon: string;
             description?: string | undefined;
+            icon?: string | undefined;
             shape?: "square" | "circle" | "container" | "rectangle" | undefined;
             color?: string | undefined;
             background?: string | undefined;

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

@@ -43,6 +43,7 @@ const ConnectedHandlesContext_cjs_namespaceObject = require("../BaseCanvas/Conne
 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 external_BaseNodeBadgeSlot_cjs_namespaceObject = require("./BaseNodeBadgeSlot.cjs");
 const external_BaseNodeConfigContext_cjs_namespaceObject = require("./BaseNodeConfigContext.cjs");
@@ -124,11 +125,19 @@ const BaseNodeComponent = (props)=>{
     const isStacked = Boolean(manifest?.drillable || data?.isCollapsed);
     const Icon = (0, external_react_namespaceObject.useMemo)(()=>{
         if (void 0 !== iconComponent) return iconComponent;
-        const IconComponent = (0, icon_registry_cjs_namespaceObject.getIcon)(display.icon);
-        return IconComponent ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(IconComponent, {}) : null;
+        if (display.icon) {
+            const IconComponent = (0, icon_registry_cjs_namespaceObject.getIcon)(display.icon);
+            return IconComponent ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(IconComponent, {}) : null;
+        }
+        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(InitialsBadge_cjs_namespaceObject.InitialsBadge, {
+            name: display.label,
+            size: "var(--icon-size)",
+            "data-testid": "base-node-initials-badge"
+        });
     }, [
         iconComponent,
-        display.icon
+        display.icon,
+        display.label
     ]);
     const handleConfigurations = (0, external_react_namespaceObject.useMemo)(()=>{
         if (handleConfigurationsProp && Array.isArray(handleConfigurationsProp)) return handleConfigurationsProp;

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;AAuChF,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,kBAAkB,CAAC;AAynB1B,eAAO,MAAM,QAAQ,8CAnlBa,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,6CAmlBhB,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;AAwChF,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,kBAAkB,CAAC;AAsoB1B,eAAO,MAAM,QAAQ,8CAhmBa,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,6CAgmBhB,CAAC"}

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

@@ -15,6 +15,7 @@ import { useConnectedHandles } from "../BaseCanvas/ConnectedHandlesContext.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 { BaseBadgeSlot } from "./BaseNodeBadgeSlot.js";
 import { useBaseNodeOverrideConfig } from "./BaseNodeConfigContext.js";
@@ -96,11 +97,19 @@ const BaseNodeComponent = (props)=>{
     const isStacked = Boolean(manifest?.drillable || data?.isCollapsed);
     const Icon = useMemo(()=>{
         if (void 0 !== iconComponent) return iconComponent;
-        const IconComponent = getIcon(display.icon);
-        return IconComponent ? /*#__PURE__*/ jsx(IconComponent, {}) : null;
+        if (display.icon) {
+            const IconComponent = getIcon(display.icon);
+            return IconComponent ? /*#__PURE__*/ jsx(IconComponent, {}) : null;
+        }
+        return /*#__PURE__*/ jsx(InitialsBadge, {
+            name: display.label,
+            size: "var(--icon-size)",
+            "data-testid": "base-node-initials-badge"
+        });
     }, [
         iconComponent,
-        display.icon
+        display.icon,
+        display.label
     ]);
     const handleConfigurations = useMemo(()=>{
         if (handleConfigurationsProp && Array.isArray(handleConfigurationsProp)) return handleConfigurationsProp;

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

@@ -59,9 +59,9 @@ const external_useMarkdownShortcuts_cjs_namespaceObject = require("./useMarkdown
 const external_useScrollCapture_cjs_namespaceObject = require("./useScrollCapture.cjs");
 const minWidth = 8 * external_constants_cjs_namespaceObject.GRID_SPACING;
 const minHeight = 8 * external_constants_cjs_namespaceObject.GRID_SPACING;
-const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = 'Add text', renderPlaceholderOnSelect = false, onContentChange, onColorChange, onResize })=>{
+const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = 'Add text', renderPlaceholderOnSelect = false, readOnly = false, onContentChange, onColorChange, onResize })=>{
     const { updateNodeData, deleteElements } = (0, react_cjs_namespaceObject.useReactFlow)();
-    const [isEditing, setIsEditing] = (0, external_react_namespaceObject.useState)(data.autoFocus ?? false);
+    const [isEditing, setIsEditing] = (0, external_react_namespaceObject.useState)(!readOnly && (data.autoFocus ?? false));
     const [isResizing, setIsResizing] = (0, external_react_namespaceObject.useState)(false);
     const [isColorPickerOpen, setIsColorPickerOpen] = (0, external_react_namespaceObject.useState)(false);
     const [localContent, setLocalContent] = (0, external_react_namespaceObject.useState)(data.content || '');
@@ -88,14 +88,15 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
             textAreaRef.current.focus();
             textAreaRef.current.select();
         }
-        if (data.autoFocus) updateNodeData(id, {
+        if (!readOnly && data.autoFocus) updateNodeData(id, {
             autoFocus: false
         });
     }, [
         isEditing,
         data.autoFocus,
         id,
-        updateNodeData
+        updateNodeData,
+        readOnly
     ]);
     (0, external_react_namespaceObject.useEffect)(()=>{
         if (!selected || isResizing) setIsColorPickerOpen(false);
@@ -103,8 +104,17 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         selected,
         isResizing
     ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (readOnly) {
+            setIsEditing(false);
+            setLocalContent(data.content || '');
+        }
+    }, [
+        readOnly,
+        data.content
+    ]);
     const handleDoubleClick = (0, external_react_namespaceObject.useCallback)(()=>{
-        if (isEditing) return;
+        if (readOnly || isEditing) return;
         setIsEditing(true);
         setTimeout(()=>{
             if (textAreaRef.current) {
@@ -113,10 +123,12 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
             }
         }, 0);
     }, [
-        isEditing
+        isEditing,
+        readOnly
     ]);
     const handleBlur = (0, external_react_namespaceObject.useCallback)(()=>{
         setIsEditing(false);
+        if (readOnly) return;
         if (localContent !== data.content) {
             onContentChange?.(localContent);
             updateNodeData(id, {
@@ -128,7 +140,8 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         localContent,
         data.content,
         updateNodeData,
-        onContentChange
+        onContentChange,
+        readOnly
     ]);
     const handleChange = (0, external_react_namespaceObject.useCallback)((e)=>{
         setLocalContent(e.target.value);
@@ -205,6 +218,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
         setIsColorPickerOpen((prev)=>!prev);
     }, []);
     const handleEditClick = (0, external_react_namespaceObject.useCallback)(()=>{
+        if (readOnly) return;
         setIsEditing(true);
         setTimeout(()=>{
             if (textAreaRef.current) {
@@ -212,7 +226,9 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                 textAreaRef.current.select();
             }
         }, 0);
-    }, []);
+    }, [
+        readOnly
+    ]);
     const handleDelete = (0, external_react_namespaceObject.useCallback)(()=>{
         deleteElements({
             nodes: [
@@ -299,69 +315,73 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StickyNoteNode_styles_cjs_namespaceObject.StickyNoteWrapper, {
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.NodeResizeControl, {
-                        style: {
-                            background: 'transparent',
-                            border: 'none',
-                            zIndex: external_StickyNoteNode_styles_cjs_namespaceObject.RESIZE_CONTROL_Z_INDEX
-                        },
-                        position: "top-left",
-                        minWidth: minWidth,
-                        minHeight: minHeight,
-                        onResizeStart: handleResizeStart,
-                        onResizeEnd: handleResizeEnd,
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.ResizeHandle, {
-                            selected: selected,
-                            cursor: "nwse-resize"
-                        })
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.NodeResizeControl, {
-                        style: {
-                            background: 'transparent',
-                            border: 'none',
-                            zIndex: external_StickyNoteNode_styles_cjs_namespaceObject.RESIZE_CONTROL_Z_INDEX
-                        },
-                        position: "top-right",
-                        minWidth: minWidth,
-                        minHeight: minHeight,
-                        onResizeStart: handleResizeStart,
-                        onResizeEnd: handleResizeEnd,
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.ResizeHandle, {
-                            selected: selected,
-                            cursor: "nesw-resize"
-                        })
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.NodeResizeControl, {
-                        style: {
-                            background: 'transparent',
-                            border: 'none',
-                            zIndex: external_StickyNoteNode_styles_cjs_namespaceObject.RESIZE_CONTROL_Z_INDEX
-                        },
-                        position: "bottom-left",
-                        minWidth: minWidth,
-                        minHeight: minHeight,
-                        onResizeStart: handleResizeStart,
-                        onResizeEnd: handleResizeEnd,
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.ResizeHandle, {
-                            selected: selected,
-                            cursor: "nesw-resize"
-                        })
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.NodeResizeControl, {
-                        style: {
-                            background: 'transparent',
-                            border: 'none',
-                            zIndex: external_StickyNoteNode_styles_cjs_namespaceObject.RESIZE_CONTROL_Z_INDEX
-                        },
-                        position: "bottom-right",
-                        minWidth: minWidth,
-                        minHeight: minHeight,
-                        onResizeStart: handleResizeStart,
-                        onResizeEnd: handleResizeEnd,
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.ResizeHandle, {
-                            selected: selected,
-                            cursor: "nwse-resize"
-                        })
+                    !readOnly && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.NodeResizeControl, {
+                                style: {
+                                    background: 'transparent',
+                                    border: 'none',
+                                    zIndex: external_StickyNoteNode_styles_cjs_namespaceObject.RESIZE_CONTROL_Z_INDEX
+                                },
+                                position: "top-left",
+                                minWidth: minWidth,
+                                minHeight: minHeight,
+                                onResizeStart: handleResizeStart,
+                                onResizeEnd: handleResizeEnd,
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.ResizeHandle, {
+                                    selected: selected,
+                                    cursor: "nwse-resize"
+                                })
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.NodeResizeControl, {
+                                style: {
+                                    background: 'transparent',
+                                    border: 'none',
+                                    zIndex: external_StickyNoteNode_styles_cjs_namespaceObject.RESIZE_CONTROL_Z_INDEX
+                                },
+                                position: "top-right",
+                                minWidth: minWidth,
+                                minHeight: minHeight,
+                                onResizeStart: handleResizeStart,
+                                onResizeEnd: handleResizeEnd,
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.ResizeHandle, {
+                                    selected: selected,
+                                    cursor: "nesw-resize"
+                                })
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.NodeResizeControl, {
+                                style: {
+                                    background: 'transparent',
+                                    border: 'none',
+                                    zIndex: external_StickyNoteNode_styles_cjs_namespaceObject.RESIZE_CONTROL_Z_INDEX
+                                },
+                                position: "bottom-left",
+                                minWidth: minWidth,
+                                minHeight: minHeight,
+                                onResizeStart: handleResizeStart,
+                                onResizeEnd: handleResizeEnd,
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.ResizeHandle, {
+                                    selected: selected,
+                                    cursor: "nesw-resize"
+                                })
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.NodeResizeControl, {
+                                style: {
+                                    background: 'transparent',
+                                    border: 'none',
+                                    zIndex: external_StickyNoteNode_styles_cjs_namespaceObject.RESIZE_CONTROL_Z_INDEX
+                                },
+                                position: "bottom-right",
+                                minWidth: minWidth,
+                                minHeight: minHeight,
+                                onResizeStart: handleResizeStart,
+                                onResizeEnd: handleResizeEnd,
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.ResizeHandle, {
+                                    selected: selected,
+                                    cursor: "nwse-resize"
+                                })
+                            })
+                        ]
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StickyNoteNode_styles_cjs_namespaceObject.StickyNoteContainer, {
                         backgroundColor: colorWithAlpha,
@@ -371,10 +391,10 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                         onDoubleClick: handleDoubleClick,
                         children: [
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.TopCornerIndicators, {
-                                selected: selected
+                                visible: selected && !readOnly
                             }),
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.BottomCornerIndicators, {
-                                selected: selected
+                                visible: selected && !readOnly
                             }),
                             isEditing ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.ApI18nProvider, {
                                 component: "canvas",
@@ -419,13 +439,13 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                             })
                         ]
                     }),
-                    selected && !dragging && !isResizing && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbar_index_cjs_namespaceObject.NodeToolbar, {
+                    !readOnly && selected && !dragging && !isResizing && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbar_index_cjs_namespaceObject.NodeToolbar, {
                         nodeId: id,
                         config: toolbarConfig,
                         expanded: true
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_motion_react_namespaceObject.AnimatePresence, {
-                        children: selected && !dragging && !isResizing && isColorPickerOpen && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        children: !readOnly && selected && !dragging && !isResizing && isColorPickerOpen && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                             style: {
                                 position: 'absolute',
                                 top: -40,

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

@@ -4,9 +4,10 @@ export interface StickyNoteNodeProps extends NodeProps {
     data: StickyNoteData;
     placeholder?: string;
     renderPlaceholderOnSelect?: boolean;
+    readOnly?: boolean;
     onContentChange?: (content: string) => void;
     onColorChange?: (color: StickyNoteColor) => void;
     onResize?: (width: number, height: number) => void;
 }
-export declare const StickyNoteNode: import("react").MemoExoticComponent<({ id, data, selected, dragging, placeholder, renderPlaceholderOnSelect, onContentChange, onColorChange, onResize, }: StickyNoteNodeProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const StickyNoteNode: import("react").MemoExoticComponent<({ id, data, selected, dragging, placeholder, renderPlaceholderOnSelect, readOnly, onContentChange, onColorChange, onResize, }: StickyNoteNodeProps) => import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=StickyNoteNode.d.ts.map

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;AAgC1E,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAiB,MAAM,wBAAwB,CAAC;AAM7F,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,IAAI,EAAE,cAAc,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,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;CACpD;AAsYD,eAAO,MAAM,cAAc,4JAvXxB,mBAAmB,6CAuXqC,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;AAgC1E,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAiB,MAAM,wBAAwB,CAAC;AAM7F,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;CACpD;AAoZD,eAAO,MAAM,cAAc,sKApYxB,mBAAmB,6CAoYqC,CAAC"}