@nextsparkjs/theme-default 0.1.0-beta.1

package/templates/(public)/blog/[slug]/page.tsx

@@ -0,0 +1,65 @@
+import { notFound } from 'next/navigation'
+import { PageRenderer } from '@/app/components/page-renderer'
+import { PostHeader } from '@/themes/default/entities/posts/components/post-header'
+import { PostsService } from '@/themes/default/entities/posts/posts.service'
+import type { Metadata } from 'next'
+
+// Enable ISR with 1 hour revalidation
+export const revalidate = 3600
+
+interface PageProps {
+  params: Promise<{ slug: string }>
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const resolvedParams = await params
+  const metadata = await PostsService.getPublishedMetadata(resolvedParams.slug)
+
+  if (!metadata) {
+    return {
+      title: 'Not Found'
+    }
+  }
+
+  return {
+    title: metadata.seoTitle || `${metadata.title} | Blog`,
+    description: metadata.seoDescription || metadata.excerpt || undefined,
+    openGraph: {
+      title: metadata.seoTitle || metadata.title,
+      description: metadata.seoDescription || metadata.excerpt || undefined,
+      images: metadata.ogImage ? [metadata.ogImage] : metadata.featuredImage ? [metadata.featuredImage] : [],
+      type: 'article',
+    },
+  }
+}
+
+async function BlogPostPage({ params }: PageProps) {
+  const resolvedParams = await params
+  const post = await PostsService.getPublishedBySlug(resolvedParams.slug)
+
+  if (!post) {
+    notFound()
+  }
+
+  return (
+    <div className="min-h-screen bg-background py-8" data-cy="public-posts-page">
+      {/* Post Header */}
+      <PostHeader post={post} />
+
+      {/* Post Content (Blocks) */}
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+        <PageRenderer
+          page={{
+            id: post.id,
+            title: post.title,
+            slug: post.slug,
+            blocks: post.blocks,
+            locale: 'en',
+          }}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default BlogPostPage

package/templates/(public)/layout.tsx

@@ -0,0 +1,25 @@
+import { PublicNavbar } from '@nextsparkjs/core/components/app/layouts/PublicNavbar'
+import { PublicFooter } from '@nextsparkjs/core/components/app/layouts/PublicFooter'
+
+function PublicLayout({ 
+  children 
+}: { 
+  children: React.ReactNode 
+}) {
+  return (
+    <div className="min-h-screen bg-background flex flex-col">
+      {/* Public Navbar */}
+      <PublicNavbar />
+
+      {/* Main Content */}
+      <main className="flex-1">
+        {children}
+      </main>
+
+      {/* Public Footer */}
+      <PublicFooter />
+    </div>
+  )
+}
+
+export default PublicLayout

package/templates/(public)/page.tsx

@@ -0,0 +1,200 @@
+'use client'
+
+import Link from 'next/link'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextsparkjs/core/components/ui/card'
+import { Badge } from '@nextsparkjs/core/components/ui/badge'
+
+import { useAuth } from '@nextsparkjs/core/hooks/useAuth'
+import { useTranslations } from 'next-intl'
+import { CheckCircle2, Code2, Database, Lock, Mail, Palette, Zap, Server, Shield, Layers } from 'lucide-react'
+
+function Home() {
+  const { user, isLoading } = useAuth()
+  const t = useTranslations('home')
+
+  const techStack = [
+    { name: 'Next.js 15', icon: <Zap className="w-4 h-4" />, badge: t('techStack.appRouter') },
+    { name: 'React 19 + TypeScript', icon: <Code2 className="w-4 h-4" />, badge: t('techStack.latest') },
+    { name: 'Better Auth', icon: <Lock className="w-4 h-4" />, badge: t('techStack.secure') },
+    { name: 'PostgreSQL', icon: <Database className="w-4 h-4" />, badge: t('techStack.supabase') },
+    { name: 'TanStack Query', icon: <Server className="w-4 h-4" />, badge: t('techStack.v5') },
+    { name: 'shadcn/ui', icon: <Palette className="w-4 h-4" />, badge: t('techStack.components') },
+    { name: 'React Hook Form + Zod', icon: <Shield className="w-4 h-4" />, badge: t('techStack.validation') },
+    { name: 'Tailwind CSS v4', icon: <Layers className="w-4 h-4" />, badge: t('techStack.styling') },
+  ]
+
+  const features = [
+    { name: t('features.emailAuth'), icon: <Mail className="w-4 h-4 text-blue-500" /> },
+    { name: t('features.googleOAuth'), icon: <CheckCircle2 className="w-4 h-4 text-blue-500" /> },
+    { name: t('features.protectedRoutes'), icon: <CheckCircle2 className="w-4 h-4 text-blue-500" /> },
+    { name: t('features.emailVerification'), icon: <CheckCircle2 className="w-4 h-4 text-blue-500" /> },
+    { name: t('features.passwordReset'), icon: <CheckCircle2 className="w-4 h-4 text-blue-500" /> },
+    { name: t('features.entityManagement'), icon: <CheckCircle2 className="w-4 h-4 text-blue-500" /> },
+    { name: t('features.pluginSystem'), icon: <CheckCircle2 className="w-4 h-4 text-blue-500" /> },
+    { name: t('features.themeSupport'), icon: <CheckCircle2 className="w-4 h-4 text-blue-500" /> },
+    { name: t('features.i18nSystem'), icon: <CheckCircle2 className="w-4 h-4 text-blue-500" /> },
+    { name: t('features.apiRoutes'), icon: <CheckCircle2 className="w-4 h-4 text-blue-500" /> },
+    { name: t('features.colorMode'), icon: <CheckCircle2 className="w-4 h-4 text-blue-500" /> },
+    { name: t('features.aiIntegration'), icon: <CheckCircle2 className="w-4 h-4 text-blue-500" />, badge: 'Coming Soon' },
+    { name: t('features.teams'), icon: <CheckCircle2 className="w-4 h-4 text-blue-500" />, badge: 'Coming Soon' },
+    { name: t('features.memberships'), icon: <CheckCircle2 className="w-4 h-4 text-blue-500" />, badge: 'Coming Soon' },
+    { name: t('features.amplitude'), icon: <CheckCircle2 className="w-4 h-4 text-blue-500" />, badge: 'Coming Soon' },
+  ]
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-background to-muted/20">
+      <div className="container max-w-7xl mx-auto px-4 py-16">
+        {/* Hero Section */}
+        <div className="text-center mb-16">
+          <Badge variant="secondary" className="mb-4">
+            {t('hero.badge')}
+          </Badge>
+          <h1 className="text-6xl font-bold bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent mb-4">
+            {t('hero.title')}
+          </h1>
+          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+            {t('hero.description')}
+          </p>
+        </div>
+
+        {/* Auth Section */}
+        {!isLoading && (
+          <Card className="mb-12 border-2">
+            <CardContent className="p-8">
+              {user ? (
+                                  <div className="text-center space-y-4">
+                    <div className="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 rounded-full">
+                      <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+                      <span className="text-sm font-medium">{t('auth.authenticated')}</span>
+                    </div>
+                    <p className="text-lg">
+                      {t('auth.welcomeBack', { email: user.email })}
+                    </p>
+                    <Link href="/dashboard">
+                      <Button size="lg" className="gap-2">
+                        <Layers className="w-4 h-4" />
+                        {t('auth.goToDashboard')}
+                      </Button>
+                    </Link>
+                  </div>
+              ) : (
+                <div className="text-center space-y-6">
+                  <h2 className="text-2xl font-semibold">{t('auth.getStarted')}</h2>
+                  <p className="text-muted-foreground">
+                    {t('auth.experience')}
+                  </p>
+                  <div className="flex justify-center gap-4">
+                    <Link href="/signup">
+                      <Button size="lg" className="gap-2">
+                        <Zap className="w-4 h-4" />
+                        {t('auth.createAccount')}
+                      </Button>
+                    </Link>
+                    <Link href="/login">
+                      <Button size="lg" variant="outline" className="gap-2">
+                        <Lock className="w-4 h-4" />
+                        {t('auth.signIn')}
+                      </Button>
+                    </Link>
+                  </div>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Tech Stack & Features Grid */}
+        <div className="grid lg:grid-cols-2 gap-8">
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Code2 className="w-5 h-5" />
+                {t('techStack.title')}
+              </CardTitle>
+              <CardDescription>
+                {t('techStack.description')}
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-3">
+                {techStack.map((tech, index) => (
+                  <div key={index} className="flex items-center justify-between p-3 rounded-lg bg-muted/50 hover:bg-muted transition-colors">
+                    <div className="flex items-center gap-3">
+                      {tech.icon}
+                      <span className="font-medium">{tech.name}</span>
+                    </div>
+                    <Badge variant="outline">{tech.badge}</Badge>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Zap className="w-5 h-5" />
+                {t('features.title')}
+              </CardTitle>
+              <CardDescription>
+                {t('features.description')}
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-2 gap-3">
+                {features.map((feature, index) => (
+                  <div key={index} className="flex items-center justify-between gap-2 p-3 rounded-lg bg-muted/50">
+                    <div className="flex items-center gap-2">
+                      {feature.icon}
+                      <span className="text-sm font-medium">{feature.name}</span>
+                    </div>
+                    {feature.badge && (
+                      <Badge variant="secondary" className="text-xs whitespace-nowrap">
+                        {feature.badge}
+                      </Badge>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Call to Action for Public */}
+        {!user && (
+          <Card className="mt-8 bg-gradient-to-r from-primary/10 to-primary/5 border-primary/20">
+            <CardContent className="p-8 text-center">
+              <h2 className="text-2xl font-bold mb-4">{t('cta.readyToStart')}</h2>
+              <p className="text-muted-foreground mb-6 max-w-2xl mx-auto">
+                {t('cta.description')}
+              </p>
+              <div className="flex justify-center gap-4">
+                <Link href="/pricing">
+                  <Button size="lg" variant="outline" className="gap-2">
+                    <Palette className="w-4 h-4" />
+                    {t('cta.viewPricing')}
+                  </Button>
+                </Link>
+                <Link href="/signup">
+                  <Button size="lg" className="gap-2">
+                    <Zap className="w-4 h-4" />
+                    {t('cta.startFreeTrial')}
+                  </Button>
+                </Link>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Footer */}
+        <div className="mt-16 text-center text-sm text-muted-foreground">
+          <p>{t('footer.builtWith')}</p>
+          <p className="mt-2">{t('footer.readyForProduction')}</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Home

package/templates/(public)/support/page.tsx

@@ -0,0 +1,321 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextsparkjs/core/components/ui/card'
+import { Badge } from '@nextsparkjs/core/components/ui/badge'
+import { Separator } from '@nextsparkjs/core/components/ui/separator'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import {
+  BookOpen,
+  MessageCircle,
+  Mail,
+  ExternalLink,
+  Shield,
+  Settings,
+  User,
+  CreditCard,
+  HelpCircle,
+  CheckCircle2
+} from 'lucide-react'
+import Link from 'next/link'
+
+function SupportPage() {
+  const quickLinks = [
+    {
+      title: "Getting Started",
+      description: "Learn the basics of using our platform",
+      icon: <BookOpen className="h-6 w-6" />,
+      items: [
+        "Creating your account",
+        "Setting up your profile", 
+        "First steps tutorial",
+        "Understanding the dashboard"
+      ]
+    },
+    {
+      title: "Account Management",
+      description: "Manage your account settings and preferences",
+      icon: <User className="h-6 w-6" />,
+      items: [
+        "Profile settings",
+        "Password management",
+        "Email preferences",
+        "Account deletion"
+      ]
+    },
+    {
+      title: "Security & Privacy",
+      description: "Keep your account safe and secure",
+      icon: <Shield className="h-6 w-6" />,
+      items: [
+        "Two-factor authentication",
+        "Privacy settings",
+        "Data protection",
+        "Security best practices"
+      ]
+    },
+    {
+      title: "Billing & Subscriptions",
+      description: "Manage your payments and subscriptions",
+      icon: <CreditCard className="h-6 w-6" />,
+      items: [
+        "Payment methods",
+        "Subscription plans",
+        "Billing history",
+        "Refund policy"
+      ]
+    }
+  ]
+
+  const features = [
+    {
+      category: "Dashboard Features",
+      icon: <Settings className="h-5 w-5" />,
+      items: [
+        {
+          name: "Task Management",
+          description: "Create, edit, and organize your tasks efficiently",
+          status: "Available"
+        },
+        {
+          name: "Real-time Notifications", 
+          description: "Get instant updates about important events",
+          status: "Available"
+        },
+        {
+          name: "Dark/Light Mode",
+          description: "Switch between themes for comfortable viewing",
+          status: "Available"
+        },
+        {
+          name: "Mobile Responsive",
+          description: "Access your account from any device",
+          status: "Available"
+        }
+      ]
+    },
+    {
+      category: "Account Settings",
+      icon: <User className="h-5 w-5" />,
+      items: [
+        {
+          name: "Profile Management",
+          description: "Update your personal information and preferences",
+          status: "Available"
+        },
+        {
+          name: "Password Security",
+          description: "Change password and manage security settings",
+          status: "Available"
+        },
+        {
+          name: "Notification Settings",
+          description: "Control how and when you receive notifications",
+          status: "Available"
+        },
+        {
+          name: "Privacy Controls",
+          description: "Manage your data privacy and visibility settings",
+          status: "Available"
+        }
+      ]
+    }
+  ]
+
+  const faqs = [
+    {
+      question: "¿Cómo puedo cambiar mi contraseña?",
+      answer: "Ve a Dashboard > Settings > Password. Ingresa tu contraseña actual y luego la nueva contraseña dos veces para confirmarla."
+    },
+    {
+      question: "¿Puedo cambiar mi tema a modo oscuro?",
+      answer: "Sí! Usa el botón de luna/sol en la esquina superior derecha de cualquier página para alternar entre modo claro y oscuro."
+    },
+    {
+      question: "¿Cómo administro mis tareas?",
+      answer: "Ve a Dashboard > Tasks para ver, crear, editar y eliminar tus tareas. Puedes marcarlas como completadas haciendo clic en el checkbox."
+    },
+    {
+      question: "¿Dónde configuro mis notificaciones?",
+      answer: "En Dashboard > Settings > Notifications puedes controlar qué tipos de notificaciones quieres recibir y cómo."
+    },
+    {
+      question: "¿Cómo contacto soporte técnico?",
+      answer: "Puedes contactarnos a través del email support@boilerplate.com o usando el chat en vivo durante horarios de oficina."
+    },
+    {
+      question: "¿Mis datos están seguros?",
+      answer: "Sí, usamos encriptación de nivel empresarial y seguimos las mejores prácticas de seguridad para proteger tu información."
+    }
+  ]
+
+  const contactOptions = [
+    {
+      title: "Email Support",
+      description: "Get help via email within 24 hours",
+      icon: <Mail className="h-6 w-6" />,
+      action: "support@boilerplate.com",
+      link: "mailto:support@boilerplate.com"
+    },
+    {
+      title: "Live Chat",
+      description: "Chat with our support team",
+      icon: <MessageCircle className="h-6 w-6" />,
+      action: "Start Chat",
+      link: "#"
+    },
+    {
+      title: "Documentation",
+      description: "Browse our complete documentation",
+      icon: <BookOpen className="h-6 w-6" />,
+      action: "View Docs",
+      link: "/docs"
+    }
+  ]
+
+  return (
+    <div className="container max-w-7xl mx-auto px-4 py-8">
+      {/* Hero Section */}
+      <div className="text-center mb-12">
+        <div className="inline-flex items-center gap-2 bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium mb-4">
+          <HelpCircle className="h-4 w-4" />
+          Support Center
+        </div>
+        <h1 className="text-4xl font-bold mb-4">
+          ¿Cómo podemos ayudarte?
+        </h1>
+        <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+          Encuentra respuestas a tus preguntas, aprende a usar la plataforma y contacta nuestro equipo de soporte.
+        </p>
+      </div>
+
+      {/* Quick Start Guide */}
+      <div className="mb-12">
+        <h2 className="text-2xl font-bold mb-6">Guías de Inicio Rápido</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {quickLinks.map((section, index) => (
+            <Card key={index} className="h-full">
+              <CardHeader>
+                <div className="flex items-center gap-3">
+                  <div className="p-2 bg-primary/10 rounded-lg text-primary">
+                    {section.icon}
+                  </div>
+                  <div>
+                    <CardTitle className="text-lg">{section.title}</CardTitle>
+                    <CardDescription>{section.description}</CardDescription>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <ul className="space-y-2">
+                  {section.items.map((item, itemIndex) => (
+                    <li key={itemIndex} className="flex items-center gap-2 text-sm">
+                      <CheckCircle2 className="h-4 w-4 text-green-500" />
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      {/* Features Documentation */}
+      <div className="mb-12">
+        <h2 className="text-2xl font-bold mb-6">Funcionalidades Disponibles</h2>
+        <div className="space-y-6">
+          {features.map((category, index) => (
+            <Card key={index}>
+              <CardHeader>
+                <div className="flex items-center gap-3">
+                  <div className="p-2 bg-blue-500/10 rounded-lg text-blue-600">
+                    {category.icon}
+                  </div>
+                  <CardTitle>{category.category}</CardTitle>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  {category.items.map((feature, featureIndex) => (
+                    <div key={featureIndex} className="flex items-start gap-3 p-3 rounded-lg border">
+                      <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5" />
+                      <div className="flex-1">
+                        <div className="flex items-center gap-2 mb-1">
+                          <h4 className="font-medium">{feature.name}</h4>
+                          <Badge variant="secondary" className="text-xs">
+                            {feature.status}
+                          </Badge>
+                        </div>
+                        <p className="text-sm text-muted-foreground">
+                          {feature.description}
+                        </p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      {/* FAQ Section */}
+      <div className="mb-12">
+        <h2 className="text-2xl font-bold mb-6">Preguntas Frecuentes</h2>
+        <div className="space-y-4">
+          {faqs.map((faq, index) => (
+            <Card key={index}>
+              <CardHeader>
+                <CardTitle className="text-lg">{faq.question}</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-muted-foreground">{faq.answer}</p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      {/* Contact Support */}
+      <div className="mb-8">
+        <h2 className="text-2xl font-bold mb-6">¿Necesitas más ayuda?</h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {contactOptions.map((option, index) => (
+            <Card key={index} className="text-center">
+              <CardHeader>
+                <div className="flex justify-center mb-3">
+                  <div className="p-3 bg-primary/10 rounded-full text-primary">
+                    {option.icon}
+                  </div>
+                </div>
+                <CardTitle className="text-lg">{option.title}</CardTitle>
+                <CardDescription>{option.description}</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Button asChild className="w-full">
+                  <Link href={option.link} target={option.link.startsWith('http') ? '_blank' : undefined}>
+                    {option.action}
+                    {option.link.startsWith('http') && <ExternalLink className="ml-2 h-4 w-4" />}
+                  </Link>
+                </Button>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      {/* Back to App */}
+      <div className="text-center">
+        <Separator className="mb-6" />
+        <p className="text-muted-foreground mb-4">
+          ¿Listo para continuar usando la aplicación?
+        </p>
+        <Button asChild>
+          <Link href="/dashboard">
+            Volver al Dashboard
+          </Link>
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default SupportPage

package/templates/dashboard/(main)/agent-multi/page.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import { ChatPanel, ORCHESTRATOR_AGENT_BADGES } from '@/themes/default/components/ai-chat/ChatPanel'
+import { useOrchestratorChat } from '@/themes/default/lib/hooks/useOrchestratorChat'
+import { Sparkles } from 'lucide-react'
+
+/**
+ * AI Orchestrator Test Page
+ *
+ * This page demonstrates the multi-agent orchestrator pattern.
+ * Messages are routed to specialized agents based on intent:
+ * - Task Agent: manages tasks, to-dos, deadlines
+ * - Customer Agent: manages customers, accounts, sales
+ * - Page Agent: manages pages, blocks, content
+ */
+export default function AiOrchestratorTemplate() {
+    const {
+        messages,
+        input,
+        setInput,
+        isLoading,
+        sendMessage,
+        clearChat,
+        error,
+        sessionId,
+    } = useOrchestratorChat()
+
+    return (
+        <ChatPanel
+            cyPrefix="orchestrator-chat"
+            messages={messages}
+            input={input}
+            onInputChange={setInput}
+            onSend={sendMessage}
+            isLoading={isLoading}
+            error={error}
+            sessionId={sessionId}
+            showSessionDebug
+            agentBadges={ORCHESTRATOR_AGENT_BADGES}
+            showAgentLegend
+            header={{
+                title: 'AI Orchestrator Test',
+                subtitle: 'Multi-agent routing: Tasks, Customers, Pages',
+                icon: Sparkles,
+                iconClassName: 'bg-amber-100 dark:bg-amber-900/30',
+                showClearButton: true,
+                onClear: clearChat,
+            }}
+            emptyState={{
+                icon: Sparkles,
+                title: 'Test the Orchestrator',
+                description: 'Try these examples:',
+                suggestions: [
+                    'Show me my pending tasks',
+                    'List all customers',
+                    'Create a landing page for Product X',
+                    'Hello!',
+                    'Create something new',
+                ],
+            }}
+        />
+    )
+}