@datatechsolutions/ui 2.11.5 → 2.11.7

package/dist/{chunk-BONTO5LJ.js → chunk-TKLALDY4.js}

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var chunkEVX2CFNL_js = require('./chunk-EVX2CFNL.js');
+var chunk4XID6LOC_js = require('./chunk-4XID6LOC.js');
 var chunkP4YYEM4B_js = require('./chunk-P4YYEM4B.js');
 var chunkPWBWP5FJ_js = require('./chunk-PWBWP5FJ.js');
 var chunkYXN2K77G_js = require('./chunk-YXN2K77G.js');
@@ -2890,239 +2890,214 @@ var GroupFlowNode = react.memo(function GroupFlowNode2({ id, data, selected }) {
     /* @__PURE__ */ jsxRuntime.jsx(WorkflowHandle, { type: "source", position: react$1.Position.Right, id: "right-out", colorClass: "!bg-slate-500" })
   ] });
 });
-var LEGACY_WIDTH_MAP = {
-  "max-w-xl": "xl",
-  "max-w-2xl": "2xl",
-  "max-w-4xl": "4xl",
-  "max-w-6xl": "6xl",
-  "max-w-full": "full"
-};
-function WorkspaceModal({
-  open,
-  onClose,
-  title,
-  subtitle,
-  icon,
-  gradient = "from-gray-400 to-gray-500",
-  maxWidth = "2xl",
-  tabs,
-  children
+function ConfigFormActions({
+  cancelLabel,
+  saveLabel,
+  onCancel,
+  onSave,
+  saveDisabled = false
 }) {
-  const resolvedSize = LEGACY_WIDTH_MAP[maxWidth] ?? maxWidth;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    chunkEVX2CFNL_js.GlassModalShell,
-    {
-      open,
-      onClose,
-      title,
-      subtitle,
-      icon,
-      gradient,
-      maxWidth: resolvedSize,
-      children: [
-        tabs,
-        children
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 border-t border-gray-200 pt-4 dark:border-gray-700", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(chunk4XID6LOC_js.Button, { type: "button", outline: true, onClick: onCancel, children: cancelLabel }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunk4XID6LOC_js.Button, { type: "button", onClick: onSave, disabled: saveDisabled, children: saveLabel })
+  ] });
 }
-function StartNodeConfigForm({ config, onSave, onCancel }) {
-  const t = chunkYXN2K77G_js.useTranslations("agents.workflow.startNodeConfig");
-  const [inputVariables, setInputVariables] = react.useState([...config.inputVariables]);
+var COLOR_CLASSES = {
+  green: {
+    badge: "bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-300",
+    input: "focus:border-green-400 focus:ring-green-400/20",
+    row: "border-green-200/30 dark:border-green-500/15",
+    add: "text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300",
+    dot: "bg-green-500"
+  },
+  blue: {
+    badge: "bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300",
+    input: "focus:border-blue-400 focus:ring-blue-400/20",
+    row: "border-blue-200/30 dark:border-blue-500/15",
+    add: "text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300",
+    dot: "bg-blue-500"
+  },
+  purple: {
+    badge: "bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300",
+    input: "focus:border-purple-400 focus:ring-purple-400/20",
+    row: "border-purple-200/30 dark:border-purple-500/15",
+    add: "text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300",
+    dot: "bg-purple-500"
+  },
+  red: {
+    badge: "bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-300",
+    input: "focus:border-red-400 focus:ring-red-400/20",
+    row: "border-red-200/30 dark:border-red-500/15",
+    add: "text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300",
+    dot: "bg-red-500"
+  },
+  teal: {
+    badge: "bg-teal-100 text-teal-700 dark:bg-teal-500/20 dark:text-teal-300",
+    input: "focus:border-teal-400 focus:ring-teal-400/20",
+    row: "border-teal-200/30 dark:border-teal-500/15",
+    add: "text-teal-600 hover:text-teal-700 dark:text-teal-400 dark:hover:text-teal-300",
+    dot: "bg-teal-500"
+  }
+};
+function VariableListEditor({
+  variables,
+  onChange,
+  placeholder = "Variable name",
+  label,
+  addLabel = "Add",
+  color = "green",
+  numbered = false,
+  editable = false,
+  max = 0
+}) {
   const [newVariable, setNewVariable] = react.useState("");
-  const handleAddVariable = () => {
+  const inputRef = react.useRef(null);
+  const colors = COLOR_CLASSES[color];
+  const canAdd = max === 0 || variables.length < max;
+  const handleAdd = react.useCallback(() => {
     const trimmed = newVariable.trim();
-    if (trimmed && !inputVariables.includes(trimmed)) {
-      setInputVariables([...inputVariables, trimmed]);
-      setNewVariable("");
-    }
-  };
-  const handleRemoveVariable = (variable) => {
-    setInputVariables(inputVariables.filter((existingVariable) => existingVariable !== variable));
-  };
-  const handleKeyDown = (event) => {
+    if (!trimmed || variables.includes(trimmed)) return;
+    onChange([...variables, trimmed]);
+    setNewVariable("");
+    inputRef.current?.focus();
+  }, [newVariable, variables, onChange]);
+  const handleRemove = react.useCallback((index) => {
+    onChange(variables.filter((_, i) => i !== index));
+  }, [variables, onChange]);
+  const handleEdit = react.useCallback((index, value) => {
+    const updated = [...variables];
+    updated[index] = value;
+    onChange(updated);
+  }, [variables, onChange]);
+  const handleKeyDown = react.useCallback((event) => {
     if (event.key === "Enter") {
       event.preventDefault();
-      handleAddVariable();
+      handleAdd();
     }
-  };
+  }, [handleAdd]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-2 block text-xs font-medium text-gray-500 dark:text-gray-400", children: label }),
+    variables.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 space-y-1", children: variables.map((variable, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `group flex items-center gap-2 rounded-lg border px-2.5 py-1.5 transition-colors ${colors.row} hover:bg-white/5`,
+        children: [
+          numbered ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex h-5 min-w-5 items-center justify-center rounded-full text-[10px] font-bold ${colors.badge}`, children: index + 1 }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: `h-1.5 w-1.5 shrink-0 rounded-full ${colors.dot}` }),
+          editable ? /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              value: variable,
+              onChange: (event) => handleEdit(index, event.target.value),
+              className: `flex-1 rounded-md border-0 bg-transparent px-1 py-0.5 text-sm font-medium text-gray-900 outline-none ${colors.input} focus:ring-1 dark:text-white`
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-sm font-medium text-gray-900 dark:text-white", children: variable }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleRemove(index),
+              className: "shrink-0 rounded p-0.5 text-gray-400 opacity-0 transition-all hover:bg-red-100 hover:text-red-500 group-hover:opacity-100 dark:hover:bg-red-500/10 dark:hover:text-red-400",
+              "aria-label": `Remove ${variable}`,
+              children: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ]
+      },
+      `${index}-${variable}`
+    )) }),
+    canAdd && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          value: newVariable,
+          onChange: (event) => setNewVariable(event.target.value),
+          onKeyDown: handleKeyDown,
+          placeholder,
+          className: "flex-1 rounded-lg border border-gray-200/50 bg-gray-50/50 px-3 py-1.5 text-sm text-gray-700 outline-none transition-colors placeholder:text-gray-400 focus:border-gray-300 focus:ring-1 focus:ring-gray-300/30 dark:border-white/10 dark:bg-white/5 dark:text-gray-300 dark:placeholder:text-gray-600"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: handleAdd,
+          disabled: !newVariable.trim(),
+          className: `flex items-center gap-1 rounded-lg px-3 py-1.5 text-xs font-semibold transition-all disabled:cursor-not-allowed disabled:opacity-40 ${colors.add} hover:bg-white/10`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(outline.PlusIcon, { className: "h-3.5 w-3.5" }),
+            addLabel
+          ]
+        }
+      )
+    ] }),
+    variables.length === 0 && !canAdd && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-400 dark:text-gray-500", children: "No variables defined" })
+  ] });
+}
+function StartNodeConfigForm({ config, onSave, onCancel }) {
+  const t = chunkYXN2K77G_js.useTranslations("agents.workflow.startNodeConfig");
+  const [inputVariables, setInputVariables] = react.useState([...config.inputVariables]);
   const handleSave = () => {
     onSave({ ...config, inputVariables });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("inputVariablesLabel") }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("inputVariablesHelp") }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          chunkEVX2CFNL_js.Input,
-          {
-            value: newVariable,
-            onChange: (event) => setNewVariable(event.target.value),
-            onKeyDown: handleKeyDown,
-            placeholder: t("variablePlaceholder"),
-            className: "flex-1"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          chunkEVX2CFNL_js.Button,
-          {
-            type: "button",
-            onClick: handleAddVariable,
-            outline: true,
-            size: "sm",
-            children: t("addVariable")
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: inputVariables.map((variable) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "span",
-        {
-          className: "inline-flex items-center gap-1 rounded-full bg-green-100 px-2.5 py-1 text-xs font-medium text-green-700 dark:bg-green-500/20 dark:text-green-300",
-          children: [
-            variable,
-            /* @__PURE__ */ jsxRuntime.jsx(
-              chunkEVX2CFNL_js.IconButton,
-              {
-                icon: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "h-3 w-3" }),
-                label: `Remove ${variable}`,
-                onClick: () => handleRemoveVariable(variable),
-                variant: "ghost",
-                size: "sm",
-                className: "!p-0"
-              }
-            )
-          ]
-        },
-        variable
-      )) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 border-t border-gray-200 pt-4 dark:border-gray-700", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        chunkEVX2CFNL_js.Button,
-        {
-          type: "button",
-          onClick: onCancel,
-          outline: true,
-          size: "sm",
-          children: t("cancel")
-        }
-      ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkEVX2CFNL_js.Button,
+        VariableListEditor,
         {
-          type: "button",
-          onClick: handleSave,
-          color: "ios-glass-blue",
-          size: "sm",
-          children: t("save")
+          variables: inputVariables,
+          onChange: setInputVariables,
+          label: t("inputVariablesLabel"),
+          placeholder: t("variablePlaceholder"),
+          addLabel: t("addVariable"),
+          color: "green"
         }
       )
-    ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ConfigFormActions,
+      {
+        cancelLabel: t("cancel"),
+        saveLabel: t("save"),
+        onCancel,
+        onSave: handleSave
+      }
+    )
   ] });
 }
 function EndNodeConfigForm({ config, onSave, onCancel }) {
   const t = chunkYXN2K77G_js.useTranslations("agents.workflow.endNodeConfig");
   const [outputVariables, setOutputVariables] = react.useState([...config.outputVariables]);
-  const [newVariable, setNewVariable] = react.useState("");
-  const handleAddVariable = () => {
-    const trimmed = newVariable.trim();
-    if (trimmed && !outputVariables.includes(trimmed)) {
-      setOutputVariables([...outputVariables, trimmed]);
-      setNewVariable("");
-    }
-  };
-  const handleRemoveVariable = (variable) => {
-    setOutputVariables(outputVariables.filter((existingVariable) => existingVariable !== variable));
-  };
-  const handleKeyDown = (event) => {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      handleAddVariable();
-    }
-  };
   const handleSave = () => {
     onSave({ ...config, outputVariables });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("outputVariablesLabel") }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("outputVariablesHelp") }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "text",
-            value: newVariable,
-            onChange: (event) => setNewVariable(event.target.value),
-            onKeyDown: handleKeyDown,
-            placeholder: t("variablePlaceholder"),
-            className: "w-full flex-1 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-400/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: handleAddVariable,
-            className: "text-sm text-indigo-600 hover:text-indigo-700 dark:text-indigo-400",
-            children: t("addVariable")
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: outputVariables.map((variable) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "span",
-        {
-          className: "inline-flex items-center gap-1 rounded-full bg-red-100 px-2.5 py-1 text-xs font-medium text-red-700 dark:bg-red-500/20 dark:text-red-300",
-          children: [
-            variable,
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => handleRemoveVariable(variable),
-                className: "text-sm text-red-500 hover:text-red-600",
-                "aria-label": `Remove ${variable}`,
-                children: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "h-3 w-3" })
-              }
-            )
-          ]
-        },
-        variable
-      )) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+        VariableListEditor,
         {
-          type: "button",
-          onClick: onCancel,
-          className: "rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800",
-          children: t("cancel")
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: handleSave,
-          className: "rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600",
-          children: t("save")
+          variables: outputVariables,
+          onChange: setOutputVariables,
+          label: t("outputVariablesLabel"),
+          placeholder: t("variablePlaceholder"),
+          addLabel: t("addVariable"),
+          color: "red"
         }
       )
-    ] })
-  ] });
-}
-function ConfigFormActions({
-  cancelLabel,
-  saveLabel,
-  onCancel,
-  onSave,
-  saveDisabled = false
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 border-t border-gray-200 pt-4 dark:border-gray-700", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(chunkEVX2CFNL_js.Button, { type: "button", outline: true, onClick: onCancel, children: cancelLabel }),
-    /* @__PURE__ */ jsxRuntime.jsx(chunkEVX2CFNL_js.Button, { type: "button", onClick: onSave, disabled: saveDisabled, children: saveLabel })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ConfigFormActions,
+      {
+        cancelLabel: t("cancel"),
+        saveLabel: t("save"),
+        onCancel,
+        onSave: handleSave
+      }
+    )
   ] });
 }
 var OPERATOR_OPTIONS = [
@@ -3171,7 +3146,7 @@ function IfElseNodeConfigForm({ config, onSave, onCancel }) {
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: t("conditionsLabel") }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkEVX2CFNL_js.Button,
+          chunk4XID6LOC_js.Button,
           {
             type: "button",
             onClick: handleAddCondition,
@@ -3182,7 +3157,7 @@ function IfElseNodeConfigForm({ config, onSave, onCancel }) {
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: conditions.map((condition, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800/50", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid flex-1 grid-cols-3 gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
-            chunkEVX2CFNL_js.FormInput,
+            chunk4XID6LOC_js.FormInput,
             {
               type: "text",
               label: t("variableLabel"),
@@ -3193,7 +3168,7 @@ function IfElseNodeConfigForm({ config, onSave, onCancel }) {
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
-            chunkEVX2CFNL_js.FormSelect,
+            chunk4XID6LOC_js.FormSelect,
             {
               label: t("operatorLabel"),
               value: condition.operator,
@@ -3203,7 +3178,7 @@ function IfElseNodeConfigForm({ config, onSave, onCancel }) {
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
-            chunkEVX2CFNL_js.FormInput,
+            chunk4XID6LOC_js.FormInput,
             {
               type: "text",
               label: t("valueLabel"),
@@ -3215,7 +3190,7 @@ function IfElseNodeConfigForm({ config, onSave, onCancel }) {
           ) })
         ] }),
         conditions.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-          chunkEVX2CFNL_js.IconButton,
+          chunk4XID6LOC_js.IconButton,
           {
             onClick: () => handleRemoveCondition(index),
             icon: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, { className: "h-4 w-4" }),
@@ -3370,7 +3345,7 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkEVX2CFNL_js.FormSelect,
+      chunk4XID6LOC_js.FormSelect,
       {
         label: t("methodLabel"),
         value: method,
@@ -3379,7 +3354,7 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkEVX2CFNL_js.FormInput,
+      chunk4XID6LOC_js.FormInput,
       {
         type: "text",
         label: t("urlLabel"),
@@ -3392,7 +3367,7 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: t("headersLabel") }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkEVX2CFNL_js.Button,
+          chunk4XID6LOC_js.Button,
           {
             type: "button",
             onClick: handleAddHeader,
@@ -3402,7 +3377,7 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: headerEntries.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkEVX2CFNL_js.FormInput,
+          chunk4XID6LOC_js.FormInput,
           {
             type: "text",
             value: entry.key,
@@ -3412,7 +3387,7 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkEVX2CFNL_js.FormInput,
+          chunk4XID6LOC_js.FormInput,
           {
             type: "text",
             value: entry.value,
@@ -3422,7 +3397,7 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkEVX2CFNL_js.IconButton,
+          chunk4XID6LOC_js.IconButton,
           {
             onClick: () => handleRemoveHeader(index),
             icon: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, { className: "h-4 w-4" }),
@@ -3434,7 +3409,7 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
       ] }, index)) })
     ] }),
     method !== "GET" && /* @__PURE__ */ jsxRuntime.jsx(
-      chunkEVX2CFNL_js.FormTextarea,
+      chunk4XID6LOC_js.FormTextarea,
       {
         label: t("bodyLabel"),
         value: body,
@@ -3445,7 +3420,7 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkEVX2CFNL_js.FormInput,
+      chunk4XID6LOC_js.FormInput,
       {
         type: "number",
         label: t("timeoutLabel"),
@@ -3476,7 +3451,7 @@ function TemplateTransformNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkEVX2CFNL_js.FormTextarea,
+      chunk4XID6LOC_js.FormTextarea,
       {
         label: t("templateLabel"),
         value: template,
@@ -3487,7 +3462,7 @@ function TemplateTransformNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkEVX2CFNL_js.FormInput,
+      chunk4XID6LOC_js.FormInput,
       {
         type: "text",
         label: t("outputVariableLabel"),
@@ -3516,7 +3491,7 @@ function IterationNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkEVX2CFNL_js.FormInput,
+      chunk4XID6LOC_js.FormInput,
       {
         type: "text",
         label: t("iteratorVariableLabel"),
@@ -3526,7 +3501,7 @@ function IterationNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkEVX2CFNL_js.FormInput,
+      chunk4XID6LOC_js.FormInput,
       {
         type: "number",
         label: t("maxIterationsLabel"),
@@ -3557,7 +3532,7 @@ function KnowledgeBaseNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkEVX2CFNL_js.FormInput,
+      chunk4XID6LOC_js.FormInput,
       {
         type: "text",
         label: t("sourceIdLabel"),
@@ -3567,7 +3542,7 @@ function KnowledgeBaseNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkEVX2CFNL_js.FormInput,
+      chunk4XID6LOC_js.FormInput,
       {
         type: "number",
         label: t("topKLabel"),
@@ -3578,7 +3553,7 @@ function KnowledgeBaseNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkEVX2CFNL_js.FormInput,
+      chunk4XID6LOC_js.FormInput,
       {
         type: "number",
         label: t("similarityThresholdLabel"),
@@ -3604,29 +3579,12 @@ function AnswerNodeConfigForm({ config, onSave, onCancel }) {
   const t = chunkYXN2K77G_js.useTranslations("agents.workflow.answerNodeConfig");
   const [outputTemplate, setOutputTemplate] = react.useState(config.outputTemplate);
   const [outputVariables, setOutputVariables] = react.useState([...config.outputVariables]);
-  const [newVariable, setNewVariable] = react.useState("");
-  const handleAddVariable = () => {
-    const trimmed = newVariable.trim();
-    if (trimmed && !outputVariables.includes(trimmed)) {
-      setOutputVariables([...outputVariables, trimmed]);
-      setNewVariable("");
-    }
-  };
-  const handleRemoveVariable = (variable) => {
-    setOutputVariables(outputVariables.filter((existingVariable) => existingVariable !== variable));
-  };
-  const handleKeyDown = (event) => {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      handleAddVariable();
-    }
-  };
   const handleSave = () => {
     onSave({ ...config, outputTemplate, outputVariables });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkEVX2CFNL_js.FormTextarea,
+      chunk4XID6LOC_js.FormTextarea,
       {
         label: t("outputTemplateLabel"),
         hint: t("outputTemplateHelp"),
@@ -3637,50 +3595,17 @@ function AnswerNodeConfigForm({ config, onSave, onCancel }) {
         className: "font-mono text-xs"
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("outputVariablesLabel") }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          chunkEVX2CFNL_js.FormInput,
-          {
-            type: "text",
-            value: newVariable,
-            onValueChange: setNewVariable,
-            onKeyDown: handleKeyDown,
-            placeholder: t("variablePlaceholder"),
-            className: "flex-1"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          chunkEVX2CFNL_js.Button,
-          {
-            type: "button",
-            onClick: handleAddVariable,
-            children: t("addVariable")
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: outputVariables.map((variable) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "span",
-        {
-          className: "inline-flex items-center gap-1 rounded-full bg-blue-100 px-2.5 py-1 text-xs font-medium text-blue-700 dark:bg-blue-500/20 dark:text-blue-300",
-          children: [
-            variable,
-            /* @__PURE__ */ jsxRuntime.jsx(
-              chunkEVX2CFNL_js.IconButton,
-              {
-                onClick: () => handleRemoveVariable(variable),
-                icon: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "h-3 w-3" }),
-                label: `Remove ${variable}`,
-                size: "sm",
-                color: "ios-red"
-              }
-            )
-          ]
-        },
-        variable
-      )) })
-    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      VariableListEditor,
+      {
+        variables: outputVariables,
+        onChange: setOutputVariables,
+        label: t("outputVariablesLabel"),
+        placeholder: t("variablePlaceholder"),
+        addLabel: t("addVariable"),
+        color: "blue"
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       ConfigFormActions,
       {
@@ -4075,79 +4000,25 @@ function VariableAggregatorNodeConfigForm({ config, onSave, onCancel }) {
   const [inputVariables, setInputVariables] = react.useState([...config.inputVariables]);
   const [outputVariable, setOutputVariable] = react.useState(config.outputVariable);
   const [aggregationMode, setAggregationMode] = react.useState(config.aggregationMode);
-  const [newVariable, setNewVariable] = react.useState("");
-  const handleAddVariable = () => {
-    const trimmed = newVariable.trim();
-    if (trimmed && !inputVariables.includes(trimmed)) {
-      setInputVariables([...inputVariables, trimmed]);
-      setNewVariable("");
-    }
-  };
-  const handleRemoveVariable = (index) => {
-    setInputVariables(inputVariables.filter((_, variableIndex) => variableIndex !== index));
-  };
-  const handleVariableChange = (index, value) => {
-    setInputVariables(inputVariables.map((variable, variableIndex) => variableIndex === index ? value : variable));
-  };
-  const handleKeyDown = (event) => {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      handleAddVariable();
-    }
-  };
   const handleSave = () => {
     onSave({ ...config, inputVariables, outputVariable, aggregationMode });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("inputVariablesLabel") }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          chunkEVX2CFNL_js.FormInput,
-          {
-            type: "text",
-            value: newVariable,
-            onValueChange: setNewVariable,
-            onKeyDown: handleKeyDown,
-            placeholder: t("variablePlaceholder"),
-            className: "flex-1"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          chunkEVX2CFNL_js.Button,
-          {
-            type: "button",
-            onClick: handleAddVariable,
-            children: t("addInputVariable")
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 space-y-2", children: inputVariables.map((variable, index) => /* @__PURE__ */ jsxRuntime.jsx(chunkEVX2CFNL_js.Card, { className: "border-purple-200/70 dark:border-purple-500/30", children: /* @__PURE__ */ jsxRuntime.jsx(chunkEVX2CFNL_js.CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex min-w-6 items-center justify-center rounded-full bg-purple-100 px-1.5 py-0.5 text-[10px] font-semibold text-purple-700 dark:bg-purple-500/20 dark:text-purple-300", children: index + 1 }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          chunkEVX2CFNL_js.FormInput,
-          {
-            type: "text",
-            value: variable,
-            onValueChange: (value) => handleVariableChange(index, value),
-            placeholder: t("variablePlaceholder"),
-            className: "flex-1"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          chunkEVX2CFNL_js.IconButton,
-          {
-            icon: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "h-3 w-3" }),
-            label: `Remove ${variable || index + 1}`,
-            onClick: () => handleRemoveVariable(index),
-            size: "sm",
-            color: "ios-red"
-          }
-        )
-      ] }) }) }, `${index}-${variable}`)) })
-    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkEVX2CFNL_js.FormInput,
+      VariableListEditor,
+      {
+        variables: inputVariables,
+        onChange: setInputVariables,
+        label: t("inputVariablesLabel"),
+        placeholder: t("variablePlaceholder"),
+        addLabel: t("addInputVariable"),
+        color: "purple",
+        numbered: true,
+        editable: true
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      chunk4XID6LOC_js.FormInput,
       {
         type: "text",
         label: t("outputVariableLabel"),
@@ -4157,7 +4028,7 @@ function VariableAggregatorNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkEVX2CFNL_js.FormSelect,
+      chunk4XID6LOC_js.FormSelect,
       {
         label: t("aggregationModeLabel"),
         value: aggregationMode,
@@ -4190,7 +4061,7 @@ function DocumentExtractorNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkEVX2CFNL_js.FormSelect,
+      chunk4XID6LOC_js.FormSelect,
       {
         label: t("extractionModeLabel"),
         value: extractionMode,
@@ -4199,7 +4070,7 @@ function DocumentExtractorNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkEVX2CFNL_js.FormInput,
+      chunk4XID6LOC_js.FormInput,
       {
         type: "text",
         label: t("outputVariableLabel"),
@@ -4376,7 +4247,7 @@ function IterationStartNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkEVX2CFNL_js.FormInput,
+      chunk4XID6LOC_js.FormInput,
       {
         type: "text",
         label: t("iteratorVariableLabel"),
@@ -4386,7 +4257,7 @@ function IterationStartNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkEVX2CFNL_js.FormInput,
+      chunk4XID6LOC_js.FormInput,
       {
         type: "text",
         label: t("itemVariableLabel"),
@@ -4396,7 +4267,7 @@ function IterationStartNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkEVX2CFNL_js.FormInput,
+      chunk4XID6LOC_js.FormInput,
       {
         type: "text",
         label: t("indexVariableLabel"),
@@ -4990,7 +4861,7 @@ function GroupNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkEVX2CFNL_js.FormInput,
+      chunk4XID6LOC_js.FormInput,
       {
         type: "text",
         label: translations("labelField"),
@@ -5000,7 +4871,7 @@ function GroupNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkEVX2CFNL_js.FormTextarea,
+      chunk4XID6LOC_js.FormTextarea,
       {
         label: translations("descriptionField"),
         value: description,
@@ -5129,14 +5000,16 @@ function LogicNodeModal({ onSave, entities = [], datasources = [], onLoadTables,
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    WorkspaceModal,
+    chunk4XID6LOC_js.GlassModalShell,
     {
       open,
       onClose: closeModal,
       title,
       subtitle: nodeLabel,
+      label: t("nodeConfig"),
       icon: IconComponent ? /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: "h-5 w-5 text-white" }) : void 0,
       gradient,
+      maxWidth: "2xl",
       children: renderForm()
     }
   );
@@ -5187,7 +5060,7 @@ function NodeContextMenu({ position, targetId, onClose, onEdit, onDuplicate, onC
     }
   ];
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkEVX2CFNL_js.ContextMenu,
+    chunk4XID6LOC_js.ContextMenu,
     {
       position,
       onClose,
@@ -5244,7 +5117,7 @@ function PanelContextMenu({ position, onClose, onPaste, onSelectAll, onFitView,
     }
   ];
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkEVX2CFNL_js.ContextMenu,
+    chunk4XID6LOC_js.ContextMenu,
     {
       position,
       onClose,
@@ -5391,7 +5264,7 @@ function SelectionContextMenu({
     }
   ];
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkEVX2CFNL_js.ContextMenu,
+    chunk4XID6LOC_js.ContextMenu,
     {
       position,
       onClose,
@@ -7220,7 +7093,6 @@ exports.VariableAssignerFlowNode = VariableAssignerFlowNode;
 exports.WorkflowBuilderProvider = WorkflowBuilderProvider;
 exports.WorkflowCanvas = WorkflowCanvas;
 exports.Workspace = Workspace;
-exports.WorkspaceModal = WorkspaceModal;
 exports.getCompatibleModels = getCompatibleModels;
 exports.getDefaultFrameworkForModel = getDefaultFrameworkForModel;
 exports.getEntityBadgeColor = getEntityBadgeColor;
@@ -7234,5 +7106,5 @@ exports.useModalStore = useModalStore;
 exports.useWorkflowBuilderClient = useWorkflowBuilderClient;
 exports.useWorkflowBuilderClientOptional = useWorkflowBuilderClientOptional;
 exports.useWorkflowStore = useWorkflowStore;
-//# sourceMappingURL=chunk-BONTO5LJ.js.map
-//# sourceMappingURL=chunk-BONTO5LJ.js.map
+//# sourceMappingURL=chunk-TKLALDY4.js.map
+//# sourceMappingURL=chunk-TKLALDY4.js.map