@editframe/elements 0.20.4-beta.0 → 0.23.6-beta.0

package/dist/gui/EFFitScale.js

@@ -1,8 +1,8 @@
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
 import { LitElement } from "lit";
 import { customElement, state } from "lit/decorators.js";
-import _decorate from "@oxc-project/runtime/helpers/decorate";
 import { createRef } from "lit/directives/ref.js";
-let EFFitScale = class EFFitScale$1 extends LitElement {
+var EFFitScale = class EFFitScale$1 extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this.containerRef = createRef();
@@ -89,11 +89,8 @@ let EFFitScale = class EFFitScale$1 extends LitElement {
 		const containerHeight = this.clientHeight;
 		const contentWidth = this.contentChild.clientWidth;
 		const contentHeight = this.contentChild.clientHeight;
-		const containerRatio = containerWidth / containerHeight;
-		const contentRatio = contentWidth / contentHeight;
-		const scale = containerRatio > contentRatio ? containerHeight / contentHeight : containerWidth / contentWidth;
 		return {
-			scale,
+			scale: containerWidth / containerHeight > contentWidth / contentHeight ? containerHeight / contentHeight : containerWidth / contentWidth,
 			containerWidth,
 			containerHeight,
 			contentWidth,
@@ -110,6 +107,6 @@ let EFFitScale = class EFFitScale$1 extends LitElement {
 		if (this.animationFrameId) cancelAnimationFrame(this.animationFrameId);
 	}
 };
-_decorate([state()], EFFitScale.prototype, "scale", void 0);
-EFFitScale = _decorate([customElement("ef-fit-scale")], EFFitScale);
+__decorate([state()], EFFitScale.prototype, "scale", void 0);
+EFFitScale = __decorate([customElement("ef-fit-scale")], EFFitScale);
 export { EFFitScale };

package/dist/gui/EFFocusOverlay.js

@@ -1,10 +1,10 @@
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
 import { focusedElementContext } from "./focusedElementContext.js";
 import { consume } from "@lit/context";
 import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
-import _decorate from "@oxc-project/runtime/helpers/decorate";
 import { createRef, ref } from "lit/directives/ref.js";
-let EFFocusOverlay = class EFFocusOverlay$1 extends LitElement {
+var EFFocusOverlay = class EFFocusOverlay$1 extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this.overlay = createRef();
@@ -58,9 +58,9 @@ let EFFocusOverlay = class EFFocusOverlay$1 extends LitElement {
 		this.drawOverlay();
 	}
 };
-_decorate([consume({
+__decorate([consume({
 	context: focusedElementContext,
 	subscribe: true
 })], EFFocusOverlay.prototype, "focusedElement", void 0);
-EFFocusOverlay = _decorate([customElement("ef-focus-overlay")], EFFocusOverlay);
+EFFocusOverlay = __decorate([customElement("ef-focus-overlay")], EFFocusOverlay);
 export { EFFocusOverlay };

package/dist/gui/EFPause.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+import { ControllableInterface } from './Controllable.js';
+declare const EFPause_base: (new (...args: any[]) => {
+    target: string;
+    targetElement: ControllableInterface | null;
+    effectiveContext: ControllableInterface | null;
+}) & typeof LitElement;
+export declare class EFPause extends EFPause_base {
+    static styles: import('lit').CSSResult[];
+    playing: boolean;
+    get efContext(): ControllableInterface | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    render(): import('lit-html').TemplateResult<1>;
+    handleClick: () => void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ef-pause": EFPause;
+    }
+}
+export {};

package/dist/gui/EFPause.js

@@ -0,0 +1,59 @@
+import { playingContext } from "./playingContext.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { efContext } from "./efContext.js";
+import { attachContextRoot } from "../attachContextRoot.js";
+import { TargetOrContextMixin } from "./TargetOrContextMixin.js";
+import { consume } from "@lit/context";
+import { LitElement, css, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+attachContextRoot();
+var EFPause = class EFPause$1 extends TargetOrContextMixin(LitElement, efContext) {
+	constructor(..._args) {
+		super(..._args);
+		this.playing = false;
+		this.handleClick = () => {
+			if (this.efContext) this.efContext.pause();
+		};
+	}
+	static {
+		this.styles = [css`
+      :host {
+        display: block;
+      }
+      :host([hidden]) {
+        display: none;
+      }
+      div {
+        all: inherit;
+      }
+    `];
+	}
+	get efContext() {
+		return this.effectiveContext;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("click", this.handleClick);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("click", this.handleClick);
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("playing")) this.style.display = this.playing ? "" : "none";
+	}
+	render() {
+		return html`
+      <div>
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+__decorate([consume({
+	context: playingContext,
+	subscribe: true
+}), state()], EFPause.prototype, "playing", void 0);
+EFPause = __decorate([customElement("ef-pause")], EFPause);
+export { EFPause };

package/dist/gui/EFPlay.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+import { ControllableInterface } from './Controllable.js';
+declare const EFPlay_base: (new (...args: any[]) => {
+    target: string;
+    targetElement: ControllableInterface | null;
+    effectiveContext: ControllableInterface | null;
+}) & typeof LitElement;
+export declare class EFPlay extends EFPlay_base {
+    static styles: import('lit').CSSResult[];
+    playing: boolean;
+    get efContext(): ControllableInterface | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    render(): import('lit-html').TemplateResult<1>;
+    handleClick: () => void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ef-play": EFPlay;
+    }
+}
+export {};

package/dist/gui/EFPlay.js

@@ -0,0 +1,59 @@
+import { playingContext } from "./playingContext.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { efContext } from "./efContext.js";
+import { attachContextRoot } from "../attachContextRoot.js";
+import { TargetOrContextMixin } from "./TargetOrContextMixin.js";
+import { consume } from "@lit/context";
+import { LitElement, css, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+attachContextRoot();
+var EFPlay = class EFPlay$1 extends TargetOrContextMixin(LitElement, efContext) {
+	constructor(..._args) {
+		super(..._args);
+		this.playing = false;
+		this.handleClick = () => {
+			if (this.efContext) this.efContext.play();
+		};
+	}
+	static {
+		this.styles = [css`
+      :host {
+        display: block;
+      }
+      :host([hidden]) {
+        display: none;
+      }
+      div {
+        all: inherit;
+      }
+    `];
+	}
+	get efContext() {
+		return this.effectiveContext;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("click", this.handleClick);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("click", this.handleClick);
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("playing")) this.style.display = this.playing ? "none" : "";
+	}
+	render() {
+		return html`
+      <div>
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+__decorate([consume({
+	context: playingContext,
+	subscribe: true
+}), state()], EFPlay.prototype, "playing", void 0);
+EFPlay = __decorate([customElement("ef-play")], EFPlay);
+export { EFPlay };

package/dist/gui/EFPreview.d.ts

@@ -3,6 +3,10 @@ declare const EFPreview_base: (new (...args: any[]) => import('./ContextMixin.js
 export declare class EFPreview extends EFPreview_base {
     static styles: import('lit').CSSResult[];
     focusedElement?: HTMLElement;
+    /**
+     * Find the closest temporal element (timegroup, video, audio, etc.)
+     */
+    private findClosestTemporal;
     constructor();
     render(): import('lit-html').TemplateResult<1>;
 }

package/dist/gui/EFPreview.js

@@ -1,12 +1,13 @@
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { isEFTemporal } from "../elements/EFTemporal.js";
 import { focusedElementContext } from "./focusedElementContext.js";
 import { ContextMixin } from "./ContextMixin.js";
-import { EFTargetable } from "../elements/TargetController.js";
 import { TWMixin } from "./TWMixin2.js";
+import { EFTargetable } from "../elements/TargetController.js";
 import { provide } from "@lit/context";
 import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
-import _decorate from "@oxc-project/runtime/helpers/decorate";
-let EFPreview = class EFPreview$1 extends EFTargetable(ContextMixin(TWMixin(LitElement))) {
+var EFPreview = class EFPreview$1 extends EFTargetable(ContextMixin(TWMixin(LitElement))) {
 	static {
 		this.styles = [css`
       :host {
@@ -16,23 +17,31 @@ let EFPreview = class EFPreview$1 extends EFTargetable(ContextMixin(TWMixin(LitE
       }
     `];
 	}
+	findClosestTemporal(element) {
+		let current = element;
+		while (current && current !== this) {
+			if (isEFTemporal(current)) return current;
+			current = current.parentElement;
+		}
+		return null;
+	}
 	constructor() {
 		super();
 		this.addEventListener("mouseover", (e) => {
 			const target = e.target;
-			const timegroup = target.closest("ef-timegroup");
-			if (target !== this && timegroup) this.focusedElement = target;
+			const temporal = this.findClosestTemporal(target);
+			if (target !== this && temporal) this.focusedElement = target;
 		});
 		this.addEventListener("mouseout", (e) => {
 			const relatedTarget = e.relatedTarget;
-			const targetingTimegroup = relatedTarget?.closest("ef-timegroup");
-			if (!this.contains(relatedTarget) || relatedTarget === this || !targetingTimegroup) this.focusedElement = void 0;
+			const targetingTemporal = this.findClosestTemporal(relatedTarget);
+			if (!this.contains(relatedTarget) || relatedTarget === this || !targetingTemporal) this.focusedElement = void 0;
 		});
 	}
 	render() {
 		return html`<slot></slot>`;
 	}
 };
-_decorate([provide({ context: focusedElementContext })], EFPreview.prototype, "focusedElement", void 0);
-EFPreview = _decorate([customElement("ef-preview")], EFPreview);
+__decorate([provide({ context: focusedElementContext })], EFPreview.prototype, "focusedElement", void 0);
+EFPreview = __decorate([customElement("ef-preview")], EFPreview);
 export { EFPreview };

package/dist/gui/EFResizableBox.d.ts

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+export interface BoxBounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export declare class EFResizableBox extends LitElement {
+    bounds: BoxBounds;
+    private containerWidth;
+    private containerHeight;
+    minSize: number;
+    private isDragging;
+    private dragMode;
+    private interaction;
+    private modifiers;
+    static styles: import('lit').CSSResult;
+    private resizeObserver?;
+    connectedCallback(): void;
+    private handlePointerDown;
+    private handlePointerMove;
+    private handlePointerUp;
+    private calculateBoundsWithModeAwareConstraints;
+    private constrainBoundsForMode;
+    private isValidBounds;
+    private constrainWithAspectRatio;
+    private constrainCenterResize;
+    private constrainCenterResizeWithAspectRatio;
+    private simpleConstrainBounds;
+    private constrainResizeDeltas;
+    private dispatchBoundsChange;
+    render(): import('lit-html').TemplateResult<1>;
+    private renderHandles;
+}