@editframe/elements 0.30.2-beta.0 → 0.31.0-beta.1

package/dist/elements/EFPanZoom.d.ts

@@ -0,0 +1,96 @@
+import * as lit32 from "lit";
+import { LitElement } from "lit";
+import * as lit_html31 from "lit-html";
+
+//#region src/elements/EFPanZoom.d.ts
+interface PanZoomTransform {
+  x: number;
+  y: number;
+  scale: number;
+}
+declare class EFPanZoom extends LitElement {
+  static styles: lit32.CSSResult[];
+  x: number;
+  y: number;
+  scale: number;
+  /**
+   * When true, automatically fits content to view on first render.
+   * Centers content and scales it to fit within the container with padding.
+   */
+  autoFit: boolean;
+  panZoomTransform: PanZoomTransform;
+  private _isDragging;
+  private _dragStartPointerPos;
+  private _dragStartTransform;
+  private _capturedPointerId;
+  /**
+   * Document-level wheel handler in capture phase to prevent browser navigation.
+   * This prevents back/forward navigation on two-finger swipe gestures.
+   * We use capture phase to catch events before they bubble, but only prevent default
+   * (not stop propagation) so the normal wheel handler can still process them.
+   */
+  private _onDocumentWheelCapture;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  private _updateTransform;
+  private _onPointerDown;
+  private _onPointerMove;
+  private _onPointerUp;
+  private _onWheel;
+  firstUpdated(changedProperties: Map<PropertyKey, unknown>): void;
+  /**
+   * Convert screen coordinates (e.g., mouse event clientX/clientY) to canvas coordinates.
+   * This handles all pan/zoom transformations automatically.
+   *
+   * @param screenX - X coordinate in screen space (e.g., event.clientX)
+   * @param screenY - Y coordinate in screen space (e.g., event.clientY)
+   * @returns Object with x, y in canvas coordinate space
+   *
+   * @example
+   * handleClick(e: MouseEvent) {
+   *   const canvasPos = panZoom.screenToCanvas(e.clientX, e.clientY);
+   *   console.log(`Clicked at canvas position: ${canvasPos.x}, ${canvasPos.y}`);
+   * }
+   */
+  screenToCanvas(screenX: number, screenY: number): {
+    x: number;
+    y: number;
+  };
+  /**
+   * Convert canvas coordinates to screen coordinates.
+   * Useful for positioning overlays or tooltips relative to canvas elements.
+   *
+   * @param canvasX - X coordinate in canvas space
+   * @param canvasY - Y coordinate in canvas space
+   * @returns Object with x, y in screen coordinate space
+   *
+   * @example
+   * const screenPos = panZoom.canvasToScreen(element.x, element.y);
+   * tooltip.style.left = `${screenPos.x}px`;
+   * tooltip.style.top = `${screenPos.y}px`;
+   */
+  canvasToScreen(canvasX: number, canvasY: number): {
+    x: number;
+    y: number;
+  };
+  /**
+   * Reset the pan-zoom transform to its default values (x: 0, y: 0, scale: 1).
+   * This method can be called programmatically to reset the view.
+   *
+   * @example
+   * const panZoomRef = useRef(null);
+   * <button onClick={() => panZoomRef.current.reset()}>Reset View</button>
+   */
+  reset(): void;
+  /**
+   * Fit content to the container, centering it and scaling to fit.
+   * Uses a padding factor to leave some margin around the content.
+   *
+   * @param padding - Padding factor (0-1), e.g., 0.1 = 10% padding on each side. Default: 0.05
+   */
+  fitToContent(padding?: number): void;
+  render(): lit_html31.TemplateResult<1>;
+}
+//#endregion
+export { EFPanZoom, PanZoomTransform };
+//# sourceMappingURL=EFPanZoom.d.ts.map

package/dist/elements/EFPanZoom.js

@@ -0,0 +1,290 @@
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { panZoomTransformContext } from "../gui/panZoomTransformContext.js";
+import { provide } from "@lit/context";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+//#region src/elements/EFPanZoom.ts
+let EFPanZoom = class EFPanZoom$1 extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.x = 0;
+		this.y = 0;
+		this.scale = 1;
+		this.autoFit = false;
+		this.panZoomTransform = {
+			x: 0,
+			y: 0,
+			scale: 1
+		};
+		this._isDragging = false;
+		this._dragStartPointerPos = null;
+		this._dragStartTransform = null;
+		this._capturedPointerId = null;
+		this._onDocumentWheelCapture = (e) => {
+			let panZoom = null;
+			if (e.target instanceof Element) {
+				panZoom = e.target.closest("ef-pan-zoom");
+				if (!panZoom && e.target.closest("ef-canvas-selection-overlay")) {
+					const rect = this.getBoundingClientRect();
+					if (e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom) panZoom = this;
+				}
+			}
+			if (panZoom === this) e.preventDefault();
+		};
+		this._onPointerDown = (e) => {
+			if (e.button !== 0) return;
+			this._isDragging = true;
+			this._capturedPointerId = e.pointerId;
+			this._dragStartPointerPos = {
+				x: e.clientX,
+				y: e.clientY
+			};
+			this._dragStartTransform = {
+				x: this.x,
+				y: this.y,
+				scale: this.scale
+			};
+			try {
+				this.setPointerCapture(e.pointerId);
+			} catch (err) {}
+		};
+		this._onPointerMove = (e) => {
+			if (!this._isDragging || !this._dragStartPointerPos || !this._dragStartTransform) return;
+			const deltaX = e.clientX - this._dragStartPointerPos.x;
+			const deltaY = e.clientY - this._dragStartPointerPos.y;
+			this._updateTransform({
+				x: this._dragStartTransform.x - deltaX,
+				y: this._dragStartTransform.y - deltaY
+			});
+		};
+		this._onPointerUp = (e) => {
+			if (!this._isDragging) return;
+			if (this._capturedPointerId !== null) try {
+				this.releasePointerCapture(e.pointerId);
+			} catch (err) {}
+			this._isDragging = false;
+			this._capturedPointerId = null;
+			this._dragStartPointerPos = null;
+			this._dragStartTransform = null;
+		};
+		this._onWheel = (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			if (e.metaKey || e.ctrlKey) {
+				const containerRect = this.getBoundingClientRect();
+				const pointerX = e.clientX - containerRect.left;
+				const pointerY = e.clientY - containerRect.top;
+				const currentX = this.x;
+				const currentY = this.y;
+				const currentScale = this.scale;
+				const canvasX = (pointerX - currentX) / currentScale;
+				const canvasY = (pointerY - currentY) / currentScale;
+				const delta = e.deltaY > 0 ? .95 : 1.05;
+				const newScale = Math.max(.1, Math.min(5, currentScale * delta));
+				const newX = pointerX - canvasX * newScale;
+				const newY = pointerY - canvasY * newScale;
+				this._updateTransform({
+					x: newX,
+					y: newY,
+					scale: newScale
+				});
+			} else {
+				const deltaX = -e.deltaX;
+				const deltaY = -e.deltaY;
+				this._updateTransform({
+					x: this.x + deltaX,
+					y: this.y + deltaY
+				});
+			}
+		};
+	}
+	static {
+		this.styles = [css`
+      :host {
+        display: block;
+        overflow: hidden;
+        position: relative;
+        touch-action: none;
+      }
+      .content-wrapper {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        transform-origin: 0 0;
+      }
+    `];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		document.addEventListener("wheel", this._onDocumentWheelCapture, {
+			passive: false,
+			capture: true
+		});
+		this.addEventListener("wheel", this._onWheel, { passive: false });
+		this.addEventListener("pointerdown", this._onPointerDown);
+		this.addEventListener("pointermove", this._onPointerMove);
+		this.addEventListener("pointerup", this._onPointerUp);
+		this.addEventListener("pointercancel", this._onPointerUp);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		document.removeEventListener("wheel", this._onDocumentWheelCapture, { capture: true });
+		this.removeEventListener("wheel", this._onWheel);
+		this.removeEventListener("pointerdown", this._onPointerDown);
+		this.removeEventListener("pointermove", this._onPointerMove);
+		this.removeEventListener("pointerup", this._onPointerUp);
+		this.removeEventListener("pointercancel", this._onPointerUp);
+		if (this._isDragging && this._capturedPointerId !== null) try {
+			this.releasePointerCapture(this._capturedPointerId);
+		} catch (err) {}
+	}
+	_updateTransform(updates) {
+		const newTransform = {
+			x: updates.x !== void 0 ? updates.x : this.x,
+			y: updates.y !== void 0 ? updates.y : this.y,
+			scale: updates.scale !== void 0 ? Math.max(.1, Math.min(5, updates.scale)) : this.scale
+		};
+		if (newTransform.x !== this.x || newTransform.y !== this.y || newTransform.scale !== this.scale) {
+			this.x = newTransform.x;
+			this.y = newTransform.y;
+			this.scale = newTransform.scale;
+			this.panZoomTransform = { ...newTransform };
+			this.dispatchEvent(new CustomEvent("transform-changed", {
+				detail: { ...newTransform },
+				bubbles: true,
+				composed: true
+			}));
+		}
+	}
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+		this.panZoomTransform = {
+			x: this.x,
+			y: this.y,
+			scale: this.scale
+		};
+		if (this.autoFit) requestAnimationFrame(() => {
+			this.fitToContent();
+		});
+	}
+	/**
+	* Convert screen coordinates (e.g., mouse event clientX/clientY) to canvas coordinates.
+	* This handles all pan/zoom transformations automatically.
+	*
+	* @param screenX - X coordinate in screen space (e.g., event.clientX)
+	* @param screenY - Y coordinate in screen space (e.g., event.clientY)
+	* @returns Object with x, y in canvas coordinate space
+	*
+	* @example
+	* handleClick(e: MouseEvent) {
+	*   const canvasPos = panZoom.screenToCanvas(e.clientX, e.clientY);
+	*   console.log(`Clicked at canvas position: ${canvasPos.x}, ${canvasPos.y}`);
+	* }
+	*/
+	screenToCanvas(screenX, screenY) {
+		const rect = this.getBoundingClientRect();
+		return {
+			x: (screenX - rect.left - this.x) / this.scale,
+			y: (screenY - rect.top - this.y) / this.scale
+		};
+	}
+	/**
+	* Convert canvas coordinates to screen coordinates.
+	* Useful for positioning overlays or tooltips relative to canvas elements.
+	*
+	* @param canvasX - X coordinate in canvas space
+	* @param canvasY - Y coordinate in canvas space
+	* @returns Object with x, y in screen coordinate space
+	*
+	* @example
+	* const screenPos = panZoom.canvasToScreen(element.x, element.y);
+	* tooltip.style.left = `${screenPos.x}px`;
+	* tooltip.style.top = `${screenPos.y}px`;
+	*/
+	canvasToScreen(canvasX, canvasY) {
+		const rect = this.getBoundingClientRect();
+		return {
+			x: rect.left + canvasX * this.scale + this.x,
+			y: rect.top + canvasY * this.scale + this.y
+		};
+	}
+	/**
+	* Reset the pan-zoom transform to its default values (x: 0, y: 0, scale: 1).
+	* This method can be called programmatically to reset the view.
+	*
+	* @example
+	* const panZoomRef = useRef(null);
+	* <button onClick={() => panZoomRef.current.reset()}>Reset View</button>
+	*/
+	reset() {
+		this._updateTransform({
+			x: 0,
+			y: 0,
+			scale: 1
+		});
+	}
+	/**
+	* Fit content to the container, centering it and scaling to fit.
+	* Uses a padding factor to leave some margin around the content.
+	*
+	* @param padding - Padding factor (0-1), e.g., 0.1 = 10% padding on each side. Default: 0.05
+	*/
+	fitToContent(padding = .05) {
+		const containerRect = this.getBoundingClientRect();
+		if (containerRect.width === 0 || containerRect.height === 0) return;
+		const slottedContent = (this.shadowRoot?.querySelector(".content-wrapper"))?.querySelector("slot")?.assignedElements()[0];
+		if (!slottedContent) return;
+		const contentRect = slottedContent.getBoundingClientRect();
+		const contentWidth = contentRect.width / this.scale;
+		const contentHeight = contentRect.height / this.scale;
+		if (contentWidth === 0 || contentHeight === 0) return;
+		const availableWidth = containerRect.width * (1 - 2 * padding);
+		const availableHeight = containerRect.height * (1 - 2 * padding);
+		const scaleX = availableWidth / contentWidth;
+		const scaleY = availableHeight / contentHeight;
+		const newScale = Math.min(scaleX, scaleY, 1);
+		const scaledWidth = contentWidth * newScale;
+		const scaledHeight = contentHeight * newScale;
+		const newX = (containerRect.width - scaledWidth) / 2;
+		const newY = (containerRect.height - scaledHeight) / 2;
+		this._updateTransform({
+			x: newX,
+			y: newY,
+			scale: newScale
+		});
+	}
+	render() {
+		return html`
+      <div
+        class="content-wrapper"
+        style="transform: translate(${this.x}px, ${this.y}px) scale(${this.scale});"
+      >
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+__decorate([property({
+	type: Number,
+	reflect: true
+})], EFPanZoom.prototype, "x", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true
+})], EFPanZoom.prototype, "y", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true
+})], EFPanZoom.prototype, "scale", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "auto-fit"
+})], EFPanZoom.prototype, "autoFit", void 0);
+__decorate([provide({ context: panZoomTransformContext })], EFPanZoom.prototype, "panZoomTransform", void 0);
+EFPanZoom = __decorate([customElement("ef-pan-zoom")], EFPanZoom);
+
+//#endregion
+export { EFPanZoom };
+//# sourceMappingURL=EFPanZoom.js.map

package/dist/elements/EFPanZoom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EFPanZoom.js","names":["EFPanZoom","panZoom: Element | null"],"sources":["../../src/elements/EFPanZoom.ts"],"sourcesContent":["import { css, html, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { provide } from \"@lit/context\";\nimport { panZoomTransformContext } from \"../gui/panZoomTransformContext.js\";\n\nexport interface PanZoomTransform {\n  x: number;\n  y: number;\n  scale: number;\n}\n\n@customElement(\"ef-pan-zoom\")\nexport class EFPanZoom extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        overflow: hidden;\n        position: relative;\n        touch-action: none;\n      }\n      .content-wrapper {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        transform-origin: 0 0;\n      }\n    `,\n  ];\n\n  @property({ type: Number, reflect: true })\n  x = 0;\n\n  @property({ type: Number, reflect: true })\n  y = 0;\n\n  @property({ type: Number, reflect: true })\n  scale = 1;\n\n  /**\n   * When true, automatically fits content to view on first render.\n   * Centers content and scales it to fit within the container with padding.\n   */\n  @property({ type: Boolean, attribute: \"auto-fit\" })\n  autoFit = false;\n\n  @provide({ context: panZoomTransformContext })\n  panZoomTransform: PanZoomTransform = { x: 0, y: 0, scale: 1 };\n\n  private _isDragging = false;\n  private _dragStartPointerPos: { x: number; y: number } | null = null;\n  private _dragStartTransform: PanZoomTransform | null = null;\n  private _capturedPointerId: number | null = null;\n\n  /**\n   * Document-level wheel handler in capture phase to prevent browser navigation.\n   * This prevents back/forward navigation on two-finger swipe gestures.\n   * We use capture phase to catch events before they bubble, but only prevent default\n   * (not stop propagation) so the normal wheel handler can still process them.\n   */\n  private _onDocumentWheelCapture = (e: WheelEvent) => {\n    // Check if event is over this panzoom element or its children\n    let panZoom: Element | null = null;\n    if (e.target instanceof Element) {\n      panZoom = e.target.closest(\"ef-pan-zoom\");\n      // Also check if target is an overlay sibling (selection overlay, etc.)\n      // Overlays have pointer-events: none but can still be the event target\n      if (!panZoom && e.target.closest(\"ef-canvas-selection-overlay\")) {\n        // Event is over selection overlay - check if it's over this panzoom's area\n        const rect = this.getBoundingClientRect();\n        if (\n          e.clientX >= rect.left &&\n          e.clientX <= rect.right &&\n          e.clientY >= rect.top &&\n          e.clientY <= rect.bottom\n        ) {\n          panZoom = this;\n        }\n      }\n    }\n    if (panZoom === this) {\n      // Prevent browser navigation gestures (back/forward on swipe)\n      // Don't stop propagation - let the normal wheel handler process the event\n      e.preventDefault();\n    }\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n    // Add document-level capture listener to prevent browser navigation\n    document.addEventListener(\"wheel\", this._onDocumentWheelCapture, {\n      passive: false,\n      capture: true,\n    });\n    // Add element-level event listeners\n    this.addEventListener(\"wheel\", this._onWheel, { passive: false });\n    this.addEventListener(\"pointerdown\", this._onPointerDown);\n    this.addEventListener(\"pointermove\", this._onPointerMove);\n    this.addEventListener(\"pointerup\", this._onPointerUp);\n    this.addEventListener(\"pointercancel\", this._onPointerUp);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    // Remove document-level capture listener\n    document.removeEventListener(\"wheel\", this._onDocumentWheelCapture, {\n      capture: true,\n    });\n    // Remove element-level event listeners\n    this.removeEventListener(\"wheel\", this._onWheel);\n    this.removeEventListener(\"pointerdown\", this._onPointerDown);\n    this.removeEventListener(\"pointermove\", this._onPointerMove);\n    this.removeEventListener(\"pointerup\", this._onPointerUp);\n    this.removeEventListener(\"pointercancel\", this._onPointerUp);\n    // Clean up pointer capture if dragging\n    if (this._isDragging && this._capturedPointerId !== null) {\n      try {\n        this.releasePointerCapture(this._capturedPointerId);\n      } catch (err) {\n        // Ignore pointer capture errors (e.g., in test environments)\n      }\n    }\n  }\n\n  private _updateTransform(updates: Partial<PanZoomTransform>) {\n    const newTransform = {\n      x: updates.x !== undefined ? updates.x : this.x,\n      y: updates.y !== undefined ? updates.y : this.y,\n      scale:\n        updates.scale !== undefined\n          ? Math.max(0.1, Math.min(5, updates.scale))\n          : this.scale,\n    };\n\n    const changed =\n      newTransform.x !== this.x ||\n      newTransform.y !== this.y ||\n      newTransform.scale !== this.scale;\n\n    if (changed) {\n      this.x = newTransform.x;\n      this.y = newTransform.y;\n      this.scale = newTransform.scale;\n\n      // Update context for overlay components\n      this.panZoomTransform = { ...newTransform };\n\n      this.dispatchEvent(\n        new CustomEvent<PanZoomTransform>(\"transform-changed\", {\n          detail: { ...newTransform },\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    }\n  }\n\n  private _onPointerDown = (e: PointerEvent) => {\n    if (e.button !== 0) return;\n\n    this._isDragging = true;\n    this._capturedPointerId = e.pointerId;\n    this._dragStartPointerPos = { x: e.clientX, y: e.clientY };\n    this._dragStartTransform = {\n      x: this.x,\n      y: this.y,\n      scale: this.scale,\n    };\n\n    try {\n      this.setPointerCapture(e.pointerId);\n    } catch (err) {\n      // Ignore pointer capture errors (e.g., in test environments)\n    }\n  };\n\n  private _onPointerMove = (e: PointerEvent) => {\n    if (\n      !this._isDragging ||\n      !this._dragStartPointerPos ||\n      !this._dragStartTransform\n    )\n      return;\n\n    const deltaX = e.clientX - this._dragStartPointerPos.x;\n    const deltaY = e.clientY - this._dragStartPointerPos.y;\n\n    this._updateTransform({\n      x: this._dragStartTransform.x - deltaX,\n      y: this._dragStartTransform.y - deltaY,\n    });\n  };\n\n  private _onPointerUp = (e: PointerEvent) => {\n    if (!this._isDragging) return;\n    if (this._capturedPointerId !== null) {\n      try {\n        this.releasePointerCapture(e.pointerId);\n      } catch (err) {\n        // Ignore pointer capture errors (e.g., in test environments)\n      }\n    }\n\n    this._isDragging = false;\n    this._capturedPointerId = null;\n    this._dragStartPointerPos = null;\n    this._dragStartTransform = null;\n  };\n\n  private _onWheel = (e: WheelEvent) => {\n    // Always prevent default to prevent browser navigation (back/forward on swipe)\n    // This is critical for full-page app interfaces\n    e.preventDefault();\n    e.stopPropagation();\n\n    const isZoom = e.metaKey || e.ctrlKey;\n\n    if (isZoom) {\n      const containerRect = this.getBoundingClientRect();\n      const pointerX = e.clientX - containerRect.left;\n      const pointerY = e.clientY - containerRect.top;\n\n      const currentX = this.x;\n      const currentY = this.y;\n      const currentScale = this.scale;\n\n      const canvasX = (pointerX - currentX) / currentScale;\n      const canvasY = (pointerY - currentY) / currentScale;\n\n      const delta = e.deltaY > 0 ? 0.95 : 1.05;\n      const newScale = Math.max(0.1, Math.min(5, currentScale * delta));\n\n      const newX = pointerX - canvasX * newScale;\n      const newY = pointerY - canvasY * newScale;\n\n      this._updateTransform({\n        x: newX,\n        y: newY,\n        scale: newScale,\n      });\n    } else {\n      const deltaX = -e.deltaX;\n      const deltaY = -e.deltaY;\n\n      this._updateTransform({\n        x: this.x + deltaX,\n        y: this.y + deltaY,\n      });\n    }\n  };\n\n  firstUpdated(changedProperties: Map<PropertyKey, unknown>) {\n    super.firstUpdated(changedProperties);\n    // Initialize context with current transform\n    this.panZoomTransform = { x: this.x, y: this.y, scale: this.scale };\n\n    // Auto-fit content if enabled (use RAF to ensure content is rendered)\n    if (this.autoFit) {\n      requestAnimationFrame(() => {\n        this.fitToContent();\n      });\n    }\n  }\n\n  /**\n   * Convert screen coordinates (e.g., mouse event clientX/clientY) to canvas coordinates.\n   * This handles all pan/zoom transformations automatically.\n   *\n   * @param screenX - X coordinate in screen space (e.g., event.clientX)\n   * @param screenY - Y coordinate in screen space (e.g., event.clientY)\n   * @returns Object with x, y in canvas coordinate space\n   *\n   * @example\n   * handleClick(e: MouseEvent) {\n   *   const canvasPos = panZoom.screenToCanvas(e.clientX, e.clientY);\n   *   console.log(`Clicked at canvas position: ${canvasPos.x}, ${canvasPos.y}`);\n   * }\n   */\n  screenToCanvas(screenX: number, screenY: number): { x: number; y: number } {\n    const rect = this.getBoundingClientRect();\n    return {\n      x: (screenX - rect.left - this.x) / this.scale,\n      y: (screenY - rect.top - this.y) / this.scale,\n    };\n  }\n\n  /**\n   * Convert canvas coordinates to screen coordinates.\n   * Useful for positioning overlays or tooltips relative to canvas elements.\n   *\n   * @param canvasX - X coordinate in canvas space\n   * @param canvasY - Y coordinate in canvas space\n   * @returns Object with x, y in screen coordinate space\n   *\n   * @example\n   * const screenPos = panZoom.canvasToScreen(element.x, element.y);\n   * tooltip.style.left = `${screenPos.x}px`;\n   * tooltip.style.top = `${screenPos.y}px`;\n   */\n  canvasToScreen(canvasX: number, canvasY: number): { x: number; y: number } {\n    const rect = this.getBoundingClientRect();\n    return {\n      x: rect.left + canvasX * this.scale + this.x,\n      y: rect.top + canvasY * this.scale + this.y,\n    };\n  }\n\n  /**\n   * Reset the pan-zoom transform to its default values (x: 0, y: 0, scale: 1).\n   * This method can be called programmatically to reset the view.\n   *\n   * @example\n   * const panZoomRef = useRef(null);\n   * <button onClick={() => panZoomRef.current.reset()}>Reset View</button>\n   */\n  reset(): void {\n    this._updateTransform({ x: 0, y: 0, scale: 1 });\n  }\n\n  /**\n   * Fit content to the container, centering it and scaling to fit.\n   * Uses a padding factor to leave some margin around the content.\n   *\n   * @param padding - Padding factor (0-1), e.g., 0.1 = 10% padding on each side. Default: 0.05\n   */\n  fitToContent(padding = 0.05): void {\n    const containerRect = this.getBoundingClientRect();\n    if (containerRect.width === 0 || containerRect.height === 0) return;\n\n    // Find the first child element to measure\n    const contentWrapper = this.shadowRoot?.querySelector(\".content-wrapper\");\n    const slottedContent = contentWrapper\n      ?.querySelector(\"slot\")\n      ?.assignedElements()[0] as HTMLElement | undefined;\n\n    if (!slottedContent) return;\n\n    // Get content dimensions\n    const contentRect = slottedContent.getBoundingClientRect();\n    const contentWidth = contentRect.width / this.scale;\n    const contentHeight = contentRect.height / this.scale;\n\n    if (contentWidth === 0 || contentHeight === 0) return;\n\n    // Calculate available space with padding\n    const availableWidth = containerRect.width * (1 - 2 * padding);\n    const availableHeight = containerRect.height * (1 - 2 * padding);\n\n    // Calculate scale to fit\n    const scaleX = availableWidth / contentWidth;\n    const scaleY = availableHeight / contentHeight;\n    const newScale = Math.min(scaleX, scaleY, 1); // Don't scale up beyond 1:1\n\n    // Calculate position to center\n    const scaledWidth = contentWidth * newScale;\n    const scaledHeight = contentHeight * newScale;\n    const newX = (containerRect.width - scaledWidth) / 2;\n    const newY = (containerRect.height - scaledHeight) / 2;\n\n    this._updateTransform({\n      x: newX,\n      y: newY,\n      scale: newScale,\n    });\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"content-wrapper\"\n        style=\"transform: translate(${this.x}px, ${this.y}px) scale(${this.scale});\"\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":"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"}

package/dist/elements/EFSourceMixin.js

@@ -12,16 +12,17 @@ function EFSourceMixin(superClass, options) {
 				autoRun: false,
 				args: () => [this.src],
 				task: async ([src], { signal }) => {
-					const md5Path = `/@ef-asset/${src}`;
-					return (await fetch(md5Path, {
-						method: "HEAD",
-						signal
-					})).headers.get("etag") ?? void 0;
+					let normalizedSrc = src.startsWith("/") ? src.slice(1) : src;
+					normalizedSrc = normalizedSrc.replace(/^\/+/, "");
+					const md5Path = `/api/v1/isobmff_files/local/md5?src=${encodeURIComponent(normalizedSrc)}`;
+					const response = await fetch(md5Path, { signal });
+					if (!response.ok) return;
+					return (await response.json()).md5 ?? void 0;
 				}
 			});
 		}
 		get apiHost() {
-			return (this.closest("ef-configuration")?.apiHost ?? this.closest("ef-workbench")?.apiHost ?? this.closest("ef-preview")?.apiHost) || "https://editframe.com";
+			return this.closest("ef-configuration")?.apiHost ?? this.closest("ef-workbench")?.apiHost ?? this.closest("ef-preview")?.apiHost;
 		}
 		productionSrc() {
 			if (!this.md5SumLoader.value) throw new Error(`MD5 sum not available for ${this}. Cannot generate production URL`);

package/dist/elements/EFSourceMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFSourceMixin.js","names":[],"sources":["../../src/elements/EFSourceMixin.ts"],"sourcesContent":["import { Task } from \"@lit/task\";\nimport type { LitElement } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\n\nexport declare class EFSourceMixinInterface {\n  apiHost?: string;\n  productionSrc(): string;\n  src: string;\n}\n\ninterface EFSourceMixinOptions {\n  assetType: string;\n}\ntype Constructor<T = {}> = new (...args: any[]) => T;\nexport function EFSourceMixin<T extends Constructor<LitElement>>(\n  superClass: T,\n  options: EFSourceMixinOptions,\n) {\n  class EFSourceElement extends superClass {\n    get apiHost() {\n      const apiHost =\n        this.closest(\"ef-configuration\")?.apiHost ??\n        this.closest(\"ef-workbench\")?.apiHost ??\n        this.closest(\"ef-preview\")?.apiHost;\n\n      return apiHost || \"https://editframe.com\";\n    }\n\n    @property({ type: String })\n    src = \"\";\n\n    productionSrc() {\n      if (!this.md5SumLoader.value) {\n        throw new Error(\n          `MD5 sum not available for ${this}. Cannot generate production URL`,\n        );\n      }\n\n      if (!this.apiHost) {\n        throw new Error(\n          `apiHost not available for ${this}. Cannot generate production URL`,\n        );\n      }\n\n      return `${this.apiHost}/api/v1/${options.assetType}/${this.md5SumLoader.value}`;\n    }\n\n    md5SumLoader = new Task(this, {\n      autoRun: false,\n      args: () => [this.src] as const,\n      task: async ([src], { signal }) => {\n        const md5Path = `/@ef-asset/${src}`;\n        const response = await fetch(md5Path, { method: \"HEAD\", signal });\n        return response.headers.get(\"etag\") ?? undefined;\n      },\n    });\n  }\n\n  return EFSourceElement as Constructor<EFSourceMixinInterface> & T;\n}\n"],"mappings":";;;;;AAcA,SAAgB,cACd,YACA,SACA;CACA,MAAM,wBAAwB,WAAW;;;cAWjC;uBAkBS,IAAI,KAAK,MAAM;IAC5B,SAAS;IACT,YAAY,CAAC,KAAK,IAAI;IACtB,MAAM,OAAO,CAAC,MAAM,EAAE,aAAa;KACjC,MAAM,UAAU,cAAc;AAE9B,aADiB,MAAM,MAAM,SAAS;MAAE,QAAQ;MAAQ;MAAQ,CAAC,EACjD,QAAQ,IAAI,OAAO,IAAI;;IAE1C,CAAC;;EApCF,IAAI,UAAU;AAMZ,WAJE,KAAK,QAAQ,mBAAmB,EAAE,WAClC,KAAK,QAAQ,eAAe,EAAE,WAC9B,KAAK,QAAQ,aAAa,EAAE,YAEZ;;EAMpB,gBAAgB;AACd,OAAI,CAAC,KAAK,aAAa,MACrB,OAAM,IAAI,MACR,6BAA6B,KAAK,kCACnC;AAGH,OAAI,CAAC,KAAK,QACR,OAAM,IAAI,MACR,6BAA6B,KAAK,kCACnC;AAGH,UAAO,GAAG,KAAK,QAAQ,UAAU,QAAQ,UAAU,GAAG,KAAK,aAAa;;;aAhBzE,SAAS,EAAE,MAAM,QAAQ,CAAC;AA8B7B,QAAO"}
+{"version":3,"file":"EFSourceMixin.js","names":[],"sources":["../../src/elements/EFSourceMixin.ts"],"sourcesContent":["import { Task } from \"@lit/task\";\nimport type { LitElement } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\n\nexport declare class EFSourceMixinInterface {\n  apiHost?: string;\n  productionSrc(): string;\n  src: string;\n}\n\ninterface EFSourceMixinOptions {\n  assetType: string;\n}\ntype Constructor<T = {}> = new (...args: any[]) => T;\nexport function EFSourceMixin<T extends Constructor<LitElement>>(\n  superClass: T,\n  options: EFSourceMixinOptions,\n) {\n  class EFSourceElement extends superClass {\n    get apiHost() {\n      const apiHost =\n        this.closest(\"ef-configuration\")?.apiHost ??\n        this.closest(\"ef-workbench\")?.apiHost ??\n        this.closest(\"ef-preview\")?.apiHost;\n\n      // Return undefined instead of defaulting to external URL\n      // This allows components to use current origin when apiHost is not set\n      return apiHost;\n    }\n\n    @property({ type: String })\n    src = \"\";\n\n    productionSrc() {\n      if (!this.md5SumLoader.value) {\n        throw new Error(\n          `MD5 sum not available for ${this}. Cannot generate production URL`,\n        );\n      }\n\n      if (!this.apiHost) {\n        throw new Error(\n          `apiHost not available for ${this}. Cannot generate production URL`,\n        );\n      }\n\n      return `${this.apiHost}/api/v1/${options.assetType}/${this.md5SumLoader.value}`;\n    }\n\n    md5SumLoader = new Task(this, {\n      autoRun: false,\n      args: () => [this.src] as const,\n      task: async ([src], { signal }) => {\n        // Normalize the path: remove leading slash and any double slashes\n        let normalizedSrc = src.startsWith(\"/\")\n          ? src.slice(1)\n          : src;\n        normalizedSrc = normalizedSrc.replace(/^\\/+/, \"\");\n        // Use production API format for local files\n        const md5Path = `/api/v1/isobmff_files/local/md5?src=${encodeURIComponent(normalizedSrc)}`;\n        const response = await fetch(md5Path, { signal });\n        if (!response.ok) {\n          return undefined;\n        }\n        const data = await response.json();\n        return data.md5 ?? undefined;\n      },\n    });\n  }\n\n  return EFSourceElement as Constructor<EFSourceMixinInterface> & T;\n}\n"],"mappings":";;;;;AAcA,SAAgB,cACd,YACA,SACA;CACA,MAAM,wBAAwB,WAAW;;;cAajC;uBAkBS,IAAI,KAAK,MAAM;IAC5B,SAAS;IACT,YAAY,CAAC,KAAK,IAAI;IACtB,MAAM,OAAO,CAAC,MAAM,EAAE,aAAa;KAEjC,IAAI,gBAAgB,IAAI,WAAW,IAAI,GACnC,IAAI,MAAM,EAAE,GACZ;AACJ,qBAAgB,cAAc,QAAQ,QAAQ,GAAG;KAEjD,MAAM,UAAU,uCAAuC,mBAAmB,cAAc;KACxF,MAAM,WAAW,MAAM,MAAM,SAAS,EAAE,QAAQ,CAAC;AACjD,SAAI,CAAC,SAAS,GACZ;AAGF,aADa,MAAM,SAAS,MAAM,EACtB,OAAO;;IAEtB,CAAC;;EAhDF,IAAI,UAAU;AAQZ,UANE,KAAK,QAAQ,mBAAmB,EAAE,WAClC,KAAK,QAAQ,eAAe,EAAE,WAC9B,KAAK,QAAQ,aAAa,EAAE;;EAUhC,gBAAgB;AACd,OAAI,CAAC,KAAK,aAAa,MACrB,OAAM,IAAI,MACR,6BAA6B,KAAK,kCACnC;AAGH,OAAI,CAAC,KAAK,QACR,OAAM,IAAI,MACR,6BAA6B,KAAK,kCACnC;AAGH,UAAO,GAAG,KAAK,QAAQ,UAAU,QAAQ,UAAU,GAAG,KAAK,aAAa;;;aAhBzE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAwC7B,QAAO"}

package/dist/elements/EFSurface.d.ts

@@ -1,18 +1,18 @@
 import { ContextMixinInterface } from "../gui/ContextMixin.js";
 import { Task } from "@lit/task";
-import * as lit26 from "lit";
+import * as lit30 from "lit";
 import { LitElement } from "lit";
-import * as lit_html23 from "lit-html";
-import * as lit_html_directives_ref5 from "lit-html/directives/ref";
+import * as lit_html29 from "lit-html";
+import * as lit_html_directives_ref3 from "lit-html/directives/ref";
 
 //#region src/elements/EFSurface.d.ts
 declare class EFSurface extends LitElement {
   #private;
-  static styles: lit26.CSSResult[];
-  canvasRef: lit_html_directives_ref5.Ref<HTMLCanvasElement>;
+  static styles: lit30.CSSResult[];
+  canvasRef: lit_html_directives_ref3.Ref<HTMLCanvasElement>;
   targetElement: ContextMixinInterface | null;
   target: string;
-  render(): lit_html23.TemplateResult<1>;
+  render(): lit_html29.TemplateResult<1>;
   get rootTimegroup(): any;
   get currentTimeMs(): number;
   get durationMs(): number;

package/dist/elements/EFSurface.js

@@ -15,15 +15,20 @@ let EFSurface = class EFSurface$1 extends LitElement {
 		this.frameTask = new Task(this, {
 			autoRun: false,
 			args: () => [this.targetElement],
-			task: async ([target]) => {
+			task: async ([target], { signal }) => {
+				signal?.throwIfAborted();
 				if (!target) return;
 				try {
 					const maybeTask = target.frameTask;
 					if (maybeTask && typeof maybeTask.run === "function") {
 						maybeTask.run();
 						await maybeTask.taskComplete;
+						signal?.throwIfAborted();
 					}
-				} catch (_err) {}
+				} catch (error) {
+					if (error instanceof DOMException && error.name === "AbortError") throw error;
+				}
+				signal?.throwIfAborted();
 				this.copyFromTarget(target);
 			}
 		});

package/dist/elements/EFSurface.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFSurface.js","names":["EFSurface","target: any","root: any"],"sources":["../../src/elements/EFSurface.ts"],"sourcesContent":["import { Task } from \"@lit/task\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport type { ContextMixinInterface } from \"../gui/ContextMixin.ts\";\nimport { TargetController } from \"./TargetController.ts\";\n\n@customElement(\"ef-surface\")\nexport class EFSurface extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n      }\n      canvas {\n        all: inherit;\n        width: 100%;\n        height: 100%;\n        display: block;\n      }\n    `,\n  ];\n\n  canvasRef = createRef<HTMLCanvasElement>();\n\n  // @ts-expect-error controller is intentionally not referenced directly\n  // biome-ignore lint/correctness/noUnusedPrivateClassMembers: Used for side effects\n  #targetController: TargetController = new TargetController(this);\n\n  @state()\n  targetElement: ContextMixinInterface | null = null;\n\n  @property({ type: String })\n  target = \"\";\n\n  render() {\n    return html`<canvas ${ref(this.canvasRef)}></canvas>`;\n  }\n\n  // Provide minimal temporal-like properties so EFTimegroup can schedule us\n  get rootTimegroup(): any {\n    // Prefer the target element's root timegroup if available\n    const target: any = this.targetElement;\n    if (target && \"rootTimegroup\" in target) {\n      return target.rootTimegroup;\n    }\n    // Fallback: nearest containing timegroup if any\n    let root: any = this.closest(\"ef-timegroup\");\n    while (root?.parentTimegroup) {\n      root = root.parentTimegroup;\n    }\n    return root;\n  }\n\n  get currentTimeMs(): number {\n    return this.rootTimegroup?.currentTimeMs ?? 0;\n  }\n\n  get durationMs(): number {\n    return this.rootTimegroup?.durationMs ?? 0;\n  }\n\n  get startTimeMs(): number {\n    return this.rootTimegroup?.startTimeMs ?? 0;\n  }\n\n  get endTimeMs(): number {\n    return this.startTimeMs + this.durationMs;\n  }\n\n  /**\n   * Minimal integration with EFTimegroup's frame scheduling:\n   * - Waits for the target video element's frameTask to complete (ensuring it painted)\n   * - Copies the target's canvas into this element's canvas\n   */\n  frameTask = new Task(this, {\n    autoRun: false,\n    args: () => [this.targetElement] as const,\n    task: async ([target]) => {\n      if (!target) return;\n\n      // Ensure the target has painted its frame for this tick\n      try {\n        const maybeTask = (target as any).frameTask;\n        if (maybeTask && typeof maybeTask.run === \"function\") {\n          // Run (idempotent) and then wait for completion\n          maybeTask.run();\n          await maybeTask.taskComplete;\n        }\n      } catch (_err) {\n        // Best-effort; continue to attempt copy\n      }\n\n      this.copyFromTarget(target);\n    },\n  });\n\n  protected updated(): void {\n    if (this.targetElement) {\n      this.copyFromTarget(this.targetElement);\n    }\n  }\n\n  // Target resolution is handled by TargetController. No implicit discovery.\n\n  private getSourceCanvas(from: Element): HTMLCanvasElement | null {\n    const anyEl = from as any;\n    if (\"canvasElement\" in anyEl) {\n      return anyEl.canvasElement ?? null;\n    }\n    const sr = (from as HTMLElement).shadowRoot;\n    if (sr) {\n      const c = sr.querySelector(\"canvas\");\n      return (c as HTMLCanvasElement) ?? null;\n    }\n    return null;\n  }\n\n  private copyFromTarget(target: Element) {\n    const dst = this.canvasRef.value;\n    const src = this.getSourceCanvas(target);\n    if (!dst || !src) return;\n    if (!src.width || !src.height) return;\n\n    // Match source pixel size for a faithful mirror; layout scaling is handled by CSS\n    if (dst.width !== src.width || dst.height !== src.height) {\n      dst.width = src.width;\n      dst.height = src.height;\n    }\n\n    const ctx = dst.getContext(\"2d\");\n    if (!ctx) return;\n    ctx.drawImage(src, 0, 0, dst.width, dst.height);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-surface\": EFSurface;\n  }\n}\n"],"mappings":";;;;;;;;AAQO,sBAAMA,oBAAkB,WAAW;;;mBAgB5B,WAA8B;uBAOI;gBAGrC;mBA0CG,IAAI,KAAK,MAAM;GACzB,SAAS;GACT,YAAY,CAAC,KAAK,cAAc;GAChC,MAAM,OAAO,CAAC,YAAY;AACxB,QAAI,CAAC,OAAQ;AAGb,QAAI;KACF,MAAM,YAAa,OAAe;AAClC,SAAI,aAAa,OAAO,UAAU,QAAQ,YAAY;AAEpD,gBAAU,KAAK;AACf,YAAM,UAAU;;aAEX,MAAM;AAIf,SAAK,eAAe,OAAO;;GAE9B,CAAC;;;gBAvFc,CACd,GAAG;;;;;;;;;;;MAYJ;;CAMD,oBAAsC,IAAI,iBAAiB,KAAK;CAQhE,SAAS;AACP,SAAO,IAAI,WAAW,IAAI,KAAK,UAAU,CAAC;;CAI5C,IAAI,gBAAqB;EAEvB,MAAMC,SAAc,KAAK;AACzB,MAAI,UAAU,mBAAmB,OAC/B,QAAO,OAAO;EAGhB,IAAIC,OAAY,KAAK,QAAQ,eAAe;AAC5C,SAAO,MAAM,gBACX,QAAO,KAAK;AAEd,SAAO;;CAGT,IAAI,gBAAwB;AAC1B,SAAO,KAAK,eAAe,iBAAiB;;CAG9C,IAAI,aAAqB;AACvB,SAAO,KAAK,eAAe,cAAc;;CAG3C,IAAI,cAAsB;AACxB,SAAO,KAAK,eAAe,eAAe;;CAG5C,IAAI,YAAoB;AACtB,SAAO,KAAK,cAAc,KAAK;;CA8BjC,AAAU,UAAgB;AACxB,MAAI,KAAK,cACP,MAAK,eAAe,KAAK,cAAc;;CAM3C,AAAQ,gBAAgB,MAAyC;EAC/D,MAAM,QAAQ;AACd,MAAI,mBAAmB,MACrB,QAAO,MAAM,iBAAiB;EAEhC,MAAM,KAAM,KAAqB;AACjC,MAAI,GAEF,QADU,GAAG,cAAc,SAAS,IACD;AAErC,SAAO;;CAGT,AAAQ,eAAe,QAAiB;EACtC,MAAM,MAAM,KAAK,UAAU;EAC3B,MAAM,MAAM,KAAK,gBAAgB,OAAO;AACxC,MAAI,CAAC,OAAO,CAAC,IAAK;AAClB,MAAI,CAAC,IAAI,SAAS,CAAC,IAAI,OAAQ;AAG/B,MAAI,IAAI,UAAU,IAAI,SAAS,IAAI,WAAW,IAAI,QAAQ;AACxD,OAAI,QAAQ,IAAI;AAChB,OAAI,SAAS,IAAI;;EAGnB,MAAM,MAAM,IAAI,WAAW,KAAK;AAChC,MAAI,CAAC,IAAK;AACV,MAAI,UAAU,KAAK,GAAG,GAAG,IAAI,OAAO,IAAI,OAAO;;;YAvGhD,OAAO;YAGP,SAAS,EAAE,MAAM,QAAQ,CAAC;wBA1B5B,cAAc,aAAa"}
+{"version":3,"file":"EFSurface.js","names":["EFSurface","target: any","root: any"],"sources":["../../src/elements/EFSurface.ts"],"sourcesContent":["import { Task } from \"@lit/task\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport type { ContextMixinInterface } from \"../gui/ContextMixin.ts\";\nimport { TargetController } from \"./TargetController.ts\";\n\n@customElement(\"ef-surface\")\nexport class EFSurface extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n      }\n      canvas {\n        all: inherit;\n        width: 100%;\n        height: 100%;\n        display: block;\n      }\n    `,\n  ];\n\n  canvasRef = createRef<HTMLCanvasElement>();\n\n  // @ts-expect-error controller is intentionally not referenced directly\n  // biome-ignore lint/correctness/noUnusedPrivateClassMembers: Used for side effects\n  #targetController: TargetController = new TargetController(this);\n\n  @state()\n  targetElement: ContextMixinInterface | null = null;\n\n  @property({ type: String })\n  target = \"\";\n\n  render() {\n    return html`<canvas ${ref(this.canvasRef)}></canvas>`;\n  }\n\n  // Provide minimal temporal-like properties so EFTimegroup can schedule us\n  get rootTimegroup(): any {\n    // Prefer the target element's root timegroup if available\n    const target: any = this.targetElement;\n    if (target && \"rootTimegroup\" in target) {\n      return target.rootTimegroup;\n    }\n    // Fallback: nearest containing timegroup if any\n    let root: any = this.closest(\"ef-timegroup\");\n    while (root?.parentTimegroup) {\n      root = root.parentTimegroup;\n    }\n    return root;\n  }\n\n  get currentTimeMs(): number {\n    return this.rootTimegroup?.currentTimeMs ?? 0;\n  }\n\n  get durationMs(): number {\n    return this.rootTimegroup?.durationMs ?? 0;\n  }\n\n  get startTimeMs(): number {\n    return this.rootTimegroup?.startTimeMs ?? 0;\n  }\n\n  get endTimeMs(): number {\n    return this.startTimeMs + this.durationMs;\n  }\n\n  /**\n   * Minimal integration with EFTimegroup's frame scheduling:\n   * - Waits for the target video element's frameTask to complete (ensuring it painted)\n   * - Copies the target's canvas into this element's canvas\n   */\n  frameTask = new Task(this, {\n    autoRun: false,\n    args: () => [this.targetElement] as const,\n    task: async ([target], { signal }) => {\n      // Check abort before starting\n      signal?.throwIfAborted();\n      \n      if (!target) return;\n\n      // Ensure the target has painted its frame for this tick\n      try {\n        const maybeTask = (target as any).frameTask;\n        if (maybeTask && typeof maybeTask.run === \"function\") {\n          // Run (idempotent) and then wait for completion\n          maybeTask.run();\n          await maybeTask.taskComplete;\n          // Check abort after async operation\n          signal?.throwIfAborted();\n        }\n      } catch (error) {\n        // Re-throw AbortError to propagate cancellation\n        if (error instanceof DOMException && error.name === \"AbortError\") {\n          throw error;\n        }\n        // Best-effort; continue to attempt copy for other errors\n      }\n\n      // Check abort before copy operation\n      signal?.throwIfAborted();\n      \n      this.copyFromTarget(target);\n    },\n  });\n\n  protected updated(): void {\n    if (this.targetElement) {\n      this.copyFromTarget(this.targetElement);\n    }\n  }\n\n  // Target resolution is handled by TargetController. No implicit discovery.\n\n  private getSourceCanvas(from: Element): HTMLCanvasElement | null {\n    const anyEl = from as any;\n    if (\"canvasElement\" in anyEl) {\n      return anyEl.canvasElement ?? null;\n    }\n    const sr = (from as HTMLElement).shadowRoot;\n    if (sr) {\n      const c = sr.querySelector(\"canvas\");\n      return (c as HTMLCanvasElement) ?? null;\n    }\n    return null;\n  }\n\n  private copyFromTarget(target: Element) {\n    const dst = this.canvasRef.value;\n    const src = this.getSourceCanvas(target);\n    if (!dst || !src) return;\n    if (!src.width || !src.height) return;\n\n    // Match source pixel size for a faithful mirror; layout scaling is handled by CSS\n    if (dst.width !== src.width || dst.height !== src.height) {\n      dst.width = src.width;\n      dst.height = src.height;\n    }\n\n    const ctx = dst.getContext(\"2d\");\n    if (!ctx) return;\n    ctx.drawImage(src, 0, 0, dst.width, dst.height);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-surface\": EFSurface;\n  }\n}\n"],"mappings":";;;;;;;;AAQO,sBAAMA,oBAAkB,WAAW;;;mBAgB5B,WAA8B;uBAOI;gBAGrC;mBA0CG,IAAI,KAAK,MAAM;GACzB,SAAS;GACT,YAAY,CAAC,KAAK,cAAc;GAChC,MAAM,OAAO,CAAC,SAAS,EAAE,aAAa;AAEpC,YAAQ,gBAAgB;AAExB,QAAI,CAAC,OAAQ;AAGb,QAAI;KACF,MAAM,YAAa,OAAe;AAClC,SAAI,aAAa,OAAO,UAAU,QAAQ,YAAY;AAEpD,gBAAU,KAAK;AACf,YAAM,UAAU;AAEhB,cAAQ,gBAAgB;;aAEnB,OAAO;AAEd,SAAI,iBAAiB,gBAAgB,MAAM,SAAS,aAClD,OAAM;;AAMV,YAAQ,gBAAgB;AAExB,SAAK,eAAe,OAAO;;GAE9B,CAAC;;;gBAnGc,CACd,GAAG;;;;;;;;;;;MAYJ;;CAMD,oBAAsC,IAAI,iBAAiB,KAAK;CAQhE,SAAS;AACP,SAAO,IAAI,WAAW,IAAI,KAAK,UAAU,CAAC;;CAI5C,IAAI,gBAAqB;EAEvB,MAAMC,SAAc,KAAK;AACzB,MAAI,UAAU,mBAAmB,OAC/B,QAAO,OAAO;EAGhB,IAAIC,OAAY,KAAK,QAAQ,eAAe;AAC5C,SAAO,MAAM,gBACX,QAAO,KAAK;AAEd,SAAO;;CAGT,IAAI,gBAAwB;AAC1B,SAAO,KAAK,eAAe,iBAAiB;;CAG9C,IAAI,aAAqB;AACvB,SAAO,KAAK,eAAe,cAAc;;CAG3C,IAAI,cAAsB;AACxB,SAAO,KAAK,eAAe,eAAe;;CAG5C,IAAI,YAAoB;AACtB,SAAO,KAAK,cAAc,KAAK;;CA0CjC,AAAU,UAAgB;AACxB,MAAI,KAAK,cACP,MAAK,eAAe,KAAK,cAAc;;CAM3C,AAAQ,gBAAgB,MAAyC;EAC/D,MAAM,QAAQ;AACd,MAAI,mBAAmB,MACrB,QAAO,MAAM,iBAAiB;EAEhC,MAAM,KAAM,KAAqB;AACjC,MAAI,GAEF,QADU,GAAG,cAAc,SAAS,IACD;AAErC,SAAO;;CAGT,AAAQ,eAAe,QAAiB;EACtC,MAAM,MAAM,KAAK,UAAU;EAC3B,MAAM,MAAM,KAAK,gBAAgB,OAAO;AACxC,MAAI,CAAC,OAAO,CAAC,IAAK;AAClB,MAAI,CAAC,IAAI,SAAS,CAAC,IAAI,OAAQ;AAG/B,MAAI,IAAI,UAAU,IAAI,SAAS,IAAI,WAAW,IAAI,QAAQ;AACxD,OAAI,QAAQ,IAAI;AAChB,OAAI,SAAS,IAAI;;EAGnB,MAAM,MAAM,IAAI,WAAW,KAAK;AAChC,MAAI,CAAC,IAAK;AACV,MAAI,UAAU,KAAK,GAAG,GAAG,IAAI,OAAO,IAAI,OAAO;;;YAnHhD,OAAO;YAGP,SAAS,EAAE,MAAM,QAAQ,CAAC;wBA1B5B,cAAc,aAAa"}

package/dist/elements/EFTemporal.d.ts

@@ -196,6 +196,7 @@ declare class TemporalMixinInterface {
   didBecomeChild(): void;
   updateComplete: Promise<boolean>;
 }
+declare const isEFTemporal: (obj: any) => obj is TemporalMixinInterface;
 //#endregion
-export { TemporalMixinInterface };
+export { TemporalMixinInterface, isEFTemporal };
 //# sourceMappingURL=EFTemporal.d.ts.map