@vizejs/composable 0.426.2 → 0.427.0

package/dist/create-global-state.mjs

@@ -0,0 +1,34 @@
+import { effectScope } from "vue";
+//#region src/create-global-state.ts
+/**
+* Lift a state factory into application-wide state shared by every caller.
+*
+* The factory runs once, lazily on the first call, inside a detached effect
+* scope so its watchers and computeds outlive any component; every later
+* call returns the same state. Because the state is module-level, it is
+* shared across all server requests: on the server, keep per-request state
+* in `provide`/`createInjectionState` instead, or reset it per request.
+*
+* @example
+* ```ts
+* const useSession = createGlobalState(() => ({ user: shallowRef<User | null>(null) }));
+* useSession().user.value = currentUser;
+* ```
+*
+* @param factory Creates the state; may use any composable.
+* @throws `Error` tagged `VIZE_COMPOSE_GLOBAL_STATE_INACTIVE_SCOPE` if the
+* private scope cannot run (never expected in practice).
+* @returns Accessor returning the shared state.
+*/
+function createGlobalState(factory) {
+	let created;
+	return () => {
+		if (created === void 0) {
+			created = effectScope(true).run(() => ({ state: factory() }));
+			if (created === void 0) throw new Error("[VIZE_COMPOSE_GLOBAL_STATE_INACTIVE_SCOPE] the state scope did not run");
+		}
+		return created.state;
+	};
+}
+//#endregion
+export { createGlobalState };

package/dist/create-injection-state.d.mts

@@ -0,0 +1,51 @@
+import { InjectionKey } from "vue";
+
+//#region src/create-injection-state.d.ts
+/** Options for {@link createInjectionState}. */
+interface CreateInjectionStateOptions<State> {
+  /**
+   * Key used for `provide`/`inject`.
+   *
+   * @default a fresh unique symbol
+   */
+  readonly injectionKey?: InjectionKey<State>;
+  /**
+   * Value injected when no ancestor provides the state; also narrows the
+   * injector's return type to `State`.
+   *
+   * @default undefined
+   */
+  readonly defaultValue?: State;
+}
+/** Provider, injector, and key returned by {@link createInjectionState}. */
+type InjectionState<Arguments extends readonly unknown[], State, Injected> = readonly [useProvidingState: (...args: Arguments) => State, useInjectedState: () => Injected, injectionKey: InjectionKey<State>];
+/**
+ * Create a typed provide/inject pair around a composable, for component
+ * subtrees that share request-local state.
+ *
+ * The provider runs the composable with its arguments, provides the result
+ * under a typed `InjectionKey`, and returns it. The injector returns the
+ * nearest provided state, or `defaultValue`, or `undefined` (reflected in
+ * its return type). State lives in the component tree, so unlike module
+ * globals it is naturally per request during SSR. Both must be called
+ * during `setup` (or inside `app.runWithContext`).
+ *
+ * @example
+ * ```ts
+ * const [useProvideCounter, useCounter] = createInjectionState((initial: number) => {
+ *   const count = ref(initial);
+ *   return { count, increment: () => count.value++ };
+ * });
+ * ```
+ *
+ * @param composable Creates the state in the providing component.
+ * @param options Custom key and default value.
+ * @default options {}
+ * @returns `[useProvidingState, useInjectedState, injectionKey]`.
+ */
+declare function createInjectionState<Arguments extends readonly unknown[], State>(composable: (...args: Arguments) => State, options: CreateInjectionStateOptions<State> & {
+  readonly defaultValue: State;
+}): InjectionState<Arguments, State, State>;
+declare function createInjectionState<Arguments extends readonly unknown[], State>(composable: (...args: Arguments) => State, options?: CreateInjectionStateOptions<State>): InjectionState<Arguments, State, State | undefined>;
+//#endregion
+export { CreateInjectionStateOptions, InjectionState, createInjectionState };

package/dist/create-injection-state.mjs

@@ -0,0 +1,19 @@
+import { inject, provide } from "vue";
+//#region src/create-injection-state.ts
+function createInjectionState(composable, options = {}) {
+	const generatedKey = Symbol("InjectionState");
+	const key = options.injectionKey ?? generatedKey;
+	const useProvidingState = (...args) => {
+		const state = composable(...args);
+		provide(key, state);
+		return state;
+	};
+	const useInjectedState = () => options.defaultValue === void 0 ? inject(key) : inject(key, options.defaultValue);
+	return [
+		useProvidingState,
+		useInjectedState,
+		key
+	];
+}
+//#endregion
+export { createInjectionState };

package/dist/create-shared-composable.d.mts

@@ -0,0 +1,38 @@
+//#region src/create-shared-composable.d.ts
+/** Options for {@link createSharedComposable}. */
+interface CreateSharedComposableOptions {
+  /**
+   * Share one instance across callers on the server too. Disabled by
+   * default because module-level sharing leaks state between requests;
+   * without a browser `window` every call then gets its own instance.
+   *
+   * @default false
+   */
+  readonly shareOnServer?: boolean;
+}
+/**
+ * Share one instance of a composable between all simultaneously mounted
+ * callers, reference-counted by their effect scopes.
+ *
+ * The first caller creates the instance inside a detached scope using its
+ * arguments (later callers' arguments are ignored while it lives). When the
+ * last subscribing scope stops, the instance's scope is stopped and the next
+ * call starts fresh. Calls outside any effect scope subscribe permanently.
+ * On the server every call gets its own instance unless `shareOnServer` is
+ * set, so request state never leaks.
+ *
+ * @example
+ * ```ts
+ * const useSharedMouse = createSharedComposable(useMouse);
+ * ```
+ *
+ * @param composable Composable to share.
+ * @param options Server sharing policy.
+ * @default options {}
+ * @throws `Error` tagged `VIZE_COMPOSE_SHARED_COMPOSABLE_INACTIVE_SCOPE` if
+ * the private scope cannot run (never expected in practice).
+ * @returns A composable with the same signature that shares its result.
+ */
+declare function createSharedComposable<Arguments extends readonly unknown[], Result>(composable: (...args: Arguments) => Result, options?: CreateSharedComposableOptions): (...args: Arguments) => Result;
+//#endregion
+export { CreateSharedComposableOptions, createSharedComposable };

package/dist/create-shared-composable.mjs

@@ -0,0 +1,54 @@
+import { tryOnScopeDispose } from "./scope.mjs";
+import { effectScope } from "vue";
+//#region src/create-shared-composable.ts
+/**
+* Share one instance of a composable between all simultaneously mounted
+* callers, reference-counted by their effect scopes.
+*
+* The first caller creates the instance inside a detached scope using its
+* arguments (later callers' arguments are ignored while it lives). When the
+* last subscribing scope stops, the instance's scope is stopped and the next
+* call starts fresh. Calls outside any effect scope subscribe permanently.
+* On the server every call gets its own instance unless `shareOnServer` is
+* set, so request state never leaks.
+*
+* @example
+* ```ts
+* const useSharedMouse = createSharedComposable(useMouse);
+* ```
+*
+* @param composable Composable to share.
+* @param options Server sharing policy.
+* @default options {}
+* @throws `Error` tagged `VIZE_COMPOSE_SHARED_COMPOSABLE_INACTIVE_SCOPE` if
+* the private scope cannot run (never expected in practice).
+* @returns A composable with the same signature that shares its result.
+*/
+function createSharedComposable(composable, options = {}) {
+	let subscribers = 0;
+	let shared;
+	const release = () => {
+		subscribers -= 1;
+		if (subscribers > 0 || shared === void 0) return;
+		shared.scope.stop();
+		shared = void 0;
+	};
+	return (...args) => {
+		if (typeof window === "undefined" && !(options.shareOnServer ?? false)) return composable(...args);
+		subscribers += 1;
+		if (shared === void 0) {
+			const scope = effectScope(true);
+			const result = scope.run(() => ({ value: composable(...args) }));
+			if (result === void 0) throw new Error("[VIZE_COMPOSE_SHARED_COMPOSABLE_INACTIVE_SCOPE] the shared scope did not run");
+			shared = {
+				result: result.value,
+				scope
+			};
+		}
+		const { result } = shared;
+		tryOnScopeDispose(release);
+		return result;
+	};
+}
+//#endregion
+export { createSharedComposable };

package/dist/device-motion.d.mts

@@ -0,0 +1,71 @@
+import { MotionPermissionConstructor, MotionPermissionState } from "./device-orientation.mjs";
+import { MaybeRefOrGetter, Ref, ShallowRef } from "vue";
+
+//#region src/device-motion.d.ts
+/** Window-like capability observed by {@link useDeviceMotion}. */
+interface DeviceMotionHost extends EventTarget {
+  /** Constructor used to detect support and request permission. */
+  readonly DeviceMotionEvent?: MotionPermissionConstructor;
+}
+/** Acceleration along the device axes in m/s². */
+interface MotionVector {
+  /** X axis (left to right). */
+  readonly x: number | null;
+  /** Y axis (bottom to top). */
+  readonly y: number | null;
+  /** Z axis (back to front). */
+  readonly z: number | null;
+}
+/** Rotation rate around the device axes in degrees per second. */
+interface MotionRotationRate {
+  /** Around the Z axis. */
+  readonly alpha: number | null;
+  /** Around the X axis. */
+  readonly beta: number | null;
+  /** Around the Y axis. */
+  readonly gamma: number | null;
+}
+/** Options for {@link useDeviceMotion}. */
+interface UseDeviceMotionOptions {
+  /**
+   * Reactive window capability for alternate runtimes and tests.
+   *
+   * @default globalThis.window when available
+   */
+  readonly host?: MaybeRefOrGetter<DeviceMotionHost | null | undefined>;
+}
+/** Reactive motion state returned by {@link useDeviceMotion}. */
+interface DeviceMotionControls {
+  /** Whether the host exposes `DeviceMotionEvent`. `false` during server rendering. */
+  readonly isSupported: Readonly<Ref<boolean>>;
+  /** Acceleration without gravity; `null` before the first reading. */
+  readonly acceleration: Readonly<ShallowRef<MotionVector | null>>;
+  /** Acceleration including gravity; `null` before the first reading. */
+  readonly accelerationIncludingGravity: Readonly<ShallowRef<MotionVector | null>>;
+  /** Rotation rate; `null` before the first reading. */
+  readonly rotationRate: Readonly<ShallowRef<MotionRotationRate | null>>;
+  /** Sampling interval in milliseconds. */
+  readonly interval: Readonly<Ref<number>>;
+  /** Latest permission outcome; `"granted"` where no prompt exists. */
+  readonly permission: Readonly<Ref<MotionPermissionState>>;
+  /**
+   * Request sensor permission where the platform requires it.
+   *
+   * @returns The resulting permission state.
+   */
+  readonly requestPermission: () => Promise<MotionPermissionState>;
+}
+/**
+ * Track device acceleration and rotation rate.
+ *
+ * Readings are copied into plain snapshots. Server renders expose `null`
+ * readings and `isSupported: false`; the listener is removed with the owning
+ * reactive scope. Shares the permission model of `useDeviceOrientation`.
+ *
+ * @param options Window capability.
+ * @default options {}
+ * @returns Reactive readings, support/permission state, and a permission action.
+ */
+declare function useDeviceMotion(options?: UseDeviceMotionOptions): DeviceMotionControls;
+//#endregion
+export { DeviceMotionControls, DeviceMotionHost, MotionRotationRate, MotionVector, UseDeviceMotionOptions, useDeviceMotion };

package/dist/device-motion.mjs

@@ -0,0 +1,75 @@
+import { tryOnScopeDispose } from "./scope.mjs";
+import { requestMotionPermission } from "./device-orientation.mjs";
+import { hasInjectionContext, onMounted, readonly, ref, shallowRef, toValue, watch } from "vue";
+//#region src/device-motion.ts
+/**
+* Track device acceleration and rotation rate.
+*
+* Readings are copied into plain snapshots. Server renders expose `null`
+* readings and `isSupported: false`; the listener is removed with the owning
+* reactive scope. Shares the permission model of `useDeviceOrientation`.
+*
+* @param options Window capability.
+* @default options {}
+* @returns Reactive readings, support/permission state, and a permission action.
+*/
+function useDeviceMotion(options = {}) {
+	const isSupported = ref(false);
+	const acceleration = shallowRef(null);
+	const accelerationIncludingGravity = shallowRef(null);
+	const rotationRate = shallowRef(null);
+	const interval = ref(0);
+	const permission = ref("prompt");
+	const mounted = shallowRef(!hasInjectionContext());
+	if (!mounted.value) onMounted(() => {
+		mounted.value = true;
+	});
+	const host = () => !mounted.value ? void 0 : options.host === void 0 ? browserMotionHost() : toValue(options.host);
+	const onMotion = (event) => {
+		if (!isMotionEvent(event)) return;
+		acceleration.value = vector(event.acceleration);
+		accelerationIncludingGravity.value = vector(event.accelerationIncludingGravity);
+		rotationRate.value = event.rotationRate ? {
+			alpha: event.rotationRate.alpha,
+			beta: event.rotationRate.beta,
+			gamma: event.rotationRate.gamma
+		} : null;
+		interval.value = event.interval;
+	};
+	const stop = watch(host, (current, _previous, onCleanup) => {
+		const constructor = current?.DeviceMotionEvent;
+		isSupported.value = constructor !== void 0;
+		if (!current || !constructor) return;
+		if (typeof constructor.requestPermission !== "function") permission.value = "granted";
+		current.addEventListener("devicemotion", onMotion, { passive: true });
+		onCleanup(() => current.removeEventListener("devicemotion", onMotion));
+	}, { immediate: true });
+	tryOnScopeDispose(() => stop.stop());
+	return {
+		isSupported: readonly(isSupported),
+		acceleration,
+		accelerationIncludingGravity,
+		rotationRate,
+		interval: readonly(interval),
+		permission: readonly(permission),
+		requestPermission: async () => {
+			permission.value = await requestMotionPermission(host()?.DeviceMotionEvent);
+			return permission.value;
+		}
+	};
+}
+function vector(value) {
+	return value ? {
+		x: value.x,
+		y: value.y,
+		z: value.z
+	} : null;
+}
+function isMotionEvent(event) {
+	return "accelerationIncludingGravity" in event && "interval" in event;
+}
+function browserMotionHost() {
+	return typeof window !== "undefined" ? window : void 0;
+}
+//#endregion
+export { useDeviceMotion };

package/dist/device-orientation.d.mts

@@ -0,0 +1,82 @@
+import { MaybeRefOrGetter, Ref } from "vue";
+
+//#region src/device-orientation.d.ts
+/** Permission outcome of the iOS-style motion/orientation permission prompt. */
+type MotionPermissionState = "granted" | "denied" | "prompt";
+/** Event constructor that may expose the iOS `requestPermission` static. */
+interface MotionPermissionConstructor {
+  /** Constructor prototype; present on every platform event constructor. */
+  readonly prototype: object;
+  /** Ask the user for sensor access (Safari on iOS/iPadOS 13+). */
+  readonly requestPermission?: () => Promise<string>;
+}
+/** Window-like capability observed by {@link useDeviceOrientation}. */
+interface DeviceOrientationHost extends EventTarget {
+  /** Constructor used to detect support and request permission. */
+  readonly DeviceOrientationEvent?: MotionPermissionConstructor;
+}
+/** Options for {@link useDeviceOrientation}. */
+interface UseDeviceOrientationOptions {
+  /**
+   * Listen to `deviceorientationabsolute` (earth-frame) instead of
+   * `deviceorientation`.
+   *
+   * @default false
+   */
+  readonly absolute?: boolean;
+  /**
+   * Reactive window capability for alternate runtimes and tests.
+   *
+   * @default globalThis.window when available
+   */
+  readonly host?: MaybeRefOrGetter<DeviceOrientationHost | null | undefined>;
+}
+/** Reactive orientation state returned by {@link useDeviceOrientation}. */
+interface DeviceOrientationControls {
+  /** Whether the host exposes `DeviceOrientationEvent`. `false` during server rendering. */
+  readonly isSupported: Readonly<Ref<boolean>>;
+  /** Whether the latest reading is relative to the earth frame. */
+  readonly isAbsolute: Readonly<Ref<boolean>>;
+  /** Rotation around the Z axis in degrees `[0, 360)`. */
+  readonly alpha: Readonly<Ref<number | null>>;
+  /** Rotation around the X axis in degrees `[-180, 180)`. */
+  readonly beta: Readonly<Ref<number | null>>;
+  /** Rotation around the Y axis in degrees `[-90, 90)`. */
+  readonly gamma: Readonly<Ref<number | null>>;
+  /** Latest permission outcome; `"granted"` where no prompt exists. */
+  readonly permission: Readonly<Ref<MotionPermissionState>>;
+  /**
+   * Request sensor permission where the platform requires it. Must be called
+   * from a user gesture on iOS.
+   *
+   * @returns The resulting permission state.
+   */
+  readonly requestPermission: () => Promise<MotionPermissionState>;
+}
+/**
+ * Track device orientation angles.
+ *
+ * Server renders expose `null` angles and `isSupported: false`. The listener
+ * follows the reactive host and is removed with the owning reactive scope.
+ * On platforms with a permission prompt, `permission` starts as `"prompt"`
+ * and readings arrive only after `requestPermission` resolves `"granted"`.
+ *
+ * @param options Frame selection and window capability.
+ * @default options {}
+ * @returns Reactive angles, support/permission state, and a permission action.
+ */
+declare function useDeviceOrientation(options?: UseDeviceOrientationOptions): DeviceOrientationControls;
+/**
+ * Request motion/orientation sensor permission from an event constructor.
+ *
+ * Normalizes the platform result to {@link MotionPermissionState}. Missing
+ * constructors resolve `"denied"`; constructors without a prompt resolve
+ * `"granted"`; unknown results resolve `"prompt"`. Rejections (for example
+ * when not called from a user gesture) resolve `"denied"` instead of throwing.
+ *
+ * @param constructor `DeviceOrientationEvent` or `DeviceMotionEvent`.
+ * @returns The normalized permission state.
+ */
+declare function requestMotionPermission(constructor: MotionPermissionConstructor | undefined): Promise<MotionPermissionState>;
+//#endregion
+export { DeviceOrientationControls, DeviceOrientationHost, MotionPermissionConstructor, MotionPermissionState, UseDeviceOrientationOptions, requestMotionPermission, useDeviceOrientation };

package/dist/device-orientation.mjs

@@ -0,0 +1,86 @@
+import { tryOnScopeDispose } from "./scope.mjs";
+import { hasInjectionContext, onMounted, readonly, ref, shallowRef, toValue, watch } from "vue";
+//#region src/device-orientation.ts
+/**
+* Track device orientation angles.
+*
+* Server renders expose `null` angles and `isSupported: false`. The listener
+* follows the reactive host and is removed with the owning reactive scope.
+* On platforms with a permission prompt, `permission` starts as `"prompt"`
+* and readings arrive only after `requestPermission` resolves `"granted"`.
+*
+* @param options Frame selection and window capability.
+* @default options {}
+* @returns Reactive angles, support/permission state, and a permission action.
+*/
+function useDeviceOrientation(options = {}) {
+	const isSupported = ref(false);
+	const isAbsolute = ref(false);
+	const alpha = ref(null);
+	const beta = ref(null);
+	const gamma = ref(null);
+	const permission = ref("prompt");
+	const mounted = shallowRef(!hasInjectionContext());
+	if (!mounted.value) onMounted(() => {
+		mounted.value = true;
+	});
+	const host = () => !mounted.value ? void 0 : options.host === void 0 ? browserOrientationHost() : toValue(options.host);
+	const eventName = options.absolute ? "deviceorientationabsolute" : "deviceorientation";
+	const onOrientation = (event) => {
+		if (!isOrientationEvent(event)) return;
+		isAbsolute.value = event.absolute;
+		alpha.value = event.alpha;
+		beta.value = event.beta;
+		gamma.value = event.gamma;
+	};
+	const stop = watch(host, (current, _previous, onCleanup) => {
+		const constructor = current?.DeviceOrientationEvent;
+		isSupported.value = constructor !== void 0;
+		if (!current || !constructor) return;
+		if (typeof constructor.requestPermission !== "function") permission.value = "granted";
+		current.addEventListener(eventName, onOrientation, { passive: true });
+		onCleanup(() => current.removeEventListener(eventName, onOrientation));
+	}, { immediate: true });
+	tryOnScopeDispose(() => stop.stop());
+	return {
+		isSupported: readonly(isSupported),
+		isAbsolute: readonly(isAbsolute),
+		alpha: readonly(alpha),
+		beta: readonly(beta),
+		gamma: readonly(gamma),
+		permission: readonly(permission),
+		requestPermission: async () => {
+			permission.value = await requestMotionPermission(host()?.DeviceOrientationEvent);
+			return permission.value;
+		}
+	};
+}
+/**
+* Request motion/orientation sensor permission from an event constructor.
+*
+* Normalizes the platform result to {@link MotionPermissionState}. Missing
+* constructors resolve `"denied"`; constructors without a prompt resolve
+* `"granted"`; unknown results resolve `"prompt"`. Rejections (for example
+* when not called from a user gesture) resolve `"denied"` instead of throwing.
+*
+* @param constructor `DeviceOrientationEvent` or `DeviceMotionEvent`.
+* @returns The normalized permission state.
+*/
+async function requestMotionPermission(constructor) {
+	if (!constructor) return "denied";
+	if (typeof constructor.requestPermission !== "function") return "granted";
+	try {
+		const result = await constructor.requestPermission();
+		return result === "granted" || result === "denied" ? result : "prompt";
+	} catch {
+		return "denied";
+	}
+}
+function isOrientationEvent(event) {
+	return "alpha" in event && "beta" in event && "gamma" in event;
+}
+function browserOrientationHost() {
+	return typeof window !== "undefined" ? window : void 0;
+}
+//#endregion
+export { requestMotionPermission, useDeviceOrientation };

package/dist/device-pixel-ratio.d.mts

@@ -0,0 +1,45 @@
+import { MediaQueryHost } from "./media-query.mjs";
+import { MaybeRefOrGetter, Ref } from "vue";
+
+//#region src/device-pixel-ratio.d.ts
+/** Window-like capability observed by {@link useDevicePixelRatio}. */
+interface DevicePixelRatioHost extends MediaQueryHost {
+  /** Ratio of physical to CSS pixels. */
+  readonly devicePixelRatio: number;
+}
+/** Options for {@link useDevicePixelRatio}. */
+interface UseDevicePixelRatioOptions {
+  /**
+   * Ratio exposed during server rendering.
+   *
+   * @default 1
+   */
+  readonly ssrPixelRatio?: number;
+  /**
+   * Reactive window capability for alternate runtimes and tests.
+   *
+   * @default globalThis.window when available
+   */
+  readonly host?: MaybeRefOrGetter<DevicePixelRatioHost | null | undefined>;
+}
+/** Reactive ratio returned by {@link useDevicePixelRatio}. */
+interface DevicePixelRatioControls {
+  /** Current device pixel ratio. */
+  readonly pixelRatio: Readonly<Ref<number>>;
+  /** Whether a window capability is attached. `false` during server rendering. */
+  readonly isSupported: Readonly<Ref<boolean>>;
+}
+/**
+ * Track `window.devicePixelRatio` (zoom and moving between displays).
+ *
+ * Subscribes to a `(resolution: <ratio>dppx)` media query and re-subscribes
+ * with the new ratio after each change, which is the only change signal the
+ * platform offers. Server renders expose `ssrPixelRatio`.
+ *
+ * @param options Server fallback and window capability.
+ * @default options {}
+ * @returns Reactive ratio and support flag.
+ */
+declare function useDevicePixelRatio(options?: UseDevicePixelRatioOptions): DevicePixelRatioControls;
+//#endregion
+export { DevicePixelRatioControls, DevicePixelRatioHost, UseDevicePixelRatioOptions, useDevicePixelRatio };

package/dist/device-pixel-ratio.mjs

@@ -0,0 +1,50 @@
+import { tryOnScopeDispose } from "./scope.mjs";
+import { hasInjectionContext, onMounted, readonly, ref, shallowRef, toValue, watch } from "vue";
+//#region src/device-pixel-ratio.ts
+/**
+* Track `window.devicePixelRatio` (zoom and moving between displays).
+*
+* Subscribes to a `(resolution: <ratio>dppx)` media query and re-subscribes
+* with the new ratio after each change, which is the only change signal the
+* platform offers. Server renders expose `ssrPixelRatio`.
+*
+* @param options Server fallback and window capability.
+* @default options {}
+* @returns Reactive ratio and support flag.
+*/
+function useDevicePixelRatio(options = {}) {
+	const fallback = options.ssrPixelRatio ?? 1;
+	const pixelRatio = ref(fallback);
+	const isSupported = ref(false);
+	const mounted = shallowRef(!hasInjectionContext());
+	if (!mounted.value) onMounted(() => {
+		mounted.value = true;
+	});
+	const stop = watch(() => !mounted.value ? void 0 : options.host === void 0 ? browserPixelRatioHost() : toValue(options.host), (host, _previous, onCleanup) => {
+		isSupported.value = Boolean(host);
+		if (!host) {
+			pixelRatio.value = fallback;
+			return;
+		}
+		let release = () => void 0;
+		const subscribe = () => {
+			release();
+			pixelRatio.value = host.devicePixelRatio;
+			const media = host.matchMedia(`(resolution: ${host.devicePixelRatio}dppx)`);
+			media.addEventListener("change", subscribe, { once: true });
+			release = () => media.removeEventListener("change", subscribe);
+		};
+		subscribe();
+		onCleanup(() => release());
+	}, { immediate: true });
+	tryOnScopeDispose(() => stop.stop());
+	return {
+		pixelRatio: readonly(pixelRatio),
+		isSupported: readonly(isSupported)
+	};
+}
+function browserPixelRatioHost() {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window : void 0;
+}
+//#endregion
+export { useDevicePixelRatio };

package/dist/document-visibility.mjs

@@ -1,4 +1,4 @@
-import { computed, readonly, ref, toValue, watchEffect } from "vue";
+import { computed, hasInjectionContext, onMounted, readonly, ref, shallowRef, toValue, watchEffect } from "vue";
 //#region src/document-visibility.ts
 /**
 * Observe document visibility without touching browser globals during module evaluation.
@@ -18,8 +18,12 @@ function useDocumentVisibility(options = {}) {
 	const fallback = options.ssrState ?? "visible";
 	const state = ref(fallback);
 	const supported = ref(false);
+	const mounted = shallowRef(!hasInjectionContext());
+	if (!mounted.value) onMounted(() => {
+		mounted.value = true;
+	});
 	watchEffect((onCleanup) => {
-		const host = options.host === void 0 ? browserDocumentVisibilityHost() : toValue(options.host);
+		const host = !mounted.value ? void 0 : options.host === void 0 ? browserDocumentVisibilityHost() : toValue(options.host);
 		if (!host) {
 			supported.value = false;
 			state.value = fallback;