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>
This commit is contained in:
dejanandClaude Opus 4.8 committed 2026-07-17 18:42:31 +02:00
1 parent 9d26dce586
commit f14e57ae8b
3 files changed
+54 -2

No files matched your search

+1 -1
View File
@@ -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>) |