@datatechsolutions/ui 3.13.0 → 3.14.0

package/dist/{chunk-D5OTZGA2.js → chunk-5SCZB5UI.js}

@@ -1,10 +1,10 @@
 "use client";
 'use strict';
 
-var chunk5ETT54QS_js = require('./chunk-5ETT54QS.js');
+var chunkFZUV7GNB_js = require('./chunk-FZUV7GNB.js');
 var chunkY5VN4SPH_js = require('./chunk-Y5VN4SPH.js');
-var chunkEZQ2D47U_js = require('./chunk-EZQ2D47U.js');
-var chunkBHOT22QL_js = require('./chunk-BHOT22QL.js');
+var chunk6NEESZVO_js = require('./chunk-6NEESZVO.js');
+var chunkMXQ2EYG2_js = require('./chunk-MXQ2EYG2.js');
 var chunk72SWXOD5_js = require('./chunk-72SWXOD5.js');
 var react = require('react');
 var react$1 = require('@xyflow/react');
@@ -752,7 +752,7 @@ function ConditionalEdgeComponent({
                 transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`
               },
               "data-testid": `edge-label-${id}`,
-              children: /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Badge, { color: labelColor, size: "xs", children: label })
+              children: /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: labelColor, size: "xs", children: label })
             }
           ),
           showControls && !showInsertPopup && /* @__PURE__ */ jsxRuntime.jsx(
@@ -896,10 +896,10 @@ var DraggableCommandBar = react.memo(function DraggableCommandBar2({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [showShortcuts, onCloseShortcuts]);
-  const buttonClassName = "rounded-lg p-1.5 text-gray-600 transition-colors hover:bg-white/40 active:bg-white/60 dark:text-gray-400 dark:hover:bg-white/10 dark:active:bg-white/15";
+  const buttonClassName = "rounded-lg p-1.5 text-slate-600 transition-colors hover:bg-white/40 active:bg-white/60 dark:text-slate-400 dark:hover:bg-white/10 dark:active:bg-white/15";
   const activeButtonClassName = "rounded-lg p-1.5 transition-colors hover:bg-white/40 dark:hover:bg-white/10 text-indigo-600 dark:text-indigo-400";
-  const inactiveButtonClassName = "rounded-lg p-1.5 transition-colors hover:bg-white/40 dark:hover:bg-white/10 text-gray-400 dark:text-gray-500";
-  const dividerClassName = "mx-0.5 h-4 w-px bg-gray-400/30 dark:bg-white/10";
+  const inactiveButtonClassName = "rounded-lg p-1.5 transition-colors hover:bg-white/40 dark:hover:bg-white/10 text-slate-400 dark:text-slate-500";
+  const dividerClassName = "mx-0.5 h-4 w-px bg-slate-400/30 dark:bg-white/10";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -919,7 +919,7 @@ var DraggableCommandBar = react.memo(function DraggableCommandBar2({
         {
           className: `${GLASS_CLASS} flex items-center gap-0.5 rounded-2xl px-2 py-1.5`,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-0.5 flex cursor-grab items-center px-0.5 active:cursor-grabbing", children: /* @__PURE__ */ jsxRuntime.jsx(outline.Bars2Icon, { className: "h-3.5 w-3.5 text-gray-400/70 dark:text-gray-500/70" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-0.5 flex cursor-grab items-center px-0.5 active:cursor-grabbing", children: /* @__PURE__ */ jsxRuntime.jsx(outline.Bars2Icon, { className: "h-3.5 w-3.5 text-slate-400/70 dark:text-slate-500/70" }) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
@@ -1046,7 +1046,7 @@ var DraggableCommandBar = react.memo(function DraggableCommandBar2({
                     onClick: (event) => event.stopPropagation(),
                     onPointerDown: (event) => event.stopPropagation(),
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: tWorkflow("shortcuts") }),
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400", children: tWorkflow("shortcuts") }),
                       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1.5", children: [
                         { keys: "V", label: tWorkflow("pointerMode") },
                         { keys: "H", label: tWorkflow("handMode") },
@@ -1068,11 +1068,11 @@ var DraggableCommandBar = react.memo(function DraggableCommandBar2({
                         { keys: "G", label: tWorkflow("toggleDots") },
                         { keys: "M", label: tWorkflow("toggleMinimap") }
                       ].map((shortcut) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-gray-600 dark:text-gray-300", children: shortcut.label }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-slate-600 dark:text-slate-300", children: shortcut.label }),
                         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center gap-0.5", children: shortcut.keys.split(" ").map((key) => /* @__PURE__ */ jsxRuntime.jsx(
                           "kbd",
                           {
-                            className: "inline-flex min-w-[20px] items-center justify-center rounded-md bg-white/60 px-1.5 py-0.5 text-[10px] font-medium text-gray-500 shadow-sm ring-1 ring-inset ring-gray-300/40 dark:bg-white/10 dark:text-gray-400 dark:ring-white/10",
+                            className: "inline-flex min-w-[20px] items-center justify-center rounded-md bg-white/60 px-1.5 py-0.5 text-[10px] font-medium text-slate-500 shadow-sm ring-1 ring-inset ring-slate-300/40 dark:bg-white/10 dark:text-slate-400 dark:ring-white/10",
                             children: key
                           },
                           key
@@ -1200,24 +1200,24 @@ function getDatasourceLogo(datasourceId, dialect) {
   }
   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"
+var TYPE_BADGE_COLORS = {
+  string: "zinc",
+  varchar: "zinc",
+  text: "zinc",
+  integer: "blue",
+  int: "blue",
+  bigint: "blue",
+  number: "blue",
+  decimal: "indigo",
+  float: "indigo",
+  boolean: "emerald",
+  date: "amber",
+  timestamp: "amber",
+  datetime: "amber",
+  json: "violet",
+  jsonb: "violet",
+  uuid: "teal",
+  array: "pink"
 };
 var SIDEBAR_SECTIONS = [
   { id: "connection", label: "Connection", icon: outline.CircleStackIcon },
@@ -1373,7 +1373,7 @@ function DatasourceNodeConfigForm({
     switch (activeSectionId) {
       case "connection":
         return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: t("datasourceHelp") }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: t("datasourceHelp") }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-2", children: datasources.map((datasource) => {
             const isSelected = datasource.id === selectedDatasourceId;
             const logo2 = getDatasourceLogo(datasource.id, datasource.dialect);
@@ -1388,12 +1388,12 @@ function DatasourceNodeConfigForm({
                   }
                 },
                 disabled: readOnly && datasource.id !== selectedDatasourceId,
-                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"}`,
+                className: `flex items-center gap-3 rounded-xl px-3 py-2.5 text-left transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 ${isSelected ? "border border-cyan-500/50 bg-cyan-500/5 ring-1 ring-cyan-500/20 dark:border-cyan-400/40 dark:bg-cyan-400/5" : "liquid-surface hover:shadow-sm"}`,
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center", children: logo2 ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo2, alt: datasource.dialect, className: "h-7 w-7" }) : /* @__PURE__ */ jsxRuntime.jsx(outline.ServerStackIcon, { className: "h-6 w-6 text-gray-400" }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center", children: logo2 ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo2, alt: datasource.dialect, className: "h-7 w-7" }) : /* @__PURE__ */ jsxRuntime.jsx(outline.ServerStackIcon, { className: "h-6 w-6 text-slate-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 })
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs font-semibold text-slate-900 dark:text-white", children: datasource.name }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: datasource.dialect })
                   ] }),
                   isSelected && /* @__PURE__ */ jsxRuntime.jsx(outline.CheckIcon, { className: "h-4 w-4 shrink-0 text-cyan-500 dark:text-cyan-400" })
                 ]
@@ -1404,10 +1404,10 @@ function DatasourceNodeConfigForm({
         ] });
       case "table":
         return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: t("tableHelp") }),
-          !selectedDatasourceId ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "py-8 text-center text-xs text-gray-400", children: t("selectDatasource") }) : /* @__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("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: t("tableHelp") }),
+          !selectedDatasourceId ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "py-8 text-center text-xs text-slate-400", children: t("selectDatasource") }) : /* @__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-slate-200/50 px-3 py-2 dark:border-white/5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(outline.MagnifyingGlassIcon, { className: "h-3.5 w-3.5 text-slate-400" }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "input",
                 {
@@ -1415,13 +1415,13 @@ function DatasourceNodeConfigForm({
                   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"
+                  className: "flex-1 bg-transparent text-xs text-slate-900 outline-none placeholder:text-slate-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 dark:text-white dark:placeholder:text-slate-500"
                 }
               ),
-              availableTables.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-gray-400", children: availableTables.length })
+              availableTables.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-slate-400", children: availableTables.length })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-64 overflow-y-auto p-1", children: [
-              filteredTables.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 py-6 text-center text-[10px] text-gray-400", children: t("noColumnsAvailable") }),
+              filteredTables.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 py-6 text-center text-[10px] text-slate-400", children: t("noColumnsAvailable") }),
               filteredTables.map((table) => {
                 const isSelected = table === selectedTable;
                 return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1434,9 +1434,9 @@ function DatasourceNodeConfigForm({
                         setActiveSectionId("columns");
                       }
                     },
-                    className: `flex w-full items-center gap-2 rounded-lg px-3 py-2 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"}`,
+                    className: `flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-xs transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 ${isSelected ? "bg-cyan-500/10 font-semibold text-cyan-700 dark:text-cyan-300" : "text-slate-700 hover:bg-slate-100/60 dark:text-slate-300 dark:hover:bg-white/5"}`,
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(outline.TableCellsIcon, { className: "h-3.5 w-3.5 shrink-0 text-gray-400" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(outline.TableCellsIcon, { className: "h-3.5 w-3.5 shrink-0 text-slate-400" }),
                       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: table }),
                       isSelected && /* @__PURE__ */ jsxRuntime.jsx(outline.CheckIcon, { className: "ml-auto h-3.5 w-3.5 shrink-0 text-cyan-500" })
                     ]
@@ -1450,7 +1450,7 @@ function DatasourceNodeConfigForm({
       case "columns":
         return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: [
               selectedColumns.length,
               "/",
               availableColumns.length,
@@ -1462,14 +1462,14 @@ function DatasourceNodeConfigForm({
                 type: "button",
                 onClick: () => setSelectedColumns(allSelected ? [] : [...allColumnNames]),
                 disabled: availableColumns.length === 0,
-                className: "text-[10px] font-semibold text-cyan-600 hover:text-cyan-700 disabled:opacity-40 dark:text-cyan-400",
+                className: "text-[10px] font-semibold text-cyan-600 hover:text-cyan-700 disabled:opacity-40 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 dark:text-cyan-400",
                 children: allSelected ? t("deselectAll") : t("selectAll")
               }
             )
           ] }),
-          !selectedTable ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "py-8 text-center text-xs text-gray-400", children: t("selectTable") }) : /* @__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" }),
+          !selectedTable ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "py-8 text-center text-xs text-slate-400", children: t("selectTable") }) : /* @__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-slate-200/50 px-3 py-2 dark:border-white/5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(outline.MagnifyingGlassIcon, { className: "h-3.5 w-3.5 text-slate-400" }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "input",
                 {
@@ -1477,15 +1477,15 @@ function DatasourceNodeConfigForm({
                   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"
+                  className: "flex-1 bg-transparent text-xs text-slate-900 outline-none placeholder:text-slate-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 dark:text-white dark:placeholder:text-slate-500"
                 }
               )
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-64 overflow-y-auto p-1", children: [
-              filteredColumns.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 py-6 text-center text-[10px] text-gray-400", children: t("noColumnsAvailable") }),
+              filteredColumns.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 py-6 text-center text-[10px] text-slate-400", children: t("noColumnsAvailable") }),
               filteredColumns.map((column) => {
                 const isSelected = selectedColumns.includes(column.name);
-                const typeColor = TYPE_COLORS[column.type.toLowerCase()] ?? TYPE_COLORS.string;
+                const typeBadgeColor = TYPE_BADGE_COLORS[column.type.toLowerCase()] ?? TYPE_BADGE_COLORS.string;
                 return /* @__PURE__ */ jsxRuntime.jsxs(
                   "button",
                   {
@@ -1493,14 +1493,14 @@ function DatasourceNodeConfigForm({
                     onClick: () => {
                       if (!readOnly) 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"}`,
+                    className: `flex w-full items-center gap-2 rounded-lg px-3 py-1.5 text-left transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 ${isSelected ? "bg-cyan-500/8 dark:bg-cyan-400/5" : "hover:bg-slate-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: [
+                      /* @__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-slate-300 dark:border-slate-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-slate-900 dark:text-white", children: [
                         column.name,
-                        column.nullable && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-[9px] text-gray-400", children: "?" })
+                        column.nullable && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-[9px] text-slate-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 })
+                      /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: typeBadgeColor, size: "xs", children: column.type })
                     ]
                   },
                   column.name
@@ -1512,13 +1512,13 @@ function DatasourceNodeConfigForm({
       case "filters":
         return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: t("filtersHelp") }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: t("filtersHelp") }),
             !readOnly && /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
               {
                 type: "button",
                 onClick: handleAddFilter,
-                className: "flex items-center gap-1 text-[10px] font-semibold text-cyan-600 hover:text-cyan-700 dark:text-cyan-400",
+                className: "flex items-center gap-1 text-[10px] font-semibold text-cyan-600 hover:text-cyan-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 dark:text-cyan-400",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(outline.PlusIcon, { className: "h-3 w-3" }),
                   t("addFilter")
@@ -1527,14 +1527,14 @@ function DatasourceNodeConfigForm({
             )
           ] }),
           filterEntries.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2 py-8", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(outline.FunnelIcon, { className: "h-8 w-8 text-gray-300 dark:text-gray-600" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-400", children: "No filters configured" }),
+            /* @__PURE__ */ jsxRuntime.jsx(outline.FunnelIcon, { className: "h-8 w-8 text-slate-300 dark:text-slate-600" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-slate-400", children: "No filters configured" }),
             /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
               {
                 type: "button",
                 onClick: handleAddFilter,
-                className: "flex items-center gap-1 rounded-lg bg-cyan-500/10 px-3 py-1.5 text-[10px] font-semibold text-cyan-600 hover:bg-cyan-500/15 dark:text-cyan-400",
+                className: "flex items-center gap-1 rounded-lg bg-cyan-500/10 px-3 py-1.5 text-[10px] font-semibold text-cyan-600 hover:bg-cyan-500/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 dark:text-cyan-400",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(outline.PlusIcon, { className: "h-3 w-3" }),
                   t("addFilter")
@@ -1544,14 +1544,15 @@ function DatasourceNodeConfigForm({
           ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: filterEntries.map((row, index) => {
             const currentOp = row.op ?? "eq";
             const valueDisplay = Array.isArray(row.value) ? row.value.map(String).join(", ") : row.value == null ? "" : String(row.value);
-            return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 rounded-xl border border-gray-200 bg-white px-3 py-2 dark:border-white/10 dark:bg-white/[0.03]", children: [
+            return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liquid-surface flex items-center gap-2 rounded-xl px-3 py-2", children: [
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "select",
                 {
                   value: row.column,
                   onChange: (event) => handleUpdateFilterColumn(index, event.target.value),
                   disabled: readOnly,
-                  className: "w-[28%] rounded bg-transparent text-xs text-gray-900 outline-none disabled:opacity-60 dark:text-white",
+                  "aria-label": t("columnName"),
+                  className: "w-[28%] rounded bg-transparent text-xs text-slate-900 outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 disabled:opacity-60 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))
@@ -1564,7 +1565,8 @@ function DatasourceNodeConfigForm({
                   value: currentOp,
                   onChange: (event) => handleUpdateFilterOp(index, event.target.value),
                   disabled: readOnly,
-                  className: "w-[18%] rounded bg-gray-50 px-1 text-center text-[10px] font-semibold uppercase text-gray-700 outline-none disabled:opacity-60 dark:bg-white/[0.05] dark:text-gray-200",
+                  "aria-label": t("filterOperator", { _: "Filter operator" }),
+                  className: "w-[18%] rounded bg-white/40 px-1 text-center text-[10px] font-semibold uppercase text-slate-700 outline-none backdrop-blur-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 disabled:opacity-60 dark:bg-white/[0.04] dark:text-slate-200",
                   title: t("filterOperator", { _: "Filter operator" }),
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx("option", { value: "eq", children: "= (eq)" }),
@@ -1586,7 +1588,7 @@ function DatasourceNodeConfigForm({
                   onChange: (event) => handleUpdateFilterValue(index, event.target.value),
                   placeholder: currentOp === "in" ? "comma-separated, e.g. SP, RJ, MG" : t("variableReference"),
                   readOnly,
-                  className: "flex-1 bg-transparent text-xs text-gray-900 outline-none placeholder:text-gray-400 dark:text-white dark:placeholder:text-gray-500"
+                  className: "flex-1 bg-transparent text-xs text-slate-900 outline-none placeholder:text-slate-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 dark:text-white dark:placeholder:text-slate-500"
                 }
               ),
               !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
@@ -1594,7 +1596,7 @@ function DatasourceNodeConfigForm({
                 {
                   type: "button",
                   onClick: () => handleRemoveFilter(index),
-                  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",
+                  className: "shrink-0 rounded-md p-1 text-slate-400 transition-colors hover:bg-red-50 hover:text-red-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 dark:hover:bg-red-900/20",
                   children: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "h-3 w-3" })
                 }
               )
@@ -1604,10 +1606,10 @@ function DatasourceNodeConfigForm({
       case "output":
         return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-5", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1.5 block text-xs font-medium text-gray-700 dark:text-gray-300", children: t("outputVariableLabel") }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-[10px] text-gray-500 dark:text-gray-400", children: t("outputVariableHelp") }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 rounded-xl border border-gray-200 bg-white px-3 py-2.5 dark:border-white/10 dark:bg-white/[0.03]", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(outline.VariableIcon, { className: "h-4 w-4 text-gray-400" }),
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1.5 block text-xs font-medium text-slate-700 dark:text-slate-300", children: t("outputVariableLabel") }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-[10px] text-slate-500 dark:text-slate-400", children: t("outputVariableHelp") }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liquid-surface flex items-center gap-2 rounded-xl px-3 py-2.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(outline.VariableIcon, { className: "h-4 w-4 text-slate-400" }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "input",
                 {
@@ -1616,14 +1618,14 @@ function DatasourceNodeConfigForm({
                   onChange: (event) => setOutputVariable(event.target.value),
                   placeholder: "datasourceResult",
                   readOnly,
-                  className: "flex-1 bg-transparent text-sm text-gray-900 outline-none placeholder:text-gray-400 dark:text-white dark:placeholder:text-gray-500"
+                  className: "flex-1 bg-transparent text-sm text-slate-900 outline-none placeholder:text-slate-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 dark:text-white dark:placeholder:text-slate-500"
                 }
               )
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1.5 block text-xs font-medium text-gray-700 dark:text-gray-300", children: t("limitLabel") }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-[10px] text-gray-500 dark:text-gray-400", children: t("limitHelp") }),
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1.5 block text-xs font-medium text-slate-700 dark:text-slate-300", children: t("limitLabel") }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-[10px] text-slate-500 dark:text-slate-400", children: t("limitHelp") }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
@@ -1633,15 +1635,15 @@ function DatasourceNodeConfigForm({
                 min: 1,
                 max: 1e4,
                 readOnly,
-                className: "w-32 rounded-xl border border-gray-200 bg-white px-3 py-2.5 text-sm text-gray-900 outline-none focus:border-cyan-400 dark:border-white/10 dark:bg-white/[0.03] dark:text-white"
+                className: "liquid-surface w-32 rounded-xl px-3 py-2.5 text-sm text-slate-900 outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 dark:text-white"
               }
             )
           ] }),
           selectedDatasource && selectedTable && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-cyan-500/20 bg-cyan-500/5 p-3 dark:border-cyan-400/15 dark:bg-cyan-400/5", children: [
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-semibold uppercase tracking-wider text-cyan-600 dark:text-cyan-400 mb-2", children: "Summary" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 text-xs text-gray-600 dark:text-gray-300", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 text-xs text-slate-600 dark:text-slate-300", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: "Source:" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-400", children: "Source:" }),
                 " ",
                 selectedDatasource.name,
                 " (",
@@ -1649,29 +1651,29 @@ function DatasourceNodeConfigForm({
                 ")"
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: "Table:" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-400", children: "Table:" }),
                 " ",
                 selectedTable
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: "Columns:" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-400", children: "Columns:" }),
                 " ",
                 selectedColumns.length,
                 " of ",
                 availableColumns.length
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: "Filters:" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-400", children: "Filters:" }),
                 " ",
                 filterEntries.length
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: "Limit:" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-400", children: "Limit:" }),
                 " ",
                 limit
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: "Output:" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-400", children: "Output:" }),
                 " ",
                 outputVariable || "\u2014"
               ] })
@@ -1684,7 +1686,7 @@ function DatasourceNodeConfigForm({
   }
   const logo = getDatasourceLogo(selectedDatasourceId, selectedDatasource?.dialect);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunk5ETT54QS_js.GlassModal,
+    chunkFZUV7GNB_js.GlassModal,
     {
       open,
       onClose: onCancel,
@@ -1699,8 +1701,8 @@ function DatasourceNodeConfigForm({
         onSectionChange: setActiveSectionId
       },
       footer: readOnly ? void 0 : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 px-6 py-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Button, { outline: true, onClick: onCancel, children: t("cancel") }),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Button, { color: "cyan", onClick: handleSave, disabled: !canSave, children: t("save") })
+        /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { outline: true, onClick: onCancel, children: t("cancel") }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { color: "cyan", onClick: handleSave, disabled: !canSave, children: t("save") })
       ] }),
       children: renderSection()
     }
@@ -1911,23 +1913,23 @@ function NodeInteractiveCard({
   );
 }
 function NodeIconBubble({ tone, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkEZQ2D47U_js.GraphNodeIconBubble, { className: `bg-gradient-to-br ${LOGIC_NODE_GRADIENTS[tone]}`, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(chunk6NEESZVO_js.GraphNodeIconBubble, { className: `bg-gradient-to-br ${LOGIC_NODE_GRADIENTS[tone]}`, children });
 }
 function NodeCardHeader({ icon, title, description, compact = false, iconClassName }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkEZQ2D47U_js.GraphNodeHeader, { icon, title, description, compact, iconClassName });
+  return /* @__PURE__ */ jsxRuntime.jsx(chunk6NEESZVO_js.GraphNodeHeader, { icon, title, description, compact, iconClassName });
 }
 function NodeCardMeta({ compact = false, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkEZQ2D47U_js.GraphNodeMeta, { compact, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(chunk6NEESZVO_js.GraphNodeMeta, { compact, children });
 }
 function NodeCardBadge({ children, className, tone, soft = false }) {
   if (tone) {
     const toneClass = soft ? LOGIC_NODE_BADGE_SOFT_COLORS[tone] : LOGIC_NODE_BADGE_COLORS[tone];
-    return /* @__PURE__ */ jsxRuntime.jsx(chunkEZQ2D47U_js.GraphNodeBadge, { className: `inline-flex items-center rounded-full px-2 py-0.5 text-[10px] ${soft ? "font-medium" : "font-semibold"} ${toneClass}`, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(chunk6NEESZVO_js.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__ */ jsxRuntime.jsx(chunkEZQ2D47U_js.GraphNodeBadge, { className, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(chunk6NEESZVO_js.GraphNodeBadge, { className, children });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Badge, { color: "zinc", size: "xs", children });
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: "zinc", size: "xs", children });
 }
 function NodeCardDeleteAction({ nodeId, onDelete }) {
   if (!onDelete) return null;
@@ -2066,8 +2068,8 @@ var AgentFlowNode = react.memo(function AgentFlowNode2({ id, data, selected }) {
     const agentLabel = data.label;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(NodeRunningIndicator, { nodeId: id }),
-      /* @__PURE__ */ jsxRuntime.jsx(WorkflowHandle, { type: "target", position: react$1.Position.Left, id: "left-in", colorClass: "!bg-gray-400 dark:!bg-gray-500" }),
-      /* @__PURE__ */ jsxRuntime.jsx(WorkflowHandle, { type: "target", position: react$1.Position.Top, id: "top-in", colorClass: "!bg-gray-400 dark:!bg-gray-500" }),
+      /* @__PURE__ */ jsxRuntime.jsx(WorkflowHandle, { type: "target", position: react$1.Position.Left, id: "left-in", colorClass: "!bg-slate-400 dark:!bg-slate-500" }),
+      /* @__PURE__ */ jsxRuntime.jsx(WorkflowHandle, { type: "target", position: react$1.Position.Top, id: "top-in", colorClass: "!bg-slate-400 dark:!bg-slate-500" }),
       /* @__PURE__ */ jsxRuntime.jsx(NodeCard, { variant: "error", nodeType: "agent", width: "w-[320px]", children: /* @__PURE__ */ jsxRuntime.jsx(
         NodeCardHeader,
         {
@@ -2085,41 +2087,41 @@ var AgentFlowNode = react.memo(function AgentFlowNode2({ id, data, selected }) {
   const frameworkMeta = getFrameworkMeta(data.agent.framework);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(NodeRunningIndicator, { nodeId: id }),
-    /* @__PURE__ */ jsxRuntime.jsx(WorkflowHandle, { type: "target", position: react$1.Position.Left, id: "left-in", colorClass: "!bg-gray-400 dark:!bg-gray-500" }),
-    /* @__PURE__ */ jsxRuntime.jsx(WorkflowHandle, { type: "target", position: react$1.Position.Top, id: "top-in", colorClass: "!bg-gray-400 dark:!bg-gray-500" }),
+    /* @__PURE__ */ jsxRuntime.jsx(WorkflowHandle, { type: "target", position: react$1.Position.Left, id: "left-in", colorClass: "!bg-slate-400 dark:!bg-slate-500" }),
+    /* @__PURE__ */ jsxRuntime.jsx(WorkflowHandle, { type: "target", position: react$1.Position.Top, id: "top-in", colorClass: "!bg-slate-400 dark:!bg-slate-500" }),
     /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => data.onSelect(agentId), className: "w-full text-left", children: /* @__PURE__ */ jsxRuntime.jsxs(NodeCard, { compact: isCompact, selected, nodeType: "agent", width: "w-[320px]", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", children: [
-          data.agent.avatar ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: data.agent.avatar, alt: data.agent.name, className: "h-11 w-11 rounded-full bg-white shadow-sm ring-1 ring-gray-200/50 dark:bg-gray-800 dark:ring-white/10" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500/25 to-purple-500/25 ring-1 ring-indigo-500/30", children: /* @__PURE__ */ jsxRuntime.jsx(outline.CpuChipIcon, { className: "h-6 w-6 text-indigo-500 dark:text-indigo-300" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-indigo-500 ring-2 ring-white dark:ring-gray-900", children: /* @__PURE__ */ jsxRuntime.jsx(outline.CpuChipIcon, { className: "h-2.5 w-2.5 text-white" }) })
+          data.agent.avatar ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: data.agent.avatar, alt: data.agent.name, className: "h-11 w-11 rounded-full bg-white shadow-sm ring-1 ring-slate-200/50 dark:bg-slate-800 dark:ring-white/10" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500/25 to-purple-500/25 ring-1 ring-indigo-500/30", children: /* @__PURE__ */ jsxRuntime.jsx(outline.CpuChipIcon, { className: "h-6 w-6 text-indigo-500 dark:text-indigo-300" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-indigo-500 ring-2 ring-white dark:ring-slate-900", children: /* @__PURE__ */ jsxRuntime.jsx(outline.CpuChipIcon, { className: "h-2.5 w-2.5 text-white" }) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "truncate text-sm font-semibold text-gray-900 dark:text-white", children: data.agent.name }),
-          !isCompact && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs text-gray-500 dark:text-gray-400", children: data.agent.role })
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "truncate text-sm font-semibold text-slate-900 dark:text-white", children: data.agent.name }),
+          !isCompact && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs text-slate-500 dark:text-slate-400", children: data.agent.role })
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(NodeCardMeta, { compact: isCompact, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Badge, { color: "indigo", size: "xs", children: "Agent" }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: "indigo", size: "xs", children: "Agent" }),
         (() => {
           const tier = chunk72SWXOD5_js.getAgentTier(Number(data.agent.elo ?? 0));
-          return /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Badge, { color: "zinc", size: "xs", className: tier.pillColor, children: tier.key });
+          return /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: "zinc", size: "xs", className: tier.pillColor, children: tier.key });
         })(),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Badge, { color: "zinc", size: "xs", className: frameworkMeta.badgeColor, icon: /* @__PURE__ */ jsxRuntime.jsx(frameworkMeta.IconComponent, { className: "h-3 w-3" }), children: frameworkMeta.label }),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Badge, { color: "blue", size: "xs", children: data.agent.modelId }),
-        /* @__PURE__ */ jsxRuntime.jsxs(chunkBHOT22QL_js.Badge, { color: "zinc", size: "xs", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: "zinc", size: "xs", className: frameworkMeta.badgeColor, icon: /* @__PURE__ */ jsxRuntime.jsx(frameworkMeta.IconComponent, { className: "h-3 w-3" }), children: frameworkMeta.label }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: "blue", size: "xs", children: data.agent.modelId }),
+        /* @__PURE__ */ jsxRuntime.jsxs(chunkMXQ2EYG2_js.Badge, { color: "zinc", size: "xs", children: [
           "T: ",
           data.agent.temperature
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(chunkBHOT22QL_js.Badge, { color: "zinc", size: "xs", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(chunkMXQ2EYG2_js.Badge, { color: "zinc", size: "xs", children: [
           "v",
           data.agent.activePromptVersion
         ] }),
         data.agentTools && data.agentTools.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-1 border-t border-gray-200/20 pt-1 dark:border-white/5", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-1 border-t border-slate-200/20 pt-1 dark:border-white/5", children: [
             /* @__PURE__ */ jsxRuntime.jsx(outline.CommandLineIcon, { className: "h-3 w-3 shrink-0 text-amber-500 dark:text-amber-400" }),
             data.agentTools.slice(0, 3).map((tool) => /* @__PURE__ */ jsxRuntime.jsx(
-              chunkBHOT22QL_js.Badge,
+              chunkMXQ2EYG2_js.Badge,
               {
                 color: tool.enabled ? "amber" : "zinc",
                 size: "xs",
@@ -2128,7 +2130,7 @@ var AgentFlowNode = react.memo(function AgentFlowNode2({ id, data, selected }) {
               },
               tool.id
             )),
-            data.agentTools.length > 3 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[9px] text-gray-400 dark:text-gray-500", children: [
+            data.agentTools.length > 3 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[9px] text-slate-400 dark:text-slate-500", children: [
               "+",
               data.agentTools.length - 3
             ] })
@@ -2216,7 +2218,7 @@ var AgentToolFlowNode = react.memo(function AgentToolFlowNode2({ id, data, selec
               event.stopPropagation();
             },
             children: /* @__PURE__ */ jsxRuntime.jsx(
-              chunk5ETT54QS_js.ToggleSwitch,
+              chunkFZUV7GNB_js.ToggleSwitch,
               {
                 checked: Boolean(agentTool.enabled),
                 onChange: () => data.onToggle?.(agentTool),
@@ -2229,9 +2231,9 @@ var AgentToolFlowNode = react.memo(function AgentToolFlowNode2({ id, data, selec
         )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(NodeCardMeta, { compact: isCompact, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Badge, { color: "amber", size: "xs", children: t("agentToolNode") }),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Badge, { color: "zinc", size: "xs", className: pill, children: category }),
-        agentTool.parameters && agentTool.parameters.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(chunkBHOT22QL_js.Badge, { color: "zinc", size: "xs", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: "amber", size: "xs", children: t("agentToolNode") }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: "zinc", size: "xs", className: pill, children: category }),
+        agentTool.parameters && agentTool.parameters.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(chunkMXQ2EYG2_js.Badge, { color: "zinc", size: "xs", children: [
           agentTool.parameters.length,
           " params"
         ] }),
@@ -2299,7 +2301,7 @@ var ToolFlowNode = react.memo(function ToolFlowNode2({ id, data, selected }) {
   const categoryPill = CATEGORY_PILL_COLORS[categoryKey] ?? CATEGORY_PILL_COLORS.external;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(NodeRunningIndicator, { nodeId: id }),
-    /* @__PURE__ */ jsxRuntime.jsx(WorkflowHandle, { type: "target", position: react$1.Position.Left, id: "left-in", colorClass: "!bg-gray-400 dark:!bg-gray-500" }),
+    /* @__PURE__ */ jsxRuntime.jsx(WorkflowHandle, { type: "target", position: react$1.Position.Left, id: "left-in", colorClass: "!bg-slate-400 dark:!bg-slate-500" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -2311,8 +2313,8 @@ var ToolFlowNode = react.memo(function ToolFlowNode2({ id, data, selected }) {
             /* @__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 ${gradient} shadow-lg`, children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { 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: tool.name }),
-                !isCompact && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 line-clamp-1 text-xs text-gray-500 dark:text-gray-400", children: String(tool.description ?? "") })
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: tool.name }),
+                !isCompact && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 line-clamp-1 text-xs text-slate-500 dark:text-slate-400", children: String(tool.description ?? "") })
               ] })
             ] }),
             onToggle && /* @__PURE__ */ jsxRuntime.jsx(
@@ -2324,7 +2326,7 @@ var ToolFlowNode = react.memo(function ToolFlowNode2({ id, data, selected }) {
                   event.preventDefault();
                 },
                 children: /* @__PURE__ */ jsxRuntime.jsx(
-                  chunk5ETT54QS_js.ToggleSwitch,
+                  chunkFZUV7GNB_js.ToggleSwitch,
                   {
                     checked: Boolean(tool.enabled),
                     onChange: () => onToggle(tool),
@@ -2338,9 +2340,9 @@ var ToolFlowNode = react.memo(function ToolFlowNode2({ id, data, selected }) {
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(NodeCardMeta, { compact: isCompact, children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Badge, { color: "teal", size: "xs", children: t("nodeType") }),
-              /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Badge, { color: "zinc", size: "xs", className: categoryPill, children: tool.category }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: "teal", size: "xs", children: t("nodeType") }),
+              /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: "zinc", size: "xs", className: categoryPill, children: tool.category }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: [
                 String(tool.timeoutMs ?? ""),
                 "ms"
               ] })
@@ -2390,18 +2392,18 @@ var RuleFlowNode = react.memo(function RuleFlowNode2({ id, data, selected }) {
               /* @__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-violet-400 to-purple-500 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(outline.ScaleIcon, { 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: ruleLabel || t("ruleEngine") }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400", children: t("ruleEngineDescription") })
+                  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: ruleLabel || t("ruleEngine") }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs text-slate-500 dark:text-slate-400", children: t("ruleEngineDescription") })
                 ] })
               ] }),
               !isCompact && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center justify-between", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Badge, { color: "violet", size: "xs", children: t("ruleEngine") }),
-                  contextVariableCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: "violet", size: "xs", children: t("ruleEngine") }),
+                  contextVariableCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: [
                     contextVariableCount,
                     " vars"
                   ] }),
-                  ruleConfig.outputVariable && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
+                  ruleConfig.outputVariable && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: [
                     "\u2192 ",
                     ruleConfig.outputVariable
                   ] })
@@ -2434,7 +2436,7 @@ var RuleFlowNode = react.memo(function RuleFlowNode2({ id, data, selected }) {
       /* @__PURE__ */ jsxRuntime.jsx(NodeCard, { variant: "error", nodeType: "rule", 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-amber-400 to-orange-500 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(outline.ExclamationTriangleIcon, { 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: ruleLabel || t("nodeType") }),
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: ruleLabel || t("nodeType") }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs text-amber-600 dark:text-amber-400", children: t("ruleNotFound") })
         ] })
       ] }) }),
@@ -2463,8 +2465,8 @@ var RuleFlowNode = react.memo(function RuleFlowNode2({ id, data, selected }) {
             /* @__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 ${gradient} shadow-lg`, children: /* @__PURE__ */ jsxRuntime.jsx(outline.AdjustmentsHorizontalIcon, { 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: rule.name }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs font-medium text-gray-600 dark:text-gray-300", children: adjustmentDisplay })
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: rule.name }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs font-medium text-slate-600 dark:text-slate-300", children: adjustmentDisplay })
               ] })
             ] }),
             onToggle && /* @__PURE__ */ jsxRuntime.jsx(
@@ -2476,7 +2478,7 @@ var RuleFlowNode = react.memo(function RuleFlowNode2({ id, data, selected }) {
                   event.preventDefault();
                 },
                 children: /* @__PURE__ */ jsxRuntime.jsx(
-                  chunk5ETT54QS_js.ToggleSwitch,
+                  chunkFZUV7GNB_js.ToggleSwitch,
                   {
                     checked: Boolean(rule.enabled),
                     onChange: () => onToggle(rule),
@@ -2490,13 +2492,13 @@ var RuleFlowNode = react.memo(function RuleFlowNode2({ id, data, selected }) {
           ] }),
           !isCompact && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center justify-between", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Badge, { color: "violet", size: "xs", children: t("nodeType") }),
-              /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Badge, { color: "zinc", size: "xs", className: typePill, children: adjustmentType }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: "violet", size: "xs", children: t("nodeType") }),
+              /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: "zinc", size: "xs", className: typePill, children: adjustmentType }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: [
                 "P",
                 String(rule.priority ?? "")
               ] }),
-              Array.isArray(rule.condition?.categories) && rule.condition.categories.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
+              Array.isArray(rule.condition?.categories) && rule.condition.categories.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: [
                 rule.condition.categories.length,
                 " categories"
               ] })
@@ -2563,20 +2565,20 @@ var EntityFlowNode = react.memo(function EntityFlowNode2({ id, data, selected })
           /* @__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 ${gradient} shadow-lg`, children: /* @__PURE__ */ jsxRuntime.jsx(EntityIcon, { 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.jsx("p", { className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400", children: data.entity?.label ?? config.entityMasterId })
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: label }),
+              !isCompact && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs text-slate-500 dark:text-slate-400", children: data.entity?.label ?? config.entityMasterId })
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(NodeCardMeta, { compact: isCompact, children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Badge, { color: "zinc", size: "xs", className: badgeColor, children: t("entityNodeType") }),
-              /* @__PURE__ */ jsxRuntime.jsxs(chunkBHOT22QL_js.Badge, { color: "zinc", size: "xs", className: badgeColor, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: "zinc", size: "xs", className: badgeColor, children: t("entityNodeType") }),
+              /* @__PURE__ */ jsxRuntime.jsxs(chunkMXQ2EYG2_js.Badge, { color: "zinc", size: "xs", className: badgeColor, children: [
                 fieldCount,
                 " ",
                 t("entityFields")
               ] }),
-              config.limit > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: t("entityLimit", { count: config.limit }) }),
-              filterCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
+              config.limit > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: t("entityLimit", { count: config.limit }) }),
+              filterCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: [
                 filterCount,
                 " ",
                 t("entityFilters")
@@ -2731,8 +2733,8 @@ var IfElseFlowNode = react.memo(function IfElseFlowNode2({ id, data, selected })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(NodeCardDeleteAction, { nodeId: id, onDelete })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute -right-12 top-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(chunk5ETT54QS_js.StatusBadge, { status: "success", label: t("ifBranchLabel"), size: "sm" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute bottom-[-1.9rem] left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(chunk5ETT54QS_js.StatusBadge, { status: "error", label: t("elseBranchLabel"), size: "sm" }) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute -right-12 top-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(chunkFZUV7GNB_js.StatusBadge, { status: "success", label: t("ifBranchLabel"), size: "sm" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute bottom-[-1.9rem] left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(chunkFZUV7GNB_js.StatusBadge, { status: "error", label: t("elseBranchLabel"), size: "sm" }) })
         ]
       }
     ),
@@ -3476,7 +3478,7 @@ var DatasourceFlowNode = react.memo(function DatasourceFlowNode2({ id, data, sel
             event.preventDefault();
           },
           children: /* @__PURE__ */ jsxRuntime.jsx(
-            chunk5ETT54QS_js.ToggleSwitch,
+            chunkFZUV7GNB_js.ToggleSwitch,
             {
               checked: true,
               onChange: () => {
@@ -3492,8 +3494,8 @@ var DatasourceFlowNode = react.memo(function DatasourceFlowNode2({ id, data, sel
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(NodeCardMeta, { compact: isCompact, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-        config.dialect && /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Badge, { color: "cyan", size: "xs", children: config.dialect }),
-        readOnly && /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Badge, { color: "zinc", size: "xs", children: "sample" }),
+        config.dialect && /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: "cyan", size: "xs", children: config.dialect }),
+        readOnly && /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: "zinc", size: "xs", children: "sample" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
           columnCount > 0 ? `${columnCount} cols` : null,
           filterCount > 0 ? `${filterCount} filters` : null,
@@ -3617,21 +3619,21 @@ var GroupFlowNode = react.memo(function GroupFlowNode2({ id, data, selected }) {
         /* @__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 ${colorScheme.header} shadow-lg`, children: /* @__PURE__ */ jsxRuntime.jsx(outline.RectangleGroupIcon, { 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 }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 truncate text-xs text-gray-500 dark:text-gray-400", children: config.description || translations("groupNodeDescription") })
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: label }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 truncate text-xs text-slate-500 dark:text-slate-400", children: config.description || translations("groupNodeDescription") })
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Badge, { color: "zinc", size: "xs", className: colorScheme.text, children: translations("groupNode") }),
+          /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Badge, { color: "zinc", size: "xs", className: colorScheme.text, children: translations("groupNode") }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 type: "button",
                 onClick: handleToggleExpand,
-                className: "nodrag nopan rounded-lg p-1 opacity-0 transition hover:bg-gray-100 group-hover:opacity-100 dark:hover:bg-white/10",
+                className: "nodrag nopan rounded-lg p-1 opacity-0 transition hover:bg-slate-100 group-hover:opacity-100 dark:hover:bg-white/10",
                 title: translations("expandGroup"),
-                children: /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronDownIcon, { className: "h-3.5 w-3.5 text-gray-500 dark:text-gray-400" })
+                children: /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronDownIcon, { className: "h-3.5 w-3.5 text-slate-500 dark:text-slate-400" })
               }
             ),
             onRemoveFromCanvas && /* @__PURE__ */ jsxRuntime.jsx(
@@ -3677,7 +3679,7 @@ var GroupFlowNode = react.memo(function GroupFlowNode2({ id, data, selected }) {
                 /* @__PURE__ */ jsxRuntime.jsx(outline.RectangleGroupIcon, { className: `h-4 w-4 ${colorScheme.iconText}` }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: `block truncate text-xs font-semibold ${colorScheme.text}`, children: label }),
-                  config.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-[10px] text-gray-500 dark:text-gray-400", children: config.description })
+                  config.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-[10px] text-slate-500 dark:text-slate-400", children: config.description })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
@@ -3783,7 +3785,7 @@ var SpeechTranscriberFlowNode = react.memo(function SpeechTranscriberFlowNode2({
               /* @__PURE__ */ jsxRuntime.jsx(NodeCardBadge, { tone: "speech_transcriber", children: "Whisper" }),
               /* @__PURE__ */ jsxRuntime.jsx(NodeCardBadge, { tone: "speech_transcriber", soft: true, children: model }),
               /* @__PURE__ */ jsxRuntime.jsx(NodeCardBadge, { tone: "speech_transcriber", soft: true, children: language }),
-              audioRefPreview && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: audioRefPreview })
+              audioRefPreview && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[10px] text-slate-400 dark:text-slate-500", children: audioRefPreview })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(NodeCardDeleteAction, { nodeId: id, onDelete })
           ] })
@@ -3840,9 +3842,9 @@ function ConfigFormActions({
   onSave,
   saveDisabled = false
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 border-t border-gray-200 pt-4 dark:border-gray-700", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Button, { type: "button", outline: true, onClick: onCancel, children: cancelLabel }),
-    /* @__PURE__ */ jsxRuntime.jsx(chunkBHOT22QL_js.Button, { type: "button", onClick: onSave, disabled: saveDisabled, children: saveLabel })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 border-t border-slate-200 pt-4 dark:border-slate-700", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { type: "button", outline: true, onClick: onCancel, children: cancelLabel }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { type: "button", onClick: onSave, disabled: saveDisabled, children: saveLabel })
   ] });
 }
 var COLOR_CLASSES = {
@@ -3919,7 +3921,7 @@ function VariableListEditor({
     }
   }, [handleAdd]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-2 block text-xs font-medium text-gray-500 dark:text-gray-400", children: label }),
+    label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-2 block text-xs font-medium text-slate-500 dark:text-slate-400", children: label }),
     variables.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 space-y-1", children: variables.map((variable, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -3932,17 +3934,19 @@ function VariableListEditor({
               type: "text",
               value: variable,
               onChange: (event) => handleEdit(index, event.target.value),
-              className: `flex-1 rounded-md border-0 bg-transparent px-1 py-0.5 text-sm font-medium text-gray-900 outline-none ${colors.input} focus:ring-1 dark:text-white`
+              className: `flex-1 rounded-md border-0 bg-transparent px-1 py-0.5 text-sm font-medium text-slate-900 outline-none ${colors.input} focus:ring-1 dark:text-white`
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-sm font-medium text-gray-900 dark:text-white", children: variable }),
+          ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-sm font-medium text-slate-900 dark:text-white", children: variable }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+            chunkMXQ2EYG2_js.IconButton,
             {
-              type: "button",
+              label: `Remove ${variable}`,
+              variant: "ghost",
+              size: "sm",
+              destructive: true,
               onClick: () => handleRemove(index),
-              className: "shrink-0 rounded p-0.5 text-gray-400 opacity-0 transition-all hover:bg-red-100 hover:text-red-500 group-hover:opacity-100 dark:hover:bg-red-500/10 dark:hover:text-red-400",
-              "aria-label": `Remove ${variable}`,
-              children: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "h-3.5 w-3.5" })
+              icon: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "h-3.5 w-3.5" }),
+              className: "shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
             }
           )
         ]
@@ -3959,7 +3963,7 @@ function VariableListEditor({
           onChange: (event) => setNewVariable(event.target.value),
           onKeyDown: handleKeyDown,
           placeholder,
-          className: "flex-1 rounded-lg border border-gray-200/50 bg-gray-50/50 px-3 py-1.5 text-sm text-gray-700 outline-none transition-colors placeholder:text-gray-400 focus:border-gray-300 focus:ring-1 focus:ring-gray-300/30 dark:border-white/10 dark:bg-white/5 dark:text-gray-300 dark:placeholder:text-gray-600"
+          className: "flex-1 rounded-lg border border-slate-200/50 bg-white/40 backdrop-blur-sm px-3 py-1.5 text-sm text-slate-700 outline-none transition-colors placeholder:text-slate-400 focus:border-slate-300 focus:ring-1 focus:ring-slate-300/30 dark:border-white/10 dark:bg-white/[0.04] dark:text-slate-300 dark:placeholder:text-slate-600"
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3976,7 +3980,7 @@ function VariableListEditor({
         }
       )
     ] }),
-    variables.length === 0 && !canAdd && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-400 dark:text-gray-500", children: "No variables defined" })
+    variables.length === 0 && !canAdd && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-slate-400 dark:text-slate-500", children: "No variables defined" })
   ] });
 }
 function StartNodeConfigForm({ config, onSave, onCancel }) {
@@ -3987,7 +3991,7 @@ function StartNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("inputVariablesHelp") }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs text-slate-500 dark:text-slate-400", children: t("inputVariablesHelp") }),
       /* @__PURE__ */ jsxRuntime.jsx(
         VariableListEditor,
         {
@@ -4019,7 +4023,7 @@ function EndNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("outputVariablesHelp") }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs text-slate-500 dark:text-slate-400", children: t("outputVariablesHelp") }),
       /* @__PURE__ */ jsxRuntime.jsx(
         VariableListEditor,
         {
@@ -4087,9 +4091,9 @@ function IfElseNodeConfigForm({ config, onSave, onCancel }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__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("label", { className: "text-sm font-medium text-slate-700 dark:text-slate-300", children: t("conditionsLabel") }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkBHOT22QL_js.Button,
+          chunkMXQ2EYG2_js.Button,
           {
             type: "button",
             onClick: handleAddCondition,
@@ -4097,10 +4101,10 @@ 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.jsx("div", { className: "space-y-3", children: conditions.map((condition, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 rounded-lg bg-white/40 backdrop-blur-sm p-3 dark:bg-white/[0.04]", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid flex-1 grid-cols-3 gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
-            chunk5ETT54QS_js.FormInput,
+            chunkFZUV7GNB_js.FormInput,
             {
               type: "text",
               label: t("variableLabel"),
@@ -4111,7 +4115,7 @@ function IfElseNodeConfigForm({ config, onSave, onCancel }) {
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
-            chunk5ETT54QS_js.FormSelect,
+            chunkFZUV7GNB_js.FormSelect,
             {
               label: t("operatorLabel"),
               value: condition.operator,
@@ -4121,7 +4125,7 @@ function IfElseNodeConfigForm({ config, onSave, onCancel }) {
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
-            chunk5ETT54QS_js.FormInput,
+            chunkFZUV7GNB_js.FormInput,
             {
               type: "text",
               label: t("valueLabel"),
@@ -4133,7 +4137,7 @@ function IfElseNodeConfigForm({ config, onSave, onCancel }) {
           ) })
         ] }),
         conditions.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-          chunkBHOT22QL_js.IconButton,
+          chunkMXQ2EYG2_js.IconButton,
           {
             onClick: () => handleRemoveCondition(index),
             icon: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, { className: "h-4 w-4" }),
@@ -4146,7 +4150,7 @@ function IfElseNodeConfigForm({ config, onSave, onCancel }) {
       ] }, index)) })
     ] }),
     /* @__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("logicalOperatorLabel") }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300", children: t("logicalOperatorLabel") }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -4160,7 +4164,7 @@ function IfElseNodeConfigForm({ config, onSave, onCancel }) {
               className: "text-indigo-600 focus:ring-indigo-400"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: "AND" })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-slate-700 dark:text-slate-300", children: "AND" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -4174,7 +4178,7 @@ function IfElseNodeConfigForm({ config, onSave, onCancel }) {
               className: "text-indigo-600 focus:ring-indigo-400"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: "OR" })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-slate-700 dark:text-slate-300", children: "OR" })
         ] })
       ] })
     ] }),
@@ -4264,26 +4268,26 @@ function CodeNodeConfigForm({ config, onSave, onCancel }) {
     }
     onSave(next);
   };
-  const labelClass = "mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300";
-  const inputClass = "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";
+  const labelClass = "mb-1 block text-xs font-medium text-slate-700 dark:text-slate-300";
+  const inputClass = "w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 placeholder-slate-400 outline-none focus:border-indigo-400 focus:ring-indigo-500/70 focus:ring-offset-1 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-500";
   const textareaClass = `${inputClass} font-mono text-xs`;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 rounded-lg bg-gray-100 p-1 text-sm dark:bg-gray-800", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 rounded-lg bg-white/40 dark:bg-white/[0.04] backdrop-blur-sm p-1 text-sm", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+        chunkFZUV7GNB_js.PickerTile,
         {
-          type: "button",
+          selected: mode === "operation",
           onClick: () => setMode("operation"),
-          className: `flex-1 rounded-md px-3 py-1.5 font-medium transition ${mode === "operation" ? "bg-white text-indigo-600 shadow-sm dark:bg-gray-900 dark:text-indigo-400" : "text-gray-600 dark:text-gray-400"}`,
+          className: `flex-1 rounded-md px-3 py-1.5 font-medium transition ${mode === "operation" ? "bg-white text-indigo-600 shadow-sm dark:bg-slate-900 dark:text-indigo-400" : "text-slate-600 dark:text-slate-400"}`,
           children: t("modeOperation", { _: "Operation" })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+        chunkFZUV7GNB_js.PickerTile,
         {
-          type: "button",
+          selected: mode === "scripted",
           onClick: () => setMode("scripted"),
-          className: `flex-1 rounded-md px-3 py-1.5 font-medium transition ${mode === "scripted" ? "bg-white text-indigo-600 shadow-sm dark:bg-gray-900 dark:text-indigo-400" : "text-gray-600 dark:text-gray-400"}`,
+          className: `flex-1 rounded-md px-3 py-1.5 font-medium transition ${mode === "scripted" ? "bg-white text-indigo-600 shadow-sm dark:bg-slate-900 dark:text-indigo-400" : "text-slate-600 dark:text-slate-400"}`,
           children: t("modeScripted", { _: "Scripted" })
         }
       )
@@ -4327,7 +4331,7 @@ function CodeNodeConfigForm({ config, onSave, onCancel }) {
             children: OPERATION_OPTIONS.map((o) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: o.value, children: o.label }, o.value))
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-[11px] text-gray-500 dark:text-gray-400", children: selectedOpHelp })
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-[11px] text-slate-500 dark:text-slate-400", children: selectedOpHelp })
       ] }),
       operation !== "return" && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("label", { className: labelClass, children: "from" }),
@@ -4341,7 +4345,7 @@ function CodeNodeConfigForm({ config, onSave, onCancel }) {
             className: inputClass
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-[11px] text-gray-500 dark:text-gray-400", children: "Dotted reference into the variable pool. Leave blank to read the sole incoming edge." })
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-[11px] text-slate-500 dark:text-slate-400", children: "Dotted reference into the variable pool. Leave blank to read the sole incoming edge." })
       ] }),
       (operation === "return" || operation === "merge") && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsxs("label", { className: labelClass, children: [
@@ -4371,7 +4375,7 @@ function CodeNodeConfigForm({ config, onSave, onCancel }) {
             className: inputClass
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-[11px] text-gray-500 dark:text-gray-400", children: "Comma-separated keys to project." })
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-[11px] text-slate-500 dark:text-slate-400", children: "Comma-separated keys to project." })
       ] }),
       operation === "regex_extract" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -4400,7 +4404,7 @@ function CodeNodeConfigForm({ config, onSave, onCancel }) {
                 className: inputClass
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-[11px] text-gray-500 dark:text-gray-400", children: "i, m, s, x, U, R (g is implicit)." })
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-[11px] text-slate-500 dark:text-slate-400", children: "i, m, s, x, U, R (g is implicit)." })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("label", { className: labelClass, children: "group" }),
@@ -4414,18 +4418,18 @@ function CodeNodeConfigForm({ config, onSave, onCancel }) {
                 className: inputClass
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-[11px] text-gray-500 dark:text-gray-400", children: "0 = whole match, 1 = first capture group (default)." })
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-[11px] text-slate-500 dark:text-slate-400", children: "0 = whole match, 1 = first capture group (default)." })
           ] })
         ] })
       ] }),
-      operation === "xml_titles" && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300", children: [
+      operation === "xml_titles" && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 text-sm text-slate-700 dark:text-slate-300", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
             type: "checkbox",
             checked: keepChannel,
             onChange: (event) => setKeepChannel(event.target.checked),
-            className: "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-600"
+            className: "h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500/70 focus:ring-offset-1 dark:border-slate-600"
           }
         ),
         "Keep channel/feed title (default: drop the first `<title>`)."
@@ -4442,7 +4446,7 @@ function CodeNodeConfigForm({ config, onSave, onCancel }) {
             className: inputClass
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-1 text-[11px] text-gray-500 dark:text-gray-400", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-1 text-[11px] text-slate-500 dark:text-slate-400", children: [
           "Defaults to `",
           operation === "regex_extract" ? "matches" : "titles",
           "` if left blank."
@@ -4505,7 +4509,7 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormSelect,
+      chunkFZUV7GNB_js.FormSelect,
       {
         label: t("methodLabel"),
         value: method,
@@ -4514,7 +4518,7 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         type: "text",
         label: t("urlLabel"),
@@ -4525,9 +4529,9 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
     ),
     /* @__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("headersLabel") }),
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-slate-700 dark:text-slate-300", children: t("headersLabel") }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkBHOT22QL_js.Button,
+          chunkMXQ2EYG2_js.Button,
           {
             type: "button",
             onClick: handleAddHeader,
@@ -4537,7 +4541,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(
-          chunk5ETT54QS_js.FormInput,
+          chunkFZUV7GNB_js.FormInput,
           {
             type: "text",
             value: entry.key,
@@ -4547,7 +4551,7 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunk5ETT54QS_js.FormInput,
+          chunkFZUV7GNB_js.FormInput,
           {
             type: "text",
             value: entry.value,
@@ -4557,7 +4561,7 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkBHOT22QL_js.IconButton,
+          chunkMXQ2EYG2_js.IconButton,
           {
             onClick: () => handleRemoveHeader(index),
             icon: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, { className: "h-4 w-4" }),
@@ -4569,7 +4573,7 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
       ] }, index)) })
     ] }),
     method !== "GET" && /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormTextarea,
+      chunkFZUV7GNB_js.FormTextarea,
       {
         label: t("bodyLabel"),
         value: body,
@@ -4580,7 +4584,7 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         type: "number",
         label: t("timeoutLabel"),
@@ -4592,7 +4596,7 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormSelect,
+      chunkFZUV7GNB_js.FormSelect,
       {
         label: t("parseResponseLabel"),
         value: parseResponse,
@@ -4637,7 +4641,7 @@ function S3WriteNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         type: "text",
         label: t("bucketLabel"),
@@ -4647,7 +4651,7 @@ function S3WriteNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         type: "text",
         label: t("keyLabel"),
@@ -4658,7 +4662,7 @@ function S3WriteNodeConfigForm({ config, onSave, onCancel }) {
     ),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-cyan-200/40 bg-cyan-50/40 px-3 py-2 text-[11px] text-cyan-900 dark:border-cyan-500/30 dark:bg-cyan-500/10 dark:text-cyan-100", children: t("sourceOrBodyHint") }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         type: "text",
         label: t("sourceUrlLabel"),
@@ -4668,7 +4672,7 @@ function S3WriteNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormTextarea,
+      chunkFZUV7GNB_js.FormTextarea,
       {
         label: t("bodyLabel"),
         value: body,
@@ -4679,7 +4683,7 @@ function S3WriteNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         type: "text",
         label: t("contentTypeLabel"),
@@ -4689,7 +4693,7 @@ function S3WriteNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         type: "number",
         label: t("timeoutLabel"),
@@ -4700,7 +4704,7 @@ function S3WriteNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         type: "text",
         label: t("connectionIdLabel"),
@@ -4729,7 +4733,7 @@ function TemplateTransformNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormTextarea,
+      chunkFZUV7GNB_js.FormTextarea,
       {
         label: t("templateLabel"),
         value: template,
@@ -4740,7 +4744,7 @@ function TemplateTransformNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         type: "text",
         label: t("outputVariableLabel"),
@@ -4769,7 +4773,7 @@ function IterationNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         type: "text",
         label: t("iteratorVariableLabel"),
@@ -4779,7 +4783,7 @@ function IterationNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         type: "number",
         label: t("maxIterationsLabel"),
@@ -4810,7 +4814,7 @@ function KnowledgeBaseNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         type: "text",
         label: t("sourceIdLabel"),
@@ -4820,7 +4824,7 @@ function KnowledgeBaseNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         type: "number",
         label: t("topKLabel"),
@@ -4831,7 +4835,7 @@ function KnowledgeBaseNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         type: "number",
         label: t("similarityThresholdLabel"),
@@ -4862,7 +4866,7 @@ function AnswerNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormTextarea,
+      chunkFZUV7GNB_js.FormTextarea,
       {
         label: t("outputTemplateLabel"),
         hint: t("outputTemplateHelp"),
@@ -4928,7 +4932,7 @@ function QuestionClassifierNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("modelIdLabel") }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300", children: t("modelIdLabel") }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -4936,12 +4940,12 @@ function QuestionClassifierNodeConfigForm({ config, onSave, onCancel }) {
           value: modelId,
           onChange: (event) => setModelId(event.target.value),
           placeholder: t("modelIdPlaceholder"),
-          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"
+          className: "w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 placeholder-slate-400 outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500/70 focus:ring-offset-1 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-500"
         }
       )
     ] }),
     /* @__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("instructionsLabel") }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300", children: t("instructionsLabel") }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "textarea",
         {
@@ -4949,34 +4953,27 @@ function QuestionClassifierNodeConfigForm({ config, onSave, onCancel }) {
           onChange: (event) => setInstructions(event.target.value),
           placeholder: t("instructionsPlaceholder"),
           rows: 4,
-          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"
+          className: "w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 placeholder-slate-400 outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500/70 focus:ring-offset-1 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-500"
         }
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__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("categoriesLabel") }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: handleAddCategory,
-            className: "text-sm text-indigo-600 hover:text-indigo-700 dark:text-indigo-400",
-            children: t("addCategory")
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-slate-700 dark:text-slate-300", children: t("categoriesLabel") }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { type: "button", plain: true, size: "sm", onClick: handleAddCategory, children: t("addCategory") })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: categories.map((category, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800/50", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: categories.map((category, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg bg-white/40 backdrop-blur-sm p-3 dark:bg-white/[0.04]", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: t("categoryIndex", { index: index + 1 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-slate-500 dark:text-slate-400", children: t("categoryIndex", { index: index + 1 }) }),
           categories.length > 2 && /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+            chunkMXQ2EYG2_js.IconButton,
             {
-              type: "button",
+              label: t("removeCategory"),
+              variant: "ghost",
+              size: "sm",
+              destructive: true,
               onClick: () => handleRemoveCategory(index),
-              className: "text-sm text-red-500 hover:text-red-600",
-              "aria-label": t("removeCategory"),
-              children: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, { className: "h-4 w-4" })
+              icon: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, { className: "h-4 w-4" })
             }
           )
         ] }),
@@ -4988,7 +4985,7 @@ function QuestionClassifierNodeConfigForm({ config, onSave, onCancel }) {
               value: category.name,
               onChange: (event) => handleCategoryChange(index, "name", event.target.value),
               placeholder: t("categoryNamePlaceholder"),
-              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"
+              className: "w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 placeholder-slate-400 outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500/70 focus:ring-offset-1 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-500"
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -4998,32 +4995,21 @@ function QuestionClassifierNodeConfigForm({ config, onSave, onCancel }) {
               value: category.description,
               onChange: (event) => handleCategoryChange(index, "description", event.target.value),
               placeholder: t("categoryDescriptionPlaceholder"),
-              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"
+              className: "w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 placeholder-slate-400 outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500/70 focus:ring-offset-1 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-500"
             }
           )
         ] })
       ] }, category.id)) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onCancel,
-          className: "rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800",
-          children: t("cancel")
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: handleSave,
-          className: "rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600",
-          children: t("save")
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ConfigFormActions,
+      {
+        cancelLabel: t("cancel"),
+        saveLabel: t("save"),
+        onCancel,
+        onSave: handleSave
+      }
+    )
   ] });
 }
 var PARAMETER_TYPES = ["string", "number", "boolean", "array"];
@@ -5058,7 +5044,7 @@ function ParameterExtractorNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("modelIdLabel") }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300", children: t("modelIdLabel") }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -5066,37 +5052,30 @@ function ParameterExtractorNodeConfigForm({ config, onSave, onCancel }) {
           value: modelId,
           onChange: (event) => setModelId(event.target.value),
           placeholder: t("modelIdPlaceholder"),
-          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"
+          className: "w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 placeholder-slate-400 outline-none focus:border-indigo-400 focus:ring-indigo-500/70 focus:ring-offset-1 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-500"
         }
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__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("parametersLabel") }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: handleAddParameter,
-            className: "text-sm text-indigo-600 hover:text-indigo-700 dark:text-indigo-400",
-            children: t("addParameter")
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-slate-700 dark:text-slate-300", children: t("parametersLabel") }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { type: "button", plain: true, size: "sm", onClick: handleAddParameter, children: t("addParameter") })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: parameters.map((parameter, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800/50", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: parameters.map((parameter, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg liquid-surface p-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 flex items-center justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+          chunkMXQ2EYG2_js.IconButton,
           {
-            type: "button",
+            label: t("removeParameter"),
+            variant: "ghost",
+            size: "sm",
+            destructive: true,
             onClick: () => handleRemoveParameter(index),
-            className: "text-sm text-red-500 hover:text-red-600",
-            "aria-label": t("removeParameter"),
-            children: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, { className: "h-4 w-4" })
+            icon: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, { className: "h-4 w-4" })
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-xs text-gray-500 dark:text-gray-400", children: t("parameterNameLabel") }),
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-xs text-slate-500 dark:text-slate-400", children: t("parameterNameLabel") }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
@@ -5104,25 +5083,25 @@ function ParameterExtractorNodeConfigForm({ config, onSave, onCancel }) {
                 value: parameter.name,
                 onChange: (event) => handleParameterChange(index, "name", event.target.value),
                 placeholder: t("parameterNamePlaceholder"),
-                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"
+                className: "w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 placeholder-slate-400 outline-none focus:border-indigo-400 focus:ring-indigo-500/70 focus:ring-offset-1 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-500"
               }
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-xs text-gray-500 dark:text-gray-400", children: t("parameterTypeLabel") }),
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-xs text-slate-500 dark:text-slate-400", children: t("parameterTypeLabel") }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "select",
               {
                 value: parameter.type,
                 onChange: (event) => handleParameterChange(index, "type", event.target.value),
-                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",
+                className: "w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 placeholder-slate-400 outline-none focus:border-indigo-400 focus:ring-indigo-500/70 focus:ring-offset-1 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-500",
                 children: PARAMETER_TYPES.map((parameterType) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: parameterType, children: parameterType }, parameterType))
               }
             )
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-xs text-gray-500 dark:text-gray-400", children: t("parameterDescriptionLabel") }),
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-xs text-slate-500 dark:text-slate-400", children: t("parameterDescriptionLabel") }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
@@ -5130,7 +5109,7 @@ function ParameterExtractorNodeConfigForm({ config, onSave, onCancel }) {
               value: parameter.description,
               onChange: (event) => handleParameterChange(index, "description", event.target.value),
               placeholder: t("parameterDescriptionPlaceholder"),
-              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"
+              className: "w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 placeholder-slate-400 outline-none focus:border-indigo-400 focus:ring-indigo-500/70 focus:ring-offset-1 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-500"
             }
           )
         ] }),
@@ -5141,33 +5120,22 @@ function ParameterExtractorNodeConfigForm({ config, onSave, onCancel }) {
               type: "checkbox",
               checked: parameter.required,
               onChange: (event) => handleParameterChange(index, "required", event.target.checked),
-              className: "rounded border-gray-300 text-indigo-600 focus:ring-indigo-400 dark:border-gray-600"
+              className: "rounded border-slate-300 text-indigo-600 focus:ring-indigo-500/70 focus:ring-offset-1 dark:border-slate-600"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: t("parameterRequiredLabel") })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-slate-700 dark:text-slate-300", children: t("parameterRequiredLabel") })
         ] }) })
       ] }, index)) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onCancel,
-          className: "rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800",
-          children: t("cancel")
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: handleSave,
-          className: "rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600",
-          children: t("save")
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ConfigFormActions,
+      {
+        cancelLabel: t("cancel"),
+        saveLabel: t("save"),
+        onCancel,
+        onSave: handleSave
+      }
+    )
   ] });
 }
 function VariableAssignerNodeConfigForm({ config, onSave, onCancel }) {
@@ -5198,21 +5166,13 @@ function VariableAssignerNodeConfigForm({ config, onSave, onCancel }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__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("assignmentsLabel") }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: handleAddAssignment,
-            className: "text-sm text-indigo-600 hover:text-indigo-700 dark:text-indigo-400",
-            children: t("addAssignment")
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-slate-700 dark:text-slate-300", children: t("assignmentsLabel") }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkMXQ2EYG2_js.Button, { type: "button", plain: true, size: "sm", onClick: handleAddAssignment, children: t("addAssignment") })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: assignments.map((assignment, 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.jsx("div", { className: "space-y-3", children: assignments.map((assignment, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 rounded-lg bg-white/40 backdrop-blur-sm p-3 dark:bg-white/[0.04]", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid flex-1 grid-cols-2 gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-xs text-gray-500 dark:text-gray-400", children: t("targetLabel") }),
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-xs text-slate-500 dark:text-slate-400", children: t("targetLabel") }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
@@ -5220,12 +5180,12 @@ function VariableAssignerNodeConfigForm({ config, onSave, onCancel }) {
                 value: assignment.target,
                 onChange: (event) => handleAssignmentChange(index, "target", event.target.value),
                 placeholder: t("targetPlaceholder"),
-                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"
+                className: "w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 placeholder-slate-400 outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500/70 focus:ring-offset-1 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-500"
               }
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-xs text-gray-500 dark:text-gray-400", children: t("sourceLabel") }),
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-xs text-slate-500 dark:text-slate-400", children: t("sourceLabel") }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
@@ -5233,43 +5193,34 @@ function VariableAssignerNodeConfigForm({ config, onSave, onCancel }) {
                 value: assignment.source,
                 onChange: (event) => handleAssignmentChange(index, "source", event.target.value),
                 placeholder: t("sourcePlaceholder"),
-                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"
+                className: "w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 placeholder-slate-400 outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500/70 focus:ring-offset-1 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-500"
               }
             )
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+          chunkMXQ2EYG2_js.IconButton,
           {
-            type: "button",
+            label: t("removeAssignment"),
+            variant: "ghost",
+            size: "sm",
+            destructive: true,
+            className: "mt-5",
             onClick: () => handleRemoveAssignment(index),
-            className: "mt-5 text-sm text-red-500 hover:text-red-600",
-            "aria-label": t("removeAssignment"),
-            children: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, { className: "h-4 w-4" })
+            icon: /* @__PURE__ */ jsxRuntime.jsx(outline.TrashIcon, { className: "h-4 w-4" })
           }
         )
       ] }, index)) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onCancel,
-          className: "rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800",
-          children: t("cancel")
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: handleSave,
-          className: "rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600",
-          children: t("save")
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ConfigFormActions,
+      {
+        cancelLabel: t("cancel"),
+        saveLabel: t("save"),
+        onCancel,
+        onSave: handleSave
+      }
+    )
   ] });
 }
 var AGGREGATION_MODES = ["array", "object", "concatenate"];
@@ -5296,7 +5247,7 @@ function VariableAggregatorNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         type: "text",
         label: t("outputVariableLabel"),
@@ -5306,7 +5257,7 @@ function VariableAggregatorNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormSelect,
+      chunkFZUV7GNB_js.FormSelect,
       {
         label: t("aggregationModeLabel"),
         value: aggregationMode,
@@ -5339,7 +5290,7 @@ function DocumentExtractorNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormSelect,
+      chunkFZUV7GNB_js.FormSelect,
       {
         label: t("extractionModeLabel"),
         value: extractionMode,
@@ -5348,7 +5299,7 @@ function DocumentExtractorNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         type: "text",
         label: t("outputVariableLabel"),
@@ -5403,19 +5354,19 @@ function ListOperatorNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("operationLabel") }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300", children: t("operationLabel") }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "select",
         {
           value: operation,
           onChange: (event) => setOperation(event.target.value),
-          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",
+          className: "w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 placeholder-slate-400 outline-none focus:border-indigo-400 focus:ring-indigo-500/70 focus:ring-offset-1 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-500",
           children: OPERATION_OPTIONS2.map((operationOption) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: operationOption, children: t(`operation_${operationOption}`) }, operationOption))
         }
       )
     ] }),
     /* @__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("inputVariableLabel") }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300", children: t("inputVariableLabel") }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -5423,12 +5374,12 @@ function ListOperatorNodeConfigForm({ config, onSave, onCancel }) {
           value: inputVariable,
           onChange: (event) => setInputVariable(event.target.value),
           placeholder: t("inputVariablePlaceholder"),
-          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"
+          className: "w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 placeholder-slate-400 outline-none focus:border-indigo-400 focus:ring-indigo-500/70 focus:ring-offset-1 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-500"
         }
       )
     ] }),
     /* @__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("label", { className: "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300", children: t("outputVariableLabel") }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -5436,12 +5387,12 @@ function ListOperatorNodeConfigForm({ config, onSave, onCancel }) {
           value: outputVariable,
           onChange: (event) => setOutputVariable(event.target.value),
           placeholder: t("outputVariablePlaceholder"),
-          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"
+          className: "w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 placeholder-slate-400 outline-none focus:border-indigo-400 focus:ring-indigo-500/70 focus:ring-offset-1 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-500"
         }
       )
     ] }),
     showConditionField && /* @__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("conditionLabel") }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300", children: t("conditionLabel") }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -5449,13 +5400,13 @@ function ListOperatorNodeConfigForm({ config, onSave, onCancel }) {
           value: condition,
           onChange: (event) => setCondition(event.target.value),
           placeholder: t("conditionPlaceholder"),
-          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"
+          className: "w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 placeholder-slate-400 outline-none focus:border-indigo-400 focus:ring-indigo-500/70 focus:ring-offset-1 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-500"
         }
       )
     ] }),
     showSortFields && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { 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("sortKeyLabel") }),
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300", children: t("sortKeyLabel") }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -5463,25 +5414,25 @@ function ListOperatorNodeConfigForm({ config, onSave, onCancel }) {
             value: sortKey,
             onChange: (event) => setSortKey(event.target.value),
             placeholder: t("sortKeyPlaceholder"),
-            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"
+            className: "w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 placeholder-slate-400 outline-none focus:border-indigo-400 focus:ring-indigo-500/70 focus:ring-offset-1 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-500"
           }
         )
       ] }),
       /* @__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("sortOrderLabel") }),
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300", children: t("sortOrderLabel") }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "select",
           {
             value: sortOrder,
             onChange: (event) => setSortOrder(event.target.value),
-            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",
+            className: "w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 placeholder-slate-400 outline-none focus:border-indigo-400 focus:ring-indigo-500/70 focus:ring-offset-1 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-500",
             children: SORT_ORDER_OPTIONS.map((order) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: order, children: t(`sortOrder_${order}`) }, order))
           }
         )
       ] })
     ] }),
     showLimitField && /* @__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("limitCountLabel") }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300", children: t("limitCountLabel") }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -5489,17 +5440,17 @@ function ListOperatorNodeConfigForm({ config, onSave, onCancel }) {
           value: limitCount,
           onChange: (event) => setLimitCount(Number(event.target.value)),
           min: 1,
-          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"
+          className: "w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 placeholder-slate-400 outline-none focus:border-indigo-400 focus:ring-indigo-500/70 focus:ring-offset-1 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-500"
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 pt-4 liquid-divider border-t", 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",
+          className: "rounded-lg border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-white/40 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-white/[0.04]",
           children: t("cancel")
         }
       ),
@@ -5525,7 +5476,7 @@ function IterationStartNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         type: "text",
         label: t("iteratorVariableLabel"),
@@ -5535,7 +5486,7 @@ function IterationStartNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         type: "text",
         label: t("itemVariableLabel"),
@@ -5545,7 +5496,7 @@ function IterationStartNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         type: "text",
         label: t("indexVariableLabel"),
@@ -5640,7 +5591,7 @@ function EntityNodeConfigForm({ config, entities = [], onSave, onCancel }) {
   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("entityTypeLabel") }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300", children: t("entityTypeLabel") }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex h-6 w-6 items-center justify-center rounded-md bg-gradient-to-br ${gradient}`, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-white font-bold", children: (entityDefinition?.label ?? config.entityMasterId ?? "?").charAt(0).toUpperCase() }) }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${badgeColor}`, children: entityDefinition?.label ?? config.entityMasterId ?? t("entityTypeLabel") })
@@ -5648,8 +5599,8 @@ function EntityNodeConfigForm({ config, entities = [], onSave, onCancel }) {
       !entityDefinition && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-xs text-amber-600 dark:text-amber-400", children: t("entityNotConfigured") })
     ] }),
     /* @__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("label", { className: "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300", children: t("outputVariableLabel") }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs text-slate-500 dark:text-slate-400", children: t("outputVariableHelp") }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -5657,13 +5608,13 @@ function EntityNodeConfigForm({ config, entities = [], onSave, onCancel }) {
           value: outputVariable,
           onChange: (event) => setOutputVariable(event.target.value),
           placeholder: `${(entityDefinition?.label ?? "entity").replace(/\s+/g, "")}Data`,
-          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"
+          className: "w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 placeholder-slate-400 outline-none focus:border-indigo-400 focus:ring-indigo-500/70 focus:ring-offset-1 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-500"
         }
       )
     ] }),
     /* @__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("label", { className: "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300", children: t("limitLabel") }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs text-slate-500 dark:text-slate-400", children: t("limitHelp") }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -5672,13 +5623,13 @@ function EntityNodeConfigForm({ config, entities = [], onSave, onCancel }) {
           onChange: (event) => setLimit(Math.max(1, Number.parseInt(event.target.value, 10) || 1)),
           min: 1,
           max: 1e3,
-          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"
+          className: "w-32 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 outline-none focus:border-indigo-400 focus:ring-indigo-500/70 focus:ring-offset-1 dark:border-slate-600 dark:bg-slate-800 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("fieldsLabel") }),
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-slate-700 dark:text-slate-300", children: t("fieldsLabel") }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -5690,15 +5641,15 @@ function EntityNodeConfigForm({ config, entities = [], onSave, onCancel }) {
         )
       ] }),
       selectedFields.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs text-amber-600 dark:text-amber-400", children: t("noFieldsSelected") }),
-      /* @__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: [
-        availableFields.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-2 py-2 text-xs text-gray-500 dark:text-gray-400", children: t("noFieldsSelected") }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-48 space-y-1 overflow-y-auto rounded-lg border border-slate-200 p-2 dark:border-slate-700", children: [
+        availableFields.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-2 py-2 text-xs text-slate-500 dark:text-slate-400", children: t("noFieldsSelected") }),
         availableFields.map((field) => {
           const isSelected = selectedFields.includes(field.name);
           const typeBadgeColor = FIELD_TYPE_BADGE_COLORS[field.type] ?? FIELD_TYPE_BADGE_COLORS.string;
           return /* @__PURE__ */ jsxRuntime.jsxs(
             "label",
             {
-              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"}`,
+              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-white/40 dark:hover:bg-white/[0.04]"}`,
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "input",
@@ -5706,10 +5657,10 @@ function EntityNodeConfigForm({ config, entities = [], onSave, onCancel }) {
                     type: "checkbox",
                     checked: isSelected,
                     onChange: () => handleToggleField(field.name),
-                    className: "h-3.5 w-3.5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-600"
+                    className: "h-3.5 w-3.5 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500/70 focus:ring-offset-1 dark:border-slate-600"
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-xs font-medium text-gray-900 dark:text-white", children: field.name }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-xs font-medium text-slate-900 dark:text-white", children: field.name }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: `rounded-full px-1.5 py-0.5 text-[9px] font-medium ${typeBadgeColor}`, children: field.type })
               ]
             },
@@ -5720,7 +5671,7 @@ function EntityNodeConfigForm({ config, entities = [], onSave, onCancel }) {
     ] }),
     /* @__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") }),
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-slate-700 dark:text-slate-300", children: t("filtersLabel") }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
@@ -5734,7 +5685,7 @@ function EntityNodeConfigForm({ config, entities = [], onSave, onCancel }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("filtersHelp") }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs text-slate-500 dark:text-slate-400", children: t("filtersHelp") }),
       filterEntries.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: filterEntries.map(([variableName, fieldName], index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
@@ -5743,16 +5694,16 @@ function EntityNodeConfigForm({ config, entities = [], onSave, onCancel }) {
             value: variableName,
             onChange: (event) => handleUpdateFilterVariable(variableName, event.target.value),
             placeholder: t("variableName"),
-            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 rounded-lg border border-slate-300 bg-white px-2 py-1.5 text-xs text-slate-900 placeholder-slate-400 outline-none focus:border-indigo-400 focus:ring-indigo-500/70 focus:ring-offset-1 dark:border-slate-600 dark:bg-slate-800 dark:text-white dark:placeholder-slate-500"
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400", children: "\u2192" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-slate-400", children: "\u2192" }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "select",
           {
             value: fieldName,
             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-lg border border-slate-300 bg-white px-2 py-1.5 text-xs text-slate-900 outline-none focus:border-indigo-400 focus:ring-indigo-500/70 focus:ring-offset-1 dark:border-slate-600 dark:bg-slate-800 dark:text-white",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: t("fieldName") }),
               availableFields.map((field) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: field.name, children: field.name }, field.name))
@@ -5770,13 +5721,13 @@ function EntityNodeConfigForm({ config, entities = [], onSave, onCancel }) {
         )
       ] }, 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 liquid-divider border-t pt-4", 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",
+          className: "rounded-lg border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-white/40 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-white/[0.04]",
           children: t("cancel")
         }
       ),
@@ -5817,7 +5768,7 @@ function GroupNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         type: "text",
         label: translations("labelField"),
@@ -5827,7 +5778,7 @@ function GroupNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormTextarea,
+      chunkFZUV7GNB_js.FormTextarea,
       {
         label: translations("descriptionField"),
         value: description,
@@ -5837,7 +5788,7 @@ function GroupNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300", children: translations("colorField") }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300", children: translations("colorField") }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: GROUP_COLOR_OPTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -5872,20 +5823,20 @@ function RuleNodeConfigForm({ config, onSave, onCancel, availableRules }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300", children: t("ruleIdLabel", { _: "Rule" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-xs font-medium text-slate-700 dark:text-slate-300", children: t("ruleIdLabel", { _: "Rule" }) }),
       availableRules && availableRules.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
         "select",
         {
           value: ruleId,
           onChange: (event) => setRuleId(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",
+          className: "w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500/70 focus:ring-offset-1 dark:border-slate-600 dark:bg-slate-800 dark:text-white",
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: t("rulePickPrompt", { _: "Choose a rule\u2026" }) }),
             availableRules.map((rule) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: rule.ruleId, children: rule.name ? `${rule.name} (${rule.ruleId})` : rule.ruleId }, rule.ruleId))
           ]
         }
       ) : /* @__PURE__ */ jsxRuntime.jsx(
-        chunk5ETT54QS_js.FormInput,
+        chunkFZUV7GNB_js.FormInput,
         {
           type: "text",
           value: ruleId,
@@ -5893,7 +5844,7 @@ function RuleNodeConfigForm({ config, onSave, onCancel, availableRules }) {
           placeholder: "e.g. peak_hours"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-1 text-[11px] text-gray-500 dark:text-gray-400", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-1 text-[11px] text-slate-500 dark:text-slate-400", children: [
         "References an ",
         /* @__PURE__ */ jsxRuntime.jsx("code", { children: "astrlabe.agent_rules.rule_id" }),
         " row in this organization."
@@ -5901,7 +5852,7 @@ function RuleNodeConfigForm({ config, onSave, onCancel, availableRules }) {
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunk5ETT54QS_js.FormInput,
+        chunkFZUV7GNB_js.FormInput,
         {
           type: "number",
           label: t("priorityLabel", { _: "Priority" }),
@@ -5910,14 +5861,14 @@ function RuleNodeConfigForm({ config, onSave, onCancel, availableRules }) {
           min: 0
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-end gap-2 pb-2 text-sm text-gray-700 dark:text-gray-300", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-end gap-2 pb-2 text-sm text-slate-700 dark:text-slate-300", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
             type: "checkbox",
             checked: enabled,
             onChange: (event) => setEnabled(event.target.checked),
-            className: "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-600"
+            className: "h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500/70 focus:ring-offset-1 dark:border-slate-600"
           }
         ),
         t("enabledLabel", { _: "Enabled" })
@@ -5973,7 +5924,7 @@ function AgentNodeConfigForm({
   }));
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     agentOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormSelect,
+      chunkFZUV7GNB_js.FormSelect,
       {
         label: t("agentLabel", { _: "Agent" }),
         value: agentId,
@@ -5981,7 +5932,7 @@ function AgentNodeConfigForm({
         options: [{ value: "", label: t("agentPickPrompt", { _: "Choose an agent\u2026" }) }, ...agentOptions]
       }
     ) : /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         type: "text",
         label: t("agentIdLabel", { _: "Agent ID" }),
@@ -5991,7 +5942,7 @@ function AgentNodeConfigForm({
       }
     ),
     connOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormSelect,
+      chunkFZUV7GNB_js.FormSelect,
       {
         label: t("connectionLabel", { _: "Model provider connection" }),
         value: connectionId,
@@ -5999,7 +5950,7 @@ function AgentNodeConfigForm({
         options: [{ value: "", label: t("connectionPickPrompt", { _: "Inline model (no connection)" }) }, ...connOptions]
       }
     ) : /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         type: "text",
         label: t("connectionIdLabel", { _: "Connection ID" }),
@@ -6009,7 +5960,7 @@ function AgentNodeConfigForm({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         type: "text",
         label: t("modelIdLabel", { _: "Model override (optional)" }),
@@ -6019,7 +5970,7 @@ function AgentNodeConfigForm({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormTextarea,
+      chunkFZUV7GNB_js.FormTextarea,
       {
         label: t("systemPromptLabel", { _: "System prompt" }),
         value: systemPrompt,
@@ -6029,7 +5980,7 @@ function AgentNodeConfigForm({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormTextarea,
+      chunkFZUV7GNB_js.FormTextarea,
       {
         label: t("userPromptLabel", { _: "User prompt" }),
         value: userPrompt,
@@ -6040,7 +5991,7 @@ function AgentNodeConfigForm({
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunk5ETT54QS_js.FormInput,
+        chunkFZUV7GNB_js.FormInput,
         {
           type: "number",
           label: t("maxTokensLabel", { _: "Max output tokens" }),
@@ -6052,7 +6003,7 @@ function AgentNodeConfigForm({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunk5ETT54QS_js.FormInput,
+        chunkFZUV7GNB_js.FormInput,
         {
           type: "number",
           label: t("temperatureLabel", { _: "Temperature" }),
@@ -6089,7 +6040,7 @@ function AudioInputNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         type: "text",
         label: t("urlLabel"),
@@ -6099,7 +6050,7 @@ function AudioInputNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormSelect,
+      chunkFZUV7GNB_js.FormSelect,
       {
         label: t("formatLabel"),
         value: format,
@@ -6148,7 +6099,7 @@ function SpeechTranscriberNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         type: "text",
         label: t("audioUrlLabel"),
@@ -6158,7 +6109,7 @@ function SpeechTranscriberNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         type: "text",
         label: t("modelLabel"),
@@ -6168,7 +6119,7 @@ function SpeechTranscriberNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         type: "text",
         label: t("languageLabel"),
@@ -6178,7 +6129,7 @@ function SpeechTranscriberNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormTextarea,
+      chunkFZUV7GNB_js.FormTextarea,
       {
         label: t("promptLabel"),
         value: prompt,
@@ -6188,7 +6139,7 @@ function SpeechTranscriberNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormSelect,
+      chunkFZUV7GNB_js.FormSelect,
       {
         label: t("responseFormatLabel"),
         value: responseFormat,
@@ -6197,7 +6148,7 @@ function SpeechTranscriberNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         type: "text",
         label: t("endpointLabel"),
@@ -6207,7 +6158,7 @@ function SpeechTranscriberNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5ETT54QS_js.FormInput,
+      chunkFZUV7GNB_js.FormInput,
       {
         type: "number",
         label: t("timeoutLabel"),
@@ -6253,14 +6204,14 @@ function DashboardOutputNodeConfigForm({ config, onSave, onCancel }) {
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: t("description") }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: t("description") }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
           onClick: () => setMode("reference"),
-          className: `flex-1 rounded-lg border px-3 py-2 text-xs font-medium transition-colors ${mode === "reference" ? "border-fuchsia-500 bg-fuchsia-500/10 text-fuchsia-700 dark:text-fuchsia-300" : "border-gray-200 bg-white text-gray-600 hover:border-fuchsia-300 dark:border-white/10 dark:bg-white/5 dark:text-gray-300"}`,
+          className: `flex-1 rounded-lg border px-3 py-2 text-xs font-medium transition-colors ${mode === "reference" ? "border-fuchsia-500 bg-fuchsia-500/10 text-fuchsia-700 dark:text-fuchsia-300" : "border-slate-200 bg-white text-slate-600 hover:border-fuchsia-300 dark:border-white/10 dark:bg-white/5 dark:text-slate-300"}`,
           children: t("modeReference")
         }
       ),
@@ -6269,13 +6220,13 @@ function DashboardOutputNodeConfigForm({ config, onSave, onCancel }) {
         {
           type: "button",
           onClick: () => setMode("inline"),
-          className: `flex-1 rounded-lg border px-3 py-2 text-xs font-medium transition-colors ${mode === "inline" ? "border-fuchsia-500 bg-fuchsia-500/10 text-fuchsia-700 dark:text-fuchsia-300" : "border-gray-200 bg-white text-gray-600 hover:border-fuchsia-300 dark:border-white/10 dark:bg-white/5 dark:text-gray-300"}`,
+          className: `flex-1 rounded-lg border px-3 py-2 text-xs font-medium transition-colors ${mode === "inline" ? "border-fuchsia-500 bg-fuchsia-500/10 text-fuchsia-700 dark:text-fuchsia-300" : "border-slate-200 bg-white text-slate-600 hover:border-fuchsia-300 dark:border-white/10 dark:bg-white/5 dark:text-slate-300"}`,
           children: t("modeInline")
         }
       )
     ] }),
     mode === "reference" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300", children: t("referenceLabel") }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-xs font-medium text-slate-700 dark:text-slate-300", children: t("referenceLabel") }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -6283,12 +6234,12 @@ function DashboardOutputNodeConfigForm({ config, onSave, onCancel }) {
           value: dashboardFrom,
           onChange: (event) => setDashboardFrom(event.target.value),
           placeholder: t("referencePlaceholder"),
-          className: "w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-mono text-gray-900 placeholder:text-gray-400 focus:border-fuchsia-500 focus:outline-none focus:ring-1 focus:ring-fuchsia-500 dark:border-white/10 dark:bg-white/5 dark:text-white"
+          className: "w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-mono text-slate-900 placeholder:text-slate-400 focus:border-fuchsia-500 focus:outline-none focus:ring-1 focus:ring-fuchsia-500 dark:border-white/10 dark:bg-white/5 dark:text-white"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-[10px] text-gray-500 dark:text-gray-400", children: t("referenceHelp") })
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-[10px] text-slate-500 dark:text-slate-400", children: t("referenceHelp") })
     ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300", children: t("inlineLabel") }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mb-1 block text-xs font-medium text-slate-700 dark:text-slate-300", children: t("inlineLabel") }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "textarea",
         {
@@ -6296,14 +6247,14 @@ function DashboardOutputNodeConfigForm({ config, onSave, onCancel }) {
           onChange: (event) => setInlineJson(event.target.value),
           placeholder: '{\\n  "kpis": [],\\n  "charts": [],\\n  "tables": []\\n}',
           rows: 12,
-          className: "w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-xs font-mono text-gray-900 placeholder:text-gray-400 focus:border-fuchsia-500 focus:outline-none focus:ring-1 focus:ring-fuchsia-500 dark:border-white/10 dark:bg-white/5 dark:text-white"
+          className: "w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-xs font-mono text-slate-900 placeholder:text-slate-400 focus:border-fuchsia-500 focus:outline-none focus:ring-1 focus:ring-fuchsia-500 dark:border-white/10 dark:bg-white/5 dark:text-white"
         }
       ),
       parseError ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-1 text-[10px] font-medium text-red-600 dark:text-red-400", children: [
         t("parseError"),
         ": ",
         parseError
-      ] }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-[10px] text-gray-500 dark:text-gray-400", children: t("inlineHelp") })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-[10px] text-slate-500 dark:text-slate-400", children: t("inlineHelp") })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       ConfigFormActions,
@@ -6422,7 +6373,7 @@ function LogicNodeModal({ onSave, entities = [], datasources = [], onLoadTables,
   };
   const isExperimental = isExperimentalNodeType(config.type);
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    chunk5ETT54QS_js.GlassModal,
+    chunkFZUV7GNB_js.GlassModal,
     {
       open,
       onClose: closeModal,
@@ -6493,7 +6444,7 @@ function NodeContextMenu({ position, targetId, onClose, onEdit, onDuplicate, onC
     }
   ];
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunk5ETT54QS_js.ContextMenu,
+    chunkFZUV7GNB_js.ContextMenu,
     {
       position,
       onClose,
@@ -6550,7 +6501,7 @@ function PanelContextMenu({ position, onClose, onPaste, onSelectAll, onFitView,
     }
   ];
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunk5ETT54QS_js.ContextMenu,
+    chunkFZUV7GNB_js.ContextMenu,
     {
       position,
       onClose,
@@ -6697,7 +6648,7 @@ function SelectionContextMenu({
     }
   ];
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunk5ETT54QS_js.ContextMenu,
+    chunkFZUV7GNB_js.ContextMenu,
     {
       position,
       onClose,
@@ -8655,5 +8606,5 @@ exports.useModalStore = useModalStore;
 exports.useWorkflowBuilderClient = useWorkflowBuilderClient;
 exports.useWorkflowBuilderClientOptional = useWorkflowBuilderClientOptional;
 exports.useWorkflowStore = useWorkflowStore;
-//# sourceMappingURL=chunk-D5OTZGA2.js.map
-//# sourceMappingURL=chunk-D5OTZGA2.js.map
+//# sourceMappingURL=chunk-5SCZB5UI.js.map
+//# sourceMappingURL=chunk-5SCZB5UI.js.map