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

package/dist/index.es.js

@@ -3365,7 +3365,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",
@@ -3384,7 +3385,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 = [];
@@ -4953,7 +4954,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",
@@ -6456,47 +6457,36 @@ const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-const DropdownMenuTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.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.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, { ref, className: cn("cursor-pointer", className), ...props, children }));
 DropdownMenuTrigger.displayName = DropdownMenuPrimitive.Trigger.displayName;
 const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.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__ */ jsx(ChevronDown, { className: "ml-auto -rotate-90" })
+      /* @__PURE__ */ jsx("span", { className: "ml-auto pl-2", children: /* @__PURE__ */ jsx(ChevronDown, { className: "-rotate-90 opacity-50" }) })
     ]
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.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.SubContent.displayName;
 const DropdownMenuContent = React.forwardRef(({ className, container, sideOffset = 8, ...props }, ref) => {
   return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { container, children: /* @__PURE__ */ jsx(
@@ -6505,7 +6495,7 @@ const DropdownMenuContent = React.forwardRef(({ className, container, sideOffset
       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
@@ -6513,27 +6503,13 @@ const DropdownMenuContent = React.forwardRef(({ className, container, sideOffset
   ) });
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-const DropdownMenuItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.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.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, { ref, className: cn(itemClass, className), ...props }));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.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: [
@@ -6568,14 +6544,7 @@ const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.Separator,
-  {
-    ref,
-    className: cn("dark:bg-white/10 bg-black/10 -mx-1 my-1 h-px", className),
-    ...props
-  }
-));
+const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, { ref, className: cn("bg-border1/50 -mx-1.5 my-1 h-0.5", className), ...props }));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 const DropdownMenuShortcut = ({ className, ...props }) => {
   return /* @__PURE__ */ jsx("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props });
@@ -7409,8 +7378,8 @@ const PopoverContent = React.forwardRef(({ className, align = "center", sideOffs
     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
@@ -9392,7 +9361,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"
   };
@@ -9406,7 +9375,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",
@@ -10488,24 +10457,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",
@@ -10519,7 +10500,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
@@ -12455,18 +12436,16 @@ function DataKeysAndValuesKey({ className, children }) {
   return /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("dd", { className: cn(dataKeysAndValuesValueStyles, "truncate", className), children });
@@ -12566,7 +12545,13 @@ function DataPanelContent({ children, ref }) {
 }
 
 function DataPanelHeader({ className, children }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-between gap-2 border-b border-border1 mx-4 py-3", className), children });
+  return /* @__PURE__ */ 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 }) {
@@ -12603,7 +12588,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
     }
@@ -14002,12 +13987,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()];
+    }
   }
 };