@setzkasten-cms/ui 0.4.2

package/src/components/page-builder.tsx

@@ -0,0 +1,1134 @@
+import { useState, useEffect, useCallback, useRef, useSyncExternalStore, type ComponentType } from 'react'
+import type { StoreApi } from 'zustand/vanilla'
+import type { SetzKastenConfig, SectionDefinition, FieldRecord } from '@setzkasten-cms/core'
+import { EntryForm } from './entry-form'
+import { useConfig, useRepository } from '../providers/setzkasten-provider'
+import { useToast } from './toast'
+import type { FormStore } from '../stores/form-store'
+import {
+  LayoutGrid, Star, Megaphone, Puzzle, Code,
+  Eye, EyeOff, Shield, Palette, Zap, Image,
+  Link, Settings, FileText, Folder, List,
+  Edit, Tag, Globe, Heart, Users, X,
+  GripVertical, Monitor, AppWindow, Tablet, Smartphone,
+  Save, ChevronUp, ChevronDown,
+  PanelRightClose, PanelRightOpen, RotateCcw,
+  Undo2, Redo2, Trash2,
+  type LucideProps,
+} from 'lucide-react'
+
+// ---------------------------------------------------------------------------
+// Icon map (shared with admin-app)
+// ---------------------------------------------------------------------------
+
+const ICON_MAP: Record<string, ComponentType<LucideProps>> = {
+  layout: LayoutGrid, star: Star, megaphone: Megaphone, puzzle: Puzzle, code: Code,
+  eye: Eye, shield: Shield, palette: Palette, zap: Zap, image: Image,
+  link: Link, settings: Settings, file: FileText, folder: Folder, list: List,
+  edit: Edit, tag: Tag, globe: Globe, heart: Heart, users: Users,
+}
+
+// ---------------------------------------------------------------------------
+// Draggable panel hook
+// ---------------------------------------------------------------------------
+
+function useDraggable() {
+  const [offset, setOffset] = useState({ x: 0, y: 0 })
+  const dragging = useRef(false)
+  const start = useRef({ x: 0, y: 0 })
+  const startOffset = useRef({ x: 0, y: 0 })
+
+  const onMouseDown = useCallback((e: React.MouseEvent) => {
+    // Only drag from the header area (closest .sk-pb__nav-header or .sk-pb__slide-over-header)
+    const target = e.target as HTMLElement
+    if (target.closest('button') || target.closest('input') || target.closest('select')) return
+    if (!target.closest('.sk-pb__nav-header, .sk-pb__slide-over-header, .sk-pb__drag-handle')) return
+    e.preventDefault()
+    dragging.current = true
+    start.current = { x: e.clientX, y: e.clientY }
+    startOffset.current = { ...offset }
+
+    const onMouseMove = (ev: MouseEvent) => {
+      if (!dragging.current) return
+      setOffset({
+        x: startOffset.current.x + ev.clientX - start.current.x,
+        y: startOffset.current.y + ev.clientY - start.current.y,
+      })
+    }
+    const onMouseUp = () => {
+      dragging.current = false
+      document.removeEventListener('mousemove', onMouseMove)
+      document.removeEventListener('mouseup', onMouseUp)
+    }
+    document.addEventListener('mousemove', onMouseMove)
+    document.addEventListener('mouseup', onMouseUp)
+  }, [offset])
+
+  const reset = useCallback(() => setOffset({ x: 0, y: 0 }), [])
+  const hasMoved = offset.x !== 0 || offset.y !== 0
+  const style = hasMoved ? { transform: `translate(${offset.x}px, ${offset.y}px)` } : undefined
+
+  return { onMouseDown, style, offset, reset, hasMoved }
+}
+
+// ---------------------------------------------------------------------------
+// Resizable hook – single corner, opposite to CSS anchor. Dead simple.
+// 'bl' = bottom-left handle (panel anchored top-right): left = wider, down = taller
+// 'br' = bottom-right handle (panel anchored top-left): right = wider, down = taller
+// ---------------------------------------------------------------------------
+
+function useResizable(defaultWidth: number, minW = 280, maxW = 800, minH = 200, maxH = 900) {
+  const [width, setWidth] = useState(defaultWidth)
+  const [height, setHeight] = useState(0) // 0 = use CSS default
+  const resizing = useRef(false)
+  const startMouse = useRef({ x: 0, y: 0 })
+  const startW = useRef(defaultWidth)
+  const startH = useRef(0)
+  const mode = useRef<'bl' | 'br'>('bl')
+
+  const onResizeStart = useCallback((e: React.MouseEvent, corner: 'bl' | 'br') => {
+    e.preventDefault()
+    e.stopPropagation()
+    resizing.current = true
+    startMouse.current = { x: e.clientX, y: e.clientY }
+    startW.current = width
+    startH.current = height || (e.currentTarget.parentElement?.offsetHeight ?? 400)
+    mode.current = corner
+    document.querySelector('.sk-pb')?.classList.add('sk-pb--splitting')
+
+    const onMouseMove = (ev: MouseEvent) => {
+      if (!resizing.current) return
+      const dx = ev.clientX - startMouse.current.x
+      const dy = ev.clientY - startMouse.current.y
+      // BL: mouse left (dx<0) = wider, BR: mouse right (dx>0) = wider
+      const newW = corner === 'bl'
+        ? startW.current - dx
+        : startW.current + dx
+      const newH = startH.current + dy // down = taller for both
+      setWidth(Math.min(maxW, Math.max(minW, newW)))
+      setHeight(Math.min(maxH, Math.max(minH, newH)))
+    }
+    const onMouseUp = () => {
+      resizing.current = false
+      document.querySelector('.sk-pb')?.classList.remove('sk-pb--splitting')
+      document.removeEventListener('mousemove', onMouseMove)
+      document.removeEventListener('mouseup', onMouseUp)
+    }
+    document.addEventListener('mousemove', onMouseMove)
+    document.addEventListener('mouseup', onMouseUp)
+  }, [width, height, minW, maxW, minH, maxH])
+
+  const reset = useCallback(() => { setWidth(defaultWidth); setHeight(0) }, [defaultWidth])
+  const hasResized = width !== defaultWidth || height !== 0
+
+  return { width, height, onResizeStart, reset, hasResized }
+}
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface PageSection {
+  key: string
+  enabled: boolean
+}
+
+interface PageConfig {
+  label: string
+  sections: PageSection[]
+}
+
+type ViewportMode = 'compact' | 'desktop' | 'tablet' | 'mobile'
+
+// ---------------------------------------------------------------------------
+// Page Builder View
+// ---------------------------------------------------------------------------
+
+interface PageInfo {
+  path: string
+  pageKey: string
+  label: string
+  hasConfig: boolean
+}
+
+interface PageBuilderProps {
+  pageKey?: string
+  pages?: PageInfo[]
+  onPageChange?: (pageKey: string) => void
+  onExit: () => void
+}
+
+export function PageBuilder({ pageKey = 'index', pages = [], onPageChange, onExit }: PageBuilderProps) {
+  const config = useConfig()
+  const repository = useRepository()
+  const { toast } = useToast()
+
+  const [pageConfig, setPageConfig] = useState<PageConfig | null>(null)
+  // visibleSection: tracked by scroll (IntersectionObserver), shown in nav highlight
+  const [visibleSection, setVisibleSection] = useState<string | null>(null)
+  // editingSection: the section whose editor is open (does NOT change on scroll)
+  const [editingSection, setEditingSection] = useState<string | null>(null)
+  const [editorOpen, setEditorOpen] = useState(false)
+  const [viewport, setViewport] = useState<ViewportMode>('compact')
+  const [loading, setLoading] = useState(true)
+  const [previewKey, setPreviewKey] = useState(0)
+  const [configDirty, setConfigDirty] = useState(false)
+  const [savingConfig, setSavingConfig] = useState(false)
+  const [configSha, setConfigSha] = useState<string | undefined>()
+
+  // Collapse states – nav collapsed in compact/desktop (edit via inline preview buttons)
+  const [navCollapsed, setNavCollapsed] = useState(true)
+  const [editorCollapsed, setEditorCollapsed] = useState(false)
+
+  // Drag & Drop state
+  const [dragIndex, setDragIndex] = useState<number | null>(null)
+  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null)
+
+  const iframeRef = useRef<HTMLIFrameElement>(null)
+  const navRef = useRef<HTMLDivElement>(null)
+  const scrollAfterLoadRef = useRef<string | null>(null)
+  // Cache unsaved draft values per section so switching sections preserves edits
+  const draftCacheRef = useRef<Record<string, Record<string, unknown>>>({})
+
+  // Draggable panels
+  const navDrag = useDraggable()
+  const editorDrag = useDraggable()
+  const editorResize = useResizable(380)
+
+  // Compact mode: draggable preview split (percentage of viewport width)
+  const [compactSplit, setCompactSplit] = useState(66)
+  const compactSplitDefault = 66
+  const pbRef = useRef<HTMLDivElement>(null)
+
+  const onSplitDragStart = useCallback((e: React.MouseEvent) => {
+    e.preventDefault()
+    const root = pbRef.current
+    if (!root) return
+    // Disable pointer events on iframe so mouse events aren't swallowed
+    root.classList.add('sk-pb--splitting')
+
+    const onMouseMove = (ev: MouseEvent) => {
+      const pct = (ev.clientX / window.innerWidth) * 100
+      const clamped = Math.min(95, Math.max(30, pct))
+      root.style.setProperty('--sk-split', `${clamped}`)
+    }
+    const onMouseUp = (ev: MouseEvent) => {
+      root.classList.remove('sk-pb--splitting')
+      const pct = (ev.clientX / window.innerWidth) * 100
+      setCompactSplit(Math.min(95, Math.max(30, pct)))
+      root.style.removeProperty('--sk-split')
+      document.removeEventListener('mousemove', onMouseMove)
+      document.removeEventListener('mouseup', onMouseUp)
+    }
+    document.addEventListener('mousemove', onMouseMove)
+    document.addEventListener('mouseup', onMouseUp)
+  }, [])
+
+  const resetAllPositions = useCallback(() => {
+    navDrag.reset()
+    editorDrag.reset()
+    editorResize.reset()
+    setCompactSplit(compactSplitDefault)
+  }, [navDrag.reset, editorDrag.reset, editorResize.reset])
+
+
+  const compactSplitMoved = compactSplit !== compactSplitDefault
+  const anyMoved = navDrag.hasMoved || editorDrag.hasMoved || editorResize.hasResized || compactSplitMoved
+
+  // Draft cleanup is handled by the Discard button in the editor header
+  // (no more blanket DELETE on mount)
+
+  // Load page config from content repo
+  const configKey = '_' + pageKey.replace(/\//g, '--')
+
+  useEffect(() => {
+    loadPageConfig()
+  }, [pageKey])
+
+  async function loadPageConfig() {
+    try {
+      const result = await repository.getEntry('pages', configKey)
+      if (result.ok) {
+        setPageConfig(result.value.content as unknown as PageConfig)
+        setConfigSha(result.value.sha)
+      } else {
+        // No config yet — show empty sections (init in v0.5.0 will auto-detect)
+        setPageConfig({
+          label: pageKey === 'index' ? 'Startseite' : pageKey,
+          sections: [],
+        })
+      }
+    } catch (e) {
+      console.error('[PageBuilder] Failed to load page config:', e)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  // Get section definition from config
+  function getSectionDef(key: string): SectionDefinition | null {
+    for (const product of Object.values(config.products)) {
+      if (product.sections[key]) return product.sections[key]
+    }
+    return null
+  }
+
+  // Scroll preview to section (without changing editor)
+  const scrollToSection = useCallback((sectionKey: string) => {
+    const iframe = iframeRef.current
+    if (!iframe?.contentWindow) return
+    iframe.contentWindow.postMessage(
+      { type: 'sk:scroll-to', section: sectionKey },
+      '*',
+    )
+  }, [])
+
+  // Send section order + visibility to iframe for client-side DOM reorder (no reload!)
+  const syncSectionsToPreview = useCallback((sections: PageSection[]) => {
+    const iframe = iframeRef.current
+    if (!iframe?.contentWindow) return
+    iframe.contentWindow.postMessage(
+      { type: 'sk:update-sections', sections },
+      '*',
+    )
+  }, [])
+
+  // Keep a ref to current pageConfig so handleIframeLoad can access it without re-creating
+  const pageConfigRef = useRef(pageConfig)
+  pageConfigRef.current = pageConfig
+
+  // After iframe loads, scroll to the remembered section and sync section config
+  const handleIframeLoad = useCallback(() => {
+    setTimeout(() => {
+      if (scrollAfterLoadRef.current) {
+        scrollToSection(scrollAfterLoadRef.current!)
+        scrollAfterLoadRef.current = null
+      }
+      // Sync current section order + visibility to the iframe
+      if (pageConfigRef.current?.sections) {
+        syncSectionsToPreview(pageConfigRef.current.sections)
+      }
+    }, 200)
+  }, [scrollToSection, syncSectionsToPreview])
+
+  // Listen for scroll tracking from iframe
+  useEffect(() => {
+    function handleMessage(event: MessageEvent) {
+      if (event.data?.type === 'sk:visible-section') {
+        setVisibleSection(event.data.section)
+      }
+    }
+    window.addEventListener('message', handleMessage)
+    return () => window.removeEventListener('message', handleMessage)
+  }, [])
+
+  // Open section editor
+  const openEditor = useCallback((sectionKey: string) => {
+    setEditingSection(sectionKey)
+    setEditorOpen(true)
+    setEditorCollapsed(false)
+    scrollToSection(sectionKey)
+  }, [scrollToSection])
+
+  // Close editor
+  const closeEditor = useCallback(() => {
+    setEditorOpen(false)
+    setEditorCollapsed(false)
+    setEditingSection(null)
+  }, [])
+
+  // Reload iframe preserving scroll position (only for structural changes like reorder/toggle)
+  const reloadPreview = useCallback((scrollTo?: string) => {
+    scrollAfterLoadRef.current = scrollTo ?? visibleSection
+    setPreviewKey(k => k + 1)
+  }, [visibleSection])
+
+  // Check if a field change can be patched client-side (text only) or needs SSR reload.
+  // Recursively walks into arrays/objects to check sub-field types.
+  const needsSsrReload = useCallback((sectionKey: string, values: Record<string, unknown>) => {
+    const product = Object.values(config.products)[0]
+    const section = product?.sections[sectionKey]
+    if (!section) return true // unknown section → reload to be safe
+
+    const prev = draftCacheRef.current[sectionKey]
+    if (!prev) return false // first update → DOM patch is fine for initial text
+
+    // Check if changes in a set of fields are all text-patchable
+    function hasNonTextChanges(
+      prevObj: Record<string, unknown>,
+      nextObj: Record<string, unknown>,
+      fields: Record<string, { type: string; itemField?: any; fields?: any }>,
+    ): boolean {
+      for (const [key, val] of Object.entries(nextObj)) {
+        if (JSON.stringify(prevObj[key]) === JSON.stringify(val)) continue
+        const fieldDef = fields[key]
+        if (!fieldDef) return true
+        if (fieldDef.type === 'text') continue
+        if (fieldDef.type === 'array' && fieldDef.itemField?.type === 'object' && fieldDef.itemField.fields) {
+          // Walk into array items and check sub-fields
+          const prevArr = (prevObj[key] as unknown[]) ?? []
+          const nextArr = (val as unknown[]) ?? []
+          if (prevArr.length !== nextArr.length) return true // structural change
+          for (let i = 0; i < nextArr.length; i++) {
+            const prevItem = (prevArr[i] ?? {}) as Record<string, unknown>
+            const nextItem = (nextArr[i] ?? {}) as Record<string, unknown>
+            if (hasNonTextChanges(prevItem, nextItem, fieldDef.itemField.fields)) return true
+          }
+          continue
+        }
+        return true // non-text, non-array-of-objects
+      }
+      return false
+    }
+
+    return hasNonTextChanges(prev as Record<string, unknown>, values, section.fields as any)
+  }, [config])
+
+  // Send draft values to iframe for client-side DOM patching,
+  // or store on server + reload if change requires SSR (icon, image, array, etc.)
+  const updateDraft = useCallback((sectionKey: string, values: Record<string, unknown>) => {
+    const requiresReload = needsSsrReload(sectionKey, values)
+    draftCacheRef.current[sectionKey] = values
+
+    if (requiresReload) {
+      // Store draft server-side so SSR preview can access it
+      fetch('/api/setzkasten/draft', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ section: sectionKey, values }),
+      }).then(() => {
+        reloadPreview(sectionKey)
+      })
+    } else {
+      // Fast client-side DOM patching for text changes
+      const iframe = iframeRef.current
+      if (!iframe?.contentWindow) return
+      iframe.contentWindow.postMessage(
+        { type: 'sk:draft-update', section: sectionKey, values },
+        '*',
+      )
+    }
+  }, [needsSsrReload, reloadPreview])
+
+  // Clear draft cache (client + server) for a section after successful save
+  const clearDraftCache = useCallback((sectionKey: string) => {
+    delete draftCacheRef.current[sectionKey]
+    // Also clear server-side draft so SSR preview uses saved content
+    fetch('/api/setzkasten/draft', {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ section: sectionKey }),
+    }).catch(() => {})
+  }, [])
+
+  // Discard: clear draft + reload preview to show original content
+  const discardDraft = useCallback((sectionKey: string) => {
+    clearDraftCache(sectionKey)
+    reloadPreview(sectionKey)
+  }, [clearDraftCache, reloadPreview])
+
+  // Toggle section enabled/disabled
+  const toggleSection = useCallback((sectionKey: string) => {
+    setPageConfig(prev => {
+      if (!prev) return prev
+      const updated = {
+        ...prev,
+        sections: prev.sections.map(s =>
+          s.key === sectionKey ? { ...s, enabled: !s.enabled } : s
+        ),
+      }
+      // Sync to preview via DOM manipulation (no reload)
+      syncSectionsToPreview(updated.sections)
+      return updated
+    })
+    setConfigDirty(true)
+  }, [syncSectionsToPreview])
+
+  // Drag & Drop handlers
+  const handleDragStart = useCallback((index: number) => {
+    setDragIndex(index)
+  }, [])
+
+  const handleDragOver = useCallback((e: React.DragEvent, index: number) => {
+    e.preventDefault()
+    setDragOverIndex(index)
+  }, [])
+
+  const handleDragEnd = useCallback(() => {
+    if (dragIndex !== null && dragOverIndex !== null && dragIndex !== dragOverIndex) {
+      setPageConfig(prev => {
+        if (!prev) return prev
+        const newSections = [...prev.sections]
+        const [moved] = newSections.splice(dragIndex, 1)
+        if (!moved) return prev
+        newSections.splice(dragOverIndex, 0, moved)
+        const updated = { ...prev, sections: newSections }
+        // Sync to preview via DOM manipulation (no reload)
+        syncSectionsToPreview(updated.sections)
+        return updated
+      })
+      setConfigDirty(true)
+    }
+    setDragIndex(null)
+    setDragOverIndex(null)
+  }, [dragIndex, dragOverIndex, syncSectionsToPreview])
+
+  // Save page config (order + enabled state)
+  const savePageConfig = useCallback(async () => {
+    if (!pageConfig || savingConfig) return
+    setSavingConfig(true)
+    try {
+      const result = await repository.saveEntry('pages', configKey, {
+        content: pageConfig as unknown as Record<string, unknown>,
+        sha: configSha,
+      })
+      if (result.ok) {
+        setConfigDirty(false)
+        setConfigSha(undefined)
+        toast('Seitenkonfiguration gespeichert', 'success')
+      } else {
+        toast(`Fehler: ${result.error?.message ?? 'Unbekannt'}`, 'error')
+      }
+    } catch (e) {
+      toast('Speichern fehlgeschlagen', 'error')
+    }
+    setSavingConfig(false)
+  }, [pageConfig, configSha, savingConfig, repository, toast])
+
+  const viewportWidths: Record<ViewportMode, string> = {
+    compact: `${compactSplit}vw`,
+    desktop: '100%',
+    tablet: '768px',
+    mobile: '375px',
+  }
+  const viewportWidth = viewportWidths[viewport]
+  const isCompact = viewport === 'compact'
+
+  if (loading) {
+    return (
+      <div className="sk-pb">
+        <div className="sk-pb__loading">Lade Page Builder...</div>
+      </div>
+    )
+  }
+
+  const sections = pageConfig?.sections ?? []
+
+  // Shared nav content (used in both compact sidebar and floating overlay)
+  const navContent = (
+    <>
+      <div className="sk-pb__nav-header">
+        {navCollapsed && visibleSection && (
+          <button
+            type="button"
+            className="sk-pb__inline-edit-btn"
+            onClick={() => openEditor(visibleSection)}
+          >
+            <Edit size={14} />
+            {getSectionDef(visibleSection)?.label ?? visibleSection}
+          </button>
+        )}
+        {!navCollapsed && <span className="sk-pb__nav-title">Sections</span>}
+        {!navCollapsed && (
+          <div className="sk-pb__nav-actions">
+            <button
+              type="button"
+              className={`sk-pb__viewport-btn${viewport === 'compact' ? ' sk-pb__viewport-btn--active' : ''}`}
+              onClick={() => { setViewport('compact'); setNavCollapsed(true) }}
+              title="Compact Desktop"
+            >
+              <AppWindow size={14} />
+            </button>
+            <button
+              type="button"
+              className={`sk-pb__viewport-btn${viewport === 'desktop' ? ' sk-pb__viewport-btn--active' : ''}`}
+              onClick={() => { setViewport('desktop'); setNavCollapsed(true) }}
+              title="Desktop"
+            >
+              <Monitor size={14} />
+            </button>
+            <button
+              type="button"
+              className={`sk-pb__viewport-btn${viewport === 'tablet' ? ' sk-pb__viewport-btn--active' : ''}`}
+              onClick={() => { setViewport('tablet'); setNavCollapsed(false) }}
+              title="Tablet"
+            >
+              <Tablet size={14} />
+            </button>
+            <button
+              type="button"
+              className={`sk-pb__viewport-btn${viewport === 'mobile' ? ' sk-pb__viewport-btn--active' : ''}`}
+              onClick={() => { setViewport('mobile'); setNavCollapsed(false) }}
+              title="Mobile"
+            >
+              <Smartphone size={14} />
+            </button>
+          </div>
+        )}
+        <div className="sk-pb__nav-header-right">
+          <button
+            type="button"
+            className="sk-pb__collapse-btn"
+            onClick={() => setNavCollapsed(c => !c)}
+            title={navCollapsed ? 'Navigation aufklappen' : 'Navigation einklappen'}
+          >
+            {navCollapsed ? <ChevronDown size={14} /> : <ChevronUp size={14} />}
+          </button>
+          <button
+            type="button"
+            className="sk-pb__exit-btn"
+            onClick={onExit}
+            title="Page Builder verlassen"
+          >
+            <X size={16} />
+          </button>
+        </div>
+      </div>
+
+      {!navCollapsed && (
+        <>
+          {pages.length > 1 && onPageChange && (
+            <div className="sk-pb__page-switcher">
+              <label className="sk-pb__page-switcher-label">Seite</label>
+              <select
+                className="sk-pb__page-select"
+                value={pageKey}
+                onChange={e => onPageChange(e.target.value)}
+              >
+                {pages.map(p => (
+                  <option key={p.pageKey} value={p.pageKey}>{p.label}</option>
+                ))}
+              </select>
+            </div>
+          )}
+          <div className="sk-pb__section-list">
+            {sections.map((section, index) => {
+              const def = getSectionDef(section.key)
+              const IconComp = def?.icon ? ICON_MAP[def.icon] : null
+              const isVisible = visibleSection === section.key
+              const isEditing = editingSection === section.key
+              const isDragging = dragIndex === index
+              const isDragOver = dragOverIndex === index
+
+              return (
+                <div
+                  key={section.key}
+                  className={`sk-pb__section-pill${isEditing ? ' sk-pb__section-pill--editing' : ''}${isVisible && !isEditing ? ' sk-pb__section-pill--visible' : ''}${!section.enabled ? ' sk-pb__section-pill--disabled' : ''}${isDragging ? ' sk-pb__section-pill--dragging' : ''}${isDragOver ? ' sk-pb__section-pill--dragover' : ''}`}
+                  draggable
+                  onDragStart={() => handleDragStart(index)}
+                  onDragOver={(e) => handleDragOver(e, index)}
+                  onDragEnd={handleDragEnd}
+                >
+                  <span className="sk-pb__section-grip">
+                    <GripVertical size={14} />
+                  </span>
+                  <button
+                    type="button"
+                    className="sk-pb__section-main"
+                    onClick={() => openEditor(section.key)}
+                  >
+                    {IconComp && (
+                      <span className="sk-pb__section-icon">
+                        <IconComp size={16} />
+                      </span>
+                    )}
+                    <span className="sk-pb__section-label">
+                      {def?.label ?? section.key}
+                    </span>
+                  </button>
+                  <button
+                    type="button"
+                    className="sk-pb__section-toggle"
+                    onClick={(e) => { e.stopPropagation(); toggleSection(section.key) }}
+                    title={section.enabled ? 'Section ausblenden' : 'Section einblenden'}
+                  >
+                    {section.enabled ? <Eye size={14} /> : <EyeOff size={14} />}
+                  </button>
+                </div>
+              )
+            })}
+          </div>
+
+          {configDirty && (
+            <div className="sk-pb__nav-footer">
+              <button
+                type="button"
+                className="sk-pb__save-btn"
+                onClick={savePageConfig}
+                disabled={savingConfig}
+              >
+                <Save size={14} />
+                {savingConfig ? 'Speichert...' : 'Reihenfolge speichern'}
+              </button>
+            </div>
+          )}
+        </>
+      )}
+    </>
+  )
+
+  // Shared editor panel
+  const editorPanel = editorOpen && editingSection && !editorCollapsed && (
+    getSectionDef(editingSection) ? (
+      <SectionSlideOver
+        key={editingSection}
+        sectionKey={editingSection}
+        section={getSectionDef(editingSection)!}
+        cachedValues={draftCacheRef.current[editingSection]}
+        onClose={closeEditor}
+        onCollapse={() => setEditorCollapsed(true)}
+        onDraftUpdate={updateDraft}
+        onDiscard={discardDraft}
+        onSaved={clearDraftCache}
+      />
+    ) : (
+      <div className="sk-pb__slide-over">
+        <div className="sk-pb__slide-over-header">
+          <h3>{editingSection}</h3>
+          <div className="sk-pb__slide-over-actions">
+            <button type="button" className="sk-pb__collapse-btn" onClick={() => setEditorCollapsed(true)} title="Einklappen">
+              <PanelRightClose size={16} />
+            </button>
+            <button type="button" className="sk-pb__close-btn" onClick={closeEditor}>
+              <X size={18} />
+            </button>
+          </div>
+        </div>
+        <div className="sk-pb__slide-over-body">
+          <p className="sk-pb__slide-over-info">
+            Diese Section hat noch kein editierbares Schema.
+          </p>
+        </div>
+      </div>
+    )
+  )
+
+  // Editor float transform (drag only, no position offset needed with single-corner resize)
+  const editorFloatTransform = editorDrag.hasMoved
+    ? { transform: `translate(${editorDrag.offset.x}px, ${editorDrag.offset.y}px)` }
+    : {}
+
+  return (
+    <div
+      ref={pbRef}
+      className={`sk-pb${isCompact ? ' sk-pb--compact' : ''}`}
+      style={isCompact ? { '--sk-split': `${compactSplit}` } as React.CSSProperties : undefined}
+    >
+      {/* Preview iframe (full background) */}
+      <div className="sk-pb__preview">
+        <div
+          className="sk-pb__iframe-container"
+          style={{
+            maxWidth: isCompact ? 'calc(var(--sk-split, 66) * 1vw)' : viewportWidth,
+            margin: viewport === 'desktop' ? undefined : isCompact ? '0' : '0 auto',
+          }}
+        >
+          <iframe
+            ref={iframeRef}
+            key={previewKey}
+            src={`/${pageKey === 'index' ? '' : pageKey}?_sk_preview=1&_t=${previewKey}`}
+            className="sk-pb__iframe"
+            title="Live Preview"
+            onLoad={handleIframeLoad}
+          />
+        </div>
+      </div>
+
+      {/* Compact mode: draggable split divider */}
+      {isCompact && (
+        <div
+          className="sk-pb__split-divider"
+          style={{ left: 'calc(var(--sk-split, 66) * 1vw)' }}
+          onMouseDown={onSplitDragStart}
+        />
+      )}
+
+      {/* Floating nav (all modes) */}
+      <div
+        ref={navRef}
+        className={`sk-pb__nav${navCollapsed ? ' sk-pb__nav--collapsed' : ''}`}
+        style={navDrag.style}
+        onMouseDown={navDrag.onMouseDown}
+      >
+        {navContent}
+      </div>
+
+
+      {/* Floating editor (all modes) */}
+      {editorPanel && (
+        <div
+          className="sk-pb__editor-float"
+          style={{
+            ...(!isCompact || editorResize.hasResized ? { width: editorResize.width } : {}),
+            ...(editorResize.height > 0 ? { height: editorResize.height } : {}),
+            ...editorFloatTransform,
+          }}
+          onMouseDown={editorDrag.onMouseDown}
+        >
+          {/* Resize corner: always BL (panel always right-anchored) */}
+          <div
+            className="sk-pb__resize-corner sk-pb__resize-corner--bl"
+            onMouseDown={(e) => editorResize.onResizeStart(e, 'bl')}
+          />
+          {editorPanel}
+        </div>
+      )}
+
+      {/* Collapsed editor expand button */}
+      {editorOpen && editingSection && editorCollapsed && (
+        <button
+          type="button"
+          className="sk-pb__editor-expand-btn"
+          onClick={() => setEditorCollapsed(false)}
+          title="Editor aufklappen"
+        >
+          <PanelRightOpen size={16} />
+        </button>
+      )}
+
+      {/* Reset positions button (shown when any panel was moved) */}
+      {anyMoved && (
+        <button
+          type="button"
+          className="sk-pb__reset-pos-btn"
+          onClick={resetAllPositions}
+          title="Panel-Positionen zurücksetzen"
+        >
+          <RotateCcw size={14} />
+        </button>
+      )}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Section Slide-Over Editor
+// ---------------------------------------------------------------------------
+
+interface SectionSlideOverProps {
+  sectionKey: string
+  section: SectionDefinition
+  cachedValues?: Record<string, unknown>
+  onClose: () => void
+  onCollapse: () => void
+  onDraftUpdate: (sectionKey: string, values: Record<string, unknown>) => void
+  onDiscard: (sectionKey: string) => void
+  onSaved: (sectionKey: string) => void
+}
+
+function SectionSlideOver({ sectionKey, section, cachedValues, onClose, onCollapse, onDraftUpdate, onDiscard, onSaved }: SectionSlideOverProps) {
+  const repository = useRepository()
+  const { toast } = useToast()
+  const [initialValues, setInitialValues] = useState<Record<string, unknown>>({})
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [sha, setSha] = useState<string | undefined>()
+  const [conflict, setConflict] = useState<{ local: Record<string, unknown>; remote: Record<string, unknown>; remoteSha: string | undefined } | null>(null)
+  const storeRef = useRef<StoreApi<FormStore> | null>(null)
+  const [formStore, setFormStore] = useState<StoreApi<FormStore> | null>(null)
+  const draftTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const saveRef = useRef<(() => void) | null>(null)
+  const undoRef = useRef<(() => void) | null>(null)
+  const redoRef = useRef<(() => void) | null>(null)
+
+  // Subscribe to store for dirty/undo/redo state (triggers re-render)
+  const storeSnapshotRef = useRef({ dirty: false, canUndo: false, canRedo: false })
+  const storeState = useSyncExternalStore(
+    useCallback((cb) => formStore?.subscribe(cb) ?? (() => {}), [formStore]),
+    useCallback(() => {
+      if (!formStore) return storeSnapshotRef.current
+      const s = formStore.getState()
+      const dirty = s.isDirty()
+      const canUndo = s.canUndo()
+      const canRedo = s.canRedo()
+      const prev = storeSnapshotRef.current
+      if (prev.dirty !== dirty || prev.canUndo !== canUndo || prev.canRedo !== canRedo) {
+        storeSnapshotRef.current = { dirty, canUndo, canRedo }
+      }
+      return storeSnapshotRef.current
+    }, [formStore]),
+  )
+
+  // Load section data (use cached draft values if available)
+  useEffect(() => {
+    setLoading(true)
+    repository.getEntry('_sections', sectionKey).then(result => {
+      if (result.ok) {
+        // Always use saved content as baseline (for dirty detection + discard)
+        setInitialValues(result.value.content)
+        setSha(result.value.sha)
+      }
+      setLoading(false)
+    })
+  }, [sectionKey, repository])
+
+  // Poll for store availability
+  useEffect(() => {
+    if (formStore) return
+    const check = setInterval(() => {
+      if (storeRef.current && !formStore) {
+        setFormStore(storeRef.current)
+        clearInterval(check)
+      }
+    }, 50)
+    return () => clearInterval(check)
+  }, [formStore, loading])
+
+  // Auto-update draft on field changes (debounced 500ms)
+  useEffect(() => {
+    if (!formStore) return
+
+    const unsub = formStore.subscribe((state) => {
+      if (draftTimerRef.current) clearTimeout(draftTimerRef.current)
+      draftTimerRef.current = setTimeout(() => {
+        onDraftUpdate(sectionKey, state.values)
+      }, 500)
+    })
+
+    return () => {
+      unsub()
+      if (draftTimerRef.current) clearTimeout(draftTimerRef.current)
+    }
+  }, [formStore, sectionKey, onDraftUpdate])
+
+  // Save handler
+  const handleSave = useCallback(async (values: Record<string, unknown>) => {
+    setSaving(true)
+    const result = await repository.saveEntry('_sections', sectionKey, {
+      content: values,
+      sha,
+    })
+    if (result.ok) {
+      setInitialValues(values)
+      setSha(result.value.sha)
+      setConflict(null)
+      onSaved(sectionKey)
+      toast('Gespeichert – Änderungen sind in 1–2 Minuten live.', 'success')
+    } else {
+      if (result.error?.type === 'conflict') {
+        // Fetch remote content for visual diff
+        const remoteResult = await repository.getEntry('_sections', sectionKey)
+        if (remoteResult.ok) {
+          setConflict({
+            local: values,
+            remote: remoteResult.value.content,
+            remoteSha: remoteResult.value.sha,
+          })
+        } else {
+          toast('Konflikt: Jemand hat gleichzeitig bearbeitet. Seite neu laden.', 'error')
+        }
+      } else {
+        toast(`Fehler: ${result.error?.message ?? 'Unbekannt'}`, 'error')
+      }
+    }
+    setSaving(false)
+  }, [repository, sectionKey, sha, toast])
+
+  // Save handler for header button + Cmd+S
+  saveRef.current = () => {
+    const store = storeRef.current
+    if (!store || saving) return
+    const { values } = store.getState()
+    handleSave(values)
+  }
+
+  // Undo/Redo refs for keyboard shortcuts
+  undoRef.current = () => {
+    const store = storeRef.current
+    if (!store) return
+    store.getState().undo()
+  }
+  redoRef.current = () => {
+    const store = storeRef.current
+    if (!store) return
+    store.getState().redo()
+  }
+
+  // Conflict resolution: use local values (retry save with fresh SHA)
+  const resolveConflictLocal = useCallback(async () => {
+    if (!conflict) return
+    setSaving(true)
+    const result = await repository.saveEntry('_sections', sectionKey, {
+      content: conflict.local,
+      sha: conflict.remoteSha,
+    })
+    if (result.ok) {
+      setInitialValues(conflict.local)
+      setSha(result.value.sha)
+      setConflict(null)
+      onSaved(sectionKey)
+      toast('Gespeichert (deine Version übernommen).', 'success')
+    } else {
+      toast('Speichern fehlgeschlagen. Bitte erneut versuchen.', 'error')
+    }
+    setSaving(false)
+  }, [conflict, repository, sectionKey, onSaved, toast])
+
+  // Conflict resolution: use remote values (discard local changes)
+  const resolveConflictRemote = useCallback(() => {
+    if (!conflict) return
+    const store = storeRef.current
+    if (store) {
+      store.getState().init(section.fields, conflict.remote)
+    }
+    setInitialValues(conflict.remote)
+    setSha(conflict.remoteSha)
+    setConflict(null)
+    onDiscard(sectionKey)
+    toast('Remote-Version übernommen.', 'success')
+  }, [conflict, section.fields, sectionKey, onDiscard, toast])
+
+  // Discard handler: reset form + clear server draft + reload preview
+  const handleDiscard = useCallback(() => {
+    const store = storeRef.current
+    if (!store) return
+    store.getState().resetToInitial()
+    onDiscard(sectionKey)
+  }, [sectionKey, onDiscard])
+
+  // Keyboard shortcuts: Cmd+S, Cmd+Z, Cmd+Shift+Z, Escape
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+        e.preventDefault()
+        saveRef.current?.()
+      }
+      if ((e.metaKey || e.ctrlKey) && e.key === 'z' && !e.shiftKey) {
+        e.preventDefault()
+        undoRef.current?.()
+      }
+      if ((e.metaKey || e.ctrlKey) && e.key === 'z' && e.shiftKey) {
+        e.preventDefault()
+        redoRef.current?.()
+      }
+      if (e.key === 'Escape') {
+        onClose()
+      }
+    }
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [onClose])
+
+  return (
+    <div className="sk-pb__slide-over">
+      <div className="sk-pb__slide-over-header">
+        <div className="sk-pb__slide-over-title">
+          {storeState.dirty && (
+            <span className="sk-pb__draft-indicator" title="Ungespeicherte Änderungen">
+              <span className="sk-pb__draft-dot" />
+              Entwurf
+            </span>
+          )}
+        </div>
+        <div className="sk-pb__slide-over-actions">
+          {storeState.dirty && (
+            <button
+              type="button"
+              className="sk-pb__discard-btn"
+              onClick={handleDiscard}
+              title="Änderungen verwerfen"
+            >
+              <Trash2 size={14} />
+            </button>
+          )}
+          <button
+            type="button"
+            className="sk-pb__undo-btn"
+            onClick={() => undoRef.current?.()}
+            disabled={!storeState.canUndo}
+            title="Rückgängig (Cmd+Z)"
+          >
+            <Undo2 size={14} />
+          </button>
+          <button
+            type="button"
+            className="sk-pb__undo-btn"
+            onClick={() => redoRef.current?.()}
+            disabled={!storeState.canRedo}
+            title="Wiederholen (Cmd+Shift+Z)"
+          >
+            <Redo2 size={14} />
+          </button>
+          <button
+            type="button"
+            className="sk-pb__header-save-btn"
+            onClick={() => saveRef.current?.()}
+            disabled={saving || !storeState.dirty}
+            title="Speichern (Cmd+S)"
+          >
+            <Save size={14} />
+          </button>
+          <button type="button" className="sk-pb__collapse-btn" onClick={onCollapse} title="Einklappen">
+            <PanelRightClose size={16} />
+          </button>
+          <button type="button" className="sk-pb__close-btn" onClick={onClose}>
+            <X size={18} />
+          </button>
+        </div>
+      </div>
+      <div className="sk-pb__slide-over-body">
+        {conflict && (
+          <div className="sk-pb__conflict">
+            <div className="sk-pb__conflict-header">
+              <Shield size={16} />
+              <strong>Konflikt</strong> — Die Datei wurde extern geändert.
+            </div>
+            <div className="sk-pb__conflict-diff">
+              {Object.keys({ ...conflict.local, ...conflict.remote })
+                .filter(key => JSON.stringify(conflict.local[key]) !== JSON.stringify(conflict.remote[key]))
+                .map(key => {
+                  const fieldDef = section.fields[key]
+                  const label = fieldDef?.label ?? key
+                  const localVal = JSON.stringify(conflict.local[key], null, 2) ?? '—'
+                  const remoteVal = JSON.stringify(conflict.remote[key], null, 2) ?? '—'
+                  return (
+                    <div key={key} className="sk-pb__conflict-field">
+                      <div className="sk-pb__conflict-label">{label}</div>
+                      <div className="sk-pb__conflict-values">
+                        <div className="sk-pb__conflict-local">
+                          <span className="sk-pb__conflict-tag">Deine Version</span>
+                          <pre>{localVal}</pre>
+                        </div>
+                        <div className="sk-pb__conflict-remote">
+                          <span className="sk-pb__conflict-tag">Remote</span>
+                          <pre>{remoteVal}</pre>
+                        </div>
+                      </div>
+                    </div>
+                  )
+                })}
+            </div>
+            <div className="sk-pb__conflict-actions">
+              <button
+                type="button"
+                className="sk-button sk-button--primary"
+                onClick={resolveConflictLocal}
+                disabled={saving}
+              >
+                Meine Version übernehmen
+              </button>
+              <button
+                type="button"
+                className="sk-button"
+                onClick={resolveConflictRemote}
+              >
+                Remote übernehmen
+              </button>
+            </div>
+          </div>
+        )}
+        {loading ? (
+          <p className="sk-pb__slide-over-loading">Lade...</p>
+        ) : (
+          <EntryForm
+            schema={section.fields}
+            initialValues={initialValues}
+            draftValues={cachedValues}
+            onSave={handleSave}
+            storeRef={storeRef}
+          />
+        )}
+      </div>
+    </div>
+  )
+}