Editor heart piece: first filled-canvas pattern (block cards + edges)

Built the missing core of the flow editor as a new Subframe page "S01d
Editor gefuellt": a filled canvas with a real left-to-right flow —
Neue Anfrage -> Wenn-Dann -> (Ja) Aufgabe anlegen / (Nein) E-Mail senden.

Validated with Dejan (2026-07-17):
- Flow direction: left to right (n8n pattern)
- Card content: icon + name + plain-text summary (e.g. "Neue Anfrage —
  aus Quelle: Website"), so the whole flow reads without opening cards
- Category colour on the icon; branch cards (Wenn-Dann) get two right
  connection points, green "Ja" over neutral "Nein"

Editor chrome (header, mode toggle, minimap, toolbar) matches V1
Vollbild minimal. Obsidian synced: new screen file S01d, tracker row
updated from "FEHLT" to "In Subframe", canvas node now points to the
built page.

Still to build (noted in S01d): selected-card state, inline validation
badges (not connected / missing field / loop), empty->filled transition,
right-click node menu, real edge interaction.

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

02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/Screens/S01d Baustein-Karte und Kanten.md

@@ -0,0 +1,52 @@
+---
+kind: screen
+project: HiveGrid Screen Project
+ticket: D-FLOW
+package: WF-P12 Flow-Editor
+id: S01d
+screen: Baustein-Karte und Kanten (gefuellter Editor)
+typ: BESPOKE (schwerste UI)
+umsetzung: Bauen
+status: In Subframe (erstes Muster) - Review offen
+route: "in S01 (gefuellte Zeichenflaeche)"
+subframe: "https://app.subframe.com/f023064a5ca0/design/379f7080-4d5a-41ee-8508-476e900cbb9d/edit"
+---
+
+# S01d — Baustein-Karte und Kanten
+
+## Ziel
+
+Das Herzstück des Editors: wie ein Baustein als Karte auf der Zeichenfläche aussieht und wie die Karten mit Pfeilen zusammenhängen. Ohne das hängen die 30 Konfig-Dialoge an nichts.
+
+## Validierte Grundentscheidungen (Dejan, 2026-07-17)
+
+- **Fluss-Richtung: von links nach rechts** (n8n-Muster). Auslöser links, Schritte nach rechts, Verzweigungen versetzt nach oben/unten.
+- **Karten-Inhalt: Symbol + Name + Klartext-Zusammenfassung.** Beispiel: »📥 Neue Anfrage — aus Quelle: Website«. So liest man den ganzen Ablauf, ohne jede Karte zu öffnen.
+- **Kategorie-Farbe am Symbol** je Baustein (Auslöser grün, Aktion gelb/blau, Logik violett …).
+
+## Aufbau einer Karte
+
+- Rahmen: `rounded-md border-border-default bg-surface-neutral-secondary shadow-sm`, feste Breite ~210px.
+- Erste Zeile: `IconWithBackground` (size=small, Kategorie-Hintergrund) + Name (`body-small-semibold`).
+- Zweite Zeile: Klartext-Zusammenfassung (`body-extra-small-regular`, tertiär).
+- Verbindungspunkte: kleine Kreise mittig an linker und rechter Kante, halb über den Rand ragend.
+- **Verzweigungs-Karten** (Wenn-Dann): rechts **zwei** Punkte — grün »Ja« oben, neutral »Nein« unten. (Switch analog mehrere, Schleife Weiter/Fertig.)
+
+## Erstes gebautes Muster (Subframe)
+
+Seite `S01d Editor gefuellt`: gefüllte Zeichenfläche mit Beispiel-Ablauf
+Neue Anfrage → Wenn-Dann → (Ja) Aufgabe anlegen / (Nein) E-Mail senden.
+Kopfzeile, Modus-Umschalter, Mini-Übersicht und Werkzeugleiste wie `V1 Vollbild minimal`.
+
+## Was am Editor noch fehlt (nächste Schritte)
+
+1. **Karte im ausgewählten Zustand** (angeklickt → Rahmen hervorgehoben, öffnet den Konfig-Dialog).
+2. **Inline-Validierung an der Karte**: Warn-Abzeichen »nicht verbunden« / »Pflichtfeld fehlt« / »Schleifen-Verdacht«.
+3. **Leer → gefüllt**: Übergang vom Plus-Platzhalter (V1) zur ersten Karte.
+4. **Rechtsklick auf eine Karte** (eigenes Kontextmenü: Konfigurieren, Duplizieren, Löschen) — ergänzt das bestehende Canvas-Kontextmenü [[S01c Canvas-Kontextmenue]].
+5. **Kanten-Interaktion** (Klick-Verbinden vs. Ziehen) — bleibt Subframe-Iteration.
+
+## Offene Punkte
+
+- Modus-Umschalter »Bauen / Aktivität / Auswertung« im Kopf ist weiterhin **offen** (siehe [[S01 Flow-Editor]]).
+- Kanten sind derzeit als absolute Linien gezeichnet (Wireframe-Näherung), nicht als echte dynamische Verbinder.

02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/WF-P12 Flow-Editor.canvas

@@ -8,7 +8,7 @@
 		{"id":"s01","type":"file","file":"02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/Screens/S01 Flow-Editor.md","x":1240,"y":0,"width":420,"height":200},
 		{"id":"s01b","type":"file","file":"02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/Screens/S01b Baustein-Picker.md","x":1800,"y":-80,"width":420,"height":170},
 		{"id":"s01c","type":"file","file":"02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/Screens/S01c Canvas-Kontextmenue.md","x":1800,"y":110,"width":420,"height":170},
-		{"id":"s01d","type":"text","text":"# S01d — Baustein-Karte + Kanten\n\nFEHLT — hoechste Prioritaet.\n\nOhne die Knoten-Darstellung auf dem Canvas haengen die 30 Konfig-Dialoge an nichts. Inkl. Verzweigungs-Kanten (Wenn-Dann Ja/Nein, Switch, Schleife) und Inline-Validierung am Baustein.","x":2260,"y":0,"width":420,"height":200},
+		{"id":"s01d","type":"file","file":"02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/Screens/S01d Baustein-Karte und Kanten.md","x":2260,"y":0,"width":420,"height":200},
 		{"id":"m01","type":"file","file":"02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/Screens/M01 Probelauf.md","x":560,"y":560,"width":420,"height":200},
 		{"id":"m02","type":"file","file":"02 Wireframes/P12 Automationen/WF-P12 Flow-Editor/Screens/M02 Schleifen-Warnung.md","x":1240,"y":560,"width":420,"height":200},
 		{"id":"note-embed","type":"text","text":"# Anordnung (neu ab 2026-07-12)\n\nVollbild-Canvas · Baustein-Picker als Drawer · Konfig als echter Dialog je Baustein.\n\nDie alte Anordnung (Katalog links · Konfig rechts) ist ERSETZT.\n\nDie 30 Konfig-Dialoge liegen in WF-P12 Verwaltung (S05 / S05a).","x":0,"y":560,"width":460,"height":240}

02 Wireframes/Screen Paket Tracker.md

@@ -187,7 +187,7 @@ Diese Datei ist der erste Ort, um zu sehen:
 | S01 | Flow-Editor (Vollbild-Canvas) | WF-P12 Flow-Editor | BESPOKE | Bauen | In Subframe (Grundgeruest) / Review offen | `/automations/:id/edit` | [MD](<P12 Automationen/WF-P12 Flow-Editor/Screens/S01 Flow-Editor.md>) | [Subframe](<https://app.subframe.com/f023064a5ca0/design/ae9f5d91-1153-44de-9af3-63010bc86162/edit>) | [Canvas](<P12 Automationen/WF-P12 Flow-Editor/WF-P12 Flow-Editor.canvas>) |
 | S01b | Baustein-Picker (Drawer) | WF-P12 Flow-Editor | Drawer | Bauen | In Subframe / Farbschema + fehlende Bausteine nachziehen | aus S01 | [MD](<P12 Automationen/WF-P12 Flow-Editor/Screens/S01b Baustein-Picker.md>) | [Subframe](<https://app.subframe.com/f023064a5ca0/design/6fab8a3e-c016-4381-b7e8-19414e8dcb7b/edit>) | [Canvas](<P12 Automationen/WF-P12 Flow-Editor/WF-P12 Flow-Editor.canvas>) |
 | S01c | Canvas-Kontextmenue | WF-P12 Flow-Editor | Kontextmenue | Bauen | In Subframe / Review offen | Rechtsklick in S01 | [MD](<P12 Automationen/WF-P12 Flow-Editor/Screens/S01c Canvas-Kontextmenue.md>) | [Subframe](<https://app.subframe.com/f023064a5ca0/design/2278da93-f0a2-4e46-bd3b-250d5912a62d/edit>) | [Canvas](<P12 Automationen/WF-P12 Flow-Editor/WF-P12 Flow-Editor.canvas>) |
-| S01d | Baustein-Karte + Kanten auf dem Canvas | WF-P12 Flow-Editor | BESPOKE | Bauen | **FEHLT — hoechste Prioritaet** | in S01 | [MD](<P12 Automationen/WF-P12 Flow-Editor/Screens/S01 Flow-Editor.md>) | - | [Canvas](<P12 Automationen/WF-P12 Flow-Editor/WF-P12 Flow-Editor.canvas>) |
+| S01d | Baustein-Karte + Kanten (gefuellter Editor) | WF-P12 Flow-Editor | BESPOKE | Bauen | In Subframe (erstes Muster) / Review offen | in S01 | [MD](<P12 Automationen/WF-P12 Flow-Editor/Screens/S01d Baustein-Karte und Kanten.md>) | [Subframe](<https://app.subframe.com/f023064a5ca0/design/379f7080-4d5a-41ee-8508-476e900cbb9d/edit>) | [Canvas](<P12 Automationen/WF-P12 Flow-Editor/WF-P12 Flow-Editor.canvas>) |
 | M01 | Probelauf (Dry-Run) | WF-P12 Flow-Editor | Modal | Bauen | Subframe geloescht → neu bauen | aus S01 | [MD](<P12 Automationen/WF-P12 Flow-Editor/Screens/M01 Probelauf.md>) | - | [Canvas](<P12 Automationen/WF-P12 Flow-Editor/WF-P12 Flow-Editor.canvas>) |
 | M02 | Schleifen-Warnung | WF-P12 Flow-Editor | Modal | Bauen | Subframe geloescht → neu bauen | aus S01 | [MD](<P12 Automationen/WF-P12 Flow-Editor/Screens/M02 Schleifen-Warnung.md>) | - | [Canvas](<P12 Automationen/WF-P12 Flow-Editor/WF-P12 Flow-Editor.canvas>) |
 | M03 | Start-Auswahl (leer/Vorlage) | WF-P12 Flow-Editor | Modal | Bauen | Subframe geloescht → neu bauen | + Neue Automation | [MD](<P12 Automationen/WF-P12 Flow-Editor/Screens/M03 Start-Auswahl.md>) | - | [Canvas](<P12 Automationen/WF-P12 Flow-Editor/WF-P12 Flow-Editor.canvas>) |