Michael HoennigandClaude Opus 4.8
20b9d89f88
Der bisherige „vertikal"-Toggle wird zur dreistufigen Auswahl „horizontal / vertikal / kompakt", die zugleich das Seitenlayout wählt: - horizontal: Diagramm oben, Editor unten (je volle Breite), Agenda rechts im Editor aufklappbar. - vertikal: Editor links, Diagramm rechts; „all of" tritt rechts aus. - kompakt: wie vertikal, aber „all of" läuft nach unten (spart Breite); Gate nur noch über den Linienstil codiert. Zusätzlich wird das Petrol im Diagramm aufgegeben: any-of-Linien (Sammelleiste und Abzweige) sowie der Rahmen der Alternative-Knoten sind in allen Modi durchgehend gestrichelt bzw. grau (#6B7A8C). all-of bleibt durchgezogen in Tinte. Petrol nur noch für UI-Akzente und das Logo. Doku nachgezogen: SPEC §9 (Linienführung, drei Modi), DECISIONS D15, frontend/CLAUDE.md. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
1.4 KiB
1.4 KiB
Werkbaum · Frontend
Editor: index.html ist der funktionierende Prototyp (Text links,
Diagramm rechts, Toggles für transponierte Ansicht und verworfene Elemente).
Konventionen
- Vanilla HTML/CSS/JS, ES-Module; keine Frameworks. Testwerkzeug (Vitest) ok.
- Parser und Renderer müssen headless (ohne Editor-UI) nutzbar bleiben — Basis für SVG-Export und Mermaid-Plugin (docs/ROADMAP.md).
- Design: Farben/Typografie beibehalten (CSS-Variablen, IBM Plex); Statusfarben sind in SPEC §4 normiert. Marke nach ../brand/BRAND.md; Pastelltöne nie im Logo.
Stolperfallen
- Abzweig-Linien zielen auf die Knotenmitte (fester 23-px-Offset,
line-height: 1.3), nicht auf die Mitte des Teilbaums — bei Layout- Änderungen alle drei Modi (horizontal/vertikal/kompakt) prüfen. Vertikal + kompakt teilen die transponierte Basis-CSS; nur vertikal bekommt den Rechts-Ausgang für „all of“, kompakt führt auch „all of“ nach unten. Any-of ist in allen Modi grau: Linien gestrichelt grau und Alternative-Rahmen grau (Basis-CSSul.or). Kein Petrol im Diagramm mehr;var(--or)nur noch für UI-Akzente/Logo (SPEC §9, D15). - Extraktionsreihenfolge im Parser nicht umstellen: Kommentar → Zeichen/
Status → URL → Größe → Tags (sonst kollidiert
@in URLs). - „verworfen" ist per Default ausgeblendet; Filterlogik steckt in
visibleChildren()und muss bei Renderer-Umbauten erhalten bleiben.