From 8242dab18c15abacc9700c3206bf75934bf19f5c Mon Sep 17 00:00:00 2001
From: admin <tim.leikauf@gmail.com>
Date: Mon, 25 May 2026 17:28:16 +0200
Subject: [PATCH] feat: unified ContentCreation tool (Object + Statement
 creation merged)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- New ContentCreation.jsx: 3-column layout
  Left: object list + "＋ Objekt hinzufügen" button
  Center: dual-mode canvas (draw OR highlight)
  Right: ObjectAddPanel (mode=add) or PairsPanel (mode=objectId)
- After saving object → auto-switches to PairsPanel for that object
- All ObjectCreation + StatementCreation logic merged into one page
- All pictures loaded (no objects_created filter)
- "Objekte abgeschlossen" button marks picture (visual badge)
- ContentHub: 2 tiles (Content Erstellen + Veröffentlichen placeholder)
- App.jsx: /content/creation route, old /content/objects + /content/statements removed

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/App.jsx                   |    6 +-
 src/pages/ContentCreation.jsx | 1162 +++++++++++++++++++++++++++++++++
 src/pages/ContentHub.jsx      |   34 +-
 3 files changed, 1177 insertions(+), 25 deletions(-)
 create mode 100644 src/pages/ContentCreation.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 5817c6e..c6d0669 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,8 +5,7 @@ import Dashboard from './pages/Dashboard';
 import DatabaseAdmin from './pages/DatabaseAdmin';
 import TableView from './pages/TableView';
 import ContentHub from './pages/ContentHub';
-import ObjectCreation from './pages/ObjectCreation';
-import StatementCreation from './pages/StatementCreation';
+import ContentCreation from './pages/ContentCreation';
 
 function RequireAuth({ children }) {
   const user = getUser();
@@ -23,8 +22,7 @@ export default function App() {
         <Route path="/db" element={<RequireAuth><DatabaseAdmin /></RequireAuth>} />
         <Route path="/db/:tableKey" element={<RequireAuth><TableView /></RequireAuth>} />
         <Route path="/content" element={<RequireAuth><ContentHub /></RequireAuth>} />
-        <Route path="/content/objects" element={<RequireAuth><ObjectCreation /></RequireAuth>} />
-        <Route path="/content/statements" element={<RequireAuth><StatementCreation /></RequireAuth>} />
+        <Route path="/content/creation" element={<RequireAuth><ContentCreation /></RequireAuth>} />
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>
     </BrowserRouter>
diff --git a/src/pages/ContentCreation.jsx b/src/pages/ContentCreation.jsx
new file mode 100644
index 0000000..c7f0b38
--- /dev/null
+++ b/src/pages/ContentCreation.jsx
@@ -0,0 +1,1162 @@
+import { useEffect, useState, useRef, useCallback, useMemo } from 'react';
+import Layout from '../components/Layout';
+import { apiFetch, apiPost, apiPatch, apiLink, apiUnlink, getUserLang } from '../lib/api';
+import { STATUS_COLORS } from '../lib/tables';
+
+// ─── Word / placeholder helpers ───────────────────────────────────────────────
+
+function tokenize(text, wordMap) {
+  const titles = Object.keys(wordMap);
+  if (!titles.length || !text) return [{ text }];
+  const escaped = titles.sort((a, b) => b.length - a.length)
+    .map(t => t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+  const re = new RegExp(`(${escaped.join('|')})`, 'gi');
+  return text.split(re).filter(s => s !== '').map(part => ({
+    text: part,
+    word: wordMap[part.toLowerCase()] || null,
+  }));
+}
+
+function withPlaceholders(text, wordMap, objectAssignments = {}) {
+  if (!text) return '';
+  let result = text;
+  Object.entries(wordMap).sort((a, b) => b[0].length - a[0].length).forEach(([title, w]) => {
+    const re = new RegExp(`\\b${title.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\b`, 'gi');
+    result = result.replace(re, `{{${objectAssignments[w.id] || w.id}}}`);
+  });
+  return result;
+}
+
+async function resolvePlaceholders(text, allObjects) {
+  if (!text) return '';
+  const matches = [...text.matchAll(/\{\{([^}]+)\}\}/g)];
+  if (!matches.length) return text;
+  const uuids = [...new Set(matches.map(m => m[1]))];
+  const idMap = {};
+  allObjects.forEach(obj => {
+    if (uuids.includes(obj.id)) {
+      const label = (obj._words || []).slice(0, 2).map(w => w.titel_de).filter(Boolean).join('/') || 'Objekt';
+      idMap[obj.id] = label;
+    }
+  });
+  await Promise.all(uuids.filter(id => !idMap[id]).map(async id => {
+    try { const w = await apiFetch(`/words/${id}`); if (w) idMap[id] = w.titel_de || w.titel_en || id; }
+    catch { idMap[id] = id; }
+  }));
+  return text.replace(/\{\{([^}]+)\}\}/g, (_, id) => idMap[id] || id);
+}
+
+// ─── HighlightedTextarea ──────────────────────────────────────────────────────
+
+function HighlightedTextarea({ value, onChange, wordMap, rows = 2, placeholder, onSelectionChange }) {
+  const taRef = useRef(null);
+  const tokens = useMemo(() => tokenize(value, wordMap), [value, wordMap]);
+  function handleSelect() {
+    const ta = taRef.current; if (!ta) return;
+    onSelectionChange?.(ta.value.slice(ta.selectionStart, ta.selectionEnd).trim());
+  }
+  return (
+    <div className="relative rounded-lg border border-slate-300 focus-within:ring-2 focus-within:ring-indigo-400 overflow-hidden">
+      <div aria-hidden className="absolute inset-0 px-3 py-2 text-sm leading-normal whitespace-pre-wrap break-words pointer-events-none overflow-hidden" style={{ color: 'transparent', fontFamily: 'inherit' }}>
+        {tokens.map((tok, i) => tok.word
+          ? <mark key={i} style={{ background: 'rgba(99,102,241,0.22)', borderRadius: 3 }}>{tok.text}</mark>
+          : <span key={i}>{tok.text}</span>)}
+        {'\n'}
+      </div>
+      <textarea ref={taRef} value={value} onChange={e => onChange(e.target.value)}
+        onSelect={handleSelect} onKeyUp={handleSelect} onMouseUp={handleSelect}
+        rows={rows} placeholder={placeholder}
+        className="relative w-full px-3 py-2 text-sm leading-normal bg-transparent resize-none focus:outline-none"
+        style={{ caretColor: '#1e293b', fontFamily: 'inherit' }} />
+    </div>
+  );
+}
+
+// ─── WordSearch ───────────────────────────────────────────────────────────────
+
+function WordSearch({ existingIds = [], onAdd, placeholder = 'Wort suchen…' }) {
+  const lang = getUserLang();
+  const [q, setQ] = useState('');
+  const [results, setResults] = useState([]);
+  const [open, setOpen] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!q.trim()) { setResults([]); return; }
+    const t = setTimeout(async () => {
+      try {
+        const data = await apiFetch(`/words?search=${encodeURIComponent(q.trim())}&limit=10`);
+        setResults(Array.isArray(data) ? data.filter(w => !existingIds.includes(w.id)) : []);
+      } catch {}
+    }, 300);
+    return () => clearTimeout(t);
+  }, [q, existingIds]);
+  useEffect(() => {
+    function out(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
+    document.addEventListener('mousedown', out);
+    return () => document.removeEventListener('mousedown', out);
+  }, []);
+  async function handleCreate() {
+    setCreating(true);
+    try {
+      const w = await apiPost('/words', { [`titel_${lang}`]: q.trim() });
+      onAdd(w); setQ(''); setResults([]); setOpen(false);
+    } catch (e) { alert('Fehler: ' + e.message); }
+    finally { setCreating(false); }
+  }
+  return (
+    <div ref={ref} className="relative">
+      <input type="text" value={q} onChange={e => { setQ(e.target.value); setOpen(true); }} onFocus={() => setOpen(true)}
+        placeholder={placeholder}
+        className="w-full border border-slate-300 rounded-lg px-2.5 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-indigo-400 bg-white" />
+      {open && q.trim() && (
+        <div className="absolute z-30 left-0 right-0 mt-1 bg-white border border-slate-200 rounded-lg shadow-lg overflow-hidden max-h-36 overflow-y-auto">
+          {results.map(w => (
+            <button key={w.id} onMouseDown={e => e.preventDefault()}
+              onClick={() => { onAdd(w); setQ(''); setResults([]); setOpen(false); }}
+              className="w-full text-left px-3 py-1.5 text-xs hover:bg-indigo-50 hover:text-indigo-700 border-b border-slate-100 last:border-0">
+              {w.titel_de || w.id}{w.titel_en && <span className="text-slate-400 ml-1">({w.titel_en})</span>}
+            </button>
+          ))}
+          {results.length === 0 && (
+            <button onMouseDown={e => e.preventDefault()} onClick={handleCreate} disabled={creating}
+              className="w-full text-left px-3 py-1.5 text-xs text-indigo-600 hover:bg-indigo-50 font-medium">
+              {creating ? 'Erstelle…' : `+ „${q.trim()}" neu erstellen`}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function WordTag({ word, onRemove }) {
+  return (
+    <span className="inline-flex items-center gap-1 text-xs bg-indigo-50 text-indigo-700 rounded-full pl-2 pr-1 py-0.5 font-medium">
+      {word.titel_de || word.id}
+      {onRemove && (
+        <button onClick={() => onRemove(word.id)} className="text-indigo-300 hover:text-red-500 rounded-full w-3.5 h-3.5 flex items-center justify-center">×</button>
+      )}
+    </span>
+  );
+}
+
+// ─── PairForm ─────────────────────────────────────────────────────────────────
+
+const PAIR_TYPES = [
+  { value: 'text',     label: 'Text',      hint: 'Nur positives Statement' },
+  { value: 'yes_no',   label: 'Ja / Nein', hint: 'Frage + Ja/Nein Antwort' },
+  { value: 'question', label: 'Frage',     hint: 'Frage + Positiv + Negativ' },
+  { value: 'word',     label: 'Wort',      hint: 'Frage + Positive/Negative Wörter' },
+];
+
+function PairForm({ objectId, allObjects, onPairSaved }) {
+  const lang = getUserLang();
+  const [showForm, setShowForm] = useState(false);
+  const [savedFlash, setSavedFlash] = useState(false);
+  const [type, setType] = useState('');
+  const [question, setQuestion] = useState('');
+  const [positive, setPositive] = useState('');
+  const [negative, setNegative] = useState('');
+  const [wordMap, setWordMap] = useState({});
+  const [objectAssignments, setObjectAssignments] = useState({});
+  const [selection, setSelection] = useState('');
+  const [creatingWord, setCreatingWord] = useState(false);
+  const [yesNoAnswer, setYesNoAnswer] = useState(null);
+  const [positiveWords, setPositiveWords] = useState([]);
+  const [negativeWords, setNegativeWords] = useState([]);
+  const [saving, setSaving] = useState(false);
+
+  const allText = `${question} ${positive} ${negative}`;
+  useEffect(() => {
+    if (!allText.trim()) { setWordMap({}); return; }
+    const t = setTimeout(async () => {
+      const tokens = [...new Set(allText.split(/[\s.,!?;:()\[\]"']+/).filter(w => w.length >= 2))];
+      if (!tokens.length) return;
+      const results = await Promise.allSettled(
+        tokens.map(w => apiFetch(`/words?titel_${lang}=${encodeURIComponent(w)}&limit=1`)
+          .then(d => Array.isArray(d) && d.length ? { key: w.toLowerCase(), word: d[0] } : null))
+      );
+      const map = {};
+      results.forEach(r => { if (r.status === 'fulfilled' && r.value) map[r.value.key] = r.value.word; });
+      setWordMap(map);
+    }, 600);
+    return () => clearTimeout(t);
+  }, [allText, lang]);
+
+  async function handleCreateWord() {
+    if (!selection.trim()) return;
+    setCreatingWord(true);
+    try {
+      const w = await apiPost('/words', { [`titel_${lang}`]: selection.trim() });
+      setWordMap(prev => ({ ...prev, [selection.trim().toLowerCase()]: w }));
+    } catch (e) { alert('Fehler: ' + e.message); }
+    finally { setCreatingWord(false); }
+  }
+
+  function canSave() {
+    if (!type) return false;
+    if (type === 'text')     return positive.trim().length > 0;
+    if (type === 'yes_no')   return true;
+    if (type === 'question') return question.trim().length > 0 && positive.trim().length > 0;
+    if (type === 'word')     return positiveWords.length > 0 || negativeWords.length > 0;
+    return false;
+  }
+
+  function validationHint() {
+    if (!type) return 'Bitte einen Typ wählen.';
+    if (type === 'text'     && !positive.trim())  return 'Statement ist Pflicht.';
+    if (type === 'question' && !question.trim())  return 'Frage ist Pflicht.';
+    if (type === 'question' && !positive.trim())  return 'Positive Aussage ist Pflicht.';
+    if (type === 'word' && !positiveWords.length && !negativeWords.length) return 'Mindestens ein Wort erforderlich.';
+    return '';
+  }
+
+  async function handleSave() {
+    if (!canSave()) return;
+    setSaving(true);
+    try {
+      const ph = t => withPlaceholders(t, wordMap, objectAssignments);
+      let questionId = null;
+      if (type !== 'text' && question.trim()) {
+        const q = await apiPost('/questions', { [`sentence_${lang}`]: ph(question), status: 'draft' });
+        questionId = q.id;
+      }
+      let posStmtId = null;
+      if (type === 'text' || type === 'question') {
+        const s = await apiPost('/statements', { status: 'draft', [`positive_sentence_${lang}`]: ph(positive) });
+        posStmtId = s.id;
+      } else if (type === 'yes_no') {
+        const body = { status: 'draft' }; if (yesNoAnswer !== null) body.answer = yesNoAnswer;
+        const s = await apiPost('/statements', body); posStmtId = s.id;
+      } else if (type === 'word' && positiveWords.length) {
+        const s = await apiPost('/statements', { status: 'draft' }); posStmtId = s.id;
+        await Promise.all(positiveWords.map(w => apiLink(`/statements/${posStmtId}/positive-words/${w.id}`)));
+      }
+      let negStmtId = null;
+      if (type === 'question' && negative.trim()) {
+        const s = await apiPost('/statements', { status: 'draft', [`negative_sentence_${lang}`]: ph(negative) });
+        negStmtId = s.id;
+      } else if (type === 'word' && negativeWords.length) {
+        const s = await apiPost('/statements', { status: 'draft' }); negStmtId = s.id;
+        await Promise.all(negativeWords.map(w => apiLink(`/statements/${negStmtId}/negative-words/${w.id}`)));
+      }
+      const pair = await apiPost('/pairs', {
+        answer_type: type, question_id: questionId,
+        positive_statement_id: posStmtId, negative_statement_id: negStmtId, status: 'draft',
+      });
+      await apiLink(`/objects/${objectId}/pairs/${pair.id}`);
+      setType(''); setYesNoAnswer(null);
+      setSavedFlash(true); setTimeout(() => setSavedFlash(false), 2000);
+      onPairSaved(pair);
+    } catch (e) { alert('Fehler: ' + e.message); }
+    finally { setSaving(false); }
+  }
+
+  return (
+    <div className="space-y-2">
+      <button onClick={() => setShowForm(s => !s)}
+        className="w-full py-1.5 text-xs font-medium rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white transition-colors">
+        {showForm ? '✕ Abbrechen' : '+ Pair hinzufügen'}
+      </button>
+      {showForm && (
+        <div className="border border-indigo-100 rounded-xl p-3 bg-indigo-50/30 space-y-3">
+          {savedFlash && <div className="text-xs text-green-700 bg-green-50 border border-green-200 rounded-lg px-3 py-1.5 font-medium">✓ Pair gespeichert — Texte übernommen</div>}
+          <div>
+            <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1">Typ</label>
+            <select value={type} onChange={e => setType(e.target.value)}
+              className="w-full border border-slate-300 rounded-lg px-2.5 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-indigo-400 bg-white">
+              <option value="">— Typ wählen —</option>
+              {PAIR_TYPES.map(opt => <option key={opt.value} value={opt.value}>{opt.label} — {opt.hint}</option>)}
+            </select>
+          </div>
+          {type && (
+            <div className="space-y-2.5 pt-1 border-t border-indigo-100">
+              {selection && (
+                <div className="flex items-center gap-2 bg-white border border-indigo-200 rounded-lg px-2.5 py-1.5">
+                  <span className="text-xs text-slate-600 flex-1 truncate">„<strong className="text-indigo-700">{selection}</strong>"</span>
+                  <button onClick={handleCreateWord} disabled={creatingWord}
+                    className="text-xs bg-indigo-600 hover:bg-indigo-700 text-white px-2 py-0.5 rounded font-medium disabled:opacity-50 whitespace-nowrap">
+                    {creatingWord ? '…' : 'Als Wort erstellen'}
+                  </button>
+                </div>
+              )}
+              {type === 'text' && (
+                <div>
+                  <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1">Statement <span className="text-red-400">*</span></label>
+                  <HighlightedTextarea value={positive} onChange={setPositive} wordMap={wordMap} rows={2} placeholder="Das ist ein Hund." onSelectionChange={setSelection} />
+                </div>
+              )}
+              {type === 'yes_no' && (<>
+                <div>
+                  <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1">Frage <span className="text-slate-400 font-normal normal-case">(optional)</span></label>
+                  <HighlightedTextarea value={question} onChange={setQuestion} wordMap={wordMap} rows={2} placeholder="Ist das ein Hund?" onSelectionChange={setSelection} />
+                </div>
+                <div>
+                  <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">Antwort</p>
+                  <div className="flex gap-2">
+                    {[[null,'— Offen','bg-slate-100 text-slate-600 border-slate-200'],[true,'✓ Ja','bg-green-50 text-green-700 border-green-300'],[false,'✗ Nein','bg-red-50 text-red-600 border-red-300']].map(([val, label, cls]) => (
+                      <button key={String(val)} onClick={() => setYesNoAnswer(val)}
+                        className={`flex-1 py-1.5 text-xs font-medium rounded-lg border transition-all ${yesNoAnswer === val ? `${cls} ring-2 ring-offset-1 ring-indigo-400` : 'bg-white text-slate-500 border-slate-200 hover:border-slate-300'}`}>
+                        {label}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              </>)}
+              {type === 'question' && (<>
+                <div>
+                  <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1">Frage <span className="text-red-400">*</span></label>
+                  <HighlightedTextarea value={question} onChange={setQuestion} wordMap={wordMap} rows={2} placeholder="Was ist das?" onSelectionChange={setSelection} />
+                </div>
+                <div>
+                  <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1">Positive Aussage <span className="text-red-400">*</span></label>
+                  <HighlightedTextarea value={positive} onChange={setPositive} wordMap={wordMap} rows={2} placeholder="Das ist ein Hund." onSelectionChange={setSelection} />
+                </div>
+                <div>
+                  <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1">Negative Aussage <span className="text-slate-400 font-normal normal-case">(optional)</span></label>
+                  <HighlightedTextarea value={negative} onChange={setNegative} wordMap={wordMap} rows={2} placeholder="Das ist keine Katze." onSelectionChange={setSelection} />
+                </div>
+              </>)}
+              {type === 'word' && (<>
+                <div>
+                  <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1">Frage <span className="text-slate-400 font-normal normal-case">(optional)</span></label>
+                  <HighlightedTextarea value={question} onChange={setQuestion} wordMap={wordMap} rows={2} placeholder="Was ist das?" onSelectionChange={setSelection} />
+                </div>
+                <div>
+                  <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">Positive Wörter</p>
+                  <div className="flex flex-wrap gap-1 mb-1.5">{positiveWords.map(w => <WordTag key={w.id} word={w} onRemove={id => setPositiveWords(prev => prev.filter(x => x.id !== id))} />)}</div>
+                  <WordSearch existingIds={positiveWords.map(w => w.id)} onAdd={w => setPositiveWords(prev => prev.some(x => x.id === w.id) ? prev : [...prev, w])} placeholder="Positives Wort suchen…" />
+                </div>
+                <div>
+                  <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">Negative Wörter</p>
+                  <div className="flex flex-wrap gap-1 mb-1.5">{negativeWords.map(w => <WordTag key={w.id} word={w} onRemove={id => setNegativeWords(prev => prev.filter(x => x.id !== id))} />)}</div>
+                  <WordSearch existingIds={negativeWords.map(w => w.id)} onAdd={w => setNegativeWords(prev => prev.some(x => x.id === w.id) ? prev : [...prev, w])} placeholder="Negatives Wort suchen…" />
+                </div>
+              </>)}
+              {Object.keys(wordMap).length > 0 && (
+                <div className="space-y-1.5 pt-1">
+                  <span className="text-xs font-semibold text-slate-400 uppercase tracking-wide">Erkannte Wörter</span>
+                  {Object.entries(wordMap).map(([title, w]) => {
+                    const matchingObjs = allObjects.filter(o => o._words?.some(ow => ow.id === w.id));
+                    const assigned = objectAssignments[w.id] || '';
+                    return (
+                      <div key={w.id} className="flex items-center gap-2">
+                        <span className="text-xs bg-indigo-100 text-indigo-700 rounded px-2 py-0.5 font-medium shrink-0">{title}</span>
+                        {matchingObjs.length > 0 ? (
+                          <select value={assigned} onChange={e => setObjectAssignments(prev => ({ ...prev, [w.id]: e.target.value || null }))}
+                            className={`flex-1 text-xs border rounded px-1.5 py-0.5 bg-white focus:outline-none focus:ring-1 focus:ring-indigo-400 ${assigned ? 'border-indigo-400 text-indigo-700 bg-indigo-50' : 'border-slate-200 text-slate-500'}`}>
+                            <option value="">— nur Wort ({{wordId}})</option>
+                            {matchingObjs.map(obj => {
+                              const idx = allObjects.indexOf(obj);
+                              const labels = (obj._words || []).slice(0, 3).map(ow => ow.titel_de || ow.id).join(', ');
+                              return <option key={obj.id} value={obj.id}>Objekt #{idx + 1}{labels ? ` — ${labels}` : ''}</option>;
+                            })}
+                          </select>
+                        ) : (
+                          <span className="text-xs text-slate-300 italic">kein Objekt im Bild</span>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          )}
+          <div className="pt-2 border-t border-indigo-100 space-y-1.5">
+            {type && !canSave() && <p className="text-xs text-amber-600">{validationHint()}</p>}
+            <button onClick={handleSave} disabled={saving || !canSave()}
+              className="w-full py-2 text-xs font-medium rounded-lg bg-green-600 hover:bg-green-700 disabled:opacity-40 text-white transition-colors">
+              {saving ? 'Speichern…' : '✓ Pair speichern'}
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── EditPairForm ─────────────────────────────────────────────────────────────
+
+function EditPairForm({ pair, allObjects, onSaved, onCancel }) {
+  const lang = getUserLang();
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [type, setType] = useState(pair.answer_type || '');
+  const [question, setQuestion] = useState('');
+  const [positive, setPositive] = useState('');
+  const [negative, setNegative] = useState('');
+  const [yesNoAnswer, setYesNoAnswer] = useState(null);
+  const [positiveWords, setPositiveWords] = useState([]);
+  const [negativeWords, setNegativeWords] = useState([]);
+  const [wordMap, setWordMap] = useState({});
+  const [objectAssignments, setObjectAssignments] = useState({});
+  const [selection, setSelection] = useState('');
+  const [creatingWord, setCreatingWord] = useState(false);
+
+  useEffect(() => {
+    async function load() {
+      try {
+        if (pair.question_id) {
+          const q = await apiFetch(`/questions/${pair.question_id}`);
+          setQuestion(await resolvePlaceholders(q[`sentence_${lang}`] || q.sentence_de || '', allObjects));
+        }
+        if (pair.positive_statement_id) {
+          const s = await apiFetch(`/statements/${pair.positive_statement_id}`);
+          const raw = s[`positive_sentence_${lang}`] || s.positive_sentence_de || '';
+          if (raw) setPositive(await resolvePlaceholders(raw, allObjects));
+          if (s.answer !== null && s.answer !== undefined) setYesNoAnswer(s.answer);
+          if (s.positive_word_ids?.length) {
+            const words = await Promise.all(s.positive_word_ids.map(id => apiFetch(`/words/${id}`).catch(() => null)));
+            setPositiveWords(words.filter(Boolean));
+          }
+        }
+        if (pair.negative_statement_id) {
+          const s = await apiFetch(`/statements/${pair.negative_statement_id}`);
+          const raw = s[`negative_sentence_${lang}`] || s.negative_sentence_de || '';
+          if (raw) setNegative(await resolvePlaceholders(raw, allObjects));
+          if (s.negative_word_ids?.length) {
+            const words = await Promise.all(s.negative_word_ids.map(id => apiFetch(`/words/${id}`).catch(() => null)));
+            setNegativeWords(words.filter(Boolean));
+          }
+        }
+      } catch (e) { console.error(e); }
+      finally { setLoading(false); }
+    }
+    load();
+  }, [pair.id]);
+
+  const allText = `${question} ${positive} ${negative}`;
+  useEffect(() => {
+    if (!allText.trim()) { setWordMap({}); return; }
+    const t = setTimeout(async () => {
+      const tokens = [...new Set(allText.split(/[\s.,!?;:()\[\]"']+/).filter(w => w.length >= 2))];
+      if (!tokens.length) return;
+      const results = await Promise.allSettled(
+        tokens.map(w => apiFetch(`/words?titel_${lang}=${encodeURIComponent(w)}&limit=1`)
+          .then(d => Array.isArray(d) && d.length ? { key: w.toLowerCase(), word: d[0] } : null))
+      );
+      const map = {};
+      results.forEach(r => { if (r.status === 'fulfilled' && r.value) map[r.value.key] = r.value.word; });
+      setWordMap(map);
+    }, 600);
+    return () => clearTimeout(t);
+  }, [allText, lang]);
+
+  async function handleCreateWord() {
+    if (!selection.trim()) return;
+    setCreatingWord(true);
+    try {
+      const w = await apiPost('/words', { [`titel_${lang}`]: selection.trim() });
+      setWordMap(prev => ({ ...prev, [selection.trim().toLowerCase()]: w }));
+    } catch (e) { alert('Fehler: ' + e.message); }
+    finally { setCreatingWord(false); }
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    try {
+      const ph = t => withPlaceholders(t, wordMap, objectAssignments);
+      let patchPair = {};
+      if (pair.question_id) {
+        if (question.trim()) await apiPatch('/questions', pair.question_id, { [`sentence_${lang}`]: ph(question) });
+      } else if (question.trim() && type !== 'text') {
+        const q = await apiPost('/questions', { [`sentence_${lang}`]: ph(question), status: 'draft' });
+        patchPair.question_id = q.id;
+      }
+      if (pair.positive_statement_id) {
+        const posBody = {};
+        if (type === 'text' || type === 'question') posBody[`positive_sentence_${lang}`] = ph(positive);
+        if (type === 'yes_no') posBody.answer = yesNoAnswer;
+        if (Object.keys(posBody).length) await apiPatch('/statements', pair.positive_statement_id, posBody);
+        if (type === 'word') {
+          const cur = await apiFetch(`/statements/${pair.positive_statement_id}`);
+          const curIds = new Set(cur.positive_word_ids || []);
+          const newIds = new Set(positiveWords.map(w => w.id));
+          await Promise.all([...curIds].filter(id => !newIds.has(id)).map(id => apiUnlink(`/statements/${pair.positive_statement_id}/positive-words/${id}`)));
+          await Promise.all([...newIds].filter(id => !curIds.has(id)).map(id => apiLink(`/statements/${pair.positive_statement_id}/positive-words/${id}`)));
+        }
+      } else if ((type === 'text' || type === 'question') && positive.trim()) {
+        const s = await apiPost('/statements', { status: 'draft', [`positive_sentence_${lang}`]: ph(positive) });
+        patchPair.positive_statement_id = s.id;
+      } else if (type === 'yes_no') {
+        const s = await apiPost('/statements', { status: 'draft', answer: yesNoAnswer });
+        patchPair.positive_statement_id = s.id;
+      } else if (type === 'word' && positiveWords.length) {
+        const s = await apiPost('/statements', { status: 'draft' });
+        await Promise.all(positiveWords.map(w => apiLink(`/statements/${s.id}/positive-words/${w.id}`)));
+        patchPair.positive_statement_id = s.id;
+      }
+      if (pair.negative_statement_id) {
+        if (type === 'question' && negative.trim()) await apiPatch('/statements', pair.negative_statement_id, { [`negative_sentence_${lang}`]: ph(negative) });
+        if (type === 'word') {
+          const cur = await apiFetch(`/statements/${pair.negative_statement_id}`);
+          const curIds = new Set(cur.negative_word_ids || []);
+          const newIds = new Set(negativeWords.map(w => w.id));
+          await Promise.all([...curIds].filter(id => !newIds.has(id)).map(id => apiUnlink(`/statements/${pair.negative_statement_id}/negative-words/${id}`)));
+          await Promise.all([...newIds].filter(id => !curIds.has(id)).map(id => apiLink(`/statements/${pair.negative_statement_id}/negative-words/${id}`)));
+        }
+      } else if (type === 'question' && negative.trim()) {
+        const s = await apiPost('/statements', { status: 'draft', [`negative_sentence_${lang}`]: ph(negative) });
+        patchPair.negative_statement_id = s.id;
+      } else if (type === 'word' && negativeWords.length) {
+        const s = await apiPost('/statements', { status: 'draft' });
+        await Promise.all(negativeWords.map(w => apiLink(`/statements/${s.id}/negative-words/${w.id}`)));
+        patchPair.negative_statement_id = s.id;
+      }
+      if (pair.answer_type !== type) patchPair.answer_type = type;
+      if (Object.keys(patchPair).length) await apiPatch('/pairs', pair.id, patchPair);
+      onSaved();
+    } catch (e) { alert('Fehler: ' + e.message); }
+    finally { setSaving(false); }
+  }
+
+  if (loading) return (
+    <div className="space-y-2 p-1 animate-pulse">{[1,2,3].map(i => <div key={i} className="h-8 bg-amber-100 rounded" />)}</div>
+  );
+
+  return (
+    <div className="border border-amber-200 rounded-xl p-3 bg-amber-50/20 space-y-3">
+      <div>
+        <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1">Typ</label>
+        <select value={type} onChange={e => setType(e.target.value)}
+          className="w-full border border-slate-300 rounded-lg px-2.5 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-amber-400 bg-white">
+          {PAIR_TYPES.map(opt => <option key={opt.value} value={opt.value}>{opt.label} — {opt.hint}</option>)}
+        </select>
+      </div>
+      <div className="space-y-2.5 pt-1 border-t border-amber-100">
+        {selection && (
+          <div className="flex items-center gap-2 bg-white border border-amber-200 rounded-lg px-2.5 py-1.5">
+            <span className="text-xs text-slate-600 flex-1 truncate">„<strong className="text-amber-700">{selection}</strong>"</span>
+            <button onClick={handleCreateWord} disabled={creatingWord}
+              className="text-xs bg-amber-600 hover:bg-amber-700 text-white px-2 py-0.5 rounded font-medium disabled:opacity-50 whitespace-nowrap">
+              {creatingWord ? '…' : 'Als Wort erstellen'}
+            </button>
+          </div>
+        )}
+        {type === 'text' && (
+          <div>
+            <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1">Statement <span className="text-red-400">*</span></label>
+            <HighlightedTextarea value={positive} onChange={setPositive} wordMap={wordMap} rows={2} placeholder="Das ist ein Hund." onSelectionChange={setSelection} />
+          </div>
+        )}
+        {type === 'yes_no' && (<>
+          <div>
+            <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1">Frage <span className="text-slate-400 font-normal normal-case">(optional)</span></label>
+            <HighlightedTextarea value={question} onChange={setQuestion} wordMap={wordMap} rows={2} placeholder="Ist das ein Hund?" onSelectionChange={setSelection} />
+          </div>
+          <div>
+            <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">Antwort</p>
+            <div className="flex gap-2">
+              {[[null,'— Offen','bg-slate-100 text-slate-600 border-slate-200'],[true,'✓ Ja','bg-green-50 text-green-700 border-green-300'],[false,'✗ Nein','bg-red-50 text-red-600 border-red-300']].map(([val, label, cls]) => (
+                <button key={String(val)} onClick={() => setYesNoAnswer(val)}
+                  className={`flex-1 py-1.5 text-xs font-medium rounded-lg border transition-all ${yesNoAnswer === val ? `${cls} ring-2 ring-offset-1 ring-amber-400` : 'bg-white text-slate-500 border-slate-200 hover:border-slate-300'}`}>
+                  {label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </>)}
+        {type === 'question' && (<>
+          <div>
+            <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1">Frage <span className="text-red-400">*</span></label>
+            <HighlightedTextarea value={question} onChange={setQuestion} wordMap={wordMap} rows={2} placeholder="Was ist das?" onSelectionChange={setSelection} />
+          </div>
+          <div>
+            <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1">Positive Aussage <span className="text-red-400">*</span></label>
+            <HighlightedTextarea value={positive} onChange={setPositive} wordMap={wordMap} rows={2} placeholder="Das ist ein Hund." onSelectionChange={setSelection} />
+          </div>
+          <div>
+            <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1">Negative Aussage <span className="text-slate-400 font-normal normal-case">(optional)</span></label>
+            <HighlightedTextarea value={negative} onChange={setNegative} wordMap={wordMap} rows={2} placeholder="Das ist keine Katze." onSelectionChange={setSelection} />
+          </div>
+        </>)}
+        {type === 'word' && (<>
+          <div>
+            <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1">Frage <span className="text-slate-400 font-normal normal-case">(optional)</span></label>
+            <HighlightedTextarea value={question} onChange={setQuestion} wordMap={wordMap} rows={2} placeholder="Was ist das?" onSelectionChange={setSelection} />
+          </div>
+          <div>
+            <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">Positive Wörter</p>
+            <div className="flex flex-wrap gap-1 mb-1.5">{positiveWords.map(w => <WordTag key={w.id} word={w} onRemove={id => setPositiveWords(prev => prev.filter(x => x.id !== id))} />)}</div>
+            <WordSearch existingIds={positiveWords.map(w => w.id)} onAdd={w => setPositiveWords(prev => prev.some(x => x.id === w.id) ? prev : [...prev, w])} placeholder="Positives Wort suchen…" />
+          </div>
+          <div>
+            <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">Negative Wörter</p>
+            <div className="flex flex-wrap gap-1 mb-1.5">{negativeWords.map(w => <WordTag key={w.id} word={w} onRemove={id => setNegativeWords(prev => prev.filter(x => x.id !== id))} />)}</div>
+            <WordSearch existingIds={negativeWords.map(w => w.id)} onAdd={w => setNegativeWords(prev => prev.some(x => x.id === w.id) ? prev : [...prev, w])} placeholder="Negatives Wort suchen…" />
+          </div>
+        </>)}
+        {Object.keys(wordMap).length > 0 && (
+          <div className="space-y-1.5 pt-1">
+            <span className="text-xs font-semibold text-slate-400 uppercase tracking-wide">Erkannte Wörter</span>
+            {Object.entries(wordMap).map(([title, w]) => {
+              const matchingObjs = allObjects.filter(o => o._words?.some(ow => ow.id === w.id));
+              const assigned = objectAssignments[w.id] || '';
+              return (
+                <div key={w.id} className="flex items-center gap-2">
+                  <span className="text-xs bg-amber-100 text-amber-700 rounded px-2 py-0.5 font-medium shrink-0">{title}</span>
+                  {matchingObjs.length > 0 ? (
+                    <select value={assigned} onChange={e => setObjectAssignments(prev => ({ ...prev, [w.id]: e.target.value || null }))}
+                      className={`flex-1 text-xs border rounded px-1.5 py-0.5 bg-white focus:outline-none focus:ring-1 focus:ring-amber-400 ${assigned ? 'border-amber-400 text-amber-700 bg-amber-50' : 'border-slate-200 text-slate-500'}`}>
+                      <option value="">— nur Wort</option>
+                      {matchingObjs.map(obj => {
+                        const idx = allObjects.indexOf(obj);
+                        const labels = (obj._words || []).slice(0, 3).map(ow => ow.titel_de || ow.id).join(', ');
+                        return <option key={obj.id} value={obj.id}>Objekt #{idx + 1}{labels ? ` — ${labels}` : ''}</option>;
+                      })}
+                    </select>
+                  ) : <span className="text-xs text-slate-300 italic">kein Objekt</span>}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+      <div className="flex gap-2 pt-2 border-t border-amber-100">
+        <button onClick={onCancel} className="flex-1 py-1.5 text-xs font-medium rounded-lg border border-slate-300 text-slate-600 hover:bg-slate-50 transition-colors">Abbrechen</button>
+        <button onClick={handleSave} disabled={saving} className="flex-1 py-1.5 text-xs font-medium rounded-lg bg-amber-500 hover:bg-amber-600 disabled:opacity-40 text-white transition-colors">
+          {saving ? 'Speichern…' : '✓ Änderungen speichern'}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ─── Left panel: Object list ──────────────────────────────────────────────────
+
+function ObjectListPanel({ objects, loadingObjects, mode, selectedObjectId, onAddObject, onSelectObject }) {
+  return (
+    <aside className="w-1/5 min-w-[180px] border-r border-slate-200 bg-white flex flex-col overflow-hidden">
+      <div className="px-3 py-2.5 border-b border-slate-100 bg-slate-50 flex-shrink-0">
+        <button
+          onClick={onAddObject}
+          className={`w-full flex items-center justify-center gap-1.5 text-xs font-medium py-1.5 rounded-lg transition-colors
+            ${mode === 'add'
+              ? 'bg-indigo-700 text-white ring-2 ring-indigo-300'
+              : 'bg-indigo-600 hover:bg-indigo-700 text-white'}`}
+        >
+          <span className="text-base leading-none">＋</span> Objekt hinzufügen
+        </button>
+      </div>
+      <div className="flex-1 overflow-y-auto p-3 space-y-2">
+        {loadingObjects && (
+          <div className="space-y-2">{[1,2,3].map(i => <div key={i} className="h-12 bg-slate-100 rounded animate-pulse" />)}</div>
+        )}
+        {!loadingObjects && objects.length === 0 && (
+          <p className="text-xs text-slate-400 text-center mt-6">Noch keine Objekte.<br />Klicke oben um eines zu zeichnen.</p>
+        )}
+        {objects.map((obj, i) => (
+          <button
+            key={obj.id}
+            onClick={() => onSelectObject(obj.id === selectedObjectId ? null : obj.id)}
+            className={`w-full text-left rounded-lg border p-2.5 transition-all
+              ${obj.id === selectedObjectId && mode !== 'add'
+                ? 'border-indigo-400 bg-indigo-50 ring-1 ring-indigo-300'
+                : 'border-slate-200 bg-slate-50 hover:border-indigo-200 hover:bg-indigo-50/40'}`}
+          >
+            <div className="flex items-center gap-1.5 mb-1">
+              <span className="text-xs font-bold text-slate-400">#{i + 1}</span>
+              <span className={`text-xs px-1.5 py-0.5 rounded-full font-medium ${STATUS_COLORS[obj.status] || 'bg-slate-100 text-slate-600'}`}>
+                {obj.status}
+              </span>
+            </div>
+            <div className="flex flex-wrap gap-1">
+              {(obj._words || []).slice(0, 4).map(w => (
+                <span key={w.id} className="text-xs bg-white border border-indigo-100 text-indigo-600 rounded px-1 py-0.5">
+                  {w.titel_de || w.id}
+                </span>
+              ))}
+              {(!obj._words || obj._words.length === 0) && (
+                <span className="text-xs text-slate-400">Keine Wörter</span>
+              )}
+            </div>
+          </button>
+        ))}
+      </div>
+    </aside>
+  );
+}
+
+// ─── Right panel: Add Object ──────────────────────────────────────────────────
+
+function ObjectAddPanel({ currentPolygon, savedSelections, objectWords, onAddObjectWord, onRemoveObjectWord, onAddSelection, onSaveObject, canSave, saving, onCancel }) {
+  const polygonClosed = currentPolygon.length >= 3;
+  return (
+    <aside className="w-2/5 border-l border-slate-200 bg-white flex flex-col overflow-hidden">
+      <div className="px-3 py-2.5 border-b border-slate-100 bg-slate-50 flex-shrink-0">
+        <h2 className="text-xs font-bold text-slate-500 uppercase tracking-wider">Neues Objekt</h2>
+      </div>
+      <div className="flex-1 overflow-y-auto p-3 space-y-4">
+        <div className="bg-indigo-50 rounded-lg p-3 text-xs text-indigo-700 space-y-1">
+          <p className="font-semibold">Polygon zeichnen:</p>
+          <p>🖱 Klick → Punkt setzen</p>
+          <p>✦ Doppelklick → Polygon schließen</p>
+          <p className="text-indigo-500">Mindestens 3 Punkte nötig</p>
+        </div>
+
+        {currentPolygon.length > 0 && (
+          <p className="text-xs text-slate-500">
+            <span className="font-semibold text-slate-700">{currentPolygon.length}</span> Punkt{currentPolygon.length !== 1 ? 'e' : ''} gesetzt
+          </p>
+        )}
+
+        <button onClick={onAddSelection} disabled={!polygonClosed}
+          className="w-full py-2 text-xs font-medium rounded-lg bg-amber-500 hover:bg-amber-600 disabled:opacity-40 text-white transition-colors">
+          Auswahl hinzufügen
+        </button>
+
+        {savedSelections.length > 0 && (
+          <div>
+            <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">Auswahlen ({savedSelections.length})</p>
+            <div className="space-y-1">
+              {savedSelections.map((sel, i) => (
+                <div key={i} className="flex items-center gap-2 text-xs bg-slate-50 rounded px-2 py-1.5">
+                  <span className="w-5 h-5 rounded-full bg-indigo-600 text-white text-[10px] flex items-center justify-center font-bold flex-shrink-0">{i + 1}</span>
+                  <span className="text-slate-600">{sel.points.length} Punkte</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <div>
+          <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">Objekt-Wörter</p>
+          <div className="flex flex-wrap gap-1 mb-2">
+            {objectWords.map(w => <WordTag key={w.id} word={w} onRemove={id => onRemoveObjectWord(id)} />)}
+            {objectWords.length === 0 && <span className="text-xs text-slate-400">Noch keine Wörter</span>}
+          </div>
+          <WordSearch existingIds={objectWords.map(w => w.id)} onAdd={onAddObjectWord} placeholder="Wort zum Objekt hinzufügen…" />
+        </div>
+
+        <div className="pt-2 border-t border-slate-100 space-y-2">
+          <button onClick={onSaveObject} disabled={!canSave || saving}
+            className="w-full py-2 text-xs font-medium rounded-lg bg-green-600 hover:bg-green-700 disabled:opacity-40 text-white transition-colors">
+            {saving ? 'Speichern…' : '✓ Objekt speichern'}
+          </button>
+          {!canSave && (
+            <p className="text-xs text-slate-400 text-center">
+              {savedSelections.length === 0 ? 'Zeichne mindestens eine Auswahl' : 'Füge mindestens ein Wort hinzu'}
+            </p>
+          )}
+          <button onClick={onCancel} className="w-full py-1.5 text-xs text-slate-400 hover:text-slate-600 underline">
+            Abbrechen
+          </button>
+        </div>
+      </div>
+    </aside>
+  );
+}
+
+// ─── Right panel: Pairs ───────────────────────────────────────────────────────
+
+function PairsPanel({ selectedObject, allObjects, objectPairs, loadingPairs, onPairSaved, onPairsReload }) {
+  const [editingId, setEditingId] = useState(null);
+
+  if (!selectedObject) {
+    return (
+      <aside className="w-2/5 border-l border-slate-200 bg-white flex items-center justify-center">
+        <p className="text-xs text-slate-400 text-center px-4">
+          Wähle links ein Objekt um Pairs zu verwalten,<br />oder klicke „＋ Objekt hinzufügen".
+        </p>
+      </aside>
+    );
+  }
+
+  return (
+    <aside className="w-2/5 border-l border-slate-200 bg-white flex flex-col overflow-hidden">
+      <div className="px-3 py-2.5 border-b border-slate-100 bg-slate-50 flex-shrink-0">
+        <h2 className="text-xs font-bold text-slate-500 uppercase tracking-wider">
+          Pairs — Objekt #{selectedObject._index + 1}
+        </h2>
+      </div>
+      <div className="flex-1 overflow-y-auto">
+        <div className="p-3 border-b border-slate-100">
+          <PairForm objectId={selectedObject.id} allObjects={allObjects} onPairSaved={pair => onPairSaved(pair)} />
+        </div>
+        <div className="p-3 space-y-3">
+          {loadingPairs && (
+            <div className="space-y-2">{[1,2].map(i => <div key={i} className="h-16 bg-slate-100 rounded animate-pulse" />)}</div>
+          )}
+          {!loadingPairs && objectPairs.length === 0 && (
+            <p className="text-xs text-slate-400 text-center mt-4">Noch keine Pairs</p>
+          )}
+          {objectPairs.map((pair, i) => (
+            <div key={pair.id}>
+              {editingId === pair.id ? (
+                <EditPairForm pair={pair} allObjects={allObjects}
+                  onSaved={() => { setEditingId(null); onPairsReload(); }}
+                  onCancel={() => setEditingId(null)} />
+              ) : (
+                <div className="rounded-lg border border-slate-200 p-3 bg-slate-50 space-y-1.5">
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs font-bold text-slate-400">#{i + 1}</span>
+                    <span className={`text-xs px-1.5 py-0.5 rounded-full font-medium ${STATUS_COLORS[pair.status] || 'bg-slate-100 text-slate-600'}`}>{pair.status}</span>
+                    <span className="text-xs bg-slate-200 text-slate-600 rounded px-1.5 py-0.5">{pair.answer_type}</span>
+                    <button onClick={() => setEditingId(pair.id)}
+                      className="ml-auto text-xs text-slate-400 hover:text-indigo-600 px-1.5 py-0.5 rounded hover:bg-indigo-50 transition-colors" title="Bearbeiten">✏️</button>
+                  </div>
+                  {pair.question_id && <p className="text-xs text-slate-500 font-mono opacity-60 truncate">F: {pair.question_id.slice(0,8)}…</p>}
+                  {pair.positive_statement_id && <p className="text-xs text-green-600 font-mono opacity-60 truncate">+ {pair.positive_statement_id.slice(0,8)}…</p>}
+                  {pair.negative_statement_id && <p className="text-xs text-red-500 font-mono opacity-60 truncate">− {pair.negative_statement_id.slice(0,8)}…</p>}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </aside>
+  );
+}
+
+// ─── Image + Canvas (dual mode) ───────────────────────────────────────────────
+
+function ImageCanvas({ picture, mode, currentPolygon, savedSelections, mousePos, selectedObject, onImageClick, onImageDblClick, onMouseMove }) {
+  const imgRef = useRef(null);
+  const canvasRef = useRef(null);
+  const containerRef = useRef(null);
+  const isDrawing = mode === 'add';
+
+  const syncCanvas = useCallback(() => {
+    const img = imgRef.current; const canvas = canvasRef.current;
+    if (!img || !canvas) return;
+    const rect = img.getBoundingClientRect();
+    if (!rect.width) return;
+    canvas.width = rect.width; canvas.height = rect.height;
+    canvas.style.left = `${img.offsetLeft}px`; canvas.style.top = `${img.offsetTop}px`;
+    canvas.style.width = `${rect.width}px`; canvas.style.height = `${rect.height}px`;
+  }, []);
+
+  useEffect(() => {
+    syncCanvas();
+    const ro = new ResizeObserver(syncCanvas);
+    if (containerRef.current) ro.observe(containerRef.current);
+    return () => ro.disconnect();
+  }, [syncCanvas, picture]);
+
+  // Draw polygons
+  useEffect(() => {
+    const canvas = canvasRef.current; if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    const W = canvas.width; const H = canvas.height;
+
+    if (isDrawing) {
+      // Draw mode: show saved selections + in-progress polygon
+      const COLORS = ['rgba(99,102,241', 'rgba(245,158,11', 'rgba(16,185,129', 'rgba(239,68,68'];
+      savedSelections.forEach((sel, i) => {
+        if (!sel.points.length) return;
+        const col = COLORS[i % COLORS.length];
+        ctx.beginPath();
+        sel.points.forEach((p, j) => { if (j === 0) ctx.moveTo(p.x * W, p.y * H); else ctx.lineTo(p.x * W, p.y * H); });
+        ctx.closePath();
+        ctx.fillStyle = `${col},0.15)`; ctx.fill();
+        ctx.strokeStyle = `${col},0.9)`; ctx.lineWidth = 2; ctx.stroke();
+        const cx = sel.points.reduce((s, p) => s + p.x, 0) / sel.points.length;
+        const cy = sel.points.reduce((s, p) => s + p.y, 0) / sel.points.length;
+        ctx.fillStyle = `${col},0.9)`; ctx.font = 'bold 13px sans-serif'; ctx.textAlign = 'center';
+        ctx.fillText(String(i + 1), cx * W, cy * H + 5);
+      });
+      if (currentPolygon.length > 0) {
+        ctx.beginPath();
+        currentPolygon.forEach((p, j) => { if (j === 0) ctx.moveTo(p.x * W, p.y * H); else ctx.lineTo(p.x * W, p.y * H); });
+        if (mousePos) ctx.lineTo(mousePos.x * W, mousePos.y * H);
+        ctx.strokeStyle = '#f59e0b'; ctx.lineWidth = 2; ctx.setLineDash([5, 3]); ctx.stroke(); ctx.setLineDash([]);
+        currentPolygon.forEach(p => {
+          ctx.beginPath(); ctx.arc(p.x * W, p.y * H, 4, 0, Math.PI * 2);
+          ctx.fillStyle = '#f59e0b'; ctx.fill();
+        });
+      }
+    } else if (selectedObject) {
+      // View mode: highlight selected object's polygons
+      const selections = selectedObject.selections;
+      if (!Array.isArray(selections)) return;
+      const COLORS = ['rgba(99,102,241', 'rgba(245,158,11', 'rgba(16,185,129', 'rgba(239,68,68'];
+      selections.forEach((sel, i) => {
+        if (!sel.points?.length) return;
+        const col = COLORS[i % COLORS.length];
+        ctx.beginPath();
+        sel.points.forEach((p, j) => { if (j === 0) ctx.moveTo(p.x * W, p.y * H); else ctx.lineTo(p.x * W, p.y * H); });
+        ctx.closePath();
+        ctx.fillStyle = `${col},0.2)`; ctx.fill();
+        ctx.strokeStyle = `${col},0.9)`; ctx.lineWidth = 2.5; ctx.stroke();
+        const cx = sel.points.reduce((s, p) => s + p.x, 0) / sel.points.length;
+        const cy = sel.points.reduce((s, p) => s + p.y, 0) / sel.points.length;
+        ctx.fillStyle = `${col},0.9)`; ctx.font = 'bold 14px sans-serif'; ctx.textAlign = 'center';
+        ctx.fillText(String(i + 1), cx * W, cy * H + 5);
+      });
+    }
+  }, [isDrawing, savedSelections, currentPolygon, mousePos, selectedObject]);
+
+  function toRelative(e) {
+    const img = imgRef.current; if (!img) return null;
+    const rect = img.getBoundingClientRect();
+    return {
+      x: Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width)),
+      y: Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height)),
+    };
+  }
+
+  if (!picture) {
+    return (
+      <div className="flex-1 flex items-center justify-center bg-slate-100">
+        <p className="text-slate-400 text-sm">Keine Bilder gefunden.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div ref={containerRef}
+      className={`flex-1 flex items-center justify-center bg-slate-900 relative overflow-hidden ${isDrawing ? 'cursor-crosshair' : 'cursor-default'}`}
+      onClick={isDrawing ? e => { if (e.detail === 2) return; const pt = toRelative(e); if (pt) onImageClick(pt); } : undefined}
+      onDoubleClick={isDrawing ? e => { const pt = toRelative(e); if (pt) onImageDblClick(pt); } : undefined}
+      onMouseMove={isDrawing ? e => { const pt = toRelative(e); if (pt) onMouseMove(pt); } : undefined}
+    >
+      {picture.picture_link ? (
+        <img ref={imgRef} src={picture.picture_link} alt={picture.design || 'Bild'}
+          className="max-h-full max-w-full object-contain select-none" draggable={false} onLoad={syncCanvas} />
+      ) : (
+        <div className="flex flex-col items-center gap-2 text-slate-400">
+          <span className="text-5xl">🖼️</span>
+          <span className="text-sm">Kein Bild</span>
+          {picture.design && <span className="text-xs opacity-60">{picture.design}</span>}
+        </div>
+      )}
+      <canvas ref={canvasRef} className="absolute pointer-events-none" />
+    </div>
+  );
+}
+
+// ─── Main Page ────────────────────────────────────────────────────────────────
+
+export default function ContentCreation() {
+  const [pictures, setPictures] = useState([]);
+  const [pictureIndex, setPictureIndex] = useState(0);
+  const [loadingPictures, setLoadingPictures] = useState(true);
+
+  const [objects, setObjects] = useState([]);
+  const [loadingObjects, setLoadingObjects] = useState(false);
+
+  // mode: null (idle) | 'add' (drawing new object) | string objectId (viewing pairs)
+  const [mode, setMode] = useState(null);
+
+  // Draw state (only relevant when mode === 'add')
+  const [currentPolygon, setCurrentPolygon] = useState([]);
+  const [savedSelections, setSavedSelections] = useState([]);
+  const [objectWords, setObjectWords] = useState([]);
+  const [mousePos, setMousePos] = useState(null);
+  const [saving, setSaving] = useState(false);
+
+  // Pairs state (only relevant when mode is an objectId)
+  const [objectPairs, setObjectPairs] = useState([]);
+  const [loadingPairs, setLoadingPairs] = useState(false);
+
+  const [markingDone, setMarkingDone] = useState(false);
+
+  const currentPicture = pictures[pictureIndex] || null;
+  const selectedObjectId = typeof mode === 'string' && mode !== 'add' ? mode : null;
+  const selectedObject = selectedObjectId ? objects.find(o => o.id === selectedObjectId) || null : null;
+  const selectedObjectWithIndex = selectedObject
+    ? { ...selectedObject, _index: objects.indexOf(selectedObject) }
+    : null;
+
+  // Load all pictures
+  useEffect(() => {
+    setLoadingPictures(true);
+    apiFetch('/pictures?limit=500')
+      .then(data => setPictures(Array.isArray(data) ? data : []))
+      .catch(() => setPictures([]))
+      .finally(() => setLoadingPictures(false));
+  }, []);
+
+  // Load objects when picture changes
+  useEffect(() => {
+    if (!currentPicture) return;
+    setMode(null);
+    setObjectPairs([]);
+    setLoadingObjects(true);
+    apiFetch(`/objects?picture_id=${currentPicture.id}&limit=100`)
+      .then(async data => {
+        const objs = Array.isArray(data) ? data : [];
+        const withWords = await Promise.all(objs.map(async obj => {
+          try {
+            const words = await apiFetch(`/objects/${obj.id}/words`);
+            return { ...obj, _words: Array.isArray(words) ? words : [] };
+          } catch { return { ...obj, _words: [] }; }
+        }));
+        setObjects(withWords);
+      })
+      .catch(() => setObjects([]))
+      .finally(() => setLoadingObjects(false));
+    resetDraw();
+  }, [currentPicture?.id]);
+
+  // Load pairs when selecting an object
+  useEffect(() => {
+    if (!selectedObjectId) { setObjectPairs([]); return; }
+    setLoadingPairs(true);
+    apiFetch(`/objects/${selectedObjectId}/pairs`)
+      .then(data => setObjectPairs(Array.isArray(data) ? data : []))
+      .catch(() => setObjectPairs([]))
+      .finally(() => setLoadingPairs(false));
+  }, [selectedObjectId]);
+
+  function resetDraw() {
+    setCurrentPolygon([]); setSavedSelections([]); setObjectWords([]); setMousePos(null);
+  }
+
+  function handleAddObject() {
+    resetDraw();
+    setMode('add');
+  }
+
+  function handleSelectObject(id) {
+    resetDraw();
+    setMode(id); // null toggles off, string selects
+  }
+
+  function handleImageClick(pt) {
+    setCurrentPolygon(prev => [...prev, pt]);
+  }
+
+  function handleImageDblClick(pt) {
+    setCurrentPolygon(prev => {
+      const next = [...prev, pt];
+      if (next.length >= 3) {
+        setSavedSelections(s => [...s, { points: next }]);
+        return [];
+      }
+      return next;
+    });
+  }
+
+  function handleAddSelection() {
+    if (currentPolygon.length < 3) return;
+    setSavedSelections(prev => [...prev, { points: currentPolygon }]);
+    setCurrentPolygon([]);
+  }
+
+  async function handleSaveObject() {
+    if (!canSaveObject || !currentPicture) return;
+    setSaving(true);
+    try {
+      const obj = await apiPost('/objects', { selections: savedSelections, status: 'draft' });
+      await apiLink(`/objects/${obj.id}/pictures/${currentPicture.id}`);
+      await Promise.all(objectWords.map(w => apiLink(`/objects/${obj.id}/words/${w.id}`)));
+      const newObj = { ...obj, _words: objectWords };
+      setObjects(prev => [...prev, newObj]);
+      resetDraw();
+      setMode(obj.id); // immediately switch to pairs view for the new object
+    } catch (e) { alert('Fehler: ' + e.message); }
+    finally { setSaving(false); }
+  }
+
+  const canSaveObject = savedSelections.length > 0 && objectWords.length > 0;
+
+  async function handleMarkDone() {
+    if (!currentPicture || objects.length === 0) return;
+    setMarkingDone(true);
+    try {
+      await apiPatch('/pictures', currentPicture.id, { objects_created: true });
+    } catch (e) { alert('Fehler: ' + e.message); }
+    finally { setMarkingDone(false); }
+  }
+
+  function reloadPairs() {
+    if (!selectedObjectId) return;
+    setLoadingPairs(true);
+    apiFetch(`/objects/${selectedObjectId}/pairs`)
+      .then(data => setObjectPairs(Array.isArray(data) ? data : []))
+      .catch(() => setObjectPairs([]))
+      .finally(() => setLoadingPairs(false));
+  }
+
+  return (
+    <Layout back="/content" fullHeight>
+      <div className="h-full flex flex-col">
+
+        {/* Top bar */}
+        <div className="flex items-center justify-between px-4 py-2 bg-white border-b border-slate-200 flex-shrink-0">
+          <span className="font-semibold text-slate-700 text-sm">Content Erstellen</span>
+
+          <div className="flex items-center gap-3">
+            <button onClick={() => setPictureIndex(i => Math.max(0, i - 1))}
+              disabled={pictureIndex === 0 || loadingPictures}
+              className="p-1.5 rounded-lg border border-slate-300 hover:bg-slate-50 disabled:opacity-30 disabled:cursor-not-allowed">←</button>
+            <span className="text-sm text-slate-600 min-w-[120px] text-center">
+              {loadingPictures ? 'Lade…' : pictures.length === 0 ? 'Keine Bilder' : `${pictureIndex + 1} / ${pictures.length}`}
+            </span>
+            <button onClick={() => setPictureIndex(i => Math.min(pictures.length - 1, i + 1))}
+              disabled={pictureIndex >= pictures.length - 1 || loadingPictures}
+              className="p-1.5 rounded-lg border border-slate-300 hover:bg-slate-50 disabled:opacity-30 disabled:cursor-not-allowed">→</button>
+          </div>
+
+          <div className="flex items-center gap-2 text-xs text-slate-500">
+            {currentPicture && (
+              <>
+                <span className="font-mono opacity-60">{currentPicture.id?.slice(0, 8)}…</span>
+                {currentPicture.design && <span>{currentPicture.design}</span>}
+                {currentPicture.objects_created && (
+                  <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">✓ Objekte erstellt</span>
+                )}
+              </>
+            )}
+            <button onClick={handleMarkDone}
+              disabled={markingDone || !currentPicture || objects.length === 0 || currentPicture?.objects_created}
+              className="ml-1 px-3 py-1.5 text-xs font-medium rounded-lg bg-green-600 hover:bg-green-700 disabled:opacity-40 text-white whitespace-nowrap transition-colors">
+              {markingDone ? 'Speichern…' : '✓ Objekte abgeschlossen'}
+            </button>
+          </div>
+        </div>
+
+        {/* 3-column layout */}
+        <div className="flex flex-1 overflow-hidden">
+          <ObjectListPanel
+            objects={objects}
+            loadingObjects={loadingObjects}
+            mode={mode}
+            selectedObjectId={selectedObjectId}
+            onAddObject={handleAddObject}
+            onSelectObject={handleSelectObject}
+          />
+
+          <ImageCanvas
+            picture={currentPicture}
+            mode={mode}
+            currentPolygon={currentPolygon}
+            savedSelections={savedSelections}
+            mousePos={mousePos}
+            selectedObject={selectedObjectWithIndex}
+            onImageClick={handleImageClick}
+            onImageDblClick={handleImageDblClick}
+            onMouseMove={setMousePos}
+          />
+
+          {mode === 'add' ? (
+            <ObjectAddPanel
+              currentPolygon={currentPolygon}
+              savedSelections={savedSelections}
+              objectWords={objectWords}
+              onAddObjectWord={w => setObjectWords(prev => prev.some(x => x.id === w.id) ? prev : [...prev, w])}
+              onRemoveObjectWord={id => setObjectWords(prev => prev.filter(w => w.id !== id))}
+              onAddSelection={handleAddSelection}
+              onSaveObject={handleSaveObject}
+              canSave={canSaveObject}
+              saving={saving}
+              onCancel={() => { resetDraw(); setMode(null); }}
+            />
+          ) : (
+            <PairsPanel
+              selectedObject={selectedObjectWithIndex}
+              allObjects={objects}
+              objectPairs={objectPairs}
+              loadingPairs={loadingPairs}
+              onPairSaved={pair => setObjectPairs(prev => [pair, ...prev])}
+              onPairsReload={reloadPairs}
+            />
+          )}
+        </div>
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/pages/ContentHub.jsx b/src/pages/ContentHub.jsx
index b6fd7e6..9929403 100644
--- a/src/pages/ContentHub.jsx
+++ b/src/pages/ContentHub.jsx
@@ -3,27 +3,19 @@ import Layout from '../components/Layout';
 
 const TOOLS = [
   {
-    key: 'objects',
-    title: 'Object Creation',
-    icon: '🖼️',
-    description: 'Bilder durchblättern, Bereiche einzeichnen und Objekte mit Wörtern verknüpfen.',
-    path: '/content/objects',
-    ready: true,
-  },
-  {
-    key: 'statements',
-    title: 'Statement Creation',
-    icon: '💬',
-    description: 'Pairs mit Fragen und Aussagen erstellen, Wörter im Satz markieren.',
-    path: '/content/statements',
-    ready: true,
-  },
-  {
-    key: 'content',
-    title: 'Content Creation',
-    icon: '✨',
-    description: 'Inhalte zusammenstellen und veröffentlichen.',
+    key: 'creation',
+    title: 'Content Erstellen',
+    icon: '🎨',
+    description: 'Objekte in Bildern einzeichnen, Wörter verknüpfen und Pairs mit Fragen & Aussagen erstellen.',
     path: '/content/creation',
+    ready: true,
+  },
+  {
+    key: 'publish',
+    title: 'Veröffentlichen',
+    icon: '✨',
+    description: 'Fertige Pairs prüfen, freigeben und veröffentlichen.',
+    path: '/content/publish',
     ready: false,
   },
 ];
@@ -36,7 +28,7 @@ export default function ContentHub() {
       <div className="max-w-3xl mx-auto">
         <h1 className="text-2xl font-bold text-slate-800 mb-2">Content Verwaltung</h1>
         <p className="text-slate-500 mb-8">Wähle ein Tool um loszulegen.</p>
-        <div className="grid grid-cols-1 sm:grid-cols-3 gap-5">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
           {TOOLS.map(tool => (
             <button
               key={tool.key}