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

package/dist/gui/EFPreview.js

@@ -1,8 +1,9 @@
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.93.0/helpers/decorate.js";
+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";
@@ -16,17 +17,25 @@ var 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() {

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;
+}

package/dist/gui/EFResizableBox.js

@@ -0,0 +1,547 @@
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+var DEFAULT_MIN_SIZE = 10;
+var CENTER_RESIZE_MULTIPLIER = 2;
+function constrainMovementDeltas(initialBounds, deltaX, deltaY, container) {
+	const maxLeftMovement = -initialBounds.x;
+	const maxRightMovement = container.width - (initialBounds.x + initialBounds.width);
+	const maxUpMovement = -initialBounds.y;
+	const maxDownMovement = container.height - (initialBounds.y + initialBounds.height);
+	return {
+		deltaX: Math.max(maxLeftMovement, Math.min(maxRightMovement, deltaX)),
+		deltaY: Math.max(maxUpMovement, Math.min(maxDownMovement, deltaY))
+	};
+}
+function calculateNormalResize(context, handle) {
+	const { initialBounds, movement } = context;
+	const { deltaX, deltaY } = movement;
+	switch (handle) {
+		case "bottom-right": return {
+			...initialBounds,
+			width: initialBounds.width + deltaX,
+			height: initialBounds.height + deltaY
+		};
+		case "top-left": {
+			const rightEdge = initialBounds.x + initialBounds.width;
+			const bottomEdge = initialBounds.y + initialBounds.height;
+			const newX = initialBounds.x + deltaX;
+			const newY = initialBounds.y + deltaY;
+			return {
+				x: newX,
+				y: newY,
+				width: rightEdge - newX,
+				height: bottomEdge - newY
+			};
+		}
+		case "top-right": {
+			const bottomEdge = initialBounds.y + initialBounds.height;
+			const newY = initialBounds.y + deltaY;
+			return {
+				...initialBounds,
+				y: newY,
+				width: initialBounds.width + deltaX,
+				height: bottomEdge - newY
+			};
+		}
+		case "bottom-left": {
+			const rightEdge = initialBounds.x + initialBounds.width;
+			const newX = initialBounds.x + deltaX;
+			return {
+				...initialBounds,
+				x: newX,
+				width: rightEdge - newX,
+				height: initialBounds.height + deltaY
+			};
+		}
+		case "top": {
+			const bottomEdge = initialBounds.y + initialBounds.height;
+			const newY = initialBounds.y + deltaY;
+			return {
+				...initialBounds,
+				y: newY,
+				height: bottomEdge - newY
+			};
+		}
+		case "right": return {
+			...initialBounds,
+			width: initialBounds.width + deltaX
+		};
+		case "bottom": return {
+			...initialBounds,
+			height: initialBounds.height + deltaY
+		};
+		case "left": {
+			const rightEdge = initialBounds.x + initialBounds.width;
+			const newX = initialBounds.x + deltaX;
+			return {
+				...initialBounds,
+				x: newX,
+				width: rightEdge - newX
+			};
+		}
+		default: return initialBounds;
+	}
+}
+function calculateAspectRatioResize(context, handle) {
+	const { initialBounds, movement, constraints } = context;
+	const { deltaX, deltaY } = movement;
+	if (!constraints.aspectRatio) return initialBounds;
+	const aspectRatio = constraints.aspectRatio;
+	const widthMovement = deltaX;
+	const heightMovement = deltaY * aspectRatio;
+	let movementValue;
+	switch (handle) {
+		case "bottom-right":
+		case "top-left":
+			movementValue = (widthMovement + heightMovement) / 2;
+			break;
+		case "top-right":
+		case "bottom-left":
+			movementValue = (widthMovement - heightMovement) / 2;
+			break;
+		default: movementValue = widthMovement;
+	}
+	const baseWidth = handle === "top-left" || handle === "bottom-left" ? initialBounds.width - movementValue : initialBounds.width + movementValue;
+	const width = Math.max(constraints.minSize, baseWidth);
+	const height = width / aspectRatio;
+	const newBounds = {
+		...initialBounds,
+		width,
+		height
+	};
+	switch (handle) {
+		case "top-left":
+			newBounds.x = initialBounds.x + initialBounds.width - width;
+			newBounds.y = initialBounds.y + initialBounds.height - height;
+			break;
+		case "top-right":
+			newBounds.y = initialBounds.y + initialBounds.height - height;
+			break;
+		case "bottom-left":
+			newBounds.x = initialBounds.x + initialBounds.width - width;
+			break;
+	}
+	return newBounds;
+}
+function calculateCenterResize(context, handle) {
+	const { initialBounds, movement } = context;
+	const { deltaX, deltaY } = movement;
+	const centerX = initialBounds.x + initialBounds.width / 2;
+	const centerY = initialBounds.y + initialBounds.height / 2;
+	let widthChange = 0;
+	let heightChange = 0;
+	switch (handle) {
+		case "bottom-right":
+			widthChange = deltaX * CENTER_RESIZE_MULTIPLIER;
+			heightChange = deltaY * CENTER_RESIZE_MULTIPLIER;
+			break;
+		case "top-left":
+			widthChange = -deltaX * CENTER_RESIZE_MULTIPLIER;
+			heightChange = -deltaY * CENTER_RESIZE_MULTIPLIER;
+			break;
+		case "top-right":
+			widthChange = deltaX * CENTER_RESIZE_MULTIPLIER;
+			heightChange = -deltaY * CENTER_RESIZE_MULTIPLIER;
+			break;
+		case "bottom-left":
+			widthChange = -deltaX * CENTER_RESIZE_MULTIPLIER;
+			heightChange = deltaY * CENTER_RESIZE_MULTIPLIER;
+			break;
+		case "top":
+		case "bottom":
+			heightChange = (handle === "bottom" ? deltaY : -deltaY) * CENTER_RESIZE_MULTIPLIER;
+			break;
+		case "left":
+		case "right":
+			widthChange = (handle === "right" ? deltaX : -deltaX) * CENTER_RESIZE_MULTIPLIER;
+			break;
+	}
+	const newWidth = initialBounds.width + widthChange;
+	const newHeight = initialBounds.height + heightChange;
+	return {
+		x: centerX - newWidth / 2,
+		y: centerY - newHeight / 2,
+		width: newWidth,
+		height: newHeight
+	};
+}
+function calculateCenterResizeWithAspectRatio(context, handle) {
+	const { initialBounds, movement, constraints } = context;
+	const { deltaX, deltaY } = movement;
+	if (!constraints.aspectRatio) return initialBounds;
+	const aspectRatio = constraints.aspectRatio;
+	const centerX = initialBounds.x + initialBounds.width / 2;
+	const centerY = initialBounds.y + initialBounds.height / 2;
+	let movementValue;
+	switch (handle) {
+		case "bottom-right":
+			movementValue = Math.max(deltaX, deltaY);
+			break;
+		case "top-left":
+			movementValue = -Math.max(-deltaX, -deltaY);
+			break;
+		case "top-right":
+			movementValue = Math.max(deltaX, -deltaY);
+			break;
+		case "bottom-left":
+			movementValue = Math.max(-deltaX, deltaY);
+			break;
+		case "top":
+		case "bottom":
+			movementValue = handle === "bottom" ? deltaY : -deltaY;
+			break;
+		case "left":
+		case "right":
+			movementValue = handle === "right" ? deltaX : -deltaX;
+			break;
+		default: movementValue = Math.max(deltaX, deltaY);
+	}
+	const newWidth = Math.max(constraints.minSize, initialBounds.width + movementValue * CENTER_RESIZE_MULTIPLIER);
+	const newHeight = newWidth / aspectRatio;
+	return {
+		x: centerX - newWidth / 2,
+		y: centerY - newHeight / 2,
+		width: newWidth,
+		height: newHeight
+	};
+}
+var EFResizableBox = class EFResizableBox$1 extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.bounds = {
+			x: 0,
+			y: 0,
+			width: 100,
+			height: 100
+		};
+		this.containerWidth = 0;
+		this.containerHeight = 0;
+		this.minSize = DEFAULT_MIN_SIZE;
+		this.isDragging = false;
+		this.dragMode = null;
+		this.interaction = null;
+		this.modifiers = {
+			shift: false,
+			alt: false
+		};
+		this.handlePointerMove = (e) => {
+			if (!this.isDragging || !this.interaction || e.pointerId !== this.interaction.pointerId) return;
+			const deltaX = e.clientX - this.interaction.startPoint.x;
+			const deltaY = e.clientY - this.interaction.startPoint.y;
+			this.modifiers = {
+				shift: e.shiftKey,
+				alt: e.altKey
+			};
+			if (this.dragMode === "move") {
+				const constrainedMovement = constrainMovementDeltas(this.interaction.initialBounds, deltaX, deltaY, {
+					width: this.containerWidth,
+					height: this.containerHeight
+				});
+				this.bounds = {
+					...this.interaction.initialBounds,
+					x: this.interaction.initialBounds.x + constrainedMovement.deltaX,
+					y: this.interaction.initialBounds.y + constrainedMovement.deltaY
+				};
+			} else if (this.dragMode === "resize" && this.interaction.target.handle) {
+				const context = {
+					initialBounds: this.interaction.initialBounds,
+					container: {
+						width: this.containerWidth,
+						height: this.containerHeight
+					},
+					constraints: {
+						minSize: this.minSize,
+						aspectRatio: this.modifiers.shift ? this.interaction.initialBounds.width / this.interaction.initialBounds.height : void 0
+					},
+					movement: {
+						deltaX,
+						deltaY
+					},
+					modifiers: {
+						centerResize: this.modifiers.alt,
+						preserveAspectRatio: this.modifiers.shift
+					}
+				};
+				this.bounds = this.calculateBoundsWithModeAwareConstraints(context, this.interaction.target.handle);
+			}
+			this.dispatchBoundsChange();
+		};
+		this.handlePointerUp = () => {
+			this.isDragging = false;
+			this.dragMode = null;
+			this.interaction = null;
+			document.removeEventListener("pointermove", this.handlePointerMove);
+			document.removeEventListener("pointerup", this.handlePointerUp);
+		};
+	}
+	static {
+		this.styles = css`
+    .box {
+      position: absolute;
+      border: 2px solid var(--ef-resizable-box-border-color, #3b82f6);
+      background-color: var(--ef-resizable-box-bg-color, rgba(59, 130, 246, 0.2));
+      cursor: grab;
+    }
+    .box.dragging {
+      border-color: var(--ef-resizable-box-dragging-border-color, #2563eb);
+      background-color: var(--ef-resizable-box-dragging-bg-color, rgba(37, 99, 235, 0.3));
+    }
+    .handle {
+      position: absolute;
+      background-color: var(--ef-resizable-box-handle-color, #3b82f6);
+      touch-action: none;
+    }
+    .top-left { top: -4px; left: -4px; width: 8px; height: 8px; cursor: nwse-resize; }
+    .top-right { top: -4px; right: -4px; width: 8px; height: 8px; cursor: nesw-resize; }
+    .bottom-left { bottom: -4px; left: -4px; width: 8px; height: 8px; cursor: nesw-resize; }
+    .bottom-right { bottom: -4px; right: -4px; width: 8px; height: 8px; cursor: nwse-resize; }
+    .top { top: -4px; left: 4px; right: 4px; height: 8px; cursor: ns-resize; }
+    .right { top: 4px; bottom: 4px; right: -4px; width: 8px; cursor: ew-resize; }
+    .bottom { bottom: -4px; left: 4px; right: 4px; height: 8px; cursor: ns-resize; }
+    .left { top: 4px; bottom: 4px; left: -4px; width: 8px; cursor: ew-resize; }
+  `;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.offsetParent) {
+			this.containerWidth = this.offsetParent.clientWidth;
+			this.containerHeight = this.offsetParent.clientHeight;
+		}
+		this.resizeObserver = new ResizeObserver(() => {
+			if (this.offsetParent) {
+				this.containerWidth = this.offsetParent.clientWidth;
+				this.containerHeight = this.offsetParent.clientHeight;
+			}
+		});
+		if (this.offsetParent) this.resizeObserver.observe(this.offsetParent);
+	}
+	handlePointerDown(e, mode, handle) {
+		e.preventDefault();
+		e.stopPropagation();
+		this.isDragging = true;
+		this.dragMode = mode;
+		this.interaction = {
+			startPoint: {
+				x: e.clientX,
+				y: e.clientY
+			},
+			target: {
+				mode,
+				handle
+			},
+			initialBounds: { ...this.bounds },
+			pointerId: e.pointerId
+		};
+		this.modifiers = {
+			shift: e.shiftKey,
+			alt: e.altKey
+		};
+		document.addEventListener("pointermove", this.handlePointerMove);
+		document.addEventListener("pointerup", this.handlePointerUp);
+	}
+	calculateBoundsWithModeAwareConstraints(context, handle) {
+		const { modifiers, constraints, container, initialBounds } = context;
+		if (!modifiers.centerResize && !modifiers.preserveAspectRatio) {
+			const constrainedMovement = this.constrainResizeDeltas(initialBounds, context.movement.deltaX, context.movement.deltaY, handle, container, constraints.minSize);
+			return calculateNormalResize({
+				...context,
+				movement: constrainedMovement
+			}, handle);
+		}
+		let idealBounds;
+		if (modifiers.centerResize && modifiers.preserveAspectRatio) idealBounds = calculateCenterResizeWithAspectRatio(context, handle);
+		else if (modifiers.centerResize) idealBounds = calculateCenterResize(context, handle);
+		else idealBounds = calculateAspectRatioResize(context, handle);
+		return this.constrainBoundsForMode(idealBounds, context, handle);
+	}
+	constrainBoundsForMode(idealBounds, context, handle) {
+		const { container, constraints, modifiers } = context;
+		if (this.isValidBounds(idealBounds, container, constraints.minSize)) return idealBounds;
+		if (modifiers.centerResize && modifiers.preserveAspectRatio && constraints.aspectRatio) return this.constrainCenterResizeWithAspectRatio(idealBounds, context);
+		if (modifiers.preserveAspectRatio && constraints.aspectRatio) return this.constrainWithAspectRatio(idealBounds, context, handle);
+		if (modifiers.centerResize) return this.constrainCenterResize(idealBounds, context);
+		return this.simpleConstrainBounds(idealBounds, container, constraints.minSize);
+	}
+	isValidBounds(bounds, container, minSize) {
+		return bounds.x >= 0 && bounds.y >= 0 && bounds.width >= minSize && bounds.height >= minSize && bounds.x + bounds.width <= container.width && bounds.y + bounds.height <= container.height;
+	}
+	constrainWithAspectRatio(idealBounds, context, handle) {
+		const { container, constraints, initialBounds } = context;
+		if (!constraints.aspectRatio) return initialBounds;
+		const aspectRatio = constraints.aspectRatio;
+		const maxWidth = container.width - Math.max(0, idealBounds.x);
+		const maxHeight = container.height - Math.max(0, idealBounds.y);
+		let constrainedWidth = Math.max(constraints.minSize, Math.min(maxWidth, idealBounds.width));
+		let constrainedHeight = constrainedWidth / aspectRatio;
+		if (constrainedHeight > maxHeight) {
+			constrainedHeight = Math.max(constraints.minSize, maxHeight);
+			constrainedWidth = constrainedHeight * aspectRatio;
+		}
+		if (constrainedWidth < constraints.minSize) {
+			constrainedWidth = constraints.minSize;
+			constrainedHeight = constrainedWidth / aspectRatio;
+		}
+		const result = {
+			...idealBounds,
+			width: constrainedWidth,
+			height: constrainedHeight
+		};
+		switch (handle) {
+			case "top-left":
+				result.x = initialBounds.x + initialBounds.width - constrainedWidth;
+				result.y = initialBounds.y + initialBounds.height - constrainedHeight;
+				break;
+			case "top-right":
+				result.y = initialBounds.y + initialBounds.height - constrainedHeight;
+				break;
+			case "bottom-left":
+				result.x = initialBounds.x + initialBounds.width - constrainedWidth;
+				break;
+		}
+		result.x = Math.max(0, Math.min(container.width - result.width, result.x));
+		result.y = Math.max(0, Math.min(container.height - result.height, result.y));
+		return result;
+	}
+	constrainCenterResize(idealBounds, context) {
+		const { container, constraints, initialBounds } = context;
+		const centerX = initialBounds.x + initialBounds.width / 2;
+		const centerY = initialBounds.y + initialBounds.height / 2;
+		const maxWidthFromCenter = Math.min(centerX * 2, (container.width - centerX) * 2);
+		const maxHeightFromCenter = Math.min(centerY * 2, (container.height - centerY) * 2);
+		const constrainedWidth = Math.max(constraints.minSize, Math.min(maxWidthFromCenter, idealBounds.width));
+		const constrainedHeight = Math.max(constraints.minSize, Math.min(maxHeightFromCenter, idealBounds.height));
+		return {
+			x: centerX - constrainedWidth / 2,
+			y: centerY - constrainedHeight / 2,
+			width: constrainedWidth,
+			height: constrainedHeight
+		};
+	}
+	constrainCenterResizeWithAspectRatio(idealBounds, context) {
+		const { container, constraints, initialBounds } = context;
+		if (!constraints.aspectRatio) return initialBounds;
+		const aspectRatio = constraints.aspectRatio;
+		const centerX = initialBounds.x + initialBounds.width / 2;
+		const centerY = initialBounds.y + initialBounds.height / 2;
+		const maxWidthFromCenter = Math.min(centerX * 2, (container.width - centerX) * 2);
+		const maxHeightFromCenter = Math.min(centerY * 2, (container.height - centerY) * 2);
+		let constrainedWidth = Math.max(constraints.minSize, Math.min(maxWidthFromCenter, idealBounds.width));
+		let constrainedHeight = constrainedWidth / aspectRatio;
+		if (constrainedHeight > maxHeightFromCenter) {
+			constrainedHeight = Math.max(constraints.minSize, maxHeightFromCenter);
+			constrainedWidth = constrainedHeight * aspectRatio;
+		}
+		if (constrainedWidth < constraints.minSize) {
+			constrainedWidth = constraints.minSize;
+			constrainedHeight = constrainedWidth / aspectRatio;
+		}
+		if (constrainedHeight < constraints.minSize) {
+			constrainedHeight = constraints.minSize;
+			constrainedWidth = constrainedHeight * aspectRatio;
+		}
+		return {
+			x: centerX - constrainedWidth / 2,
+			y: centerY - constrainedHeight / 2,
+			width: constrainedWidth,
+			height: constrainedHeight
+		};
+	}
+	simpleConstrainBounds(bounds, container, minSize) {
+		return {
+			x: Math.max(0, Math.min(container.width - bounds.width, bounds.x)),
+			y: Math.max(0, Math.min(container.height - bounds.height, bounds.y)),
+			width: Math.max(minSize, Math.min(container.width - bounds.x, bounds.width)),
+			height: Math.max(minSize, Math.min(container.height - bounds.y, bounds.height))
+		};
+	}
+	constrainResizeDeltas(initialBounds, deltaX, deltaY, handle, container, minSize) {
+		let constrainedDeltaX = deltaX;
+		let constrainedDeltaY = deltaY;
+		switch (handle) {
+			case "bottom-right":
+				constrainedDeltaX = Math.max(minSize - initialBounds.width, Math.min(container.width - initialBounds.x - initialBounds.width, deltaX));
+				constrainedDeltaY = Math.max(minSize - initialBounds.height, Math.min(container.height - initialBounds.y - initialBounds.height, deltaY));
+				break;
+			case "top-left":
+				constrainedDeltaX = Math.max(-initialBounds.x, Math.min(initialBounds.width - minSize, deltaX));
+				constrainedDeltaY = Math.max(-initialBounds.y, Math.min(initialBounds.height - minSize, deltaY));
+				break;
+			case "top-right":
+				constrainedDeltaX = Math.max(minSize - initialBounds.width, Math.min(container.width - initialBounds.x - initialBounds.width, deltaX));
+				constrainedDeltaY = Math.max(-initialBounds.y, Math.min(initialBounds.height - minSize, deltaY));
+				break;
+			case "bottom-left":
+				constrainedDeltaX = Math.max(-initialBounds.x, Math.min(initialBounds.width - minSize, deltaX));
+				constrainedDeltaY = Math.max(minSize - initialBounds.height, Math.min(container.height - initialBounds.y - initialBounds.height, deltaY));
+				break;
+			case "right":
+				constrainedDeltaX = Math.max(minSize - initialBounds.width, Math.min(container.width - initialBounds.x - initialBounds.width, deltaX));
+				break;
+			case "left":
+				constrainedDeltaX = Math.max(-initialBounds.x, Math.min(initialBounds.width - minSize, deltaX));
+				break;
+			case "bottom":
+				constrainedDeltaY = Math.max(minSize - initialBounds.height, Math.min(container.height - initialBounds.y - initialBounds.height, deltaY));
+				break;
+			case "top":
+				constrainedDeltaY = Math.max(-initialBounds.y, Math.min(initialBounds.height - minSize, deltaY));
+				break;
+		}
+		return {
+			deltaX: constrainedDeltaX,
+			deltaY: constrainedDeltaY
+		};
+	}
+	dispatchBoundsChange() {
+		this.dispatchEvent(new CustomEvent("bounds-change", {
+			detail: { bounds: this.bounds },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		const boxStyles = {
+			left: `${this.bounds.x}px`,
+			top: `${this.bounds.y}px`,
+			width: `${this.bounds.width}px`,
+			height: `${this.bounds.height}px`
+		};
+		return html`
+      <div
+        class="box ${this.isDragging ? "dragging" : ""}"
+        style=${styleMap(boxStyles)}
+        @pointerdown=${(e) => this.handlePointerDown(e, "move")}
+      >
+        ${this.renderHandles()}
+        <slot></slot>
+      </div>
+    `;
+	}
+	renderHandles() {
+		return [
+			"top-left",
+			"top-right",
+			"bottom-left",
+			"bottom-right",
+			"top",
+			"right",
+			"bottom",
+			"left"
+		].map((handle) => html`
+        <div
+          class="handle ${handle}"
+          @pointerdown=${(e) => this.handlePointerDown(e, "resize", handle)}
+        ></div>
+      `);
+	}
+};
+__decorate([property({ type: Object })], EFResizableBox.prototype, "bounds", void 0);
+__decorate([state()], EFResizableBox.prototype, "containerWidth", void 0);
+__decorate([state()], EFResizableBox.prototype, "containerHeight", void 0);
+__decorate([property({ type: Number })], EFResizableBox.prototype, "minSize", void 0);
+__decorate([state()], EFResizableBox.prototype, "isDragging", void 0);
+__decorate([state()], EFResizableBox.prototype, "dragMode", void 0);
+EFResizableBox = __decorate([customElement("ef-resizable-box")], EFResizableBox);
+export { EFResizableBox };

package/dist/gui/EFScrubber.d.ts

@@ -1,11 +1,16 @@
 import { LitElement } from 'lit';
-import { ContextMixinInterface } from './ContextMixin.js';
-export declare class EFScrubber extends LitElement {
+import { ControllableInterface } from './Controllable.js';
+declare const EFScrubber_base: (new (...args: any[]) => {
+    target: string;
+    targetElement: ControllableInterface | null;
+    effectiveContext: ControllableInterface | null;
+}) & typeof LitElement;
+export declare class EFScrubber extends EFScrubber_base {
     static styles: import('lit').CSSResult[];
-    context?: ContextMixinInterface | null;
     playing: boolean;
     currentTimeMs: number;
     durationMs: number;
+    get context(): ControllableInterface | null;
     private scrubProgress;
     private isMoving;
     private scrubberRef?;
@@ -22,3 +27,4 @@ declare global {
         "ef-scrubber": EFScrubber;
     }
 }
+export {};

package/dist/gui/EFScrubber.js

@@ -1,13 +1,14 @@
 import { currentTimeContext } from "./currentTimeContext.js";
 import { durationContext } from "./durationContext.js";
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.93.0/helpers/decorate.js";
-import { efContext } from "./efContext.js";
 import { playingContext } from "./playingContext.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { efContext } from "./efContext.js";
+import { TargetOrContextMixin } from "./TargetOrContextMixin.js";
 import { consume } from "@lit/context";
 import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { ref } from "lit/directives/ref.js";
-var EFScrubber = class EFScrubber$1 extends LitElement {
+var EFScrubber = class EFScrubber$1 extends TargetOrContextMixin(LitElement, efContext) {
 	constructor(..._args) {
 		super(..._args);
 		this.playing = false;
@@ -73,6 +74,9 @@ var EFScrubber = class EFScrubber$1 extends LitElement {
     ::part(handle) { }
     `];
 	}
+	get context() {
+		return this.effectiveContext;
+	}
 	updateProgress(e) {
 		if (!this.context || !this.scrubberRef) return;
 		const rect = this.scrubberRef.getBoundingClientRect();
@@ -109,10 +113,6 @@ var EFScrubber = class EFScrubber$1 extends LitElement {
 		window.removeEventListener("pointermove", this.boundHandlePointerMove);
 	}
 };
-__decorate([consume({
-	context: efContext,
-	subscribe: true
-})], EFScrubber.prototype, "context", void 0);
 __decorate([consume({
 	context: playingContext,
 	subscribe: true