@gct-paas/core-web 0.1.4-dev.0 → 0.1.4-dev.2

package/es/node_modules/.pnpm/{@vueuse_core@10.11.1_vue@3.5.13_typescript@5.8.3_ → @vueuse_core@13.7.0_vue@3.5.18_typescript@5.9.2_}/node_modules/@vueuse/core/index.mjs

@@ -1,9 +1,9 @@
-import { noop, makeDestructurable, camelize, toValue, isClient, isObject, tryOnScopeDispose, isIOS, tryOnMounted, notNullish, objectOmit, promiseTimeout, until, increaseWithUnit, objectEntries, createSingletonPromise, useTimeoutFn, pausableWatch as watchPausable, toRef, createEventHook, computedWithControl, timestamp, pausableFilter, ignorableWatch as watchIgnorable, debounceFilter, bypassFilter, createFilterWrapper, toRefs, useIntervalFn, containsProp, hasOwn, throttleFilter, useDebounceFn, useThrottleFn, clamp, syncRef, objectPick, tryOnUnmounted, watchWithFilter, tryOnBeforeUnmount, identity, isDef, isWorker } from '../../../../@vueuse_shared@10.11.1_vue@3.5.13_typescript@5.8.3_/node_modules/@vueuse/shared/index.mjs';
-export { assert, autoResetRef, computedEager, controlledRef, createGlobalState, createInjectionState, createReactiveFn, createSharedComposable, debouncedRef, debouncedWatch, directiveHooks, computedEager as eagerComputed, extendRef, formatDate, get, getLifeCycleTarget, hyphenate, injectLocal, invoke, isDefined, normalizeDate, now, provideLocal, rand, createReactiveFn as reactify, reactifyObject, reactiveComputed, reactiveOmit, reactivePick, autoResetRef as refAutoReset, debouncedRef as refDebounced, refDefault, refThrottled, refWithControl, resolveRef, resolveUnref, set, syncRefs, refThrottled as throttledRef, throttledWatch, toReactive, tryOnBeforeMount, useArrayDifference, useArrayEvery, useArrayFilter, useArrayFind, useArrayFindIndex, useArrayFindLast, useArrayIncludes, useArrayJoin, useArrayMap, useArrayReduce, useArraySome, useArrayUnique, useCounter, useDateFormat, debouncedRef as useDebounce, useInterval, useLastChanged, refThrottled as useThrottle, useTimeout, useToNumber, useToString, useToggle, watchArray, watchAtMost, debouncedWatch as watchDebounced, watchDeep, watchImmediate, watchOnce, throttledWatch as watchThrottled, watchTriggerable, whenever } from '../../../../@vueuse_shared@10.11.1_vue@3.5.13_typescript@5.8.3_/node_modules/@vueuse/shared/index.mjs';
-import { isVue3, isVue2, del, set } from '../../../../vue-demi@0.14.10_vue@3.5.13_typescript@5.8.3_/node_modules/vue-demi/lib/index.mjs';
-import { isRef, ref, shallowRef, watchEffect, computed, inject, version, defineComponent, shallowReactive, h, Fragment, TransitionGroup, watch, getCurrentInstance, customRef, onUpdated, onMounted, readonly, nextTick, reactive, markRaw, unref, getCurrentScope, isReadonly, onBeforeUpdate } from 'vue';
+import { noop, makeDestructurable, camelize, isClient, toArray, watchImmediate, isObject, tryOnScopeDispose, isIOS, notNullish, tryOnMounted, objectOmit, promiseTimeout, until, injectLocal, provideLocal, pxValue, increaseWithUnit, objectEntries, createRef, createSingletonPromise, useTimeoutFn, pausableWatch as watchPausable, toRef, createEventHook, useIntervalFn, computedWithControl, timestamp, pausableFilter, ignorableWatch as watchIgnorable, debounceFilter, bypassFilter, createFilterWrapper, toRefs, watchOnce, containsProp, hasOwn, throttleFilter, useDebounceFn, useThrottleFn, tryOnUnmounted, clamp, syncRef, objectPick, watchWithFilter, identity, isDef, whenever, isWorker } from '../../../../@vueuse_shared@13.7.0_vue@3.5.18_typescript@5.9.2_/node_modules/@vueuse/shared/index.mjs';
+export { assert, autoResetRef, computedEager, controlledRef, createGlobalState, createInjectionState, createReactiveFn, createSharedComposable, debouncedRef, debouncedWatch, computedEager as eagerComputed, extendRef, formatDate, get, getLifeCycleTarget, hyphenate, invoke, isDefined, normalizeDate, now, rand, createReactiveFn as reactify, reactifyObject, reactiveComputed, reactiveOmit, reactivePick, autoResetRef as refAutoReset, debouncedRef as refDebounced, refDefault, refThrottled, refWithControl, resolveRef, resolveUnref, set, syncRefs, refThrottled as throttledRef, throttledWatch, toReactive, toValue, tryOnBeforeMount, tryOnBeforeUnmount, useArrayDifference, useArrayEvery, useArrayFilter, useArrayFind, useArrayFindIndex, useArrayFindLast, useArrayIncludes, useArrayJoin, useArrayMap, useArrayReduce, useArraySome, useArrayUnique, useCounter, useDateFormat, debouncedRef as useDebounce, useInterval, useLastChanged, refThrottled as useThrottle, useTimeout, useToNumber, useToString, useToggle, watchArray, watchAtMost, debouncedWatch as watchDebounced, watchDeep, throttledWatch as watchThrottled, watchTriggerable } from '../../../../@vueuse_shared@13.7.0_vue@3.5.18_typescript@5.9.2_/node_modules/@vueuse/shared/index.mjs';
+import { isRef, shallowRef, ref, watchEffect, computed, inject, defineComponent, shallowReactive, h, Fragment, TransitionGroup, toValue, unref, getCurrentInstance, onMounted, watch, customRef, onUpdated, readonly, reactive, hasInjectionContext, toRaw, shallowReadonly, nextTick, markRaw, getCurrentScope, isReadonly, onBeforeUpdate } from 'vue';
 
 function computedAsync(evaluationCallback, initialState, optionsOrRef) {
+  var _a;
   let options;
   if (isRef(optionsOrRef)) {
     options = {
@@ -14,11 +14,12 @@ function computedAsync(evaluationCallback, initialState, optionsOrRef) {
   }
   const {
     lazy = false,
+    flush = "pre",
     evaluating = void 0,
     shallow = true,
-    onError = noop
+    onError = (_a = globalThis.reportError) != null ? _a : noop
   } = options;
-  const started = ref(!lazy);
+  const started = shallowRef(!lazy);
   const current = shallow ? shallowRef(initialState) : ref(initialState);
   let counter = 0;
   watchEffect(async (onInvalidate) => {
@@ -50,7 +51,7 @@ function computedAsync(evaluationCallback, initialState, optionsOrRef) {
         evaluating.value = false;
       hasFinished = true;
     }
-  });
+  }, { flush });
   if (lazy) {
     return computed(() => {
       started.value = true;
@@ -68,40 +69,40 @@ function computedInject(key, options, defaultSource, treatDefaultAsFactory) {
   if (treatDefaultAsFactory)
     source = inject(key, defaultSource, treatDefaultAsFactory);
   if (typeof options === "function") {
-    return computed((ctx) => options(source, ctx));
+    return computed((oldValue) => options(source, oldValue));
   } else {
     return computed({
-      get: (ctx) => options.get(source, ctx),
+      get: (oldValue) => options.get(source, oldValue),
       set: options.set
     });
   }
 }
 
+// @__NO_SIDE_EFFECTS__
 function createReusableTemplate(options = {}) {
-  if (!isVue3 && !version.startsWith("2.7.")) {
-    if (process.env.NODE_ENV !== "production")
-      throw new Error("[VueUse] createReusableTemplate only works in Vue 2.7 or above.");
-    return;
-  }
   const {
     inheritAttrs = true
   } = options;
   const render = shallowRef();
-  const define = /* #__PURE__ */ defineComponent({
+  const define = /*@__PURE__*/ defineComponent({
     setup(_, { slots }) {
       return () => {
         render.value = slots.default;
       };
     }
   });
-  const reuse = /* #__PURE__ */ defineComponent({
+  const reuse = /*@__PURE__*/ defineComponent({
     inheritAttrs,
-    setup(_, { attrs, slots }) {
+    props: options.props,
+    setup(props, { attrs, slots }) {
       return () => {
         var _a;
         if (!render.value && process.env.NODE_ENV !== "production")
           throw new Error("[VueUse] Failed to find the definition of reusable template");
-        const vnode = (_a = render.value) == null ? void 0 : _a.call(render, { ...keysToCamelKebabCase(attrs), $slots: slots });
+        const vnode = (_a = render.value) == null ? void 0 : _a.call(render, {
+          ...options.props == null ? keysToCamelKebabCase(attrs) : props,
+          $slots: slots
+        });
         return inheritAttrs && (vnode == null ? void 0 : vnode.length) === 1 ? vnode[0] : vnode;
       };
     }
@@ -118,12 +119,8 @@ function keysToCamelKebabCase(obj) {
   return newObj;
 }
 
+// @__NO_SIDE_EFFECTS__
 function createTemplatePromise(options = {}) {
-  if (!isVue3) {
-    if (process.env.NODE_ENV !== "production")
-      throw new Error("[VueUse] createTemplatePromise only works in Vue 3 or above.");
-    return;
-  }
   let index = 0;
   const instances = ref([]);
   function create(...args) {
@@ -158,7 +155,7 @@ function createTemplatePromise(options = {}) {
       return instances.value[0].promise;
     return create(...args);
   }
-  const component = /* #__PURE__ */ defineComponent((_, { slots }) => {
+  const component = /*@__PURE__*/ defineComponent((_, { slots }) => {
     const renderList = () => instances.value.map((props) => {
       var _a;
       return h(Fragment, { key: props.key }, (_a = slots.default) == null ? void 0 : _a.call(slots, props));
@@ -171,85 +168,87 @@ function createTemplatePromise(options = {}) {
   return component;
 }
 
+// @__NO_SIDE_EFFECTS__
 function createUnrefFn(fn) {
   return function(...args) {
     return fn.apply(this, args.map((i) => toValue(i)));
   };
 }
 
+const defaultWindow = isClient ? window : void 0;
+const defaultDocument = isClient ? window.document : void 0;
+const defaultNavigator = isClient ? window.navigator : void 0;
+const defaultLocation = isClient ? window.location : void 0;
+
 function unrefElement(elRef) {
   var _a;
   const plain = toValue(elRef);
   return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
 }
 
-const defaultWindow = isClient ? window : void 0;
-const defaultDocument = isClient ? window.document : void 0;
-const defaultNavigator = isClient ? window.navigator : void 0;
-const defaultLocation = isClient ? window.location : void 0;
-
 function useEventListener(...args) {
-  let target;
-  let events;
-  let listeners;
-  let options;
-  if (typeof args[0] === "string" || Array.isArray(args[0])) {
-    [events, listeners, options] = args;
-    target = defaultWindow;
-  } else {
-    [target, events, listeners, options] = args;
-  }
-  if (!target)
-    return noop;
-  if (!Array.isArray(events))
-    events = [events];
-  if (!Array.isArray(listeners))
-    listeners = [listeners];
   const cleanups = [];
   const cleanup = () => {
     cleanups.forEach((fn) => fn());
     cleanups.length = 0;
   };
-  const register = (el, event, listener, options2) => {
-    el.addEventListener(event, listener, options2);
-    return () => el.removeEventListener(event, listener, options2);
+  const register = (el, event, listener, options) => {
+    el.addEventListener(event, listener, options);
+    return () => el.removeEventListener(event, listener, options);
   };
-  const stopWatch = watch(
-    () => [unrefElement(target), toValue(options)],
-    ([el, options2]) => {
+  const firstParamTargets = computed(() => {
+    const test = toArray(toValue(args[0])).filter((e) => e != null);
+    return test.every((e) => typeof e !== "string") ? test : void 0;
+  });
+  const stopWatch = watchImmediate(
+    () => {
+      var _a, _b;
+      return [
+        (_b = (_a = firstParamTargets.value) == null ? void 0 : _a.map((e) => unrefElement(e))) != null ? _b : [defaultWindow].filter((e) => e != null),
+        toArray(toValue(firstParamTargets.value ? args[1] : args[0])),
+        toArray(unref(firstParamTargets.value ? args[2] : args[1])),
+        // @ts-expect-error - TypeScript gets the correct types, but somehow still complains
+        toValue(firstParamTargets.value ? args[3] : args[2])
+      ];
+    },
+    ([raw_targets, raw_events, raw_listeners, raw_options]) => {
       cleanup();
-      if (!el)
+      if (!(raw_targets == null ? void 0 : raw_targets.length) || !(raw_events == null ? void 0 : raw_events.length) || !(raw_listeners == null ? void 0 : raw_listeners.length))
         return;
-      const optionsClone = isObject(options2) ? { ...options2 } : options2;
+      const optionsClone = isObject(raw_options) ? { ...raw_options } : raw_options;
       cleanups.push(
-        ...events.flatMap((event) => {
-          return listeners.map((listener) => register(el, event, listener, optionsClone));
-        })
+        ...raw_targets.flatMap(
+          (el) => raw_events.flatMap(
+            (event) => raw_listeners.map((listener) => register(el, event, listener, optionsClone))
+          )
+        )
       );
     },
-    { immediate: true, flush: "post" }
+    { flush: "post" }
   );
   const stop = () => {
     stopWatch();
     cleanup();
   };
-  tryOnScopeDispose(stop);
+  tryOnScopeDispose(cleanup);
   return stop;
 }
 
 let _iOSWorkaround = false;
 function onClickOutside(target, handler, options = {}) {
-  const { window = defaultWindow, ignore = [], capture = true, detectIframe = false } = options;
-  if (!window)
-    return noop;
+  const { window = defaultWindow, ignore = [], capture = true, detectIframe = false, controls = false } = options;
+  if (!window) {
+    return controls ? { stop: noop, cancel: noop, trigger: noop } : noop;
+  }
   if (isIOS && !_iOSWorkaround) {
     _iOSWorkaround = true;
-    Array.from(window.document.body.children).forEach((el) => el.addEventListener("click", noop));
-    window.document.documentElement.addEventListener("click", noop);
+    const listenerOptions = { passive: true };
+    Array.from(window.document.body.children).forEach((el) => el.addEventListener("click", noop, listenerOptions));
+    window.document.documentElement.addEventListener("click", noop, listenerOptions);
   }
   let shouldListen = true;
   const shouldIgnore = (event) => {
-    return ignore.some((target2) => {
+    return toValue(ignore).some((target2) => {
       if (typeof target2 === "string") {
         return Array.from(window.document.querySelectorAll(target2)).some((el) => el === event.target || event.composedPath().includes(el));
       } else {
@@ -258,11 +257,26 @@ function onClickOutside(target, handler, options = {}) {
       }
     });
   };
+  function hasMultipleRoots(target2) {
+    const vm = toValue(target2);
+    return vm && vm.$.subTree.shapeFlag === 16;
+  }
+  function checkMultipleRoots(target2, event) {
+    const vm = toValue(target2);
+    const children = vm.$.subTree && vm.$.subTree.children;
+    if (children == null || !Array.isArray(children))
+      return false;
+    return children.some((child) => child.el === event.target || event.composedPath().includes(child.el));
+  }
   const listener = (event) => {
     const el = unrefElement(target);
+    if (event.target == null)
+      return;
+    if (!(el instanceof Element) && hasMultipleRoots(target) && checkMultipleRoots(target, event))
+      return;
     if (!el || el === event.target || event.composedPath().includes(el))
       return;
-    if (event.detail === 0)
+    if ("detail" in event && event.detail === 0)
       shouldListen = !shouldIgnore(event);
     if (!shouldListen) {
       shouldListen = true;
@@ -270,8 +284,17 @@ function onClickOutside(target, handler, options = {}) {
     }
     handler(event);
   };
+  let isProcessingClick = false;
   const cleanup = [
-    useEventListener(window, "click", listener, { passive: true, capture }),
+    useEventListener(window, "click", (event) => {
+      if (!isProcessingClick) {
+        isProcessingClick = true;
+        setTimeout(() => {
+          isProcessingClick = false;
+        }, 0);
+        listener(event);
+      }
+    }, { passive: true, capture }),
     useEventListener(window, "pointerdown", (e) => {
       const el = unrefElement(target);
       shouldListen = !shouldIgnore(e) && !!(el && !e.composedPath().includes(el));
@@ -284,12 +307,128 @@ function onClickOutside(target, handler, options = {}) {
           handler(event);
         }
       }, 0);
-    })
+    }, { passive: true })
   ].filter(Boolean);
   const stop = () => cleanup.forEach((fn) => fn());
+  if (controls) {
+    return {
+      stop,
+      cancel: () => {
+        shouldListen = false;
+      },
+      trigger: (event) => {
+        shouldListen = true;
+        listener(event);
+        shouldListen = false;
+      }
+    };
+  }
   return stop;
 }
 
+// @__NO_SIDE_EFFECTS__
+function useMounted() {
+  const isMounted = shallowRef(false);
+  const instance = getCurrentInstance();
+  if (instance) {
+    onMounted(() => {
+      isMounted.value = true;
+    }, instance);
+  }
+  return isMounted;
+}
+
+// @__NO_SIDE_EFFECTS__
+function useSupported(callback) {
+  const isMounted = useMounted();
+  return computed(() => {
+    isMounted.value;
+    return Boolean(callback());
+  });
+}
+
+function useMutationObserver(target, callback, options = {}) {
+  const { window = defaultWindow, ...mutationOptions } = options;
+  let observer;
+  const isSupported = useSupported(() => window && "MutationObserver" in window);
+  const cleanup = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = void 0;
+    }
+  };
+  const targets = computed(() => {
+    const value = toValue(target);
+    const items = toArray(value).map(unrefElement).filter(notNullish);
+    return new Set(items);
+  });
+  const stopWatch = watch(
+    targets,
+    (newTargets) => {
+      cleanup();
+      if (isSupported.value && newTargets.size) {
+        observer = new MutationObserver(callback);
+        newTargets.forEach((el) => observer.observe(el, mutationOptions));
+      }
+    },
+    { immediate: true, flush: "post" }
+  );
+  const takeRecords = () => {
+    return observer == null ? void 0 : observer.takeRecords();
+  };
+  const stop = () => {
+    stopWatch();
+    cleanup();
+  };
+  tryOnScopeDispose(stop);
+  return {
+    isSupported,
+    stop,
+    takeRecords
+  };
+}
+
+function onElementRemoval(target, callback, options = {}) {
+  const {
+    window = defaultWindow,
+    document = window == null ? void 0 : window.document,
+    flush = "sync"
+  } = options;
+  if (!window || !document)
+    return noop;
+  let stopFn;
+  const cleanupAndUpdate = (fn) => {
+    stopFn == null ? void 0 : stopFn();
+    stopFn = fn;
+  };
+  const stopWatch = watchEffect(() => {
+    const el = unrefElement(target);
+    if (el) {
+      const { stop } = useMutationObserver(
+        document,
+        (mutationsList) => {
+          const targetRemoved = mutationsList.map((mutation) => [...mutation.removedNodes]).flat().some((node) => node === el || node.contains(el));
+          if (targetRemoved) {
+            callback(mutationsList);
+          }
+        },
+        {
+          window,
+          childList: true,
+          subtree: true
+        }
+      );
+      cleanupAndUpdate(stop);
+    }
+  }, { flush });
+  const stopHandle = () => {
+    stopWatch();
+    cleanupAndUpdate();
+  };
+  tryOnScopeDispose(stopHandle);
+  return stopHandle;
+}
+
 function createKeyPredicate(keyFilter) {
   if (typeof keyFilter === "function")
     return keyFilter;
@@ -452,23 +591,24 @@ function isTypedCharValid({
 }) {
   if (metaKey || ctrlKey || altKey)
     return false;
-  if (keyCode >= 48 && keyCode <= 57)
+  if (keyCode >= 48 && keyCode <= 57 || keyCode >= 96 && keyCode <= 105)
     return true;
   if (keyCode >= 65 && keyCode <= 90)
     return true;
-  if (keyCode >= 97 && keyCode <= 122)
-    return true;
   return false;
 }
 function onStartTyping(callback, options = {}) {
   const { document: document2 = defaultDocument } = options;
   const keydown = (event) => {
-    !isFocusedElementEditable() && isTypedCharValid(event) && callback(event);
+    if (!isFocusedElementEditable() && isTypedCharValid(event)) {
+      callback(event);
+    }
   };
   if (document2)
     useEventListener(document2, "keydown", keydown, { passive: true });
 }
 
+// @__NO_SIDE_EFFECTS__
 function templateRef(key, initialValue = null) {
   const instance = getCurrentInstance();
   let _trigger = () => {
@@ -490,66 +630,7 @@ function templateRef(key, initialValue = null) {
   return element;
 }
 
-function useMounted() {
-  const isMounted = ref(false);
-  const instance = getCurrentInstance();
-  if (instance) {
-    onMounted(() => {
-      isMounted.value = true;
-    }, isVue2 ? void 0 : instance);
-  }
-  return isMounted;
-}
-
-function useSupported(callback) {
-  const isMounted = useMounted();
-  return computed(() => {
-    isMounted.value;
-    return Boolean(callback());
-  });
-}
-
-function useMutationObserver(target, callback, options = {}) {
-  const { window = defaultWindow, ...mutationOptions } = options;
-  let observer;
-  const isSupported = useSupported(() => window && "MutationObserver" in window);
-  const cleanup = () => {
-    if (observer) {
-      observer.disconnect();
-      observer = void 0;
-    }
-  };
-  const targets = computed(() => {
-    const value = toValue(target);
-    const items = (Array.isArray(value) ? value : [value]).map(unrefElement).filter(notNullish);
-    return new Set(items);
-  });
-  const stopWatch = watch(
-    () => targets.value,
-    (targets2) => {
-      cleanup();
-      if (isSupported.value && targets2.size) {
-        observer = new MutationObserver(callback);
-        targets2.forEach((el) => observer.observe(el, mutationOptions));
-      }
-    },
-    { immediate: true, flush: "post" }
-  );
-  const takeRecords = () => {
-    return observer == null ? void 0 : observer.takeRecords();
-  };
-  const stop = () => {
-    cleanup();
-    stopWatch();
-  };
-  tryOnScopeDispose(stop);
-  return {
-    isSupported,
-    stop,
-    takeRecords
-  };
-}
-
+// @__NO_SIDE_EFFECTS__
 function useActiveElement(options = {}) {
   var _a;
   const {
@@ -567,28 +648,34 @@ function useActiveElement(options = {}) {
     }
     return element;
   };
-  const activeElement = ref();
+  const activeElement = shallowRef();
   const trigger = () => {
     activeElement.value = getDeepActiveElement();
   };
   if (window) {
-    useEventListener(window, "blur", (event) => {
-      if (event.relatedTarget !== null)
-        return;
-      trigger();
-    }, true);
-    useEventListener(window, "focus", trigger, true);
+    const listenerOptions = {
+      capture: true,
+      passive: true
+    };
+    useEventListener(
+      window,
+      "blur",
+      (event) => {
+        if (event.relatedTarget !== null)
+          return;
+        trigger();
+      },
+      listenerOptions
+    );
+    useEventListener(
+      window,
+      "focus",
+      trigger,
+      listenerOptions
+    );
   }
   if (triggerOnRemoval) {
-    useMutationObserver(document, (mutations) => {
-      mutations.filter((m) => m.removedNodes.length).map((n) => Array.from(n.removedNodes)).flat().forEach((node) => {
-        if (node === activeElement.value)
-          trigger();
-      });
-    }, {
-      childList: true,
-      subtree: true
-    });
+    onElementRemoval(activeElement, trigger, { document });
   }
   trigger();
   return activeElement;
@@ -598,10 +685,13 @@ function useRafFn(fn, options = {}) {
   const {
     immediate = true,
     fpsLimit = void 0,
-    window = defaultWindow
+    window = defaultWindow,
+    once = false
   } = options;
-  const isActive = ref(false);
-  const intervalLimit = fpsLimit ? 1e3 / fpsLimit : null;
+  const isActive = shallowRef(false);
+  const intervalLimit = computed(() => {
+    return fpsLimit ? 1e3 / toValue(fpsLimit) : null;
+  });
   let previousFrameTimestamp = 0;
   let rafId = null;
   function loop(timestamp) {
@@ -610,12 +700,17 @@ function useRafFn(fn, options = {}) {
     if (!previousFrameTimestamp)
       previousFrameTimestamp = timestamp;
     const delta = timestamp - previousFrameTimestamp;
-    if (intervalLimit && delta < intervalLimit) {
+    if (intervalLimit.value && delta < intervalLimit.value) {
       rafId = window.requestAnimationFrame(loop);
       return;
     }
     previousFrameTimestamp = timestamp;
     fn({ delta, timestamp });
+    if (once) {
+      isActive.value = false;
+      rafId = null;
+      return;
+    }
     rafId = window.requestAnimationFrame(loop);
   }
   function resume() {
@@ -743,7 +838,8 @@ function useAnimate(target, keyframes, options) {
   };
   const reverse = () => {
     var _a;
-    !animate.value && update();
+    if (!animate.value)
+      update();
     try {
       (_a = animate.value) == null ? void 0 : _a.reverse();
       syncResume();
@@ -771,21 +867,26 @@ function useAnimate(target, keyframes, options) {
     }
   };
   watch(() => unrefElement(target), (el) => {
-    el && update();
+    if (el) {
+      update(true);
+    } else {
+      animate.value = void 0;
+    }
   });
   watch(() => keyframes, (value) => {
-    !animate.value && update();
-    if (!unrefElement(target) && animate.value) {
-      animate.value.effect = new KeyframeEffect(
-        unrefElement(target),
-        toValue(value),
-        animateOptions
-      );
+    if (animate.value) {
+      update();
+      const targetEl = unrefElement(target);
+      if (targetEl) {
+        animate.value.effect = new KeyframeEffect(
+          targetEl,
+          toValue(value),
+          animateOptions
+        );
+      }
     }
   }, { deep: true });
-  tryOnMounted(() => {
-    nextTick(() => update(true));
-  });
+  tryOnMounted(() => update(true), false);
   tryOnScopeDispose(cancel);
   function update(init) {
     const el = unrefElement(target);
@@ -803,12 +904,13 @@ function useAnimate(target, keyframes, options) {
       syncResume();
     onReady == null ? void 0 : onReady(animate.value);
   }
-  useEventListener(animate, ["cancel", "finish", "remove"], syncPause);
+  const listenerOptions = { passive: true };
+  useEventListener(animate, ["cancel", "finish", "remove"], syncPause, listenerOptions);
   useEventListener(animate, "finish", () => {
     var _a;
     if (commitStyles)
       (_a = animate.value) == null ? void 0 : _a.commitStyles();
-  });
+  }, listenerOptions);
   const { resume: resumeRef, pause: pauseRef } = useRafFn(() => {
     if (!animate.value)
       return;
@@ -863,7 +965,7 @@ function useAsyncQueue(tasks, options) {
   };
   const initialResult = Array.from(Array.from({ length: tasks.length }), () => ({ state: promiseState.pending, data: null }));
   const result = reactive(initialResult);
-  const activeIndex = ref(-1);
+  const activeIndex = shallowRef(-1);
   if (!tasks || tasks.length === 0) {
     onFinished();
     return {
@@ -889,7 +991,8 @@ function useAsyncQueue(tasks, options) {
       }
       const done = curr(prevRes).then((currentRes) => {
         updateResult(promiseState.fulfilled, currentRes);
-        activeIndex.value === tasks.length - 1 && onFinished();
+        if (activeIndex.value === tasks.length - 1)
+          onFinished();
         return currentRes;
       });
       if (!signal)
@@ -921,18 +1024,19 @@ function whenAborted(signal) {
 }
 
 function useAsyncState(promise, initialState, options) {
+  var _a;
   const {
     immediate = true,
     delay = 0,
-    onError = noop,
+    onError = (_a = globalThis.reportError) != null ? _a : noop,
     onSuccess = noop,
     resetOnExecute = true,
     shallow = true,
     throwError
   } = options != null ? options : {};
   const state = shallow ? shallowRef(initialState) : ref(initialState);
-  const isReady = ref(false);
-  const isLoading = ref(false);
+  const isReady = shallowRef(false);
+  const isLoading = shallowRef(false);
   const error = shallowRef(void 0);
   async function execute(delay2 = 0, ...args) {
     if (resetOnExecute)
@@ -958,14 +1062,16 @@ function useAsyncState(promise, initialState, options) {
     }
     return state.value;
   }
-  if (immediate)
+  if (immediate) {
     execute(delay);
+  }
   const shell = {
     state,
     isReady,
     isLoading,
     error,
-    execute
+    execute,
+    executeImmediate: (...args) => execute(0, ...args)
   };
   function waitUntilIsLoaded() {
     return new Promise((resolve, reject) => {
@@ -1001,8 +1107,8 @@ function getDefaultSerialization(target) {
 }
 
 function useBase64(target, options) {
-  const base64 = ref("");
-  const promise = ref();
+  const base64 = shallowRef("");
+  const promise = shallowRef();
   function execute() {
     if (!isClient)
       return;
@@ -1041,7 +1147,9 @@ function useBase64(target, options) {
         reject(error);
       }
     });
-    promise.value.then((res) => base64.value = res);
+    promise.value.then((res) => {
+      base64.value = (options == null ? void 0 : options.dataUrl) === false ? res.replace(/^data:.*?;base64,/, "") : res;
+    });
     return promise.value;
   }
   if (isRef(target) || typeof target === "function")
@@ -1077,14 +1185,15 @@ function blobToBase64(blob) {
   });
 }
 
+// @__NO_SIDE_EFFECTS__
 function useBattery(options = {}) {
   const { navigator = defaultNavigator } = options;
   const events = ["chargingchange", "chargingtimechange", "dischargingtimechange", "levelchange"];
   const isSupported = useSupported(() => navigator && "getBattery" in navigator && typeof navigator.getBattery === "function");
-  const charging = ref(false);
-  const chargingTime = ref(0);
-  const dischargingTime = ref(0);
-  const level = ref(1);
+  const charging = shallowRef(false);
+  const chargingTime = shallowRef(0);
+  const dischargingTime = shallowRef(0);
+  const level = shallowRef(1);
   let battery;
   function updateBatteryInfo() {
     charging.value = this.charging;
@@ -1108,6 +1217,7 @@ function useBattery(options = {}) {
   };
 }
 
+// @__NO_SIDE_EFFECTS__
 function useBluetooth(options) {
   let {
     acceptAllDevices = false
@@ -1118,7 +1228,7 @@ function useBluetooth(options) {
     navigator = defaultNavigator
   } = options || {};
   const isSupported = useSupported(() => navigator && "bluetooth" in navigator);
-  const device = shallowRef(void 0);
+  const device = shallowRef();
   const error = shallowRef(null);
   watch(device, () => {
     connectToBluetoothGATTServer();
@@ -1139,18 +1249,20 @@ function useBluetooth(options) {
       error.value = err;
     }
   }
-  const server = ref();
-  const isConnected = computed(() => {
-    var _a;
-    return ((_a = server.value) == null ? void 0 : _a.connected) || false;
-  });
+  const server = shallowRef();
+  const isConnected = shallowRef(false);
+  function reset() {
+    isConnected.value = false;
+    device.value = void 0;
+    server.value = void 0;
+  }
   async function connectToBluetoothGATTServer() {
     error.value = null;
     if (device.value && device.value.gatt) {
-      device.value.addEventListener("gattserverdisconnected", () => {
-      });
+      useEventListener(device, "gattserverdisconnected", reset, { passive: true });
       try {
         server.value = await device.value.gatt.connect();
+        isConnected.value = server.value.connected;
       } catch (err) {
         error.value = err;
       }
@@ -1168,7 +1280,7 @@ function useBluetooth(options) {
   });
   return {
     isSupported,
-    isConnected,
+    isConnected: readonly(isConnected),
     // Device:
     device,
     requestDevice,
@@ -1179,39 +1291,55 @@ function useBluetooth(options) {
   };
 }
 
+const ssrWidthSymbol = Symbol("vueuse-ssr-width");
+// @__NO_SIDE_EFFECTS__
+function useSSRWidth() {
+  const ssrWidth = hasInjectionContext() ? injectLocal(ssrWidthSymbol, null) : null;
+  return typeof ssrWidth === "number" ? ssrWidth : void 0;
+}
+function provideSSRWidth(width, app) {
+  if (app !== void 0) {
+    app.provide(ssrWidthSymbol, width);
+  } else {
+    provideLocal(ssrWidthSymbol, width);
+  }
+}
+
 function useMediaQuery(query, options = {}) {
-  const { window = defaultWindow } = options;
+  const { window = defaultWindow, ssrWidth = useSSRWidth() } = options;
   const isSupported = useSupported(() => window && "matchMedia" in window && typeof window.matchMedia === "function");
-  let mediaQuery;
-  const matches = ref(false);
+  const ssrSupport = shallowRef(typeof ssrWidth === "number");
+  const mediaQuery = shallowRef();
+  const matches = shallowRef(false);
   const handler = (event) => {
     matches.value = event.matches;
   };
-  const cleanup = () => {
-    if (!mediaQuery)
+  watchEffect(() => {
+    if (ssrSupport.value) {
+      ssrSupport.value = !isSupported.value;
+      const queryStrings = toValue(query).split(",");
+      matches.value = queryStrings.some((queryString) => {
+        const not = queryString.includes("not all");
+        const minWidth = queryString.match(/\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);
+        const maxWidth = queryString.match(/\(\s*max-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);
+        let res = Boolean(minWidth || maxWidth);
+        if (minWidth && res) {
+          res = ssrWidth >= pxValue(minWidth[1]);
+        }
+        if (maxWidth && res) {
+          res = ssrWidth <= pxValue(maxWidth[1]);
+        }
+        return not ? !res : res;
+      });
       return;
-    if ("removeEventListener" in mediaQuery)
-      mediaQuery.removeEventListener("change", handler);
-    else
-      mediaQuery.removeListener(handler);
-  };
-  const stopWatch = watchEffect(() => {
+    }
     if (!isSupported.value)
       return;
-    cleanup();
-    mediaQuery = window.matchMedia(toValue(query));
-    if ("addEventListener" in mediaQuery)
-      mediaQuery.addEventListener("change", handler);
-    else
-      mediaQuery.addListener(handler);
-    matches.value = mediaQuery.matches;
-  });
-  tryOnScopeDispose(() => {
-    stopWatch();
-    cleanup();
-    mediaQuery = void 0;
+    mediaQuery.value = window.matchMedia(toValue(query));
+    matches.value = mediaQuery.value.matches;
   });
-  return matches;
+  useEventListener(mediaQuery, "change", handler, { passive: true });
+  return computed(() => matches.value);
 }
 
 const breakpointsTailwind = {
@@ -1287,7 +1415,15 @@ const breakpointsPrimeFlex = {
   lg: 992,
   xl: 1200
 };
+const breakpointsElement = {
+  xs: 0,
+  sm: 768,
+  md: 992,
+  lg: 1200,
+  xl: 1920
+};
 
+// @__NO_SIDE_EFFECTS__
 function useBreakpoints(breakpoints, options = {}) {
   function getValue(k, delta) {
     let v = toValue(breakpoints[toValue(k)]);
@@ -1297,11 +1433,19 @@ function useBreakpoints(breakpoints, options = {}) {
       v = `${v}px`;
     return v;
   }
-  const { window = defaultWindow, strategy = "min-width" } = options;
-  function match(query) {
+  const { window = defaultWindow, strategy = "min-width", ssrWidth = useSSRWidth() } = options;
+  const ssrSupport = typeof ssrWidth === "number";
+  const mounted = ssrSupport ? shallowRef(false) : { value: true };
+  if (ssrSupport) {
+    tryOnMounted(() => mounted.value = !!window);
+  }
+  function match(query, size) {
+    if (!mounted.value && ssrSupport) {
+      return query === "min" ? ssrWidth >= pxValue(size) : ssrWidth <= pxValue(size);
+    }
     if (!window)
       return false;
-    return window.matchMedia(query).matches;
+    return window.matchMedia(`(${query}-width: ${size})`).matches;
   }
   const greaterOrEqual = (k) => {
     return useMediaQuery(() => `(min-width: ${getValue(k)})`, options);
@@ -1318,7 +1462,7 @@ function useBreakpoints(breakpoints, options = {}) {
     return shortcuts;
   }, {});
   function current() {
-    const points = Object.keys(breakpoints).map((i) => [i, greaterOrEqual(i)]);
+    const points = Object.keys(breakpoints).map((k) => [k, shortcutMethods[k], pxValue(getValue(k))]).sort((a, b) => a[2] - b[2]);
     return computed(() => points.filter(([, v]) => v.value).map(([k]) => k));
   }
   return Object.assign(shortcutMethods, {
@@ -1334,24 +1478,24 @@ function useBreakpoints(breakpoints, options = {}) {
       return useMediaQuery(() => `(min-width: ${getValue(a)}) and (max-width: ${getValue(b, -0.1)})`, options);
     },
     isGreater(k) {
-      return match(`(min-width: ${getValue(k, 0.1)})`);
+      return match("min", getValue(k, 0.1));
     },
     isGreaterOrEqual(k) {
-      return match(`(min-width: ${getValue(k)})`);
+      return match("min", getValue(k));
     },
     isSmaller(k) {
-      return match(`(max-width: ${getValue(k, -0.1)})`);
+      return match("max", getValue(k, -0.1));
     },
     isSmallerOrEqual(k) {
-      return match(`(max-width: ${getValue(k)})`);
+      return match("max", getValue(k));
     },
     isInBetween(a, b) {
-      return match(`(min-width: ${getValue(a)}) and (max-width: ${getValue(b, -0.1)})`);
+      return match("min", getValue(a)) && match("max", getValue(b, -0.1));
     },
     current,
     active() {
       const bps = current();
-      return computed(() => bps.value.length === 0 ? "" : bps.value.at(-1));
+      return computed(() => bps.value.length === 0 ? "" : bps.value.at(strategy === "min-width" ? -1 : 0));
     }
   });
 }
@@ -1362,7 +1506,7 @@ function useBroadcastChannel(options) {
     window = defaultWindow
   } = options;
   const isSupported = useSupported(() => window && "BroadcastChannel" in window);
-  const isClosed = ref(false);
+  const isClosed = shallowRef(false);
   const channel = ref();
   const data = ref();
   const error = shallowRef(null);
@@ -1379,15 +1523,18 @@ function useBroadcastChannel(options) {
     tryOnMounted(() => {
       error.value = null;
       channel.value = new BroadcastChannel(name);
-      channel.value.addEventListener("message", (e) => {
+      const listenerOptions = {
+        passive: true
+      };
+      useEventListener(channel, "message", (e) => {
         data.value = e.data;
-      }, { passive: true });
-      channel.value.addEventListener("messageerror", (e) => {
+      }, listenerOptions);
+      useEventListener(channel, "messageerror", (e) => {
         error.value = e;
-      }, { passive: true });
-      channel.value.addEventListener("close", () => {
+      }, listenerOptions);
+      useEventListener(channel, "close", () => {
         isClosed.value = true;
-      });
+      }, listenerOptions);
     });
   }
   tryOnScopeDispose(() => {
@@ -1414,13 +1561,14 @@ const WRITABLE_PROPERTIES = [
   "protocol",
   "search"
 ];
+// @__NO_SIDE_EFFECTS__
 function useBrowserLocation(options = {}) {
   const { window = defaultWindow } = options;
   const refs = Object.fromEntries(
     WRITABLE_PROPERTIES.map((key) => [key, ref()])
   );
-  for (const [key, ref2] of objectEntries(refs)) {
-    watch(ref2, (value) => {
+  for (const [key, ref] of objectEntries(refs)) {
+    watch(ref, (value) => {
       if (!(window == null ? void 0 : window.location) || window.location[key] === value)
         return;
       window.location[key] = value;
@@ -1442,14 +1590,16 @@ function useBrowserLocation(options = {}) {
   };
   const state = ref(buildState("load"));
   if (window) {
-    useEventListener(window, "popstate", () => state.value = buildState("popstate"), { passive: true });
-    useEventListener(window, "hashchange", () => state.value = buildState("hashchange"), { passive: true });
+    const listenerOptions = { passive: true };
+    useEventListener(window, "popstate", () => state.value = buildState("popstate"), listenerOptions);
+    useEventListener(window, "hashchange", () => state.value = buildState("hashchange"), listenerOptions);
   }
   return state;
 }
 
-function useCached(refValue, comparator = (a, b) => a === b, watchOptions) {
-  const cachedValue = ref(refValue.value);
+function useCached(refValue, comparator = (a, b) => a === b, options) {
+  const { deepRefs = true, ...watchOptions } = options || {};
+  const cachedValue = createRef(refValue.value, deepRefs);
   watch(() => refValue.value, (value) => {
     if (!comparator(value, cachedValue.value))
       cachedValue.value = value;
@@ -1457,32 +1607,35 @@ function useCached(refValue, comparator = (a, b) => a === b, watchOptions) {
   return cachedValue;
 }
 
+// @__NO_SIDE_EFFECTS__
 function usePermission(permissionDesc, options = {}) {
   const {
     controls = false,
     navigator = defaultNavigator
   } = options;
   const isSupported = useSupported(() => navigator && "permissions" in navigator);
-  let permissionStatus;
+  const permissionStatus = shallowRef();
   const desc = typeof permissionDesc === "string" ? { name: permissionDesc } : permissionDesc;
-  const state = ref();
-  const onChange = () => {
-    if (permissionStatus)
-      state.value = permissionStatus.state;
+  const state = shallowRef();
+  const update = () => {
+    var _a, _b;
+    state.value = (_b = (_a = permissionStatus.value) == null ? void 0 : _a.state) != null ? _b : "prompt";
   };
+  useEventListener(permissionStatus, "change", update, { passive: true });
   const query = createSingletonPromise(async () => {
     if (!isSupported.value)
       return;
-    if (!permissionStatus) {
+    if (!permissionStatus.value) {
       try {
-        permissionStatus = await navigator.permissions.query(desc);
-        useEventListener(permissionStatus, "change", onChange);
-        onChange();
+        permissionStatus.value = await navigator.permissions.query(desc);
       } catch (e) {
-        state.value = "prompt";
+        permissionStatus.value = void 0;
+      } finally {
+        update();
       }
     }
-    return permissionStatus;
+    if (controls)
+      return toRaw(permissionStatus.value);
   });
   query();
   if (controls) {
@@ -1508,25 +1661,35 @@ function useClipboard(options = {}) {
   const permissionRead = usePermission("clipboard-read");
   const permissionWrite = usePermission("clipboard-write");
   const isSupported = computed(() => isClipboardApiSupported.value || legacy);
-  const text = ref("");
-  const copied = ref(false);
-  const timeout = useTimeoutFn(() => copied.value = false, copiedDuring);
-  function updateText() {
-    if (isClipboardApiSupported.value && isAllowed(permissionRead.value)) {
-      navigator.clipboard.readText().then((value) => {
-        text.value = value;
-      });
-    } else {
+  const text = shallowRef("");
+  const copied = shallowRef(false);
+  const timeout = useTimeoutFn(() => copied.value = false, copiedDuring, { immediate: false });
+  async function updateText() {
+    let useLegacy = !(isClipboardApiSupported.value && isAllowed(permissionRead.value));
+    if (!useLegacy) {
+      try {
+        text.value = await navigator.clipboard.readText();
+      } catch (e) {
+        useLegacy = true;
+      }
+    }
+    if (useLegacy) {
       text.value = legacyRead();
     }
   }
   if (isSupported.value && read)
-    useEventListener(["copy", "cut"], updateText);
+    useEventListener(["copy", "cut"], updateText, { passive: true });
   async function copy(value = toValue(source)) {
     if (isSupported.value && value != null) {
-      if (isClipboardApiSupported.value && isAllowed(permissionWrite.value))
-        await navigator.clipboard.writeText(value);
-      else
+      let useLegacy = !(isClipboardApiSupported.value && isAllowed(permissionWrite.value));
+      if (!useLegacy) {
+        try {
+          await navigator.clipboard.writeText(value);
+        } catch (e) {
+          useLegacy = true;
+        }
+      }
+      if (useLegacy)
         legacyCopy(value);
       text.value = value;
       copied.value = true;
@@ -1567,8 +1730,8 @@ function useClipboardItems(options = {}) {
   } = options;
   const isSupported = useSupported(() => navigator && "clipboard" in navigator);
   const content = ref([]);
-  const copied = ref(false);
-  const timeout = useTimeoutFn(() => copied.value = false, copiedDuring);
+  const copied = shallowRef(false);
+  const timeout = useTimeoutFn(() => copied.value = false, copiedDuring, { immediate: false });
   function updateContent() {
     if (isSupported.value) {
       navigator.clipboard.read().then((items) => {
@@ -1576,8 +1739,9 @@ function useClipboardItems(options = {}) {
       });
     }
   }
-  if (isSupported.value && read)
-    useEventListener(["copy", "cut"], updateContent);
+  if (isSupported.value && read) {
+    useEventListener(["copy", "cut"], updateContent, { passive: true });
+  }
   async function copy(value = toValue(source)) {
     if (isSupported.value && value != null) {
       await navigator.clipboard.write(value);
@@ -1588,9 +1752,10 @@ function useClipboardItems(options = {}) {
   }
   return {
     isSupported,
-    content,
-    copied,
-    copy
+    content: shallowReadonly(content),
+    copied: readonly(copied),
+    copy,
+    read: updateContent
   };
 }
 
@@ -1599,6 +1764,8 @@ function cloneFnJSON(source) {
 }
 function useCloned(source, options = {}) {
   const cloned = ref({});
+  const isModified = shallowRef(false);
+  let _lastSync = false;
   const {
     manual,
     clone = cloneFnJSON,
@@ -1606,7 +1773,19 @@ function useCloned(source, options = {}) {
     deep = true,
     immediate = true
   } = options;
+  watch(cloned, () => {
+    if (_lastSync) {
+      _lastSync = false;
+      return;
+    }
+    isModified.value = true;
+  }, {
+    deep: true,
+    flush: "sync"
+  });
   function sync() {
+    _lastSync = true;
+    isModified.value = false;
     cloned.value = clone(toValue(source));
   }
   if (!manual && (isRef(source) || typeof source === "function")) {
@@ -1618,7 +1797,7 @@ function useCloned(source, options = {}) {
   } else {
     sync();
   }
-  return { cloned, sync };
+  return { cloned, isModified, sync };
 }
 
 const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
@@ -1636,6 +1815,11 @@ function setSSRHandler(key, fn) {
   handlers[key] = fn;
 }
 
+// @__NO_SIDE_EFFECTS__
+function usePreferredDark(options) {
+  return useMediaQuery("(prefers-color-scheme: dark)", options);
+}
+
 function guessSerializerType(rawInit) {
   return rawInit == null ? "any" : rawInit instanceof Set ? "set" : rawInit instanceof Map ? "map" : rawInit instanceof Date ? "date" : typeof rawInit === "boolean" ? "boolean" : typeof rawInit === "string" ? "string" : typeof rawInit === "object" ? "object" : !Number.isNaN(rawInit) ? "number" : "any";
 }
@@ -1692,6 +1876,7 @@ function useStorage(key, defaults, storage, options = {}) {
     initOnMounted
   } = options;
   const data = (shallow ? shallowRef : ref)(typeof defaults === "function" ? defaults() : defaults);
+  const keyComputed = computed(() => toValue(key));
   if (!storage) {
     try {
       storage = getSSRHandler("getDefaultStorage", () => {
@@ -1709,41 +1894,60 @@ function useStorage(key, defaults, storage, options = {}) {
   const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
   const { pause: pauseWatch, resume: resumeWatch } = watchPausable(
     data,
-    () => write(data.value),
+    (newValue) => write(newValue),
     { flush, deep, eventFilter }
   );
+  watch(keyComputed, () => update(), { flush });
+  let firstMounted = false;
+  const onStorageEvent = (ev) => {
+    if (initOnMounted && !firstMounted) {
+      return;
+    }
+    update(ev);
+  };
+  const onStorageCustomEvent = (ev) => {
+    if (initOnMounted && !firstMounted) {
+      return;
+    }
+    updateFromCustomEvent(ev);
+  };
   if (window && listenToStorageChanges) {
+    if (storage instanceof Storage)
+      useEventListener(window, "storage", onStorageEvent, { passive: true });
+    else
+      useEventListener(window, customStorageEventName, onStorageCustomEvent);
+  }
+  if (initOnMounted) {
     tryOnMounted(() => {
-      useEventListener(window, "storage", update);
-      useEventListener(window, customStorageEventName, updateFromCustomEvent);
-      if (initOnMounted)
-        update();
+      firstMounted = true;
+      update();
     });
-  }
-  if (!initOnMounted)
+  } else {
     update();
+  }
   function dispatchWriteEvent(oldValue, newValue) {
     if (window) {
-      window.dispatchEvent(new CustomEvent(customStorageEventName, {
-        detail: {
-          key,
-          oldValue,
-          newValue,
-          storageArea: storage
-        }
+      const payload = {
+        key: keyComputed.value,
+        oldValue,
+        newValue,
+        storageArea: storage
+      };
+      window.dispatchEvent(storage instanceof Storage ? new StorageEvent("storage", payload) : new CustomEvent(customStorageEventName, {
+        detail: payload
       }));
     }
   }
   function write(v) {
     try {
-      const oldValue = storage.getItem(key);
+      const oldValue = storage.getItem(keyComputed.value);
       if (v == null) {
         dispatchWriteEvent(oldValue, null);
-        storage.removeItem(key);
+        storage.removeItem(keyComputed.value);
       } else {
         const serialized = serializer.write(v);
         if (oldValue !== serialized) {
-          storage.setItem(key, serialized);
+          storage.setItem(keyComputed.value, serialized);
           dispatchWriteEvent(oldValue, serialized);
         }
       }
@@ -1752,10 +1956,10 @@ function useStorage(key, defaults, storage, options = {}) {
     }
   }
   function read(event) {
-    const rawValue = event ? event.newValue : storage.getItem(key);
+    const rawValue = event ? event.newValue : storage.getItem(keyComputed.value);
     if (rawValue == null) {
       if (writeDefaults && rawInit != null)
-        storage.setItem(key, serializer.write(rawInit));
+        storage.setItem(keyComputed.value, serializer.write(rawInit));
       return rawInit;
     } else if (!event && mergeDefaults) {
       const value = serializer.read(rawValue);
@@ -1777,12 +1981,15 @@ function useStorage(key, defaults, storage, options = {}) {
       data.value = rawInit;
       return;
     }
-    if (event && event.key !== key)
+    if (event && event.key !== keyComputed.value) {
       return;
+    }
     pauseWatch();
     try {
-      if ((event == null ? void 0 : event.newValue) !== serializer.write(data.value))
+      const serializedData = serializer.write(data.value);
+      if (event === void 0 || (event == null ? void 0 : event.newValue) !== serializedData) {
         data.value = read(event);
+      }
     } catch (e) {
       onError(e);
     } finally {
@@ -1798,10 +2005,7 @@ function useStorage(key, defaults, storage, options = {}) {
   return data;
 }
 
-function usePreferredDark(options) {
-  return useMediaQuery("(prefers-color-scheme: dark)", options);
-}
-
+const CSS_DISABLE_TRANS = "*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";
 function useColorMode(options = {}) {
   const {
     selector = "html",
@@ -1831,23 +2035,36 @@ function useColorMode(options = {}) {
       const el = typeof selector2 === "string" ? window == null ? void 0 : window.document.querySelector(selector2) : unrefElement(selector2);
       if (!el)
         return;
-      let style;
-      if (disableTransition) {
-        style = window.document.createElement("style");
-        const styleString = "*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";
-        style.appendChild(document.createTextNode(styleString));
-        window.document.head.appendChild(style);
-      }
+      const classesToAdd = /* @__PURE__ */ new Set();
+      const classesToRemove = /* @__PURE__ */ new Set();
+      let attributeToChange = null;
       if (attribute2 === "class") {
         const current = value.split(/\s/g);
         Object.values(modes).flatMap((i) => (i || "").split(/\s/g)).filter(Boolean).forEach((v) => {
           if (current.includes(v))
-            el.classList.add(v);
+            classesToAdd.add(v);
           else
-            el.classList.remove(v);
+            classesToRemove.add(v);
         });
       } else {
-        el.setAttribute(attribute2, value);
+        attributeToChange = { key: attribute2, value };
+      }
+      if (classesToAdd.size === 0 && classesToRemove.size === 0 && attributeToChange === null)
+        return;
+      let style;
+      if (disableTransition) {
+        style = window.document.createElement("style");
+        style.appendChild(document.createTextNode(CSS_DISABLE_TRANS));
+        window.document.head.appendChild(style);
+      }
+      for (const c of classesToAdd) {
+        el.classList.add(c);
+      }
+      for (const c of classesToRemove) {
+        el.classList.remove(c);
+      }
+      if (attributeToChange) {
+        el.setAttribute(attributeToChange.key, attributeToChange.value);
       }
       if (disableTransition) {
         window.getComputedStyle(style).opacity;
@@ -1875,14 +2092,11 @@ function useColorMode(options = {}) {
       store.value = v;
     }
   });
-  try {
-    return Object.assign(auto, { store, system, state });
-  } catch (e) {
-    return auto;
-  }
+  return Object.assign(auto, { store, system, state });
 }
 
-function useConfirmDialog(revealed = ref(false)) {
+// @__NO_SIDE_EFFECTS__
+function useConfirmDialog(revealed = shallowRef(false)) {
   const confirmHook = createEventHook();
   const cancelHook = createEventHook();
   const revealHook = createEventHook();
@@ -1915,9 +2129,52 @@ function useConfirmDialog(revealed = ref(false)) {
   };
 }
 
+function useCountdown(initialCountdown, options) {
+  var _a, _b;
+  const remaining = shallowRef(toValue(initialCountdown));
+  const intervalController = useIntervalFn(() => {
+    var _a2, _b2;
+    const value = remaining.value - 1;
+    remaining.value = value < 0 ? 0 : value;
+    (_a2 = options == null ? void 0 : options.onTick) == null ? void 0 : _a2.call(options);
+    if (remaining.value <= 0) {
+      intervalController.pause();
+      (_b2 = options == null ? void 0 : options.onComplete) == null ? void 0 : _b2.call(options);
+    }
+  }, (_a = options == null ? void 0 : options.interval) != null ? _a : 1e3, { immediate: (_b = options == null ? void 0 : options.immediate) != null ? _b : false });
+  const reset = (countdown) => {
+    var _a2;
+    remaining.value = (_a2 = toValue(countdown)) != null ? _a2 : toValue(initialCountdown);
+  };
+  const stop = () => {
+    intervalController.pause();
+    reset();
+  };
+  const resume = () => {
+    if (!intervalController.isActive.value) {
+      if (remaining.value > 0) {
+        intervalController.resume();
+      }
+    }
+  };
+  const start = (countdown) => {
+    reset(countdown);
+    intervalController.resume();
+  };
+  return {
+    remaining,
+    reset,
+    stop,
+    start,
+    pause: intervalController.pause,
+    resume,
+    isActive: intervalController.isActive
+  };
+}
+
 function useCssVar(prop, target, options = {}) {
-  const { window = defaultWindow, initialValue = "", observe = false } = options;
-  const variable = ref(initialValue);
+  const { window = defaultWindow, initialValue, observe = false } = options;
+  const variable = shallowRef(initialValue);
   const elRef = computed(() => {
     var _a;
     return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
@@ -1926,9 +2183,9 @@ function useCssVar(prop, target, options = {}) {
     var _a;
     const key = toValue(prop);
     const el = toValue(elRef);
-    if (el && window) {
+    if (el && window && key) {
       const value = (_a = window.getComputedStyle(el).getPropertyValue(key)) == null ? void 0 : _a.trim();
-      variable.value = value || initialValue;
+      variable.value = value || variable.value || initialValue;
     }
   }
   if (observe) {
@@ -1939,16 +2196,25 @@ function useCssVar(prop, target, options = {}) {
   }
   watch(
     [elRef, () => toValue(prop)],
-    updateCssVar,
+    (_, old) => {
+      if (old[0] && old[1])
+        old[0].style.removeProperty(old[1]);
+      updateCssVar();
+    },
     { immediate: true }
   );
   watch(
-    variable,
-    (val) => {
-      var _a;
-      if ((_a = elRef.value) == null ? void 0 : _a.style)
-        elRef.value.style.setProperty(toValue(prop), val);
-    }
+    [variable, elRef],
+    ([val, el]) => {
+      const raw_prop = toValue(prop);
+      if ((el == null ? void 0 : el.style) && raw_prop) {
+        if (val == null)
+          el.style.removeProperty(raw_prop);
+        else
+          el.style.setProperty(raw_prop, val);
+      }
+    },
+    { immediate: true }
   );
   return variable;
 }
@@ -2014,8 +2280,7 @@ function useCycleList(list, options) {
 function useDark(options = {}) {
   const {
     valueDark = "dark",
-    valueLight = "",
-    window = defaultWindow
+    valueLight = ""
   } = options;
   const mode = useColorMode({
     ...options,
@@ -2031,14 +2296,7 @@ function useDark(options = {}) {
       light: valueLight
     }
   });
-  const system = computed(() => {
-    if (mode.system) {
-      return mode.system.value;
-    } else {
-      const preferredDark = usePreferredDark({ window });
-      return preferredDark.value ? "dark" : "light";
-    }
-  });
+  const system = computed(() => mode.system.value);
   const isDark = computed({
     get() {
       return mode.value === "dark";
@@ -2138,7 +2396,8 @@ function useRefHistory(source, options = {}) {
   const {
     deep = false,
     flush = "pre",
-    eventFilter
+    eventFilter,
+    shouldCommit = () => true
   } = options;
   const {
     eventFilter: composedFilter,
@@ -2146,6 +2405,7 @@ function useRefHistory(source, options = {}) {
     resume: resumeTracking,
     isActive: isTracking
   } = pausableFilter(eventFilter);
+  let lastRawValue = source.value;
   const {
     ignoreUpdates,
     ignorePrevAsyncUpdates,
@@ -2159,12 +2419,16 @@ function useRefHistory(source, options = {}) {
     ignorePrevAsyncUpdates();
     ignoreUpdates(() => {
       source2.value = value;
+      lastRawValue = value;
     });
   }
   const manualHistory = useManualRefHistory(source, { ...options, clone: options.clone || deep, setSource });
   const { clear, commit: manualCommit } = manualHistory;
   function commit() {
     ignorePrevAsyncUpdates();
+    if (!shouldCommit(lastRawValue, source.value))
+      return;
+    lastRawValue = source.value;
     manualCommit();
   }
   function resume(commitNow) {
@@ -2207,50 +2471,99 @@ function useDebouncedRefHistory(source, options = {}) {
 function useDeviceMotion(options = {}) {
   const {
     window = defaultWindow,
+    requestPermissions = false,
     eventFilter = bypassFilter
   } = options;
+  const isSupported = useSupported(() => typeof DeviceMotionEvent !== "undefined");
+  const requirePermissions = useSupported(() => isSupported.value && "requestPermission" in DeviceMotionEvent && typeof DeviceMotionEvent.requestPermission === "function");
+  const permissionGranted = shallowRef(false);
   const acceleration = ref({ x: null, y: null, z: null });
   const rotationRate = ref({ alpha: null, beta: null, gamma: null });
-  const interval = ref(0);
+  const interval = shallowRef(0);
   const accelerationIncludingGravity = ref({
     x: null,
     y: null,
     z: null
   });
-  if (window) {
-    const onDeviceMotion = createFilterWrapper(
-      eventFilter,
-      (event) => {
-        acceleration.value = event.acceleration;
-        accelerationIncludingGravity.value = event.accelerationIncludingGravity;
-        rotationRate.value = event.rotationRate;
-        interval.value = event.interval;
+  function init() {
+    if (window) {
+      const onDeviceMotion = createFilterWrapper(
+        eventFilter,
+        (event) => {
+          var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+          acceleration.value = {
+            x: ((_a = event.acceleration) == null ? void 0 : _a.x) || null,
+            y: ((_b = event.acceleration) == null ? void 0 : _b.y) || null,
+            z: ((_c = event.acceleration) == null ? void 0 : _c.z) || null
+          };
+          accelerationIncludingGravity.value = {
+            x: ((_d = event.accelerationIncludingGravity) == null ? void 0 : _d.x) || null,
+            y: ((_e = event.accelerationIncludingGravity) == null ? void 0 : _e.y) || null,
+            z: ((_f = event.accelerationIncludingGravity) == null ? void 0 : _f.z) || null
+          };
+          rotationRate.value = {
+            alpha: ((_g = event.rotationRate) == null ? void 0 : _g.alpha) || null,
+            beta: ((_h = event.rotationRate) == null ? void 0 : _h.beta) || null,
+            gamma: ((_i = event.rotationRate) == null ? void 0 : _i.gamma) || null
+          };
+          interval.value = event.interval;
+        }
+      );
+      useEventListener(window, "devicemotion", onDeviceMotion, { passive: true });
+    }
+  }
+  const ensurePermissions = async () => {
+    if (!requirePermissions.value)
+      permissionGranted.value = true;
+    if (permissionGranted.value)
+      return;
+    if (requirePermissions.value) {
+      const requestPermission = DeviceMotionEvent.requestPermission;
+      try {
+        const response = await requestPermission();
+        if (response === "granted") {
+          permissionGranted.value = true;
+          init();
+        }
+      } catch (error) {
+        console.error(error);
       }
-    );
-    useEventListener(window, "devicemotion", onDeviceMotion);
+    }
+  };
+  if (isSupported.value) {
+    if (requestPermissions && requirePermissions.value) {
+      ensurePermissions().then(() => init());
+    } else {
+      init();
+    }
   }
   return {
     acceleration,
     accelerationIncludingGravity,
     rotationRate,
-    interval
+    interval,
+    isSupported,
+    requirePermissions,
+    ensurePermissions,
+    permissionGranted
   };
 }
 
+// @__NO_SIDE_EFFECTS__
 function useDeviceOrientation(options = {}) {
   const { window = defaultWindow } = options;
   const isSupported = useSupported(() => window && "DeviceOrientationEvent" in window);
-  const isAbsolute = ref(false);
-  const alpha = ref(null);
-  const beta = ref(null);
-  const gamma = ref(null);
+  const isAbsolute = shallowRef(false);
+  const alpha = shallowRef(null);
+  const beta = shallowRef(null);
+  const gamma = shallowRef(null);
   if (window && isSupported.value) {
     useEventListener(window, "deviceorientation", (event) => {
       isAbsolute.value = event.absolute;
       alpha.value = event.alpha;
       beta.value = event.beta;
       gamma.value = event.gamma;
-    });
+    }, { passive: true });
   }
   return {
     isSupported,
@@ -2261,25 +2574,21 @@ function useDeviceOrientation(options = {}) {
   };
 }
 
+// @__NO_SIDE_EFFECTS__
 function useDevicePixelRatio(options = {}) {
   const {
     window = defaultWindow
   } = options;
-  const pixelRatio = ref(1);
+  const pixelRatio = shallowRef(1);
+  const query = useMediaQuery(() => `(resolution: ${pixelRatio.value}dppx)`, options);
+  let stop = noop;
   if (window) {
-    let observe2 = function() {
-      pixelRatio.value = window.devicePixelRatio;
-      cleanup2();
-      media = window.matchMedia(`(resolution: ${pixelRatio.value}dppx)`);
-      media.addEventListener("change", observe2, { once: true });
-    }, cleanup2 = function() {
-      media == null ? void 0 : media.removeEventListener("change", observe2);
-    };
-    let media;
-    observe2();
-    tryOnScopeDispose(cleanup2);
+    stop = watchImmediate(query, () => pixelRatio.value = window.devicePixelRatio);
   }
-  return { pixelRatio };
+  return {
+    pixelRatio: readonly(pixelRatio),
+    stop
+  };
 }
 
 function useDevicesList(options = {}) {
@@ -2294,7 +2603,7 @@ function useDevicesList(options = {}) {
   const audioInputs = computed(() => devices.value.filter((i) => i.kind === "audioinput"));
   const audioOutputs = computed(() => devices.value.filter((i) => i.kind === "audiooutput"));
   const isSupported = useSupported(() => navigator && navigator.mediaDevices && navigator.mediaDevices.enumerateDevices);
-  const permissionGranted = ref(false);
+  const permissionGranted = shallowRef(false);
   let stream;
   async function update() {
     if (!isSupported.value)
@@ -2307,16 +2616,28 @@ function useDevicesList(options = {}) {
     }
   }
   async function ensurePermissions() {
+    const deviceName = constraints.video ? "camera" : "microphone";
     if (!isSupported.value)
       return false;
     if (permissionGranted.value)
       return true;
-    const { state, query } = usePermission("camera", { controls: true });
+    const { state, query } = usePermission(deviceName, { controls: true });
     await query();
     if (state.value !== "granted") {
-      stream = await navigator.mediaDevices.getUserMedia(constraints);
+      let granted = true;
+      try {
+        const allDevices = await navigator.mediaDevices.enumerateDevices();
+        const hasCamera = allDevices.some((device) => device.kind === "videoinput");
+        const hasMicrophone = allDevices.some((device) => device.kind === "audioinput" || device.kind === "audiooutput");
+        constraints.video = hasCamera ? constraints.video : false;
+        constraints.audio = hasMicrophone ? constraints.audio : false;
+        stream = await navigator.mediaDevices.getUserMedia(constraints);
+      } catch (e) {
+        stream = null;
+        granted = false;
+      }
       update();
-      permissionGranted.value = true;
+      permissionGranted.value = granted;
     } else {
       permissionGranted.value = true;
     }
@@ -2325,7 +2646,7 @@ function useDevicesList(options = {}) {
   if (isSupported.value) {
     if (requestPermissions)
       ensurePermissions();
-    useEventListener(navigator.mediaDevices, "devicechange", update);
+    useEventListener(navigator.mediaDevices, "devicechange", update, { passive: true });
     update();
   }
   return {
@@ -2341,7 +2662,7 @@ function useDevicesList(options = {}) {
 
 function useDisplayMedia(options = {}) {
   var _a;
-  const enabled = ref((_a = options.enabled) != null ? _a : false);
+  const enabled = shallowRef((_a = options.enabled) != null ? _a : false);
   const video = options.video;
   const audio = options.audio;
   const { navigator = defaultNavigator } = options;
@@ -2356,7 +2677,7 @@ function useDisplayMedia(options = {}) {
     if (!isSupported.value || stream.value)
       return;
     stream.value = await navigator.mediaDevices.getDisplayMedia(constraint);
-    (_a2 = stream.value) == null ? void 0 : _a2.getTracks().forEach((t) => t.addEventListener("ended", stop));
+    (_a2 = stream.value) == null ? void 0 : _a2.getTracks().forEach((t) => useEventListener(t, "ended", stop, { passive: true }));
     return stream.value;
   }
   async function _stop() {
@@ -2393,19 +2714,20 @@ function useDisplayMedia(options = {}) {
   };
 }
 
+// @__NO_SIDE_EFFECTS__
 function useDocumentVisibility(options = {}) {
   const { document = defaultDocument } = options;
   if (!document)
-    return ref("visible");
-  const visibility = ref(document.visibilityState);
+    return shallowRef("visible");
+  const visibility = shallowRef(document.visibilityState);
   useEventListener(document, "visibilitychange", () => {
     visibility.value = document.visibilityState;
-  });
+  }, { passive: true });
   return visibility;
 }
 
 function useDraggable(target, options = {}) {
-  var _a, _b;
+  var _a;
   const {
     pointerTypes,
     preventDefault,
@@ -2418,7 +2740,8 @@ function useDraggable(target, options = {}) {
     axis = "both",
     draggingElement = defaultWindow,
     containerElement,
-    handle: draggingHandle = target
+    handle: draggingHandle = target,
+    buttons = [0]
   } = options;
   const position = ref(
     (_a = toValue(initialValue)) != null ? _a : { x: 0, y: 0 }
@@ -2437,7 +2760,7 @@ function useDraggable(target, options = {}) {
   };
   const start = (e) => {
     var _a2;
-    if (e.button !== 0)
+    if (!toValue(buttons).includes(e.button))
       return;
     if (toValue(options.disabled) || !filterEvent(e))
       return;
@@ -2490,7 +2813,13 @@ function useDraggable(target, options = {}) {
     handleEvent(e);
   };
   if (isClient) {
-    const config = { capture: (_b = options.capture) != null ? _b : true };
+    const config = () => {
+      var _a2;
+      return {
+        capture: (_a2 = options.capture) != null ? _a2 : true,
+        passive: !toValue(preventDefault)
+      };
+    };
     useEventListener(draggingHandle, "pointerdown", start, config);
     useEventListener(draggingElement, "pointermove", move, config);
     useEventListener(draggingElement, "pointerup", end, config);
@@ -2506,55 +2835,86 @@ function useDraggable(target, options = {}) {
 }
 
 function useDropZone(target, options = {}) {
-  const isOverDropZone = ref(false);
+  var _a, _b;
+  const isOverDropZone = shallowRef(false);
   const files = shallowRef(null);
   let counter = 0;
-  let isDataTypeIncluded = true;
+  let isValid = true;
   if (isClient) {
     const _options = typeof options === "function" ? { onDrop: options } : options;
+    const multiple = (_a = _options.multiple) != null ? _a : true;
+    const preventDefaultForUnhandled = (_b = _options.preventDefaultForUnhandled) != null ? _b : false;
     const getFiles = (event) => {
-      var _a, _b;
-      const list = Array.from((_b = (_a = event.dataTransfer) == null ? void 0 : _a.files) != null ? _b : []);
-      return files.value = list.length === 0 ? null : list;
+      var _a2, _b2;
+      const list = Array.from((_b2 = (_a2 = event.dataTransfer) == null ? void 0 : _a2.files) != null ? _b2 : []);
+      return list.length === 0 ? null : multiple ? list : [list[0]];
     };
-    useEventListener(target, "dragenter", (event) => {
-      var _a, _b;
-      const types = Array.from(((_a = event == null ? void 0 : event.dataTransfer) == null ? void 0 : _a.items) || []).map((i) => i.kind === "file" ? i.type : null).filter(notNullish);
-      if (_options.dataTypes && event.dataTransfer) {
-        const dataTypes = unref(_options.dataTypes);
-        isDataTypeIncluded = typeof dataTypes === "function" ? dataTypes(types) : dataTypes ? dataTypes.some((item) => types.includes(item)) : true;
-        if (!isDataTypeIncluded)
-          return;
+    const checkDataTypes = (types) => {
+      const dataTypes = unref(_options.dataTypes);
+      if (typeof dataTypes === "function")
+        return dataTypes(types);
+      if (!(dataTypes == null ? void 0 : dataTypes.length))
+        return true;
+      if (types.length === 0)
+        return false;
+      return types.every(
+        (type) => dataTypes.some((allowedType) => type.includes(allowedType))
+      );
+    };
+    const checkValidity = (items) => {
+      const types = Array.from(items != null ? items : []).map((item) => item.type);
+      const dataTypesValid = checkDataTypes(types);
+      const multipleFilesValid = multiple || items.length <= 1;
+      return dataTypesValid && multipleFilesValid;
+    };
+    const isSafari = () => /^(?:(?!chrome|android).)*safari/i.test(navigator.userAgent) && !("chrome" in window);
+    const handleDragEvent = (event, eventType) => {
+      var _a2, _b2, _c, _d, _e, _f;
+      const dataTransferItemList = (_a2 = event.dataTransfer) == null ? void 0 : _a2.items;
+      isValid = (_b2 = dataTransferItemList && checkValidity(dataTransferItemList)) != null ? _b2 : false;
+      if (preventDefaultForUnhandled) {
+        event.preventDefault();
       }
-      event.preventDefault();
-      counter += 1;
-      isOverDropZone.value = true;
-      (_b = _options.onEnter) == null ? void 0 : _b.call(_options, getFiles(event), event);
-    });
-    useEventListener(target, "dragover", (event) => {
-      var _a;
-      if (!isDataTypeIncluded)
-        return;
-      event.preventDefault();
-      (_a = _options.onOver) == null ? void 0 : _a.call(_options, getFiles(event), event);
-    });
-    useEventListener(target, "dragleave", (event) => {
-      var _a;
-      if (!isDataTypeIncluded)
+      if (!isSafari() && !isValid) {
+        if (event.dataTransfer) {
+          event.dataTransfer.dropEffect = "none";
+        }
         return;
+      }
       event.preventDefault();
-      counter -= 1;
-      if (counter === 0)
-        isOverDropZone.value = false;
-      (_a = _options.onLeave) == null ? void 0 : _a.call(_options, getFiles(event), event);
-    });
-    useEventListener(target, "drop", (event) => {
-      var _a;
-      event.preventDefault();
-      counter = 0;
-      isOverDropZone.value = false;
-      (_a = _options.onDrop) == null ? void 0 : _a.call(_options, getFiles(event), event);
-    });
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = "copy";
+      }
+      const currentFiles = getFiles(event);
+      switch (eventType) {
+        case "enter":
+          counter += 1;
+          isOverDropZone.value = true;
+          (_c = _options.onEnter) == null ? void 0 : _c.call(_options, null, event);
+          break;
+        case "over":
+          (_d = _options.onOver) == null ? void 0 : _d.call(_options, null, event);
+          break;
+        case "leave":
+          counter -= 1;
+          if (counter === 0)
+            isOverDropZone.value = false;
+          (_e = _options.onLeave) == null ? void 0 : _e.call(_options, null, event);
+          break;
+        case "drop":
+          counter = 0;
+          isOverDropZone.value = false;
+          if (isValid) {
+            files.value = currentFiles;
+            (_f = _options.onDrop) == null ? void 0 : _f.call(_options, currentFiles, event);
+          }
+          break;
+      }
+    };
+    useEventListener(target, "dragenter", (event) => handleDragEvent(event, "enter"));
+    useEventListener(target, "dragover", (event) => handleDragEvent(event, "over"));
+    useEventListener(target, "dragleave", (event) => handleDragEvent(event, "leave"));
+    useEventListener(target, "drop", (event) => handleDragEvent(event, "drop"));
   }
   return {
     files,
@@ -2572,15 +2932,20 @@ function useResizeObserver(target, callback, options = {}) {
       observer = void 0;
     }
   };
-  const targets = computed(() => Array.isArray(target) ? target.map((el) => unrefElement(el)) : [unrefElement(target)]);
+  const targets = computed(() => {
+    const _targets = toValue(target);
+    return Array.isArray(_targets) ? _targets.map((el) => unrefElement(el)) : [unrefElement(_targets)];
+  });
   const stopWatch = watch(
     targets,
     (els) => {
       cleanup();
       if (isSupported.value && window) {
         observer = new ResizeObserver(callback);
-        for (const _el of els)
-          _el && observer.observe(_el, observerOptions);
+        for (const _el of els) {
+          if (_el)
+            observer.observe(_el, observerOptions);
+        }
       }
     },
     { immediate: true, flush: "post" }
@@ -2601,17 +2966,18 @@ function useElementBounding(target, options = {}) {
     reset = true,
     windowResize = true,
     windowScroll = true,
-    immediate = true
+    immediate = true,
+    updateTiming = "sync"
   } = options;
-  const height = ref(0);
-  const bottom = ref(0);
-  const left = ref(0);
-  const right = ref(0);
-  const top = ref(0);
-  const width = ref(0);
-  const x = ref(0);
-  const y = ref(0);
-  function update() {
+  const height = shallowRef(0);
+  const bottom = shallowRef(0);
+  const left = shallowRef(0);
+  const right = shallowRef(0);
+  const top = shallowRef(0);
+  const width = shallowRef(0);
+  const x = shallowRef(0);
+  const y = shallowRef(0);
+  function recalculate() {
     const el = unrefElement(target);
     if (!el) {
       if (reset) {
@@ -2636,6 +3002,12 @@ function useElementBounding(target, options = {}) {
     x.value = rect.x;
     y.value = rect.y;
   }
+  function update() {
+    if (updateTiming === "sync")
+      recalculate();
+    else if (updateTiming === "next-frame")
+      requestAnimationFrame(() => recalculate());
+  }
   useResizeObserver(target, update);
   watch(() => unrefElement(target), (ele) => !ele && update());
   useMutationObserver(target, update, {
@@ -2676,7 +3048,7 @@ function useElementByPoint(options) {
       return document && "elementsFromPoint" in document;
     return document && "elementFromPoint" in document;
   });
-  const element = ref(null);
+  const element = shallowRef(null);
   const cb = () => {
     var _a, _b;
     element.value = toValue(multiple) ? (_a = document == null ? void 0 : document.elementsFromPoint(toValue(x), toValue(y))) != null ? _a : [] : (_b = document == null ? void 0 : document.elementFromPoint(toValue(x), toValue(y))) != null ? _b : null;
@@ -2693,9 +3065,10 @@ function useElementHover(el, options = {}) {
   const {
     delayEnter = 0,
     delayLeave = 0,
+    triggerOnRemoval = false,
     window = defaultWindow
   } = options;
-  const isHovered = ref(false);
+  const isHovered = shallowRef(false);
   let timer;
   const toggle = (entering) => {
     const delay = entering ? delayEnter : delayLeave;
@@ -2712,6 +3085,12 @@ function useElementHover(el, options = {}) {
     return isHovered;
   useEventListener(el, "mouseenter", () => toggle(true), { passive: true });
   useEventListener(el, "mouseleave", () => toggle(false), { passive: true });
+  if (triggerOnRemoval) {
+    onElementRemoval(
+      computed(() => unrefElement(el)),
+      () => toggle(false)
+    );
+  }
   return isHovered;
 }
 
@@ -2721,8 +3100,8 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
     var _a, _b;
     return (_b = (_a = unrefElement(target)) == null ? void 0 : _a.namespaceURI) == null ? void 0 : _b.includes("svg");
   });
-  const width = ref(initialSize.width);
-  const height = ref(initialSize.height);
+  const width = shallowRef(initialSize.width);
+  const height = shallowRef(initialSize.height);
   const { stop: stop1 } = useResizeObserver(
     target,
     ([entry]) => {
@@ -2736,7 +3115,7 @@ function useElementSize(target, initialSize = { width: 0, height: 0 }, options =
         }
       } else {
         if (boxSize) {
-          const formatBoxSize = Array.isArray(boxSize) ? boxSize : [boxSize];
+          const formatBoxSize = toArray(boxSize);
           width.value = formatBoxSize.reduce((acc, { inlineSize }) => acc + inlineSize, 0);
           height.value = formatBoxSize.reduce((acc, { blockSize }) => acc + blockSize, 0);
         } else {
@@ -2776,17 +3155,17 @@ function useIntersectionObserver(target, callback, options = {}) {
   const {
     root,
     rootMargin = "0px",
-    threshold = 0.1,
+    threshold = 0,
     window = defaultWindow,
     immediate = true
   } = options;
   const isSupported = useSupported(() => window && "IntersectionObserver" in window);
   const targets = computed(() => {
     const _target = toValue(target);
-    return (Array.isArray(_target) ? _target : [_target]).map(unrefElement).filter(notNullish);
+    return toArray(_target).map(unrefElement).filter(notNullish);
   });
   let cleanup = noop;
-  const isActive = ref(immediate);
+  const isActive = shallowRef(immediate);
   const stopWatch = isSupported.value ? watch(
     () => [targets.value, unrefElement(root), isActive.value],
     ([targets2, root2]) => {
@@ -2832,9 +3211,15 @@ function useIntersectionObserver(target, callback, options = {}) {
 }
 
 function useElementVisibility(element, options = {}) {
-  const { window = defaultWindow, scrollTarget, threshold = 0 } = options;
-  const elementIsVisible = ref(false);
-  useIntersectionObserver(
+  const {
+    window = defaultWindow,
+    scrollTarget,
+    threshold = 0,
+    rootMargin,
+    once = false
+  } = options;
+  const elementIsVisible = shallowRef(false);
+  const { stop } = useIntersectionObserver(
     element,
     (intersectionObserverEntries) => {
       let isIntersecting = elementIsVisible.value;
@@ -2846,11 +3231,17 @@ function useElementVisibility(element, options = {}) {
         }
       }
       elementIsVisible.value = isIntersecting;
+      if (once) {
+        watchOnce(elementIsVisible, () => {
+          stop();
+        });
+      }
     },
     {
       root: scrollTarget,
       window,
-      threshold
+      threshold,
+      rootMargin: toValue(rootMargin)
     }
   );
   return elementIsVisible;
@@ -2858,6 +3249,7 @@ function useElementVisibility(element, options = {}) {
 
 const events = /* @__PURE__ */ new Map();
 
+// @__NO_SIDE_EFFECTS__
 function useEventBus(key) {
   const scope = getCurrentScope();
   function on(listener) {
@@ -2900,9 +3292,9 @@ function resolveNestedOptions$1(options) {
   return options;
 }
 function useEventSource(url, events = [], options = {}) {
-  const event = ref(null);
-  const data = ref(null);
-  const status = ref("CONNECTING");
+  const event = shallowRef(null);
+  const data = shallowRef(null);
+  const status = shallowRef("CONNECTING");
   const eventSource = ref(null);
   const error = shallowRef(null);
   const urlRef = toRef(url);
@@ -2911,7 +3303,9 @@ function useEventSource(url, events = [], options = {}) {
   let retried = 0;
   const {
     withCredentials = false,
-    immediate = true
+    immediate = true,
+    autoConnect = true,
+    autoReconnect
   } = options;
   const close = () => {
     if (isClient && eventSource.value) {
@@ -2934,13 +3328,13 @@ function useEventSource(url, events = [], options = {}) {
     es.onerror = (e) => {
       status.value = "CLOSED";
       error.value = e;
-      if (es.readyState === 2 && !explicitlyClosed && options.autoReconnect) {
+      if (es.readyState === 2 && !explicitlyClosed && autoReconnect) {
         es.close();
         const {
           retries = -1,
           delay = 1e3,
           onFailed
-        } = resolveNestedOptions$1(options.autoReconnect);
+        } = resolveNestedOptions$1(autoReconnect);
         retried += 1;
         if (typeof retries === "number" && (retries < 0 || retried < retries))
           setTimeout(_init, delay);
@@ -2959,7 +3353,8 @@ function useEventSource(url, events = [], options = {}) {
       useEventListener(es, event_name, (e) => {
         event.value = event_name;
         data.value = e.data || null;
-      });
+        lastEventId.value = e.lastEventId || null;
+      }, { passive: true });
     }
   };
   const open = () => {
@@ -2971,7 +3366,9 @@ function useEventSource(url, events = [], options = {}) {
     _init();
   };
   if (immediate)
-    watch(urlRef, open, { immediate: true });
+    open();
+  if (autoConnect)
+    watch(urlRef, open);
   tryOnScopeDispose(close);
   return {
     eventSource,
@@ -2985,10 +3382,11 @@ function useEventSource(url, events = [], options = {}) {
   };
 }
 
+// @__NO_SIDE_EFFECTS__
 function useEyeDropper(options = {}) {
   const { initialValue = "" } = options;
   const isSupported = useSupported(() => typeof window !== "undefined" && "EyeDropper" in window);
-  const sRGBHex = ref(initialValue);
+  const sRGBHex = shallowRef(initialValue);
   async function open(openOptions) {
     if (!isSupported.value)
       return;
@@ -3051,7 +3449,13 @@ function headersToObject(headers) {
 function combineCallbacks(combination, ...callbacks) {
   if (combination === "overwrite") {
     return async (ctx) => {
-      const callback = callbacks[callbacks.length - 1];
+      let callback;
+      for (let i = callbacks.length - 1; i >= 0; i--) {
+        if (callbacks[i] != null) {
+          callback = callbacks[i];
+          break;
+        }
+      }
       if (callback)
         return { ...ctx, ...await callback(ctx) };
       return ctx;
@@ -3112,7 +3516,7 @@ function createFetch(config = {}) {
   return useFactoryFetch;
 }
 function useFetch(url, ...args) {
-  var _a;
+  var _a, _b;
   const supportsAbort = typeof AbortController === "function";
   let fetchOptions = {};
   let options = {
@@ -3137,26 +3541,26 @@ function useFetch(url, ...args) {
       options = { ...options, ...args[1] };
   }
   const {
-    fetch = (_a = defaultWindow) == null ? void 0 : _a.fetch,
+    fetch = (_b = (_a = defaultWindow) == null ? void 0 : _a.fetch) != null ? _b : globalThis == null ? void 0 : globalThis.fetch,
     initialData,
     timeout
   } = options;
   const responseEvent = createEventHook();
   const errorEvent = createEventHook();
   const finallyEvent = createEventHook();
-  const isFinished = ref(false);
-  const isFetching = ref(false);
-  const aborted = ref(false);
-  const statusCode = ref(null);
+  const isFinished = shallowRef(false);
+  const isFetching = shallowRef(false);
+  const aborted = shallowRef(false);
+  const statusCode = shallowRef(null);
   const response = shallowRef(null);
   const error = shallowRef(null);
   const data = shallowRef(initialData || null);
   const canAbort = computed(() => supportsAbort && isFetching.value);
   let controller;
   let timer;
-  const abort = () => {
+  const abort = (reason) => {
     if (supportsAbort) {
-      controller == null ? void 0 : controller.abort();
+      controller == null ? void 0 : controller.abort(reason);
       controller = new AbortController();
       controller.signal.onabort = () => aborted.value = true;
       fetchOptions = {
@@ -3173,7 +3577,7 @@ function useFetch(url, ...args) {
     timer = useTimeoutFn(abort, timeout, { immediate: false });
   let executeCounter = 0;
   const execute = async (throwOnFailed = false) => {
-    var _a2, _b;
+    var _a2, _b2;
     abort();
     loading(true);
     error.value = null;
@@ -3185,10 +3589,11 @@ function useFetch(url, ...args) {
       method: config.method,
       headers: {}
     };
-    if (config.payload) {
+    const payload = toValue(config.payload);
+    if (payload) {
       const headers = headersToObject(defaultFetchOptions.headers);
-      const payload = toValue(config.payload);
-      if (!config.payloadType && payload && Object.getPrototypeOf(payload) === Object.prototype && !(payload instanceof FormData))
+      const proto = Object.getPrototypeOf(payload);
+      if (!config.payloadType && payload && (proto === Object.prototype || Array.isArray(proto)) && !(payload instanceof FormData))
         config.payloadType = "json";
       if (config.payloadType)
         headers["Content-Type"] = (_a2 = payloadMapping[config.payloadType]) != null ? _a2 : config.payloadType;
@@ -3221,7 +3626,7 @@ function useFetch(url, ...args) {
         ...context.options,
         headers: {
           ...headersToObject(defaultFetchOptions.headers),
-          ...headersToObject((_b = context.options) == null ? void 0 : _b.headers)
+          ...headersToObject((_b2 = context.options) == null ? void 0 : _b2.headers)
         }
       }
     ).then(async (fetchResponse) => {
@@ -3235,7 +3640,9 @@ function useFetch(url, ...args) {
       if (options.afterFetch) {
         ({ data: responseData } = await options.afterFetch({
           data: responseData,
-          response: fetchResponse
+          response: fetchResponse,
+          context,
+          execute
         }));
       }
       data.value = responseData;
@@ -3247,7 +3654,9 @@ function useFetch(url, ...args) {
         ({ error: errorData, data: responseData } = await options.onFetchError({
           data: responseData,
           error: fetchError,
-          response: response.value
+          response: response.value,
+          context,
+          execute
         }));
       }
       error.value = errorData;
@@ -3331,7 +3740,7 @@ function useFetch(url, ...args) {
   }
   function waitUntilFinished() {
     return new Promise((resolve, reject) => {
-      until(isFinished).toBe(true).then(() => resolve(shell)).catch((error2) => reject(error2));
+      until(isFinished).toBe(true).then(() => resolve(shell)).catch(reject);
     });
   }
   function setType(type) {
@@ -3358,8 +3767,12 @@ function useFetch(url, ...args) {
   };
 }
 function joinPaths(start, end) {
-  if (!start.endsWith("/") && !end.startsWith("/"))
+  if (!start.endsWith("/") && !end.startsWith("/")) {
     return `${start}/${end}`;
+  }
+  if (start.endsWith("/") && end.startsWith("/")) {
+    return `${start.slice(0, -1)}${end}`;
+  }
   return `${start}${end}`;
 }
 
@@ -3369,50 +3782,79 @@ const DEFAULT_OPTIONS = {
   reset: false,
   directory: false
 };
+function prepareInitialFiles(files) {
+  if (!files)
+    return null;
+  if (files instanceof FileList)
+    return files;
+  const dt = new DataTransfer();
+  for (const file of files) {
+    dt.items.add(file);
+  }
+  return dt.files;
+}
 function useFileDialog(options = {}) {
   const {
     document = defaultDocument
   } = options;
-  const files = ref(null);
-  const { on: onChange, trigger } = createEventHook();
-  let input;
-  if (document) {
-    input = document.createElement("input");
-    input.type = "file";
-    input.onchange = (event) => {
-      const result = event.target;
-      files.value = result.files;
-      trigger(files.value);
-    };
-  }
+  const files = ref(prepareInitialFiles(options.initialFiles));
+  const { on: onChange, trigger: changeTrigger } = createEventHook();
+  const { on: onCancel, trigger: cancelTrigger } = createEventHook();
+  const inputRef = computed(() => {
+    var _a;
+    const input = (_a = unrefElement(options.input)) != null ? _a : document ? document.createElement("input") : void 0;
+    if (input) {
+      input.type = "file";
+      input.onchange = (event) => {
+        const result = event.target;
+        files.value = result.files;
+        changeTrigger(files.value);
+      };
+      input.oncancel = () => {
+        cancelTrigger();
+      };
+    }
+    return input;
+  });
   const reset = () => {
     files.value = null;
-    if (input && input.value) {
-      input.value = "";
-      trigger(null);
+    if (inputRef.value && inputRef.value.value) {
+      inputRef.value.value = "";
+      changeTrigger(null);
     }
   };
+  const applyOptions = (options2) => {
+    const el = inputRef.value;
+    if (!el)
+      return;
+    el.multiple = toValue(options2.multiple);
+    el.accept = toValue(options2.accept);
+    el.webkitdirectory = toValue(options2.directory);
+    if (hasOwn(options2, "capture"))
+      el.capture = toValue(options2.capture);
+  };
   const open = (localOptions) => {
-    if (!input)
+    const el = inputRef.value;
+    if (!el)
       return;
-    const _options = {
+    const mergedOptions = {
       ...DEFAULT_OPTIONS,
       ...options,
       ...localOptions
     };
-    input.multiple = _options.multiple;
-    input.accept = _options.accept;
-    input.webkitdirectory = _options.directory;
-    if (hasOwn(_options, "capture"))
-      input.capture = _options.capture;
-    if (_options.reset)
+    applyOptions(mergedOptions);
+    if (toValue(mergedOptions.reset))
       reset();
-    input.click();
+    el.click();
   };
+  watchEffect(() => {
+    applyOptions(options);
+  });
   return {
     files: readonly(files),
     open,
     reset,
+    onCancel,
     onChange
   };
 }
@@ -3424,9 +3866,9 @@ function useFileSystemAccess(options = {}) {
   } = options;
   const window = _window;
   const isSupported = useSupported(() => window && "showSaveFilePicker" in window && "showOpenFilePicker" in window);
-  const fileHandle = ref();
-  const data = ref();
-  const file = ref();
+  const fileHandle = shallowRef();
+  const data = shallowRef();
+  const file = shallowRef();
   const fileName = computed(() => {
     var _a, _b;
     return (_b = (_a = file.value) == null ? void 0 : _a.name) != null ? _b : "";
@@ -3514,14 +3956,15 @@ function useFileSystemAccess(options = {}) {
 
 function useFocus(target, options = {}) {
   const { initialValue = false, focusVisible = false, preventScroll = false } = options;
-  const innerFocused = ref(false);
+  const innerFocused = shallowRef(false);
   const targetElement = computed(() => unrefElement(target));
+  const listenerOptions = { passive: true };
   useEventListener(targetElement, "focus", (event) => {
     var _a, _b;
     if (!focusVisible || ((_b = (_a = event.target).matches) == null ? void 0 : _b.call(_a, ":focus-visible")))
       innerFocused.value = true;
-  });
-  useEventListener(targetElement, "blur", () => innerFocused.value = false);
+  }, listenerOptions);
+  useEventListener(targetElement, "blur", () => innerFocused.value = false, listenerOptions);
   const focused = computed({
     get: () => innerFocused.value,
     set(value) {
@@ -3542,16 +3985,31 @@ function useFocus(target, options = {}) {
   return { focused };
 }
 
+const EVENT_FOCUS_IN = "focusin";
+const EVENT_FOCUS_OUT = "focusout";
+const PSEUDO_CLASS_FOCUS_WITHIN = ":focus-within";
 function useFocusWithin(target, options = {}) {
-  const activeElement = useActiveElement(options);
+  const { window = defaultWindow } = options;
   const targetElement = computed(() => unrefElement(target));
-  const focused = computed(() => targetElement.value && activeElement.value ? targetElement.value.contains(activeElement.value) : false);
+  const _focused = shallowRef(false);
+  const focused = computed(() => _focused.value);
+  const activeElement = useActiveElement(options);
+  if (!window || !activeElement.value) {
+    return { focused };
+  }
+  const listenerOptions = { passive: true };
+  useEventListener(targetElement, EVENT_FOCUS_IN, () => _focused.value = true, listenerOptions);
+  useEventListener(targetElement, EVENT_FOCUS_OUT, () => {
+    var _a, _b, _c;
+    return _focused.value = (_c = (_b = (_a = targetElement.value) == null ? void 0 : _a.matches) == null ? void 0 : _b.call(_a, PSEUDO_CLASS_FOCUS_WITHIN)) != null ? _c : false;
+  }, listenerOptions);
   return { focused };
 }
 
+// @__NO_SIDE_EFFECTS__
 function useFps(options) {
   var _a;
-  const fps = ref(0);
+  const fps = shallowRef(0);
   if (typeof performance === "undefined")
     return fps;
   const every = (_a = options == null ? void 0 : options.every) != null ? _a : 10;
@@ -3584,9 +4042,9 @@ function useFullscreen(target, options = {}) {
   } = options;
   const targetRef = computed(() => {
     var _a;
-    return (_a = unrefElement(target)) != null ? _a : document == null ? void 0 : document.querySelector("html");
+    return (_a = unrefElement(target)) != null ? _a : document == null ? void 0 : document.documentElement;
   });
-  const isFullscreen = ref(false);
+  const isFullscreen = shallowRef(false);
   const requestMethod = computed(() => {
     return [
       "requestFullscreen",
@@ -3675,8 +4133,10 @@ function useFullscreen(target, options = {}) {
     if (!isElementFullScreenValue || isElementFullScreenValue && isCurrentElementFullScreen())
       isFullscreen.value = isElementFullScreenValue;
   };
-  useEventListener(document, eventHandlers, handlerCallback, false);
-  useEventListener(() => unrefElement(targetRef), eventHandlers, handlerCallback, false);
+  const listenerOptions = { capture: false, passive: true };
+  useEventListener(document, eventHandlers, handlerCallback, listenerOptions);
+  useEventListener(() => unrefElement(targetRef), eventHandlers, handlerCallback, listenerOptions);
+  tryOnMounted(handlerCallback, false);
   if (autoExit)
     tryOnScopeDispose(exit);
   return {
@@ -3731,6 +4191,7 @@ function mapGamepadToXbox360Controller(gamepad) {
     return null;
   });
 }
+// @__NO_SIDE_EFFECTS__
 function useGamepad(options = {}) {
   const {
     navigator = defaultNavigator
@@ -3777,8 +4238,9 @@ function useGamepad(options = {}) {
     gamepads.value = gamepads.value.filter((x) => x.index !== gamepad.index);
     onDisconnectedHook.trigger(gamepad.index);
   };
-  useEventListener("gamepadconnected", (e) => onGamepadConnected(e.gamepad));
-  useEventListener("gamepaddisconnected", (e) => onGamepadDisconnected(e.gamepad));
+  const listenerOptions = { passive: true };
+  useEventListener("gamepadconnected", (e) => onGamepadConnected(e.gamepad), listenerOptions);
+  useEventListener("gamepaddisconnected", (e) => onGamepadDisconnected(e.gamepad), listenerOptions);
   tryOnMounted(() => {
     const _gamepads = (navigator == null ? void 0 : navigator.getGamepads()) || [];
     for (const gamepad of _gamepads) {
@@ -3807,7 +4269,7 @@ function useGeolocation(options = {}) {
     immediate = true
   } = options;
   const isSupported = useSupported(() => navigator && "geolocation" in navigator);
-  const locatedAt = ref(null);
+  const locatedAt = shallowRef(null);
   const error = shallowRef(null);
   const coords = ref({
     accuracy: 0,
@@ -3866,8 +4328,8 @@ function useIdle(timeout = oneMinute, options = {}) {
     window = defaultWindow,
     eventFilter = throttleFilter(50)
   } = options;
-  const idle = ref(initialState);
-  const lastActive = ref(timestamp());
+  const idle = shallowRef(initialState);
+  const lastActive = shallowRef(timestamp());
   let timer;
   const reset = () => {
     idle.value = false;
@@ -3883,15 +4345,17 @@ function useIdle(timeout = oneMinute, options = {}) {
   );
   if (window) {
     const document = window.document;
+    const listenerOptions = { passive: true };
     for (const event of events)
-      useEventListener(window, event, onEvent, { passive: true });
+      useEventListener(window, event, onEvent, listenerOptions);
     if (listenForVisibilityChange) {
       useEventListener(document, "visibilitychange", () => {
         if (!document.hidden)
           onEvent();
-      });
+      }, listenerOptions);
     }
-    reset();
+    if (!initialState)
+      reset();
   }
   return {
     idle,
@@ -3903,20 +4367,32 @@ function useIdle(timeout = oneMinute, options = {}) {
 async function loadImage(options) {
   return new Promise((resolve, reject) => {
     const img = new Image();
-    const { src, srcset, sizes, class: clazz, loading, crossorigin, referrerPolicy } = options;
+    const { src, srcset, sizes, class: clazz, loading, crossorigin, referrerPolicy, width, height, decoding, fetchPriority, ismap, usemap } = options;
     img.src = src;
-    if (srcset)
+    if (srcset != null)
       img.srcset = srcset;
-    if (sizes)
+    if (sizes != null)
       img.sizes = sizes;
-    if (clazz)
+    if (clazz != null)
       img.className = clazz;
-    if (loading)
+    if (loading != null)
       img.loading = loading;
-    if (crossorigin)
+    if (crossorigin != null)
       img.crossOrigin = crossorigin;
-    if (referrerPolicy)
+    if (referrerPolicy != null)
       img.referrerPolicy = referrerPolicy;
+    if (width != null)
+      img.width = width;
+    if (height != null)
+      img.height = height;
+    if (decoding != null)
+      img.decoding = decoding;
+    if (fetchPriority != null)
+      img.fetchPriority = fetchPriority;
+    if (ismap != null)
+      img.isMap = ismap;
+    if (usemap != null)
+      img.useMap = usemap;
     img.onload = () => resolve(img);
     img.onerror = reject;
   });
@@ -3938,6 +4414,14 @@ function useImage(options, asyncStateOptions = {}) {
   return state;
 }
 
+function resolveElement(el) {
+  if (typeof Window !== "undefined" && el instanceof Window)
+    return el.document.documentElement;
+  if (typeof Document !== "undefined" && el instanceof Document)
+    return el.documentElement;
+  return el;
+}
+
 const ARRIVED_STATE_THRESHOLD_PIXELS = 1;
 function useScroll(element, options = {}) {
   const {
@@ -3951,6 +4435,9 @@ function useScroll(element, options = {}) {
       top: 0,
       bottom: 0
     },
+    observe: _observe = {
+      mutation: false
+    },
     eventListenerOptions = {
       capture: false,
       passive: true
@@ -3961,8 +4448,11 @@ function useScroll(element, options = {}) {
       console.error(e);
     }
   } = options;
-  const internalX = ref(0);
-  const internalY = ref(0);
+  const observe = typeof _observe === "boolean" ? {
+    mutation: _observe
+  } : _observe;
+  const internalX = shallowRef(0);
+  const internalY = shallowRef(0);
   const x = computed({
     get() {
       return internalX.value;
@@ -3997,7 +4487,7 @@ function useScroll(element, options = {}) {
     if (y != null)
       internalY.value = scrollContainer.scrollTop;
   }
-  const isScrolling = ref(false);
+  const isScrolling = shallowRef(false);
   const arrivedState = reactive({
     left: true,
     right: false,
@@ -4026,12 +4516,13 @@ function useScroll(element, options = {}) {
     if (!window)
       return;
     const el = ((_a = target == null ? void 0 : target.document) == null ? void 0 : _a.documentElement) || (target == null ? void 0 : target.documentElement) || unrefElement(target);
-    const { display, flexDirection } = getComputedStyle(el);
+    const { display, flexDirection, direction } = getComputedStyle(el);
+    const directionMultipler = direction === "rtl" ? -1 : 1;
     const scrollLeft = el.scrollLeft;
     directions.left = scrollLeft < internalX.value;
     directions.right = scrollLeft > internalX.value;
-    const left = Math.abs(scrollLeft) <= (offset.left || 0);
-    const right = Math.abs(scrollLeft) + el.clientWidth >= el.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+    const left = Math.abs(scrollLeft * directionMultipler) <= (offset.left || 0);
+    const right = Math.abs(scrollLeft * directionMultipler) + el.clientWidth >= el.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
     if (display === "flex" && flexDirection === "row-reverse") {
       arrivedState.left = right;
       arrivedState.right = left;
@@ -4082,6 +4573,22 @@ function useScroll(element, options = {}) {
       onError(e);
     }
   });
+  if ((observe == null ? void 0 : observe.mutation) && element != null && element !== window && element !== document) {
+    useMutationObserver(
+      element,
+      () => {
+        const _element = toValue(element);
+        if (!_element)
+          return;
+        setArrivedState(_element);
+      },
+      {
+        attributes: true,
+        childList: true,
+        subtree: true
+      }
+    );
+  }
   useEventListener(
     element,
     "scrollend",
@@ -4102,14 +4609,6 @@ function useScroll(element, options = {}) {
   };
 }
 
-function resolveElement(el) {
-  if (typeof Window !== "undefined" && el instanceof Window)
-    return el.document.documentElement;
-  if (typeof Document !== "undefined" && el instanceof Document)
-    return el.documentElement;
-  return el;
-}
-
 function useInfiniteScroll(element, onLoadMore, options = {}) {
   var _a;
   const {
@@ -4151,30 +4650,35 @@ function useInfiniteScroll(element, onLoadMore, options = {}) {
       }
     }
   }
-  watch(
+  const stop = watch(
     () => [state.arrivedState[direction], isElementVisible.value],
     checkAndLoad,
     { immediate: true }
   );
+  tryOnUnmounted(stop);
   return {
-    isLoading
+    isLoading,
+    reset() {
+      nextTick(() => checkAndLoad());
+    }
   };
 }
 
 const defaultEvents = ["mousedown", "mouseup", "keydown", "keyup"];
+// @__NO_SIDE_EFFECTS__
 function useKeyModifier(modifier, options = {}) {
   const {
     events = defaultEvents,
     document = defaultDocument,
     initial = null
   } = options;
-  const state = ref(initial);
+  const state = shallowRef(initial);
   if (document) {
     events.forEach((listenerEvent) => {
       useEventListener(document, listenerEvent, (evt) => {
         if (typeof evt.getModifierState === "function")
           state.value = evt.getModifierState(modifier);
-      });
+      }, { passive: true });
     });
   }
   return state;
@@ -4213,6 +4717,7 @@ function useMagicKeys(options = {}) {
   };
   const refs = useReactive ? reactive(obj) : obj;
   const metaDeps = /* @__PURE__ */ new Set();
+  const shiftDeps = /* @__PURE__ */ new Set();
   const usedKeys = /* @__PURE__ */ new Set();
   function setRefs(key, value) {
     if (key in refs) {
@@ -4242,6 +4747,19 @@ function useMagicKeys(options = {}) {
       usedKeys.add(key2);
       setRefs(key2, value);
     }
+    if (key === "shift" && !value) {
+      const shiftDepsArray = Array.from(shiftDeps);
+      const shiftIndex = shiftDepsArray.indexOf("shift");
+      shiftDepsArray.forEach((key2, index) => {
+        if (index >= shiftIndex) {
+          current.delete(key2);
+          setRefs(key2, false);
+        }
+      });
+      shiftDeps.clear();
+    } else if (typeof e.getModifierState === "function" && e.getModifierState("Shift") && value) {
+      [...current, ...values].forEach((key2) => shiftDeps.add(key2));
+    }
     if (key === "meta" && !value) {
       metaDeps.forEach((key2) => {
         current.delete(key2);
@@ -4260,8 +4778,8 @@ function useMagicKeys(options = {}) {
     updateRefs(e, false);
     return onEventFired(e);
   }, { passive });
-  useEventListener("blur", reset, { passive: true });
-  useEventListener("focus", reset, { passive: true });
+  useEventListener("blur", reset, { passive });
+  useEventListener("focus", reset, { passive });
   const proxy = new Proxy(
     refs,
     {
@@ -4274,9 +4792,9 @@ function useMagicKeys(options = {}) {
         if (!(prop in refs)) {
           if (/[+_-]/.test(prop)) {
             const keys = prop.split(/[+_-]/g).map((i) => i.trim());
-            refs[prop] = computed(() => keys.every((key) => toValue(proxy[key])));
+            refs[prop] = computed(() => keys.map((key) => toValue(proxy[key])).every(Boolean));
           } else {
-            refs[prop] = ref(false);
+            refs[prop] = shallowRef(false);
           }
         }
         const r = Reflect.get(target2, prop, rec);
@@ -4313,22 +4831,24 @@ function useMediaControls(target, options = {}) {
   const {
     document = defaultDocument
   } = options;
-  const currentTime = ref(0);
-  const duration = ref(0);
-  const seeking = ref(false);
-  const volume = ref(1);
-  const waiting = ref(false);
-  const ended = ref(false);
-  const playing = ref(false);
-  const rate = ref(1);
-  const stalled = ref(false);
+  const listenerOptions = { passive: true };
+  const currentTime = shallowRef(0);
+  const duration = shallowRef(0);
+  const seeking = shallowRef(false);
+  const volume = shallowRef(1);
+  const waiting = shallowRef(false);
+  const ended = shallowRef(false);
+  const playing = shallowRef(false);
+  const rate = shallowRef(1);
+  const stalled = shallowRef(false);
   const buffered = ref([]);
   const tracks = ref([]);
-  const selectedTrack = ref(-1);
-  const isPictureInPicture = ref(false);
-  const muted = ref(false);
+  const selectedTrack = shallowRef(-1);
+  const isPictureInPicture = shallowRef(false);
+  const muted = shallowRef(false);
   const supportsPictureInPicture = document && "pictureInPictureEnabled" in document;
   const sourceErrorEvent = createEventHook();
+  const playbackErrorEvent = createEventHook();
   const disableTrack = (track) => {
     usingElRef(target, (el) => {
       if (track) {
@@ -4380,24 +4900,18 @@ function useMediaControls(target, options = {}) {
     else if (isObject(src))
       sources = [src];
     el.querySelectorAll("source").forEach((e) => {
-      e.removeEventListener("error", sourceErrorEvent.trigger);
       e.remove();
     });
-    sources.forEach(({ src: src2, type }) => {
+    sources.forEach(({ src: src2, type, media }) => {
       const source = document.createElement("source");
       source.setAttribute("src", src2);
       source.setAttribute("type", type || "");
-      source.addEventListener("error", sourceErrorEvent.trigger);
+      source.setAttribute("media", media || "");
+      useEventListener(source, "error", sourceErrorEvent.trigger, listenerOptions);
       el.appendChild(source);
     });
     el.load();
   });
-  tryOnScopeDispose(() => {
-    const el = toValue(target);
-    if (!el)
-      return;
-    el.querySelectorAll("source").forEach((e) => e.removeEventListener("error", sourceErrorEvent.trigger));
-  });
   watch([target, volume], () => {
     const el = toValue(target);
     if (!el)
@@ -4446,46 +4960,133 @@ function useMediaControls(target, options = {}) {
     const el = toValue(target);
     if (!el)
       return;
-    isPlaying ? el.play() : el.pause();
-  });
-  useEventListener(target, "timeupdate", () => ignoreCurrentTimeUpdates(() => currentTime.value = toValue(target).currentTime));
-  useEventListener(target, "durationchange", () => duration.value = toValue(target).duration);
-  useEventListener(target, "progress", () => buffered.value = timeRangeToArray(toValue(target).buffered));
-  useEventListener(target, "seeking", () => seeking.value = true);
-  useEventListener(target, "seeked", () => seeking.value = false);
-  useEventListener(target, ["waiting", "loadstart"], () => {
-    waiting.value = true;
-    ignorePlayingUpdates(() => playing.value = false);
-  });
-  useEventListener(target, "loadeddata", () => waiting.value = false);
-  useEventListener(target, "playing", () => {
-    waiting.value = false;
-    ended.value = false;
-    ignorePlayingUpdates(() => playing.value = true);
-  });
-  useEventListener(target, "ratechange", () => rate.value = toValue(target).playbackRate);
-  useEventListener(target, "stalled", () => stalled.value = true);
-  useEventListener(target, "ended", () => ended.value = true);
-  useEventListener(target, "pause", () => ignorePlayingUpdates(() => playing.value = false));
-  useEventListener(target, "play", () => ignorePlayingUpdates(() => playing.value = true));
-  useEventListener(target, "enterpictureinpicture", () => isPictureInPicture.value = true);
-  useEventListener(target, "leavepictureinpicture", () => isPictureInPicture.value = false);
-  useEventListener(target, "volumechange", () => {
-    const el = toValue(target);
-    if (!el)
-      return;
-    volume.value = el.volume;
-    muted.value = el.muted;
+    if (isPlaying) {
+      el.play().catch((e) => {
+        playbackErrorEvent.trigger(e);
+        throw e;
+      });
+    } else {
+      el.pause();
+    }
   });
+  useEventListener(
+    target,
+    "timeupdate",
+    () => ignoreCurrentTimeUpdates(() => currentTime.value = toValue(target).currentTime),
+    listenerOptions
+  );
+  useEventListener(
+    target,
+    "durationchange",
+    () => duration.value = toValue(target).duration,
+    listenerOptions
+  );
+  useEventListener(
+    target,
+    "progress",
+    () => buffered.value = timeRangeToArray(toValue(target).buffered),
+    listenerOptions
+  );
+  useEventListener(
+    target,
+    "seeking",
+    () => seeking.value = true,
+    listenerOptions
+  );
+  useEventListener(
+    target,
+    "seeked",
+    () => seeking.value = false,
+    listenerOptions
+  );
+  useEventListener(
+    target,
+    ["waiting", "loadstart"],
+    () => {
+      waiting.value = true;
+      ignorePlayingUpdates(() => playing.value = false);
+    },
+    listenerOptions
+  );
+  useEventListener(
+    target,
+    "loadeddata",
+    () => waiting.value = false,
+    listenerOptions
+  );
+  useEventListener(
+    target,
+    "playing",
+    () => {
+      waiting.value = false;
+      ended.value = false;
+      ignorePlayingUpdates(() => playing.value = true);
+    },
+    listenerOptions
+  );
+  useEventListener(
+    target,
+    "ratechange",
+    () => rate.value = toValue(target).playbackRate,
+    listenerOptions
+  );
+  useEventListener(
+    target,
+    "stalled",
+    () => stalled.value = true,
+    listenerOptions
+  );
+  useEventListener(
+    target,
+    "ended",
+    () => ended.value = true,
+    listenerOptions
+  );
+  useEventListener(
+    target,
+    "pause",
+    () => ignorePlayingUpdates(() => playing.value = false),
+    listenerOptions
+  );
+  useEventListener(
+    target,
+    "play",
+    () => ignorePlayingUpdates(() => playing.value = true),
+    listenerOptions
+  );
+  useEventListener(
+    target,
+    "enterpictureinpicture",
+    () => isPictureInPicture.value = true,
+    listenerOptions
+  );
+  useEventListener(
+    target,
+    "leavepictureinpicture",
+    () => isPictureInPicture.value = false,
+    listenerOptions
+  );
+  useEventListener(
+    target,
+    "volumechange",
+    () => {
+      const el = toValue(target);
+      if (!el)
+        return;
+      volume.value = el.volume;
+      muted.value = el.muted;
+    },
+    listenerOptions
+  );
   const listeners = [];
   const stop = watch([target], () => {
     const el = toValue(target);
     if (!el)
       return;
     stop();
-    listeners[0] = useEventListener(el.textTracks, "addtrack", () => tracks.value = tracksToArray(el.textTracks));
-    listeners[1] = useEventListener(el.textTracks, "removetrack", () => tracks.value = tracksToArray(el.textTracks));
-    listeners[2] = useEventListener(el.textTracks, "change", () => tracks.value = tracksToArray(el.textTracks));
+    listeners[0] = useEventListener(el.textTracks, "addtrack", () => tracks.value = tracksToArray(el.textTracks), listenerOptions);
+    listeners[1] = useEventListener(el.textTracks, "removetrack", () => tracks.value = tracksToArray(el.textTracks), listenerOptions);
+    listeners[2] = useEventListener(el.textTracks, "change", () => tracks.value = tracksToArray(el.textTracks), listenerOptions);
   });
   tryOnScopeDispose(() => listeners.forEach((listener) => listener()));
   return {
@@ -4511,30 +5112,16 @@ function useMediaControls(target, options = {}) {
     togglePictureInPicture,
     isPictureInPicture,
     // Events
-    onSourceError: sourceErrorEvent.on
+    onSourceError: sourceErrorEvent.on,
+    onPlaybackError: playbackErrorEvent.on
   };
 }
 
-function getMapVue2Compat() {
-  const data = shallowReactive({});
-  return {
-    get: (key) => data[key],
-    set: (key, value) => set(data, key, value),
-    has: (key) => hasOwn(data, key),
-    delete: (key) => del(data, key),
-    clear: () => {
-      Object.keys(data).forEach((key) => {
-        del(data, key);
-      });
-    }
-  };
-}
+// @__NO_SIDE_EFFECTS__
 function useMemoize(resolver, options) {
   const initCache = () => {
     if (options == null ? void 0 : options.cache)
       return shallowReactive(options.cache);
-    if (isVue2)
-      return getMapVue2Compat();
     return shallowReactive(/* @__PURE__ */ new Map());
   };
   const cache = initCache();
@@ -4564,6 +5151,7 @@ function useMemoize(resolver, options) {
   return memoized;
 }
 
+// @__NO_SIDE_EFFECTS__
 function useMemory(options = {}) {
   const memory = ref();
   const isSupported = useSupported(() => typeof performance !== "undefined" && "memory" in performance);
@@ -4580,7 +5168,7 @@ const UseMouseBuiltinExtractors = {
   page: (event) => [event.pageX, event.pageY],
   client: (event) => [event.clientX, event.clientY],
   screen: (event) => [event.screenX, event.screenY],
-  movement: (event) => event instanceof Touch ? null : [event.movementX, event.movementY]
+  movement: (event) => event instanceof MouseEvent ? [event.movementX, event.movementY] : null
 };
 function useMouse(options = {}) {
   const {
@@ -4594,9 +5182,11 @@ function useMouse(options = {}) {
     eventFilter
   } = options;
   let _prevMouseEvent = null;
-  const x = ref(initialValue.x);
-  const y = ref(initialValue.y);
-  const sourceType = ref(null);
+  let _prevScrollX = 0;
+  let _prevScrollY = 0;
+  const x = shallowRef(initialValue.x);
+  const y = shallowRef(initialValue.y);
+  const sourceType = shallowRef(null);
   const extractor = typeof type === "function" ? type : UseMouseBuiltinExtractors[type];
   const mouseHandler = (event) => {
     const result = extractor(event);
@@ -4605,6 +5195,10 @@ function useMouse(options = {}) {
       [x.value, y.value] = result;
       sourceType.value = "mouse";
     }
+    if (window) {
+      _prevScrollX = window.scrollX;
+      _prevScrollY = window.scrollY;
+    }
   };
   const touchHandler = (event) => {
     if (event.touches.length > 0) {
@@ -4620,8 +5214,8 @@ function useMouse(options = {}) {
       return;
     const pos = extractor(_prevMouseEvent);
     if (_prevMouseEvent instanceof MouseEvent && pos) {
-      x.value = pos[0] + window.scrollX;
-      y.value = pos[1] + window.scrollY;
+      x.value = pos[0] + window.scrollX - _prevScrollX;
+      y.value = pos[1] + window.scrollY - _prevScrollY;
     }
   };
   const reset = () => {
@@ -4640,7 +5234,7 @@ function useMouse(options = {}) {
         useEventListener(target, "touchend", reset, listenerOptions);
     }
     if (scroll && type === "page")
-      useEventListener(window, "scroll", scrollHandlerWrapper, { passive: true });
+      useEventListener(window, "scroll", scrollHandlerWrapper, listenerOptions);
   }
   return {
     x,
@@ -4651,51 +5245,87 @@ function useMouse(options = {}) {
 
 function useMouseInElement(target, options = {}) {
   const {
+    windowResize = true,
+    windowScroll = true,
     handleOutside = true,
     window = defaultWindow
   } = options;
   const type = options.type || "page";
   const { x, y, sourceType } = useMouse(options);
-  const targetRef = ref(target != null ? target : window == null ? void 0 : window.document.body);
-  const elementX = ref(0);
-  const elementY = ref(0);
-  const elementPositionX = ref(0);
-  const elementPositionY = ref(0);
-  const elementHeight = ref(0);
-  const elementWidth = ref(0);
-  const isOutside = ref(true);
-  let stop = () => {
-  };
+  const targetRef = shallowRef(target != null ? target : window == null ? void 0 : window.document.body);
+  const elementX = shallowRef(0);
+  const elementY = shallowRef(0);
+  const elementPositionX = shallowRef(0);
+  const elementPositionY = shallowRef(0);
+  const elementHeight = shallowRef(0);
+  const elementWidth = shallowRef(0);
+  const isOutside = shallowRef(true);
+  function update() {
+    if (!window)
+      return;
+    const el = unrefElement(targetRef);
+    if (!el || !(el instanceof Element))
+      return;
+    const {
+      left,
+      top,
+      width,
+      height
+    } = el.getBoundingClientRect();
+    elementPositionX.value = left + (type === "page" ? window.pageXOffset : 0);
+    elementPositionY.value = top + (type === "page" ? window.pageYOffset : 0);
+    elementHeight.value = height;
+    elementWidth.value = width;
+    const elX = x.value - elementPositionX.value;
+    const elY = y.value - elementPositionY.value;
+    isOutside.value = width === 0 || height === 0 || elX < 0 || elY < 0 || elX > width || elY > height;
+    if (handleOutside || !isOutside.value) {
+      elementX.value = elX;
+      elementY.value = elY;
+    }
+  }
+  const stopFnList = [];
+  function stop() {
+    stopFnList.forEach((fn) => fn());
+    stopFnList.length = 0;
+  }
+  tryOnMounted(() => {
+    update();
+  });
   if (window) {
-    stop = watch(
+    const {
+      stop: stopResizeObserver
+    } = useResizeObserver(targetRef, update);
+    const {
+      stop: stopMutationObserver
+    } = useMutationObserver(targetRef, update, {
+      attributeFilter: ["style", "class"]
+    });
+    const stopWatch = watch(
       [targetRef, x, y],
-      () => {
-        const el = unrefElement(targetRef);
-        if (!el)
-          return;
-        const {
-          left,
-          top,
-          width,
-          height
-        } = el.getBoundingClientRect();
-        elementPositionX.value = left + (type === "page" ? window.pageXOffset : 0);
-        elementPositionY.value = top + (type === "page" ? window.pageYOffset : 0);
-        elementHeight.value = height;
-        elementWidth.value = width;
-        const elX = x.value - elementPositionX.value;
-        const elY = y.value - elementPositionY.value;
-        isOutside.value = width === 0 || height === 0 || elX < 0 || elY < 0 || elX > width || elY > height;
-        if (handleOutside || !isOutside.value) {
-          elementX.value = elX;
-          elementY.value = elY;
-        }
-      },
-      { immediate: true }
+      update
     );
-    useEventListener(document, "mouseleave", () => {
-      isOutside.value = true;
-    });
+    stopFnList.push(
+      stopResizeObserver,
+      stopMutationObserver,
+      stopWatch
+    );
+    useEventListener(
+      document,
+      "mouseleave",
+      () => isOutside.value = true,
+      { passive: true }
+    );
+    if (windowScroll) {
+      stopFnList.push(
+        useEventListener("scroll", update, { capture: true, passive: true })
+      );
+    }
+    if (windowResize) {
+      stopFnList.push(
+        useEventListener("resize", update, { passive: true })
+      );
+    }
   }
   return {
     x,
@@ -4720,35 +5350,40 @@ function useMousePressed(options = {}) {
     initialValue = false,
     window = defaultWindow
   } = options;
-  const pressed = ref(initialValue);
-  const sourceType = ref(null);
+  const pressed = shallowRef(initialValue);
+  const sourceType = shallowRef(null);
   if (!window) {
     return {
       pressed,
       sourceType
     };
   }
-  const onPressed = (srcType) => () => {
+  const onPressed = (srcType) => (event) => {
+    var _a;
     pressed.value = true;
     sourceType.value = srcType;
+    (_a = options.onPressed) == null ? void 0 : _a.call(options, event);
   };
-  const onReleased = () => {
+  const onReleased = (event) => {
+    var _a;
     pressed.value = false;
     sourceType.value = null;
+    (_a = options.onReleased) == null ? void 0 : _a.call(options, event);
   };
   const target = computed(() => unrefElement(options.target) || window);
-  useEventListener(target, "mousedown", onPressed("mouse"), { passive: true, capture });
-  useEventListener(window, "mouseleave", onReleased, { passive: true, capture });
-  useEventListener(window, "mouseup", onReleased, { passive: true, capture });
+  const listenerOptions = { passive: true, capture };
+  useEventListener(target, "mousedown", onPressed("mouse"), listenerOptions);
+  useEventListener(window, "mouseleave", onReleased, listenerOptions);
+  useEventListener(window, "mouseup", onReleased, listenerOptions);
   if (drag) {
-    useEventListener(target, "dragstart", onPressed("mouse"), { passive: true, capture });
-    useEventListener(window, "drop", onReleased, { passive: true, capture });
-    useEventListener(window, "dragend", onReleased, { passive: true, capture });
+    useEventListener(target, "dragstart", onPressed("mouse"), listenerOptions);
+    useEventListener(window, "drop", onReleased, listenerOptions);
+    useEventListener(window, "dragend", onReleased, listenerOptions);
   }
   if (touch) {
-    useEventListener(target, "touchstart", onPressed("touch"), { passive: true, capture });
-    useEventListener(window, "touchend", onReleased, { passive: true, capture });
-    useEventListener(window, "touchcancel", onReleased, { passive: true, capture });
+    useEventListener(target, "touchstart", onPressed("touch"), listenerOptions);
+    useEventListener(window, "touchend", onReleased, listenerOptions);
+    useEventListener(window, "touchcancel", onReleased, listenerOptions);
   }
   return {
     pressed,
@@ -4756,34 +5391,36 @@ function useMousePressed(options = {}) {
   };
 }
 
+// @__NO_SIDE_EFFECTS__
 function useNavigatorLanguage(options = {}) {
   const { window = defaultWindow } = options;
   const navigator = window == null ? void 0 : window.navigator;
   const isSupported = useSupported(() => navigator && "language" in navigator);
-  const language = ref(navigator == null ? void 0 : navigator.language);
+  const language = shallowRef(navigator == null ? void 0 : navigator.language);
   useEventListener(window, "languagechange", () => {
     if (navigator)
       language.value = navigator.language;
-  });
+  }, { passive: true });
   return {
     isSupported,
     language
   };
 }
 
+// @__NO_SIDE_EFFECTS__
 function useNetwork(options = {}) {
   const { window = defaultWindow } = options;
   const navigator = window == null ? void 0 : window.navigator;
   const isSupported = useSupported(() => navigator && "connection" in navigator);
-  const isOnline = ref(true);
-  const saveData = ref(false);
-  const offlineAt = ref(void 0);
-  const onlineAt = ref(void 0);
-  const downlink = ref(void 0);
-  const downlinkMax = ref(void 0);
-  const rtt = ref(void 0);
-  const effectiveType = ref(void 0);
-  const type = ref("unknown");
+  const isOnline = shallowRef(true);
+  const saveData = shallowRef(false);
+  const offlineAt = shallowRef(void 0);
+  const onlineAt = shallowRef(void 0);
+  const downlink = shallowRef(void 0);
+  const downlinkMax = shallowRef(void 0);
+  const rtt = shallowRef(void 0);
+  const effectiveType = shallowRef(void 0);
+  const type = shallowRef("unknown");
   const connection = isSupported.value && navigator.connection;
   function updateNetworkInformation() {
     if (!navigator)
@@ -4800,41 +5437,44 @@ function useNetwork(options = {}) {
       type.value = connection.type;
     }
   }
+  const listenerOptions = { passive: true };
   if (window) {
     useEventListener(window, "offline", () => {
       isOnline.value = false;
       offlineAt.value = Date.now();
-    });
+    }, listenerOptions);
     useEventListener(window, "online", () => {
       isOnline.value = true;
       onlineAt.value = Date.now();
-    });
+    }, listenerOptions);
   }
   if (connection)
-    useEventListener(connection, "change", updateNetworkInformation, false);
+    useEventListener(connection, "change", updateNetworkInformation, listenerOptions);
   updateNetworkInformation();
   return {
     isSupported,
-    isOnline,
-    saveData,
-    offlineAt,
-    onlineAt,
-    downlink,
-    downlinkMax,
-    effectiveType,
-    rtt,
-    type
+    isOnline: readonly(isOnline),
+    saveData: readonly(saveData),
+    offlineAt: readonly(offlineAt),
+    onlineAt: readonly(onlineAt),
+    downlink: readonly(downlink),
+    downlinkMax: readonly(downlinkMax),
+    effectiveType: readonly(effectiveType),
+    rtt: readonly(rtt),
+    type: readonly(type)
   };
 }
 
+// @__NO_SIDE_EFFECTS__
 function useNow(options = {}) {
   const {
     controls: exposeControls = false,
-    interval = "requestAnimationFrame"
+    interval = "requestAnimationFrame",
+    immediate = true
   } = options;
   const now = ref(/* @__PURE__ */ new Date());
   const update = () => now.value = /* @__PURE__ */ new Date();
-  const controls = interval === "requestAnimationFrame" ? useRafFn(update, { immediate: true }) : useIntervalFn(update, interval, { immediate: true });
+  const controls = interval === "requestAnimationFrame" ? useRafFn(update, { immediate }) : useIntervalFn(update, interval, { immediate });
   if (exposeControls) {
     return {
       now,
@@ -4846,7 +5486,7 @@ function useNow(options = {}) {
 }
 
 function useObjectUrl(object) {
-  const url = ref();
+  const url = shallowRef();
   const release = () => {
     if (url.value)
       URL.revokeObjectURL(url.value);
@@ -4865,6 +5505,7 @@ function useObjectUrl(object) {
   return readonly(url);
 }
 
+// @__NO_SIDE_EFFECTS__
 function useClamp(value, min, max) {
   if (typeof value === "function" || isReadonly(value))
     return computed(() => clamp(toValue(value), toValue(min), toValue(max)));
@@ -4933,14 +5574,16 @@ function useOffsetPagination(options) {
   return returnValue;
 }
 
+// @__NO_SIDE_EFFECTS__
 function useOnline(options = {}) {
   const { isOnline } = useNetwork(options);
   return isOnline;
 }
 
+// @__NO_SIDE_EFFECTS__
 function usePageLeave(options = {}) {
   const { window = defaultWindow } = options;
-  const isLeft = ref(false);
+  const isLeft = shallowRef(false);
   const handler = (event) => {
     if (!window)
       return;
@@ -4949,13 +5592,15 @@ function usePageLeave(options = {}) {
     isLeft.value = !from;
   };
   if (window) {
-    useEventListener(window, "mouseout", handler, { passive: true });
-    useEventListener(window.document, "mouseleave", handler, { passive: true });
-    useEventListener(window.document, "mouseenter", handler, { passive: true });
+    const listenerOptions = { passive: true };
+    useEventListener(window, "mouseout", handler, listenerOptions);
+    useEventListener(window.document, "mouseleave", handler, listenerOptions);
+    useEventListener(window.document, "mouseenter", handler, listenerOptions);
   }
   return isLeft;
 }
 
+// @__NO_SIDE_EFFECTS__
 function useScreenOrientation(options = {}) {
   const {
     window = defaultWindow
@@ -4963,12 +5608,12 @@ function useScreenOrientation(options = {}) {
   const isSupported = useSupported(() => window && "screen" in window && "orientation" in window.screen);
   const screenOrientation = isSupported.value ? window.screen.orientation : {};
   const orientation = ref(screenOrientation.type);
-  const angle = ref(screenOrientation.angle || 0);
+  const angle = shallowRef(screenOrientation.angle || 0);
   if (isSupported.value) {
     useEventListener(window, "orientationchange", () => {
       orientation.value = screenOrientation.type;
       angle.value = screenOrientation.angle;
-    });
+    }, { passive: true });
   }
   const lockOrientation = (type) => {
     if (isSupported.value && typeof screenOrientation.lock === "function")
@@ -5120,7 +5765,7 @@ function usePointer(options = {}) {
   const {
     target = defaultWindow
   } = options;
-  const isInside = ref(false);
+  const isInside = shallowRef(false);
   const state = ref(options.initialValue || {});
   Object.assign(state.value, defaultState, state.value);
   const handler = (event) => {
@@ -5140,13 +5785,15 @@ function usePointer(options = {}) {
   };
 }
 
+// @__NO_SIDE_EFFECTS__
 function usePointerLock(target, options = {}) {
   const { document = defaultDocument } = options;
   const isSupported = useSupported(() => document && "pointerLockElement" in document);
-  const element = ref();
-  const triggerElement = ref();
+  const element = shallowRef();
+  const triggerElement = shallowRef();
   let targetElement;
   if (isSupported.value) {
+    const listenerOptions = { passive: true };
     useEventListener(document, "pointerlockchange", () => {
       var _a;
       const currentElement = (_a = document.pointerLockElement) != null ? _a : element.value;
@@ -5155,7 +5802,7 @@ function usePointerLock(target, options = {}) {
         if (!element.value)
           targetElement = triggerElement.value = null;
       }
-    });
+    }, listenerOptions);
     useEventListener(document, "pointerlockerror", () => {
       var _a;
       const currentElement = (_a = document.pointerLockElement) != null ? _a : element.value;
@@ -5163,7 +5810,7 @@ function usePointerLock(target, options = {}) {
         const action = document.pointerLockElement ? "release" : "acquire";
         throw new Error(`Failed to ${action} pointer lock.`);
       }
-    });
+    }, listenerOptions);
   }
   async function lock(e) {
     var _a;
@@ -5215,8 +5862,8 @@ function usePointerSwipe(target, options = {}) {
   const distanceY = computed(() => posStart.y - posEnd.y);
   const { max, abs } = Math;
   const isThresholdExceeded = computed(() => max(abs(distanceX.value), abs(distanceY.value)) >= threshold);
-  const isSwiping = ref(false);
-  const isPointerDown = ref(false);
+  const isSwiping = shallowRef(false);
+  const isPointerDown = shallowRef(false);
   const direction = computed(() => {
     if (!isThresholdExceeded.value)
       return "none";
@@ -5232,6 +5879,7 @@ function usePointerSwipe(target, options = {}) {
     const isPrimaryButton = e.buttons === 1;
     return (_c = (_b = (_a = options.pointerTypes) == null ? void 0 : _a.includes(e.pointerType)) != null ? _b : isReleasingButton || isPrimaryButton) != null ? _c : true;
   };
+  const listenerOptions = { passive: true };
   const stops = [
     useEventListener(target, "pointerdown", (e) => {
       if (!eventIsAllowed(e))
@@ -5243,7 +5891,7 @@ function usePointerSwipe(target, options = {}) {
       updatePosStart(x, y);
       updatePosEnd(x, y);
       onSwipeStart == null ? void 0 : onSwipeStart(e);
-    }),
+    }, listenerOptions),
     useEventListener(target, "pointermove", (e) => {
       if (!eventIsAllowed(e))
         return;
@@ -5255,7 +5903,7 @@ function usePointerSwipe(target, options = {}) {
         isSwiping.value = true;
       if (isSwiping.value)
         onSwipe == null ? void 0 : onSwipe(e);
-    }),
+    }, listenerOptions),
     useEventListener(target, "pointerup", (e) => {
       if (!eventIsAllowed(e))
         return;
@@ -5263,11 +5911,11 @@ function usePointerSwipe(target, options = {}) {
         onSwipeEnd == null ? void 0 : onSwipeEnd(e, direction.value);
       isPointerDown.value = false;
       isSwiping.value = false;
-    })
+    }, listenerOptions)
   ];
   tryOnMounted(() => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    (_b = (_a = targetRef.value) == null ? void 0 : _a.style) == null ? void 0 : _b.setProperty("touch-action", "none");
+    (_b = (_a = targetRef.value) == null ? void 0 : _a.style) == null ? void 0 : _b.setProperty("touch-action", "pan-y");
     if (disableTextSelect) {
       (_d = (_c = targetRef.value) == null ? void 0 : _c.style) == null ? void 0 : _d.setProperty("-webkit-user-select", "none");
       (_f = (_e = targetRef.value) == null ? void 0 : _e.style) == null ? void 0 : _f.setProperty("-ms-user-select", "none");
@@ -5286,6 +5934,7 @@ function usePointerSwipe(target, options = {}) {
   };
 }
 
+// @__NO_SIDE_EFFECTS__
 function usePreferredColorScheme(options) {
   const isLight = useMediaQuery("(prefers-color-scheme: light)", options);
   const isDark = useMediaQuery("(prefers-color-scheme: dark)", options);
@@ -5298,6 +5947,7 @@ function usePreferredColorScheme(options) {
   });
 }
 
+// @__NO_SIDE_EFFECTS__
 function usePreferredContrast(options) {
   const isMore = useMediaQuery("(prefers-contrast: more)", options);
   const isLess = useMediaQuery("(prefers-contrast: less)", options);
@@ -5313,6 +5963,7 @@ function usePreferredContrast(options) {
   });
 }
 
+// @__NO_SIDE_EFFECTS__
 function usePreferredLanguages(options = {}) {
   const { window = defaultWindow } = options;
   if (!window)
@@ -5321,10 +5972,11 @@ function usePreferredLanguages(options = {}) {
   const value = ref(navigator.languages);
   useEventListener(window, "languagechange", () => {
     value.value = navigator.languages;
-  });
+  }, { passive: true });
   return value;
 }
 
+// @__NO_SIDE_EFFECTS__
 function usePreferredReducedMotion(options) {
   const isReduced = useMediaQuery("(prefers-reduced-motion: reduce)", options);
   return computed(() => {
@@ -5334,6 +5986,16 @@ function usePreferredReducedMotion(options) {
   });
 }
 
+// @__NO_SIDE_EFFECTS__
+function usePreferredReducedTransparency(options) {
+  const isReduced = useMediaQuery("(prefers-reduced-transparency: reduce)", options);
+  return computed(() => {
+    if (isReduced.value)
+      return "reduce";
+    return "no-preference";
+  });
+}
+
 function usePrevious(value, initialValue) {
   const previous = shallowRef(initialValue);
   watch(
@@ -5351,10 +6013,10 @@ const rightVarName = "--vueuse-safe-area-right";
 const bottomVarName = "--vueuse-safe-area-bottom";
 const leftVarName = "--vueuse-safe-area-left";
 function useScreenSafeArea() {
-  const top = ref("");
-  const right = ref("");
-  const bottom = ref("");
-  const left = ref("");
+  const top = shallowRef("");
+  const right = shallowRef("");
+  const bottom = shallowRef("");
+  const left = shallowRef("");
   if (isClient) {
     const topCssVar = useCssVar(topVarName);
     const rightCssVar = useCssVar(rightVarName);
@@ -5364,8 +6026,8 @@ function useScreenSafeArea() {
     rightCssVar.value = "env(safe-area-inset-right, 0px)";
     bottomCssVar.value = "env(safe-area-inset-bottom, 0px)";
     leftCssVar.value = "env(safe-area-inset-left, 0px)";
-    update();
-    useEventListener("resize", useDebounceFn(update));
+    tryOnMounted(update);
+    useEventListener("resize", useDebounceFn(update), { passive: true });
   }
   function update() {
     top.value = getValue(topVarName);
@@ -5396,9 +6058,10 @@ function useScriptTag(src, onLoaded = noop, options = {}) {
     noModule,
     defer,
     document = defaultDocument,
-    attrs = {}
+    attrs = {},
+    nonce = void 0
   } = options;
-  const scriptTag = ref(null);
+  const scriptTag = shallowRef(null);
   let _promise = null;
   const loadScript = (waitForScriptLoad) => new Promise((resolve, reject) => {
     const resolveWithElement = (el2) => {
@@ -5425,18 +6088,24 @@ function useScriptTag(src, onLoaded = noop, options = {}) {
         el.noModule = noModule;
       if (referrerPolicy)
         el.referrerPolicy = referrerPolicy;
+      if (nonce) {
+        el.nonce = nonce;
+      }
       Object.entries(attrs).forEach(([name, value]) => el == null ? void 0 : el.setAttribute(name, value));
       shouldAppend = true;
     } else if (el.hasAttribute("data-loaded")) {
       resolveWithElement(el);
     }
-    el.addEventListener("error", (event) => reject(event));
-    el.addEventListener("abort", (event) => reject(event));
-    el.addEventListener("load", () => {
+    const listenerOptions = {
+      passive: true
+    };
+    useEventListener(el, "error", (event) => reject(event), listenerOptions);
+    useEventListener(el, "abort", (event) => reject(event), listenerOptions);
+    useEventListener(el, "load", () => {
       el.setAttribute("data-loaded", "true");
       onLoaded(el);
       resolveWithElement(el);
-    });
+    }, listenerOptions);
     if (shouldAppend)
       el = document.head.appendChild(el);
     if (!waitForScriptLoad)
@@ -5488,7 +6157,7 @@ function preventDefault(rawEvent) {
 }
 const elInitialOverflow = /* @__PURE__ */ new WeakMap();
 function useScrollLock(element, initialState = false) {
-  const isLocked = ref(initialState);
+  const isLocked = shallowRef(initialState);
   let stopTouchMoveListener = null;
   let initialOverflow = "";
   watch(toRef(element), (el) => {
@@ -5528,7 +6197,8 @@ function useScrollLock(element, initialState = false) {
     const el = resolveElement(toValue(element));
     if (!el || !isLocked.value)
       return;
-    isIOS && (stopTouchMoveListener == null ? void 0 : stopTouchMoveListener());
+    if (isIOS)
+      stopTouchMoveListener == null ? void 0 : stopTouchMoveListener();
     el.style.overflow = initialOverflow;
     elInitialOverflow.delete(el);
     isLocked.value = false;
@@ -5551,6 +6221,7 @@ function useSessionStorage(key, initialValue, options = {}) {
   return useStorage(key, initialValue, window == null ? void 0 : window.sessionStorage, options);
 }
 
+// @__NO_SIDE_EFFECTS__
 function useShare(shareOptions = {}, options = {}) {
   const { navigator = defaultNavigator } = options;
   const _navigator = navigator;
@@ -5612,31 +6283,38 @@ function useSpeechRecognition(options = {}) {
   const {
     interimResults = true,
     continuous = true,
+    maxAlternatives = 1,
     window = defaultWindow
   } = options;
   const lang = toRef(options.lang || "en-US");
-  const isListening = ref(false);
-  const isFinal = ref(false);
-  const result = ref("");
+  const isListening = shallowRef(false);
+  const isFinal = shallowRef(false);
+  const result = shallowRef("");
   const error = shallowRef(void 0);
-  const toggle = (value = !isListening.value) => {
-    isListening.value = value;
-  };
+  let recognition;
   const start = () => {
     isListening.value = true;
   };
   const stop = () => {
     isListening.value = false;
   };
+  const toggle = (value = !isListening.value) => {
+    if (value) {
+      start();
+    } else {
+      stop();
+    }
+  };
   const SpeechRecognition = window && (window.SpeechRecognition || window.webkitSpeechRecognition);
   const isSupported = useSupported(() => SpeechRecognition);
-  let recognition;
   if (isSupported.value) {
     recognition = new SpeechRecognition();
     recognition.continuous = continuous;
     recognition.interimResults = interimResults;
     recognition.lang = toValue(lang);
+    recognition.maxAlternatives = maxAlternatives;
     recognition.onstart = () => {
+      isListening.value = true;
       isFinal.value = false;
     };
     watch(lang, (lang2) => {
@@ -5657,15 +6335,17 @@ function useSpeechRecognition(options = {}) {
       isListening.value = false;
       recognition.lang = toValue(lang);
     };
-    watch(isListening, () => {
-      if (isListening.value)
+    watch(isListening, (newValue, oldValue) => {
+      if (newValue === oldValue)
+        return;
+      if (newValue)
         recognition.start();
       else
         recognition.stop();
     });
   }
   tryOnScopeDispose(() => {
-    isListening.value = false;
+    stop();
   });
   return {
     isSupported,
@@ -5685,12 +6365,13 @@ function useSpeechSynthesis(text, options = {}) {
     pitch = 1,
     rate = 1,
     volume = 1,
-    window = defaultWindow
+    window = defaultWindow,
+    onBoundary
   } = options;
   const synth = window && window.speechSynthesis;
   const isSupported = useSupported(() => synth);
-  const isPlaying = ref(false);
-  const status = ref("init");
+  const isPlaying = shallowRef(false);
+  const status = shallowRef("init");
   const spokenText = toRef(text || "");
   const lang = toRef(options.lang || "en-US");
   const error = shallowRef(void 0);
@@ -5702,7 +6383,7 @@ function useSpeechSynthesis(text, options = {}) {
     utterance2.voice = toValue(options.voice) || null;
     utterance2.pitch = toValue(pitch);
     utterance2.rate = toValue(rate);
-    utterance2.volume = volume;
+    utterance2.volume = toValue(volume);
     utterance2.onstart = () => {
       isPlaying.value = true;
       status.value = "play";
@@ -5722,6 +6403,9 @@ function useSpeechSynthesis(text, options = {}) {
     utterance2.onerror = (event) => {
       error.value = event;
     };
+    utterance2.onboundary = (event) => {
+      onBoundary == null ? void 0 : onBoundary(event);
+    };
   };
   const utterance = computed(() => {
     isPlaying.value = false;
@@ -5732,7 +6416,8 @@ function useSpeechSynthesis(text, options = {}) {
   });
   const speak = () => {
     synth.cancel();
-    utterance && synth.speak(utterance.value);
+    if (utterance)
+      synth.speak(utterance.value);
   };
   const stop = () => {
     synth.cancel();
@@ -5771,6 +6456,7 @@ function useSpeechSynthesis(text, options = {}) {
   };
 }
 
+// @__NO_SIDE_EFFECTS__
 function useStepper(steps, initialStep) {
   const stepsRef = ref(steps);
   const stepNames = computed(() => Array.isArray(stepsRef.value) ? stepsRef.value : Object.keys(stepsRef.value));
@@ -5859,11 +6545,12 @@ function useStorageAsync(key, initialValue, storage, options = {}) {
     eventFilter,
     onError = (e) => {
       console.error(e);
-    }
+    },
+    onReady
   } = options;
   const rawInit = toValue(initialValue);
   const type = guessSerializerType(rawInit);
-  const data = (shallow ? shallowRef : ref)(initialValue);
+  const data = (shallow ? shallowRef : ref)(toValue(initialValue));
   const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
   if (!storage) {
     try {
@@ -5898,9 +6585,14 @@ function useStorageAsync(key, initialValue, storage, options = {}) {
       onError(e);
     }
   }
-  read();
+  const promise = new Promise((resolve) => {
+    read().then(() => {
+      onReady == null ? void 0 : onReady(data.value);
+      resolve(data);
+    });
+  });
   if (window && listenToStorageChanges)
-    useEventListener(window, "storage", (e) => Promise.resolve().then(() => read(e)));
+    useEventListener(window, "storage", (e) => Promise.resolve().then(() => read(e)), { passive: true });
   if (storage) {
     watchWithFilter(
       data,
@@ -5921,19 +6613,23 @@ function useStorageAsync(key, initialValue, storage, options = {}) {
       }
     );
   }
+  Object.assign(data, {
+    then: promise.then.bind(promise),
+    catch: promise.catch.bind(promise)
+  });
   return data;
 }
 
 let _id = 0;
 function useStyleTag(css, options = {}) {
-  const isLoaded = ref(false);
+  const isLoaded = shallowRef(false);
   const {
     document = defaultDocument,
     immediate = true,
     manual = false,
     id = `vueuse_styletag_${++_id}`
   } = options;
-  const cssRef = ref(css);
+  const cssRef = shallowRef(css);
   let stop = () => {
   };
   const load = () => {
@@ -5942,6 +6638,8 @@ function useStyleTag(css, options = {}) {
     const el = document.getElementById(id) || document.createElement("style");
     if (!el.isConnected) {
       el.id = id;
+      if (options.nonce)
+        el.nonce = options.nonce;
       if (options.media)
         el.media = options.media;
       document.head.appendChild(el);
@@ -5983,8 +6681,7 @@ function useSwipe(target, options = {}) {
     onSwipe,
     onSwipeEnd,
     onSwipeStart,
-    passive = true,
-    window = defaultWindow
+    passive = true
   } = options;
   const coordsStart = reactive({ x: 0, y: 0 });
   const coordsEnd = reactive({ x: 0, y: 0 });
@@ -5992,7 +6689,7 @@ function useSwipe(target, options = {}) {
   const diffY = computed(() => coordsStart.y - coordsEnd.y);
   const { max, abs } = Math;
   const isThresholdExceeded = computed(() => max(abs(diffX.value), abs(diffY.value)) >= threshold);
-  const isSwiping = ref(false);
+  const isSwiping = shallowRef(false);
   const direction = computed(() => {
     if (!isThresholdExceeded.value)
       return "none";
@@ -6011,12 +6708,7 @@ function useSwipe(target, options = {}) {
     coordsEnd.x = x;
     coordsEnd.y = y;
   };
-  let listenerOptions;
-  const isPassiveEventSupported = checkPassiveEventSupport(window == null ? void 0 : window.document);
-  if (!passive)
-    listenerOptions = isPassiveEventSupported ? { passive: false, capture: true } : { capture: true };
-  else
-    listenerOptions = isPassiveEventSupported ? { passive: true } : { capture: false };
+  const listenerOptions = { passive, capture: !passive };
   const onTouchEnd = (e) => {
     if (isSwiping.value)
       onSwipeEnd == null ? void 0 : onSwipeEnd(e, direction.value);
@@ -6026,8 +6718,6 @@ function useSwipe(target, options = {}) {
     useEventListener(target, "touchstart", (e) => {
       if (e.touches.length !== 1)
         return;
-      if (listenerOptions.capture && !listenerOptions.passive)
-        e.preventDefault();
       const [x, y] = getTouchEventCoords(e);
       updateCoordsStart(x, y);
       updateCoordsEnd(x, y);
@@ -6038,6 +6728,8 @@ function useSwipe(target, options = {}) {
         return;
       const [x, y] = getTouchEventCoords(e);
       updateCoordsEnd(x, y);
+      if (listenerOptions.capture && !listenerOptions.passive && Math.abs(diffX.value) > Math.abs(diffY.value))
+        e.preventDefault();
       if (!isSwiping.value && isThresholdExceeded.value)
         isSwiping.value = true;
       if (isSwiping.value)
@@ -6047,31 +6739,19 @@ function useSwipe(target, options = {}) {
   ];
   const stop = () => stops.forEach((s) => s());
   return {
-    isPassiveEventSupported,
     isSwiping,
     direction,
     coordsStart,
     coordsEnd,
     lengthX: diffX,
     lengthY: diffY,
-    stop
-  };
-}
-function checkPassiveEventSupport(document) {
-  if (!document)
-    return false;
-  let supportsPassive = false;
-  const optionsBlock = {
-    get passive() {
-      supportsPassive = true;
-      return false;
-    }
+    stop,
+    // TODO: Remove in the next major version
+    isPassiveEventSupported: true
   };
-  document.addEventListener("x", noop, optionsBlock);
-  document.removeEventListener("x", noop);
-  return supportsPassive;
 }
 
+// @__NO_SIDE_EFFECTS__
 function useTemplateRefsList() {
   const refs = ref([]);
   refs.value.set = (el) => {
@@ -6084,6 +6764,7 @@ function useTemplateRefsList() {
   return refs;
 }
 
+// @__NO_SIDE_EFFECTS__
 function useTextDirection(options = {}) {
   const {
     document = defaultDocument,
@@ -6126,6 +6807,7 @@ function getRangesFromSelection(selection) {
   const rangeCount = (_a = selection.rangeCount) != null ? _a : 0;
   return Array.from({ length: rangeCount }, (_, i) => selection.getRangeAt(i));
 }
+// @__NO_SIDE_EFFECTS__
 function useTextSelection(options = {}) {
   const {
     window = defaultWindow
@@ -6143,7 +6825,7 @@ function useTextSelection(options = {}) {
       selection.value = window.getSelection();
   }
   if (window)
-    useEventListener(window.document, "selectionchange", onSelectionChange);
+    useEventListener(window.document, "selectionchange", onSelectionChange, { passive: true });
   return {
     text,
     rects,
@@ -6152,12 +6834,21 @@ function useTextSelection(options = {}) {
   };
 }
 
-function useTextareaAutosize(options) {
-  var _a;
-  const textarea = ref(options == null ? void 0 : options.element);
-  const input = ref(options == null ? void 0 : options.input);
-  const styleProp = (_a = options == null ? void 0 : options.styleProp) != null ? _a : "height";
-  const textareaScrollHeight = ref(1);
+function tryRequestAnimationFrame(window = defaultWindow, fn) {
+  if (window && typeof window.requestAnimationFrame === "function") {
+    window.requestAnimationFrame(fn);
+  } else {
+    fn();
+  }
+}
+function useTextareaAutosize(options = {}) {
+  var _a, _b;
+  const { window = defaultWindow } = options;
+  const textarea = toRef(options == null ? void 0 : options.element);
+  const input = toRef((_a = options == null ? void 0 : options.input) != null ? _a : "");
+  const styleProp = (_b = options == null ? void 0 : options.styleProp) != null ? _b : "height";
+  const textareaScrollHeight = shallowRef(1);
+  const textareaOldWidth = shallowRef(0);
   function triggerResize() {
     var _a2;
     if (!textarea.value)
@@ -6165,8 +6856,9 @@ function useTextareaAutosize(options) {
     let height = "";
     textarea.value.style[styleProp] = "1px";
     textareaScrollHeight.value = (_a2 = textarea.value) == null ? void 0 : _a2.scrollHeight;
-    if (options == null ? void 0 : options.styleTarget)
-      toValue(options.styleTarget).style[styleProp] = `${textareaScrollHeight.value}px`;
+    const _styleTarget = toValue(options == null ? void 0 : options.styleTarget);
+    if (_styleTarget)
+      _styleTarget.style[styleProp] = `${textareaScrollHeight.value}px`;
     else
       height = `${textareaScrollHeight.value}px`;
     textarea.value.style[styleProp] = height;
@@ -6176,7 +6868,14 @@ function useTextareaAutosize(options) {
     var _a2;
     return (_a2 = options == null ? void 0 : options.onResize) == null ? void 0 : _a2.call(options);
   });
-  useResizeObserver(textarea, () => triggerResize());
+  useResizeObserver(textarea, ([{ contentRect }]) => {
+    if (textareaOldWidth.value === contentRect.width)
+      return;
+    tryRequestAnimationFrame(window, () => {
+      textareaOldWidth.value = contentRect.width;
+      triggerResize();
+    });
+  });
   if (options == null ? void 0 : options.watch)
     watch(options.watch, triggerResize, { immediate: true, deep: true });
   return {
@@ -6220,6 +6919,7 @@ const DEFAULT_MESSAGES = {
 function DEFAULT_FORMATTER(date) {
   return date.toISOString().slice(0, 10);
 }
+// @__NO_SIDE_EFFECTS__
 function useTimeAgo(time, options = {}) {
   const {
     controls: exposeControls = false,
@@ -6283,9 +6983,82 @@ function formatTimeAgo(from, options = {}, now = Date.now()) {
   return messages.invalid;
 }
 
-function useTimeoutPoll(fn, interval, timeoutPollOptions) {
-  const { start } = useTimeoutFn(loop, interval, { immediate: false });
-  const isActive = ref(false);
+const UNITS = [
+  { name: "year", ms: 31536e6 },
+  { name: "month", ms: 2592e6 },
+  { name: "week", ms: 6048e5 },
+  { name: "day", ms: 864e5 },
+  { name: "hour", ms: 36e5 },
+  { name: "minute", ms: 6e4 },
+  { name: "second", ms: 1e3 }
+];
+function useTimeAgoIntl(time, options = {}) {
+  const {
+    controls: exposeControls = false,
+    updateInterval = 3e4
+  } = options;
+  const { now, ...controls } = useNow({ interval: updateInterval, controls: true });
+  const result = computed(
+    () => getTimeAgoIntlResult(new Date(toValue(time)), options, toValue(now))
+  );
+  const parts = computed(() => result.value.parts);
+  const timeAgoIntl = computed(
+    () => formatTimeAgoIntlParts(parts.value, {
+      ...options,
+      locale: result.value.resolvedLocale
+    })
+  );
+  return exposeControls ? { timeAgoIntl, parts, ...controls } : timeAgoIntl;
+}
+function formatTimeAgoIntl(from, options = {}, now = Date.now()) {
+  const { parts, resolvedLocale } = getTimeAgoIntlResult(from, options, now);
+  return formatTimeAgoIntlParts(parts, {
+    ...options,
+    locale: resolvedLocale
+  });
+}
+function getTimeAgoIntlResult(from, options = {}, now = Date.now()) {
+  const {
+    locale,
+    relativeTimeFormatOptions = { numeric: "auto" }
+  } = options;
+  const rtf = new Intl.RelativeTimeFormat(locale, relativeTimeFormatOptions);
+  const { locale: resolvedLocale } = rtf.resolvedOptions();
+  const diff = +from - +now;
+  const absDiff = Math.abs(diff);
+  for (const { name, ms } of UNITS) {
+    if (absDiff >= ms) {
+      return {
+        resolvedLocale,
+        parts: rtf.formatToParts(Math.round(diff / ms), name)
+      };
+    }
+  }
+  return {
+    resolvedLocale,
+    parts: rtf.formatToParts(0, "second")
+  };
+}
+function formatTimeAgoIntlParts(parts, options = {}) {
+  const {
+    insertSpace = true,
+    joinParts,
+    locale
+  } = options;
+  if (typeof joinParts === "function")
+    return joinParts(parts, locale);
+  if (!insertSpace)
+    return parts.map((part) => part.value).join("");
+  return parts.map((part) => part.value.trim()).join(" ");
+}
+
+function useTimeoutPoll(fn, interval, options = {}) {
+  const {
+    immediate = true,
+    immediateCallback = false
+  } = options;
+  const { start } = useTimeoutFn(loop, interval, { immediate });
+  const isActive = shallowRef(false);
   async function loop() {
     if (!isActive.value)
       return;
@@ -6295,13 +7068,15 @@ function useTimeoutPoll(fn, interval, timeoutPollOptions) {
   function resume() {
     if (!isActive.value) {
       isActive.value = true;
-      loop();
+      if (immediateCallback)
+        fn();
+      start();
     }
   }
   function pause() {
     isActive.value = false;
   }
-  if (timeoutPollOptions == null ? void 0 : timeoutPollOptions.immediate)
+  if (immediate && isClient)
     resume();
   tryOnScopeDispose(pause);
   return {
@@ -6319,7 +7094,7 @@ function useTimestamp(options = {}) {
     interval = "requestAnimationFrame",
     callback
   } = options;
-  const ts = ref(timestamp() + offset);
+  const ts = shallowRef(timestamp() + offset);
   const update = () => ts.value = timestamp() + offset;
   const cb = callback ? () => {
     update();
@@ -6344,7 +7119,7 @@ function useTitle(newTitle = null, options = {}) {
   } = options;
   const originalTitle = (_a = document == null ? void 0 : document.title) != null ? _a : "";
   const title = toRef((_b = newTitle != null ? newTitle : document == null ? void 0 : document.title) != null ? _b : null);
-  const isReadonly = newTitle && typeof newTitle === "function";
+  const isReadonly = !!(newTitle && typeof newTitle === "function");
   function format(t) {
     if (!("titleTemplate" in options))
       return t;
@@ -6353,9 +7128,9 @@ function useTitle(newTitle = null, options = {}) {
   }
   watch(
     title,
-    (t, o) => {
-      if (t !== o && document)
-        document.title = format(typeof t === "string" ? t : "");
+    (newValue, oldValue) => {
+      if (newValue !== oldValue && document)
+        document.title = format(newValue != null ? newValue : "");
     },
     { immediate: true }
   );
@@ -6369,7 +7144,7 @@ function useTitle(newTitle = null, options = {}) {
       { childList: true }
     );
   }
-  tryOnBeforeUnmount(() => {
+  tryOnScopeDispose(() => {
     if (restoreOnUnmount) {
       const restoredTitle = restoreOnUnmount(originalTitle, title.value || "");
       if (restoredTitle != null && document)
@@ -6433,6 +7208,9 @@ function toVec(t) {
 }
 function executeTransition(source, from, to, options = {}) {
   var _a, _b;
+  const {
+    window = defaultWindow
+  } = options;
   const fromVal = toValue(from);
   const toVal = toValue(to);
   const v1 = toVec(fromVal);
@@ -6461,7 +7239,7 @@ function executeTransition(source, from, to, options = {}) {
       else if (typeof source.value === "number")
         source.value = arr[0];
       if (now < endAt) {
-        requestAnimationFrame(tick);
+        window == null ? void 0 : window.requestAnimationFrame(tick);
       } else {
         source.value = toVal;
         resolve();
@@ -6515,7 +7293,9 @@ function useUrlSearchParams(mode = "history", options = {}) {
     removeNullishValues = true,
     removeFalsyValues = false,
     write: enableWrite = true,
-    window = defaultWindow
+    writeMode = "replace",
+    window = defaultWindow,
+    stringify = (params) => params.toString()
   } = options;
   if (!window)
     return reactive(initialValue);
@@ -6532,7 +7312,7 @@ function useUrlSearchParams(mode = "history", options = {}) {
     }
   }
   function constructQuery(params) {
-    const stringified = params.toString();
+    const stringified = stringify(params);
     if (mode === "history")
       return `${stringified ? `?${stringified}` : ""}${window.location.hash || ""}`;
     if (mode === "hash-params")
@@ -6540,8 +7320,8 @@ function useUrlSearchParams(mode = "history", options = {}) {
     const hash = window.location.hash || "#";
     const index = hash.indexOf("?");
     if (index > 0)
-      return `${hash.slice(0, index)}${stringified ? `?${stringified}` : ""}`;
-    return `${hash}${stringified ? `?${stringified}` : ""}`;
+      return `${window.location.search || ""}${hash.slice(0, index)}${stringified ? `?${stringified}` : ""}`;
+    return `${window.location.search || ""}${hash}${stringified ? `?${stringified}` : ""}`;
   }
   function read() {
     return new URLSearchParams(getRawParams());
@@ -6570,7 +7350,7 @@ function useUrlSearchParams(mode = "history", options = {}) {
         else
           params.set(key, mapEntry);
       });
-      write(params);
+      write(params, false);
     },
     { deep: true }
   );
@@ -6578,11 +7358,19 @@ function useUrlSearchParams(mode = "history", options = {}) {
     pause();
     if (shouldUpdate)
       updateState(params);
-    window.history.replaceState(
-      window.history.state,
-      window.document.title,
-      window.location.pathname + constructQuery(params)
-    );
+    if (writeMode === "replace") {
+      window.history.replaceState(
+        window.history.state,
+        window.document.title,
+        window.location.pathname + constructQuery(params)
+      );
+    } else {
+      window.history.pushState(
+        window.history.state,
+        window.document.title,
+        window.location.pathname + constructQuery(params)
+      );
+    }
     resume();
   }
   function onChanged() {
@@ -6590,9 +7378,10 @@ function useUrlSearchParams(mode = "history", options = {}) {
       return;
     write(read(), true);
   }
-  useEventListener(window, "popstate", onChanged, false);
+  const listenerOptions = { passive: true };
+  useEventListener(window, "popstate", onChanged, listenerOptions);
   if (mode !== "history")
-    useEventListener(window, "hashchange", onChanged, false);
+    useEventListener(window, "hashchange", onChanged, listenerOptions);
   const initial = read();
   if (initial.keys().next().value)
     updateState(initial);
@@ -6603,8 +7392,8 @@ function useUrlSearchParams(mode = "history", options = {}) {
 
 function useUserMedia(options = {}) {
   var _a, _b;
-  const enabled = ref((_a = options.enabled) != null ? _a : false);
-  const autoSwitch = ref((_b = options.autoSwitch) != null ? _b : true);
+  const enabled = shallowRef((_a = options.enabled) != null ? _a : false);
+  const autoSwitch = shallowRef((_b = options.autoSwitch) != null ? _b : true);
   const constraints = ref(options.constraints);
   const { navigator = defaultNavigator } = options;
   const isSupported = useSupported(() => {
@@ -6686,8 +7475,9 @@ function useUserMedia(options = {}) {
   };
 }
 
+// @__NO_SIDE_EFFECTS__
 function useVModel(props, key, emit, options = {}) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c;
   const {
     clone = false,
     passive = false,
@@ -6700,14 +7490,7 @@ function useVModel(props, key, emit, options = {}) {
   const _emit = emit || (vm == null ? void 0 : vm.emit) || ((_a = vm == null ? void 0 : vm.$emit) == null ? void 0 : _a.bind(vm)) || ((_c = (_b = vm == null ? void 0 : vm.proxy) == null ? void 0 : _b.$emit) == null ? void 0 : _c.bind(vm == null ? void 0 : vm.proxy));
   let event = eventName;
   if (!key) {
-    if (isVue2) {
-      const modelOptions = (_e = (_d = vm == null ? void 0 : vm.proxy) == null ? void 0 : _d.$options) == null ? void 0 : _e.model;
-      key = (modelOptions == null ? void 0 : modelOptions.value) || "value";
-      if (!eventName)
-        event = (modelOptions == null ? void 0 : modelOptions.event) || "input";
-    } else {
-      key = "modelValue";
-    }
+    key = "modelValue";
   }
   event = event || `update:${key.toString()}`;
   const cloneFn = (val) => !clone ? val : typeof clone === "function" ? clone(val) : cloneFnJSON(val);
@@ -6755,6 +7538,7 @@ function useVModel(props, key, emit, options = {}) {
   }
 }
 
+// @__NO_SIDE_EFFECTS__
 function useVModels(props, emit, options = {}) {
   const ret = {};
   for (const key in props) {
@@ -6768,6 +7552,7 @@ function useVModels(props, emit, options = {}) {
   return ret;
 }
 
+// @__NO_SIDE_EFFECTS__
 function useVibrate(options) {
   const {
     pattern = [],
@@ -6821,7 +7606,7 @@ function useVirtualList(list, options) {
   };
 }
 function useVirtualListResources(list) {
-  const containerRef = ref(null);
+  const containerRef = shallowRef(null);
   const size = useElementSize(containerRef);
   const currentList = ref([]);
   const source = shallowRef(list);
@@ -6892,7 +7677,7 @@ function createGetDistance(itemSize, source) {
   };
 }
 function useWatchForSizes(size, list, containerRef, calculateRange) {
-  watch([size.width, size.height, list, containerRef], () => {
+  watch([size.width, size.height, () => toValue(list), containerRef], () => {
     calculateRange();
   });
 }
@@ -6979,40 +7764,53 @@ function useVerticalVirtualList(options, list) {
   };
 }
 
+// @__NO_SIDE_EFFECTS__
 function useWakeLock(options = {}) {
   const {
     navigator = defaultNavigator,
     document = defaultDocument
   } = options;
-  let wakeLock;
+  const requestedType = shallowRef(false);
+  const sentinel = shallowRef(null);
+  const documentVisibility = useDocumentVisibility({ document });
   const isSupported = useSupported(() => navigator && "wakeLock" in navigator);
-  const isActive = ref(false);
-  async function onVisibilityChange() {
-    if (!isSupported.value || !wakeLock)
-      return;
-    if (document && document.visibilityState === "visible")
-      wakeLock = await navigator.wakeLock.request("screen");
-    isActive.value = !wakeLock.released;
+  const isActive = computed(() => !!sentinel.value && documentVisibility.value === "visible");
+  if (isSupported.value) {
+    useEventListener(sentinel, "release", () => {
+      var _a, _b;
+      requestedType.value = (_b = (_a = sentinel.value) == null ? void 0 : _a.type) != null ? _b : false;
+    }, { passive: true });
+    whenever(
+      () => documentVisibility.value === "visible" && (document == null ? void 0 : document.visibilityState) === "visible" && requestedType.value,
+      (type) => {
+        requestedType.value = false;
+        forceRequest(type);
+      }
+    );
+  }
+  async function forceRequest(type) {
+    var _a;
+    await ((_a = sentinel.value) == null ? void 0 : _a.release());
+    sentinel.value = isSupported.value ? await navigator.wakeLock.request(type) : null;
   }
-  if (document)
-    useEventListener(document, "visibilitychange", onVisibilityChange, { passive: true });
   async function request(type) {
-    if (!isSupported.value)
-      return;
-    wakeLock = await navigator.wakeLock.request(type);
-    isActive.value = !wakeLock.released;
+    if (documentVisibility.value === "visible")
+      await forceRequest(type);
+    else
+      requestedType.value = type;
   }
   async function release() {
-    if (!isSupported.value || !wakeLock)
-      return;
-    await wakeLock.release();
-    isActive.value = !wakeLock.released;
-    wakeLock = null;
+    requestedType.value = false;
+    const s = sentinel.value;
+    sentinel.value = null;
+    await (s == null ? void 0 : s.release());
   }
   return {
+    sentinel,
     isSupported,
     isActive,
     request,
+    forceRequest,
     release
   };
 }
@@ -7026,14 +7824,20 @@ function useWebNotification(options = {}) {
   const isSupported = useSupported(() => {
     if (!window || !("Notification" in window))
       return false;
+    if (Notification.permission === "granted")
+      return true;
     try {
-      new Notification("");
+      const notification2 = new Notification("");
+      notification2.onshow = () => {
+        notification2.close();
+      };
     } catch (e) {
-      return false;
+      if (e.name === "TypeError")
+        return false;
     }
     return true;
   });
-  const permissionGranted = ref(isSupported.value && "permission" in Notification && Notification.permission === "granted");
+  const permissionGranted = shallowRef(isSupported.value && "permission" in Notification && Notification.permission === "granted");
   const notification = ref(null);
   const ensurePermissions = async () => {
     if (!isSupported.value)
@@ -7104,11 +7908,12 @@ function useWebSocket(url, options = {}) {
     onError,
     onMessage,
     immediate = true,
+    autoConnect = true,
     autoClose = true,
     protocols = []
   } = options;
   const data = ref(null);
-  const status = ref("CLOSED");
+  const status = shallowRef("CLOSED");
   const wsRef = ref();
   const urlRef = toRef(url);
   let heartbeatPause;
@@ -7116,6 +7921,7 @@ function useWebSocket(url, options = {}) {
   let explicitlyClosed = false;
   let retried = 0;
   let bufferedData = [];
+  let retryTimeout;
   let pongTimeoutWait;
   const _sendBuffer = () => {
     if (bufferedData.length && wsRef.value && status.value === "OPEN") {
@@ -7124,12 +7930,19 @@ function useWebSocket(url, options = {}) {
       bufferedData = [];
     }
   };
+  const resetRetry = () => {
+    if (retryTimeout != null) {
+      clearTimeout(retryTimeout);
+      retryTimeout = void 0;
+    }
+  };
   const resetHeartbeat = () => {
     clearTimeout(pongTimeoutWait);
     pongTimeoutWait = void 0;
   };
   const close = (code = 1e3, reason) => {
-    if (!isClient || !wsRef.value)
+    resetRetry();
+    if (!isClient && !isWorker || !wsRef.value)
       return;
     explicitlyClosed = true;
     resetHeartbeat();
@@ -7155,26 +7968,29 @@ function useWebSocket(url, options = {}) {
     status.value = "CONNECTING";
     ws.onopen = () => {
       status.value = "OPEN";
+      retried = 0;
       onConnected == null ? void 0 : onConnected(ws);
       heartbeatResume == null ? void 0 : heartbeatResume();
       _sendBuffer();
     };
     ws.onclose = (ev) => {
       status.value = "CLOSED";
+      resetHeartbeat();
+      heartbeatPause == null ? void 0 : heartbeatPause();
       onDisconnected == null ? void 0 : onDisconnected(ws, ev);
-      if (!explicitlyClosed && options.autoReconnect) {
+      if (!explicitlyClosed && options.autoReconnect && (wsRef.value == null || ws === wsRef.value)) {
         const {
           retries = -1,
           delay = 1e3,
           onFailed
         } = resolveNestedOptions(options.autoReconnect);
-        retried += 1;
-        if (typeof retries === "number" && (retries < 0 || retried < retries))
-          setTimeout(_init, delay);
-        else if (typeof retries === "function" && retries())
-          setTimeout(_init, delay);
-        else
+        const checkRetires = typeof retries === "function" ? retries : () => typeof retries === "number" && (retries < 0 || retried < retries);
+        if (checkRetires(retried)) {
+          retried += 1;
+          retryTimeout = setTimeout(_init, delay);
+        } else {
           onFailed == null ? void 0 : onFailed();
+        }
       }
     };
     ws.onerror = (e) => {
@@ -7184,9 +8000,10 @@ function useWebSocket(url, options = {}) {
       if (options.heartbeat) {
         resetHeartbeat();
         const {
-          message = DEFAULT_PING_MESSAGE
+          message = DEFAULT_PING_MESSAGE,
+          responseMessage = message
         } = resolveNestedOptions(options.heartbeat);
-        if (e.data === message)
+        if (e.data === toValue(responseMessage))
           return;
       }
       data.value = e.data;
@@ -7201,7 +8018,7 @@ function useWebSocket(url, options = {}) {
     } = resolveNestedOptions(options.heartbeat);
     const { pause, resume } = useIntervalFn(
       () => {
-        send(message, false);
+        send(toValue(message), false);
         if (pongTimeoutWait != null)
           return;
         pongTimeoutWait = setTimeout(() => {
@@ -7217,7 +8034,7 @@ function useWebSocket(url, options = {}) {
   }
   if (autoClose) {
     if (isClient)
-      useEventListener("beforeunload", () => close());
+      useEventListener("beforeunload", () => close(), { passive: true });
     tryOnScopeDispose(close);
   }
   const open = () => {
@@ -7230,7 +8047,8 @@ function useWebSocket(url, options = {}) {
   };
   if (immediate)
     open();
-  watch(urlRef, open);
+  if (autoConnect)
+    watch(urlRef, open);
   return {
     data,
     status,
@@ -7280,17 +8098,6 @@ function useWebWorker(arg0, workerOptions, options) {
   };
 }
 
-function jobRunner(userFunc) {
-  return (e) => {
-    const userFuncArgs = e.data[0];
-    return Promise.resolve(userFunc.apply(void 0, userFuncArgs)).then((result) => {
-      postMessage(["SUCCESS", result]);
-    }).catch((error) => {
-      postMessage(["ERROR", error]);
-    });
-  };
-}
-
 function depsParser(deps, localDeps) {
   if (deps.length === 0 && localDeps.length === 0)
     return "";
@@ -7308,6 +8115,17 @@ function depsParser(deps, localDeps) {
   return `${depsString.trim() === "" ? "" : importString} ${depsFunctionString}`;
 }
 
+function jobRunner(userFunc) {
+  return (e) => {
+    const userFuncArgs = e.data[0];
+    return Promise.resolve(userFunc.apply(void 0, userFuncArgs)).then((result) => {
+      postMessage(["SUCCESS", result]);
+    }).catch((error) => {
+      postMessage(["ERROR", error]);
+    });
+  };
+}
+
 function createWorkerBlobUrl(fn, deps, localDeps) {
   const blobCode = `${depsParser(deps, localDeps)}; onmessage=(${jobRunner})(${fn})`;
   const blob = new Blob([blobCode], { type: "text/javascript" });
@@ -7323,9 +8141,9 @@ function useWebWorkerFn(fn, options = {}) {
     window = defaultWindow
   } = options;
   const worker = ref();
-  const workerStatus = ref("PENDING");
+  const workerStatus = shallowRef("PENDING");
   const promise = ref({});
-  const timeoutId = ref();
+  const timeoutId = shallowRef();
   const workerTerminate = (status = "PENDING") => {
     if (worker.value && worker.value._url && window) {
       worker.value.terminate();
@@ -7374,11 +8192,12 @@ function useWebWorkerFn(fn, options = {}) {
     return newWorker;
   };
   const callWorker = (...fnArgs) => new Promise((resolve, reject) => {
+    var _a;
     promise.value = {
       resolve,
       reject
     };
-    worker.value && worker.value.postMessage([[...fnArgs]]);
+    (_a = worker.value) == null ? void 0 : _a.postMessage([[...fnArgs]]);
     workerStatus.value = "RUNNING";
   });
   const workerFn = (...fnArgs) => {
@@ -7398,74 +8217,49 @@ function useWebWorkerFn(fn, options = {}) {
   };
 }
 
+// @__NO_SIDE_EFFECTS__
 function useWindowFocus(options = {}) {
   const { window = defaultWindow } = options;
   if (!window)
-    return ref(false);
-  const focused = ref(window.document.hasFocus());
+    return shallowRef(false);
+  const focused = shallowRef(window.document.hasFocus());
+  const listenerOptions = { passive: true };
   useEventListener(window, "blur", () => {
     focused.value = false;
-  });
+  }, listenerOptions);
   useEventListener(window, "focus", () => {
     focused.value = true;
-  });
+  }, listenerOptions);
   return focused;
 }
 
 function useWindowScroll(options = {}) {
-  const { window = defaultWindow, behavior = "auto" } = options;
-  if (!window) {
-    return {
-      x: ref(0),
-      y: ref(0)
-    };
-  }
-  const internalX = ref(window.scrollX);
-  const internalY = ref(window.scrollY);
-  const x = computed({
-    get() {
-      return internalX.value;
-    },
-    set(x2) {
-      scrollTo({ left: x2, behavior });
-    }
-  });
-  const y = computed({
-    get() {
-      return internalY.value;
-    },
-    set(y2) {
-      scrollTo({ top: y2, behavior });
-    }
-  });
-  useEventListener(
-    window,
-    "scroll",
-    () => {
-      internalX.value = window.scrollX;
-      internalY.value = window.scrollY;
-    },
-    {
-      capture: false,
-      passive: true
-    }
-  );
-  return { x, y };
+  const { window = defaultWindow, ...rest } = options;
+  return useScroll(window, rest);
 }
 
+// @__NO_SIDE_EFFECTS__
 function useWindowSize(options = {}) {
   const {
     window = defaultWindow,
     initialWidth = Number.POSITIVE_INFINITY,
     initialHeight = Number.POSITIVE_INFINITY,
     listenOrientation = true,
-    includeScrollbar = true
+    includeScrollbar = true,
+    type = "inner"
   } = options;
-  const width = ref(initialWidth);
-  const height = ref(initialHeight);
+  const width = shallowRef(initialWidth);
+  const height = shallowRef(initialHeight);
   const update = () => {
     if (window) {
-      if (includeScrollbar) {
+      if (type === "outer") {
+        width.value = window.outerWidth;
+        height.value = window.outerHeight;
+      } else if (type === "visual" && window.visualViewport) {
+        const { width: visualViewportWidth, height: visualViewportHeight, scale } = window.visualViewport;
+        width.value = Math.round(visualViewportWidth * scale);
+        height.value = Math.round(visualViewportHeight * scale);
+      } else if (includeScrollbar) {
         width.value = window.innerWidth;
         height.value = window.innerHeight;
       } else {
@@ -7476,7 +8270,11 @@ function useWindowSize(options = {}) {
   };
   update();
   tryOnMounted(update);
-  useEventListener("resize", update, { passive: true });
+  const listenerOptions = { passive: true };
+  useEventListener("resize", update, listenerOptions);
+  if (window && type === "visual" && window.visualViewport) {
+    useEventListener(window.visualViewport, "resize", update, listenerOptions);
+  }
   if (listenOrientation) {
     const matches = useMediaQuery("(orientation: portrait)");
     watch(matches, () => update());
@@ -7484,4 +8282,4 @@ function useWindowSize(options = {}) {
   return { width, height };
 }
 
-export { DefaultMagicKeysAliasMap, StorageSerializers, TransitionPresets, computedAsync as asyncComputed, breakpointsAntDesign, breakpointsBootstrapV5, breakpointsMasterCss, breakpointsPrimeFlex, breakpointsQuasar, breakpointsSematic, breakpointsTailwind, breakpointsVuetify, breakpointsVuetifyV2, breakpointsVuetifyV3, bypassFilter, camelize, clamp, cloneFnJSON, computedAsync, computedInject, computedWithControl, containsProp, computedWithControl as controlledComputed, createEventHook, createFetch, createFilterWrapper, createReusableTemplate, createSingletonPromise, createTemplatePromise, createUnrefFn, customStorageEventName, debounceFilter, defaultDocument, defaultLocation, defaultNavigator, defaultWindow, executeTransition, formatTimeAgo, getSSRHandler, hasOwn, identity, watchIgnorable as ignorableWatch, increaseWithUnit, isClient, isDef, isIOS, isObject, isWorker, makeDestructurable, mapGamepadToXbox360Controller, noop, notNullish, objectEntries, objectOmit, objectPick, onClickOutside, onKeyDown, onKeyPressed, onKeyStroke, onKeyUp, onLongPress, onStartTyping, pausableFilter, watchPausable as pausableWatch, promiseTimeout, setSSRHandler, syncRef, templateRef, throttleFilter, timestamp, toRef, toRefs, toValue, tryOnBeforeUnmount, tryOnMounted, tryOnScopeDispose, tryOnUnmounted, unrefElement, until, useActiveElement, useAnimate, useAsyncQueue, useAsyncState, useBase64, useBattery, useBluetooth, useBreakpoints, useBroadcastChannel, useBrowserLocation, useCached, useClipboard, useClipboardItems, useCloned, useColorMode, useConfirmDialog, useCssVar, useCurrentElement, useCycleList, useDark, useDebounceFn, useDebouncedRefHistory, useDeviceMotion, useDeviceOrientation, useDevicePixelRatio, useDevicesList, useDisplayMedia, useDocumentVisibility, useDraggable, useDropZone, useElementBounding, useElementByPoint, useElementHover, useElementSize, useElementVisibility, useEventBus, useEventListener, useEventSource, useEyeDropper, useFavicon, useFetch, useFileDialog, useFileSystemAccess, useFocus, useFocusWithin, useFps, useFullscreen, useGamepad, useGeolocation, useIdle, useImage, useInfiniteScroll, useIntersectionObserver, useIntervalFn, useKeyModifier, useLocalStorage, useMagicKeys, useManualRefHistory, useMediaControls, useMediaQuery, useMemoize, useMemory, useMounted, useMouse, useMouseInElement, useMousePressed, useMutationObserver, useNavigatorLanguage, useNetwork, useNow, useObjectUrl, useOffsetPagination, useOnline, usePageLeave, useParallax, useParentElement, usePerformanceObserver, usePermission, usePointer, usePointerLock, usePointerSwipe, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePreferredLanguages, usePreferredReducedMotion, usePrevious, useRafFn, useRefHistory, useResizeObserver, useScreenOrientation, useScreenSafeArea, useScriptTag, useScroll, useScrollLock, useSessionStorage, useShare, useSorted, useSpeechRecognition, useSpeechSynthesis, useStepper, useStorage, useStorageAsync, useStyleTag, useSupported, useSwipe, useTemplateRefsList, useTextDirection, useTextSelection, useTextareaAutosize, useThrottleFn, useThrottledRefHistory, useTimeAgo, useTimeoutFn, useTimeoutPoll, useTimestamp, useTitle, useTransition, useUrlSearchParams, useUserMedia, useVModel, useVModels, useVibrate, useVirtualList, useWakeLock, useWebNotification, useWebSocket, useWebWorker, useWebWorkerFn, useWindowFocus, useWindowScroll, useWindowSize, watchIgnorable, watchPausable, watchWithFilter };
+export { DefaultMagicKeysAliasMap, StorageSerializers, TransitionPresets, computedAsync as asyncComputed, breakpointsAntDesign, breakpointsBootstrapV5, breakpointsElement, breakpointsMasterCss, breakpointsPrimeFlex, breakpointsQuasar, breakpointsSematic, breakpointsTailwind, breakpointsVuetify, breakpointsVuetifyV2, breakpointsVuetifyV3, bypassFilter, camelize, clamp, cloneFnJSON, computedAsync, computedInject, computedWithControl, containsProp, computedWithControl as controlledComputed, createEventHook, createFetch, createFilterWrapper, createRef, createReusableTemplate, createSingletonPromise, createTemplatePromise, createUnrefFn, customStorageEventName, debounceFilter, defaultDocument, defaultLocation, defaultNavigator, defaultWindow, executeTransition, formatTimeAgo, formatTimeAgoIntl, formatTimeAgoIntlParts, getSSRHandler, hasOwn, identity, watchIgnorable as ignorableWatch, increaseWithUnit, injectLocal, isClient, isDef, isIOS, isObject, isWorker, makeDestructurable, mapGamepadToXbox360Controller, noop, notNullish, objectEntries, objectOmit, objectPick, onClickOutside, onElementRemoval, onKeyDown, onKeyPressed, onKeyStroke, onKeyUp, onLongPress, onStartTyping, pausableFilter, watchPausable as pausableWatch, promiseTimeout, provideLocal, provideSSRWidth, pxValue, setSSRHandler, syncRef, templateRef, throttleFilter, timestamp, toArray, toRef, toRefs, tryOnMounted, tryOnScopeDispose, tryOnUnmounted, unrefElement, until, useActiveElement, useAnimate, useAsyncQueue, useAsyncState, useBase64, useBattery, useBluetooth, useBreakpoints, useBroadcastChannel, useBrowserLocation, useCached, useClipboard, useClipboardItems, useCloned, useColorMode, useConfirmDialog, useCountdown, useCssVar, useCurrentElement, useCycleList, useDark, useDebounceFn, useDebouncedRefHistory, useDeviceMotion, useDeviceOrientation, useDevicePixelRatio, useDevicesList, useDisplayMedia, useDocumentVisibility, useDraggable, useDropZone, useElementBounding, useElementByPoint, useElementHover, useElementSize, useElementVisibility, useEventBus, useEventListener, useEventSource, useEyeDropper, useFavicon, useFetch, useFileDialog, useFileSystemAccess, useFocus, useFocusWithin, useFps, useFullscreen, useGamepad, useGeolocation, useIdle, useImage, useInfiniteScroll, useIntersectionObserver, useIntervalFn, useKeyModifier, useLocalStorage, useMagicKeys, useManualRefHistory, useMediaControls, useMediaQuery, useMemoize, useMemory, useMounted, useMouse, useMouseInElement, useMousePressed, useMutationObserver, useNavigatorLanguage, useNetwork, useNow, useObjectUrl, useOffsetPagination, useOnline, usePageLeave, useParallax, useParentElement, usePerformanceObserver, usePermission, usePointer, usePointerLock, usePointerSwipe, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePreferredLanguages, usePreferredReducedMotion, usePreferredReducedTransparency, usePrevious, useRafFn, useRefHistory, useResizeObserver, useSSRWidth, useScreenOrientation, useScreenSafeArea, useScriptTag, useScroll, useScrollLock, useSessionStorage, useShare, useSorted, useSpeechRecognition, useSpeechSynthesis, useStepper, useStorage, useStorageAsync, useStyleTag, useSupported, useSwipe, useTemplateRefsList, useTextDirection, useTextSelection, useTextareaAutosize, useThrottleFn, useThrottledRefHistory, useTimeAgo, useTimeAgoIntl, useTimeoutFn, useTimeoutPoll, useTimestamp, useTitle, useTransition, useUrlSearchParams, useUserMedia, useVModel, useVModels, useVibrate, useVirtualList, useWakeLock, useWebNotification, useWebSocket, useWebWorker, useWebWorkerFn, useWindowFocus, useWindowScroll, useWindowSize, watchIgnorable, watchImmediate, watchOnce, watchPausable, watchWithFilter, whenever };