@editframe/elements 0.12.0-beta.8 → 0.13.0-beta.2

package/dist/elements/{src/elements/EFWaveform.js → 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,9 @@
 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 const targetTimegroupContext: {
+    __context__: EFTimegroup | null;
+};
 export declare class ContextMixinInterface extends LitElement {
     signingURL?: string;
     apiHost?: string;

package/dist/{elements/src/gui → gui}/ContextMixin.js

@@ -1,4 +1,4 @@
-import { provide } from "@lit/context";
+import { createContext, provide } from "@lit/context";
 import { state, property } from "lit/decorators.js";
 import { createRef } from "lit/directives/ref.js";
 import { apiHostContext } from "./apiHostContext.js";
@@ -16,6 +16,9 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
+const targetTimegroupContext = createContext(
+  "target-timegroup"
+);
 const contextMixinSymbol = Symbol("contextMixin");
 function isContextMixin(value) {
   return typeof value === "object" && value !== null && contextMixinSymbol in value.constructor;
@@ -27,6 +30,7 @@ function ContextMixin(superClass) {
       super(...arguments);
       this.focusContext = this;
       this.efContext = this;
+      this.targetTimegroup = null;
       this.fetch = async (url, init = {}) => {
         init.headers ||= {};
         Object.assign(init.headers, {
@@ -58,48 +62,22 @@ function ContextMixin(superClass) {
       this.#URLTokens = {};
       this.playing = false;
       this.loop = false;
-      this.stageScale = 1;
       this.rendering = false;
       this.currentTimeMs = 0;
       this.stageRef = createRef();
       this.canvasRef = createRef();
       this.#FPS = 30;
       this.#MS_PER_FRAME = 1e3 / this.#FPS;
-      this.setStageScale = () => {
-        if (this.isConnected && !this.rendering) {
-          const canvasElement = this.canvasRef.value;
-          const stageElement = this.stageRef.value;
-          const canvasChild = canvasElement?.assignedElements()[0];
-          if (stageElement && canvasElement && canvasChild) {
-            canvasElement.style.width = `${canvasChild.clientWidth}px`;
-            canvasElement.style.height = `${canvasChild.clientHeight}px`;
-            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})`;
-                canvasElement.style.transformOrigin = "center left";
-              }
-              this.stageScale = scale;
-            } else {
-              const scale = stageWidth / canvasWidth;
-              if (this.stageScale !== scale) {
-                canvasElement.style.transform = `scale(${scale})`;
-                canvasElement.style.transformOrigin = "center left";
-              }
-              this.stageScale = scale;
+      this.#timegroupObserver = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+          if (mutation.type === "childList") {
+            const newTimegroup = this.querySelector("ef-timegroup");
+            if (newTimegroup !== this.targetTimegroup) {
+              this.targetTimegroup = newTimegroup;
             }
           }
         }
-        if (this.isConnected) {
-          requestAnimationFrame(this.setStageScale);
-        }
-      };
+      });
       this.#playbackAudioContext = null;
       this.#playbackAnimationFrameRequest = null;
       this.#AUDIO_PLAYBACK_SLICE_MS = 1e3;
@@ -110,15 +88,22 @@ function ContextMixin(superClass) {
     #URLTokens;
     #FPS;
     #MS_PER_FRAME;
+    #timegroupObserver;
     connectedCallback() {
       super.connectedCallback();
-      requestAnimationFrame(this.setStageScale);
+      this.targetTimegroup = this.querySelector("ef-timegroup");
+      this.#timegroupObserver.observe(this, {
+        childList: true,
+        subtree: true,
+        attributes: true
+      });
       if (this.playing) {
         this.startPlayback();
       }
     }
     disconnectedCallback() {
       super.disconnectedCallback();
+      this.#timegroupObserver.disconnect();
       this.stopPlayback();
     }
     update(changedProperties) {
@@ -146,9 +131,6 @@ function ContextMixin(superClass) {
       }
       super.update(changedProperties);
     }
-    get targetTimegroup() {
-      return this.querySelector("ef-timegroup");
-    }
     play() {
       this.playing = true;
     }
@@ -268,6 +250,10 @@ function ContextMixin(superClass) {
   __decorateClass([
     provide({ context: efContext })
   ], ContextElement.prototype, "efContext");
+  __decorateClass([
+    provide({ context: targetTimegroupContext }),
+    state()
+  ], ContextElement.prototype, "targetTimegroup");
   __decorateClass([
     provide({ context: fetchContext })
   ], ContextElement.prototype, "fetch");
@@ -282,9 +268,6 @@ function ContextMixin(superClass) {
     provide({ context: loopContext }),
     property({ type: Boolean, reflect: true })
   ], ContextElement.prototype, "loop");
-  __decorateClass([
-    state()
-  ], ContextElement.prototype, "stageScale");
   __decorateClass([
     property({ type: Boolean })
   ], ContextElement.prototype, "rendering");
@@ -295,5 +278,6 @@ function ContextMixin(superClass) {
 }
 export {
   ContextMixin,
-  isContextMixin
+  isContextMixin,
+  targetTimegroupContext
 };

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;
@@ -69,7 +69,7 @@ declare class EFHierarchyItem<ElementType extends HTMLElement = HTMLElement> ext
     get isFocused(): boolean;
     displayLabel(): TemplateResult<1> | string | typeof nothing;
     render(): TemplateResult<1>;
-    renderChildren(): Array<TemplateResult<1>> | typeof nothing;
+    renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing;
 }
 declare class EFTimegroupHierarchyItem extends EFHierarchyItem<EFTimegroup> {
     get icon(): string;
@@ -103,6 +103,7 @@ declare class EFHTMLHierarchyItem extends EFHierarchyItem {
 declare const EFFilmstrip_base: typeof LitElement;
 export declare class EFFilmstrip extends EFFilmstrip_base {
     #private;
+    static styles: import('lit').CSSResult[];
     pixelsPerMs: number;
     scrubbing: boolean;
     timelineScrolltop: number;
@@ -110,8 +111,11 @@ export declare class EFFilmstrip extends EFFilmstrip_base {
     loop?: boolean;
     timegroupController?: TimegroupController;
     currentTimeMs: number;
+    autoScale: boolean;
+    private resizeObserver;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    updatePixelsPerMs(): void;
     syncGutterScroll(): void;
     syncHierarchyScroll(): void;
     scrub(e: MouseEvent): void;
@@ -123,7 +127,9 @@ export declare class EFFilmstrip extends EFFilmstrip_base {
     get gutter(): HTMLDivElement | undefined;
     render(): TemplateResult<1>;
     updated(changes: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
-    get targetTimegroup(): EFTimegroup | null | undefined;
+    target?: string;
+    targetTimegroup?: EFTimegroup | null;
+    protected willUpdate(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -11,6 +11,7 @@ import { EFVideo } from "../elements/EFVideo.js";
 import { EFWaveform } from "../elements/EFWaveform.js";
 import { TimegroupController } from "../elements/TimegroupController.js";
 import { msToTimeCode } from "../msToTimeCode.js";
+import { targetTimegroupContext } from "./ContextMixin.js";
 import { TWMixin } from "./TWMixin.js";
 import { focusContext } from "./focusContext.js";
 import { focusedElementContext } from "./focusedElementContext.js";
@@ -410,6 +411,9 @@ EFHTMLHierarchyItem = __decorateClass([
 ], EFHTMLHierarchyItem);
 const renderHierarchyChildren = (children) => {
   return children.map((child) => {
+    if (child instanceof HTMLElement && child.dataset?.efHidden) {
+      return nothing;
+    }
     if (child instanceof EFTimegroup) {
       return html`<ef-timegroup-hierarchy-item
         .element=${child}
@@ -452,6 +456,9 @@ const renderHierarchyChildren = (children) => {
 };
 const renderFilmstripChildren = (children, pixelsPerMs) => {
   return children.map((child) => {
+    if (child instanceof HTMLElement && child.dataset?.efHidden) {
+      return nothing;
+    }
     if (child instanceof EFTimegroup) {
       return html`<ef-timegroup-filmstrip
         .element=${child}
@@ -503,6 +510,12 @@ let EFFilmstrip = class extends TWMixin(LitElement) {
     this.scrubbing = false;
     this.timelineScrolltop = 0;
     this.currentTimeMs = 0;
+    this.autoScale = false;
+    this.resizeObserver = new ResizeObserver(() => {
+      if (this.autoScale) {
+        this.updatePixelsPerMs();
+      }
+    });
     __privateAdd(this, _handleKeyPress, (event) => {
       if (event.key === " ") {
         const [target] = event.composedPath();
@@ -527,10 +540,19 @@ let EFFilmstrip = class extends TWMixin(LitElement) {
     super.connectedCallback();
     __privateMethod(this, _EFFilmstrip_instances, bindToTargetTimegroup_fn).call(this);
     window.addEventListener("keypress", __privateGet(this, _handleKeyPress));
+    this.resizeObserver.observe(this);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     window.removeEventListener("keypress", __privateGet(this, _handleKeyPress));
+    this.resizeObserver.disconnect();
+  }
+  updatePixelsPerMs() {
+    const target = this.targetTimegroup;
+    const gutter = this.gutterRef.value;
+    if (target && gutter && gutter.clientWidth > 0) {
+      this.pixelsPerMs = gutter.clientWidth / (target.durationMs || 1);
+    }
   }
   syncGutterScroll() {
     if (this.gutter && this.hierarchyRef.value) {
@@ -585,7 +607,9 @@ let EFFilmstrip = class extends TWMixin(LitElement) {
   }
   scrollScrub(e) {
     if (this.targetTimegroup && this.gutter && !this.playing) {
-      e.preventDefault();
+      if (e.deltaX !== 0) {
+        e.preventDefault();
+      }
       if (this.gutterRef.value && this.gutterRef.value.scrollLeft === 0 && e.deltaX < 0) {
         this.gutter.scrollBy(0, e.deltaY);
         return;
@@ -615,38 +639,38 @@ let EFFilmstrip = class extends TWMixin(LitElement) {
       <div
         class="z-20 col-span-2 border-b-slate-600 bg-slate-100 shadow shadow-slate-300"
       >
-        <input
-          type="range"
-          .value=${this.pixelsPerMs}
-          min="0.01"
-          max="0.1"
-          step="0.001"
-          @input=${(e) => {
+        ${!this.autoScale ? html`<input
+              type="range"
+              .value=${this.pixelsPerMs}
+              min="0.01"
+              max="0.1"
+              step="0.001"
+              @input=${(e) => {
       const target2 = e.target;
       this.pixelsPerMs = Number.parseFloat(target2.value);
     }}
-        />
+            />` : nothing}
         <code>${msToTimeCode(this.currentTimeMs, true)} </code> /
         <code>${msToTimeCode(target?.durationMs ?? 0, true)}</code>
         <ef-toggle-play class="inline-block mx-2">
           <div slot="pause"> 
-            <button class="bg-white">&#9654;</button>
+            <button>⏸️</button>
           </div>
           <div slot="play">
-            <button>⏸️</button>
+            <button>▶️</button>
           </div>
         </ef-toggle-play>
-        <ef-toggle-loop><button>${this.loop ? "🔁" : html`<span class="opacity-50">🔁</span>`}</button></ef-toggle-loop>
+        <ef-toggle-loop><button>${this.loop ? "🔁" : html`<span class="opacity-50 line-through">🔁</span>`}</button></ef-toggle-loop>
       </div>
       <div
-        class="z-10 pl-1 pr-1 pt-2 shadow shadow-slate-600 overflow-auto"
+        class="z-10 pl-1 pr-1 pt-[8px] shadow shadow-slate-600 overflow-auto"
         ${ref(this.hierarchyRef)}
         @scroll=${this.syncHierarchyScroll}
       >
         ${renderHierarchyChildren(target ? [target] : [])}
       </div>
       <div
-        class="h-full w-full cursor-crosshair overflow-auto bg-slate-200 pt-2"
+        class="flex h-full w-full cursor-crosshair overflow-auto bg-slate-200 pt-[8px]"
         id="gutter"
         ${ref(this.gutterRef)}
         @scroll=${this.syncGutterScroll}
@@ -682,8 +706,14 @@ let EFFilmstrip = class extends TWMixin(LitElement) {
       }
     }
   }
-  get targetTimegroup() {
-    return __privateGet(this, _EFFilmstrip_instances, contextElement_get)?.targetTimegroup;
+  willUpdate(changedProperties) {
+    if (changedProperties.has("targetTimegroup")) {
+      __privateMethod(this, _EFFilmstrip_instances, bindToTargetTimegroup_fn).call(this);
+    }
+    if (this.autoScale) {
+      this.updatePixelsPerMs();
+    }
+    super.willUpdate(changedProperties);
   }
 };
 _EFFilmstrip_instances = /* @__PURE__ */ new WeakSet();
@@ -701,6 +731,14 @@ _handleKeyPress = /* @__PURE__ */ new WeakMap();
 contextElement_get = function() {
   return this.closest("ef-workbench, ef-preview");
 };
+EFFilmstrip.styles = [
+  css`
+      :host {
+        display: block;
+        overflow: hidden;
+      }
+    `
+];
 __decorateClass([
   property({ type: Number })
 ], EFFilmstrip.prototype, "pixelsPerMs", 2);
@@ -721,6 +759,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], EFFilmstrip.prototype, "currentTimeMs", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "auto-scale" })
+], EFFilmstrip.prototype, "autoScale", 2);
 __decorateClass([
   eventOptions({ passive: false })
 ], EFFilmstrip.prototype, "syncGutterScroll", 1);
@@ -736,6 +777,13 @@ __decorateClass([
 __decorateClass([
   eventOptions({ passive: false })
 ], EFFilmstrip.prototype, "scrollScrub", 1);
+__decorateClass([
+  property({ type: String })
+], EFFilmstrip.prototype, "target", 2);
+__decorateClass([
+  consume({ context: targetTimegroupContext, subscribe: true }),
+  state()
+], EFFilmstrip.prototype, "targetTimegroup", 2);
 EFFilmstrip = __decorateClass([
   customElement("ef-filmstrip")
 ], EFFilmstrip);

package/dist/gui/EFFocusOverlay.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+export declare class EFFocusOverlay extends LitElement {
+    static styles: import('lit').CSSResult;
+    focusedElement?: HTMLElement | null;
+    overlay: import('lit-html/directives/ref.js').Ref<HTMLDivElement>;
+    private animationFrame?;
+    drawOverlay: () => void;
+    render(): import('lit-html').TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ef-focus-overlay": EFFocusOverlay;
+    }
+}