@vuetify/v0 0.0.2-beta.3 → 0.0.2

package/dist/useTheme-DSYiiz0R.js

@@ -0,0 +1,1244 @@
+import { createContext, createPlugin, createTrinity, useContext } from "./factories-CPq2yMlr.js";
+import { genId, isArray, isObject, isString, mergeDeep } from "./utilities-D9rWEgQK.js";
+import { IN_BROWSER, __LOGGER_ENABLED__ } from "./globals--2b7sF4-.js";
+import { toArray } from "./transformers-BAeg3QJF.js";
+import { computed, getCurrentInstance, onMounted, onScopeDispose, shallowReactive, shallowReadonly, shallowRef, toRef, watch } from "vue";
+
+//#region src/composables/useHydration/index.ts
+const [useHydrationContext, provideHydrationContext] = createContext("v0:hydration");
+/**
+* Creates a hydration context for tracking client-side hydration state in SSR applications.
+* This function provides a way to determine when the application has been fully hydrated
+* on the client side, which is essential for SSR/SSG compatibility.
+*
+* @returns A hydration context object with reactive state and hydration control.
+*/
+function createHydration() {
+	const isHydrated = shallowRef(false);
+	function hydrate() {
+		isHydrated.value = true;
+	}
+	return {
+		isHydrated: shallowReadonly(isHydrated),
+		hydrate
+	};
+}
+/**
+* Simple hook to access the hydration context.
+*
+* @returns The hydration context containing hydration state and controls.
+*/
+function useHydration() {
+	return useHydrationContext();
+}
+/**
+* Creates a Vue plugin for hydration state management in SSR/SSG applications.
+* This plugin automatically detects when the root component is mounted and
+* triggers the hydration process, ensuring proper client-side hydration timing.
+*
+* @returns A Vue plugin object with install method.
+*/
+function createHydrationPlugin() {
+	const context = createHydration();
+	return createPlugin({
+		namespace: "v0:hydration",
+		provide: (app) => {
+			provideHydrationContext(context, app);
+		},
+		setup: (app) => {
+			app.mixin({ mounted() {
+				if (this.$parent !== null) return;
+				context.hydrate();
+			} });
+		}
+	});
+}
+
+//#endregion
+//#region src/composables/useBreakpoints/index.ts
+const [useBreakpointsContext, provideBreakpointsContext] = createContext("v0:breakpoints");
+/**
+* Simple hook to access the breakpoints context.
+*
+* @returns The breakpoints context containing current breakpoint information.
+*/
+function useBreakpoints() {
+	return useBreakpointsContext();
+}
+/**
+* Creates default breakpoint configuration.
+*
+* @returns The default breakpoint configuration object.
+*/
+function createDefaultBreakpoints() {
+	return {
+		mobileBreakpoint: "md",
+		breakpoints: {
+			xs: 0,
+			sm: 600,
+			md: 960,
+			lg: 1280,
+			xl: 1920,
+			xxl: 2560
+		}
+	};
+}
+/**
+* Creates a reactive breakpoints system for responsive behavior management.
+* This function provides access to viewport dimensions, breakpoint detection, and helper flags
+* for determining current screen size and implementing responsive logic.
+*
+* @param options Optional configuration for breakpoint thresholds and mobile breakpoint.
+* @returns A breakpoints context object with reactive state and utility methods.
+*/
+function createBreakpoints(options = {}) {
+	const defaults = createDefaultBreakpoints();
+	const { mobileBreakpoint, breakpoints } = mergeDeep(defaults, options);
+	const sorted = Object.entries(breakpoints).sort((a, b) => a[1] - b[1]);
+	const names = sorted.map(([n]) => n);
+	const mb = typeof mobileBreakpoint === "number" ? mobileBreakpoint : breakpoints[mobileBreakpoint] ?? breakpoints.md;
+	const state = shallowReactive({
+		breakpoints,
+		name: "xs",
+		width: 0,
+		height: 0,
+		isMobile: true,
+		xs: true,
+		sm: false,
+		md: false,
+		lg: false,
+		xl: false,
+		xxl: false,
+		smAndUp: false,
+		mdAndUp: false,
+		lgAndUp: false,
+		xlAndUp: false,
+		xxlAndUp: false,
+		smAndDown: true,
+		mdAndDown: true,
+		lgAndDown: true,
+		xlAndDown: true,
+		xxlAndDown: true,
+		update
+	});
+	function update() {
+		if (!IN_BROWSER) return;
+		state.width = window.innerWidth;
+		state.height = window.innerHeight;
+		let current = "xs";
+		for (let i = sorted.length - 1; i >= 0; i--) if (state.width >= sorted[i][1]) {
+			current = sorted[i][0];
+			break;
+		}
+		state.name = current;
+		const index = names.indexOf(current);
+		state.isMobile = state.width < mb;
+		state.xs = index === 0;
+		state.sm = index === 1;
+		state.md = index === 2;
+		state.lg = index === 3;
+		state.xl = index === 4;
+		state.xxl = index === 5;
+		state.smAndUp = index >= 1;
+		state.mdAndUp = index >= 2;
+		state.lgAndUp = index >= 3;
+		state.xlAndUp = index >= 4;
+		state.xxlAndUp = index >= 5;
+		state.smAndDown = index <= 1;
+		state.mdAndDown = index <= 2;
+		state.lgAndDown = index <= 3;
+		state.xlAndDown = index <= 4;
+		state.xxlAndDown = index <= 5;
+	}
+	if (getCurrentInstance()) onMounted(() => {
+		const { isHydrated } = useHydration();
+		if (isHydrated.value) update();
+		watch(isHydrated, (hydrated) => {
+			if (hydrated) update();
+		}, { immediate: true });
+	});
+	if (IN_BROWSER) {
+		function listener() {
+			update();
+		}
+		window.addEventListener("resize", listener, { passive: true });
+		if (getCurrentInstance()) onScopeDispose(() => window.removeEventListener("resize", listener));
+	}
+	return state;
+}
+/**
+* Creates a Vue plugin for managing responsive breakpoints with automatic updates.
+* This plugin sets up breakpoint tracking and updates the context when the window
+* is resized, providing reactive breakpoint state throughout the application.
+*
+* @param options Optional configuration for breakpoint thresholds and mobile breakpoint.
+* @returns A Vue plugin object with install method.
+*/
+function createBreakpointsPlugin(options = {}) {
+	const context = createBreakpoints(options);
+	return createPlugin({
+		namespace: "v0:breakpoints",
+		provide: (app) => {
+			provideBreakpointsContext(context, app);
+		},
+		setup: (app) => {
+			app.mixin({ mounted() {
+				context.update();
+			} });
+		}
+	});
+}
+
+//#endregion
+//#region src/composables/useLogger/adapters/consola.ts
+var ConsolaLoggerAdapter = class {
+	consola;
+	constructor(consolaInstance) {
+		if (!consolaInstance) throw new Error("Consola instance is required for ConsolaLoggerAdapter");
+		this.consola = consolaInstance;
+	}
+	debug(message, ...args) {
+		this.consola.debug(message, ...args);
+	}
+	info(message, ...args) {
+		this.consola.info(message, ...args);
+	}
+	warn(message, ...args) {
+		this.consola.warn(message, ...args);
+	}
+	error(message, ...args) {
+		this.consola.error(message, ...args);
+	}
+	trace(message, ...args) {
+		if (this.consola.trace) this.consola.trace(message, ...args);
+		else this.consola.debug(message, ...args);
+	}
+	fatal(message, ...args) {
+		if (this.consola.fatal) this.consola.fatal(message, ...args);
+		else this.consola.error("[FATAL]", message, ...args);
+	}
+};
+
+//#endregion
+//#region src/composables/useLogger/adapters/pino.ts
+/**
+* Pino logger adapter implementation
+*
+* This adapter integrates with the Pino logging library,
+* providing high-performance structured logging optimized
+* for Node.js applications with minimal overhead.
+*/
+var PinoLoggerAdapter = class {
+	pino;
+	constructor(pinoInstance) {
+		if (!pinoInstance) throw new Error("Pino instance is required for PinoLoggerAdapter");
+		this.pino = pinoInstance;
+	}
+	debug(message, ...args) {
+		this.pino.debug(this.format(message, ...args));
+	}
+	info(message, ...args) {
+		this.pino.info(this.format(message, ...args));
+	}
+	warn(message, ...args) {
+		this.pino.warn(this.format(message, ...args));
+	}
+	error(message, ...args) {
+		this.pino.error(this.format(message, ...args));
+	}
+	trace(message, ...args) {
+		this.pino.trace(this.format(message, ...args));
+	}
+	fatal(message, ...args) {
+		this.pino.fatal(this.format(message, ...args));
+	}
+	format(message, ...args) {
+		if (args.length === 0) return { msg: message };
+		if (args.length === 1 && typeof args[0] === "object" && args[0] !== null) return {
+			...args[0],
+			msg: message
+		};
+		return {
+			msg: message,
+			args
+		};
+	}
+};
+
+//#endregion
+//#region src/composables/useLogger/adapters/v0.ts
+/**
+* Vuetify0.x logger adapter implementation
+*
+* This adapter provides console-based logging with proper formatting,
+* color coding, timestamps, and log level filtering for development
+* and production environments.
+*/
+var Vuetify0LoggerAdapter = class {
+	prefix;
+	colors;
+	timestamps;
+	constructor(options = {}) {
+		this.prefix = options.prefix || "v0";
+		this.colors = options.colors !== false;
+		this.timestamps = options.timestamps !== false;
+	}
+	debug(message, ...args) {
+		this.log("debug", "debug", message, ...args);
+	}
+	info(message, ...args) {
+		this.log("info", "info", message, ...args);
+	}
+	warn(message, ...args) {
+		this.log("warn", "warn", message, ...args);
+	}
+	error(message, ...args) {
+		this.log("error", "error", message, ...args);
+	}
+	trace(message, ...args) {
+		this.log("trace", "trace", message, ...args);
+	}
+	fatal(message, ...args) {
+		this.log("fatal", "error", message, ...args);
+	}
+	format(level, message, ...args) {
+		const timestamp = this.timestamps ? this.timestamp() : "";
+		const prefixTag = `[${this.prefix} ${level.toLowerCase()}]`;
+		const formattedMessage = [
+			timestamp,
+			prefixTag,
+			message
+		].filter(Boolean).join(" ");
+		return [formattedMessage, ...args];
+	}
+	timestamp() {
+		if (!IN_BROWSER) return (/* @__PURE__ */ new Date()).toISOString();
+		const now = /* @__PURE__ */ new Date();
+		return now.toTimeString().split(" ")[0];
+	}
+	style(level) {
+		if (!this.colors || !IN_BROWSER) return "";
+		const styles = {
+			trace: "color: #64748b",
+			debug: "color: #3b82f6",
+			info: "color: #10b981",
+			warn: "color: #f59e0b",
+			error: "color: #ef4444",
+			fatal: "color: #dc2626; font-weight: bold",
+			silent: ""
+		};
+		return styles[level] || "";
+	}
+	log(level, method, message, ...args) {
+		const [formattedMessage, ...restArgs] = this.format(level, message, ...args);
+		const style = this.style(level);
+		if (IN_BROWSER && style && typeof console[method] === "function") console[method](`%c${formattedMessage}`, style, ...restArgs);
+		else if (typeof console[method] === "function") console[method](formattedMessage, ...restArgs);
+	}
+};
+
+//#endregion
+//#region src/composables/useLogger/index.ts
+const [useLoggerContext, provideLoggerContext] = createContext("v0:logger");
+/**
+* Creates a logger context for application logging with configurable adapters and levels.
+* This function provides a consistent logging interface that can be configured with
+* different adapters and optimized for production builds with conditional compilation.
+*
+* @param options Configuration for the logger adapter, level, and behavior.
+* @returns A logger context object with logging methods and controls.
+*/
+function createLogger(options = {}) {
+	const { adapter = new Vuetify0LoggerAdapter({ prefix: options.prefix }), level: initialLevel = "info", enabled: initialEnabled = __LOGGER_ENABLED__ } = options;
+	const currentLevel = shallowRef(initialLevel);
+	const isEnabled = shallowRef(initialEnabled);
+	function value(level$1) {
+		const levels = {
+			trace: 0,
+			debug: 1,
+			info: 2,
+			warn: 3,
+			error: 4,
+			fatal: 5,
+			silent: 6
+		};
+		return levels[level$1] ?? 2;
+	}
+	function can(level$1) {
+		if (!isEnabled.value) return false;
+		return value(level$1) >= value(currentLevel.value);
+	}
+	function format(message) {
+		return message;
+	}
+	function debug(message, ...args) {
+		if (can("debug")) adapter.debug(format(message), ...args);
+	}
+	function info(message, ...args) {
+		if (can("info")) adapter.info(format(message), ...args);
+	}
+	function warn(message, ...args) {
+		if (can("warn")) adapter.warn(format(message), ...args);
+	}
+	function error(message, ...args) {
+		if (can("error")) adapter.error(format(message), ...args);
+	}
+	function trace(message, ...args) {
+		if (can("trace")) adapter.trace?.(format(message), ...args);
+	}
+	function fatal(message, ...args) {
+		if (can("fatal")) adapter.fatal?.(format(message), ...args);
+	}
+	function level(newLevel) {
+		currentLevel.value = newLevel;
+	}
+	function current() {
+		return currentLevel.value;
+	}
+	function enabled() {
+		return isEnabled.value;
+	}
+	function enable() {
+		isEnabled.value = true;
+	}
+	function disable() {
+		isEnabled.value = false;
+	}
+	return {
+		debug,
+		info,
+		warn,
+		error,
+		trace,
+		fatal,
+		level,
+		current,
+		enabled,
+		enable,
+		disable
+	};
+}
+function createFallbackLogger(namespace = "v0:logger") {
+	function format(message, type) {
+		return `[${namespace} ${type}] ${message}`;
+	}
+	return {
+		debug: (message, ...args) => console.log(format(message, "debug"), ...args),
+		info: (message, ...args) => console.log(format(message, "info"), ...args),
+		warn: (message, ...args) => console.log(format(message, "warn"), ...args),
+		error: (message, ...args) => console.log(format(message, "error"), ...args),
+		trace: (message, ...args) => console.log(format(message, "trace"), ...args),
+		fatal: (message, ...args) => console.log(format(message, "fatal"), ...args),
+		level: () => {},
+		current: () => "info",
+		enabled: () => true,
+		enable: () => {},
+		disable: () => {}
+	};
+}
+function useLogger(namespace) {
+	if (getCurrentInstance()) try {
+		return useLoggerContext(namespace);
+	} catch (error) {
+		if (process.env.NODE_ENV !== "production" && IN_BROWSER && namespace) console.warn(error);
+	}
+	return createFallbackLogger(namespace);
+}
+function createLoggerPlugin(options = {}) {
+	const context = createLogger(options);
+	return createPlugin({
+		namespace: "v0:logger",
+		provide: (app) => {
+			provideLoggerContext(context, app);
+		},
+		setup: (_app) => {
+			if (process.env.NODE_ENV !== "production" && IN_BROWSER) window.__v0Logger__ = context;
+		}
+	});
+}
+
+//#endregion
+//#region src/composables/useRegistry/index.ts
+/**
+* Creates a registry for managing collections of items with registration and lookup capabilities.
+* This function provides the foundation for item management systems with ID-based, value-based,
+* and index-based access patterns.
+*
+* @param options Optional configuration for enabling events.
+* @template Z The type of items managed by the registry.
+* @template E The type of the registry context.
+* @returns The registry context object.
+*/
+function useRegistry(options) {
+	const logger = useLogger();
+	const collection = /* @__PURE__ */ new Map();
+	const catalog = /* @__PURE__ */ new Map();
+	const directory = /* @__PURE__ */ new Map();
+	const cache = /* @__PURE__ */ new Map();
+	const listeners = /* @__PURE__ */ new Map();
+	function emit(event, data) {
+		if (!options?.events) return;
+		const cbs = listeners.get(event);
+		if (!cbs) return;
+		for (const cb of cbs) cb(data);
+	}
+	function on(event, cb) {
+		if (!listeners.has(event)) listeners.set(event, /* @__PURE__ */ new Set());
+		listeners.get(event).add(cb);
+	}
+	function off(event, cb) {
+		listeners.get(event)?.delete(cb);
+	}
+	function dispose() {
+		if (listeners.size > 0) listeners.clear();
+		clear();
+	}
+	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);
+	}
+	function lookup(index) {
+		return directory.get(index);
+	}
+	function has(id) {
+		return collection.has(id);
+	}
+	function assign(value, id) {
+		const bucket = catalog.get(value);
+		if (bucket) {
+			if (isArray(bucket)) {
+				if (!bucket.includes(id)) bucket.push(id);
+			} else if (bucket !== id) catalog.set(value, [bucket, id]);
+		} else catalog.set(value, id);
+	}
+	function unassign(value, id) {
+		const bucket = catalog.get(value);
+		if (!bucket) return;
+		if (isArray(bucket)) {
+			const next = bucket.filter((v) => v !== id);
+			if (next.length === 0) catalog.delete(value);
+			else if (next.length === 1) catalog.set(value, next[0]);
+			else catalog.set(value, next);
+		} else if (bucket === id) catalog.delete(value);
+	}
+	function keys() {
+		const cached = cache.get("keys");
+		if (cached != void 0) return cached;
+		const keys$1 = Array.from(collection.keys());
+		cache.set("keys", keys$1);
+		return keys$1;
+	}
+	function values() {
+		const cached = cache.get("values");
+		if (cached != void 0) return cached;
+		const values$1 = Array.from(collection.values());
+		cache.set("values", values$1);
+		return values$1;
+	}
+	function entries() {
+		const cached = cache.get("entries");
+		if (cached != void 0) return cached;
+		const entries$1 = Array.from(collection.entries());
+		cache.set("entries", entries$1);
+		return entries$1;
+	}
+	function clear() {
+		if (collection.size > 0) collection.clear();
+		if (catalog.size > 0) catalog.clear();
+		if (directory.size > 0) directory.clear();
+		invalidate();
+	}
+	function invalidate() {
+		if (cache.size > 0) cache.clear();
+	}
+	function reindex() {
+		if (catalog.size > 0) catalog.clear();
+		if (directory.size > 0) directory.clear();
+		let index = 0;
+		for (const item of values()) {
+			if (item.index !== index) {
+				item.index = index;
+				if (item.valueIsIndex) item.value = index;
+			}
+			directory.set(index, item.id);
+			assign(item.value, item.id);
+			index++;
+		}
+		invalidate();
+	}
+	function register(registration = {}) {
+		const size = collection.size;
+		const id = registration.id ?? genId();
+		if (has(id)) {
+			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,
+			value,
+			valueIsIndex
+		};
+		collection.set(item.id, item);
+		directory.set(item.index, item.id);
+		assign(item.value, item.id);
+		invalidate();
+		emit("register", item);
+		return item;
+	}
+	function unregister(id) {
+		const item = collection.get(id);
+		if (!item) return;
+		collection.delete(item.id);
+		directory.delete(item.index);
+		unassign(item.value, item.id);
+		emit("unregister", item);
+		reindex();
+	}
+	return {
+		collection,
+		emit,
+		on,
+		off,
+		dispose,
+		has,
+		keys,
+		clear,
+		browse,
+		entries,
+		values,
+		lookup,
+		get,
+		upsert,
+		register,
+		unregister,
+		reindex,
+		onboard(registrations) {
+			return registrations.map((registration) => this.register(registration));
+		},
+		get size() {
+			return collection.size;
+		}
+	};
+}
+/**
+* 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
+/**
+* Creates a selection context for managing collections of selectable items.
+* This function extends the registry functionality with selection state management.
+*
+* @param options Optional configuration for selection behavior.
+* @template Z The type of items managed by the selection.
+* @template E The type of the selection context.
+* @returns The selection context object.
+*/
+function useSelection(options) {
+	const registry = useRegistry(options);
+	const selectedIds = shallowReactive(/* @__PURE__ */ new Set());
+	const enroll = options?.enroll ?? false;
+	const mandatory = options?.mandatory ?? false;
+	const selectedItems = computed(() => {
+		return new Set(Array.from(selectedIds).map((id) => registry.get(id)));
+	});
+	const selectedValues = computed(() => {
+		return new Set(Array.from(selectedItems.value).map((item) => item?.value));
+	});
+	function mandate() {
+		if (!mandatory || registry.selectedIds.size > 0 || registry.size === 0) return;
+		select(registry.lookup(0));
+	}
+	function select(id) {
+		const item = registry.get(id);
+		if (!item || item.disabled) return;
+		selectedIds.add(id);
+	}
+	function unselect(id) {
+		if (mandatory && selectedIds.size === 1) return;
+		selectedIds.delete(id);
+	}
+	function toggle(id) {
+		if (selectedIds.has(id)) unselect(id);
+		else select(id);
+	}
+	function register(registration = {}) {
+		const id = registration.id ?? genId();
+		const item = {
+			disabled: false,
+			...registration,
+			id,
+			isActive: toRef(() => selectedIds.has(id)),
+			select: () => select(id),
+			unselect: () => unselect(id),
+			toggle: () => toggle(id)
+		};
+		const ticket = registry.register(item);
+		if (enroll && !item.disabled) selectedIds.add(ticket.id);
+		if (mandatory === "force") mandate();
+		return ticket;
+	}
+	function unregister(id) {
+		selectedIds.delete(id);
+		registry.unregister(id);
+	}
+	function reset() {
+		registry.clear();
+		registry.reindex();
+		registry.mandate();
+	}
+	return {
+		...registry,
+		selectedIds,
+		selectedItems,
+		selectedValues,
+		register,
+		unregister,
+		reset,
+		mandate,
+		select,
+		unselect,
+		toggle
+	};
+}
+
+//#endregion
+//#region src/composables/useGroup/index.ts
+/**
+* Creates a group selection context for managing collections of items where multiple selections can be made.
+* This function extends the selection functionality with group selection capabilities.
+*
+* @param options Optional configuration for group selection behavior.
+* @template Z The type of items managed by the group selection.
+* @template E The type of the group selection context.
+* @returns The group selection context object.
+*/
+function useGroup(options) {
+	const registry = useSelection(options);
+	const selectedIndexes = computed(() => {
+		return new Set(Array.from(registry.selectedItems.value).map((item) => item?.index));
+	});
+	function select(ids) {
+		for (const id of toArray(ids)) registry.select(id);
+	}
+	function unselect(ids) {
+		for (const id of toArray(ids)) registry.unselect(id);
+	}
+	function toggle(ids) {
+		for (const id of toArray(ids)) registry.toggle(id);
+	}
+	return {
+		...registry,
+		select,
+		unselect,
+		toggle,
+		selectedIndexes
+	};
+}
+
+//#endregion
+//#region src/composables/useSingle/index.ts
+/**
+* Creates a single selection context for managing collections where only one item can be selected.
+* This function extends the selection functionality with single-selection constraints.
+*
+* @param options Optional configuration for single selection behavior.
+* @template Z The type of items managed by the single selection.
+* @template E The type of the single selection context.
+* @returns The single selection context object.
+*/
+function useSingle(options) {
+	const registry = useSelection(options);
+	const mandatory = options?.mandatory ?? true;
+	const selectedId = computed(() => registry.selectedIds.values().next().value);
+	const selectedItem = computed(() => registry.selectedItems.value.values().next().value);
+	const selectedIndex = computed(() => selectedItem.value?.index ?? -1);
+	const selectedValue = computed(() => selectedItem.value?.value);
+	function select(id) {
+		const item = registry.get(id);
+		if (!item || item.disabled) return;
+		registry.selectedIds.clear();
+		registry.selectedIds.add(id);
+	}
+	function unselect(id) {
+		if (mandatory && registry.selectedIds.size === 1) return;
+		registry.selectedIds.delete(id);
+	}
+	function toggle(id) {
+		if (registry.selectedIds.has(id)) unselect(id);
+		else select(id);
+	}
+	return {
+		...registry,
+		selectedId,
+		selectedItem,
+		selectedIndex,
+		selectedValue,
+		select,
+		unselect,
+		toggle
+	};
+}
+
+//#endregion
+//#region src/composables/useStep/index.ts
+/**
+* Creates a step selection context for managing collections where users can navigate through items sequentially.
+* This function extends the single selection functionality with stepping navigation.
+*
+* @param options Optional configuration for step behavior.
+* @template Z The type of items managed by the step selection.
+* @template E The type of the step selection context.
+* @returns The step selection context object.
+*/
+function useStep(options) {
+	const registry = useSingle(options);
+	function first() {
+		if (registry.size === 0) return;
+		registry.selectedIds.clear();
+		registry.select(registry.lookup(0));
+	}
+	function last() {
+		const size = registry.size;
+		if (size === 0) return;
+		registry.selectedIds.clear();
+		registry.select(registry.lookup(size - 1));
+	}
+	function next() {
+		step(1);
+	}
+	function prev() {
+		step(-1);
+	}
+	function wrapped(length, index) {
+		return (index + length) % length;
+	}
+	function step(count = 1) {
+		const length = registry.size;
+		if (!length) return;
+		const direction = Math.sign(count || 1);
+		let hops = 0;
+		let index = wrapped(length, registry.selectedIndex.value + count);
+		let id = registry.lookup(index);
+		while (id !== void 0 && registry.get(id)?.disabled && hops < length) {
+			index = wrapped(length, index + direction);
+			id = registry.lookup(index);
+			hops++;
+		}
+		if (id === void 0 || hops === length) return;
+		registry.selectedIds.clear();
+		registry.select(id);
+	}
+	return {
+		...registry,
+		first,
+		last,
+		next,
+		prev,
+		step
+	};
+}
+
+//#endregion
+//#region src/composables/useTokens/index.ts
+/**
+* Creates a token registry for managing design token collections with alias resolution.
+* Returns the token context directly for simple usage.
+*
+* @param tokens A collection of tokens to initialize with
+* @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();
+	const registry = useRegistry();
+	const cache = /* @__PURE__ */ new Map();
+	registry.onboard(flatten(tokens));
+	function isAlias(token) {
+		return isString(token) && token.length > 2 && token[0] === "{" && token.at(-1) === "}";
+	}
+	function isTokenAlias(value) {
+		return isObject(value) && "$value" in value;
+	}
+	function resolve(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 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 "${String(reference)}"`);
+			cache.set(cacheKey, void 0);
+			return void 0;
+		}
+		let 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 {
+		...registry,
+		resolve
+	};
+}
+/**
+* Creates a token registry context with full injection/provision control.
+* Returns the complete trinity for advanced usage scenarios.
+*
+* @param namespace The namespace for the token registry context
+* @param tokens An optional collection of tokens to initialize
+* @template Z The structure of the registry token items.
+* @template E The available methods for the token's context.
+* @returns A tuple containing the inject function, provide function, and the token context.
+*/
+function createTokensContext(namespace, tokens = {}) {
+	const [useTokensContext, _provideTokensContext] = createContext(namespace);
+	const context = useTokens(tokens);
+	function provideTokensContext(_context = context, app) {
+		return _provideTokensContext(_context, app);
+	}
+	return createTrinity(useTokensContext, provideTokensContext, context);
+}
+/**
+* Flattens a nested collection of tokens into a flat array of tokens.
+* Each token is represented by an object containing its ID & value.
+* @param tokens The collection of tokens to flatten.
+* @param prefix An optional prefix to prepend to each token ID.
+* @returns An array of flattened tokens, each with an ID and value.
+*/
+function flatten(tokens, prefix = "") {
+	const flattened = [];
+	const stack = [{
+		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 (!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
+			});
+		}
+	}
+	return flattened;
+}
+
+//#endregion
+//#region src/composables/useTheme/adapters/adapter.ts
+var ThemeAdapter = class {
+	prefix;
+	constructor(prefix) {
+		this.prefix = prefix;
+	}
+	generate(colors) {
+		let css = "";
+		for (const theme in colors) {
+			const themeColors = colors[theme];
+			if (!themeColors) continue;
+			const vars = Object.entries(themeColors).map(([key, val]) => `  --${this.prefix}-${key}: ${val};`).join("\n");
+			css += `.${this.prefix}-theme--${theme} {\n${vars}\n}\n`;
+		}
+		return css;
+	}
+};
+
+//#endregion
+//#region src/composables/useTheme/adapters/v0.ts
+/**
+* Theme adapter implementation for Vuetify v0 design system.
+* This adapter generates CSS custom properties and injects them into the DOM
+* as a stylesheet, allowing themes to be applied globally.
+*/
+var Vuetify0ThemeAdapter = class extends ThemeAdapter {
+	cspNonce;
+	stylesheetId = "v0-theme-stylesheet";
+	constructor(options = {}) {
+		super(options.prefix ?? "v0");
+		this.cspNonce = options.cspNonce;
+		this.stylesheetId = options.stylesheetId ?? this.stylesheetId;
+	}
+	update(colors) {
+		if (!IN_BROWSER) return;
+		this.upsert(this.generate(colors));
+	}
+	upsert(styles) {
+		if (!IN_BROWSER) return;
+		let styleEl = document.querySelector(`#${this.stylesheetId}`);
+		if (!styleEl) {
+			styleEl = document.createElement("style");
+			styleEl.id = this.stylesheetId.startsWith("#") ? this.stylesheetId.slice(1) : this.stylesheetId;
+			if (this.cspNonce) styleEl.setAttribute("nonce", this.cspNonce);
+			document.head.append(styleEl);
+		}
+		styleEl.textContent = styles;
+	}
+};
+
+//#endregion
+//#region src/composables/useTheme/index.ts
+/**
+* Creates a theme registry for managing theme selections with dynamic color resolution.
+* Supports token-based color systems and lazy theme loading for optimal performance.
+*
+* @param namespace The namespace for the theme context.
+* @param options Configuration including adapter and themes.
+* @template Z The type of theme context.
+* @template E The type of theme items managed by the registry.
+* @returns A tuple containing inject, provide functions and the theme context.
+*/
+function createTheme(namespace = "v0:theme", options = {}) {
+	const { themes = {}, palette = {} } = options;
+	const [useThemeContext, _provideThemeContext] = createContext(namespace);
+	const registry = useSingle();
+	for (const id in themes) {
+		register({
+			id,
+			value: themes[id].colors,
+			dark: themes[id].dark ?? false,
+			lazy: themes[id].lazy ?? false
+		});
+		if (id === options.default && !registry.selectedId.value) registry.select(id);
+	}
+	const names = computed(() => registry.keys());
+	const colors = computed(() => {
+		const resolved = {};
+		for (const theme of registry.values()) {
+			if (theme.lazy && theme.id !== registry.selectedId.value) continue;
+			resolved[String(theme.id)] = resolve(theme.id, theme.value);
+		}
+		return resolved;
+	});
+	function cycle(themes$1 = names.value) {
+		const current = themes$1.indexOf(registry.selectedId.value ?? "");
+		const next = current === -1 ? 0 : (current + 1) % themes$1.length;
+		registry.select(themes$1[next]);
+	}
+	function resolve(themeId, colors$1) {
+		const resolved = {};
+		for (const [key, value] of Object.entries(colors$1)) resolved[key] = resolveTokenReference(themeId, value);
+		return resolved;
+	}
+	function resolveTokenReference(themeId, value) {
+		return value.replace(/{([a-zA-Z0-9.-_]+)}/g, (match, tokenKey) => {
+			if (palette[tokenKey]) return isString(palette[tokenKey]) ? palette[tokenKey] : match;
+			const [targetTheme, ...colorPath] = tokenKey.split(".");
+			const colorKey = colorPath.join(".");
+			if (targetTheme && colorKey) {
+				const targetColors = themes[targetTheme];
+				const resolved$1 = targetColors?.[colorKey];
+				return isString(resolved$1) ? resolveTokenReference(targetTheme, resolved$1) : match;
+			}
+			const currentColors = themes[themeId];
+			const resolved = currentColors?.[tokenKey];
+			return isString(resolved) ? resolveTokenReference(themeId, resolved) : match;
+		});
+	}
+	function register(registration = {}) {
+		const item = {
+			lazy: false,
+			dark: false,
+			...registration
+		};
+		return registry.register(item);
+	}
+	const context = {
+		...registry,
+		colors,
+		register,
+		cycle
+	};
+	function provideThemeContext(_context = context, app) {
+		return _provideThemeContext(_context, app);
+	}
+	return createTrinity(useThemeContext, provideThemeContext, context);
+}
+/**
+* Simple hook to access the theme context.
+*
+* @returns The theme context containing current theme state and utilities.
+*/
+function useTheme() {
+	return useContext("v0:theme")();
+}
+/**
+* Creates a Vue plugin for theme management with automatic color system updates.
+* Integrates with token system for dynamic color resolution and provides reactive
+* theme switching capabilities throughout the application.
+*
+* @param options Configuration for themes, palette, and adapter.
+* @template Z The type of theme context.
+* @template E The type of theme items.
+* @template R The type of token context.
+* @template O The type of token items.
+* @returns A Vue plugin object with install method.
+*/
+function createThemePlugin(_options = {}) {
+	const { adapter = new Vuetify0ThemeAdapter(), palette = {}, themes = {},...options } = _options;
+	const [, provideThemeTokenContext, tokensContext] = createTokensContext("v0:theme:tokens", {
+		palette,
+		...themes
+	});
+	const [, provideThemeContext, themeContext] = createTheme("v0:theme", {
+		...options,
+		themes,
+		palette
+	});
+	function update(colors) {
+		adapter.update(colors);
+	}
+	return createPlugin({
+		namespace: "v0:theme",
+		provide: (app) => {
+			provideThemeContext(themeContext, app);
+			provideThemeTokenContext(tokensContext, app);
+		},
+		setup: () => {
+			if (IN_BROWSER) watch(themeContext.colors, update, {
+				immediate: true,
+				deep: true
+			});
+			else update(themeContext.colors.value);
+		}
+	});
+}
+
+//#endregion
+export { ConsolaLoggerAdapter, PinoLoggerAdapter, Vuetify0LoggerAdapter, createBreakpoints, createBreakpointsPlugin, createHydration, createHydrationPlugin, createLogger, createLoggerPlugin, createRegistryContext, createTheme, createThemePlugin, createTokensContext, provideBreakpointsContext, provideHydrationContext, useBreakpoints, useBreakpointsContext, useGroup, useHydration, useHydrationContext, useLogger, useRegistry, useSelection, useSingle, useStep, useTheme, useTokens };