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

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;