@vibecms/cli 0.1.0

package/templates/components/cms/FormGenerator.tsx

@@ -0,0 +1,611 @@
+// src/components/cms/FormGenerator.tsx
+import React, { useRef, useState } from 'react';
+import { z } from 'zod';
+import { Input, Textarea, Label, Switch, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, Popover, PopoverContent, PopoverTrigger, Tooltip, TooltipContent, TooltipTrigger } from '@vibecms/core';
+import { getVibeUIType, getReferenceCollection, getConditionalLogic } from '@/lib/cms/schema';
+import { ImageUpload } from '@/components/cms/fields/ImageUpload';
+import { RichText } from '@/components/cms/fields/RichText';
+import { ColorPicker } from '@/components/cms/fields/ColorPicker';
+import { IconPicker } from '@/components/cms/fields/IconPicker';
+import { ReferencePicker } from '@/components/cms/fields/ReferencePicker';
+import { MultiReferencePicker } from '@/components/cms/fields/MultiReferencePicker';
+import { setFocusedField, layoutWarnings, clipboardBuffer } from '@/lib/cms/store';
+import { useStore } from '@nanostores/react';
+import { ChevronRight, Blocks, Plus, Copy, ClipboardPaste, GripVertical } from 'lucide-react';
+import { toast } from 'sonner';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+  useSortable
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { HelpCircle } from 'lucide-react';
+
+interface FormGeneratorProps {
+  schema: z.ZodTypeAny;
+  data: any;
+  onChange: (path: string, value: any) => void;
+  path?: string;
+  label?: string;
+  activePath?: string;
+  setActivePath?: (path: string) => void;
+}
+
+function unwrapZodSchema(schema: z.ZodTypeAny): z.ZodTypeAny {
+  let resolved = schema;
+  while (
+    resolved instanceof z.ZodLazy ||
+    resolved instanceof z.ZodDefault ||
+    resolved instanceof z.ZodOptional ||
+    resolved instanceof z.ZodNullable
+  ) {
+    if (resolved instanceof z.ZodLazy) {
+      resolved = (resolved as any).schema;
+    } else if (resolved instanceof z.ZodDefault) {
+      resolved = (resolved as any)._def.innerType;
+    } else if (resolved instanceof z.ZodOptional || resolved instanceof z.ZodNullable) {
+      resolved = (resolved as any).unwrap();
+    }
+  }
+  return resolved;
+}
+
+function SortableItem({ id, children, isActive }: { id: string; children: React.ReactNode; isActive: boolean }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 50 : 1,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style} className={isActive ? "relative group border border-neutral-200 bg-white shadow-sm p-3 pl-10 rounded-md mt-2" : "relative group pl-10 mt-2"}>
+       <div {...attributes} {...listeners} className="absolute left-0 top-1/2 -translate-y-1/2 p-2 text-neutral-300 hover:text-indigo-500 cursor-grab active:cursor-grabbing opacity-0 group-hover:opacity-100 transition z-10 bg-white/50 rounded drop-shadow-sm outline-none">
+          <GripVertical className="w-5 h-5" />
+       </div>
+       {children}
+    </div>
+  );
+}
+
+export function FormGenerator({
+  schema,
+  data,
+  onChange,
+  path = '',
+  label = '',
+  activePath = '',
+  setActivePath = () => {},
+}: FormGeneratorProps) {
+  const [blockModalOpen, setBlockModalOpen] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  
+  const insertTypography = (insertion: string) => {
+    if (inputRef.current) {
+      const val = String(data || '');
+      const start = inputRef.current.selectionStart || val.length;
+      const end = inputRef.current.selectionEnd || val.length;
+      const newVal = val.substring(0, start) + insertion + val.substring(end);
+      onChange(path, newVal);
+      
+      // Restore focus & cursor position after React paints
+      setTimeout(() => {
+        if (inputRef.current) {
+          inputRef.current.focus();
+          inputRef.current.setSelectionRange(start + insertion.length, start + insertion.length);
+        }
+      }, 0);
+    } else {
+      onChange(path, String(data || '') + insertion);
+    }
+  };
+
+  const isAncestor = path !== '' && activePath.startsWith(`${path}.`);
+  const isActive = path === activePath;
+  
+  const resolvedSchema = unwrapZodSchema(schema);
+  
+  const activeWarnings = useStore(layoutWarnings);
+  const buffer = useStore(clipboardBuffer);
+  
+  const isWarned = !!activeWarnings[path];
+  
+  const uiType = getVibeUIType(resolvedSchema);
+
+  // If we are not the active path, and not an ancestor of the active path, render a drill-down button instead of children IF complex
+  const isComplex = resolvedSchema instanceof z.ZodObject || resolvedSchema instanceof z.ZodArray || resolvedSchema instanceof z.ZodDiscriminatedUnion;
+
+  // 1. Ancestor Passthrough (Skip rendering this wrapper, just render the specific child leading to activePath)
+  // We'll handle this dynamically inside Object/Array blocks.
+
+  if (resolvedSchema instanceof z.ZodObject) {
+    const shape = resolvedSchema.shape;
+    
+    // If not active and not ancestor, render a Drill-Down button
+    if (!isActive && !isAncestor && path !== '') {
+      return (
+        <button 
+          onClick={() => setActivePath(path)}
+          className="w-full flex items-center justify-between p-3 my-1 bg-white hover:bg-neutral-50 border border-neutral-200 hover:border-indigo-300 rounded-lg transition-all text-sm font-medium text-neutral-900 shadow-sm group"
+        >
+          <span>{label || 'Edit Object'}</span>
+          <ChevronRight className="w-4 h-4 text-neutral-400 group-hover:text-indigo-500 transition-colors" />
+        </button>
+      );
+    }
+
+    // Active or Ancestor Rendering
+    return (
+      <div className={isActive ? "flex flex-col gap-4 py-2" : "flex flex-col"} id={path ? `editor-field-${path}` : undefined}>
+        {isActive && label && <h4 className="font-semibold text-neutral-900 text-sm tracking-wide hidden">{label}</h4>}
+        {Object.entries(shape).map(([key, childSchema]) => {
+           if (key === '_type') return null;
+           
+           // Conditional Logic Evaluation
+           const condition = getConditionalLogic(childSchema as z.ZodTypeAny);
+           if (condition) {
+             const dependentValue = data?.[condition.field];
+             // Stringify to compare securely between 'true'/true, '1'/1 etc
+             if (String(dependentValue) !== String(condition.value)) return null;
+           }
+
+           const childPath = path ? `${path}.${key}` : key;
+           
+           // If we are an ancestor, ONLY render the child that leads to activePath
+           if (isAncestor && !activePath.startsWith(childPath)) return null;
+
+           return (
+             <FormGenerator
+               key={key}
+               schema={childSchema as z.ZodTypeAny}
+               data={data?.[key]}
+               onChange={onChange}
+               path={childPath}
+               label={key.replace(/^_+/, '').replace(/([A-Z])/g, ' $1').replace(/^./, (str: string) => str.toUpperCase()).trim()}
+               activePath={activePath}
+               setActivePath={setActivePath}
+             />
+           );
+        })}
+      </div>
+    );
+  }
+
+  // Handle Polymorphic Block Rendering
+  if (resolvedSchema instanceof z.ZodDiscriminatedUnion) {
+    const discriminator = (resolvedSchema as any)._def.discriminator as string;
+    const typeVal = data?.[discriminator];
+    const options = (resolvedSchema as any).options as any[];
+    const matchedSchema = options.find(opt => {
+        const shapeFn = opt._def.shape;
+        const shape = typeof shapeFn === 'function' ? shapeFn() : shapeFn;
+        return shape[discriminator].value === typeVal;
+    });
+    
+    if (matchedSchema) {
+      return (
+        <FormGenerator
+          schema={matchedSchema}
+          data={data}
+          onChange={onChange}
+          path={path}
+          label={label || `${typeVal.replace(/([A-Z])/g, ' $1').replace(/^./, (str: string) => str.toUpperCase()).trim()} Block`}
+          activePath={activePath}
+          setActivePath={setActivePath}
+        />
+      );
+    }
+    return <div className="text-red-500 text-xs">Unknown block type: {typeVal}</div>;
+  }
+
+  if (resolvedSchema instanceof z.ZodArray) {
+    if (uiType === 'reference-array') {
+      const collection = getReferenceCollection(resolvedSchema) || 'pages';
+      return (
+        <div id={`editor-field-${path}`} onClick={() => setFocusedField(path, false)} className="w-full">
+          <Label className="text-neutral-500 text-xs font-mono uppercase tracking-wider flex items-center gap-2 mb-1.5" htmlFor={`input-${path}`}>
+            {label || path}
+          </Label>
+          <MultiReferencePicker
+            value={data || []}
+            onChange={(val) => onChange(path, val)}
+            label={label || path}
+            collection={collection}
+          />
+        </div>
+      );
+    }
+
+    const elementSchema = resolvedSchema.element;
+    const items = Array.isArray(data) ? data : [];
+
+    // If not active and not ancestor, render a Drill-Down button
+    if (!isActive && !isAncestor && path !== '') {
+      return (
+        <button 
+          onClick={() => setActivePath(path)}
+          className="w-full flex items-center justify-between p-3 my-1 bg-white hover:bg-neutral-50 border border-neutral-200 hover:border-indigo-300 rounded-lg transition-all text-sm font-medium text-neutral-900 shadow-sm group"
+        >
+          <span>{label || 'Array'} ({items.length} items)</span>
+          <ChevronRight className="w-4 h-4 text-neutral-400 group-hover:text-indigo-500 transition-colors" />
+        </button>
+      );
+    }
+    
+    
+    let canPaste = false;
+    let pasteAction = null;
+
+    const resolvedElementSchema = unwrapZodSchema(elementSchema as z.ZodTypeAny);
+    let isBlockLibrary = false;
+    let blockKeys: string[] = [];
+    let blockDiscriminator = '';
+
+    if (resolvedElementSchema instanceof z.ZodDiscriminatedUnion) {
+      isBlockLibrary = true;
+      blockDiscriminator = (resolvedElementSchema as any)._def.discriminator as string;
+      const options = (resolvedElementSchema as any).options as any[];
+      blockKeys = options.map(opt => {
+        const shapeFn = opt._def.shape;
+        const shape = typeof shapeFn === 'function' ? shapeFn() : shapeFn;
+        return shape[blockDiscriminator].value as string;
+      });
+    }
+
+    if (buffer) {
+       if (isBlockLibrary && blockKeys.includes(buffer.type)) {
+          canPaste = true;
+       } else if (!isBlockLibrary && buffer.type === 'array-item') {
+          canPaste = true;
+       }
+    }
+
+    if (canPaste && buffer && !isBlockLibrary) {
+       pasteAction = (
+          <button
+             type="button"
+             onClick={() => {
+                const deepClone = JSON.parse(JSON.stringify(buffer.data));
+                onChange(path, [...items, deepClone]);
+                toast.success('Pasted item from Vibe Clipboard!', { icon: '📋' });
+             }}
+             title={`Paste ${buffer.type}`}
+             className="text-[10px] bg-blue-500/20 text-blue-400 hover:bg-blue-500/30 font-medium px-2 py-1 rounded transition flex items-center gap-1 border border-blue-500/30 uppercase tracking-widest shrink-0"
+          >
+             <ClipboardPaste className="w-3.5 h-3.5" /> Paste Formatting
+          </button>
+       );
+    }
+
+    let addButtons = (
+       <button
+         type="button"
+         className="text-xs bg-indigo-500/10 hover:bg-indigo-500/20 text-indigo-300 px-2 py-1 rounded transition-colors shrink-0"
+         onClick={() => onChange(path, [...items, typeof elementSchema === 'string' ? '' : {}])}
+       >
+         + Add Item
+       </button>
+    );
+
+    if (isBlockLibrary) {
+      addButtons = (
+        <button
+           type="button"
+           onClick={() => setBlockModalOpen(true)}
+           className="text-xs bg-indigo-500 hover:bg-indigo-400 text-white font-medium px-3 py-1.5 rounded-md transition-all shadow-[0_0_15px_rgba(99,102,241,0.3)] flex items-center gap-1.5 shrink-0"
+         >
+           <Plus className="w-3.5 h-3.5" /> Add Block
+         </button>
+      );
+    }
+
+    const sensors = useSensors(
+      useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+      useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+    );
+
+    const itemIds = items.map((item: any, idx: number) => {
+      if (typeof item === 'object' && item !== null && !item._vibe_id) {
+         item._vibe_id = crypto.randomUUID();
+      }
+      return (typeof item === 'object' && item._vibe_id) ? item._vibe_id : `item-${idx}`;
+    });
+
+    const handleDragEnd = (event: DragEndEvent) => {
+      const { active, over } = event;
+      if (over && active.id !== over.id) {
+         const oldIndex = itemIds.indexOf(active.id as string);
+         const newIndex = itemIds.indexOf(over.id as string);
+         if (oldIndex !== -1 && newIndex !== -1) {
+            const newItems = arrayMove(items, oldIndex, newIndex);
+            onChange(path, newItems);
+         }
+      }
+    };
+
+    return (
+      <div className={isActive ? "flex flex-col gap-4 py-2" : "flex flex-col"} id={path ? `editor-field-${path}` : undefined}>
+        {isActive && (
+          <div className="flex justify-between items-center mb-4 pb-4 border-b border-neutral-200 gap-2">
+            <h4 className="font-semibold text-neutral-900 text-sm tracking-wide hidden">{label}</h4>
+            <div className="flex gap-2 items-center flex-wrap ml-auto">
+               {pasteAction}
+               {addButtons}
+            </div>
+          </div>
+        )}
+
+        {isBlockLibrary && (
+          <CommandDialog open={blockModalOpen} onOpenChange={setBlockModalOpen}>
+            <CommandInput placeholder="Search blocks..." />
+            <CommandList>
+              <CommandEmpty>No blocks found.</CommandEmpty>
+              {canPaste && buffer && (
+                <CommandGroup heading="Clipboard">
+                  <CommandItem
+                    onSelect={() => {
+                      const deepClone = JSON.parse(JSON.stringify(buffer.data));
+                      onChange(path, [...items, deepClone]);
+                      setBlockModalOpen(false);
+                      toast.success('Pasted layout block from Vibe Clipboard!', { icon: '📋' });
+                    }}
+                    className="cursor-pointer flex items-center gap-3 py-3 !text-blue-400 hover:!bg-blue-500/10 aria-selected:!bg-blue-500/10 aria-selected:!text-blue-400"
+                  >
+                    <div className="p-2 rounded bg-blue-500/20 text-blue-400">
+                      <ClipboardPaste className="w-4 h-4" />
+                    </div>
+                    <div>
+                      <p className="font-medium capitalize">Paste {buffer.type} Block</p>
+                      <p className="text-xs opacity-70">Paste from your Vibe Clipboard</p>
+                    </div>
+                  </CommandItem>
+                </CommandGroup>
+              )}
+              <CommandGroup heading="Available Blocks">
+                {blockKeys.map((typeKey) => (
+                  <CommandItem 
+                    key={typeKey} 
+                    onSelect={() => {
+                      onChange(path, [...items, { [blockDiscriminator]: typeKey }]);
+                      setBlockModalOpen(false);
+                    }}
+                    className="cursor-pointer flex items-center gap-3 py-3"
+                  >
+                    <div className="p-2 rounded bg-indigo-50 text-indigo-600">
+                      <Blocks className="w-4 h-4" />
+                    </div>
+                    <div>
+                      <p className="font-medium text-neutral-900 capitalize">{typeKey} Block</p>
+                      <p className="text-xs text-neutral-500">Add a beautiful {typeKey} section to your layout.</p>
+                    </div>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </CommandDialog>
+        )}
+
+        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+          <SortableContext items={itemIds} strategy={verticalListSortingStrategy}>
+            {items.map((item, index) => {
+              const childPath = `${path}.${index}`;
+              const itemId = itemIds[index];
+              if (isAncestor && !activePath.startsWith(childPath)) return null;
+
+              return (
+                <SortableItem key={itemId} id={itemId} isActive={isActive}>
+                  {isActive && (
+                    <div className="absolute -top-3 -right-2 flex gap-1 z-20 opacity-0 group-hover:opacity-100 transition">
+                      <button
+                        type="button"
+                        className="text-xs text-indigo-600 cursor-pointer p-1.5 bg-white rounded-md shadow-sm border border-neutral-200 hover:bg-indigo-50 flex items-center gap-1.5 transition"
+                        onClick={() => {
+                            const payload = {
+                              type: isBlockLibrary ? item[blockDiscriminator] : 'array-item',
+                              data: JSON.parse(JSON.stringify(item))
+                            };
+                            clipboardBuffer.set(payload);
+                            try {
+                              localStorage.setItem('vibe-clipboard', JSON.stringify(payload));
+                            } catch (e) {
+                              console.warn('Failed to save to clipboard', e);
+                            }
+                            toast.success('Block structurally copied to Vibe Clipboard!', { icon: '✨' });
+                        }}
+                        title="Duplicate & Copy JSON to Clipboard"
+                      >
+                        <Copy className="w-3 h-3" />
+                      </button>
+                      <button
+                        type="button"
+                        className="text-xs text-red-600 cursor-pointer p-1.5 bg-white rounded-md shadow-sm border border-neutral-200 hover:bg-red-50 flex items-center gap-1.5 transition"
+                        onClick={() => {
+                          const copy = [...items];
+                          copy.splice(index, 1);
+                          onChange(path, copy);
+                        }}
+                        title="Delete Block"
+                      >
+                        ✕
+                      </button>
+                    </div>
+                  )}
+                  <FormGenerator
+                    schema={elementSchema as z.ZodTypeAny}
+                    data={item}
+                    onChange={onChange}
+                    path={childPath}
+                    label={item?._type ? `${item._type.replace(/([A-Z])/g, ' $1').replace(/^./, (str: string) => str.toUpperCase()).trim()} ${index + 1}` : `Item ${index + 1}`}
+                    activePath={activePath}
+                    setActivePath={setActivePath}
+                  />
+                </SortableItem>
+              );
+            })}
+          </SortableContext>
+        </DndContext>
+      </div>
+    );
+  }
+
+  if (resolvedSchema instanceof z.ZodString) {
+    if (uiType === 'image') {
+      return (
+        <div id={`editor-field-${path}`} onClick={() => setFocusedField(path, false)}>
+          <ImageUpload 
+            value={data || ''} 
+            onChange={(val) => onChange(path, val)} 
+            label={label || path} 
+          />
+        </div>
+      );
+    }
+    
+    if (uiType === 'rich-text') {
+      return (
+        <div id={`editor-field-${path}`} onClick={() => setFocusedField(path, false)}>
+          <RichText 
+            value={data || ''} 
+            onChange={(val) => onChange(path, val)} 
+            label={label || path} 
+          />
+        </div>
+      );
+    }
+
+    if (uiType === 'color-picker') {
+      return (
+        <div id={`editor-field-${path}`} onClick={() => setFocusedField(path, false)} className="w-full">
+          <ColorPicker
+            value={data || ''} 
+            onChange={(val) => onChange(path, val)} 
+            label={label || path} 
+          />
+        </div>
+      );
+    }
+
+    if (uiType === 'icon-picker') {
+      return (
+        <div id={`editor-field-${path}`} onClick={() => setFocusedField(path, false)} className="w-full">
+          <IconPicker
+            value={data || ''} 
+            onChange={(val) => onChange(path, val)} 
+            label={label || path} 
+          />
+        </div>
+      );
+    }
+
+    if (uiType === 'reference') {
+      const collection = getReferenceCollection(resolvedSchema) || 'pages';
+      return (
+        <div id={`editor-field-${path}`} onClick={() => setFocusedField(path, false)} className="w-full">
+          <ReferencePicker
+            value={data || ''}
+            onChange={(val) => onChange(path, val)}
+            label={label || path}
+            collection={collection}
+          />
+        </div>
+      );
+    }
+
+    return (
+      <div className={`flex flex-col gap-1.5 p-2 rounded-lg transition-colors ${isWarned ? 'bg-amber-50 border border-amber-200' : ''}`} id={`editor-field-${path}`}>
+        <div className="flex justify-between items-center">
+          <Label className="text-neutral-500 text-xs font-mono uppercase tracking-wider flex items-center gap-2" htmlFor={`input-${path}`}>
+            {label || path}
+            {isWarned && <span className="text-[10px] bg-amber-100 text-amber-700 font-bold px-1.5 py-0.5 rounded flex items-center gap-1">⚠ Layout Warning</span>}
+          </Label>
+          <div className="flex gap-1">
+              <Popover>
+                <Tooltip>
+                  <TooltipTrigger 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">
+                    <PopoverTrigger className="contents">
+                      <span className="font-serif italic font-bold text-[11px]">A</span> Typography
+                    </PopoverTrigger>
+                  </TooltipTrigger>
+                  <TooltipContent side="top">
+                    Advanced text formatting for responsive breakouts.
+                  </TooltipContent>
+                </Tooltip>
+                <PopoverContent className="w-56 bg-white border-neutral-200 p-2 z-50 shadow-lg">
+                  <div className="flex flex-col gap-1">
+                    <button onClick={() => insertTypography('&shy;')} title="Insert Soft Hyphen (Mobile Text Break)" type="button" 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 onClick={() => insertTypography('<br />')} title="Insert Manual Line Break" type="button" 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>
+        <Input
+          ref={inputRef}
+          id={`input-${path}`}
+          value={data || ''}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(path, e.target.value)}
+          onFocus={() => setFocusedField(path, false)}
+          className={`bg-white text-neutral-900 font-medium text-sm focus-visible:ring-2 focus-visible:ring-indigo-500/20 placeholder:text-neutral-400 ${isWarned ? 'border-amber-300 focus-visible:ring-amber-500/20' : 'border-neutral-300'}`}
+        />
+      </div>
+    );
+  }
+
+  if (resolvedSchema instanceof z.ZodBoolean) {
+    return (
+      <div className="flex items-center space-x-2" id={`editor-field-${path}`} onFocus={() => setFocusedField(path, false)} onClick={() => setFocusedField(path, false)}>
+        <Switch
+          id={`input-${path}`}
+          checked={!!data}
+          onCheckedChange={(checked: boolean) => onChange(path, checked)}
+        />
+        <Label className="text-neutral-500 text-xs font-mono uppercase tracking-wider flex items-center gap-2" htmlFor={`input-${path}`}>
+          {label || path}
+          {label === 'Is Published' && (
+            <Tooltip>
+              <TooltipTrigger>
+                <HelpCircle className="w-3 h-3 text-neutral-400 hover:text-neutral-600 transition-colors cursor-help" />
+              </TooltipTrigger>
+              <TooltipContent side="right" className="max-w-xs">
+                Toggle visibility: When OFF, this page returns a 404 in Production (but remains editable here).
+              </TooltipContent>
+            </Tooltip>
+          )}
+        </Label>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`flex flex-col gap-1.5 p-2 rounded-lg transition-colors ${isWarned ? 'bg-amber-50 border border-amber-200' : ''}`} id={`editor-field-${path}`}>
+      <Label className="text-neutral-500 text-xs font-mono uppercase tracking-wider flex items-center gap-2" htmlFor={`input-${path}`}>
+        {label || path}
+        {isWarned && <span className="text-[10px] bg-amber-100 text-amber-700 font-bold px-1.5 py-0.5 rounded">⚠ Layout Warning</span>}
+      </Label>
+      <Input
+        id={`input-${path}`}
+        value={data || ''}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(path, e.target.value)}
+        onFocus={() => setFocusedField(path, false)}
+        className={`bg-white text-neutral-900 font-medium text-sm focus-visible:ring-2 focus-visible:ring-indigo-500/20 placeholder:text-neutral-400 ${isWarned ? 'border-amber-300 focus-visible:ring-amber-500/20' : 'border-neutral-300'}`}
+      />
+    </div>
+  );
+}

package/templates/components/cms/SEO.tsx

@@ -0,0 +1,35 @@
+import { Metadata } from 'next';
+import fs from 'fs/promises';
+import path from 'path';
+
+/**
+ * Generates SEO tags dynamically merging page specific info with site.json defaults.
+ * Can only be used in App Router Server Components (generateMetadata).
+ */
+export async function generateVibeMetadata(
+  pageSeo?: { title?: string; description?: string }
+): Promise<Metadata> {
+  const settingsPath = path.join(process.cwd(), 'src/content/settings/site.json');
+  let siteTitleTemplate = '%s';
+  let siteDesc = '';
+  
+  try {
+    const raw = await fs.readFile(settingsPath, 'utf8');
+    const settings = JSON.parse(raw);
+    if (settings.seo) {
+      siteTitleTemplate = settings.seo.titleTemplate || '%s';
+      siteDesc = settings.seo.defaultDescription || '';
+    }
+  } catch (e) {
+    console.warn('[VibeCMS] Could not load site.json for metadata generation.');
+  }
+
+  const title = pageSeo?.title 
+    ? siteTitleTemplate.replace('%s', pageSeo.title)
+    : siteTitleTemplate.replace('%s', siteTitleTemplate.includes('|') ? siteTitleTemplate.split('|')[1].trim() : 'Home');
+    
+  return {
+    title,
+    description: pageSeo?.description || siteDesc,
+  };
+}

package/templates/components/cms/SiteFooter.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { VisualWrapper } from '@/components/cms/VisualWrapper';
+
+// Directly import the fallback JSON state
+import siteData from '@/content/settings/site.json';
+
+export function SiteFooter() {
+  return (
+    <footer className="w-full border-t border-neutral-200 bg-neutral-50 overflow-hidden z-10 relative mt-auto" aria-labelledby="footer-heading">
+      <h2 id="footer-heading" className="sr-only">Site Legal Footer</h2>
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 flex flex-col md:flex-row justify-between items-center gap-6">
+        
+        <div className="text-sm font-medium text-neutral-500">
+          <VisualWrapper fieldPath="legal.companyName" fallback={siteData.legal?.companyName || "Company Name"}>
+            {(value) => <span>&copy; {new Date().getFullYear()} {String(value)}. All rights reserved.</span>}
+          </VisualWrapper>
+        </div>
+
+        <nav aria-label="Legal" className="flex flex-wrap gap-6 text-sm text-neutral-500">
+          {/* German Impressum requirement - standard static route, content configured globally */}
+          <Link href="/impressum" className="hover:text-neutral-900 transition">
+            Impressum
+          </Link>
+          
+          <VisualWrapper fieldPath="legal.privacyUrl" fallback={siteData.legal?.privacyUrl || "/privacy-policy"}>
+            {(value) => (
+              <Link href={String(value) || '/privacy-policy'} className="hover:text-neutral-900 transition">
+                Datenschutzerklärung
+              </Link>
+            )}
+          </VisualWrapper>
+        </nav>
+      </div>
+    </footer>
+  );
+}