@uipath/apollo-react 4.7.0 → 4.8.1

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

@@ -0,0 +1,152 @@
+"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__, {
+    HandleHoverBridge: ()=>HandleHoverBridge,
+    HandleButton: ()=>HandleButton
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const index_cjs_namespaceObject = require("../../layouts/index.cjs");
+const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+const external_react_namespaceObject = require("react");
+const CssUtil_cjs_namespaceObject = require("../../utils/CssUtil.cjs");
+const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
+const BUTTON_POSITION = {
+    [react_cjs_namespaceObject.Position.Top]: 'flex-col-reverse bottom-full left-1/2 -translate-x-1/2',
+    [react_cjs_namespaceObject.Position.Bottom]: 'flex-col top-full left-1/2 -translate-x-1/2',
+    [react_cjs_namespaceObject.Position.Left]: 'flex-row-reverse right-full top-1/2 -translate-y-1/2',
+    [react_cjs_namespaceObject.Position.Right]: 'flex-row left-full top-1/2 -translate-y-1/2'
+};
+const DRAG_THRESHOLD = 5;
+const HandleButton = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ visible, labelVisible, position, onAction, handleRef, label, labelIcon, labelBackgroundColor })=>{
+    const didDragRef = (0, external_react_namespaceObject.useRef)(false);
+    const teardownRef = (0, external_react_namespaceObject.useRef)(null);
+    (0, external_react_namespaceObject.useEffect)(()=>()=>teardownRef.current?.(), []);
+    const handleClick = (0, external_react_namespaceObject.useCallback)((e)=>{
+        e.stopPropagation();
+        if (didDragRef.current) return;
+        onAction(e);
+    }, [
+        onAction
+    ]);
+    const handlePointerDown = (0, external_react_namespaceObject.useCallback)((e)=>{
+        teardownRef.current?.();
+        didDragRef.current = false;
+        const startX = e.clientX;
+        const startY = e.clientY;
+        const onMove = (moveEvt)=>{
+            if (didDragRef.current) return;
+            const dx = moveEvt.clientX - startX;
+            const dy = moveEvt.clientY - startY;
+            if (dx * dx + dy * dy < DRAG_THRESHOLD * DRAG_THRESHOLD) return;
+            didDragRef.current = true;
+            const handleEl = handleRef?.current;
+            if (handleEl) {
+                const rect = handleEl.getBoundingClientRect();
+                handleEl.dispatchEvent(new MouseEvent('mousedown', {
+                    bubbles: true,
+                    cancelable: true,
+                    clientX: rect.left + rect.width / 2,
+                    clientY: rect.top + rect.height / 2
+                }));
+            }
+        };
+        const cleanup = ()=>{
+            document.removeEventListener('pointermove', onMove);
+            document.removeEventListener('pointerup', cleanup);
+            document.removeEventListener('pointercancel', cleanup);
+            teardownRef.current = null;
+        };
+        document.addEventListener('pointermove', onMove);
+        document.addEventListener('pointerup', cleanup);
+        document.addEventListener('pointercancel', cleanup);
+        teardownRef.current = cleanup;
+    }, []);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: (0, CssUtil_cjs_namespaceObject.cx)('absolute flex items-center gap-1 pointer-events-none', BUTTON_POSITION[position]),
+        children: [
+            visible && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+                "aria-label": "Add node",
+                variant: "outline",
+                size: "3xs",
+                icon: true,
+                onClick: handleClick,
+                onPointerDown: handlePointerDown,
+                className: "nodrag nopan pointer-events-auto rounded-[10px] animate-fade-in w-7 h-7",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                    icon: "plus",
+                    size: 14
+                })
+            }),
+            label && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(InlineLabel, {
+                label: label,
+                labelIcon: labelIcon,
+                backgroundColor: labelBackgroundColor,
+                visible: labelVisible
+            })
+        ]
+    });
+});
+const InlineLabel = ({ label, labelIcon, backgroundColor, visible = true })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: (0, CssUtil_cjs_namespaceObject.cx)('px-1.5 py-0.5 rounded-sm whitespace-nowrap select-none transition-opacity duration-250', visible ? 'opacity-100' : 'opacity-0'),
+        style: backgroundColor ? {
+            backgroundColor
+        } : void 0,
+        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
+                })
+            ]
+        })
+    });
+const BRIDGE_BASE = 'absolute pointer-events-auto cursor-default';
+const BRIDGE_POSITION = {
+    [react_cjs_namespaceObject.Position.Top]: 'bottom-full left-0 w-full',
+    [react_cjs_namespaceObject.Position.Bottom]: 'top-full left-0 w-full',
+    [react_cjs_namespaceObject.Position.Left]: 'right-full top-0 h-full',
+    [react_cjs_namespaceObject.Position.Right]: 'left-full top-0 h-full'
+};
+const HandleHoverBridge = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ position, visible })=>{
+    if (!visible) return null;
+    const isVertical = position === react_cjs_namespaceObject.Position.Top || position === react_cjs_namespaceObject.Position.Bottom;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: (0, CssUtil_cjs_namespaceObject.cx)(BRIDGE_BASE, BRIDGE_POSITION[position], isVertical ? 'h-14' : 'w-14')
+    });
+});
+exports.HandleButton = __webpack_exports__.HandleButton;
+exports.HandleHoverBridge = __webpack_exports__.HandleHoverBridge;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "HandleButton",
+    "HandleHoverBridge"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,16 @@
+import { Position } from '../../xyflow/react.ts';
+export declare const HandleButton: import("react").MemoExoticComponent<({ visible, labelVisible, position, onAction, handleRef, label, labelIcon, labelBackgroundColor, }: {
+    visible?: boolean;
+    labelVisible?: boolean;
+    position: Position;
+    onAction: (event: React.MouseEvent) => void;
+    handleRef?: React.RefObject<HTMLDivElement | null>;
+    label?: string;
+    labelIcon?: React.ReactNode;
+    labelBackgroundColor?: string;
+}) => import("react/jsx-runtime").JSX.Element>;
+export declare const HandleHoverBridge: import("react").MemoExoticComponent<({ position, visible }: {
+    position: Position;
+    visible?: boolean;
+}) => import("react/jsx-runtime").JSX.Element | null>;
+//# sourceMappingURL=HandleButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HandleButton.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/ButtonHandle/HandleButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AAqBpE,eAAO,MAAM,YAAY,0IAUpB;IACD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,6CA+FF,CAAC;AAqCF,eAAO,MAAM,iBAAiB,8DACJ;IAAE,QAAQ,EAAE,QAAQ,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,oDAOlE,CAAC"}

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

@@ -0,0 +1,115 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Row } from "../../layouts/index.js";
+import { Position } from "../../xyflow/react.js";
+import { Button } from "@uipath/apollo-wind";
+import { memo, useCallback, useEffect, useRef } from "react";
+import { cx } from "../../utils/CssUtil.js";
+import { CanvasIcon } from "../../utils/icon-registry.js";
+const BUTTON_POSITION = {
+    [Position.Top]: 'flex-col-reverse bottom-full left-1/2 -translate-x-1/2',
+    [Position.Bottom]: 'flex-col top-full left-1/2 -translate-x-1/2',
+    [Position.Left]: 'flex-row-reverse right-full top-1/2 -translate-y-1/2',
+    [Position.Right]: 'flex-row left-full top-1/2 -translate-y-1/2'
+};
+const DRAG_THRESHOLD = 5;
+const HandleButton = /*#__PURE__*/ memo(({ visible, labelVisible, position, onAction, handleRef, label, labelIcon, labelBackgroundColor })=>{
+    const didDragRef = useRef(false);
+    const teardownRef = useRef(null);
+    useEffect(()=>()=>teardownRef.current?.(), []);
+    const handleClick = useCallback((e)=>{
+        e.stopPropagation();
+        if (didDragRef.current) return;
+        onAction(e);
+    }, [
+        onAction
+    ]);
+    const handlePointerDown = useCallback((e)=>{
+        teardownRef.current?.();
+        didDragRef.current = false;
+        const startX = e.clientX;
+        const startY = e.clientY;
+        const onMove = (moveEvt)=>{
+            if (didDragRef.current) return;
+            const dx = moveEvt.clientX - startX;
+            const dy = moveEvt.clientY - startY;
+            if (dx * dx + dy * dy < DRAG_THRESHOLD * DRAG_THRESHOLD) return;
+            didDragRef.current = true;
+            const handleEl = handleRef?.current;
+            if (handleEl) {
+                const rect = handleEl.getBoundingClientRect();
+                handleEl.dispatchEvent(new MouseEvent('mousedown', {
+                    bubbles: true,
+                    cancelable: true,
+                    clientX: rect.left + rect.width / 2,
+                    clientY: rect.top + rect.height / 2
+                }));
+            }
+        };
+        const cleanup = ()=>{
+            document.removeEventListener('pointermove', onMove);
+            document.removeEventListener('pointerup', cleanup);
+            document.removeEventListener('pointercancel', cleanup);
+            teardownRef.current = null;
+        };
+        document.addEventListener('pointermove', onMove);
+        document.addEventListener('pointerup', cleanup);
+        document.addEventListener('pointercancel', cleanup);
+        teardownRef.current = cleanup;
+    }, []);
+    return /*#__PURE__*/ jsxs("div", {
+        className: cx('absolute flex items-center gap-1 pointer-events-none', BUTTON_POSITION[position]),
+        children: [
+            visible && /*#__PURE__*/ jsx(Button, {
+                "aria-label": "Add node",
+                variant: "outline",
+                size: "3xs",
+                icon: true,
+                onClick: handleClick,
+                onPointerDown: handlePointerDown,
+                className: "nodrag nopan pointer-events-auto rounded-[10px] animate-fade-in w-7 h-7",
+                children: /*#__PURE__*/ jsx(CanvasIcon, {
+                    icon: "plus",
+                    size: 14
+                })
+            }),
+            label && /*#__PURE__*/ jsx(InlineLabel, {
+                label: label,
+                labelIcon: labelIcon,
+                backgroundColor: labelBackgroundColor,
+                visible: labelVisible
+            })
+        ]
+    });
+});
+const InlineLabel = ({ label, labelIcon, backgroundColor, visible = true })=>/*#__PURE__*/ jsx("div", {
+        className: cx('px-1.5 py-0.5 rounded-sm whitespace-nowrap select-none transition-opacity duration-250', visible ? 'opacity-100' : 'opacity-0'),
+        style: backgroundColor ? {
+            backgroundColor
+        } : void 0,
+        children: /*#__PURE__*/ jsxs(Row, {
+            align: "center",
+            gap: 4,
+            children: [
+                labelIcon,
+                /*#__PURE__*/ jsx("span", {
+                    className: "text-xs font-bold text-foreground-muted",
+                    children: label
+                })
+            ]
+        })
+    });
+const BRIDGE_BASE = 'absolute pointer-events-auto cursor-default';
+const BRIDGE_POSITION = {
+    [Position.Top]: 'bottom-full left-0 w-full',
+    [Position.Bottom]: 'top-full left-0 w-full',
+    [Position.Left]: 'right-full top-0 h-full',
+    [Position.Right]: 'left-full top-0 h-full'
+};
+const HandleHoverBridge = /*#__PURE__*/ memo(({ position, visible })=>{
+    if (!visible) return null;
+    const isVertical = position === Position.Top || position === Position.Bottom;
+    return /*#__PURE__*/ jsx("div", {
+        className: cx(BRIDGE_BASE, BRIDGE_POSITION[position], isVertical ? 'h-14' : 'w-14')
+    });
+});
+export { HandleButton, HandleHoverBridge };

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

@@ -0,0 +1,62 @@
+"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__, {
+    HandleLabel: ()=>HandleLabel
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const index_cjs_namespaceObject = require("../../layouts/index.cjs");
+const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
+const CssUtil_cjs_namespaceObject = require("../../utils/CssUtil.cjs");
+const LABEL_POSITION = {
+    [react_cjs_namespaceObject.Position.Top]: 'bottom-[calc(100%+4px)] left-1/2 -translate-x-1/2',
+    [react_cjs_namespaceObject.Position.Bottom]: 'top-[calc(100%+4px)] left-1/2 -translate-x-1/2',
+    [react_cjs_namespaceObject.Position.Left]: 'right-[calc(100%+4px)] top-1/2 -translate-y-1/2',
+    [react_cjs_namespaceObject.Position.Right]: 'left-[calc(100%+4px)] top-1/2 -translate-y-1/2'
+};
+const HandleLabel = ({ position, backgroundColor, label, labelIcon, shouldTruncate })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: (0, CssUtil_cjs_namespaceObject.cx)('absolute px-1.5 py-0.5 rounded-sm z-1 whitespace-nowrap select-none', LABEL_POSITION[position], shouldTruncate && 'max-w-[50px] overflow-hidden'),
+        style: {
+            backgroundColor
+        },
+        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: (0, CssUtil_cjs_namespaceObject.cx)('text-xs font-bold text-foreground-muted', shouldTruncate && 'overflow-hidden text-ellipsis whitespace-nowrap'),
+                    children: label
+                })
+            ]
+        })
+    });
+exports.HandleLabel = __webpack_exports__.HandleLabel;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "HandleLabel"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,9 @@
+import { Position } from '../../xyflow/react.ts';
+export declare const HandleLabel: ({ position, backgroundColor, label, labelIcon, shouldTruncate, }: {
+    position: Position;
+    backgroundColor: string;
+    label: string;
+    labelIcon?: React.ReactNode;
+    shouldTruncate?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=HandleLabel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HandleLabel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/ButtonHandle/HandleLabel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AAUpE,eAAO,MAAM,WAAW,GAAI,kEAMzB;IACD,QAAQ,EAAE,QAAQ,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,4CAqBA,CAAC"}

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

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Row } from "../../layouts/index.js";
+import { Position } from "../../xyflow/react.js";
+import { cx } from "../../utils/CssUtil.js";
+const LABEL_POSITION = {
+    [Position.Top]: 'bottom-[calc(100%+4px)] left-1/2 -translate-x-1/2',
+    [Position.Bottom]: 'top-[calc(100%+4px)] left-1/2 -translate-x-1/2',
+    [Position.Left]: 'right-[calc(100%+4px)] top-1/2 -translate-y-1/2',
+    [Position.Right]: 'left-[calc(100%+4px)] top-1/2 -translate-y-1/2'
+};
+const HandleLabel = ({ position, backgroundColor, label, labelIcon, shouldTruncate })=>/*#__PURE__*/ jsx("div", {
+        className: cx('absolute px-1.5 py-0.5 rounded-sm z-1 whitespace-nowrap select-none', LABEL_POSITION[position], shouldTruncate && 'max-w-[50px] overflow-hidden'),
+        style: {
+            backgroundColor
+        },
+        children: /*#__PURE__*/ jsxs(Row, {
+            align: "center",
+            gap: 4,
+            children: [
+                labelIcon,
+                /*#__PURE__*/ jsx("span", {
+                    className: cx('text-xs font-bold text-foreground-muted', shouldTruncate && 'overflow-hidden text-ellipsis whitespace-nowrap'),
+                    children: label
+                })
+            ]
+        })
+    });
+export { HandleLabel };

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

@@ -0,0 +1,53 @@
+"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__, {
+    HandleNotch: ()=>HandleNotch
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const CssUtil_cjs_namespaceObject = require("../../utils/CssUtil.cjs");
+const getNotchWidth = (handleType, isVertical)=>{
+    if ('input' === handleType && !isVertical) return 'w-2';
+    if ('artifact' === handleType) return 'w-2.5';
+    return 'w-3';
+};
+const getNotchHeight = (handleType, isVertical)=>{
+    if ('input' === handleType && isVertical) return 'h-2';
+    if ('artifact' === handleType) return 'h-2.5';
+    return 'h-3';
+};
+const HandleNotch = ({ handleType, isVertical, selected, hovered, showNotch })=>{
+    const isActive = selected || hovered;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: (0, CssUtil_cjs_namespaceObject.cx)('border-2 pointer-events-none transition-all duration-250 ease-in-out', getNotchWidth(handleType, isVertical), getNotchHeight(handleType, isVertical), 'artifact' === handleType || 'input' === handleType ? 'rounded-none' : 'rounded-full', 'artifact' === handleType && 'rotate-45', isActive ? 'border-brand bg-brand' : 'border-border bg-surface', showNotch ? 'opacity-100' : 'opacity-0')
+    });
+};
+exports.HandleNotch = __webpack_exports__.HandleNotch;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "HandleNotch"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,9 @@
+export type HandleType = 'artifact' | 'input' | 'output';
+export declare const HandleNotch: ({ handleType, isVertical, selected, hovered, showNotch, }: {
+    handleType: HandleType;
+    isVertical?: boolean;
+    selected: boolean;
+    hovered?: boolean;
+    showNotch?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=HandleNotch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HandleNotch.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/ButtonHandle/HandleNotch.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;AAczD,eAAO,MAAM,WAAW,GAAI,2DAMzB;IACD,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,4CAeA,CAAC"}

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

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { cx } from "../../utils/CssUtil.js";
+const getNotchWidth = (handleType, isVertical)=>{
+    if ('input' === handleType && !isVertical) return 'w-2';
+    if ('artifact' === handleType) return 'w-2.5';
+    return 'w-3';
+};
+const getNotchHeight = (handleType, isVertical)=>{
+    if ('input' === handleType && isVertical) return 'h-2';
+    if ('artifact' === handleType) return 'h-2.5';
+    return 'h-3';
+};
+const HandleNotch = ({ handleType, isVertical, selected, hovered, showNotch })=>{
+    const isActive = selected || hovered;
+    return /*#__PURE__*/ jsx("div", {
+        className: cx('border-2 pointer-events-none transition-all duration-250 ease-in-out', getNotchWidth(handleType, isVertical), getNotchHeight(handleType, isVertical), 'artifact' === handleType || 'input' === handleType ? 'rounded-none' : 'rounded-full', 'artifact' === handleType && 'rotate-45', isActive ? 'border-brand bg-brand' : 'border-border bg-surface', showNotch ? 'opacity-100' : 'opacity-0')
+    });
+};
+export { HandleNotch };