@vizejs/composable 0.426.2 → 0.427.0

package/dist/use-form.mjs

@@ -0,0 +1,482 @@
+import { tryOnScopeDispose } from "./scope.mjs";
+import { validateStandardSchema } from "./standard-schema.mjs";
+import { computed, ref, shallowRef, toRaw, triggerRef } from "vue";
+//#region src/use-form.ts
+function isContainer(value) {
+	if (Array.isArray(value)) return true;
+	if (typeof value !== "object" || value === null) return false;
+	const prototype = Object.getPrototypeOf(value);
+	return prototype === Object.prototype || prototype === null;
+}
+function splitPath(path) {
+	return path === "" ? [] : path.split(".");
+}
+function readChild(container, key) {
+	return Array.isArray(container) ? container[Number(key)] : container[key];
+}
+function writeChild(container, key, value) {
+	if (Array.isArray(container)) container[Number(key)] = value;
+	else container[key] = value;
+}
+/** Read a dotted path. */
+function readPath(root, path) {
+	let current = root;
+	for (const key of splitPath(path)) {
+		if (!isContainer(current)) return void 0;
+		current = readChild(current, key);
+	}
+	return current;
+}
+/** Write a dotted path, creating intermediate containers. */
+function writePath(root, path, value) {
+	const keys = splitPath(path);
+	const last = keys.at(-1);
+	if (last === void 0 || !isContainer(root)) return;
+	let current = root;
+	for (let index = 0; index < keys.length - 1; index += 1) {
+		const key = keys[index] ?? "";
+		let next = readChild(current, key);
+		if (!isContainer(next)) {
+			next = /^\d+$/.test(keys[index + 1] ?? "") ? [] : {};
+			writeChild(current, key, next);
+		}
+		if (!isContainer(next)) return;
+		current = next;
+	}
+	writeChild(current, last, value);
+}
+function cloneValue(value) {
+	return structuredClone(toRaw(value));
+}
+function deepEqual(left, right) {
+	if (Object.is(left, right)) return true;
+	if (left instanceof Date && right instanceof Date) return left.getTime() === right.getTime();
+	if (Array.isArray(left) && Array.isArray(right)) return left.length === right.length && left.every((item, index) => deepEqual(item, right[index]));
+	if (isContainer(left) && isContainer(right) && !Array.isArray(left) && !Array.isArray(right)) {
+		const keys = new Set([...Object.keys(left), ...Object.keys(right)]);
+		for (const key of keys) if (!deepEqual(left[key], right[key])) return false;
+		return true;
+	}
+	return false;
+}
+function toMessages(result) {
+	if (result === void 0 || result === null || result === "") return [];
+	return typeof result === "string" ? [result] : result.filter((message) => message !== "");
+}
+function unknownMessages(result) {
+	if (typeof result === "string") return result === "" ? [] : [result];
+	if (!Array.isArray(result)) return [];
+	return result.filter((message) => typeof message === "string" && message !== "");
+}
+/** Rewrite `${arrayPath}.${index}…` keys through an index mapping (undefined drops). */
+function remapKeys(entries, arrayPath, mapIndex) {
+	const prefix = `${arrayPath}.`;
+	const result = [];
+	for (const [key, entry] of entries) {
+		if (!key.startsWith(prefix)) {
+			result.push([key, entry]);
+			continue;
+		}
+		const rest = key.slice(prefix.length);
+		const dot = rest.indexOf(".");
+		const indexText = dot === -1 ? rest : rest.slice(0, dot);
+		const mapped = /^\d+$/.test(indexText) ? mapIndex(Number(indexText)) : NaN;
+		if (mapped === void 0) continue;
+		if (Number.isNaN(mapped)) {
+			result.push([key, entry]);
+			continue;
+		}
+		result.push([`${prefix}${String(mapped)}${dot === -1 ? "" : rest.slice(dot)}`, entry]);
+	}
+	return result;
+}
+/**
+* Fully typed form state with validation, field arrays, and submission.
+*
+* The value type is inferred from `initialValues`; every path is a
+* template-literal key, so `field("address.city")` returns controls whose
+* `value` is typed as the city's type and misspelled paths do not compile.
+* Validation combines a Standard Schema v1 validator (Zod, Valibot, ArkType,
+* … via the `~standard` protocol), a whole-form validator, and per-field
+* validators; all may be asynchronous. A newer validation aborts older ones
+* through their `signal` and their results are discarded, so a slow check
+* can never overwrite fresher errors.
+*
+* This composable owns the *values*. `@vizejs/ui/form` owns accessible
+* error presentation (error summaries, focus management, native constraint
+* validation); feed {@link FormControls.errors} into it to render them.
+*
+* Server rendering: pure state, no host access; validation never runs
+* automatically during setup, so server and client render the same markup.
+* Pending validations are aborted when the owning scope stops.
+*
+* @example
+* ```ts
+* const form = useForm({
+*   initialValues: { name: "", address: { city: "" }, tags: [] as string[] },
+*   validators: { name: (name) => (name ? undefined : "Required") },
+*   onSubmit: (values) => api.save(values),
+* });
+* const city = form.field("address.city"); // city.value: Ref<string>
+* const tags = form.fieldArray("tags");
+* tags.append("vue");
+* ```
+*
+* @typeParam Values Form values, inferred from `initialValues`.
+* @typeParam Output Submitted value, inferred from `schema` (defaults to `Values`).
+* @param options Initial values, validators, triggers, and submit handler.
+* @returns Form state and actions.
+*/
+function useForm(options) {
+	const createInitial = () => typeof options.initialValues === "function" ? options.initialValues() : cloneValue(options.initialValues);
+	let initial = createInitial();
+	const values = ref(cloneValue(initial));
+	const errors = shallowRef({});
+	const touched = shallowRef(/* @__PURE__ */ new Set());
+	const pending = ref(/* @__PURE__ */ new Map());
+	const submitting = ref(false);
+	const submitCount = ref(0);
+	const arrayKeys = /* @__PURE__ */ new Map();
+	let nextKey = 0;
+	let formController;
+	const fieldControllers = /* @__PURE__ */ new Map();
+	const validators = Object.entries(options.validators ?? {});
+	const runValidator = (validator, path, snapshot, signal) => {
+		if (typeof validator !== "function") return Promise.resolve([]);
+		const outcome = Reflect.apply(validator, void 0, [readPath(snapshot, path), {
+			values: snapshot,
+			path,
+			signal
+		}]);
+		return Promise.resolve(outcome).then(unknownMessages);
+	};
+	const trigger = () => submitCount.value > 0 ? options.revalidateOn ?? "change" : options.validateOn ?? "submit";
+	const beginPending = (path) => {
+		pending.value.set(path, (pending.value.get(path) ?? 0) + 1);
+	};
+	const endPending = (path) => {
+		const count = (pending.value.get(path) ?? 1) - 1;
+		if (count <= 0) pending.value.delete(path);
+		else pending.value.set(path, count);
+	};
+	const setErrorsFor = (path, messages) => {
+		const next = { ...errors.value };
+		if (messages.length === 0) Reflect.deleteProperty(next, path);
+		else next[path] = messages;
+		errors.value = next;
+	};
+	const readFieldValidator = (path) => validators.find(([candidate]) => candidate === path)?.[1];
+	/** Collect every error source; resolves to errors keyed by path. */
+	const collectErrors = async (signal) => {
+		const snapshot = values.value;
+		const collected = {};
+		const add = (path, messages) => {
+			if (messages.length === 0) return;
+			(collected[path] ??= []).push(...messages);
+		};
+		let output = snapshot;
+		const tasks = [];
+		if (options.schema) {
+			const schema = options.schema;
+			tasks.push(validateStandardSchema(schema, cloneValue(snapshot)).then((result) => {
+				if (result.status === "valid") output = result.value;
+				else for (const issue of result.issues) add(issue.path, [issue.message]);
+			}));
+		}
+		if (options.validate) {
+			const validate = options.validate;
+			tasks.push(Promise.resolve(validate(snapshot, { signal })).then((result) => {
+				if (!result) return;
+				for (const [path, messages] of Object.entries(result)) if (messages !== void 0) add(path, toMessages(messages));
+			}));
+		}
+		for (const [path, validator] of validators) tasks.push(runValidator(validator, path, snapshot, signal).then((messages) => add(path, messages)));
+		await Promise.all(tasks);
+		return {
+			errors: collected,
+			output
+		};
+	};
+	const validate = async () => {
+		formController?.abort(new DOMException("A newer validation started.", "AbortError"));
+		for (const controller of fieldControllers.values()) controller.abort();
+		fieldControllers.clear();
+		const controller = new AbortController();
+		formController = controller;
+		beginPending("");
+		try {
+			const outcome = await collectErrors(controller.signal);
+			if (controller.signal.aborted) return { status: "superseded" };
+			errors.value = outcome.errors;
+			if (Object.keys(outcome.errors).length > 0) return {
+				status: "invalid",
+				errors: { ...outcome.errors }
+			};
+			return {
+				status: "valid",
+				value: outcome.output
+			};
+		} finally {
+			endPending("");
+			if (formController === controller) formController = void 0;
+		}
+	};
+	const schemaIssuesFor = async (path) => {
+		if (!options.schema) return [];
+		const result = await validateStandardSchema(options.schema, cloneValue(values.value));
+		if (result.status === "valid") return [];
+		return result.issues.filter((issue) => issue.path === path).map((issue) => issue.message);
+	};
+	const validateField = async (path) => {
+		fieldControllers.get(path)?.abort();
+		const controller = new AbortController();
+		fieldControllers.set(path, controller);
+		beginPending(path);
+		try {
+			const validator = readFieldValidator(path);
+			const snapshot = values.value;
+			const [own, fromSchema, fromForm] = await Promise.all([
+				runValidator(validator, path, snapshot, controller.signal),
+				schemaIssuesFor(path),
+				options.validate ? Promise.resolve(options.validate(snapshot, { signal: controller.signal })).then((result) => {
+					const messages = result ? Reflect.get(result, path) : void 0;
+					return Array.isArray(messages) ? messages.filter((message) => typeof message === "string") : [];
+				}) : Promise.resolve([])
+			]);
+			if (controller.signal.aborted) return false;
+			const messages = [
+				...fromSchema,
+				...fromForm,
+				...own
+			];
+			setErrorsFor(path, messages);
+			return messages.length === 0;
+		} finally {
+			endPending(path);
+			if (fieldControllers.get(path) === controller) fieldControllers.delete(path);
+		}
+	};
+	const touch = (path) => {
+		if (touched.value.has(path)) return;
+		const next = new Set(touched.value);
+		next.add(path);
+		touched.value = next;
+	};
+	const setValueAt = (path, value, setOptions = {}) => {
+		writePath(values.value, path, value);
+		if (setOptions.touch) touch(path);
+		if (setOptions.validate ?? trigger() === "change") validateField(path);
+	};
+	const syncKeys = (path, length) => {
+		let keys = arrayKeys.get(path);
+		if (!keys) {
+			keys = [];
+			arrayKeys.set(path, keys);
+		}
+		while (keys.length < length) keys.push(nextKey++);
+		if (keys.length > length) keys.length = length;
+		return keys;
+	};
+	const readArray = (path) => {
+		const current = readPath(values.value, path);
+		if (Array.isArray(current)) return current;
+		const created = [];
+		writePath(values.value, path, created);
+		return created;
+	};
+	const remapState = (path, mapIndex) => {
+		errors.value = Object.fromEntries(remapKeys(Object.entries(errors.value), path, mapIndex));
+		touched.value = new Set(remapKeys([...touched.value].map((key) => [key, true]), path, mapIndex).map(([key]) => key));
+	};
+	const keysVersion = shallowRef(0);
+	const bumpKeys = () => {
+		keysVersion.value += 1;
+		triggerRef(keysVersion);
+	};
+	const field = (path) => {
+		const key = path;
+		const read = () => readPath(values.value, key);
+		return {
+			path,
+			value: computed({
+				get: read,
+				set: (next) => setValueAt(key, next)
+			}),
+			errors: computed(() => errors.value[key] ?? []),
+			error: computed(() => errors.value[key]?.[0]),
+			dirty: computed(() => !deepEqual(readPath(values.value, key), readPath(initial, key))),
+			touched: computed(() => touched.value.has(key)),
+			validating: computed(() => pending.value.has(key) || pending.value.has("")),
+			onBlur: () => {
+				touch(key);
+				if (trigger() === "blur") validateField(key);
+			},
+			validate: () => validateField(key),
+			reset: () => {
+				writePath(values.value, key, cloneValue(readPath(initial, key)));
+				setErrorsFor(key, []);
+				const next = new Set(touched.value);
+				next.delete(key);
+				touched.value = next;
+			}
+		};
+	};
+	const fieldArray = (path) => {
+		const key = path;
+		const afterChange = () => {
+			bumpKeys();
+			if (trigger() === "change") validateField(key);
+		};
+		const insertAt = (index, items) => {
+			const array = readArray(key);
+			const keys = syncKeys(key, array.length);
+			const at = Math.max(0, Math.min(index, array.length));
+			remapState(key, (old) => old >= at ? old + items.length : old);
+			array.splice(at, 0, ...items);
+			keys.splice(at, 0, ...items.map(() => nextKey++));
+			afterChange();
+		};
+		return {
+			entries: computed(() => {
+				keysVersion.value;
+				const array = readPath(values.value, key);
+				if (!Array.isArray(array)) return [];
+				const keys = syncKeys(key, array.length);
+				return array.map((value, index) => ({
+					key: keys[index] ?? index,
+					index,
+					path: `${path}.${index}`,
+					value
+				}));
+			}),
+			append: (...items) => insertAt(Number.MAX_SAFE_INTEGER, items),
+			prepend: (...items) => insertAt(0, items),
+			insert: (index, item) => insertAt(index, [item]),
+			remove: (index) => {
+				const array = readArray(key);
+				if (index < 0 || index >= array.length) return;
+				const keys = syncKeys(key, array.length);
+				remapState(key, (old) => old === index ? void 0 : old > index ? old - 1 : old);
+				array.splice(index, 1);
+				keys.splice(index, 1);
+				afterChange();
+			},
+			move: (from, to) => {
+				const array = readArray(key);
+				if (from < 0 || from >= array.length || to < 0 || to >= array.length || from === to) return;
+				const keys = syncKeys(key, array.length);
+				remapState(key, (old) => {
+					if (old === from) return to;
+					if (from < to && old > from && old <= to) return old - 1;
+					if (from > to && old >= to && old < from) return old + 1;
+					return old;
+				});
+				const [item] = array.splice(from, 1);
+				array.splice(to, 0, item);
+				const [movedKey] = keys.splice(from, 1);
+				keys.splice(to, 0, movedKey ?? nextKey++);
+				afterChange();
+			},
+			swap: (first, second) => {
+				const array = readArray(key);
+				if (first < 0 || second < 0 || first >= array.length || second >= array.length) return;
+				const keys = syncKeys(key, array.length);
+				remapState(key, (old) => old === first ? second : old === second ? first : old);
+				const firstItem = array[first];
+				array[first] = array[second];
+				array[second] = firstItem;
+				const firstKey = keys[first] ?? nextKey++;
+				keys[first] = keys[second] ?? nextKey++;
+				keys[second] = firstKey;
+				afterChange();
+			},
+			replace: (items) => {
+				remapState(key, () => void 0);
+				writePath(values.value, key, [...items]);
+				arrayKeys.delete(key);
+				afterChange();
+			}
+		};
+	};
+	const clearErrors = (path) => {
+		if (path === void 0) errors.value = {};
+		else setErrorsFor(path, []);
+	};
+	const submitWith = async (handler) => {
+		submitCount.value += 1;
+		submitting.value = true;
+		try {
+			const result = await validate();
+			const signal = formController?.signal ?? new AbortController().signal;
+			if (result.status === "valid") {
+				const onSubmit = handler ?? options.onSubmit;
+				if (onSubmit) await onSubmit(result.value, { signal });
+			} else if (result.status === "invalid") {
+				const next = new Set(touched.value);
+				for (const path of Object.keys(result.errors)) if (path !== "") next.add(path);
+				touched.value = next;
+			}
+			return result;
+		} finally {
+			submitting.value = false;
+		}
+	};
+	const reset = (next) => {
+		formController?.abort();
+		for (const controller of fieldControllers.values()) controller.abort();
+		fieldControllers.clear();
+		initial = next === void 0 ? createInitial() : cloneValue(next);
+		values.value = cloneValue(initial);
+		errors.value = {};
+		touched.value = /* @__PURE__ */ new Set();
+		pending.value.clear();
+		submitCount.value = 0;
+		arrayKeys.clear();
+		bumpKeys();
+	};
+	tryOnScopeDispose(() => {
+		formController?.abort();
+		for (const controller of fieldControllers.values()) controller.abort();
+	});
+	return {
+		values,
+		errors,
+		valid: computed(() => Object.keys(errors.value).length === 0),
+		dirty: computed(() => !deepEqual(values.value, initial)),
+		validating: computed(() => pending.value.size > 0),
+		submitting,
+		submitCount,
+		field,
+		fieldArray,
+		getValue: (path) => readPath(values.value, path),
+		setValue: (path, value, setOptions) => setValueAt(path, value, setOptions),
+		setValues: (next, setOptions = {}) => {
+			if (setOptions.merge) values.value = {
+				...values.value,
+				...cloneValue(next)
+			};
+			else values.value = {
+				...cloneValue(initial),
+				...cloneValue(next)
+			};
+			arrayKeys.clear();
+			bumpKeys();
+		},
+		isTouched: (path) => touched.value.has(path),
+		setErrors: (next) => {
+			const normalized = {};
+			for (const [path, messages] of Object.entries(next)) if (messages !== void 0 && messages.length > 0) normalized[path] = messages;
+			errors.value = normalized;
+		},
+		clearErrors,
+		validate,
+		submit: submitWith,
+		handleSubmit: (handler) => (event) => {
+			event?.preventDefault();
+			return submitWith(handler);
+		},
+		reset
+	};
+}
+//#endregion
+export { useForm };

package/dist/use-fullscreen.d.mts

@@ -0,0 +1,104 @@
+import { ComputedRef, MaybeRefOrGetter, Ref } from "vue";
+
+//#region src/use-fullscreen.d.ts
+/** Browser navigation UI preference while fullscreen. */
+type FullscreenNavigationUI = "auto" | "hide" | "show";
+/** Element that can enter fullscreen (standard or WebKit-prefixed). */
+interface FullscreenElementLike {
+  /** Standard request. */
+  requestFullscreen?(options?: {
+    navigationUI?: FullscreenNavigationUI;
+  }): Promise<void>;
+  /** Legacy WebKit request (Safari < 16.4). */
+  webkitRequestFullscreen?(): void;
+}
+/** Document-level fullscreen capability (standard or WebKit-prefixed). */
+interface FullscreenHost extends EventTarget {
+  /** Element currently in fullscreen. */
+  readonly fullscreenElement?: unknown;
+  /** Legacy WebKit fullscreen element. */
+  readonly webkitFullscreenElement?: unknown;
+  /** Whether fullscreen is allowed (for example by permissions policy). */
+  readonly fullscreenEnabled?: boolean;
+  /** Legacy WebKit flag. */
+  readonly webkitFullscreenEnabled?: boolean;
+  /** Standard exit. */
+  exitFullscreen?(): Promise<void>;
+  /** Legacy WebKit exit. */
+  webkitExitFullscreen?(): void;
+  /** Default fullscreen target. */
+  readonly documentElement?: FullscreenElementLike | null;
+}
+/** Options for {@link useFullscreen}. */
+interface UseFullscreenOptions {
+  /**
+   * Document capability for alternate runtimes and tests.
+   *
+   * @default window.document when a browser window exists
+   */
+  readonly host?: MaybeRefOrGetter<FullscreenHost | null | undefined>;
+  /**
+   * Exit fullscreen when the owning reactive scope stops while this
+   * composable's target is fullscreen.
+   *
+   * @default false
+   */
+  readonly autoExit?: boolean;
+  /**
+   * Navigation UI preference passed to `requestFullscreen`.
+   *
+   * @default "auto"
+   */
+  readonly navigationUI?: FullscreenNavigationUI;
+}
+/** Reactive state and actions returned by {@link useFullscreen}. */
+interface FullscreenControls {
+  /** Whether fullscreen can be requested. */
+  readonly supported: ComputedRef<boolean>;
+  /** Whether this composable's target is the current fullscreen element. */
+  readonly isFullscreen: Readonly<Ref<boolean>>;
+  /**
+   * Enter fullscreen. Browsers require a user gesture.
+   *
+   * @returns Whether the target is fullscreen afterwards.
+   */
+  readonly enter: () => Promise<boolean>;
+  /**
+   * Exit fullscreen when this composable's target owns it.
+   *
+   * @returns Whether the target is fullscreen afterwards.
+   */
+  readonly exit: () => Promise<boolean>;
+  /**
+   * Toggle fullscreen.
+   *
+   * @returns Whether the target is fullscreen afterwards.
+   */
+  readonly toggle: () => Promise<boolean>;
+}
+/**
+ * Enter, exit, and observe fullscreen for an element.
+ *
+ * Supports the standard Fullscreen API and the WebKit-prefixed variant.
+ * `isFullscreen` is true only while *this* target is the fullscreen element
+ * and follows `fullscreenchange`, so pressing Escape is reflected. Listeners
+ * are removed when the owning scope stops; with `autoExit` the target also
+ * leaves fullscreen then.
+ *
+ * Server rendering: `supported` and `isFullscreen` are false and nothing is
+ * requested.
+ *
+ * @example
+ * ```ts
+ * const player = useTemplateRef<HTMLElement>("player");
+ * const { toggle, isFullscreen } = useFullscreen(player);
+ * ```
+ *
+ * @param target Reactive element; defaults to the document element.
+ * @param options Capability, navigation UI, and exit policy.
+ * @default options {}
+ * @returns Fullscreen state and actions.
+ */
+declare function useFullscreen(target?: MaybeRefOrGetter<FullscreenElementLike | null | undefined>, options?: UseFullscreenOptions): FullscreenControls;
+//#endregion
+export { FullscreenControls, FullscreenElementLike, FullscreenHost, FullscreenNavigationUI, UseFullscreenOptions, useFullscreen };

package/dist/use-fullscreen.mjs

@@ -0,0 +1,95 @@
+import { tryOnScopeDispose } from "./scope.mjs";
+import { computed, readonly, ref, toRaw, toValue, watch } from "vue";
+//#region src/use-fullscreen.ts
+const changeEvents = ["fullscreenchange", "webkitfullscreenchange"];
+function browserFullscreenHost() {
+	return typeof window === "undefined" ? void 0 : window.document;
+}
+function currentElement(host) {
+	return host.fullscreenElement ?? host.webkitFullscreenElement ?? null;
+}
+/**
+* Enter, exit, and observe fullscreen for an element.
+*
+* Supports the standard Fullscreen API and the WebKit-prefixed variant.
+* `isFullscreen` is true only while *this* target is the fullscreen element
+* and follows `fullscreenchange`, so pressing Escape is reflected. Listeners
+* are removed when the owning scope stops; with `autoExit` the target also
+* leaves fullscreen then.
+*
+* Server rendering: `supported` and `isFullscreen` are false and nothing is
+* requested.
+*
+* @example
+* ```ts
+* const player = useTemplateRef<HTMLElement>("player");
+* const { toggle, isFullscreen } = useFullscreen(player);
+* ```
+*
+* @param target Reactive element; defaults to the document element.
+* @param options Capability, navigation UI, and exit policy.
+* @default options {}
+* @returns Fullscreen state and actions.
+*/
+function useFullscreen(target, options = {}) {
+	const isFullscreen = ref(false);
+	const resolveHost = () => options.host === void 0 ? browserFullscreenHost() : toValue(options.host) ?? void 0;
+	const resolveTarget = () => target === void 0 ? resolveHost()?.documentElement ?? void 0 : toValue(target) ?? void 0;
+	const update = () => {
+		const host = resolveHost();
+		const element = resolveTarget();
+		isFullscreen.value = host !== void 0 && element !== void 0 && toRaw(currentElement(host)) === toRaw(element);
+	};
+	const supported = computed(() => {
+		const host = resolveHost();
+		const element = resolveTarget();
+		if (!host || !element) return false;
+		return (host.fullscreenEnabled ?? host.webkitFullscreenEnabled ?? true) && (typeof element.requestFullscreen === "function" || typeof element.webkitRequestFullscreen === "function");
+	});
+	const enter = async () => {
+		const element = resolveTarget();
+		if (!supported.value || !element) return false;
+		if (isFullscreen.value) return true;
+		try {
+			if (element.requestFullscreen) await element.requestFullscreen({ navigationUI: options.navigationUI ?? "auto" });
+			else element.webkitRequestFullscreen?.();
+		} catch {}
+		update();
+		return isFullscreen.value;
+	};
+	const exit = async () => {
+		const host = resolveHost();
+		update();
+		if (!host || !isFullscreen.value) return isFullscreen.value;
+		try {
+			if (host.exitFullscreen) await host.exitFullscreen();
+			else host.webkitExitFullscreen?.();
+		} catch {}
+		update();
+		return isFullscreen.value;
+	};
+	const toggle = () => isFullscreen.value ? exit() : enter();
+	watch([resolveHost, resolveTarget], ([host], _previous, onCleanup) => {
+		update();
+		if (!host) return;
+		for (const event of changeEvents) host.addEventListener(event, update);
+		onCleanup(() => {
+			for (const event of changeEvents) host.removeEventListener(event, update);
+		});
+	}, {
+		immediate: true,
+		flush: "sync"
+	});
+	tryOnScopeDispose(() => {
+		if (options.autoExit ?? false) exit();
+	});
+	return {
+		supported,
+		isFullscreen: readonly(isFullscreen),
+		enter,
+		exit,
+		toggle
+	};
+}
+//#endregion
+export { useFullscreen };