@mastra/playground-ui 31.0.0-alpha.6 → 31.0.0-alpha.8

package/CHANGELOG.md

@@ -1,5 +1,60 @@
 # @mastra/playground-ui
 
+## 31.0.0-alpha.8
+
+### Patch Changes
+
+- Updated dependencies [[`0c1ed1d`](https://github.com/mastra-ai/mastra/commit/0c1ed1d00c7d87b5ac99ca95896211a2fa9189fa), [`849efb9`](https://github.com/mastra-ai/mastra/commit/849efb9fca6dc976589c1f90a303fea618769109)]:
+  - @mastra/core@1.38.0-alpha.8
+  - @mastra/client-js@1.22.0-alpha.8
+  - @mastra/react@0.4.3-alpha.8
+
+## 31.0.0-alpha.7
+
+### Patch Changes
+
+- Added a `DataPanel.SectionHeading` component for small-caps section labels (with an optional leading icon) inside a `DataPanel.Content`. `DataCodeSection` now renders through it, and `DataPanel.Header` hides its bottom border when the panel is collapsed (header-only) so an empty panel no longer shows a stray divider. ([#17464](https://github.com/mastra-ai/mastra/pull/17464))
+
+  ```tsx
+  <DataPanel.SectionHeading icon={<FileInputIcon />}>Input</DataPanel.SectionHeading>
+  ```
+
+- Changed `Spinner` to render the new compact loader by default and added `variant="pulse"` for longer data-loading states. Removed the `color` prop so the loader defaults to the neutral text token and color overrides go through `className`. ([#17455](https://github.com/mastra-ai/mastra/pull/17455))
+
+  **Migration note**
+
+  Before:
+
+  ```tsx
+  <Spinner color={Colors.neutral3} />
+  ```
+
+  After:
+
+  ```tsx
+  <Spinner className="text-neutral3" />
+  <Spinner variant="pulse" className="text-neutral1" />
+  ```
+
+- Added an `is404NotFoundError` helper to detect 404 Not Found responses from the Mastra client, alongside the existing `is401UnauthorizedError` and `is403ForbiddenError` helpers. Use it to show a clear not-found state when a resource no longer exists. ([#17460](https://github.com/mastra-ai/mastra/pull/17460))
+
+  ```ts
+  import { is404NotFoundError } from '@mastra/playground-ui';
+
+  try {
+    await client.getDataset(id);
+  } catch (error) {
+    if (is404NotFoundError(error)) {
+      // show a not-found state instead of a generic error
+    }
+  }
+  ```
+
+- Updated dependencies:
+  - @mastra/core@1.38.0-alpha.7
+  - @mastra/client-js@1.22.0-alpha.7
+  - @mastra/react@0.4.3-alpha.7
+
 ## 31.0.0-alpha.6
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -3414,7 +3414,7 @@ const focusRing = {
   visible: "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:shadow-focus-ring"
 };
 
-const sizeClasses$4 = {
+const sizeClasses$3 = {
   sm: "h-avatar-sm w-avatar-sm",
   md: "h-avatar-md w-avatar-md",
   lg: "h-avatar-lg w-avatar-lg"
@@ -3428,7 +3428,7 @@ const Avatar = ({ src, name, size = "sm", interactive = false, color, textColor
     "div",
     {
       className: cn(
-        sizeClasses$4[size],
+        sizeClasses$3[size],
         "border border-border1 shrink-0 overflow-hidden rounded-full flex items-center justify-center",
         !showFallbackTint && "bg-surface3",
         transitions.all,
@@ -5880,7 +5880,7 @@ const LogoWithoutText = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns
 ) });
 
 const PATH_D = "M4.49805 11.6934C6.98237 11.6934 8.99609 13.7081 8.99609 16.1924C8.9959 18.6765 6.98225 20.6904 4.49805 20.6904C2.01394 20.6903 0.000196352 18.6765 0 16.1924C0 13.7081 2.01382 11.6935 4.49805 11.6934ZM10.3867 0C12.8709 0 14.8846 2.01388 14.8848 4.49805C14.8848 4.8377 14.847 5.16846 14.7755 5.48643C14.4618 6.88139 14.1953 8.4633 14.9928 9.65L16.2575 11.5319C16.3363 11.6491 16.4727 11.7115 16.6137 11.703C16.7369 11.6957 16.8525 11.6343 16.9214 11.5318L18.1876 9.64717C18.9772 8.47198 18.7236 6.90783 18.4205 5.52484C18.3523 5.21392 18.3164 4.89094 18.3164 4.55957C18.3167 2.07546 20.3313 0.0615234 22.8154 0.0615234C25.2994 0.0617476 27.3132 2.0756 27.3135 4.55957C27.3135 4.93883 27.2665 5.30712 27.178 5.65896C26.8547 6.94441 26.5817 8.37932 27.2446 9.52714L28.459 11.6301C28.4819 11.6697 28.5245 11.6934 28.5703 11.6934C31.0545 11.6935 33.0684 13.7081 33.0684 16.1924C33.0682 18.6765 31.0544 20.6903 28.5703 20.6904C26.0861 20.6904 24.0725 18.6765 24.0723 16.1924C24.0723 15.8049 24.1212 15.4288 24.2133 15.0701C24.5458 13.7746 24.8298 12.3251 24.1609 11.1668L23.0044 9.16384C22.9656 9.09659 22.8931 9.05859 22.8154 9.05859C22.7983 9.05859 22.7824 9.06614 22.7728 9.08033L21.4896 10.9895C20.686 12.1851 20.9622 13.781 21.284 15.1851C21.3582 15.5089 21.3975 15.8461 21.3975 16.1924C21.3973 18.6764 19.3834 20.6902 16.8994 20.6904C14.4152 20.6904 12.4006 18.6765 12.4004 16.1924C12.4004 15.932 12.4226 15.6768 12.4651 15.4286C12.6859 14.14 12.8459 12.7122 12.1167 11.6271L11.2419 10.3253C10.6829 9.49347 9.71913 9.05932 8.78286 8.70188C7.0906 8.05584 5.88867 6.41734 5.88867 4.49805C5.88886 2.0139 7.90254 3.29835e-05 10.3867 0Z";
-const sizeClasses$3 = {
+const sizeClasses$2 = {
   sm: "w-6",
   md: "w-10"
 };
@@ -5909,7 +5909,7 @@ function Logo({ className, size = "md", animateOnHover = false, "aria-label": ar
       onAnimationEnd: handleAnimationEnd,
       className: cn(
         "logo inline-block text-neutral6",
-        sizeClasses$3[size],
+        sizeClasses$2[size],
         animateOnHover && playing && "logo-animate-on-hover",
         className
       ),
@@ -8452,33 +8452,53 @@ 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$2 = {
-  sm: "w-4 h-4",
-  md: "w-6 h-6",
-  lg: "w-8 h-8"
-};
-function Spinner({ color, className, size = "md" }) {
+const spinnerVariants = cva("spinner inline-block text-neutral6", {
+  variants: {
+    size: {
+      sm: "w-4 h-4",
+      md: "w-6 h-6"
+    },
+    variant: {
+      default: "",
+      pulse: ""
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "default"
+  }
+});
+function Spinner({
+  className,
+  size = "md",
+  variant = "default",
+  "aria-label": ariaLabel = "Loading",
+  role = "status",
+  ...props
+}) {
+  const resolvedSize = size ?? "md";
+  const resolvedVariant = variant ?? "default";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
-      className: cn("animate-spin", sizeClasses$2[size], className),
-      style: { animationDuration: "800ms", animationTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)" },
+      ...props,
+      role,
+      "aria-label": ariaLabel,
+      "data-size": resolvedSize,
+      "data-variant": resolvedVariant,
+      className: cn(spinnerVariants({ size: resolvedSize, variant: resolvedVariant }), className),
       xmlns: "http://www.w3.org/2000/svg",
-      width: "24",
-      height: "24",
       viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56", stroke: color || "currentColor", className: "text-accent1" })
+      children: resolvedVariant === "pulse" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "spinner-pulse-ring", cx: "12", cy: "12", r: "7" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "spinner-pulse-core", cx: "12", cy: "12", r: "5" })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "spinner-ring", cx: "12", cy: "12", r: "8.5" })
     }
   );
 }
 
 function MetricsCardLoading({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center justify-center", className), children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "md", color: tokens.Colors.neutral1 }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center justify-center", className), children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "md", variant: "pulse", className: "text-neutral1" }) });
 }
 
 function MetricsCardNoData({ message = "No data yet", className }) {
@@ -8565,7 +8585,7 @@ function MetricsKpiCardLabel({ children, className }) {
 }
 
 function MetricsKpiCardLoading({ className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm", className), children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "md", color: tokens.Colors.neutral1 }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm", className), children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "md", variant: "pulse", className: "text-neutral1" }) });
 }
 
 function MetricsKpiCardNoChange({
@@ -8951,7 +8971,7 @@ function PickMultiPanel({ field, tokens, onChange }) {
       }
     ),
     field.isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-2 py-1.5 text-ui-sm text-neutral3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "sm", className: "w-3 h-3", color: "var(--neutral3)" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "sm", className: "size-3 text-neutral3" }),
       "Loading options…"
     ] }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1.5 text-ui-sm text-neutral3", children: field.emptyText ?? "No option found." }) : field.multi ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-[80dvh] overflow-auto", children: filteredOptions.map((option) => {
       const checked = selectedValues.includes(option.value);
@@ -14611,6 +14631,22 @@ CardContent.displayName = "CardContent";
 const CardFooter = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex items-center p-4 pt-0", className), ...props }));
 CardFooter.displayName = "CardFooter";
 
+function DataPanelSectionHeading({ icon, className, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-1.5 text-ui-sm uppercase tracking-widest text-neutral2 [&>svg]:size-3.5",
+        className
+      ),
+      children: [
+        icon,
+        children
+      ]
+    }
+  );
+}
+
 const setSearchQuery = state.StateEffect.define();
 const searchHighlightMark = view.Decoration.mark({ class: "cm-search-match" });
 const searchHighlightField = state.StateField.define({
@@ -14801,19 +14837,7 @@ function DataCodeSection({
   if (!codeStr || codeStr === "null") return null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: cn(
-            "flex items-center gap-1.5 text-ui-sm uppercase tracking-widest text-neutral2",
-            "[&>svg]:size-3.5"
-          ),
-          children: [
-            icon,
-            title
-          ]
-        }
-      ),
+      /* @__PURE__ */ jsxRuntime.jsx(DataPanelSectionHeading, { icon, children: title }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
         !usePlainTextView && /* @__PURE__ */ jsxRuntime.jsx(
           SearchFieldBlock,
@@ -15103,7 +15127,7 @@ const DataDetailsPanelKeyValueList = Object.assign(Root, {
 
 function DataDetailsPanelLoadingData({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 px-4 py-6 text-ui-sm text-neutral3", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "sm", variant: "pulse", className: "text-neutral3" }),
     " ",
     children ?? "Loading..."
   ] });
@@ -15250,7 +15274,13 @@ 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 min-h-14", className),
+      className: cn(
+        "flex items-center justify-between gap-2 mx-4 py-3 min-h-14",
+        // Bottom border only when something follows the header (i.e. the panel is expanded).
+        // When the panel is collapsed and the header is the only child, the border auto-hides.
+        "not-last:border-b not-last:border-border1",
+        className
+      ),
       children
     }
   );
@@ -15262,7 +15292,7 @@ function DataPanelHeading({ className, children }) {
 
 function DataPanelLoadingData({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 px-4 py-6 text-ui-sm text-neutral2 min-h-32", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "sm", color: tokens.Colors.neutral1 }),
+    /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "sm", variant: "pulse", className: "text-neutral1" }),
     " ",
     children ?? "Loading..."
   ] });
@@ -15305,7 +15335,8 @@ const DataPanel = Object.assign(DataPanelRoot, {
   LoadingData: DataPanelLoadingData,
   NoData: DataPanelNoData,
   Content: DataPanelContent,
-  CodeSection: DataCodeSection
+  CodeSection: DataCodeSection,
+  SectionHeading: DataPanelSectionHeading
 });
 
 const DATE_PRESETS$1 = [
@@ -16092,6 +16123,22 @@ function is403ForbiddenError(error) {
   }
   return false;
 }
+function is404NotFoundError(error) {
+  if (!error || typeof error !== "object") return false;
+  if ("status" in error && error.status === 404) {
+    return true;
+  }
+  if ("statusCode" in error && error.statusCode === 404) {
+    return true;
+  }
+  if ("message" in error) {
+    const message = error.message;
+    if (typeof message === "string") {
+      return /\bstatus:\s*404\b/.test(message);
+    }
+  }
+  return false;
+}
 function isBranchesNotSupportedError(error) {
   if (!error || typeof error !== "object" || !("message" in error)) return false;
   const message = error.message;
@@ -20106,7 +20153,8 @@ function TraceDataPanelView({
   timelineChartWidth = "default",
   LinkComponent,
   traceHref,
-  anchorSpanId
+  anchorSpanId,
+  showUnavailableFeaturesMsg = true
 }) {
   const isOnTracePage = placement === "trace-page";
   const [internalCollapsed, setInternalCollapsed] = React.useState(false);
@@ -20171,7 +20219,7 @@ function TraceDataPanelView({
             children: collapsed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDownIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsDownUpIcon, {})
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        (onPrevious || onNext) && /* @__PURE__ */ jsxRuntime.jsx(
           DataPanel.NextPrevNav,
           {
             onPrevious,
@@ -20206,7 +20254,7 @@ function TraceDataPanelView({
           "Save as Dataset Item"
         ] })
       ] }),
-      !isOnTracePage && !onEvaluateTrace && !onSaveAsDatasetItem && /* @__PURE__ */ jsxRuntime.jsx(Notice, { variant: "info", className: "mb-6", children: /* @__PURE__ */ jsxRuntime.jsx(Notice.Message, { children: "Evaluating traces and saving them as dataset items is available in Mastra Studio (local or deployed)." }) }),
+      !isOnTracePage && !onEvaluateTrace && !onSaveAsDatasetItem && showUnavailableFeaturesMsg && /* @__PURE__ */ jsxRuntime.jsx(Notice, { variant: "info", className: "mb-6", children: /* @__PURE__ */ jsxRuntime.jsx(Notice.Message, { children: "Evaluating traces and saving them as dataset items is available in Mastra Studio (local or deployed)." }) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         TraceTimeline,
         {
@@ -22866,6 +22914,7 @@ exports.inputOutlineAndFocusStyle = inputOutlineAndFocusStyle;
 exports.inputSurfaceAndFocusStyle = inputSurfaceAndFocusStyle;
 exports.is401UnauthorizedError = is401UnauthorizedError;
 exports.is403ForbiddenError = is403ForbiddenError;
+exports.is404NotFoundError = is404NotFoundError;
 exports.isBranchesNotSupportedError = isBranchesNotSupportedError;
 exports.isNonRetryableError = isNonRetryableError;
 exports.isObjectEmpty = isObjectEmpty;