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

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @mastra/playground-ui
 
+## 22.1.3-alpha.3
+
+### Patch Changes
+
+- Added a dedicated trace details page at `/traces/:traceId`, plus the design-system changes that support it: ([#15392](https://github.com/mastra-ai/mastra/pull/15392))
+  - `Button`: new `link` variant (inline, no padding/background/border).
+  - `DataKeysAndValues`: `numOfCol` now accepts `3`.
+  - `DataPanel.Header`: minimum height so heading-only headers match the height of ones with button actions.
+
+- Fix unhandled `TypeError` in `getFileContentType` when the URL is relative ([#15433](https://github.com/mastra-ai/mastra/pull/15433))
+  or malformed. The `catch` block now falls back to inferring the MIME type
+  from the raw string's file extension and strips query/hash fragments so
+  inputs like `/files/report.pdf`, `https://x.dev/a.pdf?token=1`, and
+  `/files/report.pdf#page=2` all resolve to `application/pdf` instead of
+  rejecting.
+
+  Closes #15432.
+
+- Improved visual consistency across Chip, DropdownMenu, Notification, Popover, and toast components — unified radius and border scale. Deduplicated dropdown menu item classes and added max-height scroll handling for long menus. ([#15440](https://github.com/mastra-ai/mastra/pull/15440))
+
+- Updated dependencies [[`fdd54cf`](https://github.com/mastra-ai/mastra/commit/fdd54cf612a9af876e9fdd85e534454f6e7dd518), [`d647793`](https://github.com/mastra-ai/mastra/commit/d647793010ab4de60bb524769a51cd32d7eba8d3), [`30456b6`](https://github.com/mastra-ai/mastra/commit/30456b6b08c8fd17e109dd093b73d93b65e83bc5), [`9d11a8c`](https://github.com/mastra-ai/mastra/commit/9d11a8c1c8924eb975a245a5884d40ca1b7e0491), [`d246696`](https://github.com/mastra-ai/mastra/commit/d246696139a3144a5b21b042d41c532688e957e1), [`354f9ce`](https://github.com/mastra-ai/mastra/commit/354f9ce1ca6af2074b6a196a23f8ec30012dccca), [`e9837b5`](https://github.com/mastra-ai/mastra/commit/e9837b53699e18711b09e0ca010a4106376f2653)]:
+  - @mastra/core@1.26.0-alpha.3
+  - @mastra/client-js@1.13.5-alpha.3
+  - @mastra/react@0.2.27-alpha.3
+
 ## 22.1.3-alpha.2
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -3399,7 +3399,8 @@ const variantClasses$4 = {
   ghost: "bg-transparent border-2 border-transparent hover:text-neutral6 hover:bg-surface4 active:bg-surface5 text-neutral4",
   inputLike: sharedFormElementStyle,
   light: "",
-  outline: ""
+  outline: "",
+  link: "inline-flex justify-start rounded-none h-auto px-0 bg-transparent text-neutral3 hover:text-neutral4 gap-1 [&>svg]:mx-0 w-auto [&>svg]:opacity-70"
 };
 const sharedStyles = cn(
   "flex items-center justify-center gap-[.75em] leading-0 transition-colors duration-200 ease-out-custom rounded-lg",
@@ -3418,7 +3419,7 @@ function resolveVariant(variant) {
 function buttonVariants(options) {
   const variant = resolveVariant(options?.variant || "default");
   const size = options?.size || "default";
-  return cn(sharedStyles, variantClasses$4[variant], sizeClasses$4[size], options?.iconOnly && "[&>svg]:opacity-75");
+  return cn(sharedStyles, sizeClasses$4[size], variantClasses$4[variant], options?.iconOnly && "[&>svg]:opacity-75");
 }
 function flattenChildren(children) {
   const result = [];
@@ -4987,7 +4988,7 @@ const defaultOptions = {
   },
   unstyled: true,
   classNames: {
-    toast: "bg-surface3 w-full h-auto rounded-lg gap-2 border border-border1 px-3 py-2 flex items-center justify-between pointer-events-auto shadow-card :data-content:flex-1",
+    toast: "bg-surface3 w-full h-auto rounded-xl gap-2 border border-border1 px-3 py-2 flex items-center justify-between pointer-events-auto shadow-card :data-content:flex-1",
     title: "text-xs font-medium text-neutral5",
     description: "text-xs text-neutral3",
     cancelButton: "bg-transparent! hover:bg-surface2! border-none! rounded-md! p-1.5! m-0! text-neutral3! hover:text-neutral6! shrink-0 transition-all",
@@ -6490,47 +6491,36 @@ const DropdownMenuGroup = DropdownMenuPrimitive__namespace.Group;
 const DropdownMenuPortal = DropdownMenuPrimitive__namespace.Portal;
 const DropdownMenuSub = DropdownMenuPrimitive__namespace.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive__namespace.RadioGroup;
-const DropdownMenuTrigger = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DropdownMenuPrimitive__namespace.Trigger,
-  {
-    ref,
-    className: cn(
-      "cursor-pointer focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-white/30 focus-visible:rounded-sm",
-      className
-    ),
-    ...props,
-    children
-  }
-));
+const itemClass = cn(
+  "relative flex cursor-pointer select-none items-center gap-3 rounded-lg px-3 py-1.5 text-sm transition-colors text-neutral4 dark:hover:text-white dark:focus:text-white hover:text-neutral6 focus:text-neutral6 hover:bg-surface4 focus:bg-surface4 active:bg-surface5 data-disabled:pointer-events-none data-disabled:opacity-50 [&>span]:truncate [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-hidden focus-visible:ring-0",
+  "[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:opacity-50 [&>svg]:mx-[-.25em] [&:hover>svg]:opacity-100"
+);
+const DropdownMenuTrigger = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Trigger, { ref, className: cn("cursor-pointer", className), ...props, children }));
 DropdownMenuTrigger.displayName = DropdownMenuPrimitive__namespace.Trigger.displayName;
 const DropdownMenuSubTrigger = React__namespace.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   DropdownMenuPrimitive__namespace.SubTrigger,
   {
     ref,
-    className: cn(
-      "hover:bg-surface4 focus:bg-surface4 active:bg-surface5 data-[state=open]:bg-surface4 flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm transition-colors text-neutral4 dark:hover:text-white dark:focus:text-white hover:text-neutral6 focus:text-neutral6 focus-visible:outline-hidden focus-visible:ring-0",
-      inset && "pl-8",
-      className
-    ),
+    className: cn(itemClass, "data-[state=open]:bg-surface4", inset && "pl-8", className),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "ml-auto -rotate-90" })
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto pl-2", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "-rotate-90 opacity-50" }) })
     ]
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive__namespace.SubTrigger.displayName;
-const DropdownMenuSubContent = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+const DropdownMenuSubContent = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
   DropdownMenuPrimitive__namespace.SubContent,
   {
     ref,
     className: cn(
-      "bg-surface3 backdrop-blur-xl data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-50 min-w-32 overflow-auto overflow-x-hidden rounded-lg",
+      "bg-surface3 backdrop-blur-xl data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-50 min-w-44 max-h-[min(20rem,var(--radix-dropdown-menu-content-available-height))] overflow-x-hidden overflow-y-auto rounded-xl border-2 border-border1/50 p-1 shadow-md",
       className
     ),
     ...props
   }
-));
+) }));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive__namespace.SubContent.displayName;
 const DropdownMenuContent = React__namespace.forwardRef(({ className, container, sideOffset = 8, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { container, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -6539,7 +6529,7 @@ const DropdownMenuContent = React__namespace.forwardRef(({ className, container,
       ref,
       sideOffset,
       className: cn(
-        "bg-surface3 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 backdrop-blur-xl text-neutral4 z-50 min-w-32 overflow-auto rounded-lg p-2 shadow-md",
+        "bg-surface3 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 backdrop-blur-xl text-neutral4 z-50 min-w-44 max-h-[min(20rem,var(--radix-dropdown-menu-content-available-height))] overflow-x-hidden overflow-y-auto rounded-xl border-2 border-border1/50 p-1 shadow-md",
         className
       ),
       ...props
@@ -6547,27 +6537,13 @@ const DropdownMenuContent = React__namespace.forwardRef(({ className, container,
   ) });
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive__namespace.Content.displayName;
-const DropdownMenuItem = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DropdownMenuPrimitive__namespace.Item,
-  {
-    ref,
-    className: cn(
-      "relative flex cursor-pointer select-none items-center gap-3 rounded-md px-2 py-1.5 text-sm transition-colors text-neutral4 dark:hover:text-white dark:focus:text-white hover:text-neutral6 focus:text-neutral6 hover:bg-surface4 focus:bg-surface4 active:bg-surface5 data-disabled:pointer-events-none data-disabled:opacity-50 [&>span]:truncate [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-hidden focus-visible:ring-0",
-      "[&>svg]:w-[1.1em] [&>svg]:h-[1.1em] [&>svg]:opacity-50 [&>svg]:mx-[-.25em] [&:hover>svg]:opacity-100",
-      className
-    ),
-    ...props
-  }
-));
+const DropdownMenuItem = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Item, { ref, className: cn(itemClass, className), ...props }));
 DropdownMenuItem.displayName = DropdownMenuPrimitive__namespace.Item.displayName;
 const DropdownMenuCheckboxItem = React__namespace.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   DropdownMenuPrimitive__namespace.CheckboxItem,
   {
     ref,
-    className: cn(
-      "hover:bg-surface4 focus:bg-surface4 active:bg-surface5 dark:hover:text-white dark:focus:text-white hover:text-neutral6 focus:text-neutral6 relative flex w-full cursor-pointer select-none items-center gap-4 rounded-md px-2 py-1.5 text-sm transition-colors text-neutral4 data-disabled:pointer-events-none data-disabled:opacity-50 focus-visible:outline-hidden focus-visible:ring-0",
-      className
-    ),
+    className: cn(itemClass, "w-full gap-4 px-2", className),
     checked,
     ...props,
     children: [
@@ -6602,14 +6578,7 @@ const DropdownMenuLabel = React__namespace.forwardRef(({ className, inset, ...pr
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive__namespace.Label.displayName;
-const DropdownMenuSeparator = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DropdownMenuPrimitive__namespace.Separator,
-  {
-    ref,
-    className: cn("dark:bg-white/10 bg-black/10 -mx-1 my-1 h-px", className),
-    ...props
-  }
-));
+const DropdownMenuSeparator = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Separator, { ref, className: cn("bg-border1/50 -mx-1.5 my-1 h-0.5", className), ...props }));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive__namespace.Separator.displayName;
 const DropdownMenuShortcut = ({ className, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props });
@@ -7443,8 +7412,8 @@ const PopoverContent = React__namespace.forwardRef(({ className, align = "center
     align,
     sideOffset,
     className: cn(
-      "z-50 w-72 rounded-md border border-border1 bg-surface3 text-neutral5 shadow-md focus-visible:outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className && /\bp-\S+/.test(className) ? false : `p-4`,
+      "z-50 w-72 rounded-xl border-2 border-border1/50 bg-surface3 text-neutral5 shadow-md focus-visible:outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className && /\bp[trblxy]?-\S+/.test(className) ? false : `py-3.5 px-3`,
       className
     ),
     ...props
@@ -9426,7 +9395,7 @@ function Notification({
   if (!localIsVisible) return null;
   const typeStyles = {
     info: "bg-surface4 border-border1",
-    error: "bg-accent2Darker border-accent2/30",
+    error: "bg-accent2Darker border-accent2/20",
     success: "bg-accent1Darker border-accent1/30",
     warning: "bg-accent6Darker border-accent6/30"
   };
@@ -9440,7 +9409,7 @@ function Notification({
     "div",
     {
       className: cn(
-        "grid grid-cols-[auto_1fr_auto] gap-3 rounded-lg border p-4 text-ui-md text-neutral4 items-start",
+        "grid grid-cols-[auto_1fr_auto] gap-3 rounded-xl border py-2.5 px-3.5 text-ui-md text-neutral4 items-start",
         "shadow-card",
         transitions.all,
         isAnimatingOut ? "animate-out fade-out-0 slide-out-to-right-2 duration-200" : "animate-in fade-in-0 slide-in-from-right-2 duration-300",
@@ -10522,24 +10491,36 @@ function ItemListTextCell({ children, isLoading, className }) {
 }
 
 const sizeClasses = {
-  small: "text-[11px]   pt-[5px] pb-[4px]",
-  default: "text-[12px] pt-[5px] pb-[4px] ",
-  large: "text-[13px]   pt-[5px] pb-[4px] "
+  small: "text-[10.5px]   pt-[5px] pb-[4px]",
+  default: "text-[11.5px] pt-[5px] pb-[4px] ",
+  large: "text-[12.5px]   pt-[5px] pb-[4px] "
 };
 const bgColorClasses = {
-  gray: { bright: "bg-neutral-700", muted: "bg-neutral-700/80" },
-  red: { bright: "bg-red-900", muted: "bg-red-900/80" },
-  orange: { bright: "bg-yellow-900", muted: "bg-yellow-900/80" },
-  blue: { bright: "bg-blue-800", muted: "bg-blue-800/80" },
-  green: { bright: "bg-green-900", muted: "bg-green-900/80" },
-  purple: { bright: "bg-purple-900", muted: "bg-purple-900/80" },
-  yellow: { bright: "bg-yellow-700", muted: "bg-yellow-700/80" },
-  cyan: { bright: "bg-cyan-900", muted: "bg-cyan-900/80" },
-  pink: { bright: "bg-pink-900", muted: "bg-pink-900/80" }
+  gray: {
+    bright: "bg-neutral-500/30",
+    muted: "bg-neutral-500/10"
+  },
+  red: { bright: "bg-red-500/30", muted: "bg-red-500/10" },
+  orange: {
+    bright: "bg-orange-500/30",
+    muted: "bg-orange-500/10"
+  },
+  blue: { bright: "bg-blue-500/30", muted: "bg-blue-500/10" },
+  green: { bright: "bg-green-500/30", muted: "bg-green-500/10" },
+  purple: {
+    bright: "bg-purple-500/30",
+    muted: "bg-purple-500/10"
+  },
+  yellow: {
+    bright: "bg-yellow-500/30",
+    muted: "bg-yellow-500/10"
+  },
+  cyan: { bright: "bg-cyan-500/30", muted: "bg-cyan-500/10" },
+  pink: { bright: "bg-pink-500/30", muted: "bg-pink-500/10" }
 };
 const txtIntensityClasses = {
-  bright: "text-neutral4",
-  muted: "text-neutral3"
+  bright: "text-neutral4/90",
+  muted: "text-neutral3/90"
 };
 const Chip = ({
   color = "gray",
@@ -10553,7 +10534,7 @@ const Chip = ({
     "span",
     {
       className: cn(
-        "inline-flex items-center rounded-md uppercase px-[0.5em] gap-[0.4em] tracking-wide font-normal",
+        "inline-flex items-center rounded-lg uppercase px-1.5 gap-[0.4em] tracking-wide font-normal",
         // general styles for svg icons within the chip
         "[&>svg]:w-[1em] [&>svg]:h-[1em] [&>svg]:translate-y-[-0.02em] [&>svg]:mx-[-0.2em]",
         // if the chip has only one child and it's an svg, make it fully opaque
@@ -12489,18 +12470,16 @@ function DataKeysAndValuesKey({ className, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx("dt", { className: cn("text-ui-smd  text-neutral2 shrink-0 py-0.5", className), children });
 }
 
+const GRID_TEMPLATES = {
+  1: "auto 1fr",
+  2: "auto auto auto 1fr",
+  3: "auto auto auto auto auto 1fr"
+};
 function DataKeysAndValuesRoot({ className, children, numOfCol = 1 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "dl",
-    {
-      className: cn("grid gap-x-4 gap-y-1.5 grid-cols-[auto_1fr]", className),
-      style: numOfCol === 2 ? { gridTemplateColumns: "auto 1fr auto 1fr" } : void 0,
-      children
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx("dl", { className: cn("grid gap-x-4 gap-y-1.5", className), style: { gridTemplateColumns: GRID_TEMPLATES[numOfCol] }, children });
 }
 
-const dataKeysAndValuesValueStyles = "text-ui-smd text-neutral3 min-w-0 py-0.5";
+const dataKeysAndValuesValueStyles = "text-ui-smd text-neutral3 min-w-0 py-0.5 pr-6";
 
 function DataKeysAndValuesValue({ className, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx("dd", { className: cn(dataKeysAndValuesValueStyles, "truncate", className), children });
@@ -12600,7 +12579,13 @@ function DataPanelContent({ children, ref }) {
 }
 
 function DataPanelHeader({ className, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center justify-between gap-2 border-b border-border1 mx-4 py-3", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("flex items-center justify-between gap-2 border-b border-border1 mx-4 py-3 min-h-14", className),
+      children
+    }
+  );
 }
 
 function DataPanelHeading({ className, children }) {
@@ -12637,7 +12622,7 @@ function DataPanelRoot({ collapsed, children }) {
     {
       className: cn(
         "flex flex-col bg-surface2 border border-border1 rounded-xl overflow-hidden",
-        collapsed ? "h-auto" : "h-full"
+        collapsed ? "h-auto" : "max-h-full"
       ),
       children
     }
@@ -14036,12 +14021,17 @@ const getFileContentType = async (url) => {
     }
     return contentType;
   } catch {
-    const urlObject = new URL(url);
-    const pathname = urlObject.pathname;
-    const extension = pathname.split(".").pop();
-    if (!extension) return void 0;
-    const lowerCaseExtension = extension.toLowerCase();
-    return EXTENSION_TO_MIME[lowerCaseExtension];
+    try {
+      const urlObject = new URL(url);
+      const pathname = urlObject.pathname;
+      const extension = pathname.split(".").pop();
+      if (!extension) return void 0;
+      return EXTENSION_TO_MIME[extension.toLowerCase()];
+    } catch {
+      const extension = url.split(".").pop()?.split(/[?#]/)[0];
+      if (!extension) return void 0;
+      return EXTENSION_TO_MIME[extension.toLowerCase()];
+    }
   }
 };