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

package/dist/{index-BIoyBfxM.js → index-rPBXWjSz.js}

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { ref, defineComponent, openBlock, createElementBlock, createCommentVNode, computed, normalizeClass, createElementVNode, mergeProps, toDisplayString, provide, inject, onMounted, watch, createBlock as createBlock$1, resolveDynamicComponent, normalizeProps, Fragment, renderList, reactive, defineAsyncComponent, withDirectives, unref, createVNode, normalizeStyle, resolveComponent, vModelText, onBeforeUnmount, resolveDirective, withModifiers, renderSlot, guardReactiveProps, markRaw, Teleport, toHandlers, withCtx } from "vue";
+import { ref, defineComponent, openBlock, createElementBlock, createCommentVNode, computed, mergeProps, toDisplayString, onMounted, onBeforeUnmount, provide, inject, watch, createBlock as createBlock$1, resolveDynamicComponent, normalizeProps, createElementVNode, normalizeClass, Fragment, renderList, reactive, defineAsyncComponent, withDirectives, unref, createVNode, normalizeStyle, resolveComponent, vModelText, resolveDirective, withModifiers, renderSlot, guardReactiveProps, markRaw, Teleport, toHandlers, withCtx } from "vue";
 import { notNull, BSTextInput, vClickOutside, useContextMenu, useModal, BSSelect, BSTabSheet, BSTree, BSDateRange } from "@g1cloud/bluesea";
 const create$5 = () => /* @__PURE__ */ new Map();
 const copy = (m) => {
@@ -6892,12 +6892,12 @@ let Model$1 = class Model {
     this.rootPart = ref(new RootPart());
   }
 };
-const _hoisted_1$7$1 = ["data-model-id"];
-const _hoisted_2$3$1 = {
+const _hoisted_1$8$1 = ["data-model-id"];
+const _hoisted_2$5$1 = {
   key: 1,
   class: "pb-nested-widget"
 };
-const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a$1 = /* @__PURE__ */ defineComponent({
   __name: "PbWidget",
   props: {
     part: {}
@@ -6919,7 +6919,7 @@ const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
           key: 0,
           part: _ctx.part
         }, null, 8, ["part"])) : createCommentVNode("", true),
-        childComponents.value && childComponents.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$3$1, [
+        childComponents.value && childComponents.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$5$1, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(childComponents.value, (child) => {
             return openBlock(), createBlock$1(resolveDynamicComponent(child.component), {
               key: child.part.partId,
@@ -6927,12 +6927,12 @@ const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
             }, null, 8, ["part"]);
           }), 128))
         ])) : createCommentVNode("", true)
-      ], 16, _hoisted_1$7$1);
+      ], 16, _hoisted_1$8$1);
     };
   }
 });
-const _hoisted_1$6$1 = ["data-model-id"];
-const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$7$1 = ["data-model-id"];
+const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
   __name: "PbBlock",
   props: {
     part: {}
@@ -6950,17 +6950,17 @@ const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
         style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
       }, properties.value), [
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.part.children, (child) => {
-          return openBlock(), createBlock$1(_sfc_main$9$1, {
+          return openBlock(), createBlock$1(_sfc_main$a$1, {
             key: child.partId,
             part: child
           }, null, 8, ["part"]);
         }), 128))
-      ], 16, _hoisted_1$6$1);
+      ], 16, _hoisted_1$7$1);
     };
   }
 });
-const _hoisted_1$5$1 = { class: "pb-block" };
-const _hoisted_2$2$1 = /* @__PURE__ */ createElementVNode("div", {
+const _hoisted_1$6$1 = { class: "pb-block" };
+const _hoisted_2$4$1 = /* @__PURE__ */ createElementVNode("div", {
   class: "pb-widget",
   style: { "margin": "0 auto" }
 }, [
@@ -6968,22 +6968,22 @@ const _hoisted_2$2$1 = /* @__PURE__ */ createElementVNode("div", {
     /* @__PURE__ */ createElementVNode("h3", null, "Login Design Part")
   ])
 ], -1);
-const _hoisted_3$1$1 = [
-  _hoisted_2$2$1
+const _hoisted_3$4$1 = [
+  _hoisted_2$4$1
 ];
-const _sfc_main$7$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
   __name: "PbLoginDepart",
   props: {
     part: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$5$1, _hoisted_3$1$1);
+      return openBlock(), createElementBlock("div", _hoisted_1$6$1, _hoisted_3$4$1);
     };
   }
 });
-const _hoisted_1$4$1 = ["data-model-id"];
-const _sfc_main$6$1 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$5$1 = ["data-model-id"];
+const _sfc_main$7$1 = /* @__PURE__ */ defineComponent({
   __name: "PbSection",
   props: {
     part: {}
@@ -6999,94 +6999,74 @@ const _sfc_main$6$1 = /* @__PURE__ */ defineComponent({
         "data-model-id": _ctx.part.partId,
         style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
       }, properties.value), [
-        ((_b = _ctx.part.properties) == null ? void 0 : _b.name) === "Login Design Part" ? (openBlock(), createBlock$1(_sfc_main$7$1, {
+        ((_b = _ctx.part.properties) == null ? void 0 : _b.name) === "Login Design Part" ? (openBlock(), createBlock$1(_sfc_main$8$1, {
           key: 0,
           part: _ctx.part
         }, null, 8, ["part"])) : _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.part.children, (block) => {
-          return openBlock(), createBlock$1(_sfc_main$8$1, {
+          return openBlock(), createBlock$1(_sfc_main$9$1, {
             key: block.partId,
             part: block
           }, null, 8, ["part"]);
         }), 128)) : createCommentVNode("", true)
-      ], 16, _hoisted_1$4$1);
+      ], 16, _hoisted_1$5$1);
     };
   }
 });
-const _hoisted_1$3$1 = { class: "pb-image-widget" };
-const _hoisted_2$1$1 = ["src"];
-const _hoisted_3$h = {
+const _hoisted_1$4$1 = { class: "pb-image-widget" };
+const _hoisted_2$3$1 = ["src"];
+const _hoisted_3$3$1 = {
   key: 1,
-  class: "empty"
+  class: "placeholder"
 };
 const _hoisted_4$e = /* @__PURE__ */ createElementVNode("span", { class: "font-icon" }, "image", -1);
 const _hoisted_5$7 = [
   _hoisted_4$e
 ];
-const _sfc_main$5$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6$1 = /* @__PURE__ */ defineComponent({
   __name: "PbImageWidget",
   props: {
     part: {},
-    viewMode: { type: Boolean, default: false }
+    placeholder: { type: Boolean }
   },
   setup(__props) {
     return (_ctx, _cache) => {
       var _a, _b;
-      return openBlock(), createElementBlock("div", _hoisted_1$3$1, [
+      return openBlock(), createElementBlock("div", _hoisted_1$4$1, [
         ((_a = _ctx.part.properties) == null ? void 0 : _a.image) ? (openBlock(), createElementBlock("img", {
           key: 0,
           src: (_b = _ctx.part.properties) == null ? void 0 : _b.image,
           alt: "",
           class: "image"
-        }, null, 8, _hoisted_2$1$1)) : !_ctx.viewMode ? (openBlock(), createElementBlock("div", _hoisted_3$h, _hoisted_5$7)) : createCommentVNode("", true)
+        }, null, 8, _hoisted_2$3$1)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_3$3$1, _hoisted_5$7)) : createCommentVNode("", true)
       ]);
     };
   }
 });
-const _hoisted_1$2$1 = ["textContent"];
-const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$3$1 = { class: "pb-text-widget" };
+const _hoisted_2$2$1 = ["textContent"];
+const _hoisted_3$2$1 = {
+  key: 1,
+  class: "placeholder",
+  textContent: "Empty Text"
+};
+const _sfc_main$5$1 = /* @__PURE__ */ defineComponent({
   __name: "PbTextWidget",
   props: {
     part: {},
-    viewMode: { type: Boolean, default: false }
+    placeholder: { type: Boolean }
   },
   setup(__props) {
     const props = __props;
     const pageBuilder = usePageBuilder();
-    const emptyClass = computed(() => {
-      var _a;
-      if (props.viewMode) {
-        return false;
-      } else if ((_a = props.part.properties) == null ? void 0 : _a.text) {
-        if (typeof props.part.properties.text === "string") {
-          return true;
-        } else {
-          return !props.part.properties.text[pageBuilder.locale.value];
-        }
-      } else {
-        return true;
-      }
-    });
     const text = computed(() => {
       var _a;
       if ((_a = props.part.properties) == null ? void 0 : _a.text) {
         if (typeof props.part.properties.text === "string") {
-          if (props.viewMode) {
-            return "";
-          } else {
-            return "Empty text";
-          }
+          return props.part.properties.text;
         } else {
-          const t = props.part.properties.text[pageBuilder.locale.value];
-          if (props.viewMode) {
-            return t || "";
-          } else {
-            return t || "Empty text";
-          }
+          const locale = pageBuilder.getLocale();
+          return props.part.properties.text[locale] || "";
         }
-      } else if (props.viewMode) {
-        return "";
-      } else {
-        return "Empty text";
       }
     });
     const style = computed(() => {
@@ -7099,23 +7079,29 @@ const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
       };
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass([[emptyClass.value ? "empty" : ""], "pb-text-widget"])
-      }, [
-        createElementVNode("div", mergeProps({ class: "text" }, style.value, {
+      return openBlock(), createElementBlock("div", _hoisted_1$3$1, [
+        text.value ? (openBlock(), createElementBlock("div", mergeProps({
+          key: 0,
+          class: "text"
+        }, style.value, {
           textContent: toDisplayString(text.value)
-        }), null, 16, _hoisted_1$2$1)
-      ], 2);
+        }), null, 16, _hoisted_2$2$1)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_3$2$1)) : createCommentVNode("", true)
+      ]);
     };
   }
 });
-const _hoisted_1$1$1 = ["innerHTML"];
-const _hoisted_2$k = { key: 1 };
-const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$2$1 = { class: "pb-html-widget" };
+const _hoisted_2$1$1 = ["innerHTML"];
+const _hoisted_3$1$1 = {
+  key: 1,
+  class: "placeholder",
+  textContent: "Empty HTML"
+};
+const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
   __name: "PbHtmlWidget",
   props: {
     part: {},
-    viewMode: { type: Boolean, default: false }
+    placeholder: { type: Boolean }
   },
   setup(__props) {
     const props = __props;
@@ -7142,23 +7128,69 @@ ${_html.style}
       var _a;
       return getHtml((_a = props.part.properties) == null ? void 0 : _a.html);
     });
-    const emptyClass = computed(() => {
-      if (props.viewMode) {
-        return false;
-      } else {
-        return !html.value;
-      }
-    });
+    computed(() => props.placeholder ? !html.value : false);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass([[emptyClass.value ? "empty" : ""], "pb-html-widget"])
-      }, [
+      return openBlock(), createElementBlock("div", _hoisted_1$2$1, [
         html.value ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: "html",
           innerHTML: html.value
-        }, null, 8, _hoisted_1$1$1)) : (openBlock(), createElementBlock("span", _hoisted_2$k, "Empty HTML"))
-      ], 2);
+        }, null, 8, _hoisted_2$1$1)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_3$1$1)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const _hoisted_1$1$1 = { class: "pb-iframe-widget" };
+const _hoisted_2$k = ["src"];
+const _hoisted_3$h = {
+  key: 1,
+  class: "placeholder",
+  textContent: "Empty URL"
+};
+const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
+  __name: "PbIframeWidget",
+  props: {
+    part: {},
+    placeholder: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const pageBuilder = usePageBuilder();
+    const url = computed(() => {
+      var _a;
+      const url2 = (_a = props.part.properties) == null ? void 0 : _a.url;
+      if (!url2)
+        return;
+      if (typeof url2 !== "object")
+        return;
+      const locale = pageBuilder.getLocale();
+      return url2[locale];
+    });
+    const style = computed(() => ({
+      style: {
+        width: "100%",
+        height: `${height.value}px`
+      }
+    }));
+    const height = ref(200);
+    const updateHeight = (event) => {
+      if (event.data && event.data.height) {
+        height.value = event.data.height;
+      }
+    };
+    onMounted(() => {
+      window.addEventListener("message", updateHeight);
+    });
+    onBeforeUnmount(() => {
+      window.removeEventListener("message", updateHeight);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$1$1, [
+        url.value ? (openBlock(), createElementBlock("iframe", mergeProps({
+          key: 0,
+          src: url.value
+        }, style.value), null, 16, _hoisted_2$k)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_3$h)) : createCommentVNode("", true)
+      ]);
     };
   }
 });
@@ -7166,41 +7198,46 @@ const defaultPartDefinitions = {
   "Section": {
     partType: "Section",
     partName: "Section",
-    creator: () => _sfc_main$6$1
+    creator: () => _sfc_main$7$1
   },
   "GlobalDesignPart": {
     partType: "Section",
     partName: "GlobalDesignPart",
-    creator: () => _sfc_main$6$1
+    creator: () => _sfc_main$7$1
   },
   "LocalDesignPart": {
     partType: "Section",
     partName: "LocalDesignPart",
-    creator: () => _sfc_main$6$1
+    creator: () => _sfc_main$7$1
   },
   "LocalMarketingPart": {
     partType: "Section",
     partName: "LocalMarketingPart",
-    creator: () => _sfc_main$6$1
+    creator: () => _sfc_main$7$1
   },
   "Block": {
     partType: "Block",
     partName: "Block",
-    creator: () => _sfc_main$8$1
+    creator: () => _sfc_main$9$1
   },
   "TextWidget": {
     partType: "Widget",
     partName: "TextWidget",
-    creator: () => _sfc_main$4$1
+    creator: () => _sfc_main$5$1
   },
   "ImageWidget": {
     partType: "Widget",
     partName: "ImageWidget",
-    creator: () => _sfc_main$5$1
+    creator: () => _sfc_main$6$1
   },
   "HtmlWidget": {
     partType: "Widget",
     partName: "HtmlWidget",
+    creator: () => _sfc_main$4$1
+  },
+  "IframeWidget": {
+    partType: "Widget",
+    partName: "IframeWidget",
     creator: () => _sfc_main$3$1
   }
 };
@@ -7223,15 +7260,25 @@ class PageBuilderViewerImpl {
   registerCustomPlugin(plugin) {
     if (plugin.widgets) {
       plugin.widgets.forEach((v) => {
-        partDefinitions$1[v.partName] = {
-          partType: "Widget",
-          partName: v.partName,
-          creator: () => _sfc_main$q,
-          component: v.component
-        };
+        const w = { ...v };
+        w.partType = "Widget";
+        w.creator = () => _sfc_main$q;
+        partDefinitions$1[v.partName] = w;
       });
     }
   }
+  watchCustomWidgetData(part) {
+    const def = partDefinitions$1[part.partName];
+    if (!def || !def.dataWatcher)
+      return false;
+    return def.dataWatcher(part.properties);
+  }
+  provideCustomWidgetData(part) {
+    const def = partDefinitions$1[part.partName];
+    if (!def || !def.dataProvider)
+      return Promise.resolve();
+    return def.dataProvider(part.properties);
+  }
   render(pageContent) {
     const rootPart = new RootPart();
     rootPart.pageBuilderId = this.instanceId;
@@ -7336,7 +7383,7 @@ const _sfc_main$2$1 = /* @__PURE__ */ defineComponent({
           class: normalizeClass([[_ctx.isMobilePage ? "mobile" : "pc"], "pb-page-content"])
         }, [
           (openBlock(true), createElementBlock(Fragment, null, renderList((_a = _ctx.page) == null ? void 0 : _a.children, (section) => {
-            return openBlock(), createBlock$1(_sfc_main$6$1, {
+            return openBlock(), createBlock$1(_sfc_main$7$1, {
               key: section.partId,
               part: section
             }, null, 8, ["part"]);
@@ -7394,17 +7441,28 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "PbCustomWidget",
   props: {
     part: {},
-    viewMode: { type: Boolean, default: false }
+    dataWatcher: { type: Function },
+    dataProvider: { type: Function }
   },
   setup(__props) {
     const props = __props;
     const pageBuilder = usePageBuilder();
     const comp = computed(() => pageBuilder.getCustomWidgetComponent(props.part));
+    const data = ref({});
     const bind = computed(() => ({
       pageBuilderId: pageBuilder.instanceId,
-      properties: props.part.properties,
-      placeholder: true
+      ...props.part.properties || {},
+      placeholder: true,
+      ...data.value || {}
     }));
+    const updateData = async () => {
+      data.value = await pageBuilder.provideCustomWidgetData(props.part);
+    };
+    onMounted(updateData);
+    watch(
+      () => pageBuilder.watchCustomWidgetData(props.part),
+      () => updateData()
+    );
     return (_ctx, _cache) => {
       return comp.value ? (openBlock(), createBlock$1(resolveDynamicComponent(comp.value), normalizeProps(mergeProps({ key: 0 }, bind.value)), null, 16)) : createCommentVNode("", true);
     };
@@ -7936,20 +7994,6 @@ class PartManager {
       }
     }
   }
-  getLocalDesignPartPropertyDefinitions(partName) {
-    let properties;
-    const partDef = this.getPartDefinition(partName);
-    if (!partDef || !partDef.propertyGroups)
-      return;
-    for (const group of partDef.propertyGroups) {
-      for (const property of group.properties) {
-        if (property.localized) {
-          properties = [...properties || [], property];
-        }
-      }
-    }
-    return properties;
-  }
   createPartComponent(part) {
     if (part) {
       const def = this.getPartDefinition(part.partName);
@@ -8028,12 +8072,12 @@ class PartManager {
 const defaultPartPropertyEditors = () => {
   return {
     "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-Dgp_AVOD.js")),
-    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-BWOKvwD9.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-CefJbbiM.js")),
+    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-CleInrev.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-zmUCXJQZ.js")),
     "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-CWedbXJI.js")),
-    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-DI5Bm25g.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-DbxF_eg7.js")),
-    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-Bb_kuc4m.js"))
+    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-DEVkcUND.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-DAEVOkpl.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-CxPlqBYx.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -8758,13 +8802,15 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       }, properties.value), [
         thisComponent.value ? (openBlock(), createBlock$1(resolveDynamicComponent(thisComponent.value), {
           key: 0,
-          part: _ctx.part
+          part: _ctx.part,
+          placeholder: true
         }, null, 8, ["part"])) : createCommentVNode("", true),
         childComponents.value && childComponents.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$i, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(childComponents.value, (child) => {
             return openBlock(), createBlock$1(resolveDynamicComponent(child.component), {
               key: child.part.partId,
-              part: child.part
+              part: child.part,
+              placeholder: true
             }, null, 8, ["part"]);
           }), 128))
         ])) : createCommentVNode("", true),
@@ -11996,7 +12042,7 @@ const widgets = [
   {
     partType: "Widget",
     partName: "TextWidget",
-    caption: "Text Widget",
+    caption: "Text",
     icon: "insert_text",
     propertyGroups: [
       {
@@ -12034,12 +12080,12 @@ const widgets = [
     },
     localized: true,
     allowsChild: () => false,
-    creator: () => _sfc_main$4$1
+    creator: () => _sfc_main$5$1
   },
   {
     partType: "Widget",
     partName: "ImageWidget",
-    caption: "Image Widget",
+    caption: "Image",
     icon: "imagesmode",
     propertyGroups: [
       {
@@ -12060,12 +12106,12 @@ const widgets = [
     initialProperties: {},
     localized: true,
     allowsChild: () => false,
-    creator: () => _sfc_main$5$1
+    creator: () => _sfc_main$6$1
   },
   {
     partType: "Widget",
     partName: "HtmlWidget",
-    caption: "HTML Widget",
+    caption: "HTML",
     icon: "code",
     propertyGroups: [
       {
@@ -12087,6 +12133,33 @@ const widgets = [
     initialProperties: {},
     localized: true,
     allowsChild: () => false,
+    creator: () => _sfc_main$4$1
+  },
+  {
+    partType: "Widget",
+    partName: "IframeWidget",
+    caption: "IFrame",
+    icon: "code",
+    propertyGroups: [
+      {
+        groupName: "iframe",
+        caption: "Iframe",
+        properties: [
+          {
+            propertyName: "url",
+            caption: "URL",
+            propertyType: "text",
+            params: "",
+            localized: true,
+            multiLang: true
+          }
+        ]
+      },
+      ...defaultWidgetPropertyGroups()
+    ],
+    initialProperties: {},
+    localized: true,
+    allowsChild: () => false,
     creator: () => _sfc_main$3$1
   }
 ];
@@ -12120,6 +12193,13 @@ const designPartDefinitions = [
     ]
   }
 ];
+const widgetPartDefinitions = [
+  {
+    groupName: "Widget",
+    caption: "Widget",
+    partDefinitions: widgets
+  }
+];
 const blockWidgetPartDefinitions = [
   {
     groupName: "Block",
@@ -12209,7 +12289,7 @@ const openPartAddModal = (modal, args, callback) => {
 };
 const openWidgetAddModal = (modal, args, callback) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./PbWidgetAddModal-CQvFYzfU.js")),
+    component: defineAsyncComponent(() => import("./PbWidgetAddModal-DoR8HJUd.js")),
     style: {
       width: "80%",
       height: "80%",
@@ -12313,6 +12393,36 @@ const _AddPartCommand = class _AddPartCommand {
 };
 __publicField(_AddPartCommand, "COMMAND_ID", "AddPart");
 let AddPartCommand = _AddPartCommand;
+const _AddSectionCommand = class _AddSectionCommand {
+  constructor(modal) {
+    __publicField(this, "commandId", _AddSectionCommand.COMMAND_ID);
+    __publicField(this, "caption", "Add Section");
+    this.modal = modal;
+  }
+  execute(pageBuilder, args) {
+    const def = pageBuilder.partManager.getSectionDefinition();
+    if (!def)
+      return;
+    addPart(pageBuilder, def);
+  }
+};
+__publicField(_AddSectionCommand, "COMMAND_ID", "AddSection");
+let AddSectionCommand = _AddSectionCommand;
+const _AddBlockCommand = class _AddBlockCommand {
+  constructor(modal) {
+    __publicField(this, "commandId", _AddBlockCommand.COMMAND_ID);
+    __publicField(this, "caption", "Add Block");
+    this.modal = modal;
+  }
+  execute(pageBuilder, args) {
+    const def = pageBuilder.partManager.getBlockDefinition();
+    if (!def)
+      return;
+    addPart(pageBuilder, def);
+  }
+};
+__publicField(_AddBlockCommand, "COMMAND_ID", "AddBlock");
+let AddBlockCommand = _AddBlockCommand;
 const addPart = (pageBuilder, def, attrs) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   const selected = pageBuilder.context.getSelectedParts()[0];
@@ -12401,29 +12511,13 @@ const addPart = (pageBuilder, def, attrs) => {
   }
 };
 const addSectionBefore = (pageBuilder, modal, args) => {
-  const def = args && args.partDefinition;
-  if (!def) {
-    const partDefinitionGroups = designPartDefinitions;
-    openPartAddModal(modal, {
-      ...args || {},
-      pageBuilder,
-      partDefinitionGroups
-    }, (part, attrs) => {
-      addSectionBefore(pageBuilder, modal, {
-        ...args || {},
-        partDefinition: part,
-        ...attrs || {}
-      });
-    });
-    return;
-  }
   const selected = pageBuilder.context.getSelectedParts()[0];
   if (!selected)
     return;
   const section = pageBuilder.partManager.findNearestSection(selected);
   if (!section || !section.parent || !section.parent.children)
     return;
-  const newSection = createPartWithDefinition(def);
+  const newSection = createSection(pageBuilder);
   if (!newSection)
     return;
   const child = createBlock(pageBuilder);
@@ -12432,29 +12526,13 @@ const addSectionBefore = (pageBuilder, modal, args) => {
   insertParts(pageBuilder, section.parent.partId, index, [newSection], true);
 };
 const addSectionAfter = (pageBuilder, modal, args) => {
-  const def = args && args.partDefinition;
-  if (!def) {
-    const partDefinitionGroups = designPartDefinitions;
-    openPartAddModal(modal, {
-      ...args || {},
-      pageBuilder,
-      partDefinitionGroups
-    }, (part, attrs) => {
-      addSectionAfter(pageBuilder, modal, {
-        ...args || {},
-        partDefinition: part,
-        ...attrs || {}
-      });
-    });
-    return;
-  }
   const selected = pageBuilder.context.getSelectedParts()[0];
   if (!selected)
     return;
   const section = pageBuilder.partManager.findNearestSection(selected);
   if (!section || !section.parent || !section.parent.children)
     return;
-  const newSection = createPartWithDefinition(def);
+  const newSection = createSection(pageBuilder);
   if (!newSection)
     return;
   const child = createBlock(pageBuilder);
@@ -12577,7 +12655,7 @@ const _AddSectionAboveCommand = class _AddSectionAboveCommand {
     this.modal = modal;
   }
   execute(pageBuilder, args) {
-    addSectionBefore(pageBuilder, this.modal, args);
+    addSectionBefore(pageBuilder, this.modal);
   }
 };
 __publicField(_AddSectionAboveCommand, "COMMAND_ID", "AddSectionAbove");
@@ -12590,7 +12668,7 @@ const _AddSectionBelowCommand = class _AddSectionBelowCommand {
     this.modal = modal;
   }
   execute(pageBuilder, args) {
-    addSectionAfter(pageBuilder, this.modal, args);
+    addSectionAfter(pageBuilder, this.modal);
   }
 };
 __publicField(_AddSectionBelowCommand, "COMMAND_ID", "AddSectionBelow");
@@ -12802,6 +12880,8 @@ const createDefaultCommands = (modal) => {
     new OpenAddPartModalCommand(modal),
     new OpenAddWidgetModalCommand(modal),
     new AddPartCommand(modal),
+    new AddSectionCommand(modal),
+    new AddBlockCommand(modal),
     new AddSectionAboveCommand(modal),
     new AddSectionBelowCommand(modal),
     new AddBlockLeftCommand(),
@@ -13094,14 +13174,20 @@ const createDefaultToolButtonGroups = () => {
       groupId: "add",
       buttons: [
         {
-          buttonId: "core:openAddPartLayer",
-          caption: "Add Design Part...",
+          buttonId: "core:addSection",
+          caption: "Add Section",
           icon: "add_row_below",
-          handler: (modeler) => modeler.commandRegistry.executeCommand(OpenAddPartModalCommand.COMMAND_ID)
+          handler: (modeler) => modeler.commandRegistry.executeCommand(AddSectionCommand.COMMAND_ID)
         },
         {
-          buttonId: "core:openAddWidgetLayer",
-          caption: "Add Widget...",
+          buttonId: "core:addBlock",
+          caption: "Add Block",
+          icon: "add_column_right",
+          handler: (modeler) => modeler.commandRegistry.executeCommand(AddBlockCommand.COMMAND_ID)
+        },
+        {
+          buttonId: "core:addWidget",
+          caption: "Add Widget",
           icon: "desktop_landscape_add",
           handler: (modeler) => modeler.commandRegistry.executeCommand(OpenAddWidgetModalCommand.COMMAND_ID)
         }
@@ -13307,6 +13393,8 @@ class PageBuilderEditorImpl {
     __publicField(this, "scale", ref(1));
     __publicField(this, "locale", ref("en"));
     __publicField(this, "locales", ref(["en"]));
+    __publicField(this, "customWidgets", []);
+    __publicField(this, "providers", {});
     this.model = new Model2();
     this.context = new PageBuilderContextImpl(this);
     this.editMode = "free";
@@ -13331,6 +13419,21 @@ class PageBuilderEditorImpl {
       return def.component;
     }
   }
+  getProvider(name) {
+    return this.providers[name];
+  }
+  watchCustomWidgetData(part) {
+    const def = this.partManager.getPartDefinition(part.partName);
+    if (!def || !def.dataWatcher)
+      return false;
+    return def.dataWatcher(part.properties);
+  }
+  provideCustomWidgetData(part) {
+    const def = this.partManager.getPartDefinition(part.partName);
+    if (!def || !def.dataProvider)
+      return Promise.resolve();
+    return def.dataProvider(part.properties);
+  }
   registerPlugin(plugin) {
     if (plugin.partDefinitions)
       this.partManager.registerPartDefinitions(plugin.partDefinitions);
@@ -13352,13 +13455,23 @@ class PageBuilderEditorImpl {
       const partDefinitions2 = {};
       plugin.widgets.forEach((v) => {
         const w = { ...v };
-        w.partName = "Widget";
+        w.partType = "Widget";
         w.creator = () => _sfc_main$q;
         w.propertyGroups = [...w.propertyGroups, ...defaultWidgetPropertyGroups()];
         partDefinitions2[v.partName] = w;
+        const found = this.customWidgets.find((x) => x.partName === v.partName);
+        if (!found) {
+          this.customWidgets.push(w);
+        }
       });
       this.partManager.registerPartDefinitions(partDefinitions2);
     }
+    if (plugin.providers) {
+      this.providers = {
+        ...this.providers,
+        ...plugin.providers
+      };
+    }
     if (plugin.propertyEditors) {
       this.partManager.registerPartPropertyEditors(plugin.propertyEditors);
     }
@@ -13434,6 +13547,9 @@ class PageBuilderEditorImpl {
       ]
     });
   }
+  getCustomWidgets() {
+    return this.customWidgets;
+  }
   getEmptyPageContent() {
     const block = new Block();
     const section = new Section();
@@ -13479,7 +13595,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     const insertSection = (index) => {
       if (!props.page)
         return;
-      editor.commandRegistry.executeCommand(OpenAddPartModalCommand.COMMAND_ID);
+      editor.commandRegistry.executeCommand(AddSectionCommand.COMMAND_ID);
     };
     return (_ctx, _cache) => {
       var _a;
@@ -13572,7 +13688,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const canvasStyle = '.pb-page {\n  margin: 0 auto;\n  margin-top: 20px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-page-content.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 5px;\n}\n.pb-page * {\n  box-sizing: border-box;\n}\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\n.pb-add-widget-button button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  padding: 8px;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n.pb-section {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n  background-color: #fff;\n}\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-section.selected {\n  outline: 1px solid #e67e22;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-section.pb-section-static {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n}\n.pb-section.pb-section-static:after {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n}\n.pb-section-static .pb-widget {\n  outline: none;\n}\n.pb-block {\n  display: flex;\n  min-width: 1px;\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n  outline: 1px dashed #ccc;\n}\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-block.selected {\n  outline: 1px solid #8e44ad;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget {\n  position: relative;\n  outline: 1px dashed #ccc;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-widget.selected {\n  outline: 2px solid #27ae60;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-widget .pan-handle {\n  position: absolute;\n  left: -6px;\n  top: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: move;\n}\n.pb-widget .resize-handle {\n  position: absolute;\n  right: -6px;\n  bottom: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: nwse-resize;\n}\n.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-text-widget .text {\n  color: #333;\n}\n.pb-text-widget.empty .text {\n  color: #999;\n}\n.pb-image-widget {\n  width: 100%;\n}\n.pb-image-widget .image {\n  width: 100%;\n}\n.pb-image-widget .empty {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-image-widget .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-html-widget.empty {\n  padding: 4px 0;\n  font-size: 18px;\n  color: #999;\n}\n.pb-product-list-widget {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n.pb-product-list-widget .product-wrapper .product {\n  width: 95%;\n  margin: 0 auto;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-product-list-widget .product-wrapper .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 200px;\n  vertical-align: middle;\n}\n@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n.pb-login-widget h3 {\n  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 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$a = { class: "pb-canvas-frame" };
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "PbCanvasFrame",
@@ -13586,7 +13702,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         return (_b = (_a = iframeRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document;
       },
       () => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         if ((_c = (_b = (_a = iframeRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document) == null ? void 0 : _c.head) {
           const head = (_e = (_d = iframeRef.value) == null ? void 0 : _d.contentWindow) == null ? void 0 : _e.document.head;
           head.innerHTML = `
@@ -13609,6 +13725,16 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           <link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined" rel="stylesheet" />
           <style>${canvasStyle}</style>
         `;
+          const script2 = (_g = (_f = iframeRef.value) == null ? void 0 : _f.contentWindow) == null ? void 0 : _g.document.createElement("script");
+          script2.innerHTML = `
+          function forwardPostMessage(event) {
+            if (event.data) {
+              window.parent.postMessage(event.data, '*');
+            }
+          }
+          window.addEventListener('message', forwardPostMessage);
+        `;
+          (_h = iframeRef.value) == null ? void 0 : _h.contentWindow.document.head.appendChild(script2);
           pageBuilderEditor.keyHandlers.addDocumentKeyEventListener(iframeRef.value.contentWindow.document.body);
           stopIframeWatch();
         }
@@ -14398,18 +14524,20 @@ export {
   PageBuilderViewerEvent as g,
   Part as h,
   _sfc_main$q as i,
-  _sfc_main$3$1 as j,
-  _sfc_main$5$1 as k,
-  _sfc_main$4$1 as l,
-  RootPart as m,
-  Section as n,
-  Widget as o,
-  createPageBuilderViewer as p,
-  createPartComponent as q,
-  createPartComponents as r,
-  providePageBuilder as s,
-  providePageBuilderViewer as t,
+  _sfc_main$4$1 as j,
+  _sfc_main$3$1 as k,
+  _sfc_main$6$1 as l,
+  _sfc_main$5$1 as m,
+  RootPart as n,
+  Section as o,
+  Widget as p,
+  createPageBuilderViewer as q,
+  createPartComponent as r,
+  createPartComponents as s,
+  providePageBuilder as t,
   usePageBuilderEditor as u,
-  usePageBuilder as v,
-  usePageBuilderViewer as w
+  providePageBuilderViewer as v,
+  widgetPartDefinitions as w,
+  usePageBuilder as x,
+  usePageBuilderViewer as y
 };