domotion-svg 0.13.1 → 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>.
@@ -544,10 +554,26 @@ function renderTypingOverlay(overlay, frameIdx, frameStart, frameEnd, totalDurat
         const endY = last.li * lineHeight;
         // Position track: hold at line 0 start until typing begins, then sweep each
         // line, then hold at the text end through the blink + disappear.
+        //
+        // DM-1204 (multi-line): a line ends and the next begins at the same instant
+        // (type timing is contiguous — line N+1 starts the ms line N finishes). The
+        // end-of-line stop (x = line width, row N) and the next line's left-margin
+        // stop (x = 0, row N+1) would therefore round to the SAME keyframe percent;
+        // CSS keeps the later declaration, dropping the end-of-line x so the caret
+        // stays pinned at x=0 and merely slides down each row. We keep percentages
+        // strictly increasing (nudging the carriage-return stop a hair past the
+        // line-end stop) so both survive — the jump back to the margin then happens
+        // over ~0.01% of the timeline, i.e. visually instant.
         const posStops = [`0%, ${typeStartPct} { transform: translate(0px, 0px); }`];
+        let lastPctNum = pctNum(typeStartMs, totalDuration);
+        const pushPosStop = (pn, x, y) => {
+            const p = Math.max(pn, lastPctNum + 0.01);
+            posStops.push(`${p.toFixed(2)}% { transform: translate(${x}px, ${y}px); }`);
+            lastPctNum = p;
+        };
         for (const lt of lineTimings) {
-            posStops.push(`${pct(lt.startMs, totalDuration)} { transform: translate(0px, ${lt.li * lineHeight}px); }`);
-            posStops.push(`${pct(lt.endMs, totalDuration)} { transform: translate(${lt.len * charWidth}px, ${lt.li * lineHeight}px); }`);
+            pushPosStop(pctNum(lt.startMs, totalDuration), 0, lt.li * lineHeight);
+            pushPosStop(pctNum(lt.endMs, totalDuration), lt.len * charWidth, lt.li * lineHeight);
         }
         posStops.push(`${holdEndPct}, 100% { transform: translate(${endX}px, ${endY}px); }`);
         // Blink: invisible until typing starts, solid through typing, then toggle
@@ -618,6 +644,9 @@ function renderBlinkOverlay(overlay, frameIdx, frameStart, frameEnd, totalDurati
 function pct(ms, total) {
     return `${((ms / total) * 100).toFixed(2)}%`;
 }
+function pctNum(ms, total) {
+    return (ms / total) * 100;
+}
 /**
  * DM-599: build a step-end keyframes block that toggles `display` between
  * `none` and `inline` around a visible window. Used in parallel with the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "domotion-svg",
-  "version": "0.13.1",
+  "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",