# Muster

> Wie Bauteile zusammen Antworten geben – Bündel, Vorschlag, Konflikt, ohne Zuständigen, Spuren, Formulare, Listen, Scan, Kinder, Seitenblatt, Bestätigen und Löschen.

Quelle: https://brand.heyalbert.family/muster/ · Hey Albert Marke und Designsystem

Ein Muster ist eine wiederkehrende Frage mit einer festen Antwort. Wie zeigt Albert einen Vorschlag? Was passiert, wenn zwei Sachen gleichzeitig sind? Die Antwort steht hier einmal und gilt dann auf jedem Gerät. Jedes Muster nennt seine Bauteile, seine Regel und ein Beispiel aus der Woche von Familie Sonntag.

## Bündel

Eine Sache kommt selten allein. Eine Fahrt zieht Auto, Fahrer, Mitfahrer und Checkliste mit. Das ist Leitsatz drei: Bündel statt Einzelteile. Wer die Fahrt sieht, sieht das Bündel. Wer die Fahrt verschiebt, verschiebt das Bündel mit.

> **Beispiel**
>
> Freitag, 16:40, Handball in der Halle Süd. Tobias fährt den Kombi, Felix fährt mit. Auf der Checkliste steht die Trinkflasche. Die Fahrt hängt als blaue Pille am Termin.

Wenn mehrere Sachen zur selben Stunde fallen, fasst die Bündelkarte sie zusammen. Jede Sache bleibt eine eigene Zeile mit eigenem Zuständigen.

### BuendelKarte

Quelle: `packages/design-system/components/karten/BuendelKarte.jsx`

Die Antwort auf Gleichzeitiges: eine Karte, drei Zeilen – statt drei Karten, die sich stapeln.

```jsx
<BuendelKarte titel="Drei Sachen um 16:00" zeit="16:00 – 17:30" teile={[
  { titel: "Kieferorthopädin", symbol: "arzt", zeit: "16:00 – 17:00", leute: ["anna", "lena"] },
  { titel: "Training", art: "termin", symbol: "sport", zeit: "16:00 – 17:30", leute: ["felix"] },
  { titel: "Abholen Halle Süd", art: "fahrt", zeit: "19:00", offen: true }
]} />
```

Zeilen behalten ihre Bedeutungsfarbe. Eine Zeile ohne Zuständigen wird laut gezeigt: gestrichelter Offen-Rand, nie stillschweigend leer.

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

> **So**
>
> Die Fahrt als `FahrtPille` an den Termin hängen. Wer fährt, steht in der Pille.

> **Nicht so**
>
> Auto, Fahrer und Checkliste als drei lose Karten nebeneinander. Eine Fahrt ohne den Termin, zu dem sie führt.

## Vorschlag von Albert

Albert schlägt vor und handelt nie allein. Jeder Vorschlag hat vier Teile: eine Vorschau, „Übernehmen“, einen zweiten Weg und einen Eintrag im Protokoll. Er ist als Vorschlag erkennbar, auf dem Mac gestrichelt grau, am iPhone als gelbe Karte. Er nennt seine Herkunft.

> **Beispiel**
>
> „Samstag fehlt ein Fahrer. Rückfahrt vom Auswärtsspiel, 14:00. Tobias hat ab 13:00 frei.“ Darunter zwei Knöpfe: „Tobias fragen“ und „Später“. Nach „Tobias fragen“ erscheint ein Toast mit „Rückgängig“.

### VorschlagKarte

Quelle: `packages/design-system/components/karten/VorschlagKarte.jsx`

Alberts Vorschlag auf dem iPhone – gelb, mit Formen, immer mit zwei Knöpfen.

```jsx
<VorschlagKarte titel="Samstag fehlt ein Fahrer."
  text="Rückfahrt vom Auswärtsspiel, 14:00. Bei Tobias steht ab 13:00 nichts."
  schritt="Tobias fragen" zweitSchritt="Später" />
```

So klingt Albert: eine Beobachtung, eine Frage, zwei Knöpfe. Nie "Ich habe für dich…". Auf dem Mac nimmst du stattdessen `<Karte art="vorschlag">` - dort ist der Vorschlag gestrichelt und ohne Füllung.

```ts
/**
 * 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 Regeln:

- **Immer zwei Knöpfe.** Der erste ist ein Verb, das die Folge nennt: „Tobias fragen“, „Übernehmen“. Der zweite ist der andere Weg: „Später“.
- **Immer mit Herkunft.** „Aus der Mail der Klassenlehrerin: Unterschrift und 8 € bis Freitag. Als zwei Aufgaben übernehmen?“
- **Nach dem Übernehmen ein Toast mit „Rückgängig“.** Die Änderung erscheint sofort. Der Rückweg bleibt offen.
- **Jede Aktion von Albert steht im Protokoll.** Wer, was, wann, aus welcher Quelle.

> **Nicht so**
>
> „Albert hat 2 Aufgaben für dich erstellt.“ Albert legt nichts still an, verschickt nichts allein und lobt nicht.

## Konflikt

Zwei Sachen treffen sich. Albert nennt die Sachlage, bewertet sie nicht und blockiert nichts. Die Konfliktkarte trägt einen nächsten Schritt als Verb.

### KonfliktKarte

Quelle: `packages/design-system/components/karten/KonfliktKarte.jsx`

Die Karte für zwei Sachen, die sich treffen – sie zeigt es und hält niemanden auf.

```jsx
<KonfliktKarte titel="Lena schwimmt, Felix spielt Handball – beides um 16:00."
  erklaerung="Ein Auto, zwei Orte. Sofia ist bis 17:00 da." wer={["lena", "felix"]}
  schritt="Sofia fragen" zweitSchritt="Später" />
```

Register Family Manager. Kein Rot, kein Ausrufezeichen, kein "Fehler" – die Karte stellt fest und nennt einen Schritt.

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

> **So**
>
> „Lena schwimmt, Felix spielt – beides um 16:00. Ein Auto, zwei Orte. Sofia ist bis 17:00 da.“ Knopf: „Sofia fragen“.

> **Nicht so**
>
> „Fehler: Terminkonflikt!“ Kein Rot, kein Warnzeichen, kein gesperrter Speichern-Knopf. Rosa heißt nie Fehler.

## Ohne Zuständigen

Alles hat genau einen Zuständigen. Fehlt er, ist das kein neutraler Zustand, sondern ein Problem, und es wird laut gezeigt: gestrichelter Rand in Offen-Rosa, eine Pille „Ohne Zuständigen“, ein Knopf, mit dem jemand übernimmt. Albert benennt die Lücke und bietet einen Weg an.

### Karte

Quelle: `packages/design-system/components/karten/Karte.jsx`

Die Karte – das Ding, aus dem Heute, Woche und Kalender bestehen. Ein Datenmodell, viele Ansichten.

```jsx
<Karte art="fahrt" titel="Rückfahrt Auswärtsspiel" ort="Sportplatz Nord → Zuhause"
  zeit="14:00 – 14:30" leute={["felix"]} hoehe="hoch"
  pillen={<ZustandsPille>Kein Fahrer</ZustandsPille>}
  knoepfe={<Knopf>Ich fahre</Knopf>} />

<Karte art="vorschlag" titel="Bei Tobias steht ab 13:00 nichts. Fragen?"
  unterzeile="Vorschlag von Albert"
  knoepfe={<KarteVorschlagKnoepfe onUebernehmen={…} onZurueck={…} />} />
```

Register 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.

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

> **Beispiel**
>
> „Für die Rückfahrt am Freitag fehlt noch ein Fahrer – bei Tobias steht ab 15:00 nichts.“ Die Karte „Abholen Halle Süd, 19:00“ trägt den gestrichelten Rand, bis jemand „Ich fahre“ wählt.

Die einzige Ausnahme ist die Aufgaben-Inbox. Dort darf etwas kurz ohne Zuständigen liegen, bis es verteilt ist. Im Wochenüberblick zählt Offenes oben mit, am iPhone bekommt der Tag mit Offenem einen rosa Kreis im Tagesreiter.

> **Nicht so**
>
> Offen-Rosa als Fläche. Den Rand für etwas anderes als „ohne Zuständigen“. Eine Sache ohne Zuständigen, die grau und leise in der Liste steht.

## Spuren je Mensch

Gleichzeitiges hat drei Antworten. Die Bündelkarte fasst zusammen, die Konfliktkarte benennt den Zusammenstoß. Die Spuren zeigen je Mensch eine Zeile über die Stunden. So sieht man auf einen Blick, wer wann frei ist.

### SpurenJeMensch

Quelle: `packages/design-system/components/karten/SpurenJeMensch.jsx`

Spuren je Mensch – wenn drei Sachen gleichzeitig laufen und die Frage "wer wo" lautet.

```jsx
<SpurenJeMensch leute={["anna", "tobias", "sofia"]} von={15} bis={20} spuren={{
  anna:   [{ titel: "Kieferorthopädin", von: 16, bis: 17 }],
  tobias: [{ titel: "Abholen Halle Süd", von: 19, bis: 19.5, art: "fahrt", offen: true }],
  sofia:  [{ titel: "Abholen Schule", von: 15, bis: 15.5, art: "fahrt" }]
}} />
```

Jede Spur trägt Name und Avatar, nicht nur Farbe. Dieselben Daten wie im Stundenraster – ein Datenmodell, viele Ansichten.

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

Wann welche Antwort passt:

| Lage | Muster |
|---|---|
| Mehrere Sachen zur selben Stunde, alle haben einen Zuständigen | Bündelkarte |
| Zwei Sachen brauchen dieselbe Person oder dasselbe Auto | Konfliktkarte |
| Man sucht, wer am Nachmittag frei ist | Spuren je Mensch |

## Knopfreihe

Knöpfe stehen nebeneinander, wenn beide Platz haben. Sonst stehen sie untereinander, in voller Breite. Ein Knopf ist immer einzeilig. Zwei ungleich breite Knöpfe untereinander gibt es nicht.

### Knopfreihe

Quelle: `packages/design-system/components/bausteine/Knopf.jsx`

> **So**
>
> Ein Verb, das die Folge nennt: „Fahrt übernehmen“, „Woche planen“, „In den Safe legen“. Der erste Knopf schwarz, der zweite beige.

> **Nicht so**
>
> „OK“, „Absenden“, „Los geht’s!“. „Abbrechen“ ohne Gegenstand. Ein Knopf, der in zwei Zeilen umbricht.

## Formulare

Ein Formular fragt nur, was es wirklich braucht. Auf der Website gilt: ein Feld pro Formular, ein Verb pro Knopf. Jedes Feld über eins kostet ungefähr die Hälfte der Einträge. Darum hat die Liste genau ein Feld, die E-Mail-Adresse.

### EmailZeile

Quelle: `packages/design-system/components/website/EmailZeile.jsx`

Das eine Feld der Website.

```jsx
<EmailZeile onSenden={email => merken(email)} />
```

Ein Feld: 12,4 % tragen sich ein; vier Felder: die Hälfte. Kein Name, kein Häkchen, kein zweites Feld.

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

In der App füllt Albert vor, was er weiß, und markiert es als Vorschlag. Ein Mensch bestätigt. Pflichtfelder, die leer sind, machen den Knopf nicht durchscheinend, sondern inaktiv als eigene Rolle. Fehler im Feld nennen, was fehlt und was richtig wäre: „Die Uhrzeit fehlt. Zum Beispiel 16:40.“

> **Hinweis**
>
> Für Eingabe, Auswahl, Häkchen und Dialog im Web gibt es die Web-Primitive in `bauteile/ui/` auf unseren Rollen. Siehe [Bauteile](/bauteile/#gruppe-ui).

## Listen

Die Woche als Liste ist die Antwort am iPhone, wenn das Raster zu eng wird. Jeder Tag ist eine Zeile mit Tag-Pille, einem Satzteil und der verplanten Zeit. Heute ist schwarz. Ein Tag klappt auf und zeigt seine Karten in der kompakten Form.

### Listenzeile

Quelle: `packages/design-system/components/zeit/Listenzeile.jsx`

Die Woche als Liste – für das iPhone, wo ein Raster zu dicht wird.

```jsx
<Listenzeile tag="Mi 3." heute text="heute · Anna und Felix" wert="3,0 h" aufgeklappt>
  <Karte kompakt titel="Elternabend Klasse 6" symbol="schule" zeit="19:00" leute={["anna"]} />
</Listenzeile>
```

Der Text sagt, wer den Tag trägt, nicht wie voll er ist. Zahlen deutsch: "3,0 h".

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

Regeln für Listen:

- Eine Zeile sagt in einem Satzteil, was der Tag trägt: „heute · Anna und Felix“.
- Zahlen stehen rechts, in Tabellenziffern: „3,0 h“.
- Vergangenes ist zurückgenommen, aber lesbar: „vorbei · zum Aufklappen“.
- Ist die Liste leer, zeigt sie einen leeren Zustand, keine leere Fläche.

## Scan-Fluss

Papier wird zum Vorschlag in drei Schritten: Kamera, Seitenstapel, Vorschlag. Erkannt wird auf dem Gerät. An ein Modell geht nur der erkannte Text, nie das Bild. Der Vorschlag nennt Absender, Betrag, Frist und Ablage. Erst „Übernehmen“ legt ab.

### ScannerFluss

Quelle: `packages/design-system/components/scan/ScannerFluss.jsx`

Der Scanner – drei Schritte: Kamera, Stapel, Vorschlag.

```jsx
<ScannerFluss schritt="vorschlag" seiten={2} vorschlag={{
  titel: "Rechnung Musikschule", absender: "Musikschule Nord",
  betrag: "48,00 €", frist: "18. September", ablage: "Wichtiges › Verträge"
}} />
```

Der 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.

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

> **Beispiel**
>
> „Rechnung Musikschule · Musikschule Nord · 48,00 € · Frist 18. September · Wichtiges › Verträge“. Knöpfe: „Übernehmen“ und „Später“.

## Kinder

Kinder sind Beteiligte, nicht Publikum. Die Prüffrage für jede Kinderansicht: Könnte eine Neunjährige sie allein benutzen? Kinderansichten nutzen die Zielfläche 56 px, 16 px Schrift auf Knöpfen und das Register Vorleser.

### TalerStand

Quelle: `packages/design-system/components/kinder/TalerStand.jsx`

Der Taler-Stand für Kinder – Register Vorleser, kurze Sätze, grosse Wörter.

```jsx
<TalerStand wer="lena" taler={14} ziel={30} zielName="Skateboard"
  geschafft={["Tisch gedeckt", "Zimmer aufgeräumt", "Schwimmzeug gepackt"]}
  regal={[{ name: "Kino", taler: 20 }, { name: "Eis", taler: 4 }]} />
```

Nicht 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.

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

Die Regeln für Taler:

- Jedes Kind sieht nur den eigenen Stand.
- Keine Rangliste, kein Vergleich unter Geschwistern, kein Abzug, kein Druck durch Serien.
- Sichtbar ist, was geschafft ist, nie eine Quote oder ein Aufholbalken.
- Die Werte legen die Eltern fest. Albert stellt fest, loben tun Menschen: „Fertig. Bleibt noch: Zimmer aufräumen.“

> **Nicht so**
>
> „Super gemacht!!“ mit Konfetti. „Felix hat diese Woche mehr Taler als Lena.“ Ein roter Balken für Verpasstes.

## Seitenblatt

Zusatzinformationen öffnen sich im Seitenblatt von rechts, statt auf eine neue Seite zu springen. Die Fläche dahinter bleibt sichtbar und wird vom Schleier gedämpft (`--flaeche-schleier`). So geht der Blick nicht verloren. Im HQ öffnen Kennzahl-Kacheln, Kontakte und Mails ihr Seitenblatt. Für das Web gibt es dafür das Primitiv `Sheet` in `bauteile/ui/`.

> **So**
>
> Eine Kachel „2 Fahrten heute“ antippen: Rechts öffnet sich das Blatt mit den zwei Fahrten. Die Übersicht bleibt dahinter stehen.

> **Offen**
>
> Ob das Seitenblatt auch in der App für Familien kommt, zum Beispiel am iPad, ist nicht entschieden. Belegt ist es bisher im HQ.

## Bestätigen und Rückgängig

Jede Änderung erscheint sofort, also optimistisch. Danach kommt ein Toast. Er stellt fest, im Präsens oder in der Vergangenheitsform desselben Verbs, und bietet „Rückgängig“ an. Er lobt nicht.

### Toast

Quelle: `packages/design-system/components/zustaende/Toast.jsx`

Der Toast – eine Feststellung und ein Rückweg.

```jsx
<Toast text="Tobias fährt am Samstag." onZurueck={zurueck} />
```

Albert stellt fest ("Fertig."), er lobt nicht. Ohne `onZurueck` gibt es keinen Toast – was nicht rücknehmbar ist, wird vorher gefragt.

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

> **So**
>
> „Fahrt übernommen. Rückgängig“ · „Tobias fährt am Freitag. Rückgängig“

> **Nicht so**
>
> „Erfolgreich gespeichert!“ · „Super, das hat geklappt!“

## Löschen

Löschen ist das eine, was „Rückgängig“ nicht auffängt. Darum fragt Albert einmal nach und nennt die Folge ohne Drama. Gelöscht wird an einer Stelle, mit Bestätigung im Dialog. Im HQ geht das auf der Eintragsseite und in der Sammelleiste, nie mit einem Klick in der Zeile.

> **So**
>
> „Das Album und seine 84 Bilder werden gelöscht. Das lässt sich nicht rückgängig machen.“ Knöpfe: „Album löschen“ und „Behalten“.

> **Nicht so**
>
> „Bist du wirklich, wirklich sicher?“ Ein roter Knopf mit „OK“. Löschen ohne Rückfrage.