@uipath/apollo-react 4.6.3 → 4.8.0

package/dist/canvas/components/ButtonHandle/SmartHandle.cjs

@@ -30,14 +30,14 @@ __webpack_require__.d(__webpack_exports__, {
     SmartSourceHandle: ()=>SmartSourceHandle
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const index_cjs_namespaceObject = require("../../layouts/index.cjs");
 const react_namespaceObject = require("@xyflow/react");
-const external_motion_react_namespaceObject = require("motion/react");
 const external_react_namespaceObject = require("react");
 const CanvasEventBus_cjs_namespaceObject = require("../../utils/CanvasEventBus.cjs");
-const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
-const external_ButtonHandle_styles_cjs_namespaceObject = require("./ButtonHandle.styles.cjs");
+const CssUtil_cjs_namespaceObject = require("../../utils/CssUtil.cjs");
 const external_ButtonHandleStyleUtils_cjs_namespaceObject = require("./ButtonHandleStyleUtils.cjs");
+const external_HandleButton_cjs_namespaceObject = require("./HandleButton.cjs");
+const external_HandleLabel_cjs_namespaceObject = require("./HandleLabel.cjs");
+const external_HandleNotch_cjs_namespaceObject = require("./HandleNotch.cjs");
 const external_useButtonHandleSizeAndPosition_cjs_namespaceObject = require("./useButtonHandleSizeAndPosition.cjs");
 const SIDE_TO_POSITION = {
     top: react_namespaceObject.Position.Top,
@@ -51,42 +51,6 @@ const NEXT_SIDE_CLOCKWISE = {
     bottom: 'left',
     left: 'top'
 };
-const AddButton = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ onAction })=>{
-    const handleClick = (0, external_react_namespaceObject.useCallback)((e)=>{
-        e.stopPropagation();
-        onAction(e);
-    }, [
-        onAction
-    ]);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_motion_react_namespaceObject.AnimatePresence, {
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ButtonHandle_styles_cjs_namespaceObject.StyledAddButton, {
-            initial: {
-                opacity: 0,
-                scale: 0.5
-            },
-            animate: {
-                opacity: 1,
-                scale: 1
-            },
-            exit: {
-                opacity: 0,
-                scale: 0.5
-            },
-            transition: {
-                duration: 0.25
-            },
-            whileHover: {
-                scale: 1.05
-            },
-            onClick: handleClick,
-            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
-                icon: "plus",
-                size: 14
-            })
-        })
-    });
-});
-AddButton.displayName = 'AddButton';
 const SmartHandleContext = /*#__PURE__*/ (0, external_react_namespaceObject.createContext)(null);
 function SmartHandleProvider({ children, nodeWidth: _nodeWidth, nodeHeight: _nodeHeight }) {
     const registrationsRef = (0, external_react_namespaceObject.useRef)(new Map());
@@ -283,11 +247,12 @@ function useSmartPosition(nodeId, handleId, handleType, defaultPosition, hasSour
         hasSourceHandles
     ]);
 }
-function SmartHandle({ type, id, defaultPosition = 'source' === type ? react_namespaceObject.Position.Right : react_namespaceObject.Position.Left, handleType = 'source' === type ? 'output' : 'input', style, className, nodeWidth, nodeHeight, label, labelIcon, labelBackgroundColor = 'var(--canvas-background-secondary)', showButton = false, selected = false, color = 'var(--canvas-border)', showNotches = true, onAction, visible = true, configOrder, ...rest }) {
+function SmartHandle({ type, id, defaultPosition = 'source' === type ? react_namespaceObject.Position.Right : react_namespaceObject.Position.Left, handleType = 'source' === type ? 'output' : 'input', style, className, nodeWidth, nodeHeight, label, labelIcon, labelBackgroundColor = 'var(--canvas-background-secondary)', showButton = false, selected = false, showNotches = true, onAction, visible = true, configOrder, ...rest }) {
     const nodeId = (0, react_namespaceObject.useNodeId)();
     const updateNodeInternals = (0, react_namespaceObject.useUpdateNodeInternals)();
     const [isHovered, setIsHovered] = (0, external_react_namespaceObject.useState)(false);
     const smartHandleContext = useSmartHandleContext();
+    const handleRef = (0, external_react_namespaceObject.useRef)(null);
     const prevPositionRef = (0, external_react_namespaceObject.useRef)(null);
     const contextVersion = smartHandleContext?.version ?? 0;
     const hasSourceHandles = (0, external_react_namespaceObject.useMemo)(()=>{
@@ -397,18 +362,16 @@ function SmartHandle({ type, id, defaultPosition = 'source' === type ? react_nam
         onAction
     ]);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.Handle, {
+        ref: handleRef,
         type: type,
         position: computedPosition,
         id: id,
-        className: className,
+        className: (0, CssUtil_cjs_namespaceObject.cx)('flex! items-center! justify-center! border-0! rounded-none! bg-transparent!', visible ? 'cursor-crosshair! pointer-events-auto!' : 'cursor-default! pointer-events-none!', className),
         isConnectable: visible && 'artifact' !== handleType,
         onMouseEnter: ()=>setIsHovered(true),
         onMouseLeave: ()=>setIsHovered(false),
         onMouseDown: ()=>setIsHovered(false),
         style: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
             width,
             height,
             top,
@@ -416,58 +379,32 @@ function SmartHandle({ type, id, defaultPosition = 'source' === type ? react_nam
             left,
             right,
             transform,
-            borderWidth: 0,
-            borderRadius: 0,
-            backgroundColor: 'transparent',
-            cursor: visible ? 'crosshair' : 'default',
-            pointerEvents: visible ? 'auto' : 'none',
             ...style
         },
         ...rest,
         children: visible && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
             children: [
-                label && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ButtonHandle_styles_cjs_namespaceObject.StyledLabel, {
-                    $position: computedPosition,
-                    $backgroundColor: labelBackgroundColor,
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
-                        align: "center",
-                        gap: 4,
-                        children: [
-                            labelIcon,
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                className: "text-xs font-bold text-foreground-muted",
-                                children: label
-                            })
-                        ]
-                    })
-                }),
-                showButton && onAction && 'source' === type && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_ButtonHandle_styles_cjs_namespaceObject.StyledWrapper, {
-                    $position: computedPosition,
-                    children: [
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ButtonHandle_styles_cjs_namespaceObject.StyledLine, {
-                            $isVertical: isVertical,
-                            $selected: selected,
-                            $size: label ? '60px' : '16px'
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                            className: "nodrag nopan",
-                            style: {
-                                pointerEvents: 'auto'
-                            },
-                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(AddButton, {
-                                onAction: handleButtonClick
-                            })
-                        })
-                    ]
+                onAction && 'source' === type ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_HandleButton_cjs_namespaceObject.HandleButton, {
+                    visible: showButton,
+                    labelVisible: visible,
+                    position: computedPosition,
+                    onAction: handleButtonClick,
+                    handleRef: handleRef,
+                    label: label,
+                    labelIcon: labelIcon,
+                    labelBackgroundColor: labelBackgroundColor
+                }) : label && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_HandleLabel_cjs_namespaceObject.HandleLabel, {
+                    position: computedPosition,
+                    backgroundColor: labelBackgroundColor,
+                    label: label,
+                    labelIcon: labelIcon
                 }),
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ButtonHandle_styles_cjs_namespaceObject.StyledNotch, {
-                    $notchColor: color,
-                    $handleType: handleType,
-                    $visible: true,
-                    $isVertical: isVertical,
-                    $selected: selected,
-                    $hovered: isHovered,
-                    $showNotch: showNotches
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_HandleNotch_cjs_namespaceObject.HandleNotch, {
+                    handleType: handleType,
+                    isVertical: isVertical,
+                    selected: selected,
+                    hovered: isHovered,
+                    showNotch: showNotches
                 })
             ]
         })

package/dist/canvas/components/ButtonHandle/SmartHandle.d.ts

@@ -12,7 +12,6 @@ export interface SmartHandleProps extends Omit<HandleProps, 'position'> {
     labelBackgroundColor?: string;
     showButton?: boolean;
     selected?: boolean;
-    color?: string;
     showNotches?: boolean;
     onAction?: (event: HandleActionEvent) => void;
     visible?: boolean;
@@ -23,7 +22,7 @@ export declare function SmartHandleProvider({ children, nodeWidth: _nodeWidth, n
     nodeWidth?: number;
     nodeHeight?: number;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function SmartHandle({ type, id, defaultPosition, handleType, style, className, nodeWidth, nodeHeight, label, labelIcon, labelBackgroundColor, showButton, selected, color, showNotches, onAction, visible, configOrder, ...rest }: SmartHandleProps): import("react/jsx-runtime").JSX.Element;
+export declare function SmartHandle({ type, id, defaultPosition, handleType, style, className, nodeWidth, nodeHeight, label, labelIcon, labelBackgroundColor, showButton, selected, showNotches, onAction, visible, configOrder, ...rest }: SmartHandleProps): import("react/jsx-runtime").JSX.Element;
 export declare function SmartSourceHandle(props: Omit<SmartHandleProps, 'type'>): import("react/jsx-runtime").JSX.Element;
 export declare function SmartTargetHandle(props: Omit<SmartHandleProps, 'type'>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SmartHandle.d.ts.map

package/dist/canvas/components/ButtonHandle/SmartHandle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SmartHandle.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/ButtonHandle/SmartHandle.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,WAAW,EAEhB,QAAQ,EAKT,MAAM,eAAe,CAAC;AAcvB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAiBxD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IAErE,eAAe,CAAC,EAAE,QAAQ,CAAC;IAE3B,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;IAE7C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAM9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAMlB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAuGD,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,EAAE,UAAU,EACrB,UAAU,EAAE,WAAW,GACxB,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,2CAiEA;AAyUD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,EAAE,EACF,eAAoE,EACpE,UAAmD,EACnD,KAAK,EACL,SAAS,EACT,SAAS,EACT,UAAU,EACV,KAAK,EACL,SAAS,EACT,oBAA2D,EAC3D,UAAkB,EAClB,QAAgB,EAChB,KAA8B,EAC9B,WAAkB,EAClB,QAAQ,EACR,OAAc,EACd,WAAW,EACX,GAAG,IAAI,EACR,EAAE,gBAAgB,2CAmMlB;AASD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,2CAEtE;AAKD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,2CAEtE"}
+{"version":3,"file":"SmartHandle.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/ButtonHandle/SmartHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,WAAW,EAEhB,QAAQ,EAKT,MAAM,eAAe,CAAC;AAYvB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAaxD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IAErE,eAAe,CAAC,EAAE,QAAQ,CAAC;IAE3B,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;IAE7C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAM9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAMlB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAoED,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,EAAE,UAAU,EACrB,UAAU,EAAE,WAAW,GACxB,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,2CAiEA;AAyUD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,EAAE,EACF,eAAoE,EACpE,UAAmD,EACnD,KAAK,EACL,SAAS,EACT,SAAS,EACT,UAAU,EACV,KAAK,EACL,SAAS,EACT,oBAA2D,EAC3D,UAAkB,EAClB,QAAgB,EAChB,WAAkB,EAClB,QAAQ,EACR,OAAc,EACd,WAAW,EACX,GAAG,IAAI,EACR,EAAE,gBAAgB,2CAgMlB;AASD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,2CAEtE;AAKD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,2CAEtE"}

package/dist/canvas/components/ButtonHandle/SmartHandle.js

@@ -1,12 +1,12 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Row } from "../../layouts/index.js";
 import { Handle, Position, useNodeId, useStore, useUpdateNodeInternals } from "@xyflow/react";
-import { AnimatePresence } from "motion/react";
-import { createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { canvasEventBus } from "../../utils/CanvasEventBus.js";
-import { CanvasIcon } from "../../utils/icon-registry.js";
-import { StyledAddButton, StyledLabel, StyledLine, StyledNotch, StyledWrapper } from "./ButtonHandle.styles.js";
+import { cx } from "../../utils/CssUtil.js";
 import { calculateGridAlignedHandlePositions, pixelToPercent } from "./ButtonHandleStyleUtils.js";
+import { HandleButton } from "./HandleButton.js";
+import { HandleLabel } from "./HandleLabel.js";
+import { HandleNotch } from "./HandleNotch.js";
 import { useButtonHandleSizeAndPosition } from "./useButtonHandleSizeAndPosition.js";
 const SIDE_TO_POSITION = {
     top: Position.Top,
@@ -20,42 +20,6 @@ const NEXT_SIDE_CLOCKWISE = {
     bottom: 'left',
     left: 'top'
 };
-const AddButton = /*#__PURE__*/ memo(({ onAction })=>{
-    const handleClick = useCallback((e)=>{
-        e.stopPropagation();
-        onAction(e);
-    }, [
-        onAction
-    ]);
-    return /*#__PURE__*/ jsx(AnimatePresence, {
-        children: /*#__PURE__*/ jsx(StyledAddButton, {
-            initial: {
-                opacity: 0,
-                scale: 0.5
-            },
-            animate: {
-                opacity: 1,
-                scale: 1
-            },
-            exit: {
-                opacity: 0,
-                scale: 0.5
-            },
-            transition: {
-                duration: 0.25
-            },
-            whileHover: {
-                scale: 1.05
-            },
-            onClick: handleClick,
-            children: /*#__PURE__*/ jsx(CanvasIcon, {
-                icon: "plus",
-                size: 14
-            })
-        })
-    });
-});
-AddButton.displayName = 'AddButton';
 const SmartHandleContext = /*#__PURE__*/ createContext(null);
 function SmartHandleProvider({ children, nodeWidth: _nodeWidth, nodeHeight: _nodeHeight }) {
     const registrationsRef = useRef(new Map());
@@ -252,11 +216,12 @@ function useSmartPosition(nodeId, handleId, handleType, defaultPosition, hasSour
         hasSourceHandles
     ]);
 }
-function SmartHandle({ type, id, defaultPosition = 'source' === type ? Position.Right : Position.Left, handleType = 'source' === type ? 'output' : 'input', style, className, nodeWidth, nodeHeight, label, labelIcon, labelBackgroundColor = 'var(--canvas-background-secondary)', showButton = false, selected = false, color = 'var(--canvas-border)', showNotches = true, onAction, visible = true, configOrder, ...rest }) {
+function SmartHandle({ type, id, defaultPosition = 'source' === type ? Position.Right : Position.Left, handleType = 'source' === type ? 'output' : 'input', style, className, nodeWidth, nodeHeight, label, labelIcon, labelBackgroundColor = 'var(--canvas-background-secondary)', showButton = false, selected = false, showNotches = true, onAction, visible = true, configOrder, ...rest }) {
     const nodeId = useNodeId();
     const updateNodeInternals = useUpdateNodeInternals();
     const [isHovered, setIsHovered] = useState(false);
     const smartHandleContext = useSmartHandleContext();
+    const handleRef = useRef(null);
     const prevPositionRef = useRef(null);
     const contextVersion = smartHandleContext?.version ?? 0;
     const hasSourceHandles = useMemo(()=>{
@@ -366,18 +331,16 @@ function SmartHandle({ type, id, defaultPosition = 'source' === type ? Position.
         onAction
     ]);
     return /*#__PURE__*/ jsx(Handle, {
+        ref: handleRef,
         type: type,
         position: computedPosition,
         id: id,
-        className: className,
+        className: cx('flex! items-center! justify-center! border-0! rounded-none! bg-transparent!', visible ? 'cursor-crosshair! pointer-events-auto!' : 'cursor-default! pointer-events-none!', className),
         isConnectable: visible && 'artifact' !== handleType,
         onMouseEnter: ()=>setIsHovered(true),
         onMouseLeave: ()=>setIsHovered(false),
         onMouseDown: ()=>setIsHovered(false),
         style: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
             width,
             height,
             top,
@@ -385,58 +348,32 @@ function SmartHandle({ type, id, defaultPosition = 'source' === type ? Position.
             left,
             right,
             transform,
-            borderWidth: 0,
-            borderRadius: 0,
-            backgroundColor: 'transparent',
-            cursor: visible ? 'crosshair' : 'default',
-            pointerEvents: visible ? 'auto' : 'none',
             ...style
         },
         ...rest,
         children: visible && /*#__PURE__*/ jsxs(Fragment, {
             children: [
-                label && /*#__PURE__*/ jsx(StyledLabel, {
-                    $position: computedPosition,
-                    $backgroundColor: labelBackgroundColor,
-                    children: /*#__PURE__*/ jsxs(Row, {
-                        align: "center",
-                        gap: 4,
-                        children: [
-                            labelIcon,
-                            /*#__PURE__*/ jsx("span", {
-                                className: "text-xs font-bold text-foreground-muted",
-                                children: label
-                            })
-                        ]
-                    })
-                }),
-                showButton && onAction && 'source' === type && /*#__PURE__*/ jsxs(StyledWrapper, {
-                    $position: computedPosition,
-                    children: [
-                        /*#__PURE__*/ jsx(StyledLine, {
-                            $isVertical: isVertical,
-                            $selected: selected,
-                            $size: label ? '60px' : '16px'
-                        }),
-                        /*#__PURE__*/ jsx("div", {
-                            className: "nodrag nopan",
-                            style: {
-                                pointerEvents: 'auto'
-                            },
-                            children: /*#__PURE__*/ jsx(AddButton, {
-                                onAction: handleButtonClick
-                            })
-                        })
-                    ]
+                onAction && 'source' === type ? /*#__PURE__*/ jsx(HandleButton, {
+                    visible: showButton,
+                    labelVisible: visible,
+                    position: computedPosition,
+                    onAction: handleButtonClick,
+                    handleRef: handleRef,
+                    label: label,
+                    labelIcon: labelIcon,
+                    labelBackgroundColor: labelBackgroundColor
+                }) : label && /*#__PURE__*/ jsx(HandleLabel, {
+                    position: computedPosition,
+                    backgroundColor: labelBackgroundColor,
+                    label: label,
+                    labelIcon: labelIcon
                 }),
-                /*#__PURE__*/ jsx(StyledNotch, {
-                    $notchColor: color,
-                    $handleType: handleType,
-                    $visible: true,
-                    $isVertical: isVertical,
-                    $selected: selected,
-                    $hovered: isHovered,
-                    $showNotch: showNotches
+                /*#__PURE__*/ jsx(HandleNotch, {
+                    handleType: handleType,
+                    isVertical: isVertical,
+                    selected: selected,
+                    hovered: isHovered,
+                    showNotch: showNotches
                 })
             ]
         })

package/dist/canvas/components/ButtonHandle/useButtonHandles.cjs

@@ -32,17 +32,17 @@ const external_react_namespaceObject = require("react");
 const manifest_resolver_cjs_namespaceObject = require("../../utils/manifest-resolver.cjs");
 const ConnectedHandlesContext_cjs_namespaceObject = require("../BaseCanvas/ConnectedHandlesContext.cjs");
 const external_index_cjs_namespaceObject = require("./index.cjs");
-const useButtonHandles = ({ handleConfigurations, shouldShowHandles, handleAction, nodeId, selected, showAddButton, showNotches, shouldShowAddButtonFn, nodeWidth, nodeHeight })=>{
+const useButtonHandles = ({ handleConfigurations, shouldShowHandles, handleAction, nodeId, selected, hovered, showAddButton, showNotches, shouldShowAddButtonFn, nodeWidth, nodeHeight })=>{
     const connectedHandleIds = (0, ConnectedHandlesContext_cjs_namespaceObject.useConnectedHandles)(nodeId);
     const node = (0, react_namespaceObject.useNodesData)(nodeId);
     const handleElements = (0, external_react_namespaceObject.useMemo)(()=>{
         if (!handleConfigurations || !Array.isArray(handleConfigurations) || 0 === handleConfigurations.length) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {});
         const resolvedHandles = (0, manifest_resolver_cjs_namespaceObject.resolveHandles)(handleConfigurations, node?.data ?? {});
         const elements = resolvedHandles.map((config, i)=>{
-            const hasConnectedHandle = config.handles.some((h)=>connectedHandleIds.has(h.id));
-            const finalVisible = hasConnectedHandle || shouldShowHandles && (config.visible ?? true);
+            const groupVisible = shouldShowHandles && (config.visible ?? true);
             const enhancedHandles = config.handles.map((handle)=>({
                     ...handle,
+                    showHandle: connectedHandleIds.has(handle.id) || groupVisible,
                     onAction: handle.onAction || handleAction
                 }));
             return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_index_cjs_namespaceObject.ButtonHandles, {
@@ -50,7 +50,7 @@ const useButtonHandles = ({ handleConfigurations, shouldShowHandles, handleActio
                 handles: enhancedHandles,
                 position: config.position,
                 selected: selected,
-                visible: finalVisible,
+                hovered: hovered,
                 showAddButton: showAddButton,
                 showNotches: showNotches,
                 customPositionAndOffsets: config.customPositionAndOffsets,
@@ -63,6 +63,7 @@ const useButtonHandles = ({ handleConfigurations, shouldShowHandles, handleActio
     }, [
         handleConfigurations,
         selected,
+        hovered,
         shouldShowHandles,
         connectedHandleIds,
         handleAction,

package/dist/canvas/components/ButtonHandle/useButtonHandles.d.ts

@@ -1,18 +1,20 @@
 import type { HandleGroupManifest } from '../../schema/node-definition';
 import type { HandleActionEvent } from '../ButtonHandle';
-export declare const useButtonHandles: ({ handleConfigurations, shouldShowHandles, handleAction, nodeId, selected, showAddButton, showNotches, shouldShowAddButtonFn, nodeWidth, nodeHeight, }: {
+export declare const useButtonHandles: ({ handleConfigurations, shouldShowHandles, handleAction, nodeId, selected, hovered, showAddButton, showNotches, shouldShowAddButtonFn, nodeWidth, nodeHeight, }: {
     handleConfigurations: HandleGroupManifest[];
     shouldShowHandles: boolean;
     nodeId: string;
     selected: boolean;
+    hovered?: boolean;
     handleAction?: (event: HandleActionEvent) => void;
     showAddButton?: boolean;
     showNotches?: boolean;
     nodeWidth?: number;
     nodeHeight?: number;
-    shouldShowAddButtonFn?: ({ showAddButton, selected, }: {
+    shouldShowAddButtonFn?: ({ showAddButton, selected, hovered, }: {
         showAddButton: boolean;
         selected: boolean;
+        hovered: boolean;
     }) => boolean;
 }) => import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[];
 //# sourceMappingURL=useButtonHandles.d.ts.map

package/dist/canvas/components/ButtonHandle/useButtonHandles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useButtonHandles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/ButtonHandle/useButtonHandles.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAGxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,eAAO,MAAM,gBAAgB,GAAI,wJAW9B;IACD,oBAAoB,EAAE,mBAAmB,EAAE,CAAC;IAC5C,iBAAiB,EAAE,OAAO,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IAUpB,qBAAqB,CAAC,EAAE,CAAC,EACvB,aAAa,EACb,QAAQ,GACT,EAAE;QACD,aAAa,EAAE,OAAO,CAAC;QACvB,QAAQ,EAAE,OAAO,CAAC;KACnB,KAAK,OAAO,CAAC;CACf,wFA2DA,CAAC"}
+{"version":3,"file":"useButtonHandles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/ButtonHandle/useButtonHandles.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAGxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,eAAO,MAAM,gBAAgB,GAAI,iKAY9B;IACD,oBAAoB,EAAE,mBAAmB,EAAE,CAAC;IAC5C,iBAAiB,EAAE,OAAO,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IAUpB,qBAAqB,CAAC,EAAE,CAAC,EACvB,aAAa,EACb,QAAQ,EACR,OAAO,GACR,EAAE;QACD,aAAa,EAAE,OAAO,CAAC;QACvB,QAAQ,EAAE,OAAO,CAAC;QAClB,OAAO,EAAE,OAAO,CAAC;KAClB,KAAK,OAAO,CAAC;CACf,wFAgEA,CAAC"}

package/dist/canvas/components/ButtonHandle/useButtonHandles.js

@@ -4,17 +4,17 @@ import { useMemo } from "react";
 import { resolveHandles } from "../../utils/manifest-resolver.js";
 import { useConnectedHandles } from "../BaseCanvas/ConnectedHandlesContext.js";
 import { ButtonHandles } from "./index.js";
-const useButtonHandles = ({ handleConfigurations, shouldShowHandles, handleAction, nodeId, selected, showAddButton, showNotches, shouldShowAddButtonFn, nodeWidth, nodeHeight })=>{
+const useButtonHandles = ({ handleConfigurations, shouldShowHandles, handleAction, nodeId, selected, hovered, showAddButton, showNotches, shouldShowAddButtonFn, nodeWidth, nodeHeight })=>{
     const connectedHandleIds = useConnectedHandles(nodeId);
     const node = useNodesData(nodeId);
     const handleElements = useMemo(()=>{
         if (!handleConfigurations || !Array.isArray(handleConfigurations) || 0 === handleConfigurations.length) return /*#__PURE__*/ jsx(Fragment, {});
         const resolvedHandles = resolveHandles(handleConfigurations, node?.data ?? {});
         const elements = resolvedHandles.map((config, i)=>{
-            const hasConnectedHandle = config.handles.some((h)=>connectedHandleIds.has(h.id));
-            const finalVisible = hasConnectedHandle || shouldShowHandles && (config.visible ?? true);
+            const groupVisible = shouldShowHandles && (config.visible ?? true);
             const enhancedHandles = config.handles.map((handle)=>({
                     ...handle,
+                    showHandle: connectedHandleIds.has(handle.id) || groupVisible,
                     onAction: handle.onAction || handleAction
                 }));
             return /*#__PURE__*/ jsx(ButtonHandles, {
@@ -22,7 +22,7 @@ const useButtonHandles = ({ handleConfigurations, shouldShowHandles, handleActio
                 handles: enhancedHandles,
                 position: config.position,
                 selected: selected,
-                visible: finalVisible,
+                hovered: hovered,
                 showAddButton: showAddButton,
                 showNotches: showNotches,
                 customPositionAndOffsets: config.customPositionAndOffsets,
@@ -35,6 +35,7 @@ const useButtonHandles = ({ handleConfigurations, shouldShowHandles, handleActio
     }, [
         handleConfigurations,
         selected,
+        hovered,
         shouldShowHandles,
         connectedHandleIds,
         handleAction,

package/dist/canvas/components/CodedAgent/CodedAgentFlow.cjs

@@ -131,8 +131,8 @@ const createCodedAgentNodeWrapper = (translations = external_types_cjs_namespace
         const nodeData = data;
         const executionStatus = (0, external_react_namespaceObject.useMemo)(()=>{
             if (nodeData.hasError) return 'Failed';
-            if (nodeData.hasSuccess) return 'Success';
-            if (nodeData.hasRunning) return 'Running';
+            if (nodeData.hasSuccess) return 'Completed';
+            if (nodeData.hasRunning) return 'InProgress';
         }, [
             nodeData.hasError,
             nodeData.hasSuccess,
@@ -207,8 +207,8 @@ const CodedResourceNodeElement = /*#__PURE__*/ (0, external_react_namespaceObjec
     const label = nodeData.label.toLowerCase();
     const executionStatus = (0, external_react_namespaceObject.useMemo)(()=>{
         if (nodeData.hasError) return 'Failed';
-        if (nodeData.hasSuccess) return 'Success';
-        if (nodeData.hasRunning) return 'Running';
+        if (nodeData.hasSuccess) return 'Completed';
+        if (nodeData.hasRunning) return 'InProgress';
     }, [
         nodeData.hasError,
         nodeData.hasSuccess,

package/dist/canvas/components/CodedAgent/CodedAgentFlow.js

@@ -93,8 +93,8 @@ const createCodedAgentNodeWrapper = (translations = DefaultCodedAgentNodeTransla
         const nodeData = data;
         const executionStatus = useMemo(()=>{
             if (nodeData.hasError) return 'Failed';
-            if (nodeData.hasSuccess) return 'Success';
-            if (nodeData.hasRunning) return 'Running';
+            if (nodeData.hasSuccess) return 'Completed';
+            if (nodeData.hasRunning) return 'InProgress';
         }, [
             nodeData.hasError,
             nodeData.hasSuccess,
@@ -169,8 +169,8 @@ const CodedResourceNodeElement = /*#__PURE__*/ memo(({ data, selected, id, ...no
     const label = nodeData.label.toLowerCase();
     const executionStatus = useMemo(()=>{
         if (nodeData.hasError) return 'Failed';
-        if (nodeData.hasSuccess) return 'Success';
-        if (nodeData.hasRunning) return 'Running';
+        if (nodeData.hasSuccess) return 'Completed';
+        if (nodeData.hasRunning) return 'InProgress';
     }, [
         nodeData.hasError,
         nodeData.hasSuccess,

package/dist/canvas/constants.cjs

@@ -26,8 +26,24 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     CANVAS_COMPACT_BREAKPOINT: ()=>CANVAS_COMPACT_BREAKPOINT,
     DEFAULT_NODE_SIZE: ()=>DEFAULT_NODE_SIZE,
+    DEFAULT_RECTANGLE_NODE_WIDTH: ()=>DEFAULT_RECTANGLE_NODE_WIDTH,
     FLOATING_CANVAS_PANEL_OFFSET: ()=>FLOATING_CANVAS_PANEL_OFFSET,
     GRID_SPACING: ()=>GRID_SPACING,
+    NODE_BADGE_INSET_CIRCLE: ()=>NODE_BADGE_INSET_CIRCLE,
+    NODE_BADGE_INSET_SQUARE: ()=>NODE_BADGE_INSET_SQUARE,
+    NODE_BADGE_SIZE: ()=>NODE_BADGE_SIZE,
+    NODE_BORDER_SIZE: ()=>NODE_BORDER_SIZE,
+    NODE_CONTAINER_RADIUS_RATIO: ()=>NODE_CONTAINER_RADIUS_RATIO,
+    NODE_ERROR_ICON_SIZE: ()=>NODE_ERROR_ICON_SIZE,
+    NODE_HEIGHT_DEFAULT: ()=>NODE_HEIGHT_DEFAULT,
+    NODE_HEIGHT_FOOTER_BUTTON: ()=>NODE_HEIGHT_FOOTER_BUTTON,
+    NODE_HEIGHT_FOOTER_DOUBLE: ()=>NODE_HEIGHT_FOOTER_DOUBLE,
+    NODE_HEIGHT_FOOTER_SINGLE: ()=>NODE_HEIGHT_FOOTER_SINGLE,
+    NODE_INNER_ICON_RATIO: ()=>NODE_INNER_ICON_RATIO,
+    NODE_INNER_RADIUS_RATIO: ()=>NODE_INNER_RADIUS_RATIO,
+    NODE_INNER_SHAPE_RATIO: ()=>NODE_INNER_SHAPE_RATIO,
+    NODE_TEXT_BOTTOM_OFFSET: ()=>NODE_TEXT_BOTTOM_OFFSET,
+    NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES: ()=>NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES,
     PREVIEW_EDGE_ID: ()=>PREVIEW_EDGE_ID,
     PREVIEW_NODE_ID: ()=>PREVIEW_NODE_ID,
     TOOLBOX_GAP: ()=>TOOLBOX_GAP,
@@ -47,10 +63,42 @@ const TOOLBOX_PADDING_X = 20;
 const TOOLBOX_PADDING_Y = 12;
 const TOOLBOX_GAP = 12;
 const FLOATING_CANVAS_PANEL_OFFSET = 10;
+const DEFAULT_RECTANGLE_NODE_WIDTH = 288;
+const NODE_HEIGHT_DEFAULT = 6 * GRID_SPACING;
+const NODE_HEIGHT_FOOTER_BUTTON = 9 * GRID_SPACING;
+const NODE_HEIGHT_FOOTER_SINGLE = 10 * GRID_SPACING;
+const NODE_HEIGHT_FOOTER_DOUBLE = 11 * GRID_SPACING;
+const NODE_CONTAINER_RADIUS_RATIO = 32 / DEFAULT_NODE_SIZE;
+const NODE_INNER_SHAPE_RATIO = 80 / DEFAULT_NODE_SIZE;
+const NODE_INNER_ICON_RATIO = 40 / DEFAULT_NODE_SIZE;
+const NODE_INNER_RADIUS_RATIO = 24 / DEFAULT_NODE_SIZE;
+const NODE_BORDER_SIZE = 2;
+const NODE_ERROR_ICON_SIZE = 40;
+const NODE_TEXT_BOTTOM_OFFSET = -8;
+const NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES = -40;
+const NODE_BADGE_SIZE = 20;
+const NODE_BADGE_INSET_SQUARE = 6;
+const NODE_BADGE_INSET_CIRCLE = 12;
 exports.CANVAS_COMPACT_BREAKPOINT = __webpack_exports__.CANVAS_COMPACT_BREAKPOINT;
 exports.DEFAULT_NODE_SIZE = __webpack_exports__.DEFAULT_NODE_SIZE;
+exports.DEFAULT_RECTANGLE_NODE_WIDTH = __webpack_exports__.DEFAULT_RECTANGLE_NODE_WIDTH;
 exports.FLOATING_CANVAS_PANEL_OFFSET = __webpack_exports__.FLOATING_CANVAS_PANEL_OFFSET;
 exports.GRID_SPACING = __webpack_exports__.GRID_SPACING;
+exports.NODE_BADGE_INSET_CIRCLE = __webpack_exports__.NODE_BADGE_INSET_CIRCLE;
+exports.NODE_BADGE_INSET_SQUARE = __webpack_exports__.NODE_BADGE_INSET_SQUARE;
+exports.NODE_BADGE_SIZE = __webpack_exports__.NODE_BADGE_SIZE;
+exports.NODE_BORDER_SIZE = __webpack_exports__.NODE_BORDER_SIZE;
+exports.NODE_CONTAINER_RADIUS_RATIO = __webpack_exports__.NODE_CONTAINER_RADIUS_RATIO;
+exports.NODE_ERROR_ICON_SIZE = __webpack_exports__.NODE_ERROR_ICON_SIZE;
+exports.NODE_HEIGHT_DEFAULT = __webpack_exports__.NODE_HEIGHT_DEFAULT;
+exports.NODE_HEIGHT_FOOTER_BUTTON = __webpack_exports__.NODE_HEIGHT_FOOTER_BUTTON;
+exports.NODE_HEIGHT_FOOTER_DOUBLE = __webpack_exports__.NODE_HEIGHT_FOOTER_DOUBLE;
+exports.NODE_HEIGHT_FOOTER_SINGLE = __webpack_exports__.NODE_HEIGHT_FOOTER_SINGLE;
+exports.NODE_INNER_ICON_RATIO = __webpack_exports__.NODE_INNER_ICON_RATIO;
+exports.NODE_INNER_RADIUS_RATIO = __webpack_exports__.NODE_INNER_RADIUS_RATIO;
+exports.NODE_INNER_SHAPE_RATIO = __webpack_exports__.NODE_INNER_SHAPE_RATIO;
+exports.NODE_TEXT_BOTTOM_OFFSET = __webpack_exports__.NODE_TEXT_BOTTOM_OFFSET;
+exports.NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES = __webpack_exports__.NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES;
 exports.PREVIEW_EDGE_ID = __webpack_exports__.PREVIEW_EDGE_ID;
 exports.PREVIEW_NODE_ID = __webpack_exports__.PREVIEW_NODE_ID;
 exports.TOOLBOX_GAP = __webpack_exports__.TOOLBOX_GAP;
@@ -61,8 +109,24 @@ exports.TOOLBOX_WIDTH = __webpack_exports__.TOOLBOX_WIDTH;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "CANVAS_COMPACT_BREAKPOINT",
     "DEFAULT_NODE_SIZE",
+    "DEFAULT_RECTANGLE_NODE_WIDTH",
     "FLOATING_CANVAS_PANEL_OFFSET",
     "GRID_SPACING",
+    "NODE_BADGE_INSET_CIRCLE",
+    "NODE_BADGE_INSET_SQUARE",
+    "NODE_BADGE_SIZE",
+    "NODE_BORDER_SIZE",
+    "NODE_CONTAINER_RADIUS_RATIO",
+    "NODE_ERROR_ICON_SIZE",
+    "NODE_HEIGHT_DEFAULT",
+    "NODE_HEIGHT_FOOTER_BUTTON",
+    "NODE_HEIGHT_FOOTER_DOUBLE",
+    "NODE_HEIGHT_FOOTER_SINGLE",
+    "NODE_INNER_ICON_RATIO",
+    "NODE_INNER_RADIUS_RATIO",
+    "NODE_INNER_SHAPE_RATIO",
+    "NODE_TEXT_BOTTOM_OFFSET",
+    "NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES",
     "PREVIEW_EDGE_ID",
     "PREVIEW_NODE_ID",
     "TOOLBOX_GAP",

package/dist/canvas/constants.d.ts

@@ -9,4 +9,20 @@ export declare const TOOLBOX_PADDING_X = 20;
 export declare const TOOLBOX_PADDING_Y = 12;
 export declare const TOOLBOX_GAP = 12;
 export declare const FLOATING_CANVAS_PANEL_OFFSET = 10;
+export declare const DEFAULT_RECTANGLE_NODE_WIDTH = 288;
+export declare const NODE_HEIGHT_DEFAULT: number;
+export declare const NODE_HEIGHT_FOOTER_BUTTON: number;
+export declare const NODE_HEIGHT_FOOTER_SINGLE: number;
+export declare const NODE_HEIGHT_FOOTER_DOUBLE: number;
+export declare const NODE_CONTAINER_RADIUS_RATIO: number;
+export declare const NODE_INNER_SHAPE_RATIO: number;
+export declare const NODE_INNER_ICON_RATIO: number;
+export declare const NODE_INNER_RADIUS_RATIO: number;
+export declare const NODE_BORDER_SIZE = 2;
+export declare const NODE_ERROR_ICON_SIZE = 40;
+export declare const NODE_TEXT_BOTTOM_OFFSET = -8;
+export declare const NODE_TEXT_BOTTOM_OFFSET_WITH_HANDLES = -40;
+export declare const NODE_BADGE_SIZE = 20;
+export declare const NODE_BADGE_INSET_SQUARE = 6;
+export declare const NODE_BADGE_INSET_CIRCLE = 12;
 //# sourceMappingURL=constants.d.ts.map