From 246359f545455d781c28599f6a3df8821eddacea Mon Sep 17 00:00:00 2001
From: Lucas Orth <privat@lucas-orth.de>
Date: Mon, 24 Aug 2026 13:39:18 +0200
Subject: [PATCH] Vorschau-Kuli: Strichstaerke 1.4 + dezenter Wobble-Filter
 (feTurbulence/Displacement) fuer echte Kugelschreiber-Optik; im <img>-Kontext
 getestet (kein Blank)

---
 .../dist/index.js                             | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/extensions/directus-extension-skrift-neuauftrag/dist/index.js b/extensions/directus-extension-skrift-neuauftrag/dist/index.js
index 664a154..489b2ec 100644
--- a/extensions/directus-extension-skrift-neuauftrag/dist/index.js
+++ b/extensions/directus-extension-skrift-neuauftrag/dist/index.js
@@ -324,17 +324,22 @@ const NeuAuftrag = defineComponent({
     const sel = (val, opts, on, extra) => h('select', { style: WSELECT + 'width:100%;' + (extra || ''), value: val, onChange: on },
       opts.map((o) => h('option', { value: o.v, selected: String(val) === String(o.v) }, o.t)));
     const svgUri = (svg) => { try { return 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg))); } catch { return null; } };
-    // Vorschau-Optik „Kugelschreiber" (nur Anzeige/Download): blaue Tinte mit
-    // leichter Deckkraft, etwas dickere Striche. WICHTIG: vector-effect=
-    // "non-scaling-stroke" MUSS bleiben – die Glyphen-Pfade haben eigene
-    // transform-Skalierungen; ohne non-scaling wird die Strichbreite winzig
-    // (Text verschwindet). Papier bleibt weiß. Produktion bleibt schwarz.
+    // Vorschau-Optik „Kugelschreiber" (nur Anzeige/Download): blaue Tinte, etwas
+    // dickere Striche (1.4) und ein dezenter „Wobble" (feTurbulence + Displacement)
+    // für die typische, leicht unruhige Kuli-Linie. Im Browser (auch als <img>)
+    // getestet. WICHTIG: vector-effect="non-scaling-stroke" MUSS bleiben – die
+    // Glyphen-Pfade haben eigene transform-Skalierungen; ohne non-scaling wird die
+    // Strichbreite winzig (Text verschwindet). Weißer Grund. Produktion bleibt schwarz.
     const BALLPOINT = '#1a2a6c';
-    const inkify = (svg) => (typeof svg === 'string'
-      ? svg
+    const inkify = (svg) => {
+      if (typeof svg !== 'string') return svg;
+      return svg
         .replace(/stroke="#0{3,6}"/gi, `stroke="${BALLPOINT}" stroke-opacity="0.95"`)
-        .replace(/stroke-width="0\.6"/gi, 'stroke-width="1.7"')
-      : svg);
+        .replace(/stroke-width="0\.6"/gi, 'stroke-width="1.4"')
+        .replace(/(<svg[^>]*>)/i, '$1<defs><filter id="skink" 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(#skink)">')
+        .replace(/<\/svg>\s*$/i, '</g></svg>');
+    };
     // Vorschau als PNG speichern (wie in der App); Fallback: SVG.
     function bildSpeichern(d) {
       const svg = d && typeof d.svg === 'string' ? inkify(d.svg) : null;