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

package/dist/gui/timeline/TrimHandles.d.ts

@@ -0,0 +1,36 @@
+import * as lit39 from "lit";
+import { LitElement } from "lit";
+import * as lit_html37 from "lit-html";
+
+//#region src/gui/timeline/TrimHandles.d.ts
+interface TrimChangeDetail {
+  elementId: string;
+  type: "start" | "end";
+  deltaMs: number;
+  newValueMs: number;
+}
+declare const EFTrimHandles_base: typeof LitElement;
+declare class EFTrimHandles extends EFTrimHandles_base {
+  static styles: lit39.CSSResult[];
+  elementId: string;
+  pixelsPerMs: number;
+  trimStartMs: number;
+  trimEndMs: number;
+  intrinsicDurationMs: number;
+  showOverlays: boolean;
+  private draggingHandle;
+  private dragStartX;
+  private dragStartValue;
+  private handlePointerDown;
+  private handlePointerMove;
+  private handlePointerUp;
+  render(): lit_html37.TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-trim-handles": EFTrimHandles;
+  }
+}
+//#endregion
+export { EFTrimHandles, TrimChangeDetail };
+//# sourceMappingURL=TrimHandles.d.ts.map

package/dist/gui/timeline/TrimHandles.js

@@ -0,0 +1,204 @@
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { TWMixin } from "../TWMixin2.js";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+
+//#region src/gui/timeline/TrimHandles.ts
+let EFTrimHandles = class EFTrimHandles$1 extends TWMixin(LitElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.elementId = "";
+		this.pixelsPerMs = .04;
+		this.trimStartMs = 0;
+		this.trimEndMs = 0;
+		this.intrinsicDurationMs = 0;
+		this.showOverlays = true;
+		this.draggingHandle = null;
+		this.dragStartX = 0;
+		this.dragStartValue = 0;
+		this.handlePointerMove = (e) => {
+			if (!this.draggingHandle) return;
+			const deltaMs = (e.clientX - this.dragStartX) / this.pixelsPerMs;
+			let newValueMs;
+			if (this.draggingHandle === "start") {
+				newValueMs = Math.max(0, this.dragStartValue + deltaMs);
+				newValueMs = Math.min(newValueMs, this.intrinsicDurationMs - (this.trimEndMs || 0));
+			} else {
+				newValueMs = Math.max(0, this.dragStartValue - deltaMs);
+				newValueMs = Math.min(newValueMs, this.intrinsicDurationMs - this.trimStartMs);
+			}
+			this.dispatchEvent(new CustomEvent("trim-change", {
+				detail: {
+					elementId: this.elementId,
+					type: this.draggingHandle,
+					deltaMs,
+					newValueMs
+				},
+				bubbles: true,
+				composed: true
+			}));
+		};
+		this.handlePointerUp = (e) => {
+			const target = e.currentTarget;
+			target.releasePointerCapture(e.pointerId);
+			target.removeEventListener("pointermove", this.handlePointerMove);
+			target.removeEventListener("pointerup", this.handlePointerUp);
+			target.removeEventListener("pointercancel", this.handlePointerUp);
+			if (this.draggingHandle) this.dispatchEvent(new CustomEvent("trim-change-end", {
+				detail: {
+					elementId: this.elementId,
+					type: this.draggingHandle
+				},
+				bubbles: true,
+				composed: true
+			}));
+			this.draggingHandle = null;
+		};
+	}
+	static {
+		this.styles = [css`
+      :host {
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        pointer-events: none;
+      }
+
+      .handle {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 8px;
+        cursor: ew-resize;
+        pointer-events: auto;
+        z-index: 10;
+      }
+
+      .handle::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 4px;
+        height: 60%;
+        min-height: 12px;
+        max-height: 24px;
+        background: var(--trim-handle-color, rgba(255, 255, 255, 0.7));
+        border-radius: 2px;
+        transition: background 0.15s ease;
+      }
+
+      .handle:hover::before,
+      .handle.dragging::before {
+        background: var(--trim-handle-active-color, #3b82f6);
+      }
+
+      .handle-start {
+        left: -4px;
+      }
+
+      .handle-start::before {
+        left: 2px;
+      }
+
+      .handle-end {
+        right: -4px;
+      }
+
+      .handle-end::before {
+        right: 2px;
+      }
+
+      .handle.dragging {
+        cursor: grabbing;
+      }
+
+      .trim-overlay {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        background: var(--trim-overlay-color, rgba(0, 0, 0, 0.4));
+        pointer-events: none;
+      }
+
+      .trim-overlay-start {
+        left: 0;
+      }
+
+      .trim-overlay-end {
+        right: 0;
+      }
+    `];
+	}
+	handlePointerDown(e, type) {
+		e.preventDefault();
+		e.stopPropagation();
+		this.draggingHandle = type;
+		this.dragStartX = e.clientX;
+		this.dragStartValue = type === "start" ? this.trimStartMs : this.trimEndMs;
+		const target = e.currentTarget;
+		target.setPointerCapture(e.pointerId);
+		target.addEventListener("pointermove", this.handlePointerMove);
+		target.addEventListener("pointerup", this.handlePointerUp);
+		target.addEventListener("pointercancel", this.handlePointerUp);
+	}
+	render() {
+		const trimStartWidth = this.trimStartMs * this.pixelsPerMs;
+		const trimEndWidth = (this.trimEndMs || 0) * this.pixelsPerMs;
+		return html`
+      ${this.showOverlays && this.trimStartMs > 0 ? html`<div
+            class="trim-overlay trim-overlay-start"
+            style=${styleMap({ width: `${trimStartWidth}px` })}
+          ></div>` : nothing}
+      ${this.showOverlays && this.trimEndMs > 0 ? html`<div
+            class="trim-overlay trim-overlay-end"
+            style=${styleMap({ width: `${trimEndWidth}px` })}
+          ></div>` : nothing}
+
+      <div
+        class="handle handle-start ${this.draggingHandle === "start" ? "dragging" : ""}"
+        @pointerdown=${(e) => this.handlePointerDown(e, "start")}
+      ></div>
+      <div
+        class="handle handle-end ${this.draggingHandle === "end" ? "dragging" : ""}"
+        @pointerdown=${(e) => this.handlePointerDown(e, "end")}
+      ></div>
+    `;
+	}
+};
+__decorate([property({
+	type: String,
+	attribute: "element-id"
+})], EFTrimHandles.prototype, "elementId", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "pixels-per-ms"
+})], EFTrimHandles.prototype, "pixelsPerMs", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "trim-start-ms"
+})], EFTrimHandles.prototype, "trimStartMs", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "trim-end-ms"
+})], EFTrimHandles.prototype, "trimEndMs", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "intrinsic-duration-ms"
+})], EFTrimHandles.prototype, "intrinsicDurationMs", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "show-overlays"
+})], EFTrimHandles.prototype, "showOverlays", void 0);
+__decorate([state()], EFTrimHandles.prototype, "draggingHandle", void 0);
+__decorate([state()], EFTrimHandles.prototype, "dragStartX", void 0);
+__decorate([state()], EFTrimHandles.prototype, "dragStartValue", void 0);
+EFTrimHandles = __decorate([customElement("ef-trim-handles")], EFTrimHandles);
+
+//#endregion
+export { EFTrimHandles };
+//# sourceMappingURL=TrimHandles.js.map

package/dist/gui/timeline/TrimHandles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrimHandles.js","names":["EFTrimHandles","newValueMs: number"],"sources":["../../../src/gui/timeline/TrimHandles.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { TWMixin } from \"../TWMixin.js\";\n\nexport interface TrimChangeDetail {\n  elementId: string;\n  type: \"start\" | \"end\";\n  deltaMs: number;\n  newValueMs: number;\n}\n\n@customElement(\"ef-trim-handles\")\nexport class EFTrimHandles extends TWMixin(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        pointer-events: none;\n      }\n\n      .handle {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 8px;\n        cursor: ew-resize;\n        pointer-events: auto;\n        z-index: 10;\n      }\n\n      .handle::before {\n        content: \"\";\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        width: 4px;\n        height: 60%;\n        min-height: 12px;\n        max-height: 24px;\n        background: var(--trim-handle-color, rgba(255, 255, 255, 0.7));\n        border-radius: 2px;\n        transition: background 0.15s ease;\n      }\n\n      .handle:hover::before,\n      .handle.dragging::before {\n        background: var(--trim-handle-active-color, #3b82f6);\n      }\n\n      .handle-start {\n        left: -4px;\n      }\n\n      .handle-start::before {\n        left: 2px;\n      }\n\n      .handle-end {\n        right: -4px;\n      }\n\n      .handle-end::before {\n        right: 2px;\n      }\n\n      .handle.dragging {\n        cursor: grabbing;\n      }\n\n      .trim-overlay {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        background: var(--trim-overlay-color, rgba(0, 0, 0, 0.4));\n        pointer-events: none;\n      }\n\n      .trim-overlay-start {\n        left: 0;\n      }\n\n      .trim-overlay-end {\n        right: 0;\n      }\n    `,\n  ];\n\n  @property({ type: String, attribute: \"element-id\" })\n  elementId = \"\";\n\n  @property({ type: Number, attribute: \"pixels-per-ms\" })\n  pixelsPerMs = 0.04;\n\n  @property({ type: Number, attribute: \"trim-start-ms\" })\n  trimStartMs = 0;\n\n  @property({ type: Number, attribute: \"trim-end-ms\" })\n  trimEndMs = 0;\n\n  @property({ type: Number, attribute: \"intrinsic-duration-ms\" })\n  intrinsicDurationMs = 0;\n\n  @property({ type: Boolean, attribute: \"show-overlays\" })\n  showOverlays = true;\n\n  @state()\n  private draggingHandle: \"start\" | \"end\" | null = null;\n\n  @state()\n  private dragStartX = 0;\n\n  @state()\n  private dragStartValue = 0;\n\n  private handlePointerDown(e: PointerEvent, type: \"start\" | \"end\"): void {\n    e.preventDefault();\n    e.stopPropagation();\n\n    this.draggingHandle = type;\n    this.dragStartX = e.clientX;\n    this.dragStartValue = type === \"start\" ? this.trimStartMs : this.trimEndMs;\n\n    const target = e.currentTarget as HTMLElement;\n    target.setPointerCapture(e.pointerId);\n\n    target.addEventListener(\"pointermove\", this.handlePointerMove);\n    target.addEventListener(\"pointerup\", this.handlePointerUp);\n    target.addEventListener(\"pointercancel\", this.handlePointerUp);\n  }\n\n  private handlePointerMove = (e: PointerEvent): void => {\n    if (!this.draggingHandle) return;\n\n    const deltaX = e.clientX - this.dragStartX;\n    const deltaMs = deltaX / this.pixelsPerMs;\n\n    let newValueMs: number;\n\n    if (this.draggingHandle === \"start\") {\n      newValueMs = Math.max(0, this.dragStartValue + deltaMs);\n      newValueMs = Math.min(\n        newValueMs,\n        this.intrinsicDurationMs - (this.trimEndMs || 0),\n      );\n    } else {\n      newValueMs = Math.max(0, this.dragStartValue - deltaMs);\n      newValueMs = Math.min(\n        newValueMs,\n        this.intrinsicDurationMs - this.trimStartMs,\n      );\n    }\n\n    this.dispatchEvent(\n      new CustomEvent<TrimChangeDetail>(\"trim-change\", {\n        detail: {\n          elementId: this.elementId,\n          type: this.draggingHandle,\n          deltaMs,\n          newValueMs,\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private handlePointerUp = (e: PointerEvent): void => {\n    const target = e.currentTarget as HTMLElement;\n    target.releasePointerCapture(e.pointerId);\n    target.removeEventListener(\"pointermove\", this.handlePointerMove);\n    target.removeEventListener(\"pointerup\", this.handlePointerUp);\n    target.removeEventListener(\"pointercancel\", this.handlePointerUp);\n\n    if (this.draggingHandle) {\n      this.dispatchEvent(\n        new CustomEvent(\"trim-change-end\", {\n          detail: {\n            elementId: this.elementId,\n            type: this.draggingHandle,\n          },\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    }\n\n    this.draggingHandle = null;\n  };\n\n  render() {\n    const trimStartWidth = this.trimStartMs * this.pixelsPerMs;\n    const trimEndWidth = (this.trimEndMs || 0) * this.pixelsPerMs;\n\n    return html`\n      ${\n        this.showOverlays && this.trimStartMs > 0\n          ? html`<div\n            class=\"trim-overlay trim-overlay-start\"\n            style=${styleMap({ width: `${trimStartWidth}px` })}\n          ></div>`\n          : nothing\n      }\n      ${\n        this.showOverlays && this.trimEndMs > 0\n          ? html`<div\n            class=\"trim-overlay trim-overlay-end\"\n            style=${styleMap({ width: `${trimEndWidth}px` })}\n          ></div>`\n          : nothing\n      }\n\n      <div\n        class=\"handle handle-start ${this.draggingHandle === \"start\" ? \"dragging\" : \"\"}\"\n        @pointerdown=${(e: PointerEvent) => this.handlePointerDown(e, \"start\")}\n      ></div>\n      <div\n        class=\"handle handle-end ${this.draggingHandle === \"end\" ? \"dragging\" : \"\"}\"\n        @pointerdown=${(e: PointerEvent) => this.handlePointerDown(e, \"end\")}\n      ></div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-trim-handles\": EFTrimHandles;\n  }\n}\n"],"mappings":";;;;;;;AAaO,0BAAMA,wBAAsB,QAAQ,WAAW,CAAC;;;mBAiFzC;qBAGE;qBAGA;mBAGF;6BAGU;sBAGP;wBAGkC;oBAG5B;wBAGI;4BAkBI,MAA0B;AACrD,OAAI,CAAC,KAAK,eAAgB;GAG1B,MAAM,WADS,EAAE,UAAU,KAAK,cACP,KAAK;GAE9B,IAAIC;AAEJ,OAAI,KAAK,mBAAmB,SAAS;AACnC,iBAAa,KAAK,IAAI,GAAG,KAAK,iBAAiB,QAAQ;AACvD,iBAAa,KAAK,IAChB,YACA,KAAK,uBAAuB,KAAK,aAAa,GAC/C;UACI;AACL,iBAAa,KAAK,IAAI,GAAG,KAAK,iBAAiB,QAAQ;AACvD,iBAAa,KAAK,IAChB,YACA,KAAK,sBAAsB,KAAK,YACjC;;AAGH,QAAK,cACH,IAAI,YAA8B,eAAe;IAC/C,QAAQ;KACN,WAAW,KAAK;KAChB,MAAM,KAAK;KACX;KACA;KACD;IACD,SAAS;IACT,UAAU;IACX,CAAC,CACH;;0BAGwB,MAA0B;GACnD,MAAM,SAAS,EAAE;AACjB,UAAO,sBAAsB,EAAE,UAAU;AACzC,UAAO,oBAAoB,eAAe,KAAK,kBAAkB;AACjE,UAAO,oBAAoB,aAAa,KAAK,gBAAgB;AAC7D,UAAO,oBAAoB,iBAAiB,KAAK,gBAAgB;AAEjE,OAAI,KAAK,eACP,MAAK,cACH,IAAI,YAAY,mBAAmB;IACjC,QAAQ;KACN,WAAW,KAAK;KAChB,MAAM,KAAK;KACZ;IACD,SAAS;IACT,UAAU;IACX,CAAC,CACH;AAGH,QAAK,iBAAiB;;;;gBAlLR,CACd,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA4EJ;;CA6BD,AAAQ,kBAAkB,GAAiB,MAA6B;AACtE,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AAEnB,OAAK,iBAAiB;AACtB,OAAK,aAAa,EAAE;AACpB,OAAK,iBAAiB,SAAS,UAAU,KAAK,cAAc,KAAK;EAEjE,MAAM,SAAS,EAAE;AACjB,SAAO,kBAAkB,EAAE,UAAU;AAErC,SAAO,iBAAiB,eAAe,KAAK,kBAAkB;AAC9D,SAAO,iBAAiB,aAAa,KAAK,gBAAgB;AAC1D,SAAO,iBAAiB,iBAAiB,KAAK,gBAAgB;;CA8DhE,SAAS;EACP,MAAM,iBAAiB,KAAK,cAAc,KAAK;EAC/C,MAAM,gBAAgB,KAAK,aAAa,KAAK,KAAK;AAElD,SAAO,IAAI;QAEP,KAAK,gBAAgB,KAAK,cAAc,IACpC,IAAI;;oBAEI,SAAS,EAAE,OAAO,GAAG,eAAe,KAAK,CAAC,CAAC;qBAEnD,QACL;QAEC,KAAK,gBAAgB,KAAK,YAAY,IAClC,IAAI;;oBAEI,SAAS,EAAE,OAAO,GAAG,aAAa,KAAK,CAAC,CAAC;qBAEjD,QACL;;;qCAG8B,KAAK,mBAAmB,UAAU,aAAa,GAAG;wBAC/D,MAAoB,KAAK,kBAAkB,GAAG,QAAQ,CAAC;;;mCAG5C,KAAK,mBAAmB,QAAQ,aAAa,GAAG;wBAC3D,MAAoB,KAAK,kBAAkB,GAAG,MAAM,CAAC;;;;;YAlI1E,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAc,CAAC;YAGnD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAiB,CAAC;YAGtD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAiB,CAAC;YAGtD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAe,CAAC;YAGpD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAyB,CAAC;YAG9D,SAAS;CAAE,MAAM;CAAS,WAAW;CAAiB,CAAC;YAGvD,OAAO;YAGP,OAAO;YAGP,OAAO;4BAzGT,cAAc,kBAAkB"}

package/dist/gui/timeline/flattenHierarchy.js

@@ -0,0 +1,31 @@
+import { isEFTemporal } from "../../elements/EFTemporal.js";
+import { EFTimegroup } from "../../elements/EFTimegroup.js";
+
+//#region src/gui/timeline/flattenHierarchy.ts
+/**
+* Flattens a hierarchical temporal element tree into a flat array of rows.
+* Each row contains the element and its depth in the hierarchy.
+*
+* @param root - The root temporal element to flatten
+* @param startDepth - Starting depth (default 0)
+* @returns Array of {element, depth} in depth-first order
+*/
+function flattenHierarchy(root, startDepth = 0) {
+	const rows = [{
+		element: root,
+		depth: startDepth
+	}];
+	if (root instanceof EFTimegroup) {
+		for (const child of root.children) if (isEFTemporal(child)) {
+			const tagName = child.tagName?.toUpperCase();
+			if (tagName === "EF-CAPTIONS-ACTIVE-WORD" || tagName === "EF-CAPTIONS-SEGMENT" || tagName === "EF-CAPTIONS-BEFORE-ACTIVE-WORD" || tagName === "EF-CAPTIONS-AFTER-ACTIVE-WORD") continue;
+			if (tagName === "EF-TEXT-SEGMENT") continue;
+			rows.push(...flattenHierarchy(child, startDepth + 1));
+		}
+	}
+	return rows;
+}
+
+//#endregion
+export { flattenHierarchy };
+//# sourceMappingURL=flattenHierarchy.js.map

package/dist/gui/timeline/flattenHierarchy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flattenHierarchy.js","names":["rows: TimelineRowModel[]"],"sources":["../../../src/gui/timeline/flattenHierarchy.ts"],"sourcesContent":["import {\n  isEFTemporal,\n  type TemporalMixinInterface,\n} from \"../../elements/EFTemporal.js\";\nimport { EFTimegroup } from \"../../elements/EFTimegroup.js\";\n\nexport interface TimelineRowModel {\n  element: TemporalMixinInterface & Element;\n  depth: number;\n}\n\n/**\n * Flattens a hierarchical temporal element tree into a flat array of rows.\n * Each row contains the element and its depth in the hierarchy.\n *\n * @param root - The root temporal element to flatten\n * @param startDepth - Starting depth (default 0)\n * @returns Array of {element, depth} in depth-first order\n */\nexport function flattenHierarchy(\n  root: TemporalMixinInterface & Element,\n  startDepth = 0,\n): TimelineRowModel[] {\n  const rows: TimelineRowModel[] = [{ element: root, depth: startDepth }];\n\n  if (root instanceof EFTimegroup) {\n    for (const child of root.children) {\n      if (isEFTemporal(child)) {\n        // Skip child elements that are consolidated into their parent track\n        const tagName = (child as Element).tagName?.toUpperCase();\n        \n        // Skip captions child elements - they're shown inline in the captions track\n        if (\n          tagName === \"EF-CAPTIONS-ACTIVE-WORD\" ||\n          tagName === \"EF-CAPTIONS-SEGMENT\" ||\n          tagName === \"EF-CAPTIONS-BEFORE-ACTIVE-WORD\" ||\n          tagName === \"EF-CAPTIONS-AFTER-ACTIVE-WORD\"\n        ) {\n          continue;\n        }\n        \n        // Skip text segments - they're shown inline in the text track\n        if (tagName === \"EF-TEXT-SEGMENT\") {\n          continue;\n        }\n        \n        rows.push(\n          ...flattenHierarchy(\n            child as TemporalMixinInterface & Element,\n            startDepth + 1,\n          ),\n        );\n      }\n    }\n  }\n\n  return rows;\n}\n\n"],"mappings":";;;;;;;;;;;;AAmBA,SAAgB,iBACd,MACA,aAAa,GACO;CACpB,MAAMA,OAA2B,CAAC;EAAE,SAAS;EAAM,OAAO;EAAY,CAAC;AAEvE,KAAI,gBAAgB,aAClB;OAAK,MAAM,SAAS,KAAK,SACvB,KAAI,aAAa,MAAM,EAAE;GAEvB,MAAM,UAAW,MAAkB,SAAS,aAAa;AAGzD,OACE,YAAY,6BACZ,YAAY,yBACZ,YAAY,oCACZ,YAAY,gCAEZ;AAIF,OAAI,YAAY,kBACd;AAGF,QAAK,KACH,GAAG,iBACD,OACA,aAAa,EACd,CACF;;;AAKP,QAAO"}

package/dist/gui/timeline/timelineStateContext.d.ts

@@ -0,0 +1,26 @@
+//#region src/gui/timeline/timelineStateContext.d.ts
+/**
+ * The core invariant of the timeline system.
+ * Everything else (ruler positions, track positions, playhead position) derives from this.
+ */
+interface TimelineState {
+  /** Pixels per millisecond - the single zoom value */
+  pixelsPerMs: number;
+  /** Current playhead position in milliseconds */
+  currentTimeMs: number;
+  /** Total duration in milliseconds */
+  durationMs: number;
+  /** Viewport scroll position in pixels - single source of truth for visible time range */
+  viewportScrollLeft: number;
+  /** Viewport width in pixels - for calculating visible time range */
+  viewportWidth: number;
+  /** Seek to a specific time */
+  seek: (timeMs: number) => void;
+  /** Zoom in */
+  zoomIn: () => void;
+  /** Zoom out */
+  zoomOut: () => void;
+}
+//#endregion
+export { TimelineState };
+//# sourceMappingURL=timelineStateContext.d.ts.map

package/dist/gui/timeline/timelineStateContext.js

@@ -0,0 +1,42 @@
+import { createContext } from "@lit/context";
+
+//#region src/gui/timeline/timelineStateContext.ts
+const timelineStateContext = createContext("timeline-state");
+/**
+* Convert time to pixel position
+*/
+function timeToPx(timeMs, pixelsPerMs) {
+	return timeMs * pixelsPerMs;
+}
+/**
+* Convert pixel position to time
+*/
+function pxToTime(px, pixelsPerMs) {
+	return px / pixelsPerMs;
+}
+/**
+* Default pixels per ms at 100% zoom (100 pixels per second)
+*/
+const DEFAULT_PIXELS_PER_MS = .1;
+/**
+* Timeline row height in pixels - must match --timeline-row-height CSS variable
+*/
+const TIMELINE_ROW_HEIGHT = 28;
+/**
+* Timeline track content height in pixels - must match --timeline-track-height CSS variable
+*/
+const TIMELINE_TRACK_HEIGHT = 22;
+/**
+* Vertical padding within a row (row height - track height) / 2
+*/
+const TIMELINE_ROW_PADDING = (TIMELINE_ROW_HEIGHT - TIMELINE_TRACK_HEIGHT) / 2;
+/**
+* Calculate zoom scale from pixels per ms
+*/
+function pixelsPerMsToZoom(pixelsPerMs) {
+	return pixelsPerMs / DEFAULT_PIXELS_PER_MS;
+}
+
+//#endregion
+export { DEFAULT_PIXELS_PER_MS, pixelsPerMsToZoom, pxToTime, timeToPx, timelineStateContext };
+//# sourceMappingURL=timelineStateContext.js.map

package/dist/gui/timeline/timelineStateContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timelineStateContext.js","names":[],"sources":["../../../src/gui/timeline/timelineStateContext.ts"],"sourcesContent":["import { createContext } from \"@lit/context\";\n\n/**\n * The core invariant of the timeline system.\n * Everything else (ruler positions, track positions, playhead position) derives from this.\n */\nexport interface TimelineState {\n  /** Pixels per millisecond - the single zoom value */\n  pixelsPerMs: number;\n  /** Current playhead position in milliseconds */\n  currentTimeMs: number;\n  /** Total duration in milliseconds */\n  durationMs: number;\n  /** Viewport scroll position in pixels - single source of truth for visible time range */\n  viewportScrollLeft: number;\n  /** Viewport width in pixels - for calculating visible time range */\n  viewportWidth: number;\n  /** Seek to a specific time */\n  seek: (timeMs: number) => void;\n  /** Zoom in */\n  zoomIn: () => void;\n  /** Zoom out */\n  zoomOut: () => void;\n}\n\nexport const timelineStateContext =\n  createContext<TimelineState>(\"timeline-state\");\n\n/**\n * Convert time to pixel position\n */\nexport function timeToPx(timeMs: number, pixelsPerMs: number): number {\n  return timeMs * pixelsPerMs;\n}\n\n/**\n * Convert pixel position to time\n */\nexport function pxToTime(px: number, pixelsPerMs: number): number {\n  return px / pixelsPerMs;\n}\n\n/**\n * Default pixels per ms at 100% zoom (100 pixels per second)\n */\nexport const DEFAULT_PIXELS_PER_MS = 0.1;\n\n/**\n * Timeline row height in pixels - must match --timeline-row-height CSS variable\n */\nexport const TIMELINE_ROW_HEIGHT = 28;\n\n/**\n * Timeline track content height in pixels - must match --timeline-track-height CSS variable\n */\nexport const TIMELINE_TRACK_HEIGHT = 22;\n\n/**\n * Vertical padding within a row (row height - track height) / 2\n */\nexport const TIMELINE_ROW_PADDING = (TIMELINE_ROW_HEIGHT - TIMELINE_TRACK_HEIGHT) / 2;\n\n/**\n * Calculate pixels per ms from a zoom scale\n */\nexport function zoomToPixelsPerMs(zoomScale: number): number {\n  return DEFAULT_PIXELS_PER_MS * zoomScale;\n}\n\n/**\n * Calculate zoom scale from pixels per ms\n */\nexport function pixelsPerMsToZoom(pixelsPerMs: number): number {\n  return pixelsPerMs / DEFAULT_PIXELS_PER_MS;\n}\n"],"mappings":";;;AAyBA,MAAa,uBACX,cAA6B,iBAAiB;;;;AAKhD,SAAgB,SAAS,QAAgB,aAA6B;AACpE,QAAO,SAAS;;;;;AAMlB,SAAgB,SAAS,IAAY,aAA6B;AAChE,QAAO,KAAK;;;;;AAMd,MAAa,wBAAwB;;;;AAKrC,MAAa,sBAAsB;;;;AAKnC,MAAa,wBAAwB;;;;AAKrC,MAAa,wBAAwB,sBAAsB,yBAAyB;;;;AAYpF,SAAgB,kBAAkB,aAA6B;AAC7D,QAAO,cAAc"}

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

@@ -0,0 +1,264 @@
+import { __decorate } from "../../../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { EFAudio } from "../../../elements/EFAudio.js";
+import { TrackItem } from "./TrackItem.js";
+import { extractWaveformData } from "./waveformUtils.js";
+import { timelineStateContext } from "../timelineStateContext.js";
+import { consume } from "@lit/context";
+import { css, html, nothing } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
+
+//#region src/gui/timeline/tracks/AudioTrack.ts
+/** Padding in pixels to render beyond visible area (for smooth scrolling) */
+const VIRTUAL_RENDER_PADDING_PX = 100;
+let EFAudioTrack = class EFAudioTrack$1 extends TrackItem {
+	constructor(..._args) {
+		super(..._args);
+		this.canvasRef = createRef();
+		this._waveformData = null;
+		this._isLoading = false;
+	}
+	static {
+		this.styles = [...TrackItem.styles, css`
+      .waveform-host {
+        position: absolute;
+        left: 0;
+        top: 2px;
+        right: 0;
+        bottom: 2px;
+        overflow: hidden;
+      }
+      .waveform-canvas {
+        display: block;
+        position: absolute;
+        top: 0;
+        height: 100%;
+        pointer-events: none;
+      }
+    `];
+	}
+	#lastSrc = null;
+	#abortController = null;
+	#resizeObserver;
+	#renderRequested = false;
+	#hostHeight = 0;
+	/**
+	* Load waveform data when the audio source changes
+	*/
+	async #loadWaveformData() {
+		const src = this.element?.src;
+		if (!src || src === this.#lastSrc) return;
+		this.#lastSrc = src;
+		this.#abortController?.abort();
+		this.#abortController = new AbortController();
+		this._isLoading = true;
+		try {
+			const waveformData = await extractWaveformData(src, this.#abortController.signal);
+			if (waveformData) {
+				this._waveformData = waveformData;
+				this.#scheduleRender();
+			}
+		} catch (error) {
+			if (!(error instanceof DOMException && error.name === "AbortError")) console.warn("Failed to load waveform data:", error);
+		} finally {
+			this._isLoading = false;
+		}
+	}
+	/**
+	* Schedule a canvas render on the next animation frame
+	*/
+	#scheduleRender() {
+		if (this.#renderRequested) return;
+		this.#renderRequested = true;
+		requestAnimationFrame(() => {
+			this.#renderRequested = false;
+			this.#renderWaveform();
+		});
+	}
+	/**
+	* Get the track's position info relative to timeline scroll
+	*/
+	#getTrackPositionInfo() {
+		const audio = this.element;
+		const durationMs = audio.durationMs ?? 0;
+		if (durationMs === 0) return null;
+		const pixelsPerMs = this._timelineState?.pixelsPerMs ?? this.pixelsPerMs;
+		const trackWidthPx = durationMs * pixelsPerMs;
+		return {
+			trackStartPx: (audio.startTimeMs ?? 0) * pixelsPerMs,
+			trackWidthPx,
+			viewportScrollLeft: this._timelineState?.viewportScrollLeft ?? 0,
+			viewportWidth: this._timelineState?.viewportWidth ?? 800,
+			pixelsPerMs
+		};
+	}
+	/**
+	* Render the waveform to canvas with virtual rendering.
+	* 
+	* The approach:
+	* 1. Calculate the visible portion of the track (intersection of track and viewport)
+	* 2. Position the canvas at that visible portion within the track
+	* 3. Draw only the waveform data for that visible time range
+	* 4. Update position and content as scroll/zoom changes
+	*/
+	#renderWaveform() {
+		const canvas = this.canvasRef.value;
+		const waveformData = this._waveformData;
+		if (!canvas || !waveformData) return;
+		const positionInfo = this.#getTrackPositionInfo();
+		if (!positionInfo) return;
+		const { trackStartPx, trackWidthPx, viewportScrollLeft, viewportWidth, pixelsPerMs } = positionInfo;
+		const visibleLeftPx = viewportScrollLeft - VIRTUAL_RENDER_PADDING_PX;
+		const visibleRightPx = viewportScrollLeft + 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 = this.#hostHeight || 18;
+		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`;
+		canvas.style.height = `${height}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 = this.element.sourceStartMs ?? 0;
+		const timeStartMs = sourceInMs + visibleStartInTrack / pixelsPerMs;
+		const timeEndMs = sourceInMs + visibleEndInTrack / pixelsPerMs;
+		this.#drawWaveformRegion(ctx, waveformData, 0, visibleWidthPx, height, timeStartMs, timeEndMs);
+	}
+	/**
+	* Draw a region of the waveform to canvas
+	*/
+	#drawWaveformRegion(ctx, waveformData, x, 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 - 2;
+		const color = this.getElementTypeColor();
+		ctx.fillStyle = color;
+		ctx.globalAlpha = .8;
+		ctx.beginPath();
+		const pixelsPerSample = width / sampleCount;
+		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 = x + 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 = x + i * pixelsPerSample;
+			const py = centerY - minValue * halfHeight;
+			ctx.lineTo(px, py);
+		}
+		ctx.closePath();
+		ctx.fill();
+		ctx.globalAlpha = .3;
+		ctx.strokeStyle = color;
+		ctx.lineWidth = 1;
+		ctx.beginPath();
+		ctx.moveTo(x, centerY);
+		ctx.lineTo(x + width, centerY);
+		ctx.stroke();
+		ctx.globalAlpha = 1;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.#loadWaveformData();
+		this.#resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				this.#hostHeight = entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height;
+				this.#scheduleRender();
+			}
+		});
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#abortController?.abort();
+		this.#resizeObserver?.disconnect();
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (this.element?.src !== this.#lastSrc) this.#loadWaveformData();
+		if (changedProperties.has("_timelineState")) this.#scheduleRender();
+		if (this.canvasRef.value && this.#resizeObserver) {
+			const container = this.canvasRef.value.parentElement;
+			if (container) {
+				this.#resizeObserver.disconnect();
+				this.#resizeObserver.observe(container);
+			}
+		}
+		this.#scheduleRender();
+	}
+	contents() {
+		const audio = this.element;
+		if (!(audio instanceof EFAudio)) return nothing;
+		if ((audio.durationMs ?? 0) === 0) return nothing;
+		if (!this._waveformData) return this.#renderPlaceholder();
+		return html`
+      <div class="waveform-host">
+        <canvas ${ref(this.canvasRef)} class="waveform-canvas"></canvas>
+      </div>
+    `;
+	}
+	/**
+	* Render placeholder while loading
+	*/
+	#renderPlaceholder() {
+		return html`
+      <div
+        style="
+          position: absolute;
+          left: 0;
+          top: 2px;
+          bottom: 2px;
+          right: 0;
+          background: linear-gradient(90deg, 
+            ${this.getElementTypeColor()}22 0%, 
+            ${this.getElementTypeColor()}44 50%,
+            ${this.getElementTypeColor()}22 100%
+          );
+          background-size: 200% 100%;
+          animation: ${this._isLoading ? "shimmer 1.5s infinite" : "none"};
+          border-radius: 2px;
+        "
+      ></div>
+      <style>
+        @keyframes shimmer {
+          0% { background-position: 200% 0; }
+          100% { background-position: -200% 0; }
+        }
+      </style>
+    `;
+	}
+};
+__decorate([consume({
+	context: timelineStateContext,
+	subscribe: true
+}), state()], EFAudioTrack.prototype, "_timelineState", void 0);
+__decorate([state()], EFAudioTrack.prototype, "_waveformData", void 0);
+__decorate([state()], EFAudioTrack.prototype, "_isLoading", void 0);
+EFAudioTrack = __decorate([customElement("ef-audio-track")], EFAudioTrack);
+
+//#endregion
+//# sourceMappingURL=AudioTrack.js.map