@g1cloud/page-builder-editor 1.0.0-alpha.2 → 1.0.0-alpha.21

package/dist/{index-Dwk2ffWe.js → index-Cr-_-n9T.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, useModal, useContextMenu, BSSelect, BSTabSheet, BSTree, BSDateRange } from "@g1cloud/bluesea";
+import { ref, defineComponent, openBlock, createElementBlock, createCommentVNode, computed, mergeProps, toDisplayString, onMounted, onBeforeUnmount, provide, inject, watch, createBlock as createBlock$1, resolveDynamicComponent, normalizeProps, createElementVNode, normalizeClass, Fragment, renderList, reactive, defineAsyncComponent, withDirectives, unref, createVNode, normalizeStyle, resolveComponent, vModelText, resolveDirective, withModifiers, renderSlot, guardReactiveProps, markRaw, Teleport, toHandlers } from "vue";
+import { notNull, BSTextInput, vClickOutside, useModal, useContextMenu, BSSelect, BSTree } from "@g1cloud/bluesea";
 const create$5 = () => /* @__PURE__ */ new Map();
 const copy = (m) => {
   const r = create$5();
@@ -6597,7 +6597,7 @@ var shortUniqueId$1 = { exports: {} };
 })(shortUniqueId$1);
 var shortUniqueIdExports = shortUniqueId$1.exports;
 const ShortUniqueId = /* @__PURE__ */ getDefaultExportFromCjs(shortUniqueIdExports);
-function mitt$1(n) {
+function mitt(n) {
   return { all: n = n || /* @__PURE__ */ new Map(), on: function(t, e) {
     var i = n.get(t);
     i ? i.push(e) : n.set(t, [e]);
@@ -6613,57 +6613,30 @@ function mitt$1(n) {
     });
   } };
 }
-const emitter$1 = mitt$1();
+const emitter = mitt();
 const PageBuilderEditorEvent = {
   on: {
     modelUpdated: (listener) => {
-      emitter$1.on("modelUpdated", listener);
+      emitter.on("modelUpdated", listener);
     },
     modelUpdatedByUI: (listener) => {
-      emitter$1.on("modelUpdatedByUI", listener);
-    },
-    requestImage: (listener) => {
-      emitter$1.on("requestImage", listener);
-    },
-    requestProducts: (listener) => {
-      emitter$1.on("requestProducts", listener);
-    },
-    requestLocalMarketingPartSchedule: (listener) => {
-      emitter$1.on("requestLocalMarketingPartSchedule", listener);
+      emitter.on("modelUpdatedByUI", listener);
     }
   },
   off: {
     modelUpdated: (listener) => {
-      emitter$1.off("modelUpdated", listener);
+      emitter.off("modelUpdated", listener);
     },
     modelUpdatedByUI: (listener) => {
-      emitter$1.off("modelUpdatedByUI", listener);
-    },
-    requestImage: (listener) => {
-      emitter$1.off("requestImage", listener);
-    },
-    requestProducts: (listener) => {
-      emitter$1.off("requestProducts", listener);
-    },
-    requestLocalMarketingPartSchedule: (listener) => {
-      emitter$1.off("requestLocalMarketingPartSchedule", listener);
+      emitter.off("modelUpdatedByUI", listener);
     }
   },
   emit: {
     modelUpdated: (changes) => {
-      emitter$1.emit("modelUpdated", changes);
+      emitter.emit("modelUpdated", changes);
     },
     modelUpdatedByUI: (changes) => {
-      emitter$1.emit("modelUpdatedByUI", changes);
-    },
-    requestImage: (param) => {
-      emitter$1.emit("requestImage", param);
-    },
-    requestProducts: (param) => {
-      emitter$1.emit("requestProducts", param);
-    },
-    requestLocalMarketingPartSchedule: (param) => {
-      emitter$1.emit("requestLocalMarketingPartSchedule", param);
+      emitter.emit("modelUpdatedByUI", changes);
     }
   }
 };
@@ -6721,7 +6694,7 @@ class Part {
     return "";
   }
   getStyles() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J;
     const style = {};
     if (((_a = this.properties) == null ? void 0 : _a.direction) === "horizontal") {
       style.display = "flex";
@@ -6765,20 +6738,46 @@ class Part {
       style.width = this.properties.width;
     if ((_s = this.properties) == null ? void 0 : _s.height)
       style.height = this.properties.height;
+    if ((_t = this.properties) == null ? void 0 : _t.backgroundColor)
+      style.backgroundColor = this.properties.backgroundColor;
+    if ((_u = this.properties) == null ? void 0 : _u.borderLeftWidth)
+      style.borderLeftWidth = this.properties.borderLeftWidth;
+    if ((_v = this.properties) == null ? void 0 : _v.borderRightWidth)
+      style.borderRightWidth = this.properties.borderRightWidth;
+    if ((_w = this.properties) == null ? void 0 : _w.borderTopWidth)
+      style.borderTopWidth = this.properties.borderTopWidth;
+    if ((_x = this.properties) == null ? void 0 : _x.borderBottomWidth)
+      style.borderBottomWidth = this.properties.borderBottomWidth;
+    if ((_y = this.properties) == null ? void 0 : _y.borderTopLeftRadius)
+      style.borderTopLeftRadius = this.properties.borderTopLeftRadius;
+    if ((_z = this.properties) == null ? void 0 : _z.borderTopRightRadius)
+      style.borderTopRightRadius = this.properties.borderTopRightRadius;
+    if ((_A = this.properties) == null ? void 0 : _A.borderBottomLeftRadius)
+      style.borderBottomLeftRadius = this.properties.borderBottomLeftRadius;
+    if ((_B = this.properties) == null ? void 0 : _B.borderBottomRightRadius)
+      style.borderBottomRightRadius = this.properties.borderBottomRightRadius;
+    if (((_C = this.properties) == null ? void 0 : _C.borderColor) && style.borderLeftWidth) {
+      style.borderLeftStyle = "solid";
+      style.borderLeftColor = (_D = this.properties) == null ? void 0 : _D.borderColor;
+    }
+    if (((_E = this.properties) == null ? void 0 : _E.borderColor) && style.borderRightWidth) {
+      style.borderRightStyle = "solid";
+      style.borderRightColor = (_F = this.properties) == null ? void 0 : _F.borderColor;
+    }
+    if (((_G = this.properties) == null ? void 0 : _G.borderColor) && style.borderTopWidth) {
+      style.borderTopStyle = "solid";
+      style.borderTopColor = (_H = this.properties) == null ? void 0 : _H.borderColor;
+    }
+    if (((_I = this.properties) == null ? void 0 : _I.borderColor) && style.borderBottomWidth) {
+      style.borderBottomStyle = "solid";
+      style.borderBottomColor = (_J = this.properties) == null ? void 0 : _J.borderColor;
+    }
     return style;
   }
-  getPageBuilderId() {
-    if (this.isRoot())
-      return this.pageBuilderId;
-    if (this.parent)
-      return this.parent.getPageBuilderId();
-  }
 }
 class RootPart extends Part {
   constructor() {
     super();
-    __publicField2(this, "pageBuilderId");
-    this.pageBuilderId = "";
     this.partType = ROOT_TYPE$1;
     this.partName = ROOT_TYPE$1;
   }
@@ -6836,11 +6835,11 @@ let Model$1 = class Model {
   }
 };
 const _hoisted_1$8$1 = ["data-model-id"];
-const _hoisted_2$3$1 = {
+const _hoisted_2$5$1 = {
   key: 1,
   class: "pb-nested-widget"
 };
-const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a$1 = /* @__PURE__ */ defineComponent({
   __name: "PbWidget",
   props: {
     part: {}
@@ -6862,7 +6861,7 @@ const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
           key: 0,
           part: _ctx.part
         }, null, 8, ["part"])) : createCommentVNode("", true),
-        childComponents.value && childComponents.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$3$1, [
+        childComponents.value && childComponents.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$5$1, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(childComponents.value, (child) => {
             return openBlock(), createBlock$1(resolveDynamicComponent(child.component), {
               key: child.part.partId,
@@ -6875,7 +6874,7 @@ const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$7$1 = ["data-model-id"];
-const _sfc_main$7$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
   __name: "PbBlock",
   props: {
     part: {}
@@ -6893,7 +6892,7 @@ const _sfc_main$7$1 = /* @__PURE__ */ defineComponent({
         style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
       }, properties.value), [
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.part.children, (child) => {
-          return openBlock(), createBlock$1(_sfc_main$8$1, {
+          return openBlock(), createBlock$1(_sfc_main$a$1, {
             key: child.partId,
             part: child
           }, null, 8, ["part"]);
@@ -6903,7 +6902,7 @@ const _sfc_main$7$1 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$6$1 = { class: "pb-block" };
-const _hoisted_2$2$1 = /* @__PURE__ */ createElementVNode("div", {
+const _hoisted_2$4$1 = /* @__PURE__ */ createElementVNode("div", {
   class: "pb-widget",
   style: { "margin": "0 auto" }
 }, [
@@ -6911,22 +6910,22 @@ const _hoisted_2$2$1 = /* @__PURE__ */ createElementVNode("div", {
     /* @__PURE__ */ createElementVNode("h3", null, "Login Design Part")
   ])
 ], -1);
-const _hoisted_3$2$1 = [
-  _hoisted_2$2$1
+const _hoisted_3$4$1 = [
+  _hoisted_2$4$1
 ];
-const _sfc_main$6$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
   __name: "PbLoginDepart",
   props: {
     part: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$6$1, _hoisted_3$2$1);
+      return openBlock(), createElementBlock("div", _hoisted_1$6$1, _hoisted_3$4$1);
     };
   }
 });
 const _hoisted_1$5$1 = ["data-model-id"];
-const _sfc_main$5$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7$1 = /* @__PURE__ */ defineComponent({
   __name: "PbSection",
   props: {
     part: {}
@@ -6942,11 +6941,11 @@ const _sfc_main$5$1 = /* @__PURE__ */ defineComponent({
         "data-model-id": _ctx.part.partId,
         style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
       }, properties.value), [
-        ((_b = _ctx.part.properties) == null ? void 0 : _b.name) === "Login Design Part" ? (openBlock(), createBlock$1(_sfc_main$6$1, {
+        ((_b = _ctx.part.properties) == null ? void 0 : _b.name) === "Login Design Part" ? (openBlock(), createBlock$1(_sfc_main$8$1, {
           key: 0,
           part: _ctx.part
         }, null, 8, ["part"])) : _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.part.children, (block) => {
-          return openBlock(), createBlock$1(_sfc_main$7$1, {
+          return openBlock(), createBlock$1(_sfc_main$9$1, {
             key: block.partId,
             part: block
           }, null, 8, ["part"]);
@@ -6956,20 +6955,20 @@ const _sfc_main$5$1 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$4$1 = { class: "pb-image-widget" };
-const _hoisted_2$1$1 = ["src"];
-const _hoisted_3$1$1 = {
+const _hoisted_2$3$1 = ["src"];
+const _hoisted_3$3$1 = {
   key: 1,
-  class: "empty"
+  class: "placeholder"
 };
-const _hoisted_4$1$1 = /* @__PURE__ */ createElementVNode("span", { class: "font-icon" }, "image", -1);
-const _hoisted_5$1$1 = [
-  _hoisted_4$1$1
+const _hoisted_4$d = /* @__PURE__ */ createElementVNode("span", { class: "font-icon" }, "image", -1);
+const _hoisted_5$6 = [
+  _hoisted_4$d
 ];
-const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6$1 = /* @__PURE__ */ defineComponent({
   __name: "PbImageWidget",
   props: {
     part: {},
-    viewMode: { type: Boolean, default: false }
+    placeholder: { type: Boolean }
   },
   setup(__props) {
     return (_ctx, _cache) => {
@@ -6980,199 +6979,257 @@ const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
           src: (_b = _ctx.part.properties) == null ? void 0 : _b.image,
           alt: "",
           class: "image"
-        }, null, 8, _hoisted_2$1$1)) : !_ctx.viewMode ? (openBlock(), createElementBlock("div", _hoisted_3$1$1, _hoisted_5$1$1)) : createCommentVNode("", true)
+        }, null, 8, _hoisted_2$3$1)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_3$3$1, _hoisted_5$6)) : createCommentVNode("", true)
       ]);
     };
   }
 });
-const _hoisted_1$3$1 = ["textContent"];
-const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$3$1 = { class: "pb-text-widget" };
+const _hoisted_2$2$1 = ["textContent"];
+const _hoisted_3$2$1 = {
+  key: 1,
+  class: "placeholder",
+  textContent: "Empty Text"
+};
+const _sfc_main$5$1 = /* @__PURE__ */ defineComponent({
   __name: "PbTextWidget",
   props: {
     part: {},
-    viewMode: { type: Boolean, default: false }
+    placeholder: { type: Boolean }
   },
   setup(__props) {
     const props = __props;
-    const style = computed(() => {
+    const pageBuilder = usePageBuilder();
+    const text = computed(() => {
       var _a;
+      if ((_a = props.part.properties) == null ? void 0 : _a.text) {
+        if (typeof props.part.properties.text === "string") {
+          return props.part.properties.text;
+        } else {
+          const locale = pageBuilder.getLocale();
+          return props.part.properties.text[locale] || "";
+        }
+      }
+    });
+    const style = computed(() => {
+      var _a, _b;
       return {
         style: {
-          fontSize: (_a = props.part.properties) == null ? void 0 : _a.fontSize
+          fontSize: (_a = props.part.properties) == null ? void 0 : _a.fontSize,
+          color: (_b = props.part.properties) == null ? void 0 : _b.color
         }
       };
     });
     return (_ctx, _cache) => {
-      var _a, _b;
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass([[_ctx.viewMode && !((_a = _ctx.part.properties) == null ? void 0 : _a.text) ? "empty" : ""], "pb-text-widget"])
-      }, [
-        createElementVNode("div", mergeProps({ class: "text" }, style.value, {
-          textContent: toDisplayString(((_b = _ctx.part.properties) == null ? void 0 : _b.text) || (!_ctx.viewMode ? "Empty text" : " "))
-        }), null, 16, _hoisted_1$3$1)
-      ], 2);
+      return openBlock(), createElementBlock("div", _hoisted_1$3$1, [
+        text.value ? (openBlock(), createElementBlock("div", mergeProps({
+          key: 0,
+          class: "text"
+        }, style.value, {
+          textContent: toDisplayString(text.value)
+        }), null, 16, _hoisted_2$2$1)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_3$2$1)) : createCommentVNode("", true)
+      ]);
     };
   }
 });
-function mitt(n) {
-  return { all: n = n || /* @__PURE__ */ new Map(), on: function(t, e) {
-    var i = n.get(t);
-    i ? i.push(e) : n.set(t, [e]);
-  }, off: function(t, e) {
-    var i = n.get(t);
-    i && (e ? i.splice(i.indexOf(e) >>> 0, 1) : n.set(t, []));
-  }, emit: function(t, e) {
-    var i = n.get(t);
-    i && i.slice().map(function(n2) {
-      n2(e);
-    }), (i = n.get("*")) && i.slice().map(function(n2) {
-      n2(t, e);
-    });
-  } };
-}
-const emitter = mitt();
-const PageBuilderViewerEvent = {
-  on: {
-    requestProductMapping: (listener) => {
-      emitter.on("requestProductMapping", listener);
-    }
-  },
-  off: {
-    requestProductMapping: (listener) => {
-      emitter.off("requestProductMapping", listener);
-    }
-  },
-  emit: {
-    requestProductMapping: (param) => {
-      emitter.emit("requestProductMapping", param);
-    }
-  }
-};
-const _hoisted_1$2$1 = { class: "pb-product-list-widget" };
-const _hoisted_2$l = { class: "product" };
-const _hoisted_3$g = { class: "image" };
-const _hoisted_4$d = ["src"];
-const _hoisted_5$8 = { class: "name" };
-const _hoisted_6$7 = { class: "price" };
-const _hoisted_7$5 = {
+const _hoisted_1$2$1 = { class: "pb-html-widget" };
+const _hoisted_2$1$1 = ["innerHTML"];
+const _hoisted_3$1$1 = {
   key: 1,
-  class: "empty"
+  class: "placeholder",
+  textContent: "Empty HTML"
 };
-const _hoisted_8$5 = /* @__PURE__ */ createElementVNode("span", { class: "font-icon" }, "image", -1);
-const _hoisted_9$2 = [
-  _hoisted_8$5
-];
-const _sfc_main$2$1 = /* @__PURE__ */ defineComponent({
-  __name: "PbProductListWidget",
+const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
+  __name: "PbHtmlWidget",
   props: {
     part: {},
-    viewMode: { type: Boolean, default: false }
+    placeholder: { type: Boolean }
   },
   setup(__props) {
     const props = __props;
-    const products = ref([]);
-    const productCount = computed(() => props.viewMode ? products.value.length : Math.max(4, products.value.length));
-    const updateProducts = () => {
-      var _a, _b;
-      if ((_a = props.part.properties) == null ? void 0 : _a.products) {
-        PageBuilderViewerEvent.emit.requestProductMapping({
-          pageBuilderId: props.part.getPageBuilderId(),
-          itemCodes: (_b = props.part.properties) == null ? void 0 : _b.products,
-          callback: (_products) => {
-            products.value = _products;
-          }
-        });
+    const pageBuilder = usePageBuilder();
+    const getHtml = (html2) => {
+      if (!html2)
+        return;
+      if (typeof html2 !== "object")
+        return;
+      const locale = pageBuilder.locale.value;
+      let _html = html2[locale];
+      if (!_html && html2.tags) {
+        _html = html2;
       }
+      if (!_html) {
+        return "";
+      }
+      return `${_html.tags}
+<style>
+${_html.style}
+</style>`;
     };
-    onMounted(() => updateProducts());
-    watch(() => {
+    const html = computed(() => {
       var _a;
-      return (_a = props.part.properties) == null ? void 0 : _a.products;
-    }, () => updateProducts());
+      return getHtml((_a = props.part.properties) == null ? void 0 : _a.html);
+    });
+    computed(() => props.placeholder ? !html.value : false);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$2$1, [
-        products.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(productCount.value, (index) => {
-          return openBlock(), createElementBlock("div", {
-            key: index,
-            class: "product-wrapper"
-          }, [
-            createElementVNode("div", _hoisted_2$l, [
-              products.value[index - 1] ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                createElementVNode("div", _hoisted_3$g, [
-                  createElementVNode("img", {
-                    src: products.value[index - 1].image,
-                    alt: ""
-                  }, null, 8, _hoisted_4$d)
-                ]),
-                createElementVNode("div", _hoisted_5$8, toDisplayString(products.value[index - 1].itemName), 1),
-                createElementVNode("div", _hoisted_6$7, toDisplayString(products.value[index - 1].price), 1)
-              ], 64)) : (openBlock(), createElementBlock("div", _hoisted_7$5, _hoisted_9$2))
-            ])
-          ]);
-        }), 128)) : createCommentVNode("", true)
+        html.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "html",
+          innerHTML: html.value
+        }, null, 8, _hoisted_2$1$1)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_3$1$1)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const _hoisted_1$1$1 = { class: "pb-iframe-widget" };
+const _hoisted_2$j = ["src"];
+const _hoisted_3$g = {
+  key: 1,
+  class: "placeholder",
+  textContent: "Empty URL"
+};
+const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
+  __name: "PbIframeWidget",
+  props: {
+    part: {},
+    placeholder: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const pageBuilder = usePageBuilder();
+    const url = computed(() => {
+      var _a;
+      const url2 = (_a = props.part.properties) == null ? void 0 : _a.url;
+      if (!url2)
+        return;
+      if (typeof url2 !== "object")
+        return;
+      const locale = pageBuilder.getLocale();
+      return url2[locale];
+    });
+    const style = computed(() => ({
+      style: {
+        width: "100%",
+        height: `${height.value}px`
+      }
+    }));
+    const height = ref(200);
+    const updateHeight = (event) => {
+      if (event.data && event.data.height) {
+        height.value = event.data.height;
+      }
+    };
+    onMounted(() => {
+      window.addEventListener("message", updateHeight);
+    });
+    onBeforeUnmount(() => {
+      window.removeEventListener("message", updateHeight);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$1$1, [
+        url.value ? (openBlock(), createElementBlock("iframe", mergeProps({
+          key: 0,
+          src: url.value
+        }, style.value), null, 16, _hoisted_2$j)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_3$g)) : createCommentVNode("", true)
       ]);
     };
   }
 });
-const partDefinitions$1 = {
+const defaultPartDefinitions = {
   "Section": {
     partType: "Section",
     partName: "Section",
-    creator: () => _sfc_main$5$1
-  },
-  "GlobalDesignPart": {
-    partType: "Section",
-    partName: "GlobalDesignPart",
-    creator: () => _sfc_main$5$1
-  },
-  "LocalDesignPart": {
-    partType: "Section",
-    partName: "LocalDesignPart",
-    creator: () => _sfc_main$5$1
-  },
-  "LocalMarketingPart": {
-    partType: "Section",
-    partName: "LocalMarketingPart",
-    creator: () => _sfc_main$5$1
+    creator: () => _sfc_main$7$1
   },
   "Block": {
     partType: "Block",
     partName: "Block",
-    creator: () => _sfc_main$7$1
+    creator: () => _sfc_main$9$1
   },
   "TextWidget": {
     partType: "Widget",
     partName: "TextWidget",
-    creator: () => _sfc_main$3$1
+    creator: () => _sfc_main$5$1
   },
   "ImageWidget": {
     partType: "Widget",
     partName: "ImageWidget",
+    creator: () => _sfc_main$6$1
+  },
+  "HtmlWidget": {
+    partType: "Widget",
+    partName: "HtmlWidget",
     creator: () => _sfc_main$4$1
   },
-  "ProductListWidget": {
+  "IframeWidget": {
     partType: "Widget",
-    partName: "ProductListWidget",
-    creator: () => _sfc_main$2$1
+    partName: "IframeWidget",
+    creator: () => _sfc_main$3$1
   }
 };
+const PAGE_BUILDER_KEY = "PageBuilder";
 const PAGE_BUILDER_VIEWER_KEY = "PageBuilderViewer";
+let partDefinitions$1 = { ...defaultPartDefinitions };
 class PageBuilderViewerImpl {
   constructor() {
-    __publicField2(this, "instanceId");
     __publicField2(this, "model");
+    __publicField2(this, "locale", ref("en"));
+    __publicField2(this, "watchers", {});
+    __publicField2(this, "providers", {});
     this.model = new Model$1();
   }
-  render(pageContent) {
-    const rootPart = new RootPart();
-    rootPart.pageBuilderId = this.instanceId;
-    rootPart.children = this.parsePageContent(pageContent);
-    if (rootPart.children) {
-      for (let page of rootPart.children) {
-        page.parent = rootPart;
+  getLocale() {
+    return this.locale.value;
+  }
+  setLocale(locale) {
+    this.locale.value = locale || "en";
+  }
+  registerCustomPlugin(plugin) {
+    if (plugin.widgets) {
+      plugin.widgets.forEach((v) => {
+        const w = { ...v };
+        w.partType = "Widget";
+        w.creator = () => _sfc_main$p;
+        partDefinitions$1[v.partName] = w;
+      });
+    }
+    if (plugin.watchers) {
+      this.watchers = { ...this.watchers, ...plugin.watchers };
+    }
+    if (plugin.providers) {
+      this.providers = { ...this.providers, ...plugin.providers };
+    }
+  }
+  watchCustomWidgetData(part) {
+    const def = partDefinitions$1[part.partName];
+    if (!def || !def.dataWatcher)
+      return false;
+    const watcher = this.watchers[def.dataWatcher];
+    if (!watcher)
+      return false;
+    return watcher(part.properties);
+  }
+  provideCustomWidgetData(part) {
+    const def = partDefinitions$1[part.partName];
+    if (!def || !def.dataProvider)
+      return Promise.resolve();
+    const provider = this.providers[def.dataProvider];
+    if (!provider)
+      return Promise.resolve();
+    return provider(part.properties);
+  }
+  render(data) {
+    const _data = JSON.parse(data || "{}") || {};
+    const rootPart = this.parsePartContent(_data);
+    if (rootPart) {
+      if (rootPart.children) {
+        for (let page of rootPart.children) {
+          page.parent = rootPart;
+        }
       }
+      this.model.rootPart.value = rootPart;
     }
-    this.model.rootPart.value = rootPart;
   }
   parsePageContent(pageContent) {
     return pageContent.map((partContent) => this.parsePartContent(partContent)).filter((part) => !!part);
@@ -7184,11 +7241,18 @@ class PageBuilderViewerImpl {
     part.partType = partContent.partType;
     part.partName = partContent.partName;
     part.properties = partContent.properties ? JSON.parse(JSON.stringify(partContent.properties)) : null;
-    part.children = (partContent.children || []).map((child) => this.parsePartContent(child)).filter((part2) => !!part2);
+    part.children = (partContent.children || []).map((child) => {
+      const childPart = this.parsePartContent(child);
+      if (childPart)
+        childPart.parent = part;
+      return childPart;
+    }).filter((part2) => !!part2);
     return part;
   }
   createPart(partType) {
     switch (partType) {
+      case "Root":
+        return new RootPart();
       case "Page":
         return new Page();
       case "Section":
@@ -7199,18 +7263,33 @@ class PageBuilderViewerImpl {
         return new Widget();
     }
   }
+  getCustomWidgetComponent(part) {
+    const def = getPartDefinition(part.partName);
+    if (def) {
+      return def.component;
+    }
+  }
 }
 const createPageBuilderViewer = () => {
   const viewer = new PageBuilderViewerImpl();
   return viewer;
 };
+const providePageBuilder = (pageBuilder) => {
+  provide(PAGE_BUILDER_KEY, pageBuilder);
+};
 const providePageBuilderViewer = (pageBuilderViewer) => {
   provide(PAGE_BUILDER_VIEWER_KEY, pageBuilderViewer);
 };
+const usePageBuilder = () => {
+  const pageBuilder = inject(PAGE_BUILDER_KEY);
+  if (!pageBuilder)
+    throw Error("PageBuilder not found");
+  return pageBuilder;
+};
 const usePageBuilderViewer = () => {
   const pageBuilderViewer = inject(PAGE_BUILDER_VIEWER_KEY);
   if (!pageBuilderViewer)
-    throw Error("PageBuilder not found");
+    throw Error("PageBuilderViewer not found");
   return pageBuilderViewer;
 };
 const createPartComponents = (parts) => {
@@ -7228,11 +7307,11 @@ const createPartComponent = (part) => {
   }
 };
 const getPartDefinition = (partName) => partDefinitions$1[partName];
-const _hoisted_1$1$1 = { class: "pb-page-content" };
-const _sfc_main$1$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2$1 = /* @__PURE__ */ defineComponent({
   __name: "PbPage",
   props: {
-    page: {}
+    page: {},
+    isMobilePage: { type: Boolean }
   },
   setup(__props) {
     const properties = computed(() => ({
@@ -7243,31 +7322,43 @@ const _sfc_main$1$1 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       var _a;
       return openBlock(), createElementBlock("div", mergeProps({ class: "pb-page" }, properties.value), [
-        createElementVNode("div", _hoisted_1$1$1, [
+        createElementVNode("div", {
+          class: normalizeClass([[_ctx.isMobilePage ? "mobile" : "pc"], "pb-page-content"])
+        }, [
           (openBlock(true), createElementBlock(Fragment, null, renderList((_a = _ctx.page) == null ? void 0 : _a.children, (section) => {
-            return openBlock(), createBlock$1(_sfc_main$5$1, {
+            return openBlock(), createBlock$1(_sfc_main$7$1, {
               key: section.partId,
               part: section
             }, null, 8, ["part"]);
           }), 128))
-        ])
+        ], 2)
       ], 16);
     };
   }
 });
-const _hoisted_1$u = { class: "pb-viewer" };
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _hoisted_1$t = { class: "pb-viewer" };
+const _sfc_main$1$1 = /* @__PURE__ */ defineComponent({
   __name: "PageBuilderViewer",
   props: {
-    instanceId: {},
-    pageContent: {}
+    pageContent: {},
+    isMobilePage: { type: Boolean },
+    locale: {},
+    plugin: {}
   },
   setup(__props) {
     const props = __props;
     const pageBuilderViewer = createPageBuilderViewer();
-    pageBuilderViewer.instanceId = props.instanceId;
+    pageBuilderViewer.setLocale(props.locale);
+    if (props.plugin)
+      pageBuilderViewer.registerCustomPlugin(props.plugin);
     providePageBuilderViewer(pageBuilderViewer);
-    const page = computed(() => pageBuilderViewer.model.rootPart.value.children && pageBuilderViewer.model.rootPart.value.children[0]);
+    providePageBuilder(pageBuilderViewer);
+    const page = computed(() => {
+      const pages = pageBuilderViewer.model.rootPart.value.children;
+      if (!pages || !pages.length)
+        return;
+      return pages[pages.length === 1 || props.isMobilePage ? 0 : 1];
+    });
     onMounted(() => {
       if (props.pageContent) {
         pageBuilderViewer.render(props.pageContent);
@@ -7282,15 +7373,46 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       }
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$u, [
-        page.value ? (openBlock(), createBlock$1(_sfc_main$1$1, {
+      return openBlock(), createElementBlock("div", _hoisted_1$t, [
+        page.value ? (openBlock(), createBlock$1(_sfc_main$2$1, {
           key: 0,
+          "is-mobile-page": _ctx.isMobilePage,
           page: page.value
-        }, null, 8, ["page"])) : createCommentVNode("", true)
+        }, null, 8, ["is-mobile-page", "page"])) : createCommentVNode("", true)
       ]);
     };
   }
 });
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
+  __name: "PbCustomWidget",
+  props: {
+    part: {},
+    dataWatcher: { type: Function },
+    dataProvider: { type: Function }
+  },
+  setup(__props) {
+    const props = __props;
+    const pageBuilder = usePageBuilder();
+    const comp = computed(() => pageBuilder.getCustomWidgetComponent(props.part));
+    const data = ref({});
+    const bind = computed(() => ({
+      ...props.part.properties || {},
+      placeholder: true,
+      ...data.value || {}
+    }));
+    const updateData = async () => {
+      data.value = await pageBuilder.provideCustomWidgetData(props.part);
+    };
+    onMounted(updateData);
+    watch(
+      () => pageBuilder.watchCustomWidgetData(props.part),
+      () => updateData()
+    );
+    return (_ctx, _cache) => {
+      return comp.value ? (openBlock(), createBlock$1(resolveDynamicComponent(comp.value), normalizeProps(mergeProps({ key: 0 }, bind.value)), null, 16)) : createCommentVNode("", true);
+    };
+  }
+});
 const PART_ID_KEY = "partId";
 const PART_NAME_KEY = "partName";
 const RESERVED_ATTRIBUTES = [PART_ID_KEY, PART_NAME_KEY];
@@ -7338,8 +7460,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) {
@@ -7409,14 +7532,20 @@ const syncProperties = (part, element) => {
     for (const name in attrs) {
       if (!RESERVED_ATTRIBUTES.includes(name)) {
         const value = attrs[name];
-        if (value)
-          part.properties[name] = value;
-        else
+        if (value) {
+          if (name.indexOf(".object") > 0) {
+            const _name = name.substring(0, name.length - ".object".length);
+            part.properties[_name] = JSON.parse(value);
+          } else {
+            part.properties[name] = value;
+          }
+        } else {
           delete part.properties[name];
+        }
       }
     }
     for (const name in part.properties) {
-      if (!attrs[name])
+      if (!attrs[name] && !attrs[`${name}.object`])
         delete part.properties[name];
     }
     if (Object.keys(part.properties).length === 0) {
@@ -7454,6 +7583,9 @@ const findChildById = (part, partId) => {
 const createPart = (partType, partName, properties) => {
   let part;
   switch (partType) {
+    case ROOT_TYPE:
+      part = new RootPart();
+      break;
     case PAGE_TYPE:
       part = new Page();
       break;
@@ -7511,28 +7643,15 @@ class Model2 {
     __publicField(this, "yjsRoot");
     __publicField(this, "undoManager");
     __publicField(this, "rootPart");
-    __publicField(this, "serializePageModel", (partIds) => {
-      const parts = this.findPartsByIds(partIds);
-      return partsToJsonString(parts);
-    });
     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);
@@ -7572,10 +7691,33 @@ class Model2 {
     });
     return parts;
   }
-  parsePageModel(json, keepPartId = false) {
+  serializeModel(mediaExtractor, providerExtractor) {
+    const root = partToJsonObject(this.rootPart);
+    if (mediaExtractor) {
+      root.media = mediaExtractor(this.rootPart);
+    }
+    if (providerExtractor) {
+      providerExtractor(root);
+    }
+    return JSON.stringify(root);
+  }
+  parseModel(json, keepPartId = false) {
+    const root = JSON.parse(json);
+    if (root.partType !== ROOT_TYPE)
+      throw Error("Invalid data format");
+    const rootPart = partFromJsonObject(root, keepPartId);
+    if (!rootPart)
+      throw new Error("Invalid data format");
+    return rootPart;
+  }
+  serializeParts(partIds) {
+    const parts = this.findPartsByIds(partIds);
+    return partsToJsonString(parts);
+  }
+  parseParts(json, keepPartId = false) {
     return partsFromJsonString(json, keepPartId);
   }
-  moveElements(partId, destPartId, destIndex, update) {
+  moveElements(partId, destPartId, destIndex, update, doNotChangeIndex) {
     var _a;
     if (partId === destPartId)
       return;
@@ -7583,7 +7725,7 @@ class Model2 {
     if (element) {
       if (((_a = element.parent) == null ? void 0 : _a.getAttribute(PART_ID_KEY)) === destPartId) {
         const index = this.getIndexOfElement(element);
-        if (index !== void 0 && index < destIndex)
+        if (!doNotChangeIndex && index !== void 0 && index < destIndex)
           destIndex--;
       }
       const parts = this.findPartsByIds([partId]);
@@ -7641,13 +7783,14 @@ class Model2 {
       if (element) {
         for (const name in param.properties) {
           if (!RESERVED_ATTRIBUTES.includes(name)) {
-            element.setAttribute(name, param.properties[name]);
+            this.setElementAttribute(element, name, param.properties[name]);
           }
         }
         if (param.removeOtherAttributes) {
           const allAttributes = element.getAttributes();
           for (const name in allAttributes) {
-            if (!RESERVED_ATTRIBUTES.includes(name) && !param.properties.hasOwnProperty(name)) {
+            const _name = name.indexOf(".object") > 0 ? name.substring(0, name.length - ".object".length) : name;
+            if (!RESERVED_ATTRIBUTES.includes(name) && !param.properties.hasOwnProperty(_name)) {
               element.removeAttribute(name);
             }
           }
@@ -7680,7 +7823,7 @@ class Model2 {
     if (part.properties) {
       for (const name in part.properties) {
         if (!RESERVED_ATTRIBUTES.includes(name)) {
-          node.setAttribute(name, part.properties[name]);
+          this.setElementAttribute(node, name, part.properties[name]);
         }
       }
     }
@@ -7692,6 +7835,21 @@ class Model2 {
     }
     return node;
   }
+  setElementAttribute(node, name, value) {
+    if (!value || typeof value === "string") {
+      node.setAttribute(name, value ? value : "");
+    } else if (typeof value === "object") {
+      node.setAttribute(`${name}.object`, JSON.stringify(value));
+    }
+  }
+  getElementAttribute(node, name) {
+    let value = node.getAttribute(name);
+    if (value)
+      return value;
+    value = node.getAttribute(`${name}.object`);
+    if (value)
+      return JSON.parse(value);
+  }
   getIndexOfElement(element) {
     if (element.parent instanceof YXmlElement) {
       let index = 0;
@@ -7733,7 +7891,7 @@ class Model2 {
         const properties = {};
         event.changes.keys.forEach((_, key) => {
           if (!RESERVED_ATTRIBUTES.includes(key)) {
-            properties[key] = element.getAttribute(key) || "";
+            properties[key] = this.getElementAttribute(element, key) || "";
           }
         });
         (_a = result.updated) == null ? void 0 : _a.push({ element, properties });
@@ -7769,20 +7927,6 @@ class PartManager {
       }
     }
   }
-  getLocalDesignPartPropertyDefinitions(partName) {
-    let properties;
-    const partDef = this.getPartDefinition(partName);
-    if (!partDef || !partDef.propertyGroups)
-      return;
-    for (const group of partDef.propertyGroups) {
-      for (const property of group.properties) {
-        if (property.localized) {
-          properties = [...properties || [], property];
-        }
-      }
-    }
-    return properties;
-  }
   createPartComponent(part) {
     if (part) {
       const def = this.getPartDefinition(part.partName);
@@ -7860,16 +8004,23 @@ class PartManager {
 }
 const defaultPartPropertyEditors = () => {
   return {
-    "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-Bk0WJxA0.js")),
-    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-DNdXl-Tr.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-BMeNUGm8.js")),
-    "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-BJovN1su.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-DA92v7AE.js")),
-    "product": () => defineAsyncComponent(() => import("./PbPropertyEditorProduct-CkydxTwD.js"))
+    "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-Dgp_AVOD.js")),
+    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-DmM_LMjC.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-CT3vTbYY.js")),
+    "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-CWedbXJI.js")),
+    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-BFMkFOYX.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-BQhiQyNM.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-DZw8qbJH.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
-  const values = parts.map((part) => part.getProperty(propertyName) || "");
+  if (parts.length === 1) {
+    return parts[0].getProperty(propertyName);
+  }
+  const values = parts.map((part) => {
+    const val = part.getProperty(propertyName);
+    return val && typeof val === "string" ? val : "";
+  });
   const unique = values.filter((val, index) => values.indexOf(val) === index);
   return unique.length === 1 ? unique[0] : void 0;
 };
@@ -8089,22 +8240,22 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$p = {};
-const _hoisted_1$t = { class: "pb-add-widget-button" };
-const _hoisted_2$k = /* @__PURE__ */ createElementVNode("span", { class: "icon material-icons-outlined" }, "add_box", -1);
+const _sfc_main$o = {};
+const _hoisted_1$s = { class: "pb-add-widget-button" };
+const _hoisted_2$i = /* @__PURE__ */ createElementVNode("span", { class: "icon material-icons-outlined" }, "add_box", -1);
 const _hoisted_3$f = /* @__PURE__ */ createElementVNode("span", { class: "text" }, "Add Widget", -1);
 const _hoisted_4$c = [
-  _hoisted_2$k,
+  _hoisted_2$i,
   _hoisted_3$f
 ];
 function _sfc_render$1(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$t, [
+  return openBlock(), createElementBlock("div", _hoisted_1$s, [
     createElementVNode("button", {
       onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("add-widget", $event))
     }, _hoisted_4$c)
   ]);
 }
-const PbAddWidgetButton = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$1]]);
+const PbAddWidgetButton = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$1]]);
 const MOUSE_TRACKER_KEY = "mouseTracker";
 const MOUSE_TRACKER_NOT_FOUND = "MouseTracker not found";
 class MouseTracker {
@@ -8135,12 +8286,12 @@ const useMouseTracker = () => {
     throw Error(MOUSE_TRACKER_NOT_FOUND);
   return mouseTracker;
 };
-const _hoisted_1$s = ["data-model-id", "draggable"];
-const _hoisted_2$j = {
+const _hoisted_1$r = ["data-model-id", "draggable"];
+const _hoisted_2$h = {
   key: 1,
   class: "children"
 };
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "PbWidget",
   props: {
     part: {}
@@ -8584,13 +8735,15 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       }, properties.value), [
         thisComponent.value ? (openBlock(), createBlock$1(resolveDynamicComponent(thisComponent.value), {
           key: 0,
-          part: _ctx.part
+          part: _ctx.part,
+          placeholder: true
         }, null, 8, ["part"])) : createCommentVNode("", true),
-        childComponents.value && childComponents.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$j, [
+        childComponents.value && childComponents.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$h, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(childComponents.value, (child) => {
             return openBlock(), createBlock$1(resolveDynamicComponent(child.component), {
               key: child.part.partId,
-              part: child.part
+              part: child.part,
+              placeholder: true
             }, null, 8, ["part"]);
           }), 128))
         ])) : createCommentVNode("", true),
@@ -8604,14 +8757,14 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           class: "resize-handle",
           onMousedown: _resize_mousedown
         }, null, 32)) : createCommentVNode("", true)
-      ], 16, _hoisted_1$s)), [
+      ], 16, _hoisted_1$r)), [
         [unref(vPartHandler), { pageBuilder: unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
       ]);
     };
   }
 });
-const _hoisted_1$r = ["data-model-id"];
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _hoisted_1$q = ["data-model-id"];
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "PbBlock",
   props: {
     part: {}
@@ -8801,19 +8954,19 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
           onAddWidget: addWidget
         })) : createCommentVNode("", true),
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.part.children, (child) => {
-          return openBlock(), createBlock$1(_sfc_main$o, {
+          return openBlock(), createBlock$1(_sfc_main$n, {
             key: child.partId,
             part: child
           }, null, 8, ["part"]);
         }), 128))
-      ], 16, _hoisted_1$r)), [
+      ], 16, _hoisted_1$q)), [
         [unref(vPartHandler), { pageBuilder: unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
       ]);
     };
   }
 });
-const _hoisted_1$q = { class: "pb-block" };
-const _hoisted_2$i = /* @__PURE__ */ createElementVNode("div", {
+const _hoisted_1$p = { class: "pb-block" };
+const _hoisted_2$g = /* @__PURE__ */ createElementVNode("div", {
   class: "pb-widget",
   style: { "margin": "0 auto" }
 }, [
@@ -8822,21 +8975,21 @@ const _hoisted_2$i = /* @__PURE__ */ createElementVNode("div", {
   ])
 ], -1);
 const _hoisted_3$e = [
-  _hoisted_2$i
+  _hoisted_2$g
 ];
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "PbLoginDepart",
   props: {
     part: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$q, _hoisted_3$e);
+      return openBlock(), createElementBlock("div", _hoisted_1$p, _hoisted_3$e);
     };
   }
 });
-const _hoisted_1$p = ["data-model-id"];
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _hoisted_1$o = ["data-model-id"];
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "PbSection",
   props: {
     part: {}
@@ -8854,14 +9007,8 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     });
     const properties = computed(() => ({ style: props.part.getStyles() }));
     const disabled = computed(() => {
-      var _a, _b, _c;
-      if (["static"].includes(((_a = props.part.properties) == null ? void 0 : _a.sectionType) || ""))
-        return true;
-      if (pageBuilder.editMode === "local" && ["GlobalDesignPart"].includes(((_b = props.part.properties) == null ? void 0 : _b.sectionType) || ""))
-        return true;
-      if (pageBuilder.editMode === "global" && ["LocalDesignPart", "LocalMarketingPart"].includes(((_c = props.part.properties) == null ? void 0 : _c.sectionType) || ""))
-        return true;
-      return false;
+      var _a;
+      return ["static"].includes(((_a = props.part.properties) == null ? void 0 : _a.sectionType) || "");
     });
     const addWidget = () => {
       pageBuilder.commandRegistry.executeCommand(OpenAddWidgetModalCommand.COMMAND_ID);
@@ -8947,13 +9094,13 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
         style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
       }, properties.value), [
         ((_b = _ctx.part.properties) == null ? void 0 : _b.sectionType) === "static" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-          ((_c = _ctx.part.properties) == null ? void 0 : _c.name) === "Login Design Part" ? (openBlock(), createBlock$1(_sfc_main$m, {
+          ((_c = _ctx.part.properties) == null ? void 0 : _c.name) === "Login Design Part" ? (openBlock(), createBlock$1(_sfc_main$l, {
             key: 0,
             part: _ctx.part
           }, null, 8, ["part"])) : createCommentVNode("", true)
         ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
           _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.part.children, (block) => {
-            return openBlock(), createBlock$1(_sfc_main$n, {
+            return openBlock(), createBlock$1(_sfc_main$m, {
               key: block.partId,
               part: block
             }, null, 8, ["part"]);
@@ -8962,23 +9109,29 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             onAddWidget: addWidget
           }))
         ], 64))
-      ], 16, _hoisted_1$p)), [
+      ], 16, _hoisted_1$o)), [
         [unref(vPartHandler), { pageBuilder: unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
       ]);
     };
   }
 });
-const _hoisted_1$o = { class: "group-editor group-editor-position" };
-const _hoisted_2$h = { class: "flex-align-center" };
-const _hoisted_3$d = /* @__PURE__ */ createElementVNode("div", { class: "label" }, [
-  /* @__PURE__ */ createElementVNode("label", null, "Position")
+const _hoisted_1$n = { class: "group-editor group-editor-position" };
+const _hoisted_2$f = { class: "flex-align-center" };
+const _hoisted_3$d = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
+  /* @__PURE__ */ createElementVNode("label", { textContent: "Position" })
 ], -1);
 const _hoisted_4$b = { class: "flex-grow-1" };
-const _hoisted_5$7 = /* @__PURE__ */ createElementVNode("span", null, "L", -1);
-const _hoisted_6$6 = /* @__PURE__ */ createElementVNode("span", { class: "ml-8" }, "R", -1);
-const _hoisted_7$4 = /* @__PURE__ */ createElementVNode("span", { class: "ml-8" }, "T", -1);
-const _hoisted_8$4 = /* @__PURE__ */ createElementVNode("span", { class: "ml-8" }, "B", -1);
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _hoisted_5$5 = { class: "bg-gray-100 py-5 rounded-8" };
+const _hoisted_6$4 = { class: "text-center" };
+const _hoisted_7$4 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
+const _hoisted_8$4 = /* @__PURE__ */ createElementVNode("div", {
+  class: "d-inline-block text-center text-gray-300",
+  style: { "width": "30%", "font-size": "12px" }
+}, [
+  /* @__PURE__ */ createElementVNode("span", { class: "font-icon" }, "add")
+], -1);
+const _hoisted_9$4 = { class: "text-center" };
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorPosition",
   props: {
     group: {},
@@ -9002,39 +9155,46 @@ 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$o, [
-        createElementVNode("div", _hoisted_2$h, [
+      return openBlock(), createElementBlock("div", _hoisted_1$n, [
+        createElementVNode("div", _hoisted_2$f, [
           _hoisted_3$d,
           createElementVNode("div", _hoisted_4$b, [
-            createElementVNode("div", null, [
-              _hoisted_5$7,
-              createVNode(unref(BSTextInput), {
-                "model-value": left.value,
-                class: "ml-4",
-                width: "4em",
-                "onUpdate:modelValue": updateLeft
-              }, null, 8, ["model-value"]),
-              _hoisted_6$6,
-              createVNode(unref(BSTextInput), {
-                "model-value": right.value,
-                class: "ml-4",
-                width: "4em",
-                "onUpdate:modelValue": updateRight
-              }, null, 8, ["model-value"]),
-              _hoisted_7$4,
-              createVNode(unref(BSTextInput), {
-                "model-value": top.value,
-                class: "ml-4",
-                width: "4em",
-                "onUpdate:modelValue": updateTop
-              }, null, 8, ["model-value"]),
-              _hoisted_8$4,
-              createVNode(unref(BSTextInput), {
-                "model-value": bottom.value,
-                class: "ml-4",
-                width: "4em",
-                "onUpdate:modelValue": updateBottom
-              }, null, 8, ["model-value"])
+            createElementVNode("div", _hoisted_5$5, [
+              createElementVNode("div", _hoisted_6$4, [
+                createVNode(unref(BSTextInput), {
+                  "model-value": top.value,
+                  class: "ml-4",
+                  prefix: "T",
+                  width: "30%",
+                  "onUpdate:modelValue": updateTop
+                }, null, 8, ["model-value"])
+              ]),
+              createElementVNode("div", _hoisted_7$4, [
+                createVNode(unref(BSTextInput), {
+                  "model-value": left.value,
+                  class: "ml-4",
+                  prefix: "L",
+                  width: "30%",
+                  "onUpdate:modelValue": updateLeft
+                }, null, 8, ["model-value"]),
+                _hoisted_8$4,
+                createVNode(unref(BSTextInput), {
+                  "model-value": right.value,
+                  class: "ml-4",
+                  prefix: "R",
+                  width: "30%",
+                  "onUpdate:modelValue": updateRight
+                }, null, 8, ["model-value"])
+              ]),
+              createElementVNode("div", _hoisted_9$4, [
+                createVNode(unref(BSTextInput), {
+                  "model-value": bottom.value,
+                  class: "ml-4",
+                  prefix: "B",
+                  width: "30%",
+                  "onUpdate:modelValue": updateBottom
+                }, null, 8, ["model-value"])
+              ])
             ])
           ])
         ])
@@ -9042,15 +9202,13 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$n = { class: "group-editor group-editor-size" };
-const _hoisted_2$g = { class: "flex-align-center" };
-const _hoisted_3$c = /* @__PURE__ */ createElementVNode("div", { class: "label" }, [
-  /* @__PURE__ */ createElementVNode("label", null, "Size")
+const _hoisted_1$m = { class: "group-editor group-editor-size" };
+const _hoisted_2$e = { class: "flex-align-center" };
+const _hoisted_3$c = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
+  /* @__PURE__ */ createElementVNode("label", { textContent: "Size" })
 ], -1);
-const _hoisted_4$a = { class: "flex-grow-1" };
-const _hoisted_5$6 = /* @__PURE__ */ createElementVNode("span", null, "W", -1);
-const _hoisted_6$5 = /* @__PURE__ */ createElementVNode("span", { class: "ml-16" }, "H", -1);
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _hoisted_4$a = { class: "flex-grow-1 bs-layout-horizontal" };
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorSize",
   props: {
     group: {},
@@ -9070,22 +9228,20 @@ 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$n, [
-        createElementVNode("div", _hoisted_2$g, [
+      return openBlock(), createElementBlock("div", _hoisted_1$m, [
+        createElementVNode("div", _hoisted_2$e, [
           _hoisted_3$c,
           createElementVNode("div", _hoisted_4$a, [
-            _hoisted_5$6,
             createVNode(unref(BSTextInput), {
               "model-value": width.value,
-              class: "ml-4",
-              width: "5em",
+              class: "flex-grow-1 mr-2",
+              prefix: "W",
               "onUpdate:modelValue": updateWidth
             }, null, 8, ["model-value"]),
-            _hoisted_6$5,
             createVNode(unref(BSTextInput), {
               "model-value": height.value,
-              class: "ml-4",
-              width: "5em",
+              class: "flex-grow-1 ml-2",
+              prefix: "H",
               "onUpdate:modelValue": updateHeight
             }, null, 8, ["model-value"])
           ])
@@ -9251,8 +9407,8 @@ var script$4 = {
     }
   }
 };
-const _hoisted_1$m = { class: "vc-alpha" };
-const _hoisted_2$f = { class: "vc-alpha-checkboard-wrap" };
+const _hoisted_1$l = { class: "vc-alpha" };
+const _hoisted_2$d = { class: "vc-alpha-checkboard-wrap" };
 const _hoisted_3$b = /* @__PURE__ */ createElementVNode(
   "div",
   { class: "vc-alpha-picker" },
@@ -9265,8 +9421,8 @@ const _hoisted_4$9 = [
 ];
 function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Checkboard = resolveComponent("Checkboard");
-  return openBlock(), createElementBlock("div", _hoisted_1$m, [
-    createElementVNode("div", _hoisted_2$f, [
+  return openBlock(), createElementBlock("div", _hoisted_1$l, [
+    createElementVNode("div", _hoisted_2$d, [
       createVNode(_component_Checkboard)
     ]),
     createElementVNode(
@@ -10369,12 +10525,12 @@ var script$3 = {
     // }
   }
 };
-const _hoisted_1$l = { class: "vc-editable-input" };
-const _hoisted_2$e = ["aria-labelledby"];
+const _hoisted_1$k = { class: "vc-editable-input" };
+const _hoisted_2$c = ["aria-labelledby"];
 const _hoisted_3$a = ["id", "for"];
 const _hoisted_4$8 = { class: "vc-input__desc" };
 function render$3(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$l, [
+  return openBlock(), createElementBlock("div", _hoisted_1$k, [
     withDirectives(createElementVNode("input", {
       ref: "input",
       "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $options.val = $event),
@@ -10382,7 +10538,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
       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$e), [
+    }, null, 40, _hoisted_2$c), [
       [vModelText, $options.val]
     ]),
     createElementVNode("span", {
@@ -10469,14 +10625,14 @@ var script$2 = {
     }
   }
 };
-const _hoisted_1$k = /* @__PURE__ */ createElementVNode(
+const _hoisted_1$j = /* @__PURE__ */ createElementVNode(
   "div",
   { class: "vc-saturation--white" },
   null,
   -1
   /* HOISTED */
 );
-const _hoisted_2$d = /* @__PURE__ */ createElementVNode(
+const _hoisted_2$b = /* @__PURE__ */ createElementVNode(
   "div",
   { class: "vc-saturation--black" },
   null,
@@ -10505,8 +10661,8 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
       onTouchstart: _cache[2] || (_cache[2] = (...args) => $options.handleChange && $options.handleChange(...args))
     },
     [
-      _hoisted_1$k,
-      _hoisted_2$d,
+      _hoisted_1$j,
+      _hoisted_2$b,
       createElementVNode(
         "div",
         {
@@ -10654,8 +10810,8 @@ var script$1 = {
     }
   }
 };
-const _hoisted_1$j = ["aria-valuenow"];
-const _hoisted_2$c = /* @__PURE__ */ createElementVNode(
+const _hoisted_1$i = ["aria-valuenow"];
+const _hoisted_2$a = /* @__PURE__ */ createElementVNode(
   "div",
   { class: "vc-hue-picker" },
   null,
@@ -10663,7 +10819,7 @@ const _hoisted_2$c = /* @__PURE__ */ createElementVNode(
   /* HOISTED */
 );
 const _hoisted_3$8 = [
-  _hoisted_2$c
+  _hoisted_2$a
 ];
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
@@ -10694,7 +10850,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
           4
           /* STYLE */
         )
-      ], 40, _hoisted_1$j)
+      ], 40, _hoisted_1$i)
     ],
     2
     /* CLASS */
@@ -10790,21 +10946,21 @@ var script = {
     }
   }
 };
-const _hoisted_1$i = { class: "vc-sketch-saturation-wrap" };
-const _hoisted_2$b = { class: "vc-sketch-controls" };
+const _hoisted_1$h = { class: "vc-sketch-saturation-wrap" };
+const _hoisted_2$9 = { class: "vc-sketch-controls" };
 const _hoisted_3$7 = { class: "vc-sketch-sliders" };
 const _hoisted_4$6 = { class: "vc-sketch-hue-wrap" };
-const _hoisted_5$5 = {
+const _hoisted_5$4 = {
   key: 0,
   class: "vc-sketch-alpha-wrap"
 };
-const _hoisted_6$4 = { class: "vc-sketch-color-wrap" };
+const _hoisted_6$3 = { class: "vc-sketch-color-wrap" };
 const _hoisted_7$3 = ["aria-label"];
 const _hoisted_8$3 = {
   key: 0,
   class: "vc-sketch-field"
 };
-const _hoisted_9$1 = { class: "vc-sketch-field--double" };
+const _hoisted_9$3 = { class: "vc-sketch-field--double" };
 const _hoisted_10$1 = { class: "vc-sketch-field--single" };
 const _hoisted_11$1 = { class: "vc-sketch-field--single" };
 const _hoisted_12$1 = { class: "vc-sketch-field--single" };
@@ -10817,8 +10973,8 @@ const _hoisted_14$1 = {
   role: "group",
   "aria-label": "A color preset, pick one to set as current color"
 };
-const _hoisted_15 = ["aria-label", "onClick"];
-const _hoisted_16 = ["aria-label", "onClick"];
+const _hoisted_15$1 = ["aria-label", "onClick"];
+const _hoisted_16$1 = ["aria-label", "onClick"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Saturation = resolveComponent("Saturation");
   const _component_Hue = resolveComponent("Hue");
@@ -10833,13 +10989,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       class: normalizeClass(["vc-sketch", [$props.disableAlpha ? "vc-sketch__disable-alpha" : ""]])
     },
     [
-      createElementVNode("div", _hoisted_1$i, [
+      createElementVNode("div", _hoisted_1$h, [
         createVNode(_component_Saturation, {
           value: _ctx.colors,
           onChange: $options.childChange
         }, null, 8, ["value", "onChange"])
       ]),
-      createElementVNode("div", _hoisted_2$b, [
+      createElementVNode("div", _hoisted_2$9, [
         createElementVNode("div", _hoisted_3$7, [
           createElementVNode("div", _hoisted_4$6, [
             createVNode(_component_Hue, {
@@ -10847,14 +11003,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               onChange: $options.childChange
             }, null, 8, ["value", "onChange"])
           ]),
-          !$props.disableAlpha ? (openBlock(), createElementBlock("div", _hoisted_5$5, [
+          !$props.disableAlpha ? (openBlock(), createElementBlock("div", _hoisted_5$4, [
             createVNode(_component_Alpha, {
               value: _ctx.colors,
               onChange: $options.childChange
             }, null, 8, ["value", "onChange"])
           ])) : createCommentVNode("v-if", true)
         ]),
-        createElementVNode("div", _hoisted_6$4, [
+        createElementVNode("div", _hoisted_6$3, [
           createElementVNode("div", {
             "aria-label": `Current color is ${$options.activeColor}`,
             class: "vc-sketch-active-color",
@@ -10865,7 +11021,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       !$props.disableFields ? (openBlock(), createElementBlock("div", _hoisted_8$3, [
         createCommentVNode(" rgba "),
-        createElementVNode("div", _hoisted_9$1, [
+        createElementVNode("div", _hoisted_9$3, [
           createVNode(_component_EdIn, {
             label: "hex",
             value: $options.hex,
@@ -10918,14 +11074,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   "aria-label": `Color:${c}`,
                   style: normalizeStyle({ background: c }),
                   onClick: ($event) => $options.handlePreset(c)
-                }, null, 12, _hoisted_15)) : (openBlock(), createElementBlock("div", {
+                }, null, 12, _hoisted_15$1)) : (openBlock(), createElementBlock("div", {
                   key: c,
                   "aria-label": `Color:${c}`,
                   class: "vc-sketch-presets-color",
                   onClick: ($event) => $options.handlePreset(c)
                 }, [
                   createVNode(_component_Checkboard)
-                ], 8, _hoisted_16))
+                ], 8, _hoisted_16$1))
               ],
               64
               /* STABLE_FRAGMENT */
@@ -10945,7 +11101,7 @@ styleInject(css_248z);
 script.render = render;
 script.__file = "src/components/sketch/sketch.vue";
 script.install = install;
-const _sfc_main$i = defineComponent({
+const _sfc_main$h = defineComponent({
   name: "PbColorPicker",
   components: {
     Sketch: script
@@ -10962,7 +11118,14 @@ const _sfc_main$i = defineComponent({
   },
   setup(props, { emit }) {
     const color = ref(props.value);
-    const appliedColor = computed(() => color.value);
+    const appliedColor = computed(() => {
+      if (typeof color.value === "string")
+        return color.value;
+      else if (typeof color.value === "object" && color.value.hasOwnProperty("hex"))
+        return color.value.hex;
+      else
+        return;
+    });
     const isShowColorPicker = ref(false);
     const toggle = (value) => {
       isShowColorPicker.value = value !== void 0 ? value : !isShowColorPicker.value;
@@ -10975,18 +11138,17 @@ const _sfc_main$i = defineComponent({
       }
     );
     watch(
-      color,
+      () => color.value,
       () => setTimeout(() => {
         if (appliedColor.value)
           emit("change-color", appliedColor.value);
-      }),
+      }, 100),
       { deep: true }
     );
     watch(
       () => props.value,
       (value) => {
-        if (typeof value === "string")
-          color.value = value;
+        color.value = value;
       },
       { deep: true }
     );
@@ -11003,10 +11165,10 @@ const _sfc_main$i = defineComponent({
     };
   }
 });
-const _hoisted_1$h = { class: "buttons" };
-const _hoisted_2$a = /* @__PURE__ */ createElementVNode("i", { class: "material-icons-outlined" }, "delete", -1);
+const _hoisted_1$g = { class: "buttons" };
+const _hoisted_2$8 = /* @__PURE__ */ createElementVNode("i", { class: "material-icons-outlined" }, "delete", -1);
 const _hoisted_3$6 = [
-  _hoisted_2$a
+  _hoisted_2$8
 ];
 const _hoisted_4$5 = { class: "sketch-wrap" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -11017,7 +11179,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     onKeydown: _cache[3] || (_cache[3] = withModifiers(() => {
     }, ["stop"]))
   }, [
-    createElementVNode("div", _hoisted_1$h, [
+    createElementVNode("div", _hoisted_1$g, [
       renderSlot(_ctx.$slots, "button", normalizeProps(guardReactiveProps({ toggle: _ctx.toggle, color: _ctx.color })), () => [
         createElementVNode("button", {
           class: normalizeClass([{ none: !_ctx.color }, "pb-button picker-button"]),
@@ -11043,15 +11205,15 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     [_directive_click_outside, () => _ctx.toggle(false)]
   ]);
 }
-const PbColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render]]);
-const _hoisted_1$g = { class: "group-editor group-editor-background" };
-const _hoisted_2$9 = { class: "flex-align-center" };
-const _hoisted_3$5 = /* @__PURE__ */ createElementVNode("div", { class: "label" }, [
-  /* @__PURE__ */ createElementVNode("label", null, "Background")
+const PbColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render]]);
+const _hoisted_1$f = { class: "group-editor group-editor-background" };
+const _hoisted_2$7 = { class: "flex-align-center" };
+const _hoisted_3$5 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
+  /* @__PURE__ */ createElementVNode("label", { textContent: "Background" })
 ], -1);
 const _hoisted_4$4 = { class: "bs-layout-horizontal" };
-const _hoisted_5$4 = { class: "color" };
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _hoisted_5$3 = { class: "color" };
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorBackground",
   props: {
     group: {},
@@ -11060,7 +11222,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const pageBuilder = usePageBuilderEditor();
-    useModal();
+    const modal = useModal();
     const color = computed(() => getPropertyValueOfParts(props.selectedParts, "backgroundColor"));
     const emptyColor = () => {
     };
@@ -11074,19 +11236,19 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
     const updateColor = (value) => updatePropertyValue({ backgroundColor: value });
     const selectImage = () => {
-      PageBuilderEditorEvent.emit.requestImage({
-        pageBuilderId: pageBuilder.instanceId,
-        callback: (url) => {
+      const imageProvider = pageBuilder.getProvider("imageProvider");
+      if (imageProvider) {
+        imageProvider({ modal }, (url) => {
           updatePropertyValue({ backgroundImage: url });
-        }
-      });
+        });
+      }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$g, [
-        createElementVNode("div", _hoisted_2$9, [
+      return openBlock(), createElementBlock("div", _hoisted_1$f, [
+        createElementVNode("div", _hoisted_2$7, [
           _hoisted_3$5,
           createElementVNode("div", _hoisted_4$4, [
-            createElementVNode("div", _hoisted_5$4, [
+            createElementVNode("div", _hoisted_5$3, [
               createVNode(PbColorPicker, {
                 value: color.value,
                 "hide-delete": "",
@@ -11111,23 +11273,44 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$f = { class: "group-editor group-editor-border" };
-const _hoisted_2$8 = { class: "flex-align-center" };
-const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("div", { class: "label" }, [
-  /* @__PURE__ */ createElementVNode("label", null, "Border")
+const TopLeftCornerIcon = "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(270)'%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 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_2$6 = { class: "flex-align-center" };
+const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
+  /* @__PURE__ */ createElementVNode("label", { textContent: "Border" })
 ], -1);
-const _hoisted_4$3 = { class: "color" };
-const _hoisted_5$3 = { class: "bs-layout-horizontal mt-8" };
-const _hoisted_6$3 = /* @__PURE__ */ createElementVNode("span", null, "WL", -1);
-const _hoisted_7$2 = /* @__PURE__ */ createElementVNode("span", { class: "ml-8" }, "WR", -1);
-const _hoisted_8$2 = /* @__PURE__ */ createElementVNode("span", { class: "ml-8" }, "WT", -1);
-const _hoisted_9 = /* @__PURE__ */ createElementVNode("span", { class: "ml-8" }, "WB", -1);
-const _hoisted_10 = { class: "bs-layout-horizontal mt-8" };
-const _hoisted_11 = /* @__PURE__ */ createElementVNode("span", null, "RTL", -1);
-const _hoisted_12 = /* @__PURE__ */ createElementVNode("span", { class: "ml-8" }, "RTR", -1);
-const _hoisted_13 = /* @__PURE__ */ createElementVNode("span", { class: "ml-8" }, "RBL", -1);
-const _hoisted_14 = /* @__PURE__ */ createElementVNode("span", { class: "ml-8" }, "RBR", -1);
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _hoisted_4$3 = { class: "" };
+const _hoisted_5$2 = /* @__PURE__ */ createElementVNode("div", { class: "sub-title" }, [
+  /* @__PURE__ */ createElementVNode("label", { textContent: "Color" })
+], -1);
+const _hoisted_6$2 = { class: "color" };
+const _hoisted_7$2 = { class: "mt-8" };
+const _hoisted_8$2 = /* @__PURE__ */ createElementVNode("div", { class: "sub-title" }, [
+  /* @__PURE__ */ createElementVNode("label", { textContent: "Border Width" })
+], -1);
+const _hoisted_9$2 = { class: "flex-grow-1 mt-4" };
+const _hoisted_10 = { class: "bg-gray-100 py-5 rounded-8" };
+const _hoisted_11 = { class: "text-center" };
+const _hoisted_12 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
+const _hoisted_13 = /* @__PURE__ */ createElementVNode("div", {
+  class: "d-inline-block text-center text-gray-300",
+  style: { "width": "30%", "font-size": "12px" }
+}, [
+  /* @__PURE__ */ createElementVNode("span", { class: "font-icon" }, "add")
+], -1);
+const _hoisted_14 = { class: "text-center" };
+const _hoisted_15 = { class: "mt-8" };
+const _hoisted_16 = /* @__PURE__ */ createElementVNode("div", { class: "sub-title" }, [
+  /* @__PURE__ */ createElementVNode("label", { textContent: "Border Radius" })
+], -1);
+const _hoisted_17 = { class: "flex-grow-1 mt-4" };
+const _hoisted_18 = { class: "bg-gray-100 py-5 rounded-8" };
+const _hoisted_19 = { class: "" };
+const _hoisted_20 = { class: "mt-2" };
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorBorder",
   props: {
     group: {},
@@ -11140,7 +11323,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     const emptyColor = () => {
     };
     const borderLeftWidth = computed(() => getPropertyValueOfParts(props.selectedParts, "borderLeftWidth"));
-    const borderRightWidth = computed(() => getPropertyValueOfParts(props.selectedParts, "borderRigthWidth"));
+    const borderRightWidth = computed(() => getPropertyValueOfParts(props.selectedParts, "borderRightWidth"));
     const borderTopWidth = computed(() => getPropertyValueOfParts(props.selectedParts, "borderTopWidth"));
     const borderBottomWidth = computed(() => getPropertyValueOfParts(props.selectedParts, "borderBottomWidth"));
     const borderTopLeftRadius = computed(() => getPropertyValueOfParts(props.selectedParts, "borderTopLeftRadius"));
@@ -11165,87 +11348,108 @@ 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$f, [
-        createElementVNode("div", _hoisted_2$8, [
+      return openBlock(), createElementBlock("div", _hoisted_1$e, [
+        createElementVNode("div", _hoisted_2$6, [
           _hoisted_3$4,
           createElementVNode("div", _hoisted_4$3, [
-            createVNode(PbColorPicker, {
-              value: color.value,
-              "hide-delete": "",
-              onEmpty: _cache[0] || (_cache[0] = ($event) => emptyColor()),
-              onHide: _cache[1] || (_cache[1] = ($event) => updateColor($event)),
-              onShow: saveOriginalColor,
-              onChangeColor: _cache[2] || (_cache[2] = ($event) => updateColor($event))
-            }, null, 8, ["value"]),
-            createVNode(unref(BSTextInput), {
-              "model-value": color.value,
-              class: "ml-4",
-              width: "",
-              "onUpdate:modelValue": updateColor
-            }, null, 8, ["model-value"])
-          ]),
-          createElementVNode("div", _hoisted_5$3, [
-            createElementVNode("div", null, [
-              _hoisted_6$3,
-              createVNode(unref(BSTextInput), {
-                "model-value": borderLeftWidth.value,
-                class: "ml-4",
-                width: "3em",
-                "onUpdate:modelValue": updateBorderLeftWidth
-              }, null, 8, ["model-value"]),
-              _hoisted_7$2,
-              createVNode(unref(BSTextInput), {
-                "model-value": borderRightWidth.value,
-                class: "ml-4",
-                width: "3em",
-                "onUpdate:modelValue": updateBorderRightWidth
-              }, null, 8, ["model-value"]),
-              _hoisted_8$2,
-              createVNode(unref(BSTextInput), {
-                "model-value": borderTopWidth.value,
-                class: "ml-4",
-                width: "3em",
-                "onUpdate:modelValue": updateBorderTopWidth
-              }, null, 8, ["model-value"]),
-              _hoisted_9,
+            _hoisted_5$2,
+            createElementVNode("div", _hoisted_6$2, [
+              createVNode(PbColorPicker, {
+                value: color.value,
+                "hide-delete": "",
+                onEmpty: _cache[0] || (_cache[0] = ($event) => emptyColor()),
+                onHide: _cache[1] || (_cache[1] = ($event) => updateColor($event)),
+                onShow: saveOriginalColor,
+                onChangeColor: _cache[2] || (_cache[2] = ($event) => updateColor($event))
+              }, null, 8, ["value"]),
               createVNode(unref(BSTextInput), {
-                "model-value": borderBottomWidth.value,
+                "model-value": color.value,
+                prefix: { type: "font-icon", value: "palette" },
                 class: "ml-4",
-                width: "3em",
-                "onUpdate:modelValue": updateBorderBottomWidth
+                width: "",
+                "onUpdate:modelValue": updateColor
               }, null, 8, ["model-value"])
             ])
           ]),
-          createElementVNode("div", _hoisted_10, [
-            createElementVNode("div", null, [
-              _hoisted_11,
-              createVNode(unref(BSTextInput), {
-                "model-value": borderTopLeftRadius.value,
-                class: "ml-4",
-                width: "3em",
-                "onUpdate:modelValue": updateBorderTopLeftRadius
-              }, null, 8, ["model-value"]),
-              _hoisted_12,
-              createVNode(unref(BSTextInput), {
-                "model-value": borderTopRightRadius.value,
-                class: "ml-4",
-                width: "3em",
-                "onUpdate:modelValue": updateBorderTopRightRadius
-              }, null, 8, ["model-value"]),
-              _hoisted_13,
-              createVNode(unref(BSTextInput), {
-                "model-value": borderBottomLeftRadius.value,
-                class: "ml-4",
-                width: "3em",
-                "onUpdate:modelValue": updateBorderBottomLeftRadius
-              }, null, 8, ["model-value"]),
-              _hoisted_14,
-              createVNode(unref(BSTextInput), {
-                "model-value": borderBottomRightRadius.value,
-                class: "ml-4",
-                width: "3em",
-                "onUpdate:modelValue": updateBorderBottomRightRadius
-              }, null, 8, ["model-value"])
+          createElementVNode("div", _hoisted_7$2, [
+            _hoisted_8$2,
+            createElementVNode("div", _hoisted_9$2, [
+              createElementVNode("div", _hoisted_10, [
+                createElementVNode("div", _hoisted_11, [
+                  createVNode(unref(BSTextInput), {
+                    "model-value": borderTopWidth.value,
+                    class: "ml-4",
+                    prefix: "T",
+                    width: "30%",
+                    "onUpdate:modelValue": updateBorderTopWidth
+                  }, null, 8, ["model-value"])
+                ]),
+                createElementVNode("div", _hoisted_12, [
+                  createVNode(unref(BSTextInput), {
+                    "model-value": borderLeftWidth.value,
+                    class: "ml-4",
+                    prefix: "L",
+                    width: "30%",
+                    "onUpdate:modelValue": updateBorderLeftWidth
+                  }, null, 8, ["model-value"]),
+                  _hoisted_13,
+                  createVNode(unref(BSTextInput), {
+                    "model-value": borderRightWidth.value,
+                    class: "ml-4",
+                    prefix: "R",
+                    width: "30%",
+                    "onUpdate:modelValue": updateBorderRightWidth
+                  }, null, 8, ["model-value"])
+                ]),
+                createElementVNode("div", _hoisted_14, [
+                  createVNode(unref(BSTextInput), {
+                    "model-value": borderBottomWidth.value,
+                    class: "ml-4",
+                    prefix: "B",
+                    width: "30%",
+                    "onUpdate:modelValue": updateBorderBottomWidth
+                  }, null, 8, ["model-value"])
+                ])
+              ])
+            ])
+          ]),
+          createElementVNode("div", _hoisted_15, [
+            _hoisted_16,
+            createElementVNode("div", _hoisted_17, [
+              createElementVNode("div", _hoisted_18, [
+                createElementVNode("div", _hoisted_19, [
+                  createVNode(unref(BSTextInput), {
+                    "model-value": borderTopLeftRadius.value,
+                    prefix: { type: "image-url", value: unref(TopLeftCornerIcon) },
+                    class: "ml-4",
+                    width: "48%",
+                    "onUpdate:modelValue": updateBorderTopLeftRadius
+                  }, null, 8, ["model-value", "prefix"]),
+                  createVNode(unref(BSTextInput), {
+                    "model-value": borderTopRightRadius.value,
+                    prefix: { type: "image-url", value: unref(TopRightCornerIcon) },
+                    class: "ml-4",
+                    width: "48%",
+                    "onUpdate:modelValue": updateBorderTopRightRadius
+                  }, null, 8, ["model-value", "prefix"])
+                ]),
+                createElementVNode("div", _hoisted_20, [
+                  createVNode(unref(BSTextInput), {
+                    "model-value": borderBottomLeftRadius.value,
+                    prefix: { type: "image-url", value: unref(BottomLeftCornerIcon) },
+                    class: "ml-4",
+                    width: "48%",
+                    "onUpdate:modelValue": updateBorderBottomLeftRadius
+                  }, null, 8, ["model-value", "prefix"]),
+                  createVNode(unref(BSTextInput), {
+                    "model-value": borderBottomRightRadius.value,
+                    prefix: { type: "image-url", value: unref(BottomRightCornerIcon) },
+                    class: "ml-4",
+                    width: "48%",
+                    "onUpdate:modelValue": updateBorderBottomRightRadius
+                  }, null, 8, ["model-value", "prefix"])
+                ])
+              ])
             ])
           ])
         ])
@@ -11253,17 +11457,23 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$e = { class: "group-editor group-editor-margin" };
-const _hoisted_2$7 = { class: "flex-align-center" };
-const _hoisted_3$3 = /* @__PURE__ */ createElementVNode("div", { class: "label" }, [
-  /* @__PURE__ */ createElementVNode("label", null, "Margin")
+const _hoisted_1$d = { class: "group-editor group-editor-margin" };
+const _hoisted_2$5 = { class: "flex-align-center" };
+const _hoisted_3$3 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
+  /* @__PURE__ */ createElementVNode("label", { textContent: "Margin" })
 ], -1);
 const _hoisted_4$2 = { class: "flex-grow-1" };
-const _hoisted_5$2 = /* @__PURE__ */ createElementVNode("span", null, "L", -1);
-const _hoisted_6$2 = /* @__PURE__ */ createElementVNode("span", { class: "ml-8" }, "R", -1);
-const _hoisted_7$1 = /* @__PURE__ */ createElementVNode("span", { class: "ml-8" }, "T", -1);
-const _hoisted_8$1 = /* @__PURE__ */ createElementVNode("span", { class: "ml-8" }, "B", -1);
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _hoisted_5$1 = { class: "bg-gray-100 py-5 rounded-8" };
+const _hoisted_6$1 = { class: "text-center" };
+const _hoisted_7$1 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
+const _hoisted_8$1 = /* @__PURE__ */ createElementVNode("div", {
+  class: "d-inline-block text-center text-gray-300",
+  style: { "width": "30%", "font-size": "12px" }
+}, [
+  /* @__PURE__ */ createElementVNode("span", { class: "font-icon" }, "add")
+], -1);
+const _hoisted_9$1 = { class: "text-center" };
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorMargin",
   props: {
     group: {},
@@ -11287,39 +11497,46 @@ 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$e, [
-        createElementVNode("div", _hoisted_2$7, [
+      return openBlock(), createElementBlock("div", _hoisted_1$d, [
+        createElementVNode("div", _hoisted_2$5, [
           _hoisted_3$3,
           createElementVNode("div", _hoisted_4$2, [
-            createElementVNode("div", null, [
-              _hoisted_5$2,
-              createVNode(unref(BSTextInput), {
-                "model-value": left.value,
-                class: "ml-4",
-                width: "4em",
-                "onUpdate:modelValue": updateLeft
-              }, null, 8, ["model-value"]),
-              _hoisted_6$2,
-              createVNode(unref(BSTextInput), {
-                "model-value": right.value,
-                class: "ml-4",
-                width: "4em",
-                "onUpdate:modelValue": updateRight
-              }, null, 8, ["model-value"]),
-              _hoisted_7$1,
-              createVNode(unref(BSTextInput), {
-                "model-value": top.value,
-                class: "ml-4",
-                width: "4em",
-                "onUpdate:modelValue": updateTop
-              }, null, 8, ["model-value"]),
-              _hoisted_8$1,
-              createVNode(unref(BSTextInput), {
-                "model-value": bottom.value,
-                class: "ml-4",
-                width: "4em",
-                "onUpdate:modelValue": updateBottom
-              }, null, 8, ["model-value"])
+            createElementVNode("div", _hoisted_5$1, [
+              createElementVNode("div", _hoisted_6$1, [
+                createVNode(unref(BSTextInput), {
+                  "model-value": top.value,
+                  class: "ml-4",
+                  prefix: "T",
+                  width: "30%",
+                  "onUpdate:modelValue": updateTop
+                }, null, 8, ["model-value"])
+              ]),
+              createElementVNode("div", _hoisted_7$1, [
+                createVNode(unref(BSTextInput), {
+                  "model-value": left.value,
+                  class: "ml-4",
+                  prefix: "L",
+                  width: "30%",
+                  "onUpdate:modelValue": updateLeft
+                }, null, 8, ["model-value"]),
+                _hoisted_8$1,
+                createVNode(unref(BSTextInput), {
+                  "model-value": right.value,
+                  class: "ml-4",
+                  prefix: "R",
+                  width: "30%",
+                  "onUpdate:modelValue": updateRight
+                }, null, 8, ["model-value"])
+              ]),
+              createElementVNode("div", _hoisted_9$1, [
+                createVNode(unref(BSTextInput), {
+                  "model-value": bottom.value,
+                  class: "ml-4",
+                  prefix: "B",
+                  width: "30%",
+                  "onUpdate:modelValue": updateBottom
+                }, null, 8, ["model-value"])
+              ])
             ])
           ])
         ])
@@ -11327,17 +11544,23 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$d = { class: "group-editor group-editor-margin" };
-const _hoisted_2$6 = { class: "flex-align-center" };
-const _hoisted_3$2 = /* @__PURE__ */ createElementVNode("div", { class: "label" }, [
-  /* @__PURE__ */ createElementVNode("label", null, "Padding")
+const _hoisted_1$c = { class: "group-editor group-editor-padding" };
+const _hoisted_2$4 = { class: "flex-align-center" };
+const _hoisted_3$2 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
+  /* @__PURE__ */ createElementVNode("label", { textContent: "Padding" })
 ], -1);
 const _hoisted_4$1 = { class: "flex-grow-1" };
-const _hoisted_5$1 = /* @__PURE__ */ createElementVNode("span", null, "L", -1);
-const _hoisted_6$1 = /* @__PURE__ */ createElementVNode("span", { class: "ml-8" }, "R", -1);
-const _hoisted_7 = /* @__PURE__ */ createElementVNode("span", { class: "ml-8" }, "T", -1);
-const _hoisted_8 = /* @__PURE__ */ createElementVNode("span", { class: "ml-8" }, "B", -1);
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _hoisted_5 = { class: "bg-gray-100 py-5 rounded-8" };
+const _hoisted_6 = { class: "text-center" };
+const _hoisted_7 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
+const _hoisted_8 = /* @__PURE__ */ createElementVNode("div", {
+  class: "d-inline-block text-center text-gray-300",
+  style: { "width": "30%", "font-size": "12px" }
+}, [
+  /* @__PURE__ */ createElementVNode("span", { class: "font-icon" }, "add")
+], -1);
+const _hoisted_9 = { class: "text-center" };
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorPadding",
   props: {
     group: {},
@@ -11361,39 +11584,46 @@ 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$d, [
-        createElementVNode("div", _hoisted_2$6, [
+      return openBlock(), createElementBlock("div", _hoisted_1$c, [
+        createElementVNode("div", _hoisted_2$4, [
           _hoisted_3$2,
           createElementVNode("div", _hoisted_4$1, [
-            createElementVNode("div", null, [
-              _hoisted_5$1,
-              createVNode(unref(BSTextInput), {
-                "model-value": left.value,
-                class: "ml-4",
-                width: "4em",
-                "onUpdate:modelValue": updateLeft
-              }, null, 8, ["model-value"]),
-              _hoisted_6$1,
-              createVNode(unref(BSTextInput), {
-                "model-value": right.value,
-                class: "ml-4",
-                width: "4em",
-                "onUpdate:modelValue": updateRight
-              }, null, 8, ["model-value"]),
-              _hoisted_7,
-              createVNode(unref(BSTextInput), {
-                "model-value": top.value,
-                class: "ml-4",
-                width: "4em",
-                "onUpdate:modelValue": updateTop
-              }, null, 8, ["model-value"]),
-              _hoisted_8,
-              createVNode(unref(BSTextInput), {
-                "model-value": bottom.value,
-                class: "ml-4",
-                width: "4em",
-                "onUpdate:modelValue": updateBottom
-              }, null, 8, ["model-value"])
+            createElementVNode("div", _hoisted_5, [
+              createElementVNode("div", _hoisted_6, [
+                createVNode(unref(BSTextInput), {
+                  "model-value": top.value,
+                  class: "ml-4",
+                  prefix: "T",
+                  width: "30%",
+                  "onUpdate:modelValue": updateTop
+                }, null, 8, ["model-value"])
+              ]),
+              createElementVNode("div", _hoisted_7, [
+                createVNode(unref(BSTextInput), {
+                  "model-value": left.value,
+                  class: "ml-4",
+                  prefix: "L",
+                  width: "30%",
+                  "onUpdate:modelValue": updateLeft
+                }, null, 8, ["model-value"]),
+                _hoisted_8,
+                createVNode(unref(BSTextInput), {
+                  "model-value": right.value,
+                  class: "ml-4",
+                  prefix: "R",
+                  width: "30%",
+                  "onUpdate:modelValue": updateRight
+                }, null, 8, ["model-value"])
+              ]),
+              createElementVNode("div", _hoisted_9, [
+                createVNode(unref(BSTextInput), {
+                  "model-value": bottom.value,
+                  class: "ml-4",
+                  prefix: "B",
+                  width: "30%",
+                  "onUpdate:modelValue": updateBottom
+                }, null, 8, ["model-value"])
+              ])
             ])
           ])
         ])
@@ -11427,7 +11657,7 @@ const positionGroup = () => {
         propertyType: "text"
       }
     ],
-    propertyGroupEditor: () => _sfc_main$k
+    propertyGroupEditor: () => _sfc_main$j
   };
 };
 const sizeGroup = () => {
@@ -11466,7 +11696,7 @@ const sizeGroup = () => {
         propertyType: "text"
       }
     ],
-    propertyGroupEditor: () => _sfc_main$j
+    propertyGroupEditor: () => _sfc_main$i
   };
 };
 const marginGroup = () => {
@@ -11495,7 +11725,7 @@ const marginGroup = () => {
         propertyType: "text"
       }
     ],
-    propertyGroupEditor: () => _sfc_main$f
+    propertyGroupEditor: () => _sfc_main$e
   };
 };
 const paddingGroup = () => {
@@ -11524,7 +11754,7 @@ const paddingGroup = () => {
         propertyType: "text"
       }
     ],
-    propertyGroupEditor: () => _sfc_main$e
+    propertyGroupEditor: () => _sfc_main$d
   };
 };
 const commonGroup = () => {
@@ -11591,7 +11821,7 @@ const backgroundGroup = () => {
         propertyType: "image"
       }
     ],
-    propertyGroupEditor: () => _sfc_main$h
+    propertyGroupEditor: () => _sfc_main$g
   };
 };
 const borderGroup = () => {
@@ -11645,7 +11875,7 @@ const borderGroup = () => {
         propertyType: "text"
       }
     ],
-    propertyGroupEditor: () => _sfc_main$g
+    propertyGroupEditor: () => _sfc_main$f
   };
 };
 const defaultPropertyGroups = () => {
@@ -11654,51 +11884,21 @@ const defaultPropertyGroups = () => {
 const defaultWidgetPropertyGroups = () => {
   return [positionGroup(), sizeGroup(), marginGroup(), paddingGroup(), borderGroup(), backgroundGroup(), commonGroup()];
 };
-const designParts = [
+const pageParts = [
   {
-    partType: "Section",
-    partName: "GlobalDesignPart",
-    caption: "Global Design Part",
+    partType: "Page",
+    partName: "Page",
+    caption: "Page",
+    icon: "draft",
     propertyGroups: [
-      ...defaultPropertyGroups()
+      paddingGroup(),
+      backgroundGroup(),
+      commonGroup()
     ],
-    initialProperties: {
-      sectionType: "globalDesignPart",
-      direction: "horizontal"
-    },
+    initialProperties: {},
     localized: false,
     allowsChild: () => true,
-    creator: () => _sfc_main$l
-  },
-  {
-    partType: "Section",
-    partName: "LocalDesignPart",
-    caption: "Local Design Part",
-    propertyGroups: [
-      ...defaultPropertyGroups()
-    ],
-    initialProperties: {
-      sectionType: "localDesignPart",
-      direction: "horizontal"
-    },
-    localized: true,
-    allowsChild: () => true,
-    creator: () => _sfc_main$l
-  },
-  {
-    partType: "Section",
-    partName: "LocalMarketingPart",
-    caption: "Local Marketing Part",
-    propertyGroups: [
-      ...defaultPropertyGroups()
-    ],
-    initialProperties: {
-      sectionType: "localMarketingPart",
-      direction: "horizontal"
-    },
-    localized: true,
-    allowsChild: () => true,
-    creator: () => _sfc_main$l
+    creator: () => _sfc_main$k
   }
 ];
 const sectionParts = [
@@ -11706,6 +11906,7 @@ const sectionParts = [
     partType: "Section",
     partName: "Section",
     caption: "Section",
+    icon: "rectangle",
     propertyGroups: [
       ...defaultPropertyGroups()
     ],
@@ -11714,7 +11915,7 @@ const sectionParts = [
     },
     localized: false,
     allowsChild: () => true,
-    creator: () => _sfc_main$l
+    creator: () => _sfc_main$k
   }
 ];
 const blockParts = [
@@ -11722,20 +11923,22 @@ const blockParts = [
     partType: "Block",
     partName: "Block",
     caption: "Block",
+    icon: "space_dashboard",
     propertyGroups: [
       ...defaultPropertyGroups()
     ],
     initialProperties: {},
     localized: false,
     allowsChild: () => true,
-    creator: () => _sfc_main$n
+    creator: () => _sfc_main$m
   }
 ];
 const widgets = [
   {
     partType: "Widget",
     partName: "TextWidget",
-    caption: "Text Widget",
+    caption: "Text",
+    icon: "insert_text",
     propertyGroups: [
       {
         groupName: "text",
@@ -11746,13 +11949,20 @@ const widgets = [
             caption: "Text",
             propertyType: "multiline-text",
             params: "",
-            localized: true
+            localized: true,
+            multiLang: true
           },
           {
             propertyName: "fontSize",
             caption: "Font Size",
             propertyType: "text",
             params: ""
+          },
+          {
+            propertyName: "color",
+            caption: "Font Color",
+            propertyType: "color",
+            params: ""
           }
         ]
       },
@@ -11765,12 +11975,13 @@ const widgets = [
     },
     localized: true,
     allowsChild: () => false,
-    creator: () => _sfc_main$3$1
+    creator: () => _sfc_main$5$1
   },
   {
     partType: "Widget",
     partName: "ImageWidget",
-    caption: "Image Widget",
+    caption: "Image",
+    icon: "imagesmode",
     propertyGroups: [
       {
         groupName: "image",
@@ -11790,23 +12001,52 @@ const widgets = [
     initialProperties: {},
     localized: true,
     allowsChild: () => false,
+    creator: () => _sfc_main$6$1
+  },
+  {
+    partType: "Widget",
+    partName: "HtmlWidget",
+    caption: "HTML",
+    icon: "code",
+    propertyGroups: [
+      {
+        groupName: "html",
+        caption: "HTML",
+        properties: [
+          {
+            propertyName: "html",
+            caption: "HTML",
+            propertyType: "html",
+            params: "",
+            localized: true,
+            multiLang: true
+          }
+        ]
+      },
+      ...defaultWidgetPropertyGroups()
+    ],
+    initialProperties: {},
+    localized: true,
+    allowsChild: () => false,
     creator: () => _sfc_main$4$1
   },
   {
     partType: "Widget",
-    partName: "ProductListWidget",
-    caption: "Product List Widget",
+    partName: "IframeWidget",
+    caption: "IFrame",
+    icon: "code",
     propertyGroups: [
       {
-        groupName: "productList",
-        caption: "Product List",
+        groupName: "iframe",
+        caption: "Iframe",
         properties: [
           {
-            propertyName: "product",
-            caption: "Product",
-            propertyType: "product",
+            propertyName: "url",
+            caption: "URL",
+            propertyType: "text",
             params: "",
-            localized: true
+            localized: true,
+            multiLang: true
           }
         ]
       },
@@ -11815,29 +12055,22 @@ const widgets = [
     initialProperties: {},
     localized: true,
     allowsChild: () => false,
-    creator: () => _sfc_main$2$1
+    creator: () => _sfc_main$3$1
   }
 ];
 const partDefinitions = {};
-for (let part of designParts) {
+for (const part of pageParts) {
   partDefinitions[part.partName] = part;
 }
-for (let part of sectionParts) {
+for (const part of sectionParts) {
   partDefinitions[part.partName] = part;
 }
-for (let part of blockParts) {
+for (const part of blockParts) {
   partDefinitions[part.partName] = part;
 }
-for (let part of widgets) {
+for (const part of widgets) {
   partDefinitions[part.partName] = part;
 }
-const designPartDefinitions = [
-  {
-    groupName: "DesignParts",
-    caption: "Design Parts",
-    partDefinitions: designParts
-  }
-];
 [
   {
     groupName: "Layout",
@@ -11848,6 +12081,13 @@ const designPartDefinitions = [
     ]
   }
 ];
+const widgetPartDefinitions = [
+  {
+    groupName: "Widget",
+    caption: "Widget",
+    partDefinitions: widgets
+  }
+];
 const blockWidgetPartDefinitions = [
   {
     groupName: "Block",
@@ -11887,19 +12127,6 @@ class CommandRegistryImpl {
     }
   }
 }
-const _OpenAddPartModalCommand = class _OpenAddPartModalCommand {
-  constructor(modal) {
-    __publicField(this, "commandId", _OpenAddPartModalCommand.COMMAND_ID);
-    __publicField(this, "caption", "Add Part");
-    this.modal = modal;
-  }
-  execute(pageBuilder, args) {
-    let partDefinitionGroups = designPartDefinitions;
-    openPartAddModal(this.modal, { pageBuilder, partDefinitionGroups, ...args || {} });
-  }
-};
-__publicField(_OpenAddPartModalCommand, "COMMAND_ID", "OpenAddPartModal");
-let OpenAddPartModalCommand = _OpenAddPartModalCommand;
 const _OpenAddWidgetModalCommand = class _OpenAddWidgetModalCommand {
   constructor(modal) {
     __publicField(this, "commandId", _OpenAddWidgetModalCommand.COMMAND_ID);
@@ -11913,31 +12140,9 @@ const _OpenAddWidgetModalCommand = class _OpenAddWidgetModalCommand {
 };
 __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
 let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
-const openPartAddModal = (modal, args, callback) => {
-  modal.openModal({
-    component: defineAsyncComponent(() => import("./PbPartAddModal-DuLpnV4E.js")),
-    style: {
-      width: "80%",
-      height: "80%",
-      maxWidth: "800px",
-      minWidth: "500px",
-      maxHeight: "800px"
-    },
-    bind: args,
-    on: {
-      selectHandler: (part) => {
-        if (callback) {
-          callback(part);
-        } else {
-          addPart(args.pageBuilder, part);
-        }
-      }
-    }
-  });
-};
 const openWidgetAddModal = (modal, args, callback) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./PbWidgetAddModal-CQvFYzfU.js")),
+    component: defineAsyncComponent(() => import("./PbWidgetAddModal-BoYfb0dm.js")),
     style: {
       width: "80%",
       height: "80%",
@@ -11949,12 +12154,12 @@ const openWidgetAddModal = (modal, args, callback) => {
     on: {
       selectHandler: (part) => {
         if (["ImageWidget"].includes(part.partName)) {
-          PageBuilderEditorEvent.emit.requestImage({
-            pageBuilderId: args.pageBuilder.instanceId,
-            callback: (url) => {
+          const imageProvider = args.pageBuilder.getProvider("imageProvider");
+          if (imageProvider) {
+            imageProvider({ modal }, (url) => {
               addPart(args.pageBuilder, part, { image: url });
-            }
-          });
+            });
+          }
         } else {
           if (callback) {
             callback(part);
@@ -12041,6 +12246,36 @@ const _AddPartCommand = class _AddPartCommand {
 };
 __publicField(_AddPartCommand, "COMMAND_ID", "AddPart");
 let AddPartCommand = _AddPartCommand;
+const _AddSectionCommand = class _AddSectionCommand {
+  constructor(modal) {
+    __publicField(this, "commandId", _AddSectionCommand.COMMAND_ID);
+    __publicField(this, "caption", "Add Section");
+    this.modal = modal;
+  }
+  execute(pageBuilder, args) {
+    const def = pageBuilder.partManager.getSectionDefinition();
+    if (!def)
+      return;
+    addPart(pageBuilder, def);
+  }
+};
+__publicField(_AddSectionCommand, "COMMAND_ID", "AddSection");
+let AddSectionCommand = _AddSectionCommand;
+const _AddBlockCommand = class _AddBlockCommand {
+  constructor(modal) {
+    __publicField(this, "commandId", _AddBlockCommand.COMMAND_ID);
+    __publicField(this, "caption", "Add Block");
+    this.modal = modal;
+  }
+  execute(pageBuilder, args) {
+    const def = pageBuilder.partManager.getBlockDefinition();
+    if (!def)
+      return;
+    addPart(pageBuilder, def);
+  }
+};
+__publicField(_AddBlockCommand, "COMMAND_ID", "AddBlock");
+let AddBlockCommand = _AddBlockCommand;
 const addPart = (pageBuilder, def, attrs) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   const selected = pageBuilder.context.getSelectedParts()[0];
@@ -12129,29 +12364,13 @@ const addPart = (pageBuilder, def, attrs) => {
   }
 };
 const addSectionBefore = (pageBuilder, modal, args) => {
-  const def = args && args.partDefinition;
-  if (!def) {
-    const partDefinitionGroups = designPartDefinitions;
-    openPartAddModal(modal, {
-      ...args || {},
-      pageBuilder,
-      partDefinitionGroups
-    }, (part, attrs) => {
-      addSectionBefore(pageBuilder, modal, {
-        ...args || {},
-        partDefinition: part,
-        ...attrs || {}
-      });
-    });
-    return;
-  }
   const selected = pageBuilder.context.getSelectedParts()[0];
   if (!selected)
     return;
   const section = pageBuilder.partManager.findNearestSection(selected);
   if (!section || !section.parent || !section.parent.children)
     return;
-  const newSection = createPartWithDefinition(def);
+  const newSection = createSection(pageBuilder);
   if (!newSection)
     return;
   const child = createBlock(pageBuilder);
@@ -12160,29 +12379,13 @@ const addSectionBefore = (pageBuilder, modal, args) => {
   insertParts(pageBuilder, section.parent.partId, index, [newSection], true);
 };
 const addSectionAfter = (pageBuilder, modal, args) => {
-  const def = args && args.partDefinition;
-  if (!def) {
-    const partDefinitionGroups = designPartDefinitions;
-    openPartAddModal(modal, {
-      ...args || {},
-      pageBuilder,
-      partDefinitionGroups
-    }, (part, attrs) => {
-      addSectionAfter(pageBuilder, modal, {
-        ...args || {},
-        partDefinition: part,
-        ...attrs || {}
-      });
-    });
-    return;
-  }
   const selected = pageBuilder.context.getSelectedParts()[0];
   if (!selected)
     return;
   const section = pageBuilder.partManager.findNearestSection(selected);
   if (!section || !section.parent || !section.parent.children)
     return;
-  const newSection = createPartWithDefinition(def);
+  const newSection = createSection(pageBuilder);
   if (!newSection)
     return;
   const child = createBlock(pageBuilder);
@@ -12305,11 +12508,11 @@ const _AddSectionAboveCommand = class _AddSectionAboveCommand {
     this.modal = modal;
   }
   execute(pageBuilder, args) {
-    addSectionBefore(pageBuilder, this.modal, args);
+    addSectionBefore(pageBuilder, this.modal);
   }
 };
 __publicField(_AddSectionAboveCommand, "COMMAND_ID", "AddSectionAbove");
-__publicField(_AddSectionAboveCommand, "CAPTION", "Add Part Above");
+__publicField(_AddSectionAboveCommand, "CAPTION", "Add Section Above");
 let AddSectionAboveCommand = _AddSectionAboveCommand;
 const _AddSectionBelowCommand = class _AddSectionBelowCommand {
   constructor(modal) {
@@ -12318,11 +12521,11 @@ const _AddSectionBelowCommand = class _AddSectionBelowCommand {
     this.modal = modal;
   }
   execute(pageBuilder, args) {
-    addSectionAfter(pageBuilder, this.modal, args);
+    addSectionAfter(pageBuilder, this.modal);
   }
 };
 __publicField(_AddSectionBelowCommand, "COMMAND_ID", "AddSectionBelow");
-__publicField(_AddSectionBelowCommand, "CAPTION", "Add Part Below");
+__publicField(_AddSectionBelowCommand, "CAPTION", "Add Section Below");
 let AddSectionBelowCommand = _AddSectionBelowCommand;
 const _AddBlockLeftCommand = class _AddBlockLeftCommand {
   constructor() {
@@ -12471,6 +12674,20 @@ const _DeletePartCommand = class _DeletePartCommand {
 __publicField(_DeletePartCommand, "COMMAND_ID", "DeletePart");
 __publicField(_DeletePartCommand, "CAPTION", "Delete");
 let DeletePartCommand = _DeletePartCommand;
+const _CopyAllCommand = class _CopyAllCommand {
+  constructor() {
+    __publicField(this, "commandId", _CopyAllCommand.COMMAND_ID);
+  }
+  async execute(pageBuilder) {
+    const json = pageBuilder.model.serializeModel(
+      (part) => pageBuilder.extractMedia(part),
+      (partObject) => pageBuilder.extractProvider(partObject)
+    );
+    await navigator.clipboard.writeText(json);
+  }
+};
+__publicField(_CopyAllCommand, "COMMAND_ID", "CopyAll");
+let CopyAllCommand = _CopyAllCommand;
 const _CopyPartCommand = class _CopyPartCommand {
   constructor() {
     __publicField(this, "commandId", _CopyPartCommand.COMMAND_ID);
@@ -12478,7 +12695,7 @@ const _CopyPartCommand = class _CopyPartCommand {
   async execute(pageBuilder) {
     const partIds = pageBuilder.context.getSelectedParts().map((part) => part.partId);
     if (partIds.length > 0) {
-      const json = pageBuilder.model.serializePageModel(partIds);
+      const json = pageBuilder.model.serializeParts(partIds);
       await navigator.clipboard.writeText(json);
     }
   }
@@ -12501,12 +12718,34 @@ const _PastePartCommand = class _PastePartCommand {
     __publicField(this, "commandId", _PastePartCommand.COMMAND_ID);
   }
   async execute(pageBuilder) {
-    const { target, index = 0 } = findInsertTargetAndIndex(pageBuilder);
-    if (target) {
-      const json = await navigator.clipboard.readText();
-      const parts = pageBuilder.model.parsePageModel(json);
-      if (parts) {
-        insertParts(pageBuilder, target.partId, index, parts, false);
+    const json = await navigator.clipboard.readText();
+    const object = JSON.parse(json);
+    if (object.partType === ROOT_TYPE) {
+      const rootPart = partFromJsonObject(object, true);
+      if (!rootPart)
+        throw new Error("Invalid data format");
+      let partIdsToDelete = void 0;
+      if (pageBuilder.model.rootPart.children && pageBuilder.model.rootPart.children.length) {
+        partIdsToDelete = pageBuilder.model.rootPart.children.map((v) => v.partId);
+      }
+      const param = {
+        delete: partIdsToDelete,
+        insert: [
+          {
+            partId: pageBuilder.model.getRootPartId(),
+            index: 0,
+            parts: rootPart.children || []
+          }
+        ]
+      };
+      pageBuilder.model.updateModel(param);
+    } else {
+      const { target, index = 0 } = findInsertTargetAndIndex(pageBuilder);
+      if (target) {
+        const parts = pageBuilder.model.parseParts(json);
+        if (parts) {
+          insertParts(pageBuilder, target.partId, index, parts, false);
+        }
       }
     }
   }
@@ -12527,9 +12766,10 @@ __publicField(_SelectAllPartsCommand, "COMMAND_ID", "SelectAllParts");
 let SelectAllPartsCommand = _SelectAllPartsCommand;
 const createDefaultCommands = (modal) => {
   return [
-    new OpenAddPartModalCommand(modal),
     new OpenAddWidgetModalCommand(modal),
     new AddPartCommand(modal),
+    new AddSectionCommand(modal),
+    new AddBlockCommand(modal),
     new AddSectionAboveCommand(modal),
     new AddSectionBelowCommand(modal),
     new AddBlockLeftCommand(),
@@ -12543,6 +12783,7 @@ const createDefaultCommands = (modal) => {
     new AddWidgetInsideCommand(modal),
     new ChangePropertyCommand(),
     new DeletePartCommand(),
+    new CopyAllCommand(),
     new CopyPartCommand(),
     new CutPartCommand(),
     new PastePartCommand(),
@@ -12709,15 +12950,6 @@ const createDefaultContextMenus = () => {
         return enableAddWidgetMenu(pageBuilder, "", AddWidgetInsideCommand.COMMAND_ID, AddWidgetInsideCommand.CAPTION);
       }
     },
-    {
-      groupId: "core:add",
-      commandId: OpenAddPartModalCommand.COMMAND_ID,
-      precedence: 10,
-      getMenuItem(pageBuilder) {
-        if (pageBuilder.context.getSelectionCount() <= 1)
-          return menuItemForCommand(pageBuilder, OpenAddPartModalCommand.COMMAND_ID);
-      }
-    },
     {
       groupId: "core:edit",
       commandId: DeletePartCommand.COMMAND_ID,
@@ -12777,16 +13009,6 @@ const createDefaultKeyHandlers = () => {
 };
 const createDefaultToolButtonGroups = () => {
   const groups = [
-    {
-      groupId: "file",
-      buttons: [
-        {
-          buttonId: "core:template",
-          caption: "Load Template",
-          icon: "account_balance"
-        }
-      ]
-    },
     {
       groupId: "edit",
       buttons: [
@@ -12802,6 +13024,12 @@ const createDefaultToolButtonGroups = () => {
           icon: "redo",
           handler: (modeler) => modeler.redo()
         },
+        {
+          buttonId: "core:copyAll",
+          caption: "Copy All",
+          icon: "copy_all",
+          handler: (modeler) => modeler.commandRegistry.executeCommand(CopyAllCommand.COMMAND_ID)
+        },
         {
           buttonId: "core:copy",
           caption: "Copy",
@@ -12832,15 +13060,21 @@ const createDefaultToolButtonGroups = () => {
       groupId: "add",
       buttons: [
         {
-          buttonId: "core:openAddPartLayer",
-          caption: "Add Design Part...",
-          icon: "box_add",
-          handler: (modeler) => modeler.commandRegistry.executeCommand(OpenAddPartModalCommand.COMMAND_ID)
+          buttonId: "core:addSection",
+          caption: "Add Section",
+          icon: "add_row_below",
+          handler: (modeler) => modeler.commandRegistry.executeCommand(AddSectionCommand.COMMAND_ID)
         },
         {
-          buttonId: "core:openAddWidgetLayer",
-          caption: "Add Widget...",
-          icon: "add_box",
+          buttonId: "core:addBlock",
+          caption: "Add Block",
+          icon: "add_column_right",
+          handler: (modeler) => modeler.commandRegistry.executeCommand(AddBlockCommand.COMMAND_ID)
+        },
+        {
+          buttonId: "core:addWidget",
+          caption: "Add Widget",
+          icon: "desktop_landscape_add",
           handler: (modeler) => modeler.commandRegistry.executeCommand(OpenAddWidgetModalCommand.COMMAND_ID)
         }
       ]
@@ -12885,7 +13119,11 @@ class PageBuilderContextImpl {
   }
   setSelection(parts) {
     this.selection.splice(0, this.selection.length);
-    parts.forEach((part) => this.selection.push(part));
+    if (parts && parts.length) {
+      parts.forEach((part) => this.selection.push(part));
+    } else if (this.model.rootPart.children && this.model.rootPart.children.length) {
+      this.selection.push(this.model.rootPart.children[0]);
+    }
   }
   addSelection(parts) {
     parts.forEach((part) => this.selection.push(part));
@@ -13010,11 +13248,11 @@ class KeyHandlersImpl {
       }
     }
   }
-  addDocumentKeyEventListener(document2) {
-    document2.addEventListener("keydown", this.handleKeyDownEvent.bind(this));
+  addDocumentKeyEventListener(element) {
+    element.addEventListener("keydown", this.handleKeyDownEvent.bind(this));
   }
-  removeDocumentKeyEventListener(document2) {
-    document2.removeEventListener("keydown", this.handleKeyDownEvent.bind(this));
+  removeDocumentKeyEventListener(element) {
+    element.removeEventListener("keydown", this.handleKeyDownEvent.bind(this));
   }
 }
 const PAGE_BUILDER_EDITOR_KEY = "PageBuilderEditor";
@@ -13041,14 +13279,56 @@ class PageBuilderEditorImpl {
     __publicField(this, "keyHandlers", new KeyHandlersImpl(this));
     __publicField(this, "toolButtonRegistry", new ToolButtonRegistryImpl());
     __publicField(this, "title");
-    __publicField(this, "editMode");
     __publicField(this, "scale", ref(1));
+    __publicField(this, "locale", ref("en"));
+    __publicField(this, "locales", ref(["en"]));
+    __publicField(this, "customWidgets", []);
+    __publicField(this, "watchers", {});
+    __publicField(this, "providers", {});
     this.model = new Model2();
     this.context = new PageBuilderContextImpl(this);
-    this.editMode = "free";
     this.scale.value = 1;
     this.initPlugins();
   }
+  getLocale() {
+    return this.locale.value;
+  }
+  setLocale(locale) {
+    this.locale.value = locale || "en";
+  }
+  getLocales() {
+    return this.locales.value;
+  }
+  setLocales(locales) {
+    this.locales.value = locales || ["en"];
+  }
+  getCustomWidgetComponent(part) {
+    const def = this.partManager.getPartDefinition(part.partName);
+    if (def) {
+      return def.component;
+    }
+  }
+  getProvider(name) {
+    return this.providers[name];
+  }
+  watchCustomWidgetData(part) {
+    const def = this.partManager.getPartDefinition(part.partName);
+    if (!def || !def.dataWatcher)
+      return false;
+    const watcher = this.watchers[def.dataWatcher];
+    if (!watcher)
+      return false;
+    return watcher(part.properties);
+  }
+  provideCustomWidgetData(part) {
+    const def = this.partManager.getPartDefinition(part.partName);
+    if (!def || !def.dataProvider)
+      return Promise.resolve();
+    const provider = this.providers[def.dataProvider];
+    if (!provider)
+      return Promise.resolve();
+    return provider(part.properties);
+  }
   registerPlugin(plugin) {
     if (plugin.partDefinitions)
       this.partManager.registerPartDefinitions(plugin.partDefinitions);
@@ -13065,23 +13345,61 @@ class PageBuilderEditorImpl {
     if (plugin.toolButtonGroups)
       this.toolButtonRegistry.registerToolButtonGroups(plugin.toolButtonGroups);
   }
-  initData(content) {
-    this.model.rootPart.pageBuilderId = this.instanceId;
-    let parts;
-    if (content) {
-      for (const p of content) {
-        const page = partFromJsonObject(p, true);
-        if (page) {
-          if (!parts)
-            parts = [];
-          parts.push(page);
+  registerCustomPlugin(plugin) {
+    if (plugin.widgets) {
+      const partDefinitions2 = {};
+      plugin.widgets.forEach((v) => {
+        const w = { ...v };
+        w.partType = "Widget";
+        w.creator = () => _sfc_main$p;
+        w.propertyGroups = [...w.propertyGroups, ...defaultWidgetPropertyGroups()];
+        partDefinitions2[v.partName] = w;
+        const found = this.customWidgets.find((x) => x.partName === v.partName);
+        if (!found) {
+          this.customWidgets.push(w);
         }
-      }
+      });
+      this.partManager.registerPartDefinitions(partDefinitions2);
+    }
+    if (plugin.watchers) {
+      this.watchers = { ...this.providers, ...plugin.watchers };
+    }
+    if (plugin.providers) {
+      this.providers = { ...this.providers, ...plugin.providers };
     }
-    if (!parts) {
+    if (plugin.propertyEditors) {
+      this.partManager.registerPartPropertyEditors(plugin.propertyEditors);
+    }
+  }
+  initData(data) {
+    const _data = JSON.parse(data || "{}") || {};
+    let rootPart = partFromJsonObject(_data, true);
+    if (!rootPart)
+      rootPart = new RootPart();
+    let parts = rootPart.children;
+    if (!parts)
       parts = [this.getEmptyPageContent(), this.getEmptyPageContent()];
+    if (parts.length === 1) {
+      parts[0].properties = {
+        ...parts[0].properties || {},
+        name: "Page"
+      };
+    } else if (parts.length === 2) {
+      parts[0].properties = {
+        ...parts[0].properties || {},
+        name: "Page (Mobile)"
+      };
+      parts[1].properties = {
+        ...parts[0].properties || {},
+        name: "Page (PC)"
+      };
+    }
+    let partIdsToDelete = void 0;
+    if (this.model.rootPart.children && this.model.rootPart.children.length) {
+      partIdsToDelete = this.model.rootPart.children.map((v) => v.partId);
     }
     const param = {
+      delete: partIdsToDelete,
       insert: [
         {
           partId: this.model.getRootPartId(),
@@ -13101,6 +13419,158 @@ 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 remaining = this.model.rootPart.children[screenToKeep === 0 ? 0 : 1];
+    const deleting = this.model.rootPart.children[screenToKeep === 0 ? 1 : 0];
+    this.model.updateModel({
+      delete: [deleting.partId],
+      update: [
+        {
+          partId: remaining.partId,
+          properties: {
+            name: "Page"
+          }
+        }
+      ]
+    });
+  }
+  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.serializeParts([part.partId]);
+    const copied = this.model.parseParts(json);
+    if (!copied)
+      return;
+    copied[0].properties = {
+      ...copied[0].properties || {},
+      name: "Page (PC)"
+    };
+    this.model.updateModel({
+      insert: [
+        {
+          partId: this.model.rootPart.partId,
+          index: 1,
+          parts: copied
+        }
+      ],
+      update: [
+        {
+          partId: part.partId,
+          properties: {
+            name: "Page (Mobile)"
+          }
+        }
+      ]
+    });
+  }
+  getCustomWidgets() {
+    return this.customWidgets;
+  }
+  extractMedia(part) {
+    const urls = /* @__PURE__ */ new Set();
+    this.extractMediaFromPart(part, urls);
+    return Array.from(urls);
+  }
+  extractProvider(part) {
+    const def = this.partManager.getPartDefinition(part.partName);
+    if (def && (def == null ? void 0 : def.dataProvider)) {
+      part.dataProvider = def.dataProvider;
+    }
+    if (part.children && part.children.length) {
+      for (const child of part.children) {
+        this.extractProvider(child);
+      }
+    }
+  }
+  extractMediaFromPart(part, urls) {
+    if (part.properties) {
+      for (const name in part.properties) {
+        const def = this.partManager.getPropertyDefinition(part.partName, name);
+        if (def && def.propertyType === "image") {
+          const value = part.properties[name];
+          if (value) {
+            urls.add(value);
+          }
+        }
+      }
+      if (part.properties.css) {
+        this.extractMediaFromHtml(part.properties.css, urls);
+      }
+      if (part.partName === "HtmlWidget" && part.properties.html) {
+        for (const locale in part.properties.html) {
+          const html = part.properties.html[locale];
+          if (html.tags)
+            this.extractMediaFromHtml(html.tags, urls);
+          if (html.style)
+            this.extractMediaFromHtml(html.style, urls);
+        }
+      }
+    }
+    if (part.children && part.children.length) {
+      for (const child of part.children) {
+        this.extractMediaFromPart(child, urls);
+      }
+    }
+  }
+  extractMediaFromHtml(html, urls) {
+    const imgSrcMatches = html.match(/<img[^>]+src=["']?([^"'\s>]+)["']?[^>]*>/gi);
+    if (imgSrcMatches) {
+      imgSrcMatches.forEach((match) => {
+        const url = match.match(/src=["']?([^"'\s>]+)["']?/i);
+        if (url && url[1]) {
+          urls.add(url[1]);
+        }
+      });
+    }
+    const sourceSrcsetMatches = html.match(/<source[^>]+srcset=["']?([^"'>]+)["']?[^>]*>/gi);
+    if (sourceSrcsetMatches) {
+      sourceSrcsetMatches.forEach((match) => {
+        const srcset = match.match(/srcset=["']?([^"'>]+)["']?/i);
+        if (srcset && srcset[1]) {
+          const _urls = srcset[1].split(",").map((item) => item.trim().split(/\s+/)[0]);
+          _urls.forEach((url) => urls.add(url));
+        }
+      });
+    }
+    const inputImageMatches = html.match(/<input[^>]+type=["']image["'][^>]+src=["']?([^"'\s>]+)["']?[^>]*>/gi);
+    if (inputImageMatches) {
+      inputImageMatches.forEach((match) => {
+        const url = match.match(/src=["']?([^"'\s>]+)["']?/i);
+        if (url && url[1]) {
+          urls.add(url[1]);
+        }
+      });
+    }
+    const styleUrlMatches = html.match(/style=["']?[^"'>]*(background|background-image|border-image|list-style-image|content):\s*url\(["']?([^"'\)]+)["']?\)/gi);
+    if (styleUrlMatches) {
+      styleUrlMatches.forEach((match) => {
+        const url = match.match(/url\(["']?([^"'\)]+)["']?\)/i);
+        if (url && url[1]) {
+          urls.add(url[1]);
+        }
+      });
+    }
+    const styleTagUrlMatches = html.match(/(background|background-image|border-image|list-style-image|content):\s*url\(["']?([^"'\)]+)["']?\)/gi);
+    if (styleTagUrlMatches) {
+      styleTagUrlMatches.forEach((match) => {
+        const url = match.match(/url\(["']?([^"'\)]+)["']?\)/i);
+        if (url && url[1]) {
+          urls.add(url[1]);
+        }
+      });
+    }
+  }
   getEmptyPageContent() {
     const block = new Block();
     const section = new Section();
@@ -13121,11 +13591,11 @@ class PageBuilderEditorImpl {
     });
   }
 }
-const _hoisted_1$c = /* @__PURE__ */ createElementVNode("i", { class: "material-icons-outlined" }, "add_circle_outline", -1);
-const _hoisted_2$5 = [
-  _hoisted_1$c
+const _hoisted_1$b = /* @__PURE__ */ createElementVNode("i", { class: "material-icons-outlined" }, "add_circle_outline", -1);
+const _hoisted_2$3 = [
+  _hoisted_1$b
 ];
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "PbPage",
   props: {
     page: {},
@@ -13142,11 +13612,15 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         minHeight: ((_b = (_a = props.page) == null ? void 0 : _a.children) == null ? void 0 : _b.length) ? void 0 : "200px"
       };
     });
-    const selected = computed(() => editor.context.getSelectedPage() === props.page);
+    const properties = computed(() => {
+      var _a;
+      return { style: ((_a = props.page) == null ? void 0 : _a.getStyles()) || {} };
+    });
+    const selected = computed(() => !!props.page && editor.context.isSelected(props.page));
     const insertSection = (index) => {
       if (!props.page)
         return;
-      editor.commandRegistry.executeCommand(OpenAddPartModalCommand.COMMAND_ID);
+      editor.commandRegistry.executeCommand(AddSectionCommand.COMMAND_ID);
     };
     return (_ctx, _cache) => {
       var _a;
@@ -13154,29 +13628,29 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         style: normalizeStyle(style.value),
         class: "pb-page"
       }, [
-        createElementVNode("div", {
-          class: normalizeClass([selected.value && "selected", _ctx.isMobilePage ? "mobile" : "pc", "pb-page-content"])
-        }, [
+        createElementVNode("div", mergeProps({
+          class: [selected.value && "selected", _ctx.isMobilePage ? "mobile" : "pc", "pb-page-content"]
+        }, properties.value), [
           (openBlock(true), createElementBlock(Fragment, null, renderList((_a = _ctx.page) == null ? void 0 : _a.children, (section, index) => {
-            return openBlock(), createBlock$1(_sfc_main$l, {
+            return openBlock(), createBlock$1(_sfc_main$k, {
               key: section.partId,
               part: section
             }, null, 8, ["part"]);
           }), 128))
-        ], 2),
+        ], 16),
         createElementVNode("div", {
           class: "pb-add-section-handle bottom",
           onClick: _cache[0] || (_cache[0] = ($event) => {
             var _a2, _b;
             return insertSection(((_b = (_a2 = _ctx.page) == null ? void 0 : _a2.children) == null ? void 0 : _b.length) || 0);
           })
-        }, _hoisted_2$5)
+        }, _hoisted_2$3)
       ], 4);
     };
   }
 });
-const _hoisted_1$b = /* @__PURE__ */ createElementVNode("div", { style: { "width": "20px" } }, null, -1);
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _hoisted_1$a = /* @__PURE__ */ createElementVNode("div", { style: { "width": "20px" } }, null, -1);
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "PbCanvas",
   setup(__props) {
     const pageBuilder = usePageBuilderEditor();
@@ -13223,13 +13697,13 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           style: normalizeStyle(style.value),
           class: "pb-canvas"
         }, [
-          createVNode(_sfc_main$d, {
+          createVNode(_sfc_main$c, {
             "is-mobile-page": true,
             page: pageS.value,
             width: 420
           }, null, 8, ["page"]),
-          _hoisted_1$b,
-          createVNode(_sfc_main$d, {
+          _hoisted_1$a,
+          createVNode(_sfc_main$c, {
             "is-mobile-page": false,
             page: pageL.value,
             width: 1024
@@ -13239,9 +13713,9 @@ 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-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$a = { class: "pb-canvas-frame" };
-const _sfc_main$b = /* @__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: 2px solid #4998f8;\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: 2px solid #4998f8;\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 #4998f8;\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 .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\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 .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-iframe-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-iframe-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\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: 0;\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 _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "PbCanvasFrame",
   setup(__props) {
     const pageBuilderEditor = usePageBuilderEditor();
@@ -13253,7 +13727,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         return (_b = (_a = iframeRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document;
       },
       () => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         if ((_c = (_b = (_a = iframeRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document) == null ? void 0 : _c.head) {
           const head = (_e = (_d = iframeRef.value) == null ? void 0 : _d.contentWindow) == null ? void 0 : _e.document.head;
           head.innerHTML = `
@@ -13276,14 +13750,24 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           <link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined" rel="stylesheet" />
           <style>${canvasStyle}</style>
         `;
-          pageBuilderEditor.keyHandlers.addDocumentKeyEventListener(iframeRef.value.contentWindow.document);
+          const script2 = (_g = (_f = iframeRef.value) == null ? void 0 : _f.contentWindow) == null ? void 0 : _g.document.createElement("script");
+          script2.innerHTML = `
+          function forwardPostMessage(event) {
+            if (event.data) {
+              window.parent.postMessage(event.data, '*');
+            }
+          }
+          window.addEventListener('message', forwardPostMessage);
+        `;
+          (_h = iframeRef.value) == null ? void 0 : _h.contentWindow.document.head.appendChild(script2);
+          pageBuilderEditor.keyHandlers.addDocumentKeyEventListener(iframeRef.value.contentWindow.document.body);
           stopIframeWatch();
         }
       }
     );
     return (_ctx, _cache) => {
       var _a, _b, _c, _d;
-      return openBlock(), createElementBlock("div", _hoisted_1$a, [
+      return openBlock(), createElementBlock("div", _hoisted_1$9, [
         createElementVNode("iframe", {
           ref_key: "iframeRef",
           ref: iframeRef,
@@ -13293,14 +13777,14 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           key: 0,
           to: (_d = (_c = iframeRef.value) == null ? void 0 : _c.contentWindow) == null ? void 0 : _d.document.body
         }, [
-          createVNode(_sfc_main$c)
+          createVNode(_sfc_main$b)
         ], 8, ["to"])) : createCommentVNode("", true)
       ]);
     };
   }
 });
-const _hoisted_1$9 = { class: "pb-tool-button bs-layout-horizontal flex-align-center" };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _hoisted_1$8 = { class: "pb-tool-button bs-layout-horizontal flex-align-center" };
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "PbToolbarButton",
   props: {
     button: {}
@@ -13313,14 +13797,14 @@ 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$9, [
+      return openBlock(), createElementBlock("div", _hoisted_1$8, [
         createElementVNode("div", {
           class: "tool-button bs-clickable",
           onClick: handleClick
         }, [
           _ctx.button.icon ? (openBlock(), createElementBlock("span", {
             key: 0,
-            style: normalizeStyle({ fontSize: _ctx.button.iconFontSize || "16px" }),
+            style: normalizeStyle({ fontSize: _ctx.button.iconFontSize || "20px" }),
             class: "font-icon"
           }, toDisplayString(_ctx.button.icon), 5)) : createCommentVNode("", true)
         ])
@@ -13328,17 +13812,17 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$8 = { class: "pb-tool-button-group bs-layout-horizontal flex-align-center" };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$7 = { class: "pb-tool-button-group bs-layout-horizontal flex-align-center" };
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "PbToolbarButtonGroup",
   props: {
     group: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$8, [
+      return openBlock(), createElementBlock("div", _hoisted_1$7, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.group.buttons, (button) => {
-          return openBlock(), createBlock$1(_sfc_main$a, {
+          return openBlock(), createBlock$1(_sfc_main$9, {
             key: button.buttonId,
             button
           }, null, 8, ["button"]);
@@ -13347,87 +13831,117 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$7 = { class: "pb-toolbar bs-layout-horizontal align-items-center" };
-const _hoisted_2$4 = { class: "ml-8 w-64" };
-const _hoisted_3$1 = { class: "ml-8 w-80" };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$6 = { class: "pb-toolbar bs-layout-horizontal align-items-center" };
+const _hoisted_2$2 = { class: "bs-layout-horizontal align-items-center" };
+const _hoisted_3$1 = /* @__PURE__ */ createElementVNode("div", { class: "flex-grow-1" }, null, -1);
+const _hoisted_4 = { class: "mr-8" };
+const _sfc_main$7 = /* @__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 lang = ref("English");
+    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$7, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(buttonGroups), (group) => {
-          return openBlock(), createBlock$1(_sfc_main$9, {
-            key: group.groupId,
-            group
-          }, null, 8, ["group"]);
-        }), 128)),
-        createElementVNode("div", _hoisted_2$4, [
+      var _a, _b, _c;
+      return openBlock(), createElementBlock("div", _hoisted_1$6, [
+        createElementVNode("div", _hoisted_2$2, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(buttonGroups), (group) => {
+            return openBlock(), createBlock$1(_sfc_main$8, {
+              key: group.groupId,
+              group
+            }, null, 8, ["group"]);
+          }), 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"])
         ]),
-        createElementVNode("div", _hoisted_3$1, [
-          createVNode(unref(BSSelect), {
-            modelValue: lang.value,
-            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => lang.value = $event),
-            items: ["English", "日本語", "한국어"],
-            "view-mode": false,
-            placeholder: "English"
-          }, null, 8, ["modelValue"])
+        _hoisted_3$1,
+        createElementVNode("div", _hoisted_4, [
+          _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$6 = { class: "pb-menu bs-layout-vertical" };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$5 = { class: "pb-menu bs-layout-vertical" };
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "PbMenu",
+  props: {
+    toolbarPlugin: {}
+  },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$6, [
-        createVNode(_sfc_main$8)
+      return openBlock(), createElementBlock("div", _hoisted_1$5, [
+        createVNode(_sfc_main$7, { plugin: _ctx.toolbarPlugin }, null, 8, ["plugin"])
       ]);
     };
   }
 });
-const _hoisted_1$5 = { class: "pb-navigator" };
-const _hoisted_2$3 = { class: "pb-navigator" };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$4 = { class: "bs-layout-vertical border" };
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "PbNavigator",
   setup(__props) {
     const pageBuilder = usePageBuilderEditor();
-    const tabs = [
-      { tabId: "pageS", caption: "Mobile" },
-      { tabId: "pageL", caption: "PC" }
-    ];
-    const pageS = computed(() => (pageBuilder.model.rootPart.children || [])[0].children || []);
-    const pageL = computed(() => (pageBuilder.model.rootPart.children || [])[1].children || []);
-    const tabId = computed({
-      get() {
-        const page = pageBuilder.context.getSelectedPage();
-        return page === (pageBuilder.model.rootPart.children || [])[1] ? "pageL" : "pageS";
-      },
-      // @ts-ignore
-      set(value) {
-      }
-    });
+    const tree = ref();
+    watch(() => tree.value, () => tree.value && pageBuilder.keyHandlers.addDocumentKeyEventListener(tree.value));
+    const page = computed(() => pageBuilder.model.rootPart.children || []);
+    let savedPartSelection = null;
     const treeDragAndDropPolicy = {
       dropStep: () => 3,
       isDroppable(_srcRow, _srcParentRow, _destRow, _destParentRow) {
@@ -13460,8 +13974,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
     const rowMoved = (event) => {
       var _a, _b, _c, _d, _e, _f;
-      let page = pageBuilder.context.getSelectedPage();
-      const parentPartId = ((_a = event.destParent) == null ? void 0 : _a.partId) || (page == null ? void 0 : page.partId);
+      let page2 = pageBuilder.context.getSelectedPage();
+      const parentPartId = ((_a = event.destParent) == null ? void 0 : _a.partId) || (page2 == null ? void 0 : page2.partId);
       if (!parentPartId)
         return;
       let ok = false;
@@ -13480,7 +13994,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         }
       }
       if (ok) {
-        pageBuilder.model.moveElements(event.row.partId, parentPartId, event.destIndex);
+        backupPartSelection();
+        pageBuilder.model.moveElements(event.row.partId, parentPartId, event.destIndex, void 0, true);
       }
     };
     const selectedRows = computed({
@@ -13496,6 +14011,10 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     const selectedRowsChanged = (rows) => {
       pageBuilder.context.setSelection([...rows]);
     };
+    const iconProvider = (part) => {
+      const def = pageBuilder.partManager.getPartDefinition(part.partName);
+      return (def == null ? void 0 : def.icon) || "";
+    };
     const labelProvider = (part) => {
       var _a;
       return part.getName() || ((_a = pageBuilder.partManager.getPartDefinition(part.partName)) == null ? void 0 : _a.caption) || part.partName;
@@ -13516,6 +14035,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     const modelUpdateHandler = (event) => {
       var _a;
       (_a = event.inserted) == null ? void 0 : _a.map((target) => findLeafPart(pageBuilder.model.findPartById(target.partId))).filter(notNull).forEach((part) => expandParent(part));
+      if (savedPartSelection) {
+        restorePartSelection();
+      }
     };
     const expandParent = (part) => {
       if (part.parent && part.parent.partName !== PAGE_TYPE) {
@@ -13523,6 +14045,15 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         expandParent(part.parent);
       }
     };
+    const backupPartSelection = () => {
+      savedPartSelection = [...pageBuilder.context.getSelectedParts()];
+    };
+    const restorePartSelection = () => {
+      if (savedPartSelection) {
+        pageBuilder.context.setSelection(savedPartSelection);
+        savedPartSelection = null;
+      }
+    };
     onMounted(() => {
       PageBuilderEditorEvent.on.modelUpdatedByUI(modelUpdateHandler);
     });
@@ -13530,65 +14061,40 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       PageBuilderEditorEvent.off.modelUpdatedByUI(modelUpdateHandler);
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock$1(unref(BSTabSheet), {
-        "tab-id": tabId.value,
-        "onUpdate:tabId": _cache[4] || (_cache[4] = ($event) => tabId.value = $event),
-        tabs
-      }, {
-        pageS: withCtx(() => [
-          createElementVNode("div", _hoisted_1$5, [
-            createVNode(unref(BSTree), {
-              expandedRows: expandedRows.value,
-              "onUpdate:expandedRows": [
-                _cache[0] || (_cache[0] = ($event) => expandedRows.value = $event),
-                expandedRowsChanged
-              ],
-              selectedRows: selectedRows.value,
-              "onUpdate:selectedRows": [
-                _cache[1] || (_cache[1] = ($event) => selectedRows.value = $event),
-                selectedRowsChanged
-              ],
-              data: pageS.value,
-              "enable-drag-and-drop": treeDragAndDropPolicy,
-              "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"])
-          ])
-        ]),
-        pageL: withCtx(() => [
-          createElementVNode("div", _hoisted_2$3, [
-            createVNode(unref(BSTree), {
-              expandedRows: expandedRows.value,
-              "onUpdate:expandedRows": [
-                _cache[2] || (_cache[2] = ($event) => expandedRows.value = $event),
-                expandedRowsChanged
-              ],
-              selectedRows: selectedRows.value,
-              "onUpdate:selectedRows": [
-                _cache[3] || (_cache[3] = ($event) => selectedRows.value = $event),
-                selectedRowsChanged
-              ],
-              data: pageL.value,
-              "enable-drag-and-drop": treeDragAndDropPolicy,
-              "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"])
-          ])
-        ]),
-        _: 1
-      }, 8, ["tab-id"]);
+      return openBlock(), createElementBlock("div", _hoisted_1$4, [
+        createElementVNode("div", {
+          ref_key: "tree",
+          ref: tree,
+          class: "pb-navigator",
+          tabindex: "0"
+        }, [
+          createVNode(unref(BSTree), {
+            expandedRows: expandedRows.value,
+            "onUpdate:expandedRows": [
+              _cache[0] || (_cache[0] = ($event) => expandedRows.value = $event),
+              expandedRowsChanged
+            ],
+            selectedRows: selectedRows.value,
+            "onUpdate:selectedRows": [
+              _cache[1] || (_cache[1] = ($event) => selectedRows.value = $event),
+              selectedRowsChanged
+            ],
+            data: page.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$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "PbSidebarPropertyEditor",
   props: {
     property: {},
@@ -13598,32 +14104,13 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const pageBuilder = usePageBuilderEditor();
     const propertyEditor = computed(() => {
-      var _a, _b, _c, _d;
-      if (pageBuilder.editMode === "local" && props.selectedParts.length > 0) {
-        const section = pageBuilder.partManager.findNearestSection(props.selectedParts[0]);
-        if (section && ["GlobalDesignPart"].includes(((_a = section.properties) == null ? void 0 : _a.sectionType) || "")) {
-          return;
-        }
-        if (section && ["LocalDesignPart", "LocalMarketingPart"].includes(((_b = section.properties) == null ? void 0 : _b.sectionType) || "")) {
-          if (!props.property.localized) {
-            return;
-          }
-        }
-      }
-      if (pageBuilder.editMode === "template" && props.selectedParts.length > 0) {
-        const section = pageBuilder.partManager.findNearestSection(props.selectedParts[0]);
-        if (section && ["LocalDesignPart", "LocalMarketingPart"].includes(((_c = section.properties) == null ? void 0 : _c.sectionType) || "")) {
-          if (props.property.localized) {
-            return;
-          }
-        }
-      }
+      var _a;
       if (props.property.propertyEditor) {
         const editor = props.property.propertyEditor(props.property, props.selectedParts);
         if (editor)
           return editor;
       }
-      return (_d = pageBuilder.partManager.getPartPropertyEditor(props.property.propertyType)) == null ? void 0 : _d(props.property, props.selectedParts);
+      return (_a = pageBuilder.partManager.getPartPropertyEditor(props.property.propertyType)) == null ? void 0 : _a(props.property, props.selectedParts);
     });
     const value = computed(() => getPropertyValueOfParts(props.selectedParts, props.property.propertyName));
     const updatePropertyValue = (properties) => {
@@ -13643,9 +14130,13 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$4 = { class: "pb-sidebar-property-group" };
-const _hoisted_2$2 = ["textContent"];
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$3 = { class: "pb-sidebar-property-group" };
+const _hoisted_2$1 = {
+  key: 0,
+  class: "group-title"
+};
+const _hoisted_3 = ["textContent"];
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "PbSidebarPropertyGroupEditor",
   props: {
     group: {},
@@ -13654,44 +14145,24 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const pageBuilder = usePageBuilderEditor();
     const groupEditor = computed(() => {
-      var _a, _b, _c, _d, _e;
-      if (pageBuilder.editMode === "local" && props.selectedParts.length > 0) {
-        const section = pageBuilder.partManager.findNearestSection(props.selectedParts[0]);
-        if (section && ["GlobalDesignPart"].includes(((_a = section.properties) == null ? void 0 : _a.sectionType) || "")) {
-          return;
-        }
-        if (section && ["LocalDesignPart", "LocalMarketingPart"].includes(((_b = section.properties) == null ? void 0 : _b.sectionType) || "")) {
-          if (!props.group.localized) {
-            return;
-          }
-        }
-      }
-      if (pageBuilder.editMode === "template" && props.selectedParts.length > 0) {
-        const section = pageBuilder.partManager.findNearestSection(props.selectedParts[0]);
-        if (section && ["LocalDesignPart", "LocalMarketingPart"].includes(((_c = section.properties) == null ? void 0 : _c.sectionType) || "")) {
-          if (props.group.localized) {
-            return;
-          }
-        }
-      }
-      return (_e = (_d = props.group).propertyGroupEditor) == null ? void 0 : _e.call(_d, props.group, props.selectedParts);
+      var _a, _b;
+      return (_b = (_a = props.group).propertyGroupEditor) == null ? void 0 : _b.call(_a, props.group, props.selectedParts);
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$4, [
-        _ctx.group.showGroupName ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          class: "group-title",
-          textContent: toDisplayString(_ctx.group.caption)
-        }, null, 8, _hoisted_2$2)) : createCommentVNode("", true),
+      return openBlock(), createElementBlock("div", _hoisted_1$3, [
+        _ctx.group.showGroupName ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
+          createElementVNode("label", {
+            textContent: toDisplayString(_ctx.group.caption)
+          }, null, 8, _hoisted_3)
+        ])) : createCommentVNode("", true),
         _ctx.partsKey ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
           groupEditor.value ? (openBlock(), createBlock$1(resolveDynamicComponent(groupEditor.value), {
             key: 0,
             group: _ctx.group,
             "selected-parts": _ctx.selectedParts
           }, null, 8, ["group", "selected-parts"])) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.group.properties, (property) => {
-            return openBlock(), createBlock$1(_sfc_main$5, {
+            return openBlock(), createBlock$1(_sfc_main$4, {
               key: `${_ctx.partsKey}_${property.propertyName}`,
               property,
               "selected-parts": _ctx.selectedParts
@@ -13702,102 +14173,6 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$3 = { class: "property-editor property-editor-local-part flex-align-center pt-16" };
-const _hoisted_2$1 = /* @__PURE__ */ createElementVNode("div", { class: "label" }, " Display Schedule ", -1);
-const _hoisted_3 = { class: "bs-layout-horizontal" };
-const _hoisted_4 = { class: "mr-2" };
-const _hoisted_5 = /* @__PURE__ */ createElementVNode("span", { class: "font-icon" }, "more_horiz", -1);
-const _hoisted_6 = [
-  _hoisted_5
-];
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  __name: "PbPropertyLocalMarketingPart",
-  props: {
-    selectedPart: {}
-  },
-  emits: ["select-schedule", "update-property-value"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    useModal();
-    const startDt = ref("");
-    const endDt = ref("");
-    const pageBuilder = usePageBuilderEditor();
-    const selectSchedule = () => {
-      PageBuilderEditorEvent.emit.requestLocalMarketingPartSchedule({
-        pageBuilderId: pageBuilder.instanceId,
-        partId: props.selectedPart.partId,
-        callback: (schedule) => {
-          startDt.value = schedule.startDt;
-          endDt.value = schedule.endDt;
-          if (props.selectedPart && props.selectedPart.isSection()) {
-            clearContents(props.selectedPart);
-            if (schedule.data) {
-              for (const partId in schedule.data) {
-                const part = findWidget(props.selectedPart, partId);
-                if (part) {
-                  Object.entries(schedule.data[partId]).forEach(([key, value]) => {
-                    if (!value)
-                      return;
-                    part.properties = part.properties || {};
-                    part.properties[key] = value;
-                  });
-                }
-              }
-            }
-          }
-        }
-      });
-    };
-    const findWidget = (part, partId) => {
-      if (!part)
-        return;
-      if (part.partId === partId)
-        return part;
-      if (part.children) {
-        for (const child of part.children) {
-          const found = findWidget(child, partId);
-          if (found)
-            return found;
-        }
-      }
-    };
-    const clearContents = (part) => {
-      if (!part)
-        return;
-      if (part.properties) {
-        for (const name in part.properties) {
-          const propertyDef = pageBuilder.partManager.getPropertyDefinition(part.partName, name);
-          if (propertyDef && propertyDef.localized) {
-            delete part.properties[name];
-          }
-        }
-      }
-      if (part.children) {
-        for (const child of part.children) {
-          clearContents(child);
-        }
-      }
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$3, [
-        _hoisted_2$1,
-        createElementVNode("div", _hoisted_3, [
-          createElementVNode("div", _hoisted_4, [
-            createVNode(unref(BSDateRange), {
-              "from-value": startDt.value,
-              "to-value": endDt.value,
-              resolution: "DAY",
-              width: "260px"
-            }, null, 8, ["from-value", "to-value"])
-          ]),
-          createElementVNode("div", null, [
-            createElementVNode("button", { onClick: selectSchedule }, _hoisted_6)
-          ])
-        ])
-      ]);
-    };
-  }
-});
 const _hoisted_1$2 = { class: "pb-sidebar-properties" };
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "PbSidebarProperties",
@@ -13816,29 +14191,13 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         return [];
       }
     });
-    const showLocalMarketingPart = computed(() => {
-      var _a;
-      if (pageBuilder.editMode === "template")
-        return false;
-      if (!selectedParts.length || selectedParts.length !== 1)
-        return false;
-      const part = selectedParts[0];
-      if (part.isSection() && ((_a = part.properties) == null ? void 0 : _a.sectionType) === "LocalMarketingPart") {
-        return true;
-      }
-      return false;
-    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$2, [
-        showLocalMarketingPart.value ? (openBlock(), createBlock$1(_sfc_main$3, {
-          key: 0,
-          "selected-part": unref(selectedParts)[0]
-        }, null, 8, ["selected-part"])) : createCommentVNode("", true),
         (openBlock(true), createElementBlock(Fragment, null, renderList(properties.value, (group) => {
           return openBlock(), createElementBlock("div", {
             key: `${partsKey.value}_${group.groupName}`
           }, [
-            createVNode(_sfc_main$4, {
+            createVNode(_sfc_main$3, {
               group,
               partsKey: partsKey.value,
               "selected-parts": unref(selectedParts)
@@ -13867,8 +14226,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     instanceId: {},
     title: {},
-    editMode: {},
-    pageContent: {}
+    pageContent: {},
+    locales: {},
+    locale: {},
+    toolbarPlugin: {},
+    plugin: {}
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
@@ -13876,76 +14238,43 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const pageBuilderEditor = createPageBuilderEditor();
     pageBuilderEditor.instanceId = props.instanceId;
     pageBuilderEditor.title = props.title;
-    pageBuilderEditor.editMode = props.editMode || "free";
+    if (props.locales)
+      pageBuilderEditor.setLocales(props.locales);
+    if (props.locale)
+      pageBuilderEditor.setLocale(props.locale);
+    if (props.plugin)
+      pageBuilderEditor.registerCustomPlugin(props.plugin);
     pageBuilderEditor.registerPlugin({
       // TODO
       commands: createDefaultCommands(modal)
     });
-    pageBuilderEditor.keyHandlers.addDocumentKeyEventListener(window.document);
     providePageBuilderEditor(pageBuilderEditor);
+    providePageBuilder(pageBuilderEditor);
     onMounted(() => pageBuilderEditor.initData(props.pageContent));
     watch(() => props.pageContent, (pageContent) => pageContent && pageBuilderEditor.initData(pageContent));
+    watch(() => props.locale, (locale) => {
+      pageBuilderEditor.setLocale(locale);
+    });
+    watch(() => props.locales, (locales) => {
+      pageBuilderEditor.setLocales(locales);
+    });
     const colorHistory = ref([]);
     provide("colorHistory", colorHistory);
-    const getLocalDesignPartContent = () => {
-      let content;
-      if (pageBuilderEditor.model.rootPart) {
-        content = doGetLocalDesignPartContent(pageBuilderEditor.model.rootPart);
-      }
-      return content;
-    };
-    const doGetLocalDesignPartContent = (part) => {
-      var _a;
-      let content;
-      if (((_a = part.properties) == null ? void 0 : _a.sectionType) && ["LocalDesignPart", "LocalMarketingPart"].includes(part.properties.sectionType)) {
-        const properties = getLocalDesignPartProperties(part);
-        if (properties) {
-          if (!content)
-            content = [];
-          content.push({ partId: part.partId, data: properties });
-        }
-      }
-      if (part.children) {
-        for (const child of part.children) {
-          const childContent = doGetLocalDesignPartContent(child);
-          if (childContent)
-            content = [...content || [], ...childContent];
-        }
-      }
-      return content;
-    };
-    const getLocalDesignPartProperties = (part) => {
-      let properties;
-      if (part.isWidget()) {
-        const defs = pageBuilderEditor.partManager.getLocalDesignPartPropertyDefinitions(part.partName);
-        if (defs) {
-          const data = {};
-          for (const def of defs) {
-            if (part.properties)
-              data[def.propertyName] = part.properties[def.propertyName];
-          }
-          properties = { [part.partId]: data };
-        }
-      }
-      if (part.children) {
-        for (const child of part.children) {
-          const childProperties = getLocalDesignPartProperties(child);
-          if (childProperties) {
-            properties = { ...properties, ...childProperties };
-          }
-        }
-      }
-      return properties;
+    const getPageContent = () => {
+      return pageBuilderEditor.model.serializeModel(
+        (part) => pageBuilderEditor.extractMedia(part),
+        (partObject) => pageBuilderEditor.extractProvider(partObject)
+      );
     };
     __expose({
-      getLocalDesignPartContent
+      getPageContent
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        createVNode(_sfc_main$7),
+        createVNode(_sfc_main$6, { "toolbar-plugin": _ctx.toolbarPlugin }, null, 8, ["toolbar-plugin"]),
         createElementVNode("div", _hoisted_2, [
-          createVNode(_sfc_main$6),
-          createVNode(_sfc_main$b, { class: "flex-grow-1" }),
+          createVNode(_sfc_main$5),
+          createVNode(_sfc_main$a, { class: "flex-grow-1" }),
           createVNode(_sfc_main$1)
         ])
       ]);
@@ -13955,27 +14284,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 export {
   BLOCK_TYPE$1 as B,
   Model$1 as M,
-  PageBuilderEditorEvent as P,
+  PbColorPicker as P,
   ROOT_TYPE$1 as R,
   SECTION_TYPE$1 as S,
   WIDGET_TYPE$1 as W,
   _sfc_main as _,
-  Block as a,
-  PAGE_TYPE$1 as b,
-  Page as c,
-  _sfc_main$q as d,
-  PageBuilderViewerEvent as e,
-  Part as f,
-  _sfc_main$4$1 as g,
-  _sfc_main$2$1 as h,
-  _sfc_main$3$1 as i,
-  RootPart as j,
-  Section as k,
-  Widget as l,
-  createPageBuilderViewer as m,
-  createPartComponent as n,
-  createPartComponents as o,
-  providePageBuilderViewer as p,
-  usePageBuilderViewer as q,
-  usePageBuilderEditor as u
+  PageBuilderEditorEvent as a,
+  Block as b,
+  PAGE_BUILDER_KEY as c,
+  PAGE_TYPE$1 as d,
+  Page as e,
+  _sfc_main$1$1 as f,
+  Part as g,
+  _sfc_main$p as h,
+  _sfc_main$4$1 as i,
+  _sfc_main$3$1 as j,
+  _sfc_main$6$1 as k,
+  _sfc_main$5$1 as l,
+  RootPart as m,
+  Section as n,
+  Widget as o,
+  createPageBuilderViewer as p,
+  createPartComponent as q,
+  createPartComponents as r,
+  providePageBuilder as s,
+  providePageBuilderViewer as t,
+  usePageBuilderEditor as u,
+  usePageBuilder as v,
+  widgetPartDefinitions as w,
+  usePageBuilderViewer as x
 };