@editframe/elements 0.30.1-beta.0 → 0.31.0-beta.0

package/dist/gui/timeline/tracks/TrackItem.js

@@ -0,0 +1,269 @@
+import { __decorate } from "../../../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { focusContext } from "../../focusContext.js";
+import { focusedElementContext } from "../../focusedElementContext.js";
+import { TWMixin } from "../../TWMixin2.js";
+import { EFAudio } from "../../../elements/EFAudio.js";
+import { EFVideo } from "../../../elements/EFVideo.js";
+import { EFImage } from "../../../elements/EFImage.js";
+import { EFText } from "../../../elements/EFText.js";
+import { ICONS, phosphorIcon } from "../../icons.js";
+import "../TrimHandles.js";
+import { EFTimegroup } from "../../../elements/EFTimegroup.js";
+import { consume } from "@lit/context";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+
+//#region src/gui/timeline/tracks/TrackItem.ts
+var ElementTrackController = class {
+	constructor(host, track) {
+		this.host = host;
+		this.track = track;
+		this.lastDuration = 0;
+		this.checkDuration = () => {
+			const currentDuration = this.host.durationMs ?? 0;
+			if (currentDuration !== this.lastDuration) {
+				this.lastDuration = currentDuration;
+				this.track.requestUpdate();
+			}
+			if (currentDuration === 0) this.durationCheckFrame = requestAnimationFrame(this.checkDuration);
+		};
+		this.host.addController(this);
+	}
+	remove() {
+		this.host.removeController(this);
+		if (this.durationCheckFrame) cancelAnimationFrame(this.durationCheckFrame);
+	}
+	hostDisconnected() {
+		this.host.removeController(this);
+		if (this.durationCheckFrame) cancelAnimationFrame(this.durationCheckFrame);
+	}
+	hostConnected() {
+		this.lastDuration = this.host.durationMs ?? 0;
+		this.checkDuration();
+	}
+	hostUpdated() {}
+};
+let TrackItem = class TrackItem$1 extends TWMixin(LitElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.element = new EFTimegroup();
+		this.pixelsPerMs = .04;
+		this.enableTrim = false;
+		this.useAbsolutePosition = false;
+	}
+	static {
+		this.styles = [css`
+      :host {
+        display: block;
+      }
+      .trim-container {
+        position: relative;
+        border-radius: 3px;
+        transition: background-color 0.15s ease, box-shadow 0.15s ease;
+      }
+      
+      :host(:hover) .trim-container {
+        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
+      }
+      
+      :host([data-focused]) .trim-container {
+        box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.6);
+      }
+    `];
+	}
+	get isFocused() {
+		return this.element && this.focusContext?.focusedElement === this.element;
+	}
+	/**
+	* Get element type for styling and icons
+	*/
+	getElementType() {
+		if (this.element.tagName === "EF-CAPTIONS" || this.element.tagName?.toLowerCase() === "ef-captions") return "captions";
+		if (this.element instanceof EFVideo) return "video";
+		if (this.element instanceof EFAudio) return "audio";
+		if (this.element instanceof EFImage) return "image";
+		if (this.element instanceof EFText) return "text";
+		if (this.element instanceof EFTimegroup) return "timegroup";
+		return "unknown";
+	}
+	/**
+	* Get color for element type
+	*/
+	getElementTypeColor() {
+		switch (this.getElementType()) {
+			case "video": return "rgb(59, 130, 246)";
+			case "audio": return "rgb(34, 197, 94)";
+			case "image": return "rgb(168, 85, 247)";
+			case "text": return "rgb(249, 115, 22)";
+			case "captions": return "rgb(34, 197, 94)";
+			case "timegroup": return "rgb(148, 163, 184)";
+			default: return "rgb(148, 163, 184)";
+		}
+	}
+	/**
+	* Get icon for element type
+	*/
+	getElementIcon() {
+		switch (this.getElementType()) {
+			case "video": return phosphorIcon(ICONS.filmStrip, 14);
+			case "audio": return phosphorIcon(ICONS.speakerHigh, 14);
+			case "image": return phosphorIcon(ICONS.image, 14);
+			case "text": return phosphorIcon(ICONS.textT, 14);
+			case "captions": return phosphorIcon(ICONS.subtitles, 14);
+			case "timegroup": return phosphorIcon(ICONS.filmSlate, 14);
+			default: return nothing;
+		}
+	}
+	/**
+	* Format duration for display
+	*/
+	formatDuration(ms) {
+		if (ms < 1e3) return `${Math.round(ms)}ms`;
+		return `${(ms / 1e3).toFixed(1)}s`;
+	}
+	/**
+	* Get tooltip text with element info
+	*/
+	getTooltipText() {
+		const elementId = this.element?.id || "";
+		const type = this.getElementType();
+		const duration = this.formatDuration(this.element.durationMs ?? 0);
+		const startTime = this.formatDuration(this.element.startTimeMs ?? 0);
+		const endTime = this.formatDuration((this.element.startTimeMs ?? 0) + (this.element.durationMs ?? 0));
+		const parts = [];
+		if (elementId) parts.push(elementId);
+		parts.push(`${type} • ${duration}`);
+		if (this.element.startTimeMs > 0) parts.push(`${startTime} → ${endTime}`);
+		if (type === "timegroup") {
+			const mode = this.element.mode || "fixed";
+			parts.push(`mode: ${mode}`);
+		}
+		return parts.join(" • ");
+	}
+	get gutterStyles() {
+		const startMs = this.useAbsolutePosition ? this.element.startTimeMs : this.element.startTimeWithinParentMs;
+		const leftOffset = this.useAbsolutePosition ? startMs : startMs - this.element.sourceStartMs;
+		return {
+			position: "relative",
+			left: `${this.pixelsPerMs * leftOffset}px`,
+			width: `${this.pixelsPerMs * (this.element.intrinsicDurationMs ?? this.element.durationMs)}px`
+		};
+	}
+	get trimPortionStyles() {
+		const leftOffset = this.useAbsolutePosition ? 0 : this.element.sourceStartMs;
+		return {
+			width: `${this.pixelsPerMs * this.element.durationMs}px`,
+			left: `${this.pixelsPerMs * leftOffset}px`
+		};
+	}
+	handleTrimChange(e) {
+		const { type, newValueMs } = e.detail;
+		if (type === "start") this.element.trimStartMs = newValueMs;
+		else this.element.trimEndMs = newValueMs;
+		this.dispatchEvent(new CustomEvent("track-trim-change", {
+			detail: {
+				elementId: this.element.id || "",
+				type,
+				newValueMs
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	contents() {
+		return nothing;
+	}
+	animations() {
+		return [];
+	}
+	renderChildren() {
+		return nothing;
+	}
+	render() {
+		const elementId = this.element.id || "";
+		const trimStartMs = this.element.trimStartMs ?? 0;
+		const trimEndMs = this.element.trimEndMs ?? 0;
+		const intrinsicDurationMs = this.element.intrinsicDurationMs ?? this.element.durationMs;
+		const typeColor = this.getElementTypeColor();
+		return html`<div style=${styleMap(this.gutterStyles)}>
+      <div
+        ?data-focused=${this.isFocused}
+        @mouseenter=${() => {
+			if (this.focusContext) this.focusContext.focusedElement = this.element;
+		}}
+        @mouseleave=${() => {
+			if (this.focusContext) this.focusContext.focusedElement = null;
+		}}
+      >
+        <div
+          ?data-focused=${this.isFocused}
+          class="trim-container"
+          style=${styleMap({
+			...this.trimPortionStyles,
+			height: "var(--timeline-track-height, 22px)",
+			backgroundColor: this.isFocused ? "rgba(59, 130, 246, 0.25)" : "rgba(30, 41, 59, 0.8)",
+			borderLeft: `3px solid ${typeColor}`
+		})}
+          title="${this.getTooltipText()}"
+        >
+          ${this.animations()}
+          ${this.contents()}
+          ${this.enableTrim ? html`<ef-trim-handles
+                element-id=${elementId}
+                pixels-per-ms=${this.pixelsPerMs}
+                trim-start-ms=${trimStartMs}
+                trim-end-ms=${trimEndMs}
+                intrinsic-duration-ms=${intrinsicDurationMs}
+                @trim-change=${this.handleTrimChange}
+              ></ef-trim-handles>` : nothing}
+        </div>
+      </div>
+      ${this.renderChildren()}
+    </div>`;
+	}
+	update(changedProperties) {
+		if (changedProperties.has("element") && this.element instanceof LitElement) {
+			this.trackController?.remove();
+			this.trackController = new ElementTrackController(this.element, this);
+		}
+		super.update(changedProperties);
+	}
+};
+__decorate([consume({
+	context: focusContext,
+	subscribe: true
+})], TrackItem.prototype, "focusContext", void 0);
+__decorate([consume({
+	context: focusedElementContext,
+	subscribe: true
+})], TrackItem.prototype, "focusedElement", void 0);
+__decorate([property({
+	type: Object,
+	attribute: false
+})], TrackItem.prototype, "element", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "pixels-per-ms"
+})], TrackItem.prototype, "pixelsPerMs", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "enable-trim"
+})], TrackItem.prototype, "enableTrim", void 0);
+__decorate([property({
+	type: Array,
+	attribute: false
+})], TrackItem.prototype, "hideSelectors", void 0);
+__decorate([property({
+	type: Array,
+	attribute: false
+})], TrackItem.prototype, "showSelectors", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "use-absolute-position"
+})], TrackItem.prototype, "useAbsolutePosition", void 0);
+TrackItem = __decorate([customElement("ef-track-item")], TrackItem);
+
+//#endregion
+export { TrackItem };
+//# sourceMappingURL=TrackItem.js.map

package/dist/gui/timeline/tracks/TrackItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrackItem.js","names":["host: LitElement","track: TrackItem","TrackItem"],"sources":["../../../../src/gui/timeline/tracks/TrackItem.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport {\n  css,\n  html,\n  LitElement,\n  nothing,\n  type PropertyValueMap,\n  type ReactiveController,\n  type TemplateResult,\n} from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nimport {\n  isEFTemporal,\n  type TemporalMixinInterface,\n} from \"../../../elements/EFTemporal.js\";\nimport { EFTimegroup } from \"../../../elements/EFTimegroup.js\";\nimport { EFVideo } from \"../../../elements/EFVideo.js\";\nimport { EFAudio } from \"../../../elements/EFAudio.js\";\nimport { EFImage } from \"../../../elements/EFImage.js\";\nimport { EFText } from \"../../../elements/EFText.js\";\nimport { type FocusContext, focusContext } from \"../../focusContext.js\";\nimport { focusedElementContext } from \"../../focusedElementContext.js\";\nimport { TWMixin } from \"../../TWMixin.js\";\nimport { phosphorIcon, ICONS } from \"../../icons.js\";\nimport \"../TrimHandles.js\";\nimport type { TrimChangeDetail } from \"../TrimHandles.js\";\n\nclass ElementTrackController implements ReactiveController {\n  private lastDuration = 0;\n  private durationCheckFrame?: number;\n\n  constructor(\n    private host: LitElement,\n    private track: TrackItem,\n  ) {\n    this.host.addController(this);\n  }\n\n  remove() {\n    this.host.removeController(this);\n    if (this.durationCheckFrame) {\n      cancelAnimationFrame(this.durationCheckFrame);\n    }\n  }\n\n  hostDisconnected() {\n    this.host.removeController(this);\n    if (this.durationCheckFrame) {\n      cancelAnimationFrame(this.durationCheckFrame);\n    }\n  }\n\n  hostConnected(): void {\n    // Start watching for duration changes\n    this.lastDuration = (this.host as any).durationMs ?? 0;\n    this.checkDuration();\n  }\n\n  private checkDuration = () => {\n    const currentDuration = (this.host as any).durationMs ?? 0;\n    if (currentDuration !== this.lastDuration) {\n      this.lastDuration = currentDuration;\n      // Duration changed - trigger re-render of the track\n      this.track.requestUpdate();\n    }\n    // Keep checking if duration is still 0 (waiting for media to load)\n    if (currentDuration === 0) {\n      this.durationCheckFrame = requestAnimationFrame(this.checkDuration);\n    }\n  };\n\n  hostUpdated(): void {\n    // TEMPORARILY DISABLED: This causes every TrackItem to re-render on every frame\n    // during playback, even though TrackItem doesn't display currentTimeMs.\n    // Duration changes are now handled separately via checkDuration()\n  }\n}\n\nconst CommonEffectKeys = new Set([\n  \"offset\",\n  \"easing\",\n  \"composite\",\n  \"computedOffset\",\n]);\n\n@customElement(\"ef-track-item\")\nexport class TrackItem extends TWMixin(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: block;\n      }\n      .trim-container {\n        position: relative;\n        border-radius: 3px;\n        transition: background-color 0.15s ease, box-shadow 0.15s ease;\n      }\n      \n      :host(:hover) .trim-container {\n        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);\n      }\n      \n      :host([data-focused]) .trim-container {\n        box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.6);\n      }\n    `,\n  ];\n\n  @consume({ context: focusContext, subscribe: true })\n  focusContext?: FocusContext;\n\n  @consume({ context: focusedElementContext, subscribe: true })\n  focusedElement?: HTMLElement | null;\n\n  get isFocused() {\n    return this.element && this.focusContext?.focusedElement === this.element;\n  }\n\n  /**\n   * Get element type for styling and icons\n   */\n  protected getElementType(): \"video\" | \"audio\" | \"image\" | \"text\" | \"timegroup\" | \"captions\" | \"unknown\" {\n    // Check for captions element\n    if ((this.element as any).tagName === \"EF-CAPTIONS\" || \n        (this.element as any).tagName?.toLowerCase() === \"ef-captions\") {\n      return \"captions\";\n    }\n    if (this.element instanceof EFVideo) return \"video\";\n    if (this.element instanceof EFAudio) return \"audio\";\n    if (this.element instanceof EFImage) return \"image\";\n    if (this.element instanceof EFText) return \"text\";\n    if (this.element instanceof EFTimegroup) return \"timegroup\";\n    return \"unknown\";\n  }\n\n  /**\n   * Get color for element type\n   */\n  protected getElementTypeColor(): string {\n    const type = this.getElementType();\n    switch (type) {\n      case \"video\":\n        return \"rgb(59, 130, 246)\"; // Blue\n      case \"audio\":\n        return \"rgb(34, 197, 94)\"; // Green\n      case \"image\":\n        return \"rgb(168, 85, 247)\"; // Purple\n      case \"text\":\n        return \"rgb(249, 115, 22)\"; // Orange\n      case \"captions\":\n        return \"rgb(34, 197, 94)\"; // Green (same as audio, but distinct usage)\n      case \"timegroup\":\n        return \"rgb(148, 163, 184)\"; // Gray\n      default:\n        return \"rgb(148, 163, 184)\"; // Gray\n    }\n  }\n\n  /**\n   * Get icon for element type\n   */\n  protected getElementIcon(): TemplateResult | typeof nothing {\n    const type = this.getElementType();\n    switch (type) {\n      case \"video\":\n        return phosphorIcon(ICONS.filmStrip, 14);\n      case \"audio\":\n        return phosphorIcon(ICONS.speakerHigh, 14);\n      case \"image\":\n        return phosphorIcon(ICONS.image, 14);\n      case \"text\":\n        return phosphorIcon(ICONS.textT, 14);\n      case \"captions\":\n        return phosphorIcon(ICONS.subtitles, 14);\n      case \"timegroup\":\n        return phosphorIcon(ICONS.filmSlate, 14);\n      default:\n        return nothing;\n    }\n  }\n\n  /**\n   * Format duration for display\n   */\n  protected formatDuration(ms: number): string {\n    if (ms < 1000) {\n      return `${Math.round(ms)}ms`;\n    }\n    const seconds = (ms / 1000).toFixed(1);\n    return `${seconds}s`;\n  }\n\n  /**\n   * Get tooltip text with element info\n   */\n  protected getTooltipText(): string {\n    const elementId = (this.element as HTMLElement)?.id || \"\";\n    const type = this.getElementType();\n    const duration = this.formatDuration(this.element.durationMs ?? 0);\n    const startTime = this.formatDuration(this.element.startTimeMs ?? 0);\n    const endTime = this.formatDuration((this.element.startTimeMs ?? 0) + (this.element.durationMs ?? 0));\n    \n    const parts = [];\n    if (elementId) parts.push(elementId);\n    parts.push(`${type} • ${duration}`);\n    if (this.element.startTimeMs > 0) {\n      parts.push(`${startTime} → ${endTime}`);\n    }\n    \n    // Add composition mode for timegroups\n    if (type === \"timegroup\") {\n      const mode = (this.element as any).mode || \"fixed\";\n      parts.push(`mode: ${mode}`);\n    }\n    \n    return parts.join(\" • \");\n  }\n\n  @property({ type: Object, attribute: false })\n  element: TemporalMixinInterface & LitElement = new EFTimegroup();\n\n  @property({ type: Number, attribute: \"pixels-per-ms\" })\n  pixelsPerMs = 0.04;\n\n  @property({ type: Boolean, attribute: \"enable-trim\" })\n  enableTrim = false;\n\n  @property({ type: Array, attribute: false })\n  hideSelectors?: string[];\n\n  @property({ type: Array, attribute: false })\n  showSelectors?: string[];\n\n  /**\n   * When true, positions the track at the element's absolute start time\n   * (startTimeMs) rather than relative to parent (startTimeWithinParentMs).\n   * Used for flat row architectures where each element gets its own row.\n   */\n  @property({ type: Boolean, attribute: \"use-absolute-position\" })\n  useAbsolutePosition = false;\n\n  get gutterStyles() {\n    const startMs = this.useAbsolutePosition\n      ? this.element.startTimeMs\n      : this.element.startTimeWithinParentMs;\n    // When using absolute positioning, don't subtract sourceStartMs - the track container\n    // should be positioned at the element's absolute start time in the timeline.\n    // When using relative positioning, sourceStartMs is already accounted for in startTimeWithinParentMs.\n    const leftOffset = this.useAbsolutePosition\n      ? startMs\n      : startMs - this.element.sourceStartMs;\n    return {\n      position: \"relative\",\n      left: `${this.pixelsPerMs * leftOffset}px`,\n      width: `${this.pixelsPerMs * (this.element.intrinsicDurationMs ?? this.element.durationMs)}px`,\n    };\n  }\n\n  get trimPortionStyles() {\n    // When using absolute positioning, the trim container should start at 0\n    // relative to the gutter (which is already positioned at startTimeMs).\n    // When using relative positioning, we need to offset by sourceStartMs\n    // to show the trimmed portion correctly.\n    const leftOffset = this.useAbsolutePosition\n      ? 0\n      : this.element.sourceStartMs;\n    return {\n      width: `${this.pixelsPerMs * this.element.durationMs}px`,\n      left: `${this.pixelsPerMs * leftOffset}px`,\n    };\n  }\n\n  protected handleTrimChange(e: CustomEvent<TrimChangeDetail>): void {\n    const { type, newValueMs } = e.detail;\n\n    if (type === \"start\") {\n      this.element.trimStartMs = newValueMs;\n    } else {\n      this.element.trimEndMs = newValueMs;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent(\"track-trim-change\", {\n        detail: {\n          elementId: this.element.id || \"\",\n          type,\n          newValueMs,\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  contents(): TemplateResult | typeof nothing {\n    return nothing;\n  }\n\n  animations() {\n    // TEMPORARILY DISABLED: getAnimations() is expensive and called on every render\n    // TODO: Cache animations or only compute when element structure changes\n    return [];\n    \n    // const animations = this.element.getAnimations();\n    // return animations.map((animation) => {\n    //   const effect = animation.effect;\n    //   if (!(effect instanceof KeyframeEffect)) {\n    //     return nothing;\n    //   }\n    //   const start = effect.getTiming().delay ?? 0;\n    //   const duration = effect.getTiming().duration;\n    //   if (duration === null) {\n    //     return nothing;\n    //   }\n    //   const keyframes = effect.getKeyframes();\n    //   const firstKeyframe = keyframes[0];\n    //   if (!firstKeyframe) {\n    //     return nothing;\n    //   }\n    //   const properties = new Set(Object.keys(firstKeyframe));\n    //   for (const key of CommonEffectKeys) {\n    //     properties.delete(key);\n    //   }\n\n    //   return html`<div\n    //     class=\"relative h-[5px] opacity-50\"\n    //     label=\"animation\"\n    //     style=${styleMap({\n    //       left: `${this.pixelsPerMs * start}px`,\n    //       width: `${this.pixelsPerMs * Number(duration)}px`,\n    //       backgroundColor: \"var(--filmstrip-animation-bg)\",\n    //     })}\n    //   >\n    //     ${effect.getKeyframes().map((keyframe) => {\n    //       return html`<div\n    //         class=\"absolute top-0 h-full w-1\"\n    //         style=${styleMap({\n    //           left: `${\n    //             this.pixelsPerMs * keyframe.computedOffset * Number(duration)\n    //           }px`,\n    //           backgroundColor: \"var(--filmstrip-keyframe-bg)\",\n    //         })}\n    //       ></div>`;\n    //     })}\n    //   </div>`;\n    // });\n  }\n\n  renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing {\n    return nothing;\n  }\n\n  render() {\n    const elementId = (this.element as HTMLElement).id || \"\";\n    const trimStartMs = this.element.trimStartMs ?? 0;\n    const trimEndMs = this.element.trimEndMs ?? 0;\n    const intrinsicDurationMs =\n      this.element.intrinsicDurationMs ?? this.element.durationMs;\n\n    const typeColor = this.getElementTypeColor();\n    \n    return html`<div style=${styleMap(this.gutterStyles)}>\n      <div\n        ?data-focused=${this.isFocused}\n        @mouseenter=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = this.element;\n          }\n        }}\n        @mouseleave=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = null;\n          }\n        }}\n      >\n        <div\n          ?data-focused=${this.isFocused}\n          class=\"trim-container\"\n          style=${styleMap({\n            ...this.trimPortionStyles,\n            height: \"var(--timeline-track-height, 22px)\",\n            backgroundColor: this.isFocused\n              ? \"rgba(59, 130, 246, 0.25)\"\n              : \"rgba(30, 41, 59, 0.8)\",\n            borderLeft: `3px solid ${typeColor}`,\n          })}\n          title=\"${this.getTooltipText()}\"\n        >\n          ${this.animations()}\n          ${this.contents()}\n          ${\n            this.enableTrim\n              ? html`<ef-trim-handles\n                element-id=${elementId}\n                pixels-per-ms=${this.pixelsPerMs}\n                trim-start-ms=${trimStartMs}\n                trim-end-ms=${trimEndMs}\n                intrinsic-duration-ms=${intrinsicDurationMs}\n                @trim-change=${this.handleTrimChange}\n              ></ef-trim-handles>`\n              : nothing\n          }\n        </div>\n      </div>\n      ${this.renderChildren()}\n    </div>`;\n  }\n\n  protected trackController?: ElementTrackController;\n\n  update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>) {\n    if (\n      changedProperties.has(\"element\") &&\n      this.element instanceof LitElement\n    ) {\n      this.trackController?.remove();\n      this.trackController = new ElementTrackController(\n        this.element,\n        this,\n      );\n    }\n    super.update(changedProperties);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-track-item\": TrackItem;\n  }\n}\n\n"],"mappings":"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"}

package/dist/gui/timeline/tracks/VideoTrack.js

@@ -0,0 +1,265 @@
+import { __decorate } from "../../../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { EFVideo } from "../../../elements/EFVideo.js";
+import { TrackItem } from "./TrackItem.js";
+import { extractWaveformData } from "./waveformUtils.js";
+import { timelineStateContext } from "../timelineStateContext.js";
+import "../../../elements/EFThumbnailStrip.js";
+import { consume } from "@lit/context";
+import { css, html, nothing } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { createRef, ref } from "lit/directives/ref.js";
+
+//#region src/gui/timeline/tracks/VideoTrack.ts
+/** Padding for virtual rendering */
+const VIRTUAL_RENDER_PADDING_PX = 100;
+/** Height of thumbnail section */
+const THUMBNAIL_HEIGHT = 24;
+/** Height of audio section when present */
+const AUDIO_SECTION_HEIGHT = 14;
+let EFVideoTrack = class EFVideoTrack$1 extends TrackItem {
+	constructor(..._args) {
+		super(..._args);
+		this.audioCanvasRef = createRef();
+		this._waveformData = null;
+		this._hasAudio = false;
+	}
+	static {
+		this.styles = [...TrackItem.styles, css`
+      .video-content {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+      .thumbnail-section {
+        position: relative;
+        flex: 0 0 ${THUMBNAIL_HEIGHT}px;
+        height: ${THUMBNAIL_HEIGHT}px;
+      }
+      ef-thumbnail-strip {
+        height: 100%;
+        border: none;
+        border-radius: 0;
+        background: transparent;
+      }
+      .audio-section {
+        position: relative;
+        flex: 0 0 ${AUDIO_SECTION_HEIGHT}px;
+        height: ${AUDIO_SECTION_HEIGHT}px;
+        background: rgba(0, 0, 0, 0.3);
+        border-top: 1px solid rgba(255, 255, 255, 0.1);
+        overflow: hidden;
+      }
+      .audio-section-canvas {
+        position: absolute;
+        top: 0;
+        height: 100%;
+      }
+    `];
+	}
+	#lastSrc = null;
+	#abortController = null;
+	#renderRequested = false;
+	/**
+	* Check if video has audio and load waveform data
+	*/
+	async #checkAndLoadAudioWaveform() {
+		const video = this.element;
+		const src = video?.src;
+		if (!src || src === this.#lastSrc) return;
+		this.#lastSrc = src;
+		this._hasAudio = false;
+		this._waveformData = null;
+		this.#abortController?.abort();
+		this.#abortController = new AbortController();
+		try {
+			if (video.mediaEngineTask) {
+				if ((await video.mediaEngineTask.taskComplete)?.audioRendition) {
+					this._hasAudio = true;
+					const waveformData = await extractWaveformData(src, this.#abortController.signal);
+					if (waveformData) {
+						this._waveformData = waveformData;
+						this.#scheduleRender();
+					}
+				}
+			}
+		} catch (error) {
+			if (!(error instanceof DOMException && error.name === "AbortError")) {}
+		}
+	}
+	#scheduleRender() {
+		if (this.#renderRequested) return;
+		this.#renderRequested = true;
+		requestAnimationFrame(() => {
+			this.#renderRequested = false;
+			this.#renderAudioOverlay();
+		});
+	}
+	#renderAudioOverlay() {
+		const canvas = this.audioCanvasRef.value;
+		const waveformData = this._waveformData;
+		if (!canvas || !waveformData || !this._hasAudio) return;
+		const video = this.element;
+		const durationMs = video.durationMs ?? 0;
+		if (durationMs === 0) return;
+		const pixelsPerMs = this._timelineState?.pixelsPerMs ?? this.pixelsPerMs;
+		const trackWidthPx = durationMs * pixelsPerMs;
+		const trackStartPx = (video.startTimeMs ?? 0) * pixelsPerMs;
+		const scrollLeft = this._timelineState?.viewportScrollLeft ?? 0;
+		const viewportWidth = this._timelineState?.viewportWidth ?? 800;
+		const visibleLeftPx = scrollLeft - VIRTUAL_RENDER_PADDING_PX;
+		const visibleRightPx = scrollLeft + viewportWidth + VIRTUAL_RENDER_PADDING_PX;
+		if (trackStartPx + trackWidthPx < visibleLeftPx || trackStartPx > visibleRightPx) {
+			canvas.style.display = "none";
+			return;
+		}
+		canvas.style.display = "block";
+		const visibleStartInTrack = Math.max(0, visibleLeftPx - trackStartPx);
+		const visibleEndInTrack = Math.min(trackWidthPx, visibleRightPx - trackStartPx);
+		const visibleWidthPx = visibleEndInTrack - visibleStartInTrack;
+		if (visibleWidthPx <= 0) return;
+		const height = AUDIO_SECTION_HEIGHT;
+		const dpr = window.devicePixelRatio || 1;
+		const targetWidth = Math.ceil(visibleWidthPx * dpr);
+		const targetHeight = Math.ceil(height * dpr);
+		if (canvas.width !== targetWidth || canvas.height !== targetHeight) {
+			canvas.width = targetWidth;
+			canvas.height = targetHeight;
+		}
+		canvas.style.left = `${visibleStartInTrack}px`;
+		canvas.style.width = `${visibleWidthPx}px`;
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return;
+		ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+		ctx.clearRect(0, 0, visibleWidthPx, height);
+		const sourceInMs = video.sourceStartMs ?? 0;
+		const timeStartMs = sourceInMs + visibleStartInTrack / pixelsPerMs;
+		const timeEndMs = sourceInMs + visibleEndInTrack / pixelsPerMs;
+		this.#drawAudioWaveform(ctx, waveformData, visibleWidthPx, height, timeStartMs, timeEndMs);
+	}
+	#drawAudioWaveform(ctx, waveformData, width, height, startMs, endMs) {
+		const { peaks, samplesPerSecond } = waveformData;
+		const startSample = Math.floor(startMs / 1e3 * samplesPerSecond);
+		const sampleCount = Math.ceil(endMs / 1e3 * samplesPerSecond) - startSample;
+		if (sampleCount <= 0 || width <= 0) return;
+		const centerY = height / 2;
+		const halfHeight = height / 2 - 1;
+		const pixelsPerSample = width / sampleCount;
+		ctx.fillStyle = "rgb(74, 222, 128)";
+		ctx.globalAlpha = .9;
+		ctx.beginPath();
+		for (let i = 0; i <= sampleCount; i++) {
+			const peakIndex = (startSample + i) * 2;
+			if (peakIndex + 1 >= peaks.length) break;
+			const maxValue = peaks[peakIndex + 1] ?? 0;
+			const px = i * pixelsPerSample;
+			const py = centerY - maxValue * halfHeight;
+			if (i === 0) ctx.moveTo(px, py);
+			else ctx.lineTo(px, py);
+		}
+		for (let i = sampleCount; i >= 0; i--) {
+			const peakIndex = (startSample + i) * 2;
+			if (peakIndex >= peaks.length) continue;
+			const minValue = peaks[peakIndex] ?? 0;
+			const px = i * pixelsPerSample;
+			const py = centerY - minValue * halfHeight;
+			ctx.lineTo(px, py);
+		}
+		ctx.closePath();
+		ctx.fill();
+		ctx.globalAlpha = .3;
+		ctx.strokeStyle = "rgb(74, 222, 128)";
+		ctx.lineWidth = 1;
+		ctx.beginPath();
+		ctx.moveTo(0, centerY);
+		ctx.lineTo(width, centerY);
+		ctx.stroke();
+		ctx.globalAlpha = 1;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.#checkAndLoadAudioWaveform();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#abortController?.abort();
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (this.element?.src !== this.#lastSrc) this.#checkAndLoadAudioWaveform();
+		if (changedProperties.has("_timelineState") || changedProperties.has("_waveformData")) this.#scheduleRender();
+		if (this._waveformData) this.#scheduleRender();
+	}
+	/**
+	* Get the total track height based on whether audio is present
+	*/
+	#getTrackHeight() {
+		if (this._hasAudio && this._waveformData) return THUMBNAIL_HEIGHT + AUDIO_SECTION_HEIGHT;
+		return THUMBNAIL_HEIGHT;
+	}
+	render() {
+		const video = this.element;
+		const elementId = this.element.id || "";
+		if (!(video instanceof EFVideo)) return html``;
+		const trimStartMs = this.element.trimStartMs ?? 0;
+		const trimEndMs = this.element.trimEndMs ?? 0;
+		const intrinsicDurationMs = this.element.intrinsicDurationMs ?? this.element.durationMs;
+		const trackHeight = this.#getTrackHeight();
+		const hasAudioSection = this._hasAudio && this._waveformData;
+		const typeColor = this.getElementTypeColor();
+		return html`<div style=${styleMap(this.gutterStyles)}>
+      <div
+        ?data-focused=${this.isFocused}
+        @mouseenter=${() => {
+			if (this.focusContext) this.focusContext.focusedElement = this.element;
+		}}
+        @mouseleave=${() => {
+			if (this.focusContext) this.focusContext.focusedElement = null;
+		}}
+      >
+        <div
+          ?data-focused=${this.isFocused}
+          class="trim-container"
+          style=${styleMap({
+			...this.trimPortionStyles,
+			height: `${trackHeight}px`,
+			backgroundColor: this.isFocused ? "rgba(59, 130, 246, 0.25)" : "rgba(30, 41, 59, 0.8)",
+			borderLeft: `3px solid ${typeColor}`,
+			borderRadius: "3px"
+		})}
+        >
+          <div class="video-content">
+            <div class="thumbnail-section">
+              <ef-thumbnail-strip
+                .targetElement=${video}
+                .useIntrinsicDuration=${true}
+              ></ef-thumbnail-strip>
+            </div>
+            ${hasAudioSection ? html`<div class="audio-section">
+                  <canvas ${ref(this.audioCanvasRef)} class="audio-section-canvas"></canvas>
+                </div>` : nothing}
+          </div>
+          ${this.enableTrim ? html`<ef-trim-handles
+                element-id=${elementId}
+                pixels-per-ms=${this.pixelsPerMs}
+                trim-start-ms=${trimStartMs}
+                trim-end-ms=${trimEndMs}
+                intrinsic-duration-ms=${intrinsicDurationMs}
+                @trim-change=${this.handleTrimChange}
+              ></ef-trim-handles>` : nothing}
+        </div>
+      </div>
+      ${this.renderChildren()}
+    </div>`;
+	}
+};
+__decorate([consume({
+	context: timelineStateContext,
+	subscribe: true
+}), state()], EFVideoTrack.prototype, "_timelineState", void 0);
+__decorate([state()], EFVideoTrack.prototype, "_waveformData", void 0);
+__decorate([state()], EFVideoTrack.prototype, "_hasAudio", void 0);
+EFVideoTrack = __decorate([customElement("ef-video-track")], EFVideoTrack);
+
+//#endregion
+//# sourceMappingURL=VideoTrack.js.map

package/dist/gui/timeline/tracks/VideoTrack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoTrack.js","names":["EFVideoTrack","#checkAndLoadAudioWaveform","#lastSrc","#abortController","#scheduleRender","#renderRequested","#renderAudioOverlay","#drawAudioWaveform","#getTrackHeight"],"sources":["../../../../src/gui/timeline/tracks/VideoTrack.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport { css, html, nothing } from \"lit\";\nimport { customElement, state } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { EFVideo } from \"../../../elements/EFVideo.js\";\nimport \"../../../elements/EFThumbnailStrip.js\";\n// TrackItem must be pre-loaded before this module is imported\n// See preloadTracks.ts for the initialization sequence\nimport { TrackItem } from \"./TrackItem.js\";\nimport {\n  extractWaveformData,\n  type WaveformData,\n} from \"./waveformUtils.js\";\nimport {\n  timelineStateContext,\n  type TimelineState,\n} from \"../timelineStateContext.js\";\n\n/** Padding for virtual rendering */\nconst VIRTUAL_RENDER_PADDING_PX = 100;\n\n/** Height of thumbnail section */\nconst THUMBNAIL_HEIGHT = 24;\n/** Height of audio section when present */\nconst AUDIO_SECTION_HEIGHT = 14;\n\n@customElement(\"ef-video-track\")\nexport class EFVideoTrack extends TrackItem {\n  static override styles = [\n    ...TrackItem.styles,\n    css`\n      .video-content {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n      .thumbnail-section {\n        position: relative;\n        flex: 0 0 ${THUMBNAIL_HEIGHT}px;\n        height: ${THUMBNAIL_HEIGHT}px;\n      }\n      ef-thumbnail-strip {\n        height: 100%;\n        border: none;\n        border-radius: 0;\n        background: transparent;\n      }\n      .audio-section {\n        position: relative;\n        flex: 0 0 ${AUDIO_SECTION_HEIGHT}px;\n        height: ${AUDIO_SECTION_HEIGHT}px;\n        background: rgba(0, 0, 0, 0.3);\n        border-top: 1px solid rgba(255, 255, 255, 0.1);\n        overflow: hidden;\n      }\n      .audio-section-canvas {\n        position: absolute;\n        top: 0;\n        height: 100%;\n      }\n    `,\n  ];\n\n  audioCanvasRef = createRef<HTMLCanvasElement>();\n\n  @consume({ context: timelineStateContext, subscribe: true })\n  @state()\n  private _timelineState?: TimelineState;\n\n  @state()\n  private _waveformData: WaveformData | null = null;\n\n  @state()\n  private _hasAudio = false;\n\n  #lastSrc: string | null = null;\n  #abortController: AbortController | null = null;\n  #renderRequested = false;\n\n  /**\n   * Check if video has audio and load waveform data\n   */\n  async #checkAndLoadAudioWaveform(): Promise<void> {\n    const video = this.element as EFVideo;\n    const src = video?.src;\n\n    if (!src || src === this.#lastSrc) {\n      return;\n    }\n\n    this.#lastSrc = src;\n    this._hasAudio = false;\n    this._waveformData = null;\n\n    // Cancel any in-progress load\n    this.#abortController?.abort();\n    this.#abortController = new AbortController();\n\n    try {\n      // Wait for media engine to determine if video has audio\n      if (video.mediaEngineTask) {\n        const mediaEngine = await video.mediaEngineTask.taskComplete;\n        if (mediaEngine?.audioRendition) {\n          this._hasAudio = true;\n\n          // Load waveform data\n          const waveformData = await extractWaveformData(\n            src,\n            this.#abortController.signal,\n          );\n\n          if (waveformData) {\n            this._waveformData = waveformData;\n            this.#scheduleRender();\n          }\n        }\n      }\n    } catch (error) {\n      if (!(error instanceof DOMException && error.name === \"AbortError\")) {\n        // Silently fail - audio overlay is optional\n      }\n    }\n  }\n\n  #scheduleRender(): void {\n    if (this.#renderRequested) return;\n    this.#renderRequested = true;\n\n    requestAnimationFrame(() => {\n      this.#renderRequested = false;\n      this.#renderAudioOverlay();\n    });\n  }\n\n  #renderAudioOverlay(): void {\n    const canvas = this.audioCanvasRef.value;\n    const waveformData = this._waveformData;\n\n    if (!canvas || !waveformData || !this._hasAudio) return;\n\n    const video = this.element as EFVideo;\n    const durationMs = video.durationMs ?? 0;\n    if (durationMs === 0) return;\n\n    const pixelsPerMs = this._timelineState?.pixelsPerMs ?? this.pixelsPerMs;\n    const trackWidthPx = durationMs * pixelsPerMs;\n    const trackStartMs = video.startTimeMs ?? 0;\n    const trackStartPx = trackStartMs * pixelsPerMs;\n\n    // Get scroll/viewport info\n    const scrollLeft = this._timelineState?.viewportScrollLeft ?? 0;\n    const viewportWidth = this._timelineState?.viewportWidth ?? 800;\n\n    // Calculate visible region\n    const visibleLeftPx = scrollLeft - VIRTUAL_RENDER_PADDING_PX;\n    const visibleRightPx = scrollLeft + viewportWidth + VIRTUAL_RENDER_PADDING_PX;\n    const trackEndPx = trackStartPx + trackWidthPx;\n\n    // Check visibility\n    if (trackEndPx < visibleLeftPx || trackStartPx > visibleRightPx) {\n      canvas.style.display = \"none\";\n      return;\n    }\n    canvas.style.display = \"block\";\n\n    // Calculate visible portion within track\n    const visibleStartInTrack = Math.max(0, visibleLeftPx - trackStartPx);\n    const visibleEndInTrack = Math.min(trackWidthPx, visibleRightPx - trackStartPx);\n    const visibleWidthPx = visibleEndInTrack - visibleStartInTrack;\n\n    if (visibleWidthPx <= 0) return;\n\n    const height = AUDIO_SECTION_HEIGHT;\n    const dpr = window.devicePixelRatio || 1;\n\n    // Set canvas size\n    const targetWidth = Math.ceil(visibleWidthPx * dpr);\n    const targetHeight = Math.ceil(height * dpr);\n\n    if (canvas.width !== targetWidth || canvas.height !== targetHeight) {\n      canvas.width = targetWidth;\n      canvas.height = targetHeight;\n    }\n\n    canvas.style.left = `${visibleStartInTrack}px`;\n    canvas.style.width = `${visibleWidthPx}px`;\n\n    const ctx = canvas.getContext(\"2d\");\n    if (!ctx) return;\n\n    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n    ctx.clearRect(0, 0, visibleWidthPx, height);\n\n    // Calculate time range to render\n    const sourceInMs = video.sourceStartMs ?? 0;\n    const timeStartMs = sourceInMs + visibleStartInTrack / pixelsPerMs;\n    const timeEndMs = sourceInMs + visibleEndInTrack / pixelsPerMs;\n\n    // Draw waveform in dedicated section\n    this.#drawAudioWaveform(ctx, waveformData, visibleWidthPx, height, timeStartMs, timeEndMs);\n  }\n\n  #drawAudioWaveform(\n    ctx: CanvasRenderingContext2D,\n    waveformData: WaveformData,\n    width: number,\n    height: number,\n    startMs: number,\n    endMs: number,\n  ): void {\n    const { peaks, samplesPerSecond } = waveformData;\n\n    const startSample = Math.floor((startMs / 1000) * samplesPerSecond);\n    const endSample = Math.ceil((endMs / 1000) * samplesPerSecond);\n    const sampleCount = endSample - startSample;\n\n    if (sampleCount <= 0 || width <= 0) return;\n\n    const centerY = height / 2;\n    const halfHeight = (height / 2) - 1;\n    const pixelsPerSample = width / sampleCount;\n\n    // Draw filled waveform\n    ctx.fillStyle = \"rgb(74, 222, 128)\";\n    ctx.globalAlpha = 0.9;\n    ctx.beginPath();\n\n    // Draw top half (max values) left to right\n    for (let i = 0; i <= sampleCount; i++) {\n      const sampleIndex = startSample + i;\n      const peakIndex = sampleIndex * 2;\n      if (peakIndex + 1 >= peaks.length) break;\n\n      const maxValue = peaks[peakIndex + 1] ?? 0;\n      const px = i * pixelsPerSample;\n      const py = centerY - maxValue * halfHeight;\n\n      if (i === 0) {\n        ctx.moveTo(px, py);\n      } else {\n        ctx.lineTo(px, py);\n      }\n    }\n\n    // Draw bottom half (min values) right to left\n    for (let i = sampleCount; i >= 0; i--) {\n      const sampleIndex = startSample + i;\n      const peakIndex = sampleIndex * 2;\n      if (peakIndex >= peaks.length) continue;\n\n      const minValue = peaks[peakIndex] ?? 0;\n      const px = i * pixelsPerSample;\n      const py = centerY - minValue * halfHeight;\n\n      ctx.lineTo(px, py);\n    }\n\n    ctx.closePath();\n    ctx.fill();\n\n    // Draw center line\n    ctx.globalAlpha = 0.3;\n    ctx.strokeStyle = \"rgb(74, 222, 128)\";\n    ctx.lineWidth = 1;\n    ctx.beginPath();\n    ctx.moveTo(0, centerY);\n    ctx.lineTo(width, centerY);\n    ctx.stroke();\n\n    ctx.globalAlpha = 1;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.#checkAndLoadAudioWaveform();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#abortController?.abort();\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>): void {\n    super.updated(changedProperties);\n\n    const video = this.element as EFVideo;\n    if (video?.src !== this.#lastSrc) {\n      this.#checkAndLoadAudioWaveform();\n    }\n\n    if (changedProperties.has(\"_timelineState\") || changedProperties.has(\"_waveformData\")) {\n      this.#scheduleRender();\n    }\n\n    // Always schedule render after update\n    if (this._waveformData) {\n      this.#scheduleRender();\n    }\n  }\n\n  /**\n   * Get the total track height based on whether audio is present\n   */\n  #getTrackHeight(): number {\n    if (this._hasAudio && this._waveformData) {\n      return THUMBNAIL_HEIGHT + AUDIO_SECTION_HEIGHT;\n    }\n    return THUMBNAIL_HEIGHT;\n  }\n\n  override render() {\n    const video = this.element as EFVideo;\n    const elementId = (this.element as HTMLElement).id || \"\";\n\n    // Don't render thumbnail strip until we have a valid EFVideo element\n    if (!(video instanceof EFVideo)) {\n      return html``;\n    }\n    const trimStartMs = this.element.trimStartMs ?? 0;\n    const trimEndMs = this.element.trimEndMs ?? 0;\n    const intrinsicDurationMs =\n      this.element.intrinsicDurationMs ?? this.element.durationMs;\n\n    const trackHeight = this.#getTrackHeight();\n    const hasAudioSection = this._hasAudio && this._waveformData;\n\n    const typeColor = this.getElementTypeColor();\n    \n    return html`<div style=${styleMap(this.gutterStyles)}>\n      <div\n        ?data-focused=${this.isFocused}\n        @mouseenter=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = this.element;\n          }\n        }}\n        @mouseleave=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = null;\n          }\n        }}\n      >\n        <div\n          ?data-focused=${this.isFocused}\n          class=\"trim-container\"\n          style=${styleMap({\n            ...this.trimPortionStyles,\n            height: `${trackHeight}px`,\n            backgroundColor: this.isFocused\n              ? \"rgba(59, 130, 246, 0.25)\"\n              : \"rgba(30, 41, 59, 0.8)\",\n            borderLeft: `3px solid ${typeColor}`,\n            borderRadius: \"3px\",\n          })}\n        >\n          <div class=\"video-content\">\n            <div class=\"thumbnail-section\">\n              <ef-thumbnail-strip\n                .targetElement=${video}\n                .useIntrinsicDuration=${true}\n              ></ef-thumbnail-strip>\n            </div>\n            ${hasAudioSection\n              ? html`<div class=\"audio-section\">\n                  <canvas ${ref(this.audioCanvasRef)} class=\"audio-section-canvas\"></canvas>\n                </div>`\n              : nothing\n            }\n          </div>\n          ${\n            this.enableTrim\n              ? html`<ef-trim-handles\n                element-id=${elementId}\n                pixels-per-ms=${this.pixelsPerMs}\n                trim-start-ms=${trimStartMs}\n                trim-end-ms=${trimEndMs}\n                intrinsic-duration-ms=${intrinsicDurationMs}\n                @trim-change=${this.handleTrimChange}\n              ></ef-trim-handles>`\n              : nothing\n          }\n        </div>\n      </div>\n      ${this.renderChildren()}\n    </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-video-track\": EFVideoTrack;\n  }\n}\n"],"mappings":"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"}

package/dist/gui/timeline/tracks/WaveformTrack.js

@@ -0,0 +1,19 @@
+import { __decorate } from "../../../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { ICONS, phosphorIcon } from "../../icons.js";
+import { TrackItem } from "./TrackItem.js";
+import { nothing } from "lit";
+import { customElement } from "lit/decorators.js";
+
+//#region src/gui/timeline/tracks/WaveformTrack.ts
+let EFWaveformTrack = class EFWaveformTrack$1 extends TrackItem {
+	contents() {
+		return phosphorIcon(ICONS.waveform);
+	}
+	renderChildren() {
+		return nothing;
+	}
+};
+EFWaveformTrack = __decorate([customElement("ef-waveform-track")], EFWaveformTrack);
+
+//#endregion
+//# sourceMappingURL=WaveformTrack.js.map

package/dist/gui/timeline/tracks/WaveformTrack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WaveformTrack.js","names":["EFWaveformTrack"],"sources":["../../../../src/gui/timeline/tracks/WaveformTrack.ts"],"sourcesContent":["import { html, nothing, type TemplateResult } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport { phosphorIcon, ICONS } from \"../../icons.js\";\n// TrackItem must be pre-loaded before this module is imported\n// See preloadTracks.ts for the initialization sequence\nimport { TrackItem } from \"./TrackItem.js\";\n\n@customElement(\"ef-waveform-track\")\nexport class EFWaveformTrack extends TrackItem {\n  contents() {\n    return phosphorIcon(ICONS.waveform);\n  }\n\n  renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing {\n    return nothing;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-waveform-track\": EFWaveformTrack;\n  }\n}\n\n"],"mappings":";;;;;;;AAQO,4BAAMA,0BAAwB,UAAU;CAC7C,WAAW;AACT,SAAO,aAAa,MAAM,SAAS;;CAGrC,iBAA6E;AAC3E,SAAO;;;8BAPV,cAAc,oBAAoB"}

package/dist/gui/timeline/tracks/ensureTrackItemInit.js

@@ -0,0 +1 @@
+import { TrackItem } from "./TrackItem.js";

package/dist/gui/timeline/tracks/preloadTracks.js

@@ -0,0 +1,9 @@
+import "./ensureTrackItemInit.js";
+import "./AudioTrack.js";
+import "./VideoTrack.js";
+import "./ImageTrack.js";
+import "./TimegroupTrack.js";
+import "./TextTrack.js";
+import "./HTMLTrack.js";
+import "./CaptionsTrack.js";
+import "./WaveformTrack.js";