domotion-svg 0.13.2 → 0.13.3

package/dist/animation/animator.js

@@ -444,6 +444,14 @@ function renderTypingOverlay(overlay, frameIdx, frameStart, frameEnd, totalDurat
     const speed = overlay.speed ?? 60;
     const fontSize = overlay.fontSize ?? 14;
     const charWidth = fontSize * 0.6; // monospace cell (overlay font is monospace)
+    // DM-1205: the typewriter reveal hides not-yet-typed text with a width-0 clip
+    // rect. Chrome renders a zero-area clip path as "clip everything" (text
+    // hidden, correct), but WebKit/Safari treats an EMPTY clip as "no clip" and
+    // paints the element in full — so on multi-line overlays every line past the
+    // first showed its whole text immediately (the shared text opacity is already
+    // 1 while the line waits its turn). Hiding with a tiny non-zero width keeps
+    // the clip non-empty so WebKit clips it too; 0.01px reveals no visible pixel.
+    const hiddenW = "0.01px";
     const lineHeight = Math.round(fontSize * 1.35);
     const color = overlay.color ?? "#e6edf3";
     const typeStartMs = frameStart + delay;
@@ -512,7 +520,7 @@ function renderTypingOverlay(overlay, frameIdx, frameStart, frameEnd, totalDurat
         const lineEndPct = pct(lineEndMs, totalDuration);
         lineTimings.push({ li, startMs: lineStartMs, endMs: lineEndMs, len: line.length });
         cumChars += line.length;
-        parts.push(`  <defs><clipPath id="${clipId}"><rect class="${id}-rev${li}" x="${overlay.x}" y="${lineY - fontSize}" width="0" height="${textHeight}" /></clipPath></defs>`);
+        parts.push(`  <defs><clipPath id="${clipId}"><rect class="${id}-rev${li}" x="${overlay.x}" y="${lineY - fontSize}" width="${hiddenW}" height="${textHeight}" /></clipPath></defs>`);
         parts.push(`  <text class="${id}-text" x="${overlay.x}" y="${lineY}" fill="${color}" font-size="${fontSize}" font-family="'SF Mono', Menlo, Monaco, monospace" clip-path="url(#${clipId})">${escapeHtml(line)}</text>`);
         // DM-1204: the reveal clip MUST sweep linearly so its right edge tracks the
         // caret (whose position track is `linear`). Without an explicit timing
@@ -520,8 +528,10 @@ function renderTypingOverlay(overlay, frameIdx, frameStart, frameEnd, totalDurat
         // through the sweep at the time-midpoint while the linear caret is only at
         // 50% — that desync read as the caret lagging ~10–20 chars behind the
         // revealed text mid-type, even though the endpoints (parked state) matched.
+        // DM-1205: the hidden state uses `hiddenW` (a tiny non-zero width), not 0,
+        // so WebKit's empty-clip-path fallback doesn't paint the whole line.
         cssRules.push(`
-    @keyframes ${id}-rev${li} { 0%, ${lineStartPct} { width: 0; } ${lineEndPct} { width: ${lineWidth}px; } ${holdEndPct} { width: ${lineWidth}px; } ${disappearPct}, 100% { width: 0; } }
+    @keyframes ${id}-rev${li} { 0%, ${lineStartPct} { width: ${hiddenW}; } ${lineEndPct} { width: ${lineWidth}px; } ${holdEndPct} { width: ${lineWidth}px; } ${disappearPct}, 100% { width: ${hiddenW}; } }
     .${id}-rev${li} { animation: ${id}-rev${li} ${totalSec.toFixed(2)}s linear infinite; }`);
     });
     // Whole-overlay visibility — shared by every line's <text>.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "domotion-svg",
-  "version": "0.13.2",
+  "version": "0.13.3",
   "description": "DOM-to-animated-SVG renderer. Captures HTML/CSS via Playwright Chromium and converts it to self-contained SVG with CSS animations — pixel-faithful demos that scale crisply and load lazily.",
   "license": "MIT",
   "author": "Brian Westphal",