@mastra/playground-ui 30.0.2-alpha.2 → 31.0.0-alpha.3

package/CHANGELOG.md

@@ -1,5 +1,79 @@
 # @mastra/playground-ui
 
+## 31.0.0-alpha.3
+
+### Minor Changes
+
+- Made `ButtonsGroup` compose joined controls (searchbar + dropdown pills, split buttons, steppers) cleanly, and improved `InputGroup` so it drops straight into one. ([#17259](https://github.com/mastra-ai/mastra/pull/17259))
+  - `ButtonsGroup` with `spacing="close"` fuses outline, filled and `Select` segments into one pill with a single clean divider, a complete focus ring (no missing side), and no consumer width classes.
+  - `InputGroup` fills a flex row on its own, matches a same-size sibling height, and propagates size via `data-size` (no React context) — so an icon + input segment composes inside a `ButtonsGroup` pill with no layout classes.
+
+  Use `InputGroup` (icon as an `InputGroupAddon`, optional clear button as an `InputGroupButton`) to build an icon input — it owns the box, focus, hover and error states on the focusable wrapper:
+
+  ```tsx
+  import {
+    ButtonsGroup,
+    InputGroup,
+    InputGroupAddon,
+    InputGroupInput,
+    Select,
+    SelectTrigger,
+    SelectValue,
+    SelectContent,
+    SelectItem,
+  } from '@mastra/playground-ui';
+
+  <ButtonsGroup spacing="close">
+    <InputGroup variant="outline">
+      <InputGroupAddon align="inline-start">
+        <SearchIcon />
+      </InputGroupAddon>
+      <InputGroupInput placeholder="Search projects..." />
+    </InputGroup>
+    <Select value={sort} onValueChange={setSort}>
+      <SelectTrigger className="rounded-full">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent align="end">{/* options */}</SelectContent>
+    </Select>
+  </ButtonsGroup>;
+  ```
+
+- Refined the focus state of form inputs in `@mastra/playground-ui`. Applies to `Input`, `InputGroup`, `Searchbar`, and `Textarea`. ([#17259](https://github.com/mastra-ai/mastra/pull/17259))
+  - Removed the green border and glow that appeared on focus.
+  - On focus, the field shows a subtle background shift and brightens its border to a neutral tone, so the focused field stays clearly visible on any underlying surface.
+  - Made single-line inputs fully rounded to match the design system. Multi-line surfaces (`Textarea`, and `InputGroup` with a block-style addon) keep a softer `rounded-xl` corner.
+  - Added `filled` and `outline` variants for consumers that need to choose between the new surface treatment and a quieter border-only treatment.
+  - The `unstyled` variant of `Input` and `Textarea` no longer leaks the browser default focus outline.
+
+  `Input`, `Textarea`, and `InputGroup` default to the `filled` surface. `Searchbar` and `ListSearch` default to the `outline` (transparent) treatment. For `Searchbar` this matches its previous transparent look. `ListSearch` previously rendered a filled (`bg-surface2`), `rounded-lg` box, so its search fields across the list pages now read as transparent, fully-rounded pills — pass `variant="filled"` to keep them on a filled surface:
+
+  ```tsx
+  import { Input, InputGroup, InputGroupAddon, InputGroupInput, Searchbar } from '@mastra/playground-ui';
+
+  <Input placeholder="Name" />
+  <Input variant="outline" placeholder="Name" />
+
+  <InputGroup variant="outline">
+    <InputGroupAddon>
+      <SearchIcon />
+    </InputGroupAddon>
+    <InputGroupInput placeholder="Email" />
+  </InputGroup>
+
+  <Searchbar label="Search agents" placeholder="Search agents..." onSearch={handleSearch} />
+  <Searchbar variant="filled" label="Search agents" placeholder="Search agents..." onSearch={handleSearch} />
+  ```
+
+### Patch Changes
+
+- Fixed syntax highlighting in Studio code blocks. Shiki tokens now render with per-token colors (keywords, strings, identifiers) instead of flat monochrome text, and Code Mode `execute_typescript` programs display as a formatted, highlighted TypeScript block instead of a one-line JSON string. ([#17324](https://github.com/mastra-ai/mastra/pull/17324))
+
+- Updated dependencies [[`8ace89d`](https://github.com/mastra-ai/mastra/commit/8ace89df77f762e622d3b9f7f65ad7524350d050), [`fa63872`](https://github.com/mastra-ai/mastra/commit/fa6387280954e6b667bec5714b55ba082bc627ff), [`f07b646`](https://github.com/mastra-ai/mastra/commit/f07b64604ab7d25391179790b7fd4823df9e2dff), [`d8838ae`](https://github.com/mastra-ai/mastra/commit/d8838ae80b69780361693d27098f7f6684af12fe), [`40f9297`](https://github.com/mastra-ai/mastra/commit/40f9297003b921c62373d3e8d3a4bda76c9f6de3), [`0f0d1ba`](https://github.com/mastra-ai/mastra/commit/0f0d1ba67bfcb2204e571401662f1eceefc03357), [`8c31bcd`](https://github.com/mastra-ai/mastra/commit/8c31bcdb00e597880d5939b1b7d7566fbe5dacae), [`95b14cd`](https://github.com/mastra-ai/mastra/commit/95b14cdd820e86d97ac05fe568424c513a252e31), [`aa36be2`](https://github.com/mastra-ai/mastra/commit/aa36be23aa513b7dc53cb8ca16b7fab8f20e43ad), [`212c635`](https://github.com/mastra-ai/mastra/commit/212c635203e61d036ab41db8ff86c3893dc795b3), [`d8838ae`](https://github.com/mastra-ai/mastra/commit/d8838ae80b69780361693d27098f7f6684af12fe), [`9aa5a73`](https://github.com/mastra-ai/mastra/commit/9aa5a73e7e110f6e9365eec69364a33d5f03bb56), [`f73c789`](https://github.com/mastra-ai/mastra/commit/f73c789e8ef21561580395d2c410119cab5848c8), [`8bd16da`](https://github.com/mastra-ai/mastra/commit/8bd16da73a4cb874d739373643dbd6a6e7f88684), [`c8630f8`](https://github.com/mastra-ai/mastra/commit/c8630f80d4f40cb5d22e60ab162b618b1907167a), [`47f71dc`](https://github.com/mastra-ai/mastra/commit/47f71dc6fbcbd12d71e21a979e676e20a02bd77d), [`50ceae2`](https://github.com/mastra-ai/mastra/commit/50ceae270878e2f8fb2b2c6c2faab09df0007c8a), [`8cdde58`](https://github.com/mastra-ai/mastra/commit/8cdde5875bbba6702d9df226f2b20232b8d75d6c), [`847ff1e`](https://github.com/mastra-ai/mastra/commit/847ff1e0d94368d94b2e173e4e0908e115568ef3), [`259d409`](https://github.com/mastra-ai/mastra/commit/259d409a514174299dbde1ff5e1121209b3ba850), [`9e16c68`](https://github.com/mastra-ai/mastra/commit/9e16c6818b6485ccb43df28aba6f3a2219d28662), [`cefca33`](https://github.com/mastra-ai/mastra/commit/cefca33ae666e69810c935fedf95a929c173d1d7), [`d00e8c5`](https://github.com/mastra-ai/mastra/commit/d00e8c50daebe5bce5bf2f48bde39c86fc3d2fe4), [`36fa7e2`](https://github.com/mastra-ai/mastra/commit/36fa7e24d14e58a1eb46147097b32f583e5b8775), [`87e9774`](https://github.com/mastra-ai/mastra/commit/87e97741c1e493cd6d62f478eb810b49bda4d57c), [`65a72e7`](https://github.com/mastra-ai/mastra/commit/65a72e70c25eedea8ff985a6624b96be2850236b), [`0f77241`](https://github.com/mastra-ai/mastra/commit/0f7724108806703799a8ba80ad0f09414afd5066), [`92ff509`](https://github.com/mastra-ai/mastra/commit/92ff5098ef8a990438ca038077021a5f7541ec1d), [`3fce5e7`](https://github.com/mastra-ai/mastra/commit/3fce5e70d011d289043e75003ef3336ed4aa43c3), [`a763592`](https://github.com/mastra-ai/mastra/commit/a763592c3db46963ef1011cfe16fe372816e775e), [`80c7737`](https://github.com/mastra-ai/mastra/commit/80c7737e32d7917b5f356957d67c169d01744fd3), [`3f1cf47`](https://github.com/mastra-ai/mastra/commit/3f1cf476f74c1e4cc2df908837e05853a5347e31)]:
+  - @mastra/core@1.38.0-alpha.3
+  - @mastra/client-js@1.22.0-alpha.3
+  - @mastra/react@0.4.3-alpha.3
+
 ## 30.0.2-alpha.2
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -3644,12 +3644,14 @@ const formElementSizes = {
   lg: "h-form-lg"
 };
 const formElementFocus = "focus:outline-hidden focus:ring-1 focus:ring-accent1 focus:shadow-focus-ring transition-shadow duration-normal";
-const formElementFocusWithin = "focus-within:outline-hidden focus-within:ring-1 focus-within:ring-accent1 focus-within:shadow-focus-ring transition-shadow duration-normal";
-const formElementRadius = "rounded-md";
-const sharedFormElementStyle = "bg-surface2 border border-border1 text-neutral5 hover:text-neutral6 hover:border-border2 rounded-lg";
 const sharedFormElementFocusStyle = "outline-hidden focus-visible:outline-hidden focus-visible:border-accent1 focus-visible:ring-1 focus-visible:ring-accent1/40";
 const sharedFormElementDisabledStyle = "disabled:opacity-50 disabled:cursor-not-allowed";
-const formElementTransition = "transition-all duration-normal ease-out-custom";
+const inputFocusBorderVisible = "focus-visible:border-neutral5/50";
+const inputFocusBorderWithin = "focus-within:border-neutral5/50";
+const inputHoverBorderWithin = "[&:hover:not(:focus-within)]:border-border2";
+const inputSurfaceAndFocusStyle = "bg-surface-overlay-soft border border-border1 text-neutral5 hover:text-neutral6 hover:bg-surface-overlay-strong hover:border-border2 outline-hidden focus-visible:outline-hidden focus-visible:bg-surface-overlay-strong " + inputFocusBorderVisible;
+const inputOutlineAndFocusStyle = "bg-transparent border border-border1 text-neutral5 hover:text-neutral6 hover:border-border2 outline-hidden focus-visible:outline-hidden " + inputFocusBorderVisible;
+const unstyledFormElementStyle = "border-0 bg-transparent outline-hidden focus-visible:outline-hidden";
 
 const TEXT_MODE_ADORNMENTS = cn(
   "gap-[.75em] rounded-full",
@@ -3726,6 +3728,7 @@ const Button = React.forwardRef(
         ref,
         disabled,
         "aria-label": ariaLabel,
+        "data-variant": variant,
         className: cn(buttonVariants({ variant, size: resolvedSize }), isLabelless && "[&>svg]:opacity-75", className),
         ...props,
         children: content
@@ -6031,14 +6034,18 @@ const textareaVariants = cva(
   {
     variants: {
       variant: {
-        default: cn(sharedFormElementStyle, sharedFormElementFocusStyle, sharedFormElementDisabledStyle),
-        unstyled: "border-0 bg-transparent shadow-none focus:shadow-none focus:ring-0"
+        default: cn(inputSurfaceAndFocusStyle, "rounded-xl", sharedFormElementDisabledStyle),
+        filled: cn(inputSurfaceAndFocusStyle, "rounded-xl", sharedFormElementDisabledStyle),
+        outline: cn(inputOutlineAndFocusStyle, "rounded-xl", sharedFormElementDisabledStyle),
+        unstyled: unstyledFormElementStyle
       },
+      // Text tokens mirror the Input size scale (sm→ui-sm, md/default→ui-md, lg→ui-lg)
+      // so a Textarea reads at the same size as a sibling Input.
       size: {
         sm: "px-2 py-1.5 text-ui-sm",
-        md: "px-3 py-2 text-ui-sm",
+        md: "px-3 py-2 text-ui-md",
         default: "px-3 py-2 text-ui-md",
-        lg: "px-4 py-3 text-ui-sm"
+        lg: "px-4 py-3 text-ui-lg"
       }
     },
     defaultVariants: {
@@ -6054,8 +6061,7 @@ const Textarea = React__namespace.forwardRef(
       {
         className: cn(
           textareaVariants({ variant, size }),
-          // Error state styling
-          error && "border-error focus:ring-error focus:shadow-glow-accent2",
+          error && "border-error focus-visible:border-error",
           className
         ),
         "data-testid": testId,
@@ -6927,6 +6933,7 @@ const SelectTrigger = React__namespace.forwardRef(
       select.Select.Trigger,
       {
         ref,
+        "data-slot": "select-trigger",
         className: cn(
           "inline-flex w-full cursor-pointer select-none items-center justify-between gap-1.5 whitespace-nowrap",
           formElementSizes[size],
@@ -7177,8 +7184,21 @@ function CodeBlock$1({
     }
   );
 }
+function tokenStyle(token, isDark) {
+  if (token.htmlStyle && typeof token.htmlStyle === "object") {
+    const vars = token.htmlStyle;
+    const color = isDark ? vars["--shiki-dark"] : vars["--shiki-light"];
+    const background = isDark ? vars["--shiki-dark-bg"] : vars["--shiki-light-bg"];
+    const style = {};
+    if (color) style.color = color;
+    if (background) style.backgroundColor = background;
+    return Object.keys(style).length ? style : void 0;
+  }
+  return token.color ? { color: token.color } : void 0;
+}
 function HighlightedCode({ code, lang }) {
   const [tokens, setTokens] = React__namespace.useState(null);
+  const isDark = useTheme().resolvedTheme === "dark";
   React__namespace.useEffect(() => {
     if (!lang) {
       setTokens(null);
@@ -7199,14 +7219,7 @@ function HighlightedCode({ code, lang }) {
     return /* @__PURE__ */ jsxRuntime.jsx("pre", { className: preClass, children: code });
   }
   return /* @__PURE__ */ jsxRuntime.jsx("pre", { className: preClass, children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: tokens.map((line, lineIndex) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { children: line.map((token, tokenIndex) => /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        className: "text-shiki-light bg-shiki-light-bg dark:text-shiki-dark dark:bg-shiki-dark-bg",
-        children: token.content
-      },
-      tokenIndex
-    )) }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: line.map((token, tokenIndex) => /* @__PURE__ */ jsxRuntime.jsx("span", { style: tokenStyle(token, isDark), children: token.content }, tokenIndex)) }),
     lineIndex !== tokens.length - 1 && "\n"
   ] }, lineIndex)) }) });
 }
@@ -7678,13 +7691,25 @@ const inputVariants = cva(
     "flex w-full text-neutral6 border bg-transparent",
     "transition-all duration-normal ease-out-custom",
     "placeholder:text-neutral2 placeholder:transition-opacity placeholder:duration-normal",
-    "focus:placeholder:opacity-70"
+    "focus:placeholder:opacity-70",
+    // type="number": hide native browser spinner arrows (they clip the pill).
+    // For incrementable numeric inputs, compose <InputGroup> with +/- buttons
+    // instead — see the NumberWithStepper story. WebKit uses the spin-button
+    // pseudo-elements; Firefox needs `appearance: textfield` on the input.
+    "[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0",
+    "[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0",
+    "[&[type=number]]:[appearance:textfield]",
+    // type="search": drop WebKit's native clear button so the DS owns the search chrome.
+    // Compose an <InputGroup> with an InputGroupButton to add a clear control.
+    "[&::-webkit-search-cancel-button]:appearance-none"
   ),
   {
     variants: {
       variant: {
-        default: cn(sharedFormElementStyle, sharedFormElementFocusStyle, sharedFormElementDisabledStyle),
-        unstyled: "border-0 bg-transparent shadow-none focus:shadow-none focus:ring-0"
+        default: cn(inputSurfaceAndFocusStyle, "rounded-full", sharedFormElementDisabledStyle),
+        filled: cn(inputSurfaceAndFocusStyle, "rounded-full", sharedFormElementDisabledStyle),
+        outline: cn(inputOutlineAndFocusStyle, "rounded-full", sharedFormElementDisabledStyle),
+        unstyled: unstyledFormElementStyle
       },
       size: {
         sm: `${formElementSizes.sm} text-ui-sm px-[.75em]`,
@@ -7705,12 +7730,7 @@ const Input = React__namespace.forwardRef(
       "input",
       {
         type,
-        className: cn(
-          inputVariants({ variant, size }),
-          // Error state styling
-          error && "border-error focus:ring-error focus:shadow-glow-accent2",
-          className
-        ),
+        className: cn(inputVariants({ variant, size }), error && "border-error focus-visible:border-error", className),
         "data-testid": testId,
         ref,
         "aria-invalid": error,
@@ -7777,6 +7797,7 @@ function SearchFieldBlock({
   onReset,
   className,
   size,
+  variant,
   isMinimized,
   onMinimizedChange
 }) {
@@ -7816,6 +7837,7 @@ function SearchFieldBlock({
             placeholder,
             onChange,
             size,
+            variant,
             className: cn(
               size === "sm" && "pl-8 pr-8",
               size === "md" && "pl-9 pr-9",
@@ -7929,27 +7951,75 @@ const HoverCardContent = React__namespace.forwardRef(
 );
 HoverCardContent.displayName = "HoverCardContent";
 
-const InputGroupSizeContext = React__namespace.createContext("md");
-const inputGroupClassName = cn(
-  "group/input-group relative flex w-full min-w-0 items-stretch",
-  "bg-surface2 border border-border1 text-neutral6",
-  "hover:border-border2",
-  formElementRadius,
-  formElementFocusWithin,
+const inputGroupBaseClassName = cn(
+  // `flex-1` (not `min-w-0`) lets the root fill a flex row while keeping its content-floor
+  // so it never collapses to 0. `items-center` centres the control: it carries its own
+  // h-form-* (2px taller than the root's content box), so stretch would push its text low
+  // / overflow the bottom border, while centring overlaps the (transparent) borders cleanly.
+  "group/input-group relative flex w-full flex-1 items-center",
+  "border border-border1 text-neutral6",
   transitions.all,
   "has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed",
-  "has-[[aria-invalid=true]]:border-error has-[[aria-invalid=true]]:focus-within:ring-error has-[[aria-invalid=true]]:focus-within:shadow-glow-accent2",
-  "has-[>[data-align=block-start]]:flex-col",
-  "has-[>[data-align=block-end]]:flex-col",
+  "has-[[aria-invalid=true]]:border-error",
+  // Height is on the root (border-box) so the group matches a same-size sibling control.
+  // Auto height when vertical (block-* addon) or wrapping a textarea.
+  "has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:h-auto",
+  "has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:h-auto",
+  "has-[textarea]:h-auto",
   "has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:pl-0",
   "has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:pr-0",
-  // In flex-col, flex-1 collapses the input to basis-0. Force flex-none so `h-form-*` applies.
+  // In flex-col, flex-1 zeroes the control's height; force flex-none + w-full instead.
   "has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:flex-none has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:w-full",
   "has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:flex-none has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:w-full"
 );
-const InputGroup = React__namespace.forwardRef(({ className, size = "md", ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(InputGroupSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: "group", "data-slot": "input-group", className: cn(inputGroupClassName, className), ...props }) });
+const inputGroupRoundedTextareaClassName = cn(
+  // Pill (rounded-full) only fits single-line inline shapes. Fall back to rounded-xl
+  // whenever the group goes vertical (block-* addon) or wraps a textarea.
+  "has-[>[data-align=block-start]]:rounded-xl",
+  "has-[>[data-align=block-end]]:rounded-xl",
+  "has-[textarea]:rounded-xl"
+);
+const inputGroupFilledVariant = cn(
+  "bg-surface-overlay-soft rounded-full",
+  "hover:bg-surface-overlay-strong",
+  inputHoverBorderWithin,
+  "outline-hidden focus-within:outline-hidden focus-within:bg-surface-overlay-strong",
+  inputFocusBorderWithin,
+  inputGroupRoundedTextareaClassName
+);
+const inputGroupVariants = cva(inputGroupBaseClassName, {
+  variants: {
+    variant: {
+      default: inputGroupFilledVariant,
+      filled: inputGroupFilledVariant,
+      outline: cn(
+        "bg-transparent rounded-full",
+        inputHoverBorderWithin,
+        "outline-hidden focus-within:outline-hidden",
+        inputFocusBorderWithin,
+        inputGroupRoundedTextareaClassName
+      )
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
 });
+const InputGroup = React__namespace.forwardRef(
+  ({ className, size = "md", variant, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        "data-slot": "input-group",
+        "data-size": size,
+        className: cn(inputGroupVariants({ variant }), formElementSizes[size], className),
+        ...props
+      }
+    );
+  }
+);
 InputGroup.displayName = "InputGroup";
 const inputGroupAddonVariants = cva(
   cn(
@@ -7994,15 +8064,20 @@ const InputGroupAddon = React__namespace.forwardRef(
   }
 );
 InputGroupAddon.displayName = "InputGroupAddon";
-const inputGroupControlTextSize = {
-  sm: "text-ui-sm",
-  md: "text-ui-md",
-  default: "text-ui-md",
-  lg: "text-ui-lg"
-};
+const inputGroupControlHeightBySize = cn(
+  "group-data-[size=sm]/input-group:h-form-sm",
+  "group-data-[size=md]/input-group:h-form-md",
+  "group-data-[size=default]/input-group:h-form-default",
+  "group-data-[size=lg]/input-group:h-form-lg"
+);
+const inputGroupControlTextBySize = cn(
+  "group-data-[size=sm]/input-group:text-ui-sm",
+  "group-data-[size=md]/input-group:text-ui-md",
+  "group-data-[size=default]/input-group:text-ui-md",
+  "group-data-[size=lg]/input-group:text-ui-lg"
+);
 const InputGroupInput = React__namespace.forwardRef(
   ({ className, testId, error, type = "text", ...props }, ref) => {
-    const size = React__namespace.useContext(InputGroupSizeContext);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
@@ -8012,12 +8087,23 @@ const InputGroupInput = React__namespace.forwardRef(
         "data-testid": testId,
         "aria-invalid": error,
         className: cn(
+          // Height matches the root box (which is fixed/border-box, so it doesn't grow);
+          // this also keeps the control from collapsing in block mode (flex-col).
           "flex-1 min-w-0 bg-transparent text-neutral6 px-3 outline-hidden",
-          formElementSizes[size],
-          inputGroupControlTextSize[size],
+          inputGroupControlHeightBySize,
+          inputGroupControlTextBySize,
           "placeholder:text-neutral2 placeholder:transition-opacity placeholder:duration-normal",
           "focus:placeholder:opacity-70",
           "disabled:cursor-not-allowed",
+          // Hide native number-spinner arrows so consumers can compose their own
+          // stepper (see the NumberWithStepper story). WebKit uses the spin-button
+          // pseudo-elements; Firefox needs `appearance: textfield` on the input.
+          "[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0",
+          "[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0",
+          "[&[type=number]]:[appearance:textfield]",
+          // type="search": drop WebKit's native clear button so it doesn't double up with a
+          // custom clear control (e.g. the scorers toolbar's InputGroupButton).
+          "[&::-webkit-search-cancel-button]:appearance-none",
           className
         ),
         ...props
@@ -8028,7 +8114,6 @@ const InputGroupInput = React__namespace.forwardRef(
 InputGroupInput.displayName = "InputGroupInput";
 const InputGroupTextarea = React__namespace.forwardRef(
   ({ className, testId, error, ...props }, ref) => {
-    const size = React__namespace.useContext(InputGroupSizeContext);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "textarea",
       {
@@ -8038,7 +8123,7 @@ const InputGroupTextarea = React__namespace.forwardRef(
         "aria-invalid": error,
         className: cn(
           "flex-1 min-w-0 min-h-[60px] resize-y bg-transparent text-neutral6 px-3 py-2 outline-hidden",
-          inputGroupControlTextSize[size],
+          inputGroupControlTextBySize,
           "placeholder:text-neutral2 placeholder:transition-opacity placeholder:duration-normal",
           "focus:placeholder:opacity-70",
           "disabled:cursor-not-allowed",
@@ -8496,8 +8581,18 @@ function PropertyFilterActions({
 
 const ButtonsGroupOrientationContext = React__namespace.createContext("horizontal");
 const buttonsGroupVariants = cva(
-  // Elevate the focused child's border above its siblings so it isn't clipped in close-spacing.
-  cn("flex", "[&>*:focus-visible]:relative [&>*:focus-visible]:z-10"),
+  // Lift the hovered/focused segment so its full border paints over the collapsed seam (else a
+  // neighbour clips a side / the seam ignores the active colour). Use `:focus-visible`, NOT
+  // `:focus-within`: a mouse click leaves a plain `:focus` on a button, which would otherwise
+  // keep its seam border highlighted until blur. `:has(:focus-visible)` covers a nested
+  // focusable (the <input> inside an InputGroup); text inputs match :focus-visible on click too,
+  // which is the wanted behaviour for a field.
+  cn(
+    "flex",
+    "[&>*:hover]:relative [&>*:hover]:z-10",
+    "[&>*:focus-visible]:relative [&>*:focus-visible]:z-10",
+    "[&>*:has(:focus-visible)]:relative [&>*:has(:focus-visible)]:z-10"
+  ),
   {
     variants: {
       orientation: {
@@ -8513,24 +8608,50 @@ const buttonsGroupVariants = cva(
       {
         orientation: "horizontal",
         spacing: "close",
-        // Skip separators when collapsing borders so they stay visible.
+        // Flatten inner corners. A segment rounds its right edge off having a *real* segment
+        // somewhere after it (general sibling `~`, not `:not(:last-child)` and not adjacent
+        // `+`). This survives non-segment children that frameworks inject between/around the
+        // real ones: Base UI's trailing `<input aria-hidden>` (Select), and the visually
+        // -hidden focus guards (`[data-base-ui-focus-guard]`) + positioner anchor (`[aria-owns]`)
+        // a Menu/Popover inserts while OPEN — without this a DropdownMenu split-button seam
+        // breaks the moment the menu opens. The same ignore-list is applied to every seam rule.
         className: cn(
-          "[&>*:not(:last-child)]:rounded-r-none",
-          "[&>*:not(:first-child)]:rounded-l-none",
-          "[&>*:not([data-slot=buttons-group-separator]):not(:first-child)]:-ml-px"
+          "[&>*:has(~_*:not([aria-hidden=true]):not([data-base-ui-focus-guard]):not([aria-owns]))]:rounded-r-none",
+          "[&>*:not(:first-child):not([aria-hidden=true]):not([data-base-ui-focus-guard]):not([aria-owns])]:rounded-l-none",
+          // One-line seam: `-ml-px` overlaps adjacent borders onto the same pixel. Filled
+          // segments (opaque bg: default/primary buttons, the text chip) keep their own
+          // border — the bg hides the neighbour's. Transparent/outline segments null their
+          // left border at rest (so the neighbour's shows without doubling) and reveal it on
+          // hover / keyboard-focus, where the z-10 lift paints the complete border on top.
+          "[&>*:not([data-slot=buttons-group-separator]):not([aria-hidden=true]):not([data-base-ui-focus-guard]):not([aria-owns]):not(:first-child)]:-ml-px",
+          "[&>*:not([data-slot=buttons-group-separator]):not([data-slot=buttons-group-text]):not([data-variant=default]):not([data-variant=primary]):not([aria-hidden=true]):not([data-base-ui-focus-guard]):not([aria-owns]):not(:first-child):not(:hover):not(:focus-visible):not(:has(:focus-visible))]:border-l-transparent",
+          // `primary` is filled but borderless — give it (only) an inset-shadow divider.
+          "[&>[data-variant=primary]:not([aria-hidden=true]):not(:first-child)]:shadow-[inset_1px_0_0_0_var(--color-border1)]",
+          // Animate only colour/bg so the seam + ring snap (no fade desynced from the z-10 drop).
+          "[&>*:not([data-slot=buttons-group-separator]):not([aria-hidden=true])]:transition-[color,background-color]",
+          // Group owns sizing (no consumer width classes): fill on flex/InputGroup/input,
+          // content-width on a Select trigger (descendant rule beats the trigger's `w-full`).
+          "[&>[data-slot=select-trigger]]:w-fit [&>[data-slot=select-trigger]]:flex-none",
+          "[&>input]:flex-1"
         )
       },
       {
         orientation: "vertical",
         spacing: "close",
-        // Children carry `rounded-full` (capsule) which looks awkward when stacked vertically.
-        // Replace the outer corners with a regular `rounded-xl` and flatten the inner ones.
+        // Children are capsules (rounded-full); re-round the outer ends to rounded-xl and
+        // flatten the touching ones. Unlike the horizontal block, these use plain structural
+        // selectors (no aria-hidden / data-base-ui-focus-guard / aria-owns ignore-list): vertical
+        // close-spacing is only used with plain buttons, so it never hosts a Select/DropdownMenu
+        // that injects guard siblings. Mirror the horizontal ignore-list here if one ever does.
         className: cn(
           "[&>*:not(:last-child)]:rounded-b-none",
           "[&>*:not(:first-child)]:rounded-t-none",
           "[&>:first-child]:rounded-t-xl",
           "[&>:last-child]:rounded-b-xl",
-          "[&>*:not([data-slot=buttons-group-separator]):not(:first-child)]:-mt-px"
+          "[&>*:not([data-slot=buttons-group-separator]):not(:first-child)]:-mt-px",
+          "[&>*:not([data-slot=buttons-group-separator]):not([data-slot=buttons-group-text]):not([data-variant=default]):not([data-variant=primary]):not(:first-child):not(:hover):not(:focus-visible):not(:has(:focus-visible))]:border-t-transparent",
+          "[&>[data-variant=primary]:not(:first-child)]:shadow-[inset_0_1px_0_0_var(--color-border1)]",
+          "[&>*:not([data-slot=buttons-group-separator])]:transition-[color,background-color]"
         )
       }
     ],
@@ -9463,12 +9584,30 @@ const searchbarSizeClasses = {
   lg: formElementSizes.lg,
   default: formElementSizes.default
 };
+const searchbarFilledSurface = cn(
+  "bg-surface-overlay-soft rounded-full",
+  "hover:bg-surface-overlay-strong",
+  inputHoverBorderWithin,
+  "outline-hidden focus-within:outline-hidden focus-within:bg-surface-overlay-strong",
+  inputFocusBorderWithin
+);
+const searchbarVariantClasses = {
+  default: searchbarFilledSurface,
+  filled: searchbarFilledSurface,
+  outline: cn(
+    "bg-transparent rounded-full",
+    inputHoverBorderWithin,
+    "outline-hidden focus-within:outline-hidden",
+    inputFocusBorderWithin
+  )
+};
 const Searchbar = ({
   onSearch,
   label,
   placeholder,
   debounceMs = 300,
   size = "md",
+  variant = "outline",
   className
 }) => {
   const id = React.useId();
@@ -9503,10 +9642,8 @@ const Searchbar = ({
     {
       className: cn(
         "border border-border1 flex w-full items-center gap-2 overflow-hidden pl-2 pr-1",
-        formElementRadius,
-        formElementFocusWithin,
         transitions.all,
-        "hover:border-neutral2",
+        searchbarVariantClasses[variant],
         searchbarSizeClasses[size],
         className
       ),
@@ -9521,7 +9658,7 @@ const Searchbar = ({
               type: "text",
               placeholder,
               className: cn(
-                "bg-transparent text-ui-md placeholder:text-neutral3 block w-full px-2 outline-hidden",
+                "bg-transparent text-ui-md placeholder:text-neutral2 block w-full px-2 outline-hidden",
                 searchbarSizeClasses[size]
               ),
               name: id,
@@ -14076,7 +14213,8 @@ const ListSearch = ({
   placeholder,
   debounceMs = 300,
   size,
-  value: controlledValue
+  value: controlledValue,
+  variant = "outline"
 }) => {
   const id = React.useId();
   const [internalValue, setInternalValue] = React.useState(controlledValue ?? "");
@@ -14113,6 +14251,7 @@ const ListSearch = ({
       onChange: handleChange,
       onReset: handleReset,
       size,
+      variant,
       className: "w-full max-w-[30rem]"
     }
   );
@@ -15726,6 +15865,16 @@ const formatJSON = async (code) => {
   });
   return formatted;
 };
+const formatTypeScript = async (code) => {
+  const [prettier, prettierPluginBabel, prettierPluginEstree] = await loadPrettier();
+  const formatted = await prettier.format(code, {
+    parser: "babel-ts",
+    printWidth: 80,
+    tabWidth: 2,
+    plugins: [prettierPluginBabel, prettierPluginEstree]
+  });
+  return formatted;
+};
 const isValidJson = (str) => {
   try {
     const obj = JSON.parse(str);
@@ -20577,7 +20726,11 @@ const NoTracesInfo = ({ datePreset, dateFrom, dateTo } = {}) => {
 };
 
 const IMMUTABLE_CACHE_TIME$2 = 1e3 * 60 * 60 * 24 * 30;
-function useBranch({ traceId, spanId, depth }) {
+function useBranch({
+  traceId,
+  spanId,
+  depth
+}) {
   const client = react.useMastraClient();
   return reactQuery.useQuery({
     queryKey: ["branch", traceId, spanId, depth],
@@ -20801,7 +20954,11 @@ function mergeDeltaIntoPage0(old, delta, listMode) {
   }
   return { ...old, pages: [updatedFirst, ...rest] };
 }
-const useTraces = ({ filters, listMode = "traces", polling = {} }) => {
+const useTraces = ({
+  filters,
+  listMode = "traces",
+  polling = {}
+}) => {
   const {
     deltaPollIntervalMs = DEFAULT_POLLING_CONFIG.deltaPollIntervalMs,
     deltaChaseIntervalMs = DEFAULT_POLLING_CONFIG.deltaChaseIntervalMs,
@@ -21801,13 +21958,13 @@ const useLogs = ({ filters } = {}) => {
     retry: false,
     refetchInterval: 1e4
   });
-  const { hasNextPage, isFetchingNextPage, fetchNextPage } = query;
+  const { hasNextPage, isFetchingNextPage, fetchNextPage, data, isLoading, isError, error } = query;
   React.useEffect(() => {
     if (isEndOfListInView && hasNextPage && !isFetchingNextPage) {
       void fetchNextPage();
     }
   }, [isEndOfListInView, hasNextPage, isFetchingNextPage, fetchNextPage]);
-  return { ...query, data: query.data, setEndOfListElement };
+  return { data, hasNextPage, isFetchingNextPage, fetchNextPage, isLoading, isError, error, setEndOfListElement };
 };
 
 const LOG_PARAM = "logId";
@@ -22526,14 +22683,12 @@ exports.fileToBase64 = fileToBase64;
 exports.flattenSchemaToVariables = flattenSchemaToVariables;
 exports.focusRing = focusRing;
 exports.formElementFocus = formElementFocus;
-exports.formElementFocusWithin = formElementFocusWithin;
-exports.formElementRadius = formElementRadius;
 exports.formElementSizes = formElementSizes;
-exports.formElementTransition = formElementTransition;
 exports.formatCompact = formatCompact;
 exports.formatCost = formatCost;
 exports.formatHierarchicalSpans = formatHierarchicalSpans;
 exports.formatJSON = formatJSON;
+exports.formatTypeScript = formatTypeScript;
 exports.generateDefaultValues = generateDefaultValues;
 exports.getAllSpanIds = getAllSpanIds;
 exports.getChildFieldOptions = getChildFieldOptions;
@@ -22561,7 +22716,11 @@ exports.hasAnyMetricsFilterParams = hasAnyMetricsFilterParams;
 exports.hasAnyTraceFilterParams = hasAnyTraceFilterParams;
 exports.highlight = highlight;
 exports.hoverEffects = hoverEffects;
-exports.inputVariants = inputVariants;
+exports.inputFocusBorderVisible = inputFocusBorderVisible;
+exports.inputFocusBorderWithin = inputFocusBorderWithin;
+exports.inputHoverBorderWithin = inputHoverBorderWithin;
+exports.inputOutlineAndFocusStyle = inputOutlineAndFocusStyle;
+exports.inputSurfaceAndFocusStyle = inputSurfaceAndFocusStyle;
 exports.is401UnauthorizedError = is401UnauthorizedError;
 exports.is403ForbiddenError = is403ForbiddenError;
 exports.isBranchesNotSupportedError = isBranchesNotSupportedError;
@@ -22588,15 +22747,14 @@ exports.saveMetricsFiltersToStorage = saveMetricsFiltersToStorage;
 exports.saveTraceFiltersToStorage = saveTraceFiltersToStorage;
 exports.sharedFormElementDisabledStyle = sharedFormElementDisabledStyle;
 exports.sharedFormElementFocusStyle = sharedFormElementFocusStyle;
-exports.sharedFormElementStyle = sharedFormElementStyle;
 exports.shouldRetryQuery = shouldRetryQuery;
 exports.spanTypePrefixes = spanTypePrefixes;
 exports.stringToColor = stringToColor;
-exports.textareaVariants = textareaVariants;
 exports.toSigFigs = toSigFigs;
 exports.toast = toast;
 exports.transitions = transitions;
 exports.truncateString = truncateString;
+exports.unstyledFormElementStyle = unstyledFormElementStyle;
 exports.useActiveResourcesKpiMetrics = useActiveResourcesKpiMetrics;
 exports.useActiveThreadsKpiMetrics = useActiveThreadsKpiMetrics;
 exports.useAgentRunsKpiMetrics = useAgentRunsKpiMetrics;