@datatechsolutions/ui 3.12.1 → 3.13.1

package/dist/{chunk-5TLKFOEL.mjs → chunk-RSCRIDMW.mjs}

@@ -1,8 +1,8 @@
 "use client";
-import { NodeRunningIndicator, WorkflowHandle, NodeCard, NodeCardHeader, NodeCardMeta, NodeInteractiveCard, NodeIconBubble, NodeCardBadge, NodeCardDeleteAction, Workspace, useModalStore, CATEGORY_COLORS, CATEGORY_PILL_COLORS, ICON_MAP, WorkflowCanvas, EXPERIMENTAL_NODE_TYPES, getEntityIcon, getEntityGradient, useWorkflowStore, LOGIC_ICON_MAP, LOGIC_NODE_GRADIENTS, getFrameworkMeta, getCompatibleModels, isModelCompatibleWithFramework, FRAMEWORK_META, isFrameworkCompatibleWithProviders } from './chunk-EDI46QA7.mjs';
-import { FormInput, FormSelect, Avatar, ToggleSwitch, HeroBlock, GlassModal, SectionCard, FormTextarea, FormGrid, Input, DynamicIslandConfirm } from './chunk-OW5LSEHU.mjs';
-import { useTranslations } from './chunk-7VJ7CMMT.mjs';
-import { Badge, Button } from './chunk-WR55H7DH.mjs';
+import { NodeRunningIndicator, WorkflowHandle, NodeCard, NodeCardHeader, NodeCardMeta, NodeInteractiveCard, NodeIconBubble, NodeCardBadge, NodeCardDeleteAction, Workspace, useModalStore, CATEGORY_COLORS, CATEGORY_PILL_COLORS, ICON_MAP, WorkflowCanvas, EXPERIMENTAL_NODE_TYPES, getEntityIcon, getEntityGradient, useWorkflowStore, LOGIC_ICON_MAP, LOGIC_NODE_GRADIENTS, getFrameworkMeta, getCompatibleModels, isModelCompatibleWithFramework, FRAMEWORK_META, isFrameworkCompatibleWithProviders } from './chunk-TRNDFSM6.mjs';
+import { FormInput, FormSelect, Avatar, ToggleSwitch, HeroBlock, GlassModal, SectionCard, FormTextarea, FormGrid, Input, DynamicIslandConfirm } from './chunk-QEACOJXX.mjs';
+import { useTranslations } from './chunk-ZEFNBGYI.mjs';
+import { Badge, Button, IconButton } from './chunk-O4RZCDP2.mjs';
 import { getAgentTier, createDefaultLogicNodeConfig } from './chunk-G7JQ4OCE.mjs';
 import { memo, useCallback, useMemo, useState, useEffect, useRef, Children } from 'react';
 import { Position } from '@xyflow/react';
@@ -499,17 +499,17 @@ function AgentCapabilityCard({ elo, setElo, models, selectedModelId, setSelected
   }, [family, models, setSelectedModelId, setTemperature, onChanged]);
   const currentFamilyEntry = family.find((entry) => selectedModelId.startsWith(entry.prefix)) ?? family[0];
   const currentModelName = models.find((model) => model.id === selectedModelId)?.name ?? selectedModelId;
-  return /* @__PURE__ */ jsxs("div", { className: "mx-4 mt-4 overflow-hidden rounded-xl border border-gray-200/30 bg-white/40 dark:border-white/10 dark:bg-white/5", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "mx-4 mt-4 overflow-hidden rounded-xl border border-slate-200/30 bg-white/40 dark:border-white/10 dark:bg-white/5", children: [
     /* @__PURE__ */ jsxs("div", { className: "px-4 pt-3 pb-2", children: [
       /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: t("agentDrawer.capabilityRating") }),
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400", children: t("agentDrawer.capabilityRating") }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1", children: [
           /* @__PURE__ */ jsx("span", { className: `text-lg font-bold tabular-nums ${tierInfo.color}`, children: elo }),
-          /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: "ELO" })
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: "ELO" })
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsxs("div", { className: "absolute inset-x-0 top-1/2 h-2 -translate-y-1/2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700", children: [
+        /* @__PURE__ */ jsxs("div", { className: "absolute inset-x-0 top-1/2 h-2 -translate-y-1/2 overflow-hidden rounded-full bg-slate-200 dark:bg-slate-700", children: [
           /* @__PURE__ */ jsx(
             "div",
             {
@@ -520,7 +520,7 @@ function AgentCapabilityCard({ elo, setElo, models, selectedModelId, setSelected
           [1200, 1600, 2e3].map((boundary) => /* @__PURE__ */ jsx(
             "div",
             {
-              className: "absolute top-0 h-full w-px bg-gray-400/40 dark:bg-gray-500/40",
+              className: "absolute top-0 h-full w-px bg-slate-400/40 dark:bg-slate-500/40",
               style: { left: `${(boundary - 800) / (2400 - 800) * 100}%` }
             },
             boundary
@@ -540,12 +540,12 @@ function AgentCapabilityCard({ elo, setElo, models, selectedModelId, setSelected
             "aria-valuemax": 2400,
             "aria-valuenow": elo,
             "aria-valuetext": `${elo} ELO \u2014 ${t(`agentDrawer.tier${tierInfo.tierKey.charAt(0).toUpperCase()}${tierInfo.tierKey.slice(1)}`)}`,
-            className: "relative z-10 h-5 w-full cursor-pointer appearance-none bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-lg dark:[&::-webkit-slider-thumb]:border-gray-900"
+            className: "relative z-10 h-5 w-full cursor-pointer appearance-none bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-lg dark:[&::-webkit-slider-thumb]:border-slate-900"
           }
         ),
         /* @__PURE__ */ jsx("style", { children: `input[type="range"]::-webkit-slider-thumb { background: ${elo < 1200 ? "#06b6d4" : elo < 1600 ? "#ec4899" : elo < 2e3 ? "#f59e0b" : "#10b981"}; box-shadow: 0 0 6px ${elo < 1200 ? "rgba(6,182,212,0.5)" : elo < 1600 ? "rgba(236,72,153,0.5)" : elo < 2e3 ? "rgba(245,158,11,0.5)" : "rgba(16,185,129,0.5)"}; }` })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex justify-between text-[8px] text-gray-400 dark:text-gray-500", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex justify-between text-[8px] text-slate-400 dark:text-slate-500", children: [
         /* @__PURE__ */ jsx("span", { children: "800" }),
         /* @__PURE__ */ jsx("span", { children: "1200" }),
         /* @__PURE__ */ jsx("span", { children: "1600" }),
@@ -553,35 +553,35 @@ function AgentCapabilityCard({ elo, setElo, models, selectedModelId, setSelected
         /* @__PURE__ */ jsx("span", { children: "2400" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-px border-t border-gray-200/30 bg-gray-200/30 dark:border-white/10 dark:bg-white/10", children: [
-      /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-gray-900/60", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-[9px] text-gray-400 dark:text-gray-500", children: t("agentDrawer.model") }),
-        /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-semibold text-gray-900 dark:text-white", children: currentModelName })
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-px border-t border-slate-200/30 bg-slate-200/30 dark:border-white/10 dark:bg-white/10", children: [
+      /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-slate-900/60", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-[9px] text-slate-400 dark:text-slate-500", children: t("agentDrawer.model") }),
+        /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-semibold text-slate-900 dark:text-white", children: currentModelName })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-gray-900/60", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-[9px] text-gray-400 dark:text-gray-500", children: t("agentDrawer.maxTokens") }),
-        /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-gray-900 dark:text-white", children: currentFamilyEntry.maxTokens.toLocaleString() })
+      /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-slate-900/60", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-[9px] text-slate-400 dark:text-slate-500", children: t("agentDrawer.maxTokens") }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-slate-900 dark:text-white", children: currentFamilyEntry.maxTokens.toLocaleString() })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-gray-900/60", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-[9px] text-gray-400 dark:text-gray-500", children: t("agentDrawer.context") }),
-        /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-gray-900 dark:text-white", children: currentFamilyEntry.contextWindow })
+      /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-slate-900/60", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-[9px] text-slate-400 dark:text-slate-500", children: t("agentDrawer.context") }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-slate-900 dark:text-white", children: currentFamilyEntry.contextWindow })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-gray-900/60", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-[9px] text-gray-400 dark:text-gray-500", children: t("agentDrawer.temperature") }),
-        /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-gray-900 dark:text-white", children: temperature.toFixed(2) })
+      /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-slate-900/60", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-[9px] text-slate-400 dark:text-slate-500", children: t("agentDrawer.temperature") }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-slate-900 dark:text-white", children: temperature.toFixed(2) })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-gray-900/60", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-[9px] text-gray-400 dark:text-gray-500", children: t("agentDrawer.autonomy") }),
+      /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-slate-900/60", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-[9px] text-slate-400 dark:text-slate-500", children: t("agentDrawer.autonomy") }),
         /* @__PURE__ */ jsx("p", { className: `text-xs font-semibold ${tierInfo.color}`, children: t(`agentDrawer.${tierInfo.autonomyKey}`) })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-gray-900/60", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-[9px] text-gray-400 dark:text-gray-500", children: t("agentDrawer.costPerTask") }),
-        /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-gray-900 dark:text-white", children: tierInfo.costPerTask })
+      /* @__PURE__ */ jsxs("div", { className: "bg-white/60 px-3 py-2 dark:bg-slate-900/60", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-[9px] text-slate-400 dark:text-slate-500", children: t("agentDrawer.costPerTask") }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-slate-900 dark:text-white", children: tierInfo.costPerTask })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "border-t border-gray-200/30 bg-white/60 px-4 py-2.5 dark:border-white/10 dark:bg-gray-900/60", children: [
+    /* @__PURE__ */ jsxs("div", { className: "border-t border-slate-200/30 bg-white/60 px-4 py-2.5 dark:border-white/10 dark:bg-slate-900/60", children: [
       /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-[9px] text-gray-400 dark:text-gray-500", children: t("agentDrawer.autonomyLevel") }),
+        /* @__PURE__ */ jsx("span", { className: "text-[9px] text-slate-400 dark:text-slate-500", children: t("agentDrawer.autonomyLevel") }),
         /* @__PURE__ */ jsx("span", { className: `text-[10px] font-semibold ${tierInfo.color}`, children: t(`agentDrawer.${tierInfo.autonomyKey}`) })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: [
@@ -596,11 +596,11 @@ function AgentCapabilityCard({ elo, setElo, models, selectedModelId, setSelected
           onClick: () => handleAutonomyClick(level),
           "aria-label": t(`agentDrawer.${labelKey}`),
           "aria-pressed": level <= tierInfo.autonomyPercent,
-          className: `h-2 flex-1 rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 ${level <= tierInfo.autonomyPercent ? `bg-gradient-to-r ${tierInfo.barColor} hover:opacity-80` : "bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600"}`
+          className: `h-2 flex-1 rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 ${level <= tierInfo.autonomyPercent ? `bg-gradient-to-r ${tierInfo.barColor} hover:opacity-80` : "bg-slate-200 hover:bg-slate-300 dark:bg-slate-700 dark:hover:bg-slate-600"}`
         },
         level
       )) }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-1 flex justify-between text-[7px] text-gray-400 dark:text-gray-500", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mt-1 flex justify-between text-[7px] text-slate-400 dark:text-slate-500", children: [
         /* @__PURE__ */ jsx("span", { children: t("agentDrawer.autonomyLow") }),
         /* @__PURE__ */ jsx("span", { children: t("agentDrawer.autonomyMedium") }),
         /* @__PURE__ */ jsx("span", { children: t("agentDrawer.autonomyHigh") }),
@@ -625,7 +625,7 @@ function ConfigTab({ models, t, selectedModelId, setSelectedModelId, selectedFra
   }, [selectedModelId, models, setSelectedFramework, setSelectedModelId, markDirty]);
   return /* @__PURE__ */ jsxs("div", { className: "space-y-5 p-4", children: [
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "mb-2 block text-xs font-medium text-gray-500 dark:text-gray-400", children: t("agentDrawer.framework") }),
+      /* @__PURE__ */ jsx("label", { className: "mb-2 block text-xs font-medium text-slate-500 dark:text-slate-400", children: t("agentDrawer.framework") }),
       /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: frameworkKeys.map((key) => {
         const meta = FRAMEWORK_META[key];
         const isSelected = key === selectedFramework;
@@ -637,7 +637,7 @@ function ConfigTab({ models, t, selectedModelId, setSelectedModelId, selectedFra
             type: "button",
             onClick: () => handleFrameworkChange(key),
             disabled: !isCompatibleWithProviders,
-            className: `inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-[10px] font-semibold transition-all ${!isCompatibleWithProviders ? "cursor-not-allowed bg-gray-100 text-gray-400 opacity-40 dark:bg-white/5 dark:text-gray-500" : isSelected ? `${meta.badgeColor} ring-1 ring-current/20` : "bg-gray-100 text-gray-500 hover:bg-gray-200 dark:bg-white/5 dark:text-gray-400 dark:hover:bg-white/10"}`,
+            className: `inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-[10px] font-semibold transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 ${!isCompatibleWithProviders ? "cursor-not-allowed bg-slate-100 text-slate-400 opacity-40 dark:bg-white/5 dark:text-slate-500" : isSelected ? `${meta.badgeColor} ring-1 ring-current/20` : "bg-slate-100 text-slate-500 hover:bg-slate-200 dark:bg-white/5 dark:text-slate-400 dark:hover:bg-white/10"}`,
             title: !isCompatibleWithProviders ? t("agentDrawer.frameworkIncompatible") : void 0,
             children: [
               /* @__PURE__ */ jsx(meta.IconComponent, { className: "h-3.5 w-3.5" }),
@@ -650,9 +650,9 @@ function ConfigTab({ models, t, selectedModelId, setSelectedModelId, selectedFra
       }) })
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs("label", { className: "mb-2 block text-xs font-medium text-gray-500 dark:text-gray-400", children: [
+      /* @__PURE__ */ jsxs("label", { className: "mb-2 block text-xs font-medium text-slate-500 dark:text-slate-400", children: [
         t("agentDrawer.model"),
-        compatibleModels.length < models.length && /* @__PURE__ */ jsxs("span", { className: "ml-1.5 text-[10px] font-normal text-gray-400 dark:text-gray-500", children: [
+        compatibleModels.length < models.length && /* @__PURE__ */ jsxs("span", { className: "ml-1.5 text-[10px] font-normal text-slate-400 dark:text-slate-500", children: [
           "(",
           compatibleModels.length,
           "/",
@@ -673,12 +673,12 @@ function ConfigTab({ models, t, selectedModelId, setSelectedModelId, selectedFra
               setSelectedModelId(model.id);
               markDirty();
             },
-            className: `flex items-center gap-2.5 rounded-xl border px-3 py-2.5 text-left transition-all ${!isCompatible ? "cursor-not-allowed border-gray-200/30 opacity-35 dark:border-white/5" : isSelected ? "border-indigo-500/50 bg-indigo-50/50 ring-1 ring-indigo-500/30 dark:border-indigo-400/40 dark:bg-indigo-500/10" : "border-gray-200/50 bg-gray-50/50 hover:border-gray-300 dark:border-white/10 dark:bg-white/5 dark:hover:border-white/20"}`,
+            className: `flex items-center gap-2.5 rounded-xl border 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 ${!isCompatible ? "cursor-not-allowed border-slate-200/30 opacity-35 dark:border-white/5" : isSelected ? "border-indigo-500/50 bg-indigo-50/50 ring-1 ring-indigo-500/30 dark:border-indigo-400/40 dark:bg-indigo-500/10" : "border-slate-200/50 bg-white/40 backdrop-blur-sm hover:border-slate-300 dark:border-white/10 dark:bg-white/[0.04] dark:hover:border-white/20"}`,
             children: [
-              /* @__PURE__ */ jsx(IconComponent, { className: `h-5 w-5 flex-shrink-0 ${isSelected && isCompatible ? color : "text-gray-400 dark:text-gray-500"}` }),
+              /* @__PURE__ */ jsx(IconComponent, { className: `h-5 w-5 flex-shrink-0 ${isSelected && isCompatible ? color : "text-slate-400 dark:text-slate-500"}` }),
               /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-                /* @__PURE__ */ jsx("p", { className: `truncate text-xs font-semibold ${isSelected && isCompatible ? "text-gray-900 dark:text-white" : "text-gray-600 dark:text-gray-300"}`, children: model.name }),
-                /* @__PURE__ */ jsx("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: providerLabel })
+                /* @__PURE__ */ jsx("p", { className: `truncate text-xs font-semibold ${isSelected && isCompatible ? "text-slate-900 dark:text-white" : "text-slate-600 dark:text-slate-300"}`, children: model.name }),
+                /* @__PURE__ */ jsx("p", { className: "truncate text-[10px] text-slate-400 dark:text-slate-500", children: providerLabel })
               ] })
             ]
           },
@@ -714,11 +714,11 @@ function PromptTab({
   return /* @__PURE__ */ jsxs("div", { className: "space-y-5 p-4", children: [
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: t("agentDrawer.temperature") }),
-        /* @__PURE__ */ jsx("span", { className: "text-sm font-bold tabular-nums text-gray-900 dark:text-white", children: temperature.toFixed(2) })
+        /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-slate-500 dark:text-slate-400", children: t("agentDrawer.temperature") }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-bold tabular-nums text-slate-900 dark:text-white", children: temperature.toFixed(2) })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-1/2 h-2 -translate-y-1/2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-1/2 h-2 -translate-y-1/2 overflow-hidden rounded-full bg-slate-200 dark:bg-slate-700", children: /* @__PURE__ */ jsx(
           "div",
           {
             className: "h-full rounded-full transition-all duration-300 ease-out",
@@ -737,21 +737,21 @@ function PromptTab({
             "aria-label": t("agentDrawer.temperature"),
             "aria-valuenow": temperature,
             "aria-valuetext": `${temperature.toFixed(2)} \u2014 ${isPrecise ? t("agentDrawer.precise") : isBalanced ? t("agentDrawer.balanced") : t("agentDrawer.creative")}`,
-            className: "relative z-10 h-5 w-full cursor-pointer appearance-none bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-lg dark:[&::-webkit-slider-thumb]:border-gray-900"
+            className: "relative z-10 h-5 w-full cursor-pointer appearance-none bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-lg dark:[&::-webkit-slider-thumb]:border-slate-900"
           }
         ),
         /* @__PURE__ */ jsx("style", { children: `input[type="range"]::-webkit-slider-thumb { background: ${isPrecise ? "#3b82f6" : isBalanced ? "#8b5cf6" : "#ec4899"}; box-shadow: 0 0 8px ${isPrecise ? "rgba(59,130,246,0.5)" : isBalanced ? "rgba(139,92,246,0.5)" : "rgba(236,72,153,0.5)"}; }` })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx("span", { className: `text-[10px] font-medium transition-colors ${isPrecise ? "text-blue-500" : "text-gray-400 dark:text-gray-500"}`, children: t("agentDrawer.precise") }),
-        /* @__PURE__ */ jsx("span", { className: `text-[10px] font-medium transition-colors ${isBalanced ? "text-purple-500" : "text-gray-400 dark:text-gray-500"}`, children: t("agentDrawer.balanced") }),
-        /* @__PURE__ */ jsx("span", { className: `text-[10px] font-medium transition-colors ${isCreative ? "text-pink-500" : "text-gray-400 dark:text-gray-500"}`, children: t("agentDrawer.creative") })
+        /* @__PURE__ */ jsx("span", { className: `text-[10px] font-medium transition-colors ${isPrecise ? "text-blue-500" : "text-slate-400 dark:text-slate-500"}`, children: t("agentDrawer.precise") }),
+        /* @__PURE__ */ jsx("span", { className: `text-[10px] font-medium transition-colors ${isBalanced ? "text-purple-500" : "text-slate-400 dark:text-slate-500"}`, children: t("agentDrawer.balanced") }),
+        /* @__PURE__ */ jsx("span", { className: `text-[10px] font-medium transition-colors ${isCreative ? "text-pink-500" : "text-slate-400 dark:text-slate-500"}`, children: t("agentDrawer.creative") })
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: t("agentDrawer.systemPrompt") }),
-        /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-slate-500 dark:text-slate-400", children: t("agentDrawer.systemPrompt") }),
+        /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: [
           promptText.length,
           " chars"
         ] })
@@ -762,14 +762,14 @@ function PromptTab({
           value: promptText,
           onChange: handlePromptChange,
           rows: 12,
-          className: "w-full resize-y rounded-lg border border-gray-200/50 bg-gray-50/50 px-3 py-2.5 font-mono text-xs leading-relaxed text-gray-700 outline-none transition-colors placeholder:text-gray-400 focus:border-indigo-300/50 focus:ring-1 focus:ring-indigo-300/30 dark:border-white/10 dark:bg-white/5 dark:text-gray-300 dark:placeholder:text-gray-500 dark:focus:border-indigo-500/30 dark:focus:ring-indigo-500/20",
+          className: "liquid-surface w-full resize-y rounded-lg px-3 py-2.5 font-mono text-xs leading-relaxed text-slate-700 outline-none transition-colors placeholder:text-slate-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 dark:text-slate-300 dark:placeholder:text-slate-500",
           placeholder: t("agentDrawer.systemPromptPlaceholder")
         }
       )
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-xs font-medium text-gray-500 dark:text-gray-400", children: t("agentDrawer.outputSchema", { _: "Output schema (optional)" }) }),
-      /* @__PURE__ */ jsx("p", { className: "mb-2 text-[11px] text-gray-400 dark:text-gray-500", children: t("agentDrawer.outputSchemaHint", {
+      /* @__PURE__ */ jsx("label", { className: "mb-1 block text-xs font-medium text-slate-500 dark:text-slate-400", children: t("agentDrawer.outputSchema", { _: "Output schema (optional)" }) }),
+      /* @__PURE__ */ jsx("p", { className: "mb-2 text-[11px] text-slate-400 dark:text-slate-500", children: t("agentDrawer.outputSchemaHint", {
         _: "Define the structured JSON the model must return. The engine parses + validates and exposes it under `output.parsed`. Invalid output fails the node."
       }) }),
       /* @__PURE__ */ jsx(
@@ -788,8 +788,8 @@ function PromptTab({
 function ToolsTab({ agentTools, enabledToolIds, onToggle, agentFramework, t }) {
   if (agentTools.length === 0) {
     return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center px-4 py-12 text-center", children: [
-      /* @__PURE__ */ jsx(CommandLineIcon, { className: "mb-2 h-8 w-8 text-gray-400 dark:text-gray-500" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: t("agentDrawer.noToolsAvailable") })
+      /* @__PURE__ */ jsx(CommandLineIcon, { className: "mb-2 h-8 w-8 text-slate-400 dark:text-slate-500" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500 dark:text-slate-400", children: t("agentDrawer.noToolsAvailable") })
     ] });
   }
   const sortedTools = [...agentTools].sort((a, b) => {
@@ -800,7 +800,7 @@ function ToolsTab({ agentTools, enabledToolIds, onToggle, agentFramework, t }) {
     return 0;
   });
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2 p-4", children: [
-    /* @__PURE__ */ jsx("p", { className: "mb-3 text-xs text-gray-500 dark:text-gray-400", children: t("agentDrawer.toolsDescription") }),
+    /* @__PURE__ */ jsx("p", { className: "mb-3 text-xs text-slate-500 dark:text-slate-400", children: t("agentDrawer.toolsDescription") }),
     sortedTools.map((tool) => {
       const isEnabled = enabledToolIds.has(tool.agentToolId);
       const isCompatible = !tool.compatibleFrameworks || tool.compatibleFrameworks.length === 0 || tool.compatibleFrameworks.includes(agentFramework);
@@ -809,26 +809,26 @@ function ToolsTab({ agentTools, enabledToolIds, onToggle, agentFramework, t }) {
         {
           type: "button",
           onClick: () => onToggle(tool.agentToolId),
-          className: `flex w-full items-center gap-3 rounded-xl border px-4 py-3 text-left transition-all ${!isCompatible ? "border-gray-200/30 opacity-40 dark:border-white/5" : isEnabled ? "border-amber-500/30 bg-amber-50/50 dark:border-amber-400/20 dark:bg-amber-500/5" : "border-gray-200/50 bg-gray-50/30 hover:border-gray-300 dark:border-white/10 dark:bg-white/[0.02] dark:hover:border-white/20"}`,
+          className: `flex w-full items-center gap-3 rounded-xl border px-4 py-3 text-left transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 ${!isCompatible ? "border-slate-200/30 opacity-40 dark:border-white/5" : isEnabled ? "border-amber-500/30 bg-amber-50/50 dark:border-amber-400/20 dark:bg-amber-500/5" : "border-slate-200/50 bg-white/40 backdrop-blur-sm hover:border-slate-300 dark:border-white/10 dark:bg-white/[0.04] dark:hover:border-white/20"}`,
           disabled: !isCompatible,
           children: [
-            /* @__PURE__ */ jsx("div", { className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${isEnabled ? "bg-gradient-to-br from-amber-400 to-orange-500" : "bg-gray-200 dark:bg-gray-700"}`, children: /* @__PURE__ */ jsx(CommandLineIcon, { className: `h-4 w-4 ${isEnabled ? "text-white" : "text-gray-500 dark:text-gray-400"}` }) }),
+            /* @__PURE__ */ jsx("div", { className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${isEnabled ? "bg-gradient-to-br from-amber-400 to-orange-500" : "bg-slate-200 dark:bg-slate-700"}`, children: /* @__PURE__ */ jsx(CommandLineIcon, { className: `h-4 w-4 ${isEnabled ? "text-white" : "text-slate-500 dark:text-slate-400"}` }) }),
             /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-                /* @__PURE__ */ jsx("p", { className: `text-sm font-medium ${isEnabled ? "text-gray-900 dark:text-white" : "text-gray-600 dark:text-gray-400"}`, children: tool.name }),
-                !isCompatible && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-gray-100 px-1.5 py-0.5 text-[8px] font-medium text-gray-500 dark:bg-white/10 dark:text-gray-400", children: "incompatible" })
+                /* @__PURE__ */ jsx("p", { className: `text-sm font-medium ${isEnabled ? "text-slate-900 dark:text-white" : "text-slate-600 dark:text-slate-400"}`, children: tool.name }),
+                !isCompatible && /* @__PURE__ */ jsx(Badge, { color: "zinc", size: "xs", children: "incompatible" })
               ] }),
-              tool.description && /* @__PURE__ */ jsx("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: tool.description }),
+              tool.description && /* @__PURE__ */ jsx("p", { className: "truncate text-[10px] text-slate-400 dark:text-slate-500", children: tool.description }),
               tool.compatibleFrameworks && tool.compatibleFrameworks.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-1 flex flex-wrap gap-0.5", children: tool.compatibleFrameworks.map((framework) => {
                 const meta = getFrameworkMeta(framework);
                 const isCurrentFw = framework === agentFramework;
-                return /* @__PURE__ */ jsxs("span", { className: `inline-flex items-center gap-0.5 rounded px-1.5 py-0.5 text-[8px] font-medium ${isCurrentFw ? meta.badgeColor : "bg-gray-100 text-gray-500 dark:bg-white/5 dark:text-gray-400"}`, children: [
+                return /* @__PURE__ */ jsxs("span", { className: `inline-flex items-center gap-0.5 rounded px-1.5 py-0.5 text-[8px] font-medium ${isCurrentFw ? meta.badgeColor : "bg-slate-100 text-slate-500 dark:bg-white/5 dark:text-slate-400"}`, children: [
                   /* @__PURE__ */ jsx(meta.IconComponent, { className: "h-2.5 w-2.5" }),
                   meta.label
                 ] }, framework);
               }) })
             ] }),
-            /* @__PURE__ */ jsx("div", { className: `flex h-5 w-5 shrink-0 items-center justify-center rounded-full transition-all ${isEnabled ? "bg-amber-500 text-white" : "border border-gray-300 dark:border-gray-600"}`, children: isEnabled && /* @__PURE__ */ jsx(CheckIcon, { className: "h-3 w-3" }) }),
+            /* @__PURE__ */ jsx("div", { className: `flex h-5 w-5 shrink-0 items-center justify-center rounded-full transition-all ${isEnabled ? "bg-amber-500 text-white" : "border border-slate-300 dark:border-slate-600"}`, children: isEnabled && /* @__PURE__ */ jsx(CheckIcon, { className: "h-3 w-3" }) }),
             /* @__PURE__ */ jsx(
               "div",
               {
@@ -886,7 +886,7 @@ function EngineTab({
   const configuredCompatible = compatibleProviders.filter((p) => p.configured);
   const effectiveProvider = compatibleProviders.find((p) => p.id === selectedProviderId) ?? configuredCompatible[0] ?? compatibleProviders[0];
   const frameworkMeta = getFrameworkMeta(selectedFramework);
-  const inputCard = "liquid-surface w-full rounded-lg px-3 py-1.5 text-sm text-gray-800 outline-none transition-colors focus:ring-1 focus:ring-indigo-300/40 dark:text-gray-200 dark:focus:ring-indigo-500/20";
+  const inputCard = "liquid-surface w-full rounded-lg px-3 py-1.5 text-sm text-slate-800 outline-none transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 dark:text-slate-200";
   return /* @__PURE__ */ jsx("div", { className: "p-5", children: /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-2xl border border-indigo-500/20 bg-gradient-to-b from-indigo-500/[0.04] via-violet-500/[0.03] to-purple-500/[0.04] dark:border-indigo-400/20 dark:from-indigo-500/[0.10] dark:via-violet-500/[0.06] dark:to-purple-500/[0.08]", children: [
     /* @__PURE__ */ jsx("div", { className: "px-4 pb-3 pt-4", children: /* @__PURE__ */ jsx(
       AgentCapabilityCard,
@@ -914,9 +914,9 @@ function EngineTab({
       /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
         /* @__PURE__ */ jsx(CpuChipIcon, { className: "mt-0.5 h-5 w-5 text-indigo-500 dark:text-indigo-400" }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: modelName }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: modelName }),
           compatibleProviders.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-[10px] text-amber-600 dark:text-amber-400", children: t("agentDrawer.noProviderForFamily", { _: "Nenhum provedor configurado serve a fam\xEDlia " + family }) }) : configuredCompatible.length > 1 ? /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-500 dark:text-gray-400", children: t("agentDrawer.servedVia", { _: "via" }) }),
+            /* @__PURE__ */ jsx("span", { className: "text-[10px] text-slate-500 dark:text-slate-400", children: t("agentDrawer.servedVia", { _: "via" }) }),
             /* @__PURE__ */ jsx(
               "select",
               {
@@ -925,22 +925,17 @@ function EngineTab({
                   onSelectProvider(event.target.value);
                   markDirty();
                 },
-                className: "liquid-surface rounded-md px-2 py-0.5 text-[10px] font-semibold text-gray-900 outline-none focus:ring-1 focus:ring-indigo-300/40 dark:text-white",
+                "aria-label": t("agentDrawer.servedVia", { _: "via" }),
+                className: "liquid-surface rounded-md px-2 py-0.5 text-[10px] font-semibold 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",
                 children: configuredCompatible.map((p) => /* @__PURE__ */ jsx("option", { value: p.id, children: p.name }, p.id))
               }
             ),
-            effectiveProvider && /* @__PURE__ */ jsxs("span", { className: `inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[9px] font-semibold ${effectiveProvider.configured ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" : "bg-amber-500/10 text-amber-600 dark:text-amber-400"}`, children: [
-              /* @__PURE__ */ jsx("span", { className: `h-1 w-1 rounded-full ${effectiveProvider.configured ? "bg-emerald-500" : "bg-amber-500"}` }),
-              effectiveProvider.configured ? t("agentDrawer.configured", { _: "connected" }) : t("agentDrawer.setup", { _: "setup" })
-            ] })
-          ] }) : /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-gray-500 dark:text-gray-400", children: [
+            effectiveProvider && /* @__PURE__ */ jsx(Badge, { color: effectiveProvider.configured ? "emerald" : "amber", size: "xs", children: effectiveProvider.configured ? t("agentDrawer.configured", { _: "connected" }) : t("agentDrawer.setup", { _: "setup" }) })
+          ] }) : /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-slate-500 dark:text-slate-400", children: [
             t("agentDrawer.servedVia", { _: "via" }),
             " ",
             effectiveProvider?.name ?? family,
-            effectiveProvider && /* @__PURE__ */ jsxs("span", { className: `ml-2 inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[9px] font-semibold ${effectiveProvider.configured ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" : "bg-amber-500/10 text-amber-600 dark:text-amber-400"}`, children: [
-              /* @__PURE__ */ jsx("span", { className: `h-1 w-1 rounded-full ${effectiveProvider.configured ? "bg-emerald-500" : "bg-amber-500"}` }),
-              effectiveProvider.configured ? t("agentDrawer.configured", { _: "connected" }) : t("agentDrawer.setup", { _: "setup" })
-            ] })
+            effectiveProvider && /* @__PURE__ */ jsx("span", { className: "ml-2 inline-flex", children: /* @__PURE__ */ jsx(Badge, { color: effectiveProvider.configured ? "emerald" : "amber", size: "xs", children: effectiveProvider.configured ? t("agentDrawer.configured", { _: "connected" }) : t("agentDrawer.setup", { _: "setup" }) }) })
           ] })
         ] })
       ] }),
@@ -950,13 +945,13 @@ function EngineTab({
       ] })
     ] }) }),
     /* @__PURE__ */ jsxs("details", { className: "group border-t border-indigo-500/15 bg-white/30 px-4 py-2.5 dark:border-indigo-400/15 dark:bg-white/[0.02]", children: [
-      /* @__PURE__ */ jsxs("summary", { className: "flex cursor-pointer items-center gap-2 text-[10px] font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: [
+      /* @__PURE__ */ jsxs("summary", { className: "flex cursor-pointer items-center gap-2 text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400", children: [
         /* @__PURE__ */ jsx(Cog6ToothIcon, { className: "h-3 w-3" }),
         /* @__PURE__ */ jsx("span", { children: t("agentDrawer.overrideDerivation", { _: "Override \xB7 ajustes avan\xE7ados" }) }),
-        /* @__PURE__ */ jsx("span", { className: "ml-auto font-normal text-gray-400 group-open:hidden", children: "\u25BE" }),
-        /* @__PURE__ */ jsx("span", { className: "ml-auto hidden font-normal text-gray-400 group-open:inline", children: "\u25B4" })
+        /* @__PURE__ */ jsx("span", { className: "ml-auto font-normal text-slate-400 group-open:hidden", children: "\u25BE" }),
+        /* @__PURE__ */ jsx("span", { className: "ml-auto hidden font-normal text-slate-400 group-open:inline", children: "\u25B4" })
       ] }),
-      /* @__PURE__ */ jsx("p", { className: "mt-1 text-[10px] italic text-gray-400 dark:text-gray-500", children: t("agentDrawer.overrideHint", { _: "Mude framework, modelo manual ou tokens s\xF3 se a deriva\xE7\xE3o por ELO n\xE3o atender." }) }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-[10px] italic text-slate-400 dark:text-slate-500", children: t("agentDrawer.overrideHint", { _: "Mude framework, modelo manual ou tokens s\xF3 se a deriva\xE7\xE3o por ELO n\xE3o atender." }) }),
       /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-4", children: [
         /* @__PURE__ */ jsx(
           ConfigTab,
@@ -972,13 +967,13 @@ function EngineTab({
           }
         ),
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("p", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: t("agentDrawer.generationParams", { _: "Par\xE2metros de gera\xE7\xE3o" }) }),
+          /* @__PURE__ */ jsx("p", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400", children: t("agentDrawer.generationParams", { _: "Par\xE2metros de gera\xE7\xE3o" }) }),
           /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: [
             { key: "max", labelKey: "agentDrawer.maxOutputTokens", label: "Max output", value: maxOutputTokens, setter: setMaxOutputTokens, step: 1, min: 1, max: 32768 },
             { key: "topP", labelKey: "agentDrawer.topP", label: "Top-p", value: topP, setter: setTopP, step: 0.05, min: 0, max: 1 },
             { key: "topK", labelKey: "agentDrawer.topK", label: "Top-k", value: topK, setter: setTopK, step: 1, min: 0, max: 500 }
           ].map((field) => /* @__PURE__ */ jsxs("div", { className: `${inputCard} flex flex-col items-center !py-2`, children: [
-            /* @__PURE__ */ jsx("span", { className: "text-[8px] font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: t(field.labelKey, { _: field.label }) }),
+            /* @__PURE__ */ jsx("span", { className: "text-[8px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400", children: t(field.labelKey, { _: field.label }) }),
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -991,14 +986,14 @@ function EngineTab({
                   field.setter(Number(event.target.value) || 0);
                   markDirty();
                 },
-                className: "w-full bg-transparent text-center text-sm font-semibold tabular-nums text-gray-900 outline-none dark:text-white"
+                className: "w-full bg-transparent text-center text-sm font-semibold tabular-nums text-slate-900 outline-none dark:text-white"
               }
             )
           ] }, field.key)) })
         ] }),
         modelProviders.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: t("agentDrawer.providerCredentials", { _: "Credenciais do provedor" }) }),
+            /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400", children: t("agentDrawer.providerCredentials", { _: "Credenciais do provedor" }) }),
             /* @__PURE__ */ jsx(
               "a",
               {
@@ -1011,17 +1006,17 @@ function EngineTab({
           /* @__PURE__ */ jsx("div", { className: "space-y-1", children: modelProviders.map((provider) => /* @__PURE__ */ jsxs(
             "div",
             {
-              className: "flex items-center gap-2 rounded-lg border border-gray-200/50 bg-white/40 px-3 py-1.5 dark:border-white/10 dark:bg-white/[0.03]",
+              className: "flex items-center gap-2 rounded-lg border border-slate-200/50 bg-white/40 px-3 py-1.5 dark:border-white/10 dark:bg-white/[0.04]",
               children: [
-                /* @__PURE__ */ jsx(KeyIcon, { className: "h-3 w-3 shrink-0 text-gray-500 dark:text-gray-400" }),
-                /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold text-gray-900 dark:text-white", children: provider.name }),
-                /* @__PURE__ */ jsx("span", { className: `shrink-0 rounded-full px-1.5 py-0.5 text-[8px] font-semibold uppercase ${provider.configured ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" : "bg-amber-500/10 text-amber-600 dark:text-amber-400"}`, children: provider.configured ? t("agentDrawer.configured", { _: "connected" }) : t("agentDrawer.setup", { _: "setup" }) }),
-                provider.apiKeyMasked && /* @__PURE__ */ jsx("span", { className: "ml-auto truncate font-mono text-[9px] text-gray-400 dark:text-gray-500", title: provider.credentialRef, children: provider.apiKeyMasked })
+                /* @__PURE__ */ jsx(KeyIcon, { className: "h-3 w-3 shrink-0 text-slate-500 dark:text-slate-400" }),
+                /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold text-slate-900 dark:text-white", children: provider.name }),
+                /* @__PURE__ */ jsx(Badge, { color: provider.configured ? "emerald" : "amber", size: "xs", children: provider.configured ? t("agentDrawer.configured", { _: "connected" }) : t("agentDrawer.setup", { _: "setup" }) }),
+                provider.apiKeyMasked && /* @__PURE__ */ jsx("span", { className: "ml-auto truncate font-mono text-[9px] text-slate-400 dark:text-slate-500", title: provider.credentialRef, children: provider.apiKeyMasked })
               ]
             },
             provider.id
           )) }),
-          /* @__PURE__ */ jsx("p", { className: "mt-2 text-[10px] text-gray-400 dark:text-gray-500", children: selectedProviderId ? "" : t("agentDrawer.providerHint", { _: "Credenciais s\xE3o configuradas no n\xEDvel da conta. Aqui voc\xEA s\xF3 confere o que est\xE1 conectado." }) })
+          /* @__PURE__ */ jsx("p", { className: "mt-2 text-[10px] text-slate-400 dark:text-slate-500", children: selectedProviderId ? "" : t("agentDrawer.providerHint", { _: "Credenciais s\xE3o configuradas no n\xEDvel da conta. Aqui voc\xEA s\xF3 confere o que est\xE1 conectado." }) })
         ] })
       ] })
     ] })
@@ -1175,7 +1170,7 @@ function AgentModal({ onSaved, onPersist }) {
   if (!agent) return null;
   const sections = [];
   const effectiveAvatarUrl = avatarUrl || agent.avatar;
-  const fieldCard = "liquid-surface w-full rounded-lg px-2.5 py-1.5 text-xs text-gray-800 outline-none transition-colors focus:ring-1 focus:ring-indigo-300/40 dark:text-gray-200 dark:focus:ring-indigo-500/20";
+  const fieldCard = "liquid-surface w-full rounded-lg px-2.5 py-1.5 text-xs text-slate-800 outline-none transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 dark:text-slate-200";
   const fieldLabel = "text-[9px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400";
   const avatarInitial = (displayName || agent.name).charAt(0).toUpperCase();
   const avatarNode = /* @__PURE__ */ jsx(
@@ -1449,9 +1444,9 @@ function ConfigSection({ title, icon: Icon, defaultOpen = true, children }) {
         "aria-expanded": open,
         className: "flex w-full items-center gap-2 px-4 py-2.5 text-left hover:bg-white/5",
         children: [
-          open ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3 w-3 text-gray-400" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3 text-gray-400" }),
-          /* @__PURE__ */ jsx(Icon, { className: "h-3 w-3 text-gray-400" }),
-          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: title })
+          open ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3 w-3 text-slate-400" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3 text-slate-400" }),
+          /* @__PURE__ */ jsx(Icon, { className: "h-3 w-3 text-slate-400" }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400", children: title })
         ]
       }
     ),
@@ -1518,22 +1513,15 @@ function SubworkflowModal({ onSaved, onMaximize }) {
   const footer = /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
     /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", className: "text-xs", children: dirty ? /* @__PURE__ */ jsx("span", { className: "text-amber-500 dark:text-amber-400", children: t("subworkflowDrawer.unsavedChanges") }) : /* @__PURE__ */ jsx("span", { className: "text-emerald-500 dark:text-emerald-400", children: t("subworkflowDrawer.saved") }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", outline: true, size: "sm", onClick: closeModal, children: t("subworkflowDrawer.cancel") }),
       /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: closeModal,
-          className: "rounded-lg border border-gray-200/50 px-4 py-2 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100/50 dark:border-white/10 dark:text-gray-300 dark:hover:bg-white/5",
-          children: t("subworkflowDrawer.cancel")
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
           type: "button",
+          color: "ios-teal",
+          size: "sm",
           onClick: handleSave,
-          disabled: isCreateMode && !name.trim(),
-          className: `rounded-lg px-4 py-2 text-xs font-semibold text-white shadow-sm transition-all ${dirty ? "bg-gradient-to-r from-teal-500 to-cyan-500 hover:from-teal-600 hover:to-cyan-600" : "cursor-not-allowed bg-gray-300 dark:bg-gray-700"}`,
+          disabled: isCreateMode && !name.trim() || !dirty,
           children: isCreateMode ? t("subworkflowDrawer.create") : t("subworkflowDrawer.save")
         }
       )
@@ -1555,7 +1543,7 @@ function SubworkflowModal({ onSaved, onMaximize }) {
       children: /* @__PURE__ */ jsxs("div", { className: "flex h-[80vh] min-h-[600px]", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex w-72 flex-shrink-0 flex-col overflow-y-auto border-r border-white/10", children: [
           isCreateMode ? /* @__PURE__ */ jsxs("div", { className: "border-b border-white/10 bg-gradient-to-br from-teal-500/15 via-cyan-500/8 to-transparent px-4 py-4 dark:from-teal-500/8 dark:via-cyan-500/4", children: [
-            /* @__PURE__ */ jsx("label", { className: "mb-1 block text-[10px] font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: t("subworkflowDrawer.name") }),
+            /* @__PURE__ */ jsx("label", { className: "mb-1 block text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400", children: t("subworkflowDrawer.name") }),
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -1564,7 +1552,7 @@ function SubworkflowModal({ onSaved, onMaximize }) {
                 onChange: (event) => setName(event.target.value),
                 placeholder: t("subworkflowDrawer.namePlaceholder"),
                 autoFocus: true,
-                className: "w-full rounded-lg border border-gray-200/50 bg-white/60 px-3 py-2 text-sm font-medium text-gray-900 outline-none placeholder:text-gray-400 focus:border-teal-300/50 focus:ring-1 focus:ring-teal-300/30 dark:border-white/10 dark:bg-white/5 dark:text-white dark:placeholder:text-gray-500"
+                className: "w-full rounded-lg bg-white/40 dark:bg-white/[0.04] backdrop-blur-sm border border-slate-200/50 dark:border-white/10 px-3 py-2 text-sm font-medium text-slate-900 outline-none placeholder:text-slate-400 focus:border-teal-300/50 focus:ring-1 focus:ring-teal-300/30 dark:text-white dark:placeholder:text-slate-500"
               }
             ),
             /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-1", children: ["external", "market", "data", "communication", "analytics"].map((cat) => /* @__PURE__ */ jsx(
@@ -1572,7 +1560,7 @@ function SubworkflowModal({ onSaved, onMaximize }) {
               {
                 type: "button",
                 onClick: () => setCategory(cat),
-                className: `rounded-full px-2 py-1 text-[9px] font-semibold transition-all ${cat === category ? `${CATEGORY_PILL_COLORS[cat] ?? CATEGORY_PILL_COLORS.external} ring-1 ring-current/20` : "bg-white/30 text-gray-500 hover:bg-white/50 dark:bg-white/5 dark:text-gray-400"}`,
+                className: `rounded-full px-2 py-1 text-[9px] font-semibold transition-all ${cat === category ? `${CATEGORY_PILL_COLORS[cat] ?? CATEGORY_PILL_COLORS.external} ring-1 ring-current/20` : "bg-white/30 text-slate-500 hover:bg-white/50 dark:bg-white/5 dark:text-slate-400"}`,
                 children: cat
               },
               cat
@@ -1580,7 +1568,7 @@ function SubworkflowModal({ onSaved, onMaximize }) {
           ] }) : /* @__PURE__ */ jsx("div", { className: "border-b border-white/10 bg-gradient-to-br from-teal-500/15 via-cyan-500/8 to-transparent px-4 py-4 dark:from-teal-500/8 dark:via-cyan-500/4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
             /* @__PURE__ */ jsx("div", { className: `flex h-10 w-10 shrink-0 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: "truncate text-sm font-bold text-gray-900 dark:text-white", children: name }),
+              /* @__PURE__ */ jsx("h3", { className: "truncate text-sm font-bold text-slate-900 dark:text-white", children: name }),
               /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-wrap gap-1", children: [
                 /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full bg-teal-100 px-1.5 py-0.5 text-[8px] font-semibold text-teal-700 dark:bg-teal-400/15 dark:text-teal-400", children: t("subworkflowDrawer.subworkflow") }),
                 /* @__PURE__ */ jsx("span", { className: `inline-flex items-center rounded-full px-1.5 py-0.5 text-[8px] font-medium ${categoryPill}`, children: category })
@@ -1592,7 +1580,7 @@ function SubworkflowModal({ onSaved, onMaximize }) {
                 type: "button",
                 onClick: () => onMaximize(tool.toolId),
                 title: t("subworkflowDrawer.openFullEditor"),
-                className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-white/10 hover:text-teal-500 dark:hover:text-teal-400",
+                className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-slate-400 transition-colors hover:bg-white/10 hover:text-teal-500 dark:hover:text-teal-400",
                 children: /* @__PURE__ */ jsx(ArrowsPointingOutIcon, { className: "h-4 w-4" })
               }
             )
@@ -1604,19 +1592,19 @@ function SubworkflowModal({ onSaved, onMaximize }) {
               onChange: (event) => setDescription(event.target.value),
               rows: 2,
               placeholder: t("subworkflowDrawer.descriptionPlaceholder"),
-              className: "w-full resize-none rounded-lg border border-gray-200/50 bg-gray-50/50 px-2.5 py-2 text-[11px] leading-relaxed text-gray-700 outline-none placeholder:text-gray-400 focus:border-teal-300/50 dark:border-white/10 dark:bg-white/5 dark:text-gray-300 dark:placeholder:text-gray-500"
+              className: "w-full resize-none rounded-lg bg-white/40 dark:bg-white/[0.04] backdrop-blur-sm border border-slate-200/50 dark:border-white/10 px-2.5 py-2 text-[11px] leading-relaxed text-slate-700 outline-none placeholder:text-slate-400 focus:border-teal-300/50 dark:text-slate-300 dark:placeholder:text-slate-500"
             }
           ) }),
-          /* @__PURE__ */ jsx(ConfigSection, { title: t("subworkflowDrawer.inputVariables"), icon: ArrowsPointingInIcon, children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: inputVariables.length > 0 ? inputVariables.map((variable) => /* @__PURE__ */ jsx(VariableChip, { name: variable.name, type: variable.type }, variable.name)) : /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: t("subworkflowDrawer.noVariables") }) }) }),
-          /* @__PURE__ */ jsx(ConfigSection, { title: t("subworkflowDrawer.outputVariables"), icon: ArrowsPointingOutIcon, children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: outputVariables.length > 0 ? outputVariables.map((variable) => /* @__PURE__ */ jsx(OutputChip, { name: variable.name, type: variable.type }, variable.name)) : /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: t("subworkflowDrawer.noVariables") }) }) }),
+          /* @__PURE__ */ jsx(ConfigSection, { title: t("subworkflowDrawer.inputVariables"), icon: ArrowsPointingInIcon, children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: inputVariables.length > 0 ? inputVariables.map((variable) => /* @__PURE__ */ jsx(VariableChip, { name: variable.name, type: variable.type }, variable.name)) : /* @__PURE__ */ jsx("span", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: t("subworkflowDrawer.noVariables") }) }) }),
+          /* @__PURE__ */ jsx(ConfigSection, { title: t("subworkflowDrawer.outputVariables"), icon: ArrowsPointingOutIcon, children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: outputVariables.length > 0 ? outputVariables.map((variable) => /* @__PURE__ */ jsx(OutputChip, { name: variable.name, type: variable.type }, variable.name)) : /* @__PURE__ */ jsx("span", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: t("subworkflowDrawer.noVariables") }) }) }),
           /* @__PURE__ */ jsxs(ConfigSection, { title: t("subworkflowDrawer.executionSettings"), icon: BoltIcon, defaultOpen: false, children: [
             /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
               /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
-                /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1 text-[10px] text-gray-600 dark:text-gray-400", children: [
+                /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1 text-[10px] text-slate-600 dark:text-slate-400", children: [
                   /* @__PURE__ */ jsx(ClockIcon, { className: "h-3 w-3" }),
                   t("subworkflowDrawer.timeout")
                 ] }),
-                /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-bold tabular-nums text-gray-900 dark:text-white", children: [
+                /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-bold tabular-nums text-slate-900 dark:text-white", children: [
                   (timeoutMs / 1e3).toFixed(0),
                   "s"
                 ] })
@@ -1635,21 +1623,21 @@ function SubworkflowModal({ onSaved, onMaximize }) {
                   "aria-valuemax": 30,
                   "aria-valuenow": timeoutMs / 1e3,
                   "aria-valuetext": `${(timeoutMs / 1e3).toFixed(0)} seconds`,
-                  className: "h-3 w-full cursor-pointer appearance-none rounded-full bg-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 dark:bg-gray-700 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-teal-500"
+                  className: "h-3 w-full cursor-pointer appearance-none rounded-full bg-slate-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 dark:bg-slate-700 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-teal-500"
                 }
               )
             ] }),
             /* @__PURE__ */ jsxs("div", { children: [
               /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between", children: [
-                /* @__PURE__ */ jsx("label", { className: "text-[10px] text-gray-600 dark:text-gray-400", children: t("subworkflowDrawer.retries") }),
-                /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold tabular-nums text-gray-900 dark:text-white", children: retryCount })
+                /* @__PURE__ */ jsx("label", { className: "text-[10px] text-slate-600 dark:text-slate-400", children: t("subworkflowDrawer.retries") }),
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold tabular-nums text-slate-900 dark:text-white", children: retryCount })
               ] }),
               /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: [0, 1, 2, 3].map((count) => /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
                   onClick: () => setRetryCount(count),
-                  className: `flex-1 rounded py-1 text-[10px] font-medium transition-all ${count === retryCount ? "bg-teal-500 text-white" : "bg-gray-100 text-gray-500 dark:bg-white/5 dark:text-gray-400"}`,
+                  className: `flex-1 rounded py-1 text-[10px] font-medium transition-all ${count === retryCount ? "bg-teal-500 text-white" : "bg-white/40 text-slate-500 dark:bg-white/5 dark:text-slate-400"}`,
                   children: count
                 },
                 count
@@ -1728,15 +1716,7 @@ function PipelineSettingsModal({ onSave }) {
     }
   };
   const footer = /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2", children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: closeModal,
-        className: "rounded-lg border border-gray-200/50 px-4 py-2 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100/50 dark:border-white/10 dark:text-gray-300 dark:hover:bg-white/5",
-        children: t("cancel")
-      }
-    ),
+    /* @__PURE__ */ jsx(Button, { type: "button", outline: true, size: "sm", onClick: closeModal, children: t("cancel") }),
     /* @__PURE__ */ jsxs(
       Button,
       {
@@ -1810,12 +1790,12 @@ function PipelineSettingsModal({ onSave }) {
                   })
                 }
               ),
-              /* @__PURE__ */ jsxs("fieldset", { className: "space-y-2 rounded-xl border border-gray-200/60 bg-gray-50/60 p-3 dark:border-white/10 dark:bg-white/5", children: [
-                /* @__PURE__ */ jsx("legend", { className: "px-1 text-xs font-medium text-gray-600 dark:text-gray-300", children: t("pipelineLifecycle", { _: "Lifecycle" }) }),
-                /* @__PURE__ */ jsxs("label", { className: "flex items-center justify-between gap-3 text-sm text-gray-700 dark:text-gray-200", children: [
+              /* @__PURE__ */ jsxs("fieldset", { className: "space-y-2 rounded-xl liquid-surface p-3", children: [
+                /* @__PURE__ */ jsx("legend", { className: "px-1 text-xs font-medium text-slate-600 dark:text-slate-300", children: t("pipelineLifecycle", { _: "Lifecycle" }) }),
+                /* @__PURE__ */ jsxs("label", { className: "flex items-center justify-between gap-3 text-sm text-slate-700 dark:text-slate-200", children: [
                   /* @__PURE__ */ jsxs("span", { children: [
                     t("pipelineIsDraft", { _: "Draft mode" }),
-                    /* @__PURE__ */ jsx("span", { className: "ml-2 text-[11px] text-gray-400", children: isDraft ? t("pipelineIsDraftOn", { _: "Editable \u2014 changes do not affect runs." }) : t("pipelineIsDraftOff", { _: "Published \u2014 edits require a new version." }) })
+                    /* @__PURE__ */ jsx("span", { className: "ml-2 text-[11px] text-slate-400", children: isDraft ? t("pipelineIsDraftOn", { _: "Editable \u2014 changes do not affect runs." }) : t("pipelineIsDraftOff", { _: "Published \u2014 edits require a new version." }) })
                   ] }),
                   /* @__PURE__ */ jsx(
                     "input",
@@ -1823,14 +1803,14 @@ function PipelineSettingsModal({ onSave }) {
                       type: "checkbox",
                       checked: isDraft,
                       onChange: (event) => setIsDraft(event.target.checked),
-                      className: "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                      className: "h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500/70 focus:ring-offset-1"
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs("label", { className: "flex items-center justify-between gap-3 text-sm text-gray-700 dark:text-gray-200", children: [
+                /* @__PURE__ */ jsxs("label", { className: "flex items-center justify-between gap-3 text-sm text-slate-700 dark:text-slate-200", children: [
                   /* @__PURE__ */ jsxs("span", { children: [
                     t("pipelineIsActive", { _: "Active" }),
-                    /* @__PURE__ */ jsx("span", { className: "ml-2 text-[11px] text-gray-400", children: isActive ? t("pipelineIsActiveOn", { _: "Visible in listings and runnable." }) : t("pipelineIsActiveOff", { _: "Archived \u2014 hidden from the default listing." }) })
+                    /* @__PURE__ */ jsx("span", { className: "ml-2 text-[11px] text-slate-400", children: isActive ? t("pipelineIsActiveOn", { _: "Visible in listings and runnable." }) : t("pipelineIsActiveOff", { _: "Archived \u2014 hidden from the default listing." }) })
                   ] }),
                   /* @__PURE__ */ jsx(
                     "input",
@@ -1838,7 +1818,7 @@ function PipelineSettingsModal({ onSave }) {
                       type: "checkbox",
                       checked: isActive,
                       onChange: (event) => setIsActive(event.target.checked),
-                      className: "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                      className: "h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500/70 focus:ring-offset-1"
                     }
                   )
                 ] })
@@ -1918,15 +1898,7 @@ function RunReplayModal({
       /* @__PURE__ */ jsx("code", { children: workflowId.slice(0, 8) })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onClose,
-          className: "rounded-lg border border-gray-200/50 px-4 py-2 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100/50 dark:border-white/10 dark:text-gray-300 dark:hover:bg-white/5",
-          children: t("cancel")
-        }
-      ),
+      /* @__PURE__ */ jsx(Button, { type: "button", outline: true, size: "sm", onClick: onClose, children: t("cancel") }),
       /* @__PURE__ */ jsxs(
         Button,
         {
@@ -1994,15 +1966,7 @@ function RowEditor({
       /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-gray-700 dark:text-gray-200", children: row.key }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx(Badge, { color: "zinc", size: "xs", className: "uppercase tracking-wider", children: row.kind }),
-        row.touched && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: onReset,
-            className: "text-[11px] text-indigo-600 hover:text-indigo-500 dark:text-indigo-400",
-            children: "reset"
-          }
-        )
+        row.touched && /* @__PURE__ */ jsx(Button, { type: "button", plain: true, size: "xs", onClick: onReset, children: "reset" })
       ] })
     ] }),
     row.kind === "boolean" ? /* @__PURE__ */ jsxs(
@@ -2999,7 +2963,7 @@ function SectionHeader({ icon, title, colorClass, count, onAdd, addLabel, isOpen
           /* @__PURE__ */ jsx(
             ChevronDownIcon,
             {
-              className: `h-3 w-3 text-gray-400 transition-transform duration-200 ${isOpen ? "" : "-rotate-90"}`
+              className: `h-3 w-3 text-slate-400 transition-transform duration-200 ${isOpen ? "" : "-rotate-90"}`
             }
           )
         ]
@@ -3020,7 +2984,7 @@ function SectionHeader({ icon, title, colorClass, count, onAdd, addLabel, isOpen
 function CollapsibleSection({ title, icon, colorClass, defaultOpen = true, count, onAdd, addLabel, children }) {
   const [isOpen, setIsOpen] = useState(defaultOpen);
   const safeChildren = Children.toArray(children);
-  return /* @__PURE__ */ jsxs("div", { className: "border-t border-gray-200/40 dark:border-white/5", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "border-t border-slate-200/40 dark:border-white/5", children: [
     /* @__PURE__ */ jsx(
       SectionHeader,
       {
@@ -3039,7 +3003,7 @@ function CollapsibleSection({ title, icon, colorClass, defaultOpen = true, count
 }
 function LogicNodeItemCard({ item, translationFunction }) {
   const IconComponent = LOGIC_ICON_MAP[item.nodeType];
-  const gradient = LOGIC_NODE_GRADIENTS[item.nodeType] ?? "from-gray-400 to-gray-500";
+  const gradient = LOGIC_NODE_GRADIENTS[item.nodeType] ?? "from-slate-400 to-slate-500";
   const defaultConfig = createDefaultLogicNodeConfig(item.nodeType);
   const configJson = defaultConfig ? JSON.stringify(defaultConfig) : void 0;
   return /* @__PURE__ */ jsxs(
@@ -3051,8 +3015,8 @@ function LogicNodeItemCard({ item, translationFunction }) {
       children: [
         /* @__PURE__ */ jsx("div", { className: `flex h-6 w-6 items-center justify-center rounded-md bg-gradient-to-br ${gradient} shadow-sm`, children: IconComponent && /* @__PURE__ */ jsx(IconComponent, { className: "h-3.5 w-3.5 text-white" }) }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-gray-900 dark:text-white", children: translationFunction(item.nameKey) }),
-          /* @__PURE__ */ jsx("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: translationFunction(item.descriptionKey) })
+          /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-slate-900 dark:text-white", children: translationFunction(item.nameKey) }),
+          /* @__PURE__ */ jsx("p", { className: "truncate text-[10px] text-slate-400 dark:text-slate-500", children: translationFunction(item.descriptionKey) })
         ] })
       ]
     }
@@ -3132,13 +3096,13 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
   function renderLogicSubcategory(subcategory, items, isFirst) {
     if (items.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-      /* @__PURE__ */ jsx("p", { className: `${isFirst ? "mt-1" : "mt-2"} text-[9px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500`, children: t(SUBCATEGORY_LABELS[subcategory]) }),
+      /* @__PURE__ */ jsx("p", { className: `${isFirst ? "mt-1" : "mt-2"} text-[9px] font-semibold uppercase tracking-wider text-slate-400 dark:text-slate-500`, children: t(SUBCATEGORY_LABELS[subcategory]) }),
       items.map((item) => /* @__PURE__ */ jsx(LogicNodeItemCard, { item, translationFunction: t }, item.nodeType))
     ] }, subcategory);
   }
-  return /* @__PURE__ */ jsxs("div", { className: "liquid-surface w-[260px] flex-shrink-0 overflow-y-auto rounded-none border-0 border-r border-gray-200/30 dark:border-white/5", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "liquid-surface w-[260px] flex-shrink-0 overflow-y-auto rounded-none border-0 border-r border-slate-200/30 dark:border-white/5", children: [
     /* @__PURE__ */ jsxs("div", { className: "p-4 pb-2", children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: t("palette") }),
+      /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400", children: t("palette") }),
       /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
         "input",
         {
@@ -3146,7 +3110,7 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
           value: searchQuery,
           onChange: (event) => setSearchQuery(event.target.value),
           placeholder: t("searchPalette"),
-          className: "liquid-surface w-full rounded-lg px-2.5 py-1.5 text-[11px] text-gray-900 placeholder-gray-400 outline-none transition-colors focus:ring-1 focus:ring-indigo-300/40 dark:text-white dark:placeholder-gray-500 dark:focus:ring-indigo-500/20"
+          className: "liquid-surface w-full rounded-lg px-2.5 py-1.5 text-[11px] text-slate-900 placeholder-slate-400 outline-none transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 dark:text-white dark:placeholder-slate-500"
         }
       ) })
     ] }),
@@ -3159,7 +3123,7 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
         onAdd: onCreateAgent,
         addLabel: t("newAgent"),
         count: filteredAgents.length,
-        children: filteredAgents.length === 0 && filteredAgentTools.length === 0 && filteredProviders.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: t("noAgents") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        children: filteredAgents.length === 0 && filteredAgentTools.length === 0 && filteredProviders.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: t("noAgents") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           filteredAgents.map((agent) => /* @__PURE__ */ jsxs(
             "div",
             {
@@ -3168,24 +3132,24 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
               className: "liquid-surface group flex items-center gap-2 rounded-lg px-3 py-2 transition-all cursor-grab hover:shadow-md active:cursor-grabbing",
               children: [
                 /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
-                  agent.avatar ? /* @__PURE__ */ jsx("img", { src: agent.avatar, alt: agent.name, className: "h-7 w-7 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-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-indigo-400 to-purple-500 shadow-sm", children: /* @__PURE__ */ jsx(CpuChipIcon, { className: "h-3.5 w-3.5 text-white" }) }),
-                  /* @__PURE__ */ jsx("div", { className: "absolute -bottom-0.5 -right-0.5 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-indigo-500 ring-1.5 ring-white dark:ring-gray-900", children: /* @__PURE__ */ jsx(CpuChipIcon, { className: "h-2 w-2 text-white" }) })
+                  agent.avatar ? /* @__PURE__ */ jsx("img", { src: agent.avatar, alt: agent.name, className: "h-7 w-7 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-7 w-7 items-center justify-center rounded-full bg-gradient-to-br from-indigo-400 to-purple-500 shadow-sm", children: /* @__PURE__ */ jsx(CpuChipIcon, { className: "h-3.5 w-3.5 text-white" }) }),
+                  /* @__PURE__ */ jsx("div", { className: "absolute -bottom-0.5 -right-0.5 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-indigo-500 ring-1.5 ring-white dark:ring-slate-900", children: /* @__PURE__ */ jsx(CpuChipIcon, { className: "h-2 w-2 text-white" }) })
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
                   /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-gray-900 dark:text-white", children: agent.name }),
+                    /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-slate-900 dark:text-white", children: agent.name }),
                     (() => {
                       const tier = getAgentTier(Number(agent.elo ?? 0));
                       return /* @__PURE__ */ jsx("span", { className: `shrink-0 rounded-full px-1.5 py-px text-[8px] font-bold ${tier.pillColor}`, children: t(`agentDrawer.tier${tier.key.charAt(0).toUpperCase()}${tier.key.slice(1)}`) });
                     })()
                   ] }),
-                  /* @__PURE__ */ jsx("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: agent.role ?? agent.agentId })
+                  /* @__PURE__ */ jsx("p", { className: "truncate text-[10px] text-slate-400 dark:text-slate-500", children: agent.role ?? agent.agentId })
                 ] })
               ]
             },
             agent.agentId
           )),
-          filteredProviders.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2 border-t border-gray-200/40 pt-2 dark:border-white/5", children: [
+          filteredProviders.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2 border-t border-slate-200/40 pt-2 dark:border-white/5", children: [
             /* @__PURE__ */ jsx("p", { className: "mb-1.5 px-1 text-[9px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400", children: t("connectionsSection") }),
             filteredProviders.map((provider) => {
               const providerLogo = PROVIDER_LOGOS3[provider.provider];
@@ -3209,13 +3173,13 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
                   children: [
                     providerLogo ? /* @__PURE__ */ jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-white/10 p-1", children: /* @__PURE__ */ jsx("img", { src: providerLogo, alt: "", className: "h-4 w-4 object-contain", loading: "lazy" }) }) : /* @__PURE__ */ jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-gradient-to-br from-rose-400 to-pink-500 shadow-sm", children: /* @__PURE__ */ jsx(KeyIcon, { className: "h-3.5 w-3.5 text-white" }) }),
                     /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                      /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-gray-900 dark:text-white", children: provider.name }),
-                      /* @__PURE__ */ jsxs("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: [
+                      /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-slate-900 dark:text-white", children: provider.name }),
+                      /* @__PURE__ */ jsxs("p", { className: "truncate text-[10px] text-slate-400 dark:text-slate-500", children: [
                         provider.modelCount,
                         " models"
                       ] })
                     ] }),
-                    provider.configured ? /* @__PURE__ */ jsx("span", { className: "rounded-full bg-emerald-500/15 px-1.5 py-0.5 text-[9px] font-medium text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-300", children: t("configured") }) : /* @__PURE__ */ jsx("span", { className: "rounded-full bg-amber-500/15 px-1.5 py-0.5 text-[9px] font-medium text-amber-700 dark:bg-amber-500/20 dark:text-amber-300", children: t("setup") })
+                    provider.configured ? /* @__PURE__ */ jsx(Badge, { color: "emerald", size: "xs", children: t("configured") }) : /* @__PURE__ */ jsx(Badge, { color: "amber", size: "xs", children: t("setup") })
                   ]
                 },
                 provider.id
@@ -3233,7 +3197,7 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
         colorClass: "text-teal-600 dark:text-teal-400",
         onAdd: onCreateTool,
         addLabel: t("newSubworkflow"),
-        children: filteredTools.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: t("noSubworkflows") }) : filteredTools.map((tool) => /* @__PURE__ */ jsxs(
+        children: filteredTools.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: t("noSubworkflows") }) : filteredTools.map((tool) => /* @__PURE__ */ jsxs(
           "div",
           {
             draggable: true,
@@ -3242,8 +3206,8 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
             children: [
               /* @__PURE__ */ jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-gradient-to-br from-teal-400 to-emerald-500 shadow-sm", children: /* @__PURE__ */ jsx(ArrowPathRoundedSquareIcon, { className: "h-3.5 w-3.5 text-white" }) }),
               /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-gray-900 dark:text-white", children: tool.name }),
-                /* @__PURE__ */ jsx("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: tool.category })
+                /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-slate-900 dark:text-white", children: tool.name }),
+                /* @__PURE__ */ jsx("p", { className: "truncate text-[10px] text-slate-400 dark:text-slate-500", children: tool.category })
               ] }),
               /* @__PURE__ */ jsx(
                 ToggleSwitch,
@@ -3271,7 +3235,7 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
         colorClass: "text-violet-600 dark:text-violet-400",
         onAdd: onCreateRule,
         addLabel: t("newRule"),
-        children: filteredRules.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: t("noRules") }) : filteredRules.map((rule) => /* @__PURE__ */ jsxs(
+        children: filteredRules.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: t("noRules") }) : filteredRules.map((rule) => /* @__PURE__ */ jsxs(
           "div",
           {
             draggable: true,
@@ -3280,8 +3244,8 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
             children: [
               /* @__PURE__ */ jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-gradient-to-br from-violet-400 to-purple-500 shadow-sm", children: /* @__PURE__ */ jsx(AdjustmentsHorizontalIcon, { className: "h-3.5 w-3.5 text-white" }) }),
               /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-gray-900 dark:text-white", children: rule.name }),
-                /* @__PURE__ */ jsxs("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: [
+                /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-slate-900 dark:text-white", children: rule.name }),
+                /* @__PURE__ */ jsxs("p", { className: "truncate text-[10px] text-slate-400 dark:text-slate-500", children: [
                   "P",
                   String(rule.priority ?? "")
                 ] })
@@ -3313,7 +3277,7 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
         count: filteredEntityTypes.length,
         onAdd: onCreateDatasource,
         addLabel: t("newDataSource"),
-        children: filteredEntityTypes.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-400 dark:text-gray-500", children: t("noDataSources") }) : filteredEntityTypes.map((entity) => {
+        children: filteredEntityTypes.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-[10px] text-slate-400 dark:text-slate-500", children: t("noDataSources") }) : filteredEntityTypes.map((entity) => {
           const defaultConfig = JSON.stringify({
             type: "entity",
             entityMasterId: entity.id,
@@ -3334,15 +3298,15 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
               children: [
                 dsLogo ? /* @__PURE__ */ jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-white/10 p-1", children: /* @__PURE__ */ jsx("img", { src: dsLogo, alt: "", className: "h-4 w-4 object-contain", loading: "lazy" }) }) : /* @__PURE__ */ jsx("div", { className: `flex h-6 w-6 items-center justify-center rounded-md bg-gradient-to-br ${entityGradient} shadow-sm`, children: /* @__PURE__ */ jsx(EntityIcon, { className: "h-3.5 w-3.5 text-white" }) }),
                 /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-gray-900 dark:text-white", children: entity.label }),
-                  /* @__PURE__ */ jsxs("p", { className: "truncate text-[10px] text-gray-400 dark:text-gray-500", children: [
+                  /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-slate-900 dark:text-white", children: entity.label }),
+                  /* @__PURE__ */ jsxs("p", { className: "truncate text-[10px] text-slate-400 dark:text-slate-500", children: [
                     entity.fieldCount,
                     " ",
                     t("entityFieldsLabel")
                   ] })
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx("span", { className: "rounded-full bg-slate-500/15 px-1.5 py-0.5 text-[9px] font-medium text-slate-700 dark:bg-slate-500/20 dark:text-slate-300", children: "Read only" }),
+                  /* @__PURE__ */ jsx(Badge, { color: "zinc", size: "xs", children: "Read only" }),
                   /* @__PURE__ */ jsx(
                     ToggleSwitch,
                     {
@@ -3368,7 +3332,7 @@ function NodePalette({ agents, tools, agentTools = [], rules, entities = [], mod
       {
         title: t("logicSection"),
         icon: /* @__PURE__ */ jsx(BoltIcon, { className: "h-3 w-3" }),
-        colorClass: "text-gray-600 dark:text-gray-400",
+        colorClass: "text-slate-600 dark:text-slate-400",
         count: filteredLogicItems.length,
         children: [
           renderLogicSubcategory("control_flow", groupedLogicItems.control_flow, true),
@@ -3454,19 +3418,17 @@ function WorkflowListBar({
                   children: /* @__PURE__ */ jsx(ArrowPathRoundedSquareIcon, { className: "h-3.5 w-3.5" })
                 }
               ),
-              workflows.length > 1 && /* @__PURE__ */ jsx(
-                "button",
+              workflows.length > 1 && /* @__PURE__ */ jsx("div", { onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx(
+                IconButton,
                 {
-                  type: "button",
-                  onClick: (event) => {
-                    event.stopPropagation();
-                    onDelete(workflow.id, workflow.name);
-                  },
-                  className: "rounded-md p-1 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-950/30 dark:hover:text-red-400",
-                  "aria-label": `${tWorkflow("deleteWorkflow")} ${workflow.name}`,
-                  children: /* @__PURE__ */ jsx(TrashIcon, { className: "h-3.5 w-3.5" })
+                  label: `${tWorkflow("deleteWorkflow")} ${workflow.name}`,
+                  variant: "ghost",
+                  size: "sm",
+                  destructive: true,
+                  onClick: () => onDelete(workflow.id, workflow.name),
+                  icon: /* @__PURE__ */ jsx(TrashIcon, { className: "h-3.5 w-3.5" })
                 }
-              )
+              ) })
             ] })
           ]
         },
@@ -3537,22 +3499,23 @@ function VersionHistoryPanel({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "absolute right-0 top-0 z-40 flex h-full w-80 flex-col border-l border-gray-200 bg-white shadow-xl dark:border-gray-700 dark:bg-gray-900",
+      className: "liquid-surface absolute right-0 top-0 z-40 flex h-full w-80 flex-col border-l border-slate-200/60 shadow-xl dark:border-white/10",
       "data-testid": "version-history-panel",
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-gray-200 px-4 py-3 dark:border-gray-700", children: [
+        /* @__PURE__ */ jsxs("div", { className: "liquid-divider flex items-center justify-between px-4 py-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(ClockIcon, { className: "h-5 w-5 text-gray-500 dark:text-gray-400" }),
-            /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: translations("title") })
+            /* @__PURE__ */ jsx(ClockIcon, { className: "h-5 w-5 text-slate-500 dark:text-slate-400" }),
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: translations("title") })
           ] }),
           /* @__PURE__ */ jsx(
-            "button",
+            IconButton,
             {
-              type: "button",
+              label: translations("close"),
+              variant: "ghost",
+              size: "sm",
               onClick: onClose,
-              className: "rounded-lg p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-800 dark:hover:text-gray-300",
-              "data-testid": "version-history-close",
-              children: /* @__PURE__ */ jsx(XMarkIcon, { className: "h-4 w-4" })
+              icon: /* @__PURE__ */ jsx(XMarkIcon, { className: "h-4 w-4" }),
+              "data-testid": "version-history-close"
             }
           )
         ] }),
@@ -3560,36 +3523,28 @@ function VersionHistoryPanel({
           isLoading && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", "data-testid": "version-history-loading", children: /* @__PURE__ */ jsx("div", { className: "h-6 w-6 animate-spin motion-reduce:animate-none rounded-full border-2 border-blue-500 border-t-transparent" }) }),
           loadError && /* @__PURE__ */ jsxs("div", { className: "px-4 py-8 text-center", "data-testid": "version-history-error", children: [
             /* @__PURE__ */ jsx("p", { className: "text-sm text-red-500 dark:text-red-400", children: loadError }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: loadVersions,
-                className: "mt-2 text-xs text-blue-600 hover:underline dark:text-blue-400",
-                children: translations("retry")
-              }
-            )
+            /* @__PURE__ */ jsx(Button, { type: "button", plain: true, size: "xs", onClick: loadVersions, children: translations("retry") })
           ] }),
           !isLoading && !loadError && versions.length === 0 && /* @__PURE__ */ jsxs("div", { className: "px-4 py-12 text-center", "data-testid": "version-history-empty", children: [
-            /* @__PURE__ */ jsx(ClockIcon, { className: "mx-auto h-8 w-8 text-gray-300 dark:text-gray-600" }),
-            /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-500 dark:text-gray-400", children: translations("noVersions") })
+            /* @__PURE__ */ jsx(ClockIcon, { className: "mx-auto h-8 w-8 text-slate-300 dark:text-slate-600" }),
+            /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-slate-500 dark:text-slate-400", children: translations("noVersions") })
           ] }),
-          !isLoading && !loadError && versions.length > 0 && /* @__PURE__ */ jsx("div", { className: "divide-y divide-gray-100 dark:divide-gray-800", children: versions.map((version) => {
+          !isLoading && !loadError && versions.length > 0 && /* @__PURE__ */ jsx("div", { className: "divide-y divide-slate-200/60 dark:divide-white/10", children: versions.map((version) => {
             const isCurrentVersion = version.version === currentVersion;
             return /* @__PURE__ */ jsxs(
               "div",
               {
-                className: `px-4 py-3 transition-colors ${isCurrentVersion ? "bg-blue-50 dark:bg-blue-500/10" : "hover:bg-gray-50 dark:hover:bg-gray-800/50"}`,
+                className: `px-4 py-3 transition-colors ${isCurrentVersion ? "bg-blue-50 dark:bg-blue-500/10" : "hover:bg-white/40 dark:hover:bg-white/[0.04]"}`,
                 "data-testid": `version-entry-${version.version}`,
                 children: [
                   /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsxs("span", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: [
                       "v",
                       version.version
                     ] }),
                     isCurrentVersion && /* @__PURE__ */ jsx(Badge, { color: "blue", size: "xs", children: translations("current") })
                   ] }) }),
-                  /* @__PURE__ */ jsxs("div", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400", children: [
                     /* @__PURE__ */ jsx("div", { children: formatTimestamp3(version.publishedAt) }),
                     /* @__PURE__ */ jsxs("div", { className: "mt-0.5", children: [
                       translations("publishedBy"),
@@ -3608,11 +3563,12 @@ function VersionHistoryPanel({
                   ] }),
                   /* @__PURE__ */ jsxs("div", { className: "mt-2 flex gap-2", children: [
                     /* @__PURE__ */ jsxs(
-                      "button",
+                      Button,
                       {
                         type: "button",
+                        outline: true,
+                        size: "xs",
                         onClick: () => onPreview(version),
-                        className: "inline-flex items-center gap-1 rounded-md border border-gray-300 px-2 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700",
                         "data-testid": `version-preview-${version.version}`,
                         children: [
                           /* @__PURE__ */ jsx(EyeIcon, { className: "h-3 w-3" }),
@@ -3621,11 +3577,12 @@ function VersionHistoryPanel({
                       }
                     ),
                     !isCurrentVersion && /* @__PURE__ */ jsxs(
-                      "button",
+                      Button,
                       {
                         type: "button",
+                        outline: true,
+                        size: "xs",
                         onClick: () => onRestore(version),
-                        className: "inline-flex items-center gap-1 rounded-md border border-blue-300 px-2 py-1 text-xs font-medium text-blue-600 transition-colors hover:bg-blue-50 dark:border-blue-600 dark:text-blue-400 dark:hover:bg-blue-500/10",
                         "data-testid": `version-restore-${version.version}`,
                         children: [
                           /* @__PURE__ */ jsx(ArrowPathIcon, { className: "h-3 w-3" }),
@@ -3647,8 +3604,8 @@ function VersionHistoryPanel({
 var STATUS_CONFIG = {
   pending: {
     icon: ClockIcon,
-    color: "text-gray-400 dark:text-gray-500",
-    background: "bg-gray-100 dark:bg-gray-800",
+    color: "text-slate-400 dark:text-slate-500",
+    background: "bg-slate-100 dark:bg-slate-800",
     label: "pending"
   },
   running: {
@@ -3693,13 +3650,13 @@ function RunPanel({ open, onClose, onRun, onStop }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "absolute bottom-0 left-0 right-0 z-40 border-t border-gray-200 bg-white shadow-xl dark:border-gray-700 dark:bg-gray-900",
+      className: "liquid-surface absolute bottom-0 left-0 right-0 z-40 border-t border-slate-200/60 shadow-xl dark:border-white/10",
       "data-testid": "run-panel",
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 px-4 py-2 dark:border-gray-800", children: [
+        /* @__PURE__ */ jsxs("div", { className: "liquid-divider flex items-center justify-between px-4 py-2", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(PlayIcon, { className: "h-4 w-4 text-gray-500 dark:text-gray-400" }),
-            /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: translations("title") }),
+            /* @__PURE__ */ jsx(PlayIcon, { className: "h-4 w-4 text-slate-500 dark:text-slate-400" }),
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: translations("title") }),
             isRunning && /* @__PURE__ */ jsxs(
               "span",
               {
@@ -3721,11 +3678,12 @@ function RunPanel({ open, onClose, onRun, onStop }) {
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
             isRunning ? /* @__PURE__ */ jsxs(
-              "button",
+              Button,
               {
                 type: "button",
+                destructive: true,
+                size: "sm",
                 onClick: onStop,
-                className: "inline-flex items-center gap-1.5 rounded-lg bg-red-500 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-red-600",
                 "data-testid": "run-panel-stop",
                 children: [
                   /* @__PURE__ */ jsx(StopIcon, { className: "h-3.5 w-3.5" }),
@@ -3733,12 +3691,13 @@ function RunPanel({ open, onClose, onRun, onStop }) {
                 ]
               }
             ) : /* @__PURE__ */ jsxs(
-              "button",
+              Button,
               {
                 type: "button",
+                color: "ios-green",
+                size: "sm",
                 onClick: onRun,
                 disabled: !canRun,
-                className: "inline-flex items-center gap-1.5 rounded-lg bg-green-500 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-green-600 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-green-500",
                 "data-testid": "run-panel-run",
                 children: [
                   /* @__PURE__ */ jsx(PlayIcon, { className: "h-3.5 w-3.5" }),
@@ -3747,18 +3706,19 @@ function RunPanel({ open, onClose, onRun, onStop }) {
               }
             ),
             /* @__PURE__ */ jsx(
-              "button",
+              IconButton,
               {
-                type: "button",
+                label: translations("close"),
+                variant: "ghost",
+                size: "sm",
                 onClick: onClose,
-                className: "rounded-lg p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-800 dark:hover:text-gray-300",
-                "data-testid": "run-panel-close",
-                children: /* @__PURE__ */ jsx(XMarkIcon, { className: "h-4 w-4" })
+                icon: /* @__PURE__ */ jsx(XMarkIcon, { className: "h-4 w-4" }),
+                "data-testid": "run-panel-close"
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "max-h-48 overflow-y-auto px-4 py-2", children: executionNodes.length === 0 ? /* @__PURE__ */ jsx("div", { className: "py-4 text-center text-sm text-gray-500 dark:text-gray-400", children: translations("noNodes") }) : /* @__PURE__ */ jsx("div", { className: "space-y-1", children: executionNodes.map((node) => {
+        /* @__PURE__ */ jsx("div", { className: "max-h-48 overflow-y-auto px-4 py-2", children: executionNodes.length === 0 ? /* @__PURE__ */ jsx("div", { className: "py-4 text-center text-sm text-slate-500 dark:text-slate-400", children: translations("noNodes") }) : /* @__PURE__ */ jsx("div", { className: "space-y-1", children: executionNodes.map((node) => {
           const result = nodeResults[node.id];
           const status = result?.status ?? "pending";
           const statusConfig = STATUS_CONFIG[status];
@@ -3773,12 +3733,12 @@ function RunPanel({ open, onClose, onRun, onStop }) {
                 /* @__PURE__ */ jsx(StatusIconComponent, { className: `h-4 w-4 flex-shrink-0 ${statusConfig.color}` }),
                 /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
                   /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-gray-900 dark:text-white", children: nodeLabel }),
-                    /* @__PURE__ */ jsx("span", { className: "rounded bg-gray-200 px-1.5 py-0.5 text-[10px] text-gray-500 dark:bg-gray-700 dark:text-gray-400", children: node.type })
+                    /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-slate-900 dark:text-white", children: nodeLabel }),
+                    /* @__PURE__ */ jsx("span", { className: "rounded bg-slate-200 px-1.5 py-0.5 text-[10px] text-slate-500 dark:bg-slate-700 dark:text-slate-400", children: node.type })
                   ] }),
                   result?.error && /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate text-xs text-red-500 dark:text-red-400", children: result.error })
                 ] }),
-                result?.durationMs !== void 0 && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 text-xs text-gray-500 dark:text-gray-400", children: formatDuration2(result.durationMs) })
+                result?.durationMs !== void 0 && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 text-xs text-slate-500 dark:text-slate-400", children: formatDuration2(result.durationMs) })
               ]
             },
             node.id
@@ -4051,32 +4011,33 @@ function VariableInspector({ open, onClose }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "absolute right-0 top-0 z-40 flex h-full w-80 flex-col border-l border-gray-200 bg-white shadow-xl dark:border-gray-700 dark:bg-gray-900",
+      className: "liquid-surface absolute right-0 top-0 z-40 flex h-full w-80 flex-col shadow-xl",
       "data-testid": "variable-inspector",
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-gray-200 px-4 py-3 dark:border-gray-700", children: [
+        /* @__PURE__ */ jsxs("div", { className: "liquid-divider flex items-center justify-between border-b px-4 py-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(VariableIcon, { className: "h-5 w-5 text-gray-500 dark:text-gray-400" }),
-            /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: translations("title") })
+            /* @__PURE__ */ jsx(VariableIcon, { className: "h-5 w-5 text-slate-500 dark:text-slate-400" }),
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: translations("title") })
           ] }),
           /* @__PURE__ */ jsx(
-            "button",
+            IconButton,
             {
-              type: "button",
+              label: translations("close"),
+              variant: "ghost",
+              size: "sm",
               onClick: onClose,
-              className: "rounded-lg p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-800 dark:hover:text-gray-300",
-              "data-testid": "variable-inspector-close",
-              children: /* @__PURE__ */ jsx(XMarkIcon, { className: "h-4 w-4" })
+              icon: /* @__PURE__ */ jsx(XMarkIcon, { className: "h-4 w-4" }),
+              "data-testid": "variable-inspector-close"
             }
           )
         ] }),
         /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: nodeVariableEntries.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "px-4 py-12 text-center", "data-testid": "variable-inspector-empty", children: [
-          /* @__PURE__ */ jsx(VariableIcon, { className: "mx-auto h-8 w-8 text-gray-300 dark:text-gray-600" }),
-          /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-500 dark:text-gray-400", children: translations("noNodes") })
-        ] }) : /* @__PURE__ */ jsx("div", { className: "divide-y divide-gray-100 dark:divide-gray-800", children: nodeVariableEntries.map((entry) => {
+          /* @__PURE__ */ jsx(VariableIcon, { className: "mx-auto h-8 w-8 text-slate-300 dark:text-slate-600" }),
+          /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-slate-500 dark:text-slate-400", children: translations("noNodes") })
+        ] }) : /* @__PURE__ */ jsx("div", { className: "divide-y divide-slate-100 dark:divide-slate-800", children: nodeVariableEntries.map((entry) => {
           const isExpanded = expandedNodes.has(entry.nodeId);
           const IconComponent = LOGIC_ICON_MAP[entry.nodeType];
-          const gradient = LOGIC_NODE_GRADIENTS[entry.nodeType] ?? "from-gray-400 to-gray-500";
+          const gradient = LOGIC_NODE_GRADIENTS[entry.nodeType] ?? "from-slate-400 to-slate-500";
           const inputVariables = entry.variables.filter((variable) => variable.direction === "input");
           const outputVariables = entry.variables.filter((variable) => variable.direction === "output");
           return /* @__PURE__ */ jsxs("div", { "data-testid": `variable-node-${entry.nodeId}`, children: [
@@ -4085,12 +4046,12 @@ function VariableInspector({ open, onClose }) {
               {
                 type: "button",
                 onClick: () => toggleNodeExpansion(entry.nodeId),
-                className: "flex w-full items-center gap-2 px-4 py-2.5 text-left transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/50",
+                className: "flex w-full items-center gap-2 px-4 py-2.5 text-left transition-colors hover:bg-white/40 dark:hover:bg-white/[0.04]",
                 children: [
-                  isExpanded ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3.5 w-3.5 flex-shrink-0 text-gray-400" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3.5 w-3.5 flex-shrink-0 text-gray-400" }),
+                  isExpanded ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3.5 w-3.5 flex-shrink-0 text-slate-400" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3.5 w-3.5 flex-shrink-0 text-slate-400" }),
                   /* @__PURE__ */ jsx("div", { className: `flex h-5 w-5 flex-shrink-0 items-center justify-center rounded bg-gradient-to-br ${gradient}`, children: IconComponent && /* @__PURE__ */ jsx(IconComponent, { className: "h-3 w-3 text-white" }) }),
-                  /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-gray-900 dark:text-white", children: entry.nodeLabel }),
-                  /* @__PURE__ */ jsxs("span", { className: "ml-auto flex-shrink-0 text-[10px] text-gray-400 dark:text-gray-500", children: [
+                  /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-slate-900 dark:text-white", children: entry.nodeLabel }),
+                  /* @__PURE__ */ jsxs("span", { className: "ml-auto flex-shrink-0 text-[10px] text-slate-400 dark:text-slate-500", children: [
                     entry.variables.length,
                     " ",
                     translations("variables")
@@ -4098,32 +4059,32 @@ function VariableInspector({ open, onClose }) {
                 ]
               }
             ),
-            isExpanded && /* @__PURE__ */ jsx("div", { className: "bg-gray-50/50 px-4 pb-2 dark:bg-gray-800/30", children: entry.variables.length === 0 ? /* @__PURE__ */ jsx("p", { className: "py-2 pl-9 text-xs italic text-gray-400 dark:text-gray-500", children: translations("noVariables") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            isExpanded && /* @__PURE__ */ jsx("div", { className: "bg-white/40 dark:bg-white/[0.04] backdrop-blur-sm px-4 pb-2", children: entry.variables.length === 0 ? /* @__PURE__ */ jsx("p", { className: "py-2 pl-9 text-xs italic text-slate-400 dark:text-slate-500", children: translations("noVariables") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
               inputVariables.length > 0 && /* @__PURE__ */ jsxs("div", { className: "pl-9 pt-1", children: [
-                /* @__PURE__ */ jsx("div", { className: "mb-1 text-[10px] font-medium uppercase tracking-wider text-gray-400 dark:text-gray-500", children: translations("inputs") }),
+                /* @__PURE__ */ jsx("div", { className: "mb-1 text-[10px] font-medium uppercase tracking-wider text-slate-400 dark:text-slate-500", children: translations("inputs") }),
                 inputVariables.map((variable, index) => /* @__PURE__ */ jsxs(
                   "div",
                   {
                     className: "flex items-center gap-2 py-0.5",
                     children: [
                       /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-blue-400" }),
-                      /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-700 dark:text-gray-300", children: variable.name }),
-                      /* @__PURE__ */ jsx("span", { className: "rounded bg-gray-200 px-1 py-0.5 text-[9px] text-gray-500 dark:bg-gray-700 dark:text-gray-400", children: variable.variableType })
+                      /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-700 dark:text-slate-300", children: variable.name }),
+                      /* @__PURE__ */ jsx("span", { className: "rounded bg-slate-200 px-1 py-0.5 text-[9px] text-slate-500 dark:bg-slate-700 dark:text-slate-400", children: variable.variableType })
                     ]
                   },
                   `${variable.name}-${index}`
                 ))
               ] }),
               outputVariables.length > 0 && /* @__PURE__ */ jsxs("div", { className: "pl-9 pt-1", children: [
-                /* @__PURE__ */ jsx("div", { className: "mb-1 text-[10px] font-medium uppercase tracking-wider text-gray-400 dark:text-gray-500", children: translations("outputs") }),
+                /* @__PURE__ */ jsx("div", { className: "mb-1 text-[10px] font-medium uppercase tracking-wider text-slate-400 dark:text-slate-500", children: translations("outputs") }),
                 outputVariables.map((variable, index) => /* @__PURE__ */ jsxs(
                   "div",
                   {
                     className: "flex items-center gap-2 py-0.5",
                     children: [
                       /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-green-400" }),
-                      /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-700 dark:text-gray-300", children: variable.name }),
-                      /* @__PURE__ */ jsx("span", { className: "rounded bg-gray-200 px-1 py-0.5 text-[9px] text-gray-500 dark:bg-gray-700 dark:text-gray-400", children: variable.variableType })
+                      /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-700 dark:text-slate-300", children: variable.name }),
+                      /* @__PURE__ */ jsx("span", { className: "rounded bg-slate-200 px-1 py-0.5 text-[9px] text-slate-500 dark:bg-slate-700 dark:text-slate-400", children: variable.variableType })
                     ]
                   },
                   `${variable.name}-${index}`
@@ -4203,10 +4164,10 @@ var STATUS_STYLES = {
   completed: { icon: CheckCircleIcon, colorClass: "text-green-500" },
   failed: { icon: ExclamationCircleIcon, colorClass: "text-red-500" },
   running: { icon: ArrowPathIcon, colorClass: "text-blue-500 animate-spin motion-reduce:animate-none" },
-  pending: { icon: ClockIcon, colorClass: "text-gray-400" },
+  pending: { icon: ClockIcon, colorClass: "text-slate-400" },
   success: { icon: CheckCircleIcon, colorClass: "text-green-500" },
   error: { icon: ExclamationCircleIcon, colorClass: "text-red-500" },
-  skipped: { icon: ClockIcon, colorClass: "text-gray-400" }
+  skipped: { icon: ClockIcon, colorClass: "text-slate-400" }
 };
 function formatDuration3(durationMs) {
   if (durationMs === null) return "\u2014";
@@ -4243,21 +4204,22 @@ function PreviewPanel({ open, onClose, workflowId, loadRuns }) {
   if (!open) return null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { className: "fixed inset-x-0 top-[120px] bottom-0 z-40 bg-black/10 backdrop-blur-[1px]", onClick: onClose }),
-    /* @__PURE__ */ jsxs("div", { className: "fixed right-0 top-[120px] bottom-0 z-50 w-96 overflow-hidden border-l border-white/20 bg-white/95 shadow-2xl backdrop-blur-xl dark:border-gray-700/50 dark:bg-gray-800/95", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-gray-200/50 px-4 py-3 dark:border-gray-700/50", children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: t("title") }),
+    /* @__PURE__ */ jsxs("div", { className: "fixed right-0 top-[120px] bottom-0 z-50 w-96 overflow-hidden border-l border-white/20 bg-white/95 shadow-2xl backdrop-blur-xl dark:border-slate-700/50 dark:bg-slate-800/95", children: [
+      /* @__PURE__ */ jsxs("div", { className: "liquid-divider flex items-center justify-between border-b px-4 py-3", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: t("title") }),
         /* @__PURE__ */ jsx(
-          "button",
+          IconButton,
           {
-            type: "button",
+            label: t("close"),
+            variant: "ghost",
+            size: "sm",
             onClick: onClose,
-            className: "rounded-lg p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-300",
-            children: /* @__PURE__ */ jsx(XMarkIcon, { className: "h-4 w-4" })
+            icon: /* @__PURE__ */ jsx(XMarkIcon, { className: "h-4 w-4" })
           }
         )
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
-        isRunning && /* @__PURE__ */ jsxs("div", { className: "border-b border-gray-200/50 px-4 py-3 dark:border-gray-700/50", children: [
+        isRunning && /* @__PURE__ */ jsxs("div", { className: "liquid-divider border-b px-4 py-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(ArrowPathIcon, { className: "h-4 w-4 animate-spin motion-reduce:animate-none text-blue-500" }),
             /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-blue-600 dark:text-blue-400", children: t("activeRun") })
@@ -4265,46 +4227,46 @@ function PreviewPanel({ open, onClose, workflowId, loadRuns }) {
           /* @__PURE__ */ jsx("div", { className: "max-h-60 space-y-1 overflow-y-auto", children: Object.entries(nodeResults).map(([nodeId, result]) => {
             const statusStyle = STATUS_STYLES[result.status] ?? STATUS_STYLES.pending;
             const StatusIcon = statusStyle.icon;
-            return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded-lg px-2 py-1.5 text-xs hover:bg-gray-50 dark:hover:bg-gray-700/50", children: [
+            return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded-lg px-2 py-1.5 text-xs hover:bg-white/40 dark:hover:bg-white/[0.04]", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx(StatusIcon, { className: `h-3.5 w-3.5 ${statusStyle.colorClass}` }),
-                /* @__PURE__ */ jsx("span", { className: "truncate text-gray-700 dark:text-gray-300", children: nodeId.slice(0, 8) })
+                /* @__PURE__ */ jsx("span", { className: "truncate text-slate-700 dark:text-slate-300", children: nodeId.slice(0, 8) })
               ] }),
-              result.durationMs !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: formatDuration3(result.durationMs) })
+              result.durationMs !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-slate-400", children: formatDuration3(result.durationMs) })
             ] }, nodeId);
           }) })
         ] }),
-        selectedNode && /* @__PURE__ */ jsxs("div", { className: "border-b border-gray-200/50 px-4 py-3 dark:border-gray-700/50", children: [
+        selectedNode && /* @__PURE__ */ jsxs("div", { className: "liquid-divider border-b px-4 py-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-gray-900 dark:text-white", children: t("nodeDetail") }),
-            /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setSelectedNode(null), className: "text-[10px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300", children: t("close") })
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-slate-900 dark:text-white", children: t("nodeDetail") }),
+            /* @__PURE__ */ jsx(Button, { type: "button", plain: true, size: "xs", onClick: () => setSelectedNode(null), children: t("close") })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-2 text-xs", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: t("status") }),
-              /* @__PURE__ */ jsx("span", { className: STATUS_STYLES[selectedNode.status]?.colorClass ?? "text-gray-400", children: t(selectedNode.status) })
+              /* @__PURE__ */ jsx("span", { className: "text-slate-500", children: t("status") }),
+              /* @__PURE__ */ jsx("span", { className: STATUS_STYLES[selectedNode.status]?.colorClass ?? "text-slate-400", children: t(selectedNode.status) })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: t("duration") }),
-              /* @__PURE__ */ jsx("span", { className: "text-gray-700 dark:text-gray-300", children: formatDuration3(selectedNode.durationMs) })
+              /* @__PURE__ */ jsx("span", { className: "text-slate-500", children: t("duration") }),
+              /* @__PURE__ */ jsx("span", { className: "text-slate-700 dark:text-slate-300", children: formatDuration3(selectedNode.durationMs) })
             ] }),
             selectedNode.error && /* @__PURE__ */ jsxs("div", { children: [
               /* @__PURE__ */ jsx("span", { className: "text-red-500", children: t("error") }),
               /* @__PURE__ */ jsx("pre", { className: "mt-1 max-h-20 overflow-auto whitespace-pre-wrap rounded bg-red-50 p-2 text-[10px] text-red-700 dark:bg-red-900/20 dark:text-red-300", children: selectedNode.error })
             ] }),
             Object.keys(selectedNode.outputs).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: t("outputs") }),
-              /* @__PURE__ */ jsx("pre", { className: "mt-1 max-h-32 overflow-auto whitespace-pre-wrap rounded bg-gray-50 p-2 text-[10px] text-gray-700 dark:bg-gray-700/50 dark:text-gray-300", children: JSON.stringify(selectedNode.outputs, null, 2) })
+              /* @__PURE__ */ jsx("span", { className: "text-slate-500", children: t("outputs") }),
+              /* @__PURE__ */ jsx("pre", { className: "mt-1 max-h-32 overflow-auto whitespace-pre-wrap rounded bg-white/40 dark:bg-white/[0.04] backdrop-blur-sm p-2 text-[10px] text-slate-700 dark:text-slate-300", children: JSON.stringify(selectedNode.outputs, null, 2) })
             ] })
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-4 py-3", children: [
-          /* @__PURE__ */ jsx("h4", { className: "mb-2 text-xs font-semibold text-gray-500 dark:text-gray-400", children: t("runHistory") }),
+          /* @__PURE__ */ jsx("h4", { className: "mb-2 text-xs font-semibold text-slate-500 dark:text-slate-400", children: t("runHistory") }),
           isLoadingRuns && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: [1, 2, 3].map((index) => /* @__PURE__ */ jsx("div", { className: "shimmer h-14 rounded-lg" }, index)) }),
           !isLoadingRuns && runs.length === 0 && /* @__PURE__ */ jsxs("div", { className: "py-8 text-center", children: [
-            /* @__PURE__ */ jsx(ClockIcon, { className: "mx-auto mb-2 h-8 w-8 text-gray-300 dark:text-gray-600" }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: t("noRuns") }),
-            /* @__PURE__ */ jsx("p", { className: "mt-1 text-[10px] text-gray-400 dark:text-gray-500", children: t("noRunsDescription") })
+            /* @__PURE__ */ jsx(ClockIcon, { className: "mx-auto mb-2 h-8 w-8 text-slate-300 dark:text-slate-600" }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: t("noRuns") }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1 text-[10px] text-slate-400 dark:text-slate-500", children: t("noRunsDescription") })
           ] }),
           !isLoadingRuns && runs.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: runs.map((run) => {
             const statusStyle = STATUS_STYLES[run.status] ?? STATUS_STYLES.pending;
@@ -4318,14 +4280,14 @@ function PreviewPanel({ open, onClose, workflowId, loadRuns }) {
                   setSelectedRun(isSelected ? null : run);
                   setSelectedNode(null);
                 },
-                className: `w-full rounded-lg border px-3 py-2.5 text-left transition-colors ${isSelected ? "border-blue-200 bg-blue-50/50 dark:border-blue-800 dark:bg-blue-900/20" : "border-gray-100 hover:border-gray-200 hover:bg-gray-50 dark:border-gray-700/50 dark:hover:border-gray-600 dark:hover:bg-gray-700/30"}`,
+                className: `w-full rounded-lg border px-3 py-2.5 text-left transition-colors ${isSelected ? "border-blue-200 bg-blue-50/50 dark:border-blue-800 dark:bg-blue-900/20" : "border-slate-100 hover:border-slate-200 hover:bg-white/40 dark:border-slate-700/50 dark:hover:border-slate-600 dark:hover:bg-white/[0.04]"}`,
                 children: [
                   /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
                     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                       /* @__PURE__ */ jsx(StatusIcon, { className: `h-3.5 w-3.5 ${statusStyle.colorClass}` }),
-                      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-900 dark:text-white", children: formatTimestamp2(run.createdAt) })
+                      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-slate-900 dark:text-white", children: formatTimestamp2(run.createdAt) })
                     ] }),
-                    /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-400", children: formatDuration3(run.totalDurationMs) })
+                    /* @__PURE__ */ jsx("span", { className: "text-[10px] text-slate-400", children: formatDuration3(run.totalDurationMs) })
                   ] }),
                   run.error && /* @__PURE__ */ jsx("p", { className: "mt-1 truncate text-[10px] text-red-500", children: run.error })
                 ]
@@ -4334,7 +4296,7 @@ function PreviewPanel({ open, onClose, workflowId, loadRuns }) {
             );
           }) }),
           selectedRun && selectedRun.nodeResults.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-1", children: [
-            /* @__PURE__ */ jsx("h5", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-gray-400", children: "Nodes" }),
+            /* @__PURE__ */ jsx("h5", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-slate-400", children: "Nodes" }),
             selectedRun.nodeResults.map((nodeResult) => {
               const nodeStatusStyle = STATUS_STYLES[nodeResult.status] ?? STATUS_STYLES.pending;
               const NodeStatusIcon = nodeStatusStyle.icon;
@@ -4343,13 +4305,13 @@ function PreviewPanel({ open, onClose, workflowId, loadRuns }) {
                 {
                   type: "button",
                   onClick: () => setSelectedNode(nodeResult),
-                  className: "flex w-full items-center justify-between rounded px-2 py-1.5 text-xs hover:bg-gray-50 dark:hover:bg-gray-700/50",
+                  className: "flex w-full items-center justify-between rounded px-2 py-1.5 text-xs hover:bg-white/40 dark:hover:bg-white/[0.04]",
                   children: [
                     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                       /* @__PURE__ */ jsx(NodeStatusIcon, { className: `h-3 w-3 ${nodeStatusStyle.colorClass}` }),
-                      /* @__PURE__ */ jsx("span", { className: "text-gray-700 dark:text-gray-300", children: nodeResult.nodeType })
+                      /* @__PURE__ */ jsx("span", { className: "text-slate-700 dark:text-slate-300", children: nodeResult.nodeType })
                     ] }),
-                    /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-400", children: formatDuration3(nodeResult.durationMs) })
+                    /* @__PURE__ */ jsx("span", { className: "text-[10px] text-slate-400", children: formatDuration3(nodeResult.durationMs) })
                   ]
                 },
                 nodeResult.nodeId
@@ -4472,39 +4434,39 @@ function DslExportModal({ open, onClose, workflow, graph }) {
       subtitle: translations("description"),
       maxWidth: "2xl",
       children: /* @__PURE__ */ jsxs("div", { "data-testid": "dsl-export-modal", children: [
-        /* @__PURE__ */ jsx("div", { className: "border-b border-gray-200 px-1 py-4 dark:border-gray-700", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4 text-sm", children: [
+        /* @__PURE__ */ jsx("div", { className: "liquid-divider px-1 py-4", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4 text-sm", children: [
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("span", { className: "text-gray-500 dark:text-gray-400", children: translations("workflowName") }),
-            /* @__PURE__ */ jsx("p", { className: "font-medium text-gray-900 dark:text-white", children: workflow.name })
+            /* @__PURE__ */ jsx("span", { className: "text-slate-500 dark:text-slate-400", children: translations("workflowName") }),
+            /* @__PURE__ */ jsx("p", { className: "font-medium text-slate-900 dark:text-white", children: workflow.name })
           ] }),
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("span", { className: "text-gray-500 dark:text-gray-400", children: translations("version") }),
-            /* @__PURE__ */ jsxs("p", { className: "font-medium text-gray-900 dark:text-white", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-slate-500 dark:text-slate-400", children: translations("version") }),
+            /* @__PURE__ */ jsxs("p", { className: "font-medium text-slate-900 dark:text-white", children: [
               "v",
               workflow.version
             ] })
           ] }),
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("span", { className: "text-gray-500 dark:text-gray-400", children: translations("nodes") }),
-            /* @__PURE__ */ jsx("p", { className: "font-medium text-gray-900 dark:text-white", children: graph.nodes.length })
+            /* @__PURE__ */ jsx("span", { className: "text-slate-500 dark:text-slate-400", children: translations("nodes") }),
+            /* @__PURE__ */ jsx("p", { className: "font-medium text-slate-900 dark:text-white", children: graph.nodes.length })
           ] }),
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("span", { className: "text-gray-500 dark:text-gray-400", children: translations("edges") }),
-            /* @__PURE__ */ jsx("p", { className: "font-medium text-gray-900 dark:text-white", children: graph.edges.length })
+            /* @__PURE__ */ jsx("span", { className: "text-slate-500 dark:text-slate-400", children: translations("edges") }),
+            /* @__PURE__ */ jsx("p", { className: "font-medium text-slate-900 dark:text-white", children: graph.edges.length })
           ] })
         ] }) }),
         /* @__PURE__ */ jsxs("div", { className: "px-1 py-4", children: [
-          /* @__PURE__ */ jsx("div", { className: "mb-2 text-xs font-medium uppercase tracking-wider text-gray-400 dark:text-gray-500", children: translations("preview") }),
+          /* @__PURE__ */ jsx("div", { className: "mb-2 text-xs font-medium uppercase tracking-wider text-slate-400 dark:text-slate-500", children: translations("preview") }),
           /* @__PURE__ */ jsx(
             "pre",
             {
-              className: "max-h-64 overflow-auto rounded-lg border border-gray-200 bg-gray-50 p-3 text-xs text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300",
+              className: "liquid-surface max-h-64 overflow-auto rounded-lg p-3 text-xs text-slate-700 dark:text-slate-300",
               "data-testid": "export-json-preview",
               children: previewLines
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-3 border-t border-gray-200 px-1 py-4 dark:border-gray-700", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-3 border-t border-slate-200 px-1 py-4 dark:border-slate-700", children: [
           /* @__PURE__ */ jsx(
             Button,
             {
@@ -5059,5 +5021,5 @@ function useHelpLines() {
 }
 
 export { AgentModal, AmazonNovaIcon, AnthropicModelIcon, AutoSaveWorkspace, DslExportModal, DslImportModal, DynamicIslandConfirm2 as DynamicIslandConfirm, ExecutionTimelinePanel, MetaLlamaIcon, ModelProviderFlowNode, NodePalette, OutputSchemaBuilder, PipelineSettingsModal, PreviewPanel, RULE_STATUS_OPTIONS, RuleActionBuilder, RuleConditionBuilder, RuleForm, RunInputDialog, RunPanel, RunReplayModal, S3WriteFlowNode, SaveStatusBadge, SubworkflowModal, TIMEZONE_OPTIONS, VariableInspector, VersionHistoryPanel, WorkflowListBar, defaultAgentOutputSchema, defaultRuleAction, defaultRuleCondition, defaultRuleForm, getModelIcon, useCanRedo, useCanUndo, useCanvasShortcuts, useClipboard, useContextMenu, useEditingNodeId, useHasCopied, useHelpLines, useIsRunning, useNodeResults, useSelectedNodeCount, useSubworkflowStore, useUndoRedo };
-//# sourceMappingURL=chunk-5TLKFOEL.mjs.map
-//# sourceMappingURL=chunk-5TLKFOEL.mjs.map
+//# sourceMappingURL=chunk-RSCRIDMW.mjs.map
+//# sourceMappingURL=chunk-RSCRIDMW.mjs.map