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

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

@@ -6693,10 +6693,11 @@ var __publicField = (obj, key, value) => {
       return propertyName === PART_ID_KEY$1 ? this.partId : (_a = this.properties) == null ? void 0 : _a[propertyName];
     }
     getClassNames() {
-      return "";
+      var _a;
+      return ((_a = this.properties) == null ? void 0 : _a.classNames) || "";
     }
     getStyles() {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N;
       const style = {};
       if (((_a = this.properties) == null ? void 0 : _a.direction) === "horizontal") {
         style.display = "flex";
@@ -6740,42 +6741,81 @@ var __publicField = (obj, key, value) => {
         style.width = this.properties.width;
       if ((_s = this.properties) == null ? void 0 : _s.height)
         style.height = this.properties.height;
-      if ((_t = this.properties) == null ? void 0 : _t.backgroundColor)
+      if ((_t = this.properties) == null ? void 0 : _t.maxWidth)
+        style.width = this.properties.maxWidth;
+      if ((_u = this.properties) == null ? void 0 : _u.maxHeight)
+        style.height = this.properties.maxHeight;
+      if ((_v = this.properties) == null ? void 0 : _v.minWidth)
+        style.width = this.properties.minWidth;
+      if ((_w = this.properties) == null ? void 0 : _w.minHeight)
+        style.height = this.properties.minHeight;
+      if ((_x = this.properties) == null ? void 0 : _x.backgroundColor)
         style.backgroundColor = this.properties.backgroundColor;
-      if ((_u = this.properties) == null ? void 0 : _u.borderLeftWidth)
+      if ((_y = this.properties) == null ? void 0 : _y.borderLeftWidth)
         style.borderLeftWidth = this.properties.borderLeftWidth;
-      if ((_v = this.properties) == null ? void 0 : _v.borderRightWidth)
+      if ((_z = this.properties) == null ? void 0 : _z.borderRightWidth)
         style.borderRightWidth = this.properties.borderRightWidth;
-      if ((_w = this.properties) == null ? void 0 : _w.borderTopWidth)
+      if ((_A = this.properties) == null ? void 0 : _A.borderTopWidth)
         style.borderTopWidth = this.properties.borderTopWidth;
-      if ((_x = this.properties) == null ? void 0 : _x.borderBottomWidth)
+      if ((_B = this.properties) == null ? void 0 : _B.borderBottomWidth)
         style.borderBottomWidth = this.properties.borderBottomWidth;
-      if ((_y = this.properties) == null ? void 0 : _y.borderTopLeftRadius)
+      if ((_C = this.properties) == null ? void 0 : _C.borderTopLeftRadius)
         style.borderTopLeftRadius = this.properties.borderTopLeftRadius;
-      if ((_z = this.properties) == null ? void 0 : _z.borderTopRightRadius)
+      if ((_D = this.properties) == null ? void 0 : _D.borderTopRightRadius)
         style.borderTopRightRadius = this.properties.borderTopRightRadius;
-      if ((_A = this.properties) == null ? void 0 : _A.borderBottomLeftRadius)
+      if ((_E = this.properties) == null ? void 0 : _E.borderBottomLeftRadius)
         style.borderBottomLeftRadius = this.properties.borderBottomLeftRadius;
-      if ((_B = this.properties) == null ? void 0 : _B.borderBottomRightRadius)
+      if ((_F = this.properties) == null ? void 0 : _F.borderBottomRightRadius)
         style.borderBottomRightRadius = this.properties.borderBottomRightRadius;
-      if (((_C = this.properties) == null ? void 0 : _C.borderColor) && style.borderLeftWidth) {
+      if (((_G = this.properties) == null ? void 0 : _G.borderColor) && style.borderLeftWidth) {
         style.borderLeftStyle = "solid";
-        style.borderLeftColor = (_D = this.properties) == null ? void 0 : _D.borderColor;
+        style.borderLeftColor = (_H = this.properties) == null ? void 0 : _H.borderColor;
       }
-      if (((_E = this.properties) == null ? void 0 : _E.borderColor) && style.borderRightWidth) {
+      if (((_I = this.properties) == null ? void 0 : _I.borderColor) && style.borderRightWidth) {
         style.borderRightStyle = "solid";
-        style.borderRightColor = (_F = this.properties) == null ? void 0 : _F.borderColor;
+        style.borderRightColor = (_J = this.properties) == null ? void 0 : _J.borderColor;
       }
-      if (((_G = this.properties) == null ? void 0 : _G.borderColor) && style.borderTopWidth) {
+      if (((_K = this.properties) == null ? void 0 : _K.borderColor) && style.borderTopWidth) {
         style.borderTopStyle = "solid";
-        style.borderTopColor = (_H = this.properties) == null ? void 0 : _H.borderColor;
+        style.borderTopColor = (_L = this.properties) == null ? void 0 : _L.borderColor;
       }
-      if (((_I = this.properties) == null ? void 0 : _I.borderColor) && style.borderBottomWidth) {
+      if (((_M = this.properties) == null ? void 0 : _M.borderColor) && style.borderBottomWidth) {
         style.borderBottomStyle = "solid";
-        style.borderBottomColor = (_J = this.properties) == null ? void 0 : _J.borderColor;
+        style.borderBottomColor = (_N = this.properties) == null ? void 0 : _N.borderColor;
       }
       return style;
     }
+    getInlineStyles() {
+      var _a;
+      const styleObject = {};
+      const inlineStyle = (_a = this.properties) == null ? void 0 : _a.inlineStyle;
+      if (!inlineStyle)
+        return styleObject;
+      inlineStyle.split(";").forEach((rule) => {
+        if (rule.trim()) {
+          const [property, value] = rule.split(":").map((part) => part.trim());
+          if (property && value) {
+            const camelCasedProperty = property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+            styleObject[camelCasedProperty] = value;
+          }
+        }
+      });
+      return styleObject;
+    }
+    getStyleTag() {
+      var _a;
+      const css = (_a = this.properties) == null ? void 0 : _a.style;
+      if (!css)
+        return "";
+      return css.replace(/([^{]+){/g, (match) => {
+        if (match.trim().startsWith("@")) {
+          return match;
+        }
+        const selectors = match.split(",").map((selector) => selector.trim());
+        const modifiedSelectors = selectors.map((selector) => `[data-part-id=${this.partId}] ${selector}`).join(", ");
+        return `${modifiedSelectors} `;
+      });
+    }
   }
   class RootPart extends Part {
     constructor() {
@@ -6836,8 +6876,8 @@ var __publicField = (obj, key, value) => {
       this.rootPart = vue.ref(new RootPart());
     }
   };
-  const _hoisted_1$8$1 = ["data-model-id"];
-  const _hoisted_2$5$1 = {
+  const _hoisted_1$9$1 = ["data-part-id"];
+  const _hoisted_2$6$1 = {
     key: 1,
     class: "pb-nested-widget"
   };
@@ -6848,34 +6888,38 @@ var __publicField = (obj, key, value) => {
     },
     setup(__props) {
       const props = __props;
-      const classNames = vue.computed(() => props.part.getClassNames());
       const properties = vue.computed(() => ({ style: props.part.getStyles() }));
+      const styleTag = vue.computed(() => props.part.getStyleTag());
       const thisComponent = vue.computed(() => createPartComponent(props.part));
       const childComponents = vue.computed(() => createPartComponents(props.part.children));
       return (_ctx, _cache) => {
-        var _a;
-        return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-          class: [classNames.value, "pb-widget"],
-          "data-model-id": _ctx.part.partId,
-          style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
-        }, properties.value), [
-          thisComponent.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(thisComponent.value), {
+        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+          styleTag.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent("style"), {
             key: 0,
-            part: _ctx.part
-          }, null, 8, ["part"])) : vue.createCommentVNode("", true),
-          childComponents.value && childComponents.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$5$1, [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(childComponents.value, (child) => {
-              return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(child.component), {
-                key: child.part.partId,
-                part: child.part
-              }, null, 8, ["part"]);
-            }), 128))
-          ])) : vue.createCommentVNode("", true)
-        ], 16, _hoisted_1$8$1);
+            innerHTML: styleTag.value
+          }, null, 8, ["innerHTML"])) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", vue.mergeProps({
+            "data-part-id": _ctx.part.partId,
+            class: "pb-widget"
+          }, properties.value), [
+            thisComponent.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(thisComponent.value), {
+              key: 0,
+              part: _ctx.part
+            }, null, 8, ["part"])) : vue.createCommentVNode("", true),
+            childComponents.value && childComponents.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$6$1, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(childComponents.value, (child) => {
+                return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(child.component), {
+                  key: child.part.partId,
+                  part: child.part
+                }, null, 8, ["part"]);
+              }), 128))
+            ])) : vue.createCommentVNode("", true)
+          ], 16, _hoisted_1$9$1)
+        ], 64);
       };
     }
   });
-  const _hoisted_1$7$1 = ["data-model-id"];
+  const _hoisted_1$8$1 = ["data-part-id"];
   const _sfc_main$9$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbBlock",
     props: {
@@ -6884,27 +6928,39 @@ var __publicField = (obj, key, value) => {
     setup(__props) {
       const props = __props;
       const classNames = vue.computed(() => props.part.getClassNames());
-      const properties = vue.computed(() => ({ style: props.part.getStyles() }));
+      const styleTag = vue.computed(() => props.part.getStyleTag());
+      const properties = vue.computed(() => ({
+        style: {
+          ...props.part.getStyles(),
+          ...props.part.getInlineStyles()
+        }
+      }));
       vue.computed(() => createPartComponents(props.part.children));
       return (_ctx, _cache) => {
         var _a;
-        return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-          class: [classNames.value, "pb-block"],
-          "data-model-id": _ctx.part.partId,
-          style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
-        }, properties.value), [
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.part.children, (child) => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$a$1, {
-              key: child.partId,
-              part: child
-            }, null, 8, ["part"]);
-          }), 128))
-        ], 16, _hoisted_1$7$1);
+        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+          styleTag.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent("style"), {
+            key: 0,
+            innerHTML: styleTag.value
+          }, null, 8, ["innerHTML"])) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", vue.mergeProps({
+            class: [classNames.value, "pb-block"],
+            "data-part-id": _ctx.part.partId,
+            style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
+          }, properties.value), [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.part.children, (child) => {
+              return vue.openBlock(), vue.createBlock(_sfc_main$a$1, {
+                key: child.partId,
+                part: child
+              }, null, 8, ["part"]);
+            }), 128))
+          ], 16, _hoisted_1$8$1)
+        ], 64);
       };
     }
   });
-  const _hoisted_1$6$1 = { class: "pb-block" };
-  const _hoisted_2$4$1 = /* @__PURE__ */ vue.createElementVNode("div", {
+  const _hoisted_1$7$1 = { class: "pb-block" };
+  const _hoisted_2$5$1 = /* @__PURE__ */ vue.createElementVNode("div", {
     class: "pb-widget",
     style: { "margin": "0 auto" }
   }, [
@@ -6913,7 +6969,7 @@ var __publicField = (obj, key, value) => {
     ])
   ], -1);
   const _hoisted_3$4$1 = [
-    _hoisted_2$4$1
+    _hoisted_2$5$1
   ];
   const _sfc_main$8$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbLoginDepart",
@@ -6922,11 +6978,11 @@ var __publicField = (obj, key, value) => {
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6$1, _hoisted_3$4$1);
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7$1, _hoisted_3$4$1);
       };
     }
   });
-  const _hoisted_1$5$1 = ["data-model-id"];
+  const _hoisted_1$6$1 = ["data-part-id"];
   const _sfc_main$7$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbSection",
     props: {
@@ -6934,36 +6990,48 @@ var __publicField = (obj, key, value) => {
     },
     setup(__props) {
       const props = __props;
+      const styleTag = vue.computed(() => props.part.getStyleTag());
       const classNames = vue.computed(() => props.part.getClassNames());
-      const properties = vue.computed(() => ({ style: props.part.getStyles() }));
+      const properties = vue.computed(() => ({
+        style: {
+          ...props.part.getStyles(),
+          ...props.part.getInlineStyles()
+        }
+      }));
       return (_ctx, _cache) => {
         var _a, _b;
-        return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-          class: [classNames.value, "pb-section"],
-          "data-model-id": _ctx.part.partId,
-          style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
-        }, properties.value), [
-          ((_b = _ctx.part.properties) == null ? void 0 : _b.name) === "Login Design Part" ? (vue.openBlock(), vue.createBlock(_sfc_main$8$1, {
+        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+          styleTag.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent("style"), {
             key: 0,
-            part: _ctx.part
-          }, null, 8, ["part"])) : _ctx.part.children && _ctx.part.children.length > 0 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.part.children, (block) => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$9$1, {
-              key: block.partId,
-              part: block
-            }, null, 8, ["part"]);
-          }), 128)) : vue.createCommentVNode("", true)
-        ], 16, _hoisted_1$5$1);
+            innerHTML: styleTag.value
+          }, null, 8, ["innerHTML"])) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", vue.mergeProps({
+            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.name) === "Login Design Part" ? (vue.openBlock(), vue.createBlock(_sfc_main$8$1, {
+              key: 0,
+              part: _ctx.part
+            }, null, 8, ["part"])) : _ctx.part.children && _ctx.part.children.length > 0 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.part.children, (block) => {
+              return vue.openBlock(), vue.createBlock(_sfc_main$9$1, {
+                key: block.partId,
+                part: block
+              }, null, 8, ["part"]);
+            }), 128)) : vue.createCommentVNode("", true)
+          ], 16, _hoisted_1$6$1)
+        ], 64);
       };
     }
   });
-  const _hoisted_1$4$1 = { class: "pb-image-widget" };
-  const _hoisted_2$3$1 = ["src"];
+  const _hoisted_1$5$1 = { class: "pb-image-widget" };
+  const _hoisted_2$4$1 = ["src"];
   const _hoisted_3$3$1 = {
     key: 1,
     class: "placeholder"
   };
   const _hoisted_4$h = /* @__PURE__ */ vue.createElementVNode("span", { class: "font-icon" }, "image", -1);
-  const _hoisted_5$8 = [
+  const _hoisted_5$9 = [
     _hoisted_4$h
   ];
   const _sfc_main$6$1 = /* @__PURE__ */ vue.defineComponent({
@@ -6973,21 +7041,29 @@ var __publicField = (obj, key, value) => {
       placeholder: { type: Boolean }
     },
     setup(__props) {
+      const props = __props;
+      const classNames = vue.computed(() => props.part.getClassNames());
+      vue.computed(() => ({
+        style: {
+          ...props.part.getInlineStyles()
+        }
+      }));
       return (_ctx, _cache) => {
-        var _a, _b;
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4$1, [
+        var _a, _b, _c;
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5$1, [
           ((_a = _ctx.part.properties) == null ? void 0 : _a.image) ? (vue.openBlock(), vue.createElementBlock("img", {
             key: 0,
+            class: vue.normalizeClass([classNames.value, "image"]),
             src: (_b = _ctx.part.properties) == null ? void 0 : _b.image,
-            alt: "",
-            class: "image"
-          }, null, 8, _hoisted_2$3$1)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$3$1, _hoisted_5$8)) : vue.createCommentVNode("", true)
+            style: vue.normalizeStyle((_c = _ctx.part.properties) == null ? void 0 : _c.inlineStyle),
+            alt: ""
+          }, null, 14, _hoisted_2$4$1)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$3$1, _hoisted_5$9)) : vue.createCommentVNode("", true)
         ]);
       };
     }
   });
-  const _hoisted_1$3$1 = { class: "pb-text-widget" };
-  const _hoisted_2$2$1 = ["textContent"];
+  const _hoisted_1$4$1 = { class: "pb-text-widget" };
+  const _hoisted_2$3$1 = ["textContent"];
   const _hoisted_3$2$1 = {
     key: 1,
     class: "placeholder",
@@ -7013,29 +7089,33 @@ var __publicField = (obj, key, value) => {
           }
         }
       });
+      const classNames = vue.computed(() => props.part.getClassNames());
       const style = vue.computed(() => {
-        var _a, _b;
+        var _a, _b, _c, _d;
         return {
           style: {
             fontSize: (_a = props.part.properties) == null ? void 0 : _a.fontSize,
-            color: (_b = props.part.properties) == null ? void 0 : _b.color
+            fontWeight: (_b = props.part.properties) == null ? void 0 : _b.fontWeight,
+            color: (_c = props.part.properties) == null ? void 0 : _c.color,
+            textAlign: (_d = props.part.properties) == null ? void 0 : _d.textAlign,
+            ...props.part.getInlineStyles()
           }
         };
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3$1, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4$1, [
           text.value ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
             key: 0,
-            class: "text"
+            class: [classNames.value, "text l-header-event__id-text"]
           }, style.value, {
             textContent: vue.toDisplayString(text.value)
-          }), null, 16, _hoisted_2$2$1)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$2$1)) : vue.createCommentVNode("", true)
+          }), null, 16, _hoisted_2$3$1)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$2$1)) : vue.createCommentVNode("", true)
         ]);
       };
     }
   });
-  const _hoisted_1$2$1 = { class: "pb-html-widget" };
-  const _hoisted_2$1$1 = ["innerHTML"];
+  const _hoisted_1$3$1 = { class: "pb-html-widget" };
+  const _hoisted_2$2$1 = ["innerHTML"];
   const _hoisted_3$1$1 = {
     key: 1,
     class: "placeholder",
@@ -7072,21 +7152,28 @@ ${_html.style}
         var _a;
         return getHtml((_a = props.part.properties) == null ? void 0 : _a.html);
       });
-      vue.computed(() => props.placeholder ? !html.value : false);
+      const classNames = vue.computed(() => props.part.getClassNames());
+      vue.computed(() => ({
+        style: {
+          ...props.part.getInlineStyles()
+        }
+      }));
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2$1, [
+        var _a;
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3$1, [
           html.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
-            class: "html",
+            class: vue.normalizeClass([classNames.value, "html"]),
+            style: vue.normalizeStyle((_a = _ctx.part.properties) == null ? void 0 : _a.inlineStyle),
             innerHTML: html.value
-          }, null, 8, _hoisted_2$1$1)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$1$1)) : vue.createCommentVNode("", true)
+          }, null, 14, _hoisted_2$2$1)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$1$1)) : vue.createCommentVNode("", true)
         ]);
       };
     }
   });
-  const _hoisted_1$1$1 = { class: "pb-iframe-widget" };
-  const _hoisted_2$t = ["src"];
-  const _hoisted_3$q = {
+  const _hoisted_1$2$1 = { class: "pb-iframe-widget" };
+  const _hoisted_2$1$1 = ["src"];
+  const _hoisted_3$r = {
     key: 1,
     class: "placeholder",
     textContent: "Empty URL"
@@ -7110,10 +7197,12 @@ ${_html.style}
         const locale = pageBuilder.getLocale();
         return url2[locale];
       });
+      const classNames = vue.computed(() => props.part.getClassNames());
       const style = vue.computed(() => ({
         style: {
           width: "100%",
-          height: `${height.value}px`
+          height: `${height.value}px`,
+          ...props.part.getInlineStyles()
         }
       }));
       const height = vue.ref(200);
@@ -7129,11 +7218,14 @@ ${_html.style}
         window.removeEventListener("message", updateHeight);
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1$1, [
+        var _a;
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2$1, [
           url.value ? (vue.openBlock(), vue.createElementBlock("iframe", vue.mergeProps({
             key: 0,
-            src: url.value
-          }, style.value), null, 16, _hoisted_2$t)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$q)) : vue.createCommentVNode("", true)
+            class: classNames.value,
+            src: url.value,
+            style: (_a = _ctx.part.properties) == null ? void 0 : _a.inlineStyle
+          }, style.value), null, 16, _hoisted_2$1$1)) : _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$r)) : vue.createCommentVNode("", true)
         ]);
       };
     }
@@ -7179,6 +7271,8 @@ ${_html.style}
       __publicField2(this, "locale", vue.ref("en"));
       __publicField2(this, "watchers", {});
       __publicField2(this, "providers", {});
+      __publicField2(this, "externalCssLinks", []);
+      __publicField2(this, "externalCssContent", "");
       this.model = new Model$1();
     }
     getLocale() {
@@ -7192,7 +7286,7 @@ ${_html.style}
         plugin.widgets.forEach((v) => {
           const w = { ...v };
           w.partType = "Widget";
-          w.creator = () => _sfc_main$z;
+          w.creator = () => _sfc_main$A;
           partDefinitions$1[v.partName] = w;
         });
       }
@@ -7202,6 +7296,14 @@ ${_html.style}
       if (plugin.providers) {
         this.providers = { ...this.providers, ...plugin.providers };
       }
+      if (plugin.css) {
+        if (plugin.css.links) {
+          this.externalCssLinks = plugin.css.links;
+        }
+        if (plugin.css.content) {
+          this.externalCssContent = plugin.css.content;
+        }
+      }
     }
     watchCustomWidgetData(part) {
       const def = partDefinitions$1[part.partName];
@@ -7271,6 +7373,10 @@ ${_html.style}
         return def.component;
       }
     }
+    getExternalCss() {
+      return `${this.externalCssLinks}
+    <style>${this.externalCssContent}</style>`;
+    }
   }
   const createPageBuilderViewer = () => {
     const viewer = new PageBuilderViewerImpl();
@@ -7309,36 +7415,53 @@ ${_html.style}
     }
   };
   const getPartDefinition = (partName) => partDefinitions$1[partName];
+  const _hoisted_1$1$1 = ["data-part-id"];
   const _sfc_main$2$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPage",
     props: {
-      page: {},
+      part: {},
       isMobilePage: { type: Boolean }
     },
     setup(__props) {
+      const props = __props;
+      const classNames = vue.computed(() => {
+        var _a;
+        return `${(_a = props.part) == null ? void 0 : _a.getClassNames()} ${props.isMobilePage ? "mobile" : "pc"}`;
+      });
+      const styleTag = vue.computed(() => props.part.getStyleTag());
       const properties = vue.computed(() => ({
         style: {
-          // styles here
+          ...props.part.getStyles(),
+          ...props.part.getInlineStyles()
         }
       }));
       return (_ctx, _cache) => {
-        var _a;
-        return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ class: "pb-page" }, properties.value), [
-          vue.createElementVNode("div", {
-            class: vue.normalizeClass([[_ctx.isMobilePage ? "mobile" : "pc"], "pb-page-content"])
-          }, [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList((_a = _ctx.page) == null ? void 0 : _a.children, (section) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$7$1, {
-                key: section.partId,
-                part: section
-              }, null, 8, ["part"]);
-            }), 128))
-          ], 2)
-        ], 16);
+        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+          styleTag.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent("style"), {
+            key: 0,
+            innerHTML: styleTag.value
+          }, null, 8, ["innerHTML"])) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", vue.mergeProps({
+            class: [classNames.value, "pb-page"],
+            "data-part-id": _ctx.part.partId
+          }, properties.value), [
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass([[_ctx.isMobilePage ? "mobile" : "pc"], "pb-page-content"])
+            }, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.part.children, (section) => {
+                return vue.openBlock(), vue.createBlock(_sfc_main$7$1, {
+                  key: section.partId,
+                  part: section
+                }, null, 8, ["part"]);
+              }), 128))
+            ], 2)
+          ], 16, _hoisted_1$1$1)
+        ], 64);
       };
     }
   });
-  const _hoisted_1$D = { class: "pb-viewer" };
+  const _hoisted_1$E = ["innerHTML"];
+  const _hoisted_2$t = { class: "pb-viewer" };
   const _sfc_main$1$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PageBuilderViewer",
     props: {
@@ -7349,43 +7472,50 @@ ${_html.style}
     },
     setup(__props) {
       const props = __props;
-      const pageBuilderViewer = createPageBuilderViewer();
-      pageBuilderViewer.setLocale(props.locale);
+      const viewer = createPageBuilderViewer();
+      viewer.setLocale(props.locale);
       if (props.plugin)
-        pageBuilderViewer.registerCustomPlugin(props.plugin);
-      providePageBuilderViewer(pageBuilderViewer);
-      providePageBuilder(pageBuilderViewer);
-      const page = vue.computed(() => {
-        const pages = pageBuilderViewer.model.rootPart.value.children;
-        if (!pages || !pages.length)
+        viewer.registerCustomPlugin(props.plugin);
+      providePageBuilderViewer(viewer);
+      providePageBuilder(viewer);
+      const externalCss = viewer.getExternalCss();
+      const part = vue.computed(() => {
+        const parts = viewer.model.rootPart.value.children;
+        if (!parts || !parts.length)
           return;
-        return pages[pages.length === 1 || props.isMobilePage ? 0 : 1];
+        return parts[parts.length === 1 || props.isMobilePage ? 0 : 1];
       });
       vue.onMounted(() => {
         if (props.pageContent) {
-          pageBuilderViewer.render(props.pageContent);
+          viewer.render(props.pageContent);
         }
       });
       vue.watch(
         () => props.pageContent,
         (pageContent) => {
           if (pageContent) {
-            pageBuilderViewer.render(pageContent);
+            viewer.render(pageContent);
           }
         }
       );
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$D, [
-          page.value ? (vue.openBlock(), vue.createBlock(_sfc_main$2$1, {
+        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+          vue.unref(externalCss) ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
-            "is-mobile-page": _ctx.isMobilePage,
-            page: page.value
-          }, null, 8, ["is-mobile-page", "page"])) : vue.createCommentVNode("", true)
-        ]);
+            innerHTML: vue.unref(externalCss)
+          }, null, 8, _hoisted_1$E)) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", _hoisted_2$t, [
+            part.value ? (vue.openBlock(), vue.createBlock(_sfc_main$2$1, {
+              key: 0,
+              "is-mobile-page": _ctx.isMobilePage,
+              part: part.value
+            }, null, 8, ["is-mobile-page", "part"])) : vue.createCommentVNode("", true)
+          ])
+        ], 64);
       };
     }
   });
-  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     __name: "PbCustomWidget",
     props: {
       part: {},
@@ -8242,22 +8372,22 @@ ${_html.style}
     }
     return target;
   };
-  const _sfc_main$y = {};
-  const _hoisted_1$C = { class: "pb-add-widget-button" };
+  const _sfc_main$z = {};
+  const _hoisted_1$D = { class: "pb-add-widget-button" };
   const _hoisted_2$s = /* @__PURE__ */ vue.createElementVNode("span", { class: "icon material-icons-outlined" }, "add_box", -1);
-  const _hoisted_3$p = /* @__PURE__ */ vue.createElementVNode("span", { class: "text" }, "Add Widget", -1);
+  const _hoisted_3$q = /* @__PURE__ */ vue.createElementVNode("span", { class: "text" }, "Add Widget", -1);
   const _hoisted_4$g = [
     _hoisted_2$s,
-    _hoisted_3$p
+    _hoisted_3$q
   ];
   function _sfc_render$1(_ctx, _cache) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$C, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$D, [
       vue.createElementVNode("button", {
         onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("add-widget", $event))
       }, _hoisted_4$g)
     ]);
   }
-  const PbAddWidgetButton = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["render", _sfc_render$1]]);
+  const PbAddWidgetButton = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["render", _sfc_render$1]]);
   const MOUSE_TRACKER_KEY = "mouseTracker";
   const MOUSE_TRACKER_NOT_FOUND = "MouseTracker not found";
   class MouseTracker {
@@ -8288,12 +8418,12 @@ ${_html.style}
       throw Error(MOUSE_TRACKER_NOT_FOUND);
     return mouseTracker;
   };
-  const _hoisted_1$B = ["data-model-id", "draggable"];
+  const _hoisted_1$C = ["data-part-id", "draggable"];
   const _hoisted_2$r = {
     key: 1,
     class: "children"
   };
-  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     __name: "PbWidget",
     props: {
       part: {}
@@ -8353,6 +8483,7 @@ ${_html.style}
       const pageBuilder = usePageBuilderEditor();
       const selected = vue.computed(() => pageBuilder.context.isSelected(props.part));
       const classNames = vue.computed(() => [selected.value ? "selected" : "", props.part.getClassNames()]);
+      const styleTag = vue.computed(() => props.part.getStyleTag());
       const properties = vue.computed(() => {
         var _a, _b, _c, _d;
         let style = props.part.getStyles();
@@ -8728,45 +8859,51 @@ ${_html.style}
         return index;
       };
       return (_ctx, _cache) => {
-        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-          ref_key: "widget",
-          ref: widget,
-          class: [classNames.value, "pb-widget"],
-          "data-model-id": _ctx.part.partId,
-          draggable: draggable.value
-        }, properties.value), [
-          thisComponent.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(thisComponent.value), {
+        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+          styleTag.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent("style"), {
             key: 0,
-            part: _ctx.part,
-            placeholder: true
-          }, null, 8, ["part"])) : vue.createCommentVNode("", true),
-          childComponents.value && childComponents.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$r, [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(childComponents.value, (child) => {
-              return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(child.component), {
-                key: child.part.partId,
-                part: child.part,
-                placeholder: true
-              }, null, 8, ["part"]);
-            }), 128))
-          ])) : vue.createCommentVNode("", true),
-          selected.value && _ctx.part.isNestedWidget() ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 2,
-            class: "pan-handle",
-            onMousedown: _pan_mousedown
-          }, null, 32)) : vue.createCommentVNode("", true),
-          selected.value && _ctx.part.isNestedWidget() ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 3,
-            class: "resize-handle",
-            onMousedown: _resize_mousedown
-          }, null, 32)) : vue.createCommentVNode("", true)
-        ], 16, _hoisted_1$B)), [
-          [vue.unref(vPartHandler), { pageBuilder: vue.unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
-        ]);
+            innerHTML: styleTag.value
+          }, null, 8, ["innerHTML"])) : vue.createCommentVNode("", true),
+          vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+            ref_key: "widget",
+            ref: widget,
+            class: [classNames.value, "pb-widget"],
+            "data-part-id": _ctx.part.partId,
+            draggable: draggable.value
+          }, properties.value), [
+            thisComponent.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(thisComponent.value), {
+              key: 0,
+              part: _ctx.part,
+              placeholder: true
+            }, null, 8, ["part"])) : vue.createCommentVNode("", true),
+            childComponents.value && childComponents.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$r, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(childComponents.value, (child) => {
+                return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(child.component), {
+                  key: child.part.partId,
+                  part: child.part,
+                  placeholder: true
+                }, null, 8, ["part"]);
+              }), 128))
+            ])) : vue.createCommentVNode("", true),
+            selected.value && _ctx.part.isNestedWidget() ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 2,
+              class: "pan-handle",
+              onMousedown: _pan_mousedown
+            }, null, 32)) : vue.createCommentVNode("", true),
+            selected.value && _ctx.part.isNestedWidget() ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 3,
+              class: "resize-handle",
+              onMousedown: _resize_mousedown
+            }, null, 32)) : vue.createCommentVNode("", true)
+          ], 16, _hoisted_1$C)), [
+            [vue.unref(vPartHandler), { pageBuilder: vue.unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
+          ])
+        ], 64);
       };
     }
   });
-  const _hoisted_1$A = ["data-model-id"];
-  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$B = ["data-part-id"];
+  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     __name: "PbBlock",
     props: {
       part: {}
@@ -8779,7 +8916,13 @@ ${_html.style}
         selected.value ? "selected" : "",
         props.part.getClassNames()
       ]);
-      const properties = vue.computed(() => ({ style: props.part.getStyles() }));
+      const styleTag = vue.computed(() => props.part.getStyleTag());
+      const properties = vue.computed(() => ({
+        style: {
+          ...props.part.getStyles(),
+          ...props.part.getInlineStyles()
+        }
+      }));
       vue.computed(() => pageBuilder.partManager.createPartComponents(props.part.children));
       const addWidget = () => {
         pageBuilder.commandRegistry.executeCommand(OpenAddWidgetModalCommand.COMMAND_ID);
@@ -8946,28 +9089,34 @@ ${_html.style}
       };
       return (_ctx, _cache) => {
         var _a, _b;
-        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-          class: [classNames.value, "pb-block"],
-          "data-model-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 ? (vue.openBlock(), vue.createBlock(PbAddWidgetButton, {
+        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+          styleTag.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent("style"), {
             key: 0,
-            onAddWidget: addWidget
-          })) : vue.createCommentVNode("", true),
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.part.children, (child) => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$x, {
-              key: child.partId,
-              part: child
-            }, null, 8, ["part"]);
-          }), 128))
-        ], 16, _hoisted_1$A)), [
-          [vue.unref(vPartHandler), { pageBuilder: vue.unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
-        ]);
+            innerHTML: styleTag.value
+          }, null, 8, ["innerHTML"])) : vue.createCommentVNode("", true),
+          vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+            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 ? (vue.openBlock(), vue.createBlock(PbAddWidgetButton, {
+              key: 0,
+              onAddWidget: addWidget
+            })) : vue.createCommentVNode("", true),
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.part.children, (child) => {
+              return vue.openBlock(), vue.createBlock(_sfc_main$y, {
+                key: child.partId,
+                part: child
+              }, null, 8, ["part"]);
+            }), 128))
+          ], 16, _hoisted_1$B)), [
+            [vue.unref(vPartHandler), { pageBuilder: vue.unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
+          ])
+        ], 64);
       };
     }
   });
-  const _hoisted_1$z = { class: "pb-block" };
+  const _hoisted_1$A = { class: "pb-block" };
   const _hoisted_2$q = /* @__PURE__ */ vue.createElementVNode("div", {
     class: "pb-widget",
     style: { "margin": "0 auto" }
@@ -8976,22 +9125,22 @@ ${_html.style}
       /* @__PURE__ */ vue.createElementVNode("h3", null, "Login Design Part")
     ])
   ], -1);
-  const _hoisted_3$o = [
+  const _hoisted_3$p = [
     _hoisted_2$q
   ];
-  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     __name: "PbLoginDepart",
     props: {
       part: {}
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$z, _hoisted_3$o);
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, _hoisted_3$p);
       };
     }
   });
-  const _hoisted_1$y = ["data-model-id"];
-  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$z = ["data-part-id"];
+  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     __name: "PbSection",
     props: {
       part: {}
@@ -9007,7 +9156,13 @@ ${_html.style}
           props.part.getClassNames()
         ];
       });
-      const properties = vue.computed(() => ({ style: props.part.getStyles() }));
+      const styleTag = vue.computed(() => props.part.getStyleTag());
+      const properties = vue.computed(() => ({
+        style: {
+          ...props.part.getStyles(),
+          ...props.part.getInlineStyles()
+        }
+      }));
       const disabled = vue.computed(() => {
         var _a;
         return ["static"].includes(((_a = props.part.properties) == null ? void 0 : _a.sectionType) || "");
@@ -9090,50 +9245,56 @@ ${_html.style}
       };
       return (_ctx, _cache) => {
         var _a, _b, _c;
-        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-          class: [classNames.value, "pb-section"],
-          "data-model-id": _ctx.part.partId,
-          style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
-        }, properties.value), [
-          ((_b = _ctx.part.properties) == null ? void 0 : _b.sectionType) === "static" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-            ((_c = _ctx.part.properties) == null ? void 0 : _c.name) === "Login Design Part" ? (vue.openBlock(), vue.createBlock(_sfc_main$v, {
-              key: 0,
-              part: _ctx.part
-            }, null, 8, ["part"])) : vue.createCommentVNode("", true)
-          ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            _ctx.part.children && _ctx.part.children.length > 0 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.part.children, (block) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$w, {
-                key: block.partId,
-                part: block
-              }, null, 8, ["part"]);
-            }), 128)) : (vue.openBlock(), vue.createBlock(PbAddWidgetButton, {
-              key: 1,
-              onAddWidget: addWidget
-            }))
-          ], 64))
-        ], 16, _hoisted_1$y)), [
-          [vue.unref(vPartHandler), { pageBuilder: vue.unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
-        ]);
+        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+          styleTag.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent("style"), {
+            key: 0,
+            innerHTML: styleTag.value
+          }, null, 8, ["innerHTML"])) : vue.createCommentVNode("", true),
+          vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+            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" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+              ((_c = _ctx.part.properties) == null ? void 0 : _c.name) === "Login Design Part" ? (vue.openBlock(), vue.createBlock(_sfc_main$w, {
+                key: 0,
+                part: _ctx.part
+              }, null, 8, ["part"])) : vue.createCommentVNode("", true)
+            ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+              _ctx.part.children && _ctx.part.children.length > 0 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.part.children, (block) => {
+                return vue.openBlock(), vue.createBlock(_sfc_main$x, {
+                  key: block.partId,
+                  part: block
+                }, null, 8, ["part"]);
+              }), 128)) : (vue.openBlock(), vue.createBlock(PbAddWidgetButton, {
+                key: 1,
+                onAddWidget: addWidget
+              }))
+            ], 64))
+          ], 16, _hoisted_1$z)), [
+            [vue.unref(vPartHandler), { pageBuilder: vue.unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
+          ])
+        ], 64);
       };
     }
   });
-  const _hoisted_1$x = { class: "group-editor group-editor-position" };
+  const _hoisted_1$y = { class: "group-editor group-editor-position" };
   const _hoisted_2$p = { class: "flex-align-center" };
-  const _hoisted_3$n = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
+  const _hoisted_3$o = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Position" })
   ], -1);
   const _hoisted_4$f = { class: "flex-grow-1" };
-  const _hoisted_5$7 = { class: "bg-gray-100 py-5 rounded-8" };
-  const _hoisted_6$6 = { class: "text-center" };
-  const _hoisted_7$6 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
-  const _hoisted_8$6 = /* @__PURE__ */ vue.createElementVNode("div", {
+  const _hoisted_5$8 = { class: "bg-gray-100 py-5 rounded-8" };
+  const _hoisted_6$7 = { class: "text-center" };
+  const _hoisted_7$7 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
+  const _hoisted_8$7 = /* @__PURE__ */ vue.createElementVNode("div", {
     class: "d-inline-block text-center text-gray-300",
     style: { "width": "30%", "font-size": "12px" }
   }, [
     /* @__PURE__ */ vue.createElementVNode("span", { class: "font-icon" }, "add")
   ], -1);
   const _hoisted_9$5 = { class: "text-center" };
-  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorPosition",
     props: {
       group: {},
@@ -9157,12 +9318,12 @@ ${_html.style}
       const updateTop = (value) => updatePropertyValue({ top: value });
       const updateBottom = (value) => updatePropertyValue({ bottom: value });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$y, [
           vue.createElementVNode("div", _hoisted_2$p, [
-            _hoisted_3$n,
+            _hoisted_3$o,
             vue.createElementVNode("div", _hoisted_4$f, [
-              vue.createElementVNode("div", _hoisted_5$7, [
-                vue.createElementVNode("div", _hoisted_6$6, [
+              vue.createElementVNode("div", _hoisted_5$8, [
+                vue.createElementVNode("div", _hoisted_6$7, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": top.value,
                     class: "ml-4",
@@ -9171,7 +9332,7 @@ ${_html.style}
                     "onUpdate:modelValue": updateTop
                   }, null, 8, ["model-value"])
                 ]),
-                vue.createElementVNode("div", _hoisted_7$6, [
+                vue.createElementVNode("div", _hoisted_7$7, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": left.value,
                     class: "ml-4",
@@ -9179,7 +9340,7 @@ ${_html.style}
                     width: "30%",
                     "onUpdate:modelValue": updateLeft
                   }, null, 8, ["model-value"]),
-                  _hoisted_8$6,
+                  _hoisted_8$7,
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": right.value,
                     class: "ml-4",
@@ -9204,13 +9365,23 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$w = { class: "group-editor group-editor-size" };
+  const _hoisted_1$x = { class: "group-editor group-editor-size" };
   const _hoisted_2$o = { class: "flex-align-center" };
-  const _hoisted_3$m = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
+  const _hoisted_3$n = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Size" })
   ], -1);
   const _hoisted_4$e = { class: "flex-grow-1 bs-layout-horizontal" };
-  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_5$7 = { class: "flex-align-center mt-12" };
+  const _hoisted_6$6 = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
+    /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Max Size" })
+  ], -1);
+  const _hoisted_7$6 = { class: "flex-grow-1 bs-layout-horizontal" };
+  const _hoisted_8$6 = { class: "flex-align-center mt-12" };
+  const _hoisted_9$4 = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
+    /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Min Size" })
+  ], -1);
+  const _hoisted_10$2 = { class: "flex-grow-1 bs-layout-horizontal" };
+  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorSize",
     props: {
       group: {},
@@ -9221,6 +9392,10 @@ ${_html.style}
       const pageBuilder = usePageBuilderEditor();
       const width = vue.computed(() => getPropertyValueOfParts(props.selectedParts, "width"));
       const height = vue.computed(() => getPropertyValueOfParts(props.selectedParts, "height"));
+      const maxWidth = vue.computed(() => getPropertyValueOfParts(props.selectedParts, "maxWidth"));
+      const maxHeight = vue.computed(() => getPropertyValueOfParts(props.selectedParts, "maxHeight"));
+      const minWidth = vue.computed(() => getPropertyValueOfParts(props.selectedParts, "minWidth"));
+      const minHeight = vue.computed(() => getPropertyValueOfParts(props.selectedParts, "minHeight"));
       const updatePropertyValue = (properties) => {
         pageBuilder.commandRegistry.executeCommand(
           ChangePropertyCommand.COMMAND_ID,
@@ -9229,10 +9404,14 @@ ${_html.style}
       };
       const updateWidth = (value) => updatePropertyValue({ width: value });
       const updateHeight = (value) => updatePropertyValue({ height: value });
+      const updateMaxWidth = (value) => updatePropertyValue({ maxWidth: value });
+      const updateMaxHeight = (value) => updatePropertyValue({ maxWeight: value });
+      const updateMinWidth = (value) => updatePropertyValue({ minWidth: value });
+      const updateMinHeight = (value) => updatePropertyValue({ minHeight: value });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [
           vue.createElementVNode("div", _hoisted_2$o, [
-            _hoisted_3$m,
+            _hoisted_3$n,
             vue.createElementVNode("div", _hoisted_4$e, [
               vue.createVNode(vue.unref(bluesea.BSTextInput), {
                 "model-value": width.value,
@@ -9247,6 +9426,40 @@ ${_html.style}
                 "onUpdate:modelValue": updateHeight
               }, null, 8, ["model-value"])
             ])
+          ]),
+          vue.createElementVNode("div", _hoisted_5$7, [
+            _hoisted_6$6,
+            vue.createElementVNode("div", _hoisted_7$6, [
+              vue.createVNode(vue.unref(bluesea.BSTextInput), {
+                "model-value": maxWidth.value,
+                class: "flex-grow-1 mr-2",
+                prefix: "W",
+                "onUpdate:modelValue": updateMaxWidth
+              }, null, 8, ["model-value"]),
+              vue.createVNode(vue.unref(bluesea.BSTextInput), {
+                "model-value": maxHeight.value,
+                class: "flex-grow-1 ml-2",
+                prefix: "H",
+                "onUpdate:modelValue": updateMaxHeight
+              }, null, 8, ["model-value"])
+            ])
+          ]),
+          vue.createElementVNode("div", _hoisted_8$6, [
+            _hoisted_9$4,
+            vue.createElementVNode("div", _hoisted_10$2, [
+              vue.createVNode(vue.unref(bluesea.BSTextInput), {
+                "model-value": minWidth.value,
+                class: "flex-grow-1 mr-2",
+                prefix: "W",
+                "onUpdate:modelValue": updateMinWidth
+              }, null, 8, ["model-value"]),
+              vue.createVNode(vue.unref(bluesea.BSTextInput), {
+                "model-value": minHeight.value,
+                class: "flex-grow-1 ml-2",
+                prefix: "H",
+                "onUpdate:modelValue": updateMinHeight
+              }, null, 8, ["model-value"])
+            ])
           ])
         ]);
       };
@@ -9409,9 +9622,9 @@ ${_html.style}
       }
     }
   };
-  const _hoisted_1$v = { class: "vc-alpha" };
+  const _hoisted_1$w = { class: "vc-alpha" };
   const _hoisted_2$n = { class: "vc-alpha-checkboard-wrap" };
-  const _hoisted_3$l = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_3$m = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-alpha-picker" },
     null,
@@ -9419,11 +9632,11 @@ ${_html.style}
     /* HOISTED */
   );
   const _hoisted_4$d = [
-    _hoisted_3$l
+    _hoisted_3$m
   ];
   function render$4(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_Checkboard = vue.resolveComponent("Checkboard");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$v, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [
       vue.createElementVNode("div", _hoisted_2$n, [
         vue.createVNode(_component_Checkboard)
       ]),
@@ -10527,12 +10740,12 @@ ${_html.style}
       // }
     }
   };
-  const _hoisted_1$u = { class: "vc-editable-input" };
+  const _hoisted_1$v = { class: "vc-editable-input" };
   const _hoisted_2$m = ["aria-labelledby"];
-  const _hoisted_3$k = ["id", "for"];
+  const _hoisted_3$l = ["id", "for"];
   const _hoisted_4$c = { class: "vc-input__desc" };
   function render$3(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$u, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$v, [
       vue.withDirectives(vue.createElementVNode("input", {
         ref: "input",
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $options.val = $event),
@@ -10547,7 +10760,7 @@ ${_html.style}
         id: $options.labelId,
         for: $props.label,
         class: "vc-input__label"
-      }, vue.toDisplayString($options.labelSpanText), 9, _hoisted_3$k),
+      }, vue.toDisplayString($options.labelSpanText), 9, _hoisted_3$l),
       vue.createElementVNode(
         "span",
         _hoisted_4$c,
@@ -10627,7 +10840,7 @@ ${_html.style}
       }
     }
   };
-  const _hoisted_1$t = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_1$u = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-saturation--white" },
     null,
@@ -10641,7 +10854,7 @@ ${_html.style}
     -1
     /* HOISTED */
   );
-  const _hoisted_3$j = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_3$k = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-saturation-circle" },
     null,
@@ -10649,7 +10862,7 @@ ${_html.style}
     /* HOISTED */
   );
   const _hoisted_4$b = [
-    _hoisted_3$j
+    _hoisted_3$k
   ];
   function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock(
@@ -10663,7 +10876,7 @@ ${_html.style}
         onTouchstart: _cache[2] || (_cache[2] = (...args) => $options.handleChange && $options.handleChange(...args))
       },
       [
-        _hoisted_1$t,
+        _hoisted_1$u,
         _hoisted_2$l,
         vue.createElementVNode(
           "div",
@@ -10812,7 +11025,7 @@ ${_html.style}
       }
     }
   };
-  const _hoisted_1$s = ["aria-valuenow"];
+  const _hoisted_1$t = ["aria-valuenow"];
   const _hoisted_2$k = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-hue-picker" },
@@ -10820,7 +11033,7 @@ ${_html.style}
     -1
     /* HOISTED */
   );
-  const _hoisted_3$i = [
+  const _hoisted_3$j = [
     _hoisted_2$k
   ];
   function render$1(_ctx, _cache, $props, $setup, $data, $options) {
@@ -10848,11 +11061,11 @@ ${_html.style}
               style: vue.normalizeStyle({ top: $options.pointerTop, left: $options.pointerLeft }),
               role: "presentation"
             },
-            _hoisted_3$i,
+            _hoisted_3$j,
             4
             /* STYLE */
           )
-        ], 40, _hoisted_1$s)
+        ], 40, _hoisted_1$t)
       ],
       2
       /* CLASS */
@@ -10948,9 +11161,9 @@ ${_html.style}
       }
     }
   };
-  const _hoisted_1$r = { class: "vc-sketch-saturation-wrap" };
+  const _hoisted_1$s = { class: "vc-sketch-saturation-wrap" };
   const _hoisted_2$j = { class: "vc-sketch-controls" };
-  const _hoisted_3$h = { class: "vc-sketch-sliders" };
+  const _hoisted_3$i = { class: "vc-sketch-sliders" };
   const _hoisted_4$a = { class: "vc-sketch-hue-wrap" };
   const _hoisted_5$6 = {
     key: 0,
@@ -10962,11 +11175,11 @@ ${_html.style}
     key: 0,
     class: "vc-sketch-field"
   };
-  const _hoisted_9$4 = { class: "vc-sketch-field--double" };
-  const _hoisted_10$2 = { class: "vc-sketch-field--single" };
-  const _hoisted_11$2 = { class: "vc-sketch-field--single" };
-  const _hoisted_12$2 = { class: "vc-sketch-field--single" };
-  const _hoisted_13$2 = {
+  const _hoisted_9$3 = { class: "vc-sketch-field--double" };
+  const _hoisted_10$1 = { class: "vc-sketch-field--single" };
+  const _hoisted_11$1 = { class: "vc-sketch-field--single" };
+  const _hoisted_12$1 = { class: "vc-sketch-field--single" };
+  const _hoisted_13$1 = {
     key: 0,
     class: "vc-sketch-field--single"
   };
@@ -10991,14 +11204,14 @@ ${_html.style}
         class: vue.normalizeClass(["vc-sketch", [$props.disableAlpha ? "vc-sketch__disable-alpha" : ""]])
       },
       [
-        vue.createElementVNode("div", _hoisted_1$r, [
+        vue.createElementVNode("div", _hoisted_1$s, [
           vue.createVNode(_component_Saturation, {
             value: _ctx.colors,
             onChange: $options.childChange
           }, null, 8, ["value", "onChange"])
         ]),
         vue.createElementVNode("div", _hoisted_2$j, [
-          vue.createElementVNode("div", _hoisted_3$h, [
+          vue.createElementVNode("div", _hoisted_3$i, [
             vue.createElementVNode("div", _hoisted_4$a, [
               vue.createVNode(_component_Hue, {
                 value: _ctx.colors,
@@ -11023,35 +11236,35 @@ ${_html.style}
         ]),
         !$props.disableFields ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$5, [
           vue.createCommentVNode(" rgba "),
-          vue.createElementVNode("div", _hoisted_9$4, [
+          vue.createElementVNode("div", _hoisted_9$3, [
             vue.createVNode(_component_EdIn, {
               label: "hex",
               value: $options.hex,
               onChange: $options.inputChange
             }, null, 8, ["value", "onChange"])
           ]),
-          vue.createElementVNode("div", _hoisted_10$2, [
+          vue.createElementVNode("div", _hoisted_10$1, [
             vue.createVNode(_component_EdIn, {
               label: "r",
               value: _ctx.colors.rgba.r,
               onChange: $options.inputChange
             }, null, 8, ["value", "onChange"])
           ]),
-          vue.createElementVNode("div", _hoisted_11$2, [
+          vue.createElementVNode("div", _hoisted_11$1, [
             vue.createVNode(_component_EdIn, {
               label: "g",
               value: _ctx.colors.rgba.g,
               onChange: $options.inputChange
             }, null, 8, ["value", "onChange"])
           ]),
-          vue.createElementVNode("div", _hoisted_12$2, [
+          vue.createElementVNode("div", _hoisted_12$1, [
             vue.createVNode(_component_EdIn, {
               label: "b",
               value: _ctx.colors.rgba.b,
               onChange: $options.inputChange
             }, null, 8, ["value", "onChange"])
           ]),
-          !$props.disableAlpha ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13$2, [
+          !$props.disableAlpha ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13$1, [
             vue.createVNode(_component_EdIn, {
               label: "a",
               value: _ctx.colors.a,
@@ -11103,7 +11316,7 @@ ${_html.style}
   script.render = render;
   script.__file = "src/components/sketch/sketch.vue";
   script.install = install;
-  const _sfc_main$r = vue.defineComponent({
+  const _sfc_main$s = vue.defineComponent({
     name: "PbColorPicker",
     components: {
       Sketch: script
@@ -11167,9 +11380,9 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$q = { class: "buttons" };
+  const _hoisted_1$r = { class: "buttons" };
   const _hoisted_2$i = /* @__PURE__ */ vue.createElementVNode("i", { class: "material-icons-outlined" }, "delete", -1);
-  const _hoisted_3$g = [
+  const _hoisted_3$h = [
     _hoisted_2$i
   ];
   const _hoisted_4$9 = { class: "sketch-wrap" };
@@ -11181,7 +11394,7 @@ ${_html.style}
       onKeydown: _cache[3] || (_cache[3] = vue.withModifiers(() => {
       }, ["stop"]))
     }, [
-      vue.createElementVNode("div", _hoisted_1$q, [
+      vue.createElementVNode("div", _hoisted_1$r, [
         vue.renderSlot(_ctx.$slots, "button", vue.normalizeProps(vue.guardReactiveProps({ toggle: _ctx.toggle, color: _ctx.color })), () => [
           vue.createElementVNode("button", {
             class: vue.normalizeClass([{ none: !_ctx.color }, "pb-button picker-button"]),
@@ -11193,7 +11406,7 @@ ${_html.style}
           key: 0,
           class: "pb-button",
           onClick: _cache[1] || (_cache[1] = (...args) => _ctx.emptyColor && _ctx.emptyColor(...args))
-        }, _hoisted_3$g)) : vue.createCommentVNode("", true)
+        }, _hoisted_3$h)) : vue.createCommentVNode("", true)
       ]),
       vue.createElementVNode("div", _hoisted_4$9, [
         _ctx.isShowColorPicker ? (vue.openBlock(), vue.createBlock(_component_Sketch, {
@@ -11207,15 +11420,15 @@ ${_html.style}
       [_directive_click_outside, () => _ctx.toggle(false)]
     ]);
   }
-  const PbColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["render", _sfc_render]]);
-  const _hoisted_1$p = { class: "group-editor group-editor-background" };
+  const PbColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["render", _sfc_render]]);
+  const _hoisted_1$q = { class: "group-editor group-editor-background" };
   const _hoisted_2$h = { class: "flex-align-center" };
-  const _hoisted_3$f = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
+  const _hoisted_3$g = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Background" })
   ], -1);
   const _hoisted_4$8 = { class: "bs-layout-horizontal" };
   const _hoisted_5$5 = { class: "color" };
-  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorBackground",
     props: {
       group: {},
@@ -11246,9 +11459,9 @@ ${_html.style}
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
           vue.createElementVNode("div", _hoisted_2$h, [
-            _hoisted_3$f,
+            _hoisted_3$g,
             vue.createElementVNode("div", _hoisted_4$8, [
               vue.createElementVNode("div", _hoisted_5$5, [
                 vue.createVNode(PbColorPicker, {
@@ -11279,9 +11492,9 @@ ${_html.style}
   const TopRightCornerIcon = "data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Transformed%20by:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='%23000000'%3e%3cg%20id='SVGRepo_bgCarrier'%20stroke-width='0'/%3e%3cg%20id='SVGRepo_tracerCarrier'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cg%20id='SVGRepo_iconCarrier'%3e%3cg%3e%3cpath%20fill='none'%20d='M0%200H24V24H0z'/%3e%3cpath%20d='M21%2019v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2H7v-2h2zm-4%200v2H3v-2h2zm16-4v2h-2v-2h2zM5%2015v2H3v-2h2zm0-4v2H3v-2h2zm11-8c2.687%200%204.882%202.124%204.995%204.783L21%208v5h-2V8c0-1.591-1.255-2.903-2.824-2.995L16%205h-5V3h5zM5%207v2H3V7h2zm0-4v2H3V3h2zm4%200v2H7V3h2z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
   const BottomLeftCornerIcon = "data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Transformed%20by:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='%23000000'%20transform='rotate(180)'%3e%3cg%20id='SVGRepo_bgCarrier'%20stroke-width='0'/%3e%3cg%20id='SVGRepo_tracerCarrier'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cg%20id='SVGRepo_iconCarrier'%3e%3cg%3e%3cpath%20fill='none'%20d='M0%200H24V24H0z'/%3e%3cpath%20d='M21%2019v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2H7v-2h2zm-4%200v2H3v-2h2zm16-4v2h-2v-2h2zM5%2015v2H3v-2h2zm0-4v2H3v-2h2zm11-8c2.687%200%204.882%202.124%204.995%204.783L21%208v5h-2V8c0-1.591-1.255-2.903-2.824-2.995L16%205h-5V3h5zM5%207v2H3V7h2zm0-4v2H3V3h2zm4%200v2H7V3h2z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
   const BottomRightCornerIcon = "data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Transformed%20by:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='%23000000'%20transform='rotate(90)'%3e%3cg%20id='SVGRepo_bgCarrier'%20stroke-width='0'/%3e%3cg%20id='SVGRepo_tracerCarrier'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cg%20id='SVGRepo_iconCarrier'%3e%3cg%3e%3cpath%20fill='none'%20d='M0%200H24V24H0z'/%3e%3cpath%20d='M21%2019v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2H7v-2h2zm-4%200v2H3v-2h2zm16-4v2h-2v-2h2zM5%2015v2H3v-2h2zm0-4v2H3v-2h2zm11-8c2.687%200%204.882%202.124%204.995%204.783L21%208v5h-2V8c0-1.591-1.255-2.903-2.824-2.995L16%205h-5V3h5zM5%207v2H3V7h2zm0-4v2H3V3h2zm4%200v2H7V3h2z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
-  const _hoisted_1$o = { class: "group-editor group-editor-border" };
+  const _hoisted_1$p = { class: "group-editor group-editor-border" };
   const _hoisted_2$g = { class: "flex-align-center" };
-  const _hoisted_3$e = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
+  const _hoisted_3$f = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Border" })
   ], -1);
   const _hoisted_4$7 = { class: "" };
@@ -11293,11 +11506,11 @@ ${_html.style}
   const _hoisted_8$4 = /* @__PURE__ */ vue.createElementVNode("div", { class: "sub-title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Border Width" })
   ], -1);
-  const _hoisted_9$3 = { class: "flex-grow-1 mt-4" };
-  const _hoisted_10$1 = { class: "bg-gray-100 py-5 rounded-8" };
-  const _hoisted_11$1 = { class: "text-center" };
-  const _hoisted_12$1 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
-  const _hoisted_13$1 = /* @__PURE__ */ vue.createElementVNode("div", {
+  const _hoisted_9$2 = { class: "flex-grow-1 mt-4" };
+  const _hoisted_10 = { class: "bg-gray-100 py-5 rounded-8" };
+  const _hoisted_11 = { class: "text-center" };
+  const _hoisted_12 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
+  const _hoisted_13 = /* @__PURE__ */ vue.createElementVNode("div", {
     class: "d-inline-block text-center text-gray-300",
     style: { "width": "30%", "font-size": "12px" }
   }, [
@@ -11312,7 +11525,7 @@ ${_html.style}
   const _hoisted_18 = { class: "bg-gray-100 py-5 rounded-8" };
   const _hoisted_19 = { class: "" };
   const _hoisted_20 = { class: "mt-2" };
-  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorBorder",
     props: {
       group: {},
@@ -11350,9 +11563,9 @@ ${_html.style}
       const updateBorderBottomLeftRadius = (value) => updatePropertyValue({ borderBottomLeftRadius: value });
       const updateBorderBottomRightRadius = (value) => updatePropertyValue({ borderBottomRightRadius: value });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
           vue.createElementVNode("div", _hoisted_2$g, [
-            _hoisted_3$e,
+            _hoisted_3$f,
             vue.createElementVNode("div", _hoisted_4$7, [
               _hoisted_5$4,
               vue.createElementVNode("div", _hoisted_6$4, [
@@ -11375,9 +11588,9 @@ ${_html.style}
             ]),
             vue.createElementVNode("div", _hoisted_7$4, [
               _hoisted_8$4,
-              vue.createElementVNode("div", _hoisted_9$3, [
-                vue.createElementVNode("div", _hoisted_10$1, [
-                  vue.createElementVNode("div", _hoisted_11$1, [
+              vue.createElementVNode("div", _hoisted_9$2, [
+                vue.createElementVNode("div", _hoisted_10, [
+                  vue.createElementVNode("div", _hoisted_11, [
                     vue.createVNode(vue.unref(bluesea.BSTextInput), {
                       "model-value": borderTopWidth.value,
                       class: "ml-4",
@@ -11386,7 +11599,7 @@ ${_html.style}
                       "onUpdate:modelValue": updateBorderTopWidth
                     }, null, 8, ["model-value"])
                   ]),
-                  vue.createElementVNode("div", _hoisted_12$1, [
+                  vue.createElementVNode("div", _hoisted_12, [
                     vue.createVNode(vue.unref(bluesea.BSTextInput), {
                       "model-value": borderLeftWidth.value,
                       class: "ml-4",
@@ -11394,7 +11607,7 @@ ${_html.style}
                       width: "30%",
                       "onUpdate:modelValue": updateBorderLeftWidth
                     }, null, 8, ["model-value"]),
-                    _hoisted_13$1,
+                    _hoisted_13,
                     vue.createVNode(vue.unref(bluesea.BSTextInput), {
                       "model-value": borderRightWidth.value,
                       class: "ml-4",
@@ -11459,9 +11672,9 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$n = { class: "group-editor group-editor-margin" };
+  const _hoisted_1$o = { class: "group-editor group-editor-margin" };
   const _hoisted_2$f = { class: "flex-align-center" };
-  const _hoisted_3$d = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
+  const _hoisted_3$e = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Margin" })
   ], -1);
   const _hoisted_4$6 = { class: "flex-grow-1" };
@@ -11474,8 +11687,8 @@ ${_html.style}
   }, [
     /* @__PURE__ */ vue.createElementVNode("span", { class: "font-icon" }, "add")
   ], -1);
-  const _hoisted_9$2 = { class: "text-center" };
-  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_9$1 = { class: "text-center" };
+  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorMargin",
     props: {
       group: {},
@@ -11499,9 +11712,9 @@ ${_html.style}
       const updateTop = (value) => updatePropertyValue({ marginTop: value });
       const updateBottom = (value) => updatePropertyValue({ marginBottom: value });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
           vue.createElementVNode("div", _hoisted_2$f, [
-            _hoisted_3$d,
+            _hoisted_3$e,
             vue.createElementVNode("div", _hoisted_4$6, [
               vue.createElementVNode("div", _hoisted_5$3, [
                 vue.createElementVNode("div", _hoisted_6$3, [
@@ -11530,7 +11743,7 @@ ${_html.style}
                     "onUpdate:modelValue": updateRight
                   }, null, 8, ["model-value"])
                 ]),
-                vue.createElementVNode("div", _hoisted_9$2, [
+                vue.createElementVNode("div", _hoisted_9$1, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": bottom.value,
                     class: "ml-4",
@@ -11546,9 +11759,9 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$m = { class: "group-editor group-editor-padding" };
+  const _hoisted_1$n = { class: "group-editor group-editor-padding" };
   const _hoisted_2$e = { class: "flex-align-center" };
-  const _hoisted_3$c = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
+  const _hoisted_3$d = /* @__PURE__ */ vue.createElementVNode("div", { class: "title" }, [
     /* @__PURE__ */ vue.createElementVNode("label", { textContent: "Padding" })
   ], -1);
   const _hoisted_4$5 = { class: "flex-grow-1" };
@@ -11561,8 +11774,8 @@ ${_html.style}
   }, [
     /* @__PURE__ */ vue.createElementVNode("span", { class: "font-icon" }, "add")
   ], -1);
-  const _hoisted_9$1 = { class: "text-center" };
-  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_9 = { class: "text-center" };
+  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorPadding",
     props: {
       group: {},
@@ -11586,9 +11799,9 @@ ${_html.style}
       const updateTop = (value) => updatePropertyValue({ paddingTop: value });
       const updateBottom = (value) => updatePropertyValue({ paddingBottom: value });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
           vue.createElementVNode("div", _hoisted_2$e, [
-            _hoisted_3$c,
+            _hoisted_3$d,
             vue.createElementVNode("div", _hoisted_4$5, [
               vue.createElementVNode("div", _hoisted_5$2, [
                 vue.createElementVNode("div", _hoisted_6$2, [
@@ -11617,7 +11830,7 @@ ${_html.style}
                     "onUpdate:modelValue": updateRight
                   }, null, 8, ["model-value"])
                 ]),
-                vue.createElementVNode("div", _hoisted_9$1, [
+                vue.createElementVNode("div", _hoisted_9, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": bottom.value,
                     class: "ml-4",
@@ -11659,7 +11872,7 @@ ${_html.style}
           propertyType: "text"
         }
       ],
-      propertyGroupEditor: () => _sfc_main$t
+      propertyGroupEditor: () => _sfc_main$u
     };
   };
   const sizeGroup = () => {
@@ -11698,7 +11911,7 @@ ${_html.style}
           propertyType: "text"
         }
       ],
-      propertyGroupEditor: () => _sfc_main$s
+      propertyGroupEditor: () => _sfc_main$t
     };
   };
   const marginGroup = () => {
@@ -11727,7 +11940,7 @@ ${_html.style}
           propertyType: "text"
         }
       ],
-      propertyGroupEditor: () => _sfc_main$o
+      propertyGroupEditor: () => _sfc_main$p
     };
   };
   const paddingGroup = () => {
@@ -11756,7 +11969,7 @@ ${_html.style}
           propertyType: "text"
         }
       ],
-      propertyGroupEditor: () => _sfc_main$n
+      propertyGroupEditor: () => _sfc_main$o
     };
   };
   const commonGroup = () => {
@@ -11775,8 +11988,18 @@ ${_html.style}
           propertyType: "text"
         },
         {
-          propertyName: "css",
-          caption: "CSS",
+          propertyName: "classNames",
+          caption: "Class Names",
+          propertyType: "text"
+        },
+        {
+          propertyName: "inlineStyle",
+          caption: "Inline Style",
+          propertyType: "multiline-text"
+        },
+        {
+          propertyName: "style",
+          caption: "Style",
           propertyType: "multiline-text"
         },
         {
@@ -11823,7 +12046,7 @@ ${_html.style}
           propertyType: "image"
         }
       ],
-      propertyGroupEditor: () => _sfc_main$q
+      propertyGroupEditor: () => _sfc_main$r
     };
   };
   const borderGroup = () => {
@@ -11877,7 +12100,7 @@ ${_html.style}
           propertyType: "text"
         }
       ],
-      propertyGroupEditor: () => _sfc_main$p
+      propertyGroupEditor: () => _sfc_main$q
     };
   };
   const defaultPropertyGroups = () => {
@@ -11900,7 +12123,7 @@ ${_html.style}
       initialProperties: {},
       localized: false,
       allowsChild: () => true,
-      creator: () => _sfc_main$u
+      creator: () => _sfc_main$v
     }
   ];
   const sectionParts = [
@@ -11917,7 +12140,7 @@ ${_html.style}
       },
       localized: false,
       allowsChild: () => true,
-      creator: () => _sfc_main$u
+      creator: () => _sfc_main$v
     }
   ];
   const blockParts = [
@@ -11932,7 +12155,7 @@ ${_html.style}
       initialProperties: {},
       localized: false,
       allowsChild: () => true,
-      creator: () => _sfc_main$w
+      creator: () => _sfc_main$x
     }
   ];
   const widgets = [
@@ -11960,11 +12183,23 @@ ${_html.style}
               propertyType: "text",
               params: ""
             },
+            {
+              propertyName: "fontWeight",
+              caption: "Weight",
+              propertyType: "text",
+              params: ""
+            },
             {
               propertyName: "color",
               caption: "Font Color",
               propertyType: "color",
               params: ""
+            },
+            {
+              propertyName: "textAlign",
+              caption: "Align",
+              propertyType: "select",
+              params: "left,center,right"
             }
           ]
         },
@@ -13287,6 +13522,8 @@ ${_html.style}
       __publicField(this, "customWidgets", []);
       __publicField(this, "watchers", {});
       __publicField(this, "providers", {});
+      __publicField(this, "externalCssLinks", []);
+      __publicField(this, "externalCssContent", "");
       this.model = new Model();
       this.context = new PageBuilderContextImpl(this);
       this.scale.value = 1;
@@ -13353,7 +13590,7 @@ ${_html.style}
         plugin.widgets.forEach((v) => {
           const w = { ...v };
           w.partType = "Widget";
-          w.creator = () => _sfc_main$z;
+          w.creator = () => _sfc_main$A;
           w.propertyGroups = [...w.propertyGroups, ...defaultWidgetPropertyGroups()];
           partDefinitions2[v.partName] = w;
           const found = this.customWidgets.find((x) => x.partName === v.partName);
@@ -13372,6 +13609,14 @@ ${_html.style}
       if (plugin.propertyEditors) {
         this.partManager.registerPartPropertyEditors(plugin.propertyEditors);
       }
+      if (plugin.css) {
+        if (plugin.css.links) {
+          this.externalCssLinks = plugin.css.links;
+        }
+        if (plugin.css.content) {
+          this.externalCssContent = plugin.css.content;
+        }
+      }
     }
     initData(data) {
       const _data = JSON.parse(data || "{}") || {};
@@ -13495,6 +13740,10 @@ ${_html.style}
         }
       }
     }
+    getExternalCss() {
+      return `${this.externalCssLinks}
+    <style>${this.externalCssContent}</style>`;
+    }
     extractMediaFromPart(part, urls) {
       if (part.properties) {
         for (const name in part.properties) {
@@ -13593,74 +13842,119 @@ ${_html.style}
       });
     }
   }
-  const _hoisted_1$l = /* @__PURE__ */ vue.createElementVNode("i", { class: "material-icons-outlined" }, "add_circle_outline", -1);
-  const _hoisted_2$d = [
-    _hoisted_1$l
+  const _hoisted_1$m = ["data-part-id"];
+  const _hoisted_2$d = /* @__PURE__ */ vue.createElementVNode("i", { class: "material-icons-outlined" }, "add_circle_outline", -1);
+  const _hoisted_3$c = [
+    _hoisted_2$d
   ];
-  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPage",
     props: {
-      page: {},
+      part: {},
       width: {},
       isMobilePage: { type: Boolean }
     },
     setup(__props) {
       const props = __props;
       const editor = usePageBuilderEditor();
+      const styleTag = vue.computed(() => props.part.getStyleTag());
       const style = vue.computed(() => {
         var _a, _b;
         return {
           width: `${props.width || 420}px`,
-          minHeight: ((_b = (_a = props.page) == null ? void 0 : _a.children) == null ? void 0 : _b.length) ? void 0 : "200px"
+          minHeight: ((_b = (_a = props.part) == null ? void 0 : _a.children) == null ? void 0 : _b.length) ? void 0 : "200px"
         };
       });
       const properties = vue.computed(() => {
-        var _a;
-        return { style: ((_a = props.page) == null ? void 0 : _a.getStyles()) || {} };
+        var _a, _b;
+        return {
+          style: {
+            ...(_a = props.part) == null ? void 0 : _a.getStyles(),
+            ...(_b = props.part) == null ? void 0 : _b.getInlineStyles()
+          }
+        };
       });
-      const selected = vue.computed(() => !!props.page && editor.context.isSelected(props.page));
+      const selected = vue.computed(() => !!props.part && editor.context.isSelected(props.part));
       const insertSection = (index) => {
-        if (!props.page)
-          return;
         editor.commandRegistry.executeCommand(AddSectionCommand.COMMAND_ID);
       };
       return (_ctx, _cache) => {
-        var _a;
-        return vue.openBlock(), vue.createElementBlock("div", {
-          style: vue.normalizeStyle(style.value),
-          class: "pb-page"
-        }, [
-          vue.createElementVNode("div", vue.mergeProps({
-            class: [selected.value && "selected", _ctx.isMobilePage ? "mobile" : "pc", "pb-page-content"]
-          }, properties.value), [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList((_a = _ctx.page) == null ? void 0 : _a.children, (section, index) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$u, {
-                key: section.partId,
-                part: section
-              }, null, 8, ["part"]);
-            }), 128))
-          ], 16),
+        var _a, _b;
+        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+          styleTag.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent("style"), {
+            key: 0,
+            innerHTML: styleTag.value
+          }, null, 8, ["innerHTML"])) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", {
-            class: "pb-add-section-handle bottom",
-            onClick: _cache[0] || (_cache[0] = ($event) => {
-              var _a2, _b;
-              return insertSection(((_b = (_a2 = _ctx.page) == null ? void 0 : _a2.children) == null ? void 0 : _b.length) || 0);
-            })
-          }, _hoisted_2$d)
-        ], 4);
+            "data-part-id": (_a = _ctx.part) == null ? void 0 : _a.partId,
+            style: vue.normalizeStyle(style.value),
+            class: "pb-page"
+          }, [
+            vue.createElementVNode("div", vue.mergeProps({
+              class: [selected.value && "selected", _ctx.isMobilePage ? "mobile" : "pc", "pb-page-content"]
+            }, properties.value), [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList((_b = _ctx.part) == null ? void 0 : _b.children, (section, index) => {
+                return vue.openBlock(), vue.createBlock(_sfc_main$v, {
+                  key: section.partId,
+                  part: section
+                }, null, 8, ["part"]);
+              }), 128))
+            ], 16),
+            vue.createElementVNode("div", {
+              class: "pb-add-section-handle bottom",
+              onClick: _cache[0] || (_cache[0] = ($event) => {
+                var _a2, _b2;
+                return insertSection(((_b2 = (_a2 = _ctx.part) == null ? void 0 : _a2.children) == null ? void 0 : _b2.length) || 0);
+              })
+            }, _hoisted_3$c)
+          ], 12, _hoisted_1$m)
+        ], 64);
       };
     }
   });
-  const _hoisted_1$k = /* @__PURE__ */ vue.createElementVNode("div", { style: { "width": "20px" } }, null, -1);
+  const _hoisted_1$l = { class: "pb-page-wrapper" };
+  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+    __name: "PbPageWrapper",
+    props: {
+      part: {},
+      width: {},
+      isMobilePage: { type: Boolean }
+    },
+    setup(__props) {
+      const props = __props;
+      const width = vue.ref(props.width);
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
+          vue.createVNode(vue.unref(bluesea.BSSelect), {
+            modelValue: width.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => width.value = $event),
+            items: [480, 768, 1024, 1280],
+            "label-provider": (v) => `${v}`,
+            "value-provider": (v) => v,
+            "view-model": false
+          }, null, 8, ["modelValue", "label-provider", "value-provider"]),
+          vue.createVNode(_sfc_main$n, {
+            "is-mobile-page": _ctx.isMobilePage,
+            part: _ctx.part,
+            width: width.value
+          }, null, 8, ["is-mobile-page", "part", "width"])
+        ]);
+      };
+    }
+  });
+  const _hoisted_1$k = {
+    key: 1,
+    style: { "width": "20px" }
+  };
   const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     __name: "PbCanvas",
     setup(__props) {
       const pageBuilder = usePageBuilderEditor();
-      const pageS = vue.computed(() => {
+      const partS = vue.computed(() => {
         var _a;
         return (_a = pageBuilder.model.rootPart.children) == null ? void 0 : _a[0];
       });
-      const pageL = vue.computed(() => {
+      const partL = vue.computed(() => {
         var _a;
         return (_a = pageBuilder.model.rootPart.children) == null ? void 0 : _a[1];
       });
@@ -13672,7 +13966,11 @@ ${_html.style}
       const contextMenu = bluesea.useContextMenu();
       const style = vue.computed(() => {
         const scale = pageBuilder.scale.value;
-        return `transform: scale(${scale}); flex-grow: 1;`;
+        return {
+          style: {
+            transform: `scale(${scale})`
+          }
+        };
       });
       const showContextMenu = (event) => {
         var _a, _b;
@@ -13695,27 +13993,26 @@ ${_html.style}
           onContextmenu: showContextMenu,
           onMousedown: vue.withModifiers(handleClick, ["stop"])
         }, [
-          vue.createElementVNode("div", {
-            style: vue.normalizeStyle(style.value),
-            class: "pb-canvas"
-          }, [
-            vue.createVNode(_sfc_main$m, {
+          vue.createElementVNode("div", vue.mergeProps({ class: "pb-canvas" }, style.value), [
+            partS.value ? (vue.openBlock(), vue.createBlock(_sfc_main$m, {
+              key: 0,
               "is-mobile-page": true,
-              page: pageS.value,
-              width: 420
-            }, null, 8, ["page"]),
-            _hoisted_1$k,
-            vue.createVNode(_sfc_main$m, {
+              part: partS.value,
+              width: 480
+            }, null, 8, ["part"])) : vue.createCommentVNode("", true),
+            partL.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k)) : vue.createCommentVNode("", true),
+            partL.value ? (vue.openBlock(), vue.createBlock(_sfc_main$m, {
+              key: 2,
               "is-mobile-page": false,
-              page: pageL.value,
+              part: partL.value,
               width: 1024
-            }, null, 8, ["page"])
-          ], 4)
+            }, null, 8, ["part"])) : vue.createCommentVNode("", true)
+          ], 16)
         ], 32);
       };
     }
   });
-  const canvasStyle = '.pb-page {\n  margin: 0 auto;\n  margin-top: 20px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-page-content.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 5px;\n}\n.pb-page * {\n  box-sizing: border-box;\n}\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\n.pb-add-widget-button button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  padding: 8px;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n.pb-section {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n  background-color: #fff;\n}\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-section.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-section.pb-section-static {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n}\n.pb-section.pb-section-static:after {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n}\n.pb-section-static .pb-widget {\n  outline: none;\n}\n.pb-block {\n  display: flex;\n  min-width: 1px;\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n  outline: 1px dashed #ccc;\n}\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-block.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget {\n  position: relative;\n  outline: 1px dashed #ccc;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-widget.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-widget .pan-handle {\n  position: absolute;\n  left: -6px;\n  top: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: move;\n}\n.pb-widget .resize-handle {\n  position: absolute;\n  right: -6px;\n  bottom: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: nwse-resize;\n}\n.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-text-widget .text {\n  color: #333;\n}\n.pb-text-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-image-widget {\n  width: 100%;\n}\n.pb-image-widget .image {\n  width: 100%;\n}\n.pb-image-widget .empty {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-image-widget .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-html-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-iframe-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-iframe-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n.pb-product-list-widget {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n.pb-product-list-widget .product-wrapper .product {\n  width: 95%;\n  margin: 0 auto;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-product-list-widget .product-wrapper .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 200px;\n  vertical-align: middle;\n}\n@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n.pb-login-widget h3 {\n  padding: 0;\n  margin: 0;\n  font-size: 32px;\n  font-weight: bold;\n  color: #ccc;\n  line-height: 200px;\n  vertical-align: middle;\n}\n.font-icon {\n  font-family: Material Symbols Outlined, monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\nhtml, body {\n  font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n  font-size: 12px;\n}\nbody {\n  background-color: white;\n  height: 100%;\n  margin: 0;\n}\n.pb-canvas-wrapper {\n  padding: 32px 40px 56px 40px;\n  height: 100%;\n  background-color: #aaa;\n  overflow: auto;\n}\n.pb-canvas-wrapper .pb-canvas {\n  display: flex;\n  flex-direction: row;\n  transform-origin: top left;\n  width: fit-content;\n  min-width: 40px;\n  min-height: 40px;\n  margin: 0 auto;\n}\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\n}\n.pb-add-section-handle {\n  position: relative;\n  text-align: center;\n  cursor: pointer;\n  z-index: 5;\n  height: 0;\n}\n.pb-add-section-handle.top::before, .pb-add-section-handle.bottom::before, .pb-add-section-handle.middle::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n.pb-add-section-handle.bottom {\n  left: 50%;\n  bottom: -32px;\n}\n.pb-add-section-handle:hover.top::before, .pb-add-section-handle:hover.bottom::before, .pb-add-section-handle:hover.middle::before,\n.pb-add-section-handle:hover > i {\n  opacity: 1;\n}\n.pb-add-section-handle > i {\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}\n.pb-button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  vertical-align: middle;\n}\n.pb-guideline {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.pb-guideline.selected {\n  z-index: 3;\n}\n.pb-guideline.preselect {\n  z-index: 4;\n}';
+  const canvasStyle = '.pb-page-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\n\n.pb-page {\n  margin: 20px 0 auto 0;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n.pb-page .pb-page-content.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 5px;\n}\n\n.pb-page * {\n  box-sizing: border-box;\n}\n\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\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\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n\n.pb-section {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n  background-color: #fff;\n}\n\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n\n.pb-section.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 1px;\n  z-index: 999;\n}\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\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\n.pb-section-static .pb-widget {\n  outline: none;\n}\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\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n\n.pb-block.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 1px;\n  z-index: 999;\n}\n\n.pb-widget {\n  position: relative;\n  outline: 1px dashed #ccc;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n.pb-widget.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 1px;\n  z-index: 999;\n}\n\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.pb-widget .pan-handle {\n  position: absolute;\n  left: -6px;\n  top: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: move;\n}\n\n.pb-widget .resize-handle {\n  position: absolute;\n  right: -6px;\n  bottom: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: nwse-resize;\n}\n\n.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-text-widget .text {\n  color: #333;\n}\n\n.pb-text-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-image-widget {\n  width: 100%;\n}\n\n.pb-image-widget .image {\n  width: 100%;\n}\n\n.pb-image-widget .empty {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-image-widget .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-html-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-iframe-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-iframe-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-product-list-widget {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n\n.pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n\n.pb-product-list-widget .product-wrapper .product {\n  width: 95%;\n  margin: 0 auto;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n\n.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-product-list-widget .product-wrapper .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 200px;\n  vertical-align: middle;\n}\n\n@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n\n.pb-login-widget h3 {\n  padding: 0;\n  margin: 0;\n  font-size: 32px;\n  font-weight: bold;\n  color: #ccc;\n  line-height: 200px;\n  vertical-align: middle;\n}\n\n.font-icon {\n  font-family: Material Symbols Outlined, monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\n\nhtml, body {\n  font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n  font-size: 12px;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  background-color: #aaa;\n  overflow: auto;\n}\n\n.pb-canvas-wrapper {\n  margin: 0;\n  padding: 0;\n  width: fit-content;\n}\n\n.pb-canvas-wrapper .pb-canvas {\n  display: flex;\n  flex-direction: row;\n  flex: 1 1 auto;\n  transform-origin: top left;\n  width: fit-content;\n  margin: 0;\n  padding: 32px 40px 56px 40px;\n}\n\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\n}\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\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\n.pb-add-section-handle.bottom {\n  left: 50%;\n  bottom: -32px;\n}\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\n.pb-add-section-handle > i {\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}\n\n.pb-button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  vertical-align: middle;\n}\n\n.pb-guideline {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.pb-guideline.selected {\n  z-index: 3;\n}\n\n.pb-guideline.preselect {\n  z-index: 4;\n}';
   const _hoisted_1$j = { class: "pb-canvas-frame" };
   const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     __name: "PbCanvasFrame",
@@ -13731,6 +14028,7 @@ ${_html.style}
         () => {
           var _a, _b, _c, _d, _e, _f, _g, _h;
           if ((_c = (_b = (_a = iframeRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document) == null ? void 0 : _c.head) {
+            const externalCss = pageBuilderEditor.getExternalCss();
             const head = (_e = (_d = iframeRef.value) == null ? void 0 : _d.contentWindow) == null ? void 0 : _e.document.head;
             head.innerHTML = `
           <meta charset="UTF-8"/>
@@ -13746,10 +14044,12 @@ ${_html.style}
           <link
               href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block"
               rel="stylesheet"/>
-          <!--
-          <link href="https://bluesea5.g1project.net/assets/index-j48PwPDr.css" rel="stylesheet">
-          -->
           <link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined" rel="stylesheet" />
+
+          <link href="https://bluesea5.g1project.net/assets/index-DjQFWKLW.css" rel="stylesheet" />
+
+          ${externalCss}
+
           <style>${canvasStyle}</style>
         `;
             const script2 = (_g = (_f = iframeRef.value) == null ? void 0 : _f.contentWindow) == null ? void 0 : _g.document.createElement("script");
@@ -14595,7 +14895,8 @@ ${_html.style}
           bind: {
             html: JSON.parse(JSON.stringify(props.value || {})),
             locales,
-            localeTabs
+            localeTabs,
+            pageBuilder
           },
           on: {
             updateHtml: (html) => {
@@ -14767,41 +15068,44 @@ ${_html.style}
   }, Symbol.toStringTag, { value: "Module" }));
   const _hoisted_1 = { class: "bs-layout-vertical flex-grow-1 h-full" };
   const _hoisted_2 = { class: "bs-layout-horizontal h-full pt-8" };
-  const _hoisted_3 = { class: "preview flex-grow-1" };
+  const _hoisted_3 = { class: "preview" };
   const _hoisted_4 = { class: "bs-layout-vertical w-full h-full" };
   const _hoisted_5 = /* @__PURE__ */ vue.createElementVNode("div", { class: "title pb-4" }, "Preview", -1);
-  const _hoisted_6 = ["innerHTML"];
-  const _hoisted_7 = { class: "editor bs-layout-vertical pl-8" };
-  const _hoisted_8 = { class: "tags bs-layout-vertical w-full" };
-  const _hoisted_9 = /* @__PURE__ */ vue.createElementVNode("div", { class: "title pb-4" }, "HTML", -1);
-  const _hoisted_10 = { class: "content flex-grow-1" };
-  const _hoisted_11 = { class: "style bs-layout-vertical w-full pt-8" };
-  const _hoisted_12 = /* @__PURE__ */ vue.createElementVNode("div", { class: "title pb-4" }, "Style", -1);
-  const _hoisted_13 = { class: "content flex-grow-1" };
+  const _hoisted_6 = { class: "content flex-grow-1" };
+  const _hoisted_7 = ["srcdoc"];
+  const _hoisted_8 = { class: "editor bs-layout-vertical pl-8 h-full" };
   const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     __name: "PbHtmlEditorModal",
     props: {
       html: {},
       locales: {},
-      localeTabs: {}
+      localeTabs: {},
+      pageBuilder: {}
     },
     emits: ["updateHtml"],
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
-      const tabId = vue.ref(props.localeTabs && props.localeTabs[0].tabId);
+      const localeTabId = vue.ref(props.localeTabs && props.localeTabs[0].tabId);
       const modalHandle = bluesea.useModalHandle();
       const html = vue.ref(props.html || {});
       const preview = vue.computed(() => {
         var _a;
         let data = {};
+        const externalCss = props.pageBuilder.getExternalCss();
         (_a = props.locales) == null ? void 0 : _a.forEach((locale) => {
           const _html = html.value[locale] || { tags: "", style: "" };
-          data[locale] = _html.tags ? `${_html.tags}
-<style>${_html.style}</style>` : "";
+          data[locale] = _html.tags ? `${externalCss}
+<style>${_html.style}</style>
+${_html.tags}` : "";
         });
         return data;
       });
+      const editorTabs = [
+        { tabId: "tags", caption: "Tags" },
+        { tabId: "style", caption: "Style" }
+      ];
+      const editorTabId = vue.ref("tags");
       const updateTags = (locale, value) => {
         if (!html.value)
           html.value = {};
@@ -14820,6 +15124,35 @@ ${_html.style}
         emit("updateHtml", html.value);
         modalHandle.close();
       };
+      const editorHeight = vue.ref("");
+      const updateEditorHeight = async () => {
+        await bluesea.waitDuring(50);
+        if (editorHeight.value) {
+          const editor = document.querySelector(".bs-code-editor");
+          if (editor) {
+            editor.style.height = editorHeight.value;
+          }
+        }
+      };
+      let resizeObserver;
+      vue.onMounted(async () => {
+        await bluesea.waitDuring(50);
+        const editorParent = document.querySelector(".editor > .bs-tab-sheet > .bs-layout-vertical");
+        resizeObserver = new ResizeObserver(() => {
+          if (editorParent && editorParent.clientHeight) {
+            editorHeight.value = `${editorParent.clientHeight}px`;
+            updateEditorHeight();
+          }
+        });
+        if (editorParent) {
+          resizeObserver.observe(editorParent);
+        }
+      });
+      vue.onBeforeUnmount(() => {
+        if (resizeObserver) {
+          resizeObserver.disconnect();
+        }
+      });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(bluesea.BSModalFrame), {
           class: "pb-html-editor-modal",
@@ -14828,8 +15161,11 @@ ${_html.style}
           default: vue.withCtx(() => [
             vue.createElementVNode("div", _hoisted_1, [
               vue.createVNode(vue.unref(bluesea.BSTabSheet), {
-                "tab-id": tabId.value,
-                "onUpdate:tabId": _cache[0] || (_cache[0] = ($event) => tabId.value = $event),
+                "tab-id": localeTabId.value,
+                "onUpdate:tabId": [
+                  _cache[1] || (_cache[1] = ($event) => localeTabId.value = $event),
+                  updateEditorHeight
+                ],
                 tabs: _ctx.localeTabs,
                 class: "flex-grow-1"
               }, vue.createSlots({ _: 2 }, [
@@ -14841,35 +15177,41 @@ ${_html.style}
                         vue.createElementVNode("div", _hoisted_3, [
                           vue.createElementVNode("div", _hoisted_4, [
                             _hoisted_5,
-                            vue.createElementVNode("div", {
-                              class: "content flex-grow-1",
-                              innerHTML: preview.value[locale]
-                            }, null, 8, _hoisted_6)
+                            vue.createElementVNode("div", _hoisted_6, [
+                              vue.createElementVNode("iframe", {
+                                srcdoc: preview.value[locale]
+                              }, null, 8, _hoisted_7)
+                            ])
                           ])
                         ]),
-                        vue.createElementVNode("div", _hoisted_7, [
-                          vue.createElementVNode("div", _hoisted_8, [
-                            _hoisted_9,
-                            vue.createElementVNode("div", _hoisted_10, [
+                        vue.createElementVNode("div", _hoisted_8, [
+                          vue.createVNode(vue.unref(bluesea.BSTabSheet), {
+                            "tab-id": editorTabId.value,
+                            "onUpdate:tabId": [
+                              _cache[0] || (_cache[0] = ($event) => editorTabId.value = $event),
+                              updateEditorHeight
+                            ],
+                            tabs: editorTabs,
+                            class: "flex-grow-1"
+                          }, {
+                            tags: vue.withCtx(() => [
                               vue.createVNode(vue.unref(bluesea.BSCodeEditor), {
                                 "model-value": (html.value[locale] || {}).tags,
                                 "editor-height": "100%",
                                 lang: "html",
                                 "onUpdate:modelValue": (value) => updateTags(locale, value)
                               }, null, 8, ["model-value", "onUpdate:modelValue"])
-                            ])
-                          ]),
-                          vue.createElementVNode("div", _hoisted_11, [
-                            _hoisted_12,
-                            vue.createElementVNode("div", _hoisted_13, [
+                            ]),
+                            style: vue.withCtx(() => [
                               vue.createVNode(vue.unref(bluesea.BSCodeEditor), {
                                 "model-value": (html.value[locale] || {}).style,
                                 "editor-height": "100%",
                                 lang: "css",
                                 "onUpdate:modelValue": (value) => updateStyle(locale, value)
                               }, null, 8, ["model-value", "onUpdate:modelValue"])
-                            ])
-                          ])
+                            ]),
+                            _: 2
+                          }, 1032, ["tab-id"])
                         ])
                       ])
                     ])
@@ -14905,7 +15247,7 @@ ${_html.style}
   exports2.PageBuilderEditorEvent = PageBuilderEditorEvent;
   exports2.PageBuilderViewer = _sfc_main$1$1;
   exports2.Part = Part;
-  exports2.PbCustomWidget = _sfc_main$z;
+  exports2.PbCustomWidget = _sfc_main$A;
   exports2.PbHtmlWidget = _sfc_main$4$1;
   exports2.PbIframeWidget = _sfc_main$3$1;
   exports2.PbImageWidget = _sfc_main$6$1;