@vizejs/composable 0.426.3 → 0.428.0

package/dist/math.d.mts

@@ -0,0 +1,96 @@
+import { ComputedRef, MaybeRefOrGetter, Ref, WritableComputedRef } from "vue";
+
+//#region src/math.d.ts
+/**
+ * Number kept inside `[min, max]`.
+ *
+ * A writable source (a number or a writable ref) yields a writable ref whose
+ * reads and writes are clamped; writes go through to the source ref. A
+ * getter or computed source yields a readonly computed. Bounds are reactive.
+ * Pure derived state: SSR-safe and nothing to dispose.
+ *
+ * @example
+ * ```ts
+ * const volume = useClamp(50, 0, 100);
+ * volume.value = 150; // 100
+ * const progress = useClamp(() => loaded.value / total.value, 0, 1);
+ * ```
+ *
+ * @param value Source number, writable ref, or getter.
+ * @param min Reactive inclusive lower bound.
+ * @param max Reactive inclusive upper bound.
+ * @throws `RangeError` tagged `VIZE_COMPOSE_MATH_INVALID_RANGE` on read or
+ * write when `min > max`.
+ * @returns Writable clamped ref, or a readonly computed for getters.
+ */
+declare function useClamp(value: (() => number) | ComputedRef<number>, min: MaybeRefOrGetter<number>, max: MaybeRefOrGetter<number>): ComputedRef<number>;
+declare function useClamp(value: number | Ref<number>, min: MaybeRefOrGetter<number>, max: MaybeRefOrGetter<number>): WritableComputedRef<number>;
+/** Rounding strategy used by {@link useRound}. */
+type RoundingMethod = "round" | "floor" | "ceil" | "trunc";
+/** Options for {@link useRound}. */
+interface UseRoundOptions {
+  /**
+   * Decimal places to keep; negative values round to tens, hundreds, …
+   * Reactive.
+   *
+   * @default 0
+   */
+  readonly precision?: MaybeRefOrGetter<number>;
+  /**
+   * Rounding strategy.
+   *
+   * @default "round"
+   */
+  readonly method?: RoundingMethod;
+}
+/**
+ * Reactive rounding with decimal precision.
+ *
+ * Uses exponent shifting instead of multiplying by powers of ten, so values
+ * such as `1.005` round to `1.01` at two decimals. Pure derived state.
+ *
+ * @example
+ * ```ts
+ * const price = useRound(rawPrice, { precision: 2 });
+ * ```
+ *
+ * @param value Reactive number.
+ * @param options Precision and method.
+ * @default options {}
+ * @throws `RangeError` tagged `VIZE_COMPOSE_MATH_INVALID_PRECISION` on read
+ * when the precision is not an integer.
+ * @returns Computed rounded number.
+ */
+declare function useRound(value: MaybeRefOrGetter<number>, options?: UseRoundOptions): ComputedRef<number>;
+/** A `[start, end]` numeric interval. */
+type ProjectionDomain = readonly [start: number, end: number];
+/** Options for {@link useProjection}. */
+interface UseProjectionOptions {
+  /**
+   * Clamp the result into the target domain.
+   *
+   * @default false
+   */
+  readonly clamp?: boolean;
+}
+/**
+ * Linearly map a value from one domain to another.
+ *
+ * Domains are reactive tuples and may be reversed (`[100, 0]`). A degenerate
+ * source domain maps everything to the target start. Pure derived state.
+ *
+ * @example
+ * ```ts
+ * const percent = useProjection(scrollY, () => [0, maxScroll.value], [0, 100], { clamp: true });
+ * ```
+ *
+ * @param value Reactive number in the source domain.
+ * @param from Reactive source domain.
+ * @param to Reactive target domain.
+ * @param options Clamping.
+ * @default options {}
+ * @returns Computed projected number.
+ */
+declare function useProjection(value: MaybeRefOrGetter<number>, from: MaybeRefOrGetter<ProjectionDomain>, to: MaybeRefOrGetter<ProjectionDomain>, options?: UseProjectionOptions): ComputedRef<number>;
+//#endregion
+export { ProjectionDomain, RoundingMethod, UseProjectionOptions, UseRoundOptions, useClamp, useProjection, useRound };

package/dist/math.mjs

@@ -0,0 +1,84 @@
+import { computed, isReadonly, isRef, shallowRef, toValue } from "vue";
+//#region src/math.ts
+function clampNumber(value, min, max) {
+	if (min > max) throw new RangeError(`[VIZE_COMPOSE_MATH_INVALID_RANGE] min must not exceed max; received [${String(min)}, ${String(max)}]`);
+	return Math.min(max, Math.max(min, value));
+}
+function isWritableRef(value) {
+	return isRef(value) && !isReadonly(value);
+}
+function useClamp(value, min, max) {
+	let source;
+	if (isWritableRef(value)) source = value;
+	else if (typeof value === "number") source = shallowRef(value);
+	else return computed(() => clampNumber(toValue(value), toValue(min), toValue(max)));
+	return computed({
+		get: () => clampNumber(source.value, toValue(min), toValue(max)),
+		set: (next) => {
+			source.value = clampNumber(next, toValue(min), toValue(max));
+		}
+	});
+}
+/** Multiply by `10 ** places` exactly, by editing the decimal exponent. */
+function shiftExponent(value, places) {
+	const [mantissa, exponent = "0"] = String(value).split("e");
+	return Number(`${mantissa}e${Number(exponent) + places}`);
+}
+/**
+* Reactive rounding with decimal precision.
+*
+* Uses exponent shifting instead of multiplying by powers of ten, so values
+* such as `1.005` round to `1.01` at two decimals. Pure derived state.
+*
+* @example
+* ```ts
+* const price = useRound(rawPrice, { precision: 2 });
+* ```
+*
+* @param value Reactive number.
+* @param options Precision and method.
+* @default options {}
+* @throws `RangeError` tagged `VIZE_COMPOSE_MATH_INVALID_PRECISION` on read
+* when the precision is not an integer.
+* @returns Computed rounded number.
+*/
+function useRound(value, options = {}) {
+	return computed(() => {
+		const precision = toValue(options.precision ?? 0);
+		if (!Number.isInteger(precision)) throw new RangeError(`[VIZE_COMPOSE_MATH_INVALID_PRECISION] precision must be an integer; received ${String(precision)}`);
+		const number = toValue(value);
+		if (!Number.isFinite(number)) return number;
+		const round = Math[options.method ?? "round"];
+		return shiftExponent(round(shiftExponent(number, precision)), -precision);
+	});
+}
+/**
+* Linearly map a value from one domain to another.
+*
+* Domains are reactive tuples and may be reversed (`[100, 0]`). A degenerate
+* source domain maps everything to the target start. Pure derived state.
+*
+* @example
+* ```ts
+* const percent = useProjection(scrollY, () => [0, maxScroll.value], [0, 100], { clamp: true });
+* ```
+*
+* @param value Reactive number in the source domain.
+* @param from Reactive source domain.
+* @param to Reactive target domain.
+* @param options Clamping.
+* @default options {}
+* @returns Computed projected number.
+*/
+function useProjection(value, from, to, options = {}) {
+	return computed(() => {
+		const [fromStart, fromEnd] = toValue(from);
+		const [toStart, toEnd] = toValue(to);
+		const span = fromEnd - fromStart;
+		const projected = toStart + (span === 0 ? 0 : (toValue(value) - fromStart) / span) * (toEnd - toStart);
+		if (!(options.clamp ?? false)) return projected;
+		return Math.min(Math.max(projected, Math.min(toStart, toEnd)), Math.max(toStart, toEnd));
+	});
+}
+//#endregion
+export { useClamp, useProjection, useRound };

package/dist/media-query.d.mts

@@ -25,7 +25,9 @@ interface UseMediaQueryOptions {
  * Evaluate a reactive media query without requiring browser globals.
  *
  * During server rendering (or whenever no capability host resolves) the ref
- * holds the configured server value and no subscription is created. The
+ * holds the configured server value and no subscription is created. Inside a
+ * component the first match is read after mounting, so hydration renders the
+ * server value first and never mismatches. The
  * change subscription follows the reactive query and host: each
  * re-evaluation removes the previous listener, and the final listener is
  * removed when the owning reactive scope stops. Call inside an active scope

package/dist/media-query.mjs

@@ -1,10 +1,12 @@
-import { computed, readonly, ref, toValue, watchEffect } from "vue";
+import { computed, hasInjectionContext, readonly, ref, toValue, watchEffect } from "vue";
 //#region src/media-query.ts
 /**
 * Evaluate a reactive media query without requiring browser globals.
 *
 * During server rendering (or whenever no capability host resolves) the ref
-* holds the configured server value and no subscription is created. The
+* holds the configured server value and no subscription is created. Inside a
+* component the first match is read after mounting, so hydration renders the
+* server value first and never mismatches. The
 * change subscription follows the reactive query and host: each
 * re-evaluation removes the previous listener, and the final listener is
 * removed when the owning reactive scope stops. Call inside an active scope
@@ -31,7 +33,7 @@ function useMediaQuery(query, options = {}) {
 		update();
 		media.addEventListener("change", update);
 		onCleanup(() => media.removeEventListener("change", update));
-	});
+	}, { flush: hasInjectionContext() ? "post" : "pre" });
 	return readonly(matches);
 }
 /**

package/dist/mouse-in-element.d.mts

@@ -0,0 +1,49 @@
+import { n as MaybeElementTarget } from "./element-target-Crpxl4D9.mjs";
+import { MouseControls, UseMouseOptions } from "./mouse.mjs";
+import { Ref } from "vue";
+
+//#region src/mouse-in-element.d.ts
+/** Options for {@link useMouseInElement}. */
+interface UseMouseInElementOptions extends Omit<UseMouseOptions, "type"> {
+  /**
+   * Keep updating element-relative coordinates while the pointer is outside
+   * the element. When `false`, they freeze at the last inside position.
+   *
+   * @default true
+   */
+  readonly handleOutside?: boolean;
+}
+/** Reactive state returned by {@link useMouseInElement}. */
+interface MouseInElementControls extends MouseControls {
+  /** Pointer position relative to the element's left edge. */
+  readonly elementX: Readonly<Ref<number>>;
+  /** Pointer position relative to the element's top edge. */
+  readonly elementY: Readonly<Ref<number>>;
+  /** Element left edge in viewport coordinates at the latest update. */
+  readonly elementPositionX: Readonly<Ref<number>>;
+  /** Element top edge in viewport coordinates at the latest update. */
+  readonly elementPositionY: Readonly<Ref<number>>;
+  /** Element width at the latest update. */
+  readonly elementWidth: Readonly<Ref<number>>;
+  /** Element height at the latest update. */
+  readonly elementHeight: Readonly<Ref<number>>;
+  /** Whether the pointer is outside the element. `true` during server rendering. */
+  readonly isOutside: Readonly<Ref<boolean>>;
+  /** Stop updating element-relative state. Idempotent. */
+  readonly stop: () => void;
+}
+/**
+ * Track the pointer position relative to an element.
+ *
+ * Built on {@link useMouse} in client coordinates: every move re-reads the
+ * element rectangle, so transforms and scrolling are reflected. Server
+ * renders report zero geometry and `isOutside: true`.
+ *
+ * @param target Reactive element target.
+ * @param options Outside handling plus {@link useMouse} options.
+ * @default options {}
+ * @returns Pointer, element-relative, and geometry refs.
+ */
+declare function useMouseInElement(target: MaybeElementTarget, options?: UseMouseInElementOptions): MouseInElementControls;
+//#endregion
+export { MouseInElementControls, UseMouseInElementOptions, useMouseInElement };

package/dist/mouse-in-element.mjs

@@ -0,0 +1,66 @@
+import { tryOnScopeDispose } from "./scope.mjs";
+import { resolveElement } from "./element-target.mjs";
+import { useMouse } from "./mouse.mjs";
+import { computed, readonly, ref, watch } from "vue";
+//#region src/mouse-in-element.ts
+/**
+* Track the pointer position relative to an element.
+*
+* Built on {@link useMouse} in client coordinates: every move re-reads the
+* element rectangle, so transforms and scrolling are reflected. Server
+* renders report zero geometry and `isOutside: true`.
+*
+* @param target Reactive element target.
+* @param options Outside handling plus {@link useMouse} options.
+* @default options {}
+* @returns Pointer, element-relative, and geometry refs.
+*/
+function useMouseInElement(target, options = {}) {
+	const handleOutside = options.handleOutside ?? true;
+	const mouse = useMouse({
+		...options,
+		type: "client"
+	});
+	const elementX = ref(0);
+	const elementY = ref(0);
+	const elementPositionX = ref(0);
+	const elementPositionY = ref(0);
+	const elementWidth = ref(0);
+	const elementHeight = ref(0);
+	const isOutside = ref(true);
+	const stopWatch = watch([
+		computed(() => resolveElement(target)),
+		mouse.x,
+		mouse.y,
+		mouse.sourceType
+	], ([currentElement, x, y, source]) => {
+		if (!currentElement || source === null) return;
+		const rect = currentElement.getBoundingClientRect();
+		elementPositionX.value = rect.left;
+		elementPositionY.value = rect.top;
+		elementWidth.value = rect.width;
+		elementHeight.value = rect.height;
+		const relativeX = x - rect.left;
+		const relativeY = y - rect.top;
+		isOutside.value = rect.width === 0 || rect.height === 0 || relativeX < 0 || relativeY < 0 || relativeX > rect.width || relativeY > rect.height;
+		if (handleOutside || !isOutside.value) {
+			elementX.value = relativeX;
+			elementY.value = relativeY;
+		}
+	}, { flush: "sync" });
+	const stop = () => stopWatch.stop();
+	tryOnScopeDispose(stop);
+	return {
+		...mouse,
+		elementX: readonly(elementX),
+		elementY: readonly(elementY),
+		elementPositionX: readonly(elementPositionX),
+		elementPositionY: readonly(elementPositionY),
+		elementWidth: readonly(elementWidth),
+		elementHeight: readonly(elementHeight),
+		isOutside: readonly(isOutside),
+		stop
+	};
+}
+//#endregion
+export { useMouseInElement };

package/dist/mouse.d.mts

@@ -0,0 +1,77 @@
+import { MaybeRefOrGetter, Ref } from "vue";
+
+//#region src/mouse.d.ts
+/** Coordinate space reported by {@link useMouse}. */
+type MouseCoordinateType = "page" | "client" | "screen" | "movement";
+/** Input device that produced the latest coordinates. */
+type MouseSourceType = "mouse" | "touch";
+/** Two-dimensional coordinate in CSS pixels. */
+interface Point {
+  /** Horizontal coordinate. */
+  readonly x: number;
+  /** Vertical coordinate. */
+  readonly y: number;
+}
+/**
+ * Custom coordinate extractor. Return `null` to ignore an event.
+ *
+ * Receives the mouse event, or the first touch point for touch input.
+ */
+type MouseCoordinateExtractor = (input: MouseEvent | Touch) => Point | null;
+/** Options for {@link useMouse}. */
+interface UseMouseOptions {
+  /**
+   * Coordinate space, or a custom extractor.
+   *
+   * @default "page"
+   */
+  readonly type?: MouseCoordinateType | MouseCoordinateExtractor;
+  /**
+   * Event target to listen on.
+   *
+   * @default globalThis.window when available
+   */
+  readonly target?: MaybeRefOrGetter<EventTarget | null | undefined>;
+  /**
+   * Track touch input in addition to mouse input.
+   *
+   * @default true
+   */
+  readonly touch?: boolean;
+  /**
+   * Restore `initialValue` when a touch ends.
+   *
+   * @default false
+   */
+  readonly resetOnTouchEnds?: boolean;
+  /**
+   * Coordinates exposed before any input and during server rendering.
+   *
+   * @default { x: 0, y: 0 }
+   */
+  readonly initialValue?: Point;
+}
+/** Reactive pointer position returned by {@link useMouse}. */
+interface MouseControls {
+  /** Latest horizontal coordinate. */
+  readonly x: Readonly<Ref<number>>;
+  /** Latest vertical coordinate. */
+  readonly y: Readonly<Ref<number>>;
+  /** Device that produced the latest coordinates; `null` before any input. */
+  readonly sourceType: Readonly<Ref<MouseSourceType | null>>;
+}
+/**
+ * Track the mouse (and optionally touch) position.
+ *
+ * Listens passively for `mousemove`, `dragover`, and touch events on the
+ * target; listeners follow the reactive target and are removed with the
+ * owning reactive scope. Server renders expose `initialValue` with a `null`
+ * source type.
+ *
+ * @param options Coordinate space, target, touch handling, and initial value.
+ * @default options {}
+ * @returns Reactive coordinates and input source.
+ */
+declare function useMouse(options?: UseMouseOptions): MouseControls;
+//#endregion
+export { MouseControls, MouseCoordinateExtractor, MouseCoordinateType, MouseSourceType, Point, UseMouseOptions, useMouse };

package/dist/mouse.mjs

@@ -0,0 +1,100 @@
+import { tryOnScopeDispose } from "./scope.mjs";
+import { readonly, ref, toValue, watch } from "vue";
+//#region src/mouse.ts
+/**
+* Track the mouse (and optionally touch) position.
+*
+* Listens passively for `mousemove`, `dragover`, and touch events on the
+* target; listeners follow the reactive target and are removed with the
+* owning reactive scope. Server renders expose `initialValue` with a `null`
+* source type.
+*
+* @param options Coordinate space, target, touch handling, and initial value.
+* @default options {}
+* @returns Reactive coordinates and input source.
+*/
+function useMouse(options = {}) {
+	const { touch = true, resetOnTouchEnds = false } = options;
+	const initial = options.initialValue ?? {
+		x: 0,
+		y: 0
+	};
+	const extract = extractorFor(options.type ?? "page");
+	const x = ref(initial.x);
+	const y = ref(initial.y);
+	const sourceType = ref(null);
+	const apply = (point, source) => {
+		if (!point) return;
+		x.value = point.x;
+		y.value = point.y;
+		sourceType.value = source;
+	};
+	const onMouse = (event) => {
+		if (isMouseEvent(event)) apply(extract(event), "mouse");
+	};
+	const onTouch = (event) => {
+		if (!isTouchEvent(event)) return;
+		const first = event.touches[0];
+		if (first) apply(extract(first), "touch");
+	};
+	const onTouchEnd = () => {
+		x.value = initial.x;
+		y.value = initial.y;
+	};
+	const stop = watch(() => options.target === void 0 ? browserWindow() : toValue(options.target), (target, _previous, onCleanup) => {
+		if (!target) return;
+		const listenerOptions = { passive: true };
+		target.addEventListener("mousemove", onMouse, listenerOptions);
+		target.addEventListener("dragover", onMouse, listenerOptions);
+		if (touch) {
+			target.addEventListener("touchstart", onTouch, listenerOptions);
+			target.addEventListener("touchmove", onTouch, listenerOptions);
+			if (resetOnTouchEnds) target.addEventListener("touchend", onTouchEnd, listenerOptions);
+		}
+		onCleanup(() => {
+			target.removeEventListener("mousemove", onMouse);
+			target.removeEventListener("dragover", onMouse);
+			target.removeEventListener("touchstart", onTouch);
+			target.removeEventListener("touchmove", onTouch);
+			target.removeEventListener("touchend", onTouchEnd);
+		});
+	}, { immediate: true });
+	tryOnScopeDispose(() => stop.stop());
+	return {
+		x: readonly(x),
+		y: readonly(y),
+		sourceType: readonly(sourceType)
+	};
+}
+function extractorFor(type) {
+	if (typeof type === "function") return type;
+	switch (type) {
+		case "page": return (input) => ({
+			x: input.pageX,
+			y: input.pageY
+		});
+		case "client": return (input) => ({
+			x: input.clientX,
+			y: input.clientY
+		});
+		case "screen": return (input) => ({
+			x: input.screenX,
+			y: input.screenY
+		});
+		case "movement": return (input) => "movementX" in input ? {
+			x: input.movementX,
+			y: input.movementY
+		} : null;
+	}
+}
+function isMouseEvent(event) {
+	return "clientX" in event && "button" in event;
+}
+function isTouchEvent(event) {
+	return "touches" in event;
+}
+function browserWindow() {
+	return typeof window !== "undefined" ? window : void 0;
+}
+//#endregion
+export { useMouse };

package/dist/mutation-observer.d.mts

@@ -0,0 +1,98 @@
+import { r as MaybeElementTargets } from "./element-target-Crpxl4D9.mjs";
+import { MaybeRefOrGetter, Ref } from "vue";
+
+//#region src/mutation-observer.d.ts
+/** Runtime capability that supplies the `MutationObserver` constructor. */
+interface MutationObserverHost {
+  /** `MutationObserver` constructor, absent in unsupported runtimes. */
+  readonly MutationObserver?: new (callback: MutationCallback) => MutationObserver;
+}
+/** Options for {@link useMutationObserver}. */
+interface UseMutationObserverOptions {
+  /**
+   * Observe attribute changes.
+   *
+   * @default false (implicitly `true` when `attributeFilter` or `attributeOldValue` is set)
+   */
+  readonly attributes?: boolean;
+  /**
+   * Observe child-list changes.
+   *
+   * @default false
+   */
+  readonly childList?: boolean;
+  /**
+   * Extend observation to the whole subtree.
+   *
+   * @default false
+   */
+  readonly subtree?: boolean;
+  /**
+   * Observe text-content changes.
+   *
+   * @default false (implicitly `true` when `characterDataOldValue` is set)
+   */
+  readonly characterData?: boolean;
+  /**
+   * Record the previous attribute value.
+   *
+   * @default false
+   */
+  readonly attributeOldValue?: boolean;
+  /**
+   * Record the previous text value.
+   *
+   * @default false
+   */
+  readonly characterDataOldValue?: boolean;
+  /**
+   * Restrict attribute observation to these local names.
+   *
+   * @default undefined (all attributes)
+   */
+  readonly attributeFilter?: readonly string[];
+  /**
+   * Reactive constructor capability for alternate runtimes and tests.
+   *
+   * @default globalThis when it provides `MutationObserver`
+   */
+  readonly host?: MaybeRefOrGetter<MutationObserverHost | null | undefined>;
+  /**
+   * Target resolution timing. `"post"` observes template refs after mount.
+   *
+   * @default "post"
+   */
+  readonly flush?: "pre" | "post" | "sync";
+}
+/** Controls returned by {@link useMutationObserver}. */
+interface MutationObserverControls {
+  /** Whether the host provides `MutationObserver`. `false` during server rendering. */
+  readonly isSupported: Readonly<Ref<boolean>>;
+  /**
+   * Drain the records queued by the active observer without invoking the
+   * callback.
+   *
+   * @returns Pending records, or an empty list without an active observer.
+   */
+  readonly takeRecords: () => MutationRecord[];
+  /** Disconnect permanently. Idempotent. */
+  readonly stop: () => void;
+}
+/**
+ * Observe DOM mutations of reactive elements.
+ *
+ * The observer is recreated when the resolved targets or host change and is
+ * disconnected when the owning reactive scope stops. At least one of
+ * `attributes`, `childList`, or `characterData` must be enabled (directly or
+ * implicitly), mirroring the platform contract. No work happens during
+ * server rendering.
+ *
+ * @param targets Reactive element target or list of targets.
+ * @param callback Native `MutationObserver` callback.
+ * @param options Observation filter, capability, and timing.
+ * @default options {}
+ * @returns Support flag, record draining, and stop control.
+ */
+declare function useMutationObserver(targets: MaybeElementTargets, callback: MutationCallback, options?: UseMutationObserverOptions): MutationObserverControls;
+//#endregion
+export { MutationObserverControls, MutationObserverHost, UseMutationObserverOptions, useMutationObserver };

package/dist/mutation-observer.mjs

@@ -0,0 +1,69 @@
+import { tryOnScopeDispose } from "./scope.mjs";
+import { resolveElements } from "./element-target.mjs";
+import { hasInjectionContext, onMounted, readonly, ref, shallowRef, toValue, watch } from "vue";
+//#region src/mutation-observer.ts
+/**
+* Observe DOM mutations of reactive elements.
+*
+* The observer is recreated when the resolved targets or host change and is
+* disconnected when the owning reactive scope stops. At least one of
+* `attributes`, `childList`, or `characterData` must be enabled (directly or
+* implicitly), mirroring the platform contract. No work happens during
+* server rendering.
+*
+* @param targets Reactive element target or list of targets.
+* @param callback Native `MutationObserver` callback.
+* @param options Observation filter, capability, and timing.
+* @default options {}
+* @returns Support flag, record draining, and stop control.
+*/
+function useMutationObserver(targets, callback, options = {}) {
+	const isSupported = ref(false);
+	const mounted = shallowRef(!hasInjectionContext());
+	if (!mounted.value) onMounted(() => {
+		mounted.value = true;
+	});
+	const init = observerInit(options);
+	let active;
+	let stopWatch = watch(() => [!mounted.value ? void 0 : options.host === void 0 ? browserMutationObserverHost() : toValue(options.host), resolveElements(targets)], ([host, elements], _previous, onCleanup) => {
+		const Observer = host?.MutationObserver;
+		isSupported.value = Observer !== void 0;
+		if (!Observer || elements.length === 0) return;
+		const observer = new Observer(callback);
+		for (const element of elements) observer.observe(element, init);
+		active = observer;
+		onCleanup(() => {
+			observer.disconnect();
+			if (active === observer) active = void 0;
+		});
+	}, {
+		immediate: true,
+		flush: options.flush ?? "post"
+	});
+	const stop = () => {
+		stopWatch?.stop();
+		stopWatch = void 0;
+	};
+	tryOnScopeDispose(stop);
+	return {
+		isSupported: readonly(isSupported),
+		takeRecords: () => active?.takeRecords() ?? [],
+		stop
+	};
+}
+function observerInit(options) {
+	const init = {};
+	if (options.attributes !== void 0) init.attributes = options.attributes;
+	if (options.childList !== void 0) init.childList = options.childList;
+	if (options.subtree !== void 0) init.subtree = options.subtree;
+	if (options.characterData !== void 0) init.characterData = options.characterData;
+	if (options.attributeOldValue !== void 0) init.attributeOldValue = options.attributeOldValue;
+	if (options.characterDataOldValue !== void 0) init.characterDataOldValue = options.characterDataOldValue;
+	if (options.attributeFilter !== void 0) init.attributeFilter = [...options.attributeFilter];
+	return init;
+}
+function browserMutationObserverHost() {
+	return typeof MutationObserver === "function" ? globalThis : void 0;
+}
+//#endregion
+export { useMutationObserver };