@editframe/elements 0.37.3-beta → 0.38.0

package/dist/EF_FRAMEGEN.js

@@ -1,6 +1,6 @@
-import { updateAnimations } from "./elements/updateAnimations.js";
 import { clearCurrentFrameSpan, enableTracing, extractParentContext, setCurrentFrameSpan, withSpan, withSpanAndContext } from "./otel/tracingHelpers.js";
 import { shallowGetTimegroups } from "./elements/EFTimegroup.js";
+import { setupTemporalHierarchy } from "./elements/setupTemporalHierarchy.js";
 import { setupBrowserTracing } from "./otel/setupBrowserTracing.js";
 
 //#region src/EF_FRAMEGEN.ts
@@ -56,14 +56,15 @@ var EFFramegen = class {
 		if (!ctx) throw new Error("Verification canvas 2d context not ready");
 		this.verificationCtx = ctx;
 		const workbench = document.querySelector("ef-workbench");
-		if (workbench) {
-			this.verificationCanvas.width = workbench.clientWidth;
+		const canvasWidth = workbench ? workbench.clientWidth : this.renderOptions?.encoderOptions.video.width ?? 0;
+		if (canvasWidth > 0) {
+			this.verificationCanvas.width = canvasWidth;
 			this.verificationCanvas.height = 1;
 			Object.assign(this.verificationCanvas.style, {
 				position: "fixed",
 				left: "0px",
 				bottom: "0px",
-				width: `${workbench.clientWidth}px`,
+				width: `${canvasWidth}px`,
 				height: "1px",
 				zIndex: "99999"
 			});
@@ -167,14 +168,17 @@ var EFFramegen = class {
 	async initialize(renderOptions) {
 		this.renderOptions = renderOptions;
 		const workbench = document.querySelector("ef-workbench");
-		if (!workbench) throw new Error("No workbench found");
-		this.setWorkbenchRendering(true);
-		workbench.playing = false;
-		const firstGroup = shallowGetTimegroups(workbench)[0];
+		if (workbench) {
+			this.setWorkbenchRendering(true);
+			workbench.playing = false;
+		}
+		const searchRoot = workbench || document.body;
+		const firstGroup = shallowGetTimegroups(searchRoot)[0];
 		if (!firstGroup) throw new Error("No temporal elements found");
 		const startingTimeMs = renderOptions.encoderOptions.fromMs;
 		await firstGroup.waitForMediaDurations();
-		await firstGroup.frameController.renderFrame(startingTimeMs, { onAnimationsUpdate: (root) => updateAnimations(root) });
+		setupTemporalHierarchy(searchRoot, firstGroup);
+		await firstGroup.seekForRender(startingTimeMs);
 		this.frameDurationMs = 1e3 / renderOptions.encoderOptions.video.framerate;
 		this.time = startingTimeMs;
 		if (this.showFrameBox) {
@@ -192,18 +196,17 @@ var EFFramegen = class {
 		}
 		this.triggerCanvas.initialize();
 		this.audioBufferPromise = firstGroup.renderAudio(renderOptions.encoderOptions.alignedFromUs / 1e3, renderOptions.encoderOptions.alignedToUs / 1e3);
+		this.audioBufferPromise.catch(() => {});
 	}
 	async beginFrame(frameNumber, isLast) {
 		if (this.renderOptions === void 0) throw new Error("No renderOptions");
 		const workbench = document.querySelector("ef-workbench");
-		if (!workbench) throw new Error("No workbench found");
-		this.setWorkbenchRendering(true);
-		const firstGroup = shallowGetTimegroups(workbench)[0];
+		if (workbench) this.setWorkbenchRendering(true);
+		const firstGroup = shallowGetTimegroups(workbench || document.body)[0];
 		if (!firstGroup) throw new Error("No temporal elements found");
 		const frameTime = this.renderOptions.encoderOptions.fromMs + frameNumber * this.frameDurationMs;
 		const frameTimeMs = Number(Number(frameTime).toFixed(5));
-		firstGroup.currentTimeMs = frameTimeMs;
-		await firstGroup.frameController.renderFrame(frameTimeMs, { onAnimationsUpdate: (root) => updateAnimations(root) });
+		await firstGroup.seekForRender(frameTimeMs);
 		if (this.showFrameBox) this.frameBox.innerHTML = `
         <div>🖼️   Frame: ${frameNumber}</div>
         <div>🕛 Segment: ${this.time.toFixed(4)}</div>

package/dist/EF_FRAMEGEN.js.map

@@ -1 +1 @@
-{"version":3,"file":"EF_FRAMEGEN.js","names":[],"sources":["../src/EF_FRAMEGEN.ts"],"sourcesContent":["import type { VideoRenderOptions } from \"@editframe/assets\";\n\nimport { shallowGetTimegroups } from \"./elements/EFTimegroup.js\";\nimport { updateAnimations } from \"./elements/updateAnimations.js\";\nimport { setupBrowserTracing } from \"./otel/setupBrowserTracing.js\";\nimport {\n  clearCurrentFrameSpan,\n  enableTracing,\n  extractParentContext,\n  setCurrentFrameSpan,\n  type TraceContext,\n  withSpan,\n  withSpanAndContext,\n} from \"./otel/tracingHelpers.js\";\n\ninterface Bridge {\n  onInitialize: (\n    callback: (\n      renderOptions: VideoRenderOptions,\n      traceContext?: TraceContext,\n      otelEndpoint?: string,\n    ) => void,\n  ) => void;\n\n  initialized(): void;\n\n  onBeginFrame(\n    callback: (\n      frameNumber: number,\n      isLast: boolean,\n      traceContext?: TraceContext,\n    ) => void,\n  ): void;\n\n  onTriggerCanvas(callback: (traceContext?: TraceContext) => void): void;\n\n  frameReady(frameNumber: number, audioSamples: ArrayBuffer): void;\n\n  error(error: Error): void;\n\n  syncLog(sequence: number, message: string, callback: () => void): void;\n\n  exportSpans?: (endpoint: string, payload: string) => void;\n}\n\ndeclare global {\n  interface Window {\n    EF_FRAMEGEN?: EFFramegen;\n    FRAMEGEN_BRIDGE?: Bridge;\n    FRAMEGEN_BINDING?: any;\n    FRAMEGEN_BINDING_error?: (error: Error) => void;\n    EF_RENDERING?: () => boolean;\n  }\n}\n\nclass TriggerCanvas {\n  private canvas: HTMLCanvasElement;\n  private ctx: CanvasRenderingContext2D;\n\n  private canvasInitialized = false;\n\n  constructor() {\n    this.canvas = document.createElement(\"canvas\");\n    const ctx = this.canvas.getContext(\"2d\", { willReadFrequently: true });\n    if (!ctx) throw new Error(\"Canvas 2d context not ready\");\n    this.ctx = ctx;\n    this.ctx.fillStyle = \"transparent\";\n  }\n\n  initialize() {\n    if (this.canvasInitialized) return;\n    this.canvasInitialized = true;\n    this.canvas.width = 1;\n    this.canvas.height = 1;\n    Object.assign(this.canvas.style, {\n      position: \"fixed\",\n      top: \"0px\",\n      left: \"0px\",\n      width: \"100%\",\n      height: \"100%\",\n      zIndex: \"100000\",\n    });\n    document.body.appendChild(this.canvas);\n  }\n\n  trigger() {\n    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);\n  }\n}\n\nexport class EFFramegen {\n  time = 0;\n  frameDurationMs = 0;\n  audioBufferPromise?: Promise<AudioBuffer>;\n  renderOptions?: VideoRenderOptions;\n  frameBox = document.createElement(\"div\");\n  BRIDGE: typeof window.FRAMEGEN_BRIDGE;\n  triggerCanvas = new TriggerCanvas();\n  verificationCanvas?: HTMLCanvasElement;\n  verificationCtx?: CanvasRenderingContext2D;\n  private logSequence = 0;\n\n  // Frame sequence coordination\n  public frameTasksInProgress = false;\n  public currentFrameNumber = 0;\n\n  trace(...args: any[]) {\n    console.trace(\"[EF_FRAMEGEN]\", ...args);\n  }\n\n  async syncLog(...args: any[]): Promise<void> {\n    if (!this.BRIDGE) {\n      // Fallback to regular console.log if no bridge\n      console.log(\"[EF_FRAMEGEN]\", ...args);\n      return;\n    }\n\n    const sequence = ++this.logSequence;\n    const message = args\n      .map((arg) =>\n        typeof arg === \"object\" ? JSON.stringify(arg) : String(arg),\n      )\n      .join(\" \");\n\n    return new Promise<void>((resolve) => {\n      // biome-ignore lint/style/noNonNullAssertion: We know BRIDGE is set due to the guard above\n      this.BRIDGE!.syncLog(sequence, message, () => {\n        resolve();\n      });\n    });\n  }\n\n  private initializeVerificationCanvas() {\n    if (this.verificationCanvas) {\n      return;\n    }\n\n    this.verificationCanvas = document.createElement(\"canvas\");\n    const ctx = this.verificationCanvas.getContext(\"2d\");\n    if (!ctx) throw new Error(\"Verification canvas 2d context not ready\");\n    this.verificationCtx = ctx;\n\n    // Size to match the workbench width, 1 pixel height for verification strip\n    const workbench = document.querySelector(\"ef-workbench\") as HTMLElement;\n    if (workbench) {\n      this.verificationCanvas.width = workbench.clientWidth;\n      this.verificationCanvas.height = 1;\n\n      // Position at the bottom of the workbench (beyond content height)\n      Object.assign(this.verificationCanvas.style, {\n        position: \"fixed\",\n        left: \"0px\",\n        bottom: \"0px\",\n        width: `${workbench.clientWidth}px`,\n        height: \"1px\",\n        zIndex: \"99999\", // Above trigger canvas\n      });\n\n      document.body.appendChild(this.verificationCanvas);\n    }\n  }\n\n  private drawVerificationStrip(frameNumber: number) {\n    this.initializeVerificationCanvas();\n\n    if (!this.verificationCanvas || !this.verificationCtx) {\n      return;\n    }\n\n    const width = this.verificationCanvas.width;\n    const height = this.verificationCanvas.height;\n\n    // Clear the strip\n    this.verificationCtx.clearRect(0, 0, width, height);\n\n    // Encode frame number into RGB (24-bit)\n    // R=high byte, G=middle byte, B=low byte\n    const red = Math.floor(frameNumber / (256 * 256)) % 256;\n    const green = Math.floor(frameNumber / 256) % 256;\n    const blue = frameNumber % 256;\n\n    // Fill the entire strip with the encoded frame number\n    this.verificationCtx.fillStyle = `rgb(${red}, ${green}, ${blue})`;\n    this.verificationCtx.fillRect(0, 0, width, height);\n  }\n\n  constructor() {\n    this.BRIDGE = window.FRAMEGEN_BRIDGE;\n    if (this.BRIDGE) {\n      this.connectToBridge();\n    }\n  }\n\n  /**\n   * Helper method to get the workbench and set its rendering state.\n   * This ensures consistent state management across the framegen lifecycle.\n   */\n  private setWorkbenchRendering(isRendering: boolean) {\n    const workbench = document.querySelector(\"ef-workbench\");\n    if (workbench) {\n      workbench.rendering = isRendering;\n    }\n  }\n\n  connectToBridge() {\n    const BRIDGE = this.BRIDGE;\n    if (!BRIDGE) {\n      throw new Error(\"No BRIDGE when attempting to connect to bridge\");\n    }\n\n    BRIDGE.onInitialize(async (renderOptions, traceContext, otelEndpoint) => {\n      // Only enable tracing if explicitly requested in renderOptions\n      if (renderOptions.enableTracing && otelEndpoint) {\n        enableTracing();\n        await setupBrowserTracing({\n          otelEndpoint,\n          serviceName: \"telecine-browser\",\n          bridge: BRIDGE,\n          useBatching: true, // Batch spans to reduce overhead during rendering\n        });\n      }\n\n      const parentContext = extractParentContext(traceContext);\n\n      await withSpan(\n        \"browser.initialize\",\n        {\n          width: renderOptions.encoderOptions.video.width,\n          height: renderOptions.encoderOptions.video.height,\n          fps: renderOptions.encoderOptions.video.framerate,\n          durationMs:\n            renderOptions.encoderOptions.toMs -\n            renderOptions.encoderOptions.fromMs,\n        },\n        parentContext,\n        async () => {\n          try {\n            await this.initialize(renderOptions);\n          } catch (error) {\n            // If initialization fails, ensure rendering state is cleared\n            this.setWorkbenchRendering(false);\n            console.error(\n              \"[EF_FRAMEGEN.connectToBridge] error initializing\",\n              error,\n            );\n            throw error;\n          }\n        },\n      );\n\n      BRIDGE.initialized();\n    });\n\n    BRIDGE.onBeginFrame((frameNumber, isLast, traceContext) => {\n      const parentContext = extractParentContext(traceContext);\n      withSpanAndContext(\n        \"browser.frame.render\",\n        {\n          frameNumber,\n          isLast,\n        },\n        parentContext,\n        async (span, _spanContext) => {\n          // Store the span itself for child operations\n          // This allows spans created in Lit Tasks to use it as their parent\n          setCurrentFrameSpan(span);\n\n          try {\n            await this.beginFrame(frameNumber, isLast);\n          } catch (error) {\n            // If an error occurs during rendering, ensure rendering state is cleared\n            this.setWorkbenchRendering(false);\n            throw error;\n          } finally {\n            clearCurrentFrameSpan();\n          }\n        },\n      ).catch((error) => {\n        console.error(\"[EF_FRAMEGEN.beginFrame] error:\", error);\n        // Ensure rendering state is cleared on error\n        this.setWorkbenchRendering(false);\n        clearCurrentFrameSpan();\n        throw error;\n      });\n    });\n\n    BRIDGE.onTriggerCanvas((traceContext) => {\n      const parentContext = extractParentContext(traceContext);\n\n      withSpan(\"browser.canvas.trigger\", {}, parentContext, async () => {\n        this.triggerCanvas.trigger();\n      }).catch((error) => {\n        console.error(\"[EF_FRAMEGEN.triggerCanvas] error:\", error);\n      });\n    });\n  }\n\n  get showFrameBox() {\n    return this.renderOptions?.showFrameBox ?? false;\n  }\n\n  async initialize(renderOptions: VideoRenderOptions) {\n    this.renderOptions = renderOptions;\n\n    const workbench = document.querySelector(\"ef-workbench\");\n    if (!workbench) {\n      throw new Error(\"No workbench found\");\n    }\n    this.setWorkbenchRendering(true);\n    workbench.playing = false;\n    const timegroups = shallowGetTimegroups(workbench);\n    const firstGroup = timegroups[0];\n    if (!firstGroup) {\n      throw new Error(\"No temporal elements found\");\n    }\n    const startingTimeMs = renderOptions.encoderOptions.fromMs;\n    await firstGroup.waitForMediaDurations();\n    // Use FrameController for centralized frame rendering\n    await firstGroup.frameController.renderFrame(startingTimeMs, {\n      onAnimationsUpdate: (root) => updateAnimations(root as typeof firstGroup),\n    });\n\n    this.frameDurationMs = 1000 / renderOptions.encoderOptions.video.framerate;\n\n    this.time = startingTimeMs;\n    if (this.showFrameBox) {\n      Object.assign(this.frameBox.style, {\n        width: \"200px\",\n        height: \"100px\",\n        font: \"10px Arial\",\n        backgroundColor: \"white\",\n        position: \"absolute\",\n        top: \"0px\",\n        right: \"0px\",\n        zIndex: \"100000\",\n      });\n      document.body.prepend(this.frameBox);\n    }\n\n    this.triggerCanvas.initialize();\n\n    // These times are aligned to the audio frame boundaries\n    // And they include padding if any.\n    this.audioBufferPromise = firstGroup.renderAudio(\n      renderOptions.encoderOptions.alignedFromUs / 1000,\n      renderOptions.encoderOptions.alignedToUs / 1000,\n    );\n  }\n\n  async beginFrame(frameNumber: number, isLast: boolean) {\n    if (this.renderOptions === undefined) {\n      throw new Error(\"No renderOptions\");\n    }\n    const workbench = document.querySelector(\"ef-workbench\");\n    if (!workbench) {\n      throw new Error(\"No workbench found\");\n    }\n    this.setWorkbenchRendering(true);\n    const timegroups = shallowGetTimegroups(workbench);\n    const firstGroup = timegroups[0];\n    if (!firstGroup) {\n      throw new Error(\"No temporal elements found\");\n    }\n\n    // Calculate base frame time using normal progression\n    const frameTime =\n      this.renderOptions.encoderOptions.fromMs +\n      frameNumber * this.frameDurationMs;\n    const frameTimeMs = Number(Number(frameTime).toFixed(5));\n    firstGroup.currentTimeMs = frameTimeMs;\n    // Use FrameController for centralized frame rendering\n    await firstGroup.frameController.renderFrame(frameTimeMs, {\n      onAnimationsUpdate: (root) => updateAnimations(root as typeof firstGroup),\n    });\n    if (this.showFrameBox) {\n      this.frameBox.innerHTML = `\n        <div>🖼️   Frame: ${frameNumber}</div>\n        <div>🕛 Segment: ${this.time.toFixed(4)}</div>\n        <div>🕛   Frame: ${firstGroup.currentTimeMs.toFixed(4)}</div>\n        <div>  from-to: ${this.renderOptions.encoderOptions.fromMs.toFixed(4)} - ${this.renderOptions.encoderOptions.toMs.toFixed(4)}</div>\n      `;\n    }\n\n    // Draw verification pixel strip for frame verification\n    this.drawVerificationStrip(frameNumber);\n\n    if (isLast && this.audioBufferPromise) {\n      // Currently we emit the audio in one belch at the end of the render.\n      // This is not ideal, but it's the simplest thing that could possibly work.\n      // We could either emit it slices, or in parallel with the video.\n      // But in any case, it's fine for now.\n      const renderedAudio = await this.audioBufferPromise;\n\n      const channelCount = renderedAudio.numberOfChannels;\n\n      const interleavedSamples = new Float32Array(\n        channelCount * renderedAudio.length,\n      );\n\n      for (let i = 0; i < renderedAudio.length; i++) {\n        for (let j = 0; j < channelCount; j++) {\n          interleavedSamples.set(\n            renderedAudio.getChannelData(j).slice(i, i + 1),\n            i * channelCount + j,\n          );\n        }\n      }\n\n      if (this.BRIDGE) {\n        this.BRIDGE.frameReady(frameNumber, interleavedSamples.buffer);\n      } else {\n        const fileReader = new FileReader();\n        fileReader.readAsDataURL(new Blob([interleavedSamples.buffer]));\n        await new Promise((resolve, reject) => {\n          fileReader.onload = resolve;\n          fileReader.onerror = reject;\n        });\n        return fileReader.result;\n      }\n      \n      // Rendering is complete after the last frame\n      this.setWorkbenchRendering(false);\n    } else {\n      if (this.BRIDGE) {\n        this.BRIDGE.frameReady(frameNumber, new ArrayBuffer(0));\n      } else {\n        const fileReader = new FileReader();\n        fileReader.readAsDataURL(new Blob([]));\n        await new Promise((resolve, reject) => {\n          fileReader.onload = resolve;\n          fileReader.onerror = reject;\n        });\n        return fileReader.result;\n      }\n    }\n  }\n}\n\nif (typeof window !== \"undefined\") {\n  window.EF_FRAMEGEN = new EFFramegen();\n}\n"],"mappings":"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"}
+{"version":3,"file":"EF_FRAMEGEN.js","names":[],"sources":["../src/EF_FRAMEGEN.ts"],"sourcesContent":["import type { VideoRenderOptions } from \"@editframe/assets\";\n\nimport { shallowGetTimegroups } from \"./elements/EFTimegroup.js\";\nimport { setupTemporalHierarchy } from \"./elements/setupTemporalHierarchy.js\";\n\nimport { setupBrowserTracing } from \"./otel/setupBrowserTracing.js\";\nimport {\n  clearCurrentFrameSpan,\n  enableTracing,\n  extractParentContext,\n  setCurrentFrameSpan,\n  type TraceContext,\n  withSpan,\n  withSpanAndContext,\n} from \"./otel/tracingHelpers.js\";\n\ninterface Bridge {\n  onInitialize: (\n    callback: (\n      renderOptions: VideoRenderOptions,\n      traceContext?: TraceContext,\n      otelEndpoint?: string,\n    ) => void,\n  ) => void;\n\n  initialized(): void;\n\n  onBeginFrame(\n    callback: (\n      frameNumber: number,\n      isLast: boolean,\n      traceContext?: TraceContext,\n    ) => void,\n  ): void;\n\n  onTriggerCanvas(callback: (traceContext?: TraceContext) => void): void;\n\n  frameReady(frameNumber: number, audioSamples: ArrayBuffer): void;\n\n  error(error: Error): void;\n\n  syncLog(sequence: number, message: string, callback: () => void): void;\n\n  exportSpans?: (endpoint: string, payload: string) => void;\n}\n\ndeclare global {\n  interface Window {\n    EF_FRAMEGEN?: EFFramegen;\n    FRAMEGEN_BRIDGE?: Bridge;\n    FRAMEGEN_BINDING?: any;\n    FRAMEGEN_BINDING_error?: (error: Error) => void;\n    EF_RENDERING?: () => boolean;\n  }\n}\n\nclass TriggerCanvas {\n  private canvas: HTMLCanvasElement;\n  private ctx: CanvasRenderingContext2D;\n\n  private canvasInitialized = false;\n\n  constructor() {\n    this.canvas = document.createElement(\"canvas\");\n    const ctx = this.canvas.getContext(\"2d\", { willReadFrequently: true });\n    if (!ctx) throw new Error(\"Canvas 2d context not ready\");\n    this.ctx = ctx;\n    this.ctx.fillStyle = \"transparent\";\n  }\n\n  initialize() {\n    if (this.canvasInitialized) return;\n    this.canvasInitialized = true;\n    this.canvas.width = 1;\n    this.canvas.height = 1;\n    Object.assign(this.canvas.style, {\n      position: \"fixed\",\n      top: \"0px\",\n      left: \"0px\",\n      width: \"100%\",\n      height: \"100%\",\n      zIndex: \"100000\",\n    });\n    document.body.appendChild(this.canvas);\n  }\n\n  trigger() {\n    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);\n  }\n}\n\nexport class EFFramegen {\n  time = 0;\n  frameDurationMs = 0;\n  audioBufferPromise?: Promise<AudioBuffer>;\n  renderOptions?: VideoRenderOptions;\n  frameBox = document.createElement(\"div\");\n  BRIDGE: typeof window.FRAMEGEN_BRIDGE;\n  triggerCanvas = new TriggerCanvas();\n  verificationCanvas?: HTMLCanvasElement;\n  verificationCtx?: CanvasRenderingContext2D;\n  private logSequence = 0;\n\n  // Frame sequence coordination\n  public frameTasksInProgress = false;\n  public currentFrameNumber = 0;\n\n  trace(...args: any[]) {\n    console.trace(\"[EF_FRAMEGEN]\", ...args);\n  }\n\n  async syncLog(...args: any[]): Promise<void> {\n    if (!this.BRIDGE) {\n      // Fallback to regular console.log if no bridge\n      console.log(\"[EF_FRAMEGEN]\", ...args);\n      return;\n    }\n\n    const sequence = ++this.logSequence;\n    const message = args\n      .map((arg) =>\n        typeof arg === \"object\" ? JSON.stringify(arg) : String(arg),\n      )\n      .join(\" \");\n\n    return new Promise<void>((resolve) => {\n      // biome-ignore lint/style/noNonNullAssertion: We know BRIDGE is set due to the guard above\n      this.BRIDGE!.syncLog(sequence, message, () => {\n        resolve();\n      });\n    });\n  }\n\n  private initializeVerificationCanvas() {\n    if (this.verificationCanvas) {\n      return;\n    }\n\n    this.verificationCanvas = document.createElement(\"canvas\");\n    const ctx = this.verificationCanvas.getContext(\"2d\");\n    if (!ctx) throw new Error(\"Verification canvas 2d context not ready\");\n    this.verificationCtx = ctx;\n\n    // Size to match the workbench width, or fall back to renderOptions dimensions.\n    // Without ef-workbench (e.g. API renders), the canvas was never sized or appended,\n    // causing frame verification to fail on every frame.\n    const workbench = document.querySelector(\"ef-workbench\") as HTMLElement;\n    const canvasWidth = workbench\n      ? workbench.clientWidth\n      : (this.renderOptions?.encoderOptions.video.width ?? 0);\n\n    if (canvasWidth > 0) {\n      this.verificationCanvas.width = canvasWidth;\n      this.verificationCanvas.height = 1;\n\n      Object.assign(this.verificationCanvas.style, {\n        position: \"fixed\",\n        left: \"0px\",\n        bottom: \"0px\",\n        width: `${canvasWidth}px`,\n        height: \"1px\",\n        zIndex: \"99999\",\n      });\n\n      document.body.appendChild(this.verificationCanvas);\n    }\n  }\n\n  private drawVerificationStrip(frameNumber: number) {\n    this.initializeVerificationCanvas();\n\n    if (!this.verificationCanvas || !this.verificationCtx) {\n      return;\n    }\n\n    const width = this.verificationCanvas.width;\n    const height = this.verificationCanvas.height;\n\n    // Clear the strip\n    this.verificationCtx.clearRect(0, 0, width, height);\n\n    // Encode frame number into RGB (24-bit)\n    // R=high byte, G=middle byte, B=low byte\n    const red = Math.floor(frameNumber / (256 * 256)) % 256;\n    const green = Math.floor(frameNumber / 256) % 256;\n    const blue = frameNumber % 256;\n\n    // Fill the entire strip with the encoded frame number\n    this.verificationCtx.fillStyle = `rgb(${red}, ${green}, ${blue})`;\n    this.verificationCtx.fillRect(0, 0, width, height);\n  }\n\n  constructor() {\n    this.BRIDGE = window.FRAMEGEN_BRIDGE;\n    if (this.BRIDGE) {\n      this.connectToBridge();\n    }\n  }\n\n  /**\n   * Helper method to get the workbench and set its rendering state.\n   * This ensures consistent state management across the framegen lifecycle.\n   */\n  private setWorkbenchRendering(isRendering: boolean) {\n    const workbench = document.querySelector(\"ef-workbench\");\n    if (workbench) {\n      workbench.rendering = isRendering;\n    }\n  }\n\n  connectToBridge() {\n    const BRIDGE = this.BRIDGE;\n    if (!BRIDGE) {\n      throw new Error(\"No BRIDGE when attempting to connect to bridge\");\n    }\n\n    BRIDGE.onInitialize(async (renderOptions, traceContext, otelEndpoint) => {\n      // Only enable tracing if explicitly requested in renderOptions\n      if (renderOptions.enableTracing && otelEndpoint) {\n        enableTracing();\n        await setupBrowserTracing({\n          otelEndpoint,\n          serviceName: \"telecine-browser\",\n          bridge: BRIDGE,\n          useBatching: true, // Batch spans to reduce overhead during rendering\n        });\n      }\n\n      const parentContext = extractParentContext(traceContext);\n\n      await withSpan(\n        \"browser.initialize\",\n        {\n          width: renderOptions.encoderOptions.video.width,\n          height: renderOptions.encoderOptions.video.height,\n          fps: renderOptions.encoderOptions.video.framerate,\n          durationMs:\n            renderOptions.encoderOptions.toMs -\n            renderOptions.encoderOptions.fromMs,\n        },\n        parentContext,\n        async () => {\n          try {\n            await this.initialize(renderOptions);\n          } catch (error) {\n            // If initialization fails, ensure rendering state is cleared\n            this.setWorkbenchRendering(false);\n            console.error(\n              \"[EF_FRAMEGEN.connectToBridge] error initializing\",\n              error,\n            );\n            throw error;\n          }\n        },\n      );\n\n      BRIDGE.initialized();\n    });\n\n    BRIDGE.onBeginFrame((frameNumber, isLast, traceContext) => {\n      const parentContext = extractParentContext(traceContext);\n      withSpanAndContext(\n        \"browser.frame.render\",\n        {\n          frameNumber,\n          isLast,\n        },\n        parentContext,\n        async (span, _spanContext) => {\n          // Store the span itself for child operations\n          // This allows spans created in Lit Tasks to use it as their parent\n          setCurrentFrameSpan(span);\n\n          try {\n            await this.beginFrame(frameNumber, isLast);\n          } catch (error) {\n            // If an error occurs during rendering, ensure rendering state is cleared\n            this.setWorkbenchRendering(false);\n            throw error;\n          } finally {\n            clearCurrentFrameSpan();\n          }\n        },\n      ).catch((error) => {\n        console.error(\"[EF_FRAMEGEN.beginFrame] error:\", error);\n        // Ensure rendering state is cleared on error\n        this.setWorkbenchRendering(false);\n        clearCurrentFrameSpan();\n        throw error;\n      });\n    });\n\n    BRIDGE.onTriggerCanvas((traceContext) => {\n      const parentContext = extractParentContext(traceContext);\n\n      withSpan(\"browser.canvas.trigger\", {}, parentContext, async () => {\n        this.triggerCanvas.trigger();\n      }).catch((error) => {\n        console.error(\"[EF_FRAMEGEN.triggerCanvas] error:\", error);\n      });\n    });\n  }\n\n  get showFrameBox() {\n    return this.renderOptions?.showFrameBox ?? false;\n  }\n\n  async initialize(renderOptions: VideoRenderOptions) {\n    this.renderOptions = renderOptions;\n\n    // Workbench is optional - look for it but don't require it\n    const workbench = document.querySelector(\"ef-workbench\");\n    if (workbench) {\n      this.setWorkbenchRendering(true);\n      workbench.playing = false;\n    }\n\n    // Find timegroups either in workbench or directly in document\n    const searchRoot = workbench || document.body;\n    const timegroups = shallowGetTimegroups(searchRoot);\n    const firstGroup = timegroups[0];\n    if (!firstGroup) {\n      throw new Error(\"No temporal elements found\");\n    }\n    const startingTimeMs = renderOptions.encoderOptions.fromMs;\n    await firstGroup.waitForMediaDurations();\n\n    // CRITICAL: Manually wire up temporal hierarchy since Lit Context fails with our connection order\n    // When loading via loadURL(), elements connect depth-first (children before parents), causing\n    // children to miss the context-request event since parents aren't listening yet.\n    // See setupTemporalHierarchy.ts for detailed explanation.\n    setupTemporalHierarchy(searchRoot, firstGroup);\n\n    // Use seekForRender for proper time seeking during rendering\n    await firstGroup.seekForRender(startingTimeMs);\n\n    this.frameDurationMs = 1000 / renderOptions.encoderOptions.video.framerate;\n\n    this.time = startingTimeMs;\n    if (this.showFrameBox) {\n      Object.assign(this.frameBox.style, {\n        width: \"200px\",\n        height: \"100px\",\n        font: \"10px Arial\",\n        backgroundColor: \"white\",\n        position: \"absolute\",\n        top: \"0px\",\n        right: \"0px\",\n        zIndex: \"100000\",\n      });\n      document.body.prepend(this.frameBox);\n    }\n\n    this.triggerCanvas.initialize();\n\n    // These times are aligned to the audio frame boundaries\n    // And they include padding if any.\n    this.audioBufferPromise = firstGroup.renderAudio(\n      renderOptions.encoderOptions.alignedFromUs / 1000,\n      renderOptions.encoderOptions.alignedToUs / 1000,\n    );\n    // Suppress unhandled rejection while the promise sits in storage before being awaited.\n    this.audioBufferPromise.catch(() => {});\n  }\n\n  async beginFrame(frameNumber: number, isLast: boolean) {\n    if (this.renderOptions === undefined) {\n      throw new Error(\"No renderOptions\");\n    }\n    const workbench = document.querySelector(\"ef-workbench\");\n    if (workbench) {\n      this.setWorkbenchRendering(true);\n    }\n    const searchRoot = workbench || document.body;\n    const timegroups = shallowGetTimegroups(searchRoot);\n    const firstGroup = timegroups[0];\n    if (!firstGroup) {\n      throw new Error(\"No temporal elements found\");\n    }\n\n    // Calculate base frame time using normal progression\n    const frameTime =\n      this.renderOptions.encoderOptions.fromMs +\n      frameNumber * this.frameDurationMs;\n    const frameTimeMs = Number(Number(frameTime).toFixed(5));\n\n    // Use seekForRender for proper time seeking during rendering\n    await firstGroup.seekForRender(frameTimeMs);\n    if (this.showFrameBox) {\n      this.frameBox.innerHTML = `\n        <div>🖼️   Frame: ${frameNumber}</div>\n        <div>🕛 Segment: ${this.time.toFixed(4)}</div>\n        <div>🕛   Frame: ${firstGroup.currentTimeMs.toFixed(4)}</div>\n        <div>  from-to: ${this.renderOptions.encoderOptions.fromMs.toFixed(4)} - ${this.renderOptions.encoderOptions.toMs.toFixed(4)}</div>\n      `;\n    }\n\n    // Draw verification pixel strip for frame verification\n    this.drawVerificationStrip(frameNumber);\n\n    if (isLast && this.audioBufferPromise) {\n      // Currently we emit the audio in one belch at the end of the render.\n      // This is not ideal, but it's the simplest thing that could possibly work.\n      // We could either emit it slices, or in parallel with the video.\n      // But in any case, it's fine for now.\n      const renderedAudio = await this.audioBufferPromise;\n\n      const channelCount = renderedAudio.numberOfChannels;\n\n      const interleavedSamples = new Float32Array(\n        channelCount * renderedAudio.length,\n      );\n\n      for (let i = 0; i < renderedAudio.length; i++) {\n        for (let j = 0; j < channelCount; j++) {\n          interleavedSamples.set(\n            renderedAudio.getChannelData(j).slice(i, i + 1),\n            i * channelCount + j,\n          );\n        }\n      }\n\n      if (this.BRIDGE) {\n        this.BRIDGE.frameReady(frameNumber, interleavedSamples.buffer);\n      } else {\n        const fileReader = new FileReader();\n        fileReader.readAsDataURL(new Blob([interleavedSamples.buffer]));\n        await new Promise((resolve, reject) => {\n          fileReader.onload = resolve;\n          fileReader.onerror = reject;\n        });\n        return fileReader.result;\n      }\n\n      // Rendering is complete after the last frame\n      this.setWorkbenchRendering(false);\n    } else {\n      if (this.BRIDGE) {\n        this.BRIDGE.frameReady(frameNumber, new ArrayBuffer(0));\n      } else {\n        const fileReader = new FileReader();\n        fileReader.readAsDataURL(new Blob([]));\n        await new Promise((resolve, reject) => {\n          fileReader.onload = resolve;\n          fileReader.onerror = reject;\n        });\n        return fileReader.result;\n      }\n    }\n  }\n}\n\nif (typeof window !== \"undefined\") {\n  window.EF_FRAMEGEN = new EFFramegen();\n}\n"],"mappings":"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"}

package/dist/EF_RENDERING.js.map

@@ -1 +1 @@
-{"version":3,"file":"EF_RENDERING.js","names":[],"sources":["../src/EF_RENDERING.ts"],"sourcesContent":["export const EF_RENDERING = () =>\n  typeof window !== \"undefined\" && \"FRAMEGEN_BRIDGE\" in window;\n"],"mappings":";AAAA,MAAa,qBACX,OAAO,WAAW,eAAe,qBAAqB"}
+{"version":3,"file":"EF_RENDERING.js","names":[],"sources":["../src/EF_RENDERING.ts"],"sourcesContent":["export const EF_RENDERING = () =>\n  typeof window !== \"undefined\" && \"FRAMEGEN_BRIDGE\" in window;\n\nexport const EF_NO_WORKBENCH = () => {\n  if (typeof window === \"undefined\") return false;\n  const params = new URLSearchParams(window.location.search);\n  return (\n    params.get(\"noWorkbench\") === \"true\" ||\n    params.get(\"no-workbench\") === \"true\"\n  );\n};\n"],"mappings":";AAAA,MAAa,qBACX,OAAO,WAAW,eAAe,qBAAqB"}

package/dist/canvas/EFCanvas.d.ts

@@ -5,7 +5,7 @@ import { PanZoomTransform } from "../elements/EFPanZoom.js";
 import "./overlays/SelectionOverlay.js";
 import "../gui/EFOverlayLayer.js";
 import "../gui/EFTransformHandles.js";
-import * as lit29 from "lit";
+import * as lit30 from "lit";
 import { LitElement } from "lit";
 import * as lit_html28 from "lit-html";
 
@@ -87,10 +87,16 @@ declare const EFCanvas_base: typeof LitElement;
  * Manages existing elements (EF* elements, divs, etc.) and provides selection functionality.
  */
 declare class EFCanvas extends EFCanvas_base {
-  static styles: lit29.CSSResult[];
+  static styles: lit30.CSSResult[];
   panZoomTransform?: PanZoomTransform;
   elementIdAttribute: string;
   enableTransformHandles: boolean;
+  /**
+   * When true, the overlay RAF loop skips all layout-thrashing work
+   * (transform handles, metadata updates). Used during playback to
+   * avoid competing with the canvas render pipeline for CPU time.
+   */
+  paused: boolean;
   private elementRegistry;
   private elementMetadata;
   private selectionController;
@@ -262,6 +268,7 @@ declare class EFCanvas extends EFCanvas_base {
   /**
    * Start RAF loop for overlay layer sync and transform handles updates.
    */
+  private wasPaused;
   private startOverlayRafLoop;
   /**
    * Stop RAF loop.

package/dist/canvas/EFCanvas.js

@@ -1,5 +1,5 @@
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
 import { TWMixin } from "../gui/TWMixin2.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
 import { EFTargetable } from "../elements/TargetController.js";
 import { panZoomTransformContext } from "../gui/panZoomTransformContext.js";
 import { SelectionController } from "./selection/SelectionController.js";
@@ -36,6 +36,7 @@ let EFCanvas = class EFCanvas$1 extends EFTargetable(TWMixin(LitElement)) {
 		super();
 		this.elementIdAttribute = "data-element-id";
 		this.enableTransformHandles = true;
+		this.paused = false;
 		this.elementRegistry = /* @__PURE__ */ new Map();
 		this.elementMetadata = /* @__PURE__ */ new Map();
 		this.overlayLayer = null;
@@ -217,6 +218,7 @@ let EFCanvas = class EFCanvas$1 extends EFTargetable(TWMixin(LitElement)) {
 				this.emptySpaceClickPos = null;
 			}
 		};
+		this.wasPaused = false;
 		this.lastMultiSelectionRotation = null;
 		this.multiSelectionRotationCenter = null;
 		this.multiSelectionResizeInitial = null;
@@ -638,12 +640,19 @@ let EFCanvas = class EFCanvas$1 extends EFTargetable(TWMixin(LitElement)) {
 			this.selectionOverlay = null;
 		}
 	}
-	/**
-	* Start RAF loop for overlay layer sync and transform handles updates.
-	*/
 	startOverlayRafLoop() {
 		if (this.overlayRafId !== null) return;
 		const update = () => {
+			if (this.paused) {
+				this.wasPaused = true;
+				this.overlayRafId = requestAnimationFrame(update);
+				return;
+			}
+			if (this.wasPaused) {
+				this.wasPaused = false;
+				const selectedIds = Array.from(this.selectionController.getModel().selectedIds);
+				for (const id of selectedIds) this.updateElementMetadata(id);
+			}
 			if (this.overlayLayer && this.panZoomTransform) this.overlayLayer.panZoomTransform = this.panZoomTransform;
 			if (this.enableTransformHandles) this.updateTransformHandles();
 			this.overlayRafId = requestAnimationFrame(update);
@@ -1077,6 +1086,7 @@ __decorate([property({
 	type: Boolean,
 	attribute: "enable-transform-handles"
 })], EFCanvas.prototype, "enableTransformHandles", void 0);
+__decorate([property({ type: Boolean })], EFCanvas.prototype, "paused", void 0);
 __decorate([state()], EFCanvas.prototype, "elementRegistry", void 0);
 __decorate([state()], EFCanvas.prototype, "elementMetadata", void 0);
 __decorate([state()], EFCanvas.prototype, "_activeRootTemporal", void 0);