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

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @mastra/playground-ui
 
+## 21.0.0-alpha.1
+
+### Patch Changes
+
+- Added component tests for StudioConfigForm apiPrefix handling to validate the fix for issue #14634. ([#14893](https://github.com/mastra-ai/mastra/pull/14893))
+
+- Fixed SearchFieldBlock search icon sizing and vertical alignment to properly scale across all input sizes (sm, md, default, lg) ([#14927](https://github.com/mastra-ai/mastra/pull/14927))
+
+- Updated dependencies [[`13f4327`](https://github.com/mastra-ai/mastra/commit/13f4327f052faebe199cefbe906d33bf90238767)]:
+  - @mastra/core@1.21.0-alpha.1
+  - @mastra/client-js@1.12.0-alpha.1
+  - @mastra/ai-sdk@1.3.0
+  - @mastra/react@0.2.21-alpha.1
+
+## 21.0.0-alpha.0
+
+### Patch Changes
+
+- Fixed broken colors in DataDetailsPanelCodeSection when using Light theme by adding theme-aware CodeMirror styling and container classes ([#14923](https://github.com/mastra-ai/mastra/pull/14923))
+
+- Reverted HorizontalBars layout to original inline style with label overlaid inside the bar and total displayed to the right ([#14919](https://github.com/mastra-ai/mastra/pull/14919))
+
+- Updated dependencies [[`9a43b47`](https://github.com/mastra-ai/mastra/commit/9a43b476465e86c9aca381c2831066b5c33c999a), [`edf8f9d`](https://github.com/mastra-ai/mastra/commit/edf8f9d9cd671ffbc8533ac154da6c3386799b33)]:
+  - @mastra/core@1.21.0-alpha.0
+  - @mastra/client-js@1.12.0-alpha.0
+  - @mastra/react@0.2.21-alpha.0
+
 ## 20.0.2
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -5569,7 +5569,7 @@ function CopyButton({
   ] });
 }
 
-function buildDarkTheme() {
+function buildDarkTheme$1() {
   const baseTheme = codemirrorThemeDracula.draculaInit({
     settings: {
       fontFamily: "var(--geist-mono)",
@@ -5656,7 +5656,7 @@ function buildDarkTheme() {
   });
   return [baseTheme, customLineNumberTheme];
 }
-function buildLightTheme() {
+function buildLightTheme$1() {
   const editorTheme = view.EditorView.theme({
     "&": {
       backgroundColor: "transparent",
@@ -5759,7 +5759,7 @@ function buildLightTheme() {
 }
 const useCodemirrorTheme$2 = () => {
   const isDark = useIsDarkMode();
-  return React.useMemo(() => isDark ? buildDarkTheme() : buildLightTheme(), [isDark]);
+  return React.useMemo(() => isDark ? buildDarkTheme$1() : buildLightTheme$1(), [isDark]);
 };
 const CodeEditor = React.forwardRef(
   ({
@@ -34303,14 +34303,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__ */ jsxRuntime.jsx(
           lucideReact.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__ */ jsxRuntime.jsx(
@@ -42673,62 +42684,65 @@ function HorizontalBars({
   });
   const isStacked = segments.length > 1;
   return /* @__PURE__ */ jsxRuntime.jsxs(ScrollArea, { className: cn("w-full h-full", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3 mb-4 mt-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center gap-4", children: segments.map((seg) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-2 rounded-full", style: { backgroundColor: seg.color } }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-sm text-neutral3", children: seg.label })
-    ] }, seg.label)) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-4 mt-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center gap-4", children: segments.map((seg) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-2 rounded-full", style: { backgroundColor: seg.color } }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-sm text-neutral3", children: seg.label })
+      ] }, seg.label)) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-ui-sm text-neutral2 pr-2", children: "Total" })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-3.5", children: sorted.map((d) => {
       const total = d.values.reduce((s, v) => s + v, 0);
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-sm text-neutral4 truncate", children: d.name }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-sm text-neutral4 tabular-nums shrink-0", children: fmt(total) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-5 w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-14 h-6 ", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-full flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: "absolute inset-y-0 left-0 rounded",
-                    style: { width: `${pct}%`, backgroundColor: seg.color }
-                  },
-                  seg.label
-                );
-              })
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", className: "font-mono", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-1", children: segments.map((seg, si) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: seg.label }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto pl-3", children: fmt(d.values[si] ?? 0) })
-          ] }, seg.label)) }) })
-        ] }) })
+                })
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "top", className: "font-mono", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-1", children: segments.map((seg, si) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: seg.label }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto pl-3", children: fmt(d.values[si] ?? 0) })
+            ] }, seg.label)) }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-ui-md text-neutral4 tabular-nums shrink-0 pr-3", children: fmt(total) })
       ] }, d.name);
     }) })
   ] });
@@ -51443,21 +51457,66 @@ function DataDetailsPanelCloseButton({
   );
 }
 
+function buildDarkTheme() {
+  return codemirrorThemeDracula.draculaInit({
+    settings: {
+      fontFamily: "var(--geist-mono)",
+      fontSize: "0.75rem",
+      lineHighlight: "transparent",
+      gutterBackground: "transparent",
+      gutterForeground: "#939393",
+      background: "transparent"
+    },
+    styles: [{ tag: [highlight$1.tags.className, highlight$1.tags.propertyName] }]
+  });
+}
+function buildLightTheme() {
+  const editorTheme = view.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 = language.HighlightStyle.define([
+    { tag: [highlight$1.tags.comment, highlight$1.tags.bracket], color: "var(--neutral2)" },
+    { tag: [highlight$1.tags.string, highlight$1.tags.meta, highlight$1.tags.regexp], color: "var(--accent1)" },
+    { tag: [highlight$1.tags.atom, highlight$1.tags.bool, highlight$1.tags.special(highlight$1.tags.variableName)], color: "var(--accent6)" },
+    { tag: [highlight$1.tags.keyword, highlight$1.tags.operator, highlight$1.tags.tagName], color: "var(--accent2)" },
+    { tag: [highlight$1.tags.function(highlight$1.tags.propertyName), highlight$1.tags.propertyName], color: "var(--accent5)" },
+    {
+      tag: [highlight$1.tags.definition(highlight$1.tags.variableName), highlight$1.tags.function(highlight$1.tags.variableName), highlight$1.tags.className, highlight$1.tags.attributeName],
+      color: "var(--accent3)"
+    },
+    { tag: [highlight$1.tags.variableName, highlight$1.tags.number], color: "var(--accent5)" },
+    { tag: [highlight$1.tags.name, highlight$1.tags.quote], color: "var(--accent1)" }
+  ]);
+  return [editorTheme, language.syntaxHighlighting(highlightStyle)];
+}
 const useCodemirrorTheme = () => {
-  return React.useMemo(
-    () => codemirrorThemeDracula.draculaInit({
-      settings: {
-        fontFamily: "var(--geist-mono)",
-        fontSize: "0.75rem",
-        lineHighlight: "transparent",
-        gutterBackground: "transparent",
-        gutterForeground: "#939393",
-        background: "transparent"
-      },
-      styles: [{ tag: [highlight$1.tags.className, highlight$1.tags.propertyName] }]
-    }),
-    []
-  );
+  const isDark = useIsDarkMode();
+  return React.useMemo(() => isDark ? buildDarkTheme() : buildLightTheme(), [isDark]);
 };
 function DataDetailsPanelCodeSection({
   codeStr = "",
@@ -51507,10 +51566,10 @@ function DataDetailsPanelCodeSection({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "text-neutral4 font-mono break-all", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-wrap", children: finalCodeStr }) }) : /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "text-neutral4 font-mono break-all", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-wrap", children: finalCodeStr }) }) : /* @__PURE__ */ jsxRuntime.jsx(
       CodeMirror,
       {
-        extensions: [langJson.json(), CodeMirror.EditorView.lineWrapping],
+        extensions: [langJson.json(), view.EditorView.lineWrapping],
         theme,
         value: codeStr,
         editable: false