@apteva/apteva-kit 0.1.124 → 0.1.126

package/dist/index.mjs

@@ -735,36 +735,36 @@ function parseWidgetsFromText(text) {
 // src/utils/widget-context.ts
 var WIDGET_DEFINITIONS = {
   card: {
-    schema: "title, description?, image?, footer?, actions?: [{type, label}]",
+    schema: "title, description?, image?(url), footer?, actions?: [{type, label}]",
     example: '@ui:card[{"title": "Summary", "description": "Details here"}]'
   },
   list: {
-    schema: "items: [{id, title, subtitle?, description?, image?, metadata?: {any extra data}}], actions?: [{type, label}] - metadata is sent as action payload when clicked",
+    schema: "items: [{id, title, subtitle?, description?, image?(url), metadata?: {\u2026}}], actions?: [{type, label}]",
     example: '@ui:list[{"items": [{"id": "1", "title": "Item", "subtitle": "Info", "metadata": {"key": "value"}}]}]'
   },
   button_group: {
-    schema: "buttons: [{id, label, variant?}] - Use for standalone buttons only, NOT for form submits",
+    schema: 'buttons: [{id, label, variant?: "default"|"primary"|"danger"}]',
     example: '@ui:button_group[{"buttons": [{"id": "ok", "label": "OK"}]}]'
   },
   form: {
-    schema: "title?, fields: [{name, type: text|password|number|select|checkbox|textarea|date, label, required?, placeholder?, options?}], actions: [{type, label}] - Button is built-in via actions, do NOT add separate button",
-    example: '@ui:form[{"title": "Settings", "fields": [{"name": "apiKey", "type": "password", "label": "API Key", "required": true}], "actions": [{"type": "save", "label": "Save"}]}]'
+    schema: 'title?, fields: [{name, type: "text"|"password"|"number"|"select"|"checkbox"|"textarea"|"date", label, required?, placeholder?, options?: [{label, value}]}], actions: [{type, label}]',
+    example: '@ui:form[{"title": "Settings", "fields": [{"name": "key", "type": "password", "label": "API Key", "required": true}], "actions": [{"type": "save", "label": "Save"}]}]'
   },
   table: {
-    schema: "columns: [{key, label}], rows: [...], striped?, compact?",
-    example: '@ui:table[{"columns": [{"key": "name", "label": "Name"}], "rows": [{"name": "A"}]}]'
+    schema: "columns: [{key, label}], rows: [{key: value, \u2026}], striped?, compact?",
+    example: '@ui:table[{"columns": [{"key": "name", "label": "Name"}], "rows": [{"name": "Alice"}]}]'
   },
   image: {
-    schema: "src, alt, caption?",
-    example: '@ui:image[{"src": "url", "alt": "desc"}]'
+    schema: "src(url), alt, caption?",
+    example: '@ui:image[{"src": "https://example.com/img.png", "alt": "Photo"}]'
   },
   chart: {
-    schema: "chartType: line|bar|pie, data: {labels, datasets}",
-    example: '@ui:chart[{"chartType": "bar", "data": {"labels": ["A"], "datasets": [{"label": "X", "data": [10]}]}}]'
+    schema: 'chartType: "line"|"bar"|"pie", data: {labels: [...], datasets: [{label, data: [numbers]}]}',
+    example: '@ui:chart[{"chartType": "bar", "data": {"labels": ["Q1", "Q2"], "datasets": [{"label": "Revenue", "data": [100, 150]}]}}]'
   },
   flow: {
-    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"}]}]'
+    schema: 'title, subtitle?, icon?: "research"|"schedule"|"analyze"|"deploy"|"recurring"|"automation"|"data", steps: [{id, label, color?: "blue"|"purple"|"cyan"|"amber"|"emerald"|"rose"|"indigo"|"orange", status?: "pending"|"active"|"completed"|"error"|"skipped"}]',
+    example: '@ui:flow[{"title": "Pipeline", "steps": [{"id": "1", "label": "Test", "color": "cyan"}, {"id": "2", "label": "Deploy", "color": "rose"}]}]'
   }
 };
 var ALL_WIDGET_TYPES = Object.keys(WIDGET_DEFINITIONS);
@@ -774,27 +774,54 @@ function generateWidgetContext(enabledWidgets) {
   const widgets = enabledWidgets || DEFAULT_WIDGET_TYPES;
   let context = `
 ## UI Widgets
-SYNTAX: @ui:type[{json}] - MUST use SQUARE BRACKETS [] around the JSON object.
-CORRECT: @ui:list[{"items": [...]}]
-WRONG: @ui:list{"items": [...]} (missing square brackets)
+
+You can render interactive UI widgets inline in your responses. Use them when structured display is clearer than plain text (showing data, forms, actions, images). You may include normal text before or after a widget.
+
+**Syntax:** \`@ui:type[{json}]\` \u2014 the JSON object MUST be wrapped in square brackets \`[]\`.
+
+Example:
+@ui:list[{"items": [{"id": "1", "title": "First item"}]}]
+
+Do NOT wrap widgets in code blocks or backticks. Write them directly in your response text.
+
+### Available widgets
 
 `;
   for (const type of widgets) {
     const def = WIDGET_DEFINITIONS[type];
     if (!def) continue;
-    context += `${type}: ${def.schema} | ${def.example}
+    context += `**${type}** \u2014 ${def.schema}
+`;
+    context += `  ${def.example}
+
 `;
   }
-  context += `
-Per-item "metadata" is sent as payload on action click.
+  context += `### Notes
+- **actions**: the \`type\` field is a custom string you choose (e.g. "edit", "delete", "submit"). It is returned to the app when the user clicks the button.
+- **metadata** on list items: any extra data attached to an item. Returned as the action payload when the user clicks that item.
+- **form**: buttons are defined in \`actions\`, do NOT add a separate button_group for form submission.
+- **select fields**: \`options\` is an array of \`{label, value}\` objects.
 `;
   return context;
 }
 function generateCompactWidgetContext(enabledWidgets) {
   const widgets = enabledWidgets || DEFAULT_WIDGET_TYPES;
-  return `
-Widgets: @ui:type[{json}] - MUST use square brackets []. Example: @ui:list[{"items": [...]}]. Types: ${widgets.join(", ")}. Per-item "metadata" is sent as action payload.
+  let context = `
+## UI Widgets
+Render widgets inline: \`@ui:type[{json}]\` (square brackets required, no code blocks).
+Use when structured display is clearer than plain text. Normal text can surround widgets.
+
+`;
+  for (const type of widgets) {
+    const def = WIDGET_DEFINITIONS[type];
+    if (!def) continue;
+    context += `**${type}**: ${def.schema}
 `;
+  }
+  context += `
+actions.type = custom string returned on click. list metadata = payload on item click. form buttons go in actions, not button_group.
+`;
+  return context;
 }
 
 // src/utils/interface-parser.ts
@@ -3183,7 +3210,7 @@ function WelcomeScreen({
   const hasPrompts = normalizedPrompts.length > 0;
   const hasHeader = title || subtitle || icon;
   if (!hasHeader && !hasPrompts) {
-    return /* @__PURE__ */ jsx21("div", { className: "flex items-center justify-center h-full !text-neutral-500 dark:!text-neutral-400", children: /* @__PURE__ */ jsxs16("div", { className: "text-center space-y-2", children: [
+    return /* @__PURE__ */ jsx21("div", { className: "apteva-welcome-empty flex items-center justify-center h-full", children: /* @__PURE__ */ jsxs16("div", { className: "text-center space-y-2", children: [
       /* @__PURE__ */ jsx21("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx21(DefaultIcon, {}) }),
       /* @__PURE__ */ jsx21("p", { className: "text-sm", children: "No messages yet. Start a conversation!" })
     ] }) });
@@ -3191,27 +3218,23 @@ function WelcomeScreen({
   if (variant === "minimal") {
     return /* @__PURE__ */ jsxs16("div", { className: "flex flex-col h-full px-4 py-4", children: [
       hasHeader && /* @__PURE__ */ jsxs16("div", { className: "mb-4", children: [
-        title && /* @__PURE__ */ jsx21("h2", { className: "text-lg font-semibold !text-neutral-900 dark:!text-white", children: title }),
-        subtitle && /* @__PURE__ */ jsx21("p", { className: "text-sm !text-neutral-500 dark:!text-neutral-400 mt-1", children: subtitle })
+        title && /* @__PURE__ */ jsx21("h2", { className: "apteva-welcome-title text-lg font-semibold", children: title }),
+        subtitle && /* @__PURE__ */ jsx21("p", { className: "apteva-welcome-subtitle text-sm mt-1", children: subtitle })
       ] }),
       hasPrompts && /* @__PURE__ */ jsx21("div", { className: "flex-1 space-y-2", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ jsx21(
         "button",
         {
           onClick: () => onPromptClick(prompt.text),
           className: cn(
-            "w-full text-left px-4 py-3 rounded-xl",
-            "bg-neutral-50 dark:bg-neutral-800/50",
-            "border border-neutral-200 dark:border-neutral-700",
-            "hover:bg-neutral-100 dark:hover:bg-neutral-800",
-            "hover:border-neutral-300 dark:hover:border-neutral-600",
-            "transition-all duration-200",
+            "apteva-prompt-card w-full text-left px-4 py-3 rounded-xl",
+            "border transition-all duration-200",
             "group"
           ),
           children: /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx21("div", { className: "flex-shrink-0 !text-neutral-400 dark:!text-neutral-500 group-hover:!text-blue-500 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ jsx21(ArrowIcon, {}) }),
+            /* @__PURE__ */ jsx21("div", { className: "apteva-prompt-icon flex-shrink-0 transition-colors", children: prompt.icon || /* @__PURE__ */ jsx21(ArrowIcon, {}) }),
             /* @__PURE__ */ jsxs16("div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ jsx21("p", { className: "text-sm font-medium !text-neutral-900 dark:!text-white truncate", children: prompt.text }),
-              prompt.description && /* @__PURE__ */ jsx21("p", { className: "text-xs !text-neutral-500 dark:!text-neutral-400 mt-0.5 truncate", children: prompt.description })
+              /* @__PURE__ */ jsx21("p", { className: "apteva-prompt-text text-sm font-medium truncate", children: prompt.text }),
+              prompt.description && /* @__PURE__ */ jsx21("p", { className: "apteva-prompt-desc text-xs mt-0.5 truncate", children: prompt.description })
             ] })
           ] })
         },
@@ -3221,9 +3244,9 @@ function WelcomeScreen({
   }
   return /* @__PURE__ */ jsxs16("div", { className: "flex flex-col items-center justify-center h-full px-4 py-6 sm:py-8", children: [
     /* @__PURE__ */ jsxs16("div", { className: "text-center mb-6 sm:mb-8 max-w-md", children: [
-      /* @__PURE__ */ jsx21("div", { className: "mb-4 !text-neutral-400 dark:!text-neutral-500 flex justify-center", children: icon || /* @__PURE__ */ jsx21(DefaultIcon, {}) }),
-      title && /* @__PURE__ */ jsx21("h1", { className: "text-xl sm:text-2xl font-semibold !text-neutral-900 dark:!text-white mb-2", children: title }),
-      subtitle && /* @__PURE__ */ jsx21("p", { className: "text-sm sm:text-base !text-neutral-500 dark:!text-neutral-400", children: subtitle })
+      /* @__PURE__ */ jsx21("div", { className: "apteva-welcome-icon mb-4 flex justify-center", children: icon || /* @__PURE__ */ jsx21(DefaultIcon, {}) }),
+      title && /* @__PURE__ */ jsx21("h1", { className: "apteva-welcome-title text-xl sm:text-2xl font-semibold mb-2", children: title }),
+      subtitle && /* @__PURE__ */ jsx21("p", { className: "apteva-welcome-subtitle text-sm sm:text-base", children: subtitle })
     ] }),
     hasPrompts && /* @__PURE__ */ jsxs16("div", { className: "w-full max-w-2xl", children: [
       /* @__PURE__ */ jsx21("div", { className: "sm:hidden space-y-2", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ jsx21(
@@ -3231,26 +3254,22 @@ function WelcomeScreen({
         {
           onClick: () => onPromptClick(prompt.text),
           className: cn(
-            "w-full text-left px-4 py-3 rounded-xl",
-            "bg-white dark:bg-neutral-800",
-            "border border-neutral-200 dark:border-neutral-700",
-            "hover:bg-neutral-50 dark:hover:bg-neutral-700",
-            "hover:border-blue-300 dark:hover:border-blue-600",
+            "apteva-prompt-card w-full text-left px-4 py-3 rounded-xl",
+            "border transition-all duration-200",
             "active:scale-[0.98]",
-            "transition-all duration-200",
             "shadow-sm hover:shadow",
             "group"
           ),
           children: /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx21("div", { className: "flex-shrink-0 w-8 h-8 rounded-lg bg-neutral-100 dark:bg-neutral-700 flex items-center justify-center !text-neutral-500 dark:!text-neutral-400 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30 group-hover:!text-blue-600 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ jsx21(ArrowIcon, {}) }),
+            /* @__PURE__ */ jsx21("div", { className: "apteva-prompt-icon-box flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center transition-colors", children: prompt.icon || /* @__PURE__ */ jsx21(ArrowIcon, {}) }),
             /* @__PURE__ */ jsxs16("div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ jsx21("p", { className: "text-sm font-medium !text-neutral-900 dark:!text-white", children: prompt.text }),
-              prompt.description && /* @__PURE__ */ jsx21("p", { className: "text-xs !text-neutral-500 dark:!text-neutral-400 mt-0.5 line-clamp-1", children: prompt.description })
+              /* @__PURE__ */ jsx21("p", { className: "apteva-prompt-text text-sm font-medium", children: prompt.text }),
+              prompt.description && /* @__PURE__ */ jsx21("p", { className: "apteva-prompt-desc text-xs mt-0.5 line-clamp-1", children: prompt.description })
             ] }),
             /* @__PURE__ */ jsx21(
               "svg",
               {
-                className: "w-4 h-4 !text-neutral-400 group-hover:!text-blue-500 transition-colors flex-shrink-0",
+                className: "apteva-prompt-chevron w-4 h-4 transition-colors flex-shrink-0",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
@@ -3274,21 +3293,17 @@ function WelcomeScreen({
         {
           onClick: () => onPromptClick(prompt.text),
           className: cn(
-            "text-left p-4 rounded-xl",
-            "bg-white dark:bg-neutral-800",
-            "border border-neutral-200 dark:border-neutral-700",
-            "hover:bg-neutral-50 dark:hover:bg-neutral-700",
-            "hover:border-blue-300 dark:hover:border-blue-600",
+            "apteva-prompt-card text-left p-4 rounded-xl",
+            "border transition-all duration-200",
             "hover:shadow-md",
             "active:scale-[0.98]",
-            "transition-all duration-200",
             "group"
           ),
           children: /* @__PURE__ */ jsxs16("div", { className: "flex items-start gap-3", children: [
-            /* @__PURE__ */ jsx21("div", { className: "flex-shrink-0 w-9 h-9 rounded-lg bg-neutral-100 dark:bg-neutral-700 flex items-center justify-center !text-neutral-500 dark:!text-neutral-400 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30 group-hover:!text-blue-600 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ jsx21(ArrowIcon, {}) }),
+            /* @__PURE__ */ jsx21("div", { className: "apteva-prompt-icon-box flex-shrink-0 w-9 h-9 rounded-lg flex items-center justify-center transition-colors", children: prompt.icon || /* @__PURE__ */ jsx21(ArrowIcon, {}) }),
             /* @__PURE__ */ jsxs16("div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ jsx21("p", { className: "text-sm font-medium !text-neutral-900 dark:!text-white leading-snug", children: prompt.text }),
-              prompt.description && /* @__PURE__ */ jsx21("p", { className: "text-xs !text-neutral-500 dark:!text-neutral-400 mt-1 line-clamp-2", children: prompt.description })
+              /* @__PURE__ */ jsx21("p", { className: "apteva-prompt-text text-sm font-medium leading-snug", children: prompt.text }),
+              prompt.description && /* @__PURE__ */ jsx21("p", { className: "apteva-prompt-desc text-xs mt-1 line-clamp-2", children: prompt.description })
             ] })
           ] })
         },