@editframe/elements 0.7.0-beta.8 → 0.8.0-beta.1

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

@@ -1,6 +1,6 @@
-import { EFTimegroup } from "../elements/EFTimegroup.js";
 import { css, html, nothing, LitElement } from "lit";
 import { property, customElement, state, eventOptions } from "lit/decorators.js";
+import { consume } from "@lit/context";
 import { styleMap } from "lit/directives/style-map.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { EFImage } from "../elements/EFImage.js";
@@ -8,11 +8,13 @@ import { EFAudio } from "../elements/EFAudio.js";
 import { EFVideo } from "../elements/EFVideo.js";
 import { EFCaptions, EFCaptionsActiveWord } from "../elements/EFCaptions.js";
 import { EFWaveform } from "../elements/EFWaveform.js";
+import { EFTimegroup } from "../elements/EFTimegroup.js";
 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";
+import { focusedElementContext } from "./focusedElementContext.js";
+import { focusContext } from "./focusContext.js";
+import { playingContext } from "./playingContext.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __typeError = (msg) => {
@@ -27,11 +29,10 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _EFFilmstrip_instances, bindToTargetTimegroup_fn, _handleKeyPress, _lastTick, _playbackAudioContext, _playbackAnimationFrameRequest, _AUDIO_PLAYBACK_SLICE_MS, syncPlayheadToAudioContext_fn, stopPlayback_fn, startPlayback_fn;
+var _EFFilmstrip_instances, bindToTargetTimegroup_fn, _handleKeyPress, contextElement_get;
 class ElementFilmstripController {
   constructor(host, filmstrip) {
     this.host = host;
@@ -165,10 +166,10 @@ __decorateClass([
   consume({ context: focusContext, subscribe: true })
 ], FilmstripItem.prototype, "focusContext", 2);
 __decorateClass([
-  consume({ context: focusedElement, subscribe: true })
+  consume({ context: focusedElementContext, 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,13 +293,13 @@ 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 })
 ], EFHierarchyItem.prototype, "focusContext", 2);
 __decorateClass([
-  consume({ context: focusedElement, subscribe: true })
+  consume({ context: focusedElementContext, subscribe: true })
 ], EFHierarchyItem.prototype, "focusedElement", 2);
 EFHierarchyItem = __decorateClass([
   customElement("ef-hierarchy-item")
@@ -474,11 +475,9 @@ let EFFilmstrip = class extends TWMixin(LitElement) {
     super(...arguments);
     __privateAdd(this, _EFFilmstrip_instances);
     this.pixelsPerMs = 0.04;
-    this.currentTimeMs = 0;
-    this.targetSelector = "";
     this.scrubbing = false;
-    this.playing = false;
     this.timelineScrolltop = 0;
+    this.currentTimeMs = 0;
     __privateAdd(this, _handleKeyPress, (event) => {
       if (event.key === " ") {
         const interactiveSelector = "input, textarea, button, select, a, [contenteditable]";
@@ -489,25 +488,11 @@ let EFFilmstrip = class extends TWMixin(LitElement) {
           return;
         }
         event.preventDefault();
-        this.playing = !this.playing;
-      }
-    });
-    __privateAdd(this, _lastTick);
-    __privateAdd(this, _playbackAudioContext, null);
-    __privateAdd(this, _playbackAnimationFrameRequest, null);
-    __privateAdd(this, _AUDIO_PLAYBACK_SLICE_MS, 1e3);
-    this.advancePlayhead = (tick) => {
-      if (__privateGet(this, _lastTick) && tick && this.targetTimegroup) {
-        this.targetTimegroup.currentTimeMs += tick - __privateGet(this, _lastTick);
-        if (this.targetTimegroup.currentTimeMs >= this.targetTimegroup.durationMs) {
-          this.playing = false;
+        if (__privateGet(this, _EFFilmstrip_instances, contextElement_get)) {
+          __privateGet(this, _EFFilmstrip_instances, contextElement_get).playing = !__privateGet(this, _EFFilmstrip_instances, contextElement_get).playing;
         }
       }
-      __privateSet(this, _lastTick, tick);
-      if (this.playing) {
-        requestAnimationFrame(this.advancePlayhead);
-      }
-    };
+    });
     this.gutterRef = createRef();
     this.hierarchyRef = createRef();
     this.playheadRef = createRef();
@@ -619,13 +604,17 @@ let EFFilmstrip = class extends TWMixin(LitElement) {
         <code>${msToTimeCode(target?.durationMs ?? 0, true)}</code>
         ${this.playing ? html`<button
               @click=${() => {
-      this.playing = false;
+      if (__privateGet(this, _EFFilmstrip_instances, contextElement_get)) {
+        __privateGet(this, _EFFilmstrip_instances, contextElement_get).playing = false;
+      }
     }}
             >
               ⏸️
             </button>` : html`<button
               @click=${() => {
-      this.playing = true;
+      if (__privateGet(this, _EFFilmstrip_instances, contextElement_get)) {
+        __privateGet(this, _EFFilmstrip_instances, contextElement_get).playing = true;
+      }
     }}
             >
               ▶️
@@ -665,16 +654,6 @@ let EFFilmstrip = class extends TWMixin(LitElement) {
       </div>
     </div>`;
   }
-  update(changedProperties) {
-    if (changedProperties.has("playing")) {
-      if (this.playing) {
-        __privateMethod(this, _EFFilmstrip_instances, startPlayback_fn).call(this);
-      } else {
-        __privateMethod(this, _EFFilmstrip_instances, stopPlayback_fn).call(this);
-      }
-    }
-    super.update(changedProperties);
-  }
   updated(changes) {
     if (!this.targetTimegroup) {
       return;
@@ -684,18 +663,9 @@ let EFFilmstrip = class extends TWMixin(LitElement) {
         this.targetTimegroup.currentTimeMs = this.currentTimeMs;
       }
     }
-    if (changes.has("target")) {
-      __privateMethod(this, _EFFilmstrip_instances, bindToTargetTimegroup_fn).call(this);
-    }
   }
   get targetTimegroup() {
-    if (this.getAttribute("target")) {
-      const target = document.getElementById(this.getAttribute("target") ?? "");
-      if (target instanceof EFTimegroup) {
-        return target;
-      }
-    }
-    return void 0;
+    return __privateGet(this, _EFFilmstrip_instances, contextElement_get)?.targetTimegroup;
   }
 };
 _EFFilmstrip_instances = /* @__PURE__ */ new WeakSet();
@@ -710,99 +680,25 @@ bindToTargetTimegroup_fn = function() {
   }
 };
 _handleKeyPress = /* @__PURE__ */ new WeakMap();
-_lastTick = /* @__PURE__ */ new WeakMap();
-_playbackAudioContext = /* @__PURE__ */ new WeakMap();
-_playbackAnimationFrameRequest = /* @__PURE__ */ new WeakMap();
-_AUDIO_PLAYBACK_SLICE_MS = /* @__PURE__ */ new WeakMap();
-syncPlayheadToAudioContext_fn = function(target, startMs) {
-  target.currentTimeMs = startMs + (__privateGet(this, _playbackAudioContext)?.currentTime ?? 0) * 1e3;
-  __privateSet(this, _playbackAnimationFrameRequest, requestAnimationFrame(() => {
-    __privateMethod(this, _EFFilmstrip_instances, syncPlayheadToAudioContext_fn).call(this, target, startMs);
-  }));
-};
-stopPlayback_fn = async function() {
-  if (__privateGet(this, _playbackAudioContext)) {
-    if (__privateGet(this, _playbackAudioContext).state !== "closed") {
-      await __privateGet(this, _playbackAudioContext).close();
-    }
-  }
-  if (__privateGet(this, _playbackAnimationFrameRequest)) {
-    cancelAnimationFrame(__privateGet(this, _playbackAnimationFrameRequest));
-  }
-  __privateSet(this, _playbackAudioContext, null);
-};
-startPlayback_fn = async function() {
-  await __privateMethod(this, _EFFilmstrip_instances, stopPlayback_fn).call(this);
-  const timegroup = this.targetTimegroup;
-  if (!timegroup) {
-    return;
-  }
-  let currentMs = timegroup.currentTimeMs;
-  let bufferCount = 0;
-  __privateSet(this, _playbackAudioContext, new AudioContext({
-    latencyHint: "playback"
-  }));
-  if (__privateGet(this, _playbackAnimationFrameRequest)) {
-    cancelAnimationFrame(__privateGet(this, _playbackAnimationFrameRequest));
-  }
-  __privateMethod(this, _EFFilmstrip_instances, syncPlayheadToAudioContext_fn).call(this, timegroup, currentMs);
-  const playbackContext = __privateGet(this, _playbackAudioContext);
-  await playbackContext.suspend();
-  const fillBuffer = async () => {
-    if (bufferCount > 1) {
-      return;
-    }
-    const canFillBuffer = await queueBufferSource();
-    if (canFillBuffer) {
-      fillBuffer();
-    }
-  };
-  const fromMs = currentMs;
-  const toMs = timegroup.endTimeMs;
-  const queueBufferSource = async () => {
-    if (currentMs >= toMs) {
-      return false;
-    }
-    const startMs = currentMs;
-    const endMs = currentMs + __privateGet(this, _AUDIO_PLAYBACK_SLICE_MS);
-    currentMs += __privateGet(this, _AUDIO_PLAYBACK_SLICE_MS);
-    const audioBuffer = await timegroup.renderAudio(startMs, endMs);
-    bufferCount++;
-    const source = playbackContext.createBufferSource();
-    source.buffer = audioBuffer;
-    source.connect(playbackContext.destination);
-    source.start((startMs - fromMs) / 1e3);
-    source.onended = () => {
-      bufferCount--;
-      if (endMs >= toMs) {
-        this.playing = false;
-      } else {
-        fillBuffer();
-      }
-    };
-    return true;
-  };
-  await fillBuffer();
-  await playbackContext.resume();
+contextElement_get = function() {
+  return this.closest("ef-workbench, ef-preview");
 };
 __decorateClass([
   property({ type: Number })
 ], EFFilmstrip.prototype, "pixelsPerMs", 2);
-__decorateClass([
-  property({ type: Number })
-], EFFilmstrip.prototype, "currentTimeMs", 2);
-__decorateClass([
-  property({ type: String, attribute: "target", reflect: true })
-], EFFilmstrip.prototype, "targetSelector", 2);
 __decorateClass([
   state()
 ], EFFilmstrip.prototype, "scrubbing", 2);
 __decorateClass([
   state()
+], EFFilmstrip.prototype, "timelineScrolltop", 2);
+__decorateClass([
+  consume({ context: playingContext, subscribe: true }),
+  state()
 ], EFFilmstrip.prototype, "playing", 2);
 __decorateClass([
   state()
-], EFFilmstrip.prototype, "timelineScrolltop", 2);
+], EFFilmstrip.prototype, "currentTimeMs", 2);
 __decorateClass([
   eventOptions({ passive: false })
 ], EFFilmstrip.prototype, "syncGutterScroll", 1);

package/dist/elements/src/gui/EFPreview.js

@@ -0,0 +1,45 @@
+import { html, css, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import { ref } from "lit/directives/ref.js";
+import { TWMixin } from "./TWMixin.js";
+import { ContextMixin } from "./ContextMixin.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let EFPreview = class extends ContextMixin(TWMixin(LitElement)) {
+  render() {
+    return html`
+      <div
+        ${ref(this.stageRef)}
+        class="relative grid h-full w-full place-content-center place-items-center overflow-hidden"
+      >
+        <slot
+          ${ref(this.canvasRef)}
+          class="inline-block"
+        ></slot>
+      </div>
+    `;
+  }
+};
+EFPreview.styles = [
+  css`
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    `
+];
+EFPreview = __decorateClass([
+  customElement("ef-preview")
+], EFPreview);
+export {
+  EFPreview
+};

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

@@ -1,12 +1,11 @@
-import { createContext, provide } from "@lit/context";
-import { css, html, LitElement } from "lit";
+import { html, css, LitElement } from "lit";
 import { TaskStatus } from "@lit/task";
-import { state, eventOptions, property, customElement } from "lit/decorators.js";
+import { eventOptions, 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";
+import { ContextMixin } from "./ContextMixin.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -17,64 +16,9 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const focusContext = createContext(Symbol("focusContext"));
-const focusedElement = createContext(
-  Symbol("focusedElement")
-);
-const fetchContext = createContext(Symbol("fetchContext"));
-const apiHostContext = createContext(Symbol("apiHostContext"));
-let EFWorkbench = class extends TWMixin(LitElement) {
+let EFWorkbench = class extends ContextMixin(TWMixin(LitElement)) {
   constructor() {
     super(...arguments);
-    this.stageRef = createRef();
-    this.canvasRef = createRef();
-    this.stageScale = 1;
-    this.setStageScale = () => {
-      if (this.isConnected && !this.rendering) {
-        const canvasElement = this.canvasRef.value;
-        const stageElement = this.stageRef.value;
-        if (stageElement && canvasElement) {
-          const stageWidth = stageElement.clientWidth;
-          const stageHeight = stageElement.clientHeight;
-          const canvasWidth = canvasElement.clientWidth;
-          const canvasHeight = canvasElement.clientHeight;
-          const stageRatio = stageWidth / stageHeight;
-          const canvasRatio = canvasWidth / canvasHeight;
-          if (stageRatio > canvasRatio) {
-            const scale = stageHeight / canvasHeight;
-            if (this.stageScale !== scale) {
-              canvasElement.style.transform = `scale(${scale})`;
-            }
-            this.stageScale = scale;
-          } else {
-            const scale = stageWidth / canvasWidth;
-            if (this.stageScale !== scale) {
-              canvasElement.style.transform = `scale(${scale})`;
-            }
-            this.stageScale = scale;
-          }
-        }
-      }
-      if (this.isConnected) {
-        requestAnimationFrame(this.setStageScale);
-      }
-    };
-    this.focusContext = this;
-    this.fetch = (path, init = {}) => {
-      init.headers ||= {};
-      Object.assign(init.headers, {
-        "Content-Type": "application/json"
-      });
-      const bearerToken = this.apiToken;
-      if (bearerToken) {
-        Object.assign(init.headers, {
-          Authorization: `Bearer ${bearerToken}`
-        });
-      }
-      return fetch(path, init);
-    };
-    this.apiHost = "";
-    this.rendering = false;
     this.focusOverlay = createRef();
     this.drawOverlays = () => {
       const focusOverlay = this.focusOverlay.value;
@@ -96,10 +40,6 @@ let EFWorkbench = class extends TWMixin(LitElement) {
       }
     };
   }
-  connectedCallback() {
-    super.connectedCallback();
-    requestAnimationFrame(this.setStageScale);
-  }
   disconnectedCallback() {
     super.disconnectedCallback();
   }
@@ -161,7 +101,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));
@@ -177,39 +117,12 @@ EFWorkbench.styles = [
       }
     `
 ];
-__decorateClass([
-  state()
-], EFWorkbench.prototype, "stageScale", 2);
 __decorateClass([
   eventOptions({ passive: false, capture: true })
 ], EFWorkbench.prototype, "handleStageWheel", 1);
-__decorateClass([
-  provide({ context: focusContext })
-], EFWorkbench.prototype, "focusContext", 2);
-__decorateClass([
-  provide({ context: focusedElement }),
-  state()
-], EFWorkbench.prototype, "focusedElement", 2);
-__decorateClass([
-  provide({ context: fetchContext })
-], EFWorkbench.prototype, "fetch", 2);
-__decorateClass([
-  property({ type: String })
-], EFWorkbench.prototype, "apiToken", 2);
-__decorateClass([
-  provide({ context: apiHostContext }),
-  property({ type: String })
-], EFWorkbench.prototype, "apiHost", 2);
-__decorateClass([
-  property({ type: Boolean })
-], EFWorkbench.prototype, "rendering", 2);
 EFWorkbench = __decorateClass([
   customElement("ef-workbench")
 ], EFWorkbench);
 export {
-  EFWorkbench,
-  apiHostContext,
-  fetchContext,
-  focusContext,
-  focusedElement
+  EFWorkbench
 };

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/elements/src/gui/apiHostContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "@lit/context";
+const apiHostContext = createContext(Symbol("apiHostContext"));
+export {
+  apiHostContext
+};

package/dist/elements/src/gui/fetchContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "@lit/context";
+const fetchContext = createContext(Symbol("fetchContext"));
+export {
+  fetchContext
+};

package/dist/elements/src/gui/focusContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "@lit/context";
+const focusContext = createContext(Symbol("focusContext"));
+export {
+  focusContext
+};

package/dist/elements/src/gui/focusedElementContext.js

@@ -0,0 +1,7 @@
+import { createContext } from "@lit/context";
+const focusedElementContext = createContext(
+  Symbol("focusedElement")
+);
+export {
+  focusedElementContext
+};

package/dist/elements/src/gui/playingContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "@lit/context";
+const playingContext = createContext(Symbol("playingContext"));
+export {
+  playingContext
+};

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

@@ -7,15 +7,19 @@ import { EFVideo } from "./elements/EFVideo.js";
 import { EFCaptions, EFCaptionsActiveWord } from "./elements/EFCaptions.js";
 import { EFWaveform } from "./elements/EFWaveform.js";
 import { EFWorkbench } from "./gui/EFWorkbench.js";
+import { EFPreview } from "./gui/EFPreview.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,
   EFCaptionsActiveWord,
   EFFilmstrip,
   EFImage,
+  EFPreview,
   EFTimegroup,
   EFVideo,
   EFWaveform,

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/gui/ContextMixin.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+import { FocusContext } from './focusContext.ts';
+import { createRef } from 'lit/directives/ref.js';
+import { EFTimegroup } from '../elements/EFTimegroup.ts';
+
+declare class ContextMixinInterface {
+    focusContext: FocusContext;
+    focusedElement?: HTMLElement;
+    fetch: typeof fetch;
+    signingURL?: string;
+    apiToken?: string;
+    apiHost: string;
+    stageScale: number;
+    rendering: boolean;
+    stageRef: ReturnType<typeof createRef<HTMLDivElement>>;
+    canvasRef: ReturnType<typeof createRef<HTMLElement>>;
+    playing: boolean;
+    targetTimegroup?: EFTimegroup;
+    currentTimeMs: number;
+}
+type Constructor<T = {}> = new (...args: any[]) => T;
+export declare function ContextMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<ContextMixinInterface> & T;
+export {};

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

@@ -1,11 +1,11 @@
-import { EFTimegroup } from '../elements/EFTimegroup';
 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 { EFTimegroup } from '../elements/EFTimegroup.ts';
+import { TemporalMixinInterface } from '../elements/EFTemporal.ts';
+import { TimegroupController } from '../elements/TimegroupController.ts';
+import { FocusContext } from './focusContext.ts';
 
 declare class ElementFilmstripController implements ReactiveController {
     private host;
@@ -101,26 +101,23 @@ declare const EFFilmstrip_base: typeof LitElement;
 export declare class EFFilmstrip extends EFFilmstrip_base {
     #private;
     pixelsPerMs: number;
-    currentTimeMs: number;
-    targetSelector: string;
     scrubbing: boolean;
-    playing: boolean;
     timelineScrolltop: number;
+    playing?: boolean;
     timegroupController?: TimegroupController;
+    currentTimeMs: number;
     connectedCallback(): void;
     disconnectedCallback(): void;
     syncGutterScroll(): void;
     syncHierarchyScroll(): void;
-    advancePlayhead: (tick?: DOMHighResTimeStamp) => void;
     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;
     updated(changes: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     get targetTimegroup(): EFTimegroup | undefined;
 }

package/dist/gui/EFPreview.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+
+declare const EFPreview_base: (new (...args: any[]) => {
+    focusContext: import('./focusContext.ts').FocusContext;
+    focusedElement?: HTMLElement;
+    fetch: typeof fetch;
+    signingURL?: string;
+    apiToken?: string;
+    apiHost: string;
+    stageScale: number;
+    rendering: boolean;
+    stageRef: ReturnType<typeof import('lit-html/directives/ref.js').createRef>;
+    canvasRef: ReturnType<typeof import('lit-html/directives/ref.js').createRef>;
+    playing: boolean;
+    targetTimegroup?: import('../index.ts').EFTimegroup;
+    currentTimeMs: number;
+}) & typeof LitElement;
+export declare class EFPreview extends EFPreview_base {
+    static styles: import('lit').CSSResult[];
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ef-preview": EFPreview;
+    }
+}
+export {};