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

package/CHANGELOG.md

@@ -1,5 +1,83 @@
 # @mastra/playground-ui
 
+## 22.2.0-alpha.8
+
+### Patch Changes
+
+- Updated dependencies [[`1bd5104`](https://github.com/mastra-ai/mastra/commit/1bd51048b6da93507276d6623e3fd96a9e1a8944)]:
+  - @mastra/core@1.26.0-alpha.8
+  - @mastra/client-js@1.13.5-alpha.8
+  - @mastra/react@0.2.27-alpha.8
+
+## 22.2.0-alpha.7
+
+### Minor Changes
+
+- Added BrandLoader, a branded pulse-wave loader component for brand moments like app boot or agent thinking. Complements Spinner, which remains the inline utility loader. ([#15490](https://github.com/mastra-ai/mastra/pull/15490))
+
+### Patch Changes
+
+- Updated dependencies [[`8786a61`](https://github.com/mastra-ai/mastra/commit/8786a61fa54ba265f85eeff9985ca39863d18bb6), [`8fb2405`](https://github.com/mastra-ai/mastra/commit/8fb2405138f2d208b7962ad03f121ca25bcc28c5)]:
+  - @mastra/core@1.26.0-alpha.7
+  - @mastra/client-js@1.13.5-alpha.7
+  - @mastra/react@0.2.27-alpha.7
+
+## 22.1.3-alpha.6
+
+### Patch Changes
+
+- Updated dependencies [[`6315317`](https://github.com/mastra-ai/mastra/commit/63153175fe9a7b224e5be7c209bbebc01dd9b0d5), [`9d3b24b`](https://github.com/mastra-ai/mastra/commit/9d3b24b19407ae9c09586cf7766d38dc4dff4a69)]:
+  - @mastra/core@1.26.0-alpha.6
+  - @mastra/client-js@1.13.5-alpha.6
+  - @mastra/react@0.2.27-alpha.6
+
+## 22.1.3-alpha.5
+
+### Patch Changes
+
+- Added a Foundations/Tokens page to the @mastra/playground-ui Storybook so you can browse all typography, color, spacing, radius, shadow, and animation tokens in one place. ([#15475](https://github.com/mastra-ai/mastra/pull/15475))
+
+- Added `ScoresDataList` for rendering lists of score evaluation results. ([#15339](https://github.com/mastra-ai/mastra/pull/15339))
+
+- Updated dependencies [[`92dcf02`](https://github.com/mastra-ai/mastra/commit/92dcf029294210ac91b090900c1a0555a425c57a)]:
+  - @mastra/core@1.26.0-alpha.5
+  - @mastra/client-js@1.13.5-alpha.5
+  - @mastra/react@0.2.27-alpha.5
+
+## 22.1.3-alpha.4
+
+### Patch Changes
+
+- Updated dependencies [[`0474c2b`](https://github.com/mastra-ai/mastra/commit/0474c2b2e7c7e1ad8691dca031284841391ff1ef), [`f607106`](https://github.com/mastra-ai/mastra/commit/f607106854c6416c4a07d4082604b9f66d047221), [`62919a6`](https://github.com/mastra-ai/mastra/commit/62919a6ee0fbf3779ad21a97b1ec6696515d5104), [`0fd90a2`](https://github.com/mastra-ai/mastra/commit/0fd90a215caf5fca8099c15a67ca03e4427747a3)]:
+  - @mastra/core@1.26.0-alpha.4
+  - @mastra/client-js@1.13.5-alpha.4
+  - @mastra/react@0.2.27-alpha.4
+
+## 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

@@ -3386,7 +3386,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] `,
@@ -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$5[size], variantClasses$4[variant], options?.iconOnly && "[&>svg]:opacity-75");
 }
 function flattenChildren(children) {
   const result = [];
@@ -4796,7 +4797,7 @@ const AlertDescription = ({ children, as: As = "p" }) => {
   return /* @__PURE__ */ jsxRuntime.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"
@@ -4806,7 +4807,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"
@@ -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 });
@@ -7074,7 +7043,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`,
@@ -7107,7 +7076,7 @@ const IconButton = React.forwardRef(
             baseButtonStyles,
             formElementFocus,
             variantClasses$1[variant],
-            sizeClasses$2[size],
+            sizeClasses$3[size],
             disabled && "active:scale-100",
             className
           ),
@@ -7271,7 +7240,7 @@ function MetricsCardError({
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-3 items-center justify-center", className), children: /* @__PURE__ */ jsxRuntime.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"
@@ -7280,7 +7249,7 @@ function Spinner({ color, className, size = "md" }) {
   return /* @__PURE__ */ jsxRuntime.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",
@@ -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
@@ -7692,6 +7661,49 @@ const Slider = React__namespace.forwardRef(({ className, ...props }, ref) => /*
 ));
 Slider.displayName = SliderPrimitive__namespace.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 = React.useId();
+  const filterId = `brand-loader-${reactId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "status",
+      "aria-label": ariaLabel,
+      className: cn("brand-loader inline-block text-neutral6", sizeClasses$1[size], className),
+      children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("filter", { id: filterId, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "0.55" }),
+              /* @__PURE__ */ jsxRuntime.jsx("feColorMatrix", { values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("g", { filter: `url(#${filterId})`, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("line", { className: "brand-loader-ln23", x1: "10.4", y1: "4.5", x2: "16.8", y2: "16.2" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { className: "brand-loader-ln34", x1: "16.8", y1: "16.2", x2: "23.2", y2: "4.5" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { className: "brand-loader-ln45", x1: "23.2", y1: "4.5", x2: "29.5", y2: "16.2" }),
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "brand-loader-b1", cx: "4.5", cy: "16.2", r: "4.5" }),
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "brand-loader-b2", cx: "10.4", cy: "4.5", r: "4.5" }),
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "brand-loader-b3", cx: "16.8", cy: "16.2", r: "4.5" }),
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "brand-loader-b4", cx: "23.2", cy: "4.5", r: "4.5" }),
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "brand-loader-b5", cx: "29.5", cy: "16.2", r: "4.5" })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+
 const Switch = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SwitchPrimitives__namespace.Root,
   {
@@ -9426,7 +9438,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 +9452,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 +10534,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 +10577,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
@@ -11366,6 +11390,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__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-ui-smd text-neutral2", children: date ? dateFns.isToday(date) ? "Today" : dateFns.format(date, "MMM dd") : "-" });
+}
+function ScoresDataListTimeCell({ timestamp }) {
+  const date = toDate$2(timestamp);
+  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-ui-smd text-neutral3", children: date ? dateFns.format(date, "h:mm:ss aaa") : "-" });
+}
+function ScoresDataListInputCell({ input }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-neutral3 text-ui-smd font-mono truncate", children: input != null ? JSON.stringify(input) : "-" }) });
+}
+function ScoresDataListEntityCell({ entityId }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "min-w-0", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DataListCell, { height: "compact", className: "text-ui-smd font-mono text-neutral3", children: display });
+}
+
+function ScoresDataListRoot(props) {
+  return /* @__PURE__ */ jsxRuntime.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;
@@ -11428,7 +11491,10 @@ function TracesDataListStatusCell({ status }) {
   return /* @__PURE__ */ jsxRuntime.jsx(DataListCell, { height: "compact", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DataListRoot, { ...props });
+}
+const TracesDataList = Object.assign(TracesDataListRoot, {
   Top: DataListTop,
   TopCell: DataListTopCell,
   RowButton: DataListRowButton,
@@ -12489,18 +12555,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 +12664,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 +12707,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 +14106,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()];
+    }
   }
 };
 
@@ -14138,6 +14213,7 @@ exports.Avatar = Avatar;
 exports.AzureIcon = AzureIcon;
 exports.Badge = Badge;
 exports.BranchIcon = BranchIcon;
+exports.BrandLoader = BrandLoader;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
 exports.ButtonWithTooltip = ButtonWithTooltip;
@@ -14320,6 +14396,7 @@ exports.RuleFieldSelect = RuleFieldSelect;
 exports.RuleOperatorSelect = RuleOperatorSelect;
 exports.RuleRow = RuleRow;
 exports.RuleValueInput = RuleValueInput;
+exports.ScoresDataList = ScoresDataList;
 exports.ScrollArea = ScrollArea;
 exports.ScrollBar = ScrollBar;
 exports.ScrollableContainer = ScrollableContainer;