@datatechsolutions/ui 2.11.41 → 2.11.43

package/dist/{chunk-XFYGRDN3.js → chunk-7XITJWOE.js}

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var chunk2IOPJ5BM_js = require('./chunk-2IOPJ5BM.js');
+var chunkKEUOCEOO_js = require('./chunk-KEUOCEOO.js');
 var chunkYXN2K77G_js = require('./chunk-YXN2K77G.js');
 var chunkP4YYEM4B_js = require('./chunk-P4YYEM4B.js');
 var chunkPWBWP5FJ_js = require('./chunk-PWBWP5FJ.js');
@@ -1656,7 +1656,7 @@ var AgentToolFlowNode = react.memo(function AgentToolFlowNode2({ id, data, selec
               event.stopPropagation();
             },
             children: /* @__PURE__ */ jsxRuntime.jsx(
-              chunk2IOPJ5BM_js.ToggleSwitch,
+              chunkKEUOCEOO_js.ToggleSwitch,
               {
                 checked: Boolean(agentTool.enabled),
                 onChange: () => data.onToggle?.(agentTool),
@@ -1764,7 +1764,7 @@ var ToolFlowNode = react.memo(function ToolFlowNode2({ id, data, selected }) {
                   event.preventDefault();
                 },
                 children: /* @__PURE__ */ jsxRuntime.jsx(
-                  chunk2IOPJ5BM_js.ToggleSwitch,
+                  chunkKEUOCEOO_js.ToggleSwitch,
                   {
                     checked: Boolean(tool.enabled),
                     onChange: () => onToggle(tool),
@@ -1916,7 +1916,7 @@ var RuleFlowNode = react.memo(function RuleFlowNode2({ id, data, selected }) {
                   event.preventDefault();
                 },
                 children: /* @__PURE__ */ jsxRuntime.jsx(
-                  chunk2IOPJ5BM_js.ToggleSwitch,
+                  chunkKEUOCEOO_js.ToggleSwitch,
                   {
                     checked: Boolean(rule.enabled),
                     onChange: () => onToggle(rule),
@@ -2849,7 +2849,18 @@ var DATASOURCE_LOGOS = {
   mysql: "/logos/datasources/mysql.svg",
   clickhouse: "/logos/datasources/clickhouse.svg",
   elasticsearch: "/logos/datasources/elasticsearch.svg",
-  duckdb: "/logos/datasources/duckdb.svg"
+  duckdb: "/logos/datasources/duckdb.svg",
+  sqlite: "/logos/datasources/sqlite.svg",
+  mariadb: "/logos/datasources/mariadb.svg",
+  oracle: "/logos/datasources/oracle.svg",
+  mssql: "/logos/datasources/mssql.svg",
+  sqlserver: "/logos/datasources/mssql.svg",
+  cassandra: "/logos/datasources/cassandra.svg",
+  dynamodb: "/logos/datasources/dynamodb.svg",
+  cockroach: "/logos/datasources/cockroachdb.svg",
+  supabase: "/logos/datasources/supabase.svg",
+  firebase: "/logos/datasources/firebase.svg",
+  neo4j: "/logos/datasources/neo4j.svg"
 };
 function getDatasourceLogo(datasourceId, dialect) {
   const search = (dialect ?? datasourceId).toLowerCase();
@@ -2884,7 +2895,7 @@ var DatasourceFlowNode = react.memo(function DatasourceFlowNode2({ id, data, sel
   const content = /* @__PURE__ */ jsxRuntime.jsxs(NodeCard, { compact: isCompact, selected, nodeType: "datasource", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-cyan-500 to-blue-600 shadow-lg", children: logo ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo, alt: config.dialect ?? "", className: "h-5 w-5" }) : /* @__PURE__ */ jsxRuntime.jsx(outline.ServerStackIcon, { className: "h-5 w-5 text-white" }) }),
+        logo ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo, alt: config.dialect ?? "", className: "h-8 w-8" }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-cyan-500 to-blue-600 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(outline.ServerStackIcon, { className: "h-5 w-5 text-white" }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: label }),
           !isCompact && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-0.5 line-clamp-1 text-xs text-gray-500 dark:text-gray-400", children: [
@@ -2903,7 +2914,7 @@ var DatasourceFlowNode = react.memo(function DatasourceFlowNode2({ id, data, sel
             event.preventDefault();
           },
           children: /* @__PURE__ */ jsxRuntime.jsx(
-            chunk2IOPJ5BM_js.ToggleSwitch,
+            chunkKEUOCEOO_js.ToggleSwitch,
             {
               checked: true,
               onChange: () => {
@@ -3231,8 +3242,8 @@ function ConfigFormActions({
   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(chunk2IOPJ5BM_js.Button, { type: "button", outline: true, onClick: onCancel, children: cancelLabel }),
-    /* @__PURE__ */ jsxRuntime.jsx(chunk2IOPJ5BM_js.Button, { type: "button", onClick: onSave, disabled: saveDisabled, children: saveLabel })
+    /* @__PURE__ */ jsxRuntime.jsx(chunkKEUOCEOO_js.Button, { type: "button", outline: true, onClick: onCancel, children: cancelLabel }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkKEUOCEOO_js.Button, { type: "button", onClick: onSave, disabled: saveDisabled, children: saveLabel })
   ] });
 }
 var COLOR_CLASSES = {
@@ -3479,7 +3490,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(
-          chunk2IOPJ5BM_js.Button,
+          chunkKEUOCEOO_js.Button,
           {
             type: "button",
             onClick: handleAddCondition,
@@ -3490,7 +3501,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(
-            chunk2IOPJ5BM_js.FormInput,
+            chunkKEUOCEOO_js.FormInput,
             {
               type: "text",
               label: t("variableLabel"),
@@ -3501,7 +3512,7 @@ function IfElseNodeConfigForm({ config, onSave, onCancel }) {
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
-            chunk2IOPJ5BM_js.FormSelect,
+            chunkKEUOCEOO_js.FormSelect,
             {
               label: t("operatorLabel"),
               value: condition.operator,
@@ -3511,7 +3522,7 @@ function IfElseNodeConfigForm({ config, onSave, onCancel }) {
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
-            chunk2IOPJ5BM_js.FormInput,
+            chunkKEUOCEOO_js.FormInput,
             {
               type: "text",
               label: t("valueLabel"),
@@ -3523,7 +3534,7 @@ function IfElseNodeConfigForm({ config, onSave, onCancel }) {
           ) })
         ] }),
         conditions.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-          chunk2IOPJ5BM_js.IconButton,
+          chunkKEUOCEOO_js.IconButton,
           {
             onClick: () => handleRemoveCondition(index),
             icon: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, { className: "h-4 w-4" }),
@@ -3678,7 +3689,7 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk2IOPJ5BM_js.FormSelect,
+      chunkKEUOCEOO_js.FormSelect,
       {
         label: t("methodLabel"),
         value: method,
@@ -3687,7 +3698,7 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk2IOPJ5BM_js.FormInput,
+      chunkKEUOCEOO_js.FormInput,
       {
         type: "text",
         label: t("urlLabel"),
@@ -3700,7 +3711,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(
-          chunk2IOPJ5BM_js.Button,
+          chunkKEUOCEOO_js.Button,
           {
             type: "button",
             onClick: handleAddHeader,
@@ -3710,7 +3721,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(
-          chunk2IOPJ5BM_js.FormInput,
+          chunkKEUOCEOO_js.FormInput,
           {
             type: "text",
             value: entry.key,
@@ -3720,7 +3731,7 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunk2IOPJ5BM_js.FormInput,
+          chunkKEUOCEOO_js.FormInput,
           {
             type: "text",
             value: entry.value,
@@ -3730,7 +3741,7 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunk2IOPJ5BM_js.IconButton,
+          chunkKEUOCEOO_js.IconButton,
           {
             onClick: () => handleRemoveHeader(index),
             icon: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, { className: "h-4 w-4" }),
@@ -3742,7 +3753,7 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
       ] }, index)) })
     ] }),
     method !== "GET" && /* @__PURE__ */ jsxRuntime.jsx(
-      chunk2IOPJ5BM_js.FormTextarea,
+      chunkKEUOCEOO_js.FormTextarea,
       {
         label: t("bodyLabel"),
         value: body,
@@ -3753,7 +3764,7 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk2IOPJ5BM_js.FormInput,
+      chunkKEUOCEOO_js.FormInput,
       {
         type: "number",
         label: t("timeoutLabel"),
@@ -3784,7 +3795,7 @@ function TemplateTransformNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk2IOPJ5BM_js.FormTextarea,
+      chunkKEUOCEOO_js.FormTextarea,
       {
         label: t("templateLabel"),
         value: template,
@@ -3795,7 +3806,7 @@ function TemplateTransformNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk2IOPJ5BM_js.FormInput,
+      chunkKEUOCEOO_js.FormInput,
       {
         type: "text",
         label: t("outputVariableLabel"),
@@ -3824,7 +3835,7 @@ function IterationNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk2IOPJ5BM_js.FormInput,
+      chunkKEUOCEOO_js.FormInput,
       {
         type: "text",
         label: t("iteratorVariableLabel"),
@@ -3834,7 +3845,7 @@ function IterationNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk2IOPJ5BM_js.FormInput,
+      chunkKEUOCEOO_js.FormInput,
       {
         type: "number",
         label: t("maxIterationsLabel"),
@@ -3865,7 +3876,7 @@ function KnowledgeBaseNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk2IOPJ5BM_js.FormInput,
+      chunkKEUOCEOO_js.FormInput,
       {
         type: "text",
         label: t("sourceIdLabel"),
@@ -3875,7 +3886,7 @@ function KnowledgeBaseNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk2IOPJ5BM_js.FormInput,
+      chunkKEUOCEOO_js.FormInput,
       {
         type: "number",
         label: t("topKLabel"),
@@ -3886,7 +3897,7 @@ function KnowledgeBaseNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk2IOPJ5BM_js.FormInput,
+      chunkKEUOCEOO_js.FormInput,
       {
         type: "number",
         label: t("similarityThresholdLabel"),
@@ -3917,7 +3928,7 @@ function AnswerNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk2IOPJ5BM_js.FormTextarea,
+      chunkKEUOCEOO_js.FormTextarea,
       {
         label: t("outputTemplateLabel"),
         hint: t("outputTemplateHelp"),
@@ -4351,7 +4362,7 @@ function VariableAggregatorNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk2IOPJ5BM_js.FormInput,
+      chunkKEUOCEOO_js.FormInput,
       {
         type: "text",
         label: t("outputVariableLabel"),
@@ -4361,7 +4372,7 @@ function VariableAggregatorNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk2IOPJ5BM_js.FormSelect,
+      chunkKEUOCEOO_js.FormSelect,
       {
         label: t("aggregationModeLabel"),
         value: aggregationMode,
@@ -4394,7 +4405,7 @@ function DocumentExtractorNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk2IOPJ5BM_js.FormSelect,
+      chunkKEUOCEOO_js.FormSelect,
       {
         label: t("extractionModeLabel"),
         value: extractionMode,
@@ -4403,7 +4414,7 @@ function DocumentExtractorNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk2IOPJ5BM_js.FormInput,
+      chunkKEUOCEOO_js.FormInput,
       {
         type: "text",
         label: t("outputVariableLabel"),
@@ -4580,7 +4591,7 @@ function IterationStartNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk2IOPJ5BM_js.FormInput,
+      chunkKEUOCEOO_js.FormInput,
       {
         type: "text",
         label: t("iteratorVariableLabel"),
@@ -4590,7 +4601,7 @@ function IterationStartNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk2IOPJ5BM_js.FormInput,
+      chunkKEUOCEOO_js.FormInput,
       {
         type: "text",
         label: t("itemVariableLabel"),
@@ -4600,7 +4611,7 @@ function IterationStartNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk2IOPJ5BM_js.FormInput,
+      chunkKEUOCEOO_js.FormInput,
       {
         type: "text",
         label: t("indexVariableLabel"),
@@ -4848,24 +4859,61 @@ function EntityNodeConfigForm({ config, entities = [], onSave, onCancel }) {
     ] })
   ] });
 }
-var COLUMN_TYPE_BADGE_COLORS = {
-  string: "bg-gray-100 text-gray-600 dark:bg-gray-500/20 dark:text-gray-300",
-  varchar: "bg-gray-100 text-gray-600 dark:bg-gray-500/20 dark:text-gray-300",
-  text: "bg-gray-100 text-gray-600 dark:bg-gray-500/20 dark:text-gray-300",
-  integer: "bg-blue-100 text-blue-600 dark:bg-blue-500/20 dark:text-blue-300",
-  int: "bg-blue-100 text-blue-600 dark:bg-blue-500/20 dark:text-blue-300",
-  bigint: "bg-blue-100 text-blue-600 dark:bg-blue-500/20 dark:text-blue-300",
-  number: "bg-blue-100 text-blue-600 dark:bg-blue-500/20 dark:text-blue-300",
-  decimal: "bg-blue-100 text-blue-600 dark:bg-blue-500/20 dark:text-blue-300",
-  float: "bg-blue-100 text-blue-600 dark:bg-blue-500/20 dark:text-blue-300",
-  boolean: "bg-green-100 text-green-600 dark:bg-green-500/20 dark:text-green-300",
-  date: "bg-amber-100 text-amber-600 dark:bg-amber-500/20 dark:text-amber-300",
-  timestamp: "bg-amber-100 text-amber-600 dark:bg-amber-500/20 dark:text-amber-300",
-  datetime: "bg-amber-100 text-amber-600 dark:bg-amber-500/20 dark:text-amber-300",
-  json: "bg-purple-100 text-purple-600 dark:bg-purple-500/20 dark:text-purple-300",
-  jsonb: "bg-purple-100 text-purple-600 dark:bg-purple-500/20 dark:text-purple-300",
-  uuid: "bg-teal-100 text-teal-600 dark:bg-teal-500/20 dark:text-teal-300"
+var DATASOURCE_LOGOS2 = {
+  bigquery: "/logos/datasources/bigquery.svg",
+  postgres: "/logos/datasources/postgres.svg",
+  snowflake: "/logos/datasources/snowflake.svg",
+  mongodb: "/logos/datasources/mongodb.svg",
+  redis: "/logos/datasources/redis.svg",
+  mysql: "/logos/datasources/mysql.svg",
+  clickhouse: "/logos/datasources/clickhouse.svg",
+  elasticsearch: "/logos/datasources/elasticsearch.svg",
+  duckdb: "/logos/datasources/duckdb.svg",
+  sqlite: "/logos/datasources/sqlite.svg",
+  mariadb: "/logos/datasources/mariadb.svg",
+  oracle: "/logos/datasources/oracle.svg",
+  mssql: "/logos/datasources/mssql.svg",
+  sqlserver: "/logos/datasources/mssql.svg",
+  cassandra: "/logos/datasources/cassandra.svg",
+  dynamodb: "/logos/datasources/dynamodb.svg",
+  cockroach: "/logos/datasources/cockroachdb.svg",
+  supabase: "/logos/datasources/supabase.svg",
+  firebase: "/logos/datasources/firebase.svg",
+  neo4j: "/logos/datasources/neo4j.svg"
 };
+function getDatasourceLogo2(datasourceId, dialect) {
+  const search = (dialect ?? datasourceId).toLowerCase();
+  for (const [key, url] of Object.entries(DATASOURCE_LOGOS2)) {
+    if (search.includes(key)) return url;
+  }
+  return null;
+}
+var TYPE_COLORS = {
+  string: "bg-gray-500/10 text-gray-500 dark:text-gray-400",
+  varchar: "bg-gray-500/10 text-gray-500 dark:text-gray-400",
+  text: "bg-gray-500/10 text-gray-500 dark:text-gray-400",
+  integer: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
+  int: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
+  bigint: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
+  number: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
+  decimal: "bg-indigo-500/10 text-indigo-600 dark:text-indigo-400",
+  float: "bg-indigo-500/10 text-indigo-600 dark:text-indigo-400",
+  boolean: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
+  date: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
+  timestamp: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
+  datetime: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
+  json: "bg-violet-500/10 text-violet-600 dark:text-violet-400",
+  jsonb: "bg-violet-500/10 text-violet-600 dark:text-violet-400",
+  uuid: "bg-teal-500/10 text-teal-600 dark:text-teal-400",
+  array: "bg-pink-500/10 text-pink-600 dark:text-pink-400"
+};
+function SectionHeader({ icon: Icon, title, badge }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4 text-gray-400 dark:text-gray-500" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: title }),
+    badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto rounded-full bg-indigo-500/10 px-2 py-0.5 text-[10px] font-semibold text-indigo-600 dark:text-indigo-400", children: badge })
+  ] });
+}
 function DatasourceNodeConfigForm({
   nodeId,
   config,
@@ -4884,9 +4932,19 @@ function DatasourceNodeConfigForm({
   const [outputVariable, setOutputVariable] = react.useState(config.outputVariable);
   const [limit, setLimit] = react.useState(config.limit);
   const [filterVariables, setFilterVariables] = react.useState({ ...config.filterVariables });
+  const [tableSearch, setTableSearch] = react.useState("");
+  const [columnSearch, setColumnSearch] = react.useState("");
   const allColumnNames = availableColumns.map((column) => column.name);
   const allSelected = selectedColumns.length > 0 && selectedColumns.length === allColumnNames.length;
   const selectedDatasource = datasources.find((datasource) => datasource.id === selectedDatasourceId);
+  const filteredTables = react.useMemo(
+    () => tableSearch ? availableTables.filter((table) => table.toLowerCase().includes(tableSearch.toLowerCase())) : availableTables,
+    [availableTables, tableSearch]
+  );
+  const filteredColumns = react.useMemo(
+    () => columnSearch ? availableColumns.filter((column) => column.name.toLowerCase().includes(columnSearch.toLowerCase())) : availableColumns,
+    [availableColumns, columnSearch]
+  );
   const loadTables = react.useCallback(async (datasourceId) => {
     if (!datasourceId) {
       setAvailableTables([]);
@@ -4904,14 +4962,10 @@ function DatasourceNodeConfigForm({
     setAvailableColumns(columns);
   }, [onLoadSchema]);
   react.useEffect(() => {
-    if (selectedDatasourceId) {
-      loadTables(selectedDatasourceId);
-    }
+    if (selectedDatasourceId) loadTables(selectedDatasourceId);
   }, [selectedDatasourceId, loadTables]);
   react.useEffect(() => {
-    if (selectedDatasourceId && selectedTable) {
-      loadSchema(selectedDatasourceId, selectedTable);
-    }
+    if (selectedDatasourceId && selectedTable) loadSchema(selectedDatasourceId, selectedTable);
   }, [selectedDatasourceId, selectedTable, loadSchema]);
   const handleDatasourceChange = (datasourceId) => {
     setSelectedDatasourceId(datasourceId);
@@ -4920,19 +4974,18 @@ function DatasourceNodeConfigForm({
     setAvailableColumns([]);
     setSelectedColumns([]);
     setFilterVariables({});
+    setTableSearch("");
+    setColumnSearch("");
   };
   const handleTableChange = (table) => {
     setSelectedTable(table);
     setAvailableColumns([]);
     setSelectedColumns([]);
     setFilterVariables({});
+    setColumnSearch("");
   };
   const handleToggleSelectAll = () => {
-    if (allSelected) {
-      setSelectedColumns([]);
-    } else {
-      setSelectedColumns([...allColumnNames]);
-    }
+    setSelectedColumns(allSelected ? [] : [...allColumnNames]);
   };
   const handleToggleColumn = (columnName) => {
     setSelectedColumns(
@@ -4940,7 +4993,7 @@ function DatasourceNodeConfigForm({
     );
   };
   const handleAddFilter = () => {
-    setFilterVariables((previous) => ({ ...previous, "": "" }));
+    setFilterVariables((previous) => ({ ...previous, [`field_${Object.keys(previous).length}`]: "" }));
   };
   const handleUpdateFilterVariable = (oldKey, newKey) => {
     setFilterVariables((previous) => {
@@ -4964,9 +5017,7 @@ function DatasourceNodeConfigForm({
   const handleSave = () => {
     const cleanedFilters = {};
     for (const [key, value] of Object.entries(filterVariables)) {
-      if (key.trim() && value.trim()) {
-        cleanedFilters[key.trim()] = value.trim();
-      }
+      if (key.trim() && value.trim()) cleanedFilters[key.trim()] = value.trim();
     }
     onSave({
       ...config,
@@ -4980,130 +5031,171 @@ function DatasourceNodeConfigForm({
     });
   };
   const filterEntries = Object.entries(filterVariables);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-5", 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("datasourceLabel") }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("datasourceHelp") }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "select",
-        {
-          value: selectedDatasourceId,
-          onChange: (event) => handleDatasourceChange(event.target.value),
-          className: "w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 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",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: t("selectDatasource") }),
-            datasources.map((datasource) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: datasource.id, children: [
-              datasource.name,
-              " (",
-              datasource.dialect,
-              ")"
-            ] }, datasource.id))
-          ]
-        }
-      ),
-      selectedDatasource && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300", children: selectedDatasource.dialect }) })
-    ] }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", 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("tableLabel") }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("tableHelp") }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "select",
-        {
-          value: selectedTable,
-          onChange: (event) => handleTableChange(event.target.value),
-          disabled: !selectedDatasourceId,
-          className: "w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-400/20 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-white",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: t("selectTable") }),
-            availableTables.map((table) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: table, children: table }, table))
-          ]
-        }
-      )
+      /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { icon: outline.CircleStackIcon, title: t("datasourceLabel"), badge: datasources.length }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-2", children: datasources.map((datasource) => {
+        const isSelected = datasource.id === selectedDatasourceId;
+        const logo = getDatasourceLogo2(datasource.id, datasource.dialect);
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleDatasourceChange(datasource.id),
+            className: `flex items-center gap-3 rounded-xl border px-3 py-2.5 text-left transition-all ${isSelected ? "border-cyan-500/50 bg-cyan-500/5 ring-1 ring-cyan-500/20 dark:border-cyan-400/40 dark:bg-cyan-400/5" : "border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm dark:border-white/10 dark:bg-white/[0.03] dark:hover:border-white/20"}`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center", children: logo ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo, alt: datasource.dialect, className: "h-7 w-7" }) : /* @__PURE__ */ jsxRuntime.jsx(outline.ServerStackIcon, { className: "h-6 w-6 text-gray-400" }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs font-semibold text-gray-900 dark:text-white", children: datasource.name }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: datasource.dialect })
+              ] }),
+              isSelected && /* @__PURE__ */ jsxRuntime.jsx(outline.CheckIcon, { className: "h-4 w-4 shrink-0 text-cyan-500 dark:text-cyan-400" })
+            ]
+          },
+          datasource.id
+        );
+      }) })
     ] }),
-    /* @__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("outputVariableLabel") }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("outputVariableHelp") }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          type: "text",
-          value: outputVariable,
-          onChange: (event) => setOutputVariable(event.target.value),
-          placeholder: "datasourceResult",
-          className: "w-full 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"
-        }
-      )
+    selectedDatasourceId && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { icon: outline.TableCellsIcon, title: t("tableLabel"), badge: availableTables.length || void 0 }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liquid-surface rounded-xl border border-white/30 dark:border-white/10", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border-b border-gray-200/50 px-3 py-2 dark:border-white/5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(outline.MagnifyingGlassIcon, { className: "h-3.5 w-3.5 text-gray-400" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              value: tableSearch,
+              onChange: (event) => setTableSearch(event.target.value),
+              placeholder: t("selectTable"),
+              className: "flex-1 bg-transparent text-xs text-gray-900 outline-none placeholder:text-gray-400 dark:text-white dark:placeholder:text-gray-500"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-36 overflow-y-auto p-1", children: [
+          filteredTables.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 py-3 text-center text-[10px] text-gray-400", children: availableTables.length === 0 ? t("noColumnsAvailable") : "No matches" }),
+          filteredTables.map((table) => {
+            const isSelected = table === selectedTable;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleTableChange(table),
+                className: `flex w-full items-center gap-2 rounded-lg px-3 py-1.5 text-left text-xs transition-colors ${isSelected ? "bg-cyan-500/10 font-semibold text-cyan-700 dark:text-cyan-300" : "text-gray-700 hover:bg-gray-100/60 dark:text-gray-300 dark:hover:bg-white/5"}`,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(outline.TableCellsIcon, { className: "h-3 w-3 shrink-0 text-gray-400" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: table }),
+                  isSelected && /* @__PURE__ */ jsxRuntime.jsx(outline.CheckIcon, { className: "ml-auto h-3 w-3 shrink-0 text-cyan-500" })
+                ]
+              },
+              table
+            );
+          })
+        ] })
+      ] })
     ] }),
-    /* @__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("limitLabel") }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("limitHelp") }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          type: "number",
-          value: limit,
-          onChange: (event) => setLimit(Math.max(1, Number.parseInt(event.target.value, 10) || 1)),
-          min: 1,
-          max: 1e4,
-          className: "w-32 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 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"
-        }
-      )
+    selectedTable && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-[10px] font-medium text-gray-500 dark:text-gray-400", children: t("outputVariableLabel") }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 dark:border-white/10 dark:bg-white/[0.03]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(outline.VariableIcon, { className: "h-3.5 w-3.5 text-gray-400" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              value: outputVariable,
+              onChange: (event) => setOutputVariable(event.target.value),
+              placeholder: "datasourceResult",
+              className: "flex-1 bg-transparent text-xs text-gray-900 outline-none placeholder:text-gray-400 dark:text-white dark:placeholder:text-gray-500"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-24", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-[10px] font-medium text-gray-500 dark:text-gray-400", children: t("limitLabel") }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "number",
+            value: limit,
+            onChange: (event) => setLimit(Math.max(1, Number.parseInt(event.target.value, 10) || 1)),
+            min: 1,
+            max: 1e4,
+            className: "w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs text-gray-900 outline-none focus:border-cyan-400 dark:border-white/10 dark:bg-white/[0.03] dark:text-white"
+          }
+        )
+      ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__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("columnsLabel") }),
+    selectedTable && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SectionHeader,
+          {
+            icon: outline.TableCellsIcon,
+            title: t("columnsLabel"),
+            badge: `${selectedColumns.length}/${availableColumns.length}`
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
             onClick: handleToggleSelectAll,
             disabled: availableColumns.length === 0,
-            className: "text-xs font-medium text-indigo-600 hover:text-indigo-700 disabled:cursor-not-allowed disabled:opacity-50 dark:text-indigo-400 dark:hover:text-indigo-300",
+            className: "text-[10px] font-semibold text-cyan-600 hover:text-cyan-700 disabled:opacity-40 dark:text-cyan-400 dark:hover:text-cyan-300",
             children: allSelected ? t("deselectAll") : t("selectAll")
           }
         )
       ] }),
-      selectedColumns.length === 0 && availableColumns.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs text-amber-600 dark:text-amber-400", children: t("noColumnsSelected") }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-48 space-y-1 overflow-y-auto rounded-lg border border-gray-200 p-2 dark:border-gray-700", children: [
-        availableColumns.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-2 py-2 text-xs text-gray-500 dark:text-gray-400", children: t("noColumnsAvailable") }),
-        availableColumns.map((column) => {
-          const isSelected = selectedColumns.includes(column.name);
-          const typeBadgeColor = COLUMN_TYPE_BADGE_COLORS[column.type.toLowerCase()] ?? COLUMN_TYPE_BADGE_COLORS.string;
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "label",
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liquid-surface rounded-xl border border-white/30 dark:border-white/10", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border-b border-gray-200/50 px-3 py-2 dark:border-white/5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(outline.MagnifyingGlassIcon, { className: "h-3.5 w-3.5 text-gray-400" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
             {
-              className: `flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 transition-colors ${isSelected ? "bg-indigo-50 dark:bg-indigo-500/10" : "hover:bg-gray-50 dark:hover:bg-gray-800"}`,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
-                  {
-                    type: "checkbox",
-                    checked: isSelected,
-                    onChange: () => handleToggleColumn(column.name),
-                    className: "h-3.5 w-3.5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-600"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex-1 text-xs font-medium text-gray-900 dark:text-white", children: [
-                  column.name,
-                  column.nullable && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-[9px] text-gray-400 dark:text-gray-500", children: "?" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: `rounded-full px-1.5 py-0.5 text-[9px] font-medium ${typeBadgeColor}`, children: column.type })
-              ]
-            },
-            column.name
-          );
-        })
+              type: "text",
+              value: columnSearch,
+              onChange: (event) => setColumnSearch(event.target.value),
+              placeholder: "Search columns...",
+              className: "flex-1 bg-transparent text-xs text-gray-900 outline-none placeholder:text-gray-400 dark:text-white dark:placeholder:text-gray-500"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-52 overflow-y-auto p-1", children: [
+          filteredColumns.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 py-3 text-center text-[10px] text-gray-400", children: t("noColumnsAvailable") }),
+          filteredColumns.map((column) => {
+            const isSelected = selectedColumns.includes(column.name);
+            const typeColor = TYPE_COLORS[column.type.toLowerCase()] ?? TYPE_COLORS.string;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleToggleColumn(column.name),
+                className: `flex w-full items-center gap-2 rounded-lg px-3 py-1.5 text-left transition-colors ${isSelected ? "bg-cyan-500/8 dark:bg-cyan-400/5" : "hover:bg-gray-100/60 dark:hover:bg-white/5"}`,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors ${isSelected ? "border-cyan-500 bg-cyan-500 dark:border-cyan-400 dark:bg-cyan-400" : "border-gray-300 dark:border-gray-600"}`, children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(outline.CheckIcon, { className: "h-2.5 w-2.5 text-white" }) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex-1 truncate text-xs text-gray-900 dark:text-white", children: [
+                    column.name,
+                    column.nullable && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-[9px] text-gray-400", children: "?" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: `shrink-0 rounded-full px-1.5 py-0.5 text-[9px] font-medium ${typeColor}`, children: column.type })
+                ]
+              },
+              column.name
+            );
+          })
+        ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: t("filtersLabel") }),
+    selectedTable && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { icon: outline.FunnelIcon, title: t("filtersLabel"), badge: filterEntries.length || void 0 }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             type: "button",
             onClick: handleAddFilter,
-            className: "flex items-center gap-1 text-xs font-medium text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300",
+            className: "flex items-center gap-1 text-[10px] font-semibold text-cyan-600 hover:text-cyan-700 dark:text-cyan-400 dark:hover:text-cyan-300",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(outline.PlusIcon, { className: "h-3 w-3" }),
               t("addFilter")
@@ -5111,21 +5203,20 @@ function DatasourceNodeConfigForm({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("filtersHelp") }),
-      filterEntries.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: filterEntries.map(([variableName, columnName], index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      filterEntries.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: filterEntries.map(([variableName, columnName], index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-2 py-1.5 dark:border-white/10 dark:bg-white/[0.03]", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "select",
           {
             value: columnName,
             onChange: (event) => handleUpdateFilterField(variableName, event.target.value),
-            className: "flex-1 rounded-lg border border-gray-300 bg-white px-2 py-1.5 text-xs text-gray-900 outline-none focus:border-indigo-400 focus:ring-1 focus:ring-indigo-400/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white",
+            className: "flex-1 rounded bg-transparent text-xs text-gray-900 outline-none dark:text-white",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: t("columnName") }),
               availableColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: column.name, children: column.name }, column.name))
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400", children: "=" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-gray-400", children: "=" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -5133,7 +5224,7 @@ function DatasourceNodeConfigForm({
             value: variableName,
             onChange: (event) => handleUpdateFilterVariable(variableName, event.target.value),
             placeholder: t("variableReference"),
-            className: "flex-1 rounded-lg border border-gray-300 bg-white px-2 py-1.5 text-xs text-gray-900 placeholder-gray-400 outline-none focus:border-indigo-400 focus:ring-1 focus:ring-indigo-400/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500"
+            className: "flex-1 bg-transparent text-xs text-gray-900 outline-none placeholder:text-gray-400 dark:text-white dark:placeholder:text-gray-500"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -5141,29 +5232,20 @@ function DatasourceNodeConfigForm({
           {
             type: "button",
             onClick: () => handleRemoveFilter(variableName),
-            className: "rounded-md p-1 text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20",
-            children: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "h-3.5 w-3.5" })
+            className: "shrink-0 rounded-md p-1 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-900/20",
+            children: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "h-3 w-3" })
           }
         )
       ] }, index)) })
     ] }),
-    /* @__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(
-        "button",
-        {
-          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.jsxs("div", { className: "flex justify-end gap-2 border-t border-gray-200/50 pt-4 dark:border-white/5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(chunkKEUOCEOO_js.Button, { outline: true, onClick: onCancel, children: t("cancel") }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+        chunkKEUOCEOO_js.Button,
         {
-          type: "button",
+          color: "cyan",
           onClick: handleSave,
           disabled: !selectedDatasourceId || !selectedTable || selectedColumns.length === 0,
-          className: "rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-indigo-500 dark:hover:bg-indigo-600",
           children: t("save")
         }
       )
@@ -5194,7 +5276,7 @@ function GroupNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk2IOPJ5BM_js.FormInput,
+      chunkKEUOCEOO_js.FormInput,
       {
         type: "text",
         label: translations("labelField"),
@@ -5204,7 +5286,7 @@ function GroupNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk2IOPJ5BM_js.FormTextarea,
+      chunkKEUOCEOO_js.FormTextarea,
       {
         label: translations("descriptionField"),
         value: description,
@@ -5362,7 +5444,7 @@ function ModelProviderNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk2IOPJ5BM_js.FormInput,
+      chunkKEUOCEOO_js.FormInput,
       {
         type: "text",
         label: t("nameLabel"),
@@ -5372,7 +5454,7 @@ function ModelProviderNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk2IOPJ5BM_js.FormSelect,
+      chunkKEUOCEOO_js.FormSelect,
       {
         label: t("providerTypeLabel"),
         value: providerType,
@@ -5381,7 +5463,7 @@ function ModelProviderNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     showRegion && /* @__PURE__ */ jsxRuntime.jsx(
-      chunk2IOPJ5BM_js.FormSelect,
+      chunkKEUOCEOO_js.FormSelect,
       {
         label: t("regionLabel"),
         value: region,
@@ -5390,7 +5472,7 @@ function ModelProviderNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     showEndpoint && /* @__PURE__ */ jsxRuntime.jsx(
-      chunk2IOPJ5BM_js.FormInput,
+      chunkKEUOCEOO_js.FormInput,
       {
         type: "text",
         label: t("endpointLabel"),
@@ -5400,7 +5482,7 @@ function ModelProviderNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     showApiKey && /* @__PURE__ */ jsxRuntime.jsx(
-      chunk2IOPJ5BM_js.FormInput,
+      chunkKEUOCEOO_js.FormInput,
       {
         type: "password",
         label: t("apiKeyLabel"),
@@ -5410,7 +5492,7 @@ function ModelProviderNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     showCredentialRef && /* @__PURE__ */ jsxRuntime.jsx(
-      chunk2IOPJ5BM_js.FormInput,
+      chunkKEUOCEOO_js.FormInput,
       {
         type: "text",
         label: t("credentialRefLabel"),
@@ -5554,7 +5636,7 @@ function LogicNodeModal({ onSave, entities = [], datasources = [], onLoadTables,
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunk2IOPJ5BM_js.GlassModal,
+    chunkKEUOCEOO_js.GlassModal,
     {
       open,
       onClose: closeModal,
@@ -5614,7 +5696,7 @@ function NodeContextMenu({ position, targetId, onClose, onEdit, onDuplicate, onC
     }
   ];
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunk2IOPJ5BM_js.ContextMenu,
+    chunkKEUOCEOO_js.ContextMenu,
     {
       position,
       onClose,
@@ -5671,7 +5753,7 @@ function PanelContextMenu({ position, onClose, onPaste, onSelectAll, onFitView,
     }
   ];
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunk2IOPJ5BM_js.ContextMenu,
+    chunkKEUOCEOO_js.ContextMenu,
     {
       position,
       onClose,
@@ -5818,7 +5900,7 @@ function SelectionContextMenu({
     }
   ];
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunk2IOPJ5BM_js.ContextMenu,
+    chunkKEUOCEOO_js.ContextMenu,
     {
       position,
       onClose,
@@ -7707,5 +7789,5 @@ exports.useModalStore = useModalStore;
 exports.useWorkflowBuilderClient = useWorkflowBuilderClient;
 exports.useWorkflowBuilderClientOptional = useWorkflowBuilderClientOptional;
 exports.useWorkflowStore = useWorkflowStore;
-//# sourceMappingURL=chunk-XFYGRDN3.js.map
-//# sourceMappingURL=chunk-XFYGRDN3.js.map
+//# sourceMappingURL=chunk-7XITJWOE.js.map
+//# sourceMappingURL=chunk-7XITJWOE.js.map