Merge branch 'main' into fix/producer-progress-from-first-frame

Author: miguel-heygen

.claude-plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "hyperframes",
   "description": "HyperFrames by HeyGen. Write HTML, render video. Compositions, GSAP and runtime adapter animations, captions, voiceovers, audio-reactive visuals, and website capture for HyperFrames.",
-  "version": "0.8.71",
+  "version": "0.8.72",
   "author": {
     "name": "HeyGen",
     "email": "hyperframes@heygen.com",

.codex-plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "hyperframes",
   "description": "Write HTML, render video. Compositions, Tailwind v4 styles, GSAP and runtime adapter animations, captions, voiceovers, audio-reactive visuals, and website capture for HyperFrames.",
-  "version": "0.8.71",
+  "version": "0.8.72",
   "author": {
     "name": "HeyGen",
     "email": "hyperframes@heygen.com",

.cursor-plugin/plugin.json

@@ -3,7 +3,7 @@
   "name": "hyperframes",
   "displayName": "HyperFrames by HeyGen",
   "description": "Write HTML, render video. Compositions, Tailwind v4 styles, GSAP and runtime adapter animations, captions, voiceovers, audio-reactive visuals, and website capture for HyperFrames.",
-  "version": "0.8.71",
+  "version": "0.8.72",
   "author": {
     "name": "HeyGen",
     "email": "hyperframes@heygen.com"

docs/changelog.mdx

@@ -8,6 +8,25 @@ Recent HyperFrames releases, including user-facing features, fixes, and migratio
 
 {/* New release entries are prepended by `bun run changelog:draft <version> --write`. */}
 
+<Update
+  label="HyperFrames v0.8.72"
+  description="Released - 2026-09-24"
+  tags={["Release", "Studio", "Core"]}
+>
+Clicking an element inside a section now selects that element, even when the section's root sets pointer-events to none. A frame grabbed right after the first seek on a fresh preview now shows the video at the time you asked for. Apps that embed Studio's preview can now draw the film edge to edge in its box.
+
+## Features
+
+- **Studio:** Let an embedder draw the preview edge to edge with fillBox ([326df8def](https://github.com/heygen-com/hyperframes/commit/326df8def036e708d25a0ca0e069f91172767b0e), [#4408](https://github.com/heygen-com/hyperframes/pull/4408)).
+
+## Fixes
+
+- **Core:** Frame captures wait for a seeking video to land its frame ([261af22c1](https://github.com/heygen-com/hyperframes/commit/261af22c1684d79ed30cc72f7f328f698fea2adb), [#4406](https://github.com/heygen-com/hyperframes/pull/4406)).
+- **Core:** A section whose root sets pointer-events:none stays pickable ([115332f4f](https://github.com/heygen-com/hyperframes/commit/115332f4f6114c078ba4f6d3b252387545c96c03), [#4399](https://github.com/heygen-com/hyperframes/pull/4399)).
+
+[View the full commit range](https://github.com/heygen-com/hyperframes/compare/v0.8.71...v0.8.72).
+</Update>
+
 <Update
   label="HyperFrames v0.8.71"
   description="Released - 2026-09-24"

packages/aws-lambda/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/aws-lambda",
-  "version": "0.8.71",
+  "version": "0.8.72",
   "description": "AWS Lambda adapter for HyperFrames distributed rendering — handler, client-side SDK, and CDK construct.",
   "repository": {
     "type": "git",

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/cli",
-  "version": "0.8.71",
+  "version": "0.8.72",
   "description": "HyperFrames CLI — create, preview, and render HTML video compositions",
   "license": "Apache-2.0",
   "repository": {

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/core",
-  "version": "0.8.71",
+  "version": "0.8.72",
   "description": "",
   "repository": {
     "type": "git",

packages/core/src/runtime/media.test.ts

@@ -8,6 +8,7 @@ import {
 } from "./media";
 import type { RuntimeMediaClip } from "./media";
 import { resolveNaturalMediaTimelineDuration } from "./playbackRate";
+import { resetSeekDispatchState, waitForSeekCompletion } from "./adapters/seek-dispatch";
 import { sourceTimeAt } from "../speedRamp";
 import type { HfAutomationLane } from "../audioAutomation";
 
@@ -704,6 +705,43 @@ describe("syncRuntimeMedia", () => {
     });
   });
 
+  describe("video seek completion", () => {
+    afterEach(() => resetSeekDispatchState());
+
+    function seekColdVideo(): RuntimeMediaClip {
+      const clip = createMockClip({ start: 7.1, end: 18.24 });
+      Object.defineProperty(clip.el, "seeking", { value: true, configurable: true });
+      syncRuntimeMedia({ clips: [clip], timeSeconds: 12, playing: false, playbackRate: 1 });
+      return clip;
+    }
+
+    async function barrierSettled(barrier: Promise<void>): Promise<boolean> {
+      let settled = false;
+      void barrier.then(() => (settled = true));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      return settled;
+    }
+
+    it("holds the seek-completion barrier until a seeking video lands its frame", async () => {
+      const clip = seekColdVideo();
+      expect(clip.el.currentTime).toBeCloseTo(4.9);
+      const barrier = waitForSeekCompletion();
+      expect(await barrierSettled(barrier)).toBe(false);
+      clip.el.dispatchEvent(new Event("seeked"));
+      expect(await barrierSettled(barrier)).toBe(true);
+    });
+
+    it.each(["error", "emptied", "abort"])(
+      "releases the barrier when the seek ends in %s",
+      async (type) => {
+        const clip = seekColdVideo();
+        const barrier = waitForSeekCompletion();
+        clip.el.dispatchEvent(new Event(type));
+        expect(await barrierSettled(barrier)).toBe(true);
+      },
+    );
+  });
+
   describe("play() storm guard (unplayable elements)", () => {
     it("does not play() an element with a media error", () => {
       const clip = createMockClip({ start: 0, end: 10 });

packages/core/src/runtime/media.ts

@@ -8,6 +8,7 @@ import { rateAt, sourceTimeAt, timeAtSourceTime, type RateSpec } from "../speedR
 import { clampAudioGain } from "../audioGain.js";
 import { isMemberGroupHidden } from "../audioGroups.js";
 import { findInjectedRenderFrame } from "./renderFrameSibling.js";
+import { registerSeekCompletion } from "./adapters/seek-dispatch.js";
 export {
   readElementPlaybackRate,
   readElementRateSpec,
@@ -18,6 +19,22 @@ export function readElementPlaybackStart(el: Element): number {
   return readMediaStart(el);
 }
 
+const SEEK_END_EVENTS = ["seeked", "error", "emptied", "abort"] as const;
+
+// A seeking video still paints its previous frame; frame captures wait on the seek barrier until it lands.
+function holdSeekBarrierUntilVideoLands(el: HTMLMediaElement): void {
+  if (el.tagName !== "VIDEO" || !el.seeking) return;
+  registerSeekCompletion(
+    new Promise<void>((resolve) => {
+      const done = () => {
+        for (const type of SEEK_END_EVENTS) el.removeEventListener(type, done);
+        resolve();
+      };
+      for (const type of SEEK_END_EVENTS) el.addEventListener(type, done);
+    }),
+  );
+}
+
 /**
  * Resolve a media element's timeline window without conflating a video's
  * authored display slot with the amount of source left to decode.
@@ -502,6 +519,7 @@ export function syncRuntimeMedia(params: {
               swallow("runtime.media.site3", err);
             }
           }
+          holdSeekBarrierUntilVideoLands(el);
         }
         playRequested.delete(el);
       }

packages/core/src/runtime/picker.test.ts

@@ -25,6 +25,23 @@ beforeAll(() => {
   }
 });
 
+function ancestorsOf(el: Element): Element[] {
+  const chain: Element[] = [];
+  for (let at = el.parentElement; at; at = at.parentElement) chain.push(at);
+  return chain;
+}
+
+// Like a browser: the paint stack under the point, top first, minus computed pointer-events:none.
+function emulateHitTest(painted: () => Element[]): () => void {
+  const original = document.elementsFromPoint;
+  Object.defineProperty(document, "elementsFromPoint", {
+    configurable: true,
+    value: vi.fn(() => painted().filter((el) => getComputedStyle(el).pointerEvents !== "none")),
+  });
+  return () =>
+    Object.defineProperty(document, "elementsFromPoint", { configurable: true, value: original });
+}
+
 function createMockPostMessage() {
   return vi.fn();
 }
@@ -150,6 +167,163 @@ describe("createPickerModule", () => {
       }
     });
 
+    it("picks inside a mounted section whose root sets pointer-events:none", () => {
+      const picker = createPickerModule({ postMessage: createMockPostMessage() });
+      picker.installPickerApi();
+      // The mount rescopes the section's own root rule onto its inner root.
+      document.head.innerHTML =
+        '<style>[data-composition-id="intro"] > [data-hf-inner-root] { pointer-events: none }' +
+        " .vignette { pointer-events: none }</style>";
+      document.body.innerHTML = `<div data-composition-id="intro" data-composition-src="intro.html">
+        <div data-hf-inner-root="true"><div class="card"><code id="code">tl.to()</code></div>
+        <div class="vignette" id="vignette"></div></div></div>`;
+      const code = document.getElementById("code")!;
+      // Paint order under the point, top first; like a browser, drop what has pointer-events:none.
+      const painted = [document.getElementById("vignette")!, code, code.parentElement!];
+      const originalElementsFromPoint = document.elementsFromPoint;
+      Object.defineProperty(document, "elementsFromPoint", {
+        configurable: true,
+        value: vi.fn(() =>
+          [...painted, ...ancestorsOf(code.parentElement!)].filter(
+            (el) => getComputedStyle(el).pointerEvents !== "none",
+          ),
+        ),
+      });
+
+      const api = (window as any).__HF_PICKER_API;
+      try {
+        expect(api.getCandidatesAtPoint(10, 10)[0]?.selector).toBe("#code");
+        expect(api.pickAtPoint(10, 10)?.selector).toBe("#code");
+        expect(document.head.querySelectorAll("style")).toHaveLength(1);
+      } finally {
+        Object.defineProperty(document, "elementsFromPoint", {
+          configurable: true,
+          value: originalElementsFromPoint,
+        });
+      }
+    });
+
+    it("picks inside a composition opened on its own whose root sets pointer-events:none", () => {
+      const picker = createPickerModule({ postMessage: createMockPostMessage() });
+      picker.installPickerApi();
+      document.head.innerHTML = "<style>#root { pointer-events: none }</style>";
+      document.body.innerHTML = `<div id="root" data-composition-id="intro"><div id="card">
+        <code id="code">tl.to()</code></div></div>`;
+      const at = (id: string) => document.getElementById(id)!;
+      const restore = emulateHitTest(() => [at("code"), at("card"), at("root")]);
+      const api = (window as any).__HF_PICKER_API;
+      try {
+        expect(api.getCandidatesAtPoint(10, 10).map((c: any) => c.selector)).toEqual([
+          "#code",
+          "#card",
+        ]);
+      } finally {
+        restore();
+      }
+    });
+
+    it("adopts the override only for the hit test, leaving the DOM and a saved outerHTML untouched", () => {
+      const adopted: CSSStyleSheet[] = [];
+      Object.defineProperty(document, "adoptedStyleSheets", {
+        configurable: true,
+        get: () => adopted.slice(),
+        set: (next: CSSStyleSheet[]) => adopted.splice(0, adopted.length, ...next),
+      });
+      const picker = createPickerModule({ postMessage: createMockPostMessage() });
+      picker.installPickerApi();
+      document.body.innerHTML =
+        '<div data-composition-id="intro"><div data-hf-inner-root="true" style="pointer-events: none">' +
+        '<span id="t">hi</span></div></div>';
+      const during: string[][] = [];
+      const originalElementsFromPoint = document.elementsFromPoint;
+      Object.defineProperty(document, "elementsFromPoint", {
+        configurable: true,
+        value: vi.fn(() => {
+          during.push(adopted.flatMap((sheet) => [...sheet.cssRules].map((rule) => rule.cssText)));
+          return [document.getElementById("t")!];
+        }),
+      });
+      const observer = new MutationObserver(() => {});
+      observer.observe(document, { childList: true, subtree: true, attributes: true });
+      const html = document.documentElement.outerHTML;
+
+      const api = (window as any).__HF_PICKER_API;
+      try {
+        // jsdom ignores adopted sheets for style, so this checks the sheet's lifecycle, not what it picks.
+        api.getCandidatesAtPoint(10, 10);
+        api.pickAtPoint(10, 10);
+        expect(during).toHaveLength(2);
+        expect(during[0]?.join()).toContain("pointer-events: auto !important");
+        expect(adopted).toEqual([]);
+        expect(observer.takeRecords()).toEqual([]);
+        expect(document.documentElement.outerHTML).toBe(html);
+        // With no pass-through root there is nothing to override, so nothing is adopted and nothing restyles.
+        (document.querySelector("[data-hf-inner-root]") as HTMLElement).style.pointerEvents = "";
+        api.getCandidatesAtPoint(10, 10);
+        expect(during.at(-1)).toEqual([]);
+      } finally {
+        observer.disconnect();
+        Object.defineProperty(document, "elementsFromPoint", {
+          configurable: true,
+          value: originalElementsFromPoint,
+        });
+        delete (document as { adoptedStyleSheets?: unknown }).adoptedStyleSheets;
+      }
+    });
+
+    it("keeps a click-through overlay host passing through to what is under it", () => {
+      const picker = createPickerModule({ postMessage: createMockPostMessage() });
+      picker.installPickerApi();
+      document.body.innerHTML = `<div id="root" data-composition-id="main"><video id="aroll"></video>
+        <div id="ovl" data-composition-id="intro_outro" data-composition-src="intro.html"
+          style="pointer-events: none"><div data-hf-inner-root="true"><h1 id="t">Hi</h1></div></div></div>`;
+      const at = (id: string) => document.getElementById(id)!;
+      const inner = document.querySelector("[data-hf-inner-root]")!;
+      const restore = emulateHitTest(() => [at("t"), inner, at("ovl"), at("aroll"), at("root")]);
+      const api = (window as any).__HF_PICKER_API;
+      try {
+        expect(api.getCandidatesAtPoint(10, 10).map((c: any) => c.selector)).toEqual([
+          "#aroll",
+          "#root",
+        ]);
+      } finally {
+        restore();
+      }
+    });
+
+    it("a section background click picks the host, and an inner root never gets a bare tag selector", () => {
+      const picker = createPickerModule({ postMessage: createMockPostMessage() });
+      picker.installPickerApi();
+      document.head.innerHTML =
+        '<style>[data-composition-id="intro"] > [data-hf-inner-root] { pointer-events: none }</style>';
+      document.body.innerHTML = `<div id="root" data-composition-id="main"><div id="host"
+        data-composition-id="intro" data-composition-src="intro.html"><div data-hf-inner-root="true">
+        </div></div><div data-composition-id="outro"><div data-hf-inner-root="true"></div></div></div>`;
+      const [intro, outro] = Array.from(document.querySelectorAll("[data-hf-inner-root]"));
+      const api = (window as any).__HF_PICKER_API;
+      let restore = emulateHitTest(() => [
+        intro!,
+        intro!.parentElement!,
+        document.getElementById("root")!,
+      ]);
+      try {
+        expect(api.getCandidatesAtPoint(10, 10).map((c: any) => c.selector)).toEqual([
+          "#host",
+          "#root",
+        ]);
+      } finally {
+        restore();
+      }
+      restore = emulateHitTest(() => [outro!, outro!.parentElement!]);
+      try {
+        expect(api.getCandidatesAtPoint(10, 10)[0]?.selector).toBe(
+          '[data-composition-id="outro"] > [data-hf-inner-root]',
+        );
+      } finally {
+        restore();
+      }
+    });
+
     it("pickAtPoint returns null for invalid coords", () => {
       const picker = createPickerModule({ postMessage: createMockPostMessage() });
       picker.installPickerApi();