@g1cloud/page-builder-editor 1.0.0-alpha.30 → 1.0.0-alpha.32

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

@@ -6694,6 +6694,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const align = ((_a = this.properties) == null ? void 0 : _a.align) || "center";
       if (this.isWidget()) {
         style.alignSelf = this.getAlignStyleValue(align);
+      } else if (this.isPage()) {
+        style.display = "flex";
+        style.flexDirection = "column";
+        style.alignItems = this.getAlignStyleValue(align);
       } else {
         const direction = isMobilePage ? (_b = this.properties) == null ? void 0 : _b.directionSm : (_c = this.properties) == null ? void 0 : _c.directionLg;
         if (direction === "horizontal") {
@@ -6725,10 +6729,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       if ((_r = this.properties) == null ? void 0 : _r.bottom) style.bottom = this.properties.bottom;
       if ((_s = this.properties) == null ? void 0 : _s.width) style.width = this.properties.width;
       if ((_t = this.properties) == null ? void 0 : _t.height) style.height = this.properties.height;
-      if ((_u = this.properties) == null ? void 0 : _u.maxWidth) style.width = this.properties.maxWidth;
-      if ((_v = this.properties) == null ? void 0 : _v.maxHeight) style.height = this.properties.maxHeight;
-      if ((_w = this.properties) == null ? void 0 : _w.minWidth) style.width = this.properties.minWidth;
-      if ((_x = this.properties) == null ? void 0 : _x.minHeight) style.height = this.properties.minHeight;
+      if ((_u = this.properties) == null ? void 0 : _u.maxWidth) style.maxWidth = this.properties.maxWidth;
+      if ((_v = this.properties) == null ? void 0 : _v.maxHeight) style.maxHeight = this.properties.maxHeight;
+      if ((_w = this.properties) == null ? void 0 : _w.minWidth) style.minWidth = this.properties.minWidth;
+      if ((_x = this.properties) == null ? void 0 : _x.minHeight) style.minHeight = this.properties.minHeight;
       if ((_y = this.properties) == null ? void 0 : _y.textAlign) style.textAlign = this.properties.textAlign;
       if ((_z = this.properties) == null ? void 0 : _z.backgroundColor) style.backgroundColor = this.properties.backgroundColor;
       if ((_A = this.properties) == null ? void 0 : _A.borderLeftWidth) style.borderLeftWidth = this.properties.borderLeftWidth;
@@ -6982,8 +6986,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
     }
   });
-  const _hoisted_1$7$1 = ["alt", "src"];
-  const _hoisted_2$4$1 = {
+  const _hoisted_1$7$1 = ["href", "target"];
+  const _hoisted_2$4$1 = ["alt", "src"];
+  const _hoisted_3$o = ["alt", "src"];
+  const _hoisted_4$e = {
     key: 1,
     class: "placeholder"
   };
@@ -7016,14 +7022,27 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         return {};
       });
       return (_ctx, _cache) => {
-        var _a, _b;
-        return ((_a = _ctx.part.properties) == null ? void 0 : _a.media) ? (vue.openBlock(), vue.createElementBlock("img", {
-          key: 0,
-          alt: altText.value,
-          src: ((_b = _ctx.part.properties) == null ? void 0 : _b.media).url,
-          style: vue.normalizeStyle(style.value),
-          class: "image"
-        }, null, 12, _hoisted_1$7$1)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$4$1, _cache[0] || (_cache[0] = [
+        var _a, _b, _c, _d, _e, _f;
+        return ((_a = _ctx.part.properties) == null ? void 0 : _a.media) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+          ((_b = _ctx.part.properties) == null ? void 0 : _b.link) ? (vue.openBlock(), vue.createElementBlock("a", {
+            key: 0,
+            href: (_c = _ctx.part.properties) == null ? void 0 : _c.link,
+            target: (_d = _ctx.part.properties) == null ? void 0 : _d.linkTarget
+          }, [
+            vue.createElementVNode("img", {
+              alt: altText.value,
+              src: ((_e = _ctx.part.properties) == null ? void 0 : _e.media).url,
+              style: vue.normalizeStyle(style.value),
+              class: "image"
+            }, null, 12, _hoisted_2$4$1)
+          ], 8, _hoisted_1$7$1)) : (vue.openBlock(), vue.createElementBlock("img", {
+            key: 1,
+            alt: altText.value,
+            src: ((_f = _ctx.part.properties) == null ? void 0 : _f.media).url,
+            style: vue.normalizeStyle(style.value),
+            class: "image"
+          }, null, 12, _hoisted_3$o))
+        ], 64)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$e, _cache[0] || (_cache[0] = [
           vue.createElementVNode("span", { class: "font-icon" }, "image", -1)
         ]))) : vue.createCommentVNode("", true);
       };
@@ -7270,7 +7289,7 @@ ${_html.style}
         plugin.widgets.forEach((v) => {
           const w = { ...v };
           w.partType = "Widget";
-          w.creator = () => _sfc_main$C;
+          w.creator = () => _sfc_main$D;
           partDefinitions$1[v.partName] = w;
         });
       }
@@ -7428,7 +7447,7 @@ ${_html.style}
     }
   });
   const _hoisted_1$1$1 = ["innerHTML"];
-  const _hoisted_2$s = { class: "pb-viewer" };
+  const _hoisted_2$t = { class: "pb-viewer" };
   const _sfc_main$2$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PageBuilderViewer",
     props: {
@@ -7469,7 +7488,7 @@ ${_html.style}
             key: 0,
             innerHTML: vue.unref(externalCss)
           }, null, 8, _hoisted_1$1$1)) : vue.createCommentVNode("", true),
-          vue.createElementVNode("div", _hoisted_2$s, [
+          vue.createElementVNode("div", _hoisted_2$t, [
             part.value ? (vue.openBlock(), vue.createBlock(_sfc_main$3$1, {
               key: 0,
               "is-mobile-page": _ctx.isMobilePage,
@@ -7480,7 +7499,7 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$F = {
+  const _hoisted_1$G = {
     key: 1,
     class: "placeholder",
     textContent: "Empty Widget"
@@ -7501,11 +7520,11 @@ ${_html.style}
             key: child.part.partId,
             part: child.part
           }, null, 8, ["part"]);
-        }), 128)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$F)) : vue.createCommentVNode("", true);
+        }), 128)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$G)) : vue.createCommentVNode("", true);
       };
     }
   });
-  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     __name: "PbCustomWidget",
     props: {
       part: {},
@@ -8104,6 +8123,7 @@ ${_html.style}
     return {
       "readonly-text": () => vue.defineAsyncComponent(() => Promise.resolve().then(() => PbPropertyEditorReadonlyText)),
       "text": () => vue.defineAsyncComponent(() => Promise.resolve().then(() => PbPropertyEditorText)),
+      "number": () => vue.defineAsyncComponent(() => Promise.resolve().then(() => PbPropertyEditorNumber)),
       "multiline-text": () => vue.defineAsyncComponent(() => Promise.resolve().then(() => PbPropertyEditorMultilineText)),
       "select": () => vue.defineAsyncComponent(() => Promise.resolve().then(() => PbPropertyEditorSelect)),
       "color": () => vue.defineAsyncComponent(() => Promise.resolve().then(() => PbPropertyEditorColor)),
@@ -8362,10 +8382,10 @@ ${_html.style}
     }
     return target;
   };
-  const _sfc_main$B = {};
-  const _hoisted_1$E = { class: "pb-add-widget-button" };
+  const _sfc_main$C = {};
+  const _hoisted_1$F = { class: "pb-add-widget-button" };
   function _sfc_render$1(_ctx, _cache) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$E, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$F, [
       vue.createElementVNode("button", {
         onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("add-widget", $event))
       }, _cache[1] || (_cache[1] = [
@@ -8374,7 +8394,7 @@ ${_html.style}
       ]))
     ]);
   }
-  const PbAddWidgetButton = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["render", _sfc_render$1]]);
+  const PbAddWidgetButton = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["render", _sfc_render$1]]);
   const MOUSE_TRACKER_KEY = "mouseTracker";
   const MOUSE_TRACKER_NOT_FOUND = "MouseTracker not found";
   class MouseTracker {
@@ -8402,8 +8422,8 @@ ${_html.style}
     if (!mouseTracker) throw Error(MOUSE_TRACKER_NOT_FOUND);
     return mouseTracker;
   };
-  const _hoisted_1$D = ["data-part-id", "draggable"];
-  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$E = ["data-part-id", "draggable"];
+  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     __name: "PbWidget",
     props: {
       part: {},
@@ -8839,15 +8859,15 @@ ${_html.style}
               class: "resize-handle",
               onMousedown: resizeChild
             }, null, 32)) : vue.createCommentVNode("", true)
-          ], 14, _hoisted_1$D)), [
+          ], 14, _hoisted_1$E)), [
             [vue.unref(vPartHandler), { pageBuilder: vue.unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
           ])
         ], 64);
       };
     }
   });
-  const _hoisted_1$C = ["data-part-id"];
-  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$D = ["data-part-id"];
+  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     __name: "PbBlock",
     props: {
       part: {},
@@ -9037,27 +9057,27 @@ ${_html.style}
               onAddWidget: addWidget
             })) : vue.createCommentVNode("", true),
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.part.children, (child) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$A, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$B, {
                 key: child.partId,
                 part: child
               }, null, 8, ["part"]);
             }), 128))
-          ], 16, _hoisted_1$C)), [
+          ], 16, _hoisted_1$D)), [
             [vue.unref(vPartHandler), { pageBuilder: vue.unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
           ])
         ], 64);
       };
     }
   });
-  const _hoisted_1$B = { class: "pb-block" };
-  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$C = { class: "pb-block" };
+  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     __name: "PbLoginDepart",
     props: {
       part: {}
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$B, _cache[0] || (_cache[0] = [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$C, _cache[0] || (_cache[0] = [
           vue.createElementVNode("div", {
             class: "pb-widget",
             style: { "margin": "0 auto" }
@@ -9070,8 +9090,8 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$A = ["data-part-id"];
-  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$B = ["data-part-id"];
+  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     __name: "PbSection",
     props: {
       part: {},
@@ -9181,13 +9201,13 @@ ${_html.style}
             style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
           }, properties.value), [
             ((_b = _ctx.part.properties) == null ? void 0 : _b.sectionType) === "static" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-              ((_c = _ctx.part.properties) == null ? void 0 : _c.name) === "Login Design Part" ? (vue.openBlock(), vue.createBlock(_sfc_main$y, {
+              ((_c = _ctx.part.properties) == null ? void 0 : _c.name) === "Login Design Part" ? (vue.openBlock(), vue.createBlock(_sfc_main$z, {
                 key: 0,
                 part: _ctx.part
               }, null, 8, ["part"])) : vue.createCommentVNode("", true)
             ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
               _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, {
+                return vue.openBlock(), vue.createBlock(_sfc_main$A, {
                   key: block.partId,
                   "is-mobile-page": _ctx.isMobilePage,
                   part: block
@@ -9197,21 +9217,21 @@ ${_html.style}
                 onAddWidget: addWidget
               }))
             ], 64))
-          ], 16, _hoisted_1$A)), [
+          ], 16, _hoisted_1$B)), [
             [vue.unref(vPartHandler), { pageBuilder: vue.unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
           ])
         ], 64);
       };
     }
   });
-  const _hoisted_1$z = { class: "group-editor group-editor-position" };
-  const _hoisted_2$r = { class: "flex-align-center" };
-  const _hoisted_3$m = { class: "flex-grow-1" };
+  const _hoisted_1$A = { class: "group-editor group-editor-position" };
+  const _hoisted_2$s = { class: "flex-align-center" };
+  const _hoisted_3$n = { class: "flex-grow-1" };
   const _hoisted_4$d = { class: "bg-gray-100 py-5 rounded-8" };
   const _hoisted_5$7 = { class: "text-center" };
   const _hoisted_6$7 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
   const _hoisted_7$6 = { class: "text-center" };
-  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorPosition",
     props: {
       group: {},
@@ -9235,12 +9255,12 @@ ${_html.style}
       const updateTop = (value) => updatePropertyValue({ top: value });
       const updateBottom = (value) => updatePropertyValue({ bottom: value });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$z, [
-          vue.createElementVNode("div", _hoisted_2$r, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, [
+          vue.createElementVNode("div", _hoisted_2$s, [
             _cache[1] || (_cache[1] = vue.createElementVNode("div", { class: "title" }, [
               vue.createElementVNode("label", { textContent: "Position" })
             ], -1)),
-            vue.createElementVNode("div", _hoisted_3$m, [
+            vue.createElementVNode("div", _hoisted_3$n, [
               vue.createElementVNode("div", _hoisted_4$d, [
                 vue.createElementVNode("div", _hoisted_5$7, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
@@ -9289,14 +9309,14 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$y = { class: "group-editor group-editor-size" };
-  const _hoisted_2$q = { class: "flex-align-center" };
-  const _hoisted_3$l = { class: "flex-grow-1 bs-layout-horizontal" };
+  const _hoisted_1$z = { class: "group-editor group-editor-size" };
+  const _hoisted_2$r = { class: "flex-align-center" };
+  const _hoisted_3$m = { class: "flex-grow-1 bs-layout-horizontal" };
   const _hoisted_4$c = { class: "flex-align-center mt-12" };
   const _hoisted_5$6 = { class: "flex-grow-1 bs-layout-horizontal" };
   const _hoisted_6$6 = { class: "flex-align-center mt-12" };
   const _hoisted_7$5 = { class: "flex-grow-1 bs-layout-horizontal" };
-  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorSize",
     props: {
       group: {},
@@ -9320,16 +9340,16 @@ ${_html.style}
       const updateWidth = (value) => updatePropertyValue({ width: value });
       const updateHeight = (value) => updatePropertyValue({ height: value });
       const updateMaxWidth = (value) => updatePropertyValue({ maxWidth: value });
-      const updateMaxHeight = (value) => updatePropertyValue({ maxWeight: value });
+      const updateMaxHeight = (value) => updatePropertyValue({ maxHeight: value });
       const updateMinWidth = (value) => updatePropertyValue({ minWidth: value });
       const updateMinHeight = (value) => updatePropertyValue({ minHeight: value });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$y, [
-          vue.createElementVNode("div", _hoisted_2$q, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$z, [
+          vue.createElementVNode("div", _hoisted_2$r, [
             _cache[0] || (_cache[0] = vue.createElementVNode("div", { class: "title" }, [
               vue.createElementVNode("label", { textContent: "Size" })
             ], -1)),
-            vue.createElementVNode("div", _hoisted_3$l, [
+            vue.createElementVNode("div", _hoisted_3$m, [
               vue.createVNode(vue.unref(bluesea.BSTextInput), {
                 "model-value": width.value,
                 class: "flex-grow-1 mr-2",
@@ -9542,9 +9562,9 @@ ${_html.style}
       }
     }
   };
-  const _hoisted_1$x = { class: "vc-alpha" };
-  const _hoisted_2$p = { class: "vc-alpha-checkboard-wrap" };
-  const _hoisted_3$k = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_1$y = { class: "vc-alpha" };
+  const _hoisted_2$q = { class: "vc-alpha-checkboard-wrap" };
+  const _hoisted_3$l = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-alpha-picker" },
     null,
@@ -9552,12 +9572,12 @@ ${_html.style}
     /* HOISTED */
   );
   const _hoisted_4$b = [
-    _hoisted_3$k
+    _hoisted_3$l
   ];
   function render$4(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_Checkboard = vue.resolveComponent("Checkboard");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [
-      vue.createElementVNode("div", _hoisted_2$p, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$y, [
+      vue.createElementVNode("div", _hoisted_2$q, [
         vue.createVNode(_component_Checkboard)
       ]),
       vue.createElementVNode(
@@ -10660,12 +10680,12 @@ ${_html.style}
       // }
     }
   };
-  const _hoisted_1$w = { class: "vc-editable-input" };
-  const _hoisted_2$o = ["aria-labelledby"];
-  const _hoisted_3$j = ["id", "for"];
+  const _hoisted_1$x = { class: "vc-editable-input" };
+  const _hoisted_2$p = ["aria-labelledby"];
+  const _hoisted_3$k = ["id", "for"];
   const _hoisted_4$a = { class: "vc-input__desc" };
   function render$3(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [
       vue.withDirectives(vue.createElementVNode("input", {
         ref: "input",
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $options.val = $event),
@@ -10673,14 +10693,14 @@ ${_html.style}
         class: "vc-input__input",
         onKeydown: _cache[1] || (_cache[1] = (...args) => $options.handleKeyDown && $options.handleKeyDown(...args)),
         onInput: _cache[2] || (_cache[2] = (...args) => $options.update && $options.update(...args))
-      }, null, 40, _hoisted_2$o), [
+      }, null, 40, _hoisted_2$p), [
         [vue.vModelText, $options.val]
       ]),
       vue.createElementVNode("span", {
         id: $options.labelId,
         for: $props.label,
         class: "vc-input__label"
-      }, vue.toDisplayString($options.labelSpanText), 9, _hoisted_3$j),
+      }, vue.toDisplayString($options.labelSpanText), 9, _hoisted_3$k),
       vue.createElementVNode(
         "span",
         _hoisted_4$a,
@@ -10760,21 +10780,21 @@ ${_html.style}
       }
     }
   };
-  const _hoisted_1$v = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_1$w = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-saturation--white" },
     null,
     -1
     /* HOISTED */
   );
-  const _hoisted_2$n = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_2$o = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-saturation--black" },
     null,
     -1
     /* HOISTED */
   );
-  const _hoisted_3$i = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_3$j = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-saturation-circle" },
     null,
@@ -10782,7 +10802,7 @@ ${_html.style}
     /* HOISTED */
   );
   const _hoisted_4$9 = [
-    _hoisted_3$i
+    _hoisted_3$j
   ];
   function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock(
@@ -10796,8 +10816,8 @@ ${_html.style}
         onTouchstart: _cache[2] || (_cache[2] = (...args) => $options.handleChange && $options.handleChange(...args))
       },
       [
-        _hoisted_1$v,
-        _hoisted_2$n,
+        _hoisted_1$w,
+        _hoisted_2$o,
         vue.createElementVNode(
           "div",
           {
@@ -10945,16 +10965,16 @@ ${_html.style}
       }
     }
   };
-  const _hoisted_1$u = ["aria-valuenow"];
-  const _hoisted_2$m = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_1$v = ["aria-valuenow"];
+  const _hoisted_2$n = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-hue-picker" },
     null,
     -1
     /* HOISTED */
   );
-  const _hoisted_3$h = [
-    _hoisted_2$m
+  const _hoisted_3$i = [
+    _hoisted_2$n
   ];
   function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock(
@@ -10981,11 +11001,11 @@ ${_html.style}
               style: vue.normalizeStyle({ top: $options.pointerTop, left: $options.pointerLeft }),
               role: "presentation"
             },
-            _hoisted_3$h,
+            _hoisted_3$i,
             4
             /* STYLE */
           )
-        ], 40, _hoisted_1$u)
+        ], 40, _hoisted_1$v)
       ],
       2
       /* CLASS */
@@ -11081,9 +11101,9 @@ ${_html.style}
       }
     }
   };
-  const _hoisted_1$t = { class: "vc-sketch-saturation-wrap" };
-  const _hoisted_2$l = { class: "vc-sketch-controls" };
-  const _hoisted_3$g = { class: "vc-sketch-sliders" };
+  const _hoisted_1$u = { class: "vc-sketch-saturation-wrap" };
+  const _hoisted_2$m = { class: "vc-sketch-controls" };
+  const _hoisted_3$h = { class: "vc-sketch-sliders" };
   const _hoisted_4$8 = { class: "vc-sketch-hue-wrap" };
   const _hoisted_5$5 = {
     key: 0,
@@ -11124,14 +11144,14 @@ ${_html.style}
         class: vue.normalizeClass(["vc-sketch", [$props.disableAlpha ? "vc-sketch__disable-alpha" : ""]])
       },
       [
-        vue.createElementVNode("div", _hoisted_1$t, [
+        vue.createElementVNode("div", _hoisted_1$u, [
           vue.createVNode(_component_Saturation, {
             value: _ctx.colors,
             onChange: $options.childChange
           }, null, 8, ["value", "onChange"])
         ]),
-        vue.createElementVNode("div", _hoisted_2$l, [
-          vue.createElementVNode("div", _hoisted_3$g, [
+        vue.createElementVNode("div", _hoisted_2$m, [
+          vue.createElementVNode("div", _hoisted_3$h, [
             vue.createElementVNode("div", _hoisted_4$8, [
               vue.createVNode(_component_Hue, {
                 value: _ctx.colors,
@@ -11236,7 +11256,7 @@ ${_html.style}
   script.render = render;
   script.__file = "src/components/sketch/sketch.vue";
   script.install = install;
-  const _sfc_main$u = vue.defineComponent({
+  const _sfc_main$v = vue.defineComponent({
     name: "PbColorPicker",
     components: {
       Sketch: script
@@ -11296,8 +11316,8 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$s = { class: "buttons" };
-  const _hoisted_2$k = { class: "sketch-wrap" };
+  const _hoisted_1$t = { class: "buttons" };
+  const _hoisted_2$l = { class: "sketch-wrap" };
   function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_Sketch = vue.resolveComponent("Sketch");
     const _directive_click_outside = vue.resolveDirective("click-outside");
@@ -11306,7 +11326,7 @@ ${_html.style}
       onKeydown: _cache[3] || (_cache[3] = vue.withModifiers(() => {
       }, ["stop"]))
     }, [
-      vue.createElementVNode("div", _hoisted_1$s, [
+      vue.createElementVNode("div", _hoisted_1$t, [
         vue.renderSlot(_ctx.$slots, "button", vue.normalizeProps(vue.guardReactiveProps({ toggle: _ctx.toggle, color: _ctx.color })), () => [
           vue.createElementVNode("button", {
             class: vue.normalizeClass([{ none: !_ctx.color }, "picker-button"]),
@@ -11321,7 +11341,7 @@ ${_html.style}
           vue.createElementVNode("i", { class: "material-icons-outlined" }, "delete", -1)
         ]))) : vue.createCommentVNode("", true)
       ]),
-      vue.createElementVNode("div", _hoisted_2$k, [
+      vue.createElementVNode("div", _hoisted_2$l, [
         _ctx.isShowColorPicker ? (vue.openBlock(), vue.createBlock(_component_Sketch, {
           key: 0,
           modelValue: _ctx.color,
@@ -11333,12 +11353,12 @@ ${_html.style}
       [_directive_click_outside, () => _ctx.toggle(false)]
     ]);
   }
-  const PbColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render]]);
-  const _hoisted_1$r = { class: "group-editor group-editor-background" };
-  const _hoisted_2$j = { class: "flex-align-center" };
-  const _hoisted_3$f = { class: "bs-layout-horizontal" };
+  const PbColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", _sfc_render]]);
+  const _hoisted_1$s = { class: "group-editor group-editor-background" };
+  const _hoisted_2$k = { class: "flex-align-center" };
+  const _hoisted_3$g = { class: "bs-layout-horizontal" };
   const _hoisted_4$7 = { class: "color" };
-  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorBackground",
     props: {
       group: {},
@@ -11371,12 +11391,12 @@ ${_html.style}
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
-          vue.createElementVNode("div", _hoisted_2$j, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
+          vue.createElementVNode("div", _hoisted_2$k, [
             _cache[3] || (_cache[3] = vue.createElementVNode("div", { class: "title" }, [
               vue.createElementVNode("label", { textContent: "Background" })
             ], -1)),
-            vue.createElementVNode("div", _hoisted_3$f, [
+            vue.createElementVNode("div", _hoisted_3$g, [
               vue.createElementVNode("div", _hoisted_4$7, [
                 vue.createVNode(PbColorPicker, {
                   value: color.value,
@@ -11406,9 +11426,9 @@ ${_html.style}
   const TopRightCornerIcon = "data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Transformed%20by:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='%23000000'%3e%3cg%20id='SVGRepo_bgCarrier'%20stroke-width='0'/%3e%3cg%20id='SVGRepo_tracerCarrier'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cg%20id='SVGRepo_iconCarrier'%3e%3cg%3e%3cpath%20fill='none'%20d='M0%200H24V24H0z'/%3e%3cpath%20d='M21%2019v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2H7v-2h2zm-4%200v2H3v-2h2zm16-4v2h-2v-2h2zM5%2015v2H3v-2h2zm0-4v2H3v-2h2zm11-8c2.687%200%204.882%202.124%204.995%204.783L21%208v5h-2V8c0-1.591-1.255-2.903-2.824-2.995L16%205h-5V3h5zM5%207v2H3V7h2zm0-4v2H3V3h2zm4%200v2H7V3h2z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
   const BottomLeftCornerIcon = "data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Transformed%20by:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='%23000000'%20transform='rotate(180)'%3e%3cg%20id='SVGRepo_bgCarrier'%20stroke-width='0'/%3e%3cg%20id='SVGRepo_tracerCarrier'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cg%20id='SVGRepo_iconCarrier'%3e%3cg%3e%3cpath%20fill='none'%20d='M0%200H24V24H0z'/%3e%3cpath%20d='M21%2019v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2H7v-2h2zm-4%200v2H3v-2h2zm16-4v2h-2v-2h2zM5%2015v2H3v-2h2zm0-4v2H3v-2h2zm11-8c2.687%200%204.882%202.124%204.995%204.783L21%208v5h-2V8c0-1.591-1.255-2.903-2.824-2.995L16%205h-5V3h5zM5%207v2H3V7h2zm0-4v2H3V3h2zm4%200v2H7V3h2z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
   const BottomRightCornerIcon = "data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Transformed%20by:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='%23000000'%20transform='rotate(90)'%3e%3cg%20id='SVGRepo_bgCarrier'%20stroke-width='0'/%3e%3cg%20id='SVGRepo_tracerCarrier'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cg%20id='SVGRepo_iconCarrier'%3e%3cg%3e%3cpath%20fill='none'%20d='M0%200H24V24H0z'/%3e%3cpath%20d='M21%2019v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2H7v-2h2zm-4%200v2H3v-2h2zm16-4v2h-2v-2h2zM5%2015v2H3v-2h2zm0-4v2H3v-2h2zm11-8c2.687%200%204.882%202.124%204.995%204.783L21%208v5h-2V8c0-1.591-1.255-2.903-2.824-2.995L16%205h-5V3h5zM5%207v2H3V7h2zm0-4v2H3V3h2zm4%200v2H7V3h2z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
-  const _hoisted_1$q = { class: "group-editor group-editor-border" };
-  const _hoisted_2$i = { class: "flex-align-center" };
-  const _hoisted_3$e = { class: "" };
+  const _hoisted_1$r = { class: "group-editor group-editor-border" };
+  const _hoisted_2$j = { class: "flex-align-center" };
+  const _hoisted_3$f = { class: "" };
   const _hoisted_4$6 = { class: "color" };
   const _hoisted_5$4 = { class: "mt-8" };
   const _hoisted_6$4 = { class: "flex-grow-1 mt-4" };
@@ -11421,7 +11441,7 @@ ${_html.style}
   const _hoisted_13 = { class: "bg-gray-100 py-5 rounded-8" };
   const _hoisted_14 = { class: "" };
   const _hoisted_15 = { class: "mt-2" };
-  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorBorder",
     props: {
       group: {},
@@ -11459,12 +11479,12 @@ ${_html.style}
       const updateBorderBottomLeftRadius = (value) => updatePropertyValue({ borderBottomLeftRadius: value });
       const updateBorderBottomRightRadius = (value) => updatePropertyValue({ borderBottomRightRadius: value });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
-          vue.createElementVNode("div", _hoisted_2$i, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
+          vue.createElementVNode("div", _hoisted_2$j, [
             _cache[7] || (_cache[7] = vue.createElementVNode("div", { class: "title" }, [
               vue.createElementVNode("label", { textContent: "Border" })
             ], -1)),
-            vue.createElementVNode("div", _hoisted_3$e, [
+            vue.createElementVNode("div", _hoisted_3$f, [
               _cache[3] || (_cache[3] = vue.createElementVNode("div", { class: "sub-title" }, [
                 vue.createElementVNode("label", { textContent: "Color" })
               ], -1)),
@@ -11581,14 +11601,14 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$p = { class: "group-editor group-editor-margin" };
-  const _hoisted_2$h = { class: "flex-align-center" };
-  const _hoisted_3$d = { class: "flex-grow-1" };
+  const _hoisted_1$q = { class: "group-editor group-editor-margin" };
+  const _hoisted_2$i = { class: "flex-align-center" };
+  const _hoisted_3$e = { class: "flex-grow-1" };
   const _hoisted_4$5 = { class: "bg-gray-100 py-5 rounded-8" };
   const _hoisted_5$3 = { class: "text-center" };
   const _hoisted_6$3 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
   const _hoisted_7$2 = { class: "text-center" };
-  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorMargin",
     props: {
       group: {},
@@ -11612,12 +11632,12 @@ ${_html.style}
       const updateTop = (value) => updatePropertyValue({ marginTop: value });
       const updateBottom = (value) => updatePropertyValue({ marginBottom: value });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
-          vue.createElementVNode("div", _hoisted_2$h, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
+          vue.createElementVNode("div", _hoisted_2$i, [
             _cache[1] || (_cache[1] = vue.createElementVNode("div", { class: "title" }, [
               vue.createElementVNode("label", { textContent: "Margin" })
             ], -1)),
-            vue.createElementVNode("div", _hoisted_3$d, [
+            vue.createElementVNode("div", _hoisted_3$e, [
               vue.createElementVNode("div", _hoisted_4$5, [
                 vue.createElementVNode("div", _hoisted_5$3, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
@@ -11666,14 +11686,14 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$o = { class: "group-editor group-editor-padding" };
-  const _hoisted_2$g = { class: "flex-align-center" };
-  const _hoisted_3$c = { class: "flex-grow-1" };
+  const _hoisted_1$p = { class: "group-editor group-editor-padding" };
+  const _hoisted_2$h = { class: "flex-align-center" };
+  const _hoisted_3$d = { class: "flex-grow-1" };
   const _hoisted_4$4 = { class: "bg-gray-100 py-5 rounded-8" };
   const _hoisted_5$2 = { class: "text-center" };
   const _hoisted_6$2 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
   const _hoisted_7$1 = { class: "text-center" };
-  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorPadding",
     props: {
       group: {},
@@ -11697,12 +11717,12 @@ ${_html.style}
       const updateTop = (value) => updatePropertyValue({ paddingTop: value });
       const updateBottom = (value) => updatePropertyValue({ paddingBottom: value });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
-          vue.createElementVNode("div", _hoisted_2$g, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
+          vue.createElementVNode("div", _hoisted_2$h, [
             _cache[1] || (_cache[1] = vue.createElementVNode("div", { class: "title" }, [
               vue.createElementVNode("label", { textContent: "Padding" })
             ], -1)),
-            vue.createElementVNode("div", _hoisted_3$c, [
+            vue.createElementVNode("div", _hoisted_3$d, [
               vue.createElementVNode("div", _hoisted_4$4, [
                 vue.createElementVNode("div", _hoisted_5$2, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
@@ -11777,7 +11797,7 @@ ${_html.style}
           propertyType: "text"
         }
       ],
-      propertyGroupEditor: () => _sfc_main$w
+      propertyGroupEditor: () => _sfc_main$x
     };
   };
   const sizeGroup = () => {
@@ -11796,27 +11816,27 @@ ${_html.style}
           propertyType: "text"
         },
         {
-          propertyName: "min-width",
+          propertyName: "minWidth",
           caption: "Min Width",
           propertyType: "text"
         },
         {
-          propertyName: "min-height",
+          propertyName: "minHeight",
           caption: "Min Height",
           propertyType: "text"
         },
         {
-          propertyName: "max-width",
+          propertyName: "maxWidth",
           caption: "Max Width",
           propertyType: "text"
         },
         {
-          propertyName: "max-height",
+          propertyName: "maxHeight",
           caption: "Max Height",
           propertyType: "text"
         }
       ],
-      propertyGroupEditor: () => _sfc_main$v
+      propertyGroupEditor: () => _sfc_main$w
     };
   };
   const marginGroup = () => {
@@ -11845,7 +11865,7 @@ ${_html.style}
           propertyType: "text"
         }
       ],
-      propertyGroupEditor: () => _sfc_main$r
+      propertyGroupEditor: () => _sfc_main$s
     };
   };
   const paddingGroup = () => {
@@ -11874,7 +11894,7 @@ ${_html.style}
           propertyType: "text"
         }
       ],
-      propertyGroupEditor: () => _sfc_main$q
+      propertyGroupEditor: () => _sfc_main$r
     };
   };
   const commonGroup = () => {
@@ -11971,7 +11991,7 @@ ${_html.style}
           propertyType: "image"
         }
       ],
-      propertyGroupEditor: () => _sfc_main$t
+      propertyGroupEditor: () => _sfc_main$u
     };
   };
   const borderGroup = () => {
@@ -12025,7 +12045,7 @@ ${_html.style}
           propertyType: "text"
         }
       ],
-      propertyGroupEditor: () => _sfc_main$s
+      propertyGroupEditor: () => _sfc_main$t
     };
   };
   const defaultPropertyGroups = () => {
@@ -12034,7 +12054,7 @@ ${_html.style}
   const defaultWidgetPropertyGroups = () => {
     return [alignGroup(), positionGroup(), sizeGroup(), marginGroup(), paddingGroup(), borderGroup(), backgroundGroup(), commonGroup()];
   };
-  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     __name: "PbContainerWidget",
     props: {
       part: {},
@@ -12049,7 +12069,7 @@ ${_html.style}
         var _a;
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
           _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, {
+            return vue.openBlock(), vue.createBlock(_sfc_main$B, {
               key: child.partId,
               "is-mobile-page": false,
               part: child
@@ -12071,6 +12091,18 @@ ${_html.style}
       icon: "draft",
       className: "pb-page",
       propertyGroups: [
+        {
+          groupName: "size",
+          caption: "Size",
+          properties: [
+            {
+              propertyName: "maxWidth",
+              caption: "Max Width",
+              propertyType: "text",
+              params: ""
+            }
+          ]
+        },
         alignGroup(),
         paddingGroup(),
         backgroundGroup(),
@@ -12080,7 +12112,7 @@ ${_html.style}
         align: "center"
       },
       allowsChild: () => true,
-      creator: () => _sfc_main$x
+      creator: () => _sfc_main$y
     }
   ];
   const sectionParts = [
@@ -12099,7 +12131,7 @@ ${_html.style}
         align: "center"
       },
       allowsChild: () => true,
-      creator: () => _sfc_main$x
+      creator: () => _sfc_main$y
     }
   ];
   const blockParts = [
@@ -12118,7 +12150,7 @@ ${_html.style}
         align: "center"
       },
       allowsChild: () => true,
-      creator: () => _sfc_main$z
+      creator: () => _sfc_main$A
     }
   ];
   const widgets = [
@@ -12196,6 +12228,18 @@ ${_html.style}
               caption: "Image",
               propertyType: "image",
               params: ""
+            },
+            {
+              propertyName: "link",
+              caption: "Link",
+              propertyType: "text",
+              params: ""
+            },
+            {
+              propertyName: "linkTarget",
+              caption: "Link Target",
+              propertyType: "text",
+              params: ""
             }
           ]
         },
@@ -12300,7 +12344,7 @@ ${_html.style}
         height: "300px"
       },
       allowsChild: () => true,
-      creator: () => _sfc_main$p
+      creator: () => _sfc_main$q
     }
   ];
   const partDefinitions = {};
@@ -13537,7 +13581,7 @@ ${_html.style}
         plugin.widgets.forEach((v) => {
           const w = { ...v };
           w.partType = "Widget";
-          w.creator = () => _sfc_main$C;
+          w.creator = () => _sfc_main$D;
           w.propertyGroups = [...w.propertyGroups, ...defaultWidgetPropertyGroups()];
           partDefinitions2[v.partName] = w;
           const found = this.customWidgets.find((x) => x.partName === v.partName);
@@ -13582,7 +13626,7 @@ ${_html.style}
           name: "Page (Mobile)"
         };
         parts[1].properties = {
-          ...parts[0].properties || {},
+          ...parts[1].properties || {},
           name: "Page (PC)"
         };
       }
@@ -13769,8 +13813,8 @@ ${_html.style}
       });
     }
   }
-  const _hoisted_1$n = { class: "pb-tool-button bs-layout-horizontal flex-align-center" };
-  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$o = { class: "pb-tool-button bs-layout-horizontal flex-align-center" };
+  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     __name: "PbToolbarButton",
     props: {
       button: {}
@@ -13783,7 +13827,7 @@ ${_html.style}
         (_b = (_a = props.button).handler) == null ? void 0 : _b.call(_a, pageBuilder);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
           vue.createElementVNode("div", {
             class: "tool-button bs-clickable",
             onClick: handleClick
@@ -13798,17 +13842,17 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$m = { class: "pb-tool-button-group bs-layout-horizontal flex-align-center" };
-  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$n = { class: "pb-tool-button-group bs-layout-horizontal flex-align-center" };
+  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     __name: "PbToolbarButtonGroup",
     props: {
       group: {}
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.group.buttons, (button) => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$o, {
+            return vue.openBlock(), vue.createBlock(_sfc_main$p, {
               key: button.buttonId,
               button
             }, null, 8, ["button"]);
@@ -13817,10 +13861,10 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$l = { class: "pb-toolbar bs-layout-horizontal align-items-center" };
-  const _hoisted_2$f = { class: "bs-layout-horizontal align-items-center" };
-  const _hoisted_3$b = { class: "mr-8" };
-  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$m = { class: "pb-toolbar bs-layout-horizontal align-items-center" };
+  const _hoisted_2$g = { class: "bs-layout-horizontal align-items-center" };
+  const _hoisted_3$c = { class: "mr-8" };
+  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     __name: "PbToolbar",
     props: {
       plugin: {}
@@ -13869,10 +13913,10 @@ ${_html.style}
       });
       return (_ctx, _cache) => {
         var _a, _b, _c;
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
-          vue.createElementVNode("div", _hoisted_2$f, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
+          vue.createElementVNode("div", _hoisted_2$g, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(buttonGroups), (group) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$n, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$o, {
                 key: group.groupId,
                 group
               }, null, 8, ["group"]);
@@ -13895,29 +13939,29 @@ ${_html.style}
             }, null, 8, ["modelValue"])
           ]),
           _cache[2] || (_cache[2] = vue.createElementVNode("div", { class: "flex-grow-1" }, null, -1)),
-          vue.createElementVNode("div", _hoisted_3$b, [
+          vue.createElementVNode("div", _hoisted_3$c, [
             _ctx.plugin ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent((_a = _ctx.plugin) == null ? void 0 : _a.component), vue.mergeProps({ key: 0 }, (_b = _ctx.plugin) == null ? void 0 : _b.bind, vue.toHandlers((_c = _ctx.plugin) == null ? void 0 : _c.on)), null, 16)) : vue.createCommentVNode("", true)
           ])
         ]);
       };
     }
   });
-  const _hoisted_1$k = { class: "pb-menu bs-layout-vertical" };
-  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$l = { class: "pb-menu bs-layout-vertical" };
+  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     __name: "PbMenu",
     props: {
       toolbarPlugin: {}
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
-          vue.createVNode(_sfc_main$m, { plugin: _ctx.toolbarPlugin }, null, 8, ["plugin"])
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
+          vue.createVNode(_sfc_main$n, { plugin: _ctx.toolbarPlugin }, null, 8, ["plugin"])
         ]);
       };
     }
   });
-  const _hoisted_1$j = { class: "bs-layout-vertical border" };
-  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$k = { class: "bs-layout-vertical border" };
+  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     __name: "PbNavigator",
     setup(__props) {
       const pageBuilder = usePageBuilderEditor();
@@ -14018,7 +14062,7 @@ ${_html.style}
         }
       };
       const expandParent = (part) => {
-        if (part.parent && part.parent.partName !== PAGE_TYPE) {
+        if (part.parent && part.parent.partName !== ROOT_TYPE) {
           expandedRows.value.add(part.parent.partId);
           expandParent(part.parent);
         }
@@ -14039,7 +14083,7 @@ ${_html.style}
         PageBuilderEditorEvent.off.modelUpdatedByUI(modelUpdateHandler);
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
           vue.createElementVNode("div", {
             ref_key: "tree",
             ref: tree,
@@ -14072,7 +14116,7 @@ ${_html.style}
       };
     }
   });
-  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     __name: "PbSidebarPropertyEditor",
     props: {
       property: {},
@@ -14107,13 +14151,13 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$i = { class: "pb-sidebar-property-group" };
-  const _hoisted_2$e = {
+  const _hoisted_1$j = { class: "pb-sidebar-property-group" };
+  const _hoisted_2$f = {
     key: 0,
     class: "group-title"
   };
-  const _hoisted_3$a = ["textContent"];
-  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_3$b = ["textContent"];
+  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     __name: "PbSidebarPropertyGroupEditor",
     props: {
       group: {},
@@ -14127,11 +14171,11 @@ ${_html.style}
         return (_b = (_a = props.group).propertyGroupEditor) == null ? void 0 : _b.call(_a, props.group, props.selectedParts);
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
-          _ctx.group.showGroupName ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$e, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
+          _ctx.group.showGroupName ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$f, [
             vue.createElementVNode("label", {
               textContent: vue.toDisplayString(_ctx.group.caption)
-            }, null, 8, _hoisted_3$a)
+            }, null, 8, _hoisted_3$b)
           ])) : vue.createCommentVNode("", true),
           _ctx.partsKey ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
             groupEditor.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(groupEditor.value), {
@@ -14139,7 +14183,7 @@ ${_html.style}
               group: _ctx.group,
               "selected-parts": _ctx.selectedParts
             }, null, 8, ["group", "selected-parts"])) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.group.properties, (property) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$j, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$k, {
                 key: `${_ctx.partsKey}_${property.propertyName}`,
                 property,
                 "selected-parts": _ctx.selectedParts
@@ -14150,8 +14194,8 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$h = { class: "pb-sidebar-properties" };
-  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$i = { class: "pb-sidebar-properties" };
+  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     __name: "PbSidebarProperties",
     setup(__props) {
       const pageBuilder = usePageBuilderEditor();
@@ -14169,12 +14213,12 @@ ${_html.style}
         }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(properties.value, (group) => {
             return vue.openBlock(), vue.createElementBlock("div", {
               key: `${partsKey.value}_${group.groupName}`
             }, [
-              vue.createVNode(_sfc_main$i, {
+              vue.createVNode(_sfc_main$j, {
                 group,
                 partsKey: partsKey.value,
                 "selected-parts": vue.unref(selectedParts)
@@ -14185,19 +14229,19 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$g = { class: "pb-sidebar" };
-  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$h = { class: "pb-sidebar" };
+  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     __name: "PbSidebar",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
-          vue.createVNode(_sfc_main$h)
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
+          vue.createVNode(_sfc_main$i)
         ]);
       };
     }
   });
-  const _hoisted_1$f = ["data-part-id"];
-  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$g = ["data-part-id"];
+  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPage",
     props: {
       part: {},
@@ -14271,7 +14315,7 @@ ${_html.style}
               class: [selected.value && "selected", _ctx.isMobilePage ? "mobile" : "pc", "pb-page-content"]
             }, properties.value), [
               (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, {
+                return vue.openBlock(), vue.createBlock(_sfc_main$y, {
                   key: section.partId,
                   "is-mobile-page": _ctx.isMobilePage,
                   part: section
@@ -14284,15 +14328,15 @@ ${_html.style}
             }, _cache[0] || (_cache[0] = [
               vue.createElementVNode("i", { class: "material-icons-outlined" }, "add_circle_outline", -1)
             ]))
-          ], 46, _hoisted_1$f),
+          ], 46, _hoisted_1$g),
           _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 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({
+  const canvasStyle = '.pb-page-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\n\n.pb-page {\n  width: 100%;\n  margin: 0 auto;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n.pb-page .pb-page-content.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-page * {\n  box-sizing: border-box;\n}\n\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\n\n.pb-add-widget-button button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  padding: 8px;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n\n.pb-section {\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n  background-color: #fff;\n}\n\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n\n.pb-section.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-section.pb-section-static {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n}\n\n.pb-section.pb-section-static:after {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n}\n\n.pb-section-static .pb-widget {\n  outline: none;\n}\n\n.pb-block {\n  display: flex;\n  min-width: 1px;\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n  outline: 1px dashed #ccc;\n}\n\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n\n.pb-block.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-widget {\n  position: relative;\n  outline: 1px dashed #ccc;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  pointer-events: auto !important;\n}\n\n.pb-widget * {\n  pointer-events: none;\n}\n\n.pb-widget.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.pb-widget .pan-handle {\n  position: absolute;\n  left: -6px;\n  top: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: move;\n  pointer-events: auto !important;\n}\n\n.pb-widget .resize-handle {\n  position: absolute;\n  right: -6px;\n  bottom: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: nwse-resize;\n  pointer-events: auto !important;\n}\n\n.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-text-widget .text {\n  color: #333;\n}\n\n.pb-text-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-image-widget {\n  width: 100%;\n}\n\n.pb-image-widget .image {\n  width: 100%;\n}\n\n.pb-image-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-image-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-html-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-iframe-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-iframe-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-youtube-widget {\n  width: 100%;\n}\n\n.pb-youtube-widget .youtube {\n  width: 100%;\n  height: 100%;\n}\n\n.pb-youtube-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-youtube-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-container-widget {\n  width: 100%;\n}\n\n.pb-container-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-container-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-product-list-widget {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n\n.pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n\n.pb-product-list-widget .product-wrapper .product {\n  width: 95%;\n  margin: 0 auto;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n\n.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-product-list-widget .product-wrapper .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 200px;\n  vertical-align: middle;\n}\n\n@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n\n.pb-login-widget h3 {\n  padding: 0;\n  margin: 0;\n  font-size: 32px;\n  font-weight: bold;\n  color: #ccc;\n  line-height: 200px;\n  vertical-align: middle;\n}\n\n.font-icon {\n  font-family: Material Symbols Outlined, monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\n\nhtml, body {\n  font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n  font-size: 12px;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  background-color: #aaa;\n  overflow: hidden;\n}\n\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\n}\n\n.pb-add-section-handle {\n  position: relative;\n  text-align: center;\n  cursor: pointer;\n  z-index: 5;\n  height: 0;\n}\n\n.pb-add-section-handle.top::before, .pb-add-section-handle.bottom::before, .pb-add-section-handle.middle::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.pb-add-section-handle.bottom {\n  left: 50%;\n  bottom: -32px;\n}\n\n.pb-add-section-handle:hover.top::before, .pb-add-section-handle:hover.bottom::before, .pb-add-section-handle:hover.middle::before,\n.pb-add-section-handle:hover > i {\n  opacity: 1;\n}\n\n.pb-add-section-handle > i {\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}';
+  const _hoisted_1$f = ["height", "width"];
+  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPageFrame",
     props: {
       part: {},
@@ -14358,7 +14402,7 @@ ${_html.style}
         // width: `${width.value}px`,
         // height: `${height.value}px`,
       }));
-      let iframeObserver;
+      let resizeObserver;
       const updateIframeHeight = () => {
         setTimeout(() => {
           if (!iframeRef.value || !iframeRef.value.contentDocument) return;
@@ -14371,13 +14415,15 @@ ${_html.style}
       vue.onMounted(() => {
         if (!iframeRef.value || !iframeRef.value.contentDocument) return;
         const iframeBody = iframeRef.value.contentDocument.body;
-        iframeObserver = new MutationObserver(updateIframeHeight);
-        iframeObserver.observe(iframeBody, { childList: true, subtree: true });
+        resizeObserver = new ResizeObserver(() => {
+          updateIframeHeight();
+        });
+        resizeObserver.observe(iframeBody, {});
         iframeRef.value.onload = updateIframeHeight;
       });
       vue.onBeforeUnmount(() => {
-        if (iframeObserver) {
-          iframeObserver.disconnect();
+        if (resizeObserver) {
+          resizeObserver.disconnect();
         }
       });
       return (_ctx, _cache) => {
@@ -14388,7 +14434,10 @@ ${_html.style}
         }, [
           vue.createVNode(vue.unref(bluesea.BSSelect), {
             modelValue: width.value,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => width.value = $event),
+            "onUpdate:modelValue": [
+              _cache[0] || (_cache[0] = ($event) => width.value = $event),
+              updateIframeHeight
+            ],
             items: [480, 768, 1024, 1280],
             "label-provider": (v) => `Screen Size: ${v}px`,
             "value-provider": (v) => v,
@@ -14401,12 +14450,12 @@ ${_html.style}
             style: vue.normalizeStyle(style.value),
             width: `${width.value}px`,
             class: "page-frame mt-12"
-          }, null, 12, _hoisted_1$e),
+          }, null, 12, _hoisted_1$f),
           ((_b = (_a = iframeRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document.body) ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
             key: 0,
             to: (_d = (_c = iframeRef.value) == null ? void 0 : _c.contentWindow) == null ? void 0 : _d.document.body
           }, [
-            vue.createVNode(_sfc_main$f, {
+            vue.createVNode(_sfc_main$g, {
               "is-mobile-page": isMobilePage.value,
               part: _ctx.part,
               width: width.value
@@ -14416,12 +14465,12 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$d = { class: "pb-canvas-wrapper" };
-  const _hoisted_2$d = {
+  const _hoisted_1$e = { class: "pb-canvas-wrapper" };
+  const _hoisted_2$e = {
     key: 1,
     style: { "width": "20px" }
   };
-  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     __name: "PbCanvas",
     setup(__props) {
       const pageBuilder = usePageBuilderEditor();
@@ -14443,15 +14492,15 @@ ${_html.style}
         };
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
           vue.createElementVNode("div", vue.mergeProps({ class: "pb-canvas" }, style.value), [
-            partS.value ? (vue.openBlock(), vue.createBlock(_sfc_main$e, {
+            partS.value ? (vue.openBlock(), vue.createBlock(_sfc_main$f, {
               key: 0,
               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, {
+            partL.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$e)) : vue.createCommentVNode("", true),
+            partL.value ? (vue.openBlock(), vue.createBlock(_sfc_main$f, {
               key: 2,
               part: partL.value,
               width: 1024
@@ -14461,9 +14510,9 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$c = { class: "pb-editor bs-layout-vertical flex-grow-1" };
-  const _hoisted_2$c = { class: "pb-editor-body bs-layout-horizontal flex-grow-1" };
-  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$d = { class: "pb-editor bs-layout-vertical flex-grow-1" };
+  const _hoisted_2$d = { class: "pb-editor-body bs-layout-horizontal flex-grow-1" };
+  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     __name: "PageBuilderEditor",
     props: {
       instanceId: {},
@@ -14506,22 +14555,22 @@ ${_html.style}
         getPageContent
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
-          vue.createVNode(_sfc_main$l, { "toolbar-plugin": _ctx.toolbarPlugin }, null, 8, ["toolbar-plugin"]),
-          vue.createElementVNode("div", _hoisted_2$c, [
-            vue.createVNode(_sfc_main$k),
-            vue.createVNode(_sfc_main$d),
-            vue.createVNode(_sfc_main$g)
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
+          vue.createVNode(_sfc_main$m, { "toolbar-plugin": _ctx.toolbarPlugin }, null, 8, ["toolbar-plugin"]),
+          vue.createElementVNode("div", _hoisted_2$d, [
+            vue.createVNode(_sfc_main$l),
+            vue.createVNode(_sfc_main$e),
+            vue.createVNode(_sfc_main$h)
           ])
         ]);
       };
     }
   });
-  const _hoisted_1$b = { class: "property-editor property-editor-readonly-text" };
-  const _hoisted_2$b = { class: "title" };
-  const _hoisted_3$9 = ["textContent"];
+  const _hoisted_1$c = { class: "property-editor property-editor-readonly-text" };
+  const _hoisted_2$c = { class: "title" };
+  const _hoisted_3$a = ["textContent"];
   const _hoisted_4$3 = ["textContent"];
-  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyEditorReadonlyText",
     props: {
       property: {},
@@ -14529,11 +14578,11 @@ ${_html.style}
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
-          vue.createElementVNode("div", _hoisted_2$b, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
+          vue.createElementVNode("div", _hoisted_2$c, [
             vue.createElementVNode("label", {
               textContent: vue.toDisplayString(_ctx.property.caption)
-            }, null, 8, _hoisted_3$9)
+            }, null, 8, _hoisted_3$a)
           ]),
           vue.createElementVNode("div", null, [
             vue.createElementVNode("div", {
@@ -14546,12 +14595,12 @@ ${_html.style}
   });
   const PbPropertyEditorReadonlyText = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
-    default: _sfc_main$b
+    default: _sfc_main$c
   }, Symbol.toStringTag, { value: "Module" }));
-  const _hoisted_1$a = { class: "property-editor property-editor-text flex-align-center" };
-  const _hoisted_2$a = { class: "title" };
-  const _hoisted_3$8 = ["textContent"];
-  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$b = { class: "property-editor property-editor-text flex-align-center" };
+  const _hoisted_2$b = { class: "title" };
+  const _hoisted_3$9 = ["textContent"];
+  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyEditorText",
     props: {
       property: {},
@@ -14569,11 +14618,11 @@ ${_html.style}
         emit("update-property-value", properties);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
-          vue.createElementVNode("div", _hoisted_2$a, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+          vue.createElementVNode("div", _hoisted_2$b, [
             vue.createElementVNode("label", {
               textContent: vue.toDisplayString(_ctx.property.caption)
-            }, null, 8, _hoisted_3$8)
+            }, null, 8, _hoisted_3$9)
           ]),
           vue.createElementVNode("div", null, [
             _ctx.property.multiLang ? (vue.openBlock(), vue.createBlock(vue.unref(bluesea.BSMultiLangTextInput), {
@@ -14594,6 +14643,46 @@ ${_html.style}
     }
   });
   const PbPropertyEditorText = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+    __proto__: null,
+    default: _sfc_main$b
+  }, Symbol.toStringTag, { value: "Module" }));
+  const _hoisted_1$a = { class: "property-editor property-editor-number flex-align-center" };
+  const _hoisted_2$a = { class: "title" };
+  const _hoisted_3$8 = ["textContent"];
+  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+    __name: "PbPropertyEditorNumber",
+    props: {
+      property: {},
+      value: {}
+    },
+    emits: ["update-property-value"],
+    setup(__props, { emit: __emit }) {
+      const props = __props;
+      const emit = __emit;
+      const emitUpdatePropertyValue = (value) => {
+        const properties = {};
+        properties[props.property.propertyName] = `${value}`;
+        emit("update-property-value", properties);
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
+          vue.createElementVNode("div", _hoisted_2$a, [
+            vue.createElementVNode("label", {
+              textContent: vue.toDisplayString(_ctx.property.caption)
+            }, null, 8, _hoisted_3$8)
+          ]),
+          vue.createElementVNode("div", null, [
+            vue.createVNode(vue.unref(bluesea.BSNumberInput), {
+              "model-value": Number(_ctx.value),
+              width: "100%",
+              "onUpdate:modelValue": emitUpdatePropertyValue
+            }, null, 8, ["model-value"])
+          ])
+        ]);
+      };
+    }
+  });
+  const PbPropertyEditorNumber = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
     default: _sfc_main$a
   }, Symbol.toStringTag, { value: "Module" }));
@@ -14916,7 +15005,7 @@ ${_html.style}
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(bluesea.BSModalFrame), {
-          class: "pb-html-editor-modal",
+          class: "pb-youtube-modal",
           title: "Youtube Video"
         }, {
           default: vue.withCtx(() => [
@@ -15292,12 +15381,12 @@ ${_html.tags}` : "";
   exports2.PAGE_BUILDER_KEY = PAGE_BUILDER_KEY;
   exports2.PAGE_TYPE = PAGE_TYPE$1;
   exports2.Page = Page;
-  exports2.PageBuilderEditor = _sfc_main$c;
+  exports2.PageBuilderEditor = _sfc_main$d;
   exports2.PageBuilderEditorEvent = PageBuilderEditorEvent;
   exports2.PageBuilderViewer = _sfc_main$2$1;
   exports2.Part = Part;
   exports2.PbContainerWidget = _sfc_main$1$1;
-  exports2.PbCustomWidget = _sfc_main$C;
+  exports2.PbCustomWidget = _sfc_main$D;
   exports2.PbHtmlWidget = _sfc_main$6$1;
   exports2.PbIframeWidget = _sfc_main$5$1;
   exports2.PbImageWidget = _sfc_main$8$1;