@g1cloud/page-builder-editor 1.0.0-alpha.33 → 1.0.0-alpha.35

package/dist/{index-B8JifwHW.js → index-EsPg-Em5.js}

@@ -6670,6 +6670,24 @@ class Part {
   isNestedWidget() {
     return false;
   }
+  isParentOf(part) {
+    if (!part) return false;
+    let parent = part.parent;
+    while (parent) {
+      if (parent === this || parent.partId === this.partId) return true;
+      parent = parent.parent;
+    }
+    return false;
+  }
+  isChildOf(part) {
+    if (!part) return false;
+    let parent = this.parent;
+    while (parent) {
+      if (parent === part || parent.partId === part.partId) return true;
+      parent = parent.parent;
+    }
+    return false;
+  }
   getName() {
     var _a;
     return (_a = this.properties) == null ? void 0 : _a.name;
@@ -6683,80 +6701,87 @@ class Part {
     return ((_a = this.properties) == null ? void 0 : _a.classNames) || "";
   }
   getAlignStyleValue(align) {
-    if (align === "left") return "flex-start";
-    if (align === "right") return "flex-end";
-    return "center";
+    switch (align) {
+      case "start":
+        return "flex-start";
+      case "end":
+        return "flex-end";
+      case "center":
+        return "center";
+      case "between":
+        return "space-between";
+      default:
+        return;
+    }
   }
   getStyles(isMobilePage) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q;
     const style = {};
-    const align = ((_a = this.properties) == null ? void 0 : _a.align) || "center";
-    if (this.isWidget()) {
-      style.alignSelf = this.getAlignStyleValue(align);
-    } else if (this.isPage()) {
-      style.display = "flex";
-      style.flexDirection = "column";
-      style.alignItems = this.getAlignStyleValue(align);
+    if (((_a = this.properties) == null ? void 0 : _a.direction) === "horizontal") {
+      style.flexDirection = "row";
     } else {
-      const direction = isMobilePage ? (_b = this.properties) == null ? void 0 : _b.directionSm : (_c = this.properties) == null ? void 0 : _c.directionLg;
-      if (direction === "horizontal") {
-        style.display = "flex";
-        style.flexDirection = "row";
-        style.justifyContent = this.getAlignStyleValue(align);
-      } else if (direction === "vertical") {
-        style.display = "flex";
-        style.flexDirection = "column";
-        style.alignItems = this.getAlignStyleValue(align);
-      }
-    }
-    if (((_d = this.properties) == null ? void 0 : _d.wrap) === "wrap") {
+      style.flexDirection = "column";
+    }
+    if (((_b = this.properties) == null ? void 0 : _b.wrap) === "wrap") {
       style.flexWrap = "wrap";
     }
-    if ((_e = this.properties) == null ? void 0 : _e.margin) style.margin = this.properties.margin;
-    if ((_f = this.properties) == null ? void 0 : _f.marginLeft) style.marginLeft = this.properties.marginLeft;
-    if ((_g = this.properties) == null ? void 0 : _g.marginRight) style.marginRight = this.properties.marginRight;
-    if ((_h = this.properties) == null ? void 0 : _h.marginTop) style.marginTop = this.properties.marginTop;
-    if ((_i = this.properties) == null ? void 0 : _i.marginBottom) style.marginBottom = this.properties.marginBottom;
-    if ((_j = this.properties) == null ? void 0 : _j.padding) style.padding = this.properties.padding;
-    if ((_k = this.properties) == null ? void 0 : _k.paddingLeft) style.paddingLeft = this.properties.paddingLeft;
-    if ((_l = this.properties) == null ? void 0 : _l.paddingRight) style.paddingRight = this.properties.paddingRight;
-    if ((_m = this.properties) == null ? void 0 : _m.paddingTop) style.paddingTop = this.properties.paddingTop;
-    if ((_n = this.properties) == null ? void 0 : _n.paddingBottom) style.paddingBottom = this.properties.paddingBottom;
-    if ((_o = this.properties) == null ? void 0 : _o.left) style.left = this.properties.left;
-    if ((_p = this.properties) == null ? void 0 : _p.right) style.right = this.properties.right;
-    if ((_q = this.properties) == null ? void 0 : _q.top) style.top = this.properties.top;
-    if ((_r = this.properties) == null ? void 0 : _r.bottom) style.bottom = this.properties.bottom;
-    if ((_s = this.properties) == null ? void 0 : _s.width) style.width = this.properties.width;
-    if ((_t = this.properties) == null ? void 0 : _t.height) style.height = this.properties.height;
-    if ((_u = this.properties) == null ? void 0 : _u.maxWidth) style.maxWidth = this.properties.maxWidth;
-    if ((_v = this.properties) == null ? void 0 : _v.maxHeight) style.maxHeight = this.properties.maxHeight;
-    if ((_w = this.properties) == null ? void 0 : _w.minWidth) style.minWidth = this.properties.minWidth;
-    if ((_x = this.properties) == null ? void 0 : _x.minHeight) style.minHeight = this.properties.minHeight;
-    if ((_y = this.properties) == null ? void 0 : _y.textAlign) style.textAlign = this.properties.textAlign;
-    if ((_z = this.properties) == null ? void 0 : _z.backgroundColor) style.backgroundColor = this.properties.backgroundColor;
-    if ((_A = this.properties) == null ? void 0 : _A.borderLeftWidth) style.borderLeftWidth = this.properties.borderLeftWidth;
-    if ((_B = this.properties) == null ? void 0 : _B.borderRightWidth) style.borderRightWidth = this.properties.borderRightWidth;
-    if ((_C = this.properties) == null ? void 0 : _C.borderTopWidth) style.borderTopWidth = this.properties.borderTopWidth;
-    if ((_D = this.properties) == null ? void 0 : _D.borderBottomWidth) style.borderBottomWidth = this.properties.borderBottomWidth;
-    if ((_E = this.properties) == null ? void 0 : _E.borderTopLeftRadius) style.borderTopLeftRadius = this.properties.borderTopLeftRadius;
-    if ((_F = this.properties) == null ? void 0 : _F.borderTopRightRadius) style.borderTopRightRadius = this.properties.borderTopRightRadius;
-    if ((_G = this.properties) == null ? void 0 : _G.borderBottomLeftRadius) style.borderBottomLeftRadius = this.properties.borderBottomLeftRadius;
-    if ((_H = this.properties) == null ? void 0 : _H.borderBottomRightRadius) style.borderBottomRightRadius = this.properties.borderBottomRightRadius;
-    if (((_I = this.properties) == null ? void 0 : _I.borderColor) && style.borderLeftWidth) {
+    const alignItems = this.getAlignStyleValue((_c = this.properties) == null ? void 0 : _c.alignItems);
+    const justifyContent = this.getAlignStyleValue((_d = this.properties) == null ? void 0 : _d.justifyContent);
+    const alignSelf = this.getAlignStyleValue((_e = this.properties) == null ? void 0 : _e.alignSelf);
+    if (this.isWidget()) {
+      if (alignSelf) style.alignSelf = alignSelf;
+    } else if (this.isPage()) {
+      if (alignItems) style.alignItems = alignItems;
+    } else {
+      if (alignItems) style.alignItems = alignItems;
+      if (justifyContent) style.justifyContent = justifyContent;
+      if (alignSelf) style.alignSelf = alignSelf;
+    }
+    if ((_f = this.properties) == null ? void 0 : _f.margin) style.margin = this.properties.margin;
+    if ((_g = this.properties) == null ? void 0 : _g.marginLeft) style.marginLeft = this.properties.marginLeft;
+    if ((_h = this.properties) == null ? void 0 : _h.marginRight) style.marginRight = this.properties.marginRight;
+    if ((_i = this.properties) == null ? void 0 : _i.marginTop) style.marginTop = this.properties.marginTop;
+    if ((_j = this.properties) == null ? void 0 : _j.marginBottom) style.marginBottom = this.properties.marginBottom;
+    if ((_k = this.properties) == null ? void 0 : _k.padding) style.padding = this.properties.padding;
+    if ((_l = this.properties) == null ? void 0 : _l.paddingLeft) style.paddingLeft = this.properties.paddingLeft;
+    if ((_m = this.properties) == null ? void 0 : _m.paddingRight) style.paddingRight = this.properties.paddingRight;
+    if ((_n = this.properties) == null ? void 0 : _n.paddingTop) style.paddingTop = this.properties.paddingTop;
+    if ((_o = this.properties) == null ? void 0 : _o.paddingBottom) style.paddingBottom = this.properties.paddingBottom;
+    if ((_p = this.properties) == null ? void 0 : _p.left) style.left = this.properties.left;
+    if ((_q = this.properties) == null ? void 0 : _q.right) style.right = this.properties.right;
+    if ((_r = this.properties) == null ? void 0 : _r.top) style.top = this.properties.top;
+    if ((_s = this.properties) == null ? void 0 : _s.bottom) style.bottom = this.properties.bottom;
+    if ((_t = this.properties) == null ? void 0 : _t.width) style.width = this.properties.width;
+    if ((_u = this.properties) == null ? void 0 : _u.height) style.height = this.properties.height;
+    if ((_v = this.properties) == null ? void 0 : _v.maxWidth) style.maxWidth = this.properties.maxWidth;
+    if ((_w = this.properties) == null ? void 0 : _w.maxHeight) style.maxHeight = this.properties.maxHeight;
+    if ((_x = this.properties) == null ? void 0 : _x.minWidth) style.minWidth = this.properties.minWidth;
+    if ((_y = this.properties) == null ? void 0 : _y.minHeight) style.minHeight = this.properties.minHeight;
+    if ((_z = this.properties) == null ? void 0 : _z.textAlign) style.textAlign = this.properties.textAlign;
+    if ((_A = this.properties) == null ? void 0 : _A.backgroundColor) style.backgroundColor = this.properties.backgroundColor;
+    if ((_B = this.properties) == null ? void 0 : _B.borderLeftWidth) style.borderLeftWidth = this.properties.borderLeftWidth;
+    if ((_C = this.properties) == null ? void 0 : _C.borderRightWidth) style.borderRightWidth = this.properties.borderRightWidth;
+    if ((_D = this.properties) == null ? void 0 : _D.borderTopWidth) style.borderTopWidth = this.properties.borderTopWidth;
+    if ((_E = this.properties) == null ? void 0 : _E.borderBottomWidth) style.borderBottomWidth = this.properties.borderBottomWidth;
+    if ((_F = this.properties) == null ? void 0 : _F.borderTopLeftRadius) style.borderTopLeftRadius = this.properties.borderTopLeftRadius;
+    if ((_G = this.properties) == null ? void 0 : _G.borderTopRightRadius) style.borderTopRightRadius = this.properties.borderTopRightRadius;
+    if ((_H = this.properties) == null ? void 0 : _H.borderBottomLeftRadius) style.borderBottomLeftRadius = this.properties.borderBottomLeftRadius;
+    if ((_I = this.properties) == null ? void 0 : _I.borderBottomRightRadius) style.borderBottomRightRadius = this.properties.borderBottomRightRadius;
+    if (((_J = this.properties) == null ? void 0 : _J.borderColor) && style.borderLeftWidth) {
       style.borderLeftStyle = "solid";
-      style.borderLeftColor = (_J = this.properties) == null ? void 0 : _J.borderColor;
+      style.borderLeftColor = (_K = this.properties) == null ? void 0 : _K.borderColor;
     }
-    if (((_K = this.properties) == null ? void 0 : _K.borderColor) && style.borderRightWidth) {
+    if (((_L = this.properties) == null ? void 0 : _L.borderColor) && style.borderRightWidth) {
       style.borderRightStyle = "solid";
-      style.borderRightColor = (_L = this.properties) == null ? void 0 : _L.borderColor;
+      style.borderRightColor = (_M = this.properties) == null ? void 0 : _M.borderColor;
     }
-    if (((_M = this.properties) == null ? void 0 : _M.borderColor) && style.borderTopWidth) {
+    if (((_N = this.properties) == null ? void 0 : _N.borderColor) && style.borderTopWidth) {
       style.borderTopStyle = "solid";
-      style.borderTopColor = (_N = this.properties) == null ? void 0 : _N.borderColor;
+      style.borderTopColor = (_O = this.properties) == null ? void 0 : _O.borderColor;
     }
-    if (((_O = this.properties) == null ? void 0 : _O.borderColor) && style.borderBottomWidth) {
+    if (((_P = this.properties) == null ? void 0 : _P.borderColor) && style.borderBottomWidth) {
       style.borderBottomStyle = "solid";
-      style.borderBottomColor = (_P = this.properties) == null ? void 0 : _P.borderColor;
+      style.borderBottomColor = (_Q = this.properties) == null ? void 0 : _Q.borderColor;
     }
     return style;
   }
@@ -7534,8 +7559,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     const pageBuilder = usePageBuilder();
     const comp = computed(() => pageBuilder.getCustomWidgetComponent(props.part));
     const bind = computed(() => ({
-      ...props.part.properties || {},
-      placeholder: props.placeholder
+      ...props.part.properties || {}
     }));
     return (_ctx, _cache) => {
       return comp.value ? (openBlock(), createBlock$1(resolveDynamicComponent(comp.value), normalizeProps(mergeProps({ key: 0 }, bind.value)), null, 16)) : createCommentVNode("", true);
@@ -8121,15 +8145,15 @@ class PartManager {
 const defaultPartPropertyEditors = () => {
   return {
     "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-Dgp_AVOD.js")),
-    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-tvKIJh2H.js")),
+    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-bXscT9jE.js")),
     "number": () => defineAsyncComponent(() => import("./PbPropertyEditorNumber-TTgo0zbQ.js")),
     "boolean": () => defineAsyncComponent(() => import("./PbPropertyEditorBoolean-C7-iSAtn.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-RrUB1pI3.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-BqEprlZ-.js")),
     "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-CWedbXJI.js")),
-    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-Btwd1WP_.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-BV2SeGBT.js")),
-    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-DQpflvo0.js")),
-    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-Bcq06f0I.js"))
+    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-Cb7qpN96.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-BG7rGnU3.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-DRmHv8Gm.js")),
+    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-Bz_UU0kC.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -8180,6 +8204,7 @@ const setSelectHandler = (el, binding) => {
   el.onmousedown = async (event) => {
     if (event.button === 0) {
       setTimeout(() => {
+        if (pageBuilder.context.isSelected(part)) return;
         if (event.shiftKey) {
           pageBuilder.context.addSelection([part]);
         } else {
@@ -8198,9 +8223,8 @@ const setContextMenuHandler = (el, binding) => {
     const eventAny = event;
     if (eventAny._partContextMenuHandled) return;
     else eventAny._partContextMenuHandled = true;
-    if (!pageBuilder.context.isSelected(part)) {
-      pageBuilder.context.setSelection([part]);
-    }
+    if (pageBuilder.context.isSelected(part)) return;
+    pageBuilder.context.setSelection([part]);
   };
 };
 const createPositionMark = () => {
@@ -8369,11 +8393,7 @@ const locateRight = (style, top, height) => {
   style.height = height || "";
 };
 const getLayoutDirection = (isMobilePage, properties) => {
-  if (isMobilePage) {
-    return properties && properties.directionSm || "vertical";
-  } else {
-    return properties && properties.directionLg || "horizontal";
-  }
+  return properties && properties.direction || (isMobilePage ? "vertical" : "horizontal");
 };
 const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
@@ -8871,7 +8891,8 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "PbBlock",
   props: {
     part: {},
-    isMobilePage: { type: Boolean }
+    isMobilePage: { type: Boolean },
+    placeholder: { type: Boolean }
   },
   setup(__props) {
     const props = __props;
@@ -9095,7 +9116,8 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "PbSection",
   props: {
     part: {},
-    isMobilePage: { type: Boolean }
+    isMobilePage: { type: Boolean },
+    placeholder: { type: Boolean }
   },
   setup(__props) {
     const props = __props;
@@ -11941,14 +11963,8 @@ const layoutGroup = () => {
     caption: "Layout",
     properties: [
       {
-        propertyName: "directionSm",
-        caption: "Direction for Mobile (<= 768px)",
-        propertyType: "select",
-        params: "vertical,horizontal"
-      },
-      {
-        propertyName: "directionLg",
-        caption: "Direction for PC (> 768px)",
+        propertyName: "direction",
+        caption: "Layout",
         propertyType: "select",
         params: "vertical,horizontal"
       },
@@ -11967,10 +11983,50 @@ const alignGroup = () => {
     caption: "Align",
     properties: [
       {
-        propertyName: "align",
-        caption: "Align",
+        propertyName: "alignItems",
+        caption: "Align Items",
+        propertyType: "select",
+        params: "start,center,end"
+      },
+      {
+        propertyName: "justifyContent",
+        caption: "Justify Content",
+        propertyType: "select",
+        params: "start,center,end,between"
+      },
+      {
+        propertyName: "alignSelf",
+        caption: "Align Self",
+        propertyType: "select",
+        params: "start,center,end"
+      }
+    ]
+  };
+};
+const alignItemsGroup = () => {
+  return {
+    groupName: "align",
+    caption: "Align",
+    properties: [
+      {
+        propertyName: "alignItems",
+        caption: "Align Items",
+        propertyType: "select",
+        params: "start,center,end"
+      }
+    ]
+  };
+};
+const alignSelfGroup = () => {
+  return {
+    groupName: "align",
+    caption: "Align",
+    properties: [
+      {
+        propertyName: "alignSelf",
+        caption: "Align Self",
         propertyType: "select",
-        params: "left,center,right"
+        params: ",start,center,end"
       }
     ]
   };
@@ -12052,7 +12108,7 @@ const defaultPropertyGroups = () => {
   return [layoutGroup(), alignGroup(), sizeGroup(), marginGroup(), paddingGroup(), backgroundGroup(), commonGroup()];
 };
 const defaultWidgetPropertyGroups = () => {
-  return [alignGroup(), positionGroup(), sizeGroup(), marginGroup(), paddingGroup(), borderGroup(), backgroundGroup(), commonGroup()];
+  return [alignSelfGroup(), positionGroup(), sizeGroup(), marginGroup(), paddingGroup(), borderGroup(), backgroundGroup(), commonGroup()];
 };
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "PbContainerWidget",
@@ -12103,13 +12159,13 @@ const pageParts = [
           }
         ]
       },
-      alignGroup(),
+      alignItemsGroup(),
       paddingGroup(),
       backgroundGroup(),
       commonGroup()
     ],
     initialProperties: {
-      align: "center"
+      alignItems: "center"
     },
     allowsChild: () => true,
     creator: () => _sfc_main$l
@@ -12126,9 +12182,9 @@ const sectionParts = [
       ...defaultPropertyGroups()
     ],
     initialProperties: {
-      directionSm: "horizontal",
-      directionLg: "horizontal",
-      align: "center"
+      direction: "horizontal",
+      alignItems: "start",
+      justifyContent: "start"
     },
     allowsChild: () => true,
     creator: () => _sfc_main$l
@@ -12145,9 +12201,9 @@ const blockParts = [
       ...defaultPropertyGroups()
     ],
     initialProperties: {
-      directionSm: "vertical",
-      directionLg: "vertical",
-      align: "center"
+      direction: "vertical",
+      alignItems: "start",
+      justifyContent: "start"
     },
     allowsChild: () => true,
     creator: () => _sfc_main$n
@@ -12431,7 +12487,7 @@ __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
 let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
 const openWidgetAddModal = (modal, args, callback) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./PbWidgetAddModal-Ca9HNoSU.js")),
+    component: defineAsyncComponent(() => import("./PbWidgetAddModal-Cfhjs6Z4.js")),
     style: {
       width: "80%",
       height: "80%",
@@ -12465,12 +12521,38 @@ const openWidgetAddModal = (modal, args, callback) => {
   });
 };
 const findInsertTargetAndIndex = (pageBuilder, partType) => {
-  var _a;
+  var _a, _b, _c;
   const selected = pageBuilder.context.getSelectedParts()[0];
-  pageBuilder.context.getSelectedPage();
-  const target = pageBuilder.partManager.findNearestAvailableParentPart(selected, partType);
-  const index = selected === target || !(target == null ? void 0 : target.children) ? ((_a = target == null ? void 0 : target.children) == null ? void 0 : _a.length) || 0 : target.children.indexOf(selected) + 1;
-  return { target, index };
+  const page = pageBuilder.context.getSelectedPage();
+  if (!page) return {};
+  if (partType === SECTION_TYPE) {
+    const section = pageBuilder.partManager.findNearestSection(selected);
+    return {
+      target: page,
+      index: section ? page.children.indexOf(section) + 1 : (_a = page.children) == null ? void 0 : _a.length
+    };
+  } else if (partType === BLOCK_TYPE) {
+    let section = pageBuilder.partManager.findNearestSection(selected);
+    let block = pageBuilder.partManager.findNearestBlock(selected);
+    if (!section) {
+      section = page.children[page.children.length - 1];
+    }
+    return {
+      target: section,
+      index: block ? section.children.indexOf(block) + 1 : (_b = section.children) == null ? void 0 : _b.length
+    };
+  } else {
+    let block = pageBuilder.partManager.findNearestBlock(selected);
+    let widget = selected.parent.isWidget() ? selected.parent : selected;
+    if (!block) {
+      const section = page.children[page.children.length - 1];
+      block = section.children[section.children.length - 1];
+    }
+    return {
+      target: block,
+      index: widget ? block.children.indexOf(widget) + 1 : (_c = block.children) == null ? void 0 : _c.length
+    };
+  }
 };
 const createPartWithDefinition = (def, properties) => {
   const part = createPart(def.partType, def.partName, def.initialProperties);
@@ -12537,9 +12619,14 @@ const _AddSectionCommand = class _AddSectionCommand {
     if (args && args.page) {
       addSectionToPage(pageBuilder, args.page);
     } else {
-      const def = pageBuilder.partManager.getSectionDefinition();
-      if (!def) return;
-      addPart(pageBuilder, def);
+      const selected = pageBuilder.context.getSelectedParts()[0];
+      if (selected && selected.isPage()) {
+        addSectionToPage(pageBuilder, selected);
+      } else {
+        const def = pageBuilder.partManager.getSectionDefinition();
+        if (!def) return;
+        addPart(pageBuilder, def);
+      }
     }
   }
 };
@@ -12931,11 +13018,20 @@ const _DeletePartCommand = class _DeletePartCommand {
     __publicField(this, "caption", _DeletePartCommand.CAPTION);
   }
   execute(pageBuilder) {
-    const partIds = pageBuilder.context.getSelectedParts().map((part) => part.partId);
-    const param = {
-      delete: partIds
-    };
-    pageBuilder.model.updateModel(param);
+    const selected = pageBuilder.context.getSelectedParts();
+    if (selected.length === 0) return;
+    let partIds;
+    if (selected[0].isPage()) {
+      const page = selected[0];
+      const partsToDelete = page.children || [];
+      if (partsToDelete.length === 0) return;
+      partIds = partsToDelete.map((part) => part.partId);
+    } else {
+      partIds = selected.filter((part) => {
+        return !selected.some((v) => part.isChildOf(v));
+      }).map((part) => part.partId);
+    }
+    pageBuilder.model.updateModel({ delete: partIds });
   }
 };
 __publicField(_DeletePartCommand, "COMMAND_ID", "DeletePart");
@@ -12957,7 +13053,11 @@ const _CopyPartCommand = class _CopyPartCommand {
     __publicField(this, "commandId", _CopyPartCommand.COMMAND_ID);
   }
   async execute(pageBuilder) {
-    const partIds = pageBuilder.context.getSelectedParts().map((part) => part.partId);
+    const selected = pageBuilder.context.getSelectedParts();
+    if (selected.length === 0) return;
+    const partIds = selected.filter((part) => {
+      return !selected.some((v) => part.isChildOf(v));
+    }).map((part) => part.partId);
     if (partIds.length > 0) {
       const json = pageBuilder.model.serializeParts(partIds);
       await navigator.clipboard.writeText(json);
@@ -12982,13 +13082,14 @@ const _PastePartCommand = class _PastePartCommand {
     __publicField(this, "commandId", _PastePartCommand.COMMAND_ID);
   }
   async execute(pageBuilder) {
+    var _a;
     const json = await navigator.clipboard.readText();
     const object = JSON.parse(json);
     if (object.partType === ROOT_TYPE) {
       const rootPart = partFromJsonObject(object, true);
       if (!rootPart) throw new Error("Invalid data format");
       let partIdsToDelete = void 0;
-      if (pageBuilder.model.rootPart.children && pageBuilder.model.rootPart.children.length) {
+      if ((_a = pageBuilder.model.rootPart.children) == null ? void 0 : _a.length) {
         partIdsToDelete = pageBuilder.model.rootPart.children.map((v) => v.partId);
       }
       const param = {
@@ -13002,13 +13103,88 @@ const _PastePartCommand = class _PastePartCommand {
         ]
       };
       pageBuilder.model.updateModel(param);
+    } else if (Array.isArray(object) && object[0] && object[0].partType === PAGE_TYPE) {
+      const newPages = pageBuilder.model.parseParts(json);
+      if (!newPages) throw new Error("Invalid data format");
+      const newPage = newPages[0];
+      const selectedPage = pageBuilder.context.getSelectedPage();
+      if (!selectedPage) return;
+      const pages = pageBuilder.model.rootPart.children;
+      if (!pages) return;
+      let index = 0;
+      if (pages.length == 1) {
+        newPage.properties = {
+          ...newPage.properties || {},
+          name: "Page"
+        };
+      } else if (selectedPage === pages[0]) {
+        newPage.properties = {
+          ...newPage.properties || {},
+          name: "Page (Mobile)"
+        };
+      } else if (selectedPage === pages[1]) {
+        newPage.properties = {
+          ...newPage.properties || {},
+          name: "Page (PC)"
+        };
+        index = 1;
+      }
+      const param = {
+        delete: [selectedPage.partId],
+        insert: [
+          {
+            partId: pageBuilder.model.getRootPartId(),
+            index,
+            parts: [newPage]
+          }
+        ]
+      };
+      pageBuilder.model.updateModel(param);
     } else {
-      const { target, index = 0 } = findInsertTargetAndIndex(pageBuilder);
-      if (target) {
-        const parts = pageBuilder.model.parseParts(json);
-        if (parts) {
-          insertParts(pageBuilder, target.partId, index, parts, false);
+      const parts = pageBuilder.model.parseParts(json);
+      if (!parts) return;
+      let pasteType = "";
+      parts.forEach((part) => {
+        if (part.partType === SECTION_TYPE) pasteType = SECTION_TYPE;
+        else if (part.partType === BLOCK_TYPE && (!pasteType || pasteType === WIDGET_TYPE)) pasteType = BLOCK_TYPE;
+        else if (part.partType === WIDGET_TYPE && !pasteType) pasteType = WIDGET_TYPE;
+      });
+      if (!pasteType) return;
+      const partsToInsert = parts.map((part) => {
+        if (pasteType === SECTION_TYPE) {
+          if (part.partType === SECTION_TYPE) {
+            return part;
+          } else if (part.partType === BLOCK_TYPE) {
+            const section = createSection(pageBuilder);
+            if (!section) return;
+            section.children = [part];
+            return section;
+          } else {
+            const block = createBlock(pageBuilder);
+            if (!block) return;
+            block.children = [part];
+            const section = createSection(pageBuilder);
+            if (!section) return;
+            section.children = [block];
+            return section;
+          }
+        } else if (pasteType === BLOCK_TYPE) {
+          if (part.partType === BLOCK_TYPE) {
+            return part;
+          } else {
+            const block = createBlock(pageBuilder);
+            if (!block) return;
+            block.children = [part];
+            return block;
+          }
+        } else {
+          return part;
         }
+      }).filter(notNull);
+      const targetType = pasteType === SECTION_TYPE ? SECTION_TYPE : pasteType === BLOCK_TYPE ? BLOCK_TYPE : WIDGET_TYPE;
+      const { target, index } = findInsertTargetAndIndex(pageBuilder, targetType);
+      if (target && index !== void 0 && partsToInsert) {
+        insertParts(pageBuilder, target.partId, index, partsToInsert, false);
       }
     }
   }
@@ -13384,6 +13560,7 @@ class PageBuilderContextImpl {
     }
   }
   addSelection(parts) {
+    if (parts && !parts.length) return;
     parts.forEach((part) => this.selection.push(part));
   }
   removeSelection(parts) {
@@ -14260,7 +14437,6 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const style = computed(() => {
       var _a, _b;
       return {
-        // width: `${props.width || 420}px`,
         minHeight: ((_b = (_a = props.part) == null ? void 0 : _a.children) == null ? void 0 : _b.length) ? void 0 : "200px"
       };
     });
@@ -14281,7 +14457,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const contextMenu = useContextMenu();
     const handleClick = (event) => {
       if (event.button === 0) {
-        pageBuilder.context.clearSelection();
+        pageBuilder.context.setSelection([props.part]);
       }
     };
     const showContextMenu = (event) => {
@@ -14334,8 +14510,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const canvasStyle = '.pb-page-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\n\n.pb-page {\n  width: 100%;\n  margin: 0 auto;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n.pb-page .pb-page-content.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-page * {\n  box-sizing: border-box;\n}\n\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\n\n.pb-add-widget-button button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  padding: 8px;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n\n.pb-section {\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n  background-color: #fff;\n}\n\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n\n.pb-section.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-section.pb-section-static {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n}\n\n.pb-section.pb-section-static:after {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n}\n\n.pb-section-static .pb-widget {\n  outline: none;\n}\n\n.pb-block {\n  display: flex;\n  min-width: 1px;\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n  outline: 1px dashed #ccc;\n}\n\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n\n.pb-block.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-widget {\n  position: relative;\n  outline: 1px dashed #ccc;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  pointer-events: auto !important;\n}\n\n.pb-widget * {\n  pointer-events: none;\n}\n\n.pb-widget.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.pb-widget .pan-handle {\n  position: absolute;\n  left: -6px;\n  top: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: move;\n  pointer-events: auto !important;\n}\n\n.pb-widget .resize-handle {\n  position: absolute;\n  right: -6px;\n  bottom: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: nwse-resize;\n  pointer-events: auto !important;\n}\n\n.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-text-widget .text {\n  color: #333;\n}\n\n.pb-text-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-image-widget {\n  width: 100%;\n}\n\n.pb-image-widget .image {\n  width: 100%;\n}\n\n.pb-image-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-image-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-html-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-iframe-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-iframe-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-youtube-widget {\n  width: 100%;\n}\n\n.pb-youtube-widget .youtube {\n  width: 100%;\n  height: 100%;\n}\n\n.pb-youtube-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-youtube-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-container-widget {\n  width: 100%;\n}\n\n.pb-container-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-container-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-product-list-widget {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n\n.pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n\n.pb-product-list-widget .product-wrapper .product {\n  width: 95%;\n  margin: 0 auto;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n\n.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-product-list-widget .product-wrapper .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 200px;\n  vertical-align: middle;\n}\n\n@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n\n.pb-login-widget h3 {\n  padding: 0;\n  margin: 0;\n  font-size: 32px;\n  font-weight: bold;\n  color: #ccc;\n  line-height: 200px;\n  vertical-align: middle;\n}\n\n.font-icon {\n  font-family: Material Symbols Outlined, monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\n\nhtml, body {\n  font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n  font-size: 12px;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  background-color: #aaa;\n  overflow: hidden;\n}\n\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\n}\n\n.pb-add-section-handle {\n  position: relative;\n  text-align: center;\n  cursor: pointer;\n  z-index: 5;\n  height: 0;\n}\n\n.pb-add-section-handle.top::before, .pb-add-section-handle.bottom::before, .pb-add-section-handle.middle::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.pb-add-section-handle.bottom {\n  left: 50%;\n  bottom: -32px;\n}\n\n.pb-add-section-handle:hover.top::before, .pb-add-section-handle:hover.bottom::before, .pb-add-section-handle:hover.middle::before,\n.pb-add-section-handle:hover > i {\n  opacity: 1;\n}\n\n.pb-add-section-handle > i {\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}';
-const _hoisted_1$2 = ["height", "width"];
+const canvasStyle = '.pb-page-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\n\n.pb-page {\n  display: flex;\n  flex-direction: column;\n  margin: 0 auto;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n.pb-page .pb-page-content.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-page * {\n  box-sizing: border-box;\n}\n\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\n\n.pb-add-widget-button button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  padding: 8px;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n\n.pb-section {\n  display: flex;\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n  background-color: #fff;\n}\n\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n\n.pb-section.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-section.pb-section-static {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n}\n\n.pb-section.pb-section-static:after {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n}\n\n.pb-section-static .pb-widget {\n  outline: none;\n}\n\n.pb-block {\n  display: flex;\n  min-width: 1px;\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n  outline: 1px dashed #ccc;\n}\n\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n\n.pb-block.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-widget {\n  position: relative;\n  outline: 1px dashed #ccc;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  pointer-events: auto !important;\n}\n\n.pb-widget * {\n  pointer-events: none;\n}\n\n.pb-widget.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.pb-widget .pan-handle {\n  position: absolute;\n  left: -6px;\n  top: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: move;\n  pointer-events: auto !important;\n}\n\n.pb-widget .resize-handle {\n  position: absolute;\n  right: -6px;\n  bottom: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: nwse-resize;\n  pointer-events: auto !important;\n}\n\n.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-text-widget .text {\n  color: #333;\n}\n\n.pb-text-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-image-widget {\n  width: 100%;\n}\n\n.pb-image-widget .image {\n  width: 100%;\n}\n\n.pb-image-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-image-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-html-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-iframe-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-iframe-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-youtube-widget {\n  width: 100%;\n}\n\n.pb-youtube-widget .youtube {\n  width: 100%;\n  height: 100%;\n}\n\n.pb-youtube-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-youtube-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-container-widget {\n  width: 100%;\n}\n\n.pb-container-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-container-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-product-list-widget {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n\n.pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n\n.pb-product-list-widget .product-wrapper .product {\n  width: 95%;\n  margin: 0 auto;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n\n.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-product-list-widget .product-wrapper .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 200px;\n  vertical-align: middle;\n}\n\n@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n\n.pb-login-widget h3 {\n  padding: 0;\n  margin: 0;\n  font-size: 32px;\n  font-weight: bold;\n  color: #ccc;\n  line-height: 200px;\n  vertical-align: middle;\n}\n\n.font-icon {\n  font-family: Material Symbols Outlined, monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\n\nhtml, body {\n  font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n  font-size: 12px;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  background-color: #aaa;\n  overflow: hidden;\n}\n\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\n}\n\n.pb-add-section-handle {\n  position: relative;\n  text-align: center;\n  cursor: pointer;\n  z-index: 5;\n  height: 0;\n}\n\n.pb-add-section-handle.top::before, .pb-add-section-handle.bottom::before, .pb-add-section-handle.middle::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.pb-add-section-handle.bottom {\n  left: 50%;\n  bottom: -32px;\n}\n\n.pb-add-section-handle:hover.top::before, .pb-add-section-handle:hover.bottom::before, .pb-add-section-handle:hover.middle::before,\n.pb-add-section-handle:hover > i {\n  opacity: 1;\n}\n\n.pb-add-section-handle > i {\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}';
+const _hoisted_1$2 = ["width"];
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "PbPageFrame",
   props: {
@@ -14396,35 +14572,41 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       }
     );
     const width = ref(props.width);
-    const height = ref(200);
+    ref(200);
     const isMobilePage = computed(() => width.value <= 768);
     const style = computed(() => ({
       // width: `${width.value}px`,
       // height: `${height.value}px`,
     }));
     let resizeObserver;
+    let mutationObserver;
     const updateIframeHeight = () => {
-      setTimeout(() => {
+      requestAnimationFrame(() => {
         if (!iframeRef.value || !iframeRef.value.contentDocument) return;
         const iframeBody = iframeRef.value.contentDocument.body;
         if (iframeBody) {
-          height.value = iframeBody.scrollHeight;
+          iframeRef.value.style.height = "1px";
+          const newHeight = iframeBody.scrollHeight;
+          iframeRef.value.style.height = `${newHeight}px`;
         }
-      }, 100);
+      });
     };
     onMounted(() => {
       if (!iframeRef.value || !iframeRef.value.contentDocument) return;
       const iframeBody = iframeRef.value.contentDocument.body;
-      resizeObserver = new ResizeObserver(() => {
-        updateIframeHeight();
-      });
+      resizeObserver = new ResizeObserver(updateIframeHeight);
       resizeObserver.observe(iframeBody, {});
+      mutationObserver = new MutationObserver(updateIframeHeight);
+      mutationObserver.observe(iframeBody, { childList: true, subtree: true });
       iframeRef.value.onload = updateIframeHeight;
     });
     onBeforeUnmount(() => {
       if (resizeObserver) {
         resizeObserver.disconnect();
       }
+      if (mutationObserver) {
+        mutationObserver.disconnect();
+      }
     });
     return (_ctx, _cache) => {
       var _a, _b, _c, _d;
@@ -14446,7 +14628,6 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         createElementVNode("iframe", {
           ref_key: "iframeRef",
           ref: iframeRef,
-          height: `${height.value}px`,
           style: normalizeStyle(style.value),
           width: `${width.value}px`,
           class: "page-frame mt-12"