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

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @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

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",
@@ -15654,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"
+              )
+            }
+          )
+        }
       )
     }
   );