@mevdragon/vidfarm-devcli 0.5.2 → 0.6.0

package/dist/src/cli.js

@@ -616,7 +616,7 @@ function printServeBanner(input) {
     console.log(line);
     console.log(`  server      ${input.base}`);
     console.log(`  data dir    ${input.dataDir}`);
-    console.log(`  render      ${DIM}cloud (submitted to the deployed renderer)${RESET}`);
+    console.log(`  render      ${DIM}local (in-process HyperFrames render — free, no cloud charge)${RESET}`);
     console.log("");
     console.log(`  ${DIM}Agents: edit composition files under ${input.dataDir}/storage — the`);
     console.log(`  browser live-reloads on save. Multiple forks can be edited at once.${RESET}`);

package/dist/src/composition-runtime.js

@@ -0,0 +1,613 @@
+// 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]");
+  const duration = Number(root?.getAttribute("data-duration") || 0);
+  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() {
+    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");
+    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 {}
+    }
+  }
+
+  function apply(nextTime, options = {}) {
+    const forceSeek = Boolean(options.forceSeek);
+    const fromClock = Boolean(options.fromClock);
+    time = clampTime(nextTime);
+    let activeVideoProxy = null;
+    for (const clip of clips) {
+      const timing = readTiming(clip);
+      const active = time >= timing.start && time < timing.end;
+      if (clip instanceof HTMLElement && !(clip instanceof HTMLAudioElement)) {
+        if (clip.getAttribute("data-vf-timeline-proxy") === "video") {
+          if (active) activeVideoProxy = clip;
+        } else {
+          setVisibility(clip, active);
+        }
+      }
+      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);
+        }
+      }
+    }
+    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
+  };
+
+  refreshClips();
+  if (backingVideo instanceof HTMLMediaElement) {
+    backingVideo.addEventListener("loadedmetadata", () => {
+      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