Visual Editor

Die Peacock Admin-SPA ist ein dreigeteiltes Layout: Sidebar (Story-Baum / Asset-Library / AI-Audit), Main (Block-Editor), Preview (Live-Iframe).

Layout

┌────────────┬────────────────────┬────────────┐
│  Sidebar   │   Main             │  Preview   │
│            │                    │            │
│  • Tree    │   • Block Editor   │  • Iframe  │
│  • Assets  │   • AI Buttons     │  • bridge  │
│  • Audit   │   • Save / Publish │            │
└────────────┴────────────────────┴────────────┘

Die Sidebar-Tabs (Stories / Assets / AI Audit) wechseln, was im Main-Pane gerendert wird. Die Preview-Iframe ist nur im Stories-Modus aktiv.

Block-Editor: Form vs. JSON

Defaultmodus: Form. Nicht-technische Editoren landen auf einer schema-abgeleiteten Maske. Jedes Feld wird zum passenden HTML-Control:

Feld-Typ (laufzeit-inferred)	Control
String < 80 Zeichen	<input type="text">
String mit Newline oder ≥ 80	<textarea rows=3>
Number	<input type="number">
Boolean	<input type="checkbox">
Object	rekursive Sub-Section, eingebettet, gerahmt
Array of objects	reorderbare Block-Liste (siehe unten)
Array of scalars	comma-separated <input>

Der JSON-Tab bleibt als Escape-Hatch: jedes Shape, das die Form-Heuristiken nicht ausdrücken können, editierst du direkt im Textarea. Beide Modi teilen sich denselben State — du springst beliebig hin und her.

Block-Liste

Ein Array von Objekten mit _component rendert als reorderbare Karte-Liste:

┌─────────────────────────────────────┐
│  ☰  HERO          ↑ ↓ ✕             │
│  ┌─ headline: "Willkommen"          │
│  ├─ lead:     "Lorem ipsum..."      │
│  └─ cta_url:  "/contact"            │
└─────────────────────────────────────┘
┌─────────────────────────────────────┐
│  ☰  FAQ           ↑ ↓ ✕             │
│  └─ items: [3 Einträge]             │
└─────────────────────────────────────┘
+ Add block

Reordering

Drei gleichwertige Wege:

1. Drag-and-Drop via dnd-kit am ☰-Handle. Aktivierungsdistanz: 5px (damit Form-Klicks nicht versehentlich Drags starten).
2. Tastatur: Tab auf ☰ → Leertaste zum Aufheben → Pfeiltasten zum Verschieben → Leertaste zum Ablegen. Vollständig keyboard-zugänglich.
3. ↑/↓-Buttons als sichtbare Fallback-Controls — manche Editoren ziehen das einer Geste vor.

Add block

Der + Add block-Button öffnet einen Picker, der die Blueprint-Library nach group sortiert anzeigt:

Content                  Lists                 Conversion
[Hero] [RichText]        [Gallery]             [CTA] [Pricing]
[TextImage] [Quote]      [FAQ]

Klick fügt einen Stub {_component: "hero"} ans Ende ein — der Editor füllt die Felder, Schema-Required-Errors zeigt das Backend beim Save.

AI-Assist-Buttons

Über dem Editor sind drei Buttons:

• Translate headline → en-GB: schickt das headline-Feld an die AI-Translate-Action, mergt das Ergebnis zurück.
• Generate SEO meta: erzeugt meta.title + meta.description aus dem aktuellen Story-Content.
• Suggest internal links: zeigt 3-5 Story-Pfade aus dem Space, die thematisch passen.

Im review-Mode landet die Mutation als pending im AI-Audit-Log und muss approved werden. Im auto-Modus läuft sie direkt durch; im read_only werden die Buttons ausgeblendet.

Live Preview

Die rechte Spalte rendert die echte Frontend-Site im Iframe (VITE_PEACOCK_PREVIEW_BASE_URL). Jeder Keystroke schickt den aktuellen Content via postMessage an die Iframe — keine Save-Operation, kein API-Roundtrip, kein Debounce.

Klick auf einen Block in der Preview hebt die entsprechende Karte im Editor hervor (postMessage-Bridge mit JSON-Pointer-Paths). Damit das funktioniert, muss die Frontend-Site das @peacock/sdk-astro/preview-Modul laden — siehe Astro-Integration.

Save / Publish / Diff / Restore

• Save as new version — schreibt eine neue StoryVersion-Zeile, Pointer auf "published" bleibt unberührt.
• Publish latest — flippt published_version_id auf die letzte gespeicherte Version. Triggert story.published-Webhook.
• View diff — Modal mit From/To-Version-Pickern. Farb-codierte added/removed/changed-Liste pro Top-Level-Key.
• Restore from vN (im Diff-Modal) — erzeugt eine neue Version mit dem alten Content + Message "Restored from vN".

Locale-Switcher

Im Topbar gibt's einen Dropdown mit allen Locales des Space. Switching:

1. Lädt die Story-Liste in der Sidebar in der gewählten Locale neu (?lang=de-AT).
2. Holt den selektierten Story-Content in der gewählten Locale.
3. Persistiert den Zustand in zustand-Auth-Store (überlebt Reload).

Tastatur-Shortcuts

Tastenkombination	Aktion
Cmd/Ctrl+S	Save as new version
Cmd/Ctrl+Shift+P	Publish latest
Cmd/Ctrl+/	Toggle Form/JSON Modus
Tab auf ☰ → Space → arrows → Space	Block via Tastatur verschieben

(Cmd/Ctrl-Shortcuts sind Phase-9 — heute nutzt der Editor nur ☰+Space/arrows für Block-Movement.)