feat: enhance template gallery with @hanzo /ui integration and new templates

- Refactor all 8 existing templates to use @hanzo /ui components
- Add 4 new high-priority templates (AI Chat, Search, E-commerce, API Docs)
- Implement download/export functionality with ZIP generation
- Add GitHub repository creation and one-click deploy buttons
- Update all templates to monochromatic theme matching shadcn.com
- Follow shadcn/ui component patterns (Button variants, Card composition)
- Ensure full responsive design across mobile, tablet, desktop
- Add comprehensive metadata and installation commands for all templates

app/api/deploy/[platform]/route.ts

@@ -0,0 +1,205 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { templates } from '@/components/template-data'
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { platform: string } }
+) {
+  try {
+    const { searchParams } = new URL(request.url)
+    const templateId = searchParams.get('template')
+
+    if (!templateId) {
+      return NextResponse.json(
+        { error: 'Template ID is required' },
+        { status: 400 }
+      )
+    }
+
+    const template = templates.find(t => t.id === templateId)
+
+    if (!template) {
+      return NextResponse.json(
+        { error: 'Template not found' },
+        { status: 404 }
+      )
+    }
+
+    const platform = params.platform.toLowerCase()
+    let deployUrl: string | undefined
+
+    // Get the appropriate deploy URL based on platform
+    switch (platform) {
+      case 'vercel':
+        deployUrl = template.deployUrls?.vercel
+        break
+      case 'netlify':
+        deployUrl = template.deployUrls?.netlify
+        break
+      case 'railway':
+        deployUrl = template.deployUrls?.railway
+        break
+      case 'render':
+        deployUrl = template.deployUrls?.render
+        break
+      default:
+        return NextResponse.json(
+          { error: 'Unsupported deployment platform' },
+          { status: 400 }
+        )
+    }
+
+    if (!deployUrl) {
+      return NextResponse.json(
+        { error: `Deployment to ${platform} is not available for this template` },
+        { status: 404 }
+      )
+    }
+
+    // Redirect to the deployment URL
+    return NextResponse.redirect(deployUrl)
+  } catch (error) {
+    console.error('Error processing deployment:', error)
+    return NextResponse.json(
+      { error: 'Failed to process deployment request' },
+      { status: 500 }
+    )
+  }
+}
+
+export async function POST(
+  request: NextRequest,
+  { params }: { params: { platform: string } }
+) {
+  try {
+    const { templateId, projectName, envVars } = await request.json()
+
+    const template = templates.find(t => t.id === templateId)
+
+    if (!template) {
+      return NextResponse.json(
+        { error: 'Template not found' },
+        { status: 404 }
+      )
+    }
+
+    const platform = params.platform.toLowerCase()
+
+    // Generate deployment configuration
+    const deploymentConfig = {
+      template: template.id,
+      name: projectName || `${template.id}-app`,
+      platform,
+      githubUrl: template.githubUrl,
+      envVars: envVars || {},
+      buildCommand: 'npm run build',
+      startCommand: 'npm run start',
+      installCommand: 'npm install',
+      nodeVersion: '18.x'
+    }
+
+    // Platform-specific deployment URLs and parameters
+    let deploymentUrl: string
+
+    switch (platform) {
+      case 'vercel':
+        // Vercel deployment URL with parameters
+        const vercelParams = new URLSearchParams({
+          'repository-url': template.githubUrl || '',
+          'project-name': deploymentConfig.name,
+          'repository-name': deploymentConfig.name,
+          'demo-title': template.name,
+          'demo-description': template.description,
+          'demo-url': template.demoUrl || '',
+          'demo-image': '',
+          ...Object.fromEntries(
+            Object.entries(envVars || {}).map(([key, value]) =>
+              [`env[${key}]`, String(value)]
+            )
+          )
+        })
+        deploymentUrl = `https://vercel.com/new/clone?${vercelParams.toString()}`
+        break
+
+      case 'netlify':
+        // Netlify deployment URL
+        deploymentUrl = template.deployUrls?.netlify ||
+          `https://app.netlify.com/start/deploy?repository=${template.githubUrl}`
+        break
+
+      case 'railway':
+        // Railway deployment URL
+        deploymentUrl = template.deployUrls?.railway ||
+          `https://railway.app/new/template?template=${template.githubUrl}`
+        break
+
+      case 'render':
+        // Render deployment URL
+        const renderParams = new URLSearchParams({
+          repo: template.githubUrl || '',
+          name: deploymentConfig.name
+        })
+        deploymentUrl = `https://render.com/deploy?${renderParams.toString()}`
+        break
+
+      default:
+        return NextResponse.json(
+          { error: 'Unsupported deployment platform' },
+          { status: 400 }
+        )
+    }
+
+    return NextResponse.json({
+      success: true,
+      platform,
+      deploymentUrl,
+      config: deploymentConfig,
+      message: `Ready to deploy to ${platform}`,
+      instructions: getDeploymentInstructions(platform, template)
+    })
+  } catch (error) {
+    console.error('Error preparing deployment:', error)
+    return NextResponse.json(
+      { error: 'Failed to prepare deployment' },
+      { status: 500 }
+    )
+  }
+}
+
+function getDeploymentInstructions(platform: string, template: any): string[] {
+  switch (platform) {
+    case 'vercel':
+      return [
+        'Click the deploy button to start',
+        'Connect your GitHub account',
+        'Configure environment variables if needed',
+        'Click "Deploy" to complete'
+      ]
+    case 'netlify':
+      return [
+        'Click the deploy button',
+        'Authorize Netlify to access your GitHub',
+        'Configure build settings',
+        'Add environment variables',
+        'Deploy your site'
+      ]
+    case 'railway':
+      return [
+        'Click the deploy button',
+        'Sign in to Railway',
+        'Configure your project',
+        'Add environment variables',
+        'Deploy to production'
+      ]
+    case 'render':
+      return [
+        'Click the deploy button',
+        'Connect your GitHub account',
+        'Select repository',
+        'Configure build and start commands',
+        'Deploy your application'
+      ]
+    default:
+      return ['Follow the platform-specific deployment instructions']
+  }
+}

app/api/download/[template]/route.ts

@@ -0,0 +1,118 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { templates } from '@/components/template-data'
+import archiver from 'archiver'
+import { createReadStream, existsSync } from 'fs'
+import { join } from 'path'
+import { readdir, stat } from 'fs/promises'
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { template: string } }
+) {
+  try {
+    const templateId = params.template
+    const template = templates.find(t => t.id === templateId)
+
+    if (!template || !template.downloadable) {
+      return NextResponse.json(
+        { error: 'Template not found or not downloadable' },
+        { status: 404 }
+      )
+    }
+
+    // Path to the template directory
+    const templatePath = join(process.cwd(), '..', template.templatePath || template.id)
+
+    // Check if the template directory exists
+    if (!existsSync(templatePath)) {
+      return NextResponse.json(
+        { error: 'Template directory not found' },
+        { status: 404 }
+      )
+    }
+
+    // Create a ZIP archive
+    const archive = archiver('zip', {
+      zlib: { level: 9 } // Maximum compression
+    })
+
+    // Create a stream for the response
+    const stream = new ReadableStream({
+      start(controller) {
+        archive.on('data', (chunk) => controller.enqueue(chunk))
+        archive.on('end', () => controller.close())
+        archive.on('error', (err) => controller.error(err))
+      }
+    })
+
+    // Add files to the archive
+    await addDirectoryToArchive(archive, templatePath, template.name)
+
+    // Finalize the archive
+    archive.finalize()
+
+    // Return the ZIP file as a response
+    return new NextResponse(stream, {
+      headers: {
+        'Content-Type': 'application/zip',
+        'Content-Disposition': `attachment; filename="${template.id}-template.zip"`
+      }
+    })
+  } catch (error) {
+    console.error('Error creating template archive:', error)
+    return NextResponse.json(
+      { error: 'Failed to create template archive' },
+      { status: 500 }
+    )
+  }
+}
+
+async function addDirectoryToArchive(
+  archive: archiver.Archiver,
+  dirPath: string,
+  archivePath: string
+) {
+  const entries = await readdir(dirPath, { withFileTypes: true })
+
+  for (const entry of entries) {
+    const fullPath = join(dirPath, entry.name)
+    const entryArchivePath = join(archivePath, entry.name)
+
+    // Skip certain directories and files
+    if (shouldSkipEntry(entry.name)) {
+      continue
+    }
+
+    if (entry.isDirectory()) {
+      // Recursively add directory contents
+      await addDirectoryToArchive(archive, fullPath, entryArchivePath)
+    } else {
+      // Add file to archive
+      archive.append(createReadStream(fullPath), { name: entryArchivePath })
+    }
+  }
+}
+
+function shouldSkipEntry(name: string): boolean {
+  const skipPatterns = [
+    'node_modules',
+    '.git',
+    '.next',
+    '.cache',
+    'dist',
+    'build',
+    '.DS_Store',
+    'Thumbs.db',
+    '*.log',
+    '.env.local',
+    '.env.*.local'
+  ]
+
+  return skipPatterns.some(pattern => {
+    if (pattern.includes('*')) {
+      const regex = new RegExp(pattern.replace('*', '.*'))
+      return regex.test(name)
+    }
+    return name === pattern
+  })
+}

app/api/github/create/route.ts

@@ -0,0 +1,152 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { templates } from '@/components/template-data'
+
+export async function POST(request: NextRequest) {
+  try {
+    const { templateId, repoName, description, isPrivate } = await request.json()
+
+    const template = templates.find(t => t.id === templateId)
+
+    if (!template) {
+      return NextResponse.json(
+        { error: 'Template not found' },
+        { status: 404 }
+      )
+    }
+
+    // Get GitHub token from environment or request headers
+    const githubToken = request.headers.get('X-GitHub-Token') || process.env.GITHUB_TOKEN
+
+    if (!githubToken) {
+      return NextResponse.json(
+        { error: 'GitHub authentication required' },
+        { status: 401 }
+      )
+    }
+
+    // Create repository using GitHub API
+    const createRepoResponse = await fetch('https://api.github.com/user/repos', {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${githubToken}`,
+        'Accept': 'application/vnd.github.v3+json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        name: repoName || `${template.id}-project`,
+        description: description || template.description,
+        private: isPrivate || false,
+        auto_init: true,
+        has_issues: true,
+        has_projects: false,
+        has_wiki: false
+      })
+    })
+
+    if (!createRepoResponse.ok) {
+      const error = await createRepoResponse.json()
+      return NextResponse.json(
+        { error: error.message || 'Failed to create repository' },
+        { status: createRepoResponse.status }
+      )
+    }
+
+    const repo = await createRepoResponse.json()
+
+    // If template has a GitHub URL, we can suggest importing it
+    if (template.githubUrl) {
+      // Add a README with instructions
+      const readmeContent = `# ${repoName || template.name}
+
+${description || template.description}
+
+## Getting Started
+
+This project was created from the ${template.name} template.
+
+### Quick Setup
+
+\`\`\`bash
+# Clone this repository
+git clone ${repo.clone_url}
+
+# Navigate to the project
+cd ${repo.name}
+
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+\`\`\`
+
+### Template Information
+
+- **Template**: ${template.name}
+- **Category**: ${template.category}
+- **Technologies**: ${template.tech.join(', ')}
+
+### Features
+
+${template.features.map(f => `- ${f}`).join('\n')}
+
+### Deploy
+
+${template.deployUrls?.vercel ? `[![Deploy with Vercel](https://vercel.com/button)](${template.deployUrls.vercel})` : ''}
+${template.deployUrls?.netlify ? `[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](${template.deployUrls.netlify})` : ''}
+${template.deployUrls?.railway ? `[![Deploy on Railway](https://railway.app/button.svg)](${template.deployUrls.railway})` : ''}
+
+## License
+
+MIT
+
+---
+
+Created with [Hanzo AI Templates](https://hanzo.ai/templates)
+`
+
+      // Create README file
+      const createFileResponse = await fetch(
+        `https://api.github.com/repos/${repo.owner.login}/${repo.name}/contents/README.md`,
+        {
+          method: 'PUT',
+          headers: {
+            'Authorization': `Bearer ${githubToken}`,
+            'Accept': 'application/vnd.github.v3+json',
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            message: 'Initial commit with template information',
+            content: Buffer.from(readmeContent).toString('base64')
+          })
+        }
+      )
+
+      if (!createFileResponse.ok) {
+        console.error('Failed to create README:', await createFileResponse.text())
+      }
+    }
+
+    return NextResponse.json({
+      success: true,
+      repository: {
+        name: repo.name,
+        url: repo.html_url,
+        cloneUrl: repo.clone_url,
+        description: repo.description
+      },
+      message: 'Repository created successfully',
+      nextSteps: [
+        `Clone your repository: git clone ${repo.clone_url}`,
+        'Copy template files to your repository',
+        'Commit and push your changes'
+      ]
+    })
+  } catch (error) {
+    console.error('Error creating GitHub repository:', error)
+    return NextResponse.json(
+      { error: 'Failed to create GitHub repository' },
+      { status: 500 }
+    )
+  }
+}

app/page.tsx

@@ -57,7 +57,8 @@ import {
   BarChart3,
   Globe,
   Moon,
-  Sun
+  Sun,
+  GitBranch
 } from 'lucide-react'
 
 export default function GalleryPage() {
@@ -70,6 +71,7 @@ export default function GalleryPage() {
   const [favorites, setFavorites] = useState<string[]>([])
   const [showScrollTop, setShowScrollTop] = useState(false)
   const [isDark, setIsDark] = useState(true)
+  const [downloadingId, setDownloadingId] = useState<string | null>(null)
 
   // Filter templates based on search and category
   const filteredTemplates = templates.filter(template => {
@@ -110,6 +112,34 @@ export default function GalleryPage() {
     )
   }
 
+  const handleDownload = async (template: Template) => {
+    if (!template.downloadable) {
+      alert('This template is not available for download')
+      return
+    }
+
+    setDownloadingId(template.id)
+    try {
+      const response = await fetch(`/api/download/${template.id}`)
+      if (!response.ok) throw new Error('Download failed')
+
+      const blob = await response.blob()
+      const url = window.URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = `${template.id}-template.zip`
+      document.body.appendChild(a)
+      a.click()
+      window.URL.revokeObjectURL(url)
+      document.body.removeChild(a)
+    } catch (error) {
+      console.error('Download error:', error)
+      alert('Failed to download template')
+    } finally {
+      setDownloadingId(null)
+    }
+  }
+
   const getCategoryIcon = (category: string) => {
     switch(category) {
       case 'development': return <Code2 className="w-4 h-4" />
@@ -130,8 +160,6 @@ export default function GalleryPage() {
             <div className="flex items-center gap-2 md:gap-4">
               <Logo className="h-8 w-8" />
               <LogoText className="hidden sm:block h-6" />
-              <Separator orientation="vertical" className="h-6 hidden md:block" />
-              <span className="text-sm text-muted-foreground hidden md:block">Template Gallery</span>
             </div>
 
             <nav className="flex items-center gap-2">
@@ -383,14 +411,16 @@ export default function GalleryPage() {
                       onClick={() => window.location.href = `/template/${template.id}`}
                     >
                       <Eye className="w-4 h-4 mr-2" />
-                      Preview
+                      View
                     </Button>
                     <Button
                       variant="outline"
                       className="flex-1 h-9 text-sm"
+                      onClick={() => handleDownload(template)}
+                      disabled={!template.downloadable || downloadingId === template.id}
                     >
                       <Download className="w-4 h-4 mr-2" />
-                      Use
+                      {downloadingId === template.id ? 'Loading...' : 'Download'}
                     </Button>
                   </div>
 

app/template/[id]/page.tsx

@@ -43,7 +43,10 @@ import {
   Globe,
   Terminal,
   Package,
-  Eye
+  Eye,
+  Rocket,
+  FolderOpen,
+  GitBranch
 } from 'lucide-react'
 
 export default function TemplatePage() {
@@ -55,6 +58,8 @@ export default function TemplatePage() {
   const [viewMode, setViewMode] = useState<'desktop' | 'tablet' | 'mobile'>('desktop')
   const [isDark, setIsDark] = useState(true)
   const [isFullscreen, setIsFullscreen] = useState(false)
+  const [isDownloading, setIsDownloading] = useState(false)
+  const [showDeployMenu, setShowDeployMenu] = useState(false)
 
   useEffect(() => {
     if (isDark) {
@@ -89,6 +94,80 @@ export default function TemplatePage() {
     setTimeout(() => setCopied(false), 2000)
   }
 
+  const handleDownload = async () => {
+    if (!template.downloadable) {
+      alert('This template is not available for download')
+      return
+    }
+
+    setIsDownloading(true)
+    try {
+      const response = await fetch(`/api/download/${template.id}`)
+      if (!response.ok) throw new Error('Download failed')
+
+      const blob = await response.blob()
+      const url = window.URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = `${template.id}-template.zip`
+      document.body.appendChild(a)
+      a.click()
+      window.URL.revokeObjectURL(url)
+      document.body.removeChild(a)
+    } catch (error) {
+      console.error('Download error:', error)
+      alert('Failed to download template')
+    } finally {
+      setIsDownloading(false)
+    }
+  }
+
+  const handleCreateGitHub = async () => {
+    const repoName = prompt('Enter repository name:', `${template.id}-project`)
+    if (!repoName) return
+
+    const githubToken = prompt('Enter your GitHub personal access token:')
+    if (!githubToken) {
+      alert('GitHub token is required. You can create one at github.com/settings/tokens')
+      return
+    }
+
+    try {
+      const response = await fetch('/api/github/create', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-GitHub-Token': githubToken
+        },
+        body: JSON.stringify({
+          templateId: template.id,
+          repoName,
+          description: template.description,
+          isPrivate: false
+        })
+      })
+
+      const data = await response.json()
+      if (data.success) {
+        window.open(data.repository.url, '_blank')
+      } else {
+        alert(`Failed to create repository: ${data.error}`)
+      }
+    } catch (error) {
+      console.error('GitHub creation error:', error)
+      alert('Failed to create GitHub repository')
+    }
+  }
+
+  const handleDeploy = (platform: string) => {
+    if (template.deployUrls?.[platform as keyof typeof template.deployUrls]) {
+      window.open(template.deployUrls[platform as keyof typeof template.deployUrls], '_blank')
+    } else {
+      window.open(`/api/deploy/${platform}?template=${template.id}`, '_blank')
+    }
+    setShowDeployMenu(false)
+  }
+
   const getViewportWidth = () => {
     switch(viewMode) {
       case 'mobile': return 'max-w-[375px]'
@@ -281,12 +360,16 @@ export default function TemplatePage() {
               <TabsContent value="code" className="mt-4">
                 <Card>
                   <CardHeader className="pb-3">
-                    <CardTitle className="text-base sm:text-lg">Quick Start</CardTitle>
-                    <CardDescription className="text-xs sm:text-sm">Get up and running in seconds</CardDescription>
+                    <CardTitle className="text-base sm:text-lg">Installation & Setup</CardTitle>
+                    <CardDescription className="text-xs sm:text-sm">Multiple ways to get started</CardDescription>
                   </CardHeader>
-                  <CardContent className="space-y-4">
+                  <CardContent className="space-y-6">
+                    {/* CLI Installation */}
                     <div>
-                      <label className="text-sm font-medium mb-2 block">Install Command</label>
+                      <label className="text-sm font-medium mb-2 block flex items-center gap-2">
+                        <Terminal className="w-4 h-4" />
+                        CLI Installation
+                      </label>
                       <div className="relative">
                         <code className="block p-2 sm:p-3 bg-muted border border-border rounded-md pr-12 font-mono text-xs sm:text-sm overflow-x-auto">
                           {template.installCmd}
@@ -302,27 +385,99 @@ export default function TemplatePage() {
                       </div>
                     </div>
 
-                    <div className="hidden sm:block">
-                      <label className="text-sm font-medium mb-2 block">Next Steps</label>
-                      <ol className="space-y-2 text-sm text-muted-foreground">
-                        <li className="flex gap-2">
-                          <span className="font-semibold">1.</span>
-                          <span>Run the install command above</span>
+                    {/* Alternative Methods */}
+                    <div>
+                      <label className="text-sm font-medium mb-2 block">Alternative Methods</label>
+                      <div className="grid gap-2">
+                        <div className="flex items-center gap-2 p-2 bg-muted/50 rounded-md">
+                          <Download className="w-4 h-4 text-muted-foreground" />
+                          <span className="text-sm">Download ZIP file and extract locally</span>
+                        </div>
+                        <div className="flex items-center gap-2 p-2 bg-muted/50 rounded-md">
+                          <GitBranch className="w-4 h-4 text-muted-foreground" />
+                          <span className="text-sm">Create GitHub repository with template</span>
+                        </div>
+                        <div className="flex items-center gap-2 p-2 bg-muted/50 rounded-md">
+                          <Rocket className="w-4 h-4 text-muted-foreground" />
+                          <span className="text-sm">Deploy directly to cloud platforms</span>
+                        </div>
+                      </div>
+                    </div>
+
+                    <Separator />
+
+                    {/* Quick Start Steps */}
+                    <div>
+                      <label className="text-sm font-medium mb-2 block">Quick Start Steps</label>
+                      <ol className="space-y-3 text-sm">
+                        <li className="flex gap-3">
+                          <span className="flex-shrink-0 w-6 h-6 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-xs font-semibold">1</span>
+                          <div>
+                            <div className="font-medium">Install the template</div>
+                            <code className="text-xs text-muted-foreground bg-muted px-1 py-0.5 rounded">
+                              {template.installCmd}
+                            </code>
+                          </div>
                         </li>
-                        <li className="flex gap-2">
-                          <span className="font-semibold">2.</span>
-                          <span>Navigate to your project directory</span>
+                        <li className="flex gap-3">
+                          <span className="flex-shrink-0 w-6 h-6 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-xs font-semibold">2</span>
+                          <div>
+                            <div className="font-medium">Navigate to project</div>
+                            <code className="text-xs text-muted-foreground bg-muted px-1 py-0.5 rounded">
+                              cd {template.id}-project
+                            </code>
+                          </div>
                         </li>
-                        <li className="flex gap-2">
-                          <span className="font-semibold">3.</span>
-                          <span>Start the development server with <code className="px-1 py-0.5 bg-muted rounded text-xs">npm run dev</code></span>
+                        <li className="flex gap-3">
+                          <span className="flex-shrink-0 w-6 h-6 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-xs font-semibold">3</span>
+                          <div>
+                            <div className="font-medium">Start development server</div>
+                            <code className="text-xs text-muted-foreground bg-muted px-1 py-0.5 rounded">
+                              npm run dev
+                            </code>
+                          </div>
                         </li>
-                        <li className="flex gap-2">
-                          <span className="font-semibold">4.</span>
-                          <span>Open <code className="px-1 py-0.5 bg-muted rounded text-xs">http://localhost:{template.port}</code></span>
+                        <li className="flex gap-3">
+                          <span className="flex-shrink-0 w-6 h-6 bg-primary text-primary-foreground rounded-full flex items-center justify-center text-xs font-semibold">4</span>
+                          <div>
+                            <div className="font-medium">Open in browser</div>
+                            <code className="text-xs text-muted-foreground bg-muted px-1 py-0.5 rounded">
+                              http://localhost:{template.port}
+                            </code>
+                          </div>
                         </li>
                       </ol>
                     </div>
+
+                    {/* Environment Variables */}
+                    {template.tech.some(t => t.includes('Supabase') || t.includes('Stripe') || t.includes('Firebase')) && (
+                      <>
+                        <Separator />
+                        <div>
+                          <label className="text-sm font-medium mb-2 block">Environment Variables</label>
+                          <p className="text-xs text-muted-foreground mb-2">
+                            Copy <code className="px-1 py-0.5 bg-muted rounded">.env.example</code> to <code className="px-1 py-0.5 bg-muted rounded">.env.local</code> and configure:
+                          </p>
+                          <div className="space-y-1 text-xs font-mono">
+                            {template.tech.includes('Supabase') && (
+                              <>
+                                <div className="text-muted-foreground">NEXT_PUBLIC_SUPABASE_URL=your_url</div>
+                                <div className="text-muted-foreground">NEXT_PUBLIC_SUPABASE_ANON_KEY=your_key</div>
+                              </>
+                            )}
+                            {template.tech.includes('Stripe') && (
+                              <>
+                                <div className="text-muted-foreground">STRIPE_SECRET_KEY=your_secret_key</div>
+                                <div className="text-muted-foreground">NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_key</div>
+                              </>
+                            )}
+                            {template.tech.includes('Firebase') && (
+                              <div className="text-muted-foreground">NEXT_PUBLIC_FIREBASE_CONFIG=your_config</div>
+                            )}
+                          </div>
+                        </div>
+                      </>
+                    )}
                   </CardContent>
                 </Card>
               </TabsContent>
@@ -382,17 +537,82 @@ export default function TemplatePage() {
 
                 {/* Action Buttons - Stack on Mobile */}
                 <div className="space-y-2">
-                  <Button className="w-full text-sm" variant="primary">
+                  {/* Download Button */}
+                  <Button
+                    className="w-full text-sm"
+                    variant="primary"
+                    onClick={handleDownload}
+                    disabled={!template.downloadable || isDownloading}
+                  >
                     <Download className="w-4 h-4 mr-2" />
-                    Use This Template
+                    {isDownloading ? 'Downloading...' : 'Download Template'}
+                  </Button>
+
+                  {/* Create GitHub Repo Button */}
+                  <Button
+                    className="w-full text-sm"
+                    variant="outline"
+                    onClick={handleCreateGitHub}
+                  >
+                    <GitBranch className="w-4 h-4 mr-2" />
+                    Create GitHub Repo
                   </Button>
 
+                  {/* Deploy Button with Dropdown */}
+                  <div className="relative">
+                    <Button
+                      className="w-full text-sm"
+                      variant="outline"
+                      onClick={() => setShowDeployMenu(!showDeployMenu)}
+                    >
+                      <Rocket className="w-4 h-4 mr-2" />
+                      Deploy to Platform
+                    </Button>
+
+                    {showDeployMenu && (
+                      <div className="absolute top-full mt-2 w-full bg-background border border-border rounded-md shadow-lg z-10">
+                        {template.deployUrls?.vercel && (
+                          <button
+                            onClick={() => handleDeploy('vercel')}
+                            className="w-full text-left px-4 py-2 hover:bg-muted transition-colors text-sm"
+                          >
+                            Deploy to Vercel
+                          </button>
+                        )}
+                        {template.deployUrls?.netlify && (
+                          <button
+                            onClick={() => handleDeploy('netlify')}
+                            className="w-full text-left px-4 py-2 hover:bg-muted transition-colors text-sm"
+                          >
+                            Deploy to Netlify
+                          </button>
+                        )}
+                        {template.deployUrls?.railway && (
+                          <button
+                            onClick={() => handleDeploy('railway')}
+                            className="w-full text-left px-4 py-2 hover:bg-muted transition-colors text-sm"
+                          >
+                            Deploy to Railway
+                          </button>
+                        )}
+                        {template.deployUrls?.render && (
+                          <button
+                            onClick={() => handleDeploy('render')}
+                            className="w-full text-left px-4 py-2 hover:bg-muted transition-colors text-sm"
+                          >
+                            Deploy to Render
+                          </button>
+                        )}
+                      </div>
+                    )}
+                  </div>
+
                   <div className="grid grid-cols-2 gap-2">
                     {template.githubUrl && (
                       <Button className="text-sm" variant="outline" asChild>
                         <a href={template.githubUrl} target="_blank" rel="noopener noreferrer">
                           <Github className="w-4 h-4 sm:mr-2" />
-                          <span className="hidden sm:inline">GitHub</span>
+                          <span className="hidden sm:inline">View Source</span>
                         </a>
                       </Button>
                     )}
@@ -401,7 +621,7 @@ export default function TemplatePage() {
                       <Button className="text-sm" variant="outline" asChild>
                         <a href={template.demoUrl} target="_blank" rel="noopener noreferrer">
                           <Globe className="w-4 h-4 sm:mr-2" />
-                          <span className="hidden sm:inline">Demo</span>
+                          <span className="hidden sm:inline">Live Demo</span>
                         </a>
                       </Button>
                     )}

components/template-data.ts

@@ -7,7 +7,7 @@ export interface Template {
   port: number
   primaryColor: string
   secondaryColor: string
-  gradient: string
+  // gradient field removed - using monochromatic theme
   features: string[]
   tech: string[]
   category: 'development' | 'business' | 'creative' | 'analytics' | 'content'
@@ -21,6 +21,14 @@ export interface Template {
   installCmd: string
   updatedAt: string
   pricing: 'Free' | 'Pro' | 'Enterprise'
+  downloadable?: boolean
+  templatePath?: string
+  deployUrls?: {
+    vercel?: string
+    netlify?: string
+    railway?: string
+    render?: string
+  }
 }
 
 export const templates: Template[] = [
@@ -33,7 +41,6 @@ export const templates: Template[] = [
     port: 3001,
     primaryColor: '#ffffff',
     secondaryColor: '#9ca3af',
-    gradient: 'from-white to-gray-400',
     features: [
       'AI-Powered Code Generation',
       'Real-time Collaboration',
@@ -51,7 +58,15 @@ export const templates: Template[] = [
     featured: true,
     installCmd: 'npx create-hanzo-app --template devforge',
     updatedAt: '2 days ago',
-    pricing: 'Free'
+    pricing: 'Free',
+    downloadable: true,
+    templatePath: 'devtool',
+    githubUrl: 'https://github.com/hanzoai/template-devforge',
+    deployUrls: {
+      vercel: 'https://vercel.com/new/clone?repository-url=https://github.com/hanzoai/template-devforge',
+      netlify: 'https://app.netlify.com/start/deploy?repository=https://github.com/hanzoai/template-devforge',
+      railway: 'https://railway.app/new/template?template=https://github.com/hanzoai/template-devforge'
+    }
   },
   {
     id: 'mobilefirst',
@@ -62,7 +77,6 @@ export const templates: Template[] = [
     port: 3002,
     primaryColor: '#ffffff',
     secondaryColor: '#9ca3af',
-    gradient: 'from-white to-gray-400',
     features: [
       'Drag & Drop Builder',
       'Cross-Platform Export',
@@ -79,7 +93,14 @@ export const templates: Template[] = [
     featured: false,
     installCmd: 'npx create-hanzo-app --template mobile',
     updatedAt: 'Today',
-    pricing: 'Pro'
+    pricing: 'Pro',
+    downloadable: true,
+    templatePath: 'mobile',
+    githubUrl: 'https://github.com/hanzoai/template-mobile',
+    deployUrls: {
+      vercel: 'https://vercel.com/new/clone?repository-url=https://github.com/hanzoai/template-mobile',
+      netlify: 'https://app.netlify.com/start/deploy?repository=https://github.com/hanzoai/template-mobile'
+    }
   },
   {
     id: 'saasify',
@@ -90,7 +111,6 @@ export const templates: Template[] = [
     port: 3003,
     primaryColor: '#ffffff',
     secondaryColor: '#9ca3af',
-    gradient: 'from-white to-gray-400',
     features: [
       'Authentication & SSO',
       'Stripe Billing',
@@ -107,7 +127,16 @@ export const templates: Template[] = [
     featured: true,
     installCmd: 'npx create-hanzo-app --template saas',
     updatedAt: '1 week ago',
-    pricing: 'Pro'
+    pricing: 'Pro',
+    downloadable: true,
+    templatePath: 'saas',
+    githubUrl: 'https://github.com/hanzoai/template-saas',
+    deployUrls: {
+      vercel: 'https://vercel.com/new/clone?repository-url=https://github.com/hanzoai/template-saas',
+      netlify: 'https://app.netlify.com/start/deploy?repository=https://github.com/hanzoai/template-saas',
+      railway: 'https://railway.app/new/template?template=https://github.com/hanzoai/template-saas',
+      render: 'https://render.com/deploy?repo=https://github.com/hanzoai/template-saas'
+    }
   },
   {
     id: 'startupkit',
@@ -118,7 +147,6 @@ export const templates: Template[] = [
     port: 3004,
     primaryColor: '#ffffff',
     secondaryColor: '#9ca3af',
-    gradient: 'from-white to-gray-400',
     features: [
       'Landing Pages',
       'Investor Dashboards',
@@ -135,7 +163,14 @@ export const templates: Template[] = [
     featured: false,
     installCmd: 'npx create-hanzo-app --template startup',
     updatedAt: '3 days ago',
-    pricing: 'Pro'
+    pricing: 'Pro',
+    downloadable: true,
+    templatePath: 'startup',
+    githubUrl: 'https://github.com/hanzoai/template-startup',
+    deployUrls: {
+      vercel: 'https://vercel.com/new/clone?repository-url=https://github.com/hanzoai/template-startup',
+      netlify: 'https://app.netlify.com/start/deploy?repository=https://github.com/hanzoai/template-startup'
+    }
   },
   {
     id: 'analyticsdash',
@@ -146,7 +181,6 @@ export const templates: Template[] = [
     port: 3005,
     primaryColor: '#ffffff',
     secondaryColor: '#9ca3af',
-    gradient: 'from-white to-gray-400',
     features: [
       'Real-time Data',
       'Custom Dashboards',
@@ -164,7 +198,14 @@ export const templates: Template[] = [
     featured: false,
     installCmd: 'npx create-hanzo-app --template analytics',
     updatedAt: '1 day ago',
-    pricing: 'Enterprise'
+    pricing: 'Enterprise',
+    downloadable: true,
+    templatePath: 'analytics',
+    githubUrl: 'https://github.com/hanzoai/template-analytics',
+    deployUrls: {
+      vercel: 'https://vercel.com/new/clone?repository-url=https://github.com/hanzoai/template-analytics',
+      railway: 'https://railway.app/new/template?template=https://github.com/hanzoai/template-analytics'
+    }
   },
   {
     id: 'blog',
@@ -175,7 +216,6 @@ export const templates: Template[] = [
     port: 3006,
     primaryColor: '#ffffff',
     secondaryColor: '#9ca3af',
-    gradient: 'from-white to-gray-400',
     features: [
       'MDX Support',
       'SEO Optimized',
@@ -192,7 +232,14 @@ export const templates: Template[] = [
     featured: false,
     installCmd: 'npx create-hanzo-app --template blog',
     updatedAt: '5 days ago',
-    pricing: 'Free'
+    pricing: 'Free',
+    downloadable: true,
+    templatePath: 'blog',
+    githubUrl: 'https://github.com/hanzoai/template-blog',
+    deployUrls: {
+      vercel: 'https://vercel.com/new/clone?repository-url=https://github.com/hanzoai/template-blog',
+      netlify: 'https://app.netlify.com/start/deploy?repository=https://github.com/hanzoai/template-blog'
+    }
   },
   {
     id: 'changelog',
@@ -203,7 +250,6 @@ export const templates: Template[] = [
     port: 3007,
     primaryColor: '#ffffff',
     secondaryColor: '#9ca3af',
-    gradient: 'from-white to-gray-400',
     features: [
       'Version Control',
       'RSS Feed',
@@ -219,6 +265,129 @@ export const templates: Template[] = [
     featured: false,
     installCmd: 'npx create-hanzo-app --template changelog',
     updatedAt: '1 week ago',
+    pricing: 'Free',
+    downloadable: true,
+    templatePath: 'changelog',
+    githubUrl: 'https://github.com/hanzoai/template-changelog',
+    deployUrls: {
+      vercel: 'https://vercel.com/new/clone?repository-url=https://github.com/hanzoai/template-changelog',
+      netlify: 'https://app.netlify.com/start/deploy?repository=https://github.com/hanzoai/template-changelog'
+    }
+  },
+  {
+    id: 'ai-chat',
+    name: 'AI Chat',
+    tagline: 'Universal AI Chat Interface',
+    description: 'Multi-provider chat platform with MCP tools and 100+ LLM models',
+    icon: '🤖',
+    port: 3009,
+    primaryColor: '#ffffff',
+    secondaryColor: '#9ca3af',
+    gradient: 'from-white to-gray-400',
+    features: [
+      'Model Context Protocol',
+      '100+ LLM Providers',
+      'Real-time Streaming',
+      'Code Execution',
+      'Multi-Modal Support',
+      'Team Collaboration'
+    ],
+    tech: ['Next.js', 'LibreChat', 'MCP', 'WebSockets', 'PostgreSQL'],
+    category: 'development',
+    popularity: 98,
+    status: 'new',
+    price: 'Free',
+    rating: 99,
+    featured: true,
+    installCmd: 'npx create-hanzo-app --template ai-chat',
+    updatedAt: 'Today',
+    pricing: 'Free'
+  },
+  {
+    id: 'search-interface',
+    name: 'Search Interface',
+    tagline: 'AI-Powered Search Platform',
+    description: 'Next-generation search with generative UI and real-time answers',
+    icon: '🔍',
+    port: 3010,
+    primaryColor: '#ffffff',
+    secondaryColor: '#9ca3af',
+    gradient: 'from-white to-gray-400',
+    features: [
+      'AI Understanding',
+      'Generative UI',
+      'Multi-Source Search',
+      'Real-time Results',
+      'Smart Filters',
+      'Search Analytics'
+    ],
+    tech: ['Next.js', 'Supabase', 'Vector DB', 'AI Models', 'Edge Functions'],
+    category: 'development',
+    popularity: 93,
+    status: 'new',
+    price: '$49/mo',
+    rating: 97,
+    featured: true,
+    installCmd: 'npx create-hanzo-app --template search',
+    updatedAt: 'Today',
+    pricing: 'Pro'
+  },
+  {
+    id: 'ecommerce-dash',
+    name: 'E-Commerce Dashboard',
+    tagline: 'Complete Store Management',
+    description: 'Professional e-commerce admin dashboard with analytics and inventory',
+    icon: '🛍️',
+    port: 3011,
+    primaryColor: '#ffffff',
+    secondaryColor: '#9ca3af',
+    gradient: 'from-white to-gray-400',
+    features: [
+      'Sales Analytics',
+      'Inventory Management',
+      'Customer Insights',
+      'Order Processing',
+      'Marketing Tools',
+      'Real-time Metrics'
+    ],
+    tech: ['Next.js', 'PostgreSQL', 'Stripe', 'Chart.js', 'Redis'],
+    category: 'business',
+    popularity: 91,
+    status: 'new',
+    price: '$79/mo',
+    rating: 96,
+    featured: false,
+    installCmd: 'npx create-hanzo-app --template ecommerce',
+    updatedAt: 'Today',
+    pricing: 'Pro'
+  },
+  {
+    id: 'api-docs',
+    name: 'API Documentation',
+    tagline: 'Developer-First API Docs',
+    description: 'Interactive API documentation with testing playground and SDKs',
+    icon: '📚',
+    port: 3012,
+    primaryColor: '#ffffff',
+    secondaryColor: '#9ca3af',
+    gradient: 'from-white to-gray-400',
+    features: [
+      'Interactive Examples',
+      'Multiple SDKs',
+      'API Playground',
+      'OpenAPI Spec',
+      'Versioning',
+      'Webhooks'
+    ],
+    tech: ['Next.js', 'MDX', 'OpenAPI', 'Swagger', 'Fumadocs'],
+    category: 'development',
+    popularity: 87,
+    status: 'stable',
+    price: 'Free',
+    rating: 95,
+    featured: false,
+    installCmd: 'npx create-hanzo-app --template api-docs',
+    updatedAt: 'Today',
     pricing: 'Free'
   },
   {
@@ -230,7 +399,6 @@ export const templates: Template[] = [
     port: 3008,
     primaryColor: '#ffffff',
     secondaryColor: '#9ca3af',
-    gradient: 'from-white to-gray-400',
     features: [
       'Project Gallery',
       'About Section',
@@ -247,7 +415,14 @@ export const templates: Template[] = [
     featured: false,
     installCmd: 'npx create-hanzo-app --template portfolio',
     updatedAt: '4 days ago',
-    pricing: 'Free'
+    pricing: 'Free',
+    downloadable: true,
+    templatePath: 'portfolio',
+    githubUrl: 'https://github.com/hanzoai/template-portfolio',
+    deployUrls: {
+      vercel: 'https://vercel.com/new/clone?repository-url=https://github.com/hanzoai/template-portfolio',
+      netlify: 'https://app.netlify.com/start/deploy?repository=https://github.com/hanzoai/template-portfolio'
+    }
   }
 ]
 

package-lock.json

@@ -29,6 +29,8 @@
         "@radix-ui/react-toast": "^1.2.0",
         "@radix-ui/react-toggle": "^1.1.0",
         "@radix-ui/react-tooltip": "^1.1.0",
+        "@types/archiver": "^6.0.3",
+        "archiver": "^7.0.1",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "date-fns": "^4.1.0",
@@ -53,6 +55,7 @@
         "eslint": "^9",
         "eslint-config-next": "15.3.5",
         "postcss": "^8.5.6",
+        "puppeteer": "^22.0.0",
         "tailwindcss": "^3.4.17",
         "typescript": "^5"
       }
@@ -70,6 +73,31 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@babel/code-frame": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
+      "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/runtime": {
       "version": "7.28.4",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
@@ -880,7 +908,6 @@
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
       "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "string-width": "^5.1.2",
@@ -1178,13 +1205,35 @@
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
       "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "engines": {
         "node": ">=14"
       }
     },
+    "node_modules/@puppeteer/browsers": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.3.0.tgz",
+      "integrity": "sha512-ioXoq9gPxkss4MYhD+SFaU9p1IHFUX0ILAWFPyjGaBdjLsYAlZw6j1iLA0N/m12uVHLFDfSYNF7EQccjinIMDA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "debug": "^4.3.5",
+        "extract-zip": "^2.0.1",
+        "progress": "^2.0.3",
+        "proxy-agent": "^6.4.0",
+        "semver": "^7.6.3",
+        "tar-fs": "^3.0.6",
+        "unbzip2-stream": "^1.4.3",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "browsers": "lib/cjs/main-cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@radix-ui/number": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
@@ -2554,6 +2603,13 @@
         "tailwindcss": ">=3.2.0"
       }
     },
+    "node_modules/@tootallnate/quickjs-emscripten": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/@tootallnate/quickjs-emscripten/-/quickjs-emscripten-0.23.0.tgz",
+      "integrity": "sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
@@ -2565,6 +2621,15 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/archiver": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@types/archiver/-/archiver-6.0.3.tgz",
+      "integrity": "sha512-a6wUll6k3zX6qs5KlxIggs1P1JcYJaTCx2gnlr+f0S1yd2DoaEwoIK10HmBaLnZwWneBz+JBm0dwcZu0zECBcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/readdir-glob": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -2614,7 +2679,6 @@
       "version": "20.19.17",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.17.tgz",
       "integrity": "sha512-gfehUI8N1z92kygssiuWvLiwcbOB3IRktR6hTDgJlXMYh5OvkPSRmgfoBUmfZt+vhwJtX7v1Yw4KvvAf7c5QKQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
@@ -2648,6 +2712,26 @@
         "@types/react": "^18.0.0"
       }
     },
+    "node_modules/@types/readdir-glob": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@types/readdir-glob/-/readdir-glob-1.1.5.tgz",
+      "integrity": "sha512-raiuEPUYqXu+nvtY2Pe8s8FEmZ3x5yAH4VkLdihcPdalvsHltomrRC9BzuStrJ9yk06470hS0Crw0f1pXqD+Hg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/yauzl": {
+      "version": "2.10.3",
+      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
+      "integrity": "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.44.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.44.0.tgz",
@@ -3205,6 +3289,18 @@
         "win32"
       ]
     },
+    "node_modules/abort-controller": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
+      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+      "license": "MIT",
+      "dependencies": {
+        "event-target-shim": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=6.5"
+      }
+    },
     "node_modules/accepts": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
@@ -3241,6 +3337,16 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -3261,7 +3367,6 @@
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
       "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -3274,7 +3379,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
@@ -3320,6 +3424,42 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/archiver": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/archiver/-/archiver-7.0.1.tgz",
+      "integrity": "sha512-ZcbTaIqJOfCc03QwD468Unz/5Ir8ATtvAHsK+FdXbDIbGfihqh9mrvdcYunQzqn4HrvWWaFyaxJhGZagaJJpPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "archiver-utils": "^5.0.2",
+        "async": "^3.2.4",
+        "buffer-crc32": "^1.0.0",
+        "readable-stream": "^4.0.0",
+        "readdir-glob": "^1.1.2",
+        "tar-stream": "^3.0.0",
+        "zip-stream": "^6.0.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/archiver-utils": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-5.0.2.tgz",
+      "integrity": "sha512-wuLJMmIBQYCsGZgYLTy5FIB2pF6Lfb6cXMSF8Qywwk3t20zWnAi7zLcQFdKQmIB8wyZpY5ER38x08GbwtR2cLA==",
+      "license": "MIT",
+      "dependencies": {
+        "glob": "^10.0.0",
+        "graceful-fs": "^4.2.0",
+        "is-stream": "^2.0.1",
+        "lazystream": "^1.0.0",
+        "lodash": "^4.17.15",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -3516,6 +3656,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/ast-types": {
+      "version": "0.13.4",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.13.4.tgz",
+      "integrity": "sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/ast-types-flow": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
@@ -3523,6 +3676,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "license": "MIT"
+    },
     "node_modules/async-function": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
@@ -3607,11 +3766,133 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/b4a": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.7.1.tgz",
+      "integrity": "sha512-ZovbrBV0g6JxK5cGUF1Suby1vLfKjv4RWi8IxoaO/Mon8BDD9I21RxjHFtgQ+kskJqLAVyQZly3uMBui+vhc8Q==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "react-native-b4a": "*"
+      },
+      "peerDependenciesMeta": {
+        "react-native-b4a": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "license": "MIT"
+    },
+    "node_modules/bare-events": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.7.0.tgz",
+      "integrity": "sha512-b3N5eTW1g7vXkw+0CXh/HazGTcO5KYuu/RCNaJbDMPI6LHDi+7qe8EmxKUVe1sUbY2KZOVZFyj62x0OEz9qyAA==",
+      "license": "Apache-2.0",
+      "optional": true
+    },
+    "node_modules/bare-fs": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-4.4.4.tgz",
+      "integrity": "sha512-Q8yxM1eLhJfuM7KXVP3zjhBvtMJCYRByoTT+wHXjpdMELv0xICFJX+1w4c7csa+WZEOsq4ItJ4RGwvzid6m/dw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "bare-events": "^2.5.4",
+        "bare-path": "^3.0.0",
+        "bare-stream": "^2.6.4",
+        "bare-url": "^2.2.2",
+        "fast-fifo": "^1.3.2"
+      },
+      "engines": {
+        "bare": ">=1.16.0"
+      },
+      "peerDependencies": {
+        "bare-buffer": "*"
+      },
+      "peerDependenciesMeta": {
+        "bare-buffer": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/bare-os": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-3.6.2.tgz",
+      "integrity": "sha512-T+V1+1srU2qYNBmJCXZkUY5vQ0B4FSlL3QDROnKQYOqeiQR8UbjNHlPa+TIbM4cuidiN9GaTaOZgSEgsvPbh5A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "bare": ">=1.14.0"
+      }
+    },
+    "node_modules/bare-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bare-path/-/bare-path-3.0.0.tgz",
+      "integrity": "sha512-tyfW2cQcB5NN8Saijrhqn0Zh7AnFNsnczRcuWODH0eYAXBsJ5gVxAUuNr7tsHSC6IZ77cA0SitzT+s47kot8Mw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "bare-os": "^3.0.1"
+      }
+    },
+    "node_modules/bare-stream": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-2.7.0.tgz",
+      "integrity": "sha512-oyXQNicV1y8nc2aKffH+BUHFRXmx6VrPzlnaEvMhram0nPBrKcEdcyBg5r08D0i8VxngHFAiVyn1QKXpSG0B8A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "streamx": "^2.21.0"
+      },
+      "peerDependencies": {
+        "bare-buffer": "*",
+        "bare-events": "*"
+      },
+      "peerDependenciesMeta": {
+        "bare-buffer": {
+          "optional": true
+        },
+        "bare-events": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/bare-url": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/bare-url/-/bare-url-2.2.2.tgz",
+      "integrity": "sha512-g+ueNGKkrjMazDG3elZO1pNs3HY5+mMmOet1jtKyhOaCnkLzitxf26z7hoAEkDNgdNmnc1KIlt/dw6Po6xZMpA==",
       "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "bare-path": "^3.0.0"
+      }
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
@@ -3624,6 +3905,16 @@
         "baseline-browser-mapping": "dist/cli.js"
       }
     },
+    "node_modules/basic-ftp": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/basic-ftp/-/basic-ftp-5.0.5.tgz",
+      "integrity": "sha512-4Bcg1P8xhUuqcii/S0Z9wiHIrQVPMermM1any+MX5GeGD7faD3/msQUDGLol9wOcz4/jbg/WJnGqoJF6LiBdtg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -3721,6 +4012,39 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
+    "node_modules/buffer-crc32": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-1.0.0.tgz",
+      "integrity": "sha512-Db1SbgBS/fg/392AblrMJk97KggmvYhr4pB5ZIMTWtaivCPMWLkmb7m21cJvpvgK+J3nsU2CmmixNBZx4vFj/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/busboy": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -3884,6 +4208,31 @@
         "node": ">= 6"
       }
     },
+    "node_modules/chromium-bidi": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-0.6.3.tgz",
+      "integrity": "sha512-qXlsCmpCZJAnoTYI83Iu6EdYQpMYdVkCfq08KDh2pmlVqK5t5IA9mGs4/LwCwp4fqisSOMXZxP3HIh8w8aRn0A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "mitt": "3.0.1",
+        "urlpattern-polyfill": "10.0.0",
+        "zod": "3.23.8"
+      },
+      "peerDependencies": {
+        "devtools-protocol": "*"
+      }
+    },
+    "node_modules/chromium-bidi/node_modules/zod": {
+      "version": "3.23.8",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
+      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "node_modules/class-variance-authority": {
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
@@ -3902,35 +4251,113 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
-    "node_modules/clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/cliui/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">=6"
+        "node": ">=8"
       }
     },
-    "node_modules/cmdk": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-0.2.1.tgz",
-      "integrity": "sha512-U6//9lQ6JvT47+6OF6Gi8BvkxYQ8SCRRSKIJkthIMsFsLZRG0cKvTtuTaefyIKMQb8rvvXy0wGdpTNq/jPtm+g==",
+    "node_modules/cliui/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cliui/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-dialog": "1.0.0"
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
       },
-      "peerDependencies": {
-        "react": "^18.0.0",
-        "react-dom": "^18.0.0"
+      "engines": {
+        "node": ">=8"
       }
     },
-    "node_modules/cmdk/node_modules/@radix-ui/primitive": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.0.tgz",
-      "integrity": "sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==",
+    "node_modules/cliui/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.13.10"
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/cmdk": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-0.2.1.tgz",
+      "integrity": "sha512-U6//9lQ6JvT47+6OF6Gi8BvkxYQ8SCRRSKIJkthIMsFsLZRG0cKvTtuTaefyIKMQb8rvvXy0wGdpTNq/jPtm+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-dialog": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/primitive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.0.tgz",
+      "integrity": "sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
       }
     },
     "node_modules/cmdk/node_modules/@radix-ui/react-compose-refs": {
@@ -4178,7 +4605,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
@@ -4191,7 +4617,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/commander": {
@@ -4204,6 +4629,22 @@
         "node": ">= 6"
       }
     },
+    "node_modules/compress-commons": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-6.0.2.tgz",
+      "integrity": "sha512-6FqVXeETqWPoGcfzrXb37E50NP0LXT8kAMu5ooZayhWWdgEY4lBEEcbQNXtkuKQsGduxiIcI4gOTsxTmuq/bSg==",
+      "license": "MIT",
+      "dependencies": {
+        "crc-32": "^1.2.0",
+        "crc32-stream": "^6.0.0",
+        "is-stream": "^2.0.1",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -4250,6 +4691,12 @@
         "node": ">=6.6.0"
       }
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
     "node_modules/cors": {
       "version": "2.8.5",
       "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
@@ -4263,6 +4710,58 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/cosmiconfig": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz",
+      "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "env-paths": "^2.2.1",
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "license": "Apache-2.0",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/crc32-stream": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-6.0.0.tgz",
+      "integrity": "sha512-piICUB6ei4IlTv1+653yq5+KoqfBYmj9bw6LqXoOneTMDXk5nM1qt12mFW1caG3LlJXEKW1Bp0WggEmIfQB34g==",
+      "license": "MIT",
+      "dependencies": {
+        "crc-32": "^1.2.0",
+        "readable-stream": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -4302,6 +4801,16 @@
       "dev": true,
       "license": "BSD-2-Clause"
     },
+    "node_modules/data-uri-to-buffer": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-6.0.2.tgz",
+      "integrity": "sha512-7hvf7/GW8e86rW0ptuwS3OcBGDjIi6SZva7hCyWC0yYry2cOPmLIjXAUHI6DK2HsnwJd9ifmt57i8eV2n4YNpw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/data-view-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
@@ -4426,6 +4935,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/degenerator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/degenerator/-/degenerator-5.0.1.tgz",
+      "integrity": "sha512-TllpMR/t0M5sqCXfj85i4XaAzxmS5tVA16dqvdkMwGmzI+dXLXnw3J+3Vdv7VKw+ThlTMboK6i9rnZ6Nntj5CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ast-types": "^0.13.4",
+        "escodegen": "^2.1.0",
+        "esprima": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -4451,6 +4975,13 @@
       "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
       "license": "MIT"
     },
+    "node_modules/devtools-protocol": {
+      "version": "0.0.1312386",
+      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1312386.tgz",
+      "integrity": "sha512-DPnhUXvmvKT2dFA/j7B+riVLUt9Q6RKJlcppojL5CoRywJJKLDYnRlw0gTFKfgDPHP5E04UoB71SxoJlVZy8FA==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -4496,7 +5027,6 @@
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/ee-first": {
@@ -4544,7 +5074,6 @@
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/encodeurl": {
@@ -4556,6 +5085,36 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/end-of-stream": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
+      "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
+    "node_modules/env-paths": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
+      "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.24.0",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.0.tgz",
@@ -4759,6 +5318,28 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/escodegen": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
+      "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esprima": "^4.0.1",
+        "estraverse": "^5.2.0",
+        "esutils": "^2.0.2"
+      },
+      "bin": {
+        "escodegen": "bin/escodegen.js",
+        "esgenerate": "bin/esgenerate.js"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "optionalDependencies": {
+        "source-map": "~0.6.1"
+      }
+    },
     "node_modules/eslint": {
       "version": "9.35.0",
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.35.0.tgz",
@@ -5139,6 +5720,20 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/esquery": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
@@ -5194,6 +5789,24 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/event-target-shim": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
+      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
     "node_modules/eventsource": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-3.0.7.tgz",
@@ -5272,12 +5885,39 @@
         "express": ">= 4.11"
       }
     },
+    "node_modules/extract-zip": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
+      "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "get-stream": "^5.1.0",
+        "yauzl": "^2.10.0"
+      },
+      "bin": {
+        "extract-zip": "cli.js"
+      },
+      "engines": {
+        "node": ">= 10.17.0"
+      },
+      "optionalDependencies": {
+        "@types/yauzl": "^2.9.1"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "license": "MIT"
     },
+    "node_modules/fast-fifo": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz",
+      "integrity": "sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==",
+      "license": "MIT"
+    },
     "node_modules/fast-glob": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
@@ -5331,6 +5971,16 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fd-slicer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+      "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pend": "~1.2.0"
+      }
+    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -5450,7 +6100,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
       "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "cross-spawn": "^7.0.6",
@@ -5577,6 +6226,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -5623,6 +6282,22 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/get-stream": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pump": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/get-symbol-description": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
@@ -5654,11 +6329,25 @@
         "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
       }
     },
+    "node_modules/get-uri": {
+      "version": "6.0.5",
+      "resolved": "https://registry.npmjs.org/get-uri/-/get-uri-6.0.5.tgz",
+      "integrity": "sha512-b1O07XYq8eRuVzBNgJLstU6FYc1tS6wnMtF1I1D9lE8LxZSOGZ7LhxN54yPP6mGw5f2CkXY2BQUL9Fx41qvcIg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "basic-ftp": "^5.0.2",
+        "data-uri-to-buffer": "^6.0.2",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/glob": {
       "version": "10.4.5",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
       "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "foreground-child": "^3.1.0",
@@ -5692,7 +6381,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
       "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
@@ -5702,7 +6390,6 @@
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
       "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^2.0.1"
@@ -5765,6 +6452,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
     "node_modules/graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -5889,42 +6582,90 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 14"
       }
     },
-    "node_modules/ignore": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
-      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
       "engines": {
-        "node": ">= 4"
+        "node": ">= 14"
       }
     },
-    "node_modules/import-fresh": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
-      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
-      "dev": true,
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
       "license": "MIT",
       "dependencies": {
-        "parent-module": "^1.0.0",
-        "resolve-from": "^4.0.0"
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
       "engines": {
-        "node": ">=6"
-      },
-      "funding": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
@@ -5969,6 +6710,16 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/ip-address": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.0.1.tgz",
+      "integrity": "sha512-NWv9YLW4PoW2B7xtzaS3NCot75m6nK7Icdv0o3lfMceJVRfSoQwqD4wEH5rLwoKJwUiZ/rfpiVBhnaF0FK4HoA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -5996,6 +6747,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-async-function": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
@@ -6166,7 +6924,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -6311,6 +7068,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-string": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
@@ -6443,7 +7212,6 @@
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
       "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
-      "dev": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
@@ -6491,6 +7259,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -6563,6 +7338,54 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/lazystream": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.1.tgz",
+      "integrity": "sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==",
+      "license": "MIT",
+      "dependencies": {
+        "readable-stream": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.6.3"
+      }
+    },
+    "node_modules/lazystream/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
+    "node_modules/lazystream/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/lazystream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
+    "node_modules/lazystream/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -6613,6 +7436,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
     "node_modules/lodash.castarray": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
@@ -6653,7 +7482,6 @@
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
       "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/lucide-react": {
@@ -6792,12 +7620,18 @@
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
       "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "dev": true,
       "license": "ISC",
       "engines": {
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/motion-dom": {
       "version": "11.18.1",
       "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.18.1.tgz",
@@ -6881,6 +7715,16 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/netmask": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/netmask/-/netmask-2.0.2.tgz",
+      "integrity": "sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/next": {
       "version": "15.3.5",
       "resolved": "https://registry.npmjs.org/next/-/next-15.3.5.tgz",
@@ -6984,7 +7828,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -7232,11 +8075,44 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/pac-proxy-agent": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/pac-proxy-agent/-/pac-proxy-agent-7.2.0.tgz",
+      "integrity": "sha512-TEB8ESquiLMc0lV8vcd5Ql/JAKAoyzHFXaStwjkzpOpC5Yv+pIzLfHvjTSdf3vpa2bMiUQrg9i6276yn8666aA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tootallnate/quickjs-emscripten": "^0.23.0",
+        "agent-base": "^7.1.2",
+        "debug": "^4.3.4",
+        "get-uri": "^6.0.1",
+        "http-proxy-agent": "^7.0.0",
+        "https-proxy-agent": "^7.0.6",
+        "pac-resolver": "^7.0.1",
+        "socks-proxy-agent": "^8.0.5"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/pac-resolver": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/pac-resolver/-/pac-resolver-7.0.1.tgz",
+      "integrity": "sha512-5NPgf87AT2STgwa2ntRMr45jTKrYBGkVU36yT0ig/n/GMAa3oPqhZfIQ2kMEimReg0+t9kZViDVZ83qfVUlckg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "degenerator": "^5.0.0",
+        "netmask": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/package-json-from-dist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
       "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
-      "dev": true,
       "license": "BlueOak-1.0.0"
     },
     "node_modules/parent-module": {
@@ -7252,6 +8128,25 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -7291,7 +8186,6 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
       "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-      "dev": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {
         "lru-cache": "^10.2.0",
@@ -7314,6 +8208,13 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/pend": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+      "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -7537,6 +8438,31 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
+    "node_modules/progress": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
+      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -7562,6 +8488,54 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-agent": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/proxy-agent/-/proxy-agent-6.5.0.tgz",
+      "integrity": "sha512-TmatMXdr2KlRiA2CyDu8GqR8EjahTG3aY3nXjdzFyoZbmB8hrBsTyMezhULIXKnC0jpfjlmiZ3+EaCzoInSu/A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "^4.3.4",
+        "http-proxy-agent": "^7.0.1",
+        "https-proxy-agent": "^7.0.6",
+        "lru-cache": "^7.14.1",
+        "pac-proxy-agent": "^7.1.0",
+        "proxy-from-env": "^1.1.0",
+        "socks-proxy-agent": "^8.0.5"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/proxy-agent/node_modules/lru-cache": {
+      "version": "7.18.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
+      "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/pump": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.3.tgz",
+      "integrity": "sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -7571,6 +8545,44 @@
         "node": ">=6"
       }
     },
+    "node_modules/puppeteer": {
+      "version": "22.15.0",
+      "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-22.15.0.tgz",
+      "integrity": "sha512-XjCY1SiSEi1T7iSYuxS82ft85kwDJUS7wj1Z0eGVXKdtr5g4xnVcbjwxhq5xBnpK/E7x1VZZoJDxpjAOasHT4Q==",
+      "deprecated": "< 24.10.2 is no longer supported",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@puppeteer/browsers": "2.3.0",
+        "cosmiconfig": "^9.0.0",
+        "devtools-protocol": "0.0.1312386",
+        "puppeteer-core": "22.15.0"
+      },
+      "bin": {
+        "puppeteer": "lib/esm/puppeteer/node/cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/puppeteer-core": {
+      "version": "22.15.0",
+      "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-22.15.0.tgz",
+      "integrity": "sha512-cHArnywCiAAVXa3t4GGL2vttNxh7GqXtIYGym99egkNJ3oG//wL9LkvO4WE8W1TJe95t1F1ocu9X4xWaGsOKOA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@puppeteer/browsers": "2.3.0",
+        "chromium-bidi": "0.6.3",
+        "debug": "^4.3.6",
+        "devtools-protocol": "0.0.1312386",
+        "ws": "^8.18.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/qs": {
       "version": "6.14.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",
@@ -7830,6 +8842,52 @@
         "pify": "^2.3.0"
       }
     },
+    "node_modules/readable-stream": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.7.0.tgz",
+      "integrity": "sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg==",
+      "license": "MIT",
+      "dependencies": {
+        "abort-controller": "^3.0.0",
+        "buffer": "^6.0.3",
+        "events": "^3.3.0",
+        "process": "^0.11.10",
+        "string_decoder": "^1.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/readdir-glob": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/readdir-glob/-/readdir-glob-1.1.3.tgz",
+      "integrity": "sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "minimatch": "^5.1.0"
+      }
+    },
+    "node_modules/readdir-glob/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/readdir-glob/node_modules/minimatch": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -7900,6 +8958,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
@@ -8333,7 +9401,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
       "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "dev": true,
       "license": "ISC",
       "engines": {
         "node": ">=14"
@@ -8342,6 +9409,47 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/smart-buffer": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
+      "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/socks": {
+      "version": "2.8.7",
+      "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.7.tgz",
+      "integrity": "sha512-HLpt+uLy/pxB+bum/9DzAgiKS8CX1EvbWxI4zlmgGCExImLdiad2iCwXT5Z4c9c3Eq8rP2318mPW2c+QbtjK8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ip-address": "^10.0.1",
+        "smart-buffer": "^4.2.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/socks-proxy-agent": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.5.tgz",
+      "integrity": "sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "^4.3.4",
+        "socks": "^2.8.3"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/sonner": {
       "version": "1.7.4",
       "resolved": "https://registry.npmjs.org/sonner/-/sonner-1.7.4.tgz",
@@ -8352,6 +9460,17 @@
         "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -8399,11 +9518,32 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/streamx": {
+      "version": "2.22.1",
+      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.22.1.tgz",
+      "integrity": "sha512-znKXEBxfatz2GBNK02kRnCXjV+AA4kjZIUxeWSr3UGirZMJfTE9uiwKHobnbgxWyL/JWro8tTq+vOqAK1/qbSA==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-fifo": "^1.3.2",
+        "text-decoder": "^1.1.0"
+      },
+      "optionalDependencies": {
+        "bare-events": "^2.2.0"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
       "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "eastasianwidth": "^0.2.0",
@@ -8422,7 +9562,6 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "emoji-regex": "^8.0.0",
@@ -8437,7 +9576,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -8447,14 +9585,12 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/string-width-cjs/node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
@@ -8580,7 +9716,6 @@
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
       "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^6.0.1"
@@ -8597,7 +9732,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
@@ -8610,7 +9744,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -8804,6 +9937,41 @@
         "node": ">= 6"
       }
     },
+    "node_modules/tar-fs": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.1.1.tgz",
+      "integrity": "sha512-LZA0oaPOc2fVo82Txf3gw+AkEd38szODlptMYejQUhndHMLQ9M059uXR+AfS7DNo0NpINvSqDsvyaCrBVkptWg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pump": "^3.0.0",
+        "tar-stream": "^3.1.5"
+      },
+      "optionalDependencies": {
+        "bare-fs": "^4.0.1",
+        "bare-path": "^3.0.0"
+      }
+    },
+    "node_modules/tar-stream": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.7.tgz",
+      "integrity": "sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==",
+      "license": "MIT",
+      "dependencies": {
+        "b4a": "^1.6.4",
+        "fast-fifo": "^1.2.0",
+        "streamx": "^2.15.0"
+      }
+    },
+    "node_modules/text-decoder": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/text-decoder/-/text-decoder-1.2.3.tgz",
+      "integrity": "sha512-3/o9z3X0X0fTupwsYvR03pJ/DjWuqqrfwBgTQzdWDiQSm9KitAyz/9WqsT2JQW7KV2m+bC2ol/zqpW37NHxLaA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "b4a": "^1.6.4"
+      }
+    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -8833,6 +10001,13 @@
       "integrity": "sha512-oB7yIimd8SuGptespDAZnNkzIz+NWaJCu2RMsbs4Wmp9zSDUM8Nhi3s2OOcqYuv3mN4hitXc8DVx+LyUmbUDiA==",
       "license": "ISC"
     },
+    "node_modules/through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/thumbhash": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/thumbhash/-/thumbhash-0.1.1.tgz",
@@ -9055,11 +10230,46 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/unbzip2-stream": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz",
+      "integrity": "sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer": "^5.2.1",
+        "through": "^2.3.8"
+      }
+    },
+    "node_modules/unbzip2-stream/node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
     "node_modules/undici-types": {
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
       "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/unpipe": {
@@ -9146,6 +10356,13 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/urlpattern-polyfill": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/urlpattern-polyfill/-/urlpattern-polyfill-10.0.0.tgz",
+      "integrity": "sha512-H/A06tKD7sS1O1X2SshBVeA5FLycRpjqiBeqGKmBwBDBy28EnRjORxTNe269KSSr5un5qyWi1iL61wLxpd+ZOg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/use-callback-ref": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
@@ -9346,7 +10563,6 @@
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
       "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^6.1.0",
@@ -9365,7 +10581,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.0.0",
@@ -9383,7 +10598,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -9393,14 +10607,12 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/wrap-ansi-cjs/node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "emoji-regex": "^8.0.0",
@@ -9415,7 +10627,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
@@ -9428,7 +10639,6 @@
       "version": "6.2.3",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
       "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -9443,6 +10653,38 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "license": "ISC"
     },
+    "node_modules/ws": {
+      "version": "8.18.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
+      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/yaml": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
@@ -9456,6 +10698,101 @@
         "node": ">= 14.6"
       }
     },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/yargs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yauzl": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+      "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer-crc32": "~0.2.3",
+        "fd-slicer": "~1.1.0"
+      }
+    },
+    "node_modules/yauzl/node_modules/buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@@ -9469,6 +10806,20 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/zip-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-6.0.1.tgz",
+      "integrity": "sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==",
+      "license": "MIT",
+      "dependencies": {
+        "archiver-utils": "^5.0.0",
+        "compress-commons": "^6.0.2",
+        "readable-stream": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/zod": {
       "version": "3.25.76",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",

package.json

@@ -32,6 +32,8 @@
     "@radix-ui/react-toast": "^1.2.0",
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.0",
+    "@types/archiver": "^6.0.3",
+    "archiver": "^7.0.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",

templates/ai-chat.tsx

@@ -0,0 +1,223 @@
+import { motion } from 'framer-motion'
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Badge } from '@hanzo/ui/primitives'
+import { HanzoLogo } from '@/components/logo'
+import { Bot, MessageSquare, Sparkles, Zap, Code2, Brain, Globe, Shield, Sliders, Terminal, Cloud, Users } from 'lucide-react'
+
+export default function AIChatTemplate() {
+  return (
+    <div className="min-h-screen bg-black text-white">
+      {/* Animated Background */}
+      <div className="fixed inset-0 overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-br from-gray-950 via-black to-gray-950" />
+        <div className="absolute inset-0">
+          {[...Array(40)].map((_, i) => (
+            <motion.div
+              key={i}
+              className="absolute w-1 h-1 bg-white/20 rounded-full"
+              animate={{
+                y: [0, -30, 0],
+                opacity: [0, 1, 0]
+              }}
+              transition={{
+                duration: 3 + Math.random() * 2,
+                repeat: Infinity,
+                delay: Math.random() * 3
+              }}
+              style={{
+                left: `${Math.random() * 100}%`,
+                bottom: '0'
+              }}
+            />
+          ))}
+        </div>
+      </div>
+
+      {/* Header */}
+      <header className="relative z-10 p-8">
+        <nav className="flex justify-between items-center">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-white rounded-lg flex items-center justify-center">
+              <HanzoLogo className="w-6 h-6 text-black" />
+            </div>
+            <span className="text-xl font-bold">Hanzo Chat</span>
+          </div>
+          <div className="flex gap-2">
+            <Button variant="ghost" className="text-white hover:text-black hover:bg-white">
+              Models
+            </Button>
+            <Button variant="ghost" className="text-white hover:text-black hover:bg-white">
+              Documentation
+            </Button>
+            <Button className="bg-white text-black hover:bg-gray-200">
+              Launch Chat
+            </Button>
+          </div>
+        </nav>
+      </header>
+
+      {/* Hero Section */}
+      <section className="relative z-10 px-8 py-16 text-center">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+        >
+          <Badge variant="secondary" className="mb-6 bg-white/10 text-white border-white/20">
+            <Bot className="w-4 h-4 mr-2" />
+            100+ LLM Providers
+          </Badge>
+
+          <h1 className="text-6xl md:text-7xl font-bold mb-6">
+            <span className="bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
+              Universal AI
+            </span>
+            <br />
+            <span className="text-white">Chat Interface</span>
+          </h1>
+
+          <p className="text-xl text-gray-400 mb-12 max-w-2xl mx-auto">
+            One interface to rule them all. Access OpenAI, Anthropic, Google, and 100+ AI models 
+            with Model Context Protocol support.
+          </p>
+
+          {/* Chat Preview */}
+          <Card className="max-w-4xl mx-auto bg-gray-950/80 border-gray-800 backdrop-blur-xl">
+            <CardHeader className="bg-gray-900/80 border-b border-gray-800">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <MessageSquare className="w-5 h-5 text-white" />
+                  <span className="text-sm text-white">Chat with Claude 3.5 Sonnet</span>
+                </div>
+                <Badge className="bg-green-500/20 text-green-400 border-green-500/30">
+                  Connected
+                </Badge>
+              </div>
+            </CardHeader>
+            <CardContent className="p-6">
+              <div className="space-y-4">
+                <div className="flex gap-3">
+                  <div className="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center flex-shrink-0">
+                    <span className="text-xs">👤</span>
+                  </div>
+                  <div className="bg-gray-900 rounded-lg p-3 flex-1">
+                    <p className="text-sm text-gray-300">
+                      Can you help me implement a real-time chat system with WebSockets?
+                    </p>
+                  </div>
+                </div>
+                <div className="flex gap-3">
+                  <div className="w-8 h-8 bg-gradient-to-br from-gray-700 to-gray-800 rounded-full flex items-center justify-center flex-shrink-0">
+                    <Bot className="w-4 h-4 text-white" />
+                  </div>
+                  <div className="bg-gray-800/50 rounded-lg p-3 flex-1">
+                    <p className="text-sm text-gray-300">
+                      I'll help you implement a real-time chat system with WebSockets. Here's a complete solution using Node.js and Socket.io...
+                    </p>
+                    <div className="mt-3 bg-gray-900 rounded p-2">
+                      <code className="text-xs text-gray-400">
+                        <span className="text-white">const</span> io = <span className="text-white">require</span>(<span className="text-gray-300">'socket.io'</span>)
+                      </code>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </motion.div>
+      </section>
+
+      {/* Features Grid */}
+      <section className="relative z-10 px-8 py-16">
+        <div className="max-w-6xl mx-auto">
+          <h2 className="text-3xl font-bold text-center mb-12">
+            <span className="bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
+              Everything You Need for AI Conversations
+            </span>
+          </h2>
+          <div className="grid md:grid-cols-3 gap-6">
+            {[
+              { icon: Brain, title: "MCP Tools", desc: "260+ tools with Model Context Protocol" },
+              { icon: Zap, title: "Instant Switch", desc: "Switch models mid-conversation" },
+              { icon: Globe, title: "Multi-Provider", desc: "OpenAI, Anthropic, Google, and more" },
+              { icon: Code2, title: "Code Execution", desc: "Run code directly in chat" },
+              { icon: Shield, title: "Privacy First", desc: "Your data stays private" },
+              { icon: Sliders, title: "Custom Models", desc: "Fine-tune and deploy custom models" },
+              { icon: Terminal, title: "API Access", desc: "Full API for integrations" },
+              { icon: Cloud, title: "Cloud Sync", desc: "Sync chats across devices" },
+              { icon: Users, title: "Team Collaboration", desc: "Share and collaborate on chats" }
+            ].map((feature, i) => (
+              <motion.div
+                key={i}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.05 * i }}
+              >
+                <Card className="bg-gray-950/50 border-gray-800 hover:border-white/20 transition-all hover:bg-gray-900/50 backdrop-blur-xl">
+                  <CardHeader>
+                    <feature.icon className="w-8 h-8 text-white mb-2" />
+                    <CardTitle className="text-white">{feature.title}</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <CardDescription className="text-gray-400">{feature.desc}</CardDescription>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Model Showcase */}
+      <section className="relative z-10 px-8 py-16">
+        <Card className="max-w-6xl mx-auto bg-gray-950/80 border-gray-800 backdrop-blur-xl">
+          <CardHeader className="text-center">
+            <CardTitle className="text-3xl text-white">Supported Models</CardTitle>
+            <CardDescription className="text-gray-400">
+              Access the latest AI models from leading providers
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="p-8">
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              {[
+                'GPT-4 Turbo', 'Claude 3.5', 'Gemini Pro', 'Llama 3',
+                'Mistral Large', 'Command R+', 'Qwen 2.5', 'DeepSeek',
+              ].map((model, i) => (
+                <motion.div
+                  key={i}
+                  initial={{ opacity: 0, scale: 0.9 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  transition={{ delay: 0.05 * i }}
+                  className="bg-gray-900/50 border border-gray-800 rounded-lg p-3 text-center hover:border-white/20 transition-colors"
+                >
+                  <span className="text-sm text-gray-300">{model}</span>
+                </motion.div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </section>
+
+      {/* CTA Section */}
+      <section className="relative z-10 px-8 py-16 text-center">
+        <Card className="max-w-4xl mx-auto bg-gradient-to-r from-gray-900 to-gray-950 border-gray-800">
+          <CardContent className="p-12">
+            <Sparkles className="w-12 h-12 text-white mx-auto mb-6" />
+            <h2 className="text-4xl font-bold text-white mb-6">
+              Start Chatting with AI Today
+            </h2>
+            <p className="text-xl text-gray-400 mb-8">
+              Free tier includes 100 messages per day across all models
+            </p>
+            <div className="flex gap-4 justify-center">
+              <Button size="lg" className="bg-white text-black hover:bg-gray-200">
+                Get Started Free
+              </Button>
+              <Button size="lg" variant="outline" className="border-white text-white hover:bg-white hover:text-black">
+                View Documentation
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </section>
+    </div>
+  )
+}

templates/analyticsdash.tsx

@@ -1,19 +1,29 @@
 import { motion } from 'framer-motion'
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Badge
+} from '@hanzo/ui/primitives'
+import { HanzoLogo } from '@/components/logo'
 import {
   BarChart3, TrendingUp, Users, DollarSign, Activity,
   Calendar, Filter, Download, Settings, Bell, Search,
   ArrowUp, ArrowDown, MoreVertical
 } from 'lucide-react'
 
-export default function AnalyticsDashTemplate() {
+const AnalyticsDashTemplate: React.FC = () => {
   return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
+    <div className="min-h-screen bg-background">
       {/* Sidebar */}
-      <aside className="fixed left-0 top-0 h-full w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800">
+      <aside className="fixed left-0 top-0 h-full w-64 bg-card border-r border-border">
         <div className="p-6">
           <div className="flex items-center gap-3 mb-8">
-            <div className="w-10 h-10 bg-gradient-to-br from-white to-gray-400 rounded-lg flex items-center justify-center">
-              <BarChart3 className="w-6 h-6 text-white" />
+            <div className="w-10 h-10 bg-gradient-to-br from-foreground to-muted-foreground rounded-lg flex items-center justify-center">
+              <BarChart3 className="w-6 h-6 text-background" />
             </div>
             <span className="text-xl font-bold">Analytics Pro</span>
           </div>
@@ -31,8 +41,8 @@ export default function AnalyticsDashTemplate() {
                 key={i}
                 className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
                   item.active
-                    ? 'bg-gray-800 dark:bg-gray-800/20 text-gray-400 dark:text-gray-400'
-                    : 'hover:bg-gray-100 dark:hover:bg-gray-800'
+                    ? 'bg-muted text-foreground'
+                    : 'hover:bg-muted/50'
                 }`}
               >
                 <item.icon className="w-5 h-5" />
@@ -46,34 +56,34 @@ export default function AnalyticsDashTemplate() {
       {/* Main Content */}
       <main className="ml-64">
         {/* Top Bar */}
-        <header className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
+        <header className="bg-card border-b border-border">
           <div className="px-8 py-4 flex items-center justify-between">
             <div className="flex items-center gap-4 flex-1">
               <div className="relative flex-1 max-w-md">
-                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
                 <input
                   type="text"
                   placeholder="Search..."
-                  className="w-full pl-10 pr-4 py-2 bg-gray-100 dark:bg-gray-800 rounded-lg"
+                  className="w-full pl-10 pr-4 py-2 bg-muted rounded-lg"
                 />
               </div>
-              <button className="flex items-center gap-2 px-4 py-2 bg-gray-100 dark:bg-gray-800 rounded-lg">
+              <Button variant="outline" className="flex items-center gap-2">
                 <Calendar className="w-4 h-4" />
                 <span>Last 30 days</span>
-              </button>
-              <button className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">
+              </Button>
+              <Button variant="ghost" size="square">
                 <Filter className="w-5 h-5" />
-              </button>
+              </Button>
             </div>
             <div className="flex items-center gap-3">
-              <button className="relative p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">
+              <Button variant="ghost" size="square" className="relative">
                 <Bell className="w-5 h-5" />
-                <div className="absolute top-1 right-1 w-2 h-2 bg-gray-700 rounded-full" />
-              </button>
-              <button className="px-4 py-2 bg-gray-800 text-white rounded-lg font-semibold flex items-center gap-2">
+                <div className="absolute top-1 right-1 w-2 h-2 bg-foreground rounded-full" />
+              </Button>
+              <Button variant="default" className="flex items-center gap-2">
                 <Download className="w-4 h-4" />
                 Export
-              </button>
+              </Button>
             </div>
           </div>
         </header>
@@ -88,32 +98,28 @@ export default function AnalyticsDashTemplate() {
                 value: "$45,231",
                 change: "+20.1%",
                 trend: "up",
-                icon: DollarSign,
-                color: "from-gray-200 to-gray-500"
+                icon: DollarSign
               },
               {
                 title: "Active Users",
                 value: "2,543",
                 change: "+18.2%",
                 trend: "up",
-                icon: Users,
-                color: "from-white to-gray-500"
+                icon: Users
               },
               {
-                title: "Conversion Rate",
-                value: "3.2%",
+                title: "Conversion",
+                value: "3.42%",
                 change: "-5.4%",
                 trend: "down",
-                icon: TrendingUp,
-                color: "from-white to-gray-400"
+                icon: TrendingUp
               },
               {
                 title: "Avg. Session",
                 value: "4m 32s",
                 change: "+12.3%",
                 trend: "up",
-                icon: Activity,
-                color: "from-gray-200 to-gray-500"
+                icon: Activity
               }
             ].map((stat, i) => (
               <motion.div
@@ -121,169 +127,105 @@ export default function AnalyticsDashTemplate() {
                 initial={{ opacity: 0, y: 20 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ delay: i * 0.1 }}
-                className="bg-white dark:bg-gray-900 rounded-xl p-6 shadow-sm"
               >
-                <div className="flex items-center justify-between mb-4">
-                  <div className={`w-10 h-10 bg-gradient-to-br ${stat.color} rounded-lg flex items-center justify-center`}>
-                    <stat.icon className="w-5 h-5 text-white" />
-                  </div>
-                  <button className="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded">
-                    <MoreVertical className="w-4 h-4 text-gray-400" />
-                  </button>
-                </div>
-                <h3 className="text-sm text-gray-600 dark:text-gray-400 mb-1">{stat.title}</h3>
-                <div className="flex items-end justify-between">
-                  <span className="text-2xl font-bold">{stat.value}</span>
-                  <div className={`flex items-center gap-1 text-sm ${
-                    stat.trend === 'up' ? 'text-gray-300' : 'text-gray-500'
-                  }`}>
-                    {stat.trend === 'up' ? (
-                      <ArrowUp className="w-3 h-3" />
-                    ) : (
-                      <ArrowDown className="w-3 h-3" />
-                    )}
-                    <span>{stat.change}</span>
-                  </div>
-                </div>
+                <Card>
+                  <CardContent className="p-6">
+                    <div className="flex items-start justify-between mb-4">
+                      <div className="w-12 h-12 bg-gradient-to-br from-foreground/10 to-foreground/20 rounded-lg flex items-center justify-center">
+                        <stat.icon className="w-6 h-6 text-foreground" />
+                      </div>
+                      <Button variant="ghost" size="square" className="h-8 w-8">
+                        <MoreVertical className="w-4 h-4" />
+                      </Button>
+                    </div>
+                    <h3 className="text-2xl font-bold mb-1">{stat.value}</h3>
+                    <p className="text-sm text-muted-foreground mb-2">{stat.title}</p>
+                    <div className="flex items-center gap-1">
+                      {stat.trend === "up" ? (
+                        <ArrowUp className="w-4 h-4 text-green-500" />
+                      ) : (
+                        <ArrowDown className="w-4 h-4 text-red-500" />
+                      )}
+                      <span className={`text-sm font-medium ${
+                        stat.trend === "up" ? "text-green-500" : "text-red-500"
+                      }`}>
+                        {stat.change}
+                      </span>
+                      <span className="text-sm text-muted-foreground">vs last month</span>
+                    </div>
+                  </CardContent>
+                </Card>
               </motion.div>
             ))}
           </div>
 
           {/* Charts */}
-          <div className="grid grid-cols-2 gap-6 mb-8">
-            {/* Traffic Chart */}
+          <div className="grid grid-cols-3 gap-6">
             <motion.div
               initial={{ opacity: 0, scale: 0.95 }}
               animate={{ opacity: 1, scale: 1 }}
               transition={{ delay: 0.4 }}
-              className="bg-white dark:bg-gray-900 rounded-xl p-6 shadow-sm"
+              className="col-span-2"
             >
-              <div className="flex items-center justify-between mb-6">
-                <h3 className="text-lg font-semibold">Traffic Overview</h3>
-                <button className="text-sm text-gray-600 dark:text-gray-400">View Details →</button>
-              </div>
-              <div className="space-y-4">
-                {/* Chart Bars */}
-                {[...Array(7)].map((_, i) => (
-                  <div key={i} className="flex items-center gap-4">
-                    <span className="text-xs text-gray-500 w-10">Day {i + 1}</span>
-                    <div className="flex-1 bg-gray-100 dark:bg-gray-800 rounded-full h-6 overflow-hidden">
-                      <motion.div
-                        initial={{ width: 0 }}
-                        animate={{ width: `${Math.random() * 80 + 20}%` }}
-                        transition={{ duration: 0.5, delay: 0.6 + i * 0.1 }}
-                        className="h-full bg-gradient-to-r from-white to-gray-400 rounded-full"
-                      />
+              <Card>
+                <CardHeader>
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <CardTitle>Revenue Overview</CardTitle>
+                      <CardDescription>Monthly revenue trends</CardDescription>
                     </div>
+                    <Button variant="outline" size="sm">View Details</Button>
                   </div>
-                ))}
-              </div>
+                </CardHeader>
+                <CardContent>
+                  <div className="h-[300px] flex items-end gap-2">
+                    {[...Array(12)].map((_, i) => (
+                      <div
+                        key={i}
+                        className="flex-1 bg-gradient-to-t from-foreground/20 to-foreground/10 rounded-t"
+                        style={{ height: `${Math.random() * 80 + 20}%` }}
+                      />
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
             </motion.div>
 
-            {/* Pie Chart */}
             <motion.div
               initial={{ opacity: 0, scale: 0.95 }}
               animate={{ opacity: 1, scale: 1 }}
               transition={{ delay: 0.5 }}
-              className="bg-white dark:bg-gray-900 rounded-xl p-6 shadow-sm"
             >
-              <div className="flex items-center justify-between mb-6">
-                <h3 className="text-lg font-semibold">Traffic Sources</h3>
-                <button className="text-sm text-gray-600 dark:text-gray-400">View Details →</button>
-              </div>
-              <div className="flex items-center justify-center">
-                <div className="relative w-48 h-48">
-                  <svg className="w-48 h-48 transform -rotate-90">
-                    <circle
-                      cx="96"
-                      cy="96"
-                      r="80"
-                      stroke="currentColor"
-                      strokeWidth="32"
-                      fill="none"
-                      className="text-gray-400"
-                      strokeDasharray="251 251"
-                    />
-                    <circle
-                      cx="96"
-                      cy="96"
-                      r="80"
-                      stroke="currentColor"
-                      strokeWidth="32"
-                      fill="none"
-                      className="text-gray-400"
-                      strokeDasharray="150 251"
-                      strokeDashoffset="-251"
-                    />
-                    <circle
-                      cx="96"
-                      cy="96"
-                      r="80"
-                      stroke="currentColor"
-                      strokeWidth="32"
-                      fill="none"
-                      className="text-gray-300"
-                      strokeDasharray="75 251"
-                      strokeDashoffset="-401"
-                    />
-                  </svg>
-                  <div className="absolute inset-0 flex items-center justify-center">
-                    <div className="text-center">
-                      <div className="text-2xl font-bold">100%</div>
-                      <div className="text-sm text-gray-500">Total</div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className="mt-6 space-y-2">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2">
-                    <div className="w-3 h-3 bg-gray-800 rounded-full" />
-                    <span className="text-sm">Direct</span>
-                  </div>
-                  <span className="text-sm font-semibold">45%</span>
-                </div>
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2">
-                    <div className="w-3 h-3 bg-gray-800 rounded-full" />
-                    <span className="text-sm">Social</span>
+              <Card className="h-full">
+                <CardHeader>
+                  <CardTitle>Top Products</CardTitle>
+                  <CardDescription>Best performing items</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-4">
+                    {[
+                      { name: "Product A", sales: 234, revenue: "$12,345" },
+                      { name: "Product B", sales: 189, revenue: "$9,876" },
+                      { name: "Product C", sales: 156, revenue: "$7,654" },
+                      { name: "Product D", sales: 123, revenue: "$5,432" }
+                    ].map((product, i) => (
+                      <div key={i} className="flex items-center justify-between">
+                        <div>
+                          <p className="font-medium">{product.name}</p>
+                          <p className="text-sm text-muted-foreground">{product.sales} sales</p>
+                        </div>
+                        <p className="font-bold">{product.revenue}</p>
+                      </div>
+                    ))}
                   </div>
-                  <span className="text-sm font-semibold">30%</span>
-                </div>
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2">
-                    <div className="w-3 h-3 bg-gray-700 rounded-full" />
-                    <span className="text-sm">Referral</span>
-                  </div>
-                  <span className="text-sm font-semibold">25%</span>
-                </div>
-              </div>
+                </CardContent>
+              </Card>
             </motion.div>
           </div>
-
-          {/* Recent Activity */}
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.6 }}
-            className="bg-white dark:bg-gray-900 rounded-xl p-6 shadow-sm"
-          >
-            <h3 className="text-lg font-semibold mb-4">Recent Activity</h3>
-            <div className="space-y-4">
-              {[...Array(5)].map((_, i) => (
-                <div key={i} className="flex items-center gap-4 pb-4 border-b border-gray-100 dark:border-gray-800 last:border-0">
-                  <div className="w-10 h-10 bg-gray-100 dark:bg-gray-800 rounded-full" />
-                  <div className="flex-1">
-                    <p className="font-medium">User action occurred</p>
-                    <p className="text-sm text-gray-500">2 minutes ago</p>
-                  </div>
-                  <button className="text-sm text-gray-400 dark:text-gray-400">View</button>
-                </div>
-              ))}
-            </div>
-          </motion.div>
         </div>
       </main>
     </div>
   )
-}
+}
+
+export default AnalyticsDashTemplate

templates/api-docs.tsx

@@ -0,0 +1,311 @@
+import { motion } from 'framer-motion'
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Badge } from '@hanzo/ui/primitives'
+import { HanzoLogo } from '@/components/logo'
+import { Book, Code2, Terminal, FileJson, Key, Shield, Zap, Globe, GitBranch, Clock, CheckCircle, Copy, ChevronRight, Database, Cloud } from 'lucide-react'
+
+export default function ApiDocsTemplate() {
+  return (
+    <div className="min-h-screen bg-black text-white">
+      {/* Animated Background */}
+      <div className="fixed inset-0 overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-br from-gray-950 via-black to-gray-950" />
+        {/* Grid pattern */}
+        <div className="absolute inset-0 opacity-10">
+          <div className="absolute inset-0" style={{
+            backgroundImage: `linear-gradient(to right, white 1px, transparent 1px),
+                             linear-gradient(to bottom, white 1px, transparent 1px)`,
+            backgroundSize: '50px 50px'
+          }} />
+        </div>
+      </div>
+
+      {/* Header */}
+      <header className="relative z-10 p-8">
+        <nav className="flex justify-between items-center">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-white rounded-lg flex items-center justify-center">
+              <HanzoLogo className="w-6 h-6 text-black" />
+            </div>
+            <span className="text-xl font-bold">Hanzo API</span>
+          </div>
+          <div className="flex gap-2">
+            <Button variant="ghost" className="text-white hover:text-black hover:bg-white">
+              Guides
+            </Button>
+            <Button variant="ghost" className="text-white hover:text-black hover:bg-white">
+              Reference
+            </Button>
+            <Button className="bg-white text-black hover:bg-gray-200">
+              Get API Key
+            </Button>
+          </div>
+        </nav>
+      </header>
+
+      {/* Hero Section */}
+      <section className="relative z-10 px-8 py-16">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="max-w-4xl mx-auto text-center"
+        >
+          <Badge variant="secondary" className="mb-6 bg-white/10 text-white border-white/20">
+            <Terminal className="w-4 h-4 mr-2" />
+            RESTful & GraphQL APIs
+          </Badge>
+
+          <h1 className="text-6xl md:text-7xl font-bold mb-6">
+            <span className="bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
+              Developer-First
+            </span>
+            <br />
+            <span className="text-white">API Platform</span>
+          </h1>
+
+          <p className="text-xl text-gray-400 mb-12 max-w-2xl mx-auto">
+            Comprehensive API documentation with interactive examples, SDKs for every language,
+            and real-time testing playground.
+          </p>
+
+          {/* Code Example */}
+          <Card className="bg-gray-950/80 border-gray-800 backdrop-blur-xl text-left">
+            <CardHeader className="bg-gray-900/80 border-b border-gray-800">
+              <div className="flex items-center justify-between">
+                <div className="flex gap-4">
+                  <button className="text-white text-sm font-medium">cURL</button>
+                  <button className="text-gray-500 text-sm">JavaScript</button>
+                  <button className="text-gray-500 text-sm">Python</button>
+                  <button className="text-gray-500 text-sm">Go</button>
+                </div>
+                <Button size="sm" variant="ghost" className="text-gray-400 hover:text-white">
+                  <Copy className="w-4 h-4" />
+                </Button>
+              </div>
+            </CardHeader>
+            <CardContent className="p-6">
+              <pre className="text-sm font-mono">
+                <code>
+                  <span className="text-gray-400">curl</span> <span className="text-gray-300">-X POST</span> <span className="text-white">https://api.hanzo.ai/v1/chat</span> \{"\n"}
+                  {"  "}<span className="text-gray-300">-H</span> <span className="text-gray-400">"Authorization: Bearer $HANZO_API_KEY"</span> \{"\n"}
+                  {"  "}<span className="text-gray-300">-H</span> <span className="text-gray-400">"Content-Type: application/json"</span> \{"\n"}
+                  {"  "}<span className="text-gray-300">-d</span> <span className="text-gray-400">'{"{"}</span>{"\n"}
+                  {"    "}<span className="text-gray-400">"model":</span> <span className="text-gray-300">"gpt-4"</span>,{"\n"}
+                  {"    "}<span className="text-gray-400">"messages":</span> [{"{"}{"\n"}
+                  {"      "}<span className="text-gray-400">"role":</span> <span className="text-gray-300">"user"</span>,{"\n"}
+                  {"      "}<span className="text-gray-400">"content":</span> <span className="text-gray-300">"Hello, API!"</span>{"\n"}
+                  {"    "}{"}"]}]{"\n"}
+                  {"  "}{"}'"}
+                </code>
+              </pre>
+            </CardContent>
+          </Card>
+        </motion.div>
+      </section>
+
+      {/* Quick Start */}
+      <section className="relative z-10 px-8 py-16">
+        <div className="max-w-6xl mx-auto">
+          <h2 className="text-3xl font-bold text-center mb-12">
+            <span className="bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
+              Get Started in Minutes
+            </span>
+          </h2>
+          <div className="grid md:grid-cols-3 gap-6">
+            {[
+              { 
+                step: "1", 
+                title: "Get Your API Key", 
+                desc: "Sign up and generate your API key from the dashboard",
+                icon: Key 
+              },
+              { 
+                step: "2", 
+                title: "Install SDK", 
+                desc: "Choose from our official SDKs or use REST directly",
+                icon: Code2 
+              },
+              { 
+                step: "3", 
+                title: "Make Your First Call", 
+                desc: "Start making API calls with our interactive examples",
+                icon: Zap 
+              }
+            ].map((item, i) => (
+              <motion.div
+                key={i}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.1 * i }}
+              >
+                <Card className="bg-gray-950/50 border-gray-800 hover:border-white/20 transition-all backdrop-blur-xl h-full">
+                  <CardContent className="p-6">
+                    <div className="flex items-center gap-4 mb-4">
+                      <div className="w-12 h-12 bg-gradient-to-br from-gray-700 to-gray-800 rounded-full flex items-center justify-center text-white font-bold">
+                        {item.step}
+                      </div>
+                      <item.icon className="w-6 h-6 text-white" />
+                    </div>
+                    <h3 className="text-lg font-semibold text-white mb-2">{item.title}</h3>
+                    <p className="text-sm text-gray-400">{item.desc}</p>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* API Endpoints */}
+      <section className="relative z-10 px-8 py-16">
+        <div className="max-w-6xl mx-auto">
+          <Card className="bg-gray-950/80 border-gray-800 backdrop-blur-xl">
+            <CardHeader>
+              <CardTitle className="text-2xl text-white">Popular Endpoints</CardTitle>
+              <CardDescription className="text-gray-400">
+                Explore our most-used API endpoints
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {[
+                { method: "POST", path: "/v1/chat/completions", desc: "Generate chat completions", status: "stable" },
+                { method: "POST", path: "/v1/embeddings", desc: "Create text embeddings", status: "stable" },
+                { method: "GET", path: "/v1/models", desc: "List available models", status: "stable" },
+                { method: "POST", path: "/v1/images/generations", desc: "Generate images from text", status: "beta" },
+                { method: "POST", path: "/v1/audio/transcriptions", desc: "Transcribe audio to text", status: "stable" },
+                { method: "GET", path: "/v1/usage", desc: "Get usage statistics", status: "stable" }
+              ].map((endpoint, i) => (
+                <motion.div
+                  key={i}
+                  initial={{ opacity: 0, x: -20 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ delay: 0.05 * i }}
+                  className="flex items-center justify-between p-4 bg-gray-900/50 border border-gray-800 rounded-lg hover:border-white/20 transition-colors group"
+                >
+                  <div className="flex items-center gap-4">
+                    <Badge className={`
+                      ${endpoint.method === 'GET' ? 'bg-blue-500/20 text-blue-400' : 'bg-green-500/20 text-green-400'}
+                      border-0 font-mono
+                    `}>
+                      {endpoint.method}
+                    </Badge>
+                    <div>
+                      <code className="text-sm text-white">{endpoint.path}</code>
+                      <p className="text-xs text-gray-500 mt-1">{endpoint.desc}</p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Badge className={`
+                      ${endpoint.status === 'stable' ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400'}
+                      border-0 text-xs
+                    `}>
+                      {endpoint.status}
+                    </Badge>
+                    <ChevronRight className="w-4 h-4 text-gray-500 group-hover:text-white transition-colors" />
+                  </div>
+                </motion.div>
+              ))}
+            </CardContent>
+          </Card>
+        </div>
+      </section>
+
+      {/* Features */}
+      <section className="relative z-10 px-8 py-16">
+        <div className="max-w-6xl mx-auto">
+          <h2 className="text-3xl font-bold text-center mb-12">
+            <span className="bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
+              Enterprise-Grade Features
+            </span>
+          </h2>
+          <div className="grid md:grid-cols-4 gap-4">
+            {[
+              { icon: Shield, title: "Authentication", desc: "OAuth 2.0 & API Keys" },
+              { icon: Clock, title: "Rate Limiting", desc: "Configurable limits" },
+              { icon: Globe, title: "Global CDN", desc: "Low latency worldwide" },
+              { icon: GitBranch, title: "Versioning", desc: "Stable API versions" },
+              { icon: FileJson, title: "JSON & GraphQL", desc: "Multiple formats" },
+              { icon: Database, title: "Webhooks", desc: "Real-time events" },
+              { icon: Cloud, title: "99.9% Uptime", desc: "High availability" },
+              { icon: CheckCircle, title: "Type Safety", desc: "OpenAPI 3.0 spec" }
+            ].map((feature, i) => (
+              <motion.div
+                key={i}
+                initial={{ opacity: 0, scale: 0.9 }}
+                animate={{ opacity: 1, scale: 1 }}
+                transition={{ delay: 0.03 * i }}
+              >
+                <Card className="bg-gray-950/50 border-gray-800 hover:border-white/20 transition-all backdrop-blur-xl h-full">
+                  <CardContent className="p-4">
+                    <feature.icon className="w-6 h-6 text-white mb-2" />
+                    <div className="text-sm font-semibold text-white">{feature.title}</div>
+                    <div className="text-xs text-gray-400 mt-1">{feature.desc}</div>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* SDK Section */}
+      <section className="relative z-10 px-8 py-16">
+        <Card className="max-w-4xl mx-auto bg-gray-950/80 border-gray-800 backdrop-blur-xl">
+          <CardHeader className="text-center">
+            <CardTitle className="text-2xl text-white">Official SDKs</CardTitle>
+            <CardDescription className="text-gray-400">
+              Native libraries for your favorite language
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              {[
+                { name: 'Python', cmd: 'pip install hanzo' },
+                { name: 'JavaScript', cmd: 'npm install @hanzo/sdk' },
+                { name: 'Go', cmd: 'go get github.com/hanzo/go' },
+                { name: 'Rust', cmd: 'cargo add hanzo' },
+                { name: 'Ruby', cmd: 'gem install hanzo' },
+                { name: 'PHP', cmd: 'composer require hanzo/sdk' },
+                { name: 'Java', cmd: 'implementation "ai.hanzo:sdk"' },
+                { name: '.NET', cmd: 'dotnet add package Hanzo' }
+              ].map((sdk, i) => (
+                <motion.div
+                  key={i}
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.03 * i }}
+                  className="bg-gray-900/50 border border-gray-800 rounded-lg p-3 hover:border-white/20 transition-colors"
+                >
+                  <div className="text-sm font-semibold text-white mb-1">{sdk.name}</div>
+                  <code className="text-xs text-gray-500">{sdk.cmd}</code>
+                </motion.div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </section>
+
+      {/* CTA Section */}
+      <section className="relative z-10 px-8 py-16 text-center">
+        <Card className="max-w-4xl mx-auto bg-gradient-to-r from-gray-900 to-gray-950 border-gray-800">
+          <CardContent className="p-12">
+            <Book className="w-12 h-12 text-white mx-auto mb-6" />
+            <h2 className="text-4xl font-bold text-white mb-6">
+              Build Something Amazing
+            </h2>
+            <p className="text-xl text-gray-400 mb-8">
+              Start with 1M free API calls per month. No credit card required.
+            </p>
+            <div className="flex gap-4 justify-center">
+              <Button size="lg" className="bg-white text-black hover:bg-gray-200">
+                Start Building
+              </Button>
+              <Button size="lg" variant="outline" className="border-white text-white hover:bg-white hover:text-black">
+                View Full Docs
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </section>
+    </div>
+  )
+}

templates/devforge.tsx

@@ -1,18 +1,26 @@
 import { motion } from 'framer-motion'
-import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Badge } from '@hanzo/ui/primitives'
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Badge
+} from '@hanzo/ui/primitives'
 import { HanzoLogo } from '@/components/logo'
 import { Code2, Zap, Shield, Globe, Users, Terminal, Cloud, Sparkles } from 'lucide-react'
 
-export default function DevForgeTemplate() {
+const DevForgeTemplate: React.FC = () => {
   return (
-    <div className="min-h-screen bg-black text-white">
+    <div className="min-h-screen bg-background text-foreground">
       {/* Animated Background */}
       <div className="fixed inset-0 overflow-hidden">
-        <div className="absolute inset-0 bg-gradient-to-br from-gray-950 via-black to-gray-950" />
+        <div className="absolute inset-0 bg-gradient-to-br from-background via-background/95 to-background" />
         {[...Array(30)].map((_, i) => (
           <div
             key={i}
-            className="absolute w-2 h-2 bg-white/10 rounded-full animate-pulse"
+            className="absolute w-2 h-2 bg-foreground/10 rounded-full animate-pulse"
             style={{
               left: `${Math.random() * 100}%`,
               top: `${Math.random() * 100}%`,
@@ -27,19 +35,19 @@ export default function DevForgeTemplate() {
       <header className="relative z-10 p-8">
         <nav className="flex justify-between items-center">
           <div className="flex items-center gap-3">
-            <div className="w-10 h-10 bg-white rounded-lg flex items-center justify-center">
-              <HanzoLogo className="w-6 h-6 text-black" />
+            <div className="w-10 h-10 bg-foreground rounded-lg flex items-center justify-center">
+              <HanzoLogo className="w-6 h-6 text-background" />
             </div>
             <span className="text-xl font-bold">Hanzo DevForge</span>
           </div>
           <div className="flex gap-2">
-            <Button variant="ghost" className="text-white hover:text-black hover:bg-white">
+            <Button variant="ghost">
               Features
             </Button>
-            <Button variant="ghost" className="text-white hover:text-black hover:bg-white">
+            <Button variant="ghost">
               Pricing
             </Button>
-            <Button className="bg-white text-black hover:bg-gray-200">
+            <Button variant="default">
               Get Started
             </Button>
           </div>
@@ -52,58 +60,58 @@ export default function DevForgeTemplate() {
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
         >
-          <Badge variant="secondary" className="mb-6 bg-white/10 text-white border-white/20">
+          <Badge variant="secondary" className="mb-6">
             <Sparkles className="w-4 h-4 mr-2" />
             AI-Powered Development
           </Badge>
 
           <h1 className="text-6xl md:text-7xl font-bold mb-6">
-            <span className="bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
+            <span className="bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent">
               Code Smarter
             </span>
             <br />
-            <span className="text-white">Ship Faster</span>
+            <span className="text-foreground">Ship Faster</span>
           </h1>
 
-          <p className="text-xl text-gray-400 mb-12 max-w-2xl mx-auto">
+          <p className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto">
             The ultimate developer platform with AI-powered tools, real-time collaboration,
             and lightning-fast deployment.
           </p>
 
           {/* Code Preview */}
-          <Card className="max-w-4xl mx-auto bg-gray-950/80 border-gray-800 backdrop-blur-xl">
-            <CardHeader className="bg-gray-900/80 border-b border-gray-800">
+          <Card className="max-w-4xl mx-auto bg-card/80 border-border backdrop-blur-xl">
+            <CardHeader className="bg-card/50 border-b border-border">
               <div className="flex items-center gap-2">
                 <div className="flex gap-2">
-                  <div className="w-3 h-3 bg-gray-600 rounded-full" />
-                  <div className="w-3 h-3 bg-gray-500 rounded-full" />
-                  <div className="w-3 h-3 bg-gray-400 rounded-full" />
+                  <div className="w-3 h-3 bg-muted rounded-full" />
+                  <div className="w-3 h-3 bg-muted rounded-full" />
+                  <div className="w-3 h-3 bg-muted rounded-full" />
                 </div>
-                <span className="text-sm text-gray-400 ml-auto">main.tsx</span>
+                <span className="text-sm text-muted-foreground ml-auto">main.tsx</span>
               </div>
             </CardHeader>
             <CardContent className="p-6">
               <pre className="text-sm font-mono">
                 <code>
-                  <span className="text-gray-400">import</span>{" "}
-                  <span className="text-white">{'{ HanzoAI }'}</span>{" "}
-                  <span className="text-gray-400">from</span>{" "}
-                  <span className="text-gray-300">'@hanzo/ai'</span>
+                  <span className="text-muted-foreground">import</span>{" "}
+                  <span className="text-foreground">{'{ HanzoAI }'}</span>{" "}
+                  <span className="text-muted-foreground">from</span>{" "}
+                  <span className="text-muted-foreground">'@hanzo/ai'</span>
                   {"\n\n"}
-                  <span className="text-gray-400">function</span>{" "}
-                  <span className="text-white">App</span>() {"{"}
+                  <span className="text-muted-foreground">function</span>{" "}
+                  <span className="text-foreground">App</span>() {"{"}
                   {"\n  "}
-                  <span className="text-gray-400">const</span> ai ={" "}
-                  <span className="text-white">new HanzoAI</span>()
+                  <span className="text-muted-foreground">const</span> ai ={" "}
+                  <span className="text-foreground">new HanzoAI</span>()
                   {"\n  "}
                   {"\n  "}
-                  <span className="text-gray-500">// Generate code with AI</span>
+                  <span className="text-muted">// Generate code with AI</span>
                   {"\n  "}
-                  <span className="text-gray-400">const</span> code ={" "}
-                  <span className="text-gray-400">await</span> ai.
-                  <span className="text-white">generate</span>({"{"}
-                  {"\n    "}prompt: <span className="text-gray-300">"Create a REST API"</span>,
-                  {"\n    "}language: <span className="text-gray-300">"typescript"</span>
+                  <span className="text-muted-foreground">const</span> code ={" "}
+                  <span className="text-muted-foreground">await</span> ai.
+                  <span className="text-foreground">generate</span>({"{"}
+                  {"\n    "}prompt: <span className="text-muted-foreground">"Create a REST API"</span>,
+                  {"\n    "}language: <span className="text-muted-foreground">"typescript"</span>
                   {"\n  "}{"}"})
                   {"\n}"}
                 </code>
@@ -130,13 +138,13 @@ export default function DevForgeTemplate() {
               animate={{ opacity: 1, y: 0 }}
               transition={{ delay: 0.1 * i }}
             >
-              <Card className="bg-gray-950/50 border-gray-800 hover:border-white/20 transition-colors backdrop-blur-xl">
+              <Card className="bg-card/50 border-border hover:border-foreground/20 transition-colors backdrop-blur-xl">
                 <CardHeader>
-                  <feature.icon className="w-8 h-8 text-white mb-2" />
-                  <CardTitle className="text-white">{feature.title}</CardTitle>
+                  <feature.icon className="w-8 h-8 text-foreground mb-2" />
+                  <CardTitle className="text-foreground">{feature.title}</CardTitle>
                 </CardHeader>
                 <CardContent>
-                  <CardDescription className="text-gray-400">{feature.desc}</CardDescription>
+                  <CardDescription className="text-muted-foreground">{feature.desc}</CardDescription>
                 </CardContent>
               </Card>
             </motion.div>
@@ -146,15 +154,15 @@ export default function DevForgeTemplate() {
 
       {/* CTA Section */}
       <section className="relative z-10 px-8 py-16 text-center">
-        <Card className="max-w-4xl mx-auto bg-gradient-to-r from-gray-900 to-gray-950 border-gray-800">
+        <Card className="max-w-4xl mx-auto bg-gradient-to-r from-card to-background border-border">
           <CardContent className="p-12">
-            <h2 className="text-4xl font-bold text-white mb-6">
+            <h2 className="text-4xl font-bold text-foreground mb-6">
               Ready to 100x Your Development Speed?
             </h2>
-            <p className="text-xl text-gray-400 mb-8">
+            <p className="text-xl text-muted-foreground mb-8">
               Join thousands of developers building the future with Hanzo DevForge
             </p>
-            <Button size="lg" className="bg-white text-black hover:bg-gray-200">
+            <Button size="lg" variant="default">
               Start Free Trial
             </Button>
           </CardContent>
@@ -162,4 +170,6 @@ export default function DevForgeTemplate() {
       </section>
     </div>
   )
-}
+}
+
+export default DevForgeTemplate

templates/ecommerce-dash.tsx

@@ -0,0 +1,278 @@
+import { motion } from 'framer-motion'
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Badge } from '@hanzo/ui/primitives'
+import { HanzoLogo } from '@/components/logo'
+import { ShoppingBag, TrendingUp, Users, Package, DollarSign, BarChart3, ShoppingCart, CreditCard, Truck, Store, Settings, Bell, ArrowUp, ArrowDown, Activity } from 'lucide-react'
+
+export default function EcommerceDashTemplate() {
+  return (
+    <div className="min-h-screen bg-black text-white">
+      {/* Animated Background */}
+      <div className="fixed inset-0 overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-br from-gray-950 via-black to-gray-950" />
+        <div className="absolute inset-0">
+          <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-white/5 rounded-full blur-3xl animate-pulse" />
+          <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-white/5 rounded-full blur-3xl animate-pulse" style={{ animationDelay: '2s' }} />
+        </div>
+      </div>
+
+      {/* Header */}
+      <header className="relative z-10 p-8">
+        <nav className="flex justify-between items-center">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-white rounded-lg flex items-center justify-center">
+              <HanzoLogo className="w-6 h-6 text-black" />
+            </div>
+            <span className="text-xl font-bold">Hanzo Commerce</span>
+          </div>
+          <div className="flex gap-2">
+            <Button variant="ghost" className="text-white hover:text-black hover:bg-white">
+              <Bell className="w-4 h-4" />
+            </Button>
+            <Button variant="ghost" className="text-white hover:text-black hover:bg-white">
+              <Settings className="w-4 h-4" />
+            </Button>
+            <Button className="bg-white text-black hover:bg-gray-200">
+              View Store
+            </Button>
+          </div>
+        </nav>
+      </header>
+
+      {/* Hero Stats */}
+      <section className="relative z-10 px-8 py-8">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+        >
+          <div className="mb-8">
+            <h1 className="text-4xl font-bold mb-2">
+              <span className="bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
+                Dashboard Overview
+              </span>
+            </h1>
+            <p className="text-gray-400">Welcome back! Here's what's happening with your store today.</p>
+          </div>
+
+          {/* Key Metrics */}
+          <div className="grid md:grid-cols-4 gap-6 mb-8">
+            {[
+              { 
+                icon: DollarSign, 
+                title: "Total Revenue", 
+                value: "$48,392", 
+                change: "+12.3%", 
+                trend: "up",
+                color: "from-green-500 to-green-600"
+              },
+              { 
+                icon: ShoppingCart, 
+                title: "Orders", 
+                value: "892", 
+                change: "+5.7%", 
+                trend: "up",
+                color: "from-blue-500 to-blue-600"
+              },
+              { 
+                icon: Users, 
+                title: "Customers", 
+                value: "3,421", 
+                change: "+18.2%", 
+                trend: "up",
+                color: "from-purple-500 to-purple-600"
+              },
+              { 
+                icon: Package, 
+                title: "Products", 
+                value: "156", 
+                change: "-2.1%", 
+                trend: "down",
+                color: "from-orange-500 to-orange-600"
+              }
+            ].map((stat, i) => (
+              <motion.div
+                key={i}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.1 * i }}
+              >
+                <Card className="bg-gray-950/50 border-gray-800 backdrop-blur-xl hover:border-white/20 transition-all">
+                  <CardContent className="p-6">
+                    <div className="flex items-center justify-between mb-4">
+                      <div className={`w-12 h-12 bg-gradient-to-r ${stat.color} rounded-lg flex items-center justify-center`}>
+                        <stat.icon className="w-6 h-6 text-white" />
+                      </div>
+                      <Badge className={`${stat.trend === 'up' ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'} border-0`}>
+                        {stat.trend === 'up' ? <ArrowUp className="w-3 h-3 mr-1" /> : <ArrowDown className="w-3 h-3 mr-1" />}
+                        {stat.change}
+                      </Badge>
+                    </div>
+                    <div className="text-2xl font-bold text-white mb-1">{stat.value}</div>
+                    <div className="text-sm text-gray-400">{stat.title}</div>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            ))}
+          </div>
+
+          {/* Charts Section */}
+          <div className="grid md:grid-cols-2 gap-6 mb-8">
+            {/* Sales Chart */}
+            <Card className="bg-gray-950/50 border-gray-800 backdrop-blur-xl">
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <div>
+                    <CardTitle className="text-white">Sales Overview</CardTitle>
+                    <CardDescription className="text-gray-400">Last 7 days performance</CardDescription>
+                  </div>
+                  <BarChart3 className="w-5 h-5 text-gray-400" />
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="h-48 flex items-end justify-between gap-2">
+                  {[65, 45, 78, 52, 89, 72, 95].map((height, i) => (
+                    <motion.div
+                      key={i}
+                      className="flex-1 bg-gradient-to-t from-white/20 to-white/5 rounded-t"
+                      initial={{ height: 0 }}
+                      animate={{ height: `${height}%` }}
+                      transition={{ delay: 0.1 * i, duration: 0.5 }}
+                    />
+                  ))}
+                </div>
+                <div className="flex justify-between mt-2">
+                  {['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map((day) => (
+                    <span key={day} className="text-xs text-gray-500">{day}</span>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Activity Feed */}
+            <Card className="bg-gray-950/50 border-gray-800 backdrop-blur-xl">
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <div>
+                    <CardTitle className="text-white">Recent Activity</CardTitle>
+                    <CardDescription className="text-gray-400">Latest store events</CardDescription>
+                  </div>
+                  <Activity className="w-5 h-5 text-gray-400" />
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  {[
+                    { icon: ShoppingBag, text: "New order #1234", time: "2 min ago", color: "text-green-400" },
+                    { icon: Users, text: "New customer registered", time: "15 min ago", color: "text-blue-400" },
+                    { icon: Package, text: "Product stock low", time: "1 hour ago", color: "text-yellow-400" },
+                    { icon: CreditCard, text: "Payment received", time: "2 hours ago", color: "text-green-400" },
+                    { icon: Truck, text: "Order shipped", time: "3 hours ago", color: "text-purple-400" }
+                  ].map((activity, i) => (
+                    <motion.div
+                      key={i}
+                      initial={{ opacity: 0, x: -20 }}
+                      animate={{ opacity: 1, x: 0 }}
+                      transition={{ delay: 0.1 * i }}
+                      className="flex items-center gap-3"
+                    >
+                      <div className="w-8 h-8 bg-gray-900 rounded-full flex items-center justify-center">
+                        <activity.icon className={`w-4 h-4 ${activity.color}`} />
+                      </div>
+                      <div className="flex-1">
+                        <p className="text-sm text-gray-300">{activity.text}</p>
+                        <p className="text-xs text-gray-500">{activity.time}</p>
+                      </div>
+                    </motion.div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Quick Actions */}
+          <div className="grid md:grid-cols-3 gap-6">
+            {[
+              { icon: Package, title: "Add Product", desc: "List new items in your store", action: "Add New" },
+              { icon: TrendingUp, title: "Marketing", desc: "Create campaigns and promotions", action: "Create" },
+              { icon: Store, title: "Store Settings", desc: "Customize your storefront", action: "Configure" }
+            ].map((action, i) => (
+              <motion.div
+                key={i}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.1 * i }}
+              >
+                <Card className="bg-gradient-to-br from-gray-900 to-gray-950 border-gray-800 hover:border-white/20 transition-all backdrop-blur-xl">
+                  <CardContent className="p-6">
+                    <action.icon className="w-8 h-8 text-white mb-4" />
+                    <h3 className="text-lg font-semibold text-white mb-2">{action.title}</h3>
+                    <p className="text-sm text-gray-400 mb-4">{action.desc}</p>
+                    <Button size="sm" className="bg-white text-black hover:bg-gray-200">
+                      {action.action}
+                    </Button>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+      </section>
+
+      {/* Footer Stats */}
+      <section className="relative z-10 px-8 py-16">
+        <Card className="max-w-6xl mx-auto bg-gray-950/80 border-gray-800 backdrop-blur-xl">
+          <CardContent className="p-8">
+            <div className="text-center mb-6">
+              <h2 className="text-2xl font-bold text-white">Platform Performance</h2>
+              <p className="text-gray-400">Real-time metrics across all channels</p>
+            </div>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+              {[
+                { label: "Conversion Rate", value: "3.2%", change: "+0.5%" },
+                { label: "Avg Order Value", value: "$142", change: "+$12" },
+                { label: "Cart Abandonment", value: "68%", change: "-2%" },
+                { label: "Return Rate", value: "5.2%", change: "-0.3%" }
+              ].map((metric, i) => (
+                <motion.div
+                  key={i}
+                  initial={{ opacity: 0, scale: 0.9 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  transition={{ delay: 0.05 * i }}
+                  className="text-center"
+                >
+                  <div className="text-2xl font-bold text-white mb-1">{metric.value}</div>
+                  <div className="text-sm text-gray-400 mb-1">{metric.label}</div>
+                  <Badge className="bg-white/10 text-white border-white/20 text-xs">
+                    {metric.change}
+                  </Badge>
+                </motion.div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </section>
+
+      {/* CTA Section */}
+      <section className="relative z-10 px-8 pb-16 text-center">
+        <Card className="max-w-4xl mx-auto bg-gradient-to-r from-gray-900 to-gray-950 border-gray-800">
+          <CardContent className="p-12">
+            <ShoppingBag className="w-12 h-12 text-white mx-auto mb-6" />
+            <h2 className="text-4xl font-bold text-white mb-6">
+              Grow Your Business with Hanzo
+            </h2>
+            <p className="text-xl text-gray-400 mb-8">
+              Everything you need to run a successful online store
+            </p>
+            <div className="flex gap-4 justify-center">
+              <Button size="lg" className="bg-white text-black hover:bg-gray-200">
+                Start Free Trial
+              </Button>
+              <Button size="lg" variant="outline" className="border-white text-white hover:bg-white hover:text-black">
+                Schedule Demo
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </section>
+    </div>
+  )
+}

templates/index.tsx

@@ -10,6 +10,36 @@ export { default as blog } from './blog'
 export { default as changelog } from './changelog'
 export { default as portfolio } from './portfolio'
 
+// New templates with hyphenated names
+import AiChatTemplate from './ai-chat'
+import SearchInterfaceTemplate from './search-interface'
+import EcommerceDashTemplate from './ecommerce-dash'
+import ApiDocsTemplate from './api-docs'
+
+// Export with keys matching template IDs in template-data.ts
+export const templates = {
+  'devforge': devforge,
+  'mobilefirst': mobilefirst,
+  'saasify': saasify,
+  'startupkit': startupkit,
+  'analyticsdash': analyticsdash,
+  'blog': blog,
+  'changelog': changelog,
+  'portfolio': portfolio,
+  'ai-chat': AiChatTemplate,
+  'search-interface': SearchInterfaceTemplate,
+  'ecommerce-dash': EcommerceDashTemplate,
+  'api-docs': ApiDocsTemplate
+}
+
+// Re-export for backward compatibility
+export {
+  AiChatTemplate as aichat,
+  SearchInterfaceTemplate as searchinterface, 
+  EcommerceDashTemplate as ecommercedash,
+  ApiDocsTemplate as apidocs
+}
+
 // Fallback component for templates not yet implemented
 export const fallback = () => {
   return (

templates/mobilefirst.tsx

@@ -1,22 +1,29 @@
 import { motion } from 'framer-motion'
-import { Button, Card, CardContent, CardHeader, CardTitle, Badge } from '@hanzo/ui/primitives'
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Badge
+} from '@hanzo/ui/primitives'
 import { HanzoLogo } from '@/components/logo'
 import { Smartphone, Palette, Layers, Zap, Download, Share2 } from 'lucide-react'
 
-export default function MobileFirstTemplate() {
+const MobileFirstTemplate: React.FC = () => {
   return (
-    <div className="min-h-screen bg-black text-white">
-      <div className="min-h-screen bg-gradient-to-br from-gray-950 via-black to-gray-950">
+    <div className="min-h-screen bg-background text-foreground">
+      <div className="min-h-screen bg-gradient-to-br from-background via-background/95 to-background">
         {/* Header */}
         <header className="p-8">
           <nav className="flex justify-between items-center">
             <div className="flex items-center gap-3">
-              <div className="w-10 h-10 bg-white rounded-lg flex items-center justify-center">
-                <HanzoLogo className="w-6 h-6 text-black" />
+              <div className="w-10 h-10 bg-foreground rounded-lg flex items-center justify-center">
+                <HanzoLogo className="w-6 h-6 text-background" />
               </div>
-              <span className="text-xl font-bold text-white">Hanzo MobileFirst</span>
+              <span className="text-xl font-bold">Hanzo MobileFirst</span>
             </div>
-            <Button className="bg-white text-black hover:bg-gray-200">
+            <Button variant="default">
               Start Building
             </Button>
           </nav>
@@ -31,28 +38,28 @@ export default function MobileFirstTemplate() {
             <h1 className="text-6xl font-bold mb-6">
               Build Native Apps
               <br />
-              <span className="bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
+              <span className="bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent">
                 Without Code
               </span>
             </h1>
-            <p className="text-xl text-gray-400 mb-12 max-w-2xl mx-auto">
+            <p className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto">
               Drag, drop, and deploy. Create stunning mobile apps with Hanzo's visual builder.
             </p>
 
             {/* Phone Mockup */}
             <div className="relative max-w-sm mx-auto">
-              <div className="bg-gray-900 rounded-[3rem] p-2 shadow-2xl border border-gray-800">
-                <div className="bg-gradient-to-br from-gray-800 to-gray-900 rounded-[2.5rem] h-[600px] flex items-center justify-center">
+              <div className="bg-card rounded-[3rem] p-2 shadow-2xl border border-border">
+                <div className="bg-gradient-to-br from-card/80 to-card rounded-[2.5rem] h-[600px] flex items-center justify-center">
                   <div className="text-center p-8">
                     <motion.div
                       animate={{ rotate: 360 }}
                       transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
-                      className="w-32 h-32 bg-white/10 backdrop-blur rounded-3xl mx-auto mb-6 flex items-center justify-center"
+                      className="w-32 h-32 bg-foreground/10 backdrop-blur rounded-3xl mx-auto mb-6 flex items-center justify-center"
                     >
-                      <HanzoLogo className="w-16 h-16 text-white" />
+                      <HanzoLogo className="w-16 h-16 text-foreground" />
                     </motion.div>
-                    <h3 className="text-2xl font-bold text-white mb-2">Your Hanzo App</h3>
-                    <p className="text-gray-400">Design beautiful mobile experiences</p>
+                    <h3 className="text-2xl font-bold text-foreground mb-2">Your Hanzo App</h3>
+                    <p className="text-muted-foreground">Design beautiful mobile experiences</p>
                   </div>
                 </div>
               </div>
@@ -74,10 +81,10 @@ export default function MobileFirstTemplate() {
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ delay: i * 0.1 }}
               >
-                <Card className="bg-gray-950/50 border-gray-800 hover:border-white/20 transition-colors text-center">
+                <Card className="bg-card/50 border-border hover:border-foreground/20 transition-colors text-center">
                   <CardHeader>
-                    <feature.icon className="w-12 h-12 mx-auto text-white" />
-                    <CardTitle className="text-white">{feature.title}</CardTitle>
+                    <feature.icon className="w-12 h-12 mx-auto text-foreground" />
+                    <CardTitle className="text-foreground">{feature.title}</CardTitle>
                   </CardHeader>
                 </Card>
               </motion.div>
@@ -87,4 +94,6 @@ export default function MobileFirstTemplate() {
       </div>
     </div>
   )
-}
+}
+
+export default MobileFirstTemplate

templates/saasify.tsx

@@ -1,21 +1,29 @@
 import { motion } from 'framer-motion'
-import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Badge } from '@hanzo/ui/primitives'
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Badge
+} from '@hanzo/ui/primitives'
 import { HanzoLogo } from '@/components/logo'
 import { CreditCard, Users, BarChart3, Shield, Zap, Globe } from 'lucide-react'
 
-export default function SaaSifyTemplate() {
+const SaaSifyTemplate: React.FC = () => {
   return (
-    <div className="min-h-screen bg-black text-white">
+    <div className="min-h-screen bg-background text-foreground">
       {/* Header */}
       <header className="p-8">
         <nav className="flex justify-between items-center">
           <div className="flex items-center gap-3">
-            <div className="w-10 h-10 bg-white rounded-lg flex items-center justify-center">
-              <HanzoLogo className="w-6 h-6 text-black" />
+            <div className="w-10 h-10 bg-foreground rounded-lg flex items-center justify-center">
+              <HanzoLogo className="w-6 h-6 text-background" />
             </div>
-            <span className="text-xl font-bold text-white">Hanzo SaaSify</span>
+            <span className="text-xl font-bold">Hanzo SaaSify</span>
           </div>
-          <Button className="bg-white text-black hover:bg-gray-200">
+          <Button variant="default">
             Start Free Trial
           </Button>
         </nav>
@@ -28,13 +36,13 @@ export default function SaaSifyTemplate() {
           animate={{ opacity: 1, y: 0 }}
         >
           <h1 className="text-6xl font-bold mb-6">
-            <span className="bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
+            <span className="bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent">
               Launch Your SaaS
             </span>
             <br />
-            <span className="text-white">In Days, Not Months</span>
+            <span className="text-foreground">In Days, Not Months</span>
           </h1>
-          <p className="text-xl text-gray-400 mb-12 max-w-2xl mx-auto">
+          <p className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto">
             Complete SaaS boilerplate with authentication, billing, and everything you need to go to market 100x faster with Hanzo.
           </p>
         </motion.div>
@@ -52,13 +60,13 @@ export default function SaaSifyTemplate() {
               animate={{ opacity: 1, scale: 1 }}
               transition={{ delay: i * 0.1 }}
             >
-              <Card className="bg-gray-950/50 border-gray-800 hover:border-white/20 transition-colors backdrop-blur-xl">
+              <Card className="bg-card/50 border-border hover:border-foreground/20 transition-colors backdrop-blur-xl">
                 <CardHeader>
-                  <feature.icon className="w-12 h-12 text-white mb-4" />
-                  <CardTitle className="text-white">{feature.title}</CardTitle>
+                  <feature.icon className="w-12 h-12 text-foreground mb-4" />
+                  <CardTitle className="text-foreground">{feature.title}</CardTitle>
                 </CardHeader>
                 <CardContent>
-                  <CardDescription className="text-gray-400">{feature.desc}</CardDescription>
+                  <CardDescription className="text-muted-foreground">{feature.desc}</CardDescription>
                 </CardContent>
               </Card>
             </motion.div>
@@ -80,12 +88,14 @@ export default function SaaSifyTemplate() {
               animate={{ opacity: 1, y: 0 }}
               transition={{ delay: 0.3 + i * 0.1 }}
             >
-              <h3 className="text-4xl font-bold text-white mb-2">{stat.value}</h3>
-              <p className="text-gray-400">{stat.label}</p>
+              <h3 className="text-4xl font-bold text-foreground mb-2">{stat.value}</h3>
+              <p className="text-muted-foreground">{stat.label}</p>
             </motion.div>
           ))}
         </div>
       </section>
     </div>
   )
-}
+}
+
+export default SaaSifyTemplate

templates/search-interface.tsx

@@ -0,0 +1,286 @@
+import { motion } from 'framer-motion'
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Badge } from '@hanzo/ui/primitives'
+import { HanzoLogo } from '@/components/logo'
+import { Search, Sparkles, Globe, Filter, History, TrendingUp, FileText, Image, Video, Music, Map, Calendar, BarChart, Shield, Zap } from 'lucide-react'
+
+export default function SearchInterfaceTemplate() {
+  return (
+    <div className="min-h-screen bg-black text-white">
+      {/* Animated Background */}
+      <div className="fixed inset-0 overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-br from-gray-950 via-black to-gray-950" />
+        <div className="absolute inset-0">
+          {[...Array(20)].map((_, i) => (
+            <motion.div
+              key={i}
+              className="absolute"
+              animate={{
+                x: [0, 100, 0],
+                y: [0, -50, 0],
+                opacity: [0.1, 0.3, 0.1]
+              }}
+              transition={{
+                duration: 10 + Math.random() * 10,
+                repeat: Infinity,
+                delay: Math.random() * 5
+              }}
+              style={{
+                left: `${Math.random() * 100}%`,
+                top: `${Math.random() * 100}%`
+              }}
+            >
+              <div className="w-64 h-64 bg-white/5 rounded-full blur-3xl" />
+            </motion.div>
+          ))}
+        </div>
+      </div>
+
+      {/* Header */}
+      <header className="relative z-10 p-8">
+        <nav className="flex justify-between items-center">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-white rounded-lg flex items-center justify-center">
+              <HanzoLogo className="w-6 h-6 text-black" />
+            </div>
+            <span className="text-xl font-bold">Hanzo Search</span>
+          </div>
+          <div className="flex gap-2">
+            <Button variant="ghost" className="text-white hover:text-black hover:bg-white">
+              Features
+            </Button>
+            <Button variant="ghost" className="text-white hover:text-black hover:bg-white">
+              API
+            </Button>
+            <Button className="bg-white text-black hover:bg-gray-200">
+              Try Search
+            </Button>
+          </div>
+        </nav>
+      </header>
+
+      {/* Hero Section */}
+      <section className="relative z-10 px-8 py-16">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="max-w-4xl mx-auto text-center"
+        >
+          <Badge variant="secondary" className="mb-6 bg-white/10 text-white border-white/20">
+            <Sparkles className="w-4 h-4 mr-2" />
+            AI-Powered Search
+          </Badge>
+
+          <h1 className="text-6xl md:text-7xl font-bold mb-6">
+            <span className="bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
+              Search That
+            </span>
+            <br />
+            <span className="text-white">Understands You</span>
+          </h1>
+
+          <p className="text-xl text-gray-400 mb-12 max-w-2xl mx-auto">
+            Next-generation search with AI understanding, generative UI components, 
+            and real-time answers from multiple sources.
+          </p>
+
+          {/* Search Bar */}
+          <Card className="bg-gray-950/80 border-gray-800 backdrop-blur-xl">
+            <CardContent className="p-2">
+              <div className="flex items-center gap-2">
+                <Search className="w-5 h-5 text-gray-400 ml-4" />
+                <input
+                  type="text"
+                  placeholder="Ask anything..."
+                  className="flex-1 bg-transparent text-white placeholder-gray-500 outline-none py-4 text-lg"
+                />
+                <div className="flex gap-1 mr-2">
+                  <Button size="sm" variant="ghost" className="text-gray-400 hover:text-white">
+                    <Image className="w-4 h-4" />
+                  </Button>
+                  <Button size="sm" variant="ghost" className="text-gray-400 hover:text-white">
+                    <FileText className="w-4 h-4" />
+                  </Button>
+                </div>
+                <Button className="bg-white text-black hover:bg-gray-200">
+                  Search
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Quick Actions */}
+          <div className="flex gap-2 justify-center mt-4">
+            {['Weather today', 'Latest AI news', 'Stock NVDA', 'Recipe pasta'].map((query, i) => (
+              <motion.button
+                key={i}
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.1 * i }}
+                className="px-3 py-1 bg-gray-900/50 border border-gray-800 rounded-full text-sm text-gray-400 hover:text-white hover:border-gray-600 transition-colors"
+              >
+                {query}
+              </motion.button>
+            ))}
+          </div>
+        </motion.div>
+      </section>
+
+      {/* Search Results Preview */}
+      <section className="relative z-10 px-8 py-16">
+        <div className="max-w-6xl mx-auto">
+          <div className="grid md:grid-cols-3 gap-6">
+            {/* Web Results */}
+            <Card className="bg-gray-950/50 border-gray-800 backdrop-blur-xl">
+              <CardHeader>
+                <Globe className="w-6 h-6 text-white mb-2" />
+                <CardTitle className="text-white">Web Results</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                {[1, 2, 3].map((i) => (
+                  <div key={i} className="border-l-2 border-gray-700 pl-3">
+                    <div className="text-sm text-white mb-1">Result Title {i}</div>
+                    <div className="text-xs text-gray-500">example.com</div>
+                    <div className="text-xs text-gray-400 mt-1">
+                      Brief preview of the search result content...
+                    </div>
+                  </div>
+                ))}
+              </CardContent>
+            </Card>
+
+            {/* AI Answer */}
+            <Card className="bg-gradient-to-br from-gray-900 to-gray-950 border-gray-800 backdrop-blur-xl">
+              <CardHeader>
+                <Sparkles className="w-6 h-6 text-white mb-2" />
+                <CardTitle className="text-white">AI Answer</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-3">
+                  <p className="text-sm text-gray-300">
+                    Based on multiple sources, here's a comprehensive answer to your question...
+                  </p>
+                  <div className="bg-gray-900/50 rounded p-3 border border-gray-800">
+                    <code className="text-xs text-gray-400">
+                      Generated from 15 sources
+                    </code>
+                  </div>
+                  <div className="flex gap-2">
+                    <Badge className="bg-white/10 text-white border-white/20 text-xs">
+                      Verified
+                    </Badge>
+                    <Badge className="bg-white/10 text-white border-white/20 text-xs">
+                      Up-to-date
+                    </Badge>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Media Results */}
+            <Card className="bg-gray-950/50 border-gray-800 backdrop-blur-xl">
+              <CardHeader>
+                <Image className="w-6 h-6 text-white mb-2" />
+                <CardTitle className="text-white">Media</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="grid grid-cols-2 gap-2">
+                  {[Image, Video, Music, Map].map((Icon, i) => (
+                    <div key={i} className="bg-gray-900/50 border border-gray-800 rounded p-4 flex items-center justify-center hover:border-white/20 transition-colors">
+                      <Icon className="w-6 h-6 text-gray-400" />
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </section>
+
+      {/* Features */}
+      <section className="relative z-10 px-8 py-16">
+        <div className="max-w-6xl mx-auto">
+          <h2 className="text-3xl font-bold text-center mb-12">
+            <span className="bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
+              Search Features That Matter
+            </span>
+          </h2>
+          <div className="grid md:grid-cols-4 gap-4">
+            {[
+              { icon: Filter, title: "Smart Filters", desc: "AI-powered filtering" },
+              { icon: History, title: "Search History", desc: "Track your searches" },
+              { icon: TrendingUp, title: "Trending", desc: "See what's popular" },
+              { icon: Calendar, title: "Time-Aware", desc: "Temporal understanding" },
+              { icon: BarChart, title: "Analytics", desc: "Search insights" },
+              { icon: Shield, title: "Privacy", desc: "No tracking mode" },
+              { icon: Zap, title: "Instant", desc: "Sub-second results" },
+              { icon: Globe, title: "Multi-Source", desc: "Web, docs, APIs" }
+            ].map((feature, i) => (
+              <motion.div
+                key={i}
+                initial={{ opacity: 0, scale: 0.9 }}
+                animate={{ opacity: 1, scale: 1 }}
+                transition={{ delay: 0.05 * i }}
+              >
+                <Card className="bg-gray-950/50 border-gray-800 hover:border-white/20 transition-all backdrop-blur-xl h-full">
+                  <CardContent className="p-4">
+                    <feature.icon className="w-6 h-6 text-white mb-2" />
+                    <div className="text-sm font-semibold text-white">{feature.title}</div>
+                    <div className="text-xs text-gray-400 mt-1">{feature.desc}</div>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Stats Section */}
+      <section className="relative z-10 px-8 py-16">
+        <Card className="max-w-4xl mx-auto bg-gray-950/80 border-gray-800 backdrop-blur-xl">
+          <CardContent className="p-8">
+            <div className="grid grid-cols-3 gap-8 text-center">
+              {[
+                { value: "50ms", label: "Average Response" },
+                { value: "100M+", label: "Documents Indexed" },
+                { value: "99.9%", label: "Uptime" }
+              ].map((stat, i) => (
+                <motion.div
+                  key={i}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.1 * i }}
+                >
+                  <div className="text-3xl font-bold text-white mb-2">{stat.value}</div>
+                  <div className="text-sm text-gray-400">{stat.label}</div>
+                </motion.div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </section>
+
+      {/* CTA Section */}
+      <section className="relative z-10 px-8 py-16 text-center">
+        <Card className="max-w-4xl mx-auto bg-gradient-to-r from-gray-900 to-gray-950 border-gray-800">
+          <CardContent className="p-12">
+            <Search className="w-12 h-12 text-white mx-auto mb-6" />
+            <h2 className="text-4xl font-bold text-white mb-6">
+              Experience the Future of Search
+            </h2>
+            <p className="text-xl text-gray-400 mb-8">
+              Free for personal use. API available for developers.
+            </p>
+            <div className="flex gap-4 justify-center">
+              <Button size="lg" className="bg-white text-black hover:bg-gray-200">
+                Start Searching
+              </Button>
+              <Button size="lg" variant="outline" className="border-white text-white hover:bg-white hover:text-black">
+                API Access
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </section>
+    </div>
+  )
+}

templates/startupkit.tsx

@@ -1,32 +1,42 @@
 import { motion } from 'framer-motion'
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Badge
+} from '@hanzo/ui/primitives'
+import { HanzoLogo } from '@/components/logo'
 import { Rocket, ChevronRight, Star, Globe, Shield, Zap, Users, TrendingUp, Award } from 'lucide-react'
 
-export default function StartupKitTemplate() {
+const StartupKitTemplate: React.FC = () => {
   return (
-    <div className="min-h-screen bg-gradient-to-br from-white via-white to-gray-500 dark:from-gray-950 dark:via-slate-900 dark:to-gray-400">
+    <div className="min-h-screen bg-gradient-to-br from-background via-background/95 to-background">
       {/* Header */}
       <header className="relative overflow-hidden">
         <div className="absolute inset-0">
-          <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-gray-500/10" />
-          <div className="absolute top-0 left-1/4 w-96 h-96 bg-gray-800/20 rounded-full blur-3xl" />
-          <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-gray-800/20 rounded-full blur-3xl" />
+          <div className="absolute inset-0 bg-gradient-to-br from-foreground/5 to-foreground/10" />
+          <div className="absolute top-0 left-1/4 w-96 h-96 bg-foreground/10 rounded-full blur-3xl" />
+          <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-foreground/10 rounded-full blur-3xl" />
         </div>
 
         <nav className="relative z-10 p-6">
           <div className="max-w-7xl mx-auto flex justify-between items-center">
             <div className="flex items-center gap-3">
-              <div className="w-10 h-10 bg-gradient-to-br from-white to-gray-500 rounded-xl flex items-center justify-center">
-                <Rocket className="w-6 h-6 text-white" />
+              <div className="w-10 h-10 bg-foreground rounded-xl flex items-center justify-center">
+                <Rocket className="w-6 h-6 text-background" />
               </div>
               <span className="text-xl font-bold">StartupKit</span>
             </div>
             <div className="flex items-center gap-6">
-              <button className="text-gray-600 hover:text-gray-900 font-medium">Features</button>
-              <button className="text-gray-600 hover:text-gray-900 font-medium">Pricing</button>
-              <button className="text-gray-600 hover:text-gray-900 font-medium">Docs</button>
-              <button className="px-4 py-2 bg-gradient-to-r from-white to-gray-500 text-white rounded-lg font-semibold">
+              <Button variant="ghost">Features</Button>
+              <Button variant="ghost">Pricing</Button>
+              <Button variant="ghost">Docs</Button>
+              <Button variant="default">
                 Get Started
-              </button>
+              </Button>
             </div>
           </div>
         </nav>
@@ -39,32 +49,30 @@ export default function StartupKitTemplate() {
               animate={{ opacity: 1, x: 0 }}
               transition={{ duration: 0.5 }}
             >
-              <div className="inline-flex items-center gap-2 px-3 py-1 bg-gray-800 dark:bg-gray-800/30 rounded-full mb-6">
-                <Star className="w-4 h-4 text-gray-400 dark:text-gray-400" />
-                <span className="text-sm font-semibold text-gray-400 dark:text-gray-400">
-                  #1 Product of the Week
-                </span>
-              </div>
+              <Badge variant="secondary" className="mb-6">
+                <Star className="w-4 h-4 mr-2" />
+                #1 Product of the Week
+              </Badge>
 
               <h1 className="text-5xl md:text-6xl font-bold mb-6">
                 Launch Your Startup
-                <span className="bg-gradient-to-r from-white to-gray-500 bg-clip-text text-transparent">
+                <span className="bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent">
                   {" "}in Days
                 </span>
               </h1>
 
-              <p className="text-xl text-gray-600 dark:text-gray-400 mb-8">
+              <p className="text-xl text-muted-foreground mb-8">
                 Complete SaaS boilerplate with authentication, payments, database, and UI components.
                 Stop coding from scratch.
               </p>
 
               <div className="flex gap-4 mb-12">
-                <button className="px-6 py-3 bg-gradient-to-r from-white to-gray-500 text-white rounded-lg font-semibold flex items-center gap-2">
+                <Button variant="default" className="flex items-center gap-2">
                   Start Building <ChevronRight className="w-4 h-4" />
-                </button>
-                <button className="px-6 py-3 border-2 border-gray-300 dark:border-gray-700 rounded-lg font-semibold">
+                </Button>
+                <Button variant="outline">
                   View Demo
-                </button>
+                </Button>
               </div>
 
               <div className="flex items-center gap-6">
@@ -72,17 +80,17 @@ export default function StartupKitTemplate() {
                   {[...Array(4)].map((_, i) => (
                     <div
                       key={i}
-                      className="w-10 h-10 rounded-full bg-gradient-to-br from-white to-gray-500 border-2 border-white dark:border-slate-900"
+                      className="w-10 h-10 rounded-full bg-gradient-to-br from-foreground to-muted-foreground border-2 border-background"
                     />
                   ))}
                 </div>
                 <div>
-                  <div className="flex text-white">
+                  <div className="flex text-foreground">
                     {[...Array(5)].map((_, i) => (
                       <Star key={i} className="w-4 h-4 fill-current" />
                     ))}
                   </div>
-                  <p className="text-sm text-gray-600 dark:text-gray-400">2,500+ developers</p>
+                  <p className="text-sm text-muted-foreground">2,500+ developers</p>
                 </div>
               </div>
             </motion.div>
@@ -94,22 +102,22 @@ export default function StartupKitTemplate() {
               className="relative"
             >
               <div className="relative rounded-2xl overflow-hidden shadow-2xl">
-                <div className="absolute inset-0 bg-gradient-to-br from-white to-gray-500" />
-                <div className="relative bg-white/10 backdrop-blur-xl p-8">
+                <div className="absolute inset-0 bg-gradient-to-br from-foreground/10 to-foreground/20" />
+                <div className="relative bg-card/80 backdrop-blur-xl p-8">
                   <div className="space-y-4">
                     {/* Dashboard Preview */}
-                    <div className="bg-white/20 backdrop-blur rounded-xl p-4">
+                    <div className="bg-card/50 backdrop-blur rounded-xl p-4">
                       <div className="flex items-center gap-2 mb-3">
-                        <div className="w-3 h-3 bg-gray-700 rounded-full" />
-                        <div className="w-3 h-3 bg-gray-600 rounded-full" />
-                        <div className="w-3 h-3 bg-gray-700 rounded-full" />
+                        <div className="w-3 h-3 bg-muted rounded-full" />
+                        <div className="w-3 h-3 bg-muted rounded-full" />
+                        <div className="w-3 h-3 bg-muted rounded-full" />
                       </div>
                       <div className="space-y-3">
-                        <div className="h-3 bg-white/40 rounded w-3/4" />
-                        <div className="h-3 bg-white/40 rounded w-1/2" />
+                        <div className="h-3 bg-foreground/20 rounded w-3/4" />
+                        <div className="h-3 bg-foreground/20 rounded w-1/2" />
                         <div className="grid grid-cols-3 gap-2">
                           {[...Array(6)].map((_, i) => (
-                            <div key={i} className="h-20 bg-white/30 rounded" />
+                            <div key={i} className="h-20 bg-foreground/10 rounded" />
                           ))}
                         </div>
                       </div>
@@ -122,17 +130,17 @@ export default function StartupKitTemplate() {
               <motion.div
                 animate={{ y: [0, -10, 0] }}
                 transition={{ duration: 2, repeat: Infinity }}
-                className="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-gray-100 to-gray-500 rounded-2xl flex items-center justify-center shadow-xl"
+                className="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-foreground to-muted-foreground rounded-2xl flex items-center justify-center shadow-xl"
               >
-                <Award className="w-12 h-12 text-white" />
+                <Award className="w-12 h-12 text-background" />
               </motion.div>
 
               <motion.div
                 animate={{ y: [0, 10, 0] }}
                 transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
-                className="absolute -bottom-4 -left-4 w-20 h-20 bg-gradient-to-br from-white to-gray-400 rounded-xl flex items-center justify-center shadow-xl"
+                className="absolute -bottom-4 -left-4 w-20 h-20 bg-gradient-to-br from-foreground to-muted-foreground rounded-xl flex items-center justify-center shadow-xl"
               >
-                <TrendingUp className="w-10 h-10 text-white" />
+                <TrendingUp className="w-10 h-10 text-background" />
               </motion.div>
             </motion.div>
           </div>
@@ -144,7 +152,7 @@ export default function StartupKitTemplate() {
         <div className="max-w-7xl mx-auto">
           <div className="text-center mb-12">
             <h2 className="text-4xl font-bold mb-4">Everything You Need</h2>
-            <p className="text-xl text-gray-600 dark:text-gray-400">
+            <p className="text-xl text-muted-foreground">
               Built with modern technologies and best practices
             </p>
           </div>
@@ -163,13 +171,18 @@ export default function StartupKitTemplate() {
                 initial={{ opacity: 0, y: 20 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ delay: i * 0.1 }}
-                className="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow"
               >
-                <div className="w-12 h-12 bg-gradient-to-br from-white to-gray-500 rounded-lg flex items-center justify-center mb-4">
-                  <feature.icon className="w-6 h-6 text-white" />
-                </div>
-                <h3 className="text-lg font-semibold mb-2">{feature.title}</h3>
-                <p className="text-gray-600 dark:text-gray-400">{feature.desc}</p>
+                <Card className="hover:shadow-xl transition-shadow">
+                  <CardHeader>
+                    <div className="w-12 h-12 bg-gradient-to-br from-foreground to-muted-foreground rounded-lg flex items-center justify-center mb-4">
+                      <feature.icon className="w-6 h-6 text-background" />
+                    </div>
+                    <CardTitle>{feature.title}</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <CardDescription>{feature.desc}</CardDescription>
+                  </CardContent>
+                </Card>
               </motion.div>
             ))}
           </div>
@@ -177,4 +190,6 @@ export default function StartupKitTemplate() {
       </section>
     </div>
   )
-}
+}
+
+export default StartupKitTemplate