@regle/core 1.10.1 → 1.11.0-beta.2

package/dist/regle-core.js

@@ -1,6 +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
 */
@@ -8,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)
 *
@@ -29,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 {
@@ -61,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);
@@ -145,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.
 */
@@ -159,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) => {
@@ -201,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") {
@@ -235,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);
@@ -278,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;
@@ -301,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
@@ -334,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";
@@ -392,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
@@ -457,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
 */
@@ -522,9 +586,10 @@ function useStorage() {
 			if (!storedRuleElement || !newRuleElement || typeof newRuleElement === "function" || typeof storedRuleElement === "function") return false;
 			if (typeof newRuleElement === "number") return false;
 			else if (typeof newRuleElement === "boolean") return false;
+			else if (typeof newRuleElement === "string") return false;
 			else if (!newRuleElement._params) return true;
 			else return newRuleElement._params?.every((paramKey, index) => {
-				if (typeof storedRuleElement === "number" || typeof storedRuleElement === "boolean") return true;
+				if (typeof storedRuleElement === "number" || typeof storedRuleElement === "boolean" || typeof storedRuleElement === "string") return true;
 				else {
 					const storedParams = unwrapRuleParameters(storedRuleElement._params);
 					const newParams = unwrapRuleParameters(newRuleElement._params);
@@ -578,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");
 }
@@ -700,17 +663,16 @@ function isFormRuleDefinition(rule) {
 	return true;
 }
 
-//#endregion
-//#region src/core/useRegle/guards/rule.status.guards.ts
 function isNestedRulesStatus(rule) {
 	return isObject(rule) && "$fields" in rule;
 }
+function isCollectionRulesStatus(rule) {
+	return !!rule && "$each" in rule;
+}
 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 = "";
@@ -789,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 = {};
@@ -965,8 +925,6 @@ function createReactiveRuleStatus({ customMessages, rule, ruleKey, state, path,
 	});
 }
 
-//#endregion
-//#region src/core/useRegle/root/standard-schemas.ts
 function createStandardSchema(validateFn) {
 	return { "~standard": {
 		version: 1,
@@ -982,8 +940,6 @@ function createStandardSchema(validateFn) {
 	} };
 }
 
-//#endregion
-//#region src/core/useRegle/root/createReactiveFieldStatus.ts
 function createReactiveFieldStatus({ state, rulesDef, customMessages, path, cachePath, fieldName, storage, options, externalErrors, schemaErrors, schemaMode, onUnwatch, $isArray, initialState, originalState, shortcuts, onValidate }) {
 	let scope = effectScope();
 	let scopeState;
@@ -1413,8 +1369,6 @@ function createReactiveFieldStatus({ state, rulesDef, customMessages, path, cach
 	});
 }
 
-//#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)}`;
@@ -1453,8 +1407,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;
@@ -1861,8 +1813,6 @@ function createReactiveCollectionStatus({ state, rulesDef, customMessages, path,
 	});
 }
 
-//#endregion
-//#region src/core/useRegle/root/createReactiveNestedStatus.ts
 function createReactiveNestedStatus({ rulesDef, state, path = "", cachePath, rootRules, externalErrors, schemaErrors, rootSchemaErrors, validationGroups, initialState, originalState, fieldName,...commonArgs }) {
 	let scope = effectScope();
 	let scopeState;
@@ -2105,6 +2055,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();
@@ -2130,7 +2090,8 @@ function createReactiveNestedStatus({ rulesDef, state, path = "", cachePath, roo
 								$fields,
 								$edited,
 								$anyEdited,
-								$issues
+								$issues,
+								"~modifiers": unref(commonArgs.options)
 							}));
 						});
 						return result;
@@ -2179,7 +2140,8 @@ function createReactiveNestedStatus({ rulesDef, state, path = "", cachePath, roo
 				$localPending,
 				$autoDirty,
 				$silent,
-				$value
+				$value,
+				$modifiers
 			};
 		});
 	}
@@ -2286,6 +2248,7 @@ function createReactiveNestedStatus({ rulesDef, state, path = "", cachePath, roo
 		$clearExternalErrors,
 		$extractDirtyFields,
 		$abort,
+		...!!rootRules ? { "~modifiers": scopeState.$modifiers } : {},
 		...createStandardSchema($validate)
 	});
 	watchEffect(() => {
@@ -2330,8 +2293,623 @@ function createReactiveChildrenStatus({ rulesDef,...properties }) {
 	});
 }
 
-//#endregion
-//#region src/core/useRegle/root/useRootStorage.ts
+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
+	}
+};
+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"
+};
+
+function useRegleDevtoolsRegistry() {
+	const instances = shallowRef(/* @__PURE__ */ new Map());
+	const watchers = shallowRef(/* @__PURE__ */ new Map());
+	let idCounter = 0;
+	const notifyCallbacks = shallowRef(/* @__PURE__ */ new Set());
+	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
+		});
+		notifyDevtools();
+		return id;
+	}
+	function unregister(id) {
+		instances.value.delete(id);
+		const watcher = watchers.value.get(id);
+		if (watcher) {
+			watcher();
+			watchers.value.delete(id);
+		}
+		notifyDevtools();
+	}
+	function getAll() {
+		return Array.from(instances.value.values());
+	}
+	function get(id) {
+		return instances.value.get(id);
+	}
+	function clear() {
+		watchers.value.forEach((stop) => stop());
+		watchers.value.clear();
+		instances.value.clear();
+		notifyDevtools();
+	}
+	function onInstancesChange(callback) {
+		notifyCallbacks.value.add(callback);
+		return () => {
+			notifyCallbacks.value.delete(callback);
+		};
+	}
+	function addWatcher(id, stopHandle) {
+		watchers.value.set(id, stopHandle);
+	}
+	function notifyDevtools() {
+		notifyCallbacks.value.forEach((callback) => callback());
+	}
+	return {
+		register,
+		unregister,
+		getAll,
+		get,
+		clear,
+		onInstancesChange,
+		addWatcher
+	};
+}
+const regleDevtoolsRegistry = useRegleDevtoolsRegistry();
+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,
+		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;
+}
+
+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}`;
+}
+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 createRuleNodeId(instanceId, fieldName, ruleName) {
+	return `${createFieldNodeId(instanceId, fieldName)}:rule:${ruleName}`;
+}
+
+/**
+* Build state for a field node
+*/
+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;
+}
+/**
+* Build state for a rule node
+*/
+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 (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$);
+}
+
+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 buildNodeTags(fieldOrR$, componentName) {
+	const tags = [];
+	if (fieldOrR$.$error) tags.push({
+		label: "error",
+		textColor: COLORS.ERROR.text,
+		backgroundColor: COLORS.ERROR.bg
+	});
+	else if (fieldOrR$.$correct) tags.push({
+		label: "correct",
+		textColor: COLORS.VALID.text,
+		backgroundColor: COLORS.VALID.bg
+	});
+	if (fieldOrR$.$pending) tags.push({
+		label: "pending",
+		textColor: COLORS.PENDING.text,
+		backgroundColor: COLORS.PENDING.bg
+	});
+	if (fieldOrR$.$dirty) tags.push({
+		label: "dirty",
+		textColor: COLORS.DIRTY.text,
+		backgroundColor: COLORS.DIRTY.bg
+	});
+	else if ("$rules" in fieldOrR$) tags.push({
+		label: "pristine",
+		textColor: COLORS.PRISTINE.text,
+		backgroundColor: COLORS.PRISTINE.bg
+	});
+	if (componentName) tags.push({
+		label: componentName,
+		textColor: COLORS.COMPONENT.text,
+		backgroundColor: COLORS.COMPONENT.bg
+	});
+	return tags;
+}
+function buildRuleTags(rule) {
+	const tags = [];
+	if (!rule.$active) tags.push({
+		label: "inactive",
+		textColor: COLORS.INACTIVE.text,
+		backgroundColor: COLORS.INACTIVE.bg
+	});
+	else if (!rule.$valid) tags.push({
+		label: "invalid",
+		textColor: COLORS.INVALID.text,
+		backgroundColor: COLORS.INVALID.bg
+	});
+	else if (rule.$valid) tags.push({
+		label: "valid",
+		textColor: COLORS.VALID.text,
+		backgroundColor: COLORS.VALID.bg
+	});
+	if (rule.$pending) tags.push({
+		label: "pending",
+		textColor: COLORS.PENDING.text,
+		backgroundColor: COLORS.PENDING.bg
+	});
+	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: []
+			});
+		}
+	});
+	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
+			});
+		}
+	});
+	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
+			});
+		}
+	});
+	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
+			});
+		}
+	});
+	return children;
+}
+function buildInspectorTree(instances, filter) {
+	const nodes = instances.map((instance) => {
+		const { r$, id, name, componentName } = instance;
+		return {
+			id,
+			label: name,
+			tags: buildNodeTags(r$, componentName),
+			children: buildRootChildrenNodes(r$, id)
+		};
+	});
+	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;
+}
+
+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);
+		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);
+			}
+		});
+		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, api);
+		});
+	});
+}
+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);
+		api.sendInspectorState(INSPECTOR_IDS.INSPECTOR);
+		setupWatchers();
+	});
+}
+
 function useRootStorage({ initialState, originalState, options, scopeRules, state, customRules, shortcuts, schemaErrors, schemaMode = false, onValidate }) {
 	const storage = useStorage();
 	const regle = ref();
@@ -2399,11 +2977,10 @@ function useRootStorage({ initialState, originalState, options, scopeRules, stat
 		$unwatchComputedExternalErrors?.();
 		$unwatchExternalErrors?.();
 	});
+	if (typeof window !== "undefined" && regle.value) registerRegleInstance(regle.value, { name: toValue(options.id) });
 	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 = {
@@ -2432,8 +3009,6 @@ function createRootRegleLogic({ state, rulesFactory, options, globalOptions, cus
 	});
 }
 
-//#endregion
-//#region src/core/useRegle/useRegle.ts
 function createUseRegleComposable(customRules, options, shortcuts) {
 	const globalOptions = {
 		autoDirty: options?.autoDirty,
@@ -2475,8 +3050,6 @@ email: { required }
 */
 const useRegle = createUseRegleComposable();
 
-//#endregion
-//#region src/core/useRegle/inferRules.ts
 function createInferRuleHelper() {
 	function inferRules$1(state, rulesFactory) {
 		return rulesFactory;
@@ -2492,8 +3065,6 @@ function createInferRuleHelper() {
 */
 const inferRules = createInferRuleHelper();
 
-//#endregion
-//#region src/core/useRegle/useRules.ts
 function createEmptyRuleState(rules) {
 	const result = {};
 	if (Object.entries(rules).some(([_, rule]) => isRuleDef(rule) || typeof rule === "function")) return null;
@@ -2545,8 +3116,6 @@ email: { required }
 */
 const useRules = createUseRulesComposable();
 
-//#endregion
-//#region src/core/defineRegleConfig.ts
 /**
 * Define a global regle configuration, where you can:
 * - Customize built-in rules messages
@@ -2606,8 +3175,6 @@ function extendRegleConfig(regle, { rules, modifiers, shortcuts }) {
 	};
 }
 
-//#endregion
-//#region src/core/mergeRegles.ts
 function mergeRegles(regles, _scoped) {
 	const scoped = _scoped == null ? false : _scoped;
 	const $value = computed({
@@ -2779,8 +3346,6 @@ function mergeRegles(regles, _scoped) {
 	});
 }
 
-//#endregion
-//#region src/core/createScopedUseRegle/useCollectScope.ts
 function createUseCollectScope(instances, options) {
 	function useCollectScope$1(namespace) {
 		const computedNamespace = computed(() => toValue(namespace));
@@ -2803,8 +3368,6 @@ function createUseCollectScope(instances, options) {
 	return { useCollectScope: useCollectScope$1 };
 }
 
-//#endregion
-//#region src/core/createScopedUseRegle/useScopedRegle.ts
 function createUseScopedRegleComposable(instances, customUseRegle) {
 	const scopedUseRegle = customUseRegle ?? useRegle;
 	const useScopedRegle$1 = ((state, rulesFactory, options) => {
@@ -2852,8 +3415,6 @@ function createUseScopedRegleComposable(instances, customUseRegle) {
 	return { useScopedRegle: useScopedRegle$1 };
 }
 
-//#endregion
-//#region src/core/createScopedUseRegle/createScopedUseRegle.ts
 function createScopedUseRegle(options) {
 	const instances = (options?.customStore ? () => {
 		if (options.customStore) {
@@ -2873,8 +3434,6 @@ function createScopedUseRegle(options) {
 }
 const { useCollectScope, useScopedRegle } = createScopedUseRegle();
 
-//#endregion
-//#region src/core/variants/createVariant.ts
 /**
 * Declare variations of state that depends on one value
 *
@@ -2938,8 +3497,6 @@ function variantToRef(root, discriminantKey, discriminantValue, _options) {
 	return returnedRef;
 }
 
-//#endregion
-//#region src/core/refineRules.ts
 /**
 * Helper method to wrap an raw rules object
 *
@@ -2971,5 +3528,13 @@ function refineRules(rules, refinement) {
 	return (state) => merge({ ...rules }, refinement(state));
 }
 
-//#endregion
-export { InternalRuleType, createRule, createScopedUseRegle, createVariant, defineRegleConfig, defineRules, extendRegleConfig, flatErrors, inferRules, mergeRegles, narrowVariant, refineRules, unwrapRuleParameters, useCollectScope, useRegle, useRootStorage, useRules, useScopedRegle, variantToRef };
+var version$1 = "1.11.0-beta.2";
+
+const regleSymbol = Symbol("regle");
+
+const RegleVuePlugin = { install(app) {
+	app.provide(regleSymbol, version$1);
+	if (typeof window !== "undefined" && true) createDevtools(app);
+} };
+
+export { InternalRuleType, RegleVuePlugin, createRule, createScopedUseRegle, createVariant, defineRegleConfig, defineRules, extendRegleConfig, flatErrors, inferRules, mergeRegles, narrowVariant, refineRules, unwrapRuleParameters, useCollectScope, useRegle, useRootStorage, useRules, useScopedRegle, variantToRef };