@editframe/elements 0.24.1-beta.0 → 0.25.0-beta.0

package/dist/elements/EFVideo.d.ts

@@ -1,116 +1,128 @@
-import { Task } from '@lit/task';
-import { PropertyValueMap } from 'lit';
-import { EFMedia } from './EFMedia.js';
+import { EFFramegen } from "../EF_FRAMEGEN.js";
+import { InputTask } from "./EFMedia/shared/MediaTaskUtils.js";
+import { MediaEngine } from "../transcoding/types/index.js";
+import { EFMedia } from "./EFMedia.js";
+import { VideoBufferState } from "./EFMedia/videoTasks/makeVideoBufferTask.js";
+import { Task } from "@lit/task";
+import * as lit2 from "lit";
+import { PropertyValueMap } from "lit";
+import * as mediabunny0 from "mediabunny";
+import * as lit_html2 from "lit-html";
+import * as lit_html_directives_ref0 from "lit-html/directives/ref";
+
+//#region src/elements/EFVideo.d.ts
 declare global {
-    var EF_FRAMEGEN: import("../EF_FRAMEGEN.js").EFFramegen;
+  var EF_FRAMEGEN: EFFramegen;
 }
 interface LoadingState {
-    isLoading: boolean;
-    operation: "scrub-segment" | "video-segment" | "seeking" | "decoding" | null;
-    message: string;
+  isLoading: boolean;
+  operation: "scrub-segment" | "video-segment" | "seeking" | "decoding" | null;
+  message: string;
 }
 declare const EFVideo_base: typeof EFMedia;
-export declare class EFVideo extends EFVideo_base {
-    static styles: import('lit').CSSResult[];
-    canvasRef: import('lit-html/directives/ref').Ref<HTMLCanvasElement>;
-    /**
-     * Duration in milliseconds for video buffering ahead of current time
-     * @domAttribute "video-buffer-duration"
-     */
-    videoBufferDurationMs: number;
-    /**
-     * Maximum number of concurrent video segment fetches for buffering
-     * @domAttribute "max-video-buffer-fetches"
-     */
-    maxVideoBufferFetches: number;
-    /**
-     * Enable/disable video buffering system
-     * @domAttribute "enable-video-buffering"
-     */
-    enableVideoBuffering: boolean;
-    unifiedVideoSeekTask: Task<readonly [number], import('mediabunny').VideoSample | undefined>;
-    videoBufferTask: Task<readonly [number], import('./EFMedia/videoTasks/makeVideoBufferTask.ts').VideoBufferState>;
-    scrubVideoBufferTask: Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined], unknown>;
-    scrubVideoInputTask: import('./EFMedia/shared/MediaTaskUtils.ts').InputTask;
-    scrubVideoSeekTask: Task<readonly [number], import('mediabunny').VideoSample | undefined>;
-    scrubVideoSegmentIdTask: Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined, number], number | undefined>;
-    scrubVideoSegmentFetchTask: Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined, number | undefined], ArrayBuffer>;
-    scrubVideoInitSegmentFetchTask: Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined], ArrayBuffer>;
-    /**
-     * Delayed loading state manager for user feedback
-     */
-    private delayedLoadingState;
-    /**
-     * Loading state for user feedback
-     */
-    loadingState: {
-        isLoading: boolean;
-        operation: LoadingState["operation"];
-        message: string;
-    };
-    constructor();
-    protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
-    render(): import('lit-html').TemplateResult<1>;
-    get canvasElement(): HTMLCanvasElement | undefined;
-    frameTask: Task<readonly [number], void>;
-    /**
-     * Start a delayed loading operation for testing
-     */
-    startDelayedLoading(operationId: string, message: string, options?: {
-        background?: boolean;
-    }): void;
-    /**
-     * Clear a delayed loading operation for testing
-     */
-    clearDelayedLoading(operationId: string): void;
-    /**
-     * Set loading state for user feedback
-     */
-    private setLoadingState;
-    /**
-     * Paint the current video frame to canvas
-     * Called by frameTask after seek is complete
-     */
-    paint(seekToMs: number, parentSpan?: any): void;
-    /**
-     * Clear the canvas when element becomes inactive
-     */
-    clearCanvas(): void;
-    /**
-     * Display a video frame on the canvas
-     */
-    displayFrame(frame: VideoFrame, seekToMs: number, parentSpan?: any): void;
-    /**
-     * Check if we're in production rendering mode (EF_FRAMEGEN active) vs preview mode
-     */
-    private isInProductionRenderingMode;
-    /**
-     * Check if EF_FRAMEGEN has explicitly started frame rendering (not just initialization)
-     */
-    private isFrameRenderingActive;
-    /**
-     * Legacy getter for fragment index task
-     * Still used by EFCaptions - maps to unified video seek task
-     */
-    get fragmentIndexTask(): Task<readonly [number], import('mediabunny').VideoSample | undefined>;
-    /**
-     * Helper method for tests: wait for the current frame to be ready
-     * This encapsulates the complexity of ensuring the video has updated
-     * and its frameTask has completed.
-     *
-     * @returns Promise that resolves when the frame is ready
-     */
-    waitForFrameReady(): Promise<void>;
-    /**
-     * Clean up resources when component is disconnected
-     */
-    disconnectedCallback(): void;
-    didBecomeRoot(): void;
-    didBecomeChild(): void;
+declare class EFVideo extends EFVideo_base {
+  static styles: lit2.CSSResult[];
+  canvasRef: lit_html_directives_ref0.Ref<HTMLCanvasElement>;
+  /**
+   * Duration in milliseconds for video buffering ahead of current time
+   * @domAttribute "video-buffer-duration"
+   */
+  videoBufferDurationMs: number;
+  /**
+   * Maximum number of concurrent video segment fetches for buffering
+   * @domAttribute "max-video-buffer-fetches"
+   */
+  maxVideoBufferFetches: number;
+  /**
+   * Enable/disable video buffering system
+   * @domAttribute "enable-video-buffering"
+   */
+  enableVideoBuffering: boolean;
+  unifiedVideoSeekTask: Task<readonly [number], mediabunny0.VideoSample | undefined>;
+  videoBufferTask: Task<readonly [number], VideoBufferState>;
+  scrubVideoBufferTask: Task<readonly [MediaEngine | undefined], unknown>;
+  scrubVideoInputTask: InputTask;
+  scrubVideoSeekTask: Task<readonly [number], mediabunny0.VideoSample | undefined>;
+  scrubVideoSegmentIdTask: Task<readonly [MediaEngine | undefined, number], number | undefined>;
+  scrubVideoSegmentFetchTask: Task<readonly [MediaEngine | undefined, number | undefined], ArrayBuffer>;
+  scrubVideoInitSegmentFetchTask: Task<readonly [MediaEngine | undefined], ArrayBuffer>;
+  /**
+   * Delayed loading state manager for user feedback
+   */
+  private delayedLoadingState;
+  /**
+   * Loading state for user feedback
+   */
+  loadingState: {
+    isLoading: boolean;
+    operation: LoadingState["operation"];
+    message: string;
+  };
+  constructor();
+  protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+  render(): lit_html2.TemplateResult<1>;
+  get canvasElement(): HTMLCanvasElement | undefined;
+  frameTask: Task<readonly [number], void>;
+  /**
+   * Start a delayed loading operation for testing
+   */
+  startDelayedLoading(operationId: string, message: string, options?: {
+    background?: boolean;
+  }): void;
+  /**
+   * Clear a delayed loading operation for testing
+   */
+  clearDelayedLoading(operationId: string): void;
+  /**
+   * Set loading state for user feedback
+   */
+  private setLoadingState;
+  /**
+   * Paint the current video frame to canvas
+   * Called by frameTask after seek is complete
+   */
+  paint(seekToMs: number, parentSpan?: any): void;
+  /**
+   * Clear the canvas when element becomes inactive
+   */
+  clearCanvas(): void;
+  /**
+   * Display a video frame on the canvas
+   */
+  displayFrame(frame: VideoFrame, seekToMs: number, parentSpan?: any): void;
+  /**
+   * Check if we're in production rendering mode (EF_FRAMEGEN active) vs preview mode
+   */
+  private isInProductionRenderingMode;
+  /**
+   * Check if EF_FRAMEGEN has explicitly started frame rendering (not just initialization)
+   */
+  private isFrameRenderingActive;
+  /**
+   * Legacy getter for fragment index task
+   * Still used by EFCaptions - maps to unified video seek task
+   */
+  get fragmentIndexTask(): Task<readonly [number], mediabunny0.VideoSample | undefined>;
+  /**
+   * Helper method for tests: wait for the current frame to be ready
+   * This encapsulates the complexity of ensuring the video has updated
+   * and its frameTask has completed.
+   *
+   * @returns Promise that resolves when the frame is ready
+   */
+  waitForFrameReady(): Promise<void>;
+  /**
+   * Clean up resources when component is disconnected
+   */
+  disconnectedCallback(): void;
+  didBecomeRoot(): void;
+  didBecomeChild(): void;
 }
 declare global {
-    interface HTMLElementTagNameMap {
-        "ef-video": EFVideo;
-    }
+  interface HTMLElementTagNameMap {
+    "ef-video": EFVideo;
+  }
 }
-export {};
+//#endregion
+export { EFVideo };
+//# sourceMappingURL=EFVideo.d.ts.map

package/dist/elements/EFVideo.js

@@ -18,8 +18,10 @@ import { css, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { context, trace } from "@opentelemetry/api";
 import { createRef, ref } from "lit/directives/ref.js";
-var log = debug("ef:elements:EFVideo");
-var EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
+
+//#region src/elements/EFVideo.ts
+const log = debug("ef:elements:EFVideo");
+let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 	static {
 		this.styles = [css`
       :host {
@@ -164,12 +166,21 @@ var EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 		const shadowCanvas = this.shadowRoot?.querySelector("canvas");
 		if (shadowCanvas) return shadowCanvas;
 	}
+	/**
+	* Start a delayed loading operation for testing
+	*/
 	startDelayedLoading(operationId, message, options = {}) {
 		this.delayedLoadingState.startLoading(operationId, message, options);
 	}
+	/**
+	* Clear a delayed loading operation for testing
+	*/
 	clearDelayedLoading(operationId) {
 		this.delayedLoadingState.clearLoading(operationId);
 	}
+	/**
+	* Set loading state for user feedback
+	*/
 	setLoadingState(isLoading, operation = null, message = "") {
 		this.loadingState = {
 			isLoading,
@@ -177,6 +188,10 @@ var EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 			message
 		};
 	}
+	/**
+	* Paint the current video frame to canvas
+	* Called by frameTask after seek is complete
+	*/
 	paint(seekToMs, parentSpan) {
 		const parentContext = parentSpan ? trace.setSpan(context.active(), parentSpan) : void 0;
 		withSpanSync("video.paint", {
@@ -230,11 +245,17 @@ var EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 			span.setAttribute("totalPaintMs", tEnd - t0);
 		});
 	}
+	/**
+	* Clear the canvas when element becomes inactive
+	*/
 	clearCanvas() {
 		if (!this.canvasElement) return;
 		const ctx = this.canvasElement.getContext("2d");
 		if (ctx) ctx.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);
 	}
+	/**
+	* Display a video frame on the canvas
+	*/
 	displayFrame(frame, seekToMs, parentSpan) {
 		const parentContext = parentSpan ? trace.setSpan(context.active(), parentSpan) : void 0;
 		withSpanSync("video.displayFrame", {
@@ -291,24 +312,44 @@ var EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 			log("trace: frame drawn to canvas", { seekToMs });
 		});
 	}
+	/**
+	* Check if we're in production rendering mode (EF_FRAMEGEN active) vs preview mode
+	*/
 	isInProductionRenderingMode() {
 		if (typeof window.EF_RENDERING === "function") return window.EF_RENDERING();
 		if (document.querySelector("ef-workbench")?.rendering) return true;
 		if (window.EF_FRAMEGEN?.renderOptions) return true;
 		return false;
 	}
+	/**
+	* Check if EF_FRAMEGEN has explicitly started frame rendering (not just initialization)
+	*/
 	isFrameRenderingActive() {
 		if (!window.EF_FRAMEGEN?.renderOptions) return false;
 		const renderStartTime = window.EF_FRAMEGEN.renderOptions.encoderOptions.fromMs;
 		return (this.rootTimegroup?.currentTimeMs || 0) >= renderStartTime;
 	}
+	/**
+	* Legacy getter for fragment index task
+	* Still used by EFCaptions - maps to unified video seek task
+	*/
 	get fragmentIndexTask() {
 		return this.unifiedVideoSeekTask;
 	}
+	/**
+	* Helper method for tests: wait for the current frame to be ready
+	* This encapsulates the complexity of ensuring the video has updated
+	* and its frameTask has completed.
+	*
+	* @returns Promise that resolves when the frame is ready
+	*/
 	async waitForFrameReady() {
 		await this.updateComplete;
 		await this.frameTask.run();
 	}
+	/**
+	* Clean up resources when component is disconnected
+	*/
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.delayedLoadingState.clearAllLoading();
@@ -334,4 +375,7 @@ __decorate([property({
 })], EFVideo.prototype, "enableVideoBuffering", void 0);
 __decorate([state()], EFVideo.prototype, "loadingState", void 0);
 EFVideo = __decorate([customElement("ef-video")], EFVideo);
+
+//#endregion
 export { EFVideo };
+//# sourceMappingURL=EFVideo.js.map

package/dist/elements/EFVideo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EFVideo.js","names":["EFVideo"],"sources":["../../src/elements/EFVideo.ts"],"sourcesContent":["import { Task } from \"@lit/task\";\nimport { context, trace } from \"@opentelemetry/api\";\nimport debug from \"debug\";\nimport { css, html, type PropertyValueMap } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport { DelayedLoadingState } from \"../DelayedLoadingState.js\";\nimport { TWMixin } from \"../gui/TWMixin.js\";\nimport { withSpan, withSpanSync } from \"../otel/tracingHelpers.js\";\nimport { makeScrubVideoBufferTask } from \"./EFMedia/videoTasks/makeScrubVideoBufferTask.ts\";\nimport { makeScrubVideoInitSegmentFetchTask } from \"./EFMedia/videoTasks/makeScrubVideoInitSegmentFetchTask.ts\";\nimport { makeScrubVideoInputTask } from \"./EFMedia/videoTasks/makeScrubVideoInputTask.ts\";\nimport { makeScrubVideoSeekTask } from \"./EFMedia/videoTasks/makeScrubVideoSeekTask.ts\";\nimport { makeScrubVideoSegmentFetchTask } from \"./EFMedia/videoTasks/makeScrubVideoSegmentFetchTask.ts\";\nimport { makeScrubVideoSegmentIdTask } from \"./EFMedia/videoTasks/makeScrubVideoSegmentIdTask.ts\";\nimport { makeUnifiedVideoSeekTask } from \"./EFMedia/videoTasks/makeUnifiedVideoSeekTask.ts\";\nimport { makeVideoBufferTask } from \"./EFMedia/videoTasks/makeVideoBufferTask.ts\";\nimport { EFMedia } from \"./EFMedia.js\";\nimport { updateAnimations } from \"./updateAnimations.js\";\n\n// EF_FRAMEGEN is a global instance created in EF_FRAMEGEN.ts\ndeclare global {\n  var EF_FRAMEGEN: import(\"../EF_FRAMEGEN.js\").EFFramegen;\n}\n\nconst log = debug(\"ef:elements:EFVideo\");\n\ninterface LoadingState {\n  isLoading: boolean;\n  operation: \"scrub-segment\" | \"video-segment\" | \"seeking\" | \"decoding\" | null;\n  message: string;\n}\n\n@customElement(\"ef-video\")\nexport class EFVideo extends TWMixin(EFMedia) {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n      }\n      canvas {\n        overflow: hidden;\n        position: static;\n        width: 100%;\n        height: 100%;\n        margin: 0;\n        padding: 0;\n        overflow: hidden;\n        border: none;\n        outline: none;\n        box-shadow: none;\n      }\n      .loading-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background: rgba(0, 0, 0, 0.6);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 10;\n        backdrop-filter: blur(2px);\n      }\n      .loading-content {\n        background: rgba(0, 0, 0, 0.8);\n        border-radius: 8px;\n        padding: 16px 24px;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        color: white;\n        font-size: 14px;\n        font-weight: 500;\n      }\n      .loading-spinner {\n        width: 20px;\n        height: 20px;\n        border: 2px solid rgba(255, 255, 255, 0.2);\n        border-left: 2px solid #fff;\n        border-radius: 50%;\n        animation: spin 1s linear infinite;\n      }\n      @keyframes spin {\n        0% { transform: rotate(0deg); }\n        100% { transform: rotate(360deg); }\n      }\n      .loading-message {\n        font-size: 12px;\n        opacity: 0.8;\n      }\n    `,\n  ];\n  canvasRef = createRef<HTMLCanvasElement>();\n\n  /**\n   * Duration in milliseconds for video buffering ahead of current time\n   * @domAttribute \"video-buffer-duration\"\n   */\n  @property({ type: Number, attribute: \"video-buffer-duration\" })\n  videoBufferDurationMs = 10000; // 10 seconds - reasonable for JIT encoding\n\n  /**\n   * Maximum number of concurrent video segment fetches for buffering\n   * @domAttribute \"max-video-buffer-fetches\"\n   */\n  @property({ type: Number, attribute: \"max-video-buffer-fetches\" })\n  maxVideoBufferFetches = 2;\n\n  /**\n   * Enable/disable video buffering system\n   * @domAttribute \"enable-video-buffering\"\n   */\n  @property({ type: Boolean, attribute: \"enable-video-buffering\" })\n  enableVideoBuffering = true;\n\n  // Unified video system - single smart seek task that routes to scrub or main\n  unifiedVideoSeekTask = makeUnifiedVideoSeekTask(this);\n  videoBufferTask = makeVideoBufferTask(this); // Keep for main video buffering\n\n  // Scrub video preloading system\n  scrubVideoBufferTask = makeScrubVideoBufferTask(this);\n  scrubVideoInputTask = makeScrubVideoInputTask(this);\n  scrubVideoSeekTask = makeScrubVideoSeekTask(this);\n  scrubVideoSegmentIdTask = makeScrubVideoSegmentIdTask(this);\n  scrubVideoSegmentFetchTask = makeScrubVideoSegmentFetchTask(this);\n  scrubVideoInitSegmentFetchTask = makeScrubVideoInitSegmentFetchTask(this);\n\n  /**\n   * Delayed loading state manager for user feedback\n   */\n  private delayedLoadingState: DelayedLoadingState;\n\n  /**\n   * Loading state for user feedback\n   */\n  @state()\n  loadingState = {\n    isLoading: false,\n    operation: null as LoadingState[\"operation\"],\n    message: \"\",\n  };\n\n  constructor() {\n    super();\n\n    // Initialize delayed loading state with callback to update UI\n    this.delayedLoadingState = new DelayedLoadingState(\n      250,\n      (isLoading, message) => {\n        this.setLoadingState(isLoading, null, message);\n      },\n    );\n  }\n\n  protected updated(\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(changedProperties);\n\n    // No need to clear canvas - displayFrame() overwrites it completely\n    // and clearing creates blank frame gaps during transitions\n  }\n\n  render() {\n    return html`\n      <canvas ${ref(this.canvasRef)}></canvas>\n      ${\n        this.loadingState.isLoading\n          ? html`\n        <div class=\"loading-overlay\">\n          <div class=\"loading-content\">\n            <div class=\"loading-spinner\"></div>\n            <div>\n              <div>Loading Video...</div>\n              <div class=\"loading-message\">${this.loadingState.message}</div>\n            </div>\n          </div>\n        </div>\n      `\n          : \"\"\n      }\n    `;\n  }\n\n  get canvasElement() {\n    const referencedCanvas = this.canvasRef.value;\n    if (referencedCanvas) {\n      return referencedCanvas;\n    }\n    const shadowCanvas = this.shadowRoot?.querySelector(\"canvas\");\n    if (shadowCanvas) {\n      return shadowCanvas;\n    }\n    return undefined;\n  }\n\n  frameTask = new Task(this, {\n    autoRun: false,\n    args: () => [this.desiredSeekTimeMs] as const,\n    onError: (error) => {\n      console.error(\"frameTask error\", error);\n    },\n    onComplete: () => {},\n    task: async ([_desiredSeekTimeMs], { signal }) => {\n      const t0 = performance.now();\n\n      await withSpan(\n        \"video.frameTask\",\n        {\n          elementId: this.id || \"unknown\",\n          desiredSeekTimeMs: _desiredSeekTimeMs,\n          src: this.src || \"none\",\n        },\n        undefined,\n        async (span) => {\n          const t1 = performance.now();\n          span.setAttribute(\"preworkMs\", t1 - t0);\n\n          this.unifiedVideoSeekTask.run();\n          const t2 = performance.now();\n          span.setAttribute(\"seekRunMs\", t2 - t1);\n\n          await this.unifiedVideoSeekTask.taskComplete;\n          const t3 = performance.now();\n          span.setAttribute(\"seekAwaitMs\", t3 - t2);\n          if (signal.aborted) {\n            span.setAttribute(\"aborted\", true);\n            return;\n          }\n\n          this.paint(this.desiredSeekTimeMs, span);\n\n          if (!this.parentTimegroup) {\n            updateAnimations(this);\n          }\n\n          const t4 = performance.now();\n          this.paint(_desiredSeekTimeMs, span);\n          const t5 = performance.now();\n          span.setAttribute(\"paintMs\", t5 - t4);\n          span.setAttribute(\"totalFrameMs\", t5 - t0);\n        },\n      );\n    },\n  });\n\n  /**\n   * Start a delayed loading operation for testing\n   */\n  startDelayedLoading(\n    operationId: string,\n    message: string,\n    options: { background?: boolean } = {},\n  ): void {\n    this.delayedLoadingState.startLoading(operationId, message, options);\n  }\n\n  /**\n   * Clear a delayed loading operation for testing\n   */\n  clearDelayedLoading(operationId: string): void {\n    this.delayedLoadingState.clearLoading(operationId);\n  }\n\n  /**\n   * Set loading state for user feedback\n   */\n  private setLoadingState(\n    isLoading: boolean,\n    operation: LoadingState[\"operation\"] = null,\n    message = \"\",\n  ): void {\n    this.loadingState = {\n      isLoading,\n      operation,\n      message,\n    };\n  }\n\n  /**\n   * Paint the current video frame to canvas\n   * Called by frameTask after seek is complete\n   */\n  paint(seekToMs: number, parentSpan?: any): void {\n    const parentContext = parentSpan\n      ? trace.setSpan(context.active(), parentSpan)\n      : undefined;\n\n    withSpanSync(\n      \"video.paint\",\n      {\n        elementId: this.id || \"unknown\",\n        seekToMs,\n        src: this.src || \"none\",\n      },\n      parentContext,\n      (span) => {\n        const t0 = performance.now();\n\n        // Check if we're in production rendering mode vs preview mode\n        const isProductionRendering = this.isInProductionRenderingMode();\n        const t1 = performance.now();\n        span.setAttribute(\"isProductionRendering\", isProductionRendering);\n        span.setAttribute(\"modeCheckMs\", t1 - t0);\n\n        // Unified video system: smart routing to scrub or main, with background upgrades\n        // Note: frameTask guarantees unifiedVideoSeekTask is complete before calling paint\n        try {\n          const t2 = performance.now();\n          const videoSample = this.unifiedVideoSeekTask.value;\n          span.setAttribute(\"hasVideoSample\", !!videoSample);\n          span.setAttribute(\"valueAccessMs\", t2 - t1);\n\n          if (videoSample) {\n            const t3 = performance.now();\n            const videoFrame = videoSample.toVideoFrame();\n            const t4 = performance.now();\n            span.setAttribute(\"toVideoFrameMs\", t4 - t3);\n\n            try {\n              const t5 = performance.now();\n              this.displayFrame(videoFrame, seekToMs, span);\n              const t6 = performance.now();\n              span.setAttribute(\"displayFrameMs\", t6 - t5);\n            } finally {\n              videoFrame.close();\n            }\n          }\n        } catch (error) {\n          console.warn(\"Unified video pipeline error:\", error);\n        }\n\n        // EF_FRAMEGEN-aware rendering mode detection\n        if (!isProductionRendering) {\n          // Preview mode: skip rendering during initialization to prevent artifacts\n          if (\n            !this.rootTimegroup ||\n            (this.rootTimegroup.currentTimeMs === 0 &&\n              this.desiredSeekTimeMs === 0)\n          ) {\n            span.setAttribute(\"skipped\", \"preview-initialization\");\n            return; // Skip initialization frame in preview mode\n          }\n          // Preview mode: proceed with rendering\n        } else {\n          // Production rendering mode: only render when EF_FRAMEGEN has explicitly started frame rendering\n          // This prevents initialization frames before the actual render sequence begins\n          if (!this.rootTimegroup) {\n            span.setAttribute(\"skipped\", \"no-root-timegroup\");\n            return;\n          }\n\n          if (!this.isFrameRenderingActive()) {\n            span.setAttribute(\"skipped\", \"frame-rendering-not-active\");\n            return; // Wait for EF_FRAMEGEN to start frame sequence\n          }\n\n          // Production mode: EF_FRAMEGEN has started frame sequence, proceed with rendering\n        }\n\n        const tEnd = performance.now();\n        span.setAttribute(\"totalPaintMs\", tEnd - t0);\n      },\n    );\n  }\n\n  /**\n   * Clear the canvas when element becomes inactive\n   */\n  clearCanvas(): void {\n    if (!this.canvasElement) return;\n\n    const ctx = this.canvasElement.getContext(\"2d\");\n    if (ctx) {\n      ctx.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);\n    }\n  }\n\n  /**\n   * Display a video frame on the canvas\n   */\n  displayFrame(frame: VideoFrame, seekToMs: number, parentSpan?: any): void {\n    const parentContext = parentSpan\n      ? trace.setSpan(context.active(), parentSpan)\n      : undefined;\n\n    withSpanSync(\n      \"video.displayFrame\",\n      {\n        elementId: this.id || \"unknown\",\n        seekToMs,\n        format: frame.format || \"unknown\",\n        width: frame.codedWidth,\n        height: frame.codedHeight,\n      },\n      parentContext,\n      (span) => {\n        const t0 = performance.now();\n\n        log(\"trace: displayFrame start\", {\n          seekToMs,\n          frameFormat: frame.format,\n        });\n\n        if (!this.canvasElement) {\n          log(\"trace: displayFrame aborted - no canvas element\");\n          throw new Error(\n            `Frame display failed: Canvas element is not available at time ${seekToMs}ms. The video component may not be properly initialized.`,\n          );\n        }\n        const t1 = performance.now();\n        span.setAttribute(\"getCanvasMs\", Math.round((t1 - t0) * 100) / 100);\n\n        const ctx = this.canvasElement.getContext(\"2d\");\n        const t2 = performance.now();\n        span.setAttribute(\"getCtxMs\", Math.round((t2 - t1) * 100) / 100);\n\n        if (!ctx) {\n          log(\"trace: displayFrame aborted - no canvas context\");\n          throw new Error(\n            `Frame display failed: Unable to get 2D canvas context at time ${seekToMs}ms. This may indicate a browser compatibility issue or canvas corruption.`,\n          );\n        }\n\n        let resized = false;\n        if (frame?.codedWidth && frame?.codedHeight) {\n          if (\n            this.canvasElement.width !== frame.codedWidth ||\n            this.canvasElement.height !== frame.codedHeight\n          ) {\n            log(\"trace: updating canvas dimensions\", {\n              width: frame.codedWidth,\n              height: frame.codedHeight,\n            });\n            this.canvasElement.width = frame.codedWidth;\n            this.canvasElement.height = frame.codedHeight;\n            resized = true;\n            const t3 = performance.now();\n            span.setAttribute(\"resizeMs\", Math.round((t3 - t2) * 100) / 100);\n          }\n        }\n        span.setAttribute(\"canvasResized\", resized);\n\n        if (frame.format === null) {\n          log(\"trace: displayFrame aborted - null frame format\");\n          throw new Error(\n            `Frame display failed: Video frame has null format at time ${seekToMs}ms. This indicates corrupted or incompatible video data.`,\n          );\n        }\n\n        const tDrawStart = performance.now();\n        ctx.drawImage(\n          frame,\n          0,\n          0,\n          this.canvasElement.width,\n          this.canvasElement.height,\n        );\n        const tDrawEnd = performance.now();\n        span.setAttribute(\n          \"drawImageMs\",\n          Math.round((tDrawEnd - tDrawStart) * 100) / 100,\n        );\n        span.setAttribute(\n          \"totalDisplayMs\",\n          Math.round((tDrawEnd - t0) * 100) / 100,\n        );\n        span.setAttribute(\"canvasWidth\", this.canvasElement.width);\n        span.setAttribute(\"canvasHeight\", this.canvasElement.height);\n\n        log(\"trace: frame drawn to canvas\", { seekToMs });\n      },\n    );\n  }\n\n  /**\n   * Check if we're in production rendering mode (EF_FRAMEGEN active) vs preview mode\n   */\n  private isInProductionRenderingMode(): boolean {\n    // Check if EF_RENDERING function exists and returns true (production rendering)\n    if (typeof window.EF_RENDERING === \"function\") {\n      return window.EF_RENDERING();\n    }\n\n    // Check if workbench is in rendering mode\n    const workbench = document.querySelector(\"ef-workbench\") as any;\n    if (workbench?.rendering) {\n      return true;\n    }\n\n    // Check if EF_FRAMEGEN exists and has render options (indicates active rendering)\n    if (window.EF_FRAMEGEN?.renderOptions) {\n      return true;\n    }\n\n    // Default to preview mode\n    return false;\n  }\n\n  /**\n   * Check if EF_FRAMEGEN has explicitly started frame rendering (not just initialization)\n   */\n  private isFrameRenderingActive(): boolean {\n    if (!window.EF_FRAMEGEN?.renderOptions) {\n      return false;\n    }\n\n    // In production mode, only render when EF_FRAMEGEN has actually begun frame sequence\n    // Check if we're past the initialization phase by looking for explicit frame control\n    const renderOptions = window.EF_FRAMEGEN.renderOptions;\n    const renderStartTime = renderOptions.encoderOptions.fromMs;\n    const currentTime = this.rootTimegroup?.currentTimeMs || 0;\n\n    // We're in active frame rendering if:\n    // 1. currentTime >= renderStartTime (includes the starting frame)\n    return currentTime >= renderStartTime;\n  }\n\n  /**\n   * Legacy getter for fragment index task\n   * Still used by EFCaptions - maps to unified video seek task\n   */\n  get fragmentIndexTask() {\n    return this.unifiedVideoSeekTask;\n  }\n\n  /**\n   * Helper method for tests: wait for the current frame to be ready\n   * This encapsulates the complexity of ensuring the video has updated\n   * and its frameTask has completed.\n   *\n   * @returns Promise that resolves when the frame is ready\n   */\n  async waitForFrameReady(): Promise<void> {\n    await this.updateComplete;\n    await this.frameTask.run();\n  }\n\n  /**\n   * Clean up resources when component is disconnected\n   */\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n\n    // Clean up delayed loading state\n    this.delayedLoadingState.clearAllLoading();\n  }\n\n  didBecomeRoot() {\n    super.didBecomeRoot();\n  }\n  didBecomeChild() {\n    super.didBecomeChild();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-video\": EFVideo;\n  }\n}\n"],"mappings":"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"}

package/dist/elements/EFWaveform.d.ts

@@ -1,44 +1,51 @@
-import { Task } from '@lit/task';
-import { LitElement, PropertyValueMap } from 'lit';
-import { Ref } from 'lit/directives/ref.js';
-import { EFAudio } from './EFAudio.js';
-import { EFVideo } from './EFVideo.js';
-import { TargetController } from './TargetController.ts';
-declare const EFWaveform_base: (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & typeof LitElement;
-export declare class EFWaveform extends EFWaveform_base {
-    static styles: import('lit').CSSResult;
-    canvasRef: Ref<HTMLCanvasElement>;
-    private ctx;
-    private styleObserver;
-    private resizeObserver?;
-    private mutationObserver?;
-    render(): import('lit-html').TemplateResult<1>;
-    mode: "roundBars" | "bars" | "bricks" | "line" | "curve" | "pixel" | "wave" | "spikes";
-    color: string;
-    target: string;
-    barSpacing: number;
-    targetElement: EFAudio | EFVideo | null;
-    lineWidth: number;
-    targetController: TargetController;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private resizeCanvas;
-    protected initCanvas(): CanvasRenderingContext2D | null;
-    protected drawBars(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
-    protected drawBricks(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
-    protected drawRoundBars(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
-    protected drawLine(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
-    protected drawCurve(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
-    protected drawPixel(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
-    protected drawWave(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
-    protected drawSpikes(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
-    frameTask: Task<readonly [EFAudio | EFVideo | null, Uint8Array | null | undefined], void>;
-    get durationMs(): number;
-    protected updated(changedProperties: PropertyValueMap<this>): void;
+import { TemporalMixinInterface } from "./EFTemporal.js";
+import { EFAudio } from "./EFAudio.js";
+import { EFVideo } from "./EFVideo.js";
+import { TargetController } from "./TargetController.js";
+import { Task } from "@lit/task";
+import * as lit8 from "lit";
+import { LitElement, PropertyValueMap } from "lit";
+import { Ref } from "lit/directives/ref.js";
+import * as lit_html8 from "lit-html";
+
+//#region src/elements/EFWaveform.d.ts
+declare const EFWaveform_base: (new (...args: any[]) => TemporalMixinInterface) & typeof LitElement;
+declare class EFWaveform extends EFWaveform_base {
+  static styles: lit8.CSSResult;
+  canvasRef: Ref<HTMLCanvasElement>;
+  private ctx;
+  private styleObserver;
+  private resizeObserver?;
+  private mutationObserver?;
+  render(): lit_html8.TemplateResult<1>;
+  mode: "roundBars" | "bars" | "bricks" | "line" | "curve" | "pixel" | "wave" | "spikes";
+  color: string;
+  target: string;
+  barSpacing: number;
+  targetElement: EFAudio | EFVideo | null;
+  lineWidth: number;
+  targetController: TargetController;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  private resizeCanvas;
+  protected initCanvas(): CanvasRenderingContext2D | null;
+  protected drawBars(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
+  protected drawBricks(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
+  protected drawRoundBars(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
+  protected drawLine(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
+  protected drawCurve(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
+  protected drawPixel(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
+  protected drawWave(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
+  protected drawSpikes(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
+  frameTask: Task<readonly [EFAudio | EFVideo | null, Uint8Array | null | undefined], void>;
+  get durationMs(): number;
+  protected updated(changedProperties: PropertyValueMap<this>): void;
 }
 declare global {
-    interface HTMLElementTagNameMap {
-        "ef-waveform": EFWaveform & Element;
-    }
+  interface HTMLElementTagNameMap {
+    "ef-waveform": EFWaveform & Element;
+  }
 }
-export {};
+//#endregion
+export { EFWaveform };
+//# sourceMappingURL=EFWaveform.d.ts.map

package/dist/elements/EFWaveform.js

@@ -9,7 +9,9 @@ import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { CSSStyleObserver } from "@bramus/style-observer";
-var EFWaveform = class EFWaveform$1 extends EFTemporal(TWMixin(LitElement)) {
+
+//#region src/elements/EFWaveform.ts
+let EFWaveform = class EFWaveform$1 extends EFTemporal(TWMixin(LitElement)) {
 	constructor(..._args) {
 		super(..._args);
 		this.canvasRef = createRef();
@@ -372,4 +374,7 @@ __decorate([property({
 	attribute: "line-width"
 })], EFWaveform.prototype, "lineWidth", void 0);
 EFWaveform = __decorate([customElement("ef-waveform")], EFWaveform);
+
+//#endregion
 export { EFWaveform };
+//# sourceMappingURL=EFWaveform.js.map

package/dist/elements/EFWaveform.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EFWaveform.js","names":["EFWaveform"],"sources":["../../src/elements/EFWaveform.ts"],"sourcesContent":["import { CSSStyleObserver } from \"@bramus/style-observer\";\nimport { Task } from \"@lit/task\";\nimport { css, html, LitElement, type PropertyValueMap } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { createRef, type Ref, ref } from \"lit/directives/ref.js\";\nimport { EF_RENDERING } from \"../EF_RENDERING.js\";\nimport { TWMixin } from \"../gui/TWMixin.js\";\nimport { CrossUpdateController } from \"./CrossUpdateController.js\";\nimport type { EFAudio } from \"./EFAudio.js\";\nimport { EFTemporal } from \"./EFTemporal.js\";\nimport type { EFVideo } from \"./EFVideo.js\";\nimport { TargetController } from \"./TargetController.ts\";\n\n@customElement(\"ef-waveform\")\nexport class EFWaveform extends EFTemporal(TWMixin(LitElement)) {\n  static styles = css`\n      :host {\n        all: inherit;\n        display: block;\n        position: relative;\n      }\n\n      canvas {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n      }\n    `;\n\n  canvasRef: Ref<HTMLCanvasElement> = createRef();\n  private ctx: CanvasRenderingContext2D | null = null;\n  private styleObserver: CSSStyleObserver | null = null;\n\n  private resizeObserver?: ResizeObserver;\n  private mutationObserver?: MutationObserver;\n\n  render() {\n    return html`<canvas ${ref(this.canvasRef)}></canvas>`;\n  }\n\n  @property({\n    type: String,\n    attribute: \"mode\",\n  })\n  mode:\n    | \"roundBars\"\n    | \"bars\"\n    | \"bricks\"\n    | \"line\"\n    | \"curve\"\n    | \"pixel\"\n    | \"wave\"\n    | \"spikes\" = \"bars\";\n\n  @property({ type: String })\n  color = \"currentColor\";\n\n  @property({ type: String, reflect: true })\n  target = \"\";\n\n  @property({ type: Number, attribute: \"bar-spacing\" })\n  barSpacing = 0.5;\n\n  @state()\n  targetElement: EFAudio | EFVideo | null = null;\n\n  @property({ type: Number, attribute: \"line-width\" })\n  lineWidth = 4;\n\n  targetController: TargetController = new TargetController(this);\n\n  connectedCallback() {\n    super.connectedCallback();\n    try {\n      if (this.targetElement) {\n        new CrossUpdateController(this.targetElement, this);\n      }\n    } catch (_error) {\n      // TODO: determine if this is a critical error, or if we should just ignore it\n      // currenty evidence suggests everything still works\n      // no target element, no cross update controller\n    }\n\n    // Initialize ResizeObserver\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeCanvas();\n    });\n\n    // Observe the host element\n    this.resizeObserver.observe(this);\n\n    // Initialize MutationObserver\n    this.mutationObserver = new MutationObserver((mutationsList) => {\n      for (const mutation of mutationsList) {\n        if (mutation.type === \"attributes\") {\n          this.frameTask.run();\n        }\n      }\n    });\n\n    // Observe attribute changes on the element\n    this.mutationObserver.observe(this, { attributes: true });\n\n    if (!EF_RENDERING()) {\n      this.styleObserver = new CSSStyleObserver([\"color\"], () => {\n        this.frameTask.run();\n      });\n      this.styleObserver.attach(this);\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    // Disconnect the observers when the element is removed from the DOM\n    this.resizeObserver?.disconnect();\n    this.mutationObserver?.disconnect();\n    this.styleObserver?.detach();\n  }\n\n  private resizeCanvas() {\n    this.ctx = this.initCanvas();\n    if (this.ctx) {\n      this.frameTask.run(); // Redraw the canvas\n    }\n  }\n\n  protected initCanvas() {\n    const canvas = this.canvasRef.value;\n    if (!canvas) return null;\n\n    const rect = {\n      width: this.offsetWidth,\n      height: this.offsetHeight,\n    };\n    const dpr = window.devicePixelRatio;\n\n    canvas.style.width = `${rect.width}px`;\n    canvas.style.height = `${rect.height}px`;\n\n    canvas.width = rect.width * dpr;\n    canvas.height = rect.height * dpr;\n\n    const ctx = canvas.getContext(\"2d\");\n    if (!ctx) return null;\n    ctx.reset();\n\n    // Scale all drawing operations by dpr\n    return ctx;\n  }\n\n  protected drawBars(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {\n    const canvas = ctx.canvas;\n    const waveWidth = canvas.width;\n    const waveHeight = canvas.height;\n\n    const totalBars = frequencyData.length;\n    const paddingInner = this.barSpacing;\n    const paddingOuter = 0.01;\n    const availableWidth = waveWidth;\n    const barWidth =\n      availableWidth / (totalBars + (totalBars - 1) * paddingInner);\n\n    ctx.clearRect(0, 0, waveWidth, waveHeight);\n    const path = new Path2D();\n\n    frequencyData.forEach((value, i) => {\n      const normalizedValue = value / 255;\n      const barHeight = normalizedValue * waveHeight;\n      const y = (waveHeight - barHeight) / 2;\n      const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));\n      path.rect(x, y, barWidth, barHeight);\n    });\n\n    ctx.fill(path);\n  }\n\n  protected drawBricks(\n    ctx: CanvasRenderingContext2D,\n    frequencyData: Uint8Array,\n  ) {\n    const canvas = ctx.canvas;\n    const waveWidth = canvas.width;\n    const waveHeight = canvas.height;\n    ctx.clearRect(0, 0, waveWidth, waveHeight);\n    const path = new Path2D();\n\n    const columnWidth = waveWidth / frequencyData.length;\n    const boxSize = columnWidth * 0.9;\n    const verticalGap = boxSize * 0.2; // Add spacing between bricks\n    const maxBricks = Math.floor(waveHeight / (boxSize + verticalGap)); // Account for gaps in height calculation\n\n    frequencyData.forEach((value, i) => {\n      const normalizedValue = value / 255;\n      const brickCount = Math.floor(normalizedValue * maxBricks);\n\n      for (let j = 0; j < brickCount; j++) {\n        const x = columnWidth * i;\n        const y = waveHeight - (j + 1) * (boxSize + verticalGap); // Include gap in position calculation\n        path.rect(x, y, boxSize, boxSize);\n      }\n    });\n\n    ctx.fill(path);\n  }\n\n  protected drawRoundBars(\n    ctx: CanvasRenderingContext2D,\n    frequencyData: Uint8Array,\n  ) {\n    const canvas = ctx.canvas;\n    const waveWidth = canvas.width;\n    const waveHeight = canvas.height;\n\n    // Similar padding calculation as drawBars\n    const totalBars = frequencyData.length;\n    const paddingInner = this.barSpacing;\n    const paddingOuter = 0.01;\n    const availableWidth = waveWidth;\n    const barWidth =\n      availableWidth / (totalBars + (totalBars - 1) * paddingInner);\n\n    ctx.clearRect(0, 0, waveWidth, waveHeight);\n\n    // Create a single Path2D object for all rounded bars\n    const path = new Path2D();\n\n    frequencyData.forEach((value, i) => {\n      const normalizedValue = value / 255;\n      const height = normalizedValue * waveHeight; // Use full wave height like in drawBars\n      const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));\n      const y = (waveHeight - height) / 2; // Center vertically\n\n      // Add rounded rectangle to path\n      path.roundRect(x, y, barWidth, height, barWidth / 2);\n    });\n\n    // Single fill operation for all bars\n    ctx.fill(path);\n  }\n\n  protected drawLine(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {\n    const canvas = ctx.canvas;\n    const waveWidth = canvas.width;\n    const waveHeight = canvas.height;\n\n    ctx.clearRect(0, 0, waveWidth, waveHeight);\n    const path = new Path2D();\n\n    // Sample fewer points to make sharp angles more visible\n    const sampleRate = 1; // Only use every 4th point\n\n    for (let i = 0; i < frequencyData.length; i += sampleRate) {\n      const x = (i / frequencyData.length) * waveWidth;\n      const y = (1 - (frequencyData[i] ?? 0) / 255) * waveHeight;\n\n      if (i === 0) {\n        path.moveTo(x, y);\n      } else {\n        path.lineTo(x, y);\n      }\n    }\n    // Ensure we draw to the end\n    const lastX = waveWidth;\n    const lastY =\n      (1 - (frequencyData[frequencyData.length - 1] ?? 0) / 255) * waveHeight;\n    path.lineTo(lastX, lastY);\n\n    ctx.lineWidth = this.lineWidth;\n    ctx.stroke(path);\n  }\n\n  protected drawCurve(\n    ctx: CanvasRenderingContext2D,\n    frequencyData: Uint8Array,\n  ) {\n    const canvas = ctx.canvas;\n    const waveWidth = canvas.width;\n    const waveHeight = canvas.height;\n\n    ctx.clearRect(0, 0, waveWidth, waveHeight);\n    const path = new Path2D();\n\n    // Draw smooth curves between points using quadratic curves\n    frequencyData.forEach((value, i) => {\n      const x = (i / frequencyData.length) * waveWidth;\n      const y = (1 - value / 255) * waveHeight;\n\n      if (i === 0) {\n        path.moveTo(x, y);\n      } else {\n        const prevX = ((i - 1) / frequencyData.length) * waveWidth;\n        const prevY = (1 - (frequencyData[i - 1] ?? 0) / 255) * waveHeight;\n        const xc = (prevX + x) / 2;\n        const yc = (prevY + y) / 2;\n        path.quadraticCurveTo(prevX, prevY, xc, yc);\n      }\n    });\n\n    ctx.lineWidth = this.lineWidth;\n    ctx.stroke(path);\n  }\n\n  protected drawPixel(\n    ctx: CanvasRenderingContext2D,\n    frequencyData: Uint8Array,\n  ) {\n    const canvas = ctx.canvas;\n    const waveWidth = canvas.width;\n    const waveHeight = canvas.height;\n    const baseline = waveHeight / 2;\n    const barWidth = waveWidth / frequencyData.length;\n\n    ctx.clearRect(0, 0, waveWidth, waveHeight);\n    const path = new Path2D();\n\n    frequencyData.forEach((value, i) => {\n      const normalizedValue = value / 255;\n      const x = i * (waveWidth / frequencyData.length);\n      const barHeight = normalizedValue * (waveHeight / 2); // Half height since we extend both ways\n      const y = baseline - barHeight;\n      path.rect(x, y, barWidth, barHeight * 2); // Double height to extend both ways\n    });\n\n    ctx.fill(path);\n  }\n\n  protected drawWave(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {\n    const canvas = ctx.canvas;\n    const waveWidth = canvas.width;\n    const waveHeight = canvas.height;\n    const paddingOuter = 0.01;\n    const availableWidth = waveWidth * (1 - 2 * paddingOuter);\n    const startX = waveWidth * paddingOuter;\n\n    ctx.clearRect(0, 0, waveWidth, waveHeight);\n    const path = new Path2D();\n\n    // Draw top curve\n    const firstValue = Math.min(((frequencyData[0] ?? 0) / 255) * 2, 1);\n    const firstY = (waveHeight - firstValue * waveHeight) / 2;\n    path.moveTo(startX, firstY);\n\n    // Draw top half\n    frequencyData.forEach((value, i) => {\n      const normalizedValue = Math.min((value / 255) * 2, 1);\n      const x = startX + (i / (frequencyData.length - 1)) * availableWidth;\n      const barHeight = normalizedValue * waveHeight;\n      const y = (waveHeight - barHeight) / 2;\n\n      if (i === 0) {\n        path.moveTo(x, y);\n      } else {\n        const prevX =\n          startX + ((i - 1) / (frequencyData.length - 1)) * availableWidth;\n        const prevValue = Math.min(((frequencyData[i - 1] ?? 0) / 255) * 2, 1);\n        const prevBarHeight = prevValue * waveHeight;\n        const prevY = (waveHeight - prevBarHeight) / 2;\n        const xc = (prevX + x) / 2;\n        const yc = (prevY + y) / 2;\n        path.quadraticCurveTo(prevX, prevY, xc, yc);\n      }\n    });\n\n    // Draw bottom half\n    for (let i = frequencyData.length - 1; i >= 0; i--) {\n      const normalizedValue = Math.min(((frequencyData[i] ?? 0) / 255) * 2, 1);\n      const x = startX + (i / (frequencyData.length - 1)) * availableWidth;\n      const barHeight = normalizedValue * waveHeight;\n      const y = (waveHeight + barHeight) / 2;\n\n      if (i === frequencyData.length - 1) {\n        path.lineTo(x, y);\n      } else {\n        const nextX =\n          startX + ((i + 1) / (frequencyData.length - 1)) * availableWidth;\n        const nextValue = Math.min(((frequencyData[i + 1] ?? 0) / 255) * 2, 1);\n        const nextBarHeight = nextValue * waveHeight;\n        const nextY = (waveHeight + nextBarHeight) / 2;\n        const xc = (nextX + x) / 2;\n        const yc = (nextY + y) / 2;\n        path.quadraticCurveTo(nextX, nextY, xc, yc);\n      }\n    }\n\n    // Close the path with a smooth curve back to start\n    const lastY = (waveHeight + firstValue * waveHeight) / 2;\n    const controlX = startX;\n    const controlY = (lastY + firstY) / 2;\n    path.quadraticCurveTo(controlX, controlY, startX, firstY);\n\n    ctx.fill(path);\n  }\n\n  protected drawSpikes(\n    ctx: CanvasRenderingContext2D,\n    frequencyData: Uint8Array,\n  ) {\n    const canvas = ctx.canvas;\n    const waveWidth = canvas.width;\n    const waveHeight = canvas.height;\n    const paddingOuter = 0.01;\n    const availableWidth = waveWidth * (1 - 2 * paddingOuter);\n    const startX = waveWidth * paddingOuter;\n\n    ctx.clearRect(0, 0, waveWidth, waveHeight);\n    const path = new Path2D();\n\n    // Draw top curve\n    const firstValue = (frequencyData[0] ?? 0) / 255;\n    const firstY = (waveHeight - firstValue * waveHeight) / 2;\n    path.moveTo(startX, firstY);\n\n    // Draw top half\n    frequencyData.forEach((value, i) => {\n      const normalizedValue = Math.min((value / 255) * 2, 1);\n      const x = startX + (i / (frequencyData.length - 1)) * availableWidth;\n      const barHeight = normalizedValue * (waveHeight / 2);\n      const y = (waveHeight - barHeight * 2) / 2;\n\n      if (i === 0) {\n        path.moveTo(x, y);\n      } else {\n        const prevX =\n          startX + ((i - 1) / (frequencyData.length - 1)) * availableWidth;\n        const prevValue = (frequencyData[i - 1] ?? 0) / 255;\n        const prevBarHeight = prevValue * (waveHeight / 2);\n        const prevY = (waveHeight - prevBarHeight * 2) / 2;\n        const xc = (prevX + x) / 2;\n        const yc = (prevY + y) / 2;\n        path.quadraticCurveTo(prevX, prevY, xc, yc);\n      }\n    });\n\n    // Draw bottom half\n    for (let i = frequencyData.length - 1; i >= 0; i--) {\n      const normalizedValue = Math.min(((frequencyData[i] ?? 0) / 255) * 2, 1);\n      const x = startX + (i / (frequencyData.length - 1)) * availableWidth;\n      const barHeight = normalizedValue * (waveHeight / 2);\n      const y = (waveHeight + barHeight * 2) / 2;\n\n      if (i === frequencyData.length - 1) {\n        path.lineTo(x, y);\n      } else {\n        const nextX =\n          startX + ((i + 1) / (frequencyData.length - 1)) * availableWidth;\n        const nextValue = (frequencyData[i + 1] ?? 0) / 255;\n        const nextBarHeight = nextValue * (waveHeight / 2);\n        const nextY = (waveHeight + nextBarHeight * 2) / 2;\n        const xc = (nextX + x) / 2;\n        const yc = (nextY + y) / 2;\n        path.quadraticCurveTo(nextX, nextY, xc, yc);\n      }\n    }\n\n    // Close the path with a smooth curve\n    const lastY = (waveHeight + firstValue * waveHeight) / 2;\n    const controlX = startX;\n    const controlY = (lastY + firstY) / 2;\n    path.quadraticCurveTo(controlX, controlY, startX, firstY);\n\n    ctx.fill(path);\n  }\n\n  frameTask = new Task(this, {\n    autoRun: false,\n    args: () => {\n      return [\n        this.targetElement,\n        this.targetElement?.frequencyDataTask.value,\n      ] as const;\n    },\n    task: async () => {\n      if (!this.targetElement) return;\n      await this.targetElement.frequencyDataTask.taskComplete;\n      this.ctx ||= this.initCanvas();\n      const ctx = this.ctx;\n      if (!ctx) return;\n\n      const frequencyData = this.targetElement.frequencyDataTask.value;\n      const byteTimeData = this.targetElement.byteTimeDomainTask.value;\n      if (!frequencyData || !byteTimeData) return;\n\n      ctx.save();\n      if (this.color === \"currentColor\") {\n        const computedStyle = getComputedStyle(this);\n        const currentColor = computedStyle.color;\n        ctx.strokeStyle = currentColor;\n        ctx.fillStyle = currentColor;\n      } else {\n        ctx.strokeStyle = this.color;\n        ctx.fillStyle = this.color;\n      }\n\n      switch (this.mode) {\n        case \"bars\":\n          this.drawBars(ctx, frequencyData);\n          break;\n        case \"bricks\":\n          this.drawBricks(ctx, frequencyData);\n          break;\n        case \"line\":\n          this.drawLine(ctx, byteTimeData);\n          break;\n        case \"curve\":\n          this.drawCurve(ctx, byteTimeData);\n          break;\n        case \"pixel\":\n          this.drawPixel(ctx, frequencyData);\n          break;\n        case \"wave\":\n          this.drawWave(ctx, frequencyData);\n          break;\n        case \"spikes\":\n          this.drawSpikes(ctx, frequencyData);\n          break;\n        case \"roundBars\":\n          this.drawRoundBars(ctx, frequencyData);\n          break;\n      }\n\n      ctx.restore();\n    },\n  });\n\n  get durationMs() {\n    if (!this.targetElement) return 0;\n    return this.targetElement.durationMs;\n  }\n\n  protected updated(changedProperties: PropertyValueMap<this>): void {\n    super.updated(changedProperties);\n\n    // Trigger a redraw if any property changes\n    if (changedProperties.size > 0) {\n      // Request a new frame\n      this.frameTask.run();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-waveform\": EFWaveform & Element;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAcO,uBAAMA,qBAAmB,WAAW,QAAQ,WAAW,CAAC,CAAC;;;mBAiB1B,WAAW;aACA;uBACE;cAqBlC;eAGP;gBAGC;oBAGI;uBAG6B;mBAG9B;0BAEyB,IAAI,iBAAiB,KAAK;mBA0YnD,IAAI,KAAK,MAAM;GACzB,SAAS;GACT,YAAY;AACV,WAAO,CACL,KAAK,eACL,KAAK,eAAe,kBAAkB,MACvC;;GAEH,MAAM,YAAY;AAChB,QAAI,CAAC,KAAK,cAAe;AACzB,UAAM,KAAK,cAAc,kBAAkB;AAC3C,SAAK,QAAQ,KAAK,YAAY;IAC9B,MAAM,MAAM,KAAK;AACjB,QAAI,CAAC,IAAK;IAEV,MAAM,gBAAgB,KAAK,cAAc,kBAAkB;IAC3D,MAAM,eAAe,KAAK,cAAc,mBAAmB;AAC3D,QAAI,CAAC,iBAAiB,CAAC,aAAc;AAErC,QAAI,MAAM;AACV,QAAI,KAAK,UAAU,gBAAgB;KAEjC,MAAM,eADgB,iBAAiB,KAAK,CACT;AACnC,SAAI,cAAc;AAClB,SAAI,YAAY;WACX;AACL,SAAI,cAAc,KAAK;AACvB,SAAI,YAAY,KAAK;;AAGvB,YAAQ,KAAK,MAAb;KACE,KAAK;AACH,WAAK,SAAS,KAAK,cAAc;AACjC;KACF,KAAK;AACH,WAAK,WAAW,KAAK,cAAc;AACnC;KACF,KAAK;AACH,WAAK,SAAS,KAAK,aAAa;AAChC;KACF,KAAK;AACH,WAAK,UAAU,KAAK,aAAa;AACjC;KACF,KAAK;AACH,WAAK,UAAU,KAAK,cAAc;AAClC;KACF,KAAK;AACH,WAAK,SAAS,KAAK,cAAc;AACjC;KACF,KAAK;AACH,WAAK,WAAW,KAAK,cAAc;AACnC;KACF,KAAK;AACH,WAAK,cAAc,KAAK,cAAc;AACtC;;AAGJ,QAAI,SAAS;;GAEhB,CAAC;;;gBA7fc,GAAG;;;;;;;;;;;;;;;;CAuBnB,SAAS;AACP,SAAO,IAAI,WAAW,IAAI,KAAK,UAAU,CAAC;;CAkC5C,oBAAoB;AAClB,QAAM,mBAAmB;AACzB,MAAI;AACF,OAAI,KAAK,cACP,KAAI,sBAAsB,KAAK,eAAe,KAAK;WAE9C,QAAQ;AAOjB,OAAK,iBAAiB,IAAI,qBAAqB;AAC7C,QAAK,cAAc;IACnB;AAGF,OAAK,eAAe,QAAQ,KAAK;AAGjC,OAAK,mBAAmB,IAAI,kBAAkB,kBAAkB;AAC9D,QAAK,MAAM,YAAY,cACrB,KAAI,SAAS,SAAS,aACpB,MAAK,UAAU,KAAK;IAGxB;AAGF,OAAK,iBAAiB,QAAQ,MAAM,EAAE,YAAY,MAAM,CAAC;AAEzD,MAAI,CAAC,cAAc,EAAE;AACnB,QAAK,gBAAgB,IAAI,iBAAiB,CAAC,QAAQ,QAAQ;AACzD,SAAK,UAAU,KAAK;KACpB;AACF,QAAK,cAAc,OAAO,KAAK;;;CAInC,uBAAuB;AACrB,QAAM,sBAAsB;AAE5B,OAAK,gBAAgB,YAAY;AACjC,OAAK,kBAAkB,YAAY;AACnC,OAAK,eAAe,QAAQ;;CAG9B,AAAQ,eAAe;AACrB,OAAK,MAAM,KAAK,YAAY;AAC5B,MAAI,KAAK,IACP,MAAK,UAAU,KAAK;;CAIxB,AAAU,aAAa;EACrB,MAAM,SAAS,KAAK,UAAU;AAC9B,MAAI,CAAC,OAAQ,QAAO;EAEpB,MAAM,OAAO;GACX,OAAO,KAAK;GACZ,QAAQ,KAAK;GACd;EACD,MAAM,MAAM,OAAO;AAEnB,SAAO,MAAM,QAAQ,GAAG,KAAK,MAAM;AACnC,SAAO,MAAM,SAAS,GAAG,KAAK,OAAO;AAErC,SAAO,QAAQ,KAAK,QAAQ;AAC5B,SAAO,SAAS,KAAK,SAAS;EAE9B,MAAM,MAAM,OAAO,WAAW,KAAK;AACnC,MAAI,CAAC,IAAK,QAAO;AACjB,MAAI,OAAO;AAGX,SAAO;;CAGT,AAAU,SAAS,KAA+B,eAA2B;EAC3E,MAAM,SAAS,IAAI;EACnB,MAAM,YAAY,OAAO;EACzB,MAAM,aAAa,OAAO;EAE1B,MAAM,YAAY,cAAc;EAChC,MAAM,eAAe,KAAK;EAC1B,MAAM,eAAe;EAErB,MAAM,WADiB,aAEH,aAAa,YAAY,KAAK;AAElD,MAAI,UAAU,GAAG,GAAG,WAAW,WAAW;EAC1C,MAAM,OAAO,IAAI,QAAQ;AAEzB,gBAAc,SAAS,OAAO,MAAM;GAElC,MAAM,YADkB,QAAQ,MACI;GACpC,MAAM,KAAK,aAAa,aAAa;GACrC,MAAM,IAAI,YAAY,eAAe,KAAK,YAAY,IAAI;AAC1D,QAAK,KAAK,GAAG,GAAG,UAAU,UAAU;IACpC;AAEF,MAAI,KAAK,KAAK;;CAGhB,AAAU,WACR,KACA,eACA;EACA,MAAM,SAAS,IAAI;EACnB,MAAM,YAAY,OAAO;EACzB,MAAM,aAAa,OAAO;AAC1B,MAAI,UAAU,GAAG,GAAG,WAAW,WAAW;EAC1C,MAAM,OAAO,IAAI,QAAQ;EAEzB,MAAM,cAAc,YAAY,cAAc;EAC9C,MAAM,UAAU,cAAc;EAC9B,MAAM,cAAc,UAAU;EAC9B,MAAM,YAAY,KAAK,MAAM,cAAc,UAAU,aAAa;AAElE,gBAAc,SAAS,OAAO,MAAM;GAClC,MAAM,kBAAkB,QAAQ;GAChC,MAAM,aAAa,KAAK,MAAM,kBAAkB,UAAU;AAE1D,QAAK,IAAI,IAAI,GAAG,IAAI,YAAY,KAAK;IACnC,MAAM,IAAI,cAAc;IACxB,MAAM,IAAI,cAAc,IAAI,MAAM,UAAU;AAC5C,SAAK,KAAK,GAAG,GAAG,SAAS,QAAQ;;IAEnC;AAEF,MAAI,KAAK,KAAK;;CAGhB,AAAU,cACR,KACA,eACA;EACA,MAAM,SAAS,IAAI;EACnB,MAAM,YAAY,OAAO;EACzB,MAAM,aAAa,OAAO;EAG1B,MAAM,YAAY,cAAc;EAChC,MAAM,eAAe,KAAK;EAC1B,MAAM,eAAe;EAErB,MAAM,WADiB,aAEH,aAAa,YAAY,KAAK;AAElD,MAAI,UAAU,GAAG,GAAG,WAAW,WAAW;EAG1C,MAAM,OAAO,IAAI,QAAQ;AAEzB,gBAAc,SAAS,OAAO,MAAM;GAElC,MAAM,SADkB,QAAQ,MACC;GACjC,MAAM,IAAI,YAAY,eAAe,KAAK,YAAY,IAAI;GAC1D,MAAM,KAAK,aAAa,UAAU;AAGlC,QAAK,UAAU,GAAG,GAAG,UAAU,QAAQ,WAAW,EAAE;IACpD;AAGF,MAAI,KAAK,KAAK;;CAGhB,AAAU,SAAS,KAA+B,eAA2B;EAC3E,MAAM,SAAS,IAAI;EACnB,MAAM,YAAY,OAAO;EACzB,MAAM,aAAa,OAAO;AAE1B,MAAI,UAAU,GAAG,GAAG,WAAW,WAAW;EAC1C,MAAM,OAAO,IAAI,QAAQ;EAGzB,MAAM,aAAa;AAEnB,OAAK,IAAI,IAAI,GAAG,IAAI,cAAc,QAAQ,KAAK,YAAY;GACzD,MAAM,IAAK,IAAI,cAAc,SAAU;GACvC,MAAM,KAAK,KAAK,cAAc,MAAM,KAAK,OAAO;AAEhD,OAAI,MAAM,EACR,MAAK,OAAO,GAAG,EAAE;OAEjB,MAAK,OAAO,GAAG,EAAE;;EAIrB,MAAM,QAAQ;EACd,MAAM,SACH,KAAK,cAAc,cAAc,SAAS,MAAM,KAAK,OAAO;AAC/D,OAAK,OAAO,OAAO,MAAM;AAEzB,MAAI,YAAY,KAAK;AACrB,MAAI,OAAO,KAAK;;CAGlB,AAAU,UACR,KACA,eACA;EACA,MAAM,SAAS,IAAI;EACnB,MAAM,YAAY,OAAO;EACzB,MAAM,aAAa,OAAO;AAE1B,MAAI,UAAU,GAAG,GAAG,WAAW,WAAW;EAC1C,MAAM,OAAO,IAAI,QAAQ;AAGzB,gBAAc,SAAS,OAAO,MAAM;GAClC,MAAM,IAAK,IAAI,cAAc,SAAU;GACvC,MAAM,KAAK,IAAI,QAAQ,OAAO;AAE9B,OAAI,MAAM,EACR,MAAK,OAAO,GAAG,EAAE;QACZ;IACL,MAAM,SAAU,IAAI,KAAK,cAAc,SAAU;IACjD,MAAM,SAAS,KAAK,cAAc,IAAI,MAAM,KAAK,OAAO;IACxD,MAAM,MAAM,QAAQ,KAAK;IACzB,MAAM,MAAM,QAAQ,KAAK;AACzB,SAAK,iBAAiB,OAAO,OAAO,IAAI,GAAG;;IAE7C;AAEF,MAAI,YAAY,KAAK;AACrB,MAAI,OAAO,KAAK;;CAGlB,AAAU,UACR,KACA,eACA;EACA,MAAM,SAAS,IAAI;EACnB,MAAM,YAAY,OAAO;EACzB,MAAM,aAAa,OAAO;EAC1B,MAAM,WAAW,aAAa;EAC9B,MAAM,WAAW,YAAY,cAAc;AAE3C,MAAI,UAAU,GAAG,GAAG,WAAW,WAAW;EAC1C,MAAM,OAAO,IAAI,QAAQ;AAEzB,gBAAc,SAAS,OAAO,MAAM;GAClC,MAAM,kBAAkB,QAAQ;GAChC,MAAM,IAAI,KAAK,YAAY,cAAc;GACzC,MAAM,YAAY,mBAAmB,aAAa;GAClD,MAAM,IAAI,WAAW;AACrB,QAAK,KAAK,GAAG,GAAG,UAAU,YAAY,EAAE;IACxC;AAEF,MAAI,KAAK,KAAK;;CAGhB,AAAU,SAAS,KAA+B,eAA2B;EAC3E,MAAM,SAAS,IAAI;EACnB,MAAM,YAAY,OAAO;EACzB,MAAM,aAAa,OAAO;EAC1B,MAAM,eAAe;EACrB,MAAM,iBAAiB,aAAa,IAAI,IAAI;EAC5C,MAAM,SAAS,YAAY;AAE3B,MAAI,UAAU,GAAG,GAAG,WAAW,WAAW;EAC1C,MAAM,OAAO,IAAI,QAAQ;EAGzB,MAAM,aAAa,KAAK,KAAM,cAAc,MAAM,KAAK,MAAO,GAAG,EAAE;EACnE,MAAM,UAAU,aAAa,aAAa,cAAc;AACxD,OAAK,OAAO,QAAQ,OAAO;AAG3B,gBAAc,SAAS,OAAO,MAAM;GAClC,MAAM,kBAAkB,KAAK,IAAK,QAAQ,MAAO,GAAG,EAAE;GACtD,MAAM,IAAI,SAAU,KAAK,cAAc,SAAS,KAAM;GAEtD,MAAM,KAAK,aADO,kBAAkB,cACC;AAErC,OAAI,MAAM,EACR,MAAK,OAAO,GAAG,EAAE;QACZ;IACL,MAAM,QACJ,UAAW,IAAI,MAAM,cAAc,SAAS,KAAM;IAGpD,MAAM,SAAS,aAFG,KAAK,KAAM,cAAc,IAAI,MAAM,KAAK,MAAO,GAAG,EAAE,GACpC,cACW;IAC7C,MAAM,MAAM,QAAQ,KAAK;IACzB,MAAM,MAAM,QAAQ,KAAK;AACzB,SAAK,iBAAiB,OAAO,OAAO,IAAI,GAAG;;IAE7C;AAGF,OAAK,IAAI,IAAI,cAAc,SAAS,GAAG,KAAK,GAAG,KAAK;GAClD,MAAM,kBAAkB,KAAK,KAAM,cAAc,MAAM,KAAK,MAAO,GAAG,EAAE;GACxE,MAAM,IAAI,SAAU,KAAK,cAAc,SAAS,KAAM;GAEtD,MAAM,KAAK,aADO,kBAAkB,cACC;AAErC,OAAI,MAAM,cAAc,SAAS,EAC/B,MAAK,OAAO,GAAG,EAAE;QACZ;IACL,MAAM,QACJ,UAAW,IAAI,MAAM,cAAc,SAAS,KAAM;IAGpD,MAAM,SAAS,aAFG,KAAK,KAAM,cAAc,IAAI,MAAM,KAAK,MAAO,GAAG,EAAE,GACpC,cACW;IAC7C,MAAM,MAAM,QAAQ,KAAK;IACzB,MAAM,MAAM,QAAQ,KAAK;AACzB,SAAK,iBAAiB,OAAO,OAAO,IAAI,GAAG;;;EAK/C,MAAM,SAAS,aAAa,aAAa,cAAc;EACvD,MAAM,WAAW;EACjB,MAAM,YAAY,QAAQ,UAAU;AACpC,OAAK,iBAAiB,UAAU,UAAU,QAAQ,OAAO;AAEzD,MAAI,KAAK,KAAK;;CAGhB,AAAU,WACR,KACA,eACA;EACA,MAAM,SAAS,IAAI;EACnB,MAAM,YAAY,OAAO;EACzB,MAAM,aAAa,OAAO;EAC1B,MAAM,eAAe;EACrB,MAAM,iBAAiB,aAAa,IAAI,IAAI;EAC5C,MAAM,SAAS,YAAY;AAE3B,MAAI,UAAU,GAAG,GAAG,WAAW,WAAW;EAC1C,MAAM,OAAO,IAAI,QAAQ;EAGzB,MAAM,cAAc,cAAc,MAAM,KAAK;EAC7C,MAAM,UAAU,aAAa,aAAa,cAAc;AACxD,OAAK,OAAO,QAAQ,OAAO;AAG3B,gBAAc,SAAS,OAAO,MAAM;GAClC,MAAM,kBAAkB,KAAK,IAAK,QAAQ,MAAO,GAAG,EAAE;GACtD,MAAM,IAAI,SAAU,KAAK,cAAc,SAAS,KAAM;GAEtD,MAAM,KAAK,aADO,mBAAmB,aAAa,KACd,KAAK;AAEzC,OAAI,MAAM,EACR,MAAK,OAAO,GAAG,EAAE;QACZ;IACL,MAAM,QACJ,UAAW,IAAI,MAAM,cAAc,SAAS,KAAM;IAGpD,MAAM,SAAS,cAFI,cAAc,IAAI,MAAM,KAAK,OACb,aAAa,KACJ,KAAK;IACjD,MAAM,MAAM,QAAQ,KAAK;IACzB,MAAM,MAAM,QAAQ,KAAK;AACzB,SAAK,iBAAiB,OAAO,OAAO,IAAI,GAAG;;IAE7C;AAGF,OAAK,IAAI,IAAI,cAAc,SAAS,GAAG,KAAK,GAAG,KAAK;GAClD,MAAM,kBAAkB,KAAK,KAAM,cAAc,MAAM,KAAK,MAAO,GAAG,EAAE;GACxE,MAAM,IAAI,SAAU,KAAK,cAAc,SAAS,KAAM;GAEtD,MAAM,KAAK,aADO,mBAAmB,aAAa,KACd,KAAK;AAEzC,OAAI,MAAM,cAAc,SAAS,EAC/B,MAAK,OAAO,GAAG,EAAE;QACZ;IACL,MAAM,QACJ,UAAW,IAAI,MAAM,cAAc,SAAS,KAAM;IAGpD,MAAM,SAAS,cAFI,cAAc,IAAI,MAAM,KAAK,OACb,aAAa,KACJ,KAAK;IACjD,MAAM,MAAM,QAAQ,KAAK;IACzB,MAAM,MAAM,QAAQ,KAAK;AACzB,SAAK,iBAAiB,OAAO,OAAO,IAAI,GAAG;;;EAK/C,MAAM,SAAS,aAAa,aAAa,cAAc;EACvD,MAAM,WAAW;EACjB,MAAM,YAAY,QAAQ,UAAU;AACpC,OAAK,iBAAiB,UAAU,UAAU,QAAQ,OAAO;AAEzD,MAAI,KAAK,KAAK;;CAgEhB,IAAI,aAAa;AACf,MAAI,CAAC,KAAK,cAAe,QAAO;AAChC,SAAO,KAAK,cAAc;;CAG5B,AAAU,QAAQ,mBAAiD;AACjE,QAAM,QAAQ,kBAAkB;AAGhC,MAAI,kBAAkB,OAAO,EAE3B,MAAK,UAAU,KAAK;;;YA/evB,SAAS;CACR,MAAM;CACN,WAAW;CACZ,CAAC;YAWD,SAAS,EAAE,MAAM,QAAQ,CAAC;YAG1B,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC;YAGzC,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAe,CAAC;YAGpD,OAAO;YAGP,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAc,CAAC;yBAvDrD,cAAc,cAAc"}

package/dist/elements/FetchMixin.d.ts

@@ -1,7 +1,9 @@
-import { LitElement } from 'lit';
-export declare class FetchMixinInterface {
-    fetch: typeof fetch;
+import { LitElement } from "lit";
+
+//#region src/elements/FetchMixin.d.ts
+declare class FetchMixinInterface {
+  fetch: typeof fetch;
 }
-type Constructor<T = {}> = new (...args: any[]) => T;
-export declare function FetchMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<FetchMixinInterface> & T;
-export {};
+//#endregion
+export { FetchMixinInterface };
+//# sourceMappingURL=FetchMixin.d.ts.map

package/dist/elements/FetchMixin.js

@@ -1,3 +1,4 @@
+//#region src/elements/FetchMixin.ts
 function FetchMixin(superClass) {
 	class FetchElement extends superClass {
 		constructor(..._args) {
@@ -20,4 +21,7 @@ function FetchMixin(superClass) {
 	}
 	return FetchElement;
 }
+
+//#endregion
 export { FetchMixin };
+//# sourceMappingURL=FetchMixin.js.map

package/dist/elements/FetchMixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FetchMixin.js","names":[],"sources":["../../src/elements/FetchMixin.ts"],"sourcesContent":["import type { LitElement } from \"lit\";\n\nexport declare class FetchMixinInterface {\n  fetch: typeof fetch;\n}\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\nexport function FetchMixin<T extends Constructor<LitElement>>(superClass: T) {\n  class FetchElement extends superClass {\n    fetch = (url: string, init?: RequestInit): Promise<Response> => {\n      try {\n        // Look for context providers up the DOM tree\n        const workbench = this.closest(\"ef-workbench\") as any;\n        if (workbench?.fetch) {\n          return workbench.fetch(url, init);\n        }\n\n        const preview = this.closest(\"ef-preview\") as any;\n        if (preview?.fetch) {\n          return preview.fetch(url, init);\n        }\n\n        const configuration = this.closest(\"ef-configuration\") as any;\n        if (configuration?.fetch) {\n          return configuration.fetch(url, init);\n        }\n\n        // Fallback to window.fetch\n        return window.fetch(url, init);\n      } catch (error) {\n        console.error(\"FetchMixin error\", url, error);\n        throw error;\n      }\n    };\n  }\n\n  return FetchElement as Constructor<FetchMixinInterface> & T;\n}\n"],"mappings":";AAOA,SAAgB,WAA8C,YAAe;CAC3E,MAAM,qBAAqB,WAAW;;;iBAC3B,KAAa,SAA0C;AAC9D,QAAI;KAEF,MAAM,YAAY,KAAK,QAAQ,eAAe;AAC9C,SAAI,WAAW,MACb,QAAO,UAAU,MAAM,KAAK,KAAK;KAGnC,MAAM,UAAU,KAAK,QAAQ,aAAa;AAC1C,SAAI,SAAS,MACX,QAAO,QAAQ,MAAM,KAAK,KAAK;KAGjC,MAAM,gBAAgB,KAAK,QAAQ,mBAAmB;AACtD,SAAI,eAAe,MACjB,QAAO,cAAc,MAAM,KAAK,KAAK;AAIvC,YAAO,OAAO,MAAM,KAAK,KAAK;aACvB,OAAO;AACd,aAAQ,MAAM,oBAAoB,KAAK,MAAM;AAC7C,WAAM;;;;;AAKZ,QAAO"}