@videojs/html 10.0.0-beta.2 → 10.0.0-beta.21

package/cdn/create-player-Bi6WUwDZ.js

@@ -0,0 +1,2182 @@
+import { t as listen } from "./listen-CJT7C4kM.js";
+import { a as ContextRequestEvent, n as mediaContext, r as playerContext, t as containerContext } from "./context-0rI_P6jf.js";
+import { t as anyAbortSignal } from "./abort-DsTff8mS.js";
+import { t as shallowEqual } from "./shallow-equal-Daj3-_LC.js";
+
+//#region ../utils/dist/dom/event.js
+/** Resolve the deepest event target, preferring composedPath for shadow DOM. */
+function resolveEventTarget(event) {
+	const path = event.composedPath();
+	return path.length > 0 ? path[0] : event.target;
+}
+function onEvent(target, type, options) {
+	return new Promise((resolve, reject) => {
+		const handleAbort = () => {
+			reject(options?.signal?.reason ?? "Aborted");
+		};
+		if (options?.signal?.aborted) {
+			handleAbort();
+			return;
+		}
+		options?.signal?.addEventListener("abort", handleAbort, { once: true });
+		target.addEventListener(type, (event) => {
+			options?.signal?.removeEventListener("abort", handleAbort);
+			resolve(event);
+		}, {
+			...options,
+			once: true
+		});
+	});
+}
+
+//#endregion
+//#region ../utils/dist/dom/interactive.js
+const INTERACTIVE_SELECTOR = "button,input,select,textarea,a[href],[role=\"slider\"],[role=\"button\"]";
+const EDITABLE_SELECTOR = [
+	"textarea",
+	"select",
+	"input:not([type])",
+	...[
+		"text",
+		"search",
+		"url",
+		"tel",
+		"email",
+		"password",
+		"number"
+	].map((type) => `input[type="${type}"]`),
+	"[contenteditable]:not([contenteditable=\"false\"])"
+].join(",");
+function isEditableElement(el) {
+	return el.matches(EDITABLE_SELECTOR);
+}
+/** Whether the keyboard event target is an editable element (input, textarea, etc). */
+function isEditableTarget(event) {
+	const target = resolveEventTarget(event);
+	return target instanceof Element && isEditableElement(target);
+}
+/** Whether the event originated from an interactive control (button, slider, etc). */
+function isInteractiveTarget(event) {
+	const target = resolveEventTarget(event);
+	if (!(target instanceof Element)) return false;
+	return target.closest(INTERACTIVE_SELECTOR) !== null;
+}
+const ACTIVATION_KEYS = new Set([" ", "Enter"]);
+/**
+* Selector for elements that use Space/Enter as a native activation key.
+* Narrower than `INTERACTIVE_SELECTOR` — excludes editable elements like
+* `input`, `textarea`, `select` where Space/Enter is text input, not activation.
+*/
+const ACTIVATABLE_SELECTOR = "button,a[href],[role=\"slider\"],[role=\"button\"]";
+/** Whether the event is an activation key on an activatable element (button, link, slider). */
+function isInteractiveActivation(event) {
+	if (!ACTIVATION_KEYS.has(event.key)) return false;
+	const target = resolveEventTarget(event);
+	return target instanceof Element && target.matches(ACTIVATABLE_SELECTOR);
+}
+
+//#endregion
+//#region ../utils/dist/dom/text-track.js
+/** Find the `<track>` element that owns the given `TextTrack`. */
+function findTrackElement(media, track) {
+	if (!(media instanceof HTMLElement)) return null;
+	for (const el of media.querySelectorAll("track")) if (el.track === track) return el;
+	return null;
+}
+function getTextTrackList(media, filterPred) {
+	if (!media.textTracks) return [];
+	return Array.from(media.textTracks).filter(filterPred).sort(sortByKind);
+}
+function sortByKind(a, b) {
+	return a.kind > b.kind ? 1 : a.kind < b.kind ? -1 : 0;
+}
+
+//#endregion
+//#region ../utils/dist/dom/time-ranges.js
+/** Converts a TimeRanges object to an array of [start, end] tuples. */
+function serializeTimeRanges(ranges) {
+	const result = [];
+	for (let i = 0; i < ranges.length; i++) result.push([ranges.start(i), ranges.end(i)]);
+	return result;
+}
+
+//#endregion
+//#region ../element/dist/dev/destroy-mixin.js
+/**
+* Mixin that adds a deferred destruction lifecycle to a `ReactiveElement`.
+*
+* On disconnect, schedules destruction after two animation frames.
+* If the element reconnects before the frames fire (e.g. DOM shuffling,
+* framework reconciliation), the `isConnected` check prevents destruction.
+*
+* The `keep-alive` attribute prevents automatic destruction entirely —
+* call `destroy()` manually when done.
+*
+* Subclasses override `destroyCallback()` (calling `super.destroyCallback()`)
+* to release heavy resources like stores or imperative APIs.
+*
+* Mirrors `addController`/`removeController` to track controllers
+* (needed because `ReactiveElement.#controllers` is hard-private),
+* calls `hostDestroyed()` on all tracked controllers in `destroyCallback`,
+* and guards `performUpdate()` so no updates run after destruction.
+*/
+function DestroyMixin(SuperClass) {
+	class DestroyableElement extends SuperClass {
+		#destroyed = false;
+		#trackedControllers = /* @__PURE__ */ new Set();
+		get destroyed() {
+			return this.#destroyed;
+		}
+		destroy() {
+			if (this.#destroyed) return;
+			this.#destroyed = true;
+			this.destroyCallback();
+		}
+		destroyCallback() {
+			for (const c of this.#trackedControllers) c.hostDestroyed?.();
+		}
+		addController(controller) {
+			super.addController(controller);
+			this.#trackedControllers.add(controller);
+		}
+		removeController(controller) {
+			super.removeController(controller);
+			this.#trackedControllers.delete(controller);
+		}
+		connectedCallback() {
+			if (this.#destroyed) return;
+			super.connectedCallback();
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback();
+			if (!this.#destroyed && !this.hasAttribute("keep-alive")) requestAnimationFrame(() => {
+				requestAnimationFrame(() => {
+					if (!this.isConnected) this.destroy();
+				});
+			});
+		}
+		performUpdate() {
+			if (this.#destroyed) return;
+			super.performUpdate();
+		}
+	}
+	return DestroyableElement;
+}
+
+//#endregion
+//#region ../element/dist/dev/reactive-element.js
+const cache = /* @__PURE__ */ new WeakMap();
+const propertyKeys = /* @__PURE__ */ new Map();
+/**
+* Lightweight reactive custom element base class.
+*
+* Drop-in subset of Lit's `ReactiveElement` — supports `static properties`,
+* attribute reflection, batched async updates, and reactive controllers.
+* No Shadow DOM, no `static styles`, no decorators.
+*
+* Updates are batched using the same Promise-based scheduling as Lit:
+* property changes enqueue a microtask, and the update is gated behind
+* `connectedCallback` so the first update only runs once the element
+* is in the document.
+*
+* Subclasses that extend another element with properties must spread them:
+*
+* @example
+* ```ts
+* class MyButton extends ReactiveElement {
+*   static override properties = {
+*     label: { type: String },
+*     disabled: { type: Boolean },
+*   };
+*
+*   label = 'Click me';
+*   disabled = false;
+*
+*   protected override update(changed: PropertyValues): void {
+*     super.update(changed);
+*     this.textContent = this.label;
+*   }
+* }
+*
+* // Inheritance — spread parent properties
+* class FancyButton extends MyButton {
+*   static override properties = {
+*     ...MyButton.properties,
+*     variant: { type: String },
+*   };
+*
+*   variant = 'primary';
+* }
+* ```
+*/
+var ReactiveElement = class extends HTMLElement {
+	static {
+		this.properties = {};
+	}
+	/**
+	* Returns a list of attributes corresponding to the registered properties.
+	*/
+	static get observedAttributes() {
+		return [...resolve(this).attrToProp.keys()];
+	}
+	#controllers = /* @__PURE__ */ new Set();
+	#changedProperties = /* @__PURE__ */ new Map();
+	#instanceProperties;
+	/**
+	* Promise that gates the first update until `connectedCallback`. Also
+	* used to serialize updates — each `#enqueueUpdate` awaits the previous
+	* `#updatePromise`, so property changes are batched and updates never
+	* overlap. Matches Lit's scheduling model.
+	*/
+	#updatePromise;
+	constructor() {
+		super();
+		this.isUpdatePending = false;
+		this.hasUpdated = false;
+		this.#updatePromise = new Promise((res) => this.enableUpdating = res);
+		const { props } = resolve(this.constructor);
+		for (const name of props.keys()) if (Object.hasOwn(this, name)) {
+			(this.#instanceProperties ??= /* @__PURE__ */ new Map()).set(name, this[name]);
+			delete this[name];
+		}
+		this.requestUpdate();
+	}
+	/**
+	* Note, this method should be considered final and not overridden. It is
+	* overridden on the element instance with a function that triggers the
+	* first update.
+	*/
+	enableUpdating(_requestedUpdate) {}
+	/**
+	* Registers a {@linkcode ReactiveController} to participate in the
+	* element's reactive update cycle. The element automatically calls into
+	* any registered controllers during its lifecycle callbacks.
+	*
+	* If the element is connected when `addController()` is called, the
+	* controller's `hostConnected()` callback will be immediately called.
+	*/
+	addController(controller) {
+		this.#controllers.add(controller);
+		if (this.isConnected) controller.hostConnected?.();
+	}
+	/** Removes a {@linkcode ReactiveController} from the element. */
+	removeController(controller) {
+		this.#controllers.delete(controller);
+	}
+	/**
+	* On first connection, enables updating and notifies controllers.
+	*/
+	connectedCallback() {
+		this.enableUpdating(true);
+		for (const c of this.#controllers) c.hostConnected?.();
+	}
+	disconnectedCallback() {
+		for (const c of this.#controllers) c.hostDisconnected?.();
+	}
+	/**
+	* Synchronizes property values when attributes change.
+	*
+	* Specifically, when an attribute is set, the corresponding property is
+	* set. You should rarely need to implement this callback. If this method
+	* is overridden, `super.attributeChangedCallback(name, _old, value)` must
+	* be called.
+	*/
+	attributeChangedCallback(attr, oldValue, newValue) {
+		if (oldValue === newValue) return;
+		const { props, attrToProp } = resolve(this.constructor);
+		const propName = attrToProp.get(attr);
+		if (!propName) return;
+		const decl = props.get(propName);
+		if (!decl) return;
+		let value = newValue;
+		if (decl.type === Boolean) value = newValue !== null;
+		else if (decl.type === Number) value = newValue === null ? null : Number(newValue);
+		this[propName] = value;
+	}
+	/**
+	* Requests an update which is processed asynchronously. This should be
+	* called when an element should update based on some state not triggered
+	* by setting a reactive property. In this case, pass no arguments. It
+	* should also be called when manually implementing a property setter. In
+	* this case, pass the property `name` and `oldValue` to ensure that any
+	* configured property options are honored.
+	*/
+	requestUpdate(name, oldValue) {
+		if (name !== void 0) this.#changedProperties.set(name, oldValue);
+		if (this.isUpdatePending) return;
+		this.#updatePromise = this.#enqueueUpdate();
+	}
+	/**
+	* Sets up the element to asynchronously update. Awaits the previous
+	* `#updatePromise` which both serializes updates and (on first update)
+	* waits for `connectedCallback` to resolve the gate.
+	*/
+	async #enqueueUpdate() {
+		this.isUpdatePending = true;
+		try {
+			await this.#updatePromise;
+		} catch (e) {
+			Promise.reject(e);
+		}
+		const result = this.scheduleUpdate();
+		if (result != null) await result;
+		return !this.isUpdatePending;
+	}
+	/**
+	* Schedules an element update. You can override this method to change the
+	* timing of updates by returning a Promise. The update will await the
+	* returned Promise, and you should resolve the Promise to allow the update
+	* to proceed. If this method is overridden, `super.scheduleUpdate()` must
+	* be called.
+	*
+	* For instance, to schedule updates to occur just before the next frame:
+	*
+	* ```ts
+	* override protected async scheduleUpdate(): Promise<unknown> {
+	*   await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+	*   super.scheduleUpdate();
+	* }
+	* ```
+	*/
+	scheduleUpdate() {
+		this.performUpdate();
+	}
+	/**
+	* Performs an element update. Note, if an exception is thrown during the
+	* update, `firstUpdated` and `updated` will not be called.
+	*
+	* Call `performUpdate()` to immediately process a pending update. This
+	* should generally not be needed, but it can be done in rare cases when
+	* you need to update synchronously.
+	*/
+	performUpdate() {
+		if (!this.isUpdatePending) return;
+		if (!this.hasUpdated && this.#instanceProperties) {
+			for (const [name, value] of this.#instanceProperties) this[name] = value;
+			this.#instanceProperties = void 0;
+		}
+		const changed = this.#changedProperties;
+		this.willUpdate(changed);
+		for (const c of this.#controllers) c.hostUpdate?.();
+		this.update(changed);
+		this.#changedProperties = /* @__PURE__ */ new Map();
+		this.isUpdatePending = false;
+		for (const c of this.#controllers) c.hostUpdated?.();
+		if (!this.hasUpdated) {
+			this.hasUpdated = true;
+			this.firstUpdated(changed);
+		}
+		this.updated(changed);
+	}
+	/**
+	* Invoked before `update()` to compute values needed during the update.
+	*
+	* Implement `willUpdate` to compute property values that depend on other
+	* properties and are used in the rest of the update process.
+	*
+	* ```ts
+	* willUpdate(changed) {
+	*   if (changed.has('firstName') || changed.has('lastName')) {
+	*     this.sha = computeSHA(`${this.firstName} ${this.lastName}`);
+	*   }
+	* }
+	* ```
+	*/
+	willUpdate(_changed) {}
+	/**
+	* Updates the element. This method reflects property values to attributes
+	* and can be overridden to render and keep updated element DOM. Setting
+	* properties inside this method will *not* trigger another update.
+	*/
+	update(_changed) {}
+	/**
+	* Invoked when the element is first updated. Implement to perform one
+	* time work on the element after update.
+	*
+	* Setting properties inside this method will trigger the element to
+	* update again after this update cycle completes.
+	*/
+	firstUpdated(_changed) {}
+	/**
+	* Invoked whenever the element is updated. Implement to perform
+	* post-updating tasks via DOM APIs, for example, focusing an element.
+	*
+	* Setting properties inside this method will trigger the element to
+	* update again after this update cycle completes.
+	*/
+	updated(_changed) {}
+	/**
+	* Returns a Promise that resolves when the element has completed updating.
+	* The Promise value is a boolean that is `true` if the element completed
+	* the update without triggering another update. The Promise result is
+	* `false` if a property was set inside `updated()`.
+	*/
+	get updateComplete() {
+		return this.#updatePromise;
+	}
+};
+/**
+* Resolve `ctor.properties` into lookup Maps and install reactive accessors
+* on the prototype. Runs once per class, result is cached.
+*
+* Subclasses that need parent properties must spread them:
+* `static override properties = { ...Parent.properties, ... }`.
+*/
+function resolve(ctor) {
+	const existing = cache.get(ctor);
+	if (existing) return existing;
+	const props = /* @__PURE__ */ new Map();
+	const attrToProp = /* @__PURE__ */ new Map();
+	for (const [name, decl] of Object.entries(ctor.properties)) {
+		props.set(name, decl);
+		attrToProp.set(decl.attribute ?? name, name);
+		if (!Object.getOwnPropertyDescriptor(ctor.prototype, name)?.get) {
+			let key = propertyKeys.get(name);
+			if (!key) {
+				key = Symbol(name);
+				propertyKeys.set(name, key);
+			}
+			Object.defineProperty(ctor.prototype, name, {
+				get() {
+					return this[key];
+				},
+				set(value) {
+					const old = this[key];
+					this[key] = value;
+					if (!Object.is(old, value)) this.requestUpdate(name, old);
+				},
+				configurable: true,
+				enumerable: true
+			});
+		}
+	}
+	const meta = {
+		props,
+		attrToProp
+	};
+	cache.set(ctor, meta);
+	return meta;
+}
+
+//#endregion
+//#region ../../node_modules/.pnpm/@lit+context@1.1.6/node_modules/@lit/context/development/lib/controllers/context-consumer.js
+/**
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+/**
+* A ReactiveController which adds context consuming behavior to a custom
+* element by dispatching `context-request` events.
+*
+* When the host element is connected to the document it will emit a
+* `context-request` event with its context key. When the context request
+* is satisfied the controller will invoke the callback, if present, and
+* trigger a host update so it can respond to the new value.
+*
+* It will also call the dispose method given by the provider when the
+* host element is disconnected.
+*/
+var ContextConsumer = class {
+	constructor(host, contextOrOptions, callback, subscribe) {
+		this.subscribe = false;
+		this.provided = false;
+		this.value = void 0;
+		this._callback = (value, unsubscribe) => {
+			if (this.unsubscribe) {
+				if (this.unsubscribe !== unsubscribe) {
+					this.provided = false;
+					this.unsubscribe();
+				}
+				if (!this.subscribe) this.unsubscribe();
+			}
+			this.value = value;
+			this.host.requestUpdate();
+			if (!this.provided || this.subscribe) {
+				this.provided = true;
+				if (this.callback) this.callback(value, unsubscribe);
+			}
+			this.unsubscribe = unsubscribe;
+		};
+		this.host = host;
+		if (contextOrOptions.context !== void 0) {
+			const options = contextOrOptions;
+			this.context = options.context;
+			this.callback = options.callback;
+			this.subscribe = options.subscribe ?? false;
+		} else {
+			this.context = contextOrOptions;
+			this.callback = callback;
+			this.subscribe = subscribe ?? false;
+		}
+		this.host.addController(this);
+	}
+	hostConnected() {
+		this.dispatchRequest();
+	}
+	hostDisconnected() {
+		if (this.unsubscribe) {
+			this.unsubscribe();
+			this.unsubscribe = void 0;
+		}
+	}
+	dispatchRequest() {
+		this.host.dispatchEvent(new ContextRequestEvent(this.context, this.host, this._callback, this.subscribe));
+	}
+};
+
+//#endregion
+//#region ../../node_modules/.pnpm/@lit+context@1.1.6/node_modules/@lit/context/development/lib/value-notifier.js
+/**
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+/**
+* A simple class which stores a value, and triggers registered callbacks when
+* the value is changed via its setter.
+*
+* An implementor might use other observable patterns such as MobX or Redux to
+* get behavior like this. But this is a pretty minimal approach that will
+* likely work for a number of use cases.
+*/
+var ValueNotifier = class {
+	get value() {
+		return this._value;
+	}
+	set value(v) {
+		this.setValue(v);
+	}
+	setValue(v, force = false) {
+		const update = force || !Object.is(v, this._value);
+		this._value = v;
+		if (update) this.updateObservers();
+	}
+	constructor(defaultValue) {
+		this.subscriptions = /* @__PURE__ */ new Map();
+		this.updateObservers = () => {
+			for (const [callback, { disposer }] of this.subscriptions) callback(this._value, disposer);
+		};
+		if (defaultValue !== void 0) this.value = defaultValue;
+	}
+	addCallback(callback, consumerHost, subscribe) {
+		if (!subscribe) {
+			callback(this.value);
+			return;
+		}
+		if (!this.subscriptions.has(callback)) this.subscriptions.set(callback, {
+			disposer: () => {
+				this.subscriptions.delete(callback);
+			},
+			consumerHost
+		});
+		const { disposer } = this.subscriptions.get(callback);
+		callback(this.value, disposer);
+	}
+	clearCallbacks() {
+		this.subscriptions.clear();
+	}
+};
+
+//#endregion
+//#region ../../node_modules/.pnpm/@lit+context@1.1.6/node_modules/@lit/context/development/lib/controllers/context-provider.js
+/**
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+var ContextProviderEvent = class extends Event {
+	/**
+	*
+	* @param context the context which this provider can provide
+	* @param contextTarget the original context target of the provider
+	*/
+	constructor(context, contextTarget) {
+		super("context-provider", {
+			bubbles: true,
+			composed: true
+		});
+		this.context = context;
+		this.contextTarget = contextTarget;
+	}
+};
+/**
+* A ReactiveController which adds context provider behavior to a
+* custom element.
+*
+* This controller simply listens to the `context-request` event when
+* the host is connected to the DOM and registers the received callbacks
+* against its observable Context implementation.
+*
+* The controller may also be attached to any HTML element in which case it's
+* up to the user to call hostConnected() when attached to the DOM. This is
+* done automatically for any custom elements implementing
+* ReactiveControllerHost.
+*/
+var ContextProvider = class extends ValueNotifier {
+	constructor(host, contextOrOptions, initialValue) {
+		super(contextOrOptions.context !== void 0 ? contextOrOptions.initialValue : initialValue);
+		this.onContextRequest = (ev) => {
+			if (ev.context !== this.context) return;
+			const consumerHost = ev.contextTarget ?? ev.composedPath()[0];
+			if (consumerHost === this.host) return;
+			ev.stopPropagation();
+			this.addCallback(ev.callback, consumerHost, ev.subscribe);
+		};
+		/**
+		* When we get a provider request event, that means a child of this element
+		* has just woken up. If it's a provider of our context, then we may need to
+		* re-parent our subscriptions, because is a more specific provider than us
+		* for its subtree.
+		*/
+		this.onProviderRequest = (ev) => {
+			if (ev.context !== this.context) return;
+			if ((ev.contextTarget ?? ev.composedPath()[0]) === this.host) return;
+			const seen = /* @__PURE__ */ new Set();
+			for (const [callback, { consumerHost }] of this.subscriptions) {
+				if (seen.has(callback)) continue;
+				seen.add(callback);
+				consumerHost.dispatchEvent(new ContextRequestEvent(this.context, consumerHost, callback, true));
+			}
+			ev.stopPropagation();
+		};
+		this.host = host;
+		if (contextOrOptions.context !== void 0) this.context = contextOrOptions.context;
+		else this.context = contextOrOptions;
+		this.attachListeners();
+		this.host.addController?.(this);
+	}
+	attachListeners() {
+		this.host.addEventListener("context-request", this.onContextRequest);
+		this.host.addEventListener("context-provider", this.onProviderRequest);
+	}
+	hostConnected() {
+		this.host.dispatchEvent(new ContextProviderEvent(this.context, this.host));
+	}
+};
+
+//#endregion
+//#region src/store/container-mixin.ts
+/**
+* Create a mixin that consumes player context and registers itself as the
+* container element with the provider via `containerContext`.
+*
+* @param config - Container configuration with player and container contexts.
+*/
+function createContainerMixin(config) {
+	return (BaseClass) => {
+		class PlayerContainerElement extends BaseClass {
+			#contextStore = null;
+			#setContainer = null;
+			constructor(...args) {
+				super(...args);
+				new ContextConsumer(this, {
+					context: config.playerContext,
+					callback: (value) => {
+						this.#contextStore = value ?? null;
+					},
+					subscribe: true
+				});
+				new ContextConsumer(this, {
+					context: config.containerContext,
+					callback: (value) => {
+						this.#setContainer = value?.setContainer ?? null;
+						if (this.isConnected) this.#setContainer?.(this);
+					},
+					subscribe: true
+				});
+			}
+			get store() {
+				return this.#contextStore;
+			}
+			connectedCallback() {
+				super.connectedCallback();
+				this.#setContainer?.(this);
+			}
+			disconnectedCallback() {
+				super.disconnectedCallback();
+				this.#setContainer?.(null);
+			}
+		}
+		return PlayerContainerElement;
+	};
+}
+
+//#endregion
+//#region src/ui/media-element.ts
+/** Base class for interactive media UI elements. */
+var MediaElement = class extends DestroyMixin(ReactiveElement) {};
+
+//#endregion
+//#region src/media/container-element.ts
+const ContainerMixin = createContainerMixin({
+	playerContext,
+	containerContext
+});
+var MediaContainerElement = class extends ContainerMixin(MediaElement) {
+	static {
+		this.tagName = "media-container";
+	}
+	#disconnect = null;
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "0");
+		this.#disconnect = new AbortController();
+		listen(this, "pointerup", this.#onPointerUp, { signal: this.#disconnect.signal });
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	#onPointerUp = () => {
+		if (!this.contains(document.activeElement) || document.activeElement === document.body) this.focus({ preventScroll: true });
+	};
+};
+
+//#endregion
+//#region ../utils/dist/predicate/predicate.js
+function isNumber(value) {
+	return typeof value === "number";
+}
+function isFunction(value) {
+	return typeof value === "function";
+}
+function isNull(value) {
+	return value === null;
+}
+function isUndefined(value) {
+	return typeof value === "undefined";
+}
+/**
+* Check if a value is an object, excluding null.
+*/
+function isObject(value) {
+	return value !== null && typeof value === "object";
+}
+
+//#endregion
+//#region ../store/dist/dev/core/abort-controller-registry.js
+var AbortControllerRegistry = class {
+	#base = new AbortController();
+	#keys = /* @__PURE__ */ new Map();
+	/** The attach-scoped signal. Aborts on detach or reattach. */
+	get base() {
+		return this.#base.signal;
+	}
+	/** Clears all keyed signals, leaving base intact. */
+	clear() {
+		for (const controller of this.#keys.values()) controller.abort();
+		this.#keys.clear();
+	}
+	/** Resets base and clears all keyed signals. */
+	reset() {
+		this.clear();
+		this.#base.abort();
+		this.#base = new AbortController();
+	}
+	/** Creates a new signal for the key, superseding any previous signal. */
+	supersede(key) {
+		this.#keys.get(key)?.abort();
+		const controller = new AbortController();
+		this.#keys.set(key, controller);
+		return anyAbortSignal([this.#base.signal, controller.signal]);
+	}
+};
+
+//#endregion
+//#region ../store/dist/dev/core/combine.js
+/**
+* Combines multiple slices into a single slice.
+*
+* @param slices - The slices to combine.
+* @returns A new slice that represents the combination of the input slices.
+*/
+function combine(...slices) {
+	return {
+		state: (ctx) => {
+			const states = slices.map((slice) => slice.state(ctx));
+			{
+				const seen = /* @__PURE__ */ new Set();
+				for (const state of states) for (const key of Object.keys(state)) {
+					if (seen.has(key)) console.warn(`[vjs-store] combine(): duplicate state key "${key}" — later slice overwrites earlier one`);
+					seen.add(key);
+				}
+			}
+			return Object.assign({}, ...states);
+		},
+		attach: (ctx) => {
+			for (const slice of slices) try {
+				slice.attach?.(ctx);
+			} catch (err) {
+				ctx.reportError(err);
+			}
+		}
+	};
+}
+
+//#endregion
+//#region ../store/dist/dev/core/errors.js
+var StoreError = class extends Error {
+	code;
+	cause;
+	constructor(code, options) {
+		super(options?.message ?? code);
+		this.name = "StoreError";
+		this.code = code;
+		this.cause = options?.cause;
+	}
+};
+function throwNoTargetError() {
+	throw new StoreError("NO_TARGET");
+}
+function throwDestroyedError() {
+	throw new StoreError("DESTROYED");
+}
+
+//#endregion
+//#region ../store/dist/dev/core/slice.js
+function defineSlice() {
+	return (config) => config;
+}
+
+//#endregion
+//#region ../utils/dist/function/noop.js
+function noop(..._args) {}
+
+//#endregion
+//#region ../store/dist/dev/core/state.js
+let isFlushScheduled = false;
+function scheduleFlush() {
+	if (isFlushScheduled) return;
+	isFlushScheduled = true;
+	queueMicrotask(flush);
+}
+const pendingContainers = /* @__PURE__ */ new Set();
+function flush() {
+	isFlushScheduled = false;
+	for (const container of pendingContainers) container.flush();
+	pendingContainers.clear();
+}
+const hasOwnProp = Object.prototype.hasOwnProperty;
+var StateContainer = class {
+	#current;
+	#listeners = /* @__PURE__ */ new Set();
+	#pending = false;
+	constructor(initial) {
+		this.#current = Object.freeze({ ...initial });
+	}
+	get current() {
+		return this.#current;
+	}
+	patch(partial) {
+		const next = { ...this.#current };
+		let changed = false;
+		for (const key in partial) {
+			if (!hasOwnProp.call(partial, key)) continue;
+			const value = partial[key];
+			if (!Object.is(this.#current[key], value)) {
+				next[key] = value;
+				changed = true;
+			}
+		}
+		if (changed) {
+			this.#current = Object.freeze(next);
+			this.#markPending();
+		}
+	}
+	subscribe(callback, options) {
+		const signal = options?.signal;
+		if (signal?.aborted) return noop;
+		this.#listeners.add(callback);
+		if (!signal) return () => this.#listeners.delete(callback);
+		const onAbort = () => this.#listeners.delete(callback);
+		signal.addEventListener("abort", onAbort, { once: true });
+		return () => {
+			signal.removeEventListener("abort", onAbort);
+			this.#listeners.delete(callback);
+		};
+	}
+	flush() {
+		if (!this.#pending) return;
+		this.#pending = false;
+		for (const fn of this.#listeners) fn();
+	}
+	#markPending() {
+		this.#pending = true;
+		pendingContainers.add(this);
+		scheduleFlush();
+	}
+};
+function createState(initial) {
+	return new StateContainer(initial);
+}
+
+//#endregion
+//#region ../store/dist/dev/core/store.js
+const STORE_SYMBOL = Symbol("@videojs/store");
+function createStore() {
+	return (slice, options = {}) => {
+		let target = null;
+		let destroyed = false;
+		const setupAbort = new AbortController();
+		const signals = new AbortControllerRegistry();
+		let state;
+		function validate() {
+			if (destroyed) throwDestroyedError();
+			if (!target) throwNoTargetError();
+		}
+		const initialState = slice.state({
+			target: () => {
+				validate();
+				return target;
+			},
+			signals,
+			get: () => state.current,
+			set: (partial) => state.patch(partial)
+		});
+		state = createState(initialState);
+		const store = {
+			[STORE_SYMBOL]: true,
+			get $state() {
+				return state;
+			},
+			get target() {
+				return target;
+			},
+			get destroyed() {
+				return destroyed;
+			},
+			get state() {
+				return state.current;
+			},
+			attach,
+			destroy,
+			subscribe
+		};
+		for (const key of Object.keys(initialState)) Object.defineProperty(store, key, {
+			get: () => state.current[key],
+			enumerable: true
+		});
+		try {
+			options.onSetup?.({
+				store,
+				signal: setupAbort.signal
+			});
+		} catch (error) {
+			reportError(error);
+		}
+		return store;
+		function attach(newTarget) {
+			if (destroyed) throwDestroyedError();
+			signals.reset();
+			target = newTarget;
+			const attachContext = {
+				target: newTarget,
+				signal: signals.base,
+				get: () => state.current,
+				set: (partial) => state.patch(partial),
+				reportError,
+				store: {
+					get state() {
+						return state.current;
+					},
+					subscribe
+				}
+			};
+			try {
+				slice.attach?.(attachContext);
+			} catch (error) {
+				reportError(error);
+			}
+			try {
+				options.onAttach?.({
+					store,
+					target: newTarget,
+					signal: signals.base
+				});
+			} catch (error) {
+				reportError(error);
+			}
+			return detach;
+		}
+		function detach() {
+			if (isNull(target)) return;
+			signals.reset();
+			target = null;
+			state.patch(initialState);
+		}
+		function destroy() {
+			if (destroyed) return;
+			destroyed = true;
+			detach();
+			setupAbort.abort();
+		}
+		function subscribe(callback, options) {
+			return state.subscribe(callback, options);
+		}
+		function reportError(error) {
+			if (options.onError) options.onError({
+				store,
+				error
+			});
+			else console.error("[vjs-store]", error);
+		}
+	};
+}
+function isStore(value) {
+	return isObject(value) && STORE_SYMBOL in value;
+}
+
+//#endregion
+//#region ../core/dist/dev/dom/feature.js
+const definePlayerFeature = defineSlice();
+
+//#endregion
+//#region ../core/dist/dev/dom/media/predicate.js
+function hasMetadata(media) {
+	return media.readyState >= 1;
+}
+function isMediaPauseCapable(value) {
+	return isObject(value) && "paused" in value && "ended" in value && isFunction(value.pause);
+}
+function isMediaSeekCapable(value) {
+	return isObject(value) && "currentTime" in value && "duration" in value && "seeking" in value;
+}
+function isMediaSourceCapable(value) {
+	return isObject(value) && "src" in value && "currentSrc" in value && "readyState" in value && isFunction(value.load);
+}
+function isMediaVolumeCapable(value) {
+	return isObject(value) && "volume" in value && "muted" in value;
+}
+function isMediaPlaybackRateCapable(value) {
+	return isObject(value) && "playbackRate" in value;
+}
+function isMediaBufferCapable(value) {
+	return isObject(value) && "buffered" in value && "seekable" in value;
+}
+function isMediaErrorCapable(value) {
+	return isObject(value) && "error" in value;
+}
+function isMediaTextTrackCapable(value) {
+	return isObject(value) && "textTracks" in value;
+}
+function isQuerySelectorAllCapable(value) {
+	return isObject(value) && "querySelectorAll" in value && isFunction(value.querySelectorAll);
+}
+
+//#endregion
+//#region ../core/dist/dev/dom/store/features/buffer.js
+const bufferFeature = definePlayerFeature({
+	name: "buffer",
+	state: () => ({
+		buffered: [],
+		seekable: []
+	}),
+	attach({ target, signal, set }) {
+		const { media } = target;
+		if (!isMediaBufferCapable(media)) return;
+		const sync = () => set({
+			buffered: serializeTimeRanges(media.buffered),
+			seekable: serializeTimeRanges(media.seekable)
+		});
+		sync();
+		listen(media, "progress", sync, { signal });
+		listen(media, "emptied", sync, { signal });
+	}
+});
+
+//#endregion
+//#region ../core/dist/dev/dom/gesture/region.js
+/**
+* Determine which named region a pointer position falls into.
+*
+* Regions divide the container width equally based on how many are active:
+* - `left` + `right` → halves (50% / 50%)
+* - `left` + `center` + `right` → thirds (33% / 34% / 33%)
+*
+* Single region: `left` covers the left half, `right` the right half,
+* and `center` covers the full surface. Partial two-region combos
+* (e.g. `left` + `center`) use the same natural zones — positions outside
+* all active zones return `null` so full-surface gestures can handle them.
+*/
+function resolveRegion(clientX, containerRect, activeRegions) {
+	if (activeRegions.size === 0) return null;
+	const relativeX = clientX - containerRect.left;
+	const width = containerRect.width;
+	if (width === 0) return null;
+	const ratio = relativeX / width;
+	if (activeRegions.size === 2 && activeRegions.has("left") && activeRegions.has("right")) return ratio < .5 ? "left" : "right";
+	if (activeRegions.size === 3) {
+		if (ratio < 1 / 3) return "left";
+		if (ratio < 2 / 3) return "center";
+		return "right";
+	}
+	if (activeRegions.has("left") && ratio < .5) return "left";
+	if (activeRegions.has("right") && ratio >= .5) return "right";
+	if (activeRegions.has("center")) {
+		if (activeRegions.size === 1) return "center";
+		if (ratio >= 1 / 3 && ratio < 2 / 3) return "center";
+	}
+	return null;
+}
+
+//#endregion
+//#region ../core/dist/dev/dom/gesture/coordinator.js
+const TAP_THRESHOLD$1 = 250;
+var GestureCoordinator = class {
+	#target;
+	#bindings = [];
+	#recognizers = /* @__PURE__ */ new Set();
+	#disconnect = null;
+	constructor(target) {
+		this.#target = target;
+	}
+	get bindings() {
+		return this.#bindings;
+	}
+	add(binding) {
+		this.#bindings.push(binding);
+		this.#recognizers.add(binding.recognizer);
+		this.#connect();
+		let removed = false;
+		return () => {
+			if (removed) return;
+			removed = true;
+			const idx = this.#bindings.indexOf(binding);
+			if (idx !== -1) this.#bindings.splice(idx, 1);
+			this.#maybeDisconnect();
+		};
+	}
+	#connect() {
+		if (this.#disconnect) return;
+		this.#disconnect = new AbortController();
+		const { signal } = this.#disconnect;
+		let pointerDownTime = 0;
+		listen(this.#target, "pointerdown", (event) => {
+			if (event.button !== 0) return;
+			pointerDownTime = Date.now();
+		}, { signal });
+		listen(this.#target, "pointerup", (event) => {
+			if (event.button !== 0) return;
+			if (Date.now() - pointerDownTime > TAP_THRESHOLD$1) return;
+			if (isInteractiveTarget(event)) return;
+			const pointerType = event.pointerType;
+			const clientX = event.clientX;
+			const target = this.#target;
+			const bindings = this.#bindings;
+			const matches = { resolve: (type) => matchBindings(bindings, type, pointerType, clientX, target) };
+			for (const recognizer of this.#recognizers) recognizer.handleUp(matches, event);
+		}, { signal });
+	}
+	#maybeDisconnect() {
+		if (this.#bindings.length > 0) return;
+		for (const recognizer of this.#recognizers) recognizer.reset();
+		this.#recognizers.clear();
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+};
+const coordinators = /* @__PURE__ */ new WeakMap();
+/** Look up the gesture coordinator for a target element, if one exists. */
+function findGestureCoordinator(target) {
+	return coordinators.get(target);
+}
+function getGestureCoordinator(target) {
+	let coordinator = coordinators.get(target);
+	if (!coordinator) {
+		coordinator = new GestureCoordinator(target);
+		coordinators.set(target, coordinator);
+	}
+	return coordinator;
+}
+function matchBindings(bindings, type, pointerType, clientX, target) {
+	const rect = target.getBoundingClientRect();
+	const activeRegions = getActiveRegions(bindings, type, pointerType);
+	const region = activeRegions.size > 0 ? resolveRegion(clientX, rect, activeRegions) : null;
+	const matches = [];
+	for (const binding of bindings) {
+		if (binding.disabled) continue;
+		if (binding.type !== type) continue;
+		if (binding.pointer && binding.pointer !== pointerType) continue;
+		if (binding.region) {
+			if (binding.region !== region) continue;
+		} else if (region !== null) continue;
+		matches.push(binding);
+	}
+	return matches;
+}
+function getActiveRegions(bindings, type, pointerType) {
+	const regions = /* @__PURE__ */ new Set();
+	for (const binding of bindings) {
+		if (binding.disabled) continue;
+		if (binding.type !== type) continue;
+		if (binding.pointer && binding.pointer !== pointerType) continue;
+		if (binding.region) regions.add(binding.region);
+	}
+	return regions;
+}
+
+//#endregion
+//#region ../core/dist/dev/dom/store/features/controls.js
+const IDLE_DELAY = 2e3;
+const TAP_THRESHOLD = 250;
+const controlsFeature = definePlayerFeature({
+	name: "controls",
+	state: ({ get, set }) => ({
+		userActive: true,
+		controlsVisible: true,
+		toggleControls() {
+			const next = !get().userActive;
+			set({
+				userActive: next,
+				controlsVisible: next
+			});
+			return next;
+		}
+	}),
+	attach({ target, signal, get, set }) {
+		const { media, container } = target;
+		if (!isMediaPauseCapable(media) || isNull(container)) {
+			if (isNull(container)) console.warn("[vjs] controlsFeature requires a container element for activity tracking.");
+			return;
+		}
+		const computeVisible = (userActive) => {
+			return userActive || media.paused;
+		};
+		let idleTimer;
+		function clearIdle() {
+			clearTimeout(idleTimer);
+			idleTimer = void 0;
+		}
+		function scheduleIdle() {
+			clearIdle();
+			idleTimer = setTimeout(setInactive, IDLE_DELAY);
+		}
+		function setActive() {
+			if (!get().userActive) set({
+				userActive: true,
+				controlsVisible: true
+			});
+			scheduleIdle();
+		}
+		function setInactive() {
+			clearIdle();
+			set({
+				userActive: false,
+				controlsVisible: computeVisible(false)
+			});
+		}
+		set({ toggleControls() {
+			if (get().controlsVisible) setInactive();
+			else setActive();
+			return get().controlsVisible;
+		} });
+		let pointerDownTime = 0;
+		function onPointerDown() {
+			pointerDownTime = Date.now();
+		}
+		function onPointerUp(event) {
+			if (event.pointerType === "touch" && Date.now() - pointerDownTime < TAP_THRESHOLD) {
+				if (findGestureCoordinator(container)?.bindings.some((b) => b.type === "tap" && b.action === "toggleControls" && (!b.pointer || b.pointer === "touch"))) return;
+				const isMediaOrContainer = [media, container].includes(event.target);
+				if (get().controlsVisible && isMediaOrContainer) setInactive();
+				else setActive();
+			} else setActive();
+		}
+		const onPlaybackChange = () => {
+			const { userActive } = get();
+			set({ controlsVisible: computeVisible(userActive) });
+			if (!media.paused && userActive) scheduleIdle();
+		};
+		listen(container, "pointermove", setActive, { signal });
+		listen(container, "pointerdown", onPointerDown, { signal });
+		listen(container, "pointerup", onPointerUp, { signal });
+		listen(container, "keyup", setActive, { signal });
+		listen(container, "focusin", setActive, { signal });
+		listen(container, "mouseleave", setInactive, { signal });
+		listen(media, "play", onPlaybackChange, { signal });
+		listen(media, "pause", onPlaybackChange, { signal });
+		listen(media, "ended", onPlaybackChange, { signal });
+		signal.addEventListener("abort", clearIdle, { once: true });
+		scheduleIdle();
+	}
+});
+
+//#endregion
+//#region ../core/dist/dev/dom/store/features/error.js
+const errorFeature = definePlayerFeature({
+	name: "error",
+	state: ({ set }) => ({
+		error: null,
+		dismissError() {
+			set({ error: null });
+		}
+	}),
+	attach({ target, signal, set }) {
+		const { media } = target;
+		if (!isMediaErrorCapable(media)) return;
+		const syncError = () => set({ error: media.error });
+		listen(media, "error", syncError, { signal });
+		listen(media, "emptied", () => set({ error: null }), { signal });
+	}
+});
+
+//#endregion
+//#region ../core/dist/dev/dom/presentation/fullscreen.js
+function isFullscreenEnabled() {
+	const doc = document;
+	if (doc.fullscreenEnabled || doc.webkitFullscreenEnabled) return true;
+	return isFunction(document.createElement("video").webkitEnterFullscreen);
+}
+function getFullscreenElement() {
+	const doc = document;
+	return doc.fullscreenElement ?? doc.webkitFullscreenElement ?? null;
+}
+function isFullscreenElement(container, media) {
+	if (media instanceof HTMLMediaElement) {
+		const video = media;
+		if (video.webkitDisplayingFullscreen && video.webkitPresentationMode === "fullscreen") return true;
+	}
+	const target = container ?? media;
+	if (getFullscreenElement() === target) return true;
+	if (target instanceof Element) try {
+		return target.matches(":fullscreen");
+	} catch {
+		return false;
+	}
+	return false;
+}
+async function requestFullscreen(container, media) {
+	const doc = document;
+	if (container && (doc.fullscreenEnabled || doc.webkitFullscreenEnabled)) {
+		const el = container;
+		if (isFunction(el.requestFullscreen)) return el.requestFullscreen();
+		if (isFunction(el.webkitRequestFullscreen)) return el.webkitRequestFullscreen();
+	}
+	if (media instanceof HTMLMediaElement) {
+		const video = media;
+		if (isFunction(video.webkitEnterFullscreen)) {
+			video.webkitEnterFullscreen();
+			return;
+		}
+		if (isFunction(media.requestFullscreen)) return media.requestFullscreen();
+	}
+	throw new DOMException("Fullscreen not supported", "NotSupportedError");
+}
+async function exitFullscreen(media) {
+	const doc = document;
+	if (media instanceof HTMLMediaElement) {
+		const video = media;
+		if (isFunction(video.webkitExitFullscreen) && video.webkitDisplayingFullscreen) {
+			video.webkitExitFullscreen();
+			return;
+		}
+	}
+	if (isFunction(doc.exitFullscreen)) return doc.exitFullscreen();
+	if (isFunction(doc.webkitExitFullscreen)) return doc.webkitExitFullscreen();
+}
+
+//#endregion
+//#region ../core/dist/dev/dom/presentation/pip.js
+function resolveMediaTarget(media) {
+	const target = media.target;
+	return target instanceof HTMLMediaElement ? target : media;
+}
+function isPictureInPictureEnabled() {
+	if (document.pictureInPictureEnabled) {
+		const isSafari = /.*Version\/.*Safari\/.*/.test(navigator.userAgent);
+		const isPWA = typeof matchMedia === "function" && matchMedia("(display-mode: standalone)").matches;
+		return !isSafari || !isPWA;
+	}
+	return isFunction(document.createElement("video").webkitSetPresentationMode);
+}
+function isPictureInPictureElement(media) {
+	const target = resolveMediaTarget(media);
+	if (document.pictureInPictureElement === target) return true;
+	if (target instanceof HTMLVideoElement) return target.webkitPresentationMode === "picture-in-picture";
+	return false;
+}
+async function requestPictureInPicture(media) {
+	const target = resolveMediaTarget(media);
+	if (!(target instanceof HTMLVideoElement)) throw new DOMException("Picture-in-Picture not supported", "NotSupportedError");
+	const video = target;
+	if (isFunction(video.webkitSetPresentationMode)) {
+		video.webkitSetPresentationMode("picture-in-picture");
+		return;
+	}
+	if (isFunction(video.requestPictureInPicture)) {
+		await video.requestPictureInPicture();
+		return;
+	}
+	throw new DOMException("Picture-in-Picture not supported", "NotSupportedError");
+}
+async function exitPictureInPicture(media) {
+	if (media) {
+		const target = resolveMediaTarget(media);
+		if (target instanceof HTMLVideoElement) {
+			const video = target;
+			if (isFunction(video.webkitSetPresentationMode) && video.webkitPresentationMode === "picture-in-picture") {
+				video.webkitSetPresentationMode("inline");
+				return;
+			}
+		}
+	}
+	if (isFunction(document.exitPictureInPicture)) return document.exitPictureInPicture();
+}
+
+//#endregion
+//#region ../core/dist/dev/dom/store/features/fullscreen.js
+const fullscreenFeature = definePlayerFeature({
+	name: "fullscreen",
+	state: ({ target }) => ({
+		fullscreen: false,
+		fullscreenAvailability: "unavailable",
+		async requestFullscreen() {
+			const { media, container } = target();
+			if (isPictureInPictureElement(media)) await exitPictureInPicture(media);
+			return requestFullscreen(container, media);
+		},
+		async exitFullscreen() {
+			const { media } = target();
+			return exitFullscreen(media);
+		},
+		async toggleFullscreen() {
+			const { media, container } = target();
+			if (isFullscreenElement(container, media)) return exitFullscreen(media);
+			if (isPictureInPictureElement(media)) await exitPictureInPicture(media);
+			return requestFullscreen(container, media);
+		}
+	}),
+	attach({ target, signal, set }) {
+		const { media, container } = target;
+		set({ fullscreenAvailability: isFullscreenEnabled() ? "available" : "unsupported" });
+		const sync = () => set({ fullscreen: isFullscreenElement(container, media) });
+		sync();
+		listen(document, "fullscreenchange", sync, { signal });
+		listen(document, "webkitfullscreenchange", sync, { signal });
+		if ("webkitPresentationMode" in media) listen(media, "webkitpresentationmodechanged", sync, { signal });
+	}
+});
+
+//#endregion
+//#region ../core/dist/dev/dom/store/features/pip.js
+const pipFeature = definePlayerFeature({
+	name: "pip",
+	state: ({ target }) => ({
+		pip: false,
+		pipAvailability: "unavailable",
+		async requestPictureInPicture() {
+			const { media, container } = target();
+			if (isFullscreenElement(container, media)) await exitFullscreen();
+			return requestPictureInPicture(media);
+		},
+		async exitPictureInPicture() {
+			const { media } = target();
+			return exitPictureInPicture(media);
+		},
+		async togglePictureInPicture() {
+			const { media, container } = target();
+			if (isPictureInPictureElement(media)) return exitPictureInPicture(media);
+			if (isFullscreenElement(container, media)) await exitFullscreen();
+			return requestPictureInPicture(media);
+		}
+	}),
+	attach({ target, signal, set }) {
+		const { media } = target;
+		set({ pipAvailability: isPictureInPictureEnabled() ? "available" : "unsupported" });
+		const sync = () => set({ pip: isPictureInPictureElement(media) });
+		sync();
+		listen(media, "enterpictureinpicture", sync, { signal });
+		listen(media, "leavepictureinpicture", sync, { signal });
+		if ("webkitPresentationMode" in media) listen(media, "webkitpresentationmodechanged", sync, { signal });
+	}
+});
+
+//#endregion
+//#region ../core/dist/dev/dom/store/features/playback.js
+const playbackFeature = definePlayerFeature({
+	name: "playback",
+	state: ({ target }) => ({
+		paused: true,
+		ended: false,
+		started: false,
+		waiting: false,
+		play() {
+			return target().media.play();
+		},
+		pause() {
+			const { media } = target();
+			if (isMediaPauseCapable(media)) media.pause();
+		},
+		togglePaused() {
+			const media = target().media;
+			if (!isMediaPauseCapable(media)) return false;
+			if (media.paused) {
+				media.play();
+				return true;
+			}
+			media.pause();
+			return false;
+		}
+	}),
+	attach({ target, signal, set }) {
+		const { media } = target;
+		if (!isMediaPauseCapable(media) || !isMediaSeekCapable(media) || !isMediaSourceCapable(media)) return;
+		const sync = () => set({
+			paused: media.paused,
+			ended: media.ended,
+			started: !media.paused || media.currentTime > 0,
+			waiting: media.readyState < HTMLMediaElement.HAVE_FUTURE_DATA && !media.paused
+		});
+		sync();
+		listen(media, "emptied", sync, { signal });
+		listen(media, "play", sync, { signal });
+		listen(media, "pause", sync, { signal });
+		listen(media, "ended", sync, { signal });
+		listen(media, "playing", sync, { signal });
+		listen(media, "waiting", sync, { signal });
+		listen(media, "seeked", sync, { signal });
+	}
+});
+
+//#endregion
+//#region ../core/dist/dev/dom/store/features/playback-rate.js
+const DEFAULT_RATES = [
+	.2,
+	.5,
+	.7,
+	1,
+	1.2,
+	1.5,
+	1.7,
+	2
+];
+const playbackRateFeature = definePlayerFeature({
+	name: "playbackRate",
+	state: ({ target }) => ({
+		playbackRates: DEFAULT_RATES,
+		playbackRate: 1,
+		setPlaybackRate(rate) {
+			const { media } = target();
+			if (isMediaPlaybackRateCapable(media)) media.playbackRate = rate;
+		}
+	}),
+	attach({ target, signal, set }) {
+		const { media } = target;
+		if (!isMediaPlaybackRateCapable(media)) return;
+		const sync = () => set({ playbackRate: media.playbackRate });
+		sync();
+		listen(media, "ratechange", sync, { signal });
+	}
+});
+
+//#endregion
+//#region ../core/dist/dev/dom/store/features/source.js
+const sourceFeature = definePlayerFeature({
+	name: "source",
+	state: ({ target, signals }) => ({
+		source: null,
+		canPlay: false,
+		loadSource(src) {
+			signals.clear();
+			const { media } = target();
+			if (!isMediaSourceCapable(media)) return src;
+			media.src = src;
+			media.load();
+			return src;
+		}
+	}),
+	attach({ target, signal, set }) {
+		const { media } = target;
+		if (!isMediaSourceCapable(media)) return;
+		const sync = () => set({
+			source: media.currentSrc || media.src || null,
+			canPlay: media.readyState >= HTMLMediaElement.HAVE_ENOUGH_DATA
+		});
+		sync();
+		listen(media, "canplay", sync, { signal });
+		listen(media, "canplaythrough", sync, { signal });
+		listen(media, "loadstart", sync, { signal });
+		listen(media, "emptied", sync, { signal });
+	}
+});
+
+//#endregion
+//#region ../core/dist/dev/dom/store/features/text-track.js
+const textTrackFeature = definePlayerFeature({
+	name: "textTrack",
+	state: ({ target }) => ({
+		chaptersCues: [],
+		thumbnailCues: [],
+		thumbnailTrackSrc: null,
+		textTrackList: [],
+		subtitlesShowing: false,
+		toggleSubtitles(forceShow) {
+			const { media } = target();
+			if (!isMediaTextTrackCapable(media)) return false;
+			const subtitlesTracks = getTextTrackList(media, (track) => track.kind === "subtitles" || track.kind === "captions");
+			if (!subtitlesTracks.length) return false;
+			const showing = subtitlesTracks.some((track) => track.mode === "showing");
+			const nextShowing = forceShow ?? !showing;
+			for (const track of subtitlesTracks) track.mode = nextShowing ? "showing" : "disabled";
+			return nextShowing;
+		}
+	}),
+	attach({ target, signal, set }) {
+		const { media } = target;
+		if (!isMediaTextTrackCapable(media)) return;
+		let trackCleanup = null;
+		const sync = () => {
+			trackCleanup?.abort();
+			trackCleanup = new AbortController();
+			let chaptersTrack = null;
+			let thumbnailTrack = null;
+			const textTrackList = [];
+			let subtitlesShowing = false;
+			for (let i = 0; i < media.textTracks.length; i++) {
+				const track = media.textTracks[i];
+				if (!chaptersTrack && track.kind === "chapters") chaptersTrack = track;
+				if (!thumbnailTrack && track.kind === "metadata" && track.label === "thumbnails") thumbnailTrack = track;
+				textTrackList.push({
+					kind: track.kind,
+					label: track.label,
+					language: track.language,
+					mode: track.mode
+				});
+				if ((track.kind === "captions" || track.kind === "subtitles") && track.mode === "showing") subtitlesShowing = true;
+			}
+			const chaptersCues = chaptersTrack?.cues ? Array.from(chaptersTrack.cues) : [];
+			const thumbnailCues = thumbnailTrack?.cues ? Array.from(thumbnailTrack.cues) : [];
+			let thumbnailTrackSrc = null;
+			if (thumbnailTrack) thumbnailTrackSrc = findTrackElement(media, thumbnailTrack)?.src ?? null;
+			const tracks = isQuerySelectorAllCapable(media) && media.querySelectorAll("track") || [];
+			const shadowTracks = media instanceof HTMLElement && media.shadowRoot?.querySelectorAll("track") || [];
+			for (const trackEl of [...tracks, ...shadowTracks]) if (!trackEl.track?.cues?.length) listen(trackEl, "load", sync, { signal: trackCleanup.signal });
+			set({
+				chaptersCues,
+				thumbnailCues,
+				thumbnailTrackSrc,
+				textTrackList,
+				subtitlesShowing
+			});
+		};
+		sync();
+		const textTracks = media.textTracks;
+		if (textTracks instanceof EventTarget) {
+			listen(textTracks, "addtrack", sync, { signal });
+			listen(textTracks, "removetrack", sync, { signal });
+			listen(textTracks, "change", sync, { signal });
+		}
+		listen(media, "loadstart", sync, { signal });
+		signal.addEventListener("abort", () => trackCleanup?.abort(), { once: true });
+	}
+});
+
+//#endregion
+//#region ../core/dist/dev/dom/store/signal-keys.js
+const signalKeys = { seek: Symbol.for("@videojs/seek") };
+
+//#endregion
+//#region ../core/dist/dev/dom/store/features/time.js
+const timeFeature = definePlayerFeature({
+	name: "time",
+	state: ({ target, signals, set }) => ({
+		currentTime: 0,
+		duration: 0,
+		seeking: false,
+		async seek(time) {
+			const { media } = target(), signal = signals.supersede(signalKeys.seek);
+			if (!isMediaSeekCapable(media) || !isMediaSourceCapable(media)) return 0;
+			if (!hasMetadata(media)) {
+				if (!await onEvent(media, "loadedmetadata", { signal }).catch(() => false)) return media.currentTime;
+			}
+			const clampedTime = Math.max(0, Math.min(time, media.duration || Infinity));
+			set({
+				currentTime: clampedTime,
+				seeking: true
+			});
+			media.currentTime = clampedTime;
+			await onEvent(media, "seeked", { signal }).catch(noop);
+			return media.currentTime;
+		}
+	}),
+	attach({ target, signal, set, get }) {
+		const { media } = target;
+		if (!isMediaSeekCapable(media)) return;
+		const sync = () => set({
+			currentTime: media.currentTime,
+			duration: Number.isFinite(media.duration) ? media.duration : 0,
+			seeking: media.seeking
+		});
+		const onTimeUpdate = () => {
+			if (get().seeking) return;
+			sync();
+		};
+		sync();
+		listen(media, "timeupdate", onTimeUpdate, { signal });
+		listen(media, "durationchange", sync, { signal });
+		listen(media, "seeking", sync, { signal });
+		listen(media, "seeked", sync, { signal });
+		listen(media, "loadedmetadata", sync, { signal });
+		listen(media, "emptied", sync, { signal });
+	}
+});
+
+//#endregion
+//#region ../core/dist/dev/dom/store/features/volume.js
+/** Volume to restore when unmuting at zero. */
+const UNMUTE_VOLUME = .25;
+const volumeFeature = definePlayerFeature({
+	name: "volume",
+	state: ({ target }) => ({
+		volume: 1,
+		muted: false,
+		volumeAvailability: "unavailable",
+		setVolume(volume) {
+			const { media } = target();
+			if (!isMediaVolumeCapable(media)) return 0;
+			const clamped = Math.max(0, Math.min(1, volume));
+			if (clamped > 0 && media.muted) media.muted = false;
+			media.volume = clamped;
+			return media.volume;
+		},
+		toggleMuted() {
+			const { media } = target();
+			if (!isMediaVolumeCapable(media)) return false;
+			if (media.muted || media.volume === 0) {
+				media.muted = false;
+				if (media.volume === 0) media.volume = UNMUTE_VOLUME;
+			} else media.muted = true;
+			return media.muted;
+		}
+	}),
+	attach({ target, signal, set }) {
+		const { media } = target;
+		if (!isMediaVolumeCapable(media)) return;
+		set({ volumeAvailability: canSetVolume() });
+		const sync = () => set({
+			volume: media.volume,
+			muted: media.muted
+		});
+		sync();
+		listen(media, "volumechange", sync, { signal });
+	}
+});
+/** Check if volume can be programmatically set (fails on iOS Safari). */
+function canSetVolume() {
+	const video = document.createElement("video");
+	try {
+		video.volume = .5;
+		return video.volume === .5 ? "available" : "unsupported";
+	} catch {
+		return "unsupported";
+	}
+}
+
+//#endregion
+//#region ../core/dist/dev/dom/store/features/presets.js
+const videoFeatures = [
+	playbackFeature,
+	playbackRateFeature,
+	volumeFeature,
+	timeFeature,
+	sourceFeature,
+	bufferFeature,
+	fullscreenFeature,
+	pipFeature,
+	controlsFeature,
+	textTrackFeature,
+	errorFeature
+];
+const audioFeatures = [
+	playbackFeature,
+	playbackRateFeature,
+	volumeFeature,
+	timeFeature,
+	sourceFeature,
+	bufferFeature,
+	errorFeature
+];
+const backgroundFeatures = [];
+
+//#endregion
+//#region ../store/dist/dev/html/controllers/snapshot-controller.js
+/**
+* Subscribe to a `State<T>` container with optional selector.
+*
+* Without selector: returns full state, re-renders on any state change.
+* With selector: returns selected slice, re-renders only when the slice changes (shallowEqual).
+*
+* @example
+* ```ts
+* #state = new SnapshotController(this, sliderState, (s) => s.value);
+* ```
+*/
+var SnapshotController = class {
+	#host;
+	#selector;
+	#state;
+	#cached;
+	#unsubscribe = noop;
+	constructor(host, state, selector) {
+		this.#host = host;
+		this.#state = state;
+		this.#selector = selector;
+		host.addController(this);
+	}
+	get value() {
+		if (!this.#selector) return this.#state.current;
+		this.#cached ??= this.#selector(this.#state.current);
+		return this.#cached;
+	}
+	/** Switch to tracking a different state container. */
+	track(state) {
+		this.#state = state;
+		this.#subscribe();
+	}
+	hostConnected() {
+		this.#subscribe();
+	}
+	hostDisconnected() {
+		this.#unsubscribe();
+		this.#unsubscribe = noop;
+		this.#cached = void 0;
+	}
+	#subscribe() {
+		this.#unsubscribe();
+		if (!this.#selector) {
+			this.#unsubscribe = this.#state.subscribe(() => this.#host.requestUpdate());
+			return;
+		}
+		const selector = this.#selector;
+		this.#cached = selector(this.#state.current);
+		this.#unsubscribe = this.#state.subscribe(() => {
+			const next = selector(this.#state.current);
+			if (!shallowEqual(this.#cached, next)) {
+				this.#cached = next;
+				this.#host.requestUpdate();
+			}
+		});
+	}
+};
+
+//#endregion
+//#region ../store/dist/dev/html/store-accessor.js
+/**
+* Resolves a store from either a direct instance or context.
+*
+* When given a direct store, provides immediate access.
+* When given a context, sets up a ContextConsumer to receive the store.
+*
+* @example Direct store
+* ```ts
+* const accessor = new StoreAccessor(host, store, (s) => console.log('available', s));
+* accessor.value; // Store (immediately available)
+* ```
+*
+* @example Context source
+* ```ts
+* const accessor = new StoreAccessor(host, context, (s) => console.log('available', s));
+* accessor.value; // null until context provides store
+* ```
+*/
+var StoreAccessor = class {
+	#onAvailable;
+	#consumer;
+	#directStore;
+	constructor(host, source, onAvailable) {
+		this.#onAvailable = onAvailable ?? noop;
+		if (isStore(source)) {
+			this.#directStore = source;
+			this.#consumer = null;
+		} else {
+			this.#directStore = null;
+			this.#consumer = new ContextConsumer(host, {
+				context: source,
+				callback: (store) => this.#onAvailable(store),
+				subscribe: false
+			});
+		}
+		host.addController(this);
+	}
+	/** Returns the store, or null if not yet available from context. */
+	get value() {
+		if (this.#consumer) return this.#consumer.value ?? null;
+		return this.#directStore;
+	}
+	hostConnected() {
+		if (this.#directStore) this.#onAvailable(this.#directStore);
+	}
+};
+
+//#endregion
+//#region ../store/dist/dev/html/controllers/store-controller.js
+/**
+* Access store state and actions.
+*
+* Without selector: Returns the store, does NOT subscribe to changes.
+* With selector: Returns selected state, triggers update when selected state changes (shallowEqual).
+*
+* @example
+* ```ts
+* // Store access (no subscription) - access actions
+* class Controls extends LitElement {
+*   #store = new StoreController(this, storeSource);
+*
+*   handleClick() {
+*     this.#store.value.setVolume(0.5);
+*   }
+* }
+*
+* // Selector-based subscription - re-renders when playback changes
+* class PlayButton extends LitElement {
+*   #playback = new StoreController(this, storeSource, selectPlayback);
+*
+*   render() {
+*     const playback = this.#playback.value;
+*     if (!playback) return nothing;
+*     return html`<button @click=${playback.toggle}>
+*       ${playback.paused ? 'Play' : 'Pause'}
+*     </button>`;
+*   }
+* }
+* ```
+*/
+var StoreController = class {
+	#host;
+	#selector;
+	#accessor;
+	#snapshot = null;
+	constructor(host, source, selector) {
+		this.#host = host;
+		this.#selector = selector;
+		this.#accessor = new StoreAccessor(host, source, (store) => this.#connect(store));
+		host.addController(this);
+	}
+	get value() {
+		const store = this.#accessor.value;
+		if (isNull(store)) throw new Error("Store not available");
+		if (isUndefined(this.#selector)) return store;
+		return this.#snapshot.value;
+	}
+	hostConnected() {}
+	#connect(store) {
+		if (isUndefined(this.#selector)) return;
+		if (!this.#snapshot) this.#snapshot = new SnapshotController(this.#host, store.$state, this.#selector);
+		else this.#snapshot.track(store.$state);
+	}
+};
+
+//#endregion
+//#region src/player/player-controller.ts
+/**
+* Reactive controller for accessing player store state.
+*
+* Without selector: Returns the store, does NOT subscribe to changes.
+* With selector: Returns selected state, subscribes with shallowEqual comparison.
+*
+* @example
+* ```ts
+* // Store access (no subscription)
+* class Controls extends MediaElement {
+*   #player = new PlayerController(this, playerContext);
+*
+*   handleClick() {
+*     this.#player.value.setVolume(0.5);
+*   }
+* }
+*
+* // Selector-based subscription
+* class PlayButton extends MediaElement {
+*   #playback = new PlayerController(this, playerContext, selectPlayback);
+* }
+* ```
+*/
+var PlayerController = class {
+	#host;
+	#selector;
+	#consumer;
+	#store = null;
+	constructor(host, context, selector) {
+		this.#host = host;
+		this.#selector = selector;
+		this.#consumer = new ContextConsumer(host, {
+			context,
+			callback: (ctx) => this.#connect(ctx),
+			subscribe: true
+		});
+		host.addController(this);
+	}
+	get value() {
+		const store = this.#consumer.value;
+		if (!store) return void 0;
+		if (!this.#selector) return store;
+		return this.#store?.value;
+	}
+	get displayName() {
+		return this.#selector?.displayName;
+	}
+	hostConnected() {
+		const store = this.#consumer.value;
+		if (store) this.#connect(store);
+	}
+	hostDisconnected() {
+		this.#store = null;
+	}
+	#connect(store) {
+		if (!this.#store && this.#selector) this.#store = new StoreController(this.#host, store, this.#selector);
+	}
+};
+
+//#endregion
+//#region src/store/provider-mixin.ts
+/**
+* Create a mixin that provides player context to descendant elements and
+* owns the `store.attach()` lifecycle.
+*
+* Media and container elements register themselves via media/container
+* contexts that carry both the current value and a setter. When a media
+* element is available, the provider calls `store.attach({ media, container })`.
+*
+* As a fallback for plain `<video>`/`<audio>` that can't consume context,
+* the provider queries its subtree after a microtask.
+*
+* @param config - Provider configuration with contexts and store factory.
+*/
+function createProviderMixin(config) {
+	return (BaseClass) => {
+		class PlayerProviderElement extends BaseClass {
+			#store = config.factory();
+			#detach = null;
+			#media = null;
+			#container = null;
+			#fallbackQueued = false;
+			#setMedia = (media) => {
+				if (this.#media === media) return;
+				this.#media = media;
+				this.#mediaProvider.setValue({
+					media,
+					setMedia: this.#setMedia
+				});
+				this.#tryAttach();
+			};
+			#setContainer = (container) => {
+				if (this.#container === container) return;
+				this.#container = container;
+				this.#containerProvider.setValue({
+					container,
+					setContainer: this.#setContainer
+				});
+				this.#tryAttach();
+			};
+			#playerProvider = new ContextProvider(this, {
+				context: config.playerContext,
+				initialValue: this.store
+			});
+			#mediaProvider = new ContextProvider(this, {
+				context: config.mediaContext,
+				initialValue: {
+					media: this.#media,
+					setMedia: this.#setMedia
+				}
+			});
+			#containerProvider = new ContextProvider(this, {
+				context: config.containerContext,
+				initialValue: {
+					container: this.#container,
+					setContainer: this.#setContainer
+				}
+			});
+			get store() {
+				if (isNull(this.#store)) this.#store = config.factory();
+				return this.#store;
+			}
+			connectedCallback() {
+				super.connectedCallback();
+				this.#playerProvider.setValue(this.store);
+				this.#mediaProvider.setValue({
+					media: this.#media,
+					setMedia: this.#setMedia
+				});
+				this.#containerProvider.setValue({
+					container: this.#container,
+					setContainer: this.#setContainer
+				});
+				this.#tryAttach();
+				this.#queueFallbackDiscovery();
+			}
+			disconnectedCallback() {
+				super.disconnectedCallback();
+				this.#detachStore();
+			}
+			destroyCallback() {
+				this.#detachStore();
+				this.#store?.destroy();
+				this.#store = null;
+				super.destroyCallback();
+			}
+			#tryAttach() {
+				const store = this.#store;
+				if (!store) return;
+				if (!this.#media) {
+					this.#detachStore();
+					return;
+				}
+				const target = {
+					media: this.#media,
+					container: this.#container
+				};
+				const hasMediaChanged = store.target?.media !== target.media;
+				const hasContainerChanged = store.target?.container !== target.container;
+				if (hasMediaChanged || hasContainerChanged) {
+					this.#detachStore();
+					this.#detach = store.attach(target);
+				}
+			}
+			#detachStore() {
+				this.#detach?.();
+				this.#detach = null;
+			}
+			#queueFallbackDiscovery() {
+				if (this.#media || this.#fallbackQueued) return;
+				this.#fallbackQueued = true;
+				queueMicrotask(() => {
+					this.#fallbackQueued = false;
+					if (this.#media) return;
+					const media = this.querySelector("video, audio");
+					if (media) this.#setMedia(media);
+				});
+			}
+		}
+		return PlayerProviderElement;
+	};
+}
+
+//#endregion
+//#region src/player/create-player.ts
+function createPlayer(config) {
+	const slice = combine(...config.features);
+	function create() {
+		return createStore()(slice);
+	}
+	return {
+		context: playerContext,
+		create,
+		PlayerController,
+		ProviderMixin: createProviderMixin({
+			playerContext,
+			mediaContext,
+			containerContext,
+			factory: create
+		}),
+		ContainerMixin: createContainerMixin({
+			playerContext,
+			containerContext
+		})
+	};
+}
+
+//#endregion
+export { ContextConsumer as A, isFunction as C, MediaContainerElement as D, isUndefined as E, isEditableTarget as M, isInteractiveActivation as N, MediaElement as O, AbortControllerRegistry as S, isNumber as T, getGestureCoordinator as _, backgroundFeatures as a, noop as b, timeFeature as c, playbackRateFeature as d, playbackFeature as f, controlsFeature as g, errorFeature as h, audioFeatures as i, ReactiveElement as j, ContextProvider as k, textTrackFeature as l, fullscreenFeature as m, PlayerController as n, videoFeatures as o, pipFeature as p, SnapshotController as r, volumeFeature as s, createPlayer as t, sourceFeature as u, bufferFeature as v, isNull as w, throwNoTargetError as x, createState as y };
+//# sourceMappingURL=create-player-Bi6WUwDZ.js.map