Misc fixes

Author: haydenbleasel

apps/docs/components/navbar/client-navbar.tsx

@@ -49,7 +49,7 @@ const LogoGithub = () => (
 );
 
 export const ClientNavbar = ({ pages }: { pages: NavPageItem[] }) => (
-  <div className="fixed top-0 right-0 left-0 z-40 flex items-center justify-between bg-background/80 backdrop-blur-sm py-2.5">
+  <div className="fixed top-0 right-0 left-0 z-40 flex items-center justify-between bg-background/80 py-2.5 backdrop-blur-sm">
     <div className="flex select-none flex-row items-center">
       <div className="flex shrink-0 flex-row items-center gap-2">
         <HomeLinks />

packages/elements/__tests__/connection.test.tsx

@@ -5,7 +5,9 @@ import { Connection } from "../src/connection";
 describe("Connection", () => {
   it("renders with basic props", () => {
     // Mock console.error to suppress React SVG warnings from @xyflow/react
-    const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
+    const consoleError = vi
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
 
     const props = {
       fromX: 0,

packages/elements/__tests__/prompt-input.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, act } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import {
@@ -1069,9 +1069,7 @@ describe("PromptInputSpeechButton", () => {
     };
 
     // @ts-expect-error - Mocking browser API
-    window.SpeechRecognition = function () {
-      return mockRecognition;
-    };
+    window.SpeechRecognition = () => mockRecognition;
   });
 
   afterEach(() => {
@@ -1187,7 +1185,7 @@ describe("PromptInputSpeechButton", () => {
     // @ts-expect-error - Removing mock
     delete window.SpeechRecognition;
 
-    const { container} = render(<PromptInputSpeechButton />);
+    const { container } = render(<PromptInputSpeechButton />);
     const button = container.querySelector("button");
 
     expect(button).toBeDisabled();

packages/elements/src/confirmation.tsx

@@ -22,11 +22,11 @@ const ConfirmationContext = createContext<ConfirmationContextValue | null>(
 
 const useConfirmation = () => {
   const context = useContext(ConfirmationContext);
-  
+
   if (!context) {
     throw new Error("Confirmation components must be used within Confirmation");
   }
-  
+
   return context;
 };
 
@@ -41,11 +41,7 @@ export const Confirmation = ({
   state,
   ...props
 }: ConfirmationProps) => {
-  if (
-    !approval ||
-    state === "input-streaming" ||
-    state === "input-available"
-  ) {
+  if (!approval || state === "input-streaming" || state === "input-available") {
     return null;
   }
 
@@ -62,16 +58,14 @@ export const ConfirmationTitle = ({
   className,
   ...props
 }: ConfirmationTitleProps) => (
-  <AlertDescription className={className} {...props} />
+  <AlertDescription className={cn("inline", className)} {...props} />
 );
 
 export type ConfirmationRequestProps = {
   children?: ReactNode;
 };
 
-export const ConfirmationRequest = ({
-  children,
-}: ConfirmationRequestProps) => {
+export const ConfirmationRequest = ({ children }: ConfirmationRequestProps) => {
   const { state } = useConfirmation();
 
   // Only show when approval is requested
@@ -141,10 +135,7 @@ export const ConfirmationActions = ({
 
   return (
     <div
-      className={cn(
-        "flex items-center justify-end gap-2 self-end",
-        className
-      )}
+      className={cn("flex items-center justify-end gap-2 self-end", className)}
       {...props}
     />
   );

packages/examples/src/tool.tsx

@@ -1,12 +1,5 @@
 "use client";
 
-import {
-  Tool,
-  ToolContent,
-  ToolHeader,
-  ToolInput,
-  ToolOutput,
-} from "@repo/elements/tool";
 import {
   Confirmation,
   ConfirmationAccepted,
@@ -16,6 +9,13 @@ import {
   ConfirmationRequest,
   ConfirmationTitle,
 } from "@repo/elements/confirmation";
+import {
+  Tool,
+  ToolContent,
+  ToolHeader,
+  ToolInput,
+  ToolOutput,
+} from "@repo/elements/tool";
 import type { ToolUIPart } from "ai";
 import { CheckIcon, XIcon } from "lucide-react";
 import { nanoid } from "nanoid";