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

package/dist/{index-Cr-_-n9T.js → index-JVyoOgGq.js}

@@ -1,11 +1,9 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import { ref, defineComponent, openBlock, createElementBlock, createCommentVNode, computed, mergeProps, toDisplayString, onMounted, onBeforeUnmount, provide, inject, watch, createBlock as createBlock$1, resolveDynamicComponent, normalizeProps, createElementVNode, normalizeClass, Fragment, renderList, reactive, defineAsyncComponent, withDirectives, unref, createVNode, normalizeStyle, resolveComponent, vModelText, resolveDirective, withModifiers, renderSlot, guardReactiveProps, markRaw, Teleport, toHandlers } from "vue";
-import { notNull, BSTextInput, vClickOutside, useModal, useContextMenu, BSSelect, BSTree } from "@g1cloud/bluesea";
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { ref, defineComponent, computed, openBlock, createElementBlock, normalizeStyle, createElementVNode, createCommentVNode, toDisplayString, onMounted, onBeforeUnmount, createBlock as createBlock$1, unref, provide, inject, watch, Fragment, renderList, resolveDynamicComponent, normalizeProps, mergeProps, normalizeClass, reactive, defineAsyncComponent, withDirectives, createVNode, resolveComponent, vModelText, resolveDirective, withModifiers, renderSlot, guardReactiveProps, markRaw, toHandlers, Teleport } from "vue";
+import { notNull, BSTextInput, vClickOutside, useModal, BSSelect, BSTree, useContextMenu } from "@g1cloud/bluesea";
+import YouTube from "vue3-youtube";
 const create$5 = () => /* @__PURE__ */ new Map();
 const copy = (m) => {
   const r = create$5();
@@ -635,10 +633,8 @@ const computeNoColorLoggingArgs = (args) => {
   let i = 0;
   for (; i < args.length; i++) {
     const arg = args[i];
-    if (arg === void 0)
-      ;
-    else if (arg.constructor === String || arg.constructor === Number)
-      ;
+    if (arg === void 0) ;
+    else if (arg.constructor === String || arg.constructor === Number) ;
     else if (arg.constructor === Object) {
       logArgs.push(JSON.stringify(arg));
     }
@@ -1984,8 +1980,7 @@ class UndoManager extends ObservableV2 {
     ytypes = isArray(ytypes) ? ytypes : [ytypes];
     ytypes.forEach((ytype) => {
       if (this.scope.every((yt) => yt !== ytype)) {
-        if (ytype.doc !== this.doc)
-          warn("[yjs#509] Not same Y.Doc");
+        if (ytype.doc !== this.doc) warn("[yjs#509] Not same Y.Doc");
         this.scope.push(ytype);
       }
     });
@@ -3460,8 +3455,7 @@ const minimizeAttributeChanges = (currPos, attributes) => {
       ] ?? null,
       /** @type {ContentFormat} */
       currPos.right.content.value
-    ))
-      ;
+    )) ;
     else {
       break;
     }
@@ -3515,41 +3509,40 @@ const formatText = (transaction, parent, currPos, length2, attributes) => {
   const ownClientId = doc.clientID;
   minimizeAttributeChanges(currPos, attributes);
   const negatedAttributes = insertAttributes(transaction, parent, currPos, attributes);
-  iterationLoop:
-    while (currPos.right !== null && (length2 > 0 || negatedAttributes.size > 0 && (currPos.right.deleted || currPos.right.content.constructor === ContentFormat))) {
-      if (!currPos.right.deleted) {
-        switch (currPos.right.content.constructor) {
-          case ContentFormat: {
-            const { key, value } = (
-              /** @type {ContentFormat} */
-              currPos.right.content
-            );
-            const attr = attributes[key];
-            if (attr !== void 0) {
-              if (equalAttrs(attr, value)) {
-                negatedAttributes.delete(key);
-              } else {
-                if (length2 === 0) {
-                  break iterationLoop;
-                }
-                negatedAttributes.set(key, value);
-              }
-              currPos.right.delete(transaction);
+  iterationLoop: while (currPos.right !== null && (length2 > 0 || negatedAttributes.size > 0 && (currPos.right.deleted || currPos.right.content.constructor === ContentFormat))) {
+    if (!currPos.right.deleted) {
+      switch (currPos.right.content.constructor) {
+        case ContentFormat: {
+          const { key, value } = (
+            /** @type {ContentFormat} */
+            currPos.right.content
+          );
+          const attr = attributes[key];
+          if (attr !== void 0) {
+            if (equalAttrs(attr, value)) {
+              negatedAttributes.delete(key);
             } else {
-              currPos.currentAttributes.set(key, value);
+              if (length2 === 0) {
+                break iterationLoop;
+              }
+              negatedAttributes.set(key, value);
             }
-            break;
+            currPos.right.delete(transaction);
+          } else {
+            currPos.currentAttributes.set(key, value);
           }
-          default:
-            if (length2 < currPos.right.length) {
-              getItemCleanStart(transaction, createID(currPos.right.id.client, currPos.right.id.clock + length2));
-            }
-            length2 -= currPos.right.length;
-            break;
+          break;
         }
+        default:
+          if (length2 < currPos.right.length) {
+            getItemCleanStart(transaction, createID(currPos.right.id.client, currPos.right.id.clock + length2));
+          }
+          length2 -= currPos.right.length;
+          break;
       }
-      currPos.forward();
     }
+    currPos.forward();
+  }
   if (length2 > 0) {
     let newlines = "";
     for (; length2 > 0; length2--) {
@@ -3848,8 +3841,7 @@ class YTextEvent extends YEvent {
                 retain = 0;
                 break;
             }
-            if (op)
-              delta.push(op);
+            if (op) delta.push(op);
             action = null;
           }
         };
@@ -5864,8 +5856,7 @@ const redoItem = (transaction, item, redoitems, itemsToDelete, ignoreRemoteMapCh
       left = item;
       while (left !== null && left.right !== null && (left.right.redone || isDeleted(itemsToDelete, left.right.id) || isDeletedByUndoStack(um.undoStack, left.right.id) || isDeletedByUndoStack(um.redoStack, left.right.id))) {
         left = left.right;
-        while (left.redone)
-          left = getItemCleanStart(transaction, left.redone);
+        while (left.redone) left = getItemCleanStart(transaction, left.redone);
       }
       if (left && left.right !== null) {
         return null;
@@ -6642,10 +6633,7 @@ const PageBuilderEditorEvent = {
 };
 var __defProp2 = Object.defineProperty;
 var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField2 = (obj, key, value) => {
-  __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
+var __publicField2 = (obj, key, value) => __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
 const PART_ID_KEY$1 = "partId";
 const ROOT_TYPE$1 = "Root";
 const PAGE_TYPE$1 = "Page";
@@ -6691,89 +6679,111 @@ class Part {
     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) || "";
+  }
+  getAlignStyleValue(align) {
+    if (align === "left") return "flex-start";
+    if (align === "right") return "flex-end";
+    return "center";
   }
   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, _O, _P;
     const style = {};
-    if (((_a = this.properties) == null ? void 0 : _a.direction) === "horizontal") {
-      style.display = "flex";
-      style.flexDirection = "row";
-    } else if (((_b = this.properties) == null ? void 0 : _b.direction) === "vertical") {
-      style.display = "flex";
-      style.flexDirection = "column";
-    }
-    if (((_c = this.properties) == null ? void 0 : _c.wrap) === "wrap") {
+    const align = ((_a = this.properties) == null ? void 0 : _a.align) || "center";
+    if (this.isWidget()) {
+      style.alignSelf = this.getAlignStyleValue(align);
+    } else {
+      if (((_b = this.properties) == null ? void 0 : _b.direction) === "horizontal") {
+        style.display = "flex";
+        style.flexDirection = "row";
+        style.justifyContent = this.getAlignStyleValue(align);
+      } else if (((_c = this.properties) == null ? void 0 : _c.direction) === "vertical") {
+        style.display = "flex";
+        style.flexDirection = "column";
+        style.alignItems = this.getAlignStyleValue(align);
+      }
+    }
+    if (((_d = this.properties) == null ? void 0 : _d.wrap) === "wrap") {
       style.flexWrap = "wrap";
     }
-    if ((_d = this.properties) == null ? void 0 : _d.margin)
-      style.margin = this.properties.margin;
-    if ((_e = this.properties) == null ? void 0 : _e.marginLeft)
-      style.marginLeft = this.properties.marginLeft;
-    if ((_f = this.properties) == null ? void 0 : _f.marginRight)
-      style.marginRight = this.properties.marginRight;
-    if ((_g = this.properties) == null ? void 0 : _g.marginTop)
-      style.marginTop = this.properties.marginTop;
-    if ((_h = this.properties) == null ? void 0 : _h.marginBottom)
-      style.marginBottom = this.properties.marginBottom;
-    if ((_i = this.properties) == null ? void 0 : _i.padding)
-      style.padding = this.properties.padding;
-    if ((_j = this.properties) == null ? void 0 : _j.paddingLeft)
-      style.paddingLeft = this.properties.paddingLeft;
-    if ((_k = this.properties) == null ? void 0 : _k.paddingRight)
-      style.paddingRight = this.properties.paddingRight;
-    if ((_l = this.properties) == null ? void 0 : _l.paddingTop)
-      style.paddingTop = this.properties.paddingTop;
-    if ((_m = this.properties) == null ? void 0 : _m.paddingBottom)
-      style.paddingBottom = this.properties.paddingBottom;
-    if ((_n = this.properties) == null ? void 0 : _n.left)
-      style.left = this.properties.left;
-    if ((_o = this.properties) == null ? void 0 : _o.right)
-      style.right = this.properties.right;
-    if ((_p = this.properties) == null ? void 0 : _p.top)
-      style.top = this.properties.top;
-    if ((_q = this.properties) == null ? void 0 : _q.bottom)
-      style.bottom = this.properties.bottom;
-    if ((_r = this.properties) == null ? void 0 : _r.width)
-      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)
-      style.backgroundColor = this.properties.backgroundColor;
-    if ((_u = this.properties) == null ? void 0 : _u.borderLeftWidth)
-      style.borderLeftWidth = this.properties.borderLeftWidth;
-    if ((_v = this.properties) == null ? void 0 : _v.borderRightWidth)
-      style.borderRightWidth = this.properties.borderRightWidth;
-    if ((_w = this.properties) == null ? void 0 : _w.borderTopWidth)
-      style.borderTopWidth = this.properties.borderTopWidth;
-    if ((_x = this.properties) == null ? void 0 : _x.borderBottomWidth)
-      style.borderBottomWidth = this.properties.borderBottomWidth;
-    if ((_y = this.properties) == null ? void 0 : _y.borderTopLeftRadius)
-      style.borderTopLeftRadius = this.properties.borderTopLeftRadius;
-    if ((_z = this.properties) == null ? void 0 : _z.borderTopRightRadius)
-      style.borderTopRightRadius = this.properties.borderTopRightRadius;
-    if ((_A = this.properties) == null ? void 0 : _A.borderBottomLeftRadius)
-      style.borderBottomLeftRadius = this.properties.borderBottomLeftRadius;
-    if ((_B = this.properties) == null ? void 0 : _B.borderBottomRightRadius)
-      style.borderBottomRightRadius = this.properties.borderBottomRightRadius;
-    if (((_C = this.properties) == null ? void 0 : _C.borderColor) && style.borderLeftWidth) {
+    if ((_e = this.properties) == null ? void 0 : _e.margin) style.margin = this.properties.margin;
+    if ((_f = this.properties) == null ? void 0 : _f.marginLeft) style.marginLeft = this.properties.marginLeft;
+    if ((_g = this.properties) == null ? void 0 : _g.marginRight) style.marginRight = this.properties.marginRight;
+    if ((_h = this.properties) == null ? void 0 : _h.marginTop) style.marginTop = this.properties.marginTop;
+    if ((_i = this.properties) == null ? void 0 : _i.marginBottom) style.marginBottom = this.properties.marginBottom;
+    if ((_j = this.properties) == null ? void 0 : _j.padding) style.padding = this.properties.padding;
+    if ((_k = this.properties) == null ? void 0 : _k.paddingLeft) style.paddingLeft = this.properties.paddingLeft;
+    if ((_l = this.properties) == null ? void 0 : _l.paddingRight) style.paddingRight = this.properties.paddingRight;
+    if ((_m = this.properties) == null ? void 0 : _m.paddingTop) style.paddingTop = this.properties.paddingTop;
+    if ((_n = this.properties) == null ? void 0 : _n.paddingBottom) style.paddingBottom = this.properties.paddingBottom;
+    if ((_o = this.properties) == null ? void 0 : _o.left) style.left = this.properties.left;
+    if ((_p = this.properties) == null ? void 0 : _p.right) style.right = this.properties.right;
+    if ((_q = this.properties) == null ? void 0 : _q.top) style.top = this.properties.top;
+    if ((_r = this.properties) == null ? void 0 : _r.bottom) style.bottom = this.properties.bottom;
+    if ((_s = this.properties) == null ? void 0 : _s.width) style.width = this.properties.width;
+    if ((_t = this.properties) == null ? void 0 : _t.height) style.height = this.properties.height;
+    if ((_u = this.properties) == null ? void 0 : _u.maxWidth) style.width = this.properties.maxWidth;
+    if ((_v = this.properties) == null ? void 0 : _v.maxHeight) style.height = this.properties.maxHeight;
+    if ((_w = this.properties) == null ? void 0 : _w.minWidth) style.width = this.properties.minWidth;
+    if ((_x = this.properties) == null ? void 0 : _x.minHeight) style.height = this.properties.minHeight;
+    if ((_y = this.properties) == null ? void 0 : _y.textAlign) style.textAlign = this.properties.textAlign;
+    if ((_z = this.properties) == null ? void 0 : _z.backgroundColor) style.backgroundColor = this.properties.backgroundColor;
+    if ((_A = this.properties) == null ? void 0 : _A.borderLeftWidth) style.borderLeftWidth = this.properties.borderLeftWidth;
+    if ((_B = this.properties) == null ? void 0 : _B.borderRightWidth) style.borderRightWidth = this.properties.borderRightWidth;
+    if ((_C = this.properties) == null ? void 0 : _C.borderTopWidth) style.borderTopWidth = this.properties.borderTopWidth;
+    if ((_D = this.properties) == null ? void 0 : _D.borderBottomWidth) style.borderBottomWidth = this.properties.borderBottomWidth;
+    if ((_E = this.properties) == null ? void 0 : _E.borderTopLeftRadius) style.borderTopLeftRadius = this.properties.borderTopLeftRadius;
+    if ((_F = this.properties) == null ? void 0 : _F.borderTopRightRadius) style.borderTopRightRadius = this.properties.borderTopRightRadius;
+    if ((_G = this.properties) == null ? void 0 : _G.borderBottomLeftRadius) style.borderBottomLeftRadius = this.properties.borderBottomLeftRadius;
+    if ((_H = this.properties) == null ? void 0 : _H.borderBottomRightRadius) style.borderBottomRightRadius = this.properties.borderBottomRightRadius;
+    if (((_I = this.properties) == null ? void 0 : _I.borderColor) && style.borderLeftWidth) {
       style.borderLeftStyle = "solid";
-      style.borderLeftColor = (_D = this.properties) == null ? void 0 : _D.borderColor;
+      style.borderLeftColor = (_J = this.properties) == null ? void 0 : _J.borderColor;
     }
-    if (((_E = this.properties) == null ? void 0 : _E.borderColor) && style.borderRightWidth) {
+    if (((_K = this.properties) == null ? void 0 : _K.borderColor) && style.borderRightWidth) {
       style.borderRightStyle = "solid";
-      style.borderRightColor = (_F = this.properties) == null ? void 0 : _F.borderColor;
+      style.borderRightColor = (_L = this.properties) == null ? void 0 : _L.borderColor;
     }
-    if (((_G = this.properties) == null ? void 0 : _G.borderColor) && style.borderTopWidth) {
+    if (((_M = this.properties) == null ? void 0 : _M.borderColor) && style.borderTopWidth) {
       style.borderTopStyle = "solid";
-      style.borderTopColor = (_H = this.properties) == null ? void 0 : _H.borderColor;
+      style.borderTopColor = (_N = this.properties) == null ? void 0 : _N.borderColor;
     }
-    if (((_I = this.properties) == null ? void 0 : _I.borderColor) && style.borderBottomWidth) {
+    if (((_O = this.properties) == null ? void 0 : _O.borderColor) && style.borderBottomWidth) {
       style.borderBottomStyle = "solid";
-      style.borderBottomColor = (_J = this.properties) == null ? void 0 : _J.borderColor;
+      style.borderBottomColor = (_P = this.properties) == null ? void 0 : _P.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() {
@@ -6834,47 +6844,43 @@ let Model$1 = class Model {
     this.rootPart = ref(new RootPart());
   }
 };
-const _hoisted_1$8$1 = ["data-model-id"];
-const _hoisted_2$5$1 = {
-  key: 1,
-  class: "pb-nested-widget"
-};
-const _sfc_main$a$1 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$b$1 = ["data-part-id"];
+const _sfc_main$c$1 = /* @__PURE__ */ defineComponent({
   __name: "PbWidget",
   props: {
     part: {}
   },
   setup(__props) {
     const props = __props;
-    const classNames = computed(() => props.part.getClassNames());
-    const properties = computed(() => ({ style: props.part.getStyles() }));
+    const className = computed(() => getPartClassName(props.part));
+    const styleTag = computed(() => props.part.getStyleTag());
+    const style = computed(() => ({
+      ...props.part.getStyles(),
+      ...props.part.getInlineStyles()
+    }));
     const thisComponent = computed(() => createPartComponent(props.part));
-    const childComponents = computed(() => createPartComponents(props.part.children));
     return (_ctx, _cache) => {
-      var _a;
-      return openBlock(), createElementBlock("div", 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 ? (openBlock(), createBlock$1(resolveDynamicComponent(thisComponent.value), {
+      return openBlock(), createElementBlock(Fragment, null, [
+        styleTag.value ? (openBlock(), createBlock$1(resolveDynamicComponent("style"), {
           key: 0,
-          part: _ctx.part
-        }, null, 8, ["part"])) : createCommentVNode("", true),
-        childComponents.value && childComponents.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$5$1, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(childComponents.value, (child) => {
-            return openBlock(), createBlock$1(resolveDynamicComponent(child.component), {
-              key: child.part.partId,
-              part: child.part
-            }, null, 8, ["part"]);
-          }), 128))
-        ])) : createCommentVNode("", true)
-      ], 16, _hoisted_1$8$1);
+          innerHTML: styleTag.value
+        }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass([className.value, "pb-widget"]),
+          "data-part-id": _ctx.part.partId,
+          style: normalizeStyle(style.value)
+        }, [
+          thisComponent.value ? (openBlock(), createBlock$1(resolveDynamicComponent(thisComponent.value), {
+            key: 0,
+            part: _ctx.part
+          }, null, 8, ["part"])) : createCommentVNode("", true)
+        ], 14, _hoisted_1$b$1)
+      ], 64);
     };
   }
 });
-const _hoisted_1$7$1 = ["data-model-id"];
-const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$a$1 = ["data-part-id"];
+const _sfc_main$b$1 = /* @__PURE__ */ defineComponent({
   __name: "PbBlock",
   props: {
     part: {}
@@ -6882,50 +6888,57 @@ const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const classNames = computed(() => props.part.getClassNames());
-    const properties = computed(() => ({ style: props.part.getStyles() }));
+    const styleTag = computed(() => props.part.getStyleTag());
+    const style = computed(() => ({
+      ...props.part.getStyles(),
+      ...props.part.getInlineStyles()
+    }));
     computed(() => createPartComponents(props.part.children));
     return (_ctx, _cache) => {
-      var _a;
-      return openBlock(), createElementBlock("div", mergeProps({
-        class: [classNames.value, "pb-block"],
-        "data-model-id": _ctx.part.partId,
-        style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
-      }, properties.value), [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.part.children, (child) => {
-          return openBlock(), createBlock$1(_sfc_main$a$1, {
-            key: child.partId,
-            part: child
-          }, null, 8, ["part"]);
-        }), 128))
-      ], 16, _hoisted_1$7$1);
+      return openBlock(), createElementBlock(Fragment, null, [
+        styleTag.value ? (openBlock(), createBlock$1(resolveDynamicComponent("style"), {
+          key: 0,
+          innerHTML: styleTag.value
+        }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass([classNames.value, "pb-block"]),
+          "data-part-id": _ctx.part.partId,
+          style: normalizeStyle(style.value)
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.part.children, (child) => {
+            return openBlock(), createBlock$1(_sfc_main$c$1, {
+              key: child.partId,
+              part: child
+            }, null, 8, ["part"]);
+          }), 128))
+        ], 14, _hoisted_1$a$1)
+      ], 64);
     };
   }
 });
-const _hoisted_1$6$1 = { class: "pb-block" };
-const _hoisted_2$4$1 = /* @__PURE__ */ createElementVNode("div", {
-  class: "pb-widget",
-  style: { "margin": "0 auto" }
-}, [
-  /* @__PURE__ */ createElementVNode("div", { class: "pb-login-widget" }, [
-    /* @__PURE__ */ createElementVNode("h3", null, "Login Design Part")
-  ])
-], -1);
-const _hoisted_3$4$1 = [
-  _hoisted_2$4$1
-];
-const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$9$1 = { class: "pb-block" };
+const _sfc_main$a$1 = /* @__PURE__ */ defineComponent({
   __name: "PbLoginDepart",
   props: {
     part: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$6$1, _hoisted_3$4$1);
+      return openBlock(), createElementBlock("div", _hoisted_1$9$1, _cache[0] || (_cache[0] = [
+        createElementVNode("div", {
+          class: "pb-widget",
+          style: { "margin": "0 auto" }
+        }, [
+          createElementVNode("div", { class: "pb-login-widget" }, [
+            createElementVNode("h3", null, "Login Design Part")
+          ])
+        ], -1)
+      ]));
     };
   }
 });
-const _hoisted_1$5$1 = ["data-model-id"];
-const _sfc_main$7$1 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$8$1 = ["data-part-id"];
+const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
   __name: "PbSection",
   props: {
     part: {}
@@ -6933,65 +6946,91 @@ const _sfc_main$7$1 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const classNames = computed(() => props.part.getClassNames());
-    const properties = computed(() => ({ style: props.part.getStyles() }));
+    const styleTag = computed(() => props.part.getStyleTag());
+    const style = computed(() => ({
+      ...props.part.getStyles(),
+      ...props.part.getInlineStyles()
+    }));
     return (_ctx, _cache) => {
-      var _a, _b;
-      return openBlock(), createElementBlock("div", 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" ? (openBlock(), createBlock$1(_sfc_main$8$1, {
+      var _a;
+      return openBlock(), createElementBlock(Fragment, null, [
+        styleTag.value ? (openBlock(), createBlock$1(resolveDynamicComponent("style"), {
           key: 0,
-          part: _ctx.part
-        }, null, 8, ["part"])) : _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.part.children, (block) => {
-          return openBlock(), createBlock$1(_sfc_main$9$1, {
-            key: block.partId,
-            part: block
-          }, null, 8, ["part"]);
-        }), 128)) : createCommentVNode("", true)
-      ], 16, _hoisted_1$5$1);
+          innerHTML: styleTag.value
+        }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass([classNames.value, "pb-section"]),
+          "data-part-id": _ctx.part.partId,
+          style: normalizeStyle(style.value)
+        }, [
+          ((_a = _ctx.part.properties) == null ? void 0 : _a.name) === "Login Design Part" ? (openBlock(), createBlock$1(_sfc_main$a$1, {
+            key: 0,
+            part: _ctx.part
+          }, null, 8, ["part"])) : _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.part.children, (block) => {
+            return openBlock(), createBlock$1(_sfc_main$b$1, {
+              key: block.partId,
+              part: block
+            }, null, 8, ["part"]);
+          }), 128)) : createCommentVNode("", true)
+        ], 14, _hoisted_1$8$1)
+      ], 64);
     };
   }
 });
-const _hoisted_1$4$1 = { class: "pb-image-widget" };
-const _hoisted_2$3$1 = ["src"];
-const _hoisted_3$3$1 = {
+const _hoisted_1$7$1 = ["alt", "src"];
+const _hoisted_2$4$1 = {
   key: 1,
   class: "placeholder"
 };
-const _hoisted_4$d = /* @__PURE__ */ createElementVNode("span", { class: "font-icon" }, "image", -1);
-const _hoisted_5$6 = [
-  _hoisted_4$d
-];
-const _sfc_main$6$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
   __name: "PbImageWidget",
   props: {
     part: {},
     placeholder: { type: Boolean }
   },
   setup(__props) {
+    const props = __props;
+    const pageBuilder = usePageBuilder();
+    const altText = computed(() => {
+      var _a;
+      const media = (_a = props.part.properties) == null ? void 0 : _a.media;
+      if (media && media.altText) {
+        const locale = pageBuilder.getLocale();
+        return media.altText[locale] || "";
+      }
+      return "";
+    });
+    const style = computed(() => {
+      var _a;
+      const media = (_a = props.part.properties) == null ? void 0 : _a.media;
+      if (media.width && media.height) {
+        return {
+          aspectRatio: media.width / media.height
+        };
+      }
+      return {};
+    });
     return (_ctx, _cache) => {
       var _a, _b;
-      return openBlock(), createElementBlock("div", _hoisted_1$4$1, [
-        ((_a = _ctx.part.properties) == null ? void 0 : _a.image) ? (openBlock(), createElementBlock("img", {
-          key: 0,
-          src: (_b = _ctx.part.properties) == null ? void 0 : _b.image,
-          alt: "",
-          class: "image"
-        }, null, 8, _hoisted_2$3$1)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_3$3$1, _hoisted_5$6)) : createCommentVNode("", true)
-      ]);
+      return ((_a = _ctx.part.properties) == null ? void 0 : _a.media) ? (openBlock(), createElementBlock("img", {
+        key: 0,
+        alt: altText.value,
+        src: ((_b = _ctx.part.properties) == null ? void 0 : _b.media).url,
+        style: normalizeStyle(style.value),
+        class: "image"
+      }, null, 12, _hoisted_1$7$1)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_2$4$1, _cache[0] || (_cache[0] = [
+        createElementVNode("span", { class: "font-icon" }, "image", -1)
+      ]))) : createCommentVNode("", true);
     };
   }
 });
-const _hoisted_1$3$1 = { class: "pb-text-widget" };
-const _hoisted_2$2$1 = ["textContent"];
-const _hoisted_3$2$1 = {
+const _hoisted_1$6$1 = ["textContent"];
+const _hoisted_2$3$1 = {
   key: 1,
   class: "placeholder",
   textContent: "Empty Text"
 };
-const _sfc_main$5$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7$1 = /* @__PURE__ */ defineComponent({
   __name: "PbTextWidget",
   props: {
     part: {},
@@ -7012,34 +7051,31 @@ const _sfc_main$5$1 = /* @__PURE__ */ defineComponent({
       }
     });
     const style = 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
-        }
+        fontSize: (_a = props.part.properties) == null ? void 0 : _a.fontSize,
+        fontWeight: (_b = props.part.properties) == null ? void 0 : _b.fontWeight,
+        textAlign: (_c = props.part.properties) == null ? void 0 : _c.textAlign,
+        color: (_d = props.part.properties) == null ? void 0 : _d.color
       };
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$3$1, [
-        text.value ? (openBlock(), createElementBlock("div", mergeProps({
-          key: 0,
-          class: "text"
-        }, style.value, {
-          textContent: toDisplayString(text.value)
-        }), null, 16, _hoisted_2$2$1)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_3$2$1)) : createCommentVNode("", true)
-      ]);
+      return text.value ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        style: normalizeStyle(style.value),
+        class: "text",
+        textContent: toDisplayString(text.value)
+      }, null, 12, _hoisted_1$6$1)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_2$3$1)) : createCommentVNode("", true);
     };
   }
 });
-const _hoisted_1$2$1 = { class: "pb-html-widget" };
-const _hoisted_2$1$1 = ["innerHTML"];
-const _hoisted_3$1$1 = {
+const _hoisted_1$5$1 = ["innerHTML"];
+const _hoisted_2$2$1 = {
   key: 1,
   class: "placeholder",
   textContent: "Empty HTML"
 };
-const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6$1 = /* @__PURE__ */ defineComponent({
   __name: "PbHtmlWidget",
   props: {
     part: {},
@@ -7049,11 +7085,9 @@ const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const pageBuilder = usePageBuilder();
     const getHtml = (html2) => {
-      if (!html2)
-        return;
-      if (typeof html2 !== "object")
-        return;
-      const locale = pageBuilder.locale.value;
+      if (!html2) return;
+      if (typeof html2 !== "object") return;
+      const locale = pageBuilder.getLocale();
       let _html = html2[locale];
       if (!_html && html2.tags) {
         _html = html2;
@@ -7070,26 +7104,22 @@ ${_html.style}
       var _a;
       return getHtml((_a = props.part.properties) == null ? void 0 : _a.html);
     });
-    computed(() => props.placeholder ? !html.value : false);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$2$1, [
-        html.value ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          class: "html",
-          innerHTML: html.value
-        }, null, 8, _hoisted_2$1$1)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_3$1$1)) : createCommentVNode("", true)
-      ]);
+      return html.value ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: "html",
+        innerHTML: html.value
+      }, null, 8, _hoisted_1$5$1)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_2$2$1)) : createCommentVNode("", true);
     };
   }
 });
-const _hoisted_1$1$1 = { class: "pb-iframe-widget" };
-const _hoisted_2$j = ["src"];
-const _hoisted_3$g = {
+const _hoisted_1$4$1 = ["src"];
+const _hoisted_2$1$1 = {
   key: 1,
   class: "placeholder",
   textContent: "Empty URL"
 };
-const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5$1 = /* @__PURE__ */ defineComponent({
   __name: "PbIframeWidget",
   props: {
     part: {},
@@ -7101,21 +7131,18 @@ const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
     const url = computed(() => {
       var _a;
       const url2 = (_a = props.part.properties) == null ? void 0 : _a.url;
-      if (!url2)
-        return;
-      if (typeof url2 !== "object")
-        return;
+      if (!url2) return;
+      if (typeof url2 !== "object") return;
       const locale = pageBuilder.getLocale();
       return url2[locale];
     });
     const style = computed(() => ({
-      style: {
-        width: "100%",
-        height: `${height.value}px`
-      }
+      width: "100%",
+      height: `${height.value}px`
     }));
     const height = ref(200);
     const updateHeight = (event) => {
+      console.log(event);
       if (event.data && event.data.height) {
         height.value = event.data.height;
       }
@@ -7127,12 +7154,40 @@ const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
       window.removeEventListener("message", updateHeight);
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$1$1, [
-        url.value ? (openBlock(), createElementBlock("iframe", mergeProps({
-          key: 0,
-          src: url.value
-        }, style.value), null, 16, _hoisted_2$j)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_3$g)) : createCommentVNode("", true)
-      ]);
+      return url.value ? (openBlock(), createElementBlock("iframe", {
+        key: 0,
+        src: url.value,
+        style: normalizeStyle(style.value)
+      }, null, 12, _hoisted_1$4$1)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_2$1$1)) : createCommentVNode("", true);
+    };
+  }
+});
+const _hoisted_1$3$1 = {
+  key: 1,
+  class: "placeholder"
+};
+const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
+  __name: "PbYoutubeWidget",
+  props: {
+    part: {},
+    placeholder: { type: Boolean }
+  },
+  setup(__props) {
+    const onReady = () => {
+    };
+    return (_ctx, _cache) => {
+      var _a, _b;
+      return ((_a = _ctx.part.properties) == null ? void 0 : _a.url) ? (openBlock(), createBlock$1(unref(YouTube), {
+        key: 0,
+        ref: "youtube",
+        src: ((_b = _ctx.part.properties) == null ? void 0 : _b.url) || "",
+        class: "youtube",
+        height: "100%",
+        width: "100%",
+        onReady
+      }, null, 8, ["src"])) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_1$3$1, _cache[0] || (_cache[0] = [
+        createElementVNode("span", { class: "font-icon" }, "live_tv", -1)
+      ]))) : createCommentVNode("", true);
     };
   }
 });
@@ -7140,32 +7195,50 @@ const defaultPartDefinitions = {
   "Section": {
     partType: "Section",
     partName: "Section",
-    creator: () => _sfc_main$7$1
+    className: "pb-section",
+    creator: () => _sfc_main$9$1
   },
   "Block": {
     partType: "Block",
     partName: "Block",
-    creator: () => _sfc_main$9$1
+    className: "pb-block",
+    creator: () => _sfc_main$b$1
   },
   "TextWidget": {
     partType: "Widget",
     partName: "TextWidget",
-    creator: () => _sfc_main$5$1
+    className: "pb-text-widget",
+    creator: () => _sfc_main$7$1
   },
   "ImageWidget": {
     partType: "Widget",
     partName: "ImageWidget",
-    creator: () => _sfc_main$6$1
+    className: "pb-image-widget",
+    creator: () => _sfc_main$8$1
   },
   "HtmlWidget": {
     partType: "Widget",
     partName: "HtmlWidget",
-    creator: () => _sfc_main$4$1
+    className: "pb-html-widget",
+    creator: () => _sfc_main$6$1
   },
   "IframeWidget": {
     partType: "Widget",
     partName: "IframeWidget",
-    creator: () => _sfc_main$3$1
+    className: "pb-iframe-widget",
+    creator: () => _sfc_main$5$1
+  },
+  "YoutubeWidget": {
+    partType: "Widget",
+    partName: "YoutubeWidget",
+    className: "pb-youtube-widget",
+    creator: () => _sfc_main$4$1
+  },
+  "ContainerWidget": {
+    partType: "Widget",
+    partName: "ContainerWidget",
+    className: "pb-container-widget",
+    creator: () => _sfc_main$4$1
   }
 };
 const PAGE_BUILDER_KEY = "PageBuilder";
@@ -7177,6 +7250,8 @@ class PageBuilderViewerImpl {
     __publicField2(this, "locale", ref("en"));
     __publicField2(this, "watchers", {});
     __publicField2(this, "providers", {});
+    __publicField2(this, "externalCssLinks", []);
+    __publicField2(this, "externalCssContent", "");
     this.model = new Model$1();
   }
   getLocale() {
@@ -7190,7 +7265,7 @@ class PageBuilderViewerImpl {
       plugin.widgets.forEach((v) => {
         const w = { ...v };
         w.partType = "Widget";
-        w.creator = () => _sfc_main$p;
+        w.creator = () => _sfc_main$q;
         partDefinitions$1[v.partName] = w;
       });
     }
@@ -7200,23 +7275,27 @@ class PageBuilderViewerImpl {
     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];
-    if (!def || !def.dataWatcher)
-      return false;
+    if (!def || !def.dataWatcher) return false;
     const watcher = this.watchers[def.dataWatcher];
-    if (!watcher)
-      return false;
+    if (!watcher) return false;
     return watcher(part.properties);
   }
   provideCustomWidgetData(part) {
     const def = partDefinitions$1[part.partName];
-    if (!def || !def.dataProvider)
-      return Promise.resolve();
+    if (!def || !def.dataProvider) return Promise.resolve();
     const provider = this.providers[def.dataProvider];
-    if (!provider)
-      return Promise.resolve();
+    if (!provider) return Promise.resolve();
     return provider(part.properties);
   }
   render(data) {
@@ -7236,15 +7315,13 @@ class PageBuilderViewerImpl {
   }
   parsePartContent(partContent) {
     const part = this.createPart(partContent.partType);
-    if (!part)
-      return;
+    if (!part) return;
     part.partType = partContent.partType;
     part.partName = partContent.partName;
     part.properties = partContent.properties ? JSON.parse(JSON.stringify(partContent.properties)) : null;
     part.children = (partContent.children || []).map((child) => {
       const childPart = this.parsePartContent(child);
-      if (childPart)
-        childPart.parent = part;
+      if (childPart) childPart.parent = part;
       return childPart;
     }).filter((part2) => !!part2);
     return part;
@@ -7269,6 +7346,10 @@ class PageBuilderViewerImpl {
       return def.component;
     }
   }
+  getExternalCss() {
+    return `${this.externalCssLinks}
+    <style>${this.externalCssContent}</style>`;
+  }
 }
 const createPageBuilderViewer = () => {
   const viewer = new PageBuilderViewerImpl();
@@ -7282,14 +7363,12 @@ const providePageBuilderViewer = (pageBuilderViewer) => {
 };
 const usePageBuilder = () => {
   const pageBuilder = inject(PAGE_BUILDER_KEY);
-  if (!pageBuilder)
-    throw Error("PageBuilder not found");
+  if (!pageBuilder) throw Error("PageBuilder not found");
   return pageBuilder;
 };
 const usePageBuilderViewer = () => {
   const pageBuilderViewer = inject(PAGE_BUILDER_VIEWER_KEY);
-  if (!pageBuilderViewer)
-    throw Error("PageBuilderViewer not found");
+  if (!pageBuilderViewer) throw Error("PageBuilderViewer not found");
   return pageBuilderViewer;
 };
 const createPartComponents = (parts) => {
@@ -7306,38 +7385,62 @@ const createPartComponent = (part) => {
     }
   }
 };
+const getPartClassName = (part) => {
+  if (part) {
+    const def = getPartDefinition(part.partName);
+    if (def) {
+      return def.className;
+    }
+  }
+};
 const getPartDefinition = (partName) => partDefinitions$1[partName];
-const _sfc_main$2$1 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$2$1 = ["data-part-id"];
+const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
   __name: "PbPage",
   props: {
-    page: {},
+    part: {},
     isMobilePage: { type: Boolean }
   },
   setup(__props) {
-    const properties = computed(() => ({
-      style: {
-        // styles here
-      }
+    const props = __props;
+    const classNames = computed(() => {
+      var _a;
+      return `${(_a = props.part) == null ? void 0 : _a.getClassNames()} ${props.isMobilePage ? "mobile" : "pc"}`;
+    });
+    const styleTag = computed(() => props.part.getStyleTag());
+    const style = computed(() => ({
+      ...props.part.getStyles(),
+      ...props.part.getInlineStyles()
     }));
     return (_ctx, _cache) => {
-      var _a;
-      return openBlock(), createElementBlock("div", mergeProps({ class: "pb-page" }, properties.value), [
+      return openBlock(), createElementBlock(Fragment, null, [
+        styleTag.value ? (openBlock(), createBlock$1(resolveDynamicComponent("style"), {
+          key: 0,
+          innerHTML: styleTag.value
+        }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
         createElementVNode("div", {
-          class: normalizeClass([[_ctx.isMobilePage ? "mobile" : "pc"], "pb-page-content"])
+          class: normalizeClass([classNames.value, "pb-page"]),
+          "data-part-id": _ctx.part.partId,
+          style: normalizeStyle(style.value)
         }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList((_a = _ctx.page) == null ? void 0 : _a.children, (section) => {
-            return openBlock(), createBlock$1(_sfc_main$7$1, {
-              key: section.partId,
-              part: section
-            }, null, 8, ["part"]);
-          }), 128))
-        ], 2)
-      ], 16);
+          createElementVNode("div", {
+            class: normalizeClass([[_ctx.isMobilePage ? "mobile" : "pc"], "pb-page-content"])
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.part.children, (section) => {
+              return openBlock(), createBlock$1(_sfc_main$9$1, {
+                key: section.partId,
+                part: section
+              }, null, 8, ["part"]);
+            }), 128))
+          ], 2)
+        ], 14, _hoisted_1$2$1)
+      ], 64);
     };
   }
 });
-const _hoisted_1$t = { class: "pb-viewer" };
-const _sfc_main$1$1 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$1$1 = ["innerHTML"];
+const _hoisted_2$g = { class: "pb-viewer" };
+const _sfc_main$2$1 = /* @__PURE__ */ defineComponent({
   __name: "PageBuilderViewer",
   props: {
     pageContent: {},
@@ -7347,46 +7450,77 @@ const _sfc_main$1$1 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const pageBuilderViewer = createPageBuilderViewer();
-    pageBuilderViewer.setLocale(props.locale);
-    if (props.plugin)
-      pageBuilderViewer.registerCustomPlugin(props.plugin);
-    providePageBuilderViewer(pageBuilderViewer);
-    providePageBuilder(pageBuilderViewer);
-    const page = computed(() => {
-      const pages = pageBuilderViewer.model.rootPart.value.children;
-      if (!pages || !pages.length)
-        return;
-      return pages[pages.length === 1 || props.isMobilePage ? 0 : 1];
+    const viewer = createPageBuilderViewer();
+    viewer.setLocale(props.locale);
+    if (props.plugin) viewer.registerCustomPlugin(props.plugin);
+    providePageBuilderViewer(viewer);
+    providePageBuilder(viewer);
+    const externalCss = viewer.getExternalCss();
+    const part = computed(() => {
+      const parts = viewer.model.rootPart.value.children;
+      if (!parts || !parts.length) return;
+      return parts[parts.length === 1 || props.isMobilePage ? 0 : 1];
     });
     onMounted(() => {
       if (props.pageContent) {
-        pageBuilderViewer.render(props.pageContent);
+        viewer.render(props.pageContent);
       }
     });
     watch(
       () => props.pageContent,
       (pageContent) => {
         if (pageContent) {
-          pageBuilderViewer.render(pageContent);
+          viewer.render(pageContent);
         }
       }
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$t, [
-        page.value ? (openBlock(), createBlock$1(_sfc_main$2$1, {
+      return openBlock(), createElementBlock(Fragment, null, [
+        unref(externalCss) ? (openBlock(), createElementBlock("div", {
           key: 0,
-          "is-mobile-page": _ctx.isMobilePage,
-          page: page.value
-        }, null, 8, ["is-mobile-page", "page"])) : createCommentVNode("", true)
-      ]);
+          innerHTML: unref(externalCss)
+        }, null, 8, _hoisted_1$1$1)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2$g, [
+          part.value ? (openBlock(), createBlock$1(_sfc_main$3$1, {
+            key: 0,
+            "is-mobile-page": _ctx.isMobilePage,
+            part: part.value
+          }, null, 8, ["is-mobile-page", "part"])) : createCommentVNode("", true)
+        ])
+      ], 64);
+    };
+  }
+});
+const _hoisted_1$t = {
+  key: 1,
+  class: "placeholder",
+  textContent: "Empty Widget"
+};
+const _sfc_main$1$1 = /* @__PURE__ */ defineComponent({
+  __name: "PbContainerWidget",
+  props: {
+    part: {},
+    placeholder: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    usePageBuilder();
+    const childComponents = computed(() => createPartComponents(props.part.children));
+    return (_ctx, _cache) => {
+      return childComponents.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(childComponents.value, (child) => {
+        return openBlock(), createBlock$1(resolveDynamicComponent(child.component), {
+          key: child.part.partId,
+          part: child.part
+        }, null, 8, ["part"]);
+      }), 128)) : _ctx.placeholder ? (openBlock(), createElementBlock("div", _hoisted_1$t)) : createCommentVNode("", true);
     };
   }
 });
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "PbCustomWidget",
   props: {
     part: {},
+    placeholder: { type: Boolean },
     dataWatcher: { type: Function },
     dataProvider: { type: Function }
   },
@@ -7397,8 +7531,8 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     const data = ref({});
     const bind = computed(() => ({
       ...props.part.properties || {},
-      placeholder: true,
-      ...data.value || {}
+      ...data.value || {},
+      placeholder: props.placeholder
     }));
     const updateData = async () => {
       data.value = await pageBuilder.provideCustomWidgetData(props.part);
@@ -7427,25 +7561,21 @@ const shortUniqueId = new ShortUniqueId({
 });
 const getNewPartId = () => shortUniqueId.rnd();
 const findPartById = (part, partId) => {
-  if (part.partId === partId)
-    return part;
+  if (part.partId === partId) return part;
   if (part.children) {
     for (const child of part.children) {
       const found = findPartById(child, partId);
-      if (found)
-        return found;
+      if (found) return found;
     }
   }
 };
 const findElementById = (element, partId) => {
-  if (element.getAttribute(PART_ID_KEY) === partId)
-    return element;
+  if (element.getAttribute(PART_ID_KEY) === partId) return element;
   let child = element.firstChild;
   while (child) {
     if (child instanceof YXmlElement) {
       const found = findElementById(child, partId);
-      if (found)
-        return found;
+      if (found) return found;
     }
     child = child.nextSibling;
   }
@@ -7485,8 +7615,7 @@ const partsFromJsonString = (jsonString, keepPartId = false) => {
 };
 const partFromJsonObject = (object, keepPartId = false) => {
   const part = createPart(object.partType, object.partName);
-  if (!part)
-    return;
+  if (!part) return;
   if (keepPartId && object.partId) {
     part.partId = object.partId;
   }
@@ -7527,8 +7656,7 @@ const syncPart = (part, element) => {
 const syncProperties = (part, element) => {
   const attrs = element.getAttributes();
   if (attrs) {
-    if (!part.properties)
-      part.properties = {};
+    if (!part.properties) part.properties = {};
     for (const name in attrs) {
       if (!RESERVED_ATTRIBUTES.includes(name)) {
         const value = attrs[name];
@@ -7545,8 +7673,7 @@ const syncProperties = (part, element) => {
       }
     }
     for (const name in part.properties) {
-      if (!attrs[name] && !attrs[`${name}.object`])
-        delete part.properties[name];
+      if (!attrs[name] && !attrs[`${name}.object`]) delete part.properties[name];
     }
     if (Object.keys(part.properties).length === 0) {
       part.properties = void 0;
@@ -7559,8 +7686,7 @@ const syncChildren = (part, element) => {
   const elementChildren = [];
   let elementChild = element.firstChild;
   while (elementChild) {
-    if (elementChild instanceof YXmlElement)
-      elementChildren.push(elementChild);
+    if (elementChild instanceof YXmlElement) elementChildren.push(elementChild);
     elementChild = elementChild.nextSibling;
   }
   if (elementChildren.length === 0) {
@@ -7599,11 +7725,9 @@ const createPart = (partType, partName, properties) => {
       part = new Widget();
       break;
   }
-  if (!part)
-    return;
+  if (!part) return;
   part.partName = partName;
-  if (!properties)
-    return part;
+  if (!properties) return part;
   part.properties = {};
   for (const name in properties) {
     if (!RESERVED_ATTRIBUTES.includes(name)) {
@@ -7613,15 +7737,12 @@ const createPart = (partType, partName, properties) => {
   return part;
 };
 const createPartWithElement = (element) => {
-  if (!element)
-    return;
+  if (!element) return;
   const partType = element.nodeName;
   const partName = element.getAttribute(PART_NAME_KEY);
-  if (!partName)
-    return;
+  if (!partName) return;
   const part = createPart(partType, partName);
-  if (!part)
-    return;
+  if (!part) return;
   part.partId = element.getAttribute(PART_ID_KEY) || "";
   return part;
 };
@@ -7660,19 +7781,15 @@ class Model2 {
   }
   getRootPartId() {
     const partId = this.yjsRoot.getAttribute(PART_ID_KEY);
-    if (!partId)
-      throw new Error("root id not found");
+    if (!partId) throw new Error("root id not found");
     return partId;
   }
   updateModel(param) {
     const result = {};
     this.yjsDoc.transact(() => {
-      if (param.delete)
-        result.deleted = this.deleteParts(param.delete);
-      if (param.insert)
-        result.inserted = this.insertParts(param.insert);
-      if (param.update)
-        result.updated = this.updateParts(param.update);
+      if (param.delete) result.deleted = this.deleteParts(param.delete);
+      if (param.insert) result.inserted = this.insertParts(param.insert);
+      if (param.update) result.updated = this.updateParts(param.update);
     });
     this.undoManager.stopCapturing();
     PageBuilderEditorEvent.emit.modelUpdatedByUI(result);
@@ -7703,11 +7820,9 @@ class Model2 {
   }
   parseModel(json, keepPartId = false) {
     const root = JSON.parse(json);
-    if (root.partType !== ROOT_TYPE)
-      throw Error("Invalid data format");
+    if (root.partType !== ROOT_TYPE) throw Error("Invalid data format");
     const rootPart = partFromJsonObject(root, keepPartId);
-    if (!rootPart)
-      throw new Error("Invalid data format");
+    if (!rootPart) throw new Error("Invalid data format");
     return rootPart;
   }
   serializeParts(partIds) {
@@ -7719,14 +7834,12 @@ class Model2 {
   }
   moveElements(partId, destPartId, destIndex, update, doNotChangeIndex) {
     var _a;
-    if (partId === destPartId)
-      return;
+    if (partId === destPartId) return;
     const element = findElementById(this.yjsRoot, partId);
     if (element) {
       if (((_a = element.parent) == null ? void 0 : _a.getAttribute(PART_ID_KEY)) === destPartId) {
         const index = this.getIndexOfElement(element);
-        if (!doNotChangeIndex && index !== void 0 && index < destIndex)
-          destIndex--;
+        if (!doNotChangeIndex && index !== void 0 && index < destIndex) destIndex--;
       }
       const parts = this.findPartsByIds([partId]);
       const param = {
@@ -7746,8 +7859,7 @@ class Model2 {
   isMobilePart(part) {
     let curPart = part;
     while (curPart) {
-      if (curPart.isPage() && this.rootPart.children && this.rootPart.children[0] === curPart)
-        return true;
+      if (curPart.isPage() && this.rootPart.children && this.rootPart.children[0] === curPart) return true;
       curPart = curPart.parent;
     }
     return false;
@@ -7755,8 +7867,7 @@ class Model2 {
   isPcPart(part) {
     let curPart = part;
     while (curPart) {
-      if (curPart.isPage() && this.rootPart.children && this.rootPart.children[1] === curPart)
-        return true;
+      if (curPart.isPage() && this.rootPart.children && this.rootPart.children[1] === curPart) return true;
       curPart = curPart.parent;
     }
     return false;
@@ -7844,19 +7955,16 @@ class Model2 {
   }
   getElementAttribute(node, name) {
     let value = node.getAttribute(name);
-    if (value)
-      return value;
+    if (value) return value;
     value = node.getAttribute(`${name}.object`);
-    if (value)
-      return JSON.parse(value);
+    if (value) return JSON.parse(value);
   }
   getIndexOfElement(element) {
     if (element.parent instanceof YXmlElement) {
       let index = 0;
       let child = element.parent.firstChild;
       while (child) {
-        if (element === child)
-          return index;
+        if (element === child) return index;
         child = child.nextSibling;
         ++index;
       }
@@ -7917,8 +8025,7 @@ class PartManager {
   }
   getPropertyDefinition(partName, propertyName) {
     const partDef = this.getPartDefinition(partName);
-    if (!partDef || !partDef.propertyGroups)
-      return;
+    if (!partDef || !partDef.propertyGroups) return;
     for (const group of partDef.propertyGroups) {
       for (const property of group.properties) {
         if (property.propertyName === propertyName) {
@@ -7941,6 +8048,23 @@ class PartManager {
       return component ? { part, component } : void 0;
     }).filter(notNull)) || [];
   }
+  getPartClassName(part) {
+    if (part) {
+      const def = this.getPartDefinition(part.partName);
+      if (def) {
+        return def.className;
+      }
+    }
+  }
+  isChildAllowed(part) {
+    if (part) {
+      const def = this.getPartDefinition(part.partName);
+      if (def) {
+        return def.allowsChild();
+      }
+    }
+    return false;
+  }
   registerPartPropertyGroupEditors(editors) {
     for (const name in editors) {
       this.partPropertyGroupEditors.set(name, editors[name]);
@@ -8005,12 +8129,13 @@ class PartManager {
 const defaultPartPropertyEditors = () => {
   return {
     "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-Dgp_AVOD.js")),
-    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-DmM_LMjC.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-CT3vTbYY.js")),
+    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-DZA84Sn1.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-3hJVRryR.js")),
     "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-CWedbXJI.js")),
-    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-BFMkFOYX.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-BQhiQyNM.js")),
-    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-DZw8qbJH.js"))
+    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-B6yhXmGL.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-6WNkin_o.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-fgIO3jaY.js")),
+    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-DtcxO2uZ.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -8028,6 +8153,25 @@ const isCursorInElement = (event, element) => {
   const rect = element.getBoundingClientRect();
   return event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
 };
+const selectYoutubeVideo = (modal, url, callback) => {
+  modal.openModal({
+    component: defineAsyncComponent(() => import("./PbYoutubeModal-DFb6CQyW.js")),
+    style: {
+      minWidth: "500px",
+      minHeight: "400px"
+    },
+    bind: {
+      url
+    },
+    on: {
+      selectUrl: (url2) => {
+        if (callback) {
+          callback(url2);
+        }
+      }
+    }
+  });
+};
 let draggingPart;
 const vPartHandler = {
   mounted: (el, binding) => {
@@ -8056,13 +8200,10 @@ const setContextMenuHandler = (el, binding) => {
   const pageBuilder = binding.value.pageBuilder;
   const part = binding.value.part;
   el.oncontextmenu = (event) => {
-    if (event.altKey || event.ctrlKey || event.shiftKey)
-      return;
+    if (event.altKey || event.ctrlKey || event.shiftKey) return;
     const eventAny = event;
-    if (eventAny._partContextMenuHandled)
-      return;
-    else
-      eventAny._partContextMenuHandled = true;
+    if (eventAny._partContextMenuHandled) return;
+    else eventAny._partContextMenuHandled = true;
     if (!pageBuilder.context.isSelected(part)) {
       pageBuilder.context.setSelection([part]);
     }
@@ -8240,22 +8381,19 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$o = {};
+const _sfc_main$p = {};
 const _hoisted_1$s = { class: "pb-add-widget-button" };
-const _hoisted_2$i = /* @__PURE__ */ createElementVNode("span", { class: "icon material-icons-outlined" }, "add_box", -1);
-const _hoisted_3$f = /* @__PURE__ */ createElementVNode("span", { class: "text" }, "Add Widget", -1);
-const _hoisted_4$c = [
-  _hoisted_2$i,
-  _hoisted_3$f
-];
 function _sfc_render$1(_ctx, _cache) {
   return openBlock(), createElementBlock("div", _hoisted_1$s, [
     createElementVNode("button", {
       onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("add-widget", $event))
-    }, _hoisted_4$c)
+    }, _cache[1] || (_cache[1] = [
+      createElementVNode("span", { class: "icon material-icons-outlined" }, "add_box", -1),
+      createElementVNode("span", { class: "text" }, "Add Widget", -1)
+    ]))
   ]);
 }
-const PbAddWidgetButton = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$1]]);
+const PbAddWidgetButton = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$1]]);
 const MOUSE_TRACKER_KEY = "mouseTracker";
 const MOUSE_TRACKER_NOT_FOUND = "MouseTracker not found";
 class MouseTracker {
@@ -8265,11 +8403,9 @@ class MouseTracker {
   }
   capture(callback) {
     var _a;
-    if (!this.iframe.value)
-      return;
+    if (!this.iframe.value) return;
     const _document = (_a = this.iframe.value.contentWindow) == null ? void 0 : _a.document;
-    if (!_document)
-      return;
+    if (!_document) return;
     _document.addEventListener("mousemove", callback);
     _document.addEventListener("mouseup", () => _document.removeEventListener("mousemove", callback), {
       once: true
@@ -8282,16 +8418,11 @@ const provideMouseTracker = (iframe) => {
 };
 const useMouseTracker = () => {
   const mouseTracker = inject(MOUSE_TRACKER_KEY);
-  if (!mouseTracker)
-    throw Error(MOUSE_TRACKER_NOT_FOUND);
+  if (!mouseTracker) throw Error(MOUSE_TRACKER_NOT_FOUND);
   return mouseTracker;
 };
-const _hoisted_1$r = ["data-model-id", "draggable"];
-const _hoisted_2$h = {
-  key: 1,
-  class: "children"
-};
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _hoisted_1$r = ["data-part-id", "draggable"];
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "PbWidget",
   props: {
     part: {}
@@ -8301,12 +8432,11 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     const widget = ref(null);
     const draggable = ref(true);
     let dragStartX, dragStartY, initX, initY, initWidth, initHeight;
-    const _pan_mousedown = (event) => {
+    const panChild = (event) => {
       draggable.value = false;
       event.stopPropagation();
       event.preventDefault();
-      if (!widget.value)
-        return;
+      if (!widget.value) return;
       dragStartX = event.clientX;
       dragStartY = event.clientY;
       initX = widget.value.offsetLeft;
@@ -8322,12 +8452,11 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
       props.part.properties.left = `${left}px`;
       props.part.properties.top = `${top}px`;
     };
-    const _resize_mousedown = (event) => {
+    const resizeChild = (event) => {
       draggable.value = false;
       event.stopPropagation();
       event.preventDefault();
-      if (!widget.value)
-        return;
+      if (!widget.value) return;
       const rect = widget.value.getBoundingClientRect();
       dragStartX = event.clientX;
       dragStartY = event.clientY;
@@ -8350,13 +8479,21 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     const props = __props;
     const pageBuilder = usePageBuilderEditor();
     const selected = computed(() => pageBuilder.context.isSelected(props.part));
-    const classNames = computed(() => [selected.value ? "selected" : "", props.part.getClassNames()]);
-    const properties = computed(() => {
+    const classNames = computed(() => [
+      pageBuilder.partManager.getPartClassName(props.part),
+      selected.value ? "selected" : "",
+      props.part.getClassNames()
+    ]);
+    const styleTag = computed(() => props.part.getStyleTag());
+    const style = computed(() => {
       var _a, _b, _c, _d;
-      let style = props.part.getStyles();
+      let style2 = {
+        ...props.part.getStyles(),
+        ...props.part.getInlineStyles() || {}
+      };
       if (props.part.isNestedWidget()) {
-        style = {
-          ...style,
+        style2 = {
+          ...style2,
           position: "absolute",
           left: ((_a = props.part.properties) == null ? void 0 : _a.left) || "",
           right: ((_b = props.part.properties) == null ? void 0 : _b.right) || "",
@@ -8364,10 +8501,19 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
           bottom: ((_d = props.part.properties) == null ? void 0 : _d.bottom) || ""
         };
       }
-      return { style };
+      return style2;
+    });
+    const bind = computed(() => {
+      return {
+        part: props.part,
+        placeholder: true
+      };
     });
     const thisComponent = computed(() => pageBuilder.partManager.createPartComponent(props.part));
-    const childComponents = computed(() => pageBuilder.partManager.createPartComponents(props.part.children));
+    computed(() => pageBuilder.partManager.createPartComponents(props.part.children));
+    const droppable = computed(() => {
+      return pageBuilder.partManager.isChildAllowed(props.part);
+    });
     const locatePositionMark = (mark, target, mouseOffsetX, mouseOffsetY, draggingPart2, event) => {
       if (props.part.isNestedWidget()) {
         if (draggingPart2.isWidget())
@@ -8473,8 +8619,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     };
     const locateWidget = (mark, target, mouseOffsetX, mouseOffsetY, draggingPart2, event) => {
       var _a, _b, _c;
-      if (draggingPart2.partId === props.part.partId && !props.part.isNestedWidget())
-        return;
+      if (draggingPart2.partId === props.part.partId && !props.part.isNestedWidget()) return;
       mark.style.background = "#27ae60";
       const isNestedWidget = props.part.isNestedWidget();
       const widget2 = isNestedWidget ? props.part.parent : props.part;
@@ -8515,11 +8660,9 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
       }
     };
     const acceptChildPart = (pageBuilder2, part, target, _index, partId, event) => {
-      if (partId === props.part.partId && !props.part.isNestedWidget())
-        return;
+      if (partId === props.part.partId && !props.part.isNestedWidget()) return;
       const droppedPart = pageBuilder2.model.findPartById(partId);
-      if (!droppedPart)
-        return;
+      if (!droppedPart) return;
       const targetRect = target.getBoundingClientRect();
       const mouseOffsetX = event.clientX - targetRect.left;
       const mouseOffsetY = event.clientY - targetRect.top;
@@ -8552,37 +8695,25 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
       let index;
       if (((_a = section.properties) == null ? void 0 : _a.direction) === "vertical") {
         if (((_b = block.properties) == null ? void 0 : _b.direction) === "vertical") {
-          if (isFirstBlock && isFirstWidget && mouseOffsetY <= centerY)
-            index = blockIndex;
-          else if (isLastBlock && isLastWidget && mouseOffsetY > centerY)
-            index = blockIndex + 1;
-          else
-            return;
+          if (isFirstBlock && isFirstWidget && mouseOffsetY <= centerY) index = blockIndex;
+          else if (isLastBlock && isLastWidget && mouseOffsetY > centerY) index = blockIndex + 1;
+          else return;
         } else {
-          if (isFirstBlock && mouseOffsetY <= centerY)
-            index = blockIndex;
-          else if (isLastBlock && mouseOffsetY > centerY)
-            index = blockIndex + 1;
-          else
-            return;
+          if (isFirstBlock && mouseOffsetY <= centerY) index = blockIndex;
+          else if (isLastBlock && mouseOffsetY > centerY) index = blockIndex + 1;
+          else return;
         }
       } else {
         if (((_c = block.properties) == null ? void 0 : _c.direction) === "vertical") {
-          if (isFirstWidget && mouseOffsetY <= centerY)
-            index = blockIndex;
-          else if (isLastWidget && mouseOffsetY > centerY)
-            index = blockIndex + 1;
-          else
-            return;
+          if (isFirstWidget && mouseOffsetY <= centerY) index = blockIndex;
+          else if (isLastWidget && mouseOffsetY > centerY) index = blockIndex + 1;
+          else return;
         } else {
-          if (mouseOffsetY <= centerY)
-            index = blockIndex;
-          else
-            index = blockIndex + 1;
+          if (mouseOffsetY <= centerY) index = blockIndex;
+          else index = blockIndex + 1;
         }
       }
-      if (((_d = page.children) == null ? void 0 : _d.indexOf(droppedPart)) === index)
-        return;
+      if (((_d = page.children) == null ? void 0 : _d.indexOf(droppedPart)) === index) return;
       pageBuilder2.model.moveElements(droppedPart.partId, section.partId, index);
     };
     const acceptBlock = (pageBuilder2, target, droppedPart, mouseOffsetX, mouseOffsetY) => {
@@ -8599,36 +8730,25 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
       if (((_a = section.properties) == null ? void 0 : _a.direction) === "vertical") {
         const centerY = widgetElement.offsetHeight / 2;
         if (((_b = block.properties) == null ? void 0 : _b.direction) === "vertical") {
-          if (isFirstWidget && mouseOffsetY <= centerY)
-            index = blockIndex;
-          else if (isLastWidget && mouseOffsetY > centerY)
-            index = blockIndex + 1;
-          else
-            return;
+          if (isFirstWidget && mouseOffsetY <= centerY) index = blockIndex;
+          else if (isLastWidget && mouseOffsetY > centerY) index = blockIndex + 1;
+          else return;
         } else {
-          if (mouseOffsetY <= centerY)
-            index = blockIndex;
-          else
-            index = blockIndex + 1;
+          if (mouseOffsetY <= centerY) index = blockIndex;
+          else index = blockIndex + 1;
         }
       } else {
         const centerX = widgetElement.offsetWidth / 2;
         if (((_c = block.properties) == null ? void 0 : _c.direction) === "vertical") {
-          if (mouseOffsetX <= centerX)
-            index = blockIndex;
-          else
-            index = blockIndex + 1;
+          if (mouseOffsetX <= centerX) index = blockIndex;
+          else index = blockIndex + 1;
         } else {
-          if (isFirstWidget && mouseOffsetX <= centerX)
-            index = blockIndex;
-          else if (isLastWidget && mouseOffsetX > centerX)
-            index = blockIndex + 1;
-          else
-            return;
+          if (isFirstWidget && mouseOffsetX <= centerX) index = blockIndex;
+          else if (isLastWidget && mouseOffsetX > centerX) index = blockIndex + 1;
+          else return;
         }
       }
-      if (((_d = section.children) == null ? void 0 : _d.indexOf(droppedPart)) === index)
-        return;
+      if (((_d = section.children) == null ? void 0 : _d.indexOf(droppedPart)) === index) return;
       pageBuilder2.model.moveElements(droppedPart.partId, section.partId, index);
     };
     const acceptWidget = (pageBuilder2, target, droppedPart, mouseOffsetX, mouseOffsetY) => {
@@ -8650,8 +8770,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             index = widgetIndex + 1;
           } else {
             index = ((_c = widget2.children) == null ? void 0 : _c.length) || 0;
-            if (((_d = widget2.children) == null ? void 0 : _d.indexOf(droppedPart)) === index)
-              return;
+            if (((_d = widget2.children) == null ? void 0 : _d.indexOf(droppedPart)) === index) return;
             const update2 = [{
               partId: droppedPart.partId,
               properties: {
@@ -8670,8 +8789,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             index = widgetIndex + 1;
           } else {
             index = ((_e = widget2.children) == null ? void 0 : _e.length) || 0;
-            if (((_f = widget2.children) == null ? void 0 : _f.indexOf(droppedPart)) === index)
-              return;
+            if (((_f = widget2.children) == null ? void 0 : _f.indexOf(droppedPart)) === index) return;
             const update2 = [{
               partId: droppedPart.partId,
               properties: {
@@ -8691,8 +8809,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
           index = mouseOffsetX <= centerX ? widgetIndex : widgetIndex + 1;
         }
       }
-      if (block.children.indexOf(droppedPart) === index)
-        return;
+      if (block.children.indexOf(droppedPart) === index) return;
       const update = [{
         partId: droppedPart.partId,
         properties: {
@@ -8706,65 +8823,56 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     };
     const calculateDropIndex = (part, target, mouseOffsetX, mouseOffsetY, _event) => {
       var _a;
-      if (!part.children || part.children.length === 0)
-        return 0;
+      if (!part.children || part.children.length === 0) return 0;
       const children = Array.from(target.children).filter((child) => !isPositionMark(child)).map((child) => child);
       const dir = ((_a = props.part.properties) == null ? void 0 : _a.direction) || "vertical";
       let index = 0;
       for (const child of children) {
         if (dir === "horizontal") {
           const centerX = child.offsetLeft + child.offsetWidth / 2;
-          if (mouseOffsetX <= centerX)
-            return index;
+          if (mouseOffsetX <= centerX) return index;
         } else {
           const centerY = child.offsetTop + child.offsetHeight / 2;
-          if (mouseOffsetY <= centerY)
-            return index;
+          if (mouseOffsetY <= centerY) return index;
         }
         ++index;
       }
       return index;
     };
     return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createElementBlock("div", mergeProps({
-        ref_key: "widget",
-        ref: widget,
-        class: [classNames.value, "pb-widget"],
-        "data-model-id": _ctx.part.partId,
-        draggable: draggable.value
-      }, properties.value), [
-        thisComponent.value ? (openBlock(), createBlock$1(resolveDynamicComponent(thisComponent.value), {
+      return openBlock(), createElementBlock(Fragment, null, [
+        styleTag.value ? (openBlock(), createBlock$1(resolveDynamicComponent("style"), {
           key: 0,
-          part: _ctx.part,
-          placeholder: true
-        }, null, 8, ["part"])) : createCommentVNode("", true),
-        childComponents.value && childComponents.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$h, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(childComponents.value, (child) => {
-            return openBlock(), createBlock$1(resolveDynamicComponent(child.component), {
-              key: child.part.partId,
-              part: child.part,
-              placeholder: true
-            }, null, 8, ["part"]);
-          }), 128))
-        ])) : createCommentVNode("", true),
-        selected.value && _ctx.part.isNestedWidget() ? (openBlock(), createElementBlock("div", {
-          key: 2,
-          class: "pan-handle",
-          onMousedown: _pan_mousedown
-        }, null, 32)) : createCommentVNode("", true),
-        selected.value && _ctx.part.isNestedWidget() ? (openBlock(), createElementBlock("div", {
-          key: 3,
-          class: "resize-handle",
-          onMousedown: _resize_mousedown
-        }, null, 32)) : createCommentVNode("", true)
-      ], 16, _hoisted_1$r)), [
-        [unref(vPartHandler), { pageBuilder: unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
-      ]);
+          innerHTML: styleTag.value
+        }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
+        withDirectives((openBlock(), createElementBlock("div", {
+          ref_key: "widget",
+          ref: widget,
+          class: normalizeClass([classNames.value, "pb-widget"]),
+          "data-part-id": _ctx.part.partId,
+          draggable: draggable.value,
+          style: normalizeStyle(style.value)
+        }, [
+          thisComponent.value ? (openBlock(), createBlock$1(resolveDynamicComponent(thisComponent.value), normalizeProps(mergeProps({ key: 0 }, bind.value)), null, 16)) : createCommentVNode("", true),
+          selected.value && _ctx.part.isNestedWidget() ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: "pan-handle",
+            onMousedown: panChild
+          }, null, 32)) : createCommentVNode("", true),
+          selected.value && _ctx.part.isNestedWidget() ? (openBlock(), createElementBlock("div", {
+            key: 2,
+            class: "resize-handle",
+            onMousedown: resizeChild
+          }, null, 32)) : createCommentVNode("", true)
+        ], 14, _hoisted_1$r)), [
+          [unref(vPartHandler), { pageBuilder: unref(pageBuilder), part: _ctx.part, droppable: droppable.value, locatePositionMark, calculateDropIndex, acceptChildPart }]
+        ])
+      ], 64);
     };
   }
 });
-const _hoisted_1$q = ["data-model-id"];
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _hoisted_1$q = ["data-part-id"];
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "PbBlock",
   props: {
     part: {}
@@ -8777,7 +8885,13 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
       selected.value ? "selected" : "",
       props.part.getClassNames()
     ]);
-    const properties = computed(() => ({ style: props.part.getStyles() }));
+    const styleTag = computed(() => props.part.getStyleTag());
+    const properties = computed(() => ({
+      style: {
+        ...props.part.getStyles(),
+        ...props.part.getInlineStyles()
+      }
+    }));
     computed(() => pageBuilder.partManager.createPartComponents(props.part.children));
     const addWidget = () => {
       pageBuilder.commandRegistry.executeCommand(OpenAddWidgetModalCommand.COMMAND_ID);
@@ -8844,11 +8958,9 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
         locateNone(mark.style);
     };
     const acceptChildPart = (pageBuilder2, part, target, _index, partId, event) => {
-      if (partId === props.part.partId)
-        return;
+      if (partId === props.part.partId) return;
       const droppedPart = pageBuilder2.model.findPartById(partId);
-      if (!droppedPart)
-        return;
+      if (!droppedPart) return;
       const targetRect = target.getBoundingClientRect();
       const mouseOffsetX = event.clientX - targetRect.left;
       const mouseOffsetY = event.clientY - targetRect.top;
@@ -8872,20 +8984,14 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
       let index;
       const centerY = blockElement.offsetHeight / 2;
       if (((_a = section.properties) == null ? void 0 : _a.direction) === "vertical") {
-        if (isFirstBlock && mouseOffsetY <= centerY)
-          index = sectionIndex;
-        else if (isLastBlock && mouseOffsetY > centerY)
-          index = sectionIndex + 1;
-        else
-          return;
+        if (isFirstBlock && mouseOffsetY <= centerY) index = sectionIndex;
+        else if (isLastBlock && mouseOffsetY > centerY) index = sectionIndex + 1;
+        else return;
       } else {
-        if (mouseOffsetY <= centerY)
-          index = sectionIndex;
-        else
-          index = sectionIndex + 1;
+        if (mouseOffsetY <= centerY) index = sectionIndex;
+        else index = sectionIndex + 1;
       }
-      if (((_b = page.children) == null ? void 0 : _b.indexOf(droppedPart)) === index)
-        return;
+      if (((_b = page.children) == null ? void 0 : _b.indexOf(droppedPart)) === index) return;
       pageBuilder2.model.moveElements(droppedPart.partId, page.partId, index);
     };
     const acceptBlock = (pageBuilder2, target, droppedPart, mouseOffsetX, mouseOffsetY) => {
@@ -8901,8 +9007,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
         const centerX = target.offsetWidth / 2;
         index = mouseOffsetX <= centerX ? blockIndex : blockIndex + 1;
       }
-      if (section.children.indexOf(droppedPart) === index)
-        return;
+      if (section.children.indexOf(droppedPart) === index) return;
       pageBuilder2.model.moveElements(droppedPart.partId, section.partId, index);
     };
     const acceptWidget = (pageBuilder2, target, droppedPart, mouseOffsetX, mouseOffsetY) => {
@@ -8923,20 +9028,17 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     };
     const calculateDropIndex = (part, target, mouseOffsetX, mouseOffsetY, _event) => {
       var _a;
-      if (!part.children || part.children.length === 0)
-        return 0;
+      if (!part.children || part.children.length === 0) return 0;
       const children = Array.from(target.children).filter((child) => !isPositionMark(child)).map((child) => child);
       const dir = ((_a = props.part.properties) == null ? void 0 : _a.direction) || "vertical";
       let index = 0;
       for (const child of children) {
         if (dir === "horizontal") {
           const centerX = child.offsetLeft + child.offsetWidth / 2;
-          if (mouseOffsetX <= centerX)
-            return index;
+          if (mouseOffsetX <= centerX) return index;
         } else {
           const centerY = child.offsetTop + child.offsetHeight / 2;
-          if (mouseOffsetY <= centerY)
-            return index;
+          if (mouseOffsetY <= centerY) return index;
         }
         ++index;
       }
@@ -8944,52 +9046,56 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       var _a, _b;
-      return withDirectives((openBlock(), createElementBlock("div", 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 ? (openBlock(), createBlock$1(PbAddWidgetButton, {
+      return openBlock(), createElementBlock(Fragment, null, [
+        styleTag.value ? (openBlock(), createBlock$1(resolveDynamicComponent("style"), {
           key: 0,
-          onAddWidget: addWidget
-        })) : createCommentVNode("", true),
-        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.part.children, (child) => {
-          return openBlock(), createBlock$1(_sfc_main$n, {
-            key: child.partId,
-            part: child
-          }, null, 8, ["part"]);
-        }), 128))
-      ], 16, _hoisted_1$q)), [
-        [unref(vPartHandler), { pageBuilder: unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
-      ]);
+          innerHTML: styleTag.value
+        }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
+        withDirectives((openBlock(), createElementBlock("div", 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 ? (openBlock(), createBlock$1(PbAddWidgetButton, {
+            key: 0,
+            onAddWidget: addWidget
+          })) : createCommentVNode("", true),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.part.children, (child) => {
+            return openBlock(), createBlock$1(_sfc_main$o, {
+              key: child.partId,
+              part: child
+            }, null, 8, ["part"]);
+          }), 128))
+        ], 16, _hoisted_1$q)), [
+          [unref(vPartHandler), { pageBuilder: unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
+        ])
+      ], 64);
     };
   }
 });
 const _hoisted_1$p = { class: "pb-block" };
-const _hoisted_2$g = /* @__PURE__ */ createElementVNode("div", {
-  class: "pb-widget",
-  style: { "margin": "0 auto" }
-}, [
-  /* @__PURE__ */ createElementVNode("div", { class: "pb-login-widget" }, [
-    /* @__PURE__ */ createElementVNode("h3", null, "Login Design Part")
-  ])
-], -1);
-const _hoisted_3$e = [
-  _hoisted_2$g
-];
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "PbLoginDepart",
   props: {
     part: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$p, _hoisted_3$e);
+      return openBlock(), createElementBlock("div", _hoisted_1$p, _cache[0] || (_cache[0] = [
+        createElementVNode("div", {
+          class: "pb-widget",
+          style: { "margin": "0 auto" }
+        }, [
+          createElementVNode("div", { class: "pb-login-widget" }, [
+            createElementVNode("h3", null, "Login Design Part")
+          ])
+        ], -1)
+      ]));
     };
   }
 });
-const _hoisted_1$o = ["data-model-id"];
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _hoisted_1$o = ["data-part-id"];
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "PbSection",
   props: {
     part: {}
@@ -9005,7 +9111,13 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         props.part.getClassNames()
       ];
     });
-    const properties = computed(() => ({ style: props.part.getStyles() }));
+    const styleTag = computed(() => props.part.getStyleTag());
+    const properties = computed(() => ({
+      style: {
+        ...props.part.getStyles(),
+        ...props.part.getInlineStyles()
+      }
+    }));
     const disabled = computed(() => {
       var _a;
       return ["static"].includes(((_a = props.part.properties) == null ? void 0 : _a.sectionType) || "");
@@ -9037,11 +9149,9 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         locateNone(mark.style);
     };
     const acceptChildPart = (pageBuilder2, part, target, _index, partId, event) => {
-      if (partId === props.part.partId)
-        return;
+      if (partId === props.part.partId) return;
       const droppedPart = pageBuilder2.model.findPartById(partId);
-      if (!droppedPart)
-        return;
+      if (!droppedPart) return;
       const targetRect = target.getBoundingClientRect();
       const mouseOffsetX = event.clientX - targetRect.left;
       const mouseOffsetY = event.clientY - targetRect.top;
@@ -9057,8 +9167,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       const sectionIndex = page.children.indexOf(section) || 0;
       const centerY = sectionElement.offsetHeight / 2;
       const index = mouseOffsetY <= centerY ? sectionIndex : sectionIndex + 1;
-      if (page.children.indexOf(droppedPart) === index)
-        return;
+      if (page.children.indexOf(droppedPart) === index) return;
       pageBuilder2.model.moveElements(droppedPart.partId, page.partId, index);
     };
     const acceptBlock = (pageBuilder2, target, droppedPart, mouseOffsetX, mouseOffsetY) => {
@@ -9067,20 +9176,17 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
     const calculateDropIndex = (part, target, mouseOffsetX, mouseOffsetY, _event) => {
       var _a;
-      if (!part.children || part.children.length === 0)
-        return 0;
+      if (!part.children || part.children.length === 0) return 0;
       const children = Array.from(target.children).filter((child) => !isPositionMark(child)).map((child) => child);
       const dir = ((_a = props.part.properties) == null ? void 0 : _a.direction) || "vertical";
       let index = 0;
       for (const child of children) {
         if (dir === "horizontal") {
           const centerX = child.offsetLeft + child.offsetWidth / 2;
-          if (mouseOffsetX <= centerX)
-            return index;
+          if (mouseOffsetX <= centerX) return index;
         } else {
           const centerY = child.offsetTop + child.offsetHeight / 2;
-          if (mouseOffsetY <= centerY)
-            return index;
+          if (mouseOffsetY <= centerY) return index;
         }
         ++index;
       }
@@ -9088,50 +9194,47 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       var _a, _b, _c;
-      return withDirectives((openBlock(), createElementBlock("div", 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" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-          ((_c = _ctx.part.properties) == null ? void 0 : _c.name) === "Login Design Part" ? (openBlock(), createBlock$1(_sfc_main$l, {
-            key: 0,
-            part: _ctx.part
-          }, null, 8, ["part"])) : createCommentVNode("", true)
-        ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.part.children, (block) => {
-            return openBlock(), createBlock$1(_sfc_main$m, {
-              key: block.partId,
-              part: block
-            }, null, 8, ["part"]);
-          }), 128)) : (openBlock(), createBlock$1(PbAddWidgetButton, {
-            key: 1,
-            onAddWidget: addWidget
-          }))
-        ], 64))
-      ], 16, _hoisted_1$o)), [
-        [unref(vPartHandler), { pageBuilder: unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
-      ]);
+      return openBlock(), createElementBlock(Fragment, null, [
+        styleTag.value ? (openBlock(), createBlock$1(resolveDynamicComponent("style"), {
+          key: 0,
+          innerHTML: styleTag.value
+        }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
+        withDirectives((openBlock(), createElementBlock("div", 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" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            ((_c = _ctx.part.properties) == null ? void 0 : _c.name) === "Login Design Part" ? (openBlock(), createBlock$1(_sfc_main$m, {
+              key: 0,
+              part: _ctx.part
+            }, null, 8, ["part"])) : createCommentVNode("", true)
+          ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.part.children, (block) => {
+              return openBlock(), createBlock$1(_sfc_main$n, {
+                key: block.partId,
+                part: block
+              }, null, 8, ["part"]);
+            }), 128)) : (openBlock(), createBlock$1(PbAddWidgetButton, {
+              key: 1,
+              onAddWidget: addWidget
+            }))
+          ], 64))
+        ], 16, _hoisted_1$o)), [
+          [unref(vPartHandler), { pageBuilder: unref(pageBuilder), part: _ctx.part, droppable: true, locatePositionMark, calculateDropIndex, acceptChildPart }]
+        ])
+      ], 64);
     };
   }
 });
 const _hoisted_1$n = { class: "group-editor group-editor-position" };
 const _hoisted_2$f = { class: "flex-align-center" };
-const _hoisted_3$d = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
-  /* @__PURE__ */ createElementVNode("label", { textContent: "Position" })
-], -1);
-const _hoisted_4$b = { class: "flex-grow-1" };
-const _hoisted_5$5 = { class: "bg-gray-100 py-5 rounded-8" };
-const _hoisted_6$4 = { class: "text-center" };
-const _hoisted_7$4 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
-const _hoisted_8$4 = /* @__PURE__ */ createElementVNode("div", {
-  class: "d-inline-block text-center text-gray-300",
-  style: { "width": "30%", "font-size": "12px" }
-}, [
-  /* @__PURE__ */ createElementVNode("span", { class: "font-icon" }, "add")
-], -1);
-const _hoisted_9$4 = { class: "text-center" };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _hoisted_3$c = { class: "flex-grow-1" };
+const _hoisted_4$9 = { class: "bg-gray-100 py-5 rounded-8" };
+const _hoisted_5$5 = { class: "text-center" };
+const _hoisted_6$5 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
+const _hoisted_7$5 = { class: "text-center" };
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorPosition",
   props: {
     group: {},
@@ -9157,10 +9260,12 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$n, [
         createElementVNode("div", _hoisted_2$f, [
-          _hoisted_3$d,
-          createElementVNode("div", _hoisted_4$b, [
-            createElementVNode("div", _hoisted_5$5, [
-              createElementVNode("div", _hoisted_6$4, [
+          _cache[1] || (_cache[1] = createElementVNode("div", { class: "title" }, [
+            createElementVNode("label", { textContent: "Position" })
+          ], -1)),
+          createElementVNode("div", _hoisted_3$c, [
+            createElementVNode("div", _hoisted_4$9, [
+              createElementVNode("div", _hoisted_5$5, [
                 createVNode(unref(BSTextInput), {
                   "model-value": top.value,
                   class: "ml-4",
@@ -9169,7 +9274,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                   "onUpdate:modelValue": updateTop
                 }, null, 8, ["model-value"])
               ]),
-              createElementVNode("div", _hoisted_7$4, [
+              createElementVNode("div", _hoisted_6$5, [
                 createVNode(unref(BSTextInput), {
                   "model-value": left.value,
                   class: "ml-4",
@@ -9177,7 +9282,12 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                   width: "30%",
                   "onUpdate:modelValue": updateLeft
                 }, null, 8, ["model-value"]),
-                _hoisted_8$4,
+                _cache[0] || (_cache[0] = createElementVNode("div", {
+                  class: "d-inline-block text-center text-gray-300",
+                  style: { "width": "30%", "font-size": "12px" }
+                }, [
+                  createElementVNode("span", { class: "font-icon" }, "add")
+                ], -1)),
                 createVNode(unref(BSTextInput), {
                   "model-value": right.value,
                   class: "ml-4",
@@ -9186,7 +9296,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                   "onUpdate:modelValue": updateRight
                 }, null, 8, ["model-value"])
               ]),
-              createElementVNode("div", _hoisted_9$4, [
+              createElementVNode("div", _hoisted_7$5, [
                 createVNode(unref(BSTextInput), {
                   "model-value": bottom.value,
                   class: "ml-4",
@@ -9204,11 +9314,12 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$m = { class: "group-editor group-editor-size" };
 const _hoisted_2$e = { class: "flex-align-center" };
-const _hoisted_3$c = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
-  /* @__PURE__ */ createElementVNode("label", { textContent: "Size" })
-], -1);
-const _hoisted_4$a = { class: "flex-grow-1 bs-layout-horizontal" };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _hoisted_3$b = { class: "flex-grow-1 bs-layout-horizontal" };
+const _hoisted_4$8 = { class: "flex-align-center mt-12" };
+const _hoisted_5$4 = { class: "flex-grow-1 bs-layout-horizontal" };
+const _hoisted_6$4 = { class: "flex-align-center mt-12" };
+const _hoisted_7$4 = { class: "flex-grow-1 bs-layout-horizontal" };
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorSize",
   props: {
     group: {},
@@ -9219,6 +9330,10 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     const pageBuilder = usePageBuilderEditor();
     const width = computed(() => getPropertyValueOfParts(props.selectedParts, "width"));
     const height = computed(() => getPropertyValueOfParts(props.selectedParts, "height"));
+    const maxWidth = computed(() => getPropertyValueOfParts(props.selectedParts, "maxWidth"));
+    const maxHeight = computed(() => getPropertyValueOfParts(props.selectedParts, "maxHeight"));
+    const minWidth = computed(() => getPropertyValueOfParts(props.selectedParts, "minWidth"));
+    const minHeight = computed(() => getPropertyValueOfParts(props.selectedParts, "minHeight"));
     const updatePropertyValue = (properties) => {
       pageBuilder.commandRegistry.executeCommand(
         ChangePropertyCommand.COMMAND_ID,
@@ -9227,11 +9342,17 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
     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 openBlock(), createElementBlock("div", _hoisted_1$m, [
         createElementVNode("div", _hoisted_2$e, [
-          _hoisted_3$c,
-          createElementVNode("div", _hoisted_4$a, [
+          _cache[0] || (_cache[0] = createElementVNode("div", { class: "title" }, [
+            createElementVNode("label", { textContent: "Size" })
+          ], -1)),
+          createElementVNode("div", _hoisted_3$b, [
             createVNode(unref(BSTextInput), {
               "model-value": width.value,
               class: "flex-grow-1 mr-2",
@@ -9245,6 +9366,44 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
               "onUpdate:modelValue": updateHeight
             }, null, 8, ["model-value"])
           ])
+        ]),
+        createElementVNode("div", _hoisted_4$8, [
+          _cache[1] || (_cache[1] = createElementVNode("div", { class: "title" }, [
+            createElementVNode("label", { textContent: "Max Size" })
+          ], -1)),
+          createElementVNode("div", _hoisted_5$4, [
+            createVNode(unref(BSTextInput), {
+              "model-value": maxWidth.value,
+              class: "flex-grow-1 mr-2",
+              prefix: "W",
+              "onUpdate:modelValue": updateMaxWidth
+            }, null, 8, ["model-value"]),
+            createVNode(unref(BSTextInput), {
+              "model-value": maxHeight.value,
+              class: "flex-grow-1 ml-2",
+              prefix: "H",
+              "onUpdate:modelValue": updateMaxHeight
+            }, null, 8, ["model-value"])
+          ])
+        ]),
+        createElementVNode("div", _hoisted_6$4, [
+          _cache[2] || (_cache[2] = createElementVNode("div", { class: "title" }, [
+            createElementVNode("label", { textContent: "Min Size" })
+          ], -1)),
+          createElementVNode("div", _hoisted_7$4, [
+            createVNode(unref(BSTextInput), {
+              "model-value": minWidth.value,
+              class: "flex-grow-1 mr-2",
+              prefix: "W",
+              "onUpdate:modelValue": updateMinWidth
+            }, null, 8, ["model-value"]),
+            createVNode(unref(BSTextInput), {
+              "model-value": minHeight.value,
+              class: "flex-grow-1 ml-2",
+              prefix: "H",
+              "onUpdate:modelValue": updateMinHeight
+            }, null, 8, ["model-value"])
+          ])
         ])
       ]);
     };
@@ -9252,8 +9411,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
 });
 const prefix = "";
 function styleInject(css, ref2) {
-  if (ref2 === void 0)
-    ref2 = {};
+  if (ref2 === void 0) ref2 = {};
   var insertAt = ref2.insertAt;
   if (!css || typeof document === "undefined") {
     return;
@@ -9409,15 +9567,15 @@ var script$4 = {
 };
 const _hoisted_1$l = { class: "vc-alpha" };
 const _hoisted_2$d = { class: "vc-alpha-checkboard-wrap" };
-const _hoisted_3$b = /* @__PURE__ */ createElementVNode(
+const _hoisted_3$a = /* @__PURE__ */ createElementVNode(
   "div",
   { class: "vc-alpha-picker" },
   null,
   -1
   /* HOISTED */
 );
-const _hoisted_4$9 = [
-  _hoisted_3$b
+const _hoisted_4$7 = [
+  _hoisted_3$a
 ];
 function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Checkboard = resolveComponent("Checkboard");
@@ -9451,7 +9609,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
             class: "vc-alpha-pointer",
             style: normalizeStyle({ left: `${$options.colors.a * 100}%` })
           },
-          _hoisted_4$9,
+          _hoisted_4$7,
           4
           /* STYLE */
         )
@@ -10527,8 +10685,8 @@ var script$3 = {
 };
 const _hoisted_1$k = { class: "vc-editable-input" };
 const _hoisted_2$c = ["aria-labelledby"];
-const _hoisted_3$a = ["id", "for"];
-const _hoisted_4$8 = { class: "vc-input__desc" };
+const _hoisted_3$9 = ["id", "for"];
+const _hoisted_4$6 = { class: "vc-input__desc" };
 function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$k, [
     withDirectives(createElementVNode("input", {
@@ -10545,10 +10703,10 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
       id: $options.labelId,
       for: $props.label,
       class: "vc-input__label"
-    }, toDisplayString($options.labelSpanText), 9, _hoisted_3$a),
+    }, toDisplayString($options.labelSpanText), 9, _hoisted_3$9),
     createElementVNode(
       "span",
-      _hoisted_4$8,
+      _hoisted_4$6,
       toDisplayString($props.desc),
       1
       /* TEXT */
@@ -10639,15 +10797,15 @@ const _hoisted_2$b = /* @__PURE__ */ createElementVNode(
   -1
   /* HOISTED */
 );
-const _hoisted_3$9 = /* @__PURE__ */ createElementVNode(
+const _hoisted_3$8 = /* @__PURE__ */ createElementVNode(
   "div",
   { class: "vc-saturation-circle" },
   null,
   -1
   /* HOISTED */
 );
-const _hoisted_4$7 = [
-  _hoisted_3$9
+const _hoisted_4$5 = [
+  _hoisted_3$8
 ];
 function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
@@ -10669,7 +10827,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
           class: "vc-saturation-pointer",
           style: normalizeStyle({ top: $options.pointerTop, left: $options.pointerLeft })
         },
-        _hoisted_4$7,
+        _hoisted_4$5,
         4
         /* STYLE */
       )
@@ -10818,7 +10976,7 @@ const _hoisted_2$a = /* @__PURE__ */ createElementVNode(
   -1
   /* HOISTED */
 );
-const _hoisted_3$8 = [
+const _hoisted_3$7 = [
   _hoisted_2$a
 ];
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
@@ -10846,7 +11004,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
             style: normalizeStyle({ top: $options.pointerTop, left: $options.pointerLeft }),
             role: "presentation"
           },
-          _hoisted_3$8,
+          _hoisted_3$7,
           4
           /* STYLE */
         )
@@ -10948,19 +11106,19 @@ var script = {
 };
 const _hoisted_1$h = { class: "vc-sketch-saturation-wrap" };
 const _hoisted_2$9 = { class: "vc-sketch-controls" };
-const _hoisted_3$7 = { class: "vc-sketch-sliders" };
-const _hoisted_4$6 = { class: "vc-sketch-hue-wrap" };
-const _hoisted_5$4 = {
+const _hoisted_3$6 = { class: "vc-sketch-sliders" };
+const _hoisted_4$4 = { class: "vc-sketch-hue-wrap" };
+const _hoisted_5$3 = {
   key: 0,
   class: "vc-sketch-alpha-wrap"
 };
 const _hoisted_6$3 = { class: "vc-sketch-color-wrap" };
 const _hoisted_7$3 = ["aria-label"];
-const _hoisted_8$3 = {
+const _hoisted_8$1 = {
   key: 0,
   class: "vc-sketch-field"
 };
-const _hoisted_9$3 = { class: "vc-sketch-field--double" };
+const _hoisted_9$1 = { 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" };
@@ -10974,7 +11132,7 @@ const _hoisted_14$1 = {
   "aria-label": "A color preset, pick one to set as current color"
 };
 const _hoisted_15$1 = ["aria-label", "onClick"];
-const _hoisted_16$1 = ["aria-label", "onClick"];
+const _hoisted_16 = ["aria-label", "onClick"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Saturation = resolveComponent("Saturation");
   const _component_Hue = resolveComponent("Hue");
@@ -10996,14 +11154,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         }, null, 8, ["value", "onChange"])
       ]),
       createElementVNode("div", _hoisted_2$9, [
-        createElementVNode("div", _hoisted_3$7, [
-          createElementVNode("div", _hoisted_4$6, [
+        createElementVNode("div", _hoisted_3$6, [
+          createElementVNode("div", _hoisted_4$4, [
             createVNode(_component_Hue, {
               value: _ctx.colors,
               onChange: $options.childChange
             }, null, 8, ["value", "onChange"])
           ]),
-          !$props.disableAlpha ? (openBlock(), createElementBlock("div", _hoisted_5$4, [
+          !$props.disableAlpha ? (openBlock(), createElementBlock("div", _hoisted_5$3, [
             createVNode(_component_Alpha, {
               value: _ctx.colors,
               onChange: $options.childChange
@@ -11019,9 +11177,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           createVNode(_component_Checkboard)
         ])
       ]),
-      !$props.disableFields ? (openBlock(), createElementBlock("div", _hoisted_8$3, [
+      !$props.disableFields ? (openBlock(), createElementBlock("div", _hoisted_8$1, [
         createCommentVNode(" rgba "),
-        createElementVNode("div", _hoisted_9$3, [
+        createElementVNode("div", _hoisted_9$1, [
           createVNode(_component_EdIn, {
             label: "hex",
             value: $options.hex,
@@ -11081,7 +11239,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   onClick: ($event) => $options.handlePreset(c)
                 }, [
                   createVNode(_component_Checkboard)
-                ], 8, _hoisted_16$1))
+                ], 8, _hoisted_16))
               ],
               64
               /* STABLE_FRAGMENT */
@@ -11101,7 +11259,7 @@ styleInject(css_248z);
 script.render = render;
 script.__file = "src/components/sketch/sketch.vue";
 script.install = install;
-const _sfc_main$h = defineComponent({
+const _sfc_main$i = defineComponent({
   name: "PbColorPicker",
   components: {
     Sketch: script
@@ -11119,12 +11277,9 @@ const _sfc_main$h = defineComponent({
   setup(props, { emit }) {
     const color = ref(props.value);
     const appliedColor = computed(() => {
-      if (typeof color.value === "string")
-        return color.value;
-      else if (typeof color.value === "object" && color.value.hasOwnProperty("hex"))
-        return color.value.hex;
-      else
-        return;
+      if (typeof color.value === "string") return color.value;
+      else if (typeof color.value === "object" && color.value.hasOwnProperty("hex")) return color.value.hex;
+      else return;
     });
     const isShowColorPicker = ref(false);
     const toggle = (value) => {
@@ -11140,8 +11295,7 @@ const _sfc_main$h = defineComponent({
     watch(
       () => color.value,
       () => setTimeout(() => {
-        if (appliedColor.value)
-          emit("change-color", appliedColor.value);
+        if (appliedColor.value) emit("change-color", appliedColor.value);
       }, 100),
       { deep: true }
     );
@@ -11166,11 +11320,7 @@ const _sfc_main$h = defineComponent({
   }
 });
 const _hoisted_1$g = { class: "buttons" };
-const _hoisted_2$8 = /* @__PURE__ */ createElementVNode("i", { class: "material-icons-outlined" }, "delete", -1);
-const _hoisted_3$6 = [
-  _hoisted_2$8
-];
-const _hoisted_4$5 = { class: "sketch-wrap" };
+const _hoisted_2$8 = { class: "sketch-wrap" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Sketch = resolveComponent("Sketch");
   const _directive_click_outside = resolveDirective("click-outside");
@@ -11182,18 +11332,19 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     createElementVNode("div", _hoisted_1$g, [
       renderSlot(_ctx.$slots, "button", normalizeProps(guardReactiveProps({ toggle: _ctx.toggle, color: _ctx.color })), () => [
         createElementVNode("button", {
-          class: normalizeClass([{ none: !_ctx.color }, "pb-button picker-button"]),
+          class: normalizeClass([{ none: !_ctx.color }, "picker-button"]),
           style: normalizeStyle({ background: _ctx.appliedColor }),
           onClick: _cache[0] || (_cache[0] = ($event) => _ctx.toggle())
         }, null, 6)
       ]),
       !_ctx.hideDelete && _ctx.color ? (openBlock(), createElementBlock("button", {
         key: 0,
-        class: "pb-button",
         onClick: _cache[1] || (_cache[1] = (...args) => _ctx.emptyColor && _ctx.emptyColor(...args))
-      }, _hoisted_3$6)) : createCommentVNode("", true)
+      }, _cache[4] || (_cache[4] = [
+        createElementVNode("i", { class: "material-icons-outlined" }, "delete", -1)
+      ]))) : createCommentVNode("", true)
     ]),
-    createElementVNode("div", _hoisted_4$5, [
+    createElementVNode("div", _hoisted_2$8, [
       _ctx.isShowColorPicker ? (openBlock(), createBlock$1(_component_Sketch, {
         key: 0,
         modelValue: _ctx.color,
@@ -11205,15 +11356,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     [_directive_click_outside, () => _ctx.toggle(false)]
   ]);
 }
-const PbColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render]]);
+const PbColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render]]);
 const _hoisted_1$f = { class: "group-editor group-editor-background" };
 const _hoisted_2$7 = { class: "flex-align-center" };
-const _hoisted_3$5 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
-  /* @__PURE__ */ createElementVNode("label", { textContent: "Background" })
-], -1);
-const _hoisted_4$4 = { class: "bs-layout-horizontal" };
-const _hoisted_5$3 = { class: "color" };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _hoisted_3$5 = { class: "bs-layout-horizontal" };
+const _hoisted_4$3 = { class: "color" };
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorBackground",
   props: {
     group: {},
@@ -11238,17 +11386,21 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     const selectImage = () => {
       const imageProvider = pageBuilder.getProvider("imageProvider");
       if (imageProvider) {
-        imageProvider({ modal }, (url) => {
-          updatePropertyValue({ backgroundImage: url });
+        imageProvider({ modal }, (media) => {
+          if (media.mediaType === "Image") {
+            updatePropertyValue({ backgroundImage: media.url });
+          }
         });
       }
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$f, [
         createElementVNode("div", _hoisted_2$7, [
-          _hoisted_3$5,
-          createElementVNode("div", _hoisted_4$4, [
-            createElementVNode("div", _hoisted_5$3, [
+          _cache[3] || (_cache[3] = createElementVNode("div", { class: "title" }, [
+            createElementVNode("label", { textContent: "Background" })
+          ], -1)),
+          createElementVNode("div", _hoisted_3$5, [
+            createElementVNode("div", _hoisted_4$3, [
               createVNode(PbColorPicker, {
                 value: color.value,
                 "hide-delete": "",
@@ -11279,38 +11431,20 @@ const BottomLeftCornerIcon = "data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-
 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$e = { class: "group-editor group-editor-border" };
 const _hoisted_2$6 = { class: "flex-align-center" };
-const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
-  /* @__PURE__ */ createElementVNode("label", { textContent: "Border" })
-], -1);
-const _hoisted_4$3 = { class: "" };
-const _hoisted_5$2 = /* @__PURE__ */ createElementVNode("div", { class: "sub-title" }, [
-  /* @__PURE__ */ createElementVNode("label", { textContent: "Color" })
-], -1);
-const _hoisted_6$2 = { class: "color" };
-const _hoisted_7$2 = { class: "mt-8" };
-const _hoisted_8$2 = /* @__PURE__ */ createElementVNode("div", { class: "sub-title" }, [
-  /* @__PURE__ */ createElementVNode("label", { textContent: "Border Width" })
-], -1);
-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__ */ createElementVNode("div", {
-  class: "d-inline-block text-center text-gray-300",
-  style: { "width": "30%", "font-size": "12px" }
-}, [
-  /* @__PURE__ */ createElementVNode("span", { class: "font-icon" }, "add")
-], -1);
-const _hoisted_14 = { class: "text-center" };
-const _hoisted_15 = { class: "mt-8" };
-const _hoisted_16 = /* @__PURE__ */ createElementVNode("div", { class: "sub-title" }, [
-  /* @__PURE__ */ createElementVNode("label", { textContent: "Border Radius" })
-], -1);
-const _hoisted_17 = { class: "flex-grow-1 mt-4" };
-const _hoisted_18 = { class: "bg-gray-100 py-5 rounded-8" };
-const _hoisted_19 = { class: "" };
-const _hoisted_20 = { class: "mt-2" };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _hoisted_3$4 = { class: "" };
+const _hoisted_4$2 = { class: "color" };
+const _hoisted_5$2 = { class: "mt-8" };
+const _hoisted_6$2 = { class: "flex-grow-1 mt-4" };
+const _hoisted_7$2 = { class: "bg-gray-100 py-5 rounded-8" };
+const _hoisted_8 = { class: "text-center" };
+const _hoisted_9 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
+const _hoisted_10 = { class: "text-center" };
+const _hoisted_11 = { class: "mt-8" };
+const _hoisted_12 = { class: "flex-grow-1 mt-4" };
+const _hoisted_13 = { class: "bg-gray-100 py-5 rounded-8" };
+const _hoisted_14 = { class: "" };
+const _hoisted_15 = { class: "mt-2" };
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorBorder",
   props: {
     group: {},
@@ -11350,10 +11484,14 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$e, [
         createElementVNode("div", _hoisted_2$6, [
-          _hoisted_3$4,
-          createElementVNode("div", _hoisted_4$3, [
-            _hoisted_5$2,
-            createElementVNode("div", _hoisted_6$2, [
+          _cache[7] || (_cache[7] = createElementVNode("div", { class: "title" }, [
+            createElementVNode("label", { textContent: "Border" })
+          ], -1)),
+          createElementVNode("div", _hoisted_3$4, [
+            _cache[3] || (_cache[3] = createElementVNode("div", { class: "sub-title" }, [
+              createElementVNode("label", { textContent: "Color" })
+            ], -1)),
+            createElementVNode("div", _hoisted_4$2, [
               createVNode(PbColorPicker, {
                 value: color.value,
                 "hide-delete": "",
@@ -11371,11 +11509,13 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
               }, null, 8, ["model-value"])
             ])
           ]),
-          createElementVNode("div", _hoisted_7$2, [
-            _hoisted_8$2,
-            createElementVNode("div", _hoisted_9$2, [
-              createElementVNode("div", _hoisted_10, [
-                createElementVNode("div", _hoisted_11, [
+          createElementVNode("div", _hoisted_5$2, [
+            _cache[5] || (_cache[5] = createElementVNode("div", { class: "sub-title" }, [
+              createElementVNode("label", { textContent: "Border Width" })
+            ], -1)),
+            createElementVNode("div", _hoisted_6$2, [
+              createElementVNode("div", _hoisted_7$2, [
+                createElementVNode("div", _hoisted_8, [
                   createVNode(unref(BSTextInput), {
                     "model-value": borderTopWidth.value,
                     class: "ml-4",
@@ -11384,7 +11524,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                     "onUpdate:modelValue": updateBorderTopWidth
                   }, null, 8, ["model-value"])
                 ]),
-                createElementVNode("div", _hoisted_12, [
+                createElementVNode("div", _hoisted_9, [
                   createVNode(unref(BSTextInput), {
                     "model-value": borderLeftWidth.value,
                     class: "ml-4",
@@ -11392,7 +11532,12 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                     width: "30%",
                     "onUpdate:modelValue": updateBorderLeftWidth
                   }, null, 8, ["model-value"]),
-                  _hoisted_13,
+                  _cache[4] || (_cache[4] = createElementVNode("div", {
+                    class: "d-inline-block text-center text-gray-300",
+                    style: { "width": "30%", "font-size": "12px" }
+                  }, [
+                    createElementVNode("span", { class: "font-icon" }, "add")
+                  ], -1)),
                   createVNode(unref(BSTextInput), {
                     "model-value": borderRightWidth.value,
                     class: "ml-4",
@@ -11401,7 +11546,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                     "onUpdate:modelValue": updateBorderRightWidth
                   }, null, 8, ["model-value"])
                 ]),
-                createElementVNode("div", _hoisted_14, [
+                createElementVNode("div", _hoisted_10, [
                   createVNode(unref(BSTextInput), {
                     "model-value": borderBottomWidth.value,
                     class: "ml-4",
@@ -11413,11 +11558,13 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
               ])
             ])
           ]),
-          createElementVNode("div", _hoisted_15, [
-            _hoisted_16,
-            createElementVNode("div", _hoisted_17, [
-              createElementVNode("div", _hoisted_18, [
-                createElementVNode("div", _hoisted_19, [
+          createElementVNode("div", _hoisted_11, [
+            _cache[6] || (_cache[6] = createElementVNode("div", { class: "sub-title" }, [
+              createElementVNode("label", { textContent: "Border Radius" })
+            ], -1)),
+            createElementVNode("div", _hoisted_12, [
+              createElementVNode("div", _hoisted_13, [
+                createElementVNode("div", _hoisted_14, [
                   createVNode(unref(BSTextInput), {
                     "model-value": borderTopLeftRadius.value,
                     prefix: { type: "image-url", value: unref(TopLeftCornerIcon) },
@@ -11433,7 +11580,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                     "onUpdate:modelValue": updateBorderTopRightRadius
                   }, null, 8, ["model-value", "prefix"])
                 ]),
-                createElementVNode("div", _hoisted_20, [
+                createElementVNode("div", _hoisted_15, [
                   createVNode(unref(BSTextInput), {
                     "model-value": borderBottomLeftRadius.value,
                     prefix: { type: "image-url", value: unref(BottomLeftCornerIcon) },
@@ -11459,21 +11606,12 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$d = { class: "group-editor group-editor-margin" };
 const _hoisted_2$5 = { class: "flex-align-center" };
-const _hoisted_3$3 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
-  /* @__PURE__ */ createElementVNode("label", { textContent: "Margin" })
-], -1);
-const _hoisted_4$2 = { class: "flex-grow-1" };
-const _hoisted_5$1 = { class: "bg-gray-100 py-5 rounded-8" };
-const _hoisted_6$1 = { class: "text-center" };
-const _hoisted_7$1 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
-const _hoisted_8$1 = /* @__PURE__ */ createElementVNode("div", {
-  class: "d-inline-block text-center text-gray-300",
-  style: { "width": "30%", "font-size": "12px" }
-}, [
-  /* @__PURE__ */ createElementVNode("span", { class: "font-icon" }, "add")
-], -1);
-const _hoisted_9$1 = { class: "text-center" };
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _hoisted_3$3 = { class: "flex-grow-1" };
+const _hoisted_4$1 = { class: "bg-gray-100 py-5 rounded-8" };
+const _hoisted_5$1 = { class: "text-center" };
+const _hoisted_6$1 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
+const _hoisted_7$1 = { class: "text-center" };
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorMargin",
   props: {
     group: {},
@@ -11499,10 +11637,12 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$d, [
         createElementVNode("div", _hoisted_2$5, [
-          _hoisted_3$3,
-          createElementVNode("div", _hoisted_4$2, [
-            createElementVNode("div", _hoisted_5$1, [
-              createElementVNode("div", _hoisted_6$1, [
+          _cache[1] || (_cache[1] = createElementVNode("div", { class: "title" }, [
+            createElementVNode("label", { textContent: "Margin" })
+          ], -1)),
+          createElementVNode("div", _hoisted_3$3, [
+            createElementVNode("div", _hoisted_4$1, [
+              createElementVNode("div", _hoisted_5$1, [
                 createVNode(unref(BSTextInput), {
                   "model-value": top.value,
                   class: "ml-4",
@@ -11511,7 +11651,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                   "onUpdate:modelValue": updateTop
                 }, null, 8, ["model-value"])
               ]),
-              createElementVNode("div", _hoisted_7$1, [
+              createElementVNode("div", _hoisted_6$1, [
                 createVNode(unref(BSTextInput), {
                   "model-value": left.value,
                   class: "ml-4",
@@ -11519,7 +11659,12 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                   width: "30%",
                   "onUpdate:modelValue": updateLeft
                 }, null, 8, ["model-value"]),
-                _hoisted_8$1,
+                _cache[0] || (_cache[0] = createElementVNode("div", {
+                  class: "d-inline-block text-center text-gray-300",
+                  style: { "width": "30%", "font-size": "12px" }
+                }, [
+                  createElementVNode("span", { class: "font-icon" }, "add")
+                ], -1)),
                 createVNode(unref(BSTextInput), {
                   "model-value": right.value,
                   class: "ml-4",
@@ -11528,7 +11673,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                   "onUpdate:modelValue": updateRight
                 }, null, 8, ["model-value"])
               ]),
-              createElementVNode("div", _hoisted_9$1, [
+              createElementVNode("div", _hoisted_7$1, [
                 createVNode(unref(BSTextInput), {
                   "model-value": bottom.value,
                   class: "ml-4",
@@ -11546,21 +11691,12 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$c = { class: "group-editor group-editor-padding" };
 const _hoisted_2$4 = { class: "flex-align-center" };
-const _hoisted_3$2 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
-  /* @__PURE__ */ createElementVNode("label", { textContent: "Padding" })
-], -1);
-const _hoisted_4$1 = { class: "flex-grow-1" };
-const _hoisted_5 = { class: "bg-gray-100 py-5 rounded-8" };
-const _hoisted_6 = { class: "text-center" };
-const _hoisted_7 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
-const _hoisted_8 = /* @__PURE__ */ createElementVNode("div", {
-  class: "d-inline-block text-center text-gray-300",
-  style: { "width": "30%", "font-size": "12px" }
-}, [
-  /* @__PURE__ */ createElementVNode("span", { class: "font-icon" }, "add")
-], -1);
-const _hoisted_9 = { class: "text-center" };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _hoisted_3$2 = { class: "flex-grow-1" };
+const _hoisted_4 = { class: "bg-gray-100 py-5 rounded-8" };
+const _hoisted_5 = { class: "text-center" };
+const _hoisted_6 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
+const _hoisted_7 = { class: "text-center" };
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorPadding",
   props: {
     group: {},
@@ -11586,10 +11722,12 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$c, [
         createElementVNode("div", _hoisted_2$4, [
-          _hoisted_3$2,
-          createElementVNode("div", _hoisted_4$1, [
-            createElementVNode("div", _hoisted_5, [
-              createElementVNode("div", _hoisted_6, [
+          _cache[1] || (_cache[1] = createElementVNode("div", { class: "title" }, [
+            createElementVNode("label", { textContent: "Padding" })
+          ], -1)),
+          createElementVNode("div", _hoisted_3$2, [
+            createElementVNode("div", _hoisted_4, [
+              createElementVNode("div", _hoisted_5, [
                 createVNode(unref(BSTextInput), {
                   "model-value": top.value,
                   class: "ml-4",
@@ -11598,7 +11736,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                   "onUpdate:modelValue": updateTop
                 }, null, 8, ["model-value"])
               ]),
-              createElementVNode("div", _hoisted_7, [
+              createElementVNode("div", _hoisted_6, [
                 createVNode(unref(BSTextInput), {
                   "model-value": left.value,
                   class: "ml-4",
@@ -11606,7 +11744,12 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                   width: "30%",
                   "onUpdate:modelValue": updateLeft
                 }, null, 8, ["model-value"]),
-                _hoisted_8,
+                _cache[0] || (_cache[0] = createElementVNode("div", {
+                  class: "d-inline-block text-center text-gray-300",
+                  style: { "width": "30%", "font-size": "12px" }
+                }, [
+                  createElementVNode("span", { class: "font-icon" }, "add")
+                ], -1)),
                 createVNode(unref(BSTextInput), {
                   "model-value": right.value,
                   class: "ml-4",
@@ -11615,7 +11758,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                   "onUpdate:modelValue": updateRight
                 }, null, 8, ["model-value"])
               ]),
-              createElementVNode("div", _hoisted_9, [
+              createElementVNode("div", _hoisted_7, [
                 createVNode(unref(BSTextInput), {
                   "model-value": bottom.value,
                   class: "ml-4",
@@ -11657,7 +11800,7 @@ const positionGroup = () => {
         propertyType: "text"
       }
     ],
-    propertyGroupEditor: () => _sfc_main$j
+    propertyGroupEditor: () => _sfc_main$k
   };
 };
 const sizeGroup = () => {
@@ -11696,7 +11839,7 @@ const sizeGroup = () => {
         propertyType: "text"
       }
     ],
-    propertyGroupEditor: () => _sfc_main$i
+    propertyGroupEditor: () => _sfc_main$j
   };
 };
 const marginGroup = () => {
@@ -11725,7 +11868,7 @@ const marginGroup = () => {
         propertyType: "text"
       }
     ],
-    propertyGroupEditor: () => _sfc_main$e
+    propertyGroupEditor: () => _sfc_main$f
   };
 };
 const paddingGroup = () => {
@@ -11754,7 +11897,7 @@ const paddingGroup = () => {
         propertyType: "text"
       }
     ],
-    propertyGroupEditor: () => _sfc_main$d
+    propertyGroupEditor: () => _sfc_main$e
   };
 };
 const commonGroup = () => {
@@ -11773,8 +11916,18 @@ const commonGroup = () => {
         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"
       },
       {
@@ -11805,6 +11958,20 @@ const layoutGroup = () => {
     ]
   };
 };
+const alignGroup = () => {
+  return {
+    groupName: "align",
+    caption: "Align",
+    properties: [
+      {
+        propertyName: "align",
+        caption: "Align",
+        propertyType: "select",
+        params: "left,center,right"
+      }
+    ]
+  };
+};
 const backgroundGroup = () => {
   return {
     groupName: "background",
@@ -11821,7 +11988,7 @@ const backgroundGroup = () => {
         propertyType: "image"
       }
     ],
-    propertyGroupEditor: () => _sfc_main$g
+    propertyGroupEditor: () => _sfc_main$h
   };
 };
 const borderGroup = () => {
@@ -11875,30 +12042,61 @@ const borderGroup = () => {
         propertyType: "text"
       }
     ],
-    propertyGroupEditor: () => _sfc_main$f
+    propertyGroupEditor: () => _sfc_main$g
   };
 };
 const defaultPropertyGroups = () => {
-  return [layoutGroup(), sizeGroup(), marginGroup(), paddingGroup(), backgroundGroup(), commonGroup()];
+  return [layoutGroup(), alignGroup(), sizeGroup(), marginGroup(), paddingGroup(), backgroundGroup(), commonGroup()];
 };
 const defaultWidgetPropertyGroups = () => {
-  return [positionGroup(), sizeGroup(), marginGroup(), paddingGroup(), borderGroup(), backgroundGroup(), commonGroup()];
+  return [alignGroup(), positionGroup(), sizeGroup(), marginGroup(), paddingGroup(), borderGroup(), backgroundGroup(), commonGroup()];
 };
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  __name: "PbContainerWidget",
+  props: {
+    part: {},
+    placeholder: { type: Boolean }
+  },
+  setup(__props) {
+    const pageBuilder = usePageBuilderEditor();
+    const addWidget = () => {
+      pageBuilder.commandRegistry.executeCommand(OpenAddWidgetModalCommand.COMMAND_ID);
+    };
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createElementBlock(Fragment, null, [
+        _ctx.part.children ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.part.children, (child) => {
+          return openBlock(), createBlock$1(_sfc_main$o, {
+            key: child.partId,
+            part: child
+          }, null, 8, ["part"]);
+        }), 128)) : createCommentVNode("", true),
+        !_ctx.part.children || ((_a = _ctx.part.children) == null ? void 0 : _a.length) === 0 ? (openBlock(), createBlock$1(PbAddWidgetButton, {
+          key: 1,
+          onAddWidget: addWidget
+        })) : createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
 const pageParts = [
   {
     partType: "Page",
     partName: "Page",
     caption: "Page",
     icon: "draft",
+    className: "pb-page",
     propertyGroups: [
+      alignGroup(),
       paddingGroup(),
       backgroundGroup(),
       commonGroup()
     ],
-    initialProperties: {},
-    localized: false,
+    initialProperties: {
+      align: "center"
+    },
     allowsChild: () => true,
-    creator: () => _sfc_main$k
+    creator: () => _sfc_main$l
   }
 ];
 const sectionParts = [
@@ -11907,15 +12105,16 @@ const sectionParts = [
     partName: "Section",
     caption: "Section",
     icon: "rectangle",
+    className: "pb-section",
     propertyGroups: [
       ...defaultPropertyGroups()
     ],
     initialProperties: {
-      direction: "horizontal"
+      direction: "horizontal",
+      align: "center"
     },
-    localized: false,
     allowsChild: () => true,
-    creator: () => _sfc_main$k
+    creator: () => _sfc_main$l
   }
 ];
 const blockParts = [
@@ -11924,13 +12123,15 @@ const blockParts = [
     partName: "Block",
     caption: "Block",
     icon: "space_dashboard",
+    className: "pb-block",
     propertyGroups: [
       ...defaultPropertyGroups()
     ],
-    initialProperties: {},
-    localized: false,
+    initialProperties: {
+      align: "center"
+    },
     allowsChild: () => true,
-    creator: () => _sfc_main$m
+    creator: () => _sfc_main$n
   }
 ];
 const widgets = [
@@ -11939,6 +12140,7 @@ const widgets = [
     partName: "TextWidget",
     caption: "Text",
     icon: "insert_text",
+    className: "pb-text-widget",
     propertyGroups: [
       {
         groupName: "text",
@@ -11949,7 +12151,6 @@ const widgets = [
             caption: "Text",
             propertyType: "multiline-text",
             params: "",
-            localized: true,
             multiLang: true
           },
           {
@@ -11958,6 +12159,18 @@ const widgets = [
             propertyType: "text",
             params: ""
           },
+          {
+            propertyName: "fontWeight",
+            caption: "Weight",
+            propertyType: "text",
+            params: ""
+          },
+          {
+            propertyName: "textAlign",
+            caption: "Text Align",
+            propertyType: "select",
+            params: "left,center,right"
+          },
           {
             propertyName: "color",
             caption: "Font Color",
@@ -11970,18 +12183,22 @@ const widgets = [
     ],
     initialProperties: {
       fontSize: "20px",
+      textAlign: "center",
       paddingTop: "12px",
-      paddingBottom: "12px"
+      paddingBottom: "12px",
+      paddingLeft: "12px",
+      paddingRight: "12px",
+      align: "center"
     },
-    localized: true,
     allowsChild: () => false,
-    creator: () => _sfc_main$5$1
+    creator: () => _sfc_main$7$1
   },
   {
     partType: "Widget",
     partName: "ImageWidget",
     caption: "Image",
     icon: "imagesmode",
+    className: "pb-image-widget",
     propertyGroups: [
       {
         groupName: "image",
@@ -11991,23 +12208,22 @@ const widgets = [
             propertyName: "image",
             caption: "Image",
             propertyType: "image",
-            params: "",
-            localized: true
+            params: ""
           }
         ]
       },
       ...defaultWidgetPropertyGroups()
     ],
     initialProperties: {},
-    localized: true,
     allowsChild: () => false,
-    creator: () => _sfc_main$6$1
+    creator: () => _sfc_main$8$1
   },
   {
     partType: "Widget",
     partName: "HtmlWidget",
     caption: "HTML",
     icon: "code",
+    className: "pb-html-widget",
     propertyGroups: [
       {
         groupName: "html",
@@ -12018,7 +12234,6 @@ const widgets = [
             caption: "HTML",
             propertyType: "html",
             params: "",
-            localized: true,
             multiLang: true
           }
         ]
@@ -12026,15 +12241,15 @@ const widgets = [
       ...defaultWidgetPropertyGroups()
     ],
     initialProperties: {},
-    localized: true,
     allowsChild: () => false,
-    creator: () => _sfc_main$4$1
+    creator: () => _sfc_main$6$1
   },
   {
     partType: "Widget",
     partName: "IframeWidget",
     caption: "IFrame",
     icon: "code",
+    className: "pb-iframe-widget",
     propertyGroups: [
       {
         groupName: "iframe",
@@ -12045,7 +12260,6 @@ const widgets = [
             caption: "URL",
             propertyType: "text",
             params: "",
-            localized: true,
             multiLang: true
           }
         ]
@@ -12053,30 +12267,74 @@ const widgets = [
       ...defaultWidgetPropertyGroups()
     ],
     initialProperties: {},
-    localized: true,
     allowsChild: () => false,
-    creator: () => _sfc_main$3$1
-  }
-];
-const partDefinitions = {};
-for (const part of pageParts) {
-  partDefinitions[part.partName] = part;
-}
-for (const part of sectionParts) {
-  partDefinitions[part.partName] = part;
-}
-for (const part of blockParts) {
-  partDefinitions[part.partName] = part;
-}
-for (const part of widgets) {
-  partDefinitions[part.partName] = part;
-}
-[
+    creator: () => _sfc_main$5$1
+  },
   {
-    groupName: "Layout",
-    caption: "Layout",
-    partDefinitions: [
-      ...sectionParts,
+    partType: "Widget",
+    partName: "YoutubeWidget",
+    caption: "Youtube",
+    icon: "live_tv",
+    className: "pb-youtube-widget",
+    propertyGroups: [
+      {
+        groupName: "youtube",
+        caption: "Youtube",
+        properties: [
+          {
+            propertyName: "url",
+            caption: "URL",
+            propertyType: "youtube",
+            params: ""
+          }
+        ]
+      },
+      ...defaultWidgetPropertyGroups()
+    ],
+    initialProperties: {},
+    allowsChild: () => false,
+    creator: () => _sfc_main$4$1
+  },
+  {
+    partType: "Widget",
+    partName: "ContainerWidget",
+    caption: "Container",
+    icon: "widgets",
+    className: "pb-container-widget",
+    propertyGroups: [
+      {
+        groupName: "container",
+        caption: "Container",
+        properties: []
+      },
+      ...defaultWidgetPropertyGroups()
+    ],
+    initialProperties: {
+      height: "200px"
+    },
+    allowsChild: () => true,
+    creator: () => _sfc_main$d
+  }
+];
+const partDefinitions = {};
+for (const part of pageParts) {
+  partDefinitions[part.partName] = part;
+}
+for (const part of sectionParts) {
+  partDefinitions[part.partName] = part;
+}
+for (const part of blockParts) {
+  partDefinitions[part.partName] = part;
+}
+for (const part of widgets) {
+  partDefinitions[part.partName] = part;
+}
+[
+  {
+    groupName: "Layout",
+    caption: "Layout",
+    partDefinitions: [
+      ...sectionParts,
       ...blockParts
     ]
   }
@@ -12142,7 +12400,7 @@ __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
 let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
 const openWidgetAddModal = (modal, args, callback) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./PbWidgetAddModal-BoYfb0dm.js")),
+    component: defineAsyncComponent(() => import("./PbWidgetAddModal-DO1t-xsl.js")),
     style: {
       width: "80%",
       height: "80%",
@@ -12160,6 +12418,10 @@ const openWidgetAddModal = (modal, args, callback) => {
               addPart(args.pageBuilder, part, { image: url });
             });
           }
+        } else if (["YoutubeWidget"].includes(part.partName)) {
+          selectYoutubeVideo(modal, "", (url) => {
+            addPart(args.pageBuilder, part, { url });
+          });
         } else {
           if (callback) {
             callback(part);
@@ -12172,20 +12434,11 @@ const openWidgetAddModal = (modal, args, callback) => {
   });
 };
 const findInsertTargetAndIndex = (pageBuilder, partType) => {
-  var _a, _b;
+  var _a;
   const selected = pageBuilder.context.getSelectedParts()[0];
-  const page = pageBuilder.context.getSelectedPage();
-  if (partType === SECTION_TYPE) {
-    const section = pageBuilder.partManager.findNearestSection(selected);
-    return {
-      target: page,
-      index: section ? page.children.indexOf(section) + 1 : (_a = page.children) == null ? void 0 : _a.length
-    };
-  } else if (partType === WIDGET_TYPE) {
-    pageBuilder.partManager.findNearestBlock(selected);
-  }
+  pageBuilder.context.getSelectedPage();
   const target = pageBuilder.partManager.findNearestAvailableParentPart(selected, partType);
-  const index = selected === target || !(target == null ? void 0 : target.children) ? ((_b = target == null ? void 0 : target.children) == null ? void 0 : _b.length) || 0 : target.children.indexOf(selected) + 1;
+  const index = selected === target || !(target == null ? void 0 : target.children) ? ((_a = target == null ? void 0 : target.children) == null ? void 0 : _a.length) || 0 : target.children.indexOf(selected) + 1;
   return { target, index };
 };
 const createPartWithDefinition = (def, properties) => {
@@ -12200,14 +12453,12 @@ const createPartWithDefinition = (def, properties) => {
 };
 const createSection = (pageBuilder) => {
   const def = pageBuilder.partManager.getSectionDefinition();
-  if (!def)
-    return;
+  if (!def) return;
   return createPartWithDefinition(def);
 };
 const createBlock = (pageBuilder) => {
   const def = pageBuilder.partManager.getBlockDefinition();
-  if (!def)
-    return;
+  if (!def) return;
   return createPartWithDefinition(def);
 };
 const findLeafPart = (part) => {
@@ -12230,8 +12481,7 @@ const insertParts = (pageBuilder, partId, index, parts, selectAfterInsert) => {
   if (selectAfterInsert && result.inserted) {
     const partId2 = result.inserted[0].partId;
     const part = pageBuilder.model.findPartById(partId2);
-    if (part)
-      pageBuilder.context.setSelection([part]);
+    if (part) pageBuilder.context.setSelection([part]);
   }
 };
 const _AddPartCommand = class _AddPartCommand {
@@ -12254,8 +12504,7 @@ const _AddSectionCommand = class _AddSectionCommand {
   }
   execute(pageBuilder, args) {
     const def = pageBuilder.partManager.getSectionDefinition();
-    if (!def)
-      return;
+    if (!def) return;
     addPart(pageBuilder, def);
   }
 };
@@ -12269,8 +12518,7 @@ const _AddBlockCommand = class _AddBlockCommand {
   }
   execute(pageBuilder, args) {
     const def = pageBuilder.partManager.getBlockDefinition();
-    if (!def)
-      return;
+    if (!def) return;
     addPart(pageBuilder, def);
   }
 };
@@ -12285,8 +12533,7 @@ const addPart = (pageBuilder, def, attrs) => {
     const target = page;
     const index = section ? page.children.indexOf(section) + 1 : ((_a = page.children) == null ? void 0 : _a.length) || 0;
     const newSection = createPartWithDefinition(def);
-    if (!newSection)
-      return;
+    if (!newSection) return;
     if (((_b = def.initialProperties) == null ? void 0 : _b.sectionType) !== "static") {
       const block = createBlock(pageBuilder);
       newSection.children = [block];
@@ -12296,42 +12543,36 @@ const addPart = (pageBuilder, def, attrs) => {
     if (!selected) {
       const newSection = createSection(pageBuilder);
       const newBlock = createPartWithDefinition(def);
-      if (!newSection || !newBlock)
-        return;
+      if (!newSection || !newBlock) return;
       newSection.children = [newBlock];
       insertParts(pageBuilder, page.partId, ((_c = page.children) == null ? void 0 : _c.length) || 0, [newSection], true);
     } else if (selected.isSection()) {
       const target = selected;
       const index = ((_d = target == null ? void 0 : target.children) == null ? void 0 : _d.length) || 0;
       const newBlock = createPartWithDefinition(def);
-      if (!newBlock)
-        return;
+      if (!newBlock) return;
       insertParts(pageBuilder, target.partId, index, [newBlock], true);
     } else {
       const block = pageBuilder.partManager.findNearestBlock(selected);
       const target = block == null ? void 0 : block.parent;
       const index = target.children.indexOf(block) + 1;
       const newBlock = createPartWithDefinition(def);
-      if (!newBlock)
-        return;
+      if (!newBlock) return;
       insertParts(pageBuilder, target.partId, index, [newBlock], true);
     }
   } else {
     const newWidget = createPartWithDefinition(def, attrs);
-    if (!newWidget)
-      return;
+    if (!newWidget) return;
     if (!selected) {
       const newSection = createSection(pageBuilder);
       const newBlock = createBlock(pageBuilder);
-      if (!newSection || !newBlock)
-        return;
+      if (!newSection || !newBlock) return;
       newSection.children = [newBlock];
       newBlock.children = [newWidget];
       insertParts(pageBuilder, page.partId, ((_e = page.children) == null ? void 0 : _e.length) || 0, [newSection], true);
     } else if (selected.isSection()) {
       const newBlock = createBlock(pageBuilder);
-      if (!newBlock)
-        return;
+      if (!newBlock) return;
       newBlock.children = [newWidget];
       insertParts(pageBuilder, selected.partId, ((_f = selected.children) == null ? void 0 : _f.length) || 0, [newBlock], true);
     } else if (selected.isBlock()) {
@@ -12343,12 +12584,11 @@ const addPart = (pageBuilder, def, attrs) => {
       if (def2 && def2.allowsChild && def2.allowsChild(def2.partName)) {
         const target = selected;
         const index = ((_i = target.children) == null ? void 0 : _i.length) || 0;
-        if (def2.partName === "ImageWidget") {
-          if (!newWidget.properties)
-            newWidget.properties = {};
+        if (def2.partName === "ContainerWidget") {
+          if (!newWidget.properties) newWidget.properties = {};
           newWidget.properties.left = "25%";
           newWidget.properties.top = "25%";
-          newWidget.properties.width = "50%";
+          newWidget.properties.width = "40%";
         }
         insertParts(pageBuilder, target.partId, index, [newWidget], true);
       } else {
@@ -12365,14 +12605,11 @@ const addPart = (pageBuilder, def, attrs) => {
 };
 const addSectionBefore = (pageBuilder, modal, args) => {
   const selected = pageBuilder.context.getSelectedParts()[0];
-  if (!selected)
-    return;
+  if (!selected) return;
   const section = pageBuilder.partManager.findNearestSection(selected);
-  if (!section || !section.parent || !section.parent.children)
-    return;
+  if (!section || !section.parent || !section.parent.children) return;
   const newSection = createSection(pageBuilder);
-  if (!newSection)
-    return;
+  if (!newSection) return;
   const child = createBlock(pageBuilder);
   newSection.children = [child];
   const index = section.parent.children.indexOf(section);
@@ -12380,14 +12617,11 @@ const addSectionBefore = (pageBuilder, modal, args) => {
 };
 const addSectionAfter = (pageBuilder, modal, args) => {
   const selected = pageBuilder.context.getSelectedParts()[0];
-  if (!selected)
-    return;
+  if (!selected) return;
   const section = pageBuilder.partManager.findNearestSection(selected);
-  if (!section || !section.parent || !section.parent.children)
-    return;
+  if (!section || !section.parent || !section.parent.children) return;
   const newSection = createSection(pageBuilder);
-  if (!newSection)
-    return;
+  if (!newSection) return;
   const child = createBlock(pageBuilder);
   newSection.children = [child];
   const index = section.parent.children.indexOf(section) + 1;
@@ -12395,22 +12629,18 @@ const addSectionAfter = (pageBuilder, modal, args) => {
 };
 const addBlockBefore = (pageBuilder) => {
   const selected = pageBuilder.context.getSelectedParts()[0];
-  if (!selected)
-    return;
+  if (!selected) return;
   const block = pageBuilder.partManager.findNearestBlock(selected);
-  if (!block || !block.parent || !block.parent.children)
-    return;
+  if (!block || !block.parent || !block.parent.children) return;
   const newBlock = createBlock(pageBuilder);
   const index = block.parent.children.indexOf(block);
   insertParts(pageBuilder, block.parent.partId, index, [newBlock], true);
 };
 const addBlockAfter = (pageBuilder) => {
   const selected = pageBuilder.context.getSelectedParts()[0];
-  if (!selected)
-    return;
+  if (!selected) return;
   const block = pageBuilder.partManager.findNearestBlock(selected);
-  if (!block || !block.parent || !block.parent.children)
-    return;
+  if (!block || !block.parent || !block.parent.children) return;
   const newBlock = createBlock(pageBuilder);
   const index = block.parent.children.indexOf(block) + 1;
   insertParts(pageBuilder, block.parent.partId, index, [newBlock], true);
@@ -12433,11 +12663,9 @@ const addWidgetBefore = (command, pageBuilder, modal, args) => {
     return;
   }
   const widget = pageBuilder.context.getSingleSelectedWidget();
-  if (!widget || !widget.parent || !widget.parent.children)
-    return;
+  if (!widget || !widget.parent || !widget.parent.children) return;
   const newWidget = createPartWithDefinition(def, { image: args.image });
-  if (!newWidget)
-    return;
+  if (!newWidget) return;
   const index = widget.parent.children.indexOf(widget);
   insertParts(pageBuilder, widget.parent.partId, index, [newWidget], true);
 };
@@ -12459,11 +12687,9 @@ const addWidgetAfter = (command, pageBuilder, modal, args) => {
     return;
   }
   const widget = pageBuilder.context.getSingleSelectedWidget();
-  if (!widget || !widget.parent || !widget.parent.children)
-    return;
+  if (!widget || !widget.parent || !widget.parent.children) return;
   const newWidget = createPartWithDefinition(def, { image: args.image });
-  if (!newWidget)
-    return;
+  if (!newWidget) return;
   const index = widget.parent.children.indexOf(widget) + 1;
   insertParts(pageBuilder, widget.parent.partId, index, [newWidget], true);
 };
@@ -12486,14 +12712,11 @@ const addWidgetInside = (command, pageBuilder, modal, args) => {
     return;
   }
   let selected = pageBuilder.context.getSingleSelectedWidget() || pageBuilder.context.getSingleSelectedBlock();
-  if (!selected)
-    return;
+  if (!selected) return;
   const newWidget = createPartWithDefinition(def, { image: args.image });
-  if (!newWidget)
-    return;
+  if (!newWidget) return;
   if (selected.isWidget() && def.partName === "ImageWidget") {
-    if (!newWidget.properties)
-      newWidget.properties = {};
+    if (!newWidget.properties) newWidget.properties = {};
     newWidget.properties.left = "25%";
     newWidget.properties.top = "25%";
     newWidget.properties.width = "50%";
@@ -12722,8 +12945,7 @@ const _PastePartCommand = class _PastePartCommand {
     const object = JSON.parse(json);
     if (object.partType === ROOT_TYPE) {
       const rootPart = partFromJsonObject(object, true);
-      if (!rootPart)
-        throw new Error("Invalid data format");
+      if (!rootPart) throw new Error("Invalid data format");
       let partIdsToDelete = void 0;
       if (pageBuilder.model.rootPart.children && pageBuilder.model.rootPart.children.length) {
         partIdsToDelete = pageBuilder.model.rootPart.children.map((v) => v.partId);
@@ -12758,8 +12980,7 @@ const _SelectAllPartsCommand = class _SelectAllPartsCommand {
   }
   execute(pageBuilder) {
     const page = pageBuilder.context.getSelectedPage();
-    if (page)
-      pageBuilder.context.setSelection([page]);
+    if (page) pageBuilder.context.setSelection([page]);
   }
 };
 __publicField(_SelectAllPartsCommand, "COMMAND_ID", "SelectAllParts");
@@ -13091,15 +13312,12 @@ class ToolButtonRegistryImpl {
   }
   registerToolButtonGroup(group) {
     const found = this.groups.find((g) => g.groupId === group.groupId);
-    if (found)
-      group.buttons.forEach((btn) => found.buttons.push(btn));
-    else
-      this.groups.push(group);
+    if (found) group.buttons.forEach((btn) => found.buttons.push(btn));
+    else this.groups.push(group);
   }
   registerToolButtons(groupId, buttons) {
     const group = this.groups.find((g) => g.groupId === groupId);
-    if (group)
-      buttons.forEach((btn) => group.buttons.push(btn));
+    if (group) buttons.forEach((btn) => group.buttons.push(btn));
   }
   getToolButtonGroups() {
     return this.groups;
@@ -13113,8 +13331,7 @@ class PageBuilderContextImpl {
     PageBuilderEditorEvent.on.modelUpdated((changes) => {
       var _a;
       const partIds = (_a = changes.deleted) == null ? void 0 : _a.map((result) => result.partId);
-      if (partIds)
-        this.removeSelection(partIds);
+      if (partIds) this.removeSelection(partIds);
     });
   }
   setSelection(parts) {
@@ -13136,8 +13353,7 @@ class PageBuilderContextImpl {
       } else {
         index = this.selection.findIndex((sel) => sel === part);
       }
-      if (index >= 0)
-        this.selection.splice(index, 1);
+      if (index >= 0) this.selection.splice(index, 1);
     });
   }
   isSelected(part) {
@@ -13155,11 +13371,9 @@ class PageBuilderContextImpl {
   getSelectedPage() {
     const pages = this.model.rootPart.children;
     let part = this.selection[0];
-    if (!part)
-      return pages && pages[0];
+    if (!part) return pages && pages[0];
     while (part.parent) {
-      if (part.parent.isPage())
-        return part.parent;
+      if (part.parent.isPage()) return part.parent;
       part = part.parent;
     }
   }
@@ -13236,8 +13450,7 @@ class KeyHandlersImpl {
   }
   removeKeyHandler(handler) {
     const index = this.handlers.indexOf(handler);
-    if (index >= 0)
-      this.handlers.splice(index, 1);
+    if (index >= 0) this.handlers.splice(index, 1);
   }
   handleKeyDownEvent(event) {
     for (const handler of this.handlers) {
@@ -13264,8 +13477,7 @@ const providePageBuilderEditor = (pageBuilderEditor) => {
 };
 const usePageBuilderEditor = () => {
   const pageBuilderEditor = inject(PAGE_BUILDER_EDITOR_KEY);
-  if (!pageBuilderEditor)
-    throw Error("PageBuilderEditor not found");
+  if (!pageBuilderEditor) throw Error("PageBuilderEditor not found");
   return pageBuilderEditor;
 };
 class PageBuilderEditorImpl {
@@ -13285,6 +13497,8 @@ class PageBuilderEditorImpl {
     __publicField(this, "customWidgets", []);
     __publicField(this, "watchers", {});
     __publicField(this, "providers", {});
+    __publicField(this, "externalCssLinks", []);
+    __publicField(this, "externalCssContent", "");
     this.model = new Model2();
     this.context = new PageBuilderContextImpl(this);
     this.scale.value = 1;
@@ -13313,37 +13527,26 @@ class PageBuilderEditorImpl {
   }
   watchCustomWidgetData(part) {
     const def = this.partManager.getPartDefinition(part.partName);
-    if (!def || !def.dataWatcher)
-      return false;
+    if (!def || !def.dataWatcher) return false;
     const watcher = this.watchers[def.dataWatcher];
-    if (!watcher)
-      return false;
+    if (!watcher) return false;
     return watcher(part.properties);
   }
   provideCustomWidgetData(part) {
     const def = this.partManager.getPartDefinition(part.partName);
-    if (!def || !def.dataProvider)
-      return Promise.resolve();
+    if (!def || !def.dataProvider) return Promise.resolve();
     const provider = this.providers[def.dataProvider];
-    if (!provider)
-      return Promise.resolve();
+    if (!provider) return Promise.resolve();
     return provider(part.properties);
   }
   registerPlugin(plugin) {
-    if (plugin.partDefinitions)
-      this.partManager.registerPartDefinitions(plugin.partDefinitions);
-    if (plugin.partPropertyGroupEditors)
-      this.partManager.registerPartPropertyGroupEditors(plugin.partPropertyGroupEditors);
-    if (plugin.partPropertyEditors)
-      this.partManager.registerPartPropertyEditors(plugin.partPropertyEditors);
-    if (plugin.commands)
-      this.commandRegistry.registerCommands(plugin.commands);
-    if (plugin.contextMenus)
-      this.contextMenuRegistry.registerContextMenus(plugin.contextMenus);
-    if (plugin.keyHandlers)
-      this.keyHandlers.appendKeyHandlers(plugin.keyHandlers);
-    if (plugin.toolButtonGroups)
-      this.toolButtonRegistry.registerToolButtonGroups(plugin.toolButtonGroups);
+    if (plugin.partDefinitions) this.partManager.registerPartDefinitions(plugin.partDefinitions);
+    if (plugin.partPropertyGroupEditors) this.partManager.registerPartPropertyGroupEditors(plugin.partPropertyGroupEditors);
+    if (plugin.partPropertyEditors) this.partManager.registerPartPropertyEditors(plugin.partPropertyEditors);
+    if (plugin.commands) this.commandRegistry.registerCommands(plugin.commands);
+    if (plugin.contextMenus) this.contextMenuRegistry.registerContextMenus(plugin.contextMenus);
+    if (plugin.keyHandlers) this.keyHandlers.appendKeyHandlers(plugin.keyHandlers);
+    if (plugin.toolButtonGroups) this.toolButtonRegistry.registerToolButtonGroups(plugin.toolButtonGroups);
   }
   registerCustomPlugin(plugin) {
     if (plugin.widgets) {
@@ -13351,7 +13554,7 @@ class PageBuilderEditorImpl {
       plugin.widgets.forEach((v) => {
         const w = { ...v };
         w.partType = "Widget";
-        w.creator = () => _sfc_main$p;
+        w.creator = () => _sfc_main$q;
         w.propertyGroups = [...w.propertyGroups, ...defaultWidgetPropertyGroups()];
         partDefinitions2[v.partName] = w;
         const found = this.customWidgets.find((x) => x.partName === v.partName);
@@ -13370,15 +13573,21 @@ class PageBuilderEditorImpl {
     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 || "{}") || {};
     let rootPart = partFromJsonObject(_data, true);
-    if (!rootPart)
-      rootPart = new RootPart();
+    if (!rootPart) rootPart = new RootPart();
     let parts = rootPart.children;
-    if (!parts)
-      parts = [this.getEmptyPageContent(), this.getEmptyPageContent()];
+    if (!parts) parts = [this.getEmptyPageContent(), this.getEmptyPageContent()];
     if (parts.length === 1) {
       parts[0].properties = {
         ...parts[0].properties || {},
@@ -13421,11 +13630,9 @@ class PageBuilderEditorImpl {
   }
   makeSingleScreen(screenToKeep) {
     var _a;
-    if (!this.model.rootPart.children)
-      return;
+    if (!this.model.rootPart.children) return;
     const screenCount = ((_a = this.model.rootPart.children) == null ? void 0 : _a.length) || 0;
-    if (screenCount !== 2)
-      return;
+    if (screenCount !== 2) return;
     const remaining = this.model.rootPart.children[screenToKeep === 0 ? 0 : 1];
     const deleting = this.model.rootPart.children[screenToKeep === 0 ? 1 : 0];
     this.model.updateModel({
@@ -13442,16 +13649,13 @@ class PageBuilderEditorImpl {
   }
   makeMultipleScreen() {
     var _a;
-    if (!this.model.rootPart.children)
-      return;
+    if (!this.model.rootPart.children) return;
     const screenCount = ((_a = this.model.rootPart.children) == null ? void 0 : _a.length) || 0;
-    if (screenCount !== 1)
-      return;
+    if (screenCount !== 1) return;
     const part = this.model.rootPart.children[0];
     const json = this.model.serializeParts([part.partId]);
     const copied = this.model.parseParts(json);
-    if (!copied)
-      return;
+    if (!copied) return;
     copied[0].properties = {
       ...copied[0].properties || {},
       name: "Page (PC)"
@@ -13493,6 +13697,10 @@ class PageBuilderEditorImpl {
       }
     }
   }
+  getExternalCss() {
+    return `${this.externalCssLinks}
+    <style>${this.externalCssContent}</style>`;
+  }
   extractMediaFromPart(part, urls) {
     if (part.properties) {
       for (const name in part.properties) {
@@ -13510,10 +13718,8 @@ class PageBuilderEditorImpl {
       if (part.partName === "HtmlWidget" && part.properties.html) {
         for (const locale in part.properties.html) {
           const html = part.properties.html[locale];
-          if (html.tags)
-            this.extractMediaFromHtml(html.tags, urls);
-          if (html.style)
-            this.extractMediaFromHtml(html.style, urls);
+          if (html.tags) this.extractMediaFromHtml(html.tags, urls);
+          if (html.style) this.extractMediaFromHtml(html.style, urls);
         }
       }
     }
@@ -13591,200 +13797,8 @@ class PageBuilderEditorImpl {
     });
   }
 }
-const _hoisted_1$b = /* @__PURE__ */ createElementVNode("i", { class: "material-icons-outlined" }, "add_circle_outline", -1);
-const _hoisted_2$3 = [
-  _hoisted_1$b
-];
+const _hoisted_1$b = { class: "pb-tool-button bs-layout-horizontal flex-align-center" };
 const _sfc_main$c = /* @__PURE__ */ defineComponent({
-  __name: "PbPage",
-  props: {
-    page: {},
-    width: {},
-    isMobilePage: { type: Boolean }
-  },
-  setup(__props) {
-    const props = __props;
-    const editor = usePageBuilderEditor();
-    const style = 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"
-      };
-    });
-    const properties = computed(() => {
-      var _a;
-      return { style: ((_a = props.page) == null ? void 0 : _a.getStyles()) || {} };
-    });
-    const selected = computed(() => !!props.page && editor.context.isSelected(props.page));
-    const insertSection = (index) => {
-      if (!props.page)
-        return;
-      editor.commandRegistry.executeCommand(AddSectionCommand.COMMAND_ID);
-    };
-    return (_ctx, _cache) => {
-      var _a;
-      return openBlock(), createElementBlock("div", {
-        style: normalizeStyle(style.value),
-        class: "pb-page"
-      }, [
-        createElementVNode("div", mergeProps({
-          class: [selected.value && "selected", _ctx.isMobilePage ? "mobile" : "pc", "pb-page-content"]
-        }, properties.value), [
-          (openBlock(true), createElementBlock(Fragment, null, renderList((_a = _ctx.page) == null ? void 0 : _a.children, (section, index) => {
-            return openBlock(), createBlock$1(_sfc_main$k, {
-              key: section.partId,
-              part: section
-            }, null, 8, ["part"]);
-          }), 128))
-        ], 16),
-        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$3)
-      ], 4);
-    };
-  }
-});
-const _hoisted_1$a = /* @__PURE__ */ createElementVNode("div", { style: { "width": "20px" } }, null, -1);
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
-  __name: "PbCanvas",
-  setup(__props) {
-    const pageBuilder = usePageBuilderEditor();
-    const pageS = computed(() => {
-      var _a;
-      return (_a = pageBuilder.model.rootPart.children) == null ? void 0 : _a[0];
-    });
-    const pageL = computed(() => {
-      var _a;
-      return (_a = pageBuilder.model.rootPart.children) == null ? void 0 : _a[1];
-    });
-    const handleClick = (event) => {
-      if (event.button === 0) {
-        pageBuilder.context.clearSelection();
-      }
-    };
-    const contextMenu = useContextMenu();
-    const style = computed(() => {
-      const scale = pageBuilder.scale.value;
-      return `transform: scale(${scale}); flex-grow: 1;`;
-    });
-    const showContextMenu = (event) => {
-      var _a, _b;
-      if (event.altKey || event.ctrlKey || event.shiftKey)
-        return;
-      event.preventDefault();
-      const frame = ((_b = (_a = event.target) == null ? void 0 : _a.ownerDocument.defaultView) == null ? void 0 : _b.frameElement) || void 0;
-      const frameLeft = (frame == null ? void 0 : frame.offsetLeft) || 0;
-      const frameTop = (frame == null ? void 0 : frame.offsetTop) || 0;
-      const fakeEvent = {
-        clientX: event.clientX + frameLeft,
-        clientY: event.clientY + frameTop
-      };
-      const contextMenus = pageBuilder.contextMenuRegistry.composeContextMenuItems(pageBuilder);
-      contextMenu.showContextMenu(fakeEvent, contextMenus);
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: "pb-canvas-wrapper",
-        onContextmenu: showContextMenu,
-        onMousedown: withModifiers(handleClick, ["stop"])
-      }, [
-        createElementVNode("div", {
-          style: normalizeStyle(style.value),
-          class: "pb-canvas"
-        }, [
-          createVNode(_sfc_main$c, {
-            "is-mobile-page": true,
-            page: pageS.value,
-            width: 420
-          }, null, 8, ["page"]),
-          _hoisted_1$a,
-          createVNode(_sfc_main$c, {
-            "is-mobile-page": false,
-            page: pageL.value,
-            width: 1024
-          }, null, 8, ["page"])
-        ], 4)
-      ], 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 _hoisted_1$9 = { class: "pb-canvas-frame" };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
-  __name: "PbCanvasFrame",
-  setup(__props) {
-    const pageBuilderEditor = usePageBuilderEditor();
-    const iframeRef = ref();
-    provideMouseTracker(iframeRef);
-    const stopIframeWatch = watch(
-      () => {
-        var _a, _b;
-        return (_b = (_a = iframeRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document;
-      },
-      () => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        if ((_c = (_b = (_a = iframeRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document) == null ? void 0 : _c.head) {
-          const head = (_e = (_d = iframeRef.value) == null ? void 0 : _d.contentWindow) == null ? void 0 : _e.document.head;
-          head.innerHTML = `
-          <meta charset="UTF-8"/>
-          <link href="https://fonts.googleapis.com" rel="preconnect">
-          <link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
-          <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500&display=swap" rel="stylesheet">
-          <link
-              href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500&family=Noto+Sans:wght@400;500&display=swap"
-              rel="stylesheet">
-          <link
-              href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&family=Noto+Sans+KR:wght@400;500&family=Noto+Sans:wght@400;500&display=swap"
-              rel="stylesheet">
-          <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" />
-          <style>${canvasStyle}</style>
-        `;
-          const script2 = (_g = (_f = iframeRef.value) == null ? void 0 : _f.contentWindow) == null ? void 0 : _g.document.createElement("script");
-          script2.innerHTML = `
-          function forwardPostMessage(event) {
-            if (event.data) {
-              window.parent.postMessage(event.data, '*');
-            }
-          }
-          window.addEventListener('message', forwardPostMessage);
-        `;
-          (_h = iframeRef.value) == null ? void 0 : _h.contentWindow.document.head.appendChild(script2);
-          pageBuilderEditor.keyHandlers.addDocumentKeyEventListener(iframeRef.value.contentWindow.document.body);
-          stopIframeWatch();
-        }
-      }
-    );
-    return (_ctx, _cache) => {
-      var _a, _b, _c, _d;
-      return openBlock(), createElementBlock("div", _hoisted_1$9, [
-        createElementVNode("iframe", {
-          ref_key: "iframeRef",
-          ref: iframeRef,
-          class: "canvas-frame"
-        }, null, 512),
-        ((_b = (_a = iframeRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document.body) ? (openBlock(), createBlock$1(Teleport, {
-          key: 0,
-          to: (_d = (_c = iframeRef.value) == null ? void 0 : _c.contentWindow) == null ? void 0 : _d.document.body
-        }, [
-          createVNode(_sfc_main$b)
-        ], 8, ["to"])) : createCommentVNode("", true)
-      ]);
-    };
-  }
-});
-const _hoisted_1$8 = { class: "pb-tool-button bs-layout-horizontal flex-align-center" };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "PbToolbarButton",
   props: {
     button: {}
@@ -13797,7 +13811,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       (_b = (_a = props.button).handler) == null ? void 0 : _b.call(_a, pageBuilder);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$8, [
+      return openBlock(), createElementBlock("div", _hoisted_1$b, [
         createElementVNode("div", {
           class: "tool-button bs-clickable",
           onClick: handleClick
@@ -13812,17 +13826,17 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$7 = { class: "pb-tool-button-group bs-layout-horizontal flex-align-center" };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$a = { class: "pb-tool-button-group bs-layout-horizontal flex-align-center" };
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "PbToolbarButtonGroup",
   props: {
     group: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$7, [
+      return openBlock(), createElementBlock("div", _hoisted_1$a, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.group.buttons, (button) => {
-          return openBlock(), createBlock$1(_sfc_main$9, {
+          return openBlock(), createBlock$1(_sfc_main$c, {
             key: button.buttonId,
             button
           }, null, 8, ["button"]);
@@ -13831,11 +13845,10 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$6 = { class: "pb-toolbar bs-layout-horizontal align-items-center" };
-const _hoisted_2$2 = { class: "bs-layout-horizontal align-items-center" };
-const _hoisted_3$1 = /* @__PURE__ */ createElementVNode("div", { class: "flex-grow-1" }, null, -1);
-const _hoisted_4 = { class: "mr-8" };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$9 = { class: "pb-toolbar bs-layout-horizontal align-items-center" };
+const _hoisted_2$3 = { class: "bs-layout-horizontal align-items-center" };
+const _hoisted_3$1 = { class: "mr-8" };
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "PbToolbar",
   props: {
     plugin: {}
@@ -13851,11 +13864,9 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       },
       set: (count) => {
         var _a;
-        if (!count)
-          return;
+        if (!count) return;
         console.log(count);
-        if (count === (((_a = pageBuilder.model.rootPart.children) == null ? void 0 : _a.length) || 0))
-          return;
+        if (count === (((_a = pageBuilder.model.rootPart.children) == null ? void 0 : _a.length) || 0)) return;
         if (count >= 2) {
           makeMultipleScreen();
         } else {
@@ -13868,7 +13879,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
     const makeSingleScreen = () => {
       modal.openModal({
-        component: defineAsyncComponent(() => import("./PbScreenSelectModal-DDATc9n1.js")),
+        component: defineAsyncComponent(() => import("./PbScreenSelectModal-CnI1IsvW.js")),
         bind: {},
         on: {
           select: (selection) => {
@@ -13886,10 +13897,10 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       var _a, _b, _c;
-      return openBlock(), createElementBlock("div", _hoisted_1$6, [
-        createElementVNode("div", _hoisted_2$2, [
+      return openBlock(), createElementBlock("div", _hoisted_1$9, [
+        createElementVNode("div", _hoisted_2$3, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(buttonGroups), (group) => {
-            return openBlock(), createBlock$1(_sfc_main$8, {
+            return openBlock(), createBlock$1(_sfc_main$b, {
               key: group.groupId,
               group
             }, null, 8, ["group"]);
@@ -13911,30 +13922,30 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             placeholder: "Scale"
           }, null, 8, ["modelValue"])
         ]),
-        _hoisted_3$1,
-        createElementVNode("div", _hoisted_4, [
+        _cache[2] || (_cache[2] = createElementVNode("div", { class: "flex-grow-1" }, null, -1)),
+        createElementVNode("div", _hoisted_3$1, [
           _ctx.plugin ? (openBlock(), createBlock$1(resolveDynamicComponent((_a = _ctx.plugin) == null ? void 0 : _a.component), mergeProps({ key: 0 }, (_b = _ctx.plugin) == null ? void 0 : _b.bind, toHandlers((_c = _ctx.plugin) == null ? void 0 : _c.on)), null, 16)) : createCommentVNode("", true)
         ])
       ]);
     };
   }
 });
-const _hoisted_1$5 = { class: "pb-menu bs-layout-vertical" };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$8 = { class: "pb-menu bs-layout-vertical" };
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "PbMenu",
   props: {
     toolbarPlugin: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$5, [
-        createVNode(_sfc_main$7, { plugin: _ctx.toolbarPlugin }, null, 8, ["plugin"])
+      return openBlock(), createElementBlock("div", _hoisted_1$8, [
+        createVNode(_sfc_main$a, { plugin: _ctx.toolbarPlugin }, null, 8, ["plugin"])
       ]);
     };
   }
 });
-const _hoisted_1$4 = { class: "bs-layout-vertical border" };
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$7 = { class: "bs-layout-vertical border" };
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "PbNavigator",
   setup(__props) {
     const pageBuilder = usePageBuilderEditor();
@@ -13976,21 +13987,17 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       var _a, _b, _c, _d, _e, _f;
       let page2 = pageBuilder.context.getSelectedPage();
       const parentPartId = ((_a = event.destParent) == null ? void 0 : _a.partId) || (page2 == null ? void 0 : page2.partId);
-      if (!parentPartId)
-        return;
+      if (!parentPartId) return;
       let ok = false;
       if (event.row.isSection()) {
-        if ((_b = event.destParent) == null ? void 0 : _b.isPage())
-          ok = true;
+        if ((_b = event.destParent) == null ? void 0 : _b.isPage()) ok = true;
       } else if (event.row.isBlock()) {
-        if ((_c = event.destParent) == null ? void 0 : _c.isSection())
-          ok = true;
+        if ((_c = event.destParent) == null ? void 0 : _c.isSection()) ok = true;
       } else if (event.row.isWidget()) {
         if ((_d = event.destParent) == null ? void 0 : _d.isBlock()) {
           ok = true;
         } else if (((_e = event.destParent) == null ? void 0 : _e.isWidget()) && !event.destParent.isNestedWidget()) {
-          if (!((_f = event.row.children) == null ? void 0 : _f.length))
-            ok = true;
+          if (!((_f = event.row.children) == null ? void 0 : _f.length)) ok = true;
         }
       }
       if (ok) {
@@ -14027,8 +14034,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       },
       () => {
         const selected = pageBuilder.context.getSelectedParts();
-        if (!selected || !selected[0])
-          return;
+        if (!selected || !selected[0]) return;
         expandParent(selected[0]);
       }
     );
@@ -14061,7 +14067,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       PageBuilderEditorEvent.off.modelUpdatedByUI(modelUpdateHandler);
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$4, [
+      return openBlock(), createElementBlock("div", _hoisted_1$7, [
         createElementVNode("div", {
           ref_key: "tree",
           ref: tree,
@@ -14094,7 +14100,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "PbSidebarPropertyEditor",
   props: {
     property: {},
@@ -14107,8 +14113,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       var _a;
       if (props.property.propertyEditor) {
         const editor = props.property.propertyEditor(props.property, props.selectedParts);
-        if (editor)
-          return editor;
+        if (editor) return editor;
       }
       return (_a = pageBuilder.partManager.getPartPropertyEditor(props.property.propertyType)) == null ? void 0 : _a(props.property, props.selectedParts);
     });
@@ -14130,13 +14135,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$3 = { class: "pb-sidebar-property-group" };
-const _hoisted_2$1 = {
+const _hoisted_1$6 = { class: "pb-sidebar-property-group" };
+const _hoisted_2$2 = {
   key: 0,
   class: "group-title"
 };
 const _hoisted_3 = ["textContent"];
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "PbSidebarPropertyGroupEditor",
   props: {
     group: {},
@@ -14150,8 +14155,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       return (_b = (_a = props.group).propertyGroupEditor) == null ? void 0 : _b.call(_a, props.group, props.selectedParts);
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$3, [
-        _ctx.group.showGroupName ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
+      return openBlock(), createElementBlock("div", _hoisted_1$6, [
+        _ctx.group.showGroupName ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
           createElementVNode("label", {
             textContent: toDisplayString(_ctx.group.caption)
           }, null, 8, _hoisted_3)
@@ -14162,7 +14167,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
             group: _ctx.group,
             "selected-parts": _ctx.selectedParts
           }, null, 8, ["group", "selected-parts"])) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.group.properties, (property) => {
-            return openBlock(), createBlock$1(_sfc_main$4, {
+            return openBlock(), createBlock$1(_sfc_main$7, {
               key: `${_ctx.partsKey}_${property.propertyName}`,
               property,
               "selected-parts": _ctx.selectedParts
@@ -14173,8 +14178,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$2 = { class: "pb-sidebar-properties" };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$5 = { class: "pb-sidebar-properties" };
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "PbSidebarProperties",
   setup(__props) {
     const pageBuilder = usePageBuilderEditor();
@@ -14192,12 +14197,12 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+      return openBlock(), createElementBlock("div", _hoisted_1$5, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(properties.value, (group) => {
           return openBlock(), createElementBlock("div", {
             key: `${partsKey.value}_${group.groupName}`
           }, [
-            createVNode(_sfc_main$3, {
+            createVNode(_sfc_main$6, {
               group,
               partsKey: partsKey.value,
               "selected-parts": unref(selectedParts)
@@ -14208,13 +14213,275 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$1 = { class: "pb-sidebar" };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$4 = { class: "pb-sidebar" };
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "PbSidebar",
   setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$4, [
+        createVNode(_sfc_main$5)
+      ]);
+    };
+  }
+});
+const _hoisted_1$3 = ["data-part-id"];
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "PbPage",
+  props: {
+    part: {},
+    width: {},
+    isMobilePage: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const editor = usePageBuilderEditor();
+    const styleTag = computed(() => props.part.getStyleTag());
+    const style = computed(() => {
+      var _a, _b;
+      return {
+        // width: `${props.width || 420}px`,
+        minHeight: ((_b = (_a = props.part) == null ? void 0 : _a.children) == null ? void 0 : _b.length) ? void 0 : "200px"
+      };
+    });
+    const properties = computed(() => {
+      var _a, _b;
+      return {
+        style: {
+          ...(_a = props.part) == null ? void 0 : _a.getStyles(),
+          ...(_b = props.part) == null ? void 0 : _b.getInlineStyles()
+        }
+      };
+    });
+    const selected = computed(() => !!props.part && editor.context.isSelected(props.part));
+    const insertSection = (index) => {
+      editor.commandRegistry.executeCommand(AddSectionCommand.COMMAND_ID);
+    };
+    const pageBuilder = usePageBuilderEditor();
+    const contextMenu = useContextMenu();
+    const handleClick = (event) => {
+      if (event.button === 0) {
+        pageBuilder.context.clearSelection();
+      }
+    };
+    const showContextMenu = (event) => {
+      var _a, _b;
+      if (event.altKey || event.ctrlKey || event.shiftKey) return;
+      event.preventDefault();
+      const frame = ((_b = (_a = event.target) == null ? void 0 : _a.ownerDocument.defaultView) == null ? void 0 : _b.frameElement) || void 0;
+      const frameRect = frame == null ? void 0 : frame.getBoundingClientRect();
+      const fakeEvent = {
+        clientX: event.clientX + frameRect.left,
+        clientY: event.clientY + frameRect.top
+      };
+      const contextMenus = pageBuilder.contextMenuRegistry.composeContextMenuItems(pageBuilder);
+      contextMenu.showContextMenu(fakeEvent, contextMenus);
+    };
+    return (_ctx, _cache) => {
+      var _a, _b;
+      return openBlock(), createElementBlock(Fragment, null, [
+        styleTag.value ? (openBlock(), createBlock$1(resolveDynamicComponent("style"), {
+          key: 0,
+          innerHTML: styleTag.value
+        }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
+        createElementVNode("div", {
+          "data-part-id": (_a = _ctx.part) == null ? void 0 : _a.partId,
+          style: normalizeStyle(style.value),
+          class: "pb-page",
+          onContextmenu: showContextMenu,
+          onMousedown: withModifiers(handleClick, ["stop"])
+        }, [
+          createElementVNode("div", mergeProps({
+            class: [selected.value && "selected", _ctx.isMobilePage ? "mobile" : "pc", "pb-page-content"]
+          }, properties.value), [
+            (openBlock(true), createElementBlock(Fragment, null, renderList((_b = _ctx.part) == null ? void 0 : _b.children, (section, index) => {
+              return openBlock(), createBlock$1(_sfc_main$l, {
+                key: section.partId,
+                part: section
+              }, null, 8, ["part"]);
+            }), 128))
+          ], 16),
+          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);
+            })
+          }, _cache[1] || (_cache[1] = [
+            createElementVNode("i", { class: "material-icons-outlined" }, "add_circle_outline", -1)
+          ]))
+        ], 44, _hoisted_1$3),
+        _cache[2] || (_cache[2] = createElementVNode("div", { style: { "height": "100px" } }, null, -1))
+      ], 64);
+    };
+  }
+});
+const canvasStyle = '.pb-page-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\n\n.pb-page {\n  width: 100%;\n  margin: 0;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n.pb-page .pb-page-content.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\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::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\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::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\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::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\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 .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-image-widget .placeholder 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-youtube-widget {\n  width: 100%;\n}\n\n.pb-youtube-widget .youtube {\n  width: 100%;\n  height: 100%;\n}\n\n.pb-youtube-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-youtube-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-container-widget {\n  width: 100%;\n}\n\n.pb-container-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-container-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\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: hidden;\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}';
+const _hoisted_1$2 = ["height", "width"];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "PbPageFrame",
+  props: {
+    part: {},
+    width: {},
+    isMobilePage: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const pageBuilderEditor = usePageBuilderEditor();
+    const iframeRef = ref();
+    provideMouseTracker(iframeRef);
+    const stopIframeWatch = watch(
+      () => {
+        var _a, _b;
+        return (_b = (_a = iframeRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document;
+      },
+      () => {
+        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"/>
+          <link href="https://fonts.googleapis.com" rel="preconnect">
+          <link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
+          <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500&display=swap" rel="stylesheet">
+          <link
+              href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500&family=Noto+Sans:wght@400;500&display=swap"
+              rel="stylesheet">
+          <link
+              href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&family=Noto+Sans+KR:wght@400;500&family=Noto+Sans:wght@400;500&display=swap"
+              rel="stylesheet">
+          <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://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");
+          script2.innerHTML = `
+          function forwardPostMessage(event) {
+            if (event.data) {
+              console.log(event)
+              window.parent.postMessage(event.data, '*');
+            }
+          }
+          window.addEventListener('message', forwardPostMessage);
+        `;
+          (_h = iframeRef.value) == null ? void 0 : _h.contentWindow.document.head.appendChild(script2);
+          pageBuilderEditor.keyHandlers.addDocumentKeyEventListener(iframeRef.value.contentWindow.document.body);
+          stopIframeWatch();
+        }
+      }
+    );
+    const width = ref(props.width);
+    const height = ref(200);
+    const style = computed(() => ({
+      // width: `${width.value}px`,
+      // height: `${height.value}px`,
+    }));
+    let iframeObserver;
+    const updateIframeHeight = () => {
+      if (!iframeRef.value || !iframeRef.value.contentDocument) return;
+      const iframeBody = iframeRef.value.contentDocument.body;
+      if (iframeBody) {
+        height.value = iframeBody.scrollHeight;
+      }
+    };
+    onMounted(() => {
+      if (!iframeRef.value || !iframeRef.value.contentDocument) return;
+      const iframeBody = iframeRef.value.contentDocument.body;
+      iframeObserver = new MutationObserver(updateIframeHeight);
+      iframeObserver.observe(iframeBody, { childList: true, subtree: true });
+      iframeRef.value.onload = updateIframeHeight;
+    });
+    onBeforeUnmount(() => {
+      if (iframeObserver) {
+        iframeObserver.disconnect();
+      }
+    });
+    return (_ctx, _cache) => {
+      var _a, _b, _c, _d;
+      return openBlock(), createElementBlock("div", {
+        style: normalizeStyle({ width: `${width.value}px` }),
+        class: "pb-page-frame"
+      }, [
+        createVNode(unref(BSSelect), {
+          modelValue: width.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => width.value = $event),
+          items: [480, 768, 1024, 1280],
+          "label-provider": (v) => `Screen Size: ${v}px`,
+          "value-provider": (v) => v,
+          "view-model": false
+        }, null, 8, ["modelValue", "label-provider", "value-provider"]),
+        createElementVNode("iframe", {
+          ref_key: "iframeRef",
+          ref: iframeRef,
+          height: `${height.value}px`,
+          style: normalizeStyle(style.value),
+          width: `${width.value}px`,
+          class: "page-frame mt-12"
+        }, null, 12, _hoisted_1$2),
+        ((_b = (_a = iframeRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document.body) ? (openBlock(), createBlock$1(Teleport, {
+          key: 0,
+          to: (_d = (_c = iframeRef.value) == null ? void 0 : _c.contentWindow) == null ? void 0 : _d.document.body
+        }, [
+          createVNode(_sfc_main$3, {
+            "is-mobile-page": _ctx.isMobilePage,
+            part: _ctx.part,
+            width: width.value
+          }, null, 8, ["is-mobile-page", "part", "width"])
+        ], 8, ["to"])) : createCommentVNode("", true)
+      ], 4);
+    };
+  }
+});
+const _hoisted_1$1 = { class: "pb-canvas-wrapper" };
+const _hoisted_2$1 = {
+  key: 1,
+  style: { "width": "20px" }
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "PbCanvas",
+  setup(__props) {
+    const pageBuilder = usePageBuilderEditor();
+    const partS = computed(() => {
+      var _a;
+      return (_a = pageBuilder.model.rootPart.children) == null ? void 0 : _a[0];
+    });
+    const partL = computed(() => {
+      var _a;
+      return (_a = pageBuilder.model.rootPart.children) == null ? void 0 : _a[1];
+    });
+    useContextMenu();
+    const style = computed(() => {
+      const scale = pageBuilder.scale.value;
+      return {
+        style: {
+          transform: `scale(${scale})`
+        }
+      };
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$1, [
-        createVNode(_sfc_main$2)
+        createElementVNode("div", mergeProps({ class: "pb-canvas" }, style.value), [
+          partS.value ? (openBlock(), createBlock$1(_sfc_main$2, {
+            key: 0,
+            "is-mobile-page": true,
+            part: partS.value,
+            width: 480
+          }, null, 8, ["part"])) : createCommentVNode("", true),
+          partL.value ? (openBlock(), createElementBlock("div", _hoisted_2$1)) : createCommentVNode("", true),
+          partL.value ? (openBlock(), createBlock$1(_sfc_main$2, {
+            key: 2,
+            "is-mobile-page": false,
+            part: partL.value,
+            width: 1024
+          }, null, 8, ["part"])) : createCommentVNode("", true)
+        ], 16)
       ]);
     };
   }
@@ -14238,12 +14505,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const pageBuilderEditor = createPageBuilderEditor();
     pageBuilderEditor.instanceId = props.instanceId;
     pageBuilderEditor.title = props.title;
-    if (props.locales)
-      pageBuilderEditor.setLocales(props.locales);
-    if (props.locale)
-      pageBuilderEditor.setLocale(props.locale);
-    if (props.plugin)
-      pageBuilderEditor.registerCustomPlugin(props.plugin);
+    if (props.locales) pageBuilderEditor.setLocales(props.locales);
+    if (props.locale) pageBuilderEditor.setLocale(props.locale);
+    if (props.plugin) pageBuilderEditor.registerCustomPlugin(props.plugin);
     pageBuilderEditor.registerPlugin({
       // TODO
       commands: createDefaultCommands(modal)
@@ -14271,18 +14535,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        createVNode(_sfc_main$6, { "toolbar-plugin": _ctx.toolbarPlugin }, null, 8, ["toolbar-plugin"]),
+        createVNode(_sfc_main$9, { "toolbar-plugin": _ctx.toolbarPlugin }, null, 8, ["toolbar-plugin"]),
         createElementVNode("div", _hoisted_2, [
-          createVNode(_sfc_main$5),
-          createVNode(_sfc_main$a, { class: "flex-grow-1" }),
-          createVNode(_sfc_main$1)
+          createVNode(_sfc_main$8),
+          createVNode(_sfc_main$1),
+          createVNode(_sfc_main$4)
         ])
       ]);
     };
   }
 });
 export {
+  usePageBuilder as A,
   BLOCK_TYPE$1 as B,
+  usePageBuilderViewer as C,
   Model$1 as M,
   PbColorPicker as P,
   ROOT_TYPE$1 as R,
@@ -14294,23 +14560,25 @@ export {
   PAGE_BUILDER_KEY as c,
   PAGE_TYPE$1 as d,
   Page as e,
-  _sfc_main$1$1 as f,
+  _sfc_main$2$1 as f,
   Part as g,
-  _sfc_main$p as h,
-  _sfc_main$4$1 as i,
-  _sfc_main$3$1 as j,
-  _sfc_main$6$1 as k,
-  _sfc_main$5$1 as l,
-  RootPart as m,
-  Section as n,
-  Widget as o,
-  createPageBuilderViewer as p,
-  createPartComponent as q,
-  createPartComponents as r,
-  providePageBuilder as s,
-  providePageBuilderViewer as t,
+  _sfc_main$1$1 as h,
+  _sfc_main$q as i,
+  _sfc_main$6$1 as j,
+  _sfc_main$5$1 as k,
+  _sfc_main$8$1 as l,
+  _sfc_main$7$1 as m,
+  _sfc_main$4$1 as n,
+  RootPart as o,
+  Section as p,
+  Widget as q,
+  createPageBuilderViewer as r,
+  selectYoutubeVideo as s,
+  createPartComponent as t,
   usePageBuilderEditor as u,
-  usePageBuilder as v,
+  createPartComponents as v,
   widgetPartDefinitions as w,
-  usePageBuilderViewer as x
+  getPartClassName as x,
+  providePageBuilder as y,
+  providePageBuilderViewer as z
 };