domotion-svg 0.13.1 → 0.13.2

package/dist/animation/animator.js

@@ -544,10 +544,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 +634,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.2",
   "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",