@vibecms/cli 0.1.0

package/bin/vibe.js

@@ -0,0 +1,497 @@
+#!/usr/bin/env node
+
+const { program } = require('commander');
+const prompts = require('prompts');
+const fs = require('fs-extra');
+const path = require('path');
+const { execSync } = require('child_process');
+const pc = require('picocolors');
+
+program
+  .version('0.1.0')
+  .description('VibeCMS Framework CLI Installer');
+
+program
+  .command('init')
+  .option('--local', 'Use local workspace symlinks instead of NPM registry')
+  .option('--minimal', 'Minimal install: only CMS engine, editor overlay, and API routes (no starter blocks/header/footer)')
+  .description('Initialize VibeCMS in your Next.js project')
+  .action(async (options) => {
+    console.log(pc.magenta(pc.bold('\nWelcome to VibeCMS! 👋\n')));
+
+    const frameworkPrompt = await prompts({
+      type: 'select',
+      name: 'framework',
+      message: 'Which framework is this project using?',
+      choices: [
+        { title: 'Next.js', value: 'nextjs' },
+        { title: 'Vite (React)', value: 'vite' },
+        { title: 'Astro (React)', value: 'astro' }
+      ],
+      initial: 0
+    });
+
+    if (!frameworkPrompt.framework) {
+      console.log(pc.red('Installation cancelled.'));
+      process.exit(0);
+    }
+
+    const response = await prompts({
+      type: 'confirm',
+      name: 'proceed',
+      message: 'Authentication successful. This will install VibeCMS directly into your Next.js project. Proceed?',
+      initial: true
+    });
+
+    if (!response.proceed) {
+      console.log(pc.red('Installation cancelled.'));
+      process.exit(0);
+    }
+
+    // License key prompt
+    const licensePrompt = await prompts({
+      type: 'text',
+      name: 'licenseKey',
+      message: 'Enter your VibeCMS license key (get one at https://vibecms.com/pricing):',
+      validate: (val) => {
+        if (!val || !val.startsWith('vibe_')) return 'License key must start with "vibe_"';
+        if (!val.includes('.')) return 'Invalid key format. Expected: vibe_<payload>.<signature>';
+        return true;
+      }
+    });
+
+    if (!licensePrompt.licenseKey) {
+      console.log(pc.yellow('⚠ No license key provided. You can add it later to .env.local as VIBE_LICENSE_KEY=...'));
+    }
+
+    const cwd = process.cwd();
+    const isSrc = fs.existsSync(path.join(cwd, 'src'));
+    const sourceDir = isSrc ? path.join(cwd, 'src') : cwd;
+    const pkgPath = path.join(cwd, 'package.json');
+    if (!fs.existsSync(pkgPath)) {
+      console.error(pc.red('No package.json found. Please run this command in a valid project.'));
+      process.exit(1);
+    }
+    
+    // 1. Install Dependencies
+    try {
+      console.log(pc.cyan('\n📦 Injecting core dependencies into package.json...'));
+      const pkg = JSON.parse(await fs.readFile(pkgPath, 'utf8'));
+      pkg.dependencies = pkg.dependencies || {};
+      const vibeDeps = {
+        "@vibecms/core": options.local ? "file:../../packages/core" : "^0.1.0",
+        "@vibecms/next": options.local ? "file:../../packages/next" : "^0.1.0",
+        "isomorphic-git": "^1.25.0",
+        "@isomorphic-git/lightning-fs": "^4.6.0",
+        "nanostores": "latest",
+        "@nanostores/react": "latest",
+        "zod": "^3.22.4",
+        "lucide-react": "latest",
+        "sonner": "latest",
+        "framer-motion": "latest",
+        "@vercel/blob": "latest",
+        "@tiptap/react": "latest",
+        "@tiptap/starter-kit": "latest",
+        ...(frameworkPrompt.framework === 'nextjs' ? { "next-auth": "4.24.5" } : {})
+      };
+      
+      let updated = false;
+      for (const [dep, version] of Object.entries(vibeDeps)) {
+        if (!pkg.dependencies[dep]) {
+          pkg.dependencies[dep] = version;
+          updated = true;
+        }
+      }
+      
+      if (updated) {
+        await fs.writeFile(pkgPath, JSON.stringify(pkg, null, 2));
+        console.log(pc.green('✔ Updated package.json dependencies'));
+      } else {
+         console.log(pc.gray('✔ Dependencies already injected.'));
+      }
+      
+      
+      console.log(pc.cyan('\n📦 Running npm install...'));
+      try {
+        execSync('npm install', { stdio: 'inherit', cwd });
+      } catch (e) {
+        console.log(pc.yellow('\n⚠ Standard install failed (likely React 19 Peer Dependency clash). Falling back to --legacy-peer-deps...'));
+        execSync('npm install --legacy-peer-deps', { stdio: 'inherit', cwd });
+      }
+    } catch (e) {
+      console.error(pc.red('Failed to update package.json or install dependencies.'));
+      process.exit(1);
+    }
+
+    // 2. Extract Templates Natively
+    try {
+      console.log(pc.cyan('\n🚚 Unpacking VibeCMS core templates...'));
+      const templateDir = path.join(__dirname, '../templates');
+      
+      if (!fs.existsSync(templateDir)) {
+        throw new Error('Templates directory missing in CLI package.');
+      }
+      
+      if (options.minimal) {
+        // Minimal mode: only copy CMS engine essentials, no starter blocks/header/footer
+        const minimalFiles = [
+          'components/cms/EditProvider.tsx',
+          'components/cms/Editor.tsx',
+          'components/cms/CmsStage.tsx',
+          'components/cms/VisualWrapper.tsx',
+          'components/cms/FormGenerator.tsx',
+          'components/cms/BlockRenderer.tsx',
+          'components/cms/fields',
+          'lib/cms/schema.ts',
+          'lib/cms/sanitize.ts',
+          'lib/cms/auditor.ts',
+          'lib/cms/engine.ts',
+          'lib/cms/auth-nextauth.ts',
+          'lib/cms/store.ts',
+          'lib/cms/registry.ts',
+        ];
+        for (const relPath of minimalFiles) {
+          const srcPath = path.join(templateDir, relPath);
+          const destPath = path.join(sourceDir, relPath);
+          if (fs.existsSync(srcPath)) {
+            await fs.copy(srcPath, destPath, { overwrite: false, errorOnExist: false });
+          }
+        }
+        console.log(pc.green(`✔ Unpacked minimal CMS core into ${isSrc ? 'src/' : './'} (no starter blocks, header, or footer)`));
+      } else {
+        await fs.copy(templateDir, sourceDir, { overwrite: false, errorOnExist: false });
+        console.log(pc.green(`✔ Successfully unpacked core files into ${isSrc ? 'src/' : './'}`));
+      }
+
+      // 3. Generate vibe.config.ts
+      let configTemplate = '';
+      if (frameworkPrompt.framework === 'nextjs') {
+         configTemplate = `import { defineConfig } from '@vibecms/core';\nimport { z } from 'zod';\nimport { vibeField } from '@${isSrc ? '' : '/'}lib/cms/schema';\nimport { NextAuthProvider } from '@${isSrc ? '' : '/'}lib/cms/auth-nextauth';\n\nexport default defineConfig({\n  contentDir: '${isSrc ? 'src/content' : 'content'}',\n  publicDir: 'public',\n  auth: new NextAuthProvider(),\n  collections: {\n    pages: {\n      name: 'Pages',\n      schema: z.object({\n        _isPublished: vibeField(z.boolean().default(false), 'boolean'),\n        title: vibeField(z.string(), 'text')\n      })\n    }\n  },\n  singletons: {\n    settings: {\n      name: 'Global Settings',\n      schema: z.object({\n        siteName: vibeField(z.string().default('My Next.js Site'), 'text'),\n      })\n    }\n  }\n});\n`;
+      } else {
+         configTemplate = `import { defineConfig } from '@vibecms/core';\nimport { z } from 'zod';\nimport { vibeField } from './${isSrc ? 'src/' : ''}lib/cms/schema';\n\nexport default defineConfig({\n  contentDir: '${isSrc ? 'src/content' : 'content'}',\n  publicDir: 'public',\n  // auth: new CustomAuthProvider(),\n  collections: {\n    pages: {\n      name: 'Pages',\n      schema: z.object({\n        _isPublished: vibeField(z.boolean().default(false), 'boolean'),\n        title: vibeField(z.string(), 'text')\n      })\n    }\n  },\n  singletons: {\n    settings: {\n      name: 'Global Settings',\n      schema: z.object({\n        siteName: vibeField(z.string().default('My Site'), 'text'),\n      })\n    }\n  }\n});\n`;
+      }
+      await fs.writeFile(path.join(cwd, 'vibe.config.ts'), configTemplate);
+      console.log(pc.green('✔ Scaffolded vibe.config.ts'));
+
+      // 4. Scaffold Local Dev API & NextAuth API for Next.js
+      if (frameworkPrompt.framework === 'nextjs') {
+        const apiDir = path.join(sourceDir, 'app', 'api', 'vibecms');
+        await fs.ensureDir(apiDir);
+        const routePath = path.join(apiDir, 'route.ts');
+        const routeTemplate = `import { createVibeRouteHandler } from '@vibecms/next/app-router';\n\nexport const POST = createVibeRouteHandler();\n`;
+        await fs.writeFile(routePath, routeTemplate);
+        console.log(pc.green('✔ Scaffolded local DevEngine API at src/app/api/vibecms/route.ts'));
+
+        // Scaffold NextAuth backend specifically
+        const authDir = path.join(sourceDir, 'app', 'api', 'auth', '[...nextauth]');
+        await fs.ensureDir(authDir);
+        const authRoutePath = path.join(authDir, 'route.ts');
+        const authTemplate = `import NextAuth from "next-auth"\nimport GithubProvider from "next-auth/providers/github"\n\n// SECURITY: Add your Github Emails to this list to grant workspace access!\nconst ALLOWED_EMAILS = ["your-email@example.com"];\n\nconst handler = NextAuth({\n  providers: [\n    GithubProvider({\n      clientId: process.env.GITHUB_ID as string,\n      clientSecret: process.env.GITHUB_SECRET as string,\n    }),\n  ],\n  callbacks: {\n    async signIn({ user }) {\n      if (user.email && ALLOWED_EMAILS.includes(user.email)) {\n        return true;\n      }\n      console.log('Unauthorized VibeCMS login attempt blocked from:', user.email);\n      return false;\n    }\n  }\n})\n\nexport { handler as GET, handler as POST }\n`;
+        await fs.writeFile(authRoutePath, authTemplate);
+        console.log(pc.green('✔ Scaffolded NextAuth API at src/app/api/auth/[...nextauth]/route.ts'));
+
+        // Scaffold /admin login redirect page
+        const adminDir = path.join(sourceDir, 'app', 'admin');
+        const adminLoginDir = path.join(adminDir, 'login');
+        await fs.ensureDir(adminLoginDir);
+        const adminLoginPath = path.join(adminLoginDir, 'page.tsx');
+        const adminLoginTemplate = `'use client';\nimport { signIn, useSession } from 'next-auth/react';\nimport { useRouter } from 'next/navigation';\nimport { useEffect } from 'react';\n\nexport default function AdminLoginPage() {\n  const { status } = useSession();\n  const router = useRouter();\n\n  useEffect(() => {\n    if (status === 'authenticated') router.replace('/admin');\n  }, [status, router]);\n\n  if (status === 'loading') {\n    return <div className="flex min-h-screen items-center justify-center"><div className="animate-pulse text-neutral-400 text-sm">Laden...</div></div>;\n  }\n\n  return (\n    <div className="flex min-h-screen items-center justify-center bg-neutral-50">\n      <div className="w-full max-w-sm mx-auto">\n        <div className="bg-white rounded-2xl shadow-lg border border-neutral-200 p-8 text-center">\n          <div className="inline-flex items-center justify-center w-14 h-14 rounded-xl bg-indigo-600 text-white text-2xl font-bold mb-4">V</div>\n          <h1 className="text-xl font-semibold text-neutral-900">VibeCMS</h1>\n          <p className="text-sm text-neutral-500 mt-1 mb-6">Melden Sie sich an, um Inhalte zu verwalten.</p>\n          <button onClick={() => signIn('github', { callbackUrl: '/admin' })} className="w-full flex items-center justify-center gap-3 rounded-lg bg-neutral-900 px-4 py-3 text-sm font-medium text-white hover:bg-neutral-800">\n            <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" /></svg>\n            Anmelden mit GitHub\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n`;
+        await fs.writeFile(adminLoginPath, adminLoginTemplate);
+
+        // Scaffold admin dashboard page
+        const adminPagePath = path.join(adminDir, 'page.tsx');
+        const adminDashTemplate = `import Link from 'next/link';\nimport vibeConfig from '${isSrc ? '../../../' : '../../'}vibe.config';\n\nexport default function AdminDashboard() {\n  const collections = vibeConfig.collections || {};\n  return (\n    <div className="max-w-5xl mx-auto p-6">\n      <h1 className="text-2xl font-bold text-neutral-900 mb-6">Dashboard</h1>\n      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">\n        {Object.entries(collections).map(([key, col]) => (\n          <Link key={key} href={\\'/admin/' + key + '\\'}  className="bg-white rounded-xl border border-neutral-200 p-5 hover:border-indigo-300 hover:shadow-md transition-all">\n            <h2 className="text-sm font-semibold text-neutral-900">{(col as any).name}</h2>\n          </Link>\n        ))}\n      </div>\n    </div>\n  );\n}\n`;
+        await fs.writeFile(adminPagePath, adminDashTemplate);
+        console.log(pc.green('✔ Scaffolded admin dashboard at src/app/admin/'));
+      }
+
+      const envPath = path.join(cwd, '.env.local');
+      let envInjection = `\n# --- VibeCMS ---\nVIBE_LICENSE_KEY=${licensePrompt.licenseKey || ''}\nBLOB_READ_WRITE_TOKEN=\n`;
+      if (frameworkPrompt.framework === 'nextjs') {
+        envInjection += `GITHUB_ID=\nGITHUB_SECRET=\nNEXTAUTH_SECRET=\nNEXTAUTH_URL=http://localhost:3000\n`;
+      }
+      
+      if (fs.existsSync(envPath)) {
+        await fs.appendFile(envPath, envInjection);
+      } else {
+        await fs.writeFile(envPath, envInjection);
+      }
+      console.log(pc.green('✔ Injected VibeCMS secure variables into .env.local'));
+
+    } catch (e) {
+      console.error(pc.red('Failed to scaffold directory geometry:'), e);
+    }
+
+    console.log(pc.magenta(pc.bold('\n✨ VibeCMS initialized successfully!')));
+    if (options.minimal) {
+      console.log(pc.cyan('   Mode: Minimal (no starter blocks — bring your own components)\n'));
+    }
+    console.log(pc.white('\nNext Steps:'));
+    console.log(pc.gray('1. Open .env.local and populate the empty tokens.'));
+    console.log(pc.gray(`2. Wrap your layout in EditProvider: import { EditProvider } from '@${isSrc ? '' : '/'}components/cms/EditProvider'`));
+    console.log(pc.gray('3. Replace the registry.ts schema with your custom vibe.config.ts'));
+    if (options.minimal) {
+      console.log(pc.gray('4. Register your own block components in vibe.config.ts: blocks: [{ type: "hero", component: YourHero }]'));
+      console.log(pc.gray('5. Or use inline primitives: import { VibeText, VibeImage } from "@vibecms/core"'));
+    }
+    if (frameworkPrompt.framework === 'nextjs') {
+      console.log(pc.yellow('\n🔐 Create a GitHub OAuth App (Developer Settings):'));
+      console.log(pc.gray('   - Homepage URL: http://localhost:3000'));
+      console.log(pc.gray('   - Callback URL: http://localhost:3000/api/auth/callback/github'));
+      console.log(pc.gray('   - Paste Client ID and Secret into .env.local!'));
+      console.log(pc.magenta('\n   To edit your website, strictly navigate to: http://localhost:3000/admin'));
+    }
+    console.log('');
+  });
+
+program
+  .command('add <preset>')
+  .description('Add a pre-built standard collection to your VibeCMS project (e.g., blog, team, testimonials)')
+  .action(async (preset) => {
+    const cwd = process.cwd();
+    const isSrc = fs.existsSync(path.join(cwd, 'src'));
+    const sourceDir = isSrc ? path.join(cwd, 'src') : cwd;
+    
+    const validPresets = ['blog', 'team', 'testimonials'];
+    if (!validPresets.includes(preset)) {
+      console.log(pc.red(`Invalid preset "${preset}". Valid templates are: ${validPresets.join(', ')}`));
+      return;
+    }
+
+    console.log(pc.cyan(`\n📦 Scaffolding collection: ${preset}...\n`));
+
+    const pkgPath = path.join(cwd, 'package.json');
+    let framework = 'nextjs';
+    if (fs.existsSync(pkgPath)) {
+      const pkg = JSON.parse(await fs.readFile(pkgPath, 'utf8'));
+      const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+      if (deps['vite']) framework = 'vite';
+      if (deps['astro']) framework = 'astro';
+    }
+
+    const contentDir = path.join(sourceDir, 'content', preset);
+    await fs.ensureDir(contentDir);
+
+    let schemaContent = '';
+
+    if (preset === 'team') {
+      schemaContent = `import { z } from 'zod';\nimport { vibeField } from '@vibecms/core';\n\nexport const teamSchema = z.object({\n  name: vibeField(z.string(), 'text'),\n  role: vibeField(z.string(), 'text'),\n  bio: vibeField(z.string().optional(), 'rich-text'),\n  headshot: vibeField(z.string().optional(), 'image'),\n  socialLinks: vibeField(\n    z.array(\n      z.object({\n        platform: vibeField(z.string(), 'text'),\n        url: vibeField(z.string(), 'text'),\n      })\n    ).default([]),\n    'array'\n  ),\n});\n`;
+    } else if (preset === 'blog') {
+      schemaContent = `import { z } from 'zod';\nimport { vibeField, seoSchema, publishingSchema, blockSchema } from '@vibecms/core';\n\nexport const blogSchema = z.object({\n  title: vibeField(z.string(), 'text'),\n  excerpt: vibeField(z.string().optional(), 'rich-text'),\n  coverImage: vibeField(z.string().optional(), 'image'),\n  author: vibeField(z.string(), 'reference', { collection: 'team' }),\n  content: vibeField(z.array(blockSchema).default([]), 'array'),\n})\n.merge(seoSchema)\n.merge(publishingSchema);\n`;
+    } else if (preset === 'testimonials') {
+      schemaContent = `import { z } from 'zod';\nimport { vibeField } from '@vibecms/core';\n\nexport const testimonialSchema = z.object({\n  quote: vibeField(z.string(), 'rich-text'),\n  authorName: vibeField(z.string(), 'text'),\n  authorRole: vibeField(z.string().optional(), 'text'),\n  authorAvatar: vibeField(z.string().optional(), 'image'),\n  companyLogo: vibeField(z.string().optional(), 'image'),\n  rating: vibeField(z.number().min(1).max(5).default(5), 'number'),\n});\n`;
+    }
+
+    const schemaPath = path.join(contentDir, 'schema.ts');
+    await fs.writeFile(schemaPath, schemaContent, 'utf8');
+    console.log(pc.green(`✔ Created ${isSrc ? 'src/' : ''}content/${preset}/schema.ts`));
+
+    if (preset === 'blog') {
+      if (framework === 'nextjs') {
+        const appDir = path.join(sourceDir, 'app', 'blog', '[slug]');
+        await fs.ensureDir(appDir);
+        const pagePath = path.join(appDir, 'page.tsx');
+        if (!fs.existsSync(pagePath)) {
+          await fs.writeFile(pagePath, `import { VibeEngine } from '@vibecms/core';\nimport { notFound } from 'next/navigation';\nimport { SeoHead } from '@vibecms/core/ui';\n\nexport default async function BlogPostPage({ params }: { params: { slug: string } }) {\n  const post = await VibeEngine.read('blog', params.slug);\n  if (!post) notFound();\n  return (\n    <main className="max-w-3xl mx-auto py-12 px-6">\n      <SeoHead data={post} />\n      <header className="mb-8">\n        <h1 className="text-4xl font-bold mb-4">{post.title}</h1>\n        {post.author && <p className="text-neutral-500">By {post.author}</p>}\n      </header>\n      <article className="mt-8">\n        {post.content?.map((block: any, i: number) => (\n          <div key={i} className="my-4 p-4 bg-neutral-50 rounded-lg">{block._type} Block Placeholder</div>\n        ))}\n      </article>\n    </main>\n  );\n}\n`);
+          console.log(pc.green(`✔ Created Next.js sample frontend route at ${isSrc ? 'src/' : ''}app/blog/[slug]/page.tsx`));
+        }
+      } else if (framework === 'vite') {
+        const pagesDir = path.join(sourceDir, 'pages');
+        await fs.ensureDir(pagesDir);
+        const pagePath = path.join(pagesDir, 'BlogPost.tsx');
+        if (!fs.existsSync(pagePath)) {
+          await fs.writeFile(pagePath, `import { useEffect, useState } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { VibeEngine } from '@vibecms/core';\nimport { SeoHead } from '@vibecms/core/ui';\n\nexport default function BlogPostPage() {\n  const { slug } = useParams();\n  const [post, setPost] = useState<any>(null);\n  \n  useEffect(() => {\n    if (slug) VibeEngine.read('blog', slug).then(setPost);\n  }, [slug]);\n\n  if (!post) return <div>Loading...</div>;\n\n  return (\n    <main className="max-w-3xl mx-auto py-12 px-6">\n      <SeoHead data={post} />\n      <header className="mb-8">\n        <h1 className="text-4xl font-bold mb-4">{post.title}</h1>\n        {post.author && <p className="text-neutral-500">By {post.author}</p>}\n      </header>\n      <article className="mt-8">\n        {post.content?.map((block: any, i: number) => (\n          <div key={i} className="my-4 p-4 bg-neutral-50 rounded-lg">{block._type} Block Placeholder</div>\n        ))}\n      </article>\n    </main>\n  );\n}\n`);
+          console.log(pc.green(`✔ Created Vite React sample component at ${isSrc ? 'src/' : ''}pages/BlogPost.tsx`));
+        }
+      } else if (framework === 'astro') {
+        const pagesDir = path.join(sourceDir, 'pages', 'blog');
+        await fs.ensureDir(pagesDir);
+        const pagePath = path.join(pagesDir, '[slug].astro');
+        if (!fs.existsSync(pagePath)) {
+          await fs.writeFile(pagePath, `---\nimport { VibeEngine } from '@vibecms/core';\nimport { SeoHead } from '@vibecms/core/ui';\n\nexport async function getStaticPaths() {\n  const posts = await VibeEngine.list('blog');\n  return posts.map((slug: string) => ({ params: { slug } }));\n}\n\nconst { slug } = Astro.params;\nconst post = await VibeEngine.read('blog', slug as string);\nif (!post) return Astro.redirect('/404');\n---\n<html>\n  <head>\n    <SeoHead data={post} />\n  </head>\n  <body>\n    <main class="max-w-3xl mx-auto py-12 px-6">\n      <header class="mb-8">\n        <h1 class="text-4xl font-bold mb-4">{post.title}</h1>\n        {post.author && <p class="text-neutral-500">By {post.author}</p>}\n      </header>\n      <article class="mt-8">\n        {post.content?.map((block: any) => (\n          <div class="my-4 p-4 bg-neutral-50 rounded-lg">{block._type} Block Placeholder</div>\n        ))}\n      </article>\n    </main>\n  </body>\n</html>\n`);
+          console.log(pc.green(`✔ Created Astro sample route at ${isSrc ? 'src/' : ''}pages/blog/[slug].astro`));
+        }
+      }
+    }
+
+    console.log(pc.magenta(`\n✨ Successfully added ${preset} schema!`));
+    console.log(pc.white('\nNext Steps:'));
+    console.log(pc.gray(`1. Open vibe.config.ts`));
+    console.log(pc.gray(`2. Import the schema: import { ${preset}Schema } from '@/content/${preset}/schema'`));
+    console.log(pc.gray(`3. Add it to your collections object under the key '${preset}'`));
+    console.log('');
+  });
+
+program
+  .command('validate')
+  .description('Validate all JSON content against your vibe.config.ts')
+  .action(async () => {
+    console.log(pc.cyan('\n🔍 Validating VibeCMS Content...'));
+    try {
+      const script = `
+        import config from './vibe.config.ts';
+        import fs from 'fs';
+        import path from 'path';
+        
+        async function run() {
+          const collections = config.collections;
+          let hasErrors = false;
+          let checkedCount = 0;
+          
+          for (const [key, coll] of Object.entries(collections)) {
+            const dir = path.join(process.cwd(), config.contentDir, key);
+            if (!fs.existsSync(dir)) continue;
+            const files = fs.readdirSync(dir).filter(f => f.endsWith('.json'));
+            for (const file of files) {
+              try {
+                const content = JSON.parse(fs.readFileSync(path.join(dir, file), 'utf-8'));
+                coll.schema.parse(content);
+                checkedCount++;
+              } catch (e) {
+                console.log('\\n❌ Validation Failed: /' + key + '/' + file);
+                if (e.errors) {
+                  e.errors.forEach(err => console.log('   - ' + err.path.join('.') + ': ' + err.message));
+                } else {
+                  console.log('   - JSON Parse Error');
+                }
+                hasErrors = true;
+              }
+            }
+          }
+          if (!hasErrors) {
+            console.log('\\n✅ All ' + checkedCount + ' documents are valid!');
+          } else {
+            process.exit(1);
+          }
+        }
+        run().catch(() => process.exit(1));
+      `;
+      // Write a temporary ts runner
+      const tmpPath = path.join(process.cwd(), '.vibe-validate.ts');
+      await fs.writeFile(tmpPath, script);
+      execSync('npx tsx ' + tmpPath, { stdio: 'inherit', cwd: process.cwd() });
+      await fs.unlink(tmpPath);
+    } catch (e) {
+      const tmpPath = path.join(process.cwd(), '.vibe-validate.ts');
+      if (fs.existsSync(tmpPath)) await fs.unlink(tmpPath);
+      console.error(pc.red('\\n💥 Validation process failed. Make sure your vibe.config.ts is valid and has no circular imports.'));
+      process.exit(1);
+    }
+  });
+
+program
+  .command('export')
+  .description('Export all CMS content as a single JSON file (DSGVO data export)')
+  .option('-o, --output <path>', 'Output file path', 'vibecms-export.json')
+  .action(async (options) => {
+    console.log(pc.cyan('\n📦 Exporting all VibeCMS content...\n'));
+    const cwd = process.cwd();
+    const isSrc = fs.existsSync(path.join(cwd, 'src'));
+    const contentDir = path.join(cwd, isSrc ? 'src/content' : 'content');
+
+    if (!fs.existsSync(contentDir)) {
+      console.log(pc.red('No content directory found.'));
+      process.exit(1);
+    }
+
+    const exportData = { exportedAt: new Date().toISOString(), collections: {} };
+
+    const collections = fs.readdirSync(contentDir, { withFileTypes: true })
+      .filter(d => d.isDirectory())
+      .map(d => d.name);
+
+    for (const col of collections) {
+      const colDir = path.join(contentDir, col);
+      const files = fs.readdirSync(colDir).filter(f => f.endsWith('.json'));
+      exportData.collections[col] = {};
+      for (const file of files) {
+        try {
+          const content = JSON.parse(fs.readFileSync(path.join(colDir, file), 'utf-8'));
+          exportData.collections[col][file.replace('.json', '')] = content;
+        } catch (e) {
+          console.log(pc.yellow(`⚠ Failed to parse ${col}/${file}`));
+        }
+      }
+      console.log(pc.green(`✔ Exported ${files.length} documents from ${col}`));
+    }
+
+    const outPath = path.resolve(options.output);
+    fs.writeFileSync(outPath, JSON.stringify(exportData, null, 2));
+    console.log(pc.magenta(`\n✨ Export complete: ${outPath}`));
+    console.log(pc.gray(`   ${Object.keys(exportData.collections).length} collections, ${Object.values(exportData.collections).reduce((sum, col) => sum + Object.keys(col).length, 0)} documents`));
+    console.log('');
+  });
+
+program
+  .command('audit')
+  .description('Audit content for missing SEO fields, empty required fields, and orphaned references')
+  .action(async () => {
+    console.log(pc.cyan('\n🔍 Auditing VibeCMS content...\n'));
+    const cwd = process.cwd();
+    const isSrc = fs.existsSync(path.join(cwd, 'src'));
+    const contentDir = path.join(cwd, isSrc ? 'src/content' : 'content');
+
+    if (!fs.existsSync(contentDir)) {
+      console.log(pc.red('No content directory found.'));
+      process.exit(1);
+    }
+
+    let warnings = 0;
+    let checked = 0;
+    const allSlugs = new Set();
+    const referencedSlugs = new Set();
+
+    const collections = fs.readdirSync(contentDir, { withFileTypes: true })
+      .filter(d => d.isDirectory())
+      .map(d => d.name);
+
+    for (const col of collections) {
+      const colDir = path.join(contentDir, col);
+      const files = fs.readdirSync(colDir).filter(f => f.endsWith('.json'));
+
+      for (const file of files) {
+        checked++;
+        const slug = file.replace('.json', '');
+        allSlugs.add(slug);
+
+        try {
+          const raw = fs.readFileSync(path.join(colDir, file), 'utf-8');
+          const content = JSON.parse(raw);
+
+          // Check for empty title
+          if (!content.title && !content.name) {
+            console.log(pc.yellow(`  ⚠ ${col}/${slug}: Missing title or name field`));
+            warnings++;
+          }
+
+          // Check SEO fields
+          if (content.seoTitle !== undefined && !content.seoTitle) {
+            console.log(pc.yellow(`  ⚠ ${col}/${slug}: Empty seoTitle`));
+            warnings++;
+          }
+          if (content.seoDescription !== undefined && !content.seoDescription) {
+            console.log(pc.yellow(`  ⚠ ${col}/${slug}: Empty seoDescription`));
+            warnings++;
+          }
+
+          // Collect referenced slugs
+          const refMatches = raw.match(/"([a-z0-9_-]+)"/gi) || [];
+          refMatches.forEach(m => referencedSlugs.add(m.replace(/"/g, '')));
+
+        } catch (e) {
+          console.log(pc.red(`  ✗ ${col}/${slug}: Invalid JSON`));
+          warnings++;
+        }
+      }
+    }
+
+    console.log('');
+    if (warnings === 0) {
+      console.log(pc.green(`✅ All ${checked} documents passed audit!`));
+    } else {
+      console.log(pc.yellow(`⚠ ${warnings} warnings found across ${checked} documents.`));
+    }
+    console.log('');
+  });
+
+program.parse(process.argv);

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@vibecms/cli",
+  "version": "0.1.0",
+  "license": "LicenseRef-VibeCMS",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "files": [
+    "bin",
+    "templates",
+    "README.md",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lassewehlmanngit/vibecms.git"
+  },
+  "homepage": "https://vibecms.com",
+  "bin": {
+    "vibe": "bin/vibe.js",
+    "create-vibe-app": "bin/vibe.js"
+  },
+  "scripts": {
+    "build": "echo 'CLI is plain JS — no build needed'"
+  },
+  "dependencies": {
+    "commander": "^12.0.0",
+    "prompts": "^2.4.2",
+    "picocolors": "^1.0.0",
+    "fs-extra": "^11.2.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "@types/node": "^20.0.0",
+    "@types/prompts": "^2.4.9",
+    "@types/fs-extra": "^11.0.4"
+  }
+}

package/templates/components/cms/Analytics.tsx

@@ -0,0 +1,42 @@
+import fs from 'fs/promises';
+import path from 'path';
+
+/**
+ * Server Component that securely reads GA4 ID from site.json and injects the Google Analytics script ONLY in production.
+ */
+export async function VibeAnalytics() {
+  if (process.env.NODE_ENV !== 'production') return null;
+
+  const settingsPath = path.join(process.cwd(), 'src/content/settings/site.json');
+  let ga4Id = '';
+  
+  try {
+    const raw = await fs.readFile(settingsPath, 'utf8');
+    const settings = JSON.parse(raw);
+    if (settings.integrations && settings.integrations.ga4Id) {
+       ga4Id = settings.integrations.ga4Id;
+    }
+  } catch (e) {
+     return null;
+  }
+
+  if (!ga4Id) return null;
+
+  return (
+    <>
+      <script async src={`https://www.googletagmanager.com/gtag/js?id=${ga4Id}`} />
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${ga4Id}', {
+              page_path: window.location.pathname,
+            });
+          `,
+        }}
+      />
+    </>
+  );
+}

package/templates/components/cms/BlockRenderer.tsx

@@ -0,0 +1,37 @@
+'use client';
+import React from 'react';
+import { getCustomBlockComponent } from '@vibecms/core';
+
+/**
+ * Clean block dispatcher. Resolves block `_type` to a registered component
+ * from the custom block registry (configured in vibe.config.ts).
+ *
+ * This renderer contains NO built-in UI — all block components must be
+ * registered via `blocks: [...]` in your vibe.config.ts, or placed in
+ * src/components/blocks/ and imported here.
+ *
+ * Example vibe.config.ts:
+ *   blocks: [
+ *     { type: 'hero', component: MyHero },
+ *     { type: 'features', component: MyFeatures },
+ *   ]
+ */
+export function BlockRenderer({ block, index }: { block: any; index: string | number }) {
+  if (!block) return null;
+
+  const Component = getCustomBlockComponent(block._type);
+  if (Component) {
+    return <Component data={block} index={index} />;
+  }
+
+  return (
+    <div className="p-8 text-center text-amber-700 border border-amber-300 rounded-xl bg-amber-50 max-w-2xl mx-auto w-full my-8 text-sm">
+      <p className="font-semibold mb-1">No renderer registered for block type: &quot;{block._type}&quot;</p>
+      <p className="text-amber-600">
+        Register a component in your <code className="bg-amber-100 px-1 rounded">vibe.config.ts</code>:
+        {' '}
+        <code className="bg-amber-100 px-1 rounded">{'blocks: [{ type: \'' + block._type + '\', component: My' + block._type.charAt(0).toUpperCase() + block._type.slice(1) + ' }]'}</code>
+      </p>
+    </div>
+  );
+}