x-prop-tree 0.7.13 → 0.7.15

package/dist/index.js

@@ -1,21 +1,28 @@
-import { provide as ce, inject as de, defineComponent as R, ref as O, computed as K, resolveComponent as U, createBlock as B, openBlock as C, unref as L, isRef as ve, withCtx as J, createVNode as D, createElementBlock as E, Fragment as Ve, renderList as Be, createTextVNode as Ce, toDisplayString as W, resolveDirective as le, withDirectives as ee, withModifiers as X, normalizeStyle as I, createElementVNode as F, createCommentVNode as G, renderSlot as ft, h, mergeModels as Y, useModel as z, useId as we, onUnmounted as De, withKeys as Ke, mergeProps as be, watchEffect as Ne, watch as re, useTemplateRef as Je, reactive as mt, onMounted as vt, onBeforeUnmount as pt } from "vue";
+import { provide as ce, inject as de, defineComponent as R, ref as O, computed as K, resolveComponent as U, createBlock as B, openBlock as C, unref as L, isRef as ve, withCtx as J, createVNode as D, createElementBlock as E, Fragment as Ve, renderList as Be, createTextVNode as Ce, toDisplayString as W, resolveDirective as le, withDirectives as ee, withModifiers as X, normalizeStyle as I, createElementVNode as F, createCommentVNode as G, renderSlot as ft, h as y, mergeModels as Y, useModel as z, useId as we, onUnmounted as De, withKeys as Ke, mergeProps as be, watchEffect as Ne, watch as ue, useTemplateRef as Je, reactive as mt, onMounted as vt, onBeforeUnmount as pt } from "vue";
 import { useI18n as te } from "vue-i18n";
-import { useViewStack as xe, useColor as ie, eventBus as ue, useSystem as pe, openPromptDlg as yt, openNumberDlg as Re, injectDark as gt, injectLocale as ht } from "x-essential-lib";
+import { useViewStack as xe, useColor as ie, eventBus as re, useSystem as pe, openPromptDlg as gt, openNumberDlg as Re, injectDark as ht, injectLocale as yt } from "x-essential-lib";
 import { c as Ee, i as Se, r as He, v as kt, d as _t } from "./vendor.f0ug048x.js";
-import { getPropDefault as q, pkgs as Fe, parsePixelStr as Vt, parsePercentStr as Ct } from "x-runtime-lib";
+import { getPropertyDefault as q, pkgs as Fe, parsePixelStr as Vt, parsePercentStr as Ct } from "x-runtime-lib";
 import { globalState as xt } from "x-state-lib";
 import { useDisplay as St } from "vuetify";
 import { XBlockly as Ut } from "x-block-lib";
 const ke = (t, s) => {
-  let n = { key: "", name: "", children: t };
+  let n = {
+    key: "",
+    name: "",
+    children: t
+  };
   return s.forEach((e) => {
     if (typeof e != "number") {
       if (!n) {
-        console.assert(!1, `unpkgProp invalid prop keys=${s}`);
+        console.assert(!1, `unpkgProp invalid property keys=${s}`);
         return;
       }
       if (n.ui) {
-        console.assert(!1, `unpkgProp prop ui must be invalid keys=${s}`);
+        console.assert(
+          !1,
+          `unpkgProp property ui must be invalid keys=${s}`
+        );
         return;
       }
       n = n.children.find((l) => l.key === e);
@@ -55,7 +62,13 @@ const ke = (t, s) => {
   l,
   o,
   i
-) : At(s, n, e, o, i) : s.array ? wt(
+) : At(
+  s,
+  n,
+  e,
+  o,
+  i
+) : s.array ? wt(
   t,
   s,
   n,
@@ -73,19 +86,25 @@ const ke = (t, s) => {
   i
 )), wt = (t, s, n, e, l, o, i) => {
   if (s.ui)
-    return console.assert(!1, "execPropBranchArray prop ui must be invalid"), !1;
+    return console.assert(!1, "execPropertyBranchArray property ui must be invalid"), !1;
   if (!s.array)
-    return console.assert(!1, "execPropBranchArray prop array must be valid"), !1;
+    return console.assert(
+      !1,
+      "execPropertyBranchArray property array must be valid"
+    ), !1;
   if (!e.children || !Ue(e.children))
-    return console.assert(!1, "execPropBranchArray state children must be array"), !1;
-  let u;
-  o !== void 0 && !i ? (n[o] instanceof Array || (n[o] = q(s), l?.(t, n[o])), u = n[o]) : (n[s.key] instanceof Array || (n[s.key] = q(s), l?.(t, n[s.key])), u = n[s.key]), e.change = !1;
-  for (let r = 0; r < u.length; r++) {
+    return console.assert(
+      !1,
+      "execPropertyBranchArray state children must be array"
+    ), !1;
+  let r;
+  o !== void 0 && !i ? (n[o] instanceof Array || (n[o] = q(s), l?.(t, n[o])), r = n[o]) : (n[s.key] instanceof Array || (n[s.key] = q(s), l?.(t, n[s.key])), r = n[s.key]), e.change = !1;
+  for (let u = 0; u < r.length; u++) {
     e.children.push({
       change: !1,
       children: {}
     });
-    const a = e.children[r];
+    const a = e.children[u];
     s.children.forEach((f) => {
       if (!a.children || !Ae(a.children)) {
         console.assert(!1);
@@ -97,50 +116,64 @@ const ke = (t, s) => {
       }, $e(
         t,
         f,
-        u[r],
+        r[u],
         a.children[f.key],
         l,
-        r,
+        u,
         !0
       ) && (a.change = !0), a.change && (e.change = !0);
     });
   }
-  return e.change || (e.change = !Se(u, q(s))), e.change;
+  return e.change || (e.change = !Se(r, q(s))), e.change;
 }, Dt = (t, s, n, e, l, o, i) => {
   if (s.ui)
-    return console.assert(!1, "execPropBranchScalar prop ui must be invalid"), !1;
+    return console.assert(
+      !1,
+      "execPropertyBranchScalar property ui must be invalid"
+    ), !1;
   if (s.array)
-    return console.assert(!1, "execPropBranchScalar prop array must be invalid"), !1;
+    return console.assert(
+      !1,
+      "execPropertyBranchScalar property array must be invalid"
+    ), !1;
   if (!e.children || !Ae(e.children))
-    return console.assert(!1, "execPropBranchScalar 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;
-  for (let r = 0; r < s.children.length; r++) {
-    const a = s.children[r];
+    return console.assert(!1, "execPropertyBranchScalar state children must be map"), !1;
+  let r;
+  o !== void 0 && !i ? (n[o] || (n[o] = {}), r = n[o]) : (n[s.key] || (n[s.key] = {}), r = n[s.key]), e.change = !1;
+  for (let u = 0; u < s.children.length; u++) {
+    const a = s.children[u];
     e.children[a.key] = {
       change: !1,
       children: a.array ? [] : {}
-    }, $e(t, a, u, e.children[a.key], l) && (e.change = !0);
+    }, $e(t, a, r, e.children[a.key], l) && (e.change = !0);
   }
   return e.change;
 }, bt = (t, s, n, e, l, o, i) => {
   if (!s.ui)
-    return console.assert(!1, "execPropLeafArray prop ui must be valid"), !1;
+    return console.assert(!1, "execPropertyLeafArray property ui must be valid"), !1;
   if (!s.array)
-    return console.assert(!1, "execPropLeafArray prop aray must be valid"), !1;
+    return console.assert(!1, "execPropertyLeafArray property aray must be valid"), !1;
   if (!e.children || !Ue(e.children))
-    return console.assert(!1, "execPropLeafArray state children must be array"), !1;
-  let u;
-  o !== void 0 && !i ? (n[o] instanceof Array || (n[o] = q(s), l?.(t, n[o])), u = n[o]) : (n[s.key] instanceof Array || (n[s.key] = q(s), l?.(t, n[s.key])), u = n[s.key]), e.change = !1;
-  for (let r = 0; r < u.length; r++)
-    e.children[r] = {
+    return console.assert(!1, "execPropertyLeafArray state children must be array"), !1;
+  let r;
+  o !== void 0 && !i ? (n[o] instanceof Array || (n[o] = q(s), l?.(t, n[o])), r = n[o]) : (n[s.key] instanceof Array || (n[s.key] = q(s), l?.(t, n[s.key])), r = n[s.key]), e.change = !1;
+  for (let u = 0; u < r.length; u++)
+    e.children[u] = {
       change: !1,
       children: {}
-    }, $e(t, s, u, e.children[r], l, r, !1) && (e.change = !0);
-  return e.change || (e.change = !Se(u, q(s))), e.change;
+    }, $e(
+      t,
+      s,
+      r,
+      e.children[u],
+      l,
+      u,
+      !1
+    ) && (e.change = !0);
+  return e.change || (e.change = !Se(r, q(s))), e.change;
 }, At = (t, s, n, e, l) => {
   if (!t.ui)
-    return console.assert(!1, "execPropLeafScalar prop ui must be valid"), !1;
+    return console.assert(!1, "execPropertyLeafScalar property ui must be valid"), !1;
   let o;
   return e !== void 0 && !l ? o = s[e] : o = s[t.key], n.change = !Se(o, q(t, !0)), n.change;
 }, qe = (t, s, n, e) => {
@@ -156,7 +189,10 @@ const ke = (t, s) => {
     }, $e([], o, n, l[o.key], e);
   }), t.value = l;
 }, ae = (t, s) => {
-  let n = { change: !1, children: t };
+  let n = {
+    change: !1,
+    children: t
+  };
   return s.forEach((e) => {
     if (!n)
       return console.assert(!1, `isPropChanged state must be valid keys=${s}`), !1;
@@ -204,40 +240,40 @@ function Ze() {
 const Ht = /* @__PURE__ */ R({
   __name: "menu",
   setup(t) {
-    const { t: s } = te(), n = Nt(), e = qt(), l = Kt(), o = Rt(), i = O(0), u = O(0), r = O([]), a = K(() => [i.value, u.value]), f = (P) => {
-      const T = () => !(r.value.length <= 0 || !ae(l.value, r.value)), w = () => {
-        const k = ke(n.value, r.value);
+    const { t: s } = te(), n = Nt(), e = qt(), l = Kt(), o = Rt(), i = O(0), r = O(0), u = O([]), a = K(() => [i.value, r.value]), f = (P) => {
+      const T = () => !(u.value.length <= 0 || !ae(l.value, u.value)), w = () => {
+        const k = ke(n.value, u.value);
         if (k)
           if (k.ui) {
-            const M = me(e.value, r.value.slice(0, -1));
+            const M = me(e.value, u.value.slice(0, -1));
             if (!M)
               return;
-            M[r.value[r.value.length - 1]] = q(k), o(r.value, M[r.value[r.value.length - 1]]);
+            M[u.value[u.value.length - 1]] = q(k), o(u.value, M[u.value[u.value.length - 1]]);
           } else if (k.array) {
-            const M = r.value[r.value.length - 1];
+            const M = u.value[u.value.length - 1];
             if (M === void 0) {
               console.assert(!1, "invalid last key");
               return;
             }
             if (typeof M == "string") {
-              const N = me(e.value, r.value.slice(0, -1));
+              const N = me(e.value, u.value.slice(0, -1));
               if (!N)
                 return;
-              N[r.value[r.value.length - 1]] = q(k), o(r.value, N[r.value[r.value.length - 1]]);
+              N[u.value[u.value.length - 1]] = q(k), o(u.value, N[u.value[u.value.length - 1]]);
             } else {
-              const N = me(e.value, r.value);
+              const N = me(e.value, u.value);
               if (!N)
                 return;
               k.children.forEach((Q) => {
-                N[Q.key] = q(k), o([...r.value, Q.key], N[Q.key]);
+                N[Q.key] = q(k), o([...u.value, Q.key], N[Q.key]);
               });
             }
           } else {
-            const M = me(e.value, r.value);
+            const M = me(e.value, u.value);
             if (!M)
               return;
             k.children.forEach((N) => {
-              M[N.key] = q(k), o([...r.value, N.key], M[N.key]);
+              M[N.key] = q(k), o([...u.value, N.key], M[N.key]);
             });
           }
       };
@@ -247,20 +283,20 @@ const Ht = /* @__PURE__ */ R({
       });
     }, d = (P) => {
       const T = () => {
-        const w = ke(n.value, r.value), k = me(e.value, r.value);
-        localStorage.setItem("propTreeCopy", JSON.stringify({ prop: w, object: k }));
+        const w = ke(n.value, u.value), k = me(e.value, u.value);
+        localStorage.setItem("propTreeCopy", JSON.stringify({ property: w, object: k }));
       };
       P.push({
         title: s("x-prop-tree.copy"),
         func: T
       });
-    }, y = (P) => {
+    }, g = (P) => {
       const T = () => {
         const k = localStorage.getItem("propTreeCopy");
         if (!k)
           return !1;
         try {
-          const { prop: M } = JSON.parse(k), N = ke(n.value, r.value);
+          const { property: M } = JSON.parse(k), N = ke(n.value, u.value);
           return $t(M, N);
         } catch (M) {
           console.error(M);
@@ -272,7 +308,7 @@ const Ht = /* @__PURE__ */ R({
         const k = localStorage.getItem("propTreeCopy");
         if (k)
           try {
-            const { object: M } = JSON.parse(k), N = ke(n.value, r.value);
+            const { object: M } = JSON.parse(k), N = ke(n.value, u.value);
             console.log(M, N);
           } catch (M) {
             console.error(M);
@@ -282,11 +318,11 @@ const Ht = /* @__PURE__ */ R({
         title: s("x-prop-tree.paste"),
         func: w
       });
-    }, g = K(() => {
+    }, h = K(() => {
       const P = [];
-      return f(P), d(P), y(P), P;
+      return f(P), d(P), g(P), P;
     }), V = (P) => {
-      i.value = P.x, u.value = P.y, r.value = P.keys;
+      i.value = P.x, r.value = P.y, u.value = P.keys;
     }, { open: x } = xe("propTreeMenu", V);
     return (P, T) => {
       const w = U("v-list-item-title"), k = U("v-list-item"), M = U("v-list"), N = U("v-menu");
@@ -300,7 +336,7 @@ const Ht = /* @__PURE__ */ R({
         default: J(() => [
           D(M, null, {
             default: J(() => [
-              (C(!0), E(Ve, null, Be(g.value, (Q, Pe) => (C(), B(k, {
+              (C(!0), E(Ve, null, Be(h.value, (Q, Pe) => (C(), B(k, {
                 key: Pe,
                 link: "",
                 onClick: Q.func
@@ -339,18 +375,18 @@ const Ht = /* @__PURE__ */ R({
       height: "36px",
       marginBottom: "1px",
       userSelect: "none"
-    })), u = () => {
+    })), r = () => {
       l("collapse", !t.collapse);
-    }, r = (a) => {
+    }, u = (a) => {
       l("menu", a.clientX, a.clientY);
     };
     return (a, f) => {
-      const d = U("v-icon"), y = U("v-spacer"), g = U("v-btn"), V = le("ripple");
+      const d = U("v-icon"), g = U("v-spacer"), h = U("v-btn"), V = le("ripple");
       return ee((C(), E("div", {
         class: "d-flex align-center cursor-pointer",
         style: I(i.value),
-        onClick: u,
-        onContextmenu: X(r, ["self", "prevent"]),
+        onClick: r,
+        onContextmenu: X(u, ["self", "prevent"]),
         onMouseout: f[2] || (f[2] = (x) => o.value = !1),
         onMouseover: f[3] || (f[3] = (x) => o.value = !0)
       }, [
@@ -359,8 +395,8 @@ const Ht = /* @__PURE__ */ R({
           icon: t.collapse ? "mdi-chevron-right" : "mdi-chevron-down"
         }, null, 8, ["icon"]),
         F("span", Ft, W(t.title), 1),
-        D(y),
-        t.hasCreate ? (C(), B(g, {
+        D(g),
+        t.hasCreate ? (C(), B(h, {
           key: 0,
           class: "mx-3",
           density: "compact",
@@ -368,7 +404,7 @@ const Ht = /* @__PURE__ */ R({
           variant: "text",
           onClick: f[0] || (f[0] = X((x) => l("create"), ["stop"]))
         })) : G("", !0),
-        t.hasDelete ? (C(), B(g, {
+        t.hasDelete ? (C(), B(h, {
           key: 1,
           class: "mx-3",
           density: "compact",
@@ -394,19 +430,19 @@ const Ht = /* @__PURE__ */ R({
       paddingRight: "4px",
       marginBottom: "1px",
       userSelect: "none"
-    })), u = (r) => {
-      l("menu", r.clientX, r.clientY);
+    })), r = (u) => {
+      l("menu", u.clientX, u.clientY);
     };
-    return (r, a) => {
+    return (u, a) => {
       const f = le("ripple");
       return ee((C(), E("div", {
         class: "d-flex justify-space-between align-center cursor-pointer",
         style: I(i.value),
-        onContextmenu: X(u, ["self", "prevent"]),
+        onContextmenu: X(r, ["self", "prevent"]),
         onMouseout: a[0] || (a[0] = (d) => o.value = !1),
         onMouseover: a[1] || (a[1] = (d) => o.value = !0)
       }, [
-        ft(r.$slots, "default")
+        ft(u.$slots, "default")
       ], 36)), [
         [f]
       ]);
@@ -415,23 +451,23 @@ const Ht = /* @__PURE__ */ R({
 });
 function zt(t, s, n) {
   const { t: e } = te();
-  return { renderProp: (o, i, u) => {
-    const r = o[o.length - 1];
-    let f = typeof r == "number" ? `[${r + 1}]` : e(i.name);
-    return ae(t.value, o) && (f += " *"), h(
+  return { renderProp: (o, i, r) => {
+    const u = o[o.length - 1];
+    let f = typeof u == "number" ? `[${u + 1}]` : e(i.name);
+    return ae(t.value, o) && (f += " *"), y(
       Xt,
       {
         minHeight: s.value,
-        onMenu: (d, y) => {
-          ue.emit("propTreeMenu", { x: d, y, keys: o });
+        onMenu: (d, g) => {
+          re.emit("propTreeMenu", { x: d, y: g, keys: o });
         }
       },
       () => [
-        h("span", {
+        y("span", {
           style: { marginLeft: "4px", pointerEvents: "none" },
           innerHTML: f
         }),
-        h("div", { style: { width: n.value } }, u)
+        y("div", { style: { width: n.value } }, r)
       ]
     );
   } };
@@ -462,14 +498,14 @@ const ne = (t, s, n, e, l, o) => {
   if (o !== void 0)
     i ? e !== n[s.key] && (n[s.key] = e, l(t, n[s.key])) : e !== n[o] && (n[o] = e, l(t, n[o]));
   else {
-    let u = e;
-    (s.ui === "switch" || s.ui === "select" || s.ui === "colorPicker" || s.ui === "multiTypes" || s.ui === "compSelect") && (e || (u = void 0)), u !== n[s.key] && (n[s.key] = u, l(t, n[s.key]));
+    let r = e;
+    (s.ui === "switch" || s.ui === "select" || s.ui === "colorPicker" || s.ui === "multiTypes" || s.ui === "compSelect") && (e || (r = void 0)), r !== n[s.key] && (n[s.key] = r, l(t, n[s.key]));
   }
 };
 function Gt(t) {
   return { renderUiDummy: (n, e, l, o, i) => {
     if (e.ui !== "dummy") {
-      console.assert(!1, "renderUiDummy prop ui must be dummy");
+      console.assert(!1, "renderUiDummy property ui must be dummy");
       return;
     }
     ne(n, e, l, t, o, i);
@@ -489,18 +525,18 @@ const Yt = { class: "d-flex justify-space-between align-center" }, Wt = /* @__PU
     const { isMobile: n } = pe(), e = z(t, "modelValue"), l = s, o = async (i) => {
       if (!i || t.readonly || !n())
         return;
-      const u = await yt({
+      const r = await gt({
         title: "",
         value: e.value
       });
-      u !== void 0 && (e.value = u);
+      r !== void 0 && (e.value = r);
     };
-    return (i, u) => {
-      const r = U("v-text-field"), a = U("v-btn"), f = le("ripple");
+    return (i, r) => {
+      const u = U("v-text-field"), a = U("v-btn"), f = le("ripple");
       return C(), E("div", Yt, [
-        ee(D(r, {
+        ee(D(u, {
           modelValue: e.value,
-          "onUpdate:modelValue": u[0] || (u[0] = (d) => e.value = d),
+          "onUpdate:modelValue": r[0] || (r[0] = (d) => e.value = d),
           density: "compact",
           "hide-details": "",
           readonly: t.readonly,
@@ -520,14 +556,14 @@ const Yt = { class: "d-flex justify-space-between align-center" }, Wt = /* @__PU
           density: "compact",
           icon: "mdi-minus",
           variant: "text",
-          onClick: u[1] || (u[1] = X((d) => l("delete"), ["stop"]))
+          onClick: r[1] || (r[1] = X((d) => l("delete"), ["stop"]))
         })) : G("", !0)
       ]);
     };
   }
 });
 function Qt(t) {
-  return { renderUiStrInput: (n, e, l, o, i) => e.ui !== "strInput" ? (console.assert(!1), h("div", "renderUiStrInput prop ui must be strInput")) : h(Wt, {
+  return { renderUiStrInput: (n, e, l, o, i) => e.ui !== "strInput" ? (console.assert(!1), y("div", "renderUiStrInput property ui must be strInput")) : y(Wt, {
     modelValue: e.static ? e.value : ne(
       n,
       e,
@@ -536,12 +572,12 @@ function Qt(t) {
       o,
       i
     ),
-    "onUpdate:modelValue": (u) => {
+    "onUpdate:modelValue": (r) => {
       e.static || oe(
         n,
         e,
         l,
-        u,
+        r,
         t,
         o,
         i
@@ -573,7 +609,7 @@ const Zt = { class: "d-flex justify-space-between align-center" }, jt = /* @__PU
     const { isMobile: n } = pe(), e = z(t, "modelValue"), l = s, o = async (i) => {
       if (!i || t.readonly || !n())
         return;
-      const u = await Re({
+      const r = await Re({
         title: "",
         value: e.value,
         precision: t.precision,
@@ -581,14 +617,14 @@ const Zt = { class: "d-flex justify-space-between align-center" }, jt = /* @__PU
         max: t.max,
         step: t.step
       });
-      u !== void 0 && (e.value = u);
+      r !== void 0 && (e.value = r);
     };
-    return (i, u) => {
-      const r = U("v-number-input"), a = U("v-btn"), f = le("ripple");
+    return (i, r) => {
+      const u = U("v-number-input"), a = U("v-btn"), f = le("ripple");
       return C(), E("div", Zt, [
-        ee(D(r, {
+        ee(D(u, {
           modelValue: e.value,
-          "onUpdate:modelValue": u[0] || (u[0] = (d) => e.value = d),
+          "onUpdate:modelValue": r[0] || (r[0] = (d) => e.value = d),
           "control-variant": "stacked",
           density: "compact",
           "hide-details": "",
@@ -613,14 +649,14 @@ const Zt = { class: "d-flex justify-space-between align-center" }, jt = /* @__PU
           density: "compact",
           icon: "mdi-minus",
           variant: "text",
-          onClick: u[1] || (u[1] = X((d) => l("delete"), ["stop"]))
+          onClick: r[1] || (r[1] = X((d) => l("delete"), ["stop"]))
         })) : G("", !0)
       ]);
     };
   }
 });
 function It(t) {
-  return { renderUiNumInput: (n, e, l, o, i) => e.ui !== "numInput" ? (console.assert(!1), h("div", "renderUiNumInput prop ui must be numInput")) : h(jt, {
+  return { renderUiNumInput: (n, e, l, o, i) => e.ui !== "numInput" ? (console.assert(!1), y("div", "renderUiNumInput property ui must be numInput")) : y(jt, {
     modelValue: ne(
       n,
       e,
@@ -629,12 +665,12 @@ function It(t) {
       o,
       i
     ),
-    "onUpdate:modelValue": (u) => {
+    "onUpdate:modelValue": (r) => {
       oe(
         n,
         e,
         l,
-        u,
+        r,
         t,
         o,
         i
@@ -664,31 +700,31 @@ const en = { class: "d-flex justify-space-between align-center" }, tn = /* @__PU
   setup(t, { emit: s }) {
     const n = z(t, "modelValue"), e = s;
     return (l, o) => {
-      const i = U("v-switch"), u = U("v-btn");
+      const i = U("v-switch"), r = U("v-btn");
       return C(), E("div", en, [
         D(i, {
           modelValue: n.value,
-          "onUpdate:modelValue": o[0] || (o[0] = (r) => n.value = r),
+          "onUpdate:modelValue": o[0] || (o[0] = (u) => n.value = u),
           class: "ml-1",
           color: "primary",
           density: "compact",
           "hide-details": "",
           readonly: t.readonly
         }, null, 8, ["modelValue", "readonly"]),
-        t.hasDelete ? (C(), B(u, {
+        t.hasDelete ? (C(), B(r, {
           key: 0,
           class: "mx-2",
           density: "compact",
           icon: "mdi-minus",
           variant: "text",
-          onClick: o[1] || (o[1] = X((r) => e("delete"), ["stop"]))
+          onClick: o[1] || (o[1] = X((u) => e("delete"), ["stop"]))
         })) : G("", !0)
       ]);
     };
   }
 });
 function nn(t) {
-  return { renderUiSwitch: (n, e, l, o, i) => e.ui !== "switch" ? (console.assert(!1), h("div", "renderUiSwitch prop ui must be switch")) : h(tn, {
+  return { renderUiSwitch: (n, e, l, o, i) => e.ui !== "switch" ? (console.assert(!1), y("div", "renderUiSwitch property ui must be switch")) : y(tn, {
     modelValue: ne(
       n,
       e,
@@ -697,12 +733,12 @@ function nn(t) {
       o,
       i
     ) ?? !1,
-    "onUpdate:modelValue": (u) => {
+    "onUpdate:modelValue": (r) => {
       oe(
         n,
         e,
         l,
-        u,
+        r,
         t,
         o,
         i
@@ -728,17 +764,17 @@ const ln = { class: "d-flex justify-space-between align-center" }, on = /* @__PU
   emits: /* @__PURE__ */ Y(["delete"], ["update:modelValue"]),
   setup(t, { emit: s }) {
     const { t: n } = te(), e = z(t, "modelValue"), l = s, o = Te(), i = K(() => {
-      const u = [];
-      return Fe[o.value]?.items[t.items].forEach(({ title: r, value: a }) => {
-        u.push({ title: n(r), value: a });
-      }), u;
+      const r = [];
+      return Fe[o.value]?.items[t.items].forEach(({ title: u, value: a }) => {
+        r.push({ title: n(u), value: a });
+      }), r;
     });
-    return (u, r) => {
+    return (r, u) => {
       const a = U("v-select"), f = U("v-btn"), d = le("ripple");
       return C(), E("div", ln, [
         ee(D(a, {
           modelValue: e.value,
-          "onUpdate:modelValue": r[0] || (r[0] = (y) => e.value = y),
+          "onUpdate:modelValue": u[0] || (u[0] = (g) => e.value = g),
           density: "compact",
           "hide-details": "",
           items: i.value,
@@ -758,14 +794,14 @@ const ln = { class: "d-flex justify-space-between align-center" }, on = /* @__PU
           density: "compact",
           icon: "mdi-minus",
           variant: "text",
-          onClick: r[1] || (r[1] = X((y) => l("delete"), ["stop"]))
+          onClick: u[1] || (u[1] = X((g) => l("delete"), ["stop"]))
         })) : G("", !0)
       ]);
     };
   }
 });
 function sn(t) {
-  return { renderUiSelect: (n, e, l, o, i) => e.ui !== "select" ? (console.assert(!1), h("div", "renderUiSelect prop ui must be select")) : h(on, {
+  return { renderUiSelect: (n, e, l, o, i) => e.ui !== "select" ? (console.assert(!1), y("div", "renderUiSelect property ui must be select")) : y(on, {
     modelValue: ne(
       n,
       e,
@@ -774,12 +810,12 @@ function sn(t) {
       o,
       i
     ) ?? "",
-    "onUpdate:modelValue": (u) => {
+    "onUpdate:modelValue": (r) => {
       oe(
         n,
         e,
         l,
-        u,
+        r,
         t,
         o,
         i
@@ -793,7 +829,7 @@ function sn(t) {
     readonly: e.readonly
   }) };
 }
-const rn = { class: "text-subtitle-2 ml-1" }, un = { class: "text-caption text-grey ml-1" }, an = /* @__PURE__ */ R({
+const un = { class: "text-subtitle-2 ml-1" }, rn = { class: "text-caption text-grey ml-1" }, an = /* @__PURE__ */ R({
   __name: "group",
   props: {
     id: {},
@@ -803,27 +839,27 @@ const rn = { class: "text-subtitle-2 ml-1" }, un = { class: "text-caption text-g
   },
   emits: ["x-click"],
   setup(t, { emit: s }) {
-    const { backgroundColor2: n, highlightColor: e } = ie(), l = t, o = s, i = O(!1), u = K(() => ({
+    const { backgroundColor2: n, highlightColor: e } = ie(), l = t, o = s, i = O(!1), r = K(() => ({
       background: i.value ? e.value : n.value,
       height: "30px",
       marginBottom: "1px",
       userSelect: "none"
     }));
-    return (r, a) => {
+    return (u, a) => {
       const f = U("v-icon"), d = le("ripple");
       return ee((C(), E("div", {
         class: "d-flex align-center cursor-pointer",
-        style: I(u.value),
-        onClick: a[0] || (a[0] = (y) => o("x-click", l.id)),
-        onMouseout: a[1] || (a[1] = (y) => i.value = !1),
-        onMouseover: a[2] || (a[2] = (y) => i.value = !0)
+        style: I(r.value),
+        onClick: a[0] || (a[0] = (g) => o("x-click", l.id)),
+        onMouseout: a[1] || (a[1] = (g) => i.value = !1),
+        onMouseover: a[2] || (a[2] = (g) => i.value = !0)
       }, [
         D(f, {
           icon: l.collapse ? "mdi-chevron-right" : "mdi-chevron-down",
           size: "small"
         }, null, 8, ["icon"]),
-        F("span", rn, W(l.title), 1),
-        F("span", un, W(l.count), 1)
+        F("span", un, W(l.title), 1),
+        F("span", rn, W(l.count), 1)
       ], 36)), [
         [d]
       ]);
@@ -837,17 +873,17 @@ const rn = { class: "text-subtitle-2 ml-1" }, un = { class: "text-caption text-g
   },
   emits: ["x-click"],
   setup(t, { emit: s }) {
-    const { backgroundColor2: n, highlightColor: e } = ie(), l = t, o = s, i = O(!1), u = K(() => ({
+    const { backgroundColor2: n, highlightColor: e } = ie(), l = t, o = s, i = O(!1), r = K(() => ({
       background: i.value ? e.value : n.value,
       height: "48px",
       marginBottom: "1px",
       userSelect: "none"
     }));
-    return (r, a) => {
+    return (u, a) => {
       const f = le("ripple");
       return ee((C(), E("div", {
         class: "d-flex align-center cursor-pointer",
-        style: I(u.value),
+        style: I(r.value),
         onClick: a[0] || (a[0] = (d) => o("x-click", l.id)),
         onMouseout: a[1] || (a[1] = (d) => i.value = !1),
         onMouseover: a[2] || (a[2] = (d) => i.value = !0)
@@ -871,13 +907,13 @@ const rn = { class: "text-subtitle-2 ml-1" }, un = { class: "text-caption text-g
   },
   emits: ["update:modelValue", "update:open"],
   setup(t) {
-    const { t: s } = te(), n = z(t, "modelValue"), e = z(t, "open"), l = Ze(), o = (u) => {
-      const r = He(l, u);
-      r && kt(l, u, !r.collapse);
-    }, i = (u) => {
-      n.value = u, e.value = !1, ue.emit("refreshDepends");
+    const { t: s } = te(), n = z(t, "modelValue"), e = z(t, "open"), l = Ze(), o = (r) => {
+      const u = He(l, r);
+      u && kt(l, r, !u.collapse);
+    }, i = (r) => {
+      n.value = r, e.value = !1, re.emit("refreshDepends");
     };
-    return (u, r) => L(l).length > 0 ? (C(), E("div", fn, [
+    return (r, u) => L(l).length > 0 ? (C(), E("div", fn, [
       (C(!0), E(Ve, null, Be(L(l), (a) => (C(), E(Ve, {
         key: a.id
       }, [
@@ -898,7 +934,7 @@ const rn = { class: "text-subtitle-2 ml-1" }, un = { class: "text-caption text-g
       ], 64))), 128))
     ])) : (C(), E("div", mn, W(L(s)("x-prop-tree.noComp")), 1));
   }
-}), pn = { class: "text-subtitle-1 ml-3" }, yn = /* @__PURE__ */ R({
+}), pn = { class: "text-subtitle-1 ml-3" }, gn = /* @__PURE__ */ R({
   __name: "index",
   props: {
     modelValue: {},
@@ -906,39 +942,39 @@ const rn = { class: "text-subtitle-2 ml-1" }, un = { class: "text-caption text-g
   },
   emits: ["update:modelValue"],
   setup(t) {
-    const { t: s } = te(), n = St(), { sysBarAvail: e } = pe(), { backgroundColor1: l } = ie(), o = z(t, "modelValue"), i = Ze(), u = K(() => {
-      let y = "100%";
-      return n.mdAndUp.value && (y = "400px"), {
+    const { t: s } = te(), n = St(), { sysBarAvail: e } = pe(), { backgroundColor1: l } = ie(), o = z(t, "modelValue"), i = Ze(), r = K(() => {
+      let g = "100%";
+      return n.mdAndUp.value && (g = "400px"), {
         background: l.value,
-        width: y,
+        width: g,
         height: "100%"
       };
-    }), r = K(() => {
-      let y = 48;
-      return e.value && (y += 24), {
+    }), u = K(() => {
+      let g = 48;
+      return e.value && (g += 24), {
         position: "relative",
-        height: `calc(100% - ${y}px)`
+        height: `calc(100% - ${g}px)`
       };
     }), a = K(() => ({
       height: "60px"
     })), f = K(() => {
       if (!o.value)
         return s("x-runtime-lib.notSet");
-      const y = He(i, o.value);
-      return y ? y.name : s("x-runtime-lib.compNotAvail");
+      const g = He(i, o.value);
+      return g ? g.name : s("x-runtime-lib.compNotAvail");
     }), { open: d } = xe(`propTreeCompSelectDlg${we()}`);
     return De(() => {
       d.value = !1;
-    }), (y, g) => {
+    }), (g, h) => {
       const V = U("v-btn"), x = U("v-sheet"), P = U("v-icon"), T = U("v-dialog");
       return C(), B(T, {
         modelValue: L(d),
-        "onUpdate:modelValue": g[5] || (g[5] = (w) => ve(d) ? d.value = w : null),
+        "onUpdate:modelValue": h[5] || (h[5] = (w) => ve(d) ? d.value = w : null),
         fullscreen: "",
         "no-click-animation": "",
         persistent: "",
         transition: "scroll-x-reverse-transition",
-        onKeydown: g[6] || (g[6] = Ke(X((w) => d.value = !1, ["stop", "prevent"]), ["esc"]))
+        onKeydown: h[6] || (h[6] = Ke(X((w) => d.value = !1, ["stop", "prevent"]), ["esc"]))
       }, {
         activator: J(({ props: w }) => [
           D(V, be(w, {
@@ -954,12 +990,12 @@ const rn = { class: "text-subtitle-2 ml-1" }, un = { class: "text-caption text-g
         default: J(() => [
           F("div", {
             class: "w-100 h-100 d-flex flex-row-reverse",
-            onClick: g[3] || (g[3] = X((w) => d.value = !1, ["self"])),
-            onContextmenu: g[4] || (g[4] = X((w) => d.value = !1, ["self", "prevent"]))
+            onClick: h[3] || (h[3] = X((w) => d.value = !1, ["self"])),
+            onContextmenu: h[4] || (h[4] = X((w) => d.value = !1, ["self", "prevent"]))
           }, [
             F("div", {
               class: "elevation-2",
-              style: I(u.value)
+              style: I(r.value)
             }, [
               L(e) ? (C(), B(x, {
                 key: 0,
@@ -974,7 +1010,7 @@ const rn = { class: "text-subtitle-2 ml-1" }, un = { class: "text-caption text-g
                 default: J(() => [
                   D(P, {
                     icon: "mdi-close",
-                    onClick: g[0] || (g[0] = (w) => d.value = !1)
+                    onClick: h[0] || (h[0] = (w) => d.value = !1)
                   }),
                   F("span", pn, W(L(s)("x-prop-tree.dlg.compSelect.title")), 1)
                 ]),
@@ -982,13 +1018,13 @@ const rn = { class: "text-subtitle-2 ml-1" }, un = { class: "text-caption text-g
               }),
               F("div", {
                 class: "overflow-y-auto",
-                style: I(r.value)
+                style: I(u.value)
               }, [
                 D(vn, {
                   modelValue: o.value,
-                  "onUpdate:modelValue": g[1] || (g[1] = (w) => o.value = w),
+                  "onUpdate:modelValue": h[1] || (h[1] = (w) => o.value = w),
                   open: L(d),
-                  "onUpdate:open": g[2] || (g[2] = (w) => ve(d) ? d.value = w : null)
+                  "onUpdate:open": h[2] || (h[2] = (w) => ve(d) ? d.value = w : null)
                 }, null, 8, ["modelValue", "open"]),
                 F("div", {
                   style: I(a.value)
@@ -1002,8 +1038,8 @@ const rn = { class: "text-subtitle-2 ml-1" }, un = { class: "text-caption text-g
     };
   }
 });
-function gn(t) {
-  return { renderUiCompSelect: (n, e, l, o, i) => e.ui !== "compSelect" ? (console.assert(!1), h("div", "renderUiCompSelect prop ui must be compSelect")) : h(yn, {
+function hn(t) {
+  return { renderUiCompSelect: (n, e, l, o, i) => e.ui !== "compSelect" ? (console.assert(!1), y("div", "renderUiCompSelect property ui must be compSelect")) : y(gn, {
     modelValue: ne(
       n,
       e,
@@ -1012,12 +1048,12 @@ function gn(t) {
       o,
       i
     ),
-    "onUpdate:modelValue": (u) => {
+    "onUpdate:modelValue": (r) => {
       oe(
         n,
         e,
         l,
-        u,
+        r,
         t,
         o,
         i
@@ -1025,7 +1061,7 @@ function gn(t) {
     }
   }) };
 }
-const hn = { class: "d-flex justify-space-between align-center" }, kn = /* @__PURE__ */ R({
+const yn = { class: "d-flex justify-space-between align-center" }, kn = /* @__PURE__ */ R({
   __name: "colorPicker",
   props: /* @__PURE__ */ Y({
     hasDelete: { type: Boolean, default: !1 },
@@ -1037,28 +1073,28 @@ const hn = { class: "d-flex justify-space-between align-center" }, kn = /* @__PU
   emits: /* @__PURE__ */ Y(["delete"], ["update:modelValue"]),
   setup(t, { emit: s }) {
     const { t: n } = te(), e = z(t, "modelValue"), l = s, o = K(() => {
-      let r = "100%";
-      return t.hasDelete && (r = "calc(100% - 37px)"), {
-        width: r
+      let u = "100%";
+      return t.hasDelete && (u = "calc(100% - 37px)"), {
+        width: u
       };
-    }), i = K(() => t.readonly), { open: u } = xe(`propTreeColorPickerMenu${we()}`);
+    }), i = K(() => t.readonly), { open: r } = xe(`propTreeColorPickerMenu${we()}`);
     return De(() => {
-      u.value = !1;
-    }), (r, a) => {
-      const f = U("v-btn"), d = U("v-color-picker"), y = U("v-menu");
-      return C(), B(y, {
-        modelValue: L(u),
-        "onUpdate:modelValue": a[2] || (a[2] = (g) => ve(u) ? u.value = g : null),
+      r.value = !1;
+    }), (u, a) => {
+      const f = U("v-btn"), d = U("v-color-picker"), g = U("v-menu");
+      return C(), B(g, {
+        modelValue: L(r),
+        "onUpdate:modelValue": a[2] || (a[2] = (h) => ve(r) ? r.value = h : null),
         "close-on-content-click": !1,
         scrim: "transparent"
       }, {
-        activator: J(({ props: g }) => [
-          F("div", hn, [
+        activator: J(({ props: h }) => [
+          F("div", yn, [
             F("div", {
               class: "flex-grow-1",
               style: I(o.value)
             }, [
-              D(f, be(g, {
+              D(f, be(h, {
                 block: "",
                 color: e.value,
                 density: "comfortable",
@@ -1083,7 +1119,7 @@ const hn = { class: "d-flex justify-space-between align-center" }, kn = /* @__PU
         default: J(() => [
           D(d, {
             modelValue: e.value,
-            "onUpdate:modelValue": a[1] || (a[1] = (g) => e.value = g),
+            "onUpdate:modelValue": a[1] || (a[1] = (h) => e.value = h),
             mode: "hexa",
             "show-swatches": "",
             "swatches-max-height": "150px"
@@ -1095,7 +1131,7 @@ const hn = { class: "d-flex justify-space-between align-center" }, kn = /* @__PU
   }
 });
 function _n(t) {
-  return { renderUiColorPicker: (n, e, l, o, i) => e.ui !== "colorPicker" ? (console.assert(!1), h("div", "renderUiColorPicker prop ui must be colorPicker")) : h(kn, {
+  return { renderUiColorPicker: (n, e, l, o, i) => e.ui !== "colorPicker" ? (console.assert(!1), y("div", "renderUiColorPicker property ui must be colorPicker")) : y(kn, {
     modelValue: ne(
       n,
       e,
@@ -1104,12 +1140,12 @@ function _n(t) {
       o,
       i
     ),
-    "onUpdate:modelValue": (u) => {
+    "onUpdate:modelValue": (r) => {
       oe(
         n,
         e,
         l,
-        u,
+        r,
         t,
         o,
         i
@@ -1133,9 +1169,9 @@ const Vn = { class: "d-flex justify-space-between align-center my-2" }, Cn = { c
   }),
   emits: /* @__PURE__ */ Y(["delete"], ["update:modelValue"]),
   setup(t, { emit: s }) {
-    const { t: n } = te(), { isMobile: e } = pe(), l = z(t, "modelValue"), o = s, i = Te(), u = K(() => Fe[i.value]?.types[t.types]), r = O(0), a = K(() => {
+    const { t: n } = te(), { isMobile: e } = pe(), l = z(t, "modelValue"), o = s, i = Te(), r = K(() => Fe[i.value]?.types[t.types]), u = O(0), a = K(() => {
       const V = [];
-      return u.value?.forEach(({ title: x }, P) => {
+      return r.value?.forEach(({ title: x }, P) => {
         V.push({
           title: n(x),
           value: P
@@ -1143,35 +1179,35 @@ const Vn = { class: "d-flex justify-space-between align-center my-2" }, Cn = { c
       }), V;
     });
     Ne(() => {
-      u.value?.some((V, x) => V.validator(l.value) ? (r.value = x, !0) : !1);
+      r.value?.some((V, x) => V.validator(l.value) ? (u.value = x, !0) : !1);
     });
-    const f = K(() => u.value?.[r.value]), d = () => {
+    const f = K(() => r.value?.[u.value]), d = () => {
       l.value = f.value?.default;
-    }, y = O(0), g = async (V) => {
+    }, g = O(0), h = async (V) => {
       if (!V || !e() || f.value.ui !== "pixelInput" && f.value.ui !== "percentInput")
         return;
       const x = await Re({
         title: "",
-        value: y.value,
+        value: g.value,
         precision: f.value.precision,
         min: f.value.min,
         max: f.value.max,
         step: f.value.step
       });
-      x !== void 0 && (y.value = x);
+      x !== void 0 && (g.value = x);
     };
     return Ne(() => {
-      f.value?.ui === "pixelInput" ? y.value = Vt(l.value) : f.value?.ui === "percentInput" && (y.value = Ct(l.value));
-    }), re(y, (V) => {
+      f.value?.ui === "pixelInput" ? g.value = Vt(l.value) : f.value?.ui === "percentInput" && (g.value = Ct(l.value));
+    }), ue(g, (V) => {
       f.value?.ui === "pixelInput" ? l.value = V + "px" : f.value?.ui === "percentInput" && (l.value = V + "%");
     }), (V, x) => {
       const P = U("v-select"), T = U("v-number-input"), w = U("v-btn"), k = le("ripple");
       return C(), E("div", Vn, [
         F("div", Cn, [
           ee(D(P, {
-            modelValue: r.value,
+            modelValue: u.value,
             "onUpdate:modelValue": [
-              x[0] || (x[0] = (M) => r.value = M),
+              x[0] || (x[0] = (M) => u.value = M),
               d
             ],
             density: "compact",
@@ -1188,8 +1224,8 @@ const Vn = { class: "d-flex justify-space-between align-center my-2" }, Cn = { c
           ]),
           f.value?.ui === "pixelInput" || f.value?.ui === "percentInput" ? ee((C(), B(T, {
             key: 0,
-            modelValue: y.value,
-            "onUpdate:modelValue": x[1] || (x[1] = (M) => y.value = M),
+            modelValue: g.value,
+            "onUpdate:modelValue": x[1] || (x[1] = (M) => g.value = M),
             "control-variant": "stacked",
             density: "compact",
             "hide-details": "",
@@ -1198,7 +1234,7 @@ const Vn = { class: "d-flex justify-space-between align-center my-2" }, Cn = { c
             precision: f.value.precision,
             "single-line": "",
             step: f.value.step,
-            "onUpdate:focused": g
+            "onUpdate:focused": h
           }, null, 8, ["modelValue", "max", "min", "precision", "step"])), [
             [
               k,
@@ -1221,7 +1257,7 @@ const Vn = { class: "d-flex justify-space-between align-center my-2" }, Cn = { c
   }
 });
 function Sn(t) {
-  return { renderUiMultiTypes: (n, e, l, o, i) => e.ui !== "multiTypes" ? (console.assert(!1), h("div", "renderUiMultiTypes prop ui must be multiTypes")) : h(xn, {
+  return { renderUiMultiTypes: (n, e, l, o, i) => e.ui !== "multiTypes" ? (console.assert(!1), y("div", "renderUiMultiTypes property ui must be multiTypes")) : y(xn, {
     modelValue: ne(
       n,
       e,
@@ -1230,12 +1266,12 @@ function Sn(t) {
       o,
       i
     ) ?? "",
-    "onUpdate:modelValue": (u) => {
+    "onUpdate:modelValue": (r) => {
       oe(
         n,
         e,
         l,
-        u,
+        r,
         t,
         o,
         i
@@ -1260,24 +1296,24 @@ const Un = /* @__PURE__ */ R({
   },
   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 = gt(), i = ht(), u = Te(), r = Je("target"), a = () => {
+    const n = z(t, "modelValue"), e = z(t, "lock"), l = z(t, "scale"), o = ht(), i = yt(), r = Te(), u = Je("target"), a = () => {
       const d = JSON.parse(n.value);
-      r.value?.load(d);
+      u.value?.load(d);
     };
     return s({ save: () => {
-      const d = r.value.save();
+      const d = u.value.save();
       n.value = JSON.stringify(d, null, 2);
-    } }), (d, y) => (C(), B(L(Ut), {
+    } }), (d, g) => (C(), B(L(Ut), {
       ref_key: "target",
-      ref: r,
+      ref: u,
       lock: e.value,
-      "onUpdate:lock": y[0] || (y[0] = (g) => e.value = g),
+      "onUpdate:lock": g[0] || (g[0] = (h) => e.value = h),
       scale: l.value,
-      "onUpdate:scale": y[1] || (y[1] = (g) => l.value = g),
+      "onUpdate:scale": g[1] || (g[1] = (h) => l.value = h),
       dark: L(o),
       locale: L(i),
       type: "json",
-      version: L(u),
+      version: L(r),
       onReady: a
     }, null, 8, ["lock", "scale", "dark", "locale", "version"]));
   }
@@ -1289,21 +1325,21 @@ const Un = /* @__PURE__ */ R({
   },
   emits: ["update:modelValue"],
   setup(t) {
-    const { t: s } = te(), { sysBarAvail: n } = pe(), { backgroundColor0: e, backgroundColor1: l, backgroundColor2: o } = ie(), i = z(t, "modelValue"), u = O(!1), r = O(1), a = K(() => {
-      let g = 48;
-      return n.value && (g += 24), {
+    const { t: s } = te(), { sysBarAvail: n } = pe(), { backgroundColor0: e, backgroundColor1: l, backgroundColor2: o } = ie(), i = z(t, "modelValue"), r = O(!1), u = O(1), a = K(() => {
+      let h = 48;
+      return n.value && (h += 24), {
         position: "relative",
         background: l.value,
-        height: `calc(100% - ${g}px)`
+        height: `calc(100% - ${h}px)`
       };
     }), f = K(() => s("x-prop-tree.dlg.jsonObject.title")), { open: d } = xe(`propTreeJsonObjectDlg${we()}`);
     De(() => {
       d.value = !1;
     });
-    const y = Je("editor");
-    return re(d, (g) => {
-      g || y.value?.save();
-    }), (g, V) => {
+    const g = Je("editor");
+    return ue(d, (h) => {
+      h || g.value?.save();
+    }), (h, V) => {
       const x = U("v-btn"), P = U("v-sheet"), T = U("v-spacer"), w = U("v-dialog");
       return C(), B(w, {
         modelValue: L(d),
@@ -1360,13 +1396,13 @@ const Un = /* @__PURE__ */ R({
               }, [
                 D(Un, {
                   ref_key: "editor",
-                  ref: y,
+                  ref: g,
                   modelValue: i.value,
                   "onUpdate:modelValue": V[1] || (V[1] = (k) => i.value = k),
-                  lock: u.value,
-                  "onUpdate:lock": V[2] || (V[2] = (k) => u.value = k),
-                  scale: r.value,
-                  "onUpdate:scale": V[3] || (V[3] = (k) => r.value = k)
+                  lock: r.value,
+                  "onUpdate:lock": V[2] || (V[2] = (k) => r.value = k),
+                  scale: u.value,
+                  "onUpdate:scale": V[3] || (V[3] = (k) => u.value = k)
                 }, null, 8, ["modelValue", "lock", "scale"])
               ], 4)
             ]),
@@ -1379,7 +1415,7 @@ const Un = /* @__PURE__ */ R({
   }
 });
 function Mn(t) {
-  return { renderUiJsonEditor: (n, e, l, o, i) => e.ui !== "jsonEditor" ? h("div", "renderUiJsonObject prop ui must be jsonEditor") : h(Pn, {
+  return { renderUiJsonEditor: (n, e, l, o, i) => e.ui !== "jsonEditor" ? y("div", "renderUiJsonObject property ui must be jsonEditor") : y(Pn, {
     modelValue: ne(
       n,
       e,
@@ -1388,12 +1424,12 @@ function Mn(t) {
       o,
       i
     ) ?? "{}",
-    "onUpdate:modelValue": (u) => {
+    "onUpdate:modelValue": (r) => {
       oe(
         n,
         e,
         l,
-        u,
+        r,
         t,
         o,
         i
@@ -1411,34 +1447,39 @@ const wn = /* @__PURE__ */ R({
   },
   emits: ["change"],
   setup(t, { emit: s }) {
-    const { t: n } = te(), { backgroundColor1: e } = ie(), l = t, o = s, i = O("20px"), u = O("56px"), r = O("200px"), a = mt({}), f = O({}), d = (v, c) => {
+    const { t: n } = te(), { backgroundColor1: e } = ie(), l = t, o = s, i = O("20px"), r = O("56px"), u = O("200px"), a = mt({}), f = O({}), d = (v, c) => {
       qe(f, l.config, l.object), o("change", v, c);
     };
-    re(
+    ue(
       [() => l.config, () => l.object],
       () => {
-        qe(f, l.config, l.object, (v, c) => {
-          o("change", v, c);
-        });
+        qe(
+          f,
+          l.config,
+          l.object,
+          (v, c) => {
+            o("change", v, c);
+          }
+        );
       },
       { immediate: !0 }
     );
-    const y = O(l.version);
-    Tt(y), re(
+    const g = O(l.version);
+    Tt(g), ue(
       () => l.version,
       () => {
-        y.value = l.version;
+        g.value = l.version;
       }
     );
-    const g = O(l.config);
-    Lt(g), re(
+    const h = O(l.config);
+    Lt(h), ue(
       () => l.config,
       () => {
-        g.value = l.config;
+        h.value = l.config;
       }
     );
     const V = O(l.object);
-    Ot(V), re(
+    Ot(V), ue(
       () => l.object,
       () => {
         V.value = l.object;
@@ -1474,7 +1515,21 @@ const wn = /* @__PURE__ */ R({
     }), pt(() => {
       k();
     });
-    const { renderProp: M } = zt(f, u, r), { renderUiDummy: N } = Gt(d), { renderUiStrInput: Q } = Qt(d), { renderUiNumInput: Pe } = It(d), { renderUiSwitch: je } = nn(d), { renderUiSelect: Ie } = sn(d), { renderUiColorPicker: et } = _n(d), { renderUiJsonEditor: tt } = Mn(d), { renderUiMultiTypes: nt } = Sn(d), { renderUiCompSelect: lt } = gn(d), ye = (v, c, p, m, _, $) => (v = Ee(v), _ !== void 0 ? (v.push(_), $ && v.push(c.key)) : v.push(c.key), c.ui ? c.array && m ? it(v, c, p, m, _, $) : rt(v, c, p, _, $) : c.array ? ot(v, c, p, m, _, $) : st(
+    const { renderProp: M } = zt(f, r, u), { renderUiDummy: N } = Gt(d), { renderUiStrInput: Q } = Qt(d), { renderUiNumInput: Pe } = It(d), { renderUiSwitch: je } = nn(d), { renderUiSelect: Ie } = sn(d), { renderUiColorPicker: et } = _n(d), { renderUiJsonEditor: tt } = Mn(d), { renderUiMultiTypes: nt } = Sn(d), { renderUiCompSelect: lt } = hn(d), ge = (v, c, p, m, _, $) => (v = Ee(v), _ !== void 0 ? (v.push(_), $ && v.push(c.key)) : v.push(c.key), c.ui ? c.array && m ? it(
+      v,
+      c,
+      p,
+      m,
+      _,
+      $
+    ) : ut(v, c, p, _, $) : c.array ? ot(
+      v,
+      c,
+      p,
+      m,
+      _,
+      $
+    ) : st(
       v,
       c,
       p,
@@ -1483,16 +1538,16 @@ const wn = /* @__PURE__ */ R({
       $
     )), ot = (v, c, p, m, _, $) => {
       if (c.ui)
-        return console.assert(!1), h("div", "renderBranchArray prop ui must be invalid");
+        return console.assert(!1), y("div", "renderBranchArray property ui must be invalid");
       if (!c.array)
-        return console.assert(!1), h("div", "renderBranchArray prop array must be valid");
+        return console.assert(!1), y("div", "renderBranchArray property array must be valid");
       if (!m)
-        return console.assert(!1), h("div", "renderBranchArray branch must be valid");
+        return console.assert(!1), y("div", "renderBranchArray branch must be valid");
       let A;
       _ !== void 0 && !$ ? (p[_] instanceof Array || (p[_] = q(c), d(v, p[c.key])), A = p[_]) : (p[c.key] instanceof Array || (p[c.key] = q(c), d(v, p[c.key])), A = p[c.key]);
       let Z = n(c.name);
       m.collapse && ae(f.value, v) && (Z += " *");
-      const fe = h(_e, {
+      const fe = y(_e, {
         title: Z,
         collapse: m.collapse,
         hasCreate: !0,
@@ -1500,12 +1555,12 @@ const wn = /* @__PURE__ */ R({
           m.collapse = S;
         },
         onMenu: (S, b) => {
-          ue.emit("propTreeMenu", { x: S, y: b, keys: v });
+          re.emit("propTreeMenu", { x: S, y: b, keys: v });
         },
         onCreate: () => {
           A.push({}), d(v, A);
         }
-      }), H = h(
+      }), H = y(
         "div",
         {
           style: {
@@ -1523,10 +1578,10 @@ const wn = /* @__PURE__ */ R({
               collapse: !0,
               children: {}
             });
-            const ge = [...v, b], he = m.children[b];
+            const he = [...v, b], ye = m.children[b];
             let Le = `[${b + 1}]`;
-            m.children[b].collapse && ae(f.value, ge) && (Le += " *");
-            const at = h(_e, {
+            m.children[b].collapse && ae(f.value, he) && (Le += " *");
+            const at = y(_e, {
               title: Le,
               collapse: m.children[b].collapse,
               hasDelete: !0,
@@ -1539,7 +1594,7 @@ const wn = /* @__PURE__ */ R({
                 m.children[b].collapse = j;
               },
               onMenu: (j, se) => {
-                ue.emit("propTreeMenu", { x: j, y: se, keys: ge });
+                re.emit("propTreeMenu", { x: j, y: se, keys: he });
               },
               onDelete: (j) => {
                 if (!Me(m.children)) {
@@ -1550,7 +1605,7 @@ const wn = /* @__PURE__ */ R({
               }
             });
             S.push(at);
-            const ct = h(
+            const ct = y(
               "div",
               {
                 style: {
@@ -1560,19 +1615,19 @@ const wn = /* @__PURE__ */ R({
               (() => {
                 const j = [];
                 return c.children.forEach((se) => {
-                  if (!Oe(he.children)) {
+                  if (!Oe(ye.children)) {
                     console.assert(!1);
                     return;
                   }
-                  he.children[se.key] || (he.children[se.key] = {
+                  ye.children[se.key] || (ye.children[se.key] = {
                     collapse: !0,
                     children: se.array ? [] : {}
                   });
-                  const dt = ye(
+                  const dt = ge(
                     v,
                     se,
                     A[b],
-                    he.children[se.key],
+                    ye.children[se.key],
                     b,
                     !0
                   );
@@ -1585,7 +1640,7 @@ const wn = /* @__PURE__ */ R({
           return S;
         })()
       );
-      return h(
+      return y(
         "div",
         {
           style: {
@@ -1599,14 +1654,14 @@ const wn = /* @__PURE__ */ R({
       );
     }, st = (v, c, p, m, _, $) => {
       if (c.ui)
-        return console.assert(!1), h("div", "renderBranchScalar prop ui must be invalid");
+        return console.assert(!1), y("div", "renderBranchScalar property ui must be invalid");
       if (c.array)
-        return console.assert(!1), h("div", "renderBranchScalar prop array must be invalid");
+        return console.assert(!1), y("div", "renderBranchScalar property array must be invalid");
       if (!m)
-        return console.assert(!1), h("div", "renderBranchScalar branch must be valid");
+        return console.assert(!1), y("div", "renderBranchScalar branch must be valid");
       let A = n(c.name);
       m.collapse && ae(f.value, v) && (A += " *");
-      const Z = h(_e, {
+      const Z = y(_e, {
         title: A,
         collapse: m.collapse,
         hasDelete: _ !== void 0 && !$,
@@ -1614,12 +1669,12 @@ const wn = /* @__PURE__ */ R({
           m.collapse = H;
         },
         onMenu: (H, S) => {
-          ue.emit("propTreeMenu", { x: H, y: S, keys: v });
+          re.emit("propTreeMenu", { x: H, y: S, keys: v });
         },
         onDelete: () => {
           _ === void 0 || $ || (p.splice(_, 1), d(v.slice(0, -1), p));
         }
-      }), fe = h(
+      }), fe = y(
         "div",
         {
           style: {
@@ -1637,7 +1692,7 @@ const wn = /* @__PURE__ */ R({
               collapse: !0,
               children: !S.ui && S.array ? [] : {}
             });
-            const b = ye(
+            const b = ge(
               v,
               S,
               (typeof p[c.key] != "object" && (p[c.key] = {}, d(v, p[c.key])), p[c.key]),
@@ -1647,7 +1702,7 @@ const wn = /* @__PURE__ */ R({
           }), H;
         })()
       );
-      return h(
+      return y(
         "div",
         {
           style: {
@@ -1661,16 +1716,16 @@ const wn = /* @__PURE__ */ R({
       );
     }, it = (v, c, p, m, _, $) => {
       if (!c.ui)
-        return console.assert(!1), h("div", "renderLeafArray prop ui must be valid");
+        return console.assert(!1), y("div", "renderLeafArray property ui must be valid");
       if (!c.array)
-        return console.assert(!1), h("div", "renderLeafArray prop array must be valid");
+        return console.assert(!1), y("div", "renderLeafArray property array must be valid");
       if (!m)
-        return console.assert(!1), h("div", "renderLeafArray branch must be valid");
+        return console.assert(!1), y("div", "renderLeafArray branch must be valid");
       let A;
       _ !== void 0 && !$ ? (p[_] instanceof Array || (p[_] = q(c), d(v, p[_])), A = p[_]) : (p[c.key] instanceof Array || (p[c.key] = q(c), d(v, p[c.key])), A = p[c.key]);
       let Z = n(c.name);
       m.collapse && ae(f.value, v) && (Z += " *");
-      const fe = h(_e, {
+      const fe = y(_e, {
         title: Z,
         collapse: m.collapse,
         hasCreate: !0,
@@ -1678,12 +1733,12 @@ const wn = /* @__PURE__ */ R({
           m.collapse = S;
         },
         onMenu: (S, b) => {
-          ue.emit("propTreeMenu", { x: S, y: b, keys: v });
+          re.emit("propTreeMenu", { x: S, y: b, keys: v });
         },
         onCreate: () => {
           A.push(q(c, !0)), d(v, A);
         }
-      }), H = h(
+      }), H = y(
         "div",
         {
           style: {
@@ -1693,13 +1748,13 @@ const wn = /* @__PURE__ */ R({
         (() => {
           const S = [];
           for (let b = 0; b < A.length; b++) {
-            const ge = ye(v, c, A, void 0, b, !1);
-            S.push(ge);
+            const he = ge(v, c, A, void 0, b, !1);
+            S.push(he);
           }
           return S;
         })()
       );
-      return h(
+      return y(
         "div",
         {
           style: {
@@ -1711,12 +1766,12 @@ const wn = /* @__PURE__ */ R({
           return S.push(fe), m.collapse || S.push(H), S;
         })()
       );
-    }, rt = (v, c, p, m, _) => {
+    }, ut = (v, c, p, m, _) => {
       if (!c.ui)
-        return console.assert(!1), h("div", "renderLeafScalar prop ui must be valid");
+        return console.assert(!1), y("div", "renderLeafScalar property ui must be valid");
       let $;
-      return c.ui === "dummy" ? $ = N(v, c, p, m, _) : c.ui === "strInput" ? $ = Q(v, c, p, m, _) : c.ui === "numInput" ? $ = Pe(v, c, p, m, _) : c.ui === "switch" ? $ = je(v, c, p, m, _) : c.ui === "select" ? $ = Ie(v, c, p, m, _) : c.ui === "colorPicker" ? $ = et(v, c, p, m, _) : c.ui === "jsonEditor" ? $ = tt(v, c, p, m, _) : c.ui === "multiTypes" ? $ = nt(v, c, p, m, _) : c.ui === "compSelect" ? $ = lt(v, c, p, m, _) : console.assert(!1, "renderLeafScalar not implemented"), $ ? M(v, c, $) : h("div");
-    }, ut = () => h(
+      return c.ui === "dummy" ? $ = N(v, c, p, m, _) : c.ui === "strInput" ? $ = Q(v, c, p, m, _) : c.ui === "numInput" ? $ = Pe(v, c, p, m, _) : c.ui === "switch" ? $ = je(v, c, p, m, _) : c.ui === "select" ? $ = Ie(v, c, p, m, _) : c.ui === "colorPicker" ? $ = et(v, c, p, m, _) : c.ui === "jsonEditor" ? $ = tt(v, c, p, m, _) : c.ui === "multiTypes" ? $ = nt(v, c, p, m, _) : c.ui === "compSelect" ? $ = lt(v, c, p, m, _) : console.assert(!1, "renderLeafScalar not implemented"), $ ? M(v, c, $) : y("div");
+    }, rt = () => y(
       "div",
       {
         class: "text-body-2",
@@ -1734,7 +1789,12 @@ const wn = /* @__PURE__ */ R({
               collapse: !0,
               children: !p.ui && p.array ? [] : {}
             });
-            const m = ye([], p, l.object, c[p.key]);
+            const m = ge(
+              [],
+              p,
+              l.object,
+              c[p.key]
+            );
             v.push(m);
           });
         }
@@ -1742,7 +1802,7 @@ const wn = /* @__PURE__ */ R({
       })()
     );
     return (v, c) => (C(), E(Ve, null, [
-      D(ut),
+      D(rt),
       D(Ht, {
         config: l.config,
         object: l.object,