@editframe/elements 0.12.0-beta.15 → 0.12.0-beta.18

package/src/elements/EFCaptions.ts

@@ -1,15 +1,15 @@
 import { Task } from "@lit/task";
 import { LitElement, type PropertyValueMap, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import type { GetISOBMFFFileTranscriptionResult } from "../../../api/src/index.ts";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
-import { EF_RENDERING } from "../EF_RENDERING.ts";
-import { CrossUpdateController } from "./CrossUpdateController.ts";
-import { EFAudio } from "./EFAudio.ts";
-import { EFSourceMixin } from "./EFSourceMixin.ts";
-import { EFTemporal } from "./EFTemporal.ts";
-import { EFVideo } from "./EFVideo.ts";
-import { FetchMixin } from "./FetchMixin.ts";
+import type { GetISOBMFFFileTranscriptionResult } from "../../../api/src/index.js";
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
+import { EF_RENDERING } from "../EF_RENDERING.js";
+import { CrossUpdateController } from "./CrossUpdateController.js";
+import { EFAudio } from "./EFAudio.js";
+import { EFSourceMixin } from "./EFSourceMixin.js";
+import { EFTemporal } from "./EFTemporal.js";
+import { EFVideo } from "./EFVideo.js";
+import { FetchMixin } from "./FetchMixin.js";
 
 interface WordSegment {
   text: string;

package/src/elements/EFImage.browsertest.ts

@@ -1,6 +1,6 @@
 import { afterEach, beforeEach, describe, expect, test } from "vitest";
-import "./EFImage.ts";
-import "../gui/EFPreview.ts";
+import "./EFImage.js";
+import "../gui/EFPreview.js";
 import { v4 } from "uuid";
 
 describe("EFImage", () => {

package/src/elements/EFImage.ts

@@ -2,10 +2,10 @@ import { Task } from "@lit/task";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
-import { EF_RENDERING } from "../EF_RENDERING.ts";
-import { EFSourceMixin } from "./EFSourceMixin.ts";
-import { FetchMixin } from "./FetchMixin.ts";
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
+import { EF_RENDERING } from "../EF_RENDERING.js";
+import { EFSourceMixin } from "./EFSourceMixin.js";
+import { FetchMixin } from "./FetchMixin.js";
 
 @customElement("ef-image")
 export class EFImage extends EFSourceMixin(FetchMixin(LitElement), {

package/src/elements/EFMedia.browsertest.ts

@@ -1,12 +1,12 @@
 import { customElement } from "lit/decorators.js";
 import { v4 } from "uuid";
 import { afterEach, beforeEach, describe, expect, test } from "vitest";
-import { EFMedia } from "./EFMedia.ts";
-import "../gui/EFWorkbench.ts";
-import "../gui/EFPreview.ts";
-import "./EFTimegroup.ts";
-import { createTestFragmentIndex } from "TEST/createTestFragmentIndex.ts";
-import { useMockWorker } from "TEST/useMockWorker.ts";
+import { EFMedia } from "./EFMedia.js";
+import "../gui/EFWorkbench.js";
+import "../gui/EFPreview.js";
+import "./EFTimegroup.js";
+import { createTestFragmentIndex } from "TEST/createTestFragmentIndex.js";
+import { useMockWorker } from "TEST/useMockWorker.js";
 import { http, HttpResponse } from "msw";
 
 @customElement("test-media")

package/src/elements/EFMedia.ts

@@ -10,12 +10,12 @@ import type { TrackFragmentIndex, TrackSegment } from "@editframe/assets";
 
 import { VideoAsset } from "@editframe/assets/EncodedAsset.js";
 import { MP4File } from "@editframe/assets/MP4File.js";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
-import { EF_RENDERING } from "../EF_RENDERING.ts";
-import { apiHostContext } from "../gui/apiHostContext.ts";
-import { EFSourceMixin } from "./EFSourceMixin.ts";
-import { EFTemporal, isEFTemporal } from "./EFTemporal.ts";
-import { FetchMixin } from "./FetchMixin.ts";
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
+import { EF_RENDERING } from "../EF_RENDERING.js";
+import { apiHostContext } from "../gui/apiHostContext.js";
+import { EFSourceMixin } from "./EFSourceMixin.js";
+import { EFTemporal, isEFTemporal } from "./EFTemporal.js";
+import { FetchMixin } from "./FetchMixin.js";
 
 const log = debug("ef:elements:EFMedia");
 

package/src/elements/EFSourceMixin.ts

@@ -1,9 +1,9 @@
 import { consume } from "@lit/context";
-import type { LitElement } from "lit";
-import { state } from "lit/decorators/state.js";
 import { Task } from "@lit/task";
+import type { LitElement } from "lit";
 import { property } from "lit/decorators/property.js";
-import { apiHostContext } from "../gui/apiHostContext.ts";
+import { state } from "lit/decorators/state.js";
+import { apiHostContext } from "../gui/apiHostContext.js";
 
 export declare class EFSourceMixinInterface {
   apiHost?: string;

package/src/elements/EFTemporal.browsertest.ts

@@ -1,7 +1,7 @@
 import { LitElement } from "lit";
 import { customElement } from "lit/decorators/custom-element.js";
 import { describe, expect, test } from "vitest";
-import { EFTemporal } from "./EFTemporal.ts";
+import { EFTemporal } from "./EFTemporal.js";
 
 @customElement("test-temporal")
 class TestTemporal extends EFTemporal(LitElement) {}

package/src/elements/EFTemporal.ts

@@ -1,11 +1,11 @@
 import { consume, createContext } from "@lit/context";
 import type { LitElement, ReactiveController } from "lit";
 import { property, state } from "lit/decorators.js";
-import type { EFTimegroup } from "./EFTimegroup.ts";
+import type { EFTimegroup } from "./EFTimegroup.js";
 
 import { Task } from "@lit/task";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
-import { durationConverter } from "./durationConverter.ts";
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
+import { durationConverter } from "./durationConverter.js";
 
 export const timegroupContext = createContext<EFTimegroup>(
   Symbol("timeGroupContext"),
@@ -30,6 +30,9 @@ export declare class TemporalMixinInterface {
 
   get durationMs(): number;
   get startTimeMs(): number;
+  /**
+   * The start time of the element within its parent timegroup.
+   */
   get startTimeWithinParentMs(): number;
   get endTimeMs(): number;
   get ownCurrentTimeMs(): number;
@@ -340,6 +343,9 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
       return parent;
     }
 
+    /**
+     * The start time of the element within its parent timegroup.
+     */
     get startTimeWithinParentMs() {
       if (!this.parentTemporal) {
         return 0;

package/src/elements/EFTimegroup.browsertest.ts

@@ -5,13 +5,13 @@ import {
   render as litRender,
 } from "lit";
 import { assert, beforeEach, describe, test } from "vitest";
-import { EFTimegroup } from "./EFTimegroup.ts";
-import "./EFTimegroup.ts";
+import { EFTimegroup } from "./EFTimegroup.js";
+import "./EFTimegroup.js";
 import { customElement } from "lit/decorators/custom-element.js";
-import { ContextMixin } from "../gui/ContextMixin.ts";
-import { EFTemporal } from "./EFTemporal.ts";
+import { ContextMixin } from "../gui/ContextMixin.js";
+import { EFTemporal } from "./EFTemporal.js";
 // Need workbench to make workbench wrapping occurs
-import "../gui/EFWorkbench.ts";
+import "../gui/EFWorkbench.js";
 
 beforeEach(() => {
   for (let i = 0; i < localStorage.length; i++) {

package/src/elements/EFTimegroup.ts

@@ -4,17 +4,17 @@ import debug from "debug";
 import { LitElement, type PropertyValueMap, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
-import { isContextMixin } from "../gui/ContextMixin.ts";
-import { deepGetMediaElements } from "./EFMedia.ts";
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
+import { isContextMixin } from "../gui/ContextMixin.js";
+import { deepGetMediaElements } from "./EFMedia.js";
 import {
   EFTemporal,
   isEFTemporal,
   shallowGetTemporalElements,
   timegroupContext,
-} from "./EFTemporal.ts";
-import { TimegroupController } from "./TimegroupController.ts";
-import { durationConverter } from "./durationConverter.ts";
+} from "./EFTemporal.js";
+import { TimegroupController } from "./TimegroupController.js";
+import { durationConverter } from "./durationConverter.js";
 
 const log = debug("ef:elements:EFTimegroup");
 

package/src/elements/EFVideo.ts

@@ -3,8 +3,8 @@ import { css, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 
-import { TWMixin } from "../gui/TWMixin.ts";
-import { EFMedia } from "./EFMedia.ts";
+import { TWMixin } from "../gui/TWMixin.js";
+import { EFMedia } from "./EFMedia.js";
 
 @customElement("ef-video")
 export class EFVideo extends TWMixin(EFMedia) {

package/src/elements/EFWaveform.ts

@@ -1,14 +1,14 @@
-import { EFAudio } from "./EFAudio.ts";
+import { EFAudio } from "./EFAudio.js";
 
 import { Task } from "@lit/task";
 import { LitElement, type PropertyValueMap, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { type Ref, createRef, ref } from "lit/directives/ref.js";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
-import { TWMixin } from "../gui/TWMixin.ts";
-import { CrossUpdateController } from "./CrossUpdateController.ts";
-import { EFTemporal } from "./EFTemporal.ts";
-import { EFVideo } from "./EFVideo.ts";
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
+import { TWMixin } from "../gui/TWMixin.js";
+import { CrossUpdateController } from "./CrossUpdateController.js";
+import { EFTemporal } from "./EFTemporal.js";
+import { EFVideo } from "./EFVideo.js";
 
 @customElement("ef-waveform")
 export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
@@ -24,6 +24,9 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
   canvasRef: Ref<HTMLCanvasElement> = createRef();
   private ctx: CanvasRenderingContext2D | null = null;
 
+  private resizeObserver?: ResizeObserver;
+  private mutationObserver?: MutationObserver;
+
   createRenderRoot() {
     return this;
   }
@@ -61,10 +64,43 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     if (this.targetElement) {
       new CrossUpdateController(this.targetElement, this);
     }
+
+    // Initialize ResizeObserver
+    this.resizeObserver = new ResizeObserver(() => {
+      this.resizeCanvas();
+    });
+
+    // Observe the host element
+    this.resizeObserver.observe(this);
+
+    // Initialize MutationObserver
+    this.mutationObserver = new MutationObserver((mutationsList) => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === "attributes") {
+          this.frameTask.run();
+        }
+      }
+    });
+
+    // Observe attribute changes on the element
+    this.mutationObserver.observe(this, { attributes: true });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    // Disconnect the observers when the element is removed from the DOM
+    this.resizeObserver?.disconnect();
+    this.mutationObserver?.disconnect();
+  }
+
+  private resizeCanvas() {
+    this.ctx = this.initCanvas();
+    if (this.ctx) {
+      this.frameTask.run(); // Redraw the canvas
+    }
   }
 
   protected initCanvas() {
-    console.count("initCanvas");
     const canvas = this.canvasRef.value;
     if (!canvas) return null;
 
@@ -87,9 +123,6 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
   }
 
   protected drawBars(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {
-    ctx.strokeStyle = this.color;
-    ctx.fillStyle = this.color;
-
     const canvas = ctx.canvas;
     const waveWidth = canvas.width / devicePixelRatio;
     const waveHeight = canvas.height / devicePixelRatio;
@@ -111,9 +144,6 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     ctx: CanvasRenderingContext2D,
     frequencyData: Uint8Array,
   ) {
-    ctx.strokeStyle = this.color;
-    ctx.fillStyle = this.color;
-
     const canvas = ctx.canvas;
     const waveWidth = canvas.width / devicePixelRatio;
     const waveHeight = canvas.height / devicePixelRatio;
@@ -144,9 +174,6 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
   }
 
   protected drawLine(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {
-    ctx.strokeStyle = this.color;
-    ctx.fillStyle = this.color;
-
     const canvas = ctx.canvas;
     const waveWidth = canvas.width / devicePixelRatio;
     const waveHeight = canvas.height / devicePixelRatio;
@@ -173,9 +200,6 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     ctx: CanvasRenderingContext2D,
     frequencyData: Uint8Array,
   ) {
-    ctx.strokeStyle = this.color;
-    ctx.fillStyle = this.color;
-
     const canvas = ctx.canvas;
     const waveWidth = canvas.width / devicePixelRatio;
     const waveHeight = canvas.height / devicePixelRatio;
@@ -202,9 +226,6 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     ctx: CanvasRenderingContext2D,
     frequencyData: Uint8Array,
   ) {
-    ctx.strokeStyle = this.color;
-    ctx.fillStyle = this.color;
-
     const canvas = ctx.canvas;
     const waveWidth = canvas.width / devicePixelRatio;
     const waveHeight = canvas.height / devicePixelRatio;
@@ -234,9 +255,6 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     ctx: CanvasRenderingContext2D,
     frequencyData: Uint8Array,
   ) {
-    ctx.strokeStyle = this.color;
-    ctx.fillStyle = this.color;
-
     const canvas = ctx.canvas;
     const waveWidth = canvas.width / devicePixelRatio;
     const waveHeight = canvas.height / devicePixelRatio;
@@ -263,9 +281,6 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     ctx: CanvasRenderingContext2D,
     frequencyData: Uint8Array,
   ) {
-    ctx.strokeStyle = this.color;
-    ctx.fillStyle = this.color;
-
     const canvas = ctx.canvas;
     const waveWidth = canvas.width / devicePixelRatio;
     const waveHeight = canvas.height / devicePixelRatio;
@@ -284,9 +299,6 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
   }
 
   protected drawWave(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {
-    ctx.strokeStyle = this.color;
-    ctx.fillStyle = this.color;
-
     const canvas = ctx.canvas;
     const waveWidth = canvas.width / devicePixelRatio;
     const waveHeight = canvas.height / devicePixelRatio;
@@ -300,7 +312,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     ctx.moveTo(0, baseline);
     ctx.lineTo(waveWidth, baseline);
     ctx.strokeStyle = this.color;
-    ctx.lineWidth = 2;
+    ctx.lineWidth = 1;
     ctx.stroke();
 
     // Draw bars
@@ -313,21 +325,10 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     });
   }
 
-  // Add this property to store the last frame timestamp
-  private lastFrameTime = 0;
-
   frameTask = new Task(this, {
     autoRun: EF_INTERACTIVE,
     args: () => [this.targetElement.audioBufferTask.status] as const,
     task: async () => {
-      // Calculate and log time since last frame
-      const currentTime = performance.now();
-      const timeSinceLastFrame = this.lastFrameTime
-        ? currentTime - this.lastFrameTime
-        : 0;
-      console.log(`Time since last frame: ${timeSinceLastFrame.toFixed(2)}ms`);
-      this.lastFrameTime = currentTime;
-
       await this.targetElement.audioBufferTask.taskComplete;
       // Lazy initialize canvas, if we don't stash it, we re-init
       // every frame, which blanks the canvas, causing flicker.
@@ -338,61 +339,44 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
       if (!this.targetElement.audioBufferTask.value) return;
 
       if (this.targetElement.trimAdjustedOwnCurrentTimeMs > 0) {
-        const FRAMES_TO_ANALYZE = 4;
-        const FRAME_DURATION_MS = 48000 / 100;
-
-        const multiFrameData: Uint8Array[] = [];
-
-        for (let i = 0; i < FRAMES_TO_ANALYZE; i++) {
-          const frameOffset = i - Math.floor(FRAMES_TO_ANALYZE / 2);
-          const audioContext = new OfflineAudioContext(2, 48000 / 25, 48000);
-          const audioBufferSource = audioContext.createBufferSource();
-          audioBufferSource.buffer =
-            this.targetElement.audioBufferTask.value.buffer;
-          const analyser = audioContext.createAnalyser();
-
-          // Adjust FFT size for better frequency resolution
-          analyser.fftSize = 128 / 2;
-          // Adjust smoothing to make peaks more pronounced
-          analyser.smoothingTimeConstant = 0.1;
-
-          audioBufferSource.connect(analyser);
-
-          const startTime = Math.max(
-            0,
-            (this.targetElement.trimAdjustedOwnCurrentTimeMs -
-              this.targetElement.audioBufferTask.value.startOffsetMs) /
-              1000 +
-              (frameOffset * FRAME_DURATION_MS) / 1000,
-          );
-
-          audioBufferSource.start(0, startTime, FRAME_DURATION_MS / 1000);
-          await audioContext.startRendering();
-
-          const frameData = new Uint8Array(analyser.frequencyBinCount);
-          analyser.getByteFrequencyData(frameData);
-
-          multiFrameData.push(frameData);
-        }
-
-        const dataLength = multiFrameData[0]?.length ?? 0;
-
-        // Average and enhance dynamics
-        const smoothedData = new Uint8Array(dataLength);
-        for (let i = 0; i < smoothedData.length; i++) {
-          let sum = 0;
-          for (const frameData of multiFrameData) {
-            sum += frameData[i] ?? 0;
-          }
-          let avg = sum / FRAMES_TO_ANALYZE;
-
-          // Enhance dynamics by applying a subtle exponential curve
-          avg = (avg / 255) ** 1.2 * 255;
-
-          smoothedData[i] = Math.round(avg);
+        const FRAME_DURATION_MS = 48000 / 1000;
+        const FRAME_SMEAR_MS = FRAME_DURATION_MS * 1;
+        const FRAME_SMEAR_S = FRAME_SMEAR_MS / 1000;
+
+        const audioContext = new OfflineAudioContext(2, 48000 / 25, 48000);
+        const audioBufferSource = audioContext.createBufferSource();
+        audioBufferSource.buffer =
+          this.targetElement.audioBufferTask.value.buffer;
+        const analyser = audioContext.createAnalyser();
+
+        // Adjust FFT size for better frequency resolution
+        analyser.fftSize = 128 * 8;
+
+        audioBufferSource.connect(analyser);
+
+        const startTime = Math.max(
+          0,
+          (this.targetElement.trimAdjustedOwnCurrentTimeMs -
+            this.targetElement.audioBufferTask.value.startOffsetMs) /
+            1000,
+        );
+
+        audioBufferSource.start(0, startTime, FRAME_SMEAR_S);
+        await audioContext.startRendering();
+
+        const frameData = new Uint8Array(analyser.frequencyBinCount);
+        analyser.getByteFrequencyData(frameData);
+
+        const smoothedData = frameData.slice(0, frameData.length / 2);
+
+        if (this.color === "currentColor") {
+          const computedStyle = getComputedStyle(this);
+          const currentColor = computedStyle.color;
+          ctx.strokeStyle = currentColor;
+          ctx.fillStyle = currentColor;
+        } else {
         }
 
-        // Use smoothedData for rendering
         switch (this.mode) {
           case "bars":
             this.drawBars(ctx, smoothedData);
@@ -438,8 +422,8 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
   protected updated(changedProperties: PropertyValueMap<this>): void {
     super.updated(changedProperties);
 
-    // Trigger a redraw if color or mode changes
-    if (changedProperties.has("color") || changedProperties.has("mode")) {
+    // Trigger a redraw if any property changes
+    if (changedProperties.size > 0) {
       // Request a new frame
       this.frameTask.run();
     }

package/src/elements/FetchMixin.ts

@@ -1,8 +1,8 @@
-import type { LitElement } from "lit";
 import { consume } from "@lit/context";
+import type { LitElement } from "lit";
 import { state } from "lit/decorators/state.js";
 
-import { fetchContext } from "../gui/fetchContext.ts";
+import { fetchContext } from "../gui/fetchContext.js";
 
 export declare class FetchMixinInterface {
   fetch: typeof fetch;

package/src/elements/TimegroupController.ts

@@ -1,5 +1,5 @@
-import type { ReactiveController, LitElement } from "lit";
-import type { EFTimegroup } from "./EFTimegroup.ts";
+import type { LitElement, ReactiveController } from "lit";
+import type { EFTimegroup } from "./EFTimegroup.js";
 
 export class TimegroupController implements ReactiveController {
   constructor(

package/src/elements/durationConverter.ts

@@ -1,4 +1,4 @@
-import { parseTimeToMs } from "./parseTimeToMs.ts";
+import { parseTimeToMs } from "./parseTimeToMs.js";
 
 export const durationConverter = {
   fromAttribute: (value: string): number => parseTimeToMs(value),

package/src/elements/util.ts

@@ -1,4 +1,4 @@
-import { EFTimegroup } from "./EFTimegroup.ts";
+import { EFTimegroup } from "./EFTimegroup.js";
 
 export const getRootTimeGroup = (element: Element): EFTimegroup | null => {
   let bestCandidate: EFTimegroup | null = null;

package/src/gui/ContextMixin.browsertest.ts

@@ -3,11 +3,11 @@ import { customElement } from "lit/decorators/custom-element.js";
 import { describe, expect, test, vi } from "vitest";
 
 import { consume } from "@lit/context";
-import { ContextMixin } from "./ContextMixin.ts";
-import { apiHostContext } from "./apiHostContext.ts";
+import { ContextMixin } from "./ContextMixin.js";
+import { apiHostContext } from "./apiHostContext.js";
 
 // Required to test timeupdate event, we need a duration, and timegroups are a quick way to do that
-import "../elements/EFTimegroup.ts";
+import "../elements/EFTimegroup.js";
 
 @customElement("test-context")
 class TestContext extends ContextMixin(LitElement) {}

package/src/gui/ContextMixin.ts

@@ -3,13 +3,13 @@ import type { LitElement } from "lit";
 import { property, state } from "lit/decorators.js";
 
 import { createRef } from "lit/directives/ref.js";
-import type { EFTimegroup } from "../elements/EFTimegroup.ts";
-import { apiHostContext } from "./apiHostContext.ts";
-import { efContext } from "./efContext.ts";
-import { fetchContext } from "./fetchContext.ts";
-import { type FocusContext, focusContext } from "./focusContext.ts";
-import { focusedElementContext } from "./focusedElementContext.ts";
-import { loopContext, playingContext } from "./playingContext.ts";
+import type { EFTimegroup } from "../elements/EFTimegroup.js";
+import { apiHostContext } from "./apiHostContext.js";
+import { efContext } from "./efContext.js";
+import { fetchContext } from "./fetchContext.js";
+import { type FocusContext, focusContext } from "./focusContext.js";
+import { focusedElementContext } from "./focusedElementContext.js";
+import { loopContext, playingContext } from "./playingContext.js";
 
 export declare class ContextMixinInterface extends LitElement {
   signingURL?: string;

package/src/gui/EFFilmstrip.ts

@@ -17,21 +17,21 @@ import {
 import { createRef, ref } from "lit/directives/ref.js";
 import { styleMap } from "lit/directives/style-map.js";
 
-import { EFAudio } from "../elements/EFAudio.ts";
-import { EFCaptions, EFCaptionsActiveWord } from "../elements/EFCaptions.ts";
-import { EFImage } from "../elements/EFImage.ts";
-import type { TemporalMixinInterface } from "../elements/EFTemporal.ts";
-import { EFTimegroup } from "../elements/EFTimegroup.ts";
-import { EFVideo } from "../elements/EFVideo.ts";
-import { EFWaveform } from "../elements/EFWaveform.ts";
-import { TimegroupController } from "../elements/TimegroupController.ts";
-import { msToTimeCode } from "../msToTimeCode.ts";
-import type { EFPreview } from "./EFPreview.ts";
-import type { EFWorkbench } from "./EFWorkbench.ts";
-import { TWMixin } from "./TWMixin.ts";
-import { type FocusContext, focusContext } from "./focusContext.ts";
-import { focusedElementContext } from "./focusedElementContext.ts";
-import { loopContext, playingContext } from "./playingContext.ts";
+import { EFAudio } from "../elements/EFAudio.js";
+import { EFCaptions, EFCaptionsActiveWord } from "../elements/EFCaptions.js";
+import { EFImage } from "../elements/EFImage.js";
+import type { TemporalMixinInterface } from "../elements/EFTemporal.js";
+import { EFTimegroup } from "../elements/EFTimegroup.js";
+import { EFVideo } from "../elements/EFVideo.js";
+import { EFWaveform } from "../elements/EFWaveform.js";
+import { TimegroupController } from "../elements/TimegroupController.js";
+import { msToTimeCode } from "../msToTimeCode.js";
+import type { EFPreview } from "./EFPreview.js";
+import type { EFWorkbench } from "./EFWorkbench.js";
+import { TWMixin } from "./TWMixin.js";
+import { type FocusContext, focusContext } from "./focusContext.js";
+import { focusedElementContext } from "./focusedElementContext.js";
+import { loopContext, playingContext } from "./playingContext.js";
 
 class ElementFilmstripController implements ReactiveController {
   constructor(

package/src/gui/EFPreview.ts

@@ -2,8 +2,8 @@ import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import { ref } from "lit/directives/ref.js";
 
-import { ContextMixin } from "./ContextMixin.ts";
-import { TWMixin } from "./TWMixin.ts";
+import { ContextMixin } from "./ContextMixin.js";
+import { TWMixin } from "./TWMixin.js";
 
 @customElement("ef-preview")
 export class EFPreview extends ContextMixin(TWMixin(LitElement)) {

package/src/gui/EFScrubber.ts

@@ -3,9 +3,9 @@ import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 
 import { ref } from "lit/directives/ref.js";
-import type { ContextMixinInterface } from "./ContextMixin.ts";
-import { efContext } from "./efContext.ts";
-import { playingContext } from "./playingContext.ts";
+import type { ContextMixinInterface } from "./ContextMixin.js";
+import { efContext } from "./efContext.js";
+import { playingContext } from "./playingContext.js";
 
 @customElement("ef-scrubber")
 export class EFScrubber extends LitElement {