@datatechsolutions/ui 3.12.1 → 3.13.1

package/dist/{chunk-EDI46QA7.mjs → chunk-TRNDFSM6.mjs}

@@ -1,8 +1,8 @@
 "use client";
-import { ToggleSwitch, StatusBadge, GlassModal, ContextMenu, FormInput, FormTextarea, FormSelect } from './chunk-OW5LSEHU.mjs';
-import { useTranslations, I18nProvider, createI18nFromMessages } from './chunk-7VJ7CMMT.mjs';
-import { GraphNodeHeader, GraphNodeMeta, GraphNodeIconBubble, GraphNodeBadge } from './chunk-PLTLRL2V.mjs';
-import { Badge, Button, IconButton } from './chunk-WR55H7DH.mjs';
+import { ToggleSwitch, StatusBadge, GlassModal, ContextMenu, FormInput, FormTextarea, FormSelect } from './chunk-QEACOJXX.mjs';
+import { useTranslations, I18nProvider, createI18nFromMessages } from './chunk-ZEFNBGYI.mjs';
+import { GraphNodeHeader, GraphNodeMeta, GraphNodeIconBubble, GraphNodeBadge } from './chunk-VPRAESA7.mjs';
+import { Badge, Button, IconButton } from './chunk-O4RZCDP2.mjs';
 import { getAgentTier, createDefaultLogicNodeConfig, applyDagreLayout } from './chunk-G7JQ4OCE.mjs';
 import { memo, useState, useRef, useCallback, useEffect, lazy, createContext, useMemo, useContext } from 'react';
 import { Position, NodeResizer, MarkerType, useReactFlow, getBezierPath, BaseEdge, EdgeLabelRenderer, Handle, ReactFlowProvider, useNodesState, useEdgesState, addEdge, BackgroundVariant } from '@xyflow/react';
@@ -894,10 +894,10 @@ var DraggableCommandBar = 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__ */ jsx(
     "div",
     {
@@ -917,7 +917,7 @@ var DraggableCommandBar = memo(function DraggableCommandBar2({
         {
           className: `${GLASS_CLASS} flex items-center gap-0.5 rounded-2xl px-2 py-1.5`,
           children: [
-            /* @__PURE__ */ jsx("div", { className: "mr-0.5 flex cursor-grab items-center px-0.5 active:cursor-grabbing", children: /* @__PURE__ */ jsx(Bars2Icon, { className: "h-3.5 w-3.5 text-gray-400/70 dark:text-gray-500/70" }) }),
+            /* @__PURE__ */ jsx("div", { className: "mr-0.5 flex cursor-grab items-center px-0.5 active:cursor-grabbing", children: /* @__PURE__ */ jsx(Bars2Icon, { className: "h-3.5 w-3.5 text-slate-400/70 dark:text-slate-500/70" }) }),
             /* @__PURE__ */ jsx(
               "button",
               {
@@ -1044,7 +1044,7 @@ var DraggableCommandBar = memo(function DraggableCommandBar2({
                     onClick: (event) => event.stopPropagation(),
                     onPointerDown: (event) => event.stopPropagation(),
                     children: [
-                      /* @__PURE__ */ jsx("p", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: tWorkflow("shortcuts") }),
+                      /* @__PURE__ */ jsx("p", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400", children: tWorkflow("shortcuts") }),
                       /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: [
                         { keys: "V", label: tWorkflow("pointerMode") },
                         { keys: "H", label: tWorkflow("handMode") },
@@ -1066,11 +1066,11 @@ var DraggableCommandBar = memo(function DraggableCommandBar2({
                         { keys: "G", label: tWorkflow("toggleDots") },
                         { keys: "M", label: tWorkflow("toggleMinimap") }
                       ].map((shortcut) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-                        /* @__PURE__ */ jsx("span", { className: "text-[11px] text-gray-600 dark:text-gray-300", children: shortcut.label }),
+                        /* @__PURE__ */ jsx("span", { className: "text-[11px] text-slate-600 dark:text-slate-300", children: shortcut.label }),
                         /* @__PURE__ */ jsx("span", { className: "flex items-center gap-0.5", children: shortcut.keys.split(" ").map((key) => /* @__PURE__ */ 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
@@ -1198,24 +1198,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: CircleStackIcon },
@@ -1371,7 +1371,7 @@ function DatasourceNodeConfigForm({
     switch (activeSectionId) {
       case "connection":
         return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: t("datasourceHelp") }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: t("datasourceHelp") }),
           /* @__PURE__ */ 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);
@@ -1386,12 +1386,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__ */ jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center", children: logo2 ? /* @__PURE__ */ jsx("img", { src: logo2, alt: datasource.dialect, className: "h-7 w-7" }) : /* @__PURE__ */ jsx(ServerStackIcon, { className: "h-6 w-6 text-gray-400" }) }),
+                  /* @__PURE__ */ jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center", children: logo2 ? /* @__PURE__ */ jsx("img", { src: logo2, alt: datasource.dialect, className: "h-7 w-7" }) : /* @__PURE__ */ jsx(ServerStackIcon, { className: "h-6 w-6 text-slate-400" }) }),
                   /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                    /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-semibold text-gray-900 dark:text-white", children: datasource.name }),
-                    /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: datasource.dialect })
+                    /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-semibold text-slate-900 dark:text-white", children: datasource.name }),
+                    /* @__PURE__ */ jsx("p", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: datasource.dialect })
                   ] }),
                   isSelected && /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4 shrink-0 text-cyan-500 dark:text-cyan-400" })
                 ]
@@ -1402,10 +1402,10 @@ function DatasourceNodeConfigForm({
         ] });
       case "table":
         return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: t("tableHelp") }),
-          !selectedDatasourceId ? /* @__PURE__ */ jsx("p", { className: "py-8 text-center text-xs text-gray-400", children: t("selectDatasource") }) : /* @__PURE__ */ jsxs("div", { className: "liquid-surface rounded-xl border border-white/30 dark:border-white/10", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-gray-200/50 px-3 py-2 dark:border-white/5", children: [
-              /* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "h-3.5 w-3.5 text-gray-400" }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: t("tableHelp") }),
+          !selectedDatasourceId ? /* @__PURE__ */ jsx("p", { className: "py-8 text-center text-xs text-slate-400", children: t("selectDatasource") }) : /* @__PURE__ */ jsxs("div", { className: "liquid-surface rounded-xl border border-white/30 dark:border-white/10", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-slate-200/50 px-3 py-2 dark:border-white/5", children: [
+              /* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "h-3.5 w-3.5 text-slate-400" }),
               /* @__PURE__ */ jsx(
                 "input",
                 {
@@ -1413,13 +1413,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__ */ jsx("span", { className: "text-[10px] text-gray-400", children: availableTables.length })
+              availableTables.length > 0 && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-slate-400", children: availableTables.length })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "max-h-64 overflow-y-auto p-1", children: [
-              filteredTables.length === 0 && /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-[10px] text-gray-400", children: t("noColumnsAvailable") }),
+              filteredTables.length === 0 && /* @__PURE__ */ 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__ */ jsxs(
@@ -1432,9 +1432,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__ */ jsx(TableCellsIcon, { className: "h-3.5 w-3.5 shrink-0 text-gray-400" }),
+                      /* @__PURE__ */ jsx(TableCellsIcon, { className: "h-3.5 w-3.5 shrink-0 text-slate-400" }),
                       /* @__PURE__ */ jsx("span", { className: "truncate", children: table }),
                       isSelected && /* @__PURE__ */ jsx(CheckIcon, { className: "ml-auto h-3.5 w-3.5 shrink-0 text-cyan-500" })
                     ]
@@ -1448,7 +1448,7 @@ function DatasourceNodeConfigForm({
       case "columns":
         return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+            /* @__PURE__ */ jsxs("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: [
               selectedColumns.length,
               "/",
               availableColumns.length,
@@ -1460,14 +1460,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__ */ jsx("p", { className: "py-8 text-center text-xs text-gray-400", children: t("selectTable") }) : /* @__PURE__ */ jsxs("div", { className: "liquid-surface rounded-xl border border-white/30 dark:border-white/10", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-gray-200/50 px-3 py-2 dark:border-white/5", children: [
-              /* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "h-3.5 w-3.5 text-gray-400" }),
+          !selectedTable ? /* @__PURE__ */ jsx("p", { className: "py-8 text-center text-xs text-slate-400", children: t("selectTable") }) : /* @__PURE__ */ jsxs("div", { className: "liquid-surface rounded-xl border border-white/30 dark:border-white/10", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-slate-200/50 px-3 py-2 dark:border-white/5", children: [
+              /* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "h-3.5 w-3.5 text-slate-400" }),
               /* @__PURE__ */ jsx(
                 "input",
                 {
@@ -1475,15 +1475,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__ */ jsxs("div", { className: "max-h-64 overflow-y-auto p-1", children: [
-              filteredColumns.length === 0 && /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-[10px] text-gray-400", children: t("noColumnsAvailable") }),
+              filteredColumns.length === 0 && /* @__PURE__ */ 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__ */ jsxs(
                   "button",
                   {
@@ -1491,14 +1491,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__ */ 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__ */ jsx(CheckIcon, { className: "h-2.5 w-2.5 text-white" }) }),
-                      /* @__PURE__ */ jsxs("span", { className: "flex-1 truncate text-xs text-gray-900 dark:text-white", children: [
+                      /* @__PURE__ */ 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__ */ jsx(CheckIcon, { className: "h-2.5 w-2.5 text-white" }) }),
+                      /* @__PURE__ */ jsxs("span", { className: "flex-1 truncate text-xs text-slate-900 dark:text-white", children: [
                         column.name,
-                        column.nullable && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[9px] text-gray-400", children: "?" })
+                        column.nullable && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[9px] text-slate-400", children: "?" })
                       ] }),
-                      /* @__PURE__ */ jsx("span", { className: `shrink-0 rounded-full px-1.5 py-0.5 text-[9px] font-medium ${typeColor}`, children: column.type })
+                      /* @__PURE__ */ jsx(Badge, { color: typeBadgeColor, size: "xs", children: column.type })
                     ]
                   },
                   column.name
@@ -1510,13 +1510,13 @@ function DatasourceNodeConfigForm({
       case "filters":
         return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: t("filtersHelp") }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: t("filtersHelp") }),
             !readOnly && /* @__PURE__ */ 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__ */ jsx(PlusIcon$1, { className: "h-3 w-3" }),
                   t("addFilter")
@@ -1525,14 +1525,14 @@ function DatasourceNodeConfigForm({
             )
           ] }),
           filterEntries.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 py-8", children: [
-            /* @__PURE__ */ jsx(FunnelIcon, { className: "h-8 w-8 text-gray-300 dark:text-gray-600" }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400", children: "No filters configured" }),
+            /* @__PURE__ */ jsx(FunnelIcon, { className: "h-8 w-8 text-slate-300 dark:text-slate-600" }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-400", children: "No filters configured" }),
             /* @__PURE__ */ 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__ */ jsx(PlusIcon$1, { className: "h-3 w-3" }),
                   t("addFilter")
@@ -1542,14 +1542,15 @@ function DatasourceNodeConfigForm({
           ] }) : /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "liquid-surface flex items-center gap-2 rounded-xl px-3 py-2", children: [
               /* @__PURE__ */ 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__ */ jsx("option", { value: "", children: t("columnName") }),
                     availableColumns.map((column) => /* @__PURE__ */ jsx("option", { value: column.name, children: column.name }, column.name))
@@ -1562,7 +1563,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__ */ jsx("option", { value: "eq", children: "= (eq)" }),
@@ -1584,7 +1586,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__ */ jsx(
@@ -1592,7 +1594,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__ */ jsx(XMarkIcon$1, { className: "h-3 w-3" })
                 }
               )
@@ -1602,10 +1604,10 @@ function DatasourceNodeConfigForm({
       case "output":
         return /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { className: "mb-1.5 block text-xs font-medium text-gray-700 dark:text-gray-300", children: t("outputVariableLabel") }),
-            /* @__PURE__ */ jsx("p", { className: "mb-2 text-[10px] text-gray-500 dark:text-gray-400", children: t("outputVariableHelp") }),
-            /* @__PURE__ */ 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__ */ jsx(VariableIcon, { className: "h-4 w-4 text-gray-400" }),
+            /* @__PURE__ */ jsx("label", { className: "mb-1.5 block text-xs font-medium text-slate-700 dark:text-slate-300", children: t("outputVariableLabel") }),
+            /* @__PURE__ */ jsx("p", { className: "mb-2 text-[10px] text-slate-500 dark:text-slate-400", children: t("outputVariableHelp") }),
+            /* @__PURE__ */ jsxs("div", { className: "liquid-surface flex items-center gap-2 rounded-xl px-3 py-2.5", children: [
+              /* @__PURE__ */ jsx(VariableIcon, { className: "h-4 w-4 text-slate-400" }),
               /* @__PURE__ */ jsx(
                 "input",
                 {
@@ -1614,14 +1616,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__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { className: "mb-1.5 block text-xs font-medium text-gray-700 dark:text-gray-300", children: t("limitLabel") }),
-            /* @__PURE__ */ jsx("p", { className: "mb-2 text-[10px] text-gray-500 dark:text-gray-400", children: t("limitHelp") }),
+            /* @__PURE__ */ jsx("label", { className: "mb-1.5 block text-xs font-medium text-slate-700 dark:text-slate-300", children: t("limitLabel") }),
+            /* @__PURE__ */ jsx("p", { className: "mb-2 text-[10px] text-slate-500 dark:text-slate-400", children: t("limitHelp") }),
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -1631,15 +1633,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__ */ 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__ */ jsx("p", { className: "text-[10px] font-semibold uppercase tracking-wider text-cyan-600 dark:text-cyan-400 mb-2", children: "Summary" }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-1 text-xs text-gray-600 dark:text-gray-300", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1 text-xs text-slate-600 dark:text-slate-300", children: [
               /* @__PURE__ */ jsxs("p", { children: [
-                /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "Source:" }),
+                /* @__PURE__ */ jsx("span", { className: "text-slate-400", children: "Source:" }),
                 " ",
                 selectedDatasource.name,
                 " (",
@@ -1647,29 +1649,29 @@ function DatasourceNodeConfigForm({
                 ")"
               ] }),
               /* @__PURE__ */ jsxs("p", { children: [
-                /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "Table:" }),
+                /* @__PURE__ */ jsx("span", { className: "text-slate-400", children: "Table:" }),
                 " ",
                 selectedTable
               ] }),
               /* @__PURE__ */ jsxs("p", { children: [
-                /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "Columns:" }),
+                /* @__PURE__ */ jsx("span", { className: "text-slate-400", children: "Columns:" }),
                 " ",
                 selectedColumns.length,
                 " of ",
                 availableColumns.length
               ] }),
               /* @__PURE__ */ jsxs("p", { children: [
-                /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "Filters:" }),
+                /* @__PURE__ */ jsx("span", { className: "text-slate-400", children: "Filters:" }),
                 " ",
                 filterEntries.length
               ] }),
               /* @__PURE__ */ jsxs("p", { children: [
-                /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "Limit:" }),
+                /* @__PURE__ */ jsx("span", { className: "text-slate-400", children: "Limit:" }),
                 " ",
                 limit
               ] }),
               /* @__PURE__ */ jsxs("p", { children: [
-                /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "Output:" }),
+                /* @__PURE__ */ jsx("span", { className: "text-slate-400", children: "Output:" }),
                 " ",
                 outputVariable || "\u2014"
               ] })
@@ -2064,8 +2066,8 @@ var AgentFlowNode = memo(function AgentFlowNode2({ id, data, selected }) {
     const agentLabel = data.label;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(NodeRunningIndicator, { nodeId: id }),
-      /* @__PURE__ */ jsx(WorkflowHandle, { type: "target", position: Position.Left, id: "left-in", colorClass: "!bg-gray-400 dark:!bg-gray-500" }),
-      /* @__PURE__ */ jsx(WorkflowHandle, { type: "target", position: Position.Top, id: "top-in", colorClass: "!bg-gray-400 dark:!bg-gray-500" }),
+      /* @__PURE__ */ jsx(WorkflowHandle, { type: "target", position: Position.Left, id: "left-in", colorClass: "!bg-slate-400 dark:!bg-slate-500" }),
+      /* @__PURE__ */ jsx(WorkflowHandle, { type: "target", position: Position.Top, id: "top-in", colorClass: "!bg-slate-400 dark:!bg-slate-500" }),
       /* @__PURE__ */ jsx(NodeCard, { variant: "error", nodeType: "agent", width: "w-[320px]", children: /* @__PURE__ */ jsx(
         NodeCardHeader,
         {
@@ -2083,17 +2085,17 @@ var AgentFlowNode = memo(function AgentFlowNode2({ id, data, selected }) {
   const frameworkMeta = getFrameworkMeta(data.agent.framework);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(NodeRunningIndicator, { nodeId: id }),
-    /* @__PURE__ */ jsx(WorkflowHandle, { type: "target", position: Position.Left, id: "left-in", colorClass: "!bg-gray-400 dark:!bg-gray-500" }),
-    /* @__PURE__ */ jsx(WorkflowHandle, { type: "target", position: Position.Top, id: "top-in", colorClass: "!bg-gray-400 dark:!bg-gray-500" }),
+    /* @__PURE__ */ jsx(WorkflowHandle, { type: "target", position: Position.Left, id: "left-in", colorClass: "!bg-slate-400 dark:!bg-slate-500" }),
+    /* @__PURE__ */ jsx(WorkflowHandle, { type: "target", position: Position.Top, id: "top-in", colorClass: "!bg-slate-400 dark:!bg-slate-500" }),
     /* @__PURE__ */ jsx("button", { type: "button", onClick: () => data.onSelect(agentId), className: "w-full text-left", children: /* @__PURE__ */ jsxs(NodeCard, { compact: isCompact, selected, nodeType: "agent", width: "w-[320px]", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
         /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
-          data.agent.avatar ? /* @__PURE__ */ 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__ */ 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__ */ jsx(CpuChipIcon, { className: "h-6 w-6 text-indigo-500 dark:text-indigo-300" }) }),
-          /* @__PURE__ */ 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__ */ jsx(CpuChipIcon, { className: "h-2.5 w-2.5 text-white" }) })
+          data.agent.avatar ? /* @__PURE__ */ 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__ */ 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__ */ jsx(CpuChipIcon, { className: "h-6 w-6 text-indigo-500 dark:text-indigo-300" }) }),
+          /* @__PURE__ */ 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__ */ jsx(CpuChipIcon, { className: "h-2.5 w-2.5 text-white" }) })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx("h3", { className: "truncate text-sm font-semibold text-gray-900 dark:text-white", children: data.agent.name }),
-          !isCompact && /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-gray-500 dark:text-gray-400", children: data.agent.role })
+          /* @__PURE__ */ jsx("h3", { className: "truncate text-sm font-semibold text-slate-900 dark:text-white", children: data.agent.name }),
+          !isCompact && /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-slate-500 dark:text-slate-400", children: data.agent.role })
         ] })
       ] }),
       /* @__PURE__ */ jsx(NodeCardMeta, { compact: isCompact, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
@@ -2114,7 +2116,7 @@ var AgentFlowNode = memo(function AgentFlowNode2({ id, data, selected }) {
         ] }),
         data.agentTools && data.agentTools.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("div", { className: "w-full" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-1 border-t border-gray-200/20 pt-1 dark:border-white/5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-1 border-t border-slate-200/20 pt-1 dark:border-white/5", children: [
             /* @__PURE__ */ jsx(CommandLineIcon, { className: "h-3 w-3 shrink-0 text-amber-500 dark:text-amber-400" }),
             data.agentTools.slice(0, 3).map((tool) => /* @__PURE__ */ jsx(
               Badge,
@@ -2126,7 +2128,7 @@ var AgentFlowNode = memo(function AgentFlowNode2({ id, data, selected }) {
               },
               tool.id
             )),
-            data.agentTools.length > 3 && /* @__PURE__ */ jsxs("span", { className: "text-[9px] text-gray-400 dark:text-gray-500", children: [
+            data.agentTools.length > 3 && /* @__PURE__ */ jsxs("span", { className: "text-[9px] text-slate-400 dark:text-slate-500", children: [
               "+",
               data.agentTools.length - 3
             ] })
@@ -2297,7 +2299,7 @@ var ToolFlowNode = memo(function ToolFlowNode2({ id, data, selected }) {
   const categoryPill = CATEGORY_PILL_COLORS[categoryKey] ?? CATEGORY_PILL_COLORS.external;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(NodeRunningIndicator, { nodeId: id }),
-    /* @__PURE__ */ jsx(WorkflowHandle, { type: "target", position: Position.Left, id: "left-in", colorClass: "!bg-gray-400 dark:!bg-gray-500" }),
+    /* @__PURE__ */ jsx(WorkflowHandle, { type: "target", position: Position.Left, id: "left-in", colorClass: "!bg-slate-400 dark:!bg-slate-500" }),
     /* @__PURE__ */ jsx(
       "button",
       {
@@ -2309,8 +2311,8 @@ var ToolFlowNode = memo(function ToolFlowNode2({ id, data, selected }) {
             /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
               /* @__PURE__ */ jsx("div", { className: `flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br ${gradient} shadow-lg`, children: /* @__PURE__ */ jsx(IconComponent, { className: "h-5 w-5 text-white" }) }),
               /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: tool.name }),
-                !isCompact && /* @__PURE__ */ jsx("p", { className: "mt-0.5 line-clamp-1 text-xs text-gray-500 dark:text-gray-400", children: String(tool.description ?? "") })
+                /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: tool.name }),
+                !isCompact && /* @__PURE__ */ jsx("p", { className: "mt-0.5 line-clamp-1 text-xs text-slate-500 dark:text-slate-400", children: String(tool.description ?? "") })
               ] })
             ] }),
             onToggle && /* @__PURE__ */ jsx(
@@ -2338,7 +2340,7 @@ var ToolFlowNode = memo(function ToolFlowNode2({ id, data, selected }) {
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx(Badge, { color: "teal", size: "xs", children: t("nodeType") }),
               /* @__PURE__ */ jsx(Badge, { color: "zinc", size: "xs", className: categoryPill, children: tool.category }),
-              /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
+              /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: [
                 String(tool.timeoutMs ?? ""),
                 "ms"
               ] })
@@ -2388,18 +2390,18 @@ var RuleFlowNode = memo(function RuleFlowNode2({ id, data, selected }) {
               /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
                 /* @__PURE__ */ 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__ */ jsx(ScaleIcon, { className: "h-5 w-5 text-white" }) }),
                 /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: ruleLabel || t("ruleEngine") }),
-                  /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400", children: t("ruleEngineDescription") })
+                  /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: ruleLabel || t("ruleEngine") }),
+                  /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-slate-500 dark:text-slate-400", children: t("ruleEngineDescription") })
                 ] })
               ] }),
               !isCompact && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-between", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                   /* @__PURE__ */ jsx(Badge, { color: "violet", size: "xs", children: t("ruleEngine") }),
-                  contextVariableCount > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
+                  contextVariableCount > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: [
                     contextVariableCount,
                     " vars"
                   ] }),
-                  ruleConfig.outputVariable && /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
+                  ruleConfig.outputVariable && /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: [
                     "\u2192 ",
                     ruleConfig.outputVariable
                   ] })
@@ -2432,7 +2434,7 @@ var RuleFlowNode = memo(function RuleFlowNode2({ id, data, selected }) {
       /* @__PURE__ */ jsx(NodeCard, { variant: "error", nodeType: "rule", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
         /* @__PURE__ */ 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__ */ jsx(ExclamationTriangleIcon, { className: "h-5 w-5 text-white" }) }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: ruleLabel || t("nodeType") }),
+          /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: ruleLabel || t("nodeType") }),
           /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-amber-600 dark:text-amber-400", children: t("ruleNotFound") })
         ] })
       ] }) }),
@@ -2461,8 +2463,8 @@ var RuleFlowNode = memo(function RuleFlowNode2({ id, data, selected }) {
             /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
               /* @__PURE__ */ jsx("div", { className: `flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br ${gradient} shadow-lg`, children: /* @__PURE__ */ jsx(AdjustmentsHorizontalIcon, { className: "h-5 w-5 text-white" }) }),
               /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: rule.name }),
-                /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs font-medium text-gray-600 dark:text-gray-300", children: adjustmentDisplay })
+                /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: rule.name }),
+                /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs font-medium text-slate-600 dark:text-slate-300", children: adjustmentDisplay })
               ] })
             ] }),
             onToggle && /* @__PURE__ */ jsx(
@@ -2490,11 +2492,11 @@ var RuleFlowNode = memo(function RuleFlowNode2({ id, data, selected }) {
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx(Badge, { color: "violet", size: "xs", children: t("nodeType") }),
               /* @__PURE__ */ jsx(Badge, { color: "zinc", size: "xs", className: typePill, children: adjustmentType }),
-              /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
+              /* @__PURE__ */ 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__ */ jsxs("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
+              Array.isArray(rule.condition?.categories) && rule.condition.categories.length > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: [
                 rule.condition.categories.length,
                 " categories"
               ] })
@@ -2561,8 +2563,8 @@ var EntityFlowNode = memo(function EntityFlowNode2({ id, data, selected }) {
           /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
             /* @__PURE__ */ jsx("div", { className: `flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br ${gradient} shadow-lg`, children: /* @__PURE__ */ jsx(EntityIcon, { className: "h-5 w-5 text-white" }) }),
             /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: label }),
-              !isCompact && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400", children: data.entity?.label ?? config.entityMasterId })
+              /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: label }),
+              !isCompact && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-slate-500 dark:text-slate-400", children: data.entity?.label ?? config.entityMasterId })
             ] })
           ] }),
           /* @__PURE__ */ jsxs(NodeCardMeta, { compact: isCompact, children: [
@@ -2573,8 +2575,8 @@ var EntityFlowNode = memo(function EntityFlowNode2({ id, data, selected }) {
                 " ",
                 t("entityFields")
               ] }),
-              config.limit > 0 && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: t("entityLimit", { count: config.limit }) }),
-              filterCount > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
+              config.limit > 0 && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: t("entityLimit", { count: config.limit }) }),
+              filterCount > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: [
                 filterCount,
                 " ",
                 t("entityFilters")
@@ -3665,7 +3667,6 @@ var GroupFlowNode = memo(function GroupFlowNode2({ id, data, selected }) {
       "div",
       {
         className: `group relative h-full w-full overflow-hidden rounded-xl border liquid-surface ${getNodeStateClass(selected, void 0, colorScheme.border)} transition-all`,
-        style: { minWidth: config.width, minHeight: config.height },
         children: [
           /* @__PURE__ */ jsxs(
             "div",
@@ -3782,7 +3783,7 @@ var SpeechTranscriberFlowNode = memo(function SpeechTranscriberFlowNode2({ id, d
               /* @__PURE__ */ jsx(NodeCardBadge, { tone: "speech_transcriber", children: "Whisper" }),
               /* @__PURE__ */ jsx(NodeCardBadge, { tone: "speech_transcriber", soft: true, children: model }),
               /* @__PURE__ */ jsx(NodeCardBadge, { tone: "speech_transcriber", soft: true, children: language }),
-              audioRefPreview && /* @__PURE__ */ jsx("span", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: audioRefPreview })
+              audioRefPreview && /* @__PURE__ */ jsx("span", { className: "truncate text-[10px] text-slate-400 dark:text-slate-500", children: audioRefPreview })
             ] }),
             /* @__PURE__ */ jsx(NodeCardDeleteAction, { nodeId: id, onDelete })
           ] })
@@ -3839,7 +3840,7 @@ function ConfigFormActions({
   onSave,
   saveDisabled = false
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 border-t border-gray-200 pt-4 dark:border-gray-700", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 border-t border-slate-200 pt-4 dark:border-slate-700", children: [
     /* @__PURE__ */ jsx(Button, { type: "button", outline: true, onClick: onCancel, children: cancelLabel }),
     /* @__PURE__ */ jsx(Button, { type: "button", onClick: onSave, disabled: saveDisabled, children: saveLabel })
   ] });
@@ -3918,7 +3919,7 @@ function VariableListEditor({
     }
   }, [handleAdd]);
   return /* @__PURE__ */ jsxs("div", { children: [
-    label && /* @__PURE__ */ jsx("label", { className: "mb-2 block text-xs font-medium text-gray-500 dark:text-gray-400", children: label }),
+    label && /* @__PURE__ */ jsx("label", { className: "mb-2 block text-xs font-medium text-slate-500 dark:text-slate-400", children: label }),
     variables.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-2 space-y-1", children: variables.map((variable, index) => /* @__PURE__ */ jsxs(
       "div",
       {
@@ -3931,17 +3932,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__ */ jsx("span", { className: "flex-1 text-sm font-medium text-gray-900 dark:text-white", children: variable }),
+          ) : /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm font-medium text-slate-900 dark:text-white", children: variable }),
           /* @__PURE__ */ jsx(
-            "button",
+            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__ */ jsx(XMarkIcon$1, { className: "h-3.5 w-3.5" })
+              icon: /* @__PURE__ */ jsx(XMarkIcon$1, { className: "h-3.5 w-3.5" }),
+              className: "shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
             }
           )
         ]
@@ -3958,7 +3961,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__ */ jsxs(
@@ -3975,7 +3978,7 @@ function VariableListEditor({
         }
       )
     ] }),
-    variables.length === 0 && !canAdd && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 dark:text-gray-500", children: "No variables defined" })
+    variables.length === 0 && !canAdd && /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-400 dark:text-slate-500", children: "No variables defined" })
   ] });
 }
 function StartNodeConfigForm({ config, onSave, onCancel }) {
@@ -3986,7 +3989,7 @@ function StartNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("inputVariablesHelp") }),
+      /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-slate-500 dark:text-slate-400", children: t("inputVariablesHelp") }),
       /* @__PURE__ */ jsx(
         VariableListEditor,
         {
@@ -4018,7 +4021,7 @@ function EndNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("outputVariablesHelp") }),
+      /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-slate-500 dark:text-slate-400", children: t("outputVariablesHelp") }),
       /* @__PURE__ */ jsx(
         VariableListEditor,
         {
@@ -4086,7 +4089,7 @@ function IfElseNodeConfigForm({ config, onSave, onCancel }) {
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: t("conditionsLabel") }),
+        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-slate-700 dark:text-slate-300", children: t("conditionsLabel") }),
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -4096,7 +4099,7 @@ function IfElseNodeConfigForm({ config, onSave, onCancel }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "space-y-3", children: conditions.map((condition, index) => /* @__PURE__ */ 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__ */ jsx("div", { className: "space-y-3", children: conditions.map((condition, index) => /* @__PURE__ */ 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__ */ jsxs("div", { className: "grid flex-1 grid-cols-3 gap-2", children: [
           /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
             FormInput,
@@ -4145,7 +4148,7 @@ function IfElseNodeConfigForm({ config, onSave, onCancel }) {
       ] }, index)) })
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("logicalOperatorLabel") }),
+      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300", children: t("logicalOperatorLabel") }),
       /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
         /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
           /* @__PURE__ */ jsx(
@@ -4159,7 +4162,7 @@ function IfElseNodeConfigForm({ config, onSave, onCancel }) {
               className: "text-indigo-600 focus:ring-indigo-400"
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: "AND" })
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-slate-700 dark:text-slate-300", children: "AND" })
         ] }),
         /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
           /* @__PURE__ */ jsx(
@@ -4173,7 +4176,7 @@ function IfElseNodeConfigForm({ config, onSave, onCancel }) {
               className: "text-indigo-600 focus:ring-indigo-400"
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: "OR" })
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-slate-700 dark:text-slate-300", children: "OR" })
         ] })
       ] })
     ] }),
@@ -4263,17 +4266,17 @@ 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__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex gap-2 rounded-lg bg-gray-100 p-1 text-sm dark:bg-gray-800", children: [
+    /* @__PURE__ */ 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__ */ jsx(
         "button",
         {
           type: "button",
           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" })
         }
       ),
@@ -4282,7 +4285,7 @@ function CodeNodeConfigForm({ config, onSave, onCancel }) {
         {
           type: "button",
           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" })
         }
       )
@@ -4326,7 +4329,7 @@ function CodeNodeConfigForm({ config, onSave, onCancel }) {
             children: OPERATION_OPTIONS.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value))
           }
         ),
-        /* @__PURE__ */ jsx("p", { className: "mt-1 text-[11px] text-gray-500 dark:text-gray-400", children: selectedOpHelp })
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-[11px] text-slate-500 dark:text-slate-400", children: selectedOpHelp })
       ] }),
       operation !== "return" && /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("label", { className: labelClass, children: "from" }),
@@ -4340,7 +4343,7 @@ function CodeNodeConfigForm({ config, onSave, onCancel }) {
             className: inputClass
           }
         ),
-        /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsxs("label", { className: labelClass, children: [
@@ -4370,7 +4373,7 @@ function CodeNodeConfigForm({ config, onSave, onCancel }) {
             className: inputClass
           }
         ),
-        /* @__PURE__ */ jsx("p", { className: "mt-1 text-[11px] text-gray-500 dark:text-gray-400", children: "Comma-separated keys to project." })
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-[11px] text-slate-500 dark:text-slate-400", children: "Comma-separated keys to project." })
       ] }),
       operation === "regex_extract" && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs("div", { children: [
@@ -4399,7 +4402,7 @@ function CodeNodeConfigForm({ config, onSave, onCancel }) {
                 className: inputClass
               }
             ),
-            /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("label", { className: labelClass, children: "group" }),
@@ -4413,18 +4416,18 @@ function CodeNodeConfigForm({ config, onSave, onCancel }) {
                 className: inputClass
               }
             ),
-            /* @__PURE__ */ jsx("p", { className: "mt-1 text-[11px] text-gray-500 dark:text-gray-400", children: "0 = whole match, 1 = first capture group (default)." })
+            /* @__PURE__ */ 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__ */ jsxs("label", { className: "flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300", children: [
+      operation === "xml_titles" && /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm text-slate-700 dark:text-slate-300", children: [
         /* @__PURE__ */ 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>`)."
@@ -4441,7 +4444,7 @@ function CodeNodeConfigForm({ config, onSave, onCancel }) {
             className: inputClass
           }
         ),
-        /* @__PURE__ */ jsxs("p", { className: "mt-1 text-[11px] text-gray-500 dark:text-gray-400", children: [
+        /* @__PURE__ */ 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."
@@ -4524,7 +4527,7 @@ function HttpRequestNodeConfigForm({ config, onSave, onCancel }) {
     ),
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: t("headersLabel") }),
+        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-slate-700 dark:text-slate-300", children: t("headersLabel") }),
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -4927,7 +4930,7 @@ function QuestionClassifierNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("modelIdLabel") }),
+      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300", children: t("modelIdLabel") }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -4935,12 +4938,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__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("instructionsLabel") }),
+      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300", children: t("instructionsLabel") }),
       /* @__PURE__ */ jsx(
         "textarea",
         {
@@ -4948,34 +4951,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__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: t("categoriesLabel") }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: handleAddCategory,
-            className: "text-sm text-indigo-600 hover:text-indigo-700 dark:text-indigo-400",
-            children: t("addCategory")
-          }
-        )
+        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-slate-700 dark:text-slate-300", children: t("categoriesLabel") }),
+        /* @__PURE__ */ jsx(Button, { type: "button", plain: true, size: "sm", onClick: handleAddCategory, children: t("addCategory") })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "space-y-3", children: categories.map((category, index) => /* @__PURE__ */ 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__ */ jsx("div", { className: "space-y-3", children: categories.map((category, index) => /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-white/40 backdrop-blur-sm p-3 dark:bg-white/[0.04]", children: [
         /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: t("categoryIndex", { index: index + 1 }) }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-slate-500 dark:text-slate-400", children: t("categoryIndex", { index: index + 1 }) }),
           categories.length > 2 && /* @__PURE__ */ jsx(
-            "button",
+            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__ */ jsx(TrashIcon, { className: "h-4 w-4" })
+              icon: /* @__PURE__ */ jsx(TrashIcon, { className: "h-4 w-4" })
             }
           )
         ] }),
@@ -4987,7 +4983,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__ */ jsx(
@@ -4997,32 +4993,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__ */ jsxs("div", { className: "flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700", children: [
-      /* @__PURE__ */ 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__ */ 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__ */ jsx(
+      ConfigFormActions,
+      {
+        cancelLabel: t("cancel"),
+        saveLabel: t("save"),
+        onCancel,
+        onSave: handleSave
+      }
+    )
   ] });
 }
 var PARAMETER_TYPES = ["string", "number", "boolean", "array"];
@@ -5057,7 +5042,7 @@ function ParameterExtractorNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("modelIdLabel") }),
+      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300", children: t("modelIdLabel") }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -5065,37 +5050,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__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: t("parametersLabel") }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: handleAddParameter,
-            className: "text-sm text-indigo-600 hover:text-indigo-700 dark:text-indigo-400",
-            children: t("addParameter")
-          }
-        )
+        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-slate-700 dark:text-slate-300", children: t("parametersLabel") }),
+        /* @__PURE__ */ jsx(Button, { type: "button", plain: true, size: "sm", onClick: handleAddParameter, children: t("addParameter") })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "space-y-3", children: parameters.map((parameter, index) => /* @__PURE__ */ 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__ */ jsx("div", { className: "space-y-3", children: parameters.map((parameter, index) => /* @__PURE__ */ jsxs("div", { className: "rounded-lg liquid-surface p-3", children: [
         /* @__PURE__ */ jsx("div", { className: "mb-2 flex items-center justify-end", children: /* @__PURE__ */ jsx(
-          "button",
+          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__ */ jsx(TrashIcon, { className: "h-4 w-4" })
+            icon: /* @__PURE__ */ jsx(TrashIcon, { className: "h-4 w-4" })
           }
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { className: "mb-1 block text-xs text-gray-500 dark:text-gray-400", children: t("parameterNameLabel") }),
+            /* @__PURE__ */ jsx("label", { className: "mb-1 block text-xs text-slate-500 dark:text-slate-400", children: t("parameterNameLabel") }),
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -5103,25 +5081,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__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { className: "mb-1 block text-xs text-gray-500 dark:text-gray-400", children: t("parameterTypeLabel") }),
+            /* @__PURE__ */ jsx("label", { className: "mb-1 block text-xs text-slate-500 dark:text-slate-400", children: t("parameterTypeLabel") }),
             /* @__PURE__ */ 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__ */ jsx("option", { value: parameterType, children: parameterType }, parameterType))
               }
             )
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
-          /* @__PURE__ */ jsx("label", { className: "mb-1 block text-xs text-gray-500 dark:text-gray-400", children: t("parameterDescriptionLabel") }),
+          /* @__PURE__ */ jsx("label", { className: "mb-1 block text-xs text-slate-500 dark:text-slate-400", children: t("parameterDescriptionLabel") }),
           /* @__PURE__ */ jsx(
             "input",
             {
@@ -5129,7 +5107,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"
             }
           )
         ] }),
@@ -5140,33 +5118,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__ */ jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: t("parameterRequiredLabel") })
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-slate-700 dark:text-slate-300", children: t("parameterRequiredLabel") })
         ] }) })
       ] }, index)) })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700", children: [
-      /* @__PURE__ */ 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__ */ 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__ */ jsx(
+      ConfigFormActions,
+      {
+        cancelLabel: t("cancel"),
+        saveLabel: t("save"),
+        onCancel,
+        onSave: handleSave
+      }
+    )
   ] });
 }
 function VariableAssignerNodeConfigForm({ config, onSave, onCancel }) {
@@ -5197,21 +5164,13 @@ function VariableAssignerNodeConfigForm({ config, onSave, onCancel }) {
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: t("assignmentsLabel") }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: handleAddAssignment,
-            className: "text-sm text-indigo-600 hover:text-indigo-700 dark:text-indigo-400",
-            children: t("addAssignment")
-          }
-        )
+        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-slate-700 dark:text-slate-300", children: t("assignmentsLabel") }),
+        /* @__PURE__ */ jsx(Button, { type: "button", plain: true, size: "sm", onClick: handleAddAssignment, children: t("addAssignment") })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "space-y-3", children: assignments.map((assignment, index) => /* @__PURE__ */ 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__ */ jsx("div", { className: "space-y-3", children: assignments.map((assignment, index) => /* @__PURE__ */ 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__ */ jsxs("div", { className: "grid flex-1 grid-cols-2 gap-2", children: [
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { className: "mb-1 block text-xs text-gray-500 dark:text-gray-400", children: t("targetLabel") }),
+            /* @__PURE__ */ jsx("label", { className: "mb-1 block text-xs text-slate-500 dark:text-slate-400", children: t("targetLabel") }),
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -5219,12 +5178,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__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { className: "mb-1 block text-xs text-gray-500 dark:text-gray-400", children: t("sourceLabel") }),
+            /* @__PURE__ */ jsx("label", { className: "mb-1 block text-xs text-slate-500 dark:text-slate-400", children: t("sourceLabel") }),
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -5232,43 +5191,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__ */ jsx(
-          "button",
+          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__ */ jsx(TrashIcon, { className: "h-4 w-4" })
+            icon: /* @__PURE__ */ jsx(TrashIcon, { className: "h-4 w-4" })
           }
         )
       ] }, index)) })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700", children: [
-      /* @__PURE__ */ 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__ */ 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__ */ jsx(
+      ConfigFormActions,
+      {
+        cancelLabel: t("cancel"),
+        saveLabel: t("save"),
+        onCancel,
+        onSave: handleSave
+      }
+    )
   ] });
 }
 var AGGREGATION_MODES = ["array", "object", "concatenate"];
@@ -5402,19 +5352,19 @@ function ListOperatorNodeConfigForm({ config, onSave, onCancel }) {
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("operationLabel") }),
+      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300", children: t("operationLabel") }),
       /* @__PURE__ */ 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__ */ jsx("option", { value: operationOption, children: t(`operation_${operationOption}`) }, operationOption))
         }
       )
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("inputVariableLabel") }),
+      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300", children: t("inputVariableLabel") }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -5422,12 +5372,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__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("outputVariableLabel") }),
+      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300", children: t("outputVariableLabel") }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -5435,12 +5385,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__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("conditionLabel") }),
+      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300", children: t("conditionLabel") }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -5448,13 +5398,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__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("sortKeyLabel") }),
+        /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300", children: t("sortKeyLabel") }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -5462,25 +5412,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__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("sortOrderLabel") }),
+        /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300", children: t("sortOrderLabel") }),
         /* @__PURE__ */ 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__ */ jsx("option", { value: order, children: t(`sortOrder_${order}`) }, order))
           }
         )
       ] })
     ] }),
     showLimitField && /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("limitCountLabel") }),
+      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300", children: t("limitCountLabel") }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -5488,17 +5438,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__ */ jsxs("div", { className: "flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 pt-4 liquid-divider border-t", children: [
       /* @__PURE__ */ 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")
         }
       ),
@@ -5639,7 +5589,7 @@ function EntityNodeConfigForm({ config, entities = [], onSave, onCancel }) {
   const filterEntries = Object.entries(filterVariables);
   return /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("entityTypeLabel") }),
+      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300", children: t("entityTypeLabel") }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx("div", { className: `flex h-6 w-6 items-center justify-center rounded-md bg-gradient-to-br ${gradient}`, children: /* @__PURE__ */ jsx("span", { className: "text-[10px] text-white font-bold", children: (entityDefinition?.label ?? config.entityMasterId ?? "?").charAt(0).toUpperCase() }) }),
         /* @__PURE__ */ 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") })
@@ -5647,8 +5597,8 @@ function EntityNodeConfigForm({ config, entities = [], onSave, onCancel }) {
       !entityDefinition && /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-amber-600 dark:text-amber-400", children: t("entityNotConfigured") })
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("outputVariableLabel") }),
-      /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("outputVariableHelp") }),
+      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300", children: t("outputVariableLabel") }),
+      /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-slate-500 dark:text-slate-400", children: t("outputVariableHelp") }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -5656,13 +5606,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__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300", children: t("limitLabel") }),
-      /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("limitHelp") }),
+      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300", children: t("limitLabel") }),
+      /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-slate-500 dark:text-slate-400", children: t("limitHelp") }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -5671,13 +5621,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__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: t("fieldsLabel") }),
+        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-slate-700 dark:text-slate-300", children: t("fieldsLabel") }),
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -5689,15 +5639,15 @@ function EntityNodeConfigForm({ config, entities = [], onSave, onCancel }) {
         )
       ] }),
       selectedFields.length === 0 && /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-amber-600 dark:text-amber-400", children: t("noFieldsSelected") }),
-      /* @__PURE__ */ 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__ */ jsx("p", { className: "px-2 py-2 text-xs text-gray-500 dark:text-gray-400", children: t("noFieldsSelected") }),
+      /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(
                   "input",
@@ -5705,10 +5655,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__ */ jsx("span", { className: "flex-1 text-xs font-medium text-gray-900 dark:text-white", children: field.name }),
+                /* @__PURE__ */ jsx("span", { className: "flex-1 text-xs font-medium text-slate-900 dark:text-white", children: field.name }),
                 /* @__PURE__ */ jsx("span", { className: `rounded-full px-1.5 py-0.5 text-[9px] font-medium ${typeBadgeColor}`, children: field.type })
               ]
             },
@@ -5719,7 +5669,7 @@ function EntityNodeConfigForm({ config, entities = [], onSave, onCancel }) {
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: t("filtersLabel") }),
+        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-slate-700 dark:text-slate-300", children: t("filtersLabel") }),
         /* @__PURE__ */ jsxs(
           "button",
           {
@@ -5733,7 +5683,7 @@ function EntityNodeConfigForm({ config, entities = [], onSave, onCancel }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-gray-500 dark:text-gray-400", children: t("filtersHelp") }),
+      /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-slate-500 dark:text-slate-400", children: t("filtersHelp") }),
       filterEntries.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: filterEntries.map(([variableName, fieldName], index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx(
           "input",
@@ -5742,16 +5692,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__ */ jsx("span", { className: "text-xs text-gray-400", children: "\u2192" }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-400", children: "\u2192" }),
         /* @__PURE__ */ 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__ */ jsx("option", { value: "", children: t("fieldName") }),
               availableFields.map((field) => /* @__PURE__ */ jsx("option", { value: field.name, children: field.name }, field.name))
@@ -5769,13 +5719,13 @@ function EntityNodeConfigForm({ config, entities = [], onSave, onCancel }) {
         )
       ] }, index)) })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 border-t border-gray-200 pt-4 dark:border-gray-700", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 liquid-divider border-t pt-4", children: [
       /* @__PURE__ */ 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")
         }
       ),
@@ -5836,7 +5786,7 @@ function GroupNodeConfigForm({ config, onSave, onCancel }) {
       }
     ),
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300", children: translations("colorField") }),
+      /* @__PURE__ */ jsx("label", { className: "mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300", children: translations("colorField") }),
       /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: GROUP_COLOR_OPTIONS.map((option) => /* @__PURE__ */ jsx(
         "button",
         {
@@ -5871,13 +5821,13 @@ function RuleNodeConfigForm({ config, onSave, onCancel, availableRules }) {
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300", children: t("ruleIdLabel", { _: "Rule" }) }),
+      /* @__PURE__ */ 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__ */ 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__ */ jsx("option", { value: "", children: t("rulePickPrompt", { _: "Choose a rule\u2026" }) }),
             availableRules.map((rule) => /* @__PURE__ */ jsx("option", { value: rule.ruleId, children: rule.name ? `${rule.name} (${rule.ruleId})` : rule.ruleId }, rule.ruleId))
@@ -5892,7 +5842,7 @@ function RuleNodeConfigForm({ config, onSave, onCancel, availableRules }) {
           placeholder: "e.g. peak_hours"
         }
       ),
-      /* @__PURE__ */ jsxs("p", { className: "mt-1 text-[11px] text-gray-500 dark:text-gray-400", children: [
+      /* @__PURE__ */ jsxs("p", { className: "mt-1 text-[11px] text-slate-500 dark:text-slate-400", children: [
         "References an ",
         /* @__PURE__ */ jsx("code", { children: "astrlabe.agent_rules.rule_id" }),
         " row in this organization."
@@ -5909,14 +5859,14 @@ function RuleNodeConfigForm({ config, onSave, onCancel, availableRules }) {
           min: 0
         }
       ),
-      /* @__PURE__ */ jsxs("label", { className: "flex items-end gap-2 pb-2 text-sm text-gray-700 dark:text-gray-300", children: [
+      /* @__PURE__ */ jsxs("label", { className: "flex items-end gap-2 pb-2 text-sm text-slate-700 dark:text-slate-300", children: [
         /* @__PURE__ */ 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" })
@@ -6252,14 +6202,14 @@ function DashboardOutputNodeConfigForm({ config, onSave, onCancel }) {
     }
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: t("description") }),
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: t("description") }),
     /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
       /* @__PURE__ */ 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")
         }
       ),
@@ -6268,13 +6218,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__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300", children: t("referenceLabel") }),
+      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-xs font-medium text-slate-700 dark:text-slate-300", children: t("referenceLabel") }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -6282,12 +6232,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__ */ jsx("p", { className: "mt-1 text-[10px] text-gray-500 dark:text-gray-400", children: t("referenceHelp") })
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-[10px] text-slate-500 dark:text-slate-400", children: t("referenceHelp") })
     ] }) : /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300", children: t("inlineLabel") }),
+      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-xs font-medium text-slate-700 dark:text-slate-300", children: t("inlineLabel") }),
       /* @__PURE__ */ jsx(
         "textarea",
         {
@@ -6295,14 +6245,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__ */ jsxs("p", { className: "mt-1 text-[10px] font-medium text-red-600 dark:text-red-400", children: [
         t("parseError"),
         ": ",
         parseError
-      ] }) : /* @__PURE__ */ jsx("p", { className: "mt-1 text-[10px] text-gray-500 dark:text-gray-400", children: t("inlineHelp") })
+      ] }) : /* @__PURE__ */ jsx("p", { className: "mt-1 text-[10px] text-slate-500 dark:text-slate-400", children: t("inlineHelp") })
     ] }),
     /* @__PURE__ */ jsx(
       ConfigFormActions,
@@ -8583,5 +8533,5 @@ function Workspace({
 }
 
 export { AgentFlowNode, AgentToolFlowNode, AnswerFlowNode, AnthropicIcon, CATEGORY_COLORS, CATEGORY_PILL_COLORS, CodeFlowNode, CrewAIIcon, DocumentExtractorFlowNode, EXPERIMENTAL_NODE_TYPES, EndFlowNode, EntityFlowNode, FRAMEWORK_META, GoogleADKIcon, GroupFlowNode, HttpRequestFlowNode, ICON_MAP, IfElseFlowNode, IterationFlowNode, IterationStartFlowNode, KnowledgeBaseFlowNode, LOGIC_ICON_MAP, LOGIC_NODE_BADGE_COLORS, LOGIC_NODE_GRADIENTS, LOGIC_NODE_HANDLE_COLORS, LangChainIcon, ListOperatorFlowNode, LogicNodeModal, MINIMAP_NODE_COLORS, NODE_EXECUTION_ACCENT_COLORS, NodeCard, NodeCardBadge, NodeCardDeleteAction, NodeCardHeader, NodeCardMeta, NodeContextMenu, NodeIconBubble, NodeInteractiveCard, NodeRunningIndicator, NoteFlowNode, OpenAIIcon, PanelContextMenu, ParameterExtractorFlowNode, QuestionClassifierFlowNode, RuleFlowNode, SelectionContextMenu, StartFlowNode, StrandsIcon, TemplateTransformFlowNode, ToolFlowNode, VariableAggregatorFlowNode, VariableAssignerFlowNode, WorkflowBuilderProvider, WorkflowCanvas, WorkflowHandle, Workspace, getCompatibleModels, getDefaultFrameworkForModel, getEntityBadgeColor, getEntityGradient, getEntityHandleColor, getEntityIcon, getEntityMinimapColor, getFrameworkMeta, getNodeExecutionAccent, getNodeExecutionAccentRgb, isFrameworkCompatibleWithProviders, isModelCompatibleWithFramework, useModalStore, useWorkflowBuilderClient, useWorkflowBuilderClientOptional, useWorkflowStore };
-//# sourceMappingURL=chunk-EDI46QA7.mjs.map
-//# sourceMappingURL=chunk-EDI46QA7.mjs.map
+//# sourceMappingURL=chunk-TRNDFSM6.mjs.map
+//# sourceMappingURL=chunk-TRNDFSM6.mjs.map