@g1cloud/page-builder-editor 1.0.0-alpha.17 → 1.0.0-alpha.18

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

@@ -6599,7 +6599,7 @@ var __publicField = (obj, key, value) => {
   })(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]);
@@ -6615,57 +6615,30 @@ var __publicField = (obj, key, value) => {
       });
     } };
   }
-  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);
       }
     }
   };
@@ -6803,28 +6776,11 @@ var __publicField = (obj, key, value) => {
       }
       return style;
     }
-    getPageBuilderId() {
-      if (this.isRoot())
-        return this.pageBuilderId;
-      if (this.parent)
-        return this.parent.getPageBuilderId();
-    }
-    isGlobalDesignPart() {
-      return false;
-    }
-    isLocalDesignPart() {
-      return false;
-    }
-    isLocalMarketingPart() {
-      return false;
-    }
   }
   class RootPart extends Part {
     constructor() {
       super();
-      __publicField2(this, "pageBuilderId");
       __publicField2(this, "language");
-      this.pageBuilderId = "";
       this.language = "en";
       this.partType = ROOT_TYPE$1;
       this.partName = ROOT_TYPE$1;
@@ -6852,18 +6808,6 @@ var __publicField = (obj, key, value) => {
     isSection() {
       return true;
     }
-    isGlobalDesignPart() {
-      var _a;
-      return ((_a = this.properties) == null ? void 0 : _a.sectionType) === "GlobalDesignPart";
-    }
-    isLocalDesignPart() {
-      var _a;
-      return ((_a = this.properties) == null ? void 0 : _a.sectionType) === "LocalDesignPart";
-    }
-    isLocalMarketingPart() {
-      var _a;
-      return ((_a = this.properties) == null ? void 0 : _a.sectionType) === "LocalMarketingPart";
-    }
   }
   class Block extends Part {
     constructor() {
@@ -7020,9 +6964,9 @@ var __publicField = (obj, key, value) => {
     key: 1,
     class: "placeholder"
   };
-  const _hoisted_4$i = /* @__PURE__ */ vue.createElementVNode("span", { class: "font-icon" }, "image", -1);
-  const _hoisted_5$9 = [
-    _hoisted_4$i
+  const _hoisted_4$h = /* @__PURE__ */ vue.createElementVNode("span", { class: "font-icon" }, "image", -1);
+  const _hoisted_5$8 = [
+    _hoisted_4$h
   ];
   const _sfc_main$6$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbImageWidget",
@@ -7039,7 +6983,7 @@ var __publicField = (obj, key, value) => {
             src: (_b = _ctx.part.properties) == null ? void 0 : _b.image,
             alt: "",
             class: "image"
-          }, null, 8, _hoisted_2$3$1)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$3$1, _hoisted_5$9)) : vue.createCommentVNode("", true)
+          }, null, 8, _hoisted_2$3$1)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$3$1, _hoisted_5$8)) : vue.createCommentVNode("", true)
         ]);
       };
     }
@@ -7143,8 +7087,8 @@ ${_html.style}
     }
   });
   const _hoisted_1$1$1 = { class: "pb-iframe-widget" };
-  const _hoisted_2$v = ["src"];
-  const _hoisted_3$s = {
+  const _hoisted_2$t = ["src"];
+  const _hoisted_3$q = {
     key: 1,
     class: "placeholder",
     textContent: "Empty URL"
@@ -7191,7 +7135,7 @@ ${_html.style}
           url.value ? (vue.openBlock(), vue.createElementBlock("iframe", vue.mergeProps({
             key: 0,
             src: url.value
-          }, style.value), null, 16, _hoisted_2$v)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$s)) : vue.createCommentVNode("", true)
+          }, style.value), null, 16, _hoisted_2$t)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$q)) : vue.createCommentVNode("", true)
         ]);
       };
     }
@@ -7202,21 +7146,6 @@ ${_html.style}
       partName: "Section",
       creator: () => _sfc_main$7$1
     },
-    "GlobalDesignPart": {
-      partType: "Section",
-      partName: "GlobalDesignPart",
-      creator: () => _sfc_main$7$1
-    },
-    "LocalDesignPart": {
-      partType: "Section",
-      partName: "LocalDesignPart",
-      creator: () => _sfc_main$7$1
-    },
-    "LocalMarketingPart": {
-      partType: "Section",
-      partName: "LocalMarketingPart",
-      creator: () => _sfc_main$7$1
-    },
     "Block": {
       partType: "Block",
       partName: "Block",
@@ -7248,9 +7177,10 @@ ${_html.style}
   let partDefinitions$1 = { ...defaultPartDefinitions };
   class PageBuilderViewerImpl {
     constructor() {
-      __publicField2(this, "instanceId");
       __publicField2(this, "model");
       __publicField2(this, "locale", vue.ref("en"));
+      __publicField2(this, "watchers", {});
+      __publicField2(this, "providers", {});
       this.model = new Model$1();
     }
     getLocale() {
@@ -7264,33 +7194,45 @@ ${_html.style}
         plugin.widgets.forEach((v) => {
           const w = { ...v };
           w.partType = "Widget";
-          w.creator = () => _sfc_main$B;
+          w.creator = () => _sfc_main$z;
           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;
-      return def.dataWatcher(part.properties);
+      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();
-      return def.dataProvider(part.properties);
+      const provider = this.providers[def.dataProvider];
+      if (!provider)
+        return Promise.resolve();
+      return provider(part.properties);
     }
     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;
+      const rootPart = this.parsePartContent(pageContent);
+      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);
@@ -7312,6 +7254,8 @@ ${_html.style}
     }
     createPart(partType) {
       switch (partType) {
+        case "Root":
+          return new RootPart();
         case "Page":
           return new Page();
         case "Section":
@@ -7395,11 +7339,10 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$F = { class: "pb-viewer" };
+  const _hoisted_1$D = { class: "pb-viewer" };
   const _sfc_main$1$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PageBuilderViewer",
     props: {
-      instanceId: {},
       pageContent: {},
       isMobilePage: { type: Boolean },
       language: {},
@@ -7408,7 +7351,6 @@ ${_html.style}
     setup(__props) {
       const props = __props;
       const pageBuilderViewer = createPageBuilderViewer();
-      pageBuilderViewer.instanceId = props.instanceId;
       pageBuilderViewer.setLocale(props.language);
       if (props.plugin)
         pageBuilderViewer.registerCustomPlugin(props.plugin);
@@ -7429,7 +7371,7 @@ ${_html.style}
         }
       );
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$F, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$D, [
           page.value ? (vue.openBlock(), vue.createBlock(_sfc_main$2$1, {
             key: 0,
             "is-mobile-page": _ctx.isMobilePage,
@@ -7439,7 +7381,7 @@ ${_html.style}
       };
     }
   });
-  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     __name: "PbCustomWidget",
     props: {
       part: {},
@@ -7452,7 +7394,6 @@ ${_html.style}
       const comp = vue.computed(() => pageBuilder.getCustomWidgetComponent(props.part));
       const data = vue.ref({});
       const bind = vue.computed(() => ({
-        pageBuilderId: pageBuilder.instanceId,
         ...props.part.properties || {},
         placeholder: true,
         ...data.value || {}
@@ -7470,40 +7411,6 @@ ${_html.style}
       };
     }
   });
-  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 PART_ID_KEY = "partId";
   const PART_NAME_KEY = "partName";
   const RESERVED_ATTRIBUTES = [PART_ID_KEY, PART_NAME_KEY];
@@ -7674,6 +7581,9 @@ ${_html.style}
   const createPart = (partType, partName, properties) => {
     let part;
     switch (partType) {
+      case ROOT_TYPE:
+        part = new RootPart();
+        break;
       case PAGE_TYPE:
         part = new Page();
         break;
@@ -7731,10 +7641,6 @@ ${_html.style}
       __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();
@@ -7783,7 +7689,30 @@ ${_html.style}
       });
       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, doNotChangeIndex) {
@@ -8309,22 +8238,22 @@ ${_html.style}
     }
     return target;
   };
-  const _sfc_main$A = {};
-  const _hoisted_1$E = { class: "pb-add-widget-button" };
-  const _hoisted_2$u = /* @__PURE__ */ vue.createElementVNode("span", { class: "icon material-icons-outlined" }, "add_box", -1);
-  const _hoisted_3$r = /* @__PURE__ */ vue.createElementVNode("span", { class: "text" }, "Add Widget", -1);
-  const _hoisted_4$h = [
-    _hoisted_2$u,
-    _hoisted_3$r
+  const _sfc_main$y = {};
+  const _hoisted_1$C = { class: "pb-add-widget-button" };
+  const _hoisted_2$s = /* @__PURE__ */ vue.createElementVNode("span", { class: "icon material-icons-outlined" }, "add_box", -1);
+  const _hoisted_3$p = /* @__PURE__ */ vue.createElementVNode("span", { class: "text" }, "Add Widget", -1);
+  const _hoisted_4$g = [
+    _hoisted_2$s,
+    _hoisted_3$p
   ];
   function _sfc_render$1(_ctx, _cache) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$E, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$C, [
       vue.createElementVNode("button", {
         onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("add-widget", $event))
-      }, _hoisted_4$h)
+      }, _hoisted_4$g)
     ]);
   }
-  const PbAddWidgetButton = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["render", _sfc_render$1]]);
+  const PbAddWidgetButton = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["render", _sfc_render$1]]);
   const MOUSE_TRACKER_KEY = "mouseTracker";
   const MOUSE_TRACKER_NOT_FOUND = "MouseTracker not found";
   class MouseTracker {
@@ -8355,12 +8284,12 @@ ${_html.style}
       throw Error(MOUSE_TRACKER_NOT_FOUND);
     return mouseTracker;
   };
-  const _hoisted_1$D = ["data-model-id", "draggable"];
-  const _hoisted_2$t = {
+  const _hoisted_1$B = ["data-model-id", "draggable"];
+  const _hoisted_2$r = {
     key: 1,
     class: "children"
   };
-  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     __name: "PbWidget",
     props: {
       part: {}
@@ -8807,7 +8736,7 @@ ${_html.style}
             part: _ctx.part,
             placeholder: true
           }, null, 8, ["part"])) : vue.createCommentVNode("", true),
-          childComponents.value && childComponents.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$t, [
+          childComponents.value && childComponents.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$r, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(childComponents.value, (child) => {
               return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(child.component), {
                 key: child.part.partId,
@@ -8826,14 +8755,14 @@ ${_html.style}
             class: "resize-handle",
             onMousedown: _resize_mousedown
           }, null, 32)) : vue.createCommentVNode("", true)
-        ], 16, _hoisted_1$D)), [
+        ], 16, _hoisted_1$B)), [
           [vue.unref(vPartHandler), { pageBuilder: vue.unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
         ]);
       };
     }
   });
-  const _hoisted_1$C = ["data-model-id"];
-  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$A = ["data-model-id"];
+  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     __name: "PbBlock",
     props: {
       part: {}
@@ -9023,19 +8952,19 @@ ${_html.style}
             onAddWidget: addWidget
           })) : vue.createCommentVNode("", true),
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.part.children, (child) => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$z, {
+            return vue.openBlock(), vue.createBlock(_sfc_main$x, {
               key: child.partId,
               part: child
             }, null, 8, ["part"]);
           }), 128))
-        ], 16, _hoisted_1$C)), [
+        ], 16, _hoisted_1$A)), [
           [vue.unref(vPartHandler), { pageBuilder: vue.unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
         ]);
       };
     }
   });
-  const _hoisted_1$B = { class: "pb-block" };
-  const _hoisted_2$s = /* @__PURE__ */ vue.createElementVNode("div", {
+  const _hoisted_1$z = { class: "pb-block" };
+  const _hoisted_2$q = /* @__PURE__ */ vue.createElementVNode("div", {
     class: "pb-widget",
     style: { "margin": "0 auto" }
   }, [
@@ -9043,22 +8972,22 @@ ${_html.style}
       /* @__PURE__ */ vue.createElementVNode("h3", null, "Login Design Part")
     ])
   ], -1);
-  const _hoisted_3$q = [
-    _hoisted_2$s
+  const _hoisted_3$o = [
+    _hoisted_2$q
   ];
-  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     __name: "PbLoginDepart",
     props: {
       part: {}
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$B, _hoisted_3$q);
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$z, _hoisted_3$o);
       };
     }
   });
-  const _hoisted_1$A = ["data-model-id"];
-  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$y = ["data-model-id"];
+  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     __name: "PbSection",
     props: {
       part: {}
@@ -9077,13 +9006,7 @@ ${_html.style}
       const properties = vue.computed(() => ({ style: props.part.getStyles() }));
       const disabled = vue.computed(() => {
         var _a;
-        if (["static"].includes(((_a = props.part.properties) == null ? void 0 : _a.sectionType) || ""))
-          return true;
-        if (pageBuilder.editMode === "local" && props.part.isGlobalDesignPart())
-          return true;
-        if (pageBuilder.editMode === "global" && (props.part.isLocalDesignPart() || props.part.isLocalMarketingPart()))
-          return true;
-        return false;
+        return ["static"].includes(((_a = props.part.properties) == null ? void 0 : _a.sectionType) || "");
       });
       const addWidget = () => {
         pageBuilder.commandRegistry.executeCommand(OpenAddWidgetModalCommand.COMMAND_ID);
@@ -9169,13 +9092,13 @@ ${_html.style}
           style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
         }, properties.value), [
           ((_b = _ctx.part.properties) == null ? void 0 : _b.sectionType) === "static" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-            ((_c = _ctx.part.properties) == null ? void 0 : _c.name) === "Login Design Part" ? (vue.openBlock(), vue.createBlock(_sfc_main$x, {
+            ((_c = _ctx.part.properties) == null ? void 0 : _c.name) === "Login Design Part" ? (vue.openBlock(), vue.createBlock(_sfc_main$v, {
               key: 0,
               part: _ctx.part
             }, null, 8, ["part"])) : vue.createCommentVNode("", true)
           ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
             _ctx.part.children && _ctx.part.children.length > 0 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.part.children, (block) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$y, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$w, {
                 key: block.partId,
                 part: block
               }, null, 8, ["part"]);
@@ -9184,20 +9107,20 @@ ${_html.style}
               onAddWidget: addWidget
             }))
           ], 64))
-        ], 16, _hoisted_1$A)), [
+        ], 16, _hoisted_1$y)), [
           [vue.unref(vPartHandler), { pageBuilder: vue.unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
         ]);
       };
     }
   });
-  const _hoisted_1$z = { class: "group-editor group-editor-position" };
-  const _hoisted_2$r = { class: "flex-align-center" };
-  const _hoisted_3$p = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
+  const _hoisted_1$x = { class: "group-editor group-editor-position" };
+  const _hoisted_2$p = { class: "flex-align-center" };
+  const _hoisted_3$n = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Position" })
   ], -1);
-  const _hoisted_4$g = { class: "flex-grow-1" };
-  const _hoisted_5$8 = { class: "bg-gray-100 py-5 rounded-8" };
-  const _hoisted_6$7 = { class: "text-center" };
+  const _hoisted_4$f = { class: "flex-grow-1" };
+  const _hoisted_5$7 = { class: "bg-gray-100 py-5 rounded-8" };
+  const _hoisted_6$6 = { class: "text-center" };
   const _hoisted_7$6 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
   const _hoisted_8$6 = /* @__PURE__ */ vue.createElementVNode("div", {
     class: "d-inline-block text-center text-gray-300",
@@ -9206,7 +9129,7 @@ ${_html.style}
     /* @__PURE__ */ vue.createElementVNode("span", { class: "font-icon" }, "add")
   ], -1);
   const _hoisted_9$5 = { class: "text-center" };
-  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorPosition",
     props: {
       group: {},
@@ -9230,12 +9153,12 @@ ${_html.style}
       const updateTop = (value) => updatePropertyValue({ top: value });
       const updateBottom = (value) => updatePropertyValue({ bottom: value });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$z, [
-          vue.createElementVNode("div", _hoisted_2$r, [
-            _hoisted_3$p,
-            vue.createElementVNode("div", _hoisted_4$g, [
-              vue.createElementVNode("div", _hoisted_5$8, [
-                vue.createElementVNode("div", _hoisted_6$7, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [
+          vue.createElementVNode("div", _hoisted_2$p, [
+            _hoisted_3$n,
+            vue.createElementVNode("div", _hoisted_4$f, [
+              vue.createElementVNode("div", _hoisted_5$7, [
+                vue.createElementVNode("div", _hoisted_6$6, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": top.value,
                     class: "ml-4",
@@ -9277,13 +9200,13 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$y = { class: "group-editor group-editor-size" };
-  const _hoisted_2$q = { class: "flex-align-center" };
-  const _hoisted_3$o = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
+  const _hoisted_1$w = { class: "group-editor group-editor-size" };
+  const _hoisted_2$o = { class: "flex-align-center" };
+  const _hoisted_3$m = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Size" })
   ], -1);
-  const _hoisted_4$f = { class: "flex-grow-1 bs-layout-horizontal" };
-  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_4$e = { class: "flex-grow-1 bs-layout-horizontal" };
+  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorSize",
     props: {
       group: {},
@@ -9303,10 +9226,10 @@ ${_html.style}
       const updateWidth = (value) => updatePropertyValue({ width: value });
       const updateHeight = (value) => updatePropertyValue({ height: value });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$y, [
-          vue.createElementVNode("div", _hoisted_2$q, [
-            _hoisted_3$o,
-            vue.createElementVNode("div", _hoisted_4$f, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [
+          vue.createElementVNode("div", _hoisted_2$o, [
+            _hoisted_3$m,
+            vue.createElementVNode("div", _hoisted_4$e, [
               vue.createVNode(vue.unref(bluesea.BSTextInput), {
                 "model-value": width.value,
                 class: "flex-grow-1 mr-2",
@@ -9482,22 +9405,22 @@ ${_html.style}
       }
     }
   };
-  const _hoisted_1$x = { class: "vc-alpha" };
-  const _hoisted_2$p = { class: "vc-alpha-checkboard-wrap" };
-  const _hoisted_3$n = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_1$v = { class: "vc-alpha" };
+  const _hoisted_2$n = { class: "vc-alpha-checkboard-wrap" };
+  const _hoisted_3$l = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-alpha-picker" },
     null,
     -1
     /* HOISTED */
   );
-  const _hoisted_4$e = [
-    _hoisted_3$n
+  const _hoisted_4$d = [
+    _hoisted_3$l
   ];
   function render$4(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_Checkboard = vue.resolveComponent("Checkboard");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [
-      vue.createElementVNode("div", _hoisted_2$p, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$v, [
+      vue.createElementVNode("div", _hoisted_2$n, [
         vue.createVNode(_component_Checkboard)
       ]),
       vue.createElementVNode(
@@ -9526,7 +9449,7 @@ ${_html.style}
               class: "vc-alpha-pointer",
               style: vue.normalizeStyle({ left: `${$options.colors.a * 100}%` })
             },
-            _hoisted_4$e,
+            _hoisted_4$d,
             4
             /* STYLE */
           )
@@ -10600,12 +10523,12 @@ ${_html.style}
       // }
     }
   };
-  const _hoisted_1$w = { class: "vc-editable-input" };
-  const _hoisted_2$o = ["aria-labelledby"];
-  const _hoisted_3$m = ["id", "for"];
-  const _hoisted_4$d = { class: "vc-input__desc" };
+  const _hoisted_1$u = { class: "vc-editable-input" };
+  const _hoisted_2$m = ["aria-labelledby"];
+  const _hoisted_3$k = ["id", "for"];
+  const _hoisted_4$c = { class: "vc-input__desc" };
   function render$3(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$u, [
       vue.withDirectives(vue.createElementVNode("input", {
         ref: "input",
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $options.val = $event),
@@ -10613,17 +10536,17 @@ ${_html.style}
         class: "vc-input__input",
         onKeydown: _cache[1] || (_cache[1] = (...args) => $options.handleKeyDown && $options.handleKeyDown(...args)),
         onInput: _cache[2] || (_cache[2] = (...args) => $options.update && $options.update(...args))
-      }, null, 40, _hoisted_2$o), [
+      }, null, 40, _hoisted_2$m), [
         [vue.vModelText, $options.val]
       ]),
       vue.createElementVNode("span", {
         id: $options.labelId,
         for: $props.label,
         class: "vc-input__label"
-      }, vue.toDisplayString($options.labelSpanText), 9, _hoisted_3$m),
+      }, vue.toDisplayString($options.labelSpanText), 9, _hoisted_3$k),
       vue.createElementVNode(
         "span",
-        _hoisted_4$d,
+        _hoisted_4$c,
         vue.toDisplayString($props.desc),
         1
         /* TEXT */
@@ -10700,29 +10623,29 @@ ${_html.style}
       }
     }
   };
-  const _hoisted_1$v = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_1$t = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-saturation--white" },
     null,
     -1
     /* HOISTED */
   );
-  const _hoisted_2$n = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_2$l = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-saturation--black" },
     null,
     -1
     /* HOISTED */
   );
-  const _hoisted_3$l = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_3$j = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-saturation-circle" },
     null,
     -1
     /* HOISTED */
   );
-  const _hoisted_4$c = [
-    _hoisted_3$l
+  const _hoisted_4$b = [
+    _hoisted_3$j
   ];
   function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock(
@@ -10736,15 +10659,15 @@ ${_html.style}
         onTouchstart: _cache[2] || (_cache[2] = (...args) => $options.handleChange && $options.handleChange(...args))
       },
       [
-        _hoisted_1$v,
-        _hoisted_2$n,
+        _hoisted_1$t,
+        _hoisted_2$l,
         vue.createElementVNode(
           "div",
           {
             class: "vc-saturation-pointer",
             style: vue.normalizeStyle({ top: $options.pointerTop, left: $options.pointerLeft })
           },
-          _hoisted_4$c,
+          _hoisted_4$b,
           4
           /* STYLE */
         )
@@ -10885,16 +10808,16 @@ ${_html.style}
       }
     }
   };
-  const _hoisted_1$u = ["aria-valuenow"];
-  const _hoisted_2$m = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_1$s = ["aria-valuenow"];
+  const _hoisted_2$k = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-hue-picker" },
     null,
     -1
     /* HOISTED */
   );
-  const _hoisted_3$k = [
-    _hoisted_2$m
+  const _hoisted_3$i = [
+    _hoisted_2$k
   ];
   function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock(
@@ -10921,11 +10844,11 @@ ${_html.style}
               style: vue.normalizeStyle({ top: $options.pointerTop, left: $options.pointerLeft }),
               role: "presentation"
             },
-            _hoisted_3$k,
+            _hoisted_3$i,
             4
             /* STYLE */
           )
-        ], 40, _hoisted_1$u)
+        ], 40, _hoisted_1$s)
       ],
       2
       /* CLASS */
@@ -11021,15 +10944,15 @@ ${_html.style}
       }
     }
   };
-  const _hoisted_1$t = { class: "vc-sketch-saturation-wrap" };
-  const _hoisted_2$l = { class: "vc-sketch-controls" };
-  const _hoisted_3$j = { class: "vc-sketch-sliders" };
-  const _hoisted_4$b = { class: "vc-sketch-hue-wrap" };
-  const _hoisted_5$7 = {
+  const _hoisted_1$r = { class: "vc-sketch-saturation-wrap" };
+  const _hoisted_2$j = { class: "vc-sketch-controls" };
+  const _hoisted_3$h = { class: "vc-sketch-sliders" };
+  const _hoisted_4$a = { class: "vc-sketch-hue-wrap" };
+  const _hoisted_5$6 = {
     key: 0,
     class: "vc-sketch-alpha-wrap"
   };
-  const _hoisted_6$6 = { class: "vc-sketch-color-wrap" };
+  const _hoisted_6$5 = { class: "vc-sketch-color-wrap" };
   const _hoisted_7$5 = ["aria-label"];
   const _hoisted_8$5 = {
     key: 0,
@@ -11064,28 +10987,28 @@ ${_html.style}
         class: vue.normalizeClass(["vc-sketch", [$props.disableAlpha ? "vc-sketch__disable-alpha" : ""]])
       },
       [
-        vue.createElementVNode("div", _hoisted_1$t, [
+        vue.createElementVNode("div", _hoisted_1$r, [
           vue.createVNode(_component_Saturation, {
             value: _ctx.colors,
             onChange: $options.childChange
           }, null, 8, ["value", "onChange"])
         ]),
-        vue.createElementVNode("div", _hoisted_2$l, [
-          vue.createElementVNode("div", _hoisted_3$j, [
-            vue.createElementVNode("div", _hoisted_4$b, [
+        vue.createElementVNode("div", _hoisted_2$j, [
+          vue.createElementVNode("div", _hoisted_3$h, [
+            vue.createElementVNode("div", _hoisted_4$a, [
               vue.createVNode(_component_Hue, {
                 value: _ctx.colors,
                 onChange: $options.childChange
               }, null, 8, ["value", "onChange"])
             ]),
-            !$props.disableAlpha ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$7, [
+            !$props.disableAlpha ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$6, [
               vue.createVNode(_component_Alpha, {
                 value: _ctx.colors,
                 onChange: $options.childChange
               }, null, 8, ["value", "onChange"])
             ])) : vue.createCommentVNode("v-if", true)
           ]),
-          vue.createElementVNode("div", _hoisted_6$6, [
+          vue.createElementVNode("div", _hoisted_6$5, [
             vue.createElementVNode("div", {
               "aria-label": `Current color is ${$options.activeColor}`,
               class: "vc-sketch-active-color",
@@ -11176,7 +11099,7 @@ ${_html.style}
   script.render = render;
   script.__file = "src/components/sketch/sketch.vue";
   script.install = install;
-  const _sfc_main$t = vue.defineComponent({
+  const _sfc_main$r = vue.defineComponent({
     name: "PbColorPicker",
     components: {
       Sketch: script
@@ -11240,12 +11163,12 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$s = { class: "buttons" };
-  const _hoisted_2$k = /* @__PURE__ */ vue.createElementVNode("i", { class: "material-icons-outlined" }, "delete", -1);
-  const _hoisted_3$i = [
-    _hoisted_2$k
+  const _hoisted_1$q = { class: "buttons" };
+  const _hoisted_2$i = /* @__PURE__ */ vue.createElementVNode("i", { class: "material-icons-outlined" }, "delete", -1);
+  const _hoisted_3$g = [
+    _hoisted_2$i
   ];
-  const _hoisted_4$a = { class: "sketch-wrap" };
+  const _hoisted_4$9 = { class: "sketch-wrap" };
   function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_Sketch = vue.resolveComponent("Sketch");
     const _directive_click_outside = vue.resolveDirective("click-outside");
@@ -11254,7 +11177,7 @@ ${_html.style}
       onKeydown: _cache[3] || (_cache[3] = vue.withModifiers(() => {
       }, ["stop"]))
     }, [
-      vue.createElementVNode("div", _hoisted_1$s, [
+      vue.createElementVNode("div", _hoisted_1$q, [
         vue.renderSlot(_ctx.$slots, "button", vue.normalizeProps(vue.guardReactiveProps({ toggle: _ctx.toggle, color: _ctx.color })), () => [
           vue.createElementVNode("button", {
             class: vue.normalizeClass([{ none: !_ctx.color }, "pb-button picker-button"]),
@@ -11266,9 +11189,9 @@ ${_html.style}
           key: 0,
           class: "pb-button",
           onClick: _cache[1] || (_cache[1] = (...args) => _ctx.emptyColor && _ctx.emptyColor(...args))
-        }, _hoisted_3$i)) : vue.createCommentVNode("", true)
+        }, _hoisted_3$g)) : vue.createCommentVNode("", true)
       ]),
-      vue.createElementVNode("div", _hoisted_4$a, [
+      vue.createElementVNode("div", _hoisted_4$9, [
         _ctx.isShowColorPicker ? (vue.openBlock(), vue.createBlock(_component_Sketch, {
           key: 0,
           modelValue: _ctx.color,
@@ -11280,15 +11203,15 @@ ${_html.style}
       [_directive_click_outside, () => _ctx.toggle(false)]
     ]);
   }
-  const PbColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render]]);
-  const _hoisted_1$r = { class: "group-editor group-editor-background" };
-  const _hoisted_2$j = { class: "flex-align-center" };
-  const _hoisted_3$h = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
+  const PbColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["render", _sfc_render]]);
+  const _hoisted_1$p = { class: "group-editor group-editor-background" };
+  const _hoisted_2$h = { class: "flex-align-center" };
+  const _hoisted_3$f = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Background" })
   ], -1);
-  const _hoisted_4$9 = { class: "bs-layout-horizontal" };
-  const _hoisted_5$6 = { class: "color" };
-  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_4$8 = { class: "bs-layout-horizontal" };
+  const _hoisted_5$5 = { class: "color" };
+  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorBackground",
     props: {
       group: {},
@@ -11297,6 +11220,7 @@ ${_html.style}
     setup(__props) {
       const props = __props;
       const pageBuilder = usePageBuilderEditor();
+      const modal = bluesea.useModal();
       const color = vue.computed(() => getPropertyValueOfParts(props.selectedParts, "backgroundColor"));
       const emptyColor = () => {
       };
@@ -11310,19 +11234,19 @@ ${_html.style}
       };
       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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
-          vue.createElementVNode("div", _hoisted_2$j, [
-            _hoisted_3$h,
-            vue.createElementVNode("div", _hoisted_4$9, [
-              vue.createElementVNode("div", _hoisted_5$6, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
+          vue.createElementVNode("div", _hoisted_2$h, [
+            _hoisted_3$f,
+            vue.createElementVNode("div", _hoisted_4$8, [
+              vue.createElementVNode("div", _hoisted_5$5, [
                 vue.createVNode(PbColorPicker, {
                   value: color.value,
                   "hide-delete": "",
@@ -11351,16 +11275,16 @@ ${_html.style}
   const TopRightCornerIcon = "data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Transformed%20by:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='%23000000'%3e%3cg%20id='SVGRepo_bgCarrier'%20stroke-width='0'/%3e%3cg%20id='SVGRepo_tracerCarrier'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cg%20id='SVGRepo_iconCarrier'%3e%3cg%3e%3cpath%20fill='none'%20d='M0%200H24V24H0z'/%3e%3cpath%20d='M21%2019v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2H7v-2h2zm-4%200v2H3v-2h2zm16-4v2h-2v-2h2zM5%2015v2H3v-2h2zm0-4v2H3v-2h2zm11-8c2.687%200%204.882%202.124%204.995%204.783L21%208v5h-2V8c0-1.591-1.255-2.903-2.824-2.995L16%205h-5V3h5zM5%207v2H3V7h2zm0-4v2H3V3h2zm4%200v2H7V3h2z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
   const BottomLeftCornerIcon = "data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Transformed%20by:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='%23000000'%20transform='rotate(180)'%3e%3cg%20id='SVGRepo_bgCarrier'%20stroke-width='0'/%3e%3cg%20id='SVGRepo_tracerCarrier'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cg%20id='SVGRepo_iconCarrier'%3e%3cg%3e%3cpath%20fill='none'%20d='M0%200H24V24H0z'/%3e%3cpath%20d='M21%2019v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2H7v-2h2zm-4%200v2H3v-2h2zm16-4v2h-2v-2h2zM5%2015v2H3v-2h2zm0-4v2H3v-2h2zm11-8c2.687%200%204.882%202.124%204.995%204.783L21%208v5h-2V8c0-1.591-1.255-2.903-2.824-2.995L16%205h-5V3h5zM5%207v2H3V7h2zm0-4v2H3V3h2zm4%200v2H7V3h2z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
   const BottomRightCornerIcon = "data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Transformed%20by:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='%23000000'%20transform='rotate(90)'%3e%3cg%20id='SVGRepo_bgCarrier'%20stroke-width='0'/%3e%3cg%20id='SVGRepo_tracerCarrier'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cg%20id='SVGRepo_iconCarrier'%3e%3cg%3e%3cpath%20fill='none'%20d='M0%200H24V24H0z'/%3e%3cpath%20d='M21%2019v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2H7v-2h2zm-4%200v2H3v-2h2zm16-4v2h-2v-2h2zM5%2015v2H3v-2h2zm0-4v2H3v-2h2zm11-8c2.687%200%204.882%202.124%204.995%204.783L21%208v5h-2V8c0-1.591-1.255-2.903-2.824-2.995L16%205h-5V3h5zM5%207v2H3V7h2zm0-4v2H3V3h2zm4%200v2H7V3h2z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
-  const _hoisted_1$q = { class: "group-editor group-editor-border" };
-  const _hoisted_2$i = { class: "flex-align-center" };
-  const _hoisted_3$g = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
+  const _hoisted_1$o = { class: "group-editor group-editor-border" };
+  const _hoisted_2$g = { class: "flex-align-center" };
+  const _hoisted_3$e = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Border" })
   ], -1);
-  const _hoisted_4$8 = { class: "" };
-  const _hoisted_5$5 = /* @__PURE__ */ vue.createElementVNode("div", { class: "sub-title" }, [
+  const _hoisted_4$7 = { class: "" };
+  const _hoisted_5$4 = /* @__PURE__ */ vue.createElementVNode("div", { class: "sub-title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Color" })
   ], -1);
-  const _hoisted_6$5 = { class: "color" };
+  const _hoisted_6$4 = { class: "color" };
   const _hoisted_7$4 = { class: "mt-8" };
   const _hoisted_8$4 = /* @__PURE__ */ vue.createElementVNode("div", { class: "sub-title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Border Width" })
@@ -11384,7 +11308,7 @@ ${_html.style}
   const _hoisted_18 = { class: "bg-gray-100 py-5 rounded-8" };
   const _hoisted_19 = { class: "" };
   const _hoisted_20 = { class: "mt-2" };
-  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorBorder",
     props: {
       group: {},
@@ -11422,12 +11346,12 @@ ${_html.style}
       const updateBorderBottomLeftRadius = (value) => updatePropertyValue({ borderBottomLeftRadius: value });
       const updateBorderBottomRightRadius = (value) => updatePropertyValue({ borderBottomRightRadius: value });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
-          vue.createElementVNode("div", _hoisted_2$i, [
-            _hoisted_3$g,
-            vue.createElementVNode("div", _hoisted_4$8, [
-              _hoisted_5$5,
-              vue.createElementVNode("div", _hoisted_6$5, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
+          vue.createElementVNode("div", _hoisted_2$g, [
+            _hoisted_3$e,
+            vue.createElementVNode("div", _hoisted_4$7, [
+              _hoisted_5$4,
+              vue.createElementVNode("div", _hoisted_6$4, [
                 vue.createVNode(PbColorPicker, {
                   value: color.value,
                   "hide-delete": "",
@@ -11531,14 +11455,14 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$p = { class: "group-editor group-editor-margin" };
-  const _hoisted_2$h = { class: "flex-align-center" };
-  const _hoisted_3$f = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
+  const _hoisted_1$n = { class: "group-editor group-editor-margin" };
+  const _hoisted_2$f = { class: "flex-align-center" };
+  const _hoisted_3$d = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Margin" })
   ], -1);
-  const _hoisted_4$7 = { class: "flex-grow-1" };
-  const _hoisted_5$4 = { class: "bg-gray-100 py-5 rounded-8" };
-  const _hoisted_6$4 = { class: "text-center" };
+  const _hoisted_4$6 = { class: "flex-grow-1" };
+  const _hoisted_5$3 = { class: "bg-gray-100 py-5 rounded-8" };
+  const _hoisted_6$3 = { class: "text-center" };
   const _hoisted_7$3 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
   const _hoisted_8$3 = /* @__PURE__ */ vue.createElementVNode("div", {
     class: "d-inline-block text-center text-gray-300",
@@ -11547,7 +11471,7 @@ ${_html.style}
     /* @__PURE__ */ vue.createElementVNode("span", { class: "font-icon" }, "add")
   ], -1);
   const _hoisted_9$2 = { class: "text-center" };
-  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorMargin",
     props: {
       group: {},
@@ -11571,12 +11495,12 @@ ${_html.style}
       const updateTop = (value) => updatePropertyValue({ marginTop: value });
       const updateBottom = (value) => updatePropertyValue({ marginBottom: value });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
-          vue.createElementVNode("div", _hoisted_2$h, [
-            _hoisted_3$f,
-            vue.createElementVNode("div", _hoisted_4$7, [
-              vue.createElementVNode("div", _hoisted_5$4, [
-                vue.createElementVNode("div", _hoisted_6$4, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
+          vue.createElementVNode("div", _hoisted_2$f, [
+            _hoisted_3$d,
+            vue.createElementVNode("div", _hoisted_4$6, [
+              vue.createElementVNode("div", _hoisted_5$3, [
+                vue.createElementVNode("div", _hoisted_6$3, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": top.value,
                     class: "ml-4",
@@ -11618,14 +11542,14 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$o = { class: "group-editor group-editor-padding" };
-  const _hoisted_2$g = { class: "flex-align-center" };
-  const _hoisted_3$e = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
+  const _hoisted_1$m = { class: "group-editor group-editor-padding" };
+  const _hoisted_2$e = { class: "flex-align-center" };
+  const _hoisted_3$c = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Padding" })
   ], -1);
-  const _hoisted_4$6 = { class: "flex-grow-1" };
-  const _hoisted_5$3 = { class: "bg-gray-100 py-5 rounded-8" };
-  const _hoisted_6$3 = { class: "text-center" };
+  const _hoisted_4$5 = { class: "flex-grow-1" };
+  const _hoisted_5$2 = { class: "bg-gray-100 py-5 rounded-8" };
+  const _hoisted_6$2 = { class: "text-center" };
   const _hoisted_7$2 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
   const _hoisted_8$2 = /* @__PURE__ */ vue.createElementVNode("div", {
     class: "d-inline-block text-center text-gray-300",
@@ -11634,7 +11558,7 @@ ${_html.style}
     /* @__PURE__ */ vue.createElementVNode("span", { class: "font-icon" }, "add")
   ], -1);
   const _hoisted_9$1 = { class: "text-center" };
-  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorPadding",
     props: {
       group: {},
@@ -11658,12 +11582,12 @@ ${_html.style}
       const updateTop = (value) => updatePropertyValue({ paddingTop: value });
       const updateBottom = (value) => updatePropertyValue({ paddingBottom: value });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
-          vue.createElementVNode("div", _hoisted_2$g, [
-            _hoisted_3$e,
-            vue.createElementVNode("div", _hoisted_4$6, [
-              vue.createElementVNode("div", _hoisted_5$3, [
-                vue.createElementVNode("div", _hoisted_6$3, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
+          vue.createElementVNode("div", _hoisted_2$e, [
+            _hoisted_3$c,
+            vue.createElementVNode("div", _hoisted_4$5, [
+              vue.createElementVNode("div", _hoisted_5$2, [
+                vue.createElementVNode("div", _hoisted_6$2, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": top.value,
                     class: "ml-4",
@@ -11731,7 +11655,7 @@ ${_html.style}
           propertyType: "text"
         }
       ],
-      propertyGroupEditor: () => _sfc_main$v
+      propertyGroupEditor: () => _sfc_main$t
     };
   };
   const sizeGroup = () => {
@@ -11770,7 +11694,7 @@ ${_html.style}
           propertyType: "text"
         }
       ],
-      propertyGroupEditor: () => _sfc_main$u
+      propertyGroupEditor: () => _sfc_main$s
     };
   };
   const marginGroup = () => {
@@ -11799,7 +11723,7 @@ ${_html.style}
           propertyType: "text"
         }
       ],
-      propertyGroupEditor: () => _sfc_main$q
+      propertyGroupEditor: () => _sfc_main$o
     };
   };
   const paddingGroup = () => {
@@ -11828,7 +11752,7 @@ ${_html.style}
           propertyType: "text"
         }
       ],
-      propertyGroupEditor: () => _sfc_main$p
+      propertyGroupEditor: () => _sfc_main$n
     };
   };
   const commonGroup = () => {
@@ -11895,7 +11819,7 @@ ${_html.style}
           propertyType: "image"
         }
       ],
-      propertyGroupEditor: () => _sfc_main$s
+      propertyGroupEditor: () => _sfc_main$q
     };
   };
   const borderGroup = () => {
@@ -11949,7 +11873,7 @@ ${_html.style}
           propertyType: "text"
         }
       ],
-      propertyGroupEditor: () => _sfc_main$r
+      propertyGroupEditor: () => _sfc_main$p
     };
   };
   const defaultPropertyGroups = () => {
@@ -11958,56 +11882,6 @@ ${_html.style}
   const defaultWidgetPropertyGroups = () => {
     return [positionGroup(), sizeGroup(), marginGroup(), paddingGroup(), borderGroup(), backgroundGroup(), commonGroup()];
   };
-  const designParts = [
-    {
-      partType: "Section",
-      partName: "GlobalDesignPart",
-      caption: "Global Design Part",
-      icon: "rectangle",
-      propertyGroups: [
-        ...defaultPropertyGroups()
-      ],
-      initialProperties: {
-        sectionType: "globalDesignPart",
-        direction: "horizontal"
-      },
-      localized: false,
-      allowsChild: () => true,
-      creator: () => _sfc_main$w
-    },
-    {
-      partType: "Section",
-      partName: "LocalDesignPart",
-      caption: "Local Design Part",
-      icon: "rectangle",
-      propertyGroups: [
-        ...defaultPropertyGroups()
-      ],
-      initialProperties: {
-        sectionType: "localDesignPart",
-        direction: "horizontal"
-      },
-      localized: true,
-      allowsChild: () => true,
-      creator: () => _sfc_main$w
-    },
-    {
-      partType: "Section",
-      partName: "LocalMarketingPart",
-      caption: "Local Marketing Part",
-      icon: "rectangle",
-      propertyGroups: [
-        ...defaultPropertyGroups()
-      ],
-      initialProperties: {
-        sectionType: "localMarketingPart",
-        direction: "horizontal"
-      },
-      localized: true,
-      allowsChild: () => true,
-      creator: () => _sfc_main$w
-    }
-  ];
   const sectionParts = [
     {
       partType: "Section",
@@ -12022,7 +11896,7 @@ ${_html.style}
       },
       localized: false,
       allowsChild: () => true,
-      creator: () => _sfc_main$w
+      creator: () => _sfc_main$u
     }
   ];
   const blockParts = [
@@ -12037,7 +11911,7 @@ ${_html.style}
       initialProperties: {},
       localized: false,
       allowsChild: () => true,
-      creator: () => _sfc_main$y
+      creator: () => _sfc_main$w
     }
   ];
   const widgets = [
@@ -12166,9 +12040,6 @@ ${_html.style}
     }
   ];
   const partDefinitions = {};
-  for (let part of designParts) {
-    partDefinitions[part.partName] = part;
-  }
   for (let part of sectionParts) {
     partDefinitions[part.partName] = part;
   }
@@ -12178,13 +12049,6 @@ ${_html.style}
   for (let part of widgets) {
     partDefinitions[part.partName] = part;
   }
-  const designPartDefinitions = [
-    {
-      groupName: "DesignParts",
-      caption: "Design Parts",
-      partDefinitions: designParts
-    }
-  ];
   [
     {
       groupName: "Layout",
@@ -12241,19 +12105,6 @@ ${_html.style}
       }
     }
   }
-  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);
@@ -12267,28 +12118,6 @@ ${_html.style}
   };
   __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
   let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
-  const openPartAddModal = (modal, args, callback) => {
-    modal.openModal({
-      component: vue.defineAsyncComponent(() => Promise.resolve().then(() => PbPartAddModal)),
-      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: vue.defineAsyncComponent(() => Promise.resolve().then(() => PbWidgetAddModal)),
@@ -12303,12 +12132,12 @@ ${_html.style}
       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);
@@ -12661,7 +12490,7 @@ ${_html.style}
     }
   };
   __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) {
@@ -12674,7 +12503,7 @@ ${_html.style}
     }
   };
   __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() {
@@ -12823,6 +12652,20 @@ ${_html.style}
   __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);
@@ -12830,7 +12673,7 @@ ${_html.style}
     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);
       }
     }
@@ -12853,12 +12696,34 @@ ${_html.style}
       __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);
+          }
         }
       }
     }
@@ -12879,7 +12744,6 @@ ${_html.style}
   let SelectAllPartsCommand = _SelectAllPartsCommand;
   const createDefaultCommands = (modal) => {
     return [
-      new OpenAddPartModalCommand(modal),
       new OpenAddWidgetModalCommand(modal),
       new AddPartCommand(modal),
       new AddSectionCommand(modal),
@@ -12897,6 +12761,7 @@ ${_html.style}
       new AddWidgetInsideCommand(modal),
       new ChangePropertyCommand(),
       new DeletePartCommand(),
+      new CopyAllCommand(),
       new CopyPartCommand(),
       new CutPartCommand(),
       new PastePartCommand(),
@@ -13064,17 +12929,8 @@ ${_html.style}
         }
       },
       {
-        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,
+        groupId: "core:edit",
+        commandId: DeletePartCommand.COMMAND_ID,
         precedence: 10,
         getMenuItem(pageBuilder) {
           if (pageBuilder.context.hasSelection() && !pageBuilder.context.isPageSelected()) {
@@ -13146,6 +13002,12 @@ ${_html.style}
             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",
@@ -13391,15 +13253,14 @@ ${_html.style}
       __publicField(this, "keyHandlers", new KeyHandlersImpl(this));
       __publicField(this, "toolButtonRegistry", new ToolButtonRegistryImpl());
       __publicField(this, "title");
-      __publicField(this, "editMode");
       __publicField(this, "scale", vue.ref(1));
       __publicField(this, "locale", vue.ref("en"));
       __publicField(this, "locales", vue.ref(["en"]));
       __publicField(this, "customWidgets", []);
+      __publicField(this, "watchers", {});
       __publicField(this, "providers", {});
       this.model = new Model();
       this.context = new PageBuilderContextImpl(this);
-      this.editMode = "free";
       this.scale.value = 1;
       this.initPlugins();
     }
@@ -13428,13 +13289,19 @@ ${_html.style}
       const def = this.partManager.getPartDefinition(part.partName);
       if (!def || !def.dataWatcher)
         return false;
-      return def.dataWatcher(part.properties);
+      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();
-      return def.dataProvider(part.properties);
+      const provider = this.providers[def.dataProvider];
+      if (!provider)
+        return Promise.resolve();
+      return provider(part.properties);
     }
     registerPlugin(plugin) {
       if (plugin.partDefinitions)
@@ -13458,7 +13325,7 @@ ${_html.style}
         plugin.widgets.forEach((v) => {
           const w = { ...v };
           w.partType = "Widget";
-          w.creator = () => _sfc_main$B;
+          w.creator = () => _sfc_main$z;
           w.propertyGroups = [...w.propertyGroups, ...defaultWidgetPropertyGroups()];
           partDefinitions2[v.partName] = w;
           const found = this.customWidgets.find((x) => x.partName === v.partName);
@@ -13468,34 +13335,34 @@ ${_html.style}
         });
         this.partManager.registerPartDefinitions(partDefinitions2);
       }
+      if (plugin.watchers) {
+        this.watchers = { ...this.providers, ...plugin.watchers };
+      }
       if (plugin.providers) {
-        this.providers = {
-          ...this.providers,
-          ...plugin.providers
-        };
+        this.providers = { ...this.providers, ...plugin.providers };
       }
       if (plugin.propertyEditors) {
         this.partManager.registerPartPropertyEditors(plugin.propertyEditors);
       }
     }
-    initData(content) {
-      this.model.rootPart.pageBuilderId = this.instanceId;
+    initData(data) {
       this.model.rootPart.language = this.locale.value;
       let parts;
-      if (content) {
-        for (const p of content) {
-          const page = partFromJsonObject(p, true);
-          if (page) {
-            if (!parts)
-              parts = [];
-            parts.push(page);
-          }
-        }
+      if (data) {
+        const rootPart = partFromJsonObject(data, true);
+        if (!rootPart)
+          throw new Error("Invalid data format");
+        parts = rootPart.children;
       }
       if (!parts) {
         parts = [this.getEmptyPageContent(), this.getEmptyPageContent()];
       }
+      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(),
@@ -13535,8 +13402,8 @@ ${_html.style}
       if (screenCount !== 1)
         return;
       const part = this.model.rootPart.children[0];
-      const json = this.model.serializePageModel([part.partId]);
-      const copied = this.model.parsePageModel(json);
+      const json = this.model.serializeParts([part.partId]);
+      const copied = this.model.parseParts(json);
       if (!copied)
         return;
       this.model.updateModel({
@@ -13552,6 +13419,100 @@ ${_html.style}
     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();
@@ -13572,11 +13533,11 @@ ${_html.style}
       });
     }
   }
-  const _hoisted_1$n = /* @__PURE__ */ vue.createElementVNode("i", { class: "material-icons-outlined" }, "add_circle_outline", -1);
-  const _hoisted_2$f = [
-    _hoisted_1$n
+  const _hoisted_1$l = /* @__PURE__ */ vue.createElementVNode("i", { class: "material-icons-outlined" }, "add_circle_outline", -1);
+  const _hoisted_2$d = [
+    _hoisted_1$l
   ];
-  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPage",
     props: {
       page: {},
@@ -13609,7 +13570,7 @@ ${_html.style}
             class: vue.normalizeClass([selected.value && "selected", _ctx.isMobilePage ? "mobile" : "pc", "pb-page-content"])
           }, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList((_a = _ctx.page) == null ? void 0 : _a.children, (section, index) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$w, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$u, {
                 key: section.partId,
                 part: section
               }, null, 8, ["part"]);
@@ -13621,13 +13582,13 @@ ${_html.style}
               var _a2, _b;
               return insertSection(((_b = (_a2 = _ctx.page) == null ? void 0 : _a2.children) == null ? void 0 : _b.length) || 0);
             })
-          }, _hoisted_2$f)
+          }, _hoisted_2$d)
         ], 4);
       };
     }
   });
-  const _hoisted_1$m = /* @__PURE__ */ vue.createElementVNode("div", { style: { "width": "20px" } }, null, -1);
-  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$k = /* @__PURE__ */ vue.createElementVNode("div", { style: { "width": "20px" } }, null, -1);
+  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     __name: "PbCanvas",
     setup(__props) {
       const pageBuilder = usePageBuilderEditor();
@@ -13674,13 +13635,13 @@ ${_html.style}
             style: vue.normalizeStyle(style.value),
             class: "pb-canvas"
           }, [
-            vue.createVNode(_sfc_main$o, {
+            vue.createVNode(_sfc_main$m, {
               "is-mobile-page": true,
               page: pageS.value,
               width: 420
             }, null, 8, ["page"]),
-            _hoisted_1$m,
-            vue.createVNode(_sfc_main$o, {
+            _hoisted_1$k,
+            vue.createVNode(_sfc_main$m, {
               "is-mobile-page": false,
               page: pageL.value,
               width: 1024
@@ -13690,9 +13651,9 @@ ${_html.style}
       };
     }
   });
-  const canvasStyle = '.pb-page {\n  margin: 0 auto;\n  margin-top: 20px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-page-content.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 5px;\n}\n.pb-page * {\n  box-sizing: border-box;\n}\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\n.pb-add-widget-button button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  padding: 8px;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n.pb-section {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n  background-color: #fff;\n}\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-section.selected {\n  outline: 1px solid #e67e22;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-section.pb-section-static {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n}\n.pb-section.pb-section-static:after {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n}\n.pb-section-static .pb-widget {\n  outline: none;\n}\n.pb-block {\n  display: flex;\n  min-width: 1px;\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n  outline: 1px dashed #ccc;\n}\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-block.selected {\n  outline: 1px solid #8e44ad;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget {\n  position: relative;\n  outline: 1px dashed #ccc;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-widget.selected {\n  outline: 2px solid #27ae60;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-widget .pan-handle {\n  position: absolute;\n  left: -6px;\n  top: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: move;\n}\n.pb-widget .resize-handle {\n  position: absolute;\n  right: -6px;\n  bottom: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: nwse-resize;\n}\n.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-text-widget .text {\n  color: #333;\n}\n.pb-text-widget .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: -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$l = { class: "pb-canvas-frame" };
-  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+  const canvasStyle = '.pb-page {\n  margin: 0 auto;\n  margin-top: 20px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-page-content.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 5px;\n}\n.pb-page * {\n  box-sizing: border-box;\n}\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\n.pb-add-widget-button button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  padding: 8px;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n.pb-section {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n  background-color: #fff;\n}\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-section.selected {\n  outline: 1px solid #e67e22;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-section.pb-section-static {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n}\n.pb-section.pb-section-static:after {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n}\n.pb-section-static .pb-widget {\n  outline: none;\n}\n.pb-block {\n  display: flex;\n  min-width: 1px;\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n  outline: 1px dashed #ccc;\n}\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-block.selected {\n  outline: 1px solid #8e44ad;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget {\n  position: relative;\n  outline: 1px dashed #ccc;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-widget.selected {\n  outline: 2px solid #27ae60;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-widget .pan-handle {\n  position: absolute;\n  left: -6px;\n  top: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: move;\n}\n.pb-widget .resize-handle {\n  position: absolute;\n  right: -6px;\n  bottom: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: nwse-resize;\n}\n.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-text-widget .text {\n  color: #333;\n}\n.pb-text-widget .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$j = { class: "pb-canvas-frame" };
+  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     __name: "PbCanvasFrame",
     setup(__props) {
       const pageBuilderEditor = usePageBuilderEditor();
@@ -13744,7 +13705,7 @@ ${_html.style}
       );
       return (_ctx, _cache) => {
         var _a, _b, _c, _d;
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
           vue.createElementVNode("iframe", {
             ref_key: "iframeRef",
             ref: iframeRef,
@@ -13754,14 +13715,14 @@ ${_html.style}
             key: 0,
             to: (_d = (_c = iframeRef.value) == null ? void 0 : _c.contentWindow) == null ? void 0 : _d.document.body
           }, [
-            vue.createVNode(_sfc_main$n)
+            vue.createVNode(_sfc_main$l)
           ], 8, ["to"])) : vue.createCommentVNode("", true)
         ]);
       };
     }
   });
-  const _hoisted_1$k = { class: "pb-tool-button bs-layout-horizontal flex-align-center" };
-  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$i = { class: "pb-tool-button bs-layout-horizontal flex-align-center" };
+  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     __name: "PbToolbarButton",
     props: {
       button: {}
@@ -13774,7 +13735,7 @@ ${_html.style}
         (_b = (_a = props.button).handler) == null ? void 0 : _b.call(_a, pageBuilder);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
           vue.createElementVNode("div", {
             class: "tool-button bs-clickable",
             onClick: handleClick
@@ -13789,17 +13750,17 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$j = { class: "pb-tool-button-group bs-layout-horizontal flex-align-center" };
-  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$h = { class: "pb-tool-button-group bs-layout-horizontal flex-align-center" };
+  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     __name: "PbToolbarButtonGroup",
     props: {
       group: {}
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.group.buttons, (button) => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$l, {
+            return vue.openBlock(), vue.createBlock(_sfc_main$j, {
               key: button.buttonId,
               button
             }, null, 8, ["button"]);
@@ -13808,11 +13769,11 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$i = { class: "pb-toolbar bs-layout-horizontal align-items-center" };
-  const _hoisted_2$e = { class: "bs-layout-horizontal align-items-center" };
-  const _hoisted_3$d = /* @__PURE__ */ vue.createElementVNode("div", { class: "flex-grow-1" }, null, -1);
-  const _hoisted_4$5 = { class: "mr-8" };
-  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$g = { class: "pb-toolbar bs-layout-horizontal align-items-center" };
+  const _hoisted_2$c = { class: "bs-layout-horizontal align-items-center" };
+  const _hoisted_3$b = /* @__PURE__ */ vue.createElementVNode("div", { class: "flex-grow-1" }, null, -1);
+  const _hoisted_4$4 = { class: "mr-8" };
+  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     __name: "PbToolbar",
     props: {
       plugin: {}
@@ -13863,10 +13824,10 @@ ${_html.style}
       });
       return (_ctx, _cache) => {
         var _a, _b, _c;
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
-          vue.createElementVNode("div", _hoisted_2$e, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
+          vue.createElementVNode("div", _hoisted_2$c, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(buttonGroups), (group) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$k, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$i, {
                 key: group.groupId,
                 group
               }, null, 8, ["group"]);
@@ -13888,33 +13849,33 @@ ${_html.style}
               placeholder: "Scale"
             }, null, 8, ["modelValue"])
           ]),
-          _hoisted_3$d,
-          vue.createElementVNode("div", _hoisted_4$5, [
+          _hoisted_3$b,
+          vue.createElementVNode("div", _hoisted_4$4, [
             _ctx.plugin ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent((_a = _ctx.plugin) == null ? void 0 : _a.component), vue.mergeProps({ key: 0 }, (_b = _ctx.plugin) == null ? void 0 : _b.bind, vue.toHandlers((_c = _ctx.plugin) == null ? void 0 : _c.on)), null, 16)) : vue.createCommentVNode("", true)
           ])
         ]);
       };
     }
   });
-  const _hoisted_1$h = { class: "pb-menu bs-layout-vertical" };
-  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$f = { class: "pb-menu bs-layout-vertical" };
+  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     __name: "PbMenu",
     props: {
       toolbarPlugin: {}
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
-          vue.createVNode(_sfc_main$j, { plugin: _ctx.toolbarPlugin }, null, 8, ["plugin"])
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
+          vue.createVNode(_sfc_main$h, { plugin: _ctx.toolbarPlugin }, null, 8, ["plugin"])
         ]);
       };
     }
   });
-  const _hoisted_1$g = {
+  const _hoisted_1$e = {
     key: 1,
     class: "bs-layout-vertical border"
   };
-  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     __name: "PbNavigator",
     setup(__props) {
       const pageBuilder = usePageBuilderEditor();
@@ -14140,7 +14101,7 @@ ${_html.style}
             ], 512)
           ]),
           _: 1
-        }, 8, ["tab-id"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
+        }, 8, ["tab-id"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
           vue.createElementVNode("div", {
             ref_key: "treeS",
             ref: treeS,
@@ -14173,7 +14134,7 @@ ${_html.style}
       };
     }
   });
-  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     __name: "PbSidebarPropertyEditor",
     props: {
       property: {},
@@ -14184,25 +14145,6 @@ ${_html.style}
       const pageBuilder = usePageBuilderEditor();
       const propertyEditor = vue.computed(() => {
         var _a;
-        if (pageBuilder.editMode === "local" && props.selectedParts.length > 0) {
-          const section = pageBuilder.partManager.findNearestSection(props.selectedParts[0]);
-          if (section && section.isGlobalDesignPart()) {
-            return;
-          }
-          if (section && (section.isLocalDesignPart() || section.isLocalMarketingPart())) {
-            if (!props.property.localized) {
-              return;
-            }
-          }
-        }
-        if (pageBuilder.editMode === "template" && props.selectedParts.length > 0) {
-          const section = pageBuilder.partManager.findNearestSection(props.selectedParts[0]);
-          if (section && (section.isLocalDesignPart() || section.isLocalMarketingPart())) {
-            if (props.property.localized) {
-              return;
-            }
-          }
-        }
         if (props.property.propertyEditor) {
           const editor = props.property.propertyEditor(props.property, props.selectedParts);
           if (editor)
@@ -14228,13 +14170,13 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$f = { class: "pb-sidebar-property-group" };
-  const _hoisted_2$d = {
+  const _hoisted_1$d = { class: "pb-sidebar-property-group" };
+  const _hoisted_2$b = {
     key: 0,
     class: "group-title"
   };
-  const _hoisted_3$c = ["textContent"];
-  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_3$a = ["textContent"];
+  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     __name: "PbSidebarPropertyGroupEditor",
     props: {
       group: {},
@@ -14243,36 +14185,16 @@ ${_html.style}
     },
     setup(__props) {
       const props = __props;
-      const pageBuilder = usePageBuilderEditor();
       const groupEditor = vue.computed(() => {
         var _a, _b;
-        if (pageBuilder.editMode === "local" && props.selectedParts.length > 0) {
-          const section = pageBuilder.partManager.findNearestSection(props.selectedParts[0]);
-          if (section && section.isGlobalDesignPart()) {
-            return;
-          }
-          if (section && (section.isLocalDesignPart() || section.isLocalMarketingPart())) {
-            if (!props.group.localized) {
-              return;
-            }
-          }
-        }
-        if (pageBuilder.editMode === "template" && props.selectedParts.length > 0) {
-          const section = pageBuilder.partManager.findNearestSection(props.selectedParts[0]);
-          if (section && (section.isLocalDesignPart() || section.isLocalMarketingPart())) {
-            if (props.group.localized) {
-              return;
-            }
-          }
-        }
         return (_b = (_a = props.group).propertyGroupEditor) == null ? void 0 : _b.call(_a, props.group, props.selectedParts);
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
-          _ctx.group.showGroupName ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$d, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
+          _ctx.group.showGroupName ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$b, [
             vue.createElementVNode("label", {
               textContent: vue.toDisplayString(_ctx.group.caption)
-            }, null, 8, _hoisted_3$c)
+            }, null, 8, _hoisted_3$a)
           ])) : vue.createCommentVNode("", true),
           _ctx.partsKey ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
             groupEditor.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(groupEditor.value), {
@@ -14280,7 +14202,7 @@ ${_html.style}
               group: _ctx.group,
               "selected-parts": _ctx.selectedParts
             }, null, 8, ["group", "selected-parts"])) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.group.properties, (property) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$g, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$e, {
                 key: `${_ctx.partsKey}_${property.propertyName}`,
                 property,
                 "selected-parts": _ctx.selectedParts
@@ -14291,106 +14213,8 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$e = { class: "property-editor property-editor-local-part flex-align-center pt-16" };
-  const _hoisted_2$c = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
-    /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Display Schedule" })
-  ], -1);
-  const _hoisted_3$b = { class: "bs-layout-horizontal" };
-  const _hoisted_4$4 = { class: "mr-2" };
-  const _hoisted_5$2 = /* @__PURE__ */ vue.createElementVNode("span", { class: "font-icon" }, "more_horiz", -1);
-  const _hoisted_6$2 = [
-    _hoisted_5$2
-  ];
-  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
-    __name: "PbPropertyLocalMarketingPart",
-    props: {
-      selectedPart: {}
-    },
-    emits: ["select-schedule", "update-property-value"],
-    setup(__props, { emit: __emit }) {
-      const props = __props;
-      bluesea.useModal();
-      const startDt = vue.ref("");
-      const endDt = vue.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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
-          _hoisted_2$c,
-          vue.createElementVNode("div", _hoisted_3$b, [
-            vue.createElementVNode("div", _hoisted_4$4, [
-              vue.createVNode(vue.unref(bluesea.BSDateRange), {
-                "from-value": startDt.value,
-                "to-value": endDt.value,
-                resolution: "DAY",
-                width: "260px"
-              }, null, 8, ["from-value", "to-value"])
-            ]),
-            vue.createElementVNode("div", null, [
-              vue.createElementVNode("button", { onClick: selectSchedule }, _hoisted_6$2)
-            ])
-          ])
-        ]);
-      };
-    }
-  });
-  const _hoisted_1$d = { class: "pb-sidebar-properties" };
-  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$c = { class: "pb-sidebar-properties" };
+  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     __name: "PbSidebarProperties",
     setup(__props) {
       const pageBuilder = usePageBuilderEditor();
@@ -14407,25 +14231,13 @@ ${_html.style}
           return [];
         }
       });
-      const showLocalMarketingPart = vue.computed(() => {
-        if (pageBuilder.editMode === "template")
-          return false;
-        if (!selectedParts.length || selectedParts.length !== 1)
-          return false;
-        const part = selectedParts[0];
-        return part.isLocalMarketingPart();
-      });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
-          showLocalMarketingPart.value ? (vue.openBlock(), vue.createBlock(_sfc_main$e, {
-            key: 0,
-            "selected-part": vue.unref(selectedParts)[0]
-          }, null, 8, ["selected-part"])) : vue.createCommentVNode("", true),
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(properties.value, (group) => {
             return vue.openBlock(), vue.createElementBlock("div", {
               key: `${partsKey.value}_${group.groupName}`
             }, [
-              vue.createVNode(_sfc_main$f, {
+              vue.createVNode(_sfc_main$d, {
                 group,
                 partsKey: partsKey.value,
                 "selected-parts": vue.unref(selectedParts)
@@ -14436,25 +14248,24 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$c = { class: "pb-sidebar" };
-  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$b = { class: "pb-sidebar" };
+  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     __name: "PbSidebar",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
-          vue.createVNode(_sfc_main$d)
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+          vue.createVNode(_sfc_main$c)
         ]);
       };
     }
   });
-  const _hoisted_1$b = { class: "pb-editor bs-layout-vertical flex-grow-1" };
-  const _hoisted_2$b = { class: "pb-editor-body bs-layout-horizontal flex-grow-1" };
-  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$a = { class: "pb-editor bs-layout-vertical flex-grow-1" };
+  const _hoisted_2$a = { class: "pb-editor-body bs-layout-horizontal flex-grow-1" };
+  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     __name: "PageBuilderEditor",
     props: {
       instanceId: {},
       title: {},
-      editMode: {},
       pageContent: {},
       locales: {},
       locale: {},
@@ -14467,7 +14278,6 @@ ${_html.style}
       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)
@@ -14491,29 +14301,31 @@ ${_html.style}
       const colorHistory = vue.ref([]);
       vue.provide("colorHistory", colorHistory);
       const getPageContent = () => {
-        const partIds = (pageBuilderEditor.model.rootPart.children || []).map((v) => v.partId);
-        return pageBuilderEditor.model.serializePageModel(partIds);
+        return pageBuilderEditor.model.serializeModel(
+          (part) => pageBuilderEditor.extractMedia(part),
+          (partObject) => pageBuilderEditor.extractProvider(partObject)
+        );
       };
       __expose({
         getPageContent
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
-          vue.createVNode(_sfc_main$i, { "toolbar-plugin": _ctx.toolbarPlugin }, null, 8, ["toolbar-plugin"]),
-          vue.createElementVNode("div", _hoisted_2$b, [
-            vue.createVNode(_sfc_main$h),
-            vue.createVNode(_sfc_main$m, { class: "flex-grow-1" }),
-            vue.createVNode(_sfc_main$c)
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
+          vue.createVNode(_sfc_main$g, { "toolbar-plugin": _ctx.toolbarPlugin }, null, 8, ["toolbar-plugin"]),
+          vue.createElementVNode("div", _hoisted_2$a, [
+            vue.createVNode(_sfc_main$f),
+            vue.createVNode(_sfc_main$k, { class: "flex-grow-1" }),
+            vue.createVNode(_sfc_main$b)
           ])
         ]);
       };
     }
   });
-  const _hoisted_1$a = { class: "property-editor property-editor-readonly-text" };
-  const _hoisted_2$a = { class: "title" };
-  const _hoisted_3$a = ["textContent"];
+  const _hoisted_1$9 = { class: "property-editor property-editor-readonly-text" };
+  const _hoisted_2$9 = { class: "title" };
+  const _hoisted_3$9 = ["textContent"];
   const _hoisted_4$3 = ["textContent"];
-  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyEditorReadonlyText",
     props: {
       property: {},
@@ -14521,11 +14333,11 @@ ${_html.style}
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
-          vue.createElementVNode("div", _hoisted_2$a, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+          vue.createElementVNode("div", _hoisted_2$9, [
             vue.createElementVNode("label", {
               textContent: vue.toDisplayString(_ctx.property.caption)
-            }, null, 8, _hoisted_3$a)
+            }, null, 8, _hoisted_3$9)
           ]),
           vue.createElementVNode("div", null, [
             vue.createElementVNode("div", {
@@ -14538,12 +14350,12 @@ ${_html.style}
   });
   const PbPropertyEditorReadonlyText = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
-    default: _sfc_main$a
+    default: _sfc_main$9
   }, Symbol.toStringTag, { value: "Module" }));
-  const _hoisted_1$9 = { class: "property-editor property-editor-text flex-align-center" };
-  const _hoisted_2$9 = { class: "title" };
-  const _hoisted_3$9 = ["textContent"];
-  const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$8 = { class: "property-editor property-editor-text flex-align-center" };
+  const _hoisted_2$8 = { class: "title" };
+  const _hoisted_3$8 = ["textContent"];
+  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyEditorText",
     props: {
       property: {},
@@ -14561,11 +14373,11 @@ ${_html.style}
         emit("update-property-value", properties);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
-          vue.createElementVNode("div", _hoisted_2$9, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
+          vue.createElementVNode("div", _hoisted_2$8, [
             vue.createElementVNode("label", {
               textContent: vue.toDisplayString(_ctx.property.caption)
-            }, null, 8, _hoisted_3$9)
+            }, null, 8, _hoisted_3$8)
           ]),
           vue.createElementVNode("div", null, [
             _ctx.property.multiLang ? (vue.openBlock(), vue.createBlock(vue.unref(bluesea.BSMultiLangTextInput), {
@@ -14587,12 +14399,12 @@ ${_html.style}
   });
   const PbPropertyEditorText = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
-    default: _sfc_main$9
+    default: _sfc_main$8
   }, Symbol.toStringTag, { value: "Module" }));
-  const _hoisted_1$8 = { class: "property-editor property-editor-multiline-text" };
-  const _hoisted_2$8 = { class: "title" };
-  const _hoisted_3$8 = ["textContent"];
-  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$7 = { class: "property-editor property-editor-multiline-text" };
+  const _hoisted_2$7 = { class: "title" };
+  const _hoisted_3$7 = ["textContent"];
+  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyEditorMultilineText",
     props: {
       property: {},
@@ -14618,11 +14430,11 @@ ${_html.style}
         emit("update-property-value", properties);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
-          vue.createElementVNode("div", _hoisted_2$8, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
+          vue.createElementVNode("div", _hoisted_2$7, [
             vue.createElementVNode("label", {
               textContent: vue.toDisplayString(_ctx.property.caption)
-            }, null, 8, _hoisted_3$8)
+            }, null, 8, _hoisted_3$7)
           ]),
           vue.createElementVNode("div", null, [
             _ctx.property.multiLang ? (vue.openBlock(), vue.createBlock(vue.unref(bluesea.BSMultiLangTextArea), {
@@ -14652,12 +14464,12 @@ ${_html.style}
   });
   const PbPropertyEditorMultilineText = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
-    default: _sfc_main$8
+    default: _sfc_main$7
   }, Symbol.toStringTag, { value: "Module" }));
-  const _hoisted_1$7 = { class: "property-editor property-editor-select flex-align-center" };
-  const _hoisted_2$7 = { class: "title" };
-  const _hoisted_3$7 = ["textContent"];
-  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$6 = { class: "property-editor property-editor-select flex-align-center" };
+  const _hoisted_2$6 = { class: "title" };
+  const _hoisted_3$6 = ["textContent"];
+  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyEditorSelect",
     props: {
       property: {},
@@ -14676,11 +14488,11 @@ ${_html.style}
         emit("update-property-value", properties);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
-          vue.createElementVNode("div", _hoisted_2$7, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
+          vue.createElementVNode("div", _hoisted_2$6, [
             vue.createElementVNode("label", {
               textContent: vue.toDisplayString(_ctx.property.caption)
-            }, null, 8, _hoisted_3$7)
+            }, null, 8, _hoisted_3$6)
           ]),
           vue.createElementVNode("div", null, [
             vue.createVNode(vue.unref(bluesea.BSSelect), {
@@ -14695,13 +14507,13 @@ ${_html.style}
   });
   const PbPropertyEditorSelect = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
-    default: _sfc_main$7
+    default: _sfc_main$6
   }, Symbol.toStringTag, { value: "Module" }));
-  const _hoisted_1$6 = { class: "property-editor property-editor-color" };
-  const _hoisted_2$6 = { class: "title" };
-  const _hoisted_3$6 = ["textContent"];
+  const _hoisted_1$5 = { class: "property-editor property-editor-color" };
+  const _hoisted_2$5 = { class: "title" };
+  const _hoisted_3$5 = ["textContent"];
   const _hoisted_4$2 = { class: "bs-layout-horizontal flex-align-center color" };
-  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyEditorColor",
     props: {
       property: {},
@@ -14721,11 +14533,11 @@ ${_html.style}
         emit("update-property-value", properties);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
-          vue.createElementVNode("div", _hoisted_2$6, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
+          vue.createElementVNode("div", _hoisted_2$5, [
             vue.createElementVNode("label", {
               textContent: vue.toDisplayString(_ctx.property.caption)
-            }, null, 8, _hoisted_3$6)
+            }, null, 8, _hoisted_3$5)
           ]),
           vue.createElementVNode("div", _hoisted_4$2, [
             vue.createVNode(PbColorPicker, {
@@ -14750,12 +14562,12 @@ ${_html.style}
   });
   const PbPropertyEditorColor = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
-    default: _sfc_main$6
+    default: _sfc_main$5
   }, Symbol.toStringTag, { value: "Module" }));
-  const _hoisted_1$5 = { class: "property-editor property-editor-image flex-align-center" };
-  const _hoisted_2$5 = { class: "title" };
-  const _hoisted_3$5 = ["textContent"];
-  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$4 = { class: "property-editor property-editor-image flex-align-center" };
+  const _hoisted_2$4 = { class: "title" };
+  const _hoisted_3$4 = ["textContent"];
+  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyEditorImage",
     props: {
       property: {},
@@ -14767,7 +14579,7 @@ ${_html.style}
       const modal = bluesea.useModal();
       const emit = __emit;
       const selectImage = () => {
-        const imageProvider = pageBuilder.getProvider("image");
+        const imageProvider = pageBuilder.getProvider("imageProvider");
         if (imageProvider) {
           imageProvider({ modal }, (url) => {
             emit("update-property-value", { image: url });
@@ -14775,11 +14587,11 @@ ${_html.style}
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
-          vue.createElementVNode("div", _hoisted_2$5, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
+          vue.createElementVNode("div", _hoisted_2$4, [
             vue.createElementVNode("label", {
               textContent: vue.toDisplayString(_ctx.property.caption)
-            }, null, 8, _hoisted_3$5)
+            }, null, 8, _hoisted_3$4)
           ]),
           vue.createElementVNode("div", null, [
             vue.createElementVNode("button", { onClick: selectImage }, "Select Image")
@@ -14790,12 +14602,12 @@ ${_html.style}
   });
   const PbPropertyEditorImage = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
-    default: _sfc_main$5
+    default: _sfc_main$4
   }, Symbol.toStringTag, { value: "Module" }));
-  const _hoisted_1$4 = { class: "property-editor property-editor-image flex-align-center" };
-  const _hoisted_2$4 = { class: "title" };
-  const _hoisted_3$4 = ["textContent"];
-  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$3 = { class: "property-editor property-editor-image flex-align-center" };
+  const _hoisted_2$3 = { class: "title" };
+  const _hoisted_3$3 = ["textContent"];
+  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyEditorHtml",
     props: {
       property: {},
@@ -14831,11 +14643,11 @@ ${_html.style}
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
-          vue.createElementVNode("div", _hoisted_2$4, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
+          vue.createElementVNode("div", _hoisted_2$3, [
             vue.createElementVNode("label", {
               textContent: vue.toDisplayString(_ctx.property.caption)
-            }, null, 8, _hoisted_3$4)
+            }, null, 8, _hoisted_3$3)
           ]),
           vue.createElementVNode("div", null, [
             vue.createElementVNode("button", { onClick: editHtml }, "Edit HTML")
@@ -14845,55 +14657,6 @@ ${_html.style}
     }
   });
   const PbPropertyEditorHtml = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-    __proto__: null,
-    default: _sfc_main$4
-  }, Symbol.toStringTag, { value: "Module" }));
-  const _hoisted_1$3 = { class: "bs-layout-vertical pb-part-add-modal" };
-  const _hoisted_2$3 = { class: "bs-layout-horizontal-wrap ml-16 mb-8 gap-8" };
-  const _hoisted_3$3 = ["onClick", "textContent"];
-  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
-    __name: "PbPartAddModal",
-    props: {
-      pageBuilder: {},
-      partDefinitionGroups: {}
-    },
-    emits: ["selectHandler"],
-    setup(__props, { emit: __emit }) {
-      const emit = __emit;
-      const modalHandle = bluesea.useModalHandle();
-      const select = (partDefinition) => {
-        emit("selectHandler", partDefinition);
-        modalHandle.close();
-      };
-      return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.unref(bluesea.BSModalFrame), { title: "Add Design Part" }, {
-          default: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$3, [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.partDefinitionGroups, (group) => {
-                return vue.openBlock(), vue.createElementBlock("div", {
-                  key: group.groupName,
-                  class: "group mb-16"
-                }, [
-                  vue.createElementVNode("div", _hoisted_2$3, [
-                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(group.partDefinitions, (part) => {
-                      return vue.openBlock(), vue.createElementBlock("div", {
-                        key: part.partName,
-                        class: "part",
-                        onClick: ($event) => select(part),
-                        textContent: vue.toDisplayString(part.caption)
-                      }, null, 8, _hoisted_3$3);
-                    }), 128))
-                  ])
-                ]);
-              }), 128))
-            ])
-          ]),
-          _: 1
-        });
-      };
-    }
-  });
-  const PbPartAddModal = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
     default: _sfc_main$3
   }, Symbol.toStringTag, { value: "Module" }));
@@ -15176,12 +14939,11 @@ ${_html.style}
   exports2.PAGE_BUILDER_KEY = PAGE_BUILDER_KEY;
   exports2.PAGE_TYPE = PAGE_TYPE$1;
   exports2.Page = Page;
-  exports2.PageBuilderEditor = _sfc_main$b;
+  exports2.PageBuilderEditor = _sfc_main$a;
   exports2.PageBuilderEditorEvent = PageBuilderEditorEvent;
   exports2.PageBuilderViewer = _sfc_main$1$1;
-  exports2.PageBuilderViewerEvent = PageBuilderViewerEvent;
   exports2.Part = Part;
-  exports2.PbCustomWidget = _sfc_main$B;
+  exports2.PbCustomWidget = _sfc_main$z;
   exports2.PbHtmlWidget = _sfc_main$4$1;
   exports2.PbIframeWidget = _sfc_main$3$1;
   exports2.PbImageWidget = _sfc_main$6$1;