@editframe/elements 0.33.0-beta → 0.34.6-beta

package/dist/EF_FRAMEGEN.js

@@ -1,3 +1,4 @@
+import { updateAnimations } from "./elements/updateAnimations.js";
 import { clearCurrentFrameSpan, enableTracing, extractParentContext, setCurrentFrameSpan, withSpan, withSpanAndContext } from "./otel/tracingHelpers.js";
 import { shallowGetTimegroups } from "./elements/EFTimegroup.js";
 import { setupBrowserTracing } from "./otel/setupBrowserTracing.js";
@@ -173,7 +174,7 @@ var EFFramegen = class {
 		if (!firstGroup) throw new Error("No temporal elements found");
 		const startingTimeMs = renderOptions.encoderOptions.fromMs;
 		await firstGroup.waitForMediaDurations();
-		await firstGroup.waitForFrameTasks();
+		await firstGroup.frameController.renderFrame(startingTimeMs, { onAnimationsUpdate: (root) => updateAnimations(root) });
 		this.frameDurationMs = 1e3 / renderOptions.encoderOptions.video.framerate;
 		this.time = startingTimeMs;
 		if (this.showFrameBox) {
@@ -200,8 +201,9 @@ var EFFramegen = class {
 		const firstGroup = shallowGetTimegroups(workbench)[0];
 		if (!firstGroup) throw new Error("No temporal elements found");
 		const frameTime = this.renderOptions.encoderOptions.fromMs + frameNumber * this.frameDurationMs;
-		firstGroup.currentTimeMs = Number(Number(frameTime).toFixed(5));
-		await firstGroup.waitForFrameTasks();
+		const frameTimeMs = Number(Number(frameTime).toFixed(5));
+		firstGroup.currentTimeMs = frameTimeMs;
+		await firstGroup.frameController.renderFrame(frameTimeMs, { onAnimationsUpdate: (root) => updateAnimations(root) });
 		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 { 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    await firstGroup.waitForFrameTasks();\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    firstGroup.currentTimeMs = Number(Number(frameTime).toFixed(5));\n    await firstGroup.waitForFrameTasks();\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 { 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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"}

package/dist/_virtual/{_@oxc-project_runtime@0.94.0 → _@oxc-project_runtime@0.95.0}/helpers/decorate.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.94.0/helpers/decorate.js
+//#region \0@oxc-project+runtime@0.95.0/helpers/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);

package/dist/canvas/EFCanvas.d.ts

@@ -2,9 +2,12 @@ import { TemporalMixinInterface } from "../elements/EFTemporal.js";
 import { CanvasElementData } from "./api/types.js";
 import { SelectionContext } from "./selection/selectionContext.js";
 import { PanZoomTransform } from "../elements/EFPanZoom.js";
-import * as lit33 from "lit";
+import "./overlays/SelectionOverlay.js";
+import "../gui/EFOverlayLayer.js";
+import "../gui/EFTransformHandles.js";
+import * as lit29 from "lit";
 import { LitElement } from "lit";
-import * as lit_html32 from "lit-html";
+import * as lit_html28 from "lit-html";
 
 //#region src/canvas/EFCanvas.d.ts
 declare const EFCanvas_base: typeof LitElement;
@@ -84,7 +87,7 @@ 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: lit33.CSSResult[];
+  static styles: lit29.CSSResult[];
   panZoomTransform?: PanZoomTransform;
   elementIdAttribute: string;
   enableTransformHandles: boolean;
@@ -299,7 +302,7 @@ declare class EFCanvas extends EFCanvas_base {
    * Cleanup transform handles.
    */
   private cleanupTransformHandles;
-  render(): lit_html32.TemplateResult<1>;
+  render(): lit_html28.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/canvas/EFCanvas.js

@@ -1,4 +1,4 @@
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
 import { TWMixin } from "../gui/TWMixin2.js";
 import { EFTargetable } from "../elements/TargetController.js";
 import { panZoomTransformContext } from "../gui/panZoomTransformContext.js";

package/dist/canvas/EFCanvasItem.d.ts

@@ -1,6 +1,6 @@
-import * as lit34 from "lit";
+import * as lit30 from "lit";
 import { LitElement } from "lit";
-import * as lit_html33 from "lit-html";
+import * as lit_html29 from "lit-html";
 
 //#region src/canvas/EFCanvasItem.d.ts
 
@@ -28,7 +28,7 @@ import * as lit_html33 from "lit-html";
  * ```
  */
 declare class EFCanvasItem extends LitElement {
-  static styles: lit34.CSSResult;
+  static styles: lit30.CSSResult;
   id: string;
   private canvas;
   private api;
@@ -43,7 +43,7 @@ declare class EFCanvasItem extends LitElement {
    * Unregister this element from the canvas.
    */
   private unregister;
-  render(): lit_html33.TemplateResult<1>;
+  render(): lit_html29.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/canvas/EFCanvasItem.js

@@ -1,4 +1,4 @@
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
 import { CanvasAPI } from "./api/CanvasAPI.js";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";

package/dist/canvas/overlays/SelectionOverlay.d.ts

@@ -0,0 +1,95 @@
+import { SelectionContext } from "../selection/selectionContext.js";
+import { PanZoomTransform } from "../../elements/EFPanZoom.js";
+import * as lit37 from "lit";
+import { LitElement } from "lit";
+import * as lit_html34 from "lit-html";
+
+//#region src/canvas/overlays/SelectionOverlay.d.ts
+/**
+ * Selection overlay that renders unscaled selection indicators.
+ * Uses fixed positioning to ensure 1:1 pixel ratio regardless of zoom level.
+ */
+declare class SelectionOverlay extends LitElement {
+  static styles: lit37.CSSResult[];
+  createRenderRoot(): this;
+  firstUpdated(changedProperties: Map<string | number | symbol, unknown>): void;
+  selectionFromContext?: SelectionContext;
+  panZoomTransformFromContext?: PanZoomTransform;
+  /**
+   * Selection context as fallback for when overlay is outside context providers (e.g., sibling of pan-zoom).
+   */
+  selection?: SelectionContext;
+  /**
+   * Pan/zoom transform as fallback for when overlay is outside context providers (e.g., sibling of pan-zoom).
+   */
+  panZoomTransform?: PanZoomTransform;
+  private canvasElement;
+  /**
+   * Canvas element property - can be set directly when overlay is outside context providers.
+   */
+  canvas?: HTMLElement;
+  /**
+   * Complete overlay state - calculated from targets using the abstraction layer.
+   * This is the SINGLE source of truth for overlay bounds.
+   */
+  private overlayState;
+  private lastSelectionMode;
+  private animationFrame?;
+  private rafLoopActive;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  /**
+   * React to selection context changes to ensure box selection visual updates.
+   * This is called whenever Lit detects a property change, including context updates.
+   * Note: We don't call requestUpdate() here to avoid the Lit warning about scheduling
+   * updates after an update completes. The RAF loop handles all updates.
+   */
+  updated(changedProperties: Map<string | number | symbol, unknown>): void;
+  /**
+   * Find the EFCanvas element.
+   * Handles both cases:
+   * 1. Overlay is inside EFCanvas's shadow DOM (old case)
+   * 2. Overlay is a sibling of ef-pan-zoom (new case - outside transform)
+   */
+  private findCanvasElement;
+  /**
+   * Start continuous RAF loop for smooth overlay updates.
+   */
+  private startRafLoop;
+  /**
+   * Stop RAF loop.
+   */
+  private stopRafLoop;
+  /**
+   * Continuous RAF loop to update overlays every frame using Lit render cycle.
+   */
+  private rafLoop;
+  /**
+   * Get the effective selection context (from context or property).
+   */
+  private get effectiveSelection();
+  /**
+   * Get the effective pan-zoom transform (from context or property).
+   */
+  private get effectivePanZoomTransform();
+  /**
+   * Update overlay data state using the abstraction layer.
+   *
+   * This method now uses the clean separation of:
+   * - SEMANTICS: getOverlayTargets() determines WHAT should be shown
+   * - MECHANISM: calculateOverlayState() determines HOW to show it
+   */
+  private updateOverlayData;
+  /**
+   * Read current transform directly from panzoom element.
+   * This ensures we always have fresh values instead of stale property/context.
+   */
+  private readCurrentTransform;
+  render(): lit_html34.TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-canvas-selection-overlay": SelectionOverlay;
+  }
+}
+//# sourceMappingURL=SelectionOverlay.d.ts.map

package/dist/canvas/overlays/SelectionOverlay.js

@@ -1,4 +1,4 @@
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
 import { panZoomTransformContext } from "../../gui/panZoomTransformContext.js";
 import { selectionContext } from "../selection/selectionContext.js";
 import { calculateOverlayState, getOverlayTargets } from "./overlayState.js";

package/dist/canvas/selection/SelectionController.js

@@ -35,16 +35,7 @@ var SelectionController = class {
 	*/
 	createContextProxy() {
 		const controller = this;
-		return {
-			get selectedIds() {
-				return controller.selectionModel.selectedIds;
-			},
-			get selectionMode() {
-				return controller.selectionModel.selectionMode;
-			},
-			get boxSelectBounds() {
-				return controller.selectionModel.boxSelectBounds;
-			},
+		return new Proxy({
 			select: (id) => {
 				controller.selectionModel.select(id);
 			},
@@ -96,7 +87,12 @@ var SelectionController = class {
 			removeEventListener: (type, listener) => {
 				controller.selectionModel.removeEventListener(type, listener);
 			}
-		};
+		}, { get(target, prop) {
+			if (prop === "selectedIds") return controller.selectionModel.selectedIds;
+			if (prop === "selectionMode") return controller.selectionModel.selectionMode;
+			if (prop === "boxSelectBounds") return controller.selectionModel.boxSelectBounds;
+			return target[prop];
+		} });
 	}
 };
 

package/dist/canvas/selection/SelectionController.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionController.js","names":[],"sources":["../../../src/canvas/selection/SelectionController.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from \"lit\";\nimport { SelectionModel } from \"./SelectionModel.js\";\nimport type { SelectionContext } from \"./selectionContext.js\";\n\n/**\n * Reactive controller that bridges SelectionModel and Lit element lifecycle.\n * Provides selection context to child elements.\n */\nexport class SelectionController implements ReactiveController {\n  private host: ReactiveControllerHost;\n  private selectionModel: SelectionModel;\n  private hitTestFn: ((bounds: DOMRect) => string[]) | null = null;\n  selectionContext: SelectionContext;\n\n  constructor(host: ReactiveControllerHost) {\n    this.host = host;\n    this.selectionModel = new SelectionModel();\n    this.selectionContext = this.createContextProxy();\n    host.addController(this);\n\n    // Listen to selection change events from the model\n    // Use queueMicrotask to defer the update and avoid Lit warning about\n    // scheduling updates after update completed (change-in-update)\n    this.selectionModel.addEventListener(\"selectionchange\", () => {\n      queueMicrotask(() => this.host.requestUpdate());\n    });\n  }\n\n  hostConnected(): void {\n    // Context is provided via @provide decorator\n  }\n\n  hostDisconnected(): void {\n    // Cleanup if needed\n  }\n\n  /**\n   * Set the hit test function for box selection.\n   */\n  setHitTest(fn: (bounds: DOMRect) => string[]): void {\n    this.hitTestFn = fn;\n  }\n\n  /**\n   * Get the underlying selection model.\n   */\n  getModel(): SelectionModel {\n    return this.selectionModel;\n  }\n\n  /**\n   * Create a proxy context that delegates to the selection model.\n   */\n  private createContextProxy(): SelectionContext {\n    const controller = this;\n    return {\n      get selectedIds() {\n        return controller.selectionModel.selectedIds;\n      },\n      get selectionMode() {\n        return controller.selectionModel.selectionMode;\n      },\n      get boxSelectBounds() {\n        return controller.selectionModel.boxSelectBounds;\n      },\n      select: (id: string) => {\n        controller.selectionModel.select(id);\n        // Event will trigger requestUpdate via event listener\n      },\n      selectMultiple: (ids: string[]) => {\n        controller.selectionModel.selectMultiple(ids);\n        // Event will trigger requestUpdate via event listener\n      },\n      addToSelection: (id: string) => {\n        controller.selectionModel.addToSelection(id);\n        // Event will trigger requestUpdate via event listener\n      },\n      deselect: (id: string) => {\n        controller.selectionModel.deselect(id);\n        // Event will trigger requestUpdate via event listener\n      },\n      toggle: (id: string) => {\n        controller.selectionModel.toggle(id);\n        // Event will trigger requestUpdate via event listener\n      },\n      clear: () => {\n        controller.selectionModel.clear();\n        // Event will trigger requestUpdate via event listener\n      },\n      startBoxSelect: (x: number, y: number) => {\n        controller.selectionModel.startBoxSelect(x, y);\n        queueMicrotask(() => controller.host.requestUpdate());\n      },\n      updateBoxSelect: (x: number, y: number) => {\n        controller.selectionModel.updateBoxSelect(x, y);\n        queueMicrotask(() => controller.host.requestUpdate());\n      },\n      endBoxSelect: (\n        hitTest: (bounds: DOMRect) => string[],\n        addToSelection?: boolean,\n      ) => {\n        const fn = hitTest || controller.hitTestFn;\n        if (fn) {\n          controller.selectionModel.endBoxSelect(fn, addToSelection ?? false);\n        }\n        // Event will trigger requestUpdate via event listener\n      },\n      createGroup: (ids: string[]) => {\n        const groupId = controller.selectionModel.createGroup(ids);\n        return groupId;\n      },\n      ungroup: (groupId: string) => {\n        controller.selectionModel.ungroup(groupId);\n      },\n      selectGroup: (groupId: string) => {\n        controller.selectionModel.selectGroup(groupId);\n        // Event will trigger requestUpdate via event listener\n      },\n      getGroupId: (elementId: string) => {\n        return controller.selectionModel.getGroupId(elementId);\n      },\n      getGroupElements: (groupId: string) => {\n        return controller.selectionModel.getGroupElements(groupId);\n      },\n      addEventListener: (\n        type: \"selectionchange\",\n        listener: (event: CustomEvent) => void,\n      ) => {\n        controller.selectionModel.addEventListener(type, listener as EventListener);\n      },\n      removeEventListener: (\n        type: \"selectionchange\",\n        listener: (event: CustomEvent) => void,\n      ) => {\n        controller.selectionModel.removeEventListener(type, listener as EventListener);\n      },\n    };\n  }\n}\n"],"mappings":";;;;;;;AAQA,IAAa,sBAAb,MAA+D;CAM7D,YAAY,MAA8B;mBAHkB;AAI1D,OAAK,OAAO;AACZ,OAAK,iBAAiB,IAAI,gBAAgB;AAC1C,OAAK,mBAAmB,KAAK,oBAAoB;AACjD,OAAK,cAAc,KAAK;AAKxB,OAAK,eAAe,iBAAiB,yBAAyB;AAC5D,wBAAqB,KAAK,KAAK,eAAe,CAAC;IAC/C;;CAGJ,gBAAsB;CAItB,mBAAyB;;;;CAOzB,WAAW,IAAyC;AAClD,OAAK,YAAY;;;;;CAMnB,WAA2B;AACzB,SAAO,KAAK;;;;;CAMd,AAAQ,qBAAuC;EAC7C,MAAM,aAAa;AACnB,SAAO;GACL,IAAI,cAAc;AAChB,WAAO,WAAW,eAAe;;GAEnC,IAAI,gBAAgB;AAClB,WAAO,WAAW,eAAe;;GAEnC,IAAI,kBAAkB;AACpB,WAAO,WAAW,eAAe;;GAEnC,SAAS,OAAe;AACtB,eAAW,eAAe,OAAO,GAAG;;GAGtC,iBAAiB,QAAkB;AACjC,eAAW,eAAe,eAAe,IAAI;;GAG/C,iBAAiB,OAAe;AAC9B,eAAW,eAAe,eAAe,GAAG;;GAG9C,WAAW,OAAe;AACxB,eAAW,eAAe,SAAS,GAAG;;GAGxC,SAAS,OAAe;AACtB,eAAW,eAAe,OAAO,GAAG;;GAGtC,aAAa;AACX,eAAW,eAAe,OAAO;;GAGnC,iBAAiB,GAAW,MAAc;AACxC,eAAW,eAAe,eAAe,GAAG,EAAE;AAC9C,yBAAqB,WAAW,KAAK,eAAe,CAAC;;GAEvD,kBAAkB,GAAW,MAAc;AACzC,eAAW,eAAe,gBAAgB,GAAG,EAAE;AAC/C,yBAAqB,WAAW,KAAK,eAAe,CAAC;;GAEvD,eACE,SACA,mBACG;IACH,MAAM,KAAK,WAAW,WAAW;AACjC,QAAI,GACF,YAAW,eAAe,aAAa,IAAI,kBAAkB,MAAM;;GAIvE,cAAc,QAAkB;AAE9B,WADgB,WAAW,eAAe,YAAY,IAAI;;GAG5D,UAAU,YAAoB;AAC5B,eAAW,eAAe,QAAQ,QAAQ;;GAE5C,cAAc,YAAoB;AAChC,eAAW,eAAe,YAAY,QAAQ;;GAGhD,aAAa,cAAsB;AACjC,WAAO,WAAW,eAAe,WAAW,UAAU;;GAExD,mBAAmB,YAAoB;AACrC,WAAO,WAAW,eAAe,iBAAiB,QAAQ;;GAE5D,mBACE,MACA,aACG;AACH,eAAW,eAAe,iBAAiB,MAAM,SAA0B;;GAE7E,sBACE,MACA,aACG;AACH,eAAW,eAAe,oBAAoB,MAAM,SAA0B;;GAEjF"}
+{"version":3,"file":"SelectionController.js","names":[],"sources":["../../../src/canvas/selection/SelectionController.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from \"lit\";\nimport { SelectionModel } from \"./SelectionModel.js\";\nimport type { SelectionContext } from \"./selectionContext.js\";\n\n/**\n * Reactive controller that bridges SelectionModel and Lit element lifecycle.\n * Provides selection context to child elements.\n */\nexport class SelectionController implements ReactiveController {\n  private host: ReactiveControllerHost;\n  private selectionModel: SelectionModel;\n  private hitTestFn: ((bounds: DOMRect) => string[]) | null = null;\n  selectionContext: SelectionContext;\n\n  constructor(host: ReactiveControllerHost) {\n    this.host = host;\n    this.selectionModel = new SelectionModel();\n    this.selectionContext = this.createContextProxy();\n    host.addController(this);\n\n    // Listen to selection change events from the model\n    // Use queueMicrotask to defer the update and avoid Lit warning about\n    // scheduling updates after update completed (change-in-update)\n    this.selectionModel.addEventListener(\"selectionchange\", () => {\n      queueMicrotask(() => this.host.requestUpdate());\n    });\n  }\n\n  hostConnected(): void {\n    // Context is provided via @provide decorator\n  }\n\n  hostDisconnected(): void {\n    // Cleanup if needed\n  }\n\n  /**\n   * Set the hit test function for box selection.\n   */\n  setHitTest(fn: (bounds: DOMRect) => string[]): void {\n    this.hitTestFn = fn;\n  }\n\n  /**\n   * Get the underlying selection model.\n   */\n  getModel(): SelectionModel {\n    return this.selectionModel;\n  }\n\n  /**\n   * Create a proxy context that delegates to the selection model.\n   */\n  private createContextProxy(): SelectionContext {\n    const controller = this;\n    return new Proxy({\n      select: (id: string) => {\n        controller.selectionModel.select(id);\n        // Event will trigger requestUpdate via event listener\n      },\n      selectMultiple: (ids: string[]) => {\n        controller.selectionModel.selectMultiple(ids);\n        // Event will trigger requestUpdate via event listener\n      },\n      addToSelection: (id: string) => {\n        controller.selectionModel.addToSelection(id);\n        // Event will trigger requestUpdate via event listener\n      },\n      deselect: (id: string) => {\n        controller.selectionModel.deselect(id);\n        // Event will trigger requestUpdate via event listener\n      },\n      toggle: (id: string) => {\n        controller.selectionModel.toggle(id);\n        // Event will trigger requestUpdate via event listener\n      },\n      clear: () => {\n        controller.selectionModel.clear();\n        // Event will trigger requestUpdate via event listener\n      },\n      startBoxSelect: (x: number, y: number) => {\n        controller.selectionModel.startBoxSelect(x, y);\n        queueMicrotask(() => controller.host.requestUpdate());\n      },\n      updateBoxSelect: (x: number, y: number) => {\n        controller.selectionModel.updateBoxSelect(x, y);\n        queueMicrotask(() => controller.host.requestUpdate());\n      },\n      endBoxSelect: (\n        hitTest: (bounds: DOMRect) => string[],\n        addToSelection?: boolean,\n      ) => {\n        const fn = hitTest || controller.hitTestFn;\n        if (fn) {\n          controller.selectionModel.endBoxSelect(fn, addToSelection ?? false);\n        }\n        // Event will trigger requestUpdate via event listener\n      },\n      createGroup: (ids: string[]) => {\n        const groupId = controller.selectionModel.createGroup(ids);\n        return groupId;\n      },\n      ungroup: (groupId: string) => {\n        controller.selectionModel.ungroup(groupId);\n      },\n      selectGroup: (groupId: string) => {\n        controller.selectionModel.selectGroup(groupId);\n        // Event will trigger requestUpdate via event listener\n      },\n      getGroupId: (elementId: string) => {\n        return controller.selectionModel.getGroupId(elementId);\n      },\n      getGroupElements: (groupId: string) => {\n        return controller.selectionModel.getGroupElements(groupId);\n      },\n      addEventListener: (\n        type: \"selectionchange\",\n        listener: (event: CustomEvent) => void,\n      ) => {\n        controller.selectionModel.addEventListener(type, listener as EventListener);\n      },\n      removeEventListener: (\n        type: \"selectionchange\",\n        listener: (event: CustomEvent) => void,\n      ) => {\n        controller.selectionModel.removeEventListener(type, listener as EventListener);\n      },\n    } as Omit<SelectionContext, 'selectedIds' | 'selectionMode' | 'boxSelectBounds'>, {\n      get(target, prop) {\n        if (prop === 'selectedIds') {\n          return controller.selectionModel.selectedIds;\n        }\n        if (prop === 'selectionMode') {\n          return controller.selectionModel.selectionMode;\n        }\n        if (prop === 'boxSelectBounds') {\n          return controller.selectionModel.boxSelectBounds;\n        }\n        return (target as any)[prop];\n      },\n    }) as SelectionContext;\n  }\n}\n"],"mappings":";;;;;;;AAQA,IAAa,sBAAb,MAA+D;CAM7D,YAAY,MAA8B;mBAHkB;AAI1D,OAAK,OAAO;AACZ,OAAK,iBAAiB,IAAI,gBAAgB;AAC1C,OAAK,mBAAmB,KAAK,oBAAoB;AACjD,OAAK,cAAc,KAAK;AAKxB,OAAK,eAAe,iBAAiB,yBAAyB;AAC5D,wBAAqB,KAAK,KAAK,eAAe,CAAC;IAC/C;;CAGJ,gBAAsB;CAItB,mBAAyB;;;;CAOzB,WAAW,IAAyC;AAClD,OAAK,YAAY;;;;;CAMnB,WAA2B;AACzB,SAAO,KAAK;;;;;CAMd,AAAQ,qBAAuC;EAC7C,MAAM,aAAa;AACnB,SAAO,IAAI,MAAM;GACf,SAAS,OAAe;AACtB,eAAW,eAAe,OAAO,GAAG;;GAGtC,iBAAiB,QAAkB;AACjC,eAAW,eAAe,eAAe,IAAI;;GAG/C,iBAAiB,OAAe;AAC9B,eAAW,eAAe,eAAe,GAAG;;GAG9C,WAAW,OAAe;AACxB,eAAW,eAAe,SAAS,GAAG;;GAGxC,SAAS,OAAe;AACtB,eAAW,eAAe,OAAO,GAAG;;GAGtC,aAAa;AACX,eAAW,eAAe,OAAO;;GAGnC,iBAAiB,GAAW,MAAc;AACxC,eAAW,eAAe,eAAe,GAAG,EAAE;AAC9C,yBAAqB,WAAW,KAAK,eAAe,CAAC;;GAEvD,kBAAkB,GAAW,MAAc;AACzC,eAAW,eAAe,gBAAgB,GAAG,EAAE;AAC/C,yBAAqB,WAAW,KAAK,eAAe,CAAC;;GAEvD,eACE,SACA,mBACG;IACH,MAAM,KAAK,WAAW,WAAW;AACjC,QAAI,GACF,YAAW,eAAe,aAAa,IAAI,kBAAkB,MAAM;;GAIvE,cAAc,QAAkB;AAE9B,WADgB,WAAW,eAAe,YAAY,IAAI;;GAG5D,UAAU,YAAoB;AAC5B,eAAW,eAAe,QAAQ,QAAQ;;GAE5C,cAAc,YAAoB;AAChC,eAAW,eAAe,YAAY,QAAQ;;GAGhD,aAAa,cAAsB;AACjC,WAAO,WAAW,eAAe,WAAW,UAAU;;GAExD,mBAAmB,YAAoB;AACrC,WAAO,WAAW,eAAe,iBAAiB,QAAQ;;GAE5D,mBACE,MACA,aACG;AACH,eAAW,eAAe,iBAAiB,MAAM,SAA0B;;GAE7E,sBACE,MACA,aACG;AACH,eAAW,eAAe,oBAAoB,MAAM,SAA0B;;GAEjF,EAAiF,EAChF,IAAI,QAAQ,MAAM;AAChB,OAAI,SAAS,cACX,QAAO,WAAW,eAAe;AAEnC,OAAI,SAAS,gBACX,QAAO,WAAW,eAAe;AAEnC,OAAI,SAAS,kBACX,QAAO,WAAW,eAAe;AAEnC,UAAQ,OAAe;KAE1B,CAAC"}

package/dist/elements/EFAudio.d.ts

@@ -1,13 +1,12 @@
-import { MediaEngine } from "../transcoding/types/index.js";
+import { FrameRenderable, FrameState, FrameTask } from "../preview/FrameController.js";
 import { EFMedia } from "./EFMedia.js";
-import * as _lit_task8 from "@lit/task";
-import { Task } from "@lit/task";
 import * as lit_html1 from "lit-html";
 import * as lit_html_directives_ref_js1 from "lit-html/directives/ref.js";
 
 //#region src/elements/EFAudio.d.ts
 declare const EFAudio_base: typeof EFMedia;
-declare class EFAudio extends EFAudio_base {
+declare class EFAudio extends EFAudio_base implements FrameRenderable {
+  #private;
   /**
    * EFAudio only requires audio tracks - skip video track validation
    * to avoid unnecessary network requests to transcoding service.
@@ -21,12 +20,31 @@ declare class EFAudio extends EFAudio_base {
   audioElementRef: lit_html_directives_ref_js1.Ref<HTMLAudioElement>;
   protected updated(changedProperties: Map<PropertyKey, unknown>): void;
   render(): lit_html1.TemplateResult<1>;
-  frameTask: Task<readonly [_lit_task8.TaskStatus, _lit_task8.TaskStatus, _lit_task8.TaskStatus, _lit_task8.TaskStatus], void>;
   /**
-   * Legacy getter for fragment index task (maps to audioSegmentIdTask)
+   * @deprecated Use FrameRenderable methods (prepareFrame, renderFrame) via FrameController instead.
+   * This is a compatibility wrapper that delegates to the new system.
+   */
+  frameTask: FrameTask;
+  /**
+   * Query readiness state for a given time.
+   * @implements FrameRenderable
+   */
+  getFrameState(_timeMs: number): FrameState;
+  /**
+   * Async preparation - waits for media engine to load.
+   * @implements FrameRenderable
+   */
+  prepareFrame(_timeMs: number, signal: AbortSignal): Promise<void>;
+  /**
+   * Synchronous render - audio plays via HTMLAudioElement, no explicit render needed.
+   * @implements FrameRenderable
+   */
+  renderFrame(_timeMs: number): void;
+  /**
+   * Legacy getter for fragment index task (maps to frameTask)
    * Still used by EFCaptions
    */
-  get fragmentIndexTask(): Task<readonly [MediaEngine | undefined, number], number | undefined>;
+  get fragmentIndexTask(): FrameTask;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/elements/EFAudio.js

@@ -1,8 +1,7 @@
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
 import { TWMixin } from "../gui/TWMixin2.js";
+import { PRIORITY_AUDIO, createFrameTaskWrapper } from "../preview/FrameController.js";
 import { EFMedia } from "./EFMedia.js";
-import { Task } from "@lit/task";
 import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
@@ -13,62 +12,7 @@ let EFAudio = class EFAudio$1 extends TWMixin(EFMedia) {
 		super(..._args);
 		this.volume = 1;
 		this.audioElementRef = createRef();
-		this.frameTask = new Task(this, {
-			autoRun: EF_INTERACTIVE,
-			args: () => [
-				this.audioBufferTask.status,
-				this.audioSeekTask.status,
-				this.audioSegmentFetchTask.status,
-				this.mediaEngineTask.status
-			],
-			onError: (error) => {
-				this.frameTask.taskComplete.catch(() => {});
-				if (error instanceof DOMException && error.name === "AbortError" || error instanceof Error && (error.name === "AbortError" || error.message?.includes("signal is aborted") || error.message?.includes("The user aborted a request"))) return;
-				console.error("EFAudio frameTask error", error);
-			},
-			task: async ([_audioBufferStatus, _audioSeekStatus, _audioSegmentFetchStatus, _mediaEngineStatus], { signal }) => {
-				try {
-					await this.mediaEngineTask.taskComplete;
-				} catch (error) {
-					if (error instanceof DOMException && error.name === "AbortError") {
-						signal?.throwIfAborted();
-						return;
-					}
-					throw error;
-				}
-				signal?.throwIfAborted();
-				try {
-					await this.audioSegmentFetchTask.taskComplete;
-				} catch (error) {
-					if (error instanceof DOMException && error.name === "AbortError") {
-						signal?.throwIfAborted();
-						return;
-					}
-					throw error;
-				}
-				signal?.throwIfAborted();
-				try {
-					await this.audioSeekTask.taskComplete;
-				} catch (error) {
-					if (error instanceof DOMException && error.name === "AbortError") {
-						signal?.throwIfAborted();
-						return;
-					}
-					throw error;
-				}
-				signal?.throwIfAborted();
-				try {
-					await this.audioBufferTask.taskComplete;
-				} catch (error) {
-					if (error instanceof DOMException && error.name === "AbortError") {
-						signal?.throwIfAborted();
-						return;
-					}
-					throw error;
-				}
-				signal?.throwIfAborted();
-			}
-		});
+		this.frameTask = createFrameTaskWrapper(this, { getTimeMs: () => this.desiredSeekTimeMs });
 	}
 	/**
 	* EFAudio only requires audio tracks - skip video track validation
@@ -77,6 +21,7 @@ let EFAudio = class EFAudio$1 extends TWMixin(EFMedia) {
 	get requiredTracks() {
 		return "audio";
 	}
+	#mediaEngineLoaded = false;
 	updated(changedProperties) {
 		super.updated(changedProperties);
 		if (this.audioElementRef.value) {
@@ -87,11 +32,36 @@ let EFAudio = class EFAudio$1 extends TWMixin(EFMedia) {
 		return html`<audio ${ref(this.audioElementRef)}></audio>`;
 	}
 	/**
-	* Legacy getter for fragment index task (maps to audioSegmentIdTask)
+	* Query readiness state for a given time.
+	* @implements FrameRenderable
+	*/
+	getFrameState(_timeMs) {
+		const isReady = this.#mediaEngineLoaded && this.mediaEngineTask.status === 2;
+		return {
+			needsPreparation: !isReady,
+			isReady,
+			priority: PRIORITY_AUDIO
+		};
+	}
+	/**
+	* Async preparation - waits for media engine to load.
+	* @implements FrameRenderable
+	*/
+	async prepareFrame(_timeMs, signal) {
+		this.#mediaEngineLoaded = !!await this.getMediaEngine(signal);
+		signal.throwIfAborted();
+	}
+	/**
+	* Synchronous render - audio plays via HTMLAudioElement, no explicit render needed.
+	* @implements FrameRenderable
+	*/
+	renderFrame(_timeMs) {}
+	/**
+	* Legacy getter for fragment index task (maps to frameTask)
 	* Still used by EFCaptions
 	*/
 	get fragmentIndexTask() {
-		return this.audioSegmentIdTask;
+		return this.frameTask;
 	}
 };
 __decorate([property({

package/dist/elements/EFAudio.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFAudio.js","names":["EFAudio"],"sources":["../../src/elements/EFAudio.ts"],"sourcesContent":["import { Task } from \"@lit/task\";\nimport { html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport { EF_INTERACTIVE } from \"../EF_INTERACTIVE.js\";\nimport { TWMixin } from \"../gui/TWMixin.js\";\nimport { EFMedia } from \"./EFMedia.js\";\n\n@customElement(\"ef-audio\")\nexport class EFAudio extends TWMixin(EFMedia) {\n  /**\n   * EFAudio only requires audio tracks - skip video track validation\n   * to avoid unnecessary network requests to transcoding service.\n   */\n  override get requiredTracks(): \"audio\" | \"video\" | \"both\" {\n    return \"audio\";\n  }\n\n  /**\n   * Audio volume level (0.0 to 1.0)\n   * @domAttribute \"volume\"\n   */\n  @property({ type: Number, attribute: \"volume\", reflect: true })\n  volume = 1.0;\n\n  audioElementRef = createRef<HTMLAudioElement>();\n\n  protected updated(\n    changedProperties: Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(changedProperties);\n    \n    // Sync volume property to HTMLAudioElement whenever it changes or element is first rendered\n    if (this.audioElementRef.value) {\n      if (changedProperties.has(\"volume\") || changedProperties.size === 0) {\n        this.audioElementRef.value.volume = this.volume;\n      }\n    }\n  }\n\n  render() {\n    return html`<audio ${ref(this.audioElementRef)}></audio>`;\n  }\n\n  frameTask = new Task(this, {\n    autoRun: EF_INTERACTIVE,\n    args: () =>\n      [\n        this.audioBufferTask.status,\n        this.audioSeekTask.status,\n        this.audioSegmentFetchTask.status,\n        this.mediaEngineTask.status,\n      ] as const,\n    onError: (error) => {\n      // CRITICAL: Attach .catch() handler to taskComplete BEFORE the promise is rejected.\n      // This prevents unhandled rejection when hostUpdate() triggers _performTask() without awaiting.\n      this.frameTask.taskComplete.catch(() => {});\n      \n      // Don't log AbortErrors - these are expected when tasks are cancelled\n      const isAbortError = \n        (error instanceof DOMException && error.name === \"AbortError\") ||\n        (error instanceof Error && (\n          error.name === \"AbortError\" ||\n          error.message?.includes(\"signal is aborted\") ||\n          error.message?.includes(\"The user aborted a request\")\n        ));\n      \n      if (isAbortError) {\n        return;\n      }\n      \n      console.error(\"EFAudio frameTask error\", error);\n    },\n    task: async ([_audioBufferStatus, _audioSeekStatus, _audioSegmentFetchStatus, _mediaEngineStatus], { signal }) => {\n      // Wrap all taskComplete awaits in try/catch to handle AbortErrors\n      try {\n        await this.mediaEngineTask.taskComplete;\n      } catch (error) {\n        if (error instanceof DOMException && error.name === \"AbortError\") {\n          signal?.throwIfAborted();\n          return;\n        }\n        throw error;\n      }\n      signal?.throwIfAborted();\n      \n      try {\n        await this.audioSegmentFetchTask.taskComplete;\n      } catch (error) {\n        if (error instanceof DOMException && error.name === \"AbortError\") {\n          signal?.throwIfAborted();\n          return;\n        }\n        throw error;\n      }\n      signal?.throwIfAborted();\n      \n      try {\n        await this.audioSeekTask.taskComplete;\n      } catch (error) {\n        if (error instanceof DOMException && error.name === \"AbortError\") {\n          signal?.throwIfAborted();\n          return;\n        }\n        throw error;\n      }\n      signal?.throwIfAborted();\n      \n      try {\n        await this.audioBufferTask.taskComplete;\n      } catch (error) {\n        if (error instanceof DOMException && error.name === \"AbortError\") {\n          signal?.throwIfAborted();\n          return;\n        }\n        throw error;\n      }\n      signal?.throwIfAborted();\n      // REMOVED: this.rootTimegroup?.requestUpdate() was causing infinite update loops.\n      // When EFAudio's frameTask ran, it would trigger root to update, which triggered\n      // OwnCurrentTimeController.hostUpdated on all children, which triggered more\n      // frameTask runs, creating an infinite cycle.\n      // The root timegroup already updates when currentTime changes - no need to force it here.\n    },\n  });\n\n  /**\n   * Legacy getter for fragment index task (maps to audioSegmentIdTask)\n   * Still used by EFCaptions\n   */\n  get fragmentIndexTask() {\n    return this.audioSegmentIdTask;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-audio\": EFAudio;\n  }\n}\n"],"mappings":";;;;;;;;;;AASO,oBAAMA,kBAAgB,QAAQ,QAAQ,CAAC;;;gBAcnC;yBAES,WAA6B;mBAmBnC,IAAI,KAAK,MAAM;GACzB,SAAS;GACT,YACE;IACE,KAAK,gBAAgB;IACrB,KAAK,cAAc;IACnB,KAAK,sBAAsB;IAC3B,KAAK,gBAAgB;IACtB;GACH,UAAU,UAAU;AAGlB,SAAK,UAAU,aAAa,YAAY,GAAG;AAW3C,QAPG,iBAAiB,gBAAgB,MAAM,SAAS,gBAChD,iBAAiB,UAChB,MAAM,SAAS,gBACf,MAAM,SAAS,SAAS,oBAAoB,IAC5C,MAAM,SAAS,SAAS,6BAA6B,EAIvD;AAGF,YAAQ,MAAM,2BAA2B,MAAM;;GAEjD,MAAM,OAAO,CAAC,oBAAoB,kBAAkB,0BAA0B,qBAAqB,EAAE,aAAa;AAEhH,QAAI;AACF,WAAM,KAAK,gBAAgB;aACpB,OAAO;AACd,SAAI,iBAAiB,gBAAgB,MAAM,SAAS,cAAc;AAChE,cAAQ,gBAAgB;AACxB;;AAEF,WAAM;;AAER,YAAQ,gBAAgB;AAExB,QAAI;AACF,WAAM,KAAK,sBAAsB;aAC1B,OAAO;AACd,SAAI,iBAAiB,gBAAgB,MAAM,SAAS,cAAc;AAChE,cAAQ,gBAAgB;AACxB;;AAEF,WAAM;;AAER,YAAQ,gBAAgB;AAExB,QAAI;AACF,WAAM,KAAK,cAAc;aAClB,OAAO;AACd,SAAI,iBAAiB,gBAAgB,MAAM,SAAS,cAAc;AAChE,cAAQ,gBAAgB;AACxB;;AAEF,WAAM;;AAER,YAAQ,gBAAgB;AAExB,QAAI;AACF,WAAM,KAAK,gBAAgB;aACpB,OAAO;AACd,SAAI,iBAAiB,gBAAgB,MAAM,SAAS,cAAc;AAChE,cAAQ,gBAAgB;AACxB;;AAEF,WAAM;;AAER,YAAQ,gBAAgB;;GAO3B,CAAC;;;;;;CA9GF,IAAa,iBAA6C;AACxD,SAAO;;CAYT,AAAU,QACR,mBACM;AACN,QAAM,QAAQ,kBAAkB;AAGhC,MAAI,KAAK,gBAAgB,OACvB;OAAI,kBAAkB,IAAI,SAAS,IAAI,kBAAkB,SAAS,EAChE,MAAK,gBAAgB,MAAM,SAAS,KAAK;;;CAK/C,SAAS;AACP,SAAO,IAAI,UAAU,IAAI,KAAK,gBAAgB,CAAC;;;;;;CAyFjD,IAAI,oBAAoB;AACtB,SAAO,KAAK;;;YA7Gb,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAU,SAAS;CAAM,CAAC;sBAdhE,cAAc,WAAW"}
+{"version":3,"file":"EFAudio.js","names":["EFAudio","#mediaEngineLoaded"],"sources":["../../src/elements/EFAudio.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport { TWMixin } from \"../gui/TWMixin.js\";\nimport {\n  type FrameRenderable,\n  type FrameState,\n  createFrameTaskWrapper,\n  PRIORITY_AUDIO,\n} from \"../preview/FrameController.js\";\nimport { EFMedia } from \"./EFMedia.js\";\n\n@customElement(\"ef-audio\")\nexport class EFAudio extends TWMixin(EFMedia) implements FrameRenderable {\n  /**\n   * EFAudio only requires audio tracks - skip video track validation\n   * to avoid unnecessary network requests to transcoding service.\n   */\n  override get requiredTracks(): \"audio\" | \"video\" | \"both\" {\n    return \"audio\";\n  }\n\n  /**\n   * Audio volume level (0.0 to 1.0)\n   * @domAttribute \"volume\"\n   */\n  @property({ type: Number, attribute: \"volume\", reflect: true })\n  volume = 1.0;\n\n  audioElementRef = createRef<HTMLAudioElement>();\n\n  #mediaEngineLoaded = false;\n\n  protected updated(\n    changedProperties: Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(changedProperties);\n    \n    // Sync volume property to HTMLAudioElement whenever it changes or element is first rendered\n    if (this.audioElementRef.value) {\n      if (changedProperties.has(\"volume\") || changedProperties.size === 0) {\n        this.audioElementRef.value.volume = this.volume;\n      }\n    }\n  }\n\n  render() {\n    return html`<audio ${ref(this.audioElementRef)}></audio>`;\n  }\n\n  /**\n   * @deprecated Use FrameRenderable methods (prepareFrame, renderFrame) via FrameController instead.\n   * This is a compatibility wrapper that delegates to the new system.\n   */\n  frameTask = createFrameTaskWrapper(this, {\n    getTimeMs: () => this.desiredSeekTimeMs,\n  });\n\n  // ============================================================================\n  // FrameRenderable Implementation\n  // Centralized frame control - no Lit Tasks\n  // ============================================================================\n\n  /**\n   * Query readiness state for a given time.\n   * @implements FrameRenderable\n   */\n  getFrameState(_timeMs: number): FrameState {\n    // Check if media engine is loaded\n    const isReady = this.#mediaEngineLoaded && this.mediaEngineTask.status === 2; // COMPLETE\n\n    return {\n      needsPreparation: !isReady,\n      isReady,\n      priority: PRIORITY_AUDIO,\n    };\n  }\n\n  /**\n   * Async preparation - waits for media engine to load.\n   * @implements FrameRenderable\n   */\n  async prepareFrame(_timeMs: number, signal: AbortSignal): Promise<void> {\n    // Just ensure media engine is loaded\n    const mediaEngine = await this.getMediaEngine(signal);\n    this.#mediaEngineLoaded = !!mediaEngine;\n    signal.throwIfAborted();\n  }\n\n  /**\n   * Synchronous render - audio plays via HTMLAudioElement, no explicit render needed.\n   * @implements FrameRenderable\n   */\n  renderFrame(_timeMs: number): void {\n    // Audio playback is handled by the browser's HTMLAudioElement\n    // No explicit rendering action needed\n  }\n\n  // ============================================================================\n  // End FrameRenderable Implementation\n  // ============================================================================\n\n  /**\n   * Legacy getter for fragment index task (maps to frameTask)\n   * Still used by EFCaptions\n   */\n  get fragmentIndexTask() {\n    return this.frameTask;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-audio\": EFAudio;\n  }\n}\n"],"mappings":";;;;;;;;;AAaO,oBAAMA,kBAAgB,QAAQ,QAAQ,CAA4B;;;gBAc9D;yBAES,WAA6B;mBAyBnC,uBAAuB,MAAM,EACvC,iBAAiB,KAAK,mBACvB,CAAC;;;;;;CAtCF,IAAa,iBAA6C;AACxD,SAAO;;CAYT,qBAAqB;CAErB,AAAU,QACR,mBACM;AACN,QAAM,QAAQ,kBAAkB;AAGhC,MAAI,KAAK,gBAAgB,OACvB;OAAI,kBAAkB,IAAI,SAAS,IAAI,kBAAkB,SAAS,EAChE,MAAK,gBAAgB,MAAM,SAAS,KAAK;;;CAK/C,SAAS;AACP,SAAO,IAAI,UAAU,IAAI,KAAK,gBAAgB,CAAC;;;;;;CAoBjD,cAAc,SAA6B;EAEzC,MAAM,UAAU,MAAKC,qBAAsB,KAAK,gBAAgB,WAAW;AAE3E,SAAO;GACL,kBAAkB,CAAC;GACnB;GACA,UAAU;GACX;;;;;;CAOH,MAAM,aAAa,SAAiB,QAAoC;AAGtE,QAAKA,oBAAqB,CAAC,CADP,MAAM,KAAK,eAAe,OAAO;AAErD,SAAO,gBAAgB;;;;;;CAOzB,YAAY,SAAuB;;;;;CAanC,IAAI,oBAAoB;AACtB,SAAO,KAAK;;;YAjFb,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAU,SAAS;CAAM,CAAC;sBAdhE,cAAc,WAAW"}