domotion-svg 0.27.2 → 0.28.0

package/dist/cli/animate-orchestrator.js

@@ -1371,9 +1371,10 @@ async function buildCapturedFrame(fc, i, ctx) {
     // can diff it against the next frame's. `null` for scroll-block frames
     // (no single tree) — magic-move then falls back to crossfade.
     let frameTree = null;
-    // DM-1556: a `typeResample` frame nests a per-keystroke animated SVG with its
-    // own internal timeline; set so the animator re-anchors it to this frame's
-    // master-loop offset (same as a `cast` / animated-`template` frame).
+    // Timed nested frames (`typeResample`, `jsReveal`, `states`, and `scroll`)
+    // carry their own animated SVG. Record its period so the animator re-anchors
+    // that document-global timeline to this frame's master-loop offset (the same
+    // contract used by a `cast` / animated-`template` frame).
     let embeddedAnimationPeriodMs;
     // DM-1767 (docs/104): overlays a `states` run's individual states carried,
     // already anchor-resolved per state and re-based onto this frame's timeline.
@@ -1438,9 +1439,8 @@ async function buildCapturedFrame(fc, i, ctx) {
         // page, cull each segment's tree (DM-603), compose into one
         // animated SVG, and use as this frame's svgContent. The composed
         // SVG carries its own internal keyframes loop (animation-duration =
-        // pattern's total scroll time) — caller is expected to size the
-        // frame's `duration` to match so the outer scene cycle aligns with
-        // the inner scroll loop.
+        // pattern's total scroll time). Record that period below so the animator
+        // re-anchors the nested loop to this frame's master-timeline window.
         log(`  scroll pattern: ${fc.scroll.pattern}`);
         const scrollPattern = parseScrollPattern(fc.scroll.pattern);
         const scrollClip = fc.scroll.clip ?? [0, 0, cfg.width, cfg.height];
@@ -1476,6 +1476,10 @@ async function buildCapturedFrame(fc, i, ctx) {
             restoreGeneration(outerGeneration);
         }
         composed = namespaceEmbeddedAnimatedSvg(composed, `sf${i}_`);
+        embeddedAnimationPeriodMs = Math.max(segments[segments.length - 1]?.segmentEndMs ?? 0, 1);
+        if (fc.duration < embeddedAnimationPeriodMs) {
+            log(`  note: frame duration ${fc.duration}ms < scroll play time ${embeddedAnimationPeriodMs}ms — the scroll will be cut off; size duration to ≈ ${embeddedAnimationPeriodMs}ms`);
+        }
         // The composer emits a full `<?xml ...><svg>...</svg>` document. The
         // outer animator wraps `svgContent` in a `<g class="f f-N">`, which
         // happily contains a nested `<svg>` element — strip just the XML

package/dist/render/element-tree-to-svg.d.ts

@@ -7,6 +7,7 @@ import { type SessionGenericFamilyOverrides } from "./font-resolution.js";
 export { parseGradientStops, buildRadialGradientDef, parseBgPositionPx } from "./gradient-defs.js";
 export { buildMaskDef, maskPaintAreas, positionFragmentMaskDef, rewriteFragmentMaskDef } from "./mask.js";
 export { resolveMaskContainCoverRect, resolveMaskPosition, resolveMaskPositionAxis } from "./mask-position.js";
+import { type CornerRadii } from "./borders.js";
 import type { CapturedElement, CapturedTreeInput } from "../capture/types.js";
 export { _dataUriCache, _resizedDataUriCache, embedResizedDataUri, embedRemoteImages, resolveSvgSource, type EmbedRemoteImagesOptions } from "../capture/embed.js";
 export { getLastCaptureWarnings, logCaptureWarnings } from "../capture/warnings.js";
@@ -98,6 +99,20 @@ interface BoxReflectionSpec {
 /** Parse Chromium's computed `-webkit-box-reflect` serialization. */
 export declare function parseBoxReflection(value: string | undefined, width: number, height: number): BoxReflectionSpec | null;
 export declare function boxReflectionTransform(spec: BoxReflectionSpec, x: number, y: number, width: number, height: number): string;
+export interface ChildOverflowClipGeometry {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    corners: CornerRadii;
+}
+/**
+ * Resolve the fixed page-space clip applied to an element's descendants.
+ * Keeping this geometry separate from emission lets compound renderers retain
+ * an ancestor clip after detaching a descendant, without duplicating the CSS
+ * padding-edge, containment, radius, and overflow-clip-margin rules.
+ */
+export declare function childOverflowClipGeometry(el: CapturedElement, corners?: CornerRadii): ChildOverflowClipGeometry | null;
 /**
  * DM-950: render a CapturedElement tree into a **complete `<svg>`
  * document** — the obvious entry point for "I have a tree, give me a

package/dist/render/element-tree-to-svg.js

@@ -4506,6 +4506,63 @@ function openChildOverflowClip(state, el, indent, corners) {
         state.svgParts.push(`${indent}<g clip-path="url(#${id})">`);
     return id;
 }
+/**
+ * Resolve the fixed page-space clip applied to an element's descendants.
+ * Keeping this geometry separate from emission lets compound renderers retain
+ * an ancestor clip after detaching a descendant, without duplicating the CSS
+ * padding-edge, containment, radius, and overflow-clip-margin rules.
+ */
+export function childOverflowClipGeometry(el, corners = parseCornerRadii(el.styles, el.width, el.height)) {
+    const ox = el.styles.overflowX;
+    const oy = el.styles.overflowY;
+    const containVal = el.styles.contain;
+    const containClips = containVal != null && containVal !== "" && containVal !== "none"
+        && /\b(?:paint|strict|content)\b/i.test(containVal);
+    const clipsOverflow = (ox != null && ox !== "visible") || (oy != null && oy !== "visible") || containClips;
+    // Body overflow propagates to the viewport instead of clipping body itself.
+    if (!clipsOverflow || el.tag === "body" || el.children.length === 0)
+        return null;
+    // CSS overflow clips descendants to the padding edge, whose inner corner
+    // radii are the captured outer radii inset by the adjacent border widths.
+    const top = parseFloat(el.styles.borderTopWidth ?? "0") || 0;
+    const right = parseFloat(el.styles.borderRightWidth ?? "0") || 0;
+    const bottom = parseFloat(el.styles.borderBottomWidth ?? "0") || 0;
+    const left = parseFloat(el.styles.borderLeftWidth ?? "0") || 0;
+    let clipCorners = insetCornerRadii(corners, top, right, bottom, left);
+    let x = el.x + left;
+    let y = el.y + top;
+    let width = Math.max(0, el.width - left - right);
+    let height = Math.max(0, el.height - top - bottom);
+    // An active overflow-clip-margin replaces the ordinary padding-box contour.
+    const marginGeometry = resolvedOverflowClipMarginGeometry(el, corners);
+    if (marginGeometry != null) {
+        x = marginGeometry.x;
+        y = marginGeometry.y;
+        width = marginGeometry.width;
+        height = marginGeometry.height;
+        clipCorners = marginGeometry.corners;
+    }
+    if (el.fieldsetLegendNotch != null) {
+        // A rendered legend belongs to the fieldset border, not its scrollport.
+        const protrude = y - el.fieldsetLegendNotch.y;
+        if (protrude > 0) {
+            y -= protrude;
+            height += protrude;
+        }
+    }
+    const unbounded = 100000;
+    // SVG has one clip shape, so model a visible axis by extending it beyond any
+    // plausible paint area while retaining the other axis's authored clip.
+    if (!containClips && ox === "visible" && oy === "clip") {
+        x = el.x - unbounded;
+        width = el.width + unbounded * 2;
+    }
+    if (!containClips && oy === "visible" && ox === "clip") {
+        y = el.y - unbounded;
+        height = el.height + unbounded * 2;
+    }
+    return { x, y, width, height, corners: clipCorners };
+}
 /**
  * Mint (once) the `<clipPath>` that clips `el`'s children to its overflow
  * region, and return its id — or null when the element doesn't clip.
@@ -4521,110 +4578,11 @@ function ensureChildOverflowClipId(state, el, corners) {
     const memoized = overflowClipPathIds.get(el);
     if (memoized != null)
         return memoized;
-    // Overflow clipping: when a parent has overflow != visible (hidden/scroll/
-    // auto/clip on either axis), its children must be clipped to its box.
-    // We wrap just the child recursion in a <g clip-path="..."> so the element's
-    // own bg/border/text render unclipped.
-    //
-    // CSS spec (DM-363): overflow clips to the **padding edge**, not the
-    // border-box edge. If we clip to the border-box, child fills extending to
-    // the bottom of the box paint OVER the bottom border stroke and the
-    // border disappears from the rendered output (e.g. 13-pos-sticky:
-    // Section B's `.filler` rect was hiding the scroller's `border-bottom`).
-    // Inset the clip rect by the per-side border widths so the border stroke
-    // remains visible above the clipped children.
-    const ox = el.styles.overflowX;
-    const oy = el.styles.overflowY;
-    // DM-522: `contain: paint | strict | content` clips descendants to the
-    // principal (padding) box per the CSS Containment spec — same effective
-    // clip as overflow:hidden, so route it through the same machinery. Without
-    // this, a `contain:paint` ancestor lets descendants overflow visually
-    // (regression observable on `13-deep-stacking-context-creators`'s
-    // contain:paint stage: the blue inner z:9999 box paints past the dashed
-    // ancestor instead of being trapped). The `containClips` test deliberately
-    // excludes `contain: layout` / `size` / `inline-size` since those don't
-    // imply paint clipping.
-    const containVal = el.styles.contain;
-    const containClips = containVal != null && containVal !== "" && containVal !== "none"
-        && /\b(?:paint|strict|content)\b/i.test(containVal);
-    const clipsOverflow = (ox != null && ox !== "visible") || (oy != null && oy !== "visible") || containClips;
-    // DM-650: same body-overflow-propagation rule as the earlier clip-path
-    // emission — when body has non-visible overflow it propagates to the
-    // viewport rather than clipping body itself; skip the children-overflow
-    // clip too so descendants positioned outside body's bbox (e.g. NYT
-    // desktop's content wrapper, which extends below body's height: 100vh
-    // box) stay visible after the document scroll moves body off-viewport.
-    const isBodyOverflowPropagatedHere = el.tag === "body";
+    const geometry = childOverflowClipGeometry(el, corners);
     let overflowClipId = null;
-    if (clipsOverflow && !isBodyOverflowPropagatedHere && el.children.length > 0) {
+    if (geometry != null) {
         overflowClipId = paintCtx.nextClipId("ov");
-        const cbt = parseFloat(el.styles.borderTopWidth ?? "0") || 0;
-        const cbr = parseFloat(el.styles.borderRightWidth ?? "0") || 0;
-        const cbb = parseFloat(el.styles.borderBottomWidth ?? "0") || 0;
-        const cbl = parseFloat(el.styles.borderLeftWidth ?? "0") || 0;
-        // DM-698: overflow clips to the inner border-radius (per CSS Backgrounds 3
-        // — the rounded clip on the padding box uses radii inset by each side's
-        // border width, clamped to zero). Previously we passed the OUTER `corners`
-        // which made the clip too generous near each corner, exposing a sliver of
-        // the parent's background between the border and the clipped child.
-        // (e.g. `18-deep-radius-overflow` `.card` border-radius:32 / border:4 +
-        // child `position:absolute inset:0`: 4 px gradient sliver visible inside
-        // each rounded corner.)
-        let overflowCorners = insetCornerRadii(corners, cbt, cbr, cbb, cbl);
-        // Default clip = padding box (border-inset). DM-2419: for an active
-        // overflow-clip-margin, Blink instead starts from a PIXEL-SNAPPED inner
-        // border, applies the physical reference-box/margin outsets, and grows or
-        // contracts every corner with FloatRoundedRect's coverage correction.
-        // Reference-box-only zero values remain active; a negative CSS length is
-        // invalid and never reaches this branch.
-        let ocX = el.x + cbl;
-        let ocY = el.y + cbt;
-        let ocW = Math.max(0, el.width - cbl - cbr);
-        let ocH = Math.max(0, el.height - cbt - cbb);
-        const ocmGeometry = resolvedOverflowClipMarginGeometry(el, corners);
-        if (ocmGeometry != null) {
-            ocX = ocmGeometry.x;
-            ocY = ocmGeometry.y;
-            ocW = ocmGeometry.width;
-            ocH = ocmGeometry.height;
-            overflowCorners = ocmGeometry.corners;
-        }
-        // DM-1264: a <fieldset>'s rendered <legend> is part of the block-start BORDER,
-        // not the scrollport — per Blink `fieldset_layout_algorithm.cc`: "the rendered
-        // legend shouldn't be part of the scrollport; the legend is essentially a part
-        // of the block-start border ... scrollbars are handled by the anonymous child
-        // box." So a `fieldset { overflow: auto }` (resize needs overflow != visible)
-        // must NOT clip the legend, which straddles the border line and protrudes above
-        // the padding box. Raise the clip's top edge to clear the legend (the block-
-        // start border strip holds nothing else that could leak out).
-        if (el.fieldsetLegendNotch != null) {
-            const protrude = ocY - el.fieldsetLegendNotch.y;
-            if (protrude > 0) {
-                ocY -= protrude;
-                ocH += protrude;
-            }
-        }
-        // DM-787: CSS Overflow 3 allows mixing `overflow-x: clip; overflow-y:
-        // visible` (only `clip` permits this — `hidden + visible` coerces to
-        // `auto + hidden`). Chrome clips only the clipped axis; content can
-        // still escape on the visible axis. The SVG clipPath is a single rect,
-        // so to NOT clip on an axis we extend that axis past any plausible
-        // paint area with `±UNBOUNDED`. Such a one-axis combination is also an
-        // explicit negative activation control for overflow-clip-margin.
-        const UNBOUNDED = 100000;
-        // Paint containment supplies its own both-axis overflow clip edge, so an
-        // authored visible axis does not punch through that containment clip.
-        const xVisible = !containClips && ox === "visible" && oy === "clip";
-        const yVisible = !containClips && oy === "visible" && ox === "clip";
-        if (xVisible) {
-            ocX = el.x - UNBOUNDED;
-            ocW = el.width + UNBOUNDED * 2;
-        }
-        if (yVisible) {
-            ocY = el.y - UNBOUNDED;
-            ocH = el.height + UNBOUNDED * 2;
-        }
-        defsParts.push(`<clipPath id="${overflowClipId}">${roundedRectSvg(ocX, ocY, ocW, ocH, overflowCorners, "")}</clipPath>`);
+        defsParts.push(`<clipPath id="${overflowClipId}">${roundedRectSvg(geometry.x, geometry.y, geometry.width, geometry.height, geometry.corners, "")}</clipPath>`);
         // DM-673: stash the clip-path id so hoisted descendants of this
         // overflow scroller can re-wrap their emission in the same clip.
         overflowClipPathIds.set(el, overflowClipId);

package/dist/review/compare-pngs.d.ts

@@ -250,10 +250,11 @@ export declare function passes(cmp: CompareResult): boolean;
  *  3712 px with `regionCount === 0`, including a component larger than the
  *  unchanged 256 px single-region cap. The same Chromium build's pinned Linux
  *  x64 run measures 2065 px total in the two-pane fixture (48 sparse regions,
- *  135 px largest, zero high-severity regions). The 2304 aggregate cap admits
- *  both measured scattered text-edge floors while remaining below the known
- *  structural break; the independent 256 px component cap still rejects that
- *  break by itself.
+ *  135 px largest, zero high-severity regions). GitHub's macOS 26.6.2 runner
+ *  image moved the clean ceiling to 2835 px total / 171 px largest, with five
+ *  edge components crossing the default high-severity classification. The 3072
+ *  aggregate cap admits those measured scattered text-edge floors while the
+ *  independent 256 px component cap still rejects the known structural break.
  *
  *  Unlike the visual gate's per-platform hinting floor ("Per-platform coverage
  *  floor" in docs/12-diff-scoring.md), this bar needs no per-platform relief:
@@ -266,10 +267,12 @@ export interface StrictCaps {
 export declare function strictCapsFor(_platform: NodeJS.Platform | string): StrictCaps;
 /** The host's caps. Never null: the bar is calibrated on every platform. */
 export declare const STRICT_CAPS: StrictCaps;
-/** The no-motion pass criterion: `passes()` PLUS "nothing block-sized moved or
- *  swapped paint order". Lifts the high-severity-fraction gate that keeps
- *  low-severity components out of `regionCount`, then bounds what is left by
- *  area (see `strictCapsFor` for the measured sizing).
+/** The no-motion pass criterion: "nothing block-sized moved or swapped paint
+ *  order". Lifts the high-severity-fraction gate that splits components between
+ *  `regionCount` and `shiftyRegionCount`, then bounds ALL of them by area (see
+ *  `strictCapsFor` for the measured sizing). Requiring `passes()` as well would
+ *  put that raster-sensitive severity split back into the strict gate even
+ *  though the strict aggregates already contain both buckets.
  *
  *  Use this ONLY where both images are known to depict the same content at the
  *  same positions — e.g. the frame-sequence compressor's flipbook-parity

package/dist/review/compare-pngs.js

@@ -570,14 +570,16 @@ export function passes(cmp) {
     return cmp.regionCount === 0;
 }
 export function strictCapsFor(_platform) {
-    return { maxRegionArea: 256, totalRegionArea: 2304 };
+    return { maxRegionArea: 256, totalRegionArea: 3072 };
 }
 /** The host's caps. Never null: the bar is calibrated on every platform. */
 export const STRICT_CAPS = strictCapsFor(process.platform);
-/** The no-motion pass criterion: `passes()` PLUS "nothing block-sized moved or
- *  swapped paint order". Lifts the high-severity-fraction gate that keeps
- *  low-severity components out of `regionCount`, then bounds what is left by
- *  area (see `strictCapsFor` for the measured sizing).
+/** The no-motion pass criterion: "nothing block-sized moved or swapped paint
+ *  order". Lifts the high-severity-fraction gate that splits components between
+ *  `regionCount` and `shiftyRegionCount`, then bounds ALL of them by area (see
+ *  `strictCapsFor` for the measured sizing). Requiring `passes()` as well would
+ *  put that raster-sensitive severity split back into the strict gate even
+ *  though the strict aggregates already contain both buckets.
  *
  *  Use this ONLY where both images are known to depict the same content at the
  *  same positions — e.g. the frame-sequence compressor's flipbook-parity
@@ -591,10 +593,8 @@ export const STRICT_CAPS = strictCapsFor(process.platform);
  *  Pass an explicit set to score a result against different numbers; passing
  *  `null` deliberately degrades the bar to plain `passes()`. */
 export function passesStrict(cmp, caps = STRICT_CAPS) {
-    if (!passes(cmp))
-        return false;
     if (caps == null)
-        return true;
+        return passes(cmp);
     return cmp.strictMaxRegionArea <= caps.maxRegionArea
         && cmp.strictRegionArea <= caps.totalRegionArea;
 }

package/dist/scroll/composer.js

@@ -21,7 +21,8 @@
  * shrinking output size on mostly-static-content pages.
  */
 import { capturedScrollOwnerBindingSha256, validateCapturedFrameScrollState, } from "../capture/frame-scroll-state.js";
-import { elementTreeToSvgInner } from "../render/element-tree-to-svg.js";
+import { childOverflowClipGeometry, elementTreeToSvgInner, } from "../render/element-tree-to-svg.js";
+import { roundedRectSvg } from "../render/borders.js";
 import { rootSvgA11y } from "../render/format.js";
 import { isTransparentBackground } from "../utils/transparent-background.js";
 import { resetGeneration, getEmbeddedFontFaceCss, getGlyphDefs, withRenderTextMode, } from "../render/text-to-path.js";
@@ -29,6 +30,7 @@ import { beginCharacterFallbackDocument, endCharacterFallbackDocument } from "..
 import { hoistDuplicateImagePayloads } from "../post-processing/hoist-image-payloads.js";
 import { extractFixedSubtrees, dedupeFixedAcrossSegments } from "./hoist-fixed.js";
 import { extractStickyWindows } from "./hoist-sticky.js";
+import { mapTreePruning } from "../tree-ops/prune-tree.js";
 /**
  * Map a parsed scroll-action easing (DM-1076) to a CSS `<timing-function>`, or
  * `null` when it's absent or `linear` — the composite's animation-level default
@@ -81,6 +83,63 @@ function scrollOwner(state, ownerId) {
     }
     return undefined;
 }
+function findCapturedScrollOwnerPath(tree, ownerId, ancestors = []) {
+    for (const element of tree) {
+        const path = [...ancestors, element];
+        if (element.scrollbars?.owner?.ownerId === ownerId)
+            return path;
+        const descendant = findCapturedScrollOwnerPath(element.children ?? [], ownerId, path);
+        if (descendant != null)
+            return descendant;
+    }
+    return undefined;
+}
+/**
+ * An element scroll owner moves its own clipped contents, not the page around
+ * it. Keep the first capture's surrounding page as a static underlay and feed
+ * only the authenticated owner subtree through the offset-stacking composer.
+ * The existing stack translation then cancels the owner's per-segment offset,
+ * leaving its border box in place while its captured children move inside it.
+ */
+function isolateElementScrollOwner(segments) {
+    const first = segments[0];
+    if (first?.frameScrollState == null || first.scrollOwnerId == null)
+        return null;
+    const firstOwnerRecord = scrollOwner(first.frameScrollState, first.scrollOwnerId);
+    if (firstOwnerRecord?.kind !== "element")
+        return null;
+    const firstOwnerPath = findCapturedScrollOwnerPath(first.tree, first.scrollOwnerId);
+    const firstOwner = firstOwnerPath?.at(-1);
+    // An explicitly owner-only capture (`--selector` / frame `selector`) keeps
+    // the established list-strip contract; there is no surrounding page to pin.
+    if (firstOwnerPath == null || firstOwner == null || first.tree.includes(firstOwner))
+        return null;
+    const staticUnderlay = mapTreePruning(first.tree, (element) => element.scrollbars?.owner?.ownerId === first.scrollOwnerId);
+    const isolated = segments.map((segment, index) => {
+        if (segment.frameScrollState == null || segment.scrollOwnerId == null) {
+            throw new Error(`composeScrollSvg: inner-scroll segment ${index} omitted its owner authority`);
+        }
+        const ownerRecord = scrollOwner(segment.frameScrollState, segment.scrollOwnerId);
+        const ownerElement = findCapturedScrollOwnerPath(segment.tree, segment.scrollOwnerId)?.at(-1);
+        if (ownerRecord?.kind !== "element" || ownerElement == null) {
+            throw new Error(`composeScrollSvg: inner-scroll segment ${index} changed or omitted its element owner`);
+        }
+        const sessionGenericFamilies = segment.tree.find((root) => root.sessionGenericFamilies != null)
+            ?.sessionGenericFamilies;
+        return {
+            ...segment,
+            tree: [{
+                    ...ownerElement,
+                    ...(sessionGenericFamilies == null ? {} : { sessionGenericFamilies }),
+                }],
+        };
+    });
+    return {
+        segments: isolated,
+        staticUnderlay,
+        ownerClips: firstOwnerPath.map((element) => childOverflowClipGeometry(element)).filter((clip) => clip != null),
+    };
+}
 /**
  * Fail closed before composition when frame/allowlist/offset authority is
  * omitted, stale, or assigned to a sibling Chromium frame.
@@ -244,6 +303,8 @@ export function composeScrollSvg(segments, opts) {
     if (chunkSize < 1 || !Number.isInteger(chunkSize)) {
         throw new Error(`composeScrollSvg: chunkSize must be a positive integer, got ${chunkSize}`);
     }
+    const elementScroll = isolateElementScrollOwner(segments);
+    const composedSegments = elementScroll?.segments ?? segments;
     // DM-652: arm the text-render lifecycle. Default is "embedded-font" —
     // the per-segment text renderer emits `<text>` runs against a single
     // @font-face per used webfont, ~2× faster in WebKit and ~5× smaller
@@ -265,7 +326,11 @@ export function composeScrollSvg(segments, opts) {
     // `elementTreeToSvgInner` scopes nest inside this one as no-ops.
     beginCharacterFallbackDocument();
     try {
-        return withRenderTextMode(renderTextMode, () => composeScrollSvgBody(segments, opts, { axis, W, VH, bg, paintBg, hiDPIFactor, chunkSize }));
+        return withRenderTextMode(renderTextMode, () => composeScrollSvgBody(composedSegments, opts, {
+            axis, W, VH, bg, paintBg, hiDPIFactor, chunkSize,
+            staticUnderlay: elementScroll?.staticUnderlay,
+            elementOwnerClips: elementScroll?.ownerClips,
+        }));
     }
     finally {
         endCharacterFallbackDocument();
@@ -320,13 +385,16 @@ function buildScrollVisibility(segments, segOffsets, totalMs) {
  * reads (axis / viewport / background / hiDPI / chunk size).
  */
 function composeScrollSvgBody(segments, opts, ctx) {
-    const { axis, W, VH, bg, paintBg, hiDPIFactor, chunkSize } = ctx;
+    const { axis, W, VH, bg, paintBg, hiDPIFactor, chunkSize, staticUnderlay, elementOwnerClips, } = ctx;
     // ── Total scene duration ──
     // The last segment's endMs is the cycle length. For a single-segment input,
     // the scene is effectively static — emit a 1 s loop so the SVG renders
     // sensibly without a degenerate 0 s animation.
     const totalMs = Math.max(segments[segments.length - 1].segmentEndMs, 1);
     const totalSec = totalMs / 1000;
+    const paintSegments = segments
+        .map((segment, index) => ({ segment, index }))
+        .filter(({ segment }) => segment.timelineOnly !== true);
     // ── Compute composite dimensions ──
     // The composite spans the full scroll range. For axis=y, that's from min
     // scrollY (typically 0) to max scrollY + viewportH (covers the LAST
@@ -351,7 +419,7 @@ function composeScrollSvgBody(segments, opts, ctx) {
     // viewport-level overlay below.
     const fixedStripped = [];
     const perSegFixed = [];
-    for (const seg of segments) {
+    for (const { segment: seg } of paintSegments) {
         const { stripped, fixed } = extractFixedSubtrees(seg.tree);
         fixedStripped.push(stripped);
         perSegFixed.push(fixed);
@@ -383,10 +451,10 @@ function composeScrollSvgBody(segments, opts, ctx) {
     // ── Render each capture's content at its position offset ──
     const captureGroups = [];
     const segmentCullCss = [];
-    for (let i = 0; i < segments.length; i++) {
-        const seg = segments[i];
-        const offset = segOffsets[i];
-        const inner = elementTreeToSvgInner(strippedTrees[i], W, VH, `seg${i}-`, false, hiDPIFactor, false);
+    for (let paintIndex = 0; paintIndex < paintSegments.length; paintIndex++) {
+        const { segment: seg, index: segmentIndex } = paintSegments[paintIndex];
+        const offset = segOffsets[segmentIndex];
+        const inner = elementTreeToSvgInner(strippedTrees[paintIndex], W, VH, `seg${segmentIndex}-`, false, hiDPIFactor, false);
         const tx = axis === "x" ? offset : 0;
         const ty = axis === "y" ? offset : 0;
         // Visibility window: visible while scroll-y is in the rasterisation
@@ -424,7 +492,7 @@ function composeScrollSvgBody(segments, opts, ctx) {
                 `</g>`);
         }
         else {
-            const cls = `${animClass}-s${i}`;
+            const cls = `${animClass}-s${segmentIndex}`;
             // step-end so the segment snaps in/out at the boundary, no fractional
             // opacity that would force the browser to keep compositing it.
             segmentCullCss.push(buildVisibilityKeyframes(cls, enterPct, leavePct, totalSec));
@@ -436,7 +504,7 @@ function composeScrollSvgBody(segments, opts, ctx) {
         }
     }
     // ── Sticky overlay markup + visibility keyframes (DM-647) ──
-    const { markup: stickyMarkup, cullCss: stickyCullCss } = buildStickyOverlays(stickyOverlays, segments, totalMs, animClass, W, VH, hiDPIFactor);
+    const { markup: stickyMarkup, cullCss: stickyCullCss } = buildStickyOverlays(stickyOverlays, paintSegments.map(({ segment }) => segment), totalMs, animClass, W, VH, hiDPIFactor);
     const fixedMarkup = fixedOverlay.length === 0
         ? ""
         : `\n  <g>` +
@@ -491,6 +559,15 @@ function composeScrollSvgBody(segments, opts, ctx) {
         const slice = captureGroups.slice(i, i + chunkSize);
         chunks.push(`<g style="will-change: transform">\n${slice.join("\n")}\n      </g>`);
     }
+    // Render the pinned page context before taking the generation-global font /
+    // glyph snapshots. Its text can add PUA glyphs to the same subset registries
+    // as the moving owner captures; collecting first would leave those late
+    // glyph references absent from the emitted embedded fonts.
+    const staticMarkup = staticUnderlay == null
+        ? ""
+        : `\n    <g data-scroll-static-context="true"><svg x="0" y="0" width="${W}" height="${VH}" viewBox="0 0 ${W} ${VH}">` +
+            elementTreeToSvgInner(staticUnderlay, W, VH, "static-", false, hiDPIFactor, false) +
+            `</svg></g>`;
     // DM-652: collect every `@font-face` rule the embedded-font path
     // registered during segment + overlay rendering above, into a single
     // top-level <style> block. Each font appears once (registry is keyed
@@ -505,6 +582,9 @@ function composeScrollSvgBody(segments, opts, ctx) {
     // an animate frame (Blink resolves local SVG IRIs through the shared TreeScope,
     // not through the nearest nested <svg> element).
     const glyphDefs = getGlyphDefs();
+    const ownerClipDefs = (elementOwnerClips ?? []).map((clip, index) => `    <clipPath id="${animClass}-owner-clip-${index}">${roundedRectSvg(clip.x, clip.y, clip.width, clip.height, clip.corners, "")}</clipPath>`).join("\n");
+    const ownerClipOpen = (elementOwnerClips ?? []).map((_clip, index) => `    <g clip-path="url(#${animClass}-owner-clip-${index})">`).join("\n");
+    const ownerClipClose = (elementOwnerClips ?? []).map(() => "    </g>").join("\n");
     // ── Compose final SVG ──
     // Share each raster payload across the segments that show it (the `<image>`
     // emit is per-element, and a scroll composite repeats a sticky header /
@@ -514,7 +594,7 @@ function composeScrollSvgBody(segments, opts, ctx) {
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${VH}" width="${W}" height="${VH}"${a11y.roleAttr}>${a11y.markup}
   <defs>
     <clipPath id="${animClass}-clip"><rect width="${W}" height="${VH}"/></clipPath>
-${glyphDefs !== "" ? `    ${glyphDefs}\n` : ""}    <style>
+${ownerClipDefs === "" ? "" : ownerClipDefs + "\n"}${glyphDefs !== "" ? `    ${glyphDefs}\n` : ""}    <style>
 ${fontFaceCss !== "" ? fontFaceCss + "\n" : ""}      .${animClass} { animation: ${animClass} ${totalSec.toFixed(3)}s linear infinite; will-change: transform; }
       @keyframes ${animClass} {
 ${keyframes}
@@ -527,11 +607,14 @@ ${stickyCullCss.join("\n")}
     </style>
   </defs>
 ${paintBg ? `  <rect width="${W}" height="${VH}" fill="${bg}"/>\n` : ""}  <g clip-path="url(#${animClass}-clip)">
+${staticMarkup}
+${ownerClipOpen === "" ? "" : ownerClipOpen + "\n"}
     <g class="${animClass}">
       <svg x="0" y="0" width="${compositeW}" height="${compositeH}" viewBox="0 0 ${compositeW} ${compositeH}">
 ${paintBg ? `        <rect width="${compositeW}" height="${compositeH}" fill="${bg}"/>\n` : ""}      ${chunks.join("\n      ")}
       </svg>
     </g>
+${ownerClipClose === "" ? "" : ownerClipClose + "\n"}
   </g>${overlayMarkup}
 </svg>`);
 }

package/dist/scroll/executor.d.ts

@@ -77,6 +77,12 @@ export interface ScrollSegmentCapture {
     tree: CapturedElement[];
     /** Diff from the previous segment's capture. Null for the very first. */
     diffFromPrev: TreeDiff | null;
+    /**
+     * This capture contributes a same-offset timeline stop but no additional
+     * paint subtree. Used for pauses whose settled DOM is unchanged, so the
+     * composer holds position without duplicating identical scene content.
+     */
+    timelineOnly?: true;
     /** Exact Chromium FrameId/scroll-owner authority sampled with this tree. */
     frameScrollState?: CapturedFrameScrollState;
     /** Scroll owner whose raw offset drives this segment's composition anchor. */
@@ -170,8 +176,8 @@ export declare class ScrollExecutionError extends Error {
  *   3. Walk the pattern AST. For each scroll action: snapshot page state,
  *      resolve destination, scroll there, wait the action's duration plus a
  *      small settle, then capture and diff against previous.
- *   4. Pause actions just wait; they don't add a capture unless the DOM is
- *      observed to have changed (lazy-load fired during the pause).
+ *   4. Pause actions wait, then add either a changed-DOM capture or a
+ *      non-painting same-offset timeline stop when the DOM stayed unchanged.
  *   5. `until` loops re-resolve conditions each iteration. The grammar's
  *      "clamp on overshoot" rule is honored: the last iteration of a
  *      position-bounded loop has its scroll magnitude shrunk so the

package/dist/scroll/executor.js

@@ -177,8 +177,8 @@ export class ScrollExecutionError extends Error {
  *   3. Walk the pattern AST. For each scroll action: snapshot page state,
  *      resolve destination, scroll there, wait the action's duration plus a
  *      small settle, then capture and diff against previous.
- *   4. Pause actions just wait; they don't add a capture unless the DOM is
- *      observed to have changed (lazy-load fired during the pause).
+ *   4. Pause actions wait, then add either a changed-DOM capture or a
+ *      non-painting same-offset timeline stop when the DOM stayed unchanged.
  *   5. `until` loops re-resolve conditions each iteration. The grammar's
  *      "clamp on overshoot" rule is honored: the last iteration of a
  *      position-bounded loop has its scroll magnitude shrunk so the
@@ -267,6 +267,21 @@ export async function executeScrollPattern(page, pattern, opts) {
                 prevTree = nextTree;
                 log(`  captured frame ${captures.length} (DOM changed during pause)`);
             }
+            else {
+                captures.push({
+                    scrollX: nextCapture.scrollX, scrollY: nextCapture.scrollY,
+                    segmentStartMs: sceneTime - op.durationMs,
+                    segmentEndMs: sceneTime,
+                    tree: nextTree,
+                    diffFromPrev: diff,
+                    timelineOnly: true,
+                    frameScrollState: nextCapture.frameScrollState,
+                    captureWarnings: nextCapture.captureWarnings,
+                    scrollOwnerId: nextCapture.scrollOwnerId,
+                    scrollOwnerBindingSha256: capturedScrollOwnerBindingSha256(nextCapture.frameScrollState, nextCapture.scrollOwnerId, nextCapture.scrollX, nextCapture.scrollY),
+                });
+                log(`  recorded hold through ${sceneTime} ms (DOM unchanged during pause)`);
+            }
             return;
         }
         // op.kind === "scroll"

package/package.json

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