@g1cloud/page-builder-editor 1.0.0-alpha.12 → 1.0.0-alpha.14

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

@@ -7199,8 +7199,8 @@ ${_html.style}
     }
   };
   const _hoisted_1$1$1 = { class: "pb-product-list-widget" };
-  const _hoisted_2$v = { class: "product" };
-  const _hoisted_3$s = { class: "image" };
+  const _hoisted_2$w = { class: "product" };
+  const _hoisted_3$t = { class: "image" };
   const _hoisted_4$i = ["src"];
   const _hoisted_5$8 = { class: "name" };
   const _hoisted_6$7 = { class: "price" };
@@ -7246,9 +7246,9 @@ ${_html.style}
               key: index,
               class: "product-wrapper"
             }, [
-              vue.createElementVNode("div", _hoisted_2$v, [
+              vue.createElementVNode("div", _hoisted_2$w, [
                 products.value[index - 1] ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                  vue.createElementVNode("div", _hoisted_3$s, [
+                  vue.createElementVNode("div", _hoisted_3$t, [
                     vue.createElementVNode("img", {
                       src: products.value[index - 1].image,
                       alt: ""
@@ -7434,8 +7434,8 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$E = { class: "pb-viewer" };
-  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$G = { class: "pb-viewer" };
+  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
     __name: "PageBuilderViewer",
     props: {
       instanceId: {},
@@ -7465,7 +7465,7 @@ ${_html.style}
         }
       );
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$E, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$G, [
           page.value ? (vue.openBlock(), vue.createBlock(_sfc_main$1$1, {
             key: 0,
             "is-mobile-page": _ctx.isMobilePage,
@@ -7522,8 +7522,9 @@ ${_html.style}
     object.partName = part.partName;
     object.partId = part.partId;
     if (part.properties) {
+      object.properties = {};
       for (const name in part.properties) {
-        object[name] = part.properties[name];
+        object.properties[name] = part.properties[name];
       }
     }
     if (part.children) {
@@ -7708,21 +7709,12 @@ ${_html.style}
       this.yjsDoc = new Doc();
       this.yjsRoot = this.yjsDoc.get("root", YXmlElement);
       const rootPartId = getNewPartId();
-      const pages = [];
       this.yjsDoc.transact(() => {
         this.yjsRoot.nodeName = ROOT_TYPE;
         this.yjsRoot.setAttribute(PART_ID_KEY, rootPartId);
-        for (let i = 0; i < 3; ++i) {
-          const pageElement = new YXmlElement(PAGE_TYPE);
-          pageElement.setAttribute(PART_NAME_KEY, PAGE_TYPE);
-          pageElement.setAttribute(PART_ID_KEY, getNewPartId());
-          this.yjsRoot.push([pageElement]);
-          pages.push(new Page());
-        }
       });
       this.rootPart = vue.reactive(new RootPart());
       this.rootPart.partId = rootPartId;
-      this.rootPart.children = pages;
       this.yjsRoot.observeDeep((events, _) => {
         applyChangeEvents(this.rootPart, events);
         this.emitUpdateModelEvent(events);
@@ -8303,22 +8295,22 @@ ${_html.style}
     }
     return target;
   };
-  const _sfc_main$A = {};
-  const _hoisted_1$D = { class: "pb-add-widget-button" };
-  const _hoisted_2$u = /* @__PURE__ */ vue.createElementVNode("span", { class: "icon material-icons-outlined" }, "add_box", -1);
-  const _hoisted_3$r = /* @__PURE__ */ vue.createElementVNode("span", { class: "text" }, "Add Widget", -1);
+  const _sfc_main$B = {};
+  const _hoisted_1$F = { class: "pb-add-widget-button" };
+  const _hoisted_2$v = /* @__PURE__ */ vue.createElementVNode("span", { class: "icon material-icons-outlined" }, "add_box", -1);
+  const _hoisted_3$s = /* @__PURE__ */ vue.createElementVNode("span", { class: "text" }, "Add Widget", -1);
   const _hoisted_4$h = [
-    _hoisted_2$u,
-    _hoisted_3$r
+    _hoisted_2$v,
+    _hoisted_3$s
   ];
   function _sfc_render$1(_ctx, _cache) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$D, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$F, [
       vue.createElementVNode("button", {
         onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("add-widget", $event))
       }, _hoisted_4$h)
     ]);
   }
-  const PbAddWidgetButton = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["render", _sfc_render$1]]);
+  const PbAddWidgetButton = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["render", _sfc_render$1]]);
   const MOUSE_TRACKER_KEY = "mouseTracker";
   const MOUSE_TRACKER_NOT_FOUND = "MouseTracker not found";
   class MouseTracker {
@@ -8349,12 +8341,12 @@ ${_html.style}
       throw Error(MOUSE_TRACKER_NOT_FOUND);
     return mouseTracker;
   };
-  const _hoisted_1$C = ["data-model-id", "draggable"];
-  const _hoisted_2$t = {
+  const _hoisted_1$E = ["data-model-id", "draggable"];
+  const _hoisted_2$u = {
     key: 1,
     class: "children"
   };
-  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     __name: "PbWidget",
     props: {
       part: {}
@@ -8800,7 +8792,7 @@ ${_html.style}
             key: 0,
             part: _ctx.part
           }, null, 8, ["part"])) : vue.createCommentVNode("", true),
-          childComponents.value && childComponents.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$t, [
+          childComponents.value && childComponents.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$u, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(childComponents.value, (child) => {
               return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(child.component), {
                 key: child.part.partId,
@@ -8818,14 +8810,14 @@ ${_html.style}
             class: "resize-handle",
             onMousedown: _resize_mousedown
           }, null, 32)) : vue.createCommentVNode("", true)
-        ], 16, _hoisted_1$C)), [
+        ], 16, _hoisted_1$E)), [
           [vue.unref(vPartHandler), { pageBuilder: vue.unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
         ]);
       };
     }
   });
-  const _hoisted_1$B = ["data-model-id"];
-  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$D = ["data-model-id"];
+  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     __name: "PbBlock",
     props: {
       part: {}
@@ -9015,19 +9007,19 @@ ${_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$z, {
+            return vue.openBlock(), vue.createBlock(_sfc_main$A, {
               key: child.partId,
               part: child
             }, null, 8, ["part"]);
           }), 128))
-        ], 16, _hoisted_1$B)), [
+        ], 16, _hoisted_1$D)), [
           [vue.unref(vPartHandler), { pageBuilder: vue.unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
         ]);
       };
     }
   });
-  const _hoisted_1$A = { class: "pb-block" };
-  const _hoisted_2$s = /* @__PURE__ */ vue.createElementVNode("div", {
+  const _hoisted_1$C = { class: "pb-block" };
+  const _hoisted_2$t = /* @__PURE__ */ vue.createElementVNode("div", {
     class: "pb-widget",
     style: { "margin": "0 auto" }
   }, [
@@ -9035,22 +9027,22 @@ ${_html.style}
       /* @__PURE__ */ vue.createElementVNode("h3", null, "Login Design Part")
     ])
   ], -1);
-  const _hoisted_3$q = [
-    _hoisted_2$s
+  const _hoisted_3$r = [
+    _hoisted_2$t
   ];
-  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     __name: "PbLoginDepart",
     props: {
       part: {}
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, _hoisted_3$q);
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$C, _hoisted_3$r);
       };
     }
   });
-  const _hoisted_1$z = ["data-model-id"];
-  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$B = ["data-model-id"];
+  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     __name: "PbSection",
     props: {
       part: {}
@@ -9161,13 +9153,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$x, {
+            ((_c = _ctx.part.properties) == null ? void 0 : _c.name) === "Login Design Part" ? (vue.openBlock(), vue.createBlock(_sfc_main$y, {
               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$y, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$z, {
                 key: block.partId,
                 part: block
               }, null, 8, ["part"]);
@@ -9176,15 +9168,15 @@ ${_html.style}
               onAddWidget: addWidget
             }))
           ], 64))
-        ], 16, _hoisted_1$z)), [
+        ], 16, _hoisted_1$B)), [
           [vue.unref(vPartHandler), { pageBuilder: vue.unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
         ]);
       };
     }
   });
-  const _hoisted_1$y = { class: "group-editor group-editor-position" };
-  const _hoisted_2$r = { class: "flex-align-center" };
-  const _hoisted_3$p = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
+  const _hoisted_1$A = { class: "group-editor group-editor-position" };
+  const _hoisted_2$s = { class: "flex-align-center" };
+  const _hoisted_3$q = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Position" })
   ], -1);
   const _hoisted_4$g = { class: "flex-grow-1" };
@@ -9198,7 +9190,7 @@ ${_html.style}
     /* @__PURE__ */ vue.createElementVNode("span", { class: "font-icon" }, "add")
   ], -1);
   const _hoisted_9$5 = { class: "text-center" };
-  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorPosition",
     props: {
       group: {},
@@ -9222,9 +9214,9 @@ ${_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$y, [
-          vue.createElementVNode("div", _hoisted_2$r, [
-            _hoisted_3$p,
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, [
+          vue.createElementVNode("div", _hoisted_2$s, [
+            _hoisted_3$q,
             vue.createElementVNode("div", _hoisted_4$g, [
               vue.createElementVNode("div", _hoisted_5$7, [
                 vue.createElementVNode("div", _hoisted_6$6, [
@@ -9269,13 +9261,13 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$x = { class: "group-editor group-editor-size" };
-  const _hoisted_2$q = { class: "flex-align-center" };
-  const _hoisted_3$o = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
+  const _hoisted_1$z = { class: "group-editor group-editor-size" };
+  const _hoisted_2$r = { class: "flex-align-center" };
+  const _hoisted_3$p = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Size" })
   ], -1);
   const _hoisted_4$f = { class: "flex-grow-1 bs-layout-horizontal" };
-  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorSize",
     props: {
       group: {},
@@ -9295,9 +9287,9 @@ ${_html.style}
       const updateWidth = (value) => updatePropertyValue({ width: value });
       const updateHeight = (value) => updatePropertyValue({ height: value });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [
-          vue.createElementVNode("div", _hoisted_2$q, [
-            _hoisted_3$o,
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$z, [
+          vue.createElementVNode("div", _hoisted_2$r, [
+            _hoisted_3$p,
             vue.createElementVNode("div", _hoisted_4$f, [
               vue.createVNode(vue.unref(bluesea.BSTextInput), {
                 "model-value": width.value,
@@ -9474,9 +9466,9 @@ ${_html.style}
       }
     }
   };
-  const _hoisted_1$w = { class: "vc-alpha" };
-  const _hoisted_2$p = { class: "vc-alpha-checkboard-wrap" };
-  const _hoisted_3$n = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_1$y = { class: "vc-alpha" };
+  const _hoisted_2$q = { class: "vc-alpha-checkboard-wrap" };
+  const _hoisted_3$o = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-alpha-picker" },
     null,
@@ -9484,12 +9476,12 @@ ${_html.style}
     /* HOISTED */
   );
   const _hoisted_4$e = [
-    _hoisted_3$n
+    _hoisted_3$o
   ];
   function render$4(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_Checkboard = vue.resolveComponent("Checkboard");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [
-      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(
@@ -10592,12 +10584,12 @@ ${_html.style}
       // }
     }
   };
-  const _hoisted_1$v = { class: "vc-editable-input" };
-  const _hoisted_2$o = ["aria-labelledby"];
-  const _hoisted_3$m = ["id", "for"];
+  const _hoisted_1$x = { class: "vc-editable-input" };
+  const _hoisted_2$p = ["aria-labelledby"];
+  const _hoisted_3$n = ["id", "for"];
   const _hoisted_4$d = { class: "vc-input__desc" };
   function render$3(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$v, [
+    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),
@@ -10605,14 +10597,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$m),
+      }, vue.toDisplayString($options.labelSpanText), 9, _hoisted_3$n),
       vue.createElementVNode(
         "span",
         _hoisted_4$d,
@@ -10692,21 +10684,21 @@ ${_html.style}
       }
     }
   };
-  const _hoisted_1$u = /* @__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$l = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_3$m = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-saturation-circle" },
     null,
@@ -10714,7 +10706,7 @@ ${_html.style}
     /* HOISTED */
   );
   const _hoisted_4$c = [
-    _hoisted_3$l
+    _hoisted_3$m
   ];
   function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock(
@@ -10728,8 +10720,8 @@ ${_html.style}
         onTouchstart: _cache[2] || (_cache[2] = (...args) => $options.handleChange && $options.handleChange(...args))
       },
       [
-        _hoisted_1$u,
-        _hoisted_2$n,
+        _hoisted_1$w,
+        _hoisted_2$o,
         vue.createElementVNode(
           "div",
           {
@@ -10877,16 +10869,16 @@ ${_html.style}
       }
     }
   };
-  const _hoisted_1$t = ["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$k = [
-    _hoisted_2$m
+  const _hoisted_3$l = [
+    _hoisted_2$n
   ];
   function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock(
@@ -10913,11 +10905,11 @@ ${_html.style}
               style: vue.normalizeStyle({ top: $options.pointerTop, left: $options.pointerLeft }),
               role: "presentation"
             },
-            _hoisted_3$k,
+            _hoisted_3$l,
             4
             /* STYLE */
           )
-        ], 40, _hoisted_1$t)
+        ], 40, _hoisted_1$v)
       ],
       2
       /* CLASS */
@@ -11013,9 +11005,9 @@ ${_html.style}
       }
     }
   };
-  const _hoisted_1$s = { class: "vc-sketch-saturation-wrap" };
-  const _hoisted_2$l = { class: "vc-sketch-controls" };
-  const _hoisted_3$j = { class: "vc-sketch-sliders" };
+  const _hoisted_1$u = { class: "vc-sketch-saturation-wrap" };
+  const _hoisted_2$m = { class: "vc-sketch-controls" };
+  const _hoisted_3$k = { class: "vc-sketch-sliders" };
   const _hoisted_4$b = { class: "vc-sketch-hue-wrap" };
   const _hoisted_5$6 = {
     key: 0,
@@ -11056,14 +11048,14 @@ ${_html.style}
         class: vue.normalizeClass(["vc-sketch", [$props.disableAlpha ? "vc-sketch__disable-alpha" : ""]])
       },
       [
-        vue.createElementVNode("div", _hoisted_1$s, [
+        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$j, [
+        vue.createElementVNode("div", _hoisted_2$m, [
+          vue.createElementVNode("div", _hoisted_3$k, [
             vue.createElementVNode("div", _hoisted_4$b, [
               vue.createVNode(_component_Hue, {
                 value: _ctx.colors,
@@ -11168,7 +11160,7 @@ ${_html.style}
   script.render = render;
   script.__file = "src/components/sketch/sketch.vue";
   script.install = install;
-  const _sfc_main$t = vue.defineComponent({
+  const _sfc_main$u = vue.defineComponent({
     name: "PbColorPicker",
     components: {
       Sketch: script
@@ -11232,10 +11224,10 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$r = { class: "buttons" };
-  const _hoisted_2$k = /* @__PURE__ */ vue.createElementVNode("i", { class: "material-icons-outlined" }, "delete", -1);
-  const _hoisted_3$i = [
-    _hoisted_2$k
+  const _hoisted_1$t = { class: "buttons" };
+  const _hoisted_2$l = /* @__PURE__ */ vue.createElementVNode("i", { class: "material-icons-outlined" }, "delete", -1);
+  const _hoisted_3$j = [
+    _hoisted_2$l
   ];
   const _hoisted_4$a = { class: "sketch-wrap" };
   function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -11246,7 +11238,7 @@ ${_html.style}
       onKeydown: _cache[3] || (_cache[3] = vue.withModifiers(() => {
       }, ["stop"]))
     }, [
-      vue.createElementVNode("div", _hoisted_1$r, [
+      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 }, "pb-button picker-button"]),
@@ -11258,7 +11250,7 @@ ${_html.style}
           key: 0,
           class: "pb-button",
           onClick: _cache[1] || (_cache[1] = (...args) => _ctx.emptyColor && _ctx.emptyColor(...args))
-        }, _hoisted_3$i)) : vue.createCommentVNode("", true)
+        }, _hoisted_3$j)) : vue.createCommentVNode("", true)
       ]),
       vue.createElementVNode("div", _hoisted_4$a, [
         _ctx.isShowColorPicker ? (vue.openBlock(), vue.createBlock(_component_Sketch, {
@@ -11272,15 +11264,15 @@ ${_html.style}
       [_directive_click_outside, () => _ctx.toggle(false)]
     ]);
   }
-  const PbColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render]]);
-  const _hoisted_1$q = { class: "group-editor group-editor-background" };
-  const _hoisted_2$j = { class: "flex-align-center" };
-  const _hoisted_3$h = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
+  const PbColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render]]);
+  const _hoisted_1$s = { class: "group-editor group-editor-background" };
+  const _hoisted_2$k = { class: "flex-align-center" };
+  const _hoisted_3$i = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Background" })
   ], -1);
   const _hoisted_4$9 = { class: "bs-layout-horizontal" };
   const _hoisted_5$5 = { class: "color" };
-  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorBackground",
     props: {
       group: {},
@@ -11310,9 +11302,9 @@ ${_html.style}
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
-          vue.createElementVNode("div", _hoisted_2$j, [
-            _hoisted_3$h,
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
+          vue.createElementVNode("div", _hoisted_2$k, [
+            _hoisted_3$i,
             vue.createElementVNode("div", _hoisted_4$9, [
               vue.createElementVNode("div", _hoisted_5$5, [
                 vue.createVNode(PbColorPicker, {
@@ -11343,9 +11335,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$p = { class: "group-editor group-editor-border" };
-  const _hoisted_2$i = { class: "flex-align-center" };
-  const _hoisted_3$g = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
+  const _hoisted_1$r = { class: "group-editor group-editor-border" };
+  const _hoisted_2$j = { class: "flex-align-center" };
+  const _hoisted_3$h = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Border" })
   ], -1);
   const _hoisted_4$8 = { class: "" };
@@ -11376,7 +11368,7 @@ ${_html.style}
   const _hoisted_18 = { class: "bg-gray-100 py-5 rounded-8" };
   const _hoisted_19 = { class: "" };
   const _hoisted_20 = { class: "mt-2" };
-  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorBorder",
     props: {
       group: {},
@@ -11414,9 +11406,9 @@ ${_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$p, [
-          vue.createElementVNode("div", _hoisted_2$i, [
-            _hoisted_3$g,
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
+          vue.createElementVNode("div", _hoisted_2$j, [
+            _hoisted_3$h,
             vue.createElementVNode("div", _hoisted_4$8, [
               _hoisted_5$4,
               vue.createElementVNode("div", _hoisted_6$4, [
@@ -11523,9 +11515,9 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$o = { class: "group-editor group-editor-margin" };
-  const _hoisted_2$h = { class: "flex-align-center" };
-  const _hoisted_3$f = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
+  const _hoisted_1$q = { class: "group-editor group-editor-margin" };
+  const _hoisted_2$i = { class: "flex-align-center" };
+  const _hoisted_3$g = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Margin" })
   ], -1);
   const _hoisted_4$7 = { class: "flex-grow-1" };
@@ -11539,7 +11531,7 @@ ${_html.style}
     /* @__PURE__ */ vue.createElementVNode("span", { class: "font-icon" }, "add")
   ], -1);
   const _hoisted_9$2 = { class: "text-center" };
-  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorMargin",
     props: {
       group: {},
@@ -11563,9 +11555,9 @@ ${_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$o, [
-          vue.createElementVNode("div", _hoisted_2$h, [
-            _hoisted_3$f,
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
+          vue.createElementVNode("div", _hoisted_2$i, [
+            _hoisted_3$g,
             vue.createElementVNode("div", _hoisted_4$7, [
               vue.createElementVNode("div", _hoisted_5$3, [
                 vue.createElementVNode("div", _hoisted_6$3, [
@@ -11610,9 +11602,9 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$n = { class: "group-editor group-editor-padding" };
-  const _hoisted_2$g = { class: "flex-align-center" };
-  const _hoisted_3$e = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
+  const _hoisted_1$p = { class: "group-editor group-editor-padding" };
+  const _hoisted_2$h = { class: "flex-align-center" };
+  const _hoisted_3$f = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Padding" })
   ], -1);
   const _hoisted_4$6 = { class: "flex-grow-1" };
@@ -11626,7 +11618,7 @@ ${_html.style}
     /* @__PURE__ */ vue.createElementVNode("span", { class: "font-icon" }, "add")
   ], -1);
   const _hoisted_9$1 = { class: "text-center" };
-  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorPadding",
     props: {
       group: {},
@@ -11650,9 +11642,9 @@ ${_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$n, [
-          vue.createElementVNode("div", _hoisted_2$g, [
-            _hoisted_3$e,
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
+          vue.createElementVNode("div", _hoisted_2$h, [
+            _hoisted_3$f,
             vue.createElementVNode("div", _hoisted_4$6, [
               vue.createElementVNode("div", _hoisted_5$2, [
                 vue.createElementVNode("div", _hoisted_6$2, [
@@ -11723,7 +11715,7 @@ ${_html.style}
           propertyType: "text"
         }
       ],
-      propertyGroupEditor: () => _sfc_main$v
+      propertyGroupEditor: () => _sfc_main$w
     };
   };
   const sizeGroup = () => {
@@ -11762,7 +11754,7 @@ ${_html.style}
           propertyType: "text"
         }
       ],
-      propertyGroupEditor: () => _sfc_main$u
+      propertyGroupEditor: () => _sfc_main$v
     };
   };
   const marginGroup = () => {
@@ -11791,7 +11783,7 @@ ${_html.style}
           propertyType: "text"
         }
       ],
-      propertyGroupEditor: () => _sfc_main$q
+      propertyGroupEditor: () => _sfc_main$r
     };
   };
   const paddingGroup = () => {
@@ -11820,7 +11812,7 @@ ${_html.style}
           propertyType: "text"
         }
       ],
-      propertyGroupEditor: () => _sfc_main$p
+      propertyGroupEditor: () => _sfc_main$q
     };
   };
   const commonGroup = () => {
@@ -11887,7 +11879,7 @@ ${_html.style}
           propertyType: "image"
         }
       ],
-      propertyGroupEditor: () => _sfc_main$s
+      propertyGroupEditor: () => _sfc_main$t
     };
   };
   const borderGroup = () => {
@@ -11941,7 +11933,7 @@ ${_html.style}
           propertyType: "text"
         }
       ],
-      propertyGroupEditor: () => _sfc_main$r
+      propertyGroupEditor: () => _sfc_main$s
     };
   };
   const defaultPropertyGroups = () => {
@@ -11965,7 +11957,7 @@ ${_html.style}
       },
       localized: false,
       allowsChild: () => true,
-      creator: () => _sfc_main$w
+      creator: () => _sfc_main$x
     },
     {
       partType: "Section",
@@ -11981,7 +11973,7 @@ ${_html.style}
       },
       localized: true,
       allowsChild: () => true,
-      creator: () => _sfc_main$w
+      creator: () => _sfc_main$x
     },
     {
       partType: "Section",
@@ -11997,7 +11989,7 @@ ${_html.style}
       },
       localized: true,
       allowsChild: () => true,
-      creator: () => _sfc_main$w
+      creator: () => _sfc_main$x
     }
   ];
   const sectionParts = [
@@ -12014,7 +12006,7 @@ ${_html.style}
       },
       localized: false,
       allowsChild: () => true,
-      creator: () => _sfc_main$w
+      creator: () => _sfc_main$x
     }
   ];
   const blockParts = [
@@ -12029,7 +12021,7 @@ ${_html.style}
       initialProperties: {},
       localized: false,
       allowsChild: () => true,
-      creator: () => _sfc_main$y
+      creator: () => _sfc_main$z
     }
   ];
   const widgets = [
@@ -13444,6 +13436,40 @@ ${_html.style}
     zoom(scale) {
       this.scale.value = scale;
     }
+    makeSingleScreen(screenToKeep) {
+      var _a;
+      if (!this.model.rootPart.children)
+        return;
+      const screenCount = ((_a = this.model.rootPart.children) == null ? void 0 : _a.length) || 0;
+      if (screenCount !== 2)
+        return;
+      const part = this.model.rootPart.children[screenToKeep === 0 ? 1 : 0];
+      this.model.updateModel({
+        delete: [part.partId]
+      });
+    }
+    makeMultipleScreen() {
+      var _a;
+      if (!this.model.rootPart.children)
+        return;
+      const screenCount = ((_a = this.model.rootPart.children) == null ? void 0 : _a.length) || 0;
+      if (screenCount !== 1)
+        return;
+      const part = this.model.rootPart.children[0];
+      const json = this.model.serializePageModel([part.partId]);
+      const copied = this.model.parsePageModel(json);
+      if (!copied)
+        return;
+      this.model.updateModel({
+        insert: [
+          {
+            partId: this.model.rootPart.partId,
+            index: 1,
+            parts: copied
+          }
+        ]
+      });
+    }
     getEmptyPageContent() {
       const block = new Block();
       const section = new Section();
@@ -13464,11 +13490,11 @@ ${_html.style}
       });
     }
   }
-  const _hoisted_1$m = /* @__PURE__ */ vue.createElementVNode("i", { class: "material-icons-outlined" }, "add_circle_outline", -1);
-  const _hoisted_2$f = [
-    _hoisted_1$m
+  const _hoisted_1$o = /* @__PURE__ */ vue.createElementVNode("i", { class: "material-icons-outlined" }, "add_circle_outline", -1);
+  const _hoisted_2$g = [
+    _hoisted_1$o
   ];
-  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPage",
     props: {
       page: {},
@@ -13501,7 +13527,7 @@ ${_html.style}
             class: vue.normalizeClass([selected.value && "selected", _ctx.isMobilePage ? "mobile" : "pc", "pb-page-content"])
           }, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList((_a = _ctx.page) == null ? void 0 : _a.children, (section, index) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$w, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$x, {
                 key: section.partId,
                 part: section
               }, null, 8, ["part"]);
@@ -13513,13 +13539,13 @@ ${_html.style}
               var _a2, _b;
               return insertSection(((_b = (_a2 = _ctx.page) == null ? void 0 : _a2.children) == null ? void 0 : _b.length) || 0);
             })
-          }, _hoisted_2$f)
+          }, _hoisted_2$g)
         ], 4);
       };
     }
   });
-  const _hoisted_1$l = /* @__PURE__ */ vue.createElementVNode("div", { style: { "width": "20px" } }, null, -1);
-  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$n = /* @__PURE__ */ vue.createElementVNode("div", { style: { "width": "20px" } }, null, -1);
+  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     __name: "PbCanvas",
     setup(__props) {
       const pageBuilder = usePageBuilderEditor();
@@ -13566,13 +13592,13 @@ ${_html.style}
             style: vue.normalizeStyle(style.value),
             class: "pb-canvas"
           }, [
-            vue.createVNode(_sfc_main$o, {
+            vue.createVNode(_sfc_main$p, {
               "is-mobile-page": true,
               page: pageS.value,
               width: 420
             }, null, 8, ["page"]),
-            _hoisted_1$l,
-            vue.createVNode(_sfc_main$o, {
+            _hoisted_1$n,
+            vue.createVNode(_sfc_main$p, {
               "is-mobile-page": false,
               page: pageL.value,
               width: 1024
@@ -13582,9 +13608,9 @@ ${_html.style}
       };
     }
   });
-  const canvasStyle = '.pb-page {\n  margin: 0 auto;\n  margin-top: 20px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-page-content.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 5px;\n}\n.pb-page * {\n  box-sizing: border-box;\n}\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\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.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\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.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-section.selected {\n  outline: 1px solid #e67e22;\n  outline-offset: 1px;\n  z-index: 999;\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.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.pb-section-static .pb-widget {\n  outline: none;\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.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-block.selected {\n  outline: 1px solid #8e44ad;\n  outline-offset: 1px;\n  z-index: 999;\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.pb-widget.selected {\n  outline: 2px solid #27ae60;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\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.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.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-text-widget .text {\n  color: #333;\n}\n.pb-text-widget.empty .text {\n  color: #999;\n}\n.pb-image-widget {\n  width: 100%;\n}\n.pb-image-widget .image {\n  width: 100%;\n}\n.pb-image-widget .empty {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-image-widget .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-html-widget.empty {\n  padding: 4px 0;\n  font-size: 18px;\n  color: #999;\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.pb-product-list-widget .product-wrapper {\n  width: 25%;\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.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\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@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n.pb-login-widget h3 {\n  font-size: 32px;\n  font-weight: bold;\n  color: #ccc;\n  line-height: 200px;\n  vertical-align: middle;\n}\n.font-icon {\n  font-family: Material Symbols Outlined, monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\nhtml, body {\n  font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n  font-size: 12px;\n}\nbody {\n  background-color: white;\n  height: 100%;\n  margin: 0;\n}\n.pb-canvas-wrapper {\n  padding: 32px 40px 56px 40px;\n  height: 100%;\n  background-color: #aaa;\n  overflow: auto;\n}\n.pb-canvas-wrapper .pb-canvas {\n  display: flex;\n  flex-direction: row;\n  transform-origin: top left;\n  width: fit-content;\n  min-width: 40px;\n  min-height: 40px;\n  margin: 0 auto;\n}\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\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.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.pb-add-section-handle.bottom {\n  left: 50%;\n  bottom: -32px;\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.pb-add-section-handle > i {\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: -20px;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}\n.pb-button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  vertical-align: middle;\n}\n.pb-guideline {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.pb-guideline.selected {\n  z-index: 3;\n}\n.pb-guideline.preselect {\n  z-index: 4;\n}';
-  const _hoisted_1$k = { class: "pb-canvas-frame" };
-  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+  const canvasStyle = '.pb-page {\n  margin: 0 auto;\n  margin-top: 20px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-page-content.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 5px;\n}\n.pb-page * {\n  box-sizing: border-box;\n}\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\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.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\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.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-section.selected {\n  outline: 1px solid #e67e22;\n  outline-offset: 1px;\n  z-index: 999;\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.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.pb-section-static .pb-widget {\n  outline: none;\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.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-block.selected {\n  outline: 1px solid #8e44ad;\n  outline-offset: 1px;\n  z-index: 999;\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.pb-widget.selected {\n  outline: 2px solid #27ae60;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\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.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.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-text-widget .text {\n  color: #333;\n}\n.pb-text-widget.empty .text {\n  color: #999;\n}\n.pb-image-widget {\n  width: 100%;\n}\n.pb-image-widget .image {\n  width: 100%;\n}\n.pb-image-widget .empty {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-image-widget .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-html-widget.empty {\n  padding: 4px 0;\n  font-size: 18px;\n  color: #999;\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.pb-product-list-widget .product-wrapper {\n  width: 25%;\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.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\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@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\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.font-icon {\n  font-family: Material Symbols Outlined, monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\nhtml, body {\n  font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n  font-size: 12px;\n}\nbody {\n  background-color: white;\n  height: 100%;\n  margin: 0;\n}\n.pb-canvas-wrapper {\n  padding: 32px 40px 56px 40px;\n  height: 100%;\n  background-color: #aaa;\n  overflow: auto;\n}\n.pb-canvas-wrapper .pb-canvas {\n  display: flex;\n  flex-direction: row;\n  transform-origin: top left;\n  width: fit-content;\n  min-width: 40px;\n  min-height: 40px;\n  margin: 0 auto;\n}\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\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.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.pb-add-section-handle.bottom {\n  left: 50%;\n  bottom: -32px;\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.pb-add-section-handle > i {\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: -20px;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}\n.pb-button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  vertical-align: middle;\n}\n.pb-guideline {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.pb-guideline.selected {\n  z-index: 3;\n}\n.pb-guideline.preselect {\n  z-index: 4;\n}';
+  const _hoisted_1$m = { class: "pb-canvas-frame" };
+  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     __name: "PbCanvasFrame",
     setup(__props) {
       const pageBuilderEditor = usePageBuilderEditor();
@@ -13626,7 +13652,7 @@ ${_html.style}
       );
       return (_ctx, _cache) => {
         var _a, _b, _c, _d;
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
           vue.createElementVNode("iframe", {
             ref_key: "iframeRef",
             ref: iframeRef,
@@ -13636,14 +13662,14 @@ ${_html.style}
             key: 0,
             to: (_d = (_c = iframeRef.value) == null ? void 0 : _c.contentWindow) == null ? void 0 : _d.document.body
           }, [
-            vue.createVNode(_sfc_main$n)
+            vue.createVNode(_sfc_main$o)
           ], 8, ["to"])) : vue.createCommentVNode("", true)
         ]);
       };
     }
   });
-  const _hoisted_1$j = { class: "pb-tool-button bs-layout-horizontal flex-align-center" };
-  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$l = { class: "pb-tool-button bs-layout-horizontal flex-align-center" };
+  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     __name: "PbToolbarButton",
     props: {
       button: {}
@@ -13656,7 +13682,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$j, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
           vue.createElementVNode("div", {
             class: "tool-button bs-clickable",
             onClick: handleClick
@@ -13671,17 +13697,17 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$i = { class: "pb-tool-button-group bs-layout-horizontal flex-align-center" };
-  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$k = { class: "pb-tool-button-group bs-layout-horizontal flex-align-center" };
+  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     __name: "PbToolbarButtonGroup",
     props: {
       group: {}
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.group.buttons, (button) => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$l, {
+            return vue.openBlock(), vue.createBlock(_sfc_main$m, {
               key: button.buttonId,
               button
             }, null, 8, ["button"]);
@@ -13690,61 +13716,113 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$h = { class: "pb-toolbar bs-layout-horizontal align-items-center" };
-  const _hoisted_2$e = { class: "bs-layout-horizontal" };
-  const _hoisted_3$d = /* @__PURE__ */ vue.createElementVNode("div", { class: "flex-grow-1" }, null, -1);
-  const _hoisted_4$5 = { class: "ml-8 w-64" };
-  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$j = { class: "pb-toolbar bs-layout-horizontal align-items-center" };
+  const _hoisted_2$f = { class: "bs-layout-horizontal align-items-center" };
+  const _hoisted_3$e = /* @__PURE__ */ vue.createElementVNode("div", { class: "flex-grow-1" }, null, -1);
+  const _hoisted_4$5 = { class: "mr-8" };
+  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     __name: "PbToolbar",
+    props: {
+      plugin: {}
+    },
     setup(__props) {
       const pageBuilder = usePageBuilderEditor();
       const buttonGroups = pageBuilder.toolButtonRegistry.getToolButtonGroups();
-      const scale = vue.computed(() => `${Math.round(100 * pageBuilder.scale.value)}%`);
-      const zoom = async (scaleString) => {
-        if (!scaleString)
-          return;
-        const scale2 = parseInt(scaleString.replaceAll(/[^0-9]+/g, "")) / 100;
-        pageBuilder.zoom(scale2);
+      const modal = bluesea.useModal();
+      const screenCount = vue.computed({
+        get: () => {
+          var _a;
+          return ((_a = pageBuilder.model.rootPart.children) == null ? void 0 : _a.length) || 2;
+        },
+        set: (count) => {
+          var _a;
+          if (!count)
+            return;
+          console.log(count);
+          if (count === (((_a = pageBuilder.model.rootPart.children) == null ? void 0 : _a.length) || 0))
+            return;
+          if (count >= 2) {
+            makeMultipleScreen();
+          } else {
+            makeSingleScreen();
+          }
+        }
+      });
+      const makeMultipleScreen = () => {
+        pageBuilder.makeMultipleScreen();
       };
+      const makeSingleScreen = () => {
+        modal.openModal({
+          component: vue.defineAsyncComponent(() => Promise.resolve().then(() => PbScreenSelectModal)),
+          bind: {},
+          on: {
+            select: (selection) => {
+              pageBuilder.makeSingleScreen(selection);
+            }
+          }
+        });
+      };
+      const scale = vue.computed({
+        get: () => `${Math.round(100 * pageBuilder.scale.value)}%`,
+        set: (value) => {
+          const scale2 = parseInt(value.replaceAll(/[^0-9]+/g, "")) / 100;
+          pageBuilder.zoom(scale2);
+        }
+      });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
-          vue.createElementVNode("div", _hoisted_2$e, [
+        var _a, _b, _c;
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
+          vue.createElementVNode("div", _hoisted_2$f, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(buttonGroups), (group) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$k, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$l, {
                 key: group.groupId,
                 group
               }, null, 8, ["group"]);
-            }), 128))
-          ]),
-          _hoisted_3$d,
-          vue.createElementVNode("div", _hoisted_4$5, [
+            }), 128)),
+            vue.createVNode(vue.unref(bluesea.BSSelect), {
+              modelValue: screenCount.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => screenCount.value = $event),
+              items: [{ value: 2, label: "Multiple Screen" }, { value: 1, label: "Single Screen" }],
+              "label-provider": (v) => v.label,
+              "value-provider": (v) => v.value,
+              "view-mode": false
+            }, null, 8, ["modelValue", "label-provider", "value-provider"]),
             vue.createVNode(vue.unref(bluesea.BSSelect), {
               modelValue: scale.value,
-              "onUpdate:modelValue": [
-                _cache[0] || (_cache[0] = ($event) => scale.value = $event),
-                zoom
-              ],
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => scale.value = $event),
               items: ["100%", "75%", "50%", "25%", "10%"],
               "view-mode": false,
+              class: "ml-4",
               placeholder: "Scale"
             }, null, 8, ["modelValue"])
+          ]),
+          _hoisted_3$e,
+          vue.createElementVNode("div", _hoisted_4$5, [
+            _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$g = { class: "pb-menu bs-layout-vertical" };
-  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$i = { class: "pb-menu bs-layout-vertical" };
+  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     __name: "PbMenu",
+    props: {
+      toolbarPlugin: {}
+    },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
-          vue.createVNode(_sfc_main$j)
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
+          vue.createVNode(_sfc_main$k, { plugin: _ctx.toolbarPlugin }, null, 8, ["plugin"])
         ]);
       };
     }
   });
-  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$h = {
+    key: 1,
+    class: "bs-layout-vertical border"
+  };
+  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     __name: "PbNavigator",
     setup(__props) {
       const pageBuilder = usePageBuilderEditor();
@@ -13762,8 +13840,18 @@ ${_html.style}
         { tabId: "pageS", caption: "Mobile", icon: "phone_iphone" },
         { tabId: "pageL", caption: "PC", icon: "desktop_windows" }
       ];
-      const pageS = vue.computed(() => (pageBuilder.model.rootPart.children || [])[0].children || []);
-      const pageL = vue.computed(() => (pageBuilder.model.rootPart.children || [])[1].children || []);
+      const isMultipleScreen = vue.computed(() => {
+        var _a;
+        return (((_a = pageBuilder.model.rootPart.children) == null ? void 0 : _a.length) || 0) >= 2;
+      });
+      const pageS = vue.computed(() => {
+        var _a;
+        return ((_a = (pageBuilder.model.rootPart.children || [])[0]) == null ? void 0 : _a.children) || [];
+      });
+      const pageL = vue.computed(() => {
+        var _a;
+        return ((_a = (pageBuilder.model.rootPart.children || [])[1]) == null ? void 0 : _a.children) || [];
+      });
       const tabId = vue.computed({
         get() {
           const page = pageBuilder.context.getSelectedPage();
@@ -13893,7 +13981,8 @@ ${_html.style}
         PageBuilderEditorEvent.off.modelUpdatedByUI(modelUpdateHandler);
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.unref(bluesea.BSTabSheet), {
+        return isMultipleScreen.value ? (vue.openBlock(), vue.createBlock(vue.unref(bluesea.BSTabSheet), {
+          key: 0,
           "tab-id": tabId.value,
           "onUpdate:tabId": _cache[4] || (_cache[4] = ($event) => tabId.value = $event),
           tabs
@@ -13959,11 +14048,40 @@ ${_html.style}
             ], 512)
           ]),
           _: 1
-        }, 8, ["tab-id"]);
+        }, 8, ["tab-id"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
+          vue.createElementVNode("div", {
+            ref_key: "treeS",
+            ref: treeS,
+            class: "pb-navigator",
+            tabindex: "0"
+          }, [
+            vue.createVNode(vue.unref(bluesea.BSTree), {
+              expandedRows: expandedRows.value,
+              "onUpdate:expandedRows": [
+                _cache[5] || (_cache[5] = ($event) => expandedRows.value = $event),
+                expandedRowsChanged
+              ],
+              selectedRows: selectedRows.value,
+              "onUpdate:selectedRows": [
+                _cache[6] || (_cache[6] = ($event) => selectedRows.value = $event),
+                selectedRowsChanged
+              ],
+              data: pageS.value,
+              "enable-drag-and-drop": treeDragAndDropPolicy,
+              "icon-provider": iconProvider,
+              "key-provider": (part) => part.partId,
+              "label-provider": labelProvider,
+              class: "max-w-320",
+              "dont-change-data-when-rowmoved": "",
+              "show-move-button": "",
+              onRowMoved: rowMoved
+            }, null, 8, ["expandedRows", "selectedRows", "data", "key-provider"])
+          ], 512)
+        ]));
       };
     }
   });
-  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     __name: "PbSidebarPropertyEditor",
     props: {
       property: {},
@@ -14018,13 +14136,13 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$f = { class: "pb-sidebar-property-group" };
-  const _hoisted_2$d = {
+  const _hoisted_1$g = { class: "pb-sidebar-property-group" };
+  const _hoisted_2$e = {
     key: 0,
     class: "group-title"
   };
-  const _hoisted_3$c = ["textContent"];
-  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_3$d = ["textContent"];
+  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     __name: "PbSidebarPropertyGroupEditor",
     props: {
       group: {},
@@ -14058,11 +14176,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$f, [
-          _ctx.group.showGroupName ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$d, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
+          _ctx.group.showGroupName ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$e, [
             vue.createElementVNode("label", {
               textContent: vue.toDisplayString(_ctx.group.caption)
-            }, null, 8, _hoisted_3$c)
+            }, null, 8, _hoisted_3$d)
           ])) : vue.createCommentVNode("", true),
           _ctx.partsKey ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
             groupEditor.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(groupEditor.value), {
@@ -14070,7 +14188,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$g, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$h, {
                 key: `${_ctx.partsKey}_${property.propertyName}`,
                 property,
                 "selected-parts": _ctx.selectedParts
@@ -14081,17 +14199,17 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$e = { class: "property-editor property-editor-local-part flex-align-center pt-16" };
-  const _hoisted_2$c = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
+  const _hoisted_1$f = { class: "property-editor property-editor-local-part flex-align-center pt-16" };
+  const _hoisted_2$d = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Display Schedule" })
   ], -1);
-  const _hoisted_3$b = { class: "bs-layout-horizontal" };
+  const _hoisted_3$c = { class: "bs-layout-horizontal" };
   const _hoisted_4$4 = { class: "mr-2" };
   const _hoisted_5$1 = /* @__PURE__ */ vue.createElementVNode("span", { class: "font-icon" }, "more_horiz", -1);
   const _hoisted_6$1 = [
     _hoisted_5$1
   ];
-  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyLocalMarketingPart",
     props: {
       selectedPart: {}
@@ -14160,9 +14278,9 @@ ${_html.style}
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
-          _hoisted_2$c,
-          vue.createElementVNode("div", _hoisted_3$b, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
+          _hoisted_2$d,
+          vue.createElementVNode("div", _hoisted_3$c, [
             vue.createElementVNode("div", _hoisted_4$4, [
               vue.createVNode(vue.unref(bluesea.BSDateRange), {
                 "from-value": startDt.value,
@@ -14179,8 +14297,8 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$d = { class: "pb-sidebar-properties" };
-  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$e = { class: "pb-sidebar-properties" };
+  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     __name: "PbSidebarProperties",
     setup(__props) {
       const pageBuilder = usePageBuilderEditor();
@@ -14206,8 +14324,8 @@ ${_html.style}
         return part.isLocalMarketingPart();
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
-          showLocalMarketingPart.value ? (vue.openBlock(), vue.createBlock(_sfc_main$e, {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
+          showLocalMarketingPart.value ? (vue.openBlock(), vue.createBlock(_sfc_main$f, {
             key: 0,
             "selected-part": vue.unref(selectedParts)[0]
           }, null, 8, ["selected-part"])) : vue.createCommentVNode("", true),
@@ -14215,7 +14333,7 @@ ${_html.style}
             return vue.openBlock(), vue.createElementBlock("div", {
               key: `${partsKey.value}_${group.groupName}`
             }, [
-              vue.createVNode(_sfc_main$f, {
+              vue.createVNode(_sfc_main$g, {
                 group,
                 partsKey: partsKey.value,
                 "selected-parts": vue.unref(selectedParts)
@@ -14226,20 +14344,20 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$c = { class: "pb-sidebar" };
-  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$d = { class: "pb-sidebar" };
+  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     __name: "PbSidebar",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
-          vue.createVNode(_sfc_main$d)
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
+          vue.createVNode(_sfc_main$e)
         ]);
       };
     }
   });
-  const _hoisted_1$b = { class: "pb-editor bs-layout-vertical flex-grow-1" };
-  const _hoisted_2$b = { class: "pb-editor-body bs-layout-horizontal flex-grow-1" };
-  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+  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({
     __name: "PageBuilderEditor",
     props: {
       instanceId: {},
@@ -14247,7 +14365,8 @@ ${_html.style}
       editMode: {},
       pageContent: {},
       locales: {},
-      locale: {}
+      locale: {},
+      toolbarPlugin: {}
     },
     setup(__props, { expose: __expose }) {
       const props = __props;
@@ -14329,22 +14448,22 @@ ${_html.style}
         getLocalDesignPartContent
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
-          vue.createVNode(_sfc_main$i),
-          vue.createElementVNode("div", _hoisted_2$b, [
-            vue.createVNode(_sfc_main$h),
-            vue.createVNode(_sfc_main$m, { class: "flex-grow-1" }),
-            vue.createVNode(_sfc_main$c)
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
+          vue.createVNode(_sfc_main$j, { "toolbar-plugin": _ctx.toolbarPlugin }, null, 8, ["toolbar-plugin"]),
+          vue.createElementVNode("div", _hoisted_2$c, [
+            vue.createVNode(_sfc_main$i),
+            vue.createVNode(_sfc_main$n, { class: "flex-grow-1" }),
+            vue.createVNode(_sfc_main$d)
           ])
         ]);
       };
     }
   });
-  const _hoisted_1$a = { class: "property-editor property-editor-readonly-text" };
-  const _hoisted_2$a = { class: "title" };
-  const _hoisted_3$a = ["textContent"];
+  const _hoisted_1$b = { class: "property-editor property-editor-readonly-text" };
+  const _hoisted_2$b = { class: "title" };
+  const _hoisted_3$b = ["textContent"];
   const _hoisted_4$3 = ["textContent"];
-  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyEditorReadonlyText",
     props: {
       property: {},
@@ -14352,11 +14471,11 @@ ${_html.style}
     },
     setup(__props) {
       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$a)
+            }, null, 8, _hoisted_3$b)
           ]),
           vue.createElementVNode("div", null, [
             vue.createElementVNode("div", {
@@ -14369,12 +14488,12 @@ ${_html.style}
   });
   const PbPropertyEditorReadonlyText = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
-    default: _sfc_main$a
+    default: _sfc_main$b
   }, Symbol.toStringTag, { value: "Module" }));
-  const _hoisted_1$9 = { class: "property-editor property-editor-text flex-align-center" };
-  const _hoisted_2$9 = { class: "title" };
-  const _hoisted_3$9 = ["textContent"];
-  const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$a = { class: "property-editor property-editor-text flex-align-center" };
+  const _hoisted_2$a = { class: "title" };
+  const _hoisted_3$a = ["textContent"];
+  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyEditorText",
     props: {
       property: {},
@@ -14390,11 +14509,11 @@ ${_html.style}
         emit("update-property-value", properties);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
-          vue.createElementVNode("div", _hoisted_2$9, [
+        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$9)
+            }, null, 8, _hoisted_3$a)
           ]),
           vue.createElementVNode("div", null, [
             vue.createVNode(vue.unref(bluesea.BSTextInput), {
@@ -14409,12 +14528,12 @@ ${_html.style}
   });
   const PbPropertyEditorText = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
-    default: _sfc_main$9
+    default: _sfc_main$a
   }, Symbol.toStringTag, { value: "Module" }));
-  const _hoisted_1$8 = { class: "property-editor property-editor-multiline-text" };
-  const _hoisted_2$8 = { class: "title" };
-  const _hoisted_3$8 = ["textContent"];
-  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$9 = { class: "property-editor property-editor-multiline-text" };
+  const _hoisted_2$9 = { class: "title" };
+  const _hoisted_3$9 = ["textContent"];
+  const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyEditorMultilineText",
     props: {
       property: {},
@@ -14440,11 +14559,11 @@ ${_html.style}
         emit("update-property-value", properties);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
-          vue.createElementVNode("div", _hoisted_2$8, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+          vue.createElementVNode("div", _hoisted_2$9, [
             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.BSMultiLangTextArea), {
@@ -14474,12 +14593,12 @@ ${_html.style}
   });
   const PbPropertyEditorMultilineText = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
-    default: _sfc_main$8
+    default: _sfc_main$9
   }, Symbol.toStringTag, { value: "Module" }));
-  const _hoisted_1$7 = { class: "property-editor property-editor-select flex-align-center" };
-  const _hoisted_2$7 = { class: "title" };
-  const _hoisted_3$7 = ["textContent"];
-  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$8 = { class: "property-editor property-editor-select flex-align-center" };
+  const _hoisted_2$8 = { class: "title" };
+  const _hoisted_3$8 = ["textContent"];
+  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyEditorSelect",
     props: {
       property: {},
@@ -14498,11 +14617,11 @@ ${_html.style}
         emit("update-property-value", properties);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
-          vue.createElementVNode("div", _hoisted_2$7, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
+          vue.createElementVNode("div", _hoisted_2$8, [
             vue.createElementVNode("label", {
               textContent: vue.toDisplayString(_ctx.property.caption)
-            }, null, 8, _hoisted_3$7)
+            }, null, 8, _hoisted_3$8)
           ]),
           vue.createElementVNode("div", null, [
             vue.createVNode(vue.unref(bluesea.BSSelect), {
@@ -14517,13 +14636,13 @@ ${_html.style}
   });
   const PbPropertyEditorSelect = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
-    default: _sfc_main$7
+    default: _sfc_main$8
   }, Symbol.toStringTag, { value: "Module" }));
-  const _hoisted_1$6 = { class: "property-editor property-editor-color" };
-  const _hoisted_2$6 = { class: "title" };
-  const _hoisted_3$6 = ["textContent"];
+  const _hoisted_1$7 = { class: "property-editor property-editor-color" };
+  const _hoisted_2$7 = { class: "title" };
+  const _hoisted_3$7 = ["textContent"];
   const _hoisted_4$2 = { class: "bs-layout-horizontal flex-align-center color" };
-  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyEditorColor",
     props: {
       property: {},
@@ -14543,11 +14662,11 @@ ${_html.style}
         emit("update-property-value", properties);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
-          vue.createElementVNode("div", _hoisted_2$6, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
+          vue.createElementVNode("div", _hoisted_2$7, [
             vue.createElementVNode("label", {
               textContent: vue.toDisplayString(_ctx.property.caption)
-            }, null, 8, _hoisted_3$6)
+            }, null, 8, _hoisted_3$7)
           ]),
           vue.createElementVNode("div", _hoisted_4$2, [
             vue.createVNode(PbColorPicker, {
@@ -14572,12 +14691,12 @@ ${_html.style}
   });
   const PbPropertyEditorColor = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
-    default: _sfc_main$6
+    default: _sfc_main$7
   }, Symbol.toStringTag, { value: "Module" }));
-  const _hoisted_1$5 = { class: "property-editor property-editor-image flex-align-center" };
-  const _hoisted_2$5 = { class: "title" };
-  const _hoisted_3$5 = ["textContent"];
-  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$6 = { class: "property-editor property-editor-image flex-align-center" };
+  const _hoisted_2$6 = { class: "title" };
+  const _hoisted_3$6 = ["textContent"];
+  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyEditorImage",
     props: {
       property: {},
@@ -14597,11 +14716,11 @@ ${_html.style}
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
-          vue.createElementVNode("div", _hoisted_2$5, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
+          vue.createElementVNode("div", _hoisted_2$6, [
             vue.createElementVNode("label", {
               textContent: vue.toDisplayString(_ctx.property.caption)
-            }, null, 8, _hoisted_3$5)
+            }, null, 8, _hoisted_3$6)
           ]),
           vue.createElementVNode("div", null, [
             vue.createElementVNode("button", { onClick: selectImage }, "Select Image")
@@ -14612,12 +14731,12 @@ ${_html.style}
   });
   const PbPropertyEditorImage = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
-    default: _sfc_main$5
+    default: _sfc_main$6
   }, Symbol.toStringTag, { value: "Module" }));
-  const _hoisted_1$4 = { class: "property-editor property-editor-image flex-align-center" };
-  const _hoisted_2$4 = { class: "title" };
-  const _hoisted_3$4 = ["textContent"];
-  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$5 = { class: "property-editor property-editor-image flex-align-center" };
+  const _hoisted_2$5 = { class: "title" };
+  const _hoisted_3$5 = ["textContent"];
+  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyEditorHtml",
     props: {
       property: {},
@@ -14633,7 +14752,7 @@ ${_html.style}
         const locales = pageBuilder.getLocales();
         const localeTabs = locales.map((v) => ({ tabId: `tab-${v}`, caption: v }));
         modal.openModal({
-          component: vue.defineAsyncComponent(() => Promise.resolve().then(() => HtmlEditorModal)),
+          component: vue.defineAsyncComponent(() => Promise.resolve().then(() => PbHtmlEditorModal)),
           style: {
             width: "80%",
             height: "80%",
@@ -14653,11 +14772,11 @@ ${_html.style}
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
-          vue.createElementVNode("div", _hoisted_2$4, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
+          vue.createElementVNode("div", _hoisted_2$5, [
             vue.createElementVNode("label", {
               textContent: vue.toDisplayString(_ctx.property.caption)
-            }, null, 8, _hoisted_3$4)
+            }, null, 8, _hoisted_3$5)
           ]),
           vue.createElementVNode("div", null, [
             vue.createElementVNode("button", { onClick: editHtml }, "Edit HTML")
@@ -14668,12 +14787,12 @@ ${_html.style}
   });
   const PbPropertyEditorHtml = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
-    default: _sfc_main$4
+    default: _sfc_main$5
   }, Symbol.toStringTag, { value: "Module" }));
-  const _hoisted_1$3 = { class: "property-editor property-editor-product flex-align-center" };
-  const _hoisted_2$3 = { class: "title" };
-  const _hoisted_3$3 = ["textContent"];
-  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$4 = { class: "property-editor property-editor-product flex-align-center" };
+  const _hoisted_2$4 = { class: "title" };
+  const _hoisted_3$4 = ["textContent"];
+  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyEditorProduct",
     props: {
       property: {},
@@ -14700,11 +14819,11 @@ ${_html.style}
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
-          vue.createElementVNode("div", _hoisted_2$3, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
+          vue.createElementVNode("div", _hoisted_2$4, [
             vue.createElementVNode("label", {
               textContent: vue.toDisplayString(_ctx.property.caption)
-            }, null, 8, _hoisted_3$3)
+            }, null, 8, _hoisted_3$4)
           ]),
           vue.createElementVNode("div", null, [
             vue.createElementVNode("button", { onClick: selectProducts }, "Select Product")
@@ -14715,12 +14834,12 @@ ${_html.style}
   });
   const PbPropertyEditorProduct = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
-    default: _sfc_main$3
+    default: _sfc_main$4
   }, Symbol.toStringTag, { value: "Module" }));
-  const _hoisted_1$2 = { class: "bs-layout-vertical pb-part-add-modal" };
-  const _hoisted_2$2 = { class: "bs-layout-horizontal-wrap ml-16 mb-8 gap-8" };
-  const _hoisted_3$2 = ["onClick", "textContent"];
-  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$3 = { class: "bs-layout-vertical pb-part-add-modal" };
+  const _hoisted_2$3 = { class: "bs-layout-horizontal-wrap ml-16 mb-8 gap-8" };
+  const _hoisted_3$3 = ["onClick", "textContent"];
+  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPartAddModal",
     props: {
       pageBuilder: {},
@@ -14737,20 +14856,20 @@ ${_html.style}
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(bluesea.BSModalFrame), { title: "Add Design Part" }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$2, [
+            vue.createElementVNode("div", _hoisted_1$3, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.partDefinitionGroups, (group) => {
                 return vue.openBlock(), vue.createElementBlock("div", {
                   key: group.groupName,
                   class: "group mb-16"
                 }, [
-                  vue.createElementVNode("div", _hoisted_2$2, [
+                  vue.createElementVNode("div", _hoisted_2$3, [
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(group.partDefinitions, (part) => {
                       return vue.openBlock(), vue.createElementBlock("div", {
                         key: part.partName,
                         class: "part",
                         onClick: ($event) => select(part),
                         textContent: vue.toDisplayString(part.caption)
-                      }, null, 8, _hoisted_3$2);
+                      }, null, 8, _hoisted_3$3);
                     }), 128))
                   ])
                 ]);
@@ -14764,13 +14883,13 @@ ${_html.style}
   });
   const PbPartAddModal = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
-    default: _sfc_main$2
+    default: _sfc_main$3
   }, Symbol.toStringTag, { value: "Module" }));
-  const _hoisted_1$1 = { class: "bs-layout-vertical pb-part-add-modal" };
-  const _hoisted_2$1 = ["textContent"];
-  const _hoisted_3$1 = { class: "bs-layout-horizontal-wrap ml-16 mb-8 gap-8" };
+  const _hoisted_1$2 = { class: "bs-layout-vertical pb-part-add-modal" };
+  const _hoisted_2$2 = ["textContent"];
+  const _hoisted_3$2 = { class: "bs-layout-horizontal-wrap ml-16 mb-8 gap-8" };
   const _hoisted_4$1 = ["onClick", "textContent"];
-  const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbWidgetAddModal",
     props: {
       pageBuilder: {},
@@ -14787,7 +14906,7 @@ ${_html.style}
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(bluesea.BSModalFrame), { title: "Add Block/Widget" }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$1, [
+            vue.createElementVNode("div", _hoisted_1$2, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.partDefinitionGroups, (group) => {
                 return vue.openBlock(), vue.createElementBlock("div", {
                   key: group.groupName,
@@ -14796,8 +14915,8 @@ ${_html.style}
                   vue.createElementVNode("div", {
                     class: "mb-8",
                     textContent: vue.toDisplayString(group.caption)
-                  }, null, 8, _hoisted_2$1),
-                  vue.createElementVNode("div", _hoisted_3$1, [
+                  }, null, 8, _hoisted_2$2),
+                  vue.createElementVNode("div", _hoisted_3$2, [
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(group.partDefinitions, (part) => {
                       return vue.openBlock(), vue.createElementBlock("div", {
                         key: part.partName,
@@ -14817,6 +14936,72 @@ ${_html.style}
     }
   });
   const PbWidgetAddModal = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+    __proto__: null,
+    default: _sfc_main$2
+  }, Symbol.toStringTag, { value: "Module" }));
+  const _hoisted_1$1 = { class: "mb-16" };
+  const _hoisted_2$1 = /* @__PURE__ */ vue.createElementVNode("label", { class: "mr-8" }, "Which screen do you want to keep?", -1);
+  const _hoisted_3$1 = { class: "text-right" };
+  const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+    __name: "PbScreenSelectModal",
+    emits: ["select"],
+    setup(__props, { emit: __emit }) {
+      const emit = __emit;
+      const selection = vue.ref("0");
+      const modalHandle = bluesea.useModalHandle();
+      const close = () => {
+        modalHandle.close();
+      };
+      const ok = () => {
+        emit("select", parseInt(selection.value));
+        modalHandle.close();
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(bluesea.BSModalFrame), { title: "Screen Selection" }, {
+          default: vue.withCtx(() => [
+            vue.createElementVNode("div", null, [
+              vue.createElementVNode("div", _hoisted_1$1, [
+                _hoisted_2$1,
+                vue.createElementVNode("div", null, [
+                  vue.createVNode(vue.unref(bluesea.BSRadioButton), {
+                    modelValue: selection.value,
+                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selection.value = $event),
+                    "item-value": "0",
+                    label: "Mobile",
+                    name: "mobile"
+                  }, null, 8, ["modelValue"]),
+                  vue.createVNode(vue.unref(bluesea.BSRadioButton), {
+                    modelValue: selection.value,
+                    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selection.value = $event),
+                    "item-value": "1",
+                    class: "ml-8",
+                    label: "PC",
+                    name: "pc"
+                  }, null, 8, ["modelValue"])
+                ])
+              ])
+            ])
+          ]),
+          buttons: vue.withCtx(() => [
+            vue.createElementVNode("div", _hoisted_3$1, [
+              vue.createVNode(vue.unref(bluesea.BSButton), {
+                "button-color": "blue",
+                caption: "OK",
+                onClick: ok
+              }),
+              vue.createVNode(vue.unref(bluesea.BSButton), {
+                caption: "Cancel",
+                class: "ml-8",
+                onClick: close
+              })
+            ])
+          ]),
+          _: 1
+        });
+      };
+    }
+  });
+  const PbScreenSelectModal = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
     default: _sfc_main$1
   }, Symbol.toStringTag, { value: "Module" }));
@@ -14834,7 +15019,7 @@ ${_html.style}
   const _hoisted_12 = /* @__PURE__ */ vue.createElementVNode("div", { class: "title pb-4" }, "Style", -1);
   const _hoisted_13 = { class: "content flex-grow-1" };
   const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-    __name: "HtmlEditorModal",
+    __name: "PbHtmlEditorModal",
     props: {
       html: {},
       locales: {},
@@ -14946,7 +15131,7 @@ ${_html.style}
       };
     }
   });
-  const HtmlEditorModal = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  const PbHtmlEditorModal = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
     default: _sfc_main
   }, Symbol.toStringTag, { value: "Module" }));
@@ -14956,9 +15141,9 @@ ${_html.style}
   exports2.PAGE_BUILDER_KEY = PAGE_BUILDER_KEY;
   exports2.PAGE_TYPE = PAGE_TYPE$1;
   exports2.Page = Page;
-  exports2.PageBuilderEditor = _sfc_main$b;
+  exports2.PageBuilderEditor = _sfc_main$c;
   exports2.PageBuilderEditorEvent = PageBuilderEditorEvent;
-  exports2.PageBuilderViewer = _sfc_main$B;
+  exports2.PageBuilderViewer = _sfc_main$C;
   exports2.PageBuilderViewerEvent = PageBuilderViewerEvent;
   exports2.Part = Part;
   exports2.PbHtmlWidget = _sfc_main$3$1;