chore: fix build errors

apps/playground/src/components/ThemeCustomizer.tsx

@@ -15,7 +15,7 @@ export function ThemeCustomizer({
   onCustomThemeChange,
 }: ThemeCustomizerProps) {
   const [isOpen, setIsOpen] = useState(false)
-  const [customTheme, setCustomTheme] = useState(themes[selectedTheme].css)
+  const [customTheme, setCustomTheme] = useState<Record<string, string>>(themes[selectedTheme].css as Record<string, string>)
   const [showCode, setShowCode] = useState(false)
 
   const handleColorChange = (key: string, value: string) => {
@@ -32,9 +32,9 @@ export function ThemeCustomizer({
 
   const resetToTheme = (themeName: ThemeName) => {
     const theme = themes[themeName]
-    setCustomTheme(theme.css)
+    setCustomTheme(theme.css as Record<string, string>)
     onThemeChange(themeName)
-    onCustomThemeChange(theme.css)
+    onCustomThemeChange(theme.css as Record<string, string>)
   }
 
   const generateCSS = () => {
@@ -56,9 +56,9 @@ ${Object.entries(customTheme)
     const parts = hsl.split(" ")
     if (parts.length < 3) return "#000000"
 
-    const h = parseFloat(parts[0]) || 0
-    const s = parseFloat(parts[1]) || 0
-    const l = parseFloat(parts[2]) || 0
+    const h = parseFloat(parts[0] || "0") || 0
+    const s = parseFloat(parts[1] || "0") || 0
+    const l = parseFloat(parts[2] || "0") || 0
 
     // Convert HSL to RGB for preview
     const hNorm = h / 360

apps/playground/src/components/ai-demo-zero-tokens.tsx

@@ -38,12 +38,12 @@ const scenarios: Scenario[] = [
 ]
 
 export function AIDemoZeroTokens() {
-  const [selectedScenario, setSelectedScenario] = useState<string>(scenarios[0].id)
+  const [selectedScenario, setSelectedScenario] = useState<string>(scenarios[0]?.id || "customer-details")
   const [stage, setStage] = useState(0)
   const [promptText, setPromptText] = useState("")
   const [showByokInput, setShowByokInput] = useState(false)
 
-  const scenario = scenarios.find(s => s.id === selectedScenario)!
+  const scenario = scenarios.find(s => s.id === selectedScenario) || scenarios[0]
 
   useEffect(() => {
     // Reset when scenario changes
@@ -53,15 +53,15 @@ export function AIDemoZeroTokens() {
 
   useEffect(() => {
     // Typewriter effect
-    if (stage === 0 && promptText.length < scenario.prompt.length) {
+    if (scenario && stage === 0 && promptText.length < scenario.prompt.length) {
       const timer = setTimeout(() => {
         setPromptText(scenario.prompt.slice(0, promptText.length + 1))
       }, 30)
       return () => clearTimeout(timer)
-    } else if (stage === 0 && promptText.length === scenario.prompt.length) {
+    } else if (scenario && stage === 0 && promptText.length === scenario.prompt.length) {
       setTimeout(() => setStage(1), 800)
     }
-  }, [stage, promptText, scenario.prompt])
+  }, [stage, promptText, scenario])
 
   useEffect(() => {
     if (stage > 0 && stage < 3) {
@@ -97,7 +97,6 @@ export function AIDemoZeroTokens() {
                     { label: "May", value: 58932 },
                     { label: "Jun", value: 65100 },
                   ]}
-                  height={250}
                 />
               </div>
             )}
@@ -108,7 +107,7 @@ export function AIDemoZeroTokens() {
                     { key: "customer", header: "Customer" },
                     { key: "revenue", header: "Revenue" },
                     { key: "status", header: "Status" },
-                  ] as Column<any>[]}
+                  ] as Column<Record<string, unknown>>[]}
                   data={[
                     { customer: "Acme Corp", revenue: "$45,231", status: "Active" },
                     { customer: "TechStart Inc", revenue: "$32,450", status: "Active" },
@@ -130,7 +129,7 @@ export function AIDemoZeroTokens() {
                     { key: "name", header: "Name" },
                     { key: "email", header: "Email" },
                     { key: "role", header: "Role" },
-                  ] as Column<any>[]}
+                  ] as Column<Record<string, unknown>>[]}
                   data={[
                     { name: "John Doe", email: "john@example.com", role: "Admin" },
                     { name: "Jane Smith", email: "jane@example.com", role: "User" },
@@ -196,7 +195,6 @@ export function AIDemoZeroTokens() {
                     { label: "Sat", value: 3100 },
                     { label: "Sun", value: 2900 },
                   ]}
-                  height={250}
                 />
               </div>
             )}

apps/playground/src/components/hero-animation.tsx

@@ -105,7 +105,6 @@ export function HeroAnimation() {
                   { label: "May", value: 3200 },
                   { label: "Jun", value: 3500 },
                 ]}
-                height={250}
               />
             </div>
           )}

apps/playground/src/components/pattern-gallery.tsx

@@ -76,7 +76,6 @@ export function PatternGallery({ selectedPattern, onPatternSelect }: PatternGall
                 { label: "Feb", value: 1900 },
                 { label: "Mar", value: 3000 },
               ]}
-              height={180}
             />
           </div>
         )

apps/playground/src/components/pattern-sidebar.tsx

@@ -2,7 +2,6 @@
 
 import * as React from "react"
 import { cn } from "@agent-patterns/core"
-import { Badge } from "./ui/badge"
 
 interface Pattern {
   id: string

apps/playground/src/components/schema-viewer.tsx

@@ -10,7 +10,7 @@ interface SchemaViewerProps {
   patternName: string
 }
 
-export function SchemaViewer({ schemaCode, patternName }: SchemaViewerProps) {
+export function SchemaViewer({ schemaCode }: SchemaViewerProps) {
   return (
     <Card className="border-2 border-blue-500/20 bg-gradient-to-br from-blue-50/50 to-purple-50/50 dark:from-blue-950/20 dark:to-purple-950/20">
       <CardHeader>

apps/playground/src/components/ui/code-block.tsx

@@ -21,8 +21,8 @@ const CodeBlock = React.forwardRef<HTMLPreElement, CodeBlockProps>(
       setTimeout(() => setCopied(false), 2000)
     }
 
-    // Simple syntax highlighting (can be enhanced with a library like Prism or highlight.js)
-    const highlightCode = (code: string, lang: string) => {
+  // Simple syntax highlighting (can be enhanced with a library like Prism or highlight.js)
+  const highlightCode = (code: string, _lang: string) => {
       // Basic keyword highlighting
       const keywords = [
         "import",

patterns/agent-form/component.tsx

@@ -75,7 +75,7 @@ export const AgentForm = React.forwardRef<HTMLFormElement, AgentFormProps>(
                 field.validation.parse(formData[field.name])
               } catch (err) {
                 if (err instanceof z.ZodError) {
-                  newErrors[field.name] = err.errors[0].message
+                  newErrors[field.name] = err.errors[0]?.message || "Validation error"
                 }
               }
             }
@@ -136,7 +136,7 @@ export const AgentForm = React.forwardRef<HTMLFormElement, AgentFormProps>(
             field.validation.parse(formData[name])
           } catch (err) {
             if (err instanceof z.ZodError) {
-              setErrors((prev) => ({ ...prev, [name]: err.errors[0].message }))
+              setErrors((prev) => ({ ...prev, [name]: err.errors[0]?.message || "Validation error" }))
             }
           }
         }

patterns/chart/example.tsx

@@ -1,3 +1,4 @@
+import React from "react"
 import { Chart } from "./component"
 
 // Sample data sets

patterns/chat-message/component.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, useEffect, useRef } from "react"
+import React, { useState, useEffect, useRef } from "react"
 import { cn } from "@agent-patterns/core"
 
 interface ChatMessageAction {

patterns/chat-message/example.tsx

@@ -1,3 +1,4 @@
+import React from "react"
 import { ChatMessage } from "./component"
 
 export default function ChatMessageExample() {

vercel.json

@@ -4,5 +4,16 @@
   "devCommand": "pnpm --filter @agent-patterns/playground dev",
   "installCommand": "pnpm install",
   "framework": "nextjs",
-  "outputDirectory": "apps/playground/.next"
+  "outputDirectory": "apps/playground/.next",
+  "git": {
+    "deploymentEnabled": {
+      "main": false,
+      "master": false
+    }
+  },
+  "github": {
+    "autoAlias": false,
+    "autoJobCancelation": true,
+    "silent": true
+  }
 }