Kanonische Spezifikation für /zeitstrahl auf Basis von Konzept A „Der Lebensfaden": eine durchgehende vertikale Achse, die Personen-Lebensereignisse, kuratierte Ereignisse und Briefe zu einer Erzählung in der Zeit verwebt. Dieselbe Komponente betreibt den globalen Zeitstrahl und den per-Person „Lebensweg". Enthält die vollständige Fall-Abdeckung (leere Jahre, wenige Briefe, hunderte Briefe, undatiert) und die drei Gruppierungs-Modi.
Eine Achse, sieben Bausteine. Die Zeit ist die Achse — Lebensereignisse & Jahre als zentrierte Pillen unterbrechen den Faden (Text wird nie von der Linie gekreuzt), Welt-Ereignisse legen sich als Bänder quer, Briefe verdichten sich adaptiv.
Person-Daten. Zentriert, gefüllt — unterbricht die Achse. Glyphen aus personLifeDates.ts.PERSONAL — Umzug, Auswanderung. Mint-Rand. Editierbar im Kurator-Editor.HISTORICAL — Krieg, Inflation. Gedämpftes Band quer über die Achse als Kontext./documents/[id].MonthBucket / aggregateToYears.UNKNOWN-Briefe im „Ohne Datum"-Eimer am Ende.Gleicher Ausschnitt (1914–1915), dreimal gerendert. Nur die losen Briefe ordnen sich um — die Achse bleibt stabil. Schmale Spaltenbreite = Phone-/Lebensweg-Form derselben Komponente.
TimelineEvent.documents). Erzählende Cluster statt Listen.Ein durchgehender Zeitstrahl (Desktop, zentrale Achse) von 1899 bis „Ohne Datum". Jeder Dichte-Fall kommt genau einmal vor — von leeren Jahren bis zu hunderten Briefen.
Sommer, ca.) ·
⑥ undatierte Briefe (Ohne-Datum-Eimer).
RANGE-Einträge (Krieg) erscheinen einmal im Start-Jahr mit Spannen-Marker, nicht in jedem überspannten Jahr.Eine Render-Logik für alle datierten Einträge — dateLabel.ts, gespeist von DatePrecision.
| DatePrecision | Darstellung | Beispiel | Wirkung auf der Achse |
|---|---|---|---|
| DAY | vollständiges Datum | 28. Juli 1914 | exakte Sortierung im Jahres-Band |
| MONTH | Monat + Jahr | Juli 1914 | Monats-Sortierung |
| SEASON | Jahreszeit + Jahr | Sommer 1914 | grobe Reihung |
| YEAR | nur Jahr | 1914 | ans Band-Ende |
| APPROX | „ca." + Jahr | ca. 1914 | mit „ca."-Marker |
| RANGE | Start–Ende | 1914–1918 | Start-Jahr, Spannen-Marker, nicht dupliziert |
| UNKNOWN | undatiert | Ohne Datum | eigener Eimer am Ende |
Identisches Markup & identische Daten. Nur die Achs-Position wechselt per Container-Query.
<ol>) — Screenreader liest linear.<TimelineView personId>), gefiltert auf eine Person. Rail-Tauglichkeit = Stärke von A.Aus frontend/src/routes/layout.css. Keine Hardcodes in der Komponente.
| Rolle | Token | Wert | Einsatz |
|---|---|---|---|
| Achse / Knoten / Header | brand-navy | #012851 | Spine, Lebensereignis-Pillen, Jahres-Badges, Titel |
| Akzent / Brief-Punkt | brand-mint | #a1dcd8 | Brief-Punkte, kuratierte Pillen-Ränder, Sparkline, Dark-Mode-Auswahl |
| Historisch / Welt | tag-slate | #607080 | Welt-Bänder & Glyphe ◍ — gedämpft |
| Tag-Chip-Farben | --c-tag-* (Wurzel) | sage · sienna · amber · violet — Farbe vom Wurzel-Tag, Punkt + Label | |
| Seite / Karte / Linie | canvas · surface · line | #f0efe9 · #ffffff · #e4e2d7 | |
| Text sekundär | text-ink-3 | #6b7280 | Meta-Zeilen (4,8:1 auf weiß — AA ✓) |
| Schrift | font-serif · font-sans | Tinos · Montserrat | Namen/Titel serif · Labels/Chrome sans |
| Lebensdaten-Glyphen | personLifeDates.ts | * † ⚭ | Geburt · Tod · Heirat — konsistent mit Personenkarten |
Domain-Ordner frontend/src/lib/timeline/; Route /zeitstrahl; Backend GET /api/timeline.
| Baustein | Komponente / Datei | Verantwortung |
|---|---|---|
| Orchestrator | TimelineView.svelte | Lädt /api/timeline; optionaler personId für globalen vs. Lebensweg-Modus; hält den Gruppierungs-Modus |
| Jahres-Band | YearBand.svelte | Jahres-Badge + Einträge; Lücken-Faltung ruhiger Spannen |
| Ereignis-Pille | EventCard.svelte | PERSONAL / HISTORICAL / abgeleitet; zentrierte Pille bzw. Welt-Band; präzisions-bewusstes Label |
| Brief-Karte | LetterCard.svelte | Einzel-Brief, alternierende Seite, Wurzel-Tag-Chip, Link /documents/[id] |
| Jahres-Strip | YearLetterStrip.svelte | Adaptive Verdichtung ab Schwellwert; 12-Monats-Sparkline aus MonthBucket / aggregateToYears (lib/document/timeline.ts) |
| Datums-Helfer | dateLabel.ts | DatePrecision → deutsches Label; geteilt von Ereignissen & Briefen |
| Kurator-Editor | /zeitstrahl/events/new · [id]/edit | Ereignis anlegen/bearbeiten; Personen- + Dokument-Mehrfach-Picker (Bulk-Linking); WRITE_ALL |
| Quick-Add | DocumentTimelineEventPicker.svelte | Auf /documents/[id]: Ereignis wählen/neu anlegen; verlinkt einen Brief |
| Daten-API | GET /api/timeline | Verschmilzt kuratierte + abgeleitete Ereignisse + Briefe in TimelineDTO (Jahres-Eimer + Ohne-Datum); Filter personId · type · fromYear · toYear |
| Barrierefreiheit | — | Achse = <ol>, chronologische DOM-Reihenfolge; ◍ ✉ * nie nur Farbe — Glyphe + Label; 44px-Tap-Ziele; prefers-reduced-motion; axe in Light & Dark |