Komponentenverzeichnis

Version 1.0 · Stand 16.10.2026 · Light Mode · Vorschau-Projekt (nicht veröffentlicht)

Diese Datei ist die Übergabe-Referenz. In der Bibliothek ist sie unter „Verzeichnis“ (/verzeichnis) lesbar. Entstehungsprotokoll und Prüfstände: docs/DESIGNSYSTEM.md.

1. Stack und Quellen

Quelle der Basiskomponenten: offizielle shadcn-Registry (ui.shadcn.com, new-york-v4). Die Registry-Combobox basiert auf @base-ui/react und ist mit der Radix-Familie nicht kompatibel; stattdessen gilt das offizielle Radix-Rezept Popover + Command.

2. Schichten

3. Basis-UI (@/components/ui/<name>)

4. Kompositionen (@/components/compositions/<datei>)

5. Fachkomponenten (@/components/domain/<datei>)

6. Tokens (src/styles.css)

Alle Hex-/RGBA-Referenzen sind exakt in OKLCH umgerechnet; der Ursprungswert steht als Kommentar daneben.

Textrollen (@utility): text-greeting 30/40 400 · text-page-title 24/32 500 · text-card-title 20/28 500 · text-ui 14/22 · text-meta 13/20 · text-small 12/16 · text-kpi 32/40 600 · text-kpi-compact 24/32 600. Raster: page-container nur Dashboard (fluide ohne Maximalbreite; horizontaler Rand stetig 32→80 px nach Breite des Hauptbereichs als Inline-Size-Container, mobil <768 px 20 px; vertikal 40 px, schmal 24 px), list-container für Listen, Akten und alle Bibliotheksseiten (32 px, mobil 20 px), dashboard-grid (2 × minmax(0, 1fr), 24 px Abstand, einspaltig nach Containerbreite; frühere 2 × max. 480 px abgelöst).

Feldzustände (@utility control-field, gültig seit Nutzerrevision Fokus): Input, Textarea, Select-Trigger, NativeSelect, InputGroup, Combobox-Feld, Kalender-Dropdown. Priorität Disabled > Invalid > Fokus > Hover > Default; Rahmen konstant 1 px. Fokus = 1 px Blau + ein 2-px-Akzent, Fläche #F7F7F7, kein weißer Spalt. Fehler bleibt beim Fokus rot. Readonly durchgezogene neutrale Kontur auf Grau, fokussierbar. Checkbox/Radio/Switch: Hover nur bei gültigen, aktiven Kontrollen; Disabled überschreibt Invalid/Gewählt. Fehler am Gruppenbesitzer + Fokus/Open im Kind → roter Akzent. Gruppen (InputGroup, Combobox) besitzen den Fokusrahmen allein; innere Buttons zeigen Fokus als Auswahlfüllung. Buttons/Links/Checkbox/Radio/Switch/Slider/Tabs/Kalendertage: nur Tastaturfokus als 2-px-Outline Blau (Fallback in @layer base mit :where, Spezifität 0, kein !important).

7. Formatierung (@/lib/format, @/lib/date)

8. Demo-Daten

• @/lib/demo/immo: fiktive Daten P1 Hofgarten 12 (U1–U3), P2 Parkblick 8 (U4), Mietverhältnisse T1–T3, Forderungen Nov 2025–Okt 2026, Zahlungen, Ausgaben, Dokumente D1–D12 (7 × P1, 4 × P2, D3 nicht zugeordnet), Aufgaben A1–A3, Aktivitäten. Geld in Cent, Tage als JJJJ-MM-TT, Stichtag 16.10.2026.
• Selektoren: periodSummary, monthlySeries, chargeViews, occupancy, taskStats, Filterfunktionen. Mutationen: recordPayment, setTaskStatus, addTask, addDocument, assignDocument.
• @/lib/demo/store: useDemo() und demoStore im Arbeitsspeicher; reset() bzw. Neuladen stellt den Ausgangsstand wieder her (inkl. Zeitraum Oktober 2026).
• @/lib/demo/search: URL-Parameter je Beispielseite.
• Soll-Werte Oktober: 2.500 € Soll, 1.200 € erhalten, 1.300 € offen, 700 € Cashflow, 2 überfällige Forderungen.

9. Nutzungsregeln

1. Erst ui, dann compositions, dann domain verwenden; keine eigene Basis bauen, wenn shadcn sie liefert.
2. Farben nur über semantische Tokens; keine zusätzlichen Akzentfarben.
3. Status immer Farbe + Icon + Text (StatusBadge).
4. Kontrollen 40 px, Filter 36 px Desktop / 44 px mobil (innere Gruppenfelder erben die Höhe), mobile Trefferflächen mindestens 44 px; Radius 8 (Kontrolle) und 12 (Karte).

4a. Hauptaktion = Button default (Navy); Blau (accent) nur optional. Keine zweite Primärfarbe. 4b. Feldartige Kontrollen nutzen control-field; keine eigenen Fokusringe oder !important-Schatten hinzufügen.

1. Fehlende Werte nie schätzen: Facts/MissingValue verwenden.
2. Geld als Cent, Kalendertage als Schlüssel; nie toISOString() oder toLocaleDateString() für Kalendertage.
3. Kennzahlen und Diagramme nur aus Selektoren ableiten.
4. Destruktive Aktionen mit AlertDialog bestätigen.
5. Neue Bibliotheksbereiche in src/lib/library-sections.ts registrieren; mit inSidebar: false bleibt ein Bereich registriert, erscheint aber nicht als Menüpunkt der Bibliotheks-Sidebar.

10. Bereiche

Offen bzw. bewusste Grenzen: Hover/Pressed nicht vollständig vermessen, Demo-Zustand nicht dauerhaft gespeichert, Dokumentvorschau als Platzhalter, keine Backends.

11. Abweichungen von der sevdesk-Referenz

12. Wiederverwendung im ImmoSystem24-Demoprojekt

Dieser Workspace bietet in dieser Sitzung keine Registrierung dieses Projekts als auswählbares Lovable-Designsystem; eine Registrierung ist nicht erfolgt. Nutzbare Wege:

1. Remix/Kopie dieses Projekts (empfohlen): enthält Tokens, Komponenten, Demo-Daten und Tests. Danach Bibliotheksrouten optional entfernen, src/components/*, src/lib/* und src/styles.css behalten.
2. Gezielte Übernahme in ein bestehendes TanStack-Start-/shadcn-Projekt:
3. src/styles.css (Tokens, Textrollen, Raster) übernehmen bzw. Token-Blöcke einfügen; Inter per <link> im Root-Head laden; Cabinet Grotesk lokal aus public/fonts/ per @font-face (+ Lizenzdatei) übernehmen.
4. src/components/ui (angepasste shadcn-Dateien), src/components/compositions, src/components/domain kopieren.
5. src/lib/format.ts, date.ts, selection.ts, table-filters.ts, upload.ts, utils.ts und bei Bedarf src/lib/demo/* kopieren.
6. Pakete aus Abschnitt 1 in denselben Hauptversionen installieren.
7. Tests aus src/test mitnehmen und ausführen (bunx vitest run).
8. Fachkomponenten an echte Daten anbinden, indem immo.ts-Typen beibehalten und die Selektoren mit echten Datensätzen gespeist werden; der Demo-Store wird dabei ersetzt.

Erweiterung H1 (Produktbeispiele)

Keine neuen generischen Kompositionen: alle Bausteine sind bislang seitenspezifisch und nutzen vorhandene shadcn-Basis.

Erweiterung H2 (Produktbeispiele)