@g1cloud/page-builder-editor 1.0.0-alpha.27 → 1.0.0-alpha.29

package/dist/page-builder-editor.umd.cjs

@@ -6688,18 +6688,19 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       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);
@@ -6853,7 +6854,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     },
     setup(__props) {
       const props = __props;
-      const className = vue.computed(() => getPartClassName(props.part));
+      const classNames = vue.computed(() => [getPartClassName(props.part), props.part.getClassNames()]);
       const styleTag = vue.computed(() => props.part.getStyleTag());
       const style = vue.computed(() => ({
         ...props.part.getStyles(),
@@ -6867,7 +6868,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             innerHTML: styleTag.value
           }, null, 8, ["innerHTML"])) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", {
-            class: vue.normalizeClass([className.value, "pb-widget"]),
+            class: vue.normalizeClass([classNames.value, "pb-widget"]),
             "data-part-id": _ctx.part.partId,
             style: vue.normalizeStyle(style.value)
           }, [
@@ -6884,14 +6885,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _sfc_main$b$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbBlock",
     props: {
-      part: {}
+      part: {},
+      isMobilePage: { type: Boolean }
     },
     setup(__props) {
       const props = __props;
-      const classNames = vue.computed(() => props.part.getClassNames());
+      const classNames = vue.computed(() => [getPartClassName(props.part), props.part.getClassNames()]);
       const styleTag = vue.computed(() => props.part.getStyleTag());
       const style = vue.computed(() => ({
-        ...props.part.getStyles(),
+        ...props.part.getStyles(props.isMobilePage),
         ...props.part.getInlineStyles()
       }));
       vue.computed(() => createPartComponents(props.part.children));
@@ -6942,14 +6944,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _sfc_main$9$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbSection",
     props: {
-      part: {}
+      part: {},
+      isMobilePage: { type: Boolean }
     },
     setup(__props) {
       const props = __props;
-      const classNames = vue.computed(() => props.part.getClassNames());
+      const classNames = vue.computed(() => [getPartClassName(props.part), props.part.getClassNames()]);
       const styleTag = vue.computed(() => props.part.getStyleTag());
       const style = vue.computed(() => ({
-        ...props.part.getStyles(),
+        ...props.part.getStyles(props.isMobilePage),
         ...props.part.getInlineStyles()
       }));
       return (_ctx, _cache) => {
@@ -6970,8 +6973,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             }, null, 8, ["part"])) : _ctx.part.children && _ctx.part.children.length > 0 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.part.children, (block) => {
               return vue.openBlock(), vue.createBlock(_sfc_main$b$1, {
                 key: block.partId,
+                "is-mobile-page": _ctx.isMobilePage,
                 part: block
-              }, null, 8, ["part"]);
+              }, null, 8, ["is-mobile-page", "part"]);
             }), 128)) : vue.createCommentVNode("", true)
           ], 14, _hoisted_1$8$1)
         ], 64);
@@ -7404,13 +7408,10 @@ ${_html.style}
     },
     setup(__props) {
       const props = __props;
-      const classNames = vue.computed(() => {
-        var _a;
-        return `${(_a = props.part) == null ? void 0 : _a.getClassNames()} ${props.isMobilePage ? "mobile" : "pc"}`;
-      });
+      const classNames = vue.computed(() => [getPartClassName(props.part), props.part.getClassNames(), props.isMobilePage ? "mobile" : "pc"]);
       const styleTag = vue.computed(() => props.part.getStyleTag());
       const style = vue.computed(() => ({
-        ...props.part.getStyles(),
+        ...props.part.getStyles(props.isMobilePage),
         ...props.part.getInlineStyles()
       }));
       return (_ctx, _cache) => {
@@ -7430,8 +7431,9 @@ ${_html.style}
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.part.children, (section) => {
                 return vue.openBlock(), vue.createBlock(_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)
@@ -8375,6 +8377,13 @@ ${_html.style}
     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) {
@@ -8426,7 +8435,8 @@ ${_html.style}
   const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     __name: "PbWidget",
     props: {
-      part: {}
+      part: {},
+      isMobilePage: { type: Boolean }
     },
     setup(__props) {
       const mouseTracker = useMouseTracker();
@@ -8510,11 +8520,7 @@ ${_html.style}
           placeholder: true
         };
       });
-      const thisComponent = vue.computed(() => pageBuilder.partManager.createPartComponent(props.part));
-      vue.computed(() => pageBuilder.partManager.createPartComponents(props.part.children));
-      const droppable = vue.computed(() => {
-        return pageBuilder.partManager.isChildAllowed(props.part);
-      });
+      const component = vue.computed(() => pageBuilder.partManager.createPartComponent(props.part));
       const locatePositionMark = (mark, target, mouseOffsetX, mouseOffsetY, draggingPart2, event) => {
         if (props.part.isNestedWidget()) {
           if (draggingPart2.isWidget())
@@ -8529,7 +8535,6 @@ ${_html.style}
           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;
@@ -8544,8 +8549,10 @@ ${_html.style}
         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)
@@ -8561,7 +8568,7 @@ ${_html.style}
               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)
@@ -8577,7 +8584,6 @@ ${_html.style}
         }
       };
       const locateBlock = (mark, target, mouseOffsetX, mouseOffsetY, draggingPart2, event) => {
-        var _a, _b, _c;
         mark.style.background = "#8e44ad";
         const widgetElement = target;
         const block = props.part.parent;
@@ -8586,9 +8592,12 @@ ${_html.style}
         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)
@@ -8603,7 +8612,7 @@ ${_html.style}
           }
         } 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
@@ -8619,8 +8628,11 @@ ${_html.style}
         }
       };
       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;
@@ -8630,25 +8642,26 @@ ${_html.style}
         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
@@ -8661,17 +8674,13 @@ ${_html.style}
         }
       };
       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())
@@ -8680,7 +8689,7 @@ ${_html.style}
           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;
@@ -8694,8 +8703,10 @@ ${_html.style}
         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;
@@ -8705,7 +8716,7 @@ ${_html.style}
             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;
@@ -8714,11 +8725,11 @@ ${_html.style}
             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;
@@ -8728,9 +8739,11 @@ ${_html.style}
         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;
@@ -8740,7 +8753,7 @@ ${_html.style}
           }
         } 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 {
@@ -8749,11 +8762,10 @@ ${_html.style}
             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;
@@ -8763,73 +8775,64 @@ ${_html.style}
         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 {
@@ -8854,7 +8857,7 @@ ${_html.style}
             draggable: draggable.value,
             style: vue.normalizeStyle(style.value)
           }, [
-            thisComponent.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(thisComponent.value), vue.normalizeProps(vue.mergeProps({ key: 0 }, bind.value)), null, 16)) : vue.createCommentVNode("", true),
+            component.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(component.value), vue.normalizeProps(vue.mergeProps({ key: 0 }, bind.value)), null, 16)) : vue.createCommentVNode("", true),
             selected.value && _ctx.part.isNestedWidget() ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 1,
               class: "pan-handle",
@@ -8866,7 +8869,7 @@ ${_html.style}
               onMousedown: resizeChild
             }, null, 32)) : vue.createCommentVNode("", true)
           ], 14, _hoisted_1$D)), [
-            [vue.unref(vPartHandler), { pageBuilder: vue.unref(pageBuilder), part: _ctx.part, droppable: droppable.value, locatePositionMark, calculateDropIndex, acceptChildPart }]
+            [vue.unref(vPartHandler), { pageBuilder: vue.unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
           ])
         ], 64);
       };
@@ -8876,7 +8879,8 @@ ${_html.style}
   const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     __name: "PbBlock",
     props: {
-      part: {}
+      part: {},
+      isMobilePage: { type: Boolean }
     },
     setup(__props) {
       const props = __props;
@@ -8889,7 +8893,7 @@ ${_html.style}
       const styleTag = vue.computed(() => props.part.getStyleTag());
       const properties = vue.computed(() => ({
         style: {
-          ...props.part.getStyles(),
+          ...props.part.getStyles(props.isMobilePage),
           ...props.part.getInlineStyles()
         }
       }));
@@ -8908,7 +8912,6 @@ ${_html.style}
           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;
@@ -8916,7 +8919,8 @@ ${_html.style}
         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)
@@ -8931,12 +8935,12 @@ ${_html.style}
         }
       };
       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);
@@ -8973,7 +8977,7 @@ ${_html.style}
           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;
@@ -8983,8 +8987,9 @@ ${_html.style}
         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;
@@ -8992,16 +8997,16 @@ ${_html.style}
           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 {
@@ -9028,13 +9033,12 @@ ${_html.style}
         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 {
@@ -9099,7 +9103,8 @@ ${_html.style}
   const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     __name: "PbSection",
     props: {
-      part: {}
+      part: {},
+      isMobilePage: { type: Boolean }
     },
     setup(__props) {
       const props = __props;
@@ -9115,7 +9120,7 @@ ${_html.style}
       const styleTag = vue.computed(() => props.part.getStyleTag());
       const properties = vue.computed(() => ({
         style: {
-          ...props.part.getStyles(),
+          ...props.part.getStyles(props.isMobilePage),
           ...props.part.getInlineStyles()
         }
       }));
@@ -9176,13 +9181,12 @@ ${_html.style}
         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 {
@@ -9214,8 +9218,9 @@ ${_html.style}
               _ctx.part.children && _ctx.part.children.length > 0 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.part.children, (block) => {
                 return vue.openBlock(), vue.createBlock(_sfc_main$z, {
                   key: block.partId,
+                  "is-mobile-page": _ctx.isMobilePage,
                   part: block
-                }, null, 8, ["part"]);
+                }, null, 8, ["is-mobile-page", "part"]);
               }), 128)) : (vue.openBlock(), vue.createBlock(PbAddWidgetButton, {
                 key: 1,
                 onAddWidget: addWidget
@@ -11945,8 +11950,14 @@ ${_html.style}
       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"
         },
@@ -12069,6 +12080,7 @@ ${_html.style}
           _ctx.part.children ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.part.children, (child) => {
             return vue.openBlock(), vue.createBlock(_sfc_main$A, {
               key: child.partId,
+              "is-mobile-page": false,
               part: child
             }, null, 8, ["part"]);
           }), 128)) : vue.createCommentVNode("", true),
@@ -12111,7 +12123,8 @@ ${_html.style}
         ...defaultPropertyGroups()
       ],
       initialProperties: {
-        direction: "horizontal",
+        directionSm: "horizontal",
+        directionLg: "horizontal",
         align: "center"
       },
       allowsChild: () => true,
@@ -12129,6 +12142,8 @@ ${_html.style}
         ...defaultPropertyGroups()
       ],
       initialProperties: {
+        directionSm: "vertical",
+        directionLg: "vertical",
         align: "center"
       },
       allowsChild: () => true,
@@ -12311,7 +12326,7 @@ ${_html.style}
         ...defaultWidgetPropertyGroups()
       ],
       initialProperties: {
-        height: "200px"
+        height: "300px"
       },
       allowsChild: () => true,
       creator: () => _sfc_main$p
@@ -12504,9 +12519,13 @@ ${_html.style}
       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");
@@ -12628,6 +12647,15 @@ ${_html.style}
     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;
@@ -14236,6 +14264,11 @@ ${_html.style}
     setup(__props) {
       const props = __props;
       const editor = usePageBuilderEditor();
+      const classNames = vue.computed(() => {
+        return [
+          props.part.getClassNames()
+        ];
+      });
       const styleTag = vue.computed(() => props.part.getStyleTag());
       const style = vue.computed(() => {
         var _a, _b;
@@ -14248,14 +14281,14 @@ ${_html.style}
         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 = vue.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 = bluesea.useContextMenu();
@@ -14285,9 +14318,9 @@ ${_html.style}
             innerHTML: styleTag.value
           }, null, 8, ["innerHTML"])) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", {
+            class: vue.normalizeClass([classNames.value, "pb-page"]),
             "data-part-id": (_a = _ctx.part) == null ? void 0 : _a.partId,
             style: vue.normalizeStyle(style.value),
-            class: "pb-page",
             onContextmenu: showContextMenu,
             onMousedown: vue.withModifiers(handleClick, ["stop"])
           }, [
@@ -14297,33 +14330,30 @@ ${_html.style}
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList((_b = _ctx.part) == null ? void 0 : _b.children, (section, index) => {
                 return vue.openBlock(), vue.createBlock(_sfc_main$x, {
                   key: section.partId,
+                  "is-mobile-page": _ctx.isMobilePage,
                   part: section
-                }, null, 8, ["part"]);
+                }, null, 8, ["is-mobile-page", "part"]);
               }), 128))
             ], 16),
             vue.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] = [
               vue.createElementVNode("i", { class: "material-icons-outlined" }, "add_circle_outline", -1)
             ]))
-          ], 44, _hoisted_1$f),
-          _cache[2] || (_cache[2] = vue.createElementVNode("div", { style: { "height": "100px" } }, null, -1))
+          ], 46, _hoisted_1$f),
+          _cache[1] || (_cache[1] = vue.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$e = ["height", "width"];
   const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPageFrame",
     props: {
       part: {},
-      width: {},
-      isMobilePage: { type: Boolean }
+      width: {}
     },
     setup(__props) {
       const props = __props;
@@ -14380,17 +14410,20 @@ ${_html.style}
       );
       const width = vue.ref(props.width);
       const height = vue.ref(200);
+      const isMobilePage = vue.computed(() => width.value <= 768);
       const style = vue.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);
       };
       vue.onMounted(() => {
         if (!iframeRef.value || !iframeRef.value.contentDocument) return;
@@ -14431,7 +14464,7 @@ ${_html.style}
             to: (_d = (_c = iframeRef.value) == null ? void 0 : _c.contentWindow) == null ? void 0 : _d.document.body
           }, [
             vue.createVNode(_sfc_main$f, {
-              "is-mobile-page": _ctx.isMobilePage,
+              "is-mobile-page": isMobilePage.value,
               part: _ctx.part,
               width: width.value
             }, null, 8, ["is-mobile-page", "part", "width"])
@@ -14471,14 +14504,12 @@ ${_html.style}
           vue.createElementVNode("div", vue.mergeProps({ class: "pb-canvas" }, style.value), [
             partS.value ? (vue.openBlock(), vue.createBlock(_sfc_main$e, {
               key: 0,
-              "is-mobile-page": true,
               part: partS.value,
               width: 480
             }, null, 8, ["part"])) : vue.createCommentVNode("", true),
             partL.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$d)) : vue.createCommentVNode("", true),
             partL.value ? (vue.openBlock(), vue.createBlock(_sfc_main$e, {
               key: 2,
-              "is-mobile-page": false,
               part: partL.value,
               width: 1024
             }, null, 8, ["part"])) : vue.createCommentVNode("", true)