@vuetify/v0 0.0.15 → 0.0.16

package/dist/composables-YOUVfUsn.mjs

@@ -0,0 +1,2765 @@
+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";
+
+//#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.
+* @template Z The type of the object.
+* @returns The converted object.
+*
+* @see https://0.vuetifyjs.com/composables/transformers/to-reactive
+*
+* @example
+* ```ts
+* import { ref } from 'vue'
+* import { toReactive } from '@vuetify/v0'
+*
+* const state = ref({ name: 'John', age: 30 })
+* const rstate = toReactive(state)
+*
+* console.log(rstate.name) // John
+* ```
+*/
+function toReactive(objectRef) {
+	if (!isRef(objectRef)) return reactive(objectRef);
+	const target = objectRef.value;
+	if (target instanceof Map) {
+		const mapProxy = new Proxy(/* @__PURE__ */ new Map(), { get(_, p) {
+			const map = objectRef.value;
+			if (p === "get") return (key) => unref(map.get(key));
+			if (p === "set") return (key, value) => {
+				const existingValue = map.get(key);
+				if (isRef(existingValue)) existingValue.value = unref(value);
+				else map.set(key, value);
+				return mapProxy;
+			};
+			if (p === "has") return (key) => map.has(key);
+			if (p === "delete") return (key) => map.delete(key);
+			if (p === "clear") return () => map.clear();
+			if (p === "size") return map.size;
+			if (p === "keys") return () => map.keys();
+			if (p === "values") return function* () {
+				for (const value of map.values()) yield unref(value);
+			};
+			if (p === "entries") return function* () {
+				for (const [key, value] of map.entries()) yield [key, unref(value)];
+			};
+			if (p === "forEach") return (callback, thisArg) => {
+				for (const [key, value] of map.entries()) callback.call(thisArg, unref(value), key, mapProxy);
+			};
+			if (p === Symbol.iterator) return function* () {
+				for (const [key, value] of map.entries()) yield [key, unref(value)];
+			};
+			return Reflect.get(map, p);
+		} });
+		return reactive(mapProxy);
+	}
+	if (target instanceof Set) {
+		const setProxy = new Proxy(/* @__PURE__ */ new Set(), { get(_, p) {
+			const set = objectRef.value;
+			if (p === "add") return (value) => {
+				set.add(value);
+				return setProxy;
+			};
+			if (p === "has") return (value) => set.has(value);
+			if (p === "delete") return (value) => set.delete(value);
+			if (p === "clear") return () => set.clear();
+			if (p === "size") return set.size;
+			if (p === "keys" || p === "values") return function* () {
+				for (const value of set.values()) yield unref(value);
+			};
+			if (p === "entries") return function* () {
+				for (const value of set.values()) {
+					const unreffedValue = unref(value);
+					yield [unreffedValue, unreffedValue];
+				}
+			};
+			if (p === "forEach") return (callback, thisArg) => {
+				for (const value of set) {
+					const unreffedValue = unref(value);
+					callback.call(thisArg, unreffedValue, unreffedValue, setProxy);
+				}
+			};
+			if (p === Symbol.iterator) return function* () {
+				for (const value of set.values()) yield unref(value);
+			};
+			return Reflect.get(set, p);
+		} });
+		return reactive(setProxy);
+	}
+	return reactive(new Proxy({}, {
+		get(_, p, receiver) {
+			return unref(Reflect.get(objectRef.value, p, receiver));
+		},
+		set(_, p, value) {
+			const currentTarget = objectRef.value;
+			currentTarget[p] = value;
+			return true;
+		},
+		deleteProperty(_, p) {
+			return Reflect.deleteProperty(objectRef.value, p);
+		},
+		has(_, p) {
+			return Reflect.has(objectRef.value, p);
+		},
+		ownKeys() {
+			return Object.keys(objectRef.value);
+		},
+		getOwnPropertyDescriptor(_, p) {
+			const desc = Reflect.getOwnPropertyDescriptor(objectRef.value, p);
+			if (!desc) return;
+			const newDesc = {
+				...desc,
+				configurable: true
+			};
+			if ("value" in newDesc) newDesc.value = unref(newDesc.value);
+			return newDesc;
+		}
+	}));
+}
+
+//#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.
+* @param event The event to listen for.
+* @param listener The event listener.
+* @param options The event listener options.
+* @returns A function to remove the event listener.
+*
+* @see https://0.vuetifyjs.com/composables/system/use-event-listener
+*/
+function useEventListener(target, event, listener, options) {
+	const cleanups = [];
+	function cleanup() {
+		for (const fn of cleanups) fn();
+		cleanups.length = 0;
+	}
+	function register(el, event$1, listener$1, options$1) {
+		el.addEventListener(event$1, listener$1, options$1);
+		return () => el.removeEventListener(event$1, listener$1, options$1);
+	}
+	const stopWatcher = watch(() => [
+		toValue(target),
+		toValue(event),
+		unref(listener),
+		toValue(options)
+	], ([el, events, listeners, opts]) => {
+		cleanup();
+		if (!el) return;
+		const eventList = toArray(events);
+		const listenerList = toArray(listeners);
+		for (const event$1 of eventList) for (const listenerFn of listenerList) cleanups.push(register(el, event$1, listenerFn, opts));
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	function stop() {
+		stopWatcher();
+		cleanup();
+	}
+	onScopeDispose(stop, true);
+	return stop;
+}
+/**
+* Attaches an event listener to the window.
+*
+* @param event The event to listen for.
+* @param listener The event listener.
+* @param options The event listener options.
+* @template E The event type.
+* @returns A function to remove the event listener.
+*
+* @see https://0.vuetifyjs.com/composables/system/use-event-listener
+*/
+function useWindowEventListener(event, listener, options) {
+	return useEventListener(window, event, listener, options);
+}
+/**
+* Attaches an event listener to the document.
+*
+* @param event The event to listen for.
+* @param listener The event listener.
+* @param options The event listener options.
+* @template E The event type.
+* @returns A function to remove the event listener.
+*
+* @see https://0.vuetifyjs.com/composables/system/use-event-listener
+*/
+function useDocumentEventListener(event, listener, options) {
+	return 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.
+*/
+function createDefaultBreakpoints() {
+	return {
+		mobileBreakpoint: "md",
+		breakpoints: {
+			xs: 0,
+			sm: 600,
+			md: 960,
+			lg: 1280,
+			xl: 1920,
+			xxl: 2560
+		}
+	};
+}
+/**
+* Creates a new breakpoints instance.
+*
+* @param options The options for the breakpoints instance.
+* @template E The type of the breakpoints context.
+* @returns A new breakpoints instance.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-breakpoints
+*
+* @example
+* ```ts
+* import { createBreakpoints } from '@vuetify/v0'
+*
+* export const [useBreakpoints, provideBreakpoints] = createBreakpoints({
+*   namespace: 'v0:breakpoints',
+*   mobileBreakpoint: 'sm',
+*   breakpoints: {
+*     xs: 0,
+*     sm: 680,
+*     md: 1024,
+*     lg: 1280,
+*     xl: 1920,
+*     xxl: 2560,
+*   },
+* })
+* ```
+*/
+function createBreakpoints(_options = {}) {
+	const { mobileBreakpoint, breakpoints } = /* @__PURE__ */ mergeDeep(createDefaultBreakpoints(), _options);
+	const sorted = Object.entries(breakpoints).toSorted((a, b) => a[1] - b[1]);
+	const names = sorted.map(([n]) => n);
+	const mb = /* @__PURE__ */ isNumber(mobileBreakpoint) ? mobileBreakpoint : breakpoints[mobileBreakpoint] ?? breakpoints.md;
+	const name = shallowRef("xs");
+	const width = shallowRef(0);
+	const height = shallowRef(0);
+	const isMobile = shallowRef(true);
+	const xs = shallowRef(true);
+	const sm = shallowRef(false);
+	const md = shallowRef(false);
+	const lg = shallowRef(false);
+	const xl = shallowRef(false);
+	const xxl = shallowRef(false);
+	const smAndUp = shallowRef(false);
+	const mdAndUp = shallowRef(false);
+	const lgAndUp = shallowRef(false);
+	const xlAndUp = shallowRef(false);
+	const xxlAndUp = shallowRef(false);
+	const smAndDown = shallowRef(true);
+	const mdAndDown = shallowRef(true);
+	const lgAndDown = shallowRef(true);
+	const xlAndDown = shallowRef(true);
+	const xxlAndDown = shallowRef(true);
+	function update() {
+		if (!IN_BROWSER) return;
+		width.value = window.innerWidth;
+		height.value = window.innerHeight;
+		let current = "xs";
+		for (let i = sorted.length - 1; i >= 0; i--) if (width.value >= sorted[i][1]) {
+			current = sorted[i][0];
+			break;
+		}
+		name.value = current;
+		const index = names.indexOf(current);
+		isMobile.value = width.value < mb;
+		xs.value = index === 0;
+		sm.value = index === 1;
+		md.value = index === 2;
+		lg.value = index === 3;
+		xl.value = index === 4;
+		xxl.value = index === 5;
+		smAndUp.value = index >= 1;
+		mdAndUp.value = index >= 2;
+		lgAndUp.value = index >= 3;
+		xlAndUp.value = index >= 4;
+		xxlAndUp.value = index >= 5;
+		smAndDown.value = index <= 1;
+		mdAndDown.value = index <= 2;
+		lgAndDown.value = index <= 3;
+		xlAndDown.value = index <= 4;
+		xxlAndDown.value = index <= 5;
+	}
+	return {
+		breakpoints,
+		name: readonly(name),
+		width: readonly(width),
+		height: readonly(height),
+		isMobile: readonly(isMobile),
+		xs: readonly(xs),
+		sm: readonly(sm),
+		md: readonly(md),
+		lg: readonly(lg),
+		xl: readonly(xl),
+		xxl: readonly(xxl),
+		smAndUp: readonly(smAndUp),
+		mdAndUp: readonly(mdAndUp),
+		lgAndUp: readonly(lgAndUp),
+		xlAndUp: readonly(xlAndUp),
+		xxlAndUp: readonly(xxlAndUp),
+		smAndDown: readonly(smAndDown),
+		mdAndDown: readonly(mdAndDown),
+		lgAndDown: readonly(lgAndDown),
+		xlAndDown: readonly(xlAndDown),
+		xxlAndDown: readonly(xxlAndDown),
+		update
+	};
+}
+/**
+* Creates a new breakpoints context.
+*
+* @param options The options for the breakpoints context.
+* @template E The type of the breakpoints context.
+* @returns A new breakpoints context.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-breakpoints
+*
+* @example
+* ```ts
+* import { createBreakpointsContext } from '@vuetify/v0'
+*
+* export const [useBreakpoints, provideBreakpoints, context] = createBreakpointsContext({
+*   namespace: 'v0:breakpoints',
+*   mobileBreakpoint: 'sm',
+* })
+* ```
+*/
+function createBreakpointsContext(_options = {}) {
+	const { namespace = "v0:breakpoints",...options } = _options;
+	const [useBreakpointsContext, _provideBreakpointsContext] = createContext(namespace);
+	const context = createBreakpoints(options);
+	function provideBreakpointsContext(_context = context, app) {
+		return _provideBreakpointsContext(_context, app);
+	}
+	return createTrinity(useBreakpointsContext, provideBreakpointsContext, context);
+}
+/**
+* Creates a new breakpoints plugin.
+*
+* @param options The options for the breakpoints plugin.
+* @template E The type of the breakpoints context.
+* @returns A new breakpoints plugin.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-breakpoints
+*
+* @example
+* ```ts
+* import { createApp } from 'vue'
+* import { createBreakpointsPlugin } from '@vuetify/v0'
+* import App from './App.vue'
+*
+* const app = createApp(App)
+*
+* app.use(
+*   createBreakpointsPlugin({
+*     namespace: 'v0:breakpoints',
+*     mobileBreakpoint: 'sm',
+*     breakpoints: {
+*       xs: 0,
+*       sm: 680,
+*       md: 1024,
+*       lg: 1280,
+*       xl: 1920,
+*       xxl: 2560,
+*     },
+*   })
+* )
+*
+* app.mount('#app')
+* ```
+*/
+function createBreakpointsPlugin(_options = {}) {
+	const { namespace = "v0:breakpoints",...options } = _options;
+	const [, provideBreakpointsContext, context] = createBreakpointsContext({
+		...options,
+		namespace
+	});
+	return createPlugin({
+		namespace,
+		provide: (app) => {
+			provideBreakpointsContext(context, app);
+		},
+		setup: (app) => {
+			app.mixin({ mounted() {
+				if (this.$parent !== null) return;
+				const hydration = useHydration();
+				function listener() {
+					context.update();
+				}
+				const unwatch = watch(hydration.isHydrated, (hydrated) => {
+					if (hydrated) listener();
+				}, { immediate: true });
+				const cleanup = useWindowEventListener("resize", listener, { passive: true });
+				onScopeDispose(() => {
+					cleanup();
+					unwatch();
+				}, true);
+			} });
+		}
+	});
+}
+/**
+* Returns the current breakpoints instance.
+*
+* @param namespace The namespace for the breakpoints context. Defaults to `v0:breakpoints`.
+* @returns The current breakpoints instance.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-breakpoints
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+*   import { useBreakpoints } from '@vuetify/v0'
+*
+*   const { isMobile, mdAndUp } = useBreakpoints()
+* <\/script>
+*
+* <template>
+*   <div class="pa-4">
+*     <p v-if="isMobile.value">Mobile layout active</p>
+*     <p v-else-if="mdAndUp.value">Medium and up layout active</p>
+*   </div>
+* </template>
+* ```
+*/
+function useBreakpoints(namespace = "v0:breakpoints") {
+	return useContext(namespace);
+}
+
+//#endregion
+//#region src/composables/useFeatures/index.ts
+/**
+* @module useFeatures
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-features
+*
+* @remarks
+* Feature flag system with boolean and token-based features.
+*
+* 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
+*
+* Inheritance chain: useRegistry → createSelection → createGroup → createFeatures
+* Integrates with useTokens for token-based features.
+*/
+/**
+* Creates a new features instance.
+*
+* @param options The options for the features instance.
+* @template Z The type of the feature ticket.
+* @template E The type of the feature context.
+* @returns A new features instance.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-features
+*
+* @example
+* ```ts
+* import { createFeatures } from '@vuetify/v0'
+*
+* const [useFeatures, provideFeaturesContext, context] = createFeatures({
+*   namespace: 'v0:features',
+*   features: {
+*     'dark-mode': true,
+*     'theme-color': { $variation: 'blue' },
+*   },
+* })
+* ```
+*/
+function createFeatures(_options = {}) {
+	const { features,...options } = _options;
+	const tokens = createTokens(features, { flat: true });
+	const registry = createGroup(options);
+	for (const [id, { value }] of tokens.entries()) register({
+		id,
+		value
+	});
+	function variation(id, fallback = null) {
+		const ticket = registry.get(id);
+		if (!ticket) return fallback;
+		return /* @__PURE__ */ isObject(ticket.value) ? ticket.value.$variation ?? fallback : ticket.value ?? fallback;
+	}
+	function register(registration = {}) {
+		const item = {
+			value: false,
+			...registration
+		};
+		const ticket = registry.register(item);
+		if (/* @__PURE__ */ isBoolean(ticket.value) && ticket.value === true || /* @__PURE__ */ isObject(ticket.value) && /* @__PURE__ */ isBoolean(ticket.value.$value) && ticket.value.$value === true) registry.select(ticket.id);
+		return ticket;
+	}
+	return {
+		...registry,
+		variation,
+		register,
+		get size() {
+			return registry.size;
+		}
+	};
+}
+/**
+* Creates a new features context.
+*
+* @param options The options for the features context.
+* @template Z The type of the feature ticket.
+* @template E The type of the feature context.
+* @returns A new features context.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-features
+*
+* @example
+* ```ts
+* import { createFeaturesContext } from '@vuetify/v0'
+*
+* export const [useFeatures, provideFeatures, context] = createFeaturesContext({
+*   namespace: 'app:features',
+*   features: {
+*     'dark-mode': true,
+*     'theme-color': { $variation: 'blue' },
+*   },
+* })
+* ```
+*/
+function createFeaturesContext(_options = {}) {
+	const { namespace = "v0:features",...options } = _options;
+	const [useFeaturesContext, _provideFeaturesContext] = createContext(namespace);
+	const context = createFeatures(options);
+	function provideFeaturesContext(_context = context, app) {
+		return _provideFeaturesContext(_context, app);
+	}
+	return createTrinity(useFeaturesContext, provideFeaturesContext, context);
+}
+/**
+* Creates a new features plugin.
+*
+* @param options The options for the features plugin.
+* @template Z The type of the feature ticket.
+* @template E The type of the feature context.
+* @returns A new features plugin.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-features
+*
+* @example
+* ```ts
+* import { createApp } from 'vue'
+* import { createFeaturesPlugin } from '@vuetify/v0'
+* import App from './App.vue'
+*
+* const app = createApp(App)
+*
+* app.use(
+*   createFeaturesPlugin({
+*     features: {
+*       'dark-mode': true,
+*       'theme-color': { $variation: 'blue' },
+*     },
+*   })
+* )
+*
+* app.mount('#app')
+* ```
+*/
+function createFeaturesPlugin(_options = {}) {
+	const { namespace = "v0:features",...options } = _options;
+	const [, provideFeaturesContext, context] = createFeaturesContext({
+		...options,
+		namespace
+	});
+	return createPlugin({
+		namespace,
+		provide: (app) => {
+			provideFeaturesContext(context, app);
+		}
+	});
+}
+/**
+* Returns the current features instance.
+*
+* @param namespace The namespace for the features context. Defaults to `v0:features`.
+* @template Z The type of the feature ticket.
+* @returns The current features instance.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-features
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+*   import { useFeatures } from '@vuetify/v0'
+*
+*   const features = useFeatures()
+* <\/script>
+*
+* <template>
+*   <div>
+*     <p>Features: {{ features.get('dark-mode') }}</p>
+*     <p>Theme Color: {{ features.variation('theme-color') }}</p>
+*   </div>
+* </template>
+* ```
+*/
+function useFeatures(namespace = "v0:features") {
+	return useContext(namespace);
+}
+
+//#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) {
+		return String(value).toLowerCase().includes(q);
+	}
+	const stringValues = (/* @__PURE__ */ isObject(item) ? keys?.length ? keys.map((k) => item[k]) : Object.values(item) : [item]).map((v) => String(v).toLowerCase());
+	if (mode === "some") return stringValues.some((val) => match(val, queries[0]));
+	if (mode === "every") return stringValues.every((val) => match(val, queries[0]));
+	if (mode === "union") return queries.some((q) => stringValues.some((val) => match(val, q)));
+	if (mode === "intersection") return queries.every((q) => stringValues.some((val) => match(val, q)));
+	return false;
+}
+/**
+* A reusable function for filtering an array of items.
+*
+* @param query The query to filter by.
+* @param items The items to filter.
+* @param options The filter options.
+* @template Z The type of the items.
+* @returns The filtered items.
+*
+* @see https://0.vuetifyjs.com/composables/utilities/use-filter
+*
+* @example
+* ```ts
+* import { ref } from 'vue'
+* import { useFilter } from '@vuetify/v0'
+*
+* const items = ref([
+*   { name: 'John Doe', age: 30 },
+*   { name: 'Jane Doe', age: 25 },
+*   { name: 'Peter Jones', age: 40 },
+* ])
+*
+* const query = ref('doe')
+* const { items: filtered } = useFilter(query, items, { keys: ['name'] })
+*
+* console.log(filtered.value) // [ { name: 'John Doe', age: 30 }, { name: 'Jane Doe', age: 25 } ]
+* ```
+*/
+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));
+	}) };
+}
+
+//#endregion
+//#region src/composables/useForm/index.ts
+/**
+* @module useForm
+*
+* @remarks
+* Form validation composable with async rule support and multiple validation modes.
+*
+* 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
+*
+* Each field is registered with validation rules and tracks its own state independently.
+*/
+/**
+* Creates a new form instance.
+*
+* @param options The options for the form instance.
+* @template Z The type of the form ticket.
+* @template E The type of the form context.
+* @returns A new form instance.
+*
+* @see https://0.vuetifyjs.com/composables/forms/use-form
+*
+* @example
+* ```ts
+* import { createForm } from '@vuetify/v0'
+*
+* const form = createForm()
+*
+* const username = form.register({
+*   id: 'username',
+*   value: '',
+*   rules: [(v) => v.length > 0 || 'Username is required'],
+* })
+*
+* await form.submit()
+*
+* console.log(username.errors.value) // ['Username is required']
+*
+* form.reset()
+* ```
+*/
+function createForm(options) {
+	const registry = useRegistry(options);
+	const validateOn = options?.validateOn || "submit";
+	function parse(value) {
+		return value.toLowerCase().split(/\s+/);
+	}
+	function validatesOn(event) {
+		return parse(validateOn).includes(event);
+	}
+	const isValidating = computed(() => {
+		for (const ticket of registry.collection.values()) if (ticket.isValidating.value) return true;
+		return false;
+	});
+	const isValid = computed(() => {
+		let hasFields = false;
+		for (const ticket of registry.values()) {
+			hasFields = true;
+			if (ticket.isValid.value === false) return false;
+			if (ticket.isValid.value === null) return null;
+		}
+		return hasFields ? true : null;
+	});
+	function reset() {
+		for (const ticket of registry.values()) ticket.reset();
+	}
+	async function submit() {
+		return validate(registry.keys());
+	}
+	async function validate(id) {
+		const validating = toArray(id);
+		if (validatesOn("submit")) return (await Promise.all(validating.map(async (id$1) => await registry.get(id$1)?.validate() ?? true))).every(Boolean);
+		return validating.map((id$1) => registry.get(id$1)).filter(Boolean).every((ticket) => ticket.isValid.value === true);
+	}
+	function register(registration) {
+		const model = shallowRef(registration.value == null ? "" : toValue(registration.value));
+		const rules = registration.rules || [];
+		const errors = shallowRef([]);
+		const isValidating$1 = shallowRef(false);
+		const initialValue = model.value;
+		const triggers = registration.validateOn || validateOn;
+		const isPristine = shallowRef(true);
+		const isValid$1 = shallowRef(null);
+		function _validatesOn(event) {
+			return parse(triggers).includes(event);
+		}
+		function _reset() {
+			model.value = initialValue;
+			errors.value = [];
+			isPristine.value = true;
+			isValid$1.value = null;
+		}
+		async function validate$1(silent = false) {
+			if (rules.length === 0) return isValid$1.value = true;
+			isValidating$1.value = true;
+			try {
+				const errorMessages = (await Promise.all(rules.map((rule) => rule(model.value)))).filter((result) => /* @__PURE__ */ isString(result));
+				if (!silent) {
+					errors.value = errorMessages;
+					isValid$1.value = errorMessages.length === 0;
+					isPristine.value = toValue(model) === initialValue;
+				}
+				return errorMessages.length === 0;
+			} finally {
+				isValidating$1.value = false;
+			}
+		}
+		const item = {
+			...registration,
+			rules,
+			errors,
+			disabled: registration.disabled || false,
+			validateOn: triggers,
+			isValidating: isValidating$1,
+			isPristine,
+			isValid: isValid$1,
+			reset: _reset,
+			validate: validate$1
+		};
+		const ticket = registry.register(item);
+		Object.defineProperty(ticket, "value", {
+			get() {
+				return model.value;
+			},
+			set(val) {
+				model.value = val;
+				isPristine.value = val === initialValue;
+				isValid$1.value = null;
+				if (_validatesOn("change")) validate$1();
+			},
+			enumerable: true,
+			configurable: true
+		});
+		return ticket;
+	}
+	return {
+		...registry,
+		register,
+		reset,
+		submit,
+		validateOn,
+		isValid,
+		isValidating,
+		get size() {
+			return registry.size;
+		}
+	};
+}
+/**
+* Creates a new form context.
+*
+* @param options The options for the form context.
+* @template Z The type of the form ticket.
+* @template E The type of the form context.
+* @returns A new form context.
+*
+* @see https://0.vuetifyjs.com/composables/forms/use-form
+*
+* @example
+* ```ts
+* import { createFormContext } from '@vuetify/v0'
+*
+* // With default namespace 'v0:form'
+* export const [useMyForm, provideMyForm, myForm] = createFormContext({ validateOn: 'change' })
+*
+* // Or with custom namespace
+* export const [useMyForm, provideMyForm, myForm] = createFormContext({
+*   namespace: 'my-form',
+*   validateOn: 'change',
+* })
+*
+* // In a parent component:
+* provideMyForm()
+*
+* // In a child component:
+* const form = useMyForm()
+* form.register({ id: 'field', value: ref(''), rules: [...] })
+* ```
+*/
+function createFormContext(_options = {}) {
+	const { namespace = "v0:form",...options } = _options;
+	const [useFormContext, _provideFormContext] = createContext(namespace);
+	const context = createForm(options);
+	function provideFormContext(_context = context, app) {
+		return _provideFormContext(_context, app);
+	}
+	return createTrinity(useFormContext, provideFormContext, context);
+}
+/**
+* Returns the current form instance.
+*
+* @param namespace The namespace for the form context. Defaults to `'v0:form'`.
+* @returns The current form instance.
+*
+* @see https://0.vuetifyjs.com/composables/forms/use-form
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+*   import { useForm } from '@vuetify/v0'
+*
+*   const form = useForm()
+* <\/script>
+*
+* <template>
+*   <div>
+*     <p>Form is {{ form.isValid.value ? 'valid' : 'invalid' }}</p>
+*   </div>
+* </template>
+* ```
+*/
+function useForm(namespace = "v0:form") {
+	return useContext(namespace);
+}
+
+//#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.
+*
+* @param target The element to observe.
+* @param callback The callback to execute when the element's intersection changes.
+* @param options The options for the Intersection Observer.
+* @returns An object with methods to control the observer.
+*
+* @see https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver
+* @see https://0.vuetifyjs.com/composables/system/use-intersection-observer
+*
+* @example
+* ```ts
+* import { ref } from 'vue'
+* import { useIntersectionObserver } from '@vuetify/v0'
+*
+* const target = ref<HTMLElement>()
+* const isVisible = ref(false)
+*
+* const { isIntersecting, pause, resume } = useIntersectionObserver(
+*   target,
+*   (entries) => {
+*     const entry = entries[0]
+*     if (entry) {
+*       isVisible.value = entry.isIntersecting
+*       console.log('Element is visible:', entry.isIntersecting)
+*     }
+*   },
+*   { threshold: 0.5 }
+* )
+*
+* // Pause observation
+* pause()
+*
+* // Resume observation
+* resume()
+* ```
+*/
+function useIntersectionObserver(target, callback, options = {}) {
+	const { isHydrated } = useHydration();
+	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;
+		observer.value = new IntersectionObserver((entries) => {
+			const transformedEntries = entries.map((entry) => ({
+				boundingClientRect: entry.boundingClientRect,
+				intersectionRatio: entry.intersectionRatio,
+				intersectionRect: entry.intersectionRect,
+				isIntersecting: entry.isIntersecting,
+				rootBounds: entry.rootBounds,
+				target: entry.target,
+				time: entry.time
+			}));
+			const latestEntry = transformedEntries.at(-1);
+			if (latestEntry) isIntersecting.value = latestEntry.isIntersecting;
+			callback(transformedEntries);
+		}, {
+			root: options.root || null,
+			rootMargin: options.rootMargin || "0px",
+			threshold: options.threshold || 0
+		});
+		observer.value.observe(target.value);
+		if (options.immediate) callback([{
+			boundingClientRect: target.value.getBoundingClientRect(),
+			intersectionRatio: 0,
+			intersectionRect: new DOMRect(0, 0, 0, 0),
+			isIntersecting: false,
+			rootBounds: null,
+			target: target.value,
+			time: performance.now()
+		}]);
+	}
+	watch([isHydrated, target], () => {
+		cleanup();
+		setup();
+	}, { immediate: true });
+	function cleanup() {
+		if (observer.value) {
+			observer.value.disconnect();
+			observer.value = void 0;
+		}
+	}
+	function pause() {
+		isPaused.value = true;
+		isIntersecting.value = false;
+		observer.value?.disconnect();
+	}
+	function resume() {
+		isPaused.value = false;
+		setup();
+	}
+	function stop() {
+		cleanup();
+	}
+	onScopeDispose(stop, true);
+	return {
+		isActive: shallowReadonly(isActive),
+		isIntersecting: shallowReadonly(isIntersecting),
+		isPaused: shallowReadonly(isPaused),
+		pause,
+		resume,
+		stop
+	};
+}
+/**
+* A convenience composable that uses the Intersection Observer API to detect
+* when an element is visible in the viewport.
+*
+* @param target The element to observe.
+* @param options The options for the Intersection Observer.
+* @returns An object with the intersection state.
+*
+* @see https://0.vuetifyjs.com/composables/system/use-intersection-observer
+*
+* @example
+* ```ts
+* import { ref } from 'vue'
+* import { useElementIntersection } from '@vuetify/v0'
+*
+* const myElement = ref<HTMLElement>()
+* const { isIntersecting, intersectionRatio } = useElementIntersection(myElement, {
+*   threshold: 0.5
+* })
+*
+* // Use in template to conditionally render or animate
+* watchEffect(() => {
+*   if (isIntersecting.value) {
+*     console.log('Element is visible!', intersectionRatio.value)
+*   }
+* })
+* ```
+*/
+function useElementIntersection(target, options = {}) {
+	const isIntersecting = shallowRef(false);
+	const intersectionRatio = shallowRef(0);
+	const { pause: _pause, resume, stop, isActive, isPaused } = useIntersectionObserver(target, (entries) => {
+		const entry = entries.at(-1);
+		if (entry) {
+			isIntersecting.value = entry.isIntersecting;
+			intersectionRatio.value = entry.intersectionRatio;
+		}
+	}, {
+		immediate: true,
+		...options
+	});
+	function pause() {
+		isIntersecting.value = false;
+		intersectionRatio.value = 0;
+		_pause();
+	}
+	return {
+		isIntersecting: shallowReadonly(isIntersecting),
+		intersectionRatio: shallowReadonly(intersectionRatio),
+		isActive,
+		isPaused,
+		pause,
+		resume,
+		stop
+	};
+}
+
+//#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.
+* @returns An object with methods to start and stop listening.
+*
+* @see https://0.vuetifyjs.com/composables/system/use-keydown
+*
+* @example
+* ```ts
+* import { useKeydown } from '@vuetify/v0'
+*
+* const { isActive, start, stop } = useKeydown([
+*   { key: 'Enter', handler: () => console.log('Enter pressed') },
+*   { key: 'Escape', handler: () => console.log('Escape pressed'), preventDefault: true },
+* ])
+*
+* // Listener is automatically active when called in component setup
+* // Manually control if needed:
+* stop()
+* start()
+* ```
+*/
+function useKeydown(handlers) {
+	let cleanup = null;
+	const isActive = toRef(() => !!cleanup);
+	function onKeydown(event) {
+		const handlerList = toValue(handlers);
+		const handler = (Array.isArray(handlerList) ? handlerList : [handlerList]).find((h$1) => h$1.key === event.key);
+		if (handler) {
+			if (handler.preventDefault) event.preventDefault();
+			if (handler.stopPropagation) event.stopPropagation();
+			handler.handler(event);
+		}
+	}
+	function start() {
+		if (cleanup) return;
+		cleanup = useDocumentEventListener("keydown", onKeydown);
+	}
+	function stop() {
+		if (!cleanup) return;
+		cleanup();
+		cleanup = null;
+	}
+	cleanup = useDocumentEventListener("keydown", onKeydown);
+	onScopeDispose(stop);
+	return {
+		isActive,
+		start,
+		stop
+	};
+}
+
+//#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.
+* @param callback The callback to execute when a mutation is observed.
+* @param options The options for the Mutation Observer.
+* @returns An object with methods to control the observer.
+*
+* @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
+* @see https://0.vuetifyjs.com/composables/system/use-mutation-observer
+*
+* @example
+* ```ts
+* import { ref } from 'vue'
+* import { useMutationObserver } from '@vuetify/v0'
+*
+* const container = ref<HTMLElement>()
+*
+* const { pause, resume, isPaused } = useMutationObserver(
+*   container,
+*   (mutations) => {
+*     mutations.forEach((mutation) => {
+*       if (mutation.type === 'childList') {
+*         console.log('Children changed:', mutation.addedNodes, mutation.removedNodes)
+*       } else if (mutation.type === 'attributes') {
+*         console.log('Attribute changed:', mutation.attributeName)
+*       }
+*     })
+*   },
+*   {
+*     childList: true,
+*     attributes: true,
+*     subtree: true
+*   }
+* )
+*
+* // Pause observation
+* pause()
+*
+* // Resume observation
+* resume()
+* ```
+*/
+function useMutationObserver(target, callback, options = {}) {
+	const { isHydrated } = useHydration();
+	const observer = shallowRef();
+	const isPaused = shallowRef(false);
+	const isActive = computed(() => !!observer.value);
+	const observerOptions = {
+		childList: options.childList ?? true,
+		attributes: options.attributes ?? false,
+		characterData: options.characterData ?? false,
+		subtree: options.subtree ?? false,
+		attributeOldValue: options.attributeOldValue ?? false,
+		characterDataOldValue: options.characterDataOldValue ?? false,
+		attributeFilter: options.attributeFilter
+	};
+	function setup() {
+		if (!isHydrated.value || !SUPPORTS_MUTATION_OBSERVER || !target.value || isPaused.value) return;
+		observer.value = new MutationObserver((mutations) => {
+			callback(mutations.map((mutation) => ({
+				type: mutation.type,
+				target: mutation.target,
+				addedNodes: mutation.addedNodes,
+				removedNodes: mutation.removedNodes,
+				previousSibling: mutation.previousSibling,
+				nextSibling: mutation.nextSibling,
+				attributeName: mutation.attributeName,
+				attributeNamespace: mutation.attributeNamespace,
+				oldValue: mutation.oldValue
+			})));
+		});
+		observer.value.observe(target.value, observerOptions);
+		if (options.immediate) {
+			const emptyNodeList = {
+				length: 0,
+				item: () => null,
+				forEach: () => {},
+				*[Symbol.iterator]() {}
+			};
+			callback([{
+				type: "childList",
+				target: target.value,
+				addedNodes: emptyNodeList,
+				removedNodes: emptyNodeList,
+				previousSibling: null,
+				nextSibling: null,
+				attributeName: null,
+				attributeNamespace: null,
+				oldValue: null
+			}]);
+		}
+	}
+	watch([isHydrated, target], () => {
+		cleanup();
+		setup();
+	}, { immediate: true });
+	function cleanup() {
+		if (observer.value) {
+			observer.value.disconnect();
+			observer.value = void 0;
+		}
+	}
+	function pause() {
+		isPaused.value = true;
+		observer.value?.disconnect();
+	}
+	function resume() {
+		isPaused.value = false;
+		setup();
+	}
+	function stop() {
+		cleanup();
+	}
+	onScopeDispose(stop, true);
+	return {
+		isActive: shallowReadonly(isActive),
+		isPaused: shallowReadonly(isPaused),
+		pause,
+		resume,
+		stop
+	};
+}
+
+//#endregion
+//#region src/composables/usePermissions/adapters/adapter.ts
+var PermissionAdapter = class {};
+
+//#endregion
+//#region src/composables/usePermissions/adapters/v0.ts
+var Vuetify0PermissionAdapter = class extends PermissionAdapter {
+	constructor() {
+		super();
+	}
+	can(role, action, subject, context, permissions) {
+		const access = `${role}.${action}.${subject}`;
+		const ticket = permissions.get(access);
+		if (!ticket || !ticket.value) return false;
+		return /* @__PURE__ */ isFunction(ticket.value) ? ticket.value(context) : ticket.value;
+	}
+};
+
+//#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.
+* @template Z The type of the permission ticket.
+* @template E The type of the permission context.
+* @returns A new permissions instance.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-permissions
+*
+* @example
+* ```ts
+* import { createPermissions } from '@vuetify/v0'
+*
+* const [usePermissions, providePermissions] = createPermissions({
+*   namespace: 'v0:permissions',
+*   permissions: {
+*     admin: [['read', 'users']],
+*     editor: [['edit', 'posts']],
+*   },
+* })
+* ```
+*/
+function createPermissions(_options = {}) {
+	const { adapter = new Vuetify0PermissionAdapter(), permissions = {},...options } = _options;
+	const record = {};
+	for (const role in permissions) {
+		if (!record[role]) record[role] = {};
+		for (const [actions, subjects, condition = true] of permissions[role]) for (const action of toArray(actions)) for (const subject of toArray(subjects)) {
+			if (!record[role][action]) record[role][action] = {};
+			record[role][action][subject] = condition;
+		}
+	}
+	const tokens = createTokens(record, options);
+	function can(id, action, subject, context = {}) {
+		return adapter.can(id, action, subject, context, tokens);
+	}
+	return {
+		...tokens,
+		can
+	};
+}
+/**
+* Creates a new permissions context.
+*
+* @param options The options for the permissions context.
+* @template Z The type of the permission ticket.
+* @template E The type of the permission context.
+* @returns A new permissions context.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-permissions
+*
+* @example
+* ```ts
+* import { createPermissionsContext } from '@vuetify/v0'
+*
+* export const [usePermissions, providePermissions, context] = createPermissionsContext({
+*   namespace: 'app:permissions',
+*   permissions: {
+*     admin: [['read', 'users'], ['edit', 'users']],
+*     editor: [['edit', 'posts']],
+*   },
+* })
+* ```
+*/
+function createPermissionsContext(_options = {}) {
+	const { namespace = "v0:permissions",...options } = _options;
+	const [usePermissionsContext, _providePermissionsContext] = createContext(namespace);
+	const context = createPermissions(options);
+	function providePermissionsContext(_context = context, app) {
+		return _providePermissionsContext(_context, app);
+	}
+	return createTrinity(usePermissionsContext, providePermissionsContext, context);
+}
+/**
+* Creates a new permissions plugin.
+*
+* @param options The options for the permissions plugin.
+* @template Z The type of the permission ticket.
+* @template E The type of the permission context.
+* @returns A new permissions plugin.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-permissions
+*
+* @example
+* ```ts
+* import { createApp } from 'vue'
+* import { createPermissionsPlugin } from '@vuetify/v0'
+* import App from './App.vue'
+*
+* const app = createApp(App)
+*
+* app.use(
+*   createPermissionsPlugin({
+*     permissions: {
+*       admin: [['read', 'users']],
+*       editor: [['edit', 'posts']],
+*     },
+*   })
+* )
+*
+* app.mount('#app')
+* ```
+*/
+function createPermissionsPlugin(_options = {}) {
+	const { namespace = "v0:permissions",...options } = _options;
+	const [, providePermissionContext, context] = createPermissionsContext({
+		...options,
+		namespace
+	});
+	return createPlugin({
+		namespace,
+		provide: (app) => {
+			providePermissionContext(context, app);
+		}
+	});
+}
+/**
+* Returns the current permissions instance.
+*
+* @template Z The type of the permission ticket.
+* @returns The current permissions instance.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-permissions
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+*   import { usePermissions } from '@vuetify/v0'
+*
+*   const { can } = usePermissions()
+* <\/script>
+*
+* <template>
+*   <div>
+*     <p v-if="can('admin', 'read', 'users')">Admin access</p>
+*   </div>
+* </template>
+* ```
+*/
+function usePermissions(namespace = "v0:permissions") {
+	return useContext(namespace);
+}
+
+//#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
+* @template Z The type of queue ticket that extends QueueTicket. Use this to add custom properties to tickets.
+* @template E The type of queue context that extends QueueContext<Z>. Use this when extending the queue with additional methods.
+* @returns A new queue instance
+*
+* @see https://0.vuetifyjs.com/composables/registration/use-queue
+*
+* @example
+* ```ts
+* import { useQueue } from '@vuetify/v0'
+*
+* const queue = useQueue()
+*
+* // Register an ticket with default timeout (3000ms)
+* const ticket1 = queue.register({ value: 'Ticket 1' })
+*
+* // Register an ticket with custom timeout
+* const ticket2 = queue.register({ value: 'Ticket 2', timeout: 5000 })
+*
+* // Register a persistent ticket that must be manually dismissed
+* const ticket3 = queue.register({ value: 'Ticket 3', timeout: -1 })
+*
+* // Dismiss an ticket using the convenience method
+* ticket3.dismiss()
+*
+* console.log(queue.size) // 2
+* ```
+*/
+function createQueue(_options = {}) {
+	const { timeout: _timeout = 3e3,...options } = _options;
+	const registry = useRegistry({
+		...options,
+		events: true
+	});
+	const timeouts = /* @__PURE__ */ new Map();
+	function startTimeout(ticket) {
+		if (/* @__PURE__ */ isUndefined(ticket.timeout) || ticket.timeout < 0 || ticket.isPaused) return;
+		const timeout = setTimeout(() => {
+			timeouts.delete(ticket.id);
+			registry.unregister(ticket.id);
+			resume();
+		}, ticket.timeout);
+		timeouts.set(ticket.id, timeout);
+	}
+	function clearTimeout(id) {
+		const timeout = timeouts.get(id);
+		if (timeout) {
+			globalThis.clearTimeout(timeout);
+			timeouts.delete(id);
+		}
+	}
+	function register(registration = {}) {
+		const id = registration.id ?? /* @__PURE__ */ genId();
+		const timeout = Object.prototype.hasOwnProperty.call(registration, "timeout") ? registration.timeout : _timeout;
+		const ticket = {
+			...registration,
+			id,
+			timeout,
+			isPaused: registry.size > 0,
+			dismiss: () => unregister(id)
+		};
+		const registered = registry.register(ticket);
+		startTimeout(registered);
+		return registered;
+	}
+	function unregister(id) {
+		const ticket = /* @__PURE__ */ isUndefined(id) ? registry.seek("first") : registry.get(id);
+		if (!ticket) return void 0;
+		const wasFirst = ticket.index === 0;
+		clearTimeout(ticket.id);
+		registry.unregister(ticket.id);
+		if (wasFirst) resume();
+		return ticket;
+	}
+	function offboard(ids) {
+		let hadFirst = false;
+		for (const id of ids) {
+			const ticket = registry.get(id);
+			if (!ticket) continue;
+			if (ticket.index === 0) hadFirst = true;
+			clearTimeout(ticket.id);
+		}
+		registry.offboard(ids);
+		if (hadFirst) resume();
+	}
+	function pause() {
+		const ticket = registry.seek("first");
+		if (!ticket || ticket.isPaused) return void 0;
+		clearTimeout(ticket.id);
+		return registry.upsert(ticket.id, { isPaused: true });
+	}
+	function resume() {
+		const ticket = registry.seek("first");
+		if (!ticket || ticket.index !== 0 || !ticket.isPaused) return void 0;
+		const updated = registry.upsert(ticket.id, { isPaused: false });
+		startTimeout(updated);
+		return updated;
+	}
+	function clear() {
+		for (const id of timeouts.keys()) clearTimeout(id);
+		registry.clear();
+	}
+	function dispose() {
+		clear();
+		registry.dispose();
+	}
+	onScopeDispose(dispose, true);
+	return {
+		...registry,
+		register,
+		unregister,
+		offboard,
+		pause,
+		resume,
+		clear,
+		dispose,
+		get size() {
+			return registry.size;
+		}
+	};
+}
+/**
+* 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.
+* @returns A new queue context.
+*
+* @see https://0.vuetifyjs.com/composables/registration/use-queue
+*
+* @example
+* ```ts
+* import { createQueueContext } from '@vuetify/v0'
+*
+* export const [useQueue, provideQueue] = createQueueContext('v0:queue', {
+*   timeout: 5000,
+* })
+* ```
+*/
+function createQueueContext(_options) {
+	const { namespace,...options } = _options;
+	const [useQueueContext, _provideQueueContext] = createContext(namespace);
+	const context = createQueue(options);
+	function provideQueueContext(_context = context, app) {
+		return _provideQueueContext(_context, app);
+	}
+	return createTrinity(useQueueContext, provideQueueContext, context);
+}
+/**
+* Returns the current queue instance.
+*
+* @param namespace The namespace for the queue context. Defaults to `'v0:queue'`.
+* @returns The current queue instance.
+*
+* @see https://0.vuetifyjs.com/composables/registration/use-queue
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+*   import { useQueue } from '@vuetify/v0'
+*
+*   const queue = useQueue()
+* <\/script>
+* ```
+*/
+function useQueue(namespace = "v0:queue") {
+	return useContext(namespace);
+}
+
+//#endregion
+//#region src/composables/useStorage/adapters/memory.ts
+/**
+* In-memory storage adapter that implements the StorageAdapter interface.
+* This adapter provides temporary storage that persists only for the current
+* session and is useful for testing or when persistent storage is not available.
+*/
+var MemoryAdapter = class {
+	store = /* @__PURE__ */ new Map();
+	get length() {
+		return this.store.size;
+	}
+	getItem(key) {
+		return this.store.get(key) ?? null;
+	}
+	setItem(key, value) {
+		this.store.set(key, value);
+	}
+	removeItem(key) {
+		this.store.delete(key);
+	}
+	key(index) {
+		return String(Array.from(this.store.keys())[index] ?? "");
+	}
+};
+
+//#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.
+* @template E The type of the storage context.
+* @returns A new storage instance.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-storage
+*
+* @example
+* ```ts
+* import { createStorage } from '@vuetify/v0'
+*
+* const storage = createStorage()
+*
+* storage.set('username', 'MyUsername')
+*
+* const username = storage.get('username')
+*
+* console.log(username.value) // MyUsername
+*
+* storage.clear()
+* ```
+*/
+function createStorage(options = {}) {
+	const { adapter = IN_BROWSER ? window.localStorage : new MemoryAdapter(), prefix = "v0:", serializer = {
+		read: JSON.parse,
+		write: JSON.stringify
+	} } = options;
+	const cache = /* @__PURE__ */ new Map();
+	const watchers = /* @__PURE__ */ new Map();
+	function has(key) {
+		const prefixedKey = `${prefix}${key}`;
+		return cache.has(prefixedKey);
+	}
+	function get(key, defaultValue) {
+		const prefixedKey = `${prefix}${key}`;
+		if (cache.has(prefixedKey)) return cache.get(prefixedKey);
+		const storedValue = adapter?.getItem(prefixedKey);
+		let initialValue = defaultValue;
+		if (storedValue) try {
+			initialValue = serializer.read(storedValue);
+		} catch (error) {
+			console.error(`[v0:storage] Failed to parse stored value for key "${prefixedKey}":`, error);
+		}
+		const valueRef = ref(initialValue);
+		const stop = watch(valueRef, (newValue) => {
+			if (/* @__PURE__ */ isNullOrUndefined(newValue)) adapter?.removeItem(prefixedKey);
+			else adapter?.setItem(prefixedKey, serializer.write(newValue));
+		}, { deep: true });
+		watchers.set(prefixedKey, stop);
+		cache.set(prefixedKey, valueRef);
+		return valueRef;
+	}
+	function set(key, value) {
+		const valueRef = get(key);
+		valueRef.value = value;
+	}
+	function remove(key) {
+		const prefixedKey = `${prefix}${key}`;
+		const stop = watchers.get(prefixedKey);
+		if (!stop) return;
+		stop();
+		watchers.delete(prefixedKey);
+		adapter?.removeItem(prefixedKey);
+		cache.delete(prefixedKey);
+	}
+	function clear() {
+		if (watchers.size > 0) {
+			for (const stop of watchers.values()) stop();
+			watchers.clear();
+		}
+		if (cache.size > 0) {
+			for (const key of cache.keys()) adapter?.removeItem(key);
+			cache.clear();
+		}
+	}
+	return {
+		has,
+		get,
+		set,
+		remove,
+		clear
+	};
+}
+function createStorageContext(_options = {}) {
+	const { namespace = "v0:storage",...options } = _options;
+	const [useStorageContext, _provideStorageContext] = createContext(namespace);
+	const context = createStorage(options);
+	function provideStorageContext(_context = context, app) {
+		return _provideStorageContext(_context, app);
+	}
+	return createTrinity(useStorageContext, provideStorageContext, context);
+}
+/**
+* Creates a new storage plugin.
+*
+* @param options The options for the storage plugin.
+* @returns A new storage plugin.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-storage
+*
+* @example
+* ```ts
+* import { createApp } from 'vue'
+* import { createStoragePlugin } from '@vuetify/v0'
+* import App from './App.vue'
+*
+* const app = createApp(App)
+*
+* app.use(createStoragePlugin())
+*
+* app.mount('#app')
+* ```
+*/
+function createStoragePlugin(_options = {}) {
+	const { namespace = "v0:storage",...options } = _options;
+	const [, provideStorageContext, context] = createStorageContext({
+		...options,
+		namespace
+	});
+	return createPlugin({
+		namespace,
+		provide: (app) => {
+			provideStorageContext(context, app);
+		}
+	});
+}
+/**
+* Returns the current storage instance.
+*
+* @param namespace The namespace for the storage context. Defaults to `'v0:storage'`.
+* @returns The current storage instance.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-storage
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+*   import { useStorage } from '@vuetify/v0'
+*
+*   const storage = useStorage()
+*   const username = storage.get('username', 'Guest')
+* <\/script>
+*
+* <template>
+*   <div>
+*     <p>Username: {{ username }}</p>
+*   </div>
+* </template>
+* ```
+*/
+function useStorage(namespace = "v0:storage") {
+	return useContext(namespace);
+}
+
+//#endregion
+//#region src/composables/useTheme/adapters/adapter.ts
+var ThemeAdapter = class {
+	stylesheetId = "v0-theme-stylesheet";
+	prefix;
+	constructor(prefix) {
+		this.prefix = prefix;
+	}
+	generate(colors, isDark) {
+		let css = "";
+		for (const theme in colors) {
+			const themeColors = colors[theme];
+			if (!themeColors) continue;
+			const vars = Object.entries(themeColors).map(([key, val]) => `  --${this.prefix}-${key}: ${val};`).join("\n");
+			css += `[data-theme="${theme}"] {\n${vars}\n}\n`;
+		}
+		if (!/* @__PURE__ */ isUndefined(isDark)) css += `:root {\n  color-scheme: ${isDark ? "dark" : "light"};\n}\n`;
+		return css;
+	}
+};
+
+//#endregion
+//#region src/composables/useTheme/adapters/v0.ts
+/**
+* Theme adapter implementation for Vuetify v0 design system.
+* This adapter generates CSS custom properties and injects them into the DOM
+* as a stylesheet, allowing themes to be applied globally.
+*/
+var Vuetify0ThemeAdapter = class extends ThemeAdapter {
+	cspNonce;
+	constructor(options = {}) {
+		super(options.prefix ?? "v0");
+		this.cspNonce = options.cspNonce;
+		this.stylesheetId = options.stylesheetId ?? this.stylesheetId;
+	}
+	setup(app, context, target) {
+		if (IN_BROWSER) {
+			onScopeDispose(watch([context.colors, context.isDark], ([colors, isDark]) => {
+				this.update(colors, isDark);
+			}, { immediate: true }), true);
+			if (/* @__PURE__ */ isNull(target)) return;
+			const targetEl = target instanceof HTMLElement ? target : /* @__PURE__ */ isString(target) ? document.querySelector(target) : app._container || document.querySelector("#app") || document.body;
+			if (!targetEl) return;
+			onScopeDispose(watch(context.selectedId, (id) => {
+				if (!id) return;
+				targetEl.dataset.theme = String(id);
+			}, { immediate: true }), true);
+		} else {
+			const head = app._context?.provides?.usehead ?? app._context?.provides?.head;
+			if (head?.push) {
+				const id = context.selectedId.value;
+				head.push({
+					htmlAttrs: { "data-theme": id ? String(id) : "" },
+					style: [{
+						innerHTML: this.generate(context.colors.value, context.isDark.value),
+						id: this.stylesheetId
+					}]
+				});
+			}
+		}
+	}
+	update(colors, isDark) {
+		if (!IN_BROWSER) return;
+		this.upsert(this.generate(colors, isDark));
+	}
+	upsert(styles) {
+		if (!IN_BROWSER) return;
+		let styleEl = document.querySelector(`#${this.stylesheetId}`);
+		if (!styleEl) {
+			styleEl = document.createElement("style");
+			styleEl.id = this.stylesheetId.startsWith("#") ? this.stylesheetId.slice(1) : this.stylesheetId;
+			if (this.cspNonce) styleEl.setAttribute("nonce", this.cspNonce);
+			document.head.append(styleEl);
+		}
+		styleEl.textContent = styles;
+	}
+};
+
+//#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.
+* @template Z The type of the theme ticket.
+* @template E The type of the theme context.
+* @returns A new theme instance.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-theme
+*
+* @example
+* ```ts
+* import { createTheme } from '@vuetify/v0'
+*
+* export const [useTheme, provideTheme] = createTheme({
+*   namespace: 'v0:theme',
+*   default: 'light',
+*   themes: {
+*     light: {
+*       dark: false,
+*       colors: {
+*         primary: '#3b82f6',
+*       },
+*     },
+*     dark: {
+*       dark: true,
+*       colors: {
+*         primary: '#675496',
+*       },
+*     },
+*   },
+* })
+* ```
+*/
+function createTheme(_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];
+		register({
+			id,
+			value,
+			...theme
+		});
+		if (id === options.default && !registry.selectedId.value) registry.select(id);
+	}
+	const names = computed(() => registry.keys());
+	const colors = computed(() => {
+		const resolved = {};
+		for (const theme of registry.values()) {
+			if (theme.lazy && theme.id !== registry.selectedId.value) continue;
+			resolved[theme.id] = resolve(theme.value);
+		}
+		return resolved;
+	});
+	const isDark = toRef(() => registry.selectedItem.value?.dark ?? false);
+	function cycle(themes$1 = names.value) {
+		const current = themes$1.indexOf(registry.selectedId.value ?? "");
+		const next = current === -1 ? 0 : (current + 1) % themes$1.length;
+		registry.select(themes$1[next]);
+	}
+	function resolve(colors$1) {
+		const resolved = {};
+		for (const [key, value] of Object.entries(colors$1)) resolved[key] = tokens.isAlias(value) ? tokens.resolve(value) : value;
+		return resolved;
+	}
+	function register(registration = {}) {
+		const item = {
+			lazy: false,
+			dark: false,
+			...registration
+		};
+		return registry.register(item);
+	}
+	return {
+		...registry,
+		colors,
+		isDark,
+		register,
+		cycle,
+		get size() {
+			return registry.size;
+		}
+	};
+}
+/**
+* Creates a new theme context trinity.
+*
+* @param options The options for the theme context.
+* @template Z The type of the theme ticket.
+* @template E The type of the theme context.
+* @returns A new theme context trinity.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-theme
+*
+* @example
+* ```ts
+* import { createThemeContext } from '@vuetify/v0'
+*
+* export const [useThemeContext, provideThemeContext, context] = createThemeContext({
+*   namespace: 'v0:theme',
+*   default: 'light',
+*   themes: {
+*     light: {
+*       dark: false,
+*       colors: {
+*         primary: '#3b82f6',
+*       },
+*     },
+*     dark: {
+*       dark: true,
+*       colors: {
+*         primary: '#675496',
+*       },
+*     },
+*   },
+* })
+* ```
+*/
+function createThemeContext(_options = {}) {
+	const { namespace = "v0:theme",...options } = _options;
+	const [useThemeContext, _provideThemeContext] = createContext(namespace);
+	const context = createTheme(options);
+	function provideThemeContext(_context = context, app) {
+		return _provideThemeContext(_context, app);
+	}
+	return createTrinity(useThemeContext, provideThemeContext, context);
+}
+/**
+* Creates a new theme plugin.
+*
+* @param options The options for the theme plugin.
+* @template Z The type of the theme ticket.
+* @template E The type of the theme context.
+* @returns A new theme plugin.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-theme
+*
+* @example
+* ```ts
+* import { createApp } from 'vue'
+* import { createThemePlugin } from '@vuetify/v0'
+* import App from './App.vue'
+*
+* const app = createApp(App)
+*
+* app.use(
+*   createThemePlugin({
+*     default: 'light',
+*     themes: {
+*       light: {
+*         dark: false,
+*         colors: {
+*           primary: '#3b82f6',
+*         },
+*       },
+*       dark: {
+*         dark: true,
+*         colors: {
+*           primary: '#675496',
+*         },
+*       },
+*     },
+*   })
+* )
+*
+* app.mount('#app')
+* ```
+*/
+function createThemePlugin(_options = {}) {
+	const { adapter = new Vuetify0ThemeAdapter(), namespace = "v0:theme", palette = {}, themes = {}, target,...options } = _options;
+	const [, provideThemeContext, context] = createThemeContext({
+		...options,
+		namespace,
+		themes,
+		palette
+	});
+	return createPlugin({
+		namespace,
+		provide: (app) => {
+			provideThemeContext(context, app);
+		},
+		setup: (app) => {
+			adapter.setup(app, context, target);
+		}
+	});
+}
+/**
+* Returns the current theme instance.
+*
+* @param namespace The namespace for the theme context. Defaults to `v0:theme`.
+* @returns The current theme instance.
+*
+* @see https://0.vuetifyjs.com/composables/plugins/use-theme
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+*   import { useTheme } from '@vuetify/v0'
+*
+*   const theme = useTheme()
+* <\/script>
+*
+* <template>
+*   <div>
+*     <p>Current theme: {{ theme.selected.value }}</p>
+*   </div>
+* </template>
+* ```
+*/
+function useTheme(namespace = "v0:theme") {
+	return useContext(namespace);
+}
+
+//#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.
+* @template Z The type of the timeline ticket.
+* @template E The type of the timeline context.
+* @returns A new timeline instance.
+*
+* @see https://0.vuetifyjs.com/composables/registration/use-timeline
+*
+* @example
+* ```ts
+* import { useTimeline } from '@vuetify/v0'
+*
+* const timeline = useTimeline({ size: 3 })
+*
+* timeline.onboard([{ id: 'one' }, { id: 'two' }, { id: 'three' }])
+*
+* console.log(timeline.values()) // [{ id: 'one' }, { id: 'two' }, { id: 'three' }]
+*
+* timeline.undo()
+* console.log(timeline.values()) // [{ id: 'one' }, { id: 'two' }]
+*
+* timeline.redo()
+* console.log(timeline.values()) // [{ id: 'one' }, { id: 'two' }, { id: 'three' }]
+* ```
+*/
+function createTimeline(_options = {}) {
+	const { size = 10,...options } = _options;
+	const registry = useRegistry(options);
+	const stack = [];
+	const overflow = [];
+	function register(item) {
+		stack.length = 0;
+		if (registry.size < size) return registry.register({ ...item });
+		const removing = registry.seek("first");
+		if (overflow.length === size) overflow.shift();
+		overflow.push(removing);
+		registry.unregister(removing.id);
+		const ticket = registry.register({ ...item });
+		registry.reindex();
+		return ticket;
+	}
+	function undo() {
+		const item = registry.seek("last");
+		if (!item) return void 0;
+		stack.push(item);
+		registry.unregister(item.id);
+		const restored = overflow.pop();
+		if (restored) {
+			const remaining = registry.values();
+			registry.clear();
+			registry.onboard([restored, ...remaining]);
+			registry.reindex();
+		}
+		return item;
+	}
+	function redo() {
+		if (stack.length === 0) return void 0;
+		const item = stack.pop();
+		const ticket = registry.register(item);
+		registry.reindex();
+		return ticket;
+	}
+	return {
+		...registry,
+		register,
+		undo,
+		redo,
+		get size() {
+			return registry.size;
+		}
+	};
+}
+/**
+* Creates a new timeline context.
+*
+* @param options The options for the timeline context.
+* @template Z The type of the timeline ticket.
+* @template E The type of the timeline context.
+* @returns A new timeline context.
+*
+* @see https://0.vuetifyjs.com/composables/registration/use-timeline
+*
+* @example
+* ```ts
+* import { createTimelineContext } from '@vuetify/v0'
+*
+* // With default namespace 'v0:timeline'
+* export const [useTimeline, provideTimeline, context] = createTimelineContext({ size: 5 })
+*
+* context.register({ id: 'example' })
+*
+* // In a parent component
+* provideTimeline()
+*
+* // In a child component
+* const timeline = useTimeline()
+*
+* console.log(timeline.values()) // [{ id: 'example' }]
+* ```
+*/
+function createTimelineContext(_options = {}) {
+	const { namespace = "v0:timeline",...options } = _options;
+	const [useTimelineContext, _provideTimelineContext] = createContext(namespace);
+	const context = createTimeline(options);
+	function provideTimelineContext(_context = context, app) {
+		return _provideTimelineContext(_context, app);
+	}
+	return createTrinity(useTimelineContext, provideTimelineContext, context);
+}
+/**
+* Returns the current timeline instance.
+*
+* @param namespace The namespace for the timeline context. Defaults to `'v0:timeline'`.
+* @returns The current timeline instance.
+*
+* @see https://0.vuetifyjs.com/composables/registration/use-timeline
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+*   import { useTimeline } from '@vuetify/v0'
+*
+*   const timeline = useTimeline()
+* <\/script>
+* ```
+*/
+function useTimeline(namespace = "v0:timeline") {
+	return useContext(namespace);
+}
+
+//#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
+* @param fn The function to run within the effect scope. Can optionally receive controls for manual scope management.
+* @returns Controls object with isActive state and start/stop/reset methods
+*
+* @see https://vuejs.org/api/reactivity-advanced.html#effectscope
+* @see https://0.vuetifyjs.com/composables/system/use-toggle-scope
+*
+* @example
+* ```ts
+* import { ref } from 'vue'
+* import { useToggleScope } from '@vuetify/v0'
+*
+* const isEnabled = ref(false)
+*
+* const { isActive } = useToggleScope(isEnabled, () => {
+*   // This code runs when isEnabled becomes true
+*   const unwatch = watch(someRef, () => {
+*     console.log('Watching...')
+*   })
+*
+*   // Cleanup happens automatically when isEnabled becomes false
+* })
+*
+* // Toggle the scope on/off
+* isEnabled.value = true  // Starts the scope
+* console.log(isActive.value) // true
+* isEnabled.value = false // Stops and cleans up
+* console.log(isActive.value) // false
+* ```
+*
+* @example
+* With manual controls:
+* ```ts
+* const isEnabled = ref(true)
+*
+* useToggleScope(isEnabled, (controls) => {
+*   // Access controls inside the scope
+*   console.log('Active:', controls.isActive.value)
+*
+*   // Manually reset the scope if needed
+*   someEvent.on('reset', () => controls.reset())
+* })
+* ```
+*/
+function useToggleScope(source, fn) {
+	const scope = shallowRef();
+	const isActive = toRef(() => !!scope.value);
+	function start() {
+		if (scope.value) return;
+		scope.value = effectScope();
+		scope.value.run(() => fn.length > 0 ? fn(controls) : fn());
+	}
+	function stop() {
+		scope.value?.stop();
+		scope.value = void 0;
+	}
+	function reset() {
+		stop();
+		start();
+	}
+	const controls = {
+		isActive: shallowReadonly(isActive),
+		start,
+		stop,
+		reset
+	};
+	watch(source, (active) => {
+		if (active && !scope.value) start();
+		else if (!active) stop();
+	}, { immediate: true });
+	onScopeDispose(() => {
+		stop();
+	});
+	return controls;
+}
+
+//#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
+* @param options Configuration options
+* @returns Virtual scrolling context
+*
+* @see https://0.vuetifyjs.com/composables/utilities/use-virtual
+*
+* @example
+* ```vue
+* <script setup lang="ts">
+*   import { useVirtual } from '@vuetify/v0'
+*
+*   const items = ref(Array.from({ length: 10000 }, (_, i) => ({ id: i, name: `Item ${i}` })))
+* <\/script>
+*
+* <template>
+*   <div
+*     ref="element"
+*     style="height: 600px; overflow-y: auto;"
+*     @scroll="scroll"
+*   >
+*     <div :style="{ height: `${offset}px` }" />
+*
+*     <div v-for="item in items" :key="item.index">
+*       {{ item.raw.name }}
+*     </div>
+*
+*     <div :style="{ height: `${size}px` }" />
+*   </div>
+* </template>
+* ```
+*/
+function useVirtual(items, _options = {}) {
+	const { itemHeight: _itemHeight, height, overscan = 5, direction = "forward", anchor = "auto", anchorSmooth = true, onStartReached, onEndReached, startThreshold = 0, endThreshold = 0, momentum: momentumOption, elastic: elasticOption } = _options;
+	const element = ref();
+	const itemHeight = shallowRef(Number.parseFloat(String(_itemHeight || 0)));
+	const heights = shallowRef([]);
+	const offsets = shallowRef([]);
+	const first = shallowRef(0);
+	const last = shallowRef(0);
+	const offset = shallowRef(0);
+	const size = shallowRef(0);
+	const viewportHeight = shallowRef(0);
+	const state = shallowRef("ok");
+	const isIOS = IN_BROWSER && /iPad|iPhone|iPod/.test(navigator.userAgent);
+	const momentum = momentumOption ?? isIOS;
+	const elastic = elasticOption ?? isIOS;
+	let raf = -1;
+	let rebuildRaf = -1;
+	let edgeRaf = -1;
+	const cachedViewport = Number.parseInt(String(height)) || 0;
+	let anchorIndex = -1;
+	let anchorOffset = 0;
+	const computedItems = computed(() => items.value.slice(first.value, last.value).map((item, i) => ({
+		raw: item,
+		index: i + first.value
+	})));
+	watch(element, (el) => {
+		if (!IN_BROWSER || !el?.style) return;
+		if (momentum) el.style.webkitOverflowScrolling = "touch";
+		if (!elastic) el.style.overscrollBehavior = "none";
+	});
+	useResizeObserver(element, (entries) => {
+		if (!entries[0]) return;
+		viewportHeight.value = entries[0].contentRect.height;
+		update();
+	});
+	watch(items, (newItems) => {
+		captureAnchor();
+		const length = newItems.length;
+		const newHeights = heights.value.length === length ? heights.value : Array.from({ length }, () => null);
+		if (heights.value !== newHeights) heights.value = newHeights;
+		rebuild();
+	}, { immediate: true });
+	watch(element, () => {
+		if (!element.value) return;
+		if (direction === "reverse" && items.value.length > 0) {
+			const lastIndex = items.value.length - 1;
+			const totalHeight = (offsets.value[lastIndex] || 0) + (heights.value[lastIndex] || itemHeight.value);
+			element.value.scrollTop = totalHeight;
+		}
+		update();
+	});
+	function captureAnchor() {
+		if (!element.value || anchor === "auto") return;
+		if (anchor === "start") {
+			anchorIndex = 0;
+			anchorOffset = 0;
+		} else if (anchor === "end") {
+			anchorIndex = items.value.length - 1;
+			anchorOffset = 0;
+		} else if (/* @__PURE__ */ isFunction(anchor)) {
+			const result = anchor(items.value);
+			if (/* @__PURE__ */ isNumber(result)) {
+				anchorIndex = result;
+				anchorOffset = element.value.scrollTop - (offsets.value[result] || 0);
+			}
+		} else {
+			anchorIndex = first.value;
+			anchorOffset = element.value.scrollTop - (offsets.value[first.value] || 0);
+		}
+	}
+	function restoreAnchor() {
+		if (!element.value || anchorIndex < 0) return;
+		const newScrollTop = (offsets.value[anchorIndex] || 0) + anchorOffset;
+		if (anchorSmooth && direction === "forward") element.value.scrollTo({
+			top: newScrollTop,
+			behavior: "smooth"
+		});
+		else element.value.scrollTop = newScrollTop;
+		anchorIndex = -1;
+		anchorOffset = 0;
+	}
+	function rebuild() {
+		const length = items.value.length;
+		const newOffsets = offsets.value.length === length ? offsets.value : Array.from({ length });
+		let offset$1 = 0;
+		for (let i = 0; i < length; i++) {
+			newOffsets[i] = offset$1;
+			offset$1 += heights.value[i] || itemHeight.value;
+		}
+		if (offsets.value !== newOffsets) offsets.value = newOffsets;
+		update();
+		restoreAnchor();
+	}
+	function findIndex(scrollTop) {
+		const arr = offsets.value;
+		if (arr.length === 0) return 0;
+		let low = 0;
+		let high = arr.length - 1;
+		while (low <= high) {
+			const mid = low + high >> 1;
+			if (arr[mid] <= scrollTop) low = mid + 1;
+			else high = mid - 1;
+		}
+		return Math.max(0, high);
+	}
+	function update() {
+		if (!element.value) return;
+		const viewport = viewportHeight.value || cachedViewport;
+		if (!viewport || !itemHeight.value) return;
+		const scrollTop = element.value.scrollTop || 0;
+		const length = items.value.length;
+		const visibleStart = findIndex(scrollTop);
+		const visibleEnd = findIndex(scrollTop + viewport) + 1;
+		const start = /* @__PURE__ */ clamp(visibleStart - overscan, 0, length);
+		const end = /* @__PURE__ */ clamp(visibleEnd + overscan, start, length);
+		first.value = start;
+		last.value = end;
+		offset.value = offsets.value[start] || 0;
+		const lastIndex = length - 1;
+		const totalHeight = (offsets.value[lastIndex] || 0) + (heights.value[lastIndex] || itemHeight.value);
+		size.value = totalHeight - (offsets.value[end] || totalHeight);
+	}
+	function checkEdges() {
+		if (!element.value) return;
+		const scrollTop = element.value.scrollTop;
+		const scrollHeight = element.value.scrollHeight;
+		const clientHeight = element.value.clientHeight;
+		const distanceFromStart = scrollTop;
+		const distanceFromEnd = scrollHeight - (scrollTop + clientHeight);
+		if (IN_BROWSER) {
+			cancelAnimationFrame(edgeRaf);
+			edgeRaf = requestAnimationFrame(() => {
+				if (onStartReached && distanceFromStart <= startThreshold) onStartReached(distanceFromStart);
+				if (onEndReached && distanceFromEnd <= endThreshold) onEndReached(distanceFromEnd);
+			});
+		} else {
+			if (onStartReached && distanceFromStart <= startThreshold) onStartReached(distanceFromStart);
+			if (onEndReached && distanceFromEnd <= endThreshold) onEndReached(distanceFromEnd);
+		}
+	}
+	function resize(index, height$1) {
+		if (heights.value[index] === height$1) return;
+		heights.value[index] = height$1;
+		if (!itemHeight.value) itemHeight.value = height$1;
+		if (IN_BROWSER) {
+			cancelAnimationFrame(rebuildRaf);
+			rebuildRaf = requestAnimationFrame(rebuild);
+		} else rebuild();
+	}
+	function scroll() {
+		if (IN_BROWSER) {
+			cancelAnimationFrame(raf);
+			raf = requestAnimationFrame(update);
+			checkEdges();
+		} else update();
+	}
+	function scrollTo(index, scrollOptions) {
+		if (!element.value) return;
+		const targetOffset = offsets.value[index] || 0;
+		const behavior = scrollOptions?.behavior ?? "auto";
+		const block = scrollOptions?.block ?? "start";
+		const extraOffset = scrollOptions?.offset ?? 0;
+		let scrollTop = targetOffset + extraOffset;
+		switch (block) {
+			case "center": {
+				const viewport = viewportHeight.value || cachedViewport;
+				const itemH = heights.value[index] || itemHeight.value;
+				scrollTop = targetOffset - viewport / 2 + itemH / 2 + extraOffset;
+				break;
+			}
+			case "end": {
+				const viewport = viewportHeight.value || cachedViewport;
+				const itemH = heights.value[index] || itemHeight.value;
+				scrollTop = targetOffset - viewport + itemH + extraOffset;
+				break;
+			}
+			case "nearest": {
+				const viewport = viewportHeight.value || cachedViewport;
+				const currentScroll = element.value.scrollTop;
+				const itemH = heights.value[index] || itemHeight.value;
+				if (targetOffset < currentScroll) scrollTop = targetOffset + extraOffset;
+				else if (targetOffset + itemH > currentScroll + viewport) scrollTop = targetOffset - viewport + itemH + extraOffset;
+				else return;
+				break;
+			}
+		}
+		if (behavior === "smooth") element.value.scrollTo({
+			top: scrollTop,
+			behavior: "smooth"
+		});
+		else element.value.scrollTop = scrollTop;
+		update();
+	}
+	function reset() {
+		state.value = "ok";
+		anchorIndex = -1;
+		anchorOffset = 0;
+		if (element.value && direction === "reverse" && items.value.length > 0) {
+			const lastIndex = items.value.length - 1;
+			const totalHeight = (offsets.value[lastIndex] || 0) + (heights.value[lastIndex] || itemHeight.value);
+			element.value.scrollTop = totalHeight;
+		}
+	}
+	return {
+		element,
+		items: computedItems,
+		offset: readonly(offset),
+		size: readonly(size),
+		state,
+		scrollTo,
+		scroll,
+		scrollend: scroll,
+		resize,
+		reset
+	};
+}
+
+//#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 };