@vizejs/composable 0.426.2 → 0.427.0

package/dist/use-machine.mjs

@@ -0,0 +1,78 @@
+import { computed, shallowRef } from "vue";
+//#region src/use-machine.ts
+/** Shallow ref typed through an unconstrained parameter, so literal unions stay intact. */
+function ownedRef(value) {
+	return shallowRef(value);
+}
+/**
+* Finite state machine with typed states, events, and targets.
+*
+* State names are inferred from the keys of `states`, event names from the
+* keys of every `on` map, and every `target` (and `initial`) must name a
+* declared state, so typos fail to compile. Transitions may carry guards
+* (first passing guard wins) and actions that return the next context;
+* `exit` runs on the old state before `entry` runs on the new one, and a
+* self-transition runs both. Synchronous and free of globals: identical on
+* server and client, nothing to dispose.
+*
+* @example
+* ```ts
+* const fetcher = useMachine({
+*   initial: "idle",
+*   context: { retries: 0 },
+*   states: {
+*     idle: { on: { FETCH: "loading" } },
+*     loading: { on: { RESOLVE: "success", REJECT: "failure" } },
+*     failure: {
+*       on: {
+*         RETRY: { target: "loading", guard: (c) => c.retries < 3, action: (c) => ({ retries: c.retries + 1 }) },
+*       },
+*     },
+*     success: {},
+*   },
+* });
+* fetcher.send("FETCH");
+* ```
+*
+* @param config States, events, context, and hooks.
+* @returns The reactive machine.
+*/
+function useMachine(config) {
+	const state = ownedRef(config.initial);
+	const context = ownedRef(config.context);
+	const isTarget = (option) => typeof option === "string";
+	const resolve = (event) => {
+		const option = config.states[state.value].on?.[event];
+		if (option === void 0) return void 0;
+		if (isTarget(option)) return { target: option };
+		return (Array.isArray(option) ? option : [option]).find((candidate) => candidate.guard?.(context.value) ?? true);
+	};
+	const send = (event) => {
+		const transition = resolve(event);
+		if (transition === void 0) return false;
+		config.states[state.value].exit?.(context.value);
+		if (transition.action !== void 0) context.value = transition.action(context.value);
+		state.value = transition.target;
+		config.states[transition.target].entry?.(context.value);
+		return true;
+	};
+	const can = (event) => resolve(event) !== void 0;
+	return {
+		state,
+		context,
+		nextEvents: computed(() => {
+			const on = config.states[state.value].on ?? {};
+			const isEvent = (name) => name in on;
+			return Object.keys(on).filter(isEvent).filter(can);
+		}),
+		send,
+		can,
+		matches: (...states) => states.some((candidate) => candidate === state.value),
+		reset: () => {
+			state.value = config.initial;
+			context.value = config.context;
+		}
+	};
+}
+//#endregion
+export { useMachine };

package/dist/use-map.d.mts

@@ -0,0 +1,90 @@
+import { ComputedRef } from "vue";
+
+//#region src/use-map.d.ts
+/** Reactive map wrapper returned by {@link useMap}. */
+interface MapControls<Key, Value> {
+  /**
+   * Read-only reactive view of the map. `get`, `has`, iteration, and `size`
+   * on this view are tracked per key. Values are stored shallowly.
+   */
+  readonly map: ReadonlyMap<Key, Value>;
+  /** Number of entries. */
+  readonly size: ComputedRef<number>;
+  /** Snapshot of the entries in insertion order. */
+  readonly entries: ComputedRef<readonly (readonly [Key, Value])[]>;
+  /**
+   * Read the value for `key`. Reactive when read inside an effect.
+   *
+   * @param key Key to read.
+   * @returns The value, or `undefined` when absent.
+   */
+  readonly get: (key: Key) => Value | undefined;
+  /**
+   * Whether `key` is present. Reactive when read inside an effect.
+   *
+   * @param key Key to test.
+   * @returns Whether the key exists.
+   */
+  readonly has: (key: Key) => boolean;
+  /**
+   * Store `value` under `key`.
+   *
+   * @param key Key to write.
+   * @param value Value to store.
+   */
+  readonly set: (key: Key, value: Value) => void;
+  /**
+   * Remove `key`.
+   *
+   * @param key Key to remove.
+   * @returns Whether an entry was removed.
+   */
+  readonly delete: (key: Key) => boolean;
+  /** Remove every entry. */
+  readonly clear: () => void;
+  /**
+   * Replace the value under `key` with the result of `updater`.
+   *
+   * @param key Key to update.
+   * @param updater Receives the current value (`undefined` when absent).
+   * @returns The stored value.
+   */
+  readonly update: (key: Key, updater: (previous: Value | undefined) => Value) => Value;
+  /**
+   * Return the value under `key`, inserting `create(key)` first when absent.
+   *
+   * @param key Key to read or insert.
+   * @param create Factory for a missing value.
+   * @returns The existing or inserted value.
+   */
+  readonly getOrInsert: (key: Key, create: (key: Key) => Value) => Value;
+  /** Restore the creation-time entries. */
+  readonly reset: () => void;
+}
+/**
+ * Create a reactive `Map` with typed helpers.
+ *
+ * Key and value types are inferred from the initial entries
+ * (`useMap([["a", 1]])` is a `Map<string, number>`); pass type arguments
+ * for an initially empty map. Reads through `get`, `has`, and `map` are
+ * tracked per key, so an effect reading one key does not re-run when an
+ * unrelated key changes. Values are stored as-is (not deeply reactive).
+ *
+ * Purely synchronous state: safe during server rendering (no host globals,
+ * no timers) and nothing to dispose.
+ *
+ * @example
+ * ```ts
+ * const counts = useMap<string, number>();
+ * counts.update("clicks", (previous = 0) => previous + 1);
+ * ```
+ *
+ * @typeParam Key Key type, inferred from `initial`.
+ * @typeParam Value Value type, inferred from `initial`.
+ * @param initial Entries inserted at creation and restored by `reset`.
+ * @default initial []
+ * @returns The reactive map and its helpers.
+ */
+declare function useMap<Key = unknown, Value = unknown>(initial?: Iterable<readonly [Key, Value]>): MapControls<Key, Value>;
+//#endregion
+export { MapControls, useMap };

package/dist/use-map.mjs

@@ -0,0 +1,70 @@
+import { computed, shallowReactive, shallowReadonly } from "vue";
+//#region src/use-map.ts
+/**
+* Narrow a `get` result using the matching `has` answer: when the key is
+* present the result is a stored `Value`, even if that value is `undefined`.
+*/
+function isStored(value, present) {
+	return present;
+}
+/**
+* Create a reactive `Map` with typed helpers.
+*
+* Key and value types are inferred from the initial entries
+* (`useMap([["a", 1]])` is a `Map<string, number>`); pass type arguments
+* for an initially empty map. Reads through `get`, `has`, and `map` are
+* tracked per key, so an effect reading one key does not re-run when an
+* unrelated key changes. Values are stored as-is (not deeply reactive).
+*
+* Purely synchronous state: safe during server rendering (no host globals,
+* no timers) and nothing to dispose.
+*
+* @example
+* ```ts
+* const counts = useMap<string, number>();
+* counts.update("clicks", (previous = 0) => previous + 1);
+* ```
+*
+* @typeParam Key Key type, inferred from `initial`.
+* @typeParam Value Value type, inferred from `initial`.
+* @param initial Entries inserted at creation and restored by `reset`.
+* @default initial []
+* @returns The reactive map and its helpers.
+*/
+function useMap(initial = []) {
+	const baseline = [...initial];
+	const map = shallowReactive(new Map(baseline));
+	const reset = () => {
+		map.clear();
+		for (const [key, value] of baseline) map.set(key, value);
+	};
+	return {
+		map: shallowReadonly(map),
+		size: computed(() => map.size),
+		entries: computed(() => [...map.entries()]),
+		get: (key) => map.get(key),
+		has: (key) => map.has(key),
+		set: (key, value) => {
+			map.set(key, value);
+		},
+		delete: (key) => map.delete(key),
+		clear: () => {
+			map.clear();
+		},
+		update: (key, updater) => {
+			const next = updater(map.get(key));
+			map.set(key, next);
+			return next;
+		},
+		getOrInsert: (key, create) => {
+			const existing = map.get(key);
+			if (isStored(existing, map.has(key))) return existing;
+			const created = create(key);
+			map.set(key, created);
+			return created;
+		},
+		reset
+	};
+}
+//#endregion
+export { useMap };

package/dist/use-media-controls.d.mts

@@ -0,0 +1,198 @@
+import { ComputedRef, MaybeRefOrGetter, Ref, ShallowRef } from "vue";
+
+//#region src/use-media-controls.d.ts
+/** Minimal `TimeRanges`. */
+interface TimeRangesLike {
+  /** Number of ranges. */
+  readonly length: number;
+  /** Start of range `index` in seconds. */
+  start(index: number): number;
+  /** End of range `index` in seconds. */
+  end(index: number): number;
+}
+/** Minimal `TextTrack`. */
+interface TextTrackLike {
+  /** Track identifier. */
+  readonly id: string;
+  /** `"subtitles"`, `"captions"`, `"descriptions"`, `"chapters"`, or `"metadata"`. */
+  readonly kind: string;
+  /** Human-readable label. */
+  readonly label: string;
+  /** BCP 47 language tag. */
+  readonly language: string;
+  /** `"disabled"`, `"hidden"`, or `"showing"`. */
+  mode: string;
+}
+/** Minimal `TextTrackList`. */
+interface TextTrackListLike extends EventTarget {
+  /** Number of tracks. */
+  readonly length: number;
+  /** Track at `index`. */
+  readonly [index: number]: TextTrackLike;
+}
+/** Minimal `HTMLMediaElement` (`<video>` or `<audio>`). */
+interface MediaElementLike extends EventTarget {
+  /** Playback position in seconds. */
+  currentTime: number;
+  /** Volume from 0 to 1. */
+  volume: number;
+  /** Whether audio is muted. */
+  muted: boolean;
+  /** Playback speed multiplier. */
+  playbackRate: number;
+  /** Media source URL. */
+  src: string;
+  /** Duration in seconds (`NaN` until metadata loaded). */
+  readonly duration: number;
+  /** Whether playback is paused. */
+  readonly paused: boolean;
+  /** Whether playback reached the end. */
+  readonly ended: boolean;
+  /** Whether the element is seeking. */
+  readonly seeking: boolean;
+  /** Buffered time ranges. */
+  readonly buffered: TimeRangesLike;
+  /** Text tracks (`<track>` children). */
+  readonly textTracks?: TextTrackListLike;
+  /** Start playback; rejects when autoplay is blocked. */
+  play(): Promise<void>;
+  /** Pause playback. */
+  pause(): void;
+  /** Whether the element can play `type` (`""`, `"maybe"`, `"probably"`). */
+  canPlayType?(type: string): string;
+  /** Enter picture-in-picture (video only). */
+  requestPictureInPicture?(): Promise<unknown>;
+}
+/** Document capabilities used for picture-in-picture. */
+interface PictureInPictureDocumentLike {
+  /** Whether picture-in-picture is allowed. */
+  readonly pictureInPictureEnabled?: boolean;
+  /** Element currently in picture-in-picture. */
+  readonly pictureInPictureElement?: unknown;
+  /** Leave picture-in-picture. */
+  exitPictureInPicture?(): Promise<void>;
+}
+/** One candidate media source. */
+interface MediaSourceCandidate {
+  /** Source URL. */
+  readonly src: string;
+  /** MIME type used to test playability with `canPlayType`. */
+  readonly type?: string;
+}
+/** Summary of one text track. */
+interface MediaTextTrack {
+  /** Index in the element's `textTracks`. */
+  readonly index: number;
+  /** Track identifier. */
+  readonly id: string;
+  /** Track kind. */
+  readonly kind: string;
+  /** Human-readable label. */
+  readonly label: string;
+  /** BCP 47 language tag. */
+  readonly language: string;
+  /** Current mode. */
+  readonly mode: string;
+}
+/** Options for {@link useMediaControls}. */
+interface UseMediaControlsOptions {
+  /**
+   * Media source: a URL, or candidates of which the first playable one (per
+   * `canPlayType`) is used. Omit to leave the element's `src` untouched.
+   *
+   * @default undefined
+   */
+  readonly src?: MaybeRefOrGetter<string | readonly MediaSourceCandidate[] | undefined>;
+  /**
+   * Document used for picture-in-picture.
+   *
+   * @default window.document when a browser window exists
+   */
+  readonly document?: MaybeRefOrGetter<PictureInPictureDocumentLike | null | undefined>;
+}
+/** Reactive state and actions returned by {@link useMediaControls}. */
+interface MediaControls {
+  /** Whether media is playing; assign to play or pause. */
+  readonly playing: Ref<boolean>;
+  /** Playback position in seconds; assign to seek. */
+  readonly currentTime: Ref<number>;
+  /** Volume from 0 to 1; assign to change it. */
+  readonly volume: Ref<number>;
+  /** Whether audio is muted; assign to toggle. */
+  readonly muted: Ref<boolean>;
+  /** Playback speed; assign to change it. */
+  readonly rate: Ref<number>;
+  /** Duration in seconds (0 until known). */
+  readonly duration: Readonly<Ref<number>>;
+  /** Buffered ranges as `[start, end]` pairs. */
+  readonly buffered: Readonly<ShallowRef<readonly (readonly [number, number])[]>>;
+  /** Whether the element is seeking. */
+  readonly seeking: Readonly<Ref<boolean>>;
+  /** Whether playback waits for data. */
+  readonly waiting: Readonly<Ref<boolean>>;
+  /** Whether playback reached the end. */
+  readonly ended: Readonly<Ref<boolean>>;
+  /** Whether data delivery stalled. */
+  readonly stalled: Readonly<Ref<boolean>>;
+  /** Most recent `play()` rejection (for example blocked autoplay). */
+  readonly error: Readonly<ShallowRef<unknown>>;
+  /** Text tracks of the element. */
+  readonly tracks: Readonly<ShallowRef<readonly MediaTextTrack[]>>;
+  /** Index of the showing text track, or `-1`. */
+  readonly selectedTrack: Readonly<Ref<number>>;
+  /** Whether picture-in-picture can be requested for the element. */
+  readonly supportsPictureInPicture: ComputedRef<boolean>;
+  /** Whether the element is in picture-in-picture. */
+  readonly isPictureInPicture: Readonly<Ref<boolean>>;
+  /**
+   * Start playback.
+   *
+   * @returns Whether playback started.
+   */
+  readonly play: () => Promise<boolean>;
+  /** Pause playback. */
+  readonly pause: () => void;
+  /**
+   * Show text track `index` and hide the others; `-1` hides all.
+   *
+   * @param index Track index.
+   */
+  readonly selectTrack: (index: number) => void;
+  /**
+   * Enter or leave picture-in-picture.
+   *
+   * @returns Whether the element is in picture-in-picture afterwards.
+   */
+  readonly togglePictureInPicture: () => Promise<boolean>;
+}
+/**
+ * Two-way reactive controls for a `<video>` or `<audio>` element.
+ *
+ * `playing`, `currentTime`, `volume`, `muted`, and `rate` mirror the
+ * element and are writable: assigning them drives the element, while
+ * element events update them without echoing the change back. The element
+ * is the source of truth whenever a new target attaches. Read-only state
+ * covers duration, buffering, seeking, waiting, stalls, text tracks, and
+ * picture-in-picture. A rejected `play()` (blocked autoplay) resets
+ * `playing` and is exposed through `error`. Listeners are removed when the
+ * target changes and when the owning reactive scope stops.
+ *
+ * Server rendering: the template ref is empty, so every value keeps its
+ * neutral default (paused, time 0, volume 1) and nothing is touched.
+ *
+ * @example
+ * ```ts
+ * const video = useTemplateRef<HTMLVideoElement>("video");
+ * const { playing, currentTime, duration } = useMediaControls(video, {
+ *   src: [{ src: "/clip.webm", type: "video/webm" }, { src: "/clip.mp4", type: "video/mp4" }],
+ * });
+ * ```
+ *
+ * @param target Reactive media element.
+ * @param options Source selection and picture-in-picture document.
+ * @default options {}
+ * @returns Reactive media state and actions.
+ */
+declare function useMediaControls(target: MaybeRefOrGetter<MediaElementLike | null | undefined>, options?: UseMediaControlsOptions): MediaControls;
+//#endregion
+export { MediaControls, MediaElementLike, MediaSourceCandidate, MediaTextTrack, PictureInPictureDocumentLike, TextTrackLike, TextTrackListLike, TimeRangesLike, UseMediaControlsOptions, useMediaControls };

package/dist/use-media-controls.mjs

@@ -0,0 +1,264 @@
+import { computed, readonly, ref, shallowRef, toValue, watch } from "vue";
+//#region src/use-media-controls.ts
+function browserDocument() {
+	return typeof window === "undefined" ? void 0 : window.document;
+}
+function readRanges(ranges) {
+	const result = [];
+	for (let index = 0; index < ranges.length; index += 1) result.push([ranges.start(index), ranges.end(index)]);
+	return result;
+}
+function chooseSource(element, source) {
+	if (typeof source === "string") return source;
+	for (const candidate of source) {
+		if (candidate.type === void 0 || !element.canPlayType) return candidate.src;
+		if (element.canPlayType(candidate.type) !== "") return candidate.src;
+	}
+}
+/**
+* Two-way reactive controls for a `<video>` or `<audio>` element.
+*
+* `playing`, `currentTime`, `volume`, `muted`, and `rate` mirror the
+* element and are writable: assigning them drives the element, while
+* element events update them without echoing the change back. The element
+* is the source of truth whenever a new target attaches. Read-only state
+* covers duration, buffering, seeking, waiting, stalls, text tracks, and
+* picture-in-picture. A rejected `play()` (blocked autoplay) resets
+* `playing` and is exposed through `error`. Listeners are removed when the
+* target changes and when the owning reactive scope stops.
+*
+* Server rendering: the template ref is empty, so every value keeps its
+* neutral default (paused, time 0, volume 1) and nothing is touched.
+*
+* @example
+* ```ts
+* const video = useTemplateRef<HTMLVideoElement>("video");
+* const { playing, currentTime, duration } = useMediaControls(video, {
+*   src: [{ src: "/clip.webm", type: "video/webm" }, { src: "/clip.mp4", type: "video/mp4" }],
+* });
+* ```
+*
+* @param target Reactive media element.
+* @param options Source selection and picture-in-picture document.
+* @default options {}
+* @returns Reactive media state and actions.
+*/
+function useMediaControls(target, options = {}) {
+	const playing = ref(false);
+	const currentTime = ref(0);
+	const volume = ref(1);
+	const muted = ref(false);
+	const rate = ref(1);
+	const duration = ref(0);
+	const buffered = shallowRef([]);
+	const seeking = ref(false);
+	const waiting = ref(false);
+	const ended = ref(false);
+	const stalled = ref(false);
+	const error = shallowRef(void 0);
+	const tracks = shallowRef([]);
+	const selectedTrack = ref(-1);
+	const isPictureInPicture = ref(false);
+	let syncing = false;
+	const resolveElement = () => toValue(target) ?? void 0;
+	const resolveDocument = () => options.document === void 0 ? browserDocument() : toValue(options.document) ?? void 0;
+	const fromElement = (update) => {
+		syncing = true;
+		try {
+			update();
+		} finally {
+			syncing = false;
+		}
+	};
+	const readTracks = (element) => {
+		const list = element.textTracks;
+		const summary = [];
+		let showing = -1;
+		for (let index = 0; list && index < list.length; index += 1) {
+			const track = list[index];
+			if (!track) continue;
+			summary.push({
+				index,
+				id: track.id,
+				kind: track.kind,
+				label: track.label,
+				language: track.language,
+				mode: track.mode
+			});
+			if (track.mode === "showing" && showing === -1) showing = index;
+		}
+		tracks.value = summary;
+		selectedTrack.value = showing;
+	};
+	const readAll = (element) => {
+		fromElement(() => {
+			playing.value = !element.paused;
+			currentTime.value = element.currentTime;
+			volume.value = element.volume;
+			muted.value = element.muted;
+			rate.value = element.playbackRate;
+		});
+		duration.value = Number.isFinite(element.duration) ? element.duration : 0;
+		buffered.value = readRanges(element.buffered);
+		seeking.value = element.seeking;
+		ended.value = element.ended;
+		readTracks(element);
+		const document = resolveDocument();
+		isPictureInPicture.value = document?.pictureInPictureElement !== void 0 && document.pictureInPictureElement === element;
+	};
+	const play = async () => {
+		const element = resolveElement();
+		if (!element) return false;
+		try {
+			await element.play();
+			error.value = void 0;
+			return true;
+		} catch (cause) {
+			error.value = cause;
+			fromElement(() => {
+				playing.value = !element.paused;
+			});
+			return false;
+		}
+	};
+	const pause = () => {
+		resolveElement()?.pause();
+	};
+	watch(resolveElement, (element, _previous, onCleanup) => {
+		if (!element) return;
+		readAll(element);
+		const handlers = {
+			timeupdate: () => fromElement(() => currentTime.value = element.currentTime),
+			durationchange: () => {
+				duration.value = Number.isFinite(element.duration) ? element.duration : 0;
+			},
+			loadedmetadata: () => readAll(element),
+			progress: () => {
+				buffered.value = readRanges(element.buffered);
+				stalled.value = false;
+			},
+			seeking: () => seeking.value = true,
+			seeked: () => seeking.value = false,
+			waiting: () => waiting.value = true,
+			canplay: () => waiting.value = false,
+			playing: () => {
+				waiting.value = false;
+				stalled.value = false;
+				ended.value = false;
+			},
+			play: () => fromElement(() => playing.value = true),
+			pause: () => fromElement(() => playing.value = false),
+			ended: () => {
+				ended.value = true;
+				fromElement(() => playing.value = false);
+			},
+			stalled: () => stalled.value = true,
+			volumechange: () => fromElement(() => {
+				volume.value = element.volume;
+				muted.value = element.muted;
+			}),
+			ratechange: () => fromElement(() => rate.value = element.playbackRate),
+			enterpictureinpicture: () => isPictureInPicture.value = true,
+			leavepictureinpicture: () => isPictureInPicture.value = false
+		};
+		for (const [event, handler] of Object.entries(handlers)) element.addEventListener(event, handler);
+		const onTracksChange = () => readTracks(element);
+		element.textTracks?.addEventListener("change", onTracksChange);
+		element.textTracks?.addEventListener("addtrack", onTracksChange);
+		element.textTracks?.addEventListener("removetrack", onTracksChange);
+		onCleanup(() => {
+			for (const [event, handler] of Object.entries(handlers)) element.removeEventListener(event, handler);
+			element.textTracks?.removeEventListener("change", onTracksChange);
+			element.textTracks?.removeEventListener("addtrack", onTracksChange);
+			element.textTracks?.removeEventListener("removetrack", onTracksChange);
+		});
+	}, {
+		immediate: true,
+		flush: "sync"
+	});
+	watch([resolveElement, () => toValue(options.src)], ([element, source]) => {
+		if (!element || source === void 0) return;
+		const chosen = chooseSource(element, source);
+		if (chosen !== void 0 && element.src !== chosen) element.src = chosen;
+	}, {
+		immediate: true,
+		flush: "sync"
+	});
+	watch(playing, (value) => {
+		if (syncing) return;
+		if (value) play();
+		else pause();
+	}, { flush: "sync" });
+	watch(currentTime, (value) => {
+		const element = resolveElement();
+		if (!syncing && element) element.currentTime = value;
+	}, { flush: "sync" });
+	watch(volume, (value) => {
+		const element = resolveElement();
+		if (!syncing && element) element.volume = value;
+	}, { flush: "sync" });
+	watch(muted, (value) => {
+		const element = resolveElement();
+		if (!syncing && element) element.muted = value;
+	}, { flush: "sync" });
+	watch(rate, (value) => {
+		const element = resolveElement();
+		if (!syncing && element) element.playbackRate = value;
+	}, { flush: "sync" });
+	const selectTrack = (index) => {
+		const element = resolveElement();
+		const list = element?.textTracks;
+		if (!element || !list) return;
+		for (let position = 0; position < list.length; position += 1) {
+			const track = list[position];
+			if (track) track.mode = position === index ? "showing" : "disabled";
+		}
+		readTracks(element);
+	};
+	const supportsPictureInPicture = computed(() => {
+		const element = resolveElement();
+		const document = resolveDocument();
+		return typeof element?.requestPictureInPicture === "function" && document?.pictureInPictureEnabled !== false;
+	});
+	const togglePictureInPicture = async () => {
+		const element = resolveElement();
+		const document = resolveDocument();
+		if (!element) return false;
+		try {
+			if (isPictureInPicture.value) {
+				await document?.exitPictureInPicture?.();
+				isPictureInPicture.value = false;
+			} else if (element.requestPictureInPicture) {
+				await element.requestPictureInPicture();
+				isPictureInPicture.value = true;
+			}
+		} catch (cause) {
+			error.value = cause;
+		}
+		return isPictureInPicture.value;
+	};
+	return {
+		playing,
+		currentTime,
+		volume,
+		muted,
+		rate,
+		duration: readonly(duration),
+		buffered,
+		seeking: readonly(seeking),
+		waiting: readonly(waiting),
+		ended: readonly(ended),
+		stalled: readonly(stalled),
+		error,
+		tracks,
+		selectedTrack: readonly(selectedTrack),
+		supportsPictureInPicture,
+		isPictureInPicture: readonly(isPictureInPicture),
+		play,
+		pause,
+		selectTrack,
+		togglePictureInPicture
+	};
+}
+//#endregion
+export { useMediaControls };