@stacksjs/composables 0.70.88 → 0.70.91

package/dist/useIntervalFn.js

@@ -0,0 +1,24 @@
+import { onUnmounted, ref } from "@stacksjs/stx";
+export function useIntervalFn(cb, interval = 1000, options = {}) {
+  const { immediate = !0 } = options, isActive = ref(!1);
+  let intervalId = null;
+  function pause() {
+    if (intervalId !== null) {
+      clearInterval(intervalId);
+      intervalId = null;
+    }
+    isActive.value = !1;
+  }
+  function resume() {
+    if (intervalId !== null)
+      return;
+    isActive.value = !0;
+    intervalId = setInterval(cb, interval);
+  }
+  if (immediate)
+    resume();
+  try {
+    onUnmounted(pause);
+  } catch {}
+  return { pause, resume, isActive };
+}

package/dist/useKeyModifier.d.ts

@@ -0,0 +1,6 @@
+import type { Ref } from '@stacksjs/stx';
+/**
+ * Reactive key modifier state (e.g., Shift, Control, Alt, Meta).
+ */
+export declare function useKeyModifier(modifier: KeyModifier): Ref<boolean>;
+export type KeyModifier = 'Alt' | 'AltGraph' | 'CapsLock' | 'Control' | 'Fn' | 'FnLock' | 'Meta' | 'NumLock' | 'ScrollLock' | 'Shift' | 'Symbol' | 'SymbolLock';

package/dist/useKeyModifier.js

@@ -0,0 +1,22 @@
+import { onUnmounted, ref } from "@stacksjs/stx";
+export function useKeyModifier(modifier) {
+  const state = ref(!1);
+  if (typeof window > "u")
+    return state;
+  const handler = (e) => {
+    state.value = e.getModifierState(modifier);
+  };
+  window.addEventListener("keydown", handler, { passive: !0 });
+  window.addEventListener("keyup", handler, { passive: !0 });
+  window.addEventListener("mousedown", handler, { passive: !0 });
+  window.addEventListener("mouseup", handler, { passive: !0 });
+  try {
+    onUnmounted(() => {
+      window.removeEventListener("keydown", handler);
+      window.removeEventListener("keyup", handler);
+      window.removeEventListener("mousedown", handler);
+      window.removeEventListener("mouseup", handler);
+    });
+  } catch {}
+  return state;
+}

package/dist/useLastChanged.d.ts

@@ -0,0 +1,11 @@
+import type { Ref } from '@stacksjs/stx';
+/**
+ * Track the timestamp of when a ref last changed.
+ *
+ * @param source - The reactive source to watch
+ * @param options - Optional initial timestamp value
+ */
+export declare function useLastChanged(source: Ref<any>, options?: UseLastChangedOptions): Ref<number | null>;
+export declare interface UseLastChangedOptions {
+  initialValue?: number | null
+}

package/dist/useLastChanged.js

@@ -0,0 +1,8 @@
+import { ref, watch } from "@stacksjs/stx";
+export function useLastChanged(source, options = {}) {
+  const { initialValue = null } = options, lastChanged = ref(initialValue);
+  watch(source, () => {
+    lastChanged.value = Date.now();
+  });
+  return lastChanged;
+}

package/dist/useLocalStorage.d.ts

@@ -0,0 +1,17 @@
+import type { Ref } from '@stacksjs/stx';
+/**
+ * Reactive localStorage wrapper.
+ * Convenience composable that delegates to useStorage with localStorage.
+ *
+ * @param key - Storage key
+ * @param defaultValue - Default value when key doesn't exist
+ * @param options - Serializer options
+ */
+export declare function useLocalStorage<T>(key: string, defaultValue: T, options?: UseLocalStorageOptions<T>): Ref<T>;
+declare interface UseLocalStorageSerializer<T> {
+  read: (raw: string) => T
+  write: (value: T) => string
+}
+declare interface UseLocalStorageOptions<T> {
+  serializer?: UseLocalStorageSerializer<T>
+}

package/dist/useLocalStorage.js

@@ -0,0 +1,4 @@
+import { useStorage } from "./useStorage";
+export function useLocalStorage(key, defaultValue, options) {
+  return useStorage(key, defaultValue, typeof localStorage < "u" ? localStorage : void 0, options);
+}

package/dist/useMagicKeys.d.ts

@@ -0,0 +1,16 @@
+import type { Ref } from '@stacksjs/stx';
+/**
+ * Reactive key press tracking.
+ * Returns a proxy that provides reactive boolean refs for any key.
+ *
+ * @example
+ * ```ts
+ * const keys = useMagicKeys()
+ * whenever(keys['ctrl+s'], () => save())
+ * ```
+ */
+export declare function useMagicKeys(): Record<string, Ref<boolean>> & { current: Ref<Set<string>> };
+export declare interface UseMagicKeysReturn {
+  [key: string]: Ref<boolean> | Ref<Set<string>>
+  current: Ref<Set<string>>
+}

package/dist/useMagicKeys.js

@@ -0,0 +1,81 @@
+import { onUnmounted, ref } from "@stacksjs/stx";
+export function useMagicKeys() {
+  const current = ref(new Set), refs = new Map;
+  function getRef(key) {
+    const lower = key.toLowerCase();
+    if (!refs.has(lower))
+      refs.set(lower, ref(!1));
+    return refs.get(lower);
+  }
+  function updateCombos() {
+    for (const [key, r] of refs)
+      if (key.includes("+")) {
+        const parts = key.split("+").map((p) => p.trim().toLowerCase());
+        r.value = parts.every((p) => current.value.has(p));
+      }
+  }
+  if (typeof window < "u") {
+    const onKeyDown = (e) => {
+      const key = e.key.toLowerCase();
+      current.value.add(key);
+      current.value = new Set(current.value);
+      const r = getRef(key);
+      r.value = !0;
+      if (e.ctrlKey) {
+        getRef("ctrl").value = !0;
+        current.value.add("ctrl");
+      }
+      if (e.shiftKey) {
+        getRef("shift").value = !0;
+        current.value.add("shift");
+      }
+      if (e.altKey) {
+        getRef("alt").value = !0;
+        current.value.add("alt");
+      }
+      if (e.metaKey) {
+        getRef("meta").value = !0;
+        current.value.add("meta");
+      }
+      updateCombos();
+    }, onKeyUp = (e) => {
+      const key = e.key.toLowerCase();
+      current.value.delete(key);
+      current.value = new Set(current.value);
+      const r = getRef(key);
+      r.value = !1;
+      if (!e.ctrlKey) {
+        getRef("ctrl").value = !1;
+        current.value.delete("ctrl");
+      }
+      if (!e.shiftKey) {
+        getRef("shift").value = !1;
+        current.value.delete("shift");
+      }
+      if (!e.altKey) {
+        getRef("alt").value = !1;
+        current.value.delete("alt");
+      }
+      if (!e.metaKey) {
+        getRef("meta").value = !1;
+        current.value.delete("meta");
+      }
+      updateCombos();
+    };
+    window.addEventListener("keydown", onKeyDown, { passive: !0 });
+    window.addEventListener("keyup", onKeyUp, { passive: !0 });
+    try {
+      onUnmounted(() => {
+        window.removeEventListener("keydown", onKeyDown);
+        window.removeEventListener("keyup", onKeyUp);
+      });
+    } catch {}
+  }
+  return new Proxy({ current }, {
+    get(target, prop) {
+      if (prop === "current")
+        return current;
+      return getRef(prop);
+    }
+  });
+}

package/dist/useManualRefHistory.d.ts

@@ -0,0 +1,27 @@
+import type { Ref } from '@stacksjs/stx';
+/**
+ * Manual commit-based ref history tracking.
+ * Provides undo/redo capabilities with manual commits.
+ *
+ * @param source - The reactive source to track
+ * @param options - Capacity limit and clone behavior
+ */
+export declare function useManualRefHistory<T>(source: Ref<T>, options?: UseManualRefHistoryOptions): UseManualRefHistoryReturn<T>;
+export declare interface UseManualRefHistoryRecord<T> {
+  snapshot: T
+  timestamp: number
+}
+export declare interface UseManualRefHistoryOptions {
+  capacity?: number
+  clone?: boolean
+}
+export declare interface UseManualRefHistoryReturn<T> {
+  history: Ref<UseManualRefHistoryRecord<T>[]>
+  commit: () => void
+  undo: () => void
+  redo: () => void
+  canUndo: Ref<boolean>
+  canRedo: Ref<boolean>
+  clear: () => void
+  last: Ref<UseManualRefHistoryRecord<T>>
+}

package/dist/useManualRefHistory.js

@@ -0,0 +1,64 @@
+import { computed, ref } from "@stacksjs/stx";
+function cloneValue(val, shouldClone) {
+  if (!shouldClone)
+    return val;
+  if (typeof structuredClone === "function")
+    return structuredClone(val);
+  return JSON.parse(JSON.stringify(val));
+}
+export function useManualRefHistory(source, options = {}) {
+  const { capacity = 1 / 0, clone = !1 } = options, undoStack = ref([
+    { snapshot: cloneValue(source.value, clone), timestamp: Date.now() }
+  ]), redoStack = ref([]), canUndo = computed(() => undoStack.value.length > 1), canRedo = computed(() => redoStack.value.length > 0), last = computed(() => {
+    return undoStack.value[undoStack.value.length - 1];
+  });
+  function commit() {
+    const record = {
+      snapshot: cloneValue(source.value, clone),
+      timestamp: Date.now()
+    };
+    undoStack.value = [...undoStack.value, record];
+    if (capacity !== 1 / 0 && undoStack.value.length > capacity)
+      undoStack.value = undoStack.value.slice(undoStack.value.length - capacity);
+    redoStack.value = [];
+  }
+  function undo() {
+    if (undoStack.value.length <= 1)
+      return;
+    const current = undoStack.value[undoStack.value.length - 1], newUndoStack = undoStack.value.slice(0, -1);
+    undoStack.value = newUndoStack;
+    if (current)
+      redoStack.value = [...redoStack.value, current];
+    const previous = newUndoStack[newUndoStack.length - 1];
+    if (!previous)
+      return;
+    source.value = cloneValue(previous.snapshot, clone);
+  }
+  function redo() {
+    if (redoStack.value.length === 0)
+      return;
+    const next = redoStack.value[redoStack.value.length - 1];
+    redoStack.value = redoStack.value.slice(0, -1);
+    if (next)
+      undoStack.value = [...undoStack.value, next];
+    if (!next)
+      return;
+    source.value = cloneValue(next.snapshot, clone);
+  }
+  function clear() {
+    undoStack.value = [
+      { snapshot: cloneValue(source.value, clone), timestamp: Date.now() }
+    ];
+    redoStack.value = [];
+  }
+  return {
+    history: undoStack,
+    commit,
+    undo,
+    redo,
+    canUndo,
+    canRedo,
+    clear,
+    last
+  };
+}

package/dist/useMath.d.ts

@@ -0,0 +1,17 @@
+import type { Ref } from '@stacksjs/stx';
+export declare function useAbs(value: MaybeRef<number>): Ref<number>;
+export declare function useAverage(...args: MaybeRef<number>[]): Ref<number>;
+export declare function useCeil(value: MaybeRef<number>): Ref<number>;
+export declare function useClamp(value: MaybeRef<number>, min: MaybeRef<number>, max: MaybeRef<number>): Ref<number>;
+export declare function useFloor(value: MaybeRef<number>): Ref<number>;
+export declare function useMax(...args: MaybeRef<number>[]): Ref<number>;
+export declare function useMin(...args: MaybeRef<number>[]): Ref<number>;
+export declare function usePrecision(value: MaybeRef<number>, digits?: MaybeRef<number>): Ref<number>;
+export declare function useRound(value: MaybeRef<number>): Ref<number>;
+export declare function useSum(...args: MaybeRef<number>[]): Ref<number>;
+export declare function useTrunc(value: MaybeRef<number>): Ref<number>;
+export declare function logicNot(value: MaybeRef<boolean>): Ref<boolean>;
+export declare function logicOr(...args: MaybeRef<boolean>[]): Ref<boolean>;
+export declare function and(...args: MaybeRef<boolean>[]): Ref<boolean>;
+export declare const or: unknown;
+declare type MaybeRef<T> = T | Ref<T>;

package/dist/useMath.js

@@ -0,0 +1,52 @@
+import { computed, ref } from "@stacksjs/stx";
+function unref(val) {
+  if (val && typeof val === "object" && "value" in val && "subscribe" in val)
+    return val.value;
+  return val;
+}
+export function useAbs(value) {
+  return computed(() => Math.abs(unref(value)));
+}
+export function useAverage(...args) {
+  return computed(() => {
+    const values = args.map(unref);
+    return values.length ? values.reduce((a, b) => a + b, 0) / values.length : 0;
+  });
+}
+export function useCeil(value) {
+  return computed(() => Math.ceil(unref(value)));
+}
+export function useClamp(value, min, max) {
+  return computed(() => Math.min(unref(max), Math.max(unref(min), unref(value))));
+}
+export function useFloor(value) {
+  return computed(() => Math.floor(unref(value)));
+}
+export function useMax(...args) {
+  return computed(() => Math.max(...args.map(unref)));
+}
+export function useMin(...args) {
+  return computed(() => Math.min(...args.map(unref)));
+}
+export function usePrecision(value, digits = 0) {
+  return computed(() => Number(unref(value).toFixed(Math.max(0, Math.min(100, unref(digits))))));
+}
+export function useRound(value) {
+  return computed(() => Math.round(unref(value)));
+}
+export function useSum(...args) {
+  return computed(() => args.map(unref).reduce((a, b) => a + b, 0));
+}
+export function useTrunc(value) {
+  return computed(() => Math.trunc(unref(value)));
+}
+export function logicNot(value) {
+  return computed(() => !unref(value));
+}
+export function logicOr(...args) {
+  return computed(() => args.some((a) => unref(a)));
+}
+export const or = logicOr;
+export function and(...args) {
+  return computed(() => args.every((a) => unref(a)));
+}

package/dist/useMediaQuery.d.ts

@@ -0,0 +1,9 @@
+import type { MaybeRefOrGetter } from './_shared';
+import type { Ref } from '@stacksjs/stx';
+/**
+ * Reactive media query matching.
+ * Returns a ref that tracks whether the given CSS media query matches.
+ *
+ * @param query - CSS media query string (or ref/getter)
+ */
+export declare function useMediaQuery(query: MaybeRefOrGetter<string>): Ref<boolean>;

package/dist/useMediaQuery.js

@@ -0,0 +1,19 @@
+import { onUnmounted, ref } from "@stacksjs/stx";
+import { defaultWindow, toValue } from "./_shared";
+export function useMediaQuery(query) {
+  const win = defaultWindow(), matches = ref(!1);
+  if (!win || !win.matchMedia)
+    return matches;
+  const queryStr = toValue(query), mediaQuery = win.matchMedia(queryStr);
+  matches.value = mediaQuery.matches;
+  const handler = (e) => {
+    matches.value = e.matches;
+  };
+  mediaQuery.addEventListener("change", handler);
+  try {
+    onUnmounted(() => {
+      mediaQuery.removeEventListener("change", handler);
+    });
+  } catch {}
+  return matches;
+}

package/dist/useMemoize.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Memoize a function based on its arguments.
+ *
+ * @param fn - The function to memoize
+ * @param getKey - Optional function to generate cache key from arguments
+ * @returns A memoized version of the function with cache control methods
+ */
+export declare function useMemoize<T, Args extends any[]>(_fn: (..._args: Args) => T, getKey?: (...args: Args) => string): ((...args: Args) => T) & {
+  load: (...args: Args) => T
+  delete: (...args: Args) => void
+  clear: () => void
+  cache: Map<string, T>
+};

package/dist/useMemoize.js

@@ -0,0 +1,24 @@
+export function useMemoize(_fn, getKey) {
+  const cache = new Map, keyFn = getKey ?? ((...args) => JSON.stringify(args)), memoized = function(...args) {
+    const key = keyFn(...args);
+    if (cache.has(key))
+      return cache.get(key);
+    const result = _fn(...args);
+    cache.set(key, result);
+    return result;
+  };
+  memoized.load = (...args) => {
+    const key = keyFn(...args), result = _fn(...args);
+    cache.set(key, result);
+    return result;
+  };
+  memoized.delete = (...args) => {
+    const key = keyFn(...args);
+    cache.delete(key);
+  };
+  memoized.clear = () => {
+    cache.clear();
+  };
+  memoized.cache = cache;
+  return memoized;
+}

package/dist/useMounted.d.ts

@@ -0,0 +1,6 @@
+import type { Ref } from '@stacksjs/stx';
+/**
+ * Reactive state indicating if the component is mounted.
+ * Returns a ref that becomes true after the initial execution context.
+ */
+export declare function useMounted(): Ref<boolean>;

package/dist/useMounted.js

@@ -0,0 +1,8 @@
+import { ref } from "@stacksjs/stx";
+export function useMounted() {
+  const isMounted = ref(!1);
+  Promise.resolve().then(() => {
+    isMounted.value = !0;
+  });
+  return isMounted;
+}

package/dist/useMouse.d.ts

@@ -0,0 +1,19 @@
+import type { Ref } from '@stacksjs/stx';
+/**
+ * Reactive mouse position.
+ * Tracks the mouse (and optionally touch) position on the page.
+ *
+ * @param options - Configuration for coordinate type, touch tracking, and initial values
+ * @returns Reactive x, y coordinates and source type
+ */
+export declare function useMouse(options?: UseMouseOptions): UseMouseReturn;
+export declare interface UseMouseOptions {
+  type?: 'page' | 'client' | 'screen'
+  touch?: boolean
+  initialValue?: { x: number, y: number }
+}
+export declare interface UseMouseReturn {
+  x: Ref<number>
+  y: Ref<number>
+  sourceType: Ref<'mouse' | 'touch' | null>
+}

package/dist/useMouse.js

@@ -0,0 +1,67 @@
+import { onUnmounted, ref } from "@stacksjs/stx";
+import { noop } from "./_shared";
+export function useMouse(options) {
+  const type = options?.type ?? "page", touch = options?.touch ?? !0, initialValue = options?.initialValue ?? { x: 0, y: 0 }, x = ref(initialValue.x), y = ref(initialValue.y), sourceType = ref(null);
+  let cleanup = noop;
+  if (typeof window < "u") {
+    const cleanups = [], getMouseCoords = (event) => {
+      switch (type) {
+        case "page":
+          return { x: event.pageX, y: event.pageY };
+        case "client":
+          return { x: event.clientX, y: event.clientY };
+        case "screen":
+          return { x: event.screenX, y: event.screenY };
+        default:
+          return { x: event.pageX, y: event.pageY };
+      }
+    }, mouseHandler = (event) => {
+      const coords = getMouseCoords(event);
+      x.value = coords.x;
+      y.value = coords.y;
+      sourceType.value = "mouse";
+    };
+    window.addEventListener("mousemove", mouseHandler, { passive: !0 });
+    cleanups.push(() => window.removeEventListener("mousemove", mouseHandler));
+    if (touch) {
+      const touchHandler = (event) => {
+        if (event.touches.length > 0) {
+          const touchEvent = event.touches[0];
+          if (!touchEvent)
+            return;
+          switch (type) {
+            case "page":
+              x.value = touchEvent.pageX;
+              y.value = touchEvent.pageY;
+              break;
+            case "client":
+              x.value = touchEvent.clientX;
+              y.value = touchEvent.clientY;
+              break;
+            case "screen":
+              x.value = touchEvent.screenX;
+              y.value = touchEvent.screenY;
+              break;
+          }
+          sourceType.value = "touch";
+        }
+      };
+      window.addEventListener("touchstart", touchHandler, { passive: !0 });
+      window.addEventListener("touchmove", touchHandler, { passive: !0 });
+      cleanups.push(() => {
+        window.removeEventListener("touchstart", touchHandler);
+        window.removeEventListener("touchmove", touchHandler);
+      });
+    }
+    cleanup = () => {
+      for (const fn of cleanups)
+        fn();
+      cleanups.length = 0;
+      cleanup = noop;
+    };
+  }
+  try {
+    onUnmounted(() => cleanup());
+  } catch {}
+  return { x, y, sourceType };
+}

package/dist/useMouseInElement.d.ts

@@ -0,0 +1,17 @@
+import type { MaybeRef } from './_shared';
+import type { Ref } from '@stacksjs/stx';
+/**
+ * Reactive mouse position relative to an element.
+ */
+export declare function useMouseInElement(target: MaybeRef<HTMLElement | null | undefined>): UseMouseInElementReturn;
+export declare interface UseMouseInElementReturn {
+  x: Ref<number>
+  y: Ref<number>
+  elementX: Ref<number>
+  elementY: Ref<number>
+  elementPositionX: Ref<number>
+  elementPositionY: Ref<number>
+  elementHeight: Ref<number>
+  elementWidth: Ref<number>
+  isOutside: Ref<boolean>
+}

package/dist/useMouseInElement.js

@@ -0,0 +1,31 @@
+import { onUnmounted, ref } from "@stacksjs/stx";
+import { unref } from "./_shared";
+export function useMouseInElement(target) {
+  const x = ref(0), y = ref(0), elementX = ref(0), elementY = ref(0), elementPositionX = ref(0), elementPositionY = ref(0), elementHeight = ref(0), elementWidth = ref(0), isOutside = ref(!0);
+  if (typeof window > "u")
+    return { x, y, elementX, elementY, elementPositionX, elementPositionY, elementHeight, elementWidth, isOutside };
+  const handler = (event) => {
+    x.value = event.pageX;
+    y.value = event.pageY;
+    const el = unref(target);
+    if (!el) {
+      isOutside.value = !0;
+      return;
+    }
+    const rect = el.getBoundingClientRect();
+    elementPositionX.value = rect.left + window.scrollX;
+    elementPositionY.value = rect.top + window.scrollY;
+    elementHeight.value = rect.height;
+    elementWidth.value = rect.width;
+    elementX.value = event.pageX - elementPositionX.value;
+    elementY.value = event.pageY - elementPositionY.value;
+    isOutside.value = elementX.value < 0 || elementY.value < 0 || elementX.value > elementWidth.value || elementY.value > elementHeight.value;
+  };
+  window.addEventListener("mousemove", handler, { passive: !0 });
+  try {
+    onUnmounted(() => {
+      window.removeEventListener("mousemove", handler);
+    });
+  } catch {}
+  return { x, y, elementX, elementY, elementPositionX, elementPositionY, elementHeight, elementWidth, isOutside };
+}

package/dist/useMousePressed.d.ts

@@ -0,0 +1,10 @@
+import type { MaybeRef } from './_shared';
+import type { Ref } from '@stacksjs/stx';
+/**
+ * Reactive mouse/touch pressed state.
+ */
+export declare function useMousePressed(target?: MaybeRef<HTMLElement | Window | null | undefined>): UseMousePressedReturn;
+export declare interface UseMousePressedReturn {
+  pressed: Ref<boolean>
+  sourceType: Ref<'mouse' | 'touch' | null>
+}

package/dist/useMousePressed.js

@@ -0,0 +1,31 @@
+import { onUnmounted, ref } from "@stacksjs/stx";
+import { unref } from "./_shared";
+export function useMousePressed(target) {
+  const pressed = ref(!1), sourceType = ref(null);
+  if (typeof window > "u")
+    return { pressed, sourceType };
+  const el = unref(target) ?? window, onMouseDown = () => {
+    pressed.value = !0;
+    sourceType.value = "mouse";
+  }, onTouchStart = () => {
+    pressed.value = !0;
+    sourceType.value = "touch";
+  }, onUp = () => {
+    pressed.value = !1;
+  };
+  el.addEventListener("mousedown", onMouseDown, { passive: !0 });
+  el.addEventListener("touchstart", onTouchStart, { passive: !0 });
+  window.addEventListener("mouseup", onUp, { passive: !0 });
+  window.addEventListener("touchend", onUp, { passive: !0 });
+  window.addEventListener("touchcancel", onUp, { passive: !0 });
+  try {
+    onUnmounted(() => {
+      el.removeEventListener("mousedown", onMouseDown);
+      el.removeEventListener("touchstart", onTouchStart);
+      window.removeEventListener("mouseup", onUp);
+      window.removeEventListener("touchend", onUp);
+      window.removeEventListener("touchcancel", onUp);
+    });
+  } catch {}
+  return { pressed, sourceType };
+}

package/dist/useMutationObserver.d.ts

@@ -0,0 +1,16 @@
+import { type MaybeRef } from './_shared';
+import type { Ref } from '@stacksjs/stx';
+/**
+ * Reactive MutationObserver.
+ * Observes the target element and calls the callback when mutations occur.
+ *
+ * @param target - The element to observe (or a Ref to one)
+ * @param callback - MutationCallback
+ * @param options - MutationObserverInit options
+ * @returns isSupported ref and stop function
+ */
+export declare function useMutationObserver(target: MaybeRef<HTMLElement | null>, callback: MutationCallback, options?: MutationObserverInit): UseMutationObserverReturn;
+export declare interface UseMutationObserverReturn {
+  isSupported: Ref<boolean>
+  stop: () => void
+}