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

package/dist/index.es.js

@@ -534,13 +534,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;
@@ -559,7 +559,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);
@@ -589,11 +589,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';
@@ -616,6 +614,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');
@@ -630,7 +629,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];
@@ -638,25 +646,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];
@@ -681,6 +698,7 @@ const getDefaultConfig = () => {
       shadow: [isTshirtSize],
       spacing: ['px', isNumber],
       text: [isTshirtSize],
+      'text-shadow': [isTshirtSize],
       tracking: ['tighter', 'tight', 'normal', 'wide', 'wider', 'widest']
     },
     classGroups: {
@@ -783,7 +801,7 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/object-position
        */
       'object-position': [{
-        object: [...scalePosition(), isArbitraryValue, isArbitraryVariable]
+        object: scalePositionWithArbitrary()
       }],
       /**
        * Overflow
@@ -1090,14 +1108,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
@@ -1312,21 +1334,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 ---
@@ -1542,6 +1564,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
@@ -1585,23 +1614,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
@@ -1970,7 +1997,7 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/outline-color
        */
       'outline-color': [{
-        outline: [themeColor]
+        outline: scaleColor()
       }],
       // ---------------
       // --- Effects ---
@@ -1996,7 +2023,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
@@ -2058,6 +2085,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
@@ -2079,6 +2120,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 ---
       // ---------------
@@ -2119,7 +2356,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
@@ -2340,7 +2584,7 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/perspective-origin
        */
       'perspective-origin': [{
-        'perspective-origin': scaleOrigin()
+        'perspective-origin': scalePositionWithArbitrary()
       }],
       /**
        * Rotate
@@ -2436,7 +2680,7 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/transform-origin
        */
       'transform-origin': [{
-        origin: scaleOrigin()
+        origin: scalePositionWithArbitrary()
       }],
       /**
        * Transform Style
@@ -2804,10 +3048,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'],
@@ -2826,7 +3070,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);
@@ -5153,10 +5397,6 @@ function ScoreIndicator({ score }) {
   return /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: score.toFixed(2) });
 }
 
-function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("animate-pulse rounded-md bg-muted/50", className), ...props });
-}
-
 const Table$1 = React.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("table", { ref, className: cn("w-full caption-bottom text-sm border-spacing-0", className), ...props })
 );
@@ -5228,32 +5468,6 @@ const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
 ));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
-const useEvalsByAgentId = (agentId, type) => {
-  const [evals, setEvals] = useState([]);
-  const [isLoading, setIsLoading] = 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);
-      toast.error("Error fetching evals");
-    } finally {
-      setIsLoading(false);
-    }
-  };
-  useEffect(() => {
-    fetchEvals(agentId);
-  }, [agentId]);
-  return { evals, isLoading, refetchEvals: fetchEvals };
-};
-
-const AgentEvalsContext = createContext({ handleRefresh: () => {
-}, isLoading: true });
 const scrollableContentClass = cn(
   "relative overflow-y-auto overflow-x-hidden invisible hover:visible focus:visible",
   "[&::-webkit-scrollbar]:w-1",
@@ -5269,26 +5483,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] = 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__ */ jsx(AgentEvalsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(
     Tabs,
     {
       value: activeTab,
@@ -5299,14 +5500,13 @@ function AgentEvals({ agentId }) {
           /* @__PURE__ */ jsx(TabsTrigger, { value: "live", className: tabIndicatorClass, children: "Live" }),
           /* @__PURE__ */ jsx(TabsTrigger, { value: "ci", className: tabIndicatorClass, children: "CI" })
         ] }) }),
-        /* @__PURE__ */ jsx(TabsContent, { value: "live", className: tabContentClass, children: /* @__PURE__ */ jsx(EvalTable, { evals: liveEvals, isCIMode: false }) }),
-        /* @__PURE__ */ jsx(TabsContent, { value: "ci", className: tabContentClass, children: /* @__PURE__ */ jsx(EvalTable, { evals: ciEvals, isCIMode: true }) })
+        /* @__PURE__ */ jsx(TabsContent, { value: "live", className: tabContentClass, children: /* @__PURE__ */ jsx(EvalTable, { evals: liveEvals, isCIMode: false, onRefresh: handleRefresh }) }),
+        /* @__PURE__ */ jsx(TabsContent, { value: "ci", className: tabContentClass, children: /* @__PURE__ */ jsx(EvalTable, { evals: ciEvals, isCIMode: true, onRefresh: handleRefresh }) })
       ]
     }
-  ) });
+  );
 }
-function EvalTable({ evals, isCIMode = false }) {
-  const { handleRefresh, isLoading: isTableLoading } = useContext(AgentEvalsContext);
+function EvalTable({ evals, isCIMode = false, onRefresh }) {
   const [expandedMetrics, setExpandedMetrics] = useState(/* @__PURE__ */ new Set());
   const [searchTerm, setSearchTerm] = useState("");
   const [sortConfig, setSortConfig] = useState({ field: "metricName", direction: "asc" });
@@ -5329,7 +5529,7 @@ function EvalTable({ evals, isCIMode = false }) {
         evals.length,
         " Total Evaluations"
       ] }),
-      /* @__PURE__ */ jsx(Button$1, { variant: "ghost", size: "icon", onClick: handleRefresh, disabled: isTableLoading, className: "h-9 w-9", children: isTableLoading ? /* @__PURE__ */ jsx(RefreshCcwIcon, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(RefreshCcwIcon, { className: "h-4 w-4" }) })
+      /* @__PURE__ */ jsx(Button$1, { variant: "ghost", size: "icon", onClick: onRefresh, className: "h-9 w-9", children: /* @__PURE__ */ jsx(RefreshCcwIcon, { className: "h-4 w-4" }) })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "overflow-auto", children: /* @__PURE__ */ jsxs(Table$1, { className: "w-full", children: [
       /* @__PURE__ */ jsx(TableHeader, { className: "bg-mastra-bg-2 h-[var(--table-header-height)] sticky top-0 z-10", children: /* @__PURE__ */ jsxs(TableRow, { className: "border-gray-6 border-b-[0.1px] text-[0.8125rem]", children: [
@@ -5352,13 +5552,7 @@ function EvalTable({ evals, isCIMode = false }) {
         ] }) }),
         /* @__PURE__ */ jsx(TableHead, { className: "w-48 text-mastra-el-3", children: "Evaluations" })
       ] }) }),
-      /* @__PURE__ */ jsx(TableBody, { className: "border-b border-gray-6 relative", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", presenceAffectsLayout: false, children: isTableLoading ? Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxs(TableRow, { className: "border-b-gray-6 border-b-[0.1px] text-[0.8125rem]", children: [
-        /* @__PURE__ */ jsx(TableCell, { className: "w-12 h-12", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-8 rounded-full" }) }),
-        /* @__PURE__ */ jsx(TableCell, { className: "min-w-[200px] max-w-[30%]", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" }) }),
-        /* @__PURE__ */ jsx(TableCell, { className: "flex-1", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }) }),
-        /* @__PURE__ */ jsx(TableCell, { className: "w-48", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20" }) }),
-        /* @__PURE__ */ jsx(TableCell, { className: "w-48", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20" }) })
-      ] }, i)) : groupEvals(evals).length === 0 ? /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableBody, { className: "border-b border-gray-6 relative", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", presenceAffectsLayout: false, children: groupEvals(evals).length === 0 ? /* @__PURE__ */ jsxs(TableRow, { children: [
         /* @__PURE__ */ jsx(TableCell, { className: "h-12 w-16" }),
         /* @__PURE__ */ jsx(TableCell, { colSpan: 4, className: "h-32 px-4 text-center text-mastra-el-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
           /* @__PURE__ */ jsx(Search, { className: "size-5" }),
@@ -6711,6 +6905,10 @@ function WorkflowTracesInner({ traces, error, runId, stepName }) {
   ] });
 }
 
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ 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]) => {
@@ -6791,33 +6989,6 @@ const useLegacyWorkflow = (workflowId) => {
   }, [workflowId]);
   return { legacyWorkflow, isLoading };
 };
-const useWorkflow = (workflowId) => {
-  const [workflow, setWorkflow] = useState(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const client = useMastraClient();
-  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);
-        toast.error("Error fetching workflow");
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchWorkflow();
-  }, [workflowId]);
-  return { workflow, isLoading };
-};
 const useExecuteWorkflow = () => {
   const client = useMastraClient();
   const createLegacyWorkflowRun = async ({ workflowId, prevRunId }) => {
@@ -9606,8 +9777,7 @@ function WorkflowGraphInner({ workflow, onShowTrace }) {
   ) });
 }
 
-function WorkflowGraph({ workflowId, onShowTrace }) {
-  const { workflow, isLoading } = useWorkflow(workflowId);
+function WorkflowGraph({ workflowId, onShowTrace, workflow, isLoading }) {
   const { snapshot } = useContext(WorkflowRunContext);
   if (isLoading) {
     return /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }) });
@@ -9631,10 +9801,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 } = useContext(WorkflowRunContext);
-  const { isLoading, workflow } = useWorkflow(workflowId);
   const { createWorkflowRun, startWorkflowRun } = useExecuteWorkflow();
   const { watchWorkflow, watchResult, isWatchingWorkflow } = useWatchWorkflow();
   const { resumeWorkflow, isResumingWorkflow } = useResumeWorkflow();
@@ -9677,7 +9851,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]);
@@ -9748,8 +9923,7 @@ function WorkflowTrigger({ workflowId, setRunId }) {
                   stepId: step.stepId,
                   runId: step.runId,
                   suspendPayload: step.suspendPayload,
-                  resumeData: data
-                });
+                  resumeData: data});
               }
             }
           )