@vizejs/composable 0.426.3 → 0.427.0

package/dist/use-web-midi.d.mts

@@ -0,0 +1,148 @@
+import { ComputedRef, MaybeRefOrGetter, Ref, ShallowRef } from "vue";
+
+//#region src/use-web-midi.d.ts
+/** Minimal `MIDIPort` read by {@link useWebMIDI}. */
+interface MIDIPortLike extends EventTarget {
+  /** Stable port identifier. */
+  readonly id: string;
+  /** Port name. */
+  readonly name?: string | null;
+  /** Manufacturer name. */
+  readonly manufacturer?: string | null;
+  /** Device state. */
+  readonly state: string;
+  /** Connection state. */
+  readonly connection: string;
+}
+/** Minimal `MIDIOutput` used by {@link useWebMIDI}. */
+interface MIDIOutputLike extends MIDIPortLike {
+  /** Send one or more MIDI messages, optionally scheduled at `timestamp`. */
+  send(data: number[], timestamp?: number): void;
+}
+/** Minimal `MIDIAccess` used by {@link useWebMIDI}. */
+interface MIDIAccessLike extends EventTarget {
+  /** Available inputs. */
+  readonly inputs: {
+    values(): Iterable<MIDIPortLike>;
+  };
+  /** Available outputs. */
+  readonly outputs: {
+    values(): Iterable<MIDIOutputLike>;
+  };
+}
+/** Access request flags of `navigator.requestMIDIAccess`. */
+interface MIDIRequestFlags {
+  /** Request system-exclusive message access. */
+  readonly sysex?: boolean;
+  /** Include software synthesizers. */
+  readonly software?: boolean;
+}
+/** Navigator-like capability used by {@link useWebMIDI}. */
+interface MIDIHost {
+  /** Request MIDI access. */
+  requestMIDIAccess(options?: MIDIRequestFlags): Promise<MIDIAccessLike>;
+}
+/** Plain description of one MIDI port. */
+interface MIDIPortInfo {
+  /** Stable port identifier. */
+  readonly id: string;
+  /** Port name (empty when unknown). */
+  readonly name: string;
+  /** Manufacturer (empty when unknown). */
+  readonly manufacturer: string;
+  /** Device state, e.g. `"connected"` or `"disconnected"`. */
+  readonly state: string;
+  /** Connection state, e.g. `"open"`, `"closed"` or `"pending"`. */
+  readonly connection: string;
+}
+/** A message received on an input port. */
+interface MIDIInputMessage {
+  /** Raw message bytes. */
+  readonly data: Uint8Array;
+  /** Event timestamp in milliseconds. */
+  readonly timeStamp: number;
+  /** Identifier of the receiving input. */
+  readonly inputId: string;
+}
+/** Lifecycle of the access request. */
+type MIDIAccessStatus = "idle" | "pending" | "granted" | "denied";
+/** Options for {@link useWebMIDI}. */
+interface UseWebMIDIOptions {
+  /**
+   * Navigator-like MIDI capability.
+   *
+   * @default window.navigator when `requestMIDIAccess` exists
+   */
+  readonly host?: MaybeRefOrGetter<MIDIHost | null | undefined>;
+  /**
+   * Request system-exclusive access.
+   *
+   * @default false
+   */
+  readonly sysex?: boolean;
+  /**
+   * Include software synthesizers.
+   *
+   * @default false
+   */
+  readonly software?: boolean;
+  /**
+   * Receives every input message. When set, `midimessage` listeners are
+   * attached to all inputs (which implicitly opens them).
+   *
+   * @default undefined
+   */
+  readonly onMessage?: (message: MIDIInputMessage) => void;
+}
+/** Reactive state and actions returned by {@link useWebMIDI}. */
+interface WebMIDIControls {
+  /** Whether Web MIDI is available. */
+  readonly supported: ComputedRef<boolean>;
+  /** Access request status. */
+  readonly status: Readonly<Ref<MIDIAccessStatus>>;
+  /** Input ports, refreshed on `statechange`. */
+  readonly inputs: Readonly<ShallowRef<readonly MIDIPortInfo[]>>;
+  /** Output ports, refreshed on `statechange`. */
+  readonly outputs: Readonly<ShallowRef<readonly MIDIPortInfo[]>>;
+  /** Most recent request or send failure. */
+  readonly error: Readonly<ShallowRef<unknown>>;
+  /**
+   * Request MIDI access (may prompt the user).
+   *
+   * @returns Whether access was granted.
+   */
+  readonly request: () => Promise<boolean>;
+  /**
+   * Send bytes to an output.
+   *
+   * @returns Whether the output exists and accepted the message.
+   */
+  readonly send: (outputId: string, data: Uint8Array | readonly number[], timestamp?: number) => boolean;
+  /** Remove every listener and forget the access object. Idempotent. */
+  readonly stop: () => void;
+}
+/**
+ * Access MIDI devices with the Web MIDI API.
+ *
+ * Nothing is requested until `request()` is called. Once granted, `inputs`
+ * and `outputs` follow `statechange` events, and `onMessage` receives
+ * messages from every input. Failures land in `error`. Listeners are removed
+ * when the owning reactive scope stops; outside a scope call `stop()`.
+ *
+ * Server rendering: `supported` is false, `status` stays `"idle"` and no
+ * access is requested.
+ *
+ * @example
+ * ```ts
+ * const midi = useWebMIDI({ onMessage: ({ data }) => console.log(data) });
+ * await midi.request();
+ * midi.send(midi.outputs.value[0]!.id, [0x90, 60, 127]);
+ * ```
+ *
+ * @param options Host, access flags, and message callback.
+ * @default options {}
+ * @returns MIDI state and actions.
+ */
+declare function useWebMIDI(options?: UseWebMIDIOptions): WebMIDIControls;
+//#endregion
+export { MIDIAccessLike, MIDIAccessStatus, MIDIHost, MIDIInputMessage, MIDIOutputLike, MIDIPortInfo, MIDIPortLike, MIDIRequestFlags, UseWebMIDIOptions, WebMIDIControls, useWebMIDI };

package/dist/use-web-midi.mjs

@@ -0,0 +1,140 @@
+import { tryOnScopeDispose } from "./scope.mjs";
+import { computed, hasInjectionContext, readonly, ref, shallowReadonly, shallowRef, toValue, watchPostEffect } from "vue";
+//#region src/use-web-midi.ts
+function browserMIDIHost() {
+	if (typeof window === "undefined") return void 0;
+	const { navigator } = window;
+	return typeof navigator.requestMIDIAccess === "function" ? navigator : void 0;
+}
+function describe(port) {
+	return {
+		id: port.id,
+		name: port.name ?? "",
+		manufacturer: port.manufacturer ?? "",
+		state: port.state,
+		connection: port.connection
+	};
+}
+function hasMessageData(event) {
+	return "data" in event;
+}
+/**
+* Access MIDI devices with the Web MIDI API.
+*
+* Nothing is requested until `request()` is called. Once granted, `inputs`
+* and `outputs` follow `statechange` events, and `onMessage` receives
+* messages from every input. Failures land in `error`. Listeners are removed
+* when the owning reactive scope stops; outside a scope call `stop()`.
+*
+* Server rendering: `supported` is false, `status` stays `"idle"` and no
+* access is requested.
+*
+* @example
+* ```ts
+* const midi = useWebMIDI({ onMessage: ({ data }) => console.log(data) });
+* await midi.request();
+* midi.send(midi.outputs.value[0]!.id, [0x90, 60, 127]);
+* ```
+*
+* @param options Host, access flags, and message callback.
+* @default options {}
+* @returns MIDI state and actions.
+*/
+function useWebMIDI(options = {}) {
+	const status = ref("idle");
+	const inputs = shallowRef([]);
+	const outputs = shallowRef([]);
+	const error = shallowRef(void 0);
+	const listening = /* @__PURE__ */ new Map();
+	let access;
+	let generation = 0;
+	const hydrated = shallowRef(!hasInjectionContext());
+	if (!hydrated.value) watchPostEffect(() => {
+		hydrated.value = true;
+	});
+	const resolveHost = () => !hydrated.value ? void 0 : options.host === void 0 ? browserMIDIHost() : toValue(options.host) ?? void 0;
+	const listen = (input) => {
+		const onMessage = options.onMessage;
+		if (!onMessage || listening.has(input)) return;
+		const listener = (event) => {
+			if (!hasMessageData(event) || !event.data) return;
+			onMessage({
+				data: event.data,
+				timeStamp: event.timeStamp,
+				inputId: input.id
+			});
+		};
+		listening.set(input, listener);
+		input.addEventListener("midimessage", listener);
+	};
+	const unlisten = () => {
+		for (const [input, listener] of listening) input.removeEventListener("midimessage", listener);
+		listening.clear();
+	};
+	const refresh = () => {
+		if (!access) return;
+		const inputPorts = [...access.inputs.values()];
+		for (const input of inputPorts) listen(input);
+		inputs.value = inputPorts.map(describe);
+		outputs.value = [...access.outputs.values()].map(describe);
+	};
+	const stop = () => {
+		generation += 1;
+		unlisten();
+		access?.removeEventListener("statechange", refresh);
+		access = void 0;
+		inputs.value = [];
+		outputs.value = [];
+		if (status.value === "pending") status.value = "idle";
+	};
+	const request = async () => {
+		const host = resolveHost();
+		if (!host) return false;
+		stop();
+		const current = generation;
+		status.value = "pending";
+		try {
+			const next = await host.requestMIDIAccess({
+				sysex: options.sysex ?? false,
+				software: options.software ?? false
+			});
+			if (current !== generation) return false;
+			access = next;
+			next.addEventListener("statechange", refresh);
+			refresh();
+			status.value = "granted";
+			error.value = void 0;
+			return true;
+		} catch (cause) {
+			if (current !== generation) return false;
+			status.value = "denied";
+			error.value = cause;
+			return false;
+		}
+	};
+	const send = (outputId, data, timestamp) => {
+		const output = access ? [...access.outputs.values()].find((port) => port.id === outputId) : void 0;
+		if (!output) return false;
+		try {
+			if (timestamp === void 0) output.send(Array.from(data));
+			else output.send(Array.from(data), timestamp);
+			return true;
+		} catch (cause) {
+			error.value = cause;
+			return false;
+		}
+	};
+	tryOnScopeDispose(stop);
+	return {
+		supported: computed(() => resolveHost() !== void 0),
+		status: readonly(status),
+		inputs: shallowReadonly(inputs),
+		outputs: shallowReadonly(outputs),
+		error: readonly(error),
+		request,
+		send,
+		stop
+	};
+}
+//#endregion
+export { useWebMIDI };

package/dist/use-web-vitals.d.mts

@@ -0,0 +1,142 @@
+import { PerformanceObserverHost } from "./use-performance-observer.mjs";
+import { ComputedRef, MaybeRef, MaybeRefOrGetter, ShallowRef } from "vue";
+
+//#region src/use-web-vitals.d.ts
+/** Core Web Vitals and supporting metrics computed by {@link useWebVitals}. */
+type WebVitalName = "LCP" | "CLS" | "INP" | "FCP" | "TTFB";
+/** Rating bucket of a metric value. */
+type WebVitalRating = "good" | "needs-improvement" | "poor";
+/**
+ * Standard `[good, poor]` thresholds: values up to the first bound are
+ * "good", values above the second are "poor". Times are milliseconds; CLS is
+ * unitless.
+ */
+declare const WEB_VITALS_THRESHOLDS: {
+  readonly LCP: readonly [2500, 4000];
+  readonly CLS: readonly [0.1, 0.25];
+  readonly INP: readonly [200, 500];
+  readonly FCP: readonly [1800, 3000];
+  readonly TTFB: readonly [800, 1800];
+};
+/**
+ * Rate a metric value with {@link WEB_VITALS_THRESHOLDS}.
+ *
+ * @param name Metric name.
+ * @param value Metric value (milliseconds, or the unitless CLS score).
+ * @returns The rating bucket.
+ */
+declare function rateMetric(name: WebVitalName, value: number): WebVitalRating;
+/** Snapshot of one metric. */
+interface WebVitalMetric {
+  /** Metric name. */
+  readonly name: WebVitalName;
+  /** Current value (milliseconds, or the unitless CLS score). */
+  readonly value: number;
+  /** Rating of `value`. */
+  readonly rating: WebVitalRating;
+  /** Change since the value last reported through `onMetric` (the full value before that). */
+  readonly delta: number;
+  /** Number of performance entries that make up `value`. */
+  readonly entries: number;
+  /** Identifier stable for this metric during the page load. */
+  readonly id?: string;
+}
+/** Metrics measured so far; a metric is absent until it has a value. */
+type WebVitalsRecord = Readonly<Partial<Record<WebVitalName, WebVitalMetric>>>;
+/** Document events used by {@link useWebVitals}. */
+type WebVitalsDocumentEvent = "visibilitychange" | "keydown" | "click";
+/** Minimal document consumed by {@link useWebVitals}. */
+interface WebVitalsDocumentHost {
+  /** Current visibility (`"visible"` or `"hidden"`). */
+  readonly visibilityState: string;
+  /** Subscribe to a document event. */
+  addEventListener(type: WebVitalsDocumentEvent, listener: (event: {
+    readonly timeStamp: number;
+  }) => void, options?: {
+    readonly capture?: boolean;
+  }): void;
+  /** Unsubscribe from a document event. */
+  removeEventListener(type: WebVitalsDocumentEvent, listener: (event: {
+    readonly timeStamp: number;
+  }) => void, options?: {
+    readonly capture?: boolean;
+  }): void;
+}
+/** Options for {@link useWebVitals}. */
+interface UseWebVitalsOptions {
+  /**
+   * `PerformanceObserver` constructor for alternate runtimes and tests.
+   *
+   * @default window.PerformanceObserver when it exists
+   */
+  readonly PerformanceObserver?: MaybeRef<PerformanceObserverHost | null | undefined>;
+  /**
+   * Document whose visibility finalizes metrics and whose first input stops LCP.
+   *
+   * @default window.document when available
+   */
+  readonly document?: MaybeRefOrGetter<WebVitalsDocumentHost | null | undefined>;
+  /**
+   * Report every change through `onMetric` instead of only final values.
+   *
+   * @default false
+   */
+  readonly reportAllChanges?: boolean;
+  /**
+   * Minimum Event Timing duration considered for INP, in milliseconds.
+   *
+   * @default 40
+   */
+  readonly durationThreshold?: number;
+}
+/** Reactive state and actions returned by {@link useWebVitals}. */
+interface WebVitalsControls {
+  /** Whether at least one metric can be observed. */
+  readonly supported: ComputedRef<boolean>;
+  /** Metrics measured so far, replaced on each change. */
+  readonly metrics: Readonly<ShallowRef<WebVitalsRecord>>;
+  /**
+   * Subscribe to reported metrics. FCP and TTFB are reported once measured;
+   * LCP once finalized (first input or hidden page); CLS and INP whenever
+   * the page becomes hidden with a changed value. With `reportAllChanges`,
+   * every change is reported.
+   *
+   * @param listener Receives each reported metric.
+   * @returns Removes the listener.
+   */
+  readonly onMetric: (listener: (metric: WebVitalMetric) => void) => () => void;
+  /** Stop every observer and listener. Repeated calls are safe. */
+  readonly stop: () => void;
+}
+/**
+ * Measure LCP, CLS, INP, FCP and TTFB locally, without dependencies.
+ *
+ * - LCP: last candidate before the first input or hidden page.
+ * - CLS: largest session window (shifts < 1 s apart, window ≤ 5 s),
+ *   ignoring shifts after recent input.
+ * - INP: per-interaction maximum duration; the highest after ignoring one
+ *   per 50 interactions (a p98 approximation over the 10 longest). The
+ *   interaction count only includes interactions above `durationThreshold`.
+ * - FCP: `first-contentful-paint` before the page was first hidden.
+ * - TTFB: navigation `responseStart - activationStart`, clamped at 0.
+ *
+ * Values are not adjusted for prerender activation except TTFB. Observers
+ * and listeners are released when the owning reactive scope stops; outside
+ * a scope the caller owns `stop()`.
+ *
+ * Server rendering: nothing is observed, `metrics` is `{}` and `supported`
+ * is false.
+ *
+ * @example
+ * ```ts
+ * const { metrics, onMetric } = useWebVitals();
+ * onMetric((metric) => navigator.sendBeacon("/vitals", JSON.stringify(metric)));
+ * ```
+ *
+ * @param options Hosts and reporting policy.
+ * @default options {}
+ * @returns Reactive metrics and a report hook.
+ */
+declare function useWebVitals(options?: UseWebVitalsOptions): WebVitalsControls;
+//#endregion
+export { UseWebVitalsOptions, WEB_VITALS_THRESHOLDS, WebVitalMetric, WebVitalName, WebVitalRating, WebVitalsControls, WebVitalsDocumentEvent, WebVitalsDocumentHost, WebVitalsRecord, rateMetric, useWebVitals };

package/dist/use-web-vitals.mjs

@@ -0,0 +1,248 @@
+import { tryOnScopeDispose } from "./scope.mjs";
+import { usePerformanceObserver } from "./use-performance-observer.mjs";
+import { computed, hasInjectionContext, readonly, shallowRef, toValue, watch, watchPostEffect } from "vue";
+//#region src/use-web-vitals.ts
+/**
+* Standard `[good, poor]` thresholds: values up to the first bound are
+* "good", values above the second are "poor". Times are milliseconds; CLS is
+* unitless.
+*/
+const WEB_VITALS_THRESHOLDS = {
+	LCP: [2500, 4e3],
+	CLS: [.1, .25],
+	INP: [200, 500],
+	FCP: [1800, 3e3],
+	TTFB: [800, 1800]
+};
+/**
+* Rate a metric value with {@link WEB_VITALS_THRESHOLDS}.
+*
+* @param name Metric name.
+* @param value Metric value (milliseconds, or the unitless CLS score).
+* @returns The rating bucket.
+*/
+function rateMetric(name, value) {
+	if (Number.isNaN(value)) throw new RangeError(`[VIZE_COMPOSE_WEB_VITALS_INVALID_VALUE] ${name} value must be a number`);
+	const [good, poor] = WEB_VITALS_THRESHOLDS[name];
+	if (value > poor) return "poor";
+	return value > good ? "needs-improvement" : "good";
+}
+const MAX_INTERACTIONS = 10;
+function browserDocument() {
+	return typeof window === "undefined" ? void 0 : window.document;
+}
+/**
+* Measure LCP, CLS, INP, FCP and TTFB locally, without dependencies.
+*
+* - LCP: last candidate before the first input or hidden page.
+* - CLS: largest session window (shifts < 1 s apart, window ≤ 5 s),
+*   ignoring shifts after recent input.
+* - INP: per-interaction maximum duration; the highest after ignoring one
+*   per 50 interactions (a p98 approximation over the 10 longest). The
+*   interaction count only includes interactions above `durationThreshold`.
+* - FCP: `first-contentful-paint` before the page was first hidden.
+* - TTFB: navigation `responseStart - activationStart`, clamped at 0.
+*
+* Values are not adjusted for prerender activation except TTFB. Observers
+* and listeners are released when the owning reactive scope stops; outside
+* a scope the caller owns `stop()`.
+*
+* Server rendering: nothing is observed, `metrics` is `{}` and `supported`
+* is false.
+*
+* @example
+* ```ts
+* const { metrics, onMetric } = useWebVitals();
+* onMetric((metric) => navigator.sendBeacon("/vitals", JSON.stringify(metric)));
+* ```
+*
+* @param options Hosts and reporting policy.
+* @default options {}
+* @returns Reactive metrics and a report hook.
+*/
+function useWebVitals(options = {}) {
+	const metrics = shallowRef({});
+	const reported = /* @__PURE__ */ new Map();
+	const listeners = /* @__PURE__ */ new Set();
+	const reportAllChanges = options.reportAllChanges ?? false;
+	const observerOptions = options.PerformanceObserver === void 0 ? { buffered: true } : {
+		buffered: true,
+		PerformanceObserver: options.PerformanceObserver
+	};
+	let pageId;
+	const hydrated = shallowRef(!hasInjectionContext());
+	if (!hydrated.value) watchPostEffect(() => {
+		hydrated.value = true;
+	});
+	const resolveDocument = () => !hydrated.value ? void 0 : options.document === void 0 ? browserDocument() : toValue(options.document) ?? void 0;
+	const report = (name) => {
+		const metric = metrics.value[name];
+		if (!metric || reported.get(name) === metric.value) return;
+		reported.set(name, metric.value);
+		for (const listener of listeners) listener(metric);
+	};
+	const set = (name, value, entries) => {
+		pageId ??= `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+		const metric = {
+			name,
+			value,
+			rating: rateMetric(name, value),
+			delta: value - (reported.get(name) ?? 0),
+			entries,
+			id: `${name}-${pageId}`
+		};
+		metrics.value = {
+			...metrics.value,
+			[name]: metric
+		};
+		if (reportAllChanges) report(name);
+	};
+	let firstHiddenTime = resolveDocument()?.visibilityState === "hidden" ? 0 : Infinity;
+	let lcpFinal = false;
+	const lcp = usePerformanceObserver("largest-contentful-paint", (entries) => {
+		if (lcpFinal) return;
+		const last = entries.filter((entry) => entry.startTime < firstHiddenTime).at(-1);
+		if (last) set("LCP", Math.max(last.startTime, 0), 1);
+	}, observerOptions);
+	let sessionValue = 0;
+	let session = [];
+	const handleShifts = (entries) => {
+		for (const entry of entries) {
+			if (entry.hadRecentInput) continue;
+			const first = session[0];
+			const last = session.at(-1);
+			if (first && last && entry.startTime - last.startTime < 1e3 && entry.startTime - first.startTime < 5e3) {
+				sessionValue += entry.value;
+				session.push(entry);
+			} else {
+				sessionValue = entry.value;
+				session = [entry];
+			}
+			if (sessionValue > (metrics.value.CLS?.value ?? 0)) set("CLS", sessionValue, session.length);
+		}
+	};
+	const cls = usePerformanceObserver("layout-shift", handleShifts, observerOptions);
+	const longest = [];
+	let interactionCount = 0;
+	let previousInteractionId = 0;
+	const handleEvents = (entries) => {
+		let changed = false;
+		for (const entry of entries) {
+			const id = entry.interactionId ?? 0;
+			if (id === 0) continue;
+			const existing = longest.find((interaction) => interaction.id === id);
+			if (existing) {
+				existing.entries += 1;
+				existing.duration = Math.max(existing.duration, entry.duration);
+			} else {
+				if (id !== previousInteractionId) interactionCount += 1;
+				longest.push({
+					id,
+					duration: entry.duration,
+					entries: 1
+				});
+			}
+			previousInteractionId = id;
+			changed = true;
+		}
+		if (!changed) return;
+		longest.sort((left, right) => right.duration - left.duration);
+		longest.splice(MAX_INTERACTIONS);
+		const candidate = longest[Math.min(longest.length - 1, Math.floor(interactionCount / 50))] ?? longest[0];
+		if (candidate) set("INP", candidate.duration, candidate.entries);
+	};
+	const inp = usePerformanceObserver(["event", "first-input"], handleEvents, {
+		...observerOptions,
+		durationThreshold: options.durationThreshold ?? 40
+	});
+	const fcp = usePerformanceObserver("paint", (entries) => {
+		const entry = entries.find((paint) => paint.name === "first-contentful-paint" && paint.startTime < firstHiddenTime);
+		if (!entry) return;
+		fcp.stop();
+		set("FCP", Math.max(entry.startTime, 0), 1);
+		report("FCP");
+	}, observerOptions);
+	const ttfb = usePerformanceObserver("navigation", (entries) => {
+		const entry = entries[0];
+		if (!entry) return;
+		ttfb.stop();
+		set("TTFB", Math.max(entry.responseStart - (entry.activationStart ?? 0), 0), 1);
+		report("TTFB");
+	}, observerOptions);
+	const finalizeLcp = () => {
+		if (lcpFinal) return;
+		const last = lcp.takeRecords().filter((entry) => entry.startTime < firstHiddenTime).at(-1);
+		if (last) set("LCP", Math.max(last.startTime, 0), 1);
+		lcpFinal = true;
+		lcp.stop();
+		report("LCP");
+	};
+	const onHidden = (timeStamp) => {
+		firstHiddenTime = Math.min(firstHiddenTime, timeStamp);
+		finalizeLcp();
+		handleShifts(cls.takeRecords());
+		handleEvents(inp.takeRecords());
+		if (!metrics.value.CLS && cls.supported.value) set("CLS", 0, 0);
+		report("CLS");
+		report("INP");
+	};
+	const stopDocument = watch(resolveDocument, (document, _previous, onCleanup) => {
+		if (!document) return;
+		const onVisibility = (event) => {
+			if (document.visibilityState === "hidden") onHidden(event.timeStamp);
+		};
+		const onInput = () => {
+			finalizeLcp();
+			removeInput();
+		};
+		const removeInput = () => {
+			document.removeEventListener("keydown", onInput, { capture: true });
+			document.removeEventListener("click", onInput, { capture: true });
+		};
+		document.addEventListener("visibilitychange", onVisibility);
+		if (!lcpFinal) {
+			document.addEventListener("keydown", onInput, { capture: true });
+			document.addEventListener("click", onInput, { capture: true });
+		}
+		onCleanup(() => {
+			document.removeEventListener("visibilitychange", onVisibility);
+			removeInput();
+		});
+	}, {
+		immediate: true,
+		flush: "sync"
+	});
+	const stop = () => {
+		stopDocument();
+		for (const observer of [
+			lcp,
+			cls,
+			inp,
+			fcp,
+			ttfb
+		]) observer.stop();
+	};
+	tryOnScopeDispose(() => {
+		stop();
+		listeners.clear();
+	});
+	return {
+		supported: computed(() => hydrated.value && [
+			lcp,
+			cls,
+			inp,
+			fcp,
+			ttfb
+		].some((observer) => observer.supported.value)),
+		metrics: readonly(metrics),
+		onMetric: (listener) => {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		stop
+	};
+}
+//#endregion
+export { WEB_VITALS_THRESHOLDS, rateMetric, useWebVitals };