@mastra/playground-ui 22.2.0-alpha.8 → 23.0.0-alpha.10

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # @mastra/playground-ui
 
+## 23.0.0-alpha.10
+
+### Minor Changes
+
+- Added `ErrorBoundary` component to catch and display runtime errors in the studio. Wraps routes in the local playground so a crash on one page (e.g. an agent editor referencing an unresolved workspace skill) surfaces a friendly recovery UI with **Try again** (in-place React reset), **Reload page** (full browser refresh), and **Report issue** (opens the Mastra GitHub issues page in a new tab) actions, plus a collapsible stack trace — instead of a blank screen. ([#15561](https://github.com/mastra-ai/mastra/pull/15561))
+
+  The fallback is spatially aware: it fills its parent and the icon, heading, and body text scale up on wider containers via Tailwind container queries. Scope the boundary to a single widget to keep the rest of the UI interactive while one panel fails.
+
+  **Usage**
+
+  ```tsx
+  import { ErrorBoundary } from '@mastra/playground-ui';
+  import { useLocation } from 'react-router';
+
+  // Route-level: wrap the router outlet, reset when the path changes
+  function Layout({ children }) {
+    const { pathname } = useLocation();
+    return <ErrorBoundary resetKeys={[pathname]}>{children}</ErrorBoundary>;
+  }
+
+  // Scoped: contain the crash to one panel, leave the rest of the tree alone
+  <ErrorBoundary variant="inline" title="The editor failed to render">
+    <AgentEditor />
+  </ErrorBoundary>;
+  ```
+
+  Props: `fallback` (node or render prop with `{ error, errorInfo, reset }`), `onError` for reporting, `resetKeys` for automatic reset, `variant` (`'section'` — fills available space, default; `'inline'` — stays compact), and `title` / `description` overrides.
+
+### Patch Changes
+
+- Align BrandLoader geometry with the Mastra logo: match disk positions to the logo path, introduce per-size stroke widths and bubble radii (sm/md/lg), and rebalance the gooey filter for rounder ridge↔disk fillets. Shift the size scale so sm stays, md is now w-8, lg is now w-10, and the old w-16 size is removed. ([#15531](https://github.com/mastra-ai/mastra/pull/15531))
+
+- Updated dependencies [[`aba393e`](https://github.com/mastra-ai/mastra/commit/aba393e2da7390c69b80e516a4f153cda6f09376), [`0a5fa1d`](https://github.com/mastra-ai/mastra/commit/0a5fa1d3cb0583889d06687155f26fd7d2edc76c), [`ea43e64`](https://github.com/mastra-ai/mastra/commit/ea43e646dd95d507694b6112b0bf1df22ad552b2), [`00d1b16`](https://github.com/mastra-ai/mastra/commit/00d1b16b401199cb294fa23f43336547db4dca9b), [`af8a57e`](https://github.com/mastra-ai/mastra/commit/af8a57ed9ba9685ad8601d5b71ae3706da6222f9), [`be49755`](https://github.com/mastra-ai/mastra/commit/be4975575e63b38f63af588ea8ce6f4cf5b8ff2c)]:
+  - @mastra/core@1.26.0-alpha.10
+  - @mastra/client-js@1.14.0-alpha.10
+  - @mastra/react@0.2.27-alpha.10
+
+## 22.2.0-alpha.9
+
+### Minor Changes
+
+- Added new Logo component to the playground-ui design system. Supports two sizes (sm, md), uses currentColor for theming, and includes an optional outline-on-hover animation that respects prefers-reduced-motion. ([#15513](https://github.com/mastra-ai/mastra/pull/15513))
+
+### Patch Changes
+
+- dependencies updates: ([#15525](https://github.com/mastra-ai/mastra/pull/15525))
+  - Updated dependency [`prettier@^3.8.3` ↗︎](https://www.npmjs.com/package/prettier/v/3.8.3) (from `^3.8.1`, in `dependencies`)
+- Updated dependencies [[`16e34ca`](https://github.com/mastra-ai/mastra/commit/16e34caa98b9a114b17a6125e4e3fd87f169d0d0)]:
+  - @mastra/core@1.26.0-alpha.9
+  - @mastra/client-js@1.13.5-alpha.9
+  - @mastra/react@0.2.27-alpha.9
+
 ## 22.2.0-alpha.8
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -3386,7 +3386,7 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
-const sizeClasses$5 = {
+const sizeClasses$6 = {
   sm: `${formElementSizes.sm} text-ui-sm px-[.75em]`,
   md: `${formElementSizes.md} text-ui-md px-[.75em]`,
   default: `${formElementSizes.default} text-ui-md px-[.85em] `,
@@ -3419,7 +3419,7 @@ function resolveVariant(variant) {
 function buttonVariants(options) {
   const variant = resolveVariant(options?.variant || "default");
   const size = options?.size || "default";
-  return cn(sharedStyles, sizeClasses$5[size], variantClasses$4[variant], options?.iconOnly && "[&>svg]:opacity-75");
+  return cn(sharedStyles, sizeClasses$6[size], variantClasses$4[variant], options?.iconOnly && "[&>svg]:opacity-75");
 }
 function flattenChildren(children) {
   const result = [];
@@ -4797,7 +4797,7 @@ const AlertDescription = ({ children, as: As = "p" }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: As, variant: "ui-sm", children });
 };
 
-const sizeClasses$4 = {
+const sizeClasses$5 = {
   sm: "h-avatar-sm w-avatar-sm",
   md: "h-avatar-md w-avatar-md",
   lg: "h-avatar-lg w-avatar-lg"
@@ -4807,7 +4807,7 @@ const Avatar = ({ src, name, size = "sm", interactive = false }) => {
     "div",
     {
       className: cn(
-        sizeClasses$4[size],
+        sizeClasses$5[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"
@@ -5622,6 +5622,59 @@ 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$4 = {
+  sm: "w-6",
+  md: "w-10"
+};
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || !window.matchMedia) return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function Logo({ className, size = "md", animateOnHover = false, "aria-label": ariaLabel = "Mastra" }) {
+  const reactId = React.useId();
+  const clipId = `logo-clip-${reactId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const [playing, setPlaying] = React.useState(false);
+  const handleMouseEnter = animateOnHover ? () => {
+    if (prefersReducedMotion()) return;
+    setPlaying(true);
+  } : void 0;
+  const handleAnimationEnd = animateOnHover && playing ? (e) => {
+    if (e.animationName !== "logo-stroke-cycle") return;
+    setPlaying(false);
+  } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "img",
+      "aria-label": ariaLabel,
+      onMouseEnter: handleMouseEnter,
+      onAnimationEnd: handleAnimationEnd,
+      className: cn(
+        "logo inline-block text-neutral6",
+        sizeClasses$4[size],
+        animateOnHover && playing && "logo-animate-on-hover",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 34 21",
+          fill: "none",
+          className: "logo-svg block w-full h-auto",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: clipId, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: PATH_D }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { className: "logo-fill", d: PATH_D }),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { className: "logo-stroke", d: PATH_D, clipPath: `url(#${clipId})` })
+          ]
+        }
+      )
+    }
+  );
+}
+
 const rowSize = {
   default: "[&>tbody>tr]:h-table-row",
   small: "[&>tbody>tr]:h-table-row-small"
@@ -7663,43 +7716,46 @@ Slider.displayName = SliderPrimitive__namespace.Root.displayName;
 
 const sizeClasses$1 = {
   sm: "w-6",
-  md: "w-10",
-  lg: "w-16"
+  md: "w-8",
+  lg: "w-10"
+};
+const strokeBySize = {
+  sm: 2.2,
+  md: 2.5,
+  lg: 2.9
+};
+const bubbleBySize = {
+  sm: 4.3,
+  md: 4.4,
+  lg: 4.498
 };
 function BrandLoader({ className, size = "md", "aria-label": ariaLabel = "Loading" }) {
   const reactId = React.useId();
   const filterId = `brand-loader-${reactId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const r = bubbleBySize[size];
   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" })
-            ] })
-          ]
-        }
-      )
+      style: { ["--brand-loader-stroke"]: strokeBySize[size] },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 34 21", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("filter", { id: filterId, x: "-5%", y: "-5%", width: "110%", height: "110%", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "0.9" }),
+          /* @__PURE__ */ jsxRuntime.jsx("feColorMatrix", { values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 11 -4.3" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("g", { filter: `url(#${filterId})`, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("line", { className: "brand-loader-ln23", x1: "10.387", y1: "4.498", x2: "16.899", y2: "16.192" }),
+          /* @__PURE__ */ jsxRuntime.jsx("line", { className: "brand-loader-ln34", x1: "16.899", y1: "16.192", x2: "22.815", y2: "4.56" }),
+          /* @__PURE__ */ jsxRuntime.jsx("line", { className: "brand-loader-ln45", x1: "22.815", y1: "4.56", x2: "28.57", y2: "16.192" }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "brand-loader-b1", cx: "4.498", cy: "16.192", r }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "brand-loader-b2", cx: "10.387", cy: "4.498", r }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "brand-loader-b3", cx: "16.899", cy: "16.192", r }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "brand-loader-b4", cx: "22.815", cy: "4.56", r }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "brand-loader-b5", cx: "28.57", cy: "16.192", r })
+        ] })
+      ] })
     }
   );
 }
@@ -11950,6 +12006,152 @@ const ListSearch = ({
   );
 };
 
+const INITIAL_STATE = { error: null, errorInfo: null };
+function keysChanged(prev, next) {
+  if (prev === next) return false;
+  if (!prev || !next) return true;
+  if (prev.length !== next.length) return true;
+  for (let i = 0; i < prev.length; i++) {
+    if (!Object.is(prev[i], next[i])) return true;
+  }
+  return false;
+}
+class ErrorBoundary extends React__namespace.Component {
+  state = INITIAL_STATE;
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, errorInfo) {
+    this.setState({ errorInfo });
+    if (this.props.onError) {
+      try {
+        this.props.onError(error, errorInfo);
+      } catch (handlerError) {
+        if (typeof console !== "undefined") {
+          console.error("[ErrorBoundary] onError handler threw:", handlerError);
+        }
+      }
+    }
+    if (typeof console !== "undefined") {
+      console.error("[ErrorBoundary] Uncaught error:", error, errorInfo);
+    }
+  }
+  componentDidUpdate(prevProps) {
+    if (this.state.error && keysChanged(prevProps.resetKeys, this.props.resetKeys)) {
+      this.reset();
+    }
+  }
+  reset = () => {
+    this.setState(INITIAL_STATE);
+  };
+  render() {
+    const { error, errorInfo } = this.state;
+    const { children, fallback, title, description, variant, className } = this.props;
+    if (!error) return children;
+    if (typeof fallback === "function") {
+      return fallback({ error, errorInfo, reset: this.reset });
+    }
+    if (fallback !== void 0) return fallback;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DefaultErrorFallback,
+      {
+        error,
+        errorInfo,
+        reset: this.reset,
+        title,
+        description,
+        variant: variant ?? "section",
+        className
+      }
+    );
+  }
+}
+function DefaultErrorFallback({
+  error,
+  errorInfo,
+  reset,
+  title,
+  description,
+  variant,
+  className
+}) {
+  const stack = errorInfo?.componentStack ?? error.stack ?? "";
+  const isInline = variant === "inline";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "alert",
+      className: cn(
+        "@container flex w-full items-center justify-center",
+        isInline ? "py-6 px-4" : "h-full min-h-[240px] flex-1 py-10 px-6",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "flex flex-col items-center text-center",
+            isInline ? "gap-3 max-w-md" : "gap-4 max-w-2xl @md:gap-5 @lg:gap-6"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "rounded-full bg-accent2/10 text-accent2 flex items-center justify-center",
+                  isInline ? "h-10 w-10 [&>svg]:h-5 [&>svg]:w-5" : "h-14 w-14 [&>svg]:h-7 [&>svg]:w-7 @md:h-16 @md:w-16 @md:[&>svg]:h-8 @md:[&>svg]:w-8 @lg:h-20 @lg:w-20 @lg:[&>svg]:h-10 @lg:[&>svg]:w-10"
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, {})
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "h3",
+              {
+                className: cn(
+                  "font-medium text-neutral6",
+                  isInline ? "text-ui-md" : "text-ui-lg @md:text-header-md @lg:text-header-lg"
+                ),
+                children: title ?? "Something went wrong"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-neutral3", isInline ? "text-ui-sm" : "text-ui-md @lg:text-ui-lg"), children: description ?? "An unexpected error occurred while rendering this part of the page." }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "font-mono text-neutral4 break-words rounded-md bg-surface3 px-3 py-2",
+                  isInline ? "text-ui-xs" : "text-ui-sm"
+                ),
+                children: error.message
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-wrap items-center justify-center gap-2", isInline ? "mt-1" : "mt-2"), children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", size: isInline ? "sm" : "default", onClick: reset, children: "Try again" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "default", size: isInline ? "sm" : "default", onClick: () => window.location.reload(), children: "Reload page" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  as: "a",
+                  variant: "default",
+                  size: isInline ? "sm" : "default",
+                  href: "https://github.com/mastra-ai/mastra/issues",
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  children: "Report issue"
+                }
+              )
+            ] }),
+            stack ? /* @__PURE__ */ jsxRuntime.jsxs("details", { className: cn("w-full text-left", isInline ? "mt-1" : "mt-2"), children: [
+              /* @__PURE__ */ jsxRuntime.jsx("summary", { className: "cursor-pointer text-ui-sm text-neutral3 hover:text-neutral4", children: "Show error details" }),
+              /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "mt-2 max-h-64 overflow-auto rounded-md bg-surface3 p-3 text-ui-xs text-neutral4 whitespace-pre-wrap break-words", children: stack })
+            ] }) : null
+          ]
+        }
+      )
+    }
+  );
+}
+
 function ErrorState({ title, message }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[30vh]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center text-center py-10 px-6", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleXIcon, { className: "h-8 w-8 text-red-900" }) }),
@@ -14303,6 +14505,7 @@ exports.EntryCell = EntryCell;
 exports.EntryList = EntryList;
 exports.EntryListSkeleton = EntryListSkeleton;
 exports.EnvIcon = EnvIcon;
+exports.ErrorBoundary = ErrorBoundary;
 exports.ErrorState = ErrorState;
 exports.Field = Field;
 exports.FieldBlock = FieldBlock;
@@ -14340,6 +14543,7 @@ exports.KeyValueList = KeyValueList;
 exports.Label = Label;
 exports.LatencyIcon = LatencyIcon;
 exports.ListSearch = ListSearch;
+exports.Logo = Logo;
 exports.LogoWithoutText = LogoWithoutText;
 exports.LogsDataList = LogsDataList;
 exports.LogsDataListSkeleton = DataListSkeleton;