domotion-svg 0.4.1 → 0.5.0

package/README.md

@@ -59,7 +59,7 @@ For a multi-frame animated SVG, write a small JSON config and run `domotion anim
 domotion animate ./demo.json
 ```
 
-The config describes each frame (input URL or HTML file, duration, transition, optional pre-capture actions like `click` / `fill` / `scroll` / `hover`). See `domotion --help` for the full grammar and the [Quick start](https://brianwestphal.github.io/domotion/start/quickstart/) for a walkthrough.
+The config describes each frame (input, duration, transition) plus a declarative surface for interaction demos: continuous-session frames that carry client-side state across steps (omit `input` / set `"continue": true`), DOM-mutation and interaction actions, richer readiness waits (`waitForText` / `waitForGone` / `waitForCount`), typing / tap / svg / blink overlays that can anchor to an element's box, an on-screen `cursor` (explicit or `"auto"`), `vars` + `${}` interpolation, and a small `evaluate` escape hatch. See `domotion --help` for the full grammar and the [Quick start](https://brianwestphal.github.io/domotion/start/quickstart/) for a walkthrough.
 
 ### Scripting API
 

package/dist/animation/animator.d.ts

@@ -56,8 +56,30 @@ export interface TypingOverlay {
     speed?: number;
     /** Background color to mask placeholder text */
     bgColor?: string;
+    /**
+     * Field width in px. When set, the typed text WRAPS to this width like a
+     * browser textarea — breaking on spaces (char-breaking over-long words),
+     * advancing one line-height per wrapped line — instead of running off the
+     * right edge on a single line (DM-840). Omit for unbounded single-line text.
+     */
     bgWidth?: number;
+    /**
+     * Field height in px (used to size the placeholder mask). The mask grows
+     * beyond this if the wrapped text needs more lines, so the typed text always
+     * sits on a clean background.
+     */
     bgHeight?: number;
+    /**
+     * DM-870: render a blinking insertion caret. The bar sweeps the type
+     * position while typing, then parks at the end of the text and blinks
+     * (opacity 1↔0) until the frame ends. `true` uses defaults (the typing
+     * `color`, 2px wide, ~530ms cadence); an object overrides them.
+     */
+    caret?: boolean | {
+        color?: string;
+        width?: number;
+        blinkMs?: number;
+    };
 }
 export interface TapOverlay {
     kind: "tap";
@@ -111,7 +133,29 @@ export interface SvgOverlay {
         delay?: number;
     };
 }
-export type AnimationOverlay = TypingOverlay | TapOverlay | SvgOverlay;
+/**
+ * DM-871: a standalone blinking bar/box, for carets/dots not tied to a typing
+ * overlay — a recording dot, an attention pulse on a focused field, a cursor.
+ * Renders a rect that toggles opacity on a `periodMs` cycle for the frame's
+ * hold (sugar over a rect + a repeating opacity animation).
+ */
+export interface BlinkOverlay {
+    kind: "blink";
+    /** Top-left corner in the captured frame's coordinate space. */
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    /** Full on/off cycle in ms (default 1000). */
+    periodMs?: number;
+    /** Fill color (default a light gray). */
+    color?: string;
+    /** Corner radius — set to half the width/height for a dot. */
+    radius?: number;
+    /** Ms after the frame becomes visible before blinking starts. Default 0. */
+    delay?: number;
+}
+export type AnimationOverlay = TypingOverlay | TapOverlay | SvgOverlay | BlinkOverlay;
 /**
  * Animate a CSS property on captured elements that match a selector, while
  * the frame is held on screen. The selector is resolved against the source
@@ -143,6 +187,17 @@ export interface IntraFrameAnimation {
     easing?: string;
     /** Ms after the frame becomes visible before animation starts. Default 0. */
     delay?: number;
+    /**
+     * DM-869: repeat count. A positive integer or `"infinite"`. When set, the
+     * animation loops on its own `duration` clock (CSS `animation-iteration-count`)
+     * rather than playing once — turning a property animation into a blink / pulse
+     * / breathe. The loop is only visible while the frame is on screen (the frame
+     * group's visibility gating). `"infinite"` is the robust choice for a looping
+     * scene; a finite count aligns to the frame's first appearance.
+     */
+    repeat?: number | "infinite";
+    /** DM-869: when true, the loop ping-pongs `from`→`to`→`from` (CSS `animation-direction: alternate`). */
+    alternate?: boolean;
 }
 export interface AnimationConfig {
     width: number;

package/dist/animation/animator.js

@@ -4,7 +4,6 @@
  * Takes captured SVG frame content and composes them into a single
  * animated SVG with CSS keyframe transitions.
  */
-import { mergeFrames } from "../tree-ops/frame-merge.js";
 import { cursorOverlayMarkup, resolveCursorScript } from "./cursor-overlay.js";
 export function generateAnimatedSvg(config) {
     const { width, height, frames } = config;
@@ -25,19 +24,20 @@ export function generateAnimatedSvg(config) {
             t += f.duration + td;
         }
     }
-    // Fast path: if every transition is crossfade (or default) or `cut`, merge
-    // all frames into a single de-duplicated tree with per-element visibility
-    // timelines. `cut` is just `crossfade` with duration 0 — same merge logic
-    // applies; it ends up as step-end keyframes flipping at exact frame
-    // boundaries.
-    const allMergeable = frames.every((f) => {
-        const type = f.transition?.type;
-        return type == null || type === "crossfade" || type === "cut";
-    });
-    const anyOverlays = frames.some((f) => f.overlays != null && f.overlays.length > 0);
-    if (allMergeable && frames.length > 1 && !anyOverlays) {
-        return composeMergedSvg(config, frameTiming, totalSec);
-    }
+    // Every sequence composites: each frame is emitted as a complete, internally
+    // z-ordered `<g class="f f-N">` sub-SVG and switched/faded by opacity.
+    //
+    // There used to be an element-merge fast path (`mergeFrames`) for cut-only
+    // sequences that flattened all frames into one de-duplicated tree to save
+    // bytes. DM-854 took crossfade off it (it dropped per-frame z-order and
+    // step-end-switched instead of fading); DM-865 then showed it also mis-renders
+    // *near-identical* frames — the same DOM evolved across frames, as produced by
+    // continuous-session capture — because differing text in a shared element slot
+    // can't be gated per frame (a bare text node carries no class, and a `<tspan>`
+    // with `visibility:hidden` still advances layout, shifting the surviving
+    // glyph). Compositing has neither problem. The dedup size win can be recovered
+    // later as `<defs>`/symbol-level glyph sharing across intact frame groups,
+    // which preserves each frame's layout (tracked with DM-854/DM-865).
     const frameGroups = [];
     const keyframes = [];
     let timeOffset = 0;
@@ -74,15 +74,15 @@ export function generateAnimatedSvg(config) {
             keyframes.push(`
     @keyframes fp-${i} {
       0%, ${Math.max(0, parseFloat(enterStartPct) - 0.1).toFixed(2)}% { transform: translateX(${entersViaPush ? width : 0}px); }
-      ${startPct}% { transform: translateX(0); }
-      ${holdEndPct}% { transform: translateX(0); }
-      ${transEndPct}% { transform: translateX(-${width}px); }
+      ${startPct} { transform: translateX(0); }
+      ${holdEndPct} { transform: translateX(0); }
+      ${transEndPct} { transform: translateX(-${width}px); }
       ${Math.min(100, parseFloat(transEndPct) + 0.1).toFixed(2)}%, 100% { transform: translateX(-${width}px); }
     }
     @keyframes fv-${i} {
       0%, ${Math.max(0, parseFloat(enterStartPct) - 0.1).toFixed(2)}% { opacity: 0; }
-      ${enterStartPct}% { opacity: 1; }
-      ${transEndPct}% { opacity: 1; }
+      ${enterStartPct} { opacity: 1; }
+      ${transEndPct} { opacity: 1; }
       ${Math.min(100, parseFloat(transEndPct) + 0.1).toFixed(2)}%, 100% { opacity: 0; }
     }${buildDisplayKeyframes(`fd-${i}`, visStart, visEnd)}
     .f-${i} { animation: fv-${i} ${totalSec.toFixed(2)}s infinite, fd-${i} ${totalSec.toFixed(2)}s infinite step-end; }
@@ -103,15 +103,15 @@ export function generateAnimatedSvg(config) {
             keyframes.push(`
     @keyframes fp-${i} {
       0%, ${Math.max(0, parseFloat(enterStartPct) - 0.1).toFixed(2)}% { transform: translateY(${entersViaScroll ? height : 0}px); }
-      ${startPct}% { transform: translateY(0); }
-      ${holdEndPct}% { transform: translateY(0); }
-      ${transEndPct}% { transform: translateY(-${height}px); }
+      ${startPct} { transform: translateY(0); }
+      ${holdEndPct} { transform: translateY(0); }
+      ${transEndPct} { transform: translateY(-${height}px); }
       ${Math.min(100, parseFloat(transEndPct) + 0.1).toFixed(2)}%, 100% { transform: translateY(-${height}px); }
     }
     @keyframes fv-${i} {
       0%, ${Math.max(0, parseFloat(enterStartPct) - 0.1).toFixed(2)}% { opacity: 0; }
-      ${enterStartPct}% { opacity: 1; }
-      ${transEndPct}% { opacity: 1; }
+      ${enterStartPct} { opacity: 1; }
+      ${transEndPct} { opacity: 1; }
       ${Math.min(100, parseFloat(transEndPct) + 0.1).toFixed(2)}%, 100% { opacity: 0; }
     }${buildDisplayKeyframes(`fd-${i}`, visStart, visEnd)}
     .f-${i} { animation: fv-${i} ${totalSec.toFixed(2)}s infinite, fd-${i} ${totalSec.toFixed(2)}s infinite step-end; }
@@ -191,6 +191,11 @@ export function generateAnimatedSvg(config) {
                     frameGroups.push(svgMarkup);
                     keyframes.push(css);
                 }
+                else if (overlay.kind === "blink") {
+                    const { svgMarkup, css } = renderBlinkOverlay(overlay, i, timeOffset, timeOffset + frame.duration, totalDuration, totalSec);
+                    frameGroups.push(svgMarkup);
+                    keyframes.push(css);
+                }
             }
         }
         timeOffset += frame.duration + transDur;
@@ -245,46 +250,167 @@ function transitionDuration(f) {
         return 0;
     return f.transition.duration;
 }
+/**
+ * Wrap `text` into lines no wider than `maxChars` monospace cells, the way a
+ * browser textarea does: break on spaces, char-break a word longer than the
+ * field, and honor explicit newlines. `maxChars === Infinity` → no wrap (one
+ * line per explicit-newline paragraph), preserving the pre-DM-840 behavior for
+ * overlays with no `bgWidth`. DM-840.
+ */
+function wrapTypingText(text, maxChars) {
+    const lines = [];
+    for (const paragraph of text.split("\n")) {
+        if (maxChars === Infinity) {
+            lines.push(paragraph);
+            continue;
+        }
+        if (paragraph === "") {
+            lines.push("");
+            continue;
+        }
+        let cur = "";
+        for (let word of paragraph.split(" ")) {
+            // A single word wider than the line char-breaks across lines.
+            while (word.length > maxChars) {
+                if (cur !== "") {
+                    lines.push(cur);
+                    cur = "";
+                }
+                lines.push(word.slice(0, maxChars));
+                word = word.slice(maxChars);
+            }
+            if (cur === "")
+                cur = word;
+            else if ((cur + " " + word).length <= maxChars)
+                cur += " " + word;
+            else {
+                lines.push(cur);
+                cur = word;
+            }
+        }
+        lines.push(cur);
+    }
+    return lines;
+}
 function renderTypingOverlay(overlay, frameIdx, frameStart, frameEnd, totalDuration, totalSec) {
     const delay = overlay.delay ?? 300;
     const speed = overlay.speed ?? 60;
     const fontSize = overlay.fontSize ?? 14;
-    const charWidth = fontSize * 0.6;
+    const charWidth = fontSize * 0.6; // monospace cell (overlay font is monospace)
+    const lineHeight = Math.round(fontSize * 1.35);
     const color = overlay.color ?? "#e6edf3";
     const typeStartMs = frameStart + delay;
+    const id = `t${frameIdx}`;
+    // DM-840: wrap to bgWidth so typed text behaves like a browser field
+    // (textarea) — wrapping to the next line instead of running off the right
+    // edge. Text starts at overlay.x and the bg rect starts at overlay.x-2 with
+    // width bgWidth, so the usable text width is bgWidth-4. With no bgWidth we
+    // keep the original single-line behavior (maxChars = Infinity).
+    const maxLineWidth = overlay.bgWidth != null ? overlay.bgWidth - 4 : Infinity;
+    const maxChars = maxLineWidth === Infinity ? Infinity : Math.max(1, Math.floor(maxLineWidth / charWidth));
+    const lines = wrapTypingText(overlay.text, maxChars);
+    const visibleChars = Math.max(1, lines.reduce((n, l) => n + l.length, 0));
+    const longestLineChars = lines.reduce((m, l) => Math.max(m, l.length), 0);
     const parts = [];
     const cssRules = [];
-    const id = `t${frameIdx}`;
-    // Background mask
+    // ── Timeline — all stops clamped to the frame so the overlay can't leak
+    // across the cut into the next frame. `naturalEnd` is when typing finishes
+    // at the requested speed; if that runs past the frame we compress the reveal
+    // to fit. The fully-typed text then HOLDS until just before the frame ends
+    // (the old hard 3 s cap cut long text off mid-type), then fades out.
+    const disappearGap = 150;
+    const naturalEndMs = typeStartMs + visibleChars * speed;
+    const textEndMs = Math.min(naturalEndMs, Math.max(typeStartMs + 1, frameEnd - disappearGap));
+    const effTypeDur = Math.max(1, textEndMs - typeStartMs);
+    const holdEndMs = Math.max(textEndMs, frameEnd - disappearGap);
+    const disappearMs = Math.min(frameEnd, holdEndMs + 100);
+    const textHeight = fontSize + 4;
+    const holdEndPct = pct(holdEndMs, totalDuration);
+    const disappearPct = pct(disappearMs, totalDuration);
+    // Background mask — grown to cover every wrapped line so the typed text
+    // always lands on a clean field instead of the captured placeholder.
     if (overlay.bgColor != null) {
-        const bgW = overlay.bgWidth ?? overlay.text.length * charWidth + 8;
-        const bgH = overlay.bgHeight ?? fontSize + 6;
+        const bgW = overlay.bgWidth ?? longestLineChars * charWidth + 8;
+        const bgH = Math.max(overlay.bgHeight ?? fontSize + 6, lines.length * lineHeight + 6);
         const bgStartPct = pct(typeStartMs, totalDuration);
-        const bgEndPct = pct(frameStart + overlay.text.length * speed + delay + 500, totalDuration);
         parts.push(`  <rect class="${id}-bg" x="${overlay.x - 2}" y="${overlay.y - fontSize + 2}" width="${bgW}" height="${bgH}" fill="${overlay.bgColor}" rx="2" />`);
         cssRules.push(`
-    @keyframes ${id}-bg { 0%, ${bgStartPct} { opacity: 0; } ${pct(typeStartMs + 50, totalDuration)} { opacity: 1; } ${bgEndPct}, 100% { opacity: 0; } }
+    @keyframes ${id}-bg { 0%, ${bgStartPct} { opacity: 0; } ${pct(typeStartMs + 50, totalDuration)} { opacity: 1; } ${holdEndPct} { opacity: 1; } ${disappearPct}, 100% { opacity: 0; } }
     .${id}-bg { animation: ${id}-bg ${totalSec.toFixed(2)}s infinite; }`);
     }
-    // Render full text with an animated clip that reveals characters one-by-one.
-    // The overlay must disappear by the time the frame ends — otherwise it'll
-    // leak across the cut boundary and overlap the next frame's content.
-    const textEndMs = typeStartMs + overlay.text.length * speed;
-    const holdEndMs = Math.min(frameStart + 3000, frameEnd);
-    const fullTextWidth = overlay.text.length * charWidth + 4;
-    const textHeight = fontSize + 4;
-    const clipId = `${id}-clip`;
-    // Clip rect animation: width grows from 0 to full text width
-    parts.push(`  <defs><clipPath id="${clipId}"><rect class="${id}-reveal" x="${overlay.x}" y="${overlay.y - fontSize}" width="0" height="${textHeight}" /></clipPath></defs>`);
-    parts.push(`  <text class="${id}-text" x="${overlay.x}" y="${overlay.y}" fill="${color}" font-size="${fontSize}" font-family="'SF Mono', Menlo, Monaco, monospace" clip-path="url(#${clipId})">${escapeXml(overlay.text)}</text>`);
+    // Typewriter reveal: one <text> per wrapped line, each unveiled by a
+    // width-growing clip during the slice of the type timeline when that line's
+    // characters are typed (line N starts after line N-1 finishes), so the caret
+    // advances down the field exactly as it would in the browser.
+    // DM-870: per-line type timing, collected for the optional caret below.
+    const lineTimings = [];
+    let cumChars = 0;
+    lines.forEach((line, li) => {
+        const lineY = overlay.y + li * lineHeight;
+        // +1 cell of slack so the last glyph never clips: the real monospace
+        // advance is slightly wider than the 0.6em estimate, and the trailing cell
+        // is where the caret would sit just after the typed character anyway.
+        const lineWidth = line.length * charWidth + charWidth;
+        const clipId = `${id}-clip${li}`;
+        const lineStartMs = typeStartMs + (cumChars / visibleChars) * effTypeDur;
+        const lineEndMs = typeStartMs + ((cumChars + line.length) / visibleChars) * effTypeDur;
+        const lineStartPct = pct(lineStartMs, totalDuration);
+        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(`  <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})">${escapeXml(line)}</text>`);
+        cssRules.push(`
+    @keyframes ${id}-rev${li} { 0%, ${lineStartPct} { width: 0; } ${lineEndPct} { width: ${lineWidth}px; } ${holdEndPct} { width: ${lineWidth}px; } ${disappearPct}, 100% { width: 0; } }
+    .${id}-rev${li} { animation: ${id}-rev${li} ${totalSec.toFixed(2)}s infinite; }`);
+    });
+    // Whole-overlay visibility — shared by every line's <text>.
     const typeStartPct = pct(typeStartMs, totalDuration);
-    const typeEndPct = pct(textEndMs, totalDuration);
-    const holdEndPct = pct(holdEndMs, totalDuration);
     cssRules.push(`
-    @keyframes ${id}-reveal { 0%, ${typeStartPct} { width: 0; } ${typeEndPct} { width: ${fullTextWidth}px; } ${holdEndPct} { width: ${fullTextWidth}px; } ${pct(holdEndMs + 100, totalDuration)}, 100% { width: 0; } }
-    .${id}-reveal { animation: ${id}-reveal ${totalSec.toFixed(2)}s infinite; }
-    @keyframes ${id}-vis { 0%, ${typeStartPct} { opacity: 0; } ${pct(typeStartMs + 30, totalDuration)} { opacity: 1; } ${holdEndPct} { opacity: 1; } ${pct(holdEndMs + 100, totalDuration)}, 100% { opacity: 0; } }
+    @keyframes ${id}-vis { 0%, ${typeStartPct} { opacity: 0; } ${pct(typeStartMs + 30, totalDuration)} { opacity: 1; } ${holdEndPct} { opacity: 1; } ${disappearPct}, 100% { opacity: 0; } }
     .${id}-text { animation: ${id}-vis ${totalSec.toFixed(2)}s infinite; }`);
+    // DM-870: blinking insertion caret. Sweeps the type position while typing
+    // (one linear translate segment per wrapped line, jumping to the next line's
+    // start), then parks at the end of the last line and blinks (step-end opacity
+    // toggle) until the overlay disappears. Two animations on one rect: a linear
+    // position track + a step-end opacity blink.
+    if (overlay.caret != null && overlay.caret !== false && lineTimings.length > 0) {
+        const caretOpts = typeof overlay.caret === "object" ? overlay.caret : {};
+        const caretColor = caretOpts.color ?? color;
+        const caretW = caretOpts.width ?? 2;
+        const blinkMs = caretOpts.blinkMs ?? 530;
+        const last = lineTimings[lineTimings.length - 1];
+        const endX = last.len * charWidth;
+        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.
+        const posStops = [`0%, ${typeStartPct} { transform: translate(0px, 0px); }`];
+        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); }`);
+        }
+        posStops.push(`${holdEndPct}, 100% { transform: translate(${endX}px, ${endY}px); }`);
+        // Blink: invisible until typing starts, solid through typing, then toggle
+        // on/off every half-period until the overlay disappears.
+        const blinkStops = [
+            `0%, ${typeStartPct} { opacity: 0; }`,
+            `${pct(typeStartMs + 30, totalDuration)} { opacity: 1; }`,
+            `${pct(textEndMs, totalDuration)} { opacity: 1; }`,
+        ];
+        let t = textEndMs + blinkMs / 2;
+        let on = false;
+        while (t < holdEndMs) {
+            blinkStops.push(`${pct(t, totalDuration)} { opacity: ${on ? 1 : 0}; }`);
+            t += blinkMs / 2;
+            on = !on;
+        }
+        blinkStops.push(`${disappearPct}, 100% { opacity: 0; }`);
+        parts.push(`  <rect class="${id}-caret" x="${overlay.x}" y="${overlay.y - fontSize + 2}" width="${caretW}" height="${fontSize}" fill="${caretColor}" />`);
+        cssRules.push(`
+    @keyframes ${id}-caret-pos { ${posStops.join(" ")} }
+    @keyframes ${id}-caret-blink { ${blinkStops.join(" ")} }
+    .${id}-caret { animation: ${id}-caret-pos ${totalSec.toFixed(2)}s linear infinite, ${id}-caret-blink ${totalSec.toFixed(2)}s step-end infinite; }`);
+    }
     return { svgMarkup: parts.join("\n"), css: cssRules.join("") };
 }
 function renderTapOverlay(overlay, frameIdx, frameStart, totalDuration, totalSec) {
@@ -306,6 +432,29 @@ function renderTapOverlay(overlay, frameIdx, frameStart, totalDuration, totalSec
     .${id}-dot { animation: ${id}-dot ${totalSec.toFixed(2)}s infinite; }`;
     return { svgMarkup, css };
 }
+function renderBlinkOverlay(overlay, frameIdx, frameStart, frameEnd, totalDuration, totalSec) {
+    const id = `blink${frameIdx}`;
+    const period = overlay.periodMs ?? 1000;
+    const color = overlay.color ?? "#e6edf3";
+    const startMs = frameStart + (overlay.delay ?? 0);
+    const radiusAttr = overlay.radius != null ? ` rx="${overlay.radius}" ry="${overlay.radius}"` : "";
+    // Toggle opacity on/off every half-period across the frame's hold, then off.
+    // step-end keeps each state until the next stop (a hard blink, not a fade).
+    const stops = [`0%, ${pct(startMs, totalDuration)} { opacity: 0; }`];
+    let t = startMs;
+    let on = true;
+    while (t < frameEnd) {
+        stops.push(`${pct(t, totalDuration)} { opacity: ${on ? 1 : 0}; }`);
+        t += period / 2;
+        on = !on;
+    }
+    stops.push(`${pct(frameEnd, totalDuration)}, 100% { opacity: 0; }`);
+    const svgMarkup = `  <rect class="${id}" x="${overlay.x}" y="${overlay.y}" width="${overlay.width}" height="${overlay.height}"${radiusAttr} fill="${color}" />`;
+    const css = `
+    @keyframes ${id} { ${stops.join(" ")} }
+    .${id} { animation: ${id} ${totalSec.toFixed(2)}s step-end infinite; }`;
+    return { svgMarkup, css };
+}
 function pct(ms, total) {
     return `${((ms / total) * 100).toFixed(2)}%`;
 }
@@ -409,50 +558,6 @@ function offsetForDirection(dir, w, h, _outFrom) {
         return `translate(-${w}px, 0)`;
     return `translate(${w}px, 0)`; // right
 }
-/**
- * Compose the animated SVG using the frame-merge pipeline. Every element in
- * every frame is reduced to one render with a visibility timeline. Stable
- * elements (prompt, background, typed characters that stay on screen) emit
- * once with opacity: 1 throughout; changing elements get step-end keyframes
- * that flip their opacity at the appropriate frame boundaries.
- */
-function composeMergedSvg(config, frameTiming, totalSec) {
-    const { width, height, frames } = config;
-    const framesSvg = frames.map((f) => f.svgContent);
-    const { css, merged } = mergeFrames(framesSvg, frameTiming, "t");
-    const sharedDefsMarkup = config.sharedDefs ?? "";
-    const animationCss = buildIntraFrameAnimationCss(frames, frameTiming, totalSec);
-    // DM-603: viewBox-cull keyframes from each frame's pre-pass (see unmerged path).
-    const cullCss = frames.map((f) => f.cullCss ?? "").filter((s) => s !== "").join("\n");
-    // Cursor overlay (DM-277). Same emission as the unmerged path — the
-    // overlay sits above the merged frame group, clipped to the viewport.
-    const totalDuration = totalSec * 1000;
-    let overlayMarkup = "";
-    if (config.cursorOverlay != null && config.cursorOverlay.events.length > 0) {
-        const frameStarts = [];
-        let acc = 0;
-        for (const f of frames) {
-            frameStarts.push(acc);
-            acc += f.duration + transitionDuration(f);
-        }
-        const resolved = resolveCursorScript(config.cursorOverlay, totalDuration, frameStarts, config.resolveSelector ?? null);
-        overlayMarkup = "\n" + cursorOverlayMarkup(resolved.positions, resolved.clicks, resolved.style, totalDuration);
-    }
-    return `<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">
-  <defs>
-    <clipPath id="viewport-clip"><rect width="${width}" height="${height}" /></clipPath>${sharedDefsMarkup}
-  </defs>
-  <style>
-${config.fontFaceCss != null && config.fontFaceCss !== "" ? config.fontFaceCss + "\n" : ""}    :root { --scene-dur: ${totalSec.toFixed(2)}s; }
-${css}${animationCss}${cullCss === "" ? "" : "\n" + cullCss}
-  </style>
-  <g clip-path="url(#viewport-clip)">
-  <rect width="${width}" height="${height}" fill="#0d1117" />
-${merged}${overlayMarkup}
-  </g>
-</svg>`;
-}
 /**
  * Compile each frame's intra-frame animations into CSS. Each animation gets
  * a uniquely-named keyframe block whose timing is mapped onto the global
@@ -486,15 +591,33 @@ function buildIntraFrameAnimationCss(frames, frameTiming, totalSec) {
                 return `${a.property}: ${val};`;
             };
             const animName = `f${i}-${a.animId}-${ai}`;
-            // Hold `from` until startPct, animate from→to during [startPct, endPct],
-            // hold `to` afterwards. Pre-frame holds use 0% as the from anchor.
-            out.push(`    @keyframes ${animName} {
+            if (a.repeat != null) {
+                // DM-869: repeating animation (blink / pulse / breathe). The keyframe is
+                // a single from→to cycle on the animation's own `duration` clock, looped
+                // via animation-iteration-count + (optional) direction:alternate. The
+                // loop is only visible while the frame is on screen (the frame group's
+                // visibility gating); `animation-delay` aligns the first cycle to the
+                // frame's appearance. `fill-mode: both` holds `from` before the delay.
+                const iterations = a.repeat === "infinite" ? "infinite" : String(a.repeat);
+                const direction = a.alternate === true ? " alternate" : "";
+                out.push(`    @keyframes ${animName} {
+      0% { ${propValue(a.from)} }
+      100% { ${propValue(a.to)} }
+    }
+    .anim-${a.animId} { animation: ${animName} ${a.duration}ms ${iterations}${direction}; animation-timing-function: ${easing}; animation-delay: ${startMs.toFixed(0)}ms; animation-fill-mode: both; }`);
+            }
+            else {
+                // One-shot: hold `from` until startPct, animate from→to during
+                // [startPct, endPct], hold `to` afterwards, mapped onto the global scene
+                // clock so it replays in sync each scene loop.
+                out.push(`    @keyframes ${animName} {
       0% { ${propValue(a.from)} }
       ${startPct.toFixed(3)}% { ${propValue(a.from)} }
       ${endPct.toFixed(3)}% { ${propValue(a.to)} }
       100% { ${propValue(a.to)} }
     }
     .anim-${a.animId} { animation: ${animName} ${totalSec.toFixed(2)}s infinite; animation-timing-function: ${easing}; }`);
+            }
         }
     }
     return out.length === 0 ? "" : "\n" + out.join("\n");