@mastra/playground-ui 56.0.0 → 57.0.0-alpha.1

package/dist/components/Workflow.es.js

@@ -6,24 +6,24 @@ import { T as Txt } from '../Txt-DTh3Pa_a.js';
 import { formatDuration } from '../utils/duration.es.js';
 import { C as Code } from '../code-D4Vw_fYq.js';
 import { formatTypeScript } from '../utils/formatting.es.js';
-import { C as CopyButton } from '../copy-button-2cwdZ3dW.js';
+import { C as CopyButton } from '../copy-button-C6RswD_D.js';
 import { raisedSurfaceStyle, surfaceStateLayerStyle } from '../primitives/raised-surface.es.js';
 import { c as cn } from '../cn-65Adrsfj.js';
 import { a as ActivityWick } from '../activity-B8TfxRNU.js';
-import { C as Collapsible, b as CollapsibleTrigger, a as CollapsibleContent } from '../collapsible-B2uUy8w5.js';
+import { C as Collapsible, b as CollapsibleTrigger, a as CollapsibleContent } from '../collapsible-DhhP5p1j.js';
 import { S as Shimmer } from '../shimmer-BN7Dzm37.js';
 import { javascript } from '@codemirror/lang-javascript';
 import { jsonLanguage } from '@codemirror/lang-json';
 import { EditorView } from '@codemirror/view';
 import ReactCodeMirror from '@uiw/react-codemirror';
-import { u as useCodemirrorTheme } from '../code-editor-vCt7l9Bl.js';
-import { B as Button } from '../Button-cWcBEd-G.js';
-import { D as Dialog, a as DialogContent, b as DialogHeader, c as DialogTitle, e as DialogBody } from '../dialog-DRpMek34.js';
+import { u as useCodemirrorTheme } from '../code-editor-7wJJDE9d.js';
+import { B as Button } from '../Button-C9cvaVFG.js';
+import { D as Dialog, a as DialogContent, b as DialogHeader, c as DialogTitle, e as DialogBody } from '../dialog-D8fuBETk.js';
 import { Handle, Position, useInternalNode, getBezierPath, BaseEdge, EdgeLabelRenderer, useViewport, useReactFlow, useStore, Panel, useNodesInitialized, ReactFlow, Background, BackgroundVariant } from '@xyflow/react';
 import { S as Slider } from '../slider-MM3K0Pyv.js';
 import '@xyflow/react/dist/style.css';
 import { S as Skeleton } from '../skeleton-BsRAXyh5.js';
-import { D as DropdownMenu } from '../dropdown-menu-DL0MzjEb.js';
+import { D as DropdownMenu } from '../dropdown-menu-DpEn6HwK.js';
 
 const WorkflowCanvasInsetContext = createContext(0);
 function workflowFitOptions(leftInset, isInline = false) {
@@ -287,12 +287,12 @@ function WorkflowConditionCardView({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `${raisedSurfaceStyle} has-focus-visible:outline-accent3 w-[274px] overflow-hidden rounded-xl p-0.5 has-focus-visible:outline-2 has-focus-visible:outline-offset-4`,
+      className: `${raisedSurfaceStyle} w-[274px] overflow-hidden rounded-xl p-0.5 has-focus-visible:outline-2 has-focus-visible:outline-offset-4 has-focus-visible:outline-accent3`,
       "data-workflow-node": true,
       "data-testid": "workflow-condition-node",
       "data-workflow-step-status": previousDisplayStatus ?? "idle",
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "text-meta text-muted-foreground flex h-[46px] items-center gap-2 px-2.5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex h-[46px] items-center gap-2 px-2.5 text-meta text-muted-foreground", children: [
           /* @__PURE__ */ jsx(Badge, { size: "xs", variant: type === "else" ? "neutral" : "yellow", emphasis: "muted", icon: /* @__PURE__ */ jsx(Icon, { "aria-hidden": true }), children: label }),
           hasExpression && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("span", { className: "ml-auto", children: "Expression" }),
@@ -305,13 +305,13 @@ function WorkflowConditionCardView({
             role: "region",
             "aria-label": "Condition details",
             tabIndex: 0,
-            className: `${surfaceClasses} text-foreground nodrag nopan nowheel max-h-[220px] overflow-auto p-3.5 [&_pre]:leading-relaxed [&_pre]:whitespace-pre-wrap`,
+            className: `${surfaceClasses} nodrag nopan nowheel max-h-[220px] overflow-auto p-3.5 text-foreground [&_pre]:leading-relaxed [&_pre]:whitespace-pre-wrap`,
             children: sources.map(({ condition, expression, key }) => /* @__PURE__ */ jsxs("div", { children: [
               condition.conj && /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "neutral", children: condition.conj.toUpperCase() }),
               condition.fnString !== void 0 ? /* @__PURE__ */ jsx(WorkflowConditionSource, { source: condition.fnString }) : /* @__PURE__ */ jsx(Code, { code: expression })
             ] }, key))
           }
-        ) : /* @__PURE__ */ jsx("p", { className: `${surfaceClasses} text-muted-foreground p-3`, children: type === "else" ? "When no other branch matches" : "Condition expression unavailable" }),
+        ) : /* @__PURE__ */ jsx("p", { className: `${surfaceClasses} p-3 text-muted-foreground`, children: type === "else" ? "When no other branch matches" : "Condition expression unavailable" }),
         actionBar && /* @__PURE__ */ jsx("div", { className: "nodrag nopan flex justify-end px-2.5 py-1.5 empty:hidden", children: actionBar })
       ]
     }
@@ -352,13 +352,13 @@ function DialHand({ angle, length }) {
       y1: DIAL_CENTER,
       x2: tip.x,
       y2: tip.y,
-      className: "stroke-muted-foreground stroke-[1.5]",
+      className: "stroke-1.5 stroke-muted-foreground",
       strokeLinecap: "round"
     }
   );
 }
 function DialFace({ tickAngles, children }) {
-  return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground block size-28 shrink-0", "aria-hidden": true, children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 116 116", fill: "none", className: "block size-full overflow-visible", children: [
+  return /* @__PURE__ */ jsx("span", { className: "block size-28 shrink-0 text-muted-foreground", "aria-hidden": true, children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 116 116", fill: "none", className: "block size-full overflow-visible", children: [
     tickAngles.map((angle, index) => /* @__PURE__ */ jsx(DialTick, { angle, major: index % 5 === 0 }, angle)),
     children
   ] }) });
@@ -383,12 +383,12 @@ function DurationDial({ amount, unit }) {
         strokeLinecap: "round"
       }
     ),
-    /* @__PURE__ */ jsxs("text", { x: DIAL_CENTER, y: 94, textAnchor: "middle", className: "fill-muted-foreground text-meta font-body", children: [
+    /* @__PURE__ */ jsxs("text", { x: DIAL_CENTER, y: 94, textAnchor: "middle", className: "fill-muted-foreground font-body text-meta", children: [
       scale,
       " ",
       unit
     ] }),
-    /* @__PURE__ */ jsx("text", { x: DIAL_CENTER, y: 106, textAnchor: "middle", className: "fill-placeholder text-meta font-body", children: "scale" })
+    /* @__PURE__ */ jsx("text", { x: DIAL_CENTER, y: 106, textAnchor: "middle", className: "fill-placeholder font-body text-meta", children: "scale" })
   ] });
 }
 
@@ -405,11 +405,11 @@ function TimingReading({
   caption,
   dial
 }) {
-  return /* @__PURE__ */ jsxs("span", { className: "text-foreground mt-1 flex min-h-[108px] items-center justify-between gap-1", children: [
+  return /* @__PURE__ */ jsxs("span", { className: "mt-1 flex min-h-[108px] items-center justify-between gap-1 text-foreground", children: [
     /* @__PURE__ */ jsxs("span", { className: "z-10 flex min-w-0 flex-col gap-2", children: [
-      /* @__PURE__ */ jsxs("span", { className: "text-display flex items-baseline gap-1 leading-none tracking-tighter whitespace-nowrap tabular-nums", children: [
+      /* @__PURE__ */ jsxs("span", { className: "flex items-baseline gap-1 text-display leading-none tracking-tighter whitespace-nowrap tabular-nums", children: [
         value,
-        /* @__PURE__ */ jsx("small", { className: "text-meta text-muted-foreground tracking-normal", children: unit })
+        /* @__PURE__ */ jsx("small", { className: "text-meta tracking-normal text-muted-foreground", children: unit })
       ] }),
       /* @__PURE__ */ jsx("span", { className: captionClasses, children: caption })
     ] }),
@@ -513,7 +513,7 @@ function WorkflowStepCardView(props) {
     {
       className: cn(
         "relative isolate w-[274px]",
-        isBodyExpanded && "w-[688px]",
+        isBodyExpanded && "w-172",
         isStacked && "pb-3 before:absolute before:inset-x-1.5 before:top-2 before:bottom-1.5 before:-z-10 before:rounded-xl before:border before:border-border before:bg-card after:absolute after:inset-x-3 after:top-3.5 after:bottom-0 after:-z-20 after:rounded-xl after:border after:border-border after:bg-card"
       ),
       children: /* @__PURE__ */ jsxs(
@@ -555,15 +555,15 @@ function WorkflowStepCardView(props) {
                   "aria-pressed": onSelect ? Boolean(isSelected) : void 0,
                   onClick: onSelect,
                   children: [
-                    /* @__PURE__ */ jsxs("span", { className: "group-hover:bg-fill-subtle flex items-start justify-between gap-2.5 rounded-(--card-radius) px-3.5 py-3", children: [
-                      /* @__PURE__ */ jsx("span", { className: "text-column text-foreground min-w-0 wrap-anywhere", title: label, children: /* @__PURE__ */ jsx(Shimmer, { active: isRunning, children: label }) }),
+                    /* @__PURE__ */ jsxs("span", { className: "flex items-start justify-between gap-2.5 rounded-(--card-radius) px-3.5 py-3 group-hover:bg-fill-subtle", children: [
+                      /* @__PURE__ */ jsx("span", { className: "min-w-0 text-column wrap-anywhere text-foreground", title: label, children: /* @__PURE__ */ jsx(Shimmer, { active: isRunning, children: label }) }),
                       /* @__PURE__ */ jsx(WorkflowTypeBadge, { ...props })
                     ] }),
-                    /* @__PURE__ */ jsxs("span", { className: "bg-card flex flex-col gap-2 rounded-t-(--card-radius) px-3.5 py-3 empty:py-1.5", children: [
-                      description && /* @__PURE__ */ jsx("span", { className: "text-caption text-muted-foreground wrap-anywhere", children: description }),
+                    /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-2 rounded-t-(--card-radius) bg-card px-3.5 py-3 empty:py-1.5", children: [
+                      description && /* @__PURE__ */ jsx("span", { className: "text-caption wrap-anywhere text-muted-foreground", children: description }),
                       /* @__PURE__ */ jsx(WorkflowTiming, { duration: props.duration, date: props.date }),
                       isWaiting && /* @__PURE__ */ jsx("span", { className: "text-meta text-accent3", children: "Next step in debug" }),
-                      isForEach && foreachProgress && /* @__PURE__ */ jsxs("span", { className: "text-meta flex flex-col gap-2 py-1", children: [
+                      isForEach && foreachProgress && /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-2 py-1 text-meta", children: [
                         /* @__PURE__ */ jsxs("span", { children: [
                           /* @__PURE__ */ jsx("strong", { children: foreachProgress.completedCount }),
                           " of ",
@@ -573,7 +573,7 @@ function WorkflowStepCardView(props) {
                         foreachProgress.totalCount > 0 ? /* @__PURE__ */ jsx(
                           "progress",
                           {
-                            className: "bg-muted accent-positive1 [&::-moz-progress-bar]:bg-positive1 [&::-webkit-progress-bar]:bg-muted [&::-webkit-progress-value]:bg-positive1 h-1 w-full appearance-none border-0",
+                            className: "h-1 w-full appearance-none border-0 bg-muted accent-positive1 [&::-moz-progress-bar]:bg-positive1 [&::-webkit-progress-bar]:bg-muted [&::-webkit-progress-value]:bg-positive1",
                             "aria-label": `${label} completed items`,
                             value: foreachProgress.completedCount,
                             max: foreachProgress.totalCount
@@ -613,7 +613,7 @@ function WorkflowStepCardView(props) {
                   {
                     className: cn(
                       surfaceStateLayerStyle,
-                      "nodrag nopan border-border bg-card text-caption flex min-h-11 w-full items-center justify-between border-t px-3.5 py-2.5 focus-visible:shadow-none focus-visible:ring-0"
+                      "nodrag nopan flex min-h-11 w-full items-center justify-between border-t border-border bg-card px-3.5 py-2.5 text-caption focus-visible:shadow-none focus-visible:ring-0"
                     ),
                     children: [
                       /* @__PURE__ */ jsxs("span", { children: [
@@ -625,7 +625,7 @@ function WorkflowStepCardView(props) {
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx(CollapsibleContent, { className: "border-border h-[620px] overflow-hidden border-t border-dashed", children: body })
+                /* @__PURE__ */ jsx(CollapsibleContent, { className: "h-155 overflow-hidden border-t border-dashed border-border", children: body })
               ] })
             ] }),
             hasActivity && /* @__PURE__ */ jsx(
@@ -669,8 +669,8 @@ const WorkflowCodeContent = ({
   if (typeof data !== "string") {
     const content = JSON.stringify(data, null, 2);
     return /* @__PURE__ */ jsxs("div", { className: "relative overflow-auto", style: { maxHeight: 500 }, children: [
-      /* @__PURE__ */ jsx("div", { className: "bg-muted absolute top-2 right-2 z-10 rounded-full", children: /* @__PURE__ */ jsx(CopyButton, { content }) }),
-      /* @__PURE__ */ jsx("div", { className: "bg-muted rounded-lg p-4", children: /* @__PURE__ */ jsx(ReactCodeMirror, { value: content, theme, extensions: [jsonLanguage, EditorView.lineWrapping] }) })
+      /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 z-10 rounded-full bg-muted", children: /* @__PURE__ */ jsx(CopyButton, { content }) }),
+      /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-muted p-4", children: /* @__PURE__ */ jsx(ReactCodeMirror, { value: content, theme, extensions: [jsonLanguage, EditorView.lineWrapping] }) })
     ] });
   }
   const extensions = getExtensions(data);
@@ -681,8 +681,8 @@ const WorkflowCodeContent = ({
   } catch {
   }
   return /* @__PURE__ */ jsxs("div", { className: "relative overflow-auto", style: { maxHeight: 500 }, children: [
-    /* @__PURE__ */ jsx("div", { className: "bg-muted absolute top-2 right-2 z-10 rounded-full", children: /* @__PURE__ */ jsx(CopyButton, { content: data }) }),
-    /* @__PURE__ */ jsx("div", { className: "bg-muted rounded-lg p-4", children: /* @__PURE__ */ jsx(ReactCodeMirror, { value: displayContent, theme, extensions }) })
+    /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 z-10 rounded-full bg-muted", children: /* @__PURE__ */ jsx(CopyButton, { content: data }) }),
+    /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-muted p-4", children: /* @__PURE__ */ jsx(ReactCodeMirror, { value: displayContent, theme, extensions }) })
   ] });
 };
 
@@ -710,7 +710,7 @@ const WorkflowEdgeDataButton = ({
         className: cn(
           raisedSurfaceStyle,
           surfaceStateLayerStyle,
-          "text-foreground aria-pressed:before:bg-fill h-7 rounded-lg px-2"
+          "h-7 rounded-lg px-2 text-foreground aria-pressed:before:bg-fill"
         ),
         icon: /* @__PURE__ */ jsx(Database, { className: "text-accent1" }),
         children: "Data"
@@ -718,7 +718,7 @@ const WorkflowEdgeDataButton = ({
     ),
     /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "w-full max-w-3xl", children: [
       /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Step output" }) }),
-      /* @__PURE__ */ jsx(DialogBody, { className: "overflow-auto", style: { maxHeight: 700 }, children: /* @__PURE__ */ jsxs("div", { className: "border-border bg-background min-w-0 rounded-lg border p-3", children: [
+      /* @__PURE__ */ jsx(DialogBody, { className: "overflow-auto", style: { maxHeight: 700 }, children: /* @__PURE__ */ jsxs("div", { className: "min-w-0 rounded-lg border border-border bg-background p-3", children: [
         /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "ink", className: "mb-2 block", children: dataLabel }),
         /* @__PURE__ */ jsx(WorkflowCodeContent, { data: output })
       ] }) })
@@ -841,9 +841,9 @@ function WorkflowGraphGroups({ nodes, groups }) {
         return /* @__PURE__ */ jsx(
           "div",
           {
-            className: "border-muted-foreground/25 bg-muted-foreground/3 absolute rounded-xl border border-dashed",
+            className: "absolute rounded-xl border border-dashed border-muted-foreground/25 bg-muted-foreground/3",
             style: { transform: `translate(${left}px, ${top}px)`, width: right - left, height: bottom - top },
-            children: /* @__PURE__ */ jsxs("div", { className: "text-meta text-muted-foreground flex items-center gap-2 px-5 py-4", children: [
+            children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-5 py-4 text-meta text-muted-foreground", children: [
               /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "blue", emphasis: "muted", icon: /* @__PURE__ */ jsx(GitFork, { "aria-hidden": true }), children: group.label }),
               /* @__PURE__ */ jsx("span", { children: group.description })
             ] })
@@ -1061,12 +1061,12 @@ function WorkflowDebugControls({
   const nextStepFallback = canRunNextStep ? "Ready to advance" : "Next step unavailable";
   const actionsDisabled = !canRunNextStep || isStreaming || disabled;
   return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-3", "data-testid": "workflow-debug-step-controls", children: [
-    /* @__PURE__ */ jsxs("div", { className: "border-border/50 bg-background rounded-xl border p-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border/50 bg-background p-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "mb-2 flex flex-wrap items-center justify-between gap-2", children: [
         /* @__PURE__ */ jsx("span", { className: "text-meta text-muted-foreground", children: "Next step" }),
         /* @__PURE__ */ jsx(Badge, { size: "sm", icon: /* @__PURE__ */ jsx(Pause, {}), emphasis: "muted", children: "Step by step" })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "text-subheading text-foreground break-words", "aria-live": "polite", children: nextStepLabel || nextStepFallback })
+      /* @__PURE__ */ jsx("div", { className: "text-subheading break-words text-foreground", "aria-live": "polite", children: nextStepLabel || nextStepFallback })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx(