@g1cloud/page-builder-editor 1.0.0-alpha.91 → 1.0.0-alpha.92

package/css/page-builder-viewer.css

@@ -53,6 +53,10 @@
 .pb-page .pb-section .pb-block .pb-media-widget {
   width: 100%;
 }
+.pb-page .pb-section .pb-block .pb-media-widget .image-container {
+  margin: 0;
+  padding: 0;
+}
 .pb-page .pb-section .pb-block .pb-media-widget .image {
   width: 100%;
 }

package/dist/{PbPropertyEditorColor-D3UNw-Cm.js → PbPropertyEditorColor-C50t8sK7.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createVNode } from "vue";
 import { vT, BSTextInput } from "@g1cloud/bluesea";
-import { P as PbColorPicker } from "./index-CCBt1Q2v.js";
+import { P as PbColorPicker } from "./index-BU6dS8qI.js";
 const _hoisted_1 = { class: "property-editor property-editor-color" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = { class: "bs-layout-horizontal flex-align-center color" };

package/dist/{PbPropertyEditorCssLength-CK9dhVae.js → PbPropertyEditorCssLength-BFWU-ySt.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createVNode } from "vue";
 import { vT, BSTextInput } from "@g1cloud/bluesea";
-import { t as toCssLength } from "./index-CCBt1Q2v.js";
+import { t as toCssLength } from "./index-BU6dS8qI.js";
 const _hoisted_1 = { class: "property-editor property-editor-number flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{PbPropertyEditorHtml-B6c60u8P.js → PbPropertyEditorHtml-VL8HtKGb.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createTextVNode, defineAsyncComponent } from "vue";
 import { useModal, vT } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-CCBt1Q2v.js";
+import { u as usePageBuilderEditor } from "./index-BU6dS8qI.js";
 const _hoisted_1 = { class: "property-editor property-editor-html flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{PbPropertyEditorImage-DW132L3K.js → PbPropertyEditorImage-DpgO4tVs.js}

@@ -1,5 +1,5 @@
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createTextVNode, toDisplayString, createVNode, createCommentVNode, Fragment } from "vue";
-import { u as usePageBuilderEditor, C as ChangePropertyCommand } from "./index-CCBt1Q2v.js";
+import { u as usePageBuilderEditor, C as ChangePropertyCommand } from "./index-BU6dS8qI.js";
 import { useModal, vT, BSButton, BSMultiLangTextInput, showNotification } from "@g1cloud/bluesea";
 const _hoisted_1 = { class: "property-editor property-editor-image" };
 const _hoisted_2 = { class: "title" };

package/dist/{PbPropertyEditorMultilineText-DUoOHlMN.js → PbPropertyEditorMultilineText-DMBS1a7P.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createBlock } from "vue";
 import { vT, BSMultiLangTextArea, BSTextArea } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-CCBt1Q2v.js";
+import { u as usePageBuilderEditor } from "./index-BU6dS8qI.js";
 const _hoisted_1 = { class: "property-editor property-editor-multiline-text" };
 const _hoisted_2 = { class: "title" };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{PbPropertyEditorText-B5r8G8fI.js → PbPropertyEditorText-Clss82Du.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createBlock } from "vue";
 import { vT, BSMultiLangTextInput, BSTextInput } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-CCBt1Q2v.js";
+import { u as usePageBuilderEditor } from "./index-BU6dS8qI.js";
 const _hoisted_1 = { class: "property-editor property-editor-text flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{PbPropertyEditorYoutube-CpeWuqMo.js → PbPropertyEditorYoutube-B6Lmr4k5.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, unref } from "vue";
 import { useModal, vT } from "@g1cloud/bluesea";
-import { s as selectYoutubeVideo } from "./index-CCBt1Q2v.js";
+import { s as selectYoutubeVideo } from "./index-BU6dS8qI.js";
 const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{PbWidgetAddModal-a4wl7k1z.js → PbWidgetAddModal-BlxH-g-r.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createBlock, unref, withCtx, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString } from "vue";
 import { useModalHandle, BSModalFrame } from "@g1cloud/bluesea";
-import { w as widgetPartDefinitions } from "./index-CCBt1Q2v.js";
+import { w as widgetPartDefinitions } from "./index-BU6dS8qI.js";
 const _hoisted_1 = { class: "bs-layout-vertical pb-part-add-modal" };
 const _hoisted_2 = { class: "bs-layout-horizontal-wrap ml-16 mb-8 gap-8" };
 const _hoisted_3 = ["onClick", "textContent"];

package/dist/{index-CCBt1Q2v.js → index-BU6dS8qI.js}

@@ -1,8 +1,8 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { ref, defineComponent, computed, openBlock, createElementBlock, Fragment, createElementVNode, normalizeStyle, createCommentVNode, toDisplayString, createBlock as createBlock$1, resolveDynamicComponent, watch, onMounted, onBeforeUnmount, unref, provide, inject, renderList, normalizeProps, mergeProps, normalizeClass, withDirectives, withCtx, vShow, reactive, defineAsyncComponent, createVNode, resolveComponent, vModelText, resolveDirective, withModifiers, renderSlot, guardReactiveProps, createTextVNode, markRaw, toHandlers, Teleport } from "vue";
-import { notNull, vT, BSTextInput, vClickOutside, useModal, BSButton, BSMultiLangTextInput, showNotification, BSSelect, BSTree, useContextMenu, i18n, BSHorizontalLayoutResizer } from "@g1cloud/bluesea";
+import { ref, defineComponent, computed, openBlock, createElementBlock, Fragment, createBlock as createBlock$1, resolveDynamicComponent, withCtx, createElementVNode, normalizeStyle, createCommentVNode, toDisplayString, watch, onMounted, onBeforeUnmount, unref, provide, inject, renderList, normalizeProps, mergeProps, normalizeClass, withDirectives, vShow, reactive, defineAsyncComponent, createVNode, resolveComponent, vModelText, resolveDirective, withModifiers, renderSlot, guardReactiveProps, createTextVNode, markRaw, toHandlers, Teleport } from "vue";
+import { notNull, vT, BSTextInput, vClickOutside, useModal, BSButton, BSMultiLangTextInput, BSSelect, showNotification, BSTree, useContextMenu, i18n, BSHorizontalLayoutResizer } from "@g1cloud/bluesea";
 import YouTube from "vue3-youtube";
 const create$5 = () => /* @__PURE__ */ new Map();
 const copy = (m) => {
@@ -7101,13 +7101,15 @@ const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
 const _hoisted_1$7$1 = ["href", "target"];
 const _hoisted_2$3$1 = ["alt", "src"];
 const _hoisted_3$d = ["alt", "src"];
-const _hoisted_4$b = ["poster"];
-const _hoisted_5$8 = ["src"];
-const _hoisted_6$8 = {
+const _hoisted_4$b = ["alt", "src"];
+const _hoisted_5$8 = ["alt", "src"];
+const _hoisted_6$8 = ["poster"];
+const _hoisted_7$7 = ["src"];
+const _hoisted_8$7 = {
   key: 1,
   class: "placeholder"
 };
-const _hoisted_7$7 = { class: "font-icon" };
+const _hoisted_9$4 = { class: "font-icon" };
 const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
   __name: "PbMediaWidget",
   props: {
@@ -7117,6 +7119,12 @@ const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const pageBuilder = usePageBuilder();
+    const validTags = ["div", "h1", "h2", "h3", "h4", "h5", "h6", "p"];
+    const tag = computed(() => {
+      var _a;
+      const _tag = (_a = props.part.properties) == null ? void 0 : _a.tag;
+      return validTags.includes(_tag) ? _tag : "";
+    });
     const media = computed(() => {
       var _a;
       return (_a = props.part.properties) == null ? void 0 : _a.media;
@@ -7153,19 +7161,54 @@ const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
             href: (_b = _ctx.part.properties) == null ? void 0 : _b.link,
             target: (_c = _ctx.part.properties) == null ? void 0 : _c.linkTarget
           }, [
-            createElementVNode("img", {
+            tag.value ? (openBlock(), createBlock$1(resolveDynamicComponent(tag.value), {
+              key: 0,
+              class: "image-container"
+            }, {
+              default: withCtx(() => {
+                var _a2;
+                return [
+                  createElementVNode("img", {
+                    alt: altText.value,
+                    src: ((_a2 = _ctx.part.properties) == null ? void 0 : _a2.media).fileUrl,
+                    style: normalizeStyle(style.value),
+                    class: "image"
+                  }, null, 12, _hoisted_2$3$1)
+                ];
+              }),
+              _: 1
+            })) : (openBlock(), createElementBlock("img", {
+              key: 1,
               alt: altText.value,
               src: ((_d = _ctx.part.properties) == null ? void 0 : _d.media).fileUrl,
               style: normalizeStyle(style.value),
               class: "image"
-            }, null, 12, _hoisted_2$3$1)
-          ], 8, _hoisted_1$7$1)) : (openBlock(), createElementBlock("img", {
-            key: 1,
-            alt: altText.value,
-            src: ((_e = _ctx.part.properties) == null ? void 0 : _e.media).fileUrl,
-            style: normalizeStyle(style.value),
-            class: "image"
-          }, null, 12, _hoisted_3$d))
+            }, null, 12, _hoisted_3$d))
+          ], 8, _hoisted_1$7$1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            tag.value ? (openBlock(), createBlock$1(resolveDynamicComponent(tag.value), {
+              key: 0,
+              class: "image-container"
+            }, {
+              default: withCtx(() => {
+                var _a2;
+                return [
+                  createElementVNode("img", {
+                    alt: altText.value,
+                    src: ((_a2 = _ctx.part.properties) == null ? void 0 : _a2.media).fileUrl,
+                    style: normalizeStyle(style.value),
+                    class: "image"
+                  }, null, 12, _hoisted_4$b)
+                ];
+              }),
+              _: 1
+            })) : (openBlock(), createElementBlock("img", {
+              key: 1,
+              alt: altText.value,
+              src: ((_e = _ctx.part.properties) == null ? void 0 : _e.media).fileUrl,
+              style: normalizeStyle(style.value),
+              class: "image"
+            }, null, 12, _hoisted_5$8))
+          ], 64))
         ], 64)) : media.value.mediaType === "Video" ? (openBlock(), createElementBlock("video", {
           key: 1,
           ref: "video",
@@ -7175,10 +7218,10 @@ const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
         }, [
           createElementVNode("source", {
             src: `${media.value.fileUrl}#t=0.01`
-          }, null, 8, _hoisted_5$8)
-        ], 8, _hoisted_4$b)) : createCommentVNode("", true)
-      ], 64)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_6$8, [
-        createElementVNode("span", _hoisted_7$7, toDisplayString(placeholderIcon.value), 1)
+          }, null, 8, _hoisted_7$7)
+        ], 8, _hoisted_6$8)) : createCommentVNode("", true)
+      ], 64)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_8$7, [
+        createElementVNode("span", _hoisted_9$4, toDisplayString(placeholderIcon.value), 1)
       ])) : createCommentVNode("", true);
     };
   }
@@ -8516,16 +8559,16 @@ class PartManager {
 const defaultPartPropertyEditors = () => {
   return {
     "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-BJ5qx69O.js")),
-    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-B5r8G8fI.js")),
+    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-Clss82Du.js")),
     "number": () => defineAsyncComponent(() => import("./PbPropertyEditorNumber-B76ArSb5.js")),
     "boolean": () => defineAsyncComponent(() => import("./PbPropertyEditorBoolean-c5CNiTpt.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-DUoOHlMN.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-DMBS1a7P.js")),
     "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-B5sfulvx.js")),
-    "css-length": () => defineAsyncComponent(() => import("./PbPropertyEditorCssLength-CK9dhVae.js")),
-    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-D3UNw-Cm.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-DW132L3K.js")),
-    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-B6c60u8P.js")),
-    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-CpeWuqMo.js"))
+    "css-length": () => defineAsyncComponent(() => import("./PbPropertyEditorCssLength-BFWU-ySt.js")),
+    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-C50t8sK7.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-DpgO4tVs.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-VL8HtKGb.js")),
+    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-B6Lmr4k5.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -9840,7 +9883,7 @@ const _hoisted_5$6 = { class: "flex-align-center mt-12" };
 const _hoisted_6$6 = { class: "title" };
 const _hoisted_7$5 = { class: "flex-grow-1 bs-layout-horizontal" };
 const _hoisted_8$5 = { class: "flex-align-center mt-12" };
-const _hoisted_9$2 = { class: "title" };
+const _hoisted_9$3 = { class: "title" };
 const _hoisted_10$2 = { class: "flex-grow-1 bs-layout-horizontal" };
 const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorSize",
@@ -9914,7 +9957,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           ])
         ]),
         createElementVNode("div", _hoisted_8$5, [
-          createElementVNode("div", _hoisted_9$2, [
+          createElementVNode("div", _hoisted_9$3, [
             withDirectives(createElementVNode("label", null, null, 512), [
               [unref(vT), { key: "pb.prop.minSize" }]
             ])
@@ -11647,7 +11690,7 @@ const _hoisted_8$4 = {
   key: 0,
   class: "vc-sketch-field"
 };
-const _hoisted_9$1 = { class: "vc-sketch-field--double" };
+const _hoisted_9$2 = { class: "vc-sketch-field--double" };
 const _hoisted_10$1 = { class: "vc-sketch-field--single" };
 const _hoisted_11$1 = { class: "vc-sketch-field--single" };
 const _hoisted_12$1 = { class: "vc-sketch-field--single" };
@@ -11708,7 +11751,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       !$props.disableFields ? (openBlock(), createElementBlock("div", _hoisted_8$4, [
         createCommentVNode(" rgba "),
-        createElementVNode("div", _hoisted_9$1, [
+        createElementVNode("div", _hoisted_9$2, [
           createVNode(_component_EdIn, {
             label: "hex",
             value: $options.hex,
@@ -11972,7 +12015,7 @@ const _hoisted_5$3 = { class: "sub-title" };
 const _hoisted_6$3 = { class: "color" };
 const _hoisted_7$3 = { class: "mt-8" };
 const _hoisted_8$3 = { class: "sub-title" };
-const _hoisted_9 = { class: "flex-grow-1 mt-4" };
+const _hoisted_9$1 = { class: "flex-grow-1 mt-4" };
 const _hoisted_10 = { class: "bg-gray-100 py-5 rounded-8" };
 const _hoisted_11 = { class: "text-center" };
 const _hoisted_12 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
@@ -12058,7 +12101,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                 [unref(vT), { key: "pb.prop.borderWidth" }]
               ])
             ]),
-            createElementVNode("div", _hoisted_9, [
+            createElementVNode("div", _hoisted_9$1, [
               createElementVNode("div", _hoisted_10, [
                 createElementVNode("div", _hoisted_11, [
                   createVNode(unref(BSTextInput), {
@@ -12718,6 +12761,7 @@ const _hoisted_5 = { class: "title mt-12" };
 const _hoisted_6 = { class: "title mt-12" };
 const _hoisted_7 = { class: "title mt-12" };
 const _hoisted_8 = { class: "title mt-12" };
+const _hoisted_9 = { class: "title mt-12" };
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorMedia",
   props: {
@@ -12725,6 +12769,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     selectedParts: {}
   },
   setup(__props) {
+    const props = __props;
     const pageBuilder = usePageBuilderEditor();
     const part = pageBuilder.context.getSelectedParts();
     const modal = useModal();
@@ -12763,6 +12808,15 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       var _a, _b;
       return (_b = (_a = part == null ? void 0 : part[0]) == null ? void 0 : _a.properties) == null ? void 0 : _b.linkTarget;
     });
+    const tagItems = computed(() => {
+      var _a;
+      const prop = (_a = props.group.properties) == null ? void 0 : _a.find((v) => v.propertyName === "tag");
+      return prop ? (prop.params || "").split(",") : [];
+    });
+    const tag = computed(() => {
+      var _a, _b;
+      return (_b = (_a = part == null ? void 0 : part[0]) == null ? void 0 : _a.properties) == null ? void 0 : _b.tag;
+    });
     const thumbnail = computed(() => {
       var _a, _b;
       return (_b = (_a = part == null ? void 0 : part[0]) == null ? void 0 : _a.properties) == null ? void 0 : _b.thumbnail;
@@ -12789,7 +12843,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           ])
         ]),
         ((_a = media.value) == null ? void 0 : _a.fileUrl) ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
-          _cache[3] || (_cache[3] = createElementVNode("label", null, "URL", -1)),
+          _cache[4] || (_cache[4] = createElementVNode("label", null, "URL", -1)),
           createElementVNode("div", _hoisted_4, [
             createTextVNode(toDisplayString((_b = media.value) == null ? void 0 : _b.fileUrl) + " ", 1),
             withDirectives(createVNode(unref(BSButton), {
@@ -12843,10 +12897,22 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
               width: "100%",
               "onUpdate:modelValue": _cache[1] || (_cache[1] = (value) => updateProperty({ linkTarget: value }))
             }, null, 8, ["model-value"])
+          ]),
+          createElementVNode("div", _hoisted_8, [
+            withDirectives(createElementVNode("label", null, null, 512), [
+              [unref(vT), { key: "pb.prop.tag" }]
+            ])
+          ]),
+          createElementVNode("div", null, [
+            createVNode(unref(BSSelect), {
+              items: tagItems.value,
+              "model-value": tag.value,
+              "onUpdate:modelValue": _cache[2] || (_cache[2] = (value) => updateProperty({ tag: value }))
+            }, null, 8, ["items", "model-value"])
           ])
         ], 64)) : createCommentVNode("", true),
         ((_d = media.value) == null ? void 0 : _d.mediaType) === "Video" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-          createElementVNode("div", _hoisted_8, [
+          createElementVNode("div", _hoisted_9, [
             withDirectives(createElementVNode("label", null, null, 512), [
               [unref(vT), { key: "pb.prop.thumbnail" }]
             ])
@@ -12855,7 +12921,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             createVNode(unref(BSTextInput), {
               "model-value": thumbnail.value,
               width: "100%",
-              "onUpdate:modelValue": _cache[2] || (_cache[2] = (value) => updateProperty({ thumbnail: value }))
+              "onUpdate:modelValue": _cache[3] || (_cache[3] = (value) => updateProperty({ thumbnail: value }))
             }, null, 8, ["model-value"])
           ])
         ], 64)) : createCommentVNode("", true)
@@ -13025,6 +13091,12 @@ const widgets = [
             caption: "Link Target",
             propertyType: "text"
           },
+          {
+            propertyName: "tag",
+            caption: "pb.prop.tag",
+            propertyType: "select",
+            params: ",div,h1,h2,h3,h4,h5,h6,p"
+          },
           {
             propertyName: "thumbnail",
             caption: "Thumbnail URL",
@@ -13088,7 +13160,10 @@ const widgets = [
       },
       ...defaultWidgetPropertyGroups()
     ],
-    initialProperties: {},
+    initialProperties: {
+      width: "100%",
+      height: "100%"
+    },
     allowsChild: () => false,
     creator: () => _sfc_main$5$1
   },
@@ -13234,7 +13309,7 @@ __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
 let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
 const openWidgetAddModal = (modal, args, callback) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./PbWidgetAddModal-a4wl7k1z.js")),
+    component: defineAsyncComponent(() => import("./PbWidgetAddModal-BlxH-g-r.js")),
     style: {
       width: "80%",
       height: "80%",
@@ -15406,7 +15481,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const canvasStyle = '.pb-page {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  overflow-x: hidden;\n}\n.pb-page .pb-section {\n  display: flex;\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-section .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}\n.pb-page .pb-section .pb-block .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-page .pb-section .pb-block .pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-page .pb-section .pb-block .pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-page .pb-section .pb-block .pb-text-widget .text {\n  display: block;\n  color: #333;\n}\n.pb-page .pb-section .pb-block .pb-text-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-page .pb-section .pb-block .pb-media-widget {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .image {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .video {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-page .pb-section .pb-block .pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-page .pb-section .pb-block .pb-html-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-page .pb-section .pb-block .pb-iframe-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-page .pb-section .pb-block .pb-iframe-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget .youtube {\n  width: 100%;\n  height: 100%;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-page .pb-section .pb-block .pb-container-widget {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-container-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-container-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-page .pb-section .pb-block .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-page .pb-section .pb-block .pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n.pb-page .pb-section .pb-block .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-page .pb-section .pb-block .pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .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-page .pb-section .pb-block .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n.pb-page .pb-section .pb-block .mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n.pb-page .pb-section .pb-block .pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .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.pb-page * {\n  box-sizing: border-box;\n}\n.pb-viewer {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  overflow-y: auto;\n}\n.pb-page-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\n.pb-page {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  padding-bottom: 100px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-page-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background-color: #fff;\n}\n.pb-page .pb-page-content.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\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  display: flex;\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n}\n.pb-section:empty {\n  background-color: #fff;\n}\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-section.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\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::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\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  pointer-events: auto !important;\n  min-height: 50px;\n}\n.pb-widget * {\n  pointer-events: none;\n}\n.pb-widget > .invalid-widget {\n  display: flex;\n  height: 50px;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-widget.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\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  pointer-events: auto !important;\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  pointer-events: auto !important;\n}\nbody {\n  margin: 0;\n  padding: 0;\n  background-color: var(--color-canvas-frame-bg);\n  overflow: hidden;\n}\n.font-icon, .material-icons-outlined {\n  font-family: "Material Symbols Outlined", monospace;\n  font-size: 1rem;\n  max-width: 1em;\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  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  font-style: normal;\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}';
+const canvasStyle = '.pb-page {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  overflow-x: hidden;\n}\n.pb-page .pb-section {\n  display: flex;\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-section .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}\n.pb-page .pb-section .pb-block .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-page .pb-section .pb-block .pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-page .pb-section .pb-block .pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-page .pb-section .pb-block .pb-text-widget .text {\n  display: block;\n  color: #333;\n}\n.pb-page .pb-section .pb-block .pb-text-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-page .pb-section .pb-block .pb-media-widget {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .image-container {\n  margin: 0;\n  padding: 0;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .image {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .video {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-page .pb-section .pb-block .pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-page .pb-section .pb-block .pb-html-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-page .pb-section .pb-block .pb-iframe-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-page .pb-section .pb-block .pb-iframe-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget .youtube {\n  width: 100%;\n  height: 100%;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-page .pb-section .pb-block .pb-container-widget {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-container-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-container-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-page .pb-section .pb-block .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-page .pb-section .pb-block .pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n.pb-page .pb-section .pb-block .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-page .pb-section .pb-block .pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .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-page .pb-section .pb-block .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n.pb-page .pb-section .pb-block .mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n.pb-page .pb-section .pb-block .pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .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.pb-page * {\n  box-sizing: border-box;\n}\n.pb-viewer {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  overflow-y: auto;\n}\n.pb-page-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\n.pb-page {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  padding-bottom: 100px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-page-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background-color: #fff;\n}\n.pb-page .pb-page-content.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\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  display: flex;\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n}\n.pb-section:empty {\n  background-color: #fff;\n}\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-section.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\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::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\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  pointer-events: auto !important;\n  min-height: 50px;\n}\n.pb-widget * {\n  pointer-events: none;\n}\n.pb-widget > .invalid-widget {\n  display: flex;\n  height: 50px;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-widget.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\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  pointer-events: auto !important;\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  pointer-events: auto !important;\n}\nbody {\n  margin: 0;\n  padding: 0;\n  background-color: var(--color-canvas-frame-bg);\n  overflow: hidden;\n}\n.font-icon, .material-icons-outlined {\n  font-family: "Material Symbols Outlined", monospace;\n  font-size: 1rem;\n  max-width: 1em;\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  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  font-style: normal;\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}';
 const _hoisted_1$2 = ["width"];
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "PbPageFrame",

package/dist/page-builder-editor.js

@@ -1,4 +1,4 @@
-import { B, b, M, c, d, e, _, a, f, g, h, i, j, k, l, m, n, R, o, S, p, W, q, r, v, x, y, z, A, D, E } from "./index-CCBt1Q2v.js";
+import { B, b, M, c, d, e, _, a, f, g, h, i, j, k, l, m, n, R, o, S, p, W, q, r, v, x, y, z, A, D, E } from "./index-BU6dS8qI.js";
 export {
   B as BLOCK_TYPE,
   b as Block,

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

@@ -7102,13 +7102,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_1$7$1 = ["href", "target"];
   const _hoisted_2$3$1 = ["alt", "src"];
   const _hoisted_3$k = ["alt", "src"];
-  const _hoisted_4$f = ["poster"];
-  const _hoisted_5$b = ["src"];
-  const _hoisted_6$a = {
+  const _hoisted_4$f = ["alt", "src"];
+  const _hoisted_5$b = ["alt", "src"];
+  const _hoisted_6$a = ["poster"];
+  const _hoisted_7$9 = ["src"];
+  const _hoisted_8$8 = {
     key: 1,
     class: "placeholder"
   };
-  const _hoisted_7$9 = { class: "font-icon" };
+  const _hoisted_9$5 = { class: "font-icon" };
   const _sfc_main$8$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbMediaWidget",
     props: {
@@ -7118,6 +7120,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     setup(__props) {
       const props = __props;
       const pageBuilder = usePageBuilder();
+      const validTags = ["div", "h1", "h2", "h3", "h4", "h5", "h6", "p"];
+      const tag = vue.computed(() => {
+        var _a;
+        const _tag = (_a = props.part.properties) == null ? void 0 : _a.tag;
+        return validTags.includes(_tag) ? _tag : "";
+      });
       const media = vue.computed(() => {
         var _a;
         return (_a = props.part.properties) == null ? void 0 : _a.media;
@@ -7154,19 +7162,54 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               href: (_b = _ctx.part.properties) == null ? void 0 : _b.link,
               target: (_c = _ctx.part.properties) == null ? void 0 : _c.linkTarget
             }, [
-              vue.createElementVNode("img", {
+              tag.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tag.value), {
+                key: 0,
+                class: "image-container"
+              }, {
+                default: vue.withCtx(() => {
+                  var _a2;
+                  return [
+                    vue.createElementVNode("img", {
+                      alt: altText.value,
+                      src: ((_a2 = _ctx.part.properties) == null ? void 0 : _a2.media).fileUrl,
+                      style: vue.normalizeStyle(style.value),
+                      class: "image"
+                    }, null, 12, _hoisted_2$3$1)
+                  ];
+                }),
+                _: 1
+              })) : (vue.openBlock(), vue.createElementBlock("img", {
+                key: 1,
                 alt: altText.value,
                 src: ((_d = _ctx.part.properties) == null ? void 0 : _d.media).fileUrl,
                 style: vue.normalizeStyle(style.value),
                 class: "image"
-              }, null, 12, _hoisted_2$3$1)
-            ], 8, _hoisted_1$7$1)) : (vue.openBlock(), vue.createElementBlock("img", {
-              key: 1,
-              alt: altText.value,
-              src: ((_e = _ctx.part.properties) == null ? void 0 : _e.media).fileUrl,
-              style: vue.normalizeStyle(style.value),
-              class: "image"
-            }, null, 12, _hoisted_3$k))
+              }, null, 12, _hoisted_3$k))
+            ], 8, _hoisted_1$7$1)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+              tag.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tag.value), {
+                key: 0,
+                class: "image-container"
+              }, {
+                default: vue.withCtx(() => {
+                  var _a2;
+                  return [
+                    vue.createElementVNode("img", {
+                      alt: altText.value,
+                      src: ((_a2 = _ctx.part.properties) == null ? void 0 : _a2.media).fileUrl,
+                      style: vue.normalizeStyle(style.value),
+                      class: "image"
+                    }, null, 12, _hoisted_4$f)
+                  ];
+                }),
+                _: 1
+              })) : (vue.openBlock(), vue.createElementBlock("img", {
+                key: 1,
+                alt: altText.value,
+                src: ((_e = _ctx.part.properties) == null ? void 0 : _e.media).fileUrl,
+                style: vue.normalizeStyle(style.value),
+                class: "image"
+              }, null, 12, _hoisted_5$b))
+            ], 64))
           ], 64)) : media.value.mediaType === "Video" ? (vue.openBlock(), vue.createElementBlock("video", {
             key: 1,
             ref: "video",
@@ -7176,10 +7219,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           }, [
             vue.createElementVNode("source", {
               src: `${media.value.fileUrl}#t=0.01`
-            }, null, 8, _hoisted_5$b)
-          ], 8, _hoisted_4$f)) : vue.createCommentVNode("", true)
-        ], 64)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$a, [
-          vue.createElementVNode("span", _hoisted_7$9, vue.toDisplayString(placeholderIcon.value), 1)
+            }, null, 8, _hoisted_7$9)
+          ], 8, _hoisted_6$a)) : vue.createCommentVNode("", true)
+        ], 64)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$8, [
+          vue.createElementVNode("span", _hoisted_9$5, vue.toDisplayString(placeholderIcon.value), 1)
         ])) : vue.createCommentVNode("", true);
       };
     }
@@ -9841,7 +9884,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_6$8 = { class: "title" };
   const _hoisted_7$7 = { class: "flex-grow-1 bs-layout-horizontal" };
   const _hoisted_8$6 = { class: "flex-align-center mt-12" };
-  const _hoisted_9$3 = { class: "title" };
+  const _hoisted_9$4 = { class: "title" };
   const _hoisted_10$3 = { class: "flex-grow-1 bs-layout-horizontal" };
   const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorSize",
@@ -9915,7 +9958,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             ])
           ]),
           vue.createElementVNode("div", _hoisted_8$6, [
-            vue.createElementVNode("div", _hoisted_9$3, [
+            vue.createElementVNode("div", _hoisted_9$4, [
               vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.prop.minSize" }]
               ])
@@ -11648,7 +11691,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     key: 0,
     class: "vc-sketch-field"
   };
-  const _hoisted_9$2 = { class: "vc-sketch-field--double" };
+  const _hoisted_9$3 = { class: "vc-sketch-field--double" };
   const _hoisted_10$2 = { class: "vc-sketch-field--single" };
   const _hoisted_11$1 = { class: "vc-sketch-field--single" };
   const _hoisted_12$1 = { class: "vc-sketch-field--single" };
@@ -11709,7 +11752,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         ]),
         !$props.disableFields ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$5, [
           vue.createCommentVNode(" rgba "),
-          vue.createElementVNode("div", _hoisted_9$2, [
+          vue.createElementVNode("div", _hoisted_9$3, [
             vue.createVNode(_component_EdIn, {
               label: "hex",
               value: $options.hex,
@@ -11973,7 +12016,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_6$5 = { class: "color" };
   const _hoisted_7$5 = { class: "mt-8" };
   const _hoisted_8$4 = { class: "sub-title" };
-  const _hoisted_9$1 = { class: "flex-grow-1 mt-4" };
+  const _hoisted_9$2 = { class: "flex-grow-1 mt-4" };
   const _hoisted_10$1 = { class: "bg-gray-100 py-5 rounded-8" };
   const _hoisted_11 = { class: "text-center" };
   const _hoisted_12 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
@@ -12059,7 +12102,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   [vue.unref(bluesea.vT), { key: "pb.prop.borderWidth" }]
                 ])
               ]),
-              vue.createElementVNode("div", _hoisted_9$1, [
+              vue.createElementVNode("div", _hoisted_9$2, [
                 vue.createElementVNode("div", _hoisted_10$1, [
                   vue.createElementVNode("div", _hoisted_11, [
                     vue.createVNode(vue.unref(bluesea.BSTextInput), {
@@ -12719,6 +12762,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const _hoisted_6$2 = { class: "title mt-12" };
   const _hoisted_7$2 = { class: "title mt-12" };
   const _hoisted_8$1 = { class: "title mt-12" };
+  const _hoisted_9$1 = { class: "title mt-12" };
   const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorMedia",
     props: {
@@ -12726,6 +12770,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       selectedParts: {}
     },
     setup(__props) {
+      const props = __props;
       const pageBuilder = usePageBuilderEditor();
       const part = pageBuilder.context.getSelectedParts();
       const modal = bluesea.useModal();
@@ -12764,6 +12809,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         var _a, _b;
         return (_b = (_a = part == null ? void 0 : part[0]) == null ? void 0 : _a.properties) == null ? void 0 : _b.linkTarget;
       });
+      const tagItems = vue.computed(() => {
+        var _a;
+        const prop = (_a = props.group.properties) == null ? void 0 : _a.find((v) => v.propertyName === "tag");
+        return prop ? (prop.params || "").split(",") : [];
+      });
+      const tag = vue.computed(() => {
+        var _a, _b;
+        return (_b = (_a = part == null ? void 0 : part[0]) == null ? void 0 : _a.properties) == null ? void 0 : _b.tag;
+      });
       const thumbnail = vue.computed(() => {
         var _a, _b;
         return (_b = (_a = part == null ? void 0 : part[0]) == null ? void 0 : _a.properties) == null ? void 0 : _b.thumbnail;
@@ -12790,7 +12844,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             ])
           ]),
           ((_a = media.value) == null ? void 0 : _a.fileUrl) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$8, [
-            _cache[3] || (_cache[3] = vue.createElementVNode("label", null, "URL", -1)),
+            _cache[4] || (_cache[4] = vue.createElementVNode("label", null, "URL", -1)),
             vue.createElementVNode("div", _hoisted_4$4, [
               vue.createTextVNode(vue.toDisplayString((_b = media.value) == null ? void 0 : _b.fileUrl) + " ", 1),
               vue.withDirectives(vue.createVNode(vue.unref(bluesea.BSButton), {
@@ -12844,10 +12898,22 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 width: "100%",
                 "onUpdate:modelValue": _cache[1] || (_cache[1] = (value) => updateProperty({ linkTarget: value }))
               }, null, 8, ["model-value"])
+            ]),
+            vue.createElementVNode("div", _hoisted_8$1, [
+              vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
+                [vue.unref(bluesea.vT), { key: "pb.prop.tag" }]
+              ])
+            ]),
+            vue.createElementVNode("div", null, [
+              vue.createVNode(vue.unref(bluesea.BSSelect), {
+                items: tagItems.value,
+                "model-value": tag.value,
+                "onUpdate:modelValue": _cache[2] || (_cache[2] = (value) => updateProperty({ tag: value }))
+              }, null, 8, ["items", "model-value"])
             ])
           ], 64)) : vue.createCommentVNode("", true),
           ((_d = media.value) == null ? void 0 : _d.mediaType) === "Video" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
-            vue.createElementVNode("div", _hoisted_8$1, [
+            vue.createElementVNode("div", _hoisted_9$1, [
               vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.prop.thumbnail" }]
               ])
@@ -12856,7 +12922,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               vue.createVNode(vue.unref(bluesea.BSTextInput), {
                 "model-value": thumbnail.value,
                 width: "100%",
-                "onUpdate:modelValue": _cache[2] || (_cache[2] = (value) => updateProperty({ thumbnail: value }))
+                "onUpdate:modelValue": _cache[3] || (_cache[3] = (value) => updateProperty({ thumbnail: value }))
               }, null, 8, ["model-value"])
             ])
           ], 64)) : vue.createCommentVNode("", true)
@@ -13026,6 +13092,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               caption: "Link Target",
               propertyType: "text"
             },
+            {
+              propertyName: "tag",
+              caption: "pb.prop.tag",
+              propertyType: "select",
+              params: ",div,h1,h2,h3,h4,h5,h6,p"
+            },
             {
               propertyName: "thumbnail",
               caption: "Thumbnail URL",
@@ -13089,7 +13161,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         },
         ...defaultWidgetPropertyGroups()
       ],
-      initialProperties: {},
+      initialProperties: {
+        width: "100%",
+        height: "100%"
+      },
       allowsChild: () => false,
       creator: () => _sfc_main$5$1
     },
@@ -15407,7 +15482,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
     }
   });
-  const canvasStyle = '.pb-page {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  overflow-x: hidden;\n}\n.pb-page .pb-section {\n  display: flex;\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-section .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}\n.pb-page .pb-section .pb-block .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-page .pb-section .pb-block .pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-page .pb-section .pb-block .pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-page .pb-section .pb-block .pb-text-widget .text {\n  display: block;\n  color: #333;\n}\n.pb-page .pb-section .pb-block .pb-text-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-page .pb-section .pb-block .pb-media-widget {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .image {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .video {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-page .pb-section .pb-block .pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-page .pb-section .pb-block .pb-html-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-page .pb-section .pb-block .pb-iframe-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-page .pb-section .pb-block .pb-iframe-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget .youtube {\n  width: 100%;\n  height: 100%;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-page .pb-section .pb-block .pb-container-widget {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-container-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-container-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-page .pb-section .pb-block .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-page .pb-section .pb-block .pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n.pb-page .pb-section .pb-block .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-page .pb-section .pb-block .pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .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-page .pb-section .pb-block .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n.pb-page .pb-section .pb-block .mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n.pb-page .pb-section .pb-block .pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .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.pb-page * {\n  box-sizing: border-box;\n}\n.pb-viewer {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  overflow-y: auto;\n}\n.pb-page-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\n.pb-page {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  padding-bottom: 100px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-page-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background-color: #fff;\n}\n.pb-page .pb-page-content.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\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  display: flex;\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n}\n.pb-section:empty {\n  background-color: #fff;\n}\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-section.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\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::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\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  pointer-events: auto !important;\n  min-height: 50px;\n}\n.pb-widget * {\n  pointer-events: none;\n}\n.pb-widget > .invalid-widget {\n  display: flex;\n  height: 50px;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-widget.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\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  pointer-events: auto !important;\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  pointer-events: auto !important;\n}\nbody {\n  margin: 0;\n  padding: 0;\n  background-color: var(--color-canvas-frame-bg);\n  overflow: hidden;\n}\n.font-icon, .material-icons-outlined {\n  font-family: "Material Symbols Outlined", monospace;\n  font-size: 1rem;\n  max-width: 1em;\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  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  font-style: normal;\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}';
+  const canvasStyle = '.pb-page {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  overflow-x: hidden;\n}\n.pb-page .pb-section {\n  display: flex;\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-section .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}\n.pb-page .pb-section .pb-block .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-page .pb-section .pb-block .pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-page .pb-section .pb-block .pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-page .pb-section .pb-block .pb-text-widget .text {\n  display: block;\n  color: #333;\n}\n.pb-page .pb-section .pb-block .pb-text-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-page .pb-section .pb-block .pb-media-widget {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .image-container {\n  margin: 0;\n  padding: 0;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .image {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .video {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-media-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-page .pb-section .pb-block .pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-page .pb-section .pb-block .pb-html-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-page .pb-section .pb-block .pb-iframe-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-page .pb-section .pb-block .pb-iframe-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget .youtube {\n  width: 100%;\n  height: 100%;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-youtube-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-page .pb-section .pb-block .pb-container-widget {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-container-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .pb-container-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-page .pb-section .pb-block .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-page .pb-section .pb-block .pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n.pb-page .pb-section .pb-block .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-page .pb-section .pb-block .pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n.pb-page .pb-section .pb-block .pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .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-page .pb-section .pb-block .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n.pb-page .pb-section .pb-block .mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n.pb-page .pb-section .pb-block .pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n.pb-page .pb-section .pb-block .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.pb-page * {\n  box-sizing: border-box;\n}\n.pb-viewer {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  overflow-y: auto;\n}\n.pb-page-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\n.pb-page {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  padding-bottom: 100px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-page-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background-color: #fff;\n}\n.pb-page .pb-page-content.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\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  display: flex;\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n}\n.pb-section:empty {\n  background-color: #fff;\n}\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-section.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\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::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\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  pointer-events: auto !important;\n  min-height: 50px;\n}\n.pb-widget * {\n  pointer-events: none;\n}\n.pb-widget > .invalid-widget {\n  display: flex;\n  height: 50px;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-widget.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\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  pointer-events: auto !important;\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  pointer-events: auto !important;\n}\nbody {\n  margin: 0;\n  padding: 0;\n  background-color: var(--color-canvas-frame-bg);\n  overflow: hidden;\n}\n.font-icon, .material-icons-outlined {\n  font-family: "Material Symbols Outlined", monospace;\n  font-size: 1rem;\n  max-width: 1em;\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  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  font-style: normal;\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}';
   const _hoisted_1$h = ["width"];
   const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPageFrame",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@g1cloud/page-builder-editor",
   "private": false,
-  "version": "1.0.0-alpha.91",
+  "version": "1.0.0-alpha.92",
   "engins": {
     "node": ">= 20.0.0"
   },
@@ -31,7 +31,7 @@
     "vue-router": "^4.4.3",
     "vue3-click-away": "^1.2.4",
     "yjs": "^13.6.14",
-    "@g1cloud/page-builder-viewer": "1.0.0-alpha.91"
+    "@g1cloud/page-builder-viewer": "1.0.0-alpha.92"
   },
   "devDependencies": {
     "@types/node": "^20.12.7",