@g1cloud/page-builder-editor 1.0.0-alpha.36 → 1.0.0-alpha.38

package/css/page-builder-editor.scss

@@ -208,6 +208,10 @@
 }
 
 .pb-part-add-modal {
+  .section-title {
+    font-weight: 700;
+  }
+
   .group {
 
     .part {

package/css/page-page.scss

@@ -6,14 +6,18 @@
 .pb-page {
   display: flex;
   flex-direction: column;
-  margin: 0 auto;
-  padding-bottom: 100px;
+  align-items: center;
   width: 100%;
+  padding-bottom: 100px;
   background-position: 50% 50%;
   background-repeat: no-repeat;
   background-size: cover;
 
   .pb-page-content {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
     &.selected::before {
       content: "";
       position: absolute;

package/css/page.scss

@@ -10,11 +10,6 @@
   max-width: 1em;
 }
 
-html, body {
-  font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;
-  font-size: 12px;
-}
-
 body {
   margin: 0;
   padding: 0;
@@ -22,6 +17,12 @@ body {
   overflow: hidden;
 }
 
+.font-icon {
+  font-family: "Material Symbols Outlined", monospace;
+  font-size: 1rem;
+  max-width: 1em;
+}
+
 .pb-position-mark {
   background-color: #ff3333;
   opacity: 0.5;
@@ -54,7 +55,6 @@ body {
   }
 
   &.bottom {
-    left: 50%;
     bottom: -32px;
   }
 
@@ -68,6 +68,8 @@ body {
   }
 
   > i {
+    font-family: "Material Symbols Outlined", monospace;
+    font-style: normal;
     vertical-align: middle;
     position: absolute;
     top: 50%;

package/dist/{PbPropertyEditorColor-BPku9nyl.js → PbPropertyEditorColor-w19UyXyL.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, createVNode, unref } from "vue";
 import { BSTextInput } from "@g1cloud/bluesea";
-import { P as PbColorPicker } from "./index-BPKptjBm.js";
+import { P as PbColorPicker } from "./index-DsIuGIwL.js";
 const _hoisted_1 = { class: "property-editor property-editor-color" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{PbPropertyEditorHtml-eYbeszpS.js → PbPropertyEditorHtml-DXWHj2CD.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, defineAsyncComponent } from "vue";
 import { useModal } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-BPKptjBm.js";
+import { u as usePageBuilderEditor } from "./index-DsIuGIwL.js";
 const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{PbPropertyEditorImage-DnUH6vkj.js → PbPropertyEditorImage-C5nERuUJ.js}

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
-import { u as usePageBuilderEditor } from "./index-BPKptjBm.js";
+import { u as usePageBuilderEditor } from "./index-DsIuGIwL.js";
 import { useModal } from "@g1cloud/bluesea";
 const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
 const _hoisted_2 = { class: "title" };

package/dist/{PbPropertyEditorMultilineText-BaMj-tr_.js → PbPropertyEditorMultilineText-CNr5khDs.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createBlock, unref } from "vue";
 import { BSMultiLangTextArea, BSTextArea } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-BPKptjBm.js";
+import { u as usePageBuilderEditor } from "./index-DsIuGIwL.js";
 const _hoisted_1 = { class: "property-editor property-editor-multiline-text" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{PbPropertyEditorText-OLBLie3k.js → PbPropertyEditorText-Dv0fJMe9.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createBlock, unref } from "vue";
 import { BSMultiLangTextInput, BSTextInput } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-BPKptjBm.js";
+import { u as usePageBuilderEditor } from "./index-DsIuGIwL.js";
 const _hoisted_1 = { class: "property-editor property-editor-text flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{PbPropertyEditorYoutube-DRCsiJt3.js → PbPropertyEditorYoutube-DrPrai1y.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
 import { useModal } from "@g1cloud/bluesea";
-import { s as selectYoutubeVideo } from "./index-BPKptjBm.js";
+import { s as selectYoutubeVideo } from "./index-DsIuGIwL.js";
 const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = ["textContent"];

package/dist/{PbWidgetAddModal-CvBeNnPx.js → PbWidgetAddModal-D3QjBrfz.js}

@@ -1,12 +1,13 @@
 import { defineComponent, computed, openBlock, createBlock, unref, withCtx, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString } from "vue";
 import { useModalHandle, BSModalFrame } from "@g1cloud/bluesea";
-import { w as widgetPartDefinitions } from "./index-BPKptjBm.js";
+import { w as widgetPartDefinitions } from "./index-DsIuGIwL.js";
 const _hoisted_1 = { class: "bs-layout-vertical pb-part-add-modal" };
 const _hoisted_2 = { class: "bs-layout-horizontal-wrap ml-16 mb-8 gap-8" };
 const _hoisted_3 = ["onClick", "textContent"];
 const _hoisted_4 = { class: "group mb-16" };
-const _hoisted_5 = { class: "bs-layout-horizontal-wrap ml-16 mb-8 gap-8" };
-const _hoisted_6 = ["onClick", "textContent"];
+const _hoisted_5 = ["textContent"];
+const _hoisted_6 = { class: "bs-layout-horizontal-wrap ml-16 mb-8 gap-8" };
+const _hoisted_7 = ["onClick", "textContent"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "PbWidgetAddModal",
   props: {
@@ -25,7 +26,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       modalHandle.close();
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(BSModalFrame), { title: "Add Block/Widget" }, {
+      return openBlock(), createBlock(unref(BSModalFrame), { title: "Add Widget" }, {
         default: withCtx(() => [
           createElementVNode("div", _hoisted_1, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(widgetPartDefinitions), (group) => {
@@ -34,14 +35,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 class: "group mb-16"
               }, [
                 _cache[0] || (_cache[0] = createElementVNode("div", {
-                  class: "mb-8",
+                  class: "mb-8 section-title",
                   textContent: "Basic Widgets"
                 }, null, -1)),
                 createElementVNode("div", _hoisted_2, [
                   (openBlock(true), createElementBlock(Fragment, null, renderList(group.partDefinitions, (part) => {
                     return openBlock(), createElementBlock("div", {
                       key: part.partName,
-                      class: "part",
+                      class: "part w-200",
                       onClick: ($event) => select(part),
                       textContent: toDisplayString(part.caption)
                     }, null, 8, _hoisted_3);
@@ -49,22 +50,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ])
               ]);
             }), 128)),
-            createElementVNode("div", _hoisted_4, [
-              _cache[1] || (_cache[1] = createElementVNode("div", {
-                class: "mb-8",
-                textContent: "Custom Widgets"
-              }, null, -1)),
-              createElementVNode("div", _hoisted_5, [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(customWidgets.value, (part) => {
-                  return openBlock(), createElementBlock("div", {
-                    key: part.partName,
-                    class: "part",
-                    onClick: ($event) => select(part),
-                    textContent: toDisplayString(part.caption)
-                  }, null, 8, _hoisted_6);
-                }), 128))
-              ])
-            ])
+            (openBlock(true), createElementBlock(Fragment, null, renderList(customWidgets.value, (group) => {
+              return openBlock(), createElementBlock("div", _hoisted_4, [
+                createElementVNode("div", {
+                  class: "mb-8 section-title",
+                  textContent: toDisplayString(group.caption)
+                }, null, 8, _hoisted_5),
+                createElementVNode("div", _hoisted_6, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(group.partDefinitions, (part) => {
+                    return openBlock(), createElementBlock("div", {
+                      key: part.partName,
+                      class: "part w-200",
+                      onClick: ($event) => select(part),
+                      textContent: toDisplayString(part.caption)
+                    }, null, 8, _hoisted_7);
+                  }), 128))
+                ])
+              ]);
+            }), 256))
           ])
         ]),
         _: 1

package/dist/{index-BPKptjBm.js → index-DsIuGIwL.js}

@@ -6715,19 +6715,23 @@ class Part {
     }
   }
   getStyles(isMobilePage) {
-    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, _Q;
+    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, _Q, _R;
     const style = {};
     if (((_a = this.properties) == null ? void 0 : _a.direction) === "horizontal") {
       style.flexDirection = "row";
-    } else {
+    } else if (((_b = this.properties) == null ? void 0 : _b.direction) === "vertical") {
+      style.flexDirection = "column";
+    } else if (this.isSection()) {
+      style.flexDirection = "row";
+    } else if (this.isBlock()) {
       style.flexDirection = "column";
     }
-    if (((_b = this.properties) == null ? void 0 : _b.wrap) === "wrap") {
+    if (((_c = this.properties) == null ? void 0 : _c.wrap) === "wrap") {
       style.flexWrap = "wrap";
     }
-    const alignItems = this.getAlignStyleValue((_c = this.properties) == null ? void 0 : _c.alignItems);
-    const justifyContent = this.getAlignStyleValue((_d = this.properties) == null ? void 0 : _d.justifyContent);
-    const alignSelf = this.getAlignStyleValue((_e = this.properties) == null ? void 0 : _e.alignSelf);
+    const alignItems = this.getAlignStyleValue((_d = this.properties) == null ? void 0 : _d.alignItems);
+    const justifyContent = this.getAlignStyleValue((_e = this.properties) == null ? void 0 : _e.justifyContent);
+    const alignSelf = this.getAlignStyleValue((_f = this.properties) == null ? void 0 : _f.alignSelf);
     if (this.isWidget()) {
       if (alignSelf) style.alignSelf = alignSelf;
     } else if (this.isPage()) {
@@ -6737,51 +6741,51 @@ class Part {
       if (justifyContent) style.justifyContent = justifyContent;
       if (alignSelf) style.alignSelf = alignSelf;
     }
-    if ((_f = this.properties) == null ? void 0 : _f.margin) style.margin = this.properties.margin;
-    if ((_g = this.properties) == null ? void 0 : _g.marginLeft) style.marginLeft = this.properties.marginLeft;
-    if ((_h = this.properties) == null ? void 0 : _h.marginRight) style.marginRight = this.properties.marginRight;
-    if ((_i = this.properties) == null ? void 0 : _i.marginTop) style.marginTop = this.properties.marginTop;
-    if ((_j = this.properties) == null ? void 0 : _j.marginBottom) style.marginBottom = this.properties.marginBottom;
-    if ((_k = this.properties) == null ? void 0 : _k.padding) style.padding = this.properties.padding;
-    if ((_l = this.properties) == null ? void 0 : _l.paddingLeft) style.paddingLeft = this.properties.paddingLeft;
-    if ((_m = this.properties) == null ? void 0 : _m.paddingRight) style.paddingRight = this.properties.paddingRight;
-    if ((_n = this.properties) == null ? void 0 : _n.paddingTop) style.paddingTop = this.properties.paddingTop;
-    if ((_o = this.properties) == null ? void 0 : _o.paddingBottom) style.paddingBottom = this.properties.paddingBottom;
-    if ((_p = this.properties) == null ? void 0 : _p.left) style.left = this.properties.left;
-    if ((_q = this.properties) == null ? void 0 : _q.right) style.right = this.properties.right;
-    if ((_r = this.properties) == null ? void 0 : _r.top) style.top = this.properties.top;
-    if ((_s = this.properties) == null ? void 0 : _s.bottom) style.bottom = this.properties.bottom;
-    if ((_t = this.properties) == null ? void 0 : _t.width) style.width = this.properties.width;
-    if ((_u = this.properties) == null ? void 0 : _u.height) style.height = this.properties.height;
-    if ((_v = this.properties) == null ? void 0 : _v.maxWidth) style.maxWidth = this.properties.maxWidth;
-    if ((_w = this.properties) == null ? void 0 : _w.maxHeight) style.maxHeight = this.properties.maxHeight;
-    if ((_x = this.properties) == null ? void 0 : _x.minWidth) style.minWidth = this.properties.minWidth;
-    if ((_y = this.properties) == null ? void 0 : _y.minHeight) style.minHeight = this.properties.minHeight;
-    if ((_z = this.properties) == null ? void 0 : _z.textAlign) style.textAlign = this.properties.textAlign;
-    if ((_A = this.properties) == null ? void 0 : _A.backgroundColor) style.backgroundColor = this.properties.backgroundColor;
-    if ((_B = this.properties) == null ? void 0 : _B.borderLeftWidth) style.borderLeftWidth = this.properties.borderLeftWidth;
-    if ((_C = this.properties) == null ? void 0 : _C.borderRightWidth) style.borderRightWidth = this.properties.borderRightWidth;
-    if ((_D = this.properties) == null ? void 0 : _D.borderTopWidth) style.borderTopWidth = this.properties.borderTopWidth;
-    if ((_E = this.properties) == null ? void 0 : _E.borderBottomWidth) style.borderBottomWidth = this.properties.borderBottomWidth;
-    if ((_F = this.properties) == null ? void 0 : _F.borderTopLeftRadius) style.borderTopLeftRadius = this.properties.borderTopLeftRadius;
-    if ((_G = this.properties) == null ? void 0 : _G.borderTopRightRadius) style.borderTopRightRadius = this.properties.borderTopRightRadius;
-    if ((_H = this.properties) == null ? void 0 : _H.borderBottomLeftRadius) style.borderBottomLeftRadius = this.properties.borderBottomLeftRadius;
-    if ((_I = this.properties) == null ? void 0 : _I.borderBottomRightRadius) style.borderBottomRightRadius = this.properties.borderBottomRightRadius;
-    if (((_J = this.properties) == null ? void 0 : _J.borderColor) && style.borderLeftWidth) {
+    if ((_g = this.properties) == null ? void 0 : _g.margin) style.margin = this.properties.margin;
+    if ((_h = this.properties) == null ? void 0 : _h.marginLeft) style.marginLeft = this.properties.marginLeft;
+    if ((_i = this.properties) == null ? void 0 : _i.marginRight) style.marginRight = this.properties.marginRight;
+    if ((_j = this.properties) == null ? void 0 : _j.marginTop) style.marginTop = this.properties.marginTop;
+    if ((_k = this.properties) == null ? void 0 : _k.marginBottom) style.marginBottom = this.properties.marginBottom;
+    if ((_l = this.properties) == null ? void 0 : _l.padding) style.padding = this.properties.padding;
+    if ((_m = this.properties) == null ? void 0 : _m.paddingLeft) style.paddingLeft = this.properties.paddingLeft;
+    if ((_n = this.properties) == null ? void 0 : _n.paddingRight) style.paddingRight = this.properties.paddingRight;
+    if ((_o = this.properties) == null ? void 0 : _o.paddingTop) style.paddingTop = this.properties.paddingTop;
+    if ((_p = this.properties) == null ? void 0 : _p.paddingBottom) style.paddingBottom = this.properties.paddingBottom;
+    if ((_q = this.properties) == null ? void 0 : _q.left) style.left = this.properties.left;
+    if ((_r = this.properties) == null ? void 0 : _r.right) style.right = this.properties.right;
+    if ((_s = this.properties) == null ? void 0 : _s.top) style.top = this.properties.top;
+    if ((_t = this.properties) == null ? void 0 : _t.bottom) style.bottom = this.properties.bottom;
+    if ((_u = this.properties) == null ? void 0 : _u.width) style.width = this.properties.width;
+    if ((_v = this.properties) == null ? void 0 : _v.height) style.height = this.properties.height;
+    if ((_w = this.properties) == null ? void 0 : _w.maxWidth) style.maxWidth = this.properties.maxWidth;
+    if ((_x = this.properties) == null ? void 0 : _x.maxHeight) style.maxHeight = this.properties.maxHeight;
+    if ((_y = this.properties) == null ? void 0 : _y.minWidth) style.minWidth = this.properties.minWidth;
+    if ((_z = this.properties) == null ? void 0 : _z.minHeight) style.minHeight = this.properties.minHeight;
+    if ((_A = this.properties) == null ? void 0 : _A.textAlign) style.textAlign = this.properties.textAlign;
+    if ((_B = this.properties) == null ? void 0 : _B.backgroundColor) style.backgroundColor = this.properties.backgroundColor;
+    if ((_C = this.properties) == null ? void 0 : _C.borderLeftWidth) style.borderLeftWidth = this.properties.borderLeftWidth;
+    if ((_D = this.properties) == null ? void 0 : _D.borderRightWidth) style.borderRightWidth = this.properties.borderRightWidth;
+    if ((_E = this.properties) == null ? void 0 : _E.borderTopWidth) style.borderTopWidth = this.properties.borderTopWidth;
+    if ((_F = this.properties) == null ? void 0 : _F.borderBottomWidth) style.borderBottomWidth = this.properties.borderBottomWidth;
+    if ((_G = this.properties) == null ? void 0 : _G.borderTopLeftRadius) style.borderTopLeftRadius = this.properties.borderTopLeftRadius;
+    if ((_H = this.properties) == null ? void 0 : _H.borderTopRightRadius) style.borderTopRightRadius = this.properties.borderTopRightRadius;
+    if ((_I = this.properties) == null ? void 0 : _I.borderBottomLeftRadius) style.borderBottomLeftRadius = this.properties.borderBottomLeftRadius;
+    if ((_J = this.properties) == null ? void 0 : _J.borderBottomRightRadius) style.borderBottomRightRadius = this.properties.borderBottomRightRadius;
+    if (((_K = this.properties) == null ? void 0 : _K.borderColor) && style.borderLeftWidth) {
       style.borderLeftStyle = "solid";
-      style.borderLeftColor = (_K = this.properties) == null ? void 0 : _K.borderColor;
+      style.borderLeftColor = (_L = this.properties) == null ? void 0 : _L.borderColor;
     }
-    if (((_L = this.properties) == null ? void 0 : _L.borderColor) && style.borderRightWidth) {
+    if (((_M = this.properties) == null ? void 0 : _M.borderColor) && style.borderRightWidth) {
       style.borderRightStyle = "solid";
-      style.borderRightColor = (_M = this.properties) == null ? void 0 : _M.borderColor;
+      style.borderRightColor = (_N = this.properties) == null ? void 0 : _N.borderColor;
     }
-    if (((_N = this.properties) == null ? void 0 : _N.borderColor) && style.borderTopWidth) {
+    if (((_O = this.properties) == null ? void 0 : _O.borderColor) && style.borderTopWidth) {
       style.borderTopStyle = "solid";
-      style.borderTopColor = (_O = this.properties) == null ? void 0 : _O.borderColor;
+      style.borderTopColor = (_P = this.properties) == null ? void 0 : _P.borderColor;
     }
-    if (((_P = this.properties) == null ? void 0 : _P.borderColor) && style.borderBottomWidth) {
+    if (((_Q = this.properties) == null ? void 0 : _Q.borderColor) && style.borderBottomWidth) {
       style.borderBottomStyle = "solid";
-      style.borderBottomColor = (_Q = this.properties) == null ? void 0 : _Q.borderColor;
+      style.borderBottomColor = (_R = this.properties) == null ? void 0 : _R.borderColor;
     }
     return style;
   }
@@ -7454,17 +7458,13 @@ const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
           "data-part-id": _ctx.part.partId,
           style: normalizeStyle(style.value)
         }, [
-          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,
-                "is-mobile-page": _ctx.isMobilePage,
-                part: section
-              }, null, 8, ["is-mobile-page", "part"]);
-            }), 128))
-          ], 2)
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.part.children, (section) => {
+            return openBlock(), createBlock$1(_sfc_main$9$1, {
+              key: section.partId,
+              "is-mobile-page": _ctx.isMobilePage,
+              part: section
+            }, null, 8, ["is-mobile-page", "part"]);
+          }), 128))
         ], 14, _hoisted_1$2$1)
       ], 64);
     };
@@ -8145,15 +8145,15 @@ class PartManager {
 const defaultPartPropertyEditors = () => {
   return {
     "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-Dgp_AVOD.js")),
-    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-OLBLie3k.js")),
+    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-Dv0fJMe9.js")),
     "number": () => defineAsyncComponent(() => import("./PbPropertyEditorNumber-TTgo0zbQ.js")),
     "boolean": () => defineAsyncComponent(() => import("./PbPropertyEditorBoolean-C7-iSAtn.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-BaMj-tr_.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-CNr5khDs.js")),
     "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-CWedbXJI.js")),
-    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-BPku9nyl.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-DnUH6vkj.js")),
-    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-eYbeszpS.js")),
-    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-DRCsiJt3.js"))
+    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-w19UyXyL.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-C5nERuUJ.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-DXWHj2CD.js")),
+    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-DrPrai1y.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -12487,7 +12487,7 @@ __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
 let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
 const openWidgetAddModal = (modal, args, callback) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./PbWidgetAddModal-CvBeNnPx.js")),
+    component: defineAsyncComponent(() => import("./PbWidgetAddModal-D3QjBrfz.js")),
     style: {
       width: "80%",
       height: "80%",
@@ -13245,7 +13245,7 @@ const enableAddBlockMenu = (pageBuilder, direction, commandId, caption) => {
   var _a, _b;
   const selected = pageBuilder.context.getSelectedParts()[0];
   const block = pageBuilder.partManager.findNearestBlock(selected);
-  if (block && ((_b = (_a = block.parent) == null ? void 0 : _a.properties) == null ? void 0 : _b.direction) === direction) {
+  if (block && (((_b = (_a = block.parent) == null ? void 0 : _a.properties) == null ? void 0 : _b.direction) || "vertical") === direction) {
     return menuItemForCommand(pageBuilder, commandId, caption);
   }
 };
@@ -13253,7 +13253,7 @@ const enableAddWidgetMenu = (pageBuilder, direction, commandId, caption) => {
   var _a, _b, _c;
   const selected = pageBuilder.context.getSelectedParts()[0];
   if (selected) {
-    if (((_a = selected.parent) == null ? void 0 : _a.isBlock()) && ((_c = (_b = selected.parent) == null ? void 0 : _b.properties) == null ? void 0 : _c.direction) === direction || !selected.isNestedWidget() && !direction) {
+    if (((_a = selected.parent) == null ? void 0 : _a.isBlock()) && (((_c = (_b = selected.parent) == null ? void 0 : _b.properties) == null ? void 0 : _c.direction) || "horizontal") === direction || !selected.isNestedWidget() && !direction) {
       return menuItemForCommand(pageBuilder, commandId, caption);
     }
   }
@@ -13713,7 +13713,6 @@ class PageBuilderEditorImpl {
     __publicField(this, "locale", ref("en"));
     __publicField(this, "locales", ref(["en"]));
     __publicField(this, "customWidgets", []);
-    __publicField(this, "watchers", {});
     __publicField(this, "providers", {});
     __publicField(this, "externalCssLinks", []);
     __publicField(this, "externalCssContent", "");
@@ -13755,22 +13754,28 @@ class PageBuilderEditorImpl {
   registerCustomPlugin(plugin) {
     if (plugin.widgets) {
       const partDefinitions2 = {};
-      plugin.widgets.forEach((v) => {
-        const w = { ...v };
-        w.partType = "Widget";
-        w.creator = () => _sfc_main$q;
-        w.propertyGroups = [...w.propertyGroups, ...defaultWidgetPropertyGroups()];
-        partDefinitions2[v.partName] = w;
-        const found = this.customWidgets.find((x) => x.partName === v.partName);
-        if (!found) {
-          this.customWidgets.push(w);
+      plugin.widgets.forEach((group) => {
+        if (group.partDefinitions && group.partDefinitions.length) {
+          const g = {
+            groupName: group.groupName,
+            caption: group.caption,
+            partDefinitions: []
+          };
+          group.partDefinitions.forEach((part) => {
+            const p = { ...part };
+            p.partType = "Widget";
+            p.creator = () => _sfc_main$q;
+            p.propertyGroups = [...p.propertyGroups, ...defaultWidgetPropertyGroups()];
+            partDefinitions2[p.partName] = p;
+            g.partDefinitions.push(p);
+          });
+          if (g.partDefinitions && g.partDefinitions.length) {
+            this.customWidgets.push(g);
+          }
         }
       });
       this.partManager.registerPartDefinitions(partDefinitions2);
     }
-    if (plugin.watchers) {
-      this.watchers = { ...this.providers, ...plugin.watchers };
-    }
     if (plugin.providers) {
       this.providers = { ...this.providers, ...plugin.providers };
     }
@@ -14440,13 +14445,11 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         minHeight: ((_b = (_a = props.part) == null ? void 0 : _a.children) == null ? void 0 : _b.length) ? void 0 : "200px"
       };
     });
-    const properties = computed(() => {
+    const contentStyle = computed(() => {
       var _a, _b;
       return {
-        style: {
-          ...(_a = props.part) == null ? void 0 : _a.getStyles(props.isMobilePage),
-          ...(_b = props.part) == null ? void 0 : _b.getInlineStyles()
-        }
+        ...(_a = props.part) == null ? void 0 : _a.getStyles(props.isMobilePage),
+        ...(_b = props.part) == null ? void 0 : _b.getInlineStyles()
       };
     });
     const selected = computed(() => !!props.part && editor.context.isSelected(props.part));
@@ -14487,9 +14490,10 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           onContextmenu: showContextMenu,
           onMousedown: withModifiers(handleClick, ["stop"])
         }, [
-          createElementVNode("div", mergeProps({
-            class: [selected.value && "selected", _ctx.isMobilePage ? "mobile" : "pc", "pb-page-content"]
-          }, properties.value), [
+          createElementVNode("div", {
+            class: normalizeClass([selected.value && "selected", _ctx.isMobilePage ? "mobile" : "pc", "pb-page-content"]),
+            style: normalizeStyle(contentStyle.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,
@@ -14497,7 +14501,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                 part: section
               }, null, 8, ["is-mobile-page", "part"]);
             }), 128))
-          ], 16),
+          ], 6),
           createElementVNode("div", {
             class: "pb-add-section-handle bottom",
             onClick: addSection
@@ -14509,7 +14513,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const canvasStyle = '.pb-page-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\n\n.pb-page {\n  display: flex;\n  flex-direction: column;\n  margin: 0 auto;\n  padding-bottom: 100px;\n  width: 100%;\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  display: flex;\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n  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  pointer-events: auto !important;\n}\n\n.pb-widget * {\n  pointer-events: none;\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  pointer-events: auto !important;\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  pointer-events: auto !important;\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 canvasStyle = '.pb-page-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\n\n.pb-page {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  padding-bottom: 100px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n.pb-page .pb-page-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\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  display: flex;\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n  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  pointer-events: auto !important;\n}\n\n.pb-widget * {\n  pointer-events: none;\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  pointer-events: auto !important;\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  pointer-events: auto !important;\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\nbody {\n  margin: 0;\n  padding: 0;\n  background-color: #aaa;\n  overflow: hidden;\n}\n\n.font-icon {\n  font-family: "Material Symbols Outlined", monospace;\n  font-size: 1rem;\n  max-width: 1em;\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  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  font-family: "Material Symbols Outlined", monospace;\n  font-style: normal;\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}';
 const _hoisted_1$2 = ["width"];
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "PbPageFrame",
@@ -14534,24 +14538,10 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           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" />
-
+            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"/>
           ${externalCss}
-
           <style>${canvasStyle}</style>
         `;
           const script2 = (_g = (_f = iframeRef.value) == null ? void 0 : _f.contentWindow) == null ? void 0 : _g.document.createElement("script");

package/dist/index.d.ts

@@ -1,7 +1,8 @@
+import { PartDefinition, PartDefinitionGroup } from './model/part-definintion.ts';
 import { PartProperty } from './model/part-property.ts';
 
 export { default as PageBuilderEditor } from './PageBuilderEditor.vue';
-export type { PartProperty };
+export type { PartProperty, PartDefinitionGroup, PartDefinition };
 export * from './model/event';
 export * from './model/plugin';
 export * from '@g1cloud/page-builder-viewer';

package/dist/model/page-builder-editor.d.ts

@@ -1,4 +1,4 @@
-import { PartDefinition } from './part-definintion.ts';
+import { PartDefinitionGroup } from './part-definintion.ts';
 import { ContextMenuRegistry, ContextMenuRegistryImpl, KeyHandlers, PageBuilderContext, PageBuilderContextImpl } from './context.ts';
 import { ToolButtonRegistry } from './toolbar.ts';
 import { PageBuilderPlugin } from './plugin.ts';
@@ -36,7 +36,7 @@ export interface PageBuilderEditor extends PageBuilder {
     setLocales(locales?: string[]): void;
     makeSingleScreen(screenToKeep: number): void;
     makeMultipleScreen(): void;
-    getCustomWidgets(): PartDefinition[];
+    getCustomWidgets(): PartDefinitionGroup[];
     getProvider(name: string): (args?: any, callback?: (result?: any) => void) => unknown;
     extractMedia(part: IPart): string[];
 }
@@ -53,8 +53,7 @@ export declare class PageBuilderEditorImpl implements PageBuilderEditor {
     scale: Ref<number>;
     locale: Ref<string>;
     locales: Ref<string[]>;
-    customWidgets: PartDefinition[];
-    watchers: Record<string, unknown>;
+    customWidgets: PartDefinitionGroup[];
     providers: Record<string, unknown>;
     externalCssLinks: string[];
     externalCssContent: string;
@@ -73,7 +72,7 @@ export declare class PageBuilderEditorImpl implements PageBuilderEditor {
     zoom(scale: number): void;
     makeSingleScreen(screenToKeep: number): void;
     makeMultipleScreen(): void;
-    getCustomWidgets(): PartDefinition[];
+    getCustomWidgets(): PartDefinitionGroup[];
     extractMedia(part: IPart): string[];
     getExternalCss(): string;
     private extractMediaFromPart;

package/dist/page-builder-editor.js

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

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

@@ -6716,19 +6716,23 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
     }
     getStyles(isMobilePage) {
-      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, _Q;
+      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, _Q, _R;
       const style = {};
       if (((_a = this.properties) == null ? void 0 : _a.direction) === "horizontal") {
         style.flexDirection = "row";
-      } else {
+      } else if (((_b = this.properties) == null ? void 0 : _b.direction) === "vertical") {
+        style.flexDirection = "column";
+      } else if (this.isSection()) {
+        style.flexDirection = "row";
+      } else if (this.isBlock()) {
         style.flexDirection = "column";
       }
-      if (((_b = this.properties) == null ? void 0 : _b.wrap) === "wrap") {
+      if (((_c = this.properties) == null ? void 0 : _c.wrap) === "wrap") {
         style.flexWrap = "wrap";
       }
-      const alignItems = this.getAlignStyleValue((_c = this.properties) == null ? void 0 : _c.alignItems);
-      const justifyContent = this.getAlignStyleValue((_d = this.properties) == null ? void 0 : _d.justifyContent);
-      const alignSelf = this.getAlignStyleValue((_e = this.properties) == null ? void 0 : _e.alignSelf);
+      const alignItems = this.getAlignStyleValue((_d = this.properties) == null ? void 0 : _d.alignItems);
+      const justifyContent = this.getAlignStyleValue((_e = this.properties) == null ? void 0 : _e.justifyContent);
+      const alignSelf = this.getAlignStyleValue((_f = this.properties) == null ? void 0 : _f.alignSelf);
       if (this.isWidget()) {
         if (alignSelf) style.alignSelf = alignSelf;
       } else if (this.isPage()) {
@@ -6738,51 +6742,51 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         if (justifyContent) style.justifyContent = justifyContent;
         if (alignSelf) style.alignSelf = alignSelf;
       }
-      if ((_f = this.properties) == null ? void 0 : _f.margin) style.margin = this.properties.margin;
-      if ((_g = this.properties) == null ? void 0 : _g.marginLeft) style.marginLeft = this.properties.marginLeft;
-      if ((_h = this.properties) == null ? void 0 : _h.marginRight) style.marginRight = this.properties.marginRight;
-      if ((_i = this.properties) == null ? void 0 : _i.marginTop) style.marginTop = this.properties.marginTop;
-      if ((_j = this.properties) == null ? void 0 : _j.marginBottom) style.marginBottom = this.properties.marginBottom;
-      if ((_k = this.properties) == null ? void 0 : _k.padding) style.padding = this.properties.padding;
-      if ((_l = this.properties) == null ? void 0 : _l.paddingLeft) style.paddingLeft = this.properties.paddingLeft;
-      if ((_m = this.properties) == null ? void 0 : _m.paddingRight) style.paddingRight = this.properties.paddingRight;
-      if ((_n = this.properties) == null ? void 0 : _n.paddingTop) style.paddingTop = this.properties.paddingTop;
-      if ((_o = this.properties) == null ? void 0 : _o.paddingBottom) style.paddingBottom = this.properties.paddingBottom;
-      if ((_p = this.properties) == null ? void 0 : _p.left) style.left = this.properties.left;
-      if ((_q = this.properties) == null ? void 0 : _q.right) style.right = this.properties.right;
-      if ((_r = this.properties) == null ? void 0 : _r.top) style.top = this.properties.top;
-      if ((_s = this.properties) == null ? void 0 : _s.bottom) style.bottom = this.properties.bottom;
-      if ((_t = this.properties) == null ? void 0 : _t.width) style.width = this.properties.width;
-      if ((_u = this.properties) == null ? void 0 : _u.height) style.height = this.properties.height;
-      if ((_v = this.properties) == null ? void 0 : _v.maxWidth) style.maxWidth = this.properties.maxWidth;
-      if ((_w = this.properties) == null ? void 0 : _w.maxHeight) style.maxHeight = this.properties.maxHeight;
-      if ((_x = this.properties) == null ? void 0 : _x.minWidth) style.minWidth = this.properties.minWidth;
-      if ((_y = this.properties) == null ? void 0 : _y.minHeight) style.minHeight = this.properties.minHeight;
-      if ((_z = this.properties) == null ? void 0 : _z.textAlign) style.textAlign = this.properties.textAlign;
-      if ((_A = this.properties) == null ? void 0 : _A.backgroundColor) style.backgroundColor = this.properties.backgroundColor;
-      if ((_B = this.properties) == null ? void 0 : _B.borderLeftWidth) style.borderLeftWidth = this.properties.borderLeftWidth;
-      if ((_C = this.properties) == null ? void 0 : _C.borderRightWidth) style.borderRightWidth = this.properties.borderRightWidth;
-      if ((_D = this.properties) == null ? void 0 : _D.borderTopWidth) style.borderTopWidth = this.properties.borderTopWidth;
-      if ((_E = this.properties) == null ? void 0 : _E.borderBottomWidth) style.borderBottomWidth = this.properties.borderBottomWidth;
-      if ((_F = this.properties) == null ? void 0 : _F.borderTopLeftRadius) style.borderTopLeftRadius = this.properties.borderTopLeftRadius;
-      if ((_G = this.properties) == null ? void 0 : _G.borderTopRightRadius) style.borderTopRightRadius = this.properties.borderTopRightRadius;
-      if ((_H = this.properties) == null ? void 0 : _H.borderBottomLeftRadius) style.borderBottomLeftRadius = this.properties.borderBottomLeftRadius;
-      if ((_I = this.properties) == null ? void 0 : _I.borderBottomRightRadius) style.borderBottomRightRadius = this.properties.borderBottomRightRadius;
-      if (((_J = this.properties) == null ? void 0 : _J.borderColor) && style.borderLeftWidth) {
+      if ((_g = this.properties) == null ? void 0 : _g.margin) style.margin = this.properties.margin;
+      if ((_h = this.properties) == null ? void 0 : _h.marginLeft) style.marginLeft = this.properties.marginLeft;
+      if ((_i = this.properties) == null ? void 0 : _i.marginRight) style.marginRight = this.properties.marginRight;
+      if ((_j = this.properties) == null ? void 0 : _j.marginTop) style.marginTop = this.properties.marginTop;
+      if ((_k = this.properties) == null ? void 0 : _k.marginBottom) style.marginBottom = this.properties.marginBottom;
+      if ((_l = this.properties) == null ? void 0 : _l.padding) style.padding = this.properties.padding;
+      if ((_m = this.properties) == null ? void 0 : _m.paddingLeft) style.paddingLeft = this.properties.paddingLeft;
+      if ((_n = this.properties) == null ? void 0 : _n.paddingRight) style.paddingRight = this.properties.paddingRight;
+      if ((_o = this.properties) == null ? void 0 : _o.paddingTop) style.paddingTop = this.properties.paddingTop;
+      if ((_p = this.properties) == null ? void 0 : _p.paddingBottom) style.paddingBottom = this.properties.paddingBottom;
+      if ((_q = this.properties) == null ? void 0 : _q.left) style.left = this.properties.left;
+      if ((_r = this.properties) == null ? void 0 : _r.right) style.right = this.properties.right;
+      if ((_s = this.properties) == null ? void 0 : _s.top) style.top = this.properties.top;
+      if ((_t = this.properties) == null ? void 0 : _t.bottom) style.bottom = this.properties.bottom;
+      if ((_u = this.properties) == null ? void 0 : _u.width) style.width = this.properties.width;
+      if ((_v = this.properties) == null ? void 0 : _v.height) style.height = this.properties.height;
+      if ((_w = this.properties) == null ? void 0 : _w.maxWidth) style.maxWidth = this.properties.maxWidth;
+      if ((_x = this.properties) == null ? void 0 : _x.maxHeight) style.maxHeight = this.properties.maxHeight;
+      if ((_y = this.properties) == null ? void 0 : _y.minWidth) style.minWidth = this.properties.minWidth;
+      if ((_z = this.properties) == null ? void 0 : _z.minHeight) style.minHeight = this.properties.minHeight;
+      if ((_A = this.properties) == null ? void 0 : _A.textAlign) style.textAlign = this.properties.textAlign;
+      if ((_B = this.properties) == null ? void 0 : _B.backgroundColor) style.backgroundColor = this.properties.backgroundColor;
+      if ((_C = this.properties) == null ? void 0 : _C.borderLeftWidth) style.borderLeftWidth = this.properties.borderLeftWidth;
+      if ((_D = this.properties) == null ? void 0 : _D.borderRightWidth) style.borderRightWidth = this.properties.borderRightWidth;
+      if ((_E = this.properties) == null ? void 0 : _E.borderTopWidth) style.borderTopWidth = this.properties.borderTopWidth;
+      if ((_F = this.properties) == null ? void 0 : _F.borderBottomWidth) style.borderBottomWidth = this.properties.borderBottomWidth;
+      if ((_G = this.properties) == null ? void 0 : _G.borderTopLeftRadius) style.borderTopLeftRadius = this.properties.borderTopLeftRadius;
+      if ((_H = this.properties) == null ? void 0 : _H.borderTopRightRadius) style.borderTopRightRadius = this.properties.borderTopRightRadius;
+      if ((_I = this.properties) == null ? void 0 : _I.borderBottomLeftRadius) style.borderBottomLeftRadius = this.properties.borderBottomLeftRadius;
+      if ((_J = this.properties) == null ? void 0 : _J.borderBottomRightRadius) style.borderBottomRightRadius = this.properties.borderBottomRightRadius;
+      if (((_K = this.properties) == null ? void 0 : _K.borderColor) && style.borderLeftWidth) {
         style.borderLeftStyle = "solid";
-        style.borderLeftColor = (_K = this.properties) == null ? void 0 : _K.borderColor;
+        style.borderLeftColor = (_L = this.properties) == null ? void 0 : _L.borderColor;
       }
-      if (((_L = this.properties) == null ? void 0 : _L.borderColor) && style.borderRightWidth) {
+      if (((_M = this.properties) == null ? void 0 : _M.borderColor) && style.borderRightWidth) {
         style.borderRightStyle = "solid";
-        style.borderRightColor = (_M = this.properties) == null ? void 0 : _M.borderColor;
+        style.borderRightColor = (_N = this.properties) == null ? void 0 : _N.borderColor;
       }
-      if (((_N = this.properties) == null ? void 0 : _N.borderColor) && style.borderTopWidth) {
+      if (((_O = this.properties) == null ? void 0 : _O.borderColor) && style.borderTopWidth) {
         style.borderTopStyle = "solid";
-        style.borderTopColor = (_O = this.properties) == null ? void 0 : _O.borderColor;
+        style.borderTopColor = (_P = this.properties) == null ? void 0 : _P.borderColor;
       }
-      if (((_P = this.properties) == null ? void 0 : _P.borderColor) && style.borderBottomWidth) {
+      if (((_Q = this.properties) == null ? void 0 : _Q.borderColor) && style.borderBottomWidth) {
         style.borderBottomStyle = "solid";
-        style.borderBottomColor = (_Q = this.properties) == null ? void 0 : _Q.borderColor;
+        style.borderBottomColor = (_R = this.properties) == null ? void 0 : _R.borderColor;
       }
       return style;
     }
@@ -7455,17 +7459,13 @@ ${_html.style}
             "data-part-id": _ctx.part.partId,
             style: vue.normalizeStyle(style.value)
           }, [
-            vue.createElementVNode("div", {
-              class: vue.normalizeClass([[_ctx.isMobilePage ? "mobile" : "pc"], "pb-page-content"])
-            }, [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.part.children, (section) => {
-                return vue.openBlock(), vue.createBlock(_sfc_main$9$1, {
-                  key: section.partId,
-                  "is-mobile-page": _ctx.isMobilePage,
-                  part: section
-                }, null, 8, ["is-mobile-page", "part"]);
-              }), 128))
-            ], 2)
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.part.children, (section) => {
+              return vue.openBlock(), vue.createBlock(_sfc_main$9$1, {
+                key: section.partId,
+                "is-mobile-page": _ctx.isMobilePage,
+                part: section
+              }, null, 8, ["is-mobile-page", "part"]);
+            }), 128))
           ], 14, _hoisted_1$2$1)
         ], 64);
       };
@@ -9253,7 +9253,7 @@ ${_html.style}
   const _hoisted_4$d = { class: "bg-gray-100 py-5 rounded-8" };
   const _hoisted_5$7 = { class: "text-center" };
   const _hoisted_6$7 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
-  const _hoisted_7$6 = { class: "text-center" };
+  const _hoisted_7$7 = { class: "text-center" };
   const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorPosition",
     props: {
@@ -9316,7 +9316,7 @@ ${_html.style}
                     "onUpdate:modelValue": updateRight
                   }, null, 8, ["model-value"])
                 ]),
-                vue.createElementVNode("div", _hoisted_7$6, [
+                vue.createElementVNode("div", _hoisted_7$7, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": bottom.value,
                     class: "ml-4",
@@ -9338,7 +9338,7 @@ ${_html.style}
   const _hoisted_4$c = { class: "flex-align-center mt-12" };
   const _hoisted_5$6 = { class: "flex-grow-1 bs-layout-horizontal" };
   const _hoisted_6$6 = { class: "flex-align-center mt-12" };
-  const _hoisted_7$5 = { class: "flex-grow-1 bs-layout-horizontal" };
+  const _hoisted_7$6 = { class: "flex-grow-1 bs-layout-horizontal" };
   const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorSize",
     props: {
@@ -9410,7 +9410,7 @@ ${_html.style}
             _cache[2] || (_cache[2] = vue.createElementVNode("div", { class: "title" }, [
               vue.createElementVNode("label", { textContent: "Min Size" })
             ], -1)),
-            vue.createElementVNode("div", _hoisted_7$5, [
+            vue.createElementVNode("div", _hoisted_7$6, [
               vue.createVNode(vue.unref(bluesea.BSTextInput), {
                 "model-value": minWidth.value,
                 class: "flex-grow-1 mr-2",
@@ -11133,7 +11133,7 @@ ${_html.style}
     class: "vc-sketch-alpha-wrap"
   };
   const _hoisted_6$5 = { class: "vc-sketch-color-wrap" };
-  const _hoisted_7$4 = ["aria-label"];
+  const _hoisted_7$5 = ["aria-label"];
   const _hoisted_8$2 = {
     key: 0,
     class: "vc-sketch-field"
@@ -11193,7 +11193,7 @@ ${_html.style}
               "aria-label": `Current color is ${$options.activeColor}`,
               class: "vc-sketch-active-color",
               style: vue.normalizeStyle({ background: $options.activeColor })
-            }, null, 12, _hoisted_7$4),
+            }, null, 12, _hoisted_7$5),
             vue.createVNode(_component_Checkboard)
           ])
         ]),
@@ -11455,7 +11455,7 @@ ${_html.style}
   const _hoisted_4$6 = { class: "color" };
   const _hoisted_5$4 = { class: "mt-8" };
   const _hoisted_6$4 = { class: "flex-grow-1 mt-4" };
-  const _hoisted_7$3 = { class: "bg-gray-100 py-5 rounded-8" };
+  const _hoisted_7$4 = { class: "bg-gray-100 py-5 rounded-8" };
   const _hoisted_8$1 = { class: "text-center" };
   const _hoisted_9 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
   const _hoisted_10 = { class: "text-center" };
@@ -11534,7 +11534,7 @@ ${_html.style}
                 vue.createElementVNode("label", { textContent: "Border Width" })
               ], -1)),
               vue.createElementVNode("div", _hoisted_6$4, [
-                vue.createElementVNode("div", _hoisted_7$3, [
+                vue.createElementVNode("div", _hoisted_7$4, [
                   vue.createElementVNode("div", _hoisted_8$1, [
                     vue.createVNode(vue.unref(bluesea.BSTextInput), {
                       "model-value": borderTopWidth.value,
@@ -11630,7 +11630,7 @@ ${_html.style}
   const _hoisted_4$5 = { class: "bg-gray-100 py-5 rounded-8" };
   const _hoisted_5$3 = { class: "text-center" };
   const _hoisted_6$3 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
-  const _hoisted_7$2 = { class: "text-center" };
+  const _hoisted_7$3 = { class: "text-center" };
   const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorMargin",
     props: {
@@ -11693,7 +11693,7 @@ ${_html.style}
                     "onUpdate:modelValue": updateRight
                   }, null, 8, ["model-value"])
                 ]),
-                vue.createElementVNode("div", _hoisted_7$2, [
+                vue.createElementVNode("div", _hoisted_7$3, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": bottom.value,
                     class: "ml-4",
@@ -11715,7 +11715,7 @@ ${_html.style}
   const _hoisted_4$4 = { class: "bg-gray-100 py-5 rounded-8" };
   const _hoisted_5$2 = { class: "text-center" };
   const _hoisted_6$2 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
-  const _hoisted_7$1 = { class: "text-center" };
+  const _hoisted_7$2 = { class: "text-center" };
   const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPropertyGroupEditorPadding",
     props: {
@@ -11778,7 +11778,7 @@ ${_html.style}
                     "onUpdate:modelValue": updateRight
                   }, null, 8, ["model-value"])
                 ]),
-                vue.createElementVNode("div", _hoisted_7$1, [
+                vue.createElementVNode("div", _hoisted_7$2, [
                   vue.createVNode(vue.unref(bluesea.BSTextInput), {
                     "model-value": bottom.value,
                     class: "ml-4",
@@ -13246,7 +13246,7 @@ ${_html.style}
     var _a, _b;
     const selected = pageBuilder.context.getSelectedParts()[0];
     const block = pageBuilder.partManager.findNearestBlock(selected);
-    if (block && ((_b = (_a = block.parent) == null ? void 0 : _a.properties) == null ? void 0 : _b.direction) === direction) {
+    if (block && (((_b = (_a = block.parent) == null ? void 0 : _a.properties) == null ? void 0 : _b.direction) || "vertical") === direction) {
       return menuItemForCommand(pageBuilder, commandId, caption);
     }
   };
@@ -13254,7 +13254,7 @@ ${_html.style}
     var _a, _b, _c;
     const selected = pageBuilder.context.getSelectedParts()[0];
     if (selected) {
-      if (((_a = selected.parent) == null ? void 0 : _a.isBlock()) && ((_c = (_b = selected.parent) == null ? void 0 : _b.properties) == null ? void 0 : _c.direction) === direction || !selected.isNestedWidget() && !direction) {
+      if (((_a = selected.parent) == null ? void 0 : _a.isBlock()) && (((_c = (_b = selected.parent) == null ? void 0 : _b.properties) == null ? void 0 : _c.direction) || "horizontal") === direction || !selected.isNestedWidget() && !direction) {
         return menuItemForCommand(pageBuilder, commandId, caption);
       }
     }
@@ -13714,7 +13714,6 @@ ${_html.style}
       __publicField(this, "locale", vue.ref("en"));
       __publicField(this, "locales", vue.ref(["en"]));
       __publicField(this, "customWidgets", []);
-      __publicField(this, "watchers", {});
       __publicField(this, "providers", {});
       __publicField(this, "externalCssLinks", []);
       __publicField(this, "externalCssContent", "");
@@ -13756,22 +13755,28 @@ ${_html.style}
     registerCustomPlugin(plugin) {
       if (plugin.widgets) {
         const partDefinitions2 = {};
-        plugin.widgets.forEach((v) => {
-          const w = { ...v };
-          w.partType = "Widget";
-          w.creator = () => _sfc_main$E;
-          w.propertyGroups = [...w.propertyGroups, ...defaultWidgetPropertyGroups()];
-          partDefinitions2[v.partName] = w;
-          const found = this.customWidgets.find((x) => x.partName === v.partName);
-          if (!found) {
-            this.customWidgets.push(w);
+        plugin.widgets.forEach((group) => {
+          if (group.partDefinitions && group.partDefinitions.length) {
+            const g = {
+              groupName: group.groupName,
+              caption: group.caption,
+              partDefinitions: []
+            };
+            group.partDefinitions.forEach((part) => {
+              const p = { ...part };
+              p.partType = "Widget";
+              p.creator = () => _sfc_main$E;
+              p.propertyGroups = [...p.propertyGroups, ...defaultWidgetPropertyGroups()];
+              partDefinitions2[p.partName] = p;
+              g.partDefinitions.push(p);
+            });
+            if (g.partDefinitions && g.partDefinitions.length) {
+              this.customWidgets.push(g);
+            }
           }
         });
         this.partManager.registerPartDefinitions(partDefinitions2);
       }
-      if (plugin.watchers) {
-        this.watchers = { ...this.providers, ...plugin.watchers };
-      }
       if (plugin.providers) {
         this.providers = { ...this.providers, ...plugin.providers };
       }
@@ -14441,13 +14446,11 @@ ${_html.style}
           minHeight: ((_b = (_a = props.part) == null ? void 0 : _a.children) == null ? void 0 : _b.length) ? void 0 : "200px"
         };
       });
-      const properties = vue.computed(() => {
+      const contentStyle = vue.computed(() => {
         var _a, _b;
         return {
-          style: {
-            ...(_a = props.part) == null ? void 0 : _a.getStyles(props.isMobilePage),
-            ...(_b = props.part) == null ? void 0 : _b.getInlineStyles()
-          }
+          ...(_a = props.part) == null ? void 0 : _a.getStyles(props.isMobilePage),
+          ...(_b = props.part) == null ? void 0 : _b.getInlineStyles()
         };
       });
       const selected = vue.computed(() => !!props.part && editor.context.isSelected(props.part));
@@ -14488,9 +14491,10 @@ ${_html.style}
             onContextmenu: showContextMenu,
             onMousedown: vue.withModifiers(handleClick, ["stop"])
           }, [
-            vue.createElementVNode("div", vue.mergeProps({
-              class: [selected.value && "selected", _ctx.isMobilePage ? "mobile" : "pc", "pb-page-content"]
-            }, properties.value), [
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass([selected.value && "selected", _ctx.isMobilePage ? "mobile" : "pc", "pb-page-content"]),
+              style: vue.normalizeStyle(contentStyle.value)
+            }, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList((_b = _ctx.part) == null ? void 0 : _b.children, (section, index) => {
                 return vue.openBlock(), vue.createBlock(_sfc_main$z, {
                   key: section.partId,
@@ -14498,7 +14502,7 @@ ${_html.style}
                   part: section
                 }, null, 8, ["is-mobile-page", "part"]);
               }), 128))
-            ], 16),
+            ], 6),
             vue.createElementVNode("div", {
               class: "pb-add-section-handle bottom",
               onClick: addSection
@@ -14510,7 +14514,7 @@ ${_html.style}
       };
     }
   });
-  const canvasStyle = '.pb-page-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\n\n.pb-page {\n  display: flex;\n  flex-direction: column;\n  margin: 0 auto;\n  padding-bottom: 100px;\n  width: 100%;\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  display: flex;\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n  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  pointer-events: auto !important;\n}\n\n.pb-widget * {\n  pointer-events: none;\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  pointer-events: auto !important;\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  pointer-events: auto !important;\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 canvasStyle = '.pb-page-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\n\n.pb-page {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  padding-bottom: 100px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n.pb-page .pb-page-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\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  display: flex;\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n  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  pointer-events: auto !important;\n}\n\n.pb-widget * {\n  pointer-events: none;\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  pointer-events: auto !important;\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  pointer-events: auto !important;\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\nbody {\n  margin: 0;\n  padding: 0;\n  background-color: #aaa;\n  overflow: hidden;\n}\n\n.font-icon {\n  font-family: "Material Symbols Outlined", monospace;\n  font-size: 1rem;\n  max-width: 1em;\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  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  font-family: "Material Symbols Outlined", monospace;\n  font-style: normal;\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}';
   const _hoisted_1$g = ["width"];
   const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPageFrame",
@@ -14535,24 +14539,10 @@ ${_html.style}
             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" />
-
+            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"/>
           ${externalCss}
-
           <style>${canvasStyle}</style>
         `;
             const script2 = (_g = (_f = iframeRef.value) == null ? void 0 : _f.contentWindow) == null ? void 0 : _g.document.createElement("script");
@@ -15280,8 +15270,9 @@ ${_html.style}
   const _hoisted_2$2 = { class: "bs-layout-horizontal-wrap ml-16 mb-8 gap-8" };
   const _hoisted_3$1 = ["onClick", "textContent"];
   const _hoisted_4$1 = { class: "group mb-16" };
-  const _hoisted_5$1 = { class: "bs-layout-horizontal-wrap ml-16 mb-8 gap-8" };
-  const _hoisted_6$1 = ["onClick", "textContent"];
+  const _hoisted_5$1 = ["textContent"];
+  const _hoisted_6$1 = { class: "bs-layout-horizontal-wrap ml-16 mb-8 gap-8" };
+  const _hoisted_7$1 = ["onClick", "textContent"];
   const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     __name: "PbWidgetAddModal",
     props: {
@@ -15300,7 +15291,7 @@ ${_html.style}
         modalHandle.close();
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.unref(bluesea.BSModalFrame), { title: "Add Block/Widget" }, {
+        return vue.openBlock(), vue.createBlock(vue.unref(bluesea.BSModalFrame), { title: "Add Widget" }, {
           default: vue.withCtx(() => [
             vue.createElementVNode("div", _hoisted_1$2, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(widgetPartDefinitions), (group) => {
@@ -15309,14 +15300,14 @@ ${_html.style}
                   class: "group mb-16"
                 }, [
                   _cache[0] || (_cache[0] = vue.createElementVNode("div", {
-                    class: "mb-8",
+                    class: "mb-8 section-title",
                     textContent: "Basic Widgets"
                   }, null, -1)),
                   vue.createElementVNode("div", _hoisted_2$2, [
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(group.partDefinitions, (part) => {
                       return vue.openBlock(), vue.createElementBlock("div", {
                         key: part.partName,
-                        class: "part",
+                        class: "part w-200",
                         onClick: ($event) => select(part),
                         textContent: vue.toDisplayString(part.caption)
                       }, null, 8, _hoisted_3$1);
@@ -15324,22 +15315,24 @@ ${_html.style}
                   ])
                 ]);
               }), 128)),
-              vue.createElementVNode("div", _hoisted_4$1, [
-                _cache[1] || (_cache[1] = vue.createElementVNode("div", {
-                  class: "mb-8",
-                  textContent: "Custom Widgets"
-                }, null, -1)),
-                vue.createElementVNode("div", _hoisted_5$1, [
-                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(customWidgets.value, (part) => {
-                    return vue.openBlock(), vue.createElementBlock("div", {
-                      key: part.partName,
-                      class: "part",
-                      onClick: ($event) => select(part),
-                      textContent: vue.toDisplayString(part.caption)
-                    }, null, 8, _hoisted_6$1);
-                  }), 128))
-                ])
-              ])
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(customWidgets.value, (group) => {
+                return vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, [
+                  vue.createElementVNode("div", {
+                    class: "mb-8 section-title",
+                    textContent: vue.toDisplayString(group.caption)
+                  }, null, 8, _hoisted_5$1),
+                  vue.createElementVNode("div", _hoisted_6$1, [
+                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(group.partDefinitions, (part) => {
+                      return vue.openBlock(), vue.createElementBlock("div", {
+                        key: part.partName,
+                        class: "part w-200",
+                        onClick: ($event) => select(part),
+                        textContent: vue.toDisplayString(part.caption)
+                      }, null, 8, _hoisted_7$1);
+                    }), 128))
+                  ])
+                ]);
+              }), 256))
             ])
           ]),
           _: 1

package/package.json

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