/textmenge: volle App-Breite, Vorschau ohne Scroll + Vergroessern + Bild-Download

- Wrapper .sk-konf (Breite 1:1 wie Konfigurator/neuer Auftrag).
- Vorschau skaliert (kein Inner-Scroll), Klick oeffnet Lightbox (Vergroessern).
- Buttons 'Vergroessern' und 'Bild herunterladen' (SVG->PNG).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/App.tsx

@@ -7,6 +7,7 @@ import Auftraege from './routes/Auftraege';
 import Stammdaten from './routes/Stammdaten';
 import Configurator from './routes/Configurator';
 import MusterSeite from './routes/Muster';
+import Textmenge from './routes/Textmenge';
 import { loadSession } from './lib/api';
 
 /**
@@ -37,6 +38,8 @@ export default function App() {
             <Route path="/login" element={<Login />} />
             {/* Muster als eigene Seite (kein Popup) – Direktlink /muster. */}
             <Route path="/muster" element={<MusterSeite />} />
+            {/* Textmengen-Tool – öffentlich, Direktlink /textmenge. */}
+            <Route path="/textmenge" element={<Textmenge />} />
             <Route
               path="/auftraege"
               element={<Geschuetzt><Auftraege /></Geschuetzt>}

src/components/PreviewPanel.tsx

@@ -13,6 +13,23 @@ import { useEffect, useMemo, useState } from 'react';
 
 export type PreviewDoc = { art: 'brief' | 'umschlag'; svg: string };
 
+// Vorschau-Optik „Kugelschreiber" – IDENTISCH zu Directus (neuauftrag): blaue
+// Tinte, etwas dicker (1.4) + dezenter Wobble (feTurbulence/Displacement) für die
+// typische Kuli-Linie. non-scaling-stroke bleibt (Glyphen skalieren per transform),
+// weißer Grund. Nur Anzeige/Download – die an die Produktion gehenden SVGs bleiben
+// schwarz. Inline-SVGs brauchen eine EINDEUTIGE Filter-ID pro Dokument.
+let inkSeq = 0;
+const inkify = (svg: string): string => {
+  if (typeof svg !== 'string') return svg;
+  const id = `skink${inkSeq++}`;
+  return svg
+    .replace(/stroke="#0{3,6}"/gi, 'stroke="#1a2a6c" stroke-opacity="0.95"')
+    .replace(/stroke-width="0\.6"/gi, 'stroke-width="1.4"')
+    .replace(/(<svg[^>]*>)/i, `$1<defs><filter id="${id}" x="-4%" y="-4%" width="108%" height="108%" color-interpolation-filters="sRGB"><feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="1" seed="4" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="1.3" xChannelSelector="R" yChannelSelector="G"/></filter></defs>`)
+    .replace(/(<rect[^>]*fill="#FFFFFF"[^>]*\/>)/i, `$1<g filter="url(#${id})">`)
+    .replace(/<\/svg>\s*$/i, '</g></svg>');
+};
+
 /** Ein Empfänger-Dokument: Schriftstück + optional zugehöriger Umschlag. */
 type Gruppe = { brief?: PreviewDoc; umschlag?: PreviewDoc };
 
@@ -81,10 +98,12 @@ export default function PreviewPanel({
     const m = zoomSvg.match(/viewBox="0 0 ([\d.]+) ([\d.]+)"/);
     const w = Math.round(m ? Number(m[1]) : 794);
     const h = Math.round(m ? Number(m[2]) : 1123);
-    const scale = 2; // für ein scharfes Musterbild
-    // Gespeicherte Vorschau in Kugelschreiber-Blau (wie die Anzeige); die
-    // an die Produktion gehenden SVGs bleiben davon unberührt (schwarz).
-    const inkSvg = zoomSvg.replace(/stroke="#0{3,6}"/gi, 'stroke="#1a2a6c"');
+    // Natürliche Größe (nicht 2×): non-scaling-stroke wirkt konstant in
+    // Gerätepixeln – bei 2× würde die Linie relativ dünn. So sieht das PNG aus
+    // wie die Großansicht. Gespeicherte Vorschau in Kuli-Optik (wie Anzeige);
+    // die an die Produktion gehenden SVGs bleiben schwarz.
+    const scale = 1;
+    const inkSvg = inkify(zoomSvg);
     const url = URL.createObjectURL(new Blob([inkSvg], { type: 'image/svg+xml;charset=utf-8' }));
     const img = new Image();
     img.onload = () => {
@@ -142,7 +161,7 @@ export default function PreviewPanel({
     >
       <figcaption className="sk-preview-doc-label">{label}</figcaption>
       {/* Das SVG stammt aus unserer eigenen Generierung, nicht aus Nutzereingaben. */}
-      <div className="sk-preview-doc-sheet" dangerouslySetInnerHTML={{ __html: svg }} />
+      <div className="sk-preview-doc-sheet" dangerouslySetInnerHTML={{ __html: inkify(svg) }} />
     </figure>
   );
 
@@ -199,7 +218,7 @@ export default function PreviewPanel({
           aria-label="Vergrößerte Vorschau">
           <div className="sk-lightbox-sheet" style={{ aspectRatio: seitenverhaeltnis(zoomSvg) }}
             onClick={(e) => e.stopPropagation()}
-            dangerouslySetInnerHTML={{ __html: zoomSvg }} />
+            dangerouslySetInnerHTML={{ __html: inkify(zoomSvg) }} />
           <div className="sk-lightbox-actions">
             <button className="sk-lightbox-close" onClick={(e) => { e.stopPropagation(); bildSpeichern(); }}>
               Bild speichern

src/routes/Textmenge.tsx

@@ -0,0 +1,318 @@
+import { useEffect, useMemo, useState } from 'react';
+import { fetchFormats, fetchSettings, generatePreview } from '../lib/api';
+import type { Format, PublicSettings, PreviewDoc, PreviewOverflow } from '../lib/api';
+
+/** Schriftarten wie im Konfigurator/manuellen Druck. */
+const SCHRIFTEN = [
+  { key: 'tilda', name: 'Tilda' },
+  { key: 'alva', name: 'Alva' },
+  { key: 'ellie', name: 'Ellie' },
+];
+
+/** Kugelschreiber-Optik (identisch zum PreviewPanel): blaue Tinte, dezenter Wobble. */
+let inkSeq = 0;
+const inkify = (svg: string): string => {
+  if (typeof svg !== 'string') return svg;
+  const id = `skink${inkSeq++}`;
+  return svg
+    .replace(/stroke="#0{3,6}"/gi, 'stroke="#1a2a6c" stroke-opacity="0.95"')
+    .replace(/stroke-width="0\.6"/gi, 'stroke-width="1.4"')
+    .replace(/(<svg[^>]*>)/i, `$1<defs><filter id="${id}" x="-4%" y="-4%" width="108%" height="108%" color-interpolation-filters="sRGB"><feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="1" seed="4" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="1.3" xChannelSelector="R" yChannelSelector="G"/></filter></defs>`)
+    .replace(/(<rect[^>]*fill="#FFFFFF"[^>]*\/>)/i, `$1<g filter="url(#${id})">`)
+    .replace(/<\/svg>\s*$/i, '</g></svg>');
+};
+
+/** Musterbild als PNG herunterladen (SVG → Canvas), wie im PreviewPanel. */
+function bildSpeichern(svg: string) {
+  const m = svg.match(/viewBox="0 0 ([\d.]+) ([\d.]+)"/);
+  const w = Math.round(m ? Number(m[1]) : 794);
+  const h = Math.round(m ? Number(m[2]) : 1123);
+  const inkSvg = inkify(svg);
+  const url = URL.createObjectURL(new Blob([inkSvg], { type: 'image/svg+xml;charset=utf-8' }));
+  const img = new Image();
+  img.onload = () => {
+    const canvas = document.createElement('canvas');
+    canvas.width = w;
+    canvas.height = h;
+    const ctx = canvas.getContext('2d');
+    if (ctx) {
+      ctx.fillStyle = '#ffffff';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+      canvas.toBlob((png) => {
+        if (png) {
+          const a = document.createElement('a');
+          a.href = URL.createObjectURL(png);
+          a.download = 'skrift-textmenge.png';
+          a.click();
+          URL.revokeObjectURL(a.href);
+        }
+        URL.revokeObjectURL(url);
+      }, 'image/png');
+    } else {
+      URL.revokeObjectURL(url);
+    }
+  };
+  img.onerror = () => URL.revokeObjectURL(url);
+  img.src = url;
+}
+
+/** Stabile anonyme Kennung fürs Vorschau-Kontingent (wie im Konfigurator). */
+function clientId(): string {
+  const KEY = 'skrift.client';
+  let id = localStorage.getItem(KEY);
+  if (!id) {
+    id = `c-${Math.random().toString(36).slice(2)}-${Date.now().toString(36)}`;
+    localStorage.setItem(KEY, id);
+  }
+  return id;
+}
+
+/** Fehlermeldung bei Zeilen-Überlauf (wie im Konfigurator). */
+function overflowMeldung(overflow?: PreviewOverflow[]) {
+  const schlimmste = (overflow ?? []).reduce<{ lineCount: number; lineLimit: number } | null>(
+    (m, o) => (o.lineCount > (m?.lineCount ?? 0) ? o : m),
+    null,
+  );
+  const detail = schlimmste ? ` (${schlimmste.lineCount} von ${schlimmste.lineLimit} Zeilen)` : '';
+  return `Der Text ist zu lang für das gewählte Format${detail}. Bitte kürze den Text.`;
+}
+
+/**
+ * Textmengen-Tool (/textmenge): Format- und Schriftwahl, Texteingabe (Tabulator,
+ * gesperrte Zeichen) und „Vorschau generieren" → rendert EIN Schriftstück
+ * (Kugelschreiber-Optik). Passt der Text nicht auf eine Seite, kommt die Fehlermeldung.
+ * Bewusst einseitig: kein Seitenumbruch.
+ */
+export default function Textmenge() {
+  const [formate, setFormate] = useState<Format[]>([]);
+  const [settings, setSettings] = useState<PublicSettings | null>(null);
+  const [format, setFormat] = useState('a4');
+  const [font, setFont] = useState('tilda');
+  const [realistic, setRealistic] = useState(true);
+  const [text, setText] = useState('');
+  const [hinweis, setHinweis] = useState('');
+
+  const [doc, setDoc] = useState<PreviewDoc | null>(null);
+  const [laedt, setLaedt] = useState(false);
+  const [fehler, setFehler] = useState<string | null>(null);
+  const [gross, setGross] = useState(false);
+
+  useEffect(() => {
+    fetchFormats()
+      .then((f) => {
+        setFormate(f);
+        setFormat(f.find((x) => x.key === 'a4')?.key ?? f[0]?.key ?? 'a4');
+      })
+      .catch(() => {});
+    fetchSettings().then(setSettings).catch(() => {});
+  }, []);
+
+  // Escape schließt die Großansicht.
+  useEffect(() => {
+    if (!gross) return;
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setGross(false); };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [gross]);
+
+  // Gesperrte Zeichen wie im Konfigurator (Zeilenumbruch/Tab bleiben erlaubt).
+  const verbotenRe = useMemo(() => {
+    const wl = settings?.char_whitelist;
+    if (!wl) return null;
+    try {
+      return new RegExp(`[^${wl}\\n\\r\\t]`, 'g');
+    } catch {
+      return null;
+    }
+  }, [settings?.char_whitelist]);
+
+  const saeubere = (v: string) => {
+    if (!verbotenRe) return v;
+    const treffer = v.match(verbotenRe);
+    if (!treffer?.length) return v;
+    const einmalig = [...new Set(treffer)].map((c) => (c === ' ' ? '␣' : c)).join(' ');
+    setHinweis(`Zeichen ${einmalig} ist nicht erlaubt und wurde entfernt.`);
+    window.setTimeout(() => setHinweis(''), 4000);
+    return v.replace(verbotenRe, '');
+  };
+
+  // Änderung an Eingaben → alte Vorschau verwerfen.
+  useEffect(() => {
+    setDoc(null);
+    setFehler(null);
+    setGross(false);
+  }, [text, font, format, realistic]);
+
+  async function generieren() {
+    if (!text.trim() || laedt) return;
+    setLaedt(true);
+    setFehler(null);
+    try {
+      const ergebnis = await generatePreview({
+        client_id: clientId(),
+        text,
+        font,
+        format,
+        realistic,
+        entries: [{}],
+      });
+      if (ergebnis.has_overflow) {
+        setDoc(null);
+        setFehler(overflowMeldung(ergebnis.overflow));
+      } else {
+        setDoc((ergebnis.docs ?? []).find((d) => d.art === 'brief') ?? ergebnis.docs?.[0] ?? null);
+      }
+    } catch (e) {
+      setDoc(null);
+      setFehler((e as Error)?.message || 'Vorschau fehlgeschlagen.');
+    } finally {
+      setLaedt(false);
+    }
+  }
+
+  return (
+    <div className="sk-konf">
+      <div>
+        <h1 style={{ margin: '0 0 8px', fontSize: 28 }}>Textmenge prüfen</h1>
+        <p style={{ color: 'var(--sk-muted, #666)', margin: 0, lineHeight: 1.6 }}>
+          Text eingeben, Format und Schrift wählen, dann eine Vorschau erzeugen. So siehst du, ob der Text auf ein Schriftstück passt.
+        </p>
+      </div>
+
+      <div className="sk-card">
+        <div className="sk-card-body" style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
+          <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
+            <label className="sk-field" style={{ flex: '1 1 200px' }}>
+              <span className="sk-label">Format</span>
+              <select className="sk-input" value={format} onChange={(e) => setFormat(e.target.value)}>
+                {formate.length === 0 && <option value="a4">A4</option>}
+                {formate.map((f) => (
+                  <option key={f.key} value={f.key}>{f.name}</option>
+                ))}
+              </select>
+            </label>
+            <label className="sk-field" style={{ flex: '1 1 200px' }}>
+              <span className="sk-label">Schriftart</span>
+              <select className="sk-input" value={font} onChange={(e) => setFont(e.target.value)}>
+                {SCHRIFTEN.map((s) => (
+                  <option key={s.key} value={s.key}>{s.name}</option>
+                ))}
+              </select>
+            </label>
+          </div>
+
+          <label style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', fontSize: 15 }}>
+            <input type="checkbox" checked={realistic} onChange={(e) => setRealistic(e.target.checked)} style={{ width: 18, height: 18 }} />
+            Realistische Handschrift (natürliche Variation)
+          </label>
+
+          <label className="sk-field">
+            <span className="sk-label">Text · {text.length} Zeichen</span>
+            <textarea
+              className="sk-input"
+              rows={12}
+              value={text}
+              placeholder="Text eingeben oder einfügen …"
+              style={{ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', resize: 'vertical', lineHeight: 1.6 }}
+              onChange={(e) => setText(saeubere(e.target.value))}
+              onKeyDown={(e) => {
+                if (e.key !== 'Tab' || e.shiftKey || e.ctrlKey || e.altKey || e.metaKey) return;
+                e.preventDefault();
+                const ta = e.currentTarget;
+                const s = ta.selectionStart ?? text.length;
+                const en = ta.selectionEnd ?? s;
+                setText(saeubere(text.slice(0, s) + '\t' + text.slice(en)));
+                requestAnimationFrame(() => {
+                  ta.selectionStart = ta.selectionEnd = s + 1;
+                });
+              }}
+            />
+          </label>
+
+          <button
+            type="button"
+            className="sk-btn sk-btn--primary"
+            disabled={!text.trim() || laedt}
+            onClick={generieren}
+            style={{ alignSelf: 'flex-start', opacity: !text.trim() || laedt ? 0.6 : 1 }}
+          >
+            {laedt ? 'Vorschau wird erzeugt …' : 'Vorschau generieren'}
+          </button>
+
+          <p style={{ color: 'var(--sk-muted, #666)', fontSize: 12, margin: 0, lineHeight: 1.5 }}>
+            Tabulator (↹) rückt Text ein. Gesperrte Zeichen werden automatisch entfernt.
+          </p>
+          {hinweis && <p style={{ color: 'var(--sk-danger, #c62828)', fontSize: 13, margin: 0 }}>{hinweis}</p>}
+        </div>
+      </div>
+
+      {/* Vorschau / Ergebnis */}
+      <div className="sk-card">
+        <div className="sk-card-body">
+          {fehler ? (
+            <div
+              style={{
+                display: 'flex', gap: 10, alignItems: 'flex-start', color: '#c62828',
+                background: 'rgba(198,40,40,.08)', border: '1px solid rgba(198,40,40,.25)',
+                borderRadius: 10, padding: '14px 16px', fontSize: 15,
+              }}
+            >
+              <span style={{ fontSize: 18, lineHeight: 1 }}>⚠</span>
+              <span>{fehler}</span>
+            </div>
+          ) : doc ? (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'center' }}>
+              <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap', width: '100%' }}>
+                <span
+                  style={{
+                    fontSize: 13, fontWeight: 600, padding: '4px 12px', borderRadius: 999,
+                    background: 'rgba(46,125,50,.12)', color: '#2e7d32',
+                  }}
+                >
+                  ✓ Passt auf eine Seite
+                </span>
+                <span style={{ flex: 1 }} />
+                <button type="button" className="sk-btn" onClick={() => setGross(true)}>🔍 Vergrößern</button>
+                <button type="button" className="sk-btn sk-btn--primary" onClick={() => bildSpeichern(doc.svg)}>⬇ Bild herunterladen</button>
+              </div>
+              <div
+                className="sk-preview-doc-sheet"
+                onClick={() => setGross(true)}
+                style={{ width: '100%', maxWidth: 460, cursor: 'zoom-in' }}
+                dangerouslySetInnerHTML={{ __html: inkify(doc.svg) }}
+              />
+            </div>
+          ) : (
+            <p style={{ color: 'var(--sk-muted, #666)', margin: 0, textAlign: 'center', padding: '40px 0' }}>
+              Noch keine Vorschau. Text eingeben und „Vorschau generieren" drücken.
+            </p>
+          )}
+        </div>
+      </div>
+
+      {/* Großansicht (Lightbox) */}
+      {gross && doc && (
+        <div
+          onClick={() => setGross(false)}
+          style={{
+            position: 'fixed', inset: 0, background: 'rgba(0,0,0,.72)', zIndex: 1000,
+            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
+            gap: 16, padding: 24,
+          }}
+        >
+          <div style={{ display: 'flex', gap: 10 }} onClick={(e) => e.stopPropagation()}>
+            <button type="button" className="sk-btn sk-btn--primary" onClick={() => bildSpeichern(doc.svg)}>⬇ Bild herunterladen</button>
+            <button type="button" className="sk-btn" onClick={() => setGross(false)}>Schließen</button>
+          </div>
+          <div
+            className="sk-preview-doc-sheet"
+            onClick={(e) => e.stopPropagation()}
+            style={{ width: 'min(92vw, 62vh)', maxHeight: '86vh', overflow: 'auto' }}
+            dangerouslySetInnerHTML={{ __html: inkify(doc.svg) }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

src/styles/global.css

@@ -460,21 +460,18 @@ button { font-family: inherit; }
   text-transform: uppercase;
   color: var(--sk-muted);
 }
+/* Kugelschreiber-Optik (blau, dickere Striche, Wobble) kommt aus inkify();
+   der Untergrund ist weiß (das SVG bringt seinen weißen Grund selbst mit). */
 .sk-preview-doc-sheet {
   border: 1px solid var(--sk-border);
   border-radius: var(--sk-radius);
-  background: var(--sk-bg-1);
+  background: var(--sk-white);
   padding: var(--sk-space-2);
   overflow: hidden;
 }
 .sk-preview-doc-sheet svg { display: block; width: 100%; height: auto; }
 .sk-preview-doc:hover .sk-preview-doc-sheet { border-color: var(--sk-accent); }
 
-/* Vorschau-Optik „Kugelschreiber": nur die Anzeige färbt die schwarzen Striche
-   in Kuli-Blau. Die SVG-Daten (und damit die Produktion) bleiben schwarz. */
-.sk-preview-doc-sheet svg [stroke],
-.sk-lightbox-sheet svg [stroke] { stroke: #1a2a6c; }
-
 /* ── Blättern: Pfeile als klare Buttons + deutliche Nummer ─ */
 .sk-preview-pager {
   display: flex;