@blocklet/pages-kit-inner-components 0.1.0 → 0.1.2

package/lib/es/setting.js

@@ -1,147 +1,148 @@
-import { jsx as e, jsxs as k, Fragment as N } from "react/jsx-runtime";
-import { g as ee, i as Re, b as Oe, h as re, E as Qe, n as Xe, j as ce } from "../state-BfVA6vd8.mjs";
-import { TextField as D, Stack as S, FormControlLabel as ze, Switch as je, Box as w, InputAdornment as de, Dialog as ae, DialogTitle as Ae, DialogContent as Te, DialogActions as Be, Button as j, alpha as Ze, Tooltip as ne, buttonClasses as Le, Typography as E, Autocomplete as Ne, MenuItem as R, FormLabel as et, Popper as We, Paper as Ee, Table as tt, TableHead as rt, TableRow as Se, TableCell as Ce, TableBody as it } from "@mui/material";
-import { forwardRef as Ve, useState as ue, useEffect as Q, useImperativeHandle as _e, lazy as lt, useCallback as te, Suspense as nt, useRef as X, useId as ot } from "react";
-import st from "@arcblock/ux/lib/Empty";
-import { useLocaleContext as z } from "@arcblock/ux/lib/Locale/context";
-import { styled as ct } from "@arcblock/ux/lib/Theme";
-import { cx as dt } from "@emotion/css";
-import { useReactive as at, useBoolean as ut, useUpdate as pt } from "ahooks";
-import Pe from "gradient-parser";
+import { jsx as e, jsxs as w, Fragment as U } from "react/jsx-runtime";
+import { g as re, i as Te, b as Ke, h as le, E as tt, n as rt, j as ae } from "../state-C0vjPuun.mjs";
+import { TextField as O, Stack as D, FormControlLabel as Ne, Switch as Be, Box as P, InputAdornment as oe, Dialog as pe, DialogTitle as Ue, DialogContent as We, DialogActions as Ve, Button as A, alpha as it, Tooltip as Q, buttonClasses as nt, Typography as V, Autocomplete as Fe, Paper as me, MenuItem as R, FormLabel as lt, Popper as _e, Table as ot, TableHead as st, TableRow as Oe, TableCell as ze, TableBody as ct } from "@mui/material";
+import { forwardRef as Ee, useState as ie, useEffect as X, useImperativeHandle as He, lazy as dt, useCallback as ne, Suspense as ut, useRef as Z, useId as at, useMemo as pt } from "react";
+import he from "@arcblock/ux/lib/Empty";
+import { useLocaleContext as j } from "@arcblock/ux/lib/Locale/context";
+import { styled as mt } from "@arcblock/ux/lib/Theme";
+import { cx as ht } from "@emotion/css";
+import { useReactive as ft, useBoolean as bt, useUpdate as yt } from "ahooks";
+import Re from "gradient-parser";
 import "lodash/without";
-import mt from "tinycolor2";
-import { red as ht, pink as ft, purple as bt, indigo as vt, blue as yt, cyan as gt, teal as xt, green as It, lime as kt, yellow as wt, amber as St, orange as Ct, brown as Pt, grey as Dt, blueGrey as Rt } from "@mui/material/colors";
-import { getImageSize as oe, getVideoSize as se, UploaderButton as pe, UploaderProvider as Ke } from "./uploader.js";
-import { Icon as Ot } from "@iconify-icon/react";
-import { useDebounce as zt, useUpdate as jt } from "react-use";
-import { sortBy as V, omit as At, isNil as Z, isEmpty as Tt } from "lodash";
-import Bt from "@arcblock/ux/lib/Toast";
-import { CodeEditor as Fe } from "@blocklet/code-editor";
-import { CustomComponentRenderer as He, transpileAndLoadScript as Nt, getPropertiesFromCode as Wt } from "@blocklet/pages-kit/components";
-import { ClickAwayListener as Ue, unstable_useNumberInput as Et } from "@mui/base";
-import { DeleteOutlineRounded as Vt, DragIndicatorRounded as _t, AddRounded as Kt, TranslateRounded as Je, InfoRounded as Ft, SettingsRounded as Ye, StarRounded as Ht } from "@mui/icons-material";
+import vt from "tinycolor2";
+import { red as xt, pink as gt, purple as kt, indigo as It, blue as wt, cyan as St, teal as Pt, green as Ct, lime as Dt, yellow as Ot, amber as zt, orange as Rt, brown as jt, grey as At, blueGrey as Tt } from "@mui/material/colors";
+import { getImageSize as de, getVideoSize as ue, UploaderButton as fe, UploaderProvider as be, useUploader as Kt } from "./uploader.js";
+import { Icon as Nt } from "@iconify-icon/react";
+import { useDebounce as Bt, useUpdate as Ut } from "react-use";
+import { sortBy as F, omit as Wt, isNil as L, isEmpty as Vt } from "lodash";
+import je from "@arcblock/ux/lib/Toast";
+import { CodeEditor as Je } from "@blocklet/code-editor";
+import { CustomComponentRenderer as Me, transpileAndLoadScript as Ft, getPropertiesFromCode as _t } from "@blocklet/pages-kit/components";
+import { ClickAwayListener as $e, unstable_useNumberInput as Et } from "@mui/base";
+import { VisibilityOffRounded as Ht, VisibilityRounded as Jt, DeleteOutlineRounded as Mt, DragIndicatorRounded as $t, AddRounded as Yt, TranslateRounded as Ye, InfoRounded as Ge, SettingsRounded as qe, StarRounded as Gt } from "@mui/icons-material";
 import { getYjsValue as _ } from "@syncedstore/core";
-import Ut from "lodash/has";
-import Jt from "lodash/keyBy";
-import { usePopupState as ie, bindTrigger as le, bindDialog as $e, bindPopper as Ge } from "material-ui-popup-state/hooks";
-import { ErrorBoundary as Yt } from "react-error-boundary";
-import $t from "lodash/sortBy";
-import { useDrop as qe, useDrag as Gt } from "react-dnd";
-ht[300], ft[300], bt[300], // deepPurple['300'],
-vt[300], yt[300], // lightBlue['300'],
-gt[300], xt[300], It[300], // lightGreen['300'],
-kt[300], wt[300], St[300], Ct[300], // deepOrange['300'],
-Pt[300], Dt[300], Rt[300];
-const qt = Ve(function({ showMarkdown: i, markdown: n, onMarkdownChange: r, showUploader: a, value: b, meta: p, onChange: u, ...v }, c) {
-  const [h, m] = ue("");
-  Q(() => {
-    m(b || "");
-  }, [b, m]);
-  const f = async () => {
-    if (h !== b) {
-      const l = ee(h);
-      if (!l) {
-        u(h, void 0);
+import qt from "lodash/has";
+import Qt from "lodash/keyBy";
+import Xt from "lodash/pick";
+import { usePopupState as se, bindTrigger as ce, bindDialog as Qe, bindPopper as Xe } from "material-ui-popup-state/hooks";
+import { ErrorBoundary as Zt } from "react-error-boundary";
+import Lt from "lodash/sortBy";
+import { useDrop as Ze, useDrag as er } from "react-dnd";
+xt[300], gt[300], kt[300], // deepPurple['300'],
+It[300], wt[300], // lightBlue['300'],
+St[300], Pt[300], Ct[300], // lightGreen['300'],
+Dt[300], Ot[300], zt[300], Rt[300], // deepOrange['300'],
+jt[300], At[300], Tt[300];
+const tr = Ee(function({ showMarkdown: r, markdown: i, onMarkdownChange: n, showUploader: u, value: v, meta: c, onChange: a, ...k }, l) {
+  const [y, f] = ie("");
+  X(() => {
+    f(v || "");
+  }, [v, f]);
+  const p = async () => {
+    if (y !== v) {
+      const o = re(y);
+      if (!o) {
+        a(y, void 0);
         return;
       }
-      const o = await oe(l).catch(() => se(l)).catch(() => {
+      const s = await de(o).catch(() => ue(o)).catch(() => {
       });
-      u(h, { ...o, filename: h });
+      a(y, { ...s, filename: y });
     }
   };
-  zt(
+  Bt(
     () => {
-      h !== b && u(h);
+      y !== v && a(y);
     },
     300,
-    [h]
-  ), _e(c, () => ({
-    submit: f
+    [y]
+  ), He(l, () => ({
+    submit: p
   }));
-  const s = {};
-  return a && (s.InputProps = {
+  const x = {};
+  return u && (x.InputProps = {
     sx: { pr: 0 },
-    endAdornment: /* @__PURE__ */ e(de, { position: "end", sx: { mx: 0.5 }, children: /* @__PURE__ */ e(
-      pe,
+    endAdornment: /* @__PURE__ */ e(oe, { position: "end", sx: { mx: 0.5 }, children: /* @__PURE__ */ e(
+      fe,
       {
-        onChange: async ({ response: l }) => {
-          var y;
-          const o = (y = l == null ? void 0 : l.data) == null ? void 0 : y.filename, d = ee(o) || "";
-          let x = {};
-          d && (x = await oe(d).catch(() => se(d)).catch(() => {
-          })), u(o, {
-            ...x,
-            filename: o
+        onChange: async ({ response: o }) => {
+          var b;
+          const s = (b = o == null ? void 0 : o.data) == null ? void 0 : b.filename, g = re(s) || "";
+          let I = {};
+          g && (I = await de(g).catch(() => ue(g)).catch(() => {
+          })), a(s, {
+            ...I,
+            filename: s
           });
         }
       }
     ) })
   }), /* @__PURE__ */ e(
-    D,
+    O,
     {
       size: "small",
       fullWidth: !0,
-      ...v,
-      label: /* @__PURE__ */ k(S, { direction: "row", spacing: 1, alignItems: "center", children: [
-        v.label,
-        i && /* @__PURE__ */ k(N, { children: [
+      ...k,
+      label: /* @__PURE__ */ w(D, { direction: "row", spacing: 1, alignItems: "center", children: [
+        k.label,
+        r && /* @__PURE__ */ w(U, { children: [
           " (",
           /* @__PURE__ */ e(
-            ze,
+            Ne,
             {
-              checked: n,
-              label: /* @__PURE__ */ e(w, { component: Ot, icon: "tabler:markdown", sx: { verticalAlign: "middle" } }),
+              checked: i,
+              label: /* @__PURE__ */ e(P, { component: Nt, icon: "tabler:markdown", sx: { verticalAlign: "middle" } }),
               labelPlacement: "start",
-              control: /* @__PURE__ */ e(je, { size: "small" }),
+              control: /* @__PURE__ */ e(Be, { size: "small" }),
               sx: { ml: 0.25, pr: 1 },
-              onChange: (l, o) => r == null ? void 0 : r(o)
+              onChange: (o, s) => n == null ? void 0 : n(s)
             }
           ),
           ")"
         ] })
       ] }),
-      InputLabelProps: { shrink: !0, ...v.InputLabelProps },
-      value: h,
-      onChange: (l) => m(l.target.value),
-      ...s,
-      onKeyDown: (l) => {
-        l.keyCode !== 229 && l.key === "Enter" && f();
+      InputLabelProps: { shrink: !0, ...k.InputLabelProps },
+      value: y,
+      onChange: (o) => f(o.target.value),
+      ...x,
+      onKeyDown: (o) => {
+        o.keyCode !== 229 && o.key === "Enter" && p();
       }
     }
   );
-}), Mt = lt(() => import("react-best-gradient-color-picker"));
-function Qt(t) {
+}), rr = dt(() => import("react-best-gradient-color-picker"));
+function ir(t) {
   try {
-    const n = Pe.parse(t).map((a) => {
-      const b = a.colorStops.map((p) => {
-        if (p.type !== "rgba") {
-          const u = mt(p.value).toRgb();
+    const i = Re.parse(t).map((u) => {
+      const v = u.colorStops.map((c) => {
+        if (c.type !== "rgba") {
+          const a = vt(c.value).toRgb();
           return {
-            ...p,
-            value: [u.r, u.g, u.b, u.a],
+            ...c,
+            value: [a.r, a.g, a.b, a.a],
             type: "rgba"
           };
         }
-        return p;
+        return c;
       });
       return {
-        ...a,
-        colorStops: b
+        ...u,
+        colorStops: v
       };
     });
-    return Pe.stringify(n);
+    return Re.stringify(i);
   } catch {
-    return Oe(t) ? t : "";
+    return Ke(t) ? t : "";
   }
 }
-function Xt({ color: t, sx: i = {}, ...n }) {
-  Oe(t);
-  const r = {};
-  return Re(t) ? r.backgroundImage = t : r.backgroundColor = t, /* @__PURE__ */ e(
-    w,
+function nr({ color: t, sx: r = {}, ...i }) {
+  Ke(t);
+  const n = {};
+  return Te(t) ? n.backgroundImage = t : n.backgroundColor = t, /* @__PURE__ */ e(
+    P,
     {
       sx: {
-        ...i,
+        ...r,
         width: "100%",
         paddingBottom: "100%",
         cursor: "pointer",
@@ -151,41 +152,41 @@ function Xt({ color: t, sx: i = {}, ...n }) {
         "&:hover": {
           opacity: 0.75
         },
-        ...r
+        ...n
       },
-      ...n
+      ...i
     }
   );
 }
-const Zt = Ve(function({ onSave: i }, n) {
-  const r = at({
+const lr = Ee(function({ onSave: r }, i) {
+  const n = ft({
     value: ""
-  }), { t: a } = z(), b = {};
-  r.value ? Re(r.value) ? b.backgroundImage = r.value : b.backgroundColor = r.value : b.border = "1px solid #ccc";
-  const [p, { setFalse: u, setTrue: v }] = ut(!1), c = te(() => {
-    u();
-  }, [u]), h = () => {
-    i({ value: r.value }, c);
+  }), { t: u } = j(), v = {};
+  n.value ? Te(n.value) ? v.backgroundImage = n.value : v.backgroundColor = n.value : v.border = "1px solid #ccc";
+  const [c, { setFalse: a, setTrue: k }] = bt(!1), l = ne(() => {
+    a();
+  }, [a]), y = () => {
+    r({ value: n.value }, l);
   };
-  return _e(n, () => ({
-    open({ value: m } = { value: "" }) {
-      r.value = m, v();
+  return He(i, () => ({
+    open({ value: f } = { value: "" }) {
+      n.value = f, k();
     },
     close() {
-      c();
+      l();
     }
-  })), /* @__PURE__ */ k(ae, { open: p, onClose: c, hideBackdrop: !0, children: [
-    /* @__PURE__ */ e(Ae, { children: a("maker.configBackground") }),
-    /* @__PURE__ */ e(Te, { sx: { width: 600 }, children: /* @__PURE__ */ k(w, { width: "100%", display: "flex", children: [
-      /* @__PURE__ */ e(w, { flex: 1, mr: 1, sx: b, children: !r.value && /* @__PURE__ */ e(st, { children: a("error.notConfig") }) }),
-      /* @__PURE__ */ e(nt, { children: /* @__PURE__ */ e(
-        Mt,
+  })), /* @__PURE__ */ w(pe, { open: c, onClose: l, hideBackdrop: !0, children: [
+    /* @__PURE__ */ e(Ue, { children: u("maker.configBackground") }),
+    /* @__PURE__ */ e(We, { sx: { width: 600 }, children: /* @__PURE__ */ w(P, { width: "100%", display: "flex", children: [
+      /* @__PURE__ */ e(P, { flex: 1, mr: 1, sx: v, children: !n.value && /* @__PURE__ */ e(he, { children: u("error.notConfig") }) }),
+      /* @__PURE__ */ e(ut, { children: /* @__PURE__ */ e(
+        rr,
         {
           width: 200,
           height: 200,
-          value: Qt(r.value),
-          onChange: (m) => {
-            r.value = m;
+          value: ir(n.value),
+          onChange: (f) => {
+            n.value = f;
           },
           hidePresets: !0,
           hideAdvancedSliders: !0,
@@ -194,13 +195,13 @@ const Zt = Ve(function({ onSave: i }, n) {
         }
       ) })
     ] }) }),
-    /* @__PURE__ */ k(Be, { children: [
-      /* @__PURE__ */ e(j, { variant: "outlined", size: "small", onClick: c, children: a("common.cancel") }),
-      /* @__PURE__ */ e(j, { variant: "contained", size: "small", onClick: h, children: a("maker.save") })
+    /* @__PURE__ */ w(Ve, { children: [
+      /* @__PURE__ */ e(A, { variant: "outlined", size: "small", onClick: l, children: u("common.cancel") }),
+      /* @__PURE__ */ e(A, { variant: "contained", size: "small", onClick: y, children: u("maker.save") })
     ] })
   ] });
 });
-ct(w)`
+mt(P)`
   .color-item {
     position: relative;
   }
@@ -221,28 +222,28 @@ ct(w)`
     right: 0;
   }
 `;
-function Lt({
+function or({
   value: t,
-  onChange: i,
-  ...n
+  onChange: r,
+  ...i
 }) {
-  const r = X(null);
-  return /* @__PURE__ */ k(N, { children: [
+  const n = Z(null);
+  return /* @__PURE__ */ w(U, { children: [
     /* @__PURE__ */ e(
-      qt,
+      tr,
       {
-        ...n,
+        ...i,
         value: t,
-        onChange: i,
+        onChange: r,
         InputProps: {
-          endAdornment: /* @__PURE__ */ e(de, { position: "end", children: /* @__PURE__ */ e(
-            Xt,
+          endAdornment: /* @__PURE__ */ e(oe, { position: "end", children: /* @__PURE__ */ e(
+            nr,
             {
               color: t ?? "",
               style: { width: "1.5rem", height: "1.5rem", padding: 0 },
               onClick: () => {
-                var a;
-                (a = r.current) == null || a.open({ value: t ?? "" });
+                var u;
+                (u = n.current) == null || u.open({ value: t ?? "" });
               }
             }
           ) })
@@ -250,258 +251,285 @@ function Lt({
       }
     ),
     /* @__PURE__ */ e(
-      Zt,
+      lr,
       {
-        ref: r,
-        onSave: ({ value: a }, b) => {
-          i(a), b();
+        ref: n,
+        onSave: ({ value: u }, v) => {
+          r(u), v();
         }
       }
     )
   ] });
 }
-const De = ["string", "multiline", "json", "yaml", "component", "custom", "url"];
-function er({
+const Ae = ["string", "multiline", "json", "yaml", "component", "custom", "url"];
+function sr({
   disabled: t,
-  list: i,
-  renderItem: n,
-  ...r
+  list: r,
+  renderItem: i,
+  ...n
 }) {
-  const a = X(null), b = ot(), p = pt(), u = $t(Object.entries(i), (s) => s[1].index).map((s) => s[0]), v = X(u), c = te(
-    (s) => {
-      v.current = s, p();
-    },
-    [p]
-  ), h = te(
-    ({ index: s }, { index: l }) => {
-      const o = [...v.current];
-      o.splice(l, 0, ...o.splice(s, 1)), c(o);
+  const u = Z(null), v = at(), c = yt(), a = Lt(Object.entries(r), (x) => x[1].index).map((x) => x[0]), k = Z(a), l = ne(
+    (x) => {
+      k.current = x, c();
     },
     [c]
+  ), y = ne(
+    ({ index: x }, { index: o }) => {
+      const s = [...k.current];
+      s.splice(o, 0, ...s.splice(x, 1)), l(s);
+    },
+    [l]
   );
-  Q(() => {
-    c(u);
-  }, [u.join("-")]);
-  const [{ isOver: m }, f] = qe({
-    accept: b,
-    collect: (s) => ({
-      isOver: s.isOver()
+  X(() => {
+    l(a);
+  }, [a.join("-")]);
+  const [{ isOver: f }, p] = Ze({
+    accept: v,
+    collect: (x) => ({
+      isOver: x.isOver()
     }),
     canDrop: () => !t,
     drop: () => {
-      var o;
-      const s = () => {
-        v.current.forEach((d, x) => {
-          const y = i[d];
-          y && (y.index = x);
+      var s;
+      const x = () => {
+        k.current.forEach((g, I) => {
+          const b = r[g];
+          b && (b.index = I);
         });
-      }, l = (o = _(i)) == null ? void 0 : o.doc;
-      l ? l.transact(() => {
-        s();
-      }) : s();
+      }, o = (s = _(r)) == null ? void 0 : s.doc;
+      o ? o.transact(() => {
+        x();
+      }) : x();
     }
   });
-  return Q(() => {
-    m || c(u);
-  }, [m]), f(a), /* @__PURE__ */ e(w, { ...r, ref: a, className: dt(m && "isDragging"), children: v.current.map((s, l) => /* @__PURE__ */ e(
-    tr,
+  return X(() => {
+    f || l(a);
+  }, [f]), p(u), /* @__PURE__ */ e(P, { ...n, ref: u, className: ht(f && "isDragging"), children: k.current.map((x, o) => /* @__PURE__ */ e(
+    cr,
     {
-      type: b,
+      type: v,
       disabled: t,
-      id: s,
-      index: l,
-      itemIndex: (o) => v.current.indexOf(o),
-      move: h,
-      children: (o) => {
-        const d = i[s];
-        return d ? n(d.data, l, o) : null;
+      id: x,
+      index: o,
+      itemIndex: (s) => k.current.indexOf(s),
+      move: y,
+      children: (s) => {
+        const g = r[x];
+        return g ? i(g.data, o, s) : null;
       }
     },
-    s
+    x
   )) });
 }
-function tr({
+function cr({
   disabled: t,
-  id: i,
-  index: n,
-  type: r,
-  children: a,
-  itemIndex: b,
-  move: p
+  id: r,
+  index: i,
+  type: n,
+  children: u,
+  itemIndex: v,
+  move: c
 }) {
-  const u = X(), [{ isDragging: v }, c, h] = Gt({
-    type: r,
-    item: () => ({ id: i }),
+  const a = Z(), [{ isDragging: k }, l, y] = er({
+    type: n,
+    item: () => ({ id: r }),
     canDrag: () => !t,
-    collect: (f) => ({ isDragging: f.isDragging() })
-  }), [, m] = qe({
-    accept: r,
+    collect: (p) => ({ isDragging: p.isDragging() })
+  }), [, f] = Ze({
+    accept: n,
     canDrop: () => !t,
-    hover(f, s) {
-      var g;
-      if (!u.current)
+    hover(p, x) {
+      var h;
+      if (!a.current)
         return;
-      const l = b(f.id), o = n;
-      if (l === o)
+      const o = v(p.id), s = i;
+      if (o === s)
         return;
-      const d = (g = u.current) == null ? void 0 : g.getBoundingClientRect(), x = (d.bottom - d.top) / 2, I = s.getClientOffset().y - d.top;
-      l < o && I < x || l > o && I > x || p({ id: f.id, index: l }, { id: i, index: n });
+      const g = (h = a.current) == null ? void 0 : h.getBoundingClientRect(), I = (g.bottom - g.top) / 2, d = x.getClientOffset().y - g.top;
+      o < s && d < I || o > s && d > I || c({ id: p.id, index: o }, { id: r, index: i });
     }
   });
-  return typeof a == "function" ? a({
-    isDragging: v,
-    drag: c,
-    drop: (f) => (u.current = f, m(f)),
-    preview: h
-  }) : (c(m(h(u))), /* @__PURE__ */ e(w, { ref: u, children: a }));
+  return typeof u == "function" ? u({
+    isDragging: k,
+    drag: l,
+    drop: (p) => (a.current = p, f(p)),
+    preview: y
+  }) : (l(f(y(a))), /* @__PURE__ */ e(P, { ref: a, children: u }));
 }
-function rr({
+function dr({
   drop: t,
-  preview: i,
-  drag: n,
-  disabled: r,
-  isDragging: a,
-  children: b,
-  onDelete: p,
-  actions: u
+  preview: r,
+  drag: i,
+  disabled: n,
+  isDragging: u,
+  children: v,
+  onDelete: c,
+  onVisibilityChange: a,
+  visible: k = !0,
+  actions: l,
+  alwaysShowActions: y = !1
 }) {
-  const { t: v } = z();
-  return /* @__PURE__ */ e(w, { ref: t, sx: { ":hover .hover-visible": { maxHeight: "100%" } }, children: /* @__PURE__ */ k(w, { sx: { position: "relative" }, children: [
-    /* @__PURE__ */ e(
-      w,
-      {
-        ref: i,
-        sx: {
-          flex: 1,
-          borderRadius: 1,
-          bgcolor: a ? "action.hover" : "background.paper",
-          opacity: 0.9999
-          // NOTE: make preview effective
-        },
-        children: b
-      }
-    ),
-    !r && /* @__PURE__ */ e(
-      w,
-      {
-        className: "hover-visible",
-        sx: { maxHeight: 0, overflow: "hidden", position: "absolute", right: 2, top: 2 },
-        children: /* @__PURE__ */ k(
-          S,
+  const { t: f } = j();
+  return /* @__PURE__ */ e(
+    P,
+    {
+      ref: t,
+      sx: {
+        ":hover .hover-visible": { maxWidth: "100%" },
+        opacity: k ? 1 : 0.5
+      },
+      children: /* @__PURE__ */ w(P, { sx: { position: "relative" }, children: [
+        /* @__PURE__ */ e(
+          P,
           {
-            direction: "row",
+            ref: r,
             sx: {
-              bgcolor: (c) => Ze(c.palette.grey[300], 0.9),
-              borderRadius: 1,
-              p: 0.5,
-              [`.${Le.root}`]: {
-                minWidth: 24,
-                width: 24,
-                height: 24,
-                p: 0
-              }
+              flex: 1,
+              borderRadius: 0.5,
+              bgcolor: u ? "action.hover" : "background.paper",
+              opacity: 0.9999
+              // NOTE: make preview effective
             },
-            children: [
-              u,
-              p && /* @__PURE__ */ e(ne, { title: v("delete"), disableInteractive: !0, placement: "top", children: /* @__PURE__ */ e(j, { onClick: p, children: /* @__PURE__ */ e(Vt, { sx: { fontSize: "1.25rem", color: "grey.500" } }) }) }),
-              /* @__PURE__ */ e(ne, { title: v("dragSort"), disableInteractive: !0, placement: "top", children: /* @__PURE__ */ e(j, { ref: n, children: /* @__PURE__ */ e(_t, { sx: { color: "grey.500" } }) }) })
-            ]
+            children: v
+          }
+        ),
+        !n && /* @__PURE__ */ e(
+          P,
+          {
+            className: y ? "" : "hover-visible",
+            sx: {
+              maxWidth: y ? "100%" : 0,
+              overflow: "hidden",
+              position: "absolute",
+              right: 2,
+              top: 2,
+              transition: "max-width 0.3s ease-in-out"
+            },
+            children: /* @__PURE__ */ w(
+              D,
+              {
+                direction: "row",
+                sx: {
+                  bgcolor: (p) => it(p.palette.grey[200], 0.9),
+                  borderRadius: 1,
+                  p: 0.5,
+                  [`.${nt.root}`]: {
+                    minWidth: 24,
+                    width: 24,
+                    height: 24,
+                    p: 0
+                  }
+                },
+                children: [
+                  l,
+                  a && /* @__PURE__ */ e(Q, { title: f(k ? "hideParameter" : "showParameter"), disableInteractive: !0, placement: "top", children: /* @__PURE__ */ e(A, { onClick: () => a(!k), children: k ? /* @__PURE__ */ e(Ht, { sx: { fontSize: "1.25rem", color: "grey.500" } }) : /* @__PURE__ */ e(Jt, { sx: { fontSize: "1.25rem", color: "grey.500" } }) }) }),
+                  c && /* @__PURE__ */ e(Q, { title: f("delete"), disableInteractive: !0, placement: "top", children: /* @__PURE__ */ e(A, { onClick: c, children: /* @__PURE__ */ e(Mt, { sx: { fontSize: "1.25rem", color: "grey.500" } }) }) }),
+                  /* @__PURE__ */ e(Q, { title: f("dragSort"), disableInteractive: !0, placement: "top", children: /* @__PURE__ */ e(A, { ref: i, children: /* @__PURE__ */ e($t, { sx: { color: "grey.500" } }) }) })
+                ]
+              }
+            )
           }
         )
-      }
-    )
-  ] }) });
+      ] })
+    }
+  );
 }
-function ir({
+function ur({
   label: t,
-  value: i,
-  onChange: n
+  value: r,
+  onChange: i
 }) {
-  const [r, a] = ue(!1);
-  return /* @__PURE__ */ k(S, { gap: 1, children: [
+  const [n, u] = ie(!1);
+  return /* @__PURE__ */ w(D, { gap: 1, children: [
     /* @__PURE__ */ e(
-      D,
+      O,
       {
         label: t,
         size: "small",
-        value: i,
-        onChange: (b) => n == null ? void 0 : n(b.target.value),
+        value: r,
+        onChange: (v) => i == null ? void 0 : i(v.target.value),
         InputProps: {
           endAdornment: /* @__PURE__ */ e(
-            pe,
+            fe,
             {
-              onChange: ({ response: b }) => {
-                var u;
-                const p = (u = b == null ? void 0 : b.data) == null ? void 0 : u.filename;
-                p && (n == null || n(p));
+              onChange: ({ response: v }) => {
+                var a;
+                const c = (a = v == null ? void 0 : v.data) == null ? void 0 : a.filename;
+                c && (i == null || i(c));
               }
             }
           )
         }
       }
     ),
-    i && /* @__PURE__ */ e(
-      w,
+    r && /* @__PURE__ */ e(
+      P,
       {
         component: "img",
         sx: { objectFit: "contain", borderRadius: 1, cursor: "pointer" },
-        src: ee(i),
+        src: re(r),
         alt: t,
         maxWidth: 100,
         maxHeight: 100,
         width: "100%",
-        onClick: () => a(!0)
+        onClick: () => u(!0)
       }
     ),
-    /* @__PURE__ */ e(ae, { open: r, onClose: () => a(!1), children: /* @__PURE__ */ e(w, { component: "img", sx: { objectFit: "contain" }, src: ee(i), alt: t }) })
+    /* @__PURE__ */ e(pe, { open: n, onClose: () => u(!1), children: /* @__PURE__ */ e(P, { component: "img", sx: { objectFit: "contain" }, src: re(r), alt: t }) })
   ] });
 }
-function Jr({ componentId: t }) {
+function te(t, r, i) {
+  return !t || !i ? !1 : Object.values(t).some(({ data: n }) => n.id !== r && n.key === i);
+}
+function Le(t, r) {
+  var i;
+  return !t || !r ? !1 : ((i = t[r]) == null ? void 0 : i.data.visible) ?? !0;
+}
+function Zr({ componentId: t }) {
   const {
-    state: { components: i }
-  } = re(), n = i[t], r = n == null ? void 0 : n.data;
-  return r ? /* @__PURE__ */ e(S, { maxHeight: "100%", overflow: "auto", children: /* @__PURE__ */ e(w, { p: 2, children: /* @__PURE__ */ e(Yt, { FallbackComponent: Qe, resetKeys: [t], children: /* @__PURE__ */ e(lr, { value: r }) }) }) }) : null;
+    state: { components: r }
+  } = le(), i = r[t], n = i == null ? void 0 : i.data;
+  return n ? /* @__PURE__ */ e(D, { maxHeight: "100%", overflow: "auto", children: /* @__PURE__ */ e(P, { p: 2, children: /* @__PURE__ */ e(Zt, { FallbackComponent: tt, resetKeys: [t], children: /* @__PURE__ */ e(ar, { value: n }) }) }) }) : null;
 }
-function lr({ value: t }) {
-  var v, c, h;
-  const { t: i } = z(), {
-    localState: { currentLocale: n },
+function ar({ value: t }) {
+  var k, l, y;
+  const { t: r } = j(), {
+    localState: { currentLocale: i, componentDebugProps: n },
     state: {
-      config: { defaultLocale: r }
+      config: { defaultLocale: u }
     },
-    currentPage: a,
-    currentSection: b
-  } = re(), p = _(t).doc, u = ce();
-  return /* @__PURE__ */ e(S, { height: "100%", children: /* @__PURE__ */ k(S, { gap: 2, children: [
-    /* @__PURE__ */ e(nr, { config: t }),
+    localActions: { setComponentDebugProps: v }
+  } = le(), c = _(t).doc, a = ae();
+  return /* @__PURE__ */ e(D, { height: "100%", children: /* @__PURE__ */ w(D, { gap: 2, children: [
+    /* @__PURE__ */ e(pr, { config: t }),
     /* @__PURE__ */ e(
-      or,
+      mr,
       {
         config: t,
-        currentLocale: n,
-        defaultLocale: r,
-        allComponents: u,
-        onUpdateConfig: (m) => {
-          p.transact(() => {
-            m(t);
+        currentLocale: i,
+        defaultLocale: u,
+        allComponents: a,
+        onUpdateConfig: (f) => {
+          c.transact(() => {
+            f(t);
           });
         }
       }
     ),
-    /* @__PURE__ */ k(S, { gap: 2, direction: "row", justifyContent: "space-between", alignItems: "center", children: [
-      /* @__PURE__ */ e(E, { variant: "subtitle1", children: i("renderer") }),
-      /* @__PURE__ */ k(
-        D,
+    /* @__PURE__ */ w(D, { gap: 2, direction: "row", justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ e(V, { variant: "subtitle1", children: r("renderer") }),
+      /* @__PURE__ */ w(
+        O,
         {
           hiddenLabel: !0,
           size: "small",
           select: !0,
           SelectProps: { autoWidth: !0 },
-          value: ((v = t.renderer) == null ? void 0 : v.type) || "react-component",
-          onChange: (m) => {
-            p.transact(() => {
-              const f = m.target.value;
-              t.renderer ?? (t.renderer = { type: f }), t.renderer.type = f;
+          value: ((k = t.renderer) == null ? void 0 : k.type) || "react-component",
+          onChange: (f) => {
+            c.transact(() => {
+              const p = f.target.value;
+              t.renderer ?? (t.renderer = { type: p }), t.renderer.type = p;
             });
           },
           children: [
@@ -511,459 +539,526 @@ function lr({ value: t }) {
         }
       )
     ] }),
-    ((c = t.renderer) == null ? void 0 : c.type) === "component" ? /* @__PURE__ */ e(mr, { value: t }) : ((h = t.renderer) == null ? void 0 : h.type) === "react-component" ? /* @__PURE__ */ e(pr, { value: t }) : null,
+    ((l = t.renderer) == null ? void 0 : l.type) === "component" ? /* @__PURE__ */ e(gr, { value: t }) : ((y = t.renderer) == null ? void 0 : y.type) === "react-component" ? /* @__PURE__ */ e(xr, { value: t }) : null,
     /* @__PURE__ */ e(
-      hr,
+      kr,
       {
         config: t,
-        currentLocale: n,
-        defaultLocale: r,
-        allComponents: u,
-        onChange: (m) => {
-          console.warn(m, JSON.parse(JSON.stringify({ currentPage: a, currentSection: b })));
+        currentLocale: i,
+        defaultLocale: u,
+        allComponents: a,
+        onChange: ({ key: f, value: p }) => {
+          v({
+            [f]: p.value
+          });
         },
-        props: {}
+        props: {
+          ...n
+        }
       }
     )
   ] }) });
 }
-function nr({ config: t }) {
-  const { t: i } = z();
-  return /* @__PURE__ */ e(Ke, { children: /* @__PURE__ */ k(S, { gap: 2, children: [
-    /* @__PURE__ */ e(E, { variant: "subtitle1", children: i("basicInfo") }),
+function pr({ config: t }) {
+  const { t: r } = j();
+  return /* @__PURE__ */ e(be, { children: /* @__PURE__ */ w(D, { gap: 2, children: [
+    /* @__PURE__ */ e(V, { variant: "subtitle1", children: r("basicInfo") }),
     /* @__PURE__ */ e(
-      D,
+      O,
       {
-        label: i("name"),
+        label: r("name"),
         size: "small",
         value: t.name || "",
-        onChange: (n) => t.name = n.target.value
+        onChange: (i) => t.name = i.target.value
       }
     ),
     /* @__PURE__ */ e(
-      D,
+      O,
       {
-        label: i("description"),
+        label: r("description"),
         size: "small",
         multiline: !0,
         minRows: 2,
         maxRows: 10,
         inputProps: { maxLength: 200 },
         value: t.description || "",
-        onChange: (n) => t.description = n.target.value
+        onChange: (i) => t.description = i.target.value
       }
     ),
     /* @__PURE__ */ e(
-      Ne,
+      Fe,
       {
         size: "small",
         options: [],
         multiple: !0,
         freeSolo: !0,
         value: t.tags ?? [],
-        onChange: (n, r) => t.tags = r,
-        renderInput: (n) => /* @__PURE__ */ e(D, { label: i("tags"), ...n })
+        onChange: (i, n) => t.tags = n,
+        renderInput: (i) => /* @__PURE__ */ e(O, { label: r("tags"), ...i })
       }
     ),
     /* @__PURE__ */ e(
-      ir,
+      ur,
       {
-        label: i("previewImage"),
+        label: r("previewImage"),
         value: t.previewImage || "",
-        onChange: (n) => t.previewImage = n
+        onChange: (i) => t.previewImage = i
       }
     )
   ] }) });
 }
-function or({
+function mr({
   config: t,
-  currentLocale: i,
-  defaultLocale: n,
-  allComponents: r,
-  onUpdateConfig: a,
-  useI18nEditor: b = !0
+  currentLocale: r,
+  defaultLocale: i,
+  allComponents: n,
+  onUpdateConfig: u,
+  useI18nEditor: v = !0
 }) {
-  const { t: p } = z(), u = ie({ variant: "dialog" }), v = t.properties && V(Object.values(t.properties), "index");
-  return /* @__PURE__ */ e(Ke, { children: /* @__PURE__ */ k(S, { gap: 2, children: [
-    /* @__PURE__ */ k(S, { direction: "row", gap: 1, alignItems: "center", justifyContent: "space-between", children: [
-      /* @__PURE__ */ e(E, { variant: "subtitle1", children: p("properties") }),
-      /* @__PURE__ */ e(w, { flex: 1 }),
+  const { t: c } = j(), a = se({ variant: "dialog" }), k = t.properties && F(Object.values(t.properties), "index");
+  return /* @__PURE__ */ e(be, { children: /* @__PURE__ */ w(D, { gap: 2, children: [
+    /* @__PURE__ */ w(D, { direction: "row", gap: 1, alignItems: "center", justifyContent: "space-between", children: [
+      /* @__PURE__ */ e(V, { variant: "subtitle1", children: c("properties") }),
+      /* @__PURE__ */ e(P, { flex: 1 }),
       /* @__PURE__ */ e(
-        j,
+        A,
         {
           onClick: () => {
-            a((c) => {
-              var m;
-              const h = Xe();
-              c.properties ?? (c.properties = {}), (m = c.properties)[h] ?? (m[h] = { index: (v == null ? void 0 : v.length) || 0, data: { id: h } });
+            u((l) => {
+              var f;
+              const y = rt();
+              l.properties ?? (l.properties = {}), (f = l.properties)[y] ?? (f[y] = { index: (k == null ? void 0 : k.length) || 0, data: { id: y } });
             });
           },
-          startIcon: /* @__PURE__ */ e(Kt, {}),
-          children: p("addObject", { object: p("property") })
+          startIcon: /* @__PURE__ */ e(Yt, {}),
+          children: c("addObject", { object: c("property") })
         }
       ),
-      b && /* @__PURE__ */ e(j, { sx: { minWidth: 32, minHeight: 32, p: 0 }, ...le(u), children: /* @__PURE__ */ e(Je, { fontSize: "small" }) })
+      v && /* @__PURE__ */ e(A, { sx: { minWidth: 32, minHeight: 32, p: 0 }, ...ce(a), children: /* @__PURE__ */ e(Ye, { fontSize: "small" }) })
     ] }),
-    t.properties && /* @__PURE__ */ e(
-      er,
+    t.properties && Object.keys(t.properties).length > 0 ? /* @__PURE__ */ e(
+      sr,
       {
-        component: S,
+        component: D,
         gap: 2,
         list: t.properties,
-        renderItem: (c, h, m) => {
-          var f, s, l, o, d, x;
-          return c.type === "custom-settings" ? null : /* @__PURE__ */ k(S, { gap: 1, bgcolor: "background.paper", children: [
-            /* @__PURE__ */ e(
-              rr,
-              {
-                preview: m.preview,
-                drop: m.drop,
-                drag: m.drag,
-                isDragging: m.isDragging,
-                onDelete: () => {
-                  a((y) => {
-                    if (y.properties) {
-                      const g = Object.entries(y.properties).sort(([, P], [, O]) => P.index - O.index);
-                      delete y.properties[c.id], g.filter(([P]) => P !== c.id).forEach(([, P], O) => {
-                        P.index = O;
-                      });
-                    }
-                  });
-                },
-                children: /* @__PURE__ */ k(S, { direction: "row", gap: 1, children: [
-                  /* @__PURE__ */ e(
-                    D,
-                    {
-                      label: p("key"),
-                      size: "small",
-                      sx: { flex: 1 },
-                      value: c.key || "",
-                      onChange: (y) => {
-                        a((I) => {
-                          const g = I.properties[c.id].data;
-                          g.key = y.target.value.trim();
-                        });
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ e(
-                    D,
-                    {
-                      label: p("label"),
-                      size: "small",
-                      sx: { flex: 1 },
-                      value: (((s = (f = c.locales) == null ? void 0 : f[i]) == null ? void 0 : s.name) ?? ((o = (l = c.locales) == null ? void 0 : l[n]) == null ? void 0 : o.name)) || "",
-                      onChange: (y) => {
-                        a((I) => {
-                          var C;
-                          const g = I.properties[c.id].data;
-                          g.locales ?? (g.locales = {}), (C = g.locales)[i] ?? (C[i] = {}), g.locales[i].name = y.target.value;
+        renderItem: (l, y, f) => {
+          var x, o, s, g, I, b;
+          const p = Le(t.properties, l.id);
+          return /* @__PURE__ */ e(
+            me,
+            {
+              elevation: 0,
+              sx: {
+                p: 1.25,
+                bgcolor: "background.paper",
+                borderRadius: 1,
+                border: p ? "1px solid" : "1px dashed",
+                borderColor: "divider"
+              },
+              children: /* @__PURE__ */ e(D, { gap: 2, children: /* @__PURE__ */ e(
+                dr,
+                {
+                  preview: f.preview,
+                  drop: f.drop,
+                  drag: f.drag,
+                  isDragging: f.isDragging,
+                  onDelete: () => {
+                    u((d) => {
+                      if (d.properties) {
+                        const m = Object.entries(d.properties).sort(([, C], [, z]) => C.index - z.index);
+                        delete d.properties[l.id], m.filter(([C]) => C !== l.id).forEach(([, C], z) => {
+                          C.index = z;
                         });
                       }
-                    }
-                  ),
-                  /* @__PURE__ */ k(
-                    D,
-                    {
-                      label: p("type"),
-                      size: "small",
-                      select: !0,
-                      sx: { flex: 1 },
-                      value: c.type === "string" && c.multiline ? "multiline" : c.type || "string",
-                      onChange: (y) => {
-                        a((I) => {
-                          const g = I.properties[c.id].data;
-                          if (g.locales)
-                            for (const P of Object.keys(g.locales))
-                              g.locales[P].defaultValue = void 0;
-                          const C = y.target.value;
-                          C === "multiline" ? (g.type = "string", g.multiline = !0) : (typeof g.multiline < "u" && delete g.multiline, g.type = C);
-                        });
-                      },
-                      children: [
-                        /* @__PURE__ */ e(R, { value: "string", children: "Text" }),
-                        /* @__PURE__ */ e(R, { value: "multiline", children: "Text (Multiline)" }),
-                        /* @__PURE__ */ e(R, { value: "number", children: "Number" }),
-                        /* @__PURE__ */ e(R, { value: "decimal", children: "Decimal" }),
-                        /* @__PURE__ */ e(R, { value: "boolean", children: "Boolean" }),
-                        /* @__PURE__ */ e(R, { value: "color", children: "Color" }),
-                        /* @__PURE__ */ e(R, { value: "url", children: "URL (Upload)" }),
-                        /* @__PURE__ */ e(R, { value: "json", children: "JSON" }),
-                        /* @__PURE__ */ e(R, { value: "yaml", children: "YAML" }),
-                        /* @__PURE__ */ e(R, { value: "component", children: "Component" }),
-                        /* @__PURE__ */ e(R, { value: "custom", children: "Custom (Render by a Component)" })
-                      ]
-                    }
-                  )
-                ] })
-              }
-            ),
-            /* @__PURE__ */ k(S, { direction: "row", gap: 1, children: [
-              /* @__PURE__ */ e(
-                W,
-                {
-                  allComponents: r,
-                  defaultLocale: n,
-                  component: t,
-                  property: c,
-                  label: p("defaultValue"),
-                  size: "small",
-                  fullWidth: !0,
-                  value: (x = (d = c.locales) == null ? void 0 : d[i]) == null ? void 0 : x.defaultValue,
-                  onChange: (y) => {
-                    a((I) => {
-                      var C;
-                      const g = I.properties[c.id].data;
-                      g.locales ?? (g.locales = {}), (C = g.locales)[i] ?? (C[i] = {}), g.locales[i].defaultValue = y;
                     });
-                  }
+                  },
+                  visible: p,
+                  onVisibilityChange: (d) => {
+                    u((h) => {
+                      const m = h.properties[l.id].data;
+                      m.visible = d;
+                    });
+                  },
+                  alwaysShowActions: !0,
+                  children: /* @__PURE__ */ w(D, { direction: "column", gap: 2, children: [
+                    /* @__PURE__ */ e(
+                      O,
+                      {
+                        label: c("key"),
+                        size: "small",
+                        required: !0,
+                        sx: {
+                          width: "calc(100% - 80px - 8px)",
+                          flex: 1,
+                          "& .MuiOutlinedInput-root": {
+                            borderColor: l.key ? te(t.properties, l.id, l.key) ? "warning.main" : void 0 : "error.main"
+                          },
+                          "& .MuiFormLabel-root": {
+                            color: l.key ? te(t.properties, l.id, l.key) ? "warning.main" : "text.secondary" : "error.main"
+                          },
+                          "& .MuiFormLabel-root.Mui-focused": {
+                            color: l.key ? te(t.properties, l.id, l.key) ? "warning.main" : "primary.main" : "error.main"
+                          }
+                        },
+                        value: l.key || "",
+                        onChange: (d) => {
+                          u((h) => {
+                            const m = h.properties[l.id].data;
+                            m.key = d.target.value.trim();
+                          });
+                        },
+                        InputProps: {
+                          endAdornment: !l.key || l.key && te(t.properties, l.id, l.key) ? /* @__PURE__ */ e(
+                            oe,
+                            {
+                              position: "end",
+                              sx: {
+                                width: 16,
+                                ml: 0
+                              },
+                              children: /* @__PURE__ */ e(Q, { title: l.key ? c("duplicateKey") : c("requiredKey"), children: /* @__PURE__ */ e(
+                                Ge,
+                                {
+                                  sx: {
+                                    color: l.key ? "warning.main" : "error.main",
+                                    fontSize: 16
+                                  }
+                                }
+                              ) })
+                            }
+                          ) : null
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ w(D, { direction: "row", gap: 1, children: [
+                      /* @__PURE__ */ e(
+                        O,
+                        {
+                          label: c("label"),
+                          size: "small",
+                          sx: { flex: 1 },
+                          value: (((o = (x = l.locales) == null ? void 0 : x[r]) == null ? void 0 : o.name) ?? ((g = (s = l.locales) == null ? void 0 : s[i]) == null ? void 0 : g.name)) || "",
+                          onChange: (d) => {
+                            u((h) => {
+                              var S;
+                              const m = h.properties[l.id].data;
+                              m.locales ?? (m.locales = {}), (S = m.locales)[r] ?? (S[r] = {}), m.locales[r].name = d.target.value;
+                            });
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ w(
+                        O,
+                        {
+                          label: c("type"),
+                          size: "small",
+                          select: !0,
+                          sx: { flex: 1 },
+                          value: l.type === "string" && l.multiline ? "multiline" : l.type || "string",
+                          onChange: (d) => {
+                            u((h) => {
+                              const m = h.properties[l.id].data;
+                              if (m.locales)
+                                for (const C of Object.keys(m.locales))
+                                  m.locales[C].defaultValue = void 0;
+                              const S = d.target.value;
+                              S === "multiline" ? (m.type = "string", m.multiline = !0) : (typeof m.multiline < "u" && delete m.multiline, m.type = S);
+                            });
+                          },
+                          children: [
+                            /* @__PURE__ */ e(R, { value: "string", children: "Text" }),
+                            /* @__PURE__ */ e(R, { value: "multiline", children: "Text (Multiline)" }),
+                            /* @__PURE__ */ e(R, { value: "number", children: "Number" }),
+                            /* @__PURE__ */ e(R, { value: "decimal", children: "Decimal" }),
+                            /* @__PURE__ */ e(R, { value: "boolean", children: "Boolean" }),
+                            /* @__PURE__ */ e(R, { value: "color", children: "Color" }),
+                            /* @__PURE__ */ e(R, { value: "url", children: "URL (Upload)" }),
+                            /* @__PURE__ */ e(R, { value: "json", children: "JSON" }),
+                            /* @__PURE__ */ e(R, { value: "yaml", children: "YAML" }),
+                            /* @__PURE__ */ e(R, { value: "component", children: "Component" }),
+                            /* @__PURE__ */ e(R, { value: "custom", children: "Custom (Render by a Component)" })
+                          ]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ w(D, { direction: "row", gap: 1, children: [
+                      /* @__PURE__ */ e(
+                        W,
+                        {
+                          allComponents: n,
+                          defaultLocale: i,
+                          component: t,
+                          property: l,
+                          label: c("defaultValue"),
+                          size: "small",
+                          fullWidth: !0,
+                          value: (b = (I = l.locales) == null ? void 0 : I[r]) == null ? void 0 : b.defaultValue,
+                          onChange: (d) => {
+                            u((h) => {
+                              var S;
+                              const m = h.properties[l.id].data;
+                              m.locales ?? (m.locales = {}), (S = m.locales)[r] ?? (S[r] = {}), m.locales[r].defaultValue = d;
+                            });
+                          }
+                        }
+                      ),
+                      l.type === "custom" ? /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e(hr, { property: l, allComponents: n }) }) : null
+                    ] })
+                  ] })
                 }
-              ),
-              c.type === "custom" ? /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(sr, { property: c, allComponents: r }) }) : null
-            ] })
-          ] }, c.id);
+              ) })
+            },
+            l.id
+          );
         }
       }
-    ),
-    b && /* @__PURE__ */ e(Me, { ...$e(u), component: t })
+    ) : /* @__PURE__ */ e(he, { style: { fontSize: 12 }, children: c("maker.properties.noProperties") }),
+    v && /* @__PURE__ */ e(et, { ...Qe(a), component: t })
   ] }) });
 }
-function sr({
+function hr({
   property: t,
-  allComponents: i
+  allComponents: r
 }) {
-  const n = ie({ variant: "popper" });
-  return /* @__PURE__ */ k(N, { children: [
-    /* @__PURE__ */ e(j, { sx: { minWidth: 0 }, ...le(n), children: /* @__PURE__ */ e(Ye, { fontSize: "small" }) }),
-    /* @__PURE__ */ e(We, { ...Ge(n), children: /* @__PURE__ */ e(Ue, { onClickAway: n.close, children: /* @__PURE__ */ e(Ee, { children: /* @__PURE__ */ e(w, { width: 500, p: 2, children: /* @__PURE__ */ e(
-      me,
+  const i = se({ variant: "popper" });
+  return /* @__PURE__ */ w(U, { children: [
+    /* @__PURE__ */ e(A, { sx: { minWidth: 0 }, ...ce(i), children: /* @__PURE__ */ e(qe, { fontSize: "small" }) }),
+    /* @__PURE__ */ e(_e, { ...Xe(i), children: /* @__PURE__ */ e($e, { onClickAway: i.close, children: /* @__PURE__ */ e(me, { children: /* @__PURE__ */ e(P, { width: 500, p: 2, children: /* @__PURE__ */ e(
+      ye,
       {
         value: t.componentId,
-        onChange: (r, a) => t.componentId = a,
-        allComponents: i
+        onChange: (n, u) => t.componentId = u,
+        allComponents: r
       }
     ) }) }) }) })
   ] });
 }
-function cr({
+function fr({
   value: t,
-  valueImmutable: i,
-  onChange: n,
-  defaultLocale: r,
-  allComponents: a
+  valueImmutable: r,
+  onChange: i,
+  defaultLocale: n,
+  allComponents: u
 }) {
-  var v;
-  const b = ie({ variant: "popper" }), { locale: p } = z(), u = typeof (t == null ? void 0 : t.componentId) == "string" ? (v = a[t.componentId]) == null ? void 0 : v.data : void 0;
-  return u ? /* @__PURE__ */ k(N, { children: [
-    /* @__PURE__ */ e(j, { sx: { minWidth: 0 }, disabled: !u, ...le(b), children: /* @__PURE__ */ e(Ye, { fontSize: "small" }) }),
+  var k;
+  const v = se({ variant: "popper" }), { locale: c } = j(), a = typeof (t == null ? void 0 : t.componentId) == "string" ? (k = u[t.componentId]) == null ? void 0 : k.data : void 0;
+  return a ? /* @__PURE__ */ w(U, { children: [
+    /* @__PURE__ */ e(A, { sx: { minWidth: 0 }, disabled: !a, ...ce(v), children: /* @__PURE__ */ e(qe, { fontSize: "small" }) }),
     /* @__PURE__ */ e(
-      We,
+      _e,
       {
-        ...Ge(b),
+        ...Xe(v),
         sx: {
           zIndex: 1e3
         },
-        children: /* @__PURE__ */ e(Ue, { onClickAway: b.close, children: /* @__PURE__ */ e(Ee, { children: /* @__PURE__ */ k(w, { width: 500, p: 2, children: [
-          /* @__PURE__ */ e(E, { variant: "subtitle1", children: "Parameters" }),
-          /* @__PURE__ */ e(S, { gap: 1, children: (u == null ? void 0 : u.properties) && V(Object.values(u.properties), "index").map(({ data: c }) => {
-            var h, m, f, s, l, o, d, x;
-            return /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(
+        children: /* @__PURE__ */ e($e, { onClickAway: v.close, children: /* @__PURE__ */ e(me, { children: /* @__PURE__ */ w(P, { width: 500, p: 2, children: [
+          /* @__PURE__ */ e(V, { variant: "subtitle1", children: "Parameters" }),
+          /* @__PURE__ */ e(D, { gap: 1, children: (a == null ? void 0 : a.properties) && F(Object.values(a.properties), "index").map(({ data: l }) => {
+            var y, f, p, x, o, s, g, I;
+            return /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e(
               W,
               {
-                allComponents: a,
-                defaultLocale: r,
+                allComponents: u,
+                defaultLocale: n,
                 size: "small",
                 fullWidth: !0,
-                component: u,
-                property: c,
-                valueImmutable: Z((m = (h = t.properties) == null ? void 0 : h[c.id]) == null ? void 0 : m.value),
-                value: ((s = (f = t.properties) == null ? void 0 : f[c.id]) == null ? void 0 : s.value) ?? ((o = (l = c.locales) == null ? void 0 : l[p]) == null ? void 0 : o.defaultValue) ?? ((x = (d = c.locales) == null ? void 0 : d[r]) == null ? void 0 : x.defaultValue),
-                onChange: (y) => {
-                  if (i) {
-                    const I = JSON.parse(JSON.stringify(t));
-                    n == null || n({ ...I, properties: { ...I.properties, [c.id]: { value: y } } });
+                component: a,
+                property: l,
+                valueImmutable: L((f = (y = t.properties) == null ? void 0 : y[l.id]) == null ? void 0 : f.value),
+                value: ((x = (p = t.properties) == null ? void 0 : p[l.id]) == null ? void 0 : x.value) ?? ((s = (o = l.locales) == null ? void 0 : o[c]) == null ? void 0 : s.defaultValue) ?? ((I = (g = l.locales) == null ? void 0 : g[n]) == null ? void 0 : I.defaultValue),
+                onChange: (b) => {
+                  if (r) {
+                    const d = JSON.parse(JSON.stringify(t));
+                    i == null || i({ ...d, properties: { ...d.properties, [l.id]: { value: b } } });
                   } else
-                    _(u).doc.transact(() => {
-                      t.properties ?? (t.properties = {}), t.properties[c.id] = { value: y };
+                    _(a).doc.transact(() => {
+                      t.properties ?? (t.properties = {}), t.properties[l.id] = { value: b };
                     });
                 }
               }
-            ) }, c.id);
+            ) }, l.id);
           }) })
         ] }) }) })
       }
     )
   ] }) : null;
 }
-function Me({
+function et({
   type: t = "properties",
-  component: i,
-  ...n
+  component: r,
+  ...i
 }) {
-  var m, f, s;
-  const { t: r } = z(), {
+  var f, p, x;
+  const { t: n } = j(), {
     state: {
-      components: a,
-      supportedLocales: b,
-      config: { defaultLocale: p }
+      components: u,
+      supportedLocales: v,
+      config: { defaultLocale: c }
     }
-  } = re(), u = ce(), v = _(i).doc, c = t === "properties" ? i.properties : t === "parameters" && ((m = i.renderer) == null ? void 0 : m.type) === "component" ? (f = a[i.renderer.componentId]) == null ? void 0 : f.data.properties : void 0, h = ((s = i.renderer) == null ? void 0 : s.type) === "component" ? i : void 0;
-  return /* @__PURE__ */ k(ae, { ...n, fullWidth: !0, maxWidth: "lg", children: [
-    /* @__PURE__ */ e(Ae, { children: r("i18nEditorTitle") }),
-    /* @__PURE__ */ e(Te, { children: c && /* @__PURE__ */ e(S, { children: /* @__PURE__ */ k(tt, { stickyHeader: !0, sx: { td: { verticalAlign: "top" } }, children: [
-      /* @__PURE__ */ e(rt, { children: /* @__PURE__ */ e(Se, { children: b.map(({ locale: l, name: o }) => /* @__PURE__ */ k(Ce, { children: [
-        o,
-        p === l && /* @__PURE__ */ e(Ht, { sx: { fontSize: 12, color: "text.secondary" } })
-      ] }, l)) }) }),
-      /* @__PURE__ */ e(it, { children: V(Object.values(c), "index").map(({ data: l }) => /* @__PURE__ */ e(Se, { children: b.map(({ locale: o }) => {
-        var d, x, y, I, g, C, P, O, A, K, F, H, U, J, L, Y, $, G, q, M, he, fe, be, ve, ye, ge;
-        return /* @__PURE__ */ e(Ce, { children: /* @__PURE__ */ e(S, { gap: 1, children: t === "properties" ? /* @__PURE__ */ k(N, { children: [
+  } = le(), a = ae(), k = _(r).doc, l = t === "properties" ? r.properties : t === "parameters" && ((f = r.renderer) == null ? void 0 : f.type) === "component" ? (p = u[r.renderer.componentId]) == null ? void 0 : p.data.properties : void 0, y = ((x = r.renderer) == null ? void 0 : x.type) === "component" ? r : void 0;
+  return /* @__PURE__ */ w(pe, { ...i, fullWidth: !0, maxWidth: "lg", children: [
+    /* @__PURE__ */ e(Ue, { children: n("i18nEditorTitle") }),
+    /* @__PURE__ */ e(We, { children: l && /* @__PURE__ */ e(D, { children: /* @__PURE__ */ w(ot, { stickyHeader: !0, sx: { td: { verticalAlign: "top" } }, children: [
+      /* @__PURE__ */ e(st, { children: /* @__PURE__ */ e(Oe, { children: v.map(({ locale: o, name: s }) => /* @__PURE__ */ w(ze, { children: [
+        s,
+        c === o && /* @__PURE__ */ e(Gt, { sx: { fontSize: 12, color: "text.secondary" } })
+      ] }, o)) }) }),
+      /* @__PURE__ */ e(ct, { children: F(Object.values(l), "index").map(({ data: o }) => /* @__PURE__ */ e(Oe, { children: v.map(({ locale: s }) => {
+        var g, I, b, d, h, m, S, C, z, T, K, E, H, J, ee, M, $, Y, G, q, ve, xe, ge, ke, Ie, we;
+        return /* @__PURE__ */ e(ze, { children: /* @__PURE__ */ e(D, { gap: 1, children: t === "properties" ? /* @__PURE__ */ w(U, { children: [
           /* @__PURE__ */ e(
-            D,
+            O,
             {
               size: "small",
               label: "Key",
-              value: l.key || "",
+              value: o.key || "",
               onChange: (B) => {
-                v.transact(() => {
-                  l.key = B.target.value.trim();
+                k.transact(() => {
+                  o.key = B.target.value.trim();
                 });
               }
             }
           ),
           /* @__PURE__ */ e(
-            D,
+            O,
             {
               size: "small",
-              label: r("label"),
-              value: (((x = (d = l.locales) == null ? void 0 : d[o]) == null ? void 0 : x.name) ?? ((I = (y = l.locales) == null ? void 0 : y[p]) == null ? void 0 : I.name)) || "",
+              label: n("label"),
+              value: (((I = (g = o.locales) == null ? void 0 : g[s]) == null ? void 0 : I.name) ?? ((d = (b = o.locales) == null ? void 0 : b[c]) == null ? void 0 : d.name)) || "",
               onChange: (B) => {
-                v.transact(() => {
-                  var T;
-                  l.locales ?? (l.locales = {}), (T = l.locales)[o] ?? (T[o] = {}), l.locales[o].name = B.target.value;
+                k.transact(() => {
+                  var N;
+                  o.locales ?? (o.locales = {}), (N = o.locales)[s] ?? (N[s] = {}), o.locales[s].name = B.target.value;
                 });
               }
             }
           ),
-          /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(
+          /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e(
             W,
             {
-              allComponents: u,
-              defaultLocale: p,
-              component: i,
-              property: l,
+              allComponents: a,
+              defaultLocale: c,
+              component: r,
+              property: o,
               size: "small",
               fullWidth: !0,
               label: "Default Value",
-              valueImmutable: Z((C = (g = l.locales) == null ? void 0 : g[o]) == null ? void 0 : C.defaultValue),
-              value: ((O = (P = l.locales) == null ? void 0 : P[o]) == null ? void 0 : O.defaultValue) ?? ((K = (A = l.locales) == null ? void 0 : A[p]) == null ? void 0 : K.defaultValue),
+              valueImmutable: L((m = (h = o.locales) == null ? void 0 : h[s]) == null ? void 0 : m.defaultValue),
+              value: ((C = (S = o.locales) == null ? void 0 : S[s]) == null ? void 0 : C.defaultValue) ?? ((T = (z = o.locales) == null ? void 0 : z[c]) == null ? void 0 : T.defaultValue),
               onChange: (B) => {
-                v.transact(() => {
-                  var T;
-                  l.locales ?? (l.locales = {}), (T = l.locales)[o] ?? (T[o] = {}), l.locales[o].defaultValue = B;
+                k.transact(() => {
+                  var N;
+                  o.locales ?? (o.locales = {}), (N = o.locales)[s] ?? (N[s] = {}), o.locales[s].defaultValue = B;
                 });
               }
             }
           ) })
-        ] }) : t === "parameters" && h ? /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(
+        ] }) : t === "parameters" && y ? /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e(
           W,
           {
-            allComponents: u,
-            defaultLocale: p,
-            component: i,
-            property: l,
+            allComponents: a,
+            defaultLocale: c,
+            component: r,
+            property: o,
             size: "small",
             fullWidth: !0,
-            valueImmutable: Z(
-              (J = (U = (H = (F = h.renderer.properties) == null ? void 0 : F[l.id]) == null ? void 0 : H.locales) == null ? void 0 : U[o]) == null ? void 0 : J.value
+            valueImmutable: L(
+              (J = (H = (E = (K = y.renderer.properties) == null ? void 0 : K[o.id]) == null ? void 0 : E.locales) == null ? void 0 : H[s]) == null ? void 0 : J.value
             ),
-            value: ((G = ($ = (Y = (L = h.renderer.properties) == null ? void 0 : L[l.id]) == null ? void 0 : Y.locales) == null ? void 0 : $[o]) == null ? void 0 : G.value) ?? ((fe = (he = (M = (q = h.renderer.properties) == null ? void 0 : q[l.id]) == null ? void 0 : M.locales) == null ? void 0 : he[p]) == null ? void 0 : fe.value) ?? ((ve = (be = l.locales) == null ? void 0 : be[o]) == null ? void 0 : ve.defaultValue) ?? ((ge = (ye = l.locales) == null ? void 0 : ye[p]) == null ? void 0 : ge.defaultValue),
+            value: ((Y = ($ = (M = (ee = y.renderer.properties) == null ? void 0 : ee[o.id]) == null ? void 0 : M.locales) == null ? void 0 : $[s]) == null ? void 0 : Y.value) ?? ((xe = (ve = (q = (G = y.renderer.properties) == null ? void 0 : G[o.id]) == null ? void 0 : q.locales) == null ? void 0 : ve[c]) == null ? void 0 : xe.value) ?? ((ke = (ge = o.locales) == null ? void 0 : ge[s]) == null ? void 0 : ke.defaultValue) ?? ((we = (Ie = o.locales) == null ? void 0 : Ie[c]) == null ? void 0 : we.defaultValue),
             onChange: (B) => {
-              v.transact(() => {
-                var T, xe, Ie, ke, we;
-                (T = h.renderer).properties ?? (T.properties = {}), (xe = h.renderer.properties)[Ie = l.id] ?? (xe[Ie] = {}), (ke = h.renderer.properties[l.id]).locales ?? (ke.locales = {}), (we = h.renderer.properties[l.id].locales)[o] ?? (we[o] = {}), h.renderer.properties[l.id].locales[o].value = B;
+              k.transact(() => {
+                var N, Se, Pe, Ce, De;
+                (N = y.renderer).properties ?? (N.properties = {}), (Se = y.renderer.properties)[Pe = o.id] ?? (Se[Pe] = {}), (Ce = y.renderer.properties[o.id]).locales ?? (Ce.locales = {}), (De = y.renderer.properties[o.id].locales)[s] ?? (De[s] = {}), y.renderer.properties[o.id].locales[s].value = B;
               });
             }
           }
-        ) }) : null }, l.id) }, o);
-      }) }, l.id)) })
+        ) }) : null }, o.id) }, s);
+      }) }, o.id)) })
     ] }) }) }),
-    /* @__PURE__ */ e(Be, { children: /* @__PURE__ */ e(j, { onClick: (l) => {
-      var o;
-      return (o = n.onClose) == null ? void 0 : o.call(n, l, "escapeKeyDown");
-    }, children: r("close") }) })
+    /* @__PURE__ */ e(Ve, { children: /* @__PURE__ */ e(A, { onClick: (o) => {
+      var s;
+      return (s = i.onClose) == null ? void 0 : s.call(i, o, "escapeKeyDown");
+    }, children: n("close") }) })
   ] });
 }
 function W({
   component: t,
-  property: i,
-  value: n,
-  onChange: r,
-  valueImmutable: a,
-  defaultLocale: b,
-  allComponents: p,
-  ...u
+  property: r,
+  value: i,
+  onChange: n,
+  valueImmutable: u,
+  defaultLocale: v,
+  allComponents: c,
+  ...a
 }) {
-  var m, f, s, l, o;
-  const { locale: v } = z(), c = X(null), h = u.label || ((f = (m = i.locales) == null ? void 0 : m[v]) == null ? void 0 : f.name) || ((l = (s = i.locales) == null ? void 0 : s[b]) == null ? void 0 : l.name) || i.key || i.id;
-  if (i.type === "number")
+  var x, o, s, g, I;
+  const { locale: k } = j(), l = Kt(), y = Z(null), f = () => {
+    var d;
+    const b = (d = l == null ? void 0 : l.current) == null ? void 0 : d.getUploader();
+    b == null || b.open(), y.current && b.onceUploadSuccess(({ response: h }) => {
+      var S, C;
+      let m = ((S = h == null ? void 0 : h.data) == null ? void 0 : S.filename) || "";
+      m && (m = `mediakit://${m}`, i && !i.includes("mediakit://") && (m += " # please use < import { getMediaKitAbsoluteUrl } from '@blocklet/pages-kit/builtin/utils' > to get the full address")), (C = y.current) == null || C.call(y, m);
+    });
+  }, p = a.label || ((o = (x = r.locales) == null ? void 0 : x[k]) == null ? void 0 : o.name) || ((g = (s = r.locales) == null ? void 0 : s[v]) == null ? void 0 : g.name) || r.key || r.id;
+  if (r.type === "number")
     return /* @__PURE__ */ e(
-      dr,
+      br,
       {
-        ...u,
-        label: h,
+        ...a,
+        label: p,
         NumberProps: {
-          value: ["number", "string"].includes(typeof n) ? n : null,
-          onChange: (d, x) => r == null ? void 0 : r(x)
+          value: ["number", "string"].includes(typeof i) ? i : null,
+          onChange: (b, d) => n == null ? void 0 : n(d)
         }
       }
     );
-  if (i.type === "custom-settings")
-    return null;
-  if (i.type === "decimal")
+  if (r.type === "decimal")
     return /* @__PURE__ */ e(
-      D,
+      O,
       {
-        ...u,
-        label: h,
+        ...a,
+        label: p,
         type: "text",
-        value: n ?? "",
-        onChange: (d) => {
-          const x = d.target.value;
-          if (x === "" || x === "-") {
-            r == null || r(x);
+        value: i ?? "",
+        onChange: (b) => {
+          const d = b.target.value;
+          if (d === "" || d === "-") {
+            n == null || n(d);
             return;
           }
-          if (/^-?(?!.*\..*\.)[0-9]*(\.[0-9]{0,9})?$/.test(x)) {
-            let I = x;
-            /^-?[1-9]+[0-9]*(\.[0-9]{1,9})?$/.test(I) && (I = Number(I)), r == null || r(I);
+          if (/^-?(?!.*\..*\.)[0-9]*(\.[0-9]{0,9})?$/.test(d)) {
+            let m = d;
+            /^-?[1-9]+[0-9]*(\.[0-9]{1,9})?$/.test(m) && (m = Number(m)), n == null || n(m);
           }
         }
       }
     );
-  if (i.type === "boolean")
+  if (r.type === "boolean")
     return /* @__PURE__ */ e(
-      ze,
+      Ne,
       {
-        label: h,
+        label: p,
         labelPlacement: "start",
-        control: /* @__PURE__ */ e(je, { checked: n === !0, onChange: (d, x) => r == null ? void 0 : r(x) })
+        control: /* @__PURE__ */ e(Be, { checked: i === !0, onChange: (b, d) => n == null ? void 0 : n(d) })
       }
     );
-  if (i.type === "color")
+  if (r.type === "color")
     return /* @__PURE__ */ e(
-      Lt,
+      or,
       {
-        label: h,
-        value: n,
-        onChange: (d) => {
-          r == null || r(d);
+        label: p,
+        value: i,
+        onChange: (b) => {
+          n == null || n(b);
         }
       }
     );
-  if (i.type === "json" || i.type === "yaml")
-    return /* @__PURE__ */ k(
-      S,
+  if (r.type === "json" || r.type === "yaml")
+    return /* @__PURE__ */ w(
+      D,
       {
         sx: {
           width: "100%",
@@ -976,7 +1071,7 @@ function W({
         },
         children: [
           /* @__PURE__ */ e(
-            et,
+            lt,
             {
               sx: {
                 position: "absolute",
@@ -984,25 +1079,25 @@ function W({
                 top: 0,
                 transform: "translate(0px, -7px) scale(0.75)"
               },
-              children: h
+              children: p
             }
           ),
           /* @__PURE__ */ e(
-            Fe,
+            Je,
             {
-              keyId: i.id,
-              locale: v,
-              language: i.type === "yaml" ? "yaml" : "json",
-              value: typeof n == "string" ? n : "",
-              onChange: (d) => r == null ? void 0 : r(d),
-              onUpload: (d) => {
-                c.current = d;
+              keyId: r.id,
+              locale: k,
+              language: r.type === "yaml" ? "yaml" : "json",
+              value: typeof i == "string" ? i : "",
+              onChange: (b) => n == null ? void 0 : n(b),
+              onUpload: (b) => {
+                y.current = b, f();
               }
             },
-            i.id
+            r.id
           ),
           /* @__PURE__ */ e(
-            w,
+            P,
             {
               component: "fieldset",
               sx: {
@@ -1018,104 +1113,104 @@ function W({
                 px: 1,
                 py: 0
               },
-              children: /* @__PURE__ */ e(w, { component: "legend", sx: { fontSize: "0.75em" }, children: /* @__PURE__ */ e(w, { component: "span", sx: { opacity: 0 }, children: u.label }) })
+              children: /* @__PURE__ */ e(P, { component: "legend", sx: { fontSize: "0.75em" }, children: /* @__PURE__ */ e(P, { component: "span", sx: { opacity: 0 }, children: a.label }) })
             }
           )
         ]
       }
     );
-  if (i.type === "custom") {
-    const d = (o = p[i.componentId]) == null ? void 0 : o.data;
-    return d ? /* @__PURE__ */ e(w, { width: "100%", children: /* @__PURE__ */ e(
-      He,
+  if (r.type === "custom") {
+    const b = (I = c[r.componentId]) == null ? void 0 : I.data;
+    return b ? /* @__PURE__ */ e(P, { width: "100%", children: /* @__PURE__ */ e(
+      Me,
       {
-        componentId: d.id,
-        props: { label: h, value: n, onChange: r },
-        locale: v,
+        componentId: b.id,
+        props: { label: p, value: i, onChange: n },
+        locale: k,
         dev: {
           mode: "draft",
-          components: p,
-          defaultLocale: b
+          components: c,
+          defaultLocale: v
         }
       }
-    ) }) : /* @__PURE__ */ e(D, { ...u, label: h, disabled: !0, placeholder: "Click right button select a component" });
+    ) }) : /* @__PURE__ */ e(O, { ...a, label: p, disabled: !0, placeholder: "Click right button select a component" });
   }
-  if (i.type === "component")
-    return /* @__PURE__ */ k(S, { width: "100%", direction: "row", gap: 1, children: [
-      /* @__PURE__ */ e(w, { flex: 1, children: /* @__PURE__ */ e(
-        me,
+  if (r.type === "component")
+    return /* @__PURE__ */ w(D, { width: "100%", direction: "row", gap: 1, children: [
+      /* @__PURE__ */ e(P, { flex: 1, children: /* @__PURE__ */ e(
+        ye,
         {
-          allComponents: p,
-          label: h,
-          value: n == null ? void 0 : n.componentId,
-          onChange: (d, x) => {
-            a || !n ? r == null || r({ ...n && JSON.parse(JSON.stringify(n)), componentId: x }) : typeof n == "object" && (n.componentId = x);
+          allComponents: c,
+          label: p,
+          value: i == null ? void 0 : i.componentId,
+          onChange: (b, d) => {
+            u || !i ? n == null || n({ ...i && JSON.parse(JSON.stringify(i)), componentId: d }) : typeof i == "object" && (i.componentId = d);
           }
         }
       ) }),
-      /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(
-        cr,
+      /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e(
+        fr,
         {
-          value: n,
-          valueImmutable: a,
-          onChange: r,
-          defaultLocale: b,
-          allComponents: p
+          value: i,
+          valueImmutable: u,
+          onChange: n,
+          defaultLocale: v,
+          allComponents: c
         }
       ) })
     ] });
-  if (!i.type || ["string", "url"].includes(i.type)) {
-    const d = i.type === "string" ? i.multiline : void 0, x = i.type === "url" ? n == null ? void 0 : n.url : n;
+  if (!r.type || ["string", "url"].includes(r.type)) {
+    const b = r.type === "string" ? r.multiline : void 0, d = r.type === "url" ? i == null ? void 0 : i.url : i;
     return /* @__PURE__ */ e(
-      D,
+      O,
       {
-        ...u,
-        label: h,
-        value: typeof x == "string" ? x : "",
-        multiline: d,
-        minRows: d ? 2 : void 0,
-        maxRows: d ? 10 : void 0,
-        onChange: (y) => r == null ? void 0 : r(
-          i.type === "url" ? { ...n, url: y.target.value, mediaKitUrl: y.target.value } : y.target.value
+        ...a,
+        label: p,
+        value: typeof d == "string" ? d : "",
+        multiline: b,
+        minRows: b ? 2 : void 0,
+        maxRows: b ? 10 : void 0,
+        onChange: (h) => n == null ? void 0 : n(
+          r.type === "url" ? { ...i, url: h.target.value, mediaKitUrl: h.target.value } : h.target.value
         ),
-        InputProps: i.type === "url" ? {
+        InputProps: r.type === "url" ? {
           sx: { pr: 0 },
-          endAdornment: /* @__PURE__ */ k(de, { position: "end", children: [
+          endAdornment: /* @__PURE__ */ w(oe, { position: "end", children: [
             /* @__PURE__ */ e(
-              pe,
+              fe,
               {
-                onChange: async ({ response: y }) => {
-                  var P, O, A;
-                  const I = ((P = y == null ? void 0 : y.data) == null ? void 0 : P.url) || ((O = y == null ? void 0 : y.data) == null ? void 0 : O.fileUrl);
-                  let g;
-                  I && (g = await oe(I).catch(() => se(I)).catch(() => {
+                onChange: async ({ response: h }) => {
+                  var z, T, K;
+                  const m = ((z = h == null ? void 0 : h.data) == null ? void 0 : z.url) || ((T = h == null ? void 0 : h.data) == null ? void 0 : T.fileUrl);
+                  let S;
+                  m && (S = await de(m).catch(() => ue(m)).catch(() => {
                   }));
-                  let C = ((A = y == null ? void 0 : y.data) == null ? void 0 : A.filename) || "";
-                  C && (C = `mediakit://${C}`), r == null || r({
-                    url: I,
+                  let C = ((K = h == null ? void 0 : h.data) == null ? void 0 : K.filename) || "";
+                  C && (C = `mediakit://${C}`), n == null || n({
+                    url: m,
                     mediaKitUrl: C,
-                    width: g == null ? void 0 : g.naturalWidth,
-                    height: g == null ? void 0 : g.naturalHeight
+                    width: S == null ? void 0 : S.naturalWidth,
+                    height: S == null ? void 0 : S.naturalHeight
                   });
                 }
               }
             ),
-            /* @__PURE__ */ e(ne, { title: "If you are using the 'mediaKitUrl' property, please use < import { getMediaKitAbsoluteUrl } from '@blocklet/pages-kit/builtin/utils' > to get the full address.", children: /* @__PURE__ */ e(Ft, { sx: { cursor: "default" }, fontSize: "small" }) })
+            /* @__PURE__ */ e(Q, { title: "If you are using the 'mediaKitUrl' property, please use < import { getMediaKitAbsoluteUrl } from '@blocklet/pages-kit/builtin/utils' > to get the full address.", children: /* @__PURE__ */ e(Ge, { sx: { cursor: "default" }, fontSize: "small" }) })
           ] })
         } : void 0
       }
     );
   }
-  return console.error("Unsupported property type", i.type), null;
+  return console.error("Unsupported property type", r.type), null;
 }
-function dr({
+function br({
   NumberProps: t,
-  ...i
+  ...r
 }) {
-  const { getInputProps: n } = Et(t), r = n();
-  return /* @__PURE__ */ e(D, { ...i, inputProps: r });
+  const { getInputProps: i } = Et(t), n = i();
+  return /* @__PURE__ */ e(O, { ...r, inputProps: n });
 }
-const ar = `import React from '@blocklet/pages-kit/builtin/react'
+const yr = `import React from '@blocklet/pages-kit/builtin/react'
 import { Box } from '@blocklet/pages-kit/builtin/mui/material'
 
 export default function () {
@@ -1124,212 +1219,242 @@ export default function () {
       Hello World
     </Box>
   )
-}`, ur = `console.log('hello')
+}`, vr = `console.log('hello')
 `;
-function pr({
+function xr({
   value: t
 }) {
-  const { locale: i } = z(), n = jt(), r = _(t).doc;
-  return Q(() => {
-    var a;
-    (a = t.renderer) != null && a.script || (r.transact(() => {
-      t.renderer.script = t.renderer.type === "react-component" ? ar : ur;
-    }), n());
-  }, [t]), /* @__PURE__ */ e(w, { sx: { border: 1, borderColor: "divider", borderRadius: 1, overflow: "hidden" }, children: /* @__PURE__ */ e(
-    Fe,
+  const { locale: r } = j(), i = Ut(), n = _(t).doc;
+  return X(() => {
+    var u;
+    (u = t.renderer) != null && u.script || (n.transact(() => {
+      t.renderer.script = t.renderer.type === "react-component" ? yr : vr;
+    }), i());
+  }, [t]), /* @__PURE__ */ e(P, { sx: { border: 1, borderColor: "divider", borderRadius: 1, overflow: "hidden" }, children: /* @__PURE__ */ e(
+    Je,
     {
       keyId: t.id,
-      locale: i,
+      locale: r,
       language: "typescript",
       value: t.renderer.script || "",
-      onChange: (a) => t.renderer.script = a,
+      onChange: (u) => t.renderer.script = u,
       typeScriptNoValidation: !1
     },
     t.id
   ) });
 }
-function mr({ value: t }) {
-  var h, m, f;
-  const { t: i } = z(), n = _(t).doc, {
+function gr({ value: t }) {
+  var y, f, p;
+  const { t: r } = j(), i = _(t).doc, {
     state: {
-      components: r,
-      config: { defaultLocale: a },
-      resources: b
+      components: n,
+      config: { defaultLocale: u },
+      resources: v
     },
-    localState: { currentLocale: p }
-  } = re(), u = ce(), v = ((h = r[t.renderer.componentId]) == null ? void 0 : h.data) ?? ((f = (m = b.components) == null ? void 0 : m[t.renderer.componentId]) == null ? void 0 : f.component), c = ie({ variant: "dialog" });
-  return /* @__PURE__ */ k(S, { gap: 1, children: [
+    localState: { currentLocale: c }
+  } = le(), a = ae(), k = ((y = n[t.renderer.componentId]) == null ? void 0 : y.data) ?? ((p = (f = v.components) == null ? void 0 : f[t.renderer.componentId]) == null ? void 0 : p.component), l = se({ variant: "dialog" });
+  return /* @__PURE__ */ w(D, { gap: 1, children: [
     /* @__PURE__ */ e(
-      me,
+      ye,
       {
-        allComponents: u,
+        allComponents: a,
         excludes: [t.id],
         value: t.renderer.componentId,
-        onChange: (s, l) => t.renderer.componentId = l
+        onChange: (x, o) => t.renderer.componentId = o
       }
     ),
-    v && /* @__PURE__ */ k(N, { children: [
-      /* @__PURE__ */ k(S, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
-        /* @__PURE__ */ e(E, { variant: "subtitle2", children: i("parameters") }),
-        /* @__PURE__ */ e(j, { sx: { minWidth: 32, minHeight: 32, p: 0 }, ...le(c), children: /* @__PURE__ */ e(Je, { fontSize: "small" }) })
+    k && /* @__PURE__ */ w(U, { children: [
+      /* @__PURE__ */ w(D, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ e(V, { variant: "subtitle2", children: r("parameters") }),
+        /* @__PURE__ */ e(A, { sx: { minWidth: 32, minHeight: 32, p: 0 }, ...ce(l), children: /* @__PURE__ */ e(Ye, { fontSize: "small" }) })
       ] }),
-      v.properties && V(Object.values(v.properties), "index").map(({ data: s }) => {
-        var l, o, d, x, y, I, g, C, P, O, A, K, F, H, U, J;
-        return /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(
+      k.properties && F(Object.values(k.properties), "index").map(({ data: x }) => {
+        var o, s, g, I, b, d, h, m, S, C, z, T, K, E, H, J;
+        return /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e(
           W,
           {
-            allComponents: u,
-            defaultLocale: a,
-            component: v,
-            property: s,
+            allComponents: a,
+            defaultLocale: u,
+            component: k,
+            property: x,
             fullWidth: !0,
             size: "small",
-            valueImmutable: Z((x = (d = (o = (l = t.renderer.properties) == null ? void 0 : l[s.id]) == null ? void 0 : o.locales) == null ? void 0 : d[p]) == null ? void 0 : x.value),
-            value: ((C = (g = (I = (y = t.renderer.properties) == null ? void 0 : y[s.id]) == null ? void 0 : I.locales) == null ? void 0 : g[p]) == null ? void 0 : C.value) ?? ((K = (A = (O = (P = t.renderer.properties) == null ? void 0 : P[s.id]) == null ? void 0 : O.locales) == null ? void 0 : A[a]) == null ? void 0 : K.value) ?? ((H = (F = s.locales) == null ? void 0 : F[p]) == null ? void 0 : H.defaultValue) ?? ((J = (U = s.locales) == null ? void 0 : U[a]) == null ? void 0 : J.defaultValue),
-            onChange: (L) => {
-              n.transact(() => {
-                var Y, $, G, q, M;
-                (Y = t.renderer).properties ?? (Y.properties = {}), ($ = t.renderer.properties)[G = s.id] ?? ($[G] = {}), (q = t.renderer.properties[s.id]).locales ?? (q.locales = {}), (M = t.renderer.properties[s.id].locales)[p] ?? (M[p] = {}), t.renderer.properties[s.id].locales[p].value = L;
+            valueImmutable: L((I = (g = (s = (o = t.renderer.properties) == null ? void 0 : o[x.id]) == null ? void 0 : s.locales) == null ? void 0 : g[c]) == null ? void 0 : I.value),
+            value: ((m = (h = (d = (b = t.renderer.properties) == null ? void 0 : b[x.id]) == null ? void 0 : d.locales) == null ? void 0 : h[c]) == null ? void 0 : m.value) ?? ((T = (z = (C = (S = t.renderer.properties) == null ? void 0 : S[x.id]) == null ? void 0 : C.locales) == null ? void 0 : z[u]) == null ? void 0 : T.value) ?? ((E = (K = x.locales) == null ? void 0 : K[c]) == null ? void 0 : E.defaultValue) ?? ((J = (H = x.locales) == null ? void 0 : H[u]) == null ? void 0 : J.defaultValue),
+            onChange: (ee) => {
+              i.transact(() => {
+                var M, $, Y, G, q;
+                (M = t.renderer).properties ?? (M.properties = {}), ($ = t.renderer.properties)[Y = x.id] ?? ($[Y] = {}), (G = t.renderer.properties[x.id]).locales ?? (G.locales = {}), (q = t.renderer.properties[x.id].locales)[c] ?? (q[c] = {}), t.renderer.properties[x.id].locales[c].value = ee;
               });
             }
           }
-        ) }, s.id);
+        ) }, x.id);
       }),
-      /* @__PURE__ */ e(Me, { ...$e(c), component: t, type: "parameters" })
+      /* @__PURE__ */ e(et, { ...Qe(l), component: t, type: "parameters" })
     ] })
   ] });
 }
-function me({
+function ye({
   label: t,
-  options: i,
-  excludes: n,
-  value: r,
-  onChange: a,
-  allComponents: b,
-  ...p
+  options: r,
+  excludes: i,
+  value: n,
+  onChange: u,
+  allComponents: v,
+  ...c
 }) {
-  var h;
-  const { t: u } = z(), v = i ?? V(Object.values(At(b, ...n ?? [])), "index").map((m) => m.data), c = (typeof r == "string" ? (h = b[r]) == null ? void 0 : h.data : void 0) ?? null;
+  var y;
+  const { t: a } = j(), k = r ?? F(Object.values(Wt(v, ...i ?? [])), "index").map((f) => f.data), l = (typeof n == "string" ? (y = v[n]) == null ? void 0 : y.data : void 0) ?? null;
   return /* @__PURE__ */ e(
-    Ne,
+    Fe,
     {
-      ...p,
+      ...c,
       size: "small",
-      options: v,
+      options: k,
       autoHighlight: !0,
-      isOptionEqualToValue: (m, f) => m.id === f.id,
-      getOptionKey: (m) => m.id,
-      getOptionLabel: (m) => m.name || m.id,
-      renderInput: (m) => /* @__PURE__ */ e(D, { label: t || u("component"), ...m }),
-      value: c,
-      onChange: (m, f) => {
-        var l, o, d, x, y, I;
-        let s = {};
-        f && (s = {
-          blockletId: (l = b[f == null ? void 0 : f.id]) == null ? void 0 : l.blockletId,
-          blockletTitle: (o = b[f == null ? void 0 : f.id]) == null ? void 0 : o.blockletTitle,
-          componentName: ((x = (d = b[f == null ? void 0 : f.id]) == null ? void 0 : d.data) == null ? void 0 : x.name) || ((I = (y = b[f == null ? void 0 : f.id]) == null ? void 0 : y.data) == null ? void 0 : I.id)
-        }), a == null || a(m, f == null ? void 0 : f.id, s);
+      isOptionEqualToValue: (f, p) => f.id === p.id,
+      getOptionKey: (f) => f.id,
+      getOptionLabel: (f) => f.name || f.id,
+      renderInput: (f) => /* @__PURE__ */ e(O, { label: t || a("component"), ...f }),
+      value: l,
+      onChange: (f, p) => {
+        var o, s, g, I, b, d;
+        let x = {};
+        p && (x = {
+          blockletId: (o = v[p == null ? void 0 : p.id]) == null ? void 0 : o.blockletId,
+          blockletTitle: (s = v[p == null ? void 0 : p.id]) == null ? void 0 : s.blockletTitle,
+          componentName: ((I = (g = v[p == null ? void 0 : p.id]) == null ? void 0 : g.data) == null ? void 0 : I.name) || ((d = (b = v[p == null ? void 0 : p.id]) == null ? void 0 : b.data) == null ? void 0 : d.id)
+        }), u == null || u(f, p == null ? void 0 : p.id, x);
       }
     }
   );
 }
-function hr({
+function kr({
   config: t,
-  allComponents: i,
-  defaultLocale: n,
-  propertiesValue: r,
-  currentLocale: a,
-  onChange: b,
-  props: p
+  allComponents: r,
+  defaultLocale: i,
+  propertiesValue: n,
+  currentLocale: u,
+  onChange: v,
+  props: c
 }) {
-  const { t: u } = z(), [v, c] = ue(t == null ? void 0 : t.properties);
-  Q(() => {
+  const { t: a } = j(), [k, l] = ie(t == null ? void 0 : t.properties), [y, f] = ie(null);
+  X(() => {
     (() => {
-      var l, o;
-      ((l = t == null ? void 0 : t.renderer) == null ? void 0 : l.type) === "react-component" && Tt(t == null ? void 0 : t.properties) ? Nt((o = t == null ? void 0 : t.renderer) == null ? void 0 : o.script).then((d) => {
-        const x = Wt(d);
-        c(x);
-      }) : c(t == null ? void 0 : t.properties);
+      var I, b;
+      ((I = t == null ? void 0 : t.renderer) == null ? void 0 : I.type) === "react-component" && Vt(t == null ? void 0 : t.properties) ? Ft((b = t == null ? void 0 : t.renderer) == null ? void 0 : b.script).then((d) => {
+        const h = _t(d);
+        l(h);
+      }) : l(t == null ? void 0 : t.properties);
     })();
-  }, [t]);
-  const m = te(() => !t || !v ? {} : Object.values(v).reduce(
-    (s, { data: l }) => {
-      var d, x, y, I, g;
-      const o = l.key || l.id;
-      return s[l.id] = {
-        value: (p == null ? void 0 : p[o]) ?? ((d = r == null ? void 0 : r[l.id]) == null ? void 0 : d.value) ?? ((y = (x = l.locales) == null ? void 0 : x[a]) == null ? void 0 : y.defaultValue) ?? ((g = (I = l.locales) == null ? void 0 : I[n]) == null ? void 0 : g.defaultValue),
-        key: o,
-        id: l.id,
-        type: l.type
-      }, s;
+  }, [JSON.stringify(t)]);
+  const p = ne(() => !t || !k ? {} : Object.values(k).reduce(
+    (g, { data: I }) => {
+      var d, h, m, S, C;
+      const b = I.key || I.id;
+      return g[I.id] = {
+        key: b,
+        value: (c == null ? void 0 : c[b]) ?? ((d = n == null ? void 0 : n[I.id]) == null ? void 0 : d.value) ?? ((m = (h = I.locales) == null ? void 0 : h[u]) == null ? void 0 : m.defaultValue) ?? ((C = (S = I.locales) == null ? void 0 : S[i]) == null ? void 0 : C.defaultValue),
+        id: I.id,
+        type: I.type
+      }, g;
     },
     {}
-  ), [v, t, r, a, n])(), f = Jt(m, "key");
-  return /* @__PURE__ */ k(N, { children: [
-    /* @__PURE__ */ e(E, { variant: "subtitle1", children: u("maker.properties.parameters") }),
-    /* @__PURE__ */ e(S, { gap: 1, children: t && v && V(Object.values(v), "index").map(({ data: s }) => {
-      var l, o;
-      return /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(
-        W,
-        {
-          allComponents: i,
-          defaultLocale: n,
-          size: "small",
-          fullWidth: !0,
-          component: t,
-          property: s,
-          valueImmutable: Z((l = r == null ? void 0 : r[s.id]) == null ? void 0 : l.value),
-          value: (o = m[s.id]) == null ? void 0 : o.value,
-          onChange: (d) => {
-            b({
-              path: ["properties", s.id],
-              value: { value: d },
-              shouldSync: !(!s.type || De.includes(s.type)),
-              excludeKeys: [],
-              key: s.key || s.id
-            });
-          }
-        }
-      ) }, s.id);
-    }) }),
-    /* @__PURE__ */ e(w, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
-      He,
-      {
-        componentId: (t == null ? void 0 : t.id) || "",
-        renderType: "setting",
-        locale: a,
-        properties: m,
-        dev: { mode: "draft", components: i, defaultLocale: n },
-        props: {
-          ...p,
-          onChange: (s) => {
-            Object.keys(s).filter((o) => {
-              var d;
-              return s[o] !== ((d = f == null ? void 0 : f[o]) == null ? void 0 : d.value);
-            }).filter((o) => !(o === "locale" && !Ut(f[o], "locale"))).forEach((o) => {
-              const d = f[o];
-              d != null && d.id ? b({
-                path: ["properties", d.id],
-                value: { value: s[o] },
-                shouldSync: !(!d.type || De.includes(d.type)),
+  ), [JSON.stringify(k), t, n, u, i]), x = pt(() => {
+    if (!k)
+      return {
+        canUseProperties: [],
+        visibleProperties: [],
+        canUsePropertiesKeys: []
+      };
+    const g = F(Object.values(k), "index"), I = g.filter(({ data: h }) => h.key && Le(k, h.id)), b = g.filter(({ data: h }) => h.key), d = b.map(({ data: h }) => h.key);
+    return {
+      canUseProperties: b,
+      visibleProperties: I,
+      canUsePropertiesKeys: d
+    };
+  }, [JSON.stringify(k)]), o = p(), s = Qt(o, "key");
+  return /* @__PURE__ */ e(be, { children: /* @__PURE__ */ w(D, { gap: 2, children: [
+    /* @__PURE__ */ e(V, { variant: "subtitle1", children: a("maker.properties.parameters") }),
+    !t || x.canUsePropertiesKeys.length === 0 ? /* @__PURE__ */ e(he, { style: { fontSize: 12 }, children: a("maker.properties.noParameters") }) : /* @__PURE__ */ w(U, { children: [
+      /* @__PURE__ */ e(D, { gap: 2, children: x.visibleProperties.map(({ data: g }) => {
+        var I, b;
+        return /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e(
+          W,
+          {
+            allComponents: r,
+            defaultLocale: i,
+            size: "small",
+            fullWidth: !0,
+            component: t,
+            property: g,
+            valueImmutable: L((I = n == null ? void 0 : n[g.id]) == null ? void 0 : I.value),
+            value: (c == null ? void 0 : c[g.key || g.id]) ?? ((b = o[g.id]) == null ? void 0 : b.value),
+            onChange: (d) => {
+              v({
+                path: ["properties", g.id],
+                value: { value: d },
+                shouldSync: !(!g.type || Ae.includes(g.type)),
                 excludeKeys: [],
-                key: d.key || d.id
-              }) : (console.warn("property not found: ", o), Bt.warning(u("maker.properties.propertyNotFound", { key: o })));
-            });
+                key: g.key || g.id
+              });
+            }
+          }
+        ) }, g.id);
+      }) }),
+      /* @__PURE__ */ e(D, { gap: 2, sx: { width: "100%" }, children: /* @__PURE__ */ e(
+        Me,
+        {
+          componentId: (t == null ? void 0 : t.id) || "",
+          renderType: "setting",
+          locale: u,
+          properties: o,
+          dev: { mode: "draft", components: r, defaultLocale: i },
+          props: {
+            ...Xt(c ?? {}, x.canUsePropertiesKeys),
+            onChange: (g) => {
+              const { canUsePropertiesKeys: I } = x;
+              Object.keys(g).filter((d) => {
+                var h;
+                return g[d] !== ((h = s == null ? void 0 : s[d]) == null ? void 0 : h.value);
+              }).filter((d) => !(d === "locale" && !qt(s[d], "locale"))).reduce((d, h) => d.then(() => {
+                const m = s[h], S = I.includes(h);
+                if (m != null && m.id && S)
+                  return v({
+                    path: ["properties", m.id],
+                    value: { value: g[h] },
+                    shouldSync: !(!m.type || Ae.includes(m.type)),
+                    excludeKeys: [],
+                    key: m.key || m.id
+                  }), Promise.resolve();
+                const C = `propertyNotFound${h}`;
+                if (y === C)
+                  return Promise.resolve();
+                je.close(y);
+                const z = je.warning(
+                  a("maker.properties.propertyNotFound", {
+                    key: h
+                  }),
+                  {
+                    key: C
+                  }
+                );
+                return f(z), Promise.resolve();
+              }), Promise.resolve());
+            }
           }
         }
-      }
-    ) })
-  ] });
+      ) })
+    ] })
+  ] }) });
 }
 export {
-  nr as BasicInfo,
-  me as CustomComponentAutocomplete,
-  Jr as CustomComponentSettings,
-  ar as DefaultReactComponentScriptTemplate,
-  ur as DefaultWebComponentScriptTemplate,
-  hr as ParametersConfig,
-  or as PropertiesConfig,
+  pr as BasicInfo,
+  ye as CustomComponentAutocomplete,
+  Zr as CustomComponentSettings,
+  yr as DefaultReactComponentScriptTemplate,
+  vr as DefaultWebComponentScriptTemplate,
+  kr as ParametersConfig,
+  mr as PropertiesConfig,
   W as PropertyValueField
 };