@uipath/apollo-react 4.7.0 → 4.8.1

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/constants.cjs

@@ -32,6 +32,7 @@ __webpack_require__.d(__webpack_exports__, {
     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,
@@ -71,6 +72,7 @@ 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;
@@ -85,6 +87,7 @@ 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;
@@ -112,6 +115,7 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
     "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",

package/dist/canvas/constants.d.ts

@@ -18,6 +18,7 @@ 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;

package/dist/canvas/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/canvas/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,YAAY,KAAK,CAAC;AAG/B,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAG7C,eAAO,MAAM,aAAa,MAAM,CAAC;AAEjC,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,WAAW,KAAK,CAAC;AAU9B,eAAO,MAAM,4BAA4B,KAAK,CAAC;AAG/C,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAGhD,eAAO,MAAM,mBAAmB,QAAmB,CAAC;AACpD,eAAO,MAAM,yBAAyB,QAAmB,CAAC;AAC1D,eAAO,MAAM,yBAAyB,QAAoB,CAAC;AAC3D,eAAO,MAAM,yBAAyB,QAAoB,CAAC;AAO3D,eAAO,MAAM,2BAA2B,QAAyB,CAAC;AAClE,eAAO,MAAM,sBAAsB,QAAyB,CAAC;AAC7D,eAAO,MAAM,qBAAqB,QAAyB,CAAC;AAC5D,eAAO,MAAM,uBAAuB,QAAyB,CAAC;AAG9D,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAGvC,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAC1C,eAAO,MAAM,oCAAoC,MAAM,CAAC;AAGxD,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,uBAAuB,IAAI,CAAC;AACzC,eAAO,MAAM,uBAAuB,KAAK,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/canvas/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,YAAY,KAAK,CAAC;AAG/B,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAG7C,eAAO,MAAM,aAAa,MAAM,CAAC;AAEjC,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,WAAW,KAAK,CAAC;AAU9B,eAAO,MAAM,4BAA4B,KAAK,CAAC;AAG/C,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAGhD,eAAO,MAAM,mBAAmB,QAAmB,CAAC;AACpD,eAAO,MAAM,yBAAyB,QAAmB,CAAC;AAC1D,eAAO,MAAM,yBAAyB,QAAoB,CAAC;AAC3D,eAAO,MAAM,yBAAyB,QAAoB,CAAC;AAO3D,eAAO,MAAM,2BAA2B,QAAyB,CAAC;AAClE,eAAO,MAAM,sBAAsB,QAAyB,CAAC;AAC7D,eAAO,MAAM,qBAAqB,QAAyB,CAAC;AAC5D,eAAO,MAAM,uBAAuB,QAAyB,CAAC;AAC9D,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAGlC,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAGvC,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAC1C,eAAO,MAAM,oCAAoC,MAAM,CAAC;AAGxD,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,uBAAuB,IAAI,CAAC;AACzC,eAAO,MAAM,uBAAuB,KAAK,CAAC"}

package/dist/canvas/constants.js

@@ -18,10 +18,11 @@ 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;
-export { 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_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, TOOLBOX_HEIGHT, TOOLBOX_PADDING_X, TOOLBOX_PADDING_Y, TOOLBOX_WIDTH };
+export { 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, TOOLBOX_HEIGHT, TOOLBOX_PADDING_X, TOOLBOX_PADDING_Y, TOOLBOX_WIDTH };

package/dist/canvas/schema/node-definition/category-manifest.cjs

@@ -32,8 +32,8 @@ const categoryManifestSchema = external_zod_namespaceObject.z.object({
     name: external_zod_namespaceObject.z.string().min(1),
     parentId: external_zod_namespaceObject.z.string().optional(),
     sortOrder: external_zod_namespaceObject.z.number().int().nonnegative(),
-    color: external_zod_namespaceObject.z.string().min(1),
-    colorDark: external_zod_namespaceObject.z.string().min(1),
+    color: external_zod_namespaceObject.z.string().min(1).optional(),
+    colorDark: external_zod_namespaceObject.z.string().min(1).optional(),
     icon: external_zod_namespaceObject.z.string().min(1),
     tags: external_zod_namespaceObject.z.array(external_zod_namespaceObject.z.string())
 });

package/dist/canvas/schema/node-definition/category-manifest.d.ts

@@ -4,8 +4,8 @@ export declare const categoryManifestSchema: z.ZodObject<{
     name: z.ZodString;
     parentId: z.ZodOptional<z.ZodString>;
     sortOrder: z.ZodNumber;
-    color: z.ZodString;
-    colorDark: z.ZodString;
+    color: z.ZodOptional<z.ZodString>;
+    colorDark: z.ZodOptional<z.ZodString>;
     icon: z.ZodString;
     tags: z.ZodArray<z.ZodString>;
 }, z.core.$strip>;

package/dist/canvas/schema/node-definition/category-manifest.js

@@ -4,8 +4,8 @@ const categoryManifestSchema = z.object({
     name: z.string().min(1),
     parentId: z.string().optional(),
     sortOrder: z.number().int().nonnegative(),
-    color: z.string().min(1),
-    colorDark: z.string().min(1),
+    color: z.string().min(1).optional(),
+    colorDark: z.string().min(1).optional(),
     icon: z.string().min(1),
     tags: z.array(z.string())
 });

package/dist/canvas/storybook-utils/manifests/index.d.ts

@@ -6,11 +6,11 @@ export declare const defaultWorkflowManifest: {
         id: string;
         name: string;
         sortOrder: number;
-        color: string;
-        colorDark: string;
         icon: string;
         tags: string[];
         parentId?: string | undefined;
+        color?: string | undefined;
+        colorDark?: string | undefined;
     }[];
     nodes: {
         nodeType: string;