@videojs/html 10.0.0-beta.16 → 10.0.0-beta.17

package/cdn/{create-player-DckZq-sE.js → create-player-CyG77t-m.js}

@@ -1,7 +1,7 @@
 import { t as listen } from "./listen-w-Aun0yN.js";
 import { a as ContextRequestEvent, n as mediaContext, r as playerContext, t as containerContext } from "./context-CvJ83xGk.js";
-import { t as anyAbortSignal } from "./abort-CzqmAxxH.js";
-import { t as shallowEqual } from "./shallow-equal-C8Fs4TTE.js";
+import { t as anyAbortSignal } from "./abort-BL-SGV3o.js";
+import { t as shallowEqual } from "./shallow-equal-Ca0qjpLJ.js";
 
 //#region ../utils/dist/dom/event.js
 /** Resolve the deepest event target, preferring composedPath for shadow DOM. */
@@ -29,6 +29,38 @@ function onEvent(target, type, options) {
 	});
 }
 
+//#endregion
+//#region ../utils/dist/dom/predicates.js
+const EDITABLE_INPUT_TYPES = new Set([
+	"text",
+	"search",
+	"url",
+	"tel",
+	"email",
+	"password",
+	"number"
+]);
+function isEditableElement(el) {
+	if (el instanceof HTMLTextAreaElement) return true;
+	if (el instanceof HTMLSelectElement) return true;
+	if (el instanceof HTMLInputElement) return EDITABLE_INPUT_TYPES.has(el.type.toLowerCase());
+	if (!(el instanceof HTMLElement)) return false;
+	const editable = el.getAttribute("contenteditable");
+	return editable !== null && editable !== "false";
+}
+/** 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);
+}
+const INTERACTIVE_SELECTOR = "button, input, select, textarea, [role=\"button\"], [role=\"slider\"]";
+/** 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;
+}
+
 //#endregion
 //#region ../utils/dist/dom/text-track.js
 /** Find the `<track>` element that owns the given `TextTrack`. */
@@ -412,1294 +444,1321 @@ function resolve(ctor) {
 }
 
 //#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";
-}
+//#region ../../node_modules/.pnpm/@lit+context@1.1.6/node_modules/@lit/context/development/lib/controllers/context-consumer.js
 /**
-* Check if a value is an object, excluding null.
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
 */
-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.
+* A ReactiveController which adds context consuming behavior to a custom
+* element by dispatching `context-request` events.
 *
-* @param slices - The slices to combine.
-* @returns A new slice that represents the combination of the input slices.
+* 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.
 */
-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);
+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();
 			}
-			return Object.assign({}, ...states);
-		},
-		attach: (ctx) => {
-			for (const slice of slices) try {
-				slice.attach?.(ctx);
-			} catch (err) {
-				ctx.reportError(err);
+			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;
 		}
-	};
-}
-
-//#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;
+		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));
 	}
 };
-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 });
+//#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;
 	}
-	get current() {
-		return this.#current;
+	set value(v) {
+		this.setValue(v);
 	}
-	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();
-		}
+	setValue(v, force = false) {
+		const update = force || !Object.is(v, this._value);
+		this._value = v;
+		if (update) this.updateObservers();
 	}
-	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);
+	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;
 	}
-	flush() {
-		if (!this.#pending) return;
-		this.#pending = false;
-		for (const fn of this.#listeners) fn();
+	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);
 	}
-	#markPending() {
-		this.#pending = true;
-		pendingContainers.add(this);
-		scheduleFlush();
+	clearCallbacks() {
+		this.subscriptions.clear();
 	}
 };
-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)
+//#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
 		});
-		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
+		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);
 		};
-		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);
+		/**
+		* 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));
 			}
-			try {
-				options.onAttach?.({
-					store,
-					target: newTarget,
-					signal: signals.base
+			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
 				});
-			} 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);
+			get store() {
+				return this.#contextStore;
+			}
+			connectedCallback() {
+				super.connectedCallback();
+				this.#setContainer?.(this);
+			}
+			disconnectedCallback() {
+				super.disconnectedCallback();
+				this.#setContainer?.(null);
+			}
 		}
+		return PlayerContainerElement;
 	};
 }
-function isStore(value) {
-	return isObject(value) && STORE_SYMBOL in value;
-}
 
 //#endregion
-//#region ../core/dist/dev/dom/feature.js
-const definePlayerFeature = defineSlice();
+//#region src/ui/media-element.ts
+/** Base class for interactive media UI elements. */
+var MediaElement = class extends DestroyMixin(ReactiveElement) {};
 
 //#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;
-		const sync = () => set({
-			buffered: serializeTimeRanges(media.buffered),
-			seekable: serializeTimeRanges(media.seekable)
-		});
-		sync();
-		listen(media, "progress", sync, { signal });
-		listen(media, "emptied", sync, { signal });
-	}
+//#region src/media/container-element.ts
+const ContainerMixin = createContainerMixin({
+	playerContext,
+	containerContext
 });
-
-//#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 (isNull(container)) {
-			console.warn("[vjs] controlsFeature requires a container element for activity tracking.");
-			return;
-		}
-		function 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) {
-				const isMediaOrContainer = [media, container].includes(event.target);
-				if (get().controlsVisible && isMediaOrContainer) setInactive();
-				else setActive();
-			} else setActive();
-		}
-		function 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();
+var MediaContainerElement = class extends ContainerMixin(MediaElement) {
+	static {
+		this.tagName = "media-container";
 	}
-});
-
-//#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;
-		const syncError = () => set({ error: media.error });
-		listen(media, "error", syncError, { signal });
-		listen(media, "emptied", () => set({ error: null }), { signal });
+	#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 ../core/dist/dev/dom/presentation/fullscreen.js
-/** Check if the Fullscreen API is supported on this platform. */
-function isFullscreenEnabled() {
-	const doc = document;
-	if (doc.fullscreenEnabled || doc.webkitFullscreenEnabled) return true;
-	return isFunction(document.createElement("video").webkitEnterFullscreen);
+//#region ../utils/dist/predicate/predicate.js
+function isNumber(value) {
+	return typeof value === "number";
 }
-/** Get the current fullscreen element from the document. */
-function getFullscreenElement() {
-	const doc = document;
-	return doc.fullscreenElement ?? doc.webkitFullscreenElement ?? null;
+function isFunction(value) {
+	return typeof value === "function";
 }
-/**
-* Check if a specific element (or its media) is currently in fullscreen.
-*
-* Uses `:fullscreen` pseudo-class which works across Shadow DOM boundaries.
-*/
-function isFullscreenElement(container, media) {
-	const video = media;
-	if (video.webkitDisplayingFullscreen && video.webkitPresentationMode === "fullscreen") return true;
-	const target = container ?? media;
-	if (getFullscreenElement() === target) return true;
-	try {
-		return target.matches(":fullscreen");
-	} catch {
-		return false;
-	}
+function isNull(value) {
+	return value === null;
+}
+function isUndefined(value) {
+	return typeof value === "undefined";
 }
 /**
-* Request fullscreen mode.
-*
-* Tries container first (to show custom UI), falls back to media element
-* for platforms that only support video fullscreen (iOS Safari).
+* Check if a value is an object, excluding null.
 */
-async function requestFullscreen(container, media) {
-	const doc = document;
-	const video = media;
-	if (container && (doc.fullscreenEnabled || doc.webkitFullscreenEnabled)) {
-		const el = container;
-		if (isFunction(el.requestFullscreen)) return el.requestFullscreen();
-		if (isFunction(el.webkitRequestFullscreen)) return el.webkitRequestFullscreen();
-	}
-	if (isFunction(video.webkitEnterFullscreen)) {
-		video.webkitEnterFullscreen();
-		return;
-	}
-	if (isFunction(media.requestFullscreen)) return media.requestFullscreen();
-	throw new DOMException("Fullscreen not supported", "NotSupportedError");
-}
-/** Exit fullscreen mode. */
-async function exitFullscreen(media) {
-	const doc = document;
-	if (media) {
-		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();
+function isObject(value) {
+	return value !== null && typeof value === "object";
 }
 
 //#endregion
-//#region ../core/dist/dev/dom/presentation/pip.js
-function resolveMediaTarget(media) {
-	const target = media.target;
-	return target instanceof HTMLMediaElement ? target : media;
-}
-/**
-* Check if Picture-in-Picture is supported on this platform.
-*
-* Note: Safari PWAs don't support PiP even though the API exists.
-*/
-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;
+//#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;
 	}
-	return isFunction(document.createElement("video").webkitSetPresentationMode);
-}
-/**
-* Check if Picture-in-Picture is currently active for a media element.
-*/
-function isPictureInPictureElement(media) {
-	const target = resolveMediaTarget(media);
-	if (document.pictureInPictureElement === target) return true;
-	return target.webkitPresentationMode === "picture-in-picture";
-}
-/**
-* Request Picture-in-Picture mode.
-*
-* Uses standard API where available, falls back to iOS Safari's
-* WebKit presentation mode.
-*/
-async function requestPictureInPicture(media) {
-	const video = resolveMediaTarget(media);
-	if (isFunction(video.webkitSetPresentationMode)) {
-		video.webkitSetPresentationMode("picture-in-picture");
-		return;
+	/** Clears all keyed signals, leaving base intact. */
+	clear() {
+		for (const controller of this.#keys.values()) controller.abort();
+		this.#keys.clear();
 	}
-	if (isFunction(video.requestPictureInPicture)) {
-		await video.requestPictureInPicture();
-		return;
+	/** Resets base and clears all keyed signals. */
+	reset() {
+		this.clear();
+		this.#base.abort();
+		this.#base = new AbortController();
 	}
-	throw new DOMException("Picture-in-Picture not supported", "NotSupportedError");
-}
+	/** 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
 /**
-* Exit Picture-in-Picture mode.
+* Combines multiple slices into a single slice.
 *
-* Uses standard API where available, falls back to iOS Safari's
-* WebKit presentation mode.
+* @param slices - The slices to combine.
+* @returns A new slice that represents the combination of the input slices.
 */
-async function exitPictureInPicture(media) {
-	if (media) {
-		const video = resolveMediaTarget(media);
-		if (isFunction(video.webkitSetPresentationMode) && video.webkitPresentationMode === "picture-in-picture") {
-			video.webkitSetPresentationMode("inline");
-			return;
+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);
+			}
 		}
-	}
-	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);
-		}
-	}),
-	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 });
+//#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 ../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);
-		}
-	}),
-	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 });
-	}
-});
+//#region ../store/dist/dev/core/slice.js
+function defineSlice() {
+	return (config) => config;
+}
 
 //#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() {
-			target().media.pause();
-		}
-	}),
-	attach({ target, signal, set }) {
-		const { media } = target;
-		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 });
-	}
-});
+//#region ../utils/dist/function/noop.js
+function noop(..._args) {}
 
 //#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) {
-			target().media.playbackRate = rate;
-		}
-	}),
-	attach({ target, signal, set }) {
-		const { media } = target;
-		const sync = () => set({ playbackRate: media.playbackRate });
-		sync();
-		listen(media, "ratechange", sync, { signal });
+//#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 });
 	}
-});
-
-//#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();
-			media.src = src;
-			media.load();
-			return src;
+	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();
 		}
-	}),
-	attach({ target, signal, set }) {
-		const { media } = target;
-		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 });
 	}
-});
+	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 ../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 subtitlesTracks = getTextTrackList(target().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;
+//#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();
 		}
-	}),
-	attach({ target, signal, set }) {
-		const { media } = target;
-		let trackCleanup = null;
-		function 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
+		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
 				});
-				if ((track.kind === "captions" || track.kind === "subtitles") && track.mode === "showing") subtitlesShowing = true;
+			} catch (error) {
+				reportError(error);
 			}
-			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 = media.querySelectorAll?.("track") ?? [];
-			const shadowTracks = 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
+			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);
 		}
-		sync();
-		listen(media.textTracks, "addtrack", sync, { signal });
-		listen(media.textTracks, "removetrack", sync, { signal });
-		listen(media.textTracks, "change", sync, { signal });
-		listen(media, "loadstart", sync, { signal });
-		signal.addEventListener("abort", () => trackCleanup?.abort(), { once: true });
-	}
-});
-
-//#endregion
-//#region ../core/dist/dev/dom/media/predicate.js
-function hasMetadata(media) {
-	return media.readyState >= HTMLMediaElement.HAVE_METADATA;
+	};
+}
+function isStore(value) {
+	return isObject(value) && STORE_SYMBOL in value;
 }
 
 //#endregion
-//#region ../core/dist/dev/dom/store/signal-keys.js
-const signalKeys = { seek: Symbol.for("@videojs/seek") };
+//#region ../core/dist/dev/dom/feature.js
+const definePlayerFeature = defineSlice();
 
 //#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 (!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;
-		}
+//#region ../core/dist/dev/dom/store/features/buffer.js
+const bufferFeature = definePlayerFeature({
+	name: "buffer",
+	state: () => ({
+		buffered: [],
+		seekable: []
 	}),
-	attach({ target, signal, set, get }) {
+	attach({ target, signal, set }) {
 		const { media } = target;
 		const sync = () => set({
-			currentTime: media.currentTime,
-			duration: Number.isFinite(media.duration) ? media.duration : 0,
-			seeking: media.seeking
+			buffered: serializeTimeRanges(media.buffered),
+			seekable: serializeTimeRanges(media.seekable)
 		});
-		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, "progress", 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();
-			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 (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;
-		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";
+//#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/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 ../../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;
+//#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();
 		};
-		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();
+	#connect() {
+		if (this.#disconnect) return;
+		this.#disconnect = new AbortController();
+		const { signal } = this.#disconnect;
+		let pointerDownTime = 0;
+		listen(this.#target, "pointerdown", () => {
+			pointerDownTime = Date.now();
+		}, { signal });
+		listen(this.#target, "pointerup", (event) => {
+			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;
 	}
-	hostDisconnected() {
-		if (this.unsubscribe) {
-			this.unsubscribe();
-			this.unsubscribe = void 0;
+};
+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 (isNull(container)) {
+			console.warn("[vjs] controlsFeature requires a container element for activity tracking.");
+			return;
+		}
+		function 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();
+		}
+		function 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();
 	}
-	dispatchRequest() {
-		this.host.dispatchEvent(new ContextRequestEvent(this.context, this.host, this._callback, this.subscribe));
+});
+
+//#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;
+		const syncError = () => set({ error: media.error });
+		listen(media, "error", syncError, { signal });
+		listen(media, "emptied", () => set({ error: null }), { signal });
 	}
-};
+});
 
 //#endregion
-//#region ../../node_modules/.pnpm/@lit+context@1.1.6/node_modules/@lit/context/development/lib/value-notifier.js
+//#region ../core/dist/dev/dom/presentation/fullscreen.js
+/** Check if the Fullscreen API is supported on this platform. */
+function isFullscreenEnabled() {
+	const doc = document;
+	if (doc.fullscreenEnabled || doc.webkitFullscreenEnabled) return true;
+	return isFunction(document.createElement("video").webkitEnterFullscreen);
+}
+/** Get the current fullscreen element from the document. */
+function getFullscreenElement() {
+	const doc = document;
+	return doc.fullscreenElement ?? doc.webkitFullscreenElement ?? null;
+}
 /**
-* @license
-* Copyright 2021 Google LLC
-* SPDX-License-Identifier: BSD-3-Clause
+* Check if a specific element (or its media) is currently in fullscreen.
+*
+* Uses `:fullscreen` pseudo-class which works across Shadow DOM boundaries.
 */
+function isFullscreenElement(container, media) {
+	const video = media;
+	if (video.webkitDisplayingFullscreen && video.webkitPresentationMode === "fullscreen") return true;
+	const target = container ?? media;
+	if (getFullscreenElement() === target) return true;
+	try {
+		return target.matches(":fullscreen");
+	} catch {
+		return false;
+	}
+}
 /**
-* A simple class which stores a value, and triggers registered callbacks when
-* the value is changed via its setter.
+* Request fullscreen mode.
 *
-* 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.
+* Tries container first (to show custom UI), falls back to media element
+* for platforms that only support video fullscreen (iOS Safari).
 */
-var ValueNotifier = class {
-	get value() {
-		return this._value;
+async function requestFullscreen(container, media) {
+	const doc = document;
+	const video = media;
+	if (container && (doc.fullscreenEnabled || doc.webkitFullscreenEnabled)) {
+		const el = container;
+		if (isFunction(el.requestFullscreen)) return el.requestFullscreen();
+		if (isFunction(el.webkitRequestFullscreen)) return el.webkitRequestFullscreen();
 	}
-	set value(v) {
-		this.setValue(v);
+	if (isFunction(video.webkitEnterFullscreen)) {
+		video.webkitEnterFullscreen();
+		return;
 	}
-	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);
+	if (isFunction(media.requestFullscreen)) return media.requestFullscreen();
+	throw new DOMException("Fullscreen not supported", "NotSupportedError");
+}
+/** Exit fullscreen mode. */
+async function exitFullscreen(media) {
+	const doc = document;
+	if (media) {
+		const video = media;
+		if (isFunction(video.webkitExitFullscreen) && video.webkitDisplayingFullscreen) {
+			video.webkitExitFullscreen();
 			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();
 	}
-};
+	if (isFunction(doc.exitFullscreen)) return doc.exitFullscreen();
+	if (isFunction(doc.webkitExitFullscreen)) return doc.webkitExitFullscreen();
+}
 
 //#endregion
-//#region ../../node_modules/.pnpm/@lit+context@1.1.6/node_modules/@lit/context/development/lib/controllers/context-provider.js
+//#region ../core/dist/dev/dom/presentation/pip.js
+function resolveMediaTarget(media) {
+	const target = media.target;
+	return target instanceof HTMLMediaElement ? target : media;
+}
 /**
-* @license
-* Copyright 2021 Google LLC
-* SPDX-License-Identifier: BSD-3-Clause
+* Check if Picture-in-Picture is supported on this platform.
+*
+* Note: Safari PWAs don't support PiP even though the API exists.
 */
-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;
+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);
+}
 /**
-* 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.
+* Check if Picture-in-Picture is currently active for a media element.
+*/
+function isPictureInPictureElement(media) {
+	const target = resolveMediaTarget(media);
+	if (document.pictureInPictureElement === target) return true;
+	return target.webkitPresentationMode === "picture-in-picture";
+}
+/**
+* Request Picture-in-Picture mode.
 *
-* 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.
+* Uses standard API where available, falls back to iOS Safari's
+* WebKit presentation mode.
 */
-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);
+async function requestPictureInPicture(media) {
+	const video = resolveMediaTarget(media);
+	if (isFunction(video.webkitSetPresentationMode)) {
+		video.webkitSetPresentationMode("picture-in-picture");
+		return;
 	}
-	hostConnected() {
-		this.host.dispatchEvent(new ContextProviderEvent(this.context, this.host));
+	if (isFunction(video.requestPictureInPicture)) {
+		await video.requestPictureInPicture();
+		return;
 	}
-};
-
-//#endregion
-//#region src/store/container-mixin.ts
+	throw new DOMException("Picture-in-Picture not supported", "NotSupportedError");
+}
 /**
-* Create a mixin that consumes player context and registers itself as the
-* container element with the provider via `containerContext`.
+* Exit Picture-in-Picture mode.
 *
-* @param config - Container configuration with player and container contexts.
+* Uses standard API where available, falls back to iOS Safari's
+* WebKit presentation mode.
 */
-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);
-			}
+async function exitPictureInPicture(media) {
+	if (media) {
+		const video = resolveMediaTarget(media);
+		if (isFunction(video.webkitSetPresentationMode) && video.webkitPresentationMode === "picture-in-picture") {
+			video.webkitSetPresentationMode("inline");
+			return;
 		}
-		return PlayerContainerElement;
-	};
+	}
+	if (isFunction(document.exitPictureInPicture)) return document.exitPictureInPicture();
 }
 
 //#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;
+//#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 });
 	}
-	#onPointerUp = () => {
-		if (!this.contains(document.activeElement) || document.activeElement === document.body) this.focus({ preventScroll: true });
-	};
-};
+});
 
 //#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;
+//#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() {
+			target().media.pause();
+		},
+		togglePaused() {
+			const media = target().media;
+			if (media.paused) {
+				media.play();
+				return true;
 			}
-			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
+			media.pause();
+			return false;
+		}
+	}),
+	attach({ target, signal, set }) {
+		const { media } = target;
+		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) {
+			target().media.playbackRate = rate;
+		}
+	}),
+	attach({ target, signal, set }) {
+		const { media } = target;
+		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();
+			media.src = src;
+			media.load();
+			return src;
+		}
+	}),
+	attach({ target, signal, set }) {
+		const { media } = target;
+		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 subtitlesTracks = getTextTrackList(target().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;
+		let trackCleanup = null;
+		function 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
 				});
-				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;
+				if ((track.kind === "captions" || track.kind === "subtitles") && track.mode === "showing") subtitlesShowing = true;
 			}
-			#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);
-				});
+			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 = media.querySelectorAll?.("track") ?? [];
+			const shadowTracks = 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();
+		listen(media.textTracks, "addtrack", sync, { signal });
+		listen(media.textTracks, "removetrack", sync, { signal });
+		listen(media.textTracks, "change", sync, { signal });
+		listen(media, "loadstart", sync, { signal });
+		signal.addEventListener("abort", () => trackCleanup?.abort(), { once: true });
+	}
+});
+
+//#endregion
+//#region ../core/dist/dev/dom/media/predicate.js
+function hasMetadata(media) {
+	return media.readyState >= HTMLMediaElement.HAVE_METADATA;
+}
+
+//#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 (!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;
 		}
-		return PlayerProviderElement;
-	};
+	}),
+	attach({ target, signal, set, get }) {
+		const { media } = target;
+		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();
+			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 (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;
+		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
 /**
@@ -1929,6 +1988,130 @@ var PlayerController = class {
 	}
 };
 
+//#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) {
@@ -1954,5 +2137,5 @@ function createPlayer(config) {
 }
 
 //#endregion
-export { ReactiveElement as A, noop as C, isNull as D, isFunction as E, isNumber as O, createState as S, AbortControllerRegistry as T, pipFeature as _, MediaElement as a, controlsFeature as b, audioFeatures as c, volumeFeature as d, timeFeature as f, playbackFeature as g, playbackRateFeature as h, MediaContainerElement as i, resolveEventTarget as j, isUndefined as k, backgroundFeatures as l, sourceFeature as m, PlayerController as n, ContextProvider as o, textTrackFeature as p, SnapshotController as r, ContextConsumer as s, createPlayer as t, videoFeatures as u, fullscreenFeature as v, throwNoTargetError as w, bufferFeature as x, errorFeature as y };
-//# sourceMappingURL=create-player-DckZq-sE.js.map
+export { ContextConsumer as A, isFunction as C, MediaContainerElement as D, isUndefined as E, isEditableTarget as M, resolveEventTarget 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-CyG77t-m.js.map