Post 4: die Workflow-Engine, drei Ansichten derselben Oberflaeche

Nummer 3 im Redaktionsplan, erscheint Mi 19.08. Carousel, vier Slides,
Theme modern, Variante hell.

DER BEITRAG
Ein Ablauf, die Bausteine, aus denen er entsteht, und der Hinweis, dass man
nicht bei null anfaengt:

  1  Automatisiere deinen Betrieb.   ein Ablauf auf dem Canvas
  2  Erst der Ausloeser.             die Ausloeser-Auswahl
  3  Dann die Aktionen.              die Aktionen-Auswahl
  4  Fang nicht bei null an.         drei fertige Vorlagen

Slide 2 und 3 teilen sich eine Funktion mit zwei Rubriken, weil es im Produkt
eine Auswahl ist: "Ausloeser" und "Aktionen" stehen dort untereinander im
selben Feld. Getrennt gezeichnet waeren es zwei Bilder, die zufaellig gleich
aussehen.

Vier Slides statt der fuenf bis sieben aus dem Redaktionsplan. Das ist eine
Spanne und kein Soll: eine Slide, die nichts hinzufuegt, kostet einen Wisch
und gibt nichts zurueck.

WAS AUS DEM PRODUKT KOMMT UND WAS NICHT
Der Knoten ist NodeItem aus ui/components/NodeWorkflowEngine des Pitch-Pakets:
quadratisch 128 x 128, rounded-lg, 6 px Rand, Titel und Beschreibung unter dem
Feld, beim Ausloeser die linke Flanke voll gerundet. Genau so rendert es auch
assets/screens/workflow.png.

Ein Zwischenstand zeichnete stattdessen breite Karten mit farbiger Kante links
und einem Block "BESCHREIBUNG" -- abgemalt vom Pitch-Bild 02_Praesentation/03.
Im Code des Projekts gibt es das nirgends: weder "BESCHREIBUNG" als Label noch
eine linke Farbkante, beides null Treffer. Der Kommentar behauptete trotzdem,
es sei ein Nachbau der Komponente. Das ist berichtigt.

Die Farben sind die des Produkts, aufgeloest aus ui/theme.css ueber die ganze
Token-Kette und nicht aus dem Bild geschaetzt. Sie tragen Bedeutung: gruen
faengt an, rot aendert Daten, blau meldet, amber macht eine Aufgabe daraus,
violett entscheidet. Ein Zwischenstand hatte sie durch Markenfarben ersetzt,
weil rules.md 2 diese Toene nicht kennt -- zurueckgenommen, der Beitrag zeigt
die Oberflaeche, und umgefaerbt waere es eine Nacherzaehlung.

Alle Produkttexte stehen woertlich in der Quelle. Wo ein Name nicht in eine
Zeile passte, steht er zweizeilig: aus "Daten vereinheitlichen" ein "Pruefen"
zu machen ist keine Kuerzung, sondern ein anderer Name.

DREI STELLEN, AN DENEN BEWUSST ABGEWICHEN WIRD
- Slide 1 gabelt nach dem zweiten Knoten. Alle drei echten Ablaeufe verzweigen
  erst an Position 3 oder 4, und das fuellt ein hochkantes Format schlecht --
  solange der Stamm laeuft, steht ueber und unter ihm nichts. Dafuer fehlt
  zwischen "Formular eingegangen" und "Passender Lead?" der Schritt "Daten
  vereinheitlichen". Ein Ablauf, den es genau so gibt, ist es damit nicht mehr;
  einer, den es geben koennte, schon.
- Slide 4 nennt die Demo-Ablaeufe "Vorlagen". Dass es eine Vorlagen-Bibliothek
  gibt, steht als Merkmal auf der Website; dass sie diese drei enthaelt, steht
  nirgends. Im Werkzeug werden sie ueber workflowId geladen, nicht als Galerie
  gezeigt, und das Wort "Vorlage" kommt in der Komponente nicht vor.
- Kein PDS im Beitrag. Von den sechs Vorlagen nennen drei das Branchenprogramm.
  Uebrig bleibt genau die Gruppe GENERAL_WORKFLOW_PRESETS, in der es kein
  einziges Mal vorkommt -- also keine Auswahl nach Geschmack, sondern die
  vollstaendige zweite Gruppe. Gekuerzt wurde nichts.

Erfundene Vorgaenge sind raus. Ein Zwischenstand hatte eine Slide mit einem
Aktivitaetenverlauf samt Uhrzeiten. Nichts davon war gemessen, und bei einem
Produkt vor dem Start ist eine erfundene Uhrzeit kein Beispiel, sondern ein
Beleg, den es nicht gibt.

DER PUNKTGRUND
Die Arbeitsflaeche des Workflow-Editors, Werte aus WorkflowEditor.tsx der
Website. Zwei begruendete Abweichungen: die Teilung ist verdoppelt, weil ein
24er Raster im Feed auf 9 px zusammenfaellt und zu grauem Schleier wird, und
der Grund bleibt weiss statt getoent, weil rules.md 1a das verbietet.

EIN FEHLER, DER FAST DURCHGERUTSCHT WAERE
Beim Entfernen der Karten-Regeln von Post 2 blieben rund neunzig Zeilen
Deklarationen ohne Selektor stehen, dazu ein Kommentar ohne Ende: nur die
Selektorzeilen waren weggeschnitten. CSS faengt sich davon nicht wieder, der
Parser ueberspringt bis zur naechsten Marke -- und dabei verschwand die Regel
[data-edit] darunter. Damit war das Verschieben von Elementen im Canvas tot,
ohne dass die Seite einen Fehler zeigte. Sichtbar wurde es erst, als ein
gespeicherter Versatz von 3 px nicht mehr ankam.

Behoben, und an der Stelle steht jetzt eine Warnung: Regeln als ganzen Block
entfernen und danach nachsehen, ob document.styleSheets sie noch alle kennt.

NEBENBEI
- Die Ueberschriften stehen auf denselben Werten wie post3.html, bis auf den
  Pixel nachgemessen: 76 px, -0,032em, nowrap und der Versatz dy 3, den auch
  post2, post2-alt und post3 auf jeder Slide tragen.
- Die Projektliste steht sechsmal im Repo, einmal je Post-Seite plus
  uebersicht.html. Post 4 ist ueberall eingetragen. Wer einen siebten Beitrag
  anlegt, muss an alle sechs Stellen denken.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

README.md

@@ -24,6 +24,7 @@ Downloads landen direkt in `~/Downloads`, ohne Browser-Dialog.
 | Post 2 · Die Geschichte | `post2.html` | Carousel, 6 Slides, erscheint 12.08. | [`POST-2.md`](./POST-2.md) |
 | Post 2 · Alternative | `post2-alt.html` | Derselbe Beitrag im Theme `modern` | |
 | Post 3 · Verbinden statt ersetzen | `post3.html` | Einzelbild, Theme `modern`, erscheint 17.08. | |
+| Post 4 · Workflow-Engine | `post4.html` | Carousel, 3 Slides, Theme `modern`, erscheint 19.08. | |
 
 **Alle Streifen nebeneinander** zeigt `uebersicht.html`, erreichbar über
 *Projekt → Alle Projekte im Streifen*. Die Seite baut die Slides nicht selbst
@@ -50,6 +51,126 @@ Zellnummern, dieselbe Belegung, damit es wiedererkennbar bleibt und keine
 Anmutung davon ist. Die vier Waben „In Arbeit" fehlen: auf der Startseite sind
 sie ein Versprechen, im Beitrag wären sie ein Eingeständnis.
 
+**Post 4 zeigt einen einzigen echten Ablauf**, nicht sechs Behauptungen über
+Automatisierung: den Vorgang aus `assets/screens/workflow.png`. Die Bausteine
+sind nachgebaut aus `NodeWorkflowEngine` und `WorkflowEngineClickDummy` des
+Pitch-Pakets, in Markenfarben statt in den UI-Farben des Produkts — Teal trägt
+die Arbeit, Gelb den einen Akzent, Anthrazit die Entscheidung.
+
+**Drei Slides.** Der Redaktionsplan nennt fünf bis sieben, aber das ist eine
+Spanne und kein Soll: eine Slide, die nichts hinzufügt, kostet einen Wisch und
+gibt nichts zurück.
+
+| Slide | Was sie leistet | Ansicht | Quelle der Texte |
+|---|---|---|---|
+| 1 | was es ist | ein Ablauf auf dem Canvas | Knoten aus `assets/screens/workflow.png`, Notiz aus `WORKFLOW_PRESETS`, Anordnung eigen |
+| 2 | was ihn startet | Auslöser-Auswahl | `assets/screens/workflow-bausteine.png` |
+| 3 | was dann passiert | Aktionen-Auswahl | `NodeWorkflowEngine`, Rubriken des `Katalog` |
+| 4 | dass man nicht bei null anfängt | drei Vorlagen | `GENERAL_WORKFLOW_PRESETS` |
+
+Slide 2 und 3 sind **eine Funktion mit zwei Rubriken**, weil es im Produkt eine
+Auswahl ist: „Auslöser" und „Aktionen" stehen dort untereinander im selben
+Feld. Getrennt gezeichnet wären es zwei Bilder, die zufällig gleich aussehen.
+Die Kachelfarbe kommt dabei aus der **Kategorie**, nicht aus dem Knotentyp —
+im Screenshot tragen alle Auslöser eine gelbe Kachel und die Aktion eine
+blaue, samt Punkt vor der Rubrik. Auf dem Canvas ist es anders, dort färbt die
+Wurzelkomponente je Art. Beides stimmt, es sind zwei Ansichten.
+
+**Das Farbsystem stammt aus der Wurzelkomponente** und ist keine Dekoration:
+grün fängt an, rot ändert Daten, blau meldet, amber macht eine Aufgabe daraus,
+violett entscheidet, grau ist ein Fremdsystem. Deshalb sind auf Slide 3 alle
+Kacheln grün — jede Vorlage startet mit einem Auslöser.
+
+> **Die Kartenform auf Slide 3 ist nicht aus dem Projekt.** Im Werkzeug werden
+> Vorlagen nur geladen, nicht als Galerie gezeigt; es gibt dort keine Ansicht,
+> an die man sich halten könnte. Wörtlich sind die Namen, Beschreibungen und
+> Startbausteine, gebaut ist die Form. Der Unterschied gehört benannt.
+
+**Text mittig, Titel ohne Fließtext.** Die Visualisierungen sitzen 896 px breit
+bei x 92, also links wie rechts 92 px Rand — ein linksbündiger Textblock
+darüber steht sichtbar aus der Achse. Die Titel-Slide trägt nur die
+Überschrift: der Ablauf darunter sagt, was gemeint ist, und ein Fließtext
+wiederholte es in Prosa. Dafür fiel hier dieselbe Korrektur an wie in
+`post3.html` — ein leerer Fließtext darf keinen leeren Absatz erzeugen, sonst
+schiebt sein Zeilenabstand die Zeichnung nach unten.
+
+> **Die Gabel auf Slide 1 kommt früher als im Screenshot, und ein Schritt
+> fehlt.** Alle drei echten Abläufe verzweigen erst an Position 3 oder 4 —
+> das füllt ein hochkantes Format schlecht, weil über und unter dem Stamm
+> nichts steht, solange er läuft. Hier gabelt es nach dem zweiten Knoten, und
+> zwischen „Formular eingegangen" und „Passender Lead?" fehlt dadurch „Daten
+> vereinheitlichen". Alle sechs Knoten heißen wörtlich wie in `workflow.png`
+> und tragen dessen Farben, aber diese eine Kante ist zusammengezogen: ein
+> Ablauf, den es genau so gibt, ist es nicht mehr — einer, den es geben
+> könnte, schon. Die Anordnung ist ohnehin eigen, im Werkzeug zieht man
+> Knoten mit der Maus.
+
+**Kein PDS im Beitrag.** Von den sechs Vorlagen nennen drei das
+Branchenprogramm — zwei im Namen, eine in der Beschreibung. Der Beitrag
+richtet sich an Betriebe allgemein, nicht an die, die zufällig dieses eine
+Programm fahren. Übrig bleibt genau die Gruppe `GENERAL_WORKFLOW_PRESETS`, in
+der das Wort kein einziges Mal vorkommt — also keine Auswahl nach Geschmack,
+sondern die vollständige zweite Gruppe. Gekürzt wurde nichts: aus „Offene
+Angebote aus PDS erkennen" ein „Offene Angebote erkennen" zu machen wäre die
+bequeme Lösung und kein Zitat mehr. Lieber eine Karte weniger.
+
+**Alle Produkttexte auf den Slides sind wortgleich aus der Quelle**, Titel wie
+Beschreibungen. Wo ein Name nicht in eine Zeile passte, steht er zweizeilig —
+gekürzt wird nicht, denn aus „Daten vereinheitlichen" ein „Prüfen" zu machen
+ist keine Kürzung, sondern ein anderer Name.
+
+**Der Knoten ist die echte Komponente.** `NodeItem` aus
+`NodeWorkflowEngine.tsx` des Pitch-Pakets: quadratisch 128 × 128, `rounded-lg`,
+6 px Rand, Titel und Beschreibung **unter** dem Feld, beim Auslöser die linke
+Flanke voll gerundet. Genau so rendert es auch `assets/screens/workflow.png`.
+Ein Zwischenstand zeichnete stattdessen breite Karten mit farbiger Kante links
+und einem Block „BESCHREIBUNG" — abgemalt vom Pitch-Bild `02_Präsentation/03`.
+Im Code des Projekts gibt es das nirgends, und der Kommentar behauptete
+trotzdem, es sei ein Nachbau der Komponente.
+
+**Die Farben sind die des Produkts**, nicht die der Marke. Aufgelöst aus
+`ui/theme.css` über die ganze Token-Kette (`surface-ui-subtle-green-default`
+→ `--color-ui-green-100` → `--color-green-100`), nicht aus dem Bild geschätzt:
+
+| Rolle | Fläche | Zeichen |
+|---|---|---|
+| Auslöser | `#DCFCE4` | `#148134` |
+| Daten | `#FEE2E2` | `#C52020` |
+| Entscheidung | `#F0E7FF` | `#691CD4` |
+| Meldung | `#D5EFFF` | `#003BEB` |
+| Abschluss | `#FCF6C5` | `#9B5E0D` |
+
+Ein Zwischenstand hatte sie durch Markenfarben ersetzt, weil `rules.md` §2 diese
+Töne nicht kennt. Das ist zurückgenommen: der Beitrag zeigt die Oberfläche, und
+ihre Farbe trägt Bedeutung — grün fängt an, rot arbeitet an Daten, violett
+entscheidet, blau meldet, gelb schließt ab. Umgefärbt wäre es eine
+Nacherzählung. Der Rand ist `border-default` `#E5E5E5`, also der Wert, vor dem
+`rules.md` §5 warnt; hier trägt er, weil die Felder farbig gefüllt sind.
+
+**Der Notizzettel auf Slide 1** ist `StickyNote.tsx` aus dem Pitch-Paket
+(`rounded-md`, Kopfleiste `h-8`, Text `#424242`, sechs Farbpaare) mit dem
+grünen Zettel aus dem Preset `form-to-pds`, Text unverändert. Zettel sind das,
+was einen Ablauf im Werkzeug von einem Diagramm unterscheidet.
+
+**Was hier bewusst nicht steht: ein erfundener Vorgang.** Ein Zwischenstand
+hatte eine Slide mit einem Aktivitätenverlauf samt Uhrzeiten. Nichts davon war
+gemessen. Bei einem Produkt vor dem Start ist eine erfundene Uhrzeit keine
+Veranschaulichung, sondern ein Beleg, den es nicht gibt.
+
+**Slide 1 trägt einen Ablauf, kein Stichwort.** Im Profilraster ist sie eine
+Kachel von rund 150 px, auf 3:4 beschnitten — dort ist kein Wort lesbar. Was
+ankommt, ist die Form: eine Kette, die sich gabelt.
+
+Was über die 1080 px einer Seite hinausragt, landet auf der Nachbarslide — das
+durchgehende Blatt aus `rules.md` §5 liegt in jeder Slide. Ein Prüfskript misst
+das nach; alle sechs Zeichnungen bleiben auf der Sicherheitszone.
+
+Sein Grund ist **gepunktet statt leer**: die Arbeitsfläche des Workflow-Editors,
+mit den Werten aus `WorkflowEditor.tsx` der Website. Der Punktgrund steht als
+dritte Stellung unter *Versuch → Punkte* und ist die Voreinstellung dieses
+Projekts. Warum das Theme `modern` hier von seinem ruhigen Grund abweicht, steht
+im CSS bei `.layer-raster`.
+
 Die vierzehn Partner-Marken liegen unter `assets/partner/` und sind, wie alles
 andere hier, aus der Website **gespiegelt statt verlinkt**. Sechs davon sind
 PNG und damit dieselbe Wette wie ein Screenshot (§7 in `rules.md`), deshalb

post1.html

@@ -800,6 +800,7 @@ if (location.search.indexOf("nur=streifen") >= 0)
       <button type="button" data-gehe="./post2.html">Post 2</button>
       <button type="button" data-gehe="./post2-alt.html">Post 2 · Alternative</button>
       <button type="button" data-gehe="./post3.html">Post 3 · Verbinden statt ersetzen</button>
+      <button type="button" data-gehe="./post4.html">Post 4 · Workflow-Engine</button>
       <hr>
       <button type="button" data-gehe="./uebersicht.html">Alle Projekte im Streifen</button>
       <hr>

post2-alt.html

@@ -998,6 +998,7 @@ if (location.search.indexOf("nur=streifen") >= 0)
       <button type="button" data-gehe="./post2.html">Post 2</button>
       <button type="button" data-gehe="./post2-alt.html">Post 2 · Alternative</button>
       <button type="button" data-gehe="./post3.html">Post 3 · Verbinden statt ersetzen</button>
+      <button type="button" data-gehe="./post4.html">Post 4 · Workflow-Engine</button>
       <hr>
       <button type="button" data-gehe="./uebersicht.html">Alle Projekte im Streifen</button>
       <hr>

post2.html

@@ -891,6 +891,7 @@ if (location.search.indexOf("nur=streifen") >= 0)
       <button type="button" data-gehe="./post2.html">Post 2</button>
       <button type="button" data-gehe="./post2-alt.html">Post 2 · Alternative</button>
       <button type="button" data-gehe="./post3.html">Post 3 · Verbinden statt ersetzen</button>
+      <button type="button" data-gehe="./post4.html">Post 4 · Workflow-Engine</button>
       <hr>
       <button type="button" data-gehe="./uebersicht.html">Alle Projekte im Streifen</button>
       <hr>

post3.html

@@ -911,6 +911,7 @@ if (location.search.indexOf("nur=streifen") >= 0)
       <button type="button" data-gehe="./post2.html">Post 2</button>
       <button type="button" data-gehe="./post2-alt.html">Post 2 · Alternative</button>
       <button type="button" data-gehe="./post3.html">Post 3 · Verbinden statt ersetzen</button>
+      <button type="button" data-gehe="./post4.html">Post 4 · Workflow-Engine</button>
       <hr>
       <button type="button" data-gehe="./uebersicht.html">Alle Projekte im Streifen</button>
       <hr>

state/post4.json

@@ -0,0 +1,78 @@
+{
+ "bandTon": "orange",
+ "bgState": [
+  {
+   "bg": "raster",
+   "int": "dezent"
+  },
+  {
+   "bg": "raster",
+   "int": "dezent"
+  },
+  {
+   "bg": "raster",
+   "int": "dezent"
+  },
+  {
+   "bg": "raster",
+   "int": "dezent"
+  }
+ ],
+ "current": 2,
+ "deck": [
+  {
+   "ref": "anfrage",
+   "werte": {}
+  },
+  {
+   "ref": "ausloeser",
+   "werte": {}
+  },
+  {
+   "ref": "aktionen",
+   "werte": {}
+  },
+  {
+   "ref": "vorlagen",
+   "werte": {}
+  }
+ ],
+ "edits": [
+  {
+   "headline": {
+    "dy": 3
+   }
+  },
+  {
+   "headline": {
+    "dy": 3
+   }
+  },
+  {
+   "headline": {
+    "dx": 0,
+    "dy": 3
+   }
+  },
+  {
+   "headline": {
+    "dy": 3
+   }
+  }
+ ],
+ "frameStyle": "chamfer",
+ "layoutState": [
+  "standard",
+  "standard",
+  "standard",
+  "standard"
+ ],
+ "rasterAn": "punkte",
+ "superSample": 2,
+ "tagOut": "an",
+ "textMitte": "an",
+ "tilt": "an",
+ "v": 7,
+ "variant": "hell",
+ "view": "streifen"
+}

uebersicht.html

@@ -107,6 +107,7 @@
       <button type="button" data-gehe="./post2.html">Post 2 · Die Geschichte</button>
       <button type="button" data-gehe="./post2-alt.html">Post 2 · Alternative</button>
       <button type="button" data-gehe="./post3.html">Post 3 · Verbinden statt ersetzen</button>
+      <button type="button" data-gehe="./post4.html">Post 4 · Workflow-Engine</button>
       <hr>
       <button type="button" data-klick="neu">Streifen neu laden</button>
     </div>
@@ -131,6 +132,7 @@
     { datei: "./post2.html",     name: "Post 2 · Die Geschichte", theme: "notebook" },
     { datei: "./post2-alt.html", name: "Post 2 · Alternative",    theme: "modern" },
     { datei: "./post3.html",     name: "Post 3 · Verbinden statt ersetzen", theme: "modern" },
+    { datei: "./post4.html",     name: "Post 4 · Workflow-Engine",          theme: "modern" },
   ];
 
   const flaeche = document.getElementById("flaeche");