feat: card redesign with new placeholder format, confetti & layout

- New placeholder format {{label.w/o:uuid}} parsed in all card types
- 1:1 image ratio, header below image, section labels (Satz/Frage/Vokabeln)
- Chips styled as underline-italic in sentences
- Vocabulary pill chips (Lora italic, rounded)
- TTS + hold-to-translate buttons in PairSentenceCard
- Confetti on correct answers (canvas-confetti)
- Picture loaded via object_pairs join in feed API

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/PairSentenceCard.jsx

@@ -1,42 +1,47 @@
-import { useState } from 'react'
+import { useState, useRef } from 'react'
+import confetti from 'canvas-confetti'
 import './PairCards.css'
 
-function BboxOverlay({ chip, lang, native }) {
-  if (!chip?.bbox) return null
-  const { x, y, w, h } = chip.bbox
-  const maskId = `bbmask-${chip.id.slice(0, 8)}`
-  const label  = chip[lang] || chip.de || ''
-  const labelY = Math.min((y + h + 0.07) * 100, 93)
+function triggerConfetti() {
+  confetti({
+    particleCount: 90,
+    spread: 70,
+    origin: { y: 0.55 },
+    colors: ['#C4A85A', '#7A5C2E', '#3D7055', '#E8C9A8', '#fff'],
+    scalar: 0.9,
+    gravity: 1.1,
+  })
+}
+
+function SelectionOverlay({ chip }) {
+  const sels = chip?.selections
+  if (!sels?.length) return null
+  const maskId = `selmask-${chip.id.slice(0, 8)}`
+  const label  = chip.label || ''
+  const toPoints = pts => pts.map(p => `${p.x * 100},${p.y * 100}`).join(' ')
+  const firstPts = sels[0].points
+  const xs = firstPts.map(p => p.x * 100)
+  const ys = firstPts.map(p => p.y * 100)
+  const cx    = (Math.min(...xs) + Math.max(...xs)) / 2
+  const labelY = Math.min(Math.max(...ys) + 6, 94)
   return (
     <svg className="pair-bbox-svg" viewBox="0 0 100 100" preserveAspectRatio="none">
       <defs>
         <mask id={maskId}>
           <rect width="100" height="100" fill="white" />
-          <rect x={x*100} y={y*100} width={w*100} height={h*100} fill="black" />
+          {sels.map((s, i) => <polygon key={i} points={toPoints(s.points)} fill="black" />)}
         </mask>
       </defs>
-      {/* dim area outside bbox */}
-      <rect width="100" height="100" fill="rgba(0,0,0,0.48)" mask={`url(#${maskId})`} />
-      {/* glowing amber border */}
-      <rect
-        x={x*100} y={y*100} width={w*100} height={h*100}
-        fill="rgba(255,215,100,0.08)"
-        stroke="rgba(255,215,100,0.92)"
-        strokeWidth="1.4"
-        rx="1.5"
-      />
-      {/* word label below bbox */}
+      <rect width="100" height="100" fill="rgba(0,0,0,0.5)" mask={`url(#${maskId})`} />
+      {sels.map((s, i) => (
+        <polygon key={i} points={toPoints(s.points)}
+          fill="rgba(255,215,100,0.08)" stroke="rgba(255,215,100,0.92)"
+          strokeWidth="0.8" strokeLinejoin="round" />
+      ))}
       {label && (
-        <text
-          x={(x + w / 2) * 100}
-          y={labelY}
-          textAnchor="middle"
-          fill="white"
-          fontSize="5.5"
-          fontWeight="700"
-          fontFamily="Nunito, sans-serif"
-          style={{ filter: 'drop-shadow(0 1px 4px rgba(0,0,0,1))' }}
-        >
+        <text x={cx} y={labelY} textAnchor="middle"
+          fill="white" fontSize="5.5" fontWeight="700" fontFamily="Nunito, sans-serif"
+          style={{ filter: 'drop-shadow(0 1px 4px rgba(0,0,0,1))' }}>
           {label}
         </text>
       )}
@@ -44,20 +49,22 @@ function BboxOverlay({ chip, lang, native }) {
   )
 }
 
-function resolveSentence(sentence, placeholders, lang, onChipClick, activeId) {
+// Sentence format: {{label.w:uuid}} or {{label.o:uuid}}
+function resolveSentence(sentence, placeholders, onChipClick, activeId) {
   if (!sentence) return null
-  const parts = sentence.split(/(\{\{[0-9a-f-]{36}\}\})/)
+  const parts = sentence.split(/(\{\{[^}]+\.[wo]:[0-9a-f-]{36}\}\})/)
   return parts.map((part, i) => {
-    const m = part.match(/^\{\{([0-9a-f-]{36})\}\}$/)
+    const m = part.match(/^\{\{([^.]+)\.(w|o):([0-9a-f-]{36})\}\}$/)
     if (m) {
-      const id    = m[1]
-      const entry = placeholders?.[id]
-      const label = entry?.[lang] || entry?.de || '…'
+      const label = m[1]
+      const type  = m[2] === 'w' ? 'word' : 'object'
+      const id    = m[3]
+      const entry = placeholders?.[id] || {}
       return (
         <span
           key={i}
           className={`pair-word-chip${activeId === id ? ' active' : ''}`}
-          onClick={e => { e.stopPropagation(); onChipClick?.(id, entry) }}
+          onClick={e => { e.stopPropagation(); onChipClick?.(id, { label, type, ...entry }) }}
         >
           {label}
         </span>
@@ -67,9 +74,30 @@ function resolveSentence(sentence, placeholders, lang, onChipClick, activeId) {
   })
 }
 
+// Extract unique vocab entries from a sentence string
+function extractVocab(sentence) {
+  if (!sentence) return []
+  const matches = [...sentence.matchAll(/\{\{([^.]+)\.[wo]:([0-9a-f-]{36})\}\}/g)]
+  const seen = new Set()
+  return matches
+    .filter(m => { const ok = !seen.has(m[2]); seen.add(m[2]); return ok })
+    .map(m => ({ label: m[1], id: m[2] }))
+}
+
+// Strip placeholders to plain text for TTS
+function toPlainText(sentence) {
+  if (!sentence) return ''
+  return sentence.replace(/\{\{([^.]+)\.[wo]:[0-9a-f-]{36}\}\}/g, '$1')
+}
+
+const LANG_LABELS = { sv: 'Svenska', en: 'English', de: 'Deutsch' }
+const LANG_TTS    = { sv: 'sv-SE',  en: 'en-US',   de: 'de-DE'  }
+
 export default function PairSentenceCard({ card, onComplete }) {
-  const [done,       setDone]       = useState(false)
-  const [activeChip, setActiveChip] = useState(null)
+  const [done,            setDone]            = useState(false)
+  const [activeChip,      setActiveChip]      = useState(null)
+  const [showTranslation, setShowTranslation] = useState(false)
+  const holdTimer = useRef(null)
 
   const lang   = card.lang || 'de'
   const native = lang === 'de' ? 'en' : 'de'
@@ -79,8 +107,10 @@ export default function PairSentenceCard({ card, onComplete }) {
   const hint     = stmt?.[`sentence_${native}`] || null
   const pic      = card.picture?.url
 
-  const isWord   = activeChip && (activeChip.type === 'word'   || !activeChip.bbox)
-  const isObject = activeChip && activeChip.type === 'object'  && activeChip.bbox
+  const isWord   = activeChip && activeChip.type === 'word'
+  const isObject = activeChip && activeChip.type === 'object' && activeChip.selections?.length
+
+  const vocab = extractVocab(sentence)
 
   function handleChipClick(id, entry) {
     setActiveChip(prev => prev?.id === id ? null : { id, ...entry })
@@ -89,16 +119,31 @@ export default function PairSentenceCard({ card, onComplete }) {
   function handleConfirm() {
     setDone(true)
     setActiveChip(null)
-    setTimeout(() => onComplete('correct'), 600)
+    triggerConfetti()
+    setTimeout(() => onComplete('correct'), 900)
+  }
+
+  function handleTTS() {
+    if (!window.speechSynthesis || !sentence) return
+    window.speechSynthesis.cancel()
+    const utt = new SpeechSynthesisUtterance(toPlainText(sentence))
+    utt.lang = LANG_TTS[lang] || 'de-DE'
+    utt.rate = 0.9
+    window.speechSynthesis.speak(utt)
+  }
+
+  function startTranslation() {
+    holdTimer.current = setTimeout(() => setShowTranslation(true), 150)
+  }
+  function endTranslation() {
+    clearTimeout(holdTimer.current)
+    setShowTranslation(false)
   }
 
   return (
     <div className="pair-card" onClick={() => setActiveChip(null)}>
-      <div className="pair-card-header">
-        <span className="pair-lang-pill">{lang.toUpperCase()}</span>
-        <span className="pair-points-pill">+{card.meta?.points ?? 2} Pkt</span>
-      </div>
 
+      {/* Image — flush, 1:1 */}
       <div className={`pair-image-wrap${isWord ? ' chip-active' : ''}`}>
         {pic
           ? <img src={pic} alt="" className="pair-image" loading="lazy" />
@@ -107,31 +152,88 @@ export default function PairSentenceCard({ card, onComplete }) {
         {isWord && (
           <div className="pair-chip-highlight">
             <div className="pair-chip-highlight-badge">
-              <span className="pair-chip-highlight-target">
-                {activeChip[lang] || activeChip.de || '…'}
-              </span>
-              {(activeChip[native] || activeChip.en) && (
-                <span className="pair-chip-highlight-native">
-                  {activeChip[native] || activeChip.en}
-                </span>
-              )}
+              <span className="pair-chip-highlight-target">{activeChip.label || '…'}</span>
             </div>
           </div>
         )}
-        {isObject && <BboxOverlay chip={activeChip} lang={lang} native={native} />}
+        {isObject && <SelectionOverlay chip={activeChip} />}
       </div>
 
+      {/* Header below image */}
+      <div className="pair-card-header">
+        <span className="pair-lang-pill">{LANG_LABELS[lang] || lang}</span>
+        <span className="pair-points-pill">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="#C4A85A"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+          +{card.meta?.points ?? 2} Punkte
+        </span>
+      </div>
+      <div className="pair-header-divider" />
+
       <div className="pair-card-body" onClick={e => e.stopPropagation()}>
-        <p className="pair-sentence">
-          {resolveSentence(sentence, card.placeholders, lang, handleChipClick, activeChip?.id)}
-        </p>
-        {hint && (
-          <p className="pair-hint">
-            {resolveSentence(hint, card.placeholders, native)}
-          </p>
+
+        {/* Sentence + action buttons */}
+        <p className="pair-section-label">Satz</p>
+        <div className="pair-sentence-row">
+          <div className="pair-sentence-text">
+            <p className="pair-sentence" style={{ opacity: showTranslation ? 0 : 1, transition: 'opacity 0.18s', margin: 0 }}>
+              {resolveSentence(sentence, card.placeholders, handleChipClick, activeChip?.id)}
+            </p>
+            {hint && (
+              <p className="pair-sentence" style={{
+                opacity: showTranslation ? 1 : 0,
+                color: '#7A7060',
+                transition: 'opacity 0.18s',
+                margin: 0,
+                marginTop: showTranslation ? 0 : '-1.7em',  /* overlay effect */
+                pointerEvents: 'none',
+              }}>
+                {resolveSentence(hint, card.placeholders, null, null)}
+              </p>
+            )}
+          </div>
+
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, paddingTop: 2 }}>
+            {/* TTS */}
+            <button className="pair-icon-btn" onClick={handleTTS} title="Vorlesen">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#7A6E55" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+                <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
+                <path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
+                <path d="M19.07 4.93a10 10 0 0 1 0 14.14"/>
+              </svg>
+            </button>
+            {/* Hold-to-translate */}
+            {hint && (
+              <button
+                className={`pair-icon-btn${showTranslation ? ' active' : ''}`}
+                onMouseDown={startTranslation}
+                onMouseUp={endTranslation}
+                onMouseLeave={endTranslation}
+                onTouchStart={e => { e.preventDefault(); startTranslation() }}
+                onTouchEnd={endTranslation}
+                title="Übersetzung halten"
+              >
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#7A6E55" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M5 8l6 6"/><path d="M4 14l6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/>
+                  <path d="M22 22l-5-10-5 10"/><path d="M14 18h6"/>
+                </svg>
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Vocabulary */}
+        {vocab.length > 0 && (
+          <div className="pair-vocab-section">
+            <p className="pair-section-label">Vokabeln</p>
+            <div className="pair-vocab-chips">
+              {vocab.map(v => (
+                <span key={v.id} className="pair-vocab-word">{v.label}</span>
+              ))}
+            </div>
+          </div>
         )}
 
-        <div className="pair-btn-row">
+        <div className="pair-btn-row" style={{ marginTop: 20 }}>
           <button
             className={`pair-btn ${done ? 'pair-btn-correct' : 'pair-btn-primary'}`}
             onClick={handleConfirm}