@blocklet/pages-kit-inner-components 0.6.3 → 0.6.5

package/lib/es/add-component.js

@@ -1,4 +1,1091 @@
-var e = AddComponent;
+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-0gvZF3k2.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 { b as be, T as he, I as ge, B as xe } from "./chunks/index-D5gXPe_7.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 "@blocklet/pages-kit/builtin/uploader";
+import "react-use";
+import "lodash/cloneDeep";
+import "@mui/icons-material";
+import "react-dnd";
+import "@arcblock/ux/lib/Tabs";
+import "lodash/pick";
+import "@mui/lab";
+import "immer";
+import "lodash/omit";
+import "react-router-dom";
+import "@arcblock/ux/lib/Button";
+import "is-uri";
+import "@arcblock/ux/lib/Toast";
+import "@mui/material/Tooltip";
+import "@mui/icons-material/KeyboardArrowLeft";
+import Oe from "@mui/material/Box";
+import "@mui/material/DialogTitle";
+import "@mui/material/IconButton";
+import "@mui/material/Dialog";
+import "@mui/material/useMediaQuery";
+import { css as Pe } from "@emotion/react";
+import "@mui/material/Alert";
+import "@mui/material/AlertTitle";
+import "react-error-boundary";
+import "ufo";
+import "lodash/isEmpty";
+import "yaml";
+import "@mui/material/Typography";
+import "joi";
+import { createStatusApi as U, createTextCompletionApi as Ne } from "@blocklet/ai-kit/api";
+import { createFetch as $e } 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 De from "dayjs/plugin/timezone";
+import Be from "dayjs/plugin/utc";
+import "fast-deep-equal";
+import "lodash/isNil";
+import "tz-lookup";
+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 { 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];
+m(n)`
+  .color-item {
+    position: relative;
+  }
+  .color-item__checked {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: rgba(255, 255, 255, 0.85);
+  }
+  .color-item__delete {
+    position: absolute;
+    top: 0;
+    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;
+    }
+  }
+
+  > .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;
+    }
+
+    > .visible {
+      display: inline-block;
+      opacity: ${E};
+    }
+  }
+
+  &:hover {
+    > .actions {
+      > * {
+        display: inline-block;
+        opacity: ${E} !important;
+      }
+    }
+  }
+
+  > .name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0 4px;
+    font-size: 14px;
+  }
+`;
+H(n)`
+  position: relative;
+  border: 1px solid #c0c0c0;
+  min-height: 40px;
+  border-radius: 4px;
+  padding: 14px 14px;
+  .label-box__label {
+    left: 6px;
+    height: 1em;
+    padding: 0 6px;
+    line-height: 1;
+  }
+  .label-box__actions {
+    right: 6px;
+  }
+  .label-box__label,
+  .label-box__actions {
+    position: absolute;
+    background: ${({ theme: i }) => i.palette.background.default};
+    overflow: visible;
+    display: inline-block;
+    top: 0;
+    transform: translateY(-50%);
+  }
+`;
+const je = L({ embed: !1 }), { Provider: nt } = je;
+L(void 0);
+U({
+  axios: G,
+  path: "/api/ai/status"
+});
+U({
+  axios: G,
+  path: "/api/ai/agent-status"
+});
+Ne({
+  fetch: $e(),
+  path: "/api/ai/completions"
+});
+X.extend(Be);
+X.extend(De);
+m(n)`
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+
+  > .actions {
+    position: sticky;
+    bottom: 0px;
+    margin-top: 20px;
+    z-index: 1;
+
+    @media (max-height: 700px) {
+      position: static;
+    }
+
+    > .connect-tip {
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 17px;
+      text-align: center;
+      color: #9397a1;
+      margin-bottom: 20px;
+    }
+
+    .submit {
+      height: 43px;
+      width: 100%;
+      background: linear-gradient(90deg, #45e4fa 0%, #8a45fa 52.08%, #fa45bc 100%);
+      border-radius: 30px;
+      box-shadow: none;
+      text-transform: none;
+      width: 100%;
+      border: 0;
+      margin: 0;
+      padding: 8.5px 14px;
+      font-size: 100%;
+
+      &.Mui-disabled {
+        color: rgba(0, 0, 0, 0.26);
+        background: rgba(0, 0, 0, 0.12);
+      }
+    }
+  }
+
+  .MuiFormHelperText-root {
+    font-style: normal;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 14px;
+    color: #9397a1;
+    margin: 0;
+    margin-top: 4px;
+  }
+
+  .MuiOutlinedInput-root {
+    background: #fbfbfb;
+    border-radius: 4px;
+
+    fieldset {
+      border: 1px solid #f6f6f6;
+    }
+
+    &:hover fieldset {
+      border: 1px solid #a482fe;
+    }
+
+    input {
+      width: 100%;
+      border: 0;
+      margin: 0;
+      border-radius: 4px;
+      padding: 8.5px 14px;
+      font-size: 100%;
+    }
+  }
+
+  .Mui-focused {
+    &.MuiFormLabel-root {
+      color: #a482fe;
+    }
+
+    &.MuiOutlinedInput-root {
+      fieldset {
+        border: 1px solid #a482fe;
+      }
+    }
+  }
+
+  .Mui-error {
+    &.MuiFormLabel-root {
+      color: #f16e6e;
+    }
+
+    &.MuiOutlinedInput-root + .MuiFormHelperText-root {
+      color: #f16e6e;
+    }
+
+    &.MuiOutlinedInput-root {
+      fieldset {
+        border: 1px solid #f16e6e;
+      }
+    }
+  }
+`;
+L({});
+m(n)`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  .lazy-image-wrapper {
+    border-radius: 12px;
+
+    img {
+      border-radius: 12px;
+    }
+  }
+`;
+m(n)`
+  background: #fbfbfb;
+  border: 1px solid #f6f6f6;
+  border-radius: 4px;
+
+  &:has(.selected) {
+    border: 1px solid #a482fe;
+  }
+
+  &:has(.Mui-focused) {
+    border: 1px solid #a482fe;
+  }
+
+  > .input {
+    padding: 12px;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 19px;
+    color: #25292f;
+    cursor: pointer;
+  }
+`;
+m(Oe)`
+  background: #f6f2ff;
+  margin-bottom: 20px;
+
+  .title {
+    font-style: normal;
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 33px;
+    color: #25292f;
+  }
+
+  .subtitle {
+    font-style: normal;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 22px;
+    color: #9397a1;
+    margin-top: 4px;
+  }
+`;
+m(n)`
+  display: block;
+  padding: 16px;
+  text-decoration: none;
+  border-radius: 12px;
+  cursor: pointer;
+  box-shadow:
+    rgb(255, 255, 255) 0 0 0 0,
+    rgb(226, 232, 240) 0 0 0 1px,
+    rgba(0, 0, 0, 0.05) 0 1px 2px 0;
+  color: inherit;
+  height: 100%;
+  position: relative;
+
+  &:hover {
+    box-shadow:
+      rgb(255, 255, 255) 0 0 0 0,
+      rgb(203, 213, 225) 0 0 0 2px,
+      rgba(0, 0, 0, 0.1) 0 10px 15px -3px,
+      rgba(0, 0, 0, 0.1) 0 4px 6px -4px;
+  }
+
+  .description {
+    word-break: break-all;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+`;
+Pe`
+  .MuiMenu-root {
+    z-index: 13010 !important;
+  }
+`;
+m(n)`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  .lazy-image-wrapper {
+    border-radius: 12px;
+
+    img {
+      border-radius: 12px;
+    }
+  }
+`;
+m(n)`
+  background: #fbfbfb;
+  border: 1px solid #f6f6f6;
+  border-radius: 4px;
+  position: relative;
+  cursor: pointer;
+
+  &:has(.selected) {
+    border: 1px solid #a482fe;
+  }
+
+  &:has(.Mui-focused) {
+    border: 1px solid #a482fe;
+  }
+
+  > .input {
+    padding: 12px;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 19px;
+    color: #25292f;
+    cursor: pointer;
+  }
+`;
+m(n)`
+  > .ai-button {
+    display: none;
+    z-index: 1;
+
+    &.active {
+      display: inline-flex;
+    }
+
+    .MuiCircularProgress-root {
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      margin: auto;
+    }
+  }
+`;
+m(n)`
+  > .language-button {
+    display: none;
+    z-index: 1;
+
+    &.active {
+      display: inline-flex;
+    }
+
+    .MuiCircularProgress-root {
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      margin: auto;
+    }
+  }
+`;
+m(n)`
+  position: relative;
+
+  .action {
+    position: absolute;
+    right: 4px;
+    top: 4px;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+  }
+
+  &:hover {
+    .language-button {
+      display: inline-flex;
+    }
+  }
+
+  &:hover {
+    .ai-button {
+      display: inline-flex;
+    }
+  }
+`;
+Y();
+const We = {
+  type: "default",
+  title: "Section CardList",
+  description: "This is Section CardList",
+  center: !0,
+  dark: !1,
+  background: "",
+  col: 3,
+  gap: 2,
+  align: "top",
+  textAlign: "left",
+  iconSize: 100,
+  padding: "normal",
+  list: [
+    {
+      id: Y(),
+      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"
+    }
+  ]
+};
+function Fe({
+  componentId: i,
+  locale: p,
+  components: l
+}) {
+  const {
+    state: {
+      config: { defaultLocale: d }
+    },
+    localState: { customComponentPreviewerProperties: u }
+  } = j(), r = J();
+  return /* @__PURE__ */ t(
+    Ge,
+    {
+      componentId: i,
+      locale: p,
+      dev: {
+        mode: "draft",
+        components: l || r,
+        defaultLocale: d
+      },
+      properties: u?.[i] ?? {}
+    }
+  );
+}
+const D = 260, He = 5, K = "IGNORE_RENDER_BLOCKLET_TITLE", B = (i, p) => i ? Object.entries(i).map(([l, d]) => ({
+  id: l,
+  component: l,
+  name: d?.data?.name || d?.component?.name || l,
+  properties: d?.data || d.component,
+  previewImage: d?.data?.previewImage || null,
+  type: p,
+  blockletId: d?.blockletId,
+  blockletTitle: d?.blockletTitle
+})) : [], Ve = [
+  {
+    id: "section",
+    name: "Section",
+    properties: be
+  },
+  {
+    id: "section-card-list",
+    name: "Section Card List",
+    properties: We
+  },
+  {
+    id: "toc",
+    name: "Toc",
+    properties: he
+  },
+  {
+    id: "iframe",
+    name: "Embed",
+    properties: ge
+  },
+  {
+    id: "layout-block",
+    name: "Section Layout",
+    properties: {}
+  }
+].map((i) => ({ ...i, type: "basic", component: i.id }));
+function at({
+  state: i,
+  open: p,
+  onClose: l,
+  onSelect: d,
+  defaultTab: u,
+  title: r,
+  componentGroups: w,
+  components: f,
+  multiple: c = !1,
+  defaultSelected: b,
+  emptyText: z
+}) {
+  const { t: s } = F(), e = Q({
+    selectedComponent: null,
+    activeTab: u,
+    searchQuery: ""
+  }), g = M(() => w || [
+    {
+      name: "basic",
+      label: s("maker.components.basicGroup"),
+      components: Ve
+    },
+    i && {
+      name: "custom",
+      label: s("maker.components.customGroup"),
+      components: B(Z(i), "custom")
+    },
+    i && {
+      name: "resource",
+      label: s("maker.components.resourceGroup"),
+      components: B(ee(i), "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;
+        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];
+      } else
+        e.selectedComponent = o;
+    }
+  }, 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;
+  }, [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,
+        components: []
+      }), o[h].components.push(a), o;
+    },
+    {}
+  ) : {}, [T]);
+  return /* @__PURE__ */ y(
+    re,
+    {
+      open: p,
+      onClose: l,
+      maxWidth: "lg",
+      fullWidth: !0,
+      slotProps: {
+        paper: {
+          sx: {
+            height: "80vh",
+            maxHeight: "80vh",
+            display: "flex",
+            flexDirection: "column"
+          }
+        }
+      },
+      children: [
+        /* @__PURE__ */ y(ie, { className: "between", sx: { display: "flex", gap: 2 }, children: [
+          /* @__PURE__ */ t(n, { children: r || s("maker.components.addComponent") }),
+          /* @__PURE__ */ t(
+            ne,
+            {
+              size: "small",
+              placeholder: s("maker.components.searchComponent"),
+              value: e.searchQuery,
+              onChange: (o) => e.searchQuery = o.target.value,
+              sx: { flex: 1, maxWidth: 350 },
+              slotProps: {
+                input: {
+                  startAdornment: /* @__PURE__ */ t(
+                    P,
+                    {
+                      icon: "tabler:search",
+                      style: {
+                        marginRight: 8
+                      }
+                    }
+                  )
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ t(ae, { size: "small", onClick: l, children: /* @__PURE__ */ t(n, { component: P, icon: "tabler:x", sx: { color: "text.primary" } }) })
+        ] }),
+        /* @__PURE__ */ y(
+          se,
+          {
+            sx: {
+              display: "flex",
+              gap: 2,
+              pl: "8px !important",
+              flex: 1,
+              overflow: "hidden"
+            },
+            children: [
+              !C && /* @__PURE__ */ t(n, { sx: { width: 150, borderRight: 1, borderColor: "divider" }, children: /* @__PURE__ */ t(
+                le,
+                {
+                  orientation: "vertical",
+                  value: x,
+                  onChange: (o, a) => e.activeTab = a,
+                  sx: {
+                    "& .MuiTab-root": {
+                      alignItems: "flex-start",
+                      textAlign: "left",
+                      minHeight: 48,
+                      py: 1.5,
+                      px: 2
+                    }
+                  },
+                  children: g.map((o, a) => /* @__PURE__ */ t(pe, { label: o?.label, value: o?.name }, a))
+                }
+              ) }),
+              /* @__PURE__ */ t(
+                n,
+                {
+                  sx: {
+                    flex: 1,
+                    overflowX: "hidden",
+                    overflowY: "auto",
+                    pr: 1
+                  },
+                  children: I ? /* @__PURE__ */ t(W, { children: O }) : /* @__PURE__ */ t(
+                    Ue,
+                    {
+                      wrapperComponent: N,
+                      wrapperComponentProps: {
+                        container: !0,
+                        spacing: 2,
+                        sx: I ? {
+                          height: "100%"
+                        } : {}
+                      },
+                      groups: q,
+                      emptyText: O,
+                      renderItem: (o) => {
+                        const a = v(o);
+                        return /* @__PURE__ */ t(
+                          N,
+                          {
+                            sx: {
+                              width: "100%",
+                              "& .add-component-card": {
+                                boxShadow: "none",
+                                border: 1,
+                                borderColor: a ? "primary.main" : "grey.200",
+                                "& .check-container": {
+                                  display: a ? "flex" : "none",
+                                  position: "absolute",
+                                  right: 0,
+                                  bottom: 0,
+                                  justifyContent: "flex-end",
+                                  alignItems: "flex-end",
+                                  width: 30,
+                                  height: 30,
+                                  overflow: "hidden",
+                                  transition: "all 0.3s ease",
+                                  color: "white",
+                                  "&::after": {
+                                    position: "absolute",
+                                    zIndex: 0,
+                                    display: "block",
+                                    width: 0,
+                                    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}`,
+                                    transition: "all 0.1s ease",
+                                    content: '""'
+                                  },
+                                  "& .check-icon": {
+                                    position: "relative",
+                                    zIndex: 2,
+                                    margin: "0 1px 1px 0",
+                                    fontSize: 16,
+                                    transition: "all 0.2s ease"
+                                  }
+                                }
+                              }
+                            },
+                            size: {
+                              xs: 12,
+                              md: 6,
+                              lg: 4
+                            },
+                            children: /* @__PURE__ */ y(
+                              de,
+                              {
+                                className: "add-component-card",
+                                sx: {
+                                  position: "relative",
+                                  width: "100%",
+                                  cursor: "pointer"
+                                },
+                                onClick: () => _(o),
+                                children: [
+                                  /* @__PURE__ */ t(
+                                    ce,
+                                    {
+                                      sx: {
+                                        width: "100%",
+                                        height: D,
+                                        overflow: "auto",
+                                        position: "relative"
+                                      },
+                                      children: /* @__PURE__ */ t(
+                                        Qe,
+                                        {
+                                          components: f,
+                                          containerHeight: D,
+                                          component: o
+                                        },
+                                        o.id
+                                      )
+                                    }
+                                  ),
+                                  /* @__PURE__ */ t(
+                                    me,
+                                    {
+                                      sx: {
+                                        bgcolor: "background.paper",
+                                        borderTop: 1,
+                                        borderColor: a ? "primary.main" : "grey.200"
+                                      },
+                                      children: /* @__PURE__ */ t(
+                                        V,
+                                        {
+                                          variant: "body1",
+                                          noWrap: !0,
+                                          sx: {
+                                            fontWeight: "bold"
+                                          },
+                                          children: o.name
+                                        }
+                                      )
+                                    }
+                                  ),
+                                  /* @__PURE__ */ t(n, { className: "check-container", children: /* @__PURE__ */ t(te, { className: "check-icon" }) })
+                                ]
+                              }
+                            )
+                          },
+                          o.id
+                        );
+                      }
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ y(
+          ue,
+          {
+            sx: {
+              borderTop: 1,
+              borderColor: "divider",
+              p: 2
+            },
+            children: [
+              /* @__PURE__ */ t($, { onClick: l, variant: "outlined", children: s("common.cancel") }),
+              /* @__PURE__ */ t(
+                $,
+                {
+                  onClick: k,
+                  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")
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function Qe({
+  containerHeight: i,
+  component: p,
+  minScale: l = 0.1,
+  components: d
+}) {
+  const { locale: u } = F(), r = Q({
+    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;
+      },
+      {
+        root: null,
+        rootMargin: "50px",
+        threshold: 0
+      }
+    );
+    return c.current && v.observe(c.current), () => v.disconnect();
+  }, []), A(() => {
+    const v = () => {
+      if (b.current += 1, b.current > He) {
+        C.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);
+      }
+      z.current && clearTimeout(z.current), z.current = setTimeout(() => {
+        r.hadInit = !0;
+      }, 200);
+    }, C = new ResizeObserver(() => {
+      setTimeout(v, 20);
+    });
+    return f.current && r.isVisible && C.observe(f.current), () => {
+      C.disconnect();
+    };
+  }, [i, l, r.isVisible, p]);
+  const { id: s, type: e, component: g, properties: x, previewImage: k } = p, _ = M(() => r.isVisible ? k ? /* @__PURE__ */ t(
+    n,
+    {
+      component: "img",
+      loading: "lazy",
+      src: oe(k),
+      alt: p.name,
+      sx: {
+        width: "100%",
+        height: "100%",
+        objectFit: "cover",
+        borderRadius: 1,
+        cursor: "pointer"
+      }
+    },
+    s
+  ) : e === "basic" ? /* @__PURE__ */ t(
+    xe,
+    {
+      id: s,
+      type: g,
+      section: x,
+      config: {
+        ...x,
+        locale: u,
+        editing: !1,
+        dev: {
+          mode: "draft"
+        }
+      },
+      page: w
+    },
+    s
+  ) : /* @__PURE__ */ t(Fe, { componentId: s, locale: u, components: d }, s) : null, [s, e, g, x, u, k, r.isVisible]);
+  return /* @__PURE__ */ t(
+    n,
+    {
+      ref: c,
+      sx: {
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        overflowX: "hidden",
+        overflowY: r.shouldScroll ? "auto" : "hidden",
+        transition: "all 0.3s ease"
+      },
+      children: /* @__PURE__ */ y(
+        n,
+        {
+          sx: {
+            transform: `scale(${r.scale})`,
+            transformOrigin: "top left",
+            width: `${100 / r.scale}%`,
+            height: r.hadInit && r.shouldScroll ? "100%" : `${100 / r.scale}%`
+          },
+          children: [
+            !r.hadInit && /* @__PURE__ */ t(fe, { variant: "rectangular", width: "100%", height: "100%" }),
+            /* @__PURE__ */ t(
+              n,
+              {
+                ref: f,
+                sx: {
+                  width: "100%",
+                  height: k ? "100%" : "auto",
+                  pointerEvents: "none",
+                  opacity: r.hadInit ? 1 : 0
+                },
+                children: _
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function Ue({
+  groups: i,
+  emptyText: p,
+  renderItem: l,
+  wrapperComponent: d = n,
+  wrapperComponentProps: u = {
+    display: "inline-flex",
+    flexWrap: "wrap",
+    gap: 1
+  }
+}) {
+  return /* @__PURE__ */ t(n, { children: Object.keys(i).length > 0 ? Object.entries(i).map(([r, { title: w, components: f }]) => /* @__PURE__ */ y(
+    n,
+    {
+      sx: {
+        mb: 3
+      },
+      children: [
+        r !== K && /* @__PURE__ */ y(
+          V,
+          {
+            className: "blocklet-title",
+            variant: "subtitle2",
+            sx: {
+              mb: 2,
+              fontWeight: 500,
+              color: "text.primary",
+              display: "flex",
+              alignItems: "center",
+              gap: 1
+            },
+            children: [
+              /* @__PURE__ */ t(
+                n,
+                {
+                  component: "span",
+                  sx: {
+                    width: 4,
+                    height: 20,
+                    backgroundColor: "primary.main",
+                    borderRadius: 1,
+                    display: "inline-block"
+                  }
+                }
+              ),
+              w
+            ]
+          }
+        ),
+        /* @__PURE__ */ t(d, { ...u, children: f.map((c) => l(c)) })
+      ]
+    },
+    r
+  )) : /* @__PURE__ */ t(W, { children: p }) });
+}
 export {
-  e as default
+  at as AddComponent,
+  Qe as AutoScaledComponentRenderer,
+  Ve as BASIC_COMPONENT_LIST,
+  Ue as GroupedComponentsList,
+  at as default,
+  B as formatComponent
 };