@vuetify/v0 0.0.13 → 0.0.15

package/dist/{composables-BbLwk7s2.mjs → composables-CrW3IMUM.mjs}

@@ -1,6 +1,6 @@
-import { a as isNull, c as isObject, d as isUndefined, f as mergeDeep, i as isFunction, n as isArray, o as isNullOrUndefined, r as isBoolean, s as isNumber, t as genId, u as isString } from "./utilities-C26nB74O.mjs";
-import { a as SUPPORTS_OBSERVER, i as SUPPORTS_MUTATION_OBSERVER, n as SUPPORTS_INTERSECTION_OBSERVER, s as __LOGGER_ENABLED__, t as IN_BROWSER } from "./globals-Dh0BVnN0.mjs";
-import { computed, getCurrentInstance, getCurrentScope, inject, isRef, onMounted, onScopeDispose, onUnmounted, provide, reactive, readonly, ref, shallowReactive, shallowReadonly, shallowRef, toRef, toValue, unref, watch } from "vue";
+import { a as isBoolean, c as isNull, d as isObject, g as range, h as mergeDeep, i as isArray, l as isNullOrUndefined, m as isUndefined, o as isFunction, p as isString, r as genId, s as isNaN, t as clamp, u as isNumber } from "./utilities-C6o-keMm.mjs";
+import { a as SUPPORTS_OBSERVER, i as SUPPORTS_MUTATION_OBSERVER, n as SUPPORTS_INTERSECTION_OBSERVER, s as __LOGGER_ENABLED__, t as IN_BROWSER } from "./globals-CqryJ9G3.mjs";
+import { computed, effectScope, getCurrentInstance, inject, isRef, onScopeDispose, provide, reactive, readonly, ref, shallowReactive, shallowReadonly, shallowRef, toRef, toValue, unref, watch } from "vue";
 
 //#region src/composables/createContext/index.ts
 /**
@@ -38,7 +38,7 @@ import { computed, getCurrentInstance, getCurrentScope, inject, isRef, onMounted
 */
 function useContext(key, defaultValue) {
 	const context = inject(key, defaultValue);
-	if (context === void 0) throw new Error(`Context "${String(key)}" not found. Ensure it's provided by an ancestor.`);
+	if (/* @__PURE__ */ isUndefined(context)) throw new Error(`Context "${String(key)}" not found. Ensure it's provided by an ancestor.`);
 	return context;
 }
 /**
@@ -356,6 +356,95 @@ 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.
+* @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/useHydration/index.ts
 /**
@@ -402,6 +491,12 @@ function createHydration() {
 		hydrate
 	};
 }
+function createFallbackHydration() {
+	return {
+		isHydrated: shallowReadonly(shallowRef(true)),
+		hydrate: () => {}
+	};
+}
 /**
 * Creates a new hydration context trinity.
 *
@@ -494,7 +589,13 @@ function createHydrationPlugin(_options = {}) {
 * ```
 */
 function useHydration(namespace = "v0:hydration") {
-	return useContext(namespace);
+	const fallback = createFallbackHydration();
+	if (!getCurrentInstance()) return fallback;
+	try {
+		return useContext(namespace, fallback);
+	} catch {
+		return fallback;
+	}
 }
 
 //#endregion
@@ -725,9 +826,9 @@ function createBreakpointsPlugin(_options = {}) {
 				const unwatch = watch(hydration.isHydrated, (hydrated) => {
 					if (hydrated) listener();
 				}, { immediate: true });
-				window.addEventListener("resize", listener, { passive: true });
+				const cleanup = useWindowEventListener("resize", listener, { passive: true });
 				onScopeDispose(() => {
-					window.removeEventListener("resize", listener);
+					cleanup();
 					unwatch();
 				}, true);
 			} });
@@ -762,95 +863,6 @@ function useBreakpoints(namespace = "v0:breakpoints") {
 	return useContext(namespace);
 }
 
-//#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/useLogger/adapters/consola.ts
 var ConsolaLoggerAdapter = class {
@@ -1273,6 +1285,9 @@ function useRegistry(options) {
 	const cache = /* @__PURE__ */ new Map();
 	const listeners = /* @__PURE__ */ new Map();
 	const events = options?.events ?? false;
+	let indexDependentCount = 0;
+	let needsReindex = false;
+	let minDirtyIndex = Infinity;
 	function emit(event, data = void 0) {
 		if (!events) return;
 		const cbs = listeners.get(event);
@@ -1307,13 +1322,15 @@ function useRegistry(options) {
 		let value = existing.value;
 		let valueIsIndex = existing.valueIsIndex;
 		if (hasValue) {
-			if (patch.value === void 0) {
+			if (/* @__PURE__ */ isUndefined(patch.value)) {
 				value = existing.index;
 				valueIsIndex = true;
 			} else {
 				value = patch.value;
 				valueIsIndex = false;
 			}
+			if (valueIsIndex !== existing.valueIsIndex) if (valueIsIndex) indexDependentCount++;
+			else indexDependentCount--;
 			if (!Object.is(value, existing.value)) {
 				unassign(existing.value, id);
 				assign(value, id);
@@ -1333,9 +1350,11 @@ function useRegistry(options) {
 		return updated;
 	}
 	function browse(value) {
+		if (indexDependentCount > 0 && needsReindex) reindex();
 		return catalog.get(value);
 	}
 	function lookup(index) {
+		if (needsReindex) reindex();
 		return directory.get(index);
 	}
 	function has(id) {
@@ -1385,25 +1404,39 @@ function useRegistry(options) {
 		if (catalog.size > 0) catalog.clear();
 		if (directory.size > 0) directory.clear();
 		invalidate();
+		indexDependentCount = 0;
+		needsReindex = false;
+		minDirtyIndex = Infinity;
 		emit("clear:registry");
 	}
 	function invalidate() {
 		if (cache.size > 0) cache.clear();
 	}
 	function reindex() {
-		if (catalog.size > 0) catalog.clear();
-		if (directory.size > 0) directory.clear();
+		const startIndex = minDirtyIndex === Infinity ? 0 : minDirtyIndex;
+		if (startIndex === 0) {
+			if (catalog.size > 0) catalog.clear();
+			if (directory.size > 0) directory.clear();
+		}
 		invalidate();
 		let index = 0;
-		for (const ticket of values()) {
-			if (ticket.index !== index) {
-				ticket.index = index;
-				if (ticket.valueIsIndex) ticket.value = index;
+		for (const ticket of collection.values()) {
+			if (index < startIndex) {
+				index++;
+				continue;
 			}
+			if (startIndex > 0) directory.delete(ticket.index);
+			if (ticket.valueIsIndex) {
+				if (startIndex > 0) unassign(ticket.value, ticket.id);
+				ticket.value = index;
+				assign(ticket.value, ticket.id);
+			} else if (startIndex === 0) assign(ticket.value, ticket.id);
+			ticket.index = index;
 			directory.set(index, ticket.id);
-			assign(ticket.value, ticket.id);
 			index++;
 		}
+		needsReindex = false;
+		minDirtyIndex = Infinity;
 		emit("reindex:registry");
 	}
 	function register(registration = {}) {
@@ -1417,6 +1450,7 @@ function useRegistry(options) {
 		const index = registration.index ?? size;
 		const value = valueIsUndefined ? index : registration.value;
 		const valueIsIndex = valueIsUndefined;
+		if (valueIsIndex) indexDependentCount++;
 		const ticket = {
 			...registration,
 			id,
@@ -1434,15 +1468,40 @@ function useRegistry(options) {
 	function unregister(id) {
 		const ticket = collection.get(id);
 		if (!ticket) return;
+		if (ticket.valueIsIndex) indexDependentCount--;
 		collection.delete(ticket.id);
 		directory.delete(ticket.index);
 		unassign(ticket.value, ticket.id);
 		invalidate();
 		emit("unregister:ticket", ticket);
-		reindex();
+		if (indexDependentCount > 0 && ticket.index < collection.size) {
+			minDirtyIndex = Math.min(minDirtyIndex, ticket.index);
+			reindex();
+		} else {
+			minDirtyIndex = Math.min(minDirtyIndex, ticket.index);
+			needsReindex = true;
+		}
+	}
+	function offboard(ids) {
+		const removed = [];
+		for (const id of ids) {
+			const ticket = collection.get(id);
+			if (!ticket) continue;
+			if (ticket.valueIsIndex) indexDependentCount--;
+			minDirtyIndex = Math.min(minDirtyIndex, ticket.index);
+			collection.delete(ticket.id);
+			directory.delete(ticket.index);
+			unassign(ticket.value, ticket.id);
+			removed.push(ticket);
+		}
+		if (removed.length === 0) return;
+		invalidate();
+		if (events) for (const ticket of removed) emit("unregister:ticket", ticket);
+		needsReindex = true;
 	}
 	function seek(direction = "first", from, predicate) {
 		if (collection.size === 0) return void 0;
+		if (needsReindex) reindex();
 		const tickets = values();
 		const index = /* @__PURE__ */ isUndefined(from) ? void 0 : Math.max(0, Math.min(from, tickets.length - 1));
 		if (direction === "last") {
@@ -1479,8 +1538,9 @@ function useRegistry(options) {
 		reindex,
 		seek,
 		onboard(registrations) {
-			return registrations.map((registration) => this.register(registration));
+			return registrations.map((registration) => register(registration));
 		},
+		offboard,
 		get size() {
 			return collection.size;
 		}
@@ -1501,7 +1561,11 @@ function useRegistry(options) {
 * ```ts
 * import { createRegistryContext } from '@vuetify/v0'
 *
-* export const [useItems, provideItems, items] = createRegistryContext('items')
+* // With default namespace 'v0:registry'
+* export const [useItems, provideItems, items] = createRegistryContext()
+*
+* // Or with custom namespace
+* export const [useItems, provideItems, items] = createRegistryContext({ namespace: 'my-items' })
 *
 * // In a parent component:
 * provideItems()
@@ -1511,8 +1575,8 @@ function useRegistry(options) {
 * items.register({ id: 'item-1', value: 'Value 1' })
 * ```
 */
-function createRegistryContext(_options) {
-	const { namespace,...options } = _options;
+function createRegistryContext(_options = {}) {
+	const { namespace = "v0:registry",...options } = _options;
 	const [useRegistryContext, _provideRegistryContext] = createContext(namespace);
 	const context = useRegistry(options);
 	function provideRegistryContext(_context = context, app) {
@@ -1623,12 +1687,12 @@ function createSelection(_options = {}) {
 		const id = registration.id ?? /* @__PURE__ */ genId();
 		const item = {
 			disabled: false,
-			...registration,
-			id,
-			isSelected: toRef(() => selected(id)),
 			select: () => select(id),
 			unselect: () => unselect(id),
-			toggle: () => toggle(id)
+			toggle: () => toggle(id),
+			isSelected: toRef(() => selected(id)),
+			...registration,
+			id
 		};
 		const ticket = registry.register(item);
 		if (enroll && !toValue(item.disabled)) selectedIds.add(ticket.id);
@@ -1639,6 +1703,13 @@ function createSelection(_options = {}) {
 		selectedIds.delete(id);
 		registry.unregister(id);
 	}
+	function offboard(ids) {
+		for (const id of ids) selectedIds.delete(id);
+		registry.offboard(ids);
+	}
+	function onboard(registrations) {
+		return registrations.map((registration) => register(registration));
+	}
 	function reset() {
 		registry.clear();
 		selectedIds.clear();
@@ -1652,6 +1723,8 @@ function createSelection(_options = {}) {
 		selectedValues,
 		register,
 		unregister,
+		onboard,
+		offboard,
 		reset,
 		mandate,
 		seek,
@@ -1667,7 +1740,6 @@ function createSelection(_options = {}) {
 /**
 * Creates a new selection context.
 *
-* @param namespace The namespace for the selection context.
 * @param options The options for the selection context.
 * @template Z The type of the selection ticket.
 * @template E The type of the selection context.
@@ -1679,7 +1751,11 @@ function createSelection(_options = {}) {
 * ```ts
 * import { createSelectionContext } from '@vuetify/v0'
 *
-* export const [useCheckboxes, provideCheckboxes, checkboxes] = createSelectionContext('checkboxes')
+* // With default namespace 'v0:selection'
+* export const [useCheckboxes, provideCheckboxes, checkboxes] = createSelectionContext()
+*
+* // Or with custom namespace
+* export const [useCheckboxes, provideCheckboxes, checkboxes] = createSelectionContext({ namespace: 'checkboxes' })
 *
 * // In a parent component:
 * provideCheckboxes()
@@ -1689,8 +1765,8 @@ function createSelection(_options = {}) {
 * checkboxes.select('checkbox-1')
 * ```
 */
-function createSelectionContext(_options) {
-	const { namespace,...options } = _options;
+function createSelectionContext(_options = {}) {
+	const { namespace = "v0:selection",...options } = _options;
 	const [useSelectionContext, _provideSelectionContext] = createContext(namespace);
 	const context = createSelection(options);
 	function provideSelectionContext(_context = context, app) {
@@ -1726,58 +1802,138 @@ function useSelection(namespace = "v0:selection") {
 }
 
 //#endregion
-//#region src/composables/useGroup/index.ts
+//#region src/composables/useProxyRegistry/index.ts
 /**
-* @module useGroup
+* @module useProxyRegistry
 *
 * @remarks
-* Multi-selection composable that extends useSelection with batch operation support.
+* Proxy composable for reactive registry keys, values, entries, and size.
 *
 * Key features:
-* - Batch operations (select/unselect/toggle accept ID | ID[])
-* - selectedIndexes computed Set for position-based tracking
-* - Perfect for checkboxes, multi-select dropdowns, filter panels
+* - Reactive proxy for registry data
+* - Deep or shallow reactivity options
+* - Event-based updates
+* - Automatic cleanup on scope disposal
+* - Transforms Map-based registry into reactive refs
 *
-* Inheritance chain: useRegistry → useSelection → useGroup
-* Extended by: useFeatures
+* Perfect for exposing registry data as reactive computed properties.
 */
 /**
-* Creates a new group instance with batch selection operations.
-*
-* Extends `createSelection` to support selecting, unselecting, and toggling multiple items
-* at once by passing an array of IDs. Adds `selectedIndexes` computed property.
-*
-* @param options The options for the group instance.
-* @template Z The type of the group ticket.
-* @template E The type of the group context.
-* @returns A new group instance with batch selection support.
-*
-* @remarks
-* **Key Differences from `createSelection`:**
-* - `select()` accepts `ID | ID[]` for batch operations
-* - `unselect()` accepts `ID | ID[]` for batch operations
-* - `toggle()` accepts `ID | ID[]` for batch operations
-* - Adds `selectedIndexes` computed Set for getting selected item indexes
-* - Perfect for checkboxes, multi-select dropdowns, and bulk operations
-*
-* **Batch Operations:**
-* - Single ID: `group.select('item-1')`
-* - Array of IDs: `group.select(['item-1', 'item-2', 'item-3'])`
-* - Uses `toArray()` utility internally to normalize input
-* - Disabled items are automatically skipped in batch operations
-* - Non-existent IDs are silently ignored
-*
-* **Inheritance Chain:**
-* `useRegistry` → `createSelection` → `createGroup`
+* Creates a proxy registry that provides reactive objects for registry data.
 *
-* **Used By:**
-* - `createFeatures` for feature flag management with multiple selections
+* @param registry The registry instance to proxy.
+* @param options The options for the proxy registry.
+* @template Z The type of the registry ticket.
+* @returns A proxy registry with reactive objects.
 *
-* @see https://0.vuetifyjs.com/composables/selection/use-group
+* @see https://0.vuetifyjs.com/composables/registration/use-proxy-registry
 *
 * @example
 * ```ts
-* import { createGroup } from '@vuetify/v0'
+* import { useRegistry, useProxyRegistry } from '@vuetify/v0'
+*
+* const registry = useRegistry({ events: true })
+* const proxy = useProxyRegistry(registry)
+*
+* registry.register({ value: 'Item 1' })
+* console.log(proxy.size) // 1
+* ```
+*/
+function useProxyRegistry(registry, options) {
+	const state = (options?.deep ? reactive : shallowReactive)({
+		keys: registry.keys(),
+		values: registry.values(),
+		entries: registry.entries(),
+		size: registry.size
+	});
+	function update() {
+		state.keys = registry.keys();
+		state.values = registry.values();
+		state.entries = registry.entries();
+		state.size = registry.size;
+	}
+	registry.on("register:ticket", update);
+	registry.on("unregister:ticket", update);
+	registry.on("update:ticket", update);
+	registry.on("clear:registry", update);
+	onScopeDispose(() => {
+		registry.off("register:ticket", update);
+		registry.off("unregister:ticket", update);
+		registry.off("update:ticket", update);
+		registry.off("clear:registry", update);
+	}, true);
+	return state;
+}
+
+//#endregion
+//#region src/composables/useGroup/index.ts
+/**
+* @module useGroup
+*
+* @remarks
+* Multi-selection composable that extends useSelection with batch operations and tri-state support.
+*
+* Key features:
+* - Batch operations (select/unselect/toggle accept ID | ID[])
+* - Tri-state support via mixed/indeterminate state (mix/unmix)
+* - selectedIndexes computed Set for position-based tracking
+* - Perfect for checkbox trees, multi-select dropdowns, filter panels
+*
+* Tri-state behavior:
+* - Items can be selected, mixed (indeterminate), or unselected
+* - select() clears mixed state, mix() clears selected state (mutually exclusive)
+* - toggle() on a mixed item selects it (resolves positively)
+*
+* Inheritance chain: useRegistry → useSelection → useGroup
+* Extended by: useFeatures
+*/
+/**
+* Creates a new group instance with batch selection and tri-state support.
+*
+* Extends `createSelection` to support selecting, unselecting, and toggling multiple items
+* at once by passing an array of IDs. Adds tri-state (mixed/indeterminate) support for
+* checkbox trees and similar use cases.
+*
+* @param options The options for the group instance.
+* @template Z The type of the group ticket.
+* @template E The type of the group context.
+* @returns A new group instance with batch selection and tri-state support.
+*
+* @remarks
+* **Key Differences from `createSelection`:**
+* - `select()` accepts `ID | ID[]` for batch operations
+* - `unselect()` accepts `ID | ID[]` for batch operations
+* - `toggle()` accepts `ID | ID[]` for batch operations
+* - Adds `selectedIndexes` computed Set for getting selected item indexes
+* - Adds tri-state support via `mix()`, `unmix()`, `mixed()`, `mixedIds`, `mixedItems`
+* - Perfect for checkbox trees, multi-select dropdowns, and bulk operations
+*
+* **Tri-State Support:**
+* - Items can be in one of three states: selected, mixed (indeterminate), or unselected
+* - `mix(id)` sets item to mixed state (clears selected if set)
+* - `unmix(id)` clears mixed state
+* - `select(id)` clears mixed state before selecting
+* - `toggle(id)` on a mixed item selects it (resolves the indeterminate state positively)
+* - Mixed state works on disabled items (it's a computed state, not user action)
+*
+* **Batch Operations:**
+* - Single ID: `group.select('item-1')`
+* - Array of IDs: `group.select(['item-1', 'item-2', 'item-3'])`
+* - Uses `toArray()` utility internally to normalize input
+* - Disabled items are automatically skipped in select operations
+* - Non-existent IDs are silently ignored
+*
+* **Inheritance Chain:**
+* `useRegistry` → `createSelection` → `createGroup`
+*
+* **Used By:**
+* - `createFeatures` for feature flag management with multiple selections
+*
+* @see https://0.vuetifyjs.com/composables/selection/use-group
+*
+* @example
+* ```ts
+* import { createGroup } from '@vuetify/v0'
 *
 * const checkboxes = createGroup()
 *
@@ -1793,45 +1949,148 @@ function useSelection(namespace = "v0:selection") {
 * console.log(checkboxes.selectedIds) // Set { 'option-a', 'option-c' }
 * console.log(Array.from(checkboxes.selectedIndexes.value)) // [0, 2]
 *
-* // Toggle operations
-* checkboxes.toggle(['option-a', 'option-b'])
-* console.log(checkboxes.selectedIds) // Set { 'option-b', 'option-c' }
+* // Set item to mixed/indeterminate state
+* checkboxes.mix('option-a')
+* console.log(checkboxes.mixedIds) // Set { 'option-a' }
+* console.log(checkboxes.selectedIds) // Set { 'option-c' } (option-a removed)
+*
+* // Toggle a mixed item selects it
+* checkboxes.toggle('option-a')
+* console.log(checkboxes.selectedIds) // Set { 'option-a', 'option-c' }
+* console.log(checkboxes.mixedIds) // Set {} (cleared)
 * ```
 */
 function createGroup(_options = {}) {
 	const { mandatory = false, multiple = true,...options } = _options;
-	const registry = createSelection({
+	const selection = createSelection({
 		...options,
 		mandatory,
-		multiple
+		multiple,
+		events: true
 	});
+	const proxy = useProxyRegistry(selection);
+	const mixedIds = shallowReactive(/* @__PURE__ */ new Set());
 	const selectedIndexes = computed(() => {
-		return new Set(Array.from(registry.selectedItems.value).map((item) => item?.index));
+		return new Set(Array.from(selection.selectedItems.value).map((item) => item?.index));
 	});
+	const mixedItems = computed(() => {
+		return new Set(Array.from(mixedIds).map((id) => selection.get(id)));
+	});
+	function mixed(id) {
+		return mixedIds.has(id);
+	}
+	function mix(ids) {
+		for (const id of toArray(ids)) {
+			if (!selection.has(id)) continue;
+			selection.selectedIds.delete(id);
+			mixedIds.add(id);
+		}
+	}
+	function unmix(ids) {
+		for (const id of toArray(ids)) mixedIds.delete(id);
+	}
 	function select(ids) {
-		for (const id of toArray(ids)) registry.select(id);
+		for (const id of toArray(ids)) {
+			mixedIds.delete(id);
+			selection.select(id);
+		}
 	}
 	function unselect(ids) {
-		for (const id of toArray(ids)) registry.unselect(id);
+		for (const id of toArray(ids)) selection.unselect(id);
 	}
 	function toggle(ids) {
-		for (const id of toArray(ids)) registry.toggle(id);
+		for (const id of toArray(ids)) if (mixed(id)) select(id);
+		else selection.toggle(id);
+	}
+	function register(registration = {}) {
+		const id = registration.id ?? /* @__PURE__ */ genId();
+		const item = {
+			...registration,
+			id,
+			isMixed: toRef(() => mixed(id)),
+			select: () => select(id),
+			unselect: () => unselect(id),
+			toggle: () => toggle(id),
+			mix: () => mix(id),
+			unmix: () => unmix(id)
+		};
+		const ticket = selection.register(item);
+		if (toValue(registration.indeterminate)) mix(id);
+		return ticket;
+	}
+	function unregister(id) {
+		mixedIds.delete(id);
+		selection.unregister(id);
+	}
+	function offboard(ids) {
+		for (const id of ids) mixedIds.delete(id);
+		selection.offboard(ids);
+	}
+	function onboard(registrations) {
+		return registrations.map((registration) => register(registration));
+	}
+	function reset() {
+		mixedIds.clear();
+		selection.reset();
+	}
+	const selectableItems = computed(() => {
+		return proxy.values.filter((item) => !toValue(item.disabled));
+	});
+	const isAllSelected = computed(() => {
+		const items = selectableItems.value;
+		if (items.length === 0) return false;
+		return items.every((item) => selection.selectedIds.has(item.id));
+	});
+	const isMixed = toRef(() => {
+		return mixedIds.size > 0 || !isNoneSelected.value && !isAllSelected.value;
+	});
+	const isNoneSelected = toRef(() => selection.selectedIds.size === 0);
+	function selectAll() {
+		for (const item of selectableItems.value) {
+			mixedIds.delete(item.id);
+			selection.select(item.id);
+		}
+	}
+	function unselectAll() {
+		const first = selection.selectedIds.values().next().value;
+		selection.selectedIds.clear();
+		if (!mandatory || !first) return;
+		selection.select(first);
+	}
+	function toggleAll() {
+		if (isAllSelected.value) unselectAll();
+		else selectAll();
 	}
 	return {
-		...registry,
+		...selection,
+		mixed,
+		mix,
+		unmix,
 		select,
 		unselect,
 		toggle,
+		register,
+		unregister,
+		offboard,
+		onboard,
+		reset,
+		selectAll,
+		unselectAll,
+		toggleAll,
+		mixedIds,
+		mixedItems,
 		selectedIndexes,
+		isNoneSelected,
+		isAllSelected,
+		isMixed,
 		get size() {
-			return registry.size;
+			return selection.size;
 		}
 	};
 }
 /**
 * Creates a new group context.
 *
-* @param namespace The namespace for the group context.
 * @param options The options for the group context.
 * @template Z The type of the group ticket.
 * @template E The type of the group context.
@@ -1843,7 +2102,11 @@ function createGroup(_options = {}) {
 * ```ts
 * import { createGroupContext } from '@vuetify/v0'
 *
-* export const [useMyGroup, provideMyGroup, myGroup] = createGroupContext('my-group')
+* // With default namespace 'v0:group'
+* export const [useMyGroup, provideMyGroup, myGroup] = createGroupContext()
+*
+* // Or with custom namespace
+* export const [useMyGroup, provideMyGroup, myGroup] = createGroupContext({ namespace: 'my-group' })
 *
 * // In a parent component:
 * provideMyGroup()
@@ -1852,8 +2115,8 @@ function createGroup(_options = {}) {
 * const group = useMyGroup()
 * ```
 */
-function createGroupContext(_options) {
-	const { namespace,...options } = _options;
+function createGroupContext(_options = {}) {
+	const { namespace = "v0:group",...options } = _options;
 	const [useGroupContext, _provideGroupContext] = createContext(namespace);
 	const context = createGroup(options);
 	function provideGroupContext(_context = context, app) {
@@ -1884,7 +2147,7 @@ function createGroupContext(_options) {
 * </template>
 * ```
 */
-function useGroup(namespace) {
+function useGroup(namespace = "v0:group") {
 	return useContext(namespace);
 }
 
@@ -1948,9 +2211,10 @@ function createTokens(tokens = {}, options = {}) {
 	function resolve(token, visited = /* @__PURE__ */ new Set()) {
 		const cacheKey = /* @__PURE__ */ isString(token) ? token : JSON.stringify(token);
 		const cached = cache.get(cacheKey);
-		if (cached !== void 0) return cached;
+		if (!/* @__PURE__ */ isUndefined(cached)) return cached;
 		const reference = isTokenAlias(token) ? token.$value : token;
-		const clean = /* @__PURE__ */ isString(reference) && isAlias(reference) ? reference.slice(1, -1) : String(reference);
+		const isAliasReference = /* @__PURE__ */ isString(reference) && isAlias(reference);
+		const clean = isAliasReference ? reference.slice(1, -1) : String(reference);
 		if (visited.has(clean)) {
 			logger.warn(`Circular alias detected for "${clean}"`);
 			cache.set(cacheKey, void 0);
@@ -1965,15 +2229,15 @@ function createTokens(tokens = {}, options = {}) {
 				const prefix = parts.slice(0, i).join(".");
 				const suffix = parts.slice(i);
 				const candidate = registry.get(prefix);
-				if (candidate?.value !== void 0) {
+				if (!/* @__PURE__ */ isUndefined(candidate?.value)) {
 					found = candidate;
 					segments = suffix;
 					break;
 				}
 			}
 		}
-		if (found?.value === void 0) {
-			logger.warn(`Alias not found for "${String(reference)}"`);
+		if (/* @__PURE__ */ isUndefined(found?.value)) {
+			if (isAliasReference) logger.warn(`Alias not found for "${String(reference)}"`);
 			cache.set(cacheKey, void 0);
 			return;
 		}
@@ -1989,7 +2253,7 @@ function createTokens(tokens = {}, options = {}) {
 				current = current[segment];
 				if (isTokenAlias(current)) current = current.$value;
 			}
-			if (current === void 0) {
+			if (/* @__PURE__ */ isUndefined(current)) {
 				logger.warn(`Path not found inside "${clean}": ${segments.join(".")}`);
 				cache.set(cacheKey, void 0);
 				return;
@@ -2040,7 +2304,7 @@ function createTokens(tokens = {}, options = {}) {
 * ```
 */
 function createTokensContext(_options) {
-	const { namespace, tokens = {},...options } = _options;
+	const { namespace = "v0:tokens", tokens = {},...options } = _options;
 	const [useTokensContext, _provideTokensContext] = createContext(namespace);
 	const context = createTokens(tokens, options);
 	function provideTokensContext(_context = context, app) {
@@ -2360,7 +2624,7 @@ function defaultFilter(query, item, keys, mode = "some") {
 * @template Z The type of the items.
 * @returns The filtered items.
 *
-* @see https://0.vuetifyjs.com/composables/selection/use-filter
+* @see https://0.vuetifyjs.com/composables/utilities/use-filter
 *
 * @example
 * ```ts
@@ -2460,7 +2724,7 @@ function createForm(options) {
 			if (ticket.isValid.value === false) return false;
 			if (ticket.isValid.value === null) return null;
 		}
-		return hasFields || null;
+		return hasFields ? true : null;
 	});
 	function reset() {
 		for (const ticket of registry.values()) ticket.reset();
@@ -2550,7 +2814,6 @@ function createForm(options) {
 /**
 * Creates a new form context.
 *
-* @param namespace The namespace for the 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.
@@ -2562,7 +2825,12 @@ function createForm(options) {
 * ```ts
 * import { createFormContext } from '@vuetify/v0'
 *
-* export const [useMyForm, provideMyForm, myForm] = createFormContext('my-form', {
+* // 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',
 * })
 *
@@ -2574,8 +2842,8 @@ function createForm(options) {
 * form.register({ id: 'field', value: ref(''), rules: [...] })
 * ```
 */
-function createFormContext(_options) {
-	const { namespace,...options } = _options;
+function createFormContext(_options = {}) {
+	const { namespace = "v0:form",...options } = _options;
 	const [useFormContext, _provideFormContext] = createContext(namespace);
 	const context = createForm(options);
 	function provideFormContext(_context = context, app) {
@@ -2672,6 +2940,7 @@ function useIntersectionObserver(target, callback, options = {}) {
 	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) => {
@@ -2725,10 +2994,11 @@ function useIntersectionObserver(target, callback, options = {}) {
 	function stop() {
 		cleanup();
 	}
-	onUnmounted(stop);
+	onScopeDispose(stop, true);
 	return {
-		isIntersecting: readonly(isIntersecting),
-		isPaused: readonly(isPaused),
+		isActive: shallowReadonly(isActive),
+		isIntersecting: shallowReadonly(isIntersecting),
+		isPaused: shallowReadonly(isPaused),
 		pause,
 		resume,
 		stop
@@ -2765,7 +3035,7 @@ function useIntersectionObserver(target, callback, options = {}) {
 function useElementIntersection(target, options = {}) {
 	const isIntersecting = shallowRef(false);
 	const intersectionRatio = shallowRef(0);
-	const { pause: _pause, resume, stop, isPaused } = useIntersectionObserver(target, (entries) => {
+	const { pause: _pause, resume, stop, isActive, isPaused } = useIntersectionObserver(target, (entries) => {
 		const entry = entries.at(-1);
 		if (entry) {
 			isIntersecting.value = entry.isIntersecting;
@@ -2781,8 +3051,9 @@ function useElementIntersection(target, options = {}) {
 		_pause();
 	}
 	return {
-		isIntersecting: readonly(isIntersecting),
-		intersectionRatio: readonly(intersectionRatio),
+		isIntersecting: shallowReadonly(isIntersecting),
+		intersectionRatio: shallowReadonly(intersectionRatio),
+		isActive,
 		isPaused,
 		pause,
 		resume,
@@ -2802,7 +3073,7 @@ function useElementIntersection(target, options = {}) {
 * - Key-specific event handling
 * - preventDefault and stopPropagation options
 * - Automatic cleanup on scope disposal
-* - Auto-starts when in component scope
+* - Built on useEventListener for consistent event handling
 *
 * Simplified wrapper around useEventListener for keyboard interactions.
 */
@@ -2818,36 +3089,44 @@ function useElementIntersection(target, options = {}) {
 * ```ts
 * import { useKeydown } from '@vuetify/v0'
 *
-* const { startListening, stopListening } = useKeydown([
+* const { isActive, start, stop } = useKeydown([
 *   { key: 'Enter', handler: () => console.log('Enter pressed') },
 *   { key: 'Escape', handler: () => console.log('Escape pressed'), preventDefault: true },
 * ])
 *
-* startListening()
-* stopListening()
+* // Listener is automatically active when called in component setup
+* // Manually control if needed:
+* stop()
+* start()
 * ```
 */
 function useKeydown(handlers) {
-	const keyHandlers = Array.isArray(handlers) ? handlers : [handlers];
+	let cleanup = null;
+	const isActive = toRef(() => !!cleanup);
 	function onKeydown(event) {
-		const handler = keyHandlers.find((h$1) => h$1.key === event.key);
+		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 startListening() {
-		document.addEventListener("keydown", onKeydown);
+	function start() {
+		if (cleanup) return;
+		cleanup = useDocumentEventListener("keydown", onKeydown);
 	}
-	function stopListening() {
-		document.removeEventListener("keydown", onKeydown);
+	function stop() {
+		if (!cleanup) return;
+		cleanup();
+		cleanup = null;
 	}
-	if (getCurrentScope()) onMounted(startListening);
-	onScopeDispose(stopListening, true);
+	cleanup = useDocumentEventListener("keydown", onKeydown);
+	onScopeDispose(stop);
 	return {
-		startListening,
-		stopListening
+		isActive,
+		start,
+		stop
 	};
 }
 
@@ -2951,7 +3230,6 @@ function createSingle(_options = {}) {
 /**
 * Creates a new single selection context.
 *
-* @param namespace The namespace for the single selection context.
 * @param options The options for the single selection context.
 * @template Z The type of the single selection ticket.
 * @template E The type of the single selection context.
@@ -2963,18 +3241,19 @@ function createSingle(_options = {}) {
 * ```ts
 * import { createSingleContext } from '@vuetify/v0'
 *
-* export const [useTabs, provideTabs, tabs] = createSingleContext('tabs', { mandatory: true })
+* // With default namespace 'v0:single'
+* export const [useSingle, provideSingle, context] = createSingleContext()
 *
 * // In a parent component:
-* provideTabs()
+* provideSingle()
 *
 * // In a child component:
-* const tabs = useTabs()
-* tabs.select('tab-1')
+* const single = useSingle()
+* single.select('tab-1')
 * ```
 */
-function createSingleContext(_options) {
-	const { namespace,...options } = _options;
+function createSingleContext(_options = {}) {
+	const { namespace = "v0:single",...options } = _options;
 	const [useSingleContext, _provideSingleContext] = createContext(namespace);
 	const context = createSingle(options);
 	function provideSingleContext(_context = context, app) {
@@ -3016,7 +3295,7 @@ function useSingle(namespace = "v0:single") {
 *
 * This adapter provides translation and number formatting
 * capabilities using the Intl API and supports both
-* numbered and named variables in translation strings.
+* numbered ({0}, {1}) and named ({name}) variables in translation strings.
 */
 var Vuetify0LocaleAdapter = class {
 	t(message, ...params) {
@@ -3024,13 +3303,13 @@ var Vuetify0LocaleAdapter = class {
 		if (params.length > 0 && /* @__PURE__ */ isObject(params[0])) {
 			const variables = params[0];
 			resolvedMessage = resolvedMessage.replace(/{([a-zA-Z][a-zA-Z0-9_]*)}/g, (match, name) => {
-				return variables[name] === void 0 ? match : String(variables[name]);
+				return /* @__PURE__ */ isUndefined(variables[name]) ? match : String(variables[name]);
 			});
 			params = params.slice(1);
 		}
 		resolvedMessage = resolvedMessage.replace(/\{(\d+)\}/g, (match, index) => {
 			const idx = Number.parseInt(index, 10);
-			if (params[idx] !== void 0) return String(params[idx]);
+			if (!/* @__PURE__ */ isUndefined(params[idx])) return String(params[idx]);
 			return match;
 		});
 		return resolvedMessage;
@@ -3071,21 +3350,20 @@ var Vuetify0LocaleAdapter = class {
 */
 function createLocale(_options = {}) {
 	const { adapter = new Vuetify0LocaleAdapter(), messages = {},...options } = _options;
-	const tokens = createTokens(messages, { flat: true });
+	const tokens = createTokens(messages);
 	const registry = createSingle(options);
 	for (const id in messages) {
-		registry.register({
-			id,
-			value: messages[id]
-		});
+		registry.register({ id });
 		if (id === options.default && !registry.selectedId.value) registry.select(id);
 	}
-	function t(key, ...params) {
+	function t(key, params, fallback) {
 		const locale = registry.selectedId.value;
-		if (!locale) return key;
-		const message = (registry.get(locale)?.value)?.[key];
-		const template = /* @__PURE__ */ isString(message) ? resolve(locale, message) : key;
-		return adapter.t(template, ...params);
+		const args = toArray(params);
+		if (!locale) return adapter.t(fallback ?? key, ...args);
+		const path = `${locale}.${key}`;
+		const message = tokens.get(path)?.value;
+		const template = /* @__PURE__ */ isString(message) ? resolve(locale, message) : fallback ?? key;
+		return adapter.t(template, ...args);
 	}
 	function n(value, ...params) {
 		return adapter.n(value, registry.selectedId.value, ...params);
@@ -3093,17 +3371,10 @@ function createLocale(_options = {}) {
 	function resolve(locale, str) {
 		return str.replace(/{([a-zA-Z0-9.-_]+)}/g, (match, key) => {
 			const [prefix, ...rest] = key.split(".");
-			const path = rest.join(".");
-			const prefixTicket = registry.get(prefix);
-			const target = prefixTicket ? prefix : locale;
-			const name = prefixTicket ? path : key;
-			const resolved = (registry.get(target)?.value)?.[name];
+			const target = registry.has(prefix) ? prefix : locale;
+			const path = `${target}.${registry.has(prefix) ? rest.join(".") : key}`;
+			const resolved = tokens.get(path)?.value;
 			if (/* @__PURE__ */ isString(resolved)) return resolve(target, resolved);
-			const alias = `{${key}}`;
-			if (tokens.isAlias(alias)) {
-				const result = tokens.resolve(alias);
-				return /* @__PURE__ */ isString(result) ? result : match;
-			}
 			return match;
 		});
 	}
@@ -3116,6 +3387,13 @@ function createLocale(_options = {}) {
 		}
 	};
 }
+function createLocaleFallback() {
+	return {
+		size: 0,
+		t: (key, _params, fallback) => fallback ?? key,
+		n: String
+	};
+}
 /**
 * Creates a new locale context.
 *
@@ -3190,7 +3468,13 @@ function createLocalePlugin(_options = {}) {
 * @see https://0.vuetifyjs.com/composables/plugins/use-locale
 */
 function useLocale(namespace = "v0:locale") {
-	return useContext(namespace);
+	const fallback = createLocaleFallback();
+	if (!getCurrentInstance()) return fallback;
+	try {
+		return useContext(namespace, fallback);
+	} catch {
+		return fallback;
+	}
 }
 
 //#endregion
@@ -3258,6 +3542,7 @@ 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,
@@ -3324,9 +3609,10 @@ function useMutationObserver(target, callback, options = {}) {
 	function stop() {
 		cleanup();
 	}
-	onUnmounted(stop);
+	onScopeDispose(stop, true);
 	return {
-		isPaused: readonly(isPaused),
+		isActive: shallowReadonly(isActive),
+		isPaused: shallowReadonly(isPaused),
 		pause,
 		resume,
 		stop
@@ -3334,360 +3620,881 @@ function useMutationObserver(target, callback, options = {}) {
 }
 
 //#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
+//#region src/composables/useResizeObserver/index.ts
 /**
-* @module usePermissions
-*
-* @see https://0.vuetifyjs.com/composables/plugins/use-permissions
+* @module useResizeObserver
 *
 * @remarks
-* Permission management composable with support for RBAC and ABAC patterns.
+* ResizeObserver composable with lifecycle management.
 *
 * 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
+* - ResizeObserver API wrapper
+* - Pause/resume/stop functionality
+* - Automatic cleanup on unmount
+* - SSR-safe (checks SUPPORTS_OBSERVER)
+* - Hydration-aware
+* - Box model options (content-box/border-box)
 *
-* Built on useTokens for flexible permission configuration.
+* Perfect for responsive components and size-based rendering.
 */
 /**
-* Creates a new permissions instance.
+* A composable that uses the Resize Observer API to detect when an element's
+* size changes.
 *
-* @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.
+* @param target The element to observe.
+* @param callback The callback to execute when the element's size changes.
+* @param options The options for the Resize Observer.
+* @returns An object with methods to control the observer.
 *
-* @see https://0.vuetifyjs.com/composables/plugins/use-permissions
+* @see https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
+* @see https://0.vuetifyjs.com/composables/system/use-resize-observer
 *
 * @example
 * ```ts
-* import { createPermissions } from '@vuetify/v0'
+* import { ref } from 'vue'
+* import { useResizeObserver } 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.
+* const el = ref<HTMLElement>()
+* const width = ref(0)
+* const height = ref(0)
 *
-* @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.
+* const { pause, resume, isPaused } = useResizeObserver(
+*   el,
+*   (entries) => {
+*     const entry = entries[0]
+*     if (entry) {
+*       width.value = entry.contentRect.width
+*       height.value = entry.contentRect.height
+*       console.log('Size changed:', width.value, 'x', height.value)
+*     }
+*   },
+*   { immediate: true }
+* )
 *
-* @see https://0.vuetifyjs.com/composables/plugins/use-permissions
+* // Pause observation
+* pause()
 *
-* @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']],
-*   },
-* })
+* // Resume observation
+* resume()
 * ```
 */
-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);
+function useResizeObserver(target, callback, options = {}) {
+	const { isHydrated } = useHydration();
+	const observer = shallowRef();
+	const isPaused = shallowRef(false);
+	const isActive = toRef(() => !!observer.value);
+	function setup() {
+		if (!isHydrated.value || !SUPPORTS_OBSERVER || !target.value || isPaused.value) return;
+		observer.value = new ResizeObserver((entries) => {
+			callback(entries.map((entry) => ({
+				contentRect: {
+					width: entry.contentRect.width,
+					height: entry.contentRect.height,
+					top: entry.contentRect.top,
+					left: entry.contentRect.left
+				},
+				target: entry.target
+			})));
+		});
+		observer.value.observe(target.value, { box: options.box || "content-box" });
+		if (options.immediate) {
+			const rect = target.value.getBoundingClientRect();
+			callback([{
+				contentRect: {
+					width: rect.width,
+					height: rect.height,
+					top: rect.top,
+					left: rect.left
+				},
+				target: target.value
+			}]);
+		}
 	}
-	return createTrinity(usePermissionsContext, providePermissionsContext, context);
+	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
+	};
 }
 /**
-* Creates a new permissions plugin.
+* A convenience composable that uses the Resize Observer API to track an
+* element's size.
 *
-* @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.
+* @param target The element to observe.
+* @returns An object with the element's width and height.
 *
-* @see https://0.vuetifyjs.com/composables/plugins/use-permissions
+* @see https://0.vuetifyjs.com/composables/system/use-resize-observer#use-element-size
 *
 * @example
 * ```ts
-* import { createApp } from 'vue'
-* import { createPermissionsPlugin } from '@vuetify/v0'
-* import App from './App.vue'
+* import { ref, watchEffect } from 'vue'
+* import { useElementSize } from '@vuetify/v0'
 *
-* const app = createApp(App)
+* const box = ref<HTMLElement>()
+* const { width, height } = useElementSize(box)
 *
-* app.use(
-*   createPermissionsPlugin({
-*     permissions: {
-*       admin: [['read', 'users']],
-*       editor: [['edit', 'posts']],
-*     },
+* // Width and height are reactive refs
+* watchEffect(() => {
+*   console.log('Box size:', width.value, 'x', height.value)
+* })
+* ```
+*/
+function useElementSize(target) {
+	const width = shallowRef(0);
+	const height = shallowRef(0);
+	const { pause: _pause, resume, stop, isActive, isPaused } = useResizeObserver(target, (entries) => {
+		const entry = entries[0];
+		if (entry) {
+			width.value = entry.contentRect.width;
+			height.value = entry.contentRect.height;
+		}
+	}, { immediate: true });
+	function pause() {
+		width.value = 0;
+		height.value = 0;
+		_pause();
+	}
+	return {
+		width,
+		height,
+		isActive,
+		isPaused,
+		pause,
+		resume,
+		stop
+	};
+}
+
+//#endregion
+//#region src/composables/useOverflow/index.ts
+/**
+* @module useOverflow
+*
+* @remarks
+* Composable for computing how many items fit in a container based on available width.
+* Enables responsive truncation logic for Pagination, Breadcrumbs, and similar components.
+*
+* Key features:
+* - Container width tracking via ResizeObserver
+* - Two modes: variable-width (per-item) or uniform-width (sample-based)
+* - Computes capacity (how many items fit)
+* - SSR-safe with Infinity fallback
+* - Supports reserved space for nav buttons, ellipsis, etc.
+*
+* Use variable mode (default) for items with different widths like Breadcrumbs.
+* Use uniform mode (itemWidth option) for same-width items like Pagination buttons.
+*/
+/**
+* Creates a new overflow context for computing how many items fit in a container.
+*
+* @param options Configuration options
+* @returns Overflow context with container ref, capacity, and measurement functions
+*
+* @example Variable-width mode (Breadcrumbs)
+* ```vue
+* <script lang="ts" setup>
+*   import { useTemplateRef } from 'vue'
+*   import { createOverflow } from '@vuetify/v0'
+*
+*   const containerRef = useTemplateRef('container')
+*   const overflow = createOverflow({
+*     container: containerRef,
+*     gap: 8,
+*     reserved: 40,
 *   })
-* )
+* <\/script>
 *
-* app.mount('#app')
+* <template>
+*   <div ref="container">
+*     <span
+*       v-for="(item, i) in items.slice(0, overflow.capacity.value)"
+*       :key="i"
+*       :ref="el => overflow.measure(i, el)"
+*     >
+*       {{ item }}
+*     </span>
+*     <span v-if="overflow.isOverflowing.value">...</span>
+*   </div>
+* </template>
+* ```
+*
+* @example Uniform-width mode (Pagination)
+* ```ts
+* const overflow = createOverflow({
+*   container: () => atom.value?.element,
+*   itemWidth: buttonWidth,
+*   reserved: () => buttonWidth.value * 4,
+* })
 * ```
 */
-function createPermissionsPlugin(_options = {}) {
-	const { namespace = "v0:permissions",...options } = _options;
-	const [, providePermissionContext, context] = createPermissionsContext({
-		...options,
-		namespace
-	});
-	return createPlugin({
-		namespace,
-		provide: (app) => {
-			providePermissionContext(context, app);
+function createOverflow(options = {}) {
+	const { container: _container, gap = 0, reserved = 0, itemWidth, reverse } = options;
+	const container = /* @__PURE__ */ isUndefined(_container) ? shallowRef() : toRef(_container);
+	const widths = shallowRef(/* @__PURE__ */ new Map());
+	const { width } = useElementSize(container);
+	function measure(index, el) {
+		if (!el) {
+			if (widths.value.has(index)) {
+				const next = new Map(widths.value);
+				next.delete(index);
+				widths.value = next;
+			}
+			return;
+		}
+		const style = getComputedStyle(el);
+		const marginX = Number.parseFloat(style.marginLeft) + Number.parseFloat(style.marginRight);
+		const w = el.offsetWidth + marginX;
+		if (widths.value.get(index) !== w) widths.value = new Map(widths.value).set(index, w);
+	}
+	function reset() {
+		widths.value = /* @__PURE__ */ new Map();
+	}
+	const total = computed(() => {
+		const g = toValue(gap);
+		let sum = 0;
+		let count = 0;
+		for (const w of widths.value.values()) {
+			sum += w + (count > 0 ? g : 0);
+			count++;
 		}
+		return sum;
 	});
+	return {
+		container,
+		width,
+		capacity: computed(() => {
+			const available = width.value - toValue(reserved);
+			if (width.value === 0) return Infinity;
+			if (available <= 0) return 0;
+			const g = toValue(gap);
+			const uniformWidth = toValue(itemWidth);
+			if (uniformWidth && uniformWidth > 0) {
+				const first = uniformWidth;
+				const subsequent = uniformWidth + g;
+				if (available < first) return 0;
+				return Math.max(1, Math.floor((available - first) / subsequent) + 1);
+			}
+			const entries = [...widths.value.entries()].toSorted((a, b) => a[0] - b[0]);
+			if (toValue(reverse)) entries.reverse();
+			let sum = 0;
+			let count = 0;
+			for (const [, w] of entries) {
+				const next = sum + w + (count > 0 ? g : 0);
+				if (next > available) break;
+				sum = next;
+				count++;
+			}
+			return count;
+		}),
+		total,
+		isOverflowing: toRef(() => {
+			return total.value > width.value - toValue(reserved);
+		}),
+		measure,
+		reset
+	};
 }
 /**
-* Returns the current permissions instance.
+* Creates an overflow context with dependency injection support.
 *
-* @template Z The type of the permission ticket.
-* @returns The current permissions instance.
+* @param options Configuration options including namespace
+* @returns Trinity tuple: [useContext, provideContext, defaultContext]
 *
-* @see https://0.vuetifyjs.com/composables/plugins/use-permissions
+* @example
+* ```ts
+* // Create injectable context
+* const [useOverflow, provideOverflow, overflow] = createOverflowContext({
+*   namespace: 'my-overflow',
+*   gap: 8,
+*   reserved: 160,
+* })
+*
+* // In parent component
+* provideOverflow()
+*
+* // In child component
+* const overflow = useOverflow()
+* ```
+*/
+function createOverflowContext(_options = {}) {
+	const { namespace = "v0:overflow",...options } = _options;
+	const [useOverflowContext, _provideOverflowContext] = createContext(namespace);
+	const context = createOverflow(options);
+	function provideOverflowContext(_context = context, app) {
+		return _provideOverflowContext(_context, app);
+	}
+	return createTrinity(useOverflowContext, provideOverflowContext, context);
+}
+/**
+* Returns the current overflow context from dependency injection.
+*
+* @param namespace The namespace for the overflow context. Defaults to `v0:overflow`.
+* @returns The current overflow context.
 *
 * @example
 * ```vue
-* <script setup lang="ts">
-*   import { usePermissions } from '@vuetify/v0'
+* <script lang="ts" setup>
+*   import { useOverflow } from '@vuetify/v0'
 *
-*   const { can } = usePermissions()
+*   // Inject overflow context provided by parent
+*   const overflow = useOverflow()
 * <\/script>
 *
 * <template>
 *   <div>
-*     <p v-if="can('admin', 'read', 'users')">Admin access</p>
+*     <p>Capacity: {{ overflow.capacity.value }}</p>
 *   </div>
 * </template>
 * ```
 */
-function usePermissions(namespace = "v0:permissions") {
+function useOverflow(namespace = "v0:overflow") {
 	return useContext(namespace);
 }
 
 //#endregion
-//#region src/composables/useProxyModel/index.ts
+//#region src/composables/usePagination/index.ts
 /**
-* @module useProxyModel
+* @module usePagination
 *
 * @remarks
-* Proxy composable for bidirectional sync between selection registry and v-model.
+* Lightweight pagination composable for navigating through pages.
 *
 * Key features:
-* - Bidirectional synchronization
-* - Array and single-value modes
-* - Automatic cleanup on scope disposal
-* - Perfect for form controls with selection backing
-*
-* Bridges the gap between selection composables and Vue's v-model.
+* - No registry overhead - just a bounded integer
+* - Direct ref support for v-model compatibility
+* - Navigation methods: next, prev, first, last
+* - Computed visible items with ellipsis
+* - Trinity pattern for dependency injection
+*
+* Unlike registry-based composables, pagination tracks a single number
+* within a range, making it efficient for large page counts.
 */
 /**
-* Syncs a ref with a selection registry bidirectionally.
-*
-* @param registry The selection registry to bind to.
-* @param model The ref to sync.
-* @param options The options for the proxy model.
-* @template Z The type of the selection ticket.
-* @returns A function to stop the sync.
+* Creates a pagination instance.
 *
-* @see https://0.vuetifyjs.com/composables/forms/use-proxy-model
+* @param options The options for the pagination instance.
+* @returns A pagination context with navigation methods.
 *
 * @example
 * ```ts
-* import { createSelection, useProxyModel } from '@vuetify/v0'
+* import { createPagination } from '@vuetify/v0'
 *
-* const model = ref()
-* const registry = createSelection({ events: true })
-* registry.onboard([
-*   { id: 'item-1', value: 'Item 1' },
-*   { id: 'item-2', value: 'Item 2' },
-* ])
+* // Basic usage
+* const pagination = createPagination({ size: 100 })
+* pagination.next()
+* pagination.items.value // [{ type: 'page', value: 1 }, { type: 'page', value: 2 }, ...]
 *
-* const stop = useProxyModel(registry, model)
+* // With v-model (pass a ref)
+* const page = ref(1)
+* const pagination = createPagination({ page, size: 100 })
+* // Mutating pagination.page or the passed ref syncs both
 * ```
 */
-function useProxyModel(registry, model, options) {
-	const multiple = options?.multiple ?? false;
-	const _transformIn = options?.transformIn;
-	const _transformOut = options?.transformOut;
-	function transformIn(val) {
-		const value = toValue(val);
-		return toArray(/* @__PURE__ */ isFunction(_transformIn) ? _transformIn(value) : value);
+function createPagination(_options = {}) {
+	const { page: _page = 1, itemsPerPage: _itemsPerPage = 10, size: _size = 0, visible: _visible = 7, ellipsis = "..." } = _options;
+	const page = isRef(_page) ? _page : shallowRef(_page);
+	const pages = computed(() => {
+		const size = toValue(_size);
+		const perPage = toValue(_itemsPerPage);
+		if (size <= 0 || /* @__PURE__ */ isNaN(size)) return 0;
+		return Math.ceil(size / perPage);
+	});
+	function first() {
+		page.value = 1;
 	}
-	function transformOut(val) {
-		if (/* @__PURE__ */ isFunction(_transformOut)) return _transformOut(val);
-		return multiple ? val : val[0];
+	function last() {
+		page.value = pages.value;
 	}
-	const modelAsArray = transformIn(model);
-	const pending = new Set(modelAsArray);
-	for (const value of modelAsArray) {
-		const ids = registry.browse(value);
-		if (/* @__PURE__ */ isArray(ids)) {
-			for (const id of ids) registry.select(id);
-			pending.delete(value);
-		} else if (ids) {
-			registry.select(ids);
-			pending.delete(value);
-		}
+	function next() {
+		if (page.value < pages.value) page.value++;
 	}
-	const registryWatch = watch(registry.selectedValues, (val) => {
-		modelWatch.pause();
-		model.value = transformOut(Array.from(toValue(val)));
-		modelWatch.resume();
-	}, { flush: "sync" });
-	const modelWatch = watch(model, (val) => {
-		registryWatch.pause();
-		const currentIds = new Set(toValue(registry.selectedIds));
-		const targetIds = /* @__PURE__ */ new Set();
-		for (const value of transformIn(val)) {
-			const ids = registry.browse(value);
-			if (/* @__PURE__ */ isArray(ids)) for (const single of ids) targetIds.add(single);
-			else if (ids) targetIds.add(ids);
-		}
-		if (multiple) {
-			for (const id of currentIds.difference(targetIds)) registry.selectedIds.delete(id);
-			for (const id of targetIds.difference(currentIds)) registry.selectedIds.add(id);
-		} else {
-			const next = targetIds.values().next().value;
-			const last = currentIds.values().next().value;
-			if (last !== void 0) registry.unselect(last);
-			if (next !== void 0) registry.select(next);
+	function prev() {
+		if (page.value > 1) page.value--;
+	}
+	function select(value) {
+		if (value < 1) page.value = 1;
+		else if (value > pages.value) page.value = pages.value;
+		else page.value = value;
+	}
+	const isFirst = computed(() => page.value <= 1);
+	const isLast = computed(() => page.value >= pages.value);
+	const pageStart = computed(() => (page.value - 1) * toValue(_itemsPerPage));
+	const pageStop = computed(() => Math.min(pageStart.value + toValue(_itemsPerPage), toValue(_size)));
+	function toPage(value) {
+		return {
+			type: "page",
+			value
+		};
+	}
+	function toEllipsis() {
+		return ellipsis === false ? false : {
+			type: "ellipsis",
+			value: ellipsis
+		};
+	}
+	function filter(array) {
+		return array.filter(Boolean);
+	}
+	return {
+		page,
+		ellipsis,
+		items: computed(() => {
+			const pageCount = pages.value;
+			const visible = toValue(_visible);
+			const current = page.value;
+			if (pageCount <= 0 || /* @__PURE__ */ isNaN(pageCount) || pageCount > Number.MAX_SAFE_INTEGER) return [];
+			if (visible <= 0) return [];
+			if (visible <= 2) return [toPage(current)];
+			if (pageCount <= visible) return (/* @__PURE__ */ range(pageCount, 1)).map(toPage);
+			if (visible === 3) {
+				const mid = current <= 1 ? 2 : current >= pageCount ? pageCount - 1 : current;
+				return [
+					toPage(1),
+					toPage(mid),
+					toPage(pageCount)
+				];
+			}
+			const boundary = visible - 2;
+			const middle = visible - 4;
+			if (middle <= 0) {
+				if (current <= boundary) return filter([
+					...(/* @__PURE__ */ range(boundary, 1)).map(toPage),
+					toEllipsis(),
+					toPage(pageCount)
+				]);
+				if (current > pageCount - boundary) return filter([
+					toPage(1),
+					toEllipsis(),
+					...(/* @__PURE__ */ range(boundary, pageCount - boundary + 1)).map(toPage)
+				]);
+				return current <= Math.ceil(pageCount / 2) ? filter([
+					toPage(1),
+					toPage(current),
+					toEllipsis(),
+					toPage(pageCount)
+				]) : filter([
+					toPage(1),
+					toEllipsis(),
+					toPage(current),
+					toPage(pageCount)
+				]);
+			}
+			const leftThreshold = boundary - 1;
+			const rightThreshold = pageCount - boundary + 2;
+			if (current <= leftThreshold) return filter([
+				...(/* @__PURE__ */ range(boundary, 1)).map(toPage),
+				toEllipsis(),
+				toPage(pageCount)
+			]);
+			else if (current >= rightThreshold) return filter([
+				toPage(1),
+				toEllipsis(),
+				...(/* @__PURE__ */ range(boundary, pageCount - boundary + 1)).map(toPage)
+			]);
+			else {
+				const start = current - Math.floor(middle / 2);
+				return filter([
+					toPage(1),
+					toEllipsis(),
+					...(/* @__PURE__ */ range(middle, start)).map(toPage),
+					toEllipsis(),
+					toPage(pageCount)
+				]);
+			}
+		}),
+		pageStart,
+		pageStop,
+		isFirst,
+		isLast,
+		first,
+		last,
+		next,
+		prev,
+		select,
+		get itemsPerPage() {
+			return toValue(_itemsPerPage);
+		},
+		get size() {
+			return toValue(_size);
+		},
+		get pages() {
+			return pages.value;
 		}
-		registryWatch.resume();
-	}, {
-		flush: "sync",
-		deep: multiple
-	});
-	function onRegister(ticket) {
-		if (!pending.has(ticket.value) || ticket.disabled) return;
-		registryWatch.pause();
-		modelWatch.pause();
-		registry.select(ticket.id);
-		pending.delete(ticket.value);
-		modelWatch.resume();
-		registryWatch.resume();
+	};
+}
+/**
+* Creates a pagination context for dependency injection.
+*
+* @param options The options including namespace.
+* @returns A trinity: [usePagination, providePagination, defaultContext]
+*
+* @example
+* ```ts
+* // With default namespace 'v0:pagination'
+* const [usePagination, providePaginationContext] = createPaginationContext({ size: 50 })
+*
+* // Or with custom namespace
+* const [usePagination, providePaginationContext] = createPaginationContext({
+*   namespace: 'my-pagination',
+*   size: 50,
+* })
+*
+* // Parent component
+* providePaginationContext()
+*
+* // Child component
+* const pagination = usePagination()
+* pagination.next()
+* ```
+*/
+function createPaginationContext(_options = {}) {
+	const { namespace = "v0:pagination",...options } = _options;
+	const [usePaginationContext, _providePaginationContext] = createContext(namespace);
+	const context = createPagination(options);
+	function providePaginationContext(_context = context, app) {
+		return _providePaginationContext(_context, app);
+	}
+	return createTrinity(usePaginationContext, providePaginationContext, context);
+}
+/**
+* Returns the current pagination instance from context.
+*
+* @param namespace The namespace. @default 'v0:pagination'
+* @returns The pagination context.
+*
+* @example
+* ```vue
+* <script setup>
+*  import { usePagination } from '@vuetify/v0'
+*
+*  const pagination = usePagination()
+* <\/script>
+*
+* <template>
+*   <button @click="pagination.prev()" :disabled="pagination.isFirst.value">Prev</button>
+*   <button @click="pagination.next()" :disabled="pagination.isLast.value">Next</button>
+* </template>
+* ```
+*/
+function usePagination(namespace = "v0:pagination") {
+	return useContext(namespace);
+}
+
+//#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();
 	}
-	registry.on("register:ticket", onRegister);
-	function stop() {
-		registryWatch();
-		modelWatch();
-		registry.off("register:ticket", onRegister);
+	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;
 	}
-	onScopeDispose(stop, true);
-	return stop;
+};
+
+//#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/useProxyRegistry/index.ts
+//#region src/composables/useProxyModel/index.ts
 /**
-* @module useProxyRegistry
+* @module useProxyModel
 *
 * @remarks
-* Proxy composable for reactive registry keys, values, entries, and size.
+* Proxy composable for bidirectional sync between selection registry and v-model.
 *
 * Key features:
-* - Reactive proxy for registry data
-* - Deep or shallow reactivity options
-* - Event-based updates
+* - Bidirectional synchronization
+* - Array and single-value modes
 * - Automatic cleanup on scope disposal
-* - Transforms Map-based registry into reactive refs
+* - Perfect for form controls with selection backing
 *
-* Perfect for exposing registry data as reactive computed properties.
+* Bridges the gap between selection composables and Vue's v-model.
 */
 /**
-* Creates a proxy registry that provides reactive objects for registry data.
+* Syncs a ref with a selection registry bidirectionally.
 *
-* @param registry The registry instance to proxy.
-* @param options The options for the proxy registry.
-* @template Z The type of the registry ticket.
-* @returns A proxy registry with reactive objects.
+* @param registry The selection registry to bind to.
+* @param model The ref to sync.
+* @param options The options for the proxy model.
+* @template Z The type of the selection ticket.
+* @returns A function to stop the sync.
 *
-* @see https://0.vuetifyjs.com/composables/registration/use-proxy-registry
+* @see https://0.vuetifyjs.com/composables/forms/use-proxy-model
 *
 * @example
 * ```ts
-* import { useRegistry, useProxyRegistry } from '@vuetify/v0'
+* import { createSelection, useProxyModel } from '@vuetify/v0'
 *
-* const registry = useRegistry({ events: true })
-* const proxy = useProxyRegistry(registry)
+* const model = ref()
+* const registry = createSelection({ events: true })
+* registry.onboard([
+*   { id: 'item-1', value: 'Item 1' },
+*   { id: 'item-2', value: 'Item 2' },
+* ])
 *
-* registry.register({ value: 'Item 1' })
-* console.log(proxy.size) // 1
+* const stop = useProxyModel(registry, model)
 * ```
 */
-function useProxyRegistry(registry, options) {
-	const state = (options?.deep ? reactive : shallowReactive)({
-		keys: registry.keys(),
-		values: registry.values(),
-		entries: registry.entries(),
-		size: registry.size
+function useProxyModel(registry, model, options) {
+	const multiple = options?.multiple ?? false;
+	const _transformIn = options?.transformIn;
+	const _transformOut = options?.transformOut;
+	function transformIn(val) {
+		const value = toValue(val);
+		return toArray(/* @__PURE__ */ isFunction(_transformIn) ? _transformIn(value) : value);
+	}
+	function transformOut(val) {
+		if (/* @__PURE__ */ isFunction(_transformOut)) return _transformOut(val);
+		return multiple ? val : val[0];
+	}
+	const modelAsArray = transformIn(model);
+	const pending = new Set(modelAsArray);
+	for (const value of modelAsArray) {
+		const ids = registry.browse(value);
+		if (/* @__PURE__ */ isArray(ids)) {
+			for (const id of ids) registry.select(id);
+			pending.delete(value);
+		} else if (ids) {
+			registry.select(ids);
+			pending.delete(value);
+		}
+	}
+	const registryWatch = watch(registry.selectedValues, (val) => {
+		modelWatch.pause();
+		model.value = transformOut(Array.from(toValue(val)));
+		modelWatch.resume();
+	}, { flush: "sync" });
+	const modelWatch = watch(model, (val) => {
+		registryWatch.pause();
+		const currentIds = new Set(toValue(registry.selectedIds));
+		const targetIds = /* @__PURE__ */ new Set();
+		for (const value of transformIn(val)) {
+			const ids = registry.browse(value);
+			if (/* @__PURE__ */ isArray(ids)) for (const single of ids) targetIds.add(single);
+			else if (ids) targetIds.add(ids);
+		}
+		if (multiple) {
+			for (const id of currentIds.difference(targetIds)) registry.selectedIds.delete(id);
+			for (const id of targetIds.difference(currentIds)) registry.selectedIds.add(id);
+		} else {
+			const next = targetIds.values().next().value;
+			const last = currentIds.values().next().value;
+			if (!/* @__PURE__ */ isUndefined(last)) registry.unselect(last);
+			if (!/* @__PURE__ */ isUndefined(next)) registry.select(next);
+		}
+		registryWatch.resume();
+	}, {
+		flush: "sync",
+		deep: multiple
 	});
-	function update() {
-		state.keys = registry.keys();
-		state.values = registry.values();
-		state.entries = registry.entries();
-		state.size = registry.size;
+	function onRegister(ticket) {
+		if (!pending.has(ticket.value) || ticket.disabled) return;
+		registryWatch.pause();
+		modelWatch.pause();
+		registry.select(ticket.id);
+		pending.delete(ticket.value);
+		modelWatch.resume();
+		registryWatch.resume();
 	}
-	registry.on("register:ticket", update);
-	registry.on("unregister:ticket", update);
-	registry.on("update:ticket", update);
-	registry.on("clear:registry", update);
-	onScopeDispose(() => {
-		registry.off("register:ticket", update);
-		registry.off("unregister:ticket", update);
-		registry.off("update:ticket", update);
-		registry.off("clear:registry", update);
-	}, true);
-	return state;
+	registry.on("register:ticket", onRegister);
+	function stop() {
+		registryWatch();
+		modelWatch();
+		registry.off("register:ticket", onRegister);
+	}
+	onScopeDispose(stop, true);
+	return stop;
 }
 
 //#endregion
@@ -3736,305 +4543,149 @@ function useProxyRegistry(registry, options) {
 * 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 (ticket.timeout === void 0 || ticket.timeout === -1 || 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 = id === void 0 ? 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 pause() {
-		const ticket = registry.seek("first");
-		if (!ticket || ticket.isPaused) return void 0;
-		clearTimeout(ticket.id);
-		registry.upsert(ticket.id, { isPaused: true });
-		return ticket;
-	}
-	function resume() {
-		const ticket = registry.seek("first");
-		if (!ticket || ticket.index !== 0 || !ticket.isPaused) return void 0;
-		registry.upsert(ticket.id, { isPaused: false });
-		startTimeout(ticket);
-		return ticket;
-	}
-	function clear() {
-		for (const id of timeouts.keys()) clearTimeout(id);
-		registry.clear();
-	}
-	function dispose() {
-		clear();
-		registry.dispose();
-	}
-	onScopeDispose(dispose, true);
-	return {
-		...registry,
-		register,
-		unregister,
-		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/useResizeObserver/index.ts
-/**
-* @module useResizeObserver
-*
-* @remarks
-* ResizeObserver composable with lifecycle management.
-*
-* Key features:
-* - ResizeObserver API wrapper
-* - Pause/resume/stop functionality
-* - Automatic cleanup on unmount
-* - SSR-safe (checks SUPPORTS_OBSERVER)
-* - Hydration-aware
-* - Box model options (content-box/border-box)
-*
-* Perfect for responsive components and size-based rendering.
-*/
-/**
-* A composable that uses the Resize Observer API to detect when an element's
-* size changes.
-*
-* @param target The element to observe.
-* @param callback The callback to execute when the element's size changes.
-* @param options The options for the Resize Observer.
-* @returns An object with methods to control the observer.
-*
-* @see https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
-* @see https://0.vuetifyjs.com/composables/system/use-resize-observer
-*
-* @example
-* ```ts
-* import { ref } from 'vue'
-* import { useResizeObserver } from '@vuetify/v0'
-*
-* const el = ref<HTMLElement>()
-* const width = ref(0)
-* const height = ref(0)
-*
-* const { pause, resume, isPaused } = useResizeObserver(
-*   el,
-*   (entries) => {
-*     const entry = entries[0]
-*     if (entry) {
-*       width.value = entry.contentRect.width
-*       height.value = entry.contentRect.height
-*       console.log('Size changed:', width.value, 'x', height.value)
-*     }
-*   },
-*   { immediate: true }
-* )
-*
-* // Pause observation
-* pause()
-*
-* // Resume observation
-* resume()
-* ```
-*/
-function useResizeObserver(target, callback, options = {}) {
-	const { isHydrated } = useHydration();
-	const observer = shallowRef();
-	const isPaused = shallowRef(false);
-	function setup() {
-		if (!isHydrated.value || !SUPPORTS_OBSERVER || !target.value || isPaused.value) return;
-		observer.value = new ResizeObserver((entries) => {
-			callback(entries.map((entry) => ({
-				contentRect: {
-					width: entry.contentRect.width,
-					height: entry.contentRect.height,
-					top: entry.contentRect.top,
-					left: entry.contentRect.left
-				},
-				target: entry.target
-			})));
-		});
-		observer.value.observe(target.value, { box: options.box || "content-box" });
-		if (options.immediate) {
-			const rect = target.value.getBoundingClientRect();
-			callback([{
-				contentRect: {
-					width: rect.width,
-					height: rect.height,
-					top: rect.top,
-					left: rect.left
-				},
-				target: target.value
-			}]);
+* ```
+*/
+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);
 		}
 	}
-	watch([isHydrated, target], () => {
-		cleanup();
-		setup();
-	}, { immediate: true });
-	function cleanup() {
-		if (observer.value) {
-			observer.value.disconnect();
-			observer.value = void 0;
+	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() {
-		isPaused.value = true;
-		observer.value?.disconnect();
+		const ticket = registry.seek("first");
+		if (!ticket || ticket.isPaused) return void 0;
+		clearTimeout(ticket.id);
+		return registry.upsert(ticket.id, { isPaused: true });
 	}
 	function resume() {
-		isPaused.value = false;
-		setup();
+		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 stop() {
-		cleanup();
+	function clear() {
+		for (const id of timeouts.keys()) clearTimeout(id);
+		registry.clear();
+	}
+	function dispose() {
+		clear();
+		registry.dispose();
 	}
-	onUnmounted(stop);
+	onScopeDispose(dispose, true);
 	return {
-		isPaused: readonly(isPaused),
+		...registry,
+		register,
+		unregister,
+		offboard,
 		pause,
 		resume,
-		stop
+		clear,
+		dispose,
+		get size() {
+			return registry.size;
+		}
 	};
 }
 /**
-* A convenience composable that uses the Resize Observer API to track an
-* element's size.
+* Creates a new queue context.
 *
-* @param target The element to observe.
-* @returns An object with the element's width and height.
+* @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/system/use-resize-observer#use-element-size
+* @see https://0.vuetifyjs.com/composables/registration/use-queue
 *
 * @example
 * ```ts
-* import { ref, watchEffect } from 'vue'
-* import { useElementSize } from '@vuetify/v0'
-*
-* const box = ref<HTMLElement>()
-* const { width, height } = useElementSize(box)
+* import { createQueueContext } from '@vuetify/v0'
 *
-* // Width and height are reactive refs
-* watchEffect(() => {
-*   console.log('Box size:', width.value, 'x', height.value)
+* export const [useQueue, provideQueue] = createQueueContext('v0:queue', {
+*   timeout: 5000,
 * })
 * ```
 */
-function useElementSize(target) {
-	const width = shallowRef(0);
-	const height = shallowRef(0);
-	const { pause: _pause, resume, stop, isPaused } = useResizeObserver(target, (entries) => {
-		const entry = entries[0];
-		if (entry) {
-			width.value = entry.contentRect.width;
-			height.value = entry.contentRect.height;
-		}
-	}, { immediate: true });
-	function pause() {
-		width.value = 0;
-		height.value = 0;
-		_pause();
+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 {
-		width,
-		height,
-		isPaused,
-		pause,
-		resume,
-		stop
-	};
+	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
@@ -4150,13 +4801,13 @@ function createStep(_options = {}) {
 		let index = circular ? wrapped(length, currentIndex + count) : currentIndex + count;
 		if (!circular && (index < 0 || index >= length)) return;
 		let id = registry.lookup(index);
-		while (id !== void 0 && toValue(registry.get(id)?.disabled) && hops < length) {
+		while (!/* @__PURE__ */ isUndefined(id) && toValue(registry.get(id)?.disabled) && hops < length) {
 			index = circular ? wrapped(length, index + direction) : index + direction;
 			if (!circular && (index < 0 || index >= length)) return;
 			id = registry.lookup(index);
 			hops++;
 		}
-		if (id === void 0 || hops === length) return;
+		if (/* @__PURE__ */ isUndefined(id) || hops === length) return;
 		registry.selectedIds.clear();
 		registry.select(id);
 	}
@@ -4175,7 +4826,6 @@ function createStep(_options = {}) {
 /**
 * Creates a new step context.
 *
-* @param namespace The namespace for the step context.
 * @param options The options for the step context.
 * @template Z The type of the step ticket.
 * @template E The type of the step context.
@@ -4187,18 +4837,19 @@ function createStep(_options = {}) {
 * ```ts
 * import { createStepContext } from '@vuetify/v0'
 *
-* export const [useWizard, provideWizard, wizard] = createStepContext('wizard')
+* // With default namespace 'v0:step'
+* export const [useStep, provideStep, context] = createStepContext()
 *
 * // In a parent component:
-* provideWizard()
+* provideStep()
 *
 * // In a child component:
-* const wizard = useWizard()
-* wizard.next() // Progress to next step
+* const context = useStep()
+* context.next() // Progress to next step
 * ```
 */
-function createStepContext(_options) {
-	const { namespace,...options } = _options;
+function createStepContext(_options = {}) {
+	const { namespace = "v0:step",...options } = _options;
 	const [useStepContext, _provideStepContext] = createContext(namespace);
 	const context = createStep(options);
 	function provideStepContext(_context = context, app) {
@@ -4277,7 +4928,6 @@ var MemoryAdapter = class {
 *
 * Uses adapter pattern to abstract storage implementation details.
 */
-const [useStorageContext, provideStorageContext] = createContext("v0:storage");
 /**
 * Creates a new storage instance.
 *
@@ -4325,7 +4975,7 @@ function createStorage(options = {}) {
 		}
 		const valueRef = ref(initialValue);
 		const stop = watch(valueRef, (newValue) => {
-			if (newValue === void 0 || newValue === null) adapter?.removeItem(prefixedKey);
+			if (/* @__PURE__ */ isNullOrUndefined(newValue)) adapter?.removeItem(prefixedKey);
 			else adapter?.setItem(prefixedKey, serializer.write(newValue));
 		}, { deep: true });
 		watchers.set(prefixedKey, stop);
@@ -4365,12 +5015,12 @@ function createStorage(options = {}) {
 }
 function createStorageContext(_options = {}) {
 	const { namespace = "v0:storage",...options } = _options;
-	const [useStorageContext$1, _provideStorageContext] = createContext(namespace);
+	const [useStorageContext, _provideStorageContext] = createContext(namespace);
 	const context = createStorage(options);
-	function provideStorageContext$1(_context = context, app) {
+	function provideStorageContext(_context = context, app) {
 		return _provideStorageContext(_context, app);
 	}
-	return createTrinity(useStorageContext$1, provideStorageContext$1, context);
+	return createTrinity(useStorageContext, provideStorageContext, context);
 }
 /**
 * Creates a new storage plugin.
@@ -4395,14 +5045,14 @@ function createStorageContext(_options = {}) {
 */
 function createStoragePlugin(_options = {}) {
 	const { namespace = "v0:storage",...options } = _options;
-	const [, provideStorageContext$1, context] = createStorageContext({
+	const [, provideStorageContext, context] = createStorageContext({
 		...options,
 		namespace
 	});
 	return createPlugin({
 		namespace,
 		provide: (app) => {
-			provideStorageContext$1(context, app);
+			provideStorageContext(context, app);
 		}
 	});
 }
@@ -4450,7 +5100,7 @@ var ThemeAdapter = class {
 			const vars = Object.entries(themeColors).map(([key, val]) => `  --${this.prefix}-${key}: ${val};`).join("\n");
 			css += `[data-theme="${theme}"] {\n${vars}\n}\n`;
 		}
-		if (isDark !== void 0) css += `:root {\n  color-scheme: ${isDark ? "dark" : "light"};\n}\n`;
+		if (!/* @__PURE__ */ isUndefined(isDark)) css += `:root {\n  color-scheme: ${isDark ? "dark" : "light"};\n}\n`;
 		return css;
 	}
 };
@@ -4842,13 +5492,12 @@ function createTimeline(_options = {}) {
 	};
 }
 /**
-* Creates a new timeline plugin.
+* Creates a new timeline context.
 *
-* @param namespace The namespace for the timeline plugin.
-* @param options The options for the timeline plugin.
+* @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 plugin.
+* @returns A new timeline context.
 *
 * @see https://0.vuetifyjs.com/composables/registration/use-timeline
 *
@@ -4856,7 +5505,9 @@ function createTimeline(_options = {}) {
 * ```ts
 * import { createTimelineContext } from '@vuetify/v0'
 *
-* export const [useTimeline, provideTimeline, context] = createTimelineContext('v0:timeline', { size: 5 })
+* // With default namespace 'v0:timeline'
+* export const [useTimeline, provideTimeline, context] = createTimelineContext({ size: 5 })
+*
 * context.register({ id: 'example' })
 *
 * // In a parent component
@@ -4868,8 +5519,8 @@ function createTimeline(_options = {}) {
 * console.log(timeline.values()) // [{ id: 'example' }]
 * ```
 */
-function createTimelineContext(_options) {
-	const { namespace,...options } = _options;
+function createTimelineContext(_options = {}) {
+	const { namespace = "v0:timeline",...options } = _options;
 	const [useTimelineContext, _provideTimelineContext] = createContext(namespace);
 	const context = createTimeline(options);
 	function provideTimelineContext(_context = context, app) {
@@ -4899,4 +5550,374 @@ function useTimeline(namespace = "v0:timeline") {
 }
 
 //#endregion
-export { useTokens as $, PermissionAdapter as A, createContext as At, useKeydown as B, useQueue as C, createHydrationContext as Ct, createPermissionsContext as D, toArray as Dt, createPermissions as E, toReactive as Et, useLocale as F, useForm as G, useIntersectionObserver as H, Vuetify0LocaleAdapter as I, createFeaturesContext as J, useFilter as K, createSingle as L, createLocale as M, useContext as Mt, createLocaleContext as N, createPermissionsPlugin as O, createTrinity as Ot, createLocalePlugin as P, createTokensContext as Q, createSingleContext as R, createQueueContext as S, createHydration as St, useProxyModel as T, useHydration as Tt, createForm as U, useElementIntersection as V, createFormContext as W, useFeatures as X, createFeaturesPlugin as Y, createTokens as Z, createStepContext as _, useWindowEventListener as _t, createThemeContext as a, useSelection as at, useResizeObserver as b, createBreakpointsPlugin as bt, Vuetify0ThemeAdapter as c, createLogger as ct, createStoragePlugin as d, useLogger as dt, createGroup as et, provideStorageContext as f, Vuetify0LoggerAdapter as ft, createStep as g, useEventListener as gt, MemoryAdapter as h, useDocumentEventListener as ht, createTheme as i, createSelectionContext as it, useMutationObserver as j, provideContext as jt, usePermissions as k, createPlugin as kt, createStorage as l, createLoggerContext as lt, useStorageContext as m, ConsolaLoggerAdapter as mt, createTimelineContext as n, useGroup as nt, createThemePlugin as o, createRegistryContext as ot, useStorage as p, PinoLoggerAdapter as pt, createFeatures as q, useTimeline as r, createSelection as rt, useTheme as s, useRegistry as st, createTimeline as t, createGroupContext as tt, createStorageContext as u, createLoggerPlugin as ut, useStep as v, createBreakpoints as vt, useProxyRegistry as w, createHydrationPlugin as wt, createQueue as x, useBreakpoints as xt, useElementSize as y, createBreakpointsContext as yt, useSingle as z };
+//#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 { createFeatures as $, usePagination as A, useHydration as At, createLocalePlugin as B, useContext as Bt, createPermissions as C, createBreakpointsContext as Ct, PermissionAdapter as D, createHydration as Dt, usePermissions as E, createFallbackHydration as Et, useResizeObserver as F, toArray as Ft, useSingle as G, Vuetify0LocaleAdapter as H, useMutationObserver as I, createTrinity as It, useIntersectionObserver as J, useKeydown as K, createLocale as L, createPlugin as Lt, createOverflowContext as M, useEventListener as Mt, useOverflow as N, useWindowEventListener as Nt, createPagination as O, createHydrationContext as Ot, useElementSize as P, toReactive as Pt, useFilter as Q, createLocaleContext as R, createContext as Rt, useProxyModel as S, createBreakpoints as St, createPermissionsPlugin as T, useBreakpoints as Tt, createSingle as U, useLocale as V, createSingleContext as W, createFormContext as X, createForm as Y, useForm as Z, createStepContext as _, createLoggerPlugin as _t, useTimeline as a, useTokens as at, createQueueContext as b, PinoLoggerAdapter as bt, createThemePlugin as c, useGroup as ct, createStorage as d, createSelectionContext as dt, createFeaturesContext as et, createStorageContext as f, useSelection as ft, createStep as g, createLoggerContext as gt, MemoryAdapter as h, createLogger as ht, createTimelineContext as i, createTokensContext as it, createOverflow as j, useDocumentEventListener as jt, createPaginationContext as k, createHydrationPlugin as kt, useTheme as l, useProxyRegistry as lt, useStorage as m, useRegistry as mt, useToggleScope as n, useFeatures as nt, createTheme as o, createGroup as ot, createStoragePlugin as p, createRegistryContext as pt, useElementIntersection as q, createTimeline as r, createTokens as rt, createThemeContext as s, createGroupContext as st, useVirtual as t, createFeaturesPlugin as tt, Vuetify0ThemeAdapter as u, createSelection as ut, useStep as v, useLogger as vt, createPermissionsContext as w, createBreakpointsPlugin as wt, useQueue as x, ConsolaLoggerAdapter as xt, createQueue as y, Vuetify0LoggerAdapter as yt, createLocaleFallback as z, provideContext as zt };