@oneuptime/common 10.0.39 → 10.0.41

package/build/dist/UI/Components/MoreMenu/MoreMenuItem.js

@@ -1,12 +1,12 @@
 import React from "react";
 import Icon from "../Icon/Icon";
 const MoreMenuItem = (props) => {
-    return (React.createElement("a", { key: props.key || Math.random(), className: `cursor-pointer group flex items-center px-4 py-2 text-sm text-gray-600 hover:text-gray-700 hover:bg-gray-50 ${props.className}`, role: "menuitem", onClick: () => {
+    return (React.createElement("a", { key: props.key || Math.random(), className: `cursor-pointer group flex items-center px-3 py-2 mx-1 rounded-md text-sm text-gray-700 hover:text-gray-900 hover:bg-indigo-50 transition-colors duration-100 ${props.className}`, role: "menuitem", onClick: () => {
             props.onClick();
         } },
-        props.icon && (React.createElement(Icon, { icon: props.icon, className: `mr-3 h-5 w-5 text-gray-400 text-gray-700 hover:text-gray-900 ${props.iconClassName}` })),
-        React.createElement("div", { className: "flex w-full justify-between" },
-            React.createElement("div", null, props.text),
+        props.icon && (React.createElement(Icon, { icon: props.icon, className: `mr-2.5 h-4 w-4 text-gray-400 group-hover:text-indigo-500 transition-colors duration-100 ${props.iconClassName}` })),
+        React.createElement("div", { className: "flex w-full justify-between items-center" },
+            React.createElement("div", { className: "font-medium" }, props.text),
             React.createElement("div", null, props.rightElement))));
 };
 export default MoreMenuItem;

package/build/dist/UI/Components/MoreMenu/MoreMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MoreMenuItem.js","sourceRoot":"","sources":["../../../../../UI/Components/MoreMenu/MoreMenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAE/D,OAAO,IAAI,MAAM,cAAc,CAAC;AAYhC,MAAM,YAAY,GAAsC,CACtD,KAAqB,EACP,EAAE;IAChB,OAAO,CACL,2BACE,GAAG,EAAE,KAAK,CAAC,GAAG,IAAI,IAAI,CAAC,MAAM,EAAE,EAC/B,SAAS,EAAE,+GAA+G,KAAK,CAAC,SAAS,EAAE,EAC3I,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,GAAG,EAAE;YACZ,KAAK,CAAC,OAAO,EAAE,CAAC;QAClB,CAAC;QAEA,KAAK,CAAC,IAAI,IAAI,CACb,oBAAC,IAAI,IACH,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,SAAS,EAAE,gEAAgE,KAAK,CAAC,aAAa,EAAE,GAChG,CACH;QACD,6BAAK,SAAS,EAAC,6BAA6B;YAC1C,iCAAM,KAAK,CAAC,IAAI,CAAO;YACvB,iCAAM,KAAK,CAAC,YAAY,CAAO,CAC3B,CACJ,CACL,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"MoreMenuItem.js","sourceRoot":"","sources":["../../../../../UI/Components/MoreMenu/MoreMenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAE/D,OAAO,IAAI,MAAM,cAAc,CAAC;AAYhC,MAAM,YAAY,GAAsC,CACtD,KAAqB,EACP,EAAE;IAChB,OAAO,CACL,2BACE,GAAG,EAAE,KAAK,CAAC,GAAG,IAAI,IAAI,CAAC,MAAM,EAAE,EAC/B,SAAS,EAAE,gKAAgK,KAAK,CAAC,SAAS,EAAE,EAC5L,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,GAAG,EAAE;YACZ,KAAK,CAAC,OAAO,EAAE,CAAC;QAClB,CAAC;QAEA,KAAK,CAAC,IAAI,IAAI,CACb,oBAAC,IAAI,IACH,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,SAAS,EAAE,2FAA2F,KAAK,CAAC,aAAa,EAAE,GAC3H,CACH;QACD,6BAAK,SAAS,EAAC,0CAA0C;YACvD,6BAAK,SAAS,EAAC,aAAa,IAAE,KAAK,CAAC,IAAI,CAAO;YAC/C,iCAAM,KAAK,CAAC,YAAY,CAAO,CAC3B,CACJ,CACL,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/build/dist/UI/Components/Workflow/Component.js

@@ -1,174 +1,342 @@
 import Icon, { ThickProp } from "../Icon/Icon";
-import Pill from "../Pill/Pill";
 import Tooltip from "../Tooltip/Tooltip";
-import { Green } from "../../../Types/BrandColors";
 import IconProp from "../../../Types/Icon/IconProp";
 import { ComponentType, NodeType, } from "../../../Types/Workflow/Component";
 import React, { useState } from "react";
 import { Handle, Position } from "reactflow";
-const Node = (props) => {
-    const [isHovering, setIsHovering] = useState(false);
-    let textColor = "#6b7280";
-    let descriptionColor = "#6b7280";
-    if (isHovering) {
-        textColor = "#111827";
-        descriptionColor = "#111827";
+const getCategoryColors = (category, componentType) => {
+    if (componentType === ComponentType.Trigger) {
+        return {
+            bg: "#fefce8",
+            border: "#fde68a",
+            headerBg: "linear-gradient(135deg, #f59e0b, #d97706)",
+            headerText: "#ffffff",
+            iconColor: "#ffffff",
+            selectedBorder: "#f59e0b",
+            selectedShadow: "0 0 0 3px rgba(245, 158, 11, 0.2)",
+            handleBg: "#f59e0b",
+            handleBorder: "#d97706",
+        };
     }
-    let componentStyle = {
-        width: "15rem",
-        height: "10rem",
-        padding: "1rem",
-        borderColor: props.selected ? "#6366f1" : textColor,
-        alignItems: "center",
-        borderRadius: "0.25rem",
-        borderWidth: "2px",
-        backgroundColor: "white",
-        display: "inline-block",
-        verticalAlign: "middle",
-        boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
-    };
-    let handleStyle = {
-        background: "#6b7280",
-        height: "0.75rem",
-        width: "0.75rem",
-    };
-    const getPortPosition = (portCount, totalPorts, isLabel) => {
-        if (portCount === 1 && totalPorts === 1) {
-            return isLabel ? { left: 100 } : {};
-        }
-        if (portCount === 1 && totalPorts === 2) {
-            return { left: isLabel ? 70 : 80 };
-        }
-        if (portCount === 2 && totalPorts === 2) {
-            return { left: isLabel ? 150 : 160 };
-        }
-        if (portCount === 1 && totalPorts === 3) {
-            return { left: isLabel ? 70 : 80 };
-        }
-        if (portCount === 2 && totalPorts === 3) {
-            return isLabel ? { left: 100 } : {};
-        }
-        if (portCount === 3 && totalPorts === 3) {
-            return { left: isLabel ? 150 : 160 };
-        }
-        // default
-        return {};
-    };
-    if (props.data.nodeType === NodeType.PlaceholderNode) {
-        handleStyle = {
-            background: "#cbd5e1",
-            height: "0.75rem",
-            width: "0.75rem",
+    const lowerCategory = category.toLowerCase();
+    if (lowerCategory.includes("condition") || lowerCategory.includes("logic")) {
+        return {
+            bg: "#faf5ff",
+            border: "#e9d5ff",
+            headerBg: "linear-gradient(135deg, #a855f7, #7c3aed)",
+            headerText: "#ffffff",
+            iconColor: "#ffffff",
+            selectedBorder: "#a855f7",
+            selectedShadow: "0 0 0 3px rgba(168, 85, 247, 0.2)",
+            handleBg: "#a855f7",
+            handleBorder: "#7c3aed",
+        };
+    }
+    if (lowerCategory.includes("api") || lowerCategory.includes("webhook")) {
+        return {
+            bg: "#eff6ff",
+            border: "#bfdbfe",
+            headerBg: "linear-gradient(135deg, #3b82f6, #2563eb)",
+            headerText: "#ffffff",
+            iconColor: "#ffffff",
+            selectedBorder: "#3b82f6",
+            selectedShadow: "0 0 0 3px rgba(59, 130, 246, 0.2)",
+            handleBg: "#3b82f6",
+            handleBorder: "#2563eb",
+        };
+    }
+    if (lowerCategory.includes("slack") ||
+        lowerCategory.includes("discord") ||
+        lowerCategory.includes("teams") ||
+        lowerCategory.includes("telegram") ||
+        lowerCategory.includes("email") ||
+        lowerCategory.includes("notification")) {
+        return {
+            bg: "#ecfdf5",
+            border: "#a7f3d0",
+            headerBg: "linear-gradient(135deg, #10b981, #059669)",
+            headerText: "#ffffff",
+            iconColor: "#ffffff",
+            selectedBorder: "#10b981",
+            selectedShadow: "0 0 0 3px rgba(16, 185, 129, 0.2)",
+            handleBg: "#10b981",
+            handleBorder: "#059669",
+        };
+    }
+    if (lowerCategory.includes("code") ||
+        lowerCategory.includes("javascript") ||
+        lowerCategory.includes("custom")) {
+        return {
+            bg: "#fef2f2",
+            border: "#fecaca",
+            headerBg: "linear-gradient(135deg, #ef4444, #dc2626)",
+            headerText: "#ffffff",
+            iconColor: "#ffffff",
+            selectedBorder: "#ef4444",
+            selectedShadow: "0 0 0 3px rgba(239, 68, 68, 0.2)",
+            handleBg: "#ef4444",
+            handleBorder: "#dc2626",
+        };
+    }
+    if (lowerCategory.includes("json") || lowerCategory.includes("util")) {
+        return {
+            bg: "#f0fdf4",
+            border: "#bbf7d0",
+            headerBg: "linear-gradient(135deg, #22c55e, #16a34a)",
+            headerText: "#ffffff",
+            iconColor: "#ffffff",
+            selectedBorder: "#22c55e",
+            selectedShadow: "0 0 0 3px rgba(34, 197, 94, 0.2)",
+            handleBg: "#22c55e",
+            handleBorder: "#16a34a",
         };
-        componentStyle = {
-            borderStyle: "dashed",
-            width: "15rem",
-            height: "8rem",
-            padding: "1rem",
-            display: "inline-block",
-            alignItems: "center",
-            verticalAlign: "middle",
-            borderColor: isHovering ? "#94a3b8" : "#cbd5e1",
-            borderRadius: "0.25rem",
-            borderWidth: "2px",
-            backgroundColor: "white",
+    }
+    if (lowerCategory.includes("schedule") ||
+        lowerCategory.includes("cron") ||
+        lowerCategory.includes("timer")) {
+        return {
+            bg: "#fff7ed",
+            border: "#fed7aa",
+            headerBg: "linear-gradient(135deg, #f97316, #ea580c)",
+            headerText: "#ffffff",
+            iconColor: "#ffffff",
+            selectedBorder: "#f97316",
+            selectedShadow: "0 0 0 3px rgba(249, 115, 22, 0.2)",
+            handleBg: "#f97316",
+            handleBorder: "#ea580c",
         };
-        textColor = "#cbd5e1";
-        descriptionColor = "#cbd5e1";
-        if (isHovering) {
-            textColor = "#94a3b8";
-            descriptionColor = "#94a3b8";
-        }
     }
+    // Default / database models
+    return {
+        bg: "#f8fafc",
+        border: "#e2e8f0",
+        headerBg: "linear-gradient(135deg, #6366f1, #4f46e5)",
+        headerText: "#ffffff",
+        iconColor: "#ffffff",
+        selectedBorder: "#6366f1",
+        selectedShadow: "0 0 0 3px rgba(99, 102, 241, 0.2)",
+        handleBg: "#6366f1",
+        handleBorder: "#4f46e5",
+    };
+};
+const getPortPosition = (portCount, totalPorts, isLabel) => {
+    if (portCount === 1 && totalPorts === 1) {
+        return isLabel ? { left: 120 } : {};
+    }
+    if (portCount === 1 && totalPorts === 2) {
+        return { left: isLabel ? 70 : 80 };
+    }
+    if (portCount === 2 && totalPorts === 2) {
+        return { left: isLabel ? 170 : 180 };
+    }
+    if (portCount === 1 && totalPorts === 3) {
+        return { left: isLabel ? 40 : 50 };
+    }
+    if (portCount === 2 && totalPorts === 3) {
+        return isLabel ? { left: 120 } : {};
+    }
+    if (portCount === 3 && totalPorts === 3) {
+        return { left: isLabel ? 200 : 210 };
+    }
+    return {};
+};
+const Node = (props) => {
+    const [isHovering, setIsHovering] = useState(false);
+    const colors = getCategoryColors(props.data.metadata.category || "", props.data.metadata.componentType);
+    // Placeholder node
+    if (props.data.nodeType === NodeType.PlaceholderNode) {
+        return (React.createElement("div", { className: "cursor-pointer", onMouseOver: () => {
+                setIsHovering(true);
+            }, onMouseOut: () => {
+                setIsHovering(false);
+            }, style: {
+                width: "16rem",
+                borderRadius: "12px",
+                border: `2px dashed ${isHovering ? "#94a3b8" : "#cbd5e1"}`,
+                backgroundColor: isHovering ? "#f8fafc" : "#ffffff",
+                padding: "1.5rem",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: "0.75rem",
+                transition: "all 0.2s ease",
+                minHeight: "7rem",
+            }, onClick: () => {
+                if (props.data.onClick) {
+                    props.data.onClick(props.data);
+                }
+            } },
+            React.createElement("div", { style: {
+                    width: "2.5rem",
+                    height: "2.5rem",
+                    borderRadius: "50%",
+                    backgroundColor: isHovering ? "#e2e8f0" : "#f1f5f9",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    transition: "all 0.2s ease",
+                } },
+                React.createElement(Icon, { icon: IconProp.Add, style: {
+                        color: isHovering ? "#64748b" : "#94a3b8",
+                        width: "1.25rem",
+                        height: "1.25rem",
+                        transition: "all 0.2s ease",
+                    } })),
+            React.createElement("p", { style: {
+                    color: isHovering ? "#64748b" : "#94a3b8",
+                    fontSize: "0.8125rem",
+                    fontWeight: 500,
+                    textAlign: "center",
+                    margin: 0,
+                    transition: "all 0.2s ease",
+                } }, props.data.metadata.description || "Click to add trigger")));
+    }
+    // Regular node
+    const hasError = Boolean(props.data.error);
     return (React.createElement("div", { className: "cursor-pointer", onMouseOver: () => {
             setIsHovering(true);
         }, onMouseOut: () => {
             setIsHovering(false);
-        }, style: Object.assign(Object.assign({}, componentStyle), { height: props.data.id ? "12rem" : "10rem" }), onClick: () => {
+        }, style: {
+            width: "16rem",
+            borderRadius: "12px",
+            border: `2px solid ${hasError
+                ? "#fca5a5"
+                : props.selected
+                    ? colors.selectedBorder
+                    : isHovering
+                        ? colors.selectedBorder
+                        : colors.border}`,
+            backgroundColor: "#ffffff",
+            overflow: "visible",
+            boxShadow: props.selected
+                ? colors.selectedShadow
+                : isHovering
+                    ? `0 8px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 10px -6px rgba(0, 0, 0, 0.05)`
+                    : `0 1px 3px 0 rgba(0, 0, 0, 0.07), 0 1px 2px -1px rgba(0, 0, 0, 0.05)`,
+            transition: "all 0.2s ease",
+            transform: isHovering ? "translateY(-1px)" : "none",
+            position: "relative",
+        }, onClick: () => {
             if (props.data.onClick) {
                 props.data.onClick(props.data);
             }
         } },
-        React.createElement("div", { className: "flex justify-center" }, props.data.metadata.componentType === ComponentType.Trigger &&
-            props.data.nodeType !== NodeType.PlaceholderNode &&
-            !props.data.isPreview && React.createElement(Pill, { text: "Trigger", color: Green })),
-        !props.data.isPreview &&
-            props.data.error &&
-            props.data.nodeType !== NodeType.PlaceholderNode && (React.createElement("div", { style: {
-                width: "20px",
-                height: "20px",
-                borderRadius: "100px",
-                color: "#ef4444",
-                position: "absolute",
-                top: "0px",
-                left: "220px",
-                cursor: "pointer",
-            }, onClick: () => { } },
-            React.createElement(Icon, { icon: IconProp.Alert, style: {
-                    color: "#ef4444",
-                    width: "1rem",
-                    height: "1rem",
-                    textAlign: "center",
-                    margin: "auto",
-                    marginTop: "2px",
-                }, thick: ThickProp.Thick }))),
         !props.data.isPreview &&
             props.data.metadata.componentType !== ComponentType.Trigger && (React.createElement("div", null, props.data.metadata.inPorts &&
             props.data.metadata.inPorts.length > 0 &&
             props.data.metadata.inPorts.map((port, i) => {
-                return (React.createElement(Handle, { key: i, type: "target", id: port.id, onConnect: (_params) => { }, isConnectable: true, position: Position.Top, style: Object.assign(Object.assign({}, handleStyle), getPortPosition(i + 1, props.data.metadata.inPorts.length, false)) }));
+                return (React.createElement(Handle, { key: i, type: "target", id: port.id, onConnect: (_params) => { }, isConnectable: true, position: Position.Top, style: Object.assign({ background: colors.handleBg, height: "10px", width: "10px", border: `2px solid ${colors.handleBorder}`, top: "-5px", transition: "all 0.15s ease" }, getPortPosition(i + 1, props.data.metadata.inPorts.length, false)) }));
             }))),
-        React.createElement("div", { style: {
-                width: "100%",
+        !props.data.isPreview && hasError && (React.createElement("div", { style: {
+                position: "absolute",
+                top: "8px",
+                right: "8px",
+                zIndex: 10,
+                width: "22px",
+                height: "22px",
+                borderRadius: "50%",
+                backgroundColor: "#fef2f2",
                 display: "flex",
+                alignItems: "center",
                 justifyContent: "center",
+                border: "1px solid #fecaca",
             } },
-            React.createElement("div", { style: {
-                    margin: "auto",
-                    marginTop: props.data.metadata.iconProp ? "0.5rem" : "1rem",
+            React.createElement(Icon, { icon: IconProp.Alert, style: {
+                    color: "#ef4444",
+                    width: "0.75rem",
+                    height: "0.75rem",
+                }, thick: ThickProp.Thick }))),
+        React.createElement("div", { style: {
+                background: colors.headerBg,
+                padding: "0.625rem 0.875rem",
+                display: "flex",
+                alignItems: "center",
+                gap: "0.5rem",
+                borderRadius: "10px 10px 0 0",
+            } },
+            props.data.metadata.iconProp && (React.createElement("div", { style: {
+                    width: "1.75rem",
+                    height: "1.75rem",
+                    borderRadius: "6px",
+                    backgroundColor: "rgba(255, 255, 255, 0.2)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    flexShrink: 0,
                 } },
-                props.data.metadata.iconProp && (React.createElement(Icon, { icon: props.data.metadata.iconProp, style: {
-                        color: textColor,
-                        width: "1.5rem",
-                        height: "1.5rem",
-                        textAlign: "center",
-                        margin: "auto",
-                    } })),
-                React.createElement("p", { style: {
-                        color: textColor,
-                        fontSize: "0.875rem",
-                        lineHeight: "1.25rem",
-                        textAlign: "center",
-                        marginTop: "6px",
-                    } }, props.data.metadata.title),
-                !props.data.isPreview && props.data.id && (React.createElement("p", { style: {
-                        color: descriptionColor,
-                        fontSize: "0.875rem",
-                        textAlign: "center",
-                    } },
-                    "(",
-                    props.data.id.trim(),
-                    ")")),
-                React.createElement("p", { style: {
-                        color: descriptionColor,
-                        fontSize: "0.775rem",
-                        lineHeight: "1.0rem",
-                        textAlign: "center",
-                        marginTop: "6px",
-                    } }, props.data.metadata.description))),
+                React.createElement(Icon, { icon: props.data.metadata.iconProp, style: {
+                        color: colors.iconColor,
+                        width: "0.875rem",
+                        height: "0.875rem",
+                    } }))),
+            React.createElement("span", { style: {
+                    color: colors.headerText,
+                    fontSize: "0.8125rem",
+                    fontWeight: 600,
+                    letterSpacing: "0.01em",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                } }, props.data.metadata.title)),
+        React.createElement("div", { style: {
+                padding: "0.75rem 0.875rem",
+                backgroundColor: colors.bg,
+                minHeight: "3rem",
+                borderRadius: !props.data.metadata.outPorts ||
+                    props.data.metadata.outPorts.length === 0
+                    ? "0 0 10px 10px"
+                    : undefined,
+            } },
+            !props.data.isPreview && props.data.id && (React.createElement("div", { style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    backgroundColor: "#ffffff",
+                    border: "1px solid #e2e8f0",
+                    borderRadius: "6px",
+                    padding: "0.125rem 0.5rem",
+                    marginBottom: "0.5rem",
+                } },
+                React.createElement("span", { style: {
+                        color: "#64748b",
+                        fontSize: "0.6875rem",
+                        fontWeight: 500,
+                        fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
+                    } }, props.data.id.trim()))),
+            React.createElement("p", { style: {
+                    color: "#64748b",
+                    fontSize: "0.75rem",
+                    lineHeight: "1.125rem",
+                    margin: 0,
+                    display: "-webkit-box",
+                    WebkitLineClamp: 2,
+                    WebkitBoxOrient: "vertical",
+                    overflow: "hidden",
+                } }, props.data.metadata.description)),
         !props.data.isPreview &&
-            props.data.nodeType !== NodeType.PlaceholderNode && (React.createElement(React.Fragment, null,
-            React.createElement("div", null, props.data.metadata.outPorts &&
-                props.data.metadata.outPorts.length > 0 &&
-                props.data.metadata.outPorts.map((port, i) => {
-                    return (React.createElement(Handle, { key: i, type: "source", id: port.id, onConnect: (_params) => { }, isConnectable: true, position: Position.Bottom, style: Object.assign(Object.assign({}, handleStyle), getPortPosition(i + 1, props.data.metadata.outPorts.length, false)) }));
-                })),
-            React.createElement("div", null, props.data.metadata.outPorts &&
-                props.data.metadata.outPorts.length > 0 &&
-                props.data.metadata.outPorts.map((port, i) => {
-                    return (React.createElement(Tooltip, { key: i, text: port.description || "" },
-                        React.createElement("div", { key: i, className: "text-sm text-gray-400 absolute", style: Object.assign({ bottom: "10px" }, getPortPosition(i + 1, props.data.metadata.outPorts.length, true)) }, port.title)));
-                }))))));
+            props.data.metadata.outPorts &&
+            props.data.metadata.outPorts.length > 0 && (React.createElement(React.Fragment, null,
+            React.createElement("div", { style: {
+                    borderTop: `1px solid ${colors.border}`,
+                    padding: "0.375rem 0.875rem",
+                    display: "flex",
+                    justifyContent: props.data.metadata.outPorts.length === 1
+                        ? "center"
+                        : "space-between",
+                    backgroundColor: "#ffffff",
+                    borderRadius: "0 0 10px 10px",
+                } }, props.data.metadata.outPorts.map((port, i) => {
+                return (React.createElement(Tooltip, { key: i, text: port.description || "" },
+                    React.createElement("span", { style: {
+                            color: "#94a3b8",
+                            fontSize: "0.6875rem",
+                            fontWeight: 500,
+                        } }, port.title)));
+            })),
+            React.createElement("div", null, props.data.metadata.outPorts.map((port, i) => {
+                return (React.createElement(Handle, { key: i, type: "source", id: port.id, onConnect: (_params) => { }, isConnectable: true, position: Position.Bottom, style: Object.assign({ background: colors.handleBg, height: "10px", width: "10px", border: `2px solid ${colors.handleBorder}`, bottom: "-5px", transition: "all 0.15s ease" }, getPortPosition(i + 1, props.data.metadata.outPorts.length, false)) }));
+            }))))));
 };
 export default Node;
 //# sourceMappingURL=Component.js.map

package/build/dist/UI/Components/Workflow/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sourceRoot":"","sources":["../../../../../UI/Components/Workflow/Component.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,EAAE,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,IAAI,MAAM,cAAc,CAAC;AAChC,OAAO,OAAO,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,QAAQ,MAAM,8BAA8B,CAAC;AACpD,OAAO,EACL,aAAa,EAEb,QAAQ,GAET,MAAM,mCAAmC,CAAC;AAC3C,OAAO,KAAK,EAAE,EAAqB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAc,MAAM,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAOzD,MAAM,IAAI,GAAsC,CAAC,KAAqB,EAAE,EAAE;IACxE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAE7D,IAAI,SAAS,GAAW,SAAS,CAAC;IAClC,IAAI,gBAAgB,GAAW,SAAS,CAAC;IAEzC,IAAI,UAAU,EAAE,CAAC;QACf,SAAS,GAAG,SAAS,CAAC;QACtB,gBAAgB,GAAG,SAAS,CAAC;IAC/B,CAAC;IAED,IAAI,cAAc,GAAwB;QACxC,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,OAAO;QACf,OAAO,EAAE,MAAM;QACf,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;QACnD,UAAU,EAAE,QAAQ;QACpB,YAAY,EAAE,SAAS;QACvB,WAAW,EAAE,KAAK;QAClB,eAAe,EAAE,OAAO;QACxB,OAAO,EAAE,cAAc;QACvB,aAAa,EAAE,QAAQ;QACvB,SAAS,EAAE,+DAA+D;KAC3E,CAAC;IAEF,IAAI,WAAW,GAAwB;QACrC,UAAU,EAAE,SAAS;QACrB,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,SAAS;KACjB,CAAC;IAQF,MAAM,eAAe,GAA4B,CAC/C,SAAiB,EACjB,UAAkB,EAClB,OAAgB,EACK,EAAE;QACvB,IAAI,SAAS,KAAK,CAAC,IAAI,UAAU,KAAK,CAAC,EAAE,CAAC;YACxC,OAAO,OAAO,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACtC,CAAC;QAED,IAAI,SAAS,KAAK,CAAC,IAAI,UAAU,KAAK,CAAC,EAAE,CAAC;YACxC,OAAO,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;QACrC,CAAC;QAED,IAAI,SAAS,KAAK,CAAC,IAAI,UAAU,KAAK,CAAC,EAAE,CAAC;YACxC,OAAO,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;QACvC,CAAC;QAED,IAAI,SAAS,KAAK,CAAC,IAAI,UAAU,KAAK,CAAC,EAAE,CAAC;YACxC,OAAO,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;QACrC,CAAC;QAED,IAAI,SAAS,KAAK,CAAC,IAAI,UAAU,KAAK,CAAC,EAAE,CAAC;YACxC,OAAO,OAAO,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACtC,CAAC;QAED,IAAI,SAAS,KAAK,CAAC,IAAI,UAAU,KAAK,CAAC,EAAE,CAAC;YACxC,OAAO,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;QACvC,CAAC;QAED,UAAU;QACV,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC;IAEF,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ,KAAK,QAAQ,CAAC,eAAe,EAAE,CAAC;QACrD,WAAW,GAAG;YACZ,UAAU,EAAE,SAAS;YACrB,MAAM,EAAE,SAAS;YACjB,KAAK,EAAE,SAAS;SACjB,CAAC;QAEF,cAAc,GAAG;YACf,WAAW,EAAE,QAAQ;YACrB,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,MAAM;YACf,OAAO,EAAE,cAAc;YACvB,UAAU,EAAE,QAAQ;YACpB,aAAa,EAAE,QAAQ;YACvB,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YAC/C,YAAY,EAAE,SAAS;YACvB,WAAW,EAAE,KAAK;YAClB,eAAe,EAAE,OAAO;SACzB,CAAC;QAEF,SAAS,GAAG,SAAS,CAAC;QACtB,gBAAgB,GAAG,SAAS,CAAC;QAE7B,IAAI,UAAU,EAAE,CAAC;YACf,SAAS,GAAG,SAAS,CAAC;YACtB,gBAAgB,GAAG,SAAS,CAAC;QAC/B,CAAC;IACH,CAAC;IAED,OAAO,CACL,6BACE,SAAS,EAAC,gBAAgB,EAC1B,WAAW,EAAE,GAAG,EAAE;YAChB,aAAa,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC,EACD,UAAU,EAAE,GAAG,EAAE;YACf,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,EACD,KAAK,kCACA,cAAc,KACjB,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,KAE3C,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;gBACvB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YACjC,CAAC;QACH,CAAC;QAED,6BAAK,SAAS,EAAC,qBAAqB,IACjC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,KAAK,aAAa,CAAC,OAAO;YAC1D,KAAK,CAAC,IAAI,CAAC,QAAQ,KAAK,QAAQ,CAAC,eAAe;YAChD,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,KAAK,GAAI,CAC5D;QACL,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS;YACpB,KAAK,CAAC,IAAI,CAAC,KAAK;YAChB,KAAK,CAAC,IAAI,CAAC,QAAQ,KAAK,QAAQ,CAAC,eAAe,IAAI,CAClD,6BACE,KAAK,EAAE;gBACL,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,YAAY,EAAE,OAAO;gBACrB,KAAK,EAAE,SAAS;gBAChB,QAAQ,EAAE,UAAU;gBACpB,GAAG,EAAE,KAAK;gBACV,IAAI,EAAE,OAAO;gBACb,MAAM,EAAE,SAAS;aAClB,EACD,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;YAEjB,oBAAC,IAAI,IACH,IAAI,EAAE,QAAQ,CAAC,KAAK,EACpB,KAAK,EAAE;oBACL,KAAK,EAAE,SAAS;oBAChB,KAAK,EAAE,MAAM;oBACb,MAAM,EAAE,MAAM;oBACd,SAAS,EAAE,QAAQ;oBACnB,MAAM,EAAE,MAAM;oBACd,SAAS,EAAE,KAAK;iBACjB,EACD,KAAK,EAAE,SAAS,CAAC,KAAK,GACtB,CACE,CACP;QAEF,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS;YACpB,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,KAAK,aAAa,CAAC,OAAO,IAAI,CAC7D,iCACG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO;YAC1B,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;YACtC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,IAAU,EAAE,CAAS,EAAE,EAAE;gBACxD,OAAO,CACL,oBAAC,MAAM,IACL,GAAG,EAAE,CAAC,EACN,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,SAAS,EAAE,CAAC,OAAmB,EAAE,EAAE,GAAE,CAAC,EACtC,aAAa,EAAE,IAAI,EACnB,QAAQ,EAAE,QAAQ,CAAC,GAAG,EACtB,KAAK,kCACA,WAAW,GACX,eAAe,CAChB,CAAC,GAAG,CAAC,EACL,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,EAClC,KAAK,CACN,IAEH,CACH,CAAC;YACJ,CAAC,CAAC,CACA,CACP;QAEH,6BACE,KAAK,EAAE;gBACL,KAAK,EAAE,MAAM;gBACb,OAAO,EAAE,MAAM;gBACf,cAAc,EAAE,QAAQ;aACzB;YAED,6BACE,KAAK,EAAE;oBACL,MAAM,EAAE,MAAM;oBACd,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;iBAC5D;gBAEA,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,IAAI,CAC/B,oBAAC,IAAI,IACH,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAClC,KAAK,EAAE;wBACL,KAAK,EAAE,SAAS;wBAChB,KAAK,EAAE,QAAQ;wBACf,MAAM,EAAE,QAAQ;wBAChB,SAAS,EAAE,QAAQ;wBACnB,MAAM,EAAE,MAAM;qBACf,GACD,CACH;gBACD,2BACE,KAAK,EAAE;wBACL,KAAK,EAAE,SAAS;wBAChB,QAAQ,EAAE,UAAU;wBACpB,UAAU,EAAE,SAAS;wBACrB,SAAS,EAAE,QAAQ;wBACnB,SAAS,EAAE,KAAK;qBACjB,IAEA,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CACxB;gBACH,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,CACzC,2BACE,KAAK,EAAE;wBACL,KAAK,EAAE,gBAAgB;wBACvB,QAAQ,EAAE,UAAU;wBACpB,SAAS,EAAE,QAAQ;qBACpB;;oBAEC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE;wBACpB,CACL;gBACD,2BACE,KAAK,EAAE;wBACL,KAAK,EAAE,gBAAgB;wBACvB,QAAQ,EAAE,UAAU;wBACpB,UAAU,EAAE,QAAQ;wBACpB,SAAS,EAAE,QAAQ;wBACnB,SAAS,EAAE,KAAK;qBACjB,IAEA,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,CAC9B,CACA,CACF;QAEL,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS;YACpB,KAAK,CAAC,IAAI,CAAC,QAAQ,KAAK,QAAQ,CAAC,eAAe,IAAI,CAClD;YACE,iCACG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ;gBAC3B,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC;gBACvC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAU,EAAE,CAAS,EAAE,EAAE;oBACzD,OAAO,CACL,oBAAC,MAAM,IACL,GAAG,EAAE,CAAC,EACN,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,SAAS,EAAE,CAAC,OAAmB,EAAE,EAAE,GAAE,CAAC,EACtC,aAAa,EAAE,IAAI,EACnB,QAAQ,EAAE,QAAQ,CAAC,MAAM,EACzB,KAAK,kCACA,WAAW,GACX,eAAe,CAChB,CAAC,GAAG,CAAC,EACL,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,EACnC,KAAK,CACN,IAEH,CACH,CAAC;gBACJ,CAAC,CAAC,CACA;YACN,iCACG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ;gBAC3B,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC;gBACvC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAU,EAAE,CAAS,EAAE,EAAE;oBACzD,OAAO,CACL,oBAAC,OAAO,IAAC,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,IAAI,EAAE;wBAC3C,6BACE,GAAG,EAAE,CAAC,EACN,SAAS,EAAC,gCAAgC,EAC1C,KAAK,kBACH,MAAM,EAAE,MAAM,IACX,eAAe,CAChB,CAAC,GAAG,CAAC,EACL,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,EACnC,IAAI,CACL,KAGF,IAAI,CAAC,KAAK,CACP,CACE,CACX,CAAC;gBACJ,CAAC,CAAC,CACA,CACL,CACJ,CACC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Component.js","sourceRoot":"","sources":["../../../../../UI/Components/Workflow/Component.tsx"],"names":[],"mappings":"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"}

package/build/dist/UI/Components/Workflow/ComponentPortViewer.js

@@ -1,25 +1,51 @@
-import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import React from "react";
 const ComponentPortViewer = (props) => {
-    return (React.createElement("div", { className: "mt-5 mb-5" },
-        React.createElement("h2", { className: "text-base font-medium text-gray-500" }, props.name),
-        React.createElement("p", { className: "text-sm font-medium text-gray-400" }, props.description),
-        props.ports && props.ports.length === 0 && (React.createElement(ErrorMessage, { message: "This component does not have any ports." })),
-        React.createElement("div", { className: "mt-3" }, props.ports &&
+    return (React.createElement("div", { className: "mt-3 mb-3" },
+        React.createElement("h2", { className: "text-sm font-semibold text-gray-600" }, props.name),
+        React.createElement("p", { className: "text-xs text-gray-400 mb-2" }, props.description),
+        props.ports && props.ports.length === 0 && (React.createElement("p", { className: "text-xs text-gray-400 italic" }, "No ports configured.")),
+        React.createElement("div", null, props.ports &&
             props.ports.length > 0 &&
             props.ports.map((port, i) => {
-                return (React.createElement("div", { key: i, className: "mt-2 mb-2 relative flex items-center space-x-3 rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm focus-within:ring-2 focus-within:ring-pink-500 focus-within:ring-offset-2" },
-                    React.createElement("div", { className: "min-w-0 flex-1" },
-                        React.createElement("div", { className: "focus:outline-none" },
-                            React.createElement("span", { className: "absolute inset-0", "aria-hidden": "true" }),
-                            React.createElement("p", { className: "text-sm font-medium text-gray-900" },
-                                port.title,
-                                " ",
-                                React.createElement("span", { className: "text-gray-500 font-normal" },
-                                    "(ID: ",
-                                    port.id,
-                                    ")")),
-                            React.createElement("p", { className: "truncate text-sm text-gray-500" }, port.description)))));
+                return (React.createElement("div", { key: i, style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "0.625rem",
+                        padding: "0.5rem 0.75rem",
+                        borderRadius: "8px",
+                        backgroundColor: "#f8fafc",
+                        border: "1px solid #f1f5f9",
+                        marginBottom: "0.375rem",
+                    } },
+                    React.createElement("div", { style: {
+                            width: "8px",
+                            height: "8px",
+                            borderRadius: "50%",
+                            backgroundColor: "#94a3b8",
+                            flexShrink: 0,
+                        } }),
+                    React.createElement("div", { style: { minWidth: 0, flex: 1 } },
+                        React.createElement("p", { style: {
+                                fontSize: "0.8125rem",
+                                fontWeight: 500,
+                                color: "#334155",
+                                margin: 0,
+                                lineHeight: "1.25rem",
+                            } },
+                            port.title,
+                            React.createElement("span", { style: {
+                                    color: "#94a3b8",
+                                    fontWeight: 400,
+                                    fontSize: "0.6875rem",
+                                    marginLeft: "0.375rem",
+                                    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
+                                } }, port.id)),
+                        port.description && (React.createElement("p", { style: {
+                                fontSize: "0.75rem",
+                                color: "#94a3b8",
+                                margin: 0,
+                                lineHeight: "1rem",
+                            } }, port.description)))));
             }))));
 };
 export default ComponentPortViewer;