@blocklet/pages-kit-inner-components 0.4.141 → 0.4.143

package/lib/es/setting.js

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