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

package/dist/elements/EFAudio.d.ts

@@ -1,5 +1,5 @@
-import { EFMedia } from './EFMedia.ts';
 import { Task } from '@lit/task';
+import { EFMedia } from './EFMedia.js';
 export declare class EFAudio extends EFMedia {
     audioElementRef: import('lit-html/directives/ref.js').Ref<HTMLAudioElement>;
     src: string;

package/dist/elements/EFAudio.js

@@ -1,8 +1,8 @@
+import { Task } from "@lit/task";
 import { html } from "lit";
-import { createRef, ref } from "lit/directives/ref.js";
 import { property, customElement } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
 import { EFMedia } from "./EFMedia.js";
-import { Task } from "@lit/task";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {

package/dist/elements/EFCaptions.d.ts

@@ -1,8 +1,8 @@
 import { Task } from '@lit/task';
 import { LitElement, PropertyValueMap } from 'lit';
-import { EFAudio } from './EFAudio.ts';
-import { EFVideo } from './EFVideo.ts';
-declare const EFCaptionsActiveWord_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
+import { EFAudio } from './EFAudio.js';
+import { EFVideo } from './EFVideo.js';
+declare const EFCaptionsActiveWord_base: (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & typeof LitElement;
 export declare class EFCaptionsActiveWord extends EFCaptionsActiveWord_base {
     static styles: import('lit').CSSResult[];
     render(): import('lit-html').TemplateResult<1> | undefined;
@@ -13,7 +13,7 @@ export declare class EFCaptionsActiveWord extends EFCaptionsActiveWord_base {
     get startTimeMs(): number;
     get durationMs(): number;
 }
-declare const EFCaptionsSegment_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
+declare const EFCaptionsSegment_base: (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & typeof LitElement;
 export declare class EFCaptionsSegment extends EFCaptionsSegment_base {
     static styles: import('lit').CSSResult[];
     render(): import('lit-html').TemplateResult<1> | undefined;
@@ -44,7 +44,7 @@ export declare class EFCaptionsAfterActiveWord extends EFCaptionsSegment {
     get startTimeMs(): number;
     get durationMs(): number;
 }
-declare const EFCaptions_base: (new (...args: any[]) => import('./EFSourceMixin.ts').EFSourceMixinInterface) & (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & (new (...args: any[]) => import('./FetchMixin.ts').FetchMixinInterface) & typeof LitElement;
+declare const EFCaptions_base: (new (...args: any[]) => import('./EFSourceMixin.js').EFSourceMixinInterface) & (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & (new (...args: any[]) => import('./FetchMixin.js').FetchMixinInterface) & typeof LitElement;
 export declare class EFCaptions extends EFCaptions_base {
     static styles: import('lit').CSSResult[];
     displayMode: "word" | "segment" | "context";

package/dist/elements/EFImage.d.ts

@@ -1,6 +1,6 @@
 import { Task } from '@lit/task';
 import { LitElement } from 'lit';
-declare const EFImage_base: (new (...args: any[]) => import('./EFSourceMixin.ts').EFSourceMixinInterface) & (new (...args: any[]) => import('./FetchMixin.ts').FetchMixinInterface) & typeof LitElement;
+declare const EFImage_base: (new (...args: any[]) => import('./EFSourceMixin.js').EFSourceMixinInterface) & (new (...args: any[]) => import('./FetchMixin.js').FetchMixinInterface) & typeof LitElement;
 export declare class EFImage extends EFImage_base {
     #private;
     static styles: import('lit').CSSResult[];

package/dist/elements/EFMedia.browsertest.d.ts

@@ -1,4 +1,4 @@
-import { EFMedia } from './EFMedia.ts';
+import { EFMedia } from './EFMedia.js';
 declare class TestMedia extends EFMedia {
 }
 declare global {

package/dist/elements/EFMedia.d.ts

@@ -5,7 +5,7 @@ import { VideoAsset } from '../../../assets/src/EncodedAsset.ts';
 import { MP4File } from '../../../assets/src/MP4File.ts';
 import type * as MP4Box from "mp4box";
 export declare const deepGetMediaElements: (element: Element, medias?: EFMedia[]) => EFMedia[];
-declare const EFMedia_base: (new (...args: any[]) => import('./EFSourceMixin.ts').EFSourceMixinInterface) & (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & (new (...args: any[]) => import('./FetchMixin.ts').FetchMixinInterface) & typeof LitElement;
+declare const EFMedia_base: (new (...args: any[]) => import('./EFSourceMixin.js').EFSourceMixinInterface) & (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & (new (...args: any[]) => import('./FetchMixin.js').FetchMixinInterface) & typeof LitElement;
 export declare class EFMedia extends EFMedia_base {
     #private;
     static styles: import('lit').CSSResult[];

package/dist/elements/EFSourceMixin.js

@@ -1,7 +1,7 @@
 import { consume } from "@lit/context";
-import { state } from "lit/decorators/state.js";
 import { Task } from "@lit/task";
 import { property } from "lit/decorators/property.js";
+import { state } from "lit/decorators/state.js";
 import { apiHostContext } from "../gui/apiHostContext.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/dist/elements/EFTemporal.browsertest.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-declare const TestTemporal_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
+declare const TestTemporal_base: (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & typeof LitElement;
 declare class TestTemporal extends TestTemporal_base {
 }
 declare global {

package/dist/elements/EFTemporal.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, ReactiveController } from 'lit';
-import { EFTimegroup } from './EFTimegroup.ts';
+import { EFTimegroup } from './EFTimegroup.js';
 import { Task } from '@lit/task';
 export declare const timegroupContext: {
     __context__: EFTimegroup;
@@ -20,6 +20,9 @@ export declare class TemporalMixinInterface {
     set sourceout(value: string);
     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;

package/dist/elements/EFTemporal.js

@@ -218,6 +218,9 @@ const EFTemporal = (superClass) => {
       }
       return parent;
     }
+    /**
+     * The start time of the element within its parent timegroup.
+     */
     get startTimeWithinParentMs() {
       if (!this.parentTemporal) {
         return 0;

package/dist/elements/EFTimegroup.browsertest.d.ts

@@ -1,8 +1,8 @@
 import { LitElement } from 'lit';
-declare const TestContext_base: (new (...args: any[]) => import('../gui/ContextMixin.ts').ContextMixinInterface) & typeof LitElement;
+declare const TestContext_base: (new (...args: any[]) => import('../gui/ContextMixin.js').ContextMixinInterface) & typeof LitElement;
 declare class TestContext extends TestContext_base {
 }
-declare const TestTemporal_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
+declare const TestTemporal_base: (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & typeof LitElement;
 declare class TestTemporal extends TestTemporal_base {
     get hasOwnDuration(): boolean;
 }

package/dist/elements/EFTimegroup.d.ts

@@ -1,7 +1,7 @@
 import { Task } from '@lit/task';
 import { LitElement, PropertyValueMap } from 'lit';
 export declare const shallowGetTimegroups: (element: Element, groups?: EFTimegroup[]) => EFTimegroup[];
-declare const EFTimegroup_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
+declare const EFTimegroup_base: (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & typeof LitElement;
 export declare class EFTimegroup extends EFTimegroup_base {
     #private;
     static styles: import('lit').CSSResult;
@@ -28,9 +28,9 @@ export declare class EFTimegroup extends EFTimegroup_base {
         buffer: import('mp4box').MP4ArrayBuffer;
         mp4File: import('../../../assets/src/MP4File.ts').MP4File;
     }[] | undefined)[]>;
-    get childTemporals(): import('./EFTemporal.ts').TemporalMixinInterface[];
+    get childTemporals(): import('./EFTemporal.js').TemporalMixinInterface[];
     protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
-    get contextProvider(): import('../gui/ContextMixin.ts').ContextMixinInterface | null;
+    get contextProvider(): import('../gui/ContextMixin.js').ContextMixinInterface | null;
     /**
      * Returns true if the timegroup should be wrapped with a workbench.
      *

package/dist/elements/EFVideo.d.ts

@@ -1,5 +1,5 @@
 import { Task } from '@lit/task';
-import { EFMedia } from './EFMedia.ts';
+import { EFMedia } from './EFMedia.js';
 declare const EFVideo_base: typeof EFMedia;
 export declare class EFVideo extends EFVideo_base {
     #private;

package/dist/elements/EFWaveform.d.ts

@@ -1,13 +1,15 @@
-import { EFAudio } from './EFAudio.ts';
+import { EFAudio } from './EFAudio.js';
 import { Task } from '@lit/task';
 import { LitElement, PropertyValueMap } from 'lit';
 import { Ref } from 'lit/directives/ref.js';
-import { EFVideo } from './EFVideo.ts';
-declare const EFWaveform_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
+import { EFVideo } from './EFVideo.js';
+declare const EFWaveform_base: (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & typeof LitElement;
 export declare class EFWaveform extends EFWaveform_base {
     static styles: import('lit').CSSResult[];
     canvasRef: Ref<HTMLCanvasElement>;
     private ctx;
+    private resizeObserver?;
+    private mutationObserver?;
     createRenderRoot(): this;
     render(): import('lit-html').TemplateResult<1>;
     mode: "roundBars" | "bars" | "bricks" | "equalizer" | "curve" | "line" | "pixel" | "wave";
@@ -15,6 +17,8 @@ export declare class EFWaveform extends EFWaveform_base {
     targetSelector: string;
     set target(value: string);
     connectedCallback(): void;
+    disconnectedCallback(): void;
+    private resizeCanvas;
     protected initCanvas(): CanvasRenderingContext2D | null;
     protected drawBars(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
     protected drawBricks(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
@@ -24,7 +28,6 @@ export declare class EFWaveform extends EFWaveform_base {
     protected drawCurve(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
     protected drawPixel(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
     protected drawWave(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
-    private lastFrameTime;
     frameTask: Task<readonly [import('@lit/task').TaskStatus], void>;
     get durationMs(): number;
     get targetElement(): EFAudio | EFVideo;

package/dist/elements/EFWaveform.js

@@ -26,53 +26,39 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     this.mode = "bars";
     this.color = "currentColor";
     this.targetSelector = "";
-    this.lastFrameTime = 0;
     this.frameTask = new Task(this, {
       autoRun: EF_INTERACTIVE,
       args: () => [this.targetElement.audioBufferTask.status],
       task: async () => {
-        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;
         this.ctx ||= this.initCanvas();
         const ctx = this.ctx;
         if (!ctx) return;
         if (!this.targetElement.audioBufferTask.value) return;
         if (this.targetElement.trimAdjustedOwnCurrentTimeMs > 0) {
-          const FRAMES_TO_ANALYZE = 4;
-          const FRAME_DURATION_MS = 48e3 / 100;
-          const multiFrameData = [];
-          for (let i = 0; i < FRAMES_TO_ANALYZE; i++) {
-            const frameOffset = i - Math.floor(FRAMES_TO_ANALYZE / 2);
-            const audioContext = new OfflineAudioContext(2, 48e3 / 25, 48e3);
-            const audioBufferSource = audioContext.createBufferSource();
-            audioBufferSource.buffer = this.targetElement.audioBufferTask.value.buffer;
-            const analyser = audioContext.createAnalyser();
-            analyser.fftSize = 128 / 2;
-            analyser.smoothingTimeConstant = 0.1;
-            audioBufferSource.connect(analyser);
-            const startTime = Math.max(
-              0,
-              (this.targetElement.trimAdjustedOwnCurrentTimeMs - this.targetElement.audioBufferTask.value.startOffsetMs) / 1e3 + frameOffset * FRAME_DURATION_MS / 1e3
-            );
-            audioBufferSource.start(0, startTime, FRAME_DURATION_MS / 1e3);
-            await audioContext.startRendering();
-            const frameData = new Uint8Array(analyser.frequencyBinCount);
-            analyser.getByteFrequencyData(frameData);
-            multiFrameData.push(frameData);
-          }
-          const dataLength = multiFrameData[0]?.length ?? 0;
-          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;
-            avg = (avg / 255) ** 1.2 * 255;
-            smoothedData[i] = Math.round(avg);
+          const FRAME_DURATION_MS = 48e3 / 1e3;
+          const FRAME_SMEAR_MS = FRAME_DURATION_MS * 1;
+          const FRAME_SMEAR_S = FRAME_SMEAR_MS / 1e3;
+          const audioContext = new OfflineAudioContext(2, 48e3 / 25, 48e3);
+          const audioBufferSource = audioContext.createBufferSource();
+          audioBufferSource.buffer = this.targetElement.audioBufferTask.value.buffer;
+          const analyser = audioContext.createAnalyser();
+          analyser.fftSize = 128 * 8;
+          audioBufferSource.connect(analyser);
+          const startTime = Math.max(
+            0,
+            (this.targetElement.trimAdjustedOwnCurrentTimeMs - this.targetElement.audioBufferTask.value.startOffsetMs) / 1e3
+          );
+          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;
           }
           switch (this.mode) {
             case "bars":
@@ -118,9 +104,31 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     if (this.targetElement) {
       new CrossUpdateController(this.targetElement, this);
     }
+    this.resizeObserver = new ResizeObserver(() => {
+      this.resizeCanvas();
+    });
+    this.resizeObserver.observe(this);
+    this.mutationObserver = new MutationObserver((mutationsList) => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === "attributes") {
+          this.frameTask.run();
+        }
+      }
+    });
+    this.mutationObserver.observe(this, { attributes: true });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver?.disconnect();
+    this.mutationObserver?.disconnect();
+  }
+  resizeCanvas() {
+    this.ctx = this.initCanvas();
+    if (this.ctx) {
+      this.frameTask.run();
+    }
   }
   initCanvas() {
-    console.count("initCanvas");
     const canvas = this.canvasRef.value;
     if (!canvas) return null;
     const rect = this.getBoundingClientRect();
@@ -135,8 +143,6 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     return ctx;
   }
   drawBars(ctx, frequencyData) {
-    ctx.strokeStyle = this.color;
-    ctx.fillStyle = this.color;
     const canvas = ctx.canvas;
     const waveWidth = canvas.width / devicePixelRatio;
     const waveHeight = canvas.height / devicePixelRatio;
@@ -151,8 +157,6 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     });
   }
   drawBricks(ctx, frequencyData) {
-    ctx.strokeStyle = this.color;
-    ctx.fillStyle = this.color;
     const canvas = ctx.canvas;
     const waveWidth = canvas.width / devicePixelRatio;
     const waveHeight = canvas.height / devicePixelRatio;
@@ -176,8 +180,6 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     });
   }
   drawLine(ctx, frequencyData) {
-    ctx.strokeStyle = this.color;
-    ctx.fillStyle = this.color;
     const canvas = ctx.canvas;
     const waveWidth = canvas.width / devicePixelRatio;
     const waveHeight = canvas.height / devicePixelRatio;
@@ -196,8 +198,6 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     ctx.stroke();
   }
   drawRoundBars(ctx, frequencyData) {
-    ctx.strokeStyle = this.color;
-    ctx.fillStyle = this.color;
     const canvas = ctx.canvas;
     const waveWidth = canvas.width / devicePixelRatio;
     const waveHeight = canvas.height / devicePixelRatio;
@@ -216,8 +216,6 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     });
   }
   drawEqualizer(ctx, frequencyData) {
-    ctx.strokeStyle = this.color;
-    ctx.fillStyle = this.color;
     const canvas = ctx.canvas;
     const waveWidth = canvas.width / devicePixelRatio;
     const waveHeight = canvas.height / devicePixelRatio;
@@ -237,8 +235,6 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     });
   }
   drawCurve(ctx, frequencyData) {
-    ctx.strokeStyle = this.color;
-    ctx.fillStyle = this.color;
     const canvas = ctx.canvas;
     const waveWidth = canvas.width / devicePixelRatio;
     const waveHeight = canvas.height / devicePixelRatio;
@@ -257,8 +253,6 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     ctx.stroke();
   }
   drawPixel(ctx, frequencyData) {
-    ctx.strokeStyle = this.color;
-    ctx.fillStyle = this.color;
     const canvas = ctx.canvas;
     const waveWidth = canvas.width / devicePixelRatio;
     const waveHeight = canvas.height / devicePixelRatio;
@@ -273,8 +267,6 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     });
   }
   drawWave(ctx, frequencyData) {
-    ctx.strokeStyle = this.color;
-    ctx.fillStyle = this.color;
     const canvas = ctx.canvas;
     const waveWidth = canvas.width / devicePixelRatio;
     const waveHeight = canvas.height / devicePixelRatio;
@@ -285,7 +277,7 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     ctx.moveTo(0, baseline);
     ctx.lineTo(waveWidth, baseline);
     ctx.strokeStyle = this.color;
-    ctx.lineWidth = 2;
+    ctx.lineWidth = 1;
     ctx.stroke();
     frequencyData.forEach((value, i) => {
       const x = i * (waveWidth / frequencyData.length);
@@ -306,7 +298,7 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
   }
   updated(changedProperties) {
     super.updated(changedProperties);
-    if (changedProperties.has("color") || changedProperties.has("mode")) {
+    if (changedProperties.size > 0) {
       this.frameTask.run();
     }
   }

package/dist/elements/TimegroupController.d.ts

@@ -1,5 +1,5 @@
-import { ReactiveController, LitElement } from 'lit';
-import { EFTimegroup } from './EFTimegroup.ts';
+import { LitElement, ReactiveController } from 'lit';
+import { EFTimegroup } from './EFTimegroup.js';
 export declare class TimegroupController implements ReactiveController {
     private host;
     private child;

package/dist/elements/util.d.ts

@@ -1,3 +1,3 @@
-import { EFTimegroup } from './EFTimegroup.ts';
+import { EFTimegroup } from './EFTimegroup.js';
 export declare const getRootTimeGroup: (element: Element) => EFTimegroup | null;
 export declare const getStartTimeMs: (element: Element) => number;

package/dist/gui/ContextMixin.browsertest.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-declare const TestContext_base: (new (...args: any[]) => import('./ContextMixin.ts').ContextMixinInterface) & typeof LitElement;
+declare const TestContext_base: (new (...args: any[]) => import('./ContextMixin.js').ContextMixinInterface) & typeof LitElement;
 declare class TestContext extends TestContext_base {
 }
 declare global {

package/dist/gui/ContextMixin.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 import { createRef } from 'lit/directives/ref.js';
-import { EFTimegroup } from '../elements/EFTimegroup.ts';
+import { EFTimegroup } from '../elements/EFTimegroup.js';
 export declare class ContextMixinInterface extends LitElement {
     signingURL?: string;
     apiHost?: string;

package/dist/gui/EFFilmstrip.d.ts

@@ -1,11 +1,11 @@
 import { LitElement, PropertyValueMap, ReactiveController, TemplateResult, nothing } from 'lit';
-import { EFAudio } from '../elements/EFAudio.ts';
-import { EFImage } from '../elements/EFImage.ts';
-import { TemporalMixinInterface } from '../elements/EFTemporal.ts';
-import { EFTimegroup } from '../elements/EFTimegroup.ts';
-import { EFVideo } from '../elements/EFVideo.ts';
-import { TimegroupController } from '../elements/TimegroupController.ts';
-import { FocusContext } from './focusContext.ts';
+import { EFAudio } from '../elements/EFAudio.js';
+import { EFImage } from '../elements/EFImage.js';
+import { TemporalMixinInterface } from '../elements/EFTemporal.js';
+import { EFTimegroup } from '../elements/EFTimegroup.js';
+import { EFVideo } from '../elements/EFVideo.js';
+import { TimegroupController } from '../elements/TimegroupController.js';
+import { FocusContext } from './focusContext.js';
 declare class ElementFilmstripController implements ReactiveController {
     private host;
     private filmstrip;

package/dist/gui/EFPreview.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-declare const EFPreview_base: (new (...args: any[]) => import('./ContextMixin.ts').ContextMixinInterface) & typeof LitElement;
+declare const EFPreview_base: (new (...args: any[]) => import('./ContextMixin.js').ContextMixinInterface) & typeof LitElement;
 export declare class EFPreview extends EFPreview_base {
     static styles: import('lit').CSSResult[];
     render(): import('lit-html').TemplateResult<1>;

package/dist/gui/EFScrubber.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { ContextMixinInterface } from './ContextMixin.ts';
+import { ContextMixinInterface } from './ContextMixin.js';
 export declare class EFScrubber extends LitElement {
     static styles: import('lit').CSSResult[];
     context?: ContextMixinInterface | null;

package/dist/gui/EFTimeDisplay.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { ContextMixinInterface } from './ContextMixin.ts';
+import { ContextMixinInterface } from './ContextMixin.js';
 export declare class EFTimeDisplay extends LitElement {
     static styles: import('lit').CSSResult;
     context?: ContextMixinInterface | null;

package/dist/gui/EFToggleLoop.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { ContextMixinInterface } from './ContextMixin.ts';
+import { ContextMixinInterface } from './ContextMixin.js';
 export declare class EFToggleLoop extends LitElement {
     static styles: import('lit').CSSResult[];
     context?: ContextMixinInterface | null;

package/dist/gui/EFToggleLoop.js

@@ -1,6 +1,6 @@
+import { consume } from "@lit/context";
 import { css, LitElement, html } from "lit";
 import { customElement } from "lit/decorators.js";
-import { consume } from "@lit/context";
 import { efContext } from "./efContext.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/gui/EFTogglePlay.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { ContextMixinInterface } from './ContextMixin.ts';
+import { ContextMixinInterface } from './ContextMixin.js';
 export declare class EFTogglePlay extends LitElement {
     static styles: import('lit').CSSResult[];
     context?: ContextMixinInterface | null;

package/dist/gui/EFWorkbench.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, PropertyValueMap } from 'lit';
-declare const EFWorkbench_base: (new (...args: any[]) => import('./ContextMixin.ts').ContextMixinInterface) & typeof LitElement;
+declare const EFWorkbench_base: (new (...args: any[]) => import('./ContextMixin.js').ContextMixinInterface) & typeof LitElement;
 export declare class EFWorkbench extends EFWorkbench_base {
     static styles: import('lit').CSSResult[];
     disconnectedCallback(): void;

package/dist/gui/efContext.d.ts

@@ -1,4 +1,4 @@
-import { ContextMixinInterface } from './ContextMixin.ts';
+import { ContextMixinInterface } from './ContextMixin.js';
 export declare const efContext: {
     __context__: ContextMixinInterface | null;
 };

package/dist/index.d.ts

@@ -1,14 +1,14 @@
-export { EFTimegroup } from './elements/EFTimegroup.ts';
-export { EFImage } from './elements/EFImage.ts';
-export type { EFMedia } from './elements/EFMedia.ts';
-export { EFAudio } from './elements/EFAudio.ts';
-export { EFVideo } from './elements/EFVideo.ts';
-export { EFCaptions, EFCaptionsActiveWord, EFCaptionsSegment, EFCaptionsBeforeActiveWord, EFCaptionsAfterActiveWord, } from './elements/EFCaptions.ts';
-export { EFWaveform } from './elements/EFWaveform.ts';
-export { EFWorkbench } from './gui/EFWorkbench.ts';
-export { EFPreview } from './gui/EFPreview.ts';
-export { EFFilmstrip } from './gui/EFFilmstrip.ts';
-export { EFTogglePlay } from './gui/EFTogglePlay.ts';
-export { EFToggleLoop } from './gui/EFToggleLoop.ts';
-export { EFScrubber } from './gui/EFScrubber.ts';
-export { EFTimeDisplay } from './gui/EFTimeDisplay.ts';
+export { EFTimegroup } from './elements/EFTimegroup.js';
+export { EFImage } from './elements/EFImage.js';
+export type { EFMedia } from './elements/EFMedia.js';
+export { EFAudio } from './elements/EFAudio.js';
+export { EFVideo } from './elements/EFVideo.js';
+export { EFCaptions, EFCaptionsActiveWord, EFCaptionsSegment, EFCaptionsBeforeActiveWord, EFCaptionsAfterActiveWord, } from './elements/EFCaptions.js';
+export { EFWaveform } from './elements/EFWaveform.js';
+export { EFWorkbench } from './gui/EFWorkbench.js';
+export { EFPreview } from './gui/EFPreview.js';
+export { EFFilmstrip } from './gui/EFFilmstrip.js';
+export { EFTogglePlay } from './gui/EFTogglePlay.js';
+export { EFToggleLoop } from './gui/EFToggleLoop.js';
+export { EFScrubber } from './gui/EFScrubber.js';
+export { EFTimeDisplay } from './gui/EFTimeDisplay.js';

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@editframe/elements",
-  "version": "0.12.0-beta.15",
+  "version": "0.12.0-beta.18",
   "description": "",
   "exports": {
     ".": {
       "import": {
         "types": "./dist/index.d.ts",
-        "default": "./dist/elements/src/index.js"
+        "default": "./dist/index.js"
       }
     },
     "./styles.css": "./dist/style.css"
@@ -15,12 +15,13 @@
   "scripts": {
     "typecheck": "tsc --noEmit --emitDeclarationOnly false",
     "build": "vite build",
-    "build:watch": "vite build --watch"
+    "build:watch": "vite build --watch",
+    "typedoc": "typedoc --json ../../docs/elements.json --plugin typedoc-plugin-zod --excludeExternals ./src"
   },
   "author": "",
   "license": "UNLICENSED",
   "dependencies": {
-    "@editframe/assets": "0.12.0-beta.15",
+    "@editframe/assets": "0.12.0-beta.18",
     "@lit/context": "^1.1.2",
     "@lit/task": "^1.0.1",
     "d3": "^7.9.0",

package/src/elements/EFAudio.ts

@@ -1,8 +1,8 @@
+import { Task } from "@lit/task";
 import { html } from "lit";
-import { createRef, ref } from "lit/directives/ref.js";
 import { customElement, property } from "lit/decorators.js";
-import { EFMedia } from "./EFMedia.ts";
-import { Task } from "@lit/task";
+import { createRef, ref } from "lit/directives/ref.js";
+import { EFMedia } from "./EFMedia.js";
 
 @customElement("ef-audio")
 export class EFAudio extends EFMedia {

package/src/elements/EFCaptions.browsertest.ts

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