@vibecms/cli 0.1.0

package/templates/components/cms/CmsStage.tsx

@@ -0,0 +1,116 @@
+'use client';
+import React, { useEffect } from 'react';
+import { useStore } from '@nanostores/react';
+import { isEditMode, previewDevice, setFocusedField } from '@/lib/cms/store';
+import { motion } from 'framer-motion';
+import { Monitor, Smartphone, Tablet } from 'lucide-react';
+import { toast } from 'sonner';
+
+export function CmsStage({ children, bypass = false }: { children: React.ReactNode; bypass?: boolean }) {
+  const editing = useStore(isEditMode);
+  const device = useStore(previewDevice);
+
+  useEffect(() => {
+    if (!editing || typeof PerformanceObserver === 'undefined') return;
+    try {
+      const observer = new PerformanceObserver((list) => {
+        for (const entry of list.getEntries() as any[]) {
+          // If the shift magnitude crosses 0.1, it's a severe Core Web Vitals fracture.
+          if (entry.value > 0.1 && !entry.hadRecentInput) {
+            toast.warning('Layout Shift Spike Detected!', {
+               description: `This change caused a massive Cumulative Layout Shift (CLS: ${entry.value.toFixed(2)}). It may significantly break mobile wrapping or push critical elements off-screen.`,
+               id: 'cls-spike',
+               duration: 6000
+            });
+          }
+        }
+      });
+      observer.observe({ type: 'layout-shift', buffered: false });
+      return () => observer.disconnect();
+    } catch(e) { 
+      // Safely ignore if the browser environments lack layout-shift metrics capability
+    }
+  }, [editing]);
+
+  if (bypass || !editing) return <>{children}</>;
+
+  const getWidth = () => {
+    switch (device) {
+      case 'mobile': return 375;
+      case 'tablet': return 768;
+      case 'desktop': return '100%';
+    }
+  };
+
+  return (
+    <div className="flex-1 flex flex-col h-screen overflow-hidden bg-neutral-100 relative">
+      {/* Dot Grid Background */}
+      <div 
+        className="absolute inset-0 pointer-events-none opacity-[0.03]" 
+        style={{
+          backgroundImage: 'radial-gradient(circle at center, #000000 1px, transparent 1px)',
+          backgroundSize: '24px 24px'
+        }} 
+      />
+
+      {/* Top Bar Navigation */}
+      <div className="h-14 flex items-center justify-center gap-2 border-b border-neutral-200 bg-white/80 backdrop-blur-xl z-20 px-4 shrink-0 shadow-sm">
+         <div className="flex bg-neutral-50 p-1 rounded-lg border border-neutral-200 shadow-inner">
+           <button 
+             onClick={() => previewDevice.set('desktop')}
+             className={`p-1.5 rounded-md transition-all ${device === 'desktop' ? 'bg-white text-neutral-900 shadow-sm border border-neutral-200/50' : 'text-neutral-400 hover:text-neutral-900 hover:bg-neutral-100'}`}
+             title="Desktop View"
+           >
+             <Monitor className="w-4 h-4" />
+           </button>
+           <button 
+             onClick={() => previewDevice.set('tablet')}
+             className={`p-1.5 rounded-md transition-all ${device === 'tablet' ? 'bg-white text-neutral-900 shadow-sm border border-neutral-200/50' : 'text-neutral-400 hover:text-neutral-900 hover:bg-neutral-100'}`}
+             title="Tablet View"
+           >
+             <Tablet className="w-4 h-4" />
+           </button>
+           <button 
+             onClick={() => previewDevice.set('mobile')}
+             className={`p-1.5 rounded-md transition-all ${device === 'mobile' ? 'bg-white text-neutral-900 shadow-sm border border-neutral-200/50' : 'text-neutral-400 hover:text-neutral-900 hover:bg-neutral-100'}`}
+             title="Mobile View"
+           >
+             <Smartphone className="w-4 h-4" />
+           </button>
+         </div>
+      </div>
+
+      {/* Stage Canvas */}
+      <div 
+        className="flex-1 flex items-center justify-center overflow-hidden p-4 relative z-10 min-h-0"
+        onClickCapture={(e) => {
+          if (!editing) return;
+          const target = e.target as HTMLElement;
+          const vibeEl = target.closest('[data-vibe-path]') as HTMLElement;
+          if (vibeEl && vibeEl.dataset.vibePath) {
+             e.preventDefault();
+             e.stopPropagation();
+             setFocusedField(vibeEl.dataset.vibePath, true);
+          }
+        }}
+      >
+        <motion.div
+           layout
+           initial={false}
+           animate={{
+             width: getWidth(),
+             scale: 0.9,
+           }}
+           transition={{ type: 'spring', damping: 25, stiffness: 200 }}
+           className="h-full bg-white rounded-xl shadow-2xl overflow-hidden ring-1 ring-neutral-200 relative flex flex-col"
+           style={{ transformOrigin: 'center center' }}
+        >
+           {/* Simulate a browser shell for the viewport so scrolling is contained */}
+           <div id="vibe-preview-wrapper" className="flex-1 overflow-y-auto no-scrollbar relative w-full h-full bg-white">
+             {children}
+           </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+}

package/templates/components/cms/EditProvider.tsx

@@ -0,0 +1,121 @@
+// src/components/cms/EditProvider.tsx
+'use client';
+import React, { useEffect, useState } from 'react';
+import { useStore } from '@nanostores/react';
+import { AnimatePresence } from 'framer-motion';
+import { isEditMode, contentDraft, currentDocument } from '@/lib/cms/store';
+import { Editor, EDITOR_TOTAL_WIDTH } from '@/components/cms/Editor';
+import { CmsStage } from '@/components/cms/CmsStage';
+import { VibeEngine } from '@/lib/cms/engine';
+import { TooltipProvider } from '@vibecms/core';
+// @ts-ignore - Expected error during VibeCMS CLI development because the config lives in the user project
+import vibeConfig from '../../../vibe.config';
+
+/**
+ * @param mode - 'canvas' (default): Full split-view editor with device preview via CmsStage.
+ *               'docked': DevTools-style docked sidebar. Page content reflows via html margin.
+ *               Use 'docked' for existing websites that don't want their layout restructured.
+ */
+export function EditProvider({ children, mode = 'canvas' }: { children: React.ReactNode; mode?: 'canvas' | 'docked' }) {
+  const editing = useStore(isEditMode);
+  const auth = vibeConfig.auth;
+  const [session, setSession] = useState<{ user: any } | null>(null);
+
+  useEffect(() => {
+    // Init Engine from Vibe config
+    if (vibeConfig.contentDir || vibeConfig.publicDir) {
+       VibeEngine.init({ contentDir: vibeConfig.contentDir, publicDir: vibeConfig.publicDir });
+    }
+
+    if (auth) {
+      auth.getSession().then((s: any) => setSession(s));
+    }
+  }, [auth]);
+
+  useEffect(() => {
+    if (auth && !session) {
+      isEditMode.set(false);
+      return;
+    }
+
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.get('edit') === 'true' || localStorage.getItem('vibe_edit') === 'true') {
+      isEditMode.set(true);
+      localStorage.setItem('vibe_edit', 'true');
+    }
+
+    const unlisten = (e: KeyboardEvent) => {
+      if (e.key === 'e' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        const current = isEditMode.get();
+        isEditMode.set(!current);
+        localStorage.setItem('vibe_edit', (!current).toString());
+      }
+    };
+    document.addEventListener('keydown', unlisten);
+    return () => document.removeEventListener('keydown', unlisten);
+  }, [session, auth]);
+
+  // ─── Docked mode: body-margin management ─────────────────────────────
+  useEffect(() => {
+    if (mode !== 'docked') return;
+
+    const html = document.documentElement;
+    const isMobileView = window.innerWidth < 768;
+
+    if (editing && !isMobileView) {
+      html.style.transition = 'margin 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
+      html.style.marginRight = `${EDITOR_TOTAL_WIDTH}px`;
+      html.style.overflowX = 'hidden';
+    } else {
+      html.style.transition = 'margin 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
+      html.style.marginRight = '';
+      html.style.overflowX = '';
+      const tid = setTimeout(() => { html.style.transition = ''; }, 350);
+      return () => clearTimeout(tid);
+    }
+
+    const onResize = () => {
+      if (!editing) return;
+      const mobile = window.innerWidth < 768;
+      if (mobile) {
+        html.style.marginRight = '';
+      } else {
+        html.style.marginRight = `${EDITOR_TOTAL_WIDTH}px`;
+      }
+    };
+    window.addEventListener('resize', onResize);
+
+    return () => {
+      window.removeEventListener('resize', onResize);
+      html.style.marginRight = '';
+      html.style.overflowX = '';
+      html.style.transition = '';
+    };
+  }, [editing, mode]);
+
+  if (mode === 'docked') {
+    return (
+      <TooltipProvider>
+        {children}
+        <AnimatePresence>
+          {editing && <Editor auth={auth} />}
+        </AnimatePresence>
+      </TooltipProvider>
+    );
+  }
+
+  // ─── Canvas mode (default): existing split-view behavior ────────────
+  return (
+    <TooltipProvider>
+      <div className={editing ? "flex h-screen w-full overflow-hidden bg-neutral-100 text-neutral-900" : "relative h-full w-full"}>
+        <CmsStage>
+          {children}
+        </CmsStage>
+        <AnimatePresence>
+          {editing && <Editor auth={auth} />}
+        </AnimatePresence>
+      </div>
+    </TooltipProvider>
+  );
+}