@datatechsolutions/ui 2.11.65 → 2.11.66

package/dist/{chunk-3J4F3ZDT.js → chunk-T23YGO4X.js}

@@ -16415,50 +16415,58 @@ var DashboardDemo = ({
     }
   );
 };
+var DEFAULT_THEME = {
+  runButtonGradient: "from-indigo-600 to-violet-600",
+  runButtonShadow: "shadow-indigo-500/20",
+  stepActiveBg: "bg-indigo-500",
+  activeRing: "ring-indigo-500/60",
+  activeEdgeStroke: "#818cf8",
+  completeEdgeStroke: "#10b981",
+  badge: "bg-indigo-500/15 text-indigo-700 dark:text-indigo-300"
+};
 var NODE_TYPE_META = {
-  start: { icon: HeroIcons.PlayIcon, color: "text-emerald-300", bg: "bg-emerald-500/15", glow: "rgba(16,185,129,0.45)" },
-  end: { icon: HeroIcons.CheckCircleIcon, color: "text-emerald-300", bg: "bg-emerald-500/15", glow: "rgba(16,185,129,0.45)" },
-  datasource: { icon: HeroIcons.CircleStackIcon, color: "text-sky-300", bg: "bg-sky-500/15", glow: "rgba(14,165,233,0.45)" },
-  entity: { icon: HeroIcons.RectangleStackIcon, color: "text-sky-300", bg: "bg-sky-500/15", glow: "rgba(14,165,233,0.45)" },
-  http_request: { icon: HeroIcons.CloudIcon, color: "text-cyan-300", bg: "bg-cyan-500/15", glow: "rgba(34,211,238,0.45)" },
-  knowledge_base: { icon: HeroIcons.ServerStackIcon, color: "text-cyan-300", bg: "bg-cyan-500/15", glow: "rgba(34,211,238,0.45)" },
-  agent: { icon: HeroIcons.CpuChipIcon, color: "text-purple-300", bg: "bg-purple-500/15", glow: "rgba(168,85,247,0.5)" },
-  agent_tool: { icon: HeroIcons.BeakerIcon, color: "text-violet-300", bg: "bg-violet-500/15", glow: "rgba(139,92,246,0.5)" },
-  tool: { icon: HeroIcons.BeakerIcon, color: "text-violet-300", bg: "bg-violet-500/15", glow: "rgba(139,92,246,0.5)" },
-  code: { icon: HeroIcons.CodeBracketIcon, color: "text-amber-300", bg: "bg-amber-500/15", glow: "rgba(245,158,11,0.45)" },
-  template_transform: { icon: HeroIcons.DocumentTextIcon, color: "text-amber-300", bg: "bg-amber-500/15", glow: "rgba(245,158,11,0.45)" },
-  if_else: { icon: HeroIcons.BoltIcon, color: "text-orange-300", bg: "bg-orange-500/15", glow: "rgba(251,146,60,0.5)" },
-  question_classifier: { icon: HeroIcons.BoltIcon, color: "text-orange-300", bg: "bg-orange-500/15", glow: "rgba(251,146,60,0.5)" },
-  parameter_extractor: { icon: HeroIcons.AdjustmentsHorizontalIcon, color: "text-orange-300", bg: "bg-orange-500/15", glow: "rgba(251,146,60,0.5)" },
-  variable_aggregator: { icon: HeroIcons.AdjustmentsHorizontalIcon, color: "text-yellow-300", bg: "bg-yellow-500/15", glow: "rgba(234,179,8,0.45)" },
-  variable_assigner: { icon: HeroIcons.AdjustmentsHorizontalIcon, color: "text-yellow-300", bg: "bg-yellow-500/15", glow: "rgba(234,179,8,0.45)" },
-  iteration: { icon: HeroIcons.ArrowPathIcon, color: "text-fuchsia-300", bg: "bg-fuchsia-500/15", glow: "rgba(232,121,249,0.5)" },
-  iteration_start: { icon: HeroIcons.ArrowPathIcon, color: "text-fuchsia-300", bg: "bg-fuchsia-500/15", glow: "rgba(232,121,249,0.5)" },
-  list_operator: { icon: HeroIcons.AdjustmentsHorizontalIcon, color: "text-fuchsia-300", bg: "bg-fuchsia-500/15", glow: "rgba(232,121,249,0.5)" },
-  answer: { icon: HeroIcons.ChartBarIcon, color: "text-emerald-300", bg: "bg-emerald-500/15", glow: "rgba(16,185,129,0.45)" },
-  dashboard_output: { icon: HeroIcons.ChartBarIcon, color: "text-emerald-300", bg: "bg-emerald-500/15", glow: "rgba(16,185,129,0.45)" },
-  rule: { icon: HeroIcons.BoltIcon, color: "text-rose-300", bg: "bg-rose-500/15", glow: "rgba(244,63,94,0.5)" },
-  document_extractor: { icon: HeroIcons.DocumentTextIcon, color: "text-amber-300", bg: "bg-amber-500/15", glow: "rgba(245,158,11,0.45)" },
-  model_provider: { icon: HeroIcons.CpuChipIcon, color: "text-violet-300", bg: "bg-violet-500/15", glow: "rgba(139,92,246,0.5)" },
-  note: { icon: HeroIcons.DocumentTextIcon, color: "text-slate-300", bg: "bg-slate-500/15", glow: "rgba(100,116,139,0.4)" },
-  group: { icon: HeroIcons.RectangleStackIcon, color: "text-slate-300", bg: "bg-slate-500/15", glow: "rgba(100,116,139,0.4)" }
+  start: { icon: HeroIcons.PlayIcon, color: "text-emerald-300", bg: "bg-emerald-500/15", glow: "rgba(16,185,129,0.45)", tag: "start" },
+  end: { icon: HeroIcons.CheckCircleIcon, color: "text-emerald-300", bg: "bg-emerald-500/15", glow: "rgba(16,185,129,0.45)", tag: "end" },
+  datasource: { icon: HeroIcons.CircleStackIcon, color: "text-sky-300", bg: "bg-sky-500/15", glow: "rgba(14,165,233,0.45)", tag: "datasource" },
+  entity: { icon: HeroIcons.RectangleStackIcon, color: "text-sky-300", bg: "bg-sky-500/15", glow: "rgba(14,165,233,0.45)", tag: "entity" },
+  http_request: { icon: HeroIcons.CloudIcon, color: "text-cyan-300", bg: "bg-cyan-500/15", glow: "rgba(34,211,238,0.45)", tag: "http" },
+  knowledge_base: { icon: HeroIcons.ServerStackIcon, color: "text-cyan-300", bg: "bg-cyan-500/15", glow: "rgba(34,211,238,0.45)", tag: "kb" },
+  agent: { icon: HeroIcons.CpuChipIcon, color: "text-purple-300", bg: "bg-purple-500/15", glow: "rgba(168,85,247,0.5)", tag: "agent" },
+  agent_tool: { icon: HeroIcons.BeakerIcon, color: "text-violet-300", bg: "bg-violet-500/15", glow: "rgba(139,92,246,0.5)", tag: "agent.tool" },
+  tool: { icon: HeroIcons.BeakerIcon, color: "text-violet-300", bg: "bg-violet-500/15", glow: "rgba(139,92,246,0.5)", tag: "tool" },
+  code: { icon: HeroIcons.CodeBracketIcon, color: "text-amber-300", bg: "bg-amber-500/15", glow: "rgba(245,158,11,0.45)", tag: "code" },
+  template_transform: { icon: HeroIcons.DocumentTextIcon, color: "text-amber-300", bg: "bg-amber-500/15", glow: "rgba(245,158,11,0.45)", tag: "template" },
+  if_else: { icon: HeroIcons.BoltIcon, color: "text-orange-300", bg: "bg-orange-500/15", glow: "rgba(251,146,60,0.5)", tag: "branch" },
+  question_classifier: { icon: HeroIcons.BoltIcon, color: "text-orange-300", bg: "bg-orange-500/15", glow: "rgba(251,146,60,0.5)", tag: "classifier" },
+  parameter_extractor: { icon: HeroIcons.AdjustmentsHorizontalIcon, color: "text-orange-300", bg: "bg-orange-500/15", glow: "rgba(251,146,60,0.5)", tag: "extractor" },
+  variable_aggregator: { icon: HeroIcons.AdjustmentsHorizontalIcon, color: "text-yellow-300", bg: "bg-yellow-500/15", glow: "rgba(234,179,8,0.45)", tag: "aggregate" },
+  variable_assigner: { icon: HeroIcons.AdjustmentsHorizontalIcon, color: "text-yellow-300", bg: "bg-yellow-500/15", glow: "rgba(234,179,8,0.45)", tag: "assign" },
+  iteration: { icon: HeroIcons.ArrowPathIcon, color: "text-fuchsia-300", bg: "bg-fuchsia-500/15", glow: "rgba(232,121,249,0.5)", tag: "iterate" },
+  iteration_start: { icon: HeroIcons.ArrowPathIcon, color: "text-fuchsia-300", bg: "bg-fuchsia-500/15", glow: "rgba(232,121,249,0.5)", tag: "iterate.start" },
+  list_operator: { icon: HeroIcons.AdjustmentsHorizontalIcon, color: "text-fuchsia-300", bg: "bg-fuchsia-500/15", glow: "rgba(232,121,249,0.5)", tag: "list" },
+  answer: { icon: HeroIcons.ChartBarIcon, color: "text-emerald-300", bg: "bg-emerald-500/15", glow: "rgba(16,185,129,0.45)", tag: "answer" },
+  dashboard_output: { icon: HeroIcons.ChartBarIcon, color: "text-emerald-300", bg: "bg-emerald-500/15", glow: "rgba(16,185,129,0.45)", tag: "dashboard" },
+  rule: { icon: HeroIcons.BoltIcon, color: "text-rose-300", bg: "bg-rose-500/15", glow: "rgba(244,63,94,0.5)", tag: "rule" },
+  document_extractor: { icon: HeroIcons.DocumentTextIcon, color: "text-amber-300", bg: "bg-amber-500/15", glow: "rgba(245,158,11,0.45)", tag: "extract" },
+  model_provider: { icon: HeroIcons.CpuChipIcon, color: "text-violet-300", bg: "bg-violet-500/15", glow: "rgba(139,92,246,0.5)", tag: "model" },
+  note: { icon: HeroIcons.DocumentTextIcon, color: "text-slate-300", bg: "bg-slate-500/15", glow: "rgba(100,116,139,0.4)", tag: "note" },
+  group: { icon: HeroIcons.RectangleStackIcon, color: "text-slate-300", bg: "bg-slate-500/15", glow: "rgba(100,116,139,0.4)", tag: "group" }
 };
-var FALLBACK_META = { icon: HeroIcons.BoltIcon, color: "text-gray-300", bg: "bg-gray-500/15", glow: "rgba(100,116,139,0.4)" };
+var FALLBACK_META = { icon: HeroIcons.BoltIcon, color: "text-gray-300", bg: "bg-gray-500/15", glow: "rgba(100,116,139,0.4)", tag: "node" };
 function getNodeMeta(type) {
   return NODE_TYPE_META[type] ?? FALLBACK_META;
 }
-var NODE_W = 180;
-var NODE_H = 80;
-var PADDING = 24;
 function DepartmentWorkflowDemo({
   workflow,
   stepDurationMs = 1100,
   autoPlay = false,
   className,
   hideHeader = false,
-  onComplete
+  onComplete,
+  theme
 }) {
-  const { graph, steps, title, description, accentBadge = "bg-indigo-500/15 text-indigo-300", completionSummary } = workflow;
+  const t = { ...DEFAULT_THEME, ...theme };
+  const { graph, steps, title, description, accentBadge, completionSummary } = workflow;
   const [stepIndex, setStepIndex] = React12.useState(-1);
   const intervalRef = React12.useRef(null);
   const completedRef = React12.useRef(false);
@@ -16466,6 +16474,20 @@ function DepartmentWorkflowDemo({
   const isIdle = stepIndex === -1;
   const isRunning = stepIndex >= 0 && stepIndex < total - 1;
   const isComplete = stepIndex === total - 1 && total > 0;
+  const columns = React12.useMemo(() => {
+    const stepByNode = /* @__PURE__ */ new Map();
+    steps.forEach((s, idx) => {
+      for (const id of s.nodes) {
+        if (!stepByNode.has(id)) stepByNode.set(id, idx);
+      }
+    });
+    const cols = steps.map(() => []);
+    for (const node2 of graph.nodes) {
+      const idx = stepByNode.get(node2.id);
+      if (idx !== void 0) cols[idx].push(node2);
+    }
+    return cols.map((col, i) => ({ stepIndex: i, nodes: col, label: steps[i]?.label ?? "" })).filter((c) => c.nodes.length > 0);
+  }, [graph.nodes, steps]);
   const activeNodeIds = React12.useMemo(() => {
     if (stepIndex < 0) return /* @__PURE__ */ new Set();
     return new Set(steps[stepIndex]?.nodes ?? []);
@@ -16515,42 +16537,32 @@ function DepartmentWorkflowDemo({
       if (intervalRef.current) clearInterval(intervalRef.current);
     };
   }, [autoPlay, handleRun]);
-  const bounds = React12.useMemo(() => {
-    if (graph.nodes.length === 0) return { width: 800, height: 400 };
-    let maxX = 0;
-    let maxY = 0;
-    for (const node2 of graph.nodes) {
-      if (node2.position.x > maxX) maxX = node2.position.x;
-      if (node2.position.y > maxY) maxY = node2.position.y;
-    }
-    return { width: maxX + NODE_W + PADDING * 2, height: maxY + NODE_H + PADDING * 2 };
-  }, [graph.nodes]);
   const currentStepLabel = stepIndex >= 0 ? steps[stepIndex]?.label : "Ready to run";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `liquid-surface rounded-2xl overflow-hidden ${className ?? ""}`, children: [
     !hideHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-white/5 px-5 py-4 flex items-start gap-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider ${accentBadge}`, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider ${accentBadge ?? t.badge}`, children: [
           /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.BoltIcon, { className: "h-3 w-3" }),
           "Astrlabe workflow"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-2 text-lg font-bold text-white", children: title }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs text-gray-400", children: description })
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-2 text-lg font-bold text-gray-900 dark:text-white", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400", children: description })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
         stepIndex >= 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-0.5", children: steps.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: `h-1 w-3 rounded-full transition-all duration-500 ${index < stepIndex || isComplete ? "bg-emerald-500" : index === stepIndex ? "bg-indigo-500 animate-pulse" : "bg-white/10"}`
+            className: `h-1 w-3 rounded-full transition-all duration-500 ${index < stepIndex || isComplete ? "bg-emerald-500" : index === stepIndex ? `${t.stepActiveBg} animate-pulse` : "bg-white/10"}`
           },
           index
         )) }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-[180px] truncate text-[10px] text-gray-400", children: currentStepLabel }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-[180px] truncate text-[10px] text-gray-500 dark:text-gray-400", children: currentStepLabel }),
         isIdle ? /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             type: "button",
             onClick: handleRun,
-            className: "flex items-center gap-1 rounded-lg bg-gradient-to-r from-indigo-600 to-violet-600 px-3 py-1 text-[11px] font-semibold text-white shadow-lg shadow-indigo-500/20 hover:shadow-indigo-500/30 hover:scale-105 active:scale-95 transition-all",
+            className: `flex items-center gap-1 rounded-lg bg-gradient-to-r ${t.runButtonGradient} px-3 py-1 text-[11px] font-semibold text-white shadow-lg ${t.runButtonShadow} hover:scale-105 active:scale-95 transition-all`,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.PlayIcon, { className: "h-3 w-3" }),
               " Run"
@@ -16572,7 +16584,7 @@ function DepartmentWorkflowDemo({
           {
             type: "button",
             onClick: handleRun,
-            className: "flex items-center gap-1 rounded-lg border border-white/10 px-3 py-1 text-[11px] font-medium text-gray-300 hover:bg-white/5",
+            className: "flex items-center gap-1 rounded-lg border border-white/10 px-3 py-1 text-[11px] font-medium text-gray-700 dark:text-gray-300 hover:bg-white/5",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ArrowPathIcon, { className: "h-3 w-3" }),
               " Replay"
@@ -16581,80 +16593,74 @@ function DepartmentWorkflowDemo({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative overflow-auto p-6", style: { minHeight: bounds.height + PADDING * 2 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-x-auto px-4 py-5", children: [
       /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
-          @keyframes astGlow { 0%, 100% { box-shadow: 0 0 12px var(--glow); } 50% { box-shadow: 0 0 28px var(--glow); } }
-          @keyframes astEdge { to { stroke-dashoffset: -16; } }
+          @keyframes deptGlow { 0%, 100% { box-shadow: 0 0 12px var(--glow); } 50% { box-shadow: 0 0 28px var(--glow); } }
+          @keyframes deptEdge { to { stroke-dashoffset: -16; } }
         ` }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", style: { width: bounds.width, height: bounds.height }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "absolute inset-0 pointer-events-none", width: bounds.width, height: bounds.height, children: graph.edges.map((edge2) => {
-          const source = graph.nodes.find((n) => n.id === edge2.source);
-          const target = graph.nodes.find((n) => n.id === edge2.target);
-          if (!source || !target) return null;
-          const x1 = source.position.x + NODE_W;
-          const y1 = source.position.y + NODE_H / 2;
-          const x2 = target.position.x;
-          const y2 = target.position.y + NODE_H / 2;
-          const midX = (x1 + x2) / 2;
-          const isActive = activeNodeIds.has(edge2.source) || completedNodeIds.has(edge2.source) && (activeNodeIds.has(edge2.target) || completedNodeIds.has(edge2.target));
-          const isComplete2 = completedNodeIds.has(edge2.source) && completedNodeIds.has(edge2.target);
-          const stroke = isComplete2 ? "#10b981" : isActive ? "#818cf8" : "#334155";
-          return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-stretch gap-0 min-w-full", children: columns.map((col, colIdx) => {
+        const isStepActive = stepIndex === col.stepIndex;
+        const isStepDone = stepIndex > col.stepIndex;
+        const showsConnector = colIdx > 0;
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-stretch", children: [
+          showsConnector && /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "36", height: "100", className: "self-center shrink-0", viewBox: "0 0 36 100", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              "path",
+              "line",
               {
-                d: `M ${x1} ${y1} C ${midX} ${y1}, ${midX} ${y2}, ${x2} ${y2}`,
-                fill: "none",
-                stroke,
-                strokeWidth: 2,
+                x1: "0",
+                y1: "50",
+                x2: "36",
+                y2: "50",
+                stroke: isStepDone ? t.completeEdgeStroke : isStepActive ? t.activeEdgeStroke : "#334155",
+                strokeWidth: "2",
                 strokeDasharray: "6 4",
-                style: { animation: isActive && !isComplete2 ? "astEdge 0.8s linear infinite" : "none" }
+                style: { animation: isStepActive ? "deptEdge 0.8s linear infinite" : "none" }
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x2, cy: y2, r: "3", fill: stroke })
-          ] }, edge2.id);
-        }) }),
-        graph.nodes.map((node2) => {
-          const status = getStatus(node2);
-          const meta = getNodeMeta(node2.type);
-          const statusBorder = status === "running" ? "ring-2 ring-indigo-500/60 scale-[1.04]" : status === "complete" ? "ring-1 ring-emerald-500/40" : "opacity-60";
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: `absolute liquid-surface rounded-2xl px-3 py-2.5 transition-all duration-500 ${statusBorder}`,
-              style: {
-                left: node2.position.x,
-                top: node2.position.y,
-                width: NODE_W,
-                height: NODE_H,
-                ...status === "running" ? { "--glow": meta.glow, animation: "astGlow 1.4s ease-in-out infinite" } : {}
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2.5", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${meta.bg}`, children: /* @__PURE__ */ jsxRuntime.jsx(meta.icon, { className: `h-4 w-4 ${meta.color}` }) }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-[12px] font-semibold text-white", children: node2.data.label }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-[9px] text-gray-500 font-mono", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: node2.type }),
-                    status === "running" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-0.5 text-indigo-300", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ArrowRightIcon, { className: "h-2.5 w-2.5 animate-pulse" }),
-                      "running"
-                    ] }),
-                    status === "complete" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-0.5 text-emerald-400", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.CheckCircleIcon, { className: "h-2.5 w-2.5" }),
-                      "done"
+            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "34", cy: "50", r: "3", fill: isStepDone ? t.completeEdgeStroke : isStepActive ? t.activeEdgeStroke : "#334155" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-[160px] flex-col gap-2 shrink-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[8px] font-bold uppercase tracking-wider text-gray-400 dark:text-gray-500 text-center", children: [
+              "Step ",
+              col.stepIndex + 1
+            ] }),
+            col.nodes.map((node2) => {
+              const status = getStatus(node2);
+              const meta = getNodeMeta(node2.type);
+              const statusClass = status === "running" ? `scale-[1.04] ring-2 ${t.activeRing}` : status === "complete" ? "ring-1 ring-emerald-500/40" : "opacity-50";
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: `liquid-surface rounded-xl p-2.5 transition-all duration-500 ${statusClass}`,
+                  style: status === "running" ? { "--glow": meta.glow, animation: "deptGlow 1.4s ease-in-out infinite" } : void 0,
+                  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${meta.bg}`, children: /* @__PURE__ */ jsxRuntime.jsx(meta.icon, { className: `h-4 w-4 ${meta.color}` }) }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-[11px] font-semibold text-gray-900 dark:text-white", children: node2.data.label }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-[8px] text-gray-500 dark:text-gray-500", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-mono", children: meta.tag }),
+                        status === "running" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `flex items-center gap-0.5 ${t.stepActiveBg.replace("bg-", "text-")}`, children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-1 w-1 rounded-full bg-current animate-pulse" }),
+                          "ativo"
+                        ] }),
+                        status === "complete" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-0.5 text-emerald-500", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.CheckCircleIcon, { className: "h-2.5 w-2.5" }),
+                          "ok"
+                        ] })
+                      ] })
                     ] })
                   ] })
-                ] })
-              ] })
-            },
-            node2.id
-          );
-        })
-      ] })
+                },
+                node2.id
+              );
+            })
+          ] })
+        ] }, col.stepIndex);
+      }) })
     ] }),
     isComplete && completionSummary && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-white/5 bg-emerald-500/[0.06] px-5 py-3 flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.CheckCircleIcon, { className: "h-4 w-4 shrink-0 text-emerald-400" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-semibold text-emerald-300", children: completionSummary })
+      /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.CheckCircleIcon, { className: "h-4 w-4 shrink-0 text-emerald-500" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-semibold text-emerald-700 dark:text-emerald-300", children: completionSummary })
     ] })
   ] });
 }
@@ -17088,6 +17094,32 @@ var lgpdWorkflow = {
     step("Filing compliance report\u2026", "report")
   ]
 };
+var DEFAULT_ASSISTANT_THEME = {
+  brandGradient: "from-blue-500 to-purple-600",
+  inputAvatar: "from-blue-500 to-purple-600",
+  inputBorder: "border-indigo-300/40 dark:border-indigo-400/30",
+  inputCursor: "bg-indigo-500",
+  stageActiveBadge: "bg-indigo-500/15 text-indigo-600 dark:text-indigo-300",
+  progressActiveBar: "bg-indigo-500",
+  workflow: {}
+};
+var koriAssistantTheme = {
+  brandGradient: "from-amber-500 to-orange-600",
+  inputAvatar: "from-amber-500 to-orange-600",
+  inputBorder: "border-amber-300/50 dark:border-amber-400/40",
+  inputCursor: "bg-amber-500",
+  stageActiveBadge: "bg-amber-500/15 text-amber-700 dark:text-amber-300",
+  progressActiveBar: "bg-amber-500",
+  workflow: {
+    runButtonGradient: "from-amber-500 to-orange-600",
+    runButtonShadow: "shadow-amber-500/25",
+    stepActiveBg: "bg-amber-500",
+    activeRing: "ring-amber-500/60",
+    activeEdgeStroke: "#f59e0b",
+    completeEdgeStroke: "#10b981",
+    badge: "bg-amber-500/15 text-amber-700 dark:text-amber-300"
+  }
+};
 function DepartmentAssistantDemo({
   flows,
   initialIndex = 0,
@@ -17095,8 +17127,11 @@ function DepartmentAssistantDemo({
   dashboardHoldMs = 1e4,
   typingSpeedMs = 32,
   workflowStepMs = 1050,
+  theme,
+  brandName = "Kori AI Assistant",
   className
 }) {
+  const t = { ...DEFAULT_ASSISTANT_THEME, ...theme, workflow: { ...DEFAULT_ASSISTANT_THEME.workflow, ...theme?.workflow } };
   const [flowIndex, setFlowIndex] = React12.useState(initialIndex);
   const [stage, setStage] = React12.useState("input");
   const [typed, setTyped] = React12.useState("");
@@ -17112,25 +17147,25 @@ function DepartmentAssistantDemo({
         setTyped(flow.prompt.slice(0, i));
       } else {
         clearInterval(interval);
-        const t = setTimeout(() => setStage("workflow"), 700);
-        return () => clearTimeout(t);
+        const timer = setTimeout(() => setStage("workflow"), 700);
+        return () => clearTimeout(timer);
       }
       return void 0;
     }, typingSpeedMs);
     return () => clearInterval(interval);
   }, [stage, flow.prompt, typingSpeedMs]);
   const handleWorkflowComplete = React12.useCallback(() => {
-    const t = setTimeout(() => setStage("dashboard"), 1200);
-    rotateTimerRef.current = t;
+    const timer = setTimeout(() => setStage("dashboard"), 1200);
+    rotateTimerRef.current = timer;
   }, []);
   React12.useEffect(() => {
     if (stage !== "dashboard") return void 0;
     if (!autoRotate) return void 0;
-    const t = setTimeout(() => {
+    const timer = setTimeout(() => {
       setFlowIndex((prev) => (prev + 1) % flows.length);
       setStage("input");
     }, dashboardHoldMs);
-    return () => clearTimeout(t);
+    return () => clearTimeout(timer);
   }, [stage, autoRotate, dashboardHoldMs, flows.length]);
   const handleDepartmentSelect = React12.useCallback((next) => {
     if (rotateTimerRef.current) clearTimeout(rotateTimerRef.current);
@@ -17141,8 +17176,8 @@ function DepartmentAssistantDemo({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `liquid-surface rounded-3xl overflow-hidden ${className ?? ""}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-white/5 px-4 py-3 flex flex-wrap items-center gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 pr-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-purple-600", children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.CpuChipIcon, { className: "h-4 w-4 text-white" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold text-gray-900 dark:text-white", children: "Kori AI Assistant" })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br ${t.brandGradient}`, children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.CpuChipIcon, { className: "h-4 w-4 text-white" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold text-gray-900 dark:text-white", children: brandName })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-1.5", children: flows.map((entry, index) => {
@@ -17152,7 +17187,7 @@ function DepartmentAssistantDemo({
           {
             type: "button",
             onClick: () => handleDepartmentSelect(index),
-            className: `group inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-[11px] font-semibold transition-all ${isActive ? `bg-gradient-to-r ${entry.accent} text-white shadow-lg shadow-indigo-500/20 scale-105` : "text-gray-600 dark:text-gray-400 hover:bg-white/5 hover:text-gray-900 dark:hover:text-white"}`,
+            className: `group inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-[11px] font-semibold transition-all ${isActive ? `bg-gradient-to-r ${entry.accent} text-white shadow-lg scale-105` : "text-gray-600 dark:text-gray-400 hover:bg-white/5 hover:text-gray-900 dark:hover:text-white"}`,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(entry.icon, { className: "h-3.5 w-3.5" }),
               entry.name
@@ -17163,11 +17198,11 @@ function DepartmentAssistantDemo({
       }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-white/5 px-6 py-3 flex items-center gap-3 text-[11px]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(StageChip, { label: "Ask", stageIndex, mine: 0 }),
+      /* @__PURE__ */ jsxRuntime.jsx(StageChip, { label: "Ask", stageIndex, mine: 0, activeBadge: t.stageActiveBadge }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-gradient-to-r from-white/10 to-white/5" }),
-      /* @__PURE__ */ jsxRuntime.jsx(StageChip, { label: "Orchestrate", stageIndex, mine: 1 }),
+      /* @__PURE__ */ jsxRuntime.jsx(StageChip, { label: "Orchestrate", stageIndex, mine: 1, activeBadge: t.stageActiveBadge }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-gradient-to-r from-white/5 to-white/10" }),
-      /* @__PURE__ */ jsxRuntime.jsx(StageChip, { label: "Deliver", stageIndex, mine: 2 })
+      /* @__PURE__ */ jsxRuntime.jsx(StageChip, { label: "Deliver", stageIndex, mine: 2, activeBadge: t.stageActiveBadge })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", style: { minHeight: 600 }, children: /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.AnimatePresence, { mode: "wait", children: [
       stage === "input" && /* @__PURE__ */ jsxRuntime.jsx(
@@ -17178,7 +17213,17 @@ function DepartmentAssistantDemo({
           exit: { opacity: 0, y: -12 },
           transition: { duration: 0.45 },
           className: "flex items-center justify-center p-10",
-          children: /* @__PURE__ */ jsxRuntime.jsx(InputStage3, { prompt: typed, department: flow.name, agents: flow.agents })
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            InputStage3,
+            {
+              prompt: typed,
+              department: flow.name,
+              agents: flow.agents,
+              avatarGradient: t.inputAvatar,
+              borderClass: t.inputBorder,
+              cursorClass: t.inputCursor
+            }
+          )
         },
         `input-${flow.id}`
       ),
@@ -17197,7 +17242,8 @@ function DepartmentAssistantDemo({
               autoPlay: true,
               hideHeader: true,
               stepDurationMs: workflowStepMs,
-              onComplete: handleWorkflowComplete
+              onComplete: handleWorkflowComplete,
+              theme: t.workflow
             },
             `wf-${flow.id}`
           )
@@ -17219,7 +17265,7 @@ function DepartmentAssistantDemo({
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-t border-white/5 px-5 py-3", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-[11px] text-gray-500 dark:text-gray-400", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.BoltIcon, { className: "h-3.5 w-3.5 text-indigo-500" }),
+        /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.BoltIcon, { className: `h-3.5 w-3.5 ${t.progressActiveBar.replace("bg-", "text-")}` }),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
           stage === "input" && "Usu\xE1rio envia um pedido ao assistente\u2026",
           stage === "workflow" && "Astrlabe orquestrando agentes e datasources\u2026",
@@ -17229,20 +17275,20 @@ function DepartmentAssistantDemo({
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: flows.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
-          className: `h-1 rounded-full transition-all duration-500 ${index === flowIndex ? "w-8 bg-indigo-500" : "w-1.5 bg-gray-300 dark:bg-white/10"}`
+          className: `h-1 rounded-full transition-all duration-500 ${index === flowIndex ? `w-8 ${t.progressActiveBar}` : "w-1.5 bg-gray-300 dark:bg-white/10"}`
         },
         entry.id
       )) })
     ] })
   ] });
 }
-function StageChip({ label, stageIndex, mine }) {
+function StageChip({ label, stageIndex, mine, activeBadge }) {
   const isActive = stageIndex === mine;
   const isDone = stageIndex > mine;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: `inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 font-semibold transition-colors ${isActive ? "bg-indigo-500/15 text-indigo-600 dark:text-indigo-300" : isDone ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-300" : "bg-white/5 text-gray-500 dark:text-gray-500"}`,
+      className: `inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 font-semibold transition-colors ${isActive ? activeBadge : isDone ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-300" : "bg-white/5 text-gray-500 dark:text-gray-500"}`,
       children: [
         isDone ? /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.CheckCircleIcon, { className: "h-3.5 w-3.5" }) : isActive ? /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.BoltIcon, { className: "h-3.5 w-3.5 animate-pulse" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-current" }),
         label
@@ -17250,10 +17296,17 @@ function StageChip({ label, stageIndex, mine }) {
     }
   );
 }
-function InputStage3({ prompt, department, agents }) {
+function InputStage3({
+  prompt,
+  department,
+  agents,
+  avatarGradient,
+  borderClass,
+  cursorClass
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl border border-white/10 bg-white/70 dark:bg-zinc-900/70 p-8 shadow-2xl backdrop-blur-sm", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 flex items-center gap-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 w-12 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.SparklesIcon, { className: "h-6 w-6 text-white" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-12 w-12 rounded-xl bg-gradient-to-br ${avatarGradient} flex items-center justify-center`, children: /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.SparklesIcon, { className: "h-6 w-6 text-white" }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-base font-bold text-gray-900 dark:text-white", children: [
           "Assistente \u2014 ",
@@ -17262,17 +17315,17 @@ function InputStage3({ prompt, department, agents }) {
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Digite um pedido e veja os agentes atuarem." })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl border-2 border-indigo-300/40 bg-indigo-50/50 dark:border-indigo-400/30 dark:bg-indigo-500/5 p-4 min-h-[120px]", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-base font-medium text-gray-900 dark:text-white", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `rounded-xl border-2 ${borderClass} bg-white/40 dark:bg-white/[0.02] p-4 min-h-[120px]`, children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-base font-medium text-gray-900 dark:text-white", children: [
       prompt,
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 inline-block w-0.5 h-5 bg-indigo-500 animate-pulse" })
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `ml-1 inline-block w-0.5 h-5 ${cursorClass} animate-pulse` })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.BoltIcon, { className: "h-3.5 w-3.5 text-indigo-500" }),
+      /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.BoltIcon, { className: `h-3.5 w-3.5 ${cursorClass.replace("bg-", "text-")}` }),
       "Agentes prontos:",
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5", children: agents.map((agent) => /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
-          className: "inline-flex items-center rounded-full border border-indigo-200 bg-indigo-50 px-2 py-0.5 text-[10px] font-semibold text-indigo-700 dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-300",
+          className: "inline-flex items-center rounded-full border border-white/10 bg-white/60 dark:bg-white/[0.04] px-2 py-0.5 text-[10px] font-semibold text-gray-700 dark:text-gray-200",
           children: agent
         },
         agent
@@ -25245,6 +25298,7 @@ exports.isValidThailandProvince = isValidThailandProvince;
 exports.isValidTurkeyProvince = isValidTurkeyProvince;
 exports.isValidUKNation = isValidUKNation;
 exports.isValidUsState = isValidUsState;
+exports.koriAssistantTheme = koriAssistantTheme;
 exports.koriDepartmentFlows = koriDepartmentFlows;
 exports.lgpdWorkflow = lgpdWorkflow;
 exports.listItem = listItem;
@@ -25283,5 +25337,5 @@ exports.usePullToRefresh = usePullToRefresh;
 exports.validateDashboardSpec = validateDashboardSpec;
 exports.xScale = xScale;
 exports.yScale = yScale;
-//# sourceMappingURL=chunk-3J4F3ZDT.js.map
-//# sourceMappingURL=chunk-3J4F3ZDT.js.map
+//# sourceMappingURL=chunk-T23YGO4X.js.map
+//# sourceMappingURL=chunk-T23YGO4X.js.map