@apteva/apteva-kit 0.1.91 → 0.1.93

package/dist/index.d.mts

@@ -233,8 +233,8 @@ declare const WIDGET_DEFINITIONS: {
         readonly example: "@ui:chart[{\"chartType\": \"bar\", \"data\": {\"labels\": [\"A\"], \"datasets\": [{\"label\": \"X\", \"data\": [10]}]}}]";
     };
     readonly flow: {
-        readonly schema: "title, subtitle?, icon?: research|schedule|analyze|deploy, steps: [{id, label, type?: time|agent|email|slack|build|test|deploy, status?: pending|active|completed|error}], actions?: [{type, label}] - Horizontal pipeline with action button. Use @label for agents.";
-        readonly example: "@ui:flow[{\"title\": \"Deploy to Production\", \"icon\": \"deploy\", \"steps\": [{\"id\": \"1\", \"label\": \"Test\"}, {\"id\": \"2\", \"label\": \"Build\"}, {\"id\": \"3\", \"label\": \"Deploy\"}], \"actions\": [{\"type\": \"run\", \"label\": \"Run\"}]}]";
+        readonly schema: "title, subtitle?, icon?: research|schedule|analyze|deploy|recurring|automation|data, steps: [{id, label, type?, color?: blue|purple|cyan|amber|emerald|rose|indigo|orange, status?: pending|active|completed|error|skipped}] - Horizontal pipeline. Use @label for agents. Types auto-detected from label.";
+        readonly example: "@ui:flow[{\"title\": \"Deploy Pipeline\", \"icon\": \"deploy\", \"steps\": [{\"id\": \"1\", \"label\": \"Test\", \"color\": \"cyan\"}, {\"id\": \"2\", \"label\": \"Build\", \"color\": \"amber\"}, {\"id\": \"3\", \"label\": \"Deploy\", \"color\": \"rose\"}]}]";
     };
 };
 type WidgetType = keyof typeof WIDGET_DEFINITIONS;

package/dist/index.d.ts

@@ -233,8 +233,8 @@ declare const WIDGET_DEFINITIONS: {
         readonly example: "@ui:chart[{\"chartType\": \"bar\", \"data\": {\"labels\": [\"A\"], \"datasets\": [{\"label\": \"X\", \"data\": [10]}]}}]";
     };
     readonly flow: {
-        readonly schema: "title, subtitle?, icon?: research|schedule|analyze|deploy, steps: [{id, label, type?: time|agent|email|slack|build|test|deploy, status?: pending|active|completed|error}], actions?: [{type, label}] - Horizontal pipeline with action button. Use @label for agents.";
-        readonly example: "@ui:flow[{\"title\": \"Deploy to Production\", \"icon\": \"deploy\", \"steps\": [{\"id\": \"1\", \"label\": \"Test\"}, {\"id\": \"2\", \"label\": \"Build\"}, {\"id\": \"3\", \"label\": \"Deploy\"}], \"actions\": [{\"type\": \"run\", \"label\": \"Run\"}]}]";
+        readonly schema: "title, subtitle?, icon?: research|schedule|analyze|deploy|recurring|automation|data, steps: [{id, label, type?, color?: blue|purple|cyan|amber|emerald|rose|indigo|orange, status?: pending|active|completed|error|skipped}] - Horizontal pipeline. Use @label for agents. Types auto-detected from label.";
+        readonly example: "@ui:flow[{\"title\": \"Deploy Pipeline\", \"icon\": \"deploy\", \"steps\": [{\"id\": \"1\", \"label\": \"Test\", \"color\": \"cyan\"}, {\"id\": \"2\", \"label\": \"Build\", \"color\": \"amber\"}, {\"id\": \"3\", \"label\": \"Deploy\", \"color\": \"rose\"}]}]";
     };
 };
 type WidgetType = keyof typeof WIDGET_DEFINITIONS;

package/dist/index.js

@@ -763,8 +763,8 @@ var WIDGET_DEFINITIONS = {
     example: '@ui:chart[{"chartType": "bar", "data": {"labels": ["A"], "datasets": [{"label": "X", "data": [10]}]}}]'
   },
   flow: {
-    schema: "title, subtitle?, icon?: research|schedule|analyze|deploy, steps: [{id, label, type?: time|agent|email|slack|build|test|deploy, status?: pending|active|completed|error}], actions?: [{type, label}] - Horizontal pipeline with action button. Use @label for agents.",
-    example: '@ui:flow[{"title": "Deploy to Production", "icon": "deploy", "steps": [{"id": "1", "label": "Test"}, {"id": "2", "label": "Build"}, {"id": "3", "label": "Deploy"}], "actions": [{"type": "run", "label": "Run"}]}]'
+    schema: "title, subtitle?, icon?: research|schedule|analyze|deploy|recurring|automation|data, steps: [{id, label, type?, color?: blue|purple|cyan|amber|emerald|rose|indigo|orange, status?: pending|active|completed|error|skipped}] - Horizontal pipeline. Use @label for agents. Types auto-detected from label.",
+    example: '@ui:flow[{"title": "Deploy Pipeline", "icon": "deploy", "steps": [{"id": "1", "label": "Test", "color": "cyan"}, {"id": "2", "label": "Build", "color": "amber"}, {"id": "3", "label": "Deploy", "color": "rose"}]}]'
   }
 };
 var ALL_WIDGET_TYPES = Object.keys(WIDGET_DEFINITIONS);
@@ -1324,35 +1324,44 @@ function Chevron() {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-3 h-3 text-neutral-400 dark:text-neutral-500 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) });
 }
 function getStepColors(step, stepType) {
-  if (step.color) {
-    const colorMap = {
-      blue: { bg: "bg-blue-50 dark:bg-blue-500/10", text: "text-blue-700 dark:text-blue-300", border: "border-blue-200 dark:border-blue-500/30" },
-      purple: { bg: "bg-purple-50 dark:bg-purple-500/10", text: "text-purple-700 dark:text-purple-300", border: "border-purple-200 dark:border-purple-500/30" },
-      cyan: { bg: "bg-cyan-50 dark:bg-cyan-500/10", text: "text-cyan-700 dark:text-cyan-300", border: "border-cyan-200 dark:border-cyan-500/30" },
-      amber: { bg: "bg-amber-50 dark:bg-amber-500/10", text: "text-amber-700 dark:text-amber-300", border: "border-amber-200 dark:border-amber-500/30" },
-      emerald: { bg: "bg-emerald-50 dark:bg-emerald-500/10", text: "text-emerald-700 dark:text-emerald-300", border: "border-emerald-200 dark:border-emerald-500/30" },
-      rose: { bg: "bg-rose-50 dark:bg-rose-500/10", text: "text-rose-700 dark:text-rose-300", border: "border-rose-200 dark:border-rose-500/30" },
-      indigo: { bg: "bg-indigo-50 dark:bg-indigo-500/10", text: "text-indigo-700 dark:text-indigo-300", border: "border-indigo-200 dark:border-indigo-500/30" },
-      orange: { bg: "bg-orange-50 dark:bg-orange-500/10", text: "text-orange-700 dark:text-orange-300", border: "border-orange-200 dark:border-orange-500/30" }
-    };
-    return colorMap[step.color] || colorMap.blue;
+  const colorMap = {
+    blue: { bg: "bg-blue-100 dark:bg-blue-500/20", text: "text-blue-800 dark:text-blue-200", border: "border-blue-300 dark:border-blue-400/40" },
+    purple: { bg: "bg-purple-100 dark:bg-purple-500/20", text: "text-purple-800 dark:text-purple-200", border: "border-purple-300 dark:border-purple-400/40" },
+    cyan: { bg: "bg-cyan-100 dark:bg-cyan-500/20", text: "text-cyan-800 dark:text-cyan-200", border: "border-cyan-300 dark:border-cyan-400/40" },
+    amber: { bg: "bg-amber-100 dark:bg-amber-500/20", text: "text-amber-800 dark:text-amber-200", border: "border-amber-300 dark:border-amber-400/40" },
+    emerald: { bg: "bg-emerald-100 dark:bg-emerald-500/20", text: "text-emerald-800 dark:text-emerald-200", border: "border-emerald-300 dark:border-emerald-400/40" },
+    rose: { bg: "bg-rose-100 dark:bg-rose-500/20", text: "text-rose-800 dark:text-rose-200", border: "border-rose-300 dark:border-rose-400/40" },
+    indigo: { bg: "bg-indigo-100 dark:bg-indigo-500/20", text: "text-indigo-800 dark:text-indigo-200", border: "border-indigo-300 dark:border-indigo-400/40" },
+    orange: { bg: "bg-orange-100 dark:bg-orange-500/20", text: "text-orange-800 dark:text-orange-200", border: "border-orange-300 dark:border-orange-400/40" }
+  };
+  if (step.color && colorMap[step.color]) {
+    return colorMap[step.color];
   }
   if (stepType === "time" || stepType === "schedule" || stepType === "clock") {
-    return { bg: "bg-blue-50 dark:bg-blue-500/10", text: "text-blue-700 dark:text-blue-300", border: "border-blue-200 dark:border-blue-500/30" };
+    return colorMap.blue;
   }
   if (stepType === "agent" || _optionalChain([stepType, 'optionalAccess', _30 => _30.startsWith, 'call', _31 => _31("@")])) {
-    return { bg: "bg-purple-50 dark:bg-purple-500/10", text: "text-purple-700 dark:text-purple-300", border: "border-purple-200 dark:border-purple-500/30" };
+    return colorMap.purple;
   }
   if (stepType === "email" || stepType === "slack" || stepType === "message" || stepType === "notification") {
-    return { bg: "bg-cyan-50 dark:bg-cyan-500/10", text: "text-cyan-700 dark:text-cyan-300", border: "border-cyan-200 dark:border-cyan-500/30" };
+    return colorMap.cyan;
   }
   if (stepType === "generate" || stepType === "document" || stepType === "create") {
-    return { bg: "bg-amber-50 dark:bg-amber-500/10", text: "text-amber-700 dark:text-amber-300", border: "border-amber-200 dark:border-amber-500/30" };
+    return colorMap.amber;
   }
   if (stepType === "deploy" || stepType === "rocket" || stepType === "launch") {
-    return { bg: "bg-rose-50 dark:bg-rose-500/10", text: "text-rose-700 dark:text-rose-300", border: "border-rose-200 dark:border-rose-500/30" };
+    return colorMap.rose;
+  }
+  if (stepType === "build" || stepType === "compile" || stepType === "package") {
+    return colorMap.indigo;
+  }
+  if (stepType === "test" || stepType === "check" || stepType === "verify") {
+    return colorMap.emerald;
+  }
+  if (stepType === "data" || stepType === "database" || stepType === "storage") {
+    return colorMap.orange;
   }
-  return { bg: "bg-neutral-50 dark:bg-neutral-800", text: "text-neutral-700 dark:text-neutral-300", border: "border-neutral-200 dark:border-neutral-700" };
+  return colorMap.blue;
 }
 function Flow({ widget }) {
   const { title, subtitle, icon, steps } = widget.props;