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

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

@@ -1,9 +1,14 @@
 import { t as listen } from "./listen-w-Aun0yN.js";
-import { a as ContextRequestEvent, n as mediaContext, r as playerContext, t as containerContext } from "./context-BjrbhiSk.js";
-import { t as anyAbortSignal } from "./abort-CzqmAxxH.js";
-import { t as shallowEqual } from "./shallow-equal-C8Fs4TTE.js";
+import { a as ContextRequestEvent, n as mediaContext, r as playerContext, t as containerContext } from "./context-CvJ83xGk.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. */
+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 = () => {
@@ -25,64 +30,35 @@ function onEvent(target, type, options) {
 }
 
 //#endregion
-//#region ../utils/dist/dom/supports.js
-function supportsAnchorPositioning() {
-	return typeof CSS !== "undefined" && CSS.supports("anchor-name: --a");
-}
-
-//#endregion
-//#region ../utils/dist/dom/popover.js
-function tryShowPopover(el) {
-	try {
-		el?.showPopover?.();
-	} catch {}
-}
-function tryHidePopover(el) {
-	try {
-		el?.hidePopover?.();
-	} catch {}
-}
-
-//#endregion
-//#region ../utils/dist/string/casing.js
-function kebabCase(str) {
-	return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+//#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";
 }
-
-//#endregion
-//#region ../utils/dist/dom/style.js
-function applyStyles(element, styles) {
-	for (const [prop, value] of Object.entries(styles)) if (typeof value === "string") {
-		const key = prop.startsWith("--") ? prop : kebabCase(prop);
-		element.style.setProperty(key, value);
-	}
+/** 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);
 }
-function resolveCSSLength(el, value) {
-	const trimmed = value.trim();
-	if (!trimmed) return 0;
-	const parsed = Number.parseFloat(trimmed);
-	if (Number.isNaN(parsed)) return 0;
-	if (/^-?\d*\.?\d+$/.test(trimmed) || trimmed.endsWith("px")) return parsed;
-	const doc = el.ownerDocument;
-	const root = doc?.documentElement;
-	if (trimmed.endsWith("rem")) return parsed * (root ? Number.parseFloat(getComputedStyle(root).fontSize) || 16 : 16);
-	if (trimmed.endsWith("em")) return parsed * (el instanceof HTMLElement ? Number.parseFloat(getComputedStyle(el).fontSize) || 16 : 16);
-	if (!doc) return parsed;
-	const measurementEl = doc.createElement("div");
-	measurementEl.style.position = "absolute";
-	measurementEl.style.visibility = "hidden";
-	measurementEl.style.pointerEvents = "none";
-	measurementEl.style.inlineSize = trimmed;
-	measurementEl.style.blockSize = "0";
-	measurementEl.style.padding = "0";
-	measurementEl.style.border = "0";
-	measurementEl.style.inset = "0";
-	const parent = doc.body ?? doc.documentElement;
-	if (!parent) return parsed;
-	parent.appendChild(measurementEl);
-	const pixels = measurementEl.getBoundingClientRect().width;
-	measurementEl.remove();
-	return Number.isFinite(pixels) ? pixels : parsed;
+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
@@ -97,7 +73,7 @@ function getTextTrackList(media, filterPred) {
 	return Array.from(media.textTracks).filter(filterPred).sort(sortByTextTrackKind);
 }
 function sortByTextTrackKind(a, b) {
-	return a.kind >= b.kind ? 1 : -1;
+	return a.kind > b.kind ? 1 : a.kind < b.kind ? -1 : 0;
 }
 
 //#endregion
@@ -468,190 +444,398 @@ 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;
+/**
+* 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);
 	}
-	/** Clears all keyed signals, leaving base intact. */
-	clear() {
-		for (const controller of this.#keys.values()) controller.abort();
-		this.#keys.clear();
+	hostConnected() {
+		this.dispatchRequest();
 	}
-	/** Resets base and clears all keyed signals. */
-	reset() {
-		this.clear();
-		this.#base.abort();
-		this.#base = new AbortController();
+	hostDisconnected() {
+		if (this.unsubscribe) {
+			this.unsubscribe();
+			this.unsubscribe = void 0;
+		}
 	}
-	/** 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]);
+	dispatchRequest() {
+		this.host.dispatchEvent(new ContextRequestEvent(this.context, this.host, this._callback, this.subscribe));
 	}
 };
 
 //#endregion
-//#region ../store/dist/dev/core/combine.js
+//#region ../../node_modules/.pnpm/@lit+context@1.1.6/node_modules/@lit/context/development/lib/value-notifier.js
 /**
-* Combines multiple slices into a single slice.
+* @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.
 *
-* @param slices - The slices to combine.
-* @returns A new slice that represents the combination of the input slices.
+* 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.
 */
-function combine(...slices) {
-	return {
-		state: (ctx) => {
-			const states = slices.map((slice) => slice.state(ctx));
-			return Object.assign({}, ...states);
-		},
-		attach: (ctx) => {
-			for (const slice of slices) try {
-				slice.attach?.(ctx);
-			} catch (err) {
-				ctx.reportError(err);
-			}
+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;
 		}
-	};
-}
-
-//#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;
+		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();
 	}
 };
-function throwNoTargetError() {
-	throw new StoreError("NO_TARGET");
-}
-function throwDestroyedError() {
-	throw new StoreError("DESTROYED");
-}
 
 //#endregion
-//#region ../utils/dist/object/pick.js
+//#region ../../node_modules/.pnpm/@lit+context@1.1.6/node_modules/@lit/context/development/lib/controllers/context-provider.js
 /**
-* Creates a new object with only the specified keys.
-*
-* @example
-* const obj = { a: 1, b: 2, c: 3 };
-* pick(obj, ['a', 'c']); // { a: 1, c: 3 }
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
 */
-function pick(obj, keys) {
-	const result = {};
-	for (const key of keys) result[key] = obj[key];
-	return result;
-}
-
-//#endregion
-//#region ../store/dist/dev/core/selector.js
-const stateContext = {
-	target: throwNoTargetError,
-	signals: new AbortControllerRegistry(),
-	set: throwNoTargetError
+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;
+	}
 };
 /**
-* Create a type-safe selector for a slice's state.
-*
-* The selector returns the slice's state, or `undefined` if the slice
-* is not configured in the store.
+* A ReactiveController which adds context provider behavior to a
+* custom element.
 *
-* @example
-* ```ts
-* const selectPlayback = createSelector(playbackSlice);
-* selectPlayback(store.state); // { paused, play, pause, ... } | undefined
-* selectPlayback.displayName;  // 'playback' (from slice name)
-* ```
+* 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.
 *
-* @param slice - The slice to create a selector for.
-*/
-function createSelector(slice) {
-	const initialState = slice.state(stateContext);
-	const keys = Object.keys(initialState);
-	const firstKey = keys[0];
-	if (!firstKey) return Object.assign(() => void 0, { displayName: slice.name });
-	return Object.assign((state) => {
-		if (!(firstKey in state)) return void 0;
-		return pick(state, keys);
-	}, { displayName: slice.name });
-}
-
-//#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 ../utils/dist/function/throttle.js
-/**
-* Trailing-edge throttle: the first call schedules a timer; subsequent calls
-* within the window update the arguments. The function fires once per `ms`
-* window with the latest arguments.
+* 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.
 */
-function throttle(fn, ms) {
-	let timerId = null;
-	let latestArgs;
-	const throttled = (...args) => {
-		latestArgs = args;
-		if (timerId !== null) return;
-		timerId = setTimeout(() => {
-			timerId = null;
-			fn(...latestArgs);
-		}, ms);
-	};
-	throttled.cancel = () => {
-		if (timerId !== null) {
-			clearTimeout(timerId);
-			timerId = null;
-		}
-	};
-	return throttled;
-}
-
-//#endregion
-//#region ../store/dist/dev/core/state.js
-let isFlushScheduled = false;
-function scheduleFlush() {
-	if (isFlushScheduled) return;
-	isFlushScheduled = true;
-	queueMicrotask(flush);
+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() {
@@ -733,6 +917,7 @@ function createStore() {
 				return target;
 			},
 			signals,
+			get: () => state.current,
 			set: (partial) => state.patch(partial)
 		});
 		state = createState(initialState);
@@ -852,15 +1037,152 @@ const bufferFeature = definePlayerFeature({
 	}
 });
 
+//#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", () => {
+			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;
+	}
+};
+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: () => ({
+	state: ({ get, set }) => ({
 		userActive: true,
-		controlsVisible: true
+		controlsVisible: true,
+		toggleControls() {
+			const next = !get().userActive;
+			set({
+				userActive: next,
+				controlsVisible: next
+			});
+			return next;
+		}
 	}),
 	attach({ target, signal, get, set }) {
 		const { media, container } = target;
@@ -894,12 +1216,18 @@ const controlsFeature = definePlayerFeature({
 				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();
@@ -1083,6 +1411,12 @@ const fullscreenFeature = definePlayerFeature({
 		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 }) {
@@ -1111,6 +1445,12 @@ const pipFeature = definePlayerFeature({
 		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 }) {
@@ -1138,6 +1478,15 @@ const playbackFeature = definePlayerFeature({
 		},
 		pause() {
 			target().media.pause();
+		},
+		togglePaused() {
+			const media = target().media;
+			if (media.paused) {
+				media.play();
+				return true;
+			}
+			media.pause();
+			return false;
 		}
 	}),
 	attach({ target, signal, set }) {
@@ -1162,6 +1511,9 @@ const playbackFeature = definePlayerFeature({
 //#endregion
 //#region ../core/dist/dev/dom/store/features/playback-rate.js
 const DEFAULT_RATES = [
+	.2,
+	.5,
+	.7,
 	1,
 	1.2,
 	1.5,
@@ -1312,15 +1664,19 @@ const timeFeature = definePlayerFeature({
 			return media.currentTime;
 		}
 	}),
-	attach({ target, signal, set }) {
+	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", sync, { signal });
+		listen(media, "timeupdate", onTimeUpdate, { signal });
 		listen(media, "durationchange", sync, { signal });
 		listen(media, "seeking", sync, { signal });
 		listen(media, "seeked", sync, { signal });
@@ -1404,1535 +1760,231 @@ const audioFeatures = [
 const backgroundFeatures = [];
 
 //#endregion
-//#region ../core/dist/dev/dom/store/selectors.js
-/** Select the buffer state (buffered ranges, percent buffered). */
-const selectBuffer = createSelector(bufferFeature);
-/** Select the controls state (controls visible, user-active). */
-const selectControls = createSelector(controlsFeature);
-/** Select the error state (error, dismissed, dismissError). */
-const selectError = createSelector(errorFeature);
-/** Select the fullscreen state (fullscreen active, availability). */
-const selectFullscreen = createSelector(fullscreenFeature);
-/** Select the PiP state (picture-in-picture active, availability). */
-const selectPiP = createSelector(pipFeature);
-/** Select the playback state (paused, ended, play, pause, toggle). */
-const selectPlayback = createSelector(playbackFeature);
-/** Select the playback rate state (playbackRate, playbackRates, setPlaybackRate). */
-const selectPlaybackRate = createSelector(playbackRateFeature);
-/** Select the source state (src, type). */
-const selectSource = createSelector(sourceFeature);
-/** Select the text track state (chapters cues, thumbnail cues). */
-const selectTextTrack = createSelector(textTrackFeature);
-/** Select the time state (currentTime, duration, seek). */
-const selectTime = createSelector(timeFeature);
-/** Select the volume state (volume, muted, setVolume, setMuted). */
-const selectVolume = createSelector(volumeFeature);
-
-//#endregion
-//#region ../core/dist/dev/dom/ui/dismiss-layer.js
-function createDismissLayer(options) {
-	const { transition } = options;
-	const state = transition.state;
-	const abort = new AbortController();
-	let docAbort = null;
-	function open() {
-		if (abort.signal.aborted) return null;
-		const { active, status } = state.current;
-		if (active && status !== "ending") return null;
-		if (status === "ending") transition.cancel();
-		return transition.open();
-	}
-	function close(element) {
-		const { active, status } = state.current;
-		if (abort.signal.aborted || !active || status === "ending") return null;
-		return transition.close(element);
-	}
-	function setupDocumentListeners() {
-		cleanupDocumentListeners();
-		if (typeof document === "undefined") return;
-		docAbort = new AbortController();
-		const { signal } = docAbort;
-		listen(document, "keydown", handleKeydown, { signal });
-		options.onDocumentActive?.(signal);
-	}
-	function cleanupDocumentListeners() {
-		docAbort?.abort();
-		docAbort = null;
-	}
-	function handleKeydown(event) {
-		if (event.key !== "Escape") return;
-		if (!state.current.active) return;
-		if (!(options.closeOnEscape?.() ?? true)) return;
-		options.onEscapeDismiss(event);
-	}
-	const unsubscribe = state.subscribe(() => {
-		if (state.current.active) setupDocumentListeners();
-		else cleanupDocumentListeners();
-	});
-	abort.signal.addEventListener("abort", () => {
-		unsubscribe();
-		transition.destroy();
-		cleanupDocumentListeners();
-	});
-	function destroy() {
-		if (abort.signal.aborted) return;
-		abort.abort();
-	}
-	return {
-		input: state,
-		open,
-		close,
-		signal: abort.signal,
-		destroy
-	};
-}
-
-//#endregion
-//#region ../core/dist/dev/dom/ui/alert-dialog.js
-function createAlertDialog(options) {
-	const { onOpenChange } = options;
-	let element = null;
-	let previousFocus = null;
-	let elementAbort = null;
-	const layer = createDismissLayer({
-		transition: options.transition,
-		closeOnEscape: options.closeOnEscape,
-		onEscapeDismiss(event) {
-			event.stopPropagation();
-			applyClose();
-		}
-	});
-	const state = layer.input;
-	function applyOpen() {
-		previousFocus = document.activeElement;
-		const opening = layer.open();
-		if (!opening) return;
-		onOpenChange(true);
-		requestAnimationFrame(() => {
-			if (layer.signal.aborted || !state.current.active) return;
-			element?.focus();
-		});
-		opening.then(() => {
-			if (layer.signal.aborted || !state.current.active) return;
-			options.onOpenChangeComplete?.(true);
-		});
-	}
-	function applyClose() {
-		const closing = layer.close(element);
-		if (!closing) return;
-		onOpenChange(false);
-		closing.then(() => {
-			if (layer.signal.aborted) return;
-			if (previousFocus) {
-				previousFocus.focus();
-				previousFocus = null;
-			}
-			options.onOpenChangeComplete?.(false);
-		});
+//#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);
 	}
-	function setupElementListeners() {
-		cleanupElementListeners();
-		if (!element) return;
-		elementAbort = new AbortController();
-		const { signal } = elementAbort;
-		listen(element, "click", handleElementClick, { signal });
+	get value() {
+		if (!this.#selector) return this.#state.current;
+		this.#cached ??= this.#selector(this.#state.current);
+		return this.#cached;
 	}
-	function cleanupElementListeners() {
-		elementAbort?.abort();
-		elementAbort = null;
+	/** Switch to tracking a different state container. */
+	track(state) {
+		this.#state = state;
+		this.#subscribe();
 	}
-	function handleElementClick(event) {
-		if (event.target instanceof HTMLButtonElement) applyClose();
+	hostConnected() {
+		this.#subscribe();
 	}
-	function setElement(el) {
-		element = el;
-		setupElementListeners();
+	hostDisconnected() {
+		this.#unsubscribe();
+		this.#unsubscribe = noop;
+		this.#cached = void 0;
 	}
-	layer.signal.addEventListener("abort", () => {
-		cleanupElementListeners();
-		element = null;
-		previousFocus = null;
-	});
-	return {
-		input: state,
-		open: applyOpen,
-		close: applyClose,
-		setElement,
-		destroy: layer.destroy
-	};
-}
-
-//#endregion
-//#region ../core/dist/dev/dom/ui/button.js
-function createButton(options) {
-	const { onActivate, isDisabled } = options;
-	return {
-		role: "button",
-		tabIndex: 0,
-		onClick(event) {
-			if (isDisabled()) {
-				event.preventDefault();
-				return;
-			}
-			onActivate();
-		},
-		onPointerDown(event) {
-			if (isDisabled()) event.preventDefault();
-		},
-		onMouseDown(event) {
-			if (isDisabled()) event.preventDefault();
-		},
-		onKeyDown(event) {
-			if (event.target !== event.currentTarget) return;
-			if (isDisabled()) {
-				if (event.key !== "Tab") event.preventDefault();
-				return;
-			}
-			if (event.key === "Enter") {
-				event.preventDefault();
-				onActivate();
-			} else if (event.key === " ") event.preventDefault();
-		},
-		onKeyUp(event) {
-			if (event.target !== event.currentTarget) return;
-			if (isDisabled()) return;
-			if (event.key === " ") onActivate();
+	#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 ../core/dist/dev/dom/ui/popover/popover.js
-function createPopover(options) {
-	const { onOpenChange, closeOnOutsideClick } = options;
-	let triggerEl = null;
-	let popupEl = null;
-	let hoverTimeout = null;
-	const capturedPointers = /* @__PURE__ */ new Set();
-	const layer = createDismissLayer({
-		transition: options.transition,
-		closeOnEscape: options.closeOnEscape,
-		onEscapeDismiss(event) {
-			event.preventDefault();
-			applyClose("escape", event);
-		},
-		onDocumentActive(signal) {
-			listen(document, "pointerdown", handleDocumentPointerdown, {
-				capture: true,
-				signal
+//#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
 			});
 		}
-	});
-	const state = layer.input;
-	function clearHoverTimeout() {
-		if (hoverTimeout !== null) {
-			clearTimeout(hoverTimeout);
-			hoverTimeout = null;
-		}
-	}
-	function canHover() {
-		return globalThis.matchMedia?.("(hover: hover)")?.matches ?? false;
-	}
-	function canOpenOnFocus() {
-		if (!canHover()) return false;
-		return globalThis.matchMedia?.("(pointer: fine)")?.matches ?? false;
-	}
-	function canToggleOnClick() {
-		if (!options.openOnHover?.()) return true;
-		return canHover();
-	}
-	/**
-	* The transition handler manages animation lifecycle via `createState`:
-	*
-	* **Open:** `transition.open()` patches `{ active: true, status: 'starting' }`.
-	* After one RAF it patches `{ status: 'idle' }` and the promise resolves.
-	* Frameworks render `data-starting-style` / `data-ending-style` via
-	* `getPopupAttrs(state)` — no imperative DOM mutation needed.
-	*
-	* **Close:** `transition.close(el)` patches `{ status: 'ending' }` (keeping
-	* `active: true` so the element stays mounted). After a double-RAF it waits
-	* for `getAnimations()` to settle, then patches `{ active: false, status: 'idle' }`.
-	*
-	* `onOpenChange` fires immediately (before animations).
-	* `onOpenChangeComplete` fires after animations finish.
-	*/
-	function applyOpen(reason, event) {
-		const opening = layer.open();
-		if (!opening) return;
-		onOpenChange(true, event ? {
-			reason,
-			event
-		} : { reason });
-		opening.then(() => {
-			if (layer.signal.aborted || !state.current.active) return;
-			options.onOpenChangeComplete?.(true);
-		});
-	}
-	function applyClose(reason, event) {
-		const closing = layer.close(popupEl);
-		if (!closing) return;
-		onOpenChange(false, event ? {
-			reason,
-			event
-		} : { reason });
-		closing.then(() => {
-			if (layer.signal.aborted) return;
-			tryHidePopover(popupEl);
-			options.onOpenChangeComplete?.(false);
-		});
-	}
-	function open(reason = "click") {
-		applyOpen(reason);
-	}
-	function close(reason = "click") {
-		applyClose(reason);
+		host.addController(this);
 	}
-	function handleDocumentPointerdown(event) {
-		if (!closeOnOutsideClick() || !state.current.active) return;
-		const path = event.composedPath();
-		if (triggerEl && path.includes(triggerEl) || popupEl && path.includes(popupEl)) return;
-		applyClose("outside-click", event);
+	/** Returns the store, or null if not yet available from context. */
+	get value() {
+		if (this.#consumer) return this.#consumer.value ?? null;
+		return this.#directStore;
 	}
-	layer.signal.addEventListener("abort", () => {
-		clearHoverTimeout();
-		capturedPointers.clear();
-		triggerEl = null;
-		popupEl = null;
-	});
-	const triggerProps = {
-		onClick(event) {
-			if (!canToggleOnClick()) return;
-			if (state.current.active && state.current.status !== "ending") applyClose("click", event);
-			else applyOpen("click", event);
-		},
-		onPointerEnter(_event) {
-			if (!options.openOnHover?.()) return;
-			if (!canHover()) return;
-			clearHoverTimeout();
-			if (state.current.active) return;
-			const delay = options.delay?.() ?? 300;
-			hoverTimeout = setTimeout(() => applyOpen("hover"), delay);
-		},
-		onPointerLeave(_event) {
-			if (!options.openOnHover?.()) return;
-			if (!canHover()) return;
-			clearHoverTimeout();
-			if (!state.current.active) return;
-			const closeDelay = options.closeDelay?.() ?? 0;
-			hoverTimeout = setTimeout(() => applyClose("hover"), closeDelay);
-		},
-		onFocusIn(_event) {
-			if (options.openOnHover?.()) {
-				if (!canOpenOnFocus()) return;
-				applyOpen("focus");
-			}
-		},
-		onFocusOut(event) {
-			const relatedTarget = event.relatedTarget;
-			if (relatedTarget && (triggerEl?.contains(relatedTarget) || popupEl?.contains(relatedTarget))) return;
-			if (options.openOnHover?.()) applyClose("blur");
-		}
-	};
-	const popupProps = {
-		onPointerEnter(_event) {
-			if (!options.openOnHover?.()) return;
-			clearHoverTimeout();
-		},
-		onPointerLeave(_event) {
-			if (!options.openOnHover?.()) return;
-			if (capturedPointers.size > 0) return;
-			clearHoverTimeout();
-			if (!state.current.active) return;
-			const closeDelay = options.closeDelay?.() ?? 0;
-			hoverTimeout = setTimeout(() => applyClose("hover"), closeDelay);
-		},
-		onGotPointerCapture(event) {
-			capturedPointers.add(event.pointerId);
-		},
-		onLostPointerCapture(event) {
-			capturedPointers.delete(event.pointerId);
-		},
-		onFocusOut(event) {
-			const relatedTarget = event.relatedTarget;
-			if (relatedTarget && (triggerEl?.contains(relatedTarget) || popupEl?.contains(relatedTarget))) return;
-			applyClose("blur");
-		}
-	};
-	function setTriggerElement(el) {
-		triggerEl = el;
-	}
-	function setPopupElement(el) {
-		if (!el && popupEl && state.current.active) tryHidePopover(popupEl);
-		popupEl = el;
-		if (el) {
-			if (state.current.active) tryShowPopover(el);
-		}
+	hostConnected() {
+		if (this.#directStore) this.#onAvailable(this.#directStore);
 	}
-	return {
-		input: state,
-		triggerProps,
-		popupProps,
-		get triggerElement() {
-			return triggerEl;
-		},
-		setTriggerElement,
-		setPopupElement,
-		open,
-		close,
-		destroy: layer.destroy
-	};
-}
-
-//#endregion
-//#region ../core/dist/dev/core/ui/popover/popover-css-vars.js
-const PopoverCSSVars = {
-	sideOffset: "--media-popover-side-offset",
-	alignOffset: "--media-popover-align-offset",
-	anchorWidth: "--media-popover-anchor-width",
-	anchorHeight: "--media-popover-anchor-height",
-	availableWidth: "--media-popover-available-width",
-	availableHeight: "--media-popover-available-height"
 };
 
 //#endregion
-//#region ../core/dist/dev/dom/ui/popover/popover-positioning.js
-const OPPOSITE_SIDE = {
-	top: "bottom",
-	bottom: "top",
-	left: "right",
-	right: "left"
-};
+//#region ../store/dist/dev/html/controllers/store-controller.js
 /**
-* Get positioning styles for the popup element.
+* 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);
 *
-* When the browser supports CSS Anchor Positioning, returns native CSS properties
-* that reference the provided CSS var names for side/align offsets — no JS offset
-* values needed.
+*   handleClick() {
+*     this.#store.value.setVolume(0.5);
+*   }
+* }
 *
-* When rects are provided and anchor positioning is unsupported, falls back to
-* manual JS-computed positioning. The caller must resolve offset CSS vars via
-* `getComputedStyle` and pass them as `offsets`.
+* // Selector-based subscription - re-renders when playback changes
+* class PlayButton extends LitElement {
+*   #playback = new StoreController(this, storeSource, selectPlayback);
 *
-* Returns camelCase keys for standard CSS properties and `--*` keys for
-* custom properties — compatible with both React's `style` prop and
-* `applyStyles()` from `@videojs/utils/dom`.
+*   render() {
+*     const playback = this.#playback.value;
+*     if (!playback) return nothing;
+*     return html`<button @click=${playback.toggle}>
+*       ${playback.paused ? 'Play' : 'Pause'}
+*     </button>`;
+*   }
+* }
+* ```
 */
-function getAnchorPositionStyle(anchorName, opts, triggerRect, popupRect, boundaryRect, offsets, cssVars = PopoverCSSVars) {
-	if (supportsAnchorPositioning()) return getAnchorPositionCSS(anchorName, opts, cssVars);
-	if (triggerRect && popupRect) return {
-		...getManualPositionStyle(triggerRect, popupRect, opts, offsets ?? {
-			sideOffset: 0,
-			alignOffset: 0
-		}),
-		...boundaryRect ? getPositioningCSSVars(triggerRect, boundaryRect, opts.side, cssVars) : {},
-		position: "fixed",
-		inset: "auto",
-		margin: "0"
-	};
-	return {};
-}
-/** Generate style to set on the trigger for CSS Anchor Positioning. */
-function getAnchorNameStyle(anchorName) {
-	if (!supportsAnchorPositioning()) return {};
-	return { anchorName: `--${anchorName}` };
-}
-function getAnchorPositionCSS(anchorName, opts, cssVars = PopoverCSSVars) {
-	const SIDE_OFFSET_VAR = `var(${cssVars.sideOffset}, 0px)`;
-	const ALIGN_OFFSET_VAR = `var(${cssVars.alignOffset}, 0px)`;
-	const { side, align } = opts;
-	const style = {
-		positionAnchor: `--${anchorName}`,
-		position: "fixed",
-		inset: "auto",
-		margin: "0",
-		justifySelf: "normal",
-		alignSelf: "normal",
-		marginInlineStart: "0",
-		marginBlockStart: "0"
-	};
-	const insetProp = OPPOSITE_SIDE[side];
-	if (side === "top" || side === "bottom") {
-		style[insetProp] = `calc(anchor(${side}) + ${SIDE_OFFSET_VAR})`;
-		if (align === "start") style.left = `calc(anchor(left) + ${ALIGN_OFFSET_VAR})`;
-		else if (align === "end") style.right = `calc(anchor(right) + ${ALIGN_OFFSET_VAR})`;
-		else {
-			style.justifySelf = "anchor-center";
-			style.marginInlineStart = ALIGN_OFFSET_VAR;
-		}
-	} else {
-		style[insetProp] = `calc(anchor(${side}) + ${SIDE_OFFSET_VAR})`;
-		if (align === "start") style.top = `calc(anchor(top) + ${ALIGN_OFFSET_VAR})`;
-		else if (align === "end") style.bottom = `calc(anchor(bottom) + ${ALIGN_OFFSET_VAR})`;
-		else {
-			style.alignSelf = "anchor-center";
-			style.marginBlockStart = ALIGN_OFFSET_VAR;
-		}
+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);
 	}
-	return style;
-}
+	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
 /**
-* Compute CSS variables for sizing constraints relative to the anchor/boundary.
+* Reactive controller for accessing player store state.
 *
-* Accepts a `cssVars` map so the same logic works for both popover
-* (`--media-popover-*`) and tooltip (`--media-tooltip-*`) namespaces.
-*/
-function getPositioningCSSVars(triggerRect, boundaryRect, side, cssVars = PopoverCSSVars) {
-	const vars = {};
-	vars[cssVars.anchorWidth] = `${triggerRect.width}px`;
-	vars[cssVars.anchorHeight] = `${triggerRect.height}px`;
-	if (side === "top" || side === "bottom") {
-		vars[cssVars.availableHeight] = side === "top" ? `${triggerRect.top - boundaryRect.top}px` : `${boundaryRect.bottom - triggerRect.bottom}px`;
-		vars[cssVars.availableWidth] = `${boundaryRect.width}px`;
-	} else {
-		vars[cssVars.availableWidth] = side === "left" ? `${triggerRect.left - boundaryRect.left}px` : `${boundaryRect.right - triggerRect.right}px`;
-		vars[cssVars.availableHeight] = `${boundaryRect.height}px`;
-	}
-	return vars;
-}
-/**
-* Compute manual positioning when CSS Anchor Positioning is not supported.
+* Without selector: Returns the store, does NOT subscribe to changes.
+* With selector: Returns selected state, subscribes with shallowEqual comparison.
 *
-* Returns inline `top`/`left` styles in **viewport coordinates** for use
-* with `position: fixed` (the popup is in the top layer). All rects from
-* `getBoundingClientRect()` are already viewport-relative.
+* @example
+* ```ts
+* // Store access (no subscription)
+* class Controls extends MediaElement {
+*   #player = new PlayerController(this, playerContext);
 *
-* Offsets are resolved by the caller from CSS custom properties via
-* `getComputedStyle()` and passed as `offsets`.
-*/
-function getManualPositionStyle(triggerRect, popupRect, opts, offsets = {
-	sideOffset: 0,
-	alignOffset: 0
-}) {
-	const { side, align } = opts;
-	const { sideOffset, alignOffset } = offsets;
-	let top = 0;
-	let left = 0;
-	if (side === "top") top = triggerRect.top - popupRect.height - sideOffset;
-	else if (side === "bottom") top = triggerRect.bottom + sideOffset;
-	else if (side === "left") left = triggerRect.left - popupRect.width - sideOffset;
-	else left = triggerRect.right + sideOffset;
-	if (side === "top" || side === "bottom") if (align === "start") left = triggerRect.left + alignOffset;
-	else if (align === "end") left = triggerRect.right - popupRect.width + alignOffset;
-	else left = triggerRect.left + (triggerRect.width - popupRect.width) / 2 + alignOffset;
-	else if (align === "start") top = triggerRect.top + alignOffset;
-	else if (align === "end") top = triggerRect.bottom - popupRect.height + alignOffset;
-	else top = triggerRect.top + (triggerRect.height - popupRect.height) / 2 + alignOffset;
-	return {
-		top: `${top}px`,
-		left: `${left}px`
-	};
-}
-/**
-* Read side-offset and align-offset CSS custom properties from the
-* popup element's computed style, returning numeric pixel values.
-*/
-function resolveOffsets(el, cssVars = PopoverCSSVars) {
-	const computed = getComputedStyle(el);
-	return {
-		sideOffset: resolveCSSLength(el, computed.getPropertyValue(cssVars.sideOffset)),
-		alignOffset: resolveCSSLength(el, computed.getPropertyValue(cssVars.alignOffset))
-	};
-}
-/**
-* Measure the popup's layout box for positioning.
+*   handleClick() {
+*     this.#player.value.setVolume(0.5);
+*   }
+* }
 *
-* `getBoundingClientRect()` includes active transforms, which causes the
-* fallback position to drift while opening/closing animations scale the popup.
-* Using `offsetWidth`/`offsetHeight` preserves the untransformed size.
-*/
-function getPopupPositionRect(el) {
-	const rect = el.getBoundingClientRect();
-	const width = el.offsetWidth || rect.width;
-	const height = el.offsetHeight || rect.height;
-	const adjustedRect = {
-		...rect,
-		width,
-		height,
-		right: rect.left + width,
-		bottom: rect.top + height
-	};
-	return {
-		...adjustedRect,
-		toJSON: () => adjustedRect
-	};
-}
-
-//#endregion
-//#region ../utils/dist/number/number.js
-/** Clamp a value between min and max (inclusive). */
-function clamp(value, min, max) {
-	return Math.max(min, Math.min(max, value));
-}
-/** Snap a value to the nearest step, offset from min. */
-function roundToStep(value, step, min) {
-	const nearest = Math.round((value - min) / step) * step + min;
-	const dot = `${step}`.indexOf(".");
-	return dot === -1 ? nearest : Number(nearest.toFixed(`${step}`.length - dot - 1));
-}
-
-//#endregion
-//#region ../core/dist/dev/dom/utils/pointer.js
-/** Convert a pointer event position to a 0–100 percent along an element's rect. */
-function getPercentFromPointerEvent(event, rect, orientation, isRTL) {
-	let ratio;
-	if (orientation === "vertical") ratio = 1 - (event.clientY - rect.top) / rect.height;
-	else if (isRTL) ratio = (rect.right - event.clientX) / rect.width;
-	else ratio = (event.clientX - rect.left) / rect.width;
-	if (!Number.isFinite(ratio)) return 0;
-	return clamp(ratio * 100, 0, 100);
-}
-
-//#endregion
-//#region ../core/dist/dev/dom/ui/slider.js
-/** Intentional drag threshold — number of pointermove events before drag starts. */
-const DRAG_THRESHOLD = 2;
-function createSlider(options) {
-	const input = createState({
-		pointerPercent: 0,
-		dragPercent: 0,
-		dragging: false,
-		pointing: false,
-		focused: false
-	});
-	const abort = new AbortController();
-	const commitThrottleMs = options.commitThrottle ?? 0;
-	let isDragging = false, moveCount = 0, cachedRTL = false, cachedRect = null, capturedPointerId = null;
-	const throttledCommit = commitThrottleMs > 0 ? throttle((percent) => options.onValueCommit?.(percent), commitThrottleMs) : null;
-	function releaseCapture() {
-		if (isNull(capturedPointerId)) return;
-		const id = capturedPointerId;
-		capturedPointerId = null;
-		try {
-			options.getElement().releasePointerCapture(id);
-		} catch {}
-	}
-	function endDrag() {
-		if (!isDragging) input.patch({ pointing: false });
-		else {
-			isDragging = false;
-			input.patch({
-				dragging: false,
-				pointing: false
-			});
-			options.onDragEnd?.();
-		}
-		cleanup();
-	}
-	function cleanup() {
-		throttledCommit?.cancel();
-		capturedPointerId = null;
-		cachedRect = null;
-	}
-	const rootProps = {
-		onPointerDown(event) {
-			if (options.isDisabled()) return;
-			event.preventDefault();
-			const el = options.getElement();
-			cachedRect = el.getBoundingClientRect();
-			cachedRTL = options.isRTL();
-			moveCount = 0;
-			releaseCapture();
-			capturedPointerId = event.pointerId;
-			el.setPointerCapture(event.pointerId);
-			const percent = getPercentFromPointerEvent(event, cachedRect, options.getOrientation(), cachedRTL);
-			input.patch({
-				pointing: true,
-				pointerPercent: percent,
-				dragPercent: percent
-			});
-			options.onValueChange?.(percent);
-			options.getThumbElement?.()?.focus({
-				preventScroll: true,
-				focusVisible: false
-			});
-		},
-		onPointerMove(event) {
-			if (options.isDisabled()) return;
-			if (!isNull(capturedPointerId)) {
-				if (event.pointerType !== "touch" && event.buttons === 0) {
-					endDrag();
-					return;
-				}
-				moveCount++;
-				const percent = getPercentFromPointerEvent(event, cachedRect, options.getOrientation(), cachedRTL);
-				if (!isDragging && moveCount >= DRAG_THRESHOLD) {
-					isDragging = true;
-					input.patch({
-						dragging: true,
-						dragPercent: percent,
-						pointerPercent: percent
-					});
-					options.onDragStart?.();
-					options.onValueChange?.(percent);
-					throttledCommit?.(percent);
-				} else if (isDragging) {
-					input.patch({
-						dragPercent: percent,
-						pointerPercent: percent
-					});
-					options.onValueChange?.(percent);
-					throttledCommit?.(percent);
-				} else input.patch({ pointerPercent: percent });
-				return;
-			}
-			const percent = getPercentFromPointerEvent(event, options.getElement().getBoundingClientRect(), options.getOrientation(), options.isRTL());
-			input.patch({
-				pointing: true,
-				pointerPercent: percent
-			});
-		},
-		onPointerUp(event) {
-			if (isNull(capturedPointerId)) return;
-			const percent = getPercentFromPointerEvent(event, cachedRect, options.getOrientation(), cachedRTL);
-			throttledCommit?.cancel();
-			options.onValueCommit?.(percent);
-		},
-		onPointerLeave() {
-			if (!isNull(capturedPointerId)) return;
-			input.patch({ pointing: false });
-		},
-		onLostPointerCapture() {
-			endDrag();
-		}
-	};
-	const thumbProps = {
-		onKeyDown(event) {
-			if (options.isDisabled()) {
-				if (event.key !== "Tab") event.preventDefault();
-				return;
-			}
-			const stepPercent = options.getStepPercent();
-			const largeStepPercent = options.getLargeStepPercent();
-			const rounded = roundToStep(options.getPercent(), stepPercent, 0);
-			const horizontalSign = options.isRTL() ? -1 : 1;
-			const step = event.shiftKey ? largeStepPercent : stepPercent;
-			let newPercent = null;
-			switch (event.key) {
-				case "ArrowRight":
-					newPercent = rounded + step * horizontalSign;
-					break;
-				case "ArrowLeft":
-					newPercent = rounded - step * horizontalSign;
-					break;
-				case "ArrowUp":
-					newPercent = rounded + step;
-					break;
-				case "ArrowDown":
-					newPercent = rounded - step;
-					break;
-				case "PageUp":
-					newPercent = rounded + largeStepPercent;
-					break;
-				case "PageDown":
-					newPercent = rounded - largeStepPercent;
-					break;
-				case "Home":
-					newPercent = 0;
-					break;
-				case "End":
-					newPercent = 100;
-					break;
-				default:
-					if (!event.metaKey && !event.ctrlKey && !event.altKey && event.key >= "0" && event.key <= "9") newPercent = Number(event.key) * 10;
-					break;
-			}
-			if (newPercent !== null) {
-				event.preventDefault();
-				newPercent = clamp(newPercent, 0, 100);
-				input.patch({
-					pointerPercent: newPercent,
-					dragPercent: newPercent
-				});
-				options.onValueChange?.(newPercent);
-				options.onValueCommit?.(newPercent);
-			}
-		},
-		onFocus() {
-			input.patch({ focused: true });
-		},
-		onBlur() {
-			input.patch({ focused: false });
-		}
-	};
-	function adjustForAlignment(state) {
-		if (!options.adjustPercent || state.thumbAlignment !== "edge") return state;
-		const rootEl = options.getElement();
-		const thumbEl = options.getThumbElement?.();
-		if (!thumbEl) return state;
-		const isHorizontal = state.orientation === "horizontal";
-		const thumbSize = isHorizontal ? thumbEl.offsetWidth : thumbEl.offsetHeight;
-		const trackSize = isHorizontal ? rootEl.offsetWidth : rootEl.offsetHeight;
-		return {
-			...state,
-			fillPercent: options.adjustPercent(state.fillPercent, thumbSize, trackSize),
-			pointerPercent: options.adjustPercent(state.pointerPercent, thumbSize, trackSize)
-		};
-	}
-	let resizeObserver = null;
-	if (options.onResize) {
-		resizeObserver = new ResizeObserver(() => options.onResize());
-		resizeObserver.observe(options.getElement());
-	}
-	return {
-		input,
-		rootProps,
-		rootStyle: {
-			touchAction: "none",
-			userSelect: "none"
-		},
-		thumbProps,
-		adjustForAlignment,
-		destroy() {
-			if (abort.signal.aborted) return;
-			abort.abort();
-			resizeObserver?.disconnect();
-			releaseCapture();
-			cleanup();
-		}
-	};
-}
-
-//#endregion
-//#region ../core/dist/dev/core/ui/slider/slider-css-vars.js
-/** CSS custom property names for slider visual state. */
-const SliderCSSVars = {
-	fill: "--media-slider-fill",
-	pointer: "--media-slider-pointer",
-	buffer: "--media-slider-buffer"
-};
-
-//#endregion
-//#region ../core/dist/dev/dom/ui/slider-css-vars.js
-function getSliderCSSVars(state) {
-	return {
-		[SliderCSSVars.fill]: `${state.fillPercent.toFixed(3)}%`,
-		[SliderCSSVars.pointer]: `${state.pointerPercent.toFixed(3)}%`
-	};
-}
-function getTimeSliderCSSVars(state) {
-	return {
-		...getSliderCSSVars(state),
-		[SliderCSSVars.buffer]: `${state.bufferPercent.toFixed(3)}%`
-	};
-}
-/** Compute structural positioning styles for a slider preview element. */
-function getSliderPreviewStyle(width, overflow) {
-	const halfWidth = width / 2;
-	return {
-		position: "absolute",
-		left: overflow === "visible" ? `calc(var(${SliderCSSVars.pointer}) - ${halfWidth}px)` : `min(max(0px, calc(var(${SliderCSSVars.pointer}) - ${halfWidth}px)), calc(100% - ${width}px))`,
-		width: "max-content",
-		pointerEvents: "none"
-	};
-}
-
-//#endregion
-//#region ../core/dist/dev/core/ui/thumbnail/thumbnail-core.js
-var ThumbnailCore = class {
-	findActiveThumbnail(thumbnails, time) {
-		if (thumbnails.length === 0) return void 0;
-		let low = 0;
-		let high = thumbnails.length - 1;
-		let result;
-		while (low <= high) {
-			const mid = low + high >>> 1;
-			const image = thumbnails[mid];
-			if (time >= image.startTime) {
-				result = image;
-				low = mid + 1;
-			} else high = mid - 1;
-		}
-		return result;
-	}
-	/**
-	* Parse CSS constraint strings into numeric `ThumbnailConstraints`.
-	*
-	* Accepts any object with string `minWidth`/`maxWidth`/`minHeight`/`maxHeight`
-	* properties — `CSSStyleDeclaration` satisfies this structurally.
-	*/
-	parseConstraints(raw) {
-		const minW = parseFloat(raw.minWidth);
-		const maxW = parseFloat(raw.maxWidth);
-		const minH = parseFloat(raw.minHeight);
-		const maxH = parseFloat(raw.maxHeight);
-		return {
-			minWidth: Number.isFinite(minW) ? minW : 0,
-			maxWidth: Number.isFinite(maxW) ? maxW : Infinity,
-			minHeight: Number.isFinite(minH) ? minH : 0,
-			maxHeight: Number.isFinite(maxH) ? maxH : Infinity
-		};
-	}
-	/**
-	* Calculate a uniform scale factor that fits `tileWidth × tileHeight` within the
-	* given CSS min/max constraints while preserving aspect ratio.
-	*
-	* - Scales down when the tile exceeds max constraints.
-	* - Scales up when the tile is smaller than min constraints.
-	* - Returns `1` when no scaling is needed.
-	*/
-	calculateScale(tileWidth, tileHeight, constraints) {
-		const { minWidth, maxWidth, minHeight, maxHeight } = constraints;
-		const maxRatio = Math.min(maxWidth / tileWidth, maxHeight / tileHeight);
-		const minRatio = Math.max(minWidth / tileWidth, minHeight / tileHeight);
-		if (Number.isFinite(maxRatio) && maxRatio < 1) return maxRatio;
-		if (Number.isFinite(minRatio) && minRatio > 1) return minRatio;
-		return 1;
-	}
-	/**
-	* Compute container and image dimensions for the current thumbnail, scaled to
-	* fit within the element's CSS min/max constraints.
-	*
-	* The container clips the sprite sheet via `overflow: hidden`, and the image is
-	* positioned with `transform: translate()` to show the correct tile.
-	*/
-	resize(thumbnail, imgNaturalWidth, imgNaturalHeight, constraints) {
-		const tileWidth = thumbnail.width ?? imgNaturalWidth;
-		const tileHeight = thumbnail.height ?? imgNaturalHeight;
-		if (!tileWidth || !tileHeight) return void 0;
-		const scale = this.calculateScale(tileWidth, tileHeight, constraints);
-		const coordX = thumbnail.coords?.x ?? 0;
-		const coordY = thumbnail.coords?.y ?? 0;
-		const inset = scale !== 1 ? 1 : 0;
-		return {
-			scale,
-			containerWidth: Math.max(0, Math.floor(tileWidth * scale) - inset * 2),
-			containerHeight: Math.max(0, Math.floor(tileHeight * scale) - inset * 2),
-			imageWidth: Math.ceil(imgNaturalWidth * scale),
-			imageHeight: Math.ceil(imgNaturalHeight * scale),
-			offsetX: Math.ceil(coordX * scale) + inset,
-			offsetY: Math.ceil(coordY * scale) + inset
-		};
-	}
-	getState(loading, error, thumbnail) {
-		return {
-			loading,
-			error,
-			hidden: !loading && !thumbnail
-		};
-	}
-	getAttrs(_state) {
-		return {
-			role: "img",
-			"aria-hidden": "true"
-		};
-	}
-};
-
-//#endregion
-//#region ../core/dist/dev/dom/ui/thumbnail.js
-function createThumbnail(options) {
-	const { getContainer, getImg, onStateChange } = options;
-	const core = new ThumbnailCore();
-	const abort = new AbortController();
-	const signal = abort.signal;
-	let loading = false;
-	let error = false;
-	let naturalWidth = 0;
-	let naturalHeight = 0;
-	let lastSrc = "";
-	let imgBound = false;
-	let resizeObserver = null;
-	function onImgLoad() {
-		const img = getImg();
-		if (img) {
-			naturalWidth = img.naturalWidth;
-			naturalHeight = img.naturalHeight;
-		}
-		loading = false;
-		error = false;
-		onStateChange();
-	}
-	function onImgError() {
-		loading = false;
-		error = true;
-		onStateChange();
-	}
-	function bindImg(img) {
-		listen(img, "load", onImgLoad, { signal });
-		listen(img, "error", onImgError, { signal });
-	}
-	function ensureBindings() {
-		if (!imgBound) {
-			const img = getImg();
-			if (img) {
-				bindImg(img);
-				imgBound = true;
-			}
-		}
-		if (!resizeObserver) {
-			const container = getContainer();
-			if (container) {
-				resizeObserver = new ResizeObserver(onStateChange);
-				resizeObserver.observe(container);
-			}
-		}
-	}
-	function updateSrc(url) {
-		ensureBindings();
-		const src = url ?? "";
-		if (src === lastSrc) return;
-		lastSrc = src;
-		if (src) {
-			loading = true;
-			error = false;
-		} else {
-			loading = false;
-			error = false;
-			naturalWidth = 0;
-			naturalHeight = 0;
-		}
-	}
-	function connect() {
-		ensureBindings();
-		const img = getImg();
-		if (img?.complete && lastSrc) {
-			if (img.naturalWidth > 0) {
-				naturalWidth = img.naturalWidth;
-				naturalHeight = img.naturalHeight;
-				loading = false;
-				error = false;
-			} else {
-				loading = false;
-				error = true;
-			}
-			onStateChange();
-		}
-	}
-	function destroy() {
-		abort.abort();
-		resizeObserver?.disconnect();
-		resizeObserver = null;
-	}
-	return {
-		get loading() {
-			return loading;
-		},
-		get error() {
-			return error;
-		},
-		get naturalWidth() {
-			return naturalWidth;
-		},
-		get naturalHeight() {
-			return naturalHeight;
-		},
-		readConstraints() {
-			const el = getContainer();
-			if (!el) return {
-				minWidth: 0,
-				maxWidth: Infinity,
-				minHeight: 0,
-				maxHeight: Infinity
-			};
-			return core.parseConstraints(getComputedStyle(el));
-		},
-		updateSrc,
-		connect,
-		destroy
-	};
-}
-
-//#endregion
-//#region ../core/dist/dev/dom/ui/tooltip/tooltip.js
-/** Map popover reasons to tooltip reasons, filtering out click/outside-click. */
-const REASON_MAP = {
-	hover: "hover",
-	focus: "focus",
-	escape: "escape",
-	blur: "blur"
-};
-function createTooltip(options) {
-	const popoverOpts = {
-		transition: options.transition,
-		onOpenChange(open, details) {
-			const reason = REASON_MAP[details.reason];
-			if (!reason) return;
-			const group = options.group?.();
-			if (open) group?.notifyOpen();
-			else group?.notifyClose();
-			const tooltipDetails = details.event ? {
-				reason,
-				event: details.event
-			} : { reason };
-			options.onOpenChange(open, tooltipDetails);
-		},
-		closeOnEscape: () => true,
-		closeOnOutsideClick: () => false,
-		openOnHover: () => true,
-		delay: () => {
-			const group = options.group?.();
-			if (group?.shouldSkipDelay()) return 0;
-			return options.delay?.() ?? group?.delay ?? 600;
-		},
-		closeDelay: () => {
-			const group = options.group?.();
-			return options.closeDelay?.() ?? group?.closeDelay ?? 0;
-		}
-	};
-	if (options.onOpenChangeComplete) popoverOpts.onOpenChangeComplete = options.onOpenChangeComplete;
-	const popover = createPopover(popoverOpts);
-	let isPointerDown = false;
-	const { onClick: _, ...baseTriggerProps } = popover.triggerProps;
-	const triggerProps = {
-		...baseTriggerProps,
-		onPointerDown() {
-			isPointerDown = true;
-		},
-		onPointerEnter(event) {
-			if (options.disabled?.()) return;
-			if (event.pointerType === "touch") return;
-			baseTriggerProps.onPointerEnter(event);
-		},
-		onFocusIn(event) {
-			if (options.disabled?.()) return;
-			if (isPointerDown) {
-				isPointerDown = false;
-				return;
-			}
-			baseTriggerProps.onFocusIn(event);
-		}
-	};
-	const popupProps = {
-		...popover.popupProps,
-		onPointerEnter(event) {
-			if (options.disableHoverablePopup?.()) return;
-			popover.popupProps.onPointerEnter(event);
-		}
-	};
-	return {
-		...popover,
-		triggerProps,
-		popupProps,
-		get triggerElement() {
-			return popover.triggerElement;
-		},
-		open: () => popover.open("hover"),
-		close: () => popover.close("hover")
-	};
-}
-
-//#endregion
-//#region ../core/dist/dev/dom/ui/transition.js
-/**
-* Manages open/close transition lifecycle via `createState`.
-*
-* **Open:** patches `{ active: true, status: 'starting' }`, then after a
-* double-RAF patches `{ status: 'idle' }` so the browser paints the
-* initial ("from") state before transitioning.
-*
-* **Close:** patches `{ status: 'ending' }` (keeping `active: true` so the
-* element stays mounted), then after a double-RAF waits for
-* `getAnimations()` to settle before patching `{ active: false, status: 'idle' }`.
-*/
-function createTransition() {
-	const state = createState({
-		active: false,
-		status: "idle"
-	});
-	let destroyed = false;
-	let rafId1 = 0;
-	let rafId2 = 0;
-	function open() {
-		cancelAnimationFrame(rafId1);
-		cancelAnimationFrame(rafId2);
-		rafId1 = 0;
-		rafId2 = 0;
-		state.patch({
-			active: true,
-			status: "starting"
-		});
-		return new Promise((resolve) => {
-			rafId1 = requestAnimationFrame(() => {
-				rafId1 = 0;
-				rafId2 = requestAnimationFrame(() => {
-					rafId2 = 0;
-					if (destroyed || !state.current.active) return resolve();
-					state.patch({ status: "idle" });
-					resolve();
-				});
-			});
-		});
-	}
-	function close(el) {
-		cancelAnimationFrame(rafId1);
-		cancelAnimationFrame(rafId2);
-		rafId1 = 0;
-		rafId2 = 0;
-		state.patch({ status: "ending" });
-		return new Promise((resolve) => {
-			rafId1 = requestAnimationFrame(() => {
-				rafId1 = 0;
-				rafId2 = requestAnimationFrame(() => {
-					rafId2 = 0;
-					if (destroyed) return resolve();
-					waitForAnimations(el).finally(() => {
-						if (destroyed || state.current.status !== "ending") return resolve();
-						state.patch({
-							active: false,
-							status: "idle"
-						});
-						resolve();
-					});
-				});
-			});
-		});
-	}
-	function cancel() {
-		cancelAnimationFrame(rafId1);
-		cancelAnimationFrame(rafId2);
-		rafId1 = 0;
-		rafId2 = 0;
-		if (state.current.status !== "idle") state.patch({ status: "idle" });
-	}
-	return {
-		state,
-		open,
-		close,
-		cancel,
-		destroy() {
-			if (destroyed) return;
-			destroyed = true;
-			cancel();
-		}
-	};
-}
-function waitForAnimations(el) {
-	if (!el) return Promise.resolve();
-	const animations = el.getAnimations?.() ?? [];
-	if (animations.length === 0) return Promise.resolve();
-	return Promise.all(animations.map((a) => a.finished)).then(noop, noop);
-}
-
-//#endregion
-//#region ../core/dist/dev/dom/ui/wheel-step.js
-function createWheelStep(options) {
-	return { onWheel(event) {
-		if (options.isDisabled()) return;
-		const direction = Math.sign(event.deltaY);
-		if (direction === 0) return;
-		event.preventDefault();
-		const stepPercent = options.getStepPercent();
-		const newPercent = clamp(options.getPercent() - direction * stepPercent, 0, 100);
-		options.onValueChange?.(newPercent);
-	} };
-}
-
-//#endregion
-//#region ../core/dist/dev/dom/utils/element-props.js
-/**
-* Apply props to a DOM element.
-*
-* Handles both attributes and event listeners:
-* - Event props (onClick, onKeyDown, etc.) are attached as listeners
-* - Boolean props: `true` sets empty attribute, `false` removes
-* - `undefined` removes the attribute
-* - Other props are set as string attributes
-*/
-function applyElementProps(element, props, options) {
-	const signal = options?.signal;
-	for (const [key, value] of Object.entries(props)) if (isFunction(value) && key.startsWith("on")) listen(element, key.slice(2).toLowerCase(), value, signal ? { signal } : void 0);
-	else if (isUndefined(value) || value === false) element.removeAttribute(key);
-	else if (value === true) element.setAttribute(key, "");
-	else element.setAttribute(key, String(value));
-}
-
-//#endregion
-//#region ../core/dist/dev/dom/utils/log.js
-const warned = /* @__PURE__ */ new Set();
-function logMissingFeature(displayName, featureName) {
-	const key = `${displayName}:${featureName}`;
-	if (warned.has(key)) return;
-	warned.add(key);
-	console.warn(`${displayName} requires ${featureName} feature`);
-}
-
-//#endregion
-//#region ../core/dist/dev/dom/utils/state-data-attrs.js
-/**
-* Apply state as data attributes to an element.
-*
-* - `true` → sets `data-keyname=""`
-* - truthy string/number → sets `data-keyname="value"`
-* - falsy → removes the attribute
-*
-* @example
-* ```ts
-* const state = { paused: true, ended: false };
-* applyStateDataAttrs(element, state);
-* // element has data-paused="", data-ended is removed
+* // Selector-based subscription
+* class PlayButton extends MediaElement {
+*   #playback = new PlayerController(this, playerContext, selectPlayback);
+* }
 * ```
 */
-function applyStateDataAttrs(element, state, map) {
-	for (const key in state) {
-		if (map && !(key in map)) continue;
-		const name = map?.[key] ?? toDataAttrName(key), value = state[key];
-		if (value === true) element.setAttribute(name, "");
-		else if (value) element.setAttribute(name, String(value));
-		else element.removeAttribute(name);
-	}
-}
-function toDataAttrName(key) {
-	return `data-${key.toLowerCase()}`;
-}
-
-//#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";
+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);
 	}
 };
 
@@ -3060,235 +2112,6 @@ function createProviderMixin(config) {
 	};
 }
 
-//#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/player/create-player.ts
 function createPlayer(config) {
@@ -3314,5 +2137,5 @@ function createPlayer(config) {
 }
 
 //#endregion
-export { selectControls as A, backgroundFeatures as B, getAnchorPositionStyle as C, createButton as D, createPopover as E, selectPlaybackRate as F, isUndefined as G, createState as H, selectTextTrack as I, tryHidePopover as J, ReactiveElement as K, selectTime as L, selectFullscreen as M, selectPiP as N, createAlertDialog as O, selectPlayback as P, selectVolume as R, getAnchorNameStyle as S, resolveOffsets as T, isFunction as U, videoFeatures as V, isNumber as W, supportsAnchorPositioning as X, tryShowPopover as Y, getSliderPreviewStyle as _, MediaElement as a, clamp as b, applyStateDataAttrs as c, createWheelStep as d, createTransition as f, getSliderCSSVars as g, ThumbnailCore as h, MediaContainerElement as i, selectError as j, selectBuffer as k, logMissingFeature as l, createThumbnail as m, PlayerController as n, ContextProvider as o, createTooltip as p, applyStyles as q, SnapshotController as r, ContextConsumer as s, createPlayer as t, applyElementProps as u, getTimeSliderCSSVars as v, getPopupPositionRect as w, roundToStep as x, createSlider as y, audioFeatures as z };
-//# sourceMappingURL=create-player-p9xCO0yC.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