@g1cloud/page-builder-editor 1.0.0-alpha.26 → 1.0.0-alpha.28

package/dist/{index-ymPNKJAe.js → index-D6sT9Qxe.js}

@@ -6687,18 +6687,19 @@ class Part {
     if (align === "right") return "flex-end";
     return "center";
   }
-  getStyles() {
+  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;
     const style = {};
     const align = ((_a = this.properties) == null ? void 0 : _a.align) || "center";
     if (this.isWidget()) {
       style.alignSelf = this.getAlignStyleValue(align);
     } else {
-      if (((_b = this.properties) == null ? void 0 : _b.direction) === "horizontal") {
+      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 (((_c = this.properties) == null ? void 0 : _c.direction) === "vertical") {
+      } else if (direction === "vertical") {
         style.display = "flex";
         style.flexDirection = "column";
         style.alignItems = this.getAlignStyleValue(align);
@@ -6852,7 +6853,7 @@ const _sfc_main$c$1 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const className = computed(() => getPartClassName(props.part));
+    const classNames = computed(() => [getPartClassName(props.part), props.part.getClassNames()]);
     const styleTag = computed(() => props.part.getStyleTag());
     const style = computed(() => ({
       ...props.part.getStyles(),
@@ -6866,7 +6867,7 @@ const _sfc_main$c$1 = /* @__PURE__ */ defineComponent({
           innerHTML: styleTag.value
         }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
         createElementVNode("div", {
-          class: normalizeClass([className.value, "pb-widget"]),
+          class: normalizeClass([classNames.value, "pb-widget"]),
           "data-part-id": _ctx.part.partId,
           style: normalizeStyle(style.value)
         }, [
@@ -6883,14 +6884,15 @@ const _hoisted_1$a$1 = ["data-part-id"];
 const _sfc_main$b$1 = /* @__PURE__ */ defineComponent({
   __name: "PbBlock",
   props: {
-    part: {}
+    part: {},
+    isMobilePage: { type: Boolean }
   },
   setup(__props) {
     const props = __props;
-    const classNames = computed(() => props.part.getClassNames());
+    const classNames = computed(() => [getPartClassName(props.part), props.part.getClassNames()]);
     const styleTag = computed(() => props.part.getStyleTag());
     const style = computed(() => ({
-      ...props.part.getStyles(),
+      ...props.part.getStyles(props.isMobilePage),
       ...props.part.getInlineStyles()
     }));
     computed(() => createPartComponents(props.part.children));
@@ -6941,14 +6943,15 @@ const _hoisted_1$8$1 = ["data-part-id"];
 const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
   __name: "PbSection",
   props: {
-    part: {}
+    part: {},
+    isMobilePage: { type: Boolean }
   },
   setup(__props) {
     const props = __props;
-    const classNames = computed(() => props.part.getClassNames());
+    const classNames = computed(() => [getPartClassName(props.part), props.part.getClassNames()]);
     const styleTag = computed(() => props.part.getStyleTag());
     const style = computed(() => ({
-      ...props.part.getStyles(),
+      ...props.part.getStyles(props.isMobilePage),
       ...props.part.getInlineStyles()
     }));
     return (_ctx, _cache) => {
@@ -6969,8 +6972,9 @@ const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
           }, null, 8, ["part"])) : _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.part.children, (block) => {
             return openBlock(), createBlock$1(_sfc_main$b$1, {
               key: block.partId,
+              "is-mobile-page": _ctx.isMobilePage,
               part: block
-            }, null, 8, ["part"]);
+            }, null, 8, ["is-mobile-page", "part"]);
           }), 128)) : createCommentVNode("", true)
         ], 14, _hoisted_1$8$1)
       ], 64);
@@ -7403,13 +7407,10 @@ const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const classNames = computed(() => {
-      var _a;
-      return `${(_a = props.part) == null ? void 0 : _a.getClassNames()} ${props.isMobilePage ? "mobile" : "pc"}`;
-    });
+    const classNames = computed(() => [getPartClassName(props.part), props.part.getClassNames(), props.isMobilePage ? "mobile" : "pc"]);
     const styleTag = computed(() => props.part.getStyleTag());
     const style = computed(() => ({
-      ...props.part.getStyles(),
+      ...props.part.getStyles(props.isMobilePage),
       ...props.part.getInlineStyles()
     }));
     return (_ctx, _cache) => {
@@ -7429,8 +7430,9 @@ const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
             (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.part.children, (section) => {
               return openBlock(), createBlock$1(_sfc_main$9$1, {
                 key: section.partId,
+                "is-mobile-page": _ctx.isMobilePage,
                 part: section
-              }, null, 8, ["part"]);
+              }, null, 8, ["is-mobile-page", "part"]);
             }), 128))
           ], 2)
         ], 14, _hoisted_1$2$1)
@@ -8129,13 +8131,13 @@ class PartManager {
 const defaultPartPropertyEditors = () => {
   return {
     "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-Dgp_AVOD.js")),
-    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-CQwH7v7k.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-Bnro6dbg.js")),
+    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-B19310oG.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-BjnxPdTc.js")),
     "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-CWedbXJI.js")),
-    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-6nHFFcG2.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-D47dKq2n.js")),
-    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-BeIgPnp1.js")),
-    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-sa28xTeJ.js"))
+    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-Ph16JiGf.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-6ebH3rsd.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-BQ9llP6f.js")),
+    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-DJlDigCR.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -8374,6 +8376,13 @@ const locateRight = (style, top, height) => {
   style.width = "20px";
   style.height = height || "";
 };
+const getLayoutDirection = (isMobilePage, properties) => {
+  if (isMobilePage) {
+    return properties && properties.directionSm || "vertical";
+  } else {
+    return properties && properties.directionLg || "horizontal";
+  }
+};
 const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
   for (const [key, val] of props) {
@@ -8425,7 +8434,8 @@ const _hoisted_1$r = ["data-part-id", "draggable"];
 const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "PbWidget",
   props: {
-    part: {}
+    part: {},
+    isMobilePage: { type: Boolean }
   },
   setup(__props) {
     const mouseTracker = useMouseTracker();
@@ -8509,11 +8519,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
         placeholder: true
       };
     });
-    const thisComponent = computed(() => pageBuilder.partManager.createPartComponent(props.part));
-    computed(() => pageBuilder.partManager.createPartComponents(props.part.children));
-    const droppable = computed(() => {
-      return pageBuilder.partManager.isChildAllowed(props.part);
-    });
+    const component = computed(() => pageBuilder.partManager.createPartComponent(props.part));
     const locatePositionMark = (mark, target, mouseOffsetX, mouseOffsetY, draggingPart2, event) => {
       if (props.part.isNestedWidget()) {
         if (draggingPart2.isWidget())
@@ -8528,7 +8534,6 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
         locateWidget(mark, target, mouseOffsetX, mouseOffsetY, draggingPart2);
     };
     const locateSection = (mark, target, mouseOffsetX, mouseOffsetY, draggingPart2, event) => {
-      var _a, _b, _c;
       mark.style.background = "#e67e22";
       const widget2 = props.part;
       const widgetElement = target;
@@ -8543,8 +8548,10 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       const isFirstBlock = blockIndex === 0;
       const isLastBlock = blockIndex === section.children.length - 1;
       const centerY = widgetElement.offsetHeight / 2;
-      if (((_a = section.properties) == null ? void 0 : _a.direction) === "vertical") {
-        if (((_b = block.properties) == null ? void 0 : _b.direction) === "vertical") {
+      const sectionDirection = getLayoutDirection(props.isMobilePage, section.properties);
+      const blockDirection = getLayoutDirection(props.isMobilePage, block.properties);
+      if (sectionDirection === "vertical") {
+        if (blockDirection === "vertical") {
           if (isFirstBlock && isFirstWidget && mouseOffsetY <= centerY)
             locateTop(mark.style);
           else if (isLastBlock && isLastWidget && mouseOffsetY > centerY)
@@ -8560,7 +8567,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
             locateNone(mark.style);
         }
       } else {
-        if (((_c = block.properties) == null ? void 0 : _c.direction) === "vertical") {
+        if (blockDirection === "vertical") {
           if (isFirstWidget && mouseOffsetY <= centerY)
             locateTop(mark.style, `-${blockElement.offsetLeft + widgetElement.offsetLeft}px`, `${sectionElement.offsetWidth}px`);
           else if (isLastWidget && mouseOffsetY > centerY)
@@ -8576,7 +8583,6 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       }
     };
     const locateBlock = (mark, target, mouseOffsetX, mouseOffsetY, draggingPart2, event) => {
-      var _a, _b, _c;
       mark.style.background = "#8e44ad";
       const widgetElement = target;
       const block = props.part.parent;
@@ -8585,9 +8591,12 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       const isFirstWidget = widgetIndex === 0;
       const isLastWidget = widgetIndex === block.children.length - 1;
       const section = block.parent;
-      if (((_a = section.properties) == null ? void 0 : _a.direction) === "vertical") {
+      const sectionDirection = getLayoutDirection(props.isMobilePage, section.properties);
+      const blockDirection = getLayoutDirection(props.isMobilePage, block.properties);
+      console.log(sectionDirection, blockDirection);
+      if (sectionDirection === "vertical") {
         const centerY = widgetElement.offsetHeight / 2;
-        if (((_b = block.properties) == null ? void 0 : _b.direction) === "vertical") {
+        if (blockDirection === "vertical") {
           if (isFirstWidget && mouseOffsetY <= centerY)
             locateTop(mark.style);
           else if (isLastWidget && mouseOffsetY > centerY)
@@ -8602,7 +8611,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
         }
       } else {
         const centerX = widgetElement.offsetWidth / 2;
-        if (((_c = block.properties) == null ? void 0 : _c.direction) === "vertical") {
+        if (blockDirection === "vertical") {
           if (mouseOffsetX <= centerX)
             locateLeft(mark.style, `-${widgetElement.offsetTop}px`, `${blockElement.offsetHeight}px`);
           else
@@ -8618,8 +8627,11 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       }
     };
     const locateWidget = (mark, target, mouseOffsetX, mouseOffsetY, draggingPart2, event) => {
-      var _a, _b, _c;
-      if (draggingPart2.partId === props.part.partId && !props.part.isNestedWidget()) return;
+      var _a;
+      if (props.part.isNestedWidget()) {
+        locateNone(mark.style);
+        return;
+      }
       mark.style.background = "#27ae60";
       const isNestedWidget = props.part.isNestedWidget();
       const widget2 = isNestedWidget ? props.part.parent : props.part;
@@ -8629,25 +8641,26 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       const centerY = widgetElement.offsetHeight / 2;
       const quaterX = centerX / 2;
       const quaterY = centerY / 2;
+      const blockDirection = getLayoutDirection(props.isMobilePage, block.properties);
       if (!((_a = draggingPart2.children) == null ? void 0 : _a.length)) {
-        if (((_b = block.properties) == null ? void 0 : _b.direction) === "vertical") {
+        if (blockDirection === "vertical") {
           if (mouseOffsetY <= quaterY)
             locateTop(mark.style);
           else if (mouseOffsetY > quaterY * 3)
             locateBottom(mark.style);
-          else
+          else if (pageBuilder.partManager.isChildAllowed(props.part))
             locateCenter(mark.style);
         } else {
           if (mouseOffsetX <= quaterX)
             locateLeft(mark.style);
           else if (mouseOffsetX > quaterX * 3)
             locateRight(mark.style);
-          else
+          else if (pageBuilder.partManager.isChildAllowed(props.part))
             locateCenter(mark.style);
         }
         return;
       }
-      if (((_c = block.properties) == null ? void 0 : _c.direction) === "vertical") {
+      if (blockDirection === "vertical") {
         if (mouseOffsetY <= centerY)
           locateTop(mark.style);
         else
@@ -8660,17 +8673,13 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       }
     };
     const acceptChildPart = (pageBuilder2, part, target, _index, partId, event) => {
-      if (partId === props.part.partId && !props.part.isNestedWidget()) return;
+      if (partId === props.part.partId) return;
+      if (props.part.isNestedWidget()) return;
       const droppedPart = pageBuilder2.model.findPartById(partId);
       if (!droppedPart) return;
       const targetRect = target.getBoundingClientRect();
       const mouseOffsetX = event.clientX - targetRect.left;
       const mouseOffsetY = event.clientY - targetRect.top;
-      if (props.part.isNestedWidget()) {
-        if (droppedPart.isWidget())
-          acceptWidget(pageBuilder2, target, droppedPart, mouseOffsetX, mouseOffsetY);
-        return;
-      }
       if (droppedPart.isSection())
         acceptSection(pageBuilder2, target, droppedPart, mouseOffsetX, mouseOffsetY);
       else if (droppedPart.isBlock())
@@ -8679,7 +8688,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
         acceptWidget(pageBuilder2, target, droppedPart, mouseOffsetX, mouseOffsetY);
     };
     const acceptSection = (pageBuilder2, target, droppedPart, mouseOffsetX, mouseOffsetY) => {
-      var _a, _b, _c, _d;
+      var _a;
       const widget2 = props.part;
       const widgetElement = target;
       const block = widget2.parent;
@@ -8693,8 +8702,10 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       const centerY = widgetElement.offsetHeight / 2;
       const page = section.parent;
       let index;
-      if (((_a = section.properties) == null ? void 0 : _a.direction) === "vertical") {
-        if (((_b = block.properties) == null ? void 0 : _b.direction) === "vertical") {
+      const sectionDirection = getLayoutDirection(props.isMobilePage, section.properties);
+      const blockDirection = getLayoutDirection(props.isMobilePage, block.properties);
+      if (sectionDirection === "vertical") {
+        if (blockDirection === "vertical") {
           if (isFirstBlock && isFirstWidget && mouseOffsetY <= centerY) index = blockIndex;
           else if (isLastBlock && isLastWidget && mouseOffsetY > centerY) index = blockIndex + 1;
           else return;
@@ -8704,7 +8715,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           else return;
         }
       } else {
-        if (((_c = block.properties) == null ? void 0 : _c.direction) === "vertical") {
+        if (blockDirection === "vertical") {
           if (isFirstWidget && mouseOffsetY <= centerY) index = blockIndex;
           else if (isLastWidget && mouseOffsetY > centerY) index = blockIndex + 1;
           else return;
@@ -8713,11 +8724,11 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           else index = blockIndex + 1;
         }
       }
-      if (((_d = page.children) == null ? void 0 : _d.indexOf(droppedPart)) === index) return;
+      if (((_a = page.children) == null ? void 0 : _a.indexOf(droppedPart)) === index) return;
       pageBuilder2.model.moveElements(droppedPart.partId, section.partId, index);
     };
     const acceptBlock = (pageBuilder2, target, droppedPart, mouseOffsetX, mouseOffsetY) => {
-      var _a, _b, _c, _d;
+      var _a;
       const widget2 = props.part;
       const widgetElement = target;
       const block = widget2.parent;
@@ -8727,9 +8738,11 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       const section = block.parent;
       let blockIndex = section.children.indexOf(block) || 0;
       let index;
-      if (((_a = section.properties) == null ? void 0 : _a.direction) === "vertical") {
+      const sectionDirection = getLayoutDirection(props.isMobilePage, section.properties);
+      const blockDirection = getLayoutDirection(props.isMobilePage, block.properties);
+      if (sectionDirection === "vertical") {
         const centerY = widgetElement.offsetHeight / 2;
-        if (((_b = block.properties) == null ? void 0 : _b.direction) === "vertical") {
+        if (blockDirection === "vertical") {
           if (isFirstWidget && mouseOffsetY <= centerY) index = blockIndex;
           else if (isLastWidget && mouseOffsetY > centerY) index = blockIndex + 1;
           else return;
@@ -8739,7 +8752,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
         }
       } else {
         const centerX = widgetElement.offsetWidth / 2;
-        if (((_c = block.properties) == null ? void 0 : _c.direction) === "vertical") {
+        if (blockDirection === "vertical") {
           if (mouseOffsetX <= centerX) index = blockIndex;
           else index = blockIndex + 1;
         } else {
@@ -8748,11 +8761,10 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           else return;
         }
       }
-      if (((_d = section.children) == null ? void 0 : _d.indexOf(droppedPart)) === index) return;
+      if (((_a = section.children) == null ? void 0 : _a.indexOf(droppedPart)) === index) return;
       pageBuilder2.model.moveElements(droppedPart.partId, section.partId, index);
     };
     const acceptWidget = (pageBuilder2, target, droppedPart, mouseOffsetX, mouseOffsetY) => {
-      var _a, _b, _c, _d, _e, _f, _g;
       const isNestedWidget = props.part.isNestedWidget();
       const widget2 = isNestedWidget ? props.part.parent : props.part;
       const block = widget2.parent;
@@ -8762,73 +8774,64 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       const quaterX = centerX / 2;
       const quaterY = centerY / 2;
       let index;
-      if (!((_a = droppedPart.children) == null ? void 0 : _a.length)) {
-        if (((_b = block.properties) == null ? void 0 : _b.direction) === "vertical") {
-          if (mouseOffsetY <= quaterY) {
-            index = widgetIndex;
-          } else if (mouseOffsetY > quaterY * 3) {
-            index = widgetIndex + 1;
-          } else {
-            index = ((_c = widget2.children) == null ? void 0 : _c.length) || 0;
-            if (((_d = widget2.children) == null ? void 0 : _d.indexOf(droppedPart)) === index) return;
-            const update2 = [{
-              partId: droppedPart.partId,
-              properties: {
-                left: "25%",
-                top: "25%",
-                width: "50%"
-              }
-            }];
-            pageBuilder2.model.moveElements(droppedPart.partId, widget2.partId, index, update2);
-            return;
-          }
+      const blockDirection = getLayoutDirection(props.isMobilePage, block.properties);
+      if (blockDirection === "vertical") {
+        if (mouseOffsetY <= quaterY) {
+          index = widgetIndex;
+        } else if (mouseOffsetY > quaterY * 3) {
+          index = widgetIndex + 1;
         } else {
-          if (mouseOffsetX <= quaterX) {
-            index = widgetIndex;
-          } else if (mouseOffsetX > quaterX * 3) {
-            index = widgetIndex + 1;
-          } else {
-            index = ((_e = widget2.children) == null ? void 0 : _e.length) || 0;
-            if (((_f = widget2.children) == null ? void 0 : _f.indexOf(droppedPart)) === index) return;
-            const update2 = [{
-              partId: droppedPart.partId,
-              properties: {
-                left: "25%",
-                top: "25%",
-                width: "50%"
-              }
-            }];
-            pageBuilder2.model.moveElements(droppedPart.partId, widget2.partId, index, update2);
-            return;
+          if (pageBuilder2.partManager.isChildAllowed(props.part)) {
+            acceptWidgetInside(widget2, droppedPart, pageBuilder2);
           }
+          return;
         }
       } else {
-        if (((_g = block.properties) == null ? void 0 : _g.direction) === "vertical") {
-          index = mouseOffsetY <= centerY ? widgetIndex : widgetIndex + 1;
+        if (mouseOffsetX <= quaterX) {
+          index = widgetIndex;
+        } else if (mouseOffsetX > quaterX * 3) {
+          index = widgetIndex + 1;
         } else {
-          index = mouseOffsetX <= centerX ? widgetIndex : widgetIndex + 1;
+          if (pageBuilder2.partManager.isChildAllowed(props.part)) {
+            acceptWidgetInside(widget2, droppedPart, pageBuilder2);
+          }
+          return;
         }
       }
       if (block.children.indexOf(droppedPart) === index) return;
       const update = [{
         partId: droppedPart.partId,
-        properties: {
+        properties: droppedPart.isNestedWidget() ? {
           left: "",
           top: "",
           width: "",
           height: ""
-        }
+        } : {}
       }];
       pageBuilder2.model.moveElements(droppedPart.partId, block.partId, index, update);
     };
+    const acceptWidgetInside = (widget2, droppedPart, pageBuilder2) => {
+      var _a, _b;
+      const index = ((_a = widget2.children) == null ? void 0 : _a.length) || 0;
+      if (((_b = widget2.children) == null ? void 0 : _b.indexOf(droppedPart)) !== index) {
+        const update = [{
+          partId: droppedPart.partId,
+          properties: {
+            left: "25%",
+            top: "25%",
+            width: "50%"
+          }
+        }];
+        pageBuilder2.model.moveElements(droppedPart.partId, widget2.partId, index, update);
+      }
+    };
     const calculateDropIndex = (part, target, mouseOffsetX, mouseOffsetY, _event) => {
-      var _a;
       if (!part.children || part.children.length === 0) return 0;
       const children = Array.from(target.children).filter((child) => !isPositionMark(child)).map((child) => child);
-      const dir = ((_a = props.part.properties) == null ? void 0 : _a.direction) || "vertical";
+      const direction = getLayoutDirection(props.isMobilePage, props.part.properties);
       let index = 0;
       for (const child of children) {
-        if (dir === "horizontal") {
+        if (direction === "horizontal") {
           const centerX = child.offsetLeft + child.offsetWidth / 2;
           if (mouseOffsetX <= centerX) return index;
         } else {
@@ -8853,7 +8856,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           draggable: draggable.value,
           style: normalizeStyle(style.value)
         }, [
-          thisComponent.value ? (openBlock(), createBlock$1(resolveDynamicComponent(thisComponent.value), normalizeProps(mergeProps({ key: 0 }, bind.value)), null, 16)) : createCommentVNode("", true),
+          component.value ? (openBlock(), createBlock$1(resolveDynamicComponent(component.value), normalizeProps(mergeProps({ key: 0 }, bind.value)), null, 16)) : createCommentVNode("", true),
           selected.value && _ctx.part.isNestedWidget() ? (openBlock(), createElementBlock("div", {
             key: 1,
             class: "pan-handle",
@@ -8865,7 +8868,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
             onMousedown: resizeChild
           }, null, 32)) : createCommentVNode("", true)
         ], 14, _hoisted_1$r)), [
-          [unref(vPartHandler), { pageBuilder: unref(pageBuilder), part: _ctx.part, droppable: droppable.value, locatePositionMark, calculateDropIndex, acceptChildPart }]
+          [unref(vPartHandler), { pageBuilder: unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
         ])
       ], 64);
     };
@@ -8875,7 +8878,8 @@ const _hoisted_1$q = ["data-part-id"];
 const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "PbBlock",
   props: {
-    part: {}
+    part: {},
+    isMobilePage: { type: Boolean }
   },
   setup(__props) {
     const props = __props;
@@ -8888,7 +8892,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     const styleTag = computed(() => props.part.getStyleTag());
     const properties = computed(() => ({
       style: {
-        ...props.part.getStyles(),
+        ...props.part.getStyles(props.isMobilePage),
         ...props.part.getInlineStyles()
       }
     }));
@@ -8907,7 +8911,6 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
         locateNone(mark.style);
     };
     const locateSection = (mark, target, mouseOffsetX, mouseOffsetY, draggingPart2, event) => {
-      var _a;
       mark.style.background = "#e67e22";
       const section = props.part.parent;
       const sectionElement = target.parentElement;
@@ -8915,7 +8918,8 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
       const isFirstBlock = index === 0;
       const isLastBlock = index === section.children.length - 1;
       const centerY = target.offsetHeight / 2;
-      if (((_a = section.properties) == null ? void 0 : _a.direction) === "vertical") {
+      const sectionDirection = getLayoutDirection(props.isMobilePage, section.properties);
+      if (sectionDirection === "vertical") {
         if (isFirstBlock && mouseOffsetY <= centerY)
           locateTop(mark.style);
         else if (isLastBlock && mouseOffsetY > centerY)
@@ -8930,12 +8934,12 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
       }
     };
     const locateBlock = (mark, target, mouseOffsetX, mouseOffsetY, draggingPart2, event) => {
-      var _a;
       mark.style.background = "#8e44ad";
       const block = props.part;
       const blockElement = target;
       const section = block.parent;
-      if (((_a = section.properties) == null ? void 0 : _a.direction) === "vertical") {
+      const sectionDirection = getLayoutDirection(props.isMobilePage, section.properties);
+      if (sectionDirection === "vertical") {
         const centerY = blockElement.offsetHeight / 2;
         if (mouseOffsetY <= centerY)
           locateTop(mark.style);
@@ -8972,7 +8976,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
         acceptWidget(pageBuilder2, target, droppedPart);
     };
     const acceptSection = (pageBuilder2, target, droppedPart, mouseOffsetX, mouseOffsetY) => {
-      var _a, _b;
+      var _a;
       const block = props.part;
       const blockElement = target;
       const section = block.parent;
@@ -8982,8 +8986,9 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
       const isLastBlock = blockIndex === section.children.length - 1;
       let sectionIndex = page.children.indexOf(section) || 0;
       let index;
+      const sectionDirection = getLayoutDirection(props.isMobilePage, section.properties);
       const centerY = blockElement.offsetHeight / 2;
-      if (((_a = section.properties) == null ? void 0 : _a.direction) === "vertical") {
+      if (sectionDirection === "vertical") {
         if (isFirstBlock && mouseOffsetY <= centerY) index = sectionIndex;
         else if (isLastBlock && mouseOffsetY > centerY) index = sectionIndex + 1;
         else return;
@@ -8991,16 +8996,16 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
         if (mouseOffsetY <= centerY) index = sectionIndex;
         else index = sectionIndex + 1;
       }
-      if (((_b = page.children) == null ? void 0 : _b.indexOf(droppedPart)) === index) return;
+      if (((_a = page.children) == null ? void 0 : _a.indexOf(droppedPart)) === index) return;
       pageBuilder2.model.moveElements(droppedPart.partId, page.partId, index);
     };
     const acceptBlock = (pageBuilder2, target, droppedPart, mouseOffsetX, mouseOffsetY) => {
-      var _a;
       const block = props.part;
       const section = props.part.parent;
       const blockIndex = section.children.indexOf(block) || 0;
       let index;
-      if (((_a = section.properties) == null ? void 0 : _a.direction) === "vertical") {
+      const sectionDirection = getLayoutDirection(props.isMobilePage, section.properties);
+      if (sectionDirection === "vertical") {
         const centerY = target.offsetHeight / 2;
         index = mouseOffsetY <= centerY ? blockIndex : blockIndex + 1;
       } else {
@@ -9027,13 +9032,12 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
       pageBuilder2.model.moveElements(droppedPart.partId, block.partId, 0, update);
     };
     const calculateDropIndex = (part, target, mouseOffsetX, mouseOffsetY, _event) => {
-      var _a;
       if (!part.children || part.children.length === 0) return 0;
       const children = Array.from(target.children).filter((child) => !isPositionMark(child)).map((child) => child);
-      const dir = ((_a = props.part.properties) == null ? void 0 : _a.direction) || "vertical";
+      const direction = getLayoutDirection(props.isMobilePage, props.part.properties);
       let index = 0;
       for (const child of children) {
-        if (dir === "horizontal") {
+        if (direction === "horizontal") {
           const centerX = child.offsetLeft + child.offsetWidth / 2;
           if (mouseOffsetX <= centerX) return index;
         } else {
@@ -9098,7 +9102,8 @@ const _hoisted_1$o = ["data-part-id"];
 const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "PbSection",
   props: {
-    part: {}
+    part: {},
+    isMobilePage: { type: Boolean }
   },
   setup(__props) {
     const props = __props;
@@ -9114,7 +9119,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     const styleTag = computed(() => props.part.getStyleTag());
     const properties = computed(() => ({
       style: {
-        ...props.part.getStyles(),
+        ...props.part.getStyles(props.isMobilePage),
         ...props.part.getInlineStyles()
       }
     }));
@@ -9175,13 +9180,12 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
       pageBuilder2.model.moveElements(droppedPart.partId, section.partId, 0);
     };
     const calculateDropIndex = (part, target, mouseOffsetX, mouseOffsetY, _event) => {
-      var _a;
       if (!part.children || part.children.length === 0) return 0;
       const children = Array.from(target.children).filter((child) => !isPositionMark(child)).map((child) => child);
-      const dir = ((_a = props.part.properties) == null ? void 0 : _a.direction) || "vertical";
+      const direction = getLayoutDirection(props.isMobilePage, props.part.properties);
       let index = 0;
       for (const child of children) {
-        if (dir === "horizontal") {
+        if (direction === "horizontal") {
           const centerX = child.offsetLeft + child.offsetWidth / 2;
           if (mouseOffsetX <= centerX) return index;
         } else {
@@ -9213,8 +9217,9 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.part.children, (block) => {
               return openBlock(), createBlock$1(_sfc_main$n, {
                 key: block.partId,
+                "is-mobile-page": _ctx.isMobilePage,
                 part: block
-              }, null, 8, ["part"]);
+              }, null, 8, ["is-mobile-page", "part"]);
             }), 128)) : (openBlock(), createBlock$1(PbAddWidgetButton, {
               key: 1,
               onAddWidget: addWidget
@@ -11944,8 +11949,14 @@ const layoutGroup = () => {
     caption: "Layout",
     properties: [
       {
-        propertyName: "direction",
-        caption: "Direction",
+        propertyName: "directionSm",
+        caption: "Direction for Mobile (<= 768px)",
+        propertyType: "select",
+        params: "vertical,horizontal"
+      },
+      {
+        propertyName: "directionLg",
+        caption: "Direction for PC (> 768px)",
         propertyType: "select",
         params: "vertical,horizontal"
       },
@@ -12068,6 +12079,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         _ctx.part.children ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.part.children, (child) => {
           return openBlock(), createBlock$1(_sfc_main$o, {
             key: child.partId,
+            "is-mobile-page": false,
             part: child
           }, null, 8, ["part"]);
         }), 128)) : createCommentVNode("", true),
@@ -12110,7 +12122,8 @@ const sectionParts = [
       ...defaultPropertyGroups()
     ],
     initialProperties: {
-      direction: "horizontal",
+      directionSm: "horizontal",
+      directionLg: "horizontal",
       align: "center"
     },
     allowsChild: () => true,
@@ -12128,6 +12141,8 @@ const blockParts = [
       ...defaultPropertyGroups()
     ],
     initialProperties: {
+      directionSm: "vertical",
+      directionLg: "vertical",
       align: "center"
     },
     allowsChild: () => true,
@@ -12310,7 +12325,7 @@ const widgets = [
       ...defaultWidgetPropertyGroups()
     ],
     initialProperties: {
-      height: "200px"
+      height: "300px"
     },
     allowsChild: () => true,
     creator: () => _sfc_main$d
@@ -12400,7 +12415,7 @@ __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
 let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
 const openWidgetAddModal = (modal, args, callback) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./PbWidgetAddModal-BtGAzP14.js")),
+    component: defineAsyncComponent(() => import("./PbWidgetAddModal-DQYPJftS.js")),
     style: {
       width: "80%",
       height: "80%",
@@ -12503,9 +12518,13 @@ const _AddSectionCommand = class _AddSectionCommand {
     this.modal = modal;
   }
   execute(pageBuilder, args) {
-    const def = pageBuilder.partManager.getSectionDefinition();
-    if (!def) return;
-    addPart(pageBuilder, def);
+    if (args && args.page) {
+      addSectionToPage(pageBuilder, args.page);
+    } else {
+      const def = pageBuilder.partManager.getSectionDefinition();
+      if (!def) return;
+      addPart(pageBuilder, def);
+    }
   }
 };
 __publicField(_AddSectionCommand, "COMMAND_ID", "AddSection");
@@ -12627,6 +12646,15 @@ const addSectionAfter = (pageBuilder, modal, args) => {
   const index = section.parent.children.indexOf(section) + 1;
   insertParts(pageBuilder, section.parent.partId, index, [newSection], true);
 };
+const addSectionToPage = (pageBuilder, page) => {
+  var _a;
+  const newSection = createSection(pageBuilder);
+  if (!newSection) return;
+  const child = createBlock(pageBuilder);
+  newSection.children = [child];
+  const index = ((_a = page.children) == null ? void 0 : _a.length) || 0;
+  insertParts(pageBuilder, page.partId, index, [newSection], true);
+};
 const addBlockBefore = (pageBuilder) => {
   const selected = pageBuilder.context.getSelectedParts()[0];
   if (!selected) return;
@@ -14247,14 +14275,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       var _a, _b;
       return {
         style: {
-          ...(_a = props.part) == null ? void 0 : _a.getStyles(),
+          ...(_a = props.part) == null ? void 0 : _a.getStyles(props.isMobilePage),
           ...(_b = props.part) == null ? void 0 : _b.getInlineStyles()
         }
       };
     });
     const selected = computed(() => !!props.part && editor.context.isSelected(props.part));
-    const insertSection = (index) => {
-      editor.commandRegistry.executeCommand(AddSectionCommand.COMMAND_ID);
+    const addSection = () => {
+      editor.commandRegistry.executeCommand(AddSectionCommand.COMMAND_ID, { page: props.part });
     };
     const pageBuilder = usePageBuilderEditor();
     const contextMenu = useContextMenu();
@@ -14296,33 +14324,30 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
             (openBlock(true), createElementBlock(Fragment, null, renderList((_b = _ctx.part) == null ? void 0 : _b.children, (section, index) => {
               return openBlock(), createBlock$1(_sfc_main$l, {
                 key: section.partId,
+                "is-mobile-page": _ctx.isMobilePage,
                 part: section
-              }, null, 8, ["part"]);
+              }, null, 8, ["is-mobile-page", "part"]);
             }), 128))
           ], 16),
           createElementVNode("div", {
             class: "pb-add-section-handle bottom",
-            onClick: _cache[0] || (_cache[0] = ($event) => {
-              var _a2, _b2;
-              return insertSection(((_b2 = (_a2 = _ctx.part) == null ? void 0 : _a2.children) == null ? void 0 : _b2.length) || 0);
-            })
-          }, _cache[1] || (_cache[1] = [
+            onClick: addSection
+          }, _cache[0] || (_cache[0] = [
             createElementVNode("i", { class: "material-icons-outlined" }, "add_circle_outline", -1)
           ]))
         ], 44, _hoisted_1$3),
-        _cache[2] || (_cache[2] = createElementVNode("div", { style: { "height": "100px" } }, null, -1))
+        _cache[1] || (_cache[1] = createElementVNode("div", { style: { "height": "100px" } }, null, -1))
       ], 64);
     };
   }
 });
-const canvasStyle = '.pb-page-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\n\n.pb-page {\n  width: 100%;\n  margin: 0;\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  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}\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}\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}\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 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  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}\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}\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}\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 _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "PbPageFrame",
   props: {
     part: {},
-    width: {},
-    isMobilePage: { type: Boolean }
+    width: {}
   },
   setup(__props) {
     const props = __props;
@@ -14379,17 +14404,20 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     );
     const width = ref(props.width);
     const height = ref(200);
+    const isMobilePage = computed(() => width.value <= 768);
     const style = computed(() => ({
       // width: `${width.value}px`,
       // height: `${height.value}px`,
     }));
     let iframeObserver;
     const updateIframeHeight = () => {
-      if (!iframeRef.value || !iframeRef.value.contentDocument) return;
-      const iframeBody = iframeRef.value.contentDocument.body;
-      if (iframeBody) {
-        height.value = iframeBody.scrollHeight;
-      }
+      setTimeout(() => {
+        if (!iframeRef.value || !iframeRef.value.contentDocument) return;
+        const iframeBody = iframeRef.value.contentDocument.body;
+        if (iframeBody) {
+          height.value = iframeBody.scrollHeight;
+        }
+      }, 100);
     };
     onMounted(() => {
       if (!iframeRef.value || !iframeRef.value.contentDocument) return;
@@ -14430,7 +14458,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           to: (_d = (_c = iframeRef.value) == null ? void 0 : _c.contentWindow) == null ? void 0 : _d.document.body
         }, [
           createVNode(_sfc_main$3, {
-            "is-mobile-page": _ctx.isMobilePage,
+            "is-mobile-page": isMobilePage.value,
             part: _ctx.part,
             width: width.value
           }, null, 8, ["is-mobile-page", "part", "width"])
@@ -14470,14 +14498,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         createElementVNode("div", mergeProps({ class: "pb-canvas" }, style.value), [
           partS.value ? (openBlock(), createBlock$1(_sfc_main$2, {
             key: 0,
-            "is-mobile-page": true,
             part: partS.value,
             width: 480
           }, null, 8, ["part"])) : createCommentVNode("", true),
           partL.value ? (openBlock(), createElementBlock("div", _hoisted_2$1)) : createCommentVNode("", true),
           partL.value ? (openBlock(), createBlock$1(_sfc_main$2, {
             key: 2,
-            "is-mobile-page": false,
             part: partL.value,
             width: 1024
           }, null, 8, ["part"])) : createCommentVNode("", true)