@blocklet/pages-kit-inner-components 0.6.51 → 0.6.52

package/lib/es/add-component.js

@@ -1,24 +1,26 @@
-import { jsx as t, jsxs as y } from "react/jsx-runtime";
-import { i as G, a as j, h as J, j as Z, k as ee, f as oe } from "./chunks/state-DRjnlQY_.js";
-import W from "@arcblock/ux/lib/Empty";
-import { useLocaleContext as F } from "@arcblock/ux/lib/Locale/context";
-import { Icon as P } from "@iconify-icon/react";
-import te from "@mui/icons-material/Check";
-import { Box as n, styled as H, Dialog as re, DialogTitle as ie, TextField as ne, IconButton as ae, DialogContent as se, Tabs as le, Tab as pe, Grid as N, Card as de, CardMedia as ce, CardContent as me, Typography as V, DialogActions as ue, Button as $, Skeleton as fe } from "@mui/material";
-import { useReactive as Q } from "ahooks";
-import { createContext as L, useMemo as M, useEffect as A, useRef as S } from "react";
-import { c as be, T as he, I as ge, B as xe } from "./chunks/index-NQgjITtC.js";
+import { jsx as r, jsxs as y } from "react/jsx-runtime";
+import { i as j, a as G, h as q, j as J, k as Z, f as ee } from "./chunks/state-DdT-7UdS.js";
+import $ from "@arcblock/ux/lib/Empty";
+import { useLocaleContext as H } from "@arcblock/ux/lib/Locale/context";
+import { Icon as L } from "@iconify-icon/react";
+import oe from "@mui/icons-material/Check";
+import { Box as n, styled as F, alpha as te, Dialog as re, DialogTitle as ie, TextField as ne, IconButton as ae, DialogContent as se, Tabs as le, Tab as pe, Grid as P, Card as de, CardMedia as ce, CardContent as me, Typography as W, DialogActions as ue, Button as N, Skeleton as fe } from "@mui/material";
+import { useReactive as V } from "ahooks";
+import { createContext as A, useMemo as M, useEffect as E, useRef as S } from "react";
+import { c as be, T as ge, I as xe, B as he } from "./chunks/index-ni6tn8EL.js";
 import { styled as m } from "@arcblock/ux/lib/Theme";
 import "@blocklet/pages-kit/builtin/color-picker";
 import "@blocklet/pages-kit/utils/style";
 import "@emotion/css";
 import "lodash/without";
-import { red as ye, pink as ve, purple as Ce, indigo as we, blue as ke, cyan as Te, teal as Ie, green as ze, lime as Re, yellow as Se, amber as Me, orange as _e, brown as Ee, grey as Ae, blueGrey as Le } from "@mui/material/colors";
+import { red as ye, pink as Ce, purple as ve, indigo as ke, blue as we, cyan as Ie, teal as Te, green as Re, lime as ze, yellow as Se, amber as Me, orange as _e, brown as Ee, grey as Ae, blueGrey as Oe } from "@mui/material/colors";
 import "@blocklet/pages-kit/builtin/uploader";
 import "react-use";
 import "lodash/cloneDeep";
+import "@dnd-kit/core";
+import "@dnd-kit/sortable";
 import "@mui/icons-material";
-import "react-dnd";
+import "@dnd-kit/utilities";
 import "@mui/lab";
 import "immer";
 import "lodash/omit";
@@ -28,7 +30,7 @@ import "is-uri";
 import "@arcblock/ux/lib/Toast";
 import "@mui/material/Tooltip";
 import "@mui/icons-material/KeyboardArrowLeft";
-import Oe from "@mui/material/Box";
+import Le from "@mui/material/Box";
 import "@mui/material/DialogTitle";
 import "@mui/material/IconButton";
 import "@mui/material/Dialog";
@@ -42,15 +44,15 @@ import "lodash/isEmpty";
 import "yaml";
 import "@mui/material/Typography";
 import "joi";
-import { createStatusApi as U, createTextCompletionApi as Ne } from "@blocklet/aigne-hub/api";
-import { createFetch as $e } from "@blocklet/js-sdk";
+import { createStatusApi as Q, createTextCompletionApi as Ne } from "@blocklet/aigne-hub/api";
+import { createFetch as Be } from "@blocklet/js-sdk";
 import "@mui/x-date-pickers";
 import "@mui/x-date-pickers/AdapterDayjs";
 import "@mui/x-date-pickers/LocalizationProvider";
 import "circular-natal-horoscope-js/dist";
-import X from "dayjs";
+import U from "dayjs";
 import De from "dayjs/plugin/timezone";
-import Be from "dayjs/plugin/utc";
+import je from "dayjs/plugin/utc";
 import "fast-deep-equal";
 import "lodash/isNil";
 import "tz-lookup";
@@ -58,13 +60,13 @@ import "@mui/icons-material/CheckCircleOutline";
 import "lodash/uniq";
 import "lodash/get";
 import "lodash/set";
-import { nextId as Y } from "@blocklet/pages-kit/utils/common";
+import { nextId as X } from "@blocklet/pages-kit/utils/common";
 import { CustomComponentRenderer as Ge } from "@blocklet/pages-kit/components";
-ye[300], ve[300], Ce[300], // deepPurple['300'],
-we[300], ke[300], // lightBlue['300'],
-Te[300], Ie[300], ze[300], // lightGreen['300'],
-Re[300], Se[300], Me[300], _e[300], // deepOrange['300'],
-Ee[300], Ae[300], Le[300];
+ye[300], Ce[300], ve[300], // deepPurple['300'],
+ke[300], we[300], // lightBlue['300'],
+Ie[300], Te[300], Re[300], // lightGreen['300'],
+ze[300], Se[300], Me[300], _e[300], // deepOrange['300'],
+Ee[300], Ae[300], Oe[300];
 m(n)`
   .color-item {
     position: relative;
@@ -86,100 +88,124 @@ m(n)`
     right: 0;
   }
 `;
-const E = 0.5;
-H(n)`
-  display: flex;
-  align-items: center;
-  padding: 8px;
-  border-bottom: ${({ theme: i }) => `1px solid ${i.palette.divider}`};
-  user-select: none;
-  cursor: pointer;
-  position: relative;
-
-  :hover {
-    background-color: rgba(200, 200, 200, 0.3);
-  }
-
-  &.selected {
-    background-color: rgba(200, 200, 200, 0.3);
-  }
-
-  &.sub-selected {
-    background-color: rgba(200, 200, 200, 0.3);
-  }
-
-  &.disabledDrag {
-    cursor: default;
-  }
-
-  > .drag,
-  > .actions {
-    line-height: 1;
-
-    svg {
-      font-size: 16px;
-      vertical-align: middle;
+F(n)(({ theme: e }) => ({
+  display: "flex",
+  alignItems: "center",
+  padding: "8px",
+  borderBottom: `1px solid ${e.palette.divider}`,
+  userSelect: "none",
+  cursor: "pointer",
+  position: "relative",
+  "&:hover": {
+    backgroundColor: "rgba(200, 200, 200, 0.3)",
+    "& .actions": {
+      opacity: 1
     }
-  }
-
-  > .drag {
-    cursor: grab;
-    opacity: ${E};
-    position: relative;
-
-    &.disabledDrag {
-      cursor: default;
-
-      &:has(.origin-drag-icon):after {
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 120%;
-        height: 1px;
-        background-color: ${({ theme: i }) => i.palette.error.main};
-        transform: translate(-50%, -50%) rotate(-45deg);
-        z-index: 1;
-      }
-    }
-  }
-
-  > .actions {
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-
-    > * {
-      margin-right: 0.5em;
-      opacity: 0;
-      display: inline-block;
-      cursor: pointer;
+  },
+  "&.selected": {
+    backgroundColor: "rgba(200, 200, 200, 0.3)"
+  },
+  "&.sub-selected": {
+    backgroundColor: "rgba(200, 200, 200, 0.3)"
+  },
+  "&.section-hidden": {
+    "& .drag-handle, & .content": {
+      color: e.palette.text.disabled
     }
-
-    > .visible {
-      display: inline-block;
-      opacity: ${E};
+  },
+  "&.dragging": {
+    opacity: 0.4,
+    zIndex: 1e3
+    // filter: 'blur(0.5px)',
+  },
+  // Pre-embedded drop indicator lines - controlled by CSS classes
+  "&.drop-target-top::before": {
+    content: '""',
+    position: "absolute",
+    top: -2,
+    left: 0,
+    right: 0,
+    height: 2,
+    backgroundColor: e.palette.primary.main,
+    borderRadius: 1,
+    zIndex: 10
+  },
+  "&.drop-target-bottom::after": {
+    content: '""',
+    position: "absolute",
+    bottom: -2,
+    left: 0,
+    right: 0,
+    height: 2,
+    backgroundColor: e.palette.primary.main,
+    borderRadius: 1,
+    zIndex: 10
+  },
+  "& .drag-handle": {
+    cursor: "grab",
+    opacity: 0.5,
+    position: "relative",
+    lineHeight: 1,
+    svg: {
+      fontSize: "16px",
+      verticalAlign: "middle"
+    },
+    "&:active": {
+      cursor: "grabbing"
     }
-  }
-
-  &:hover {
-    > .actions {
-      > * {
-        display: inline-block;
-        opacity: ${E} !important;
+  },
+  "& .content": {
+    flex: 1,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    padding: "0 4px",
+    fontSize: "14px"
+  },
+  "& .actions": {
+    position: "absolute",
+    maxHeight: "32px",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: e.spacing(0.5),
+    padding: e.spacing(0.5),
+    opacity: 0,
+    transition: "opacity 0.2s ease",
+    backgroundColor: te(e.palette.background.paper, 0.8),
+    backdropFilter: "blur(2px)",
+    borderRadius: e.spacing(0.5),
+    margin: `auto ${e.spacing(0.5)}`,
+    "& > *": {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "pointer",
+      padding: e.spacing(0.25),
+      borderRadius: e.spacing(0.5),
+      transition: "all 0.2s ease",
+      color: e.palette.text.secondary,
+      "&:hover": {
+        backgroundColor: e.palette.action.hover,
+        color: e.palette.text.primary
+      },
+      svg: {
+        fontSize: "16px"
       }
+    },
+    // 常驻显示的状态图标
+    "& > .visible": {
+      opacity: 1
     }
+  },
+  // 特殊状态的元素 - 常驻显示状态图标
+  "&.section-hidden .actions, &.section-locked .actions": {
+    opacity: 0.7
   }
-
-  > .name {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding: 0 4px;
-    font-size: 14px;
-  }
-`;
-H(n)`
+}));
+F(n)`
   position: relative;
   border: 1px solid #c0c0c0;
   min-height: 40px;
@@ -197,29 +223,29 @@ H(n)`
   .label-box__label,
   .label-box__actions {
     position: absolute;
-    background: ${({ theme: i }) => i.palette.background.paper};
+    background: ${({ theme: e }) => e.palette.background.paper};
     overflow: visible;
     display: inline-block;
     top: 0;
     transform: translateY(-50%);
   }
 `;
-const je = L({ embed: !1 }), { Provider: rt } = je;
-L(void 0);
-U({
-  axios: G,
+const $e = A({ embed: !1 }), { Provider: nt } = $e;
+A(void 0);
+Q({
+  axios: j,
   path: "/api/ai/status"
 });
-U({
-  axios: G,
+Q({
+  axios: j,
   path: "/api/ai/agent-status"
 });
 Ne({
-  fetch: $e(),
+  fetch: Be(),
   path: "/api/ai/completions"
 });
-X.extend(Be);
-X.extend(De);
+U.extend(je);
+U.extend(De);
 m(n)`
   flex-grow: 1;
   display: flex;
@@ -324,7 +350,7 @@ m(n)`
     }
   }
 `;
-L({});
+A({});
 m(n)`
   display: flex;
   flex-direction: column;
@@ -360,7 +386,7 @@ m(n)`
     cursor: pointer;
   }
 `;
-m(Oe)`
+m(Le)`
   background: #f6f2ff;
   margin-bottom: 20px;
 
@@ -516,8 +542,8 @@ m(n)`
     }
   }
 `;
-Y();
-const We = {
+X();
+const He = {
   type: "default",
   title: "Section CardList",
   description: "This is Section CardList",
@@ -532,7 +558,7 @@ const We = {
   padding: "normal",
   list: [
     {
-      id: Y(),
+      id: X(),
       title: "Simplified Service Delivery",
       description: "Block Server's Service Gateway makes networking easy with access to load balancing, SSL termination, automatic and customizable URL mapping, and redirects.",
       image: "https://www.arcblock.io/static/ead0cabde7f2b7ff34db8f3e8ceca271/afc4b/builder.png"
@@ -540,7 +566,7 @@ const We = {
   ]
 };
 function Fe({
-  componentId: i,
+  componentId: e,
   locale: p,
   components: l
 }) {
@@ -549,22 +575,22 @@ function Fe({
       config: { defaultLocale: d }
     },
     localState: { customComponentPreviewerProperties: u }
-  } = j(), r = J();
-  return /* @__PURE__ */ t(
+  } = G(), i = q();
+  return /* @__PURE__ */ r(
     Ge,
     {
-      componentId: i,
+      componentId: e,
       locale: p,
       dev: {
         mode: "draft",
-        components: l || r,
+        components: l || i,
         defaultLocale: d
       },
-      properties: u?.[i] ?? {}
+      properties: u?.[e] ?? {}
     }
   );
 }
-const D = 260, He = 5, K = "IGNORE_RENDER_BLOCKLET_TITLE", B = (i, p) => i ? Object.entries(i).map(([l, d]) => ({
+const B = 260, We = 5, Y = "IGNORE_RENDER_BLOCKLET_TITLE", D = (e, p) => e ? Object.entries(e).map(([l, d]) => ({
   id: l,
   component: l,
   name: d?.data?.name || d?.component?.name || l,
@@ -582,88 +608,88 @@ const D = 260, He = 5, K = "IGNORE_RENDER_BLOCKLET_TITLE", B = (i, p) => i ? Obj
   {
     id: "section-card-list",
     name: "Section Card List",
-    properties: We
+    properties: He
   },
   {
     id: "toc",
     name: "Toc",
-    properties: he
+    properties: ge
   },
   {
     id: "iframe",
     name: "Embed",
-    properties: ge
+    properties: xe
   },
   {
     id: "layout-block",
     name: "Section Layout",
     properties: {}
   }
-].map((i) => ({ ...i, type: "basic", component: i.id }));
-function it({
-  state: i,
+].map((e) => ({ ...e, type: "basic", component: e.id }));
+function at({
+  state: e,
   open: p,
   onClose: l,
   onSelect: d,
   defaultTab: u,
-  title: r,
-  componentGroups: w,
+  title: i,
+  componentGroups: k,
   components: f,
   multiple: c = !1,
   defaultSelected: b,
-  emptyText: z
+  emptyText: R
 }) {
-  const { t: s } = F(), e = Q({
+  const { t: s } = H(), o = V({
     selectedComponent: null,
     activeTab: u,
     searchQuery: ""
-  }), g = M(() => w || [
+  }), x = M(() => k || [
     {
       name: "basic",
       label: s("maker.components.basicGroup"),
       components: Ve
     },
-    i && {
+    e && {
       name: "custom",
       label: s("maker.components.customGroup"),
-      components: B(Z(i), "custom")
+      components: D(J(e), "custom")
     },
-    i && {
+    e && {
       name: "resource",
       label: s("maker.components.resourceGroup"),
-      components: B(ee(i), "resource")
+      components: D(Z(e), "resource")
     }
-  ].filter(Boolean), [w, s, i, p]), x = e.activeTab || g[0]?.name, k = () => {
-    e.selectedComponent && (d(e.selectedComponent), l());
-  }, _ = (o) => {
-    if (o) {
-      if (v(o)) {
-        c ? e.selectedComponent = e.selectedComponent.filter((a) => a.id !== o.id) : e.selectedComponent = null;
+  ].filter(Boolean), [k, s, e, p]), h = o.activeTab || x[0]?.name, w = () => {
+    o.selectedComponent && (d(o.selectedComponent), l());
+  }, _ = (t) => {
+    if (t) {
+      if (C(t)) {
+        c ? o.selectedComponent = o.selectedComponent.filter((a) => a.id !== t.id) : o.selectedComponent = null;
         return;
       }
       if (c) {
-        const a = Array.isArray(e.selectedComponent) ? e.selectedComponent : [], h = a.some((R) => R.id === o.id);
-        e.selectedComponent = h ? a.filter((R) => R.id !== o.id) : [...a, o];
+        const a = Array.isArray(o.selectedComponent) ? o.selectedComponent : [], g = a.some((z) => z.id === t.id);
+        o.selectedComponent = g ? a.filter((z) => z.id !== t.id) : [...a, t];
       } else
-        e.selectedComponent = o;
+        o.selectedComponent = t;
     }
-  }, v = (o) => e.selectedComponent ? c ? e.selectedComponent.some((a) => a.id === o.id) : e.selectedComponent.id === o.id : !1, C = g?.length === 0, T = M(() => {
-    const o = g.find((a) => a?.name === x)?.components || [];
-    return e.searchQuery ? o.filter((a) => a.name.toLowerCase().includes(e.searchQuery.toLowerCase())) : o;
-  }, [x, g, e.searchQuery]);
-  A(() => {
-    e.searchQuery = "", p && b ? e.selectedComponent = c ? Array.isArray(b) ? b : [b] : b : e.selectedComponent = null;
+  }, C = (t) => o.selectedComponent ? c ? o.selectedComponent.some((a) => a.id === t.id) : o.selectedComponent.id === t.id : !1, v = x?.length === 0, I = M(() => {
+    const t = x.find((a) => a?.name === h)?.components || [];
+    return o.searchQuery ? t.filter((a) => a.name.toLowerCase().includes(o.searchQuery.toLowerCase())) : t;
+  }, [h, x, o.searchQuery]);
+  E(() => {
+    o.searchQuery = "", p && b ? o.selectedComponent = c ? Array.isArray(b) ? b : [b] : b : o.selectedComponent = null;
   }, [p, b, c]);
-  const I = T?.length === 0, O = z || s(x === "resource" ? "maker.components.needAddResource" : "maker.components.noComponents"), q = M(() => T ? T.reduce(
-    (o, a) => {
-      const h = a.blockletId || K, R = a.blockletTitle || s("maker.components.defaultGroup");
-      return o[h] || (o[h] = {
-        title: R,
+  const T = I?.length === 0, O = R || s(h === "resource" ? "maker.components.needAddResource" : "maker.components.noComponents"), K = M(() => I ? I.reduce(
+    (t, a) => {
+      const g = a.blockletId || Y, z = a.blockletTitle || s("maker.components.defaultGroup");
+      return t[g] || (t[g] = {
+        title: z,
         components: []
-      }), o[h].components.push(a), o;
+      }), t[g].components.push(a), t;
     },
     {}
-  ) : {}, [T]);
+  ) : {}, [I]);
   return /* @__PURE__ */ y(
     re,
     {
@@ -683,19 +709,19 @@ function it({
       },
       children: [
         /* @__PURE__ */ y(ie, { className: "between", sx: { display: "flex", gap: 2 }, children: [
-          /* @__PURE__ */ t(n, { children: r || s("maker.components.addComponent") }),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ r(n, { children: i || s("maker.components.addComponent") }),
+          /* @__PURE__ */ r(
             ne,
             {
               size: "small",
               placeholder: s("maker.components.searchComponent"),
-              value: e.searchQuery,
-              onChange: (o) => e.searchQuery = o.target.value,
+              value: o.searchQuery,
+              onChange: (t) => o.searchQuery = t.target.value,
               sx: { flex: 1, maxWidth: 350 },
               slotProps: {
                 input: {
-                  startAdornment: /* @__PURE__ */ t(
-                    P,
+                  startAdornment: /* @__PURE__ */ r(
+                    L,
                     {
                       icon: "tabler:search",
                       style: {
@@ -707,7 +733,7 @@ function it({
               }
             }
           ),
-          /* @__PURE__ */ t(ae, { size: "small", onClick: l, children: /* @__PURE__ */ t(n, { component: P, icon: "tabler:x", sx: { color: "text.primary" } }) })
+          /* @__PURE__ */ r(ae, { size: "small", onClick: l, children: /* @__PURE__ */ r(n, { component: L, icon: "tabler:x", sx: { color: "text.primary" } }) })
         ] }),
         /* @__PURE__ */ y(
           se,
@@ -720,12 +746,12 @@ function it({
               overflow: "hidden"
             },
             children: [
-              !C && /* @__PURE__ */ t(n, { sx: { width: 150, borderRight: 1, borderColor: "divider" }, children: /* @__PURE__ */ t(
+              !v && /* @__PURE__ */ r(n, { sx: { width: 150, borderRight: 1, borderColor: "divider" }, children: /* @__PURE__ */ r(
                 le,
                 {
                   orientation: "vertical",
-                  value: x,
-                  onChange: (o, a) => e.activeTab = a,
+                  value: h,
+                  onChange: (t, a) => o.activeTab = a,
                   sx: {
                     "& .MuiTab-root": {
                       alignItems: "flex-start",
@@ -735,10 +761,10 @@ function it({
                       px: 2
                     }
                   },
-                  children: g.map((o, a) => /* @__PURE__ */ t(pe, { label: o?.label, value: o?.name }, a))
+                  children: x.map((t, a) => /* @__PURE__ */ r(pe, { label: t?.label, value: t?.name }, a))
                 }
               ) }),
-              /* @__PURE__ */ t(
+              /* @__PURE__ */ r(
                 n,
                 {
                   sx: {
@@ -747,23 +773,23 @@ function it({
                     overflowY: "auto",
                     pr: 1
                   },
-                  children: I ? /* @__PURE__ */ t(W, { children: O }) : /* @__PURE__ */ t(
+                  children: T ? /* @__PURE__ */ r($, { children: O }) : /* @__PURE__ */ r(
                     Ue,
                     {
-                      wrapperComponent: N,
+                      wrapperComponent: P,
                       wrapperComponentProps: {
                         container: !0,
                         spacing: 2,
-                        sx: I ? {
+                        sx: T ? {
                           height: "100%"
                         } : {}
                       },
-                      groups: q,
+                      groups: K,
                       emptyText: O,
-                      renderItem: (o) => {
-                        const a = v(o);
-                        return /* @__PURE__ */ t(
-                          N,
+                      renderItem: (t) => {
+                        const a = C(t);
+                        return /* @__PURE__ */ r(
+                          P,
                           {
                             sx: {
                               width: "100%",
@@ -791,8 +817,8 @@ function it({
                                     height: 0,
                                     borderTop: "transparent solid 15px",
                                     borderLeft: "transparent solid 15px",
-                                    borderBottom: (h) => `solid 15px ${h.palette.primary.main}`,
-                                    borderRight: (h) => `solid 15px ${h.palette.primary.main}`,
+                                    borderBottom: (g) => `solid 15px ${g.palette.primary.main}`,
+                                    borderRight: (g) => `solid 15px ${g.palette.primary.main}`,
                                     transition: "all 0.1s ease",
                                     content: '""'
                                   },
@@ -820,29 +846,29 @@ function it({
                                   width: "100%",
                                   cursor: "pointer"
                                 },
-                                onClick: () => _(o),
+                                onClick: () => _(t),
                                 children: [
-                                  /* @__PURE__ */ t(
+                                  /* @__PURE__ */ r(
                                     ce,
                                     {
                                       sx: {
                                         width: "100%",
-                                        height: D,
+                                        height: B,
                                         overflow: "auto",
                                         position: "relative"
                                       },
-                                      children: /* @__PURE__ */ t(
+                                      children: /* @__PURE__ */ r(
                                         Qe,
                                         {
                                           components: f,
-                                          containerHeight: D,
-                                          component: o
+                                          containerHeight: B,
+                                          component: t
                                         },
-                                        o.id
+                                        t.id
                                       )
                                     }
                                   ),
-                                  /* @__PURE__ */ t(
+                                  /* @__PURE__ */ r(
                                     me,
                                     {
                                       sx: {
@@ -850,25 +876,25 @@ function it({
                                         borderTop: 1,
                                         borderColor: a ? "primary.main" : "grey.200"
                                       },
-                                      children: /* @__PURE__ */ t(
-                                        V,
+                                      children: /* @__PURE__ */ r(
+                                        W,
                                         {
                                           variant: "body1",
                                           noWrap: !0,
                                           sx: {
                                             fontWeight: "bold"
                                           },
-                                          children: o.name
+                                          children: t.name
                                         }
                                       )
                                     }
                                   ),
-                                  /* @__PURE__ */ t(n, { className: "check-container", children: /* @__PURE__ */ t(te, { className: "check-icon" }) })
+                                  /* @__PURE__ */ r(n, { className: "check-container", children: /* @__PURE__ */ r(oe, { className: "check-icon" }) })
                                 ]
                               }
                             )
                           },
-                          o.id
+                          t.id
                         );
                       }
                     }
@@ -887,14 +913,14 @@ function it({
               p: 2
             },
             children: [
-              /* @__PURE__ */ t($, { onClick: l, variant: "outlined", children: s("common.cancel") }),
-              /* @__PURE__ */ t(
-                $,
+              /* @__PURE__ */ r(N, { onClick: l, variant: "outlined", children: s("common.cancel") }),
+              /* @__PURE__ */ r(
+                N,
                 {
-                  onClick: k,
+                  onClick: w,
                   variant: "contained",
-                  disabled: !e.selectedComponent || c && Array.isArray(e.selectedComponent) && e.selectedComponent.length === 0,
-                  children: c && Array.isArray(e.selectedComponent) && e.selectedComponent.length > 0 ? s("common.addMultiple", { count: e.selectedComponent.length }) : s("common.add")
+                  disabled: !o.selectedComponent || c && Array.isArray(o.selectedComponent) && o.selectedComponent.length === 0,
+                  children: c && Array.isArray(o.selectedComponent) && o.selectedComponent.length > 0 ? s("common.addMultiple", { count: o.selectedComponent.length }) : s("common.add")
                 }
               )
             ]
@@ -905,21 +931,21 @@ function it({
   );
 }
 function Qe({
-  containerHeight: i,
+  containerHeight: e,
   component: p,
   minScale: l = 0.1,
   components: d
 }) {
-  const { locale: u } = F(), r = Q({
+  const { locale: u } = H(), i = V({
     scale: 1,
     shouldScroll: !1,
     isVisible: !1,
     hadInit: !1
-  }), { currentPage: w } = j(), f = S(null), c = S(null), b = S(0), z = S(null);
-  A(() => {
-    const v = new IntersectionObserver(
-      ([C]) => {
-        r.isVisible = C.isIntersecting;
+  }), { currentPage: k } = G(), f = S(null), c = S(null), b = S(0), R = S(null);
+  E(() => {
+    const C = new IntersectionObserver(
+      ([v]) => {
+        i.isVisible = v.isIntersecting;
       },
       {
         root: null,
@@ -927,33 +953,33 @@ function Qe({
         threshold: 0
       }
     );
-    return c.current && v.observe(c.current), () => v.disconnect();
-  }, []), A(() => {
-    const v = () => {
-      if (b.current += 1, b.current > He) {
-        C.disconnect();
+    return c.current && C.observe(c.current), () => C.disconnect();
+  }, []), E(() => {
+    const C = () => {
+      if (b.current += 1, b.current > We) {
+        v.disconnect();
         return;
       }
       if (!p.previewImage && f.current) {
-        const T = f.current.scrollHeight, I = i / T;
-        I < l ? (r.scale = l, r.shouldScroll = !0) : I < 1 ? (r.scale = I, r.shouldScroll = !1) : (r.scale = 1, r.shouldScroll = !1);
+        const I = f.current.scrollHeight, T = e / I;
+        T < l ? (i.scale = l, i.shouldScroll = !0) : T < 1 ? (i.scale = T, i.shouldScroll = !1) : (i.scale = 1, i.shouldScroll = !1);
       }
-      z.current && clearTimeout(z.current), z.current = setTimeout(() => {
-        r.hadInit = !0;
+      R.current && clearTimeout(R.current), R.current = setTimeout(() => {
+        i.hadInit = !0;
       }, 200);
-    }, C = new ResizeObserver(() => {
-      setTimeout(v, 20);
+    }, v = new ResizeObserver(() => {
+      setTimeout(C, 20);
     });
-    return f.current && r.isVisible && C.observe(f.current), () => {
-      C.disconnect();
+    return f.current && i.isVisible && v.observe(f.current), () => {
+      v.disconnect();
     };
-  }, [i, l, r.isVisible, p]);
-  const { id: s, type: e, component: g, properties: x, previewImage: k } = p, _ = M(() => r.isVisible ? k ? /* @__PURE__ */ t(
+  }, [e, l, i.isVisible, p]);
+  const { id: s, type: o, component: x, properties: h, previewImage: w } = p, _ = M(() => i.isVisible ? w ? /* @__PURE__ */ r(
     n,
     {
       component: "img",
       loading: "lazy",
-      src: oe(k),
+      src: ee(w),
       alt: p.name,
       sx: {
         width: "100%",
@@ -964,25 +990,25 @@ function Qe({
       }
     },
     s
-  ) : e === "basic" ? /* @__PURE__ */ t(
-    xe,
+  ) : o === "basic" ? /* @__PURE__ */ r(
+    he,
     {
       id: s,
-      type: g,
-      section: x,
+      type: x,
+      section: h,
       config: {
-        ...x,
+        ...h,
         locale: u,
         editing: !1,
         dev: {
           mode: "draft"
         }
       },
-      page: w
+      page: k
     },
     s
-  ) : /* @__PURE__ */ t(Fe, { componentId: s, locale: u, components: d }, s) : null, [s, e, g, x, u, k, r.isVisible]);
-  return /* @__PURE__ */ t(
+  ) : /* @__PURE__ */ r(Fe, { componentId: s, locale: u, components: d }, s) : null, [s, o, x, h, u, w, i.isVisible]);
+  return /* @__PURE__ */ r(
     n,
     {
       ref: c,
@@ -991,29 +1017,29 @@ function Qe({
         width: "100%",
         height: "100%",
         overflowX: "hidden",
-        overflowY: r.shouldScroll ? "auto" : "hidden",
+        overflowY: i.shouldScroll ? "auto" : "hidden",
         transition: "all 0.3s ease"
       },
       children: /* @__PURE__ */ y(
         n,
         {
           sx: {
-            transform: `scale(${r.scale})`,
+            transform: `scale(${i.scale})`,
             transformOrigin: "top left",
-            width: `${100 / r.scale}%`,
-            height: r.hadInit && r.shouldScroll ? "100%" : `${100 / r.scale}%`
+            width: `${100 / i.scale}%`,
+            height: i.hadInit && i.shouldScroll ? "100%" : `${100 / i.scale}%`
           },
           children: [
-            !r.hadInit && /* @__PURE__ */ t(fe, { variant: "rectangular", width: "100%", height: "100%" }),
-            /* @__PURE__ */ t(
+            !i.hadInit && /* @__PURE__ */ r(fe, { variant: "rectangular", width: "100%", height: "100%" }),
+            /* @__PURE__ */ r(
               n,
               {
                 ref: f,
                 sx: {
                   width: "100%",
-                  height: k ? "100%" : "auto",
+                  height: w ? "100%" : "auto",
                   pointerEvents: "none",
-                  opacity: r.hadInit ? 1 : 0
+                  opacity: i.hadInit ? 1 : 0
                 },
                 children: _
               }
@@ -1025,7 +1051,7 @@ function Qe({
   );
 }
 function Ue({
-  groups: i,
+  groups: e,
   emptyText: p,
   renderItem: l,
   wrapperComponent: d = n,
@@ -1035,15 +1061,15 @@ function Ue({
     gap: 1
   }
 }) {
-  return /* @__PURE__ */ t(n, { children: Object.keys(i).length > 0 ? Object.entries(i).map(([r, { title: w, components: f }]) => /* @__PURE__ */ y(
+  return /* @__PURE__ */ r(n, { children: Object.keys(e).length > 0 ? Object.entries(e).map(([i, { title: k, components: f }]) => /* @__PURE__ */ y(
     n,
     {
       sx: {
         mb: 3
       },
       children: [
-        r !== K && /* @__PURE__ */ y(
-          V,
+        i !== Y && /* @__PURE__ */ y(
+          W,
           {
             className: "blocklet-title",
             variant: "subtitle2",
@@ -1056,7 +1082,7 @@ function Ue({
               gap: 1
             },
             children: [
-              /* @__PURE__ */ t(
+              /* @__PURE__ */ r(
                 n,
                 {
                   component: "span",
@@ -1069,21 +1095,21 @@ function Ue({
                   }
                 }
               ),
-              w
+              k
             ]
           }
         ),
-        /* @__PURE__ */ t(d, { ...u, children: f.map((c) => l(c)) })
+        /* @__PURE__ */ r(d, { ...u, children: f.map((c) => l(c)) })
       ]
     },
-    r
-  )) : /* @__PURE__ */ t(W, { children: p }) });
+    i
+  )) : /* @__PURE__ */ r($, { children: p }) });
 }
 export {
-  it as AddComponent,
+  at as AddComponent,
   Qe as AutoScaledComponentRenderer,
   Ve as BASIC_COMPONENT_LIST,
   Ue as GroupedComponentsList,
-  it as default,
-  B as formatComponent
+  at as default,
+  D as formatComponent
 };