@regle/core 1.10.0 → 1.11.0-beta.1

package/dist/regle-core.js

@@ -1,4 +1,5 @@
 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
 /**
@@ -522,9 +523,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);
@@ -705,6 +707,9 @@ function isFormRuleDefinition(rule) {
 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;
 }
@@ -2421,7 +2426,7 @@ function createRootRegleLogic({ state, rulesFactory, options, globalOptions, cus
 	tryOnScopeDispose(() => {
 		unwatchRules?.();
 	});
-	return useRootStorage({
+	const regle = useRootStorage({
 		scopeRules: watchableRulesGetters,
 		state,
 		options: resolvedOptions,
@@ -2430,6 +2435,83 @@ function createRootRegleLogic({ state, rulesFactory, options, globalOptions, cus
 		customRules,
 		shortcuts
 	});
+	if (process.env.NODE_ENV === "development" && regle.regle) registerRegleInstance(regle.regle, { name: toValue(resolvedOptions.id) });
+	return regle;
+}
+
+//#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, {
+			id,
+			name,
+			r$,
+			componentName: options?.componentName ? `<${options.componentName}>` : void 0
+		});
+		this.notifyDevtools();
+		return id;
+	}
+	unregister(id) {
+		this.instances.delete(id);
+		const watcher = this.watchers.get(id);
+		if (watcher) {
+			watcher();
+			this.watchers.delete(id);
+		}
+		this.notifyDevtools();
+	}
+	getAll() {
+		return Array.from(this.instances.values());
+	}
+	get(id) {
+		return this.instances.get(id);
+	}
+	clear() {
+		this.watchers.forEach((stop) => stop());
+		this.watchers.clear();
+		this.instances.clear();
+		this.notifyDevtools();
+	}
+	onInstancesChange(callback) {
+		this.notifyCallbacks.add(callback);
+		return () => {
+			this.notifyCallbacks.delete(callback);
+		};
+	}
+	addWatcher(id, stopHandle) {
+		this.watchers.set(id, stopHandle);
+	}
+	notifyDevtools() {
+		this.notifyCallbacks.forEach((callback) => callback());
+	}
+};
+const regleDevtoolsRegistry = new RegleDevtoolsRegistry();
+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
+	});
+	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
@@ -2494,6 +2576,11 @@ const inferRules = createInferRuleHelper();
 
 //#endregion
 //#region src/core/useRegle/useRules.ts
+function registerRegleWithDevtools(regle, options) {
+	try {
+		registerRegleInstance(regle, { name: options?.devtoolsName });
+	} catch (e) {}
+}
 function createEmptyRuleState(rules) {
 	const result = {};
 	if (Object.entries(rules).some(([_, rule]) => isRuleDef(rule) || typeof rule === "function")) return null;
@@ -2515,14 +2602,16 @@ function createUseRulesComposable(customRules, options, shortcuts) {
 	};
 	function useRules$1(rulesFactory, options$1) {
 		const definedRules = isRef(rulesFactory) ? rulesFactory : typeof rulesFactory === "function" ? void 0 : computed(() => rulesFactory);
-		return createRootRegleLogic({
+		const regle = createRootRegleLogic({
 			state: ref(createEmptyRuleState(definedRules?.value)),
 			rulesFactory: definedRules,
 			options: options$1,
 			globalOptions,
 			customRules,
 			shortcuts
-		}).regle;
+		});
+		registerRegleWithDevtools(regle.regle, options$1);
+		return regle.regle;
 	}
 	return useRules$1;
 }
@@ -2972,4 +3061,522 @@ function refineRules(rules, refinement) {
 }
 
 //#endregion
-export { InternalRuleType, createRule, createScopedUseRegle, createVariant, defineRegleConfig, defineRules, extendRegleConfig, flatErrors, inferRules, mergeRegles, narrowVariant, refineRules, unwrapRuleParameters, useCollectScope, useRegle, useRootStorage, useRules, useScopedRegle, variantToRef };
+//#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
+	}
+};
+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}`;
+}
+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}`;
+}
+
+//#endregion
+//#region src/devtools/state-builder.ts
+/**
+* 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,
+		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);
+}
+
+//#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
+	});
+	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
+	});
+	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: 10265519,
+		backgroundColor: 15987958
+	});
+	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;
+}
+
+//#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;
+			}
+		});
+		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);
+		setupWatchers();
+	});
+}
+
+//#endregion
+//#region src/devtools/plugin.ts
+const __USE_DEVTOOLS__ = process.env.NODE_ENV === "development";
+const regleSymbol = Symbol("regle");
+const RegleVuePlugin = { install(app) {
+	app.provide(regleSymbol, true);
+	if (typeof window !== "undefined" && __USE_DEVTOOLS__) 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 };