/** Klebezettel je Mensch: Personenfarbe plus Initiale, optional mit Namen. */
export interface AvatarProps {
  /** Schluessel aus Familie Sonntag ("anna", "tobias", "felix", "lena", "sofia", "grete", "werner", "hilde") oder ein Objekt {name, initiale, platz}. */
  wer?: string | { name: string; initiale: string; platz: number };
  /** Durchmesser in px. 20 im Kartenkopf, 32 im Filter, 44 am iPhone, 56 fuer Kinder. */
  groesse?: number;
  /** Name neben dem Kreis - fuer Leiste und Listen. */
  mitName?: boolean;
  /** Der schwarze Kreis mit zwei Koepfen: "alle". */
  alle?: boolean;
  /** Im Personenfilter: true = schwarzer Ring, false = grau zurueckgenommen. */
  gewaehlt?: boolean | null;
  ring?: boolean;
  onClick?: () => void;
  style?: React.CSSProperties;
}
export function Avatar(props: AvatarProps): JSX.Element;

/** Spielerische Form als Deko auf gelben und rosa Flaechen - Stern, Herz, Kleks, Puzzleteil. */
export interface DekoFormProps {
  form?: "stern" | "herz" | "kleks" | "kreis" | "puzzle";
  groesse?: number;
  /** Immer die dunklere Stufe derselben Flaechenfarbe: var(--gelb-dunkel), var(--blau-dunkel). */
  farbe?: string;
  drehung?: number;
  style?: React.CSSProperties;
}
export function DekoForm(props: DekoFormProps): JSX.Element;

/** Blaue Pille fuer eine Fahrt, die an einer anderen Sache haengt. */
export interface FahrtPilleProps {
  /** Wer faehrt - "Papa", "Anna", "Jonas' Mama". */
  wer?: string;
  /** Uhrzeit als HH:MM. */
  zeit?: string;
  /** Auto aus dem Buendel - "Kombi". */
  auto?: string;
  children?: React.ReactNode;
  style?: React.CSSProperties;
}
export function FahrtPille(props: FahrtPilleProps): JSX.Element;

/** Zeichen aus dem Lucide-Satz, inline gerendert und über `stroke` eingefärbt. */
export interface IconProps {
  /** Sach-Rolle ("fahrt", "schule", "essen", "familie", "ritual", "vorschlag", ...) oder Lucide-Dateiname ("bell"). */
  name: string;
  /** Kantenlänge in px. Standard 16. */
  groesse?: number;
  /** Strichstärke. Standard 2 — wie im Satz. */
  strich?: number;
  /** Strichfarbe. Standard currentColor. */
  farbe?: string;
  /** Wenn gesetzt, wird das Zeichen für VoiceOver benannt; sonst ist es dekorativ. */
  titel?: string;
  style?: React.CSSProperties;
}
export function Icon(props: IconProps): JSX.Element | null;
export const SACHEN: Record<string, string>;

/**
 * Handlungsknopf. Primär schwarz mit hellem Text („Ich fahre“), Zweitknopf beige („Später“),
 * Klein ohne Fläche für Nebenwege. Schriftgrad und Polster wachsen mit der Zielfläche.
 */
export interface KnopfProps {
  art?: "primaer" | "zweit" | "klein";
  /** Zielfläche: Zeiger 32 / 12,5 px, Finger 44 / 14 px, Kind 56 / 16 px. */
  ziel?: "zeiger" | "finger" | "kind";
  /** Sach-Rolle oder Lucide-Name eines Zeichens links im Knopf. */
  zeichen?: string;
  /** Inaktiv ist eine eigene Rolle, keine Deckkraft. */
  inaktiv?: boolean;
  /** Füllt die Breite - für iPhone-Karten. */
  breit?: boolean;
  /** Erlaubt Zeilenumbruch in der Beschriftung. Standard aus: ein Knopf ist einzeilig;
   *  wird die Reihe zu eng, stapelt die Knopfreihe die Knöpfe in voller Breite. */
  umbruch?: boolean;
  type?: "button" | "submit" | "reset";
  children?: React.ReactNode;
  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
  style?: React.CSSProperties;
}
export function Knopf(props: KnopfProps): JSX.Element;

/** Die Knopfreihe: nebeneinander, wenn Platz ist, sonst untereinander in voller Breite. */
export interface KnopfreiheProps {
  children?: React.ReactNode;
  /** Mindestbreite je Knopf in px, ab der zwei nebeneinander passen. Standard 104. */
  mindest?: number;
  ausrichtung?: "mitte";
  style?: React.CSSProperties;
}
export function Knopfreihe(props: KnopfreiheProps): JSX.Element;

/** Die Punkte rechts im Kartenkopf: wer dabei ist. Initiale in Personenfarbe, bei mehreren ueberlappend. */
export interface PunktgruppeProps {
  /** Schluessel aus Familie Sonntag, in der Reihenfolge der Zustaendigkeit. */
  leute?: Array<string | { name: string; initiale: string; platz: number }>;
  /** Durchmesser in px. Standard 20. */
  groesse?: number;
  style?: React.CSSProperties;
}
export function Punktgruppe(props: PunktgruppeProps): JSX.Element;

/** Zeichen der Sache in einem hellen Kreis - steht links im Kartenkopf. */
export interface SachSymbolProps {
  /** Sach-Rolle: "fahrt" | "schule" | "sport" | "essen" | "arzt" | "musik" | "freude" | "familie" | "ritual" | "vorschlag" | "schwimmen". */
  art?: string;
  /** Kreisdurchmesser in px. Standard 26 (Mac), 24 auf dem iPhone. */
  groesse?: number;
  /** Auf farbigen Karten - haelt den Kreis hell. */
  aufFarbe?: boolean;
  titel?: string;
  style?: React.CSSProperties;
}
export function SachSymbol(props: SachSymbolProps): JSX.Element;

/** Rosa Zaehler an Ort, Chip oder Klingel. */
export interface ZaehlerProps {
  /** Die Zahl. Bei 0 nicht anzeigen - Leere ist ein leerer Zustand, kein Zaehler. */
  wert?: number | string;
  /** "akzent" (Standard) | "punkt" (rosa Punkt ohne Zahl, fuer die Klingel). */
  art?: "akzent" | "aufSchwarz" | "punkt";
  groesse?: number;
  /** Beschriftung fuer VoiceOver, z. B. "3 Sachen im Eingang". */
  titel?: string;
  style?: React.CSSProperties;
}
export function Zaehler(props: ZaehlerProps): JSX.Element;

/**
 * Farbige Kachel mit grosser Zahl - der Blick auf die Woche.
 */
export interface ZahlKachelProps {
  /** Die Zahl, deutsch geschrieben: "8,7", "2", "1". */
  zahl: string | number;
  /** Einheit direkt an der Zahl: "h". */
  einheit?: string;
  /** Ein Satzteil, klein darunter: "heute verplant", "Fahrten heute", "offen diese Woche". */
  beschriftung: string;
  farbe?: "gelb" | "rosa" | "blau";
  form?: "stern" | "herz" | "kleks" | "kreis" | "puzzle" | "keine";
  style?: React.CSSProperties;
}
export function ZahlKachel(props: ZahlKachelProps): JSX.Element;

/** Kleine Pille auf der Karte: "Kein Fahrer", "Abholen 19:00 - Anna". */
export interface ZustandsPilleProps {
  /** "zustand" rosa hell (Standard) | "offen" gestrichelt (ohne Zustaendigen) | "ruhig" hell mit Haarlinie. */
  art?: "zustand" | "offen" | "ruhig";
  children?: React.ReactNode;
  style?: React.CSSProperties;
}
export function ZustandsPille(props: ZustandsPilleProps): JSX.Element;

/** 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;

/**
 * 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;

/** Der Kopf jeder Karte: Sach-Symbol links, Punktgruppe rechts. */
export interface KartenkopfProps {
  /** Sach-Rolle - bestimmt das Symbol, nicht die Kartenfarbe. */
  art?: string;
  leute?: Array<string>;
  /** Durchmesser des Symbolkreises; die Punkte folgen mit 77 %. */
  groesse?: number;
  titel?: string;
  style?: React.CSSProperties;
}
export function Kartenkopf(props: KartenkopfProps): 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;

/** 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;

/**
 * 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;

/** Die grosse Zeile oben auf der Flaeche - Bricolage 800, eng gelaufen. */
export interface AnredezeileProps {
  /** "Guten Morgen, Anna." | "Mittwoch" | "Woche 36" */
  children: React.ReactNode;
  /** 40 px auf dem Mac, 30 px auf dem iPhone. */
  geraet?: "mac" | "phone";
  /** Kleine Zeile darunter: "3. September · KW 36". */
  nebenzeile?: React.ReactNode;
  style?: React.CSSProperties;
}
export function Anredezeile(props: AnredezeileProps): JSX.Element;

/** Die schwarze Pille mit der Spanne: "1. – 7. September". */
export interface DatumPilleProps {
  /** Datum oder Spanne. Halbgeviertstrich mit Leerzeichen: "1. – 7. September". */
  children: React.ReactNode;
  onClick?: () => void;
  aufklappbar?: boolean;
  style?: React.CSSProperties;
}
export function DatumPille(props: DatumPilleProps): JSX.Element;

/**
 * Der Kopf jeder Flaeche: Suchfeld mit rosa Lupe, Bereichs-Chips, drei Kreise rechts.
 */
export interface KopfzeileProps {
  platzhalter?: string;
  /** Bereichs-Chips, gestrichelt: "Termine", "Fahrten", "Aufgaben", "Dokumente", { name: "Post", zaehler: 2 }. */
  bereiche?: Array<string | { name: string; zaehler?: number }>;
  gewaehlterBereich?: string;
  onBereich?: (name: string) => void;
  onSuche?: (e: React.ChangeEvent<HTMLInputElement>) => void;
  /** Rosa Punkt an der Klingel, wenn etwas Neues da ist. */
  klingelPunkt?: boolean;
  onKlingel?: () => void;
  onNachrichten?: () => void;
  /** Oeffnet das Schnellmenue "Schnell anlegen". */
  onPlus?: () => void;
  style?: React.CSSProperties;
}
export function Kopfzeile(props: KopfzeileProps): JSX.Element;

/**
 * Die Kreise, mit denen man die Flaeche auf Leute einschraenkt.
 */
export interface PersonenFilterProps {
  /** Schluessel aus Familie Sonntag, in fester Reihenfolge. */
  leute: string[];
  /** Leeres Feld heisst alle. */
  gewaehlt?: string[];
  /** 32 px auf dem Mac, 44 px am iPhone, 56 px im Kinderbereich. */
  groesse?: number;
  onWahl?: (gewaehlt: string[]) => void;
  style?: React.CSSProperties;
}
export function PersonenFilter(props: PersonenFilterProps): JSX.Element;

/** Das Menue am Plus-Kreis: Termin, Aufgabe, Fahrt, Dokument scannen, Kontakt, Notiz. */
export interface SchnellMenueEintrag { name: string; zeichen?: string; taste?: string }
export interface SchnellMenueProps {
  titel?: string;
  eintraege?: SchnellMenueEintrag[];
  onWahl?: (name: string) => void;
  style?: React.CSSProperties;
}
export function SchnellMenue(props: SchnellMenueProps): JSX.Element;

/** Die Spanne der Ansicht: Heute, 3 Tage, Mo – Fr, Mo – So, Monat. */
export interface SpannenReglerProps {
  spannen?: string[];
  gewaehlt?: string;
  onWahl?: (spanne: string) => void;
  /** "finger" gibt 44 px fuer iPhone und iPad. */
  ziel?: "zeiger" | "finger";
  style?: React.CSSProperties;
}
export function SpannenRegler(props: SpannenReglerProps): JSX.Element;

/**
 * Die schwarze Leiste auf dem Mac - voll (220 px) oder eingeklappt (72 px) als Block oder als Pille.
 */
export interface LeisteOrt { name: string; zeichen: string; zaehler?: number }
export interface LeisteGruppe { gruppe: string; eintraege: LeisteOrt[] }
export interface LeisteMacProps {
  /** Der Ort, auf dem man steht: "Heute" | "Woche" | "Eingang" | "Essen" | ... */
  aktiverOrt?: string;
  /** Gruppen der Navigation. Standard: Flächen, Bereiche, Persönlich. */
  orte?: LeisteGruppe[];
  eingeklappt?: boolean;
  /** Eingeklappt gibt es zwei Fassungen: schmaler "block" oder rundum abgerundete "pille",
   *  bei der der aktive Ort als rosa Kreis seitlich heraustritt. */
  fassung?: "block" | "pille";
  /** Der Mensch unten in der Leiste. */
  ich?: string;
  onWahl?: (ort: string) => void;
  onKlappen?: () => void;
  onProfil?: () => void;
  style?: React.CSSProperties;
}
export function LeisteMac(props: LeisteMacProps): JSX.Element;
export const ORTE: LeisteGruppe[];

/**
 * Die schwarze Leiste unten am iPhone: Heute, Woche, Plus, Eingang, Ich.
 */
export interface LeistePhoneProps {
  aktiverOrt?: string;
  plaetze?: Array<{ name: string; zeichen: string; zaehler?: number; plus?: boolean }>;
  onWahl?: (ort: string) => void;
  onPlus?: () => void;
  style?: React.CSSProperties;
}
export function LeistePhone(props: LeistePhoneProps): JSX.Element;
export const PLAETZE: Array<{ name: string; zeichen: string; zaehler?: number; plus?: boolean }>;

/** Gestrichelte Achse quer durch das Raster, mit der Uhrzeit als rosa Pille. */
export interface JetztLinieProps {
  /** Uhrzeit als HH:MM. */
  zeit?: string;
  /** px von oben, wenn die Linie im Raster absolut sitzt. */
  oben?: number;
  style?: React.CSSProperties;
}
export function JetztLinie(props: JetztLinieProps): 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;

/**
 * Die Reiter ueber dem Raster: Wochentag in Kapitaelchen, Datum darunter.
 */
export interface Tag {
  /** Wochentag: "MONTAG" auf dem Mac, "MO" am iPhone.
   *  Das ist der Schluessel: onWahl meldet diesen Wert zurueck, und "gewaehlt" wird dagegen geprueft. */
  tag: string;
  /** Datum: "1.9." auf dem Mac, "1" am iPhone. */
  zahl: string;
  /** Nur Mac: eigener Schluessel fuer onWahl, wenn "tag" nicht eindeutig ist. */
  name?: string;
  heute?: boolean;
  /** Am iPhone: Tag mit Offenem bekommt einen rosa Kreis. */
  offen?: boolean;
}
export interface TagesreiterProps {
  tage: Tag[];
  /** Am iPhone der gewaehlte Tag - derselbe Wert wie "tag", z. B. "MI". */
  gewaehlt?: string;
  variante?: "mac" | "phone";
  /** Kalenderwoche links vor den Reitern - nur auf dem Mac. */
  kw?: string | number;
  onWahl?: (tag: string) => void;
  style?: React.CSSProperties;
}
export function Tagesreiter(props: TagesreiterProps): JSX.Element;

/**
 * Die Woche auf einen Blick: wer trägt welchen Tag, wo fehlt jemand.
 * Je Sache ein kleiner Zettel — Initiale in Personenfarbe plus Zeichen der Sache.
 */
export interface UeberblickSache {
  /** Personenschlüssel des Zuständigen. */
  wer?: string;
  /** Sach-Rolle für das Zeichen: "fahrt", "schule", "sport", "essen", "arzt", "musik", "freude", "ritual". */
  art?: string;
  titel?: string;
  /** Ohne Zuständigen: gestrichelter Zettel mit „?“ in Offen-Rosa. Zählt oben mit. */
  offen?: boolean;
  /** Familie und Ritual: gelber Zettel. */
  familie?: boolean;
}
export interface UeberblickTag {
  /** Kurzform: "MO" … "SO". */
  tag: string;
  zahl: string;
  heute?: boolean;
  /** Verplante Zeit des Tages: "3,0 h". */
  stunden?: string;
  sachen?: UeberblickSache[];
}
export interface WochenueberblickProps {
  /** Überschrift der Karte. Standard „Wer trägt die Woche“. */
  titel?: string;
  tage: UeberblickTag[];
  style?: React.CSSProperties;
}
export function Wochenueberblick(props: WochenueberblickProps): JSX.Element;

/**
 * Das Stundenraster: Achse links, eine Spalte je Tag oder Mensch, Sachen nach Uhrzeit gesetzt.
 */
export interface ZeitachseSache {
  /** Beginn als HH:MM. */
  von: string;
  /** Ende als HH:MM; ohne Ende bekommt die Sache ihre Mindesthoehe. */
  bis?: string;
  /** Was gezeichnet wird - in der Regel eine <Karte>. */
  element: React.ReactNode;
  /** Zusaetzliche Mindesthoehe in px, damit eine kurze Sache lesbar bleibt.
   *  Die Dauer setzt ebenfalls eine Mindesthoehe - gedeckelt wird nie, Karten wachsen mit ihrem Inhalt. */
  mindest?: number;
}
export interface ZeitachseSpalte { name?: string; sachen?: ZeitachseSache[] }
export interface ZeitachseProps {
  von?: string;
  bis?: string;
  /** Abstand der Marken in Minuten. Standard 30. */
  schritt?: number;
  /** Hoehe einer Stunde in px. Standard 80. */
  pxProStunde?: number;
  spalten: ZeitachseSpalte[];
  /** Uhrzeit der Jetzt-Linie, z. B. "16:40". Ohne Angabe keine Linie. */
  jetzt?: string;
  style?: React.CSSProperties;
}
export function Zeitachse(props: ZeitachseProps): JSX.Element;

/**
 * Der leere Zustand: was hierher gehoert, warum es leer ist, ein Knopf.
 */
export interface LeererZustandProps {
  /** Was hierher gehoert - ein Satz, kein Titel: "Hier landet die Post der Schule." */
  was: React.ReactNode;
  /** Warum es leer ist: "Diese Woche kam nichts an." */
  warum?: React.ReactNode;
  /** Was man tun kann, als Verb: "Post verbinden". */
  schritt?: string;
  onSchritt?: () => void;
  /** Albert als Figur - nur in Onboarding, leeren Zustaenden, Briefings, Kinderbereich, Jahresbuch. */
  mitAlbert?: boolean;
  /** Alberts Bleistift-Randnotiz in Reenie Beanie. Nur im Register Erzaehler. */
  randnotiz?: string;
  style?: React.CSSProperties;
}
export function LeererZustand(props: LeererZustandProps): JSX.Element;

/** Skelett in der Form des Inhalts. Atmet 300 ms, steht bei reduzierter Bewegung, nie ein Kreisel. */
export interface SkelettProps {
  /** "karte" (eine Karte) | "zeile" (Liste) | "board" (Stundenraster). */
  form?: "karte" | "zeile" | "board";
  /** Zeilen je Spalte. */
  zeilen?: number;
  /** Spalten im Board. */
  spalten?: number;
  style?: React.CSSProperties;
}
export function Skelett(props: SkelettProps): 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;

/**
 * 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;

/**
 * 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;

/** Fragen und kurze Antworten, eine offen. */
export interface Frage { frage: string; antwort: React.ReactNode }
export interface AkkordeonProps {
  fragen: Frage[];
  /** Index der anfangs offenen Frage; -1 fuer keine. */
  offen?: number;
  style?: React.CSSProperties;
}
export function Akkordeon(props: AkkordeonProps): JSX.Element;

/** Anmerkungslinie in Tinte, die auf ein Detail im Bild zeigt. */
export interface AnmerkungProps {
  text: string;
  /** Wohin der Zeiger geht. */
  richtung?: "links" | "rechts";
  /** Laenge der Linie in px. */
  laenge?: number;
  style?: React.CSSProperties;
}
export function Anmerkung(props: AnmerkungProps): JSX.Element;

/** Platzhalter fuer eine Tuschezeichnung, ein Foto oder einen Screenshot - sagt, was hierher gehoert. */
export interface BildplatzProps {
  /** "Tuschezeichnung" | "Foto" | "Screenshot" */
  was?: string;
  /** Das Motiv in einem Satzteil: "Turnbeutel am Haken, gelber Marker". */
  motiv?: string;
  /** CSS aspect-ratio, z. B. "4 / 3", "1 / 1", "16 / 10". */
  verhaeltnis?: string;
  /** Der eine gelbe Markerakzent. Aus, wenn das Bild selbst einen traegt. */
  akzent?: boolean;
  children?: React.ReactNode;
  style?: React.CSSProperties;
}
export function Bildplatz(props: BildplatzProps): 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;

/** Die Fusszeile: nur Kanaele, die tatsaechlich bespielt werden. */
export interface FusszeileProps {
  links?: string[];
  sprache?: string;
  style?: React.CSSProperties;
}
export function Fusszeile(props: FusszeileProps): JSX.Element;

/** "Was Albert nicht tut" - fuenf ueberpruefbare Saetze mit Haarlinien-Zeichen. */
export interface Grenze { zeichen: string; satz: string; erklaerung: string }
export interface GrenzenListeProps {
  eintraege?: Grenze[];
  style?: React.CSSProperties;
}
export function GrenzenListe(props: GrenzenListeProps): JSX.Element;

/** Eine Modul-Reihe: Rollenname, zwei Saetze, Bild - abwechselnd links und rechts. */
export interface ModulReiheProps {
  /** Der Rollenname, kein Feature-Name: "Der Plan, der die Einkaufsliste schreibt". */
  rollenname: string;
  /** Zwei Saetze. */
  text: React.ReactNode;
  bild: React.ReactNode;
  bildRechts?: boolean;
  /** Am Handy untereinander, Bild oben. */
  gestapelt?: boolean;
  style?: React.CSSProperties;
}
export function ModulReihe(props: ModulReiheProps): JSX.Element;

/** Die eine Preiskarte. Ein Preis, alles drin. */
export interface PreisKarteProps {
  titel?: string;
  /** Monatspreis in Tabellenziffern: "6,99 €". Platzhalter "X,XX €", solange der Preis nicht feststeht. */
  monat?: string;
  jahr?: string;
  zeilen?: string[];
  knopf?: string;
  onKnopf?: () => void;
  /** "30 Tage kostenlos, ohne Kartendaten" - nur wenn es stimmt. */
  hinweis?: string;
  style?: React.CSSProperties;
}
export function PreisKarte(props: PreisKarteProps): JSX.Element;

/** Ein Schritt in "So funktioniert es". Drei Schritte, nie vier. */
export interface SchrittProps {
  nummer: number | string;
  /** Ein Wort: "Sagen", "Sehen", "Sonntag". */
  titel: string;
  /** Zwei Saetze. */
  text: React.ReactNode;
  /** Der kleine Ausschnitt aus dem Produkt. */
  children?: React.ReactNode;
  style?: React.CSSProperties;
}
export function Schritt(props: SchrittProps): JSX.Element;

/** Fixierter Knopf am unteren Rand - nur am Handy, ab Sektion 2. */
export interface StickyKnopfProps {
  knopf?: string;
  onKnopf?: () => void;
  sichtbar?: boolean;
  style?: React.CSSProperties;
}
export function StickyKnopf(props: StickyKnopfProps): JSX.Element | null;

/** Eine Alltagsszene: Zeichnung und ein konkreter Satz. */
export interface SzeneKarteProps {
  /** Motiv der Zeichnung, fuer den Platzhalter. */
  motiv?: string;
  /** Der Satz - mit Uhrzeit, Betrag oder Gegenstand: "Freitag, 18:40: Rückfahrt vom Turnier. Fahrer: niemand." */
  satz: React.ReactNode;
  /** Eigenes Bild statt Platzhalter. */
  bild?: React.ReactNode;
  style?: React.CSSProperties;
}
export function SzeneKarte(props: SzeneKarteProps): JSX.Element;

/** Kleine Zeile unter dem Knopf: drei ueberpruefbare Fakten, mit Punkt getrennt. */
export interface VertrauenszeileProps {
  fakten?: string[];
  style?: React.CSSProperties;
}
export function Vertrauenszeile(props: VertrauenszeileProps): JSX.Element;

/** Die Navigation der Website: Logo, drei bis vier Links, ein Knopf. */
export interface WebNavigationProps {
  links?: string[];
  /** Der eine Knopf. Nennt die Folge: "Auf die Liste setzen", nach dem Start "Albert laden". */
  knopf?: string;
  onKnopf?: () => void;
  onLink?: (link: string) => void;
  /** Am Handy: nur Logo und Knopf. */
  geraet?: "desktop" | "phone";
  style?: React.CSSProperties;
}
export function WebNavigation(props: WebNavigationProps): JSX.Element;

/** Das Satellitenbild einer Familie: Kern, Familie, Freunde und Helfer als drei Ringe um den Haushalt. */
export interface SatellitMitglied {
  id?: string; name: string;
  /** Rolle im Haushalt: owner | adult | child | guest | service */
  rolle: "owner" | "adult" | "child" | "guest" | "service";
  /** Verwandtschaft (albert.kinship): mother, father, partner, daughter, son, grandmother, grandfather, aunt, uncle, au_pair, household_help, friend, other */
  beziehung?: string | null;
  /** Personenfarbe 1–8 (6 und 8 sind nicht vergeben). */
  farbe?: number | null;
}
export interface SatellitProps {
  mitglieder: SatellitMitglied[];
  /** Name des Haushalts, Initialen in der Mitte. */
  name?: string;
  /** Beschriftung der Ringe. */
  worte?: { kern: string; familie: string; freunde: string };
  style?: React.CSSProperties;
}
export function Satellit(props: SatellitProps): JSX.Element;
/** Welcher Ring: kern (owner, adult, child), familie (Gast mit Verwandtschaft), freunde (alles andere). */
export function kreisVon(m: SatellitMitglied): "kern" | "familie" | "freunde";

/** Stufen von der Liste bis zur Zahlung als Balken mit Quote zur Stufe davor. */
export interface TrichterStufe { name: string; n: number }
export interface TrichterProps { stufen: TrichterStufe[]; style?: React.CSSProperties }
export function Trichter(props: TrichterProps): JSX.Element;