@mastra/playground-ui 5.1.5 → 5.1.6-alpha.1

package/dist/index.cjs.js

@@ -566,13 +566,13 @@ const arbitraryVariableRegex = /^\((?:(\w[\w-]*):)?(.+)\)$/i;
 const fractionRegex = /^\d+\/\d+$/;
 const tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/;
 const lengthUnitRegex = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/;
-const colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/;
+const colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/;
 // Shadow always begins with x and y offset separated by underscore optionally prepended by inset
 const shadowRegex = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
 const imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/;
 const isFraction = value => fractionRegex.test(value);
-const isNumber = value => Boolean(value) && !Number.isNaN(Number(value));
-const isInteger = value => Boolean(value) && Number.isInteger(Number(value));
+const isNumber = value => !!value && !Number.isNaN(Number(value));
+const isInteger = value => !!value && Number.isInteger(Number(value));
 const isPercent = value => value.endsWith('%') && isNumber(value.slice(0, -1));
 const isTshirtSize = value => tshirtUnitRegex.test(value);
 const isAny = () => true;
@@ -591,7 +591,7 @@ const isArbitraryLength = value => getIsArbitraryValue(value, isLabelLength, isL
 const isArbitraryNumber = value => getIsArbitraryValue(value, isLabelNumber, isNumber);
 const isArbitraryPosition = value => getIsArbitraryValue(value, isLabelPosition, isNever);
 const isArbitraryImage = value => getIsArbitraryValue(value, isLabelImage, isImage);
-const isArbitraryShadow = value => getIsArbitraryValue(value, isNever, isShadow);
+const isArbitraryShadow = value => getIsArbitraryValue(value, isLabelShadow, isShadow);
 const isArbitraryVariable = value => arbitraryVariableRegex.test(value);
 const isArbitraryVariableLength = value => getIsArbitraryVariable(value, isLabelLength);
 const isArbitraryVariableFamilyName = value => getIsArbitraryVariable(value, isLabelFamilyName);
@@ -621,11 +621,9 @@ const getIsArbitraryVariable = (value, testLabel, shouldMatchNoLabel = false) =>
   return false;
 };
 // Labels
-const isLabelPosition = label => label === 'position';
-const imageLabels = /*#__PURE__*/new Set(['image', 'url']);
-const isLabelImage = label => imageLabels.has(label);
-const sizeLabels = /*#__PURE__*/new Set(['length', 'size', 'percentage']);
-const isLabelSize = label => sizeLabels.has(label);
+const isLabelPosition = label => label === 'position' || label === 'percentage';
+const isLabelImage = label => label === 'image' || label === 'url';
+const isLabelSize = label => label === 'length' || label === 'size' || label === 'bg-size';
 const isLabelLength = label => label === 'length';
 const isLabelNumber = label => label === 'number';
 const isLabelFamilyName = label => label === 'family-name';
@@ -648,6 +646,7 @@ const getDefaultConfig = () => {
   const themeRadius = fromTheme('radius');
   const themeShadow = fromTheme('shadow');
   const themeInsetShadow = fromTheme('inset-shadow');
+  const themeTextShadow = fromTheme('text-shadow');
   const themeDropShadow = fromTheme('drop-shadow');
   const themeBlur = fromTheme('blur');
   const themePerspective = fromTheme('perspective');
@@ -662,7 +661,16 @@ const getDefaultConfig = () => {
    */
   /***/
   const scaleBreak = () => ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'];
-  const scalePosition = () => ['bottom', 'center', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top', 'top'];
+  const scalePosition = () => ['center', 'top', 'bottom', 'left', 'right', 'top-left',
+  // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
+  'left-top', 'top-right',
+  // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
+  'right-top', 'bottom-right',
+  // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
+  'right-bottom', 'bottom-left',
+  // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
+  'left-bottom'];
+  const scalePositionWithArbitrary = () => [...scalePosition(), isArbitraryVariable, isArbitraryValue];
   const scaleOverflow = () => ['auto', 'hidden', 'clip', 'visible', 'scroll'];
   const scaleOverscroll = () => ['auto', 'contain', 'none'];
   const scaleUnambiguousSpacing = () => [isArbitraryVariable, isArbitraryValue, themeSpacing];
@@ -670,25 +678,34 @@ const getDefaultConfig = () => {
   const scaleGridTemplateColsRows = () => [isInteger, 'none', 'subgrid', isArbitraryVariable, isArbitraryValue];
   const scaleGridColRowStartAndEnd = () => ['auto', {
     span: ['full', isInteger, isArbitraryVariable, isArbitraryValue]
-  }, isArbitraryVariable, isArbitraryValue];
+  }, isInteger, isArbitraryVariable, isArbitraryValue];
   const scaleGridColRowStartOrEnd = () => [isInteger, 'auto', isArbitraryVariable, isArbitraryValue];
   const scaleGridAutoColsRows = () => ['auto', 'min', 'max', 'fr', isArbitraryVariable, isArbitraryValue];
-  const scaleAlignPrimaryAxis = () => ['start', 'end', 'center', 'between', 'around', 'evenly', 'stretch', 'baseline'];
-  const scaleAlignSecondaryAxis = () => ['start', 'end', 'center', 'stretch'];
+  const scaleAlignPrimaryAxis = () => ['start', 'end', 'center', 'between', 'around', 'evenly', 'stretch', 'baseline', 'center-safe', 'end-safe'];
+  const scaleAlignSecondaryAxis = () => ['start', 'end', 'center', 'stretch', 'center-safe', 'end-safe'];
   const scaleMargin = () => ['auto', ...scaleUnambiguousSpacing()];
   const scaleSizing = () => [isFraction, 'auto', 'full', 'dvw', 'dvh', 'lvw', 'lvh', 'svw', 'svh', 'min', 'max', 'fit', ...scaleUnambiguousSpacing()];
   const scaleColor = () => [themeColor, isArbitraryVariable, isArbitraryValue];
-  const scaleGradientStopPosition = () => [isPercent, isArbitraryLength];
+  const scaleBgPosition = () => [...scalePosition(), isArbitraryVariablePosition, isArbitraryPosition, {
+    position: [isArbitraryVariable, isArbitraryValue]
+  }];
+  const scaleBgRepeat = () => ['no-repeat', {
+    repeat: ['', 'x', 'y', 'space', 'round']
+  }];
+  const scaleBgSize = () => ['auto', 'cover', 'contain', isArbitraryVariableSize, isArbitrarySize, {
+    size: [isArbitraryVariable, isArbitraryValue]
+  }];
+  const scaleGradientStopPosition = () => [isPercent, isArbitraryVariableLength, isArbitraryLength];
   const scaleRadius = () => [
   // Deprecated since Tailwind CSS v4.0.0
   '', 'none', 'full', themeRadius, isArbitraryVariable, isArbitraryValue];
   const scaleBorderWidth = () => ['', isNumber, isArbitraryVariableLength, isArbitraryLength];
   const scaleLineStyle = () => ['solid', 'dashed', 'dotted', 'double'];
   const scaleBlendMode = () => ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'];
+  const scaleMaskImagePosition = () => [isNumber, isPercent, isArbitraryVariablePosition, isArbitraryPosition];
   const scaleBlur = () => [
   // Deprecated since Tailwind CSS v4.0.0
   '', 'none', themeBlur, isArbitraryVariable, isArbitraryValue];
-  const scaleOrigin = () => ['center', 'top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left', 'top-left', isArbitraryVariable, isArbitraryValue];
   const scaleRotate = () => ['none', isNumber, isArbitraryVariable, isArbitraryValue];
   const scaleScale = () => ['none', isNumber, isArbitraryVariable, isArbitraryValue];
   const scaleSkew = () => [isNumber, isArbitraryVariable, isArbitraryValue];
@@ -713,6 +730,7 @@ const getDefaultConfig = () => {
       shadow: [isTshirtSize],
       spacing: ['px', isNumber],
       text: [isTshirtSize],
+      'text-shadow': [isTshirtSize],
       tracking: ['tighter', 'tight', 'normal', 'wide', 'wider', 'widest']
     },
     classGroups: {
@@ -815,7 +833,7 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/object-position
        */
       'object-position': [{
-        object: [...scalePosition(), isArbitraryValue, isArbitraryVariable]
+        object: scalePositionWithArbitrary()
       }],
       /**
        * Overflow
@@ -1122,14 +1140,18 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/align-items
        */
       'align-items': [{
-        items: [...scaleAlignSecondaryAxis(), 'baseline']
+        items: [...scaleAlignSecondaryAxis(), {
+          baseline: ['', 'last']
+        }]
       }],
       /**
        * Align Self
        * @see https://tailwindcss.com/docs/align-self
        */
       'align-self': [{
-        self: ['auto', ...scaleAlignSecondaryAxis(), 'baseline']
+        self: ['auto', ...scaleAlignSecondaryAxis(), {
+          baseline: ['', 'last']
+        }]
       }],
       /**
        * Place Content
@@ -1344,21 +1366,21 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/height
        */
       h: [{
-        h: ['screen', ...scaleSizing()]
+        h: ['screen', 'lh', ...scaleSizing()]
       }],
       /**
        * Min-Height
        * @see https://tailwindcss.com/docs/min-height
        */
       'min-h': [{
-        'min-h': ['screen', 'none', ...scaleSizing()]
+        'min-h': ['screen', 'lh', 'none', ...scaleSizing()]
       }],
       /**
        * Max-Height
        * @see https://tailwindcss.com/docs/max-height
        */
       'max-h': [{
-        'max-h': ['screen', ...scaleSizing()]
+        'max-h': ['screen', 'lh', ...scaleSizing()]
       }],
       // ------------------
       // --- Typography ---
@@ -1574,6 +1596,13 @@ const getDefaultConfig = () => {
       break: [{
         break: ['normal', 'words', 'all', 'keep']
       }],
+      /**
+       * Overflow Wrap
+       * @see https://tailwindcss.com/docs/overflow-wrap
+       */
+      wrap: [{
+        wrap: ['break-word', 'anywhere', 'normal']
+      }],
       /**
        * Hyphens
        * @see https://tailwindcss.com/docs/hyphens
@@ -1617,23 +1646,21 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/background-position
        */
       'bg-position': [{
-        bg: [...scalePosition(), isArbitraryVariablePosition, isArbitraryPosition]
+        bg: scaleBgPosition()
       }],
       /**
        * Background Repeat
        * @see https://tailwindcss.com/docs/background-repeat
        */
       'bg-repeat': [{
-        bg: ['no-repeat', {
-          repeat: ['', 'x', 'y', 'space', 'round']
-        }]
+        bg: scaleBgRepeat()
       }],
       /**
        * Background Size
        * @see https://tailwindcss.com/docs/background-size
        */
       'bg-size': [{
-        bg: ['auto', 'cover', 'contain', isArbitraryVariableSize, isArbitrarySize]
+        bg: scaleBgSize()
       }],
       /**
        * Background Image
@@ -2002,7 +2029,7 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/outline-color
        */
       'outline-color': [{
-        outline: [themeColor]
+        outline: scaleColor()
       }],
       // ---------------
       // --- Effects ---
@@ -2028,7 +2055,7 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-shadow
        */
       'inset-shadow': [{
-        'inset-shadow': ['none', isArbitraryVariable, isArbitraryValue, themeInsetShadow]
+        'inset-shadow': ['none', themeInsetShadow, isArbitraryVariableShadow, isArbitraryShadow]
       }],
       /**
        * Inset Box Shadow Color
@@ -2090,6 +2117,20 @@ const getDefaultConfig = () => {
       'inset-ring-color': [{
         'inset-ring': scaleColor()
       }],
+      /**
+       * Text Shadow
+       * @see https://tailwindcss.com/docs/text-shadow
+       */
+      'text-shadow': [{
+        'text-shadow': ['none', themeTextShadow, isArbitraryVariableShadow, isArbitraryShadow]
+      }],
+      /**
+       * Text Shadow Color
+       * @see https://tailwindcss.com/docs/text-shadow#setting-the-shadow-color
+       */
+      'text-shadow-color': [{
+        'text-shadow': scaleColor()
+      }],
       /**
        * Opacity
        * @see https://tailwindcss.com/docs/opacity
@@ -2111,6 +2152,202 @@ const getDefaultConfig = () => {
       'bg-blend': [{
         'bg-blend': scaleBlendMode()
       }],
+      /**
+       * Mask Clip
+       * @see https://tailwindcss.com/docs/mask-clip
+       */
+      'mask-clip': [{
+        'mask-clip': ['border', 'padding', 'content', 'fill', 'stroke', 'view']
+      }, 'mask-no-clip'],
+      /**
+       * Mask Composite
+       * @see https://tailwindcss.com/docs/mask-composite
+       */
+      'mask-composite': [{
+        mask: ['add', 'subtract', 'intersect', 'exclude']
+      }],
+      /**
+       * Mask Image
+       * @see https://tailwindcss.com/docs/mask-image
+       */
+      'mask-image-linear-pos': [{
+        'mask-linear': [isNumber]
+      }],
+      'mask-image-linear-from-pos': [{
+        'mask-linear-from': scaleMaskImagePosition()
+      }],
+      'mask-image-linear-to-pos': [{
+        'mask-linear-to': scaleMaskImagePosition()
+      }],
+      'mask-image-linear-from-color': [{
+        'mask-linear-from': scaleColor()
+      }],
+      'mask-image-linear-to-color': [{
+        'mask-linear-to': scaleColor()
+      }],
+      'mask-image-t-from-pos': [{
+        'mask-t-from': scaleMaskImagePosition()
+      }],
+      'mask-image-t-to-pos': [{
+        'mask-t-to': scaleMaskImagePosition()
+      }],
+      'mask-image-t-from-color': [{
+        'mask-t-from': scaleColor()
+      }],
+      'mask-image-t-to-color': [{
+        'mask-t-to': scaleColor()
+      }],
+      'mask-image-r-from-pos': [{
+        'mask-r-from': scaleMaskImagePosition()
+      }],
+      'mask-image-r-to-pos': [{
+        'mask-r-to': scaleMaskImagePosition()
+      }],
+      'mask-image-r-from-color': [{
+        'mask-r-from': scaleColor()
+      }],
+      'mask-image-r-to-color': [{
+        'mask-r-to': scaleColor()
+      }],
+      'mask-image-b-from-pos': [{
+        'mask-b-from': scaleMaskImagePosition()
+      }],
+      'mask-image-b-to-pos': [{
+        'mask-b-to': scaleMaskImagePosition()
+      }],
+      'mask-image-b-from-color': [{
+        'mask-b-from': scaleColor()
+      }],
+      'mask-image-b-to-color': [{
+        'mask-b-to': scaleColor()
+      }],
+      'mask-image-l-from-pos': [{
+        'mask-l-from': scaleMaskImagePosition()
+      }],
+      'mask-image-l-to-pos': [{
+        'mask-l-to': scaleMaskImagePosition()
+      }],
+      'mask-image-l-from-color': [{
+        'mask-l-from': scaleColor()
+      }],
+      'mask-image-l-to-color': [{
+        'mask-l-to': scaleColor()
+      }],
+      'mask-image-x-from-pos': [{
+        'mask-x-from': scaleMaskImagePosition()
+      }],
+      'mask-image-x-to-pos': [{
+        'mask-x-to': scaleMaskImagePosition()
+      }],
+      'mask-image-x-from-color': [{
+        'mask-x-from': scaleColor()
+      }],
+      'mask-image-x-to-color': [{
+        'mask-x-to': scaleColor()
+      }],
+      'mask-image-y-from-pos': [{
+        'mask-y-from': scaleMaskImagePosition()
+      }],
+      'mask-image-y-to-pos': [{
+        'mask-y-to': scaleMaskImagePosition()
+      }],
+      'mask-image-y-from-color': [{
+        'mask-y-from': scaleColor()
+      }],
+      'mask-image-y-to-color': [{
+        'mask-y-to': scaleColor()
+      }],
+      'mask-image-radial': [{
+        'mask-radial': [isArbitraryVariable, isArbitraryValue]
+      }],
+      'mask-image-radial-from-pos': [{
+        'mask-radial-from': scaleMaskImagePosition()
+      }],
+      'mask-image-radial-to-pos': [{
+        'mask-radial-to': scaleMaskImagePosition()
+      }],
+      'mask-image-radial-from-color': [{
+        'mask-radial-from': scaleColor()
+      }],
+      'mask-image-radial-to-color': [{
+        'mask-radial-to': scaleColor()
+      }],
+      'mask-image-radial-shape': [{
+        'mask-radial': ['circle', 'ellipse']
+      }],
+      'mask-image-radial-size': [{
+        'mask-radial': [{
+          closest: ['side', 'corner'],
+          farthest: ['side', 'corner']
+        }]
+      }],
+      'mask-image-radial-pos': [{
+        'mask-radial-at': scalePosition()
+      }],
+      'mask-image-conic-pos': [{
+        'mask-conic': [isNumber]
+      }],
+      'mask-image-conic-from-pos': [{
+        'mask-conic-from': scaleMaskImagePosition()
+      }],
+      'mask-image-conic-to-pos': [{
+        'mask-conic-to': scaleMaskImagePosition()
+      }],
+      'mask-image-conic-from-color': [{
+        'mask-conic-from': scaleColor()
+      }],
+      'mask-image-conic-to-color': [{
+        'mask-conic-to': scaleColor()
+      }],
+      /**
+       * Mask Mode
+       * @see https://tailwindcss.com/docs/mask-mode
+       */
+      'mask-mode': [{
+        mask: ['alpha', 'luminance', 'match']
+      }],
+      /**
+       * Mask Origin
+       * @see https://tailwindcss.com/docs/mask-origin
+       */
+      'mask-origin': [{
+        'mask-origin': ['border', 'padding', 'content', 'fill', 'stroke', 'view']
+      }],
+      /**
+       * Mask Position
+       * @see https://tailwindcss.com/docs/mask-position
+       */
+      'mask-position': [{
+        mask: scaleBgPosition()
+      }],
+      /**
+       * Mask Repeat
+       * @see https://tailwindcss.com/docs/mask-repeat
+       */
+      'mask-repeat': [{
+        mask: scaleBgRepeat()
+      }],
+      /**
+       * Mask Size
+       * @see https://tailwindcss.com/docs/mask-size
+       */
+      'mask-size': [{
+        mask: scaleBgSize()
+      }],
+      /**
+       * Mask Type
+       * @see https://tailwindcss.com/docs/mask-type
+       */
+      'mask-type': [{
+        'mask-type': ['alpha', 'luminance']
+      }],
+      /**
+       * Mask Image
+       * @see https://tailwindcss.com/docs/mask-image
+       */
+      'mask-image': [{
+        mask: ['none', isArbitraryVariable, isArbitraryValue]
+      }],
       // ---------------
       // --- Filters ---
       // ---------------
@@ -2151,7 +2388,14 @@ const getDefaultConfig = () => {
       'drop-shadow': [{
         'drop-shadow': [
         // Deprecated since Tailwind CSS v4.0.0
-        '', 'none', themeDropShadow, isArbitraryVariable, isArbitraryValue]
+        '', 'none', themeDropShadow, isArbitraryVariableShadow, isArbitraryShadow]
+      }],
+      /**
+       * Drop Shadow Color
+       * @see https://tailwindcss.com/docs/filter-drop-shadow#setting-the-shadow-color
+       */
+      'drop-shadow-color': [{
+        'drop-shadow': scaleColor()
       }],
       /**
        * Grayscale
@@ -2372,7 +2616,7 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/perspective-origin
        */
       'perspective-origin': [{
-        'perspective-origin': scaleOrigin()
+        'perspective-origin': scalePositionWithArbitrary()
       }],
       /**
        * Rotate
@@ -2468,7 +2712,7 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/transform-origin
        */
       'transform-origin': [{
-        origin: scaleOrigin()
+        origin: scalePositionWithArbitrary()
       }],
       /**
        * Transform Style
@@ -2836,10 +3080,10 @@ const getDefaultConfig = () => {
       'rounded-b': ['rounded-br', 'rounded-bl'],
       'rounded-l': ['rounded-tl', 'rounded-bl'],
       'border-spacing': ['border-spacing-x', 'border-spacing-y'],
-      'border-w': ['border-w-s', 'border-w-e', 'border-w-t', 'border-w-r', 'border-w-b', 'border-w-l'],
+      'border-w': ['border-w-x', 'border-w-y', 'border-w-s', 'border-w-e', 'border-w-t', 'border-w-r', 'border-w-b', 'border-w-l'],
       'border-w-x': ['border-w-r', 'border-w-l'],
       'border-w-y': ['border-w-t', 'border-w-b'],
-      'border-color': ['border-color-s', 'border-color-e', 'border-color-t', 'border-color-r', 'border-color-b', 'border-color-l'],
+      'border-color': ['border-color-x', 'border-color-y', 'border-color-s', 'border-color-e', 'border-color-t', 'border-color-r', 'border-color-b', 'border-color-l'],
       'border-color-x': ['border-color-r', 'border-color-l'],
       'border-color-y': ['border-color-t', 'border-color-b'],
       translate: ['translate-x', 'translate-y', 'translate-none'],
@@ -2858,7 +3102,7 @@ const getDefaultConfig = () => {
     conflictingClassGroupModifiers: {
       'font-size': ['leading']
     },
-    orderSensitiveModifiers: ['before', 'after', 'placeholder', 'file', 'marker', 'selection', 'first-line', 'first-letter', 'backdrop', '*', '**']
+    orderSensitiveModifiers: ['*', '**', 'after', 'backdrop', 'before', 'details-content', 'file', 'first-letter', 'first-line', 'marker', 'placeholder', 'selection']
   };
 };
 const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
@@ -5185,10 +5429,6 @@ function ScoreIndicator({ score }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", children: score.toFixed(2) });
 }
 
-function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("animate-pulse rounded-md bg-muted/50", className), ...props });
-}
-
 const Table$1 = React__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("table", { ref, className: cn("w-full caption-bottom text-sm border-spacing-0", className), ...props })
 );
@@ -5260,32 +5500,6 @@ const TabsContent = React__namespace.forwardRef(({ className, ...props }, ref) =
 ));
 TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
 
-const useEvalsByAgentId = (agentId, type) => {
-  const [evals, setEvals] = React.useState([]);
-  const [isLoading, setIsLoading] = React.useState(true);
-  const client = useMastraClient();
-  const fetchEvals = async (_agentId) => {
-    setIsLoading(true);
-    const activeAgentId = _agentId ?? agentId;
-    try {
-      const res = type === "live" ? await client.getAgent(activeAgentId).liveEvals() : await client.getAgent(activeAgentId).evals();
-      setEvals(res.evals);
-    } catch (error) {
-      setEvals([]);
-      console.error("Error fetching evals", error);
-      sonner.toast.error("Error fetching evals");
-    } finally {
-      setIsLoading(false);
-    }
-  };
-  React.useEffect(() => {
-    fetchEvals(agentId);
-  }, [agentId]);
-  return { evals, isLoading, refetchEvals: fetchEvals };
-};
-
-const AgentEvalsContext = React.createContext({ handleRefresh: () => {
-}, isLoading: true });
 const scrollableContentClass = cn(
   "relative overflow-y-auto overflow-x-hidden invisible hover:visible focus:visible",
   "[&::-webkit-scrollbar]:w-1",
@@ -5301,26 +5515,13 @@ const tabIndicatorClass = cn(
   "focus-visible:outline-none"
 );
 const tabContentClass = cn("data-[state=inactive]:mt-0 min-h-0 h-full grid grid-rows-[1fr]");
-function AgentEvals({ agentId }) {
+function AgentEvals({ liveEvals, ciEvals, onRefetchLiveEvals, onRefetchCiEvals }) {
   const [activeTab, setActiveTab] = React.useState("live");
-  const {
-    evals: liveEvals,
-    isLoading: isLiveLoading,
-    refetchEvals: refetchLiveEvals
-  } = useEvalsByAgentId(agentId, "live");
-  const { evals: ciEvals, isLoading: isCiLoading, refetchEvals: refetchCiEvals } = useEvalsByAgentId(agentId, "ci");
-  const contextValue = {
-    handleRefresh,
-    isLoading: activeTab === "live" ? isLiveLoading : isCiLoading
-  };
   function handleRefresh() {
-    if (activeTab === "live") {
-      refetchLiveEvals();
-    } else {
-      refetchCiEvals();
-    }
+    if (activeTab === "live") return onRefetchLiveEvals();
+    return onRefetchCiEvals();
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(AgentEvalsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Tabs,
     {
       value: activeTab,
@@ -5331,14 +5532,13 @@ function AgentEvals({ agentId }) {
           /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "live", className: tabIndicatorClass, children: "Live" }),
           /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "ci", className: tabIndicatorClass, children: "CI" })
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "live", className: tabContentClass, children: /* @__PURE__ */ jsxRuntime.jsx(EvalTable, { evals: liveEvals, isCIMode: false }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "ci", className: tabContentClass, children: /* @__PURE__ */ jsxRuntime.jsx(EvalTable, { evals: ciEvals, isCIMode: true }) })
+        /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "live", className: tabContentClass, children: /* @__PURE__ */ jsxRuntime.jsx(EvalTable, { evals: liveEvals, isCIMode: false, onRefresh: handleRefresh }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "ci", className: tabContentClass, children: /* @__PURE__ */ jsxRuntime.jsx(EvalTable, { evals: ciEvals, isCIMode: true, onRefresh: handleRefresh }) })
       ]
     }
-  ) });
+  );
 }
-function EvalTable({ evals, isCIMode = false }) {
-  const { handleRefresh, isLoading: isTableLoading } = React.useContext(AgentEvalsContext);
+function EvalTable({ evals, isCIMode = false, onRefresh }) {
   const [expandedMetrics, setExpandedMetrics] = React.useState(/* @__PURE__ */ new Set());
   const [searchTerm, setSearchTerm] = React.useState("");
   const [sortConfig, setSortConfig] = React.useState({ field: "metricName", direction: "asc" });
@@ -5361,7 +5561,7 @@ function EvalTable({ evals, isCIMode = false }) {
         evals.length,
         " Total Evaluations"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Button$1, { variant: "ghost", size: "icon", onClick: handleRefresh, disabled: isTableLoading, className: "h-9 w-9", children: isTableLoading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCcwIcon, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCcwIcon, { className: "h-4 w-4" }) })
+      /* @__PURE__ */ jsxRuntime.jsx(Button$1, { variant: "ghost", size: "icon", onClick: onRefresh, className: "h-9 w-9", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCcwIcon, { className: "h-4 w-4" }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsxs(Table$1, { className: "w-full", children: [
       /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { className: "bg-mastra-bg-2 h-[var(--table-header-height)] sticky top-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { className: "border-gray-6 border-b-[0.1px] text-[0.8125rem]", children: [
@@ -5384,13 +5584,7 @@ function EvalTable({ evals, isCIMode = false }) {
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "w-48 text-mastra-el-3", children: "Evaluations" })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TableBody, { className: "border-b border-gray-6 relative", children: /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { mode: "wait", presenceAffectsLayout: false, children: isTableLoading ? Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { className: "border-b-gray-6 border-b-[0.1px] text-[0.8125rem]", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "w-12 h-12", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-8 w-8 rounded-full" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "min-w-[200px] max-w-[30%]", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-3/4" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-full" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "w-48", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-20" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "w-48", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-20" }) })
-      ] }, i)) : groupEvals(evals).length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TableBody, { className: "border-b border-gray-6 relative", children: /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { mode: "wait", presenceAffectsLayout: false, children: groupEvals(evals).length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "h-12 w-16" }),
         /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: 4, className: "h-32 px-4 text-center text-mastra-el-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "size-5" }),
@@ -6743,6 +6937,10 @@ function WorkflowTracesInner({ traces, error, runId, stepName }) {
   ] });
 }
 
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("animate-pulse rounded-md bg-muted/50", className), ...props });
+}
+
 const sanitizeWorkflowWatchResult = (record) => {
   const formattedResults = Object.entries(record.payload.workflowState.steps || {}).reduce(
     (acc, [key, value]) => {
@@ -6823,33 +7021,6 @@ const useLegacyWorkflow = (workflowId) => {
   }, [workflowId]);
   return { legacyWorkflow, isLoading };
 };
-const useWorkflow = (workflowId) => {
-  const [workflow, setWorkflow] = React.useState(null);
-  const [isLoading, setIsLoading] = React.useState(true);
-  const client = useMastraClient();
-  React.useEffect(() => {
-    const fetchWorkflow = async () => {
-      setIsLoading(true);
-      try {
-        if (!workflowId) {
-          setWorkflow(null);
-          setIsLoading(false);
-          return;
-        }
-        const res = await client.getWorkflow(workflowId).details();
-        setWorkflow(res);
-      } catch (error) {
-        setWorkflow(null);
-        console.error("Error fetching workflow", error);
-        sonner.toast.error("Error fetching workflow");
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchWorkflow();
-  }, [workflowId]);
-  return { workflow, isLoading };
-};
 const useExecuteWorkflow = () => {
   const client = useMastraClient();
   const createLegacyWorkflowRun = async ({ workflowId, prevRunId }) => {
@@ -8467,7 +8638,8 @@ const BooleanField = ({ field, label, id, inputProps, value }) => /* @__PURE__ *
         };
         inputProps.onChange(event);
       },
-      defaultChecked: field.default
+      defaultChecked: field.default,
+      disabled: inputProps.disabled || inputProps.readOnly
     }
   ),
   /* @__PURE__ */ jsxRuntime.jsxs(Txt, { as: "label", variant: "ui-sm", className: "text-icon3", htmlFor: id, children: [
@@ -8969,21 +9141,26 @@ const ShadcnUIComponents = {
   ArrayWrapper,
   ArrayElementWrapper
 };
-const ShadcnAutoFormFieldComponents = {
-  string: StringField,
-  number: NumberField,
-  boolean: BooleanField,
-  date: DateField,
-  select: SelectField,
-  record: RecordField
-};
-function AutoForm({ uiComponents, formComponents, ...props }) {
+function AutoForm({
+  uiComponents,
+  formComponents,
+  readOnly,
+  ...props
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     react$3.AutoForm,
     {
       ...props,
       uiComponents: { ...ShadcnUIComponents, ...uiComponents },
-      formComponents: { ...ShadcnAutoFormFieldComponents, ...formComponents }
+      formComponents: {
+        string: (props2) => /* @__PURE__ */ jsxRuntime.jsx(StringField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
+        number: (props2) => /* @__PURE__ */ jsxRuntime.jsx(NumberField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
+        boolean: (props2) => /* @__PURE__ */ jsxRuntime.jsx(BooleanField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
+        date: (props2) => /* @__PURE__ */ jsxRuntime.jsx(DateField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
+        select: (props2) => /* @__PURE__ */ jsxRuntime.jsx(SelectField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
+        record: (props2) => /* @__PURE__ */ jsxRuntime.jsx(RecordField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
+        ...formComponents
+      }
     }
   );
 }
@@ -9080,7 +9257,8 @@ function DynamicForm({
   defaultValues,
   isSubmitLoading,
   submitButtonLabel,
-  className
+  className,
+  readOnly
 }) {
   if (!schema) {
     console.error("no form schema found");
@@ -9112,7 +9290,7 @@ function DynamicForm({
     },
     withSubmit: true
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(AutoForm, { ...formProps });
+  return /* @__PURE__ */ jsxRuntime.jsx(AutoForm, { ...formProps, readOnly });
 }
 
 function resolveSerializedZodOutput(obj) {
@@ -9638,8 +9816,7 @@ function WorkflowGraphInner({ workflow, onShowTrace }) {
   ) });
 }
 
-function WorkflowGraph({ workflowId, onShowTrace }) {
-  const { workflow, isLoading } = useWorkflow(workflowId);
+function WorkflowGraph({ workflowId, onShowTrace, workflow, isLoading }) {
   const { snapshot } = React.useContext(WorkflowRunContext);
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-full" }) });
@@ -9663,10 +9840,14 @@ function WorkflowGraph({ workflowId, onShowTrace }) {
   ) }) }, snapshot?.runId ?? workflowId);
 }
 
-function WorkflowTrigger({ workflowId, setRunId }) {
+function WorkflowTrigger({
+  workflowId,
+  setRunId,
+  workflow,
+  isLoading
+}) {
   const { runtimeContext } = usePlaygroundStore();
   const { result, setResult, payload, setPayload } = React.useContext(WorkflowRunContext);
-  const { isLoading, workflow } = useWorkflow(workflowId);
   const { createWorkflowRun, startWorkflowRun } = useExecuteWorkflow();
   const { watchWorkflow, watchResult, isWatchingWorkflow } = useWatchWorkflow();
   const { resumeWorkflow, isResumingWorkflow } = useResumeWorkflow();
@@ -9709,7 +9890,8 @@ function WorkflowTrigger({ workflowId, setRunId }) {
     const suspended = Object.entries(watchResultToUse.payload.workflowState.steps).filter(([_, { status }]) => status === "suspended").map(([stepId, { payload: payload2 }]) => ({
       stepId,
       runId: result.runId,
-      suspendPayload: payload2
+      suspendPayload: payload2,
+      isLoading: false
     }));
     setSuspendedSteps(suspended);
   }, [watchResultToUse, result]);
@@ -9780,17 +9962,62 @@ function WorkflowTrigger({ workflowId, setRunId }) {
                   stepId: step.stepId,
                   runId: step.runId,
                   suspendPayload: step.suspendPayload,
-                  resumeData: data
-                });
+                  resumeData: data});
               }
             }
           )
         ] });
       })
     ] }),
-    result && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-5 border-b-sm border-border1", children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowJsonDialog, { result: restResult }) })
+    result && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-5 border-b-sm border-border1", children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowJsonDialog, { result: restResult }) }),
+    result && /* @__PURE__ */ jsxRuntime.jsx(WorkflowResultSection, { result, workflow })
   ] });
 }
+const WorkflowResultSection = ({ result, workflow }) => {
+  const workflowState = result.payload.workflowState;
+  const hasResult = Object.keys(workflowState.steps || {}).length > 0;
+  if (!hasResult) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon3", children: "Final Output" }),
+    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "pt-4", children: Object.entries(workflowState.steps || {}).map(([stepId, stepResult]) => {
+      const stepDefinition = workflow.steps[stepId];
+      if (!stepDefinition) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "li",
+        {
+          className: "border-b-sm border-dashed border-border1 last:border-b-0 py-4 first:pt-0 last:pb-0",
+          children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowResultFinishedStep, { stepResult: stepResult.output, stepDefinition })
+        },
+        stepId
+      );
+    }) })
+  ] });
+};
+const WorkflowResultFinishedStep = ({ stepResult, stepDefinition }) => {
+  const id = React.useId();
+  try {
+    const zodObjectSchema = resolveSerializedZodOutput(jsonSchemaToZod(superjson.parse(stepDefinition.outputSchema)));
+    if (zodObjectSchema?._def?.typeName === "ZodString") {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Footprints, { className: "text-icon3" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", htmlFor: id, variant: "ui-sm", className: "text-icon3", children: stepDefinition.description || stepDefinition.id })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Input, { id, defaultValue: stepResult, readOnly: true })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 pb-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Footprints, { className: "text-icon3" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon3", children: stepDefinition.description || stepDefinition.id })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(DynamicForm, { schema: zodObjectSchema, defaultValues: stepResult, readOnly: true })
+    ] });
+  } catch (err) {
+    console.error("Error parsing output schema", err);
+    return /* @__PURE__ */ jsxRuntime.jsx(Txt, { children: "An error occured. Please open an issue on GitHub." });
+  }
+};
 const WorkflowJsonDialog = ({ result }) => {
   const [open, setOpen] = React.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [