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

package/dist/{index-BFtI1jYj.js → index-CuI4K01B.js}

@@ -4,8 +4,8 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { ref, defineComponent, openBlock, createElementBlock, createCommentVNode, computed, normalizeClass, createElementVNode, mergeProps, toDisplayString, onMounted, watch, Fragment, renderList, provide, inject, createBlock as createBlock$1, resolveDynamicComponent, reactive, defineAsyncComponent, withDirectives, unref, createVNode, normalizeStyle, resolveComponent, vModelText, onBeforeUnmount, resolveDirective, withModifiers, renderSlot, normalizeProps, guardReactiveProps, markRaw, Teleport, withCtx } from "vue";
-import { notNull, BSTextInput, vClickOutside, useContextMenu, BSSelect, BSTabSheet, BSTree, useModal, BSDateRange } from "@g1cloud/bluesea";
+import { ref, defineComponent, openBlock, createElementBlock, createCommentVNode, computed, normalizeClass, createElementVNode, mergeProps, toDisplayString, onMounted, watch, Fragment, renderList, provide, inject, createBlock as createBlock$1, resolveDynamicComponent, reactive, defineAsyncComponent, withDirectives, unref, createVNode, normalizeStyle, resolveComponent, vModelText, onBeforeUnmount, resolveDirective, withModifiers, renderSlot, normalizeProps, guardReactiveProps, markRaw, Teleport, toHandlers, withCtx } from "vue";
+import { notNull, BSTextInput, vClickOutside, useContextMenu, useModal, BSSelect, BSTabSheet, BSTree, BSDateRange } from "@g1cloud/bluesea";
 const create$5 = () => /* @__PURE__ */ new Map();
 const copy = (m) => {
   const r = create$5();
@@ -7432,7 +7432,7 @@ const _sfc_main$1$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$t = { class: "pb-viewer" };
+const _hoisted_1$u = { class: "pb-viewer" };
 const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "PageBuilderViewer",
   props: {
@@ -7463,7 +7463,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       }
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$t, [
+      return openBlock(), createElementBlock("div", _hoisted_1$u, [
         page.value ? (openBlock(), createBlock$1(_sfc_main$1$1, {
           key: 0,
           "is-mobile-page": _ctx.isMobilePage,
@@ -7520,8 +7520,9 @@ const partToJsonObject = (part) => {
   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) {
@@ -7706,21 +7707,12 @@ class Model2 {
     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 = reactive(new RootPart());
     this.rootPart.partId = rootPartId;
-    this.rootPart.children = pages;
     this.yjsRoot.observeDeep((events, _) => {
       applyChangeEvents(this.rootPart, events);
       this.emitUpdateModelEvent(events);
@@ -8066,12 +8058,12 @@ const defaultPartPropertyEditors = () => {
   return {
     "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-Dgp_AVOD.js")),
     "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-BWOKvwD9.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-BMF9jHpy.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-BFGht6hc.js")),
     "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-CWedbXJI.js")),
-    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-DXkzD-V2.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-5RZoQbLF.js")),
-    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-CbEOlq-s.js")),
-    "product": () => defineAsyncComponent(() => import("./PbPropertyEditorProduct-Dt5vraZc.js"))
+    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-CZHXz7K6.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-N4VYkBhB.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-Bid2WYyb.js")),
+    "product": () => defineAsyncComponent(() => import("./PbPropertyEditorProduct-myd2_r0t.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -8302,7 +8294,7 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 const _sfc_main$p = {};
-const _hoisted_1$s = { class: "pb-add-widget-button" };
+const _hoisted_1$t = { class: "pb-add-widget-button" };
 const _hoisted_2$j = /* @__PURE__ */ createElementVNode("span", { class: "icon material-icons-outlined" }, "add_box", -1);
 const _hoisted_3$g = /* @__PURE__ */ createElementVNode("span", { class: "text" }, "Add Widget", -1);
 const _hoisted_4$d = [
@@ -8310,7 +8302,7 @@ const _hoisted_4$d = [
   _hoisted_3$g
 ];
 function _sfc_render$1(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$s, [
+  return openBlock(), createElementBlock("div", _hoisted_1$t, [
     createElementVNode("button", {
       onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("add-widget", $event))
     }, _hoisted_4$d)
@@ -8347,7 +8339,7 @@ const useMouseTracker = () => {
     throw Error(MOUSE_TRACKER_NOT_FOUND);
   return mouseTracker;
 };
-const _hoisted_1$r = ["data-model-id", "draggable"];
+const _hoisted_1$s = ["data-model-id", "draggable"];
 const _hoisted_2$i = {
   key: 1,
   class: "children"
@@ -8816,13 +8808,13 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           class: "resize-handle",
           onMousedown: _resize_mousedown
         }, null, 32)) : createCommentVNode("", true)
-      ], 16, _hoisted_1$r)), [
+      ], 16, _hoisted_1$s)), [
         [unref(vPartHandler), { pageBuilder: unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
       ]);
     };
   }
 });
-const _hoisted_1$q = ["data-model-id"];
+const _hoisted_1$r = ["data-model-id"];
 const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "PbBlock",
   props: {
@@ -9018,13 +9010,13 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             part: child
           }, null, 8, ["part"]);
         }), 128))
-      ], 16, _hoisted_1$q)), [
+      ], 16, _hoisted_1$r)), [
         [unref(vPartHandler), { pageBuilder: unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
       ]);
     };
   }
 });
-const _hoisted_1$p = { class: "pb-block" };
+const _hoisted_1$q = { class: "pb-block" };
 const _hoisted_2$h = /* @__PURE__ */ createElementVNode("div", {
   class: "pb-widget",
   style: { "margin": "0 auto" }
@@ -9043,11 +9035,11 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$p, _hoisted_3$f);
+      return openBlock(), createElementBlock("div", _hoisted_1$q, _hoisted_3$f);
     };
   }
 });
-const _hoisted_1$o = ["data-model-id"];
+const _hoisted_1$p = ["data-model-id"];
 const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "PbSection",
   props: {
@@ -9174,13 +9166,13 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             onAddWidget: addWidget
           }))
         ], 64))
-      ], 16, _hoisted_1$o)), [
+      ], 16, _hoisted_1$p)), [
         [unref(vPartHandler), { pageBuilder: unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
       ]);
     };
   }
 });
-const _hoisted_1$n = { class: "group-editor group-editor-position" };
+const _hoisted_1$o = { class: "group-editor group-editor-position" };
 const _hoisted_2$g = { class: "flex-align-center" };
 const _hoisted_3$e = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
   /* @__PURE__ */ createElementVNode("label", { textContent: "Position" })
@@ -9220,7 +9212,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     const updateTop = (value) => updatePropertyValue({ top: value });
     const updateBottom = (value) => updatePropertyValue({ bottom: value });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$n, [
+      return openBlock(), createElementBlock("div", _hoisted_1$o, [
         createElementVNode("div", _hoisted_2$g, [
           _hoisted_3$e,
           createElementVNode("div", _hoisted_4$c, [
@@ -9267,7 +9259,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$m = { class: "group-editor group-editor-size" };
+const _hoisted_1$n = { class: "group-editor group-editor-size" };
 const _hoisted_2$f = { class: "flex-align-center" };
 const _hoisted_3$d = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
   /* @__PURE__ */ createElementVNode("label", { textContent: "Size" })
@@ -9293,7 +9285,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     const updateWidth = (value) => updatePropertyValue({ width: value });
     const updateHeight = (value) => updatePropertyValue({ height: value });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$m, [
+      return openBlock(), createElementBlock("div", _hoisted_1$n, [
         createElementVNode("div", _hoisted_2$f, [
           _hoisted_3$d,
           createElementVNode("div", _hoisted_4$b, [
@@ -9472,7 +9464,7 @@ var script$4 = {
     }
   }
 };
-const _hoisted_1$l = { class: "vc-alpha" };
+const _hoisted_1$m = { class: "vc-alpha" };
 const _hoisted_2$e = { class: "vc-alpha-checkboard-wrap" };
 const _hoisted_3$c = /* @__PURE__ */ createElementVNode(
   "div",
@@ -9486,7 +9478,7 @@ const _hoisted_4$a = [
 ];
 function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Checkboard = resolveComponent("Checkboard");
-  return openBlock(), createElementBlock("div", _hoisted_1$l, [
+  return openBlock(), createElementBlock("div", _hoisted_1$m, [
     createElementVNode("div", _hoisted_2$e, [
       createVNode(_component_Checkboard)
     ]),
@@ -10590,12 +10582,12 @@ var script$3 = {
     // }
   }
 };
-const _hoisted_1$k = { class: "vc-editable-input" };
+const _hoisted_1$l = { class: "vc-editable-input" };
 const _hoisted_2$d = ["aria-labelledby"];
 const _hoisted_3$b = ["id", "for"];
 const _hoisted_4$9 = { class: "vc-input__desc" };
 function render$3(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$k, [
+  return openBlock(), createElementBlock("div", _hoisted_1$l, [
     withDirectives(createElementVNode("input", {
       ref: "input",
       "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $options.val = $event),
@@ -10690,7 +10682,7 @@ var script$2 = {
     }
   }
 };
-const _hoisted_1$j = /* @__PURE__ */ createElementVNode(
+const _hoisted_1$k = /* @__PURE__ */ createElementVNode(
   "div",
   { class: "vc-saturation--white" },
   null,
@@ -10726,7 +10718,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
       onTouchstart: _cache[2] || (_cache[2] = (...args) => $options.handleChange && $options.handleChange(...args))
     },
     [
-      _hoisted_1$j,
+      _hoisted_1$k,
       _hoisted_2$c,
       createElementVNode(
         "div",
@@ -10875,7 +10867,7 @@ var script$1 = {
     }
   }
 };
-const _hoisted_1$i = ["aria-valuenow"];
+const _hoisted_1$j = ["aria-valuenow"];
 const _hoisted_2$b = /* @__PURE__ */ createElementVNode(
   "div",
   { class: "vc-hue-picker" },
@@ -10915,7 +10907,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
           4
           /* STYLE */
         )
-      ], 40, _hoisted_1$i)
+      ], 40, _hoisted_1$j)
     ],
     2
     /* CLASS */
@@ -11011,7 +11003,7 @@ var script = {
     }
   }
 };
-const _hoisted_1$h = { class: "vc-sketch-saturation-wrap" };
+const _hoisted_1$i = { class: "vc-sketch-saturation-wrap" };
 const _hoisted_2$a = { class: "vc-sketch-controls" };
 const _hoisted_3$8 = { class: "vc-sketch-sliders" };
 const _hoisted_4$7 = { class: "vc-sketch-hue-wrap" };
@@ -11054,7 +11046,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       class: normalizeClass(["vc-sketch", [$props.disableAlpha ? "vc-sketch__disable-alpha" : ""]])
     },
     [
-      createElementVNode("div", _hoisted_1$h, [
+      createElementVNode("div", _hoisted_1$i, [
         createVNode(_component_Saturation, {
           value: _ctx.colors,
           onChange: $options.childChange
@@ -11230,7 +11222,7 @@ const _sfc_main$i = defineComponent({
     };
   }
 });
-const _hoisted_1$g = { class: "buttons" };
+const _hoisted_1$h = { class: "buttons" };
 const _hoisted_2$9 = /* @__PURE__ */ createElementVNode("i", { class: "material-icons-outlined" }, "delete", -1);
 const _hoisted_3$7 = [
   _hoisted_2$9
@@ -11244,7 +11236,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     onKeydown: _cache[3] || (_cache[3] = withModifiers(() => {
     }, ["stop"]))
   }, [
-    createElementVNode("div", _hoisted_1$g, [
+    createElementVNode("div", _hoisted_1$h, [
       renderSlot(_ctx.$slots, "button", normalizeProps(guardReactiveProps({ toggle: _ctx.toggle, color: _ctx.color })), () => [
         createElementVNode("button", {
           class: normalizeClass([{ none: !_ctx.color }, "pb-button picker-button"]),
@@ -11271,7 +11263,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   ]);
 }
 const PbColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render]]);
-const _hoisted_1$f = { class: "group-editor group-editor-background" };
+const _hoisted_1$g = { class: "group-editor group-editor-background" };
 const _hoisted_2$8 = { class: "flex-align-center" };
 const _hoisted_3$6 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
   /* @__PURE__ */ createElementVNode("label", { textContent: "Background" })
@@ -11308,7 +11300,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$f, [
+      return openBlock(), createElementBlock("div", _hoisted_1$g, [
         createElementVNode("div", _hoisted_2$8, [
           _hoisted_3$6,
           createElementVNode("div", _hoisted_4$5, [
@@ -11341,7 +11333,7 @@ const TopLeftCornerIcon = "data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//W
 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$e = { class: "group-editor group-editor-border" };
+const _hoisted_1$f = { class: "group-editor group-editor-border" };
 const _hoisted_2$7 = { class: "flex-align-center" };
 const _hoisted_3$5 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
   /* @__PURE__ */ createElementVNode("label", { textContent: "Border" })
@@ -11412,7 +11404,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     const updateBorderBottomLeftRadius = (value) => updatePropertyValue({ borderBottomLeftRadius: value });
     const updateBorderBottomRightRadius = (value) => updatePropertyValue({ borderBottomRightRadius: value });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$e, [
+      return openBlock(), createElementBlock("div", _hoisted_1$f, [
         createElementVNode("div", _hoisted_2$7, [
           _hoisted_3$5,
           createElementVNode("div", _hoisted_4$4, [
@@ -11521,7 +11513,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$d = { class: "group-editor group-editor-margin" };
+const _hoisted_1$e = { class: "group-editor group-editor-margin" };
 const _hoisted_2$6 = { class: "flex-align-center" };
 const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
   /* @__PURE__ */ createElementVNode("label", { textContent: "Margin" })
@@ -11561,7 +11553,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     const updateTop = (value) => updatePropertyValue({ marginTop: value });
     const updateBottom = (value) => updatePropertyValue({ marginBottom: value });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$d, [
+      return openBlock(), createElementBlock("div", _hoisted_1$e, [
         createElementVNode("div", _hoisted_2$6, [
           _hoisted_3$4,
           createElementVNode("div", _hoisted_4$3, [
@@ -11608,7 +11600,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$c = { class: "group-editor group-editor-padding" };
+const _hoisted_1$d = { class: "group-editor group-editor-padding" };
 const _hoisted_2$5 = { class: "flex-align-center" };
 const _hoisted_3$3 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
   /* @__PURE__ */ createElementVNode("label", { textContent: "Padding" })
@@ -11648,7 +11640,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     const updateTop = (value) => updatePropertyValue({ paddingTop: value });
     const updateBottom = (value) => updatePropertyValue({ paddingBottom: value });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$c, [
+      return openBlock(), createElementBlock("div", _hoisted_1$d, [
         createElementVNode("div", _hoisted_2$5, [
           _hoisted_3$3,
           createElementVNode("div", _hoisted_4$2, [
@@ -13442,6 +13434,40 @@ class PageBuilderEditorImpl {
   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();
@@ -13462,9 +13488,9 @@ class PageBuilderEditorImpl {
     });
   }
 }
-const _hoisted_1$b = /* @__PURE__ */ createElementVNode("i", { class: "material-icons-outlined" }, "add_circle_outline", -1);
+const _hoisted_1$c = /* @__PURE__ */ createElementVNode("i", { class: "material-icons-outlined" }, "add_circle_outline", -1);
 const _hoisted_2$4 = [
-  _hoisted_1$b
+  _hoisted_1$c
 ];
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "PbPage",
@@ -13516,7 +13542,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$a = /* @__PURE__ */ createElementVNode("div", { style: { "width": "20px" } }, null, -1);
+const _hoisted_1$b = /* @__PURE__ */ createElementVNode("div", { style: { "width": "20px" } }, null, -1);
 const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "PbCanvas",
   setup(__props) {
@@ -13569,7 +13595,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             page: pageS.value,
             width: 420
           }, null, 8, ["page"]),
-          _hoisted_1$a,
+          _hoisted_1$b,
           createVNode(_sfc_main$d, {
             "is-mobile-page": false,
             page: pageL.value,
@@ -13580,8 +13606,8 @@ const _sfc_main$c = /* @__PURE__ */ 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  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$9 = { class: "pb-canvas-frame" };
+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$a = { class: "pb-canvas-frame" };
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "PbCanvasFrame",
   setup(__props) {
@@ -13624,7 +13650,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     );
     return (_ctx, _cache) => {
       var _a, _b, _c, _d;
-      return openBlock(), createElementBlock("div", _hoisted_1$9, [
+      return openBlock(), createElementBlock("div", _hoisted_1$a, [
         createElementVNode("iframe", {
           ref_key: "iframeRef",
           ref: iframeRef,
@@ -13640,7 +13666,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$8 = { class: "pb-tool-button bs-layout-horizontal flex-align-center" };
+const _hoisted_1$9 = { class: "pb-tool-button bs-layout-horizontal flex-align-center" };
 const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "PbToolbarButton",
   props: {
@@ -13654,7 +13680,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       (_b = (_a = props.button).handler) == null ? void 0 : _b.call(_a, pageBuilder);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$8, [
+      return openBlock(), createElementBlock("div", _hoisted_1$9, [
         createElementVNode("div", {
           class: "tool-button bs-clickable",
           onClick: handleClick
@@ -13669,7 +13695,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$7 = { class: "pb-tool-button-group bs-layout-horizontal flex-align-center" };
+const _hoisted_1$8 = { class: "pb-tool-button-group bs-layout-horizontal flex-align-center" };
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "PbToolbarButtonGroup",
   props: {
@@ -13677,7 +13703,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$7, [
+      return openBlock(), createElementBlock("div", _hoisted_1$8, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.group.buttons, (button) => {
           return openBlock(), createBlock$1(_sfc_main$a, {
             key: button.buttonId,
@@ -13688,60 +13714,112 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$6 = { class: "pb-toolbar bs-layout-horizontal align-items-center" };
-const _hoisted_2$3 = { class: "bs-layout-horizontal" };
+const _hoisted_1$7 = { class: "pb-toolbar bs-layout-horizontal align-items-center" };
+const _hoisted_2$3 = { class: "bs-layout-horizontal align-items-center" };
 const _hoisted_3$2 = /* @__PURE__ */ createElementVNode("div", { class: "flex-grow-1" }, null, -1);
-const _hoisted_4$1 = { class: "ml-8 w-64" };
+const _hoisted_4$1 = { class: "mr-8" };
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "PbToolbar",
+  props: {
+    plugin: {}
+  },
   setup(__props) {
     const pageBuilder = usePageBuilderEditor();
     const buttonGroups = pageBuilder.toolButtonRegistry.getToolButtonGroups();
-    const scale = 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 = useModal();
+    const screenCount = 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: defineAsyncComponent(() => import("./PbScreenSelectModal-DDATc9n1.js")),
+        bind: {},
+        on: {
+          select: (selection) => {
+            pageBuilder.makeSingleScreen(selection);
+          }
+        }
+      });
     };
+    const scale = 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 openBlock(), createElementBlock("div", _hoisted_1$6, [
+      var _a, _b, _c;
+      return openBlock(), createElementBlock("div", _hoisted_1$7, [
         createElementVNode("div", _hoisted_2$3, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(buttonGroups), (group) => {
             return openBlock(), createBlock$1(_sfc_main$9, {
               key: group.groupId,
               group
             }, null, 8, ["group"]);
-          }), 128))
-        ]),
-        _hoisted_3$2,
-        createElementVNode("div", _hoisted_4$1, [
+          }), 128)),
+          createVNode(unref(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"]),
           createVNode(unref(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$2,
+        createElementVNode("div", _hoisted_4$1, [
+          _ctx.plugin ? (openBlock(), createBlock$1(resolveDynamicComponent((_a = _ctx.plugin) == null ? void 0 : _a.component), mergeProps({ key: 0 }, (_b = _ctx.plugin) == null ? void 0 : _b.bind, toHandlers((_c = _ctx.plugin) == null ? void 0 : _c.on)), null, 16)) : createCommentVNode("", true)
         ])
       ]);
     };
   }
 });
-const _hoisted_1$5 = { class: "pb-menu bs-layout-vertical" };
+const _hoisted_1$6 = { class: "pb-menu bs-layout-vertical" };
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "PbMenu",
+  props: {
+    toolbarPlugin: {}
+  },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$5, [
-        createVNode(_sfc_main$8)
+      return openBlock(), createElementBlock("div", _hoisted_1$6, [
+        createVNode(_sfc_main$8, { plugin: _ctx.toolbarPlugin }, null, 8, ["plugin"])
       ]);
     };
   }
 });
+const _hoisted_1$5 = {
+  key: 1,
+  class: "bs-layout-vertical border"
+};
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "PbNavigator",
   setup(__props) {
@@ -13760,8 +13838,18 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       { tabId: "pageS", caption: "Mobile", icon: "phone_iphone" },
       { tabId: "pageL", caption: "PC", icon: "desktop_windows" }
     ];
-    const pageS = computed(() => (pageBuilder.model.rootPart.children || [])[0].children || []);
-    const pageL = computed(() => (pageBuilder.model.rootPart.children || [])[1].children || []);
+    const isMultipleScreen = computed(() => {
+      var _a;
+      return (((_a = pageBuilder.model.rootPart.children) == null ? void 0 : _a.length) || 0) >= 2;
+    });
+    const pageS = computed(() => {
+      var _a;
+      return ((_a = (pageBuilder.model.rootPart.children || [])[0]) == null ? void 0 : _a.children) || [];
+    });
+    const pageL = computed(() => {
+      var _a;
+      return ((_a = (pageBuilder.model.rootPart.children || [])[1]) == null ? void 0 : _a.children) || [];
+    });
     const tabId = computed({
       get() {
         const page = pageBuilder.context.getSelectedPage();
@@ -13891,7 +13979,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       PageBuilderEditorEvent.off.modelUpdatedByUI(modelUpdateHandler);
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock$1(unref(BSTabSheet), {
+      return isMultipleScreen.value ? (openBlock(), createBlock$1(unref(BSTabSheet), {
+        key: 0,
         "tab-id": tabId.value,
         "onUpdate:tabId": _cache[4] || (_cache[4] = ($event) => tabId.value = $event),
         tabs
@@ -13957,7 +14046,36 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           ], 512)
         ]),
         _: 1
-      }, 8, ["tab-id"]);
+      }, 8, ["tab-id"])) : (openBlock(), createElementBlock("div", _hoisted_1$5, [
+        createElementVNode("div", {
+          ref_key: "treeS",
+          ref: treeS,
+          class: "pb-navigator",
+          tabindex: "0"
+        }, [
+          createVNode(unref(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)
+      ]));
     };
   }
 });
@@ -14245,7 +14363,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     editMode: {},
     pageContent: {},
     locales: {},
-    locale: {}
+    locale: {},
+    toolbarPlugin: {}
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
@@ -14328,7 +14447,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        createVNode(_sfc_main$7),
+        createVNode(_sfc_main$7, { "toolbar-plugin": _ctx.toolbarPlugin }, null, 8, ["toolbar-plugin"]),
         createElementVNode("div", _hoisted_2, [
           createVNode(_sfc_main$6),
           createVNode(_sfc_main$b, { class: "flex-grow-1" }),