@vibecms/cli 0.1.0

package/templates/components/cms/Editor.tsx

@@ -0,0 +1,954 @@
+// src/components/cms/Editor.tsx
+'use client';
+import React, { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { useStore } from '@nanostores/react';
+import { isEditMode, contentDraft, currentDocument, updateDraftPath, focusedField, focusTrigger, setFocusedField, clipboardBuffer } from '@/lib/cms/store';
+import { VibeEngine } from '@/lib/cms/engine';
+import { AuthProvider } from '@vibecms/core';
+import { toast } from 'sonner';
+import { FormGenerator } from '@/components/cms/FormGenerator';
+import { Button, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@vibecms/core';
+import { schemaRegistry } from '@/lib/cms/registry';
+// @ts-ignore - Expected error during VibeCMS CLI development because the config lives in the target user project
+import vibeConfig from '../../../vibe.config';
+import { MediaGallery } from '@/components/cms/fields/MediaGallery';
+import { runVibeAudit, AuditReport } from '@/lib/cms/auditor';
+import { AlignLeft, Settings, Image as ImageIcon, LogOut, PanelRightClose, GitCommit, Undo2, ChevronUp, Check, AlertCircle, Activity, HeartPulse, ExternalLink, History as HistoryIcon, Rewind, FastForward, ChevronRight, Trash2, Eraser } from 'lucide-react';
+
+export function Editor({ auth }: { auth?: AuthProvider }) {
+  const draft = useStore(contentDraft);
+  const doc = useStore(currentDocument);
+  const focus = useStore(focusedField);
+  const trigger = useStore(focusTrigger);
+  const [isSaving, setIsSaving] = useState(false);
+  const [cmdOpen, setCmdOpen] = useState(false);
+  const [mediaOpen, setMediaOpen] = useState(false);
+  const [healthOpen, setHealthOpen] = useState(false);
+  const [historyOpen, setHistoryOpen] = useState(false);
+  const [auditReport, setAuditReport] = useState<AuditReport | null>(null);
+  
+  // History State
+  const [historyCommits, setHistoryCommits] = useState<any[]>([]);
+  const [activeCommit, setActiveCommit] = useState<string | null>(null);
+  const [stashedDraft, setStashedDraft] = useState<any>(null); // To restore if we close history
+  const [isRestoring, setIsRestoring] = useState(false);
+
+  const [commitOpen, setCommitOpen] = useState(false);
+  const [commitMsg, setCommitMsg] = useState('');
+  const [isDirtyGit, setIsDirtyGit] = useState(false);
+  const [searchResults, setSearchResults] = useState<any[]>([]);
+  const [syncRequired, setSyncRequired] = useState(false);
+  const [publishBlockers, setPublishBlockers] = useState<AuditReport['issues'] | null>(null);
+  const [activePath, setActivePath] = useState<string>(''); // Drill-down state
+  
+  // i18n State
+  const [activeLocale, setActiveLocale] = useState<string | undefined>(vibeConfig.defaultLocale || (vibeConfig.locales?.[0]));
+  const [syncCollision, setSyncCollision] = useState(false); // Phase 17 Merge Conflict handler
+  const [session, setSession] = useState<{ user: any } | null>(null);
+  const [authStatus, setAuthStatus] = useState<'loading' | 'authenticated' | 'unauthenticated'>('loading');
+
+  useEffect(() => {
+    if (auth) {
+      auth.getSession().then(s => {
+        setSession(s);
+        setAuthStatus(s ? 'authenticated' : 'unauthenticated');
+      });
+    } else {
+      setAuthStatus('unauthenticated');
+    }
+  }, [auth]);
+
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile(); // Check immediately
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+   // Monitor Draft Dirty status against Original Head
+  useEffect(() => {
+    if (doc) {
+       VibeEngine.isDirty(doc.collection, doc.slug).then(setIsDirtyGit);
+    }
+  }, [draft, doc]);
+
+  // Persist Clipboard state across Next.js hard navigations
+  useEffect(() => {
+    try {
+      const persistedStr = localStorage.getItem('vibe_clipboard_buffer');
+      if (persistedStr) {
+        clipboardBuffer.set(JSON.parse(persistedStr));
+      }
+    } catch (e) {
+      console.error("Failed to restore clipboard buffer from localStorage", e);
+    }
+
+    const unsub = clipboardBuffer.subscribe((val: any) => {
+       if (val) {
+         localStorage.setItem('vibe_clipboard_buffer', JSON.stringify(val));
+       } else {
+         localStorage.removeItem('vibe_clipboard_buffer');
+       }
+    });
+
+    return unsub;
+  }, []);
+
+  useEffect(() => {
+    if (cmdOpen) {
+      const fetchAll = async () => {
+         const all: any[] = [];
+         for (const key of Object.keys(vibeConfig.collections || {})) {
+            const list = await VibeEngine.list(key, { withMeta: true });
+            all.push(...list.map(f => ({ ...f, collection: key })));
+         }
+         // Singletons are just a single file (index.json by default or collection name)
+         for (const key of Object.keys(vibeConfig.singletons || {})) {
+            try {
+              const data = await VibeEngine.read(key, 'index');
+              if (data) all.push({ slug: 'index', title: data.title || data.name || key, collection: key });
+            } catch {}
+         }
+         setSearchResults(all);
+      };
+      fetchAll();
+    }
+  }, [cmdOpen]);
+
+  // Run audit when Health Dashboard is opened or Document changes
+  useEffect(() => {
+    if (healthOpen) {
+      const run = async () => {
+         // Tiny delay to ensure React DOM has completed layout
+         setTimeout(async () => {
+           const stage = document.getElementById('vibe-stage-container');
+           if (stage) {
+             const report = await runVibeAudit(stage.innerHTML, stage);
+             setAuditReport(report);
+           }
+         }, 500);
+      };
+      run();
+    }
+  }, [healthOpen, doc, draft]);
+
+  // Load History when History Tab opened
+  useEffect(() => {
+    if (historyOpen && doc) {
+      setStashedDraft(draft); // Stash current state
+      VibeEngine.getHistory(doc.collection, doc.slug).then(commits => {
+        setHistoryCommits(commits);
+        if (commits.length > 0) setActiveCommit(commits[0].oid);
+      });
+    } else if (!historyOpen && stashedDraft) {
+      // User closed history without restoring, put the stashed draft back
+      contentDraft.set(stashedDraft);
+      setStashedDraft(null);
+      setActiveCommit(null);
+    }
+  }, [historyOpen, doc]);
+
+  // Handle Scrubbing: Load the historic JSON blob
+  useEffect(() => {
+    if (historyOpen && activeCommit && doc) {
+      VibeEngine.getVersionContent(activeCommit, doc.collection, doc.slug).then(historicData => {
+         if (historicData) {
+            contentDraft.set(historicData);
+         }
+      });
+    }
+  }, [activeCommit, historyOpen]);
+
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setCmdOpen((open) => !open);
+      }
+    };
+    document.addEventListener('keydown', down);
+    return () => document.removeEventListener('keydown', down);
+  }, []);
+
+  // Sync focus if something is clicked in VisualWrapper
+  useEffect(() => {
+    if (focus) {
+      const el = document.getElementById(`editor-field-${focus}`);
+      if (el) {
+        el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        
+        // Give a quick visual flash
+        el.classList.remove('ring-2', 'ring-indigo-500', 'rounded', 'transition-all', 'duration-300');
+        void el.offsetWidth; // trigger reflow
+        el.classList.add('ring-2', 'ring-indigo-500', 'rounded', 'transition-all', 'duration-300');
+        
+        setTimeout(() => el.classList.remove('ring-2', 'ring-indigo-500'), 1500);
+
+        // Try to physically focus the input field underneath
+        const input = document.getElementById(`input-${focus}`);
+        if (input && document.activeElement !== input) {
+          input.focus();
+        }
+      }
+    }
+  }, [focus, trigger]);
+
+  const handleSaveDraft = async () => {
+    if (!doc) return;
+    setIsSaving(true);
+    try {
+      await VibeEngine.write(doc.collection, doc.slug, draft, { locale: activeLocale });
+      toast.success('Draft state secured locally.');
+      const dirty = await VibeEngine.isDirty(doc.collection, doc.slug);
+      setIsDirtyGit(dirty);
+    } catch (e: any) {
+      if (e.message?.startsWith('Conflict:')) {
+        toast.error(e.message, { duration: 10000 });
+        setSyncCollision(true);
+      } else {
+        toast.error(e.message || 'Failed to save draft.');
+      }
+    }
+    setIsSaving(false);
+  };
+
+  const handleCommitAndPush = async () => {
+    if (!doc) return;
+    
+    // Phase 14: Strict A11y Publish Guard
+    const wrapperElement = document.getElementById('vibe-preview-wrapper');
+    if (wrapperElement) {
+       toast.loading('Running Pre-Flight Accessibility Scan...', { id: 'pre-flight' });
+       const audit = await runVibeAudit(wrapperElement.innerHTML, wrapperElement);
+       toast.dismiss('pre-flight');
+       
+       const criticalIssues = audit.issues.filter(i => i.severity === 'critical');
+       if (criticalIssues.length > 0) {
+          setPublishBlockers(criticalIssues);
+          setCommitOpen(false); // Hide the commit UI
+          return; // Strictly abort pushing to production
+       }
+    }
+
+    setIsSaving(true);
+    setSyncRequired(false);
+    
+    // Auto-save the absolute latest draft immediately into lightning-fs first before committing
+    try {
+      await VibeEngine.write(doc.collection, doc.slug, draft, { locale: activeLocale });
+    } catch (e: any) {
+      if (e.message?.startsWith('Conflict:')) {
+        toast.error('Cannot commit: ' + e.message, { duration: 10000 });
+        setSyncCollision(true);
+      } else {
+        toast.error(e.message || 'Failed to save before committing.');
+      }
+      setIsSaving(false);
+      setCommitOpen(false);
+      return;
+    }
+    
+    // Explicit Commit layer
+    await VibeEngine.commit(commitMsg || `Update ${doc.collection}/${doc.slug}`);
+    
+    if (authStatus === 'authenticated' && session && (session as any).accessToken) {
+      try {
+        await VibeEngine.push((session as any).accessToken);
+        toast.success(`Successfully committed to GitHub!`);
+        setCommitOpen(false);
+        setCommitMsg('');
+      } catch (e: any) {
+        console.error('Failed to push to GitHub', e);
+        if (e.code === 'PushRejectedError' || e?.message?.toLowerCase().includes('reject')) {
+          setSyncRequired(true);
+          toast.warning('Push rejected: Remote changes exist. Please Sync first.');
+        } else {
+          toast.error('Failed to push changes to GitHub.');
+        }
+      }
+    } else {
+       toast.success('Successfully committed locally.');
+       setCommitOpen(false);
+       setCommitMsg('');
+    }
+    
+    const dirty = await VibeEngine.isDirty(doc.collection, doc.slug);
+    setIsDirtyGit(dirty);
+    setIsSaving(false);
+  };
+
+  const handleRevert = async () => {
+    if (!doc) return;
+    const ok = window.confirm("Are you sure you want to discard your draft? This un-does all changes since the last commit.");
+    if (!ok) return;
+    
+    await VibeEngine.revert(doc.collection, doc.slug);
+    // Reload into UI instantly
+    const cleanData = await VibeEngine.read(doc.collection, doc.slug, { locale: activeLocale });
+    if (cleanData) contentDraft.set(cleanData);
+    toast.success('Reverted successfully to Git HEAD.');
+    
+    const dirty = await VibeEngine.isDirty(doc.collection, doc.slug);
+    setIsDirtyGit(dirty);
+  };
+
+  const handleSync = async () => {
+    setIsSaving(true);
+    try {
+      await VibeEngine.pull();
+      if (session && (session as any).accessToken) {
+        await VibeEngine.push((session as any).accessToken);
+      }
+      setSyncRequired(false);
+      setSyncCollision(false);
+      toast.success('Successfully synced with remote!');
+    } catch (e: any) {
+      console.error('Pull/Sync failed', e);
+      if (e && (e.code === 'MergeNotSupportedError' || e.code === 'MergeConflictError' || String(e).includes('Merge'))) {
+         setSyncCollision(true);
+      } else {
+         toast.error('Failed to sync. Network or Permissions issue.');
+      }
+    }
+    setIsSaving(false);
+  };
+
+  const handleRestoreGhostState = async () => {
+    if (!doc || !activeCommit) return;
+    setIsRestoring(true);
+    
+    // The current Ghost Draft is exactly what's loaded right now via scrubbing
+    const ghostData = draft;
+    
+    // Write it aggressively to Lightning-FS, destroying the prior volatile draft
+    await VibeEngine.write(doc.collection, doc.slug, ghostData, { locale: activeLocale });
+    
+    // Force a fresh forward-rolling commit on top of HEAD
+    const revertMessage = `revert: Restored document to historical hash ${activeCommit.slice(0, 7)}`;
+    await VibeEngine.commit(revertMessage);
+    
+    toast.success('Successfully time-jumped and committed restoration to local Head!');
+    setHistoryOpen(false); // Closes tab, but the stashed draft will be overwritten
+    setStashedDraft(null); // Clear the stash so closing doesn't overwrite our new restore
+    
+    const dirty = await VibeEngine.isDirty(doc.collection, doc.slug);
+    setIsDirtyGit(dirty);
+    setIsRestoring(false);
+  };
+
+  const handleDelete = async () => {
+    if (!doc) return;
+    const ok = window.confirm(`Are you sure you want to permanently delete /${doc.collection}/${doc.slug.replace('.json', '')}? This action cannot be undone.`);
+    if (!ok) return;
+
+    try {
+      await VibeEngine.delete(doc.collection, doc.slug.replace('.json', ''), { locale: activeLocale });
+      toast.success('Document deleted successfully.');
+      currentDocument.set(null);
+      contentDraft.set({});
+    } catch (e: any) {
+      toast.error(e.message || 'Failed to delete document.');
+    }
+  };
+
+  return (
+    <>
+      <motion.div
+        initial={{ width: 0, opacity: 0 }}
+        animate={{ width: isMobile ? '100vw' : 432, opacity: 1 }}
+        exit={{ width: 0, opacity: 0 }}
+        transition={{ type: 'spring', damping: 25, stiffness: 200 }}
+        className="flex-none h-screen bg-white border-l border-neutral-200 shadow-2xl flex z-[100] overflow-hidden text-neutral-900 fixed md:relative right-0 top-0 bottom-0 max-w-[100vw]"
+      >
+        {/* The Action Rail */}
+        <div className="w-12 shrink-0 border-r border-neutral-200 bg-[#f7f7f5] flex flex-col items-center py-4 gap-6 z-10">
+          <div className="flex flex-col gap-4 items-center">
+            <button
+               onClick={() => setCmdOpen(true)}
+               title="Content Pages (⌘K)"
+               className={`p-2 rounded-lg transition-colors ${doc?.collection === 'pages' ? 'bg-indigo-50 text-indigo-600' : 'text-neutral-400 hover:text-neutral-900 hover:bg-neutral-200'}`}
+            >
+              <AlignLeft className="w-5 h-5" />
+            </button>
+            <button
+               onClick={async () => {
+                 const data = await VibeEngine.read('settings', 'site.json', { locale: activeLocale });
+                 if (data) contentDraft.set(data);
+                 currentDocument.set({ collection: 'settings', slug: 'site.json' });
+                 setActivePath('');
+               }}
+               title="Global Settings"
+               className={`p-2 rounded-lg transition-colors ${doc?.collection === 'settings' ? 'bg-indigo-50 text-indigo-600' : 'text-neutral-400 hover:text-neutral-900 hover:bg-neutral-200'}`}
+            >
+              <Settings className="w-5 h-5" />
+            </button>
+            <button
+               onClick={() => setMediaOpen(true)}
+               title="Media Library"
+               className="p-2 rounded-lg text-neutral-400 hover:text-neutral-900 hover:bg-neutral-200 transition-colors"
+            >
+              <ImageIcon className="w-5 h-5" />
+            </button>
+            <button
+               onClick={async () => {
+                 const ok = window.confirm('Scan and permanently delete orphaned media files from the server?');
+                 if (!ok) return;
+                 try {
+                   const { deletedCount, bytesFreed } = await VibeEngine.pruneMedia();
+                   const mb = (bytesFreed / 1024 / 1024).toFixed(2);
+                   toast.success(`Pruned ${deletedCount} files, saving ${mb} MB.`);
+                 } catch (e: any) {
+                   toast.error('Failed to prune media: ' + e.message);
+                 }
+               }}
+               title="Garbage Collect Media"
+               className="p-2 rounded-lg text-neutral-400 hover:text-rose-600 hover:bg-rose-50 transition-colors"
+            >
+              <Eraser className="w-5 h-5" />
+            </button>
+            <div className="w-6 h-px bg-neutral-200 my-2" />
+            <button
+               onClick={() => {
+                 setHealthOpen(false);
+                 setHistoryOpen(!historyOpen);
+               }}
+               title="Version Time Machine"
+               className={`p-2 rounded-lg transition-colors ${historyOpen ? 'bg-blue-50 text-blue-600' : 'text-neutral-400 hover:text-neutral-900 hover:bg-neutral-200'}`}
+            >
+               <HistoryIcon className="w-5 h-5" />
+            </button>
+            <button
+               onClick={() => {
+                 setHistoryOpen(false);
+                 setHealthOpen(!healthOpen);
+               }}
+               title="Vibe Health Auditor"
+               className={`p-2 rounded-lg transition-colors ${healthOpen ? 'bg-rose-50 text-rose-600' : 'text-neutral-400 hover:text-neutral-900 hover:bg-neutral-200'}`}
+            >
+               <Activity className="w-5 h-5" />
+            </button>
+          </div>
+          
+          <div className="mt-auto flex flex-col gap-4 items-center">
+            {authStatus === 'authenticated' && auth && (
+              <button
+                 onClick={() => auth.signOut()}
+                 title="Log Out"
+                 className="p-2 rounded-lg text-neutral-400 hover:text-neutral-900 hover:bg-neutral-200 transition-colors"
+              >
+                <LogOut className="w-4 h-4" />
+              </button>
+            )}
+            <button
+               onClick={() => {
+                 isEditMode.set(false);
+                 localStorage.setItem('vibe_edit', 'false');
+               }}
+               title="Close Editor"
+               className="p-2 rounded-lg text-red-500/60 hover:text-red-600 hover:bg-red-50 transition-colors"
+            >
+              <PanelRightClose className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+
+        {/* Main Sidebar Form Container */}
+        <div className="flex-1 flex flex-col h-full overflow-hidden relative">
+          <div className="flex items-center justify-between p-4 border-b border-neutral-200 bg-white/50 backdrop-blur-md shrink-0">
+            <div className="flex items-center gap-3">
+              <div className={`w-2.5 h-2.5 rounded-full ${isDirtyGit ? 'bg-amber-500 shadow-[0_0_10px_rgba(245,158,11,0.4)]' : doc ? 'bg-emerald-500 shadow-[0_0_10px_rgba(16,185,129,0.4)]' : 'bg-neutral-300'} transition-all`} />
+              <div className="flex flex-col">
+                <span className="font-semibold text-neutral-900 tracking-wide text-sm truncate max-w-[200px]">
+                  {doc ? `/${doc.slug.replace('.json', '')}` : 'VibeCMS'}
+                </span>
+                {isDirtyGit && <span className="text-[10px] uppercase font-bold text-amber-600 tracking-wider">Unsaved Draft</span>}
+              </div>
+            </div>
+            <div className="flex items-center gap-1">
+              {isDirtyGit && (
+                <button 
+                  onClick={handleRevert}
+                  title="Discard Draft to HEAD"
+                  className="p-1.5 rounded-md hover:bg-neutral-100 text-neutral-400 hover:text-neutral-900 transition-colors"
+                >
+                  <Undo2 className="w-4 h-4" />
+                </button>
+              )}
+              {doc && (
+                <button 
+                  onClick={handleDelete}
+                  title="Delete Document"
+                  className="p-1.5 rounded-md hover:bg-rose-50 text-neutral-400 hover:text-rose-600 transition-colors"
+                >
+                  <Trash2 className="w-4 h-4" />
+                </button>
+              )}
+            </div>
+          </div>
+
+        {healthOpen ? (
+          <div className="flex-1 overflow-y-auto p-5 custom-scrollbar bg-[#fcfcfc]">
+            <h3 className="text-xl font-semibold mb-6 flex items-center gap-2 text-neutral-900"><HeartPulse className="w-6 h-6 text-rose-500" /> Health Auditor</h3>
+            {!auditReport ? (
+              <div className="animate-pulse flex flex-col gap-4">
+                 <div className="h-24 bg-neutral-100 rounded-xl border border-neutral-200" />
+                 <div className="h-12 bg-neutral-100 rounded-xl border border-neutral-200" />
+                 <div className="h-12 bg-neutral-100 rounded-xl border border-neutral-200" />
+              </div>
+            ) : (
+              <div className="flex flex-col gap-6 pb-12">
+                 <div className={`p-6 rounded-2xl border flex flex-col items-center justify-center text-center shadow-sm ${
+                    auditReport.score >= 90 ? 'bg-emerald-50 border-emerald-200 text-emerald-700' :
+                    auditReport.score >= 70 ? 'bg-amber-50 border-amber-200 text-amber-700' :
+                    'bg-rose-50 border-rose-200 text-rose-700'
+                 }`}>
+                    <div className="text-5xl font-black mb-2">{auditReport.score}</div>
+                    <div className="text-xs uppercase tracking-widest font-semibold opacity-70">Overall Score</div>
+                 </div>
+                 
+                 <div className="flex flex-col gap-3">
+                   <h4 className="text-sm font-semibold tracking-wide text-neutral-500 uppercase mb-2">Issues ({auditReport.issues.length})</h4>
+                   {auditReport.issues.length === 0 ? (
+                      <div className="text-emerald-700 bg-emerald-50 p-4 rounded-xl text-sm border border-emerald-200 text-center font-medium">
+                        Perfect! No SEO or Accessibility issues detected.
+                      </div>
+                   ) : (
+                      auditReport.issues.map((iss, i) => (
+                        <div 
+                          key={i} 
+                          className={`p-4 rounded-xl border transition-all ${iss.selector && doc?.collection === 'pages' ? 'cursor-pointer hover:bg-neutral-50 hover:shadow-sm ' : ''} ${iss.severity === 'critical' ? 'bg-rose-50 border-rose-200' : 'bg-amber-50 border-amber-200'}`}
+                          onClick={() => {
+                            // Deep Linking Heuristic
+                            if (iss.selector) {
+                               const el = document.querySelector(iss.selector);
+                               if (el) {
+                                 // We appended field paths dynamically to VisualWrapper earlier, try to find the closest data-vibe-path
+                                 const wrapper = el.closest('[data-vibe-path]') as HTMLElement;
+                                 if (wrapper && wrapper.dataset.vibePath) {
+                                    setHealthOpen(false);
+                                    setFocusedField(wrapper.dataset.vibePath);
+                                    toast.info(`Jumped to: ${wrapper.dataset.vibePath}`);
+                                 } else {
+                                    // Flash the element on stage at least
+                                    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                                    el.classList.add('ring-4', 'ring-rose-500', 'transition-all');
+                                    setTimeout(() => el.classList.remove('ring-4', 'ring-rose-500'), 1500);
+                                 }
+                               }
+                            }
+                          }}
+                        >
+                           <div className="flex gap-2 items-start mb-2">
+                             {iss.severity === 'critical' ? <AlertCircle className="w-4 h-4 text-rose-600 mt-0.5 shrink-0" /> : <AlertCircle className="w-4 h-4 text-amber-600 mt-0.5 shrink-0" />}
+                             <span className="text-sm font-semibold text-neutral-900">{iss.message}</span>
+                           </div>
+
+                           {/* Phase 16: Contrast Suggestion Swatches & Auto-Fix */}
+                           {iss.failingColor && iss.suggestedColor && (
+                              <div className="flex flex-col gap-2 mt-4 bg-black/40 p-4 rounded-lg border border-white/5 relative z-10" onClick={(e) => e.stopPropagation()}>
+                                <div className="text-[10px] uppercase font-bold text-white/50 tracking-wider mb-1 flex items-center justify-between">
+                                  <span>Automated WCAG Fix</span>
+                                  <span className="text-emerald-400">AA (4.5:1)</span>
+                                </div>
+                                <div className="flex items-center gap-3">
+                                  <div className="flex flex-col items-center gap-1 opacity-60">
+                                    <div className="w-8 h-8 rounded-md ring-1 ring-white/10" style={{ backgroundColor: iss.failingColor }} title="Failing Color" />
+                                    <span className="text-[10px] font-mono text-white/40">{iss.failingColor}</span>
+                                  </div>
+                                  <ChevronRight className="w-4 h-4 text-white/20" />
+                                  <div className="flex flex-col items-center gap-1">
+                                    <div className="w-8 h-8 rounded-md ring-2 ring-emerald-500 shadow-[0_0_15px_rgba(16,185,129,0.2)]" style={{ backgroundColor: iss.suggestedColor }} title="Calculated Fix" />
+                                    <span className="text-[10px] font-mono text-emerald-400 font-bold">{iss.suggestedColor}</span>
+                                  </div>
+                                  
+                                  {iss.fieldPath ? (
+                                    <button
+                                      className="ml-auto bg-emerald-500/20 text-emerald-400 hover:bg-emerald-500 hover:text-white transition-all text-xs font-semibold px-4 py-2 rounded shadow-sm flex items-center gap-1.5"
+                                      onClick={(e) => {
+                                         e.stopPropagation();
+                                         updateDraftPath(iss.fieldPath!, iss.suggestedColor!);
+                                         toast.success('AA Accessible contrast applied to draft!');
+                                         // Triggering a save/sync indirectly modifies draft which loops back to auditor
+                                      }}
+                                    >
+                                      Fix Color
+                                    </button>
+                                  ) : (
+                                    <span className="ml-auto text-[10px] text-white/30 tracking-wide uppercase max-w-[100px] text-right">Raw DOM Edit Required</span>
+                                  )}
+                                </div>
+                              </div>
+                           )}
+
+                           <div className="flex items-center justify-between mt-3">
+                             <div className="text-[10px] uppercase font-bold text-neutral-500 tracking-wider">
+                               {iss.type} • {iss.severity}
+                             </div>
+                             <div className="flex items-center gap-2">
+                               {iss.selector && (
+                                 <code className="text-[10px] bg-white border border-neutral-200 px-1.5 py-0.5 rounded text-neutral-600 truncate max-w-[150px]" title={iss.selector}>
+                                   {iss.selector.split(' > ').pop()}
+                                 </code>
+                               )}
+                               {iss.selector && doc?.collection === 'pages' && (
+                                 <ExternalLink className="w-3 h-3 text-neutral-400" />
+                               )}
+                             </div>
+                           </div>
+                        </div>
+                      ))
+                   )}
+                 </div>
+              </div>
+            )}
+          </div>
+        ) : historyOpen ? (
+          <div className="flex-1 overflow-y-auto p-5 custom-scrollbar bg-[#fcfcfc] flex flex-col">
+            <h3 className="text-xl font-semibold mb-2 flex items-center gap-2 text-neutral-900"><HistoryIcon className="w-6 h-6 text-blue-500" /> Version Control</h3>
+            <p className="text-xs text-neutral-500 mb-8 leading-relaxed">Scrub backwards in time to view historical commits. Clicking restore will safely roll forward a new commit.</p>
+            
+            {historyCommits.length === 0 ? (
+               <div className="text-center text-neutral-400 mt-10">No history found for this document.</div>
+            ) : (
+               <div className="flex-1 flex flex-col gap-4 relative isolate">
+                 {/* Vertical Timeline Line */}
+                 <div className="absolute left-6 top-4 bottom-10 w-px bg-neutral-200 -z-10" />
+
+                 {historyCommits.map((c, i) => {
+                    const isActive = activeCommit === c.oid;
+                    const date = new Date(c.timestamp).toLocaleString();
+                    return (
+                      <div 
+                         key={c.oid} 
+                         onClick={() => setActiveCommit(c.oid)}
+                         className={`relative p-5 rounded-2xl cursor-pointer transition-all duration-300 border ${isActive ? 'bg-blue-50 border-blue-200 shadow-sm ml-2' : 'bg-white border-neutral-100 hover:bg-neutral-50 hover:border-neutral-200'}`}
+                      >
+                         <div className={`absolute top-1/2 -translate-y-1/2 -left-[1.35rem] w-3 h-3 rounded-full border-2 border-[#fcfcfc] transition-colors ${isActive ? 'bg-blue-500' : 'bg-neutral-300'}`} />
+                         
+                         <div className="flex justify-between items-start mb-2">
+                           <span className={`text-sm font-semibold tracking-wide ${isActive ? 'text-blue-700' : 'text-neutral-800'}`}>{c.message}</span>
+                           <span className="text-[10px] font-mono text-neutral-400 bg-neutral-100 border border-neutral-200 px-2 py-1 rounded">{c.oid.substring(0, 7)}</span>
+                         </div>
+                         <div className="flex items-center gap-2 text-xs text-neutral-500">
+                           <span className="truncate max-w-[120px]">{c.author}</span> • <span>{date}</span>
+                         </div>
+                      </div>
+                    );
+                 })}
+               </div>
+            )}
+            
+            {/* Persist Restore Button pinned to bottom */}
+            {historyCommits.length > 0 && activeCommit !== historyCommits[0]?.oid && (
+               <div className="mt-8 pt-4 border-t border-neutral-200 sticky bottom-0 bg-white/80 backdrop-blur-md pb-4 z-10">
+                 <button
+                   onClick={handleRestoreGhostState}
+                   disabled={isRestoring}
+                   className="w-full py-4 rounded-xl bg-blue-600 hover:bg-blue-500 text-white font-bold tracking-wide transition-all shadow-sm flex items-center justify-center gap-2"
+                 >
+                   <Rewind className="w-5 h-5" />
+                   {isRestoring ? 'Restoring Time...' : 'Restore This Version'}
+                 </button>
+               </div>
+            )}
+          </div>
+        ) : (
+        <div className="flex-1 flex flex-col overflow-hidden">
+          {/* Breadcrumb Header */}
+          {doc && schemaRegistry[doc.collection] && (
+            <div className="px-5 py-3 border-b border-neutral-200 bg-neutral-50 flex items-center gap-2 text-xs text-neutral-500 shrink-0 overflow-x-auto no-scrollbar">
+              <button 
+                onClick={() => setActivePath('')} 
+                className={`transition-colors hover:text-neutral-900 ${!activePath ? 'text-neutral-900 font-medium' : ''}`}
+              >
+                Root
+              </button>
+              {activePath.split('.').filter(Boolean).map((segment, idx, arr) => {
+                 const cumulativePath = arr.slice(0, idx + 1).join('.');
+                 const isLast = idx === arr.length - 1;
+                 
+                 // Traverse draft to get current node
+                 let segmentData = draft;
+                 for (const p of arr.slice(0, idx + 1)) {
+                   if (segmentData) segmentData = segmentData[p];
+                 }
+
+                 let displaySegment = segment;
+
+                 if (/^\d+$/.test(segment)) {
+                   // If this is a numeric index, try to map to _type semantic name
+                   if (segmentData && segmentData._type) {
+                     displaySegment = `${segmentData._type} Block`;
+                   } else {
+                     return null; // hide raw numbers without types
+                   }
+                 } else {
+                   // If the NEXT segment is an index with a _type, hide THIS container word (like "blocks" or "items")
+                   const nextSegment = arr[idx + 1];
+                   if (nextSegment && /^\d+$/.test(nextSegment)) {
+                     const peekPath = arr.slice(0, idx + 2);
+                     let peekData = draft;
+                     for (const p of peekPath) {
+                       if (peekData) peekData = peekData[p];
+                     }
+                     if (peekData && peekData._type) {
+                       return null; // Skip "blocks", the next loop will render "Hero Block"
+                     }
+                   }
+                 }
+
+                 return (
+                    <React.Fragment key={cumulativePath}>
+                      <span className="text-neutral-300">/</span>
+                      <button 
+                        onClick={() => setActivePath(cumulativePath)}
+                        className={`capitalize transition-colors hover:text-neutral-900 ${isLast ? 'text-neutral-900 font-medium' : ''}`}
+                      >
+                         {displaySegment}
+                      </button>
+                    </React.Fragment>
+                 );
+              })}
+              {vibeConfig.locales && vibeConfig.locales.length > 0 && (
+                 <div className="ml-auto flex items-center gap-2">
+                   <select 
+                     value={activeLocale}
+                     onChange={async (e) => {
+                       const newLocale = e.target.value;
+                       setActiveLocale(newLocale);
+                       if (doc) {
+                         const data = await VibeEngine.read(doc.collection, doc.slug, { locale: newLocale });
+                         contentDraft.set(data || {});
+                       }
+                     }}
+                     className="bg-white border border-neutral-200 rounded px-2 py-1 text-xs text-neutral-700 outline-none focus:ring-2 focus:ring-indigo-500"
+                   >
+                     {vibeConfig.locales.map((loc: string) => (
+                        <option key={loc} value={loc}>{loc.toUpperCase()}</option>
+                     ))}
+                   </select>
+                 </div>
+               )}
+            </div>
+          )}
+
+          <div className="flex-1 overflow-y-auto p-5 custom-scrollbar pb-10">
+            {doc && schemaRegistry[doc.collection] ? (
+               <FormGenerator 
+                  schema={schemaRegistry[doc.collection]} 
+                  data={draft} 
+                  onChange={(p, v) => updateDraftPath(p, v)}
+                  activePath={activePath}
+                  setActivePath={setActivePath}
+               />
+            ) : (
+              <div className="text-center text-neutral-500 mt-16 flex flex-col items-center gap-3">
+                <svg className="w-10 h-10 text-neutral-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+                </svg>
+                <div>
+                  <p className="text-sm font-medium text-neutral-700">No document selected</p>
+                  <p className="text-xs mt-1">Press <kbd className="bg-neutral-200 border border-neutral-300 px-1 rounded mx-1 text-neutral-600">⌘K</kbd> to open command palette.</p>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+        )}
+          
+        {/* Commit Drawer Layer */}
+        <div className="absolute bottom-0 w-full z-20 pointer-events-none">
+            {commitOpen && (
+              <motion.div 
+                initial={{ y: 20, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                className="bg-white border-t border-neutral-200 shadow-[0_-20px_50px_rgba(0,0,0,0.1)] pointer-events-auto p-4 flex flex-col gap-4"
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2 text-sm font-medium text-neutral-900">
+                    <GitCommit className="w-4 h-4 text-indigo-500" />
+                    Commit Context Let
+                  </div>
+                  <button onClick={() => setCommitOpen(false)} className="text-neutral-400 hover:text-neutral-900 transition-colors">✕</button>
+                </div>
+                
+                <textarea 
+                  value={commitMsg}
+                  onChange={(e) => setCommitMsg(e.target.value)}
+                  placeholder="What did you change? (e.g., Added pricing plans grid)"
+                  className="w-full bg-neutral-50 border border-neutral-300 rounded-md p-3 text-sm text-neutral-900 resize-none focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 transition-all"
+                  rows={3}
+                />
+                
+                <div className="flex items-center gap-2 justify-end">
+                   {syncRequired ? (
+                      <Button onClick={handleSync} disabled={isSaving} className="bg-amber-600 hover:bg-amber-500">
+                        {isSaving ? 'Synchronizing...' : 'Pull Required (Sync)'}
+                      </Button>
+                   ) : authStatus === 'authenticated' ? (
+                      <Button onClick={handleCommitAndPush} disabled={isSaving} className="bg-indigo-600 hover:bg-indigo-500 font-semibold gap-2">
+                        <Check className="w-4 h-4" />
+                        {isSaving ? 'Committing...' : 'Commit & Push'}
+                      </Button>
+                    ) : (
+                      <>
+                        <Button onClick={handleCommitAndPush} disabled={isSaving} className="bg-white border border-neutral-300 hover:bg-neutral-50 text-neutral-700 font-medium">
+                          Commit Locally Only
+                        </Button>
+                        {auth && <Button onClick={() => auth.signIn()} className="bg-[#24292e] hover:bg-[#2f363d] text-white">Login to Push via OAuth</Button>}
+                      </>
+                    )}
+                </div>
+              </motion.div>
+            )}
+            {/* Phase 17 Merge Conflict Overlay */}
+            {syncCollision && (
+              <motion.div 
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="absolute inset-x-4 bottom-20 bg-rose-950/90 backdrop-blur-3xl border border-rose-500/50 rounded-xl p-5 shadow-[0_0_50px_rgba(225,29,72,0.3)] z-50 flex flex-col gap-4"
+              >
+                <div className="flex items-start justify-between">
+                  <div className="flex items-center gap-2 text-rose-400 font-bold mb-1">
+                    <AlertCircle className="w-5 h-5" />
+                    Sync Collision Detected
+                  </div>
+                  <button onClick={() => setSyncCollision(false)} className="text-rose-400/50 hover:text-rose-400 transition-colors">✕</button>
+                </div>
+                <p className="text-sm text-rose-200/80 leading-relaxed">
+                  Another editor has pushed changes to this document that conflict with your local draft. VibeCMS halted the sync to protect your work. 
+                </p>
+                
+                <div className="bg-rose-900/20 p-3 rounded-lg border border-rose-500/20 text-xs text-rose-300 font-mono overflow-auto max-h-24">
+                  Option A: Use the "Copy" tools on your blocks to stash them in the Vibe Clipboard, then discard your draft below.
+                  <br/><br/>
+                  Option B: Discard your local draft below permanently and pull the latest changes from the server.
+                </div>
+
+                <div className="flex items-center gap-3 justify-end mt-2">
+                   <Button onClick={async () => {
+                      if (!window.confirm("This will permanently delete your unpushed local changes and pull the remote server data. Proceed?")) return;
+                      await handleRevert();
+                      await handleSync();
+                      setSyncCollision(false);
+                      toast.success("Resolved collision. Remote data loaded.");
+                   }} className="bg-rose-600 hover:bg-rose-500 text-white font-semibold">
+                      Discard My Draft & Pull
+                   </Button>
+                </div>
+              </motion.div>
+            )}
+            
+            {/* The persistent footer bar */}
+            <div className="p-4 bg-white/80 backdrop-blur-xl border-t border-neutral-200 flex gap-2 w-full pointer-events-auto shrink-0 z-30 relative">
+               <button 
+                 onClick={handleSaveDraft}
+                 title="Secure file without committing to chain"
+                 className="flex-none px-4 rounded-md bg-white hover:bg-neutral-50 border border-neutral-300 text-sm font-medium transition-colors text-neutral-700 whitespace-nowrap"
+               >
+                 Save Draft
+               </button>
+               <button 
+                 onClick={() => setCommitOpen(!commitOpen)}
+                 className={`flex-1 rounded-md text-sm font-semibold tracking-wide h-10 flex items-center justify-center gap-2 transition-all ${isDirtyGit ? 'bg-indigo-600 hover:bg-indigo-500 text-white shadow-[0_0_15px_rgba(99,102,241,0.4)]' : 'bg-white text-neutral-600 hover:bg-neutral-50 hover:text-neutral-900 border border-neutral-300 shadow-sm'}`}
+               >
+                 {isDirtyGit ? <AlertCircle className="w-4 h-4" /> : <GitCommit className="w-4 h-4" />}
+                 {isDirtyGit ? 'Review Commit Stage' : 'Commit Stage'}
+                 <ChevronUp className={`w-4 h-4 transition-transform ${commitOpen ? 'rotate-180' : ''}`} />
+               </button>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+      
+      <MediaGallery open={mediaOpen} onOpenChange={setMediaOpen} onSelect={() => {}} />
+
+      <CommandDialog open={cmdOpen} onOpenChange={setCmdOpen}>
+        <CommandInput placeholder="Type a command or search..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup heading="Create New">
+            {Object.entries(vibeConfig.collections || {}).map(([key, col]: [string, any]) => (
+              <CommandItem 
+                key={key} 
+                onSelect={async () => {
+                   const newSlug = window.prompt(`Enter new ${col.name} slug (e.g. docs):`);
+                   if (newSlug) {
+                     const cleanSlug = newSlug.replace(/[^a-z0-9-]/gi, '').toLowerCase();
+                     const defaultData = { _type: `__${key}__` }; // minimal seed
+                     await VibeEngine.write(key, `${cleanSlug}.json`, defaultData, { locale: activeLocale });
+                     contentDraft.set(defaultData);
+                     currentDocument.set({ collection: key, slug: `${cleanSlug}.json` });
+                     setCmdOpen(false);
+                     toast.success(`Created /${key}/${cleanSlug}`);
+                   }
+                }}
+                className="cursor-pointer flex items-center gap-2"
+              >
+                <div className="p-1 rounded bg-indigo-50 text-indigo-600">
+                  <AlignLeft className="w-3.5 h-3.5" />
+                </div>
+                <div>
+                  <p className="font-medium text-neutral-900">{col.name}</p>
+                </div>
+              </CommandItem>
+            ))}
+          </CommandGroup>
+
+          {Object.entries(vibeConfig.collections || {}).map(([key, col]: [string, any]) => {
+             const docs = searchResults.filter((d: any) => d.collection === key);
+             if (docs.length === 0) return null;
+             return (
+               <CommandGroup key={key} heading={col.name}>
+                  {docs.map((docItem: any, idx: number) => (
+                    <CommandItem 
+                      key={`${key}-${docItem.slug}-${idx}`} 
+                      onSelect={async () => {
+                        const data = await VibeEngine.read(key, docItem.slug, { locale: activeLocale });
+                        if (data) contentDraft.set(data);
+                        currentDocument.set({ collection: key, slug: docItem.slug });
+                        setCmdOpen(false);
+                        setActivePath('');
+                      }}
+                      className="cursor-pointer flex items-center gap-2 pl-6"
+                    >
+                      <span className="text-neutral-500 w-4 font-mono text-xs opacity-50">{idx + 1}</span>
+                      <span className="font-medium text-neutral-800">{docItem.title || docItem.slug.replace('.json', '')}</span>
+                      <span className="text-[10px] bg-neutral-100 text-neutral-400 px-1.5 py-0.5 rounded border border-neutral-200 ml-auto select-none">/{docItem.slug}</span>
+                    </CommandItem>
+                  ))}
+               </CommandGroup>
+             );
+          })}
+          {Object.entries(vibeConfig.singletons || {}).map(([key, col]: [string, any]) => {
+             const docs = searchResults.filter((d: any) => d.collection === key);
+             if (docs.length === 0) return null;
+             return (
+               <CommandGroup key={key} heading={col.name}>
+                  {docs.map((docItem: any, idx: number) => (
+                    <CommandItem 
+                      key={`${key}-${docItem.slug}-${idx}`} 
+                      onSelect={async () => {
+                        const data = await VibeEngine.read(key, 'index', { locale: activeLocale });
+                        if (data) contentDraft.set(data);
+                        currentDocument.set({ collection: key, slug: 'index' });
+                        setCmdOpen(false);
+                        setActivePath('');
+                      }}
+                      className="cursor-pointer flex items-center gap-2 pl-6"
+                    >
+                       <span className="font-medium text-neutral-800">{col.name}</span>
+                       <span className="text-[10px] bg-neutral-100 text-neutral-400 px-1.5 py-0.5 rounded border border-neutral-200 ml-auto select-none">Global</span>
+                    </CommandItem>
+                  ))}
+               </CommandGroup>
+             );
+          })}
+        </CommandList>
+      </CommandDialog>
+    </>
+  );
+}