Neu: /textmenge – Textmengen-Tool (Vorschau)

Oeffentliche Seite /textmenge: Format-/Schriftwahl, Texteingabe (Tab, gesperrte Zeichen,
[[seitenumbruch]]) und 'Vorschau generieren' -> rendert das Schriftstueck (Kugelschreiber-
Optik, bestehendes PreviewPanel); passt der Text nicht, kommt die Ueberlauf-Fehlermeldung.

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,194 @@
+import { useEffect, useMemo, useState } from 'react';
+import { fetchFormats, fetchSettings, generatePreview } from '../lib/api';
+import type { Format, PublicSettings, PreviewDoc, PreviewOverflow } from '../lib/api';
+import PreviewPanel from '../components/PreviewPanel';
+
+/** Schriftarten wie im Konfigurator/manuellen Druck. */
+const SCHRIFTEN = [
+  { key: 'tilda', name: 'Tilda' },
+  { key: 'alva', name: 'Alva' },
+  { key: 'ellie', name: 'Ellie' },
+];
+
+/** 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 mit denselben
+ * Möglichkeiten wie sonst (Tabulator, gesperrte Zeichen, [[seitenumbruch]]). Über
+ * „Vorschau generieren" wird das Schriftstück gerendert (Kugelschreiber-Optik) –
+ * so sieht man, ob der Text passt, sonst kommt eine Fehlermeldung.
+ */
+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 [text, setText] = useState('');
+  const [hinweis, setHinweis] = useState('');
+
+  const [docs, setDocs] = useState<PreviewDoc[]>([]);
+  const [laedt, setLaedt] = useState(false);
+  const [fehler, setFehler] = useState<string | null>(null);
+  const [verbleibend, setVerbleibend] = useState(0);
+  const [maximal, setMaximal] = useState(0);
+
+  useEffect(() => {
+    fetchFormats()
+      .then((f) => {
+        setFormate(f);
+        setFormat(f.find((x) => x.key === 'a4')?.key ?? f[0]?.key ?? 'a4');
+      })
+      .catch(() => {});
+    fetchSettings().then(setSettings).catch(() => {});
+  }, []);
+
+  // 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, '');
+  };
+
+  // Neuer Text/Format/Schrift → alte Vorschau verwerfen (nicht live neu laden).
+  useEffect(() => {
+    setDocs([]);
+    setFehler(null);
+  }, [text, font, format]);
+
+  async function generieren() {
+    if (!text.trim()) return;
+    setLaedt(true);
+    setFehler(null);
+    try {
+      const ergebnis = await generatePreview({
+        client_id: clientId(),
+        text,
+        font,
+        format,
+        entries: [{}],
+      });
+      setVerbleibend(ergebnis.remaining ?? 0);
+      setMaximal(ergebnis.limit ?? 0);
+      if (ergebnis.has_overflow) {
+        setDocs([]);
+        setFehler(overflowMeldung(ergebnis.overflow));
+      } else {
+        setDocs(ergebnis.docs ?? []);
+      }
+    } catch (e) {
+      setDocs([]);
+      setFehler((e as Error)?.message || 'Vorschau fehlgeschlagen.');
+    } finally {
+      setLaedt(false);
+    }
+  }
+
+  return (
+    <div className="sk-page" style={{ maxWidth: 980, margin: '0 auto' }}>
+      <h1 style={{ margin: '0 0 6px' }}>Textmenge prüfen</h1>
+      <p style={{ color: 'var(--sk-muted, #666)', margin: '0 0 20px' }}>
+        Text eingeben, Format und Schrift wählen und eine Vorschau erzeugen – so siehst du, ob der Text auf ein Schriftstück passt.
+      </p>
+
+      <div className="sk-card">
+        <div className="sk-card-body" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+          <div style={{ display: 'flex', gap: 12, 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 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' }}
+              onChange={(e) => setText(saeubere(e.target.value))}
+              onKeyDown={(e) => {
+                // Tab fügt einen echten Tabulator ein (z. B. Datum an den rechten Rand).
+                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>
+          <p style={{ color: 'var(--sk-muted, #666)', fontSize: 12, margin: 0, lineHeight: 1.5 }}>
+            Tabulator (↹) rückt Text ein · <code>[[seitenumbruch]]</code> erzwingt eine neue Seite · gesperrte Zeichen werden entfernt.
+          </p>
+          {hinweis && <p style={{ color: 'var(--sk-danger, #c62828)', fontSize: 13, margin: 0 }}>{hinweis}</p>}
+        </div>
+      </div>
+
+      <div style={{ marginTop: 16 }}>
+        <PreviewPanel
+          titel="Vorschau"
+          format={format}
+          docs={docs}
+          gesamtDokumente={docs.length}
+          verbleibend={verbleibend}
+          maximal={maximal}
+          laedt={laedt}
+          fehler={fehler}
+          onGenerate={generieren}
+          bereit={!!text.trim()}
+        />
+      </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;