@editframe/elements 0.5.0-beta.9 → 0.6.0-beta.1

package/dist/packages/elements/src/gui/EFFilmstrip.d.ts

@@ -0,0 +1,138 @@
+import { EFTimegroup } from '../elements/EFTimegroup';
+import { LitElement, nothing, TemplateResult, ReactiveController, PropertyValueMap } from 'lit';
+import { TemporalMixinInterface } from '../elements/EFTemporal';
+import { TimegroupController } from '../elements/TimegroupController';
+import { FocusContext } from './EFWorkbench';
+
+declare class ElementFilmstripController implements ReactiveController {
+    private host;
+    private filmstrip;
+    constructor(host: LitElement, filmstrip: FilmstripItem);
+    remove(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+}
+declare const FilmstripItem_base: typeof LitElement;
+declare class FilmstripItem extends FilmstripItem_base {
+    static styles: import('lit').CSSResult[];
+    focusContext?: FocusContext;
+    focusedElement?: HTMLElement | null;
+    get isFocused(): boolean;
+    element: TemporalMixinInterface & LitElement;
+    pixelsPerMs: number;
+    get styles(): {
+        position: string;
+        left: string;
+        width: string;
+    };
+    render(): TemplateResult<1>;
+    renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing;
+    contents(): TemplateResult<1>;
+    animations(): (TemplateResult<1> | typeof nothing)[];
+    protected filmstripController?: ElementFilmstripController;
+    update(changedProperties: Map<string | number | symbol, unknown>): void;
+}
+export declare class EFAudioFilmstrip extends FilmstripItem {
+    contents(): TemplateResult<1>;
+}
+export declare class EFVideoFilmstrip extends FilmstripItem {
+    contents(): TemplateResult<1>;
+}
+export declare class EFCaptionsFilmstrip extends FilmstripItem {
+    contents(): TemplateResult<1>;
+}
+export declare class EFWaveformFilmstrip extends FilmstripItem {
+    contents(): TemplateResult<1>;
+    renderChildren(): typeof nothing;
+}
+export declare class EFImageFilmstrip extends FilmstripItem {
+    contents(): TemplateResult<1>;
+}
+export declare class EFTimegroupFilmstrip extends FilmstripItem {
+    contents(): TemplateResult<1>;
+}
+export declare class EFHTMLFilmstrip extends FilmstripItem {
+    contents(): TemplateResult<1>;
+}
+declare const EFHierarchyItem_base: typeof LitElement;
+declare class EFHierarchyItem<ElementType extends HTMLElement = HTMLElement> extends EFHierarchyItem_base {
+    element: ElementType;
+    focusContext?: FocusContext;
+    focusedElement?: HTMLElement | null;
+    get icon(): TemplateResult<1> | string;
+    get isFocused(): boolean;
+    displayLabel(): TemplateResult<1> | string | typeof nothing;
+    render(): TemplateResult<1>;
+    renderChildren(): Array<TemplateResult<1>> | typeof nothing;
+}
+declare class EFTimegroupHierarchyItem extends EFHierarchyItem<EFTimegroup> {
+    get icon(): string;
+    displayLabel(): string | TemplateResult<1> | typeof nothing;
+}
+declare class EFAudioHierarchyItem extends EFHierarchyItem {
+    get icon(): string;
+    displayLabel(): string;
+}
+declare class EFVideoHierarchyItem extends EFHierarchyItem {
+    get icon(): string;
+    displayLabel(): string;
+}
+declare class EFCaptionsHierarchyItem extends EFHierarchyItem {
+    get icon(): string;
+}
+declare class EFCaptionsActiveWordHierarchyItem extends EFHierarchyItem {
+    get icon(): string;
+}
+declare class EFWaveformHierarchyItem extends EFHierarchyItem {
+    get icon(): string;
+    renderChildren(): typeof nothing;
+}
+declare class EFImageHierarchyItem extends EFHierarchyItem {
+    get icon(): string;
+    displayLabel(): string;
+}
+declare class EFHTMLHierarchyItem extends EFHierarchyItem {
+    get icon(): TemplateResult<1>;
+}
+declare const EFFilmStrip_base: typeof LitElement;
+export declare class EFFilmStrip extends EFFilmStrip_base {
+    #private;
+    pixelsPerMs: number;
+    currentTimeMs: number;
+    targetSelector: string;
+    scrubbing: boolean;
+    playing: boolean;
+    timegroupController?: TimegroupController;
+    connectedCallback(): 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>;
+    get gutter(): HTMLDivElement | undefined;
+    render(): TemplateResult<1>;
+    update(changedProperties: Map<string | number | symbol, unknown>): void;
+    updated(changes: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    get target(): EFTimegroup | undefined;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ef-filmstrip": EFFilmStrip;
+        "ef-timegroup-hierarchy-item": EFTimegroupHierarchyItem;
+        "ef-audio-hierarchy-item": EFAudioHierarchyItem;
+        "ef-video-hierarchy-item": EFVideoHierarchyItem;
+        "ef-captions-hierarchy-item": EFCaptionsHierarchyItem;
+        "ef-captions-active-word-hierarchy-item": EFCaptionsActiveWordHierarchyItem;
+        "ef-waveform-hierarchy-item": EFWaveformHierarchyItem;
+        "ef-image-hierarchy-item": EFImageHierarchyItem;
+        "ef-html-hierarchy-item": EFHTMLHierarchyItem;
+        "ef-timegroup-filmstrip": EFTimegroupFilmstrip;
+        "ef-audio-filmstrip": EFAudioFilmstrip;
+        "ef-video-filmstrip": EFVideoFilmstrip;
+        "ef-captions-filmstrip": EFCaptionsFilmstrip;
+        "ef-waveform-filmstrip": EFWaveformFilmstrip;
+        "ef-image-filmstrip": EFImageFilmstrip;
+        "ef-html-filmstrip": EFHTMLFilmstrip;
+    }
+}
+export {};

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

@@ -1,18 +1,18 @@
-import { EFTimegroup } from "../elements/EFTimegroup.mjs";
+import { EFTimegroup } from "../elements/EFTimegroup.js";
 import { css, html, nothing, LitElement } from "lit";
 import { property, customElement, state, eventOptions } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { createRef, ref } from "lit/directives/ref.js";
-import { EFImage } from "../elements/EFImage.mjs";
-import { EFAudio } from "../elements/EFAudio.mjs";
-import { EFVideo } from "../elements/EFVideo.mjs";
-import { EFCaptions, EFCaptionsActiveWord } from "../elements/EFCaptions.mjs";
-import { EFWaveform } from "../elements/EFWaveform.mjs";
-import { TimegroupController } from "../elements/TimegroupController.mjs";
+import { EFImage } from "../elements/EFImage.js";
+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 { TimegroupController } from "../elements/TimegroupController.js";
 import { consume } from "@lit/context";
-import { focusContext, focusedElement } from "./EFWorkbench.mjs";
-import { TWMixin } from "./TWMixin.mjs";
-import { msToTimeCode } from "../../../../lib/av/msToTimeCode.mjs";
+import { focusContext, focusedElement } from "./EFWorkbench.js";
+import { TWMixin } from "./TWMixin.js";
+import { msToTimeCode } from "../../../../lib/av/msToTimeCode.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __typeError = (msg) => {
@@ -126,7 +126,9 @@ class FilmstripItem extends TWMixin(LitElement) {
         return nothing;
       }
       const properties = new Set(Object.keys(firstKeyframe));
-      CommonEffectKeys.forEach((key) => properties.delete(key));
+      for (const key of CommonEffectKeys) {
+        properties.delete(key);
+      }
       return html`<div
         class="relative h-[5px] bg-blue-500 opacity-50"
         label="animation"
@@ -135,9 +137,7 @@ class FilmstripItem extends TWMixin(LitElement) {
         width: `${this.pixelsPerMs * Number(duration)}px`
       })}
       >
-        <!-- <div class="text-nowrap">${Array.from(properties).join(
-        " "
-      )}</div> -->
+        <!-- <div class="text-nowrap">${Array.from(properties).join(" ")}</div> -->
         ${effect.getKeyframes().map((keyframe) => {
         return html`<div
             class="absolute top-0 h-full w-1 bg-red-500"
@@ -387,35 +387,40 @@ const renderHierarchyChildren = (children) => {
       return html`<ef-timegroup-hierarchy-item
         .element=${child}
       ></ef-timegroup-hierarchy-item>`;
-    } else if (child instanceof EFImage) {
+    }
+    if (child instanceof EFImage) {
       return html`<ef-image-hierarchy-item
         .element=${child}
       ></ef-image-hierarchy-item>`;
-    } else if (child instanceof EFAudio) {
+    }
+    if (child instanceof EFAudio) {
       return html`<ef-audio-hierarchy-item
         .element=${child}
       ></ef-audio-hierarchy-item>`;
-    } else if (child instanceof EFVideo) {
+    }
+    if (child instanceof EFVideo) {
       return html`<ef-video-hierarchy-item
         .element=${child}
       ></ef-video-hierarchy-item>`;
-    } else if (child instanceof EFCaptions) {
+    }
+    if (child instanceof EFCaptions) {
       return html`<ef-captions-hierarchy-item
         .element=${child}
       ></ef-captions-hierarchy-item>`;
-    } else if (child instanceof EFCaptionsActiveWord) {
+    }
+    if (child instanceof EFCaptionsActiveWord) {
       return html`<ef-captions-active-word-hierarchy-item
         .element=${child}
       ></ef-captions-active-word-hierarchy-item>`;
-    } else if (child instanceof EFWaveform) {
+    }
+    if (child instanceof EFWaveform) {
       return html`<ef-waveform-hierarchy-item
         .element=${child}
       ></ef-waveform-hierarchy-item>`;
-    } else {
-      return html`<ef-html-hierarchy-item
+    }
+    return html`<ef-html-hierarchy-item
         .element=${child}
       ></ef-html-hierarchy-item>`;
-    }
   });
 };
 const renderFilmStripChildren = (children, pixelsPerMs) => {
@@ -426,37 +431,41 @@ const renderFilmStripChildren = (children, pixelsPerMs) => {
         .pixelsPerMs=${pixelsPerMs}
       >
       </ef-timegroup-filmstrip>`;
-    } else if (child instanceof EFImage) {
+    }
+    if (child instanceof EFImage) {
       return html`<ef-image-filmstrip
         .element=${child}
         .pixelsPerMs=${pixelsPerMs}
       ></ef-image-filmstrip>`;
-    } else if (child instanceof EFAudio) {
+    }
+    if (child instanceof EFAudio) {
       return html`<ef-audio-filmstrip
         .element=${child}
         .pixelsPerMs=${pixelsPerMs}
       ></ef-audio-filmstrip>`;
-    } else if (child instanceof EFVideo) {
+    }
+    if (child instanceof EFVideo) {
       return html`<ef-video-filmstrip
         .element=${child}
         .pixelsPerMs=${pixelsPerMs}
       ></ef-video-filmstrip>`;
-    } else if (child instanceof EFCaptions) {
+    }
+    if (child instanceof EFCaptions) {
       return html`<ef-captions-filmstrip
         .element=${child}
         .pixelsPerMs=${pixelsPerMs}
       ></ef-captions-filmstrip>`;
-    } else if (child instanceof EFWaveform) {
+    }
+    if (child instanceof EFWaveform) {
       return html`<ef-waveform-filmstrip
         .element=${child}
         .pixelsPerMs=${pixelsPerMs}
       ></ef-waveform-filmstrip>`;
-    } else {
-      return html`<ef-html-filmstrip
+    }
+    return html`<ef-html-filmstrip
         .element=${child}
         .pixelsPerMs=${pixelsPerMs}
       ></ef-html-filmstrip>`;
-    }
   });
 };
 let EFFilmStrip = class extends TWMixin(LitElement) {
@@ -532,7 +541,7 @@ let EFFilmStrip = class extends TWMixin(LitElement) {
   scrollScrub(e) {
     if (this.target && this.gutter && !this.playing) {
       e.preventDefault();
-      if (this.gutterRef.value.scrollLeft === 0 && e.deltaX < 0) {
+      if (this.gutterRef.value && this.gutterRef.value.scrollLeft === 0 && e.deltaX < 0) {
         this.gutter.scrollBy(0, e.deltaY);
         return;
       }
@@ -566,12 +575,16 @@ let EFFilmStrip = class extends TWMixin(LitElement) {
           step="0.001"
           @input=${(e) => {
       const target2 = e.target;
-      this.pixelsPerMs = parseFloat(target2.value);
+      this.pixelsPerMs = Number.parseFloat(target2.value);
     }}
         />
         <code>${msToTimeCode(this.currentTimeMs, true)} </code> /
         <code>${msToTimeCode(target?.durationMs ?? 0, true)}</code>
-        ${this.playing ? html`<button @click=${() => this.playing = false}>⏸️</button>` : html`<button @click=${() => this.playing = true}>▶️</button>`}
+        ${this.playing ? html`<button @click=${() => {
+      this.playing = false;
+    }}>⏸️</button>` : html`<button @click=${() => {
+      this.playing = true;
+    }}>▶️</button>`}
       </div>
       <div class="z-10 pl-1 pr-1 pt-2 shadow shadow-slate-600">
         ${renderHierarchyChildren(Array.from(target?.children ?? []))}
@@ -627,6 +640,7 @@ let EFFilmStrip = class extends TWMixin(LitElement) {
       }
       throw new Error("Invalid target, must be an EFTimegroup element");
     }
+    return void 0;
   }
 };
 _lastTick = /* @__PURE__ */ new WeakMap();

package/dist/packages/elements/src/gui/EFWorkbench.cjs

@@ -0,0 +1,199 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const context = require("@lit/context");
+const lit = require("lit");
+const task = require("@lit/task");
+const decorators_js = require("lit/decorators.js");
+const ref_js = require("lit/directives/ref.js");
+const awaitMicrotask = require("../../../../lib/util/awaitMicrotask.cjs");
+const EFTemporal = require("../elements/EFTemporal.cjs");
+const TWMixin = require("./TWMixin.cjs");
+const EFTimegroup = require("../elements/EFTimegroup.cjs");
+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;
+};
+const focusContext = context.createContext(null);
+const focusedElement = context.createContext(null);
+const fetchContext = context.createContext(fetch);
+const apiHostContext = context.createContext(null);
+exports.EFWorkbench = class EFWorkbench extends TWMixin.TWMixin(lit.LitElement) {
+  constructor() {
+    super(...arguments);
+    this.stageRef = ref_js.createRef();
+    this.canvasRef = ref_js.createRef();
+    this.resizeObserver = new ResizeObserver(() => {
+      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;
+            canvasElement.style.transform = `scale(${scale})`;
+          } else {
+            const scale = stageWidth / canvasWidth;
+            canvasElement.style.transform = `scale(${scale})`;
+          }
+        }
+      }
+    });
+    this.focusContext = this;
+    this.focusedElement = null;
+    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 = ref_js.createRef();
+    this.drawOverlays = () => {
+      const focusOverlay = this.focusOverlay.value;
+      if (focusOverlay) {
+        if (this.focusedElement) {
+          focusOverlay.style.display = "block";
+          const rect = this.focusedElement.getBoundingClientRect();
+          Object.assign(focusOverlay.style, {
+            position: "absolute",
+            top: `${rect.top}px`,
+            left: `${rect.left}px`,
+            width: `${rect.width}px`,
+            height: `${rect.height}px`
+          });
+          requestAnimationFrame(this.drawOverlays);
+        } else {
+          focusOverlay.style.display = "none";
+        }
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.resizeObserver.observe(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver.unobserve(this);
+  }
+  handleStageWheel(event) {
+    event.preventDefault();
+  }
+  update(changedProperties) {
+    super.update(changedProperties);
+    if (changedProperties.has("focusedElement")) {
+      this.drawOverlays();
+    }
+  }
+  render() {
+    if (this.rendering) {
+      return lit.html`
+        <slot
+          ${ref_js.ref(this.canvasRef)}
+          class="fixed inset-0 h-full w-full"
+          name="canvas"
+        ></slot>
+      `;
+    }
+    return lit.html`
+      <div
+        class="grid h-full w-full"
+        style="gridTemplateRows: 1fr 200px; gridTemplateColumns: 100%;"
+      >
+        <div
+          ${ref_js.ref(this.stageRef)}
+          class="relative grid h-full w-full place-content-center place-items-center overflow-hidden"
+          @wheel=${this.handleStageWheel}
+        >
+          <slot
+            ${ref_js.ref(this.canvasRef)}
+            class="inline-block"
+            name="canvas"
+          ></slot>
+          <div
+            class="border border-blue-500 bg-blue-200 bg-opacity-20"
+            ${ref_js.ref(this.focusOverlay)}
+          ></div>
+        </div>
+
+        <slot class="overflow" name="timeline"></slot>
+      </div>
+    `;
+  }
+  async stepThrough() {
+    const stepDurationMs = 1e3 / 30;
+    const timegroups = EFTimegroup.shallowGetTimegroups(this);
+    const firstGroup = timegroups[0];
+    if (!firstGroup) {
+      throw new Error("No temporal elements found");
+    }
+    firstGroup.currentTimeMs = 0;
+    const temporals = EFTemporal.deepGetTemporalElements(this);
+    const busyTasks = temporals.filter((temporal) => temporal.frameTask.status < task.TaskStatus.COMPLETE).map((temporal) => temporal.frameTask);
+    await Promise.all(busyTasks.map((task2) => task2.taskComplete));
+    while (firstGroup.currentTimeMs < firstGroup.durationMs) {
+      firstGroup.currentTimeMs += stepDurationMs;
+      await awaitMicrotask.awaitMicrotask();
+      const busyTasks2 = temporals.filter((temporal) => temporal.frameTask.status < task.TaskStatus.COMPLETE).map((temporal) => temporal.frameTask);
+      await Promise.all(busyTasks2.map((task2) => task2.taskComplete));
+    }
+  }
+};
+exports.EFWorkbench.styles = [
+  lit.css`
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    `
+];
+__decorateClass([
+  decorators_js.eventOptions({ passive: false, capture: true })
+], exports.EFWorkbench.prototype, "handleStageWheel", 1);
+__decorateClass([
+  context.provide({ context: focusContext })
+], exports.EFWorkbench.prototype, "focusContext", 2);
+__decorateClass([
+  context.provide({ context: focusedElement }),
+  decorators_js.state()
+], exports.EFWorkbench.prototype, "focusedElement", 2);
+__decorateClass([
+  context.provide({ context: fetchContext })
+], exports.EFWorkbench.prototype, "fetch", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.EFWorkbench.prototype, "apiToken", 2);
+__decorateClass([
+  context.provide({ context: apiHostContext }),
+  decorators_js.property({ type: String })
+], exports.EFWorkbench.prototype, "apiHost", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean })
+], exports.EFWorkbench.prototype, "rendering", 2);
+exports.EFWorkbench = __decorateClass([
+  decorators_js.customElement("ef-workbench")
+], exports.EFWorkbench);
+exports.apiHostContext = apiHostContext;
+exports.fetchContext = fetchContext;
+exports.focusContext = focusContext;
+exports.focusedElement = focusedElement;

package/dist/packages/elements/src/gui/EFWorkbench.d.ts

@@ -0,0 +1,44 @@
+import { LitElement, PropertyValueMap } from 'lit';
+
+export interface FocusContext {
+    focusedElement: HTMLElement | null;
+}
+export declare const focusContext: {
+    __context__: FocusContext;
+};
+export declare const focusedElement: {
+    __context__: HTMLElement | null;
+};
+export declare const fetchContext: {
+    __context__: typeof fetch;
+};
+export declare const apiHostContext: {
+    __context__: string;
+};
+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>;
+    resizeObserver: ResizeObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleStageWheel(event: WheelEvent): void;
+    focusContext: this;
+    focusedElement: HTMLElement | null;
+    fetch: (path: URL | RequestInfo, init?: RequestInit) => Promise<Response>;
+    apiToken?: string;
+    apiHost: string;
+    rendering: boolean;
+    focusOverlay: import('lit-html/directives/ref').Ref<HTMLDivElement>;
+    protected update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    drawOverlays: () => void;
+    render(): import('lit-html').TemplateResult<1>;
+    stepThrough(): Promise<void>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ef-workbench": EFWorkbench;
+    }
+}
+export {};

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

@@ -1,12 +1,12 @@
 import { createContext, provide } from "@lit/context";
-import { css, LitElement, html } from "lit";
+import { css, html, LitElement } from "lit";
 import { TaskStatus } from "@lit/task";
 import { eventOptions, state, property, customElement } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
-import { awaitMicrotask } from "../../../../lib/util/awaitMicrotask.mjs";
-import { deepGetTemporalElements } from "../elements/EFTemporal.mjs";
-import { TWMixin } from "./TWMixin.mjs";
-import { shallowGetTimegroups } from "../elements/EFTimegroup.mjs";
+import { awaitMicrotask } from "../../../../lib/util/awaitMicrotask.js";
+import { deepGetTemporalElements } from "../elements/EFTemporal.js";
+import { TWMixin } from "./TWMixin.js";
+import { shallowGetTimegroups } from "../elements/EFTimegroup.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -111,32 +111,31 @@ let EFWorkbench = class extends TWMixin(LitElement) {
           name="canvas"
         ></slot>
       `;
-    } else {
-      return html`
+    }
+    return html`
+      <div
+        class="grid h-full w-full"
+        style="gridTemplateRows: 1fr 200px; gridTemplateColumns: 100%;"
+      >
         <div
-          class="grid h-full w-full"
-          style="gridTemplateRows: 1fr 200px; gridTemplateColumns: 100%;"
+          ${ref(this.stageRef)}
+          class="relative grid h-full w-full place-content-center place-items-center overflow-hidden"
+          @wheel=${this.handleStageWheel}
         >
+          <slot
+            ${ref(this.canvasRef)}
+            class="inline-block"
+            name="canvas"
+          ></slot>
           <div
-            ${ref(this.stageRef)}
-            class="relative grid h-full w-full place-content-center place-items-center overflow-hidden"
-            @wheel=${this.handleStageWheel}
-          >
-            <slot
-              ${ref(this.canvasRef)}
-              class="inline-block"
-              name="canvas"
-            ></slot>
-            <div
-              class="border border-blue-500 bg-blue-200 bg-opacity-20"
-              ${ref(this.focusOverlay)}
-            ></div>
-          </div>
-
-          <slot class="overflow" name="timeline"></slot>
+            class="border border-blue-500 bg-blue-200 bg-opacity-20"
+            ${ref(this.focusOverlay)}
+          ></div>
         </div>
-      `;
-    }
+
+        <slot class="overflow" name="timeline"></slot>
+      </div>
+    `;
   }
   async stepThrough() {
     const stepDurationMs = 1e3 / 30;

package/dist/packages/elements/src/gui/TWMixin.cjs

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const TWMixin$1 = require("./TWMixin.css.cjs");
+const twSheet = new CSSStyleSheet();
+twSheet.replaceSync(TWMixin$1);
+function TWMixin(Base) {
+  class TWElement extends Base {
+    createRenderRoot() {
+      const renderRoot = super.createRenderRoot();
+      if (!(renderRoot instanceof ShadowRoot)) {
+        throw new Error(
+          "TWMixin can only be applied to elements with shadow roots"
+        );
+      }
+      if (renderRoot?.adoptedStyleSheets) {
+        renderRoot.adoptedStyleSheets = [
+          twSheet,
+          ...renderRoot.adoptedStyleSheets
+        ];
+      } else {
+        renderRoot.adoptedStyleSheets = [twSheet];
+      }
+      return renderRoot;
+    }
+  }
+  return TWElement;
+}
+exports.TWMixin = TWMixin;