x-prop-tree 0.7.44 → 0.7.45

package/dist/index.js

@@ -1,191 +1,183 @@
 import { a as cloneDeep_default, i as isEqual_default, n as setCollapse$1, r as tidyList, t as getListEntry } from "./vendor.gmzhs72f.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, h, inject, isRef, mergeModels, mergeProps, normalizeStyle, onBeforeUnmount, onMounted, onUnmounted, openBlock, provide, ref, renderList, renderSlot, resolveComponent, resolveDirective, toDisplayString, unref, useId, useModel, useTemplateRef, watch, watchEffect, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+import { getElement, getPropertyDefault, getPropertyDefaultArray, getTag, makeSlotId, parsePercentStr, parsePixelStr, pkgs } from "x-runtime-lib";
 import { useI18n } from "vue-i18n";
 import { eventBus, globalObjects, injectDark, injectLocale, openNumberDlg, openPromptDlg, useColor, useSystem, useViewStack } from "x-essential-lib";
-import { getElement, getPropertyDefault, getTag, makeSlotId, parsePercentStr, parsePixelStr, pkgs } from "x-runtime-lib";
 import { globalState } from "x-state-lib";
 import { useDisplay } from "vuetify";
 import { XBlockly } from "x-block-lib";
-function isCollapse(e, m) {
-	let g = e.value;
-	for (let e of m) {
-		if (!g.children[e]) return !0;
-		g = g.children[e];
+function isCollapse(e, w) {
+	let T = e.value;
+	for (let e of w) {
+		if (!T.children[e]) return !0;
+		T = T.children[e];
 	}
-	return g.collapse;
+	return T.collapse;
 }
-function setCollapse(e, m, g) {
-	let _ = e.value;
-	for (let e of m) _.children[e] || (_.children[e] = {
+function setCollapse(e, w, T) {
+	let E = e.value;
+	for (let e of w) E.children[e] || (E.children[e] = {
 		collapse: !0,
 		children: {}
-	}), _ = _.children[e];
-	_.collapse = g;
+	}), E = E.children[e];
+	E.collapse = T;
 }
-const isPropertyCompatible = (e, m) => {
-	let g = (e, m) => {
-		if (e.ui !== m.ui || e.array !== m.array) return !1;
-		if (e.ui || m.ui) return !0;
-		if (e.children.length !== m.children.length) return !1;
-		for (let _ = 0; _ < e.children.length; _++) if (!g(e.children[_], m.children[_])) return !1;
-		return !0;
-	};
-	return g(e, m);
-}, unpkgProperty = (e, m) => {
-	let g = {
+function unpkgProperty(e, w) {
+	let T = {
 		key: "",
 		name: "",
 		children: e
 	};
-	for (let e of m) {
-		if (!g) {
-			console.assert(!1, `invalid property keys=${m}`);
-			break;
-		}
-		if (g.ui) {
-			console.assert(!1, `property ui must be invalid keys=${m}`);
-			break;
-		}
-		typeof e != "number" && (g = g.children.find((m) => m.key === e));
+	for (let e of w) {
+		if (!T) throw Error("target must be valid");
+		if (T.ui) throw Error("target ui must be invalid");
+		typeof e != "number" && (T = T.children.find((w) => w.key === e));
 	}
-	return g;
-}, unpkgObject = (e, m) => {
-	let g = e;
-	for (let e of m) {
-		if (!g) {
-			console.assert(!1, `object must be valid keys=${m}`);
-			break;
-		}
-		g = g[e];
+	return T;
+}
+function unpkgObject(e, w) {
+	let T = e;
+	for (let e of w) {
+		if (!T) throw Error("target must be valid");
+		T = T[e];
 	}
-	return g;
-}, getModelValue = (e, m, g, _, v, y) => {
-	if (v !== void 0) if (y) {
-		if (g[m.key] === void 0) {
-			let v = getPropertyDefault(m);
-			v !== void 0 && (g[m.key] = v, _(e, g[m.key]));
+	return T;
+}
+function ensureArrayValue(e, T, E, D, O, k) {
+	if (D !== void 0 && !O) {
+		if (!(E[D] instanceof Array)) {
+			let O = getPropertyDefaultArray(T);
+			isEqual_default(O, E[D]) || (E[D] = O, k(e, E[D]));
 		}
-		return g[m.key];
+		return E[D];
 	} else {
-		if (g[v] === void 0) {
-			let y = getPropertyDefault(m, !0);
-			y !== void 0 && (g[v] = y, _(e, g[v]));
+		if (!(E[T.key] instanceof Array)) {
+			let D = getPropertyDefaultArray(T);
+			isEqual_default(D, E[T.key]) || (E[T.key] = D, k(e, E[T.key]));
 		}
-		return g[v];
+		return E[T.key];
 	}
-	else {
-		if (g[m.key] === void 0) {
-			let v = getPropertyDefault(m);
-			v !== void 0 && (g[m.key] = v, _(e, g[m.key]));
+}
+function getModelValue(e, T, E, D, O, k) {
+	if (D !== void 0 && !O) {
+		if (E[D] === void 0) {
+			let O = getPropertyDefault(T);
+			isEqual_default(O, E[D]) || (E[D] = O, k(e, E[D]));
 		}
-		return g[m.key];
-	}
-}, setModelValue = (e, m, g, _, v, y, b) => {
-	if (y !== void 0) b ? _ !== g[m.key] && (g[m.key] = _, v(e, g[m.key])) : _ !== g[y] && (g[y] = _, v(e, g[y]));
-	else {
-		let y = _;
-		(m.ui === "switch" || m.ui === "select" || m.ui === "colorPicker" || m.ui === "multiTypes" || m.ui === "selectComp" || m.ui === "selectSlot" || m.ui === "selectAdaptSlot") && (_ || (y = void 0)), y !== g[m.key] && (g[m.key] = y, v(e, g[m.key]));
+		return E[D];
+	} else {
+		if (E[T.key] === void 0) {
+			let D = getPropertyDefault(T);
+			isEqual_default(D, E[T.key]) || (E[T.key] = D, k(e, E[T.key]));
+		}
+		return E[T.key];
 	}
-};
-var propertyStateIgnores = [["basic", "id"], ["basic", "name"]], isPropertyStateIgnored = (e) => propertyStateIgnores.find((g) => isEqual_default(e, g));
-const execProperty = (m, g, _, v, y, b, x) => (m = cloneDeep_default(m), b === void 0 ? m.push(g.key) : (m.push(b), x && m.push(g.key)), isPropertyStateIgnored(m) ? (v.change = !1, v.warning = !1, {
-	change: v.change,
-	warning: v.warning
-}) : g.ui ? g.array && v.children ? execPropertyLeafArray(m, g, _, v, y, b, x) : execPropertyLeafScalar(g, _, v, b, x) : g.array ? execPropertyBranchArray(m, g, _, v, y, b, x) : execPropertyBranchScalar(m, g, _, v, y, b, x));
-var execPropertyBranchArray = (e, g, _, v, y, b, x) => {
-	if (g.ui) return console.assert(!1, "execPropertyBranchArray property ui must be invalid"), {
-		change: !1,
-		warning: !1
+}
+function setModelValue(e, w, T, E, D, O, k) {
+	D !== void 0 && !O ? E !== T[D] && (T[D] = E, k(e, T[D])) : E !== T[w.key] && (T[w.key] = E, k(e, T[w.key]));
+}
+const isPropertyCompatible = (e, w) => {
+	let T = (e, w) => {
+		if (e.ui !== w.ui || e.array !== w.array) return !1;
+		if (e.ui || w.ui) return !0;
+		if (e.children.length !== w.children.length) return !1;
+		for (let E = 0; E < e.children.length; E++) if (!T(e.children[E], w.children[E])) return !1;
+		return !0;
 	};
-	if (!g.array) return console.assert(!1, "execPropertyBranchArray property array must be valid"), {
+	return T(e, w);
+};
+var propertyStateIgnores = [["basic", "id"], ["basic", "name"]];
+function isPropertyStateIgnored(e) {
+	return propertyStateIgnores.find((T) => isEqual_default(e, T));
+}
+function execProperty(w, T, E, D, O, k) {
+	return w = cloneDeep_default(w), O === void 0 ? w.push(T.key) : (w.push(O), k && w.push(T.key)), isPropertyStateIgnored(w) ? (D.change = !1, D.warning = !1, {
+		change: D.change,
+		warning: D.warning
+	}) : T.ui ? T.array && D.children ? execPropertyLeafArray(w, T, E, D, O, k) : execPropertyLeafScalar(T, E, D, O, k) : T.array ? execPropertyBranchArray(w, T, E, D, O, k) : execPropertyBranchScalar(w, T, E, D, O, k);
+}
+function execPropertyBranchArray(e, T, E, D, O, k) {
+	if (T.ui) throw Error("execPropertyBranchArray property ui must be invalid");
+	if (!T.array) throw Error("execPropertyBranchArray property array must be valid");
+	let A;
+	if (A = O !== void 0 && !k ? E[O] : E[T.key], !(A instanceof Array)) return D.change = !1, D.warning = !1, {
 		change: !1,
 		warning: !1
 	};
-	let S;
-	b !== void 0 && !x ? (_[b] instanceof Array || (_[b] = getPropertyDefault(g), y?.(e, _[b])), S = _[b]) : (_[g.key] instanceof Array || (_[g.key] = getPropertyDefault(g), y?.(e, _[g.key])), S = _[g.key]);
-	for (let m = 0; m < S.length; m++) {
-		v.children[m] = {
+	for (let w = 0; w < A.length; w++) {
+		D.children[w] = {
 			change: !1,
 			warning: !1,
 			children: {}
 		};
-		let _ = v.children[m];
-		for (let b of g.children) {
-			_.children[b.key] = {
+		let E = D.children[w];
+		for (let O of T.children) {
+			E.children[O.key] = {
 				change: !1,
 				warning: !1,
 				children: {}
 			};
-			let { change: g, warning: x } = execProperty(e, b, S[m], _.children[b.key], y, m, !0);
-			!_.change && g && (_.change = g), !_.change && x && (_.warning = x), !v.change && _.change && (v.change = _.change), !v.warning && _.warning && (v.warning = _.warning);
+			let { change: T, warning: k } = execProperty(e, O, A[w], E.children[O.key], w, !0);
+			!E.change && T && (E.change = T), !E.change && k && (E.warning = k), !D.change && E.change && (D.change = E.change), !D.warning && E.warning && (D.warning = E.warning);
 		}
 	}
-	return v.change ||= !isEqual_default(S, getPropertyDefault(g)), {
-		change: v.change,
-		warning: v.warning
-	};
-}, execPropertyBranchScalar = (e, m, g, _, v, y, b) => {
-	if (m.ui) return console.assert(!1, "execPropertyBranchScalar property ui must be invalid"), {
-		change: !1,
-		warning: !1
-	};
-	if (m.array) return console.assert(!1, "execPropertyBranchScalar property array must be invalid"), {
-		change: !1,
-		warning: !1
+	return D.change ||= !isEqual_default(A, getPropertyDefaultArray(T)), {
+		change: D.change,
+		warning: D.warning
 	};
-	let x;
-	y !== void 0 && !b ? (g[y] || (g[y] = {}), x = g[y]) : (g[m.key] || (g[m.key] = {}), x = g[m.key]);
-	for (let g = 0; g < m.children.length; g++) {
-		let y = m.children[g];
-		_.children[y.key] = {
+}
+function execPropertyBranchScalar(e, w, T, E, D, O) {
+	if (w.ui) throw Error("execPropertyBranchScalar property ui must be invalid");
+	if (w.array) throw Error("execPropertyBranchScalar property array must be invalid");
+	let k;
+	k = D !== void 0 && !O ? T[D] : T[w.key];
+	for (let T = 0; T < w.children.length; T++) {
+		let D = w.children[T];
+		E.children[D.key] = {
 			change: !1,
 			warning: !1,
 			children: {}
 		};
-		let { change: b, warning: S } = execProperty(e, y, x, _.children[y.key], v);
-		!_.change && b && (_.change = b), !_.warning && S && (_.warning = S);
+		let { change: O, warning: A } = execProperty(e, D, k, E.children[D.key], void 0, !1);
+		!E.change && O && (E.change = O), !E.warning && A && (E.warning = A);
 	}
 	return {
-		change: _.change,
-		warning: _.change
-	};
-}, execPropertyLeafArray = (e, g, _, v, y, b, x) => {
-	if (!g.ui) return console.assert(!1, "execPropertyLeafArray property ui must be valid"), {
-		change: !1,
-		warning: !1
+		change: E.change,
+		warning: E.change
 	};
-	if (!g.array) return console.assert(!1, "execPropertyLeafArray property aray must be valid"), {
+}
+function execPropertyLeafArray(e, T, E, D, O, k) {
+	if (!T.ui) throw Error("execPropertyLeafArray property ui must be valid");
+	if (!T.array) throw Error("execPropertyLeafArray property aray must be valid");
+	let A;
+	if (A = O !== void 0 && !k ? E[O] : E[T.key], !(A instanceof Array)) return D.change = !1, D.warning = !1, {
 		change: !1,
 		warning: !1
 	};
-	let S;
-	b !== void 0 && !x ? (_[b] instanceof Array || (_[b] = getPropertyDefault(g), y?.(e, _[b])), S = _[b]) : (_[g.key] instanceof Array || (_[g.key] = getPropertyDefault(g), y?.(e, _[g.key])), S = _[g.key]);
-	for (let m = 0; m < S.length; m++) {
-		v.children[m] = {
+	for (let w = 0; w < A.length; w++) {
+		D.children[w] = {
 			change: !1,
 			warning: !1,
 			children: {}
 		};
-		let { change: _, warning: b } = execProperty(e, g, S, v.children[m], y, m, !1);
-		!v.change && _ && (v.change = _), !v.warning && b && (v.warning = b);
+		let { change: E, warning: O } = execProperty(e, T, A, D.children[w], w, !1);
+		!D.change && E && (D.change = E), !D.warning && O && (D.warning = O);
 	}
-	return v.change ||= !isEqual_default(S, getPropertyDefault(g)), {
-		change: v.change,
-		warning: v.warning
+	return D.change ||= !isEqual_default(A, getPropertyDefaultArray(T)), {
+		change: D.change,
+		warning: D.warning
 	};
-}, execPropertyLeafScalar = (e, g, _, v, y) => {
-	if (!e.ui) return console.assert(!1, "execPropertyLeafScalar property ui must be valid"), {
-		change: !1,
-		warning: !1
-	};
-	let b;
-	return b = v !== void 0 && !y ? g[v] : g[e.key], _.change = !isEqual_default(b, getPropertyDefault(e, !0)), {
-		change: _.change,
-		warning: _.warning
+}
+function execPropertyLeafScalar(e, T, E, D, O) {
+	if (!e.ui) throw Error("execPropertyLeafScalar property ui must be valid");
+	let k;
+	return k = D !== void 0 && !O ? T[D] : T[e.key], E.change = !isEqual_default(k, getPropertyDefault(e)), {
+		change: E.change,
+		warning: E.warning
 	};
-};
-const rebuildPropertyState = (e, m, g, _) => {
-	if (m.length <= 0 || !g) {
+}
+function rebuildPropertyState(e, w, T) {
+	if (w.length <= 0 || !T) {
 		e.value = {
 			change: !1,
 			warning: !1,
@@ -193,35 +185,48 @@ const rebuildPropertyState = (e, m, g, _) => {
 		};
 		return;
 	}
-	let v = {
+	let E = {
 		change: !1,
 		warning: !1,
 		children: {}
 	};
-	for (let e of m) {
-		let m = {
+	for (let e of w) {
+		let w = {
 			change: !1,
 			warning: !1,
 			children: {}
 		};
-		v.children[e.key] = m, execProperty([], e, g, m, _);
+		E.children[e.key] = w, execProperty([], e, T, w, void 0, !1);
 	}
-	e.value = v;
-}, isPropertyChanged = (e, m) => {
-	let g = e;
-	for (let e of m) {
-		if (!g.children[e]) return !1;
-		g = g.children[e];
+	e.value = E;
+}
+function isPropertyChanged(e, w) {
+	let T = e;
+	for (let e of w) {
+		if (!T.children[e]) return !1;
+		T = T.children[e];
 	}
-	return g.change;
-};
-var versionKey = Symbol(), configKey = Symbol(), objectKey = Symbol(), propertyStateKey = Symbol(), changeEventKey = Symbol(), compListKey = Symbol(), slotListKey = Symbol(), adaptSlotListKey = Symbol();
+	return T.change;
+}
+var versionKey = Symbol(), typeKey = Symbol(), subtypeKey = Symbol(), configKey = Symbol(), objectKey = Symbol(), collapseStateKey = Symbol(), propertyStateKey = Symbol(), changeEventKey = Symbol(), compListKey = Symbol(), slotListKey = Symbol(), adaptSlotListKey = Symbol();
 function provideVersion(e) {
 	provide(versionKey, e);
 }
 function injectVersion() {
 	return inject(versionKey);
 }
+function provideType(e) {
+	provide(typeKey, e);
+}
+function injectType() {
+	return inject(typeKey);
+}
+function provideSubtype(e) {
+	provide(subtypeKey, e);
+}
+function injectSubtype() {
+	return inject(subtypeKey);
+}
 function provideConfig(e) {
 	provide(configKey, e);
 }
@@ -234,6 +239,12 @@ function provideObject(e) {
 function injectObject() {
 	return inject(objectKey);
 }
+function provideCollapseState(e) {
+	provide(collapseStateKey, e);
+}
+function injectCollapseState() {
+	return inject(collapseStateKey);
+}
 function providePropertyState(e) {
 	provide(propertyStateKey, e);
 }
@@ -267,101 +278,101 @@ function injectAdaptSlotList() {
 var menu_default = /* @__PURE__ */ defineComponent({
 	__name: "index",
 	setup(e) {
-		let { t: m } = useI18n(), g = injectConfig(), _ = injectObject(), v = injectPropertyState(), S = injectChangeEvent(), w = ref(0), D = ref(0), O = ref([]), k = computed(() => [w.value, D.value]), j = (e) => {
-			(() => !(O.value.length <= 0 || !isPropertyChanged(v.value, O.value)))() && e.push({
-				title: m("x-prop-tree.reset"),
+		let { t: w } = useI18n(), T = injectConfig(), E = injectObject(), D = injectPropertyState(), j = injectChangeEvent(), N = ref(0), I = ref(0), L = ref([]), R = computed(() => [N.value, I.value]), B = (e) => {
+			(() => !(L.value.length <= 0 || !isPropertyChanged(D.value, L.value)))() && e.push({
+				title: w("x-prop-tree.reset"),
 				func: () => {
-					let e = unpkgProperty(g.value, O.value);
+					let e = unpkgProperty(T.value, L.value);
 					if (e) if (e.ui) {
-						let m = unpkgObject(_.value, O.value.slice(0, -1));
-						if (!m) return;
-						m[O.value[O.value.length - 1]] = getPropertyDefault(e), S(O.value, m[O.value[O.value.length - 1]]);
+						let w = unpkgObject(E.value, L.value.slice(0, -1));
+						if (!w) return;
+						w[L.value[L.value.length - 1]] = getPropertyDefault(e), j(L.value, w[L.value[L.value.length - 1]]);
 					} else if (e.array) {
-						let m = O.value[O.value.length - 1];
-						if (m === void 0) {
+						let w = L.value[L.value.length - 1];
+						if (w === void 0) {
 							console.assert(!1, "invalid last key");
 							return;
 						}
-						if (typeof m == "string") {
-							let m = unpkgObject(_.value, O.value.slice(0, -1));
-							if (!m) return;
-							m[O.value[O.value.length - 1]] = getPropertyDefault(e), S(O.value, m[O.value[O.value.length - 1]]);
+						if (typeof w == "string") {
+							let w = unpkgObject(E.value, L.value.slice(0, -1));
+							if (!w) return;
+							w[L.value[L.value.length - 1]] = getPropertyDefault(e), j(L.value, w[L.value[L.value.length - 1]]);
 						} else {
-							let m = unpkgObject(_.value, O.value);
-							if (!m) return;
-							e.children.forEach((g) => {
-								m[g.key] = getPropertyDefault(e), S([...O.value, g.key], m[g.key]);
+							let w = unpkgObject(E.value, L.value);
+							if (!w) return;
+							e.children.forEach((T) => {
+								w[T.key] = getPropertyDefault(e), j([...L.value, T.key], w[T.key]);
 							});
 						}
 					} else {
-						let m = unpkgObject(_.value, O.value);
-						if (!m) return;
-						e.children.forEach((g) => {
-							m[g.key] = getPropertyDefault(e), S([...O.value, g.key], m[g.key]);
+						let w = unpkgObject(E.value, L.value);
+						if (!w) return;
+						e.children.forEach((T) => {
+							w[T.key] = getPropertyDefault(e), j([...L.value, T.key], w[T.key]);
 						});
 					}
 				}
 			});
-		}, M = (e) => {
+		}, V = (e) => {
 			(() => !0)() && e.push({
-				title: m("x-prop-tree.copy"),
+				title: w("x-prop-tree.copy"),
 				func: () => {
-					let e = unpkgProperty(g.value, O.value), m = unpkgObject(_.value, O.value);
+					let e = unpkgProperty(T.value, L.value), w = unpkgObject(E.value, L.value);
 					localStorage.setItem("propTreeCopy", JSON.stringify({
 						property: e,
-						object: m
+						object: w
 					}));
 				}
 			});
-		}, N = (e) => {
-			let _ = () => {
+		}, H = (e) => {
+			let E = () => {
 				let e = localStorage.getItem("propTreeCopy");
 				if (!e) return !1;
 				try {
-					let { property: m } = JSON.parse(e);
-					if (!m) return !1;
-					let _ = unpkgProperty(g.value, O.value);
-					return _ ? isPropertyCompatible(m, _) : !1;
+					let { property: w } = JSON.parse(e);
+					if (!w) return !1;
+					let E = unpkgProperty(T.value, L.value);
+					return E ? isPropertyCompatible(w, E) : !1;
 				} catch (e) {
 					console.error(e);
 				}
 				return !1;
 			};
-			_() && e.push({
-				title: m("x-prop-tree.paste"),
+			E() && e.push({
+				title: w("x-prop-tree.paste"),
 				func: () => {
-					if (!_()) return;
+					if (!E()) return;
 					let e = localStorage.getItem("propTreeCopy");
 					if (e) try {
-						let { object: m } = JSON.parse(e), _ = unpkgProperty(g.value, O.value);
-						console.log(m, _);
+						let { object: w } = JSON.parse(e), E = unpkgProperty(T.value, L.value);
+						console.log(w, E);
 					} catch (e) {
 						console.error(e);
 					}
 				}
 			});
-		}, P = computed(() => {
+		}, U = computed(() => {
 			let e = [];
-			return j(e), M(e), N(e), e;
-		}), { open: F } = useViewStack("propTreeMenu", (e) => {
-			w.value = e.x, D.value = e.y, O.value = e.keys;
+			return B(e), V(e), H(e), e;
+		}), { open: W } = useViewStack("propTreeMenu", (e) => {
+			N.value = e.x, I.value = e.y, L.value = e.keys;
 		});
-		return (e, m) => {
-			let g = resolveComponent("v-list-item-title"), _ = resolveComponent("v-list-item"), v = resolveComponent("v-list"), b = resolveComponent("v-menu");
-			return openBlock(), createBlock(b, {
-				modelValue: unref(F),
-				"onUpdate:modelValue": m[0] ||= (e) => isRef(F) ? F.value = e : null,
+		return (e, w) => {
+			let T = resolveComponent("v-list-item-title"), E = resolveComponent("v-list-item"), D = resolveComponent("v-list"), k = resolveComponent("v-menu");
+			return openBlock(), createBlock(k, {
+				modelValue: unref(W),
+				"onUpdate:modelValue": w[0] ||= (e) => isRef(W) ? W.value = e : null,
 				"location-strategy": "connected",
 				scrim: "transparent",
-				target: k.value
+				target: R.value
 			}, {
-				default: withCtx(() => [createVNode(v, null, {
-					default: withCtx(() => [(openBlock(!0), createElementBlock(Fragment, null, renderList(P.value, (e, m) => (openBlock(), createBlock(_, {
-						key: m,
+				default: withCtx(() => [createVNode(D, null, {
+					default: withCtx(() => [(openBlock(!0), createElementBlock(Fragment, null, renderList(U.value, (e, w) => (openBlock(), createBlock(E, {
+						key: w,
 						link: "",
 						onClick: e.func
 					}, {
-						default: withCtx(() => [createVNode(g, null, {
+						default: withCtx(() => [createVNode(T, null, {
 							default: withCtx(() => [createTextVNode(toDisplayString(e.title), 1)]),
 							_: 2
 						}, 1024)]),
@@ -394,194 +405,194 @@ var menu_default = /* @__PURE__ */ defineComponent({
 		"create",
 		"delete"
 	],
-	setup(e, { emit: m }) {
-		let { backgroundColor2: g, highlightColor: _ } = useColor(), v = m, y = ref(!1), T = computed(() => ({
-			background: y.value ? _.value : g.value,
+	setup(e, { emit: w }) {
+		let { backgroundColor2: T, highlightColor: E } = useColor(), D = w, O = ref(!1), P = computed(() => ({
+			background: O.value ? E.value : T.value,
 			height: "36px",
 			marginBottom: "1px",
 			userSelect: "none"
-		})), D = () => {
-			v("collapse", !e.collapse);
-		}, O = (e) => {
-			v("menu", e.clientX, e.clientY);
+		})), I = () => {
+			D("collapse", !e.collapse);
+		}, L = (e) => {
+			D("menu", e.clientX, e.clientY);
 		};
-		return (m, g) => {
-			let _ = resolveComponent("v-icon"), b = resolveComponent("v-spacer"), k = resolveComponent("v-btn"), A = resolveDirective("ripple");
+		return (w, T) => {
+			let E = resolveComponent("v-icon"), k = resolveComponent("v-spacer"), R = resolveComponent("v-btn"), z = resolveDirective("ripple");
 			return withDirectives((openBlock(), createElementBlock("div", {
 				class: "d-flex align-center cursor-pointer",
-				style: normalizeStyle(T.value),
-				onClick: D,
-				onContextmenu: withModifiers(O, ["self", "prevent"]),
-				onMouseout: g[2] ||= (e) => y.value = !1,
-				onMouseover: g[3] ||= (e) => y.value = !0
+				style: normalizeStyle(P.value),
+				onClick: I,
+				onContextmenu: withModifiers(L, ["self", "prevent"]),
+				onMouseout: T[2] ||= (e) => O.value = !1,
+				onMouseover: T[3] ||= (e) => O.value = !0
 			}, [
-				createVNode(_, {
+				createVNode(E, {
 					class: "mr-1",
 					icon: e.collapse ? "mdi-chevron-right" : "mdi-chevron-down"
 				}, null, 8, ["icon"]),
 				createElementVNode("span", _hoisted_1$18, toDisplayString(e.title), 1),
-				createVNode(b),
-				e.hasCreate ? (openBlock(), createBlock(k, {
+				createVNode(k),
+				e.hasCreate ? (openBlock(), createBlock(R, {
 					key: 0,
 					class: "mx-3",
 					density: "compact",
 					icon: "mdi-plus",
 					variant: "text",
-					onClick: g[0] ||= withModifiers((e) => v("create"), ["stop"])
+					onClick: T[0] ||= withModifiers((e) => D("create"), ["stop"])
 				})) : createCommentVNode("", !0),
-				e.hasDelete ? (openBlock(), createBlock(k, {
+				e.hasDelete ? (openBlock(), createBlock(R, {
 					key: 1,
 					class: "mx-3",
 					density: "compact",
 					icon: "mdi-minus",
 					variant: "text",
-					onClick: g[1] ||= withModifiers((m) => v("delete", e.index), ["stop"])
+					onClick: T[1] ||= withModifiers((w) => D("delete", e.index), ["stop"])
 				})) : createCommentVNode("", !0)
-			], 36)), [[A]]);
+			], 36)), [[z]]);
 		};
 	}
 });
-function useAdaptSlotList(e, m, g) {
-	let { i18n: y } = globalObjects, b = ref([]);
-	provideAdaptSlotList(b);
-	let x = () => {
-		if (!e.value || !m.value || !g.value) return [];
-		let x = pkgs[e.value];
-		if (!x) return console.assert(!1, `invalid version=${e.value}`), [];
-		let S = getTag(m.value, g.value), C = [];
-		for (let e = 0; e < x.groups[S].length; e++) {
-			let m = x.groups[S][e], g = getListEntry(b, m.key);
-			C.push({
-				id: m.key,
+function useAdaptSlotList() {
+	let e = injectVersion(), w = injectType(), T = injectSubtype(), { i18n: O } = globalObjects, k = ref([]);
+	provideAdaptSlotList(k);
+	let A = () => {
+		if (!e.value || !w.value || !T.value) return [];
+		let A = pkgs[e.value];
+		if (!A) return console.assert(!1, `invalid version=${e.value}`), [];
+		let j = getTag(w.value, T.value), M = [];
+		for (let e = 0; e < A.groups[j].length; e++) {
+			let w = A.groups[j][e], T = getListEntry(k, w.key);
+			M.push({
+				id: w.key,
 				type: 0,
-				name: y.global.t(m.name),
+				name: O.global.t(w.name),
 				position: e,
-				collapse: g?.collapse ?? !0,
+				collapse: T?.collapse ?? !0,
 				count: 0
 			});
-			let _ = 0;
-			for (let e of m.items) {
-				let g = getElement(e);
-				if (g && !g.internal && g.slots) for (let e of g.slots) {
-					let v = makeSlotId("elementSlot", g.key, e.key), b = `${y.global.t(g.name)} / ${y.global.t(e.name)}`;
-					C.push({
-						id: v,
+			let E = 0;
+			for (let e of w.items) {
+				let T = getElement(e);
+				if (T && !T.internal && T.slots) for (let e of T.slots) {
+					let D = makeSlotId("elementSlot", T.key, e.key), k = `${O.global.t(T.name)} / ${O.global.t(e.name)}`;
+					M.push({
+						id: D,
 						type: 1,
-						name: b,
-						position: _++,
-						group: m.key
+						name: k,
+						position: E++,
+						group: w.key
 					});
 				}
 			}
 		}
-		let { activeApp: w, depends: T } = globalState.app;
-		for (let { id: e, name: m, position: g } of w.compGroups) {
-			let _ = getListEntry(b, e);
-			C.push({
+		let { activeApp: N, depends: P } = globalState.app;
+		for (let { id: e, name: w, position: T } of N.compGroups) {
+			let E = getListEntry(k, e);
+			M.push({
 				id: e,
 				type: 0,
-				name: m,
-				position: g,
-				collapse: _?.collapse ?? !0
+				name: w,
+				position: T,
+				collapse: E?.collapse ?? !0
 			});
 		}
-		let E = 0;
-		for (let e of w.comps) {
-			let m = T[e.id];
-			if (m && m.meta.slots) for (let g of m.meta.slots) {
-				let m = makeSlotId("customSlot", e.id, g.id), _ = `${e.name} / ${g.name}`;
-				C.push({
-					id: m,
+		let F = 0;
+		for (let e of N.comps) {
+			let w = P[e.id];
+			if (w && w.meta.slots) for (let T of w.meta.slots) {
+				let w = makeSlotId("customSlot", e.id, T.id), E = `${e.name} / ${T.name}`;
+				M.push({
+					id: w,
 					type: 1,
-					name: _,
-					position: E++,
+					name: E,
+					position: F++,
 					group: e.groupId
 				});
 			}
 		}
-		return tidyList(C, !0);
-	}, S = () => {
-		b.value = x();
-	}, C, w = () => {
-		clearTimeout(C), C = window.setTimeout(() => {
-			S(), C && w();
+		return tidyList(M, !0);
+	}, j = () => {
+		k.value = A();
+	}, M, N = () => {
+		clearTimeout(M), M = window.setTimeout(() => {
+			j(), M && N();
 		}, 1e3);
-	}, T = () => {
-		clearTimeout(C), C = void 0;
+	}, P = () => {
+		clearTimeout(M), M = void 0;
 	};
 	onMounted(() => {
-		w();
+		N();
 	}), onBeforeUnmount(() => {
-		T();
+		P();
 	}), watch([
 		e,
-		m,
-		g
+		w,
+		T
 	], () => {
-		S(), w();
+		j(), N();
 	});
 }
 function useCompList() {
 	let e = ref([]);
 	provideCompList(e);
-	let m = () => {
-		let { activeApp: m, depends: g } = globalState.app, v = [];
-		for (let { id: g, name: _, position: y } of m.compGroups) {
-			let m = e.value.find((e) => e.id === g);
-			v.push({
-				id: g,
+	let w = () => {
+		let { activeApp: w, depends: T } = globalState.app, D = [];
+		for (let { id: T, name: E, position: O } of w.compGroups) {
+			let w = e.value.find((e) => e.id === T);
+			D.push({
+				id: T,
 				type: 0,
-				name: _,
-				position: y,
-				collapse: m?.collapse ?? !0
+				name: E,
+				position: O,
+				collapse: w?.collapse ?? !0
 			});
 		}
-		for (let { id: e, groupId: _, name: y, position: b } of m.comps) g[e] && v.push({
+		for (let { id: e, groupId: E, name: O, position: k } of w.comps) T[e] && D.push({
 			id: e,
 			type: 1,
-			name: y,
-			position: b,
-			group: _
+			name: O,
+			position: k,
+			group: E
 		});
-		e.value = tidyList(v, !0);
-	}, g, v = () => {
-		clearTimeout(g), g = window.setTimeout(() => {
-			m(), g && v();
+		e.value = tidyList(D, !0);
+	}, T, D = () => {
+		clearTimeout(T), T = window.setTimeout(() => {
+			w(), T && D();
 		}, 1e3);
-	}, y = () => {
-		clearTimeout(g), g = void 0;
+	}, O = () => {
+		clearTimeout(T), T = void 0;
 	};
 	onMounted(() => {
-		v();
+		D();
 	}), onBeforeUnmount(() => {
-		y();
+		O();
 	});
 }
 function useSlotList() {
 	let e = ref([]);
 	provideSlotList(e);
-	let m = () => {
-		let { activeObject: e, activeComp: m } = globalState.app;
-		if (e.type !== "comp" || !m.meta.slots) return [];
-		let g = [];
-		for (let { id: e, name: _ } of m.meta.slots) g.push({
+	let w = () => {
+		let { activeObject: e, activeComp: w } = globalState.app;
+		if (e.type !== "comp" || !w.meta.slots) return [];
+		let T = [];
+		for (let { id: e, name: E } of w.meta.slots) T.push({
 			id: e,
-			name: _
+			name: E
 		});
-		return g;
-	}, g = () => {
-		e.value = m();
-	}, _, v = () => {
-		clearTimeout(_), _ = window.setTimeout(() => {
-			g(), _ && v();
+		return T;
+	}, T = () => {
+		e.value = w();
+	}, E, D = () => {
+		clearTimeout(E), E = window.setTimeout(() => {
+			T(), E && D();
 		}, 1e3);
-	}, y = () => {
-		clearTimeout(_), _ = void 0;
+	}, O = () => {
+		clearTimeout(E), E = void 0;
 	};
 	onMounted(() => {
-		v();
+		D();
 	}), onBeforeUnmount(() => {
-		y();
+		O();
 	});
 }
 var _hoisted_1$17 = { class: "text-label-large ml-1" }, _hoisted_2$5 = { class: "text-body-small text-grey ml-1" }, group_default$1 = /* @__PURE__ */ defineComponent({
@@ -593,29 +604,29 @@ var _hoisted_1$17 = { class: "text-label-large ml-1" }, _hoisted_2$5 = { class:
 		count: {}
 	},
 	emits: ["x-click"],
-	setup(e, { emit: m }) {
-		let { backgroundColor2: g, highlightColor: _ } = useColor(), v = e, y = m, x = ref(!1), S = computed(() => ({
-			background: x.value ? _.value : g.value,
+	setup(e, { emit: w }) {
+		let { backgroundColor2: T, highlightColor: E } = useColor(), D = e, O = w, A = ref(!1), j = computed(() => ({
+			background: A.value ? E.value : T.value,
 			height: "30px",
 			marginBottom: "1px",
 			userSelect: "none"
 		}));
-		return (e, m) => {
-			let g = resolveComponent("v-icon"), _ = resolveDirective("ripple");
+		return (e, w) => {
+			let T = resolveComponent("v-icon"), E = resolveDirective("ripple");
 			return withDirectives((openBlock(), createElementBlock("div", {
 				class: "d-flex align-center cursor-pointer",
-				style: normalizeStyle(S.value),
-				onClick: m[0] ||= (e) => y("x-click", v.id),
-				onMouseout: m[1] ||= (e) => x.value = !1,
-				onMouseover: m[2] ||= (e) => x.value = !0
+				style: normalizeStyle(j.value),
+				onClick: w[0] ||= (e) => O("x-click", D.id),
+				onMouseout: w[1] ||= (e) => A.value = !1,
+				onMouseover: w[2] ||= (e) => A.value = !0
 			}, [
-				createVNode(g, {
-					icon: v.collapse ? "mdi-chevron-right" : "mdi-chevron-down",
+				createVNode(T, {
+					icon: D.collapse ? "mdi-chevron-right" : "mdi-chevron-down",
 					size: "small"
 				}, null, 8, ["icon"]),
-				createElementVNode("span", _hoisted_1$17, toDisplayString(v.title), 1),
-				createElementVNode("span", _hoisted_2$5, toDisplayString(v.count), 1)
-			], 36)), [[_]]);
+				createElementVNode("span", _hoisted_1$17, toDisplayString(D.title), 1),
+				createElementVNode("span", _hoisted_2$5, toDisplayString(D.count), 1)
+			], 36)), [[E]]);
 		};
 	}
 }), _hoisted_1$16 = { class: "text-body-large ml-6" }, item_default$2 = /* @__PURE__ */ defineComponent({
@@ -625,22 +636,22 @@ var _hoisted_1$17 = { class: "text-label-large ml-1" }, _hoisted_2$5 = { class:
 		title: {}
 	},
 	emits: ["x-click"],
-	setup(e, { emit: m }) {
-		let { backgroundColor2: g, highlightColor: _ } = useColor(), v = m, y = ref(!1), x = computed(() => ({
-			background: y.value ? _.value : g.value,
+	setup(e, { emit: w }) {
+		let { backgroundColor2: T, highlightColor: E } = useColor(), D = w, O = ref(!1), A = computed(() => ({
+			background: O.value ? E.value : T.value,
 			height: "48px",
 			marginBottom: "1px",
 			userSelect: "none"
 		}));
-		return (m, g) => {
-			let _ = resolveDirective("ripple");
+		return (w, T) => {
+			let E = resolveDirective("ripple");
 			return withDirectives((openBlock(), createElementBlock("div", {
 				class: "d-flex align-center cursor-pointer",
-				style: normalizeStyle(x.value),
-				onClick: g[0] ||= (m) => v("x-click", e.id),
-				onMouseout: g[1] ||= (e) => y.value = !1,
-				onMouseover: g[2] ||= (e) => y.value = !0
-			}, [createElementVNode("span", _hoisted_1$16, toDisplayString(e.title), 1)], 36)), [[_]]);
+				style: normalizeStyle(A.value),
+				onClick: T[0] ||= (w) => D("x-click", e.id),
+				onMouseout: T[1] ||= (e) => O.value = !1,
+				onMouseover: T[2] ||= (e) => O.value = !0
+			}, [createElementVNode("span", _hoisted_1$16, toDisplayString(e.title), 1)], 36)), [[E]]);
 		};
 	}
 }), _hoisted_1$15 = { key: 0 }, _hoisted_2$4 = {
@@ -659,19 +670,19 @@ var _hoisted_1$17 = { class: "text-label-large ml-1" }, _hoisted_2$5 = { class:
 	},
 	emits: ["update:modelValue", "update:open"],
 	setup(e) {
-		let { nameList: m } = useSystem(), _ = useModel(e, "modelValue"), b = useModel(e, "open"), w = injectAdaptSlotList(), T = (e) => {
-			let m = getListEntry(w, e);
-			m && setCollapse$1(w, e, !m.collapse);
-		}, E = (e) => {
-			_.value = e, b.value = !1;
+		let { nameList: w } = useSystem(), E = useModel(e, "modelValue"), k = useModel(e, "open"), N = injectAdaptSlotList(), P = (e) => {
+			let w = getListEntry(N, e);
+			w && setCollapse$1(N, e, !w.collapse);
+		}, F = (e) => {
+			E.value = e, k.value = !1;
 		};
-		return (e, g) => unref(w).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_1$15, [(openBlock(!0), createElementBlock(Fragment, null, renderList(unref(w), (e) => (openBlock(), createElementBlock(Fragment, { key: e.id }, [e.type === 0 ? (openBlock(), createBlock(group_default$1, {
+		return (e, T) => unref(N).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_1$15, [(openBlock(!0), createElementBlock(Fragment, null, renderList(unref(N), (e) => (openBlock(), createElementBlock(Fragment, { key: e.id }, [e.type === 0 ? (openBlock(), createBlock(group_default$1, {
 			key: 0,
 			id: e.id,
 			collapse: e.collapse,
 			count: e.count ?? 0,
 			title: e.name,
-			onXClick: T
+			onXClick: P
 		}, null, 8, [
 			"id",
 			"collapse",
@@ -681,8 +692,8 @@ var _hoisted_1$17 = { class: "text-label-large ml-1" }, _hoisted_2$5 = { class:
 			key: 1,
 			id: e.id,
 			title: e.name,
-			onXClick: E
-		}, null, 8, ["id", "title"])) : createCommentVNode("", !0)], 64))), 128))])) : (openBlock(), createElementBlock("div", _hoisted_2$4, toDisplayString(unref(m)([
+			onXClick: F
+		}, null, 8, ["id", "title"])) : createCommentVNode("", !0)], 64))), 128))])) : (openBlock(), createElementBlock("div", _hoisted_2$4, toDisplayString(unref(w)([
 			"x-prop-tree.no",
 			"x-prop-tree.adapt",
 			"x-prop-tree.slot"
@@ -690,74 +701,91 @@ var _hoisted_1$17 = { class: "text-label-large ml-1" }, _hoisted_2$5 = { class:
 	}
 }), _hoisted_1$14 = { class: "text-body-large" }, adaptSlotSelect_default = /* @__PURE__ */ defineComponent({
 	__name: "index",
-	props: {
+	props: /* @__PURE__ */ mergeModels({
+		hasDelete: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
 		modelValue: {},
 		modelModifiers: {}
-	},
-	emits: ["update:modelValue"],
-	setup(e) {
-		let { t: m } = useI18n(), g = useDisplay(), { sysBarAvail: _, nameList: y } = useSystem(), { backgroundColor1: C } = useColor(), D = useModel(e, "modelValue"), O = injectAdaptSlotList(), k = computed(() => {
+	}),
+	emits: /* @__PURE__ */ mergeModels(["delete"], ["update:modelValue"]),
+	setup(e, { emit: w }) {
+		let { t: T } = useI18n(), E = useDisplay(), { sysBarAvail: O, nameList: M } = useSystem(), { backgroundColor1: I } = useColor(), L = useModel(e, "modelValue"), R = w, B = injectAdaptSlotList(), U = computed(() => {
 			let e = "100%";
-			return g.mdAndUp.value && (e = "400px"), {
-				background: C.value,
+			return E.mdAndUp.value && (e = "400px"), {
+				background: I.value,
 				width: e,
 				height: "100%"
 			};
-		}), j = computed(() => {
+		}), W = computed(() => {
 			let e = 48;
-			return _.value && (e += 24), {
+			return O.value && (e += 24), {
 				position: "relative",
 				height: `calc(100% - ${e}px)`
 			};
-		}), P = computed(() => ({ height: "60px" })), F = computed(() => {
-			if (!D.value) return m("x-runtime-lib.notSet");
-			let e = getListEntry(O, D.value);
-			return e ? e.name : m("x-runtime-lib.slotNotAvail");
-		}), { open: L } = useViewStack(`propTreeAdaptSlotSelectDlg${useId()}`);
+		}), K = computed(() => ({ height: "60px" })), q = computed(() => {
+			if (!L.value) return T("x-runtime-lib.notSet");
+			let e = getListEntry(B, L.value);
+			return e ? e.name : T("x-runtime-lib.slotNotAvail");
+		}), { open: J } = useViewStack(`propTreeAdaptSlotSelectDlg${useId()}`);
 		return onUnmounted(() => {
-			L.value = !1;
-		}), (e, m) => {
-			let g = resolveComponent("v-btn"), v = resolveComponent("v-sheet"), b = resolveComponent("v-dialog");
-			return openBlock(), createBlock(b, {
-				modelValue: unref(L),
-				"onUpdate:modelValue": m[5] ||= (e) => isRef(L) ? L.value = e : null,
+			J.value = !1;
+		}), (w, T) => {
+			let E = resolveComponent("v-btn"), D = resolveComponent("v-sheet"), k = resolveComponent("v-dialog");
+			return openBlock(), createBlock(k, {
+				modelValue: unref(J),
+				"onUpdate:modelValue": T[6] ||= (e) => isRef(J) ? J.value = e : null,
 				fullscreen: "",
 				"no-click-animation": "",
 				persistent: "",
 				transition: "scroll-x-reverse-transition",
-				onKeydown: m[6] ||= withKeys(withModifiers((e) => L.value = !1, ["stop", "prevent"]), ["esc"])
+				onKeydown: T[7] ||= withKeys(withModifiers((e) => J.value = !1, ["stop", "prevent"]), ["esc"])
 			}, {
-				activator: withCtx(({ props: e }) => [createVNode(g, mergeProps(e, {
+				activator: withCtx(({ props: w }) => [createVNode(E, mergeProps(w, {
 					block: "",
-					density: "comfortable"
+					density: "comfortable",
+					readonly: e.readonly
 				}), {
-					default: withCtx(() => [createTextVNode(toDisplayString(F.value), 1)]),
+					default: withCtx(() => [createTextVNode(toDisplayString(q.value), 1)]),
 					_: 1
-				}, 16)]),
+				}, 16, ["readonly"]), e.hasDelete ? (openBlock(), createBlock(E, {
+					key: 0,
+					class: "mx-2",
+					density: "compact",
+					icon: "mdi-minus",
+					variant: "text",
+					onClick: T[0] ||= withModifiers((e) => R("delete"), ["stop"])
+				})) : createCommentVNode("", !0)]),
 				default: withCtx(() => [createElementVNode("div", {
 					class: "w-100 h-100 d-flex flex-row-reverse",
-					onClick: m[3] ||= withModifiers((e) => L.value = !1, ["self"]),
-					onContextmenu: m[4] ||= withModifiers((e) => L.value = !1, ["self", "prevent"])
+					onClick: T[4] ||= withModifiers((e) => J.value = !1, ["self"]),
+					onContextmenu: T[5] ||= withModifiers((e) => J.value = !1, ["self", "prevent"])
 				}, [createElementVNode("div", {
 					class: "elevation-2",
-					style: normalizeStyle(k.value)
+					style: normalizeStyle(U.value)
 				}, [
-					unref(_) ? (openBlock(), createBlock(v, {
+					unref(O) ? (openBlock(), createBlock(D, {
 						key: 0,
 						color: "transparent",
 						height: 24
 					})) : createCommentVNode("", !0),
-					createVNode(v, {
+					createVNode(D, {
 						class: "d-flex align-center px-3",
 						color: "transparent",
 						height: 48
 					}, {
-						default: withCtx(() => [createVNode(g, {
+						default: withCtx(() => [createVNode(E, {
 							density: "comfortable",
 							icon: "mdi-close",
 							variant: "text",
-							onClick: m[0] ||= (e) => L.value = !1
-						}), createElementVNode("span", _hoisted_1$14, toDisplayString(unref(y)([
+							onClick: T[1] ||= (e) => J.value = !1
+						}), createElementVNode("span", _hoisted_1$14, toDisplayString(unref(M)([
 							"x-prop-tree.select",
 							"x-prop-tree.adapt",
 							"x-prop-tree.slot"
@@ -766,13 +794,13 @@ var _hoisted_1$17 = { class: "text-label-large ml-1" }, _hoisted_2$5 = { class:
 					}),
 					createElementVNode("div", {
 						class: "overflow-y-auto",
-						style: normalizeStyle(j.value)
+						style: normalizeStyle(W.value)
 					}, [createVNode(adaptSlotList_default, {
-						modelValue: D.value,
-						"onUpdate:modelValue": m[1] ||= (e) => D.value = e,
-						open: unref(L),
-						"onUpdate:open": m[2] ||= (e) => isRef(L) ? L.value = e : null
-					}, null, 8, ["modelValue", "open"]), createElementVNode("div", { style: normalizeStyle(P.value) }, null, 4)], 4)
+						modelValue: L.value,
+						"onUpdate:modelValue": T[2] ||= (e) => L.value = e,
+						open: unref(J),
+						"onUpdate:open": T[3] ||= (e) => isRef(J) ? J.value = e : null
+					}, null, 8, ["modelValue", "open"]), createElementVNode("div", { style: normalizeStyle(K.value) }, null, 4)], 4)
 				], 4)], 32)]),
 				_: 1
 			}, 8, ["modelValue"]);
@@ -794,43 +822,43 @@ var _hoisted_1$17 = { class: "text-label-large ml-1" }, _hoisted_2$5 = { class:
 		modelModifiers: {}
 	}),
 	emits: /* @__PURE__ */ mergeModels(["delete"], ["update:modelValue"]),
-	setup(e, { emit: m }) {
-		let { t: g } = useI18n(), _ = useModel(e, "modelValue"), v = m, y = computed(() => {
-			let m = "100%";
-			return e.hasDelete && (m = "calc(100% - 37px)"), { width: m };
-		}), C = computed(() => e.readonly), { open: D } = useViewStack(`propTreeColorPickerMenu${useId()}`);
+	setup(e, { emit: w }) {
+		let { t: T } = useI18n(), E = useModel(e, "modelValue"), D = w, O = computed(() => {
+			let w = "100%";
+			return e.hasDelete && (w = "calc(100% - 37px)"), { width: w };
+		}), M = computed(() => e.readonly), { open: I } = useViewStack(`propTreeColorPickerMenu${useId()}`);
 		return onUnmounted(() => {
-			D.value = !1;
-		}), (m, b) => {
-			let O = resolveComponent("v-btn"), k = resolveComponent("v-color-picker"), j = resolveComponent("v-menu");
-			return openBlock(), createBlock(j, {
-				modelValue: unref(D),
-				"onUpdate:modelValue": b[2] ||= (e) => isRef(D) ? D.value = e : null,
+			I.value = !1;
+		}), (w, k) => {
+			let L = resolveComponent("v-btn"), R = resolveComponent("v-color-picker"), B = resolveComponent("v-menu");
+			return openBlock(), createBlock(B, {
+				modelValue: unref(I),
+				"onUpdate:modelValue": k[2] ||= (e) => isRef(I) ? I.value = e : null,
 				"close-on-content-click": !1,
 				scrim: "transparent"
 			}, {
-				activator: withCtx(({ props: m }) => [createElementVNode("div", _hoisted_1$13, [createElementVNode("div", {
+				activator: withCtx(({ props: w }) => [createElementVNode("div", _hoisted_1$13, [createElementVNode("div", {
 					class: "flex-grow-1",
-					style: normalizeStyle(y.value)
-				}, [createVNode(O, mergeProps(m, {
+					style: normalizeStyle(O.value)
+				}, [createVNode(L, mergeProps(w, {
 					block: "",
-					color: _.value,
+					color: E.value,
 					density: "comfortable",
-					disabled: C.value
+					disabled: M.value
 				}), {
-					default: withCtx(() => [createTextVNode(toDisplayString(_.value ? _.value : unref(g)("x-runtime-lib.notSet")), 1)]),
+					default: withCtx(() => [createTextVNode(toDisplayString(E.value ? E.value : unref(T)("x-runtime-lib.notSet")), 1)]),
 					_: 1
-				}, 16, ["color", "disabled"])], 4), e.hasDelete ? (openBlock(), createBlock(O, {
+				}, 16, ["color", "disabled"])], 4), e.hasDelete ? (openBlock(), createBlock(L, {
 					key: 0,
 					class: "mx-2",
 					density: "compact",
 					icon: "mdi-minus",
 					variant: "text",
-					onClick: b[0] ||= withModifiers((e) => v("delete"), ["stop"])
+					onClick: k[0] ||= withModifiers((e) => D("delete"), ["stop"])
 				})) : createCommentVNode("", !0)])]),
-				default: withCtx(() => [createVNode(k, {
-					modelValue: _.value,
-					"onUpdate:modelValue": b[1] ||= (e) => _.value = e,
+				default: withCtx(() => [createVNode(R, {
+					modelValue: E.value,
+					"onUpdate:modelValue": k[1] ||= (e) => E.value = e,
 					mode: "hexa",
 					"show-swatches": "",
 					"swatches-max-height": "150px"
@@ -848,29 +876,29 @@ var _hoisted_1$17 = { class: "text-label-large ml-1" }, _hoisted_2$5 = { class:
 		count: {}
 	},
 	emits: ["x-click"],
-	setup(e, { emit: m }) {
-		let { backgroundColor2: g, highlightColor: _ } = useColor(), v = e, y = m, x = ref(!1), S = computed(() => ({
-			background: x.value ? _.value : g.value,
+	setup(e, { emit: w }) {
+		let { backgroundColor2: T, highlightColor: E } = useColor(), D = e, O = w, A = ref(!1), j = computed(() => ({
+			background: A.value ? E.value : T.value,
 			height: "30px",
 			marginBottom: "1px",
 			userSelect: "none"
 		}));
-		return (e, m) => {
-			let g = resolveComponent("v-icon"), _ = resolveDirective("ripple");
+		return (e, w) => {
+			let T = resolveComponent("v-icon"), E = resolveDirective("ripple");
 			return withDirectives((openBlock(), createElementBlock("div", {
 				class: "d-flex align-center cursor-pointer",
-				style: normalizeStyle(S.value),
-				onClick: m[0] ||= (e) => y("x-click", v.id),
-				onMouseout: m[1] ||= (e) => x.value = !1,
-				onMouseover: m[2] ||= (e) => x.value = !0
+				style: normalizeStyle(j.value),
+				onClick: w[0] ||= (e) => O("x-click", D.id),
+				onMouseout: w[1] ||= (e) => A.value = !1,
+				onMouseover: w[2] ||= (e) => A.value = !0
 			}, [
-				createVNode(g, {
-					icon: v.collapse ? "mdi-chevron-right" : "mdi-chevron-down",
+				createVNode(T, {
+					icon: D.collapse ? "mdi-chevron-right" : "mdi-chevron-down",
 					size: "small"
 				}, null, 8, ["icon"]),
-				createElementVNode("span", _hoisted_1$12, toDisplayString(v.title), 1),
-				createElementVNode("span", _hoisted_2$3, toDisplayString(v.count), 1)
-			], 36)), [[_]]);
+				createElementVNode("span", _hoisted_1$12, toDisplayString(D.title), 1),
+				createElementVNode("span", _hoisted_2$3, toDisplayString(D.count), 1)
+			], 36)), [[E]]);
 		};
 	}
 }), _hoisted_1$11 = { class: "text-body-large ml-6" }, item_default$1 = /* @__PURE__ */ defineComponent({
@@ -880,22 +908,22 @@ var _hoisted_1$17 = { class: "text-label-large ml-1" }, _hoisted_2$5 = { class:
 		title: {}
 	},
 	emits: ["x-click"],
-	setup(e, { emit: m }) {
-		let { backgroundColor2: g, highlightColor: _ } = useColor(), v = e, y = m, x = ref(!1), S = computed(() => ({
-			background: x.value ? _.value : g.value,
+	setup(e, { emit: w }) {
+		let { backgroundColor2: T, highlightColor: E } = useColor(), D = e, O = w, A = ref(!1), j = computed(() => ({
+			background: A.value ? E.value : T.value,
 			height: "48px",
 			marginBottom: "1px",
 			userSelect: "none"
 		}));
-		return (e, m) => {
-			let g = resolveDirective("ripple");
+		return (e, w) => {
+			let T = resolveDirective("ripple");
 			return withDirectives((openBlock(), createElementBlock("div", {
 				class: "d-flex align-center cursor-pointer",
-				style: normalizeStyle(S.value),
-				onClick: m[0] ||= (e) => y("x-click", v.id),
-				onMouseout: m[1] ||= (e) => x.value = !1,
-				onMouseover: m[2] ||= (e) => x.value = !0
-			}, [createElementVNode("span", _hoisted_1$11, toDisplayString(v.title), 1)], 36)), [[g]]);
+				style: normalizeStyle(j.value),
+				onClick: w[0] ||= (e) => O("x-click", D.id),
+				onMouseout: w[1] ||= (e) => A.value = !1,
+				onMouseover: w[2] ||= (e) => A.value = !0
+			}, [createElementVNode("span", _hoisted_1$11, toDisplayString(D.title), 1)], 36)), [[T]]);
 		};
 	}
 }), _hoisted_1$10 = { key: 0 }, _hoisted_2$2 = {
@@ -914,19 +942,19 @@ var _hoisted_1$17 = { class: "text-label-large ml-1" }, _hoisted_2$5 = { class:
 	},
 	emits: ["update:modelValue", "update:open"],
 	setup(e) {
-		let { nameList: m } = useSystem(), _ = useModel(e, "modelValue"), b = useModel(e, "open"), w = injectCompList(), T = (e) => {
-			let m = getListEntry(w, e);
-			m && setCollapse$1(w, e, !m.collapse);
-		}, E = (e) => {
-			_.value = e, b.value = !1, eventBus.emit("refreshDepends");
+		let { nameList: w } = useSystem(), E = useModel(e, "modelValue"), k = useModel(e, "open"), N = injectCompList(), P = (e) => {
+			let w = getListEntry(N, e);
+			w && setCollapse$1(N, e, !w.collapse);
+		}, F = (e) => {
+			E.value = e, k.value = !1, eventBus.emit("refreshDepends");
 		};
-		return (e, g) => unref(w).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_1$10, [(openBlock(!0), createElementBlock(Fragment, null, renderList(unref(w), (e) => (openBlock(), createElementBlock(Fragment, { key: e.id }, [e.type === 0 ? (openBlock(), createBlock(group_default, {
+		return (e, T) => unref(N).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_1$10, [(openBlock(!0), createElementBlock(Fragment, null, renderList(unref(N), (e) => (openBlock(), createElementBlock(Fragment, { key: e.id }, [e.type === 0 ? (openBlock(), createBlock(group_default, {
 			key: 0,
 			id: e.id,
 			collapse: e.collapse,
 			count: e.count ?? 0,
 			title: e.name,
-			onXClick: T
+			onXClick: P
 		}, null, 8, [
 			"id",
 			"collapse",
@@ -936,90 +964,107 @@ var _hoisted_1$17 = { class: "text-label-large ml-1" }, _hoisted_2$5 = { class:
 			key: 1,
 			id: e.id,
 			title: e.name,
-			onXClick: E
-		}, null, 8, ["id", "title"])) : createCommentVNode("", !0)], 64))), 128))])) : (openBlock(), createElementBlock("div", _hoisted_2$2, toDisplayString(unref(m)(["x-prop-tree.no", "x-prop-tree.comp"])), 1));
+			onXClick: F
+		}, null, 8, ["id", "title"])) : createCommentVNode("", !0)], 64))), 128))])) : (openBlock(), createElementBlock("div", _hoisted_2$2, toDisplayString(unref(w)(["x-prop-tree.no", "x-prop-tree.comp"])), 1));
 	}
 }), _hoisted_1$9 = { class: "text-body-large" }, compSelect_default = /* @__PURE__ */ defineComponent({
 	__name: "index",
-	props: {
+	props: /* @__PURE__ */ mergeModels({
+		hasDelete: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
 		modelValue: {},
 		modelModifiers: {}
-	},
-	emits: ["update:modelValue"],
-	setup(e) {
-		let { t: m } = useI18n(), g = useDisplay(), { sysBarAvail: _, nameList: y } = useSystem(), { backgroundColor1: C } = useColor(), D = useModel(e, "modelValue"), O = injectCompList(), k = computed(() => {
+	}),
+	emits: /* @__PURE__ */ mergeModels(["delete"], ["update:modelValue"]),
+	setup(e, { emit: w }) {
+		let { t: T } = useI18n(), E = useDisplay(), { sysBarAvail: O, nameList: M } = useSystem(), { backgroundColor1: I } = useColor(), L = useModel(e, "modelValue"), R = w, B = injectCompList(), U = computed(() => {
 			let e = "100%";
-			return g.mdAndUp.value && (e = "400px"), {
-				background: C.value,
+			return E.mdAndUp.value && (e = "400px"), {
+				background: I.value,
 				width: e,
 				height: "100%"
 			};
-		}), j = computed(() => {
+		}), W = computed(() => {
 			let e = 48;
-			return _.value && (e += 24), {
+			return O.value && (e += 24), {
 				position: "relative",
 				height: `calc(100% - ${e}px)`
 			};
-		}), P = computed(() => ({ height: "60px" })), F = computed(() => {
-			if (!D.value) return m("x-runtime-lib.notSet");
-			let e = getListEntry(O, D.value);
-			return e ? e.name : m("x-runtime-lib.compNotAvail");
-		}), { open: L } = useViewStack(`propTreeCompSelectDlg${useId()}`);
+		}), K = computed(() => ({ height: "60px" })), q = computed(() => {
+			if (!L.value) return T("x-runtime-lib.notSet");
+			let e = getListEntry(B, L.value);
+			return e ? e.name : T("x-runtime-lib.compNotAvail");
+		}), { open: J } = useViewStack(`propTreeCompSelectDlg${useId()}`);
 		return onUnmounted(() => {
-			L.value = !1;
-		}), (e, m) => {
-			let g = resolveComponent("v-btn"), v = resolveComponent("v-sheet"), b = resolveComponent("v-dialog");
-			return openBlock(), createBlock(b, {
-				modelValue: unref(L),
-				"onUpdate:modelValue": m[5] ||= (e) => isRef(L) ? L.value = e : null,
+			J.value = !1;
+		}), (w, T) => {
+			let E = resolveComponent("v-btn"), D = resolveComponent("v-sheet"), k = resolveComponent("v-dialog");
+			return openBlock(), createBlock(k, {
+				modelValue: unref(J),
+				"onUpdate:modelValue": T[6] ||= (e) => isRef(J) ? J.value = e : null,
 				fullscreen: "",
 				"no-click-animation": "",
 				persistent: "",
 				transition: "scroll-x-reverse-transition",
-				onKeydown: m[6] ||= withKeys(withModifiers((e) => L.value = !1, ["stop", "prevent"]), ["esc"])
+				onKeydown: T[7] ||= withKeys(withModifiers((e) => J.value = !1, ["stop", "prevent"]), ["esc"])
 			}, {
-				activator: withCtx(({ props: e }) => [createVNode(g, mergeProps(e, {
+				activator: withCtx(({ props: w }) => [createVNode(E, mergeProps(w, {
 					block: "",
-					density: "comfortable"
+					density: "comfortable",
+					readonly: e.readonly
 				}), {
-					default: withCtx(() => [createTextVNode(toDisplayString(F.value), 1)]),
+					default: withCtx(() => [createTextVNode(toDisplayString(q.value), 1)]),
 					_: 1
-				}, 16)]),
+				}, 16, ["readonly"]), e.hasDelete ? (openBlock(), createBlock(E, {
+					key: 0,
+					class: "mx-2",
+					density: "compact",
+					icon: "mdi-minus",
+					variant: "text",
+					onClick: T[0] ||= withModifiers((e) => R("delete"), ["stop"])
+				})) : createCommentVNode("", !0)]),
 				default: withCtx(() => [createElementVNode("div", {
 					class: "w-100 h-100 d-flex flex-row-reverse",
-					onClick: m[3] ||= withModifiers((e) => L.value = !1, ["self"]),
-					onContextmenu: m[4] ||= withModifiers((e) => L.value = !1, ["self", "prevent"])
+					onClick: T[4] ||= withModifiers((e) => J.value = !1, ["self"]),
+					onContextmenu: T[5] ||= withModifiers((e) => J.value = !1, ["self", "prevent"])
 				}, [createElementVNode("div", {
 					class: "elevation-2",
-					style: normalizeStyle(k.value)
+					style: normalizeStyle(U.value)
 				}, [
-					unref(_) ? (openBlock(), createBlock(v, {
+					unref(O) ? (openBlock(), createBlock(D, {
 						key: 0,
 						color: "transparent",
 						height: 24
 					})) : createCommentVNode("", !0),
-					createVNode(v, {
+					createVNode(D, {
 						class: "d-flex align-center px-3",
 						color: "transparent",
 						height: 48
 					}, {
-						default: withCtx(() => [createVNode(g, {
+						default: withCtx(() => [createVNode(E, {
 							density: "comfortable",
 							icon: "mdi-close",
 							variant: "text",
-							onClick: m[0] ||= (e) => L.value = !1
-						}), createElementVNode("span", _hoisted_1$9, toDisplayString(unref(y)(["x-prop-tree.select", "x-prop-tree.comp"])), 1)]),
+							onClick: T[1] ||= (e) => J.value = !1
+						}), createElementVNode("span", _hoisted_1$9, toDisplayString(unref(M)(["x-prop-tree.select", "x-prop-tree.comp"])), 1)]),
 						_: 1
 					}),
 					createElementVNode("div", {
 						class: "overflow-y-auto",
-						style: normalizeStyle(j.value)
+						style: normalizeStyle(W.value)
 					}, [createVNode(compList_default, {
-						modelValue: D.value,
-						"onUpdate:modelValue": m[1] ||= (e) => D.value = e,
-						open: unref(L),
-						"onUpdate:open": m[2] ||= (e) => isRef(L) ? L.value = e : null
-					}, null, 8, ["modelValue", "open"]), createElementVNode("div", { style: normalizeStyle(P.value) }, null, 4)], 4)
+						modelValue: L.value,
+						"onUpdate:modelValue": T[2] ||= (e) => L.value = e,
+						open: unref(J),
+						"onUpdate:open": T[3] ||= (e) => isRef(J) ? J.value = e : null
+					}, null, 8, ["modelValue", "open"]), createElementVNode("div", { style: normalizeStyle(K.value) }, null, 4)], 4)
 				], 4)], 32)]),
 				_: 1
 			}, 8, ["modelValue"]);
@@ -1043,26 +1088,26 @@ var _hoisted_1$17 = { class: "text-label-large ml-1" }, _hoisted_2$5 = { class:
 		"update:lock",
 		"update:scale"
 	],
-	setup(e, { expose: m }) {
-		let g = useModel(e, "modelValue"), _ = useModel(e, "lock"), v = useModel(e, "scale"), y = injectDark(), b = injectLocale(), S = injectVersion(), C = useTemplateRef("target"), w = () => {
-			let e = JSON.parse(g.value);
-			C.value?.load(e);
+	setup(e, { expose: w }) {
+		let T = useModel(e, "modelValue"), E = useModel(e, "lock"), D = useModel(e, "scale"), O = injectDark(), k = injectLocale(), j = injectVersion(), M = useTemplateRef("target"), N = () => {
+			let e = JSON.parse(T.value);
+			M.value?.load(e);
 		};
-		return m({ save: () => {
-			let e = C.value.save();
-			g.value = JSON.stringify(e, null, 2);
-		} }), (e, m) => (openBlock(), createBlock(unref(XBlockly), {
+		return w({ save: () => {
+			let e = M.value.save();
+			T.value = JSON.stringify(e, null, 2);
+		} }), (e, w) => (openBlock(), createBlock(unref(XBlockly), {
 			ref_key: "target",
-			ref: C,
-			lock: _.value,
-			"onUpdate:lock": m[0] ||= (e) => _.value = e,
-			scale: v.value,
-			"onUpdate:scale": m[1] ||= (e) => v.value = e,
-			dark: unref(y),
-			locale: unref(b),
+			ref: M,
+			lock: E.value,
+			"onUpdate:lock": w[0] ||= (e) => E.value = e,
+			scale: D.value,
+			"onUpdate:scale": w[1] ||= (e) => D.value = e,
+			dark: unref(O),
+			locale: unref(k),
 			type: "json",
-			version: unref(S),
-			onReady: w
+			version: unref(j),
+			onReady: N
 		}, null, 8, [
 			"lock",
 			"scale",
@@ -1073,82 +1118,99 @@ var _hoisted_1$17 = { class: "text-label-large ml-1" }, _hoisted_2$5 = { class:
 	}
 }), _hoisted_1$8 = { class: "text-body-large" }, jsonEditor_default = /* @__PURE__ */ defineComponent({
 	__name: "index",
-	props: {
+	props: /* @__PURE__ */ mergeModels({
+		hasDelete: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
 		modelValue: { required: !0 },
 		modelModifiers: {}
-	},
-	emits: ["update:modelValue"],
-	setup(e) {
-		let { t: m } = useI18n(), { sysBarAvail: g } = useSystem(), { backgroundColor0: _, backgroundColor1: v, backgroundColor2: y } = useColor(), C = useModel(e, "modelValue"), D = ref(!1), O = ref(1), k = computed(() => {
+	}),
+	emits: /* @__PURE__ */ mergeModels(["delete"], ["update:modelValue"]),
+	setup(e, { emit: w }) {
+		let { t: T } = useI18n(), { sysBarAvail: E } = useSystem(), { backgroundColor0: D, backgroundColor1: O, backgroundColor2: M } = useColor(), I = useModel(e, "modelValue"), L = w, R = ref(!1), B = ref(1), U = computed(() => {
 			let e = 48;
-			return g.value && (e += 24), {
+			return E.value && (e += 24), {
 				position: "relative",
-				background: v.value,
+				background: O.value,
 				height: `calc(100% - ${e}px)`
 			};
-		}), j = computed(() => m("x-prop-tree.jsonEditor")), { open: P } = useViewStack(`propTreejsonEditorDlg${useId()}`);
+		}), W = computed(() => T("x-prop-tree.jsonEditor")), { open: K } = useViewStack(`propTreejsonEditorDlg${useId()}`);
 		onUnmounted(() => {
-			P.value = !1;
+			K.value = !1;
 		});
-		let F = useTemplateRef("editor");
-		return watch(P, (e) => {
-			e || F.value?.save();
-		}), (e, m) => {
-			let v = resolveComponent("v-btn"), b = resolveComponent("v-sheet"), I = resolveComponent("v-spacer"), L = resolveComponent("v-dialog");
-			return openBlock(), createBlock(L, {
-				modelValue: unref(P),
-				"onUpdate:modelValue": m[4] ||= (e) => isRef(P) ? P.value = e : null,
+		let J = useTemplateRef("editor");
+		return watch(K, (e) => {
+			e || J.value?.save();
+		}), (w, T) => {
+			let O = resolveComponent("v-btn"), k = resolveComponent("v-sheet"), G = resolveComponent("v-spacer"), q = resolveComponent("v-dialog");
+			return openBlock(), createBlock(q, {
+				modelValue: unref(K),
+				"onUpdate:modelValue": T[5] ||= (e) => isRef(K) ? K.value = e : null,
 				attach: "",
 				fullscreen: "",
 				"no-click-animation": "",
 				persistent: "",
 				transition: "dialog-bottom-transition",
-				onKeydown: m[5] ||= withKeys(withModifiers((e) => P.value = !1, ["stop", "prevent"]), ["esc"])
+				onKeydown: T[6] ||= withKeys(withModifiers((e) => K.value = !1, ["stop", "prevent"]), ["esc"])
 			}, {
-				activator: withCtx(({ props: e }) => [createVNode(v, mergeProps(e, {
+				activator: withCtx(({ props: w }) => [createVNode(O, mergeProps(w, {
 					block: "",
-					density: "comfortable"
+					density: "comfortable",
+					readonly: e.readonly
 				}), {
-					default: withCtx(() => [createTextVNode(toDisplayString(j.value), 1)]),
+					default: withCtx(() => [createTextVNode(toDisplayString(W.value), 1)]),
 					_: 1
-				}, 16)]),
-				default: withCtx(() => [createVNode(b, {
-					color: unref(_),
+				}, 16, ["readonly"]), e.hasDelete ? (openBlock(), createBlock(O, {
+					key: 0,
+					class: "mx-2",
+					density: "compact",
+					icon: "mdi-minus",
+					variant: "text",
+					onClick: T[0] ||= withModifiers((e) => L("delete"), ["stop"])
+				})) : createCommentVNode("", !0)]),
+				default: withCtx(() => [createVNode(k, {
+					color: unref(D),
 					height: "100%",
 					width: "100%"
 				}, {
 					default: withCtx(() => [
-						unref(g) ? (openBlock(), createBlock(b, {
+						unref(E) ? (openBlock(), createBlock(k, {
 							key: 0,
-							color: unref(y),
+							color: unref(M),
 							height: 24
 						}, null, 8, ["color"])) : createCommentVNode("", !0),
-						createVNode(b, {
+						createVNode(k, {
 							class: "d-flex align-center px-2",
-							color: unref(y),
+							color: unref(M),
 							height: 48
 						}, {
 							default: withCtx(() => [
-								createVNode(v, {
+								createVNode(O, {
 									density: "comfortable",
 									icon: "mdi-close",
 									variant: "text",
-									onClick: m[0] ||= (e) => P.value = !1
+									onClick: T[1] ||= (e) => K.value = !1
 								}),
-								createElementVNode("span", _hoisted_1$8, toDisplayString(j.value), 1),
-								createVNode(I)
+								createElementVNode("span", _hoisted_1$8, toDisplayString(W.value), 1),
+								createVNode(G)
 							]),
 							_: 1
 						}, 8, ["color"]),
-						createElementVNode("div", { style: normalizeStyle(k.value) }, [createVNode(editor_default, {
+						createElementVNode("div", { style: normalizeStyle(U.value) }, [createVNode(editor_default, {
 							ref_key: "editor",
-							ref: F,
-							modelValue: C.value,
-							"onUpdate:modelValue": m[1] ||= (e) => C.value = e,
-							lock: D.value,
-							"onUpdate:lock": m[2] ||= (e) => D.value = e,
-							scale: O.value,
-							"onUpdate:scale": m[3] ||= (e) => O.value = e
+							ref: J,
+							modelValue: I.value,
+							"onUpdate:modelValue": T[2] ||= (e) => I.value = e,
+							lock: R.value,
+							"onUpdate:lock": T[3] ||= (e) => R.value = e,
+							scale: B.value,
+							"onUpdate:scale": T[4] ||= (e) => B.value = e
 						}, null, 8, [
 							"modelValue",
 							"lock",
@@ -1168,88 +1230,99 @@ var _hoisted_1$17 = { class: "text-label-large ml-1" }, _hoisted_2$5 = { class:
 			type: Boolean,
 			default: !1
 		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
 		types: {}
 	}, {
 		modelValue: {},
 		modelModifiers: {}
 	}),
 	emits: /* @__PURE__ */ mergeModels(["delete"], ["update:modelValue"]),
-	setup(e, { emit: m }) {
-		let { t: g } = useI18n(), { isMobile: _ } = useSystem(), v = useModel(e, "modelValue"), y = m, T = injectVersion(), D = computed(() => pkgs[T.value].types[e.types]), O = ref(0), k = computed(() => {
+	setup(e, { emit: w }) {
+		let { t: T } = useI18n(), { isMobile: E } = useSystem(), D = useModel(e, "modelValue"), O = w, P = injectVersion(), I = computed(() => pkgs[P.value].types[e.types]), L = ref(0), R = computed(() => {
 			let e = [];
-			return D.value?.forEach(({ title: m }, _) => {
+			return I.value?.forEach(({ title: w }, E) => {
 				e.push({
-					title: g(m),
-					value: _
+					title: T(w),
+					value: E
 				});
 			}), e;
 		});
 		watchEffect(() => {
-			D.value?.some((e, m) => e.validator(v.value) ? (O.value = m, !0) : !1);
+			I.value?.some((e, w) => e.validator(D.value) ? (L.value = w, !0) : !1);
 		});
-		let A = computed(() => D.value?.[O.value]), j = () => {
-			v.value = A.value?.default;
-		}, M = ref(0), N = async (e) => {
-			if (!e || !_() || A.value.ui !== "pixelInput" && A.value.ui !== "percentInput") return;
-			let m = await openNumberDlg({
+		let z = computed(() => I.value?.[L.value]), B = () => {
+			D.value = z.value?.default;
+		}, V = ref(0), H = async (e) => {
+			if (!e || !E() || z.value.ui !== "pixelInput" && z.value.ui !== "percentInput") return;
+			let w = await openNumberDlg({
 				title: "",
-				value: M.value,
-				precision: A.value.precision,
-				min: A.value.min,
-				max: A.value.max,
-				step: A.value.step
+				value: V.value,
+				precision: z.value.precision,
+				min: z.value.min,
+				max: z.value.max,
+				step: z.value.step
 			});
-			m !== void 0 && (M.value = m);
+			w !== void 0 && (V.value = w);
 		};
 		return watchEffect(() => {
-			A.value?.ui === "pixelInput" ? M.value = parsePixelStr(v.value) : A.value?.ui === "percentInput" && (M.value = parsePercentStr(v.value));
-		}), watch(M, (e) => {
-			A.value?.ui === "pixelInput" ? v.value = e + "px" : A.value?.ui === "percentInput" && (v.value = e + "%");
-		}), (m, g) => {
-			let _ = resolveComponent("v-select"), v = resolveComponent("v-number-input"), b = resolveComponent("v-btn"), T = resolveDirective("ripple");
-			return openBlock(), createElementBlock("div", _hoisted_1$7, [createElementVNode("div", _hoisted_2$1, [withDirectives(createVNode(_, {
-				modelValue: O.value,
-				"onUpdate:modelValue": [g[0] ||= (e) => O.value = e, j],
+			z.value?.ui === "pixelInput" ? V.value = parsePixelStr(D.value) : z.value?.ui === "percentInput" && (V.value = parsePercentStr(D.value));
+		}), watch(V, (e) => {
+			z.value?.ui === "pixelInput" ? D.value = e + "px" : z.value?.ui === "percentInput" && (D.value = e + "%");
+		}), (w, T) => {
+			let E = resolveComponent("v-select"), D = resolveComponent("v-number-input"), k = resolveComponent("v-btn"), P = resolveDirective("ripple");
+			return openBlock(), createElementBlock("div", _hoisted_1$7, [createElementVNode("div", _hoisted_2$1, [withDirectives(createVNode(E, {
+				modelValue: L.value,
+				"onUpdate:modelValue": [T[0] ||= (e) => L.value = e, B],
 				density: "compact",
 				"hide-details": "",
-				items: k.value,
+				items: R.value,
+				readonly: e.readonly,
 				"single-line": ""
-			}, null, 8, ["modelValue", "items"]), [[
-				T,
+			}, null, 8, [
+				"modelValue",
+				"items",
+				"readonly"
+			]), [[
+				P,
 				void 0,
 				void 0,
 				{ stop: !0 }
-			]]), A.value?.ui === "pixelInput" || A.value?.ui === "percentInput" ? withDirectives((openBlock(), createBlock(v, {
+			]]), z.value?.ui === "pixelInput" || z.value?.ui === "percentInput" ? withDirectives((openBlock(), createBlock(D, {
 				key: 0,
-				modelValue: M.value,
-				"onUpdate:modelValue": g[1] ||= (e) => M.value = e,
+				modelValue: V.value,
+				"onUpdate:modelValue": T[1] ||= (e) => V.value = e,
 				"control-variant": "stacked",
 				density: "compact",
 				"hide-details": "",
-				max: A.value.max,
-				min: A.value.min,
-				precision: A.value.precision,
+				max: z.value.max,
+				min: z.value.min,
+				precision: z.value.precision,
+				readonly: e.readonly,
 				"single-line": "",
-				step: A.value.step,
-				"onUpdate:focused": N
+				step: z.value.step,
+				"onUpdate:focused": H
 			}, null, 8, [
 				"modelValue",
 				"max",
 				"min",
 				"precision",
+				"readonly",
 				"step"
 			])), [[
-				T,
+				P,
 				void 0,
 				void 0,
 				{ stop: !0 }
-			]]) : createCommentVNode("", !0)]), e.hasDelete ? (openBlock(), createBlock(b, {
+			]]) : createCommentVNode("", !0)]), e.hasDelete ? (openBlock(), createBlock(k, {
 				key: 0,
 				class: "mx-2",
 				density: "compact",
 				icon: "mdi-minus",
 				variant: "text",
-				onClick: g[2] ||= withModifiers((e) => y("delete"), ["stop"])
+				onClick: T[2] ||= withModifiers((e) => O("delete"), ["stop"])
 			})) : createCommentVNode("", !0)]);
 		};
 	}
@@ -1273,24 +1346,24 @@ var _hoisted_1$17 = { class: "text-label-large ml-1" }, _hoisted_2$5 = { class:
 		modelModifiers: {}
 	}),
 	emits: /* @__PURE__ */ mergeModels(["delete"], ["update:modelValue"]),
-	setup(e, { emit: m }) {
-		let { isMobile: g } = useSystem(), _ = useModel(e, "modelValue"), v = m, y = async (m) => {
-			if (!m || e.readonly || !g()) return;
-			let v = await openNumberDlg({
+	setup(e, { emit: w }) {
+		let { isMobile: T } = useSystem(), E = useModel(e, "modelValue"), D = w, O = async (w) => {
+			if (!w || e.readonly || !T()) return;
+			let D = await openNumberDlg({
 				title: "",
-				value: _.value,
+				value: E.value,
 				precision: e.precision,
 				min: e.min,
 				max: e.max,
 				step: e.step
 			});
-			v !== void 0 && (_.value = v);
+			D !== void 0 && (E.value = D);
 		};
-		return (m, g) => {
-			let b = resolveComponent("v-number-input"), w = resolveComponent("v-btn"), T = resolveDirective("ripple");
-			return openBlock(), createElementBlock("div", _hoisted_1$6, [withDirectives(createVNode(b, {
-				modelValue: _.value,
-				"onUpdate:modelValue": g[0] ||= (e) => _.value = e,
+		return (w, T) => {
+			let k = resolveComponent("v-number-input"), N = resolveComponent("v-btn"), P = resolveDirective("ripple");
+			return openBlock(), createElementBlock("div", _hoisted_1$6, [withDirectives(createVNode(k, {
+				modelValue: E.value,
+				"onUpdate:modelValue": T[0] ||= (e) => E.value = e,
 				"control-variant": "stacked",
 				density: "compact",
 				"hide-details": "",
@@ -1300,7 +1373,7 @@ var _hoisted_1$17 = { class: "text-label-large ml-1" }, _hoisted_2$5 = { class:
 				readonly: e.readonly,
 				"single-line": "",
 				step: e.step,
-				"onUpdate:focused": y
+				"onUpdate:focused": O
 			}, null, 8, [
 				"modelValue",
 				"max",
@@ -1309,17 +1382,17 @@ var _hoisted_1$17 = { class: "text-label-large ml-1" }, _hoisted_2$5 = { class:
 				"readonly",
 				"step"
 			]), [[
-				T,
+				P,
 				void 0,
 				void 0,
 				{ stop: !0 }
-			]]), e.hasDelete ? (openBlock(), createBlock(w, {
+			]]), e.hasDelete ? (openBlock(), createBlock(N, {
 				key: 0,
 				class: "mx-2",
 				density: "compact",
 				icon: "mdi-minus",
 				variant: "text",
-				onClick: g[1] ||= withModifiers((e) => v("delete"), ["stop"])
+				onClick: T[1] ||= withModifiers((e) => D("delete"), ["stop"])
 			})) : createCommentVNode("", !0)]);
 		};
 	}
@@ -1340,24 +1413,24 @@ var _hoisted_1$17 = { class: "text-label-large ml-1" }, _hoisted_2$5 = { class:
 		modelModifiers: {}
 	}),
 	emits: /* @__PURE__ */ mergeModels(["delete"], ["update:modelValue"]),
-	setup(e, { emit: m }) {
-		let { t: g } = useI18n(), _ = useModel(e, "modelValue"), v = m, y = injectVersion(), w = computed(() => {
-			let m = [];
-			return pkgs[y.value].items[e.items].forEach(({ title: e, value: _ }) => {
-				m.push({
-					title: g(e),
-					value: _
+	setup(e, { emit: w }) {
+		let { t: T } = useI18n(), E = useModel(e, "modelValue"), D = w, O = injectVersion(), N = computed(() => {
+			let w = [];
+			return pkgs[O.value].items[e.items].forEach(({ title: e, value: E }) => {
+				w.push({
+					title: T(e),
+					value: E
 				});
-			}), m;
+			}), w;
 		});
-		return (m, g) => {
-			let y = resolveComponent("v-select"), b = resolveComponent("v-btn"), T = resolveDirective("ripple");
-			return openBlock(), createElementBlock("div", _hoisted_1$5, [withDirectives(createVNode(y, {
-				modelValue: _.value,
-				"onUpdate:modelValue": g[0] ||= (e) => _.value = e,
+		return (w, T) => {
+			let O = resolveComponent("v-select"), k = resolveComponent("v-btn"), P = resolveDirective("ripple");
+			return openBlock(), createElementBlock("div", _hoisted_1$5, [withDirectives(createVNode(O, {
+				modelValue: E.value,
+				"onUpdate:modelValue": T[0] ||= (e) => E.value = e,
 				density: "compact",
 				"hide-details": "",
-				items: w.value,
+				items: N.value,
 				readonly: e.readonly,
 				"single-line": ""
 			}, null, 8, [
@@ -1365,17 +1438,17 @@ var _hoisted_1$17 = { class: "text-label-large ml-1" }, _hoisted_2$5 = { class:
 				"items",
 				"readonly"
 			]), [[
-				T,
+				P,
 				void 0,
 				void 0,
 				{ stop: !0 }
-			]]), e.hasDelete ? (openBlock(), createBlock(b, {
+			]]), e.hasDelete ? (openBlock(), createBlock(k, {
 				key: 0,
 				class: "mx-2",
 				density: "compact",
 				icon: "mdi-minus",
 				variant: "text",
-				onClick: g[1] ||= withModifiers((e) => v("delete"), ["stop"])
+				onClick: T[1] ||= withModifiers((e) => D("delete"), ["stop"])
 			})) : createCommentVNode("", !0)]);
 		};
 	}
@@ -1386,22 +1459,22 @@ var _hoisted_1$17 = { class: "text-label-large ml-1" }, _hoisted_2$5 = { class:
 		title: {}
 	},
 	emits: ["x-click"],
-	setup(e, { emit: m }) {
-		let { backgroundColor2: g, highlightColor: _ } = useColor(), v = m, y = ref(!1), x = computed(() => ({
-			background: y.value ? _.value : g.value,
+	setup(e, { emit: w }) {
+		let { backgroundColor2: T, highlightColor: E } = useColor(), D = w, O = ref(!1), A = computed(() => ({
+			background: O.value ? E.value : T.value,
 			height: "48px",
 			marginBottom: "1px",
 			userSelect: "none"
 		}));
-		return (m, g) => {
-			let _ = resolveDirective("ripple");
+		return (w, T) => {
+			let E = resolveDirective("ripple");
 			return withDirectives((openBlock(), createElementBlock("div", {
 				class: "d-flex align-center cursor-pointer",
-				style: normalizeStyle(x.value),
-				onClick: g[0] ||= (m) => v("x-click", e.id),
-				onMouseout: g[1] ||= (e) => y.value = !1,
-				onMouseover: g[2] ||= (e) => y.value = !0
-			}, [createElementVNode("span", _hoisted_1$4, toDisplayString(e.title), 1)], 36)), [[_]]);
+				style: normalizeStyle(A.value),
+				onClick: T[0] ||= (w) => D("x-click", e.id),
+				onMouseout: T[1] ||= (e) => O.value = !1,
+				onMouseover: T[2] ||= (e) => O.value = !0
+			}, [createElementVNode("span", _hoisted_1$4, toDisplayString(e.title), 1)], 36)), [[E]]);
 		};
 	}
 }), _hoisted_1$3 = { key: 0 }, _hoisted_2 = {
@@ -1420,97 +1493,114 @@ var _hoisted_1$17 = { class: "text-label-large ml-1" }, _hoisted_2$5 = { class:
 	},
 	emits: ["update:modelValue", "update:open"],
 	setup(e) {
-		let { nameList: m } = useSystem(), g = useModel(e, "modelValue"), _ = useModel(e, "open"), v = injectSlotList(), b = (e) => {
-			g.value = e, _.value = !1;
+		let { nameList: w } = useSystem(), T = useModel(e, "modelValue"), E = useModel(e, "open"), D = injectSlotList(), k = (e) => {
+			T.value = e, E.value = !1;
 		};
-		return (e, g) => unref(v).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_1$3, [(openBlock(!0), createElementBlock(Fragment, null, renderList(unref(v), (e) => (openBlock(), createBlock(item_default, {
+		return (e, T) => unref(D).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_1$3, [(openBlock(!0), createElementBlock(Fragment, null, renderList(unref(D), (e) => (openBlock(), createBlock(item_default, {
 			key: e.id,
 			id: e.id,
 			title: e.name,
-			onXClick: b
-		}, null, 8, ["id", "title"]))), 128))])) : (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(unref(m)(["x-prop-tree.no", "x-prop-tree.slot"])), 1));
+			onXClick: k
+		}, null, 8, ["id", "title"]))), 128))])) : (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(unref(w)(["x-prop-tree.no", "x-prop-tree.slot"])), 1));
 	}
 }), _hoisted_1$2 = { class: "text-body-large" }, slotSelect_default = /* @__PURE__ */ defineComponent({
 	__name: "index",
-	props: {
+	props: /* @__PURE__ */ mergeModels({
+		hasDelete: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
 		modelValue: {},
 		modelModifiers: {}
-	},
-	emits: ["update:modelValue"],
-	setup(e) {
-		let { t: m } = useI18n(), g = useDisplay(), { sysBarAvail: _, nameList: v } = useSystem(), { backgroundColor1: y } = useColor(), C = useModel(e, "modelValue"), D = injectSlotList(), O = computed(() => {
+	}),
+	emits: /* @__PURE__ */ mergeModels(["delete"], ["update:modelValue"]),
+	setup(e, { emit: w }) {
+		let { t: T } = useI18n(), E = useDisplay(), { sysBarAvail: D, nameList: O } = useSystem(), { backgroundColor1: M } = useColor(), I = useModel(e, "modelValue"), L = w, R = injectSlotList(), B = computed(() => {
 			let e = "100%";
-			return g.mdAndUp.value && (e = "400px"), {
-				background: y.value,
+			return E.mdAndUp.value && (e = "400px"), {
+				background: M.value,
 				width: e,
 				height: "100%"
 			};
-		}), k = computed(() => {
+		}), U = computed(() => {
 			let e = 48;
-			return _.value && (e += 24), {
+			return D.value && (e += 24), {
 				position: "relative",
 				height: `calc(100% - ${e}px)`
 			};
-		}), j = computed(() => ({ height: "60px" })), P = computed(() => {
-			if (!C.value) return m("x-runtime-lib.notSet");
-			let e = D.value.find((e) => e.id === C.value);
-			return e ? e.name : m("x-runtime-lib.slotNotAvail");
-		}), { open: F } = useViewStack(`propTreeSlotSelectDlg${useId()}`);
+		}), W = computed(() => ({ height: "60px" })), K = computed(() => {
+			if (!I.value) return T("x-runtime-lib.notSet");
+			let e = R.value.find((e) => e.id === I.value);
+			return e ? e.name : T("x-runtime-lib.slotNotAvail");
+		}), { open: q } = useViewStack(`propTreeSlotSelectDlg${useId()}`);
 		return onUnmounted(() => {
-			F.value = !1;
-		}), (e, m) => {
-			let g = resolveComponent("v-btn"), y = resolveComponent("v-sheet"), b = resolveComponent("v-dialog");
-			return openBlock(), createBlock(b, {
-				modelValue: unref(F),
-				"onUpdate:modelValue": m[5] ||= (e) => isRef(F) ? F.value = e : null,
+			q.value = !1;
+		}), (w, T) => {
+			let E = resolveComponent("v-btn"), k = resolveComponent("v-sheet"), M = resolveComponent("v-dialog");
+			return openBlock(), createBlock(M, {
+				modelValue: unref(q),
+				"onUpdate:modelValue": T[6] ||= (e) => isRef(q) ? q.value = e : null,
 				fullscreen: "",
 				"no-click-animation": "",
 				persistent: "",
 				transition: "scroll-x-reverse-transition",
-				onKeydown: m[6] ||= withKeys(withModifiers((e) => F.value = !1, ["stop", "prevent"]), ["esc"])
+				onKeydown: T[7] ||= withKeys(withModifiers((e) => q.value = !1, ["stop", "prevent"]), ["esc"])
 			}, {
-				activator: withCtx(({ props: e }) => [createVNode(g, mergeProps(e, {
+				activator: withCtx(({ props: w }) => [createVNode(E, mergeProps(w, {
 					block: "",
-					density: "comfortable"
+					density: "comfortable",
+					readonly: e.readonly
 				}), {
-					default: withCtx(() => [createTextVNode(toDisplayString(P.value), 1)]),
+					default: withCtx(() => [createTextVNode(toDisplayString(K.value), 1)]),
 					_: 1
-				}, 16)]),
+				}, 16, ["readonly"]), e.hasDelete ? (openBlock(), createBlock(E, {
+					key: 0,
+					class: "mx-2",
+					density: "compact",
+					icon: "mdi-minus",
+					variant: "text",
+					onClick: T[0] ||= withModifiers((e) => L("delete"), ["stop"])
+				})) : createCommentVNode("", !0)]),
 				default: withCtx(() => [createElementVNode("div", {
 					class: "w-100 h-100 d-flex flex-row-reverse",
-					onClick: m[3] ||= withModifiers((e) => F.value = !1, ["self"]),
-					onContextmenu: m[4] ||= withModifiers((e) => F.value = !1, ["self", "prevent"])
+					onClick: T[4] ||= withModifiers((e) => q.value = !1, ["self"]),
+					onContextmenu: T[5] ||= withModifiers((e) => q.value = !1, ["self", "prevent"])
 				}, [createElementVNode("div", {
 					class: "elevation-2",
-					style: normalizeStyle(O.value)
+					style: normalizeStyle(B.value)
 				}, [
-					unref(_) ? (openBlock(), createBlock(y, {
+					unref(D) ? (openBlock(), createBlock(k, {
 						key: 0,
 						color: "transparent",
 						height: 24
 					})) : createCommentVNode("", !0),
-					createVNode(y, {
+					createVNode(k, {
 						class: "d-flex align-center px-3",
 						color: "transparent",
 						height: 48
 					}, {
-						default: withCtx(() => [createVNode(g, {
+						default: withCtx(() => [createVNode(E, {
 							density: "comfortable",
 							icon: "mdi-close",
 							variant: "text",
-							onClick: m[0] ||= (e) => F.value = !1
-						}), createElementVNode("span", _hoisted_1$2, toDisplayString(unref(v)(["x-prop-tree.select", "x-prop-tree.slot"])), 1)]),
+							onClick: T[1] ||= (e) => q.value = !1
+						}), createElementVNode("span", _hoisted_1$2, toDisplayString(unref(O)(["x-prop-tree.select", "x-prop-tree.slot"])), 1)]),
 						_: 1
 					}),
 					createElementVNode("div", {
 						class: "overflow-y-auto",
-						style: normalizeStyle(k.value)
+						style: normalizeStyle(U.value)
 					}, [createVNode(slotList_default, {
-						modelValue: C.value,
-						"onUpdate:modelValue": m[1] ||= (e) => C.value = e,
-						open: unref(F),
-						"onUpdate:open": m[2] ||= (e) => isRef(F) ? F.value = e : null
-					}, null, 8, ["modelValue", "open"]), createElementVNode("div", { style: normalizeStyle(j.value) }, null, 4)], 4)
+						modelValue: I.value,
+						"onUpdate:modelValue": T[2] ||= (e) => I.value = e,
+						open: unref(q),
+						"onUpdate:open": T[3] ||= (e) => isRef(q) ? q.value = e : null
+					}, null, 8, ["modelValue", "open"]), createElementVNode("div", { style: normalizeStyle(W.value) }, null, 4)], 4)
 				], 4)], 32)]),
 				_: 1
 			}, 8, ["modelValue"]);
@@ -1532,37 +1622,37 @@ var _hoisted_1$17 = { class: "text-label-large ml-1" }, _hoisted_2$5 = { class:
 		modelModifiers: {}
 	}),
 	emits: /* @__PURE__ */ mergeModels(["delete"], ["update:modelValue"]),
-	setup(e, { emit: m }) {
-		let { isMobile: g } = useSystem(), _ = useModel(e, "modelValue"), v = m, y = async (m) => {
-			if (!m || e.readonly || !g()) return;
-			let v = await openPromptDlg({
+	setup(e, { emit: w }) {
+		let { isMobile: T } = useSystem(), E = useModel(e, "modelValue"), D = w, O = async (w) => {
+			if (!w || e.readonly || !T()) return;
+			let D = await openPromptDlg({
 				title: "",
-				value: _.value
+				value: E.value
 			});
-			v !== void 0 && (_.value = v);
+			D !== void 0 && (E.value = D);
 		};
-		return (m, g) => {
-			let b = resolveComponent("v-text-field"), w = resolveComponent("v-btn"), T = resolveDirective("ripple");
-			return openBlock(), createElementBlock("div", _hoisted_1$1, [withDirectives(createVNode(b, {
-				modelValue: _.value,
-				"onUpdate:modelValue": g[0] ||= (e) => _.value = e,
+		return (w, T) => {
+			let k = resolveComponent("v-text-field"), N = resolveComponent("v-btn"), P = resolveDirective("ripple");
+			return openBlock(), createElementBlock("div", _hoisted_1$1, [withDirectives(createVNode(k, {
+				modelValue: E.value,
+				"onUpdate:modelValue": T[0] ||= (e) => E.value = e,
 				density: "compact",
 				"hide-details": "",
 				readonly: e.readonly,
 				"single-line": "",
-				"onUpdate:focused": y
+				"onUpdate:focused": O
 			}, null, 8, ["modelValue", "readonly"]), [[
-				T,
+				P,
 				void 0,
 				void 0,
 				{ stop: !0 }
-			]]), e.hasDelete ? (openBlock(), createBlock(w, {
+			]]), e.hasDelete ? (openBlock(), createBlock(N, {
 				key: 0,
 				class: "mx-2",
 				density: "compact",
 				icon: "mdi-minus",
 				variant: "text",
-				onClick: g[1] ||= withModifiers((e) => v("delete"), ["stop"])
+				onClick: T[1] ||= withModifiers((e) => D("delete"), ["stop"])
 			})) : createCommentVNode("", !0)]);
 		};
 	}
@@ -1582,142 +1672,179 @@ var _hoisted_1$17 = { class: "text-label-large ml-1" }, _hoisted_2$5 = { class:
 		modelModifiers: {}
 	}),
 	emits: /* @__PURE__ */ mergeModels(["delete"], ["update:modelValue"]),
-	setup(e, { emit: m }) {
-		let g = useModel(e, "modelValue"), _ = m;
-		return (m, v) => {
-			let y = resolveComponent("v-switch"), b = resolveComponent("v-btn");
-			return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(y, {
-				modelValue: g.value,
-				"onUpdate:modelValue": v[0] ||= (e) => g.value = e,
+	setup(e, { emit: w }) {
+		let T = useModel(e, "modelValue"), E = w;
+		return (w, D) => {
+			let O = resolveComponent("v-switch"), k = resolveComponent("v-btn");
+			return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(O, {
+				modelValue: T.value,
+				"onUpdate:modelValue": D[0] ||= (e) => T.value = e,
 				class: "ml-1",
 				color: "primary",
 				density: "compact",
 				"hide-details": "",
 				readonly: e.readonly
-			}, null, 8, ["modelValue", "readonly"]), e.hasDelete ? (openBlock(), createBlock(b, {
+			}, null, 8, ["modelValue", "readonly"]), e.hasDelete ? (openBlock(), createBlock(k, {
 				key: 0,
 				class: "mx-2",
 				density: "compact",
 				icon: "mdi-minus",
 				variant: "text",
-				onClick: v[1] ||= withModifiers((e) => _("delete"), ["stop"])
+				onClick: D[1] ||= withModifiers((e) => E("delete"), ["stop"])
 			})) : createCommentVNode("", !0)]);
 		};
 	}
 });
-function useUiAdaptSlotSelect(e) {
-	return { renderUiAdaptSlotSelect: (m, g, _, v, y) => g.ui === "selectAdaptSlot" ? h(adaptSlotSelect_default, {
-		modelValue: (() => getModelValue(m, g, _, e, v, y))(),
-		"onUpdate:modelValue": (b) => {
-			setModelValue(m, g, _, b, e, v, y);
-		}
-	}) : (console.assert(!1), h("div", "renderUiSlotSelect property ui must be selectAdaptSlot")) };
+function useUiAdaptSlotSelect() {
+	let e = injectChangeEvent();
+	return { renderUiAdaptSlotSelect: (w, T, E, D, O) => {
+		if (T.ui !== "selectAdaptSlot") throw Error("renderUiSlotSelect property ui must be selectAdaptSlot");
+		return h(adaptSlotSelect_default, {
+			modelValue: (() => getModelValue(w, T, E, D, O, e))(),
+			"onUpdate:modelValue": (k) => {
+				setModelValue(w, T, E, k, D, O, e);
+			},
+			hasDelete: D !== void 0 && !O,
+			onDelete: () => {
+				D === void 0 || O || (E.splice(D, 1), e(w.slice(0, -1), E));
+			},
+			readonly: T.readonly
+		});
+	} };
 }
-function useUiColorPicker(e) {
-	return { renderUiColorPicker: (m, g, _, v, y) => g.ui === "colorPicker" ? h(colorPicker_default, {
-		modelValue: (() => getModelValue(m, g, _, e, v, y))(),
-		"onUpdate:modelValue": (b) => {
-			setModelValue(m, g, _, b, e, v, y);
-		},
-		hasDelete: v !== void 0 && !y,
-		onDelete: () => {
-			v === void 0 || y || (_.splice(v, 1), e(m.slice(0, -1), _));
-		},
-		readonly: g.readonly
-	}) : (console.assert(!1), h("div", "renderUiColorPicker property ui must be colorPicker")) };
+function useUiColorPicker() {
+	let e = injectChangeEvent();
+	return { renderUiColorPicker: (w, T, E, D, O) => {
+		if (T.ui !== "colorPicker") throw Error("renderUiColorPicker property ui must be colorPicker");
+		return h(colorPicker_default, {
+			modelValue: (() => getModelValue(w, T, E, D, O, e))(),
+			"onUpdate:modelValue": (k) => {
+				setModelValue(w, T, E, k, D, O, e);
+			},
+			hasDelete: D !== void 0 && !O,
+			onDelete: () => {
+				D === void 0 || O || (E.splice(D, 1), e(w.slice(0, -1), E));
+			},
+			readonly: T.readonly
+		});
+	} };
 }
-function useUiCompSelect(e) {
-	return { renderUiCompSelect: (m, g, _, v, y) => g.ui === "selectComp" ? h(compSelect_default, {
-		modelValue: (() => getModelValue(m, g, _, e, v, y))(),
-		"onUpdate:modelValue": (b) => {
-			setModelValue(m, g, _, b, e, v, y);
-		}
-	}) : (console.assert(!1), h("div", "renderUiCompSelect property ui must be selectComp")) };
+function useUiCompSelect() {
+	let e = injectChangeEvent();
+	return { renderUiCompSelect: (w, T, E, D, O) => {
+		if (T.ui !== "selectComp") throw Error("renderUiCompSelect property ui must be selectComp");
+		return h(compSelect_default, {
+			modelValue: (() => getModelValue(w, T, E, D, O, e))(),
+			"onUpdate:modelValue": (k) => {
+				setModelValue(w, T, E, k, D, O, e);
+			},
+			hasDelete: D !== void 0 && !O,
+			onDelete: () => {
+				D === void 0 || O || (E.splice(D, 1), e(w.slice(0, -1), E));
+			},
+			readonly: T.readonly
+		});
+	} };
 }
-function useUiDummy(e) {
-	return { renderUiDummy: (m, g, _, v, y) => {
-		if (g.ui !== "dummy") {
-			console.assert(!1, "renderUiDummy property ui must be dummy");
-			return;
-		}
-		getModelValue(m, g, _, e, v, y);
+function useUiDummy() {
+	let e = injectChangeEvent();
+	return { renderUiDummy: (w, T, E, D, O) => {
+		if (T.ui !== "dummy") throw Error("renderUiDummy property ui must be dummy");
+		getModelValue(w, T, E, D, O, e);
 	} };
 }
-function useUiJsonEditor(e) {
-	return { renderUiJsonEditor: (m, g, _, v, y) => g.ui === "jsonEditor" ? h(jsonEditor_default, {
-		modelValue: (() => getModelValue(m, g, _, e, v, y) ?? "{}")(),
-		"onUpdate:modelValue": (b) => {
-			setModelValue(m, g, _, b, e, v, y);
-		}
-	}) : h("div", "renderUijsonEditor property ui must be jsonEditor") };
+function useUiJsonEditor() {
+	let e = injectChangeEvent();
+	return { renderUiJsonEditor: (w, T, E, D, O) => {
+		if (T.ui !== "jsonEditor") throw Error("renderUijsonEditor property ui must be jsonEditor");
+		return h(jsonEditor_default, {
+			modelValue: (() => getModelValue(w, T, E, D, O, e) ?? "{}")(),
+			"onUpdate:modelValue": (k) => {
+				setModelValue(w, T, E, k, D, O, e);
+			},
+			hasDelete: D !== void 0 && !O,
+			onDelete: () => {
+				D === void 0 || O || (E.splice(D, 1), e(w.slice(0, -1), E));
+			},
+			readonly: T.readonly
+		});
+	} };
 }
-function useUiMultiTypes(e) {
-	return { renderUiMultiTypes: (m, g, _, v, y) => g.ui === "multiTypes" ? h(multiTypes_default, {
-		modelValue: (() => getModelValue(m, g, _, e, v, y) ?? "")(),
-		"onUpdate:modelValue": (b) => {
-			setModelValue(m, g, _, b, e, v, y);
-		},
-		hasDelete: v !== void 0 && !y,
-		onDelete: () => {
-			v === void 0 || y || (_.splice(v, 1), e(m.slice(0, -1), _));
-		},
-		types: g.types
-	}) : (console.assert(!1), h("div", "renderUiMultiTypes property ui must be multiTypes")) };
+function useUiMultiTypes() {
+	let e = injectChangeEvent();
+	return { renderUiMultiTypes: (w, T, E, D, O) => {
+		if (T.ui !== "multiTypes") throw Error("renderUiMultiTypes property ui must be multiTypes");
+		return h(multiTypes_default, {
+			modelValue: (() => getModelValue(w, T, E, D, O, e) ?? "")(),
+			"onUpdate:modelValue": (k) => {
+				setModelValue(w, T, E, k, D, O, e);
+			},
+			hasDelete: D !== void 0 && !O,
+			onDelete: () => {
+				D === void 0 || O || (E.splice(D, 1), e(w.slice(0, -1), E));
+			},
+			types: T.types
+		});
+	} };
 }
-function useUiNumInput(e) {
-	return { renderUiNumInput: (m, g, _, v, y) => g.ui === "numInput" ? h(numInput_default, {
-		modelValue: (() => getModelValue(m, g, _, e, v, y))(),
-		"onUpdate:modelValue": (b) => {
-			setModelValue(m, g, _, b, e, v, y);
-		},
-		hasDelete: v !== void 0 && !y,
-		onDelete: () => {
-			v === void 0 || y || (_.splice(v, 1), e(m.slice(0, -1), _));
-		},
-		precision: g.precision,
-		min: g.min,
-		max: g.max,
-		step: g.step,
-		readonly: g.readonly
-	}) : (console.assert(!1), h("div", "renderUiNumInput property ui must be numInput")) };
+function useUiNumInput() {
+	let e = injectChangeEvent();
+	return { renderUiNumInput: (w, T, E, D, O) => {
+		if (T.ui !== "numInput") throw Error("renderUiNumInput property ui must be numInput");
+		return h(numInput_default, {
+			modelValue: (() => getModelValue(w, T, E, D, O, e))(),
+			"onUpdate:modelValue": (k) => {
+				setModelValue(w, T, E, k, D, O, e);
+			},
+			hasDelete: D !== void 0 && !O,
+			onDelete: () => {
+				D === void 0 || O || (E.splice(D, 1), e(w.slice(0, -1), E));
+			},
+			precision: T.precision,
+			min: T.min,
+			max: T.max,
+			step: T.step,
+			readonly: T.readonly
+		});
+	} };
 }
 var entry_default = /* @__PURE__ */ defineComponent({
 	__name: "index",
 	props: { minHeight: {} },
 	emits: ["menu"],
-	setup(e, { emit: m }) {
-		let { backgroundColor2: g, highlightColor: _ } = useColor(), v = m, y = ref(!1), x = computed(() => ({
-			background: y.value ? _.value : g.value,
+	setup(e, { emit: w }) {
+		let { backgroundColor2: T, highlightColor: E } = useColor(), D = w, O = ref(!1), A = computed(() => ({
+			background: O.value ? E.value : T.value,
 			minHeight: e.minHeight,
 			paddingRight: "4px",
 			marginBottom: "1px",
 			userSelect: "none"
-		})), S = (e) => {
-			v("menu", e.clientX, e.clientY);
+		})), j = (e) => {
+			D("menu", e.clientX, e.clientY);
 		};
-		return (e, m) => {
-			let g = resolveDirective("ripple");
+		return (e, w) => {
+			let T = resolveDirective("ripple");
 			return withDirectives((openBlock(), createElementBlock("div", {
 				class: "d-flex justify-space-between align-center cursor-pointer",
-				style: normalizeStyle(x.value),
-				onContextmenu: withModifiers(S, ["self", "prevent"]),
-				onMouseout: m[0] ||= (e) => y.value = !1,
-				onMouseover: m[1] ||= (e) => y.value = !0
-			}, [renderSlot(e.$slots, "default")], 36)), [[g]]);
+				style: normalizeStyle(A.value),
+				onContextmenu: withModifiers(j, ["self", "prevent"]),
+				onMouseout: w[0] ||= (e) => O.value = !1,
+				onMouseover: w[1] ||= (e) => O.value = !0
+			}, [renderSlot(e.$slots, "default")], 36)), [[T]]);
 		};
 	}
 });
-function useUiProperty(e, m, g) {
-	let { t: _ } = useI18n();
-	return { renderProperty: (v, y, b) => {
-		let x = v[v.length - 1], S = typeof x == "number" ? `[${x + 1}]` : _(y.name);
-		return isPropertyChanged(e.value, v) && (S += " *"), h(entry_default, {
-			minHeight: m.value,
-			onMenu: (e, m) => {
+function useUiProperty() {
+	let { t: e } = useI18n(), w = injectPropertyState();
+	return { renderProperty: (T, E, D) => {
+		let O = T[T.length - 1], k = typeof O == "number" ? `[${O + 1}]` : e(E.name);
+		return isPropertyChanged(w.value, T) && (k += " *"), h(entry_default, {
+			minHeight: "56px",
+			onMenu: (e, w) => {
 				eventBus.emit("propTreeMenu", {
 					x: e,
-					y: m,
-					keys: v
+					y: w,
+					keys: T
 				});
 			}
 		}, () => [h("span", {
@@ -1725,265 +1852,271 @@ function useUiProperty(e, m, g) {
 				marginLeft: "4px",
 				pointerEvents: "none"
 			},
-			innerHTML: S
-		}), h("div", { style: { width: g.value } }, b)]);
+			innerHTML: k
+		}), h("div", { style: { width: "200px" } }, D)]);
 	} };
 }
-function useUiSelect(e) {
-	return { renderUiSelect: (m, g, _, v, y) => g.ui === "select" ? h(select_default, {
-		modelValue: (() => getModelValue(m, g, _, e, v, y) ?? "")(),
-		"onUpdate:modelValue": (b) => {
-			setModelValue(m, g, _, b, e, v, y);
-		},
-		hasDelete: v !== void 0 && !y,
-		onDelete: () => {
-			v === void 0 || y || (_.splice(v, 1), e(m.slice(0, -1), _));
-		},
-		items: g.items,
-		readonly: g.readonly
-	}) : (console.assert(!1), h("div", "renderUiSelect property ui must be select")) };
-}
-function useUiSlotSelect(e) {
-	return { renderUiSlotSelect: (m, g, _, v, y) => g.ui === "selectSlot" ? h(slotSelect_default, {
-		modelValue: (() => getModelValue(m, g, _, e, v, y))(),
-		"onUpdate:modelValue": (b) => {
-			setModelValue(m, g, _, b, e, v, y);
-		}
-	}) : (console.assert(!1), h("div", "renderUiSlotSelect property ui must be selectSlot")) };
-}
-function useUiStrInput(e) {
-	return { renderUiStrInput: (m, g, _, v, y) => g.ui === "strInput" ? h(strInput_default, {
-		modelValue: (() => g.static ? g.value : getModelValue(m, g, _, e, v, y))(),
-		"onUpdate:modelValue": (b) => {
-			g.static || setModelValue(m, g, _, b, e, v, y);
-		},
-		hasDelete: v !== void 0 && !y,
-		onDelete: () => {
-			v === void 0 || y || (_.splice(v, 1), e(m.slice(0, -1), _));
-		},
-		readonly: g.static || g.readonly
-	}) : (console.assert(!1), h("div", "renderUiStrInput property ui must be strInput")) };
-}
-function useUiSwitch(e) {
-	return { renderUiSwitch: (m, g, _, v, y) => g.ui === "switch" ? h(switch_default, {
-		modelValue: (() => getModelValue(m, g, _, e, v, y) ?? !1)(),
-		"onUpdate:modelValue": (b) => {
-			setModelValue(m, g, _, b, e, v, y);
-		},
-		hasDelete: v !== void 0 && !y,
-		onDelete: () => {
-			v === void 0 || y || (_.splice(v, 1), e(m.slice(0, 1), _));
-		},
-		readonly: g.readonly
-	}) : (console.assert(!1), h("div", "renderUiSwitch property ui must be switch")) };
-}
-var propTree_default = /* @__PURE__ */ defineComponent({
-	__name: "index",
-	props: {
-		unique: {},
-		config: {},
-		object: {},
-		version: {},
-		type: {},
-		subtype: {}
-	},
-	emits: ["change"],
-	setup(m, { emit: g }) {
-		let { t: _ } = useI18n(), { backgroundColor1: v } = useColor(), b = m, x = g, S = ref("20px"), w = ref("56px"), T = ref("200px"), D = ref(b.version);
-		provideVersion(D), watch(() => b.version, () => {
-			D.value = b.version;
-		});
-		let k = ref(b.type);
-		watch(() => b.type, () => {
-			k.value = b.type;
-		});
-		let A = ref(b.subtype);
-		watch(() => b.subtype, () => {
-			A.value = b.subtype;
+function useUiSelect() {
+	let e = injectChangeEvent();
+	return { renderUiSelect: (w, T, E, D, O) => {
+		if (T.ui !== "select") throw Error("renderUiSelect property ui must be select");
+		return h(select_default, {
+			modelValue: (() => getModelValue(w, T, E, D, O, e) ?? "")(),
+			"onUpdate:modelValue": (k) => {
+				setModelValue(w, T, E, k, D, O, e);
+			},
+			hasDelete: D !== void 0 && !O,
+			onDelete: () => {
+				D === void 0 || O || (E.splice(D, 1), e(w.slice(0, -1), E));
+			},
+			items: T.items,
+			readonly: T.readonly
 		});
-		let j = ref(b.config);
-		provideConfig(j), watch(() => b.config, () => {
-			j.value = b.config;
+	} };
+}
+function useUiSlotSelect() {
+	let e = injectChangeEvent();
+	return { renderUiSlotSelect: (w, T, E, D, O) => {
+		if (T.ui !== "selectSlot") throw Error("renderUiSlotSelect property ui must be selectSlot");
+		return h(slotSelect_default, {
+			modelValue: (() => getModelValue(w, T, E, D, O, e))(),
+			"onUpdate:modelValue": (k) => {
+				setModelValue(w, T, E, k, D, O, e);
+			},
+			hasDelete: D !== void 0 && !O,
+			onDelete: () => {
+				D === void 0 || O || (E.splice(D, 1), e(w.slice(0, -1), E));
+			},
+			readonly: T.readonly
 		});
-		let M = ref(b.object);
-		provideObject(M), watch(() => b.object, () => {
-			M.value = b.object;
+	} };
+}
+function useUiStrInput() {
+	let e = injectChangeEvent();
+	return { renderUiStrInput: (w, T, E, D, O) => {
+		if (T.ui !== "strInput") throw Error("renderUiStrInput property ui must be strInput");
+		return h(strInput_default, {
+			modelValue: (() => T.static ? T.value : getModelValue(w, T, E, D, O, e))(),
+			"onUpdate:modelValue": (k) => {
+				T.static || setModelValue(w, T, E, k, D, O, e);
+			},
+			hasDelete: D !== void 0 && !O,
+			onDelete: () => {
+				D === void 0 || O || (E.splice(D, 1), e(w.slice(0, -1), E));
+			},
+			readonly: T.static || T.readonly
 		});
-		let N = ref({
-			collapse: !0,
-			children: {}
-		}), P = ref({
-			change: !1,
-			warning: !1,
-			children: {}
+	} };
+}
+function useUiSwitch() {
+	let e = injectChangeEvent();
+	return { renderUiSwitch: (w, T, E, D, O) => {
+		if (T.ui !== "switch") throw Error("renderUiSwitch property ui must be switch");
+		return h(switch_default, {
+			modelValue: (() => getModelValue(w, T, E, D, O, e) ?? !1)(),
+			"onUpdate:modelValue": (k) => {
+				setModelValue(w, T, E, k, D, O, e);
+			},
+			hasDelete: D !== void 0 && !O,
+			onDelete: () => {
+				D === void 0 || O || (E.splice(D, 1), e(w.slice(0, 1), E));
+			},
+			readonly: T.readonly
 		});
-		providePropertyState(P);
-		let F = (e, m) => {
-			rebuildPropertyState(P, b.config, b.object), x("change", e, m);
-		};
-		provideChangeEvent(F), watch([() => b.config, () => b.object], () => {
-			rebuildPropertyState(P, b.config, b.object, (e, m) => {
-				x("change", e, m);
-			});
-		}, { immediate: !0 }), useCompList(), useSlotList(), useAdaptSlotList(D, k, A);
-		let { renderProperty: I } = useUiProperty(P, w, T), { renderUiDummy: L } = useUiDummy(F), { renderUiStrInput: R } = useUiStrInput(F), { renderUiNumInput: z } = useUiNumInput(F), { renderUiSwitch: B } = useUiSwitch(F), { renderUiSelect: V } = useUiSelect(F), { renderUiColorPicker: H } = useUiColorPicker(F), { renderUiJsonEditor: U } = useUiJsonEditor(F), { renderUiMultiTypes: W } = useUiMultiTypes(F), { renderUiCompSelect: G } = useUiCompSelect(F), { renderUiSlotSelect: K } = useUiSlotSelect(F), { renderUiAdaptSlotSelect: q } = useUiAdaptSlotSelect(F), J = (m, g, _, v, y, b) => (m = cloneDeep_default(m), v === void 0 ? m.push(g.key) : (m.push(v), y && m.push(g.key)), g.ui ? g.array && !b ? Z(m, g, _, v, y) : Q(m, g, _, v, y) : g.array ? Y(m, g, _, v, y) : X(m, g, _, v, y)), Y = (e, m, g, v, y) => {
-			if (m.ui) return console.assert(!1), h("div", "renderBranchArray property ui must be invalid");
-			if (!m.array) return console.assert(!1), h("div", "renderBranchArray property array must be valid");
-			let b;
-			v !== void 0 && !y ? (g[v] instanceof Array || (g[v] = getPropertyDefault(m), F(e, g[m.key])), b = g[v]) : (g[m.key] instanceof Array || (g[m.key] = getPropertyDefault(m), F(e, g[m.key])), b = g[m.key]);
-			let x = _(m.name);
-			isCollapse(N, e) && isPropertyChanged(P.value, e) && (x += " *");
-			let C = h(title_default, {
-				title: x,
-				collapse: isCollapse(N, e),
+	} };
+}
+var indent = "20px", main_default = /* @__PURE__ */ defineComponent({
+	__name: "main",
+	setup(w) {
+		let { t: T } = useI18n(), { backgroundColor1: E } = useColor(), D = injectConfig(), k = injectObject(), A = injectCollapseState(), j = injectPropertyState(), N = injectChangeEvent();
+		useCompList(), useSlotList(), useAdaptSlotList();
+		let { renderProperty: P } = useUiProperty(), { renderUiDummy: I } = useUiDummy(), { renderUiStrInput: R } = useUiStrInput(), { renderUiNumInput: z } = useUiNumInput(), { renderUiSwitch: B } = useUiSwitch(), { renderUiSelect: V } = useUiSelect(), { renderUiColorPicker: H } = useUiColorPicker(), { renderUiJsonEditor: U } = useUiJsonEditor(), { renderUiMultiTypes: W } = useUiMultiTypes(), { renderUiCompSelect: G } = useUiCompSelect(), { renderUiSlotSelect: K } = useUiSlotSelect(), { renderUiAdaptSlotSelect: q } = useUiAdaptSlotSelect(), J = (w, T, E, D, O, k) => (w = cloneDeep_default(w), D === void 0 ? w.push(T.key) : (w.push(D), O && w.push(T.key)), T.ui ? T.array && !k ? Z(w, T, E, D, O) : Q(w, T, E, D, O) : T.array ? Y(w, T, E, D, O) : X(w, T, E, D, O)), Y = (e, w, E, D, O) => {
+			if (w.ui) throw Error("renderBranchArray property ui must be invalid");
+			if (!w.array) throw Error("renderBranchArray property array must be valid");
+			let k = ensureArrayValue(e, w, E, D, O, N), M = T(w.name);
+			isCollapse(A, e) && isPropertyChanged(j.value, e) && (M += " *");
+			let P = h(title_default, {
+				title: M,
+				collapse: isCollapse(A, e),
 				hasCreate: !0,
-				onCollapse: (m) => {
-					setCollapse(N, e, m);
+				onCollapse: (w) => {
+					setCollapse(A, e, w);
 				},
-				onMenu: (m, g) => {
+				onMenu: (w, T) => {
 					eventBus.emit("propTreeMenu", {
-						x: m,
-						y: g,
+						x: w,
+						y: T,
 						keys: e
 					});
 				},
 				onCreate: () => {
-					b.push({}), F(e, b);
+					k.push({}), N(e, k);
 				}
-			}), w = h("div", { style: { paddingLeft: S.value } }, (() => {
-				let g = [];
-				for (let _ = 0; _ < b.length; _++) {
-					let v = [...e, _], y = `[${_ + 1}]`;
-					isCollapse(N, [...e, _]) && isPropertyChanged(P.value, v) && (y += " *");
-					let x = h(title_default, {
-						title: y,
-						collapse: isCollapse(N, [...e, _]),
+			}), F = h("div", { style: { paddingLeft: indent } }, (() => {
+				let T = [];
+				for (let E = 0; E < k.length; E++) {
+					let D = [...e, E], O = `[${E + 1}]`;
+					isCollapse(A, [...e, E]) && isPropertyChanged(j.value, D) && (O += " *");
+					let M = h(title_default, {
+						title: O,
+						collapse: isCollapse(A, [...e, E]),
 						hasDelete: !0,
-						index: _,
-						onCollapse: (m) => {
-							setCollapse(N, [...e, _], m);
+						index: E,
+						onCollapse: (w) => {
+							setCollapse(A, [...e, E], w);
 						},
-						onMenu: (e, m) => {
+						onMenu: (e, w) => {
 							eventBus.emit("propTreeMenu", {
 								x: e,
-								y: m,
-								keys: v
+								y: w,
+								keys: D
 							});
 						},
-						onDelete: (m) => {
-							b.splice(m, 1), F(e, b);
+						onDelete: (w) => {
+							k.splice(w, 1), N(e, k);
 						}
 					});
-					g.push(x);
-					let C = h("div", { style: { paddingLeft: S.value } }, (() => {
-						let g = [];
-						for (let v of m.children) {
-							let m = J(e, v, b[_], _, !0);
-							g.push(m);
-						}
-						return g;
+					T.push(M);
+					let P = h("div", { style: { paddingLeft: indent } }, (() => {
+						let T = [];
+						for (let D of w.children) T.push(J(e, D, k[E], E, !0));
+						return T;
 					})());
-					isCollapse(N, [...e, _]) || g.push(C);
+					isCollapse(A, [...e, E]) || T.push(P);
 				}
-				return g;
+				return T;
 			})());
 			return h("div", { style: { marginBottom: "1px" } }, (() => {
-				let m = [];
-				return m.push(C), isCollapse(N, e) || m.push(w), m;
+				let w = [];
+				return w.push(P), isCollapse(A, e) || w.push(F), w;
 			})());
-		}, X = (e, m, g, v, y) => {
-			if (m.ui) return console.assert(!1), h("div", "renderBranchScalar property ui must be invalid");
-			if (m.array) return console.assert(!1), h("div", "renderBranchScalar property array must be invalid");
-			let b = _(m.name);
-			isCollapse(N, e) && isPropertyChanged(P.value, e) && (b += " *");
-			let x = h(title_default, {
-				title: b,
-				collapse: isCollapse(N, e),
-				hasDelete: v !== void 0 && !y,
-				onCollapse: (m) => {
-					setCollapse(N, e, m);
+		}, X = (e, w, E, D, O) => {
+			if (w.ui) throw Error("renderBranchScalar property ui must be invalid");
+			if (w.array) throw Error("renderBranchScalar property array must be invalid");
+			let k = T(w.name);
+			isCollapse(A, e) && isPropertyChanged(j.value, e) && (k += " *");
+			let M = h(title_default, {
+				title: k,
+				collapse: isCollapse(A, e),
+				hasDelete: D !== void 0 && !O,
+				onCollapse: (w) => {
+					setCollapse(A, e, w);
 				},
-				onMenu: (m, g) => {
+				onMenu: (w, T) => {
 					eventBus.emit("propTreeMenu", {
-						x: m,
-						y: g,
+						x: w,
+						y: T,
 						keys: e
 					});
 				},
 				onDelete: () => {
-					v === void 0 || y || (g.splice(v, 1), F(e.slice(0, -1), g));
-				}
-			}), C = h("div", { style: { paddingLeft: S.value } }, (() => {
-				let _ = [];
-				for (let v of m.children) {
-					let y = J(e, v, (() => (typeof g[m.key] != "object" && (g[m.key] = {}, F(e, g[m.key])), g[m.key]))(), void 0, !1);
-					_.push(y);
+					D === void 0 || O || (E.splice(D, 1), N(e.slice(0, -1), E));
 				}
-				return _;
+			}), P = h("div", { style: { paddingLeft: indent } }, (() => {
+				let T = [];
+				for (let D of w.children) T.push(J(e, D, (() => (typeof E[w.key] != "object" && (E[w.key] = {}, N(e, E[w.key])), E[w.key]))(), void 0, !1));
+				return T;
 			})());
 			return h("div", { style: { marginBottom: "1px" } }, (() => {
-				let m = [];
-				return m.push(x), isCollapse(N, e) || m.push(C), m;
+				let w = [];
+				return w.push(M), isCollapse(A, e) || w.push(P), w;
 			})());
-		}, Z = (e, m, g, v, y) => {
-			if (!m.ui) return console.assert(!1), h("div", "renderLeafArray property ui must be valid");
-			if (!m.array) return console.assert(!1), h("div", "renderLeafArray property array must be valid");
-			let b;
-			v !== void 0 && !y ? (g[v] instanceof Array || (g[v] = getPropertyDefault(m), F(e, g[v])), b = g[v]) : (g[m.key] instanceof Array || (g[m.key] = getPropertyDefault(m), F(e, g[m.key])), b = g[m.key]);
-			let x = _(m.name);
-			isCollapse(N, e) && isPropertyChanged(P.value, e) && (x += " *");
-			let C = h(title_default, {
-				title: x,
-				collapse: isCollapse(N, e),
+		}, Z = (e, w, E, D, O) => {
+			if (!w.ui) throw Error("renderLeafArray property ui must be valid");
+			if (!w.array) throw Error("renderLeafArray property array must be valid");
+			let k = ensureArrayValue(e, w, E, D, O, N), M = T(w.name);
+			isCollapse(A, e) && isPropertyChanged(j.value, e) && (M += " *");
+			let P = h(title_default, {
+				title: M,
+				collapse: isCollapse(A, e),
 				hasCreate: !0,
-				onCollapse: (m) => {
-					setCollapse(N, e, m);
+				onCollapse: (w) => {
+					setCollapse(A, e, w);
 				},
-				onMenu: (m, g) => {
+				onMenu: (w, T) => {
 					eventBus.emit("propTreeMenu", {
-						x: m,
-						y: g,
+						x: w,
+						y: T,
 						keys: e
 					});
 				},
 				onCreate: () => {
-					b.push(getPropertyDefault(m, !0)), F(e, b);
+					k.push(getPropertyDefault(w)), N(e, k);
 				}
-			}), w = h("div", { style: { paddingLeft: S.value } }, (() => {
-				let g = [];
-				for (let _ = 0; _ < b.length; _++) {
-					let v = J(e, m, b, _, !1, !0);
-					g.push(v);
-				}
-				return g;
+			}), F = h("div", { style: { paddingLeft: indent } }, (() => {
+				let T = [];
+				for (let E = 0; E < k.length; E++) T.push(J(e, w, k, E, !1, !0));
+				return T;
 			})());
 			return h("div", { style: { marginBottom: "1px" } }, (() => {
-				let m = [];
-				return m.push(C), isCollapse(N, e) || m.push(w), m;
+				let w = [];
+				return w.push(P), isCollapse(A, e) || w.push(F), w;
 			})());
-		}, Q = (e, m, g, _, v) => {
-			if (!m.ui) return console.assert(!1), h("div", "renderLeafScalar property ui must be valid");
-			let y;
-			return m.ui === "dummy" ? y = L(e, m, g, _, v) : m.ui === "strInput" ? y = R(e, m, g, _, v) : m.ui === "numInput" ? y = z(e, m, g, _, v) : m.ui === "switch" ? y = B(e, m, g, _, v) : m.ui === "select" ? y = V(e, m, g, _, v) : m.ui === "colorPicker" ? y = H(e, m, g, _, v) : m.ui === "jsonEditor" ? y = U(e, m, g, _, v) : m.ui === "multiTypes" ? y = W(e, m, g, _, v) : m.ui === "selectComp" ? y = G(e, m, g, _, v) : m.ui === "selectSlot" ? y = K(e, m, g, _, v) : m.ui === "selectAdaptSlot" ? y = q(e, m, g, _, v) : console.assert(!1, "renderLeafScalar not implemented"), y ? I(e, m, y) : h("div");
+		}, Q = (e, w, T, E, D) => {
+			if (!w.ui) throw Error("renderLeafScalar property ui must be valid");
+			let O;
+			return w.ui === "dummy" ? O = I(e, w, T, E, D) : w.ui === "strInput" ? O = R(e, w, T, E, D) : w.ui === "numInput" ? O = z(e, w, T, E, D) : w.ui === "switch" ? O = B(e, w, T, E, D) : w.ui === "select" ? O = V(e, w, T, E, D) : w.ui === "colorPicker" ? O = H(e, w, T, E, D) : w.ui === "jsonEditor" ? O = U(e, w, T, E, D) : w.ui === "multiTypes" ? O = W(e, w, T, E, D) : w.ui === "selectComp" ? O = G(e, w, T, E, D) : w.ui === "selectSlot" ? O = K(e, w, T, E, D) : w.ui === "selectAdaptSlot" ? O = q(e, w, T, E, D) : console.assert(!1, "renderLeafScalar not implemented"), O ? P(e, w, O) : h("div");
 		}, $ = () => h("div", {
 			class: "text-body-medium",
-			style: { background: v.value }
+			style: { background: E.value }
 		}, (() => {
 			let e = [];
-			if (b.unique && b.config.length > 0 && b.object) for (let m of b.config) {
-				let g = J([], m, b.object, void 0, !1);
-				e.push(g);
-			}
+			if (D.value.length > 0 && k.value) for (let w of D.value) e.push(J([], w, k.value, void 0, !1));
 			return e;
 		})());
-		return (e, m) => (openBlock(), createElementBlock(Fragment, null, [createVNode($), createVNode(menu_default)], 64));
+		return (e, w) => (openBlock(), createElementBlock(Fragment, null, [createVNode($), createVNode(menu_default)], 64));
+	}
+}), propTree_default = /* @__PURE__ */ defineComponent({
+	__name: "index",
+	props: {
+		config: {},
+		object: {},
+		version: {},
+		type: {},
+		subtype: {}
+	},
+	emits: ["change"],
+	setup(e, { emit: w }) {
+		let T = w, E = ref([]);
+		provideConfig(E), watchEffect(() => {
+			E.value = e.config;
+		});
+		let D = ref();
+		provideObject(D), watchEffect(() => {
+			D.value = e.object;
+		});
+		let O = ref("");
+		provideVersion(O), watchEffect(() => {
+			O.value = e.version;
+		});
+		let k = ref(e.type);
+		provideType(k), watchEffect(() => {
+			k.value = e.type;
+		});
+		let j = ref("");
+		provideSubtype(j), watchEffect(() => {
+			j.value = e.subtype;
+		}), provideCollapseState(ref({
+			collapse: !0,
+			children: {}
+		}));
+		let M = ref({
+			change: !1,
+			warning: !1,
+			children: {}
+		});
+		return providePropertyState(M), provideChangeEvent((w, E) => {
+			rebuildPropertyState(M, e.config, e.object), T("change", w, E);
+		}), watch([() => e.config, () => e.object], () => {
+			rebuildPropertyState(M, e.config, e.object);
+		}, { immediate: !0 }), (e, w) => (openBlock(), createBlock(main_default));
 	}
 }), install = (e) => {
 	e.component("XPropTree", propTree_default);
-}, __rolldown_dynamic_import_helper_default = (e, m, g) => {
-	let _ = m.lastIndexOf("?"), v = e[_ === -1 || _ < m.lastIndexOf("/") ? m : m.slice(0, _)];
-	return v ? typeof v == "function" ? v() : Promise.resolve(v) : new Promise((e, _) => {
-		(typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(_.bind(null, /* @__PURE__ */ Error("Unknown variable dynamic import: " + m + (m.split("/").length === g ? "" : ". Note that variables only represent file names one level deep."))));
+}, __rolldown_dynamic_import_helper_default = (e, w, T) => {
+	let E = w.lastIndexOf("?"), D = e[E === -1 || E < w.lastIndexOf("/") ? w : w.slice(0, E)];
+	return D ? typeof D == "function" ? D() : Promise.resolve(D) : new Promise((e, E) => {
+		(typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(E.bind(null, /* @__PURE__ */ Error("Unknown variable dynamic import: " + w + (w.split("/").length === T ? "" : ". Note that variables only represent file names one level deep."))));
 	});
 };
 async function loadLocaleMessagePropTree(e) {