Commit Graph
117 Commits
Author SHA1 Message Date
Michael HoennigandClaude Opus 4.8 a69d51b908 frontend: Darstellungs-Umschalter mit Icons statt Text
Segment-Buttons zeigen jetzt schematische Baum-Icons in der Reihenfolge
horizontal · kompakt · vertikal, jeweils mit Tooltip (title) und
aria-label. SPEC §9 entsprechend ergänzt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 11:24:44 +02:00
Michael HoennigandClaude Opus 4.8 1fe86d748c frontend: Splitter erreicht beide Extreme (Snap zur Titelzeile)
Der Splitter rastet nahe eines Randes in den minimierten Zustand des
jeweiligen Panels ein (gleiche Optik wie die Min-Buttons) und skaliert
dazwischen frei. Damit lassen sich beide Panels per Drag bis zu beiden
Extremen ziehen — in Seiten- wie Stapelmodus.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 11:22:14 +02:00
Michael HoennigandClaude Opus 4.8 c9fc505404 frontend: Wiederherstellen aus dem minimierten Zustand
min = Titelzeile, max = voller Platz abzüglich der Titelzeile des anderen
Panels (durch Vollhöhen-Layout und gespiegelte Collapse-Zustände bereits
gegeben). Ergänzt: Klick auf die Titelzeile eines minimierten Panels
stellt es wieder her; Doppelklick auf den Splitter setzt auf normal.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 11:20:17 +02:00
Michael HoennigandClaude Opus 4.8 f32cda676b frontend: Zoom skaliert Inhalt, Vollhöhen-Layout mit fixen Panes
Bisher wuchs beim Zoomen das Diagramm-Panel mit. Jetzt füllt die App die
Bildschirmhöhe (Body als Flex-Spalte), beide Panels sind flex-Container
mit fixem, scrollendem Inhaltsbereich. Der Zoom (CSS-`zoom` auf dem Baum)
skaliert damit nur den Inhalt; das Panel behält seine Größe, der Baum
scrollt im Diagramm-Viewport.

Splitter im Stapelmodus jetzt über die Grid-Zeile (--drow) statt
Diagramm-Höhe; Editor-Textarea füllt seinen Pane und scrollt intern.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 11:18:02 +02:00
Michael HoennigandClaude Opus 4.8 486415d409 frontend: Copyright-Fußzeile
Dezente Fußzeile "© 2026 Michael Hönnig" unter dem Editor.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 11:11:05 +02:00
Michael HoennigandClaude Opus 4.8 7b6da8e286 frontend: Zoom für das Diagramm
Schwebende Zoom-Steuerung (−/Prozent/+) unten rechts im Diagramm plus
Strg/Cmd + Mausrad. Skaliert via CSS-`zoom` (Layout-Box), damit die
Scrollbalken des Containers korrekt greifen; Grenzen 30–300 %.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 11:04:09 +02:00
Michael HoennigandClaude Opus 4.8 a105d2a480 frontend: Minimieren kollabiert Panel auf die Titelzeile
Statt Preset-Größen minimiert/maximiert min/max jetzt echt:
- minimieren blendet den Panel-Körper aus, nur die Titelzeile bleibt;
  gestapelt als horizontale Leiste, seitlich als schmaler vertikaler
  Streifen mit gedrehter Beschriftung.
- maximieren des einen minimiert das andere Panel (gespiegelt).
- freies Ziehen am Splitter stellt beide wieder her.

Schmaler Viewport (<=820px) verhält sich wie gestapelt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 11:01:28 +02:00
Michael HoennigandClaude Opus 4.8 5bd25aca0d frontend: SEO-Texte – Titel, Description, Untertitel
- <title>: WBS-Editor für Projektstrukturplan & Feature-Tree (Und/Oder-Baum)
- <meta name="description"> mit den Kern-Suchbegriffen ergänzt
- Untertitel über dem Diagramm: knappe Tool-Beschreibung

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:56:14 +02:00
Michael HoennigandClaude Opus 4.8 352b086b19 frontend: Clipboard-Copy für den Notationstext
Button "kopieren" im Editor-Kopf kopiert den Textarea-Inhalt via
navigator.clipboard.writeText (Fallback: Auswahl + execCommand) und
quittiert kurz mit "kopiert ✓".

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:46:39 +02:00
Michael HoennigandClaude Opus 4.8 4ca2108902 frontend: Min/Normal/Max je Bereich (Fenster-Buttons)
Beide Panel-Köpfe (Editor, Diagramm) erhalten drei Fenster-Buttons
(minimieren/normal/maximieren). Sie springen den Splitter auf Presets:
maximieren des einen = minimieren des anderen (gespiegelte Aktiv-Markierung).
Seitlich über --col (72% / 360px / 20%), gestapelt über --diagram-h
(72vh / auto / 160px). Freies Ziehen am Splitter hebt das Preset auf.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:45:09 +02:00
Michael HoennigandClaude Opus 4.8 707f50a223 frontend: Bereiche per Splitter (Drag) aufteilen
Verschiebbarer Gutter zwischen Editor und Diagramm:
- seitlich (vertikal/kompakt): zieht die Editor-Spaltenbreite (--col).
- gestapelt (horizontal): begrenzt die Diagrammhöhe (--diagram-h), das
  Diagramm scrollt dann intern.

Umgesetzt über ein Gutter-Grid-Feld und Pointer-Events (mit
setPointerCapture); Grenzen via min/max. Kein neues Framework.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:41:31 +02:00
Michael HoennigandClaude Opus 4.8 593f81e50b frontend: T-Shirt-Größen-Badge in Petrol
Größen-Badge (oben rechts am Knoten) von dunkler Tinte auf Petrol (--or)
umgestellt, weiße Schrift bleibt. SPEC §5 angepasst.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:36:57 +02:00
Michael HoennigandClaude Opus 4.8 b8cddffd4c frontend: Warn-Umrandung an unzerlegten M+-Knoten entfernen
Der Geister-Knoten "Untergliederung fehlt" darunter genügt als Hinweis;
die zusätzliche gestrichelte orange Umrandung des Knotens war doppelt.
Die needs-Klasse wird nicht mehr vergeben. SPEC §5 angepasst.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:36:24 +02:00
Michael HoennigandClaude Opus 4.8 ab800b432b frontend: Kopfzeilentext kürzen
Der Zusatz über die Darstellungsmodi machte den Untertitel zu lang;
"Struktur als Text bearbeiten — das Diagramm entsteht live." genügt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:35:35 +02:00
Michael HoennigandClaude Opus 4.8 20b9d89f88 frontend: Darstellung horizontal/vertikal/kompakt + graue Any-of-Linien
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>
2026-07-21 10:30:56 +02:00
Michael HoennigandClaude Opus 4.8 be19bac84f frontend: Toggle „vertikal" schaltet Seitenlayout mit
Der „vertikal"-Umschalter steuert jetzt zusätzlich zur Baumausrichtung
die Anordnung von Editor und Diagramm:

- aktiv (vertikal): Editor links, Diagramm rechts — der schmale,
  transponierte Baum passt in die rechte Spalte.
- inaktiv (horizontal): Diagramm oben und Editor unten, je volle Breite;
  die Agenda (Legende/Hilfe) sitzt rechts im Editor als aufklappbares
  <details>.

Umgesetzt via CSS-Grid mit grid-template-areas und .side-Klasse; die
.hint-Legende wandert in ein <details class="agenda">, der Editor-Body
wird zum Flex-Container (horizontal Zeile, vertikal Spalte).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 10:03:50 +02:00
Michael Hoennig ded894a4da initial, vibe-coded version, mostly frontend 2026-07-21 09:55:30 +02:00