@g1cloud/page-builder-editor 1.0.0-alpha.87 → 1.0.0-alpha.88

package/dist/{index-CKM2TN0Q.js → index-DUYDGuPh.js}

@@ -1,7 +1,7 @@
 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, watch, onMounted, onBeforeUnmount, createBlock as createBlock$1, resolveDynamicComponent, 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 { 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 YouTube from "vue3-youtube";
 const create$5 = () => /* @__PURE__ */ new Map();
@@ -6880,7 +6880,7 @@ let Model$1 = class Model {
     this.rootPart = ref(new RootPart());
   }
 };
-const _hoisted_1$a$1 = ["data-part-id"];
+const _hoisted_1$8$1 = ["data-part-id"];
 const _sfc_main$b$1 = /* @__PURE__ */ defineComponent({
   __name: "PbWidget",
   props: {
@@ -6940,13 +6940,12 @@ const _sfc_main$b$1 = /* @__PURE__ */ defineComponent({
           part: _ctx.part,
           "onUpdate:visible": updateVisible
         }, null, 40, ["part"])) : createCommentVNode("", true)
-      ], 14, _hoisted_1$a$1)), [
+      ], 14, _hoisted_1$8$1)), [
         [vShow, visible.value]
       ]);
     };
   }
 });
-const _hoisted_1$9$1 = ["data-part-id"];
 const _sfc_main$a$1 = /* @__PURE__ */ defineComponent({
   __name: "PbBlock",
   props: {
@@ -6964,6 +6963,12 @@ const _sfc_main$a$1 = /* @__PURE__ */ defineComponent({
       }
       emit("update:visible", visible.value, hideParentWhenInvisible);
     };
+    const validTags = ["div", "section", "li"];
+    const tag = computed(() => {
+      var _a;
+      const _tag = (_a = props.part.properties) == null ? void 0 : _a.tag;
+      return validTags.includes(_tag) ? _tag : "div";
+    });
     const classNames = computed(() => [getPartClassName(props.part), props.part.getClassNames()]);
     const style = computed(() => ({
       ...props.part.getStyles(props.isMobilePage),
@@ -6997,25 +7002,29 @@ const _sfc_main$a$1 = /* @__PURE__ */ defineComponent({
       removeStyleTag();
     });
     return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createElementBlock("div", {
-        class: normalizeClass(classNames.value),
-        "data-part-id": _ctx.part.partId,
-        style: normalizeStyle(style.value)
-      }, [
-        _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.part.children, (child) => {
-          return openBlock(), createBlock$1(_sfc_main$b$1, {
-            key: child.partId,
-            part: child,
-            "onUpdate:visible": _cache[0] || (_cache[0] = (value, hideParentWhenInvisible) => updateVisible(value, hideParentWhenInvisible))
-          }, null, 8, ["part"]);
-        }), 128)) : createCommentVNode("", true)
-      ], 14, _hoisted_1$9$1)), [
+      return withDirectives((openBlock(), createElementBlock("template", null, [
+        (openBlock(), createBlock$1(resolveDynamicComponent(tag.value), {
+          class: normalizeClass(classNames.value),
+          "data-part-id": _ctx.part.partId,
+          style: normalizeStyle(style.value)
+        }, {
+          default: withCtx(() => [
+            _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.part.children, (child) => {
+              return openBlock(), createBlock$1(_sfc_main$b$1, {
+                key: child.partId,
+                part: child,
+                "onUpdate:visible": _cache[0] || (_cache[0] = (value, hideParentWhenInvisible) => updateVisible(value, hideParentWhenInvisible))
+              }, null, 8, ["part"]);
+            }), 128)) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 8, ["class", "data-part-id", "style"]))
+      ], 512)), [
         [vShow, visible.value]
       ]);
     };
   }
 });
-const _hoisted_1$8$1 = ["data-part-id"];
 const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
   __name: "PbSection",
   props: {
@@ -7030,6 +7039,12 @@ const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
         visible.value = false;
       }
     };
+    const validTags = ["div", "section", "ul"];
+    const tag = computed(() => {
+      var _a;
+      const _tag = (_a = props.part.properties) == null ? void 0 : _a.tag;
+      return validTags.includes(_tag) ? _tag : "div";
+    });
     const classNames = computed(() => [getPartClassName(props.part), props.part.getClassNames()]);
     const style = computed(() => ({
       ...props.part.getStyles(props.isMobilePage),
@@ -7063,27 +7078,32 @@ const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
       removeStyleTag();
     });
     return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createElementBlock("div", {
-        class: normalizeClass(classNames.value),
-        "data-part-id": _ctx.part.partId,
-        style: normalizeStyle(style.value)
-      }, [
-        _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.part.children, (child) => {
-          return openBlock(), createBlock$1(_sfc_main$a$1, {
-            key: child.partId,
-            "is-mobile-page": _ctx.isMobilePage,
-            part: child,
-            "onUpdate:visible": _cache[0] || (_cache[0] = (value, hideParentWhenInvisible) => updateVisible(value, hideParentWhenInvisible))
-          }, null, 8, ["is-mobile-page", "part"]);
-        }), 128)) : createCommentVNode("", true)
-      ], 14, _hoisted_1$8$1)), [
+      return withDirectives((openBlock(), createElementBlock("template", null, [
+        (openBlock(), createBlock$1(resolveDynamicComponent(tag.value), {
+          class: normalizeClass(classNames.value),
+          "data-part-id": _ctx.part.partId,
+          style: normalizeStyle(style.value)
+        }, {
+          default: withCtx(() => [
+            _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.part.children, (child) => {
+              return openBlock(), createBlock$1(_sfc_main$a$1, {
+                key: child.partId,
+                "is-mobile-page": _ctx.isMobilePage,
+                part: child,
+                "onUpdate:visible": _cache[0] || (_cache[0] = (value, hideParentWhenInvisible) => updateVisible(value, hideParentWhenInvisible))
+              }, null, 8, ["is-mobile-page", "part"]);
+            }), 128)) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 8, ["class", "data-part-id", "style"]))
+      ], 512)), [
         [vShow, visible.value]
       ]);
     };
   }
 });
 const _hoisted_1$7$1 = ["href", "target"];
-const _hoisted_2$4$1 = ["alt", "src"];
+const _hoisted_2$3$1 = ["alt", "src"];
 const _hoisted_3$d = ["alt", "src"];
 const _hoisted_4$b = ["poster"];
 const _hoisted_5$8 = ["src"];
@@ -7142,7 +7162,7 @@ const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
               src: ((_d = _ctx.part.properties) == null ? void 0 : _d.media).fileUrl,
               style: normalizeStyle(style.value),
               class: "image"
-            }, null, 12, _hoisted_2$4$1)
+            }, null, 12, _hoisted_2$3$1)
           ], 8, _hoisted_1$7$1)) : (openBlock(), createElementBlock("img", {
             key: 1,
             alt: altText.value,
@@ -7167,8 +7187,7 @@ const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$6$1 = ["textContent"];
-const _hoisted_2$3$1 = {
+const _hoisted_1$6$1 = {
   key: 1,
   class: "placeholder",
   textContent: "Empty Text"
@@ -7182,6 +7201,12 @@ const _sfc_main$7$1 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const pageBuilder = usePageBuilder();
+    const validTags = ["div", "h1", "h2", "h3", "h4", "h5", "h6", "p", "span"];
+    const tag = computed(() => {
+      var _a;
+      const _tag = (_a = props.part.properties) == null ? void 0 : _a.tag;
+      return validTags.includes(_tag) ? _tag : "div";
+    });
     const text = computed(() => {
       var _a;
       if ((_a = props.part.properties) == null ? void 0 : _a.text) {
@@ -7203,12 +7228,12 @@ const _sfc_main$7$1 = /* @__PURE__ */ defineComponent({
       };
     });
     return (_ctx, _cache) => {
-      return text.value ? (openBlock(), createElementBlock("div", {
+      return text.value ? (openBlock(), createBlock$1(resolveDynamicComponent(tag.value), {
         key: 0,
         style: normalizeStyle(style.value),
         class: "text",
         textContent: toDisplayString(text.value)
-      }, null, 12, _hoisted_1$6$1)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_2$3$1)) : createCommentVNode("", true);
+      }, null, 8, ["style", "textContent"])) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_1$6$1)) : createCommentVNode("", true);
     };
   }
 });
@@ -7852,7 +7877,7 @@ const _sfc_main$2$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$u = {
+const _hoisted_1$s = {
   key: 1,
   class: "placeholder",
   textContent: "Empty Widget"
@@ -7873,7 +7898,7 @@ const _sfc_main$1$1 = /* @__PURE__ */ defineComponent({
           key: child.part.partId,
           part: child.part
         }, null, 8, ["part"]);
-      }), 128)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_1$u)) : createCommentVNode("", true);
+      }), 128)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_1$s)) : createCommentVNode("", true);
     };
   }
 });
@@ -8481,16 +8506,16 @@ class PartManager {
 const defaultPartPropertyEditors = () => {
   return {
     "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-BJ5qx69O.js")),
-    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-DdZJDy5K.js")),
+    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-DnMxWwDQ.js")),
     "number": () => defineAsyncComponent(() => import("./PbPropertyEditorNumber-B76ArSb5.js")),
     "boolean": () => defineAsyncComponent(() => import("./PbPropertyEditorBoolean-c5CNiTpt.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-2DV3EbNx.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-Cin44mTy.js")),
     "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-B5sfulvx.js")),
-    "css-length": () => defineAsyncComponent(() => import("./PbPropertyEditorCssLength-BEUxumJw.js")),
-    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-DHYODwQa.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-CkuJ28-N.js")),
-    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-B1GJNEmo.js")),
-    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-B7uPo3aW.js"))
+    "css-length": () => defineAsyncComponent(() => import("./PbPropertyEditorCssLength-DBNTbWi_.js")),
+    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-C59bCD27.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-DmakSvWs.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-D8Mn6FNE.js")),
+    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-DfRViDLo.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -8740,9 +8765,9 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 const _sfc_main$p = {};
-const _hoisted_1$t = { class: "pb-add-widget-button" };
+const _hoisted_1$r = { class: "pb-add-widget-button" };
 function _sfc_render$1(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$t, [
+  return openBlock(), createElementBlock("div", _hoisted_1$r, [
     createElementVNode("button", {
       onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("add-widget", $event))
     }, _cache[1] || (_cache[1] = [
@@ -8779,7 +8804,7 @@ const useMouseTracker = () => {
   if (!mouseTracker) throw Error(MOUSE_TRACKER_NOT_FOUND);
   return mouseTracker;
 };
-const _hoisted_1$s = ["data-part-id", "draggable"];
+const _hoisted_1$q = ["data-part-id", "draggable"];
 const _hoisted_2$h = {
   key: 1,
   class: "invalid-widget",
@@ -9249,13 +9274,12 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           class: "resize-handle",
           onMousedown: resizeChild
         }, null, 32)) : createCommentVNode("", true)
-      ], 14, _hoisted_1$s)), [
+      ], 14, _hoisted_1$q)), [
         [unref(vPartHandler), { pageBuilder: unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
       ]);
     };
   }
 });
-const _hoisted_1$r = ["data-part-id"];
 const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "PbBlock",
   props: {
@@ -9266,6 +9290,12 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const pageBuilder = usePageBuilderEditor();
+    const validTags = ["div", "section", "li"];
+    const tag = computed(() => {
+      var _a;
+      const _tag = (_a = props.part.properties) == null ? void 0 : _a.tag;
+      return validTags.includes(_tag) ? _tag : "div";
+    });
     const selected = computed(() => pageBuilder.context.isSelected(props.part));
     const classNames = computed(() => [
       selected.value ? "selected" : "",
@@ -9465,31 +9495,37 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
       return index;
     };
     return (_ctx, _cache) => {
-      var _a, _b;
-      return withDirectives((openBlock(), createElementBlock("div", mergeProps({
+      var _a;
+      return withDirectives((openBlock(), createBlock$1(resolveDynamicComponent(tag.value), mergeProps({
         ref_key: "partRef",
         ref: partRef,
         class: [classNames.value, "pb-block"],
         "data-part-id": _ctx.part.partId,
         style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
-      }, properties.value), [
-        !_ctx.part.children || ((_b = _ctx.part.children) == null ? void 0 : _b.length) === 0 ? (openBlock(), createBlock$1(PbAddWidgetButton, {
-          key: 0,
-          onAddWidget: addWidget
-        })) : createCommentVNode("", true),
-        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.part.children, (child) => {
-          return openBlock(), createBlock$1(_sfc_main$o, {
-            key: child.partId,
-            part: child
-          }, null, 8, ["part"]);
-        }), 128))
-      ], 16, _hoisted_1$r)), [
+      }, properties.value), {
+        default: withCtx(() => {
+          var _a2;
+          return [
+            !_ctx.part.children || ((_a2 = _ctx.part.children) == null ? void 0 : _a2.length) === 0 ? (openBlock(), createBlock$1(PbAddWidgetButton, {
+              key: 0,
+              onAddWidget: addWidget
+            })) : createCommentVNode("", true),
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.part.children, (child) => {
+              return openBlock(), createBlock$1(_sfc_main$o, {
+                key: child.partId,
+                part: child
+              }, null, 8, ["part"]);
+            }), 128))
+          ];
+        }),
+        _: 1
+      }, 16, ["class", "data-part-id", "style"])), [
         [unref(vPartHandler), { pageBuilder: unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
       ]);
     };
   }
 });
-const _hoisted_1$q = { class: "pb-block" };
+const _hoisted_1$p = { class: "pb-block" };
 const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "PbLoginDepart",
   props: {
@@ -9497,7 +9533,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$q, _cache[0] || (_cache[0] = [
+      return openBlock(), createElementBlock("div", _hoisted_1$p, _cache[0] || (_cache[0] = [
         createElementVNode("div", {
           class: "pb-widget",
           style: { "margin": "0 auto" }
@@ -9510,7 +9546,6 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$p = ["data-part-id"];
 const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "PbSection",
   props: {
@@ -9521,6 +9556,12 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const pageBuilder = usePageBuilderEditor();
+    const validTags = ["div", "section", "ul"];
+    const tag = computed(() => {
+      var _a;
+      const _tag = (_a = props.part.properties) == null ? void 0 : _a.tag;
+      return validTags.includes(_tag) ? _tag : "div";
+    });
     const selected = computed(() => pageBuilder.context.isSelected(props.part));
     const classNames = computed(() => {
       return [
@@ -9644,32 +9685,38 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
       return index;
     };
     return (_ctx, _cache) => {
-      var _a, _b, _c;
-      return withDirectives((openBlock(), createElementBlock("div", mergeProps({
+      var _a;
+      return withDirectives((openBlock(), createBlock$1(resolveDynamicComponent(tag.value), mergeProps({
         ref_key: "partRef",
         ref: partRef,
         class: [classNames.value, "pb-section"],
         "data-part-id": _ctx.part.partId,
         style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
-      }, properties.value), [
-        ((_b = _ctx.part.properties) == null ? void 0 : _b.sectionType) === "static" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-          ((_c = _ctx.part.properties) == null ? void 0 : _c.name) === "Login Design Part" ? (openBlock(), createBlock$1(_sfc_main$m, {
-            key: 0,
-            part: _ctx.part
-          }, null, 8, ["part"])) : createCommentVNode("", true)
-        ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.part.children, (block) => {
-            return openBlock(), createBlock$1(_sfc_main$n, {
-              key: block.partId,
-              "is-mobile-page": _ctx.isMobilePage,
-              part: block
-            }, null, 8, ["is-mobile-page", "part"]);
-          }), 128)) : (openBlock(), createBlock$1(PbAddWidgetButton, {
-            key: 1,
-            onAddWidget: addWidget
-          }))
-        ], 64))
-      ], 16, _hoisted_1$p)), [
+      }, properties.value), {
+        default: withCtx(() => {
+          var _a2, _b;
+          return [
+            ((_a2 = _ctx.part.properties) == null ? void 0 : _a2.sectionType) === "static" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              ((_b = _ctx.part.properties) == null ? void 0 : _b.name) === "Login Design Part" ? (openBlock(), createBlock$1(_sfc_main$m, {
+                key: 0,
+                part: _ctx.part
+              }, null, 8, ["part"])) : createCommentVNode("", true)
+            ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.part.children, (block) => {
+                return openBlock(), createBlock$1(_sfc_main$n, {
+                  key: block.partId,
+                  "is-mobile-page": _ctx.isMobilePage,
+                  part: block
+                }, null, 8, ["is-mobile-page", "part"]);
+              }), 128)) : (openBlock(), createBlock$1(PbAddWidgetButton, {
+                key: 1,
+                onAddWidget: addWidget
+              }))
+            ], 64))
+          ];
+        }),
+        _: 1
+      }, 16, ["class", "data-part-id", "style"])), [
         [unref(vPartHandler), { pageBuilder: unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
       ]);
     };
@@ -12439,7 +12486,7 @@ const commonGroup = () => {
     ]
   };
 };
-const layoutGroup = () => {
+const sectionLayoutGroup = () => {
   return {
     groupName: "layout",
     caption: "pb.prop.layout",
@@ -12460,6 +12507,43 @@ const layoutGroup = () => {
         propertyName: "gap",
         caption: "pb.prop.gap",
         propertyType: "text"
+      },
+      {
+        propertyName: "tag",
+        caption: "pb.prop.tag",
+        propertyType: "select",
+        params: "div,section,ul"
+      }
+    ]
+  };
+};
+const blockLayoutGroup = () => {
+  return {
+    groupName: "layout",
+    caption: "pb.prop.layout",
+    properties: [
+      {
+        propertyName: "direction",
+        caption: "pb.prop.layout",
+        propertyType: "select",
+        params: "vertical,horizontal"
+      },
+      {
+        propertyName: "wrap",
+        caption: "pb.prop.wrap",
+        propertyType: "select",
+        params: "nowrap,wrap"
+      },
+      {
+        propertyName: "gap",
+        caption: "pb.prop.gap",
+        propertyType: "text"
+      },
+      {
+        propertyName: "tag",
+        caption: "pb.prop.tag",
+        propertyType: "select",
+        params: "div,section,li"
       }
     ]
   };
@@ -12604,8 +12688,11 @@ const hideParentGroup = () => {
     ]
   };
 };
-const defaultPropertyGroups = () => {
-  return [layoutGroup(), alignGroup(), sizeGroup(), marginGroup(), paddingGroup(), backgroundGroup(), commonGroup()];
+const defaultSectionPropertyGroups = () => {
+  return [sectionLayoutGroup(), alignGroup(), sizeGroup(), marginGroup(), paddingGroup(), backgroundGroup(), commonGroup()];
+};
+const defaultBlockPropertyGroups = () => {
+  return [blockLayoutGroup(), alignGroup(), sizeGroup(), marginGroup(), paddingGroup(), backgroundGroup(), commonGroup()];
 };
 const defaultWidgetPropertyGroups = () => {
   return [alignSelfGroup(), positionGroup(), sizeGroup(), marginGroup(), paddingGroup(), borderGroup(), backgroundGroup(), commonGroup(), hideParentGroup()];
@@ -12806,7 +12893,7 @@ const sectionParts = [
     icon: "rectangle",
     className: "pb-section",
     propertyGroups: [
-      ...defaultPropertyGroups()
+      ...defaultSectionPropertyGroups()
     ],
     initialProperties: {
       direction: "horizontal",
@@ -12825,7 +12912,7 @@ const blockParts = [
     icon: "space_dashboard",
     className: "pb-block",
     propertyGroups: [
-      ...defaultPropertyGroups()
+      ...defaultBlockPropertyGroups()
     ],
     initialProperties: {
       direction: "vertical",
@@ -12878,6 +12965,12 @@ const widgets = [
             caption: "pb.prop.fontColor",
             propertyType: "color",
             params: ""
+          },
+          {
+            propertyName: "tag",
+            caption: "pb.prop.tag",
+            propertyType: "select",
+            params: "div,h1,h2,h3,h4,h5,h6,p,span"
           }
         ]
       },
@@ -12890,7 +12983,8 @@ const widgets = [
       paddingBottom: "12px",
       paddingLeft: "12px",
       paddingRight: "12px",
-      align: "center"
+      align: "center",
+      tag: "div"
     },
     allowsChild: () => false,
     creator: () => _sfc_main$7$1
@@ -13130,7 +13224,7 @@ __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
 let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
 const openWidgetAddModal = (modal, args, callback) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./PbWidgetAddModal-BqYB3aeV.js")),
+    component: defineAsyncComponent(() => import("./PbWidgetAddModal-BtkQzPFR.js")),
     style: {
       width: "80%",
       height: "80%",
@@ -15302,7 +15396,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  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 {\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",
@@ -15727,6 +15821,10 @@ const enTexts = [
     key: "pb.prop.fontColor",
     text: "Font Color"
   },
+  {
+    key: "pb.prop.tag",
+    text: "HTML Tag"
+  },
   {
     key: "pb.prop.image",
     text: "Image"
@@ -16061,6 +16159,10 @@ const jaTexts = [
     key: "pb.prop.fontColor",
     text: "フォントの色"
   },
+  {
+    key: "pb.prop.tag",
+    text: "HTMLのタグ"
+  },
   {
     key: "pb.prop.image",
     text: "画像"
@@ -16395,6 +16497,10 @@ const koTexts = [
     key: "pb.prop.fontColor",
     text: "텍스트 색상"
   },
+  {
+    key: "pb.prop.tag",
+    text: "HTML 태그"
+  },
   {
     key: "pb.prop.image",
     text: "이미지"
@@ -16729,6 +16835,10 @@ const zhTexts = [
     key: "pb.prop.fontColor",
     text: "字体颜色"
   },
+  {
+    key: "pb.prop.tag",
+    text: "HTML 标签"
+  },
   {
     key: "pb.prop.image",
     text: "图片"
@@ -17063,6 +17173,10 @@ const frTexts = [
     key: "pb.prop.fontColor",
     text: "Couleur de police"
   },
+  {
+    key: "pb.prop.tag",
+    text: "balise HTML"
+  },
   {
     key: "pb.prop.image",
     text: "Image"