@datatechsolutions/ui 3.6.0 → 3.6.2

package/dist/{chunk-QTA5I6FC.mjs → chunk-VZIUQE7B.mjs}

@@ -1,7 +1,8 @@
 "use client";
-import { ToggleSwitch, GlassModal, ContextMenu, FormInput, FormTextarea, FormSelect, Button, IconButton } from './chunk-4OFG6POC.mjs';
+import { ToggleSwitch, StatusBadge, GlassModal, ContextMenu, FormInput, FormTextarea, FormSelect } from './chunk-5LCWQKGQ.mjs';
 import { useTranslations, I18nProvider, createI18nFromMessages } from './chunk-7VJ7CMMT.mjs';
-import { GraphNodeHeader, GraphNodeMeta, GraphNodeBadge, GraphNodeIconBubble } from './chunk-OZNTQROP.mjs';
+import { GraphNodeHeader, GraphNodeMeta, GraphNodeIconBubble, GraphNodeBadge } from './chunk-PLTLRL2V.mjs';
+import { Badge, Button, IconButton } from './chunk-WR55H7DH.mjs';
 import { getAgentTier, createDefaultLogicNodeConfig, applyDagreLayout } from './chunk-G7JQ4OCE.mjs';
 import { memo, useState, useRef, useCallback, useEffect, lazy, createContext, useMemo, useContext } from 'react';
 import { Position, NodeResizer, MarkerType, useReactFlow, getBezierPath, BaseEdge, EdgeLabelRenderer, Handle, ReactFlowProvider, useNodesState, useEdgesState, addEdge, BackgroundVariant } from '@xyflow/react';
@@ -661,32 +662,12 @@ function EdgeInsertPopupComponent({ position, onSelect, onClose }) {
   );
 }
 var EdgeInsertPopup = memo(EdgeInsertPopupComponent);
-var LABEL_STYLES = {
-  True: {
-    background: "bg-green-100",
-    text: "text-green-700",
-    darkBackground: "dark:bg-green-500/20",
-    darkText: "dark:text-green-300"
-  },
-  False: {
-    background: "bg-red-100",
-    text: "text-red-700",
-    darkBackground: "dark:bg-red-500/20",
-    darkText: "dark:text-red-300"
-  },
-  Loop: {
-    background: "bg-violet-100",
-    text: "text-violet-700",
-    darkBackground: "dark:bg-violet-500/20",
-    darkText: "dark:text-violet-300"
-  }
-};
-var DEFAULT_LABEL_STYLE = {
-  background: "bg-purple-100",
-  text: "text-purple-700",
-  darkBackground: "dark:bg-purple-500/20",
-  darkText: "dark:text-purple-300"
+var LABEL_COLORS = {
+  True: "green",
+  False: "red",
+  Loop: "violet"
 };
+var DEFAULT_LABEL_COLOR = "purple";
 function ConditionalEdgeComponent({
   id,
   source,
@@ -724,7 +705,7 @@ function ConditionalEdgeComponent({
   });
   const edgeData = data;
   const label = edgeData?.label ?? (sourceHandleId === "true-out" ? "True" : void 0) ?? (sourceHandleId === "false-out" ? "False" : void 0) ?? (sourceHandleId === "loop-out" ? "Loop" : void 0);
-  const labelStyle = label ? LABEL_STYLES[label] ?? DEFAULT_LABEL_STYLE : void 0;
+  const labelColor = label ? LABEL_COLORS[label] ?? DEFAULT_LABEL_COLOR : void 0;
   const showControls = selected || isHovered;
   const handleDeleteEdge = (event) => {
     event.stopPropagation();
@@ -740,7 +721,7 @@ function ConditionalEdgeComponent({
     edgeData?.onInsertNode?.(id, nodeType, { x: midpointX, y: midpointY });
     setShowInsertPopup(false);
   };
-  const hasLabel = Boolean(label && labelStyle);
+  const hasLabel = Boolean(label && labelColor);
   const insertButtonOffset = hasLabel ? -20 : 0;
   const deleteButtonOffset = hasLabel ? showInsertPopup ? -40 : -40 : showInsertPopup ? -20 : -20;
   return /* @__PURE__ */ jsxs(
@@ -761,15 +742,15 @@ function ConditionalEdgeComponent({
         ),
         /* @__PURE__ */ jsx(BaseEdge, { id, path: edgePath, markerEnd, style }),
         /* @__PURE__ */ jsxs(EdgeLabelRenderer, { children: [
-          hasLabel && labelStyle && /* @__PURE__ */ jsx(
+          hasLabel && labelColor && /* @__PURE__ */ jsx(
             "div",
             {
-              className: `nodrag nopan pointer-events-auto absolute rounded-full px-2 py-0.5 text-[10px] font-semibold ${labelStyle.background} ${labelStyle.text} ${labelStyle.darkBackground} ${labelStyle.darkText}`,
+              className: "nodrag nopan pointer-events-auto absolute",
               style: {
                 transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`
               },
               "data-testid": `edge-label-${id}`,
-              children: label
+              children: /* @__PURE__ */ jsx(Badge, { color: labelColor, size: "xs", children: label })
             }
           ),
           showControls && !showInsertPopup && /* @__PURE__ */ jsx(
@@ -1937,8 +1918,14 @@ function NodeCardMeta({ compact = false, children }) {
   return /* @__PURE__ */ jsx(GraphNodeMeta, { compact, children });
 }
 function NodeCardBadge({ children, className, tone, soft = false }) {
-  const toneClass = tone ? soft ? LOGIC_NODE_BADGE_SOFT_COLORS[tone] : LOGIC_NODE_BADGE_COLORS[tone] : "";
-  return /* @__PURE__ */ jsx(GraphNodeBadge, { className: className ?? `inline-flex items-center rounded-full px-2 py-0.5 text-[10px] ${soft ? "font-medium" : "font-semibold"} ${toneClass}`, children });
+  if (tone) {
+    const toneClass = soft ? LOGIC_NODE_BADGE_SOFT_COLORS[tone] : LOGIC_NODE_BADGE_COLORS[tone];
+    return /* @__PURE__ */ jsx(GraphNodeBadge, { className: `inline-flex items-center rounded-full px-2 py-0.5 text-[10px] ${soft ? "font-medium" : "font-semibold"} ${toneClass}`, children });
+  }
+  if (className) {
+    return /* @__PURE__ */ jsx(GraphNodeBadge, { className, children });
+  }
+  return /* @__PURE__ */ jsx(Badge, { color: "zinc", size: "xs", children });
 }
 function NodeCardDeleteAction({ nodeId, onDelete }) {
   if (!onDelete) return null;
@@ -1963,9 +1950,6 @@ function NodeCardDeleteAction({ nodeId, onDelete }) {
     }
   );
 }
-function NodeCardBranchLabel({ children, className }) {
-  return /* @__PURE__ */ jsx("span", { className, children });
-}
 var BASE_HANDLE_CLASS = "!h-3 !w-3 !border-2 !border-white dark:!border-gray-800";
 function useResolvedPosition(position) {
   const layoutDirection = useWorkflowStore((s) => s.layoutDirection);
@@ -2113,21 +2097,18 @@ var AgentFlowNode = memo(function AgentFlowNode2({ id, data, selected }) {
         ] })
       ] }),
       /* @__PURE__ */ jsx(NodeCardMeta, { compact: isCompact, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx(NodeCardBadge, { className: "rounded-full bg-indigo-100 px-2 py-0.5 text-[10px] font-semibold text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-300", children: "Agent" }),
+        /* @__PURE__ */ jsx(Badge, { color: "indigo", size: "xs", children: "Agent" }),
         (() => {
           const tier = getAgentTier(Number(data.agent.elo ?? 0));
-          return /* @__PURE__ */ jsx(NodeCardBadge, { className: `rounded-full px-2 py-0.5 text-[10px] font-bold ${tier.pillColor}`, children: tier.key });
+          return /* @__PURE__ */ jsx(Badge, { color: "zinc", size: "xs", className: tier.pillColor, children: tier.key });
         })(),
-        /* @__PURE__ */ jsxs(NodeCardBadge, { className: `inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium ${frameworkMeta.badgeColor}`, children: [
-          /* @__PURE__ */ jsx(frameworkMeta.IconComponent, { className: "h-3 w-3" }),
-          frameworkMeta.label
-        ] }),
-        /* @__PURE__ */ jsx(NodeCardBadge, { className: "rounded-full bg-blue-50 px-2 py-0.5 text-[10px] font-medium text-blue-700 dark:bg-blue-900/25 dark:text-blue-300", children: data.agent.modelId }),
-        /* @__PURE__ */ jsxs(NodeCardBadge, { className: "rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-600 dark:bg-white/10 dark:text-gray-300", children: [
+        /* @__PURE__ */ jsx(Badge, { color: "zinc", size: "xs", className: frameworkMeta.badgeColor, icon: /* @__PURE__ */ jsx(frameworkMeta.IconComponent, { className: "h-3 w-3" }), children: frameworkMeta.label }),
+        /* @__PURE__ */ jsx(Badge, { color: "blue", size: "xs", children: data.agent.modelId }),
+        /* @__PURE__ */ jsxs(Badge, { color: "zinc", size: "xs", children: [
           "T: ",
           data.agent.temperature
         ] }),
-        /* @__PURE__ */ jsxs(NodeCardBadge, { className: "rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-600 dark:bg-white/10 dark:text-gray-300", children: [
+        /* @__PURE__ */ jsxs(Badge, { color: "zinc", size: "xs", children: [
           "v",
           data.agent.activePromptVersion
         ] }),
@@ -2135,7 +2116,16 @@ var AgentFlowNode = memo(function AgentFlowNode2({ id, data, selected }) {
           /* @__PURE__ */ jsx("div", { className: "w-full" }),
           /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-1 border-t border-gray-200/20 pt-1 dark:border-white/5", children: [
             /* @__PURE__ */ jsx(CommandLineIcon, { className: "h-3 w-3 shrink-0 text-amber-500 dark:text-amber-400" }),
-            data.agentTools.slice(0, 3).map((tool) => /* @__PURE__ */ jsx(NodeCardBadge, { className: `rounded px-1.5 py-px text-[9px] font-medium ${tool.enabled ? "bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300" : "bg-gray-100 text-gray-400 line-through dark:bg-white/5 dark:text-gray-500"}`, children: tool.name }, tool.id)),
+            data.agentTools.slice(0, 3).map((tool) => /* @__PURE__ */ jsx(
+              Badge,
+              {
+                color: tool.enabled ? "amber" : "zinc",
+                size: "xs",
+                className: tool.enabled ? "" : "line-through",
+                children: tool.name
+              },
+              tool.id
+            )),
             data.agentTools.length > 3 && /* @__PURE__ */ jsxs("span", { className: "text-[9px] text-gray-400 dark:text-gray-500", children: [
               "+",
               data.agentTools.length - 3
@@ -2237,9 +2227,9 @@ var AgentToolFlowNode = memo(function AgentToolFlowNode2({ id, data, selected })
         )
       ] }),
       /* @__PURE__ */ jsx(NodeCardMeta, { compact: isCompact, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx(NodeCardBadge, { className: "rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-semibold text-amber-700 dark:bg-amber-500/20 dark:text-amber-300", children: t("agentToolNode") }),
-        /* @__PURE__ */ jsx(NodeCardBadge, { className: `rounded-full px-2 py-0.5 text-[10px] font-medium ${pill}`, children: category }),
-        agentTool.parameters && agentTool.parameters.length > 0 && /* @__PURE__ */ jsxs(NodeCardBadge, { className: "rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-600 dark:bg-white/10 dark:text-gray-300", children: [
+        /* @__PURE__ */ jsx(Badge, { color: "amber", size: "xs", children: t("agentToolNode") }),
+        /* @__PURE__ */ jsx(Badge, { color: "zinc", size: "xs", className: pill, children: category }),
+        agentTool.parameters && agentTool.parameters.length > 0 && /* @__PURE__ */ jsxs(Badge, { color: "zinc", size: "xs", children: [
           agentTool.parameters.length,
           " params"
         ] }),
@@ -2346,8 +2336,8 @@ var ToolFlowNode = memo(function ToolFlowNode2({ id, data, selected }) {
           ] }),
           /* @__PURE__ */ jsxs(NodeCardMeta, { compact: isCompact, children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx(NodeCardBadge, { className: "inline-flex items-center rounded-full bg-teal-100 px-2 py-0.5 text-[10px] font-semibold text-teal-700 dark:bg-teal-400/15 dark:text-teal-400", children: t("nodeType") }),
-              /* @__PURE__ */ jsx(NodeCardBadge, { className: `inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${categoryPill}`, children: tool.category }),
+              /* @__PURE__ */ jsx(Badge, { color: "teal", size: "xs", children: t("nodeType") }),
+              /* @__PURE__ */ jsx(Badge, { color: "zinc", size: "xs", className: categoryPill, children: tool.category }),
               /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
                 String(tool.timeoutMs ?? ""),
                 "ms"
@@ -2404,7 +2394,7 @@ var RuleFlowNode = memo(function RuleFlowNode2({ id, data, selected }) {
               ] }),
               !isCompact && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-between", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full bg-violet-100 px-2 py-0.5 text-[10px] font-semibold text-violet-700 dark:bg-violet-500/20 dark:text-violet-300", children: t("ruleEngine") }),
+                  /* @__PURE__ */ jsx(Badge, { color: "violet", size: "xs", children: t("ruleEngine") }),
                   contextVariableCount > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
                     contextVariableCount,
                     " vars"
@@ -2498,8 +2488,8 @@ var RuleFlowNode = memo(function RuleFlowNode2({ id, data, selected }) {
           ] }),
           !isCompact && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-between", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full bg-violet-100 px-2 py-0.5 text-[10px] font-semibold text-violet-700 dark:bg-violet-500/20 dark:text-violet-300", children: t("nodeType") }),
-              /* @__PURE__ */ jsx("span", { className: `inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${typePill}`, children: adjustmentType }),
+              /* @__PURE__ */ jsx(Badge, { color: "violet", size: "xs", children: t("nodeType") }),
+              /* @__PURE__ */ jsx(Badge, { color: "zinc", size: "xs", className: typePill, children: adjustmentType }),
               /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
                 "P",
                 String(rule.priority ?? "")
@@ -2577,8 +2567,8 @@ var EntityFlowNode = memo(function EntityFlowNode2({ id, data, selected }) {
           ] }),
           /* @__PURE__ */ jsxs(NodeCardMeta, { compact: isCompact, children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx(NodeCardBadge, { className: `inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-semibold ${badgeColor}`, children: t("entityNodeType") }),
-              /* @__PURE__ */ jsxs(NodeCardBadge, { className: `inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${badgeColor}`, children: [
+              /* @__PURE__ */ jsx(Badge, { color: "zinc", size: "xs", className: badgeColor, children: t("entityNodeType") }),
+              /* @__PURE__ */ jsxs(Badge, { color: "zinc", size: "xs", className: badgeColor, children: [
                 fieldCount,
                 " ",
                 t("entityFields")
@@ -2739,8 +2729,8 @@ var IfElseFlowNode = memo(function IfElseFlowNode2({ id, data, selected }) {
             ] }),
             /* @__PURE__ */ jsx(NodeCardDeleteAction, { nodeId: id, onDelete })
           ] }),
-          /* @__PURE__ */ jsx(NodeCardBranchLabel, { className: "pointer-events-none absolute -right-12 top-1/2 -translate-y-1/2 rounded-full bg-green-100 px-2 py-0.5 text-[10px] font-semibold text-green-700 shadow-sm dark:bg-green-500/20 dark:text-green-300", children: t("ifBranchLabel") }),
-          /* @__PURE__ */ jsx(NodeCardBranchLabel, { className: "pointer-events-none absolute bottom-[-1.9rem] left-1/2 -translate-x-1/2 rounded-full bg-red-100 px-2 py-0.5 text-[10px] font-semibold text-red-700 shadow-sm dark:bg-red-500/20 dark:text-red-300", children: t("elseBranchLabel") })
+          /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute -right-12 top-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsx(StatusBadge, { status: "success", label: t("ifBranchLabel"), size: "sm" }) }),
+          /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-[-1.9rem] left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx(StatusBadge, { status: "error", label: t("elseBranchLabel"), size: "sm" }) })
         ]
       }
     ),
@@ -3500,8 +3490,8 @@ var DatasourceFlowNode = memo(function DatasourceFlowNode2({ id, data, selected
     ] }),
     /* @__PURE__ */ jsxs(NodeCardMeta, { compact: isCompact, children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-        config.dialect && /* @__PURE__ */ jsx(NodeCardBadge, { className: "inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-semibold bg-cyan-100 text-cyan-700 dark:bg-cyan-400/15 dark:text-cyan-400", children: config.dialect }),
-        readOnly && /* @__PURE__ */ jsx(NodeCardBadge, { className: "inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium bg-slate-100 text-slate-600 dark:bg-slate-500/20 dark:text-slate-400", children: "sample" }),
+        config.dialect && /* @__PURE__ */ jsx(Badge, { color: "cyan", size: "xs", children: config.dialect }),
+        readOnly && /* @__PURE__ */ jsx(Badge, { color: "zinc", size: "xs", children: "sample" }),
         /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
           columnCount > 0 ? `${columnCount} cols` : null,
           filterCount > 0 ? `${filterCount} filters` : null,
@@ -3630,7 +3620,7 @@ var GroupFlowNode = memo(function GroupFlowNode2({ id, data, selected }) {
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx("span", { className: `inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold ${colorScheme.text} dark:bg-slate-500/20`, children: translations("groupNode") }),
+          /* @__PURE__ */ jsx(Badge, { color: "zinc", size: "xs", className: colorScheme.text, children: translations("groupNode") }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
             /* @__PURE__ */ jsx(
               "button",
@@ -8593,5 +8583,5 @@ function Workspace({
 }
 
 export { AgentFlowNode, AgentToolFlowNode, AnswerFlowNode, AnthropicIcon, CATEGORY_COLORS, CATEGORY_PILL_COLORS, CodeFlowNode, CrewAIIcon, DocumentExtractorFlowNode, EXPERIMENTAL_NODE_TYPES, EndFlowNode, EntityFlowNode, FRAMEWORK_META, GoogleADKIcon, GroupFlowNode, HttpRequestFlowNode, ICON_MAP, IfElseFlowNode, IterationFlowNode, IterationStartFlowNode, KnowledgeBaseFlowNode, LOGIC_ICON_MAP, LOGIC_NODE_BADGE_COLORS, LOGIC_NODE_GRADIENTS, LOGIC_NODE_HANDLE_COLORS, LangChainIcon, ListOperatorFlowNode, LogicNodeModal, MINIMAP_NODE_COLORS, NODE_EXECUTION_ACCENT_COLORS, NodeCard, NodeCardBadge, NodeCardDeleteAction, NodeCardHeader, NodeCardMeta, NodeContextMenu, NodeIconBubble, NodeInteractiveCard, NodeRunningIndicator, NoteFlowNode, OpenAIIcon, PanelContextMenu, ParameterExtractorFlowNode, QuestionClassifierFlowNode, RuleFlowNode, SelectionContextMenu, StartFlowNode, StrandsIcon, TemplateTransformFlowNode, ToolFlowNode, VariableAggregatorFlowNode, VariableAssignerFlowNode, WorkflowBuilderProvider, WorkflowCanvas, WorkflowHandle, Workspace, getCompatibleModels, getDefaultFrameworkForModel, getEntityBadgeColor, getEntityGradient, getEntityHandleColor, getEntityIcon, getEntityMinimapColor, getFrameworkMeta, getNodeExecutionAccent, getNodeExecutionAccentRgb, isFrameworkCompatibleWithProviders, isModelCompatibleWithFramework, useModalStore, useWorkflowBuilderClient, useWorkflowBuilderClientOptional, useWorkflowStore };
-//# sourceMappingURL=chunk-QTA5I6FC.mjs.map
-//# sourceMappingURL=chunk-QTA5I6FC.mjs.map
+//# sourceMappingURL=chunk-VZIUQE7B.mjs.map
+//# sourceMappingURL=chunk-VZIUQE7B.mjs.map