@apteva/apteva-kit 0.1.86 → 0.1.88

package/dist/index.d.mts

@@ -131,6 +131,21 @@ interface ImageWidget extends Widget {
         caption?: string;
     };
 }
+interface FlowStep {
+    id: string;
+    label: string;
+    description?: string;
+    status?: 'pending' | 'active' | 'completed' | 'error' | 'skipped';
+}
+interface FlowWidget extends Widget {
+    type: 'flow';
+    props: {
+        title?: string;
+        steps: FlowStep[];
+        direction?: 'vertical' | 'horizontal';
+        compact?: boolean;
+    };
+}
 interface GalleryWidget extends Widget {
     type: 'gallery';
     props: {
@@ -215,6 +230,10 @@ declare const WIDGET_DEFINITIONS: {
         readonly schema: "chartType: line|bar|pie, data: {labels, datasets}";
         readonly example: "@ui:chart[{\"chartType\": \"bar\", \"data\": {\"labels\": [\"A\"], \"datasets\": [{\"label\": \"X\", \"data\": [10]}]}}]";
     };
+    readonly flow: {
+        readonly schema: "title?, steps: [{id, label, description?, status?: pending|active|completed|error|skipped}], direction?: vertical|horizontal, compact? - Show task/process flow. Omit status for proposal view.";
+        readonly example: "@ui:flow[{\"title\": \"Plan\", \"steps\": [{\"id\": \"1\", \"label\": \"Step 1\", \"description\": \"Details\"}, {\"id\": \"2\", \"label\": \"Step 2\"}]}]";
+    };
 };
 type WidgetType = keyof typeof WIDGET_DEFINITIONS;
 
@@ -493,4 +512,4 @@ declare const mockMessages: Message[];
 declare const mockThreads: Thread[];
 declare const mockWidgets: Widget[];
 
-export { type Action, type ActionEvent, AptevaClient, type AptevaClientConfig, type AptevaKitControl, Button, type ButtonGroupWidget, type ButtonWidget, Card, type CardWidget, type ChartWidget, Chat, type ChatHandle, type ChatMessage, type ChatProps, type ChatRequest, type ChatResponse, Command, type CommandProps, type CommandResult, type FormField, type FormWidget, type GalleryWidget, type ImageWidget, List, type ListItem, type ListWidget, type MapWidget, type Message, Prompt, type PromptProps, type SendMessageParams, Stream, type StreamChunk, type StreamProps, type SuggestedPrompt, type TableColumn, type TableWidget, type Thread, Threads, type ThreadsProps, type UseAptevaKitReturn, type Widget, Widgets, type WidgetsProps, aptevaClient, cn, getThemeScript, mockMessages, mockThreads, mockWidgets };
+export { type Action, type ActionEvent, AptevaClient, type AptevaClientConfig, type AptevaKitControl, Button, type ButtonGroupWidget, type ButtonWidget, Card, type CardWidget, type ChartWidget, Chat, type ChatHandle, type ChatMessage, type ChatProps, type ChatRequest, type ChatResponse, Command, type CommandProps, type CommandResult, type FlowStep, type FlowWidget, type FormField, type FormWidget, type GalleryWidget, type ImageWidget, List, type ListItem, type ListWidget, type MapWidget, type Message, Prompt, type PromptProps, type SendMessageParams, Stream, type StreamChunk, type StreamProps, type SuggestedPrompt, type TableColumn, type TableWidget, type Thread, Threads, type ThreadsProps, type UseAptevaKitReturn, type Widget, Widgets, type WidgetsProps, aptevaClient, cn, getThemeScript, mockMessages, mockThreads, mockWidgets };

package/dist/index.d.ts

@@ -131,6 +131,21 @@ interface ImageWidget extends Widget {
         caption?: string;
     };
 }
+interface FlowStep {
+    id: string;
+    label: string;
+    description?: string;
+    status?: 'pending' | 'active' | 'completed' | 'error' | 'skipped';
+}
+interface FlowWidget extends Widget {
+    type: 'flow';
+    props: {
+        title?: string;
+        steps: FlowStep[];
+        direction?: 'vertical' | 'horizontal';
+        compact?: boolean;
+    };
+}
 interface GalleryWidget extends Widget {
     type: 'gallery';
     props: {
@@ -215,6 +230,10 @@ declare const WIDGET_DEFINITIONS: {
         readonly schema: "chartType: line|bar|pie, data: {labels, datasets}";
         readonly example: "@ui:chart[{\"chartType\": \"bar\", \"data\": {\"labels\": [\"A\"], \"datasets\": [{\"label\": \"X\", \"data\": [10]}]}}]";
     };
+    readonly flow: {
+        readonly schema: "title?, steps: [{id, label, description?, status?: pending|active|completed|error|skipped}], direction?: vertical|horizontal, compact? - Show task/process flow. Omit status for proposal view.";
+        readonly example: "@ui:flow[{\"title\": \"Plan\", \"steps\": [{\"id\": \"1\", \"label\": \"Step 1\", \"description\": \"Details\"}, {\"id\": \"2\", \"label\": \"Step 2\"}]}]";
+    };
 };
 type WidgetType = keyof typeof WIDGET_DEFINITIONS;
 
@@ -493,4 +512,4 @@ declare const mockMessages: Message[];
 declare const mockThreads: Thread[];
 declare const mockWidgets: Widget[];
 
-export { type Action, type ActionEvent, AptevaClient, type AptevaClientConfig, type AptevaKitControl, Button, type ButtonGroupWidget, type ButtonWidget, Card, type CardWidget, type ChartWidget, Chat, type ChatHandle, type ChatMessage, type ChatProps, type ChatRequest, type ChatResponse, Command, type CommandProps, type CommandResult, type FormField, type FormWidget, type GalleryWidget, type ImageWidget, List, type ListItem, type ListWidget, type MapWidget, type Message, Prompt, type PromptProps, type SendMessageParams, Stream, type StreamChunk, type StreamProps, type SuggestedPrompt, type TableColumn, type TableWidget, type Thread, Threads, type ThreadsProps, type UseAptevaKitReturn, type Widget, Widgets, type WidgetsProps, aptevaClient, cn, getThemeScript, mockMessages, mockThreads, mockWidgets };
+export { type Action, type ActionEvent, AptevaClient, type AptevaClientConfig, type AptevaKitControl, Button, type ButtonGroupWidget, type ButtonWidget, Card, type CardWidget, type ChartWidget, Chat, type ChatHandle, type ChatMessage, type ChatProps, type ChatRequest, type ChatResponse, Command, type CommandProps, type CommandResult, type FlowStep, type FlowWidget, type FormField, type FormWidget, type GalleryWidget, type ImageWidget, List, type ListItem, type ListWidget, type MapWidget, type Message, Prompt, type PromptProps, type SendMessageParams, Stream, type StreamChunk, type StreamProps, type SuggestedPrompt, type TableColumn, type TableWidget, type Thread, Threads, type ThreadsProps, type UseAptevaKitReturn, type Widget, Widgets, type WidgetsProps, aptevaClient, cn, getThemeScript, mockMessages, mockThreads, mockWidgets };

package/dist/index.js

@@ -761,6 +761,10 @@ var WIDGET_DEFINITIONS = {
   chart: {
     schema: "chartType: line|bar|pie, data: {labels, datasets}",
     example: '@ui:chart[{"chartType": "bar", "data": {"labels": ["A"], "datasets": [{"label": "X", "data": [10]}]}}]'
+  },
+  flow: {
+    schema: "title?, steps: [{id, label, description?, status?: pending|active|completed|error|skipped}], direction?: vertical|horizontal, compact? - Show task/process flow. Omit status for proposal view.",
+    example: '@ui:flow[{"title": "Plan", "steps": [{"id": "1", "label": "Step 1", "description": "Details"}, {"id": "2", "label": "Step 2"}]}]'
   }
 };
 var ALL_WIDGET_TYPES = Object.keys(WIDGET_DEFINITIONS);
@@ -1204,6 +1208,126 @@ function Form({ widget, onAction }) {
   ] });
 }
 
+// src/components/Widgets/widget-library/Image.tsx
+
+function Image({ widget }) {
+  const { src, alt, caption } = widget.props;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "figure", { className: "overflow-hidden rounded-xl", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "img",
+      {
+        src,
+        alt,
+        className: "w-full h-auto object-contain bg-neutral-100 dark:bg-neutral-800",
+        loading: "lazy"
+      }
+    ),
+    caption && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "figcaption", { className: "mt-2 text-center text-sm text-neutral-600 dark:text-neutral-400", children: caption })
+  ] });
+}
+
+// src/components/Widgets/widget-library/Flow.tsx
+
+function StepIcon({ status, isLast }) {
+  if (status === "completed") {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-6 h-6 rounded-full bg-emerald-500 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-3.5 h-3.5 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M5 13l4 4L19 7" }) }) });
+  }
+  if (status === "active") {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center flex-shrink-0 animate-pulse", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-2 h-2 rounded-full bg-white" }) });
+  }
+  if (status === "error") {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-6 h-6 rounded-full bg-red-500 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-3.5 h-3.5 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M6 18L18 6M6 6l12 12" }) }) });
+  }
+  if (status === "skipped") {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-6 h-6 rounded-full bg-neutral-300 dark:bg-neutral-600 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-3.5 h-3.5 text-neutral-500 dark:text-neutral-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M20 12H4" }) }) });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-6 h-6 rounded-full border-2 border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 flex-shrink-0" });
+}
+function VerticalFlow({ steps, compact }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "relative", children: steps.map((step, index) => {
+    const isLast = index === steps.length - 1;
+    const isCompleted = step.status === "completed";
+    const isActive = step.status === "active";
+    const isSkipped = step.status === "skipped";
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative flex gap-3", children: [
+      !isLast && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "div",
+        {
+          className: `absolute left-[11px] top-6 w-0.5 ${compact ? "h-6" : "h-8"} ${isCompleted ? "bg-emerald-500" : "bg-neutral-200 dark:bg-neutral-700"}`
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StepIcon, { status: step.status, isLast }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: `${compact ? "pb-4" : "pb-6"} ${isLast ? "pb-0" : ""}`, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            className: `font-medium text-sm ${isSkipped ? "text-neutral-400 dark:text-neutral-500 line-through" : isActive ? "text-blue-600 dark:text-blue-400" : "text-neutral-900 dark:text-neutral-100"}`,
+            children: step.label
+          }
+        ),
+        step.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            className: `text-xs mt-0.5 ${isSkipped ? "text-neutral-300 dark:text-neutral-600" : "text-neutral-500 dark:text-neutral-400"}`,
+            children: step.description
+          }
+        )
+      ] })
+    ] }, step.id);
+  }) });
+}
+function HorizontalFlow({ steps, compact }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-start gap-2 overflow-x-auto pb-2", children: steps.map((step, index) => {
+    const isLast = index === steps.length - 1;
+    const isCompleted = step.status === "completed";
+    const isActive = step.status === "active";
+    const isSkipped = step.status === "skipped";
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center", children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col items-center text-center min-w-[80px] max-w-[120px]", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StepIcon, { status: step.status, isLast }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            className: `font-medium text-xs mt-2 ${isSkipped ? "text-neutral-400 dark:text-neutral-500 line-through" : isActive ? "text-blue-600 dark:text-blue-400" : "text-neutral-900 dark:text-neutral-100"}`,
+            children: step.label
+          }
+        ),
+        step.description && !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            className: `text-[10px] mt-0.5 ${isSkipped ? "text-neutral-300 dark:text-neutral-600" : "text-neutral-500 dark:text-neutral-400"}`,
+            children: step.description
+          }
+        )
+      ] }),
+      !isLast && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center px-1", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            className: `w-8 h-0.5 ${isCompleted ? "bg-emerald-500" : "bg-neutral-200 dark:bg-neutral-700"}`
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "svg",
+          {
+            className: `w-2 h-2 -ml-0.5 ${isCompleted ? "text-emerald-500" : "text-neutral-300 dark:text-neutral-600"}`,
+            fill: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" })
+          }
+        )
+      ] })
+    ] }, step.id);
+  }) });
+}
+function Flow({ widget }) {
+  const { title, steps, direction = "vertical", compact } = widget.props;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "border border-neutral-200 dark:border-neutral-700 rounded-xl bg-white dark:bg-neutral-900 overflow-hidden", children: [
+    title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-4 py-3 border-b border-neutral-200 dark:border-neutral-700", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "font-semibold text-sm text-neutral-900 dark:text-neutral-100", children: title }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: `p-4 ${direction === "horizontal" ? "overflow-x-auto" : ""}`, children: direction === "horizontal" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, HorizontalFlow, { steps, compact }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, VerticalFlow, { steps, compact }) })
+  ] });
+}
+
 // src/components/Widgets/WidgetRenderer.tsx
 
 function WidgetRenderer({ widget, onAction }) {
@@ -1221,6 +1345,10 @@ function WidgetRenderer({ widget, onAction }) {
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Table, { widget, onAction });
       case "form":
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Form, { widget, onAction });
+      case "image":
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Image, { widget });
+      case "flow":
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Flow, { widget });
       default:
         return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "p-4 border border-yellow-300 bg-yellow-50 rounded-lg", children: [
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-sm text-yellow-800", children: [