@editframe/elements 0.15.0-beta.1 → 0.15.0-beta.10

package/dist/elements/EFWaveform.js

@@ -1,15 +1,14 @@
-import { EFAudio } from "./EFAudio.js";
 import { CSSStyleObserver } from "@bramus/style-observer";
 import { Task } from "@lit/task";
 import { html, css, LitElement } from "lit";
-import { property, customElement } from "lit/decorators.js";
+import { property, state, customElement } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { EF_RENDERING } from "../EF_RENDERING.js";
 import { TWMixin } from "../gui/TWMixin.js";
 import { CrossUpdateController } from "./CrossUpdateController.js";
 import { EFTemporal } from "./EFTemporal.js";
-import { EFVideo } from "./EFVideo.js";
+import { TargetController } from "./TargetController.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -28,11 +27,18 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     this.styleObserver = null;
     this.mode = "bars";
     this.color = "currentColor";
-    this.targetSelector = "";
+    this.target = "";
+    this.targetElement = null;
     this.lineWidth = 4;
+    this.targetController = new TargetController(this);
     this.frameTask = new Task(this, {
       autoRun: EF_INTERACTIVE,
-      args: () => [this.targetElement?.frequencyDataTask.status],
+      args: () => {
+        return [
+          this.targetElement,
+          this.targetElement?.frequencyDataTask.value
+        ];
+      },
       task: async () => {
         if (!this.targetElement) return;
         await this.targetElement.frequencyDataTask.taskComplete;
@@ -40,12 +46,17 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
         const ctx = this.ctx;
         if (!ctx) return;
         const frequencyData = this.targetElement.frequencyDataTask.value;
-        if (!frequencyData) return;
+        const byteTimeData = this.targetElement.byteTimeDomainTask.value;
+        if (!frequencyData || !byteTimeData) return;
+        ctx.save();
         if (this.color === "currentColor") {
           const computedStyle = getComputedStyle(this);
           const currentColor = computedStyle.color;
           ctx.strokeStyle = currentColor;
           ctx.fillStyle = currentColor;
+        } else {
+          ctx.strokeStyle = this.color;
+          ctx.fillStyle = this.color;
         }
         switch (this.mode) {
           case "bars":
@@ -55,7 +66,10 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
             this.drawBricks(ctx, frequencyData);
             break;
           case "line":
-            this.drawLine(ctx, frequencyData);
+            this.drawLine(ctx, byteTimeData);
+            break;
+          case "curve":
+            this.drawCurve(ctx, byteTimeData);
             break;
           case "pixel":
             this.drawPixel(ctx, frequencyData);
@@ -63,19 +77,20 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
           case "wave":
             this.drawWave(ctx, frequencyData);
             break;
+          case "spikes":
+            this.drawSpikes(ctx, frequencyData);
+            break;
           case "roundBars":
             this.drawRoundBars(ctx, frequencyData);
             break;
         }
+        ctx.restore();
       }
     });
   }
   render() {
     return html`<canvas ${ref(this.canvasRef)}></canvas>`;
   }
-  set target(value) {
-    this.targetSelector = value;
-  }
   connectedCallback() {
     super.connectedCallback();
     try {
@@ -130,27 +145,25 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     const ctx = canvas.getContext("2d");
     if (!ctx) return null;
     ctx.reset();
-    ctx.scale(dpr, dpr);
     return ctx;
   }
   drawBars(ctx, frequencyData) {
     const canvas = ctx.canvas;
     const waveWidth = canvas.width;
     const waveHeight = canvas.height;
-    const baseline = waveHeight / 4;
     const totalBars = frequencyData.length;
     const paddingInner = 0.5;
     const paddingOuter = 0.01;
-    const availableWidth = waveWidth * (1 - 2 * paddingOuter);
+    const availableWidth = waveWidth;
     const barWidth = availableWidth / (totalBars + (totalBars - 1) * paddingInner);
     ctx.clearRect(0, 0, waveWidth, waveHeight);
     const path = new Path2D();
     frequencyData.forEach((value, i) => {
-      const normalizedValue = value / 255;
-      const height = normalizedValue * (waveHeight / 2);
+      const normalizedValue = Math.min(value / 255 * 2, 1);
+      const barHeight = normalizedValue * waveHeight;
+      const y = (waveHeight - barHeight) / 2;
       const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));
-      const y = baseline - height;
-      path.rect(x, y, barWidth, height * 2);
+      path.rect(x, y, barWidth, barHeight);
     });
     ctx.fill(path);
   }
@@ -162,11 +175,14 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     const path = new Path2D();
     const columnWidth = waveWidth / frequencyData.length;
     const boxSize = columnWidth * 0.9;
+    const verticalGap = boxSize * 0.2;
+    const maxBricks = Math.floor(waveHeight / (boxSize + verticalGap));
     frequencyData.forEach((value, i) => {
-      const brickHeight = value / 255 * waveHeight;
-      for (let j = 0; j <= brickHeight; j++) {
+      const normalizedValue = Math.min(value / 255 * 2, 1);
+      const brickCount = Math.floor(normalizedValue * maxBricks);
+      for (let j = 0; j < brickCount; j++) {
         const x = columnWidth * i;
-        const y = waveHeight - (j * columnWidth + boxSize);
+        const y = waveHeight - (j + 1) * (boxSize + verticalGap);
         path.rect(x, y, boxSize, boxSize);
       }
     });
@@ -176,29 +192,28 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     const canvas = ctx.canvas;
     const waveWidth = canvas.width;
     const waveHeight = canvas.height;
-    const baseline = waveHeight / 4;
     const totalBars = frequencyData.length;
     const paddingInner = 0.5;
     const paddingOuter = 0.01;
-    const availableWidth = waveWidth * (1 - 2 * paddingOuter);
+    const availableWidth = waveWidth;
     const barWidth = availableWidth / (totalBars + (totalBars - 1) * paddingInner);
     ctx.clearRect(0, 0, waveWidth, waveHeight);
     const path = new Path2D();
     frequencyData.forEach((value, i) => {
-      const normalizedValue = value / 255;
-      const height = normalizedValue * (waveHeight / 2);
+      const normalizedValue = Math.min(value / 255 * 2, 1);
+      const height = normalizedValue * waveHeight;
       const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));
-      const y = baseline - height;
-      path.roundRect(x, y, barWidth, height * 2, barWidth / 2);
+      const y = (waveHeight - height) / 2;
+      path.roundRect(x, y, barWidth, height, barWidth / 2);
     });
     ctx.fill(path);
   }
   drawEqualizer(ctx, frequencyData) {
     const canvas = ctx.canvas;
     const waveWidth = canvas.width;
-    const waveHeight = canvas.height / 2;
-    const barWidth = waveWidth / frequencyData.length * 0.8;
+    const waveHeight = canvas.height;
     const baseline = waveHeight / 2;
+    const barWidth = waveWidth / frequencyData.length * 0.8;
     ctx.clearRect(0, 0, waveWidth, waveHeight);
     const baselinePath = new Path2D();
     const barsPath = new Path2D();
@@ -217,7 +232,29 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
   drawLine(ctx, frequencyData) {
     const canvas = ctx.canvas;
     const waveWidth = canvas.width;
-    const waveHeight = canvas.height / 2;
+    const waveHeight = canvas.height;
+    ctx.clearRect(0, 0, waveWidth, waveHeight);
+    const path = new Path2D();
+    const sampleRate = 4;
+    for (let i = 0; i < frequencyData.length; i += sampleRate) {
+      const x = i / frequencyData.length * waveWidth;
+      const y = (1 - (frequencyData[i] ?? 0) / 255) * waveHeight;
+      if (i === 0) {
+        path.moveTo(x, y);
+      } else {
+        path.lineTo(x, y);
+      }
+    }
+    const lastX = waveWidth;
+    const lastY = (1 - (frequencyData[frequencyData.length - 1] ?? 0) / 255) * waveHeight;
+    path.lineTo(lastX, lastY);
+    ctx.lineWidth = this.lineWidth;
+    ctx.stroke(path);
+  }
+  drawCurve(ctx, frequencyData) {
+    const canvas = ctx.canvas;
+    const waveWidth = canvas.width;
+    const waveHeight = canvas.height;
     ctx.clearRect(0, 0, waveWidth, waveHeight);
     const path = new Path2D();
     frequencyData.forEach((value, i) => {
@@ -226,7 +263,11 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
       if (i === 0) {
         path.moveTo(x, y);
       } else {
-        path.lineTo(x, y);
+        const prevX = (i - 1) / frequencyData.length * waveWidth;
+        const prevY = (1 - (frequencyData[i - 1] ?? 0) / 255) * waveHeight;
+        const xc = (prevX + x) / 2;
+        const yc = (prevY + y) / 2;
+        path.quadraticCurveTo(prevX, prevY, xc, yc);
       }
     });
     ctx.lineWidth = this.lineWidth;
@@ -235,14 +276,15 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
   drawPixel(ctx, frequencyData) {
     const canvas = ctx.canvas;
     const waveWidth = canvas.width;
-    const waveHeight = canvas.height / 2;
+    const waveHeight = canvas.height;
     const baseline = waveHeight / 2;
     const barWidth = waveWidth / frequencyData.length;
     ctx.clearRect(0, 0, waveWidth, waveHeight);
     const path = new Path2D();
     frequencyData.forEach((value, i) => {
+      const normalizedValue = Math.min(value / 255 * 2, 1);
       const x = i * (waveWidth / frequencyData.length);
-      const barHeight = value / 255 * baseline;
+      const barHeight = normalizedValue * (waveHeight / 2);
       const y = baseline - barHeight;
       path.rect(x, y, barWidth, barHeight * 2);
     });
@@ -252,53 +294,110 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     const canvas = ctx.canvas;
     const waveWidth = canvas.width;
     const waveHeight = canvas.height;
-    const baseline = canvas.height / 4;
+    const paddingOuter = 0.01;
+    const availableWidth = waveWidth * (1 - 2 * paddingOuter);
+    const startX = waveWidth * paddingOuter;
     ctx.clearRect(0, 0, waveWidth, waveHeight);
     const path = new Path2D();
-    path.moveTo(0, baseline);
+    const firstValue = Math.min((frequencyData[0] ?? 0) / 255 * 2, 1);
+    const firstY = (waveHeight - firstValue * waveHeight) / 2;
+    path.moveTo(startX, firstY);
     frequencyData.forEach((value, i) => {
-      const normalizedValue = value / 255;
-      const x = i / (frequencyData.length - 1) * waveWidth;
-      const y = baseline - normalizedValue * (waveHeight / 2);
+      const normalizedValue = Math.min(value / 255 * 2, 1);
+      const x = startX + i / (frequencyData.length - 1) * availableWidth;
+      const barHeight = normalizedValue * waveHeight;
+      const y = (waveHeight - barHeight) / 2;
       if (i === 0) {
         path.moveTo(x, y);
       } else {
-        const prevX = (i - 1) / (frequencyData.length - 1) * waveWidth;
+        const prevX = startX + (i - 1) / (frequencyData.length - 1) * availableWidth;
+        const prevValue = Math.min((frequencyData[i - 1] ?? 0) / 255 * 2, 1);
+        const prevBarHeight = prevValue * waveHeight;
+        const prevY = (waveHeight - prevBarHeight) / 2;
+        const xc = (prevX + x) / 2;
+        const yc = (prevY + y) / 2;
+        path.quadraticCurveTo(prevX, prevY, xc, yc);
+      }
+    });
+    for (let i = frequencyData.length - 1; i >= 0; i--) {
+      const normalizedValue = Math.min((frequencyData[i] ?? 0) / 255 * 2, 1);
+      const x = startX + i / (frequencyData.length - 1) * availableWidth;
+      const barHeight = normalizedValue * waveHeight;
+      const y = (waveHeight + barHeight) / 2;
+      if (i === frequencyData.length - 1) {
+        path.lineTo(x, y);
+      } else {
+        const nextX = startX + (i + 1) / (frequencyData.length - 1) * availableWidth;
+        const nextValue = Math.min((frequencyData[i + 1] ?? 0) / 255 * 2, 1);
+        const nextBarHeight = nextValue * waveHeight;
+        const nextY = (waveHeight + nextBarHeight) / 2;
+        const xc = (nextX + x) / 2;
+        const yc = (nextY + y) / 2;
+        path.quadraticCurveTo(nextX, nextY, xc, yc);
+      }
+    }
+    const lastY = (waveHeight + firstValue * waveHeight) / 2;
+    const controlX = startX;
+    const controlY = (lastY + firstY) / 2;
+    path.quadraticCurveTo(controlX, controlY, startX, firstY);
+    ctx.fill(path);
+  }
+  drawSpikes(ctx, frequencyData) {
+    const canvas = ctx.canvas;
+    const waveWidth = canvas.width;
+    const waveHeight = canvas.height;
+    const paddingOuter = 0.01;
+    const availableWidth = waveWidth * (1 - 2 * paddingOuter);
+    const startX = waveWidth * paddingOuter;
+    ctx.clearRect(0, 0, waveWidth, waveHeight);
+    const path = new Path2D();
+    const firstValue = (frequencyData[0] ?? 0) / 255;
+    const firstY = (waveHeight - firstValue * waveHeight) / 2;
+    path.moveTo(startX, firstY);
+    frequencyData.forEach((value, i) => {
+      const normalizedValue = Math.min(value / 255 * 2, 1);
+      const x = startX + i / (frequencyData.length - 1) * availableWidth;
+      const barHeight = normalizedValue * (waveHeight / 2);
+      const y = (waveHeight - barHeight * 2) / 2;
+      if (i === 0) {
+        path.moveTo(x, y);
+      } else {
+        const prevX = startX + (i - 1) / (frequencyData.length - 1) * availableWidth;
         const prevValue = (frequencyData[i - 1] ?? 0) / 255;
-        const prevY = baseline - prevValue * (waveHeight / 2);
+        const prevBarHeight = prevValue * (waveHeight / 2);
+        const prevY = (waveHeight - prevBarHeight * 2) / 2;
         const xc = (prevX + x) / 2;
         const yc = (prevY + y) / 2;
         path.quadraticCurveTo(prevX, prevY, xc, yc);
       }
     });
     for (let i = frequencyData.length - 1; i >= 0; i--) {
-      const normalizedValue = (frequencyData[i] ?? 0) / 255;
-      const x = i / (frequencyData.length - 1) * waveWidth;
-      const y = baseline + normalizedValue * (waveHeight / 2);
+      const normalizedValue = Math.min((frequencyData[i] ?? 0) / 255 * 2, 1);
+      const x = startX + i / (frequencyData.length - 1) * availableWidth;
+      const barHeight = normalizedValue * (waveHeight / 2);
+      const y = (waveHeight + barHeight * 2) / 2;
       if (i === frequencyData.length - 1) {
         path.lineTo(x, y);
       } else {
-        const nextX = (i + 1) / (frequencyData.length - 1) * waveWidth;
+        const nextX = startX + (i + 1) / (frequencyData.length - 1) * availableWidth;
         const nextValue = (frequencyData[i + 1] ?? 0) / 255;
-        const nextY = baseline + nextValue * (waveHeight / 2);
+        const nextBarHeight = nextValue * (waveHeight / 2);
+        const nextY = (waveHeight + nextBarHeight * 2) / 2;
         const xc = (nextX + x) / 2;
         const yc = (nextY + y) / 2;
         path.quadraticCurveTo(nextX, nextY, xc, yc);
       }
     }
+    const lastY = (waveHeight + firstValue * waveHeight) / 2;
+    const controlX = startX;
+    const controlY = (lastY + firstY) / 2;
+    path.quadraticCurveTo(controlX, controlY, startX, firstY);
     ctx.fill(path);
   }
   get durationMs() {
     if (!this.targetElement) return 0;
     return this.targetElement.durationMs;
   }
-  get targetElement() {
-    const target = document.getElementById(this.targetSelector ?? "");
-    if (target instanceof EFAudio || target instanceof EFVideo) {
-      return target;
-    }
-    return null;
-  }
   updated(changedProperties) {
     super.updated(changedProperties);
     if (changedProperties.size > 0) {
@@ -331,8 +430,11 @@ __decorateClass([
   property({ type: String })
 ], EFWaveform.prototype, "color", 2);
 __decorateClass([
-  property({ type: String, attribute: "target", reflect: true })
-], EFWaveform.prototype, "targetSelector", 2);
+  property({ type: String, reflect: true })
+], EFWaveform.prototype, "target", 2);
+__decorateClass([
+  state()
+], EFWaveform.prototype, "targetElement", 2);
 __decorateClass([
   property({ type: Number, attribute: "line-width" })
 ], EFWaveform.prototype, "lineWidth", 2);

package/dist/elements/TargetController.d.ts

@@ -0,0 +1,25 @@
+import { LitElement, ReactiveController } from 'lit';
+type Constructor<T = {}> = new (...args: any[]) => T;
+export declare class TargetableMixinInterface {
+    id: string;
+}
+export declare const isEFTargetable: (obj: any) => obj is TargetableMixinInterface;
+export declare const EFTargetable: <T extends Constructor<LitElement>>(superClass: T) => T;
+export declare class TargetController implements ReactiveController {
+    private host;
+    private targetController;
+    private currentTargetString;
+    constructor(host: LitElement & {
+        targetElement: Element | null;
+        target: string;
+    });
+    private registryCallback;
+    private updateTarget;
+    private connectToTarget;
+    private disconnectFromTarget;
+    private get registry();
+    hostDisconnected(): void;
+    hostConnected(): void;
+    hostUpdate(): void;
+}
+export {};

package/dist/elements/TargetController.js

@@ -0,0 +1,164 @@
+import { LitElement } from "lit";
+const EF_TARGETABLE = Symbol("EF_TARGETABLE");
+class TargetRegistry {
+  constructor() {
+    this.idMap = /* @__PURE__ */ new Map();
+    this.callbacks = /* @__PURE__ */ new Map();
+  }
+  subscribe(id, callback) {
+    this.callbacks.set(id, this.callbacks.get(id) ?? /* @__PURE__ */ new Set());
+    this.callbacks.get(id)?.add(callback);
+  }
+  unsubscribe(id, callback) {
+    if (id === null) {
+      return;
+    }
+    this.callbacks.get(id)?.delete(callback);
+    if (this.callbacks.get(id)?.size === 0) {
+      this.callbacks.delete(id);
+    }
+  }
+  get(id) {
+    return this.idMap.get(id);
+  }
+  register(id, target) {
+    this.idMap.set(id, target);
+    for (const callback of this.callbacks.get(id) ?? []) {
+      callback(target);
+    }
+  }
+  unregister(id) {
+    for (const callback of this.callbacks.get(id) ?? []) {
+      callback(void 0);
+    }
+    this.idMap.delete(id);
+    this.callbacks.delete(id);
+  }
+}
+const documentRegistries = /* @__PURE__ */ new WeakMap();
+const getRegistry = (root) => {
+  let registry = documentRegistries.get(root);
+  if (!registry) {
+    registry = new TargetRegistry();
+    documentRegistries.set(root, registry);
+  }
+  return registry;
+};
+const EFTargetable = (superClass) => {
+  class TargetableElement extends superClass {
+    #registry = null;
+    static get observedAttributes() {
+      const parentAttributes = superClass.observedAttributes || [];
+      return [.../* @__PURE__ */ new Set([...parentAttributes, "id"])];
+    }
+    updateRegistry(oldValue, newValue) {
+      if (!this.#registry) return;
+      if (oldValue === newValue) return;
+      if (oldValue) {
+        this.#registry.unregister(oldValue);
+      }
+      if (newValue) {
+        this.#registry.register(newValue, this);
+      }
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      this.#registry = getRegistry(this.getRootNode());
+      const initialId = this.getAttribute("id");
+      if (initialId) {
+        this.updateRegistry("", initialId);
+      }
+    }
+    attributeChangedCallback(name, old, value) {
+      super.attributeChangedCallback(name, old, value);
+      if (name === "id") {
+        this.updateRegistry(old ?? "", value ?? "");
+      }
+    }
+    disconnectedCallback() {
+      if (this.#registry) {
+        this.updateRegistry(this.id, "");
+        this.#registry = null;
+      }
+      super.disconnectedCallback();
+    }
+  }
+  Object.defineProperty(TargetableElement.prototype, EF_TARGETABLE, {
+    value: true
+  });
+  return TargetableElement;
+};
+class TargetUpdateController {
+  constructor(host) {
+    this.host = host;
+  }
+  hostConnected() {
+    this.host.requestUpdate();
+  }
+  hostDisconnected() {
+    this.host.requestUpdate();
+  }
+  hostUpdate() {
+    this.host.requestUpdate();
+  }
+}
+class TargetController {
+  constructor(host) {
+    this.targetController = null;
+    this.currentTargetString = null;
+    this.registryCallback = (target) => {
+      this.host.targetElement = target ?? null;
+    };
+    this.host = host;
+    this.host.addController(this);
+    this.currentTargetString = this.host.target;
+    if (this.currentTargetString) {
+      this.registry.subscribe(this.currentTargetString, this.registryCallback);
+    }
+  }
+  updateTarget() {
+    const newTarget = this.registry.get(this.host.target);
+    if (this.host.targetElement !== newTarget) {
+      this.disconnectFromTarget();
+      this.host.targetElement = newTarget ?? null;
+      this.connectToTarget();
+    }
+  }
+  connectToTarget() {
+    if (this.host.targetElement instanceof LitElement) {
+      this.targetController = new TargetUpdateController(this.host);
+      this.host.targetElement.addController(this.targetController);
+    }
+  }
+  disconnectFromTarget() {
+    if (this.host.targetElement instanceof LitElement && this.targetController) {
+      this.host.targetElement.removeController(this.targetController);
+      this.targetController = null;
+    }
+  }
+  get registry() {
+    const root = this.host.getRootNode();
+    return getRegistry(root);
+  }
+  hostDisconnected() {
+    this.disconnectFromTarget();
+  }
+  hostConnected() {
+    this.updateTarget();
+  }
+  hostUpdate() {
+    if (this.currentTargetString !== this.host.target) {
+      this.registry.unsubscribe(
+        this.currentTargetString,
+        this.registryCallback
+      );
+      this.registry.subscribe(this.host.target, this.registryCallback);
+      this.updateTarget();
+      this.currentTargetString = this.host.target;
+    }
+  }
+}
+export {
+  EFTargetable,
+  TargetController
+};

package/dist/elements/TargetController.test.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+declare const TargetableTest_base: typeof LitElement;
+declare class TargetableTest extends TargetableTest_base {
+    value: string;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare class TargeterTest extends LitElement {
+    private targetController;
+    targetElement: Element | null;
+    target: string;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "targetable-test": TargetableTest & Element;
+        "targeter-test": TargeterTest & Element;
+    }
+}
+export {};

package/dist/gui/EFPreview.d.ts

@@ -1,9 +1,9 @@
 import { LitElement } from 'lit';
 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[];
     focusedElement?: HTMLElement;
     constructor();
-    static styles: import('lit').CSSResult[];
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/dist/gui/EFPreview.js

@@ -39,6 +39,7 @@ let EFPreview = class extends ContextMixin(TWMixin(LitElement)) {
 EFPreview.styles = [
   css`
       :host {
+        position: relative;
         display: block;
         cursor: crosshair;
       }