@hyperframes/core 0.8.166 → 0.8.168

package/dist/index.d.ts

@@ -1,10 +1,10 @@
 export type { RuntimeTimelineClipIdentity } from "./runtime/types.js";
-export type { ExecutionMode, Orientation, Asset, TimelineElement, TimelineElementBase, TimelineMediaElement, TimelineTextElement, TimelineCompositionElement, TimelineElementType, MediaElementType, CanvasResolution, Fps, FpsInput, FpsParseResult, MediaFile, CompositionAPI, PlayerAPI, AddElementData, ValidationResult, CompositionAsset, Keyframe, KeyframeProperties, ElementKeyframes, StageZoom, StageZoomKeyframe, CompositionVariableType, CompositionVariableBase, StringVariable, NumberVariable, ColorVariable, BooleanVariable, EnumVariable, CompositionVariable, CompositionSpec, WaveformData, OutputResolutionCompatibility, OutputResolutionIssueKind, } from "./core.types.js";
+export type { ExecutionMode, Orientation, Asset, TimelineElement, TimelineElementBase, TimelineMediaElement, TimelineTextElement, TimelineCompositionElement, TimelineElementType, MediaElementType, CanvasResolution, Fps, FpsInput, DistributedFps, FpsParseResult, MediaFile, CompositionAPI, PlayerAPI, AddElementData, ValidationResult, CompositionAsset, Keyframe, KeyframeProperties, ElementKeyframes, StageZoom, StageZoomKeyframe, CompositionVariableType, CompositionVariableBase, StringVariable, NumberVariable, ColorVariable, BooleanVariable, EnumVariable, CompositionVariable, CompositionSpec, WaveformData, OutputResolutionCompatibility, OutputResolutionIssueKind, } from "./core.types.js";
 export type { SlideshowManifest, SlideRef, SlideHotspot, SlideSequence, ResolvedSlide, ResolvedSlideSequence, ResolvedSlideshow, } from "./slideshow/index.js";
 export { parseSlideshowManifest, resolveSlideshow } from "./slideshow/index.js";
 export type { AuthoredTimingValue, RawAuthoredTiming, AuthoredTimingWindow, } from "./runtime/authoredTiming.js";
 export { resolveAuthoredTimingWindow } from "./runtime/authoredTiming.js";
-export { CANVAS_DIMENSIONS, VALID_CANVAS_RESOLUTIONS, normalizeResolutionFlag, isAspectAgnosticResolutionAlias, resolveResolutionFlagPair, checkOutputResolutionCompatibility, suggestMatchingPreset, parseFps, parseFpsWithDefault, toFps, fpsToNumber, fpsToFfmpegArg, TIMELINE_COLORS, DEFAULT_DURATIONS, COMPOSITION_VARIABLE_TYPES, isTextElement, isMediaElement, isCompositionElement, getDefaultStageZoom, } from "./core.types.js";
+export { CANVAS_DIMENSIONS, VALID_CANVAS_RESOLUTIONS, normalizeResolutionFlag, isAspectAgnosticResolutionAlias, resolveResolutionFlagPair, checkOutputResolutionCompatibility, suggestMatchingPreset, parseFps, parseFpsWithDefault, toFps, fpsToNumber, fpsToFfmpegArg, DISTRIBUTED_FPS, isDistributedFps, TIMELINE_COLORS, DEFAULT_DURATIONS, COMPOSITION_VARIABLE_TYPES, isTextElement, isMediaElement, isCompositionElement, getDefaultStageZoom, } from "./core.types.js";
 export { generateBaseHtml, getStageStyles } from "./templates/base.js";
 export { GSAP_CDN, BASE_STYLES, ELEMENT_BASE_STYLES, MEDIA_STYLES, TEXT_STYLES, ZOOM_CONTAINER_STYLES, } from "./templates/constants.js";
 export type { GsapAnimation, GsapMethod, ParsedGsap } from "@hyperframes/parsers";

package/dist/index.js

@@ -1,6 +1,6 @@
 export { parseSlideshowManifest, resolveSlideshow } from "./slideshow/index.js";
 export { resolveAuthoredTimingWindow } from "./runtime/authoredTiming.js";
-export { CANVAS_DIMENSIONS, VALID_CANVAS_RESOLUTIONS, normalizeResolutionFlag, isAspectAgnosticResolutionAlias, resolveResolutionFlagPair, checkOutputResolutionCompatibility, suggestMatchingPreset, parseFps, parseFpsWithDefault, toFps, fpsToNumber, fpsToFfmpegArg, TIMELINE_COLORS, DEFAULT_DURATIONS, COMPOSITION_VARIABLE_TYPES, isTextElement, isMediaElement, isCompositionElement, getDefaultStageZoom, } from "./core.types.js";
+export { CANVAS_DIMENSIONS, VALID_CANVAS_RESOLUTIONS, normalizeResolutionFlag, isAspectAgnosticResolutionAlias, resolveResolutionFlagPair, checkOutputResolutionCompatibility, suggestMatchingPreset, parseFps, parseFpsWithDefault, toFps, fpsToNumber, fpsToFfmpegArg, DISTRIBUTED_FPS, isDistributedFps, TIMELINE_COLORS, DEFAULT_DURATIONS, COMPOSITION_VARIABLE_TYPES, isTextElement, isMediaElement, isCompositionElement, getDefaultStageZoom, } from "./core.types.js";
 // Templates
 export { generateBaseHtml, getStageStyles } from "./templates/base.js";
 export { GSAP_CDN, BASE_STYLES, ELEMENT_BASE_STYLES, MEDIA_STYLES, TEXT_STYLES, ZOOM_CONTAINER_STYLES, } from "./templates/constants.js";

package/dist/runtime/adapters/seek-dispatch.d.ts

@@ -12,7 +12,7 @@ export interface HfSeekEventDetail {
  * its preview-side capture here, so the CLI seek paths that already await this
  * barrier wait for a `self` chain's paint instead of racing it.
  */
-export declare function registerSeekCompletion(promise: Promise<unknown>): void;
+export declare function registerSeekCompletion(promise: Promise<unknown>, kind?: "video-frame"): void;
 export declare function dispatchSeekEvent(time: number): void;
 /**
  * Force-dispatch a `"hf-seek"` event even if `time` equals the last dispatched
@@ -26,6 +26,9 @@ export declare function dispatchSeekEvent(time: number): void;
  */
 export declare function forceDispatchSeekEvent(time: number): void;
 export declare function isSeekCompletionBarrierActive(): boolean;
-export declare function waitForSeekCompletion(): Promise<void>;
+/** `videoFrames: false` skips only the video-frame holds: a geometry read needs every other completion. */
+export declare function waitForSeekCompletion(options?: {
+    videoFrames?: boolean;
+}): Promise<void>;
 /** Reset internal state — used in tests to prevent cross-test contamination. */
 export declare function resetSeekDispatchState(): void;

package/dist/runtime/adapters/seek-dispatch.js

@@ -18,6 +18,7 @@ import { swallow } from "../diagnostics.js";
  */
 let _lastDispatchedTime = -1;
 let _pendingCompletions = new Set();
+let _videoFrameCompletions = new WeakSet();
 let _pendingFailure;
 let _activeCompletionBarriers = 0;
 function dispatch(time) {
@@ -55,11 +56,13 @@ function dispatch(time) {
  * its preview-side capture here, so the CLI seek paths that already await this
  * barrier wait for a `self` chain's paint instead of racing it.
  */
-export function registerSeekCompletion(promise) {
+export function registerSeekCompletion(promise, kind) {
     const completion = promise
         .then(() => ({ status: "fulfilled" }))
         .catch((reason) => ({ status: "rejected", reason }));
     _pendingCompletions.add(completion);
+    if (kind === "video-frame")
+        _videoFrameCompletions.add(completion);
     void completion.then((result) => {
         if (!_pendingCompletions.delete(completion))
             return;
@@ -91,15 +94,17 @@ export function forceDispatchSeekEvent(time) {
 export function isSeekCompletionBarrierActive() {
     return _activeCompletionBarriers > 0;
 }
-export async function waitForSeekCompletion() {
+/** `videoFrames: false` skips only the video-frame holds: a geometry read needs every other completion. */
+export async function waitForSeekCompletion(options) {
+    const awaited = () => [..._pendingCompletions].filter((completion) => options?.videoFrames !== false || !_videoFrameCompletions.has(completion));
     _activeCompletionBarriers += 1;
     let failed = _pendingFailure;
     try {
         // Let concurrently started barriers snapshot the same retained failure
         // before either one consumes it.
         await Promise.resolve();
-        while (_pendingCompletions.size > 0) {
-            const results = await Promise.all([..._pendingCompletions]);
+        for (let pending = awaited(); pending.length > 0; pending = awaited()) {
+            const results = await Promise.all(pending);
             const rejected = results.find((result) => result.status === "rejected");
             if (failed === undefined && rejected?.status === "rejected") {
                 failed = { reason: rejected.reason };
@@ -123,6 +128,7 @@ export async function waitForSeekCompletion() {
 export function resetSeekDispatchState() {
     _lastDispatchedTime = -1;
     _pendingCompletions = new Set();
+    _videoFrameCompletions = new WeakSet();
     _pendingFailure = undefined;
     _activeCompletionBarriers = 0;
 }

package/dist/runtime/media.js

@@ -43,7 +43,7 @@ function holdSeekBarrierUntilVideoLands(el) {
         for (const type of HOLD_END_EVENTS)
             el.addEventListener(type, done, true);
         releaseHeldVideo.set(el, done);
-    }));
+    }), "video-frame");
 }
 /**
  * Resolve a media element's timeline window without conflating a video's

package/dist/runtime/mediaVolumeEnvelope.d.ts

@@ -48,7 +48,14 @@ export interface VolumeProbeOptions {
      * Preview callers omit this option and retain live automation discovery.
      */
     allowLiveTimelineSeek?: boolean;
+    movers?: () => VolumeMovers;
 }
+export interface VolumeMovers {
+    elements: Set<unknown>;
+    anySetter: boolean;
+    unknown: boolean;
+}
+export declare function volumeMoversOf(timeline: RuntimeTimelineRef): VolumeMovers;
 /**
  * Probe a media element and, if volume automation is detected, store a
  * NORMALISED envelope in `cache`. Safe to call with a null timeline — returns

package/dist/runtime/mediaVolumeEnvelope.js

@@ -161,25 +161,31 @@ function hasSetter(target, key) {
     }
     return false;
 }
-/**
- * Whether seeking `timeline` can move `el.volume`: a tween on the element that names `volume`, or a tween
- * on a non-DOM object whose tweened property is a setter (a gain proxy). Spacers, calls and counters skip.
- */
-function timelineCanMoveVolume(timeline, el) {
+export function volumeMoversOf(timeline) {
+    const unknown = { elements: new Set(), anySetter: false, unknown: true };
     if (typeof timeline.getChildren !== "function")
-        return true;
+        return unknown;
     try {
-        return timeline.getChildren(true, true, false).some((tween) => {
+        const movers = { elements: new Set(), anySetter: false, unknown: false };
+        for (const tween of timeline.getChildren(true, true, false)) {
             const targets = tween.targets?.() ?? [];
-            return targets.some((target) => isDomNode(target)
-                ? target === el && namesKey(tween.vars, (key) => key === "volume")
-                : namesKey(tween.vars, (key) => hasSetter(target, key)));
-        });
+            for (const target of targets) {
+                if (isDomNode(target)) {
+                    if (namesKey(tween.vars, (key) => key === "volume"))
+                        movers.elements.add(target);
+                }
+                else if (!movers.anySetter && namesKey(tween.vars, (key) => hasSetter(target, key))) {
+                    movers.anySetter = true;
+                }
+            }
+        }
+        return movers;
     }
     catch {
-        return true;
+        return unknown;
     }
 }
+const canMoveVolume = (movers, el) => movers.unknown || movers.anySetter || movers.elements.has(el);
 /**
  * Probe a media element and, if volume automation is detected, store a
  * NORMALISED envelope in `cache`. Safe to call with a null timeline — returns
@@ -201,7 +207,7 @@ export function probeAndCacheElementVolume(mediaEl, timeline, compositionDuratio
     if (compositionDuration <= 0)
         return;
     // Sampling is ~60 whole-timeline seeks per second of clip, paid again on every rebind.
-    if (!timelineCanMoveVolume(timeline, mediaEl))
+    if (!canMoveVolume(options.movers?.() ?? volumeMoversOf(timeline), mediaEl))
         return;
     const seekFn = (t) => {
         try {

package/dist/runtime/stackingContext.d.ts

@@ -4,4 +4,4 @@ export declare const ROOT_CSS_STACKING_CONTEXT_ID = "css:root";
  * the leaf itself: an element that establishes a context still compares its own
  * z-index with siblings in its parent's context.
  */
-export declare function resolveCssStackingContextId(node: Element): string;
+export declare function resolveCssStackingContextId(node: Element, byParent?: Map<Element | null, string>): string;

package/dist/runtime/stackingContext.js

@@ -94,7 +94,15 @@ function cssStackingContextPath(element) {
  * the leaf itself: an element that establishes a context still compares its own
  * z-index with siblings in its parent's context.
  */
-export function resolveCssStackingContextId(node) {
+export function resolveCssStackingContextId(node, byParent) {
+    const known = byParent?.get(node.parentElement);
+    if (known !== undefined)
+        return known;
+    const id = nearestCssStackingContextId(node);
+    byParent?.set(node.parentElement, id);
+    return id;
+}
+function nearestCssStackingContextId(node) {
     const win = node.ownerDocument.defaultView;
     if (!win)
         return ROOT_CSS_STACKING_CONTEXT_ID;

package/dist/runtime/timeline.js

@@ -207,6 +207,7 @@ function buildTimelineClipLabel(node, kind, ordinal) {
     return `${humanizeTimelineToken(kind)} ${ordinal + 1}`;
 }
 export function collectRuntimeTimelinePayload(params) {
+    const stackingByParent = new Map();
     const runtimeWindow = window;
     const timelineRegistry = runtimeWindow.__timelines ?? {};
     const startResolver = createRuntimeStartTimeResolver({
@@ -409,7 +410,7 @@ export function collectRuntimeTimelinePayload(params) {
             duration,
             track: parseAuthoredTrack(node, i),
             zIndex: readInlineZIndex(node),
-            stackingContextId: resolveCssStackingContextId(node),
+            stackingContextId: resolveCssStackingContextId(node, stackingByParent),
             kind,
             tagName: tag,
             compositionId: node.getAttribute("data-composition-id"),
@@ -524,7 +525,7 @@ export function collectRuntimeTimelinePayload(params) {
                         duration: clampedDuration,
                         track: parseAuthoredTrack(el, gsapTrack),
                         zIndex: readInlineZIndex(el),
-                        stackingContextId: resolveCssStackingContextId(el),
+                        stackingContextId: resolveCssStackingContextId(el, stackingByParent),
                         kind: "element",
                         tagName: el.tagName.toLowerCase(),
                         compositionId: el.getAttribute("data-composition-id"),
@@ -586,7 +587,7 @@ export function collectRuntimeTimelinePayload(params) {
                 duration: clampedDuration,
                 track: parseAuthoredTrack(el, overlayTrack),
                 zIndex: readInlineZIndex(el),
-                stackingContextId: resolveCssStackingContextId(el),
+                stackingContextId: resolveCssStackingContextId(el, stackingByParent),
                 kind: "element",
                 tagName: tag,
                 compositionId: el.getAttribute("data-composition-id"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/core",
-  "version": "0.8.166",
+  "version": "0.8.168",
   "description": "",
   "repository": {
     "type": "git",
@@ -377,9 +377,9 @@
     "linkedom": "^0.18.12",
     "postcss": "^8.5.8",
     "wawoff2": "^2.0.1",
-    "@hyperframes/lint": "0.8.166",
-    "@hyperframes/parsers": "0.8.166",
-    "@hyperframes/studio-server": "0.8.166"
+    "@hyperframes/lint": "0.8.168",
+    "@hyperframes/parsers": "0.8.168",
+    "@hyperframes/studio-server": "0.8.168"
   },
   "devDependencies": {
     "@fontsource/archivo-black": "^5.2.8",