@mastra/playground-ui 49.0.0-alpha.2 → 49.0.0-alpha.3

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @mastra/playground-ui
 
+## 49.0.0-alpha.3
+
+### Patch Changes
+
+- Flattened the step markers in the `plain` variant of `ProcessStepListItem`. A completed step now shows a green check on its own instead of a filled green disc with a glow behind it, and the pending, running and completed markers finally share the same diameter — the dashed pending circle used to be 28px next to an 11px spinner. ([#21414](https://github.com/mastra-ai/mastra/pull/21414))
+
+- Updated dependencies [[`d118873`](https://github.com/mastra-ai/mastra/commit/d118873cfd5074b1f814a1c169a97ca7a3a29174), [`161258b`](https://github.com/mastra-ai/mastra/commit/161258b3473a6d0fce00a43cab59d119a49a232f), [`8ea8038`](https://github.com/mastra-ai/mastra/commit/8ea80386fde53d26e2c0b2060c53bc9bd9be10f3)]:
+  - @mastra/core@1.59.0-alpha.3
+  - @mastra/client-js@1.40.0-alpha.3
+  - @mastra/react@1.4.3-alpha.3
+
 ## 49.0.0-alpha.2
 
 ### Minor Changes

package/dist/components/Steps.cjs.js

@@ -21,6 +21,57 @@ function getStatusIcon(status) {
   }
 }
 
+function PendingRing() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", className: "text-neutral2", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "circle",
+    {
+      cx: "12",
+      cy: "12",
+      r: "8.5",
+      pathLength: "48",
+      fill: "none",
+      stroke: "currentcolor",
+      strokeWidth: "2.8",
+      strokeLinecap: "round",
+      strokeDasharray: "3 3"
+    }
+  ) });
+}
+function StepStatusMarker({ status, variant }) {
+  if (variant === "plain") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: utils_cn.cn("flex size-4 items-center justify-center self-center [&>svg]:size-4", primitives_transitions.transitions.colors, {
+          "[&>svg]:text-positive1": status === "success",
+          "[&>svg]:text-negative1": status === "failed"
+        }),
+        children: status === "pending" ? /* @__PURE__ */ jsxRuntime.jsx(PendingRing, {}) : getStatusIcon(status)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: utils_cn.cn(
+        "flex size-7 items-center justify-center self-center rounded-full motion-reduce:transition-none",
+        primitives_transitions.transitions.colors,
+        primitives_transitions.transitions.transform,
+        primitives_transitions.transitions.shadow,
+        {
+          "[&>svg]:text-notice-success-fg": status === "success",
+          "[&>svg]:text-notice-destructive-fg": status === "failed",
+          "border border-dashed border-neutral2": status === "pending",
+          "[&>svg]:size-4": status !== "running",
+          "bg-accent1Dark shadow-glow-accent1": status === "success",
+          "bg-accent2Dark shadow-glow-accent2": status === "failed",
+          "scale-110": status === "success" || status === "failed"
+        }
+      ),
+      children: getStatusIcon(status)
+    }
+  );
+}
 function ProcessStepListItem({ step, isActive, position, variant = "default" }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -62,27 +113,7 @@ function ProcessStepListItem({ step, isActive, position, variant = "default" })
             step.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: utils_cn.cn("-mt-0.5 text-ui-md text-neutral2", { truncate: variant === "plain" }), children: step.description })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: utils_cn.cn(
-              "flex size-7 items-center justify-center self-center rounded-full motion-reduce:transition-none",
-              primitives_transitions.transitions.colors,
-              primitives_transitions.transitions.transform,
-              primitives_transitions.transitions.shadow,
-              {
-                "border border-dashed border-neutral2": step.status === "pending",
-                "[&>svg]:size-4": step.status !== "running",
-                "[&>svg]:text-notice-success-fg": step.status === "success",
-                "[&>svg]:text-notice-destructive-fg": step.status === "failed",
-                "bg-accent1Dark shadow-glow-accent1": step.status === "success",
-                "bg-accent2Dark shadow-glow-accent2": step.status === "failed",
-                "scale-110": step.status === "success" || step.status === "failed"
-              }
-            ),
-            children: getStatusIcon(step.status)
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsx(StepStatusMarker, { status: step.status, variant })
       ]
     }
   );

package/dist/components/Steps.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Steps.cjs.js","sources":["../../src/ds/components/Steps/shared.tsx","../../src/ds/components/Steps/process-step-list-item.tsx","../../src/ds/components/Steps/process-step-list.tsx","../../src/ds/components/Steps/process-step-progress-bar.tsx"],"sourcesContent":["import { CheckIcon, XIcon } from 'lucide-react';\nimport { Spinner } from '@/ds/components/Spinner';\n\nexport function getStatusIcon(status: string) {\n  switch (status) {\n    case 'running':\n      return <Spinner size=\"sm\" aria-hidden />;\n    case 'success':\n      return <CheckIcon aria-hidden />;\n    case 'failed':\n      return <XIcon aria-hidden />;\n    default:\n      return null;\n  }\n}\n\nexport type ProcessStep = {\n  id: string;\n  status: string;\n  description: string;\n  title: string;\n  isActive: boolean;\n};\n","import { getStatusIcon } from './shared';\nimport type { ProcessStep } from './shared';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\ntype ProcessStepListItemVariant = 'default' | 'plain';\n\nexport type ProcessStepListItemProps = {\n  /** @deprecated Ignored — the heading comes from `step.title`. */\n  stepId?: string;\n  step: ProcessStep;\n  isActive: boolean;\n  position: number;\n  variant?: ProcessStepListItemVariant;\n};\n\nexport function ProcessStepListItem({ step, isActive, position, variant = 'default' }: ProcessStepListItemProps) {\n  return (\n    <div\n      className={cn(\n        'grid grid-cols-[1fr_auto] gap-6 rounded-lg px-4 py-3 motion-reduce:transition-none',\n        transitions.colors,\n        {\n          'border border-transparent': variant === 'default',\n          'border-dashed border-neutral2 bg-surface3': isActive && variant === 'default',\n        },\n      )}\n    >\n      <div className=\"grid min-w-0 grid-cols-[auto_1fr] gap-2\">\n        <span\n          className={cn('flex min-w-6 justify-end text-ui-md', transitions.colors, {\n            'text-neutral5': isActive || step.status === 'success',\n            'text-neutral3': !isActive && step.status !== 'success',\n          })}\n        >\n          {position}.\n        </span>\n        <div className=\"min-w-0\">\n          <h4\n            className={cn('text-ui-md', transitions.colors, {\n              'text-neutral5': isActive || step.status === 'success',\n              'text-neutral3': !isActive && step.status !== 'success',\n            })}\n          >\n            {step.title}\n          </h4>\n          {step.description && (\n            <p className={cn('-mt-0.5 text-ui-md text-neutral2', { truncate: variant === 'plain' })}>\n              {step.description}\n            </p>\n          )}\n        </div>\n      </div>\n      <div\n        className={cn(\n          'flex size-7 items-center justify-center self-center rounded-full motion-reduce:transition-none',\n          transitions.colors,\n          transitions.transform,\n          transitions.shadow,\n          {\n            'border border-dashed border-neutral2': step.status === 'pending',\n            '[&>svg]:size-4': step.status !== 'running',\n            '[&>svg]:text-notice-success-fg': step.status === 'success',\n            '[&>svg]:text-notice-destructive-fg': step.status === 'failed',\n            'bg-accent1Dark shadow-glow-accent1': step.status === 'success',\n            'bg-accent2Dark shadow-glow-accent2': step.status === 'failed',\n            'scale-110': step.status === 'success' || step.status === 'failed',\n          },\n        )}\n      >\n        {getStatusIcon(step.status)}\n      </div>\n    </div>\n  );\n}\n","import { ProcessStepListItem } from './process-step-list-item';\nimport type { ProcessStep } from './shared';\nimport { cn } from '@/lib/utils';\n\nexport type ProcessStepListProps = {\n  currentStep: ProcessStep | null;\n  steps: ProcessStep[];\n  className?: string;\n};\n\nexport function ProcessStepList({ currentStep, steps = [], className }: ProcessStepListProps) {\n  return (\n    <div className={cn(className)}>\n      {steps.map((step: ProcessStep, idx: number) => (\n        <ProcessStepListItem key={step.id} step={step} isActive={currentStep?.id === step.id} position={idx + 1} />\n      ))}\n    </div>\n  );\n}\n","import type { ProcessStep } from './shared';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type ProcessStepProgressBarProps = {\n  steps: ProcessStep[];\n};\n\nexport function ProcessStepProgressBar({ steps }: ProcessStepProgressBarProps) {\n  const totalSteps = steps.length;\n  const completedSteps = steps.filter(step => step.status === 'success').length;\n\n  return (\n    <div className=\"flex w-full flex-col content-center justify-center gap-4\">\n      <div className=\"grid w-full grid-cols-[0_repeat(9,1fr)]\">\n        {steps.map((step: ProcessStep, idx: number) => {\n          return (\n            <div\n              key={step.id}\n              className={cn('relative flex h-8 items-center justify-end', transitions.colors, {\n                'bg-accent1Dark': step.status === 'success' && steps?.[idx - 1]?.status === 'success',\n              })}\n            >\n              <div\n                className={cn(\n                  'absolute right-0 z-10 flex size-8 translate-x-1/2 items-center justify-center self-center rounded-full bg-surface3 text-ui-sm font-bold text-neutral3 motion-reduce:transition-none',\n                  transitions.colors,\n                  transitions.transform,\n                  transitions.shadow,\n                  {\n                    'border border-dashed border-neutral2': step.status === 'pending',\n                    'bg-accent1Dark text-notice-success-fg shadow-glow-accent1 scale-110': step.status === 'success',\n                    'bg-accent2Dark text-notice-destructive-fg shadow-glow-accent2 scale-110': step.status === 'failed',\n                  },\n                )}\n              >\n                {step.status === 'running' ? <Spinner /> : idx + 1}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n      <div className={cn('text-center text-xs text-neutral3', transitions.colors)}>\n        {completedSteps} of {totalSteps} steps completed\n      </div>\n    </div>\n  );\n}\n"],"names":["jsx","Spinner","CheckIcon","XIcon","jsxs","cn","transitions"],"mappings":"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"}
+{"version":3,"file":"Steps.cjs.js","sources":["../../src/ds/components/Steps/shared.tsx","../../src/ds/components/Steps/process-step-list-item.tsx","../../src/ds/components/Steps/process-step-list.tsx","../../src/ds/components/Steps/process-step-progress-bar.tsx"],"sourcesContent":["import { CheckIcon, XIcon } from 'lucide-react';\nimport { Spinner } from '@/ds/components/Spinner';\n\nexport function getStatusIcon(status: string) {\n  switch (status) {\n    case 'running':\n      return <Spinner size=\"sm\" aria-hidden />;\n    case 'success':\n      return <CheckIcon aria-hidden />;\n    case 'failed':\n      return <XIcon aria-hidden />;\n    default:\n      return null;\n  }\n}\n\nexport type ProcessStep = {\n  id: string;\n  status: string;\n  description: string;\n  title: string;\n  isActive: boolean;\n};\n","import { getStatusIcon } from './shared';\nimport type { ProcessStep } from './shared';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\ntype ProcessStepListItemVariant = 'default' | 'plain';\n\n/** Same ring geometry and stroke as `<Spinner size=\"sm\" />`, so pending and running read as one shape. */\nfunction PendingRing() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"text-neutral2\" aria-hidden>\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"8.5\"\n        pathLength=\"48\"\n        fill=\"none\"\n        stroke=\"currentcolor\"\n        strokeWidth=\"2.8\"\n        strokeLinecap=\"round\"\n        strokeDasharray=\"3 3\"\n      />\n    </svg>\n  );\n}\n\nfunction StepStatusMarker({ status, variant }: { status: string; variant: ProcessStepListItemVariant }) {\n  if (variant === 'plain') {\n    return (\n      <span\n        className={cn('flex size-4 items-center justify-center self-center [&>svg]:size-4', transitions.colors, {\n          '[&>svg]:text-positive1': status === 'success',\n          '[&>svg]:text-negative1': status === 'failed',\n        })}\n      >\n        {status === 'pending' ? <PendingRing /> : getStatusIcon(status)}\n      </span>\n    );\n  }\n\n  return (\n    <span\n      className={cn(\n        'flex size-7 items-center justify-center self-center rounded-full motion-reduce:transition-none',\n        transitions.colors,\n        transitions.transform,\n        transitions.shadow,\n        {\n          '[&>svg]:text-notice-success-fg': status === 'success',\n          '[&>svg]:text-notice-destructive-fg': status === 'failed',\n          'border border-dashed border-neutral2': status === 'pending',\n          '[&>svg]:size-4': status !== 'running',\n          'bg-accent1Dark shadow-glow-accent1': status === 'success',\n          'bg-accent2Dark shadow-glow-accent2': status === 'failed',\n          'scale-110': status === 'success' || status === 'failed',\n        },\n      )}\n    >\n      {getStatusIcon(status)}\n    </span>\n  );\n}\n\nexport type ProcessStepListItemProps = {\n  /** @deprecated Ignored — the heading comes from `step.title`. */\n  stepId?: string;\n  step: ProcessStep;\n  isActive: boolean;\n  position: number;\n  variant?: ProcessStepListItemVariant;\n};\n\nexport function ProcessStepListItem({ step, isActive, position, variant = 'default' }: ProcessStepListItemProps) {\n  return (\n    <div\n      className={cn(\n        'grid grid-cols-[1fr_auto] gap-6 rounded-lg px-4 py-3 motion-reduce:transition-none',\n        transitions.colors,\n        {\n          'border border-transparent': variant === 'default',\n          'border-dashed border-neutral2 bg-surface3': isActive && variant === 'default',\n        },\n      )}\n    >\n      <div className=\"grid min-w-0 grid-cols-[auto_1fr] gap-2\">\n        <span\n          className={cn('flex min-w-6 justify-end text-ui-md', transitions.colors, {\n            'text-neutral5': isActive || step.status === 'success',\n            'text-neutral3': !isActive && step.status !== 'success',\n          })}\n        >\n          {position}.\n        </span>\n        <div className=\"min-w-0\">\n          <h4\n            className={cn('text-ui-md', transitions.colors, {\n              'text-neutral5': isActive || step.status === 'success',\n              'text-neutral3': !isActive && step.status !== 'success',\n            })}\n          >\n            {step.title}\n          </h4>\n          {step.description && (\n            <p className={cn('-mt-0.5 text-ui-md text-neutral2', { truncate: variant === 'plain' })}>\n              {step.description}\n            </p>\n          )}\n        </div>\n      </div>\n      <StepStatusMarker status={step.status} variant={variant} />\n    </div>\n  );\n}\n","import { ProcessStepListItem } from './process-step-list-item';\nimport type { ProcessStep } from './shared';\nimport { cn } from '@/lib/utils';\n\nexport type ProcessStepListProps = {\n  currentStep: ProcessStep | null;\n  steps: ProcessStep[];\n  className?: string;\n};\n\nexport function ProcessStepList({ currentStep, steps = [], className }: ProcessStepListProps) {\n  return (\n    <div className={cn(className)}>\n      {steps.map((step: ProcessStep, idx: number) => (\n        <ProcessStepListItem key={step.id} step={step} isActive={currentStep?.id === step.id} position={idx + 1} />\n      ))}\n    </div>\n  );\n}\n","import type { ProcessStep } from './shared';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type ProcessStepProgressBarProps = {\n  steps: ProcessStep[];\n};\n\nexport function ProcessStepProgressBar({ steps }: ProcessStepProgressBarProps) {\n  const totalSteps = steps.length;\n  const completedSteps = steps.filter(step => step.status === 'success').length;\n\n  return (\n    <div className=\"flex w-full flex-col content-center justify-center gap-4\">\n      <div className=\"grid w-full grid-cols-[0_repeat(9,1fr)]\">\n        {steps.map((step: ProcessStep, idx: number) => {\n          return (\n            <div\n              key={step.id}\n              className={cn('relative flex h-8 items-center justify-end', transitions.colors, {\n                'bg-accent1Dark': step.status === 'success' && steps?.[idx - 1]?.status === 'success',\n              })}\n            >\n              <div\n                className={cn(\n                  'absolute right-0 z-10 flex size-8 translate-x-1/2 items-center justify-center self-center rounded-full bg-surface3 text-ui-sm font-bold text-neutral3 motion-reduce:transition-none',\n                  transitions.colors,\n                  transitions.transform,\n                  transitions.shadow,\n                  {\n                    'border border-dashed border-neutral2': step.status === 'pending',\n                    'bg-accent1Dark text-notice-success-fg shadow-glow-accent1 scale-110': step.status === 'success',\n                    'bg-accent2Dark text-notice-destructive-fg shadow-glow-accent2 scale-110': step.status === 'failed',\n                  },\n                )}\n              >\n                {step.status === 'running' ? <Spinner /> : idx + 1}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n      <div className={cn('text-center text-xs text-neutral3', transitions.colors)}>\n        {completedSteps} of {totalSteps} steps completed\n      </div>\n    </div>\n  );\n}\n"],"names":["jsx","Spinner","CheckIcon","XIcon","cn","transitions","jsxs"],"mappings":"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"}

package/dist/components/Steps.es.js

@@ -17,6 +17,57 @@ function getStatusIcon(status) {
   }
 }
 
+function PendingRing() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "text-neutral2", "aria-hidden": true, children: /* @__PURE__ */ jsx(
+    "circle",
+    {
+      cx: "12",
+      cy: "12",
+      r: "8.5",
+      pathLength: "48",
+      fill: "none",
+      stroke: "currentcolor",
+      strokeWidth: "2.8",
+      strokeLinecap: "round",
+      strokeDasharray: "3 3"
+    }
+  ) });
+}
+function StepStatusMarker({ status, variant }) {
+  if (variant === "plain") {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn("flex size-4 items-center justify-center self-center [&>svg]:size-4", transitions.colors, {
+          "[&>svg]:text-positive1": status === "success",
+          "[&>svg]:text-negative1": status === "failed"
+        }),
+        children: status === "pending" ? /* @__PURE__ */ jsx(PendingRing, {}) : getStatusIcon(status)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "flex size-7 items-center justify-center self-center rounded-full motion-reduce:transition-none",
+        transitions.colors,
+        transitions.transform,
+        transitions.shadow,
+        {
+          "[&>svg]:text-notice-success-fg": status === "success",
+          "[&>svg]:text-notice-destructive-fg": status === "failed",
+          "border border-dashed border-neutral2": status === "pending",
+          "[&>svg]:size-4": status !== "running",
+          "bg-accent1Dark shadow-glow-accent1": status === "success",
+          "bg-accent2Dark shadow-glow-accent2": status === "failed",
+          "scale-110": status === "success" || status === "failed"
+        }
+      ),
+      children: getStatusIcon(status)
+    }
+  );
+}
 function ProcessStepListItem({ step, isActive, position, variant = "default" }) {
   return /* @__PURE__ */ jsxs(
     "div",
@@ -58,27 +109,7 @@ function ProcessStepListItem({ step, isActive, position, variant = "default" })
             step.description && /* @__PURE__ */ jsx("p", { className: cn("-mt-0.5 text-ui-md text-neutral2", { truncate: variant === "plain" }), children: step.description })
           ] })
         ] }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "flex size-7 items-center justify-center self-center rounded-full motion-reduce:transition-none",
-              transitions.colors,
-              transitions.transform,
-              transitions.shadow,
-              {
-                "border border-dashed border-neutral2": step.status === "pending",
-                "[&>svg]:size-4": step.status !== "running",
-                "[&>svg]:text-notice-success-fg": step.status === "success",
-                "[&>svg]:text-notice-destructive-fg": step.status === "failed",
-                "bg-accent1Dark shadow-glow-accent1": step.status === "success",
-                "bg-accent2Dark shadow-glow-accent2": step.status === "failed",
-                "scale-110": step.status === "success" || step.status === "failed"
-              }
-            ),
-            children: getStatusIcon(step.status)
-          }
-        )
+        /* @__PURE__ */ jsx(StepStatusMarker, { status: step.status, variant })
       ]
     }
   );

package/dist/components/Steps.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Steps.es.js","sources":["../../src/ds/components/Steps/shared.tsx","../../src/ds/components/Steps/process-step-list-item.tsx","../../src/ds/components/Steps/process-step-list.tsx","../../src/ds/components/Steps/process-step-progress-bar.tsx"],"sourcesContent":["import { CheckIcon, XIcon } from 'lucide-react';\nimport { Spinner } from '@/ds/components/Spinner';\n\nexport function getStatusIcon(status: string) {\n  switch (status) {\n    case 'running':\n      return <Spinner size=\"sm\" aria-hidden />;\n    case 'success':\n      return <CheckIcon aria-hidden />;\n    case 'failed':\n      return <XIcon aria-hidden />;\n    default:\n      return null;\n  }\n}\n\nexport type ProcessStep = {\n  id: string;\n  status: string;\n  description: string;\n  title: string;\n  isActive: boolean;\n};\n","import { getStatusIcon } from './shared';\nimport type { ProcessStep } from './shared';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\ntype ProcessStepListItemVariant = 'default' | 'plain';\n\nexport type ProcessStepListItemProps = {\n  /** @deprecated Ignored — the heading comes from `step.title`. */\n  stepId?: string;\n  step: ProcessStep;\n  isActive: boolean;\n  position: number;\n  variant?: ProcessStepListItemVariant;\n};\n\nexport function ProcessStepListItem({ step, isActive, position, variant = 'default' }: ProcessStepListItemProps) {\n  return (\n    <div\n      className={cn(\n        'grid grid-cols-[1fr_auto] gap-6 rounded-lg px-4 py-3 motion-reduce:transition-none',\n        transitions.colors,\n        {\n          'border border-transparent': variant === 'default',\n          'border-dashed border-neutral2 bg-surface3': isActive && variant === 'default',\n        },\n      )}\n    >\n      <div className=\"grid min-w-0 grid-cols-[auto_1fr] gap-2\">\n        <span\n          className={cn('flex min-w-6 justify-end text-ui-md', transitions.colors, {\n            'text-neutral5': isActive || step.status === 'success',\n            'text-neutral3': !isActive && step.status !== 'success',\n          })}\n        >\n          {position}.\n        </span>\n        <div className=\"min-w-0\">\n          <h4\n            className={cn('text-ui-md', transitions.colors, {\n              'text-neutral5': isActive || step.status === 'success',\n              'text-neutral3': !isActive && step.status !== 'success',\n            })}\n          >\n            {step.title}\n          </h4>\n          {step.description && (\n            <p className={cn('-mt-0.5 text-ui-md text-neutral2', { truncate: variant === 'plain' })}>\n              {step.description}\n            </p>\n          )}\n        </div>\n      </div>\n      <div\n        className={cn(\n          'flex size-7 items-center justify-center self-center rounded-full motion-reduce:transition-none',\n          transitions.colors,\n          transitions.transform,\n          transitions.shadow,\n          {\n            'border border-dashed border-neutral2': step.status === 'pending',\n            '[&>svg]:size-4': step.status !== 'running',\n            '[&>svg]:text-notice-success-fg': step.status === 'success',\n            '[&>svg]:text-notice-destructive-fg': step.status === 'failed',\n            'bg-accent1Dark shadow-glow-accent1': step.status === 'success',\n            'bg-accent2Dark shadow-glow-accent2': step.status === 'failed',\n            'scale-110': step.status === 'success' || step.status === 'failed',\n          },\n        )}\n      >\n        {getStatusIcon(step.status)}\n      </div>\n    </div>\n  );\n}\n","import { ProcessStepListItem } from './process-step-list-item';\nimport type { ProcessStep } from './shared';\nimport { cn } from '@/lib/utils';\n\nexport type ProcessStepListProps = {\n  currentStep: ProcessStep | null;\n  steps: ProcessStep[];\n  className?: string;\n};\n\nexport function ProcessStepList({ currentStep, steps = [], className }: ProcessStepListProps) {\n  return (\n    <div className={cn(className)}>\n      {steps.map((step: ProcessStep, idx: number) => (\n        <ProcessStepListItem key={step.id} step={step} isActive={currentStep?.id === step.id} position={idx + 1} />\n      ))}\n    </div>\n  );\n}\n","import type { ProcessStep } from './shared';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type ProcessStepProgressBarProps = {\n  steps: ProcessStep[];\n};\n\nexport function ProcessStepProgressBar({ steps }: ProcessStepProgressBarProps) {\n  const totalSteps = steps.length;\n  const completedSteps = steps.filter(step => step.status === 'success').length;\n\n  return (\n    <div className=\"flex w-full flex-col content-center justify-center gap-4\">\n      <div className=\"grid w-full grid-cols-[0_repeat(9,1fr)]\">\n        {steps.map((step: ProcessStep, idx: number) => {\n          return (\n            <div\n              key={step.id}\n              className={cn('relative flex h-8 items-center justify-end', transitions.colors, {\n                'bg-accent1Dark': step.status === 'success' && steps?.[idx - 1]?.status === 'success',\n              })}\n            >\n              <div\n                className={cn(\n                  'absolute right-0 z-10 flex size-8 translate-x-1/2 items-center justify-center self-center rounded-full bg-surface3 text-ui-sm font-bold text-neutral3 motion-reduce:transition-none',\n                  transitions.colors,\n                  transitions.transform,\n                  transitions.shadow,\n                  {\n                    'border border-dashed border-neutral2': step.status === 'pending',\n                    'bg-accent1Dark text-notice-success-fg shadow-glow-accent1 scale-110': step.status === 'success',\n                    'bg-accent2Dark text-notice-destructive-fg shadow-glow-accent2 scale-110': step.status === 'failed',\n                  },\n                )}\n              >\n                {step.status === 'running' ? <Spinner /> : idx + 1}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n      <div className={cn('text-center text-xs text-neutral3', transitions.colors)}>\n        {completedSteps} of {totalSteps} steps completed\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Steps.es.js","sources":["../../src/ds/components/Steps/shared.tsx","../../src/ds/components/Steps/process-step-list-item.tsx","../../src/ds/components/Steps/process-step-list.tsx","../../src/ds/components/Steps/process-step-progress-bar.tsx"],"sourcesContent":["import { CheckIcon, XIcon } from 'lucide-react';\nimport { Spinner } from '@/ds/components/Spinner';\n\nexport function getStatusIcon(status: string) {\n  switch (status) {\n    case 'running':\n      return <Spinner size=\"sm\" aria-hidden />;\n    case 'success':\n      return <CheckIcon aria-hidden />;\n    case 'failed':\n      return <XIcon aria-hidden />;\n    default:\n      return null;\n  }\n}\n\nexport type ProcessStep = {\n  id: string;\n  status: string;\n  description: string;\n  title: string;\n  isActive: boolean;\n};\n","import { getStatusIcon } from './shared';\nimport type { ProcessStep } from './shared';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\ntype ProcessStepListItemVariant = 'default' | 'plain';\n\n/** Same ring geometry and stroke as `<Spinner size=\"sm\" />`, so pending and running read as one shape. */\nfunction PendingRing() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"text-neutral2\" aria-hidden>\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"8.5\"\n        pathLength=\"48\"\n        fill=\"none\"\n        stroke=\"currentcolor\"\n        strokeWidth=\"2.8\"\n        strokeLinecap=\"round\"\n        strokeDasharray=\"3 3\"\n      />\n    </svg>\n  );\n}\n\nfunction StepStatusMarker({ status, variant }: { status: string; variant: ProcessStepListItemVariant }) {\n  if (variant === 'plain') {\n    return (\n      <span\n        className={cn('flex size-4 items-center justify-center self-center [&>svg]:size-4', transitions.colors, {\n          '[&>svg]:text-positive1': status === 'success',\n          '[&>svg]:text-negative1': status === 'failed',\n        })}\n      >\n        {status === 'pending' ? <PendingRing /> : getStatusIcon(status)}\n      </span>\n    );\n  }\n\n  return (\n    <span\n      className={cn(\n        'flex size-7 items-center justify-center self-center rounded-full motion-reduce:transition-none',\n        transitions.colors,\n        transitions.transform,\n        transitions.shadow,\n        {\n          '[&>svg]:text-notice-success-fg': status === 'success',\n          '[&>svg]:text-notice-destructive-fg': status === 'failed',\n          'border border-dashed border-neutral2': status === 'pending',\n          '[&>svg]:size-4': status !== 'running',\n          'bg-accent1Dark shadow-glow-accent1': status === 'success',\n          'bg-accent2Dark shadow-glow-accent2': status === 'failed',\n          'scale-110': status === 'success' || status === 'failed',\n        },\n      )}\n    >\n      {getStatusIcon(status)}\n    </span>\n  );\n}\n\nexport type ProcessStepListItemProps = {\n  /** @deprecated Ignored — the heading comes from `step.title`. */\n  stepId?: string;\n  step: ProcessStep;\n  isActive: boolean;\n  position: number;\n  variant?: ProcessStepListItemVariant;\n};\n\nexport function ProcessStepListItem({ step, isActive, position, variant = 'default' }: ProcessStepListItemProps) {\n  return (\n    <div\n      className={cn(\n        'grid grid-cols-[1fr_auto] gap-6 rounded-lg px-4 py-3 motion-reduce:transition-none',\n        transitions.colors,\n        {\n          'border border-transparent': variant === 'default',\n          'border-dashed border-neutral2 bg-surface3': isActive && variant === 'default',\n        },\n      )}\n    >\n      <div className=\"grid min-w-0 grid-cols-[auto_1fr] gap-2\">\n        <span\n          className={cn('flex min-w-6 justify-end text-ui-md', transitions.colors, {\n            'text-neutral5': isActive || step.status === 'success',\n            'text-neutral3': !isActive && step.status !== 'success',\n          })}\n        >\n          {position}.\n        </span>\n        <div className=\"min-w-0\">\n          <h4\n            className={cn('text-ui-md', transitions.colors, {\n              'text-neutral5': isActive || step.status === 'success',\n              'text-neutral3': !isActive && step.status !== 'success',\n            })}\n          >\n            {step.title}\n          </h4>\n          {step.description && (\n            <p className={cn('-mt-0.5 text-ui-md text-neutral2', { truncate: variant === 'plain' })}>\n              {step.description}\n            </p>\n          )}\n        </div>\n      </div>\n      <StepStatusMarker status={step.status} variant={variant} />\n    </div>\n  );\n}\n","import { ProcessStepListItem } from './process-step-list-item';\nimport type { ProcessStep } from './shared';\nimport { cn } from '@/lib/utils';\n\nexport type ProcessStepListProps = {\n  currentStep: ProcessStep | null;\n  steps: ProcessStep[];\n  className?: string;\n};\n\nexport function ProcessStepList({ currentStep, steps = [], className }: ProcessStepListProps) {\n  return (\n    <div className={cn(className)}>\n      {steps.map((step: ProcessStep, idx: number) => (\n        <ProcessStepListItem key={step.id} step={step} isActive={currentStep?.id === step.id} position={idx + 1} />\n      ))}\n    </div>\n  );\n}\n","import type { ProcessStep } from './shared';\nimport { Spinner } from '@/ds/components/Spinner';\nimport { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type ProcessStepProgressBarProps = {\n  steps: ProcessStep[];\n};\n\nexport function ProcessStepProgressBar({ steps }: ProcessStepProgressBarProps) {\n  const totalSteps = steps.length;\n  const completedSteps = steps.filter(step => step.status === 'success').length;\n\n  return (\n    <div className=\"flex w-full flex-col content-center justify-center gap-4\">\n      <div className=\"grid w-full grid-cols-[0_repeat(9,1fr)]\">\n        {steps.map((step: ProcessStep, idx: number) => {\n          return (\n            <div\n              key={step.id}\n              className={cn('relative flex h-8 items-center justify-end', transitions.colors, {\n                'bg-accent1Dark': step.status === 'success' && steps?.[idx - 1]?.status === 'success',\n              })}\n            >\n              <div\n                className={cn(\n                  'absolute right-0 z-10 flex size-8 translate-x-1/2 items-center justify-center self-center rounded-full bg-surface3 text-ui-sm font-bold text-neutral3 motion-reduce:transition-none',\n                  transitions.colors,\n                  transitions.transform,\n                  transitions.shadow,\n                  {\n                    'border border-dashed border-neutral2': step.status === 'pending',\n                    'bg-accent1Dark text-notice-success-fg shadow-glow-accent1 scale-110': step.status === 'success',\n                    'bg-accent2Dark text-notice-destructive-fg shadow-glow-accent2 scale-110': step.status === 'failed',\n                  },\n                )}\n              >\n                {step.status === 'running' ? <Spinner /> : idx + 1}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n      <div className={cn('text-center text-xs text-neutral3', transitions.colors)}>\n        {completedSteps} of {totalSteps} steps completed\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/style.css

@@ -9936,6 +9936,10 @@
     color: var(--color-accent1);
   }
 
+  .\[\&\>svg\]\:text-negative1 > svg {
+    color: var(--color-negative1);
+  }
+
   .\[\&\>svg\]\:text-neutral3 > svg {
     color: var(--color-neutral3);
   }
@@ -9948,6 +9952,10 @@
     color: var(--color-notice-success-fg);
   }
 
+  .\[\&\>svg\]\:text-positive1 > svg {
+    color: var(--color-positive1);
+  }
+
   .\[\&\>svg\]\:text-red-400 > svg {
     color: var(--color-red-400);
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mastra/playground-ui",
   "type": "module",
-  "version": "49.0.0-alpha.2",
+  "version": "49.0.0-alpha.3",
   "description": "Mastra Playground components",
   "sideEffects": [
     "**/*.css"
@@ -150,8 +150,8 @@
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "tailwindcss": "^4.0.0",
-    "@mastra/client-js": "^1.40.0-alpha.2",
-    "@mastra/react": "1.4.3-alpha.2"
+    "@mastra/client-js": "^1.40.0-alpha.3",
+    "@mastra/react": "1.4.3-alpha.3"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^10.4.1",
@@ -189,11 +189,11 @@
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vitest": "4.1.10",
-    "@mastra/memory": "1.26.2-alpha.1",
     "@internal/lint": "0.0.122",
-    "@mastra/react": "1.4.3-alpha.2",
-    "@mastra/core": "1.59.0-alpha.2",
-    "@mastra/client-js": "^1.40.0-alpha.2"
+    "@mastra/client-js": "^1.40.0-alpha.3",
+    "@mastra/core": "1.59.0-alpha.3",
+    "@mastra/react": "1.4.3-alpha.3",
+    "@mastra/memory": "1.26.2-alpha.1"
   },
   "homepage": "https://mastra.ai",
   "repository": {