@regle/core 1.11.0-beta.1 → 1.11.0-beta.3

package/dist/regle-core.js

@@ -1,7 +1,6 @@
 import { computed, effectScope, getCurrentInstance, getCurrentScope, isRef, markRaw, nextTick, onMounted, onScopeDispose, reactive, ref, shallowRef, toRef, toValue, triggerRef, unref, version, watch, watchEffect } from "vue";
 import { setupDevtoolsPlugin } from "@vue/devtools-api";
 
-//#region ../shared/utils/isFile.ts
 /**
 * Server side friendly way of checking for a File
 */
@@ -9,8 +8,6 @@ function isFile(value) {
 	return value?.constructor?.name == "File" || value?.constructor?.name == "FileList";
 }
 
-//#endregion
-//#region ../shared/utils/isEmpty.ts
 /**
 * This is the inverse of isFilled. It will check if the value is in any way empty (including arrays and objects)
 *
@@ -30,12 +27,8 @@ function isEmpty(value, considerEmptyArrayInvalid = true) {
 	return !String(value).length;
 }
 
-//#endregion
-//#region ../shared/utils/symbol.ts
 const RegleRuleSymbol = Symbol("regle-rule");
 
-//#endregion
-//#region ../shared/utils/cloneDeep.ts
 function getRegExpFlags(regExp) {
 	if (typeof regExp.source.flags == "string") return regExp.source.flags;
 	else {
@@ -62,8 +55,6 @@ function cloneDeep(obj) {
 	return result;
 }
 
-//#endregion
-//#region ../shared/utils/object.utils.ts
 function isObject(obj) {
 	if (obj && (obj instanceof Date || obj.constructor.name == "File" || obj.constructor.name == "FileList")) return false;
 	return typeof obj === "object" && obj !== null && !Array.isArray(obj);
@@ -146,8 +137,6 @@ function dotPathObjectToNested(obj) {
 	return result;
 }
 
-//#endregion
-//#region ../shared/utils/toDate.ts
 /**
 * This utility will coerce any string, number or Date value into a Date using the Date constructor.
 */
@@ -160,8 +149,6 @@ function toDate(argument) {
 	else return /* @__PURE__ */ new Date(NaN);
 }
 
-//#endregion
-//#region ../shared/utils/debounce.ts
 function debounce(func, wait, { immediate = false, trackDebounceRef } = {}) {
 	let timeout;
 	const debouncedFn = (...args) => {
@@ -202,8 +189,6 @@ function debounce(func, wait, { immediate = false, trackDebounceRef } = {}) {
 	return debouncedFn;
 }
 
-//#endregion
-//#region ../shared/utils/isEqual.ts
 function isEqual(a, b, deep = false, firstDeep = true) {
 	if (a === b) return true;
 	if (a && b && typeof a == "object" && typeof b == "object") {
@@ -236,8 +221,6 @@ function isEqual(a, b, deep = false, firstDeep = true) {
 	return a !== a && b !== b;
 }
 
-//#endregion
-//#region ../shared/utils/abortablePromise.ts
 var AbortError = class extends Error {
 	constructor(message = "Promise was aborted") {
 		super(message);
@@ -279,15 +262,11 @@ function abortablePromise(input) {
 	};
 }
 
-//#endregion
-//#region src/types/rules/rule.internal.types.ts
 const InternalRuleType = {
 	Inline: "__inline",
 	Async: "__async"
 };
 
-//#endregion
-//#region src/types/utils/groups.ts
 function mergeBooleanGroupProperties(entries, property) {
 	return entries.some((entry) => {
 		if (!property) return false;
@@ -302,8 +281,6 @@ function mergeArrayGroupProperties(entries, property) {
 	}, []);
 }
 
-//#endregion
-//#region src/core/createRule/unwrapRuleParameters.ts
 /**
 * Returns a clean list of parameters
 * Removing Ref and executing function to return the unwrapped value
@@ -335,8 +312,6 @@ function getFunctionParametersLength(func) {
 	return (paramsMatch[0] || paramsMatch[1] || paramsMatch[2] || paramsMatch[3] || paramsMatch[4] || "").split(",").map((p) => p.trim()).filter((p) => p.length > 0).length;
 }
 
-//#endregion
-//#region src/core/createRule/defineRuleProcessors.ts
 function defineRuleProcessors(definition, ...params) {
 	const { validator, type, async } = definition;
 	const isAsync = async || type === InternalRuleType.Async || validator.constructor.name === "AsyncFunction";
@@ -393,8 +368,6 @@ function defineRuleProcessors(definition, ...params) {
 	});
 }
 
-//#endregion
-//#region src/core/createRule/createRule.ts
 /**
 * Create a typed custom rule that can be used like default rules.
 * It can also be declared in the global options
@@ -458,8 +431,98 @@ function createRule(definition) {
 	throw new Error("[createRule] validator must be a function");
 }
 
-//#endregion
-//#region src/core/useStorage/useStorage.ts
+/**
+* Checks if a Vue Ref is an object.
+*
+* @param obj - The Ref to check
+* @returns True if the Ref is an object, false otherwise
+*/
+function isRefObject(obj) {
+	return isObject(obj.value);
+}
+/**
+* Unwraps a collection ($each) getter function or returns the getter directly if it's not a function.
+*
+* @template T - The type of the getter function or the getter value
+* @param getter - The getter function or value to unwrap
+* @param value - The value to pass to the getter
+* @param index - The index to pass to the getter
+* @returns An object containing the scope and the unwrapped value
+*/
+function unwrapGetter(getter, value, index) {
+	const scope = effectScope();
+	let unwrapped;
+	if (getter instanceof Function) unwrapped = scope.run(() => getter(value, index ?? 0));
+	else unwrapped = getter;
+	return {
+		scope,
+		unwrapped
+	};
+}
+
+const VersionIs = {
+	LessThan: -1,
+	EqualTo: 0,
+	GreaterThan: 1
+};
+/**
+* Compare two versions quickly.
+* @param current Is this version greater, equal to, or less than the other?
+* @param other The version to compare against the current version
+* @return 1 if current is greater than other, 0 if they are equal or equivalent, and -1 if current is less than other
+*/
+function versionCompare(current, other) {
+	const cp = String(current).split(".");
+	const op = String(other).split(".");
+	for (let depth = 0; depth < Math.min(cp.length, op.length); depth++) {
+		const cn = Number(cp[depth]);
+		const on = Number(op[depth]);
+		if (cn > on) return VersionIs.GreaterThan;
+		if (on > cn) return VersionIs.LessThan;
+		if (!isNaN(cn) && isNaN(on)) return VersionIs.GreaterThan;
+		if (isNaN(cn) && !isNaN(on)) return VersionIs.LessThan;
+	}
+	return VersionIs.EqualTo;
+}
+const isVueSuperiorOrEqualTo3dotFive = versionCompare(version, "3.5.0") === -1 ? false : true;
+
+function uniqueIDNuxt() {
+	return Math.floor(Math.random() * Date.now()).toString();
+}
+/**
+* Generates a random SSR compatible ID.
+*/
+function randomId() {
+	if (typeof window === "undefined") return uniqueIDNuxt();
+	else return window.crypto.getRandomValues(new Uint32Array(1))[0].toString(10);
+}
+
+function tryOnScopeDispose(fn) {
+	if (getCurrentScope()) {
+		onScopeDispose(fn);
+		return true;
+	}
+	return false;
+}
+/**
+* Creates a global state that is shared for scoped validation.
+*
+* @param stateFactory - The function that creates the state
+* @returns The state factory function
+*/
+function createGlobalState(stateFactory) {
+	let initialized = false;
+	let state;
+	const scope = effectScope(true);
+	return ((...args) => {
+		if (!initialized) {
+			state = scope.run(() => stateFactory(...args));
+			initialized = true;
+		}
+		return state;
+	});
+}
+
 /**
 * Inspired by Vuelidate storage
 */
@@ -580,108 +643,6 @@ function useStorage() {
 	};
 }
 
-//#endregion
-//#region src/utils/object.utils.ts
-/**
-* Checks if a Vue Ref is an object.
-*
-* @param obj - The Ref to check
-* @returns True if the Ref is an object, false otherwise
-*/
-function isRefObject(obj) {
-	return isObject(obj.value);
-}
-/**
-* Unwraps a collection ($each) getter function or returns the getter directly if it's not a function.
-*
-* @template T - The type of the getter function or the getter value
-* @param getter - The getter function or value to unwrap
-* @param value - The value to pass to the getter
-* @param index - The index to pass to the getter
-* @returns An object containing the scope and the unwrapped value
-*/
-function unwrapGetter(getter, value, index) {
-	const scope = effectScope();
-	let unwrapped;
-	if (getter instanceof Function) unwrapped = scope.run(() => getter(value, index ?? 0));
-	else unwrapped = getter;
-	return {
-		scope,
-		unwrapped
-	};
-}
-
-//#endregion
-//#region src/utils/version-compare.ts
-const VersionIs = {
-	LessThan: -1,
-	EqualTo: 0,
-	GreaterThan: 1
-};
-/**
-* Compare two versions quickly.
-* @param current Is this version greater, equal to, or less than the other?
-* @param other The version to compare against the current version
-* @return 1 if current is greater than other, 0 if they are equal or equivalent, and -1 if current is less than other
-*/
-function versionCompare(current, other) {
-	const cp = String(current).split(".");
-	const op = String(other).split(".");
-	for (let depth = 0; depth < Math.min(cp.length, op.length); depth++) {
-		const cn = Number(cp[depth]);
-		const on = Number(op[depth]);
-		if (cn > on) return VersionIs.GreaterThan;
-		if (on > cn) return VersionIs.LessThan;
-		if (!isNaN(cn) && isNaN(on)) return VersionIs.GreaterThan;
-		if (isNaN(cn) && !isNaN(on)) return VersionIs.LessThan;
-	}
-	return VersionIs.EqualTo;
-}
-const isVueSuperiorOrEqualTo3dotFive = versionCompare(version, "3.5.0") === -1 ? false : true;
-
-//#endregion
-//#region src/utils/randomId.ts
-function uniqueIDNuxt() {
-	return Math.floor(Math.random() * Date.now()).toString();
-}
-/**
-* Generates a random SSR compatible ID.
-*/
-function randomId() {
-	if (typeof window === "undefined") return uniqueIDNuxt();
-	else return window.crypto.getRandomValues(new Uint32Array(1))[0].toString(10);
-}
-
-//#endregion
-//#region src/utils/state.utils.ts
-function tryOnScopeDispose(fn) {
-	if (getCurrentScope()) {
-		onScopeDispose(fn);
-		return true;
-	}
-	return false;
-}
-/**
-* Creates a global state that is shared for scoped validation.
-*
-* @param stateFactory - The function that creates the state
-* @returns The state factory function
-*/
-function createGlobalState(stateFactory) {
-	let initialized = false;
-	let state;
-	const scope = effectScope(true);
-	return ((...args) => {
-		if (!initialized) {
-			state = scope.run(() => stateFactory(...args));
-			initialized = true;
-		}
-		return state;
-	});
-}
-
-//#endregion
-//#region src/core/useRegle/guards/ruleDef.guards.ts
 function isNestedRulesDef(state, rules) {
 	return isRefObject(state) || isObject(rules.value) && !isEmpty(rules.value) && !Object.entries(rules.value).some(([_, rule]) => isRuleDef(rule) || typeof rule === "function");
 }
@@ -702,8 +663,6 @@ function isFormRuleDefinition(rule) {
 	return true;
 }
 
-//#endregion
-//#region src/core/useRegle/guards/rule.status.guards.ts
 function isNestedRulesStatus(rule) {
 	return isObject(rule) && "$fields" in rule;
 }
@@ -714,8 +673,6 @@ function isFieldStatus(rule) {
 	return !!rule && "$rules" in rule;
 }
 
-//#endregion
-//#region src/core/useRegle/useErrors.ts
 function extractRulesIssues({ field, silent = false }) {
 	const ruleIssues = Object.entries(field.$rules ?? {}).map(([key, rule]) => {
 		let message = "";
@@ -794,8 +751,6 @@ function iterateErrors(errors, includePath = false, _path) {
 	} else return Object.entries(errors).map(([key, value]) => iterateErrors(value, includePath, path?.concat(key))).flat();
 }
 
-//#endregion
-//#region src/core/useRegle/root/createReactiveRuleStatus.ts
 function createReactiveRuleStatus({ customMessages, rule, ruleKey, state, path, cachePath, storage, modifiers }) {
 	let scope = effectScope();
 	let scopeState = {};
@@ -829,21 +784,31 @@ function createReactiveRuleStatus({ customMessages, rule, ruleKey, state, path,
 				...$metadata.value
 			}));
 			const $active = computed(() => {
-				if (isFormRuleDefinition(rule)) if (typeof rule.value.active === "function") return rule.value.active($defaultMetadata.value);
-				else return !!rule.value.active;
-				else return true;
+				try {
+					if (isFormRuleDefinition(rule)) if (typeof rule.value.active === "function") return rule.value.active($defaultMetadata.value);
+					else return !!rule.value.active;
+					else return true;
+				} catch (e) {
+					console.error(`Error in "active" function for "${path}.${ruleKey}" rule`, { cause: e });
+					return true;
+				}
 			});
 			function computeRuleProcessor(key) {
-				let result = "";
-				const customProcessor = customMessages ? customMessages[ruleKey]?.[key] : void 0;
-				if (customProcessor) if (typeof customProcessor === "function") result = customProcessor($defaultMetadata.value);
-				else result = customProcessor;
-				if (isFormRuleDefinition(rule)) {
-					const patchedKey = `_${key}_patched`;
-					if (!(customProcessor && !rule.value[patchedKey])) if (typeof rule.value[key] === "function") result = rule.value[key]($defaultMetadata.value);
-					else result = rule.value[key] ?? "";
+				try {
+					let result = "";
+					const customProcessor = customMessages ? customMessages[ruleKey]?.[key] : void 0;
+					if (customProcessor) if (typeof customProcessor === "function") result = customProcessor($defaultMetadata.value);
+					else result = customProcessor;
+					if (isFormRuleDefinition(rule)) {
+						const patchedKey = `_${key}_patched`;
+						if (!(customProcessor && !rule.value[patchedKey])) if (typeof rule.value[key] === "function") result = rule.value[key]($defaultMetadata.value);
+						else result = rule.value[key] ?? "";
+					}
+					return result;
+				} catch (e) {
+					console.error(`Error in "${key}" function for "${path}.${ruleKey}" rule`, { cause: e });
+					return "";
 				}
-				return result;
 			}
 			const $message = computed(() => {
 				let message = computeRuleProcessor("message");
@@ -906,7 +871,7 @@ function createReactiveRuleStatus({ customMessages, rule, ruleKey, state, path,
 			if (state.value !== cachedValue) return true;
 			if (typeof validatorResult === "boolean") ruleResult = validatorResult;
 			else {
-				const { $valid: $valid$1,...rest } = validatorResult;
+				const { $valid: $valid$1, ...rest } = validatorResult;
 				ruleResult = $valid$1;
 				$metadata.value = rest;
 			}
@@ -929,7 +894,7 @@ function createReactiveRuleStatus({ customMessages, rule, ruleKey, state, path,
 				if (resultOrPromise instanceof Promise) console.warn("You used a async validator function on a non-async rule, please use \"async await\" or the \"withAsync\" helper");
 				else if (resultOrPromise != null) if (typeof resultOrPromise === "boolean") ruleResult = resultOrPromise;
 				else {
-					const { $valid: $valid$1,...rest } = resultOrPromise;
+					const { $valid: $valid$1, ...rest } = resultOrPromise;
 					ruleResult = $valid$1;
 					$metadata.value = rest;
 				}
@@ -970,8 +935,6 @@ function createReactiveRuleStatus({ customMessages, rule, ruleKey, state, path,
 	});
 }
 
-//#endregion
-//#region src/core/useRegle/root/standard-schemas.ts
 function createStandardSchema(validateFn) {
 	return { "~standard": {
 		version: 1,
@@ -987,8 +950,7 @@ function createStandardSchema(validateFn) {
 	} };
 }
 
-//#endregion
-//#region src/core/useRegle/root/createReactiveFieldStatus.ts
+const DEFAULT_DEBOUNCE_TIME = 200;
 function createReactiveFieldStatus({ state, rulesDef, customMessages, path, cachePath, fieldName, storage, options, externalErrors, schemaErrors, schemaMode, onUnwatch, $isArray, initialState, originalState, shortcuts, onValidate }) {
 	let scope = effectScope();
 	let scopeState;
@@ -1039,7 +1001,7 @@ function createReactiveFieldStatus({ state, rulesDef, customMessages, path, cach
 		storage.addRuleDeclEntry(cachePath, declaredRules);
 	}
 	function define$commit() {
-		if (scopeState.$debounce.value || scopeState.$haveAnyAsyncRule.value) $commit = debounce($commitHandler, scopeState.$debounce.value ?? (scopeState.$haveAnyAsyncRule ? 200 : 0), { trackDebounceRef: $isDebouncing });
+		if (scopeState.$debounce.value > 0) $commit = debounce($commitHandler, scopeState.$debounce.value, { trackDebounceRef: $isDebouncing });
 		else $commit = $commitHandler;
 	}
 	function $unwatch() {
@@ -1062,7 +1024,9 @@ function createReactiveFieldStatus({ state, rulesDef, customMessages, path, cach
 			const triggerPunishment = ref(false);
 			const $anyDirty = computed(() => $dirty.value);
 			const $debounce$1 = computed(() => {
-				return $localOptions.value.$debounce;
+				if ($localOptions.value.$debounce != null) return $localOptions.value.$debounce;
+				if (scopeState.$haveAnyAsyncRule.value) return DEFAULT_DEBOUNCE_TIME;
+				return 0;
 			});
 			const $deepCompare = computed(() => {
 				if ($localOptions.value.$deepCompare != null) return $localOptions.value.$deepCompare;
@@ -1188,6 +1152,16 @@ function createReactiveFieldStatus({ state, rulesDef, customMessages, path, cach
 			const $haveAnyAsyncRule$1 = computed(() => {
 				return Object.values($rules.value).some((rule) => rule.$haveAsync);
 			});
+			const $modifiers = computed(() => {
+				return {
+					$debounce: $debounce$1.value,
+					$lazy: $lazy$1.value,
+					$rewardEarly: $rewardEarly$1.value,
+					$autoDirty: $autoDirty$1.value,
+					$silent: $silent.value,
+					$clearExternalErrorsOnChange: $clearExternalErrorsOnChange$1.value
+				};
+			});
 			function processShortcuts() {
 				if (shortcuts?.fields) Object.entries(shortcuts.fields).forEach(([key, value]) => {
 					const scope$1 = effectScope();
@@ -1249,7 +1223,8 @@ function createReactiveFieldStatus({ state, rulesDef, customMessages, path, cach
 				$dirty,
 				processShortcuts,
 				$silentValue,
-				$inactive
+				$inactive,
+				$modifiers
 			};
 		});
 		define$watchState();
@@ -1395,7 +1370,7 @@ function createReactiveFieldStatus({ state, rulesDef, customMessages, path, cach
 		if (externalErrors?.value?.length) externalErrors.value = [];
 	}
 	if (!scopeState.$lazy.value && !scopeState.$dirty.value && !scopeState.$silent.value) $commitHandler();
-	const { $shortcuts, $validating, $autoDirty, $rewardEarly, $clearExternalErrorsOnChange, $haveAnyAsyncRule, $debounce, $lazy,...restScope } = scopeState;
+	const { $shortcuts, $validating, $autoDirty, $rewardEarly, $clearExternalErrorsOnChange, $haveAnyAsyncRule, $debounce, $lazy, ...restScope } = scopeState;
 	return reactive({
 		...restScope,
 		$externalErrors: externalErrors,
@@ -1414,12 +1389,11 @@ function createReactiveFieldStatus({ state, rulesDef, customMessages, path, cach
 		$extractDirtyFields,
 		$clearExternalErrors,
 		$abort,
+		"~modifiers": scopeState.$modifiers,
 		...createStandardSchema($validate)
 	});
 }
 
-//#endregion
-//#region src/core/useRegle/root/collections/createReactiveCollectionElement.ts
 function createCollectionElement({ $id, path, cachePath, index, options, storage, stateValue, customMessages, rules, externalErrors, schemaErrors, initialState, originalState, shortcuts, fieldName, schemaMode }) {
 	const $fieldId = stateValue.value?.$id ?? rules.$key ?? randomId();
 	let $cachePath = `${cachePath}.${String($fieldId)}`;
@@ -1458,8 +1432,6 @@ function createCollectionElement({ $id, path, cachePath, index, options, storage
 	return $status;
 }
 
-//#endregion
-//#region src/core/useRegle/root/collections/createReactiveCollectionRoot.ts
 function createReactiveCollectionStatus({ state, rulesDef, customMessages, path, storage, options, externalErrors, schemaErrors, schemaMode, initialState, originalState, shortcuts, fieldName }) {
 	let scope = effectScope();
 	let scopeState;
@@ -1696,6 +1668,16 @@ function createReactiveCollectionStatus({ state, rulesDef, customMessages, path,
 				return true;
 			});
 			const $name = computed(() => fieldName);
+			const $modifiers = computed(() => {
+				return {
+					$deepCompare: $localOptions.value.$deepCompare ?? false,
+					$lazy: $localOptions.value.$lazy ?? false,
+					$rewardEarly: $rewardEarly.value,
+					$autoDirty: $autoDirty.value,
+					$silent: $silent.value,
+					$clearExternalErrorsOnChange: $localOptions.value.$clearExternalErrorsOnChange ?? false
+				};
+			});
 			function processShortcuts() {
 				if (shortcuts?.collections) Object.entries(shortcuts?.collections).forEach(([key, value]) => {
 					const scope$1 = effectScope();
@@ -1750,7 +1732,8 @@ function createReactiveCollectionStatus({ state, rulesDef, customMessages, path,
 				$rewardEarly,
 				$silent,
 				$autoDirty,
-				$issues
+				$issues,
+				$modifiers
 			};
 		});
 		if (immediateScopeState.isPrimitiveArray.value && rulesDef.value.$each) console.warn(`${path} is a Array of primitives. Tracking can be lost when reassigning the Array. We advise to use an Array of objects instead`);
@@ -1844,7 +1827,7 @@ function createReactiveCollectionStatus({ state, rulesDef, customMessages, path,
 		}
 		return dirtyFields;
 	}
-	const { $shortcuts,...restScopeState } = scopeState;
+	const { $shortcuts, ...restScopeState } = scopeState;
 	return reactive({
 		$self: $selfStatus,
 		...restScopeState,
@@ -1862,13 +1845,12 @@ function createReactiveCollectionStatus({ state, rulesDef, customMessages, path,
 		$abort,
 		$extractDirtyFields,
 		$clearExternalErrors,
+		"~modifiers": scopeState.$modifiers,
 		...createStandardSchema($validate)
 	});
 }
 
-//#endregion
-//#region src/core/useRegle/root/createReactiveNestedStatus.ts
-function createReactiveNestedStatus({ rulesDef, state, path = "", cachePath, rootRules, externalErrors, schemaErrors, rootSchemaErrors, validationGroups, initialState, originalState, fieldName,...commonArgs }) {
+function createReactiveNestedStatus({ rulesDef, state, path = "", cachePath, rootRules, externalErrors, schemaErrors, rootSchemaErrors, validationGroups, initialState, originalState, fieldName, ...commonArgs }) {
 	let scope = effectScope();
 	let scopeState;
 	let nestedScopes = [];
@@ -2110,6 +2092,16 @@ function createReactiveNestedStatus({ rulesDef, state, path = "", cachePath, roo
 				return false;
 			});
 			const $name = computed(() => fieldName);
+			const $modifiers = computed(() => {
+				return {
+					autoDirty: $autoDirty.value,
+					lazy: unref(commonArgs.options.lazy) ?? false,
+					rewardEarly: $rewardEarly.value,
+					silent: $silent.value,
+					clearExternalErrorsOnChange: unref(commonArgs.options.clearExternalErrorsOnChange) ?? false,
+					id: unref(commonArgs.options.id)
+				};
+			});
 			function processShortcuts() {
 				if (commonArgs.shortcuts?.nested) Object.entries(commonArgs.shortcuts.nested).forEach(([key, value]) => {
 					const scope$1 = effectScope();
@@ -2135,7 +2127,8 @@ function createReactiveNestedStatus({ rulesDef, state, path = "", cachePath, roo
 								$fields,
 								$edited,
 								$anyEdited,
-								$issues
+								$issues,
+								"~modifiers": unref(commonArgs.options)
 							}));
 						});
 						return result;
@@ -2184,7 +2177,8 @@ function createReactiveNestedStatus({ rulesDef, state, path = "", cachePath, roo
 				$localPending,
 				$autoDirty,
 				$silent,
-				$value
+				$value,
+				$modifiers
 			};
 		});
 	}
@@ -2275,7 +2269,7 @@ function createReactiveNestedStatus({ rulesDef, state, path = "", cachePath, roo
 			scopeState.$localPending.value = false;
 		}
 	}
-	const { $shortcuts, $localPending: _$localPending,...restScopeState } = scopeState;
+	const { $shortcuts, $localPending: _$localPending, ...restScopeState } = scopeState;
 	const fullStatus = reactive({
 		...restScopeState,
 		...$shortcuts,
@@ -2291,6 +2285,7 @@ function createReactiveNestedStatus({ rulesDef, state, path = "", cachePath, roo
 		$clearExternalErrors,
 		$extractDirtyFields,
 		$abort,
+		...!!rootRules ? { "~modifiers": scopeState.$modifiers } : {},
 		...createStandardSchema($validate)
 	});
 	watchEffect(() => {
@@ -2302,7 +2297,7 @@ function createReactiveNestedStatus({ rulesDef, state, path = "", cachePath, roo
 /**
 * Main resolver divider, will distribute the logic depending on the type of the current value (primitive, object, array)
 */
-function createReactiveChildrenStatus({ rulesDef,...properties }) {
+function createReactiveChildrenStatus({ rulesDef, ...properties }) {
 	if (isCollectionRulesDef(rulesDef, properties.state, properties.schemaMode)) return createReactiveCollectionStatus({
 		rulesDef,
 		...properties
@@ -2322,7 +2317,7 @@ function createReactiveChildrenStatus({ rulesDef,...properties }) {
 			}, { deep: true });
 			return { fakeState };
 		});
-		const { state: _state,...restProperties } = properties;
+		const { state: _state, ...restProperties } = properties;
 		return createReactiveNestedStatus({
 			rulesDef,
 			...restProperties,
@@ -2335,1248 +2330,1245 @@ function createReactiveChildrenStatus({ rulesDef,...properties }) {
 	});
 }
 
-//#endregion
-//#region src/core/useRegle/root/useRootStorage.ts
-function useRootStorage({ initialState, originalState, options, scopeRules, state, customRules, shortcuts, schemaErrors, schemaMode = false, onValidate }) {
-	const storage = useStorage();
-	const regle = ref();
-	const computedExternalErrors = ref();
-	let $unwatchExternalErrors;
-	let $unwatchComputedExternalErrors;
-	function defineExternalErrorsWatchSource() {
-		$unwatchExternalErrors = watch(() => options.externalErrors?.value, () => {
-			$unwatchComputedExternalErrors?.();
-			if (options.externalErrors?.value && Object.keys(options.externalErrors.value).some((key) => key.includes("."))) computedExternalErrors.value = dotPathObjectToNested(options.externalErrors.value);
-			else computedExternalErrors.value = options.externalErrors?.value;
-			defineComputedExternalErrorsWatchSource();
-		}, {
-			immediate: true,
-			deep: true
-		});
-	}
-	function defineComputedExternalErrorsWatchSource() {
-		$unwatchComputedExternalErrors = watch(() => computedExternalErrors.value, () => {
-			$unwatchExternalErrors?.();
-			if (options.externalErrors?.value) options.externalErrors.value = computedExternalErrors.value;
-			defineExternalErrorsWatchSource();
-		}, { deep: true });
+const COLORS = {
+	ERROR: {
+		text: 16777215,
+		bg: 15680580
+	},
+	INVALID: {
+		text: 16777215,
+		bg: 16747520
+	},
+	VALID: {
+		text: 16777215,
+		bg: 1096065
+	},
+	PENDING: {
+		text: 16777215,
+		bg: 16096779
+	},
+	DIRTY: {
+		text: 2042167,
+		bg: 16708551
+	},
+	COMPONENT: {
+		text: 16777215,
+		bg: 6514417
+	},
+	PRISTINE: {
+		text: 1120295,
+		bg: 16777215
+	},
+	INACTIVE: {
+		text: 0,
+		bg: 11581118
 	}
-	defineExternalErrorsWatchSource();
-	if (isNestedRulesDef(state, scopeRules)) regle.value = createReactiveNestedStatus({
-		rootRules: scopeRules,
-		rulesDef: scopeRules,
-		state,
-		customMessages: customRules?.(),
-		storage,
-		options,
-		externalErrors: computedExternalErrors,
-		validationGroups: options.validationGroups,
-		initialState,
-		originalState,
-		shortcuts,
-		fieldName: "root",
-		path: "",
-		cachePath: "",
-		schemaErrors,
-		rootSchemaErrors: schemaErrors,
-		schemaMode,
-		onValidate
-	});
-	else if (isValidatorRulesDef(scopeRules)) regle.value = createReactiveFieldStatus({
-		rulesDef: scopeRules,
-		state,
-		customMessages: customRules?.(),
-		storage,
-		options,
-		externalErrors: computedExternalErrors,
-		initialState,
-		originalState,
-		shortcuts,
-		fieldName: "root",
-		path: "",
-		cachePath: "",
-		schemaMode,
-		schemaErrors,
-		onValidate
-	});
-	if (getCurrentScope()) onScopeDispose(() => {
-		regle.value?.$unwatch();
-		$unwatchComputedExternalErrors?.();
-		$unwatchExternalErrors?.();
-	});
-	return reactive({ regle });
-}
-
-//#endregion
-//#region src/core/useRegle/shared.rootRegle.ts
-function createRootRegleLogic({ state, rulesFactory, options, globalOptions, customRules, shortcuts }) {
-	const definedRules = isRef(rulesFactory) ? rulesFactory : typeof rulesFactory === "function" ? void 0 : computed(() => rulesFactory);
-	const resolvedOptions = {
-		...globalOptions,
-		...options
-	};
-	let unwatchRules;
-	const watchableRulesGetters = shallowRef(definedRules ?? {});
-	if (typeof rulesFactory === "function") unwatchRules = watchEffect(() => {
-		watchableRulesGetters.value = rulesFactory(state);
-		triggerRef(watchableRulesGetters);
-	});
-	const initialState = ref(isObject(state.value) ? { ...cloneDeep(state.value) } : cloneDeep(state.value));
-	const originalState = isObject(state.value) ? { ...cloneDeep(state.value) } : cloneDeep(state.value);
-	tryOnScopeDispose(() => {
-		unwatchRules?.();
-	});
-	const regle = useRootStorage({
-		scopeRules: watchableRulesGetters,
-		state,
-		options: resolvedOptions,
-		initialState,
-		originalState,
-		customRules,
-		shortcuts
-	});
-	if (process.env.NODE_ENV === "development" && regle.regle) registerRegleInstance(regle.regle, { name: toValue(resolvedOptions.id) });
-	return regle;
-}
+};
+const PRIORITY_KEYS = {
+	ROOT: [
+		"$invalid",
+		"$dirty",
+		"$error",
+		"$pending",
+		"$valid",
+		"$ready"
+	],
+	FIELD: [
+		"$value",
+		"$invalid",
+		"$dirty",
+		"$error",
+		"$pending",
+		"$errors"
+	]
+};
+const INSPECTOR_IDS = {
+	INSPECTOR: "regle-inspector",
+	COMPONENTS: "components",
+	TIMELINE: "regle-timeline"
+};
 
-//#endregion
-//#region src/devtools/registry.ts
-var RegleDevtoolsRegistry = class {
-	instances = reactive(/* @__PURE__ */ new Map());
-	watchers = /* @__PURE__ */ new Map();
-	idCounter = 0;
-	notifyCallbacks = /* @__PURE__ */ new Set();
-	register(r$, options) {
-		const id = `regle-${++this.idCounter}`;
-		const name = options?.name || `Regle #${this.idCounter}`;
-		this.instances.set(id, {
+function useRegleDevtoolsRegistry() {
+	const devtoolsApi = shallowRef();
+	const instances = shallowRef(/* @__PURE__ */ new Map());
+	const watchers = shallowRef(/* @__PURE__ */ new Map());
+	let idCounter = 0;
+	function setApi(api) {
+		devtoolsApi.value = api;
+	}
+	function register(r$, options) {
+		const id = `${options?.uid?.toString() ?? "regle"}#${++idCounter}`;
+		const name = options?.name || `Regle #${idCounter}`;
+		instances.value.set(id, {
 			id,
 			name,
 			r$,
 			componentName: options?.componentName ? `<${options.componentName}>` : void 0
 		});
-		this.notifyDevtools();
+		const stopHandle = watch(() => r$, () => notifyDevtools(), {
+			deep: true,
+			flush: "post"
+		});
+		regleDevtoolsRegistry.addWatcher(id, stopHandle);
+		notifyDevtools();
 		return id;
 	}
-	unregister(id) {
-		this.instances.delete(id);
-		const watcher = this.watchers.get(id);
+	function notifyDevtools() {
+		if (devtoolsApi.value) emitInspectorState(devtoolsApi.value);
+	}
+	function unregister(id) {
+		instances.value.delete(id);
+		const watcher = watchers.value.get(id);
 		if (watcher) {
 			watcher();
-			this.watchers.delete(id);
+			watchers.value.delete(id);
 		}
-		this.notifyDevtools();
-	}
-	getAll() {
-		return Array.from(this.instances.values());
+		notifyDevtools();
 	}
-	get(id) {
-		return this.instances.get(id);
+	function getAll() {
+		return Array.from(instances.value.values());
 	}
-	clear() {
-		this.watchers.forEach((stop) => stop());
-		this.watchers.clear();
-		this.instances.clear();
-		this.notifyDevtools();
+	function get(id) {
+		return instances.value.get(id);
 	}
-	onInstancesChange(callback) {
-		this.notifyCallbacks.add(callback);
-		return () => {
-			this.notifyCallbacks.delete(callback);
-		};
-	}
-	addWatcher(id, stopHandle) {
-		this.watchers.set(id, stopHandle);
+	function clear() {
+		watchers.value.forEach((stop) => stop());
+		watchers.value.clear();
+		instances.value.clear();
+		notifyDevtools();
 	}
-	notifyDevtools() {
-		this.notifyCallbacks.forEach((callback) => callback());
+	function addWatcher(id, stopHandle) {
+		watchers.value.set(id, stopHandle);
 	}
-};
-const regleDevtoolsRegistry = new RegleDevtoolsRegistry();
+	return {
+		register,
+		unregister,
+		getAll,
+		get,
+		clear,
+		addWatcher,
+		setApi,
+		notifyDevtools
+	};
+}
+const regleDevtoolsRegistry = useRegleDevtoolsRegistry();
+/**
+* To be used by `useRegle` composable.
+*/
 function registerRegleInstance(r$, options) {
 	if (typeof window === "undefined") return;
 	const instance = getCurrentInstance();
 	const componentName = instance?.type?.name || instance?.type?.__name;
 	const id = regleDevtoolsRegistry.register(r$, {
 		name: options?.name,
-		componentName
+		componentName,
+		uid: instance?.uid
 	});
 	tryOnScopeDispose(() => {
 		regleDevtoolsRegistry.unregister(id);
 	});
 }
-function watchRegleInstance(id, r$, onChange) {
-	const stopHandle = watch(() => r$, onChange, {
-		deep: true,
-		flush: "post"
-	});
-	regleDevtoolsRegistry.addWatcher(id, stopHandle);
-	return stopHandle;
-}
 
-//#endregion
-//#region src/core/useRegle/useRegle.ts
-function createUseRegleComposable(customRules, options, shortcuts) {
-	const globalOptions = {
-		autoDirty: options?.autoDirty,
-		lazy: options?.lazy,
-		rewardEarly: options?.rewardEarly,
-		silent: options?.silent,
-		clearExternalErrorsOnChange: options?.clearExternalErrorsOnChange
-	};
-	function useRegle$1(state, rulesFactory, options$1) {
-		return { r$: createRootRegleLogic({
-			state: isRef(state) ? state : ref(state),
-			rulesFactory,
-			options: options$1,
-			globalOptions,
-			customRules,
-			shortcuts
-		}).regle };
-	}
-	return useRegle$1;
+function isMethod(value) {
+	return typeof value === "function";
 }
-/**
-* useRegle serves as the foundation for validation logic.
-*
-* It accepts the following inputs:
-*
-* @param state - This can be a plain object, a ref, a reactive object, or a structure containing nested refs.
-* @param rules - These should align with the structure of your state.
-* @param modifiers - Customize regle behaviour
-* 
-* ```ts
-* import { useRegle } from '@regle/core';
-import { required } from '@regle/rules';
-
-const { r$ } = useRegle({ email: '' }, {
-email: { required }
-})
-* ```
-* Docs: {@link https://reglejs.dev/core-concepts/}  
-*/
-const useRegle = createUseRegleComposable();
-
-//#endregion
-//#region src/core/useRegle/inferRules.ts
-function createInferRuleHelper() {
-	function inferRules$1(state, rulesFactory) {
-		return rulesFactory;
-	}
-	return inferRules$1;
+function getPriorityProperties(obj, keys) {
+	return keys.filter((key) => key in obj && !isMethod(obj[key])).map((key) => {
+		let editable = false;
+		if (key === "$value") editable = true;
+		return {
+			key,
+			value: obj[key],
+			editable
+		};
+	});
 }
-/**
-* Rule type helper to provide autocomplete and typecheck to your form rules or part of your form rules
-* It will just return the rules without any processing.
-*
-* @param state - The state reference
-* @param rules - Your rule tree
-*/
-const inferRules = createInferRuleHelper();
-
-//#endregion
-//#region src/core/useRegle/useRules.ts
-function registerRegleWithDevtools(regle, options) {
-	try {
-		registerRegleInstance(regle, { name: options?.devtoolsName });
-	} catch (e) {}
+function getRemainingProperties(obj, excludeKeys) {
+	return Object.entries(obj).filter(([key]) => !excludeKeys.includes(key) && key.startsWith("$") && !isMethod(obj[key])).map(([key, value]) => ({
+		key,
+		value,
+		editable: false
+	}));
 }
-function createEmptyRuleState(rules) {
-	const result = {};
-	if (Object.entries(rules).some(([_, rule]) => isRuleDef(rule) || typeof rule === "function")) return null;
-	for (const key in rules) {
-		const item = rules[key];
-		if (!!item && isObject(item) && "$each" in item && item["$each"] && isObject(item["$each"])) result[key] = [createEmptyRuleState(item["$each"])];
-		else if (isObject(item) && !isEmpty(item) && !Object.entries(item).some(([_, rule]) => isRuleDef(rule) || typeof rule === "function")) result[key] = createEmptyRuleState(item);
-		else result[key] = null;
-	}
-	return result;
+function parseFieldNodeId(nodeId) {
+	if (!nodeId.includes(":field:")) return null;
+	const [instanceId, , fieldName] = nodeId.split(":");
+	return {
+		instanceId,
+		fieldName
+	};
 }
-function createUseRulesComposable(customRules, options, shortcuts) {
-	const globalOptions = {
-		autoDirty: options?.autoDirty,
-		lazy: options?.lazy,
-		rewardEarly: options?.rewardEarly,
-		silent: options?.silent,
-		clearExternalErrorsOnChange: options?.clearExternalErrorsOnChange
+function createFieldNodeId(instanceId, fieldName) {
+	return `${instanceId}:field:${fieldName}`;
+}
+function parseRuleNodeId(nodeId) {
+	if (!nodeId.includes(":rule:")) return null;
+	const parts = nodeId.split(":rule:");
+	if (parts.length !== 2) return null;
+	const fieldPart = parts[0];
+	const ruleName = parts[1];
+	const fieldInfo = parseFieldNodeId(fieldPart);
+	if (!fieldInfo) return null;
+	return {
+		...fieldInfo,
+		ruleName
 	};
-	function useRules$1(rulesFactory, options$1) {
-		const definedRules = isRef(rulesFactory) ? rulesFactory : typeof rulesFactory === "function" ? void 0 : computed(() => rulesFactory);
-		const regle = createRootRegleLogic({
-			state: ref(createEmptyRuleState(definedRules?.value)),
-			rulesFactory: definedRules,
-			options: options$1,
-			globalOptions,
-			customRules,
-			shortcuts
-		});
-		registerRegleWithDevtools(regle.regle, options$1);
-		return regle.regle;
-	}
-	return useRules$1;
 }
-/**
-* useRules is a clone of useRegle, without the need to provide a state.
-*
-* It accepts the following inputs:
-*
-* @param rules - Your rules object
-* @param modifiers - Customize regle behaviour
-* 
-* ```ts
-* import { useRules } from '@regle/core';
-import { required } from '@regle/rules';
-
-const { r$ } = useRules({
-email: { required }
-})
-* ```
-*/
-const useRules = createUseRulesComposable();
+function createRuleNodeId(instanceId, fieldName, ruleName) {
+	return `${createFieldNodeId(instanceId, fieldName)}:rule:${ruleName}`;
+}
 
-//#endregion
-//#region src/core/defineRegleConfig.ts
 /**
-* Define a global regle configuration, where you can:
-* - Customize built-in rules messages
-* - Add your custom rules
-* - Define global modifiers
-* - Define shortcuts
-*
-* It will return:
-*
-* - a `useRegle` composable that can typecheck your custom rules
-* - an `inferRules` helper that can typecheck your custom rules
+* Build state for a field node
 */
-function defineRegleConfig({ rules, modifiers, shortcuts }) {
-	const useRegle$1 = createUseRegleComposable(rules, modifiers, shortcuts);
-	const useRules$1 = createUseRulesComposable(rules, modifiers, shortcuts);
-	useRegle$1.__config = {
-		rules,
-		modifiers,
-		shortcuts
-	};
-	useRules$1.__config = {
-		rules,
-		modifiers,
-		shortcuts
-	};
-	return {
-		useRegle: useRegle$1,
-		inferRules: createInferRuleHelper(),
-		useRules: useRules$1
-	};
+function buildFieldState(fieldStatus) {
+	const state = {};
+	const priorityProperties = getPriorityProperties(fieldStatus, PRIORITY_KEYS.FIELD);
+	if (priorityProperties.length > 0) state["State"] = priorityProperties;
+	const remainingProperties = getRemainingProperties(fieldStatus, [
+		...PRIORITY_KEYS.FIELD,
+		"$rules",
+		"$fields"
+	]);
+	if (remainingProperties.length > 0) state["Other Properties"] = remainingProperties;
+	if (fieldStatus["~modifiers"]) state["Modifiers"] = Object.entries(fieldStatus["~modifiers"]).map(([key, value]) => ({
+		key,
+		value,
+		editable: false
+	}));
+	return state;
 }
 /**
-* Extend an already created custom `useRegle` (as the first parameter)
-*
-* It will return:
-*
-* - a `useRegle` composable that can typecheck your custom rules
-* - an `inferRules` helper that can typecheck your custom rules
+* Build state for a rule node
 */
-function extendRegleConfig(regle, { rules, modifiers, shortcuts }) {
-	const rootConfig = regle.__config ?? {};
-	const newRules = () => ({
-		...rootConfig.rules?.(),
-		...rules?.()
-	});
-	const newModifiers = rootConfig.modifiers && modifiers ? merge(rootConfig.modifiers, modifiers) : rootConfig.modifiers ?? modifiers;
-	const newShortcuts = rootConfig.shortcuts && shortcuts ? merge(rootConfig.shortcuts, shortcuts) : rootConfig.shortcuts ?? shortcuts;
-	const useRegle$1 = createUseRegleComposable(newRules, newModifiers, newShortcuts);
-	useRegle$1.__config = {
-		rules: newRules,
-		modifiers: newModifiers,
-		shortcuts: newShortcuts
-	};
-	return {
-		useRegle: useRegle$1,
-		inferRules: createInferRuleHelper()
-	};
+function buildRuleState(ruleStatus) {
+	const state = {};
+	const ruleKeys = [
+		"$type",
+		"$valid",
+		"$active",
+		"$pending",
+		"$message",
+		"$tooltip"
+	];
+	const priorityProperties = getPriorityProperties(ruleStatus, ruleKeys);
+	if (priorityProperties.length > 0) state["Rule State"] = priorityProperties;
+	if (ruleStatus.$params && Array.isArray(ruleStatus.$params) && ruleStatus.$params.length > 0) state["Parameters"] = [{
+		key: "$params",
+		value: ruleStatus.$params,
+		editable: false
+	}];
+	if (ruleStatus.$metadata !== void 0 && ruleStatus.$metadata !== true && ruleStatus.$metadata !== false) state["Metadata"] = [{
+		key: "$metadata",
+		value: ruleStatus.$metadata,
+		objectType: "reactive",
+		editable: false
+	}];
+	const remainingProperties = getRemainingProperties(ruleStatus, [
+		...ruleKeys,
+		"$params",
+		"$metadata",
+		"$haveAsync",
+		"$validating",
+		"$fieldDirty",
+		"$fieldInvalid",
+		"$fieldPending",
+		"$fieldCorrect",
+		"$fieldError",
+		"$maybePending",
+		"$externalErrors"
+	]);
+	if (remainingProperties.length > 0) state["Other Properties"] = remainingProperties;
+	return state;
+}
+function buildRootState(r$) {
+	const state = {};
+	const priorityProperties = getPriorityProperties(r$, PRIORITY_KEYS.ROOT);
+	if (priorityProperties.length > 0) state["State"] = priorityProperties;
+	const remainingProperties = getRemainingProperties(r$, [...PRIORITY_KEYS.ROOT, "$fields"]);
+	if (remainingProperties.length > 0) state["Other Properties"] = remainingProperties;
+	if (r$["~modifiers"]) state["Modifiers"] = Object.entries(r$["~modifiers"]).map(([key, value]) => ({
+		key,
+		value,
+		editable: false
+	}));
+	return state;
+}
+function resolveFieldByPath(fields, path) {
+	if (!fields || !path) return null;
+	const segments = path.match(/[^.\[\]]+/g);
+	if (!segments) return null;
+	let current = fields;
+	for (const segment of segments) {
+		if (!current) return null;
+		const index = parseInt(segment);
+		if (!isNaN(index)) if (isCollectionRulesStatus(current) && Array.isArray(current.$each)) current = current.$each[index];
+		else return null;
+		else if (isCollectionRulesStatus(current) && current.$self && current.$self) current = current.$self;
+		else if (isNestedRulesStatus(current) && current.$fields && current.$fields[segment]) current = current.$fields[segment];
+		else if (current[segment]) current = current[segment];
+		else return null;
+	}
+	return current;
+}
+function buildInspectorState(nodeId, getInstance) {
+	const ruleInfo = parseRuleNodeId(nodeId);
+	if (ruleInfo) {
+		const { instanceId, fieldName, ruleName } = ruleInfo;
+		const instance$1 = getInstance(instanceId);
+		if (!instance$1 || !instance$1.r$.$fields) return null;
+		const fieldStatus = resolveFieldByPath(instance$1.r$.$fields, fieldName);
+		if (!fieldStatus || !("$rules" in fieldStatus)) return null;
+		const ruleStatus = fieldStatus.$rules[ruleName];
+		if (!ruleStatus) return null;
+		return buildRuleState(ruleStatus);
+	}
+	const fieldInfo = parseFieldNodeId(nodeId);
+	if (fieldInfo) {
+		const { instanceId, fieldName } = fieldInfo;
+		const instance$1 = getInstance(instanceId);
+		if (!instance$1 || !instance$1.r$.$fields) return null;
+		const fieldStatus = resolveFieldByPath(instance$1.r$.$fields, fieldName);
+		if (!fieldStatus) return null;
+		return buildFieldState(fieldStatus);
+	}
+	const instance = getInstance(nodeId);
+	if (!instance) return null;
+	return buildRootState(instance.r$);
 }
 
-//#endregion
-//#region src/core/mergeRegles.ts
-function mergeRegles(regles, _scoped) {
-	const scoped = _scoped == null ? false : _scoped;
-	const $value = computed({
-		get: () => {
-			if (scoped) return Object.values(regles).map((r) => r.$value);
-			else return Object.fromEntries(Object.entries(regles).map(([key, r]) => [key, r.$value]));
-		},
-		set: (value) => {
-			if (!scoped) {
-				if (typeof value === "object") Object.entries(value).forEach(([key, newValue]) => regles[key].$value = newValue);
-			}
+function handleValidateAction(nodeId, api) {
+	if (nodeId.includes(":rule:")) return;
+	const fieldInfo = parseFieldNodeId(nodeId);
+	if (fieldInfo) {
+		const { instanceId, fieldName } = fieldInfo;
+		const instance = regleDevtoolsRegistry.get(instanceId);
+		if (instance && instance.r$.$fields) {
+			const fieldStatus = resolveFieldByPath(instance.r$.$fields, fieldName);
+			if (fieldStatus && typeof fieldStatus.$validate === "function") fieldStatus.$validate();
 		}
-	});
-	const $silentValue = computed({
-		get: () => Object.fromEntries(Object.entries(regles).map(([key, r]) => [key, r.$silentValue])),
-		set: (value) => {
-			if (typeof value === "object") Object.entries(value).forEach(([key, newValue]) => regles[key].$silentValue = newValue);
+	} else {
+		const instance = regleDevtoolsRegistry.get(nodeId);
+		if (instance && typeof instance.r$.$validate === "function") instance.r$.$validate();
+	}
+	emitInspectorState(api);
+}
+async function handleResetAction(nodeId, api, resetState = false) {
+	const fieldInfo = parseFieldNodeId(nodeId);
+	if (fieldInfo) {
+		const { instanceId, fieldName } = fieldInfo;
+		const instance = regleDevtoolsRegistry.get(instanceId);
+		if (instance && instance.r$.$fields) {
+			const fieldStatus = resolveFieldByPath(instance.r$.$fields, fieldName);
+			if (fieldStatus && typeof fieldStatus.$reset === "function") fieldStatus.$reset({ toOriginalState: resetState });
 		}
+	} else {
+		const instance = regleDevtoolsRegistry.get(nodeId);
+		if (instance && typeof instance.r$.$reset === "function") instance.r$.$reset({ toOriginalState: resetState });
+	}
+}
+function handleEditInspectorState(payload) {
+	const { nodeId, path, state } = payload;
+	if (!path.includes("$value")) return;
+	if (!parseFieldNodeId(nodeId)) return;
+	const [instanceId, _, fieldPath] = nodeId.split(":");
+	const instance = regleDevtoolsRegistry.get(instanceId);
+	if (instance && instance.r$.$fields) {
+		const fieldStatus = resolveFieldByPath(instance.r$.$fields, fieldPath);
+		if (fieldStatus && "$value" in fieldStatus) fieldStatus.$value = state.value;
+	}
+}
+async function emitInspectorState(api) {
+	api.sendInspectorState(INSPECTOR_IDS.INSPECTOR);
+	api.sendInspectorTree(INSPECTOR_IDS.INSPECTOR);
+}
+
+function buildNodeTags(fieldOrR$, componentName) {
+	const tags = [];
+	if (fieldOrR$.$error) tags.push({
+		label: "error",
+		textColor: COLORS.ERROR.text,
+		backgroundColor: COLORS.ERROR.bg
 	});
-	const $dirty = computed(() => {
-		const entries = Object.entries(regles);
-		return !!entries.length && entries.every(([_, regle]) => {
-			return regle?.$dirty;
-		});
-	});
-	const $anyDirty = computed(() => {
-		return Object.entries(regles).some(([_, regle]) => {
-			return regle?.$anyDirty;
-		});
+	else if (fieldOrR$.$correct) tags.push({
+		label: "correct",
+		textColor: COLORS.VALID.text,
+		backgroundColor: COLORS.VALID.bg
 	});
-	const $invalid = computed(() => {
-		return Object.entries(regles).some(([_, regle]) => {
-			return regle?.$invalid;
-		});
+	if (fieldOrR$.$pending) tags.push({
+		label: "pending",
+		textColor: COLORS.PENDING.text,
+		backgroundColor: COLORS.PENDING.bg
 	});
-	const $correct = computed(() => {
-		const entries = Object.entries(regles);
-		return !!entries.length && entries.every(([_, regle]) => {
-			return regle?.$correct || regle.$anyDirty && !regle.$invalid;
-		});
+	if (fieldOrR$.$dirty) tags.push({
+		label: "dirty",
+		textColor: COLORS.DIRTY.text,
+		backgroundColor: COLORS.DIRTY.bg
 	});
-	const $error = computed(() => {
-		return Object.entries(regles).some(([_, regle]) => {
-			return regle?.$error;
-		});
+	else if ("$rules" in fieldOrR$) tags.push({
+		label: "pristine",
+		textColor: COLORS.PRISTINE.text,
+		backgroundColor: COLORS.PRISTINE.bg
 	});
-	const $ready = computed(() => {
-		const entries = Object.entries(regles);
-		return !!entries.length && entries.every(([_, regle]) => {
-			return regle?.$ready;
-		});
+	if (componentName) tags.push({
+		label: componentName,
+		textColor: COLORS.COMPONENT.text,
+		backgroundColor: COLORS.COMPONENT.bg
 	});
-	const $pending = computed(() => {
-		return Object.entries(regles).some(([_, regle]) => {
-			return regle?.$pending;
-		});
-	});
-	const $issues = computed(() => {
-		if (scoped) return Object.entries(regles).map(([_, regle]) => {
-			return regle.$issues;
-		});
-		else return Object.fromEntries(Object.entries(regles).map(([key, regle]) => {
-			return [key, regle.$issues];
-		}));
-	});
-	const $silentIssues = computed(() => {
-		if (scoped) return Object.entries(regles).map(([_, regle]) => {
-			return regle.$silentIssues;
-		});
-		else return Object.fromEntries(Object.entries(regles).map(([key, regle]) => {
-			return [key, regle.$silentIssues];
-		}));
+	return tags;
+}
+function buildRuleTags(rule) {
+	const tags = [];
+	if (!rule.$active) tags.push({
+		label: "inactive",
+		textColor: COLORS.INACTIVE.text,
+		backgroundColor: COLORS.INACTIVE.bg
 	});
-	const $errors = computed(() => {
-		if (scoped) return Object.entries(regles).map(([_, regle]) => {
-			return regle.$errors;
-		});
-		else return Object.fromEntries(Object.entries(regles).map(([key, regle]) => {
-			return [key, regle.$errors];
-		}));
+	else if (!rule.$valid) tags.push({
+		label: "invalid",
+		textColor: COLORS.INVALID.text,
+		backgroundColor: COLORS.INVALID.bg
 	});
-	const $silentErrors = computed(() => {
-		if (scoped) return Object.entries(regles).map(([_, regle]) => {
-			return regle.$silentErrors;
-		});
-		else return Object.fromEntries(Object.entries(regles).map(([key, regle]) => {
-			return [key, regle.$silentErrors];
-		}));
+	else if (rule.$valid) tags.push({
+		label: "valid",
+		textColor: COLORS.VALID.text,
+		backgroundColor: COLORS.VALID.bg
 	});
-	const $edited = computed(() => {
-		const entries = Object.entries(regles);
-		return !!entries.length && entries.every(([_, regle]) => {
-			return regle?.$edited;
-		});
+	if (rule.$pending) tags.push({
+		label: "pending",
+		textColor: COLORS.PENDING.text,
+		backgroundColor: COLORS.PENDING.bg
 	});
-	const $anyEdited = computed(() => {
-		return Object.entries(regles).some(([_, regle]) => {
-			return regle?.$anyEdited;
-		});
+	return tags;
+}
+function buildRuleNodes(fieldStatus, instanceId, fieldPath) {
+	const children = [];
+	if (!fieldStatus.$rules || typeof fieldStatus.$rules !== "object") return children;
+	Object.entries(fieldStatus.$rules).forEach(([ruleName, ruleStatus]) => {
+		if (ruleStatus && typeof ruleStatus === "object") {
+			const ruleTags = buildRuleTags(ruleStatus);
+			children.push({
+				id: createRuleNodeId(instanceId, fieldPath, ruleName),
+				label: `⚙️ ${ruleName}`,
+				tags: ruleTags,
+				children: []
+			});
+		}
 	});
-	const $instances = computed(() => {
-		if (scoped) return Object.values(regles);
-		else return regles;
+	return children;
+}
+function buildCollectionItemNodes(fieldStatus, instanceId, fieldPath) {
+	const children = [];
+	if (!fieldStatus.$each || !Array.isArray(fieldStatus.$each)) return children;
+	fieldStatus.$each.forEach((item, index) => {
+		if (item && typeof item === "object") {
+			const itemTags = buildNodeTags(item);
+			const itemPath = `${fieldPath}[${index}]`;
+			let itemChildren = [];
+			if (isNestedRulesStatus(item)) itemChildren = buildNestedFieldNodes(item.$fields, instanceId, itemPath);
+			else if (isFieldStatus(item)) itemChildren = buildRuleNodes(item, instanceId, itemPath);
+			children.push({
+				id: createFieldNodeId(instanceId, itemPath),
+				label: `[${index}]`,
+				tags: itemTags,
+				children: itemChildren
+			});
+		}
 	});
-	function $reset(options) {
-		Object.values(regles).forEach((regle) => {
-			regle.$reset(options);
+	if (fieldStatus.$self && typeof fieldStatus.$self === "object" && !isEmpty(fieldStatus.$self.$rules)) {
+		const itemTags = buildNodeTags(fieldStatus.$self);
+		const itemPath = `${fieldPath}[$self]`;
+		children.unshift({
+			id: createFieldNodeId(instanceId, itemPath),
+			label: "$self",
+			tags: itemTags,
+			children: buildRuleNodes(fieldStatus.$self, instanceId, itemPath)
 		});
 	}
-	function $touch() {
-		Object.values(regles).forEach((regle) => {
-			regle.$touch();
-		});
-	}
-	function $extractDirtyFields(filterNullishValues = true) {
-		return Object.values(regles).map((regle) => regle.$extractDirtyFields(filterNullishValues));
-	}
-	function $clearExternalErrors() {
-		Object.values(regles).forEach((regle) => {
-			regle.$clearExternalErrors();
-		});
-	}
-	async function $validate(forceValues) {
-		try {
-			if (forceValues) $value.value = forceValues;
-			const data = $value.value;
-			return {
-				valid: (await Promise.allSettled(Object.values(regles).map((regle) => {
-					return regle.$validate();
-				}))).every((value) => {
-					if (value.status === "fulfilled") return value.value.valid === true;
-					else return false;
-				}),
-				data,
-				errors: $errors.value,
-				issues: $issues.value
-			};
-		} catch {
-			return {
-				valid: false,
-				data: $value.value,
-				errors: $errors.value,
-				issues: $issues.value
-			};
+	return children;
+}
+function buildNestedFieldNodes(fields, instanceId, parentPath) {
+	const children = [];
+	Object.entries(fields).forEach(([fieldName, fieldStatus]) => {
+		if (fieldStatus && typeof fieldStatus === "object") {
+			const fieldPath = parentPath ? `${parentPath}.${fieldName}` : fieldName;
+			const fieldTags = buildNodeTags(fieldStatus);
+			let isCollection = false;
+			let isEmptyCollection = false;
+			let fieldChildren = [];
+			if (isCollectionRulesStatus(fieldStatus)) {
+				fieldChildren = buildCollectionItemNodes(fieldStatus, instanceId, fieldPath);
+				isCollection = true;
+				if (fieldChildren.length === 0) isEmptyCollection = true;
+			} else if (isNestedRulesStatus(fieldStatus)) fieldChildren = buildNestedFieldNodes(fieldStatus.$fields, instanceId, fieldPath);
+			else if (isFieldStatus(fieldStatus)) fieldChildren = buildRuleNodes(fieldStatus, instanceId, fieldPath);
+			children.push({
+				id: createFieldNodeId(instanceId, fieldPath),
+				label: `${isCollection ? `${fieldName}[${fieldChildren.length}]` : fieldName}${isEmptyCollection ? " (empty)" : ""}`,
+				tags: fieldTags,
+				children: fieldChildren
+			});
 		}
-	}
-	return reactive({
-		...!scoped && { $silentValue },
-		$errors,
-		$issues,
-		$silentIssues,
-		$silentErrors,
-		$instances,
-		$value,
-		$dirty,
-		$anyDirty,
-		$invalid,
-		$correct,
-		$error,
-		$pending,
-		$ready,
-		$edited,
-		$anyEdited,
-		$reset,
-		$touch,
-		$validate,
-		$extractDirtyFields,
-		$clearExternalErrors
 	});
+	return children;
 }
-
-//#endregion
-//#region src/core/createScopedUseRegle/useCollectScope.ts
-function createUseCollectScope(instances, options) {
-	function useCollectScope$1(namespace) {
-		const computedNamespace = computed(() => toValue(namespace));
-		setEmptyNamespace();
-		const r$ = ref(collectRegles(instances.value));
-		const regle = reactive({ r$ });
-		function setEmptyNamespace() {
-			if (computedNamespace.value && !instances.value[computedNamespace.value]) instances.value[computedNamespace.value] = {};
-		}
-		watch(computedNamespace, setEmptyNamespace);
-		watch(instances, (newInstances) => {
-			r$.value = collectRegles(newInstances);
-		}, { deep: true });
-		function collectRegles(r$Instances) {
-			if (computedNamespace.value) return mergeRegles(r$Instances[computedNamespace.value] ?? {}, !options.asRecord);
-			else return mergeRegles(r$Instances["~~global"] ?? {}, !options.asRecord);
+function buildRootChildrenNodes(r$, instanceId) {
+	const children = [];
+	if (isFieldStatus(r$)) return buildRuleNodes(r$, instanceId, "root");
+	if (!r$.$fields || typeof r$.$fields !== "object") return children;
+	Object.entries(r$.$fields).forEach(([fieldName, fieldStatus]) => {
+		if (fieldStatus && typeof fieldStatus === "object") {
+			const fieldTags = buildNodeTags(fieldStatus);
+			let fieldChildren = [];
+			let isCollection = false;
+			if (isCollectionRulesStatus(fieldStatus)) {
+				fieldChildren = buildCollectionItemNodes(fieldStatus, instanceId, fieldName);
+				isCollection = true;
+			} else if (isNestedRulesStatus(fieldStatus)) fieldChildren = buildNestedFieldNodes(fieldStatus.$fields, instanceId, fieldName);
+			else if (isFieldStatus(fieldStatus)) fieldChildren = buildRuleNodes(fieldStatus, instanceId, fieldName);
+			children.push({
+				id: createFieldNodeId(instanceId, fieldName),
+				label: `${isCollection ? `${fieldName}[${fieldChildren.length}]` : fieldName}`,
+				tags: fieldTags,
+				children: fieldChildren
+			});
 		}
-		return { r$: regle.r$ };
-	}
-	return { useCollectScope: useCollectScope$1 };
+	});
+	return children;
 }
-
-//#endregion
-//#region src/core/createScopedUseRegle/useScopedRegle.ts
-function createUseScopedRegleComposable(instances, customUseRegle) {
-	const scopedUseRegle = customUseRegle ?? useRegle;
-	const useScopedRegle$1 = ((state, rulesFactory, options) => {
-		const { namespace, scopeKey: _scopeKey,...restOptions } = options ?? {};
-		scopedUseRegle.__config ??= {};
-		const computedNamespace = computed(() => toValue(namespace));
-		const $id = ref(`${Object.keys(instances.value).length + 1}-${randomId()}`);
-		const instanceName = computed(() => {
-			return options?.scopeKey ?? `instance-${$id.value}`;
-		});
-		const { r$ } = scopedUseRegle(state, rulesFactory, restOptions);
-		register();
-		tryOnScopeDispose(dispose);
-		watch(computedNamespace, (newName, oldName) => {
-			dispose(oldName);
-			register();
-		});
-		if (getCurrentInstance()) onMounted(() => {
-			const currentInstance = getCurrentInstance();
-			if (typeof window !== "undefined" && currentInstance?.proxy?.$el?.parentElement) {
-				if (document.documentElement && !document.documentElement.contains(currentInstance?.proxy?.$el?.parentElement)) dispose();
-			}
-		});
-		function dispose(oldName) {
-			const nameToClean = oldName ?? computedNamespace.value;
-			if (nameToClean) {
-				if (instances.value[nameToClean]) delete instances.value[nameToClean][instanceName.value];
-			} else if (instances.value["~~global"][instanceName.value]) delete instances.value["~~global"][instanceName.value];
-		}
-		function register() {
-			if (computedNamespace.value) {
-				if (!instances.value[computedNamespace.value]) instances.value[computedNamespace.value] = {};
-				instances.value[computedNamespace.value][instanceName.value] = r$;
-			} else {
-				if (!instances.value["~~global"]) instances.value["~~global"] = {};
-				instances.value["~~global"][instanceName.value] = r$;
-			}
-		}
+function buildInspectorTree(instances, filter) {
+	const nodes = instances.map((instance) => {
+		const { r$, id, name, componentName } = instance;
 		return {
-			r$,
-			dispose,
-			register
+			id,
+			label: name,
+			tags: buildNodeTags(r$, componentName),
+			children: buildRootChildrenNodes(r$, id)
 		};
 	});
-	return { useScopedRegle: useScopedRegle$1 };
-}
-
-//#endregion
-//#region src/core/createScopedUseRegle/createScopedUseRegle.ts
-function createScopedUseRegle(options) {
-	const instances = (options?.customStore ? () => {
-		if (options.customStore) {
-			if (!options.customStore?.value["~~global"]) options.customStore.value["~~global"] = {};
-			else if (options.customStore?.value) options.customStore.value = { "~~global": {} };
-		}
-		return options.customStore;
-	} : createGlobalState(() => {
-		return ref({ "~~global": {} });
-	}))();
-	const { useScopedRegle: useScopedRegle$1 } = createUseScopedRegleComposable(instances, options?.customUseRegle);
-	const { useCollectScope: useCollectScope$1 } = createUseCollectScope(instances, { asRecord: options?.asRecord });
-	return {
-		useScopedRegle: useScopedRegle$1,
-		useCollectScope: useCollectScope$1
-	};
+	if (!filter || filter.trim() === "") return nodes;
+	return filterInspectorTree(nodes, filter);
+}
+function filterInspectorTree(nodes, filter) {
+	const lowerFilter = filter.toLowerCase();
+	const filtered = [];
+	for (const node of nodes) {
+		const labelMatches = node.label.toLowerCase().includes(lowerFilter);
+		const tagMatches = node.tags?.some((tag) => tag.label.toLowerCase().includes(lowerFilter)) ?? false;
+		const filteredChildren = node.children ? filterInspectorTree(node.children, filter) : [];
+		if (labelMatches || tagMatches || filteredChildren.length > 0) filtered.push({
+			...node,
+			children: filteredChildren.length > 0 ? filteredChildren : node.children
+		});
+	}
+	return filtered;
 }
-const { useCollectScope, useScopedRegle } = createScopedUseRegle();
 
-//#endregion
-//#region src/core/variants/createVariant.ts
-/**
-* Declare variations of state that depends on one value
-*
-* Autocomplete may not work here because of https://github.com/microsoft/TypeScript/issues/49547
-*
-* ```ts
-*  // ⚠️ Use getter syntax for your rules () => {} or a computed one
-*    const {r$} = useRegle(state, () => {
-*      const variant = createVariant(state, 'type', [
-*        {type: { literal: literal('EMAIL')}, email: { required, email }},
-*        {type: { literal: literal('GITHUB')}, username: { required }},
-*        {type: { required }},
-*      ]);
-*
-*      return {
-*        ...variant.value,
-*      };
-*    })
-* ```
-*/
-function createVariant(root, discriminantKey, variants) {
-	const watchableRoot = computed(() => toValue(root)[discriminantKey]);
-	return computed(() => {
-		const selectedVariant = variants.find((variant) => {
-			if (variant[discriminantKey] && "literal" in variant[discriminantKey]) {
-				const literalRule = variant[discriminantKey]["literal"];
-				if (isRuleDef(literalRule)) return unref(literalRule._params?.[0]) === watchableRoot.value;
+function createDevtools(app) {
+	setupDevtoolsPlugin({
+		id: "regle-devtools",
+		label: "Regle",
+		logo: "https://reglejs.dev/logo_main.png",
+		packageName: "@regle/core",
+		homepage: "https://reglejs.dev",
+		componentStateTypes: ["Regles"],
+		app
+	}, (api) => {
+		regleDevtoolsRegistry.setApi(api);
+		api.addInspector({
+			id: INSPECTOR_IDS.INSPECTOR,
+			label: "Regle",
+			noSelectionText: "No instance selected",
+			icon: "rule",
+			treeFilterPlaceholder: "Filter",
+			stateFilterPlaceholder: "Filter validation status",
+			nodeActions: [
+				{
+					icon: "check_circle",
+					tooltip: "Validate",
+					action: (nodeId) => {
+						handleValidateAction(nodeId, api);
+					}
+				},
+				{
+					icon: "refresh",
+					tooltip: "Reset validation state",
+					action: (nodeId) => {
+						handleResetAction(nodeId, api);
+					}
+				},
+				{
+					icon: "restore",
+					tooltip: "Restore to original state",
+					action: (nodeId) => {
+						handleResetAction(nodeId, api, true);
+					}
+				}
+			]
+		});
+		regleDevtoolsRegistry.notifyDevtools();
+		let componentInstances = [];
+		let selectedNodeId = null;
+		api.on.getInspectorTree(async (payload) => {
+			api.unhighlightElement();
+			if (payload.inspectorId === INSPECTOR_IDS.INSPECTOR) {
+				const nodes = buildInspectorTree(regleDevtoolsRegistry.getAll(), payload.filter);
+				if (nodes.length > 0) payload.rootNodes = nodes;
+				else payload.rootNodes = [{
+					id: "empty-regles",
+					label: "No Regles instances found",
+					children: []
+				}];
+				componentInstances = await api.getComponentInstances(app);
 			}
 		});
-		if (selectedVariant) return selectedVariant;
-		else {
-			const anyDiscriminantRules = variants.find((variant) => isObject(variant[discriminantKey]) && !Object.keys(variant[discriminantKey]).some((key) => key === "literal"));
-			if (anyDiscriminantRules) return anyDiscriminantRules;
-			else return {};
-		}
+		api.on.getInspectorState((payload) => {
+			api.unhighlightElement();
+			if (payload.inspectorId === INSPECTOR_IDS.INSPECTOR) {
+				const state = buildInspectorState(payload.nodeId, (id) => regleDevtoolsRegistry.get(id));
+				const instance = componentInstances.find((instance$1) => {
+					const [componentName] = payload.nodeId.split("#");
+					return instance$1.uid.toString() === componentName;
+				});
+				if (instance?.uid && selectedNodeId !== payload.nodeId) {
+					selectedNodeId = payload.nodeId;
+					if (!parseFieldNodeId(payload.nodeId)) api.highlightElement(instance);
+				}
+				if (state) payload.state = state;
+				else payload.state = {};
+			}
+		});
+		api.on.editInspectorState((payload) => {
+			if (payload.inspectorId === INSPECTOR_IDS.INSPECTOR) handleEditInspectorState(payload);
+		});
 	});
 }
-/**
-* Narrow a nested variant field to a discriminated value
-*
-* ```ts
-* if (narrowVariant(r$, 'type', 'EMAIL')) {
-*    r$.email.$value = 'foo';
-* }
-* ```
-*/
-function narrowVariant(root, discriminantKey, discriminantValue) {
-	return isObject(root[discriminantKey]) && "$value" in root[discriminantKey] && root[discriminantKey]?.$value === discriminantValue;
+
+function useRootStorage({ initialState, originalState, options, scopeRules, state, customRules, shortcuts, schemaErrors, schemaMode = false, onValidate }) {
+	const storage = useStorage();
+	const regle = ref();
+	const computedExternalErrors = ref();
+	let $unwatchExternalErrors;
+	let $unwatchComputedExternalErrors;
+	function defineExternalErrorsWatchSource() {
+		$unwatchExternalErrors = watch(() => options.externalErrors?.value, () => {
+			$unwatchComputedExternalErrors?.();
+			if (options.externalErrors?.value && Object.keys(options.externalErrors.value).some((key) => key.includes("."))) computedExternalErrors.value = dotPathObjectToNested(options.externalErrors.value);
+			else computedExternalErrors.value = options.externalErrors?.value;
+			defineComputedExternalErrorsWatchSource();
+		}, {
+			immediate: true,
+			deep: true
+		});
+	}
+	function defineComputedExternalErrorsWatchSource() {
+		$unwatchComputedExternalErrors = watch(() => computedExternalErrors.value, () => {
+			$unwatchExternalErrors?.();
+			if (options.externalErrors?.value) options.externalErrors.value = computedExternalErrors.value;
+			defineExternalErrorsWatchSource();
+		}, { deep: true });
+	}
+	defineExternalErrorsWatchSource();
+	if (isNestedRulesDef(state, scopeRules)) regle.value = createReactiveNestedStatus({
+		rootRules: scopeRules,
+		rulesDef: scopeRules,
+		state,
+		customMessages: customRules?.(),
+		storage,
+		options,
+		externalErrors: computedExternalErrors,
+		validationGroups: options.validationGroups,
+		initialState,
+		originalState,
+		shortcuts,
+		fieldName: "root",
+		path: "",
+		cachePath: "",
+		schemaErrors,
+		rootSchemaErrors: schemaErrors,
+		schemaMode,
+		onValidate
+	});
+	else if (isValidatorRulesDef(scopeRules)) regle.value = createReactiveFieldStatus({
+		rulesDef: scopeRules,
+		state,
+		customMessages: customRules?.(),
+		storage,
+		options,
+		externalErrors: computedExternalErrors,
+		initialState,
+		originalState,
+		shortcuts,
+		fieldName: "root",
+		path: "",
+		cachePath: "",
+		schemaMode,
+		schemaErrors,
+		onValidate
+	});
+	if (getCurrentScope()) onScopeDispose(() => {
+		regle.value?.$unwatch();
+		$unwatchComputedExternalErrors?.();
+		$unwatchExternalErrors?.();
+	});
+	if (typeof window !== "undefined" && regle.value) registerRegleInstance(regle.value, { name: toValue(options.id) });
+	return reactive({ regle });
 }
-function variantToRef(root, discriminantKey, discriminantValue, _options) {
-	const fromRoot = isRef(root) ? toRef(root.value, "$fields") : toRef(root, "$fields");
-	const returnedRef = ref();
-	watch(fromRoot, async () => {
-		await nextTick();
-		if (narrowVariant(fromRoot.value, discriminantKey, discriminantValue)) returnedRef.value = toRef(root).value;
-		else returnedRef.value = void 0;
-	}, {
-		immediate: true,
-		flush: "pre"
+
+function createRootRegleLogic({ state, rulesFactory, options, globalOptions, customRules, shortcuts }) {
+	const definedRules = isRef(rulesFactory) ? rulesFactory : typeof rulesFactory === "function" ? void 0 : computed(() => rulesFactory);
+	const resolvedOptions = {
+		...globalOptions,
+		...options
+	};
+	let unwatchRules;
+	const watchableRulesGetters = shallowRef(definedRules ?? {});
+	if (typeof rulesFactory === "function") unwatchRules = watchEffect(() => {
+		watchableRulesGetters.value = rulesFactory(state);
+		triggerRef(watchableRulesGetters);
+	});
+	const initialState = ref(isObject(state.value) ? { ...cloneDeep(state.value) } : cloneDeep(state.value));
+	const originalState = isObject(state.value) ? { ...cloneDeep(state.value) } : cloneDeep(state.value);
+	tryOnScopeDispose(() => {
+		unwatchRules?.();
+	});
+	return useRootStorage({
+		scopeRules: watchableRulesGetters,
+		state,
+		options: resolvedOptions,
+		initialState,
+		originalState,
+		customRules,
+		shortcuts
 	});
-	return returnedRef;
 }
 
-//#endregion
-//#region src/core/refineRules.ts
+function createUseRegleComposable(customRules, options, shortcuts) {
+	const globalOptions = {
+		autoDirty: options?.autoDirty,
+		lazy: options?.lazy,
+		rewardEarly: options?.rewardEarly,
+		silent: options?.silent,
+		clearExternalErrorsOnChange: options?.clearExternalErrorsOnChange
+	};
+	function useRegle$1(state, rulesFactory, options$1) {
+		return { r$: createRootRegleLogic({
+			state: isRef(state) ? state : ref(state),
+			rulesFactory,
+			options: options$1,
+			globalOptions,
+			customRules,
+			shortcuts
+		}).regle };
+	}
+	return useRegle$1;
+}
 /**
-* Helper method to wrap an raw rules object
+* useRegle serves as the foundation for validation logic.
 *
-* Similar to:
+* It accepts the following inputs:
 *
-* ```ts
-* const rules = {...} satisfies RegleUnknownRulesTree
+* @param state - This can be a plain object, a ref, a reactive object, or a structure containing nested refs.
+* @param rules - These should align with the structure of your state.
+* @param modifiers - Customize regle behaviour
+* 
+* ```ts
+* import { useRegle } from '@regle/core';
+import { required } from '@regle/rules';
+
+const { r$ } = useRegle({ email: '' }, {
+email: { required }
+})
 * ```
+* Docs: {@link https://reglejs.dev/core-concepts/}  
 */
-function defineRules(rules) {
-	return rules;
+const useRegle = createUseRegleComposable();
+
+function createInferRuleHelper() {
+	function inferRules$1(state, rulesFactory) {
+		return rulesFactory;
+	}
+	return inferRules$1;
 }
 /**
-* Refine a raw rules object to set rules that depends on the state values.
-*
-* @example
+* Rule type helper to provide autocomplete and typecheck to your form rules or part of your form rules
+* It will just return the rules without any processing.
 *
-* ```ts
-* const rules = refineRules({
-*    password: { required, type: type<string>() },
-* }, (state) => {
-*    return {
-*        confirmPassword: { required, sameAs: sameAs(() => state.value.password)}
-*    }
-* })
-* ```
+* @param state - The state reference
+* @param rules - Your rule tree
 */
-function refineRules(rules, refinement) {
-	return (state) => merge({ ...rules }, refinement(state));
-}
+const inferRules = createInferRuleHelper();
 
-//#endregion
-//#region src/devtools/constants.ts
-const COLORS = {
-	ERROR: {
-		text: 16777215,
-		bg: 15680580
-	},
-	INVALID: {
-		text: 16777215,
-		bg: 16281969
-	},
-	VALID: {
-		text: 16777215,
-		bg: 1096065
-	},
-	PENDING: {
-		text: 16777215,
-		bg: 16096779
-	},
-	DIRTY: {
-		text: 2042167,
-		bg: 16708551
-	},
-	COMPONENT: {
-		text: 16777215,
-		bg: 6514417
+function createEmptyRuleState(rules) {
+	const result = {};
+	if (Object.entries(rules).some(([_, rule]) => isRuleDef(rule) || typeof rule === "function")) return null;
+	for (const key in rules) {
+		const item = rules[key];
+		if (!!item && isObject(item) && "$each" in item && item["$each"] && isObject(item["$each"])) result[key] = [createEmptyRuleState(item["$each"])];
+		else if (isObject(item) && !isEmpty(item) && !Object.entries(item).some(([_, rule]) => isRuleDef(rule) || typeof rule === "function")) result[key] = createEmptyRuleState(item);
+		else result[key] = null;
 	}
-};
-const PRIORITY_KEYS = {
-	ROOT: [
-		"$invalid",
-		"$dirty",
-		"$error",
-		"$pending",
-		"$valid",
-		"$ready"
-	],
-	FIELD: [
-		"$value",
-		"$invalid",
-		"$dirty",
-		"$error",
-		"$pending",
-		"$errors"
-	]
-};
-const INSPECTOR_IDS = {
-	INSPECTOR: "regle-inspector",
-	TIMELINE: "regle-timeline"
-};
-
-//#endregion
-//#region src/devtools/utils.ts
-function isMethod(value) {
-	return typeof value === "function";
-}
-function getPriorityProperties(obj, keys) {
-	return keys.filter((key) => key in obj && !isMethod(obj[key])).map((key) => {
-		let editable = false;
-		if (key === "$value") editable = true;
-		return {
-			key,
-			value: obj[key],
-			editable
-		};
-	});
-}
-function getRemainingProperties(obj, excludeKeys) {
-	return Object.entries(obj).filter(([key]) => !excludeKeys.includes(key) && key.startsWith("$") && !isMethod(obj[key])).map(([key, value]) => ({
-		key,
-		value,
-		editable: false
-	}));
-}
-function parseFieldNodeId(nodeId) {
-	if (!nodeId.includes(":field:")) return null;
-	const [instanceId, , fieldName] = nodeId.split(":");
-	return {
-		instanceId,
-		fieldName
-	};
-}
-function createFieldNodeId(instanceId, fieldName) {
-	return `${instanceId}:field:${fieldName}`;
+	return result;
 }
-function parseRuleNodeId(nodeId) {
-	if (!nodeId.includes(":rule:")) return null;
-	const parts = nodeId.split(":rule:");
-	if (parts.length !== 2) return null;
-	const fieldPart = parts[0];
-	const ruleName = parts[1];
-	const fieldInfo = parseFieldNodeId(fieldPart);
-	if (!fieldInfo) return null;
-	return {
-		...fieldInfo,
-		ruleName
+function createUseRulesComposable(customRules, options, shortcuts) {
+	const globalOptions = {
+		autoDirty: options?.autoDirty,
+		lazy: options?.lazy,
+		rewardEarly: options?.rewardEarly,
+		silent: options?.silent,
+		clearExternalErrorsOnChange: options?.clearExternalErrorsOnChange
 	};
+	function useRules$1(rulesFactory, options$1) {
+		const definedRules = isRef(rulesFactory) ? rulesFactory : typeof rulesFactory === "function" ? void 0 : computed(() => rulesFactory);
+		return createRootRegleLogic({
+			state: ref(createEmptyRuleState(definedRules?.value)),
+			rulesFactory: definedRules,
+			options: options$1,
+			globalOptions,
+			customRules,
+			shortcuts
+		}).regle;
+	}
+	return useRules$1;
 }
-function createRuleNodeId(instanceId, fieldName, ruleName) {
-	return `${createFieldNodeId(instanceId, fieldName)}:rule:${ruleName}`;
-}
+/**
+* useRules is a clone of useRegle, without the need to provide a state.
+*
+* It accepts the following inputs:
+*
+* @param rules - Your rules object
+* @param modifiers - Customize regle behaviour
+* 
+* ```ts
+* import { useRules } from '@regle/core';
+import { required } from '@regle/rules';
+
+const { r$ } = useRules({
+email: { required }
+})
+* ```
+*/
+const useRules = createUseRulesComposable();
 
-//#endregion
-//#region src/devtools/state-builder.ts
 /**
-* Build state for a field node
+* Define a global regle configuration, where you can:
+* - Customize built-in rules messages
+* - Add your custom rules
+* - Define global modifiers
+* - Define shortcuts
+*
+* It will return:
+*
+* - a `useRegle` composable that can typecheck your custom rules
+* - an `inferRules` helper that can typecheck your custom rules
 */
-function buildFieldState(fieldStatus) {
-	const state = {};
-	const priorityProperties = getPriorityProperties(fieldStatus, PRIORITY_KEYS.FIELD);
-	if (priorityProperties.length > 0) state["State"] = priorityProperties;
-	const remainingProperties = getRemainingProperties(fieldStatus, [
-		...PRIORITY_KEYS.FIELD,
-		"$rules",
-		"$fields"
-	]);
-	if (remainingProperties.length > 0) state["Other Properties"] = remainingProperties;
-	return state;
+function defineRegleConfig({ rules, modifiers, shortcuts }) {
+	const useRegle$1 = createUseRegleComposable(rules, modifiers, shortcuts);
+	const useRules$1 = createUseRulesComposable(rules, modifiers, shortcuts);
+	useRegle$1.__config = {
+		rules,
+		modifiers,
+		shortcuts
+	};
+	useRules$1.__config = {
+		rules,
+		modifiers,
+		shortcuts
+	};
+	return {
+		useRegle: useRegle$1,
+		inferRules: createInferRuleHelper(),
+		useRules: useRules$1
+	};
 }
 /**
-* Build state for a rule node
+* Extend an already created custom `useRegle` (as the first parameter)
+*
+* It will return:
+*
+* - a `useRegle` composable that can typecheck your custom rules
+* - an `inferRules` helper that can typecheck your custom rules
 */
-function buildRuleState(ruleStatus) {
-	const state = {};
-	const ruleKeys = [
-		"$type",
-		"$valid",
-		"$active",
-		"$pending",
-		"$message",
-		"$tooltip"
-	];
-	const priorityProperties = getPriorityProperties(ruleStatus, ruleKeys);
-	if (priorityProperties.length > 0) state["Rule State"] = priorityProperties;
-	if (ruleStatus.$params && Array.isArray(ruleStatus.$params) && ruleStatus.$params.length > 0) state["Parameters"] = [{
-		key: "$params",
-		value: ruleStatus.$params,
-		editable: false
-	}];
-	if (ruleStatus.$metadata !== void 0 && ruleStatus.$metadata !== true && ruleStatus.$metadata !== false) state["Metadata"] = [{
-		key: "$metadata",
-		value: ruleStatus.$metadata,
-		editable: false
-	}];
-	const remainingProperties = getRemainingProperties(ruleStatus, [
-		...ruleKeys,
-		"$params",
-		"$metadata",
-		"$validator",
-		"$parse",
-		"$reset",
-		"$unwatch",
-		"$watch",
-		"$haveAsync",
-		"$validating",
-		"$fieldDirty",
-		"$fieldInvalid",
-		"$fieldPending",
-		"$fieldCorrect",
-		"$fieldError",
-		"$maybePending",
-		"$externalErrors"
-	]);
-	if (remainingProperties.length > 0) state["Other Properties"] = remainingProperties;
-	return state;
-}
-function buildRootState(r$) {
-	const state = {};
-	const priorityProperties = getPriorityProperties(r$, PRIORITY_KEYS.ROOT);
-	if (priorityProperties.length > 0) state["State"] = priorityProperties;
-	const remainingProperties = getRemainingProperties(r$, [...PRIORITY_KEYS.ROOT, "$fields"]);
-	if (remainingProperties.length > 0) state["Other Properties"] = remainingProperties;
-	return state;
-}
-function resolveFieldByPath(fields, path) {
-	if (!fields || !path) return null;
-	const segments = path.match(/[^.\[\]]+/g);
-	if (!segments) return null;
-	let current = fields;
-	for (const segment of segments) {
-		if (!current) return null;
-		const index = parseInt(segment);
-		if (!isNaN(index)) if (isCollectionRulesStatus(current) && Array.isArray(current.$each)) current = current.$each[index];
-		else return null;
-		else if (isNestedRulesStatus(current) && current.$fields && current.$fields[segment]) current = current.$fields[segment];
-		else if (current[segment]) current = current[segment];
-		else return null;
-	}
-	return current;
-}
-function buildInspectorState(nodeId, getInstance) {
-	const ruleInfo = parseRuleNodeId(nodeId);
-	if (ruleInfo) {
-		const { instanceId, fieldName, ruleName } = ruleInfo;
-		const instance$1 = getInstance(instanceId);
-		if (!instance$1 || !instance$1.r$.$fields) return null;
-		const fieldStatus = resolveFieldByPath(instance$1.r$.$fields, fieldName);
-		if (!fieldStatus || !("$rules" in fieldStatus)) return null;
-		const ruleStatus = fieldStatus.$rules[ruleName];
-		if (!ruleStatus) return null;
-		return buildRuleState(ruleStatus);
-	}
-	const fieldInfo = parseFieldNodeId(nodeId);
-	if (fieldInfo) {
-		const { instanceId, fieldName } = fieldInfo;
-		const instance$1 = getInstance(instanceId);
-		if (!instance$1 || !instance$1.r$.$fields) return null;
-		const fieldStatus = resolveFieldByPath(instance$1.r$.$fields, fieldName);
-		if (!fieldStatus) return null;
-		return buildFieldState(fieldStatus);
-	}
-	const instance = getInstance(nodeId);
-	if (!instance) return null;
-	return buildRootState(instance.r$);
-}
-
-//#endregion
-//#region src/devtools/actions.ts
-function handleValidateAction(nodeId, api) {
-	if (nodeId.includes(":rule:")) return;
-	const fieldInfo = parseFieldNodeId(nodeId);
-	if (fieldInfo) {
-		const { instanceId, fieldName } = fieldInfo;
-		const instance = regleDevtoolsRegistry.get(instanceId);
-		if (instance && instance.r$.$fields) {
-			const fieldStatus = resolveFieldByPath(instance.r$.$fields, fieldName);
-			if (fieldStatus && typeof fieldStatus.$validate === "function") fieldStatus.$validate();
-		}
-	} else {
-		const instance = regleDevtoolsRegistry.get(nodeId);
-		if (instance && typeof instance.r$.$validate === "function") instance.r$.$validate();
-	}
-	emitInspectorState(api);
-}
-function handleResetAction(nodeId, api, resetState = false) {
-	const fieldInfo = parseFieldNodeId(nodeId);
-	if (fieldInfo) {
-		const { instanceId, fieldName } = fieldInfo;
-		const instance = regleDevtoolsRegistry.get(instanceId);
-		if (instance && instance.r$.$fields) {
-			const fieldStatus = resolveFieldByPath(instance.r$.$fields, fieldName);
-			if (fieldStatus && typeof fieldStatus.$reset === "function") fieldStatus.$reset({ toInitialState: resetState });
-		}
-	} else {
-		const instance = regleDevtoolsRegistry.get(nodeId);
-		if (instance && typeof instance.r$.$reset === "function") instance.r$.$reset({ toInitialState: resetState });
-	}
-	emitInspectorState(api);
-}
-function handleEditInspectorState(payload, api) {
-	const { nodeId, path, state } = payload;
-	if (!path.includes("$value")) return;
-	if (!parseFieldNodeId(nodeId)) return;
-	const [instanceId, _, fieldPath] = nodeId.split(":");
-	const instance = regleDevtoolsRegistry.get(instanceId);
-	if (instance && instance.r$.$fields) {
-		const fieldStatus = resolveFieldByPath(instance.r$.$fields, fieldPath);
-		if (fieldStatus && "$value" in fieldStatus) fieldStatus.$value = state.value;
-	}
-	emitInspectorState(api);
-}
-function emitInspectorState(api) {
-	setTimeout(() => {
-		api.sendInspectorState(INSPECTOR_IDS.INSPECTOR);
-		api.sendInspectorTree(INSPECTOR_IDS.INSPECTOR);
-	}, 100);
+function extendRegleConfig(regle, { rules, modifiers, shortcuts }) {
+	const rootConfig = regle.__config ?? {};
+	const newRules = () => ({
+		...rootConfig.rules?.(),
+		...rules?.()
+	});
+	const newModifiers = rootConfig.modifiers && modifiers ? merge(rootConfig.modifiers, modifiers) : rootConfig.modifiers ?? modifiers;
+	const newShortcuts = rootConfig.shortcuts && shortcuts ? merge(rootConfig.shortcuts, shortcuts) : rootConfig.shortcuts ?? shortcuts;
+	const useRegle$1 = createUseRegleComposable(newRules, newModifiers, newShortcuts);
+	useRegle$1.__config = {
+		rules: newRules,
+		modifiers: newModifiers,
+		shortcuts: newShortcuts
+	};
+	return {
+		useRegle: useRegle$1,
+		inferRules: createInferRuleHelper()
+	};
 }
 
-//#endregion
-//#region src/devtools/tree-builder.ts
-function buildNodeTags(fieldOrR$, componentName) {
-	const tags = [];
-	if (fieldOrR$.$error) tags.push({
-		label: "error",
-		textColor: COLORS.ERROR.text,
-		backgroundColor: COLORS.ERROR.bg
+function mergeRegles(regles, _scoped) {
+	const scoped = _scoped == null ? false : _scoped;
+	const $value = computed({
+		get: () => {
+			if (scoped) return Object.values(regles).map((r) => r.$value);
+			else return Object.fromEntries(Object.entries(regles).map(([key, r]) => [key, r.$value]));
+		},
+		set: (value) => {
+			if (!scoped) {
+				if (typeof value === "object") Object.entries(value).forEach(([key, newValue]) => regles[key].$value = newValue);
+			}
+		}
 	});
-	else if (fieldOrR$.$correct) tags.push({
-		label: "correct",
-		textColor: COLORS.VALID.text,
-		backgroundColor: COLORS.VALID.bg
+	const $silentValue = computed({
+		get: () => Object.fromEntries(Object.entries(regles).map(([key, r]) => [key, r.$silentValue])),
+		set: (value) => {
+			if (typeof value === "object") Object.entries(value).forEach(([key, newValue]) => regles[key].$silentValue = newValue);
+		}
 	});
-	if (fieldOrR$.$pending) tags.push({
-		label: "pending",
-		textColor: COLORS.PENDING.text,
-		backgroundColor: COLORS.PENDING.bg
+	const $dirty = computed(() => {
+		const entries = Object.entries(regles);
+		return !!entries.length && entries.every(([_, regle]) => {
+			return regle?.$dirty;
+		});
 	});
-	if (fieldOrR$.$dirty) tags.push({
-		label: "dirty",
-		textColor: COLORS.DIRTY.text,
-		backgroundColor: COLORS.DIRTY.bg
+	const $anyDirty = computed(() => {
+		return Object.entries(regles).some(([_, regle]) => {
+			return regle?.$anyDirty;
+		});
 	});
-	if (componentName) tags.push({
-		label: componentName,
-		textColor: COLORS.COMPONENT.text,
-		backgroundColor: COLORS.COMPONENT.bg
+	const $invalid = computed(() => {
+		return Object.entries(regles).some(([_, regle]) => {
+			return regle?.$invalid;
+		});
 	});
-	return tags;
-}
-function buildRuleTags(rule) {
-	const tags = [];
-	if (!rule.$active) tags.push({
-		label: "inactive",
-		textColor: 10265519,
-		backgroundColor: 15987958
+	const $correct = computed(() => {
+		const entries = Object.entries(regles);
+		return !!entries.length && entries.every(([_, regle]) => {
+			return regle?.$correct || regle.$anyDirty && !regle.$invalid;
+		});
 	});
-	else if (!rule.$valid) tags.push({
-		label: "invalid",
-		textColor: COLORS.INVALID.text,
-		backgroundColor: COLORS.INVALID.bg
+	const $error = computed(() => {
+		return Object.entries(regles).some(([_, regle]) => {
+			return regle?.$error;
+		});
 	});
-	else if (rule.$valid) tags.push({
-		label: "valid",
-		textColor: COLORS.VALID.text,
-		backgroundColor: COLORS.VALID.bg
+	const $ready = computed(() => {
+		const entries = Object.entries(regles);
+		return !!entries.length && entries.every(([_, regle]) => {
+			return regle?.$ready;
+		});
 	});
-	if (rule.$pending) tags.push({
-		label: "pending",
-		textColor: COLORS.PENDING.text,
-		backgroundColor: COLORS.PENDING.bg
+	const $pending = computed(() => {
+		return Object.entries(regles).some(([_, regle]) => {
+			return regle?.$pending;
+		});
 	});
-	return tags;
-}
-function buildRuleNodes(fieldStatus, instanceId, fieldPath) {
-	const children = [];
-	if (!fieldStatus.$rules || typeof fieldStatus.$rules !== "object") return children;
-	Object.entries(fieldStatus.$rules).forEach(([ruleName, ruleStatus]) => {
-		if (ruleStatus && typeof ruleStatus === "object") {
-			const ruleTags = buildRuleTags(ruleStatus);
-			children.push({
-				id: createRuleNodeId(instanceId, fieldPath, ruleName),
-				label: ruleName,
-				tags: ruleTags,
-				children: []
-			});
-		}
+	const $issues = computed(() => {
+		if (scoped) return Object.entries(regles).map(([_, regle]) => {
+			return regle.$issues;
+		});
+		else return Object.fromEntries(Object.entries(regles).map(([key, regle]) => {
+			return [key, regle.$issues];
+		}));
 	});
-	return children;
-}
-function buildCollectionItemNodes(fieldStatus, instanceId, fieldPath) {
-	const children = [];
-	if (!fieldStatus.$each || !Array.isArray(fieldStatus.$each)) return children;
-	fieldStatus.$each.forEach((item, index) => {
-		if (item && typeof item === "object") {
-			const itemTags = buildNodeTags(item);
-			const itemPath = `${fieldPath}[${index}]`;
-			let itemChildren = [];
-			if (isNestedRulesStatus(item)) itemChildren = buildNestedFieldNodes(item.$fields, instanceId, itemPath);
-			else if (isFieldStatus(item)) itemChildren = buildRuleNodes(item, instanceId, itemPath);
-			children.push({
-				id: createFieldNodeId(instanceId, itemPath),
-				label: `[${index}]`,
-				tags: itemTags,
-				children: itemChildren
-			});
-		}
+	const $silentIssues = computed(() => {
+		if (scoped) return Object.entries(regles).map(([_, regle]) => {
+			return regle.$silentIssues;
+		});
+		else return Object.fromEntries(Object.entries(regles).map(([key, regle]) => {
+			return [key, regle.$silentIssues];
+		}));
 	});
-	return children;
-}
-function buildNestedFieldNodes(fields, instanceId, parentPath) {
-	const children = [];
-	Object.entries(fields).forEach(([fieldName, fieldStatus]) => {
-		if (fieldStatus && typeof fieldStatus === "object") {
-			const fieldPath = parentPath ? `${parentPath}.${fieldName}` : fieldName;
-			const fieldTags = buildNodeTags(fieldStatus);
-			let fieldChildren = [];
-			if (isCollectionRulesStatus(fieldStatus)) fieldChildren = buildCollectionItemNodes(fieldStatus, instanceId, fieldPath);
-			else if (isNestedRulesStatus(fieldStatus)) fieldChildren = buildNestedFieldNodes(fieldStatus.$fields, instanceId, fieldPath);
-			else if (isFieldStatus(fieldStatus)) fieldChildren = buildRuleNodes(fieldStatus, instanceId, fieldPath);
-			children.push({
-				id: createFieldNodeId(instanceId, fieldPath),
-				label: fieldName,
-				tags: fieldTags,
-				children: fieldChildren
-			});
+	const $errors = computed(() => {
+		if (scoped) return Object.entries(regles).map(([_, regle]) => {
+			return regle.$errors;
+		});
+		else return Object.fromEntries(Object.entries(regles).map(([key, regle]) => {
+			return [key, regle.$errors];
+		}));
+	});
+	const $silentErrors = computed(() => {
+		if (scoped) return Object.entries(regles).map(([_, regle]) => {
+			return regle.$silentErrors;
+		});
+		else return Object.fromEntries(Object.entries(regles).map(([key, regle]) => {
+			return [key, regle.$silentErrors];
+		}));
+	});
+	const $edited = computed(() => {
+		const entries = Object.entries(regles);
+		return !!entries.length && entries.every(([_, regle]) => {
+			return regle?.$edited;
+		});
+	});
+	const $anyEdited = computed(() => {
+		return Object.entries(regles).some(([_, regle]) => {
+			return regle?.$anyEdited;
+		});
+	});
+	const $instances = computed(() => {
+		if (scoped) return Object.values(regles);
+		else return regles;
+	});
+	function $reset(options) {
+		Object.values(regles).forEach((regle) => {
+			regle.$reset(options);
+		});
+	}
+	function $touch() {
+		Object.values(regles).forEach((regle) => {
+			regle.$touch();
+		});
+	}
+	function $extractDirtyFields(filterNullishValues = true) {
+		return Object.values(regles).map((regle) => regle.$extractDirtyFields(filterNullishValues));
+	}
+	function $clearExternalErrors() {
+		Object.values(regles).forEach((regle) => {
+			regle.$clearExternalErrors();
+		});
+	}
+	async function $validate(forceValues) {
+		try {
+			if (forceValues) $value.value = forceValues;
+			const data = $value.value;
+			return {
+				valid: (await Promise.allSettled(Object.values(regles).map((regle) => {
+					return regle.$validate();
+				}))).every((value) => {
+					if (value.status === "fulfilled") return value.value.valid === true;
+					else return false;
+				}),
+				data,
+				errors: $errors.value,
+				issues: $issues.value
+			};
+		} catch {
+			return {
+				valid: false,
+				data: $value.value,
+				errors: $errors.value,
+				issues: $issues.value
+			};
 		}
+	}
+	return reactive({
+		...!scoped && { $silentValue },
+		$errors,
+		$issues,
+		$silentIssues,
+		$silentErrors,
+		$instances,
+		$value,
+		$dirty,
+		$anyDirty,
+		$invalid,
+		$correct,
+		$error,
+		$pending,
+		$ready,
+		$edited,
+		$anyEdited,
+		$reset,
+		$touch,
+		$validate,
+		$extractDirtyFields,
+		$clearExternalErrors
 	});
-	return children;
 }
-function buildRootChildrenNodes(r$, instanceId) {
-	const children = [];
-	if (isFieldStatus(r$)) return buildRuleNodes(r$, instanceId, "root");
-	if (!r$.$fields || typeof r$.$fields !== "object") return children;
-	Object.entries(r$.$fields).forEach(([fieldName, fieldStatus]) => {
-		if (fieldStatus && typeof fieldStatus === "object") {
-			const fieldTags = buildNodeTags(fieldStatus);
-			let fieldChildren = [];
-			if (isCollectionRulesStatus(fieldStatus)) fieldChildren = buildCollectionItemNodes(fieldStatus, instanceId, fieldName);
-			else if (isNestedRulesStatus(fieldStatus)) fieldChildren = buildNestedFieldNodes(fieldStatus.$fields, instanceId, fieldName);
-			else if (isFieldStatus(fieldStatus)) fieldChildren = buildRuleNodes(fieldStatus, instanceId, fieldName);
-			children.push({
-				id: createFieldNodeId(instanceId, fieldName),
-				label: fieldName,
-				tags: fieldTags,
-				children: fieldChildren
-			});
+
+function createUseCollectScope(instances, options) {
+	function useCollectScope$1(namespace) {
+		const computedNamespace = computed(() => toValue(namespace));
+		setEmptyNamespace();
+		const r$ = ref(collectRegles(instances.value));
+		const regle = reactive({ r$ });
+		function setEmptyNamespace() {
+			if (computedNamespace.value && !instances.value[computedNamespace.value]) instances.value[computedNamespace.value] = {};
 		}
-	});
-	return children;
+		watch(computedNamespace, setEmptyNamespace);
+		watch(instances, (newInstances) => {
+			r$.value = collectRegles(newInstances);
+		}, { deep: true });
+		function collectRegles(r$Instances) {
+			if (computedNamespace.value) return mergeRegles(r$Instances[computedNamespace.value] ?? {}, !options.asRecord);
+			else return mergeRegles(r$Instances["~~global"] ?? {}, !options.asRecord);
+		}
+		return { r$: regle.r$ };
+	}
+	return { useCollectScope: useCollectScope$1 };
 }
-function buildInspectorTree(instances, filter) {
-	const nodes = instances.map((instance) => {
-		const { r$, id, name, componentName } = instance;
+
+function createUseScopedRegleComposable(instances, customUseRegle) {
+	const scopedUseRegle = customUseRegle ?? useRegle;
+	const useScopedRegle$1 = ((state, rulesFactory, options) => {
+		const { namespace, scopeKey: _scopeKey, ...restOptions } = options ?? {};
+		scopedUseRegle.__config ??= {};
+		const computedNamespace = computed(() => toValue(namespace));
+		const $id = ref(`${Object.keys(instances.value).length + 1}-${randomId()}`);
+		const instanceName = computed(() => {
+			return options?.scopeKey ?? `instance-${$id.value}`;
+		});
+		const { r$ } = scopedUseRegle(state, rulesFactory, restOptions);
+		register();
+		tryOnScopeDispose(dispose);
+		watch(computedNamespace, (newName, oldName) => {
+			dispose(oldName);
+			register();
+		});
+		if (getCurrentInstance()) onMounted(() => {
+			const currentInstance = getCurrentInstance();
+			if (typeof window !== "undefined" && currentInstance?.proxy?.$el?.parentElement) {
+				if (document.documentElement && !document.documentElement.contains(currentInstance?.proxy?.$el?.parentElement)) dispose();
+			}
+		});
+		function dispose(oldName) {
+			const nameToClean = oldName ?? computedNamespace.value;
+			if (nameToClean) {
+				if (instances.value[nameToClean]) delete instances.value[nameToClean][instanceName.value];
+			} else if (instances.value["~~global"][instanceName.value]) delete instances.value["~~global"][instanceName.value];
+		}
+		function register() {
+			if (computedNamespace.value) {
+				if (!instances.value[computedNamespace.value]) instances.value[computedNamespace.value] = {};
+				instances.value[computedNamespace.value][instanceName.value] = r$;
+			} else {
+				if (!instances.value["~~global"]) instances.value["~~global"] = {};
+				instances.value["~~global"][instanceName.value] = r$;
+			}
+		}
 		return {
-			id,
-			label: name,
-			tags: buildNodeTags(r$, componentName),
-			children: buildRootChildrenNodes(r$, id)
+			r$,
+			dispose,
+			register
 		};
 	});
-	if (!filter || filter.trim() === "") return nodes;
-	return filterInspectorTree(nodes, filter);
+	return { useScopedRegle: useScopedRegle$1 };
 }
-function filterInspectorTree(nodes, filter) {
-	const lowerFilter = filter.toLowerCase();
-	const filtered = [];
-	for (const node of nodes) {
-		const labelMatches = node.label.toLowerCase().includes(lowerFilter);
-		const tagMatches = node.tags?.some((tag) => tag.label.toLowerCase().includes(lowerFilter)) ?? false;
-		const filteredChildren = node.children ? filterInspectorTree(node.children, filter) : [];
-		if (labelMatches || tagMatches || filteredChildren.length > 0) filtered.push({
-			...node,
-			children: filteredChildren.length > 0 ? filteredChildren : node.children
-		});
-	}
-	return filtered;
+
+function createScopedUseRegle(options) {
+	const instances = (options?.customStore ? () => {
+		if (options.customStore) {
+			if (!options.customStore?.value["~~global"]) options.customStore.value["~~global"] = {};
+			else if (options.customStore?.value) options.customStore.value = { "~~global": {} };
+		}
+		return options.customStore;
+	} : createGlobalState(() => {
+		return ref({ "~~global": {} });
+	}))();
+	const { useScopedRegle: useScopedRegle$1 } = createUseScopedRegleComposable(instances, options?.customUseRegle);
+	const { useCollectScope: useCollectScope$1 } = createUseCollectScope(instances, { asRecord: options?.asRecord });
+	return {
+		useScopedRegle: useScopedRegle$1,
+		useCollectScope: useCollectScope$1
+	};
 }
+const { useCollectScope, useScopedRegle } = createScopedUseRegle();
 
-//#endregion
-//#region src/devtools/devtools.ts
-function createDevtools(app) {
-	setupDevtoolsPlugin({
-		id: "regle-devtools",
-		label: "Regle",
-		logo: "https://reglejs.dev/logo_main.png",
-		packageName: "@regle/core",
-		homepage: "https://reglejs.dev",
-		componentStateTypes: [],
-		app
-	}, (api) => {
-		api.addInspector({
-			id: INSPECTOR_IDS.INSPECTOR,
-			label: "Regle",
-			noSelectionText: "No instance selected",
-			icon: "rule",
-			treeFilterPlaceholder: "Filter",
-			stateFilterPlaceholder: "Filter validation status",
-			nodeActions: [
-				{
-					icon: "check_circle",
-					tooltip: "Validate (with `$validate`)",
-					action: (nodeId) => {
-						handleValidateAction(nodeId, api);
-					}
-				},
-				{
-					icon: "refresh",
-					tooltip: "Reset validation state (with `$reset`)",
-					action: (nodeId) => {
-						handleResetAction(nodeId, api);
-					}
-				},
-				{
-					icon: "restore",
-					tooltip: "Restore to initial state (with `$reset`)",
-					action: (nodeId) => {
-						handleResetAction(nodeId, api, true);
-					}
-				}
-			]
-		});
-		setupInstanceWatchers(api);
-		api.on.getInspectorTree((payload) => {
-			if (payload.inspectorId === INSPECTOR_IDS.INSPECTOR) payload.rootNodes = buildInspectorTree(regleDevtoolsRegistry.getAll(), payload.filter);
-		});
-		api.on.getInspectorState((payload) => {
-			if (payload.inspectorId === INSPECTOR_IDS.INSPECTOR) {
-				const state = buildInspectorState(payload.nodeId, (id) => regleDevtoolsRegistry.get(id));
-				if (state) payload.state = state;
+/**
+* Declare variations of state that depends on one value
+*
+* Autocomplete may not work here because of https://github.com/microsoft/TypeScript/issues/49547
+*
+* ```ts
+*  // ⚠️ Use getter syntax for your rules () => {} or a computed one
+*    const {r$} = useRegle(state, () => {
+*      const variant = createVariant(state, 'type', [
+*        {type: { literal: literal('EMAIL')}, email: { required, email }},
+*        {type: { literal: literal('GITHUB')}, username: { required }},
+*        {type: { required }},
+*      ]);
+*
+*      return {
+*        ...variant.value,
+*      };
+*    })
+* ```
+*/
+function createVariant(root, discriminantKey, variants) {
+	const watchableRoot = computed(() => toValue(root)[discriminantKey]);
+	return computed(() => {
+		const selectedVariant = variants.find((variant) => {
+			if (variant[discriminantKey] && "literal" in variant[discriminantKey]) {
+				const literalRule = variant[discriminantKey]["literal"];
+				if (isRuleDef(literalRule)) return unref(literalRule._params?.[0]) === watchableRoot.value;
 			}
 		});
-		api.on.editInspectorState((payload) => {
-			if (payload.inspectorId === INSPECTOR_IDS.INSPECTOR) handleEditInspectorState(payload, api);
-		});
+		if (selectedVariant) return selectedVariant;
+		else {
+			const anyDiscriminantRules = variants.find((variant) => isObject(variant[discriminantKey]) && !Object.keys(variant[discriminantKey]).some((key) => key === "literal"));
+			if (anyDiscriminantRules) return anyDiscriminantRules;
+			else return {};
+		}
 	});
 }
-function setupInstanceWatchers(api) {
-	const watchedInstances = /* @__PURE__ */ new Set();
-	const setupWatchers = () => {
-		regleDevtoolsRegistry.getAll().forEach((instance) => {
-			const { r$, id } = instance;
-			if (watchedInstances.has(id)) return;
-			const stopHandle = watchRegleInstance(id, r$, () => {
-				api.sendInspectorState(INSPECTOR_IDS.INSPECTOR);
-				api.sendInspectorTree(INSPECTOR_IDS.INSPECTOR);
-			});
-			regleDevtoolsRegistry.addWatcher(id, stopHandle);
-			watchedInstances.add(id);
-		});
-	};
-	setupWatchers();
-	regleDevtoolsRegistry.onInstancesChange(() => {
-		const currentIds = new Set(regleDevtoolsRegistry.getAll().map((i) => i.id));
-		for (const id of watchedInstances) if (!currentIds.has(id)) watchedInstances.delete(id);
-		api.sendInspectorTree(INSPECTOR_IDS.INSPECTOR);
-		setupWatchers();
+/**
+* Narrow a nested variant field to a discriminated value
+*
+* ```ts
+* if (narrowVariant(r$, 'type', 'EMAIL')) {
+*    r$.email.$value = 'foo';
+* }
+* ```
+*/
+function narrowVariant(root, discriminantKey, discriminantValue) {
+	return isObject(root[discriminantKey]) && "$value" in root[discriminantKey] && root[discriminantKey]?.$value === discriminantValue;
+}
+function variantToRef(root, discriminantKey, discriminantValue, _options) {
+	const fromRoot = isRef(root) ? toRef(root.value, "$fields") : toRef(root, "$fields");
+	const returnedRef = ref();
+	watch(fromRoot, async () => {
+		await nextTick();
+		if (narrowVariant(fromRoot.value, discriminantKey, discriminantValue)) returnedRef.value = toRef(root).value;
+		else returnedRef.value = void 0;
+	}, {
+		immediate: true,
+		flush: "pre"
 	});
+	return returnedRef;
+}
+
+/**
+* Helper method to wrap an raw rules object
+*
+* Similar to:
+*
+* ```ts
+* const rules = {...} satisfies RegleUnknownRulesTree
+* ```
+*/
+function defineRules(rules) {
+	return rules;
+}
+/**
+* Refine a raw rules object to set rules that depends on the state values.
+*
+* @example
+*
+* ```ts
+* const rules = refineRules({
+*    password: { required, type: type<string>() },
+* }, (state) => {
+*    return {
+*        confirmPassword: { required, sameAs: sameAs(() => state.value.password)}
+*    }
+* })
+* ```
+*/
+function refineRules(rules, refinement) {
+	return (state) => merge({ ...rules }, refinement(state));
 }
 
-//#endregion
-//#region src/devtools/plugin.ts
-const __USE_DEVTOOLS__ = process.env.NODE_ENV === "development";
+var version$1 = "1.11.0-beta.3";
+
 const regleSymbol = Symbol("regle");
+
 const RegleVuePlugin = { install(app) {
-	app.provide(regleSymbol, true);
-	if (typeof window !== "undefined" && __USE_DEVTOOLS__) createDevtools(app);
+	app.provide(regleSymbol, version$1);
+	if (typeof window !== "undefined" && true) createDevtools(app);
 } };
 
-//#endregion
-export { InternalRuleType, RegleVuePlugin, createRule, createScopedUseRegle, createVariant, defineRegleConfig, defineRules, extendRegleConfig, flatErrors, inferRules, mergeRegles, narrowVariant, refineRules, registerRegleInstance, unwrapRuleParameters, useCollectScope, useRegle, useRootStorage, useRules, useScopedRegle, variantToRef };
+export { InternalRuleType, RegleVuePlugin, createRule, createScopedUseRegle, createVariant, defineRegleConfig, defineRules, extendRegleConfig, flatErrors, inferRules, mergeRegles, narrowVariant, refineRules, unwrapRuleParameters, useCollectScope, useRegle, useRootStorage, useRules, useScopedRegle, variantToRef };