@blocklet/pages-kit-inner-components 0.4.32 → 0.4.34

package/lib/es/setting.js

@@ -1,145 +1,410 @@
-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 "./_chunks/state-CVCmClC_.js";
-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 "@blocklet/pages-kit/builtin/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 "@blocklet/pages-kit/builtin/react";
-import he from "@arcblock/ux/lib/Empty";
-import { useLocaleContext as j } from "@blocklet/pages-kit/builtin/locale";
-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 { jsx as t, jsxs as S, Fragment as J } from "react/jsx-runtime";
+import { g as oe, i as _e, b as Fe, h as ue, E as xt, n as Je, j as xe } from "./_chunks/state-CVCmClC_.js";
+import te from "@arcblock/ux/lib/Empty";
+import { useLocaleContext as N } from "@blocklet/pages-kit/builtin/locale";
+import { CodeEditor as ge } from "@blocklet/code-editor";
+import gt from "@mui/icons-material/AddRounded";
+import kt from "@mui/icons-material/ArrowDownward";
+import wt from "@mui/icons-material/ArrowUpward";
+import Pt from "@mui/icons-material/DeleteOutline";
+import { Typography as K, TextField as D, Stack as j, FormLabel as ne, Box as O, TableContainer as It, Paper as re, Table as $e, TableHead as Me, TableRow as se, TableCell as ce, TableBody as He, Button as A, IconButton as ke, FormControlLabel as Ye, Switch as Ge, InputAdornment as pe, Dialog as we, DialogTitle as qe, DialogContent as Le, DialogActions as Qe, alpha as St, Tooltip as X, buttonClasses as Ot, Autocomplete as Xe, MenuItem as he, Popper as Ze, Divider as jt } from "@blocklet/pages-kit/builtin/mui/material";
+import T from "lodash/sortBy";
+import { useMemo as de, useCallback as V, forwardRef as et, useState as Z, useEffect as $, useImperativeHandle as tt, lazy as zt, Suspense as Rt, useRef as F, useId as Dt } from "@blocklet/pages-kit/builtin/react";
+import { useUpdate as rt, useDebounce as Nt } from "react-use";
+import { styled as At } from "@arcblock/ux/lib/Theme";
+import { cx as Ct } from "@emotion/css";
+import { useReactive as Vt, useBoolean as Tt, useUpdate as Et } from "ahooks";
+import Ee from "gradient-parser";
 import "lodash/without";
-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 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);
+import Ut from "tinycolor2";
+import { red as Wt, pink as Bt, purple as Kt, indigo as _t, blue as Ft, cyan as Jt, teal as $t, green as Mt, lime as Ht, yellow as Yt, amber as Gt, orange as qt, brown as Lt, grey as Qt, blueGrey as Xt } from "@mui/material/colors";
+import { getImageSize as be, getVideoSize as ye, UploaderButton as Pe, UploaderProvider as Ie, useUploader as Zt } from "./uploader.js";
+import { Icon as er } from "@iconify-icon/react";
+import it from "lodash/isEmpty";
+import lt from "lodash/set";
+import * as ae from "yaml";
+import "lodash";
+import Ue from "@arcblock/ux/lib/Toast";
+import { CustomComponentRenderer as ot, transpileAndLoadScript as tr, getPropertiesFromCode as rr } from "@blocklet/pages-kit/components";
+import { unstable_useNumberInput as ir, ClickAwayListener as nt } from "@mui/base";
+import { VisibilityOffRounded as lr, VisibilityRounded as or, DeleteOutlineRounded as nr, DragIndicatorRounded as sr, TranslateRounded as st, AddRounded as ct, InfoRounded as dt, StarRounded as cr, SettingsRounded as at } from "@mui/icons-material";
+import { alpha as We } from "@mui/material/styles";
+import { getYjsValue as M } from "@syncedstore/core";
+import dr from "lodash/assign";
+import ar from "lodash/has";
+import ee from "lodash/isNil";
+import ur from "lodash/isObject";
+import pr from "lodash/keyBy";
+import mr from "lodash/omit";
+import fr from "lodash/pick";
+import hr from "lodash/reduce";
+import { usePopupState as me, bindTrigger as fe, bindDialog as ut, bindPopper as pt } from "material-ui-popup-state/hooks";
+import { ErrorBoundary as br } from "react-error-boundary";
+import { useDrop as mt, useDrag as yr } from "react-dnd";
+function vr({
+  onClick: e,
+  disabled: r,
+  sx: l,
+  ...i
+}) {
+  return /* @__PURE__ */ t(ke, { size: "small", color: "warning", variant: "outlined", disabled: r, onClick: e, ...i, children: /* @__PURE__ */ t(Pt, { fontSize: "small" }) });
+}
+function xr({
+  onClick: e,
+  disabled: r,
+  sx: l,
+  ...i
+}) {
+  return /* @__PURE__ */ t(ke, { size: "small", color: "primary", disabled: r, onClick: e, ...i, children: /* @__PURE__ */ t(wt, { fontSize: "small" }) });
+}
+function gr({
+  onClick: e,
+  disabled: r,
+  sx: l,
+  ...i
+}) {
+  return /* @__PURE__ */ t(ke, { size: "small", color: "primary", disabled: r, onClick: e, ...i, children: /* @__PURE__ */ t(kt, { fontSize: "small" }) });
+}
+function kr({
+  label: e,
+  value: r,
+  onChange: l,
+  disabled: i = !1,
+  itemLabel: c = "",
+  emptyHeight: b = 40,
+  property: a,
+  renderItem: u,
+  ...k
+}) {
+  const { t: h, locale: g } = N(), y = rt(), o = de(() => Array.isArray(r) ? r : [], [r]), p = V(() => {
+    const f = [...o, ""];
+    l(f), y();
+  }, [o, l, y]), s = V(() => {
+    if (!a || !a.subProperties)
+      return p();
+    const f = {};
+    T(Object.values(a.subProperties), "index").forEach(({ data: R }) => {
+      var E, U;
+      if (!R.key) return;
+      const C = ((U = (E = R.locales) == null ? void 0 : E[g]) == null ? void 0 : U.defaultValue) ?? "";
+      f[R.key] = C;
+    });
+    const z = [...o, f];
+    l(z), y();
+  }, [o, l, y, a, g, p]), d = V(
+    (f) => {
+      try {
+        const P = JSON.parse(f);
+        Array.isArray(P) ? l(P) : console.error("JSON解析结果不是数组");
+      } catch (P) {
+        console.error("JSON解析错误:", P);
+      }
+    },
+    [l]
+  ), m = V(
+    (f) => {
+      const P = o.filter((z, R) => R !== f);
+      l(P), y();
+    },
+    [o, l, y]
+  ), w = V(
+    (f) => {
+      if (f <= 0) return;
+      const P = [...o], z = P[f];
+      P[f] = P[f - 1], P[f - 1] = z, l(P), y();
+    },
+    [o, l, y]
+  ), n = V(
+    (f) => {
+      if (f >= o.length - 1) return;
+      const P = [...o], z = P[f];
+      P[f] = P[f + 1], P[f + 1] = z, l(P), y();
+    },
+    [o, l, y]
+  ), v = V(
+    (f, P) => {
+      const z = [...o];
+      z[f] = P, l(z);
+    },
+    [o, l]
+  ), x = a && a.subProperties && Object.keys(a.subProperties).length > 0, I = de(() => [
+    {
+      field: "index",
+      headerName: "#",
+      width: 40,
+      align: "center",
+      renderCell: ({ index: f }) => /* @__PURE__ */ t(
+        K,
+        {
+          variant: "body1",
+          sx: {
+            bgcolor: "action.hover",
+            borderRadius: "50%",
+            width: 24,
+            height: 24,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "text.secondary"
+          },
+          children: f + 1
+        }
+      )
+    },
+    {
+      field: "content",
+      headerName: "",
+      renderCell: ({ row: f, index: P }) => u && x ? u({
+        item: f,
+        index: P,
+        property: a,
+        onChange: (z) => v(P, z)
+      }) : /* @__PURE__ */ t(
+        D,
+        {
+          fullWidth: !0,
+          size: "small",
+          disabled: i,
+          value: f,
+          placeholder: c || `${h("item")} ${P + 1}`,
+          onChange: (z) => v(P, z.target.value),
+          ...k
+        }
+      )
+    },
+    {
+      field: "actions",
+      headerName: "",
+      width: 30,
+      // 增加宽度以容纳更多按钮
+      align: "center",
+      renderCell: ({ index: f }) => /* @__PURE__ */ S(j, { direction: "column", spacing: 0.25, children: [
+        /* @__PURE__ */ t(xr, { disabled: i || f === 0, onClick: () => w(f) }),
+        /* @__PURE__ */ t(
+          gr,
+          {
+            disabled: i || f === o.length - 1,
+            onClick: () => n(f)
+          }
+        ),
+        /* @__PURE__ */ t(vr, { disabled: i, onClick: () => m(f) })
+      ] })
+    }
+  ], [
+    u,
+    x,
+    a,
+    v,
+    c,
+    h,
+    i,
+    k,
+    m,
+    w,
+    n,
+    o.length
+  ]);
+  return x ? /* @__PURE__ */ S(j, { width: "100%", gap: 1, children: [
+    e && /* @__PURE__ */ t(ne, { children: e }),
+    o.length > 0 ? /* @__PURE__ */ t(It, { component: re, variant: "outlined", sx: { borderRadius: 1, mb: 1 }, children: /* @__PURE__ */ S(
+      $e,
+      {
+        size: "small",
+        sx: {
+          "& .MuiTableCell-root": {
+            py: 0.25,
+            px: 1,
+            whiteSpace: "nowrap"
+          },
+          "& .MuiTableCell-head": {
+            backgroundColor: "action.hover",
+            py: 0.25,
+            px: 1
+          },
+          borderCollapse: "collapse"
+        },
+        children: [
+          /* @__PURE__ */ t(Me, { sx: { display: "none" }, children: /* @__PURE__ */ t(se, { children: I.map((f) => /* @__PURE__ */ t(
+            ce,
+            {
+              width: f.width,
+              align: f.align || "left",
+              sx: { fontWeight: "bold" },
+              children: f.renderHeader ? f.renderHeader() : f.headerName
+            },
+            f.field
+          )) }) }),
+          /* @__PURE__ */ t(He, { children: o.map((f, P, z) => /* @__PURE__ */ t(
+            se,
+            {
+              sx: {
+                borderBottom: P < z.length - 1 ? "1px solid" : "none",
+                borderColor: "divider",
+                "&:hover": {
+                  backgroundColor: "action.hover"
+                }
+              },
+              children: I.map((R) => /* @__PURE__ */ t(
+                ce,
+                {
+                  width: R.width,
+                  align: R.align || "left",
+                  sx: {
+                    borderBottom: "none"
+                  },
+                  children: R.renderCell({
+                    row: f,
+                    index: P,
+                    onChange: (C) => v(P, C)
+                  })
+                },
+                `${P}-${R.field}`
+              ))
+            },
+            P
+          )) })
+        ]
+      }
+    ) }) : /* @__PURE__ */ t(te, { style: { fontSize: 12, height: b }, children: h("maker.properties.arrayEmpty") }),
+    /* @__PURE__ */ t(
+      A,
+      {
+        fullWidth: !0,
+        size: "small",
+        variant: "outlined",
+        disabled: i,
+        startIcon: /* @__PURE__ */ t(gt, {}),
+        onClick: s,
+        children: h("maker.properties.addArrayItem")
+      }
+    )
+  ] }) : /* @__PURE__ */ S(j, { width: "100%", gap: 1, children: [
+    e && /* @__PURE__ */ t(ne, { children: e }),
+    /* @__PURE__ */ t(O, { sx: { border: 1, borderColor: "divider", borderRadius: 1, minHeight: 150 }, children: /* @__PURE__ */ t(
+      ge,
+      {
+        keyId: a.id,
+        locale: g,
+        language: "json",
+        value: JSON.stringify(o, null, 2),
+        onChange: (f) => d(f || "")
+      },
+      a.id
+    ) })
+  ] });
+}
+Wt[300], Bt[300], Kt[300], // deepPurple['300'],
+_t[300], Ft[300], // lightBlue['300'],
+Jt[300], $t[300], Mt[300], // lightGreen['300'],
+Ht[300], Yt[300], Gt[300], qt[300], // deepOrange['300'],
+Lt[300], Qt[300], Xt[300];
+const wr = et(function({ showMarkdown: r, markdown: l, onMarkdownChange: i, showUploader: c, value: b, meta: a, onChange: u, ...k }, h) {
+  const [g, y] = Z("");
+  $(() => {
+    y(b || "");
+  }, [b, y]);
+  const o = async () => {
+    if (g !== b) {
+      const s = oe(g);
+      if (!s) {
+        u(g, void 0);
         return;
       }
-      const s = await de(o).catch(() => ue(o)).catch(() => {
+      const d = await be(s).catch(() => ye(s)).catch(() => {
       });
-      a(y, { ...s, filename: y });
+      u(g, { ...d, filename: g });
     }
   };
-  Bt(
+  Nt(
     () => {
-      y !== v && a(y);
+      g !== b && u(g);
     },
     300,
-    [y]
-  ), He(l, () => ({
-    submit: p
+    [g]
+  ), tt(h, () => ({
+    submit: o
   }));
-  const x = {};
-  return u && (x.InputProps = {
+  const p = {};
+  return c && (p.InputProps = {
     sx: { pr: 0 },
-    endAdornment: /* @__PURE__ */ e(oe, { position: "end", sx: { mx: 0.5 }, children: /* @__PURE__ */ e(
-      fe,
+    endAdornment: /* @__PURE__ */ t(pe, { position: "end", sx: { mx: 0.5 }, children: /* @__PURE__ */ t(
+      Pe,
       {
-        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
+        onChange: async ({ response: s }) => {
+          var n;
+          const d = (n = s == null ? void 0 : s.data) == null ? void 0 : n.filename, m = oe(d) || "";
+          let w = {};
+          m && (w = await be(m).catch(() => ye(m)).catch(() => {
+          })), u(d, {
+            ...w,
+            filename: d
           });
         }
       }
     ) })
-  }), /* @__PURE__ */ e(
-    O,
+  }), /* @__PURE__ */ t(
+    D,
     {
       size: "small",
       fullWidth: !0,
       ...k,
-      label: /* @__PURE__ */ w(D, { direction: "row", spacing: 1, alignItems: "center", children: [
+      label: /* @__PURE__ */ S(j, { direction: "row", spacing: 1, alignItems: "center", children: [
         k.label,
-        r && /* @__PURE__ */ w(U, { children: [
+        r && /* @__PURE__ */ S(J, { children: [
           " (",
-          /* @__PURE__ */ e(
-            Ne,
+          /* @__PURE__ */ t(
+            Ye,
             {
-              checked: i,
-              label: /* @__PURE__ */ e(P, { component: Nt, icon: "tabler:markdown", sx: { verticalAlign: "middle" } }),
+              checked: l,
+              label: /* @__PURE__ */ t(O, { component: er, icon: "tabler:markdown", sx: { verticalAlign: "middle" } }),
               labelPlacement: "start",
-              control: /* @__PURE__ */ e(Be, { size: "small" }),
+              control: /* @__PURE__ */ t(Ge, { size: "small" }),
               sx: { ml: 0.25, pr: 1 },
-              onChange: (o, s) => n == null ? void 0 : n(s)
+              onChange: (s, d) => i == null ? void 0 : i(d)
             }
           ),
           ")"
         ] })
       ] }),
       InputLabelProps: { shrink: !0, ...k.InputLabelProps },
-      value: y,
-      onChange: (o) => f(o.target.value),
-      ...x,
-      onKeyDown: (o) => {
-        o.keyCode !== 229 && o.key === "Enter" && p();
+      value: g,
+      onChange: (s) => y(s.target.value),
+      ...p,
+      onKeyDown: (s) => {
+        s.keyCode !== 229 && s.key === "Enter" && o();
       }
     }
   );
-}), rr = dt(() => import("react-best-gradient-color-picker"));
-function ir(t) {
+}), Pr = zt(() => import("react-best-gradient-color-picker"));
+function Ir(e) {
   try {
-    const i = Re.parse(t).map((u) => {
-      const v = u.colorStops.map((c) => {
-        if (c.type !== "rgba") {
-          const a = vt(c.value).toRgb();
+    const l = Ee.parse(e).map((c) => {
+      const b = c.colorStops.map((a) => {
+        if (a.type !== "rgba") {
+          const u = Ut(a.value).toRgb();
           return {
-            ...c,
-            value: [a.r, a.g, a.b, a.a],
+            ...a,
+            value: [u.r, u.g, u.b, u.a],
             type: "rgba"
           };
         }
-        return c;
+        return a;
       });
       return {
-        ...u,
-        colorStops: v
+        ...c,
+        colorStops: b
       };
     });
-    return Re.stringify(i);
+    return Ee.stringify(l);
   } catch {
-    return Ke(t) ? t : "";
+    return Fe(e) ? e : "";
   }
 }
-function nr({ color: t, sx: r = {}, ...i }) {
-  Ke(t);
-  const n = {};
-  return Te(t) ? n.backgroundImage = t : n.backgroundColor = t, /* @__PURE__ */ e(
-    P,
+function Sr({ color: e, sx: r = {}, ...l }) {
+  Fe(e);
+  const i = {};
+  return _e(e) ? i.backgroundImage = e : i.backgroundColor = e, /* @__PURE__ */ t(
+    O,
     {
       sx: {
         ...r,
@@ -152,41 +417,41 @@ function nr({ color: t, sx: r = {}, ...i }) {
         "&:hover": {
           opacity: 0.75
         },
-        ...n
+        ...i
       },
-      ...i
+      ...l
     }
   );
 }
-const lr = Ee(function({ onSave: r }, i) {
-  const n = ft({
+const Or = et(function({ onSave: r }, l) {
+  const i = Vt({
     value: ""
-  }), { 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);
+  }), { t: c } = N(), b = {};
+  i.value ? _e(i.value) ? b.backgroundImage = i.value : b.backgroundColor = i.value : b.border = "1px solid #ccc";
+  const [a, { setFalse: u, setTrue: k }] = Tt(!1), h = V(() => {
+    u();
+  }, [u]), g = () => {
+    r({ value: i.value }, h);
   };
-  return He(i, () => ({
-    open({ value: f } = { value: "" }) {
-      n.value = f, k();
+  return tt(l, () => ({
+    open({ value: y } = { value: "" }) {
+      i.value = y, k();
     },
     close() {
-      l();
+      h();
     }
-  })), /* @__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,
+  })), /* @__PURE__ */ S(we, { open: a, onClose: h, hideBackdrop: !0, children: [
+    /* @__PURE__ */ t(qe, { children: c("maker.configBackground") }),
+    /* @__PURE__ */ t(Le, { sx: { width: 600 }, children: /* @__PURE__ */ S(O, { width: "100%", display: "flex", children: [
+      /* @__PURE__ */ t(O, { flex: 1, mr: 1, sx: b, children: !i.value && /* @__PURE__ */ t(te, { children: c("error.notConfig") }) }),
+      /* @__PURE__ */ t(Rt, { children: /* @__PURE__ */ t(
+        Pr,
         {
           width: 200,
           height: 200,
-          value: ir(n.value),
-          onChange: (f) => {
-            n.value = f;
+          value: Ir(i.value),
+          onChange: (y) => {
+            i.value = y;
           },
           hidePresets: !0,
           hideAdvancedSliders: !0,
@@ -195,13 +460,13 @@ const lr = Ee(function({ onSave: r }, i) {
         }
       ) })
     ] }) }),
-    /* @__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") })
+    /* @__PURE__ */ S(Qe, { children: [
+      /* @__PURE__ */ t(A, { variant: "outlined", size: "small", onClick: h, children: c("common.cancel") }),
+      /* @__PURE__ */ t(A, { variant: "contained", size: "small", onClick: g, children: c("maker.save") })
     ] })
   ] });
 });
-mt(P)`
+At(O)`
   .color-item {
     position: relative;
   }
@@ -222,198 +487,396 @@ mt(P)`
     right: 0;
   }
 `;
-function or({
-  value: t,
+function jr({
+  value: e,
   onChange: r,
-  ...i
+  ...l
 }) {
-  const n = Z(null);
-  return /* @__PURE__ */ w(U, { children: [
-    /* @__PURE__ */ e(
-      tr,
+  const i = F(null);
+  return /* @__PURE__ */ S(J, { children: [
+    /* @__PURE__ */ t(
+      wr,
       {
-        ...i,
-        value: t,
+        ...l,
+        value: e,
         onChange: r,
         InputProps: {
-          endAdornment: /* @__PURE__ */ e(oe, { position: "end", children: /* @__PURE__ */ e(
-            nr,
+          endAdornment: /* @__PURE__ */ t(pe, { position: "end", children: /* @__PURE__ */ t(
+            Sr,
             {
-              color: t ?? "",
+              color: e ?? "",
               style: { width: "1.5rem", height: "1.5rem", padding: 0 },
               onClick: () => {
-                var u;
-                (u = n.current) == null || u.open({ value: t ?? "" });
+                var c;
+                (c = i.current) == null || c.open({ value: e ?? "" });
               }
             }
           ) })
         }
       }
     ),
-    /* @__PURE__ */ e(
-      lr,
+    /* @__PURE__ */ t(
+      Or,
       {
-        ref: n,
-        onSave: ({ value: u }, v) => {
-          r(u), v();
+        ref: i,
+        onSave: ({ value: c }, b) => {
+          r(c), b();
         }
       }
     )
   ] });
 }
-const Ae = ["string", "multiline", "json", "yaml", "component", "custom", "url"];
-function sr({
-  disabled: t,
+function ft(e, r) {
+  return r === "yaml" ? ae.stringify(e, { indent: 2 }) : r === "json" ? JSON.parse(JSON.stringify(e)) : e;
+}
+function zr({
+  label: e,
+  value: r,
+  onChange: l,
+  property: i,
+  component: c,
+  defaultLocale: b,
+  allComponents: a,
+  PropertyValueField: u,
+  onUpload: k
+}) {
+  const { locale: h } = N(), g = F(null);
+  if (!it(i.subProperties)) {
+    const o = T(Object.values(i.subProperties || {}), "index").filter(
+      (p) => p.data.visible !== !1 && p.data.key
+    );
+    return /* @__PURE__ */ S(j, { width: "100%", children: [
+      /* @__PURE__ */ t(ne, { sx: { px: 0.25, py: 0.5 }, children: e }),
+      /* @__PURE__ */ t(O, { children: /* @__PURE__ */ t(O, { sx: { position: "relative" }, children: o.map((p, s) => {
+        const { data: d } = p, m = d.key ?? d.id, w = s === o.length - 1;
+        let n = null;
+        try {
+          r && typeof r == "object" ? n = r[m] : typeof r == "string" && (n = (i.type === "yaml" ? ae.parse(r || "") : JSON.parse(r || "{}"))[m]);
+        } catch {
+        }
+        n == null && (d.locales && h && d.locales[h] ? n = d.locales[h].defaultValue : d.locales && b && d.locales[b] && (n = d.locales[b].defaultValue));
+        const v = (I) => {
+          try {
+            let f = {};
+            if (typeof r == "string")
+              try {
+                f = i.type === "yaml" ? ae.parse(r || "") : JSON.parse(r || "{}");
+              } catch {
+              }
+            else typeof r == "object" && r !== null && (f = { ...r });
+            lt(f, m, I);
+            const P = ft(f, i.type);
+            l == null || l(P);
+          } catch (f) {
+            console.error("Error updating property:", f);
+          }
+        }, x = 8;
+        return /* @__PURE__ */ S(
+          O,
+          {
+            sx: {
+              mb: w ? 0 : 1,
+              // 底部边距，最后一项不需要
+              display: "flex",
+              flexDirection: "row"
+            },
+            children: [
+              /* @__PURE__ */ S(
+                O,
+                {
+                  sx: {
+                    position: "relative",
+                    width: 24,
+                    flexShrink: 0
+                  },
+                  children: [
+                    /* @__PURE__ */ t(
+                      O,
+                      {
+                        sx: {
+                          position: "absolute",
+                          left: x,
+                          top: 0,
+                          height: 16,
+                          // 连接到字段中点的高度
+                          width: 0,
+                          borderLeft: "1px dashed",
+                          borderColor: "divider"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ t(
+                      O,
+                      {
+                        sx: {
+                          position: "absolute",
+                          left: x,
+                          top: 16,
+                          // 连接到字段中点
+                          width: 12,
+                          height: 0,
+                          borderTop: "1px dashed",
+                          borderColor: "divider"
+                        }
+                      }
+                    ),
+                    !w && /* @__PURE__ */ t(
+                      O,
+                      {
+                        sx: {
+                          position: "absolute",
+                          left: x,
+                          top: 16,
+                          // 从当前项中点
+                          bottom: -8,
+                          // 延伸到下一项
+                          width: 0,
+                          borderLeft: "1px dashed",
+                          borderColor: "divider"
+                        }
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ t(O, { sx: { flexGrow: 1 }, children: /* @__PURE__ */ t(
+                u,
+                {
+                  component: c,
+                  property: d,
+                  value: n,
+                  onChange: v,
+                  size: "small",
+                  fullWidth: !0,
+                  defaultLocale: b,
+                  allComponents: a
+                }
+              ) })
+            ]
+          },
+          d.id
+        );
+      }) }) })
+    ] });
+  }
+  return /* @__PURE__ */ t(j, { width: "100%", gap: 2, children: /* @__PURE__ */ S(
+    j,
+    {
+      sx: {
+        width: "100%",
+        position: "relative",
+        pt: 1,
+        pb: "6px",
+        px: "1px",
+        minHeight: 50,
+        ".monaco-editor,.overflow-guard": { borderRadius: 1 }
+      },
+      children: [
+        /* @__PURE__ */ t(
+          ne,
+          {
+            sx: {
+              position: "absolute",
+              left: 0,
+              top: 0,
+              transform: "translate(0px, -7px) scale(0.75)"
+            },
+            children: e
+          }
+        ),
+        /* @__PURE__ */ t(
+          ge,
+          {
+            keyId: i.id,
+            locale: h,
+            language: i.type === "yaml" ? "yaml" : "json",
+            value: typeof r == "string" ? r : "",
+            onChange: (o) => {
+              l == null || l(o);
+            },
+            onUpload: (o) => {
+              g.current = o, k && k(o);
+            }
+          },
+          i.id
+        ),
+        /* @__PURE__ */ t(
+          O,
+          {
+            component: "fieldset",
+            sx: {
+              pointerEvents: "none",
+              position: "absolute",
+              left: 0,
+              top: -5,
+              width: "100%",
+              height: "100%",
+              border: 1,
+              borderColor: "rgba(0, 0, 0, 0.23)",
+              borderRadius: 1,
+              px: 1,
+              py: 0
+            },
+            children: /* @__PURE__ */ t(O, { component: "legend", sx: { fontSize: "0.75em" }, children: /* @__PURE__ */ t(O, { component: "span", sx: { opacity: 0 }, children: e }) })
+          }
+        )
+      ]
+    }
+  ) });
+}
+const Be = ["string", "multiline", "json", "yaml", "component", "custom", "url"];
+function ht({
+  disabled: e,
   list: r,
-  renderItem: i,
-  ...n
+  renderItem: l,
+  ...i
 }) {
-  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();
+  const c = F(null), b = Dt(), a = Et(), u = T(Object.entries(r), (p) => p[1].index).map((p) => p[0]), k = F(u), h = V(
+    (p) => {
+      k.current = p, a();
     },
-    [c]
-  ), y = ne(
-    ({ index: x }, { index: o }) => {
-      const s = [...k.current];
-      s.splice(o, 0, ...s.splice(x, 1)), l(s);
+    [a]
+  ), g = V(
+    ({ index: p }, { index: s }) => {
+      const d = [...k.current];
+      d.splice(s, 0, ...d.splice(p, 1)), h(d);
     },
-    [l]
+    [h]
   );
-  X(() => {
-    l(a);
-  }, [a.join("-")]);
-  const [{ isOver: f }, p] = Ze({
-    accept: v,
-    collect: (x) => ({
-      isOver: x.isOver()
+  $(() => {
+    h(u);
+  }, [u.join("-")]);
+  const [{ isOver: y }, o] = mt({
+    accept: b,
+    collect: (p) => ({
+      isOver: p.isOver()
     }),
-    canDrop: () => !t,
+    canDrop: () => !e,
     drop: () => {
-      var s;
-      const x = () => {
-        k.current.forEach((g, I) => {
-          const b = r[g];
-          b && (b.index = I);
+      var d;
+      const p = () => {
+        k.current.forEach((m, w) => {
+          const n = r[m];
+          n && (n.index = w);
         });
-      }, o = (s = _(r)) == null ? void 0 : s.doc;
-      o ? o.transact(() => {
-        x();
-      }) : x();
+      }, s = (d = M(r)) == null ? void 0 : d.doc;
+      s ? s.transact(() => {
+        p();
+      }) : p();
     }
   });
-  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,
+  return $(() => {
+    y || h(u);
+  }, [y]), o(c), /* @__PURE__ */ t(O, { ...i, ref: c, className: Ct(y && "isDragging"), children: k.current.map((p, s) => /* @__PURE__ */ t(
+    Rr,
     {
-      type: v,
-      disabled: t,
-      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;
+      type: b,
+      disabled: e,
+      id: p,
+      index: s,
+      itemIndex: (d) => k.current.indexOf(d),
+      move: g,
+      children: (d) => {
+        const m = r[p];
+        return m ? l(m.data, s, d) : null;
       }
     },
-    x
+    p
   )) });
 }
-function cr({
-  disabled: t,
+function Rr({
+  disabled: e,
   id: r,
-  index: i,
-  type: n,
-  children: u,
-  itemIndex: v,
-  move: c
+  index: l,
+  type: i,
+  children: c,
+  itemIndex: b,
+  move: a
 }) {
-  const a = Z(), [{ isDragging: k }, l, y] = er({
-    type: n,
+  const u = F(), [{ isDragging: k }, h, g] = yr({
+    type: i,
     item: () => ({ id: r }),
-    canDrag: () => !t,
-    collect: (p) => ({ isDragging: p.isDragging() })
-  }), [, f] = Ze({
-    accept: n,
-    canDrop: () => !t,
-    hover(p, x) {
-      var h;
-      if (!a.current)
+    canDrag: () => !e,
+    collect: (o) => ({ isDragging: o.isDragging() })
+  }), [, y] = mt({
+    accept: i,
+    canDrop: () => !e,
+    hover(o, p) {
+      var x;
+      if (!u.current)
         return;
-      const o = v(p.id), s = i;
-      if (o === s)
+      const s = b(o.id), d = l;
+      if (s === d)
         return;
-      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 });
+      const m = (x = u.current) == null ? void 0 : x.getBoundingClientRect(), w = (m.bottom - m.top) / 2, v = p.getClientOffset().y - m.top;
+      s < d && v < w || s > d && v > w || a({ id: o.id, index: s }, { id: r, index: l });
     }
   });
-  return typeof u == "function" ? u({
+  return typeof c == "function" ? c({
     isDragging: k,
-    drag: l,
-    drop: (p) => (a.current = p, f(p)),
-    preview: y
-  }) : (l(f(y(a))), /* @__PURE__ */ e(P, { ref: a, children: u }));
+    drag: h,
+    drop: (o) => (u.current = o, y(o)),
+    preview: g
+  }) : (h(y(g(u))), /* @__PURE__ */ t(O, { ref: u, children: c }));
 }
-function dr({
-  drop: t,
+function Dr({
+  drop: e,
   preview: r,
-  drag: i,
-  disabled: n,
-  isDragging: u,
-  children: v,
-  onDelete: c,
-  onVisibilityChange: a,
+  drag: l,
+  disabled: i,
+  isDragging: c,
+  children: b,
+  onDelete: a,
+  onVisibilityChange: u,
   visible: k = !0,
-  actions: l,
-  alwaysShowActions: y = !1
+  actions: h,
+  alwaysShowActions: g = !1
 }) {
-  const { t: f } = j();
-  return /* @__PURE__ */ e(
-    P,
+  const { t: y } = N();
+  return /* @__PURE__ */ t(
+    O,
     {
-      ref: t,
+      ref: e,
       sx: {
         ":hover .hover-visible": { maxWidth: "100%" },
         opacity: k ? 1 : 0.5
       },
-      children: /* @__PURE__ */ w(P, { sx: { position: "relative" }, children: [
-        /* @__PURE__ */ e(
-          P,
+      children: /* @__PURE__ */ S(O, { sx: { position: "relative" }, children: [
+        /* @__PURE__ */ t(
+          O,
           {
             ref: r,
             sx: {
               flex: 1,
               borderRadius: 0.5,
-              bgcolor: u ? "action.hover" : "background.paper",
+              bgcolor: c ? "action.hover" : "background.paper",
               opacity: 0.9999
               // NOTE: make preview effective
             },
-            children: v
+            children: b
           }
         ),
-        !n && /* @__PURE__ */ e(
-          P,
+        !i && /* @__PURE__ */ t(
+          O,
           {
-            className: y ? "" : "hover-visible",
+            className: g ? "" : "hover-visible",
             sx: {
-              maxWidth: y ? "100%" : 0,
+              maxWidth: g ? "100%" : 0,
               overflow: "hidden",
               position: "absolute",
               right: 2,
               top: 2,
               transition: "max-width 0.3s ease-in-out"
             },
-            children: /* @__PURE__ */ w(
-              D,
+            children: /* @__PURE__ */ S(
+              j,
               {
                 direction: "row",
                 sx: {
-                  bgcolor: (p) => it(p.palette.grey[200], 0.9),
+                  bgcolor: (o) => St(o.palette.grey[200], 0.9),
                   borderRadius: 1,
                   p: 0.5,
-                  [`.${nt.root}`]: {
+                  [`.${Ot.root}`]: {
                     minWidth: 24,
                     width: 24,
                     height: 24,
@@ -421,10 +884,10 @@ function dr({
                   }
                 },
                 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" } }) }) })
+                  h,
+                  u && /* @__PURE__ */ t(X, { title: y(k ? "hideParameter" : "showParameter"), disableInteractive: !0, placement: "top", children: /* @__PURE__ */ t(A, { onClick: () => u(!k), children: k ? /* @__PURE__ */ t(lr, { sx: { fontSize: "1.25rem", color: "grey.500" } }) : /* @__PURE__ */ t(or, { sx: { fontSize: "1.25rem", color: "grey.500" } }) }) }),
+                  a && /* @__PURE__ */ t(X, { title: y("delete"), disableInteractive: !0, placement: "top", children: /* @__PURE__ */ t(A, { onClick: a, children: /* @__PURE__ */ t(nr, { sx: { fontSize: "1.25rem", color: "grey.500" } }) }) }),
+                  /* @__PURE__ */ t(X, { title: y("dragSort"), disableInteractive: !0, placement: "top", children: /* @__PURE__ */ t(A, { ref: l, children: /* @__PURE__ */ t(sr, { sx: { color: "grey.500" } }) }) })
                 ]
               }
             )
@@ -434,146 +897,170 @@ function dr({
     }
   );
 }
-function ur({
-  label: t,
+function Nr({
+  label: e,
   value: r,
-  onChange: i
+  onChange: l
 }) {
-  const [n, u] = ie(!1);
-  return /* @__PURE__ */ w(D, { gap: 1, children: [
-    /* @__PURE__ */ e(
-      O,
+  const [i, c] = Z(!1);
+  return /* @__PURE__ */ S(j, { gap: 1, children: [
+    /* @__PURE__ */ t(
+      D,
       {
-        label: t,
+        label: e,
         size: "small",
         value: r,
-        onChange: (v) => i == null ? void 0 : i(v.target.value),
+        onChange: (b) => l == null ? void 0 : l(b.target.value),
         InputProps: {
-          endAdornment: /* @__PURE__ */ e(
-            fe,
+          endAdornment: /* @__PURE__ */ t(
+            Pe,
             {
-              onChange: ({ response: v }) => {
-                var a;
-                const c = (a = v == null ? void 0 : v.data) == null ? void 0 : a.filename;
-                c && (i == null || i(c));
+              onChange: ({ response: b }) => {
+                var u;
+                const a = (u = b == null ? void 0 : b.data) == null ? void 0 : u.filename;
+                a && (l == null || l(a));
               }
             }
           )
         }
       }
     ),
-    r && /* @__PURE__ */ e(
-      P,
+    r && /* @__PURE__ */ t(
+      O,
       {
         component: "img",
         sx: { objectFit: "contain", borderRadius: 1, cursor: "pointer" },
-        src: re(r),
-        alt: t,
+        src: oe(r),
+        alt: e,
         maxWidth: 100,
         maxHeight: 100,
         width: "100%",
-        onClick: () => u(!0)
+        onClick: () => c(!0)
       }
     ),
-    /* @__PURE__ */ e(pe, { open: n, onClose: () => u(!1), children: /* @__PURE__ */ e(P, { component: "img", sx: { objectFit: "contain" }, src: re(r), alt: t }) })
+    /* @__PURE__ */ t(we, { open: i, onClose: () => c(!1), children: /* @__PURE__ */ t(O, { component: "img", sx: { objectFit: "contain" }, src: oe(r), alt: e }) })
   ] });
 }
-function te(t, r, i) {
-  return !t || !i ? !1 : Object.values(t).some(({ data: n }) => n.id !== r && n.key === i);
+function ve(e, r = "") {
+  return hr(
+    e,
+    (l, i, c) => {
+      const b = r ? `${r}.${c}` : c;
+      return ur(i) ? dr(l, ve(i, b)) : l[b] = i, l;
+    },
+    {}
+  );
+}
+const Ar = [
+  { value: "string", label: "Text" },
+  { value: "multiline", label: "Text (Multiline)" },
+  { value: "number", label: "Number" },
+  { value: "decimal", label: "Decimal" },
+  { value: "boolean", label: "Boolean" },
+  { value: "color", label: "Color" },
+  { value: "url", label: "URL (Upload)" },
+  { value: "json", label: "JSON" },
+  { value: "yaml", label: "YAML" },
+  { value: "array", label: "Array" },
+  { value: "component", label: "Component" },
+  { value: "custom", label: "Custom (Render by a Component)" }
+];
+function le(e, r, l) {
+  return !e || !l ? !1 : Object.values(e).some(({ data: i }) => i.id !== r && i.key === l);
 }
-function Le(t, r) {
-  var i;
-  return !t || !r ? !1 : ((i = t[r]) == null ? void 0 : i.data.visible) ?? !0;
+function bt(e, r) {
+  var l;
+  return !e || !r ? !1 : ((l = e[r]) == null ? void 0 : l.data.visible) ?? !0;
 }
-function Zr({ componentId: t }) {
+function Vi({ componentId: e }) {
   const {
     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;
+  } = ue(), l = r[e], i = l == null ? void 0 : l.data;
+  return i ? /* @__PURE__ */ t(j, { maxHeight: "100%", overflow: "auto", children: /* @__PURE__ */ t(O, { p: 2, children: /* @__PURE__ */ t(br, { FallbackComponent: xt, resetKeys: [e], children: /* @__PURE__ */ t(Cr, { value: i }) }) }) }) : null;
 }
-function ar({ value: t }) {
-  var k, l, y;
-  const { t: r } = j(), {
-    localState: { currentLocale: i, componentDebugProps: n },
+function Cr({ value: e }) {
+  var k, h, g;
+  const { t: r } = N(), {
+    localState: { currentLocale: l, componentDebugProps: i },
     state: {
-      config: { defaultLocale: u }
+      config: { defaultLocale: c }
     },
-    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(
-      mr,
+    localActions: { setComponentDebugProps: b }
+  } = ue(), a = M(e).doc, u = xe();
+  return /* @__PURE__ */ t(j, { height: "100%", children: /* @__PURE__ */ S(j, { gap: 2, children: [
+    /* @__PURE__ */ t(Vr, { config: e }),
+    /* @__PURE__ */ t(
+      Er,
       {
-        config: t,
-        currentLocale: i,
-        defaultLocale: u,
-        allComponents: a,
-        onUpdateConfig: (f) => {
-          c.transact(() => {
-            f(t);
+        config: e,
+        currentLocale: l,
+        defaultLocale: c,
+        allComponents: u,
+        onUpdateConfig: (y) => {
+          a.transact(() => {
+            y(e);
           });
         }
       }
     ),
-    /* @__PURE__ */ w(D, { gap: 2, direction: "row", justifyContent: "space-between", alignItems: "center", children: [
-      /* @__PURE__ */ e(V, { variant: "subtitle1", children: r("renderer") }),
-      /* @__PURE__ */ w(
-        O,
+    /* @__PURE__ */ S(j, { gap: 2, direction: "row", justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ t(K, { variant: "subtitle1", children: r("renderer") }),
+      /* @__PURE__ */ S(
+        D,
         {
           hiddenLabel: !0,
           size: "small",
           select: !0,
           SelectProps: { autoWidth: !0 },
-          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;
+          value: ((k = e.renderer) == null ? void 0 : k.type) || "react-component",
+          onChange: (y) => {
+            a.transact(() => {
+              const o = y.target.value;
+              e.renderer ?? (e.renderer = { type: o }), e.renderer.type = o;
             });
           },
           children: [
-            /* @__PURE__ */ e(R, { value: "react-component", children: "React Component" }),
-            /* @__PURE__ */ e(R, { value: "component", children: "Custom Component" })
+            /* @__PURE__ */ t(he, { value: "react-component", children: "React Component" }),
+            /* @__PURE__ */ t(he, { value: "component", children: "Custom Component" })
           ]
         }
       )
     ] }),
-    ((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(
-      kr,
+    ((h = e.renderer) == null ? void 0 : h.type) === "component" ? /* @__PURE__ */ t($r, { value: e }) : ((g = e.renderer) == null ? void 0 : g.type) === "react-component" ? /* @__PURE__ */ t(Jr, { value: e }) : null,
+    /* @__PURE__ */ t(
+      Mr,
       {
-        config: t,
-        currentLocale: i,
-        defaultLocale: u,
-        allComponents: a,
-        onChange: ({ key: f, value: p }) => {
-          v({
-            [f]: p.value
+        config: e,
+        currentLocale: l,
+        defaultLocale: c,
+        allComponents: u,
+        onChange: ({ key: y, value: o }) => {
+          b({
+            [y]: o.value
           });
         },
         props: {
-          ...n
+          ...i
         }
       }
     )
   ] }) });
 }
-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(
-      O,
+function Vr({ config: e }) {
+  const { t: r } = N();
+  return /* @__PURE__ */ t(Ie, { children: /* @__PURE__ */ S(j, { gap: 2, children: [
+    /* @__PURE__ */ t(K, { variant: "subtitle1", children: r("basicInfo") }),
+    /* @__PURE__ */ t(
+      D,
       {
         label: r("name"),
         size: "small",
-        value: t.name || "",
-        onChange: (i) => t.name = i.target.value
+        value: e.name || "",
+        onChange: (l) => e.name = l.target.value
       }
     ),
-    /* @__PURE__ */ e(
-      O,
+    /* @__PURE__ */ t(
+      D,
       {
         label: r("description"),
         size: "small",
@@ -581,636 +1068,806 @@ function pr({ config: t }) {
         minRows: 2,
         maxRows: 10,
         inputProps: { maxLength: 200 },
-        value: t.description || "",
-        onChange: (i) => t.description = i.target.value
+        value: e.description || "",
+        onChange: (l) => e.description = l.target.value
       }
     ),
-    /* @__PURE__ */ e(
-      Fe,
+    /* @__PURE__ */ t(
+      Xe,
       {
         size: "small",
         options: [],
         multiple: !0,
         freeSolo: !0,
-        value: t.tags ?? [],
-        onChange: (i, n) => t.tags = n,
-        renderInput: (i) => /* @__PURE__ */ e(O, { label: r("tags"), ...i })
+        value: e.tags ?? [],
+        onChange: (l, i) => e.tags = i,
+        renderInput: (l) => /* @__PURE__ */ t(D, { label: r("tags"), ...l })
       }
     ),
-    /* @__PURE__ */ e(
-      ur,
+    /* @__PURE__ */ t(
+      Nr,
       {
         label: r("previewImage"),
-        value: t.previewImage || "",
-        onChange: (i) => t.previewImage = i
+        value: e.previewImage || "",
+        onChange: (l) => e.previewImage = l
       }
     )
   ] }) });
 }
-function mr({
-  config: t,
-  currentLocale: r,
-  defaultLocale: i,
-  allComponents: n,
-  onUpdateConfig: u,
-  useI18nEditor: v = !0
+function yt({
+  data: e,
+  params: r,
+  visible: l,
+  config: i,
+  currentLocale: c,
+  defaultLocale: b,
+  allComponents: a,
+  onUpdateConfig: u
 }) {
-  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(
-        A,
-        {
-          onClick: () => {
-            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 } });
+  var g, y, o, p, s, d;
+  const { t: k } = N(), h = de(() => e.type === "json" || e.type === "yaml" || e.type === "array" ? Br : B, [e.type]);
+  return /* @__PURE__ */ t(
+    Dr,
+    {
+      preview: r.preview,
+      drop: r.drop,
+      drag: r.drag,
+      isDragging: r.isDragging,
+      onDelete: () => {
+        u((m) => {
+          if (m.properties) {
+            const n = Object.entries(m.properties).sort(([, x], [, I]) => x.index - I.index);
+            delete m.properties[e.id], n.filter(([x]) => x !== e.id).forEach(([, x], I) => {
+              x.index = I;
             });
-          },
-          startIcon: /* @__PURE__ */ e(Yt, {}),
-          children: c("addObject", { object: c("property") })
-        }
-      ),
-      v && /* @__PURE__ */ e(A, { sx: { minWidth: 32, minHeight: 32, p: 0 }, ...ce(a), children: /* @__PURE__ */ e(Ye, { fontSize: "small" }) })
+          }
+        });
+      },
+      visible: l,
+      onVisibilityChange: (m) => {
+        u((w) => {
+          const n = w.properties[e.id].data;
+          n.visible = m;
+        });
+      },
+      alwaysShowActions: !0,
+      children: /* @__PURE__ */ S(j, { direction: "column", gap: 2, children: [
+        /* @__PURE__ */ t(
+          D,
+          {
+            label: k("key"),
+            size: "small",
+            required: !0,
+            sx: {
+              width: "calc(100% - 80px - 8px)",
+              flex: 1,
+              "& .MuiOutlinedInput-root": {
+                borderColor: e.key ? le(i.properties, e.id, e.key) ? "warning.main" : void 0 : "error.main"
+              },
+              "& .MuiFormLabel-root": {
+                color: e.key ? le(i.properties, e.id, e.key) ? "warning.main" : "text.secondary" : "error.main"
+              },
+              "& .MuiFormLabel-root.Mui-focused": {
+                color: e.key ? le(i.properties, e.id, e.key) ? "warning.main" : "primary.main" : "error.main"
+              }
+            },
+            value: e.key || "",
+            onChange: (m) => {
+              u((w) => {
+                const n = w.properties[e.id].data;
+                n.key = m.target.value.trim();
+              });
+            },
+            InputProps: {
+              endAdornment: !e.key || e.key && le(i.properties, e.id, e.key) ? /* @__PURE__ */ t(
+                pe,
+                {
+                  position: "end",
+                  sx: {
+                    width: 16,
+                    ml: 0
+                  },
+                  children: /* @__PURE__ */ t(X, { title: e.key ? k("duplicateKey") : k("requiredKey"), children: /* @__PURE__ */ t(
+                    dt,
+                    {
+                      sx: {
+                        color: e.key ? "warning.main" : "error.main",
+                        fontSize: 16
+                      }
+                    }
+                  ) })
+                }
+              ) : null
+            }
+          }
+        ),
+        /* @__PURE__ */ S(j, { direction: "row", gap: 1, children: [
+          /* @__PURE__ */ t(
+            D,
+            {
+              label: k("label"),
+              size: "small",
+              sx: { flex: 1 },
+              value: (((y = (g = e.locales) == null ? void 0 : g[c]) == null ? void 0 : y.name) ?? ((p = (o = e.locales) == null ? void 0 : o[b]) == null ? void 0 : p.name)) || "",
+              onChange: (m) => {
+                u((w) => {
+                  var v;
+                  const n = w.properties[e.id].data;
+                  n.locales ?? (n.locales = {}), (v = n.locales)[c] ?? (v[c] = {}), n.locales[c].name = m.target.value;
+                });
+              }
+            }
+          ),
+          /* @__PURE__ */ t(
+            D,
+            {
+              label: k("type"),
+              size: "small",
+              select: !0,
+              sx: { flex: 1 },
+              value: e.type === "string" && e.multiline ? "multiline" : e.type || "string",
+              onChange: (m) => {
+                u((w) => {
+                  const n = w.properties[e.id].data;
+                  if (n.locales)
+                    for (const x of Object.keys(n.locales))
+                      n.locales[x].defaultValue = void 0;
+                  const v = m.target.value;
+                  v === "multiline" ? (n.type = "string", n.multiline = !0) : (typeof n.multiline < "u" && delete n.multiline, n.type = v);
+                });
+              },
+              children: Ar.map((m) => /* @__PURE__ */ t(he, { value: m.value, children: m.label }, m.value))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ S(j, { direction: "row", gap: 1, children: [
+          /* @__PURE__ */ t(
+            h,
+            {
+              allComponents: a,
+              defaultLocale: b,
+              component: i,
+              property: e,
+              label: k("defaultValue"),
+              size: "small",
+              fullWidth: !0,
+              value: (d = (s = e.locales) == null ? void 0 : s[c]) == null ? void 0 : d.defaultValue,
+              onChange: (m, w) => {
+                u((n) => {
+                  var x;
+                  const v = n.properties[e.id].data;
+                  if (w != null && w.forceUpdateProperty) {
+                    const I = ve(v), f = ve(m);
+                    Object.keys(f).forEach((P) => {
+                      I[P] || lt(v, P, f[P]);
+                    });
+                  } else
+                    v.locales ?? (v.locales = {}), (x = v.locales)[c] ?? (x[c] = {}), v.locales[c].defaultValue = m;
+                });
+              }
+            }
+          ),
+          e.type === "custom" ? /* @__PURE__ */ t(O, { children: /* @__PURE__ */ t(Ur, { property: e, allComponents: a }) }) : null
+        ] })
+      ] })
+    }
+  );
+}
+function Tr(e) {
+  const [r, l] = Z(0);
+  return $(() => {
+    if (e.current) {
+      let i = e.current.parentElement, c = 0;
+      for (; i; )
+        i.classList.contains("property-container") && c++, i = i.parentElement;
+      l(c);
+    }
+  }, []), r;
+}
+function Er({
+  config: e,
+  currentLocale: r,
+  defaultLocale: l,
+  allComponents: i,
+  onUpdateConfig: c,
+  useI18nEditor: b = !0
+}) {
+  const { t: a } = N(), u = me({ variant: "dialog" }), k = e.properties && T(Object.values(e.properties), "index");
+  return /* @__PURE__ */ t(Ie, { children: /* @__PURE__ */ S(j, { gap: 2, children: [
+    /* @__PURE__ */ S(j, { direction: "row", gap: 1, alignItems: "center", justifyContent: "space-between", children: [
+      /* @__PURE__ */ t(K, { variant: "subtitle1", children: a("properties") }),
+      /* @__PURE__ */ t(O, { flex: 1 }),
+      b && /* @__PURE__ */ t(A, { sx: { minWidth: 32, minHeight: 32, p: 0 }, ...fe(u), children: /* @__PURE__ */ t(st, { fontSize: "small" }) })
     ] }),
-    t.properties && Object.keys(t.properties).length > 0 ? /* @__PURE__ */ e(
-      sr,
+    e.properties && Object.keys(e.properties).length > 0 ? /* @__PURE__ */ t(
+      ht,
       {
-        component: D,
+        component: j,
         gap: 2,
-        list: t.properties,
-        renderItem: (l, y, f) => {
-          var x, o, s, g, I, b;
-          const p = Le(t.properties, l.id);
-          return /* @__PURE__ */ e(
-            me,
+        list: e.properties,
+        renderItem: (h, g, y) => {
+          const o = bt(e.properties, h.id);
+          return /* @__PURE__ */ t(
+            re,
             {
               elevation: 0,
+              className: "property-container",
               sx: {
                 p: 1.25,
-                bgcolor: "background.paper",
                 borderRadius: 1,
-                border: p ? "1px solid" : "1px dashed",
+                border: o ? "1px solid" : "1px dashed",
                 borderColor: "divider"
               },
-              children: /* @__PURE__ */ e(D, { gap: 2, children: /* @__PURE__ */ e(
-                dr,
+              children: /* @__PURE__ */ t(j, { gap: 2, children: /* @__PURE__ */ t(
+                yt,
                 {
-                  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;
-                        });
-                      }
-                    });
-                  },
-                  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
-                    ] })
-                  ] })
+                  data: h,
+                  params: y,
+                  visible: o,
+                  config: e,
+                  currentLocale: r,
+                  defaultLocale: l,
+                  allComponents: i,
+                  onUpdateConfig: c
                 }
               ) })
             },
-            l.id
+            h.id
           );
         }
       }
-    ) : /* @__PURE__ */ e(he, { style: { fontSize: 12 }, children: c("maker.properties.noProperties") }),
-    v && /* @__PURE__ */ e(et, { ...Qe(a), component: t })
+    ) : /* @__PURE__ */ t(te, { style: { fontSize: 12 }, children: a("maker.properties.noProperties") }),
+    /* @__PURE__ */ t(
+      A,
+      {
+        fullWidth: !0,
+        variant: "outlined",
+        className: "ignore-style-override",
+        onClick: () => {
+          c((h) => {
+            var y;
+            const g = Je();
+            h.properties ?? (h.properties = {}), (y = h.properties)[g] ?? (y[g] = { index: (k == null ? void 0 : k.length) || 0, data: { id: g } });
+          });
+        },
+        startIcon: /* @__PURE__ */ t(ct, {}),
+        children: a("addObject", { object: a("property") })
+      }
+    ),
+    b && /* @__PURE__ */ t(vt, { ...ut(u), component: e })
   ] }) });
 }
-function hr({
-  property: t,
+function Ur({
+  property: e,
   allComponents: r
 }) {
-  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,
+  const l = me({ variant: "popper" });
+  return /* @__PURE__ */ S(J, { children: [
+    /* @__PURE__ */ t(A, { sx: { minWidth: 0 }, ...fe(l), children: /* @__PURE__ */ t(at, { fontSize: "small" }) }),
+    /* @__PURE__ */ t(Ze, { ...pt(l), children: /* @__PURE__ */ t(nt, { onClickAway: l.close, children: /* @__PURE__ */ t(re, { children: /* @__PURE__ */ t(O, { width: 500, p: 2, children: /* @__PURE__ */ t(
+      Se,
       {
-        value: t.componentId,
-        onChange: (n, u) => t.componentId = u,
+        value: e.componentId,
+        onChange: (i, c) => e.componentId = c,
         allComponents: r
       }
     ) }) }) }) })
   ] });
 }
-function fr({
-  value: t,
+function Wr({
+  value: e,
   valueImmutable: r,
-  onChange: i,
-  defaultLocale: n,
-  allComponents: u
+  onChange: l,
+  defaultLocale: i,
+  allComponents: c
 }) {
   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(
-      _e,
+  const b = me({ variant: "popper" }), { locale: a } = N(), u = typeof (e == null ? void 0 : e.componentId) == "string" ? (k = c[e.componentId]) == null ? void 0 : k.data : void 0;
+  return u ? /* @__PURE__ */ S(J, { children: [
+    /* @__PURE__ */ t(A, { sx: { minWidth: 0 }, disabled: !u, ...fe(b), children: /* @__PURE__ */ t(at, { fontSize: "small" }) }),
+    /* @__PURE__ */ t(
+      Ze,
       {
-        ...Xe(v),
+        ...pt(b),
         sx: {
           zIndex: 1e3
         },
-        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,
+        children: /* @__PURE__ */ t(nt, { onClickAway: b.close, children: /* @__PURE__ */ t(re, { children: /* @__PURE__ */ S(O, { width: 500, p: 2, children: [
+          /* @__PURE__ */ t(K, { variant: "subtitle1", children: "Parameters" }),
+          /* @__PURE__ */ t(j, { gap: 1, children: (u == null ? void 0 : u.properties) && T(Object.values(u.properties), "index").map(({ data: h }) => {
+            var g, y, o, p, s, d, m, w;
+            return /* @__PURE__ */ t(O, { children: /* @__PURE__ */ t(
+              B,
               {
-                allComponents: u,
-                defaultLocale: n,
+                allComponents: c,
+                defaultLocale: i,
                 size: "small",
                 fullWidth: !0,
-                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) => {
+                component: u,
+                property: h,
+                valueImmutable: ee((y = (g = e.properties) == null ? void 0 : g[h.id]) == null ? void 0 : y.value),
+                value: ((p = (o = e.properties) == null ? void 0 : o[h.id]) == null ? void 0 : p.value) ?? ((d = (s = h.locales) == null ? void 0 : s[a]) == null ? void 0 : d.defaultValue) ?? ((w = (m = h.locales) == null ? void 0 : m[i]) == null ? void 0 : w.defaultValue),
+                onChange: (n) => {
                   if (r) {
-                    const d = JSON.parse(JSON.stringify(t));
-                    i == null || i({ ...d, properties: { ...d.properties, [l.id]: { value: b } } });
+                    const v = JSON.parse(JSON.stringify(e));
+                    l == null || l({ ...v, properties: { ...v.properties, [h.id]: { value: n } } });
                   } else
-                    _(a).doc.transact(() => {
-                      t.properties ?? (t.properties = {}), t.properties[l.id] = { value: b };
+                    M(u).doc.transact(() => {
+                      e.properties ?? (e.properties = {}), e.properties[h.id] = { value: n };
                     });
                 }
               }
-            ) }, l.id);
+            ) }, h.id);
           }) })
         ] }) }) })
       }
     )
   ] }) : null;
 }
-function et({
-  type: t = "properties",
+function vt({
+  type: e = "properties",
   component: r,
-  ...i
+  ...l
 }) {
-  var f, p, x;
-  const { t: n } = j(), {
+  var y, o, p;
+  const { t: i } = N(), {
     state: {
-      components: u,
-      supportedLocales: v,
-      config: { defaultLocale: c }
+      components: c,
+      supportedLocales: b,
+      config: { defaultLocale: a }
     }
-  } = 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(
-            O,
+  } = ue(), u = xe(), k = M(r).doc, h = e === "properties" ? r.properties : e === "parameters" && ((y = r.renderer) == null ? void 0 : y.type) === "component" ? (o = c[r.renderer.componentId]) == null ? void 0 : o.data.properties : void 0, g = ((p = r.renderer) == null ? void 0 : p.type) === "component" ? r : void 0;
+  return /* @__PURE__ */ S(we, { ...l, fullWidth: !0, maxWidth: "lg", children: [
+    /* @__PURE__ */ t(qe, { children: i("i18nEditorTitle") }),
+    /* @__PURE__ */ t(Le, { children: h && /* @__PURE__ */ t(j, { children: /* @__PURE__ */ S($e, { stickyHeader: !0, sx: { td: { verticalAlign: "top" } }, children: [
+      /* @__PURE__ */ t(Me, { children: /* @__PURE__ */ t(se, { children: b.map(({ locale: s, name: d }) => /* @__PURE__ */ S(ce, { children: [
+        d,
+        a === s && /* @__PURE__ */ t(cr, { sx: { fontSize: 12, color: "text.secondary" } })
+      ] }, s)) }) }),
+      /* @__PURE__ */ t(He, { children: T(Object.values(h), "index").map(({ data: s }) => /* @__PURE__ */ t(se, { children: b.map(({ locale: d }) => {
+        var m, w, n, v, x, I, f, P, z, R, C, E, U, H, ie, Y, G, q, L, Q, Oe, je, ze, Re, De, Ne;
+        return /* @__PURE__ */ t(ce, { children: /* @__PURE__ */ t(j, { gap: 1, children: e === "properties" ? /* @__PURE__ */ S(J, { children: [
+          /* @__PURE__ */ t(
+            D,
             {
               size: "small",
               label: "Key",
-              value: o.key || "",
-              onChange: (B) => {
+              value: s.key || "",
+              onChange: (_) => {
                 k.transact(() => {
-                  o.key = B.target.value.trim();
+                  s.key = _.target.value.trim();
                 });
               }
             }
           ),
-          /* @__PURE__ */ e(
-            O,
+          /* @__PURE__ */ t(
+            D,
             {
               size: "small",
-              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) => {
+              label: i("label"),
+              value: (((w = (m = s.locales) == null ? void 0 : m[d]) == null ? void 0 : w.name) ?? ((v = (n = s.locales) == null ? void 0 : n[a]) == null ? void 0 : v.name)) || "",
+              onChange: (_) => {
                 k.transact(() => {
-                  var N;
-                  o.locales ?? (o.locales = {}), (N = o.locales)[s] ?? (N[s] = {}), o.locales[s].name = B.target.value;
+                  var W;
+                  s.locales ?? (s.locales = {}), (W = s.locales)[d] ?? (W[d] = {}), s.locales[d].name = _.target.value;
                 });
               }
             }
           ),
-          /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e(
-            W,
+          /* @__PURE__ */ t(O, { children: /* @__PURE__ */ t(
+            B,
             {
-              allComponents: a,
-              defaultLocale: c,
+              allComponents: u,
+              defaultLocale: a,
               component: r,
-              property: o,
+              property: s,
               size: "small",
               fullWidth: !0,
               label: "Default Value",
-              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) => {
+              valueImmutable: ee((I = (x = s.locales) == null ? void 0 : x[d]) == null ? void 0 : I.defaultValue),
+              value: ((P = (f = s.locales) == null ? void 0 : f[d]) == null ? void 0 : P.defaultValue) ?? ((R = (z = s.locales) == null ? void 0 : z[a]) == null ? void 0 : R.defaultValue),
+              onChange: (_) => {
                 k.transact(() => {
-                  var N;
-                  o.locales ?? (o.locales = {}), (N = o.locales)[s] ?? (N[s] = {}), o.locales[s].defaultValue = B;
+                  var W;
+                  s.locales ?? (s.locales = {}), (W = s.locales)[d] ?? (W[d] = {}), s.locales[d].defaultValue = _;
                 });
               }
             }
           ) })
-        ] }) : t === "parameters" && y ? /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e(
-          W,
+        ] }) : e === "parameters" && g ? /* @__PURE__ */ t(O, { children: /* @__PURE__ */ t(
+          B,
           {
-            allComponents: a,
-            defaultLocale: c,
+            allComponents: u,
+            defaultLocale: a,
             component: r,
-            property: o,
+            property: s,
             size: "small",
             fullWidth: !0,
-            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
+            valueImmutable: ee(
+              (H = (U = (E = (C = g.renderer.properties) == null ? void 0 : C[s.id]) == null ? void 0 : E.locales) == null ? void 0 : U[d]) == null ? void 0 : H.value
             ),
-            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) => {
+            value: ((q = (G = (Y = (ie = g.renderer.properties) == null ? void 0 : ie[s.id]) == null ? void 0 : Y.locales) == null ? void 0 : G[d]) == null ? void 0 : q.value) ?? ((je = (Oe = (Q = (L = g.renderer.properties) == null ? void 0 : L[s.id]) == null ? void 0 : Q.locales) == null ? void 0 : Oe[a]) == null ? void 0 : je.value) ?? ((Re = (ze = s.locales) == null ? void 0 : ze[d]) == null ? void 0 : Re.defaultValue) ?? ((Ne = (De = s.locales) == null ? void 0 : De[a]) == null ? void 0 : Ne.defaultValue),
+            onChange: (_) => {
               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;
+                var W, Ae, Ce, Ve, Te;
+                (W = g.renderer).properties ?? (W.properties = {}), (Ae = g.renderer.properties)[Ce = s.id] ?? (Ae[Ce] = {}), (Ve = g.renderer.properties[s.id]).locales ?? (Ve.locales = {}), (Te = g.renderer.properties[s.id].locales)[d] ?? (Te[d] = {}), g.renderer.properties[s.id].locales[d].value = _;
               });
             }
           }
-        ) }) : null }, o.id) }, s);
-      }) }, o.id)) })
+        ) }) : null }, s.id) }, d);
+      }) }, s.id)) })
     ] }) }) }),
-    /* @__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") }) })
+    /* @__PURE__ */ t(Qe, { children: /* @__PURE__ */ t(A, { onClick: (s) => {
+      var d;
+      return (d = l.onClose) == null ? void 0 : d.call(l, s, "escapeKeyDown");
+    }, children: i("close") }) })
+  ] });
+}
+const Ke = (e, r) => (l) => {
+  const i = [
+    l.palette.primary.main,
+    l.palette.secondary.main,
+    l.palette.success.main,
+    l.palette.warning.main,
+    l.palette.info.main
+  ], c = e % i.length, b = i[c % i.length], a = We(b, 0.5), u = We(b, 1);
+  return {
+    // 保留原有的边框样式
+    borderColor: `${a} !important`,
+    borderLeft: "3px solid !important",
+    // 稍粗的左侧边框
+    borderLeftColor: a,
+    // 使用透明度适应深色/浅色模式
+    color: u,
+    ...r
+  };
+};
+function Br({
+  property: e,
+  onChange: r,
+  defaultLocale: l,
+  allComponents: i
+}) {
+  const { t: c, locale: b } = N(), a = F(null), u = Tr(a), k = V(() => {
+    if (!(e.type !== "json" && e.type !== "yaml" && e.type !== "array") && e.subProperties)
+      try {
+        const h = {};
+        T(Object.values(e.subProperties), "index").filter(
+          (o) => o.data.visible !== !1 && o.data.key
+        ).forEach(({ data: o }) => {
+          var s, d, m, w;
+          if (!o.key) return;
+          let p = ((d = (s = o.locales) == null ? void 0 : s[b]) == null ? void 0 : d.defaultValue) ?? ((w = (m = o.locales) == null ? void 0 : m[l]) == null ? void 0 : w.defaultValue);
+          if (o.type === "number")
+            p = Number(p);
+          else if (o.type === "boolean")
+            p = p === !0 || p === "true";
+          else if ((o.type === "json" || o.type === "yaml") && typeof p == "string")
+            try {
+              o.type === "json" ? p = JSON.parse(p) : p = ae.parse(p);
+            } catch (n) {
+              console.error("Error parsing nested value", p, n), p = {};
+            }
+          h[o.key] = p;
+        });
+        const y = ft(h, e.type);
+        r == null || r(y);
+      } catch (h) {
+        console.error("Error converting structure to text:", h);
+      }
+  }, [e, b, l, r]);
+  return e.type !== "json" && e.type !== "yaml" && e.type !== "array" ? null : /* @__PURE__ */ S(j, { direction: "column", gap: 1.5, sx: { width: "100%" }, children: [
+    /* @__PURE__ */ t(jt, { sx: { mt: -1 }, children: /* @__PURE__ */ t(K, { variant: "caption", color: "text.secondary", children: c("maker.properties.subProperties") }) }),
+    e.subProperties && Object.keys(e.subProperties).length > 0 ? /* @__PURE__ */ t(
+      ht,
+      {
+        component: j,
+        gap: 2,
+        list: e.subProperties,
+        renderItem: (h, g, y) => {
+          const o = h.visible !== !1;
+          return /* @__PURE__ */ t(
+            re,
+            {
+              ref: a,
+              elevation: 0,
+              className: "property-container",
+              sx: {
+                p: 1.25,
+                borderRadius: 1,
+                border: o ? "1px solid" : "1px dashed",
+                "&": Ke(u)
+              },
+              children: /* @__PURE__ */ t(j, { gap: 2, children: /* @__PURE__ */ t(
+                yt,
+                {
+                  data: h,
+                  params: y,
+                  visible: o,
+                  config: {
+                    properties: e.subProperties
+                  },
+                  currentLocale: b,
+                  defaultLocale: l,
+                  allComponents: i,
+                  onUpdateConfig: (p) => {
+                    try {
+                      const s = { properties: e.subProperties || {} };
+                      p(s);
+                      const d = {
+                        ...e,
+                        subProperties: s.properties
+                      };
+                      r == null || r(d, { forceUpdateProperty: !0 }), k();
+                    } catch (s) {
+                      console.error("Error updating property:", s);
+                    }
+                  }
+                }
+              ) })
+            },
+            h.id
+          );
+        }
+      }
+    ) : /* @__PURE__ */ t(te, { style: { fontSize: 12, height: 100 }, children: c("maker.properties.noSubProperties") }),
+    /* @__PURE__ */ t(
+      A,
+      {
+        fullWidth: !0,
+        variant: "outlined",
+        className: "ignore-style-override",
+        size: "small",
+        startIcon: /* @__PURE__ */ t(ct, {}),
+        onClick: () => {
+          try {
+            const h = e.subProperties || {}, g = Je(), o = {
+              index: Object.values(h).length,
+              data: {
+                id: g,
+                key: "",
+                type: "string",
+                visible: !0,
+                locales: {
+                  [b]: {
+                    name: "",
+                    defaultValue: ""
+                  }
+                },
+                // 为嵌套属性预初始化
+                subProperties: {}
+              }
+            }, p = {
+              ...e,
+              subProperties: {
+                ...h,
+                [g]: o
+              }
+            };
+            r == null || r(p, { forceUpdateProperty: !0 }), k();
+          } catch (h) {
+            console.error("Error adding property:", h);
+          }
+        },
+        sx: {
+          "&": Ke(u, {
+            // borderLeft: undefined,
+          })
+        },
+        children: c("maker.properties.addSubProperty")
+      }
+    )
   ] });
 }
-function W({
-  component: t,
+function B({
+  component: e,
   property: r,
-  value: i,
-  onChange: n,
-  valueImmutable: u,
-  defaultLocale: v,
-  allComponents: c,
-  ...a
+  value: l,
+  onChange: i,
+  valueImmutable: c,
+  defaultLocale: b,
+  allComponents: a,
+  ...u
 }) {
-  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);
+  var p, s, d, m, w;
+  const { locale: k } = N(), h = Zt(), g = F(null), y = () => {
+    var v;
+    const n = (v = h == null ? void 0 : h.current) == null ? void 0 : v.getUploader();
+    n == null || n.open(), g.current && n.onceUploadSuccess(({ response: x }) => {
+      var f, P;
+      let I = ((f = x == null ? void 0 : x.data) == null ? void 0 : f.filename) || "";
+      I && (I = `mediakit://${I}`, l && !l.includes("mediakit://") && (I += " # please use < import { getMediaKitAbsoluteUrl } from '@blocklet/pages-kit/builtin/utils' > to get the full address")), (P = g.current) == null || P.call(g, I);
     });
-  }, 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;
+  }, o = u.label || ((s = (p = r.locales) == null ? void 0 : p[k]) == null ? void 0 : s.name) || ((m = (d = r.locales) == null ? void 0 : d[b]) == null ? void 0 : m.name) || r.key || r.id;
   if (r.type === "number")
-    return /* @__PURE__ */ e(
-      br,
+    return /* @__PURE__ */ t(
+      Kr,
       {
-        ...a,
-        label: p,
+        ...u,
+        label: o,
         NumberProps: {
-          value: ["number", "string"].includes(typeof i) ? i : null,
-          onChange: (b, d) => n == null ? void 0 : n(d)
+          value: ["number", "string"].includes(typeof l) ? l : null,
+          onChange: (n, v) => i == null ? void 0 : i(v)
         }
       }
     );
   if (r.type === "decimal")
-    return /* @__PURE__ */ e(
-      O,
+    return /* @__PURE__ */ t(
+      D,
       {
-        ...a,
-        label: p,
+        ...u,
+        label: o,
         type: "text",
-        value: i ?? "",
-        onChange: (b) => {
-          const d = b.target.value;
-          if (d === "" || d === "-") {
-            n == null || n(d);
+        value: l ?? "",
+        onChange: (n) => {
+          const v = n.target.value;
+          if (v === "" || v === "-") {
+            i == null || i(v);
             return;
           }
-          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 (/^-?(?!.*\..*\.)[0-9]*(\.[0-9]{0,9})?$/.test(v)) {
+            let I = v;
+            /^-?[1-9]+[0-9]*(\.[0-9]{1,9})?$/.test(I) && (I = Number(I)), i == null || i(I);
           }
         }
       }
     );
   if (r.type === "boolean")
-    return /* @__PURE__ */ e(
-      Ne,
+    return /* @__PURE__ */ t(
+      Ye,
       {
-        label: p,
+        label: o,
         labelPlacement: "start",
-        control: /* @__PURE__ */ e(Be, { checked: i === !0, onChange: (b, d) => n == null ? void 0 : n(d) })
+        control: /* @__PURE__ */ t(Ge, { checked: l === !0, onChange: (n, v) => i == null ? void 0 : i(v) })
       }
     );
   if (r.type === "color")
-    return /* @__PURE__ */ e(
-      or,
+    return /* @__PURE__ */ t(
+      jr,
       {
-        label: p,
-        value: i,
-        onChange: (b) => {
-          n == null || n(b);
+        label: o,
+        value: l,
+        onChange: (n) => {
+          i == null || i(n);
         }
       }
     );
   if (r.type === "json" || r.type === "yaml")
-    return /* @__PURE__ */ w(
-      D,
+    return /* @__PURE__ */ t(
+      zr,
       {
-        sx: {
-          width: "100%",
-          position: "relative",
-          pt: 1,
-          pb: "6px",
-          px: "1px",
-          minHeight: 50,
-          ".monaco-editor,.overflow-guard": { borderRadius: 1 }
+        label: o,
+        value: l,
+        onChange: (n) => {
+          i == null || i(n);
         },
-        children: [
-          /* @__PURE__ */ e(
-            lt,
-            {
-              sx: {
-                position: "absolute",
-                left: 0,
-                top: 0,
-                transform: "translate(0px, -7px) scale(0.75)"
-              },
-              children: p
-            }
-          ),
-          /* @__PURE__ */ e(
-            Je,
-            {
-              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();
-              }
-            },
-            r.id
-          ),
-          /* @__PURE__ */ e(
-            P,
-            {
-              component: "fieldset",
-              sx: {
-                pointerEvents: "none",
-                position: "absolute",
-                left: 0,
-                top: -5,
-                width: "100%",
-                height: "100%",
-                border: 1,
-                borderColor: "rgba(0, 0, 0, 0.23)",
-                borderRadius: 1,
-                px: 1,
-                py: 0
-              },
-              children: /* @__PURE__ */ e(P, { component: "legend", sx: { fontSize: "0.75em" }, children: /* @__PURE__ */ e(P, { component: "span", sx: { opacity: 0 }, children: a.label }) })
-            }
-          )
-        ]
+        property: r,
+        component: e,
+        defaultLocale: b,
+        allComponents: a,
+        PropertyValueField: B,
+        onUpload: (n) => {
+          g.current = n, y();
+        }
       }
     );
   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,
+    const n = (w = a[r.componentId]) == null ? void 0 : w.data;
+    return n ? /* @__PURE__ */ t(O, { width: "100%", children: /* @__PURE__ */ t(
+      ot,
       {
-        componentId: b.id,
-        props: { label: p, value: i, onChange: n },
+        componentId: n.id,
+        props: { label: o, value: l, onChange: i },
         locale: k,
         dev: {
           mode: "draft",
-          components: c,
-          defaultLocale: v
+          components: a,
+          defaultLocale: b
         }
       }
-    ) }) : /* @__PURE__ */ e(O, { ...a, label: p, disabled: !0, placeholder: "Click right button select a component" });
+    ) }) : /* @__PURE__ */ t(D, { ...u, label: o, disabled: !0, placeholder: "Click right button select a component" });
   }
   if (r.type === "component")
-    return /* @__PURE__ */ w(D, { width: "100%", direction: "row", gap: 1, children: [
-      /* @__PURE__ */ e(P, { flex: 1, children: /* @__PURE__ */ e(
-        ye,
+    return /* @__PURE__ */ S(j, { width: "100%", direction: "row", gap: 1, children: [
+      /* @__PURE__ */ t(O, { flex: 1, children: /* @__PURE__ */ t(
+        Se,
         {
-          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);
+          allComponents: a,
+          label: o,
+          value: l == null ? void 0 : l.componentId,
+          onChange: (n, v) => {
+            c || !l ? i == null || i({ ...l && JSON.parse(JSON.stringify(l)), componentId: v }) : typeof l == "object" && (l.componentId = v);
           }
         }
       ) }),
-      /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e(
-        fr,
+      /* @__PURE__ */ t(O, { children: /* @__PURE__ */ t(
+        Wr,
         {
-          value: i,
-          valueImmutable: u,
-          onChange: n,
-          defaultLocale: v,
-          allComponents: c
+          value: l,
+          valueImmutable: c,
+          onChange: i,
+          defaultLocale: b,
+          allComponents: a
         }
       ) })
     ] });
   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(
-      O,
+    const n = r.type === "string" ? r.multiline : void 0, v = r.type === "url" ? l == null ? void 0 : l.url : l;
+    return /* @__PURE__ */ t(
+      D,
       {
-        ...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
+        ...u,
+        label: o,
+        value: typeof v == "string" ? v : "",
+        multiline: n,
+        minRows: n ? 2 : void 0,
+        maxRows: n ? 10 : void 0,
+        onChange: (x) => i == null ? void 0 : i(
+          r.type === "url" ? { ...l, url: x.target.value, mediaKitUrl: x.target.value } : x.target.value
         ),
         InputProps: r.type === "url" ? {
           sx: { pr: 0 },
-          endAdornment: /* @__PURE__ */ w(oe, { position: "end", children: [
-            /* @__PURE__ */ e(
-              fe,
+          endAdornment: /* @__PURE__ */ S(pe, { position: "end", children: [
+            /* @__PURE__ */ t(
+              Pe,
               {
-                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(() => {
+                onChange: async ({ response: x }) => {
+                  var z, R, C;
+                  const I = ((z = x == null ? void 0 : x.data) == null ? void 0 : z.url) || ((R = x == null ? void 0 : x.data) == null ? void 0 : R.fileUrl);
+                  let f;
+                  I && (f = await be(I).catch(() => ye(I)).catch(() => {
                   }));
-                  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: S == null ? void 0 : S.naturalWidth,
-                    height: S == null ? void 0 : S.naturalHeight
+                  let P = ((C = x == null ? void 0 : x.data) == null ? void 0 : C.filename) || "";
+                  P && (P = `mediakit://${P}`), i == null || i({
+                    url: I,
+                    mediaKitUrl: P,
+                    width: f == null ? void 0 : f.naturalWidth,
+                    height: f == null ? void 0 : f.naturalHeight
                   });
                 }
               }
             ),
-            /* @__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" }) })
+            /* @__PURE__ */ t(X, { 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__ */ t(dt, { sx: { cursor: "default" }, fontSize: "small" }) })
           ] })
         } : void 0
       }
     );
   }
-  return console.error("Unsupported property type", r.type), null;
+  return r.type === "array" ? /* @__PURE__ */ t(
+    kr,
+    {
+      label: o,
+      value: Array.isArray(l) ? l : [],
+      onChange: (n) => i == null ? void 0 : i(n),
+      property: r,
+      renderItem: ({ item: n, index: v, onChange: x }) => r.subProperties && Object.keys(r.subProperties).length > 0 ? /* @__PURE__ */ t(j, { gap: 1, width: "100%", children: T(Object.values(r.subProperties), "index").filter((I) => I.data.visible !== !1).map(({ data: I }) => I.key ? /* @__PURE__ */ t(
+        B,
+        {
+          component: e,
+          property: I,
+          value: n[I.key],
+          onChange: (f) => {
+            const P = { ...n, [I.key]: f };
+            x(P);
+          },
+          size: "small",
+          fullWidth: !0,
+          defaultLocale: b,
+          allComponents: a
+        },
+        I.id
+      ) : null) }, v) : /* @__PURE__ */ t(D, { size: u.size, fullWidth: !0, value: n, onChange: (I) => x(I.target.value) })
+    }
+  ) : (console.error("Unsupported property type", r.type), null);
 }
-function br({
-  NumberProps: t,
+function Kr({
+  NumberProps: e,
   ...r
 }) {
-  const { getInputProps: i } = Et(t), n = i();
-  return /* @__PURE__ */ e(O, { ...r, inputProps: n });
+  const { getInputProps: l } = ir(e), i = l();
+  return /* @__PURE__ */ t(D, { ...r, inputProps: i });
 }
-const yr = `import React from '@blocklet/pages-kit/builtin/react'
+const _r = `import React from '@blocklet/pages-kit/builtin/react'
 import { Box } from '@blocklet/pages-kit/builtin/mui/material'
 
 export default function () {
@@ -1219,227 +1876,227 @@ export default function () {
       Hello World
     </Box>
   )
-}`, vr = `console.log('hello')
+}`, Fr = `console.log('hello')
 `;
-function xr({
-  value: t
+function Jr({
+  value: e
 }) {
-  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,
+  const { locale: r } = N(), l = rt(), i = M(e).doc;
+  return $(() => {
+    var c;
+    (c = e.renderer) != null && c.script || (i.transact(() => {
+      e.renderer.script = e.renderer.type === "react-component" ? _r : Fr;
+    }), l());
+  }, [e]), /* @__PURE__ */ t(O, { sx: { border: 1, borderColor: "divider", borderRadius: 1, overflow: "hidden" }, children: /* @__PURE__ */ t(
+    ge,
     {
-      keyId: t.id,
+      keyId: e.id,
       locale: r,
       language: "typescript",
-      value: t.renderer.script || "",
-      onChange: (u) => t.renderer.script = u,
+      value: e.renderer.script || "",
+      onChange: (c) => e.renderer.script = c,
       typeScriptNoValidation: !1
     },
-    t.id
+    e.id
   ) });
 }
-function gr({ value: t }) {
-  var y, f, p;
-  const { t: r } = j(), i = _(t).doc, {
+function $r({ value: e }) {
+  var g, y, o;
+  const { t: r } = N(), l = M(e).doc, {
     state: {
-      components: n,
-      config: { defaultLocale: u },
-      resources: v
+      components: i,
+      config: { defaultLocale: c },
+      resources: b
     },
-    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(
-      ye,
+    localState: { currentLocale: a }
+  } = ue(), u = xe(), k = ((g = i[e.renderer.componentId]) == null ? void 0 : g.data) ?? ((o = (y = b.components) == null ? void 0 : y[e.renderer.componentId]) == null ? void 0 : o.component), h = me({ variant: "dialog" });
+  return /* @__PURE__ */ S(j, { gap: 1, children: [
+    /* @__PURE__ */ t(
+      Se,
       {
-        allComponents: a,
-        excludes: [t.id],
-        value: t.renderer.componentId,
-        onChange: (x, o) => t.renderer.componentId = o
+        allComponents: u,
+        excludes: [e.id],
+        value: e.renderer.componentId,
+        onChange: (p, s) => e.renderer.componentId = s
       }
     ),
-    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" }) })
+    k && /* @__PURE__ */ S(J, { children: [
+      /* @__PURE__ */ S(j, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ t(K, { variant: "subtitle2", children: r("parameters") }),
+        /* @__PURE__ */ t(A, { sx: { minWidth: 32, minHeight: 32, p: 0 }, ...fe(h), children: /* @__PURE__ */ t(st, { fontSize: "small" }) })
       ] }),
-      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,
+      k.properties && T(Object.values(k.properties), "index").map(({ data: p }) => {
+        var s, d, m, w, n, v, x, I, f, P, z, R, C, E, U, H;
+        return /* @__PURE__ */ t(O, { children: /* @__PURE__ */ t(
+          B,
           {
-            allComponents: a,
-            defaultLocale: u,
+            allComponents: u,
+            defaultLocale: c,
             component: k,
-            property: x,
+            property: p,
             fullWidth: !0,
             size: "small",
-            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;
+            valueImmutable: ee((w = (m = (d = (s = e.renderer.properties) == null ? void 0 : s[p.id]) == null ? void 0 : d.locales) == null ? void 0 : m[a]) == null ? void 0 : w.value),
+            value: ((I = (x = (v = (n = e.renderer.properties) == null ? void 0 : n[p.id]) == null ? void 0 : v.locales) == null ? void 0 : x[a]) == null ? void 0 : I.value) ?? ((R = (z = (P = (f = e.renderer.properties) == null ? void 0 : f[p.id]) == null ? void 0 : P.locales) == null ? void 0 : z[c]) == null ? void 0 : R.value) ?? ((E = (C = p.locales) == null ? void 0 : C[a]) == null ? void 0 : E.defaultValue) ?? ((H = (U = p.locales) == null ? void 0 : U[c]) == null ? void 0 : H.defaultValue),
+            onChange: (ie) => {
+              l.transact(() => {
+                var Y, G, q, L, Q;
+                (Y = e.renderer).properties ?? (Y.properties = {}), (G = e.renderer.properties)[q = p.id] ?? (G[q] = {}), (L = e.renderer.properties[p.id]).locales ?? (L.locales = {}), (Q = e.renderer.properties[p.id].locales)[a] ?? (Q[a] = {}), e.renderer.properties[p.id].locales[a].value = ie;
               });
             }
           }
-        ) }, x.id);
+        ) }, p.id);
       }),
-      /* @__PURE__ */ e(et, { ...Qe(l), component: t, type: "parameters" })
+      /* @__PURE__ */ t(vt, { ...ut(h), component: e, type: "parameters" })
     ] })
   ] });
 }
-function ye({
-  label: t,
+function Se({
+  label: e,
   options: r,
-  excludes: i,
-  value: n,
-  onChange: u,
-  allComponents: v,
-  ...c
+  excludes: l,
+  value: i,
+  onChange: c,
+  allComponents: b,
+  ...a
 }) {
-  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(
-    Fe,
+  var g;
+  const { t: u } = N(), k = r ?? T(Object.values(mr(b, ...l ?? [])), "index").map((y) => y.data), h = (typeof i == "string" ? (g = b[i]) == null ? void 0 : g.data : void 0) ?? null;
+  return /* @__PURE__ */ t(
+    Xe,
     {
-      ...c,
+      ...a,
       size: "small",
       options: k,
       autoHighlight: !0,
-      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);
+      isOptionEqualToValue: (y, o) => y.id === o.id,
+      getOptionKey: (y) => y.id,
+      getOptionLabel: (y) => y.name || y.id,
+      renderInput: (y) => /* @__PURE__ */ t(D, { label: e || u("component"), ...y }),
+      value: h,
+      onChange: (y, o) => {
+        var s, d, m, w, n, v;
+        let p = {};
+        o && (p = {
+          blockletId: (s = b[o == null ? void 0 : o.id]) == null ? void 0 : s.blockletId,
+          blockletTitle: (d = b[o == null ? void 0 : o.id]) == null ? void 0 : d.blockletTitle,
+          componentName: ((w = (m = b[o == null ? void 0 : o.id]) == null ? void 0 : m.data) == null ? void 0 : w.name) || ((v = (n = b[o == null ? void 0 : o.id]) == null ? void 0 : n.data) == null ? void 0 : v.id)
+        }), c == null || c(y, o == null ? void 0 : o.id, p);
       }
     }
   );
 }
-function kr({
-  config: t,
+function Mr({
+  config: e,
   allComponents: r,
-  defaultLocale: i,
-  propertiesValue: n,
-  currentLocale: u,
-  onChange: v,
-  props: c
+  defaultLocale: l,
+  propertiesValue: i,
+  currentLocale: c,
+  onChange: b,
+  props: a
 }) {
-  const { t: a } = j(), [k, l] = ie(t == null ? void 0 : t.properties), [y, f] = ie(null);
-  X(() => {
+  const { t: u } = N(), [k, h] = Z(e == null ? void 0 : e.properties), [g, y] = Z(null);
+  $(() => {
     (() => {
-      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);
+      var w, n;
+      ((w = e == null ? void 0 : e.renderer) == null ? void 0 : w.type) === "react-component" && it(e == null ? void 0 : e.properties) ? tr((n = e == null ? void 0 : e.renderer) == null ? void 0 : n.script).then((v) => {
+        const x = rr(v);
+        h(x);
+      }) : h(e == null ? void 0 : e.properties);
     })();
-  }, [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;
+  }, [JSON.stringify(e)]);
+  const o = V(() => !e || !k ? {} : Object.values(k).reduce(
+    (m, { data: w }) => {
+      var v, x, I, f, P;
+      const n = w.key || w.id;
+      return m[w.id] = {
+        key: n,
+        value: (a == null ? void 0 : a[n]) ?? ((v = i == null ? void 0 : i[w.id]) == null ? void 0 : v.value) ?? ((I = (x = w.locales) == null ? void 0 : x[c]) == null ? void 0 : I.defaultValue) ?? ((P = (f = w.locales) == null ? void 0 : f[l]) == null ? void 0 : P.defaultValue),
+        id: w.id,
+        type: w.type
+      }, m;
     },
     {}
-  ), [JSON.stringify(k), t, n, u, i]), x = pt(() => {
+  ), [JSON.stringify(k), e, i, c, l]), p = de(() => {
     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);
+    const m = T(Object.values(k), "index"), w = m.filter(({ data: x }) => x.key && bt(k, x.id)), n = m.filter(({ data: x }) => x.key), v = n.map(({ data: x }) => x.key);
     return {
-      canUseProperties: b,
-      visibleProperties: I,
-      canUsePropertiesKeys: d
+      canUseProperties: n,
+      visibleProperties: w,
+      canUsePropertiesKeys: v
     };
-  }, [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,
+  }, [JSON.stringify(k)]), s = o(), d = pr(s, "key");
+  return /* @__PURE__ */ t(Ie, { children: /* @__PURE__ */ S(j, { gap: 2, children: [
+    /* @__PURE__ */ t(K, { variant: "subtitle1", children: u("maker.properties.parameters") }),
+    !e || p.canUsePropertiesKeys.length === 0 ? /* @__PURE__ */ t(te, { style: { fontSize: 12 }, children: u("maker.properties.noParameters") }) : /* @__PURE__ */ S(J, { children: [
+      /* @__PURE__ */ t(j, { gap: 2, children: p.visibleProperties.map(({ data: m }) => {
+        var w, n;
+        return /* @__PURE__ */ t(O, { children: /* @__PURE__ */ t(
+          B,
           {
             allComponents: r,
-            defaultLocale: i,
+            defaultLocale: l,
             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)),
+            component: e,
+            property: m,
+            valueImmutable: ee((w = i == null ? void 0 : i[m.id]) == null ? void 0 : w.value),
+            value: (a == null ? void 0 : a[m.key || m.id]) ?? ((n = s[m.id]) == null ? void 0 : n.value),
+            onChange: (v) => {
+              b({
+                path: ["properties", m.id],
+                value: { value: v },
+                shouldSync: !(!m.type || Be.includes(m.type)),
                 excludeKeys: [],
-                key: g.key || g.id
+                key: m.key || m.id
               });
             }
           }
-        ) }, g.id);
+        ) }, m.id);
       }) }),
-      /* @__PURE__ */ e(D, { gap: 2, sx: { width: "100%" }, children: /* @__PURE__ */ e(
-        Me,
+      /* @__PURE__ */ t(j, { gap: 2, sx: { width: "100%" }, children: /* @__PURE__ */ t(
+        ot,
         {
-          componentId: (t == null ? void 0 : t.id) || "",
+          componentId: (e == null ? void 0 : e.id) || "",
           renderType: "setting",
-          locale: u,
-          properties: o,
-          dev: { mode: "draft", components: r, defaultLocale: i },
+          locale: c,
+          properties: s,
+          dev: { mode: "draft", components: r, defaultLocale: l },
           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)),
+            ...fr(a ?? {}, p.canUsePropertiesKeys),
+            onChange: (m) => {
+              const { canUsePropertiesKeys: w } = p;
+              Object.keys(m).filter((v) => {
+                var x;
+                return m[v] !== ((x = d == null ? void 0 : d[v]) == null ? void 0 : x.value);
+              }).filter((v) => !(v === "locale" && !ar(d[v], "locale"))).reduce((v, x) => v.then(() => {
+                const I = d[x], f = w.includes(x);
+                if (I != null && I.id && f)
+                  return b({
+                    path: ["properties", I.id],
+                    value: { value: m[x] },
+                    shouldSync: !(!I.type || Be.includes(I.type)),
                     excludeKeys: [],
-                    key: m.key || m.id
+                    key: I.key || I.id
                   }), Promise.resolve();
-                const C = `propertyNotFound${h}`;
-                if (y === C)
+                const P = `propertyNotFound${x}`;
+                if (g === P)
                   return Promise.resolve();
-                je.close(y);
-                const z = je.warning(
-                  a("maker.properties.propertyNotFound", {
-                    key: h
+                Ue.close(g);
+                const z = Ue.warning(
+                  u("maker.properties.propertyNotFound", {
+                    key: x
                   }),
                   {
-                    key: C
+                    key: P
                   }
                 );
-                return f(z), Promise.resolve();
+                return y(z), Promise.resolve();
               }), Promise.resolve());
             }
           }
@@ -1449,12 +2106,12 @@ function kr({
   ] }) });
 }
 export {
-  pr as BasicInfo,
-  ye as CustomComponentAutocomplete,
-  Zr as CustomComponentSettings,
-  yr as DefaultReactComponentScriptTemplate,
-  vr as DefaultWebComponentScriptTemplate,
-  kr as ParametersConfig,
-  mr as PropertiesConfig,
-  W as PropertyValueField
+  Vr as BasicInfo,
+  Se as CustomComponentAutocomplete,
+  Vi as CustomComponentSettings,
+  _r as DefaultReactComponentScriptTemplate,
+  Fr as DefaultWebComponentScriptTemplate,
+  Mr as ParametersConfig,
+  Er as PropertiesConfig,
+  B as PropertyValueField
 };