@vibecms/cli 0.1.0

package/templates/components/cms/fields/MultiReferencePicker.tsx

@@ -0,0 +1,83 @@
+'use client';
+import React, { useState, useEffect } from 'react';
+import { VibeEngine } from '@/lib/cms/engine';
+import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@vibecms/core';
+import { Plus, X, Search, Link as LinkIcon } from 'lucide-react';
+
+export function MultiReferencePicker({ value = [], onChange, label, collection }: { value: string[]; onChange: (v: string[]) => void; label: string; collection: string }) {
+  const [open, setOpen] = useState(false);
+  const [documents, setDocuments] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (open && documents.length === 0) {
+      setLoading(true);
+      VibeEngine.list(collection, { withMeta: true })
+        .then(setDocuments)
+        .catch(console.error)
+        .finally(() => setLoading(false));
+    }
+  }, [open, collection]);
+
+  const handleSelect = (slug: string) => {
+    if (value.includes(slug)) {
+      onChange(value.filter(v => v !== slug));
+    } else {
+      onChange([...value, slug]);
+    }
+    setOpen(false);
+  };
+
+  const handleRemove = (slug: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    onChange(value.filter(v => v !== slug));
+  };
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex flex-wrap gap-2 mb-1">
+        {value.map((val) => {
+          const doc = documents.find(d => d.slug === val) || { title: val, slug: val };
+          return (
+            <div key={val} className="flex items-center gap-1.5 bg-indigo-50 border border-indigo-100 text-indigo-700 text-sm font-medium px-2.5 py-1 rounded-full shadow-sm">
+              <LinkIcon className="w-3 h-3 shrink-0 opacity-70" />
+              <span className="truncate max-w-[150px]">{doc.title || doc.name || val}</span>
+              <button onClick={(e) => handleRemove(val, e)} className="hover:bg-indigo-200/50 p-0.5 rounded-full transition-colors ml-1">
+                <X className="w-3 h-3 text-indigo-500 hover:text-indigo-700" />
+              </button>
+            </div>
+          );
+        })}
+        <button
+          className="flex items-center gap-1 bg-white border border-dashed border-neutral-300 hover:border-indigo-400 hover:text-indigo-600 text-neutral-500 text-sm font-medium px-3 py-1 rounded-full shadow-sm transition-all"
+          onClick={() => setOpen(true)}
+        >
+          <Plus className="w-3.5 h-3.5" /> Add
+        </button>
+      </div>
+
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <CommandInput placeholder={`Search ${collection}...`} />
+        <CommandList className="max-h-[250px] overflow-y-auto custom-scrollbar">
+          <CommandEmpty>{loading ? 'Loading documents...' : `No documents found in ${collection}.`}</CommandEmpty>
+          <CommandGroup>
+            {documents.filter(doc => !value.includes(doc.slug || doc)).map((doc) => {
+              const slug = doc.slug || doc.replace?.('.json', '');
+              const labelTxt = doc.title || doc.name || slug;
+              return (
+                <CommandItem
+                  key={slug}
+                  value={slug}
+                  onSelect={(currentValue) => handleSelect(slug)}
+                  className="cursor-pointer flex items-center gap-3 text-neutral-700 hover:text-neutral-900 hover:bg-neutral-100 data-[selected=true]:bg-indigo-50 data-[selected=true]:text-indigo-600"
+                >
+                  {labelTxt}
+                </CommandItem>
+              );
+            })}
+          </CommandGroup>
+        </CommandList>
+      </CommandDialog>
+    </div>
+  );
+}

package/templates/components/cms/fields/ReferencePicker.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Popover, PopoverContent, PopoverTrigger, Button, Label, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@vibecms/core';
+import { VibeEngine } from '@/lib/cms/engine';
+import { Link, Search } from 'lucide-react';
+
+export function ReferencePicker({ value, onChange, label, collection }: { value: string; onChange: (v: string) => void; label: string; collection: string }) {
+  const [open, setOpen] = useState(false);
+  const [documents, setDocuments] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (open && documents.length === 0) {
+      setLoading(true);
+      VibeEngine.list(collection, { withMeta: true })
+        .then(setDocuments)
+        .catch(console.error)
+        .finally(() => setLoading(false));
+    }
+  }, [open, collection, documents.length]);
+
+  return (
+    <div className="flex flex-col gap-2 w-full">
+      <Label className="text-neutral-500 text-xs font-mono uppercase tracking-wider">
+        {label} <span className="text-indigo-600/50 lowercase ml-1">({collection})</span>
+      </Label>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger className="w-full">
+          <div 
+            role="button"
+            className="w-full flex items-center justify-between bg-white border border-neutral-300 text-neutral-900 hover:bg-neutral-50 transition-colors p-2.5 rounded-md cursor-pointer text-sm font-medium shadow-sm"
+          >
+            <div className="flex items-center gap-2 overflow-hidden">
+              <Link className="w-4 h-4 text-indigo-500 shrink-0" />
+              <span className="truncate">
+                {value 
+                  ? (documents.find(d => d.slug === value)?.title || value)
+                  : `Select from ${collection}...`}
+              </span>
+            </div>
+            <Search className="w-4 h-4 text-neutral-400 shrink-0 ml-2" />
+          </div>
+        </PopoverTrigger>
+        <PopoverContent className="w-72 bg-white border-neutral-200 p-0 shadow-2xl">
+          <Command>
+            <CommandInput placeholder={`Search ${collection}...`} className="border-none text-neutral-900 placeholder:text-neutral-400" />
+            <CommandList className="max-h-[250px] overflow-y-auto custom-scrollbar">
+              <CommandEmpty>{loading ? 'Loading documents...' : `No documents found in ${collection}.`}</CommandEmpty>
+              <CommandGroup>
+                {documents.map((doc) => {
+                  const slug = doc.slug || doc.replace?.('.json', ''); // fallback if still raw string
+                  const label = doc.title || doc.name || slug;
+                  return (
+                    <CommandItem
+                      key={slug}
+                      value={slug}
+                      onSelect={(currentValue: string) => {
+                        onChange(currentValue === value ? '' : slug);
+                        setOpen(false);
+                      }}
+                      className="cursor-pointer flex items-center gap-3 text-neutral-700 hover:text-neutral-900 hover:bg-neutral-100 data-[selected=true]:bg-indigo-50 data-[selected=true]:text-indigo-600"
+                    >
+                      {label}
+                    </CommandItem>
+                  );
+                })}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

package/templates/components/cms/fields/RichText.tsx

@@ -0,0 +1,121 @@
+'use client';
+import { useEditor, EditorContent } from '@tiptap/react';
+import { BubbleMenu } from '@tiptap/react/menus';
+import StarterKit from '@tiptap/starter-kit';
+import { Bold, Italic, Strikethrough, List, ListOrdered, Heading2 } from 'lucide-react';
+import { Popover, PopoverContent, PopoverTrigger } from '@vibecms/core';
+import { useEffect } from 'react';
+
+interface RichTextProps {
+  value: string;
+  onChange: (value: string) => void;
+  label?: string;
+}
+
+export function RichText({ value, onChange, label }: RichTextProps) {
+  const editor = useEditor({
+    immediatelyRender: false,
+    extensions: [StarterKit],
+    content: value,
+    editorProps: {
+      attributes: {
+        class: 'prose prose-sm max-w-none focus:outline-none min-h-[150px] p-4 bg-transparent rounded-b-md border border-t-0 border-neutral-300 text-neutral-900 leading-relaxed focus-visible:ring-indigo-500/20 focus-visible:ring-2',
+      },
+    },
+    onUpdate: ({ editor }) => {
+      onChange(editor.getHTML());
+    },
+  });
+
+  useEffect(() => {
+    if (editor && editor.getHTML() !== value) {
+      editor.commands.setContent(value, { emitUpdate: false });
+    }
+  }, [value, editor]);
+
+  if (!editor) {
+    return null;
+  }
+
+  const toggleBtn = "p-1.5 rounded hover:bg-neutral-200 text-neutral-500 hover:text-neutral-900 transition-colors disabled:opacity-30";
+  const activeBtn = "bg-neutral-300 text-neutral-900 shadow-inner";
+
+  return (
+    <div className="flex flex-col gap-1.5 my-2">
+      <div className="flex justify-between items-center bg-white">
+        <span className="text-neutral-500 text-xs font-mono uppercase tracking-wider">{label}</span>
+        {editor && (
+          <Popover>
+            <PopoverTrigger title="Typography Tools" className="text-[10px] font-mono bg-neutral-100 hover:bg-neutral-200 text-neutral-500 px-2 py-0.5 rounded transition flex items-center gap-1.5 cursor-pointer">
+              <span className="font-serif italic font-bold text-[11px]">A</span> Typography
+            </PopoverTrigger>
+            <PopoverContent className="w-56 bg-white border-neutral-200 p-2 z-50 shadow-lg">
+              <div className="flex flex-col gap-1">
+                <button type="button" onClick={() => editor.chain().focus().insertContent('&shy;').run()} className="text-xs text-left text-neutral-700 hover:bg-neutral-50 hover:text-indigo-600 font-medium p-2 rounded transition">
+                  Insert Soft Hyphen (&amp;shy;)
+                </button>
+                <button type="button" onClick={() => editor.chain().focus().setHardBreak().run()} className="text-xs text-left text-neutral-700 hover:bg-neutral-50 hover:text-indigo-600 font-medium p-2 rounded transition">
+                  Insert Line Break (&lt;br&gt;)
+                </button>
+              </div>
+            </PopoverContent>
+          </Popover>
+        )}
+      </div>
+      <div className="flex flex-col rounded-md overflow-hidden border border-neutral-300 bg-white">
+        {editor && (
+          <BubbleMenu editor={editor} className="flex items-center gap-1 bg-white border border-neutral-200 p-1.5 rounded-lg shadow-xl shadow-neutral-200/50 backdrop-blur-md">
+            <button
+              onClick={() => editor.chain().focus().toggleBold().run()}
+              disabled={!editor.can().chain().focus().toggleBold().run()}
+              className={`${toggleBtn} ${editor.isActive('bold') ? activeBtn : ''}`}
+              title="Bold"
+            >
+              <Bold className="w-4 h-4" />
+            </button>
+            <button
+              onClick={() => editor.chain().focus().toggleItalic().run()}
+              disabled={!editor.can().chain().focus().toggleItalic().run()}
+              className={`${toggleBtn} ${editor.isActive('italic') ? activeBtn : ''}`}
+              title="Italic"
+            >
+              <Italic className="w-4 h-4" />
+            </button>
+            <button
+              onClick={() => editor.chain().focus().toggleStrike().run()}
+              disabled={!editor.can().chain().focus().toggleStrike().run()}
+              className={`${toggleBtn} ${editor.isActive('strike') ? activeBtn : ''}`}
+              title="Strikethrough"
+            >
+              <Strikethrough className="w-4 h-4" />
+            </button>
+            <div className="w-[1px] h-4 bg-neutral-200 mx-1" />
+            <button
+              onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+              className={`${toggleBtn} ${editor.isActive('heading', { level: 2 }) ? activeBtn : ''}`}
+              title="Heading 2"
+            >
+              <Heading2 className="w-4 h-4" />
+            </button>
+            <div className="w-[1px] h-4 bg-neutral-200 mx-1" />
+            <button
+              onClick={() => editor.chain().focus().toggleBulletList().run()}
+              className={`${toggleBtn} ${editor.isActive('bulletList') ? activeBtn : ''}`}
+              title="Bullet List"
+            >
+              <List className="w-4 h-4" />
+            </button>
+            <button
+              onClick={() => editor.chain().focus().toggleOrderedList().run()}
+              className={`${toggleBtn} ${editor.isActive('orderedList') ? activeBtn : ''}`}
+              title="Ordered List"
+            >
+              <ListOrdered className="w-4 h-4" />
+            </button>
+          </BubbleMenu>
+        )}
+        <EditorContent editor={editor} />
+      </div>
+    </div>
+  );
+}

package/templates/lib/cms/auditor.ts

@@ -0,0 +1,307 @@
+import axe from 'axe-core';
+
+export interface AuditIssue {
+  id: string;
+  type: 'seo' | 'accessibility';
+  severity: 'critical' | 'warning' | 'info';
+  message: string;
+  elementHtml?: string;
+  selector?: string;
+  fieldPath?: string;
+  failingColor?: string;
+  suggestedColor?: string;
+}
+
+// --- Phase 16 WCAG Contrast Math ---
+function hexToRgb(hex: string) {
+  if (hex.startsWith('rgb')) {
+    const match = hex.match(/\d+/g);
+    if (!match || match.length < 3) return [0,0,0];
+    return [parseInt(match[0]), parseInt(match[1]), parseInt(match[2])];
+  }
+  let h = hex.replace('#', '');
+  if (h.length === 3) h = h.split('').map(c => c+c).join('');
+  if (h.length !== 6) return [0,0,0];
+  return [parseInt(h.substring(0, 2), 16), parseInt(h.substring(2, 4), 16), parseInt(h.substring(4, 6), 16)];
+}
+
+function rgbToHex(r: number, g: number, b: number) {
+  return '#' + [r,g,b].map(x => {
+    const hex = Math.max(0, Math.min(255, Math.round(x))).toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+  }).join('');
+}
+
+function getLuminance(r: number, g: number, b: number) {
+  const a = [r,g,b].map(function (v) {
+    v /= 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  });
+  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+}
+
+function getContrastRatio(l1: number, l2: number) {
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
+function checkContrast(fgHex: string, bgHex: string): string | null {
+  const bgRgb = hexToRgb(bgHex);
+  const bgL = getLuminance(bgRgb[0], bgRgb[1], bgRgb[2]);
+  
+  let currentFgRgb = hexToRgb(fgHex);
+  const initialFgL = getLuminance(currentFgRgb[0], currentFgRgb[1], currentFgRgb[2]);
+  
+  if (getContrastRatio(initialFgL, bgL) >= 4.5) {
+     return null;
+  }
+
+  const isBgDark = bgL < 0.5;
+  const step = isBgDark ? 5 : -5;
+  
+  for (let i = 0; i < 50; i++) {
+     currentFgRgb = currentFgRgb.map(c => Math.max(0, Math.min(255, c + step)));
+     const fgL = getLuminance(currentFgRgb[0], currentFgRgb[1], currentFgRgb[2]);
+     const ratio = getContrastRatio(fgL, bgL);
+     if (ratio >= 4.5) {
+       return rgbToHex(currentFgRgb[0], currentFgRgb[1], currentFgRgb[2]);
+     }
+  }
+  return null;
+}
+
+export interface AuditReport {
+  score: number;
+  issues: AuditIssue[];
+  passed: number;
+}
+
+export async function runVibeAudit(documentHtml: string, containerElement: HTMLElement): Promise<AuditReport> {
+  const issues: AuditIssue[] = [];
+  let passedCount = 0;
+
+  // 1. Run Axe Core for Accessibility
+  try {
+    const axeResults = await axe.run(containerElement, {
+      resultTypes: ['violations', 'passes'],
+      rules: {
+        'color-contrast': { enabled: true },
+        'image-alt': { enabled: true },
+        'heading-order': { enabled: true },
+        'link-name': { enabled: true },
+        'button-name': { enabled: true },
+      }
+    });
+
+    passedCount += axeResults.passes.length;
+
+    axeResults.violations.forEach(violation => {
+      violation.nodes.forEach(node => {
+        let suggestedColor: string | undefined;
+        let failingColor: string | undefined;
+        let fieldPath: string | undefined;
+
+        if (violation.id === 'color-contrast') {
+           const contrastData = node.any.find(a => a.id === 'color-contrast')?.data;
+           if (contrastData && contrastData.fgColor && contrastData.bgColor) {
+               failingColor = contrastData.fgColor;
+               suggestedColor = checkContrast(contrastData.fgColor, contrastData.bgColor) || undefined;
+           }
+        }
+
+        if (node.target && node.target.length > 0) {
+           try {
+             // Traverse upwards aiming to anchor raw Axe DOM items to precise VibeCMS Nanostore Draft indices 
+             const el = containerElement.querySelector(node.target[0] as string);
+             if (el) {
+                const vibeEl = el.closest('[data-vibe-path]');
+                if (vibeEl) {
+                   fieldPath = vibeEl.getAttribute('data-vibe-path') || undefined;
+                }
+             }
+           } catch (e) { /* Ignore parsing errors if Axe produces pseudo-selectors */ }
+        }
+
+        issues.push({
+          id: violation.id,
+          type: 'accessibility',
+          severity: violation.impact === 'critical' || violation.impact === 'serious' ? 'critical' : 'warning',
+          message: violation.help,
+          elementHtml: node.html,
+          selector: node.target.join(' > '),
+          fieldPath,
+          failingColor,
+          suggestedColor
+        });
+      });
+    });
+  } catch (e) {
+    console.error('Axe audit failed', e);
+  }
+
+  // 2. Custom SEO Heuristics
+  // Check for H1
+  const h1s = containerElement.querySelectorAll('h1');
+  if (h1s.length === 0) {
+    issues.push({
+      id: 'missing-h1',
+      type: 'seo',
+      severity: 'critical',
+      message: 'Page is missing an H1 tag. A single H1 tag is critical for SEO.',
+    });
+  } else if (h1s.length > 1) {
+    issues.push({
+      id: 'multiple-h1',
+      type: 'seo',
+      severity: 'warning',
+      message: 'Multiple H1 tags found. It is recommended to have exactly one H1 tag per page.',
+    });
+  } else {
+    passedCount++;
+  }
+
+  // Check Page Title Length (we check the actual document head)
+  const titleText = document.title;
+  if (!titleText || titleText.length === 0 || titleText === 'VibeCMS') {
+    issues.push({
+       id: 'missing-title',
+       type: 'seo',
+       severity: 'critical',
+       message: 'Page is missing a meta title.',
+    });
+  } else if (titleText.length > 60) {
+    issues.push({
+       id: 'title-too-long',
+       type: 'seo',
+       severity: 'warning',
+       message: `Meta title is ${titleText.length} characters. Keep it under 60 characters for optimal display in SERPs.`,
+    });
+  } else {
+    passedCount++;
+  }
+
+  // Check Description Length
+  const descMeta = document.querySelector('meta[name="description"]') as HTMLMetaElement;
+  if (!descMeta || !descMeta.content) {
+    issues.push({
+       id: 'missing-description',
+       type: 'seo',
+       severity: 'critical',
+       message: 'Page is missing a meta description.',
+    });
+  } else if (descMeta.content.length > 160) {
+    issues.push({
+       id: 'desc-too-long',
+       type: 'seo',
+       severity: 'warning',
+       message: `Meta description is ${descMeta.content.length} characters. Keep it under 160 characters.`,
+    });
+  } else {
+    passedCount++;
+  }
+
+  // Heading Hierarchy Check
+  const headings = Array.from(containerElement.querySelectorAll('h1, h2, h3, h4, h5, h6'));
+  let previousLevel = 1; // Assume we start logic near H1
+  headings.forEach((heading) => {
+    const currentLevel = parseInt(heading.tagName.substring(1));
+    if (currentLevel - previousLevel > 1) {
+      issues.push({
+        id: 'heading-hierarchy-skip',
+        type: 'seo',
+        severity: 'warning',
+        message: `Heading Hierarchy Skipped: found <H${currentLevel}> directly following <H${previousLevel}>.`,
+        elementHtml: heading.outerHTML,
+        fieldPath: heading.closest('[data-vibe-path]')?.getAttribute('data-vibe-path') || undefined,
+      });
+    }
+    previousLevel = currentLevel;
+  });
+
+  // Custom Image SEO & Performance Checks
+  const customImages = Array.from(containerElement.querySelectorAll('img'));
+  customImages.forEach((img, idx) => {
+     const fieldPath = img.closest('[data-vibe-path]')?.getAttribute('data-vibe-path') || undefined;
+     
+     if (!img.hasAttribute('alt') || img.getAttribute('alt')?.trim() === '') {
+        // Axe catches missing alt for a11y, but we aggressively flag empty alt="" for SEO if it's large imagery
+        issues.push({
+          id: 'seo-missing-alt',
+          type: 'seo',
+          severity: 'warning',
+          message: 'Image is missing descriptive alt text. Ensure alt describes the image for SEO.',
+          elementHtml: img.outerHTML,
+          selector: 'img',
+          fieldPath
+        });
+     }
+
+     // Lazy loading (skip first 2 images assuming they are above the fold)
+     if (idx > 1 && img.getAttribute('loading') !== 'lazy') {
+        issues.push({
+          id: 'perf-missing-lazy',
+          type: 'seo',
+          severity: 'warning',
+          message: 'Image likely below the fold is missing loading="lazy" attribute.',
+          elementHtml: img.outerHTML,
+          selector: 'img',
+          fieldPath
+        });
+     }
+  });
+
+  // 3. Mobile Risk Heuristic (Long words)
+  const walkDOM = (node: Node) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      const text = node.textContent || '';
+      const words = text.split(/\s+/);
+      for (const word of words) {
+        const cleanWord = word.replace(/[^a-zA-ZäöüÄÖÜß0-9]/g, '');
+        if (cleanWord.length > 15) {
+          // If the word does not contain a soft hyphen character (\u00AD or \xAD)
+          if (!word.includes('\u00AD') && !word.includes('\xAD')) {
+            let fieldPath: string | undefined;
+            if (node.parentElement) {
+              const vibeEl = node.parentElement.closest('[data-vibe-path]');
+              if (vibeEl) {
+                fieldPath = vibeEl.getAttribute('data-vibe-path') || undefined;
+              }
+            }
+
+            issues.push({
+               id: 'mobile-risk-word',
+               type: 'accessibility',
+               severity: 'warning',
+               message: `Mobile Layout Risk: "${cleanWord.substring(0, 15)}..." exceeds 15 unbroken characters. This will shatter mobile layouts! Insert a Soft Hyphen (&shy;) via the CMS Typography tools.`,
+               fieldPath
+            });
+          }
+        }
+      }
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      const el = node as HTMLElement;
+      if (el.tagName !== 'SCRIPT' && el.tagName !== 'STYLE') {
+        node.childNodes.forEach(walkDOM);
+      }
+    }
+  };
+  
+  walkDOM(containerElement);
+
+  // Score Calculation (very naive for now)
+  const totalChecks = passedCount + issues.length;
+  const criticalCount = issues.filter(i => i.severity === 'critical').length;
+  const warningCount = issues.filter(i => i.severity === 'warning').length;
+  
+  let score = 100;
+  if (totalChecks > 0) {
+     score = Math.max(0, 100 - (criticalCount * 15) - (warningCount * 5));
+  }
+
+  return {
+    score: Math.round(score),
+    issues,
+    passed: passedCount
+  };
+}

package/templates/lib/cms/auth-nextauth.ts

@@ -0,0 +1,26 @@
+// src/lib/cms/auth-nextauth.ts
+import { AuthProvider, VibeUser } from '@vibecms/core';
+import { getSession, signIn, signOut } from 'next-auth/react';
+
+export class NextAuthProvider implements AuthProvider {
+  async getSession() {
+    const session = await getSession();
+    if (!session?.user) return null;
+    return {
+      user: {
+        name: session.user.name,
+        email: session.user.email,
+        image: session.user.image,
+      } as VibeUser,
+      accessToken: (session as any).accessToken // Keep for git push
+    };
+  }
+
+  async signIn() {
+    await signIn('github');
+  }
+
+  async signOut() {
+    await signOut();
+  }
+}

package/templates/lib/cms/engine.ts

@@ -0,0 +1,3 @@
+// src/lib/cms/engine.ts
+// @deprecated Use imports from '@vibecms/core/engine' instead.
+export * from '@vibecms/core/engine';

package/templates/lib/cms/registry.ts

@@ -0,0 +1,12 @@
+// @ts-nocheck
+import { z } from 'zod';
+import vibeConfig from '../../../vibe.config';
+
+export const schemaRegistry: Record<string, z.ZodTypeAny> = Object.fromEntries([
+  ...Object.entries(vibeConfig.collections || {}).map(([k, v]) => [k, v.schema]),
+  ...Object.entries(vibeConfig.singletons || {}).map(([k, v]) => [k, v.schema])
+]);
+
+export function getSchemaForCollection(collection: string): z.ZodTypeAny | null {
+  return schemaRegistry[collection] || null;
+}

package/templates/lib/cms/sanitize.ts

@@ -0,0 +1,18 @@
+import DOMPurify from 'dompurify';
+
+/**
+ * Sanitizes HTML content to prevent XSS attacks.
+ * Allows safe formatting tags only.
+ */
+export function sanitizeHtml(dirty: string | undefined | null): string {
+  if (!dirty) return '';
+  return DOMPurify.sanitize(dirty, {
+    ALLOWED_TAGS: [
+      'p', 'br', 'strong', 'em', 'b', 'i', 'u', 's', 'del',
+      'a', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+      'blockquote', 'code', 'pre', 'span', 'sub', 'sup', 'hr',
+    ],
+    ALLOWED_ATTR: ['href', 'target', 'rel', 'class', 'id'],
+    ALLOW_DATA_ATTR: false,
+  });
+}