x-prop-tree 0.7.14 → 0.7.16

package/dist/index.js

@@ -1,13 +1,17 @@
-import { provide as ce, inject as de, defineComponent as R, ref as O, computed as K, resolveComponent as U, createBlock as B, openBlock as C, unref as L, isRef as ve, withCtx as J, createVNode as D, createElementBlock as E, Fragment as Ve, renderList as Be, createTextVNode as Ce, toDisplayString as W, resolveDirective as le, withDirectives as ee, withModifiers as X, normalizeStyle as I, createElementVNode as F, createCommentVNode as G, renderSlot as ft, h as y, mergeModels as Y, useModel as z, useId as we, onUnmounted as De, withKeys as Ke, mergeProps as be, watchEffect as Ne, watch as ue, useTemplateRef as Je, reactive as mt, onMounted as vt, onBeforeUnmount as pt } from "vue";
-import { useI18n as te } from "vue-i18n";
-import { useViewStack as xe, useColor as ie, eventBus as re, useSystem as pe, openPromptDlg as gt, openNumberDlg as Re, injectDark as ht, injectLocale as yt } from "x-essential-lib";
-import { c as Ee, i as Se, r as He, v as kt, d as _t } from "./vendor.f0ug048x.js";
-import { getPropertyDefault as q, pkgs as Fe, parsePixelStr as Vt, parsePercentStr as Ct } from "x-runtime-lib";
-import { globalState as xt } from "x-state-lib";
-import { useDisplay as St } from "vuetify";
-import { XBlockly as Ut } from "x-block-lib";
-const ke = (t, s) => {
-  let n = { key: "", name: "", children: t };
+import { provide as re, inject as ae, defineComponent as J, ref as O, computed as A, resolveComponent as C, createBlock as T, openBlock as _, unref as D, isRef as ue, withCtx as K, createVNode as b, createElementBlock as q, Fragment as fe, renderList as Le, createTextVNode as ye, toDisplayString as F, resolveDirective as ee, withDirectives as Z, withModifiers as X, normalizeStyle as W, createElementVNode as B, createCommentVNode as G, useModel as z, useId as Ce, onUnmounted as Ue, withKeys as Te, mergeProps as $e, useTemplateRef as Re, watch as ce, mergeModels as Q, watchEffect as qe, h, renderSlot as ht, reactive as _t, onMounted as kt, onBeforeUnmount as xt } from "vue";
+import { useI18n as j } from "vue-i18n";
+import { useViewStack as he, useColor as te, eventBus as de, useSystem as ve, injectDark as Vt, injectLocale as St, openNumberDlg as Ee, openPromptDlg as Ct } from "x-essential-lib";
+import { c as He, i as Me, r as we, v as Xe, d as Ut } from "./vendor.f0ug048x.js";
+import { getPropertyDefault as H, pkgs as Fe, parsePixelStr as $t, parsePercentStr as Mt } from "x-runtime-lib";
+import { globalState as wt } from "x-state-lib";
+import { useDisplay as ze } from "vuetify";
+import { XBlockly as bt } from "x-block-lib";
+const Ve = (t, s) => {
+  let n = {
+    key: "",
+    name: "",
+    children: t
+  };
   return s.forEach((e) => {
     if (typeof e != "number") {
       if (!n) {
@@ -15,13 +19,16 @@ const ke = (t, s) => {
         return;
       }
       if (n.ui) {
-        console.assert(!1, `unpkgProp property ui must be invalid keys=${s}`);
+        console.assert(
+          !1,
+          `unpkgProp property ui must be invalid keys=${s}`
+        );
         return;
       }
       n = n.children.find((l) => l.key === e);
     }
   }), n;
-}, me = (t, s) => {
+}, ge = (t, s) => {
   let n = t;
   return s.forEach((e) => {
     if (!n) {
@@ -30,7 +37,36 @@ const ke = (t, s) => {
     }
     n = n[e];
   }), n;
-}, Oe = (t) => !(t instanceof Array), Me = (t) => t instanceof Array, $t = (t, s) => {
+}, ne = (t, s, n, e, l, o) => {
+  if (l !== void 0)
+    if (o) {
+      if (n[s.key] === void 0) {
+        const i = H(s);
+        i !== void 0 && (n[s.key] = i, e(t, n[s.key]));
+      }
+      return n[s.key];
+    } else {
+      if (n[l] === void 0) {
+        const i = H(s, !0);
+        i !== void 0 && (n[l] = i, e(t, n[l]));
+      }
+      return n[l];
+    }
+  else {
+    if (n[s.key] === void 0) {
+      const i = H(s);
+      i !== void 0 && (n[s.key] = i, e(t, n[s.key]));
+    }
+    return n[s.key];
+  }
+}, se = (t, s, n, e, l, o, i) => {
+  if (o !== void 0)
+    i ? e !== n[s.key] && (n[s.key] = e, l(t, n[s.key])) : e !== n[o] && (n[o] = e, l(t, n[o]));
+  else {
+    let u = e;
+    (s.ui === "switch" || s.ui === "select" || s.ui === "colorPicker" || s.ui === "multiTypes" || s.ui === "compSelect") && (e || (u = void 0)), u !== n[s.key] && (n[s.key] = u, l(t, n[s.key]));
+  }
+}, Ke = (t) => !(t instanceof Array), Ae = (t) => t instanceof Array, Pt = (t, s) => {
   const n = (e, l) => {
     if (e.ui !== l.ui || e.array !== l.array)
       return !1;
@@ -44,10 +80,10 @@ const ke = (t, s) => {
     return !0;
   };
   return n(t, s);
-}, Ae = (t) => !(t instanceof Array), Ue = (t) => t instanceof Array, Pt = [
+}, Ne = (t) => !(t instanceof Array), be = (t) => t instanceof Array, Dt = [
   ["basic", "id"],
   ["basic", "name"]
-], Mt = (t) => Pt.find((s) => Se(t, s)), $e = (t, s, n, e, l, o, i) => (t = Ee(t), o !== void 0 ? (t.push(o), i && t.push(s.key)) : t.push(s.key), Mt(t) ? (e.change = !1, e.change) : s.ui ? s.array && e.children && Ue(e.children) ? bt(
+], At = (t) => Dt.find((s) => Me(t, s)), Pe = (t, s, n, e, l, o, i) => (t = He(t), o !== void 0 ? (t.push(o), i && t.push(s.key)) : t.push(s.key), At(t) ? (e.change = !1, e.change) : s.ui ? s.array && e.children && be(e.children) ? Nt(
   t,
   s,
   n,
@@ -55,7 +91,13 @@ const ke = (t, s) => {
   l,
   o,
   i
-) : At(s, n, e, o, i) : s.array ? wt(
+) : Ot(
+  s,
+  n,
+  e,
+  o,
+  i
+) : s.array ? Lt(
   t,
   s,
   n,
@@ -63,7 +105,7 @@ const ke = (t, s) => {
   l,
   o,
   i
-) : Dt(
+) : Tt(
   t,
   s,
   n,
@@ -71,79 +113,99 @@ const ke = (t, s) => {
   l,
   o,
   i
-)), wt = (t, s, n, e, l, o, i) => {
+)), Lt = (t, s, n, e, l, o, i) => {
   if (s.ui)
     return console.assert(!1, "execPropertyBranchArray property ui must be invalid"), !1;
   if (!s.array)
-    return console.assert(!1, "execPropertyBranchArray property array must be valid"), !1;
-  if (!e.children || !Ue(e.children))
-    return console.assert(!1, "execPropertyBranchArray state children must be array"), !1;
-  let r;
-  o !== void 0 && !i ? (n[o] instanceof Array || (n[o] = q(s), l?.(t, n[o])), r = n[o]) : (n[s.key] instanceof Array || (n[s.key] = q(s), l?.(t, n[s.key])), r = n[s.key]), e.change = !1;
-  for (let u = 0; u < r.length; u++) {
+    return console.assert(
+      !1,
+      "execPropertyBranchArray property array must be valid"
+    ), !1;
+  if (!e.children || !be(e.children))
+    return console.assert(
+      !1,
+      "execPropertyBranchArray state children must be array"
+    ), !1;
+  let u;
+  o !== void 0 && !i ? (n[o] instanceof Array || (n[o] = H(s), l?.(t, n[o])), u = n[o]) : (n[s.key] instanceof Array || (n[s.key] = H(s), l?.(t, n[s.key])), u = n[s.key]), e.change = !1;
+  for (let r = 0; r < u.length; r++) {
     e.children.push({
       change: !1,
       children: {}
     });
-    const a = e.children[u];
-    s.children.forEach((f) => {
-      if (!a.children || !Ae(a.children)) {
+    const a = e.children[r];
+    s.children.forEach((m) => {
+      if (!a.children || !Ne(a.children)) {
         console.assert(!1);
         return;
       }
-      a.children[f.key] = {
+      a.children[m.key] = {
         change: !1,
-        children: f.array ? [] : {}
-      }, $e(
+        children: m.array ? [] : {}
+      }, Pe(
         t,
-        f,
-        r[u],
-        a.children[f.key],
+        m,
+        u[r],
+        a.children[m.key],
         l,
-        u,
+        r,
         !0
       ) && (a.change = !0), a.change && (e.change = !0);
     });
   }
-  return e.change || (e.change = !Se(r, q(s))), e.change;
-}, Dt = (t, s, n, e, l, o, i) => {
+  return e.change || (e.change = !Me(u, H(s))), e.change;
+}, Tt = (t, s, n, e, l, o, i) => {
   if (s.ui)
-    return console.assert(!1, "execPropertyBranchScalar property ui must be invalid"), !1;
+    return console.assert(
+      !1,
+      "execPropertyBranchScalar property ui must be invalid"
+    ), !1;
   if (s.array)
-    return console.assert(!1, "execPropertyBranchScalar property array must be invalid"), !1;
-  if (!e.children || !Ae(e.children))
+    return console.assert(
+      !1,
+      "execPropertyBranchScalar property array must be invalid"
+    ), !1;
+  if (!e.children || !Ne(e.children))
     return console.assert(!1, "execPropertyBranchScalar state children must be map"), !1;
-  let r;
-  o !== void 0 && !i ? (n[o] || (n[o] = {}), r = n[o]) : (n[s.key] || (n[s.key] = {}), r = n[s.key]), e.change = !1;
-  for (let u = 0; u < s.children.length; u++) {
-    const a = s.children[u];
+  let u;
+  o !== void 0 && !i ? (n[o] || (n[o] = {}), u = n[o]) : (n[s.key] || (n[s.key] = {}), u = n[s.key]), e.change = !1;
+  for (let r = 0; r < s.children.length; r++) {
+    const a = s.children[r];
     e.children[a.key] = {
       change: !1,
       children: a.array ? [] : {}
-    }, $e(t, a, r, e.children[a.key], l) && (e.change = !0);
+    }, Pe(t, a, u, e.children[a.key], l) && (e.change = !0);
   }
   return e.change;
-}, bt = (t, s, n, e, l, o, i) => {
+}, Nt = (t, s, n, e, l, o, i) => {
   if (!s.ui)
     return console.assert(!1, "execPropertyLeafArray property ui must be valid"), !1;
   if (!s.array)
     return console.assert(!1, "execPropertyLeafArray property aray must be valid"), !1;
-  if (!e.children || !Ue(e.children))
+  if (!e.children || !be(e.children))
     return console.assert(!1, "execPropertyLeafArray state children must be array"), !1;
-  let r;
-  o !== void 0 && !i ? (n[o] instanceof Array || (n[o] = q(s), l?.(t, n[o])), r = n[o]) : (n[s.key] instanceof Array || (n[s.key] = q(s), l?.(t, n[s.key])), r = n[s.key]), e.change = !1;
-  for (let u = 0; u < r.length; u++)
-    e.children[u] = {
+  let u;
+  o !== void 0 && !i ? (n[o] instanceof Array || (n[o] = H(s), l?.(t, n[o])), u = n[o]) : (n[s.key] instanceof Array || (n[s.key] = H(s), l?.(t, n[s.key])), u = n[s.key]), e.change = !1;
+  for (let r = 0; r < u.length; r++)
+    e.children[r] = {
       change: !1,
       children: {}
-    }, $e(t, s, r, e.children[u], l, u, !1) && (e.change = !0);
-  return e.change || (e.change = !Se(r, q(s))), e.change;
-}, At = (t, s, n, e, l) => {
+    }, Pe(
+      t,
+      s,
+      u,
+      e.children[r],
+      l,
+      r,
+      !1
+    ) && (e.change = !0);
+  return e.change || (e.change = !Me(u, H(s))), e.change;
+}, Ot = (t, s, n, e, l) => {
   if (!t.ui)
     return console.assert(!1, "execPropertyLeafScalar property ui must be valid"), !1;
   let o;
-  return e !== void 0 && !l ? o = s[e] : o = s[t.key], n.change = !Se(o, q(t, !0)), n.change;
-}, qe = (t, s, n, e) => {
+  return e !== void 0 && !l ? o = s[e] : o = s[t.key], n.change = !Me(o, H(t, !0)), n.change;
+}, Je = (t, s, n, e) => {
   if (s.length <= 0 || !n) {
     t.value = {};
     return;
@@ -153,162 +215,171 @@ const ke = (t, s) => {
     l[o.key] = {
       change: !1,
       children: o.array ? [] : {}
-    }, $e([], o, n, l[o.key], e);
+    }, Pe([], o, n, l[o.key], e);
   }), t.value = l;
-}, ae = (t, s) => {
-  let n = { change: !1, children: t };
+}, me = (t, s) => {
+  let n = {
+    change: !1,
+    children: t
+  };
   return s.forEach((e) => {
     if (!n)
       return console.assert(!1, `isPropChanged state must be valid keys=${s}`), !1;
     if (!n.children)
       return console.assert(!1, `isPropChanged state must be valid keys=${s}`), !1;
-    typeof e == "string" ? Ae(n.children) && (n = n.children[e]) : Ue(n.children) && (n = n.children[e]);
+    typeof e == "string" ? Ne(n.children) && (n = n.children[e]) : be(n.children) && (n = n.children[e]);
   }), n?.change ?? !1;
-}, Xe = Symbol(), ze = Symbol(), Ge = Symbol(), Ye = Symbol(), We = Symbol(), Qe = Symbol();
-function Tt(t) {
-  ce(Xe, t);
-}
-function Te() {
-  return de(Xe);
-}
-function Lt(t) {
-  ce(ze, t);
-}
-function Nt() {
-  return de(ze);
-}
-function Ot(t) {
-  ce(Ge, t);
+}, Ge = Symbol(), Ye = Symbol(), We = Symbol(), Qe = Symbol(), Ze = Symbol(), je = Symbol(), Ie = Symbol();
+function Bt(t) {
+  re(Ge, t);
 }
-function qt() {
-  return de(Ge);
+function Oe() {
+  return ae(Ge);
 }
-function Bt(t) {
-  ce(Ye, t);
+function qt(t) {
+  re(Ye, t);
 }
 function Kt() {
-  return de(Ye);
+  return ae(Ye);
 }
 function Jt(t) {
-  ce(We, t);
+  re(We, t);
 }
 function Rt() {
-  return de(We);
+  return ae(We);
 }
 function Et(t) {
-  ce(Qe, t);
+  re(Qe, t);
+}
+function Ht() {
+  return ae(Qe);
+}
+function Xt(t) {
+  re(Ze, t);
+}
+function Ft() {
+  return ae(Ze);
+}
+function zt(t) {
+  re(je, t);
+}
+function et() {
+  return ae(je);
+}
+function Gt(t) {
+  re(Ie, t);
 }
-function Ze() {
-  return de(Qe);
+function tt() {
+  return ae(Ie);
 }
-const Ht = /* @__PURE__ */ R({
+const Yt = /* @__PURE__ */ J({
   __name: "menu",
   setup(t) {
-    const { t: s } = te(), n = Nt(), e = qt(), l = Kt(), o = Rt(), i = O(0), r = O(0), u = O([]), a = K(() => [i.value, r.value]), f = (P) => {
-      const T = () => !(u.value.length <= 0 || !ae(l.value, u.value)), w = () => {
-        const k = ke(n.value, u.value);
-        if (k)
-          if (k.ui) {
-            const M = me(e.value, u.value.slice(0, -1));
-            if (!M)
+    const { t: s } = j(), n = Kt(), e = Rt(), l = Ht(), o = Ft(), i = O(0), u = O(0), r = O([]), a = A(() => [i.value, u.value]), m = (M) => {
+      const R = () => !(r.value.length <= 0 || !me(l.value, r.value)), k = () => {
+        const x = Ve(n.value, r.value);
+        if (x)
+          if (x.ui) {
+            const P = ge(e.value, r.value.slice(0, -1));
+            if (!P)
               return;
-            M[u.value[u.value.length - 1]] = q(k), o(u.value, M[u.value[u.value.length - 1]]);
-          } else if (k.array) {
-            const M = u.value[u.value.length - 1];
-            if (M === void 0) {
+            P[r.value[r.value.length - 1]] = H(x), o(r.value, P[r.value[r.value.length - 1]]);
+          } else if (x.array) {
+            const P = r.value[r.value.length - 1];
+            if (P === void 0) {
               console.assert(!1, "invalid last key");
               return;
             }
-            if (typeof M == "string") {
-              const N = me(e.value, u.value.slice(0, -1));
-              if (!N)
+            if (typeof P == "string") {
+              const E = ge(e.value, r.value.slice(0, -1));
+              if (!E)
                 return;
-              N[u.value[u.value.length - 1]] = q(k), o(u.value, N[u.value[u.value.length - 1]]);
+              E[r.value[r.value.length - 1]] = H(x), o(r.value, E[r.value[r.value.length - 1]]);
             } else {
-              const N = me(e.value, u.value);
-              if (!N)
+              const E = ge(e.value, r.value);
+              if (!E)
                 return;
-              k.children.forEach((Q) => {
-                N[Q.key] = q(k), o([...u.value, Q.key], N[Q.key]);
+              x.children.forEach((I) => {
+                E[I.key] = H(x), o([...r.value, I.key], E[I.key]);
               });
             }
           } else {
-            const M = me(e.value, u.value);
-            if (!M)
+            const P = ge(e.value, r.value);
+            if (!P)
               return;
-            k.children.forEach((N) => {
-              M[N.key] = q(k), o([...u.value, N.key], M[N.key]);
+            x.children.forEach((E) => {
+              P[E.key] = H(x), o([...r.value, E.key], P[E.key]);
             });
           }
       };
-      T() && P.push({
+      R() && M.push({
         title: s("x-prop-tree.reset"),
-        func: w
+        func: k
       });
-    }, d = (P) => {
-      const T = () => {
-        const w = ke(n.value, u.value), k = me(e.value, u.value);
-        localStorage.setItem("propTreeCopy", JSON.stringify({ property: w, object: k }));
+    }, c = (M) => {
+      const R = () => {
+        const k = Ve(n.value, r.value), x = ge(e.value, r.value);
+        localStorage.setItem("propTreeCopy", JSON.stringify({ property: k, object: x }));
       };
-      P.push({
+      M.push({
         title: s("x-prop-tree.copy"),
-        func: T
+        func: R
       });
-    }, g = (P) => {
-      const T = () => {
-        const k = localStorage.getItem("propTreeCopy");
-        if (!k)
+    }, v = (M) => {
+      const R = () => {
+        const x = localStorage.getItem("propTreeCopy");
+        if (!x)
           return !1;
         try {
-          const { property: M } = JSON.parse(k), N = ke(n.value, u.value);
-          return $t(M, N);
-        } catch (M) {
-          console.error(M);
+          const { property: P } = JSON.parse(x), E = Ve(n.value, r.value);
+          return Pt(P, E);
+        } catch (P) {
+          console.error(P);
         }
         return !1;
-      }, w = () => {
-        if (!T())
+      }, k = () => {
+        if (!R())
           return;
-        const k = localStorage.getItem("propTreeCopy");
-        if (k)
+        const x = localStorage.getItem("propTreeCopy");
+        if (x)
           try {
-            const { object: M } = JSON.parse(k), N = ke(n.value, u.value);
-            console.log(M, N);
-          } catch (M) {
-            console.error(M);
+            const { object: P } = JSON.parse(x), E = Ve(n.value, r.value);
+            console.log(P, E);
+          } catch (P) {
+            console.error(P);
           }
       };
-      T() && P.push({
+      R() && M.push({
         title: s("x-prop-tree.paste"),
-        func: w
+        func: k
       });
-    }, h = K(() => {
-      const P = [];
-      return f(P), d(P), g(P), P;
-    }), V = (P) => {
-      i.value = P.x, r.value = P.y, u.value = P.keys;
-    }, { open: x } = xe("propTreeMenu", V);
-    return (P, T) => {
-      const w = U("v-list-item-title"), k = U("v-list-item"), M = U("v-list"), N = U("v-menu");
-      return C(), B(N, {
-        modelValue: L(x),
-        "onUpdate:modelValue": T[0] || (T[0] = (Q) => ve(x) ? x.value = Q : null),
+    }, f = A(() => {
+      const M = [];
+      return m(M), c(M), v(M), M;
+    }), V = (M) => {
+      i.value = M.x, u.value = M.y, r.value = M.keys;
+    }, { open: U } = he("propTreeMenu", V);
+    return (M, R) => {
+      const k = C("v-list-item-title"), x = C("v-list-item"), P = C("v-list"), E = C("v-menu");
+      return _(), T(E, {
+        modelValue: D(U),
+        "onUpdate:modelValue": R[0] || (R[0] = (I) => ue(U) ? U.value = I : null),
         "location-strategy": "connected",
         scrim: "transparent",
         target: a.value
       }, {
-        default: J(() => [
-          D(M, null, {
-            default: J(() => [
-              (C(!0), E(Ve, null, Be(h.value, (Q, Pe) => (C(), B(k, {
-                key: Pe,
+        default: K(() => [
+          b(P, null, {
+            default: K(() => [
+              (_(!0), q(fe, null, Le(f.value, (I, De) => (_(), T(x, {
+                key: De,
                 link: "",
-                onClick: Q.func
+                onClick: I.func
               }, {
-                default: J(() => [
-                  D(w, null, {
-                    default: J(() => [
-                      Ce(W(Q.title), 1)
+                default: K(() => [
+                  b(k, null, {
+                    default: K(() => [
+                      ye(F(I.title), 1)
                     ]),
                     _: 2
                   }, 1024)
@@ -323,7 +394,7 @@ const Ht = /* @__PURE__ */ R({
       }, 8, ["modelValue", "target"]);
     };
   }
-}), Ft = { style: { pointerEvents: "none" } }, _e = /* @__PURE__ */ R({
+}), Wt = { style: { pointerEvents: "none" } }, Se = /* @__PURE__ */ J({
   __name: "title",
   props: {
     title: {},
@@ -334,361 +405,963 @@ const Ht = /* @__PURE__ */ R({
   },
   emits: ["collapse", "menu", "create", "delete"],
   setup(t, { emit: s }) {
-    const { backgroundColor2: n, highlightColor: e } = ie(), l = s, o = O(!1), i = K(() => ({
+    const { backgroundColor2: n, highlightColor: e } = te(), l = s, o = O(!1), i = A(() => ({
       background: o.value ? e.value : n.value,
       height: "36px",
       marginBottom: "1px",
       userSelect: "none"
-    })), r = () => {
+    })), u = () => {
       l("collapse", !t.collapse);
-    }, u = (a) => {
+    }, r = (a) => {
       l("menu", a.clientX, a.clientY);
     };
-    return (a, f) => {
-      const d = U("v-icon"), g = U("v-spacer"), h = U("v-btn"), V = le("ripple");
-      return ee((C(), E("div", {
+    return (a, m) => {
+      const c = C("v-icon"), v = C("v-spacer"), f = C("v-btn"), V = ee("ripple");
+      return Z((_(), q("div", {
         class: "d-flex align-center cursor-pointer",
-        style: I(i.value),
-        onClick: r,
-        onContextmenu: X(u, ["self", "prevent"]),
-        onMouseout: f[2] || (f[2] = (x) => o.value = !1),
-        onMouseover: f[3] || (f[3] = (x) => o.value = !0)
+        style: W(i.value),
+        onClick: u,
+        onContextmenu: X(r, ["self", "prevent"]),
+        onMouseout: m[2] || (m[2] = (U) => o.value = !1),
+        onMouseover: m[3] || (m[3] = (U) => o.value = !0)
       }, [
-        D(d, {
+        b(c, {
           class: "mr-1",
           icon: t.collapse ? "mdi-chevron-right" : "mdi-chevron-down"
         }, null, 8, ["icon"]),
-        F("span", Ft, W(t.title), 1),
-        D(g),
-        t.hasCreate ? (C(), B(h, {
+        B("span", Wt, F(t.title), 1),
+        b(v),
+        t.hasCreate ? (_(), T(f, {
           key: 0,
           class: "mx-3",
           density: "compact",
           icon: "mdi-plus",
           variant: "text",
-          onClick: f[0] || (f[0] = X((x) => l("create"), ["stop"]))
+          onClick: m[0] || (m[0] = X((U) => l("create"), ["stop"]))
         })) : G("", !0),
-        t.hasDelete ? (C(), B(h, {
+        t.hasDelete ? (_(), T(f, {
           key: 1,
           class: "mx-3",
           density: "compact",
           icon: "mdi-minus",
           variant: "text",
-          onClick: f[1] || (f[1] = X((x) => l("delete", t.index), ["stop"]))
+          onClick: m[1] || (m[1] = X((U) => l("delete", t.index), ["stop"]))
         })) : G("", !0)
       ], 36)), [
         [V]
       ]);
     };
   }
-}), Xt = /* @__PURE__ */ R({
-  __name: "entry",
+}), Qt = { class: "text-subtitle-2 ml-1" }, Zt = { class: "text-caption text-grey ml-1" }, jt = /* @__PURE__ */ J({
+  __name: "group",
   props: {
-    minHeight: {}
+    id: {},
+    title: {},
+    collapse: { type: Boolean },
+    count: {}
   },
-  emits: ["menu"],
+  emits: ["x-click"],
   setup(t, { emit: s }) {
-    const { backgroundColor2: n, highlightColor: e } = ie(), l = s, o = O(!1), i = K(() => ({
-      background: o.value ? e.value : n.value,
-      minHeight: t.minHeight,
-      paddingRight: "4px",
+    const { backgroundColor2: n, highlightColor: e } = te(), l = t, o = s, i = O(!1), u = A(() => ({
+      background: i.value ? e.value : n.value,
+      height: "30px",
       marginBottom: "1px",
       userSelect: "none"
-    })), r = (u) => {
-      l("menu", u.clientX, u.clientY);
-    };
-    return (u, a) => {
-      const f = le("ripple");
-      return ee((C(), E("div", {
-        class: "d-flex justify-space-between align-center cursor-pointer",
-        style: I(i.value),
-        onContextmenu: X(r, ["self", "prevent"]),
-        onMouseout: a[0] || (a[0] = (d) => o.value = !1),
-        onMouseover: a[1] || (a[1] = (d) => o.value = !0)
+    }));
+    return (r, a) => {
+      const m = C("v-icon"), c = ee("ripple");
+      return Z((_(), q("div", {
+        class: "d-flex align-center cursor-pointer",
+        style: W(u.value),
+        onClick: a[0] || (a[0] = (v) => o("x-click", l.id)),
+        onMouseout: a[1] || (a[1] = (v) => i.value = !1),
+        onMouseover: a[2] || (a[2] = (v) => i.value = !0)
       }, [
-        ft(u.$slots, "default")
+        b(m, {
+          icon: l.collapse ? "mdi-chevron-right" : "mdi-chevron-down",
+          size: "small"
+        }, null, 8, ["icon"]),
+        B("span", Qt, F(l.title), 1),
+        B("span", Zt, F(l.count), 1)
       ], 36)), [
-        [f]
+        [c]
       ]);
     };
   }
-});
-function zt(t, s, n) {
-  const { t: e } = te();
-  return { renderProp: (o, i, r) => {
-    const u = o[o.length - 1];
-    let f = typeof u == "number" ? `[${u + 1}]` : e(i.name);
-    return ae(t.value, o) && (f += " *"), y(
-      Xt,
-      {
-        minHeight: s.value,
-        onMenu: (d, g) => {
-          re.emit("propTreeMenu", { x: d, y: g, keys: o });
-        }
-      },
-      () => [
-        y("span", {
-          style: { marginLeft: "4px", pointerEvents: "none" },
-          innerHTML: f
-        }),
-        y("div", { style: { width: n.value } }, r)
-      ]
-    );
-  } };
-}
-const ne = (t, s, n, e, l, o) => {
-  if (l !== void 0)
-    if (o) {
-      if (n[s.key] === void 0) {
-        const i = q(s);
-        i !== void 0 && (n[s.key] = i, e(t, n[s.key]));
-      }
-      return n[s.key];
-    } else {
-      if (n[l] === void 0) {
-        const i = q(s, !0);
-        i !== void 0 && (n[l] = i, e(t, n[l]));
-      }
-      return n[l];
-    }
-  else {
-    if (n[s.key] === void 0) {
-      const i = q(s);
-      i !== void 0 && (n[s.key] = i, e(t, n[s.key]));
-    }
-    return n[s.key];
-  }
-}, oe = (t, s, n, e, l, o, i) => {
-  if (o !== void 0)
-    i ? e !== n[s.key] && (n[s.key] = e, l(t, n[s.key])) : e !== n[o] && (n[o] = e, l(t, n[o]));
-  else {
-    let r = e;
-    (s.ui === "switch" || s.ui === "select" || s.ui === "colorPicker" || s.ui === "multiTypes" || s.ui === "compSelect") && (e || (r = void 0)), r !== n[s.key] && (n[s.key] = r, l(t, n[s.key]));
-  }
-};
-function Gt(t) {
-  return { renderUiDummy: (n, e, l, o, i) => {
-    if (e.ui !== "dummy") {
-      console.assert(!1, "renderUiDummy property ui must be dummy");
-      return;
-    }
-    ne(n, e, l, t, o, i);
-  } };
-}
-const Yt = { class: "d-flex justify-space-between align-center" }, Wt = /* @__PURE__ */ R({
-  __name: "strInput",
-  props: /* @__PURE__ */ Y({
-    hasDelete: { type: Boolean, default: !1 },
-    readonly: { type: Boolean, default: !1 }
-  }, {
-    modelValue: { required: !0 },
-    modelModifiers: {}
-  }),
-  emits: /* @__PURE__ */ Y(["delete"], ["update:modelValue"]),
+}), It = { class: "text-subtitle-1 ml-6" }, en = /* @__PURE__ */ J({
+  __name: "item",
+  props: {
+    id: {},
+    title: {}
+  },
+  emits: ["x-click"],
   setup(t, { emit: s }) {
-    const { isMobile: n } = pe(), e = z(t, "modelValue"), l = s, o = async (i) => {
-      if (!i || t.readonly || !n())
-        return;
-      const r = await gt({
-        title: "",
-        value: e.value
-      });
-      r !== void 0 && (e.value = r);
-    };
-    return (i, r) => {
-      const u = U("v-text-field"), a = U("v-btn"), f = le("ripple");
-      return C(), E("div", Yt, [
-        ee(D(u, {
-          modelValue: e.value,
-          "onUpdate:modelValue": r[0] || (r[0] = (d) => e.value = d),
-          density: "compact",
-          "hide-details": "",
-          readonly: t.readonly,
-          "single-line": "",
-          "onUpdate:focused": o
-        }, null, 8, ["modelValue", "readonly"]), [
-          [
-            f,
-            void 0,
-            void 0,
-            { stop: !0 }
-          ]
-        ]),
-        t.hasDelete ? (C(), B(a, {
-          key: 0,
-          class: "mx-2",
-          density: "compact",
-          icon: "mdi-minus",
-          variant: "text",
-          onClick: r[1] || (r[1] = X((d) => l("delete"), ["stop"]))
-        })) : G("", !0)
+    const { backgroundColor2: n, highlightColor: e } = te(), l = t, o = s, i = O(!1), u = A(() => ({
+      background: i.value ? e.value : n.value,
+      height: "48px",
+      marginBottom: "1px",
+      userSelect: "none"
+    }));
+    return (r, a) => {
+      const m = ee("ripple");
+      return Z((_(), q("div", {
+        class: "d-flex align-center cursor-pointer",
+        style: W(u.value),
+        onClick: a[0] || (a[0] = (c) => o("x-click", l.id)),
+        onMouseout: a[1] || (a[1] = (c) => i.value = !1),
+        onMouseover: a[2] || (a[2] = (c) => i.value = !0)
+      }, [
+        B("span", It, F(l.title), 1)
+      ], 36)), [
+        [m]
       ]);
     };
   }
-});
-function Qt(t) {
-  return { renderUiStrInput: (n, e, l, o, i) => e.ui !== "strInput" ? (console.assert(!1), y("div", "renderUiStrInput property ui must be strInput")) : y(Wt, {
-    modelValue: e.static ? e.value : ne(
-      n,
-      e,
-      l,
-      t,
-      o,
-      i
-    ),
-    "onUpdate:modelValue": (r) => {
-      e.static || oe(
-        n,
-        e,
-        l,
-        r,
-        t,
-        o,
-        i
-      );
-    },
-    hasDelete: o !== void 0 && !i,
-    onDelete: () => {
-      o === void 0 || i || (l.splice(o, 1), t(n.slice(0, -1), l));
-    },
-    readonly: e.static || e.readonly
-  }) };
-}
-const Zt = { class: "d-flex justify-space-between align-center" }, jt = /* @__PURE__ */ R({
-  __name: "numInput",
-  props: /* @__PURE__ */ Y({
-    hasDelete: { type: Boolean, default: !1 },
-    precision: { default: () => {
-    } },
-    min: { default: () => -1 / 0 },
-    max: { default: () => 1 / 0 },
-    step: { default: 1 },
-    readonly: { type: Boolean, default: !1 }
-  }, {
-    modelValue: { required: !0 },
-    modelModifiers: {}
-  }),
-  emits: /* @__PURE__ */ Y(["delete"], ["update:modelValue"]),
-  setup(t, { emit: s }) {
-    const { isMobile: n } = pe(), e = z(t, "modelValue"), l = s, o = async (i) => {
-      if (!i || t.readonly || !n())
-        return;
-      const r = await Re({
-        title: "",
-        value: e.value,
-        precision: t.precision,
-        min: t.min,
-        max: t.max,
-        step: t.step
-      });
-      r !== void 0 && (e.value = r);
+}), tn = { key: 0 }, nn = {
+  key: 1,
+  class: "text-body-2 text-grey ml-3"
+}, ln = /* @__PURE__ */ J({
+  __name: "index",
+  props: {
+    modelValue: {},
+    modelModifiers: {},
+    open: { type: Boolean, required: !0 },
+    openModifiers: {}
+  },
+  emits: ["update:modelValue", "update:open"],
+  setup(t) {
+    const { t: s } = j(), n = z(t, "modelValue"), e = z(t, "open"), l = et(), o = (u) => {
+      const r = we(l, u);
+      r && Xe(l, u, !r.collapse);
+    }, i = (u) => {
+      n.value = u, e.value = !1, de.emit("refreshDepends");
     };
-    return (i, r) => {
-      const u = U("v-number-input"), a = U("v-btn"), f = le("ripple");
-      return C(), E("div", Zt, [
-        ee(D(u, {
-          modelValue: e.value,
-          "onUpdate:modelValue": r[0] || (r[0] = (d) => e.value = d),
-          "control-variant": "stacked",
-          density: "compact",
-          "hide-details": "",
-          max: t.max,
-          min: t.min,
-          precision: t.precision,
-          readonly: t.readonly,
-          "single-line": "",
-          step: t.step,
-          "onUpdate:focused": o
-        }, null, 8, ["modelValue", "max", "min", "precision", "readonly", "step"]), [
-          [
-            f,
-            void 0,
-            void 0,
-            { stop: !0 }
-          ]
-        ]),
-        t.hasDelete ? (C(), B(a, {
+    return (u, r) => D(l).length > 0 ? (_(), q("div", tn, [
+      (_(!0), q(fe, null, Le(D(l), (a) => (_(), q(fe, {
+        key: a.id
+      }, [
+        a.type === 0 ? (_(), T(jt, {
           key: 0,
-          class: "mx-2",
-          density: "compact",
-          icon: "mdi-minus",
-          variant: "text",
-          onClick: r[1] || (r[1] = X((d) => l("delete"), ["stop"]))
-        })) : G("", !0)
-      ]);
-    };
-  }
-});
-function It(t) {
-  return { renderUiNumInput: (n, e, l, o, i) => e.ui !== "numInput" ? (console.assert(!1), y("div", "renderUiNumInput property ui must be numInput")) : y(jt, {
-    modelValue: ne(
-      n,
-      e,
-      l,
-      t,
-      o,
-      i
-    ),
-    "onUpdate:modelValue": (r) => {
-      oe(
-        n,
-        e,
-        l,
-        r,
-        t,
-        o,
-        i
-      );
-    },
-    hasDelete: o !== void 0 && !i,
-    onDelete: () => {
-      o === void 0 || i || (l.splice(o, 1), t(n.slice(0, -1), l));
-    },
-    precision: e.precision,
-    min: e.min,
-    max: e.max,
-    step: e.step,
-    readonly: e.readonly
-  }) };
-}
-const en = { class: "d-flex justify-space-between align-center" }, tn = /* @__PURE__ */ R({
+          id: a.id,
+          collapse: a.collapse,
+          count: a.count ?? 0,
+          title: a.name,
+          onXClick: o
+        }, null, 8, ["id", "collapse", "count", "title"])) : G("", !0),
+        a.type === 1 && a.show ? (_(), T(en, {
+          key: 1,
+          id: a.id,
+          title: a.name,
+          onXClick: i
+        }, null, 8, ["id", "title"])) : G("", !0)
+      ], 64))), 128))
+    ])) : (_(), q("div", nn, F(D(s)("x-prop-tree.noComp")), 1));
+  }
+}), on = { class: "text-subtitle-1 ml-3" }, sn = /* @__PURE__ */ J({
+  __name: "index",
+  props: {
+    modelValue: {},
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(t) {
+    const { t: s } = j(), n = ze(), { sysBarAvail: e } = ve(), { backgroundColor1: l } = te(), o = z(t, "modelValue"), i = et(), u = A(() => {
+      let v = "100%";
+      return n.mdAndUp.value && (v = "400px"), {
+        background: l.value,
+        width: v,
+        height: "100%"
+      };
+    }), r = A(() => {
+      let v = 48;
+      return e.value && (v += 24), {
+        position: "relative",
+        height: `calc(100% - ${v}px)`
+      };
+    }), a = A(() => ({
+      height: "60px"
+    })), m = A(() => {
+      if (!o.value)
+        return s("x-runtime-lib.notSet");
+      const v = we(i, o.value);
+      return v ? v.name : s("x-runtime-lib.compNotAvail");
+    }), { open: c } = he(`propTreeCompSelectDlg${Ce()}`);
+    return Ue(() => {
+      c.value = !1;
+    }), (v, f) => {
+      const V = C("v-btn"), U = C("v-sheet"), M = C("v-icon"), R = C("v-dialog");
+      return _(), T(R, {
+        modelValue: D(c),
+        "onUpdate:modelValue": f[5] || (f[5] = (k) => ue(c) ? c.value = k : null),
+        fullscreen: "",
+        "no-click-animation": "",
+        persistent: "",
+        transition: "scroll-x-reverse-transition",
+        onKeydown: f[6] || (f[6] = Te(X((k) => c.value = !1, ["stop", "prevent"]), ["esc"]))
+      }, {
+        activator: K(({ props: k }) => [
+          b(V, $e(k, {
+            block: "",
+            density: "comfortable"
+          }), {
+            default: K(() => [
+              ye(F(m.value), 1)
+            ]),
+            _: 1
+          }, 16)
+        ]),
+        default: K(() => [
+          B("div", {
+            class: "w-100 h-100 d-flex flex-row-reverse",
+            onClick: f[3] || (f[3] = X((k) => c.value = !1, ["self"])),
+            onContextmenu: f[4] || (f[4] = X((k) => c.value = !1, ["self", "prevent"]))
+          }, [
+            B("div", {
+              class: "elevation-2",
+              style: W(u.value)
+            }, [
+              D(e) ? (_(), T(U, {
+                key: 0,
+                color: "transparent",
+                height: 24
+              })) : G("", !0),
+              b(U, {
+                class: "d-flex align-center px-3",
+                color: "transparent",
+                height: 48
+              }, {
+                default: K(() => [
+                  b(M, {
+                    icon: "mdi-close",
+                    onClick: f[0] || (f[0] = (k) => c.value = !1)
+                  }),
+                  B("span", on, F(D(s)("x-prop-tree.dlg.compSelect.title")), 1)
+                ]),
+                _: 1
+              }),
+              B("div", {
+                class: "overflow-y-auto",
+                style: W(r.value)
+              }, [
+                b(ln, {
+                  modelValue: o.value,
+                  "onUpdate:modelValue": f[1] || (f[1] = (k) => o.value = k),
+                  open: D(c),
+                  "onUpdate:open": f[2] || (f[2] = (k) => ue(c) ? c.value = k : null)
+                }, null, 8, ["modelValue", "open"]),
+                B("div", {
+                  style: W(a.value)
+                }, null, 4)
+              ], 4)
+            ], 4)
+          ], 32)
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+}), un = /* @__PURE__ */ J({
+  __name: "editor",
+  props: {
+    modelValue: { required: !0 },
+    modelModifiers: {},
+    lock: { type: Boolean, required: !0 },
+    lockModifiers: {},
+    scale: { required: !0 },
+    scaleModifiers: {}
+  },
+  emits: ["update:modelValue", "update:lock", "update:scale"],
+  setup(t, { expose: s }) {
+    const n = z(t, "modelValue"), e = z(t, "lock"), l = z(t, "scale"), o = Vt(), i = St(), u = Oe(), r = Re("target"), a = () => {
+      const c = JSON.parse(n.value);
+      r.value?.load(c);
+    };
+    return s({ save: () => {
+      const c = r.value.save();
+      n.value = JSON.stringify(c, null, 2);
+    } }), (c, v) => (_(), T(D(bt), {
+      ref_key: "target",
+      ref: r,
+      lock: e.value,
+      "onUpdate:lock": v[0] || (v[0] = (f) => e.value = f),
+      scale: l.value,
+      "onUpdate:scale": v[1] || (v[1] = (f) => l.value = f),
+      dark: D(o),
+      locale: D(i),
+      type: "json",
+      version: D(u),
+      onReady: a
+    }, null, 8, ["lock", "scale", "dark", "locale", "version"]));
+  }
+}), rn = { class: "text-subtitle-1" }, an = /* @__PURE__ */ J({
+  __name: "index",
+  props: {
+    modelValue: { required: !0 },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(t) {
+    const { t: s } = j(), { sysBarAvail: n } = ve(), { backgroundColor0: e, backgroundColor1: l, backgroundColor2: o } = te(), i = z(t, "modelValue"), u = O(!1), r = O(1), a = A(() => {
+      let f = 48;
+      return n.value && (f += 24), {
+        position: "relative",
+        background: l.value,
+        height: `calc(100% - ${f}px)`
+      };
+    }), m = A(() => s("x-prop-tree.dlg.jsonObject.title")), { open: c } = he(`propTreeJsonObjectDlg${Ce()}`);
+    Ue(() => {
+      c.value = !1;
+    });
+    const v = Re("editor");
+    return ce(c, (f) => {
+      f || v.value?.save();
+    }), (f, V) => {
+      const U = C("v-btn"), M = C("v-sheet"), R = C("v-spacer"), k = C("v-dialog");
+      return _(), T(k, {
+        modelValue: D(c),
+        "onUpdate:modelValue": V[4] || (V[4] = (x) => ue(c) ? c.value = x : null),
+        attach: "",
+        fullscreen: "",
+        "no-click-animation": "",
+        persistent: "",
+        transition: "dialog-bottom-transition",
+        onKeydown: V[5] || (V[5] = Te(X((x) => c.value = !1, ["stop", "prevent"]), ["esc"]))
+      }, {
+        activator: K(({ props: x }) => [
+          b(U, $e(x, {
+            block: "",
+            density: "comfortable"
+          }), {
+            default: K(() => [
+              ye(F(m.value), 1)
+            ]),
+            _: 1
+          }, 16)
+        ]),
+        default: K(() => [
+          b(M, {
+            color: D(e),
+            height: "100%",
+            width: "100%"
+          }, {
+            default: K(() => [
+              D(n) ? (_(), T(M, {
+                key: 0,
+                color: D(o),
+                height: 24
+              }, null, 8, ["color"])) : G("", !0),
+              b(M, {
+                class: "d-flex align-center px-2",
+                color: D(o),
+                height: 48
+              }, {
+                default: K(() => [
+                  b(U, {
+                    density: "comfortable",
+                    icon: "mdi-close",
+                    variant: "text",
+                    onClick: V[0] || (V[0] = (x) => c.value = !1)
+                  }),
+                  B("span", rn, F(D(s)("x-prop-tree.dlg.jsonObject.title")), 1),
+                  b(R)
+                ]),
+                _: 1
+              }, 8, ["color"]),
+              B("div", {
+                style: W(a.value)
+              }, [
+                b(un, {
+                  ref_key: "editor",
+                  ref: v,
+                  modelValue: i.value,
+                  "onUpdate:modelValue": V[1] || (V[1] = (x) => i.value = x),
+                  lock: u.value,
+                  "onUpdate:lock": V[2] || (V[2] = (x) => u.value = x),
+                  scale: r.value,
+                  "onUpdate:scale": V[3] || (V[3] = (x) => r.value = x)
+                }, null, 8, ["modelValue", "lock", "scale"])
+              ], 4)
+            ]),
+            _: 1
+          }, 8, ["color"])
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+}), cn = { class: "text-subtitle-2 ml-1" }, dn = { class: "text-caption text-grey ml-1" }, mn = /* @__PURE__ */ J({
+  __name: "group",
+  props: {
+    id: {},
+    title: {},
+    collapse: { type: Boolean },
+    count: {}
+  },
+  emits: ["x-click"],
+  setup(t, { emit: s }) {
+    const { backgroundColor2: n, highlightColor: e } = te(), l = t, o = s, i = O(!1), u = A(() => ({
+      background: i.value ? e.value : n.value,
+      height: "30px",
+      marginBottom: "1px",
+      userSelect: "none"
+    }));
+    return (r, a) => {
+      const m = C("v-icon"), c = ee("ripple");
+      return Z((_(), q("div", {
+        class: "d-flex align-center cursor-pointer",
+        style: W(u.value),
+        onClick: a[0] || (a[0] = (v) => o("x-click", l.id)),
+        onMouseout: a[1] || (a[1] = (v) => i.value = !1),
+        onMouseover: a[2] || (a[2] = (v) => i.value = !0)
+      }, [
+        b(m, {
+          icon: l.collapse ? "mdi-chevron-right" : "mdi-chevron-down",
+          size: "small"
+        }, null, 8, ["icon"]),
+        B("span", cn, F(l.title), 1),
+        B("span", dn, F(l.count), 1)
+      ], 36)), [
+        [c]
+      ]);
+    };
+  }
+}), fn = { class: "text-subtitle-1 ml-6" }, vn = /* @__PURE__ */ J({
+  __name: "item",
+  props: {
+    id: {},
+    title: {}
+  },
+  emits: ["x-click"],
+  setup(t, { emit: s }) {
+    const { backgroundColor2: n, highlightColor: e } = te(), l = t, o = s, i = O(!1), u = A(() => ({
+      background: i.value ? e.value : n.value,
+      height: "48px",
+      marginBottom: "1px",
+      userSelect: "none"
+    }));
+    return (r, a) => {
+      const m = ee("ripple");
+      return Z((_(), q("div", {
+        class: "d-flex align-center cursor-pointer",
+        style: W(u.value),
+        onClick: a[0] || (a[0] = (c) => o("x-click", l.id)),
+        onMouseout: a[1] || (a[1] = (c) => i.value = !1),
+        onMouseover: a[2] || (a[2] = (c) => i.value = !0)
+      }, [
+        B("span", fn, F(l.title), 1)
+      ], 36)), [
+        [m]
+      ]);
+    };
+  }
+}), pn = { key: 0 }, gn = {
+  key: 1,
+  class: "text-body-2 text-grey ml-3"
+}, yn = /* @__PURE__ */ J({
+  __name: "index",
+  props: {
+    modelValue: {},
+    modelModifiers: {},
+    open: { type: Boolean, required: !0 },
+    openModifiers: {}
+  },
+  emits: ["update:modelValue", "update:open"],
+  setup(t) {
+    const { t: s } = j(), n = z(t, "modelValue"), e = z(t, "open"), l = tt(), o = (u) => {
+      const r = we(l, u);
+      r && Xe(l, u, !r.collapse);
+    }, i = (u) => {
+      n.value = u, e.value = !1;
+    };
+    return (u, r) => D(l).length > 0 ? (_(), q("div", pn, [
+      (_(!0), q(fe, null, Le(D(l), (a) => (_(), q(fe, {
+        key: a.id
+      }, [
+        a.type === 0 ? (_(), T(mn, {
+          key: 0,
+          id: a.id,
+          collapse: a.collapse,
+          count: a.count ?? 0,
+          title: a.name,
+          onXClick: o
+        }, null, 8, ["id", "collapse", "count", "title"])) : G("", !0),
+        a.type === 1 && a.show ? (_(), T(vn, {
+          key: 1,
+          id: a.id,
+          title: a.name,
+          onXClick: i
+        }, null, 8, ["id", "title"])) : G("", !0)
+      ], 64))), 128))
+    ])) : (_(), q("div", gn, F(D(s)("x-prop-tree.noSlot")), 1));
+  }
+}), hn = { class: "text-subtitle-1 ml-3" }, _n = /* @__PURE__ */ J({
+  __name: "index",
+  props: {
+    modelValue: {},
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(t) {
+    const { t: s } = j(), n = ze(), { sysBarAvail: e } = ve(), { backgroundColor1: l } = te(), o = z(t, "modelValue"), i = tt(), u = A(() => {
+      let v = "100%";
+      return n.mdAndUp.value && (v = "400px"), {
+        background: l.value,
+        width: v,
+        height: "100%"
+      };
+    }), r = A(() => {
+      let v = 48;
+      return e.value && (v += 24), {
+        position: "relative",
+        height: `calc(100% - ${v}px)`
+      };
+    }), a = A(() => ({
+      height: "60px"
+    })), m = A(() => {
+      if (!o.value)
+        return s("x-runtime-lib.notSet");
+      const v = we(i, o.value);
+      return v ? v.name : s("x-runtime-lib.slotNotAvail");
+    }), { open: c } = he(`propTreeSlotSelectDlg${Ce()}`);
+    return Ue(() => {
+      c.value = !1;
+    }), (v, f) => {
+      const V = C("v-btn"), U = C("v-sheet"), M = C("v-icon"), R = C("v-dialog");
+      return _(), T(R, {
+        modelValue: D(c),
+        "onUpdate:modelValue": f[5] || (f[5] = (k) => ue(c) ? c.value = k : null),
+        fullscreen: "",
+        "no-click-animation": "",
+        persistent: "",
+        transition: "scroll-x-reverse-transition",
+        onKeydown: f[6] || (f[6] = Te(X((k) => c.value = !1, ["stop", "prevent"]), ["esc"]))
+      }, {
+        activator: K(({ props: k }) => [
+          b(V, $e(k, {
+            block: "",
+            density: "comfortable"
+          }), {
+            default: K(() => [
+              ye(F(m.value), 1)
+            ]),
+            _: 1
+          }, 16)
+        ]),
+        default: K(() => [
+          B("div", {
+            class: "w-100 h-100 d-flex flex-row-reverse",
+            onClick: f[3] || (f[3] = X((k) => c.value = !1, ["self"])),
+            onContextmenu: f[4] || (f[4] = X((k) => c.value = !1, ["self", "prevent"]))
+          }, [
+            B("div", {
+              class: "elevation-2",
+              style: W(u.value)
+            }, [
+              D(e) ? (_(), T(U, {
+                key: 0,
+                color: "transparent",
+                height: 24
+              })) : G("", !0),
+              b(U, {
+                class: "d-flex align-center px-3",
+                color: "transparent",
+                height: 48
+              }, {
+                default: K(() => [
+                  b(M, {
+                    icon: "mdi-close",
+                    onClick: f[0] || (f[0] = (k) => c.value = !1)
+                  }),
+                  B("span", hn, F(D(s)("x-prop-tree.dlg.compSelect.title")), 1)
+                ]),
+                _: 1
+              }),
+              B("div", {
+                class: "overflow-y-auto",
+                style: W(r.value)
+              }, [
+                b(yn, {
+                  modelValue: o.value,
+                  "onUpdate:modelValue": f[1] || (f[1] = (k) => o.value = k),
+                  open: D(c),
+                  "onUpdate:open": f[2] || (f[2] = (k) => ue(c) ? c.value = k : null)
+                }, null, 8, ["modelValue", "open"]),
+                B("div", {
+                  style: W(a.value)
+                }, null, 4)
+              ], 4)
+            ], 4)
+          ], 32)
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+}), kn = { class: "d-flex justify-space-between align-center" }, xn = /* @__PURE__ */ J({
+  __name: "colorPicker",
+  props: /* @__PURE__ */ Q({
+    hasDelete: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ Q(["delete"], ["update:modelValue"]),
+  setup(t, { emit: s }) {
+    const { t: n } = j(), e = z(t, "modelValue"), l = s, o = A(() => {
+      let r = "100%";
+      return t.hasDelete && (r = "calc(100% - 37px)"), {
+        width: r
+      };
+    }), i = A(() => t.readonly), { open: u } = he(`propTreeColorPickerMenu${Ce()}`);
+    return Ue(() => {
+      u.value = !1;
+    }), (r, a) => {
+      const m = C("v-btn"), c = C("v-color-picker"), v = C("v-menu");
+      return _(), T(v, {
+        modelValue: D(u),
+        "onUpdate:modelValue": a[2] || (a[2] = (f) => ue(u) ? u.value = f : null),
+        "close-on-content-click": !1,
+        scrim: "transparent"
+      }, {
+        activator: K(({ props: f }) => [
+          B("div", kn, [
+            B("div", {
+              class: "flex-grow-1",
+              style: W(o.value)
+            }, [
+              b(m, $e(f, {
+                block: "",
+                color: e.value,
+                density: "comfortable",
+                disabled: i.value
+              }), {
+                default: K(() => [
+                  ye(F(e.value ? e.value : D(n)("x-runtime-lib.notSet")), 1)
+                ]),
+                _: 1
+              }, 16, ["color", "disabled"])
+            ], 4),
+            t.hasDelete ? (_(), T(m, {
+              key: 0,
+              class: "mx-2",
+              density: "compact",
+              icon: "mdi-minus",
+              variant: "text",
+              onClick: a[0] || (a[0] = X((V) => l("delete"), ["stop"]))
+            })) : G("", !0)
+          ])
+        ]),
+        default: K(() => [
+          b(c, {
+            modelValue: e.value,
+            "onUpdate:modelValue": a[1] || (a[1] = (f) => e.value = f),
+            mode: "hexa",
+            "show-swatches": "",
+            "swatches-max-height": "150px"
+          }, null, 8, ["modelValue"])
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+}), Vn = { class: "d-flex justify-space-between align-center my-2" }, Sn = { class: "flex-grow-1" }, Cn = /* @__PURE__ */ J({
+  __name: "multiTypes",
+  props: /* @__PURE__ */ Q({
+    hasDelete: { type: Boolean, default: !1 },
+    types: {}
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ Q(["delete"], ["update:modelValue"]),
+  setup(t, { emit: s }) {
+    const { t: n } = j(), { isMobile: e } = ve(), l = z(t, "modelValue"), o = s, i = Oe(), u = A(() => Fe[i.value]?.types[t.types]), r = O(0), a = A(() => {
+      const V = [];
+      return u.value?.forEach(({ title: U }, M) => {
+        V.push({
+          title: n(U),
+          value: M
+        });
+      }), V;
+    });
+    qe(() => {
+      u.value?.some((V, U) => V.validator(l.value) ? (r.value = U, !0) : !1);
+    });
+    const m = A(() => u.value?.[r.value]), c = () => {
+      l.value = m.value?.default;
+    }, v = O(0), f = async (V) => {
+      if (!V || !e() || m.value.ui !== "pixelInput" && m.value.ui !== "percentInput")
+        return;
+      const U = await Ee({
+        title: "",
+        value: v.value,
+        precision: m.value.precision,
+        min: m.value.min,
+        max: m.value.max,
+        step: m.value.step
+      });
+      U !== void 0 && (v.value = U);
+    };
+    return qe(() => {
+      m.value?.ui === "pixelInput" ? v.value = $t(l.value) : m.value?.ui === "percentInput" && (v.value = Mt(l.value));
+    }), ce(v, (V) => {
+      m.value?.ui === "pixelInput" ? l.value = V + "px" : m.value?.ui === "percentInput" && (l.value = V + "%");
+    }), (V, U) => {
+      const M = C("v-select"), R = C("v-number-input"), k = C("v-btn"), x = ee("ripple");
+      return _(), q("div", Vn, [
+        B("div", Sn, [
+          Z(b(M, {
+            modelValue: r.value,
+            "onUpdate:modelValue": [
+              U[0] || (U[0] = (P) => r.value = P),
+              c
+            ],
+            density: "compact",
+            "hide-details": "",
+            items: a.value,
+            "single-line": ""
+          }, null, 8, ["modelValue", "items"]), [
+            [
+              x,
+              void 0,
+              void 0,
+              { stop: !0 }
+            ]
+          ]),
+          m.value?.ui === "pixelInput" || m.value?.ui === "percentInput" ? Z((_(), T(R, {
+            key: 0,
+            modelValue: v.value,
+            "onUpdate:modelValue": U[1] || (U[1] = (P) => v.value = P),
+            "control-variant": "stacked",
+            density: "compact",
+            "hide-details": "",
+            max: m.value.max,
+            min: m.value.min,
+            precision: m.value.precision,
+            "single-line": "",
+            step: m.value.step,
+            "onUpdate:focused": f
+          }, null, 8, ["modelValue", "max", "min", "precision", "step"])), [
+            [
+              x,
+              void 0,
+              void 0,
+              { stop: !0 }
+            ]
+          ]) : G("", !0)
+        ]),
+        t.hasDelete ? (_(), T(k, {
+          key: 0,
+          class: "mx-2",
+          density: "compact",
+          icon: "mdi-minus",
+          variant: "text",
+          onClick: U[2] || (U[2] = X((P) => o("delete"), ["stop"]))
+        })) : G("", !0)
+      ]);
+    };
+  }
+}), Un = { class: "d-flex justify-space-between align-center" }, $n = /* @__PURE__ */ J({
+  __name: "numInput",
+  props: /* @__PURE__ */ Q({
+    hasDelete: { type: Boolean, default: !1 },
+    precision: { default: () => {
+    } },
+    min: { default: () => -1 / 0 },
+    max: { default: () => 1 / 0 },
+    step: { default: 1 },
+    readonly: { type: Boolean, default: !1 }
+  }, {
+    modelValue: { required: !0 },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ Q(["delete"], ["update:modelValue"]),
+  setup(t, { emit: s }) {
+    const { isMobile: n } = ve(), e = z(t, "modelValue"), l = s, o = async (i) => {
+      if (!i || t.readonly || !n())
+        return;
+      const u = await Ee({
+        title: "",
+        value: e.value,
+        precision: t.precision,
+        min: t.min,
+        max: t.max,
+        step: t.step
+      });
+      u !== void 0 && (e.value = u);
+    };
+    return (i, u) => {
+      const r = C("v-number-input"), a = C("v-btn"), m = ee("ripple");
+      return _(), q("div", Un, [
+        Z(b(r, {
+          modelValue: e.value,
+          "onUpdate:modelValue": u[0] || (u[0] = (c) => e.value = c),
+          "control-variant": "stacked",
+          density: "compact",
+          "hide-details": "",
+          max: t.max,
+          min: t.min,
+          precision: t.precision,
+          readonly: t.readonly,
+          "single-line": "",
+          step: t.step,
+          "onUpdate:focused": o
+        }, null, 8, ["modelValue", "max", "min", "precision", "readonly", "step"]), [
+          [
+            m,
+            void 0,
+            void 0,
+            { stop: !0 }
+          ]
+        ]),
+        t.hasDelete ? (_(), T(a, {
+          key: 0,
+          class: "mx-2",
+          density: "compact",
+          icon: "mdi-minus",
+          variant: "text",
+          onClick: u[1] || (u[1] = X((c) => l("delete"), ["stop"]))
+        })) : G("", !0)
+      ]);
+    };
+  }
+}), Mn = { class: "d-flex justify-space-between align-center" }, wn = /* @__PURE__ */ J({
+  __name: "select",
+  props: /* @__PURE__ */ Q({
+    hasDelete: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    items: {}
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ Q(["delete"], ["update:modelValue"]),
+  setup(t, { emit: s }) {
+    const { t: n } = j(), e = z(t, "modelValue"), l = s, o = Oe(), i = A(() => {
+      const u = [];
+      return Fe[o.value]?.items[t.items].forEach(({ title: r, value: a }) => {
+        u.push({ title: n(r), value: a });
+      }), u;
+    });
+    return (u, r) => {
+      const a = C("v-select"), m = C("v-btn"), c = ee("ripple");
+      return _(), q("div", Mn, [
+        Z(b(a, {
+          modelValue: e.value,
+          "onUpdate:modelValue": r[0] || (r[0] = (v) => e.value = v),
+          density: "compact",
+          "hide-details": "",
+          items: i.value,
+          readonly: t.readonly,
+          "single-line": ""
+        }, null, 8, ["modelValue", "items", "readonly"]), [
+          [
+            c,
+            void 0,
+            void 0,
+            { stop: !0 }
+          ]
+        ]),
+        t.hasDelete ? (_(), T(m, {
+          key: 0,
+          class: "mx-2",
+          density: "compact",
+          icon: "mdi-minus",
+          variant: "text",
+          onClick: r[1] || (r[1] = X((v) => l("delete"), ["stop"]))
+        })) : G("", !0)
+      ]);
+    };
+  }
+}), bn = { class: "d-flex justify-space-between align-center" }, Pn = /* @__PURE__ */ J({
+  __name: "strInput",
+  props: /* @__PURE__ */ Q({
+    hasDelete: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 }
+  }, {
+    modelValue: { required: !0 },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ Q(["delete"], ["update:modelValue"]),
+  setup(t, { emit: s }) {
+    const { isMobile: n } = ve(), e = z(t, "modelValue"), l = s, o = async (i) => {
+      if (!i || t.readonly || !n())
+        return;
+      const u = await Ct({
+        title: "",
+        value: e.value
+      });
+      u !== void 0 && (e.value = u);
+    };
+    return (i, u) => {
+      const r = C("v-text-field"), a = C("v-btn"), m = ee("ripple");
+      return _(), q("div", bn, [
+        Z(b(r, {
+          modelValue: e.value,
+          "onUpdate:modelValue": u[0] || (u[0] = (c) => e.value = c),
+          density: "compact",
+          "hide-details": "",
+          readonly: t.readonly,
+          "single-line": "",
+          "onUpdate:focused": o
+        }, null, 8, ["modelValue", "readonly"]), [
+          [
+            m,
+            void 0,
+            void 0,
+            { stop: !0 }
+          ]
+        ]),
+        t.hasDelete ? (_(), T(a, {
+          key: 0,
+          class: "mx-2",
+          density: "compact",
+          icon: "mdi-minus",
+          variant: "text",
+          onClick: u[1] || (u[1] = X((c) => l("delete"), ["stop"]))
+        })) : G("", !0)
+      ]);
+    };
+  }
+}), Dn = { class: "d-flex justify-space-between align-center" }, An = /* @__PURE__ */ J({
   __name: "switch",
-  props: /* @__PURE__ */ Y({
+  props: /* @__PURE__ */ Q({
     hasDelete: { type: Boolean, default: !1 },
     readonly: { type: Boolean, default: !1 }
   }, {
     modelValue: { type: Boolean },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ Y(["delete"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ Q(["delete"], ["update:modelValue"]),
   setup(t, { emit: s }) {
     const n = z(t, "modelValue"), e = s;
     return (l, o) => {
-      const i = U("v-switch"), r = U("v-btn");
-      return C(), E("div", en, [
-        D(i, {
+      const i = C("v-switch"), u = C("v-btn");
+      return _(), q("div", Dn, [
+        b(i, {
           modelValue: n.value,
-          "onUpdate:modelValue": o[0] || (o[0] = (u) => n.value = u),
+          "onUpdate:modelValue": o[0] || (o[0] = (r) => n.value = r),
           class: "ml-1",
           color: "primary",
           density: "compact",
           "hide-details": "",
           readonly: t.readonly
         }, null, 8, ["modelValue", "readonly"]),
-        t.hasDelete ? (C(), B(r, {
+        t.hasDelete ? (_(), T(u, {
           key: 0,
           class: "mx-2",
           density: "compact",
           icon: "mdi-minus",
           variant: "text",
-          onClick: o[1] || (o[1] = X((u) => e("delete"), ["stop"]))
+          onClick: o[1] || (o[1] = X((r) => e("delete"), ["stop"]))
         })) : G("", !0)
       ]);
     };
   }
 });
-function nn(t) {
-  return { renderUiSwitch: (n, e, l, o, i) => e.ui !== "switch" ? (console.assert(!1), y("div", "renderUiSwitch property ui must be switch")) : y(tn, {
+function Ln(t) {
+  return { renderUiColorPicker: (n, e, l, o, i) => e.ui !== "colorPicker" ? (console.assert(!1), h("div", "renderUiColorPicker property ui must be colorPicker")) : h(xn, {
     modelValue: ne(
       n,
       e,
@@ -696,13 +1369,13 @@ function nn(t) {
       t,
       o,
       i
-    ) ?? !1,
-    "onUpdate:modelValue": (r) => {
-      oe(
+    ),
+    "onUpdate:modelValue": (u) => {
+      se(
         n,
         e,
         l,
-        r,
+        u,
         t,
         o,
         i
@@ -710,62 +1383,68 @@ function nn(t) {
     },
     hasDelete: o !== void 0 && !i,
     onDelete: () => {
-      o === void 0 || i || (l.splice(o, 1), t(n.slice(0, 1), l));
+      o === void 0 || i || (l.splice(o, 1), t(n.slice(0, -1), l));
     },
     readonly: e.readonly
   }) };
 }
-const ln = { class: "d-flex justify-space-between align-center" }, on = /* @__PURE__ */ R({
-  __name: "select",
-  props: /* @__PURE__ */ Y({
-    hasDelete: { type: Boolean, default: !1 },
-    readonly: { type: Boolean, default: !1 },
-    items: {}
-  }, {
-    modelValue: {},
-    modelModifiers: {}
-  }),
-  emits: /* @__PURE__ */ Y(["delete"], ["update:modelValue"]),
-  setup(t, { emit: s }) {
-    const { t: n } = te(), e = z(t, "modelValue"), l = s, o = Te(), i = K(() => {
-      const r = [];
-      return Fe[o.value]?.items[t.items].forEach(({ title: u, value: a }) => {
-        r.push({ title: n(u), value: a });
-      }), r;
-    });
-    return (r, u) => {
-      const a = U("v-select"), f = U("v-btn"), d = le("ripple");
-      return C(), E("div", ln, [
-        ee(D(a, {
-          modelValue: e.value,
-          "onUpdate:modelValue": u[0] || (u[0] = (g) => e.value = g),
-          density: "compact",
-          "hide-details": "",
-          items: i.value,
-          readonly: t.readonly,
-          "single-line": ""
-        }, null, 8, ["modelValue", "items", "readonly"]), [
-          [
-            d,
-            void 0,
-            void 0,
-            { stop: !0 }
-          ]
-        ]),
-        t.hasDelete ? (C(), B(f, {
-          key: 0,
-          class: "mx-2",
-          density: "compact",
-          icon: "mdi-minus",
-          variant: "text",
-          onClick: u[1] || (u[1] = X((g) => l("delete"), ["stop"]))
-        })) : G("", !0)
-      ]);
-    };
-  }
-});
-function sn(t) {
-  return { renderUiSelect: (n, e, l, o, i) => e.ui !== "select" ? (console.assert(!1), y("div", "renderUiSelect property ui must be select")) : y(on, {
+function Tn(t) {
+  return { renderUiCompSelect: (n, e, l, o, i) => e.ui !== "compSelect" ? (console.assert(!1), h("div", "renderUiCompSelect property ui must be compSelect")) : h(sn, {
+    modelValue: ne(
+      n,
+      e,
+      l,
+      t,
+      o,
+      i
+    ),
+    "onUpdate:modelValue": (u) => {
+      se(
+        n,
+        e,
+        l,
+        u,
+        t,
+        o,
+        i
+      );
+    }
+  }) };
+}
+function Nn(t) {
+  return { renderUiDummy: (n, e, l, o, i) => {
+    if (e.ui !== "dummy") {
+      console.assert(!1, "renderUiDummy property ui must be dummy");
+      return;
+    }
+    ne(n, e, l, t, o, i);
+  } };
+}
+function On(t) {
+  return { renderUiJsonEditor: (n, e, l, o, i) => e.ui !== "jsonEditor" ? h("div", "renderUiJsonObject property ui must be jsonEditor") : h(an, {
+    modelValue: ne(
+      n,
+      e,
+      l,
+      t,
+      o,
+      i
+    ) ?? "{}",
+    "onUpdate:modelValue": (u) => {
+      se(
+        n,
+        e,
+        l,
+        u,
+        t,
+        o,
+        i
+      );
+    }
+  }) };
+}
+function Bn(t) {
+  return { renderUiMultiTypes: (n, e, l, o, i) => e.ui !== "multiTypes" ? (console.assert(!1), h("div", "renderUiMultiTypes property ui must be multiTypes")) : h(Cn, {
     modelValue: ne(
       n,
       e,
@@ -774,12 +1453,12 @@ function sn(t) {
       o,
       i
     ) ?? "",
-    "onUpdate:modelValue": (r) => {
-      oe(
+    "onUpdate:modelValue": (u) => {
+      se(
         n,
         e,
         l,
-        r,
+        u,
         t,
         o,
         i
@@ -789,221 +1468,11 @@ function sn(t) {
     onDelete: () => {
       o === void 0 || i || (l.splice(o, 1), t(n.slice(0, -1), l));
     },
-    items: e.items,
-    readonly: e.readonly
+    types: e.types
   }) };
 }
-const un = { class: "text-subtitle-2 ml-1" }, rn = { class: "text-caption text-grey ml-1" }, an = /* @__PURE__ */ R({
-  __name: "group",
-  props: {
-    id: {},
-    title: {},
-    collapse: { type: Boolean },
-    count: {}
-  },
-  emits: ["x-click"],
-  setup(t, { emit: s }) {
-    const { backgroundColor2: n, highlightColor: e } = ie(), l = t, o = s, i = O(!1), r = K(() => ({
-      background: i.value ? e.value : n.value,
-      height: "30px",
-      marginBottom: "1px",
-      userSelect: "none"
-    }));
-    return (u, a) => {
-      const f = U("v-icon"), d = le("ripple");
-      return ee((C(), E("div", {
-        class: "d-flex align-center cursor-pointer",
-        style: I(r.value),
-        onClick: a[0] || (a[0] = (g) => o("x-click", l.id)),
-        onMouseout: a[1] || (a[1] = (g) => i.value = !1),
-        onMouseover: a[2] || (a[2] = (g) => i.value = !0)
-      }, [
-        D(f, {
-          icon: l.collapse ? "mdi-chevron-right" : "mdi-chevron-down",
-          size: "small"
-        }, null, 8, ["icon"]),
-        F("span", un, W(l.title), 1),
-        F("span", rn, W(l.count), 1)
-      ], 36)), [
-        [d]
-      ]);
-    };
-  }
-}), cn = { class: "text-subtitle-1 ml-6" }, dn = /* @__PURE__ */ R({
-  __name: "item",
-  props: {
-    id: {},
-    title: {}
-  },
-  emits: ["x-click"],
-  setup(t, { emit: s }) {
-    const { backgroundColor2: n, highlightColor: e } = ie(), l = t, o = s, i = O(!1), r = K(() => ({
-      background: i.value ? e.value : n.value,
-      height: "48px",
-      marginBottom: "1px",
-      userSelect: "none"
-    }));
-    return (u, a) => {
-      const f = le("ripple");
-      return ee((C(), E("div", {
-        class: "d-flex align-center cursor-pointer",
-        style: I(r.value),
-        onClick: a[0] || (a[0] = (d) => o("x-click", l.id)),
-        onMouseout: a[1] || (a[1] = (d) => i.value = !1),
-        onMouseover: a[2] || (a[2] = (d) => i.value = !0)
-      }, [
-        F("span", cn, W(l.title), 1)
-      ], 36)), [
-        [f]
-      ]);
-    };
-  }
-}), fn = { key: 0 }, mn = {
-  key: 1,
-  class: "text-body-2 text-grey ml-3"
-}, vn = /* @__PURE__ */ R({
-  __name: "index",
-  props: {
-    modelValue: {},
-    modelModifiers: {},
-    open: { type: Boolean, required: !0 },
-    openModifiers: {}
-  },
-  emits: ["update:modelValue", "update:open"],
-  setup(t) {
-    const { t: s } = te(), n = z(t, "modelValue"), e = z(t, "open"), l = Ze(), o = (r) => {
-      const u = He(l, r);
-      u && kt(l, r, !u.collapse);
-    }, i = (r) => {
-      n.value = r, e.value = !1, re.emit("refreshDepends");
-    };
-    return (r, u) => L(l).length > 0 ? (C(), E("div", fn, [
-      (C(!0), E(Ve, null, Be(L(l), (a) => (C(), E(Ve, {
-        key: a.id
-      }, [
-        a.type === 0 ? (C(), B(an, {
-          key: 0,
-          id: a.id,
-          collapse: a.collapse,
-          count: a.count ?? 0,
-          title: a.name,
-          onXClick: o
-        }, null, 8, ["id", "collapse", "count", "title"])) : G("", !0),
-        a.type === 1 && a.show ? (C(), B(dn, {
-          key: 1,
-          id: a.id,
-          title: a.name,
-          onXClick: i
-        }, null, 8, ["id", "title"])) : G("", !0)
-      ], 64))), 128))
-    ])) : (C(), E("div", mn, W(L(s)("x-prop-tree.noComp")), 1));
-  }
-}), pn = { class: "text-subtitle-1 ml-3" }, gn = /* @__PURE__ */ R({
-  __name: "index",
-  props: {
-    modelValue: {},
-    modelModifiers: {}
-  },
-  emits: ["update:modelValue"],
-  setup(t) {
-    const { t: s } = te(), n = St(), { sysBarAvail: e } = pe(), { backgroundColor1: l } = ie(), o = z(t, "modelValue"), i = Ze(), r = K(() => {
-      let g = "100%";
-      return n.mdAndUp.value && (g = "400px"), {
-        background: l.value,
-        width: g,
-        height: "100%"
-      };
-    }), u = K(() => {
-      let g = 48;
-      return e.value && (g += 24), {
-        position: "relative",
-        height: `calc(100% - ${g}px)`
-      };
-    }), a = K(() => ({
-      height: "60px"
-    })), f = K(() => {
-      if (!o.value)
-        return s("x-runtime-lib.notSet");
-      const g = He(i, o.value);
-      return g ? g.name : s("x-runtime-lib.compNotAvail");
-    }), { open: d } = xe(`propTreeCompSelectDlg${we()}`);
-    return De(() => {
-      d.value = !1;
-    }), (g, h) => {
-      const V = U("v-btn"), x = U("v-sheet"), P = U("v-icon"), T = U("v-dialog");
-      return C(), B(T, {
-        modelValue: L(d),
-        "onUpdate:modelValue": h[5] || (h[5] = (w) => ve(d) ? d.value = w : null),
-        fullscreen: "",
-        "no-click-animation": "",
-        persistent: "",
-        transition: "scroll-x-reverse-transition",
-        onKeydown: h[6] || (h[6] = Ke(X((w) => d.value = !1, ["stop", "prevent"]), ["esc"]))
-      }, {
-        activator: J(({ props: w }) => [
-          D(V, be(w, {
-            block: "",
-            density: "comfortable"
-          }), {
-            default: J(() => [
-              Ce(W(f.value), 1)
-            ]),
-            _: 1
-          }, 16)
-        ]),
-        default: J(() => [
-          F("div", {
-            class: "w-100 h-100 d-flex flex-row-reverse",
-            onClick: h[3] || (h[3] = X((w) => d.value = !1, ["self"])),
-            onContextmenu: h[4] || (h[4] = X((w) => d.value = !1, ["self", "prevent"]))
-          }, [
-            F("div", {
-              class: "elevation-2",
-              style: I(r.value)
-            }, [
-              L(e) ? (C(), B(x, {
-                key: 0,
-                color: "transparent",
-                height: 24
-              })) : G("", !0),
-              D(x, {
-                class: "d-flex align-center px-3",
-                color: "transparent",
-                height: 48
-              }, {
-                default: J(() => [
-                  D(P, {
-                    icon: "mdi-close",
-                    onClick: h[0] || (h[0] = (w) => d.value = !1)
-                  }),
-                  F("span", pn, W(L(s)("x-prop-tree.dlg.compSelect.title")), 1)
-                ]),
-                _: 1
-              }),
-              F("div", {
-                class: "overflow-y-auto",
-                style: I(u.value)
-              }, [
-                D(vn, {
-                  modelValue: o.value,
-                  "onUpdate:modelValue": h[1] || (h[1] = (w) => o.value = w),
-                  open: L(d),
-                  "onUpdate:open": h[2] || (h[2] = (w) => ve(d) ? d.value = w : null)
-                }, null, 8, ["modelValue", "open"]),
-                F("div", {
-                  style: I(a.value)
-                }, null, 4)
-              ], 4)
-            ], 4)
-          ], 32)
-        ]),
-        _: 1
-      }, 8, ["modelValue"]);
-    };
-  }
-});
-function hn(t) {
-  return { renderUiCompSelect: (n, e, l, o, i) => e.ui !== "compSelect" ? (console.assert(!1), y("div", "renderUiCompSelect property ui must be compSelect")) : y(gn, {
+function qn(t) {
+  return { renderUiNumInput: (n, e, l, o, i) => e.ui !== "numInput" ? (console.assert(!1), h("div", "renderUiNumInput property ui must be numInput")) : h($n, {
     modelValue: ne(
       n,
       e,
@@ -1012,90 +1481,85 @@ function hn(t) {
       o,
       i
     ),
-    "onUpdate:modelValue": (r) => {
-      oe(
+    "onUpdate:modelValue": (u) => {
+      se(
         n,
         e,
         l,
-        r,
+        u,
         t,
         o,
         i
       );
-    }
+    },
+    hasDelete: o !== void 0 && !i,
+    onDelete: () => {
+      o === void 0 || i || (l.splice(o, 1), t(n.slice(0, -1), l));
+    },
+    precision: e.precision,
+    min: e.min,
+    max: e.max,
+    step: e.step,
+    readonly: e.readonly
   }) };
 }
-const yn = { class: "d-flex justify-space-between align-center" }, kn = /* @__PURE__ */ R({
-  __name: "colorPicker",
-  props: /* @__PURE__ */ Y({
-    hasDelete: { type: Boolean, default: !1 },
-    readonly: { type: Boolean, default: !1 }
-  }, {
-    modelValue: {},
-    modelModifiers: {}
-  }),
-  emits: /* @__PURE__ */ Y(["delete"], ["update:modelValue"]),
+const Kn = /* @__PURE__ */ J({
+  __name: "entry",
+  props: {
+    minHeight: {}
+  },
+  emits: ["menu"],
   setup(t, { emit: s }) {
-    const { t: n } = te(), e = z(t, "modelValue"), l = s, o = K(() => {
-      let u = "100%";
-      return t.hasDelete && (u = "calc(100% - 37px)"), {
-        width: u
-      };
-    }), i = K(() => t.readonly), { open: r } = xe(`propTreeColorPickerMenu${we()}`);
-    return De(() => {
-      r.value = !1;
-    }), (u, a) => {
-      const f = U("v-btn"), d = U("v-color-picker"), g = U("v-menu");
-      return C(), B(g, {
-        modelValue: L(r),
-        "onUpdate:modelValue": a[2] || (a[2] = (h) => ve(r) ? r.value = h : null),
-        "close-on-content-click": !1,
-        scrim: "transparent"
-      }, {
-        activator: J(({ props: h }) => [
-          F("div", yn, [
-            F("div", {
-              class: "flex-grow-1",
-              style: I(o.value)
-            }, [
-              D(f, be(h, {
-                block: "",
-                color: e.value,
-                density: "comfortable",
-                disabled: i.value
-              }), {
-                default: J(() => [
-                  Ce(W(e.value ? e.value : L(n)("x-runtime-lib.notSet")), 1)
-                ]),
-                _: 1
-              }, 16, ["color", "disabled"])
-            ], 4),
-            t.hasDelete ? (C(), B(f, {
-              key: 0,
-              class: "mx-2",
-              density: "compact",
-              icon: "mdi-minus",
-              variant: "text",
-              onClick: a[0] || (a[0] = X((V) => l("delete"), ["stop"]))
-            })) : G("", !0)
-          ])
-        ]),
-        default: J(() => [
-          D(d, {
-            modelValue: e.value,
-            "onUpdate:modelValue": a[1] || (a[1] = (h) => e.value = h),
-            mode: "hexa",
-            "show-swatches": "",
-            "swatches-max-height": "150px"
-          }, null, 8, ["modelValue"])
-        ]),
-        _: 1
-      }, 8, ["modelValue"]);
+    const { backgroundColor2: n, highlightColor: e } = te(), l = s, o = O(!1), i = A(() => ({
+      background: o.value ? e.value : n.value,
+      minHeight: t.minHeight,
+      paddingRight: "4px",
+      marginBottom: "1px",
+      userSelect: "none"
+    })), u = (r) => {
+      l("menu", r.clientX, r.clientY);
+    };
+    return (r, a) => {
+      const m = ee("ripple");
+      return Z((_(), q("div", {
+        class: "d-flex justify-space-between align-center cursor-pointer",
+        style: W(i.value),
+        onContextmenu: X(u, ["self", "prevent"]),
+        onMouseout: a[0] || (a[0] = (c) => o.value = !1),
+        onMouseover: a[1] || (a[1] = (c) => o.value = !0)
+      }, [
+        ht(r.$slots, "default")
+      ], 36)), [
+        [m]
+      ]);
     };
   }
 });
-function _n(t) {
-  return { renderUiColorPicker: (n, e, l, o, i) => e.ui !== "colorPicker" ? (console.assert(!1), y("div", "renderUiColorPicker property ui must be colorPicker")) : y(kn, {
+function Jn(t, s, n) {
+  const { t: e } = j();
+  return { renderProperty: (o, i, u) => {
+    const r = o[o.length - 1];
+    let m = typeof r == "number" ? `[${r + 1}]` : e(i.name);
+    return me(t.value, o) && (m += " *"), h(
+      Kn,
+      {
+        minHeight: s.value,
+        onMenu: (c, v) => {
+          de.emit("propTreeMenu", { x: c, y: v, keys: o });
+        }
+      },
+      () => [
+        h("span", {
+          style: { marginLeft: "4px", pointerEvents: "none" },
+          innerHTML: m
+        }),
+        h("div", { style: { width: n.value } }, u)
+      ]
+    );
+  } };
+}
+function Rn(t) {
+  return { renderUiSelect: (n, e, l, o, i) => e.ui !== "select" ? (console.assert(!1), h("div", "renderUiSelect property ui must be select")) : h(wn, {
     modelValue: ne(
       n,
       e,
@@ -1103,13 +1567,13 @@ function _n(t) {
       t,
       o,
       i
-    ),
-    "onUpdate:modelValue": (r) => {
-      oe(
+    ) ?? "",
+    "onUpdate:modelValue": (u) => {
+      se(
         n,
         e,
         l,
-        r,
+        u,
         t,
         o,
         i
@@ -1119,109 +1583,12 @@ function _n(t) {
     onDelete: () => {
       o === void 0 || i || (l.splice(o, 1), t(n.slice(0, -1), l));
     },
+    items: e.items,
     readonly: e.readonly
   }) };
 }
-const Vn = { class: "d-flex justify-space-between align-center my-2" }, Cn = { class: "flex-grow-1" }, xn = /* @__PURE__ */ R({
-  __name: "multiTypes",
-  props: /* @__PURE__ */ Y({
-    hasDelete: { type: Boolean, default: !1 },
-    types: {}
-  }, {
-    modelValue: {},
-    modelModifiers: {}
-  }),
-  emits: /* @__PURE__ */ Y(["delete"], ["update:modelValue"]),
-  setup(t, { emit: s }) {
-    const { t: n } = te(), { isMobile: e } = pe(), l = z(t, "modelValue"), o = s, i = Te(), r = K(() => Fe[i.value]?.types[t.types]), u = O(0), a = K(() => {
-      const V = [];
-      return r.value?.forEach(({ title: x }, P) => {
-        V.push({
-          title: n(x),
-          value: P
-        });
-      }), V;
-    });
-    Ne(() => {
-      r.value?.some((V, x) => V.validator(l.value) ? (u.value = x, !0) : !1);
-    });
-    const f = K(() => r.value?.[u.value]), d = () => {
-      l.value = f.value?.default;
-    }, g = O(0), h = async (V) => {
-      if (!V || !e() || f.value.ui !== "pixelInput" && f.value.ui !== "percentInput")
-        return;
-      const x = await Re({
-        title: "",
-        value: g.value,
-        precision: f.value.precision,
-        min: f.value.min,
-        max: f.value.max,
-        step: f.value.step
-      });
-      x !== void 0 && (g.value = x);
-    };
-    return Ne(() => {
-      f.value?.ui === "pixelInput" ? g.value = Vt(l.value) : f.value?.ui === "percentInput" && (g.value = Ct(l.value));
-    }), ue(g, (V) => {
-      f.value?.ui === "pixelInput" ? l.value = V + "px" : f.value?.ui === "percentInput" && (l.value = V + "%");
-    }), (V, x) => {
-      const P = U("v-select"), T = U("v-number-input"), w = U("v-btn"), k = le("ripple");
-      return C(), E("div", Vn, [
-        F("div", Cn, [
-          ee(D(P, {
-            modelValue: u.value,
-            "onUpdate:modelValue": [
-              x[0] || (x[0] = (M) => u.value = M),
-              d
-            ],
-            density: "compact",
-            "hide-details": "",
-            items: a.value,
-            "single-line": ""
-          }, null, 8, ["modelValue", "items"]), [
-            [
-              k,
-              void 0,
-              void 0,
-              { stop: !0 }
-            ]
-          ]),
-          f.value?.ui === "pixelInput" || f.value?.ui === "percentInput" ? ee((C(), B(T, {
-            key: 0,
-            modelValue: g.value,
-            "onUpdate:modelValue": x[1] || (x[1] = (M) => g.value = M),
-            "control-variant": "stacked",
-            density: "compact",
-            "hide-details": "",
-            max: f.value.max,
-            min: f.value.min,
-            precision: f.value.precision,
-            "single-line": "",
-            step: f.value.step,
-            "onUpdate:focused": h
-          }, null, 8, ["modelValue", "max", "min", "precision", "step"])), [
-            [
-              k,
-              void 0,
-              void 0,
-              { stop: !0 }
-            ]
-          ]) : G("", !0)
-        ]),
-        t.hasDelete ? (C(), B(w, {
-          key: 0,
-          class: "mx-2",
-          density: "compact",
-          icon: "mdi-minus",
-          variant: "text",
-          onClick: x[2] || (x[2] = X((M) => o("delete"), ["stop"]))
-        })) : G("", !0)
-      ]);
-    };
-  }
-});
-function Sn(t) {
-  return { renderUiMultiTypes: (n, e, l, o, i) => e.ui !== "multiTypes" ? (console.assert(!1), y("div", "renderUiMultiTypes property ui must be multiTypes")) : y(xn, {
+function En(t) {
+  return { renderUiSlotSelect: (n, e, l, o, i) => e.ui !== "slotSelect" ? (console.assert(!1), h("div", "renderUiSlotSelect property ui must be slotSelect")) : h(_n, {
     modelValue: ne(
       n,
       e,
@@ -1229,13 +1596,36 @@ function Sn(t) {
       t,
       o,
       i
-    ) ?? "",
-    "onUpdate:modelValue": (r) => {
-      oe(
+    ),
+    "onUpdate:modelValue": (u) => {
+      se(
         n,
         e,
         l,
-        r,
+        u,
+        t,
+        o,
+        i
+      );
+    }
+  }) };
+}
+function Hn(t) {
+  return { renderUiStrInput: (n, e, l, o, i) => e.ui !== "strInput" ? (console.assert(!1), h("div", "renderUiStrInput property ui must be strInput")) : h(Pn, {
+    modelValue: e.static ? e.value : ne(
+      n,
+      e,
+      l,
+      t,
+      o,
+      i
+    ),
+    "onUpdate:modelValue": (u) => {
+      e.static || se(
+        n,
+        e,
+        l,
+        u,
         t,
         o,
         i
@@ -1245,141 +1635,11 @@ function Sn(t) {
     onDelete: () => {
       o === void 0 || i || (l.splice(o, 1), t(n.slice(0, -1), l));
     },
-    types: e.types
+    readonly: e.static || e.readonly
   }) };
 }
-const Un = /* @__PURE__ */ R({
-  __name: "editor",
-  props: {
-    modelValue: { required: !0 },
-    modelModifiers: {},
-    lock: { type: Boolean, required: !0 },
-    lockModifiers: {},
-    scale: { required: !0 },
-    scaleModifiers: {}
-  },
-  emits: ["update:modelValue", "update:lock", "update:scale"],
-  setup(t, { expose: s }) {
-    const n = z(t, "modelValue"), e = z(t, "lock"), l = z(t, "scale"), o = ht(), i = yt(), r = Te(), u = Je("target"), a = () => {
-      const d = JSON.parse(n.value);
-      u.value?.load(d);
-    };
-    return s({ save: () => {
-      const d = u.value.save();
-      n.value = JSON.stringify(d, null, 2);
-    } }), (d, g) => (C(), B(L(Ut), {
-      ref_key: "target",
-      ref: u,
-      lock: e.value,
-      "onUpdate:lock": g[0] || (g[0] = (h) => e.value = h),
-      scale: l.value,
-      "onUpdate:scale": g[1] || (g[1] = (h) => l.value = h),
-      dark: L(o),
-      locale: L(i),
-      type: "json",
-      version: L(r),
-      onReady: a
-    }, null, 8, ["lock", "scale", "dark", "locale", "version"]));
-  }
-}), $n = { class: "text-subtitle-1" }, Pn = /* @__PURE__ */ R({
-  __name: "index",
-  props: {
-    modelValue: { required: !0 },
-    modelModifiers: {}
-  },
-  emits: ["update:modelValue"],
-  setup(t) {
-    const { t: s } = te(), { sysBarAvail: n } = pe(), { backgroundColor0: e, backgroundColor1: l, backgroundColor2: o } = ie(), i = z(t, "modelValue"), r = O(!1), u = O(1), a = K(() => {
-      let h = 48;
-      return n.value && (h += 24), {
-        position: "relative",
-        background: l.value,
-        height: `calc(100% - ${h}px)`
-      };
-    }), f = K(() => s("x-prop-tree.dlg.jsonObject.title")), { open: d } = xe(`propTreeJsonObjectDlg${we()}`);
-    De(() => {
-      d.value = !1;
-    });
-    const g = Je("editor");
-    return ue(d, (h) => {
-      h || g.value?.save();
-    }), (h, V) => {
-      const x = U("v-btn"), P = U("v-sheet"), T = U("v-spacer"), w = U("v-dialog");
-      return C(), B(w, {
-        modelValue: L(d),
-        "onUpdate:modelValue": V[4] || (V[4] = (k) => ve(d) ? d.value = k : null),
-        attach: "",
-        fullscreen: "",
-        "no-click-animation": "",
-        persistent: "",
-        transition: "dialog-bottom-transition",
-        onKeydown: V[5] || (V[5] = Ke(X((k) => d.value = !1, ["stop", "prevent"]), ["esc"]))
-      }, {
-        activator: J(({ props: k }) => [
-          D(x, be(k, {
-            block: "",
-            density: "comfortable"
-          }), {
-            default: J(() => [
-              Ce(W(f.value), 1)
-            ]),
-            _: 1
-          }, 16)
-        ]),
-        default: J(() => [
-          D(P, {
-            color: L(e),
-            height: "100%",
-            width: "100%"
-          }, {
-            default: J(() => [
-              L(n) ? (C(), B(P, {
-                key: 0,
-                color: L(o),
-                height: 24
-              }, null, 8, ["color"])) : G("", !0),
-              D(P, {
-                class: "d-flex align-center px-2",
-                color: L(o),
-                height: 48
-              }, {
-                default: J(() => [
-                  D(x, {
-                    density: "comfortable",
-                    icon: "mdi-close",
-                    variant: "text",
-                    onClick: V[0] || (V[0] = (k) => d.value = !1)
-                  }),
-                  F("span", $n, W(L(s)("x-prop-tree.dlg.jsonObject.title")), 1),
-                  D(T)
-                ]),
-                _: 1
-              }, 8, ["color"]),
-              F("div", {
-                style: I(a.value)
-              }, [
-                D(Un, {
-                  ref_key: "editor",
-                  ref: g,
-                  modelValue: i.value,
-                  "onUpdate:modelValue": V[1] || (V[1] = (k) => i.value = k),
-                  lock: r.value,
-                  "onUpdate:lock": V[2] || (V[2] = (k) => r.value = k),
-                  scale: u.value,
-                  "onUpdate:scale": V[3] || (V[3] = (k) => u.value = k)
-                }, null, 8, ["modelValue", "lock", "scale"])
-              ], 4)
-            ]),
-            _: 1
-          }, 8, ["color"])
-        ]),
-        _: 1
-      }, 8, ["modelValue"]);
-    };
-  }
-});
-function Mn(t) {
-  return { renderUiJsonEditor: (n, e, l, o, i) => e.ui !== "jsonEditor" ? y("div", "renderUiJsonObject property ui must be jsonEditor") : y(Pn, {
+function Xn(t) {
+  return { renderUiSwitch: (n, e, l, o, i) => e.ui !== "switch" ? (console.assert(!1), h("div", "renderUiSwitch property ui must be switch")) : h(An, {
     modelValue: ne(
       n,
       e,
@@ -1387,21 +1647,26 @@ function Mn(t) {
       t,
       o,
       i
-    ) ?? "{}",
-    "onUpdate:modelValue": (r) => {
-      oe(
+    ) ?? !1,
+    "onUpdate:modelValue": (u) => {
+      se(
         n,
         e,
         l,
-        r,
+        u,
         t,
         o,
         i
       );
-    }
+    },
+    hasDelete: o !== void 0 && !i,
+    onDelete: () => {
+      o === void 0 || i || (l.splice(o, 1), t(n.slice(0, 1), l));
+    },
+    readonly: e.readonly
   }) };
 }
-const wn = /* @__PURE__ */ R({
+const Fn = /* @__PURE__ */ J({
   __name: "index",
   props: {
     unique: {},
@@ -1411,101 +1676,125 @@ const wn = /* @__PURE__ */ R({
   },
   emits: ["change"],
   setup(t, { emit: s }) {
-    const { t: n } = te(), { backgroundColor1: e } = ie(), l = t, o = s, i = O("20px"), r = O("56px"), u = O("200px"), a = mt({}), f = O({}), d = (v, c) => {
-      qe(f, l.config, l.object), o("change", v, c);
+    const { t: n } = j(), { backgroundColor1: e } = te(), l = t, o = s, i = O("20px"), u = O("56px"), r = O("200px"), a = _t({}), m = O({}), c = (g, d) => {
+      Je(m, l.config, l.object), o("change", g, d);
     };
-    ue(
+    ce(
       [() => l.config, () => l.object],
       () => {
-        qe(f, l.config, l.object, (v, c) => {
-          o("change", v, c);
-        });
+        Je(
+          m,
+          l.config,
+          l.object,
+          (g, d) => {
+            o("change", g, d);
+          }
+        );
       },
       { immediate: !0 }
     );
-    const g = O(l.version);
-    Tt(g), ue(
+    const v = O(l.version);
+    Bt(v), ce(
       () => l.version,
       () => {
-        g.value = l.version;
+        v.value = l.version;
       }
     );
-    const h = O(l.config);
-    Lt(h), ue(
+    const f = O(l.config);
+    qt(f), ce(
       () => l.config,
       () => {
-        h.value = l.config;
+        f.value = l.config;
       }
     );
     const V = O(l.object);
-    Ot(V), ue(
+    Jt(V), ce(
       () => l.object,
       () => {
         V.value = l.object;
       }
-    ), Bt(f), Jt(d);
-    const x = O([]);
-    Et(x);
-    const P = () => {
-      const { compGroups: v, comps: c } = xt.app.activeApp, p = [];
-      v.forEach(({ id: m, name: _, position: $ }) => {
-        const A = x.value.find((Z) => Z.id === m);
-        p.push({
-          id: m,
+    ), Et(m), Xt(c);
+    const U = O([]);
+    zt(U);
+    const M = () => {
+      const { compGroups: g, comps: d } = wt.app.activeApp, y = [];
+      g.forEach(({ id: p, name: S, position: w }) => {
+        const N = U.value.find((le) => le.id === p);
+        y.push({
+          id: p,
           type: 0,
-          name: _,
-          position: $,
-          collapse: A?.collapse ?? !0
+          name: S,
+          position: w,
+          collapse: N?.collapse ?? !0
         });
-      }), c.forEach(({ id: m, groupId: _, name: $, position: A }) => {
-        p.push({ id: m, type: 1, name: $, position: A, group: _ });
-      }), _t(p, !0), x.value = p;
-    };
-    let T;
-    const w = () => {
-      clearTimeout(T), T = window.setTimeout(() => {
-        P(), T && w();
+      }), d.forEach(({ id: p, groupId: S, name: w, position: N }) => {
+        y.push({ id: p, type: 1, name: w, position: N, group: S });
+      }), Ut(y, !0), U.value = y;
+    }, R = O([]);
+    Gt(R);
+    let k;
+    const x = () => {
+      clearTimeout(k), k = window.setTimeout(() => {
+        M(), k && x();
       }, 1e3);
-    }, k = () => {
-      clearTimeout(T), T = void 0;
+    }, P = () => {
+      clearTimeout(k), k = void 0;
     };
-    vt(() => {
-      w();
-    }), pt(() => {
-      k();
+    kt(() => {
+      x();
+    }), xt(() => {
+      P();
     });
-    const { renderProp: M } = zt(f, r, u), { renderUiDummy: N } = Gt(d), { renderUiStrInput: Q } = Qt(d), { renderUiNumInput: Pe } = It(d), { renderUiSwitch: je } = nn(d), { renderUiSelect: Ie } = sn(d), { renderUiColorPicker: et } = _n(d), { renderUiJsonEditor: tt } = Mn(d), { renderUiMultiTypes: nt } = Sn(d), { renderUiCompSelect: lt } = hn(d), ge = (v, c, p, m, _, $) => (v = Ee(v), _ !== void 0 ? (v.push(_), $ && v.push(c.key)) : v.push(c.key), c.ui ? c.array && m ? it(v, c, p, m, _, $) : ut(v, c, p, _, $) : c.array ? ot(v, c, p, m, _, $) : st(
-      v,
-      c,
-      p,
+    const { renderProperty: E } = Jn(
       m,
-      _,
-      $
-    )), ot = (v, c, p, m, _, $) => {
-      if (c.ui)
-        return console.assert(!1), y("div", "renderBranchArray property ui must be invalid");
-      if (!c.array)
-        return console.assert(!1), y("div", "renderBranchArray property array must be valid");
-      if (!m)
-        return console.assert(!1), y("div", "renderBranchArray branch must be valid");
-      let A;
-      _ !== void 0 && !$ ? (p[_] instanceof Array || (p[_] = q(c), d(v, p[c.key])), A = p[_]) : (p[c.key] instanceof Array || (p[c.key] = q(c), d(v, p[c.key])), A = p[c.key]);
-      let Z = n(c.name);
-      m.collapse && ae(f.value, v) && (Z += " *");
-      const fe = y(_e, {
-        title: Z,
-        collapse: m.collapse,
+      u,
+      r
+    ), { renderUiDummy: I } = Nn(c), { renderUiStrInput: De } = Hn(c), { renderUiNumInput: nt } = qn(c), { renderUiSwitch: lt } = Xn(c), { renderUiSelect: ot } = Rn(c), { renderUiColorPicker: st } = Ln(c), { renderUiJsonEditor: it } = On(c), { renderUiMultiTypes: ut } = Bn(c), { renderUiCompSelect: rt } = Tn(c), { renderUiSlotSelect: at } = En(c), _e = (g, d, y, p, S, w) => (g = He(g), S !== void 0 ? (g.push(S), w && g.push(d.key)) : g.push(d.key), d.ui ? d.array && p ? mt(
+      g,
+      d,
+      y,
+      p,
+      S,
+      w
+    ) : ft(g, d, y, S, w) : d.array ? ct(
+      g,
+      d,
+      y,
+      p,
+      S,
+      w
+    ) : dt(
+      g,
+      d,
+      y,
+      p,
+      S,
+      w
+    )), ct = (g, d, y, p, S, w) => {
+      if (d.ui)
+        return console.assert(!1), h("div", "renderBranchArray property ui must be invalid");
+      if (!d.array)
+        return console.assert(!1), h("div", "renderBranchArray property array must be valid");
+      if (!p)
+        return console.assert(!1), h("div", "renderBranchArray branch must be valid");
+      let N;
+      S !== void 0 && !w ? (y[S] instanceof Array || (y[S] = H(d), c(g, y[d.key])), N = y[S]) : (y[d.key] instanceof Array || (y[d.key] = H(d), c(g, y[d.key])), N = y[d.key]);
+      let le = n(d.name);
+      p.collapse && me(m.value, g) && (le += " *");
+      const pe = h(Se, {
+        title: le,
+        collapse: p.collapse,
         hasCreate: !0,
-        onCollapse: (S) => {
-          m.collapse = S;
+        onCollapse: ($) => {
+          p.collapse = $;
         },
-        onMenu: (S, b) => {
-          re.emit("propTreeMenu", { x: S, y: b, keys: v });
+        onMenu: ($, L) => {
+          de.emit("propTreeMenu", { x: $, y: L, keys: g });
         },
         onCreate: () => {
-          A.push({}), d(v, A);
+          N.push({}), c(g, N);
         }
-      }), H = y(
+      }), Y = h(
         "div",
         {
           style: {
@@ -1513,44 +1802,44 @@ const wn = /* @__PURE__ */ R({
           }
         },
         (() => {
-          const S = [];
-          for (let b = 0; b < A.length; b++) {
-            if (!Me(m.children)) {
+          const $ = [];
+          for (let L = 0; L < N.length; L++) {
+            if (!Ae(p.children)) {
               console.assert(!1);
               break;
             }
-            m.children[b] || m.children.push({
+            p.children[L] || p.children.push({
               collapse: !0,
               children: {}
             });
-            const he = [...v, b], ye = m.children[b];
-            let Le = `[${b + 1}]`;
-            m.children[b].collapse && ae(f.value, he) && (Le += " *");
-            const at = y(_e, {
-              title: Le,
-              collapse: m.children[b].collapse,
+            const ke = [...g, L], xe = p.children[L];
+            let Be = `[${L + 1}]`;
+            p.children[L].collapse && me(m.value, ke) && (Be += " *");
+            const pt = h(Se, {
+              title: Be,
+              collapse: p.children[L].collapse,
               hasDelete: !0,
-              index: b,
-              onCollapse: (j) => {
-                if (!Me(m.children)) {
+              index: L,
+              onCollapse: (oe) => {
+                if (!Ae(p.children)) {
                   console.assert(!1);
                   return;
                 }
-                m.children[b].collapse = j;
+                p.children[L].collapse = oe;
               },
-              onMenu: (j, se) => {
-                re.emit("propTreeMenu", { x: j, y: se, keys: he });
+              onMenu: (oe, ie) => {
+                de.emit("propTreeMenu", { x: oe, y: ie, keys: ke });
               },
-              onDelete: (j) => {
-                if (!Me(m.children)) {
+              onDelete: (oe) => {
+                if (!Ae(p.children)) {
                   console.assert(!1);
                   return;
                 }
-                m.children.splice(j, 1), A.splice(j, 1), d(v, A);
+                p.children.splice(oe, 1), N.splice(oe, 1), c(g, N);
               }
             });
-            S.push(at);
-            const ct = y(
+            $.push(pt);
+            const gt = h(
               "div",
               {
                 style: {
@@ -1558,34 +1847,34 @@ const wn = /* @__PURE__ */ R({
                 }
               },
               (() => {
-                const j = [];
-                return c.children.forEach((se) => {
-                  if (!Oe(ye.children)) {
+                const oe = [];
+                return d.children.forEach((ie) => {
+                  if (!Ke(xe.children)) {
                     console.assert(!1);
                     return;
                   }
-                  ye.children[se.key] || (ye.children[se.key] = {
+                  xe.children[ie.key] || (xe.children[ie.key] = {
                     collapse: !0,
-                    children: se.array ? [] : {}
+                    children: ie.array ? [] : {}
                   });
-                  const dt = ge(
-                    v,
-                    se,
-                    A[b],
-                    ye.children[se.key],
-                    b,
+                  const yt = _e(
+                    g,
+                    ie,
+                    N[L],
+                    xe.children[ie.key],
+                    L,
                     !0
                   );
-                  j.push(dt);
-                }), j;
+                  oe.push(yt);
+                }), oe;
               })()
             );
-            m.children[b].collapse || S.push(ct);
+            p.children[L].collapse || $.push(gt);
           }
-          return S;
+          return $;
         })()
       );
-      return y(
+      return h(
         "div",
         {
           style: {
@@ -1593,33 +1882,33 @@ const wn = /* @__PURE__ */ R({
           }
         },
         (() => {
-          const S = [];
-          return S.push(fe), m.collapse || S.push(H), S;
+          const $ = [];
+          return $.push(pe), p.collapse || $.push(Y), $;
         })()
       );
-    }, st = (v, c, p, m, _, $) => {
-      if (c.ui)
-        return console.assert(!1), y("div", "renderBranchScalar property ui must be invalid");
-      if (c.array)
-        return console.assert(!1), y("div", "renderBranchScalar property array must be invalid");
-      if (!m)
-        return console.assert(!1), y("div", "renderBranchScalar branch must be valid");
-      let A = n(c.name);
-      m.collapse && ae(f.value, v) && (A += " *");
-      const Z = y(_e, {
-        title: A,
-        collapse: m.collapse,
-        hasDelete: _ !== void 0 && !$,
-        onCollapse: (H) => {
-          m.collapse = H;
+    }, dt = (g, d, y, p, S, w) => {
+      if (d.ui)
+        return console.assert(!1), h("div", "renderBranchScalar property ui must be invalid");
+      if (d.array)
+        return console.assert(!1), h("div", "renderBranchScalar property array must be invalid");
+      if (!p)
+        return console.assert(!1), h("div", "renderBranchScalar branch must be valid");
+      let N = n(d.name);
+      p.collapse && me(m.value, g) && (N += " *");
+      const le = h(Se, {
+        title: N,
+        collapse: p.collapse,
+        hasDelete: S !== void 0 && !w,
+        onCollapse: (Y) => {
+          p.collapse = Y;
         },
-        onMenu: (H, S) => {
-          re.emit("propTreeMenu", { x: H, y: S, keys: v });
+        onMenu: (Y, $) => {
+          de.emit("propTreeMenu", { x: Y, y: $, keys: g });
         },
         onDelete: () => {
-          _ === void 0 || $ || (p.splice(_, 1), d(v.slice(0, -1), p));
+          S === void 0 || w || (y.splice(S, 1), c(g.slice(0, -1), y));
         }
-      }), fe = y(
+      }), pe = h(
         "div",
         {
           style: {
@@ -1627,27 +1916,27 @@ const wn = /* @__PURE__ */ R({
           }
         },
         (() => {
-          const H = [];
-          return c.children.forEach((S) => {
-            if (!Oe(m.children)) {
+          const Y = [];
+          return d.children.forEach(($) => {
+            if (!Ke(p.children)) {
               console.assert(!1);
               return;
             }
-            m.children[S.key] || (m.children[S.key] = {
+            p.children[$.key] || (p.children[$.key] = {
               collapse: !0,
-              children: !S.ui && S.array ? [] : {}
+              children: !$.ui && $.array ? [] : {}
             });
-            const b = ge(
-              v,
-              S,
-              (typeof p[c.key] != "object" && (p[c.key] = {}, d(v, p[c.key])), p[c.key]),
-              m.children[S.key]
+            const L = _e(
+              g,
+              $,
+              (typeof y[d.key] != "object" && (y[d.key] = {}, c(g, y[d.key])), y[d.key]),
+              p.children[$.key]
             );
-            H.push(b);
-          }), H;
+            Y.push(L);
+          }), Y;
         })()
       );
-      return y(
+      return h(
         "div",
         {
           style: {
@@ -1655,35 +1944,35 @@ const wn = /* @__PURE__ */ R({
           }
         },
         (() => {
-          const H = [];
-          return H.push(Z), m.collapse || H.push(fe), H;
+          const Y = [];
+          return Y.push(le), p.collapse || Y.push(pe), Y;
         })()
       );
-    }, it = (v, c, p, m, _, $) => {
-      if (!c.ui)
-        return console.assert(!1), y("div", "renderLeafArray property ui must be valid");
-      if (!c.array)
-        return console.assert(!1), y("div", "renderLeafArray property array must be valid");
-      if (!m)
-        return console.assert(!1), y("div", "renderLeafArray branch must be valid");
-      let A;
-      _ !== void 0 && !$ ? (p[_] instanceof Array || (p[_] = q(c), d(v, p[_])), A = p[_]) : (p[c.key] instanceof Array || (p[c.key] = q(c), d(v, p[c.key])), A = p[c.key]);
-      let Z = n(c.name);
-      m.collapse && ae(f.value, v) && (Z += " *");
-      const fe = y(_e, {
-        title: Z,
-        collapse: m.collapse,
+    }, mt = (g, d, y, p, S, w) => {
+      if (!d.ui)
+        return console.assert(!1), h("div", "renderLeafArray property ui must be valid");
+      if (!d.array)
+        return console.assert(!1), h("div", "renderLeafArray property array must be valid");
+      if (!p)
+        return console.assert(!1), h("div", "renderLeafArray branch must be valid");
+      let N;
+      S !== void 0 && !w ? (y[S] instanceof Array || (y[S] = H(d), c(g, y[S])), N = y[S]) : (y[d.key] instanceof Array || (y[d.key] = H(d), c(g, y[d.key])), N = y[d.key]);
+      let le = n(d.name);
+      p.collapse && me(m.value, g) && (le += " *");
+      const pe = h(Se, {
+        title: le,
+        collapse: p.collapse,
         hasCreate: !0,
-        onCollapse: (S) => {
-          m.collapse = S;
+        onCollapse: ($) => {
+          p.collapse = $;
         },
-        onMenu: (S, b) => {
-          re.emit("propTreeMenu", { x: S, y: b, keys: v });
+        onMenu: ($, L) => {
+          de.emit("propTreeMenu", { x: $, y: L, keys: g });
         },
         onCreate: () => {
-          A.push(q(c, !0)), d(v, A);
+          N.push(H(d, !0)), c(g, N);
         }
-      }), H = y(
+      }), Y = h(
         "div",
         {
           style: {
@@ -1691,15 +1980,15 @@ const wn = /* @__PURE__ */ R({
           }
         },
         (() => {
-          const S = [];
-          for (let b = 0; b < A.length; b++) {
-            const he = ge(v, c, A, void 0, b, !1);
-            S.push(he);
+          const $ = [];
+          for (let L = 0; L < N.length; L++) {
+            const ke = _e(g, d, N, void 0, L, !1);
+            $.push(ke);
           }
-          return S;
+          return $;
         })()
       );
-      return y(
+      return h(
         "div",
         {
           style: {
@@ -1707,16 +1996,16 @@ const wn = /* @__PURE__ */ R({
           }
         },
         (() => {
-          const S = [];
-          return S.push(fe), m.collapse || S.push(H), S;
+          const $ = [];
+          return $.push(pe), p.collapse || $.push(Y), $;
         })()
       );
-    }, ut = (v, c, p, m, _) => {
-      if (!c.ui)
-        return console.assert(!1), y("div", "renderLeafScalar property ui must be valid");
-      let $;
-      return c.ui === "dummy" ? $ = N(v, c, p, m, _) : c.ui === "strInput" ? $ = Q(v, c, p, m, _) : c.ui === "numInput" ? $ = Pe(v, c, p, m, _) : c.ui === "switch" ? $ = je(v, c, p, m, _) : c.ui === "select" ? $ = Ie(v, c, p, m, _) : c.ui === "colorPicker" ? $ = et(v, c, p, m, _) : c.ui === "jsonEditor" ? $ = tt(v, c, p, m, _) : c.ui === "multiTypes" ? $ = nt(v, c, p, m, _) : c.ui === "compSelect" ? $ = lt(v, c, p, m, _) : console.assert(!1, "renderLeafScalar not implemented"), $ ? M(v, c, $) : y("div");
-    }, rt = () => y(
+    }, ft = (g, d, y, p, S) => {
+      if (!d.ui)
+        return console.assert(!1), h("div", "renderLeafScalar property ui must be valid");
+      let w;
+      return d.ui === "dummy" ? w = I(g, d, y, p, S) : d.ui === "strInput" ? w = De(g, d, y, p, S) : d.ui === "numInput" ? w = nt(g, d, y, p, S) : d.ui === "switch" ? w = lt(g, d, y, p, S) : d.ui === "select" ? w = ot(g, d, y, p, S) : d.ui === "colorPicker" ? w = st(g, d, y, p, S) : d.ui === "jsonEditor" ? w = it(g, d, y, p, S) : d.ui === "multiTypes" ? w = ut(g, d, y, p, S) : d.ui === "compSelect" ? w = rt(g, d, y, p, S) : d.ui === "slotSelect" ? w = at(g, d, y, p, S) : console.assert(!1, "renderLeafScalar not implemented"), w ? E(g, d, w) : h("div");
+    }, vt = () => h(
       "div",
       {
         class: "text-body-2",
@@ -1725,44 +2014,49 @@ const wn = /* @__PURE__ */ R({
         }
       },
       (() => {
-        const v = [];
+        const g = [];
         if (l.unique && l.config.length > 0 && l.object) {
           a[l.unique] || (a[l.unique] = {});
-          const c = a[l.unique];
-          l.config.forEach((p) => {
-            c[p.key] || (c[p.key] = {
+          const d = a[l.unique];
+          l.config.forEach((y) => {
+            d[y.key] || (d[y.key] = {
               collapse: !0,
-              children: !p.ui && p.array ? [] : {}
+              children: !y.ui && y.array ? [] : {}
             });
-            const m = ge([], p, l.object, c[p.key]);
-            v.push(m);
+            const p = _e(
+              [],
+              y,
+              l.object,
+              d[y.key]
+            );
+            g.push(p);
           });
         }
-        return v;
+        return g;
       })()
     );
-    return (v, c) => (C(), E(Ve, null, [
-      D(rt),
-      D(Ht, {
+    return (g, d) => (_(), q(fe, null, [
+      b(vt),
+      b(Yt, {
         config: l.config,
         object: l.object,
-        "prop-states": f.value
-      }, null, 8, ["config", "object", "prop-states"])
+        "property-states": m.value
+      }, null, 8, ["config", "object", "property-states"])
     ], 64));
   }
-}), Dn = (t) => {
-  t.component("XPropTree", wn);
-}, bn = (t, s, n) => {
+}), zn = (t) => {
+  t.component("XPropTree", Fn);
+}, Gn = (t, s, n) => {
   const e = t[s];
   return e ? typeof e == "function" ? e() : Promise.resolve(e) : new Promise((l, o) => {
     (typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(o.bind(null, /* @__PURE__ */ new Error("Unknown variable dynamic import: " + s + (s.split("/").length !== n ? ". Note that variables only represent file names one level deep." : ""))));
   });
 };
-async function Jn(t) {
-  return (await bn(/* @__PURE__ */ Object.assign({ "./locales/en/index.ts": () => import("./i18n-en.n11iysmh.js"), "./locales/zhHans/index.ts": () => import("./i18n-zhHans.hr18mfah.js") }), `./locales/${t}/index.ts`, 4)).default;
+async function nl(t) {
+  return (await Gn(/* @__PURE__ */ Object.assign({ "./locales/en/index.ts": () => import("./i18n-en.n11iysmh.js"), "./locales/zhHans/index.ts": () => import("./i18n-zhHans.hr18mfah.js") }), `./locales/${t}/index.ts`, 4)).default;
 }
-const Rn = { install: Dn };
+const ll = { install: zn };
 export {
-  Rn as default,
-  Jn as loadLocaleMessagePropTree
+  ll as default,
+  nl as loadLocaleMessagePropTree
 };