Patterns

/** Eine Karte fuer Gleichzeitiges: mehrere Sachen zur selben Stunde, jede als Zeile. */
export interface BuendelTeil {
  titel: string;
  art?: "termin" | "fahrt" | "familie";
  /** Sach-Symbol, wenn es nicht aus der Art folgt. */
  symbol?: string;
  zeit?: string;
  leute?: string[];
  /** Ohne Zustaendigen - die Zeile bekommt den gestrichelten Offen-Rand. */
  offen?: boolean;
}
export interface BuendelKarteProps {
  /** Was die Stunde traegt: "Drei Sachen um 16:00". */
  titel: string;
  zeit?: string;
  teile: BuendelTeil[];
  style?: React.CSSProperties;
}
export function BuendelKarte(props: BuendelKarteProps): JSX.Element;

/**
 * Alberts Vorschlag am iPhone: gelbe Karte mit Formen, zwei Knoepfe, Unterzeile.
 */
export interface VorschlagKarteProps {
  /** Eine Beobachtung: "Samstag fehlt ein Fahrer." */
  titel: string;
  /** Zwei kurze Saetze: was er sieht, was daraus folgt. */
  text?: React.ReactNode;
  /** Erster Knopf, ein Verb: "Tobias fragen", "Übernehmen". */
  schritt?: string;
  onSchritt?: () => void;
  /** Zweiter Knopf. Es gibt immer zwei - Albert erledigt nie still. */
  zweitSchritt?: string;
  onZweitSchritt?: () => void;
  unterzeile?: string;
  style?: React.CSSProperties;
}
export function VorschlagKarte(props: VorschlagKarteProps): JSX.Element;

/** Zwei Sachen treffen sich. Sichtbar, nie blockierend, mit naechstem Schritt. */
export interface KonfliktKarteProps {
  /** Was sich trifft, als Feststellung: "Lena schwimmt und Felix spielt - beides 16:00." */
  titel: string;
  /** Warum es klemmt, ein Satz. */
  erklaerung?: React.ReactNode;
  wer?: string[];
  /** Der naechste Schritt als Verb: "Tobias fragen". */
  schritt?: string;
  onSchritt?: () => void;
  zweitSchritt?: string;
  onZweitSchritt?: () => void;
  style?: React.CSSProperties;
}
export function KonfliktKarte(props: KonfliktKarteProps): JSX.Element;

/**
 * Die Karte in fuenf Arten. Die Farbe sagt die Art, das Symbol die Sache, die Punkte die Leute.
 */
export interface KarteProps {
  /** "termin" beige | "fahrt" blau | "familie" gelb | "vorschlag" gestrichelt grau | "offen" gestrichelt rosa. */
  art?: "termin" | "fahrt" | "familie" | "vorschlag" | "offen";
  /** Kartentitel, ein Gegenstand: "Rückfahrt Auswärtsspiel". */
  titel: string;
  /** Zweitzeile: Ort oder Bündel-Teile, mit " · " getrennt. */
  ort?: React.ReactNode;
  /** Zeitspanne als "16:00 – 17:00" (Halbgeviertstrich mit Leerzeichen). */
  zeit?: string;
  /** Wer dabei ist; der Zustaendige zuerst. */
  leute?: string[];
  /** Sach-Symbol, wenn es nicht aus der Art folgt: "schule", "sport", "arzt", "musik". */
  symbol?: string;
  /** "kurz" (78 px) oder "hoch" (132 px) - fuer das Stundenraster. */
  hoehe?: "kurz" | "hoch";
  /** Zustands- und Fahrt-Pillen. */
  pillen?: React.ReactNode;
  /** Handlungsknoepfe; bei Vorschlaegen immer zwei. */
  knoepfe?: React.ReactNode;
  /** Kleine Zeile unter dem Inhalt, z. B. "Vorschlag von Albert". */
  unterzeile?: React.ReactNode;
  /** Einzeiler fuer Listen: Symbol, Titel, Zeit, Punkt. */
  kompakt?: boolean;
  klickbar?: boolean;
  /** Leicht gekippt, wie ein liegender Klebezettel. */
  gekippt?: boolean;
  children?: React.ReactNode;
  style?: React.CSSProperties;
}
export function Karte(props: KarteProps): JSX.Element;
export function KarteVorschlagKnoepfe(props: { uebernehmen?: string; zurueck?: string; onUebernehmen?: () => void; onZurueck?: () => void }): JSX.Element;

/** Je Mensch eine Spur ueber die Stunden - die dritte Antwort auf Gleichzeitiges. */
export interface Spur {
  titel: string;
  /** Stunde als Dezimalzahl: 16.5 heisst 16:30. */
  von: number;
  bis: number;
  art?: "termin" | "fahrt" | "familie";
  offen?: boolean;
}
export interface SpurenJeMenschProps {
  /** Schluessel aus Familie Sonntag, eine Spur je Person. */
  leute: string[];
  /** Spuren je Personenschluessel. */
  spuren: Record<string, Spur[]>;
  /** Erste und letzte Stunde der Achse. */
  von?: number;
  bis?: number;
  style?: React.CSSProperties;
}
export function SpurenJeMensch(props: SpurenJeMenschProps): JSX.Element;

/** Ein E-Mail-Feld und ein Knopf - nie mehr Felder. */
export interface EmailZeileProps {
  platzhalter?: string;
  knopf?: string;
  onSenden?: (email: string) => void;
  /** Am Handy untereinander. */
  gestapelt?: boolean;
  style?: React.CSSProperties;
}
export function EmailZeile(props: EmailZeileProps): JSX.Element;

/** Eine Zeile der Woche als Liste: Tag-Pille, Satzteil, verplante Zeit. */
export interface ListenzeileProps {
  /** Tag als Pille: "Mo 1.", "Mi 3.". */
  tag: string;
  heute?: boolean;
  /** Ein Satzteil, klein: "heute · Anna und Felix", "vorbei · zum Aufklappen". */
  text?: React.ReactNode;
  /** Verplante Zeit rechts: "3,0 h". */
  wert?: string;
  /** Setzt das Chevron; undefined heisst kein Chevron. */
  aufgeklappt?: boolean;
  onClick?: () => void;
  /** Die Karten des Tages, wenn die Zeile offen ist. */
  children?: React.ReactNode;
  style?: React.CSSProperties;
}
export function Listenzeile(props: ListenzeileProps): JSX.Element;

/**
 * Der Scanner-Fluss: Kamera mit Kantenrahmen, Seitenstapel, Vorschlagskarte.
 */
export interface ScannerVorschlag {
  /** Was Albert gelesen hat, als Gegenstand: "Rechnung Musikschule". */
  titel: string;
  absender?: string;
  /** Betrag deutsch: "48,00 €". */
  betrag?: string;
  /** Frist als Datum: "18. September". */
  frist?: string;
  /** Wohin es soll: "Wichtiges › Verträge". */
  ablage?: string;
}
export interface ScannerFlussProps {
  schritt?: "kamera" | "stapel" | "vorschlag";
  /** Zahl der aufgenommenen Seiten. */
  seiten?: number;
  vorschlag?: ScannerVorschlag;
  onAufnehmen?: () => void;
  onUebernehmen?: () => void;
  onZurueck?: () => void;
  style?: React.CSSProperties;
}
export function ScannerFluss(props: ScannerFlussProps): JSX.Element;

/**
 * Der Taler-Stand eines Kindes: grosse Zahl, Sparziel als Streifen, Regal der Eltern.
 */
export interface TalerStandProps {
  /** Das Kind - jedes Kind sieht nur den eigenen Stand. */
  wer?: string;
  /** Erreichte Taler. Nie negativ, es gibt keinen Abzug. */
  taler: number;
  /** Taler, die das Sparziel kostet. */
  ziel?: number;
  /** Name des Sparziels: "Skateboard". */
  zielName?: string;
  /** Was das Kind geschafft hat, als Pillen. Nie eine Quote. */
  geschafft?: string[];
  /** Das Regal der Eltern: was man sich holen kann und was es kostet. */
  regal?: Array<{ name: string; taler: number }>;
  style?: React.CSSProperties;
}
export function TalerStand(props: TalerStandProps): JSX.Element;

/** Kurze Rueckmeldung mit Rueckweg. Jedes optimistische Update bekommt einen. */
export interface ToastProps {
  /** Feststellung im Praesens, ohne Lob: "Tobias fährt am Samstag." */
  text: React.ReactNode;
  zurueck?: string;
  onZurueck?: () => void;
  style?: React.CSSProperties;
}
export function Toast(props: ToastProps): JSX.Element;