@datatechsolutions/ui 2.11.42 → 2.11.43

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

@@ -4859,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,
@@ -4895,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([]);
@@ -4915,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);
@@ -4931,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(
@@ -4951,7 +4993,7 @@ function DatasourceNodeConfigForm({
     );
   };
   const handleAddFilter = () => {
-    setFilterVariables((previous) => ({ ...previous, "": "" }));
+    setFilterVariables((previous) => ({ ...previous, [`field_${Object.keys(previous).length}`]: "" }));
   };
   const handleUpdateFilterVariable = (oldKey, newKey) => {
     setFilterVariables((previous) => {
@@ -4975,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,
@@ -4991,130 +5031,171 @@ function DatasourceNodeConfigForm({
     });
   };
   const filterEntries = Object.entries(filterVariables);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-5", children: [
+  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("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 }) })
-    ] }),
-    /* @__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")
@@ -5122,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",
           {
@@ -5144,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(
@@ -5152,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.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",
-          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",
+          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")
         }
       )
@@ -7718,5 +7789,5 @@ exports.useModalStore = useModalStore;
 exports.useWorkflowBuilderClient = useWorkflowBuilderClient;
 exports.useWorkflowBuilderClientOptional = useWorkflowBuilderClientOptional;
 exports.useWorkflowStore = useWorkflowStore;
-//# sourceMappingURL=chunk-YI6QMBKC.js.map
-//# sourceMappingURL=chunk-YI6QMBKC.js.map
+//# sourceMappingURL=chunk-7XITJWOE.js.map
+//# sourceMappingURL=chunk-7XITJWOE.js.map