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/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>
+  );
+}