@editframe/elements 0.7.0-beta.10 → 0.7.0-beta.12

package/dist/EF_INTERACTIVE.d.ts

@@ -0,0 +1 @@
+export declare let EF_INTERACTIVE: boolean;

package/dist/{lib/av → assets/dist}/EncodedAsset.js

@@ -1,6 +1,6 @@
 import * as MP4Box from "mp4box";
 import debug from "debug";
-import { memoize } from "../util/memoize.js";
+import { memoize } from "./memoize.js";
 import { MP4File } from "./MP4File.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/{packages/elements/src/elements → elements}/EFAudio.d.ts

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

package/dist/{packages/elements/src/elements → elements}/EFCaptions.d.ts

@@ -1,9 +1,9 @@
-import { EFAudio } from './EFAudio';
 import { LitElement, PropertyValueMap } from 'lit';
 import { Task } from '@lit/task';
-import { EFVideo } from './EFVideo';
+import { EFVideo } from './EFVideo.ts';
+import { EFAudio } from './EFAudio.ts';
 
-declare const EFCaptionsActiveWord_base: (new (...args: any[]) => import('./EFTemporal').TemporalMixinInterface) & typeof LitElement;
+declare const EFCaptionsActiveWord_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
 export declare class EFCaptionsActiveWord extends EFCaptionsActiveWord_base {
     static styles: import('lit').CSSResult[];
     render(): import('lit-html').TemplateResult<1>;
@@ -13,7 +13,7 @@ export declare class EFCaptionsActiveWord extends EFCaptionsActiveWord_base {
     get startTimeMs(): number;
     get durationMs(): number;
 }
-declare const EFCaptions_base: (new (...args: any[]) => import('./EFSourceMixin').EFSourceMixinInterface) & (new (...args: any[]) => import('./EFTemporal').TemporalMixinInterface) & (new (...args: any[]) => import('./FetchMixin').FetchMixinInterface) & typeof LitElement;
+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;
 export declare class EFCaptions extends EFCaptions_base {
     static styles: import('lit').CSSResult[];
     target: null;

package/dist/{packages/elements/src/elements → elements}/EFImage.d.ts

@@ -1,11 +1,11 @@
 import { Task } from '@lit/task';
 import { LitElement } from 'lit';
 
-declare const EFImage_base: (new (...args: any[]) => import('./EFSourceMixin').EFSourceMixinInterface) & (new (...args: any[]) => import('./FetchMixin').FetchMixinInterface) & typeof LitElement;
+declare const EFImage_base: (new (...args: any[]) => import('./EFSourceMixin.ts').EFSourceMixinInterface) & (new (...args: any[]) => import('./FetchMixin.ts').FetchMixinInterface) & typeof LitElement;
 export declare class EFImage extends EFImage_base {
     static styles: import('lit').CSSResult[];
-    imageRef: import('lit-html/directives/ref').Ref<HTMLImageElement>;
-    canvasRef: import('lit-html/directives/ref').Ref<HTMLCanvasElement>;
+    imageRef: import('lit-html/directives/ref.js').Ref<HTMLImageElement>;
+    canvasRef: import('lit-html/directives/ref.js').Ref<HTMLCanvasElement>;
     render(): import('lit-html').TemplateResult<1>;
     assetPath(): string;
     fetchImage: Task<readonly [string, typeof fetch], void>;

package/dist/{packages/elements/src/elements → elements}/EFMedia.d.ts

@@ -1,12 +1,12 @@
 import { LitElement, PropertyValueMap } from 'lit';
 import { Task } from '@lit/task';
 import { TrackFragmentIndex, TrackSegment } from '../../../assets/src';
-import { MP4File } from '../../../../lib/av/MP4File';
-import { VideoAsset } from '../../../../lib/av/EncodedAsset';
+import { MP4File } from '../../../assets/MP4File.js/src';
+import { VideoAsset } from '../../../assets/EncodedAsset.js/src';
 
 import type * as MP4Box from "mp4box";
 export declare const deepGetMediaElements: (element: Element, medias?: EFMedia[]) => EFMedia[];
-declare const EFMedia_base: (new (...args: any[]) => import('./EFSourceMixin').EFSourceMixinInterface) & (new (...args: any[]) => import('./EFTemporal').TemporalMixinInterface) & (new (...args: any[]) => import('./FetchMixin').FetchMixinInterface) & typeof LitElement;
+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;
 export declare class EFMedia extends EFMedia_base {
     #private;
     static styles: import('lit').CSSResult[];

package/dist/{packages/elements/src/elements → elements}/EFTemporal.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, ReactiveController } from 'lit';
-import { EFTimegroup } from './EFTimegroup';
+import { EFTimegroup } from './EFTimegroup.ts';
 import { Task } from '@lit/task';
 
 export declare const timegroupContext: {

package/dist/{packages/elements/src/elements → elements}/EFTimegroup.browsertest.d.ts

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

package/dist/{packages/elements/src/elements → elements}/EFTimegroup.d.ts

@@ -2,7 +2,7 @@ import { LitElement, PropertyValueMap } from 'lit';
 import { Task } from '@lit/task';
 
 export declare const shallowGetTimegroups: (element: Element, groups?: EFTimegroup[]) => EFTimegroup[];
-declare const EFTimegroup_base: (new (...args: any[]) => import('./EFTemporal').TemporalMixinInterface) & typeof LitElement;
+declare const EFTimegroup_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
 export declare class EFTimegroup extends EFTimegroup_base {
     #private;
     static styles: import('lit').CSSResult;
@@ -20,8 +20,8 @@ export declare class EFTimegroup extends EFTimegroup_base {
     get crossoverStartMs(): number;
     get crossoverEndMs(): number;
     get durationMs(): number;
-    waitForMediaDurations(): Promise<Record<number, import('../../../assets/src').TrackFragmentIndex>[]>;
-    get childTemporals(): import('./EFTemporal').TemporalMixinInterface[];
+    waitForMediaDurations(): Promise<Record<number, import('packages/assets/dist/Probe.js').TrackFragmentIndex>[]>;
+    get childTemporals(): import('./EFTemporal.ts').TemporalMixinInterface[];
     protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     shouldWrapWithWorkbench(): boolean;
     wrapWithWorkbench(): void;

package/dist/{packages/elements/src/elements → elements}/EFVideo.d.ts

@@ -1,14 +1,14 @@
 import { Task } from '@lit/task';
-import { EFMedia } from './EFMedia';
+import { EFMedia } from './EFMedia.ts';
 
 declare const EFVideo_base: typeof EFMedia;
 export declare class EFVideo extends EFVideo_base {
     #private;
     static styles: import('lit').CSSResult[];
-    canvasRef: import('lit-html/directives/ref').Ref<HTMLCanvasElement>;
+    canvasRef: import('lit-html/directives/ref.js').Ref<HTMLCanvasElement>;
     render(): import('lit-html').TemplateResult<1>;
     get canvasElement(): HTMLCanvasElement | undefined;
     frameTask: Task<readonly [import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus], void>;
-    paintTask: Task<readonly [import('../../../../lib/av/EncodedAsset').VideoAsset | undefined, number], number | undefined>;
+    paintTask: Task<readonly [import('packages/assets/dist/EncodedAsset.js').VideoAsset | undefined, number], number | undefined>;
 }
 export {};

package/dist/{packages/elements/src/elements → elements}/EFWaveform.d.ts

@@ -1,10 +1,10 @@
-import { EFAudio } from './EFAudio';
+import { EFAudio } from './EFAudio.ts';
 import { LitElement } from 'lit';
-import { EFVideo } from './EFVideo';
+import { EFVideo } from './EFVideo.ts';
 import { Task } from '@lit/task';
 import { Ref } from 'lit/directives/ref.js';
 
-declare const EFWaveform_base: (new (...args: any[]) => import('./EFTemporal').TemporalMixinInterface) & typeof LitElement;
+declare const EFWaveform_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
 export declare class EFWaveform extends EFWaveform_base {
     static styles: never[];
     svgRef: Ref<SVGElement>;

package/dist/{packages/elements/src/elements → elements}/TimegroupController.d.ts

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

package/dist/{packages/elements → elements}/src/EF_FRAMEGEN.js

@@ -1,6 +1,5 @@
 import debug from "debug";
 import { TaskStatus } from "@lit/task";
-import { awaitMicrotask } from "../../../lib/util/awaitMicrotask.js";
 import { deepGetElementsWithFrameTasks } from "./elements/EFTemporal.js";
 import { shallowGetTimegroups } from "./elements/EFTimegroup.js";
 const log = debug("ef:elements:EF_FRAMEGEN");
@@ -136,7 +135,7 @@ class EfFramegen {
     log("Awaiting initialBusyTasks");
     await this.initialBusyTasks;
     log("Awaiting microtask");
-    await awaitMicrotask();
+    await new Promise(queueMicrotask);
     log("Awaiting frame tasks");
     const now = performance.now();
     await Promise.all(
@@ -191,7 +190,9 @@ class EfFramegen {
     }
   }
 }
-window.EF_FRAMEGEN = new EfFramegen();
+if (typeof window !== "undefined") {
+  window.EF_FRAMEGEN = new EfFramegen();
+}
 export {
   EfFramegen
 };

package/dist/elements/src/EF_INTERACTIVE.js

@@ -0,0 +1,7 @@
+let EF_INTERACTIVE = false;
+if (typeof window !== "undefined") {
+  EF_INTERACTIVE = !window.location?.search.includes("EF_NONINTERACTIVE");
+}
+export {
+  EF_INTERACTIVE
+};

package/dist/{packages/elements → elements}/src/elements/EFMedia.js

@@ -4,9 +4,9 @@ import { deepArrayEquals } from "@lit/task/deep-equals.js";
 import { Task } from "@lit/task";
 import { consume } from "@lit/context";
 import debug from "debug";
-import { MP4File } from "../../../../lib/av/MP4File.js";
+import { MP4File } from "../../../assets/dist/MP4File.js";
+import { VideoAsset } from "../../../assets/dist/EncodedAsset.js";
 import { EFTemporal } from "./EFTemporal.js";
-import { VideoAsset } from "../../../../lib/av/EncodedAsset.js";
 import { FetchMixin } from "./FetchMixin.js";
 import { apiHostContext } from "../gui/EFWorkbench.js";
 import { EFSourceMixin } from "./EFSourceMixin.js";

package/dist/{packages/elements → elements}/src/elements/EFTemporal.js

@@ -36,7 +36,19 @@ const deepGetElementsWithFrameTasks = (element, elements = []) => {
   }
   return elements;
 };
+let temporalCache;
+const resetTemporalCache = () => {
+  temporalCache = /* @__PURE__ */ new Map();
+  if (typeof requestAnimationFrame !== "undefined") {
+    requestAnimationFrame(resetTemporalCache);
+  }
+};
+resetTemporalCache();
 const shallowGetTemporalElements = (element, temporals = []) => {
+  const cachedResult = temporalCache.get(element);
+  if (cachedResult) {
+    return cachedResult;
+  }
   for (const child of element.children) {
     if (isEFTemporal(child)) {
       temporals.push(child);
@@ -44,6 +56,7 @@ const shallowGetTemporalElements = (element, temporals = []) => {
       shallowGetTemporalElements(child, temporals);
     }
   }
+  temporalCache.set(element, temporals);
   return temporals;
 };
 class OwnCurrentTimeController {
@@ -59,6 +72,14 @@ class OwnCurrentTimeController {
     this.host.removeController(this);
   }
 }
+let startTimeMsCache = /* @__PURE__ */ new WeakMap();
+const resetStartTimeMsCache = () => {
+  startTimeMsCache = /* @__PURE__ */ new WeakMap();
+  if (typeof requestAnimationFrame !== "undefined") {
+    requestAnimationFrame(resetStartTimeMsCache);
+  }
+};
+resetStartTimeMsCache();
 const EFTemporal = (superClass) => {
   class TemporalMixinClass extends superClass {
     constructor() {
@@ -123,27 +144,41 @@ const EFTemporal = (superClass) => {
       return this.startTimeMs - this.parentTemporal.startTimeMs;
     }
     get startTimeMs() {
+      const cachedStartTime = startTimeMsCache.get(this);
+      if (cachedStartTime !== void 0) {
+        return cachedStartTime;
+      }
       const parentTimegroup = this.parentTimegroup;
       if (!parentTimegroup) {
+        startTimeMsCache.set(this, 0);
         return 0;
       }
       switch (parentTimegroup.mode) {
         case "sequence": {
           const siblingTemorals = shallowGetTemporalElements(parentTimegroup);
-          const ownIndex = siblingTemorals.indexOf(
+          const ownIndex = siblingTemorals?.indexOf(
             this
           );
           if (ownIndex === 0) {
+            startTimeMsCache.set(this, parentTimegroup.startTimeMs);
             return parentTimegroup.startTimeMs;
           }
-          const previous = siblingTemorals[ownIndex - 1];
+          const previous = siblingTemorals?.[(ownIndex ?? 0) - 1];
           if (!previous) {
             throw new Error("Previous temporal element not found");
           }
+          startTimeMsCache.set(
+            this,
+            previous.startTimeMs + previous.durationMs
+          );
           return previous.startTimeMs + previous.durationMs;
         }
         case "contain":
         case "fixed":
+          startTimeMsCache.set(
+            this,
+            parentTimegroup.startTimeMs + this.offsetMs
+          );
           return parentTimegroup.startTimeMs + this.offsetMs;
         default:
           throw new Error(`Invalid time mode: ${parentTimegroup.mode}`);

package/dist/{packages/elements → elements}/src/gui/EFFilmstrip.js

@@ -12,7 +12,7 @@ import { TimegroupController } from "../elements/TimegroupController.js";
 import { consume } from "@lit/context";
 import { focusContext, focusedElement } from "./EFWorkbench.js";
 import { TWMixin } from "./TWMixin.js";
-import { msToTimeCode } from "../../../../lib/av/msToTimeCode.js";
+import { msToTimeCode } from "../msToTimeCode.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __typeError = (msg) => {
@@ -168,7 +168,7 @@ __decorateClass([
   consume({ context: focusedElement, subscribe: true })
 ], FilmstripItem.prototype, "focusedElement", 2);
 __decorateClass([
-  property({ type: HTMLElement, attribute: false })
+  property({ type: Object, attribute: false })
 ], FilmstripItem.prototype, "element", 2);
 __decorateClass([
   property({ type: Number })
@@ -292,7 +292,7 @@ let EFHierarchyItem = class extends TWMixin(LitElement) {
   }
 };
 __decorateClass([
-  property({ type: HTMLElement, attribute: false })
+  property({ type: Object, attribute: false })
 ], EFHierarchyItem.prototype, "element", 2);
 __decorateClass([
   consume({ context: focusContext })

package/dist/{packages/elements → elements}/src/gui/EFWorkbench.js

@@ -3,7 +3,6 @@ import { css, html, LitElement } from "lit";
 import { TaskStatus } from "@lit/task";
 import { state, eventOptions, property, customElement } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
-import { awaitMicrotask } from "../../../../lib/util/awaitMicrotask.js";
 import { deepGetTemporalElements } from "../elements/EFTemporal.js";
 import { TWMixin } from "./TWMixin.js";
 import { shallowGetTimegroups } from "../elements/EFTimegroup.js";
@@ -161,7 +160,7 @@ let EFWorkbench = class extends TWMixin(LitElement) {
     await Promise.all(busyTasks.map((task) => task.taskComplete));
     for (let i = 0; i < frameCount; i++) {
       firstGroup.currentTimeMs = i * stepDurationMs;
-      await awaitMicrotask();
+      await new Promise(queueMicrotask);
       const busyTasks2 = temporals.filter((temporal) => temporal.frameTask.status < TaskStatus.COMPLETE).map((temporal) => temporal.frameTask);
       await Promise.all(busyTasks2.map((task) => task.taskComplete));
       await new Promise((resolve) => requestAnimationFrame(resolve));

package/dist/{packages/elements → elements}/src/gui/TWMixin.js

@@ -1,6 +1,9 @@
 import twStyle from "./TWMixin.css.js";
-const twSheet = new CSSStyleSheet();
-twSheet.replaceSync(twStyle);
+let twSheet = null;
+if (typeof window !== "undefined") {
+  twSheet = new CSSStyleSheet();
+  twSheet.replaceSync(twStyle);
+}
 function TWMixin(Base) {
   class TWElement extends Base {
     createRenderRoot() {
@@ -10,6 +13,11 @@ function TWMixin(Base) {
           "TWMixin can only be applied to elements with shadow roots"
         );
       }
+      if (!twSheet) {
+        throw new Error(
+          "twSheet not found. Probable cause: CSSStyleSheet not supported in this environment"
+        );
+      }
       if (renderRoot?.adoptedStyleSheets) {
         renderRoot.adoptedStyleSheets = [
           twSheet,

package/dist/{packages/elements → elements}/src/index.js

@@ -9,7 +9,9 @@ import { EFWaveform } from "./elements/EFWaveform.js";
 import { EFWorkbench } from "./gui/EFWorkbench.js";
 import { EFFilmstrip } from "./gui/EFFilmstrip.js";
 import "./EF_FRAMEGEN.js";
-window.EF_REGISTERED = true;
+if (typeof window !== "undefined") {
+  window.EF_REGISTERED = true;
+}
 export {
   EFAudio,
   EFCaptions,

package/dist/{packages/elements/src/elements → elements}/util.d.ts

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

package/dist/{packages/elements/src/gui → gui}/EFFilmstrip.d.ts

@@ -1,11 +1,11 @@
-import { EFTimegroup } from '../elements/EFTimegroup';
+import { EFTimegroup } from '../elements/EFTimegroup.ts';
 import { LitElement, nothing, TemplateResult, ReactiveController, PropertyValueMap } from 'lit';
-import { EFImage } from '../elements/EFImage';
-import { EFAudio } from '../elements/EFAudio';
-import { EFVideo } from '../elements/EFVideo';
-import { TemporalMixinInterface } from '../elements/EFTemporal';
-import { TimegroupController } from '../elements/TimegroupController';
-import { FocusContext } from './EFWorkbench';
+import { EFImage } from '../elements/EFImage.ts';
+import { EFAudio } from '../elements/EFAudio.ts';
+import { EFVideo } from '../elements/EFVideo.ts';
+import { TemporalMixinInterface } from '../elements/EFTemporal.ts';
+import { TimegroupController } from '../elements/TimegroupController.ts';
+import { FocusContext } from './EFWorkbench.ts';
 
 declare class ElementFilmstripController implements ReactiveController {
     private host;
@@ -115,9 +115,9 @@ export declare class EFFilmstrip extends EFFilmstrip_base {
     scrub(e: MouseEvent): void;
     startScrub(e: MouseEvent): void;
     scrollScrub(e: WheelEvent): void;
-    gutterRef: import('lit-html/directives/ref').Ref<HTMLDivElement>;
-    hierarchyRef: import('lit-html/directives/ref').Ref<HTMLDivElement>;
-    playheadRef: import('lit-html/directives/ref').Ref<HTMLDivElement>;
+    gutterRef: import('lit-html/directives/ref.js').Ref<HTMLDivElement>;
+    hierarchyRef: import('lit-html/directives/ref.js').Ref<HTMLDivElement>;
+    playheadRef: import('lit-html/directives/ref.js').Ref<HTMLDivElement>;
     get gutter(): HTMLDivElement | undefined;
     render(): TemplateResult<1>;
     update(changedProperties: Map<string | number | symbol, unknown>): void;

package/dist/{packages/elements/src/gui → gui}/EFWorkbench.d.ts

@@ -18,8 +18,8 @@ export declare const apiHostContext: {
 declare const EFWorkbench_base: typeof LitElement;
 export declare class EFWorkbench extends EFWorkbench_base {
     static styles: import('lit').CSSResult[];
-    stageRef: import('lit-html/directives/ref').Ref<HTMLDivElement>;
-    canvasRef: import('lit-html/directives/ref').Ref<HTMLSlotElement>;
+    stageRef: import('lit-html/directives/ref.js').Ref<HTMLDivElement>;
+    canvasRef: import('lit-html/directives/ref.js').Ref<HTMLSlotElement>;
     stageScale: number;
     setStageScale: () => void;
     connectedCallback(): void;
@@ -31,7 +31,7 @@ export declare class EFWorkbench extends EFWorkbench_base {
     apiToken?: string;
     apiHost: string;
     rendering: boolean;
-    focusOverlay: import('lit-html/directives/ref').Ref<HTMLDivElement>;
+    focusOverlay: import('lit-html/directives/ref.js').Ref<HTMLDivElement>;
     update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     drawOverlays: () => void;
     render(): import('lit-html').TemplateResult<1>;

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+
+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 } from './elements/EFCaptions.ts';
+export { EFWaveform } from './elements/EFWaveform.ts';
+export { EFWorkbench } from './gui/EFWorkbench.ts';
+export { EFFilmstrip } from './gui/EFFilmstrip.ts';

package/dist/msToTimeCode.d.ts

@@ -0,0 +1 @@
+export declare const msToTimeCode: (ms: number, subSecond?: boolean) => string;

package/dist/style.css

@@ -740,6 +740,7 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+
 html {
   height: 100%;
   width: 100%;
@@ -750,6 +751,7 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
+
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
@@ -761,30 +763,37 @@ body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
 }
+
 .hover\:bg-blue-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(96 165 250 / var(--tw-bg-opacity));
 }
+
 .hover\:bg-slate-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(148 163 184 / var(--tw-bg-opacity));
 }
+
 .peer:hover ~ .peer-hover\:border-slate-400 {
   --tw-border-opacity: 1;
   border-color: rgb(148 163 184 / var(--tw-border-opacity));
 }
+
 .peer:hover ~ .peer-hover\:bg-slate-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(203 213 225 / var(--tw-bg-opacity));
 }
+
 .data-\[focused\]\:bg-slate-400[data-focused] {
   --tw-bg-opacity: 1;
   background-color: rgb(148 163 184 / var(--tw-bg-opacity));
 }
+
 .peer[data-focused] ~ .peer-data-\[focused\]\:border-slate-400 {
   --tw-border-opacity: 1;
   border-color: rgb(148 163 184 / var(--tw-border-opacity));
 }
+
 .peer[data-focused] ~ .peer-data-\[focused\]\:bg-slate-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(203 213 225 / var(--tw-bg-opacity));

package/package.json

@@ -1,16 +1,12 @@
 {
   "name": "@editframe/elements",
-  "version": "0.7.0-beta.10",
+  "version": "0.7.0-beta.12",
   "description": "",
   "exports": {
     ".": {
       "import": {
-        "default": "./dist/packages/elements/src/index.js",
-        "types": "./dist/packages/elements/src/index.d.ts"
-      },
-      "require": {
-        "default": "./dist/packages/elements/src/index.cjs",
-        "types": "./dist/packages/elements/src/index.d.ts"
+        "types": "./dist/index.d.ts",
+        "default": "./dist/elements/src/index.js"
       }
     },
     "./styles.css": "./dist/style.css"
@@ -24,7 +20,7 @@
   "author": "",
   "license": "UNLICENSED",
   "dependencies": {
-    "@editframe/assets": "0.7.0-beta.10",
+    "@editframe/assets": "0.7.0-beta.12",
     "@lit/context": "^1.1.2",
     "@lit/task": "^1.0.1",
     "d3": "^7.9.0",
@@ -35,9 +31,10 @@
   "devDependencies": {
     "@types/d3": "^7.4.3",
     "@types/dom-webcodecs": "^0.1.11",
-    "@types/node": "^20.14.9",
+    "@types/node": "^20.14.13",
     "autoprefixer": "^10.4.19",
     "rollup-plugin-tsconfig-paths": "^1.5.2",
+    "typescript": "^5.5.4",
     "vite-plugin-dts": "^3.9.1",
     "vite-tsconfig-paths": "^4.3.2"
   }

package/src/elements/EFAudio.ts

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

package/src/elements/EFCaptions.ts

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

package/src/elements/EFImage.ts

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

package/src/elements/EFMedia.ts

@@ -8,14 +8,14 @@ import debug from "debug";
 
 import type { TrackFragmentIndex, TrackSegment } from "@editframe/assets";
 
-import { MP4File } from "@/av/MP4File";
-import { EFTemporal } from "./EFTemporal";
-import { VideoAsset } from "@/av/EncodedAsset";
-import { FetchMixin } from "./FetchMixin";
-import { apiHostContext } from "../gui/EFWorkbench";
-import { EFSourceMixin } from "./EFSourceMixin";
-import { getStartTimeMs } from "./util";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE";
+import { MP4File } from "@editframe/assets/MP4File.js";
+import { VideoAsset } from "@editframe/assets/EncodedAsset.js";
+import { EFTemporal } from "./EFTemporal.ts";
+import { FetchMixin } from "./FetchMixin.ts";
+import { apiHostContext } from "../gui/EFWorkbench.ts";
+import { EFSourceMixin } from "./EFSourceMixin.ts";
+import { getStartTimeMs } from "./util.ts";
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
 
 const log = debug("ef:elements:EFMedia");
 

package/src/elements/EFSourceMixin.ts

@@ -1,6 +1,6 @@
 import { consume } from "@lit/context";
 import type { LitElement } from "lit";
-import { apiHostContext } from "../gui/EFWorkbench";
+import { apiHostContext } from "../gui/EFWorkbench.ts";
 import { state } from "lit/decorators/state.js";
 import { Task } from "@lit/task";
 import { property } from "lit/decorators/property.js";