x-prop-tree 0.7.16 → 0.7.18

package/dist/index.js

@@ -1,12 +1,26 @@
-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 { provide as ae, inject as ce, defineComponent as R, ref as T, computed as L, resolveComponent as U, createBlock as B, openBlock as V, unref as D, isRef as re, withCtx as K, createVNode as M, createElementBlock as q, Fragment as fe, renderList as Te, createTextVNode as ye, toDisplayString as F, resolveDirective as ee, withDirectives as Z, withModifiers as X, normalizeStyle as W, createElementVNode as O, createCommentVNode as G, mergeModels as Q, useModel as z, useId as Ue, onUnmounted as $e, mergeProps as we, withKeys as Le, useTemplateRef as Je, watch as oe, watchEffect as Ke, h as x, renderSlot as ht, onMounted as He, onBeforeUnmount as Xe, reactive as kt } 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) => {
+import { useViewStack as he, useColor as te, eventBus as de, useSystem as ve, injectDark as _t, injectLocale as xt, openNumberDlg as Fe, openPromptDlg as Vt, globalObjects as St } from "x-essential-lib";
+import { getPropertyDefault as J, pkgs as Ne, parsePixelStr as Ct, parsePercentStr as Ut, getPropertyTag as $t, elements as wt } from "x-runtime-lib";
+import { c as ze, i as Me, r as ke, v as Ge, d as Ye } from "./vendor.f0ug048x.js";
+import { useDisplay as We } from "vuetify";
+import { XBlockly as Mt } from "x-block-lib";
+import { globalState as Qe } from "x-state-lib";
+const Re = (t) => !(t instanceof Array), Ae = (t) => t instanceof Array, bt = (t, s) => {
+  const n = (e, l) => {
+    if (e.ui !== l.ui || e.array !== l.array)
+      return !1;
+    if (e.ui || l.ui)
+      return !0;
+    if (e.children.length !== l.children.length)
+      return !1;
+    for (let o = 0; o < e.children.length; o++)
+      if (!n(e.children[o], l.children[o]))
+        return !1;
+    return !0;
+  };
+  return n(t, s);
+}, Se = (t, s) => {
   let n = {
     key: "",
     name: "",
@@ -41,20 +55,20 @@ const Ve = (t, s) => {
   if (l !== void 0)
     if (o) {
       if (n[s.key] === void 0) {
-        const i = H(s);
+        const i = J(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);
+        const i = J(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);
+      const i = J(s);
       i !== void 0 && (n[s.key] = i, e(t, n[s.key]));
     }
     return n[s.key];
@@ -66,24 +80,10 @@ const Ve = (t, s) => {
     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;
-    if (e.ui || l.ui)
-      return !0;
-    if (e.children.length !== l.children.length)
-      return !1;
-    for (let o = 0; o < e.children.length; o++)
-      if (!n(e.children[o], l.children[o]))
-        return !1;
-    return !0;
-  };
-  return n(t, s);
-}, Ne = (t) => !(t instanceof Array), be = (t) => t instanceof Array, Dt = [
+}, Be = (t) => !(t instanceof Array), be = (t) => t instanceof Array, Pt = [
   ["basic", "id"],
   ["basic", "name"]
-], 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(
+], Dt = (t) => Pt.find((s) => Me(t, s)), Pe = (t, s, n, e, l, o, i) => (t = ze(t), o !== void 0 ? (t.push(o), i && t.push(s.key)) : t.push(s.key), Dt(t) ? (e.change = !1, e.change) : s.ui ? s.array && e.children && be(e.children) ? Lt(
   t,
   s,
   n,
@@ -91,13 +91,13 @@ const Ve = (t, s) => {
   l,
   o,
   i
-) : Ot(
+) : Nt(
   s,
   n,
   e,
   o,
   i
-) : s.array ? Lt(
+) : s.array ? At(
   t,
   s,
   n,
@@ -113,7 +113,7 @@ const Ve = (t, s) => {
   l,
   o,
   i
-)), Lt = (t, s, n, e, l, o, i) => {
+)), At = (t, s, n, e, l, o, i) => {
   if (s.ui)
     return console.assert(!1, "execPropertyBranchArray property ui must be invalid"), !1;
   if (!s.array)
@@ -127,33 +127,33 @@ const Ve = (t, s) => {
       "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;
+  o !== void 0 && !i ? (n[o] instanceof Array || (n[o] = J(s), l?.(t, n[o])), u = n[o]) : (n[s.key] instanceof Array || (n[s.key] = J(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[r];
-    s.children.forEach((m) => {
-      if (!a.children || !Ne(a.children)) {
+    s.children.forEach((d) => {
+      if (!a.children || !Be(a.children)) {
         console.assert(!1);
         return;
       }
-      a.children[m.key] = {
+      a.children[d.key] = {
         change: !1,
-        children: m.array ? [] : {}
+        children: d.array ? [] : {}
       }, Pe(
         t,
-        m,
+        d,
         u[r],
-        a.children[m.key],
+        a.children[d.key],
         l,
         r,
         !0
       ) && (a.change = !0), a.change && (e.change = !0);
     });
   }
-  return e.change || (e.change = !Me(u, H(s))), e.change;
+  return e.change || (e.change = !Me(u, J(s))), e.change;
 }, Tt = (t, s, n, e, l, o, i) => {
   if (s.ui)
     return console.assert(
@@ -165,7 +165,7 @@ const Ve = (t, s) => {
       !1,
       "execPropertyBranchScalar property array must be invalid"
     ), !1;
-  if (!e.children || !Ne(e.children))
+  if (!e.children || !Be(e.children))
     return console.assert(!1, "execPropertyBranchScalar state children must be map"), !1;
   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;
@@ -177,7 +177,7 @@ const Ve = (t, s) => {
     }, Pe(t, a, u, e.children[a.key], l) && (e.change = !0);
   }
   return e.change;
-}, Nt = (t, s, n, e, l, o, i) => {
+}, Lt = (t, s, n, e, l, o, i) => {
   if (!s.ui)
     return console.assert(!1, "execPropertyLeafArray property ui must be valid"), !1;
   if (!s.array)
@@ -185,7 +185,7 @@ const Ve = (t, s) => {
   if (!e.children || !be(e.children))
     return console.assert(!1, "execPropertyLeafArray 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;
+  o !== void 0 && !i ? (n[o] instanceof Array || (n[o] = J(s), l?.(t, n[o])), u = n[o]) : (n[s.key] instanceof Array || (n[s.key] = J(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,
@@ -199,13 +199,13 @@ const Ve = (t, s) => {
       r,
       !1
     ) && (e.change = !0);
-  return e.change || (e.change = !Me(u, H(s))), e.change;
-}, Ot = (t, s, n, e, l) => {
+  return e.change || (e.change = !Me(u, J(s))), e.change;
+}, Nt = (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 = !Me(o, H(t, !0)), n.change;
-}, Je = (t, s, n, e) => {
+  return e !== void 0 && !l ? o = s[e] : o = s[t.key], n.change = !Me(o, J(t, !0)), n.change;
+}, Ee = (t, s, n, e) => {
   if (s.length <= 0 || !n) {
     t.value = {};
     return;
@@ -227,64 +227,64 @@ const Ve = (t, s) => {
       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" ? Ne(n.children) && (n = n.children[e]) : be(n.children) && (n = n.children[e]);
+    typeof e == "string" ? Be(n.children) && (n = n.children[e]) : be(n.children) && (n = n.children[e]);
   }), n?.change ?? !1;
-}, Ge = Symbol(), Ye = Symbol(), We = Symbol(), Qe = Symbol(), Ze = Symbol(), je = Symbol(), Ie = Symbol();
+}, Ze = Symbol(), je = Symbol(), Ie = Symbol(), et = Symbol(), tt = Symbol(), nt = Symbol(), lt = Symbol();
 function Bt(t) {
-  re(Ge, t);
+  ae(Ze, t);
 }
 function Oe() {
-  return ae(Ge);
+  return ce(Ze);
 }
-function qt(t) {
-  re(Ye, t);
+function Ot(t) {
+  ae(je, t);
 }
-function Kt() {
-  return ae(Ye);
+function qt() {
+  return ce(je);
 }
-function Jt(t) {
-  re(We, t);
+function Kt(t) {
+  ae(Ie, t);
 }
 function Rt() {
-  return ae(We);
+  return ce(Ie);
 }
 function Et(t) {
-  re(Qe, t);
+  ae(et, t);
 }
-function Ht() {
-  return ae(Qe);
+function Jt() {
+  return ce(et);
 }
-function Xt(t) {
-  re(Ze, t);
+function Ht(t) {
+  ae(tt, t);
 }
-function Ft() {
-  return ae(Ze);
+function Xt() {
+  return ce(tt);
 }
-function zt(t) {
-  re(je, t);
+function Ft(t) {
+  ae(nt, t);
 }
-function et() {
-  return ae(je);
+function ot() {
+  return ce(nt);
 }
-function Gt(t) {
-  re(Ie, t);
+function zt(t) {
+  ae(lt, t);
 }
-function tt() {
-  return ae(Ie);
+function st() {
+  return ce(lt);
 }
-const Yt = /* @__PURE__ */ J({
-  __name: "menu",
+const Gt = /* @__PURE__ */ R({
+  __name: "index",
   setup(t) {
-    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 { t: s } = j(), n = qt(), e = Rt(), l = Jt(), o = Xt(), i = T(0), u = T(0), r = T([]), a = L(() => [i.value, u.value]), d = (C) => {
+      const b = () => !(r.value.length <= 0 || !me(l.value, r.value)), k = () => {
+        const S = Se(n.value, r.value);
+        if (S)
+          if (S.ui) {
             const P = ge(e.value, r.value.slice(0, -1));
             if (!P)
               return;
-            P[r.value[r.value.length - 1]] = H(x), o(r.value, P[r.value[r.value.length - 1]]);
-          } else if (x.array) {
+            P[r.value[r.value.length - 1]] = J(S), o(r.value, P[r.value[r.value.length - 1]]);
+          } else if (S.array) {
             const P = r.value[r.value.length - 1];
             if (P === void 0) {
               console.assert(!1, "invalid last key");
@@ -294,90 +294,90 @@ const Yt = /* @__PURE__ */ J({
               const E = ge(e.value, r.value.slice(0, -1));
               if (!E)
                 return;
-              E[r.value[r.value.length - 1]] = H(x), o(r.value, E[r.value[r.value.length - 1]]);
+              E[r.value[r.value.length - 1]] = J(S), o(r.value, E[r.value[r.value.length - 1]]);
             } else {
               const E = ge(e.value, r.value);
               if (!E)
                 return;
-              x.children.forEach((I) => {
-                E[I.key] = H(x), o([...r.value, I.key], E[I.key]);
+              S.children.forEach((I) => {
+                E[I.key] = J(S), o([...r.value, I.key], E[I.key]);
               });
             }
           } else {
             const P = ge(e.value, r.value);
             if (!P)
               return;
-            x.children.forEach((E) => {
-              P[E.key] = H(x), o([...r.value, E.key], P[E.key]);
+            S.children.forEach((E) => {
+              P[E.key] = J(S), o([...r.value, E.key], P[E.key]);
             });
           }
       };
-      R() && M.push({
+      b() && C.push({
         title: s("x-prop-tree.reset"),
         func: 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 }));
+    }, c = (C) => {
+      const b = () => {
+        const k = Se(n.value, r.value), S = ge(e.value, r.value);
+        localStorage.setItem("propTreeCopy", JSON.stringify({ property: k, object: S }));
       };
-      M.push({
+      C.push({
         title: s("x-prop-tree.copy"),
-        func: R
+        func: b
       });
-    }, v = (M) => {
-      const R = () => {
-        const x = localStorage.getItem("propTreeCopy");
-        if (!x)
+    }, f = (C) => {
+      const b = () => {
+        const S = localStorage.getItem("propTreeCopy");
+        if (!S)
           return !1;
         try {
-          const { property: P } = JSON.parse(x), E = Ve(n.value, r.value);
-          return Pt(P, E);
+          const { property: P } = JSON.parse(S), E = Se(n.value, r.value);
+          return bt(P, E);
         } catch (P) {
           console.error(P);
         }
         return !1;
       }, k = () => {
-        if (!R())
+        if (!b())
           return;
-        const x = localStorage.getItem("propTreeCopy");
-        if (x)
+        const S = localStorage.getItem("propTreeCopy");
+        if (S)
           try {
-            const { object: P } = JSON.parse(x), E = Ve(n.value, r.value);
+            const { object: P } = JSON.parse(S), E = Se(n.value, r.value);
             console.log(P, E);
           } catch (P) {
             console.error(P);
           }
       };
-      R() && M.push({
+      b() && C.push({
         title: s("x-prop-tree.paste"),
         func: k
       });
-    }, 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),
+    }, v = L(() => {
+      const C = [];
+      return d(C), c(C), f(C), C;
+    }), h = (C) => {
+      i.value = C.x, u.value = C.y, r.value = C.keys;
+    }, { open: _ } = he("propTreeMenu", h);
+    return (C, b) => {
+      const k = U("v-list-item-title"), S = U("v-list-item"), P = U("v-list"), E = U("v-menu");
+      return V(), B(E, {
+        modelValue: D(_),
+        "onUpdate:modelValue": b[0] || (b[0] = (I) => re(_) ? _.value = I : null),
         "location-strategy": "connected",
         scrim: "transparent",
         target: a.value
       }, {
         default: K(() => [
-          b(P, null, {
+          M(P, null, {
             default: K(() => [
-              (_(!0), q(fe, null, Le(f.value, (I, De) => (_(), T(x, {
+              (V(!0), q(fe, null, Te(v.value, (I, De) => (V(), B(S, {
                 key: De,
                 link: "",
                 onClick: I.func
               }, {
                 default: K(() => [
-                  b(k, null, {
+                  M(k, null, {
                     default: K(() => [
                       ye(F(I.title), 1)
                     ]),
@@ -394,8 +394,8 @@ const Yt = /* @__PURE__ */ J({
       }, 8, ["modelValue", "target"]);
     };
   }
-}), Wt = { style: { pointerEvents: "none" } }, Se = /* @__PURE__ */ J({
-  __name: "title",
+}), Yt = { style: { pointerEvents: "none" } }, Ce = /* @__PURE__ */ R({
+  __name: "index",
   props: {
     title: {},
     collapse: { type: Boolean },
@@ -405,7 +405,7 @@ const Yt = /* @__PURE__ */ J({
   },
   emits: ["collapse", "menu", "create", "delete"],
   setup(t, { emit: s }) {
-    const { backgroundColor2: n, highlightColor: e } = te(), l = s, o = O(!1), i = A(() => ({
+    const { backgroundColor2: n, highlightColor: e } = te(), l = s, o = T(!1), i = L(() => ({
       background: o.value ? e.value : n.value,
       height: "36px",
       marginBottom: "1px",
@@ -415,44 +415,112 @@ const Yt = /* @__PURE__ */ J({
     }, r = (a) => {
       l("menu", a.clientX, a.clientY);
     };
-    return (a, m) => {
-      const c = C("v-icon"), v = C("v-spacer"), f = C("v-btn"), V = ee("ripple");
-      return Z((_(), q("div", {
+    return (a, d) => {
+      const c = U("v-icon"), f = U("v-spacer"), v = U("v-btn"), h = ee("ripple");
+      return Z((V(), q("div", {
         class: "d-flex align-center cursor-pointer",
         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)
+        onMouseout: d[2] || (d[2] = (_) => o.value = !1),
+        onMouseover: d[3] || (d[3] = (_) => o.value = !0)
       }, [
-        b(c, {
+        M(c, {
           class: "mr-1",
           icon: t.collapse ? "mdi-chevron-right" : "mdi-chevron-down"
         }, null, 8, ["icon"]),
-        B("span", Wt, F(t.title), 1),
-        b(v),
-        t.hasCreate ? (_(), T(f, {
+        O("span", Yt, F(t.title), 1),
+        M(f),
+        t.hasCreate ? (V(), B(v, {
           key: 0,
           class: "mx-3",
           density: "compact",
           icon: "mdi-plus",
           variant: "text",
-          onClick: m[0] || (m[0] = X((U) => l("create"), ["stop"]))
+          onClick: d[0] || (d[0] = X((_) => l("create"), ["stop"]))
         })) : G("", !0),
-        t.hasDelete ? (_(), T(f, {
+        t.hasDelete ? (V(), B(v, {
           key: 1,
           class: "mx-3",
           density: "compact",
           icon: "mdi-minus",
           variant: "text",
-          onClick: m[1] || (m[1] = X((U) => l("delete", t.index), ["stop"]))
+          onClick: d[1] || (d[1] = X((_) => l("delete", t.index), ["stop"]))
         })) : G("", !0)
       ], 36)), [
-        [V]
+        [h]
       ]);
     };
   }
-}), Qt = { class: "text-subtitle-2 ml-1" }, Zt = { class: "text-caption text-grey ml-1" }, jt = /* @__PURE__ */ J({
+}), Wt = { class: "d-flex justify-space-between align-center" }, Qt = /* @__PURE__ */ R({
+  __name: "index",
+  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 = L(() => {
+      let r = "100%";
+      return t.hasDelete && (r = "calc(100% - 37px)"), {
+        width: r
+      };
+    }), i = L(() => t.readonly), { open: u } = he(`propTreeColorPickerMenu${Ue()}`);
+    return $e(() => {
+      u.value = !1;
+    }), (r, a) => {
+      const d = U("v-btn"), c = U("v-color-picker"), f = U("v-menu");
+      return V(), B(f, {
+        modelValue: D(u),
+        "onUpdate:modelValue": a[2] || (a[2] = (v) => re(u) ? u.value = v : null),
+        "close-on-content-click": !1,
+        scrim: "transparent"
+      }, {
+        activator: K(({ props: v }) => [
+          O("div", Wt, [
+            O("div", {
+              class: "flex-grow-1",
+              style: W(o.value)
+            }, [
+              M(d, we(v, {
+                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 ? (V(), B(d, {
+              key: 0,
+              class: "mx-2",
+              density: "compact",
+              icon: "mdi-minus",
+              variant: "text",
+              onClick: a[0] || (a[0] = X((h) => l("delete"), ["stop"]))
+            })) : G("", !0)
+          ])
+        ]),
+        default: K(() => [
+          M(c, {
+            modelValue: e.value,
+            "onUpdate:modelValue": a[1] || (a[1] = (v) => e.value = v),
+            mode: "hexa",
+            "show-swatches": "",
+            "swatches-max-height": "150px"
+          }, null, 8, ["modelValue"])
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+}), Zt = { class: "text-subtitle-2 ml-1" }, jt = { class: "text-caption text-grey ml-1" }, It = /* @__PURE__ */ R({
   __name: "group",
   props: {
     id: {},
@@ -462,33 +530,33 @@ const Yt = /* @__PURE__ */ J({
   },
   emits: ["x-click"],
   setup(t, { emit: s }) {
-    const { backgroundColor2: n, highlightColor: e } = te(), l = t, o = s, i = O(!1), u = A(() => ({
+    const { backgroundColor2: n, highlightColor: e } = te(), l = t, o = s, i = T(!1), u = L(() => ({
       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", {
+      const d = U("v-icon"), c = ee("ripple");
+      return Z((V(), 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)
+        onClick: a[0] || (a[0] = (f) => o("x-click", l.id)),
+        onMouseout: a[1] || (a[1] = (f) => i.value = !1),
+        onMouseover: a[2] || (a[2] = (f) => i.value = !0)
       }, [
-        b(m, {
+        M(d, {
           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)
+        O("span", Zt, F(l.title), 1),
+        O("span", jt, F(l.count), 1)
       ], 36)), [
         [c]
       ]);
     };
   }
-}), It = { class: "text-subtitle-1 ml-6" }, en = /* @__PURE__ */ J({
+}), en = { class: "text-subtitle-1 ml-6" }, tn = /* @__PURE__ */ R({
   __name: "item",
   props: {
     id: {},
@@ -496,31 +564,31 @@ const Yt = /* @__PURE__ */ J({
   },
   emits: ["x-click"],
   setup(t, { emit: s }) {
-    const { backgroundColor2: n, highlightColor: e } = te(), l = t, o = s, i = O(!1), u = A(() => ({
+    const { backgroundColor2: n, highlightColor: e } = te(), l = t, o = s, i = T(!1), u = L(() => ({
       background: i.value ? e.value : n.value,
       height: "48px",
       marginBottom: "1px",
       userSelect: "none"
     }));
     return (r, a) => {
-      const m = ee("ripple");
-      return Z((_(), q("div", {
+      const d = ee("ripple");
+      return Z((V(), 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)
+        O("span", en, F(l.title), 1)
       ], 36)), [
-        [m]
+        [d]
       ]);
     };
   }
-}), tn = { key: 0 }, nn = {
+}), nn = { key: 0 }, ln = {
   key: 1,
   class: "text-body-2 text-grey ml-3"
-}, ln = /* @__PURE__ */ J({
+}, on = /* @__PURE__ */ R({
   __name: "index",
   props: {
     modelValue: {},
@@ -530,17 +598,17 @@ const Yt = /* @__PURE__ */ J({
   },
   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);
+    const { t: s } = j(), n = z(t, "modelValue"), e = z(t, "open"), l = ot(), o = (u) => {
+      const r = ke(l, u);
+      r && Ge(l, u, !r.collapse);
     }, i = (u) => {
       n.value = u, e.value = !1, de.emit("refreshDepends");
     };
-    return (u, r) => D(l).length > 0 ? (_(), q("div", tn, [
-      (_(!0), q(fe, null, Le(D(l), (a) => (_(), q(fe, {
+    return (u, r) => D(l).length > 0 ? (V(), q("div", nn, [
+      (V(!0), q(fe, null, Te(D(l), (a) => (V(), q(fe, {
         key: a.id
       }, [
-        a.type === 0 ? (_(), T(jt, {
+        a.type === 0 ? (V(), B(It, {
           key: 0,
           id: a.id,
           collapse: a.collapse,
@@ -548,16 +616,16 @@ const Yt = /* @__PURE__ */ J({
           title: a.name,
           onXClick: o
         }, null, 8, ["id", "collapse", "count", "title"])) : G("", !0),
-        a.type === 1 && a.show ? (_(), T(en, {
+        a.type === 1 && a.show ? (V(), B(tn, {
           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));
+    ])) : (V(), q("div", ln, F(D(s)("x-prop-tree.noComp")), 1));
   }
-}), on = { class: "text-subtitle-1 ml-3" }, sn = /* @__PURE__ */ J({
+}), sn = { class: "text-subtitle-1 ml-3" }, un = /* @__PURE__ */ R({
   __name: "index",
   props: {
     modelValue: {},
@@ -565,91 +633,91 @@ const Yt = /* @__PURE__ */ J({
   },
   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"), {
+    const { t: s } = j(), n = We(), { sysBarAvail: e } = ve(), { backgroundColor1: l } = te(), o = z(t, "modelValue"), i = ot(), u = L(() => {
+      let f = "100%";
+      return n.mdAndUp.value && (f = "400px"), {
         background: l.value,
-        width: v,
+        width: f,
         height: "100%"
       };
-    }), r = A(() => {
-      let v = 48;
-      return e.value && (v += 24), {
+    }), r = L(() => {
+      let f = 48;
+      return e.value && (f += 24), {
         position: "relative",
-        height: `calc(100% - ${v}px)`
+        height: `calc(100% - ${f}px)`
       };
-    }), a = A(() => ({
+    }), a = L(() => ({
       height: "60px"
-    })), m = A(() => {
+    })), d = L(() => {
       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(() => {
+      const f = ke(i, o.value);
+      return f ? f.name : s("x-runtime-lib.compNotAvail");
+    }), { open: c } = he(`propTreeCompSelectDlg${Ue()}`);
+    return $e(() => {
       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, {
+    }), (f, v) => {
+      const h = U("v-btn"), _ = U("v-sheet"), C = U("v-icon"), b = U("v-dialog");
+      return V(), B(b, {
         modelValue: D(c),
-        "onUpdate:modelValue": f[5] || (f[5] = (k) => ue(c) ? c.value = k : null),
+        "onUpdate:modelValue": v[5] || (v[5] = (k) => re(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"]))
+        onKeydown: v[6] || (v[6] = Le(X((k) => c.value = !1, ["stop", "prevent"]), ["esc"]))
       }, {
         activator: K(({ props: k }) => [
-          b(V, $e(k, {
+          M(h, we(k, {
             block: "",
             density: "comfortable"
           }), {
             default: K(() => [
-              ye(F(m.value), 1)
+              ye(F(d.value), 1)
             ]),
             _: 1
           }, 16)
         ]),
         default: K(() => [
-          B("div", {
+          O("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"]))
+            onClick: v[3] || (v[3] = X((k) => c.value = !1, ["self"])),
+            onContextmenu: v[4] || (v[4] = X((k) => c.value = !1, ["self", "prevent"]))
           }, [
-            B("div", {
+            O("div", {
               class: "elevation-2",
               style: W(u.value)
             }, [
-              D(e) ? (_(), T(U, {
+              D(e) ? (V(), B(_, {
                 key: 0,
                 color: "transparent",
                 height: 24
               })) : G("", !0),
-              b(U, {
+              M(_, {
                 class: "d-flex align-center px-3",
                 color: "transparent",
                 height: 48
               }, {
                 default: K(() => [
-                  b(M, {
+                  M(C, {
                     icon: "mdi-close",
-                    onClick: f[0] || (f[0] = (k) => c.value = !1)
+                    onClick: v[0] || (v[0] = (k) => c.value = !1)
                   }),
-                  B("span", on, F(D(s)("x-prop-tree.dlg.compSelect.title")), 1)
+                  O("span", sn, F(D(s)("x-prop-tree.dlg.compSelect.title")), 1)
                 ]),
                 _: 1
               }),
-              B("div", {
+              O("div", {
                 class: "overflow-y-auto",
                 style: W(r.value)
               }, [
-                b(ln, {
+                M(on, {
                   modelValue: o.value,
-                  "onUpdate:modelValue": f[1] || (f[1] = (k) => o.value = k),
+                  "onUpdate:modelValue": v[1] || (v[1] = (k) => o.value = k),
                   open: D(c),
-                  "onUpdate:open": f[2] || (f[2] = (k) => ue(c) ? c.value = k : null)
+                  "onUpdate:open": v[2] || (v[2] = (k) => re(c) ? c.value = k : null)
                 }, null, 8, ["modelValue", "open"]),
-                B("div", {
+                O("div", {
                   style: W(a.value)
                 }, null, 4)
               ], 4)
@@ -660,7 +728,7 @@ const Yt = /* @__PURE__ */ J({
       }, 8, ["modelValue"]);
     };
   }
-}), un = /* @__PURE__ */ J({
+}), rn = /* @__PURE__ */ R({
   __name: "editor",
   props: {
     modelValue: { required: !0 },
@@ -672,20 +740,20 @@ const Yt = /* @__PURE__ */ J({
   },
   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 n = z(t, "modelValue"), e = z(t, "lock"), l = z(t, "scale"), o = _t(), i = xt(), u = Oe(), r = Je("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), {
+    } }), (c, f) => (V(), B(D(Mt), {
       ref_key: "target",
       ref: r,
       lock: e.value,
-      "onUpdate:lock": v[0] || (v[0] = (f) => e.value = f),
+      "onUpdate:lock": f[0] || (f[0] = (v) => e.value = v),
       scale: l.value,
-      "onUpdate:scale": v[1] || (v[1] = (f) => l.value = f),
+      "onUpdate:scale": f[1] || (f[1] = (v) => l.value = v),
       dark: D(o),
       locale: D(i),
       type: "json",
@@ -693,7 +761,7 @@ const Yt = /* @__PURE__ */ J({
       onReady: a
     }, null, 8, ["lock", "scale", "dark", "locale", "version"]));
   }
-}), rn = { class: "text-subtitle-1" }, an = /* @__PURE__ */ J({
+}), an = { class: "text-subtitle-1" }, cn = /* @__PURE__ */ R({
   __name: "index",
   props: {
     modelValue: { required: !0 },
@@ -701,84 +769,84 @@ const Yt = /* @__PURE__ */ J({
   },
   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), {
+    const { t: s } = j(), { sysBarAvail: n } = ve(), { backgroundColor0: e, backgroundColor1: l, backgroundColor2: o } = te(), i = z(t, "modelValue"), u = T(!1), r = T(1), a = L(() => {
+      let v = 48;
+      return n.value && (v += 24), {
         position: "relative",
         background: l.value,
-        height: `calc(100% - ${f}px)`
+        height: `calc(100% - ${v}px)`
       };
-    }), m = A(() => s("x-prop-tree.dlg.jsonObject.title")), { open: c } = he(`propTreeJsonObjectDlg${Ce()}`);
-    Ue(() => {
+    }), d = L(() => s("x-prop-tree.dlg.jsonEditor.title")), { open: c } = he(`propTreejsonEditorDlg${Ue()}`);
+    $e(() => {
       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, {
+    const f = Je("editor");
+    return oe(c, (v) => {
+      v || f.value?.save();
+    }), (v, h) => {
+      const _ = U("v-btn"), C = U("v-sheet"), b = U("v-spacer"), k = U("v-dialog");
+      return V(), B(k, {
         modelValue: D(c),
-        "onUpdate:modelValue": V[4] || (V[4] = (x) => ue(c) ? c.value = x : null),
+        "onUpdate:modelValue": h[4] || (h[4] = (S) => re(c) ? c.value = S : 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"]))
+        onKeydown: h[5] || (h[5] = Le(X((S) => c.value = !1, ["stop", "prevent"]), ["esc"]))
       }, {
-        activator: K(({ props: x }) => [
-          b(U, $e(x, {
+        activator: K(({ props: S }) => [
+          M(_, we(S, {
             block: "",
             density: "comfortable"
           }), {
             default: K(() => [
-              ye(F(m.value), 1)
+              ye(F(d.value), 1)
             ]),
             _: 1
           }, 16)
         ]),
         default: K(() => [
-          b(M, {
+          M(C, {
             color: D(e),
             height: "100%",
             width: "100%"
           }, {
             default: K(() => [
-              D(n) ? (_(), T(M, {
+              D(n) ? (V(), B(C, {
                 key: 0,
                 color: D(o),
                 height: 24
               }, null, 8, ["color"])) : G("", !0),
-              b(M, {
+              M(C, {
                 class: "d-flex align-center px-2",
                 color: D(o),
                 height: 48
               }, {
                 default: K(() => [
-                  b(U, {
+                  M(_, {
                     density: "comfortable",
                     icon: "mdi-close",
                     variant: "text",
-                    onClick: V[0] || (V[0] = (x) => c.value = !1)
+                    onClick: h[0] || (h[0] = (S) => c.value = !1)
                   }),
-                  B("span", rn, F(D(s)("x-prop-tree.dlg.jsonObject.title")), 1),
-                  b(R)
+                  O("span", an, F(D(s)("x-prop-tree.dlg.jsonEditor.title")), 1),
+                  M(b)
                 ]),
                 _: 1
               }, 8, ["color"]),
-              B("div", {
+              O("div", {
                 style: W(a.value)
               }, [
-                b(un, {
+                M(rn, {
                   ref_key: "editor",
-                  ref: v,
+                  ref: f,
                   modelValue: i.value,
-                  "onUpdate:modelValue": V[1] || (V[1] = (x) => i.value = x),
+                  "onUpdate:modelValue": h[1] || (h[1] = (S) => i.value = S),
                   lock: u.value,
-                  "onUpdate:lock": V[2] || (V[2] = (x) => u.value = x),
+                  "onUpdate:lock": h[2] || (h[2] = (S) => u.value = S),
                   scale: r.value,
-                  "onUpdate:scale": V[3] || (V[3] = (x) => r.value = x)
+                  "onUpdate:scale": h[3] || (h[3] = (S) => r.value = S)
                 }, null, 8, ["modelValue", "lock", "scale"])
               ], 4)
             ]),
@@ -789,284 +857,8 @@ const Yt = /* @__PURE__ */ J({
       }, 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({
+}), dn = { class: "d-flex justify-space-between align-center my-2" }, mn = { class: "flex-grow-1" }, fn = /* @__PURE__ */ R({
   __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: {}
@@ -1076,45 +868,45 @@ const Yt = /* @__PURE__ */ J({
   }),
   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
+    const { t: n } = j(), { isMobile: e } = ve(), l = z(t, "modelValue"), o = s, i = Oe(), u = L(() => Ne[i.value]?.types[t.types]), r = T(0), a = L(() => {
+      const h = [];
+      return u.value?.forEach(({ title: _ }, C) => {
+        h.push({
+          title: n(_),
+          value: C
         });
-      }), V;
+      }), h;
     });
-    qe(() => {
-      u.value?.some((V, U) => V.validator(l.value) ? (r.value = U, !0) : !1);
+    Ke(() => {
+      u.value?.some((h, _) => h.validator(l.value) ? (r.value = _, !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")
+    const d = L(() => u.value?.[r.value]), c = () => {
+      l.value = d.value?.default;
+    }, f = T(0), v = async (h) => {
+      if (!h || !e() || d.value.ui !== "pixelInput" && d.value.ui !== "percentInput")
         return;
-      const U = await Ee({
+      const _ = await Fe({
         title: "",
-        value: v.value,
-        precision: m.value.precision,
-        min: m.value.min,
-        max: m.value.max,
-        step: m.value.step
+        value: f.value,
+        precision: d.value.precision,
+        min: d.value.min,
+        max: d.value.max,
+        step: d.value.step
       });
-      U !== void 0 && (v.value = U);
+      _ !== void 0 && (f.value = _);
     };
-    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, {
+    return Ke(() => {
+      d.value?.ui === "pixelInput" ? f.value = Ct(l.value) : d.value?.ui === "percentInput" && (f.value = Ut(l.value));
+    }), oe(f, (h) => {
+      d.value?.ui === "pixelInput" ? l.value = h + "px" : d.value?.ui === "percentInput" && (l.value = h + "%");
+    }), (h, _) => {
+      const C = U("v-select"), b = U("v-number-input"), k = U("v-btn"), S = ee("ripple");
+      return V(), q("div", dn, [
+        O("div", mn, [
+          Z(M(C, {
             modelValue: r.value,
             "onUpdate:modelValue": [
-              U[0] || (U[0] = (P) => r.value = P),
+              _[0] || (_[0] = (P) => r.value = P),
               c
             ],
             density: "compact",
@@ -1123,47 +915,47 @@ const Yt = /* @__PURE__ */ J({
             "single-line": ""
           }, null, 8, ["modelValue", "items"]), [
             [
-              x,
+              S,
               void 0,
               void 0,
               { stop: !0 }
             ]
           ]),
-          m.value?.ui === "pixelInput" || m.value?.ui === "percentInput" ? Z((_(), T(R, {
+          d.value?.ui === "pixelInput" || d.value?.ui === "percentInput" ? Z((V(), B(b, {
             key: 0,
-            modelValue: v.value,
-            "onUpdate:modelValue": U[1] || (U[1] = (P) => v.value = P),
+            modelValue: f.value,
+            "onUpdate:modelValue": _[1] || (_[1] = (P) => f.value = P),
             "control-variant": "stacked",
             density: "compact",
             "hide-details": "",
-            max: m.value.max,
-            min: m.value.min,
-            precision: m.value.precision,
+            max: d.value.max,
+            min: d.value.min,
+            precision: d.value.precision,
             "single-line": "",
-            step: m.value.step,
-            "onUpdate:focused": f
+            step: d.value.step,
+            "onUpdate:focused": v
           }, null, 8, ["modelValue", "max", "min", "precision", "step"])), [
             [
-              x,
+              S,
               void 0,
               void 0,
               { stop: !0 }
             ]
           ]) : G("", !0)
         ]),
-        t.hasDelete ? (_(), T(k, {
+        t.hasDelete ? (V(), B(k, {
           key: 0,
           class: "mx-2",
           density: "compact",
           icon: "mdi-minus",
           variant: "text",
-          onClick: U[2] || (U[2] = X((P) => o("delete"), ["stop"]))
+          onClick: _[2] || (_[2] = X((P) => o("delete"), ["stop"]))
         })) : G("", !0)
       ]);
     };
   }
-}), Un = { class: "d-flex justify-space-between align-center" }, $n = /* @__PURE__ */ J({
-  __name: "numInput",
+}), vn = { class: "d-flex justify-space-between align-center" }, pn = /* @__PURE__ */ R({
+  __name: "index",
   props: /* @__PURE__ */ Q({
     hasDelete: { type: Boolean, default: !1 },
     precision: { default: () => {
@@ -1181,7 +973,7 @@ const Yt = /* @__PURE__ */ J({
     const { isMobile: n } = ve(), e = z(t, "modelValue"), l = s, o = async (i) => {
       if (!i || t.readonly || !n())
         return;
-      const u = await Ee({
+      const u = await Fe({
         title: "",
         value: e.value,
         precision: t.precision,
@@ -1192,9 +984,9 @@ const Yt = /* @__PURE__ */ J({
       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, {
+      const r = U("v-number-input"), a = U("v-btn"), d = ee("ripple");
+      return V(), q("div", vn, [
+        Z(M(r, {
           modelValue: e.value,
           "onUpdate:modelValue": u[0] || (u[0] = (c) => e.value = c),
           "control-variant": "stacked",
@@ -1209,13 +1001,13 @@ const Yt = /* @__PURE__ */ J({
           "onUpdate:focused": o
         }, null, 8, ["modelValue", "max", "min", "precision", "readonly", "step"]), [
           [
-            m,
+            d,
             void 0,
             void 0,
             { stop: !0 }
           ]
         ]),
-        t.hasDelete ? (_(), T(a, {
+        t.hasDelete ? (V(), B(a, {
           key: 0,
           class: "mx-2",
           density: "compact",
@@ -1226,8 +1018,8 @@ const Yt = /* @__PURE__ */ J({
       ]);
     };
   }
-}), Mn = { class: "d-flex justify-space-between align-center" }, wn = /* @__PURE__ */ J({
-  __name: "select",
+}), gn = { class: "d-flex justify-space-between align-center" }, yn = /* @__PURE__ */ R({
+  __name: "index",
   props: /* @__PURE__ */ Q({
     hasDelete: { type: Boolean, default: !1 },
     readonly: { type: Boolean, default: !1 },
@@ -1238,18 +1030,18 @@ const Yt = /* @__PURE__ */ J({
   }),
   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 { t: n } = j(), e = z(t, "modelValue"), l = s, o = Oe(), i = L(() => {
       const u = [];
-      return Fe[o.value]?.items[t.items].forEach(({ title: r, value: a }) => {
+      return Ne[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, {
+      const a = U("v-select"), d = U("v-btn"), c = ee("ripple");
+      return V(), q("div", gn, [
+        Z(M(a, {
           modelValue: e.value,
-          "onUpdate:modelValue": r[0] || (r[0] = (v) => e.value = v),
+          "onUpdate:modelValue": r[0] || (r[0] = (f) => e.value = f),
           density: "compact",
           "hide-details": "",
           items: i.value,
@@ -1263,19 +1055,227 @@ const Yt = /* @__PURE__ */ J({
             { stop: !0 }
           ]
         ]),
-        t.hasDelete ? (_(), T(m, {
+        t.hasDelete ? (V(), B(d, {
           key: 0,
           class: "mx-2",
           density: "compact",
           icon: "mdi-minus",
           variant: "text",
-          onClick: r[1] || (r[1] = X((v) => l("delete"), ["stop"]))
+          onClick: r[1] || (r[1] = X((f) => l("delete"), ["stop"]))
         })) : G("", !0)
       ]);
     };
   }
-}), bn = { class: "d-flex justify-space-between align-center" }, Pn = /* @__PURE__ */ J({
-  __name: "strInput",
+}), hn = { class: "text-subtitle-2 ml-1" }, kn = { class: "text-caption text-grey ml-1" }, _n = /* @__PURE__ */ R({
+  __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 = T(!1), u = L(() => ({
+      background: i.value ? e.value : n.value,
+      height: "30px",
+      marginBottom: "1px",
+      userSelect: "none"
+    }));
+    return (r, a) => {
+      const d = U("v-icon"), c = ee("ripple");
+      return Z((V(), q("div", {
+        class: "d-flex align-center cursor-pointer",
+        style: W(u.value),
+        onClick: a[0] || (a[0] = (f) => o("x-click", l.id)),
+        onMouseout: a[1] || (a[1] = (f) => i.value = !1),
+        onMouseover: a[2] || (a[2] = (f) => i.value = !0)
+      }, [
+        M(d, {
+          icon: l.collapse ? "mdi-chevron-right" : "mdi-chevron-down",
+          size: "small"
+        }, null, 8, ["icon"]),
+        O("span", hn, F(l.title), 1),
+        O("span", kn, F(l.count), 1)
+      ], 36)), [
+        [c]
+      ]);
+    };
+  }
+}), xn = { class: "text-subtitle-1 ml-6" }, Vn = /* @__PURE__ */ R({
+  __name: "item",
+  props: {
+    id: {},
+    title: {}
+  },
+  emits: ["x-click"],
+  setup(t, { emit: s }) {
+    const { backgroundColor2: n, highlightColor: e } = te(), l = t, o = s, i = T(!1), u = L(() => ({
+      background: i.value ? e.value : n.value,
+      height: "48px",
+      marginBottom: "1px",
+      userSelect: "none"
+    }));
+    return (r, a) => {
+      const d = ee("ripple");
+      return Z((V(), 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)
+      }, [
+        O("span", xn, F(l.title), 1)
+      ], 36)), [
+        [d]
+      ]);
+    };
+  }
+}), Sn = { key: 0 }, Cn = {
+  key: 1,
+  class: "text-body-2 text-grey ml-3"
+}, Un = /* @__PURE__ */ R({
+  __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 = st(), o = (u) => {
+      const r = ke(l, u);
+      r && Ge(l, u, !r.collapse);
+    }, i = (u) => {
+      n.value = u, e.value = !1;
+    };
+    return (u, r) => D(l).length > 0 ? (V(), q("div", Sn, [
+      (V(!0), q(fe, null, Te(D(l), (a) => (V(), q(fe, {
+        key: a.id
+      }, [
+        a.type === 0 ? (V(), B(_n, {
+          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 ? (V(), B(Vn, {
+          key: 1,
+          id: a.id,
+          title: a.name,
+          onXClick: i
+        }, null, 8, ["id", "title"])) : G("", !0)
+      ], 64))), 128))
+    ])) : (V(), q("div", Cn, F(D(s)("x-prop-tree.noSlot")), 1));
+  }
+}), $n = { class: "text-subtitle-1 ml-3" }, wn = /* @__PURE__ */ R({
+  __name: "index",
+  props: {
+    modelValue: {},
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(t) {
+    const { t: s } = j(), n = We(), { sysBarAvail: e } = ve(), { backgroundColor1: l } = te(), o = z(t, "modelValue"), i = st(), u = L(() => {
+      let f = "100%";
+      return n.mdAndUp.value && (f = "400px"), {
+        background: l.value,
+        width: f,
+        height: "100%"
+      };
+    }), r = L(() => {
+      let f = 48;
+      return e.value && (f += 24), {
+        position: "relative",
+        height: `calc(100% - ${f}px)`
+      };
+    }), a = L(() => ({
+      height: "60px"
+    })), d = L(() => {
+      if (!o.value)
+        return s("x-runtime-lib.notSet");
+      const f = ke(i, o.value);
+      return f ? f.name : s("x-runtime-lib.slotNotAvail");
+    }), { open: c } = he(`propTreeSlotSelectDlg${Ue()}`);
+    return $e(() => {
+      c.value = !1;
+    }), (f, v) => {
+      const h = U("v-btn"), _ = U("v-sheet"), C = U("v-icon"), b = U("v-dialog");
+      return V(), B(b, {
+        modelValue: D(c),
+        "onUpdate:modelValue": v[5] || (v[5] = (k) => re(c) ? c.value = k : null),
+        fullscreen: "",
+        "no-click-animation": "",
+        persistent: "",
+        transition: "scroll-x-reverse-transition",
+        onKeydown: v[6] || (v[6] = Le(X((k) => c.value = !1, ["stop", "prevent"]), ["esc"]))
+      }, {
+        activator: K(({ props: k }) => [
+          M(h, we(k, {
+            block: "",
+            density: "comfortable"
+          }), {
+            default: K(() => [
+              ye(F(d.value), 1)
+            ]),
+            _: 1
+          }, 16)
+        ]),
+        default: K(() => [
+          O("div", {
+            class: "w-100 h-100 d-flex flex-row-reverse",
+            onClick: v[3] || (v[3] = X((k) => c.value = !1, ["self"])),
+            onContextmenu: v[4] || (v[4] = X((k) => c.value = !1, ["self", "prevent"]))
+          }, [
+            O("div", {
+              class: "elevation-2",
+              style: W(u.value)
+            }, [
+              D(e) ? (V(), B(_, {
+                key: 0,
+                color: "transparent",
+                height: 24
+              })) : G("", !0),
+              M(_, {
+                class: "d-flex align-center px-3",
+                color: "transparent",
+                height: 48
+              }, {
+                default: K(() => [
+                  M(C, {
+                    icon: "mdi-close",
+                    onClick: v[0] || (v[0] = (k) => c.value = !1)
+                  }),
+                  O("span", $n, F(D(s)("x-prop-tree.dlg.slotSelect.title")), 1)
+                ]),
+                _: 1
+              }),
+              O("div", {
+                class: "overflow-y-auto",
+                style: W(r.value)
+              }, [
+                M(Un, {
+                  modelValue: o.value,
+                  "onUpdate:modelValue": v[1] || (v[1] = (k) => o.value = k),
+                  open: D(c),
+                  "onUpdate:open": v[2] || (v[2] = (k) => re(c) ? c.value = k : null)
+                }, null, 8, ["modelValue", "open"]),
+                O("div", {
+                  style: W(a.value)
+                }, null, 4)
+              ], 4)
+            ], 4)
+          ], 32)
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+}), Mn = { class: "d-flex justify-space-between align-center" }, bn = /* @__PURE__ */ R({
+  __name: "index",
   props: /* @__PURE__ */ Q({
     hasDelete: { type: Boolean, default: !1 },
     readonly: { type: Boolean, default: !1 }
@@ -1288,16 +1288,16 @@ const Yt = /* @__PURE__ */ J({
     const { isMobile: n } = ve(), e = z(t, "modelValue"), l = s, o = async (i) => {
       if (!i || t.readonly || !n())
         return;
-      const u = await Ct({
+      const u = await Vt({
         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, {
+      const r = U("v-text-field"), a = U("v-btn"), d = ee("ripple");
+      return V(), q("div", Mn, [
+        Z(M(r, {
           modelValue: e.value,
           "onUpdate:modelValue": u[0] || (u[0] = (c) => e.value = c),
           density: "compact",
@@ -1307,13 +1307,13 @@ const Yt = /* @__PURE__ */ J({
           "onUpdate:focused": o
         }, null, 8, ["modelValue", "readonly"]), [
           [
-            m,
+            d,
             void 0,
             void 0,
             { stop: !0 }
           ]
         ]),
-        t.hasDelete ? (_(), T(a, {
+        t.hasDelete ? (V(), B(a, {
           key: 0,
           class: "mx-2",
           density: "compact",
@@ -1324,8 +1324,8 @@ const Yt = /* @__PURE__ */ J({
       ]);
     };
   }
-}), Dn = { class: "d-flex justify-space-between align-center" }, An = /* @__PURE__ */ J({
-  __name: "switch",
+}), Pn = { class: "d-flex justify-space-between align-center" }, Dn = /* @__PURE__ */ R({
+  __name: "index",
   props: /* @__PURE__ */ Q({
     hasDelete: { type: Boolean, default: !1 },
     readonly: { type: Boolean, default: !1 }
@@ -1337,9 +1337,9 @@ const Yt = /* @__PURE__ */ J({
   setup(t, { emit: s }) {
     const n = z(t, "modelValue"), e = s;
     return (l, o) => {
-      const i = C("v-switch"), u = C("v-btn");
-      return _(), q("div", Dn, [
-        b(i, {
+      const i = U("v-switch"), u = U("v-btn");
+      return V(), q("div", Pn, [
+        M(i, {
           modelValue: n.value,
           "onUpdate:modelValue": o[0] || (o[0] = (r) => n.value = r),
           class: "ml-1",
@@ -1348,7 +1348,7 @@ const Yt = /* @__PURE__ */ J({
           "hide-details": "",
           readonly: t.readonly
         }, null, 8, ["modelValue", "readonly"]),
-        t.hasDelete ? (_(), T(u, {
+        t.hasDelete ? (V(), B(u, {
           key: 0,
           class: "mx-2",
           density: "compact",
@@ -1360,8 +1360,8 @@ const Yt = /* @__PURE__ */ J({
     };
   }
 });
-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, {
+function An(t) {
+  return { renderUiColorPicker: (n, e, l, o, i) => e.ui !== "colorPicker" ? (console.assert(!1), x("div", "renderUiColorPicker property ui must be colorPicker")) : x(Qt, {
     modelValue: ne(
       n,
       e,
@@ -1389,7 +1389,7 @@ function Ln(t) {
   }) };
 }
 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, {
+  return { renderUiCompSelect: (n, e, l, o, i) => e.ui !== "compSelect" ? (console.assert(!1), x("div", "renderUiCompSelect property ui must be compSelect")) : x(un, {
     modelValue: ne(
       n,
       e,
@@ -1411,7 +1411,7 @@ function Tn(t) {
     }
   }) };
 }
-function Nn(t) {
+function Ln(t) {
   return { renderUiDummy: (n, e, l, o, i) => {
     if (e.ui !== "dummy") {
       console.assert(!1, "renderUiDummy property ui must be dummy");
@@ -1420,8 +1420,8 @@ function Nn(t) {
     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, {
+function Nn(t) {
+  return { renderUiJsonEditor: (n, e, l, o, i) => e.ui !== "jsonEditor" ? x("div", "renderUijsonEditor property ui must be jsonEditor") : x(cn, {
     modelValue: ne(
       n,
       e,
@@ -1444,7 +1444,7 @@ function On(t) {
   }) };
 }
 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, {
+  return { renderUiMultiTypes: (n, e, l, o, i) => e.ui !== "multiTypes" ? (console.assert(!1), x("div", "renderUiMultiTypes property ui must be multiTypes")) : x(fn, {
     modelValue: ne(
       n,
       e,
@@ -1471,8 +1471,8 @@ function Bn(t) {
     types: e.types
   }) };
 }
-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, {
+function On(t) {
+  return { renderUiNumInput: (n, e, l, o, i) => e.ui !== "numInput" ? (console.assert(!1), x("div", "renderUiNumInput property ui must be numInput")) : x(pn, {
     modelValue: ne(
       n,
       e,
@@ -1503,14 +1503,14 @@ function qn(t) {
     readonly: e.readonly
   }) };
 }
-const Kn = /* @__PURE__ */ J({
-  __name: "entry",
+const qn = /* @__PURE__ */ R({
+  __name: "index",
   props: {
     minHeight: {}
   },
   emits: ["menu"],
   setup(t, { emit: s }) {
-    const { backgroundColor2: n, highlightColor: e } = te(), l = s, o = O(!1), i = A(() => ({
+    const { backgroundColor2: n, highlightColor: e } = te(), l = s, o = T(!1), i = L(() => ({
       background: o.value ? e.value : n.value,
       minHeight: t.minHeight,
       paddingRight: "4px",
@@ -1520,8 +1520,8 @@ const Kn = /* @__PURE__ */ J({
       l("menu", r.clientX, r.clientY);
     };
     return (r, a) => {
-      const m = ee("ripple");
-      return Z((_(), q("div", {
+      const d = ee("ripple");
+      return Z((V(), q("div", {
         class: "d-flex justify-space-between align-center cursor-pointer",
         style: W(i.value),
         onContextmenu: X(u, ["self", "prevent"]),
@@ -1530,36 +1530,36 @@ const Kn = /* @__PURE__ */ J({
       }, [
         ht(r.$slots, "default")
       ], 36)), [
-        [m]
+        [d]
       ]);
     };
   }
 });
-function Jn(t, s, n) {
+function Kn(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,
+    let d = typeof r == "number" ? `[${r + 1}]` : e(i.name);
+    return me(t.value, o) && (d += " *"), x(
+      qn,
       {
         minHeight: s.value,
-        onMenu: (c, v) => {
-          de.emit("propTreeMenu", { x: c, y: v, keys: o });
+        onMenu: (c, f) => {
+          de.emit("propTreeMenu", { x: c, y: f, keys: o });
         }
       },
       () => [
-        h("span", {
+        x("span", {
           style: { marginLeft: "4px", pointerEvents: "none" },
-          innerHTML: m
+          innerHTML: d
         }),
-        h("div", { style: { width: n.value } }, u)
+        x("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, {
+  return { renderUiSelect: (n, e, l, o, i) => e.ui !== "select" ? (console.assert(!1), x("div", "renderUiSelect property ui must be select")) : x(yn, {
     modelValue: ne(
       n,
       e,
@@ -1588,7 +1588,7 @@ function Rn(t) {
   }) };
 }
 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, {
+  return { renderUiSlotSelect: (n, e, l, o, i) => e.ui !== "slotSelect" ? (console.assert(!1), x("div", "renderUiSlotSelect property ui must be slotSelect")) : x(wn, {
     modelValue: ne(
       n,
       e,
@@ -1610,8 +1610,8 @@ function En(t) {
     }
   }) };
 }
-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, {
+function Jn(t) {
+  return { renderUiStrInput: (n, e, l, o, i) => e.ui !== "strInput" ? (console.assert(!1), x("div", "renderUiStrInput property ui must be strInput")) : x(bn, {
     modelValue: e.static ? e.value : ne(
       n,
       e,
@@ -1638,8 +1638,8 @@ function Hn(t) {
     readonly: e.static || e.readonly
   }) };
 }
-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, {
+function Hn(t) {
+  return { renderUiSwitch: (n, e, l, o, i) => e.ui !== "switch" ? (console.assert(!1), x("div", "renderUiSwitch property ui must be switch")) : x(Dn, {
     modelValue: ne(
       n,
       e,
@@ -1666,135 +1666,219 @@ function Xn(t) {
     readonly: e.readonly
   }) };
 }
-const Fn = /* @__PURE__ */ J({
+function Xn() {
+  const t = T([]);
+  Ft(t);
+  const s = () => {
+    const { activeApp: o, depends: i } = Qe.app, u = [];
+    for (const { id: r, name: a, position: d } of o.compGroups) {
+      const c = t.value.find((f) => f.id === r);
+      u.push({
+        id: r,
+        type: 0,
+        name: a,
+        position: d,
+        collapse: c?.collapse ?? !0
+      });
+    }
+    for (const { id: r, groupId: a, name: d, position: c } of o.comps)
+      i[r] && u.push({ id: r, type: 1, name: d, position: c, group: a });
+    Ye(u, !0), t.value = u;
+  };
+  let n;
+  const e = () => {
+    clearTimeout(n), n = window.setTimeout(() => {
+      s(), n && e();
+    }, 1e3);
+  }, l = () => {
+    clearTimeout(n), n = void 0;
+  };
+  He(() => {
+    e();
+  }), Xe(() => {
+    l();
+  });
+}
+function Fn(t, s, n) {
+  const { i18n: e } = St, l = T([]);
+  zt(l);
+  const o = () => {
+    if (!t.value || !s.value || !n.value)
+      return;
+    const a = Ne[t.value];
+    if (!a) {
+      console.assert(!1, `invalid version=${t.value}`);
+      return;
+    }
+    const d = $t(s.value, n.value), c = [];
+    for (let h = 0; h < a.groups[d].length; h++) {
+      const _ = a.groups[d][h], C = ke(l, _.key);
+      c.push({
+        id: _.key,
+        type: 0,
+        name: e.global.t(_.name),
+        position: h,
+        collapse: C?.collapse ?? !0,
+        count: 0
+      });
+      for (let b = 0; b < _.items.length; b++) {
+        const k = _.items[b], S = wt[k];
+        S && (S.internal || !S.slots || S.slots.length <= 0 || c.push({
+          id: S.key,
+          type: 1,
+          name: e.global.t(S.name),
+          position: b,
+          group: _.key
+        }));
+      }
+    }
+    const { activeApp: f, depends: v } = Qe.app;
+    for (const { id: h, name: _, position: C } of f.compGroups) {
+      const b = l.value.find((k) => k.id);
+      c.push({
+        id: h,
+        type: 0,
+        name: _,
+        position: C,
+        collapse: b?.collapse ?? !0
+      });
+    }
+    for (const { id: h, groupId: _, name: C, position: b } of f.comps) {
+      const k = v[h];
+      k && (!k.meta.slots || k.meta.slots.length <= 0 || c.push({ id: h, type: 1, name: C, position: b, group: _ }));
+    }
+    Ye(c, !0), l.value = c;
+  };
+  let i;
+  const u = () => {
+    clearTimeout(i), i = window.setTimeout(() => {
+      o(), i && u();
+    }, 1e3);
+  }, r = () => {
+    clearTimeout(i), i = void 0;
+  };
+  He(() => {
+    u();
+  }), Xe(() => {
+    r();
+  }), oe([t, s, n], () => {
+    o(), u();
+  });
+}
+const zn = /* @__PURE__ */ R({
   __name: "index",
   props: {
     unique: {},
     config: {},
     object: {},
-    version: {}
+    version: {},
+    type: {},
+    subtype: {}
   },
   emits: ["change"],
   setup(t, { emit: s }) {
-    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);
+    const { t: n } = j(), { backgroundColor1: e } = te(), l = t, o = s, i = T("20px"), u = T("56px"), r = T("200px"), a = kt({}), d = T({}), c = (p, m) => {
+      Ee(d, l.config, l.object), o("change", p, m);
     };
-    ce(
+    oe(
       [() => l.config, () => l.object],
       () => {
-        Je(
-          m,
+        Ee(
+          d,
           l.config,
           l.object,
-          (g, d) => {
-            o("change", g, d);
+          (p, m) => {
+            o("change", p, m);
           }
         );
       },
       { immediate: !0 }
     );
-    const v = O(l.version);
-    Bt(v), ce(
+    const f = T(l.version);
+    Bt(f), oe(
       () => l.version,
       () => {
-        v.value = l.version;
+        f.value = l.version;
+      }
+    );
+    const v = T(l.type);
+    oe(
+      () => l.type,
+      () => {
+        v.value = l.type;
+      }
+    );
+    const h = T(l.subtype);
+    oe(
+      () => l.subtype,
+      () => {
+        h.value = l.subtype;
       }
     );
-    const f = O(l.config);
-    qt(f), ce(
+    const _ = T(l.config);
+    Ot(_), oe(
       () => l.config,
       () => {
-        f.value = l.config;
+        _.value = l.config;
       }
     );
-    const V = O(l.object);
-    Jt(V), ce(
+    const C = T(l.object);
+    Kt(C), oe(
       () => l.object,
       () => {
-        V.value = l.object;
+        C.value = l.object;
       }
-    ), 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: S,
-          position: w,
-          collapse: N?.collapse ?? !0
-        });
-      }), 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);
-    }, P = () => {
-      clearTimeout(k), k = void 0;
-    };
-    kt(() => {
-      x();
-    }), xt(() => {
-      P();
-    });
-    const { renderProperty: E } = Jn(
-      m,
+    ), Et(d), Ht(c), Xn(), Fn(f, v, h);
+    const { renderProperty: b } = Kn(
+      d,
       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,
+    ), { renderUiDummy: k } = Ln(c), { renderUiStrInput: S } = Jn(c), { renderUiNumInput: P } = On(c), { renderUiSwitch: E } = Hn(c), { renderUiSelect: I } = Rn(c), { renderUiColorPicker: De } = An(c), { renderUiJsonEditor: it } = Nn(c), { renderUiMultiTypes: ut } = Bn(c), { renderUiCompSelect: rt } = Tn(c), { renderUiSlotSelect: at } = En(c), _e = (p, m, y, g, $, A) => (p = ze(p), $ !== void 0 ? (p.push($), A && p.push(m.key)) : p.push(m.key), m.ui ? m.array && g ? mt(
       p,
-      S,
-      w
-    ) : ft(g, d, y, S, w) : d.array ? ct(
-      g,
-      d,
+      m,
       y,
-      p,
-      S,
-      w
-    ) : dt(
       g,
-      d,
+      $,
+      A
+    ) : ft(p, m, y, $, A) : m.array ? ct(
+      p,
+      m,
       y,
+      g,
+      $,
+      A
+    ) : dt(
       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,
+      m,
+      y,
+      g,
+      $,
+      A
+    )), ct = (p, m, y, g, $, A) => {
+      if (m.ui)
+        return console.assert(!1), x("div", "renderBranchArray property ui must be invalid");
+      if (!m.array)
+        return console.assert(!1), x("div", "renderBranchArray property array must be valid");
+      if (!g)
+        return console.assert(!1), x("div", "renderBranchArray branch must be valid");
+      let H;
+      $ !== void 0 && !A ? (y[$] instanceof Array || (y[$] = J(m), c(p, y[m.key])), H = y[$]) : (y[m.key] instanceof Array || (y[m.key] = J(m), c(p, y[m.key])), H = y[m.key]);
+      let ie = n(m.name);
+      g.collapse && me(d.value, p) && (ie += " *");
+      const pe = x(Ce, {
+        title: ie,
+        collapse: g.collapse,
         hasCreate: !0,
-        onCollapse: ($) => {
-          p.collapse = $;
+        onCollapse: (w) => {
+          g.collapse = w;
         },
-        onMenu: ($, L) => {
-          de.emit("propTreeMenu", { x: $, y: L, keys: g });
+        onMenu: (w, N) => {
+          de.emit("propTreeMenu", { x: w, y: N, keys: p });
         },
         onCreate: () => {
-          N.push({}), c(g, N);
+          H.push({}), c(p, H);
         }
-      }), Y = h(
+      }), Y = x(
         "div",
         {
           style: {
@@ -1802,44 +1886,44 @@ const Fn = /* @__PURE__ */ J({
           }
         },
         (() => {
-          const $ = [];
-          for (let L = 0; L < N.length; L++) {
-            if (!Ae(p.children)) {
+          const w = [];
+          for (let N = 0; N < H.length; N++) {
+            if (!Ae(g.children)) {
               console.assert(!1);
               break;
             }
-            p.children[L] || p.children.push({
+            g.children[N] || g.children.push({
               collapse: !0,
               children: {}
             });
-            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,
+            const xe = [...p, N], Ve = g.children[N];
+            let qe = `[${N + 1}]`;
+            g.children[N].collapse && me(d.value, xe) && (qe += " *");
+            const pt = x(Ce, {
+              title: qe,
+              collapse: g.children[N].collapse,
               hasDelete: !0,
-              index: L,
-              onCollapse: (oe) => {
-                if (!Ae(p.children)) {
+              index: N,
+              onCollapse: (le) => {
+                if (!Ae(g.children)) {
                   console.assert(!1);
                   return;
                 }
-                p.children[L].collapse = oe;
+                g.children[N].collapse = le;
               },
-              onMenu: (oe, ie) => {
-                de.emit("propTreeMenu", { x: oe, y: ie, keys: ke });
+              onMenu: (le, ue) => {
+                de.emit("propTreeMenu", { x: le, y: ue, keys: xe });
               },
-              onDelete: (oe) => {
-                if (!Ae(p.children)) {
+              onDelete: (le) => {
+                if (!Ae(g.children)) {
                   console.assert(!1);
                   return;
                 }
-                p.children.splice(oe, 1), N.splice(oe, 1), c(g, N);
+                g.children.splice(le, 1), H.splice(le, 1), c(p, H);
               }
             });
-            $.push(pt);
-            const gt = h(
+            w.push(pt);
+            const gt = x(
               "div",
               {
                 style: {
@@ -1847,34 +1931,34 @@ const Fn = /* @__PURE__ */ J({
                 }
               },
               (() => {
-                const oe = [];
-                return d.children.forEach((ie) => {
-                  if (!Ke(xe.children)) {
+                const le = [];
+                return m.children.forEach((ue) => {
+                  if (!Re(Ve.children)) {
                     console.assert(!1);
                     return;
                   }
-                  xe.children[ie.key] || (xe.children[ie.key] = {
+                  Ve.children[ue.key] || (Ve.children[ue.key] = {
                     collapse: !0,
-                    children: ie.array ? [] : {}
+                    children: ue.array ? [] : {}
                   });
                   const yt = _e(
-                    g,
-                    ie,
-                    N[L],
-                    xe.children[ie.key],
-                    L,
+                    p,
+                    ue,
+                    H[N],
+                    Ve.children[ue.key],
+                    N,
                     !0
                   );
-                  oe.push(yt);
-                }), oe;
+                  le.push(yt);
+                }), le;
               })()
             );
-            p.children[L].collapse || $.push(gt);
+            g.children[N].collapse || w.push(gt);
           }
-          return $;
+          return w;
         })()
       );
-      return h(
+      return x(
         "div",
         {
           style: {
@@ -1882,33 +1966,33 @@ const Fn = /* @__PURE__ */ J({
           }
         },
         (() => {
-          const $ = [];
-          return $.push(pe), p.collapse || $.push(Y), $;
+          const w = [];
+          return w.push(pe), g.collapse || w.push(Y), w;
         })()
       );
-    }, 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,
+    }, dt = (p, m, y, g, $, A) => {
+      if (m.ui)
+        return console.assert(!1), x("div", "renderBranchScalar property ui must be invalid");
+      if (m.array)
+        return console.assert(!1), x("div", "renderBranchScalar property array must be invalid");
+      if (!g)
+        return console.assert(!1), x("div", "renderBranchScalar branch must be valid");
+      let H = n(m.name);
+      g.collapse && me(d.value, p) && (H += " *");
+      const ie = x(Ce, {
+        title: H,
+        collapse: g.collapse,
+        hasDelete: $ !== void 0 && !A,
         onCollapse: (Y) => {
-          p.collapse = Y;
+          g.collapse = Y;
         },
-        onMenu: (Y, $) => {
-          de.emit("propTreeMenu", { x: Y, y: $, keys: g });
+        onMenu: (Y, w) => {
+          de.emit("propTreeMenu", { x: Y, y: w, keys: p });
         },
         onDelete: () => {
-          S === void 0 || w || (y.splice(S, 1), c(g.slice(0, -1), y));
+          $ === void 0 || A || (y.splice($, 1), c(p.slice(0, -1), y));
         }
-      }), pe = h(
+      }), pe = x(
         "div",
         {
           style: {
@@ -1917,26 +2001,26 @@ const Fn = /* @__PURE__ */ J({
         },
         (() => {
           const Y = [];
-          return d.children.forEach(($) => {
-            if (!Ke(p.children)) {
+          return m.children.forEach((w) => {
+            if (!Re(g.children)) {
               console.assert(!1);
               return;
             }
-            p.children[$.key] || (p.children[$.key] = {
+            g.children[w.key] || (g.children[w.key] = {
               collapse: !0,
-              children: !$.ui && $.array ? [] : {}
+              children: !w.ui && w.array ? [] : {}
             });
-            const L = _e(
-              g,
-              $,
-              (typeof y[d.key] != "object" && (y[d.key] = {}, c(g, y[d.key])), y[d.key]),
-              p.children[$.key]
+            const N = _e(
+              p,
+              w,
+              (typeof y[m.key] != "object" && (y[m.key] = {}, c(p, y[m.key])), y[m.key]),
+              g.children[w.key]
             );
-            Y.push(L);
+            Y.push(N);
           }), Y;
         })()
       );
-      return h(
+      return x(
         "div",
         {
           style: {
@@ -1945,34 +2029,34 @@ const Fn = /* @__PURE__ */ J({
         },
         (() => {
           const Y = [];
-          return Y.push(le), p.collapse || Y.push(pe), Y;
+          return Y.push(ie), g.collapse || Y.push(pe), Y;
         })()
       );
-    }, 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,
+    }, mt = (p, m, y, g, $, A) => {
+      if (!m.ui)
+        return console.assert(!1), x("div", "renderLeafArray property ui must be valid");
+      if (!m.array)
+        return console.assert(!1), x("div", "renderLeafArray property array must be valid");
+      if (!g)
+        return console.assert(!1), x("div", "renderLeafArray branch must be valid");
+      let H;
+      $ !== void 0 && !A ? (y[$] instanceof Array || (y[$] = J(m), c(p, y[$])), H = y[$]) : (y[m.key] instanceof Array || (y[m.key] = J(m), c(p, y[m.key])), H = y[m.key]);
+      let ie = n(m.name);
+      g.collapse && me(d.value, p) && (ie += " *");
+      const pe = x(Ce, {
+        title: ie,
+        collapse: g.collapse,
         hasCreate: !0,
-        onCollapse: ($) => {
-          p.collapse = $;
+        onCollapse: (w) => {
+          g.collapse = w;
         },
-        onMenu: ($, L) => {
-          de.emit("propTreeMenu", { x: $, y: L, keys: g });
+        onMenu: (w, N) => {
+          de.emit("propTreeMenu", { x: w, y: N, keys: p });
         },
         onCreate: () => {
-          N.push(H(d, !0)), c(g, N);
+          H.push(J(m, !0)), c(p, H);
         }
-      }), Y = h(
+      }), Y = x(
         "div",
         {
           style: {
@@ -1980,15 +2064,15 @@ const Fn = /* @__PURE__ */ J({
           }
         },
         (() => {
-          const $ = [];
-          for (let L = 0; L < N.length; L++) {
-            const ke = _e(g, d, N, void 0, L, !1);
-            $.push(ke);
+          const w = [];
+          for (let N = 0; N < H.length; N++) {
+            const xe = _e(p, m, H, void 0, N, !1);
+            w.push(xe);
           }
-          return $;
+          return w;
         })()
       );
-      return h(
+      return x(
         "div",
         {
           style: {
@@ -1996,16 +2080,16 @@ const Fn = /* @__PURE__ */ J({
           }
         },
         (() => {
-          const $ = [];
-          return $.push(pe), p.collapse || $.push(Y), $;
+          const w = [];
+          return w.push(pe), g.collapse || w.push(Y), w;
         })()
       );
-    }, 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(
+    }, ft = (p, m, y, g, $) => {
+      if (!m.ui)
+        return console.assert(!1), x("div", "renderLeafScalar property ui must be valid");
+      let A;
+      return m.ui === "dummy" ? A = k(p, m, y, g, $) : m.ui === "strInput" ? A = S(p, m, y, g, $) : m.ui === "numInput" ? A = P(p, m, y, g, $) : m.ui === "switch" ? A = E(p, m, y, g, $) : m.ui === "select" ? A = I(p, m, y, g, $) : m.ui === "colorPicker" ? A = De(p, m, y, g, $) : m.ui === "jsonEditor" ? A = it(p, m, y, g, $) : m.ui === "multiTypes" ? A = ut(p, m, y, g, $) : m.ui === "compSelect" ? A = rt(p, m, y, g, $) : m.ui === "slotSelect" ? A = at(p, m, y, g, $) : console.assert(!1, "renderLeafScalar not implemented"), A ? b(p, m, A) : x("div");
+    }, vt = () => x(
       "div",
       {
         class: "text-body-2",
@@ -2014,49 +2098,49 @@ const Fn = /* @__PURE__ */ J({
         }
       },
       (() => {
-        const g = [];
+        const p = [];
         if (l.unique && l.config.length > 0 && l.object) {
           a[l.unique] || (a[l.unique] = {});
-          const d = a[l.unique];
+          const m = a[l.unique];
           l.config.forEach((y) => {
-            d[y.key] || (d[y.key] = {
+            m[y.key] || (m[y.key] = {
               collapse: !0,
               children: !y.ui && y.array ? [] : {}
             });
-            const p = _e(
+            const g = _e(
               [],
               y,
               l.object,
-              d[y.key]
+              m[y.key]
             );
-            g.push(p);
+            p.push(g);
           });
         }
-        return g;
+        return p;
       })()
     );
-    return (g, d) => (_(), q(fe, null, [
-      b(vt),
-      b(Yt, {
+    return (p, m) => (V(), q(fe, null, [
+      M(vt),
+      M(Gt, {
         config: l.config,
         object: l.object,
-        "property-states": m.value
+        "property-states": d.value
       }, null, 8, ["config", "object", "property-states"])
     ], 64));
   }
-}), zn = (t) => {
-  t.component("XPropTree", Fn);
-}, Gn = (t, s, n) => {
+}), Gn = (t) => {
+  t.component("XPropTree", zn);
+}, Yn = (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 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;
+async function ll(t) {
+  return (await Yn(/* @__PURE__ */ Object.assign({ "./locales/en/index.ts": () => import("./i18n-en.fwi8tazn.js"), "./locales/zhHans/index.ts": () => import("./i18n-zhHans.ju37v3iz.js") }), `./locales/${t}/index.ts`, 4)).default;
 }
-const ll = { install: zn };
+const ol = { install: Gn };
 export {
-  ll as default,
-  nl as loadLocaleMessagePropTree
+  ol as default,
+  ll as loadLocaleMessagePropTree
 };