@mastra/playground-ui 22.1.3-alpha.2 → 22.2.0-alpha.8

package/dist/index.es.js

@@ -3352,7 +3352,7 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
-const sizeClasses$4 = {
+const sizeClasses$5 = {
   sm: `${formElementSizes.sm} text-ui-sm px-[.75em]`,
   md: `${formElementSizes.md} text-ui-md px-[.75em]`,
   default: `${formElementSizes.default} text-ui-md px-[.85em] `,
@@ -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$5[size], variantClasses$4[variant], options?.iconOnly && "[&>svg]:opacity-75");
 }
 function flattenChildren(children) {
   const result = [];
@@ -4762,7 +4763,7 @@ const AlertDescription = ({ children, as: As = "p" }) => {
   return /* @__PURE__ */ jsx(Txt, { as: As, variant: "ui-sm", children });
 };
 
-const sizeClasses$3 = {
+const sizeClasses$4 = {
   sm: "h-avatar-sm w-avatar-sm",
   md: "h-avatar-md w-avatar-md",
   lg: "h-avatar-lg w-avatar-lg"
@@ -4772,7 +4773,7 @@ const Avatar = ({ src, name, size = "sm", interactive = false }) => {
     "div",
     {
       className: cn(
-        sizeClasses$3[size],
+        sizeClasses$4[size],
         "border border-border1 bg-surface3 shrink-0 overflow-hidden rounded-full flex items-center justify-center",
         transitions.all,
         interactive && "cursor-pointer hover:scale-105 hover:border-neutral2 hover:shadow-sm"
@@ -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 });
@@ -7040,7 +7009,7 @@ function SelectFieldBlock({
   ] });
 }
 
-const sizeClasses$2 = {
+const sizeClasses$3 = {
   sm: `${formElementSizes.sm} w-form-sm`,
   md: `${formElementSizes.md} w-form-md`,
   lg: `${formElementSizes.lg} w-form-lg`,
@@ -7073,7 +7042,7 @@ const IconButton = React__default.forwardRef(
             baseButtonStyles,
             formElementFocus,
             variantClasses$1[variant],
-            sizeClasses$2[size],
+            sizeClasses$3[size],
             disabled && "active:scale-100",
             className
           ),
@@ -7237,7 +7206,7 @@ function MetricsCardError({
   return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-3 items-center justify-center", className), children: /* @__PURE__ */ jsx("p", { className: "text-ui-sm text-accent2", children: message }) });
 }
 
-const sizeClasses$1 = {
+const sizeClasses$2 = {
   sm: "w-4 h-4",
   md: "w-6 h-6",
   lg: "w-8 h-8"
@@ -7246,7 +7215,7 @@ function Spinner({ color, className, size = "md" }) {
   return /* @__PURE__ */ jsx(
     "svg",
     {
-      className: cn("animate-spin", sizeClasses$1[size], className),
+      className: cn("animate-spin", sizeClasses$2[size], className),
       style: { animationDuration: "800ms", animationTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)" },
       xmlns: "http://www.w3.org/2000/svg",
       width: "24",
@@ -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
@@ -7658,6 +7627,49 @@ const Slider = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;
 
+const sizeClasses$1 = {
+  sm: "w-6",
+  md: "w-10",
+  lg: "w-16"
+};
+function BrandLoader({ className, size = "md", "aria-label": ariaLabel = "Loading" }) {
+  const reactId = useId();
+  const filterId = `brand-loader-${reactId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "status",
+      "aria-label": ariaLabel,
+      className: cn("brand-loader inline-block text-neutral6", sizeClasses$1[size], className),
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 34 21",
+          className: "block w-full h-auto overflow-visible",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: filterId, children: [
+              /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "0.55" }),
+              /* @__PURE__ */ jsx("feColorMatrix", { values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" })
+            ] }) }),
+            /* @__PURE__ */ jsxs("g", { filter: `url(#${filterId})`, children: [
+              /* @__PURE__ */ jsx("line", { className: "brand-loader-ln23", x1: "10.4", y1: "4.5", x2: "16.8", y2: "16.2" }),
+              /* @__PURE__ */ jsx("line", { className: "brand-loader-ln34", x1: "16.8", y1: "16.2", x2: "23.2", y2: "4.5" }),
+              /* @__PURE__ */ jsx("line", { className: "brand-loader-ln45", x1: "23.2", y1: "4.5", x2: "29.5", y2: "16.2" }),
+              /* @__PURE__ */ jsx("circle", { className: "brand-loader-b1", cx: "4.5", cy: "16.2", r: "4.5" }),
+              /* @__PURE__ */ jsx("circle", { className: "brand-loader-b2", cx: "10.4", cy: "4.5", r: "4.5" }),
+              /* @__PURE__ */ jsx("circle", { className: "brand-loader-b3", cx: "16.8", cy: "16.2", r: "4.5" }),
+              /* @__PURE__ */ jsx("circle", { className: "brand-loader-b4", cx: "23.2", cy: "4.5", r: "4.5" }),
+              /* @__PURE__ */ jsx("circle", { className: "brand-loader-b5", cx: "29.5", cy: "16.2", r: "4.5" })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+
 const Switch = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SwitchPrimitives.Root,
   {
@@ -9392,7 +9404,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 +9418,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 +10500,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 +10543,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
@@ -11332,6 +11356,45 @@ function DataListSkeleton({ columns = "auto 1fr auto auto", numberOfRows = 3 })
   )) });
 }
 
+function toDate$2(value) {
+  const date = value instanceof Date ? value : new Date(value);
+  return isNaN(date.getTime()) ? null : date;
+}
+function ScoresDataListDateCell({ timestamp }) {
+  const date = toDate$2(timestamp);
+  return /* @__PURE__ */ jsx(DataListCell, { height: "compact", className: "text-ui-smd text-neutral2", children: date ? isToday$1(date) ? "Today" : format(date, "MMM dd") : "-" });
+}
+function ScoresDataListTimeCell({ timestamp }) {
+  const date = toDate$2(timestamp);
+  return /* @__PURE__ */ jsx(DataListCell, { height: "compact", className: "text-ui-smd text-neutral3", children: date ? format(date, "h:mm:ss aaa") : "-" });
+}
+function ScoresDataListInputCell({ input }) {
+  return /* @__PURE__ */ jsx(DataListCell, { height: "compact", className: "min-w-0", children: /* @__PURE__ */ jsx("span", { className: "block text-neutral3 text-ui-smd font-mono truncate", children: input != null ? JSON.stringify(input) : "-" }) });
+}
+function ScoresDataListEntityCell({ entityId }) {
+  return /* @__PURE__ */ jsx(DataListCell, { height: "compact", className: "min-w-0", children: /* @__PURE__ */ jsx("span", { className: "block text-ui-smd truncate", children: entityId || "-" }) });
+}
+function ScoresDataListScoreCell({ score }) {
+  const display = score == null ? "-" : typeof score === "object" ? JSON.stringify(score) : String(score);
+  return /* @__PURE__ */ jsx(DataListCell, { height: "compact", className: "text-ui-smd font-mono text-neutral3", children: display });
+}
+
+function ScoresDataListRoot(props) {
+  return /* @__PURE__ */ jsx(DataListRoot, { ...props });
+}
+const ScoresDataList = Object.assign(ScoresDataListRoot, {
+  Top: DataListTop,
+  TopCell: DataListTopCell,
+  RowButton: DataListRowButton,
+  NoMatch: DataListNoMatch,
+  NextPageLoading: DataListNextPageLoading,
+  DateCell: ScoresDataListDateCell,
+  TimeCell: ScoresDataListTimeCell,
+  InputCell: ScoresDataListInputCell,
+  EntityCell: ScoresDataListEntityCell,
+  ScoreCell: ScoresDataListScoreCell
+});
+
 function toDate$1(value) {
   const date = value instanceof Date ? value : new Date(value);
   return isNaN(date.getTime()) ? null : date;
@@ -11394,7 +11457,10 @@ function TracesDataListStatusCell({ status }) {
   return /* @__PURE__ */ jsx(DataListCell, { height: "compact", children: /* @__PURE__ */ jsx("span", { className: "uppercase text-ui-sm font-semibold", style: { color: config.color }, children: config.label }) });
 }
 
-const TracesDataList = Object.assign(DataListRoot, {
+function TracesDataListRoot(props) {
+  return /* @__PURE__ */ jsx(DataListRoot, { ...props });
+}
+const TracesDataList = Object.assign(TracesDataListRoot, {
   Top: DataListTop,
   TopCell: DataListTopCell,
   RowButton: DataListRowButton,
@@ -12455,18 +12521,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 +12630,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 +12673,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 +14072,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()];
+    }
   }
 };
 
@@ -14073,5 +14148,5 @@ function generateDefaultValues(schema) {
   return generateObjectDefaults(schema.properties, 0);
 }
 
-export { AddField, AgentCoinIcon, AgentIcon, AgentNetworkCoinIcon, AiIcon, Alert, AlertDescription, AlertDialog, AlertTitle, AmazonIcon, AnthropicChatIcon, AnthropicMessagesIcon, ApiIcon, Avatar, AzureIcon, Badge, BorderColors, BorderRadius, BranchIcon, Breadcrumb, Button, ButtonWithTooltip, ButtonsGroup, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Cell, CheckIcon, Checkbox, ChevronIcon, Chip, ChipsGroup, CodeDiff, CodeEditor, CohereIcon, Collapsible, CollapsibleContent, CollapsiblePanel, CollapsibleTrigger, Colors, Column, Columns, CombinedButtons, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CommitIcon, ContentBlock, ContentBlocks, CopyButton, CrossIcon, Crumb, DashboardCard, DataCodeSection, DataDetailsPanel, DataKeysAndValues, DataList, DataListSkeleton, DataPanel, DatePicker, DateTimeCell, DateTimePicker, DateTimePickerContent, DateTimeRangePicker, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DividerIcon, DocsIcon, DropdownMenu, EXTENSION_TO_MIME, ElementSelect, EmptyState, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityList, EntityListPageLayout, EntityListSkeleton, EntityName, Entry, EntryCell, EntryList, EntryListSkeleton, EnvIcon, ErrorState, Field, FieldBlock, FieldBlocksLayout, FieldDescription, FieldList, FieldName, FieldNullable, FieldOptional, FieldRemove, FieldType, FiltersIcon, FolderIcon, FontSizes, GithubCoinIcon, GithubIcon, Glows, GoogleIcon, GroqIcon, Header$1 as Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, HorizontalBars, HoverPopover, Icon, IconButton, InfoIcon, Input, ItemList, ItemListSkeleton, JSONSchemaForm, JudgeIcon, Kbd, KeyValueList, Label, LatencyIcon, LineHeights, ListSearch, LogoWithoutText, LogsDataList, DataListSkeleton as LogsDataListSkeleton, LogsIcon, MainContentContent, MainContentLayout, MainHeader, MainSidebar, MainSidebarProvider, MainSidebarTrigger, MarkdownRenderer, MastraIcon, McpCoinIcon, McpServerIcon, MemoryIcon, MetricsCard, MetricsDataTable, MetricsFlexGrid, MetricsKpiCard, MetricsLineChart, MetricsLineChartTooltip, MistralIcon, MultiColumn, MultiCombobox, NestedFields, NetlifyIcon, NoDataPageLayout, Notice, Notification, OPERATORS, OPERATOR_LABELS, OpenAIIcon, OpenaiChatIcon, PageHeader, PageLayout, PanelSeparator, PermissionDenied, Popover, PopoverContent, PopoverTrigger, PrevNextNav, ProcessStepList, ProcessStepListItem, ProcessStepProgressBar, ProcessorIcon, PromptIcon, RadioGroup, RadioGroupItem, RepoIcon, Root$1 as Root, Row, RuleBuilder, RuleFieldSelect, RuleOperatorSelect, RuleRow, RuleValueInput, ScrollArea, ScrollBar, ScrollableContainer, SearchFieldBlock, Searchbar, SearchbarWrapper, Section, SectionRoot, Sections, Select, SelectContent, SelectDataFilter, SelectField, SelectFieldBlock, SelectGroup, SelectItem, SelectTrigger, SelectValue, SessionExpired, SettingsIcon, Shadows, SideDialog, Sizes, Skeleton, SkillIcon, SlashIcon, Slider, Spacings, Spinner, StatusBadge, SubSectionRoot, Switch, Tab, TabContent, TabList, Table, Tabs, Tbody, TextAndIcon, TextFieldBlock, Textarea, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, TimePicker, ToolCoinIcon, ToolsIcon, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TraceIcon, TracesDataList, Tree, Truncate, TsIcon, Txt, TxtCell, VARIABLE_PATTERN, VariablesIcon, WorkflowCoinIcon, WorkflowIcon, XGroqIcon, buttonVariants, cn, comboboxStyles, countLeafRules, createDefaultRule, createDefaultRuleGroup, createField, createVariableAutocomplete, fieldsToJSONSchema, fileToBase64, flattenSchemaToVariables, focusRing, formElementFocus, formElementFocusWithin, formElementRadius, formElementSizes, formElementTransition, formatJSON, generateDefaultValues, getChildFieldOptions, getColumnTemplate, getFieldOptionAtPath, getFieldOptionsFromSchema, getFileContentType, getItemListColumnTemplate, getMainContentContentClassName, getShortId$1 as getShortId, getStatusIcon, getToNextEntryFn, getToNextItemFn, getToPreviousEntryFn, getToPreviousItemFn, highlight, hoverEffects, inputVariants, is401UnauthorizedError, is403ForbiddenError, isNonRetryableError, isObjectEmpty, isRule, isRuleGroup, isValidJson, jsonSchemaToFields, lodashTitleCase, parseError, parseFieldPath, sharedFormElementDisabledStyle, sharedFormElementFocusStyle, sharedFormElementStyle, shouldRetryQuery, stringToColor, textareaVariants, toSigFigs, toast, transitions, truncateString, useAutoscroll, useCodemirrorTheme$3 as useCodemirrorTheme, useCopyToClipboard, useInView, useIsDarkMode, useJSONSchemaForm, useJSONSchemaFormField, useJSONSchemaFormNestedContext, useMainSidebar, useMaybeSidebar, usePlaygroundStore, useTableKeyboardNavigation, variableHighlight };
+export { AddField, AgentCoinIcon, AgentIcon, AgentNetworkCoinIcon, AiIcon, Alert, AlertDescription, AlertDialog, AlertTitle, AmazonIcon, AnthropicChatIcon, AnthropicMessagesIcon, ApiIcon, Avatar, AzureIcon, Badge, BorderColors, BorderRadius, BranchIcon, BrandLoader, Breadcrumb, Button, ButtonWithTooltip, ButtonsGroup, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Cell, CheckIcon, Checkbox, ChevronIcon, Chip, ChipsGroup, CodeDiff, CodeEditor, CohereIcon, Collapsible, CollapsibleContent, CollapsiblePanel, CollapsibleTrigger, Colors, Column, Columns, CombinedButtons, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CommitIcon, ContentBlock, ContentBlocks, CopyButton, CrossIcon, Crumb, DashboardCard, DataCodeSection, DataDetailsPanel, DataKeysAndValues, DataList, DataListSkeleton, DataPanel, DatePicker, DateTimeCell, DateTimePicker, DateTimePickerContent, DateTimeRangePicker, DbIcon, DebugIcon, DefaultTrigger, DeploymentIcon, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DividerIcon, DocsIcon, DropdownMenu, EXTENSION_TO_MIME, ElementSelect, EmptyState, Entity, EntityContent, EntityDescription, EntityHeader, EntityIcon, EntityList, EntityListPageLayout, EntityListSkeleton, EntityName, Entry, EntryCell, EntryList, EntryListSkeleton, EnvIcon, ErrorState, Field, FieldBlock, FieldBlocksLayout, FieldDescription, FieldList, FieldName, FieldNullable, FieldOptional, FieldRemove, FieldType, FiltersIcon, FolderIcon, FontSizes, GithubCoinIcon, GithubIcon, Glows, GoogleIcon, GroqIcon, Header$1 as Header, HeaderAction, HeaderGroup, HeaderTitle, HomeIcon, HorizontalBars, HoverPopover, Icon, IconButton, InfoIcon, Input, ItemList, ItemListSkeleton, JSONSchemaForm, JudgeIcon, Kbd, KeyValueList, Label, LatencyIcon, LineHeights, ListSearch, LogoWithoutText, LogsDataList, DataListSkeleton as LogsDataListSkeleton, LogsIcon, MainContentContent, MainContentLayout, MainHeader, MainSidebar, MainSidebarProvider, MainSidebarTrigger, MarkdownRenderer, MastraIcon, McpCoinIcon, McpServerIcon, MemoryIcon, MetricsCard, MetricsDataTable, MetricsFlexGrid, MetricsKpiCard, MetricsLineChart, MetricsLineChartTooltip, MistralIcon, MultiColumn, MultiCombobox, NestedFields, NetlifyIcon, NoDataPageLayout, Notice, Notification, OPERATORS, OPERATOR_LABELS, OpenAIIcon, OpenaiChatIcon, PageHeader, PageLayout, PanelSeparator, PermissionDenied, Popover, PopoverContent, PopoverTrigger, PrevNextNav, ProcessStepList, ProcessStepListItem, ProcessStepProgressBar, ProcessorIcon, PromptIcon, RadioGroup, RadioGroupItem, RepoIcon, Root$1 as Root, Row, RuleBuilder, RuleFieldSelect, RuleOperatorSelect, RuleRow, RuleValueInput, ScoresDataList, ScrollArea, ScrollBar, ScrollableContainer, SearchFieldBlock, Searchbar, SearchbarWrapper, Section, SectionRoot, Sections, Select, SelectContent, SelectDataFilter, SelectField, SelectFieldBlock, SelectGroup, SelectItem, SelectTrigger, SelectValue, SessionExpired, SettingsIcon, Shadows, SideDialog, Sizes, Skeleton, SkillIcon, SlashIcon, Slider, Spacings, Spinner, StatusBadge, SubSectionRoot, Switch, Tab, TabContent, TabList, Table, Tabs, Tbody, TextAndIcon, TextFieldBlock, Textarea, Th, Thead, ThreadDeleteButton, ThreadItem, ThreadLink, ThreadList, Threads, TimePicker, ToolCoinIcon, ToolsIcon, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TraceIcon, TracesDataList, Tree, Truncate, TsIcon, Txt, TxtCell, VARIABLE_PATTERN, VariablesIcon, WorkflowCoinIcon, WorkflowIcon, XGroqIcon, buttonVariants, cn, comboboxStyles, countLeafRules, createDefaultRule, createDefaultRuleGroup, createField, createVariableAutocomplete, fieldsToJSONSchema, fileToBase64, flattenSchemaToVariables, focusRing, formElementFocus, formElementFocusWithin, formElementRadius, formElementSizes, formElementTransition, formatJSON, generateDefaultValues, getChildFieldOptions, getColumnTemplate, getFieldOptionAtPath, getFieldOptionsFromSchema, getFileContentType, getItemListColumnTemplate, getMainContentContentClassName, getShortId$1 as getShortId, getStatusIcon, getToNextEntryFn, getToNextItemFn, getToPreviousEntryFn, getToPreviousItemFn, highlight, hoverEffects, inputVariants, is401UnauthorizedError, is403ForbiddenError, isNonRetryableError, isObjectEmpty, isRule, isRuleGroup, isValidJson, jsonSchemaToFields, lodashTitleCase, parseError, parseFieldPath, sharedFormElementDisabledStyle, sharedFormElementFocusStyle, sharedFormElementStyle, shouldRetryQuery, stringToColor, textareaVariants, toSigFigs, toast, transitions, truncateString, useAutoscroll, useCodemirrorTheme$3 as useCodemirrorTheme, useCopyToClipboard, useInView, useIsDarkMode, useJSONSchemaForm, useJSONSchemaFormField, useJSONSchemaFormNestedContext, useMainSidebar, useMaybeSidebar, usePlaygroundStore, useTableKeyboardNavigation, variableHighlight };
 //# sourceMappingURL=index.es.js.map