{
"hinweis": "Bauteile aus packages/design-system. Namen und Props sind deutsch, mit Absicht. typen = .d.ts, prompt = Einsatz, Register und Beispiel.",
"gruppen": [
{
"gruppe": "bausteine",
"bauteile": [
{
"name": "Avatar",
"datei": "packages/design-system/components/bausteine/Avatar.jsx",
"typen": "/** Klebezettel je Mensch: Personenfarbe plus Initiale, optional mit Namen. */\nexport interface AvatarProps {\n /** Schluessel aus Familie Sonntag (\"anna\", \"tobias\", \"felix\", \"lena\", \"sofia\", \"grete\", \"werner\", \"hilde\") oder ein Objekt {name, initiale, platz}. */\n wer?: string | { name: string; initiale: string; platz: number };\n /** Durchmesser in px. 20 im Kartenkopf, 32 im Filter, 44 am iPhone, 56 fuer Kinder. */\n groesse?: number;\n /** Name neben dem Kreis - fuer Leiste und Listen. */\n mitName?: boolean;\n /** Der schwarze Kreis mit zwei Koepfen: \"alle\". */\n alle?: boolean;\n /** Im Personenfilter: true = schwarzer Ring, false = grau zurueckgenommen. */\n gewaehlt?: boolean | null;\n ring?: boolean;\n onClick?: () => void;\n style?: React.CSSProperties;\n}\nexport function Avatar(props: AvatarProps): JSX.Element;",
"prompt": "Der Klebezettel eines Menschen – Personenfarbe mit Initiale, nie Farbe allein.\n\n```jsx\n\n\n```\n\nPersonenfarben sind über die ganze App gleich: Anna Mint, Tobias Türkis, Felix Flieder, Lena Pfirsich, Sofia Himmel. Text darauf ist immer Tinte – auch nachts, denn der Zettel bleibt hell."
},
{
"name": "DekoForm",
"datei": "packages/design-system/components/bausteine/DekoForm.jsx",
"typen": "/** Spielerische Form als Deko auf gelben und rosa Flaechen - Stern, Herz, Kleks, Puzzleteil. */\nexport interface DekoFormProps {\n form?: \"stern\" | \"herz\" | \"kleks\" | \"kreis\" | \"puzzle\";\n groesse?: number;\n /** Immer die dunklere Stufe derselben Flaechenfarbe: var(--gelb-dunkel), var(--blau-dunkel). */\n farbe?: string;\n drehung?: number;\n style?: React.CSSProperties;\n}\nexport function DekoForm(props: DekoFormProps): JSX.Element;",
"prompt": "Die spielerische Form auf einer gelben oder rosa Fläche – Freude, kein Schmuck.\n\n```jsx\n\n```\n\nDie Elternfläche braucht `position: relative` und `overflow: hidden`. Nie auf Karten mit Bedienelementen, nie im Safe, nie bei Finanzen."
},
{
"name": "FahrtPille",
"datei": "packages/design-system/components/bausteine/FahrtPille.jsx",
"typen": "/** Blaue Pille fuer eine Fahrt, die an einer anderen Sache haengt. */\nexport interface FahrtPilleProps {\n /** Wer faehrt - \"Papa\", \"Anna\", \"Jonas' Mama\". */\n wer?: string;\n /** Uhrzeit als HH:MM. */\n zeit?: string;\n /** Auto aus dem Buendel - \"Kombi\". */\n auto?: string;\n children?: React.ReactNode;\n style?: React.CSSProperties;\n}\nexport function FahrtPille(props: FahrtPilleProps): JSX.Element;",
"prompt": "Die blaue Pille, die eine Fahrt an eine andere Sache hängt – Bündel statt Einzelteile.\n\n```jsx\n\n```\n\nBlau heisst Fahrt, immer. Der Text lautet „Papa fährt 15:40 · Kombi“ — wer und wann ohne Trenner, das Auto mit Punkt. Uhrzeit als `15:40`, nie \"15.40\" und nie \"15 Uhr\"."
},
{
"name": "Icon",
"datei": "packages/design-system/components/bausteine/Icon.jsx",
"typen": "/** Zeichen aus dem Lucide-Satz, inline gerendert und über `stroke` eingefärbt. */\nexport interface IconProps {\n /** Sach-Rolle (\"fahrt\", \"schule\", \"essen\", \"familie\", \"ritual\", \"vorschlag\", ...) oder Lucide-Dateiname (\"bell\"). */\n name: string;\n /** Kantenlänge in px. Standard 16. */\n groesse?: number;\n /** Strichstärke. Standard 2 — wie im Satz. */\n strich?: number;\n /** Strichfarbe. Standard currentColor. */\n farbe?: string;\n /** Wenn gesetzt, wird das Zeichen für VoiceOver benannt; sonst ist es dekorativ. */\n titel?: string;\n style?: React.CSSProperties;\n}\nexport function Icon(props: IconProps): JSX.Element | null;\nexport const SACHEN: Record;",
"prompt": "Ein Zeichen aus dem Lucide-Satz — für alles, was ein Symbol braucht.\n\n```jsx\n\n```\n\n- `name` nimmt eine Sach-Rolle (`fahrt`, `schule`, `sport`, `essen`, `arzt`, `musik`, `freude`, `familie`, `ritual`, `schwimmen`, `vorschlag`) oder direkt einen Lucide-Dateinamen (`bell`, `search`, `plus`).\n- Das Zeichen wird inline gerendert und über `stroke: currentColor` eingefärbt — es trägt also die Textfarbe seines Elternteils und kommt in Screenshots und Exporten mit.\n- Quelle sind die Dateien in `assets/icons/`; `components/bausteine/zeichen.js` hält ihren Pfad-Inhalt. Kommt ein Zeichen dazu: Datei nach `assets/icons/` legen und `zeichen.js` neu erzeugen — nie ein SVG von Hand zeichnen.\n- Ohne `titel` ist das Zeichen dekorativ (`aria-hidden`) — richtig, weil neben jedem Zeichen Text steht."
},
{
"name": "Knopf",
"datei": "packages/design-system/components/bausteine/Knopf.jsx",
"typen": "/**\n * Handlungsknopf. Primär schwarz mit hellem Text („Ich fahre“), Zweitknopf beige („Später“),\n * Klein ohne Fläche für Nebenwege. Schriftgrad und Polster wachsen mit der Zielfläche.\n */\nexport interface KnopfProps {\n art?: \"primaer\" | \"zweit\" | \"klein\";\n /** Zielfläche: Zeiger 32 / 12,5 px, Finger 44 / 14 px, Kind 56 / 16 px. */\n ziel?: \"zeiger\" | \"finger\" | \"kind\";\n /** Sach-Rolle oder Lucide-Name eines Zeichens links im Knopf. */\n zeichen?: string;\n /** Inaktiv ist eine eigene Rolle, keine Deckkraft. */\n inaktiv?: boolean;\n /** Füllt die Breite - für iPhone-Karten. */\n breit?: boolean;\n /** Erlaubt Zeilenumbruch in der Beschriftung. Standard aus: ein Knopf ist einzeilig;\n * wird die Reihe zu eng, stapelt die Knopfreihe die Knöpfe in voller Breite. */\n umbruch?: boolean;\n type?: \"button\" | \"submit\" | \"reset\";\n children?: React.ReactNode;\n onClick?: (e: React.MouseEvent) => void;\n style?: React.CSSProperties;\n}\nexport function Knopf(props: KnopfProps): JSX.Element;\n\n/** Die Knopfreihe: nebeneinander, wenn Platz ist, sonst untereinander in voller Breite. */\nexport interface KnopfreiheProps {\n children?: React.ReactNode;\n /** Mindestbreite je Knopf in px, ab der zwei nebeneinander passen. Standard 104. */\n mindest?: number;\n ausrichtung?: \"mitte\";\n style?: React.CSSProperties;\n}\nexport function Knopfreihe(props: KnopfreiheProps): JSX.Element;",
"prompt": "Der Handlungsknopf auf Karten und Flächen — schwarz für den einen Schritt, beige für den zweiten.\n\n```jsx\n\n Ich fahre\n Später\n\nFertig\n```\n\nRegister Family Manager: kurz, zupackend, ein Verb — „Ich fahre“, „Tobias fragen“, „Übernehmen“, „Rückgängig“. Nie „OK“, nie „Abbrechen“ ohne Gegenstand.\n\nEin Knopf ist immer einzeilig. Knöpfe stehen in einer `Knopfreihe`: nebeneinander, wenn beide Platz haben, sonst untereinander in voller Breite — nie ein zweizeiliger Knopf, nie zwei ungleich breite Knöpfe untereinander. `ziel=\"kind\"` gibt 56 px mit 16-px-Schrift, wo Kinder bedienen. `inaktiv` rechnet eigene Rollen statt Deckkraft."
},
{
"name": "Knopfreihe",
"datei": "packages/design-system/components/bausteine/Knopf.jsx",
"typen": null,
"prompt": null
},
{
"name": "Punktgruppe",
"datei": "packages/design-system/components/bausteine/Punktgruppe.jsx",
"typen": "/** Die Punkte rechts im Kartenkopf: wer dabei ist. Initiale in Personenfarbe, bei mehreren ueberlappend. */\nexport interface PunktgruppeProps {\n /** Schluessel aus Familie Sonntag, in der Reihenfolge der Zustaendigkeit. */\n leute?: Array;\n /** Durchmesser in px. Standard 20. */\n groesse?: number;\n style?: React.CSSProperties;\n}\nexport function Punktgruppe(props: PunktgruppeProps): JSX.Element;",
"prompt": "Wer dabei ist – die überlappenden Punkte rechts im Kartenkopf.\n\n```jsx\n\n```\n\nDer Zuständige steht immer zuerst. Alles hat genau einen Zuständigen; fehlt er, trägt die Karte den gestrichelten Offen-Rand und nicht einfach keinen Punkt."
},
{
"name": "SachSymbol",
"datei": "packages/design-system/components/bausteine/SachSymbol.jsx",
"typen": "/** Zeichen der Sache in einem hellen Kreis - steht links im Kartenkopf. */\nexport interface SachSymbolProps {\n /** Sach-Rolle: \"fahrt\" | \"schule\" | \"sport\" | \"essen\" | \"arzt\" | \"musik\" | \"freude\" | \"familie\" | \"ritual\" | \"vorschlag\" | \"schwimmen\". */\n art?: string;\n /** Kreisdurchmesser in px. Standard 26 (Mac), 24 auf dem iPhone. */\n groesse?: number;\n /** Auf farbigen Karten - haelt den Kreis hell. */\n aufFarbe?: boolean;\n titel?: string;\n style?: React.CSSProperties;\n}\nexport function SachSymbol(props: SachSymbolProps): JSX.Element;",
"prompt": "Der helle Kreis mit dem Zeichen der Sache – immer links im Kartenkopf, nie woanders.\n\n```jsx\n\n```\n\nWas für eine Sache es ist, sagt dieses Symbol; wer dabei ist, sagen die Punkte rechts (`Punktgruppe`); was für eine Art es ist, sagt die Kartenfarbe. Kein Menü, kein Chevron im Kopf."
},
{
"name": "Zaehler",
"datei": "packages/design-system/components/bausteine/Zaehler.jsx",
"typen": "/** Rosa Zaehler an Ort, Chip oder Klingel. */\nexport interface ZaehlerProps {\n /** Die Zahl. Bei 0 nicht anzeigen - Leere ist ein leerer Zustand, kein Zaehler. */\n wert?: number | string;\n /** \"akzent\" (Standard) | \"punkt\" (rosa Punkt ohne Zahl, fuer die Klingel). */\n art?: \"akzent\" | \"aufSchwarz\" | \"punkt\";\n groesse?: number;\n /** Beschriftung fuer VoiceOver, z. B. \"3 Sachen im Eingang\". */\n titel?: string;\n style?: React.CSSProperties;\n}\nexport function Zaehler(props: ZaehlerProps): JSX.Element;",
"prompt": "Der rosa Zaehler – am Ort \"Eingang\", am Chip \"Post\", an der Klingel als Punkt.\n\n```jsx\n\n\n```\n\nBei Null zeigen wir keinen Zaehler, sondern nichts – und im Ort selbst den leeren Zustand."
},
{
"name": "ZahlKachel",
"datei": "packages/design-system/components/bausteine/ZahlKachel.jsx",
"typen": "/**\n * Farbige Kachel mit grosser Zahl - der Blick auf die Woche.\n */\nexport interface ZahlKachelProps {\n /** Die Zahl, deutsch geschrieben: \"8,7\", \"2\", \"1\". */\n zahl: string | number;\n /** Einheit direkt an der Zahl: \"h\". */\n einheit?: string;\n /** Ein Satzteil, klein darunter: \"heute verplant\", \"Fahrten heute\", \"offen diese Woche\". */\n beschriftung: string;\n farbe?: \"gelb\" | \"rosa\" | \"blau\";\n form?: \"stern\" | \"herz\" | \"kleks\" | \"kreis\" | \"puzzle\" | \"keine\";\n style?: React.CSSProperties;\n}\nexport function ZahlKachel(props: ZahlKachelProps): JSX.Element;",
"prompt": "Die farbige Kachel mit der grossen Zahl – drei davon stehen im Wochenblick nebeneinander.\n\n```jsx\n\n\n\n```\n\nBeschriftung ohne Verb und ohne Wertung – \"offen diese Woche\", nie \"noch offen!\" und nie ein Fortschrittsbalken daneben."
},
{
"name": "ZustandsPille",
"datei": "packages/design-system/components/bausteine/ZustandsPille.jsx",
"typen": "/** Kleine Pille auf der Karte: \"Kein Fahrer\", \"Abholen 19:00 - Anna\". */\nexport interface ZustandsPilleProps {\n /** \"zustand\" rosa hell (Standard) | \"offen\" gestrichelt (ohne Zustaendigen) | \"ruhig\" hell mit Haarlinie. */\n art?: \"zustand\" | \"offen\" | \"ruhig\";\n children?: React.ReactNode;\n style?: React.CSSProperties;\n}\nexport function ZustandsPille(props: ZustandsPilleProps): JSX.Element;",
"prompt": "Die kleine Pille auf der Karte, die den Zustand der Sache nennt.\n\n```jsx\nKein Fahrer\nAbholen 19:00 · Anna\n```\n\nRegister Family Manager: Sache, Zeit, Mensch – in dieser Reihenfolge, ohne Verb. Rosa heisst hier Akzent und Jetzt, niemals Fehler."
}
]
},
{
"gruppe": "karten",
"bauteile": [
{
"name": "BuendelKarte",
"datei": "packages/design-system/components/karten/BuendelKarte.jsx",
"typen": "/** Eine Karte fuer Gleichzeitiges: mehrere Sachen zur selben Stunde, jede als Zeile. */\nexport interface BuendelTeil {\n titel: string;\n art?: \"termin\" | \"fahrt\" | \"familie\";\n /** Sach-Symbol, wenn es nicht aus der Art folgt. */\n symbol?: string;\n zeit?: string;\n leute?: string[];\n /** Ohne Zustaendigen - die Zeile bekommt den gestrichelten Offen-Rand. */\n offen?: boolean;\n}\nexport interface BuendelKarteProps {\n /** Was die Stunde traegt: \"Drei Sachen um 16:00\". */\n titel: string;\n zeit?: string;\n teile: BuendelTeil[];\n style?: React.CSSProperties;\n}\nexport function BuendelKarte(props: BuendelKarteProps): JSX.Element;",
"prompt": "Die Antwort auf Gleichzeitiges: eine Karte, drei Zeilen – statt drei Karten, die sich stapeln.\n\n```jsx\n\n```\n\nZeilen behalten ihre Bedeutungsfarbe. Eine Zeile ohne Zuständigen wird laut gezeigt: gestrichelter Offen-Rand, nie stillschweigend leer."
},
{
"name": "Karte",
"datei": "packages/design-system/components/karten/Karte.jsx",
"typen": "/**\n * Die Karte in fuenf Arten. Die Farbe sagt die Art, das Symbol die Sache, die Punkte die Leute.\n */\nexport interface KarteProps {\n /** \"termin\" beige | \"fahrt\" blau | \"familie\" gelb | \"vorschlag\" gestrichelt grau | \"offen\" gestrichelt rosa. */\n art?: \"termin\" | \"fahrt\" | \"familie\" | \"vorschlag\" | \"offen\";\n /** Kartentitel, ein Gegenstand: \"Rückfahrt Auswärtsspiel\". */\n titel: string;\n /** Zweitzeile: Ort oder Bündel-Teile, mit \" · \" getrennt. */\n ort?: React.ReactNode;\n /** Zeitspanne als \"16:00 – 17:00\" (Halbgeviertstrich mit Leerzeichen). */\n zeit?: string;\n /** Wer dabei ist; der Zustaendige zuerst. */\n leute?: string[];\n /** Sach-Symbol, wenn es nicht aus der Art folgt: \"schule\", \"sport\", \"arzt\", \"musik\". */\n symbol?: string;\n /** \"kurz\" (78 px) oder \"hoch\" (132 px) - fuer das Stundenraster. */\n hoehe?: \"kurz\" | \"hoch\";\n /** Zustands- und Fahrt-Pillen. */\n pillen?: React.ReactNode;\n /** Handlungsknoepfe; bei Vorschlaegen immer zwei. */\n knoepfe?: React.ReactNode;\n /** Kleine Zeile unter dem Inhalt, z. B. \"Vorschlag von Albert\". */\n unterzeile?: React.ReactNode;\n /** Einzeiler fuer Listen: Symbol, Titel, Zeit, Punkt. */\n kompakt?: boolean;\n klickbar?: boolean;\n /** Leicht gekippt, wie ein liegender Klebezettel. */\n gekippt?: boolean;\n children?: React.ReactNode;\n style?: React.CSSProperties;\n}\nexport function Karte(props: KarteProps): JSX.Element;\nexport function KarteVorschlagKnoepfe(props: { uebernehmen?: string; zurueck?: string; onUebernehmen?: () => void; onZurueck?: () => void }): JSX.Element;",
"prompt": "Die Karte – das Ding, aus dem Heute, Woche und Kalender bestehen. Ein Datenmodell, viele Ansichten.\n\n```jsx\nKein Fahrer}\n knoepfe={Ich fahre} />\n\n} />\n```\n\nRegister Family Manager, kurz und ruhig. Die Bedeutungen werden nicht getauscht: blau ist Fahrt, gelb ist Familie, gestrichelt rosa heisst \"ohne Zuständigen\". Ein Vorschlag hat immer zwei Knöpfe – Albert erledigt nie still."
},
{
"name": "KarteVorschlagKnoepfe",
"datei": "packages/design-system/components/karten/Karte.jsx",
"typen": null,
"prompt": null
},
{
"name": "Kartenkopf",
"datei": "packages/design-system/components/karten/Kartenkopf.jsx",
"typen": "/** Der Kopf jeder Karte: Sach-Symbol links, Punktgruppe rechts. */\nexport interface KartenkopfProps {\n /** Sach-Rolle - bestimmt das Symbol, nicht die Kartenfarbe. */\n art?: string;\n leute?: Array;\n /** Durchmesser des Symbolkreises; die Punkte folgen mit 77 %. */\n groesse?: number;\n titel?: string;\n style?: React.CSSProperties;\n}\nexport function Kartenkopf(props: KartenkopfProps): JSX.Element;",
"prompt": "Der Kartenkopf – Symbol links, Leute rechts, nichts dazwischen.\n\n```jsx\n\n```\n\nDrei Träger, drei Orte: Kartenfarbe sagt die Art, Symbol sagt die Sache, Punkte sagen die Leute. Wird nur von `Karte` gebraucht – eigenständig nur, wenn du eine eigene Kartenform baust."
},
{
"name": "KonfliktKarte",
"datei": "packages/design-system/components/karten/KonfliktKarte.jsx",
"typen": "/** Zwei Sachen treffen sich. Sichtbar, nie blockierend, mit naechstem Schritt. */\nexport interface KonfliktKarteProps {\n /** Was sich trifft, als Feststellung: \"Lena schwimmt und Felix spielt - beides 16:00.\" */\n titel: string;\n /** Warum es klemmt, ein Satz. */\n erklaerung?: React.ReactNode;\n wer?: string[];\n /** Der naechste Schritt als Verb: \"Tobias fragen\". */\n schritt?: string;\n onSchritt?: () => void;\n zweitSchritt?: string;\n onZweitSchritt?: () => void;\n style?: React.CSSProperties;\n}\nexport function KonfliktKarte(props: KonfliktKarteProps): JSX.Element;",
"prompt": "Die Karte für zwei Sachen, die sich treffen – sie zeigt es und hält niemanden auf.\n\n```jsx\n\n```\n\nRegister Family Manager. Kein Rot, kein Ausrufezeichen, kein \"Fehler\" – die Karte stellt fest und nennt einen Schritt."
},
{
"name": "SpurenJeMensch",
"datei": "packages/design-system/components/karten/SpurenJeMensch.jsx",
"typen": "/** Je Mensch eine Spur ueber die Stunden - die dritte Antwort auf Gleichzeitiges. */\nexport interface Spur {\n titel: string;\n /** Stunde als Dezimalzahl: 16.5 heisst 16:30. */\n von: number;\n bis: number;\n art?: \"termin\" | \"fahrt\" | \"familie\";\n offen?: boolean;\n}\nexport interface SpurenJeMenschProps {\n /** Schluessel aus Familie Sonntag, eine Spur je Person. */\n leute: string[];\n /** Spuren je Personenschluessel. */\n spuren: Record;\n /** Erste und letzte Stunde der Achse. */\n von?: number;\n bis?: number;\n style?: React.CSSProperties;\n}\nexport function SpurenJeMensch(props: SpurenJeMenschProps): JSX.Element;",
"prompt": "Spuren je Mensch – wenn drei Sachen gleichzeitig laufen und die Frage \"wer wo\" lautet.\n\n```jsx\n\n```\n\nJede Spur trägt Name und Avatar, nicht nur Farbe. Dieselben Daten wie im Stundenraster – ein Datenmodell, viele Ansichten."
},
{
"name": "VorschlagKarte",
"datei": "packages/design-system/components/karten/VorschlagKarte.jsx",
"typen": "/**\n * Alberts Vorschlag am iPhone: gelbe Karte mit Formen, zwei Knoepfe, Unterzeile.\n */\nexport interface VorschlagKarteProps {\n /** Eine Beobachtung: \"Samstag fehlt ein Fahrer.\" */\n titel: string;\n /** Zwei kurze Saetze: was er sieht, was daraus folgt. */\n text?: React.ReactNode;\n /** Erster Knopf, ein Verb: \"Tobias fragen\", \"Übernehmen\". */\n schritt?: string;\n onSchritt?: () => void;\n /** Zweiter Knopf. Es gibt immer zwei - Albert erledigt nie still. */\n zweitSchritt?: string;\n onZweitSchritt?: () => void;\n unterzeile?: string;\n style?: React.CSSProperties;\n}\nexport function VorschlagKarte(props: VorschlagKarteProps): JSX.Element;",
"prompt": "Alberts Vorschlag auf dem iPhone – gelb, mit Formen, immer mit zwei Knöpfen.\n\n```jsx\n\n```\n\nSo klingt Albert: eine Beobachtung, eine Frage, zwei Knöpfe. Nie \"Ich habe für dich…\". Auf dem Mac nimmst du stattdessen `` - dort ist der Vorschlag gestrichelt und ohne Füllung."
}
]
},
{
"gruppe": "kinder",
"bauteile": [
{
"name": "TalerStand",
"datei": "packages/design-system/components/kinder/TalerStand.jsx",
"typen": "/**\n * Der Taler-Stand eines Kindes: grosse Zahl, Sparziel als Streifen, Regal der Eltern.\n */\nexport interface TalerStandProps {\n /** Das Kind - jedes Kind sieht nur den eigenen Stand. */\n wer?: string;\n /** Erreichte Taler. Nie negativ, es gibt keinen Abzug. */\n taler: number;\n /** Taler, die das Sparziel kostet. */\n ziel?: number;\n /** Name des Sparziels: \"Skateboard\". */\n zielName?: string;\n /** Was das Kind geschafft hat, als Pillen. Nie eine Quote. */\n geschafft?: string[];\n /** Das Regal der Eltern: was man sich holen kann und was es kostet. */\n regal?: Array<{ name: string; taler: number }>;\n style?: React.CSSProperties;\n}\nexport function TalerStand(props: TalerStandProps): JSX.Element;",
"prompt": "Der Taler-Stand für Kinder – Register Vorleser, kurze Sätze, grosse Wörter.\n\n```jsx\n\n```\n\nNicht verhandelbar: keine Rangliste, kein Geschwistervergleich, kein Abzug, kein roter Stand, kein Serien-Druck. Der Streifen zeigt das Sparziel – nie, wie viel jemand \"aufholen\" muss. Zielflächen 56 px."
}
]
},
{
"gruppe": "kopf",
"bauteile": [
{
"name": "Anredezeile",
"datei": "packages/design-system/components/kopf/Anredezeile.jsx",
"typen": "/** Die grosse Zeile oben auf der Flaeche - Bricolage 800, eng gelaufen. */\nexport interface AnredezeileProps {\n /** \"Guten Morgen, Anna.\" | \"Mittwoch\" | \"Woche 36\" */\n children: React.ReactNode;\n /** 40 px auf dem Mac, 30 px auf dem iPhone. */\n geraet?: \"mac\" | \"phone\";\n /** Kleine Zeile darunter: \"3. September · KW 36\". */\n nebenzeile?: React.ReactNode;\n style?: React.CSSProperties;\n}\nexport function Anredezeile(props: AnredezeileProps): JSX.Element;",
"prompt": "Die grosse Zeile, mit der eine Fläche anfängt.\n\n```jsx\nGuten Morgen, Anna.\nMittwoch\n```\n\nRegister Erzähler, wenn sie grüßt; Family Manager, wenn sie nur benennt. Punkt am Satzende, nie ein Ausrufezeichen. \"du\" zum Einzelnen, \"ihr\" zur Familie."
},
{
"name": "DatumPille",
"datei": "packages/design-system/components/kopf/DatumPille.jsx",
"typen": "/** Die schwarze Pille mit der Spanne: \"1. – 7. September\". */\nexport interface DatumPilleProps {\n /** Datum oder Spanne. Halbgeviertstrich mit Leerzeichen: \"1. – 7. September\". */\n children: React.ReactNode;\n onClick?: () => void;\n aufklappbar?: boolean;\n style?: React.CSSProperties;\n}\nexport function DatumPille(props: DatumPilleProps): JSX.Element;",
"prompt": "Die schwarze Datum-Pille unter der Anredezeile.\n\n```jsx\n1. – 7. September\n```\n\nDatum als `Mi 3.9.` oder `3. September`; Spannen mit Halbgeviertstrich und Leerzeichen."
},
{
"name": "Kopfzeile",
"datei": "packages/design-system/components/kopf/Kopfzeile.jsx",
"typen": "/**\n * Der Kopf jeder Flaeche: Suchfeld mit rosa Lupe, Bereichs-Chips, drei Kreise rechts.\n */\nexport interface KopfzeileProps {\n platzhalter?: string;\n /** Bereichs-Chips, gestrichelt: \"Termine\", \"Fahrten\", \"Aufgaben\", \"Dokumente\", { name: \"Post\", zaehler: 2 }. */\n bereiche?: Array;\n gewaehlterBereich?: string;\n onBereich?: (name: string) => void;\n onSuche?: (e: React.ChangeEvent) => void;\n /** Rosa Punkt an der Klingel, wenn etwas Neues da ist. */\n klingelPunkt?: boolean;\n onKlingel?: () => void;\n onNachrichten?: () => void;\n /** Oeffnet das Schnellmenue \"Schnell anlegen\". */\n onPlus?: () => void;\n style?: React.CSSProperties;\n}\nexport function Kopfzeile(props: KopfzeileProps): JSX.Element;",
"prompt": "Der Kopf jeder Fläche auf dem Mac und iPad – Suche links, drei Kreise rechts.\n\n```jsx\n setMenue(true)} />\n```\n\nDie Reihenfolge der Kreise steht fest: Klingel, Nachrichten, Plus – Plus ist rosa und immer der letzte. Chips sind gestrichelt, weil sie Bereiche einschränken und nichts anlegen."
},
{
"name": "PersonenFilter",
"datei": "packages/design-system/components/kopf/PersonenFilter.jsx",
"typen": "/**\n * Die Kreise, mit denen man die Flaeche auf Leute einschraenkt.\n */\nexport interface PersonenFilterProps {\n /** Schluessel aus Familie Sonntag, in fester Reihenfolge. */\n leute: string[];\n /** Leeres Feld heisst alle. */\n gewaehlt?: string[];\n /** 32 px auf dem Mac, 44 px am iPhone, 56 px im Kinderbereich. */\n groesse?: number;\n onWahl?: (gewaehlt: string[]) => void;\n style?: React.CSSProperties;\n}\nexport function PersonenFilter(props: PersonenFilterProps): JSX.Element;",
"prompt": "Der Personenfilter – Kreise, kein Auswahlmenü.\n\n```jsx\n\n```\n\nDer erste Kreis ist schwarz mit zwei Köpfen und heisst \"alle\". Personenfarben sind überall dieselben; jeder Kreis trägt seine Initiale, damit Farbe nicht allein trägt."
},
{
"name": "SchnellMenue",
"datei": "packages/design-system/components/kopf/SchnellMenue.jsx",
"typen": "/** Das Menue am Plus-Kreis: Termin, Aufgabe, Fahrt, Dokument scannen, Kontakt, Notiz. */\nexport interface SchnellMenueEintrag { name: string; zeichen?: string; taste?: string }\nexport interface SchnellMenueProps {\n titel?: string;\n eintraege?: SchnellMenueEintrag[];\n onWahl?: (name: string) => void;\n style?: React.CSSProperties;\n}\nexport function SchnellMenue(props: SchnellMenueProps): JSX.Element;",
"prompt": "Das Schnellmenü hinter dem rosa Plus.\n\n```jsx\n anlegen(art)} />\n```\n\nSechs Einträge, Gegenstände statt Verben – \"Termin\", nicht \"Termin anlegen\". Die Tastenkürzel stehen nur auf dem Mac."
},
{
"name": "SpannenRegler",
"datei": "packages/design-system/components/kopf/SpannenRegler.jsx",
"typen": "/** Die Spanne der Ansicht: Heute, 3 Tage, Mo – Fr, Mo – So, Monat. */\nexport interface SpannenReglerProps {\n spannen?: string[];\n gewaehlt?: string;\n onWahl?: (spanne: string) => void;\n /** \"finger\" gibt 44 px fuer iPhone und iPad. */\n ziel?: \"zeiger\" | \"finger\";\n style?: React.CSSProperties;\n}\nexport function SpannenRegler(props: SpannenReglerProps): JSX.Element;",
"prompt": "Der Regler für die Spanne – dieselben Daten, andere Weite.\n\n```jsx\n\n```\n\nDie Reihenfolge steht fest und wird nicht sortiert: Heute, 3 Tage, Mo – Fr, Mo – So, Monat. Halbgeviertstrich mit Leerzeichen in den Beschriftungen."
}
]
},
{
"gruppe": "leiste",
"bauteile": [
{
"name": "LeisteMac",
"datei": "packages/design-system/components/leiste/LeisteMac.jsx",
"typen": "/**\n * Die schwarze Leiste auf dem Mac - voll (220 px) oder eingeklappt (72 px) als Block oder als Pille.\n */\nexport interface LeisteOrt { name: string; zeichen: string; zaehler?: number }\nexport interface LeisteGruppe { gruppe: string; eintraege: LeisteOrt[] }\nexport interface LeisteMacProps {\n /** Der Ort, auf dem man steht: \"Heute\" | \"Woche\" | \"Eingang\" | \"Essen\" | ... */\n aktiverOrt?: string;\n /** Gruppen der Navigation. Standard: Flächen, Bereiche, Persönlich. */\n orte?: LeisteGruppe[];\n eingeklappt?: boolean;\n /** Eingeklappt gibt es zwei Fassungen: schmaler \"block\" oder rundum abgerundete \"pille\",\n * bei der der aktive Ort als rosa Kreis seitlich heraustritt. */\n fassung?: \"block\" | \"pille\";\n /** Der Mensch unten in der Leiste. */\n ich?: string;\n onWahl?: (ort: string) => void;\n onKlappen?: () => void;\n onProfil?: () => void;\n style?: React.CSSProperties;\n}\nexport function LeisteMac(props: LeisteMacProps): JSX.Element;\nexport const ORTE: LeisteGruppe[];",
"prompt": "Die schwarze Leiste des Mac – Logo, drei Gruppen, unten der Mensch.\n\n```jsx\n\n\n```\n\nDer aktive Ort trägt einen rosa Strich links und ein aufgehelltes Feld. Eingeklappt als `fassung=\"pille\"` tritt er als rosa Kreis seitlich heraus und die Leiste beult sich um ihn. Albert steht nicht in der Leiste – er ist kein Ort.\n\nDas Logo lädt aus `assets/logo-albert-hell.png`; setze auf `` `data-albert-logo=\"\"`, wenn es woanders liegt."
},
{
"name": "LeistePhone",
"datei": "packages/design-system/components/leiste/LeistePhone.jsx",
"typen": "/**\n * Die schwarze Leiste unten am iPhone: Heute, Woche, Plus, Eingang, Ich.\n */\nexport interface LeistePhoneProps {\n aktiverOrt?: string;\n plaetze?: Array<{ name: string; zeichen: string; zaehler?: number; plus?: boolean }>;\n onWahl?: (ort: string) => void;\n onPlus?: () => void;\n style?: React.CSSProperties;\n}\nexport function LeistePhone(props: LeistePhoneProps): JSX.Element;\nexport const PLAETZE: Array<{ name: string; zeichen: string; zaehler?: number; plus?: boolean }>;",
"prompt": "Die Leiste am unteren Rand des iPhones – fünf Plätze, nur das Plus tritt heraus.\n\n```jsx\n\n```\n\nDer aktive Ort ist rosa unterstrichen, der Eingang trägt seinen rosa Zaehler. Zielfläche 44 px, das Plus 56 px – es wird auch von Kindern gedrückt."
}
]
},
{
"gruppe": "scan",
"bauteile": [
{
"name": "ScannerFluss",
"datei": "packages/design-system/components/scan/ScannerFluss.jsx",
"typen": "/**\n * Der Scanner-Fluss: Kamera mit Kantenrahmen, Seitenstapel, Vorschlagskarte.\n */\nexport interface ScannerVorschlag {\n /** Was Albert gelesen hat, als Gegenstand: \"Rechnung Musikschule\". */\n titel: string;\n absender?: string;\n /** Betrag deutsch: \"48,00 €\". */\n betrag?: string;\n /** Frist als Datum: \"18. September\". */\n frist?: string;\n /** Wohin es soll: \"Wichtiges › Verträge\". */\n ablage?: string;\n}\nexport interface ScannerFlussProps {\n schritt?: \"kamera\" | \"stapel\" | \"vorschlag\";\n /** Zahl der aufgenommenen Seiten. */\n seiten?: number;\n vorschlag?: ScannerVorschlag;\n onAufnehmen?: () => void;\n onUebernehmen?: () => void;\n onZurueck?: () => void;\n style?: React.CSSProperties;\n}\nexport function ScannerFluss(props: ScannerFlussProps): JSX.Element;",
"prompt": "Der Scanner – drei Schritte: Kamera, Stapel, Vorschlag.\n\n```jsx\n\n```\n\nDer Vorschlag läuft im Register Sachbearbeiter: nüchtern, vollständig, kein Schmuck, keine Formen. „Übernehmen“ und „Rückgängig“ stehen immer beide da — Albert legt nichts still ab."
}
]
},
{
"gruppe": "website",
"bauteile": [
{
"name": "Akkordeon",
"datei": "packages/design-system/components/website/Akkordeon.jsx",
"typen": "/** Fragen und kurze Antworten, eine offen. */\nexport interface Frage { frage: string; antwort: React.ReactNode }\nexport interface AkkordeonProps {\n fragen: Frage[];\n /** Index der anfangs offenen Frage; -1 fuer keine. */\n offen?: number;\n style?: React.CSSProperties;\n}\nexport function Akkordeon(props: AkkordeonProps): JSX.Element;",
"prompt": "Das Akkordeon für die Fragen.\n\n```jsx\n\n```\n\nSechs bis acht Fragen, in der Reihenfolge ihrer Häufigkeit. Antworten im Register Sachbearbeiter: erst die Antwort, dann ein Satz."
},
{
"name": "Anmerkung",
"datei": "packages/design-system/components/website/Anmerkung.jsx",
"typen": "/** Anmerkungslinie in Tinte, die auf ein Detail im Bild zeigt. */\nexport interface AnmerkungProps {\n text: string;\n /** Wohin der Zeiger geht. */\n richtung?: \"links\" | \"rechts\";\n /** Laenge der Linie in px. */\n laenge?: number;\n style?: React.CSSProperties;\n}\nexport function Anmerkung(props: AnmerkungProps): JSX.Element;",
"prompt": "Die Anmerkung in Tinte – drei bis vier auf der Heldenansicht, absolut über dem Bild gesetzt.\n\n```jsx\n\n```\n\nHandschrift (Reenie Beanie) ist hier erlaubt: Register Erzähler, keine Bedienung."
},
{
"name": "Bildplatz",
"datei": "packages/design-system/components/website/Bildplatz.jsx",
"typen": "/** Platzhalter fuer eine Tuschezeichnung, ein Foto oder einen Screenshot - sagt, was hierher gehoert. */\nexport interface BildplatzProps {\n /** \"Tuschezeichnung\" | \"Foto\" | \"Screenshot\" */\n was?: string;\n /** Das Motiv in einem Satzteil: \"Turnbeutel am Haken, gelber Marker\". */\n motiv?: string;\n /** CSS aspect-ratio, z. B. \"4 / 3\", \"1 / 1\", \"16 / 10\". */\n verhaeltnis?: string;\n /** Der eine gelbe Markerakzent. Aus, wenn das Bild selbst einen traegt. */\n akzent?: boolean;\n children?: React.ReactNode;\n style?: React.CSSProperties;\n}\nexport function Bildplatz(props: BildplatzProps): JSX.Element;",
"prompt": "Der Platzhalter für Zeichnung, Foto oder Screenshot auf der Website.\n\n```jsx\n\n\n```\n\nRegeln fürs Bild: Tinte auf Papier, genau ein gelber Akzent, kein Stockfoto, kein 3D, kein KI-Bild, keine Kindergesichter. Genau ein echtes Foto auf der ganzen Seite – der Gründer."
},
{
"name": "EmailZeile",
"datei": "packages/design-system/components/website/EmailZeile.jsx",
"typen": "/** Ein E-Mail-Feld und ein Knopf - nie mehr Felder. */\nexport interface EmailZeileProps {\n platzhalter?: string;\n knopf?: string;\n onSenden?: (email: string) => void;\n /** Am Handy untereinander. */\n gestapelt?: boolean;\n style?: React.CSSProperties;\n}\nexport function EmailZeile(props: EmailZeileProps): JSX.Element;",
"prompt": "Das eine Feld der Website.\n\n```jsx\n merken(email)} />\n```\n\nEin Feld: 12,4 % tragen sich ein; vier Felder: die Hälfte. Kein Name, kein Häkchen, kein zweites Feld."
},
{
"name": "Fusszeile",
"datei": "packages/design-system/components/website/Fusszeile.jsx",
"typen": "/** Die Fusszeile: nur Kanaele, die tatsaechlich bespielt werden. */\nexport interface FusszeileProps {\n links?: string[];\n sprache?: string;\n style?: React.CSSProperties;\n}\nexport function Fusszeile(props: FusszeileProps): JSX.Element;",
"prompt": "Die Fusszeile.\n\n```jsx\n\n```\n\nImpressum, Datenschutz, Kontakt, Changelog, Alle Funktionen, DE/EN. Kein Newsletter-Formular, keine Social-Icons ohne Kanal."
},
{
"name": "GrenzenListe",
"datei": "packages/design-system/components/website/GrenzenListe.jsx",
"typen": "/** \"Was Albert nicht tut\" - fuenf ueberpruefbare Saetze mit Haarlinien-Zeichen. */\nexport interface Grenze { zeichen: string; satz: string; erklaerung: string }\nexport interface GrenzenListeProps {\n eintraege?: Grenze[];\n style?: React.CSSProperties;\n}\nexport function GrenzenListe(props: GrenzenListeProps): JSX.Element;",
"prompt": "Die wichtigste Sektion der Website: Grenzen statt Versprechen.\n\n```jsx\n\n```\n\nRegister Sachbearbeiter. Jeder Satz ist überprüfbar. Nirgends das Wort \"KI\", kein Siegel, kein \"bankenähnlich\"."
},
{
"name": "ModulReihe",
"datei": "packages/design-system/components/website/ModulReihe.jsx",
"typen": "/** Eine Modul-Reihe: Rollenname, zwei Saetze, Bild - abwechselnd links und rechts. */\nexport interface ModulReiheProps {\n /** Der Rollenname, kein Feature-Name: \"Der Plan, der die Einkaufsliste schreibt\". */\n rollenname: string;\n /** Zwei Saetze. */\n text: React.ReactNode;\n bild: React.ReactNode;\n bildRechts?: boolean;\n /** Am Handy untereinander, Bild oben. */\n gestapelt?: boolean;\n style?: React.CSSProperties;\n}\nexport function ModulReihe(props: ModulReiheProps): JSX.Element;",
"prompt": "Die Modul-Reihe – sechs auf der Homepage, nicht einundzwanzig.\n\n```jsx\n} />\n```\n\nRollenname statt Feature-Name. Höchstens 40 Wörter je Modul."
},
{
"name": "PreisKarte",
"datei": "packages/design-system/components/website/PreisKarte.jsx",
"typen": "/** Die eine Preiskarte. Ein Preis, alles drin. */\nexport interface PreisKarteProps {\n titel?: string;\n /** Monatspreis in Tabellenziffern: \"6,99 €\". Platzhalter \"X,XX €\", solange der Preis nicht feststeht. */\n monat?: string;\n jahr?: string;\n zeilen?: string[];\n knopf?: string;\n onKnopf?: () => void;\n /** \"30 Tage kostenlos, ohne Kartendaten\" - nur wenn es stimmt. */\n hinweis?: string;\n style?: React.CSSProperties;\n}\nexport function PreisKarte(props: PreisKarteProps): JSX.Element;",
"prompt": "Die Preiskarte – eine, nicht drei.\n\n```jsx\n\n```\n\nRegister Sachbearbeiter. Kein \"ab\", kein Sternchen, keine versteckte Stufe. Steht der Preis nicht fest, sagt die Karte genau das."
},
{
"name": "Schritt",
"datei": "packages/design-system/components/website/Schritt.jsx",
"typen": "/** Ein Schritt in \"So funktioniert es\". Drei Schritte, nie vier. */\nexport interface SchrittProps {\n nummer: number | string;\n /** Ein Wort: \"Sagen\", \"Sehen\", \"Sonntag\". */\n titel: string;\n /** Zwei Saetze. */\n text: React.ReactNode;\n /** Der kleine Ausschnitt aus dem Produkt. */\n children?: React.ReactNode;\n style?: React.CSSProperties;\n}\nexport function Schritt(props: SchrittProps): JSX.Element;",
"prompt": "Der Schritt – Nummer, Ausschnitt, ein Wort, zwei Sätze.\n\n```jsx\n\n \n\n```\n\nDrei Schritte sind die Grenze – vier werden nicht mehr gelesen."
},
{
"name": "StickyKnopf",
"datei": "packages/design-system/components/website/StickyKnopf.jsx",
"typen": "/** Fixierter Knopf am unteren Rand - nur am Handy, ab Sektion 2. */\nexport interface StickyKnopfProps {\n knopf?: string;\n onKnopf?: () => void;\n sichtbar?: boolean;\n style?: React.CSSProperties;\n}\nexport function StickyKnopf(props: StickyKnopfProps): JSX.Element | null;",
"prompt": "Der fixierte Knopf am Handy.\n\n```jsx\n\n```\n\nErst einblenden, wenn der Hero aus dem Bild ist – sonst stehen zwei gleiche Knöpfe untereinander."
},
{
"name": "SzeneKarte",
"datei": "packages/design-system/components/website/SzeneKarte.jsx",
"typen": "/** Eine Alltagsszene: Zeichnung und ein konkreter Satz. */\nexport interface SzeneKarteProps {\n /** Motiv der Zeichnung, fuer den Platzhalter. */\n motiv?: string;\n /** Der Satz - mit Uhrzeit, Betrag oder Gegenstand: \"Freitag, 18:40: Rückfahrt vom Turnier. Fahrer: niemand.\" */\n satz: React.ReactNode;\n /** Eigenes Bild statt Platzhalter. */\n bild?: React.ReactNode;\n style?: React.CSSProperties;\n}\nexport function SzeneKarte(props: SzeneKarteProps): JSX.Element;",
"prompt": "Die Szenenkarte – \"das sind wir\", ohne Schuldgefühl.\n\n```jsx\n\n```\n\nRegister Erzähler. Kein \"Bist du auch überfordert?\" – konkrete Szenen lösen dieselbe Wiedererkennung aus, ohne zu kränken."
},
{
"name": "Vertrauenszeile",
"datei": "packages/design-system/components/website/Vertrauenszeile.jsx",
"typen": "/** Kleine Zeile unter dem Knopf: drei ueberpruefbare Fakten, mit Punkt getrennt. */\nexport interface VertrauenszeileProps {\n fakten?: string[];\n style?: React.CSSProperties;\n}\nexport function Vertrauenszeile(props: VertrauenszeileProps): JSX.Element;",
"prompt": "Die kleine Zeile unter dem Knopf.\n\n```jsx\n\n```\n\nDrei Fakten, überprüfbar, ohne Siegel. Nie \"100 % sicher\", nie ein Schloss."
},
{
"name": "WebNavigation",
"datei": "packages/design-system/components/website/WebNavigation.jsx",
"typen": "/** Die Navigation der Website: Logo, drei bis vier Links, ein Knopf. */\nexport interface WebNavigationProps {\n links?: string[];\n /** Der eine Knopf. Nennt die Folge: \"Auf die Liste setzen\", nach dem Start \"Albert laden\". */\n knopf?: string;\n onKnopf?: () => void;\n onLink?: (link: string) => void;\n /** Am Handy: nur Logo und Knopf. */\n geraet?: \"desktop\" | \"phone\";\n style?: React.CSSProperties;\n}\nexport function WebNavigation(props: WebNavigationProps): JSX.Element;",
"prompt": "Die schlanke Navigation oben auf der Website.\n\n```jsx\n\n```\n\nEin Knopf, nie zwei – drei oder mehr Knöpfe im Hero kosten. Keine Mega-Menüs. Der Knopf nennt die Folge, kein \"Los geht's\". Links: Funktionen · Vertrauen · Preis · Fragen.\n\nDie Marke steht als schwarzer Kreis mit dem hellen Kritzelball und der Wortmarke in Bricolage – so bleibt sie auf Creme ruhig. Der Pfad zur Datei kommt aus `data-albert-logo-auf-schwarz` auf `` (Vorgabe: `assets/logo-albert-auf-schwarz.png`)."
}
]
},
{
"gruppe": "zeit",
"bauteile": [
{
"name": "JetztLinie",
"datei": "packages/design-system/components/zeit/JetztLinie.jsx",
"typen": "/** Gestrichelte Achse quer durch das Raster, mit der Uhrzeit als rosa Pille. */\nexport interface JetztLinieProps {\n /** Uhrzeit als HH:MM. */\n zeit?: string;\n /** px von oben, wenn die Linie im Raster absolut sitzt. */\n oben?: number;\n style?: React.CSSProperties;\n}\nexport function JetztLinie(props: JetztLinieProps): JSX.Element;",
"prompt": "Die Jetzt-Linie im Stundenraster.\n\n```jsx\n\n```\n\nRosa heisst hier \"jetzt\" – niemals \"Fehler\". Die Linie ist gestrichelt, läuft über die ganze Breite und fängt keine Klicks."
},
{
"name": "Listenzeile",
"datei": "packages/design-system/components/zeit/Listenzeile.jsx",
"typen": "/** Eine Zeile der Woche als Liste: Tag-Pille, Satzteil, verplante Zeit. */\nexport interface ListenzeileProps {\n /** Tag als Pille: \"Mo 1.\", \"Mi 3.\". */\n tag: string;\n heute?: boolean;\n /** Ein Satzteil, klein: \"heute · Anna und Felix\", \"vorbei · zum Aufklappen\". */\n text?: React.ReactNode;\n /** Verplante Zeit rechts: \"3,0 h\". */\n wert?: string;\n /** Setzt das Chevron; undefined heisst kein Chevron. */\n aufgeklappt?: boolean;\n onClick?: () => void;\n /** Die Karten des Tages, wenn die Zeile offen ist. */\n children?: React.ReactNode;\n style?: React.CSSProperties;\n}\nexport function Listenzeile(props: ListenzeileProps): JSX.Element;",
"prompt": "Die Woche als Liste – für das iPhone, wo ein Raster zu dicht wird.\n\n```jsx\n\n \n\n```\n\nDer Text sagt, wer den Tag trägt, nicht wie voll er ist. Zahlen deutsch: \"3,0 h\"."
},
{
"name": "Tagesreiter",
"datei": "packages/design-system/components/zeit/Tagesreiter.jsx",
"typen": "/**\n * Die Reiter ueber dem Raster: Wochentag in Kapitaelchen, Datum darunter.\n */\nexport interface Tag {\n /** Wochentag: \"MONTAG\" auf dem Mac, \"MO\" am iPhone.\n * Das ist der Schluessel: onWahl meldet diesen Wert zurueck, und \"gewaehlt\" wird dagegen geprueft. */\n tag: string;\n /** Datum: \"1.9.\" auf dem Mac, \"1\" am iPhone. */\n zahl: string;\n /** Nur Mac: eigener Schluessel fuer onWahl, wenn \"tag\" nicht eindeutig ist. */\n name?: string;\n heute?: boolean;\n /** Am iPhone: Tag mit Offenem bekommt einen rosa Kreis. */\n offen?: boolean;\n}\nexport interface TagesreiterProps {\n tage: Tag[];\n /** Am iPhone der gewaehlte Tag - derselbe Wert wie \"tag\", z. B. \"MI\". */\n gewaehlt?: string;\n variante?: \"mac\" | \"phone\";\n /** Kalenderwoche links vor den Reitern - nur auf dem Mac. */\n kw?: string | number;\n onWahl?: (tag: string) => void;\n style?: React.CSSProperties;\n}\nexport function Tagesreiter(props: TagesreiterProps): JSX.Element;",
"prompt": "Die Tagesreiter – auf dem Mac Karten, am iPhone Kreise.\n\n```jsx\n\n\n```\n\nHeute ist schwarz, der Sonntag steht in gedämpftem Rosa-Grau. Am iPhone heisst ein rosa Kreis: an diesem Tag ist etwas offen."
},
{
"name": "Wochenueberblick",
"datei": "packages/design-system/components/zeit/Wochenueberblick.jsx",
"typen": "/**\n * Die Woche auf einen Blick: wer trägt welchen Tag, wo fehlt jemand.\n * Je Sache ein kleiner Zettel — Initiale in Personenfarbe plus Zeichen der Sache.\n */\nexport interface UeberblickSache {\n /** Personenschlüssel des Zuständigen. */\n wer?: string;\n /** Sach-Rolle für das Zeichen: \"fahrt\", \"schule\", \"sport\", \"essen\", \"arzt\", \"musik\", \"freude\", \"ritual\". */\n art?: string;\n titel?: string;\n /** Ohne Zuständigen: gestrichelter Zettel mit „?“ in Offen-Rosa. Zählt oben mit. */\n offen?: boolean;\n /** Familie und Ritual: gelber Zettel. */\n familie?: boolean;\n}\nexport interface UeberblickTag {\n /** Kurzform: \"MO\" … \"SO\". */\n tag: string;\n zahl: string;\n heute?: boolean;\n /** Verplante Zeit des Tages: \"3,0 h\". */\n stunden?: string;\n sachen?: UeberblickSache[];\n}\nexport interface WochenueberblickProps {\n /** Überschrift der Karte. Standard „Wer trägt die Woche“. */\n titel?: string;\n tage: UeberblickTag[];\n style?: React.CSSProperties;\n}\nexport function Wochenueberblick(props: WochenueberblickProps): JSX.Element;",
"prompt": "Die Woche auf einen Blick — die Frage, die sie beantwortet: **Wer trägt welchen Tag, und wo fehlt jemand?**\n\n```jsx\n\n```\n\nJede Sache ist ein kleiner Zettel: die Initiale sagt wer, das Zeichen sagt was. Der Tag mit Offenem zeigt es laut — gestrichelter Zettel, und oben zählt „1 ohne Zuständigen“. Dieselben Daten wie Raster und Liste; das ist der Blick, den man am iPhone im Vorbeigehen wirft."
},
{
"name": "Zeitachse",
"datei": "packages/design-system/components/zeit/Zeitachse.jsx",
"typen": "/**\n * Das Stundenraster: Achse links, eine Spalte je Tag oder Mensch, Sachen nach Uhrzeit gesetzt.\n */\nexport interface ZeitachseSache {\n /** Beginn als HH:MM. */\n von: string;\n /** Ende als HH:MM; ohne Ende bekommt die Sache ihre Mindesthoehe. */\n bis?: string;\n /** Was gezeichnet wird - in der Regel eine . */\n element: React.ReactNode;\n /** Zusaetzliche Mindesthoehe in px, damit eine kurze Sache lesbar bleibt.\n * Die Dauer setzt ebenfalls eine Mindesthoehe - gedeckelt wird nie, Karten wachsen mit ihrem Inhalt. */\n mindest?: number;\n}\nexport interface ZeitachseSpalte { name?: string; sachen?: ZeitachseSache[] }\nexport interface ZeitachseProps {\n von?: string;\n bis?: string;\n /** Abstand der Marken in Minuten. Standard 30. */\n schritt?: number;\n /** Hoehe einer Stunde in px. Standard 80. */\n pxProStunde?: number;\n spalten: ZeitachseSpalte[];\n /** Uhrzeit der Jetzt-Linie, z. B. \"16:40\". Ohne Angabe keine Linie. */\n jetzt?: string;\n style?: React.CSSProperties;\n}\nexport function Zeitachse(props: ZeitachseProps): JSX.Element;",
"prompt": "Das Stundenraster von Mac und iPhone – es setzt Karten, es baut sie nicht.\n\n```jsx\n }\n ] }\n]} />\n```\n\nEine Spalte je Tag (Woche) oder je Mensch (Spuren). Uhrzeiten immer `HH:MM`; die Achse läuft in Roboto Mono mit tabellarischen Ziffern.\n\nDie Achse setzt nur den Anfang und eine Mindesthöhe aus der Dauer. **Sie deckelt nie** – eine Karte wird so hoch, wie ihr Inhalt braucht, und legt sich bei Bedarf über die nächste (spätere Sachen liegen oben). Gib der Karte darum kein `height` und kein `overflow: hidden` mit, sonst schneidest du ihren Inhalt ab."
}
]
},
{
"gruppe": "zustaende",
"bauteile": [
{
"name": "LeererZustand",
"datei": "packages/design-system/components/zustaende/LeererZustand.jsx",
"typen": "/**\n * Der leere Zustand: was hierher gehoert, warum es leer ist, ein Knopf.\n */\nexport interface LeererZustandProps {\n /** Was hierher gehoert - ein Satz, kein Titel: \"Hier landet die Post der Schule.\" */\n was: React.ReactNode;\n /** Warum es leer ist: \"Diese Woche kam nichts an.\" */\n warum?: React.ReactNode;\n /** Was man tun kann, als Verb: \"Post verbinden\". */\n schritt?: string;\n onSchritt?: () => void;\n /** Albert als Figur - nur in Onboarding, leeren Zustaenden, Briefings, Kinderbereich, Jahresbuch. */\n mitAlbert?: boolean;\n /** Alberts Bleistift-Randnotiz in Reenie Beanie. Nur im Register Erzaehler. */\n randnotiz?: string;\n style?: React.CSSProperties;\n}\nexport function LeererZustand(props: LeererZustandProps): JSX.Element;",
"prompt": "Der leere Zustand – drei Dinge und ein Knopf.\n\n```jsx\n\n```\n\nKein \"Fehler\", kein \"Ups\", kein Ausrufezeichen. Albert erscheint hier als Figur – in Listen, im Safe, bei Finanzen nie."
},
{
"name": "Skelett",
"datei": "packages/design-system/components/zustaende/Skelett.jsx",
"typen": "/** Skelett in der Form des Inhalts. Atmet 300 ms, steht bei reduzierter Bewegung, nie ein Kreisel. */\nexport interface SkelettProps {\n /** \"karte\" (eine Karte) | \"zeile\" (Liste) | \"board\" (Stundenraster). */\n form?: \"karte\" | \"zeile\" | \"board\";\n /** Zeilen je Spalte. */\n zeilen?: number;\n /** Spalten im Board. */\n spalten?: number;\n style?: React.CSSProperties;\n}\nexport function Skelett(props: SkelettProps): JSX.Element;",
"prompt": "Das Skelett – die Form dessen, was gleich kommt.\n\n```jsx\n\n```\n\nNie ein Kreisel, nie ein Fortschrittsbalken. Es atmet zwischen Karte und Zweitknopf-Beige und steht still, wenn das System weniger Bewegung will."
},
{
"name": "Toast",
"datei": "packages/design-system/components/zustaende/Toast.jsx",
"typen": "/** Kurze Rueckmeldung mit Rueckweg. Jedes optimistische Update bekommt einen. */\nexport interface ToastProps {\n /** Feststellung im Praesens, ohne Lob: \"Tobias fährt am Samstag.\" */\n text: React.ReactNode;\n zurueck?: string;\n onZurueck?: () => void;\n style?: React.CSSProperties;\n}\nexport function Toast(props: ToastProps): JSX.Element;",
"prompt": "Der Toast – eine Feststellung und ein Rückweg.\n\n```jsx\n\n```\n\nAlbert stellt fest (\"Fertig.\"), er lobt nicht. Ohne `onZurueck` gibt es keinen Toast – was nicht rücknehmbar ist, wird vorher gefragt."
}
]
},
{
"gruppe": "hq",
"bauteile": [
{
"name": "Satellit",
"datei": "packages/design-system/components/hq/Satellit.jsx",
"typen": "/** Das Satellitenbild einer Familie: Kern, Familie, Freunde und Helfer als drei Ringe um den Haushalt. */\nexport interface SatellitMitglied {\n id?: string; name: string;\n /** Rolle im Haushalt: owner | adult | child | guest | service */\n rolle: \"owner\" | \"adult\" | \"child\" | \"guest\" | \"service\";\n /** Verwandtschaft (albert.kinship): mother, father, partner, daughter, son, grandmother, grandfather, aunt, uncle, au_pair, household_help, friend, other */\n beziehung?: string | null;\n /** Personenfarbe 1–8 (6 und 8 sind nicht vergeben). */\n farbe?: number | null;\n}\nexport interface SatellitProps {\n mitglieder: SatellitMitglied[];\n /** Name des Haushalts, Initialen in der Mitte. */\n name?: string;\n /** Beschriftung der Ringe. */\n worte?: { kern: string; familie: string; freunde: string };\n style?: React.CSSProperties;\n}\nexport function Satellit(props: SatellitProps): JSX.Element;\n/** Welcher Ring: kern (owner, adult, child), familie (Gast mit Verwandtschaft), freunde (alles andere). */\nexport function kreisVon(m: SatellitMitglied): \"kern\" | \"familie\" | \"freunde\";",
"prompt": "Die Kreise einer Familie – wer zum Kern gehört, wer zur Familie, wer Freund oder Helfer ist.\n\n```jsx\n\n```\n\nDrei Ringe, gestrichelt nach aussen hin, der Kern mit fester Linie. Jede Person als Klebezettel in ihrer Personenfarbe mit Initialen, der Vorname darunter. In der Mitte die Initialen des Haushalts auf Tinte. Register Family Manager: Beschriftungen sind Wörter, keine Sätze – \"Kern\", \"Familie\", \"Freunde und Helfer\"."
},
{
"name": "Trichter",
"datei": "packages/design-system/components/hq/Trichter.jsx",
"typen": "/** Stufen von der Liste bis zur Zahlung als Balken mit Quote zur Stufe davor. */\nexport interface TrichterStufe { name: string; n: number }\nexport interface TrichterProps { stufen: TrichterStufe[]; style?: React.CSSProperties }\nexport function Trichter(props: TrichterProps): JSX.Element;",
"prompt": "Der Trichter im HQ – wie viele Familien von Stufe zu Stufe bleiben.\n\n```jsx\n\n```\n\nBalken in Gelb (Fläche Familie), Zahl in Tabellenziffern, die Quote zur Stufe davor in Zweittext. Stufennamen klein geschrieben, wie Zustände – keine Sätze, kein Ausrufezeichen."
}
]
},
{
"gruppe": "ui",
"bauteile": [
{
"name": "badge",
"datei": "packages/design-system/bauteile/ui/badge.tsx",
"typen": null,
"prompt": null
},
{
"name": "button",
"datei": "packages/design-system/bauteile/ui/button.tsx",
"typen": null,
"prompt": null
},
{
"name": "checkbox",
"datei": "packages/design-system/bauteile/ui/checkbox.tsx",
"typen": null,
"prompt": null
},
{
"name": "dialog",
"datei": "packages/design-system/bauteile/ui/dialog.tsx",
"typen": null,
"prompt": null
},
{
"name": "input",
"datei": "packages/design-system/bauteile/ui/input.tsx",
"typen": null,
"prompt": null
},
{
"name": "select",
"datei": "packages/design-system/bauteile/ui/select.tsx",
"typen": null,
"prompt": null
},
{
"name": "sheet",
"datei": "packages/design-system/bauteile/ui/sheet.tsx",
"typen": null,
"prompt": null
},
{
"name": "table",
"datei": "packages/design-system/bauteile/ui/table.tsx",
"typen": null,
"prompt": null
},
{
"name": "tabs",
"datei": "packages/design-system/bauteile/ui/tabs.tsx",
"typen": null,
"prompt": null
},
{
"name": "textarea",
"datei": "packages/design-system/bauteile/ui/textarea.tsx",
"typen": null,
"prompt": null
}
]
},
{
"gruppe": "bloecke",
"bauteile": [
{
"name": "Aufruf",
"datei": "packages/design-system/bloecke/Aufruf.tsx",
"typen": null,
"prompt": null
},
{
"name": "Bausteine",
"datei": "packages/design-system/bloecke/Bausteine.tsx",
"typen": null,
"prompt": null
},
{
"name": "Bereiche",
"datei": "packages/design-system/bloecke/Bereiche.tsx",
"typen": null,
"prompt": null
},
{
"name": "Bild",
"datei": "packages/design-system/bloecke/Bild.tsx",
"typen": null,
"prompt": null
},
{
"name": "Eintragen",
"datei": "packages/design-system/bloecke/Eintragen.tsx",
"typen": null,
"prompt": null
},
{
"name": "Faq",
"datei": "packages/design-system/bloecke/Faq.tsx",
"typen": null,
"prompt": null
},
{
"name": "Hero",
"datei": "packages/design-system/bloecke/Hero.tsx",
"typen": null,
"prompt": null
},
{
"name": "Hinweisleiste",
"datei": "packages/design-system/bloecke/Hinweisleiste.tsx",
"typen": null,
"prompt": null
},
{
"name": "Preise",
"datei": "packages/design-system/bloecke/Preise.tsx",
"typen": null,
"prompt": null
},
{
"name": "Satz",
"datei": "packages/design-system/bloecke/Satz.tsx",
"typen": null,
"prompt": null
},
{
"name": "Schritte",
"datei": "packages/design-system/bloecke/Schritte.tsx",
"typen": null,
"prompt": null
},
{
"name": "Text",
"datei": "packages/design-system/bloecke/Text.tsx",
"typen": null,
"prompt": null
},
{
"name": "Themen",
"datei": "packages/design-system/bloecke/Themen.tsx",
"typen": null,
"prompt": null
},
{
"name": "Umfrage",
"datei": "packages/design-system/bloecke/Umfrage.tsx",
"typen": null,
"prompt": null
},
{
"name": "Vergleich",
"datei": "packages/design-system/bloecke/Vergleich.tsx",
"typen": null,
"prompt": null
},
{
"name": "Zitat",
"datei": "packages/design-system/bloecke/Zitat.tsx",
"typen": null,
"prompt": null
}
]
}
]
}