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

package/dist/gui/EFConfiguration.d.ts

@@ -1,15 +1,21 @@
-import * as lit12 from "lit";
+import * as lit11 from "lit";
 import { LitElement } from "lit";
-import * as lit_html12 from "lit-html";
+import * as lit_html11 from "lit-html";
 
 //#region src/gui/EFConfiguration.d.ts
 declare class EFConfiguration extends LitElement {
-  static styles: lit12.CSSResult[];
+  static styles: lit11.CSSResult[];
   efConfiguration: this;
   apiHost?: string;
   signingURL: string;
-  mediaEngine?: "cloud" | "local";
-  render(): lit_html12.TemplateResult<1>;
+  /**
+   * Media engine selection:
+   * - "cloud": Use JitMediaEngine for http/https URLs, AssetMediaEngine for local paths (default)
+   * - "local": Force AssetMediaEngine for all sources (uses @ef-* URLs)
+   * - "jit": Force JitMediaEngine for all sources (uses /api/v1/transcode/* URLs)
+   */
+  mediaEngine?: "cloud" | "local" | "jit";
+  render(): lit_html11.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/EFConfiguration.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFConfiguration.js","names":["EFConfiguration"],"sources":["../../src/gui/EFConfiguration.ts"],"sourcesContent":["import { createContext, provide } from \"@lit/context\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\n\nexport const efConfigurationContext = createContext<EFConfiguration | null>(\n  Symbol(\"efConfigurationContext\"),\n);\n\n@customElement(\"ef-configuration\")\nexport class EFConfiguration extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: contents;\n      }\n    `,\n  ];\n\n  @provide({ context: efConfigurationContext })\n  efConfiguration = this;\n\n  @property({ type: String, attribute: \"api-host\" })\n  apiHost?: string;\n\n  @property({ type: String, attribute: \"signing-url\" })\n  signingURL = \"/@ef-sign-url\";\n\n  @property({ type: String, attribute: \"media-engine\" })\n  mediaEngine?: \"cloud\" | \"local\" = \"cloud\";\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-configuration\": EFConfiguration;\n  }\n}\n"],"mappings":";;;;;;AAIA,MAAa,yBAAyB,cACpC,OAAO,yBAAyB,CACjC;AAGM,4BAAMA,0BAAwB,WAAW;;;yBAU5B;oBAML;qBAGqB;;;gBAlBlB,CACd,GAAG;;;;MAKJ;;CAcD,SAAS;AACP,SAAO,IAAI;;;YAbZ,QAAQ,EAAE,SAAS,wBAAwB,CAAC;YAG5C,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAY,CAAC;YAGjD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAe,CAAC;YAGpD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAgB,CAAC;8BAnBvD,cAAc,mBAAmB"}
+{"version":3,"file":"EFConfiguration.js","names":["EFConfiguration"],"sources":["../../src/gui/EFConfiguration.ts"],"sourcesContent":["import { createContext, provide } from \"@lit/context\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\n\nexport const efConfigurationContext = createContext<EFConfiguration | null>(\n  Symbol(\"efConfigurationContext\"),\n);\n\n@customElement(\"ef-configuration\")\nexport class EFConfiguration extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: contents;\n      }\n    `,\n  ];\n\n  @provide({ context: efConfigurationContext })\n  efConfiguration = this;\n\n  @property({ type: String, attribute: \"api-host\" })\n  apiHost?: string;\n\n  @property({ type: String, attribute: \"signing-url\" })\n  signingURL = \"/@ef-sign-url\";\n\n  /**\n   * Media engine selection:\n   * - \"cloud\": Use JitMediaEngine for http/https URLs, AssetMediaEngine for local paths (default)\n   * - \"local\": Force AssetMediaEngine for all sources (uses @ef-* URLs)\n   * - \"jit\": Force JitMediaEngine for all sources (uses /api/v1/transcode/* URLs)\n   */\n  @property({ type: String, attribute: \"media-engine\" })\n  mediaEngine?: \"cloud\" | \"local\" | \"jit\" = \"cloud\";\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-configuration\": EFConfiguration;\n  }\n}\n"],"mappings":";;;;;;AAIA,MAAa,yBAAyB,cACpC,OAAO,yBAAyB,CACjC;AAGM,4BAAMA,0BAAwB,WAAW;;;yBAU5B;oBAML;qBAS6B;;;gBAxB1B,CACd,GAAG;;;;MAKJ;;CAoBD,SAAS;AACP,SAAO,IAAI;;;YAnBZ,QAAQ,EAAE,SAAS,wBAAwB,CAAC;YAG5C,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAY,CAAC;YAGjD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAe,CAAC;YASpD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAgB,CAAC;8BAzBvD,cAAc,mBAAmB"}

package/dist/gui/EFControls.d.ts

@@ -1,7 +1,7 @@
 import { TemporalMixinInterface } from "../elements/EFTemporal.js";
 import { ControllableInterface } from "./Controllable.js";
 import { FocusContext } from "./focusContext.js";
-import * as lit23 from "lit";
+import * as lit26 from "lit";
 import { LitElement, PropertyValueMap } from "lit";
 
 //#region src/gui/EFControls.d.ts
@@ -26,7 +26,7 @@ import { LitElement, PropertyValueMap } from "lit";
  */
 declare class EFControls extends LitElement {
   #private;
-  static styles: lit23.CSSResult;
+  static styles: lit26.CSSResult;
   createRenderRoot(): this;
   /**
    * The ID of the ef-preview element to control

package/dist/gui/EFControls.js

@@ -2,11 +2,13 @@ import { currentTimeContext } from "./currentTimeContext.js";
 import { durationContext } from "./durationContext.js";
 import { loopContext, playingContext } from "./playingContext.js";
 import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { isEFTemporal } from "../elements/EFTemporal.js";
 import { efContext } from "./efContext.js";
 import { focusContext } from "./focusContext.js";
 import { focusedElementContext } from "./focusedElementContext.js";
 import { targetTemporalContext } from "./ContextMixin.js";
 import { TargetController } from "../elements/TargetController.js";
+import { createDirectTemporalSubscription, determineTargetType } from "./Controllable.js";
 import { attachContextRoot } from "../attachContextRoot.js";
 import { createContext, provide } from "@lit/context";
 import { LitElement, css } from "lit";
@@ -59,23 +61,117 @@ let EFControls = class EFControls$1 extends LitElement {
 		return this;
 	}
 	#targetController = new TargetController(this);
-	#proxyUnsubscribeMap = /* @__PURE__ */ new Map();
+	#contextUnsubscribeMap = /* @__PURE__ */ new Map();
+	#directTemporalSubscription = null;
 	#unsubscribe() {
-		for (const unsubscribe of this.#proxyUnsubscribeMap.values()) unsubscribe();
-		this.#proxyUnsubscribeMap.clear();
+		this.#subscribeAbortController?.abort();
+		this.#subscribeAbortController = null;
+		for (const unsubscribe of this.#contextUnsubscribeMap.values()) unsubscribe();
+		this.#contextUnsubscribeMap.clear();
+		if (this.#directTemporalSubscription) {
+			this.#directTemporalSubscription.unsubscribe();
+			this.#directTemporalSubscription = null;
+		}
+	}
+	#subscribeAbortController = null;
+	#subscribe() {
+		if (!this.targetElement) return;
+		this.#subscribeAbortController?.abort();
+		this.#subscribeAbortController = new AbortController();
+		switch (determineTargetType(this.targetElement)) {
+			case "context-provider":
+				this.#subscribeToContextProvider();
+				break;
+			case "direct-temporal":
+				this.#subscribeToDirectTemporal();
+				break;
+			case "none":
+				this.#waitForTemporalToInitialize();
+				break;
+		}
+	}
+	/**
+	* Wait for a temporal element to initialize its playbackController.
+	* This handles the case where we target a temporal element before it has
+	* completed initialization and created its playbackController.
+	* 
+	* Note: playbackController is created in EFTemporal's connectedCallback via
+	* `this.updateComplete.then(() => this.didBecomeRoot())`, so we need to wait
+	* past updateComplete for the .then() callback to run.
+	*/
+	async #waitForTemporalToInitialize() {
+		if (!this.targetElement || !isEFTemporal(this.targetElement)) return;
+		const temporal = this.targetElement;
+		const signal = this.#subscribeAbortController?.signal;
+		await temporal.updateComplete;
+		if (signal?.aborted) return;
+		if (!temporal.playbackController) {
+			await new Promise((resolve) => requestAnimationFrame(resolve));
+			if (signal?.aborted) return;
+			await temporal.updateComplete;
+			if (signal?.aborted) return;
+		}
+		if (temporal.playbackController) this.#subscribeToDirectTemporal();
+	}
+	/**
+	* Subscribe to a context-providing target (like EFPreview).
+	* Uses Lit Context dispatch mechanism.
+	*/
+	#subscribeToContextProvider() {
+		if (!this.targetElement) return;
+		for (const [callback, context] of proxiedContexts) {
+			const event = new ContextRequestEvent(context, this, (value, unsubscribe) => {
+				callback(this, value);
+				this.#contextUnsubscribeMap.set(context, unsubscribe);
+			}, true);
+			this.targetElement.dispatchEvent(event);
+		}
+	}
+	/**
+	* Subscribe to a direct temporal element's playback controller.
+	* Used when targeting ef-timegroup, ef-video, ef-audio directly without ef-preview wrapper.
+	*/
+	async #subscribeToDirectTemporal() {
+		if (!this.targetElement || !isEFTemporal(this.targetElement)) return;
+		const temporal = this.targetElement;
+		const signal = this.#subscribeAbortController?.signal;
+		await temporal.updateComplete;
+		if (signal?.aborted) return;
+		if (!temporal.playbackController) {
+			await new Promise((resolve) => requestAnimationFrame(resolve));
+			if (signal?.aborted) return;
+			await temporal.updateComplete;
+			if (signal?.aborted) return;
+		}
+		if (!temporal.playbackController) return;
+		this.#directTemporalSubscription = createDirectTemporalSubscription(temporal, {
+			onPlayingChange: (value) => {
+				this.playing = value;
+			},
+			onLoopChange: (value) => {
+				this.loop = value;
+			},
+			onCurrentTimeMsChange: (value) => {
+				this.currentTimeMs = value;
+			},
+			onDurationMsChange: (value) => {
+				this.durationMs = value;
+			},
+			onTargetTemporalChange: (value) => {
+				this.targetTemporal = value;
+			},
+			onFocusedElementChange: (value) => {
+				this.focusedElement = value;
+			}
+		});
+	}
+	#resubscribe() {
+		this.#unsubscribe();
+		this.#subscribe();
 	}
 	updated(changedProperties) {
 		super.updated(changedProperties);
-		if (changedProperties.has("targetElement")) {
-			this.#unsubscribe();
-			if (this.targetElement) for (const [callback, context] of proxiedContexts) {
-				const event = new ContextRequestEvent(context, this, (value, unsubscribe) => {
-					callback(this, value);
-					this.#proxyUnsubscribeMap.set(context, unsubscribe);
-				}, true);
-				this.targetElement.dispatchEvent(event);
-			}
-		}
+		if (changedProperties.has("targetElement")) this.#resubscribe();
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();

package/dist/gui/EFControls.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFControls.js","names":["EFControls","#proxyUnsubscribeMap","#unsubscribe"],"sources":["../../src/gui/EFControls.ts"],"sourcesContent":["import { type Context, createContext, provide } from \"@lit/context\";\nimport { css, LitElement, type PropertyValueMap } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { attachContextRoot } from \"../attachContextRoot.js\";\nimport type { TemporalMixinInterface } from \"../elements/EFTemporal.js\";\nimport { TargetController } from \"../elements/TargetController.js\";\nimport { targetTemporalContext } from \"./ContextMixin.js\";\nimport type { ControllableInterface } from \"./Controllable.js\";\nimport { currentTimeContext } from \"./currentTimeContext.js\";\nimport { durationContext } from \"./durationContext.js\";\nimport { efContext } from \"./efContext.js\";\nimport { type FocusContext, focusContext } from \"./focusContext.js\";\nimport { focusedElementContext } from \"./focusedElementContext.js\";\nimport { loopContext, playingContext } from \"./playingContext.js\";\n\nattachContextRoot();\n\nclass ContextRequestEvent extends Event {\n  context: Context<any, any>;\n  contextTarget: Element;\n  callback: (proxy: EFControls, value: any) => void;\n  subscribe: boolean;\n\n  constructor(\n    context: Context<any, any>,\n    contextTarget: Element,\n    callback: (proxy: EFControls, value: any) => void,\n    subscribe: boolean,\n  ) {\n    super(\"context-request\", { bubbles: true, composed: true });\n    this.context = context;\n    this.contextTarget = contextTarget;\n    this.callback = callback;\n    this.subscribe = subscribe ?? false;\n  }\n}\n\nconst proxiedContexts = [\n  [\n    // biome-ignore lint/suspicious/noAssignInExpressions: Intentional assignment in callback\n    (proxy: EFControls, value: boolean) => (proxy.playing = value),\n    playingContext,\n  ],\n  [\n    // biome-ignore lint/suspicious/noAssignInExpressions: Intentional assignment in callback\n    (proxy: EFControls, value: boolean) => (proxy.loop = value),\n    loopContext,\n  ],\n  [\n    // biome-ignore lint/suspicious/noAssignInExpressions: Intentional assignment in callback\n    (proxy: EFControls, value: number) => (proxy.currentTimeMs = value),\n    currentTimeContext,\n  ],\n  [\n    // biome-ignore lint/suspicious/noAssignInExpressions: Intentional assignment in callback\n    (proxy: EFControls, value: number) => (proxy.durationMs = value),\n    durationContext,\n  ],\n  [\n    (proxy: EFControls, value: TemporalMixinInterface) =>\n      // biome-ignore lint/suspicious/noAssignInExpressions: Intentional assignment in callback\n      (proxy.targetTemporal = value),\n    targetTemporalContext,\n  ],\n  [\n    // biome-ignore lint/suspicious/noAssignInExpressions: Intentional assignment in callback\n    (proxy: EFControls, value: HTMLElement) => (proxy.focusedElement = value),\n    focusedElementContext,\n  ],\n  [\n    (proxy: EFControls, value: HTMLElement) =>\n      // biome-ignore lint/suspicious/noAssignInExpressions: Intentional assignment in callback\n      (proxy.focusContext.focusedElement = value),\n    focusContext,\n  ],\n] as const;\n\nexport const testContext = createContext<string | null>(\"test\");\n\n/**\n * EFControls provides a way to control an ef-preview element that is not a direct ancestor.\n * It bridges the contexts from a target preview element to its children controls.\n *\n * Usage:\n * ```html\n * <ef-preview id=\"my-preview\">...</ef-preview>\n *\n * <ef-controls target=\"my-preview\">\n *   <ef-toggle-play>\n *     <button slot=\"play\">Play</button>\n *     <button slot=\"pause\">Pause</button>\n *   </ef-toggle-play>\n *   <ef-scrubber></ef-scrubber>\n *   <ef-time-display></ef-time-display>\n * </ef-controls>\n * ```\n */\n@customElement(\"ef-controls\")\nexport class EFControls extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n    }\n  `;\n\n  createRenderRoot() {\n    return this;\n  }\n\n  /**\n   * The ID of the ef-preview element to control\n   */\n  @property({ type: String })\n  target = \"\";\n\n  /**\n   * The target element (set by TargetController)\n   */\n  @provide({ context: efContext })\n  @state()\n  targetElement: ControllableInterface | null = null;\n\n  @provide({ context: playingContext })\n  @state()\n  playing = false;\n\n  @provide({ context: loopContext })\n  @state()\n  loop = false;\n\n  @provide({ context: currentTimeContext })\n  @state()\n  currentTimeMs = 0;\n\n  @provide({ context: durationContext })\n  @state()\n  durationMs = 0;\n\n  @provide({ context: targetTemporalContext })\n  @state()\n  targetTemporal: TemporalMixinInterface | null = null;\n\n  @provide({ context: focusedElementContext })\n  @state()\n  focusedElement?: HTMLElement;\n\n  @provide({ context: focusContext })\n  focusContext = this as FocusContext;\n\n  // @ts-expect-error controller is intentionally not referenced directly\n  // biome-ignore lint/correctness/noUnusedPrivateClassMembers: Used for side effects\n  #targetController = new TargetController(this);\n\n  #proxyUnsubscribeMap = new Map<Context<any, any>, () => void>();\n\n  #unsubscribe() {\n    for (const unsubscribe of this.#proxyUnsubscribeMap.values()) {\n      unsubscribe();\n    }\n    this.#proxyUnsubscribeMap.clear();\n  }\n\n  updated(changedProperties: PropertyValueMap<this>) {\n    super.updated(changedProperties);\n    if (changedProperties.has(\"targetElement\")) {\n      this.#unsubscribe();\n\n      if (this.targetElement) {\n        for (const [callback, context] of proxiedContexts) {\n          const event = new ContextRequestEvent(\n            context,\n            this,\n            (value, unsubscribe) => {\n              callback(this, value as never);\n              this.#proxyUnsubscribeMap.set(context, unsubscribe);\n            },\n            true,\n          );\n          this.targetElement.dispatchEvent(event);\n        }\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#unsubscribe();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-controls\": EFControls;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,mBAAmB;AAEnB,IAAM,sBAAN,cAAkC,MAAM;CAMtC,YACE,SACA,eACA,UACA,WACA;AACA,QAAM,mBAAmB;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC;AAC3D,OAAK,UAAU;AACf,OAAK,gBAAgB;AACrB,OAAK,WAAW;AAChB,OAAK,YAAY,aAAa;;;AAIlC,MAAM,kBAAkB;CACtB,EAEG,OAAmB,UAAoB,MAAM,UAAU,OACxD,eACD;CACD,EAEG,OAAmB,UAAoB,MAAM,OAAO,OACrD,YACD;CACD,EAEG,OAAmB,UAAmB,MAAM,gBAAgB,OAC7D,mBACD;CACD,EAEG,OAAmB,UAAmB,MAAM,aAAa,OAC1D,gBACD;CACD,EACG,OAAmB,UAEjB,MAAM,iBAAiB,OAC1B,sBACD;CACD,EAEG,OAAmB,UAAwB,MAAM,iBAAiB,OACnE,sBACD;CACD,EACG,OAAmB,UAEjB,MAAM,aAAa,iBAAiB,OACvC,aACD;CACF;AAED,MAAa,cAAc,cAA6B,OAAO;AAqBxD,uBAAMA,qBAAmB,WAAW;;;gBAehC;uBAOqC;iBAIpC;cAIH;uBAIS;oBAIH;wBAImC;sBAOjC;;;gBAhDC,GAAG;;;;;;CAMnB,mBAAmB;AACjB,SAAO;;CA6CT,oBAAoB,IAAI,iBAAiB,KAAK;CAE9C,uCAAuB,IAAI,KAAoC;CAE/D,eAAe;AACb,OAAK,MAAM,eAAe,MAAKC,oBAAqB,QAAQ,CAC1D,cAAa;AAEf,QAAKA,oBAAqB,OAAO;;CAGnC,QAAQ,mBAA2C;AACjD,QAAM,QAAQ,kBAAkB;AAChC,MAAI,kBAAkB,IAAI,gBAAgB,EAAE;AAC1C,SAAKC,aAAc;AAEnB,OAAI,KAAK,cACP,MAAK,MAAM,CAAC,UAAU,YAAY,iBAAiB;IACjD,MAAM,QAAQ,IAAI,oBAChB,SACA,OACC,OAAO,gBAAgB;AACtB,cAAS,MAAM,MAAe;AAC9B,WAAKD,oBAAqB,IAAI,SAAS,YAAY;OAErD,KACD;AACD,SAAK,cAAc,cAAc,MAAM;;;;CAM/C,uBAAuB;AACrB,QAAM,sBAAsB;AAC5B,QAAKC,aAAc;;;YA1EpB,SAAS,EAAE,MAAM,QAAQ,CAAC;YAM1B,QAAQ,EAAE,SAAS,WAAW,CAAC,EAC/B,OAAO;YAGP,QAAQ,EAAE,SAAS,gBAAgB,CAAC,EACpC,OAAO;YAGP,QAAQ,EAAE,SAAS,aAAa,CAAC,EACjC,OAAO;YAGP,QAAQ,EAAE,SAAS,oBAAoB,CAAC,EACxC,OAAO;YAGP,QAAQ,EAAE,SAAS,iBAAiB,CAAC,EACrC,OAAO;YAGP,QAAQ,EAAE,SAAS,uBAAuB,CAAC,EAC3C,OAAO;YAGP,QAAQ,EAAE,SAAS,uBAAuB,CAAC,EAC3C,OAAO;YAGP,QAAQ,EAAE,SAAS,cAAc,CAAC;yBAjDpC,cAAc,cAAc"}
+{"version":3,"file":"EFControls.js","names":["EFControls","#subscribeAbortController","#contextUnsubscribeMap","#directTemporalSubscription","#subscribeToContextProvider","#subscribeToDirectTemporal","#waitForTemporalToInitialize","#unsubscribe","#subscribe","#resubscribe"],"sources":["../../src/gui/EFControls.ts"],"sourcesContent":["import { type Context, createContext, provide } from \"@lit/context\";\nimport { css, LitElement, type PropertyValueMap } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { attachContextRoot } from \"../attachContextRoot.js\";\nimport { isEFTemporal, type TemporalMixinInterface } from \"../elements/EFTemporal.js\";\nimport { TargetController } from \"../elements/TargetController.js\";\nimport { targetTemporalContext } from \"./ContextMixin.js\";\nimport {\n  type ControllableInterface,\n  type ControllableSubscription,\n  createDirectTemporalSubscription,\n  determineTargetType,\n} from \"./Controllable.js\";\nimport { currentTimeContext } from \"./currentTimeContext.js\";\nimport { durationContext } from \"./durationContext.js\";\nimport { efContext } from \"./efContext.js\";\nimport { type FocusContext, focusContext } from \"./focusContext.js\";\nimport { focusedElementContext } from \"./focusedElementContext.js\";\nimport { loopContext, playingContext } from \"./playingContext.js\";\n\nattachContextRoot();\n\nclass ContextRequestEvent extends Event {\n  context: Context<any, any>;\n  contextTarget: Element;\n  callback: (proxy: EFControls, value: any) => void;\n  subscribe: boolean;\n\n  constructor(\n    context: Context<any, any>,\n    contextTarget: Element,\n    callback: (proxy: EFControls, value: any) => void,\n    subscribe: boolean,\n  ) {\n    super(\"context-request\", { bubbles: true, composed: true });\n    this.context = context;\n    this.contextTarget = contextTarget;\n    this.callback = callback;\n    this.subscribe = subscribe ?? false;\n  }\n}\n\nconst proxiedContexts = [\n  [\n    // biome-ignore lint/suspicious/noAssignInExpressions: Intentional assignment in callback\n    (proxy: EFControls, value: boolean) => (proxy.playing = value),\n    playingContext,\n  ],\n  [\n    // biome-ignore lint/suspicious/noAssignInExpressions: Intentional assignment in callback\n    (proxy: EFControls, value: boolean) => (proxy.loop = value),\n    loopContext,\n  ],\n  [\n    // biome-ignore lint/suspicious/noAssignInExpressions: Intentional assignment in callback\n    (proxy: EFControls, value: number) => (proxy.currentTimeMs = value),\n    currentTimeContext,\n  ],\n  [\n    // biome-ignore lint/suspicious/noAssignInExpressions: Intentional assignment in callback\n    (proxy: EFControls, value: number) => (proxy.durationMs = value),\n    durationContext,\n  ],\n  [\n    (proxy: EFControls, value: TemporalMixinInterface) =>\n      // biome-ignore lint/suspicious/noAssignInExpressions: Intentional assignment in callback\n      (proxy.targetTemporal = value),\n    targetTemporalContext,\n  ],\n  [\n    // biome-ignore lint/suspicious/noAssignInExpressions: Intentional assignment in callback\n    (proxy: EFControls, value: HTMLElement) => (proxy.focusedElement = value),\n    focusedElementContext,\n  ],\n  [\n    (proxy: EFControls, value: HTMLElement) =>\n      // biome-ignore lint/suspicious/noAssignInExpressions: Intentional assignment in callback\n      (proxy.focusContext.focusedElement = value),\n    focusContext,\n  ],\n] as const;\n\nexport const testContext = createContext<string | null>(\"test\");\n\n/**\n * EFControls provides a way to control an ef-preview element that is not a direct ancestor.\n * It bridges the contexts from a target preview element to its children controls.\n *\n * Usage:\n * ```html\n * <ef-preview id=\"my-preview\">...</ef-preview>\n *\n * <ef-controls target=\"my-preview\">\n *   <ef-toggle-play>\n *     <button slot=\"play\">Play</button>\n *     <button slot=\"pause\">Pause</button>\n *   </ef-toggle-play>\n *   <ef-scrubber></ef-scrubber>\n *   <ef-time-display></ef-time-display>\n * </ef-controls>\n * ```\n */\n@customElement(\"ef-controls\")\nexport class EFControls extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n    }\n  `;\n\n  createRenderRoot() {\n    return this;\n  }\n\n  /**\n   * The ID of the ef-preview element to control\n   */\n  @property({ type: String })\n  target = \"\";\n\n  /**\n   * The target element (set by TargetController)\n   */\n  @provide({ context: efContext })\n  @state()\n  targetElement: ControllableInterface | null = null;\n\n  @provide({ context: playingContext })\n  @state()\n  playing = false;\n\n  @provide({ context: loopContext })\n  @state()\n  loop = false;\n\n  @provide({ context: currentTimeContext })\n  @state()\n  currentTimeMs = 0;\n\n  @provide({ context: durationContext })\n  @state()\n  durationMs = 0;\n\n  @provide({ context: targetTemporalContext })\n  @state()\n  targetTemporal: TemporalMixinInterface | null = null;\n\n  @provide({ context: focusedElementContext })\n  @state()\n  focusedElement?: HTMLElement;\n\n  @provide({ context: focusContext })\n  focusContext = this as FocusContext;\n\n  // @ts-expect-error controller is intentionally not referenced directly\n  // biome-ignore lint/correctness/noUnusedPrivateClassMembers: Used for side effects\n  #targetController = new TargetController(this);\n\n  // Subscription tracking for different target types\n  #contextUnsubscribeMap = new Map<Context<any, any>, () => void>();\n  #directTemporalSubscription: ControllableSubscription | null = null;\n\n  #unsubscribe() {\n    // Abort any pending async subscription attempts\n    this.#subscribeAbortController?.abort();\n    this.#subscribeAbortController = null;\n\n    // Unsubscribe from context-provider subscriptions\n    for (const unsubscribe of this.#contextUnsubscribeMap.values()) {\n      unsubscribe();\n    }\n    this.#contextUnsubscribeMap.clear();\n\n    // Unsubscribe from direct-temporal subscription\n    if (this.#directTemporalSubscription) {\n      this.#directTemporalSubscription.unsubscribe();\n      this.#directTemporalSubscription = null;\n    }\n\n    // Note: We don't reset state here because:\n    // 1. During resubscribe, the new subscription will immediately provide values\n    // 2. During disconnect, the element is being removed anyway\n    // Resetting state would cause race conditions with context consumers\n  }\n\n  #subscribeAbortController: AbortController | null = null;\n\n  #subscribe() {\n    if (!this.targetElement) return;\n\n    // Cancel any pending async subscription\n    this.#subscribeAbortController?.abort();\n    this.#subscribeAbortController = new AbortController();\n\n    const targetType = determineTargetType(this.targetElement);\n\n    switch (targetType) {\n      case \"context-provider\":\n        this.#subscribeToContextProvider();\n        break;\n      case \"direct-temporal\":\n        this.#subscribeToDirectTemporal();\n        break;\n      case \"none\":\n        // Target might be a temporal that hasn't initialized yet\n        // Try to wait for it to become controllable\n        this.#waitForTemporalToInitialize();\n        break;\n    }\n  }\n\n  /**\n   * Wait for a temporal element to initialize its playbackController.\n   * This handles the case where we target a temporal element before it has\n   * completed initialization and created its playbackController.\n   * \n   * Note: playbackController is created in EFTemporal's connectedCallback via\n   * `this.updateComplete.then(() => this.didBecomeRoot())`, so we need to wait\n   * past updateComplete for the .then() callback to run.\n   */\n  async #waitForTemporalToInitialize() {\n    if (!this.targetElement || !isEFTemporal(this.targetElement)) return;\n\n    const temporal = this.targetElement as TemporalMixinInterface & HTMLElement;\n    const signal = this.#subscribeAbortController?.signal;\n\n    // Wait for the element to finish its update cycle\n    await temporal.updateComplete;\n    if (signal?.aborted) return;\n\n    // playbackController is created in a .then() callback after updateComplete,\n    // so we need to wait for that microtask to complete\n    if (!temporal.playbackController) {\n      await new Promise((resolve) => requestAnimationFrame(resolve));\n      if (signal?.aborted) return;\n      await temporal.updateComplete;\n      if (signal?.aborted) return;\n    }\n\n    // Check again if it now has a playbackController\n    if (temporal.playbackController) {\n      this.#subscribeToDirectTemporal();\n    }\n  }\n\n  /**\n   * Subscribe to a context-providing target (like EFPreview).\n   * Uses Lit Context dispatch mechanism.\n   */\n  #subscribeToContextProvider() {\n    if (!this.targetElement) return;\n\n    for (const [callback, context] of proxiedContexts) {\n      const event = new ContextRequestEvent(\n        context,\n        this,\n        (value, unsubscribe) => {\n          callback(this, value as never);\n          this.#contextUnsubscribeMap.set(context, unsubscribe);\n        },\n        true,\n      );\n      this.targetElement.dispatchEvent(event);\n    }\n  }\n\n  /**\n   * Subscribe to a direct temporal element's playback controller.\n   * Used when targeting ef-timegroup, ef-video, ef-audio directly without ef-preview wrapper.\n   */\n  async #subscribeToDirectTemporal() {\n    if (!this.targetElement || !isEFTemporal(this.targetElement)) return;\n\n    const temporal = this.targetElement as TemporalMixinInterface & HTMLElement;\n    const signal = this.#subscribeAbortController?.signal;\n\n    // Wait for the temporal element to complete initialization\n    // This ensures playbackController exists\n    await temporal.updateComplete;\n    if (signal?.aborted) return;\n\n    // If playbackController still doesn't exist, the element might need another update cycle\n    if (!temporal.playbackController) {\n      // Wait one more frame for didBecomeRoot to create the controller\n      await new Promise((resolve) => requestAnimationFrame(resolve));\n      if (signal?.aborted) return;\n      await temporal.updateComplete;\n      if (signal?.aborted) return;\n    }\n\n    if (!temporal.playbackController) {\n      // Still no controller - this element is likely a nested temporal\n      return;\n    }\n\n    this.#directTemporalSubscription = createDirectTemporalSubscription(\n      temporal,\n      {\n        onPlayingChange: (value) => {\n          this.playing = value;\n        },\n        onLoopChange: (value) => {\n          this.loop = value;\n        },\n        onCurrentTimeMsChange: (value) => {\n          this.currentTimeMs = value;\n        },\n        onDurationMsChange: (value) => {\n          this.durationMs = value;\n        },\n        onTargetTemporalChange: (value) => {\n          this.targetTemporal = value;\n        },\n        onFocusedElementChange: (value) => {\n          this.focusedElement = value;\n        },\n      },\n    );\n  }\n\n  #resubscribe() {\n    this.#unsubscribe();\n    this.#subscribe();\n  }\n  updated(changedProperties: PropertyValueMap<this>) {\n    super.updated(changedProperties);\n    if (changedProperties.has(\"targetElement\")) {\n      this.#resubscribe();\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#unsubscribe();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-controls\": EFControls;\n  }\n}\n"],"mappings":"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"}

package/dist/gui/EFDial.d.ts

@@ -1,6 +1,6 @@
-import * as lit22 from "lit";
+import * as lit25 from "lit";
 import { LitElement } from "lit";
-import * as lit_html20 from "lit-html";
+import * as lit_html25 from "lit-html";
 
 //#region src/gui/EFDial.d.ts
 interface DialChangeDetail {
@@ -13,12 +13,12 @@ declare class EFDial extends LitElement {
   private isDragging;
   private dragStartAngle;
   private dragStartValue;
-  static styles: lit22.CSSResult;
+  static styles: lit25.CSSResult;
   private getAngleFromPoint;
   private handlePointerDown;
   private handlePointerMove;
   private handlePointerUp;
-  render(): lit_html20.TemplateResult<1>;
+  render(): lit_html25.TemplateResult<1>;
 }
 //#endregion
 export { DialChangeDetail, EFDial };

package/dist/gui/EFFilmstrip.d.ts

@@ -1,234 +1,31 @@
 import { TemporalMixinInterface } from "../elements/EFTemporal.js";
-import { EFTimegroup } from "../elements/EFTimegroup.js";
-import { EFImage } from "../elements/EFImage.js";
-import { EFAudio } from "../elements/EFAudio.js";
-import { EFVideo } from "../elements/EFVideo.js";
-import { Caption } from "../elements/EFCaptions.js";
-import { EFTextSegment } from "../elements/EFTextSegment.js";
-import { TimegroupController } from "../elements/TimegroupController.js";
-import { FocusContext } from "./focusContext.js";
-import * as lit15 from "lit";
-import { LitElement, PropertyValueMap, ReactiveController, TemplateResult, nothing } from "lit";
+import { LitElement } from "lit";
+import * as lit_html14 from "lit-html";
 import * as lit_html_directives_ref0 from "lit-html/directives/ref";
 
 //#region src/gui/EFFilmstrip.d.ts
-declare class ElementFilmstripController implements ReactiveController {
-  private host;
-  private filmstrip;
-  constructor(host: LitElement, filmstrip: FilmstripItem);
-  remove(): void;
-  hostDisconnected(): void;
-  hostUpdated(): void;
-}
-declare const FilmstripItem_base: typeof LitElement;
-declare class FilmstripItem extends FilmstripItem_base {
-  static styles: lit15.CSSResult[];
-  focusContext?: FocusContext;
-  focusedElement?: HTMLElement | null;
-  get isFocused(): boolean;
-  element: TemporalMixinInterface & LitElement;
-  pixelsPerMs: number;
-  get gutterStyles(): {
-    position: string;
-    left: string;
-    width: string;
-  };
-  get trimPortionStyles(): {
-    width: string;
-    left: string;
-  };
-  render(): TemplateResult<1>;
-  renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing;
-  hideSelectors?: string[];
-  showSelectors?: string[];
-  contents(): TemplateResult<1>;
-  animations(): (TemplateResult<1> | typeof nothing)[];
-  protected filmstripController?: ElementFilmstripController;
-  update(changedProperties: Map<string | number | symbol, unknown>): void;
-}
-declare class EFAudioFilmstrip extends FilmstripItem {
-  contents(): TemplateResult<1>;
-}
-declare class EFVideoFilmstrip extends FilmstripItem {
-  contents(): TemplateResult<1>;
-}
-declare class EFCaptionsFilmstrip extends FilmstripItem {
-  render(): TemplateResult<1>;
-  renderCaptionsData(captionsData: Caption | null | undefined): TemplateResult<1>;
-  renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing;
-}
-declare class EFCaptionsActiveWordFilmstrip extends FilmstripItem {
-  get captionsTrackStyles(): {
-    position: string;
-    left: string;
-    width: string;
-  };
-  render(): TemplateResult<1>;
-}
-declare class EFCaptionsSegmentFilmstrip extends FilmstripItem {
-  get captionsTrackStyles(): {
-    position: string;
-    left: string;
-    width: string;
-  };
-  render(): TemplateResult<1>;
-}
-declare class EFCaptionsBeforeWordFilmstrip extends FilmstripItem {
-  get captionsTrackStyles(): {
-    position: string;
-    left: string;
-    width: string;
-  };
-  render(): TemplateResult<1>;
-}
-declare class EFCaptionsAfterWordFilmstrip extends FilmstripItem {
-  get captionsTrackStyles(): {
-    position: string;
-    left: string;
-    width: string;
-  };
-  render(): TemplateResult<1>;
-}
-declare class EFWaveformFilmstrip extends FilmstripItem {
-  contents(): TemplateResult<1>;
-  renderChildren(): typeof nothing;
-}
-declare class EFTextFilmstrip extends FilmstripItem {
-  render(): TemplateResult<1>;
-  renderTextSegments(segments: EFTextSegment[]): TemplateResult<1> | TemplateResult<1>[];
-  renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing;
-}
-declare class EFTextSegmentFilmstrip extends FilmstripItem {
-  get textTrackStyles(): {
-    position: string;
-    left: string;
-    width: string;
-  };
-  render(): TemplateResult<1>;
-}
-declare class EFImageFilmstrip extends FilmstripItem {
-  contents(): TemplateResult<1>;
-}
-declare class EFTimegroupFilmstrip extends FilmstripItem {
-  contents(): TemplateResult<1>;
-}
-declare class EFHTMLFilmstrip extends FilmstripItem {
-  contents(): TemplateResult<1>;
-}
-declare const EFHierarchyItem_base: typeof LitElement;
-declare class EFHierarchyItem<ElementType extends HTMLElement = HTMLElement> extends EFHierarchyItem_base {
-  element: ElementType;
-  focusContext?: FocusContext;
-  focusedElement?: HTMLElement | null;
-  hideSelectors?: string[];
-  showSelectors?: string[];
-  get icon(): TemplateResult<1> | string;
-  get isFocused(): boolean;
-  displayLabel(): TemplateResult<1> | string | typeof nothing;
-  render(): TemplateResult<1>;
-  renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing;
-}
-declare class EFTimegroupHierarchyItem extends EFHierarchyItem<EFTimegroup> {
-  get icon(): string;
-  displayLabel(): string | TemplateResult<1> | typeof nothing;
-}
-declare class EFAudioHierarchyItem extends EFHierarchyItem<EFAudio> {
-  get icon(): string;
-  displayLabel(): string;
-}
-declare class EFVideoHierarchyItem extends EFHierarchyItem<EFVideo> {
-  get icon(): string;
-  displayLabel(): string;
-}
-declare class EFCaptionsHierarchyItem extends EFHierarchyItem {
-  get icon(): string;
-}
-declare class EFCaptionsActiveWordHierarchyItem extends EFHierarchyItem {
-  get icon(): string;
-}
-declare class EFTextHierarchyItem extends EFHierarchyItem {
-  get icon(): string;
-}
-declare class EFTextSegmentHierarchyItem extends EFHierarchyItem {
-  get icon(): string;
-}
-declare class EFWaveformHierarchyItem extends EFHierarchyItem {
-  get icon(): string;
-  renderChildren(): typeof nothing;
-}
-declare class EFImageHierarchyItem extends EFHierarchyItem<EFImage> {
-  get icon(): string;
-  displayLabel(): string;
-}
-declare class EFHTMLHierarchyItem extends EFHierarchyItem {
-  get icon(): TemplateResult<1>;
-}
 declare const EFFilmstrip_base: typeof LitElement;
 declare class EFFilmstrip extends EFFilmstrip_base {
   #private;
-  static styles: lit15.CSSResult[];
+  target: string;
   pixelsPerMs: number;
+  hidePlayhead: boolean;
+  disableInternalScroll: boolean;
   hide: string;
   show: string;
-  get hideSelectors(): string[] | undefined;
-  get showSelectors(): string[] | undefined;
-  scrubbing: boolean;
-  private capturedPointerId;
-  timelineScrolltop: number;
-  playing?: boolean;
-  loop?: boolean;
-  timegroupController?: TimegroupController;
-  currentTimeMs: number;
-  autoScale: boolean;
-  private resizeObserver;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  updatePixelsPerMs(): void;
-  syncGutterScroll(): void;
-  syncHierarchyScroll(): void;
-  scrub(e: PointerEvent): void;
-  startScrub(e: PointerEvent): void;
-  handleContextMenu(e: Event): void;
-  applyScrub(e: PointerEvent): void;
-  scrollScrub(e: WheelEvent): void;
-  gutterRef: lit_html_directives_ref0.Ref<HTMLDivElement>;
-  hierarchyRef: lit_html_directives_ref0.Ref<HTMLDivElement>;
-  playheadRef: lit_html_directives_ref0.Ref<HTMLDivElement>;
-  get gutter(): HTMLDivElement | undefined;
-  render(): TemplateResult<1>;
-  updated(changes: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
-  target: string;
   targetElement: Element | null;
   private _contextProvidedTemporal?;
   get targetTemporal(): TemporalMixinInterface | null;
-  protected willUpdate(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+  get hideSelectors(): string[] | undefined;
+  get showSelectors(): string[] | undefined;
+  timelineRef: lit_html_directives_ref0.Ref<HTMLElement>;
+  connectedCallback(): void;
+  protected willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
+  render(): lit_html14.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {
     "ef-filmstrip": EFFilmstrip;
-    "ef-timegroup-hierarchy-item": EFTimegroupHierarchyItem;
-    "ef-audio-hierarchy-item": EFAudioHierarchyItem;
-    "ef-video-hierarchy-item": EFVideoHierarchyItem;
-    "ef-captions-hierarchy-item": EFCaptionsHierarchyItem;
-    "ef-captions-active-word-hierarchy-item": EFCaptionsActiveWordHierarchyItem;
-    "ef-waveform-hierarchy-item": EFWaveformHierarchyItem;
-    "ef-image-hierarchy-item": EFImageHierarchyItem;
-    "ef-html-hierarchy-item": EFHTMLHierarchyItem;
-    "ef-timegroup-filmstrip": EFTimegroupFilmstrip;
-    "ef-audio-filmstrip": EFAudioFilmstrip;
-    "ef-video-filmstrip": EFVideoFilmstrip;
-    "ef-captions-filmstrip": EFCaptionsFilmstrip;
-    "ef-captions-active-word-filmstrip": EFCaptionsActiveWordFilmstrip;
-    "ef-captions-segment-filmstrip": EFCaptionsSegmentFilmstrip;
-    "ef-captions-before-word-filmstrip": EFCaptionsBeforeWordFilmstrip;
-    "ef-captions-after-word-filmstrip": EFCaptionsAfterWordFilmstrip;
-    "ef-text-filmstrip": EFTextFilmstrip;
-    "ef-text-segment-filmstrip": EFTextSegmentFilmstrip;
-    "ef-text-hierarchy-item": EFTextHierarchyItem;
-    "ef-text-segment-hierarchy-item": EFTextSegmentHierarchyItem;
-    "ef-waveform-filmstrip": EFWaveformFilmstrip;
-    "ef-image-filmstrip": EFImageFilmstrip;
-    "ef-html-filmstrip": EFHTMLFilmstrip;
   }
 }
 //#endregion