@mevdragon/vidfarm-devcli 0.20.5 → 0.20.8

package/dist/src/composition-runtime.js

@@ -1,1053 +0,0 @@
-// Runtime script injected into composition iframes so the studio editor can
-// see a `__player` adapter and drive playback. The script lives in src/ so the
-// API lambda can inject it into both draft and fork composition HTML before
-// serving it to the editor iframe.
-//
-// IMPORTANT: this body is executed inside the iframe, NOT in the Node API
-// runtime. Keep it browser-only (no node imports, no top-level await).
-export const COMPOSITION_RUNTIME_SCRIPT_BODY = `
-(() => {
-  const root = document.querySelector("[data-composition-id]");
-  let declaredDuration = Number(root?.getAttribute("data-duration") || 0);
-  let duration = declaredDuration;
-  let time = 0;
-  let playing = false;
-  let playbackRate = 1;
-  let previewMuted = false;
-  let raf = 0;
-  let last = 0;
-  const backingVideo = document.querySelector("[data-vf-playback-source]");
-  const initialMuted = new WeakMap();
-  if (backingVideo instanceof HTMLMediaElement) {
-    initialMuted.set(backingVideo, backingVideo.muted || backingVideo.hasAttribute("muted"));
-  }
-  let clips = [];
-  let activeVideoProxyKey = null;
-  let activeVideoProxyNode = null;
-  let hasVideoProxies = false;
-  const activeMedia = new WeakSet();
-  const mediaStateKeys = new WeakMap();
-  const visibilityStates = new WeakMap();
-
-  function clampTime(nextTime) {
-    const safe = Number(nextTime);
-    if (!Number.isFinite(safe)) return 0;
-    return Math.max(0, Math.min(duration, safe));
-  }
-
-  function readNumberAttr(node, names, fallback = 0) {
-    for (const name of names) {
-      const raw = node.getAttribute(name);
-      if (raw !== null) {
-        const value = Number(raw);
-        return Number.isFinite(value) ? value : fallback;
-      }
-    }
-    return fallback;
-  }
-
-  function readTiming(clip) {
-    const start = readNumberAttr(clip, ["data-start"], 0);
-    const clipDuration = readNumberAttr(clip, ["data-duration"], 0);
-    const mediaStart = readNumberAttr(clip, ["data-playback-start", "data-media-start"], 0);
-    return { start, duration: clipDuration, end: start + clipDuration, mediaStart };
-  }
-
-  function refreshClips() {
-    // The parent editor can live-patch the composition DOM. Re-read the root's
-    // declared duration so a patched data-duration followed by refreshClips()
-    // never leaves the player clamped to a stale duration.
-    declaredDuration = Number(root?.getAttribute("data-duration") || 0);
-    duration = declaredDuration;
-    clips = Array.from(document.querySelectorAll("[data-start]")).filter((node) => node !== root);
-    for (const clip of clips) {
-      if (clip instanceof HTMLMediaElement && !initialMuted.has(clip)) {
-        initialMuted.set(clip, clip.muted || clip.hasAttribute("muted"));
-      }
-      if (clip instanceof HTMLMediaElement) {
-        clip.preload = "auto";
-        if (clip.readyState === 0) {
-          try { clip.load(); } catch {}
-        }
-      }
-    }
-    if (backingVideo instanceof HTMLMediaElement) {
-      backingVideo.preload = "auto";
-      if (backingVideo.readyState === 0) {
-        try { backingVideo.load(); } catch {}
-      }
-    }
-    activeVideoProxyKey = null;
-    activeVideoProxyNode = null;
-    hasVideoProxies = clips.some((clip) => clip instanceof Element && clip.getAttribute("data-vf-timeline-proxy") === "video");
-    discoverGeneralCssAnimations();
-    apply(time, { forceSeek: true });
-  }
-
-  function applyMediaState(clip) {
-    const volume = Number(clip.getAttribute("data-volume") || 1);
-    const nextMuted = previewMuted || initialMuted.get(clip) === true;
-    const stateKey = playbackRate + "|" + volume + "|" + nextMuted;
-    if (mediaStateKeys.get(clip) === stateKey) return;
-    mediaStateKeys.set(clip, stateKey);
-    if (Number.isFinite(volume)) clip.volume = Math.max(0, Math.min(1, volume));
-    clip.muted = nextMuted;
-    try { clip.playbackRate = playbackRate; } catch {}
-    try { clip.defaultPlaybackRate = playbackRate; } catch {}
-    try {
-      if ("preservesPitch" in clip) clip.preservesPitch = true;
-      if ("mozPreservesPitch" in clip) clip.mozPreservesPitch = true;
-      if ("webkitPreservesPitch" in clip) clip.webkitPreservesPitch = true;
-    } catch {}
-  }
-
-  function setVisibility(node, active) {
-    const next = active ? "visible" : "hidden";
-    if (visibilityStates.get(node) === next) return;
-    visibilityStates.set(node, next);
-    node.style.visibility = next;
-  }
-
-  function setPlaybackRate(nextRate) {
-    const next = Number(nextRate);
-    playbackRate = Number.isFinite(next) && next > 0 ? Math.max(0.05, Math.min(8, next)) : 1;
-    for (const clip of clips) {
-      if (clip instanceof HTMLMediaElement) applyMediaState(clip);
-    }
-    if (backingVideo instanceof HTMLMediaElement) applyMediaState(backingVideo);
-  }
-
-  function setMuted(nextMuted) {
-    previewMuted = Boolean(nextMuted);
-    for (const clip of clips) {
-      if (clip instanceof HTMLMediaElement) applyMediaState(clip);
-    }
-    if (backingVideo instanceof HTMLMediaElement) applyMediaState(backingVideo);
-  }
-
-  function clipKey(clip) {
-    return clip.getAttribute("data-hf-id") || clip.id || clip.getAttribute("data-label") || "";
-  }
-
-  function ensurePlaying(media) {
-    if (!playing) {
-      if (!media.paused) media.pause();
-      activeMedia.delete(media);
-      return;
-    }
-    if (!activeMedia.has(media) || media.paused) {
-      activeMedia.add(media);
-      void media.play().catch(() => {});
-    }
-  }
-
-  function pauseInactiveMedia(media) {
-    activeMedia.delete(media);
-    if (!media.paused) media.pause();
-  }
-
-  function seekMedia(media, target, forceSeek, driftLimit) {
-    if (!Number.isFinite(target)) return;
-    if (forceSeek || Math.abs(media.currentTime - target) > driftLimit) {
-      try { media.currentTime = Math.max(0, target); } catch {}
-    }
-  }
-
-  // Runtime-adapter bridge — mirrors the official @hyperframes/producer
-  // deterministic adapters so compositions driven by a registered GSAP
-  // timeline (window.__timelines), Anime.js (window.__hfAnime), Lottie
-  // (window.__hfLottie), or Three.js/TypeGPU (window.__hfThreeTime/
-  // __hfTypegpuTime + the hf-seek CustomEvent) scrub with the player instead
-  // of running on the wall clock. Everything is duck-typed and try/caught so
-  // a broken composition script never kills the apply loop.
-  function compositionTimeline() {
-    let registry = null;
-    try { registry = window.__timelines; } catch { return null; }
-    if (!registry || typeof registry !== "object") return null;
-    const compId = root?.getAttribute("data-composition-id") || "";
-    let timeline = compId ? registry[compId] : null;
-    if (!timeline) {
-      const keys = Object.keys(registry);
-      if (keys.length === 1) timeline = registry[keys[0]];
-    }
-    if (!timeline || typeof timeline.pause !== "function") return null;
-    if (typeof timeline.totalTime !== "function" && typeof timeline.seek !== "function") return null;
-    return timeline;
-  }
-
-  function timelineDuration(timeline) {
-    try {
-      const value = typeof timeline.duration === "function" ? Number(timeline.duration()) : Number(timeline.duration);
-      if (Number.isFinite(value) && value > 0) return value;
-    } catch {}
-    return 0;
-  }
-
-  function syncTimeline() {
-    const timeline = compositionTimeline();
-    if (!timeline) return;
-    try {
-      timeline.pause();
-      // Official gsap adapter seek: nudge to time+1ms with suppressed events,
-      // then land exactly, so gsap re-renders even when the target equals the
-      // timeline's current time.
-      if (typeof timeline.totalTime === "function") {
-        timeline.totalTime(time + 0.001, true);
-        timeline.totalTime(time, false);
-      } else {
-        timeline.seek(time, false);
-      }
-    } catch {}
-  }
-
-  function syncAnimeInstances() {
-    let instances = null;
-    try { instances = window.__hfAnime; } catch { return; }
-    if (!Array.isArray(instances) || instances.length === 0) return;
-    const ms = Math.max(0, time) * 1000;
-    for (const instance of instances) {
-      try {
-        if (instance && typeof instance.seek === "function") instance.seek(ms);
-      } catch {}
-    }
-  }
-
-  function syncLottiePlayers() {
-    let players = null;
-    try { players = window.__hfLottie; } catch { return; }
-    if (!Array.isArray(players) || players.length === 0) return;
-    const safe = Math.max(0, time);
-    for (const player of players) {
-      try {
-        if (!player || typeof player !== "object") continue;
-        if (typeof player.goToAndStop === "function") {
-          player.goToAndStop(safe * 1000, false);
-        } else if (typeof player.pause === "function" && ("totalFrames" in player || "duration" in player)) {
-          if (typeof player.setCurrentRawFrameValue === "function") {
-            const totalFrames = player.totalFrames ?? 0;
-            const frameRate = player.frameRate ?? 30;
-            if (totalFrames > 0) player.setCurrentRawFrameValue(Math.min(safe * frameRate, totalFrames - 1));
-          } else if (typeof player.seek === "function") {
-            player.seek(Math.min(100, (safe / (player.duration ?? 1)) * 100));
-          }
-        }
-      } catch {}
-    }
-  }
-
-  let lastDispatchedSeekTime = -1;
-  function syncSeekGlobals() {
-    const safe = Math.max(0, time);
-    try { window.__hfThreeTime = safe; } catch {}
-    try { window.__hfTypegpuTime = safe; } catch {}
-    // The official three/typegpu adapters dedupe the hf-seek dispatch on the
-    // last dispatched time.
-    if (safe === lastDispatchedSeekTime) return;
-    lastDispatchedSeekTime = safe;
-    try { window.dispatchEvent(new CustomEvent("hf-seek", { detail: { time: safe } })); } catch {}
-  }
-
-  function syncRuntimeAdapters() {
-    syncTimeline();
-    syncAnimeInstances();
-    syncLottiePlayers();
-    syncSeekGlobals();
-  }
-
-  // data-duration on the root is authoritative when present. Arbitrary
-  // compositions may omit it, so infer the duration from clip extents,
-  // preferring a registered GSAP timeline that reports a longer duration.
-  // Recomputed on every apply so a timeline registered after load still
-  // corrects the duration (and seek clamping) lazily.
-  function ensureDuration() {
-    if (declaredDuration > 0) {
-      duration = declaredDuration;
-      return;
-    }
-    let inferred = 0;
-    for (const clip of clips) {
-      const timing = readTiming(clip);
-      if (timing.end > inferred) inferred = timing.end;
-    }
-    const timeline = compositionTimeline();
-    if (timeline) {
-      const reported = timelineDuration(timeline);
-      if (reported > inferred) inferred = reported;
-    }
-    duration = inferred;
-  }
-
-  // Ken Burns image clips carry a CSS transform animation (vf-kb-* keyframes)
-  // directly on the [data-kenburns] <img>. CSS animations run on the wall clock,
-  // not player time, so the runtime scrubs them: pause + set currentTime from
-  // normalized clip progress. Normalizing against data-duration (instead of
-  // trusting the inline --vf-kb-dur) keeps the preview correct even while a
-  // timeline resize has not yet re-synced the inline duration.
-  function syncKenBurnsClip(clip, timing) {
-    if (typeof clip.getAnimations !== "function") return;
-    const progress = timing.duration > 0
-      ? Math.max(0, Math.min(1, (time - timing.start) / timing.duration))
-      : 0;
-    let anims = [];
-    try { anims = clip.getAnimations({ subtree: true }); } catch { return; }
-    for (const anim of anims) {
-      if (typeof anim.animationName !== "string" || anim.animationName.indexOf("vf-kb-") !== 0) continue;
-      let total = 0;
-      try { total = Number(anim.effect?.getComputedTiming?.().duration) || 0; } catch {}
-      if (!total) continue;
-      try {
-        anim.pause();
-        anim.currentTime = progress * total;
-      } catch {}
-    }
-  }
-
-  // Scene transitions: a [data-transition] clip animates in (vf-tr-*
-  // keyframes) over its first data-transition-duration seconds, ON TOP of the
-  // previous clip on its track — so that previous clip must stay active for
-  // the transition window. Publish materializes this overlap into
-  // data-duration (normalizePublishHtml); the preview grants it live so
-  // butt-cut drafts preview exactly like the render. A [data-transition-out]
-  // clip additionally animates AWAY (vf-tr-out-* keyframes) over its last
-  // data-transition-out-duration seconds — no hold needed, the exit window
-  // lives inside the clip's own span.
-  function collectTransitionWindows() {
-    const windows = [];
-    for (const clip of clips) {
-      if (!(clip instanceof HTMLElement) || clip instanceof HTMLAudioElement) continue;
-      if (!clip.hasAttribute("data-transition")) continue;
-      const timing = readTiming(clip);
-      let transitionDuration = Number(clip.getAttribute("data-transition-duration"));
-      if (!Number.isFinite(transitionDuration) || transitionDuration <= 0) transitionDuration = 0.5;
-      windows.push({
-        track: Number(clip.getAttribute("data-track-index")) || 0,
-        start: timing.start,
-        duration: Math.min(transitionDuration, timing.duration)
-      });
-    }
-    return windows;
-  }
-
-  function transitionHoldFor(clip, timing, windows) {
-    if (!windows.length) return 0;
-    if (!(clip instanceof HTMLElement) || clip instanceof HTMLAudioElement) return 0;
-    const track = Number(clip.getAttribute("data-track-index")) || 0;
-    let hold = 0;
-    for (const window of windows) {
-      if (window.track !== track) continue;
-      // Nominal-end adjacency: already-materialized holds (published HTML)
-      // shift this clip's end past the next start, fail the check, and are
-      // simply not re-granted — no double extension either way.
-      if (Math.abs(window.start - timing.end) > 0.05) continue;
-      if (window.duration > hold) hold = window.duration;
-    }
-    return hold;
-  }
-
-  function syncTransitionClip(clip, timing, hold) {
-    if (typeof clip.getAnimations !== "function") return;
-    // Exit animations sit at the clip's tail via the inline --vf-tr-out-delay
-    // var. Timeline edits touch data-duration only, so re-derive the delay
-    // (duration + any live hold − out duration) before scrubbing; publish
-    // materializes the same value for the render producer.
-    if (clip.hasAttribute("data-transition-out")) {
-      let outDuration = Number(clip.getAttribute("data-transition-out-duration"));
-      if (!Number.isFinite(outDuration) || outDuration <= 0) outDuration = 0.5;
-      outDuration = Math.min(outDuration, timing.duration);
-      const expectedDelay = Math.max(0, timing.duration + (hold || 0) - outDuration);
-      try {
-        if (Math.abs((parseFloat(clip.style.getPropertyValue("--vf-tr-out-dur")) || 0) - outDuration) > 0.002) {
-          clip.style.setProperty("--vf-tr-out-dur", outDuration.toFixed(3) + "s");
-        }
-        if (Math.abs((parseFloat(clip.style.getPropertyValue("--vf-tr-out-delay")) || 0) - expectedDelay) > 0.002) {
-          clip.style.setProperty("--vf-tr-out-delay", expectedDelay.toFixed(3) + "s");
-        }
-      } catch {}
-    }
-    const offsetMs = Math.max(0, (time - timing.start)) * 1000;
-    let anims = [];
-    try { anims = clip.getAnimations({ subtree: true }); } catch { return; }
-    for (const anim of anims) {
-      if (typeof anim.animationName !== "string" || anim.animationName.indexOf("vf-tr-") !== 0) continue;
-      try {
-        anim.pause();
-        anim.currentTime = offsetMs;
-      } catch {}
-    }
-  }
-
-  // Animated caption words carry vf-cap-* keyframes whose inline delay/
-  // duration ARE the word windows relative to the layer start, so unlike Ken
-  // Burns there is nothing to normalize — the scrub is simply the absolute
-  // offset into the layer. Paused-by-stylesheet + scrubbed-here matches the
-  // render producer's CSS adapter exactly.
-  //
-  // Stability: Chrome PERMANENTLY drops a paused fill:none CSS animation the
-  // moment its currentTime is pushed past the effect end, and never re-creates
-  // it while the computed animation-name is unchanged — so one forward scrub
-  // across a word's window would leave that word stuck in its resting state
-  // (invisible for word-pop/stack-up) on every later frame. Past the end, a
-  // parked fill:none animation looks identical to the resting styles, so park
-  // at 0 instead of overshooting. fill:forwards presets (karaoke-fill,
-  // cumulative-reveal) must overshoot to hold their final keyframe — finished
-  // + forwards animations keep applying their effect and survive. If a word's
-  // animation is missing anyway (dropped before this guard, or an innerHTML
-  // morph replaced the spans mid-scrub), restart it declaratively by cycling
-  // animation-name through none.
-  function captionWordAnimationFor(word) {
-    let anims = [];
-    try { anims = word.getAnimations(); } catch { return null; }
-    for (const anim of anims) {
-      if (typeof anim.animationName === "string" && anim.animationName.indexOf("vf-cap-") === 0) return anim;
-    }
-    return null;
-  }
-
-  function syncCaptionClip(clip, timing) {
-    if (typeof clip.getAnimations !== "function") return;
-    const offsetMs = Math.max(0, (time - timing.start)) * 1000;
-    let words = [];
-    try { words = Array.from(clip.querySelectorAll('[data-cap-word="true"]')); } catch { return; }
-    for (const word of words) {
-      if (typeof word.getAnimations !== "function") continue;
-      let anim = captionWordAnimationFor(word);
-      if (!anim) {
-        const inlineEndMs =
-          ((parseFloat(word.style.animationDelay) || 0) + (parseFloat(word.style.animationDuration) || 0)) * 1000;
-        let needed = offsetMs <= inlineEndMs;
-        if (!needed) {
-          try { needed = getComputedStyle(word).animationFillMode.indexOf("forward") !== -1 || getComputedStyle(word).animationFillMode.indexOf("both") !== -1; } catch {}
-        }
-        if (!needed) continue;
-        try {
-          word.style.animationName = "none";
-          void word.offsetWidth;
-          word.style.removeProperty("animation-name");
-        } catch { continue; }
-        anim = captionWordAnimationFor(word);
-        if (!anim) continue;
-      }
-      let target = offsetMs;
-      try {
-        const computed = anim.effect && typeof anim.effect.getComputedTiming === "function"
-          ? anim.effect.getComputedTiming()
-          : null;
-        if (computed && typeof computed.endTime === "number" && offsetMs >= computed.endTime
-            && computed.fill !== "forwards" && computed.fill !== "both") {
-          target = 0;
-        }
-      } catch {}
-      try {
-        anim.pause();
-        anim.currentTime = target;
-      } catch {}
-    }
-  }
-
-  // Generalized CSS keyframe scrub — the preview twin of the official
-  // producer CSS adapter: every element whose computed animation-name is set
-  // gets its animations paused and scrubbed to the player time relative to
-  // the nearest ancestor-or-self [data-start] (0 when none). vf-* animations
-  // (Ken Burns, transitions, captions) keep their dedicated machinery above.
-  // Discovery is cached per refreshClips like the official adapter's discover
-  // pass; elements added by live patches are picked up on the next refresh.
-  // Each entry also caches its clip-relative start at discovery so the
-  // per-frame sync skips the ancestor walk; a re-parented or retimed element
-  // is likewise re-resolved on the next refreshClips discovery.
-  let generalCssEntries = [];
-
-  function discoverGeneralCssAnimations() {
-    generalCssEntries = [];
-    let nodes = [];
-    try { nodes = document.querySelectorAll("*"); } catch { return; }
-    for (const node of nodes) {
-      if (!(node instanceof HTMLElement) || typeof node.getAnimations !== "function") continue;
-      let names = "";
-      try { names = getComputedStyle(node).animationName || ""; } catch { continue; }
-      if (!names || names === "none") continue;
-      const expected = [];
-      for (const name of names.split(",")) {
-        const trimmed = name.trim();
-        if (!trimmed || trimmed === "none" || trimmed.indexOf("vf-") === 0) continue;
-        expected.push(trimmed);
-      }
-      if (expected.length) generalCssEntries.push({ el: node, names: expected, start: generalClipStartFor(node) });
-    }
-  }
-
-  function hasAnimationNamed(anims, name) {
-    for (const anim of anims) {
-      if (anim.animationName === name) return true;
-    }
-    return false;
-  }
-
-  function generalClipStartFor(node) {
-    const holder = node.closest("[data-start]");
-    return holder ? readNumberAttr(holder, ["data-start"], 0) : 0;
-  }
-
-  // Cycling animation-name through none re-creates dropped CSS animations
-  // declaratively (same trick as the caption resurrection above), preserving
-  // any authored inline animation-name.
-  function resurrectCssAnimations(node) {
-    try {
-      const inline = node.style.animationName;
-      node.style.animationName = "none";
-      void node.offsetWidth;
-      if (inline && inline !== "none") {
-        node.style.animationName = inline;
-      } else {
-        node.style.removeProperty("animation-name");
-      }
-    } catch {}
-  }
-
-  function scrubGeneralAnimation(anim, offsetMs) {
-    let target = offsetMs;
-    try {
-      const computed = anim.effect && typeof anim.effect.getComputedTiming === "function"
-        ? anim.effect.getComputedTiming()
-        : null;
-      const endTime = computed && typeof computed.endTime === "number" ? computed.endTime : NaN;
-      if (Number.isFinite(endTime) && offsetMs >= endTime) {
-        // Same Chrome guard as the caption scrub: paused fill:none/backwards
-        // animations pushed past their effect end are destroyed permanently,
-        // so park them at 0; fill:forwards/both hold their final keyframe at
-        // the clamped end. Infinite-iteration animations (endTime Infinity)
-        // take the raw clip-relative offset like the official CSS adapter —
-        // the browser resolves the iteration phase.
-        target = computed.fill === "forwards" || computed.fill === "both" ? endTime : 0;
-      }
-    } catch {}
-    try {
-      anim.pause();
-      anim.currentTime = target;
-    } catch {}
-  }
-
-  function syncGeneralCssAnimations() {
-    for (const entry of generalCssEntries) {
-      const node = entry.el;
-      if (!node.isConnected) continue;
-      const offsetMs = Math.max(0, time - entry.start) * 1000;
-      let anims = [];
-      try { anims = node.getAnimations(); } catch { continue; }
-      let missing = null;
-      for (const name of entry.names) {
-        if (!hasAnimationNamed(anims, name)) (missing || (missing = [])).push(name);
-      }
-      if (missing) {
-        resurrectCssAnimations(node);
-        try { anims = node.getAnimations(); } catch { anims = []; }
-        // Names that still have no live animation (e.g. a display:none
-        // subtree) are dropped until the next discovery so a hidden element
-        // is not forced through a reflow every frame.
-        entry.names = entry.names.filter((name) => missing.indexOf(name) === -1 || hasAnimationNamed(anims, name));
-      }
-      for (const anim of anims) {
-        if (typeof anim.animationName !== "string" || anim.animationName.indexOf("vf-") === 0) continue;
-        scrubGeneralAnimation(anim, offsetMs);
-      }
-    }
-  }
-
-  function apply(nextTime, options = {}) {
-    const forceSeek = Boolean(options.forceSeek);
-    const fromClock = Boolean(options.fromClock);
-    ensureDuration();
-    time = clampTime(nextTime);
-    let activeVideoProxy = null;
-    let activeVideoProxyStart = -Infinity;
-    const transitionWindows = collectTransitionWindows();
-    for (const clip of clips) {
-      const timing = readTiming(clip);
-      const hold = transitionHoldFor(clip, timing, transitionWindows);
-      // hyperframes-core clip windows are inclusive of both ends — the final
-      // frame holds.
-      const active = time >= timing.start && time <= timing.end + hold;
-      if (clip instanceof HTMLElement && !(clip instanceof HTMLAudioElement)) {
-        if (clip.getAttribute("data-vf-timeline-proxy") === "video") {
-          // Clip windows are inclusive of both ends, so at an exact butt-cut
-          // the outgoing AND incoming proxies are both active. Prefer the
-          // greatest data-start (timeline order — the incoming clip wins);
-          // DOM order only breaks ties between equal starts.
-          if (active && timing.start >= activeVideoProxyStart) {
-            activeVideoProxy = clip;
-            activeVideoProxyStart = timing.start;
-          }
-        } else {
-          setVisibility(clip, active);
-        }
-        if (clip.hasAttribute("data-kenburns")) syncKenBurnsClip(clip, timing);
-        if (clip.hasAttribute("data-caption-animation")) syncCaptionClip(clip, timing);
-        if (clip.hasAttribute("data-transition") || clip.hasAttribute("data-transition-out")) syncTransitionClip(clip, timing, hold);
-      }
-      if (clip instanceof HTMLMediaElement) {
-        applyMediaState(clip);
-        if (active) {
-          const target = Math.max(0, timing.mediaStart + time - timing.start);
-          const enteringClip = !activeMedia.has(clip);
-          seekMedia(clip, target, forceSeek || enteringClip, playing ? 0.75 : 0.08);
-          if (playing) {
-            ensurePlaying(clip);
-          } else {
-            pauseInactiveMedia(clip);
-          }
-        } else {
-          pauseInactiveMedia(clip);
-        }
-      }
-    }
-    syncGeneralCssAnimations();
-    syncRuntimeAdapters();
-    if (backingVideo instanceof HTMLVideoElement) {
-      applyMediaState(backingVideo);
-      const shouldShowBackingVideo = !hasVideoProxies || Boolean(activeVideoProxy);
-      backingVideo.style.visibility = shouldShowBackingVideo ? "visible" : "hidden";
-      if (activeVideoProxy) {
-        const nextProxyKey = clipKey(activeVideoProxy);
-        const proxyChanged = nextProxyKey !== activeVideoProxyKey;
-        activeVideoProxyKey = nextProxyKey;
-        activeVideoProxyNode = activeVideoProxy;
-        const timing = readTiming(activeVideoProxy);
-        const target = Math.max(0, timing.mediaStart + time - timing.start);
-        const driftLimit = playing ? (fromClock ? 0.75 : 2.0) : 0.08;
-        const drifting = !backingVideo.seeking && Math.abs(backingVideo.currentTime - target) > driftLimit;
-        if (forceSeek || proxyChanged || !playing || drifting) {
-          seekMedia(backingVideo, target, true, 0.08);
-        }
-      } else {
-        activeVideoProxyKey = null;
-        activeVideoProxyNode = null;
-        if (!hasVideoProxies && !fromClock) seekMedia(backingVideo, time, forceSeek, playing ? 1.25 : 0.08);
-      }
-      if (playing && shouldShowBackingVideo) {
-        ensurePlaying(backingVideo);
-      } else {
-        pauseInactiveMedia(backingVideo);
-      }
-    }
-  }
-
-  function tick(now) {
-    if (!playing) return;
-    if (!last) last = now;
-    const delta = ((now - last) / 1000) * playbackRate;
-    const next = time + delta;
-    last = now;
-    apply(next >= duration ? duration : next, { fromClock: true });
-    if (time >= duration) {
-      playing = false;
-      for (const clip of clips) {
-        if (clip instanceof HTMLMediaElement) pauseInactiveMedia(clip);
-      }
-      if (backingVideo instanceof HTMLMediaElement) pauseInactiveMedia(backingVideo);
-      return;
-    }
-    raf = requestAnimationFrame(tick);
-  }
-
-  window.__player = {
-    play() {
-      if (playing) return;
-      if (time >= duration) time = 0;
-      playing = true;
-      last = 0;
-      apply(time, { forceSeek: true });
-      cancelAnimationFrame(raf);
-      raf = requestAnimationFrame(tick);
-    },
-    pause() {
-      playing = false;
-      cancelAnimationFrame(raf);
-      for (const clip of clips) {
-        if (clip instanceof HTMLMediaElement) pauseInactiveMedia(clip);
-      }
-      if (backingVideo instanceof HTMLMediaElement) pauseInactiveMedia(backingVideo);
-    },
-    seek(nextTime, options = {}) {
-      const shouldKeepPlaying = playing || options.keepPlaying === true;
-      playing = shouldKeepPlaying;
-      if (!shouldKeepPlaying) cancelAnimationFrame(raf);
-      apply(nextTime, { forceSeek: true });
-      if (shouldKeepPlaying) {
-        last = 0;
-        cancelAnimationFrame(raf);
-        raf = requestAnimationFrame(tick);
-      }
-    },
-    getTime() {
-      return time;
-    },
-    getDuration() {
-      return duration;
-    },
-    isPlaying() {
-      return playing;
-    },
-    setPlaybackRate,
-    getPlaybackRate() {
-      return playbackRate;
-    },
-    setMuted,
-    refreshClips,
-    // Re-scrub caption word animations at the current playhead without a full
-    // apply(). The editor calls this after live-patching a caption layer's
-    // DOM (style/text edits rebuild the word spans, whose fresh CSS-paused
-    // animations sit at currentTime 0 — resting/invisible — until scrubbed).
-    syncCaptions() {
-      for (const clip of Array.from(document.querySelectorAll("[data-caption-animation]"))) {
-        if (clip instanceof HTMLElement) syncCaptionClip(clip, readTiming(clip));
-      }
-    }
-  };
-
-  refreshClips();
-  if (backingVideo instanceof HTMLMediaElement) {
-    backingVideo.addEventListener("loadedmetadata", () => {
-      if (!playing) apply(time, { forceSeek: true });
-    });
-  }
-  window.addEventListener("load", () => {
-    // Composition scripts may register adapter instances (GSAP timelines,
-    // Lottie players, ...) or start CSS animations on the load event —
-    // re-discover and re-scrub so late registrations preview correctly.
-    discoverGeneralCssAnimations();
-    if (!playing) apply(time, { forceSeek: true });
-  });
-
-  // Cache the parent frame's origin from the first accepted control message
-  // and pin all outbound postMessages to it. Falls back to document.referrer's
-  // origin so drag/select events still reach the editor before any control
-  // message has been received. Without pinning, sending "*" leaks preview
-  // frame coordinates and layer ids to any embedding third-party page.
-  let trustedParentOrigin = null;
-  try {
-    if (document.referrer) {
-      trustedParentOrigin = new URL(document.referrer).origin;
-    }
-  } catch {}
-  function parentTargetOrigin() {
-    return trustedParentOrigin || "*";
-  }
-  function postToParent(payload) {
-    if (!window.parent || window.parent === window) return;
-    try {
-      window.parent.postMessage(payload, parentTargetOrigin());
-    } catch {}
-  }
-
-  window.addEventListener("message", (event) => {
-    // Only accept messages from the direct parent frame. Blocks sibling
-    // iframes and popups that could otherwise spoof play/pause/seek by
-    // forging data.source.
-    if (event.source !== window.parent) return;
-    const data = event.data || {};
-    if (data.type !== "control" && data.source !== "hf-parent") return;
-    if (event.origin && event.origin !== "null") {
-      trustedParentOrigin = event.origin;
-    }
-    if (data.action === "play") {
-      window.__player.play();
-    }
-    if (data.action === "pause" || data.action === "stop-media") {
-      window.__player.pause();
-    }
-    if (data.action === "seek") {
-      const nextTime = Number.isFinite(Number(data.time))
-        ? Number(data.time)
-        : Number.isFinite(Number(data.frame))
-          ? Number(data.frame) / 30
-          : Number.isFinite(Number(data.payload?.time))
-            ? Number(data.payload.time)
-            : time;
-      window.__player.seek(nextTime);
-    }
-    if (data.action === "set-playback-rate") {
-      setPlaybackRate(data.playbackRate ?? data.payload?.playbackRate);
-    }
-    if (data.action === "set-muted") {
-      setMuted(data.muted ?? data.payload?.muted);
-    }
-  });
-
-  function selectTargetFromEvent(event) {
-    const handle = event.target instanceof Element
-      ? event.target.closest("[data-vf-frame-handle]")
-      : null;
-    const handleTargetId = handle?.getAttribute("data-vf-target-id") || null;
-    if (handleTargetId) {
-      return document.querySelector("[data-hf-id='" + CSS.escape(handleTargetId) + "'], #" + CSS.escape(handleTargetId));
-    }
-    return event.target instanceof Element
-      ? event.target.closest("[data-start]")
-      : null;
-  }
-
-  function postSelectedLayer(event) {
-    const target = selectTargetFromEvent(event);
-    const rawId = target?.getAttribute("data-hf-id") || target?.id || null;
-    const id = rawId === "source-video" ? null : rawId;
-    postToParent({
-      source: "vidfarm-composition",
-      action: "select-layer",
-      id
-    });
-  }
-
-  function postPreviewContextMenu(event) {
-    event.preventDefault();
-    const root = document.querySelector("[data-composition-id]");
-    const rect = root instanceof HTMLElement ? root.getBoundingClientRect() : null;
-    const target = selectTargetFromEvent(event);
-    const rawId = target?.getAttribute("data-hf-id") || target?.id || null;
-    const id = rawId === "source-video" ? null : rawId;
-    const x = rect ? ((event.clientX - rect.left) / Math.max(1, rect.width)) * 100 : 12;
-    const y = rect ? ((event.clientY - rect.top) / Math.max(1, rect.height)) * 100 : 70;
-    postToParent({
-      source: "vidfarm-composition",
-      action: "preview-context-menu",
-      id,
-      clientX: event.clientX,
-      clientY: event.clientY,
-      time,
-      frame: {
-        x: Math.max(0, Math.min(95, x)),
-        y: Math.max(0, Math.min(95, y)),
-        width: 42,
-        height: 12
-      }
-    });
-  }
-
-  function frameFromNode(node) {
-    return {
-      x: Number.parseFloat(node.style.left || "0") || 0,
-      y: Number.parseFloat(node.style.top || "0") || 0,
-      width: Number.parseFloat(node.style.width || "100") || 100,
-      height: Number.parseFloat(node.style.height || "100") || 100,
-      // NaN (not 18) when the wrapper has no inline font-size — text layers keep
-      // their real size on inner spans, so fabricating 18 here would make a plain
-      // MOVE collapse the text to 18px. Downstream apply/stage all guard
-      // Number.isFinite, so an absent size is simply left untouched on a move.
-      fontSize: Number.parseFloat(node.style.fontSize)
-    };
-  }
-
-  function isVisualFrameTarget(node) {
-    if (!(node instanceof HTMLElement) || node instanceof HTMLAudioElement) return false;
-    const id = node.getAttribute("data-hf-id") || node.id || "";
-    return id !== "source-video";
-  }
-
-  function isTextFrameTarget(node) {
-    return node instanceof HTMLElement &&
-      !(node instanceof HTMLAudioElement) &&
-      !(node instanceof HTMLVideoElement) &&
-      !(node instanceof HTMLImageElement);
-  }
-
-  function syncRuntimeFrameControls(node) {
-    if (!isVisualFrameTarget(node)) return;
-    const root = document.querySelector("[data-composition-id]");
-    if (!(root instanceof HTMLElement)) return;
-    const targetId = node.getAttribute("data-hf-id") || node.id || "";
-    if (!targetId) return;
-    let ring = document.querySelector("[data-vf-selection-ring='true']");
-    if (!(ring instanceof HTMLElement)) {
-      ring = document.createElement("div");
-      ring.setAttribute("data-vf-selection-ring", "true");
-      root.append(ring);
-    }
-    ring.style.display = "block";
-    ring.style.position = "absolute";
-    ring.style.left = node.style.left || "0%";
-    ring.style.top = node.style.top || "0%";
-    ring.style.width = node.style.width || "100%";
-    ring.style.height = node.style.height || "100%";
-    ring.style.borderRadius = node.style.borderRadius || "0";
-    ring.style.zIndex = "9999";
-    ring.style.pointerEvents = "auto";
-    ring.style.cursor = "grab";
-    ring.style.border = "1px dashed #F2CD46";
-    ring.style.boxShadow = "0 0 0 2px #118df2";
-    ring.setAttribute("data-vf-frame-handle", "move");
-    ring.setAttribute("data-vf-target-id", targetId);
-    for (const handle of Array.from(ring.querySelectorAll("[data-vf-frame-handle]"))) {
-      if (handle !== ring) handle.remove();
-    }
-    for (const [mode, cssText] of [
-      ["top-left", "left:-7px;top:-7px;cursor:nwse-resize;"],
-      ["top", "top:-7px;left:50%;transform:translateX(-50%);cursor:ns-resize;"],
-      ["top-right", "right:-7px;top:-7px;cursor:nesw-resize;"],
-      ["right", "right:-7px;top:50%;transform:translateY(-50%);cursor:ew-resize;"],
-      ["bottom-right", "right:-7px;bottom:-7px;cursor:nwse-resize;"],
-      ["bottom", "bottom:-7px;left:50%;transform:translateX(-50%);cursor:ns-resize;"],
-      ["bottom-left", "left:-7px;bottom:-7px;cursor:nesw-resize;"],
-      ["left", "left:-7px;top:50%;transform:translateY(-50%);cursor:ew-resize;"]
-    ]) {
-      const handle = document.createElement("span");
-      handle.setAttribute("data-vf-frame-handle", mode);
-      handle.setAttribute("data-vf-target-id", targetId);
-      handle.style.cssText = [
-        "position:absolute",
-        "display:block",
-        "width:14px",
-        "height:14px",
-        "box-sizing:border-box",
-        "border-radius:999px",
-        "border:2px solid #0b0d0a",
-        "background:#F2CD46",
-        "box-shadow:0 0 0 2px rgba(242,205,70,0.32),0 1px 4px rgba(0,0,0,0.38)",
-        "pointer-events:auto",
-        "touch-action:none",
-        cssText
-      ].join(";");
-      ring.append(handle);
-    }
-  }
-
-  function applyFrameToNode(node, frame) {
-    node.style.left = frame.x + "%";
-    node.style.top = frame.y + "%";
-    node.style.width = frame.width + "%";
-    node.style.height = frame.height + "%";
-    if (Number.isFinite(frame.fontSize)) {
-      node.style.fontSize = frame.fontSize + "px";
-    }
-    syncRuntimeFrameControls(node);
-  }
-
-  function postFrameDraft(node, phase) {
-    const id = node.getAttribute("data-hf-id") || node.id || null;
-    if (!id) return;
-    postToParent({
-      source: "vidfarm-composition",
-      action: "visual-frame-draft",
-      phase,
-      id,
-      frame: frameFromNode(node)
-    });
-  }
-
-  let visualFrameDrag = null;
-
-  function beginVisualFrameDrag(event) {
-    if (event.button !== 0) return;
-    const handle = event.target instanceof Element
-      ? event.target.closest("[data-vf-frame-handle]")
-      : null;
-    const handleTargetId = handle?.getAttribute("data-vf-target-id") || null;
-    const target = handleTargetId
-      ? document.querySelector("[data-hf-id='" + CSS.escape(handleTargetId) + "'], #" + CSS.escape(handleTargetId))
-      : event.target instanceof Element
-        ? event.target.closest("[data-start]")
-        : null;
-    if (!isVisualFrameTarget(target)) return;
-    const root = document.querySelector("[data-composition-id]");
-    if (!(root instanceof HTMLElement)) return;
-    const rootRect = root.getBoundingClientRect();
-    event.preventDefault();
-    event.stopPropagation();
-    postSelectedLayer(event);
-    visualFrameDrag = {
-      node: target,
-      mode: handle?.getAttribute("data-vf-frame-handle") || "move",
-      startX: event.clientX,
-      startY: event.clientY,
-      rootWidth: Math.max(1, rootRect.width),
-      rootHeight: Math.max(1, rootRect.height),
-      frame: frameFromNode(target),
-      moved: false
-    };
-    syncRuntimeFrameControls(target);
-    target.style.cursor = "grabbing";
-    postFrameDraft(target, "start");
-  }
-
-  function updateVisualFrameDrag(event) {
-    if (!visualFrameDrag) return;
-    const drag = visualFrameDrag;
-    const dx = ((event.clientX - drag.startX) / drag.rootWidth) * 100;
-    const dy = ((event.clientY - drag.startY) / drag.rootHeight) * 100;
-    if (!drag.moved && Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY) < 2) return;
-    drag.moved = true;
-    event.preventDefault();
-    const next = { ...drag.frame };
-    if (drag.mode === "move") {
-      next.x = Math.max(0, Math.min(100 - drag.frame.width, drag.frame.x + dx));
-      next.y = Math.max(0, Math.min(100 - drag.frame.height, drag.frame.y + dy));
-    }
-    if (drag.mode === "left" || drag.mode === "top-left" || drag.mode === "bottom-left") {
-      const nextX = Math.max(0, Math.min(drag.frame.x + drag.frame.width - 1, drag.frame.x + dx));
-      next.x = nextX;
-      next.width = Math.max(1, Math.min(100 - nextX, drag.frame.width + (drag.frame.x - nextX)));
-    }
-    if (drag.mode === "right" || drag.mode === "top-right" || drag.mode === "bottom-right") {
-      next.width = Math.max(1, Math.min(100 - drag.frame.x, drag.frame.width + dx));
-    }
-    if (drag.mode === "top" || drag.mode === "top-left" || drag.mode === "top-right") {
-      const nextY = Math.max(0, Math.min(drag.frame.y + drag.frame.height - 1, drag.frame.y + dy));
-      next.y = nextY;
-      next.height = Math.max(1, Math.min(100 - nextY, drag.frame.height + (drag.frame.y - nextY)));
-    }
-    if (drag.mode === "bottom" || drag.mode === "bottom-left" || drag.mode === "bottom-right") {
-      next.height = Math.max(1, Math.min(100 - drag.frame.y, drag.frame.height + dy));
-    }
-    if (
-      isTextFrameTarget(drag.node) &&
-      ["top-left", "top-right", "bottom-left", "bottom-right"].includes(drag.mode)
-    ) {
-      const widthScale = next.width / Math.max(1, drag.frame.width);
-      const heightScale = next.height / Math.max(1, drag.frame.height);
-      const scale = Math.sqrt(Math.max(0.05, widthScale * heightScale));
-      next.fontSize = Math.max(8, Math.min(180, (drag.frame.fontSize || 18) * scale));
-    }
-    applyFrameToNode(drag.node, next);
-    postFrameDraft(drag.node, "move");
-  }
-
-  function endVisualFrameDrag() {
-    if (!visualFrameDrag) return;
-    visualFrameDrag.node.style.cursor = "";
-    postFrameDraft(visualFrameDrag.node, visualFrameDrag.moved ? "end" : "tap");
-    visualFrameDrag = null;
-  }
-
-  function hoverVisualFrameTarget(event) {
-    const handle = event.target instanceof Element
-      ? event.target.closest("[data-vf-frame-handle]")
-      : null;
-    const handleTargetId = handle?.getAttribute("data-vf-target-id") || null;
-    const target = handleTargetId
-      ? document.querySelector("[data-hf-id='" + CSS.escape(handleTargetId) + "'], #" + CSS.escape(handleTargetId))
-      : event.target instanceof Element
-        ? event.target.closest("[data-start]")
-        : null;
-    if (!isVisualFrameTarget(target)) return;
-    target.style.cursor = "grab";
-    syncRuntimeFrameControls(target);
-  }
-
-  document.addEventListener("pointerover", hoverVisualFrameTarget, true);
-  document.addEventListener("pointerdown", beginVisualFrameDrag, true);
-  document.addEventListener("pointermove", updateVisualFrameDrag, { passive: false });
-  document.addEventListener("pointerup", endVisualFrameDrag);
-  document.addEventListener("pointercancel", endVisualFrameDrag);
-  document.addEventListener("pointerdown", postSelectedLayer);
-  document.addEventListener("click", postSelectedLayer);
-  document.addEventListener("contextmenu", postPreviewContextMenu, true);
-
-  try {
-    console.info("[hf-runtime] ready", {
-      compositionId: root?.getAttribute("data-composition-id"),
-      duration,
-      clipCount: document.querySelectorAll("[data-start]").length
-    });
-  } catch {}
-
-  apply(0);
-})();
-`;
-//# sourceMappingURL=composition-runtime.js.map