| Item-Zeile allgemein |
- | Item-Container | flex items-stretch bg-white border border-line rounded-sm mb-2 overflow-hidden | interlude: bg-orange-50 border-orange-200 |
+ | Item-Container | flex items-stretch bg-white border border-line rounded-sm mb-2 overflow-hidden | interlude: bg-orange-50 border-orange-200 → --color-interlude-bg / --color-interlude-border CSS tokens |
| Drag-Handle | w-4 bg-surface border-r border-line flex items-center justify-center cursor-grab shrink-0 | aria-label="Reihenfolge ändern"; cursor-grabbing während Drag |
| Positions-Nr. | w-5 text-[10px] font-bold text-ink-3 flex items-start justify-center pt-2 shrink-0 | aus Array-Index, nicht item.position |
| Entfernen-Button | w-6 flex items-start justify-center pt-2 shrink-0 | × aria-label="Eintrag entfernen"; hover: text-red-500; Confirm nur wenn note vorhanden |
@@ -508,18 +508,18 @@
| Brieftitel | text-[11px] font-semibold text-ink leading-snug mb-0.5 | document.title |
| Briefmeta | text-xs text-ink-3 | formatDate(doc.documentDate) · "von X" oder "von X an Y" |
| Notiz-Textarea (sichtbar) | w-full min-h-[40px] font-serif text-xs italic bg-surface border border-line rounded-sm p-1.5 resize-none focus:border-primary focus:bg-white mt-2 | auto-expand; bind:value={item.note} |
- | „Notiz hinzufügen" Link | text-xs font-semibold text-blue-600 inline-flex items-center gap-1 mt-1 | togglet Notiz-Textarea |
+ | „Notiz hinzufügen" Link | text-xs font-semibold text-blue-600 → text-xs text-ink-3 underline hover:text-accent | togglet Notiz-Textarea |
| „Notiz entfernen" Link | text-xs text-ink-3 inline-flex items-center gap-1 mt-1 | zeigt sich wenn note.trim() nicht leer; setzt note = '' und blendet Textarea aus |
| Interlude-Item |
- | Interlude-Container | bg-orange-50 border-orange-200 (überschreibt Item-Container) | kein Positions-Kreis; Positions-Spalte zeigt Icon statt Zahl |
- | Label „Zwischentext" | text-[9px] font-bold uppercase tracking-widest text-orange-700 mb-1 | immer sichtbar; nicht editierbar |
- | Zwischentext-Textarea | w-full min-h-[44px] font-serif text-xs italic bg-white/60 border border-orange-200 rounded-sm p-1.5 resize-none focus:border-orange-400 | bind:value={item.note}; auto-expand; min 44px für Touch-Target |
+ | Interlude-Container | bg-orange-50 border-orange-200 → --color-interlude-bg left-accent border via --color-interlude-border | kein Positions-Kreis; Positions-Spalte zeigt Icon statt Zahl |
+ | Label „Zwischentext" | text-orange-700 → color: var(--color-interlude-label) | immer sichtbar; nicht editierbar |
+ | Zwischentext-Textarea | border-orange-200 focus:border-orange-400 → border-line focus-visible:ring-focus-ring | bind:value={item.note}; auto-expand; min 44px für Touch-Target |
| Aktionsleiste |
| Add Bar | flex gap-2 pt-2 pb-1 | immer unten sichtbar, auch wenn Liste gefüllt |
| „Brief hinzufügen" Button | border border-dashed border-line rounded-sm px-3 py-1.5 text-xs font-semibold text-ink-2 hover:border-primary hover:text-primary flex items-center gap-1 | öffnet existierende DocumentPicker-Komponente als Dropdown/Modal |
| „Zwischentext hinzufügen" Button | gleich wie Brief-Button | fügt neues Interlude-Item am Ende ein; Fokus auf das neue Textarea |
| Drag-to-Reorder |
- | Bibliothek | @dnd-kit/core oder svelte-dnd-action (bereits im Projekt prüfen) | kein neues Package ohne Absprache |
+ | Bibliothek | @dnd-kit/core oder svelte-dnd-action → createBlockDragDrop<JourneyItemView> aus $lib/document/transcription/useBlockDragDrop.svelte | kein externes Package; pointer-Events + data-drag-handle / data-block-wrapper Kontrakt |
| Reorder-API-Call | PUT /api/geschichten/{id}/items/reorder — body: [{id, position}] für alle Items | nach jedem Drop ausgelöst; optimistisch: lokalen State sofort aktualisieren |
| Accessibility | Drag-Handle: role="button" tabIndex=0; Keyboard: Space startet Drag, Arrow hoch/runter verschiebt, Space/Enter bestätigt, Esc abbricht | WCAG 2.1 SC 2.1.1 |
@@ -720,7 +720,7 @@