@mastra/playground-ui 20.0.2 → 21.0.0-alpha.1

package/dist/index.css

@@ -743,6 +743,10 @@
     left: var(--spacing-2);
   }
 
+  .left-2\.5 {
+    left: var(--spacing-2_5);
+  }
+
   .left-3 {
     left: var(--spacing-3);
   }
@@ -1877,6 +1881,10 @@
     width: 1.75rem;
   }
 
+  .w-\[1\.125rem\] {
+    width: 1.125rem;
+  }
+
   .w-\[1em\] {
     width: 1em;
   }
@@ -2764,6 +2772,10 @@
     gap: var(--spacing-12);
   }
 
+  .gap-14 {
+    gap: var(--spacing-14);
+  }
+
   .gap-16 {
     gap: var(--spacing-16);
   }
@@ -3543,16 +3555,6 @@
     border-color: #0000;
   }
 
-  .border-white\/10 {
-    border-color: #ffffff1a;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .border-white\/10 {
-      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-    }
-  }
-
   .border-yellow-200 {
     border-color: var(--color-yellow-200);
   }
@@ -3847,16 +3849,6 @@
     }
   }
 
-  .bg-black\/20 {
-    background-color: #0003;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-black\/20 {
-      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
-    }
-  }
-
   .bg-black\/50 {
     background-color: #00000080;
   }
@@ -4894,6 +4886,10 @@
     padding-left: var(--spacing-10);
   }
 
+  .pl-11 {
+    padding-left: var(--spacing-11);
+  }
+
   .pl-12 {
     padding-left: var(--spacing-12);
   }

package/dist/index.es.js

@@ -5537,7 +5537,7 @@ function CopyButton({
   ] });
 }
 
-function buildDarkTheme() {
+function buildDarkTheme$1() {
   const baseTheme = draculaInit({
     settings: {
       fontFamily: "var(--geist-mono)",
@@ -5624,7 +5624,7 @@ function buildDarkTheme() {
   });
   return [baseTheme, customLineNumberTheme];
 }
-function buildLightTheme() {
+function buildLightTheme$1() {
   const editorTheme = EditorView.theme({
     "&": {
       backgroundColor: "transparent",
@@ -5727,7 +5727,7 @@ function buildLightTheme() {
 }
 const useCodemirrorTheme$2 = () => {
   const isDark = useIsDarkMode();
-  return useMemo(() => isDark ? buildDarkTheme() : buildLightTheme(), [isDark]);
+  return useMemo(() => isDark ? buildDarkTheme$1() : buildLightTheme$1(), [isDark]);
 };
 const CodeEditor = forwardRef(
   ({
@@ -34271,14 +34271,25 @@ function SearchFieldBlock({
             placeholder,
             onChange,
             size,
-            className: "pl-10"
+            className: cn(
+              size === "sm" && "pl-8",
+              size === "md" && "pl-9",
+              (!size || size === "default") && "pl-10",
+              size === "lg" && "pl-11"
+            )
           }
         ),
         /* @__PURE__ */ jsx(
           SearchIcon,
           {
             "aria-hidden": "true",
-            className: "text-neutral4 opacity-50 group-has-focus:opacity-100 absolute top-2 left-3 w-5 h-5"
+            className: cn(
+              "text-neutral4 opacity-50 group-has-focus:opacity-100 absolute left-3 top-1/2 -translate-y-1/2",
+              size === "sm" && "w-3.5 h-3.5",
+              size === "md" && "w-4 h-4",
+              (!size || size === "default") && "w-[1.125rem] h-[1.125rem]",
+              size === "lg" && "w-5 h-5"
+            )
           }
         ),
         onReset && value && /* @__PURE__ */ jsx(
@@ -42641,62 +42652,65 @@ function HorizontalBars({
   });
   const isStacked = segments.length > 1;
   return /* @__PURE__ */ jsxs(ScrollArea, { className: cn("w-full h-full", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 mb-4 mt-2", children: /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center gap-4", children: segments.map((seg) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx("div", { className: "size-2 rounded-full", style: { backgroundColor: seg.color } }),
-      /* @__PURE__ */ jsx("span", { className: "text-ui-sm text-neutral3", children: seg.label })
-    ] }, seg.label)) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-4 mt-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center gap-4", children: segments.map((seg) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "size-2 rounded-full", style: { backgroundColor: seg.color } }),
+        /* @__PURE__ */ jsx("span", { className: "text-ui-sm text-neutral3", children: seg.label })
+      ] }, seg.label)) }),
+      /* @__PURE__ */ jsx("span", { className: "shrink-0 text-ui-sm text-neutral2 pr-2", children: "Total" })
+    ] }),
     /* @__PURE__ */ jsx("div", { className: "grid gap-3.5", children: sorted.map((d) => {
       const total = d.values.reduce((s, v) => s + v, 0);
-      return /* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-ui-sm text-neutral4 truncate", children: d.name }),
-          /* @__PURE__ */ jsx("span", { className: "text-ui-sm text-neutral4 tabular-nums shrink-0", children: fmt(total) })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "relative h-5 w-full", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "absolute inset-y-0 left-0 cursor-default",
-              style: { width: `${maxVal > 0 ? total / maxVal * 100 : 0}%` },
-              children: segments.map((seg, si) => {
-                const val = d.values[si] ?? 0;
-                const pct = total > 0 ? val / total * 100 : 0;
-                const left = d.values.slice(0, si).reduce((s, v) => s + (total > 0 ? v / total * 100 : 0), 0);
-                const isLastWithValue = d.values.slice(si + 1).every((v) => !v);
-                if (isStacked) {
+      return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-14 h-6 ", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative h-full flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute inset-y-0 left-0 cursor-default",
+                style: { width: `${maxVal > 0 ? total / maxVal * 100 : 0}%` },
+                children: segments.map((seg, si) => {
+                  const val = d.values[si] ?? 0;
+                  const pct = total > 0 ? val / total * 100 : 0;
+                  const left = d.values.slice(0, si).reduce((s, v) => s + (total > 0 ? v / total * 100 : 0), 0);
+                  const isLastWithValue = d.values.slice(si + 1).every((v) => !v);
+                  if (isStacked) {
+                    return /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "absolute inset-y-0",
+                          si === 0 && "rounded-l",
+                          isLastWithValue && "rounded-r"
+                        ),
+                        style: {
+                          left: `${left}%`,
+                          width: `${pct}%`,
+                          backgroundColor: seg.color
+                        }
+                      },
+                      seg.label
+                    );
+                  }
                   return /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: cn(
-                        "absolute inset-y-0",
-                        si === 0 && "rounded-l",
-                        isLastWithValue && "rounded-r"
-                      ),
-                      style: {
-                        left: `${left}%`,
-                        width: `${pct}%`,
-                        backgroundColor: seg.color
-                      }
+                      className: "absolute inset-y-0 left-0 rounded",
+                      style: { width: `${pct}%`, backgroundColor: seg.color }
                     },
                     seg.label
                   );
-                }
-                return /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "absolute inset-y-0 left-0 rounded",
-                    style: { width: `${pct}%`, backgroundColor: seg.color }
-                  },
-                  seg.label
-                );
-              })
-            }
-          ) }),
-          /* @__PURE__ */ jsx(TooltipContent, { side: "top", className: "font-mono", children: /* @__PURE__ */ jsx("div", { className: "grid gap-1", children: segments.map((seg, si) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("span", { children: seg.label }),
-            /* @__PURE__ */ jsx("span", { className: "ml-auto pl-3", children: fmt(d.values[si] ?? 0) })
-          ] }, seg.label)) }) })
-        ] }) })
+                })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(TooltipContent, { side: "top", className: "font-mono", children: /* @__PURE__ */ jsx("div", { className: "grid gap-1", children: segments.map((seg, si) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { children: seg.label }),
+              /* @__PURE__ */ jsx("span", { className: "ml-auto pl-3", children: fmt(d.values[si] ?? 0) })
+            ] }, seg.label)) }) })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 left-2.5 flex items-center text-ui-sm text-neutral4 truncate z-10 pointer-events-none", children: d.name })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "text-ui-md text-neutral4 tabular-nums shrink-0 pr-3", children: fmt(total) })
       ] }, d.name);
     }) })
   ] });
@@ -51411,21 +51425,66 @@ function DataDetailsPanelCloseButton({
   );
 }
 
+function buildDarkTheme() {
+  return draculaInit({
+    settings: {
+      fontFamily: "var(--geist-mono)",
+      fontSize: "0.75rem",
+      lineHighlight: "transparent",
+      gutterBackground: "transparent",
+      gutterForeground: "#939393",
+      background: "transparent"
+    },
+    styles: [{ tag: [tags.className, tags.propertyName] }]
+  });
+}
+function buildLightTheme() {
+  const editorTheme = EditorView.theme({
+    "&": {
+      backgroundColor: "transparent",
+      color: "var(--neutral6)",
+      fontSize: "0.75rem"
+    },
+    "&.cm-editor .cm-scroller": {
+      fontFamily: "var(--geist-mono)"
+    },
+    ".cm-gutters": {
+      backgroundColor: "transparent",
+      color: "var(--neutral2)",
+      borderRight: "none"
+    },
+    ".cm-content": {
+      color: "var(--neutral6)",
+      caretColor: "var(--neutral6)"
+    },
+    ".cm-activeLine": {
+      backgroundColor: "transparent"
+    },
+    ".cm-activeLineGutter": {
+      backgroundColor: "transparent"
+    },
+    ".cm-cursor, .cm-dropCursor": {
+      borderLeftColor: "var(--neutral6)"
+    }
+  });
+  const highlightStyle = HighlightStyle.define([
+    { tag: [tags.comment, tags.bracket], color: "var(--neutral2)" },
+    { tag: [tags.string, tags.meta, tags.regexp], color: "var(--accent1)" },
+    { tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: "var(--accent6)" },
+    { tag: [tags.keyword, tags.operator, tags.tagName], color: "var(--accent2)" },
+    { tag: [tags.function(tags.propertyName), tags.propertyName], color: "var(--accent5)" },
+    {
+      tag: [tags.definition(tags.variableName), tags.function(tags.variableName), tags.className, tags.attributeName],
+      color: "var(--accent3)"
+    },
+    { tag: [tags.variableName, tags.number], color: "var(--accent5)" },
+    { tag: [tags.name, tags.quote], color: "var(--accent1)" }
+  ]);
+  return [editorTheme, syntaxHighlighting(highlightStyle)];
+}
 const useCodemirrorTheme = () => {
-  return useMemo(
-    () => draculaInit({
-      settings: {
-        fontFamily: "var(--geist-mono)",
-        fontSize: "0.75rem",
-        lineHighlight: "transparent",
-        gutterBackground: "transparent",
-        gutterForeground: "#939393",
-        background: "transparent"
-      },
-      styles: [{ tag: [tags.className, tags.propertyName] }]
-    }),
-    []
-  );
+  const isDark = useIsDarkMode();
+  return useMemo(() => isDark ? buildDarkTheme() : buildLightTheme(), [isDark]);
 };
 function DataDetailsPanelCodeSection({
   codeStr = "",
@@ -51475,10 +51534,10 @@ function DataDetailsPanelCodeSection({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "bg-black/20 p-3 overflow-hidden rounded-lg border border-white/10 text-neutral4 text-ui-sm break-all max-h-[30vh] overflow-y-auto", children: usePlainTextView ? /* @__PURE__ */ jsx("div", { className: "text-neutral4 font-mono break-all", children: /* @__PURE__ */ jsx("pre", { className: "text-wrap", children: finalCodeStr }) }) : /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "dark:bg-black/20 bg-surface3 p-3 overflow-hidden rounded-lg border dark:border-white/10 border-border1 text-neutral4 text-ui-sm break-all max-h-[30vh] overflow-y-auto", children: usePlainTextView ? /* @__PURE__ */ jsx("div", { className: "text-neutral4 font-mono break-all", children: /* @__PURE__ */ jsx("pre", { className: "text-wrap", children: finalCodeStr }) }) : /* @__PURE__ */ jsx(
       CodeMirror,
       {
-        extensions: [json(), EditorView$1.lineWrapping],
+        extensions: [json(), EditorView.lineWrapping],
         theme,
         value: codeStr,
         editable: false