feat: Label-Umbruch bei 32 statt 40 Zeichen (D64-Nachtrag 3)

Lange Titel zogen das Diagramm zu breit. Ein Parameter in wrapLabel(),
der 32ch-Rückhalt im CSS und SPEC §9 ziehen mit; Balance-Regel und
Erste-Zeile-Verankerung unverändert.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/render.js

@@ -55,7 +55,8 @@ function attr(s){ return esc(String(s)).replace(/"/g,'"'); }
    Beschreibung als data-Attribut wäre der einzige andere Weg gewesen. */
 export const TIP_RULE = '─'.repeat(24);
 
-/* Lange Labels umbrechen (SPEC §9/D64): höchstens ~40 Zeichen je Zeile, und
+/* Lange Labels umbrechen (SPEC §9/D64): höchstens ~32 Zeichen je Zeile (D64,
+   verengt per D64-Nachtrag 3 — 40 zog das Diagramm zu breit), und
    die Zeichen GLEICHMÄSSIG auf die Zeilen verteilt — der gierige CSS-Umbruch
    machte aus 44 Zeichen eine volle Zeile plus ein einsames Wort. Bewusst im
    Renderer statt per `text-wrap:balance`: So schrumpft der Knotenkasten auf
@@ -64,7 +65,7 @@ export const TIP_RULE = '─'.repeat(24);
    Regel ist headless testbar. Gebrochen wird nur an Leerzeichen; ein
    einzelnes Wort über der Grenze bleibt stehen (das CSS fängt es mit
    `max-width` + `overflow-wrap` ab). */
-export function wrapLabel(label, max = 40){
+export function wrapLabel(label, max = 32){
   const text = String(label);
   if(text.length <= max) return [text];
   const words = text.split(' ');

frontend/src/style.css

@@ -693,7 +693,7 @@
        bleibt — der 23-px-Abzweig (§9) trifft bei mehrzeiligen Knoten
        deterministisch die Mitte der ERSTEN Zeile. */
     white-space:pre-line;
-    max-width:40ch;
+    max-width:32ch;
     text-align:center;
     overflow-wrap:break-word;
     box-shadow:0 1px 2px rgba(36,52,71,.08);

frontend/tests/wrap.test.js

@@ -1,4 +1,5 @@
-// Umbruch langer Labels (SPEC §9/D64): höchstens ~40 Zeichen je Zeile und
+// Umbruch langer Labels (SPEC §9/D64, verengt auf 32 per Nachtrag 3):
+// höchstens ~32 Zeichen je Zeile und
 // gleichmäßig verteilt — nicht gierig (volle Zeile plus einsames Wort).
 import { describe, it, expect } from 'vitest';
 import { wrapLabel, renderTreeHtml } from '../src/render.js';
@@ -7,13 +8,13 @@ import { parse } from '../src/parser.js';
 const t = key => key;
 
 describe('wrapLabel: balanciert statt gierig', () => {
-  it('bis 40 Zeichen bleibt es eine Zeile, unverändert', () => {
-    const s = 'Ein gewöhnlicher Knotentitel (39 Zeich.)';
-    expect(s.length).toBe(40);
+  it('bis 32 Zeichen bleibt es eine Zeile, unverändert', () => {
+    const s = 'Ein gewöhnlicher Knotentitel, 32';
+    expect(s.length).toBe(32);
     expect(wrapLabel(s)).toEqual([s]);
   });
 
-  it('44 Zeichen werden zwei etwa gleiche Zeilen — nicht 40 plus Rest', () => {
+  it('44 Zeichen werden zwei etwa gleiche Zeilen — nicht 32 plus Rest', () => {
     const s = 'Update the agents version of the spec please';
     expect(s.length).toBe(44);
     const lines = wrapLabel(s);
@@ -29,19 +30,19 @@ describe('wrapLabel: balanciert statt gierig', () => {
     expect(wrapLabel(s).join(' ')).toBe(s);
   });
 
-  it('keine Zeile über 40 Zeichen, solange die Wörter es hergeben', () => {
+  it('keine Zeile über 32 Zeichen, solange die Wörter es hergeben', () => {
     const s = 'A dependency needs its target id and nobody remembers a hundred and eighty of them by heart';
-    for(const l of wrapLabel(s)) expect(l.length).toBeLessThanOrEqual(40);
+    for(const l of wrapLabel(s)) expect(l.length).toBeLessThanOrEqual(32);
   });
 
-  it('rund 100 Zeichen ergeben drei gleichmäßige Zeilen', () => {
+  it('rund 100 Zeichen ergeben vier gleichmäßige Zeilen', () => {
     const s = 'The list at the caret offers the document ids filtered by what is typed with the node title as ctx';
     expect(s.length).toBe(98);
     const lines = wrapLabel(s);
-    expect(lines.length).toBe(3);
+    expect(lines.length).toBe(4);
     for(const l of lines){
-      expect(l.length).toBeGreaterThanOrEqual(25);
-      expect(l.length).toBeLessThanOrEqual(40);
+      expect(l.length).toBeGreaterThanOrEqual(17);
+      expect(l.length).toBeLessThanOrEqual(32);
     }
   });