@uipath/apollo-react 4.24.4 → 4.25.0

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

@@ -0,0 +1,8 @@
+type StageTitleInputProps = {
+    label: string;
+    onChange?: (next: string) => void;
+    className?: string;
+};
+export declare const StageTitleInput: ({ label: labelProp, onChange, className, }: StageTitleInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StageTitleInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StageTitleInput.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageTitleInput.tsx"],"names":[],"mappings":"AAKA,KAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,4CAI7B,oBAAoB,4CAyFtB,CAAC"}

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

@@ -0,0 +1,86 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@uipath/apollo-wind";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { CanvasTooltip } from "../CanvasTooltip.js";
+import { useStageNodeLabels } from "./useStageNodeLabels.js";
+const StageTitleInput = ({ label: labelProp, onChange, className })=>{
+    const labels = useStageNodeLabels();
+    const isEditable = !!onChange;
+    const [isEditing, setIsEditing] = useState(false);
+    const inputRef = useRef(null);
+    const [label, setLabel] = useState(labelProp);
+    useEffect(()=>{
+        setLabel(labelProp);
+    }, [
+        labelProp
+    ]);
+    useLayoutEffect(()=>{
+        if (isEditing && inputRef.current) {
+            const input = inputRef.current;
+            input.focus();
+            const caret = input.value.length;
+            input.setSelectionRange(caret, caret);
+        }
+    }, [
+        isEditing
+    ]);
+    const handleChange = useCallback((e)=>{
+        setLabel(e.target.value);
+    }, []);
+    const saveStageTitle = useCallback(()=>{
+        setIsEditing(false);
+        if (!onChange) return;
+        const finalLabel = '' === label.trim() ? labels.untitledStage : label;
+        if (finalLabel !== label) setLabel(finalLabel);
+        onChange(finalLabel);
+    }, [
+        onChange,
+        label,
+        labels.untitledStage
+    ]);
+    const handleBlur = useCallback(()=>{
+        if (isEditing) saveStageTitle();
+    }, [
+        isEditing,
+        saveStageTitle
+    ]);
+    const handleKeyDown = useCallback((e)=>{
+        if ('Enter' === e.key) saveStageTitle();
+        if ('Escape' !== e.key) e.stopPropagation();
+    }, [
+        saveStageTitle
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        className: cn('py-0.5 text-sm', !isEditing && 'font-bold', className),
+        children: /*#__PURE__*/ jsx(CanvasTooltip, {
+            content: label,
+            placement: "top",
+            hide: isEditing,
+            delay: true,
+            children: /*#__PURE__*/ jsx("div", {
+                className: cn('flex min-h-7 w-full items-center rounded', isEditing && 'outline outline-1 -outline-offset-1 outline-[var(--canvas-border-de-emp)]'),
+                children: isEditing ? /*#__PURE__*/ jsx("input", {
+                    ref: inputRef,
+                    name: "Stage Title",
+                    value: label,
+                    onInput: handleChange,
+                    onKeyDown: handleKeyDown,
+                    onBlur: handleBlur,
+                    className: cn('nodrag w-full min-w-[100px] py-1', 'cursor-text rounded-sm border-none bg-transparent text-sm text-ellipsis', 'focus:outline-none', 'hover:bg-[var(--canvas-background-secondary)]')
+                }) : isEditable ? /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    className: cn('nodrag flex w-full min-w-0 items-center self-stretch rounded-sm', 'appearance-none border-none bg-transparent p-0 text-left text-sm font-bold', 'cursor-text hover:bg-[var(--canvas-background-secondary)]'),
+                    onClick: ()=>setIsEditing(true),
+                    children: /*#__PURE__*/ jsx("span", {
+                        className: "truncate",
+                        children: label
+                    })
+                }) : /*#__PURE__*/ jsx("span", {
+                    className: "inline-block max-w-full truncate rounded-sm py-1",
+                    children: label
+                })
+            })
+        })
+    });
+};
+export { StageTitleInput };

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

@@ -0,0 +1,122 @@
+"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__, {
+    useStageNodeLabels: ()=>useStageNodeLabels
+});
+const react_namespaceObject = require("@lingui/react");
+const external_react_namespaceObject = require("react");
+function useStageNodeLabels() {
+    const { _ } = (0, react_namespaceObject.useLingui)();
+    return (0, external_react_namespaceObject.useMemo)(()=>({
+            addFirstTask: _({
+                id: 'stage-node.add-first-task',
+                message: 'Add first task'
+            }),
+            noTasks: _({
+                id: 'stage-node.no-tasks',
+                message: 'No tasks'
+            }),
+            addTask: _({
+                id: 'stage-node.add-task',
+                message: 'Add task'
+            }),
+            replaceTask: _({
+                id: 'stage-node.replace-task',
+                message: 'Replace task'
+            }),
+            deleteTask: _({
+                id: 'stage-node.delete-task',
+                message: 'Delete task'
+            }),
+            adhocTasks: _({
+                id: 'stage-node.adhoc-tasks',
+                message: 'Ad hoc tasks'
+            }),
+            eventDrivenTasks: _({
+                id: 'stage-node.event-driven-tasks',
+                message: 'Event-driven tasks'
+            }),
+            parallel: _({
+                id: 'stage-node.parallel',
+                message: 'Parallel'
+            }),
+            untitledStage: _({
+                id: 'stage-node.untitled-stage',
+                message: 'Untitled stage'
+            }),
+            contextMenu: {
+                moveUp: _({
+                    id: 'stage-node.move-up',
+                    message: 'Move up'
+                }),
+                moveDown: _({
+                    id: 'stage-node.move-down',
+                    message: 'Move down'
+                }),
+                ungroupParallelTasks: _({
+                    id: 'stage-node.ungroup-parallel-tasks',
+                    message: 'Ungroup parallel tasks'
+                }),
+                removeFromParallelGroup: _({
+                    id: 'stage-node.remove-from-parallel-group',
+                    message: 'Remove from parallel group'
+                }),
+                removeGroupFromStage: _({
+                    id: 'stage-node.remove-group-from-stage',
+                    message: 'Remove group from stage'
+                }),
+                deleteTask: _({
+                    id: 'stage-node.delete-task',
+                    message: 'Delete task'
+                }),
+                createParallelGroupWithTaskAbove: _({
+                    id: 'stage-node.create-parallel-group-with-task-above',
+                    message: 'Create parallel group with task above'
+                }),
+                createParallelGroupWithTaskBelow: _({
+                    id: 'stage-node.create-parallel-group-with-task-below',
+                    message: 'Create parallel group with task below'
+                }),
+                addTaskToParallelGroupAbove: _({
+                    id: 'stage-node.add-task-to-parallel-group-above',
+                    message: 'Add task to parallel group above'
+                }),
+                addTaskToParallelGroupBelow: _({
+                    id: 'stage-node.add-task-to-parallel-group-below',
+                    message: 'Add task to parallel group below'
+                })
+            }
+        }), [
+        _
+    ]);
+}
+exports.useStageNodeLabels = __webpack_exports__.useStageNodeLabels;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "useStageNodeLabels"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,15 @@
+import type { StageContextMenuLabels } from './StageNodeTaskUtilities';
+export interface StageNodeLabels {
+    addFirstTask: string;
+    noTasks: string;
+    addTask: string;
+    replaceTask: string;
+    deleteTask: string;
+    adhocTasks: string;
+    eventDrivenTasks: string;
+    parallel: string;
+    untitledStage: string;
+    contextMenu: StageContextMenuLabels;
+}
+export declare function useStageNodeLabels(): StageNodeLabels;
+//# sourceMappingURL=useStageNodeLabels.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useStageNodeLabels.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/useStageNodeLabels.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAEvE,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,sBAAsB,CAAC;CACrC;AAED,wBAAgB,kBAAkB,IAAI,eAAe,CAqDpD"}

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

@@ -0,0 +1,88 @@
+import { useLingui } from "@lingui/react";
+import { useMemo } from "react";
+function useStageNodeLabels() {
+    const { _ } = useLingui();
+    return useMemo(()=>({
+            addFirstTask: _({
+                id: 'stage-node.add-first-task',
+                message: 'Add first task'
+            }),
+            noTasks: _({
+                id: 'stage-node.no-tasks',
+                message: 'No tasks'
+            }),
+            addTask: _({
+                id: 'stage-node.add-task',
+                message: 'Add task'
+            }),
+            replaceTask: _({
+                id: 'stage-node.replace-task',
+                message: 'Replace task'
+            }),
+            deleteTask: _({
+                id: 'stage-node.delete-task',
+                message: 'Delete task'
+            }),
+            adhocTasks: _({
+                id: 'stage-node.adhoc-tasks',
+                message: 'Ad hoc tasks'
+            }),
+            eventDrivenTasks: _({
+                id: 'stage-node.event-driven-tasks',
+                message: 'Event-driven tasks'
+            }),
+            parallel: _({
+                id: 'stage-node.parallel',
+                message: 'Parallel'
+            }),
+            untitledStage: _({
+                id: 'stage-node.untitled-stage',
+                message: 'Untitled stage'
+            }),
+            contextMenu: {
+                moveUp: _({
+                    id: 'stage-node.move-up',
+                    message: 'Move up'
+                }),
+                moveDown: _({
+                    id: 'stage-node.move-down',
+                    message: 'Move down'
+                }),
+                ungroupParallelTasks: _({
+                    id: 'stage-node.ungroup-parallel-tasks',
+                    message: 'Ungroup parallel tasks'
+                }),
+                removeFromParallelGroup: _({
+                    id: 'stage-node.remove-from-parallel-group',
+                    message: 'Remove from parallel group'
+                }),
+                removeGroupFromStage: _({
+                    id: 'stage-node.remove-group-from-stage',
+                    message: 'Remove group from stage'
+                }),
+                deleteTask: _({
+                    id: 'stage-node.delete-task',
+                    message: 'Delete task'
+                }),
+                createParallelGroupWithTaskAbove: _({
+                    id: 'stage-node.create-parallel-group-with-task-above',
+                    message: 'Create parallel group with task above'
+                }),
+                createParallelGroupWithTaskBelow: _({
+                    id: 'stage-node.create-parallel-group-with-task-below',
+                    message: 'Create parallel group with task below'
+                }),
+                addTaskToParallelGroupAbove: _({
+                    id: 'stage-node.add-task-to-parallel-group-above',
+                    message: 'Add task to parallel group above'
+                }),
+                addTaskToParallelGroupBelow: _({
+                    id: 'stage-node.add-task-to-parallel-group-below',
+                    message: 'Add task to parallel group below'
+                })
+            }
+        }), [
+        _
+    ]);
+}
+export { useStageNodeLabels };

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

@@ -41,7 +41,6 @@ const external_index_cjs_namespaceObject = require("../../index.cjs");
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
 const external_motion_react_namespaceObject = require("motion/react");
 const external_react_namespaceObject = require("react");
-const index_cjs_namespaceObject = require("../../../i18n/index.cjs");
 const external_react_markdown_namespaceObject = require("react-markdown");
 var external_react_markdown_default = /*#__PURE__*/ __webpack_require__.n(external_react_markdown_namespaceObject);
 const external_remark_breaks_namespaceObject = require("remark-breaks");
@@ -49,7 +48,8 @@ var external_remark_breaks_default = /*#__PURE__*/ __webpack_require__.n(externa
 const external_remark_gfm_namespaceObject = require("remark-gfm");
 var external_remark_gfm_default = /*#__PURE__*/ __webpack_require__.n(external_remark_gfm_namespaceObject);
 const external_constants_cjs_namespaceObject = require("../../constants.cjs");
-const external_Toolbar_index_cjs_namespaceObject = require("../Toolbar/index.cjs");
+const external_NodeViewportOverlay_cjs_namespaceObject = require("../NodeViewportOverlay.cjs");
+const index_cjs_namespaceObject = require("../Toolbar/index.cjs");
 const external_FormattingToolbar_cjs_namespaceObject = require("./FormattingToolbar.cjs");
 const external_markdown_formatting_index_cjs_namespaceObject = require("./markdown-formatting/index.cjs");
 const external_StickyNoteNode_styles_cjs_namespaceObject = require("./StickyNoteNode.styles.cjs");
@@ -314,6 +314,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                 styles: external_StickyNoteNode_styles_cjs_namespaceObject.stickyNoteGlobalStyles
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_StickyNoteNode_styles_cjs_namespaceObject.StickyNoteWrapper, {
+                "data-sticky-note": true,
                 children: [
                     !readOnly && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
                         children: [
@@ -397,8 +398,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.BottomCornerIndicators, {
                                 visible: selected && !readOnly
                             }),
-                            isEditing ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.ApI18nProvider, {
-                                component: "canvas",
+                            isEditing ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
                                 children: [
                                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FormattingToolbar_cjs_namespaceObject.FormattingToolbar, {
                                         textAreaRef: textAreaRef,
@@ -440,45 +440,58 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                             })
                         ]
                     }),
-                    !readOnly && 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)(index_cjs_namespaceObject.NodeToolbar, {
                         nodeId: id,
                         config: toolbarConfig,
-                        expanded: true
+                        expanded: true,
+                        portalToNodeOverlay: true
                     }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_motion_react_namespaceObject.AnimatePresence, {
-                        children: !readOnly && selected && !dragging && !isResizing && isColorPickerOpen && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                            style: {
-                                position: 'absolute',
-                                top: -40,
-                                left: '50%',
-                                transform: 'translateX(40px)',
-                                zIndex: 1000
-                            },
-                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.ColorPickerPanel, {
-                                initial: {
-                                    opacity: 0,
-                                    y: 10
-                                },
-                                animate: {
-                                    opacity: 1,
-                                    y: 0
-                                },
-                                exit: {
-                                    opacity: 0,
-                                    y: 10
+                    !readOnly && selected && !dragging && !isResizing && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodeViewportOverlay_cjs_namespaceObject.NodeViewportOverlay, {
+                        nodeId: id,
+                        layer: "nodeToolbar",
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_motion_react_namespaceObject.AnimatePresence, {
+                            children: isColorPickerOpen && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                className: "nodrag nopan nowheel",
+                                style: {
+                                    position: 'absolute',
+                                    top: -40,
+                                    left: '50%',
+                                    transform: 'translateX(40px)',
+                                    zIndex: 1000,
+                                    pointerEvents: 'auto'
                                 },
-                                transition: {
-                                    duration: 0.15,
-                                    ease: 'easeOut'
+                                onMouseDown: (e)=>{
+                                    e.preventDefault();
+                                    e.stopPropagation();
                                 },
-                                children: Object.keys(external_StickyNoteNode_types_cjs_namespaceObject.STICKY_NOTE_COLORS).map((stickyColorKey)=>{
-                                    const colorName = stickyColorKey;
-                                    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.ColorOption, {
-                                        color: external_StickyNoteNode_types_cjs_namespaceObject.STICKY_NOTE_COLORS[colorName],
-                                        isSelected: colorKey === colorName,
-                                        onClick: ()=>handleColorChange(colorName),
-                                        title: colorName.charAt(0).toUpperCase() + colorName.slice(1)
-                                    }, stickyColorKey);
+                                onClick: (e)=>e.stopPropagation(),
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.ColorPickerPanel, {
+                                    initial: {
+                                        opacity: 0,
+                                        y: 10
+                                    },
+                                    animate: {
+                                        opacity: 1,
+                                        y: 0
+                                    },
+                                    exit: {
+                                        opacity: 0,
+                                        y: 10
+                                    },
+                                    transition: {
+                                        duration: 0.15,
+                                        ease: 'easeOut'
+                                    },
+                                    children: Object.keys(external_StickyNoteNode_types_cjs_namespaceObject.STICKY_NOTE_COLORS).map((stickyColorKey)=>{
+                                        const colorName = stickyColorKey;
+                                        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StickyNoteNode_styles_cjs_namespaceObject.ColorOption, {
+                                            type: "button",
+                                            color: external_StickyNoteNode_types_cjs_namespaceObject.STICKY_NOTE_COLORS[colorName],
+                                            isSelected: colorKey === colorName,
+                                            onClick: ()=>handleColorChange(colorName),
+                                            title: colorName.charAt(0).toUpperCase() + colorName.slice(1)
+                                        }, stickyColorKey);
+                                    })
                                 })
                             })
                         })

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,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;AAqZD,eAAO,MAAM,cAAc,sKArYxB,mBAAmB,6CAqYqC,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;AAiaD,eAAO,MAAM,cAAc,sKAjZxB,mBAAmB,6CAiZqC,CAAC"}

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

@@ -4,11 +4,11 @@ import { CanvasIcon } from "../../index.js";
 import { NodeResizeControl, useReactFlow } from "../../xyflow/react.js";
 import { AnimatePresence } from "motion/react";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { ApI18nProvider } from "../../../i18n/index.js";
 import react_markdown from "react-markdown";
 import remark_breaks from "remark-breaks";
 import remark_gfm from "remark-gfm";
 import { GRID_SPACING } from "../../constants.js";
+import { NodeViewportOverlay } from "../NodeViewportOverlay.js";
 import { NodeToolbar } from "../Toolbar/index.js";
 import { FormattingToolbar } from "./FormattingToolbar.js";
 import { activeFormatsEqual, continueListOnEnter, detectActiveFormats } from "./markdown-formatting/index.js";
@@ -274,6 +274,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                 styles: stickyNoteGlobalStyles
             }),
             /*#__PURE__*/ jsxs(StickyNoteWrapper, {
+                "data-sticky-note": true,
                 children: [
                     !readOnly && /*#__PURE__*/ jsxs(Fragment, {
                         children: [
@@ -357,8 +358,7 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                             /*#__PURE__*/ jsx(BottomCornerIndicators, {
                                 visible: selected && !readOnly
                             }),
-                            isEditing ? /*#__PURE__*/ jsxs(ApI18nProvider, {
-                                component: "canvas",
+                            isEditing ? /*#__PURE__*/ jsxs(Fragment, {
                                 children: [
                                     /*#__PURE__*/ jsx(FormattingToolbar, {
                                         textAreaRef: textAreaRef,
@@ -403,42 +403,55 @@ const StickyNoteNodeComponent = ({ id, data, selected, dragging, placeholder = '
                     !readOnly && selected && !dragging && !isResizing && /*#__PURE__*/ jsx(NodeToolbar, {
                         nodeId: id,
                         config: toolbarConfig,
-                        expanded: true
+                        expanded: true,
+                        portalToNodeOverlay: true
                     }),
-                    /*#__PURE__*/ jsx(AnimatePresence, {
-                        children: !readOnly && selected && !dragging && !isResizing && isColorPickerOpen && /*#__PURE__*/ jsx("div", {
-                            style: {
-                                position: 'absolute',
-                                top: -40,
-                                left: '50%',
-                                transform: 'translateX(40px)',
-                                zIndex: 1000
-                            },
-                            children: /*#__PURE__*/ jsx(ColorPickerPanel, {
-                                initial: {
-                                    opacity: 0,
-                                    y: 10
-                                },
-                                animate: {
-                                    opacity: 1,
-                                    y: 0
-                                },
-                                exit: {
-                                    opacity: 0,
-                                    y: 10
+                    !readOnly && selected && !dragging && !isResizing && /*#__PURE__*/ jsx(NodeViewportOverlay, {
+                        nodeId: id,
+                        layer: "nodeToolbar",
+                        children: /*#__PURE__*/ jsx(AnimatePresence, {
+                            children: isColorPickerOpen && /*#__PURE__*/ jsx("div", {
+                                className: "nodrag nopan nowheel",
+                                style: {
+                                    position: 'absolute',
+                                    top: -40,
+                                    left: '50%',
+                                    transform: 'translateX(40px)',
+                                    zIndex: 1000,
+                                    pointerEvents: 'auto'
                                 },
-                                transition: {
-                                    duration: 0.15,
-                                    ease: 'easeOut'
+                                onMouseDown: (e)=>{
+                                    e.preventDefault();
+                                    e.stopPropagation();
                                 },
-                                children: Object.keys(STICKY_NOTE_COLORS).map((stickyColorKey)=>{
-                                    const colorName = stickyColorKey;
-                                    return /*#__PURE__*/ jsx(ColorOption, {
-                                        color: STICKY_NOTE_COLORS[colorName],
-                                        isSelected: colorKey === colorName,
-                                        onClick: ()=>handleColorChange(colorName),
-                                        title: colorName.charAt(0).toUpperCase() + colorName.slice(1)
-                                    }, stickyColorKey);
+                                onClick: (e)=>e.stopPropagation(),
+                                children: /*#__PURE__*/ jsx(ColorPickerPanel, {
+                                    initial: {
+                                        opacity: 0,
+                                        y: 10
+                                    },
+                                    animate: {
+                                        opacity: 1,
+                                        y: 0
+                                    },
+                                    exit: {
+                                        opacity: 0,
+                                        y: 10
+                                    },
+                                    transition: {
+                                        duration: 0.15,
+                                        ease: 'easeOut'
+                                    },
+                                    children: Object.keys(STICKY_NOTE_COLORS).map((stickyColorKey)=>{
+                                        const colorName = stickyColorKey;
+                                        return /*#__PURE__*/ jsx(ColorOption, {
+                                            type: "button",
+                                            color: STICKY_NOTE_COLORS[colorName],
+                                            isSelected: colorKey === colorName,
+                                            onClick: ()=>handleColorChange(colorName),
+                                            title: colorName.charAt(0).toUpperCase() + colorName.slice(1)
+                                        }, stickyColorKey);
+                                    })
                                 })
                             })
                         })

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

@@ -82,11 +82,8 @@ const RESIZE_CONTROL_Z_INDEX = 100;
 const stickyNoteGlobalStyles = (0, react_namespaceObject.css)`
   /* Override React Flow's elevateNodesOnSelect behavior for sticky notes */
   /* Edges have z-index: 0, so we use STICKY_NOTE_BELOW_EDGE_Z_INDEX to ensure sticky notes are below edges */
-  .react-flow .react-flow__node[data-id^='sticky-'] {
-    z-index: ${STICKY_NOTE_BELOW_EDGE_Z_INDEX} !important;
-  }
-
-  .react-flow .react-flow__node.selected[data-id^='sticky-'] {
+  .react-flow .react-flow__node:has([data-sticky-note]),
+  .react-flow .react-flow__node.selected:has([data-sticky-note]) {
     z-index: ${STICKY_NOTE_BELOW_EDGE_Z_INDEX} !important;
   }
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"StickyNoteNode.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,8BAA8B,MAAM,CAAC;AA4BlD,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C,eAAO,MAAM,sBAAsB,2CAUlC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;yGAI7B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;iBACjB,MAAM;qBACF,MAAM;eACZ,OAAO;eACP,OAAO;iBACL,OAAO;yGAuBrB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;eAAgC,OAAO;2HAsBrE,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGA8H9B,CAAC;AAEF,eAAO,MAAM,YAAY;;;;eAA2B,OAAO;aAAW,MAAM;yGAW3E,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;cAA0B,OAAO;yGA+BhE,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;cAA0B,OAAO;yGA+BnE,CAAC;AAEF,eAAO,MAAM,gBAAgB;;UAa5B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;WAA0B,MAAM;gBAAc,OAAO;qHAkB5E,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;iBAA6B,MAAM;yGAQzE,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;cAA6B,OAAO;qHAoBhE,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAK5B,CAAC"}
+{"version":3,"file":"StickyNoteNode.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteNode.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,8BAA8B,MAAM,CAAC;AA4BlD,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C,eAAO,MAAM,sBAAsB,2CAOlC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;yGAI7B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;iBACjB,MAAM;qBACF,MAAM;eACZ,OAAO;eACP,OAAO;iBACL,OAAO;yGAuBrB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;eAAgC,OAAO;2HAsBrE,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;yGA8H9B,CAAC;AAEF,eAAO,MAAM,YAAY;;;;eAA2B,OAAO;aAAW,MAAM;yGAW3E,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;cAA0B,OAAO;yGA+BhE,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;cAA0B,OAAO;yGA+BnE,CAAC;AAEF,eAAO,MAAM,gBAAgB;;UAa5B,CAAC;AAEF,eAAO,MAAM,WAAW;;;;WAA0B,MAAM;gBAAc,OAAO;qHAkB5E,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;iBAA6B,MAAM;yGAQzE,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;cAA6B,OAAO;qHAoBhE,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAK5B,CAAC"}

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

@@ -30,11 +30,8 @@ const RESIZE_CONTROL_Z_INDEX = 100;
 const stickyNoteGlobalStyles = css`
   /* Override React Flow's elevateNodesOnSelect behavior for sticky notes */
   /* Edges have z-index: 0, so we use STICKY_NOTE_BELOW_EDGE_Z_INDEX to ensure sticky notes are below edges */
-  .react-flow .react-flow__node[data-id^='sticky-'] {
-    z-index: ${STICKY_NOTE_BELOW_EDGE_Z_INDEX} !important;
-  }
-
-  .react-flow .react-flow__node.selected[data-id^='sticky-'] {
+  .react-flow .react-flow__node:has([data-sticky-note]),
+  .react-flow .react-flow__node.selected:has([data-sticky-note]) {
     z-index: ${STICKY_NOTE_BELOW_EDGE_Z_INDEX} !important;
   }
 `;

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

@@ -49,12 +49,12 @@ const POSITIONER_ALIGN_CLASS = {
     center: 'justify-center',
     end: 'justify-end'
 };
-const CONTAINER_BASE_CLASS = "flex items-center gap-1 p-1 min-h-10 min-w-10 shrink-0 bg-(--canvas-background-raised) border border-(--canvas-background-overlay) rounded-xl shadow-[0_2px_6px_rgba(0,0,0,0.08)] pointer-events-auto";
+const CONTAINER_BASE_CLASS = "flex items-center gap-1 p-1 shrink-0 bg-(--canvas-background-raised) border border-(--canvas-background-overlay) rounded-xl shadow-[0_2px_6px_rgba(0,0,0,0.08)] pointer-events-auto";
 const CONTAINER_DIRECTION_CLASS = {
-    top: 'flex-row',
-    bottom: 'flex-row',
-    left: 'flex-col',
-    right: 'flex-col'
+    top: 'flex-row min-h-10',
+    bottom: 'flex-row min-h-10',
+    left: 'flex-col min-w-10',
+    right: 'flex-col min-w-10'
 };
 const SEPARATOR_BASE_CLASS = 'flex-[0_0_auto] bg-(--canvas-background-overlay) self-center';
 const SEPARATOR_VERTICAL_CLASS = 'w-px h-5';