@vuetify/v0 0.0.16 → 0.0.20

package/dist/{composables-YOUVfUsn.mjs → composables-FE6B8JUW.mjs}

@@ -1,25 +1,10 @@
-import { a as isBoolean, c as isNull, d as isObject, g as mergeDeep, h as isUndefined, l as isNullOrUndefined, o as isFunction, p as isString, r as genId, t as clamp, u as isNumber } from "./utilities-DQWf_4V_.mjs";
-import { C as useResizeObserver, J as createTrinity, O as useHydration, P as toArray, Y as createContext, Z as useContext, k as createGroup, p as createSingle, q as createPlugin, u as createTokens, z as useRegistry } from "./useStep-Bqhi_DDs.mjs";
-import { i as SUPPORTS_MUTATION_OBSERVER, n as SUPPORTS_INTERSECTION_OBSERVER, t as IN_BROWSER } from "./globals-Rnihe4SF.mjs";
-import { computed, effectScope, isRef, onScopeDispose, reactive, readonly, ref, shallowReadonly, shallowRef, toRef, toValue, unref, watch } from "vue";
+import { a as isBoolean, c as isNull, d as isObject, g as mergeDeep, h as isUndefined, l as isNullOrUndefined, o as isFunction, p as isString, r as genId, t as clamp, u as isNumber } from "./utilities-BrFKLHFS.mjs";
+import { J as createTrinity, P as toArray, S as createTokens, T as createSingle, Y as createContext, Z as useContext, d as useResizeObserver, g as useHydration, k as createGroup, q as createPlugin, z as useRegistry } from "./useStep-Dw7XloDM.mjs";
+import { i as SUPPORTS_MUTATION_OBSERVER, n as SUPPORTS_INTERSECTION_OBSERVER, t as IN_BROWSER } from "./globals-exvZ8fiO.mjs";
+import { computed, effectScope, isRef, onScopeDispose, reactive, readonly, ref, shallowReadonly, shallowRef, toRef, toValue, unref, watch, watchEffect } from "vue";
 
 //#region src/composables/toReactive/index.ts
 /**
-* @module toReactive
-*
-* @remarks
-* Utility function to convert values and refs into reactive proxies with ref unwrapping.
-*
-* Key features:
-* - Automatic ref unwrapping
-* - Deep reactive proxying
-* - Map and Set support with ref unwrapping
-* - Nested object/array reactivity
-* - Type preservation
-*
-* Perfect for creating reactive versions of plain objects while automatically unwrapping refs.
-*/
-/**
 * Converts a `MaybeRef` to a `UnwrapNestedRefs`.
 *
 * @param objectRef The object to convert.
@@ -140,21 +125,6 @@ function toReactive(objectRef) {
 //#endregion
 //#region src/composables/useEventListener/index.ts
 /**
-* @module useEventListener
-*
-* @remarks
-* Event listener composable with automatic cleanup on scope disposal.
-*
-* Key features:
-* - Supports Window, Document, and HTMLElement targets
-* - Reactive targets, events, and listeners
-* - Event options support (capture, passive, once)
-* - Automatic removeEventListener on unmount
-* - Multiple overloads for type safety
-*
-* Perfect for safely managing event listeners in Vue components.
-*/
-/**
 * Attaches an event listener to a target.
 *
 * @param target The target to attach the event listener to.
@@ -209,7 +179,7 @@ function useEventListener(target, event, listener, options) {
 * @see https://0.vuetifyjs.com/composables/system/use-event-listener
 */
 function useWindowEventListener(event, listener, options) {
-	return useEventListener(window, event, listener, options);
+	return IN_BROWSER ? useEventListener(window, event, listener, options) : () => {};
 }
 /**
 * Attaches an event listener to the document.
@@ -223,30 +193,12 @@ function useWindowEventListener(event, listener, options) {
 * @see https://0.vuetifyjs.com/composables/system/use-event-listener
 */
 function useDocumentEventListener(event, listener, options) {
-	return useEventListener(document, event, listener, options);
+	return IN_BROWSER ? useEventListener(document, event, listener, options) : () => {};
 }
 
 //#endregion
 //#region src/composables/useBreakpoints/index.ts
 /**
-* @module useBreakpoints
-*
-* @see https://0.vuetifyjs.com/composables/plugins/use-breakpoints
-*
-* @remarks
-* Responsive breakpoint detection composable with window resize handling.
-*
-* Key features:
-* - Window matchMedia integration
-* - Six built-in breakpoints (xs, sm, md, lg, xl, xxl)
-* - Automatic resize listener with cleanup
-* - SSR-safe (checks IN_BROWSER)
-* - Hydration-aware
-* - Custom breakpoint configuration
-*
-* Perfect for responsive layouts and conditional rendering based on screen size.
-*/
-/**
 * Creates default breakpoint configuration.
 *
 * @returns The default breakpoint configuration object.
@@ -390,7 +342,7 @@ function createBreakpoints(_options = {}) {
 * ```
 */
 function createBreakpointsContext(_options = {}) {
-	const { namespace = "v0:breakpoints",...options } = _options;
+	const { namespace = "v0:breakpoints", ...options } = _options;
 	const [useBreakpointsContext, _provideBreakpointsContext] = createContext(namespace);
 	const context = createBreakpoints(options);
 	function provideBreakpointsContext(_context = context, app) {
@@ -434,7 +386,7 @@ function createBreakpointsContext(_options = {}) {
 * ```
 */
 function createBreakpointsPlugin(_options = {}) {
-	const { namespace = "v0:breakpoints",...options } = _options;
+	const { namespace = "v0:breakpoints", ...options } = _options;
 	const [, provideBreakpointsContext, context] = createBreakpointsContext({
 		...options,
 		namespace
@@ -492,25 +444,217 @@ function useBreakpoints(namespace = "v0:breakpoints") {
 }
 
 //#endregion
-//#region src/composables/useFeatures/index.ts
+//#region src/composables/useClickOutside/index.ts
 /**
-* @module useFeatures
+* Detects clicks outside of the specified element(s).
 *
-* @see https://0.vuetifyjs.com/composables/plugins/use-features
+* Uses two-phase detection (pointerdown → pointerup) to prevent false positives
+* when users drag from inside to outside an element.
+*
+* @param target Element ref(s) to detect clicks outside of. Accepts a single ref/getter or array of refs/getters.
+* @param handler Callback invoked when a click outside is detected.
+* @param options Configuration options.
+* @returns An object with methods to control the listener.
+*
+* @see https://0.vuetifyjs.com/composables/system/use-click-outside
 *
-* @remarks
-* Feature flag system with boolean and token-based features.
+* @example Native element ref
+* ```ts
+* const menuRef = useTemplateRef<HTMLElement>('menu')
 *
-* Key features:
-* - Boolean features (true/false activation)
-* - Token features with $variation support
-* - Auto-selection of enabled features
-* - Multi-select support for feature combinations
-* - Perfect for A/B testing, progressive rollout, feature toggles
+* useClickOutside(menuRef, () => { isOpen.value = false })
+* ```
 *
-* Inheritance chain: useRegistry → createSelection → createGroup → createFeatures
-* Integrates with useTokens for token-based features.
+* @example Component ref (e.g., Atom)
+* ```ts
+* const atomRef = useTemplateRef<AtomExpose>('atom')
+*
+* // Pass the exposed element TemplateRef via getter
+* useClickOutside(
+*   () => atomRef.value?.element,
+*   () => { isOpen.value = false }
+* )
+* ```
+*
+* @example Multiple targets
+* ```ts
+* const popoverRef = useTemplateRef<AtomExpose>('popover')
+* const anchorRef = useTemplateRef<HTMLElement>('anchor')
+*
+* useClickOutside(
+*   [() => popoverRef.value?.element, anchorRef],
+*   () => { isOpen.value = false }
+* )
+* ```
+*
+* @example Ignoring elements (CSS selectors or refs)
+* ```ts
+* useClickOutside(
+*  () => navRef.value?.element,
+*  () => { isOpen.value = false },
+*  { ignore: ['[data-app-bar]'] }
+* )
+* ```
 */
+function useClickOutside(target, handler, options = {}) {
+	const { capture = true, touchScrollThreshold = 30, detectIframe = false, ignore = [] } = options;
+	const isPaused = shallowRef(false);
+	const isActive = toRef(() => !isPaused.value);
+	let initialTarget = null;
+	let startPosition = {
+		x: 0,
+		y: 0
+	};
+	let cleanupPointerDown;
+	let cleanupPointerUp;
+	let cleanupBlur;
+	/**
+	* Resolve target(s) to an array of HTMLElements.
+	*/
+	function getTargets() {
+		return (Array.isArray(target) ? target : [target]).map((source) => toValue(source)).filter((el) => !/* @__PURE__ */ isNullOrUndefined(el));
+	}
+	/**
+	* Resolve ignore targets to a tuple of [selectors, elements].
+	* Called once per event to avoid repeated toValue() calls in hot path.
+	*/
+	function resolveIgnoreTargets() {
+		const ignoreTargets = toValue(ignore);
+		if (ignoreTargets.length === 0) return [[], []];
+		const selectors = [];
+		const elements = [];
+		for (const ignoreTarget of ignoreTargets) if (/* @__PURE__ */ isString(ignoreTarget)) selectors.push(ignoreTarget);
+		else {
+			const ignoreEl = toValue(ignoreTarget);
+			if (ignoreEl) elements.push(ignoreEl);
+		}
+		return [selectors, elements];
+	}
+	/**
+	* Check if an element matches resolved ignore targets.
+	*/
+	function isIgnored(el, selectors, elements) {
+		if (!el) return false;
+		for (const selector of selectors) try {
+			if (el.matches(selector) || !/* @__PURE__ */ isNull(el.closest(selector))) return true;
+		} catch {}
+		for (const ignoreEl of elements) if (ignoreEl === el || ignoreEl.contains(el)) return true;
+		return false;
+	}
+	/**
+	* Check if any element in the event path should be ignored.
+	*/
+	function shouldIgnore(path) {
+		const [selectors, elements] = resolveIgnoreTargets();
+		if (selectors.length === 0 && elements.length === 0) return false;
+		return path.some((node) => node instanceof Element && isIgnored(node, selectors, elements));
+	}
+	/**
+	* Check if the event target is outside all target elements.
+	*/
+	function isOutside(eventTarget) {
+		if (!eventTarget) return false;
+		if (!(eventTarget instanceof Node)) return false;
+		const targets = getTargets();
+		if (targets.length === 0) return false;
+		return targets.every((el) => {
+			return el !== eventTarget && !el.contains(eventTarget);
+		});
+	}
+	/**
+	* Validate that the target is still in the DOM.
+	*/
+	function isValidTarget(eventTarget) {
+		if (!(eventTarget instanceof Element)) return false;
+		if (!eventTarget.isConnected) return false;
+		return true;
+	}
+	/**
+	* Handle pointerdown - store initial target and position.
+	*/
+	function onPointerDown(event) {
+		if (isPaused.value) return;
+		if (event.defaultPrevented) return;
+		initialTarget = event.composedPath()[0] ?? event.target;
+		startPosition = {
+			x: event.clientX,
+			y: event.clientY
+		};
+	}
+	/**
+	* Handle pointerup - check if it's an outside click.
+	*/
+	function onPointerUp(event) {
+		if (isPaused.value) return;
+		if (event.defaultPrevented) return;
+		if (!initialTarget) return;
+		const pointerdownTarget = initialTarget;
+		initialTarget = null;
+		if (!isValidTarget(pointerdownTarget)) return;
+		const path = event.composedPath();
+		const pointerupTarget = path[0] ?? event.target;
+		if (event.pointerType === "touch") {
+			const dx = Math.abs(event.clientX - startPosition.x);
+			const dy = Math.abs(event.clientY - startPosition.y);
+			if (dx >= touchScrollThreshold || dy >= touchScrollThreshold) return;
+		}
+		if (isOutside(pointerdownTarget) && isOutside(pointerupTarget) && !shouldIgnore(path)) handler(event);
+	}
+	/**
+	* Handle window blur - detect focus moving to iframe.
+	*/
+	function onBlur(event) {
+		if (isPaused.value) return;
+		if (event.defaultPrevented) return;
+		if (document.activeElement instanceof HTMLIFrameElement) {
+			const iframeIsOutside = getTargets().every((el) => !el.contains(document.activeElement));
+			const [selectors, elements] = resolveIgnoreTargets();
+			if (iframeIsOutside && !isIgnored(document.activeElement, selectors, elements)) handler(event);
+		}
+	}
+	function setup() {
+		cleanupPointerDown = useDocumentEventListener("pointerdown", onPointerDown, capture);
+		cleanupPointerUp = useDocumentEventListener("pointerup", onPointerUp, capture);
+		if (!detectIframe) return;
+		cleanupBlur = useWindowEventListener("blur", onBlur, capture);
+	}
+	function cleanup() {
+		cleanupPointerDown?.();
+		cleanupPointerUp?.();
+		cleanupBlur?.();
+		cleanupPointerDown = void 0;
+		cleanupPointerUp = void 0;
+		cleanupBlur = void 0;
+	}
+	function pause() {
+		if (isPaused.value) return;
+		isPaused.value = true;
+		initialTarget = null;
+		cleanup();
+	}
+	function resume() {
+		if (!isPaused.value) return;
+		isPaused.value = false;
+		setup();
+	}
+	function stop() {
+		isPaused.value = true;
+		initialTarget = null;
+		cleanup();
+	}
+	setup();
+	onScopeDispose(stop, true);
+	return {
+		isActive: shallowReadonly(isActive),
+		isPaused: shallowReadonly(isPaused),
+		pause,
+		resume,
+		stop
+	};
+}
+
+//#endregion
+//#region src/composables/useFeatures/index.ts
 /**
 * Creates a new features instance.
 *
@@ -535,7 +679,7 @@ function useBreakpoints(namespace = "v0:breakpoints") {
 * ```
 */
 function createFeatures(_options = {}) {
-	const { features,...options } = _options;
+	const { features, ...options } = _options;
 	const tokens = createTokens(features, { flat: true });
 	const registry = createGroup(options);
 	for (const [id, { value }] of tokens.entries()) register({
@@ -589,7 +733,7 @@ function createFeatures(_options = {}) {
 * ```
 */
 function createFeaturesContext(_options = {}) {
-	const { namespace = "v0:features",...options } = _options;
+	const { namespace = "v0:features", ...options } = _options;
 	const [useFeaturesContext, _provideFeaturesContext] = createContext(namespace);
 	const context = createFeatures(options);
 	function provideFeaturesContext(_context = context, app) {
@@ -628,7 +772,7 @@ function createFeaturesContext(_options = {}) {
 * ```
 */
 function createFeaturesPlugin(_options = {}) {
-	const { namespace = "v0:features",...options } = _options;
+	const { namespace = "v0:features", ...options } = _options;
 	const [, provideFeaturesContext, context] = createFeaturesContext({
 		...options,
 		namespace
@@ -671,21 +815,6 @@ function useFeatures(namespace = "v0:features") {
 
 //#endregion
 //#region src/composables/useFilter/index.ts
-/**
-* @module useFilter
-*
-* @remarks
-* Reactive array filtering composable with multiple filter modes.
-*
-* Key features:
-* - Four filter modes: some, every, union, intersection
-* - Case-insensitive filtering
-* - Custom filter functions
-* - Reactive updates
-* - Perfect for search, multi-criteria filtering
-*
-* Filters arrays based on query strings with configurable matching strategies.
-*/
 function defaultFilter(query, item, keys, mode = "some") {
 	const queries = Array.isArray(query) ? query.map((q) => String(q).toLowerCase()) : [String(query).toLowerCase()];
 	function match(value, q) {
@@ -699,6 +828,89 @@ function defaultFilter(query, item, keys, mode = "some") {
 	return false;
 }
 /**
+* Creates a filter context with pre-configured options.
+*
+* @param options The filter options
+* @template Z The type of the items
+* @template E The type of the filter context
+* @returns A filter context
+*
+* @see https://0.vuetifyjs.com/composables/utilities/use-filter
+*
+* @example
+* ```ts
+* import { createFilter } from '@vuetify/v0'
+*
+* const filter = createFilter({
+*   mode: 'intersection',
+*   keys: ['name', 'email'],
+* })
+*
+* const { items } = filter.apply(query, users)
+* ```
+*/
+function createFilter(options = {}) {
+	const { customFilter, keys, mode = "some" } = options;
+	const filterFunction = customFilter ?? ((q, i) => defaultFilter(q, i, keys, mode));
+	const query = toRef("");
+	function apply(_query, items) {
+		const itemsRef = isRef(items) ? items : toRef(() => items);
+		const queryRef = toRef(_query);
+		return { items: computed(() => {
+			const q = toValue(queryRef);
+			query.value = q;
+			const queries = (Array.isArray(q) ? q : [q]).filter((q$1) => String(q$1).trim());
+			if (queries.length === 0) return itemsRef.value;
+			const queryParam = queries.length === 1 ? queries[0] : queries;
+			return itemsRef.value.filter((item) => filterFunction(queryParam, item));
+		}) };
+	}
+	return {
+		mode,
+		keys,
+		customFilter,
+		query,
+		apply
+	};
+}
+/**
+* Creates a filter context with dependency injection support.
+*
+* @param options The filter context options
+* @template Z The type of the items
+* @template E The type of the filter context
+* @returns A trinity tuple: [useContext, provideContext, defaultContext]
+*
+* @see https://0.vuetifyjs.com/composables/utilities/use-filter
+*
+* @example
+* ```ts
+* import { createFilterContext } from '@vuetify/v0'
+*
+* export const [useSearchFilter, provideSearchFilter, searchFilter] = createFilterContext({
+*   namespace: 'app:search',
+*   mode: 'union',
+*   keys: ['title', 'description'],
+* })
+*
+* // In parent component
+* provideSearchFilter()
+*
+* // In child component
+* const filter = useSearchFilter()
+* const { items } = filter.apply(query, products)
+* ```
+*/
+function createFilterContext(_options = {}) {
+	const { namespace = "v0:filter", ...options } = _options;
+	const [useFilterContext$1, _provideFilterContext] = createContext(namespace);
+	const context = createFilter(options);
+	function provideFilterContext(_context = context, app) {
+		return _provideFilterContext(_context, app);
+	}
+	return createTrinity(useFilterContext$1, provideFilterContext, context);
+}
+/**
 * A reusable function for filtering an array of items.
 *
 * @param query The query to filter by.
@@ -727,37 +939,34 @@ function defaultFilter(query, item, keys, mode = "some") {
 * ```
 */
 function useFilter(query, items, options = {}) {
-	const { customFilter, keys, mode = "some" } = options;
-	const filterFunction = customFilter ?? ((q, i) => defaultFilter(q, i, keys, mode));
-	const itemsRef = isRef(items) ? items : toRef(() => items);
-	const queryRef = toRef(query);
-	return { items: computed(() => {
-		const q = toValue(queryRef);
-		const queries = (Array.isArray(q) ? q : [q]).filter((q$1) => String(q$1).trim());
-		if (queries.length === 0) return itemsRef.value;
-		const queryParam = queries.length === 1 ? queries[0] : queries;
-		return itemsRef.value.filter((item) => filterFunction(queryParam, item));
-	}) };
+	return createFilter(options).apply(query, items);
 }
-
-//#endregion
-//#region src/composables/useForm/index.ts
 /**
-* @module useForm
+* Returns the current filter context from dependency injection.
+*
+* @param namespace The namespace for the filter context. Defaults to `'v0:filter'`.
+* @template Z The type of the items.
+* @template E The type of the filter context.
+* @returns The current filter context.
 *
-* @remarks
-* Form validation composable with async rule support and multiple validation modes.
+* @see https://0.vuetifyjs.com/composables/utilities/use-filter
 *
-* Key features:
-* - Sync and async validation rules
-* - Multiple validation modes (submit, change, combined)
-* - Tri-state isValid (null/true/false)
-* - isPristine tracking
-* - Silent validation mode
-* - Form-level validation and reset
+* @example
+* ```vue
+* <script setup lang="ts">
+*   import { useFilterContext } from '@vuetify/v0'
 *
-* Each field is registered with validation rules and tracks its own state independently.
+*   const filter = useFilterContext()
+*   const { items } = filter.apply(query, products)
+* <\/script>
+* ```
 */
+function useFilterContext(namespace = "v0:filter") {
+	return useContext(namespace);
+}
+
+//#endregion
+//#region src/composables/useForm/index.ts
 /**
 * Creates a new form instance.
 *
@@ -926,7 +1135,7 @@ function createForm(options) {
 * ```
 */
 function createFormContext(_options = {}) {
-	const { namespace = "v0:form",...options } = _options;
+	const { namespace = "v0:form", ...options } = _options;
 	const [useFormContext, _provideFormContext] = createContext(namespace);
 	const context = createForm(options);
 	function provideFormContext(_context = context, app) {
@@ -964,22 +1173,6 @@ function useForm(namespace = "v0:form") {
 //#endregion
 //#region src/composables/useIntersectionObserver/index.ts
 /**
-* @module useIntersectionObserver
-*
-* @remarks
-* IntersectionObserver composable with lifecycle management.
-*
-* Key features:
-* - IntersectionObserver API wrapper
-* - Pause/resume/stop functionality
-* - Automatic cleanup on unmount
-* - SSR-safe (checks SUPPORTS_INTERSECTION_OBSERVER)
-* - Hydration-aware
-* - Immediate callback option
-*
-* Perfect for lazy loading, infinite scroll, and visibility detection.
-*/
-/**
 * A composable that uses the Intersection Observer API to detect when an element
 * is visible in the viewport.
 *
@@ -1020,12 +1213,14 @@ function useForm(namespace = "v0:form") {
 */
 function useIntersectionObserver(target, callback, options = {}) {
 	const { isHydrated } = useHydration();
+	const targetRef = isRef(target) ? target : shallowRef(target);
 	const observer = shallowRef();
 	const isPaused = shallowRef(false);
 	const isIntersecting = shallowRef(false);
 	const isActive = toRef(() => !!observer.value);
 	function setup() {
-		if (!isHydrated.value || !SUPPORTS_INTERSECTION_OBSERVER || !target.value || isPaused.value) return;
+		if (observer.value === null) return;
+		if (!isHydrated.value || !SUPPORTS_INTERSECTION_OBSERVER || !targetRef.value || isPaused.value) return;
 		observer.value = new IntersectionObserver((entries) => {
 			const transformedEntries = entries.map((entry) => ({
 				boundingClientRect: entry.boundingClientRect,
@@ -1039,26 +1234,29 @@ function useIntersectionObserver(target, callback, options = {}) {
 			const latestEntry = transformedEntries.at(-1);
 			if (latestEntry) isIntersecting.value = latestEntry.isIntersecting;
 			callback(transformedEntries);
+			if (options.once && latestEntry?.isIntersecting) stop();
 		}, {
 			root: options.root || null,
 			rootMargin: options.rootMargin || "0px",
 			threshold: options.threshold || 0
 		});
-		observer.value.observe(target.value);
+		observer.value.observe(targetRef.value);
 		if (options.immediate) callback([{
-			boundingClientRect: target.value.getBoundingClientRect(),
+			boundingClientRect: targetRef.value.getBoundingClientRect(),
 			intersectionRatio: 0,
 			intersectionRect: new DOMRect(0, 0, 0, 0),
 			isIntersecting: false,
 			rootBounds: null,
-			target: target.value,
+			target: targetRef.value,
 			time: performance.now()
 		}]);
 	}
-	watch([isHydrated, target], () => {
+	watchEffect(() => {
+		const hydrated = isHydrated.value;
+		const target$1 = targetRef.value;
 		cleanup();
-		setup();
-	}, { immediate: true });
+		if (hydrated && target$1) setup();
+	});
 	function cleanup() {
 		if (observer.value) {
 			observer.value.disconnect();
@@ -1076,6 +1274,7 @@ function useIntersectionObserver(target, callback, options = {}) {
 	}
 	function stop() {
 		cleanup();
+		observer.value = null;
 	}
 	onScopeDispose(stop, true);
 	return {
@@ -1147,20 +1346,6 @@ function useElementIntersection(target, options = {}) {
 //#endregion
 //#region src/composables/useKeydown/index.ts
 /**
-* @module useKeydown
-*
-* @remarks
-* Keydown event listener composable with key filtering.
-*
-* Key features:
-* - Key-specific event handling
-* - preventDefault and stopPropagation options
-* - Automatic cleanup on scope disposal
-* - Built on useEventListener for consistent event handling
-*
-* Simplified wrapper around useEventListener for keyboard interactions.
-*/
-/**
 * A composable that adds a keydown event listener to the document.
 *
 * @param handlers The key handlers to add.
@@ -1172,6 +1357,10 @@ function useElementIntersection(target, options = {}) {
 * ```ts
 * import { useKeydown } from '@vuetify/v0'
 *
+* // Single handler
+* useKeydown({ key: 'Escape', handler: () => console.log('Escape pressed') })
+*
+* // Multiple handlers
 * const { isActive, start, stop } = useKeydown([
 *   { key: 'Enter', handler: () => console.log('Enter pressed') },
 *   { key: 'Escape', handler: () => console.log('Escape pressed'), preventDefault: true },
@@ -1216,22 +1405,6 @@ function useKeydown(handlers) {
 //#endregion
 //#region src/composables/useMutationObserver/index.ts
 /**
-* @module useMutationObserver
-*
-* @remarks
-* MutationObserver composable with lifecycle management.
-*
-* Key features:
-* - MutationObserver API wrapper
-* - Pause/resume/stop functionality
-* - Automatic cleanup on unmount
-* - SSR-safe (checks SUPPORTS_MUTATION_OBSERVER)
-* - Hydration-aware
-* - Configurable observation options (childList, attributes, characterData, etc.)
-*
-* Perfect for detecting DOM changes and responding to mutations.
-*/
-/**
 * A composable that uses the Mutation Observer API to detect changes in the DOM.
 *
 * @param target The element to observe.
@@ -1278,7 +1451,7 @@ function useMutationObserver(target, callback, options = {}) {
 	const { isHydrated } = useHydration();
 	const observer = shallowRef();
 	const isPaused = shallowRef(false);
-	const isActive = computed(() => !!observer.value);
+	const isActive = toRef(() => !!observer.value);
 	const observerOptions = {
 		childList: options.childList ?? true,
 		attributes: options.attributes ?? false,
@@ -1289,6 +1462,7 @@ function useMutationObserver(target, callback, options = {}) {
 		attributeFilter: options.attributeFilter
 	};
 	function setup() {
+		if (observer.value === null) return;
 		if (!isHydrated.value || !SUPPORTS_MUTATION_OBSERVER || !target.value || isPaused.value) return;
 		observer.value = new MutationObserver((mutations) => {
 			callback(mutations.map((mutation) => ({
@@ -1302,6 +1476,7 @@ function useMutationObserver(target, callback, options = {}) {
 				attributeNamespace: mutation.attributeNamespace,
 				oldValue: mutation.oldValue
 			})));
+			if (options.once) stop();
 		});
 		observer.value.observe(target.value, observerOptions);
 		if (options.immediate) {
@@ -1322,12 +1497,15 @@ function useMutationObserver(target, callback, options = {}) {
 				attributeNamespace: null,
 				oldValue: null
 			}]);
+			if (options.once) stop();
 		}
 	}
-	watch([isHydrated, target], () => {
+	watchEffect(() => {
+		const hydrated = isHydrated.value;
+		const el = target.value;
 		cleanup();
-		setup();
-	}, { immediate: true });
+		if (hydrated && el) setup();
+	});
 	function cleanup() {
 		if (observer.value) {
 			observer.value.disconnect();
@@ -1344,6 +1522,7 @@ function useMutationObserver(target, callback, options = {}) {
 	}
 	function stop() {
 		cleanup();
+		observer.value = null;
 	}
 	onScopeDispose(stop, true);
 	return {
@@ -1376,23 +1555,6 @@ var Vuetify0PermissionAdapter = class extends PermissionAdapter {
 //#endregion
 //#region src/composables/usePermissions/index.ts
 /**
-* @module usePermissions
-*
-* @see https://0.vuetifyjs.com/composables/plugins/use-permissions
-*
-* @remarks
-* Permission management composable with support for RBAC and ABAC patterns.
-*
-* Key features:
-* - Role-Based Access Control (RBAC) support
-* - Attribute-Based Access Control (ABAC) with context
-* - Functional permission conditions
-* - Token-based permission storage
-* - Adapter pattern for custom permission systems
-*
-* Built on useTokens for flexible permission configuration.
-*/
-/**
 * Creates a new permissions instance.
 *
 * @param options The options for the permissions instance.
@@ -1416,7 +1578,7 @@ var Vuetify0PermissionAdapter = class extends PermissionAdapter {
 * ```
 */
 function createPermissions(_options = {}) {
-	const { adapter = new Vuetify0PermissionAdapter(), permissions = {},...options } = _options;
+	const { adapter = new Vuetify0PermissionAdapter(), permissions = {}, ...options } = _options;
 	const record = {};
 	for (const role in permissions) {
 		if (!record[role]) record[role] = {};
@@ -1458,7 +1620,7 @@ function createPermissions(_options = {}) {
 * ```
 */
 function createPermissionsContext(_options = {}) {
-	const { namespace = "v0:permissions",...options } = _options;
+	const { namespace = "v0:permissions", ...options } = _options;
 	const [usePermissionsContext, _providePermissionsContext] = createContext(namespace);
 	const context = createPermissions(options);
 	function providePermissionsContext(_context = context, app) {
@@ -1497,7 +1659,7 @@ function createPermissionsContext(_options = {}) {
 * ```
 */
 function createPermissionsPlugin(_options = {}) {
-	const { namespace = "v0:permissions",...options } = _options;
+	const { namespace = "v0:permissions", ...options } = _options;
 	const [, providePermissionContext, context] = createPermissionsContext({
 		...options,
 		namespace
@@ -1539,21 +1701,6 @@ function usePermissions(namespace = "v0:permissions") {
 //#endregion
 //#region src/composables/useQueue/index.ts
 /**
-* @module useQueue
-*
-* @remarks
-* A queue composable for managing time-based collections with:
-* - Automatic timeout-based removal
-* - Pause/resume functionality
-* - FIFO (First In, First Out) ordering
-* - Manual dismissal support
-* - Queue progression management
-*
-* Built on top of useRegistry, the queue automatically manages timeouts for tickets,
-* ensuring only the first ticket in the queue is active at any time. When an ticket
-* expires or is removed, the next ticket in the queue automatically becomes active.
-*/
-/**
 * Creates a new queue instance
 *
 * @param options The options for the queue instance
@@ -1585,7 +1732,7 @@ function usePermissions(namespace = "v0:permissions") {
 * ```
 */
 function createQueue(_options = {}) {
-	const { timeout: _timeout = 3e3,...options } = _options;
+	const { timeout: _timeout = 3e3, ...options } = _options;
 	const registry = useRegistry({
 		...options,
 		events: true
@@ -1680,7 +1827,6 @@ function createQueue(_options = {}) {
 /**
 * Creates a new queue context.
 *
-* @param namespace The namespace for the queue context.
 * @param options The options for the queue context.
 * @template Z The type of the queue ticket.
 * @template E The type of the queue context.
@@ -1692,13 +1838,13 @@ function createQueue(_options = {}) {
 * ```ts
 * import { createQueueContext } from '@vuetify/v0'
 *
-* export const [useQueue, provideQueue] = createQueueContext('v0:queue', {
+* export const [useQueue, provideQueue, context] = createQueueContext({
 *   timeout: 5000,
 * })
 * ```
 */
-function createQueueContext(_options) {
-	const { namespace,...options } = _options;
+function createQueueContext(_options = {}) {
+	const { namespace = "v0:queue", ...options } = _options;
 	const [useQueueContext, _provideQueueContext] = createContext(namespace);
 	const context = createQueue(options);
 	function provideQueueContext(_context = context, app) {
@@ -1756,21 +1902,6 @@ var MemoryAdapter = class {
 //#endregion
 //#region src/composables/useStorage/index.ts
 /**
-* @module useStorage
-*
-* @remarks
-* Reactive storage composable with adapter pattern for localStorage, sessionStorage, or memory.
-*
-* Key features:
-* - Reactive refs that sync with storage
-* - localStorage, sessionStorage, and memory adapters
-* - Custom serialization support
-* - SSR fallback to memory adapter
-* - Automatic cleanup on remove/clear
-*
-* Uses adapter pattern to abstract storage implementation details.
-*/
-/**
 * Creates a new storage instance.
 *
 * @param options The options for the storage instance.
@@ -1856,7 +1987,7 @@ function createStorage(options = {}) {
 	};
 }
 function createStorageContext(_options = {}) {
-	const { namespace = "v0:storage",...options } = _options;
+	const { namespace = "v0:storage", ...options } = _options;
 	const [useStorageContext, _provideStorageContext] = createContext(namespace);
 	const context = createStorage(options);
 	function provideStorageContext(_context = context, app) {
@@ -1886,7 +2017,7 @@ function createStorageContext(_options = {}) {
 * ```
 */
 function createStoragePlugin(_options = {}) {
-	const { namespace = "v0:storage",...options } = _options;
+	const { namespace = "v0:storage", ...options } = _options;
 	const [, provideStorageContext, context] = createStorageContext({
 		...options,
 		namespace
@@ -2007,24 +2138,6 @@ var Vuetify0ThemeAdapter = class extends ThemeAdapter {
 //#endregion
 //#region src/composables/useTheme/index.ts
 /**
-* @module useTheme
-*
-* @see https://0.vuetifyjs.com/composables/plugins/use-theme
-*
-* @remarks
-* Theme management composable with token resolution and CSS variable injection.
-*
-* Key features:
-* - Single-selection theme switching (extends createSingle)
-* - Token alias resolution via useTokens
-* - Lazy theme loading (compute colors only when selected)
-* - CSS variable generation via adapter pattern
-* - SSR support with head integration
-* - Theme cycling
-*
-* Integrates with createSingle for selection and useTokens for color resolution.
-*/
-/**
 * Creates a new theme instance.
 *
 * @param options The options for the theme instance.
@@ -2059,14 +2172,14 @@ var Vuetify0ThemeAdapter = class extends ThemeAdapter {
 * ```
 */
 function createTheme(_options = {}) {
-	const { themes = {}, palette = {},...options } = _options;
+	const { themes = {}, palette = {}, ...options } = _options;
 	const tokens = createTokens({
 		palette,
 		...themes
 	}, { flat: true });
 	const registry = createSingle(options);
 	for (const id in themes) {
-		const { colors: value,...theme } = themes[id];
+		const { colors: value, ...theme } = themes[id];
 		register({
 			id,
 			value,
@@ -2148,7 +2261,7 @@ function createTheme(_options = {}) {
 * ```
 */
 function createThemeContext(_options = {}) {
-	const { namespace = "v0:theme",...options } = _options;
+	const { namespace = "v0:theme", ...options } = _options;
 	const [useThemeContext, _provideThemeContext] = createContext(namespace);
 	const context = createTheme(options);
 	function provideThemeContext(_context = context, app) {
@@ -2198,7 +2311,7 @@ function createThemeContext(_options = {}) {
 * ```
 */
 function createThemePlugin(_options = {}) {
-	const { adapter = new Vuetify0ThemeAdapter(), namespace = "v0:theme", palette = {}, themes = {}, target,...options } = _options;
+	const { adapter = new Vuetify0ThemeAdapter(), namespace = "v0:theme", palette = {}, themes = {}, target, ...options } = _options;
 	const [, provideThemeContext, context] = createThemeContext({
 		...options,
 		namespace,
@@ -2245,21 +2358,6 @@ function useTheme(namespace = "v0:theme") {
 //#endregion
 //#region src/composables/useTimeline/index.ts
 /**
-* @module useTimeline
-*
-* @remarks
-* Bounded undo/redo system with overflow management.
-*
-* Key features:
-* - Fixed-size history (default: 10 items)
-* - Undo/redo stack management
-* - Overflow queue (preserves oldest items)
-* - Automatic reindexing after operations
-* - Perfect for command pattern, history tracking
-*
-* Extends useRegistry with temporal navigation capabilities.
-*/
-/**
 * Creates a new timeline instance.
 *
 * @param _options The options for the timeline instance.
@@ -2287,7 +2385,7 @@ function useTheme(namespace = "v0:theme") {
 * ```
 */
 function createTimeline(_options = {}) {
-	const { size = 10,...options } = _options;
+	const { size = 10, ...options } = _options;
 	const registry = useRegistry(options);
 	const stack = [];
 	const overflow = [];
@@ -2362,7 +2460,7 @@ function createTimeline(_options = {}) {
 * ```
 */
 function createTimelineContext(_options = {}) {
-	const { namespace = "v0:timeline",...options } = _options;
+	const { namespace = "v0:timeline", ...options } = _options;
 	const [useTimelineContext, _provideTimelineContext] = createContext(namespace);
 	const context = createTimeline(options);
 	function provideTimelineContext(_context = context, app) {
@@ -2394,24 +2492,6 @@ function useTimeline(namespace = "v0:timeline") {
 //#endregion
 //#region src/composables/useToggleScope/index.ts
 /**
-* @module useToggleScope
-*
-* @remarks
-* Conditionally manages an effect scope based on a reactive boolean condition.
-* When the source becomes true, creates and runs an effect scope. When false, stops the scope.
-* All reactive effects created within the scoped function are automatically cleaned up on deactivation.
-*
-* Key features:
-* - Uses Vue's effectScope for efficient reactive effect lifecycle management
-* - Automatic cleanup when condition becomes false
-* - Supports optional reset callback for scope restart capability
-* - Handles rapid toggling and parent scope disposal safely
-* - SSR-safe (effectScope is part of Vue core)
-*
-* Perfect for conditional side effects, feature flags, and performance optimization
-* by only running reactive effects when needed.
-*/
-/**
 * Conditionally manages an effect scope based on a reactive boolean source.
 *
 * @param source A reactive boolean value or getter that controls the scope lifecycle
@@ -2493,24 +2573,6 @@ function useToggleScope(source, fn) {
 //#endregion
 //#region src/composables/useVirtual/index.ts
 /**
-* @module useVirtual
-*
-* @remarks
-* Virtual scrolling composable for efficiently rendering large lists.
-*
-* Key features:
-* - Renders only visible items (viewport + overscan)
-* - Dynamic or fixed item heights
-* - SSR-safe (checks IN_BROWSER)
-* - Bidirectional scrolling (forward/reverse for chat apps)
-* - Scroll anchoring (maintains position across data changes)
-* - Edge detection for infinite scroll
-* - iOS momentum and elastic scrolling
-* - Configurable overscan (extra items rendered for smooth scrolling)
-*
-* Perfect for large data sets, chat apps, and infinite scroll implementations.
-*/
-/**
 * Virtual scrolling composable for efficiently rendering large lists
 *
 * @param items Reactive array of items to virtualize
@@ -2747,6 +2809,11 @@ function useVirtual(items, _options = {}) {
 			element.value.scrollTop = totalHeight;
 		}
 	}
+	onScopeDispose(() => {
+		cancelAnimationFrame(raf);
+		cancelAnimationFrame(rebuildRaf);
+		cancelAnimationFrame(edgeRaf);
+	}, true);
 	return {
 		element,
 		items: computedItems,
@@ -2762,4 +2829,4 @@ function useVirtual(items, _options = {}) {
 }
 
 //#endregion
-export { useForm as A, useDocumentEventListener as B, PermissionAdapter as C, useIntersectionObserver as D, useElementIntersection as E, useFeatures as F, useWindowEventListener as H, createBreakpoints as I, createBreakpointsContext as L, createFeatures as M, createFeaturesContext as N, createForm as O, createFeaturesPlugin as P, createBreakpointsPlugin as R, usePermissions as S, useKeydown as T, toReactive as U, useEventListener as V, createQueueContext as _, useTimeline as a, createPermissionsContext as b, createThemePlugin as c, createStorage as d, createStorageContext as f, createQueue as g, MemoryAdapter as h, createTimelineContext as i, useFilter as j, createFormContext as k, useTheme as l, useStorage as m, useToggleScope as n, createTheme as o, createStoragePlugin as p, createTimeline as r, createThemeContext as s, useVirtual as t, Vuetify0ThemeAdapter as u, useQueue as v, useMutationObserver as w, createPermissionsPlugin as x, createPermissions as y, useBreakpoints as z };
+export { useForm as A, createBreakpoints as B, PermissionAdapter as C, useIntersectionObserver as D, useElementIntersection as E, createFeatures as F, useEventListener as G, createBreakpointsPlugin as H, createFeaturesContext as I, useWindowEventListener as K, createFeaturesPlugin as L, createFilterContext as M, useFilter as N, createForm as O, useFilterContext as P, useFeatures as R, usePermissions as S, useKeydown as T, useBreakpoints as U, createBreakpointsContext as V, useDocumentEventListener as W, createQueueContext as _, useTimeline as a, createPermissionsContext as b, createThemePlugin as c, createStorage as d, createStorageContext as f, createQueue as g, MemoryAdapter as h, createTimelineContext as i, createFilter as j, createFormContext as k, useTheme as l, useStorage as m, useToggleScope as n, createTheme as o, createStoragePlugin as p, toReactive as q, createTimeline as r, createThemeContext as s, useVirtual as t, Vuetify0ThemeAdapter as u, useQueue as v, useMutationObserver as w, createPermissionsPlugin as x, createPermissions as y, useClickOutside as z };