@vuetify/v0 0.0.2-beta.3 → 0.0.2

package/dist/{index.mjs → browser/index.js}

@@ -1,4 +1,4 @@
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createPropsRestProxy, defineComponent, getCurrentInstance, getCurrentScope, guardReactiveProps, inject, isRef, mergeModels, mergeProps, normalizeProps, normalizeStyle, onMounted, onScopeDispose, onUnmounted, openBlock, provide, reactive, ref, renderSlot, resolveDynamicComponent, shallowReactive, shallowReadonly, shallowRef, toRaw, toRef, toValue, unref, useAttrs, useId, useModel, useTemplateRef, watch, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createPropsRestProxy, defineComponent, getCurrentInstance, getCurrentScope, guardReactiveProps, inject, isRef, mergeModels, mergeProps, normalizeProps, normalizeStyle, onMounted, onScopeDispose, onUnmounted, openBlock, provide, reactive, readonly, ref, renderSlot, resolveDynamicComponent, shallowReactive, shallowReadonly, shallowRef, toRaw, toRef, toValue, unref, useAttrs, useId, useModel, useTemplateRef, watch, withCtx } from "vue";
 
 //#region src/constants/htmlElements.ts
 const selfClosingTags = [
@@ -22,6 +22,54 @@ const selfClosingTags = [
 */
 const SELF_CLOSING_TAGS = new Set(selfClosingTags);
 /**
+* Common HTML element types for polymorphic components
+*/
+const COMMON_ELEMENTS = {
+	DIV: "div",
+	SPAN: "span",
+	SECTION: "section",
+	ARTICLE: "article",
+	ASIDE: "aside",
+	HEADER: "header",
+	FOOTER: "footer",
+	MAIN: "main",
+	NAV: "nav",
+	P: "p",
+	H1: "h1",
+	H2: "h2",
+	H3: "h3",
+	H4: "h4",
+	H5: "h5",
+	H6: "h6",
+	BUTTON: "button",
+	A: "a",
+	INPUT: "input",
+	TEXTAREA: "textarea",
+	SELECT: "select",
+	LABEL: "label",
+	UL: "ul",
+	OL: "ol",
+	LI: "li",
+	DL: "dl",
+	DT: "dt",
+	DD: "dd",
+	IMG: "img",
+	VIDEO: "video",
+	AUDIO: "audio",
+	CANVAS: "canvas",
+	SVG: "svg",
+	TABLE: "table",
+	THEAD: "thead",
+	TBODY: "tbody",
+	TFOOT: "tfoot",
+	TR: "tr",
+	TH: "th",
+	TD: "td",
+	FORM: "form",
+	FIELDSET: "fieldset",
+	LEGEND: "legend"
+};
+/**
 * Check if an element is self-closing
 */
 function isSelfClosingTag(tag) {
@@ -234,7 +282,8 @@ const SUPPORTS_MATCH_MEDIA = IN_BROWSER && "matchMedia" in window && typeof wind
 const SUPPORTS_OBSERVER = IN_BROWSER && "ResizeObserver" in window;
 const SUPPORTS_INTERSECTION_OBSERVER = IN_BROWSER && "IntersectionObserver" in window;
 const SUPPORTS_MUTATION_OBSERVER = IN_BROWSER && "MutationObserver" in window;
-const __LOGGER_ENABLED__ = process.env.NODE_ENV !== "production" || process.env.VITE_LOGGER_ENABLED === "true";
+const version = "0.0.2";
+const __LOGGER_ENABLED__ = false;
 
 //#endregion
 //#region src/composables/useBreakpoints/index.ts
@@ -598,8 +647,8 @@ var Vuetify0LoggerAdapter = class {
 	}
 	timestamp() {
 		if (!IN_BROWSER) return (/* @__PURE__ */ new Date()).toISOString();
-		const now$1 = /* @__PURE__ */ new Date();
-		return now$1.toTimeString().split(" ")[0];
+		const now = /* @__PURE__ */ new Date();
+		return now.toTimeString().split(" ")[0];
 	}
 	style(level) {
 		if (!this.colors || !IN_BROWSER) return "";
@@ -724,9 +773,7 @@ function createFallbackLogger(namespace = "v0:logger") {
 function useLogger(namespace) {
 	if (getCurrentInstance()) try {
 		return useLoggerContext(namespace);
-	} catch (error) {
-		if (process.env.NODE_ENV !== "production" && IN_BROWSER && namespace) console.warn(error);
-	}
+	} catch (error) {}
 	return createFallbackLogger(namespace);
 }
 function createLoggerPlugin(options = {}) {
@@ -736,12 +783,31 @@ function createLoggerPlugin(options = {}) {
 		provide: (app) => {
 			provideLoggerContext(context, app);
 		},
-		setup: (_app) => {
-			if (process.env.NODE_ENV !== "production" && IN_BROWSER) window.__v0Logger__ = context;
-		}
+		setup: (_app) => {}
 	});
 }
 
+//#endregion
+//#region src/factories/createTrinity/index.ts
+/**
+* A tuple containing Vue's provide/inject and a context object
+* @param createContext The function that creates the context
+* @param provideContext The function that provides context
+* @param context The underlying context object singleton
+* @template Z The type parameter for the context value
+* @template E The vmodel type for the context state.
+* @returns [createContext, provideContext, context]
+*
+* @see https://0.vuetifyjs.com/composables/foundation/create-trinity
+*/
+function createTrinity(createContext$1, provideContext, context) {
+	return [
+		createContext$1,
+		(_context = context, app) => provideContext(_context, app),
+		context
+	];
+}
+
 //#endregion
 //#region src/composables/useRegistry/index.ts
 /**
@@ -781,6 +847,40 @@ function useRegistry(options) {
 	function get(id) {
 		return collection.get(id);
 	}
+	function upsert(id, patch = {}) {
+		const existing = get(id);
+		if (!existing) return register({
+			...patch,
+			id
+		});
+		const hasValue = Object.prototype.hasOwnProperty.call(patch, "value");
+		let value = existing.value;
+		let valueIsIndex = existing.valueIsIndex;
+		if (hasValue) {
+			if (patch.value === void 0) {
+				value = existing.index;
+				valueIsIndex = true;
+			} else {
+				value = patch.value;
+				valueIsIndex = false;
+			}
+			if (!Object.is(value, existing.value)) {
+				unassign(existing.value, id);
+				assign(value, id);
+			}
+		}
+		const updated = {
+			...existing,
+			...patch,
+			id,
+			index: existing.index,
+			value,
+			valueIsIndex
+		};
+		collection.set(id, updated);
+		invalidate();
+		return updated;
+	}
 	function browse(value) {
 		return catalog.get(value);
 	}
@@ -836,8 +936,7 @@ function useRegistry(options) {
 		invalidate();
 	}
 	function invalidate() {
-		if (cache.size === 0) return;
-		cache.clear();
+		if (cache.size > 0) cache.clear();
 	}
 	function reindex() {
 		if (catalog.size > 0) catalog.clear();
@@ -861,12 +960,15 @@ function useRegistry(options) {
 			logger.warn(`Item with id "${id}" already exists in the registry. Skipping registration.`);
 			return get(id);
 		}
+		const index = registration.index ?? size;
+		const value = registration.value === void 0 ? index : registration.value;
+		const valueIsIndex = registration.value === void 0;
 		const item = {
 			...registration,
 			id,
-			index: registration.index ?? size,
-			value: registration.value ?? size,
-			valueIsIndex: registration.valueIsIndex ?? registration.value == null
+			index,
+			value,
+			valueIsIndex
 		};
 		collection.set(item.id, item);
 		directory.set(item.index, item.id);
@@ -898,6 +1000,7 @@ function useRegistry(options) {
 		values,
 		lookup,
 		get,
+		upsert,
 		register,
 		unregister,
 		reindex,
@@ -909,6 +1012,24 @@ function useRegistry(options) {
 		}
 	};
 }
+/**
+* Creates a registry context with full injection/provision control.
+* Returns the complete trinity for advanced usage scenarios.
+*
+* @param namespace The namespace for the registry context.
+* @param options Optional configuration for reactivity behavior.
+* @template Z The type of tickets managed by the registry.
+* @template E The type of the registry context.
+* @returns A tuple containing the inject function, provide function, and the registry context.
+*/
+function createRegistryContext(namespace, options) {
+	const [useRegistryContext, _provideRegistryContext] = createContext(namespace);
+	const context = useRegistry(options);
+	function provideRegistryContext(_context = context, app) {
+		return _provideRegistryContext(_context, app);
+	}
+	return createTrinity(useRegistryContext, provideRegistryContext, context);
+}
 
 //#endregion
 //#region src/composables/useSelection/index.ts
@@ -991,32 +1112,12 @@ function useSelection(options) {
 
 //#endregion
 //#region src/utilities/benchmark.ts
-function now() {
-	if (typeof performance !== "undefined") return performance.now();
-	return Date.now();
-}
 async function run(name, fn, samples = 100) {
-	if (!(process.env.NODE_ENV !== "production")) {
-		fn();
-		return {
-			name,
-			duration: 0,
-			ops: Infinity
-		};
-	}
-	const times = [];
-	for (let i = 0; i < 5; i++) fn();
-	for (let i = 0; i < samples; i++) {
-		const start = now();
-		fn();
-		times.push(now() - start);
-	}
-	const duration = times.reduce((a, b) => a + b, 0) / times.length;
-	const ops = Math.round(1e3 / duration);
+	fn();
 	return {
 		name,
-		duration,
-		ops
+		duration: 0,
+		ops: Infinity
 	};
 }
 
@@ -1627,27 +1728,6 @@ const Step = {
 	Root: StepRoot_default
 };
 
-//#endregion
-//#region src/factories/createTrinity/index.ts
-/**
-* A tuple containing Vue's provide/inject and a context object
-* @param createContext The function that creates the context
-* @param provideContext The function that provides context
-* @param context The underlying context object singleton
-* @template Z The type parameter for the context value
-* @template E The vmodel type for the context state.
-* @returns [createContext, provideContext, context]
-*
-* @see https://0.vuetifyjs.com/composables/foundation/create-trinity
-*/
-function createTrinity(createContext$1, provideContext, context) {
-	return [
-		createContext$1,
-		(_context = context, app) => provideContext(_context, app),
-		context
-	];
-}
-
 //#endregion
 //#region src/composables/useTokens/index.ts
 /**
@@ -1658,6 +1738,7 @@ function createTrinity(createContext$1, provideContext, context) {
 * @template Z The structure of the registry token items.
 * @template E The available methods for the token's context.
 * @returns The token context object.
+* @see https://www.designtokens.org/tr/drafts/format/
 */
 function useTokens(tokens = {}) {
 	const logger = useLogger();
@@ -1671,21 +1752,56 @@ function useTokens(tokens = {}) {
 		return isObject(value) && "$value" in value;
 	}
 	function resolve(token) {
-		const cached = cache.get(token);
+		const cacheKey = isString(token) ? token : JSON.stringify(token);
+		const cached = cache.get(cacheKey);
 		if (cached !== void 0) return cached;
 		const reference = isTokenAlias(token) ? token.$value : token;
-		const cleaned = isAlias(reference) ? reference.slice(1, -1) : reference;
-		const found = registry.get(cleaned);
+		const clean = isString(reference) && isAlias(reference) ? reference.slice(1, -1) : String(reference);
+		let found = registry.get(clean);
+		let segments = [];
+		if (!found && clean.includes(".")) {
+			const parts = clean.split(".");
+			for (let i = parts.length - 1; i > 0; i--) {
+				const prefix = parts.slice(0, i).join(".");
+				const suffix = parts.slice(i);
+				const candidate = registry.get(prefix);
+				if (candidate?.value !== void 0) {
+					found = candidate;
+					segments = suffix;
+					break;
+				}
+			}
+		}
 		if (found?.value === void 0) {
-			logger.warn(`Alias not found for "${reference}"`);
-			cache.set(token, void 0);
+			logger.warn(`Alias not found for "${String(reference)}"`);
+			cache.set(cacheKey, void 0);
 			return void 0;
 		}
 		let result;
-		if (isTokenAlias(found.value)) result = resolve(found.value.$value);
-		else if (isAlias(found.value)) result = resolve(found.value);
-		else result = String(found.value);
-		cache.set(token, result);
+		let current = found.value;
+		if (segments.length > 0) {
+			if (isTokenAlias(current)) current = current.$value;
+			for (const segment of segments) {
+				if (!isObject(current) || !(segment in current)) {
+					current = void 0;
+					break;
+				}
+				current = current[segment];
+				if (isTokenAlias(current)) current = current.$value;
+			}
+			if (current === void 0) {
+				logger.warn(`Path not found inside "${clean}": ${segments.join(".")}`);
+				cache.set(cacheKey, void 0);
+				return void 0;
+			}
+			result = current;
+		} else if (isTokenAlias(current)) {
+			const inner = current.$value;
+			if (isString(inner) && isAlias(inner)) return resolve(inner);
+			result = inner;
+		} else if (isString(current) && isAlias(current)) return resolve(current);
+		else result = current;
+		cache.set(cacheKey, result);
 		return result;
 	}
 	return {
@@ -1726,18 +1842,49 @@ function flatten(tokens, prefix = "") {
 	}];
 	while (stack.length > 0) {
 		const { tokens: currentTokens, prefix: currentPrefix } = stack.pop();
+		const meta = {};
+		for (const k in currentTokens) if (k.startsWith("$")) meta[k] = currentTokens[k];
+		if (Object.keys(meta).length > 0 && currentPrefix) flattened.push({
+			id: currentPrefix,
+			value: meta
+		});
 		for (const key in currentTokens) {
+			if (key.startsWith("$")) continue;
 			const value = currentTokens[key];
 			const id = currentPrefix ? `${currentPrefix}.${key}` : key;
-			if (isPrimitive(value)) flattened.push({
-				id,
-				value: String(value)
-			});
-			else if (isObject(value) && "$value" in value) flattened.push({
-				id,
-				value
-			});
-			else if (isObject(value)) stack.push({
+			if (!isObject(value)) {
+				flattened.push({
+					id,
+					value
+				});
+				continue;
+			}
+			if ("$value" in value) {
+				flattened.push({
+					id,
+					value
+				});
+				const inner = value.$value;
+				if (isObject(inner)) for (const innerKey in inner) {
+					if (innerKey.startsWith("$")) continue;
+					const child = inner[innerKey];
+					const childId = `${id}.${innerKey}`;
+					if (!isObject(child)) flattened.push({
+						id: childId,
+						value: child
+					});
+					else if ("$value" in child) flattened.push({
+						id: childId,
+						value: child
+					});
+					else stack.push({
+						tokens: child,
+						prefix: childId
+					});
+				}
+				continue;
+			}
+			stack.push({
 				tokens: value,
 				prefix: id
 			});
@@ -1956,9 +2103,9 @@ var ThemeRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 	}),
 	emits: ["update:modelValue"],
 	setup(__props) {
-		const model = useModel(__props, "modelValue");
+		useModel(__props, "modelValue");
 		const [provideThemeContext] = createTheme(__props.namespace);
-		const themeContext = provideThemeContext(model);
+		const themeContext = provideThemeContext();
 		for (const theme of __props.themes) themeContext.register(theme);
 		return (_ctx, _cache) => {
 			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(themeContext))));
@@ -2194,6 +2341,146 @@ function useForm(options) {
 	};
 }
 
+//#endregion
+//#region src/composables/useIntersectionObserver/index.ts
+/**
+* Composable for observing element intersection with viewport or ancestor
+*
+* @param target - Element ref to observe
+* @param callback - Callback fired on intersection change
+* @param options - Observer options
+* @returns Observer controls and intersection state
+*
+* @see https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver
+*/
+function useIntersectionObserver(target, callback, options = {}) {
+	const { isHydrated } = useHydration();
+	const observer = shallowRef();
+	const isPaused = shallowRef(false);
+	const isIntersecting = shallowRef(false);
+	watch([isHydrated, target], ([hydrated, el]) => {
+		cleanup();
+		if (!hydrated || !SUPPORTS_INTERSECTION_OBSERVER || !el) return;
+		observer.value = new IntersectionObserver((entries) => {
+			const transformedEntries = entries.map((entry) => ({
+				boundingClientRect: entry.boundingClientRect,
+				intersectionRatio: entry.intersectionRatio,
+				intersectionRect: entry.intersectionRect,
+				isIntersecting: entry.isIntersecting,
+				rootBounds: entry.rootBounds,
+				target: entry.target,
+				time: entry.time
+			}));
+			const latestEntry = transformedEntries.at(-1);
+			if (latestEntry) isIntersecting.value = latestEntry.isIntersecting;
+			callback(transformedEntries);
+		}, {
+			root: options.root || null,
+			rootMargin: options.rootMargin || "0px",
+			threshold: options.threshold || 0
+		});
+		observer.value.observe(el);
+		if (options.immediate) {
+			const rect = el.getBoundingClientRect();
+			const syntheticEntry = {
+				boundingClientRect: rect,
+				intersectionRatio: 0,
+				intersectionRect: new DOMRect(0, 0, 0, 0),
+				isIntersecting: false,
+				rootBounds: null,
+				target: el,
+				time: performance.now()
+			};
+			callback([syntheticEntry]);
+		}
+	});
+	function setup() {
+		if (!isHydrated.value || !SUPPORTS_INTERSECTION_OBSERVER || !target.value || isPaused.value) return;
+		observer.value = new IntersectionObserver((entries) => {
+			const transformedEntries = entries.map((entry) => ({
+				boundingClientRect: entry.boundingClientRect,
+				intersectionRatio: entry.intersectionRatio,
+				intersectionRect: entry.intersectionRect,
+				isIntersecting: entry.isIntersecting,
+				rootBounds: entry.rootBounds,
+				target: entry.target,
+				time: entry.time
+			}));
+			const latestEntry = transformedEntries.at(-1);
+			if (latestEntry) isIntersecting.value = latestEntry.isIntersecting;
+			callback(transformedEntries);
+		}, {
+			root: options.root || null,
+			rootMargin: options.rootMargin || "0px",
+			threshold: options.threshold || 0
+		});
+		observer.value.observe(target.value);
+		if (options.immediate) {
+			const rect = target.value.getBoundingClientRect();
+			const syntheticEntry = {
+				boundingClientRect: rect,
+				intersectionRatio: 0,
+				intersectionRect: new DOMRect(0, 0, 0, 0),
+				isIntersecting: false,
+				rootBounds: null,
+				target: target.value,
+				time: performance.now()
+			};
+			callback([syntheticEntry]);
+		}
+	}
+	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();
+	}
+	onUnmounted(stop);
+	return {
+		isIntersecting: readonly(isIntersecting),
+		isPaused: readonly(isPaused),
+		pause,
+		resume,
+		stop
+	};
+}
+/**
+* Convenience composable for simple intersection detection
+*
+* @param target - Element ref to observe
+* @param options - Observer options
+* @returns Reactive intersection state
+*/
+function useElementIntersection(target, options = {}) {
+	const isIntersecting = shallowRef(false);
+	const intersectionRatio = shallowRef(0);
+	useIntersectionObserver(target, (entries) => {
+		const entry = entries.at(-1);
+		if (entry) {
+			isIntersecting.value = entry.isIntersecting;
+			intersectionRatio.value = entry.intersectionRatio;
+		}
+	}, {
+		immediate: true,
+		...options
+	});
+	return {
+		isIntersecting: readonly(isIntersecting),
+		intersectionRatio: readonly(intersectionRatio)
+	};
+}
+
 //#endregion
 //#region src/composables/useKeydown/index.ts
 /**
@@ -2207,7 +2494,7 @@ function useForm(options) {
 function useKeydown(handlers) {
 	const keyHandlers = Array.isArray(handlers) ? handlers : [handlers];
 	function onKeydown(event) {
-		const handler = keyHandlers.find((h$1) => h$1.key === event.key);
+		const handler = keyHandlers.find((h) => h.key === event.key);
 		if (handler) {
 			if (handler.preventDefault) event.preventDefault();
 			if (handler.stopPropagation) event.stopPropagation();
@@ -2415,6 +2702,134 @@ function createLocalePlugin(options = {}) {
 	});
 }
 
+//#endregion
+//#region src/composables/useMutationObserver/index.ts
+/**
+* Composable for observing DOM mutations
+*
+* @param target - Element ref to observe
+* @param callback - Callback fired on mutation
+* @param options - Observer options
+* @returns Observer controls
+*
+* @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
+*/
+function useMutationObserver(target, callback, options = {}) {
+	const { isHydrated } = useHydration();
+	const observer = shallowRef();
+	const isPaused = shallowRef(false);
+	const observerOptions = {
+		childList: options.childList ?? true,
+		attributes: options.attributes ?? false,
+		characterData: options.characterData ?? false,
+		subtree: options.subtree ?? false,
+		attributeOldValue: options.attributeOldValue ?? false,
+		characterDataOldValue: options.characterDataOldValue ?? false,
+		attributeFilter: options.attributeFilter
+	};
+	watch([isHydrated, target], ([hydrated, el]) => {
+		cleanup();
+		if (!hydrated || !SUPPORTS_MUTATION_OBSERVER || !el) return;
+		observer.value = new MutationObserver((mutations) => {
+			const transformedEntries = mutations.map((mutation) => ({
+				type: mutation.type,
+				target: mutation.target,
+				addedNodes: mutation.addedNodes,
+				removedNodes: mutation.removedNodes,
+				previousSibling: mutation.previousSibling,
+				nextSibling: mutation.nextSibling,
+				attributeName: mutation.attributeName,
+				attributeNamespace: mutation.attributeNamespace,
+				oldValue: mutation.oldValue
+			}));
+			callback(transformedEntries);
+		});
+		observer.value.observe(el, observerOptions);
+		if (options.immediate) {
+			const emptyNodeList = {
+				length: 0,
+				item: () => null,
+				forEach: () => {},
+				*[Symbol.iterator]() {}
+			};
+			const syntheticEntry = {
+				type: "childList",
+				target: el,
+				addedNodes: emptyNodeList,
+				removedNodes: emptyNodeList,
+				previousSibling: null,
+				nextSibling: null,
+				attributeName: null,
+				attributeNamespace: null,
+				oldValue: null
+			};
+			callback([syntheticEntry]);
+		}
+	}, { immediate: true });
+	function setup() {
+		if (!isHydrated.value || !SUPPORTS_MUTATION_OBSERVER || !target.value || isPaused.value) return;
+		observer.value = new MutationObserver((mutations) => {
+			const transformedEntries = mutations.map((mutation) => ({
+				type: mutation.type,
+				target: mutation.target,
+				addedNodes: mutation.addedNodes,
+				removedNodes: mutation.removedNodes,
+				previousSibling: mutation.previousSibling,
+				nextSibling: mutation.nextSibling,
+				attributeName: mutation.attributeName,
+				attributeNamespace: mutation.attributeNamespace,
+				oldValue: mutation.oldValue
+			}));
+			callback(transformedEntries);
+		});
+		observer.value.observe(target.value, observerOptions);
+		if (options.immediate) {
+			const emptyNodeList = {
+				length: 0,
+				item: () => null,
+				forEach: () => {},
+				*[Symbol.iterator]() {}
+			};
+			const syntheticEntry = {
+				type: "childList",
+				target: target.value,
+				addedNodes: emptyNodeList,
+				removedNodes: emptyNodeList,
+				previousSibling: null,
+				nextSibling: null,
+				attributeName: null,
+				attributeNamespace: null,
+				oldValue: null
+			};
+			callback([syntheticEntry]);
+		}
+	}
+	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();
+	}
+	onUnmounted(stop);
+	return {
+		isPaused: readonly(isPaused),
+		pause,
+		resume,
+		stop
+	};
+}
+
 //#endregion
 //#region src/composables/useProxyModel/index.ts
 /**
@@ -2477,6 +2892,126 @@ function useProxyModel(registry, initial, options, _transformIn, _transformOut)
 	return model;
 }
 
+//#endregion
+//#region src/composables/useResizeObserver/index.ts
+/**
+* Composable for observing element resize events
+*
+* @param target - Element ref to observe
+* @param callback - Callback fired on resize
+* @param options - Observer options
+* @returns Observer controls
+*
+* @see https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
+*/
+function useResizeObserver(target, callback, options = {}) {
+	const { isHydrated } = useHydration();
+	const observer = shallowRef();
+	const isPaused = shallowRef(false);
+	watch([isHydrated, target], ([hydrated, el]) => {
+		cleanup();
+		if (!hydrated || !SUPPORTS_OBSERVER || !el) return;
+		observer.value = new ResizeObserver((entries) => {
+			const transformedEntries = entries.map((entry) => ({
+				contentRect: {
+					width: entry.contentRect.width,
+					height: entry.contentRect.height,
+					top: entry.contentRect.top,
+					left: entry.contentRect.left
+				},
+				target: entry.target
+			}));
+			callback(transformedEntries);
+		});
+		observer.value.observe(el, { box: options.box || "content-box" });
+		if (options.immediate) {
+			const rect = el.getBoundingClientRect();
+			callback([{
+				contentRect: {
+					width: rect.width,
+					height: rect.height,
+					top: rect.top,
+					left: rect.left
+				},
+				target: el
+			}]);
+		}
+	});
+	function setup() {
+		if (!isHydrated.value || !SUPPORTS_OBSERVER || !target.value || isPaused.value) return;
+		observer.value = new ResizeObserver((entries) => {
+			const transformedEntries = entries.map((entry) => ({
+				contentRect: {
+					width: entry.contentRect.width,
+					height: entry.contentRect.height,
+					top: entry.contentRect.top,
+					left: entry.contentRect.left
+				},
+				target: entry.target
+			}));
+			callback(transformedEntries);
+		});
+		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 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();
+	}
+	onUnmounted(stop);
+	return {
+		isPaused: readonly(isPaused),
+		pause,
+		resume,
+		stop
+	};
+}
+/**
+* Convenience composable for tracking element dimensions
+*
+* @param target - Element ref to observe
+* @returns Reactive width and height
+*/
+function useElementSize(target) {
+	const width = shallowRef(0);
+	const height = shallowRef(0);
+	useResizeObserver(target, (entries) => {
+		const entry = entries[0];
+		if (entry) {
+			width.value = entry.contentRect.width;
+			height.value = entry.contentRect.height;
+		}
+	}, { immediate: true });
+	return {
+		width,
+		height
+	};
+}
+
 //#endregion
 //#region src/composables/useStorage/adapters/memory.ts
 /**
@@ -2585,4 +3120,4 @@ function createStoragePlugin(options = {}) {
 }
 
 //#endregion
-export { Atom_default as Atom, Breakpoints, ConsolaLoggerAdapter, Context, Group, Hydration_default as Hydration, HydrationRoot_default as HydrationRoot, PinoLoggerAdapter, Popover, Step, Theme, Vuetify0LoggerAdapter, createBreakpoints, createBreakpointsPlugin, createContext, createHydration, createHydrationPlugin, createLocale, createLocalePlugin, createLogger, createLoggerPlugin, createPlugin, createStorage, createStoragePlugin, createTheme, createThemePlugin, createTokensContext, createTrinity, genId, isArray, isBoolean, isFunction, isNullOrUndefined, isNumber, isObject, isPrimitive, isString, mergeDeep, provideBreakpointsContext, provideHydrationContext, providePopoverContext, provideStorageContext, run, toArray, toReactive, useBreakpoints, useBreakpointsContext, useContext, useDocumentEventListener, useEventListener, useFilter, useForm, useGroup, useHydration, useHydrationContext, useKeydown, useLayout, useLocale, useLogger, usePopoverContext, useProxyModel, useRegistry, useSelection, useSingle, useStep, useStorage, useStorageContext, useTheme, useTokens, useWindowEventListener };
+export { Atom_default as Atom, Breakpoints, COMMON_ELEMENTS, ConsolaLoggerAdapter, Context, Group, Hydration_default as Hydration, HydrationRoot_default as HydrationRoot, IN_BROWSER, PinoLoggerAdapter, Popover, SELF_CLOSING_TAGS, SUPPORTS_INTERSECTION_OBSERVER, SUPPORTS_MATCH_MEDIA, SUPPORTS_MUTATION_OBSERVER, SUPPORTS_OBSERVER, SUPPORTS_TOUCH, Step, Theme, Vuetify0LoggerAdapter, __LOGGER_ENABLED__, createBreakpoints, createBreakpointsPlugin, createContext, createHydration, createHydrationPlugin, createLocale, createLocalePlugin, createLogger, createLoggerPlugin, createPlugin, createRegistryContext, createStorage, createStoragePlugin, createTheme, createThemePlugin, createTokensContext, createTrinity, genId, isArray, isBoolean, isFunction, isNullOrUndefined, isNumber, isObject, isPrimitive, isSelfClosingTag, isString, mergeDeep, provideBreakpointsContext, provideHydrationContext, providePopoverContext, provideStorageContext, run, toArray, toReactive, useBreakpoints, useBreakpointsContext, useContext, useDocumentEventListener, useElementIntersection, useElementSize, useEventListener, useFilter, useForm, useGroup, useHydration, useHydrationContext, useIntersectionObserver, useKeydown, useLayout, useLocale, useLogger, useMutationObserver, usePopoverContext, useProxyModel, useRegistry, useResizeObserver, useSelection, useSingle, useStep, useStorage, useStorageContext, useTheme, useTokens, useWindowEventListener, version };