@g1cloud/page-builder-editor 1.0.0-alpha.5 → 1.0.0-alpha.7

package/dist/{index-Mob7K7vK.js → index-BTlwA7HP.js}

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import { ref, defineComponent, openBlock, createElementBlock, createCommentVNode, computed, normalizeClass, createElementVNode, mergeProps, toDisplayString, onMounted, watch, Fragment, renderList, provide, inject, createBlock as createBlock$1, resolveDynamicComponent, reactive, defineAsyncComponent, withDirectives, unref, createVNode, normalizeStyle, resolveComponent, vModelText, onBeforeUnmount, resolveDirective, withModifiers, renderSlot, normalizeProps, guardReactiveProps, markRaw, Teleport, withCtx } from "vue";
-import { notNull, BSTextInput, vClickOutside, useModal, useContextMenu, BSSelect, BSLocaleSelect, BSTabSheet, BSTree, BSDateRange } from "@g1cloud/bluesea";
+import { notNull, BSTextInput, vClickOutside, useContextMenu, BSSelect, BSTabSheet, BSTree, useModal, BSDateRange } from "@g1cloud/bluesea";
 const create$5 = () => /* @__PURE__ */ new Map();
 const copy = (m) => {
   const r = create$5();
@@ -6721,7 +6721,7 @@ class Part {
     return "";
   }
   getStyles() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
+    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;
     const style = {};
     if (((_a = this.properties) == null ? void 0 : _a.direction) === "horizontal") {
       style.display = "flex";
@@ -6765,6 +6765,40 @@ class Part {
       style.width = this.properties.width;
     if ((_s = this.properties) == null ? void 0 : _s.height)
       style.height = this.properties.height;
+    if ((_t = this.properties) == null ? void 0 : _t.backgroundColor)
+      style.backgroundColor = this.properties.backgroundColor;
+    if ((_u = this.properties) == null ? void 0 : _u.borderLeftWidth)
+      style.borderLeftWidth = this.properties.borderLeftWidth;
+    if ((_v = this.properties) == null ? void 0 : _v.borderRightWidth)
+      style.borderRightWidth = this.properties.borderRightWidth;
+    if ((_w = this.properties) == null ? void 0 : _w.borderTopWidth)
+      style.borderTopWidth = this.properties.borderTopWidth;
+    if ((_x = this.properties) == null ? void 0 : _x.borderBottomWidth)
+      style.borderBottomWidth = this.properties.borderBottomWidth;
+    if ((_y = this.properties) == null ? void 0 : _y.borderTopLeftRadius)
+      style.borderTopLeftRadius = this.properties.borderTopLeftRadius;
+    if ((_z = this.properties) == null ? void 0 : _z.borderTopRightRadius)
+      style.borderTopRightRadius = this.properties.borderTopRightRadius;
+    if ((_A = this.properties) == null ? void 0 : _A.borderBottomLeftRadius)
+      style.borderBottomLeftRadius = this.properties.borderBottomLeftRadius;
+    if ((_B = this.properties) == null ? void 0 : _B.borderBottomRightRadius)
+      style.borderBottomRightRadius = this.properties.borderBottomRightRadius;
+    if (((_C = this.properties) == null ? void 0 : _C.borderColor) && style.borderLeftWidth) {
+      style.borderLeftStyle = "solid";
+      style.borderLeftColor = (_D = this.properties) == null ? void 0 : _D.borderColor;
+    }
+    if (((_E = this.properties) == null ? void 0 : _E.borderColor) && style.borderRightWidth) {
+      style.borderRightStyle = "solid";
+      style.borderRightColor = (_F = this.properties) == null ? void 0 : _F.borderColor;
+    }
+    if (((_G = this.properties) == null ? void 0 : _G.borderColor) && style.borderTopWidth) {
+      style.borderTopStyle = "solid";
+      style.borderTopColor = (_H = this.properties) == null ? void 0 : _H.borderColor;
+    }
+    if (((_I = this.properties) == null ? void 0 : _I.borderColor) && style.borderBottomWidth) {
+      style.borderBottomStyle = "solid";
+      style.borderBottomColor = (_J = this.properties) == null ? void 0 : _J.borderColor;
+    }
     return style;
   }
   getPageBuilderId() {
@@ -6773,12 +6807,6 @@ class Part {
     if (this.parent)
       return this.parent.getPageBuilderId();
   }
-  getLanguage() {
-    if (this.isRoot())
-      return this.language;
-    if (this.parent)
-      return this.parent.getLanguage();
-  }
   isGlobalDesignPart() {
     return false;
   }
@@ -6864,12 +6892,12 @@ let Model$1 = class Model {
     this.rootPart = ref(new RootPart());
   }
 };
-const _hoisted_1$7$1 = ["data-model-id"];
-const _hoisted_2$3$1 = {
+const _hoisted_1$8$1 = ["data-model-id"];
+const _hoisted_2$4$1 = {
   key: 1,
   class: "pb-nested-widget"
 };
-const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
   __name: "PbWidget",
   props: {
     part: {}
@@ -6891,7 +6919,7 @@ const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
           key: 0,
           part: _ctx.part
         }, null, 8, ["part"])) : createCommentVNode("", true),
-        childComponents.value && childComponents.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$3$1, [
+        childComponents.value && childComponents.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$4$1, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(childComponents.value, (child) => {
             return openBlock(), createBlock$1(resolveDynamicComponent(child.component), {
               key: child.part.partId,
@@ -6899,12 +6927,12 @@ const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
             }, null, 8, ["part"]);
           }), 128))
         ])) : createCommentVNode("", true)
-      ], 16, _hoisted_1$7$1);
+      ], 16, _hoisted_1$8$1);
     };
   }
 });
-const _hoisted_1$6$1 = ["data-model-id"];
-const _sfc_main$7$1 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$7$1 = ["data-model-id"];
+const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
   __name: "PbBlock",
   props: {
     part: {}
@@ -6922,17 +6950,17 @@ const _sfc_main$7$1 = /* @__PURE__ */ defineComponent({
         style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
       }, properties.value), [
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.part.children, (child) => {
-          return openBlock(), createBlock$1(_sfc_main$8$1, {
+          return openBlock(), createBlock$1(_sfc_main$9$1, {
             key: child.partId,
             part: child
           }, null, 8, ["part"]);
         }), 128))
-      ], 16, _hoisted_1$6$1);
+      ], 16, _hoisted_1$7$1);
     };
   }
 });
-const _hoisted_1$5$1 = { class: "pb-block" };
-const _hoisted_2$2$1 = /* @__PURE__ */ createElementVNode("div", {
+const _hoisted_1$6$1 = { class: "pb-block" };
+const _hoisted_2$3$1 = /* @__PURE__ */ createElementVNode("div", {
   class: "pb-widget",
   style: { "margin": "0 auto" }
 }, [
@@ -6941,21 +6969,21 @@ const _hoisted_2$2$1 = /* @__PURE__ */ createElementVNode("div", {
   ])
 ], -1);
 const _hoisted_3$2$1 = [
-  _hoisted_2$2$1
+  _hoisted_2$3$1
 ];
-const _sfc_main$6$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7$1 = /* @__PURE__ */ defineComponent({
   __name: "PbLoginDepart",
   props: {
     part: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$5$1, _hoisted_3$2$1);
+      return openBlock(), createElementBlock("div", _hoisted_1$6$1, _hoisted_3$2$1);
     };
   }
 });
-const _hoisted_1$4$1 = ["data-model-id"];
-const _sfc_main$5$1 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$5$1 = ["data-model-id"];
+const _sfc_main$6$1 = /* @__PURE__ */ defineComponent({
   __name: "PbSection",
   props: {
     part: {}
@@ -6971,21 +6999,21 @@ const _sfc_main$5$1 = /* @__PURE__ */ defineComponent({
         "data-model-id": _ctx.part.partId,
         style: (_a = _ctx.part.properties) == null ? void 0 : _a.css
       }, properties.value), [
-        ((_b = _ctx.part.properties) == null ? void 0 : _b.name) === "Login Design Part" ? (openBlock(), createBlock$1(_sfc_main$6$1, {
+        ((_b = _ctx.part.properties) == null ? void 0 : _b.name) === "Login Design Part" ? (openBlock(), createBlock$1(_sfc_main$7$1, {
           key: 0,
           part: _ctx.part
         }, null, 8, ["part"])) : _ctx.part.children && _ctx.part.children.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.part.children, (block) => {
-          return openBlock(), createBlock$1(_sfc_main$7$1, {
+          return openBlock(), createBlock$1(_sfc_main$8$1, {
             key: block.partId,
             part: block
           }, null, 8, ["part"]);
         }), 128)) : createCommentVNode("", true)
-      ], 16, _hoisted_1$4$1);
+      ], 16, _hoisted_1$5$1);
     };
   }
 });
-const _hoisted_1$3$1 = { class: "pb-image-widget" };
-const _hoisted_2$1$1 = ["src"];
+const _hoisted_1$4$1 = { class: "pb-image-widget" };
+const _hoisted_2$2$1 = ["src"];
 const _hoisted_3$1$1 = {
   key: 1,
   class: "empty"
@@ -6994,7 +7022,7 @@ const _hoisted_4$1$1 = /* @__PURE__ */ createElementVNode("span", { class: "font
 const _hoisted_5$1$1 = [
   _hoisted_4$1$1
 ];
-const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5$1 = /* @__PURE__ */ defineComponent({
   __name: "PbImageWidget",
   props: {
     part: {},
@@ -7003,19 +7031,19 @@ const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       var _a, _b;
-      return openBlock(), createElementBlock("div", _hoisted_1$3$1, [
+      return openBlock(), createElementBlock("div", _hoisted_1$4$1, [
         ((_a = _ctx.part.properties) == null ? void 0 : _a.image) ? (openBlock(), createElementBlock("img", {
           key: 0,
           src: (_b = _ctx.part.properties) == null ? void 0 : _b.image,
           alt: "",
           class: "image"
-        }, null, 8, _hoisted_2$1$1)) : !_ctx.viewMode ? (openBlock(), createElementBlock("div", _hoisted_3$1$1, _hoisted_5$1$1)) : createCommentVNode("", true)
+        }, null, 8, _hoisted_2$2$1)) : !_ctx.viewMode ? (openBlock(), createElementBlock("div", _hoisted_3$1$1, _hoisted_5$1$1)) : createCommentVNode("", true)
       ]);
     };
   }
 });
-const _hoisted_1$2$1 = ["textContent"];
-const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$3$1 = ["textContent"];
+const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
   __name: "PbTextWidget",
   props: {
     part: {},
@@ -7023,34 +7051,114 @@ const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
+    const pageBuilder = usePageBuilder();
+    const emptyClass = computed(() => {
+      var _a;
+      if (props.viewMode) {
+        return false;
+      } else if ((_a = props.part.properties) == null ? void 0 : _a.text) {
+        if (typeof props.part.properties.text === "string") {
+          return true;
+        } else {
+          return !props.part.properties.text[pageBuilder.language.value];
+        }
+      } else {
+        return true;
+      }
+    });
     const text = computed(() => {
       var _a;
       if ((_a = props.part.properties) == null ? void 0 : _a.text) {
         if (typeof props.part.properties.text === "string") {
-          return props.part.properties.text;
+          if (props.viewMode) {
+            return "";
+          } else {
+            return "Empty text";
+          }
         } else {
-          return props.part.properties.text[props.part.getLanguage() || "en"];
+          const t = props.part.properties.text[pageBuilder.language.value];
+          if (props.viewMode) {
+            return t || "";
+          } else {
+            return t || "Empty text";
+          }
         }
-      } else if (!props.viewMode) {
+      } else if (props.viewMode) {
+        return "";
+      } else {
         return "Empty text";
       }
-      return "";
     });
     const style = computed(() => {
-      var _a;
+      var _a, _b;
       return {
         style: {
-          fontSize: (_a = props.part.properties) == null ? void 0 : _a.fontSize
+          fontSize: (_a = props.part.properties) == null ? void 0 : _a.fontSize,
+          color: (_b = props.part.properties) == null ? void 0 : _b.color
         }
       };
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass([[!_ctx.viewMode && !text.value ? "empty" : ""], "pb-text-widget"])
+        class: normalizeClass([[emptyClass.value ? "empty" : ""], "pb-text-widget"])
       }, [
         createElementVNode("div", mergeProps({ class: "text" }, style.value, {
           textContent: toDisplayString(text.value)
-        }), null, 16, _hoisted_1$2$1)
+        }), null, 16, _hoisted_1$3$1)
+      ], 2);
+    };
+  }
+});
+const _hoisted_1$2$1 = ["innerHTML"];
+const _hoisted_2$1$1 = { key: 1 };
+const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
+  __name: "PbHtmlWidget",
+  props: {
+    part: {},
+    viewMode: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const pageBuilder = usePageBuilder();
+    const getHtml = (html2) => {
+      if (!html2)
+        return;
+      if (typeof html2 !== "object")
+        return;
+      const language = pageBuilder.language.value;
+      let _html = html2[language];
+      if (!_html && html2.tags) {
+        _html = html2;
+      }
+      return `${_html.tags}
+<style>
+${_html.style}
+</style>`;
+    };
+    const html = computed(() => {
+      var _a, _b;
+      console.log("---------");
+      console.log((_a = props.part.properties) == null ? void 0 : _a.html);
+      console.log("---------");
+      console.log(props.part);
+      return getHtml((_b = props.part.properties) == null ? void 0 : _b.html);
+    });
+    const emptyClass = computed(() => {
+      if (props.viewMode) {
+        return false;
+      } else {
+        return !html.value;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([[emptyClass.value ? "empty" : ""], "pb-html-widget"])
+      }, [
+        html.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "html",
+          innerHTML: html.value
+        }, null, 8, _hoisted_1$2$1)) : (openBlock(), createElementBlock("span", _hoisted_2$1$1, "Empty HTML"))
       ], 2);
     };
   }
@@ -7091,16 +7199,16 @@ const PageBuilderViewerEvent = {
 };
 const _hoisted_1$1$1 = { class: "pb-product-list-widget" };
 const _hoisted_2$l = { class: "product" };
-const _hoisted_3$g = { class: "image" };
-const _hoisted_4$d = ["src"];
-const _hoisted_5$8 = { class: "name" };
-const _hoisted_6$7 = { class: "price" };
+const _hoisted_3$h = { class: "image" };
+const _hoisted_4$e = ["src"];
+const _hoisted_5$7 = { class: "name" };
+const _hoisted_6$6 = { class: "price" };
 const _hoisted_7$5 = {
   key: 1,
   class: "empty"
 };
 const _hoisted_8$5 = /* @__PURE__ */ createElementVNode("span", { class: "font-icon" }, "image", -1);
-const _hoisted_9$2 = [
+const _hoisted_9$5 = [
   _hoisted_8$5
 ];
 const _sfc_main$2$1 = /* @__PURE__ */ defineComponent({
@@ -7139,15 +7247,15 @@ const _sfc_main$2$1 = /* @__PURE__ */ defineComponent({
           }, [
             createElementVNode("div", _hoisted_2$l, [
               products.value[index - 1] ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                createElementVNode("div", _hoisted_3$g, [
+                createElementVNode("div", _hoisted_3$h, [
                   createElementVNode("img", {
                     src: products.value[index - 1].image,
                     alt: ""
-                  }, null, 8, _hoisted_4$d)
+                  }, null, 8, _hoisted_4$e)
                 ]),
-                createElementVNode("div", _hoisted_5$8, toDisplayString(products.value[index - 1].itemName), 1),
-                createElementVNode("div", _hoisted_6$7, toDisplayString(products.value[index - 1].price), 1)
-              ], 64)) : (openBlock(), createElementBlock("div", _hoisted_7$5, _hoisted_9$2))
+                createElementVNode("div", _hoisted_5$7, toDisplayString(products.value[index - 1].itemName), 1),
+                createElementVNode("div", _hoisted_6$6, toDisplayString(products.value[index - 1].price), 1)
+              ], 64)) : (openBlock(), createElementBlock("div", _hoisted_7$5, _hoisted_9$5))
             ])
           ]);
         }), 128)) : createCommentVNode("", true)
@@ -7159,37 +7267,42 @@ const partDefinitions$1 = {
   "Section": {
     partType: "Section",
     partName: "Section",
-    creator: () => _sfc_main$5$1
+    creator: () => _sfc_main$6$1
   },
   "GlobalDesignPart": {
     partType: "Section",
     partName: "GlobalDesignPart",
-    creator: () => _sfc_main$5$1
+    creator: () => _sfc_main$6$1
   },
   "LocalDesignPart": {
     partType: "Section",
     partName: "LocalDesignPart",
-    creator: () => _sfc_main$5$1
+    creator: () => _sfc_main$6$1
   },
   "LocalMarketingPart": {
     partType: "Section",
     partName: "LocalMarketingPart",
-    creator: () => _sfc_main$5$1
+    creator: () => _sfc_main$6$1
   },
   "Block": {
     partType: "Block",
     partName: "Block",
-    creator: () => _sfc_main$7$1
+    creator: () => _sfc_main$8$1
   },
   "TextWidget": {
     partType: "Widget",
     partName: "TextWidget",
-    creator: () => _sfc_main$3$1
+    creator: () => _sfc_main$4$1
   },
   "ImageWidget": {
     partType: "Widget",
     partName: "ImageWidget",
-    creator: () => _sfc_main$4$1
+    creator: () => _sfc_main$5$1
+  },
+  "HtmlWidget": {
+    partType: "Widget",
+    partName: "HtmlWidget",
+    creator: () => _sfc_main$3$1
   },
   "ProductListWidget": {
     partType: "Widget",
@@ -7197,19 +7310,24 @@ const partDefinitions$1 = {
     creator: () => _sfc_main$2$1
   }
 };
+const PAGE_BUILDER_KEY = "PageBuilder";
 const PAGE_BUILDER_VIEWER_KEY = "PageBuilderViewer";
 class PageBuilderViewerImpl {
   constructor() {
     __publicField2(this, "instanceId");
     __publicField2(this, "model");
-    __publicField2(this, "language");
+    __publicField2(this, "language", ref("en"));
     this.model = new Model$1();
-    this.language = "en";
+  }
+  getLanguage() {
+    return this.language.value;
+  }
+  setLanguage(language) {
+    this.language.value = language || "en";
   }
   render(pageContent) {
     const rootPart = new RootPart();
     rootPart.pageBuilderId = this.instanceId;
-    rootPart.language = this.language;
     rootPart.children = this.parsePageContent(pageContent);
     if (rootPart.children) {
       for (let page of rootPart.children) {
@@ -7253,13 +7371,22 @@ const createPageBuilderViewer = () => {
   const viewer = new PageBuilderViewerImpl();
   return viewer;
 };
+const providePageBuilder = (pageBuilder) => {
+  provide(PAGE_BUILDER_KEY, pageBuilder);
+};
 const providePageBuilderViewer = (pageBuilderViewer) => {
   provide(PAGE_BUILDER_VIEWER_KEY, pageBuilderViewer);
 };
+const usePageBuilder = () => {
+  const pageBuilder = inject(PAGE_BUILDER_KEY);
+  if (!pageBuilder)
+    throw Error("PageBuilder not found");
+  return pageBuilder;
+};
 const usePageBuilderViewer = () => {
   const pageBuilderViewer = inject(PAGE_BUILDER_VIEWER_KEY);
   if (!pageBuilderViewer)
-    throw Error("PageBuilder not found");
+    throw Error("PageBuilderViewer not found");
   return pageBuilderViewer;
 };
 const createPartComponents = (parts) => {
@@ -7296,7 +7423,7 @@ const _sfc_main$1$1 = /* @__PURE__ */ defineComponent({
           class: normalizeClass([[_ctx.isMobilePage ? "mobile" : "pc"], "pb-page-content"])
         }, [
           (openBlock(true), createElementBlock(Fragment, null, renderList((_a = _ctx.page) == null ? void 0 : _a.children, (section) => {
-            return openBlock(), createBlock$1(_sfc_main$5$1, {
+            return openBlock(), createBlock$1(_sfc_main$6$1, {
               key: section.partId,
               part: section
             }, null, 8, ["part"]);
@@ -7319,8 +7446,9 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     const props = __props;
     const pageBuilderViewer = createPageBuilderViewer();
     pageBuilderViewer.instanceId = props.instanceId;
-    pageBuilderViewer.language = props.language || "en";
+    pageBuilderViewer.setLanguage(props.language);
     providePageBuilderViewer(pageBuilderViewer);
+    providePageBuilder(pageBuilderViewer);
     const page = computed(() => pageBuilderViewer.model.rootPart.value.children && pageBuilderViewer.model.rootPart.value.children[props.isMobilePage ? 0 : 1]);
     onMounted(() => {
       if (props.pageContent) {
@@ -7636,7 +7764,7 @@ class Model2 {
   parsePageModel(json, keepPartId = false) {
     return partsFromJsonString(json, keepPartId);
   }
-  moveElements(partId, destPartId, destIndex, update) {
+  moveElements(partId, destPartId, destIndex, update, doNotChangeIndex) {
     var _a;
     if (partId === destPartId)
       return;
@@ -7644,7 +7772,7 @@ class Model2 {
     if (element) {
       if (((_a = element.parent) == null ? void 0 : _a.getAttribute(PART_ID_KEY)) === destPartId) {
         const index = this.getIndexOfElement(element);
-        if (index !== void 0 && index < destIndex)
+        if (!doNotChangeIndex && index !== void 0 && index < destIndex)
           destIndex--;
       }
       const parts = this.findPartsByIds([partId]);
@@ -7755,10 +7883,8 @@ class Model2 {
     return node;
   }
   setElementAttribute(node, name, value) {
-    if (!value)
-      return;
-    if (typeof value === "string") {
-      node.setAttribute(name, value);
+    if (!value || typeof value === "string") {
+      node.setAttribute(name, value ? value : "");
     } else if (typeof value === "object") {
       node.setAttribute(`${name}.object`, JSON.stringify(value));
     }
@@ -7939,12 +8065,14 @@ class PartManager {
 }
 const defaultPartPropertyEditors = () => {
   return {
-    "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-Bk0WJxA0.js")),
-    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-DNdXl-Tr.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-CfRbKELF.js")),
-    "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-BJovN1su.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-EuqsavTF.js")),
-    "product": () => defineAsyncComponent(() => import("./PbPropertyEditorProduct-COnCyYJl.js"))
+    "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-Dgp_AVOD.js")),
+    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-BWOKvwD9.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-sb-oS_gz.js")),
+    "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-CWedbXJI.js")),
+    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-y7y6ZUQs.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-BXEXm2Px.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-CbQR_BzH.js")),
+    "product": () => defineAsyncComponent(() => import("./PbPropertyEditorProduct-p0zOCA9R.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -8177,16 +8305,16 @@ const _export_sfc = (sfc, props) => {
 const _sfc_main$p = {};
 const _hoisted_1$t = { class: "pb-add-widget-button" };
 const _hoisted_2$k = /* @__PURE__ */ createElementVNode("span", { class: "icon material-icons-outlined" }, "add_box", -1);
-const _hoisted_3$f = /* @__PURE__ */ createElementVNode("span", { class: "text" }, "Add Widget", -1);
-const _hoisted_4$c = [
+const _hoisted_3$g = /* @__PURE__ */ createElementVNode("span", { class: "text" }, "Add Widget", -1);
+const _hoisted_4$d = [
   _hoisted_2$k,
-  _hoisted_3$f
+  _hoisted_3$g
 ];
 function _sfc_render$1(_ctx, _cache) {
   return openBlock(), createElementBlock("div", _hoisted_1$t, [
     createElementVNode("button", {
       onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("add-widget", $event))
-    }, _hoisted_4$c)
+    }, _hoisted_4$d)
   ]);
 }
 const PbAddWidgetButton = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$1]]);
@@ -8906,7 +9034,7 @@ const _hoisted_2$i = /* @__PURE__ */ createElementVNode("div", {
     /* @__PURE__ */ createElementVNode("h3", null, "Login Design Part")
   ])
 ], -1);
-const _hoisted_3$e = [
+const _hoisted_3$f = [
   _hoisted_2$i
 ];
 const _sfc_main$m = /* @__PURE__ */ defineComponent({
@@ -8916,7 +9044,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$q, _hoisted_3$e);
+      return openBlock(), createElementBlock("div", _hoisted_1$q, _hoisted_3$f);
     };
   }
 });
@@ -9055,14 +9183,20 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$o = { class: "group-editor group-editor-position" };
 const _hoisted_2$h = { class: "flex-align-center" };
-const _hoisted_3$d = /* @__PURE__ */ createElementVNode("div", { class: "label" }, [
-  /* @__PURE__ */ createElementVNode("label", null, "Position")
+const _hoisted_3$e = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
+  /* @__PURE__ */ createElementVNode("label", { textContent: "Position" })
 ], -1);
-const _hoisted_4$b = { class: "flex-grow-1" };
-const _hoisted_5$7 = /* @__PURE__ */ createElementVNode("span", null, "L", -1);
-const _hoisted_6$6 = /* @__PURE__ */ createElementVNode("span", { class: "ml-8" }, "R", -1);
-const _hoisted_7$4 = /* @__PURE__ */ createElementVNode("span", { class: "ml-8" }, "T", -1);
-const _hoisted_8$4 = /* @__PURE__ */ createElementVNode("span", { class: "ml-8" }, "B", -1);
+const _hoisted_4$c = { class: "flex-grow-1" };
+const _hoisted_5$6 = { class: "bg-gray-100 py-5 rounded-8" };
+const _hoisted_6$5 = { class: "text-center" };
+const _hoisted_7$4 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
+const _hoisted_8$4 = /* @__PURE__ */ createElementVNode("div", {
+  class: "d-inline-block text-center text-gray-300",
+  style: { "width": "30%", "font-size": "12px" }
+}, [
+  /* @__PURE__ */ createElementVNode("span", { class: "font-icon" }, "add")
+], -1);
+const _hoisted_9$4 = { class: "text-center" };
 const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorPosition",
   props: {
@@ -9089,37 +9223,44 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$o, [
         createElementVNode("div", _hoisted_2$h, [
-          _hoisted_3$d,
-          createElementVNode("div", _hoisted_4$b, [
-            createElementVNode("div", null, [
-              _hoisted_5$7,
-              createVNode(unref(BSTextInput), {
-                "model-value": left.value,
-                class: "ml-4",
-                width: "4em",
-                "onUpdate:modelValue": updateLeft
-              }, null, 8, ["model-value"]),
-              _hoisted_6$6,
-              createVNode(unref(BSTextInput), {
-                "model-value": right.value,
-                class: "ml-4",
-                width: "4em",
-                "onUpdate:modelValue": updateRight
-              }, null, 8, ["model-value"]),
-              _hoisted_7$4,
-              createVNode(unref(BSTextInput), {
-                "model-value": top.value,
-                class: "ml-4",
-                width: "4em",
-                "onUpdate:modelValue": updateTop
-              }, null, 8, ["model-value"]),
-              _hoisted_8$4,
-              createVNode(unref(BSTextInput), {
-                "model-value": bottom.value,
-                class: "ml-4",
-                width: "4em",
-                "onUpdate:modelValue": updateBottom
-              }, null, 8, ["model-value"])
+          _hoisted_3$e,
+          createElementVNode("div", _hoisted_4$c, [
+            createElementVNode("div", _hoisted_5$6, [
+              createElementVNode("div", _hoisted_6$5, [
+                createVNode(unref(BSTextInput), {
+                  "model-value": top.value,
+                  class: "ml-4",
+                  prefix: "T",
+                  width: "30%",
+                  "onUpdate:modelValue": updateTop
+                }, null, 8, ["model-value"])
+              ]),
+              createElementVNode("div", _hoisted_7$4, [
+                createVNode(unref(BSTextInput), {
+                  "model-value": left.value,
+                  class: "ml-4",
+                  prefix: "L",
+                  width: "30%",
+                  "onUpdate:modelValue": updateLeft
+                }, null, 8, ["model-value"]),
+                _hoisted_8$4,
+                createVNode(unref(BSTextInput), {
+                  "model-value": right.value,
+                  class: "ml-4",
+                  prefix: "R",
+                  width: "30%",
+                  "onUpdate:modelValue": updateRight
+                }, null, 8, ["model-value"])
+              ]),
+              createElementVNode("div", _hoisted_9$4, [
+                createVNode(unref(BSTextInput), {
+                  "model-value": bottom.value,
+                  class: "ml-4",
+                  prefix: "B",
+                  width: "30%",
+                  "onUpdate:modelValue": updateBottom
+                }, null, 8, ["model-value"])
+              ])
             ])
           ])
         ])
@@ -9129,12 +9270,10 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$n = { class: "group-editor group-editor-size" };
 const _hoisted_2$g = { class: "flex-align-center" };
-const _hoisted_3$c = /* @__PURE__ */ createElementVNode("div", { class: "label" }, [
-  /* @__PURE__ */ createElementVNode("label", null, "Size")
+const _hoisted_3$d = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
+  /* @__PURE__ */ createElementVNode("label", { textContent: "Size" })
 ], -1);
-const _hoisted_4$a = { class: "flex-grow-1" };
-const _hoisted_5$6 = /* @__PURE__ */ createElementVNode("span", null, "W", -1);
-const _hoisted_6$5 = /* @__PURE__ */ createElementVNode("span", { class: "ml-16" }, "H", -1);
+const _hoisted_4$b = { class: "flex-grow-1 bs-layout-horizontal" };
 const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorSize",
   props: {
@@ -9157,20 +9296,18 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$n, [
         createElementVNode("div", _hoisted_2$g, [
-          _hoisted_3$c,
-          createElementVNode("div", _hoisted_4$a, [
-            _hoisted_5$6,
+          _hoisted_3$d,
+          createElementVNode("div", _hoisted_4$b, [
             createVNode(unref(BSTextInput), {
               "model-value": width.value,
-              class: "ml-4",
-              width: "5em",
+              class: "flex-grow-1 mr-2",
+              prefix: "W",
               "onUpdate:modelValue": updateWidth
             }, null, 8, ["model-value"]),
-            _hoisted_6$5,
             createVNode(unref(BSTextInput), {
               "model-value": height.value,
-              class: "ml-4",
-              width: "5em",
+              class: "flex-grow-1 ml-2",
+              prefix: "H",
               "onUpdate:modelValue": updateHeight
             }, null, 8, ["model-value"])
           ])
@@ -9338,15 +9475,15 @@ var script$4 = {
 };
 const _hoisted_1$m = { class: "vc-alpha" };
 const _hoisted_2$f = { class: "vc-alpha-checkboard-wrap" };
-const _hoisted_3$b = /* @__PURE__ */ createElementVNode(
+const _hoisted_3$c = /* @__PURE__ */ createElementVNode(
   "div",
   { class: "vc-alpha-picker" },
   null,
   -1
   /* HOISTED */
 );
-const _hoisted_4$9 = [
-  _hoisted_3$b
+const _hoisted_4$a = [
+  _hoisted_3$c
 ];
 function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Checkboard = resolveComponent("Checkboard");
@@ -9380,7 +9517,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
             class: "vc-alpha-pointer",
             style: normalizeStyle({ left: `${$options.colors.a * 100}%` })
           },
-          _hoisted_4$9,
+          _hoisted_4$a,
           4
           /* STYLE */
         )
@@ -10456,8 +10593,8 @@ var script$3 = {
 };
 const _hoisted_1$l = { class: "vc-editable-input" };
 const _hoisted_2$e = ["aria-labelledby"];
-const _hoisted_3$a = ["id", "for"];
-const _hoisted_4$8 = { class: "vc-input__desc" };
+const _hoisted_3$b = ["id", "for"];
+const _hoisted_4$9 = { class: "vc-input__desc" };
 function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$l, [
     withDirectives(createElementVNode("input", {
@@ -10474,10 +10611,10 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
       id: $options.labelId,
       for: $props.label,
       class: "vc-input__label"
-    }, toDisplayString($options.labelSpanText), 9, _hoisted_3$a),
+    }, toDisplayString($options.labelSpanText), 9, _hoisted_3$b),
     createElementVNode(
       "span",
-      _hoisted_4$8,
+      _hoisted_4$9,
       toDisplayString($props.desc),
       1
       /* TEXT */
@@ -10568,15 +10705,15 @@ const _hoisted_2$d = /* @__PURE__ */ createElementVNode(
   -1
   /* HOISTED */
 );
-const _hoisted_3$9 = /* @__PURE__ */ createElementVNode(
+const _hoisted_3$a = /* @__PURE__ */ createElementVNode(
   "div",
   { class: "vc-saturation-circle" },
   null,
   -1
   /* HOISTED */
 );
-const _hoisted_4$7 = [
-  _hoisted_3$9
+const _hoisted_4$8 = [
+  _hoisted_3$a
 ];
 function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
@@ -10598,7 +10735,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
           class: "vc-saturation-pointer",
           style: normalizeStyle({ top: $options.pointerTop, left: $options.pointerLeft })
         },
-        _hoisted_4$7,
+        _hoisted_4$8,
         4
         /* STYLE */
       )
@@ -10747,7 +10884,7 @@ const _hoisted_2$c = /* @__PURE__ */ createElementVNode(
   -1
   /* HOISTED */
 );
-const _hoisted_3$8 = [
+const _hoisted_3$9 = [
   _hoisted_2$c
 ];
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
@@ -10775,7 +10912,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
             style: normalizeStyle({ top: $options.pointerTop, left: $options.pointerLeft }),
             role: "presentation"
           },
-          _hoisted_3$8,
+          _hoisted_3$9,
           4
           /* STYLE */
         )
@@ -10877,8 +11014,8 @@ var script = {
 };
 const _hoisted_1$i = { class: "vc-sketch-saturation-wrap" };
 const _hoisted_2$b = { class: "vc-sketch-controls" };
-const _hoisted_3$7 = { class: "vc-sketch-sliders" };
-const _hoisted_4$6 = { class: "vc-sketch-hue-wrap" };
+const _hoisted_3$8 = { class: "vc-sketch-sliders" };
+const _hoisted_4$7 = { class: "vc-sketch-hue-wrap" };
 const _hoisted_5$5 = {
   key: 0,
   class: "vc-sketch-alpha-wrap"
@@ -10889,7 +11026,7 @@ const _hoisted_8$3 = {
   key: 0,
   class: "vc-sketch-field"
 };
-const _hoisted_9$1 = { class: "vc-sketch-field--double" };
+const _hoisted_9$3 = { class: "vc-sketch-field--double" };
 const _hoisted_10$1 = { class: "vc-sketch-field--single" };
 const _hoisted_11$1 = { class: "vc-sketch-field--single" };
 const _hoisted_12$1 = { class: "vc-sketch-field--single" };
@@ -10902,8 +11039,8 @@ const _hoisted_14$1 = {
   role: "group",
   "aria-label": "A color preset, pick one to set as current color"
 };
-const _hoisted_15 = ["aria-label", "onClick"];
-const _hoisted_16 = ["aria-label", "onClick"];
+const _hoisted_15$1 = ["aria-label", "onClick"];
+const _hoisted_16$1 = ["aria-label", "onClick"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Saturation = resolveComponent("Saturation");
   const _component_Hue = resolveComponent("Hue");
@@ -10925,8 +11062,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         }, null, 8, ["value", "onChange"])
       ]),
       createElementVNode("div", _hoisted_2$b, [
-        createElementVNode("div", _hoisted_3$7, [
-          createElementVNode("div", _hoisted_4$6, [
+        createElementVNode("div", _hoisted_3$8, [
+          createElementVNode("div", _hoisted_4$7, [
             createVNode(_component_Hue, {
               value: _ctx.colors,
               onChange: $options.childChange
@@ -10950,7 +11087,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       !$props.disableFields ? (openBlock(), createElementBlock("div", _hoisted_8$3, [
         createCommentVNode(" rgba "),
-        createElementVNode("div", _hoisted_9$1, [
+        createElementVNode("div", _hoisted_9$3, [
           createVNode(_component_EdIn, {
             label: "hex",
             value: $options.hex,
@@ -11003,14 +11140,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   "aria-label": `Color:${c}`,
                   style: normalizeStyle({ background: c }),
                   onClick: ($event) => $options.handlePreset(c)
-                }, null, 12, _hoisted_15)) : (openBlock(), createElementBlock("div", {
+                }, null, 12, _hoisted_15$1)) : (openBlock(), createElementBlock("div", {
                   key: c,
                   "aria-label": `Color:${c}`,
                   class: "vc-sketch-presets-color",
                   onClick: ($event) => $options.handlePreset(c)
                 }, [
                   createVNode(_component_Checkboard)
-                ], 8, _hoisted_16))
+                ], 8, _hoisted_16$1))
               ],
               64
               /* STABLE_FRAGMENT */
@@ -11047,7 +11184,14 @@ const _sfc_main$i = defineComponent({
   },
   setup(props, { emit }) {
     const color = ref(props.value);
-    const appliedColor = computed(() => color.value);
+    const appliedColor = computed(() => {
+      if (typeof color.value === "string")
+        return color.value;
+      else if (typeof color.value === "object" && color.value.hasOwnProperty("hex"))
+        return color.value.hex;
+      else
+        return;
+    });
     const isShowColorPicker = ref(false);
     const toggle = (value) => {
       isShowColorPicker.value = value !== void 0 ? value : !isShowColorPicker.value;
@@ -11060,7 +11204,7 @@ const _sfc_main$i = defineComponent({
       }
     );
     watch(
-      color,
+      () => color.value,
       () => setTimeout(() => {
         if (appliedColor.value)
           emit("change-color", appliedColor.value);
@@ -11070,8 +11214,7 @@ const _sfc_main$i = defineComponent({
     watch(
       () => props.value,
       (value) => {
-        if (typeof value === "string")
-          color.value = value;
+        color.value = value;
       },
       { deep: true }
     );
@@ -11090,10 +11233,10 @@ const _sfc_main$i = defineComponent({
 });
 const _hoisted_1$h = { class: "buttons" };
 const _hoisted_2$a = /* @__PURE__ */ createElementVNode("i", { class: "material-icons-outlined" }, "delete", -1);
-const _hoisted_3$6 = [
+const _hoisted_3$7 = [
   _hoisted_2$a
 ];
-const _hoisted_4$5 = { class: "sketch-wrap" };
+const _hoisted_4$6 = { class: "sketch-wrap" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Sketch = resolveComponent("Sketch");
   const _directive_click_outside = resolveDirective("click-outside");
@@ -11114,9 +11257,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         key: 0,
         class: "pb-button",
         onClick: _cache[1] || (_cache[1] = (...args) => _ctx.emptyColor && _ctx.emptyColor(...args))
-      }, _hoisted_3$6)) : createCommentVNode("", true)
+      }, _hoisted_3$7)) : createCommentVNode("", true)
     ]),
-    createElementVNode("div", _hoisted_4$5, [
+    createElementVNode("div", _hoisted_4$6, [
       _ctx.isShowColorPicker ? (openBlock(), createBlock$1(_component_Sketch, {
         key: 0,
         modelValue: _ctx.color,
@@ -11131,10 +11274,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 const PbColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render]]);
 const _hoisted_1$g = { class: "group-editor group-editor-background" };
 const _hoisted_2$9 = { class: "flex-align-center" };
-const _hoisted_3$5 = /* @__PURE__ */ createElementVNode("div", { class: "label" }, [
-  /* @__PURE__ */ createElementVNode("label", null, "Background")
+const _hoisted_3$6 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
+  /* @__PURE__ */ createElementVNode("label", { textContent: "Background" })
 ], -1);
-const _hoisted_4$4 = { class: "bs-layout-horizontal" };
+const _hoisted_4$5 = { class: "bs-layout-horizontal" };
 const _hoisted_5$4 = { class: "color" };
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorBackground",
@@ -11145,7 +11288,6 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const pageBuilder = usePageBuilderEditor();
-    useModal();
     const color = computed(() => getPropertyValueOfParts(props.selectedParts, "backgroundColor"));
     const emptyColor = () => {
     };
@@ -11169,8 +11311,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$g, [
         createElementVNode("div", _hoisted_2$9, [
-          _hoisted_3$5,
-          createElementVNode("div", _hoisted_4$4, [
+          _hoisted_3$6,
+          createElementVNode("div", _hoisted_4$5, [
             createElementVNode("div", _hoisted_5$4, [
               createVNode(PbColorPicker, {
                 value: color.value,
@@ -11196,22 +11338,43 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const TopLeftCornerIcon = "data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Transformed%20by:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='%23000000'%20transform='rotate(270)'%3e%3cg%20id='SVGRepo_bgCarrier'%20stroke-width='0'/%3e%3cg%20id='SVGRepo_tracerCarrier'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cg%20id='SVGRepo_iconCarrier'%3e%3cg%3e%3cpath%20fill='none'%20d='M0%200H24V24H0z'/%3e%3cpath%20d='M21%2019v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2H7v-2h2zm-4%200v2H3v-2h2zm16-4v2h-2v-2h2zM5%2015v2H3v-2h2zm0-4v2H3v-2h2zm11-8c2.687%200%204.882%202.124%204.995%204.783L21%208v5h-2V8c0-1.591-1.255-2.903-2.824-2.995L16%205h-5V3h5zM5%207v2H3V7h2zm0-4v2H3V3h2zm4%200v2H7V3h2z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+const TopRightCornerIcon = "data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Transformed%20by:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='%23000000'%3e%3cg%20id='SVGRepo_bgCarrier'%20stroke-width='0'/%3e%3cg%20id='SVGRepo_tracerCarrier'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cg%20id='SVGRepo_iconCarrier'%3e%3cg%3e%3cpath%20fill='none'%20d='M0%200H24V24H0z'/%3e%3cpath%20d='M21%2019v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2H7v-2h2zm-4%200v2H3v-2h2zm16-4v2h-2v-2h2zM5%2015v2H3v-2h2zm0-4v2H3v-2h2zm11-8c2.687%200%204.882%202.124%204.995%204.783L21%208v5h-2V8c0-1.591-1.255-2.903-2.824-2.995L16%205h-5V3h5zM5%207v2H3V7h2zm0-4v2H3V3h2zm4%200v2H7V3h2z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+const BottomLeftCornerIcon = "data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Transformed%20by:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='%23000000'%20transform='rotate(180)'%3e%3cg%20id='SVGRepo_bgCarrier'%20stroke-width='0'/%3e%3cg%20id='SVGRepo_tracerCarrier'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cg%20id='SVGRepo_iconCarrier'%3e%3cg%3e%3cpath%20fill='none'%20d='M0%200H24V24H0z'/%3e%3cpath%20d='M21%2019v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2H7v-2h2zm-4%200v2H3v-2h2zm16-4v2h-2v-2h2zM5%2015v2H3v-2h2zm0-4v2H3v-2h2zm11-8c2.687%200%204.882%202.124%204.995%204.783L21%208v5h-2V8c0-1.591-1.255-2.903-2.824-2.995L16%205h-5V3h5zM5%207v2H3V7h2zm0-4v2H3V3h2zm4%200v2H7V3h2z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
+const BottomRightCornerIcon = "data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//W3C//DTD%20SVG%201.1//EN'%20'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Transformed%20by:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20fill='%23000000'%20transform='rotate(90)'%3e%3cg%20id='SVGRepo_bgCarrier'%20stroke-width='0'/%3e%3cg%20id='SVGRepo_tracerCarrier'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cg%20id='SVGRepo_iconCarrier'%3e%3cg%3e%3cpath%20fill='none'%20d='M0%200H24V24H0z'/%3e%3cpath%20d='M21%2019v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2h-2v-2h2zm-4%200v2H7v-2h2zm-4%200v2H3v-2h2zm16-4v2h-2v-2h2zM5%2015v2H3v-2h2zm0-4v2H3v-2h2zm11-8c2.687%200%204.882%202.124%204.995%204.783L21%208v5h-2V8c0-1.591-1.255-2.903-2.824-2.995L16%205h-5V3h5zM5%207v2H3V7h2zm0-4v2H3V3h2zm4%200v2H7V3h2z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
 const _hoisted_1$f = { class: "group-editor group-editor-border" };
 const _hoisted_2$8 = { class: "flex-align-center" };
-const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("div", { class: "label" }, [
-  /* @__PURE__ */ createElementVNode("label", null, "Border")
+const _hoisted_3$5 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
+  /* @__PURE__ */ createElementVNode("label", { textContent: "Border" })
+], -1);
+const _hoisted_4$4 = { class: "" };
+const _hoisted_5$3 = /* @__PURE__ */ createElementVNode("div", { class: "sub-title" }, [
+  /* @__PURE__ */ createElementVNode("label", { textContent: "Color" })
+], -1);
+const _hoisted_6$3 = { class: "color" };
+const _hoisted_7$2 = { class: "mt-8" };
+const _hoisted_8$2 = /* @__PURE__ */ createElementVNode("div", { class: "sub-title" }, [
+  /* @__PURE__ */ createElementVNode("label", { textContent: "Border Width" })
+], -1);
+const _hoisted_9$2 = { class: "flex-grow-1 mt-4" };
+const _hoisted_10 = { class: "bg-gray-100 py-5 rounded-8" };
+const _hoisted_11 = { class: "text-center" };
+const _hoisted_12 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
+const _hoisted_13 = /* @__PURE__ */ createElementVNode("div", {
+  class: "d-inline-block text-center text-gray-300",
+  style: { "width": "30%", "font-size": "12px" }
+}, [
+  /* @__PURE__ */ createElementVNode("span", { class: "font-icon" }, "add")
 ], -1);
-const _hoisted_4$3 = { class: "color" };
-const _hoisted_5$3 = { class: "bs-layout-horizontal mt-8" };
-const _hoisted_6$3 = /* @__PURE__ */ createElementVNode("span", null, "WL", -1);
-const _hoisted_7$2 = /* @__PURE__ */ createElementVNode("span", { class: "ml-8" }, "WR", -1);
-const _hoisted_8$2 = /* @__PURE__ */ createElementVNode("span", { class: "ml-8" }, "WT", -1);
-const _hoisted_9 = /* @__PURE__ */ createElementVNode("span", { class: "ml-8" }, "WB", -1);
-const _hoisted_10 = { class: "bs-layout-horizontal mt-8" };
-const _hoisted_11 = /* @__PURE__ */ createElementVNode("span", null, "RTL", -1);
-const _hoisted_12 = /* @__PURE__ */ createElementVNode("span", { class: "ml-8" }, "RTR", -1);
-const _hoisted_13 = /* @__PURE__ */ createElementVNode("span", { class: "ml-8" }, "RBL", -1);
-const _hoisted_14 = /* @__PURE__ */ createElementVNode("span", { class: "ml-8" }, "RBR", -1);
+const _hoisted_14 = { class: "text-center" };
+const _hoisted_15 = { class: "mt-8" };
+const _hoisted_16 = /* @__PURE__ */ createElementVNode("div", { class: "sub-title" }, [
+  /* @__PURE__ */ createElementVNode("label", { textContent: "Border Radius" })
+], -1);
+const _hoisted_17 = { class: "flex-grow-1 mt-4" };
+const _hoisted_18 = { class: "bg-gray-100 py-5 rounded-8" };
+const _hoisted_19 = { class: "" };
+const _hoisted_20 = { class: "mt-2" };
 const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorBorder",
   props: {
@@ -11252,85 +11415,106 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$f, [
         createElementVNode("div", _hoisted_2$8, [
-          _hoisted_3$4,
-          createElementVNode("div", _hoisted_4$3, [
-            createVNode(PbColorPicker, {
-              value: color.value,
-              "hide-delete": "",
-              onEmpty: _cache[0] || (_cache[0] = ($event) => emptyColor()),
-              onHide: _cache[1] || (_cache[1] = ($event) => updateColor($event)),
-              onShow: saveOriginalColor,
-              onChangeColor: _cache[2] || (_cache[2] = ($event) => updateColor($event))
-            }, null, 8, ["value"]),
-            createVNode(unref(BSTextInput), {
-              "model-value": color.value,
-              class: "ml-4",
-              width: "",
-              "onUpdate:modelValue": updateColor
-            }, null, 8, ["model-value"])
-          ]),
-          createElementVNode("div", _hoisted_5$3, [
-            createElementVNode("div", null, [
-              _hoisted_6$3,
-              createVNode(unref(BSTextInput), {
-                "model-value": borderLeftWidth.value,
-                class: "ml-4",
-                width: "3em",
-                "onUpdate:modelValue": updateBorderLeftWidth
-              }, null, 8, ["model-value"]),
-              _hoisted_7$2,
-              createVNode(unref(BSTextInput), {
-                "model-value": borderRightWidth.value,
-                class: "ml-4",
-                width: "3em",
-                "onUpdate:modelValue": updateBorderRightWidth
-              }, null, 8, ["model-value"]),
-              _hoisted_8$2,
-              createVNode(unref(BSTextInput), {
-                "model-value": borderTopWidth.value,
-                class: "ml-4",
-                width: "3em",
-                "onUpdate:modelValue": updateBorderTopWidth
-              }, null, 8, ["model-value"]),
-              _hoisted_9,
+          _hoisted_3$5,
+          createElementVNode("div", _hoisted_4$4, [
+            _hoisted_5$3,
+            createElementVNode("div", _hoisted_6$3, [
+              createVNode(PbColorPicker, {
+                value: color.value,
+                "hide-delete": "",
+                onEmpty: _cache[0] || (_cache[0] = ($event) => emptyColor()),
+                onHide: _cache[1] || (_cache[1] = ($event) => updateColor($event)),
+                onShow: saveOriginalColor,
+                onChangeColor: _cache[2] || (_cache[2] = ($event) => updateColor($event))
+              }, null, 8, ["value"]),
               createVNode(unref(BSTextInput), {
-                "model-value": borderBottomWidth.value,
+                "model-value": color.value,
+                prefix: { type: "font-icon", value: "palette" },
                 class: "ml-4",
-                width: "3em",
-                "onUpdate:modelValue": updateBorderBottomWidth
+                width: "",
+                "onUpdate:modelValue": updateColor
               }, null, 8, ["model-value"])
             ])
           ]),
-          createElementVNode("div", _hoisted_10, [
-            createElementVNode("div", null, [
-              _hoisted_11,
-              createVNode(unref(BSTextInput), {
-                "model-value": borderTopLeftRadius.value,
-                class: "ml-4",
-                width: "3em",
-                "onUpdate:modelValue": updateBorderTopLeftRadius
-              }, null, 8, ["model-value"]),
-              _hoisted_12,
-              createVNode(unref(BSTextInput), {
-                "model-value": borderTopRightRadius.value,
-                class: "ml-4",
-                width: "3em",
-                "onUpdate:modelValue": updateBorderTopRightRadius
-              }, null, 8, ["model-value"]),
-              _hoisted_13,
-              createVNode(unref(BSTextInput), {
-                "model-value": borderBottomLeftRadius.value,
-                class: "ml-4",
-                width: "3em",
-                "onUpdate:modelValue": updateBorderBottomLeftRadius
-              }, null, 8, ["model-value"]),
-              _hoisted_14,
-              createVNode(unref(BSTextInput), {
-                "model-value": borderBottomRightRadius.value,
-                class: "ml-4",
-                width: "3em",
-                "onUpdate:modelValue": updateBorderBottomRightRadius
-              }, null, 8, ["model-value"])
+          createElementVNode("div", _hoisted_7$2, [
+            _hoisted_8$2,
+            createElementVNode("div", _hoisted_9$2, [
+              createElementVNode("div", _hoisted_10, [
+                createElementVNode("div", _hoisted_11, [
+                  createVNode(unref(BSTextInput), {
+                    "model-value": borderTopWidth.value,
+                    class: "ml-4",
+                    prefix: "T",
+                    width: "30%",
+                    "onUpdate:modelValue": updateBorderTopWidth
+                  }, null, 8, ["model-value"])
+                ]),
+                createElementVNode("div", _hoisted_12, [
+                  createVNode(unref(BSTextInput), {
+                    "model-value": borderLeftWidth.value,
+                    class: "ml-4",
+                    prefix: "L",
+                    width: "30%",
+                    "onUpdate:modelValue": updateBorderLeftWidth
+                  }, null, 8, ["model-value"]),
+                  _hoisted_13,
+                  createVNode(unref(BSTextInput), {
+                    "model-value": borderRightWidth.value,
+                    class: "ml-4",
+                    prefix: "R",
+                    width: "30%",
+                    "onUpdate:modelValue": updateBorderRightWidth
+                  }, null, 8, ["model-value"])
+                ]),
+                createElementVNode("div", _hoisted_14, [
+                  createVNode(unref(BSTextInput), {
+                    "model-value": borderBottomWidth.value,
+                    class: "ml-4",
+                    prefix: "B",
+                    width: "30%",
+                    "onUpdate:modelValue": updateBorderBottomWidth
+                  }, null, 8, ["model-value"])
+                ])
+              ])
+            ])
+          ]),
+          createElementVNode("div", _hoisted_15, [
+            _hoisted_16,
+            createElementVNode("div", _hoisted_17, [
+              createElementVNode("div", _hoisted_18, [
+                createElementVNode("div", _hoisted_19, [
+                  createVNode(unref(BSTextInput), {
+                    "model-value": borderTopLeftRadius.value,
+                    prefix: { type: "image-url", value: unref(TopLeftCornerIcon) },
+                    class: "ml-4",
+                    width: "48%",
+                    "onUpdate:modelValue": updateBorderTopLeftRadius
+                  }, null, 8, ["model-value", "prefix"]),
+                  createVNode(unref(BSTextInput), {
+                    "model-value": borderTopRightRadius.value,
+                    prefix: { type: "image-url", value: unref(TopRightCornerIcon) },
+                    class: "ml-4",
+                    width: "48%",
+                    "onUpdate:modelValue": updateBorderTopRightRadius
+                  }, null, 8, ["model-value", "prefix"])
+                ]),
+                createElementVNode("div", _hoisted_20, [
+                  createVNode(unref(BSTextInput), {
+                    "model-value": borderBottomLeftRadius.value,
+                    prefix: { type: "image-url", value: unref(BottomLeftCornerIcon) },
+                    class: "ml-4",
+                    width: "48%",
+                    "onUpdate:modelValue": updateBorderBottomLeftRadius
+                  }, null, 8, ["model-value", "prefix"]),
+                  createVNode(unref(BSTextInput), {
+                    "model-value": borderBottomRightRadius.value,
+                    prefix: { type: "image-url", value: unref(BottomRightCornerIcon) },
+                    class: "ml-4",
+                    width: "48%",
+                    "onUpdate:modelValue": updateBorderBottomRightRadius
+                  }, null, 8, ["model-value", "prefix"])
+                ])
+              ])
             ])
           ])
         ])
@@ -11340,14 +11524,20 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$e = { class: "group-editor group-editor-margin" };
 const _hoisted_2$7 = { class: "flex-align-center" };
-const _hoisted_3$3 = /* @__PURE__ */ createElementVNode("div", { class: "label" }, [
-  /* @__PURE__ */ createElementVNode("label", null, "Margin")
+const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
+  /* @__PURE__ */ createElementVNode("label", { textContent: "Margin" })
 ], -1);
-const _hoisted_4$2 = { class: "flex-grow-1" };
-const _hoisted_5$2 = /* @__PURE__ */ createElementVNode("span", null, "L", -1);
-const _hoisted_6$2 = /* @__PURE__ */ createElementVNode("span", { class: "ml-8" }, "R", -1);
-const _hoisted_7$1 = /* @__PURE__ */ createElementVNode("span", { class: "ml-8" }, "T", -1);
-const _hoisted_8$1 = /* @__PURE__ */ createElementVNode("span", { class: "ml-8" }, "B", -1);
+const _hoisted_4$3 = { class: "flex-grow-1" };
+const _hoisted_5$2 = { class: "bg-gray-100 py-5 rounded-8" };
+const _hoisted_6$2 = { class: "text-center" };
+const _hoisted_7$1 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
+const _hoisted_8$1 = /* @__PURE__ */ createElementVNode("div", {
+  class: "d-inline-block text-center text-gray-300",
+  style: { "width": "30%", "font-size": "12px" }
+}, [
+  /* @__PURE__ */ createElementVNode("span", { class: "font-icon" }, "add")
+], -1);
+const _hoisted_9$1 = { class: "text-center" };
 const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorMargin",
   props: {
@@ -11374,37 +11564,44 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$e, [
         createElementVNode("div", _hoisted_2$7, [
-          _hoisted_3$3,
-          createElementVNode("div", _hoisted_4$2, [
-            createElementVNode("div", null, [
-              _hoisted_5$2,
-              createVNode(unref(BSTextInput), {
-                "model-value": left.value,
-                class: "ml-4",
-                width: "4em",
-                "onUpdate:modelValue": updateLeft
-              }, null, 8, ["model-value"]),
-              _hoisted_6$2,
-              createVNode(unref(BSTextInput), {
-                "model-value": right.value,
-                class: "ml-4",
-                width: "4em",
-                "onUpdate:modelValue": updateRight
-              }, null, 8, ["model-value"]),
-              _hoisted_7$1,
-              createVNode(unref(BSTextInput), {
-                "model-value": top.value,
-                class: "ml-4",
-                width: "4em",
-                "onUpdate:modelValue": updateTop
-              }, null, 8, ["model-value"]),
-              _hoisted_8$1,
-              createVNode(unref(BSTextInput), {
-                "model-value": bottom.value,
-                class: "ml-4",
-                width: "4em",
-                "onUpdate:modelValue": updateBottom
-              }, null, 8, ["model-value"])
+          _hoisted_3$4,
+          createElementVNode("div", _hoisted_4$3, [
+            createElementVNode("div", _hoisted_5$2, [
+              createElementVNode("div", _hoisted_6$2, [
+                createVNode(unref(BSTextInput), {
+                  "model-value": top.value,
+                  class: "ml-4",
+                  prefix: "T",
+                  width: "30%",
+                  "onUpdate:modelValue": updateTop
+                }, null, 8, ["model-value"])
+              ]),
+              createElementVNode("div", _hoisted_7$1, [
+                createVNode(unref(BSTextInput), {
+                  "model-value": left.value,
+                  class: "ml-4",
+                  prefix: "L",
+                  width: "30%",
+                  "onUpdate:modelValue": updateLeft
+                }, null, 8, ["model-value"]),
+                _hoisted_8$1,
+                createVNode(unref(BSTextInput), {
+                  "model-value": right.value,
+                  class: "ml-4",
+                  prefix: "R",
+                  width: "30%",
+                  "onUpdate:modelValue": updateRight
+                }, null, 8, ["model-value"])
+              ]),
+              createElementVNode("div", _hoisted_9$1, [
+                createVNode(unref(BSTextInput), {
+                  "model-value": bottom.value,
+                  class: "ml-4",
+                  prefix: "B",
+                  width: "30%",
+                  "onUpdate:modelValue": updateBottom
+                }, null, 8, ["model-value"])
+              ])
             ])
           ])
         ])
@@ -11412,16 +11609,22 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$d = { class: "group-editor group-editor-margin" };
+const _hoisted_1$d = { class: "group-editor group-editor-padding" };
 const _hoisted_2$6 = { class: "flex-align-center" };
-const _hoisted_3$2 = /* @__PURE__ */ createElementVNode("div", { class: "label" }, [
-  /* @__PURE__ */ createElementVNode("label", null, "Padding")
+const _hoisted_3$3 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
+  /* @__PURE__ */ createElementVNode("label", { textContent: "Padding" })
 ], -1);
-const _hoisted_4$1 = { class: "flex-grow-1" };
-const _hoisted_5$1 = /* @__PURE__ */ createElementVNode("span", null, "L", -1);
-const _hoisted_6$1 = /* @__PURE__ */ createElementVNode("span", { class: "ml-8" }, "R", -1);
-const _hoisted_7 = /* @__PURE__ */ createElementVNode("span", { class: "ml-8" }, "T", -1);
-const _hoisted_8 = /* @__PURE__ */ createElementVNode("span", { class: "ml-8" }, "B", -1);
+const _hoisted_4$2 = { class: "flex-grow-1" };
+const _hoisted_5$1 = { class: "bg-gray-100 py-5 rounded-8" };
+const _hoisted_6$1 = { class: "text-center" };
+const _hoisted_7 = { class: "bs-layout-horizontal justify-content-center align-items-center" };
+const _hoisted_8 = /* @__PURE__ */ createElementVNode("div", {
+  class: "d-inline-block text-center text-gray-300",
+  style: { "width": "30%", "font-size": "12px" }
+}, [
+  /* @__PURE__ */ createElementVNode("span", { class: "font-icon" }, "add")
+], -1);
+const _hoisted_9 = { class: "text-center" };
 const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "PbPropertyGroupEditorPadding",
   props: {
@@ -11448,37 +11651,44 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$d, [
         createElementVNode("div", _hoisted_2$6, [
-          _hoisted_3$2,
-          createElementVNode("div", _hoisted_4$1, [
-            createElementVNode("div", null, [
-              _hoisted_5$1,
-              createVNode(unref(BSTextInput), {
-                "model-value": left.value,
-                class: "ml-4",
-                width: "4em",
-                "onUpdate:modelValue": updateLeft
-              }, null, 8, ["model-value"]),
-              _hoisted_6$1,
-              createVNode(unref(BSTextInput), {
-                "model-value": right.value,
-                class: "ml-4",
-                width: "4em",
-                "onUpdate:modelValue": updateRight
-              }, null, 8, ["model-value"]),
-              _hoisted_7,
-              createVNode(unref(BSTextInput), {
-                "model-value": top.value,
-                class: "ml-4",
-                width: "4em",
-                "onUpdate:modelValue": updateTop
-              }, null, 8, ["model-value"]),
-              _hoisted_8,
-              createVNode(unref(BSTextInput), {
-                "model-value": bottom.value,
-                class: "ml-4",
-                width: "4em",
-                "onUpdate:modelValue": updateBottom
-              }, null, 8, ["model-value"])
+          _hoisted_3$3,
+          createElementVNode("div", _hoisted_4$2, [
+            createElementVNode("div", _hoisted_5$1, [
+              createElementVNode("div", _hoisted_6$1, [
+                createVNode(unref(BSTextInput), {
+                  "model-value": top.value,
+                  class: "ml-4",
+                  prefix: "T",
+                  width: "30%",
+                  "onUpdate:modelValue": updateTop
+                }, null, 8, ["model-value"])
+              ]),
+              createElementVNode("div", _hoisted_7, [
+                createVNode(unref(BSTextInput), {
+                  "model-value": left.value,
+                  class: "ml-4",
+                  prefix: "L",
+                  width: "30%",
+                  "onUpdate:modelValue": updateLeft
+                }, null, 8, ["model-value"]),
+                _hoisted_8,
+                createVNode(unref(BSTextInput), {
+                  "model-value": right.value,
+                  class: "ml-4",
+                  prefix: "R",
+                  width: "30%",
+                  "onUpdate:modelValue": updateRight
+                }, null, 8, ["model-value"])
+              ]),
+              createElementVNode("div", _hoisted_9, [
+                createVNode(unref(BSTextInput), {
+                  "model-value": bottom.value,
+                  class: "ml-4",
+                  prefix: "B",
+                  width: "30%",
+                  "onUpdate:modelValue": updateBottom
+                }, null, 8, ["model-value"])
+              ])
             ])
           ])
         ])
@@ -11744,6 +11954,7 @@ const designParts = [
     partType: "Section",
     partName: "GlobalDesignPart",
     caption: "Global Design Part",
+    icon: "rectangle",
     propertyGroups: [
       ...defaultPropertyGroups()
     ],
@@ -11759,6 +11970,7 @@ const designParts = [
     partType: "Section",
     partName: "LocalDesignPart",
     caption: "Local Design Part",
+    icon: "rectangle",
     propertyGroups: [
       ...defaultPropertyGroups()
     ],
@@ -11774,6 +11986,7 @@ const designParts = [
     partType: "Section",
     partName: "LocalMarketingPart",
     caption: "Local Marketing Part",
+    icon: "rectangle",
     propertyGroups: [
       ...defaultPropertyGroups()
     ],
@@ -11791,6 +12004,7 @@ const sectionParts = [
     partType: "Section",
     partName: "Section",
     caption: "Section",
+    icon: "rectangle",
     propertyGroups: [
       ...defaultPropertyGroups()
     ],
@@ -11807,6 +12021,7 @@ const blockParts = [
     partType: "Block",
     partName: "Block",
     caption: "Block",
+    icon: "space_dashboard",
     propertyGroups: [
       ...defaultPropertyGroups()
     ],
@@ -11821,6 +12036,7 @@ const widgets = [
     partType: "Widget",
     partName: "TextWidget",
     caption: "Text Widget",
+    icon: "insert_text",
     propertyGroups: [
       {
         groupName: "text",
@@ -11838,6 +12054,12 @@ const widgets = [
             caption: "Font Size",
             propertyType: "text",
             params: ""
+          },
+          {
+            propertyName: "color",
+            caption: "Font Color",
+            propertyType: "color",
+            params: ""
           }
         ]
       },
@@ -11850,12 +12072,13 @@ const widgets = [
     },
     localized: true,
     allowsChild: () => false,
-    creator: () => _sfc_main$3$1
+    creator: () => _sfc_main$4$1
   },
   {
     partType: "Widget",
     partName: "ImageWidget",
     caption: "Image Widget",
+    icon: "imagesmode",
     propertyGroups: [
       {
         groupName: "image",
@@ -11875,12 +12098,39 @@ const widgets = [
     initialProperties: {},
     localized: true,
     allowsChild: () => false,
-    creator: () => _sfc_main$4$1
+    creator: () => _sfc_main$5$1
+  },
+  {
+    partType: "Widget",
+    partName: "HtmlWidget",
+    caption: "HTML Widget",
+    icon: "code",
+    propertyGroups: [
+      {
+        groupName: "html",
+        caption: "HTML",
+        properties: [
+          {
+            propertyName: "html",
+            caption: "HTML",
+            propertyType: "html",
+            params: "",
+            localized: true
+          }
+        ]
+      },
+      ...defaultWidgetPropertyGroups()
+    ],
+    initialProperties: {},
+    localized: true,
+    allowsChild: () => false,
+    creator: () => _sfc_main$3$1
   },
   {
     partType: "Widget",
     partName: "ProductListWidget",
     caption: "Product List Widget",
+    icon: "lists",
     propertyGroups: [
       {
         groupName: "productList",
@@ -12862,16 +13112,6 @@ const createDefaultKeyHandlers = () => {
 };
 const createDefaultToolButtonGroups = () => {
   const groups = [
-    {
-      groupId: "file",
-      buttons: [
-        {
-          buttonId: "core:template",
-          caption: "Load Template",
-          icon: "account_balance"
-        }
-      ]
-    },
     {
       groupId: "edit",
       buttons: [
@@ -12919,13 +13159,13 @@ const createDefaultToolButtonGroups = () => {
         {
           buttonId: "core:openAddPartLayer",
           caption: "Add Design Part...",
-          icon: "box_add",
+          icon: "add_row_below",
           handler: (modeler) => modeler.commandRegistry.executeCommand(OpenAddPartModalCommand.COMMAND_ID)
         },
         {
           buttonId: "core:openAddWidgetLayer",
           caption: "Add Widget...",
-          icon: "add_box",
+          icon: "desktop_landscape_add",
           handler: (modeler) => modeler.commandRegistry.executeCommand(OpenAddWidgetModalCommand.COMMAND_ID)
         }
       ]
@@ -13128,7 +13368,6 @@ class PageBuilderEditorImpl {
     __publicField(this, "title");
     __publicField(this, "editMode");
     __publicField(this, "scale", ref(1));
-    __publicField(this, "locales", ref(["en"]));
     __publicField(this, "language", ref("en"));
     this.model = new Model2();
     this.context = new PageBuilderContextImpl(this);
@@ -13136,6 +13375,12 @@ class PageBuilderEditorImpl {
     this.scale.value = 1;
     this.initPlugins();
   }
+  getLanguage() {
+    return this.language.value;
+  }
+  setLanguage(language) {
+    this.language.value = language || "en";
+  }
   registerPlugin(plugin) {
     if (plugin.partDefinitions)
       this.partManager.registerPartDefinitions(plugin.partDefinitions);
@@ -13189,15 +13434,6 @@ class PageBuilderEditorImpl {
   zoom(scale) {
     this.scale.value = scale;
   }
-  setLocales(locales) {
-    this.locales.value = locales;
-    if (!locales.includes(this.language.value)) {
-      this.language.value = locales[0];
-    }
-  }
-  setLanguage(language) {
-    this.language.value = language;
-  }
   getEmptyPageContent() {
     const block = new Block();
     const section = new Section();
@@ -13336,7 +13572,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const canvasStyle = '.pb-page {\n  margin: 0 auto;\n  margin-top: 20px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-page-content.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 5px;\n}\n.pb-page * {\n  box-sizing: border-box;\n}\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\n.pb-add-widget-button button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  padding: 8px;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n.pb-section {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n  background-color: #fff;\n}\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-section.selected {\n  outline: 1px solid #e67e22;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-section.pb-section-static {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n}\n.pb-section.pb-section-static:after {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n}\n.pb-section-static .pb-widget {\n  outline: none;\n}\n.pb-block {\n  display: flex;\n  min-width: 1px;\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n  outline: 1px dashed #ccc;\n}\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-block.selected {\n  outline: 1px solid #8e44ad;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget {\n  position: relative;\n  outline: 1px dashed #ccc;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-widget.selected {\n  outline: 2px solid #27ae60;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-widget .pan-handle {\n  position: absolute;\n  left: -6px;\n  top: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: move;\n}\n.pb-widget .resize-handle {\n  position: absolute;\n  right: -6px;\n  bottom: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: nwse-resize;\n}\n.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-text-widget .text {\n  color: #333;\n}\n.pb-text-widget.empty .text {\n  color: #999;\n}\n.pb-image-widget {\n  width: 100%;\n}\n.pb-image-widget .image {\n  width: 100%;\n}\n.pb-image-widget .empty {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-image-widget .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-product-list-widget {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n.pb-product-list-widget .product-wrapper .product {\n  width: 95%;\n  margin: 0 auto;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-product-list-widget .product-wrapper .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 200px;\n  vertical-align: middle;\n}\n@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n.pb-login-widget h3 {\n  font-size: 32px;\n  font-weight: bold;\n  color: #ccc;\n  line-height: 200px;\n  vertical-align: middle;\n}\n.font-icon {\n  font-family: Material Symbols Outlined, monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\nhtml, body {\n  font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n  font-size: 12px;\n}\nbody {\n  background-color: white;\n  height: 100%;\n  margin: 0;\n}\n.pb-canvas-wrapper {\n  padding: 32px 40px 56px 40px;\n  height: 100%;\n  background-color: #aaa;\n  overflow: auto;\n}\n.pb-canvas-wrapper .pb-canvas {\n  display: flex;\n  flex-direction: row;\n  transform-origin: top left;\n  width: fit-content;\n  min-width: 40px;\n  min-height: 40px;\n  margin: 0 auto;\n}\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\n}\n.pb-add-section-handle {\n  position: relative;\n  text-align: center;\n  cursor: pointer;\n  z-index: 5;\n  height: 0;\n}\n.pb-add-section-handle.top::before, .pb-add-section-handle.bottom::before, .pb-add-section-handle.middle::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n.pb-add-section-handle.bottom {\n  left: 50%;\n  bottom: -32px;\n}\n.pb-add-section-handle:hover.top::before, .pb-add-section-handle:hover.bottom::before, .pb-add-section-handle:hover.middle::before,\n.pb-add-section-handle:hover > i {\n  opacity: 1;\n}\n.pb-add-section-handle > i {\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: -20px;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}\n.pb-button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  vertical-align: middle;\n}\n.pb-guideline {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.pb-guideline.selected {\n  z-index: 3;\n}\n.pb-guideline.preselect {\n  z-index: 4;\n}';
+const canvasStyle = '.pb-page {\n  margin: 0 auto;\n  margin-top: 20px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-page-content.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 5px;\n}\n.pb-page * {\n  box-sizing: border-box;\n}\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\n.pb-add-widget-button button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  padding: 8px;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n.pb-section {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n  background-color: #fff;\n}\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-section.selected {\n  outline: 1px solid #e67e22;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-section.pb-section-static {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n}\n.pb-section.pb-section-static:after {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n}\n.pb-section-static .pb-widget {\n  outline: none;\n}\n.pb-block {\n  display: flex;\n  min-width: 1px;\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n  outline: 1px dashed #ccc;\n}\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-block.selected {\n  outline: 1px solid #8e44ad;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget {\n  position: relative;\n  outline: 1px dashed #ccc;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-widget.selected {\n  outline: 2px solid #27ae60;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-widget .pan-handle {\n  position: absolute;\n  left: -6px;\n  top: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: move;\n}\n.pb-widget .resize-handle {\n  position: absolute;\n  right: -6px;\n  bottom: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: nwse-resize;\n}\n.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-text-widget .text {\n  color: #333;\n}\n.pb-text-widget.empty .text {\n  color: #999;\n}\n.pb-image-widget {\n  width: 100%;\n}\n.pb-image-widget .image {\n  width: 100%;\n}\n.pb-image-widget .empty {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-image-widget .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-html-widget.empty {\n  padding: 4px 0;\n  font-size: 18px;\n  color: #999;\n}\n.pb-product-list-widget {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n.pb-product-list-widget .product-wrapper .product {\n  width: 95%;\n  margin: 0 auto;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-product-list-widget .product-wrapper .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 200px;\n  vertical-align: middle;\n}\n@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n.pb-login-widget h3 {\n  font-size: 32px;\n  font-weight: bold;\n  color: #ccc;\n  line-height: 200px;\n  vertical-align: middle;\n}\n.font-icon {\n  font-family: Material Symbols Outlined, monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\nhtml, body {\n  font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n  font-size: 12px;\n}\nbody {\n  background-color: white;\n  height: 100%;\n  margin: 0;\n}\n.pb-canvas-wrapper {\n  padding: 32px 40px 56px 40px;\n  height: 100%;\n  background-color: #aaa;\n  overflow: auto;\n}\n.pb-canvas-wrapper .pb-canvas {\n  display: flex;\n  flex-direction: row;\n  transform-origin: top left;\n  width: fit-content;\n  min-width: 40px;\n  min-height: 40px;\n  margin: 0 auto;\n}\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\n}\n.pb-add-section-handle {\n  position: relative;\n  text-align: center;\n  cursor: pointer;\n  z-index: 5;\n  height: 0;\n}\n.pb-add-section-handle.top::before, .pb-add-section-handle.bottom::before, .pb-add-section-handle.middle::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n.pb-add-section-handle.bottom {\n  left: 50%;\n  bottom: -32px;\n}\n.pb-add-section-handle:hover.top::before, .pb-add-section-handle:hover.bottom::before, .pb-add-section-handle:hover.middle::before,\n.pb-add-section-handle:hover > i {\n  opacity: 1;\n}\n.pb-add-section-handle > i {\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: -20px;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}\n.pb-button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  vertical-align: middle;\n}\n.pb-guideline {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.pb-guideline.selected {\n  z-index: 3;\n}\n.pb-guideline.preselect {\n  z-index: 4;\n}';
 const _hoisted_1$a = { class: "pb-canvas-frame" };
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "PbCanvasFrame",
@@ -13417,7 +13653,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         }, [
           _ctx.button.icon ? (openBlock(), createElementBlock("span", {
             key: 0,
-            style: normalizeStyle({ fontSize: _ctx.button.iconFontSize || "16px" }),
+            style: normalizeStyle({ fontSize: _ctx.button.iconFontSize || "20px" }),
             class: "font-icon"
           }, toDisplayString(_ctx.button.icon), 5)) : createCommentVNode("", true)
         ])
@@ -13445,16 +13681,14 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$7 = { class: "pb-toolbar bs-layout-horizontal align-items-center" };
-const _hoisted_2$4 = { class: "ml-8 w-64" };
-const _hoisted_3$1 = { class: "ml-8 w-80" };
+const _hoisted_2$4 = { class: "bs-layout-horizontal" };
+const _hoisted_3$2 = /* @__PURE__ */ createElementVNode("div", { class: "flex-grow-1" }, null, -1);
+const _hoisted_4$1 = { class: "ml-8 w-64" };
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "PbToolbar",
   setup(__props) {
     const pageBuilder = usePageBuilderEditor();
     const buttonGroups = pageBuilder.toolButtonRegistry.getToolButtonGroups();
-    const locales = computed(() => {
-      return pageBuilder.locales.value;
-    });
     const scale = computed(() => `${Math.round(100 * pageBuilder.scale.value)}%`);
     const zoom = async (scaleString) => {
       if (!scaleString)
@@ -13462,18 +13696,18 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       const scale2 = parseInt(scaleString.replaceAll(/[^0-9]+/g, "")) / 100;
       pageBuilder.zoom(scale2);
     };
-    const changeLocale = (locale) => {
-      pageBuilder.setLanguage(locale);
-    };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$7, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(buttonGroups), (group) => {
-          return openBlock(), createBlock$1(_sfc_main$9, {
-            key: group.groupId,
-            group
-          }, null, 8, ["group"]);
-        }), 128)),
         createElementVNode("div", _hoisted_2$4, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(buttonGroups), (group) => {
+            return openBlock(), createBlock$1(_sfc_main$9, {
+              key: group.groupId,
+              group
+            }, null, 8, ["group"]);
+          }), 128))
+        ]),
+        _hoisted_3$2,
+        createElementVNode("div", _hoisted_4$1, [
           createVNode(unref(BSSelect), {
             modelValue: scale.value,
             "onUpdate:modelValue": [
@@ -13484,12 +13718,6 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             "view-mode": false,
             placeholder: "Scale"
           }, null, 8, ["modelValue"])
-        ]),
-        createElementVNode("div", _hoisted_3$1, [
-          createVNode(unref(BSLocaleSelect), {
-            locales: locales.value,
-            onChangeLocale: changeLocale
-          }, null, 8, ["locales"])
         ])
       ]);
     };
@@ -13513,8 +13741,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const pageBuilder = usePageBuilderEditor();
     const tabs = [
-      { tabId: "pageS", caption: "Mobile" },
-      { tabId: "pageL", caption: "PC" }
+      { tabId: "pageS", caption: "Mobile", icon: "phone_iphone" },
+      { tabId: "pageL", caption: "PC", icon: "desktop_windows" }
     ];
     const pageS = computed(() => (pageBuilder.model.rootPart.children || [])[0].children || []);
     const pageL = computed(() => (pageBuilder.model.rootPart.children || [])[1].children || []);
@@ -13527,6 +13755,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       set(value) {
       }
     });
+    let savedPartSelection = null;
     const treeDragAndDropPolicy = {
       dropStep: () => 3,
       isDroppable(_srcRow, _srcParentRow, _destRow, _destParentRow) {
@@ -13579,7 +13808,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         }
       }
       if (ok) {
-        pageBuilder.model.moveElements(event.row.partId, parentPartId, event.destIndex);
+        backupPartSelection();
+        pageBuilder.model.moveElements(event.row.partId, parentPartId, event.destIndex, void 0, true);
       }
     };
     const selectedRows = computed({
@@ -13595,6 +13825,10 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     const selectedRowsChanged = (rows) => {
       pageBuilder.context.setSelection([...rows]);
     };
+    const iconProvider = (part) => {
+      const def = pageBuilder.partManager.getPartDefinition(part.partName);
+      return (def == null ? void 0 : def.icon) || "";
+    };
     const labelProvider = (part) => {
       var _a;
       return part.getName() || ((_a = pageBuilder.partManager.getPartDefinition(part.partName)) == null ? void 0 : _a.caption) || part.partName;
@@ -13615,6 +13849,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     const modelUpdateHandler = (event) => {
       var _a;
       (_a = event.inserted) == null ? void 0 : _a.map((target) => findLeafPart(pageBuilder.model.findPartById(target.partId))).filter(notNull).forEach((part) => expandParent(part));
+      if (savedPartSelection) {
+        restorePartSelection();
+      }
     };
     const expandParent = (part) => {
       if (part.parent && part.parent.partName !== PAGE_TYPE) {
@@ -13622,6 +13859,15 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         expandParent(part.parent);
       }
     };
+    const backupPartSelection = () => {
+      savedPartSelection = [...pageBuilder.context.getSelectedParts()];
+    };
+    const restorePartSelection = () => {
+      if (savedPartSelection) {
+        pageBuilder.context.setSelection(savedPartSelection);
+        savedPartSelection = null;
+      }
+    };
     onMounted(() => {
       PageBuilderEditorEvent.on.modelUpdatedByUI(modelUpdateHandler);
     });
@@ -13649,6 +13895,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
               ],
               data: pageS.value,
               "enable-drag-and-drop": treeDragAndDropPolicy,
+              "icon-provider": iconProvider,
               "key-provider": (part) => part.partId,
               "label-provider": labelProvider,
               class: "max-w-320",
@@ -13673,6 +13920,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
               ],
               data: pageL.value,
               "enable-drag-and-drop": treeDragAndDropPolicy,
+              "icon-provider": iconProvider,
               "key-provider": (part) => part.partId,
               "label-provider": labelProvider,
               class: "max-w-320",
@@ -13743,7 +13991,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$4 = { class: "pb-sidebar-property-group" };
-const _hoisted_2$2 = ["textContent"];
+const _hoisted_2$2 = {
+  key: 0,
+  class: "group-title"
+};
+const _hoisted_3$1 = ["textContent"];
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "PbSidebarPropertyGroupEditor",
   props: {
@@ -13779,11 +14031,11 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$4, [
-        _ctx.group.showGroupName ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          class: "group-title",
-          textContent: toDisplayString(_ctx.group.caption)
-        }, null, 8, _hoisted_2$2)) : createCommentVNode("", true),
+        _ctx.group.showGroupName ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
+          createElementVNode("label", {
+            textContent: toDisplayString(_ctx.group.caption)
+          }, null, 8, _hoisted_3$1)
+        ])) : createCommentVNode("", true),
         _ctx.partsKey ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
           groupEditor.value ? (openBlock(), createBlock$1(resolveDynamicComponent(groupEditor.value), {
             key: 0,
@@ -13802,7 +14054,9 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$3 = { class: "property-editor property-editor-local-part flex-align-center pt-16" };
-const _hoisted_2$1 = /* @__PURE__ */ createElementVNode("div", { class: "label" }, " Display Schedule ", -1);
+const _hoisted_2$1 = /* @__PURE__ */ createElementVNode("div", { class: "title" }, [
+  /* @__PURE__ */ createElementVNode("label", { textContent: "Display Schedule" })
+], -1);
 const _hoisted_3 = { class: "bs-layout-horizontal" };
 const _hoisted_4 = { class: "mr-2" };
 const _hoisted_5 = /* @__PURE__ */ createElementVNode("span", { class: "font-icon" }, "more_horiz", -1);
@@ -13964,7 +14218,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     title: {},
     editMode: {},
     pageContent: {},
-    locales: {},
     language: {}
   },
   setup(__props, { expose: __expose }) {
@@ -13974,8 +14227,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     pageBuilderEditor.instanceId = props.instanceId;
     pageBuilderEditor.title = props.title;
     pageBuilderEditor.editMode = props.editMode || "free";
-    if (props.locales)
-      pageBuilderEditor.setLocales(props.locales);
     if (props.language)
       pageBuilderEditor.setLanguage(props.language);
     pageBuilderEditor.registerPlugin({
@@ -13984,8 +14235,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     pageBuilderEditor.keyHandlers.addDocumentKeyEventListener(window.document);
     providePageBuilderEditor(pageBuilderEditor);
+    providePageBuilder(pageBuilderEditor);
     onMounted(() => pageBuilderEditor.initData(props.pageContent));
     watch(() => props.pageContent, (pageContent) => pageContent && pageBuilderEditor.initData(pageContent));
+    watch(() => props.language, (language) => {
+      pageBuilderEditor.setLanguage(language);
+    });
     const colorHistory = ref([]);
     provide("colorHistory", colorHistory);
     const getLocalDesignPartContent = () => {
@@ -14055,27 +14310,32 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 export {
   BLOCK_TYPE$1 as B,
   Model$1 as M,
-  PageBuilderEditorEvent as P,
+  PbColorPicker as P,
   ROOT_TYPE$1 as R,
   SECTION_TYPE$1 as S,
   WIDGET_TYPE$1 as W,
   _sfc_main as _,
-  Block as a,
-  PAGE_TYPE$1 as b,
-  Page as c,
-  _sfc_main$q as d,
-  PageBuilderViewerEvent as e,
-  Part as f,
-  _sfc_main$4$1 as g,
-  _sfc_main$2$1 as h,
+  PageBuilderEditorEvent as a,
+  Block as b,
+  PAGE_BUILDER_KEY as c,
+  PAGE_TYPE$1 as d,
+  Page as e,
+  _sfc_main$q as f,
+  PageBuilderViewerEvent as g,
+  Part as h,
   _sfc_main$3$1 as i,
-  RootPart as j,
-  Section as k,
-  Widget as l,
-  createPageBuilderViewer as m,
-  createPartComponent as n,
-  createPartComponents as o,
-  providePageBuilderViewer as p,
-  usePageBuilderViewer as q,
-  usePageBuilderEditor as u
+  _sfc_main$5$1 as j,
+  _sfc_main$2$1 as k,
+  _sfc_main$4$1 as l,
+  RootPart as m,
+  Section as n,
+  Widget as o,
+  createPageBuilderViewer as p,
+  createPartComponent as q,
+  createPartComponents as r,
+  providePageBuilder as s,
+  providePageBuilderViewer as t,
+  usePageBuilderEditor as u,
+  usePageBuilder as v,
+  usePageBuilderViewer as w
 };