@reause/shared 0.1.2

package/dist/index.js

@@ -0,0 +1,3091 @@
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region createEventHook/index.tsx
+/**
+* Utility for creating event hooks
+*
+* @see https://vueuse.org/createEventHook
+*
+* @__NO_SIDE_EFFECTS__
+*/
+function createEventHook() {
+	const fns = /* @__PURE__ */ new Set();
+	const off = (fn) => {
+		fns.delete(fn);
+	};
+	const clear = () => {
+		fns.clear();
+	};
+	const on = (fn) => {
+		fns.add(fn);
+		const offFn = () => off(fn);
+		return { off: offFn };
+	};
+	const trigger = (...args) => {
+		return Promise.all(Array.from(fns).map((fn) => fn(...args)));
+	};
+	return {
+		on,
+		off,
+		trigger,
+		clear
+	};
+}
+//#endregion
+//#region createGlobalState/index.tsx
+/* @__NO_SIDE_EFFECTS__ */
+function createGlobalState(initialState) {
+	let state = typeof initialState === "function" ? initialState() : initialState;
+	const listeners = /* @__PURE__ */ new Set();
+	const subscribe = (listener) => {
+		listeners.add(listener);
+		return () => {
+			listeners.delete(listener);
+		};
+	};
+	const getSnapshot = () => state;
+	const setState = (update) => {
+		state = typeof update === "function" ? update(state) : update;
+		for (const listener of listeners) listener();
+	};
+	return function useGlobalState() {
+		const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+		return useMemo(() => [snapshot, setState], [snapshot, setState]);
+	};
+}
+//#endregion
+//#region createInjectionState/index.tsx
+function createInjectionState(composable, options) {
+	var _options$injectionKey;
+	const InjectionContext = (_options$injectionKey = options === null || options === void 0 ? void 0 : options.injectionKey) !== null && _options$injectionKey !== void 0 ? _options$injectionKey : createContext(options === null || options === void 0 ? void 0 : options.defaultValue);
+	function Provider(props) {
+		const { children, ...rest } = props;
+		const state = composable(rest);
+		return /* @__PURE__ */ jsx(InjectionContext.Provider, {
+			value: state,
+			children
+		});
+	}
+	Provider.displayName = composable.name ? `${composable.name}Provider` : "InjectionStateProvider";
+	const useInjectedState = () => useContext(InjectionContext);
+	return [Provider, useInjectedState];
+}
+//#endregion
+//#region createSharedHook/index.tsx
+/**
+* Make a composable function usable with multiple React components.
+*
+* Map from @vueuse/shared `createSharedComposable`
+* Mapping: upstream runs the composable once inside a detached
+* `effectScope(true)`, counts the subscribers and stops the scope when the
+* last consumer leaves. React has no `effectScope`, so the same lifetime is
+* expressed by an external store held in the closure of one
+* `createSharedHook` call — the `state` snapshot, a `Set` of `listeners`, the
+* `refCount` and the optional `cleanup` — which every consumer reads through
+* `useSyncExternalStore`.
+*
+* The shared instance is created by the **first consumer to render** (the
+* "creator"): it runs the wrapped hook on every one of its renders — the
+* wrapped hook is therefore free to use React hooks internally — assigning
+* the result to `state`, and `useLayoutEffect` publishes the latest value to
+* every other consumer after commit. Every later consumer never calls the
+* wrapped hook (both call patterns are stable per consumer, so the hook order
+* never changes across renders); it just reads the published snapshot. The
+* creator assigns `state` *before* `useSyncExternalStore` reads its snapshot
+* in the same render, so every consumer — creator included — receives the
+* shared value on its very first render, never `undefined`.
+*
+* The creator deliberately **does not register a store listener**: it already
+* re-renders on its own state changes (the wrapped hook's setters belong to
+* its component) and re-publishes afterwards, so a notification would only
+* re-render it from its own publish. `useSyncExternalStore` requires the
+* snapshot to stay reference-stable between real changes ("the result of
+* getSnapshot should be cached"): every creator render assigns a fresh
+* reference, so a subscribed creator would see "the store changed" forever and
+* loop. The creator still counts toward `refCount`, so teardown timing is
+* exact — it just never receives notifications.
+*
+* Deviations from upstream:
+* - upstream runs the composable exactly once, with the first caller's
+*   arguments; here the creator re-runs the wrapped hook on every one of its
+*   renders (React hooks cannot be called outside a render), so while the
+*   creator stays mounted the shared value keeps tracking its latest render.
+* - **frozen after the creator unmounts**: the wrapped hook's setters belong
+*   to the creator's component, so if the creator unmounts while other
+*   consumers remain mounted, the shared value stops updating — it freezes at
+*   the last published value. The instance itself lives on until the last
+*   consumer unmounts (upstream lifetime parity).
+* - `getServerSnapshot` returns the same snapshot as the client: server
+*   rendering yields the uninitialized value, the client fills it in after
+*   hydration, and `useSyncExternalStore` handles the mismatch.
+* - Teardown has no `tryOnScopeDispose` to hook into, so the optional
+*   `cleanup` argument is called — and the state dropped — when the last
+*   consumer unmounts; a later mount starts a fresh instance, exactly like
+*   upstream's `scope.stop()` followed by `state = undefined`.
+*
+* ```tsx
+* const useSharedMouse = createSharedHook(useMouse)
+*
+* // CompA — const { x, y } = useSharedMouse()
+* // CompB — const { x, y } = useSharedMouse() // same state, no new listeners
+* ```
+*
+* @see https://vueuse.org/createSharedComposable
+* @param hook The composable to share across every consumer of the returned
+* hook. It runs on every render of the first consumer (the creator).
+* @param cleanup Called when the last consumer unmounts, before the shared
+* state is dropped — the place to undo whatever `hook` set up outside React.
+*/
+/* @__NO_SIDE_EFFECTS__ */
+function createSharedHook(hook, cleanup) {
+	let state;
+	const listeners = /* @__PURE__ */ new Set();
+	let refCount = 0;
+	let teardown = cleanup;
+	let creatorId;
+	const notify = () => {
+		for (const listener of listeners) listener();
+	};
+	const subscribe = (listener) => {
+		listeners.add(listener);
+		refCount += 1;
+		return () => {
+			listeners.delete(listener);
+			refCount -= 1;
+			if (refCount <= 0) {
+				state = void 0;
+				refCount = 0;
+				creatorId = void 0;
+				teardown === null || teardown === void 0 || teardown();
+				teardown = void 0;
+			}
+		};
+	};
+	const creatorSubscribe = (_listener) => {
+		refCount += 1;
+		return () => {
+			refCount -= 1;
+			if (refCount <= 0) {
+				state = void 0;
+				refCount = 0;
+				creatorId = void 0;
+				teardown === null || teardown === void 0 || teardown();
+				teardown = void 0;
+			}
+		};
+	};
+	const getSnapshot = () => state;
+	const getServerSnapshot = getSnapshot;
+	return function useSharedHook(...args) {
+		const id = useRef(Symbol("createSharedHook")).current;
+		if (creatorId === void 0) creatorId = id;
+		const isCreator = creatorId === id;
+		if (isCreator) state = hook(...args);
+		useLayoutEffect(() => {
+			if (isCreator) notify();
+		});
+		return useSyncExternalStore(isCreator ? creatorSubscribe : subscribe, getSnapshot, getServerSnapshot);
+	};
+}
+//#endregion
+//#region utils/index.tsx
+function promiseTimeout(ms, throwOnTimeout = false, reason = "Timeout") {
+	return new Promise((resolve, reject) => {
+		if (throwOnTimeout) setTimeout(reject, ms, reason);
+		else setTimeout(resolve, ms);
+	});
+}
+/**
+* Create singleton promise function
+*
+* @example
+* ```
+* const promise = createSingletonPromise(async () => { ... })
+*
+* await promise()
+* await promise() // all of them will be bind to a single promise instance
+* await promise() // and be resolved together
+* ```
+*/
+function createSingletonPromise(fn) {
+	let _promise;
+	function wrapper() {
+		if (!_promise) _promise = fn();
+		return _promise;
+	}
+	wrapper.reset = async () => {
+		const _prev = _promise;
+		_promise = void 0;
+		if (_prev) await _prev;
+	};
+	return wrapper;
+}
+function increaseWithUnit(target, delta) {
+	var _target$match;
+	if (typeof target === "number") return target + delta;
+	const value = ((_target$match = target.match(/^-?\d+\.?\d*/)) === null || _target$match === void 0 ? void 0 : _target$match[0]) || "";
+	const unit = target.slice(value.length);
+	const result = Number.parseFloat(value) + delta;
+	if (Number.isNaN(result)) return target;
+	return result + unit;
+}
+/**
+* Get a px value for SSR use, do not rely on this method outside of SSR as REM
+* unit is assumed at 16px, which might not be the case on the client
+*
+* @example pxValue('37rem') // 592
+* @example pxValue('500px') // 500
+*/
+function pxValue(px) {
+	return px.endsWith("rem") ? Number.parseFloat(px) * 16 : Number.parseFloat(px);
+}
+/**
+* Create a new subset object by giving keys
+*/
+function objectPick(obj, keys, omitUndefined = false) {
+	return keys.reduce((n, k) => {
+		if (k in obj) {
+			if (!omitUndefined || obj[k] !== void 0) n[k] = obj[k];
+		}
+		return n;
+	}, {});
+}
+/**
+* Create a new subset object by omit giving keys
+*/
+function objectOmit(obj, keys, omitUndefined = false) {
+	return Object.fromEntries(Object.entries(obj).filter(([key, value]) => {
+		return (!omitUndefined || value !== void 0) && !keys.includes(key);
+	}));
+}
+function toArray(value) {
+	return Array.isArray(value) ? value : [value];
+}
+const isClient$1 = typeof window !== "undefined" && typeof document !== "undefined";
+const isDef = (val) => typeof val !== "undefined";
+const assert = (condition, ...infos) => {
+	if (!condition) console.warn(...infos);
+};
+const toString$1 = Object.prototype.toString;
+const isObject = (val) => toString$1.call(val) === "[object Object]";
+const now = () => Date.now();
+const timestamp = () => +Date.now();
+const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
+const rand = (min, max) => {
+	min = Math.ceil(min);
+	max = Math.floor(max);
+	return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+const hasOwn = (val, key) => Object.hasOwn(val, key);
+const isIOS = /* #__PURE__ */ getIsIOS();
+function getIsIOS() {
+	var _window, _window2, _window3;
+	return isClient$1 && !!((_window = window) === null || _window === void 0 || (_window = _window.navigator) === null || _window === void 0 ? void 0 : _window.userAgent) && (/iP(?:ad|hone|od)/.test(window.navigator.userAgent) || ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.navigator) === null || _window2 === void 0 ? void 0 : _window2.maxTouchPoints) > 2 && /iPad|Macintosh/.test((_window3 = window) === null || _window3 === void 0 ? void 0 : _window3.navigator.userAgent));
+}
+function cacheStringFunction(fn) {
+	const cache = Object.create(null);
+	return ((str) => {
+		return cache[str] || (cache[str] = fn(str));
+	});
+}
+const hyphenateRE = /\B([A-Z])/g;
+const hyphenate = cacheStringFunction((str) => str.replace(hyphenateRE, "-$1").toLowerCase());
+/**
+* Type guard for React ref objects (`RefObject` — `{ current }` holders).
+* Callback refs are functions and cannot be read synchronously, so they are
+* not ref-like.
+*/
+function isRefLike(value) {
+	return value !== null && value !== void 0 && typeof value === "object" && "current" in value;
+}
+function toValue(value) {
+	if (Array.isArray(value) && value.length === 2 && typeof value[1] === "function") return value[0];
+	if (value !== null && value !== void 0 && typeof value === "object" && "value" in value && !("addEventListener" in value)) return value.value;
+	if (typeof value === "function") return value();
+	if (isRefLike(value)) return value.current;
+	return value;
+}
+/**
+* Write a value back through a writable `State<T>` source — a ref-like
+* `.current`, a `[value, setter]` tuple or a `{ value, onChange }` pair.
+* Plain values and getters have no write path and are skipped. This is the
+* write-side counterpart of `toValue`; hooks that push values into a
+* `State<T>` import it from here rather than re-implementing the branches.
+*/
+function writeState(source, value) {
+	if (source === null || source === void 0) return;
+	if (Array.isArray(source) && source.length === 2 && typeof source[1] === "function") {
+		source[1](value);
+		return;
+	}
+	if (isRefLike(source)) {
+		source.current = value;
+		return;
+	}
+	if (typeof source === "object" && !Array.isArray(source) && "value" in source && !("addEventListener" in source)) {
+		var _onChange;
+		(_onChange = source.onChange) === null || _onChange === void 0 || _onChange.call(source, value);
+	}
+}
+//#endregion
+//#region isDefined/index.tsx
+function isDefined(v) {
+	return (isRefLike(v) ? v.current : v) != null;
+}
+//#endregion
+//#region makeDestructurable/index.tsx
+/**
+* Make isomorphic destructurable for object and array at the same time —
+* React port of VueUse's `makeDestructurable` (a pure utility function, so it
+* maps 1:1 with no React adaptation). See this blog for the underlying idea:
+* https://antfu.me/posts/destructuring-with-object-or-array/
+*
+* Map from @vueuse/shared `makeDestructurable`
+* Upstream semantics are kept verbatim: given `(obj, arr)` the returned value
+* can be destructured as an object (`const { foo, bar } = obj`) or as an array
+* (`const [foo, bar] = obj`) — the array mode is backed by a non-enumerable
+* `Symbol.iterator` defined on a shallow clone of `obj` (spread
+* `{ ...obj }`); `Object.assign` appears only in the no-Symbol SSR fallback.
+*
+* @example
+* const foo = { name: 'foo' }
+* const bar = 1024
+* const obj = makeDestructurable({ foo, bar } as const, [foo, bar] as const)
+* const { foo: f1, bar: b1 } = obj // object destructuring
+* const [f2, b2] = obj // array destructuring
+*/
+/* @__NO_SIDE_EFFECTS__ */
+function makeDestructurable(obj, arr) {
+	if (typeof Symbol !== "undefined") {
+		const clone = { ...obj };
+		Object.defineProperty(clone, Symbol.iterator, {
+			enumerable: false,
+			value() {
+				let index = 0;
+				return { next: () => ({
+					value: arr[index++],
+					done: index > arr.length
+				}) };
+			}
+		});
+		return clone;
+	} else return Object.assign([...arr], obj);
+}
+//#endregion
+//#region syncState/index.tsx
+const neverObserved$1 = Symbol("reause.syncState.neverObserved");
+function classifyWritable(source) {
+	if (source === null || source === void 0) return "readonly";
+	if (isRefLike(source)) return "sync";
+	if (Array.isArray(source) && source.length === 2 && typeof source[1] === "function") return "async";
+	if (typeof source === "object" && !Array.isArray(source) && "value" in source && !("addEventListener" in source)) return "async";
+	return "readonly";
+}
+/**
+* Two-way state synchronization — keeps two writable `State<T>` sources in
+* sync, with optional direction and value transforms.
+*
+* Map from @vueuse/shared `syncRef`
+* (`source/vueuse/packages/shared/syncRef/`), renamed `syncState` for the
+* React port: the two sides are `State<T>` sources — a `[value, setter]`
+* tuple, a `{ value, onChange }` pair, a ref-like `{ current }`, a getter or
+* a plain value — instead of Vue refs. Each side is read with `toValue` and
+* written back through its writable form (tuple setter / `onChange` /
+* `.current`); plain values and getters have no write path, so that side is
+* treated as read-only (the sync becomes one-way for it).
+*
+* React Hook adaptation: upstream drives both sides through Vue's reactive
+* `watchPausable`, pausing all watchers while writing so a side never echoes
+* its own write back. React has no reactive system, so `syncState` is
+* implemented as a hook (call it unconditionally at the top of a component).
+* A `useEffect` that runs after every commit compares each side's resolved
+* value with the last observed one via `Object.is` and mirrors the changed
+* side into the other — through the optional `transform` convertors when
+* given — recording the value it just wrote as already observed on the
+* receiving side (the React analogue of upstream's pause/resume). Ref-like
+* `.current` writes are synchronous and need no absorption; writes through a
+* setter / `onChange` are asynchronous, so until the target's value reflects
+* the write the stale pre-write value is absorbed and never mistaken for an
+* external change. Read-only sides (plain values / getters) are never marked
+* as written, so a changing source keeps propagating. The initial sync
+* (upstream default `immediate: true`) runs in the mount effect and cascades
+* ltr before rtl,
+* matching upstream's watcher creation order. Because the observation happens
+* post-commit, an external mutation is only adopted on the render that
+* follows it — the mutation itself never schedules a render, so a bare
+* `.current` write outside of React is not observed (see the maintainer
+* notes on reause #40 / #41). The returned `stop` function tears the
+* synchronization down; the effect also stops doing any work once the owning
+* component unmounts.
+*
+* @example
+* const [a, setA] = useState('a')
+* const [b, setB] = useState('b')
+*
+* const stop = syncState([a, setA], [b, setB])
+*
+* console.log(a) // a
+*
+* setB('foo') // then the component re-renders
+* console.log(a) // foo
+*
+* setA('bar') // then the component re-renders
+* console.log(b) // bar
+*
+* stop()
+*/
+function syncState(left, right, options = {}) {
+	var _transform$ltr, _transform$rtl;
+	const { immediate = true, direction = "both", transform = {} } = options;
+	const leftRef = useRef(left);
+	leftRef.current = left;
+	const rightRef = useRef(right);
+	rightRef.current = right;
+	const transformLTR = (_transform$ltr = transform.ltr) !== null && _transform$ltr !== void 0 ? _transform$ltr : ((v) => v);
+	const transformRTL = (_transform$rtl = transform.rtl) !== null && _transform$rtl !== void 0 ? _transform$rtl : ((v) => v);
+	const lastLeftRef = useRef(neverObserved$1);
+	const lastRightRef = useRef(neverObserved$1);
+	const pendingLeftRef = useRef(null);
+	const pendingRightRef = useRef(null);
+	const stoppedRef = useRef(false);
+	useEffect(() => {
+		if (stoppedRef.current) return;
+		const leftState = leftRef.current;
+		const rightState = rightRef.current;
+		const l = toValue(leftState);
+		const r = toValue(rightState);
+		const ltrActive = direction === "both" || direction === "ltr";
+		const rtlActive = direction === "both" || direction === "rtl";
+		if (lastLeftRef.current === neverObserved$1 && lastRightRef.current === neverObserved$1) {
+			let lastLeft = l;
+			let lastRight = r;
+			if (immediate) {
+				if (ltrActive) {
+					const newRight = transformLTR(l);
+					if (!Object.is(r, newRight)) {
+						const rightKind = classifyWritable(rightState);
+						if (rightKind !== "readonly") {
+							writeState(rightState, newRight);
+							lastRight = newRight;
+							if (rightKind === "async") pendingRightRef.current = {
+								before: r,
+								after: newRight
+							};
+						}
+					}
+					if (rtlActive) {
+						const newLeft = transformRTL(newRight);
+						if (!Object.is(l, newLeft)) {
+							const leftKind = classifyWritable(leftState);
+							if (leftKind !== "readonly") {
+								writeState(leftState, newLeft);
+								lastLeft = newLeft;
+								if (leftKind === "async") pendingLeftRef.current = {
+									before: l,
+									after: newLeft
+								};
+							}
+						}
+					}
+				} else {
+					const newLeft = transformRTL(r);
+					if (!Object.is(l, newLeft)) {
+						const leftKind = classifyWritable(leftState);
+						if (leftKind !== "readonly") {
+							writeState(leftState, newLeft);
+							lastLeft = newLeft;
+							if (leftKind === "async") pendingLeftRef.current = {
+								before: l,
+								after: newLeft
+							};
+						}
+					}
+				}
+			}
+			lastLeftRef.current = lastLeft;
+			lastRightRef.current = lastRight;
+			return;
+		}
+		const leftPending = pendingLeftRef.current;
+		const rightPending = pendingRightRef.current;
+		const leftChanged = !Object.is(lastLeftRef.current, l) && !(leftPending && Object.is(leftPending.before, l));
+		const rightChanged = !Object.is(lastRightRef.current, r) && !(rightPending && Object.is(rightPending.before, r));
+		if (leftPending && !Object.is(leftPending.before, l)) pendingLeftRef.current = null;
+		if (rightPending && !Object.is(rightPending.before, r)) pendingRightRef.current = null;
+		if (ltrActive && leftChanged) {
+			lastLeftRef.current = l;
+			const converted = transformLTR(l);
+			if (!Object.is(r, converted)) {
+				const rightKind = classifyWritable(rightState);
+				if (rightKind !== "readonly") {
+					writeState(rightState, converted);
+					lastRightRef.current = converted;
+					if (rightKind === "async") pendingRightRef.current = {
+						before: r,
+						after: converted
+					};
+				}
+			}
+		}
+		if (rtlActive && rightChanged) {
+			lastRightRef.current = r;
+			const converted = transformRTL(r);
+			if (!Object.is(l, converted)) {
+				const leftKind = classifyWritable(leftState);
+				if (leftKind !== "readonly") {
+					writeState(leftState, converted);
+					lastLeftRef.current = converted;
+					if (leftKind === "async") pendingLeftRef.current = {
+						before: l,
+						after: converted
+					};
+				}
+			}
+		}
+	});
+	return () => {
+		stoppedRef.current = true;
+	};
+}
+//#endregion
+//#region syncStates/index.tsx
+const neverObserved = Symbol("reause.syncStates.neverObserved");
+/**
+* Keep target state(s) in sync with a source value — React port of VueUse's
+* `syncRefs`.
+*
+* Map from @vueuse/shared `syncRefs`
+* (`source/vueuse/packages/shared/syncRefs/`), renamed `syncStates` for the
+* React port: the source is a `State<T>` — a plain value, getter, ref-like,
+* `[value, setter]` tuple or `{ value, onChange }` pair (upstream:
+* `WatchSource`) — resolved with `toValue`; the targets are writable
+* `State<T>` sources written back through their writable form (tuple setter /
+* `onChange` / `.current`); upstream's `flush` / `deep` / `immediate` options
+* are kept for signature compatibility.
+*
+* React Hook adaptation: upstream syncs through Vue's reactive `watch`, and
+* React has no reactive system — so `syncStates` is implemented as a hook
+* (call it unconditionally at the top of a component). Internally a
+* `useEffect` that runs after every commit compares the resolved source value
+* with the last observed one via `Object.is`; a change is written through to
+* all targets. Because the observation happens post-commit, the caller must
+* re-render (e.g. `setState`) for a new source value to reach the targets —
+* a bare mutation outside of React is never observed (see the maintainer
+* notes on reause #40 / #41). The returned `stop` function tears the
+* synchronization down; the effect also stops doing any work once the owning
+* component unmounts.
+*
+* @example
+* function Form() {
+*   const [source, setSource] = useState('hello')
+*   const [target, setTarget] = useState('target')
+*
+*   const stop = syncStates(source, [target, setTarget])
+*
+*   // during the first render `target` is still 'target' — the sync effect
+*   // runs after the commit, so the source reaches the target only once the
+*   // component has mounted (target === 'hello' afterwards).
+*   // Calling `setSource('foo')` re-renders and the effect then copies 'foo'
+*   // into the target state on the following commit.
+*
+*   stop()
+* }
+*/
+function syncStates(source, targets, options = {}) {
+	const { immediate = true } = options;
+	const sourceRef = useRef(source);
+	sourceRef.current = source;
+	const isTupleTarget = Array.isArray(targets) && targets.length === 2 && typeof targets[1] === "function";
+	const targetsArray = Array.isArray(targets) && !isTupleTarget ? targets : [targets];
+	const targetsRef = useRef(targetsArray);
+	targetsRef.current = targetsArray;
+	const lastValueRef = useRef(neverObserved);
+	const stoppedRef = useRef(false);
+	useEffect(() => {
+		if (stoppedRef.current) return;
+		const value = toValue(sourceRef.current);
+		const last = lastValueRef.current;
+		lastValueRef.current = value;
+		if (last === neverObserved) {
+			if (!immediate) return;
+		} else if (Object.is(last, value)) return;
+		targetsRef.current.forEach((target) => {
+			if (!Object.is(toValue(target), value)) writeState(target, value);
+		});
+	});
+	return useCallback(() => {
+		stoppedRef.current = true;
+	}, []);
+}
+//#endregion
+//#region until/index.tsx
+/**
+* Polling interval (ms) used to resolve `until` promises. React has no
+* reactive watch, so the port re-reads the source at this fixed interval —
+* the same polling approach `useFetch` uses for its `refetch` watch.
+*/
+const UNTIL_POLL_INTERVAL = 50;
+/**
+* Minimal structural equality — `Object.is` for primitives (so `NaN` equals
+* `NaN`), arrays compared by length and element, plain objects by own-key
+* count and value. Used by `changedTimes` when `deep: true`.
+*/
+function deepEquals(a, b) {
+	if (Object.is(a, b)) return true;
+	if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) return false;
+	const aIsArray = Array.isArray(a);
+	const bIsArray = Array.isArray(b);
+	if (aIsArray !== bIsArray) return false;
+	if (aIsArray && bIsArray) {
+		const arrA = a;
+		const arrB = b;
+		if (arrA.length !== arrB.length) return false;
+		return arrA.every((item, index) => deepEquals(item, arrB[index]));
+	}
+	const keysA = Object.keys(a);
+	const keysB = Object.keys(b);
+	if (keysA.length !== keysB.length) return false;
+	return keysA.every((key) => deepEquals(a[key], b[key]));
+}
+/**
+* Clone used to snapshot the source between polls when `changedTimes` runs
+* with `deep: true` — the poller re-reads the same reference, so a reference
+* copy could never see an in-place mutation.
+*/
+function cloneDeep(value) {
+	if (value === null || typeof value !== "object") return value;
+	if (Array.isArray(value)) return value.map((item) => cloneDeep(item));
+	const result = {};
+	for (const key of Object.keys(value)) result[key] = cloneDeep(value[key]);
+	return result;
+}
+/**
+* Resolve the accepted `until` source — a plain value or a zero-argument
+* getter (the React-idiomatic live source; a `Ref` / `{ current }` object is
+* not accepted — pass `() => ref.current`).
+*
+* NOTE: a source value that *is* a function is treated as a getter and
+* invoked (the same ambiguity `toValue` has).
+*/
+function resolveSource(source) {
+	return typeof source === "function" ? source() : source;
+}
+function createUntil(r, isNot = false) {
+	function toMatch(condition, { timeout, throwOnTimeout } = {}) {
+		let stop = null;
+		const promises = [new Promise((resolve) => {
+			let settled = false;
+			const check = () => {
+				if (settled) return;
+				const value = resolveSource(r);
+				if (condition(value) !== isNot) {
+					settled = true;
+					stop === null || stop === void 0 || stop();
+					resolve(value);
+				}
+			};
+			check();
+			if (!settled) {
+				const timer = setInterval(check, UNTIL_POLL_INTERVAL);
+				stop = () => clearInterval(timer);
+			}
+		})];
+		if (timeout != null) promises.push(promiseTimeout(timeout, throwOnTimeout).then(() => resolveSource(r)).finally(() => stop === null || stop === void 0 ? void 0 : stop()));
+		return Promise.race(promises);
+	}
+	function toBe(value, options) {
+		return toMatch((v) => v === value, options);
+	}
+	function toBeTruthy(options) {
+		return toMatch((v) => Boolean(v), options);
+	}
+	function toBeNull(options) {
+		return toBe(null, options);
+	}
+	function toBeUndefined(options) {
+		return toBe(void 0, options);
+	}
+	function toBeNaN(options) {
+		return toMatch(Number.isNaN, options);
+	}
+	function toContains(value, options) {
+		return toMatch((v) => {
+			return Array.from(v).includes(value);
+		}, options);
+	}
+	function changed(options) {
+		return changedTimes(1, options);
+	}
+	function changedTimes(n = 1, options) {
+		var _options$deep;
+		let count = 0;
+		let hasBaseline = false;
+		let lastValue;
+		const deep = (_options$deep = options === null || options === void 0 ? void 0 : options.deep) !== null && _options$deep !== void 0 ? _options$deep : false;
+		const snapshot = (value) => deep ? cloneDeep(value) : value;
+		return toMatch((v) => {
+			if (!hasBaseline) {
+				hasBaseline = true;
+				lastValue = snapshot(v);
+				return count >= n;
+			}
+			if (deep ? !deepEquals(lastValue, v) : !Object.is(lastValue, v)) {
+				count += 1;
+				lastValue = snapshot(v);
+			}
+			return count >= n;
+		}, options);
+	}
+	if (Array.isArray(resolveSource(r))) return {
+		toMatch,
+		toContains,
+		changed,
+		changedTimes,
+		get not() {
+			return createUntil(r, !isNot);
+		}
+	};
+	else return {
+		toMatch,
+		toBe,
+		toBeTruthy,
+		toBeNull,
+		toBeNaN,
+		toBeUndefined,
+		changed,
+		changedTimes,
+		get not() {
+			return createUntil(r, !isNot);
+		}
+	};
+}
+function until(r) {
+	return createUntil(r);
+}
+//#endregion
+//#region useArrayDifference/index.tsx
+function defaultComparator(value, othVal) {
+	return value === othVal;
+}
+/**
+* React port of VueUse's `useArrayDifference`.
+*
+* Map from @vueuse/shared `useArrayDifference`
+* Mapping: upstream wraps the diff passes in `computed(...)` and returns a
+* `ComputedRef`; React has no reactive value tracking, so this is a plain
+* function recomputed on every render over the plain `list` / `values` arrays
+* the caller passes — pass state arrays and the difference is re-diffed on the
+* next render, no `.value` on the result. The same three call shapes as
+* upstream are supported: plain diff, diff by `key`, and diff by `compareFn`,
+* plus the `{ symmetric }` option.
+*
+* @see https://vueuse.org/shared/useArrayDifference/
+*
+* @example
+* const list = [{ id: 1 }, { id: 2 }, { id: 3 }]
+* useArrayDifference(list, [{ id: 3 }]) // [{ id: 1 }, { id: 2 }]
+* useArrayDifference(list, [{ id: 3 }], 'id') // diff by key
+* useArrayDifference(list, [{ id: 3 }], (a, b) => a.id === b.id, { symmetric: true })
+*/
+function useArrayDifference(...args) {
+	var _args$, _args$2;
+	const list = args[0];
+	const values = args[1];
+	let compareFn = (_args$ = args[2]) !== null && _args$ !== void 0 ? _args$ : defaultComparator;
+	const { symmetric = false } = (_args$2 = args[3]) !== null && _args$2 !== void 0 ? _args$2 : {};
+	if (typeof compareFn === "string") {
+		const key = compareFn;
+		compareFn = (value, othVal) => value[key] === othVal[key];
+	}
+	const diff1 = list.filter((x) => values.findIndex((y) => compareFn(x, y)) === -1);
+	if (symmetric) {
+		const diff2 = values.filter((x) => list.findIndex((y) => compareFn(x, y)) === -1);
+		return [...diff1, ...diff2];
+	} else return diff1;
+}
+//#endregion
+//#region useArrayEvery/index.tsx
+/**
+* React port of VueUse's `useArrayEvery`.
+*
+* Map from @vueuse/shared `useArrayEvery`
+* Mapping: upstream wraps `toValue(list).every(...)` in `computed(() => ...)`
+* and returns a `ComputedRef`; React has no reactive value tracking, so this
+* is a plain function recomputed on every render over the plain `list` array
+* the caller passes. Hold the array in `useState` (or any render-scoped value)
+* and pass a new array to observe a change — the result recomputes on the next
+* render. The predicate may return any value (coerced by truthiness, like
+* `Array.prototype.every`).
+*
+* @see https://vueuse.org/shared/useArrayEvery/
+*
+* @example
+* const [list, setList] = useState([0, 2, 4])
+* useArrayEvery(list, val => val % 2 === 0) // true
+* setList([0, 2, 5]) // false on the next render
+*
+* @param list - the array was called upon.
+* @param fn - a function to test each element.
+*
+* @returns **true** if the `fn` function returns a **truthy** value for every element from the array. Otherwise, **false**.
+*/
+function useArrayEvery(list, fn) {
+	return list.every(fn);
+}
+//#endregion
+//#region useArrayFilter/index.tsx
+function useArrayFilter(list, fn) {
+	return list.filter(fn);
+}
+//#endregion
+//#region useArrayFind/index.tsx
+/**
+* React port of VueUse's `useArrayFind`.
+*
+* Map from @vueuse/shared `useArrayFind`
+* Mapping: upstream wraps `toValue(list).find(...)` in `computed(() => ...)`
+* and returns a `ComputedRef`; React has no reactive value tracking, so this
+* is a plain function recomputed on every render over the plain `list` array
+* the caller passes. Hold the array in `useState` and pass a new array to
+* observe a change — the first match is returned on the next render.
+*
+* @see https://vueuse.org/shared/useArrayFind/
+*
+* @example
+* const [list, setList] = useState([1, -1, 2])
+* useArrayFind(list, val => val > 0) // 1
+* setList([3, -1, 2]) // 3 on the next render
+*/
+function useArrayFind(list, fn) {
+	return list.find(fn);
+}
+//#endregion
+//#region useArrayFindIndex/index.tsx
+/**
+* React port of VueUse's `useArrayFindIndex`.
+*
+* Map from @vueuse/shared `useArrayFindIndex`
+* Mapping: upstream wraps `toValue(list).findIndex(...)` in `computed(...)`
+* and accepts a `RefOrValue`; React has no reactive value tracking, so
+* this is a plain function that recomputes the index on every render — pass
+* a state array (upstream: reactive array) and re-render with new state to
+* see the updated result. The return is a plain number, no `.value`.
+*
+* @example
+* const [list, setList] = useState([0, 2, 4, 6, 8])
+* useArrayFindIndex(list, i => i % 2 === 0) // 0
+*
+* setList([1, 3, 5, 7, 9]) // result === -1 on the next render
+*
+* @param list - the array was called upon.
+* @param fn - a function to test each element.
+*
+* @returns the index of the first element in the array that passes the test. Otherwise, "-1".
+*/
+function useArrayFindIndex(list, fn) {
+	return list.findIndex(fn);
+}
+//#endregion
+//#region useArrayFindLast/index.tsx
+/**
+* Loop equivalent of `Array.prototype.findLast` — upstream ships the same
+* fallback for runtimes without the native method (e.g. node < 18); the repo
+* targets lib ES2022, where the native method is not available.
+*/
+function findLast(array, fn) {
+	for (let index = array.length - 1; index >= 0; index--) if (fn(array[index], index, array)) return array[index];
+}
+/**
+* React port of VueUse's `useArrayFindLast`.
+*
+* Map from @vueuse/shared `useArrayFindLast`
+* Mapping: upstream wraps native `Array.prototype.findLast` (with a loop
+* fallback for runtimes without it) in `computed(() => ...)` and returns a
+* `ComputedRef`; React has no reactive value tracking, so this is a plain
+* function recomputed on every render over the plain `list` array the caller
+* passes — the loop helper stands in for the native method since the repo
+* targets lib ES2022. Hold the array in `useState` and pass a new array to
+* observe a change — the last match is returned on the next render.
+*
+* @see https://vueuse.org/shared/useArrayFindLast/
+*
+* @example
+* const [list, setList] = useState([1, -1, 2])
+* useArrayFindLast(list, val => val > 0) // 2
+* setList([1, -1, -2]) // 1 on the next render
+*/
+function useArrayFindLast(list, fn) {
+	return findLast(list, fn);
+}
+//#endregion
+//#region useArrayIncludes/index.tsx
+const toString = Object.prototype.toString;
+function isObject$1(val) {
+	return toString.call(val) === "[object Object]";
+}
+function containsProp(obj, ...props) {
+	return props.some((k) => k in obj);
+}
+function isArrayIncludesOptions(obj) {
+	return isObject$1(obj) && containsProp(obj, "formIndex", "comparator");
+}
+function useArrayIncludes(...args) {
+	var _comparator;
+	const list = args[0];
+	const value = args[1];
+	let comparator = args[2];
+	let formIndex = 0;
+	if (isArrayIncludesOptions(comparator)) {
+		var _comparator$fromIndex;
+		formIndex = (_comparator$fromIndex = comparator.fromIndex) !== null && _comparator$fromIndex !== void 0 ? _comparator$fromIndex : 0;
+		comparator = comparator.comparator;
+	}
+	if (typeof comparator === "string") {
+		const key = comparator;
+		comparator = (element, value) => element[key] === value;
+	}
+	comparator = (_comparator = comparator) !== null && _comparator !== void 0 ? _comparator : ((element, value) => element === value);
+	return list.slice(formIndex).some((element, index, arr) => comparator(element, value, index, arr));
+}
+//#endregion
+//#region useArrayJoin/index.tsx
+/**
+* React port of VueUse's `useArrayJoin`.
+*
+* Map from @vueuse/shared `useArrayJoin`
+* Mapping: upstream wraps `toValue(list).map(i => toValue(i)).join(toValue(separator))`
+* in `computed(...)` and accepts a `RefOrValue`; React has no reactive
+* value tracking, so this is a plain function that recomputes the join on
+* every render — pass a state array (upstream: reactive array) and re-render
+* with new state to see the updated result. The return is a plain string,
+* no `.value`.
+*
+* `list` holds plain values only: the elements are joined with
+* `Array.prototype.join`, so no per-element unwrap happens (upstream
+* `toValue`s each element). A function element would be stringified to its
+* source instead of invoked.
+*
+* @example
+* const [list, setList] = useState(['foo', 0, { prop: 'val' }])
+* useArrayJoin(list) // 'foo,0,[object Object]'
+* useArrayJoin(list, '--') // 'foo--0--[object Object]'
+*
+* setList([...list, 'bar']) // result === 'foo--0--[object Object]--bar' on the next render
+*
+* @param list - the array was called upon.
+* @param separator - a string to separate each pair of adjacent elements of the array. If omitted, the array elements are separated with a comma (",").
+*
+* @returns a string with all array elements joined. If `list.length` is 0, the empty string is returned.
+*/
+function useArrayJoin(list, separator) {
+	return list.join(separator);
+}
+//#endregion
+//#region useArrayMap/index.tsx
+/**
+* Reactive `Array.map`
+*
+* Map from @vueuse/shared `useArrayMap`
+* React port of VueUse's `useArrayMap`.
+*
+* Mapping: Vue's `computed` → recompute per render and return a plain array
+* (no `.value`) over the plain `list` array the caller passes.
+* Pass a `useState` array directly — the result updates on the next render.
+*
+* @example
+* const [list, setList] = useState([0, 1, 2, 3, 4])
+* const result = useArrayMap(list, i => i * 2) // [0, 2, 4, 6, 8]
+* setList(list.slice(0, -1)) // result: [0, 2, 4, 6] on the next render
+*/
+function useArrayMap(list, fn) {
+	return list.map(fn);
+}
+//#endregion
+//#region useArrayReduce/index.tsx
+function useArrayReduce(list, reducer, ...args) {
+	const reduceCallback = (sum, value, index) => reducer(sum, value, index);
+	const initial = typeof args[0] === "function" ? args[0]() : args[0];
+	return args.length ? list.reduce(reduceCallback, initial) : list.reduce(reduceCallback);
+}
+//#endregion
+//#region useArraySome/index.tsx
+/**
+* React port of VueUse's `useArraySome`.
+*
+* Map from @vueuse/shared `useArraySome`
+* Mapping: `computed(() => ...)` → recompute on every render — the result is a
+* plain `boolean` (no `.value`, no caching) computed from the plain `list`
+* array the caller passes. Hold the array in `useState` and pass a new array
+* to observe a change; the result recomputes on the next render.
+*
+* @see https://vueuse.org/shared/useArraySome/
+* @param list - the array was called upon.
+* @param fn - a function to test each element.
+*
+* @returns **true** if the `fn` function returns a **truthy** value for any element from the array. Otherwise, **false**.
+*
+* @example
+* const [list, setList] = useState([0, 2, 4, 6, 8])
+* const result = useArraySome(list, i => i > 10) // false
+* setList([...list, 11]) // result === true on the next render
+*/
+function useArraySome(list, fn) {
+	return list.some(fn);
+}
+//#endregion
+//#region useArrayUnique/index.tsx
+/**
+* Reactive `Array.unique`
+*
+* Map from @vueuse/shared `useArrayUnique`
+* React port of VueUse's `useArrayUnique`.
+*
+* Mapping: upstream wraps `toValue(list)` in `computed(() => ...)` and returns
+* a `ComputedRef`; React has no reactive value tracking, so this is a plain
+* function recomputed on every render over the plain `list` array the caller
+* passes — the result is a deduped plain array (no `.value`, no caching).
+* Duplicate detection uses a `Set` of the values (reference identity for
+* objects) unless a custom `compareFn` is given — same as upstream. Hold the
+* array in `useState` and pass a new array to observe a change.
+*
+* @see https://vueuse.org/shared/useArrayUnique/
+*
+* @example
+* const [list, setList] = useState([0, 2, 2, 4, 4, 4])
+* const result = useArrayUnique(list) // [0, 2, 4]
+*
+* setList([0, 2, 4, 6, 6]) // result === [0, 2, 4, 6] on the next render
+*/
+function useArrayUnique(list, compareFn) {
+	return compareFn ? uniqueElementsBy(list, compareFn) : uniq(list);
+}
+function uniq(array) {
+	return Array.from(new Set(array));
+}
+function uniqueElementsBy(array, fn) {
+	return array.reduce((acc, v) => {
+		if (!acc.some((x) => fn(v, x, array))) acc.push(v);
+		return acc;
+	}, []);
+}
+//#endregion
+//#region useControllableState/index.tsx
+function isTuple(state) {
+	return Array.isArray(state) && state.length === 2 && typeof state[1] === "function";
+}
+function isObjectState$1(state) {
+	return typeof state === "object" && state !== null && !Array.isArray(state) && "value" in state;
+}
+/**
+* Combine controlled and uncontrolled state sources.
+*
+* `state` is resolved with `toValue` on every render. A tuple
+* `[value, setter]` or a `{ value, onChange }` pair is always controlled: the
+* current value is the resolved source and `setValue` writes through to the
+* tuple setter / `onChange`. With `passive: true` a plain value, getter, or
+* ref source is uncontrolled — the hook initializes from the source and local
+* updates persist, and external source changes are synced back (honoring
+* `shouldUpdate`). With the default `passive: false` such a source is
+* controlled (the external value wins on every render); `setValue` then has
+* no channel back to the caller, so it warns instead of silently discarding
+* the update — pass a tuple, a `{ value, onChange }` pair, or use
+* `passive: true` to write. `defaultValue` (value or lazy initializer) seeds
+* the internal state of uncontrolled sources; `shouldUpdate(prev, next)`
+* guards every commit, including the passive sync.
+*/
+function useControllableState(state, options = {}) {
+	const { defaultValue, shouldUpdate = (prev, next) => !Object.is(prev, next), passive = false } = options;
+	const controlled = isTuple(state) || isObjectState$1(state) || !passive;
+	const externalValue = toValue(state);
+	const initial = defaultValue === void 0 ? externalValue : typeof defaultValue === "function" ? defaultValue() : defaultValue;
+	const [internal, setInternal] = useState(initial);
+	const value = controlled ? externalValue : internal;
+	const valueRef = useRef(value);
+	const previousExternalRef = useRef(externalValue);
+	valueRef.current = value;
+	const stateRef = useRef(state);
+	stateRef.current = state;
+	useEffect(() => {
+		const canSync = typeof state === "function" || isRefLike(state) || externalValue === null || typeof externalValue !== "object";
+		if (passive && canSync && !isTuple(state) && !isObjectState$1(state) && !Object.is(previousExternalRef.current, externalValue) && shouldUpdate(valueRef.current, externalValue)) setInternal(externalValue);
+		previousExternalRef.current = externalValue;
+	}, [
+		externalValue,
+		passive,
+		shouldUpdate
+	]);
+	return [value, useCallback((action) => {
+		var _currentState$onChang;
+		const prev = valueRef.current;
+		const next = typeof action === "function" ? action(prev) : action;
+		if (!shouldUpdate(prev, next)) return;
+		const currentState = stateRef.current;
+		if (isTuple(currentState)) currentState[1](next);
+		else if (isObjectState$1(currentState)) (_currentState$onChang = currentState.onChange) === null || _currentState$onChang === void 0 || _currentState$onChang.call(currentState, next);
+		else if (!controlled) setInternal(next);
+		else assert(false, "useControllableState: `setValue` on a controlled source without a write channel (a plain value, getter, or ref with `passive: false`) is ignored. Pass a [value, setter] tuple, a { value, onChange } pair, or use `passive: true`.");
+	}, [controlled, shouldUpdate])];
+}
+//#endregion
+//#region useCounter/index.tsx
+/**
+* React port of VueUse's `useCounter`.
+*
+* Map from @vueuse/shared `useCounter`
+* Mapping: `ref(initialValue)` → `useState`, mutation functions become
+* stable `useCallback`s; options are kept in refs so callbacks stay stable.
+*
+* @example
+* const { count, inc, dec, set, reset } = useCounter(10, { min: 0, max: 100 })
+*/
+function useCounter(initialValue = 0, options = {}) {
+	const { min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFINITY } = options;
+	const minRef = useRef(min);
+	const maxRef = useRef(max);
+	const initialRef = useRef(toValue(initialValue));
+	const [count, setCount] = useControllableState(initialValue, { passive: true });
+	const set = useCallback((value) => {
+		setCount((current) => {
+			const next = clamp(value, minRef.current, maxRef.current);
+			return current === next ? current : next;
+		});
+	}, []);
+	const get = useCallback(() => count, [count]);
+	return {
+		count,
+		inc: useCallback((delta = 1) => {
+			setCount((current) => {
+				const next = clamp(current + delta, minRef.current, maxRef.current);
+				return current === next ? current : next;
+			});
+		}, []),
+		dec: useCallback((delta = 1) => {
+			setCount((current) => {
+				const next = clamp(current - delta, minRef.current, maxRef.current);
+				return current === next ? current : next;
+			});
+		}, []),
+		get,
+		set,
+		reset: useCallback((val) => {
+			const target = val === void 0 ? initialRef.current : val;
+			initialRef.current = target;
+			const next = clamp(target, minRef.current, maxRef.current);
+			setCount((current) => current === next ? current : next);
+			return next;
+		}, [])
+	};
+}
+//#endregion
+//#region useDateFormat/index.tsx
+const REGEX_PARSE = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[T\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/i;
+const REGEX_FORMAT = /[YMDHhms]o|\[([^\]]+)\]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a{1,2}|A{1,2}|m{1,2}|s{1,2}|Z{1,2}|z{1,4}|SSS/g;
+function defaultMeridiem(hours, minutes, isLowercase, hasPeriod) {
+	let m = hours < 12 ? "AM" : "PM";
+	if (hasPeriod) m = m.split("").reduce((acc, curr) => acc += `${curr}.`, "");
+	return isLowercase ? m.toLowerCase() : m;
+}
+function formatOrdinal(num) {
+	const suffixes = [
+		"th",
+		"st",
+		"nd",
+		"rd"
+	];
+	const v = num % 100;
+	return num + (suffixes[(v - 20) % 10] || suffixes[v] || suffixes[0]);
+}
+/**
+* Unwrap the house input convention — a plain value, a ref-like `{ current }`
+* or a getter function (house replacement for Vue's `toValue` /
+* `RefOrValue<T>`).
+*/
+function formatDate(date, formatStr, options = {}) {
+	var _options$customMeridi;
+	const years = date.getFullYear();
+	const month = date.getMonth();
+	const days = date.getDate();
+	const hours = date.getHours();
+	const minutes = date.getMinutes();
+	const seconds = date.getSeconds();
+	const milliseconds = date.getMilliseconds();
+	const day = date.getDay();
+	const meridiem = (_options$customMeridi = options.customMeridiem) !== null && _options$customMeridi !== void 0 ? _options$customMeridi : defaultMeridiem;
+	const stripTimeZone = (dateString) => {
+		var _dateString$split$;
+		return (_dateString$split$ = dateString.split(" ")[1]) !== null && _dateString$split$ !== void 0 ? _dateString$split$ : "";
+	};
+	const matches = {
+		Yo: () => formatOrdinal(years),
+		YY: () => String(years).slice(-2),
+		YYYY: () => years,
+		M: () => month + 1,
+		Mo: () => formatOrdinal(month + 1),
+		MM: () => `${month + 1}`.padStart(2, "0"),
+		MMM: () => date.toLocaleDateString(options.locales, { month: "short" }),
+		MMMM: () => date.toLocaleDateString(options.locales, { month: "long" }),
+		D: () => String(days),
+		Do: () => formatOrdinal(days),
+		DD: () => `${days}`.padStart(2, "0"),
+		H: () => String(hours),
+		Ho: () => formatOrdinal(hours),
+		HH: () => `${hours}`.padStart(2, "0"),
+		h: () => `${hours % 12 || 12}`.padStart(1, "0"),
+		ho: () => formatOrdinal(hours % 12 || 12),
+		hh: () => `${hours % 12 || 12}`.padStart(2, "0"),
+		m: () => String(minutes),
+		mo: () => formatOrdinal(minutes),
+		mm: () => `${minutes}`.padStart(2, "0"),
+		s: () => String(seconds),
+		so: () => formatOrdinal(seconds),
+		ss: () => `${seconds}`.padStart(2, "0"),
+		SSS: () => `${milliseconds}`.padStart(3, "0"),
+		d: () => day,
+		dd: () => date.toLocaleDateString(options.locales, { weekday: "narrow" }),
+		ddd: () => date.toLocaleDateString(options.locales, { weekday: "short" }),
+		dddd: () => date.toLocaleDateString(options.locales, { weekday: "long" }),
+		A: () => meridiem(hours, minutes),
+		AA: () => meridiem(hours, minutes, false, true),
+		a: () => meridiem(hours, minutes, true),
+		aa: () => meridiem(hours, minutes, true, true),
+		z: () => stripTimeZone(date.toLocaleDateString(options.locales, { timeZoneName: "shortOffset" })),
+		zz: () => stripTimeZone(date.toLocaleDateString(options.locales, { timeZoneName: "shortOffset" })),
+		zzz: () => stripTimeZone(date.toLocaleDateString(options.locales, { timeZoneName: "shortOffset" })),
+		zzzz: () => stripTimeZone(date.toLocaleDateString(options.locales, { timeZoneName: "longOffset" }))
+	};
+	return formatStr.replace(REGEX_FORMAT, (match, $1) => {
+		var _ref, _matches$match;
+		return (_ref = $1 !== null && $1 !== void 0 ? $1 : (_matches$match = matches[match]) === null || _matches$match === void 0 ? void 0 : _matches$match.call(matches)) !== null && _ref !== void 0 ? _ref : match;
+	});
+}
+function normalizeDate(date) {
+	if (date === null) return /* @__PURE__ */ new Date(NaN);
+	if (date === void 0) return /* @__PURE__ */ new Date();
+	if (date instanceof Date) return new Date(date);
+	if (typeof date === "string" && !/Z$/i.test(date)) {
+		const d = date.match(REGEX_PARSE);
+		if (d) {
+			const m = Number(d[2]) - 1 || 0;
+			const ms = Number((d[7] || "0").substring(0, 3));
+			return new Date(Number(d[1]), m, Number(d[3]) || 1, Number(d[4]) || 0, Number(d[5]) || 0, Number(d[6]) || 0, ms);
+		}
+	}
+	return new Date(date);
+}
+/**
+* Get the formatted date according to the string of tokens passed in.
+*
+* Map from @vueuse/shared `useDateFormat`.
+*
+* React divergence: upstream wraps the result in a Vue `computed` and returns
+* `ComputedRef<string>` — this port returns a PLAIN STRING. Call it during
+* render and pass plain values (e.g. your `useState` date); the string is
+* recomputed on every render with fresh inputs. Do not read `.value` from it.
+*
+* Inputs (`date`, `formatStr`, `options.locales`) are plain read-only values
+* — pass `ref.current` or the state value; a `MaybeRefOrGetter` source must be
+* resolved by the caller (upstream types them `MaybeRefOrGetter`).
+*
+* Supported tokens (mirroring upstream 1:1, default format `HH:mm:ss`):
+* `Yo YY YYYY` — year · `M Mo MM MMM MMMM` — month (locale-aware short/long
+* names via `Intl`) · `D Do DD` — day of month · `H Ho HH` — 24-hour clock ·
+* `h ho hh` — 12-hour clock · `m mo mm` — minutes · `s so ss` — seconds ·
+* `SSS` — milliseconds (3 digits) · `d dd ddd dddd` — weekday (locale-aware
+* via `Intl`) · `A AA a aa` — meridiem, customizable via
+* `options.customMeridiem` · `z zz zzz zzzz` — timezone offset names
+* (`shortOffset` / `longOffset` via `toLocaleString`). Text wrapped in
+* brackets (`[...]`) is output literally as an escape sequence.
+*
+* @see https://vueuse.org/useDateFormat
+* @param date - The date to format, can either be a `Date` object, a timestamp, or a string
+* @param formatStr - The combination of tokens to format the date
+* @param options - UseDateFormatOptions
+*
+* @__NO_SIDE_EFFECTS__
+*/
+function useDateFormat(date, formatStr = "HH:mm:ss", options = {}) {
+	return formatDate(normalizeDate(date), formatStr, options);
+}
+//#endregion
+//#region useDebounceFn/index.tsx
+/**
+* Debounce execution of a function — React port of VueUse's `useDebounceFn`.
+*
+* Map from @vueuse/shared `useDebounceFn`
+* Mapping: upstream builds `createFilterWrapper(debounceFilter(ms, options), fn)`
+* so every call returns a promise and the wrapper carries `cancel` / `flush` /
+* `isPending`. This port builds the same wrapper once (`useMemo`) so its
+* identity is stable across renders; the latest `fn` / `ms` / `options` are
+* mirrored into refs so every call sees fresh values. `ms` accepts a number or
+* a ref-like `{ current }` (upstream: `RefOrValue<number>`) and is re-read on
+* every call. `isPending` becomes a non-reactive getter (React has no reactive
+* refs); promise settlement mirrors upstream — a regular debounce resolves
+* with the result, a superseded/canceled call settles with `undefined` (or
+* rejects with `rejectOnCancel`), and the `maxWait` trailing edge runs the
+* latest invocation but settles the pending promise without its result.
+* Pending timers are cleared when the component unmounts (upstream leaves
+* disposal to the effect scope).
+*
+* @example
+* const debouncedFn = useDebounceFn(() => { ... }, 1000)
+* debouncedFn()
+* debouncedFn.cancel()
+* debouncedFn.flush()
+*/
+function useDebounceFn(fn, ms = 200, options = {}) {
+	const fnRef = useRef(fn);
+	fnRef.current = fn;
+	const msRef = useRef(ms);
+	msRef.current = ms;
+	const optionsRef = useRef(options);
+	optionsRef.current = options;
+	const timerRef = useRef(null);
+	const maxTimerRef = useRef(null);
+	const pendingRef = useRef(false);
+	const onCancelRef = useRef(noop);
+	const onFlushRef = useRef(noop);
+	const lastInvokeRef = useRef(noop);
+	const debounced = useMemo(() => {
+		const clearTimers = () => {
+			if (timerRef.current !== null) {
+				clearTimeout(timerRef.current);
+				timerRef.current = null;
+			}
+			if (maxTimerRef.current !== null) {
+				clearTimeout(maxTimerRef.current);
+				maxTimerRef.current = null;
+			}
+		};
+		const settleCurrent = (settleRef) => {
+			const callback = settleRef.current;
+			onCancelRef.current = noop;
+			onFlushRef.current = noop;
+			pendingRef.current = false;
+			callback();
+		};
+		const handler = (invoke) => {
+			const duration = toValue(msRef.current);
+			const maxDuration = toValue(optionsRef.current.maxWait);
+			if (timerRef.current !== null) {
+				clearTimeout(timerRef.current);
+				timerRef.current = null;
+				settleCurrent(onCancelRef);
+			}
+			if (duration === void 0 || duration <= 0 || maxDuration !== void 0 && maxDuration <= 0) {
+				clearTimers();
+				pendingRef.current = false;
+				try {
+					return Promise.resolve(invoke());
+				} catch (error) {
+					return Promise.reject(error);
+				}
+			}
+			pendingRef.current = true;
+			return new Promise((resolve, reject) => {
+				onCancelRef.current = optionsRef.current.rejectOnCancel ? reject : () => resolve(void 0);
+				onFlushRef.current = () => resolve(invoke());
+				lastInvokeRef.current = invoke;
+				if (maxDuration !== void 0 && maxTimerRef.current === null) maxTimerRef.current = setTimeout(() => {
+					maxTimerRef.current = null;
+					if (timerRef.current !== null) {
+						clearTimeout(timerRef.current);
+						timerRef.current = null;
+					}
+					const invoke = lastInvokeRef.current;
+					settleCurrent(onCancelRef);
+					invoke();
+				}, maxDuration);
+				timerRef.current = setTimeout(() => {
+					timerRef.current = null;
+					if (maxTimerRef.current !== null) {
+						clearTimeout(maxTimerRef.current);
+						maxTimerRef.current = null;
+					}
+					settleCurrent(onFlushRef);
+				}, duration);
+			});
+		};
+		const cancel = () => {
+			clearTimers();
+			settleCurrent(onCancelRef);
+		};
+		const flush = () => {
+			if (!pendingRef.current) return;
+			clearTimers();
+			settleCurrent(onFlushRef);
+		};
+		const wrapped = ((...args) => {
+			return handler(() => fnRef.current(...args));
+		});
+		wrapped.cancel = cancel;
+		wrapped.flush = flush;
+		Object.defineProperty(wrapped, "isPending", {
+			enumerable: true,
+			get: () => pendingRef.current
+		});
+		return wrapped;
+	}, []);
+	useEffect(() => debounced.cancel, [debounced]);
+	return debounced;
+}
+//#endregion
+//#region useInterval/index.tsx
+function useInterval(interval = 1e3, options = {}) {
+	const { controls: exposeControls = false, immediate = true, callback, immediateCallback = false } = options;
+	const intervalRef = useRef(interval);
+	intervalRef.current = interval;
+	const callbackRef = useRef(callback);
+	callbackRef.current = callback;
+	const immediateCallbackRef = useRef(immediateCallback);
+	immediateCallbackRef.current = immediateCallback;
+	const [counter, setCounter] = useState(0);
+	const counterRef = useRef(0);
+	const [isActive, setIsActive] = useState(() => immediate && toValue(interval) > 0);
+	const isActiveRef = useRef(false);
+	const timerRef = useRef(null);
+	const tick = useCallback(() => {
+		var _callbackRef$current;
+		counterRef.current += 1;
+		setCounter(counterRef.current);
+		(_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 || _callbackRef$current.call(callbackRef, counterRef.current);
+	}, []);
+	const reset = useCallback(() => {
+		counterRef.current = 0;
+		setCounter(0);
+	}, []);
+	const pause = useCallback(() => {
+		isActiveRef.current = false;
+		setIsActive(false);
+		if (timerRef.current !== null) {
+			clearInterval(timerRef.current);
+			timerRef.current = null;
+		}
+	}, []);
+	const resume = useCallback(() => {
+		const ms = toValue(intervalRef.current);
+		if (ms <= 0) return;
+		isActiveRef.current = true;
+		setIsActive(true);
+		if (immediateCallbackRef.current) tick();
+		if (timerRef.current !== null) {
+			clearInterval(timerRef.current);
+			timerRef.current = null;
+		}
+		timerRef.current = setInterval(tick, ms);
+	}, [tick]);
+	const startedRef = useRef(false);
+	useEffect(() => {
+		if (immediate && !startedRef.current) {
+			startedRef.current = true;
+			resume();
+		}
+		return pause;
+	}, [immediate, resume]);
+	const mountedRef = useRef(false);
+	const intervalMs = toValue(interval);
+	useEffect(() => {
+		if (!mountedRef.current) {
+			mountedRef.current = true;
+			return;
+		}
+		if (isActiveRef.current) resume();
+	}, [intervalMs, resume]);
+	if (exposeControls) return {
+		counter,
+		reset,
+		isActive,
+		pause,
+		resume
+	};
+	return counter;
+}
+//#endregion
+//#region useIntervalFn/index.tsx
+/**
+* React port of VueUse's `useIntervalFn` — wrapper for `setInterval` with
+* controls.
+*
+* Map from @vueuse/shared `useIntervalFn`
+* Mapping: upstream accepts `RefOrValue<number>` for the interval — this
+* port accepts a plain `number`. `isActive` is a boolean state (upstream: a
+* readonly shallow ref), also mirrored in a ref so `resume()` can check it
+* synchronously right after `immediateCallback` fires the callback — the
+* callback may `pause()` itself ("pause in callback"). The timer is scheduled
+* in a mount effect (upstream starts synchronously during setup) and cleared
+* on unmount via effect cleanup; changing the interval while active restarts
+* the timer (upstream: a `watch` on the interval calls `resume()`). The
+* callback, interval and options are kept in refs so every tick and restart
+* uses the newest ones.
+*
+* @example
+* const { isActive, pause, resume } = useIntervalFn(() => { ... }, 1000)
+*/
+function useIntervalFn(cb, interval = 1e3, options = {}) {
+	const { immediate = true, immediateCallback = false } = options;
+	const [isActive, setIsActive] = useState(false);
+	const isActiveRef = useRef(false);
+	const cbRef = useRef(cb);
+	const intervalRef = useRef(interval);
+	const immediateCallbackRef = useRef(immediateCallback);
+	const timerRef = useRef(null);
+	cbRef.current = cb;
+	intervalRef.current = interval;
+	immediateCallbackRef.current = immediateCallback;
+	const immediateRef = useRef(immediate);
+	function clean() {
+		if (timerRef.current) {
+			clearInterval(timerRef.current);
+			timerRef.current = null;
+		}
+	}
+	function setActive(active) {
+		isActiveRef.current = active;
+		setIsActive(active);
+	}
+	const pause = useCallback(() => {
+		setActive(false);
+		clean();
+	}, []);
+	const resume = useCallback(() => {
+		const intervalValue = intervalRef.current;
+		if (intervalValue <= 0) return;
+		setActive(true);
+		if (immediateCallbackRef.current) cbRef.current();
+		clean();
+		if (isActiveRef.current) timerRef.current = setInterval(() => cbRef.current(), intervalValue);
+	}, []);
+	useEffect(() => {
+		if (immediateRef.current) resume();
+		return () => {
+			clean();
+		};
+	}, [resume]);
+	const mountedRef = useRef(false);
+	useEffect(() => {
+		if (!mountedRef.current) {
+			mountedRef.current = true;
+			return;
+		}
+		if (isActiveRef.current) resume();
+	}, [interval, resume]);
+	return {
+		isActive,
+		pause,
+		resume
+	};
+}
+//#endregion
+//#region useLastChanged/index.tsx
+function useLastChanged(value, options = {}) {
+	const [lastChanged, setLastChanged] = useState(() => {
+		var _options$initialValue;
+		return (_options$initialValue = options.initialValue) !== null && _options$initialValue !== void 0 ? _options$initialValue : null;
+	});
+	const prevValue = useRef(value);
+	useEffect(() => {
+		if (!Object.is(prevValue.current, value)) {
+			prevValue.current = value;
+			setLastChanged(timestamp());
+		}
+	});
+	return lastChanged;
+}
+//#endregion
+//#region useListener/index.tsx
+/**
+* React port of the `useListener` protocol — bind a callback to an event
+* registration function returned by a reause hook, with automatic cleanup
+* on unmount.
+*
+* Map from @reause/shared `useListener` (protocol: #129)
+* Motivation: hooks like `useFileDialog` return `onChange` / `onCancel`
+* registration functions (upstream `EventHookOn`). In Vue those auto-clean
+* via the effect scope; in React we need a hook to own that lifecycle.
+* `useListener` registers `cb` with `on` on mount and, when `on` returns an
+* `off` function, calls it on unmount, so listeners are cleaned up and
+* callbacks never fire after the component is gone. (An `on` that returns
+* nothing provides no cleanup — nothing can be released.) The callback is
+* kept in a ref, so changing `cb` across renders does not re-register — the
+* latest callback is used by the already-registered listener. If `on` itself
+* changes (a new hook instance), the effect re-runs and re-registers.
+*
+* @example
+* const { files, open, onChange } = useFileDialog()
+* useListener(onChange, (files) => { console.log(files) })
+*/
+function useListener(on, cb) {
+	const cbRef = useRef(cb);
+	cbRef.current = cb;
+	useEffect(() => {
+		if (typeof on !== "function") return;
+		const result = on(((...args) => cbRef.current(...args)));
+		return () => {
+			var _result$off;
+			result === null || result === void 0 || (_result$off = result.off) === null || _result$off === void 0 || _result$off.call(result);
+		};
+	}, [on]);
+}
+//#endregion
+//#region useMount/index.tsx
+/**
+* React port of react-use's `useMount`.
+*
+* Map from react-use `useMount`.
+* Runs `fn` exactly once after the component mounts.
+*
+* @example
+* useMount(() => {
+*   trackPageView()
+* })
+*/
+function useMount(fn) {
+	useEffect(() => {
+		fn();
+	}, []);
+}
+//#endregion
+//#region useStateAutoReset/index.tsx
+/**
+* A state which will be reset to the default value after some time.
+*
+* Map from @vueuse/shared `refAutoReset`
+* (`source/vueuse/packages/shared/refAutoReset/`). Upstream returns a single
+* writable Vue ref; per this repo's `useState*` family convention the return
+* is the React `[value, setValue]` tuple — `value` is the state, `setValue`
+* is a `useState`-style setter (value or updater form, `Dispatch<SetStateAction>`)
+* that also (re)schedules a timer to restore `defaultValue` after `afterMs`
+* milliseconds. `defaultValue` accepts the shared `State<T>` form (plain value,
+* lazy getter, ref-like object, state tuple, or controlled `{ value, onChange }` pair).
+* `afterMs` accepts the shared `RefOrValue<number>` form and is resolved with `toValue` at fire time
+* (upstream: `toValue`); the pending timer is cleared on unmount (upstream:
+* `tryOnScopeDispose`, timers in the effect scope). The deprecated `autoResetRef`
+* alias is not ported.
+*
+* @param defaultValue The value which will be set.
+* @param afterMs      A zero-or-greater delay in milliseconds.
+* @example
+* const [message, setMessage] = useStateAutoReset('default message', 1000)
+*
+* function handleMessage() {
+*   setMessage('message has set') // resets to 'default message' after 1000ms
+* }
+*/
+function useStateAutoReset(defaultValue, afterMs = 1e4) {
+	const [value, setValue] = useControllableState(defaultValue, { passive: true });
+	const defaultValueRef = useRef(defaultValue);
+	const afterMsRef = useRef(afterMs);
+	const timerRef = useRef(null);
+	defaultValueRef.current = defaultValue;
+	afterMsRef.current = afterMs;
+	const scheduleReset = useCallback(() => {
+		if (timerRef.current) clearTimeout(timerRef.current);
+		timerRef.current = setTimeout(() => {
+			timerRef.current = null;
+			setValue(toValue(defaultValueRef.current));
+		}, toValue(afterMsRef.current));
+	}, []);
+	const setValueWithReset = useCallback((next) => {
+		setValue(next);
+		scheduleReset();
+	}, [scheduleReset]);
+	useEffect(() => () => {
+		if (timerRef.current) clearTimeout(timerRef.current);
+	}, []);
+	return [value, setValueWithReset];
+}
+//#endregion
+//#region useStateDebounced/index.tsx
+/**
+* Debounce updates of a state value — React port of VueUse's `refDebounced`.
+*
+* Map from @vueuse/shared `refDebounced`
+* Mapping: upstream takes a Vue `Ref<T>` and returns a readonly ref that only
+* flips to the latest source value once it stops changing for `ms` (a watcher
+* hands every change to `useDebounceFn`). The naming follows this repo's
+* `ref* → useState*` rule (`refDebounced` → `useStateDebounced`), the Vue
+* `Ref<T>` input becomes a plain initial value, and the readonly ref becomes
+* an extra state slot — so the hook returns the tuple
+* `[value, setValue, debounced]`:
+*
+* ```ts
+* const [input, setInput, debounced] = useStateDebounced('foo', 1000)
+*
+* setInput('bar')
+* console.log(debounced) // 'foo' — flips to 'bar' once the debounce elapses
+* ```
+*
+* `value` is the source state, `setValue` its setter, and `debounced` lags
+* behind it by `ms`. Writes settle through a `useDebounceFn` updater, so a
+* burst of writes collapses into a single trailing update carrying the last
+* written value. `ms` (and `options.maxWait`) accept a plain number or a
+* ref-like `{ current }` (upstream: `RefOrValue<number>`) and are re-read on
+* every write; pending timers are cleared when the component unmounts
+* (upstream disposes with the effect scope). Note: a write only schedules the
+* debounce when the value actually changes — writing the same value is
+* skipped by `useControllableState`'s `Object.is` guard, so the pending timer
+* is not re-delayed (upstream's `watch` re-delays on every source write, even
+* unchanged ones).
+*
+* @example
+* ```ts
+* const [value, setValue, debounced] = useStateDebounced('foo', 1000)
+* ```
+*/
+function useStateDebounced(value, ms = 200, options = {}) {
+	const [state, setState] = useControllableState(value, { passive: true });
+	const [debounced, setDebounced] = useState(state);
+	const stateRef = useRef(state);
+	stateRef.current = state;
+	const updater = useDebounceFn(() => {
+		setDebounced(stateRef.current);
+	}, ms, options);
+	const isFirstRunRef = useRef(true);
+	useEffect(() => {
+		if (isFirstRunRef.current) {
+			isFirstRunRef.current = false;
+			return;
+		}
+		updater();
+	}, [state, updater]);
+	return [
+		state,
+		setState,
+		debounced
+	];
+}
+//#endregion
+//#region useStateDefault/index.tsx
+/**
+* A state tuple (`[value, setter]`) — mirrors `toValue`'s tuple branch.
+*/
+function isStateTuple(source) {
+	return Array.isArray(source) && source.length === 2 && typeof source[1] === "function";
+}
+/**
+* A `{ value, onChange }` source — mirrors `toValue`'s object branch (the
+* `addEventListener` guard keeps DOM-ish objects out, like `toValue`).
+*/
+function isObjectState(source) {
+	return typeof source === "object" && source !== null && !Array.isArray(source) && "value" in source && !("addEventListener" in source);
+}
+/**
+* A ref-like `{ current }` source.
+*/
+function isRefState(source) {
+	return source !== null && source !== void 0 && typeof source === "object" && "current" in source;
+}
+/**
+* Apply default value to a ref-like source — React port of VueUse's
+* `refDefault` renamed to `useStateDefault` (this repo's naming for the
+* `ref*` family; upstream's single writable computed ref becomes a tuple).
+*
+* Map from @vueuse/shared `refDefault`
+* Mapping: upstream derives a writable `computed` from a source
+* `Ref<T | undefined | null>` — it reads `source.value ?? defaultValue` and
+* writes back to `source.value`. This port accepts a `State<T | undefined |
+* null>` — a plain value, a ref-like object (`{ current }`, e.g. the first
+* tuple element of `useStorage`), a getter, a `[value, setter]` tuple or a
+* `{ value, onChange }` pair — and returns the React tuple
+* `const [value, setValue] = useStateDefault(raw, 'default')`. `value` is
+* derived on every render from the source through `toValue` (`source.current
+* ?? defaultValue`), so it always reflects the source's current value —
+* including writes made from outside the component; `setValue` resolves the
+* next value (value or updater form), writes it through to the source (its
+* `current`, its setter or its `onChange`) and bumps a local version counter
+* so the derived `value` re-renders. SSR-safe: nothing touches the DOM and the
+* first server render already shows the default.
+*
+* @param source       The `State<T | undefined | null>` source holding the
+*                     value — read through `toValue` on every render and
+*                     written back to `current` / the tuple setter /
+*                     `onChange` on `setValue`.
+* @param defaultValue The value displayed while the source is `null` or
+*                     `undefined`.
+* @return  A tuple `[value, setValue]` — the current value (source value or
+*          `defaultValue`) and its setter.
+*
+* @example
+* const raw = { current: undefined as string | undefined }
+* const [value, setValue] = useStateDefault(raw, 'default')
+*
+* setValue('hello')
+* console.log(value) // 'hello' after the next render (React derives at render)
+*
+* setValue(undefined)
+* console.log(value) // 'default' after the next render
+*/
+function useStateDefault(source, defaultValue) {
+	var _toValue;
+	const sourceRef = useRef(source);
+	sourceRef.current = source;
+	const [, setVersion] = useState(0);
+	const bump = () => {
+		setVersion((current) => current + 1);
+	};
+	const setValue = useCallback((next) => {
+		const current = toValue(sourceRef.current);
+		const resolved = typeof next === "function" ? next(current) : next;
+		const currentSource = sourceRef.current;
+		if (isStateTuple(currentSource)) {
+			currentSource[1](resolved);
+			bump();
+		} else if (isObjectState(currentSource)) {
+			var _currentSource$onChan;
+			(_currentSource$onChan = currentSource.onChange) === null || _currentSource$onChan === void 0 || _currentSource$onChan.call(currentSource, resolved);
+			bump();
+		} else if (isRefState(currentSource)) {
+			currentSource.current = resolved;
+			bump();
+		}
+	}, []);
+	return [(_toValue = toValue(source)) !== null && _toValue !== void 0 ? _toValue : defaultValue, setValue];
+}
+//#endregion
+//#region useStateManualReset/index.tsx
+/**
+* A controlled source — a `[value, setter]` tuple or a `{ value, onChange }`
+* object. These have no stored default of their own: `toValue` returns the
+* live value, so resetting to it would be a no-op. Reset therefore restores
+* the initial argument value instead.
+*/
+function isControlledSource$1(state) {
+	return Array.isArray(state) && state.length === 2 && typeof state[1] === "function" || typeof state === "object" && state !== null && !Array.isArray(state) && "value" in state;
+}
+/**
+* React port of VueUse's `refManualReset`.
+*
+* Map from @vueuse/shared `refManualReset`
+* (`source/vueuse/packages/shared/refManualReset/`). Create a state with
+* manual reset functionality — any update can be reverted back to the initial
+* value with the returned `reset` function.
+*
+* Upstream returns a writable Vue `Ref<T>` extended with a `reset` method
+* (built on `customRef`). Per this repo's naming rules the port is renamed to
+* `useStateManualReset` and the ref becomes a `[value, setValue, reset]`
+* tuple: the second element is the plain `useState` setter (value or updater
+* form), and `reset` restores the default value.
+*
+* The state input accepts the shared `State<T>` form: a value, getter, ref-like
+* object, state tuple, or controlled `{ value, onChange }` object. `reset`
+* re-reads the input on every call, so plain, getter and ref-like sources
+* reset to the latest source value (matching upstream's
+* `value = toValue(defaultValue)`); tuple / `{ value, onChange }` (controlled)
+* sources have no stored default, so they restore the initial argument value.
+*
+* @example
+* const [message, setMessage, resetMessage] = useStateManualReset('default message')
+* setMessage('message has set')
+* resetMessage()
+* console.log(message) // 'default message'
+*/
+function useStateManualReset(value) {
+	const valueRef = useRef(value);
+	valueRef.current = value;
+	const initialDefaultRef = useRef(toValue(value));
+	const [state, setState] = useControllableState(value, { passive: true });
+	return [
+		state,
+		setState,
+		useCallback(() => {
+			const current = valueRef.current;
+			setState(isControlledSource$1(current) ? initialDefaultRef.current : toValue(current));
+		}, [])
+	];
+}
+//#endregion
+//#region useThrottleFn/index.tsx
+/**
+* Throttle execution of a function — React port of VueUse's `useThrottleFn`.
+* Especially useful for rate limiting execution of handlers on events like
+* resize and scroll.
+*
+* Map from @vueuse/shared `useThrottleFn`
+* Mapping: upstream builds `createFilterWrapper(throttleFilter(ms, trailing,
+* leading, rejectOnCancel), fn)` and returns a plain `PromisifyFn<T>` — the
+* throttled wrapper carries no `cancel` / `flush` / `isPending` (unlike the
+* debounce filter, upstream's `throttleFilter` is not cancelable), so this
+* port mirrors that: the return value is the wrapped function and nothing
+* more. The wrapper is built once (`useMemo`) so its identity is stable
+* across renders — safe to add/remove in effects; the latest `fn` / `ms` /
+* `trailing` / `leading` / `rejectOnCancel` are mirrored into refs so every
+* call sees fresh values (upstream captures the flags once, at filter
+* creation). `ms` accepts a number or a ref-like `{ current: number }`
+* (upstream: `RefOrValue<number>`) and is re-read on every call. The
+* throttle filter logic is inlined (upstream: `utils/filters.ts`
+* `throttleFilter` — leading/trailing timestamps with a trailing invoke on
+* window end). The wrapper is cleaned up on unmount: any pending trailing
+* timer is cleared when the component unmounts — a React hygiene measure;
+* upstream registers no disposal at all (`@__NO_SIDE_EFFECTS__`), so a
+* pending call would still fire there after teardown.
+*
+* @param   fn             A function to be executed after delay milliseconds. The `this` context and all arguments are passed through, as-is,
+*                                    to `callback` when the throttled-function is executed.
+* @param   ms             A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful.
+*                                    (default value: 200)
+*
+* @param [trailing] if true, call fn again after the time is up (default value: true)
+*
+* @param [leading] if true, call fn on the leading edge of the ms timeout (default value: true)
+*
+* @param [rejectOnCancel] if true, reject the last call if it's been cancel (default value: false)
+*
+* @return  A new, throttled, function.
+*
+* @example
+* const throttledFn = useThrottleFn(() => { ... }, 1000)
+* throttledFn()
+*/
+function useThrottleFn(fn, ms = 200, trailing = true, leading = true, rejectOnCancel = false) {
+	const fnRef = useRef(fn);
+	fnRef.current = fn;
+	const msRef = useRef(ms);
+	msRef.current = ms;
+	const trailingRef = useRef(trailing);
+	trailingRef.current = trailing;
+	const leadingRef = useRef(leading);
+	leadingRef.current = leading;
+	const rejectOnCancelRef = useRef(rejectOnCancel);
+	rejectOnCancelRef.current = rejectOnCancel;
+	const { throttled, clear } = useMemo(() => {
+		let lastExec = 0;
+		let timer;
+		let isLeading = true;
+		let lastRejector = noop;
+		let lastValue;
+		const clear = () => {
+			if (timer !== void 0) {
+				clearTimeout(timer);
+				timer = void 0;
+				lastRejector();
+				lastRejector = noop;
+			}
+		};
+		const handler = (_invoke) => {
+			const duration = toValue(msRef.current);
+			const elapsed = Date.now() - lastExec;
+			const invoke = () => {
+				return lastValue = _invoke();
+			};
+			clear();
+			if (duration === void 0 || duration <= 0) {
+				lastExec = Date.now();
+				return invoke();
+			}
+			if (elapsed > duration) {
+				lastExec = Date.now();
+				if (leadingRef.current || !isLeading) invoke();
+			} else if (trailingRef.current) lastValue = new Promise((resolve, reject) => {
+				lastRejector = rejectOnCancelRef.current ? reject : resolve;
+				timer = setTimeout(() => {
+					lastExec = Date.now();
+					isLeading = true;
+					resolve(invoke());
+					clear();
+				}, Math.max(0, duration - elapsed));
+			});
+			if (!leadingRef.current && timer === void 0) timer = setTimeout(() => {
+				isLeading = true;
+			}, duration);
+			isLeading = false;
+			return lastValue;
+		};
+		const throttled = ((...args) => {
+			return new Promise((resolve, reject) => {
+				Promise.resolve(handler(() => fnRef.current(...args))).then(resolve).catch(reject);
+			});
+		});
+		return {
+			throttled,
+			clear
+		};
+	}, []);
+	useEffect(() => () => clear(), [clear]);
+	return throttled;
+}
+//#endregion
+//#region useStateThrottled/index.tsx
+/**
+* Throttle changing of a state value — React port of VueUse's `refThrottled`.
+*
+* The `value` argument accepts any `State<T>` supported by
+* `useControllableState`: a plain value, lazy initializer, controlled tuple,
+* or `{ value, onChange }` source. The returned tuple contains the current
+* value, its setter, and a throttled mirror.
+*
+* A `delay <= 0` short-circuits like upstream (`if (delay <= 0) return value`):
+* the throttled element is the input itself — no throttling, no timers.
+*
+* @param value State source accepted by `useControllableState`.
+* @param delay Delay in milliseconds between commits (default: 200).
+* @param trailing Whether to commit the latest value after the window (default: true).
+* @param leading Whether to commit on the leading edge (default: true).
+*/
+function useStateThrottled(value, delay = 200, trailing = true, leading = true) {
+	const [input, setInput] = useControllableState(value, { passive: true });
+	const [throttled, setThrottled] = useState(input);
+	const inputRef = useRef(input);
+	inputRef.current = input;
+	const delayRef = useRef(delay);
+	delayRef.current = delay;
+	const throttledFn = useThrottleFn(() => {
+		setThrottled(inputRef.current);
+	}, delay, trailing, leading);
+	const isFirstRunRef = useRef(true);
+	useEffect(() => {
+		if (isFirstRunRef.current) {
+			isFirstRunRef.current = false;
+			return;
+		}
+		if (delayRef.current > 0) throttledFn();
+	}, [input, throttledFn]);
+	if (delay <= 0) return [
+		input,
+		setInput,
+		input
+	];
+	return [
+		input,
+		setInput,
+		throttled
+	];
+}
+//#endregion
+//#region useStateWithControl/index.tsx
+/**
+* A controlled source — a `[value, setter]` tuple or a `{ value, onChange }`
+* object — whose value is owned by the caller (re-rendered externally).
+*/
+function isControlledSource(state) {
+	return Array.isArray(state) && state.length === 2 && typeof state[1] === "function" || typeof state === "object" && state !== null && !Array.isArray(state) && "value" in state;
+}
+/**
+* Fine-grained controls over a state and its re-renders — React port of
+* VueUse's `refWithControl`.
+*
+* Map from @vueuse/shared `refWithControl`
+* (`source/vueuse/packages/shared/refWithControl/`). Upstream returns a single
+* writable Vue `Ref` extended with `get` / `set` / `untrackedGet` /
+* `silentSet` / `peek` / `lay`. This port owns the state like a `useState` and
+* returns the React tuple `const [num, setNum, control] = useStateWithControl(0)`
+* — the name follows this repo's `ref*` → `useState*` mapping rule. `setNum`
+* behaves like a normal `setState` (value or updater form — the updater base
+* is the current internal value, which may be ahead of the rendered value
+* after a silent write), while `control`
+* keeps the fine-grained get/set pair: `set(value, false)` (and `lay` /
+* `silentSet`) updates the value without re-rendering (upstream: without
+* triggering reactivity), and `peek` / `untrackedGet` read it back — in React
+* there is no dependency tracking during render, so those are plain aliases
+* for the current value. `reset()` (a small addition, upstream has no
+* equivalent) restores the initial value and participates in the change
+* callbacks (`onBeforeChange` can dismiss it, `onChanged` fires when
+* accepted). Option names are kept from upstream:
+* `onBeforeChange` can dismiss a change by returning `false`, and `onChanged`
+* fires synchronously after an accepted change.
+*
+* @param   state    State source: a plain value, getter, ref-like value, state
+*                   tuple, or `{ value, onChange }` controllable state.
+* @param   options
+* @return  A tuple `[value, setValue, control]` — the current value, a
+*          `setState`-like setter and the fine-grained control object.
+*
+* @example
+* const [num, setNum, control] = useStateWithControl(0)
+*
+* setNum(42) // just like a normal useState setter
+* control.set(30, false) // set the value without re-rendering
+* control.peek() // get the value without tracking
+*/
+function useStateWithControl(state, options = {}) {
+	const { onBeforeChange, onChanged } = options;
+	const initialRef = useRef(toValue(state));
+	const sourceRef = useRef(initialRef.current);
+	const [value, setState] = useControllableState(state, { passive: true });
+	const lastTriggeredRef = useRef(void 0);
+	if (isControlledSource(state) && !Object.is(value, lastTriggeredRef.current)) {
+		sourceRef.current = value;
+		lastTriggeredRef.current = value;
+	}
+	const callbacksRef = useRef({
+		onBeforeChange,
+		onChanged
+	});
+	callbacksRef.current = {
+		onBeforeChange,
+		onChanged
+	};
+	const set = useCallback((nextValue, triggering = true) => {
+		var _callbacksRef$current, _callbacksRef$current2, _callbacksRef$current3, _callbacksRef$current4;
+		if (nextValue === sourceRef.current) return;
+		const old = sourceRef.current;
+		if (((_callbacksRef$current = (_callbacksRef$current2 = callbacksRef.current).onBeforeChange) === null || _callbacksRef$current === void 0 ? void 0 : _callbacksRef$current.call(_callbacksRef$current2, nextValue, old)) === false) return;
+		sourceRef.current = nextValue;
+		(_callbacksRef$current3 = (_callbacksRef$current4 = callbacksRef.current).onChanged) === null || _callbacksRef$current3 === void 0 || _callbacksRef$current3.call(_callbacksRef$current4, nextValue, old);
+		if (triggering) {
+			lastTriggeredRef.current = nextValue;
+			setState(nextValue);
+		}
+	}, []);
+	const get = useCallback((_tracking = true) => {
+		return sourceRef.current;
+	}, []);
+	const untrackedGet = useCallback(() => get(false), [get]);
+	const silentSet = useCallback((nextValue) => set(nextValue, false), [set]);
+	const peek = useCallback(() => get(false), [get]);
+	const lay = useCallback((nextValue) => set(nextValue, false), [set]);
+	const reset = useCallback(() => set(initialRef.current), [set]);
+	return [
+		value,
+		useCallback((nextValue) => {
+			const resolved = typeof nextValue === "function" ? nextValue(sourceRef.current) : nextValue;
+			set(resolved);
+		}, [set]),
+		{
+			get,
+			set,
+			untrackedGet,
+			silentSet,
+			peek,
+			lay,
+			reset
+		}
+	];
+}
+//#endregion
+//#region useTimeout/index.tsx
+function useTimeout(interval = 1e3, options = {}) {
+	const { controls: exposeControls = false, callback, immediate = true, immediateCallback = false } = options;
+	const [isPending, setIsPending] = useState(immediate);
+	const intervalRef = useRef(interval);
+	intervalRef.current = interval;
+	const callbackRef = useRef(callback);
+	callbackRef.current = callback;
+	const immediateCallbackRef = useRef(immediateCallback);
+	immediateCallbackRef.current = immediateCallback;
+	const timerRef = useRef(null);
+	const stop = useCallback(() => {
+		if (timerRef.current !== null) {
+			clearTimeout(timerRef.current);
+			timerRef.current = null;
+		}
+		setIsPending(false);
+	}, []);
+	const start = useCallback(() => {
+		var _callbackRef$current;
+		if (immediateCallbackRef.current) (_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 || _callbackRef$current.call(callbackRef);
+		if (timerRef.current !== null) {
+			clearTimeout(timerRef.current);
+			timerRef.current = null;
+		}
+		setIsPending(true);
+		const delay = toValue(intervalRef.current);
+		timerRef.current = setTimeout(() => {
+			var _callbackRef$current2;
+			timerRef.current = null;
+			setIsPending(false);
+			(_callbackRef$current2 = callbackRef.current) === null || _callbackRef$current2 === void 0 || _callbackRef$current2.call(callbackRef);
+		}, delay);
+	}, []);
+	useEffect(() => {
+		if (immediate) start();
+		return stop;
+	}, []);
+	const ready = !isPending;
+	if (exposeControls) return {
+		ready,
+		isPending,
+		start,
+		stop
+	};
+	return ready;
+}
+//#endregion
+//#region useTimeoutFn/index.tsx
+/**
+* React port of VueUse's `useTimeoutFn` — wrapper for `setTimeout` with
+* controls.
+*
+* Map from @vueuse/shared `useTimeoutFn`
+* Mapping: upstream accepts `RefOrValue<number>` for the interval — this
+* port accepts a plain `number`. `isPending` becomes a boolean state
+* (upstream: a readonly shallow ref) that starts `false` and is set inside
+* the mount effect — like upstream's `shallowRef(false)` + `isClient` gate,
+* the server render does not report pending. `immediateCallback` runs the
+* callback synchronously on `start` (before the timer is armed). The timer
+* is scheduled in a mount effect (upstream starts synchronously during
+* setup) and a pending timer is cleared on unmount via effect cleanup. The
+* latest callback and interval are kept in refs so restarts always use the
+* newest ones.
+*
+* @example
+* const { isPending, start, stop } = useTimeoutFn(() => { ... }, 3000)
+*/
+function useTimeoutFn(cb, interval, options = {}) {
+	const { immediate = true, immediateCallback = false } = options;
+	const [isPending, setIsPending] = useState(false);
+	const cbRef = useRef(cb);
+	const intervalRef = useRef(interval);
+	const immediateCallbackRef = useRef(immediateCallback);
+	const timerRef = useRef(null);
+	cbRef.current = cb;
+	intervalRef.current = interval;
+	immediateCallbackRef.current = immediateCallback;
+	function clear() {
+		if (timerRef.current) {
+			clearTimeout(timerRef.current);
+			timerRef.current = null;
+		}
+	}
+	const stop = useCallback(() => {
+		setIsPending(false);
+		clear();
+	}, []);
+	const start = useCallback((...args) => {
+		if (immediateCallbackRef.current) cbRef.current();
+		clear();
+		setIsPending(true);
+		timerRef.current = setTimeout(() => {
+			timerRef.current = null;
+			setIsPending(false);
+			cbRef.current(...args);
+		}, intervalRef.current);
+	}, []);
+	useEffect(() => {
+		if (immediate) start();
+		return () => {
+			clear();
+		};
+	}, [immediate, start]);
+	return {
+		isPending,
+		start,
+		stop
+	};
+}
+//#endregion
+//#region useToggle/index.tsx
+/**
+* React port of VueUse's `useToggle` — a toggler between a truthy and a falsy
+* value, both configurable.
+*
+* Map from @vueuse/shared `useToggle`
+* Mapping: `ref(initialValue)` → `useControllableState(initialValue)`,
+* `toggle()` → stable `useCallback`; accepts the full `State<T>` input.
+* `truthyValue` / `falsyValue` are plain values (upstream: `MaybeRefOrGetter` —
+* reactive refs/getters are not supported, see `RefOrValue`). Upstream's
+* `toggle` returns the new value synchronously; React state updates are async,
+* so here `toggle` is `() => void` and the new value is read from `value` on
+* the next render. Like upstream, a bare `toggle()` flips between
+* `truthyValue` and `falsyValue`, `toggle(value)` (including an explicit
+* `undefined`) forces the value, and a function argument is applied as a
+* functional update (React adaptation).
+*
+* @example
+* const [value, toggle] = useToggle()
+* toggle()        // false → true
+* toggle(false)   // force to false
+*
+* const [status, toggleStatus] = useToggle('on', { truthyValue: 'on', falsyValue: 'off' })
+* toggleStatus()  // 'on' → 'off'
+*/
+function useToggle(initialValue = false, options = {}) {
+	const { truthyValue = true, falsyValue = false } = options;
+	const [state, setState] = useControllableState(initialValue, { passive: true });
+	const truthyRef = useRef(truthyValue);
+	truthyRef.current = truthyValue;
+	const falsyRef = useRef(falsyValue);
+	falsyRef.current = falsyValue;
+	return [state, useCallback((...args) => {
+		const hasValue = args.length > 0;
+		const value = args[0];
+		setState((current) => {
+			if (hasValue) {
+				if (typeof value === "function") return value(current);
+				return value;
+			}
+			return Object.is(current, truthyRef.current) ? falsyRef.current : truthyRef.current;
+		});
+	}, [setState])];
+}
+//#endregion
+//#region useToNumber/index.tsx
+/**
+* React port of VueUse's `useToNumber`.
+*
+* Map from @vueuse/shared `useToNumber`
+* Mapping: `ComputedRef<number>` → plain number recomputed from the current
+* value on every render (accepts `number | string`); no hook state needed.
+*
+* @__NO_SIDE_EFFECTS__
+* @example
+* useToNumber('123') // 123
+* useToNumber('0xFA', { method: 'parseInt', radix: 16 }) // 250
+*/
+function useToNumber(value, options = {}) {
+	const { method = "parseFloat", radix, nanToZero } = options;
+	let resolved = value;
+	if (typeof method === "function") resolved = method(resolved);
+	else if (typeof resolved === "string") resolved = Number[method](resolved, radix);
+	if (nanToZero && Number.isNaN(resolved)) resolved = 0;
+	return resolved;
+}
+//#endregion
+//#region useToString/index.tsx
+/**
+* React port of VueUse's `useToString`.
+*
+* Map from @vueuse/shared `useToString`
+* Mapping: VueUse wraps the template-literal coercion in `computed(() => ...)`
+* and accepts a `MaybeRefOrGetter`; React has no reactive value tracking, so
+* this is a plain function returning the stringified value directly.
+*
+* The `value` param is a PLAIN read-only value — pass `ref.current` or the
+* state value. Getter inputs are intentionally not supported (getters were
+* removed repo-wide); unlike upstream, a getter passed here is coerced as-is
+* (its source text), not invoked.
+*
+* @example
+* useToString(123.345)       // '123.345'
+* useToString('hi')          // 'hi'
+* useToString({ foo: 'hi' }) // '[object Object]'
+*/
+function useToString(value) {
+	return `${value}`;
+}
+//#endregion
+//#region useUnmount/index.tsx
+/**
+* React port of react-use's `useUnmount`.
+*
+* Map from react-use `useUnmount`
+* Mapping: react-use's `useUnmount` keeps the callback in a `useRef`,
+* reassigning it on every render so the newest callback is invoked, and runs
+* it via an empty-dependency `useEffect` cleanup (react-use's `useEffectOnce`
+* is just `useEffect(effect, [])`). This port follows the same semantics.
+*
+* @example
+* useUnmount(() => cleanup())
+*/
+function useUnmount(fn) {
+	const fnRef = useRef(fn);
+	fnRef.current = fn;
+	useEffect(() => () => fnRef.current(), []);
+}
+//#endregion
+//#region useUpdate/index.tsx
+const updateReducer = (num) => (num + 1) % 1e6;
+/**
+* React port of react-use's `useUpdate`.
+*
+* Map from react-use `useUpdate`
+* Mapping: `useReducer` with a wrapping counter — the returned function
+* dispatches an update that forces a re-render and is stable across renders.
+*
+* @example
+* const update = useUpdate()
+* update() // forces a re-render
+*/
+function useUpdate() {
+	const [, update] = useReducer(updateReducer, 0);
+	return update;
+}
+//#endregion
+//#region useWatch/index.tsx
+function useWatch(source, callback, options = {}) {
+	const firstRender = useRef(true);
+	const oldValueRef = useRef(void 0);
+	useEffect(() => {
+		const oldValue = oldValueRef.current;
+		const first = firstRender.current;
+		firstRender.current = false;
+		if (!first || options.immediate) callback(source, oldValue);
+		oldValueRef.current = source;
+	}, Array.isArray(source) ? source : [source]);
+}
+//#endregion
+//#region useWatchArray/index.tsx
+/**
+* React port of VueUse's `watchArray` — watch for an array with additions and removals.
+*
+* Mapping: built on the house `useWatch` — the list is a plain array value tracked across
+* renders, `useWatch` handles the change detection, and the previous list is diffed against
+* the next one with item-identity matching (like upstream) so the callback receives
+* `(newList, oldList, added, removed)`. The list is wrapped as a single-element watch
+* source (`[list]`) so `useWatch` tracks it by reference identity instead of spreading a
+* variable-length list into its dependency list (React requires a constant deps size).
+*
+* Divergences from the upstream Vue API:
+* - `source` is a plain array value — Vue's `WatchSource` forms (ref / getter / reactive)
+*   have no React equivalent, compute the array during render and pass it directly.
+* - The list is tracked by reference identity: replacing it with a new array fires the
+*   callback even when the items are identical (like a Vue ref reassignment), while
+*   re-renders that keep the same array reference do not fire.
+* - In-place mutations (`push` / `splice`) do not re-render — produce a new array
+*   (`setList([...list, item])`) to trigger the watch.
+* - The upstream `onCleanup` callback parameter is not ported — `useWatch` has no
+*   watch-cleanup equivalent, use `useEffect` cleanup in the component instead.
+* - The return value is `void` — upstream returns a stop `WatchHandle`; watching
+*   ends when the component unmounts.
+*
+* @example
+* ```ts
+* useWatchArray(list, (newList, oldList, added, removed) => {
+*   console.log('added:', added, 'removed:', removed)
+* })
+* ```
+*/
+function useWatchArray(source, cb, options) {
+	useWatch([source], (watched, watchedOld) => {
+		var _watchedOld$;
+		const newList = watched[0];
+		const prevList = [...(_watchedOld$ = watchedOld === null || watchedOld === void 0 ? void 0 : watchedOld[0]) !== null && _watchedOld$ !== void 0 ? _watchedOld$ : []];
+		const oldListRemains = Array.from({ length: prevList.length });
+		const added = [];
+		for (const obj of newList) {
+			let found = false;
+			for (let i = 0; i < prevList.length; i++) if (!oldListRemains[i] && obj === prevList[i]) {
+				oldListRemains[i] = true;
+				found = true;
+				break;
+			}
+			if (!found) added.push(obj);
+		}
+		cb(newList, prevList, added, prevList.filter((_, i) => !oldListRemains[i]));
+	}, options);
+}
+//#endregion
+//#region useWatchAtMost/index.tsx
+/**
+* React port of VueUse's `watchAtMost` — `watch` with the number of times
+* triggered.
+*
+* Map from @vueuse/shared `watchAtMost`
+* Mapping: built on the house `useWatch`. The callback is wrapped with a fire
+* counter: each invocation increments the `count` state (exposed in the
+* return so components re-render), and once the limit — `options.count` — is
+* reached the wrapper marks the watcher as stopped so further source changes
+* are ignored. A manual `stop()` has the same effect before the limit.
+*
+* Divergences from upstream:
+* - upstream stops the underlying watcher via `stop()` scheduled on
+*   `nextTick`; this port keeps the effect registered but the wrapped callback
+*   becomes a no-op — observable behavior is identical (the callback fires at
+*   most `count` times).
+* - `pause` / `resume` (upstream: inherited from `watchWithFilter`) are ported
+*   as a skip flag on the wrapped callback — React has no watcher to detach,
+*   but the observable behavior matches the Pausable controls.
+* - upstream's `count` return is a shallow ref; here it is React state so
+*   reads re-render.
+* - upstream's `WatchWithFilterOptions` members beyond `immediate` (`deep`,
+*   `flush`, `onTrack`, `onTrigger`) are not accepted — they are not
+*   expressible in React (no reactive graph, no configurable commit, no
+*   reactivity bookkeeping), and the option type rejects them.
+*
+* @example
+* ```tsx
+* const { count, stop } = useWatchAtMost(num, (value, oldValue) => {
+*   console.log(value, oldValue)
+* }, { count: 3 })
+* ```
+*/
+function useWatchAtMost(source, callback, options) {
+	const { count: maxCount, ...watchOptions } = options;
+	const [count, setCount] = useState(0);
+	const firedRef = useRef(0);
+	const stoppedRef = useRef(false);
+	const pausedRef = useRef(false);
+	const maxCountRef = useRef(maxCount);
+	maxCountRef.current = maxCount;
+	const stop = useCallback(() => {
+		stoppedRef.current = true;
+	}, []);
+	const pause = useCallback(() => {
+		pausedRef.current = true;
+	}, []);
+	const resume = useCallback(() => {
+		pausedRef.current = false;
+	}, []);
+	function wrapped(value, oldValue) {
+		if (stoppedRef.current || pausedRef.current) return;
+		firedRef.current += 1;
+		setCount(firedRef.current);
+		callback(value, oldValue);
+		if (firedRef.current >= maxCountRef.current) stoppedRef.current = true;
+	}
+	useWatch(source, wrapped, watchOptions);
+	return {
+		count,
+		stop,
+		pause,
+		resume
+	};
+}
+//#endregion
+//#region useWatchDebounced/index.tsx
+function useWatchDebounced(source, callback, options = {}) {
+	const { debounce = 0, maxWait, rejectOnCancel } = options;
+	useWatch(source, useDebounceFn((value, oldValue) => callback(value, oldValue), debounce, {
+		maxWait,
+		rejectOnCancel
+	}), { immediate: options.immediate });
+}
+//#endregion
+//#region useWatchDeep/index.tsx
+/**
+* Structural equality, mirroring the semantics of test `toEqual`: primitives
+* are compared with `Object.is`, and `Date`, `RegExp`, `Array`, `Map`, `Set`
+* and objects (plain or class instances) are compared by contents. Functions
+* compare by reference, and `Map` keys are matched by reference because key
+* lookups cannot deep-match, while `Map` values and `Set` items are compared
+* deeply.
+*
+* Shared single source of truth — used by {@link useWatchDeep} and imported
+* from `@reause/shared` by core hooks that need deep change detection
+* (e.g. `useCloned`).
+*/
+function deepEqual(a, b) {
+	if (Object.is(a, b)) return true;
+	if (a === null || b === null || typeof a !== "object" || typeof b !== "object") return false;
+	const aRecord = a;
+	const bRecord = b;
+	if (aRecord.constructor !== bRecord.constructor) return false;
+	if (a instanceof Date) return a.getTime() === b.getTime();
+	if (a instanceof RegExp) return a.source === b.source && a.flags === b.flags;
+	if (Array.isArray(a)) {
+		const bArray = b;
+		return a.length === bArray.length && a.every((item, index) => deepEqual(item, bArray[index]));
+	}
+	if (a instanceof Map) {
+		const bMap = b;
+		if (a.size !== bMap.size) return false;
+		for (const [key, value] of a) if (!bMap.has(key) || !deepEqual(value, bMap.get(key))) return false;
+		return true;
+	}
+	if (a instanceof Set) {
+		const bSet = b;
+		if (a.size !== bSet.size) return false;
+		const unmatched = [...bSet];
+		for (const item of a) {
+			const index = unmatched.findIndex((candidate) => deepEqual(item, candidate));
+			if (index === -1) return false;
+			unmatched.splice(index, 1);
+		}
+		return true;
+	}
+	const aKeys = Object.keys(aRecord);
+	if (aKeys.length !== Object.keys(bRecord).length) return false;
+	return aKeys.every((key) => Object.hasOwn(bRecord, key) && deepEqual(aRecord[key], bRecord[key]));
+}
+/**
+* Deep clone pairing with {@link deepEqual}'s type coverage — `Date`, `RegExp`,
+* `Array`, `Map`, `Set` and objects (plain or class instances) are copied
+* structurally, primitives and functions pass through. Used to snapshot a live
+* value into an isolated baseline for change detection (e.g. `useCloned`'s
+* source / cloned baselines, which must stay unaffected by in-place mutations).
+*/
+function deepClone(value) {
+	if (value === null || typeof value !== "object") return value;
+	if (value instanceof Date) return new Date(value.getTime());
+	if (value instanceof RegExp) return new RegExp(value.source, value.flags);
+	if (Array.isArray(value)) return value.map((item) => deepClone(item));
+	if (value instanceof Map) {
+		const result = /* @__PURE__ */ new Map();
+		for (const [key, item] of value) result.set(key, deepClone(item));
+		return result;
+	}
+	if (value instanceof Set) {
+		const result = /* @__PURE__ */ new Set();
+		for (const item of value) result.add(deepClone(item));
+		return result;
+	}
+	const result = Object.create(Object.getPrototypeOf(value));
+	for (const key of Object.keys(value)) result[key] = deepClone(value[key]);
+	return result;
+}
+function useWatchDeep(source, callback, options = {}) {
+	const immediateCall = useRef(options.immediate === true);
+	useWatch(source, (value, oldValue) => {
+		if (immediateCall.current) {
+			immediateCall.current = false;
+			callback(value, oldValue);
+			return;
+		}
+		if (!deepEqual(value, oldValue)) callback(value, oldValue);
+	}, options);
+}
+//#endregion
+//#region useWatchIgnorable/index.tsx
+function useWatchIgnorable(source, callback, options = {}) {
+	const { immediate, once } = options;
+	const lastSeenRef = useRef(source);
+	const snapshotRef = useRef(source);
+	const ignoreRef = useRef(false);
+	const stoppedRef = useRef(false);
+	useWatch(source, (value, oldValue) => {
+		lastSeenRef.current = value;
+		const ignore = ignoreRef.current;
+		ignoreRef.current = false;
+		if (ignore || stoppedRef.current) return;
+		callback(value, oldValue);
+		if (once) stoppedRef.current = true;
+	}, { immediate });
+	useEffect(() => {
+		if (ignoreRef.current && Object.is(source, snapshotRef.current)) ignoreRef.current = false;
+	});
+	return {
+		ignoreUpdates: useCallback((updater) => {
+			snapshotRef.current = lastSeenRef.current;
+			updater();
+			ignoreRef.current = true;
+		}, []),
+		ignorePrevAsyncUpdates: useCallback(() => {
+			snapshotRef.current = lastSeenRef.current;
+			ignoreRef.current = true;
+		}, []),
+		stop: useCallback(() => {
+			stoppedRef.current = true;
+		}, [])
+	};
+}
+//#endregion
+//#region useWatchImmediate/index.tsx
+function useWatchImmediate(source, callback) {
+	useWatch(source, callback, { immediate: true });
+}
+//#endregion
+//#region useWatchOnce/index.tsx
+/**
+* Shorthand for watching value with `{ once: true }` — the callback fires at
+* most once (the first matching change) and the watcher stops afterwards —
+* React port of VueUse's `watchOnce`.
+*
+* Map from @vueuse/shared `watchOnce`.
+*
+* Mapping: upstream is a shorthand for
+* `watch(source, cb, { ...options, once: true })`. This port builds the same
+* shorthand on the house `useWatch` (like `useWatchAtMost` does with
+* `count: 1`): the callback is wrapped with a `stopped` ref — the first
+* invocation forwards `(value, oldValue)` and marks the watcher stopped, so
+* every further source change is ignored. An `immediate: true` call counts
+* toward the once, matching upstream.
+*
+* Divergences from upstream:
+* - Returns `{ stop }` instead of the full Vue `WatchHandle` — `stop` disables
+*   further fires early (matching upstream's `stop()`); disposal otherwise
+*   follows the component lifecycle.
+* - The source is a plain value (or array of values) tracked across renders —
+*   Vue's `WatchSource` forms (ref / getter / reactive) have no React
+*   equivalent, and the `deep` / `flush` watch options don't apply.
+*
+* @example
+* ```ts
+* useWatchOnce(count, (value, oldValue) => console.log(value, oldValue))
+* ```
+*/
+function useWatchOnce(source, callback, options = {}) {
+	const stoppedRef = useRef(false);
+	const stop = useCallback(() => {
+		stoppedRef.current = true;
+	}, []);
+	function wrapped(value, oldValue) {
+		if (stoppedRef.current) return;
+		stoppedRef.current = true;
+		callback(value, oldValue);
+	}
+	useWatch(source, wrapped, options);
+	return { stop };
+}
+//#endregion
+//#region useWatchPausable/index.tsx
+function useWatchPausable(source, callback, options = {}) {
+	const { initialState = "active", immediate } = options;
+	const [isActive, setIsActive] = useState(initialState === "active");
+	const activeRef = useRef(initialState === "active");
+	const stoppedRef = useRef(false);
+	const pause = useCallback(() => {
+		activeRef.current = false;
+		setIsActive(false);
+	}, []);
+	const resume = useCallback(() => {
+		activeRef.current = true;
+		setIsActive(true);
+	}, []);
+	const stop = useCallback(() => {
+		stoppedRef.current = true;
+	}, []);
+	useWatch(source, (current, oldValue) => {
+		if (!activeRef.current || stoppedRef.current) return;
+		callback(current, oldValue);
+	}, { immediate });
+	return {
+		pause,
+		resume,
+		isActive,
+		stop
+	};
+}
+//#endregion
+//#region useWatchThrottled/index.tsx
+function useWatchThrottled(source, callback, options = {}) {
+	const { throttle = 0, trailing = true, leading = true } = options;
+	useWatch(source, useThrottleFn((value, oldValue) => callback(value, oldValue), throttle, trailing, leading), { immediate: options.immediate });
+}
+//#endregion
+//#region useWatchTriggerable/index.tsx
+function useWatchTriggerable(source, callback, options = {}) {
+	const { immediate } = options;
+	const [, forceCommit] = useState(0);
+	const cleanupFnRef = useRef(void 0);
+	const onCleanup = useCallback((cleanupFn) => {
+		cleanupFnRef.current = cleanupFn;
+	}, []);
+	const triggerableCallback = useCallback((value, oldValue) => {
+		const cleanupFn = cleanupFnRef.current;
+		if (cleanupFn) {
+			cleanupFnRef.current = void 0;
+			cleanupFn();
+		}
+		return callback(value, oldValue, onCleanup);
+	}, [callback, onCleanup]);
+	const lastSeenRef = useRef(source);
+	const snapshotRef = useRef(source);
+	const ignoreRef = useRef(false);
+	const stoppedRef = useRef(false);
+	useWatch(source, (value, oldValue) => {
+		lastSeenRef.current = value;
+		const ignore = ignoreRef.current;
+		ignoreRef.current = false;
+		if (ignore || stoppedRef.current) return;
+		triggerableCallback(value, oldValue);
+	}, { immediate });
+	useEffect(() => {
+		if (ignoreRef.current && isSameSource(source, snapshotRef.current)) ignoreRef.current = false;
+	});
+	const ignoreUpdates = useCallback((updater) => {
+		snapshotRef.current = lastSeenRef.current;
+		updater();
+		ignoreRef.current = true;
+		forceCommit((x) => x + 1);
+	}, [forceCommit]);
+	const ignorePrevAsyncUpdates = useCallback(() => {
+		snapshotRef.current = lastSeenRef.current;
+		ignoreRef.current = true;
+		forceCommit((x) => x + 1);
+	}, [forceCommit]);
+	const stop = useCallback(() => {
+		stoppedRef.current = true;
+	}, []);
+	return {
+		trigger: useCallback(() => {
+			let result;
+			ignoreUpdates(() => {
+				result = triggerableCallback(source, getOldValue(source));
+			});
+			return result;
+		}, [
+			source,
+			triggerableCallback,
+			ignoreUpdates
+		]),
+		ignoreUpdates,
+		ignorePrevAsyncUpdates,
+		stop
+	};
+}
+function getOldValue(source) {
+	return Array.isArray(source) ? source.map(() => void 0) : void 0;
+}
+function isSameSource(a, b) {
+	if (Object.is(a, b)) return true;
+	return Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((item, index) => Object.is(item, b[index]));
+}
+//#endregion
+//#region useWatchWithFilter/index.tsx
+function bypassFilter(invoke) {
+	invoke();
+}
+/**
+* Create an EventFilter that debounce the events — in-house port of upstream
+* `@vueuse/shared` `debounceFilter` (trailing edge + `maxWait`).
+*
+* Mapping: same collapsing semantics as upstream (a newer call supersedes the
+* pending one; the `maxWait` timer survives re-scheduling and forces the call
+* with the latest `invoke`). Divergences: the promise-settlement plumbing
+* (`lastRejector` / `rejectOnCancel`) is dropped — the house `EventFilter`
+* contract returns `void` and the watch path consumes no promise, so
+* `rejectOnCancel` has no observable effect — and `isPending` is a plain
+* getter instead of a reactive ref. `ms` accepts a plain number or a React
+* ref (upstream: `RefOrValue<number>`) and is re-read on every call. Pending
+* timers are cleared by `cancel()` — the `useWatchWithFilter` hook calls it
+* on stop / unmount.
+*
+* @example
+* ```ts
+* useWatchWithFilter(input, callback, { eventFilter: debounceFilter(300, { maxWait: 1000 }) })
+* ```
+*/
+function debounceFilter(ms = 200, options = {}) {
+	let timer;
+	let maxTimer;
+	let pending = false;
+	let lastInvoker;
+	const clearTimers = () => {
+		if (timer !== void 0) {
+			clearTimeout(timer);
+			timer = void 0;
+		}
+		if (maxTimer !== void 0) {
+			clearTimeout(maxTimer);
+			maxTimer = void 0;
+		}
+	};
+	const handler = (invoke) => {
+		const duration = toValue(ms);
+		const maxDuration = toValue(options.maxWait);
+		if (timer !== void 0) {
+			clearTimeout(timer);
+			timer = void 0;
+		}
+		if (duration === void 0 || duration <= 0 || maxDuration !== void 0 && maxDuration <= 0) {
+			clearTimers();
+			pending = false;
+			invoke();
+			return;
+		}
+		pending = true;
+		lastInvoker = invoke;
+		if (maxDuration !== void 0 && maxTimer === void 0) maxTimer = setTimeout(() => {
+			maxTimer = void 0;
+			if (timer !== void 0) {
+				clearTimeout(timer);
+				timer = void 0;
+			}
+			pending = false;
+			lastInvoker === null || lastInvoker === void 0 || lastInvoker();
+		}, maxDuration);
+		timer = setTimeout(() => {
+			timer = void 0;
+			if (maxTimer !== void 0) {
+				clearTimeout(maxTimer);
+				maxTimer = void 0;
+			}
+			pending = false;
+			invoke();
+		}, duration);
+	};
+	const filter = handler;
+	filter.cancel = () => {
+		clearTimers();
+		pending = false;
+		lastInvoker = void 0;
+	};
+	filter.flush = () => {
+		if (!pending) return;
+		clearTimers();
+		pending = false;
+		const invoker = lastInvoker;
+		lastInvoker = void 0;
+		invoker === null || invoker === void 0 || invoker();
+	};
+	Object.defineProperty(filter, "isPending", {
+		enumerable: true,
+		get: () => pending
+	});
+	return filter;
+}
+/**
+* Create an EventFilter that throttle the events — in-house port of upstream
+* `@vueuse/shared` `throttleFilter` (leading/trailing edges with a trailing
+* invoke on window end).
+*
+* Mapping: same collapsing semantics as upstream — a call inside the throttle
+* window re-schedules the trailing timer with the remaining time, collapsing
+* bursts into one trailing call carrying the latest `invoke`. Divergences:
+* the promise-settlement plumbing (`rejectOnCancel`, upstream's fourth
+* parameter) is dropped — the house `EventFilter` contract returns `void` —
+* and the object options form is not ported (positional
+* `throttleFilter(ms, trailing, leading)` like the house `useThrottleFn`).
+* `ms` accepts a plain number or a React ref (upstream:
+* `RefOrValue<number>`) and is re-read on every call.
+*
+* @example
+* ```ts
+* useWatchWithFilter(scrollY, callback, { eventFilter: throttleFilter(100, true, false) })
+* ```
+*/
+function throttleFilter(ms = 200, trailing = true, leading = true) {
+	let lastExec = 0;
+	let timer;
+	let isLeading = true;
+	const clear = () => {
+		if (timer !== void 0) {
+			clearTimeout(timer);
+			timer = void 0;
+		}
+	};
+	return (invoke) => {
+		const duration = toValue(ms);
+		const elapsed = Date.now() - lastExec;
+		clear();
+		if (duration === void 0 || duration <= 0) {
+			lastExec = Date.now();
+			invoke();
+			return;
+		}
+		if (elapsed > duration) {
+			lastExec = Date.now();
+			if (leading || !isLeading) invoke();
+		} else if (trailing) timer = setTimeout(() => {
+			lastExec = Date.now();
+			isLeading = true;
+			invoke();
+			clear();
+		}, Math.max(0, duration - elapsed));
+		if (!leading && timer === void 0) timer = setTimeout(() => {
+			isLeading = true;
+		}, duration);
+		isLeading = false;
+	};
+}
+/**
+* `watch` with additional EventFilter control — React port of VueUse's
+* `watchWithFilter`.
+* Map from @vueuse/shared watchWithFilter.
+*
+* Mapping: upstream builds `watch(source, createFilterWrapper(eventFilter, cb),
+* watchOptions)` — the event filter wraps the watch trigger, so every source
+* change hands an `invoke` closure to the filter, which decides whether and
+* when the callback actually runs. This port builds the same wrapper on the
+* house `useWatch` (Vue's reactive dependency tracking becomes the effect
+* dependency list): every source change invokes the captured `eventFilter`
+* with an `invoke` closure carrying the latest `(value, oldValue)` pair. The
+* hook holds no state of its own — the source is the caller's own value — and
+* returns a `stop` function (upstream's `WatchHandle`, reduced to the stop
+* capability): after `stop()`, further source changes and any pending
+* filtered invocation no longer fire the callback, and cancelable filters
+* (`debounceFilter`) are cancelled outright.
+*
+* Divergences from upstream:
+* - React batching: source changes made in the same tick collapse into a
+*   single effect run, so the filter sees ONE trigger where Vue's watcher
+*   would fire per mutation. For a trailing filter the collapsed call is
+*   identical (the latest `(value, oldValue)` pair); a leading-edge filter
+*   fires at most once per tick instead of once per mutation.
+* - `deep` is not ported: React values are not deeply reactive. The source is
+*   tracked by reference across renders (the effect dependency list), so
+*   mutating an object in place is invisible and `deep: true` would have
+*   nothing to recurse into — watch a derived primitive (or key) instead.
+*   The same applies to the `flush` watch option: React effects always run
+*   after the commit, there is no pre/post/sync choice.
+* - The filter instance is captured once on mount (upstream evaluates watch
+*   options once during setup) — an inline `debounceFilter(ms)` is safe; use
+*   a getter-based delay for dynamic values.
+* - `stop()` also suppresses a pending filtered invocation (upstream: an
+*   already-scheduled filtered invoke still fires after stop), and pending
+*   timers are cancelled when the component unmounts (upstream leaves
+*   disposal to the effect scope).
+* - The promise-settlement plumbing of upstream filters (`lastRejector` /
+*   `rejectOnCancel`) is dropped — the house `EventFilter` contract returns
+*   `void`, so `rejectOnCancel` has no observable effect.
+*
+* @example
+* ```ts
+* const stop = useWatchWithFilter(count, (value, oldValue) => console.log(value, oldValue))
+* useWatchWithFilter(count, callback, { eventFilter: debounceFilter(300) })
+* stop()
+* ```
+*/
+function useWatchWithFilter(source, callback, options = {}) {
+	const { eventFilter = bypassFilter, immediate = false } = options;
+	const stoppedRef = useRef(false);
+	const callbackRef = useRef(callback);
+	callbackRef.current = callback;
+	const filterRef = useRef(eventFilter);
+	function wrapped(value, oldValue) {
+		if (stoppedRef.current) return;
+		filterRef.current(() => {
+			if (stoppedRef.current) return;
+			callbackRef.current(value, oldValue);
+		});
+	}
+	useWatch(source, wrapped, { immediate });
+	const stop = useCallback(() => {
+		stoppedRef.current = true;
+		const cancelable = filterRef.current;
+		if (typeof cancelable.cancel === "function") cancelable.cancel();
+	}, []);
+	useEffect(() => stop, [stop]);
+	return stop;
+}
+//#endregion
+//#region useWhenever/index.tsx
+/**
+* React port of VueUse's `whenever`.
+*
+* Map from @vueuse/shared `whenever`
+* Mapping: upstream `whenever` is Vue's `watch` plus a truthy guard — the
+* callback runs every time the source CHANGES to a truthy value (a re-render
+* with the same truthy value never fires). In React this becomes a `useEffect`
+* watching `[value]`: the initial mount is skipped unless `immediate` (which
+* fires with `oldValue` `undefined`), later runs fire when the value is truthy
+* and actually changed, and the previous value is tracked in a ref updated on
+* every run — mirroring `watch`'s `oldValue`, which advances through falsy
+* values too. The callback is kept in a ref so re-renders always invoke the
+* newest one.
+*
+* The `once` option stops the watch after the first truthy fire — expressible
+* in React as a one-shot flag consulted by the effect, mirroring upstream's
+* `if (options?.once) nextTick(() => stop())`.
+*
+* The return value is a `stop` function — upstream's `WatchHandle`, reduced to
+* the stop capability (house `useWatch` has no stop-handle infrastructure).
+* `stop()` is also called when the component unmounts.
+*
+* The upstream 3-arg callback `(value, oldValue, onInvalidate)` becomes a
+* 2-arg `(value, oldValue)` in this port — `onInvalidate` (Vue's effect
+* invalidation registration) has no React equivalent, so it is dropped.
+*
+* @see https://vueuse.org/shared/whenever/
+*
+* @example
+* useWhenever(ready, () => console.log(state))
+* useWhenever(ready, () => console.log(state), { immediate: true })
+* useWhenever(ready, () => console.log(state), { once: true })
+*/
+function useWhenever(value, cb, options) {
+	const cbRef = useRef(cb);
+	cbRef.current = cb;
+	const oldValueRef = useRef(void 0);
+	const isFirstRenderRef = useRef(true);
+	const stoppedRef = useRef(false);
+	useEffect(() => {
+		if (stoppedRef.current) return;
+		const isFirstRender = isFirstRenderRef.current;
+		isFirstRenderRef.current = false;
+		const isMountFire = isFirstRender && (options === null || options === void 0 ? void 0 : options.immediate) === true;
+		const isChange = !Object.is(oldValueRef.current, value);
+		if (value && (isMountFire || !isFirstRender && isChange)) {
+			if (options === null || options === void 0 ? void 0 : options.once) stoppedRef.current = true;
+			cbRef.current(value, oldValueRef.current);
+		}
+		oldValueRef.current = value;
+	}, [value]);
+	const stop = useCallback(() => {
+		stoppedRef.current = true;
+	}, []);
+	useEffect(() => stop, [stop]);
+	return stop;
+}
+//#endregion
+//#region index.ts
+/**
+* @reause/shared — React port of @vueuse/shared
+* Shared utilities shared across all reause packages.
+*
+* Mapping note: @vueuse/shared exposes pure utilities + composables that
+* don't depend on the renderer. In the React world those become either
+* plain functions (no hook) or hooks without rendering logic.
+*/
+const isClient = typeof window !== "undefined";
+function noop() {}
+//#endregion
+export { assert, clamp, createEventHook, createGlobalState, createInjectionState, createSharedHook, createSingletonPromise, debounceFilter, deepClone, deepEqual, formatDate, hasOwn, hyphenate, increaseWithUnit, isClient, isDef, isDefined, isIOS, isObject, isRefLike, makeDestructurable, noop, normalizeDate, now, objectOmit, objectPick, promiseTimeout, pxValue, rand, syncState, syncStates, throttleFilter, timestamp, toArray, toValue, until, useArrayDifference, useArrayEvery, useArrayFilter, useArrayFind, useArrayFindIndex, useArrayFindLast, useArrayIncludes, useArrayJoin, useArrayMap, useArrayReduce, useArraySome, useArrayUnique, useControllableState, useCounter, useDateFormat, useDebounceFn, useInterval, useIntervalFn, useLastChanged, useListener, useMount, useStateAutoReset, useStateDebounced, useStateDefault, useStateManualReset, useStateThrottled, useStateWithControl, useThrottleFn, useTimeout, useTimeoutFn, useToNumber, useToString, useToggle, useUnmount, useUpdate, useWatch, useWatchArray, useWatchAtMost, useWatchDebounced, useWatchDeep, useWatchIgnorable, useWatchImmediate, useWatchOnce, useWatchPausable, useWatchThrottled, useWatchTriggerable, useWatchWithFilter, useWhenever, writeState };