@editframe/elements 0.35.0-beta → 0.36.1-beta

package/dist/gui/EFFilmstrip.d.ts

@@ -1,7 +1,7 @@
 import { TemporalMixinInterface } from "../elements/EFTemporal.js";
 import "./timeline/EFTimeline.js";
 import { LitElement } from "lit";
-import * as lit_html10 from "lit-html";
+import * as lit_html4 from "lit-html";
 import * as lit_html_directives_ref0 from "lit-html/directives/ref";
 
 //#region src/gui/EFFilmstrip.d.ts
@@ -22,7 +22,7 @@ declare class EFFilmstrip extends EFFilmstrip_base {
   timelineRef: lit_html_directives_ref0.Ref<HTMLElement>;
   connectedCallback(): void;
   protected willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
-  render(): lit_html10.TemplateResult<1>;
+  render(): lit_html4.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/EFFitScale.d.ts

@@ -1,10 +1,10 @@
 import { LitElement } from "lit";
-import * as lit_html_directives_ref1 from "lit-html/directives/ref";
+import * as lit_html_directives_ref0 from "lit-html/directives/ref";
 
 //#region src/gui/EFFitScale.d.ts
 declare class EFFitScale extends LitElement {
-  containerRef: lit_html_directives_ref1.Ref<HTMLDivElement>;
-  contentRef: lit_html_directives_ref1.Ref<HTMLSlotElement>;
+  containerRef: lit_html_directives_ref0.Ref<HTMLDivElement>;
+  contentRef: lit_html_directives_ref0.Ref<HTMLSlotElement>;
   createRenderRoot(): this;
   uniqueId: string;
   private scale;

package/dist/gui/EFFocusOverlay.d.ts

@@ -1,16 +1,16 @@
-import * as lit23 from "lit";
+import * as lit25 from "lit";
 import { LitElement } from "lit";
-import * as lit_html22 from "lit-html";
+import * as lit_html24 from "lit-html";
 import * as lit_html_directives_ref_js3 from "lit-html/directives/ref.js";
 
 //#region src/gui/EFFocusOverlay.d.ts
 declare class EFFocusOverlay extends LitElement {
-  static styles: lit23.CSSResult;
+  static styles: lit25.CSSResult;
   focusedElement?: HTMLElement | null;
   overlay: lit_html_directives_ref_js3.Ref<HTMLDivElement>;
   private animationFrame?;
   drawOverlay: () => void;
-  render(): lit_html22.TemplateResult<1>;
+  render(): lit_html24.TemplateResult<1>;
   connectedCallback(): void;
   disconnectedCallback(): void;
   protected updated(): void;

package/dist/gui/EFPause.d.ts

@@ -1,7 +1,7 @@
 import { ControllableInterface } from "./Controllable.js";
-import * as lit16 from "lit";
+import * as lit18 from "lit";
 import { LitElement } from "lit";
-import * as lit_html16 from "lit-html";
+import * as lit_html18 from "lit-html";
 
 //#region src/gui/EFPause.d.ts
 declare const EFPause_base: (new (...args: any[]) => {
@@ -10,13 +10,13 @@ declare const EFPause_base: (new (...args: any[]) => {
   effectiveContext: ControllableInterface | null;
 }) & typeof LitElement;
 declare class EFPause extends EFPause_base {
-  static styles: lit16.CSSResult[];
+  static styles: lit18.CSSResult[];
   playing: boolean;
   get efContext(): ControllableInterface | null;
   connectedCallback(): void;
   disconnectedCallback(): void;
   updated(changedProperties: Map<string | number | symbol, unknown>): void;
-  render(): lit_html16.TemplateResult<1>;
+  render(): lit_html18.TemplateResult<1>;
   handleClick: () => void;
 }
 declare global {

package/dist/gui/EFPlay.d.ts

@@ -1,7 +1,7 @@
 import { ControllableInterface } from "./Controllable.js";
-import * as lit15 from "lit";
+import * as lit17 from "lit";
 import { LitElement } from "lit";
-import * as lit_html15 from "lit-html";
+import * as lit_html17 from "lit-html";
 
 //#region src/gui/EFPlay.d.ts
 declare const EFPlay_base: (new (...args: any[]) => {
@@ -10,13 +10,13 @@ declare const EFPlay_base: (new (...args: any[]) => {
   effectiveContext: ControllableInterface | null;
 }) & typeof LitElement;
 declare class EFPlay extends EFPlay_base {
-  static styles: lit15.CSSResult[];
+  static styles: lit17.CSSResult[];
   playing: boolean;
   get efContext(): ControllableInterface | null;
   connectedCallback(): void;
   disconnectedCallback(): void;
   updated(changedProperties: Map<string | number | symbol, unknown>): void;
-  render(): lit_html15.TemplateResult<1>;
+  render(): lit_html17.TemplateResult<1>;
   handleClick: () => void;
 }
 declare global {

package/dist/gui/EFPreview.d.ts

@@ -1,19 +1,19 @@
 import { ContextMixinInterface } from "./ContextMixin.js";
-import * as lit9 from "lit";
+import * as lit12 from "lit";
 import { LitElement } from "lit";
-import * as lit_html9 from "lit-html";
+import * as lit_html13 from "lit-html";
 
 //#region src/gui/EFPreview.d.ts
 declare const EFPreview_base: (new (...args: any[]) => ContextMixinInterface) & typeof LitElement;
 declare class EFPreview extends EFPreview_base {
-  static styles: lit9.CSSResult[];
+  static styles: lit12.CSSResult[];
   focusedElement?: HTMLElement;
   /**
    * Find the closest temporal element (timegroup, video, audio, etc.)
    */
   private findClosestTemporal;
   constructor();
-  render(): lit_html9.TemplateResult<1>;
+  render(): lit_html13.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/EFResizableBox.d.ts

@@ -1,6 +1,6 @@
-import * as lit25 from "lit";
+import * as lit27 from "lit";
 import { LitElement } from "lit";
-import * as lit_html24 from "lit-html";
+import * as lit_html26 from "lit-html";
 
 //#region src/gui/EFResizableBox.d.ts
 interface BoxBounds {
@@ -21,7 +21,7 @@ declare class EFResizableBox extends LitElement {
   private resizeStartCorner;
   private resizeStartSize;
   private resizeStartPosition;
-  static styles: lit25.CSSResult;
+  static styles: lit27.CSSResult;
   private resizeObserver?;
   connectedCallback(): void;
   disconnectedCallback(): void;
@@ -30,7 +30,7 @@ declare class EFResizableBox extends LitElement {
   private handlePointerUp;
   private cleanup;
   private dispatchBoundsChange;
-  render(): lit_html24.TemplateResult<1>;
+  render(): lit_html26.TemplateResult<1>;
 }
 //#endregion
 export { BoxBounds, EFResizableBox };

package/dist/gui/EFScrubber.d.ts

@@ -1,7 +1,7 @@
 import { ControllableInterface } from "./Controllable.js";
-import * as lit18 from "lit";
+import * as lit20 from "lit";
 import { LitElement } from "lit";
-import * as lit_html18 from "lit-html";
+import * as lit_html20 from "lit-html";
 
 //#region src/gui/EFScrubber.d.ts
 declare const EFScrubber_base: (new (...args: any[]) => {
@@ -10,7 +10,7 @@ declare const EFScrubber_base: (new (...args: any[]) => {
   effectiveContext: ControllableInterface | null;
 }) & typeof LitElement;
 declare class EFScrubber extends EFScrubber_base {
-  static styles: lit18.CSSResult[];
+  static styles: lit20.CSSResult[];
   playing: boolean;
   contextCurrentTimeMs: number;
   contextDurationMs: number;
@@ -50,7 +50,7 @@ declare class EFScrubber extends EFScrubber_base {
   private boundHandlePointerUp;
   private boundHandlePointerCancel;
   private boundHandleContextMenu;
-  render(): lit_html18.TemplateResult<1>;
+  render(): lit_html20.TemplateResult<1>;
   connectedCallback(): void;
   disconnectedCallback(): void;
 }

package/dist/gui/EFTimeDisplay.d.ts

@@ -1,7 +1,7 @@
 import { ControllableInterface } from "./Controllable.js";
-import * as lit19 from "lit";
+import * as lit21 from "lit";
 import { LitElement } from "lit";
-import * as lit_html19 from "lit-html";
+import * as lit_html21 from "lit-html";
 
 //#region src/gui/EFTimeDisplay.d.ts
 declare const EFTimeDisplay_base: (new (...args: any[]) => {
@@ -10,11 +10,11 @@ declare const EFTimeDisplay_base: (new (...args: any[]) => {
   effectiveContext: ControllableInterface | null;
 }) & typeof LitElement;
 declare class EFTimeDisplay extends EFTimeDisplay_base {
-  static styles: lit19.CSSResult;
+  static styles: lit21.CSSResult;
   currentTimeMs: number;
   durationMs: number;
   private formatTime;
-  render(): lit_html19.TemplateResult<1>;
+  render(): lit_html21.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/EFToggleLoop.d.ts

@@ -1,7 +1,7 @@
 import { ControllableInterface } from "./Controllable.js";
-import * as lit17 from "lit";
+import * as lit19 from "lit";
 import { LitElement } from "lit";
-import * as lit_html17 from "lit-html";
+import * as lit_html19 from "lit-html";
 
 //#region src/gui/EFToggleLoop.d.ts
 declare const EFToggleLoop_base: (new (...args: any[]) => {
@@ -10,9 +10,9 @@ declare const EFToggleLoop_base: (new (...args: any[]) => {
   effectiveContext: ControllableInterface | null;
 }) & typeof LitElement;
 declare class EFToggleLoop extends EFToggleLoop_base {
-  static styles: lit17.CSSResult[];
+  static styles: lit19.CSSResult[];
   get context(): ControllableInterface | null;
-  render(): lit_html17.TemplateResult<1>;
+  render(): lit_html19.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/EFTogglePlay.d.ts

@@ -1,7 +1,7 @@
 import { ControllableInterface } from "./Controllable.js";
-import * as lit14 from "lit";
+import * as lit16 from "lit";
 import { LitElement } from "lit";
-import * as lit_html14 from "lit-html";
+import * as lit_html16 from "lit-html";
 
 //#region src/gui/EFTogglePlay.d.ts
 declare const EFTogglePlay_base: (new (...args: any[]) => {
@@ -10,12 +10,12 @@ declare const EFTogglePlay_base: (new (...args: any[]) => {
   effectiveContext: ControllableInterface | null;
 }) & typeof LitElement;
 declare class EFTogglePlay extends EFTogglePlay_base {
-  static styles: lit14.CSSResult[];
+  static styles: lit16.CSSResult[];
   playing: boolean;
   get efContext(): ControllableInterface | null;
   connectedCallback(): void;
   disconnectedCallback(): void;
-  render(): lit_html14.TemplateResult<1>;
+  render(): lit_html16.TemplateResult<1>;
   togglePlay: () => void;
   private getPlaybackController;
 }

package/dist/gui/EFTransformHandles.d.ts

@@ -1,7 +1,7 @@
 import { PanZoomTransform } from "../elements/EFPanZoom.js";
-import * as lit24 from "lit";
+import * as lit26 from "lit";
 import { LitElement } from "lit";
-import * as lit_html23 from "lit-html";
+import * as lit_html25 from "lit-html";
 
 //#region src/gui/EFTransformHandles.d.ts
 interface TransformBounds {
@@ -49,7 +49,7 @@ declare class EFTransformHandles extends LitElement {
    * Note: Not a @state() property to avoid re-renders during interaction.
    */
   private initialBounds;
-  static styles: lit24.CSSResult;
+  static styles: lit26.CSSResult;
   private resizeObserver?;
   /**
    * Single source of truth for zoom scale.
@@ -79,7 +79,7 @@ declare class EFTransformHandles extends LitElement {
   private handleMouseMove;
   private handleMouseUp;
   private cleanup;
-  render(): lit_html23.TemplateResult<1>;
+  render(): lit_html25.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/EFWorkbench.d.ts

@@ -1,15 +1,15 @@
 import { ContextMixinInterface } from "./ContextMixin.js";
 import { RenderToVideoOptions } from "../preview/renderTimegroupToVideo.js";
 import "./EFFitScale.js";
-import * as lit8 from "lit";
+import * as lit5 from "lit";
 import { LitElement, PropertyValueMap } from "lit";
-import * as lit_html8 from "lit-html";
-import * as lit_html_directives_ref_js2 from "lit-html/directives/ref.js";
+import * as lit_html5 from "lit-html";
+import * as lit_html_directives_ref_js1 from "lit-html/directives/ref.js";
 
 //#region src/gui/EFWorkbench.d.ts
 declare const EFWorkbench_base: (new (...args: any[]) => ContextMixinInterface) & typeof LitElement;
 declare class EFWorkbench extends EFWorkbench_base {
-  static styles: lit8.CSSResult[];
+  static styles: lit5.CSSResult[];
   rendering: boolean;
   private panZoomTransform;
   private isExporting;
@@ -61,7 +61,7 @@ declare class EFWorkbench extends EFWorkbench_base {
   private canvasPreviewResult;
   private canvasAnimationFrame;
   private boundHandleTransformChanged;
-  focusOverlay: lit_html_directives_ref_js2.Ref<HTMLDivElement>;
+  focusOverlay: lit_html_directives_ref_js1.Ref<HTMLDivElement>;
   handleStageWheel(event: WheelEvent): void;
   connectedCallback(): void;
   disconnectedCallback(): void;
@@ -194,7 +194,7 @@ declare class EFWorkbench extends EFWorkbench_base {
   updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
   drawOverlays: () => void;
   private renderPlaybackStats;
-  render(): lit_html8.TemplateResult<1>;
+  render(): lit_html5.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/EFWorkbench.js

@@ -1,7 +1,6 @@
 import { __decorate } from "../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
 import { ContextMixin } from "./ContextMixin.js";
 import { TWMixin } from "./TWMixin2.js";
-import { renderTimegroupPreview } from "../preview/renderTimegroupPreview.js";
 import { getPreviewPresentationMode, getPreviewResolutionScale, getRenderMode, getShowStats, isNativeCanvasApiAvailable, setPreviewPresentationMode, setPreviewResolutionScale, setRenderMode, setShowStats } from "../preview/previewSettings.js";
 import { renderTimegroupToCanvas } from "../preview/renderTimegroupToCanvas.js";
 import { RenderCancelledError, renderTimegroupToVideo } from "../preview/renderTimegroupToVideo.js";
@@ -127,6 +126,34 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
         --toolbar-border: rgba(148, 163, 184, 0.15);
       }
       
+      /* Utility classes (not relying on external Tailwind) */
+      .grid {
+        display: grid;
+      }
+      
+      .overflow-hidden {
+        overflow: hidden;
+      }
+      
+      .fixed {
+        position: fixed;
+      }
+      
+      .inset-0 {
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
+      
+      .h-full {
+        height: 100%;
+      }
+      
+      .w-full {
+        width: 100%;
+      }
+      
       .toolbar {
         display: flex;
         align-items: center;
@@ -1825,19 +1852,18 @@ let EFWorkbench = class EFWorkbench$1 extends ContextMixin(TWMixin(LitElement))
         </div>
         
         ${isRendering && p !== null ? html`
-          ${p.framePreviewUrl ? html`
+          ${p.framePreviewCanvas ? html`
             <div style="margin-bottom: 10px; display: flex; justify-content: center;">
-              <img 
-                src=${p.framePreviewUrl} 
-                alt="Current frame"
-                style="
-                  border-radius: 4px;
-                  border: 1px solid rgba(148, 163, 184, 0.2);
-                  max-width: 100%;
-                  height: auto;
-                "
-              />
+              ${p.framePreviewCanvas}
             </div>
+            <style>
+              ef-workbench canvas {
+                border-radius: 4px;
+                border: 1px solid rgba(148, 163, 184, 0.2);
+                max-width: 100%;
+                height: auto;
+              }
+            </style>
           ` : null}
           
           <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-bottom: 10px; font-family: ui-monospace, monospace; font-size: 10px;">