test: mock react-syntax-highlighter to fix ESM compatibility in CodeBlock tests

apps/web/src/app/how-it-works/page.tsx

@@ -168,22 +168,15 @@ GET /api/tools?official=true`}
                 <h3 className="text-xl font-semibold mb-4 text-foreground">Execute Tools</h3>
                 <CodeBlock
                   language="typescript"
-                  code={`import { generateText } from 'ai';
+                  code={`import { streamText } from 'ai';
+import { analyzeSentiment } from '@yourname/awesome-tool';
 
-const result = await generateText({
+const result = await streamText({
   model: openai('gpt-4'),
   prompt: 'Analyze the sentiment of: I love this product!',
   tools: {
-    analyzeSentiment: {
-      description: 'Analyze sentiment of text',
-      parameters: z.object({
-        text: z.string().describe('Text to analyze'),
-      }),
-      execute: async ({ text }) => {
-        // Tool execution handled by TPMJS
-        return await executeTpmjsTool('@yourname/awesome-tool', 'analyzeSentiment', { text });
-      },
-    },
+    analyzeSentiment,  // Just import and use alongside your other tools
+    // ... your other tools
   },
 });`}
                 />

packages/ui/src/CodeBlock/CodeBlock.test.tsx

@@ -4,7 +4,14 @@ import { CodeBlock } from './CodeBlock';
 
 // Mock react-syntax-highlighter to avoid ESM compatibility issues
 vi.mock('react-syntax-highlighter', () => ({
-  Prism: ({ children, ...props }: any) => <code {...props}>{children}</code>,
+  Prism: ({
+    children,
+    codeTagProps,
+  }: {
+    children: React.ReactNode;
+    codeTagProps?: { style?: React.CSSProperties; className?: string };
+    [key: string]: unknown;
+  }) => <code {...(codeTagProps || {})}>{children}</code>,
 }));
 
 vi.mock('react-syntax-highlighter/dist/esm/styles/prism', () => ({