@mastra/playground-ui 27.0.0-alpha.5 → 27.0.0-alpha.7

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @mastra/playground-ui
 
+## 27.0.0-alpha.7
+
+### Patch Changes
+
+- Refined Combobox and Select trigger interactions with an active state and fixed value truncation when a leading badge is rendered. Refreshed PanelSeparator with a clearer hover/active affordance, an enlarged hit area, and a focus-visible accent. Removed the default `bg-surface2` background from `Threads` so consumers can control the surface color. ([#16269](https://github.com/mastra-ai/mastra/pull/16269))
+
+- Updated dependencies [[`6742347`](https://github.com/mastra-ai/mastra/commit/6742347d71955d7639adc9ddf6ff8282de7ee3ba), [`7b0ad1f`](https://github.com/mastra-ai/mastra/commit/7b0ad1f5c53dc118c6da12ae82ae2587037dc2b8), [`62666c3`](https://github.com/mastra-ai/mastra/commit/62666c367eaeac3941ead454b1d38810cc855721), [`4af2160`](https://github.com/mastra-ai/mastra/commit/4af2160322f4718cac421930cce85641e9512389), [`136c959`](https://github.com/mastra-ai/mastra/commit/136c9592fb0eeb0cd212f28629d8a29b7557a2fc), [`4df7cc7`](https://github.com/mastra-ai/mastra/commit/4df7cc79342fd065fe7fdeef93c094db14b12bcd), [`284b0d7`](https://github.com/mastra-ai/mastra/commit/284b0d78d0edb306413447e5268007491006937c), [`aca3121`](https://github.com/mastra-ai/mastra/commit/aca31211233dac25459f140ea4fcfb3a5af64c18), [`9cdf38e`](https://github.com/mastra-ai/mastra/commit/9cdf38e58506e1109c8b38f97cd7770978a4218e), [`990851e`](https://github.com/mastra-ai/mastra/commit/990851edcb0e30be5c2c18b6532f1a876cc2d335), [`6068a6c`](https://github.com/mastra-ai/mastra/commit/6068a6c42950fad3ebfc92346417896ba60803d2), [`00106be`](https://github.com/mastra-ai/mastra/commit/00106bede59b81e5b0e9cd6aad8d3b5dbc336387), [`e2a079c`](https://github.com/mastra-ai/mastra/commit/e2a079cc3755b1895f7bd5dc36e9be81b11c7c22), [`534a456`](https://github.com/mastra-ai/mastra/commit/534a456a25e4df1e5407e7e632f4cb3b1fa14f9d), [`36bae07`](https://github.com/mastra-ai/mastra/commit/36bae07c0e70b1b3006f2fd20830e8883dcbd066)]:
+  - @mastra/core@1.33.0-alpha.7
+  - @mastra/client-js@1.18.0-alpha.7
+  - @mastra/react@0.2.36-alpha.7
+
+## 27.0.0-alpha.6
+
+### Patch Changes
+
+- Fixed Studio streaming render behavior for interleaved reasoning and improved chat autoscroll during rapid output. ([#16331](https://github.com/mastra-ai/mastra/pull/16331))
+
+- Updated dependencies [[`b560d6f`](https://github.com/mastra-ai/mastra/commit/b560d6f88b9b904b15c10f75c949eb145bc27684), [`f176145`](https://github.com/mastra-ai/mastra/commit/f1761458eaa602f59c5499bd0855ae7a5fd9baf3), [`d416efd`](https://github.com/mastra-ai/mastra/commit/d416efdee26c1755328e21cc62584f8566e21432), [`36b3bbf`](https://github.com/mastra-ai/mastra/commit/36b3bbf5a8d59f7e23d47e29340e76c681b4929c), [`b275631`](https://github.com/mastra-ai/mastra/commit/b275631dc10541a482b2e2d4a3e3cfa843bd5fa1)]:
+  - @mastra/core@1.33.0-alpha.6
+  - @mastra/react@0.2.36-alpha.6
+  - @mastra/client-js@1.18.0-alpha.6
+
 ## 27.0.0-alpha.5
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -3598,7 +3598,7 @@ const focusRing = {
 };
 
 const Threads = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "bg-surface2 min-h-full overflow-hidden", children });
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "min-h-full overflow-hidden", children });
 };
 const ThreadLink = ({ children, as: Component = "a", href, className, prefetch, to }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -6078,13 +6078,12 @@ CollapsibleContent.displayName = CollapsiblePrimitive__namespace.CollapsibleCont
 const comboboxStyles = {
   /** Root wrapper */
   root: "flex flex-col gap-1.5",
-  /** Trigger — form input look (rounded-lg, single border, subtle hover/open state).
-   *  Sized to mirror SelectTrigger: bg-transparent, no pill, no accent ring on focus. */
+  /** Trigger — form input look, sized to mirror SelectTrigger. */
   trigger: cn(
     "inline-flex w-full min-w-32 select-none items-center justify-between gap-1.5 whitespace-nowrap",
     "rounded-lg border border-border1 bg-transparent px-2.5 text-ui-smd leading-ui-sm text-neutral4",
     "outline-none transition-colors duration-normal ease-out-custom",
-    "hover:bg-surface3 hover:text-neutral6 hover:border-border2",
+    "hover:bg-surface3 hover:text-neutral6 hover:border-border2 active:bg-surface4",
     "focus:outline-none focus-visible:outline-none focus-visible:border-border2",
     "data-[popup-open]:bg-surface3 data-[popup-open]:text-neutral6 data-[popup-open]:border-border2",
     "disabled:cursor-not-allowed disabled:opacity-50"
@@ -6199,9 +6198,9 @@ function Combobox({
                 className
               ),
               children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2 min-w-0 flex-1", children: [
                   selectedOption?.start,
-                  /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Value, { placeholder })
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Value, { placeholder }) })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: comboboxStyles.chevron })
               ]
@@ -6498,7 +6497,7 @@ const SelectTrigger = React__namespace.forwardRef(
           formElementSizes[size],
           "rounded-lg border border-border1 bg-transparent px-2.5 text-ui-smd leading-ui-sm text-neutral4",
           "outline-none transition-colors duration-normal ease-out-custom",
-          "hover:bg-surface3 hover:text-neutral6 hover:border-border2",
+          "hover:bg-surface3 hover:text-neutral6 hover:border-border2 active:bg-surface4",
           "focus:outline-none focus-visible:outline-none focus-visible:border-border2",
           "data-[state=open]:bg-surface3 data-[state=open]:text-neutral6 data-[state=open]:border-border2",
           "data-[placeholder]:text-neutral3",
@@ -8230,18 +8229,30 @@ function PickMultiMenuItem({ field, tokens, onChange, open, onToggle, onClose })
   );
 }
 
+const SCROLL_END_THRESHOLD = 8;
 const useAutoscroll = (ref, { enabled = true }) => {
   const shouldScrollRef = React.useRef(enabled);
+  const scrollFrameRef = React.useRef(null);
+  const userScrollIntentRef = React.useRef(false);
+  const userScrollIntentTimeoutRef = React.useRef(null);
   React.useEffect(() => {
     if (!enabled) return;
     if (!ref?.current) return;
     const area = ref.current;
-    const observer = new MutationObserver(() => {
-      if (shouldScrollRef.current) {
-        area.scrollTo({ top: area.scrollHeight, behavior: "smooth" });
+    const scrollToEnd = () => {
+      if (!shouldScrollRef.current) return;
+      if (scrollFrameRef.current !== null) {
+        cancelAnimationFrame(scrollFrameRef.current);
       }
-    });
-    observer.observe(area, {
+      scrollFrameRef.current = requestAnimationFrame(() => {
+        if (shouldScrollRef.current) {
+          area.scrollTop = area.scrollHeight;
+        }
+        scrollFrameRef.current = null;
+      });
+    };
+    const mutationObserver = new MutationObserver(scrollToEnd);
+    mutationObserver.observe(area, {
       childList: true,
       // observe direct children changes
       subtree: true,
@@ -8249,21 +8260,73 @@ const useAutoscroll = (ref, { enabled = true }) => {
       characterData: true
       // observe text content changes
     });
+    const resizeObserver = new ResizeObserver(scrollToEnd);
+    resizeObserver.observe(area);
+    const cancelPendingScroll = () => {
+      if (scrollFrameRef.current !== null) {
+        cancelAnimationFrame(scrollFrameRef.current);
+        scrollFrameRef.current = null;
+      }
+    };
+    const stopFollowing = () => {
+      shouldScrollRef.current = false;
+      cancelPendingScroll();
+    };
+    const registerUserScrollIntent = () => {
+      userScrollIntentRef.current = true;
+      if (userScrollIntentTimeoutRef.current !== null) {
+        window.clearTimeout(userScrollIntentTimeoutRef.current);
+      }
+      userScrollIntentTimeoutRef.current = window.setTimeout(() => {
+        userScrollIntentRef.current = false;
+        userScrollIntentTimeoutRef.current = null;
+      }, 250);
+    };
+    const handleWheel = (event) => {
+      registerUserScrollIntent();
+      if (event.deltaY < 0) {
+        stopFollowing();
+      }
+    };
+    const handleKeyDown = (event) => {
+      registerUserScrollIntent();
+      if (["ArrowUp", "PageUp", "Home"].includes(event.key)) {
+        stopFollowing();
+      }
+    };
     const handleScroll = (e) => {
       const scrollElement = e.target;
       const currentPosition = scrollElement.scrollTop + scrollElement.clientHeight;
       const totalHeight = scrollElement.scrollHeight;
-      const isAtEnd = currentPosition >= totalHeight - 1;
+      const isAtEnd = currentPosition >= totalHeight - SCROLL_END_THRESHOLD;
       if (isAtEnd) {
         shouldScrollRef.current = true;
-      } else {
+        return;
+      }
+      if (userScrollIntentRef.current) {
         shouldScrollRef.current = false;
+        cancelPendingScroll();
       }
     };
+    area.addEventListener("wheel", handleWheel, { passive: true });
+    area.addEventListener("touchmove", registerUserScrollIntent, { passive: true });
+    area.addEventListener("pointerdown", registerUserScrollIntent);
+    area.addEventListener("keydown", handleKeyDown);
     area.addEventListener("scroll", handleScroll);
+    scrollToEnd();
     return () => {
+      area.removeEventListener("wheel", handleWheel);
+      area.removeEventListener("touchmove", registerUserScrollIntent);
+      area.removeEventListener("pointerdown", registerUserScrollIntent);
+      area.removeEventListener("keydown", handleKeyDown);
       area.removeEventListener("scroll", handleScroll);
-      observer.disconnect();
+      mutationObserver.disconnect();
+      resizeObserver.disconnect();
+      cancelPendingScroll();
+      if (userScrollIntentTimeoutRef.current !== null) {
+        window.clearTimeout(userScrollIntentTimeoutRef.current);
+        userScrollIntentTimeoutRef.current = null;
+      }
     };
   }, [enabled, ref]);
 };
@@ -15590,10 +15653,31 @@ const PanelSeparator = () => {
     reactResizablePanels.Separator,
     {
       className: cn(
-        "w-1.5 bg-surface3",
-        "data-[separator='hover']:bg-surface4!",
-        "data-[separator='active']:bg-surface5!",
-        "focus:outline-hidden"
+        "group/separator relative w-0 bg-transparent z-10",
+        "focus:outline-hidden focus-visible:outline-hidden"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: cn(
+            "absolute inset-y-0 -left-1 -right-1 flex items-center justify-center",
+            "cursor-col-resize touch-none"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "block h-full w-px bg-border1 pointer-events-none",
+                "transition-[width,background-color] duration-150 ease-out motion-reduce:transition-none",
+                "group-hover/separator:w-0.5 group-hover/separator:bg-surface5",
+                "group-data-[separator='hover']/separator:w-0.5 group-data-[separator='hover']/separator:bg-surface5",
+                "group-data-[separator='active']/separator:w-0.5 group-data-[separator='active']/separator:bg-accent1",
+                "group-focus-visible/separator:w-0.5 group-focus-visible/separator:bg-accent1"
+              )
+            }
+          )
+        }
       )
     }
   );