@g1cloud/page-builder-editor 1.0.0-alpha.70 → 1.0.0-alpha.72

package/css/canvas.scss

@@ -6,6 +6,7 @@
   width: 0;
   height: 100%;
   padding: 20px;
+  outline: none;
   overflow: auto;
 }
 

package/css/page-page.scss

@@ -17,6 +17,7 @@
     display: flex;
     flex-direction: column;
     width: 100%;
+    background-color: #fff;
 
     &.selected::before {
       content: "";

package/css/page-section.scss

@@ -6,18 +6,15 @@
   background-repeat: no-repeat;
   background-size: cover;
   outline: 1px dashed #ccc;
-  background-color: #fff;
+
+  &:empty {
+    background-color: #fff;
+  }
 
   &:hover:not(:has(.pb-block:hover)) {
     background-color: #f0f0f0;
   }
 
-  //&.selected {
-  //  outline: 2px solid #4998f8;
-  //  outline-offset: -2px;
-  //  z-index: 999;
-  //}
-
   &.selected::before {
     content: "";
     position: absolute;

package/dist/{PbPropertyEditorColor-BNKJfa-T.js → PbPropertyEditorColor-KzGXbFkR.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createVNode } from "vue";
 import { vT, BSTextInput } from "@g1cloud/bluesea";
-import { P as PbColorPicker } from "./index-BPFPSrrb.js";
+import { P as PbColorPicker } from "./index-DzZG-nX6.js";
 const _hoisted_1 = { class: "property-editor property-editor-color" };
 const _hoisted_2 = { class: "title" };
 const _hoisted_3 = { class: "bs-layout-horizontal flex-align-center color" };

package/dist/{PbPropertyEditorHtml-CQaImN-U.js → PbPropertyEditorHtml-BBQDmW24.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createTextVNode, defineAsyncComponent } from "vue";
 import { useModal, vT } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-BPFPSrrb.js";
+import { u as usePageBuilderEditor } from "./index-DzZG-nX6.js";
 const _hoisted_1 = { class: "property-editor property-editor-html flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{PbPropertyEditorImage-3icZAidw.js → PbPropertyEditorImage-DFz4UHO9.js}

@@ -1,5 +1,5 @@
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createTextVNode, toDisplayString, createVNode, createCommentVNode, Fragment } from "vue";
-import { u as usePageBuilderEditor, C as ChangePropertyCommand } from "./index-BPFPSrrb.js";
+import { u as usePageBuilderEditor, C as ChangePropertyCommand } from "./index-DzZG-nX6.js";
 import { useModal, vT, BSButton, BSMultiLangTextInput, showNotification } from "@g1cloud/bluesea";
 const _hoisted_1 = { class: "property-editor property-editor-image" };
 const _hoisted_2 = { class: "title" };

package/dist/{PbPropertyEditorMultilineText-B9-aaBcF.js → PbPropertyEditorMultilineText-Cmn1qGxH.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createBlock } from "vue";
 import { vT, BSMultiLangTextArea, BSTextArea } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-BPFPSrrb.js";
+import { u as usePageBuilderEditor } from "./index-DzZG-nX6.js";
 const _hoisted_1 = { class: "property-editor property-editor-multiline-text" };
 const _hoisted_2 = { class: "title" };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{PbPropertyEditorText-BgQ4kpmo.js → PbPropertyEditorText-16gz06lQ.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createBlock } from "vue";
 import { vT, BSMultiLangTextInput, BSTextInput } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor } from "./index-BPFPSrrb.js";
+import { u as usePageBuilderEditor } from "./index-DzZG-nX6.js";
 const _hoisted_1 = { class: "property-editor property-editor-text flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{PbPropertyEditorYoutube-DoRAsJTL.js → PbPropertyEditorYoutube-BdQ3Y7P6.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, unref } from "vue";
 import { useModal, vT } from "@g1cloud/bluesea";
-import { s as selectYoutubeVideo } from "./index-BPFPSrrb.js";
+import { s as selectYoutubeVideo } from "./index-DzZG-nX6.js";
 const _hoisted_1 = { class: "property-editor property-editor-image flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{PbWidgetAddModal-ChIMw44P.js → PbWidgetAddModal-Cqlbs46k.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createBlock, unref, withCtx, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString } from "vue";
 import { useModalHandle, BSModalFrame } from "@g1cloud/bluesea";
-import { w as widgetPartDefinitions } from "./index-BPFPSrrb.js";
+import { w as widgetPartDefinitions } from "./index-DzZG-nX6.js";
 const _hoisted_1 = { class: "bs-layout-vertical pb-part-add-modal" };
 const _hoisted_2 = { class: "bs-layout-horizontal-wrap ml-16 mb-8 gap-8" };
 const _hoisted_3 = ["onClick", "textContent"];

package/dist/{index-BPFPSrrb.js → index-DzZG-nX6.js}

@@ -6957,7 +6957,7 @@ const _sfc_main$a$1 = /* @__PURE__ */ defineComponent({
           innerHTML: styleTag.value
         }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
         withDirectives(createElementVNode("div", {
-          class: normalizeClass([classNames.value, "pb-block"]),
+          class: normalizeClass(classNames.value),
           "data-part-id": _ctx.part.partId,
           style: normalizeStyle(style.value)
         }, [
@@ -7003,7 +7003,7 @@ const _sfc_main$9$1 = /* @__PURE__ */ defineComponent({
           innerHTML: styleTag.value
         }, null, 8, ["innerHTML"])) : createCommentVNode("", true),
         withDirectives(createElementVNode("div", {
-          class: normalizeClass([classNames.value, "pb-section"]),
+          class: normalizeClass(classNames.value),
           "data-part-id": _ctx.part.partId,
           style: normalizeStyle(style.value)
         }, [
@@ -7533,7 +7533,7 @@ const _sfc_main$3$1 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$1$1 = ["innerHTML"];
-const _hoisted_2$i = { class: "pb-viewer" };
+const _hoisted_2$h = { class: "pb-viewer" };
 const _sfc_main$2$1 = /* @__PURE__ */ defineComponent({
   __name: "PageBuilderViewer",
   props: {
@@ -7574,7 +7574,7 @@ const _sfc_main$2$1 = /* @__PURE__ */ defineComponent({
           key: 0,
           innerHTML: unref(externalCss)
         }, null, 8, _hoisted_1$1$1)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_2$i, [
+        createElementVNode("div", _hoisted_2$h, [
           part.value ? (openBlock(), createBlock$1(_sfc_main$3$1, {
             key: 0,
             "is-mobile-page": _ctx.isMobilePage,
@@ -8210,15 +8210,15 @@ class PartManager {
 const defaultPartPropertyEditors = () => {
   return {
     "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-BJ5qx69O.js")),
-    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-BgQ4kpmo.js")),
+    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-16gz06lQ.js")),
     "number": () => defineAsyncComponent(() => import("./PbPropertyEditorNumber-B76ArSb5.js")),
     "boolean": () => defineAsyncComponent(() => import("./PbPropertyEditorBoolean-c5CNiTpt.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-B9-aaBcF.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-Cmn1qGxH.js")),
     "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-B5sfulvx.js")),
-    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-BNKJfa-T.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-3icZAidw.js")),
-    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-CQaImN-U.js")),
-    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-DoRAsJTL.js"))
+    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-KzGXbFkR.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-DFz4UHO9.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-BBQDmW24.js")),
+    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-BdQ3Y7P6.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -8508,7 +8508,7 @@ const useMouseTracker = () => {
   return mouseTracker;
 };
 const _hoisted_1$s = ["data-part-id", "draggable"];
-const _hoisted_2$h = {
+const _hoisted_2$g = {
   key: 1,
   class: "invalid-widget",
   textContent: "Invalid Widget"
@@ -8938,7 +8938,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           draggable: draggable.value,
           style: normalizeStyle(style.value)
         }, [
-          component.value ? (openBlock(), createBlock$1(resolveDynamicComponent(component.value), normalizeProps(mergeProps({ key: 0 }, bind.value)), null, 16)) : (openBlock(), createElementBlock("div", _hoisted_2$h)),
+          component.value ? (openBlock(), createBlock$1(resolveDynamicComponent(component.value), normalizeProps(mergeProps({ key: 0 }, bind.value)), null, 16)) : (openBlock(), createElementBlock("div", _hoisted_2$g)),
           selected.value && _ctx.part.isNestedWidget() ? (openBlock(), createElementBlock("div", {
             key: 2,
             class: "pan-handle",
@@ -9317,7 +9317,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$o = { class: "group-editor group-editor-position" };
-const _hoisted_2$g = { class: "flex-align-center" };
+const _hoisted_2$f = { class: "flex-align-center" };
 const _hoisted_3$c = { class: "title" };
 const _hoisted_4$a = { class: "flex-grow-1" };
 const _hoisted_5$7 = { class: "bg-gray-100 py-5 rounded-8" };
@@ -9349,7 +9349,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     const updateBottom = (value) => updatePropertyValue({ bottom: value });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$o, [
-        createElementVNode("div", _hoisted_2$g, [
+        createElementVNode("div", _hoisted_2$f, [
           createElementVNode("div", _hoisted_3$c, [
             withDirectives(createElementVNode("label", null, null, 512), [
               [unref(vT), { key: "pb.prop.position" }]
@@ -9405,7 +9405,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$n = { class: "group-editor group-editor-size" };
-const _hoisted_2$f = { class: "flex-align-center" };
+const _hoisted_2$e = { class: "flex-align-center" };
 const _hoisted_3$b = { class: "title" };
 const _hoisted_4$9 = { class: "flex-grow-1 bs-layout-horizontal" };
 const _hoisted_5$6 = { class: "flex-align-center mt-12" };
@@ -9443,7 +9443,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     const updateMinHeight = (value) => updatePropertyValue({ minHeight: value });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$n, [
-        createElementVNode("div", _hoisted_2$f, [
+        createElementVNode("div", _hoisted_2$e, [
           createElementVNode("div", _hoisted_3$b, [
             withDirectives(createElementVNode("label", null, null, 512), [
               [unref(vT), { key: "pb.prop.size" }]
@@ -9667,7 +9667,7 @@ var script$4 = {
   }
 };
 const _hoisted_1$m = { class: "vc-alpha" };
-const _hoisted_2$e = { class: "vc-alpha-checkboard-wrap" };
+const _hoisted_2$d = { class: "vc-alpha-checkboard-wrap" };
 const _hoisted_3$a = /* @__PURE__ */ createElementVNode(
   "div",
   { class: "vc-alpha-picker" },
@@ -9681,7 +9681,7 @@ const _hoisted_4$8 = [
 function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Checkboard = resolveComponent("Checkboard");
   return openBlock(), createElementBlock("div", _hoisted_1$m, [
-    createElementVNode("div", _hoisted_2$e, [
+    createElementVNode("div", _hoisted_2$d, [
       createVNode(_component_Checkboard)
     ]),
     createElementVNode(
@@ -10785,7 +10785,7 @@ var script$3 = {
   }
 };
 const _hoisted_1$l = { class: "vc-editable-input" };
-const _hoisted_2$d = ["aria-labelledby"];
+const _hoisted_2$c = ["aria-labelledby"];
 const _hoisted_3$9 = ["id", "for"];
 const _hoisted_4$7 = { class: "vc-input__desc" };
 function render$3(_ctx, _cache, $props, $setup, $data, $options) {
@@ -10797,7 +10797,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
       class: "vc-input__input",
       onKeydown: _cache[1] || (_cache[1] = (...args) => $options.handleKeyDown && $options.handleKeyDown(...args)),
       onInput: _cache[2] || (_cache[2] = (...args) => $options.update && $options.update(...args))
-    }, null, 40, _hoisted_2$d), [
+    }, null, 40, _hoisted_2$c), [
       [vModelText, $options.val]
     ]),
     createElementVNode("span", {
@@ -10891,7 +10891,7 @@ const _hoisted_1$k = /* @__PURE__ */ createElementVNode(
   -1
   /* HOISTED */
 );
-const _hoisted_2$c = /* @__PURE__ */ createElementVNode(
+const _hoisted_2$b = /* @__PURE__ */ createElementVNode(
   "div",
   { class: "vc-saturation--black" },
   null,
@@ -10921,7 +10921,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     },
     [
       _hoisted_1$k,
-      _hoisted_2$c,
+      _hoisted_2$b,
       createElementVNode(
         "div",
         {
@@ -11070,7 +11070,7 @@ var script$1 = {
   }
 };
 const _hoisted_1$j = ["aria-valuenow"];
-const _hoisted_2$b = /* @__PURE__ */ createElementVNode(
+const _hoisted_2$a = /* @__PURE__ */ createElementVNode(
   "div",
   { class: "vc-hue-picker" },
   null,
@@ -11078,7 +11078,7 @@ const _hoisted_2$b = /* @__PURE__ */ createElementVNode(
   /* HOISTED */
 );
 const _hoisted_3$7 = [
-  _hoisted_2$b
+  _hoisted_2$a
 ];
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock(
@@ -11206,7 +11206,7 @@ var script = {
   }
 };
 const _hoisted_1$i = { class: "vc-sketch-saturation-wrap" };
-const _hoisted_2$a = { class: "vc-sketch-controls" };
+const _hoisted_2$9 = { class: "vc-sketch-controls" };
 const _hoisted_3$6 = { class: "vc-sketch-sliders" };
 const _hoisted_4$5 = { class: "vc-sketch-hue-wrap" };
 const _hoisted_5$5 = {
@@ -11254,7 +11254,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           onChange: $options.childChange
         }, null, 8, ["value", "onChange"])
       ]),
-      createElementVNode("div", _hoisted_2$a, [
+      createElementVNode("div", _hoisted_2$9, [
         createElementVNode("div", _hoisted_3$6, [
           createElementVNode("div", _hoisted_4$5, [
             createVNode(_component_Hue, {
@@ -11421,7 +11421,7 @@ const _sfc_main$i = defineComponent({
   }
 });
 const _hoisted_1$h = { class: "buttons" };
-const _hoisted_2$9 = { class: "sketch-wrap" };
+const _hoisted_2$8 = { class: "sketch-wrap" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Sketch = resolveComponent("Sketch");
   const _directive_click_outside = resolveDirective("click-outside");
@@ -11445,7 +11445,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         createElementVNode("i", { class: "material-icons-outlined" }, "delete", -1)
       ]))) : createCommentVNode("", true)
     ]),
-    createElementVNode("div", _hoisted_2$9, [
+    createElementVNode("div", _hoisted_2$8, [
       _ctx.isShowColorPicker ? (openBlock(), createBlock$1(_component_Sketch, {
         key: 0,
         modelValue: _ctx.color,
@@ -11459,7 +11459,7 @@ 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$8 = { class: "flex-align-center" };
+const _hoisted_2$7 = { class: "flex-align-center" };
 const _hoisted_3$5 = { class: "title" };
 const _hoisted_4$4 = { class: "bs-layout-horizontal" };
 const _hoisted_5$4 = { class: "color" };
@@ -11498,7 +11498,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$g, [
-        createElementVNode("div", _hoisted_2$8, [
+        createElementVNode("div", _hoisted_2$7, [
           createElementVNode("div", _hoisted_3$5, [
             withDirectives(createElementVNode("label", null, null, 512), [
               [unref(vT), { key: "pb.prop.background" }]
@@ -11537,7 +11537,7 @@ const TopRightCornerIcon = "data:image/svg+xml,%3c!DOCTYPE%20svg%20PUBLIC%20'-//
 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$7 = { class: "flex-align-center" };
+const _hoisted_2$6 = { class: "flex-align-center" };
 const _hoisted_3$4 = { class: "title" };
 const _hoisted_4$3 = { class: "" };
 const _hoisted_5$3 = { class: "sub-title" };
@@ -11594,7 +11594,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     const updateBorderBottomRightRadius = (value) => updatePropertyValue({ borderBottomRightRadius: value });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$f, [
-        createElementVNode("div", _hoisted_2$7, [
+        createElementVNode("div", _hoisted_2$6, [
           createElementVNode("div", _hoisted_3$4, [
             withDirectives(createElementVNode("label", null, null, 512), [
               [unref(vT), { key: "pb.prop.border" }]
@@ -11724,7 +11724,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$e = { class: "group-editor group-editor-margin" };
-const _hoisted_2$6 = { class: "flex-align-center" };
+const _hoisted_2$5 = { class: "flex-align-center" };
 const _hoisted_3$3 = { class: "title" };
 const _hoisted_4$2 = { class: "flex-grow-1" };
 const _hoisted_5$2 = { class: "bg-gray-100 py-5 rounded-8" };
@@ -11756,7 +11756,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     const updateBottom = (value) => updatePropertyValue({ marginBottom: value });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$e, [
-        createElementVNode("div", _hoisted_2$6, [
+        createElementVNode("div", _hoisted_2$5, [
           createElementVNode("div", _hoisted_3$3, [
             withDirectives(createElementVNode("label", null, null, 512), [
               [unref(vT), { key: "pb.prop.margin" }]
@@ -11812,7 +11812,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$d = { class: "group-editor group-editor-padding" };
-const _hoisted_2$5 = { class: "flex-align-center" };
+const _hoisted_2$4 = { class: "flex-align-center" };
 const _hoisted_3$2 = { class: "title" };
 const _hoisted_4$1 = { class: "flex-grow-1" };
 const _hoisted_5$1 = { class: "bg-gray-100 py-5 rounded-8" };
@@ -11844,7 +11844,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     const updateBottom = (value) => updatePropertyValue({ paddingBottom: value });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$d, [
-        createElementVNode("div", _hoisted_2$5, [
+        createElementVNode("div", _hoisted_2$4, [
           createElementVNode("div", _hoisted_3$2, [
             withDirectives(createElementVNode("label", null, null, 512), [
               [unref(vT), { key: "pb.prop.padding" }]
@@ -12235,7 +12235,7 @@ const defaultWidgetPropertyGroups = () => {
   return [alignSelfGroup(), positionGroup(), sizeGroup(), marginGroup(), paddingGroup(), borderGroup(), backgroundGroup(), commonGroup(), hideParentGroup()];
 };
 const _hoisted_1$c = { class: "group-editor group-editor-media" };
-const _hoisted_2$4 = { class: "title" };
+const _hoisted_2$3 = { class: "title" };
 const _hoisted_3$1 = {
   key: 0,
   class: "title mt-12"
@@ -12299,7 +12299,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       var _a, _b, _c, _d;
       return openBlock(), createElementBlock("div", _hoisted_1$c, [
-        createElementVNode("div", _hoisted_2$4, [
+        createElementVNode("div", _hoisted_2$3, [
           withDirectives(createElementVNode("label", null, null, 512), [
             [unref(vT), { key: "pb.prop.media" }]
           ])
@@ -12757,7 +12757,7 @@ __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
 let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
 const openWidgetAddModal = (modal, args, callback) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./PbWidgetAddModal-ChIMw44P.js")),
+    component: defineAsyncComponent(() => import("./PbWidgetAddModal-Cqlbs46k.js")),
     style: {
       width: "80%",
       height: "80%",
@@ -13425,6 +13425,7 @@ const _DeletePartCommand = class _DeletePartCommand {
     __publicField(this, "caption", _DeletePartCommand.CAPTION);
   }
   execute(pageBuilder) {
+    var _a, _b, _c;
     const selected = pageBuilder.context.getSelectedParts();
     if (selected.length === 0) return;
     let partIds;
@@ -13434,6 +13435,15 @@ const _DeletePartCommand = class _DeletePartCommand {
       if (partsToDelete.length === 0) return;
       partIds = partsToDelete.map((part) => part.partId);
     } else {
+      if (selected.length === 1) {
+        if (selected[0].isBlock()) {
+          const block = selected[0];
+          if (((_b = (_a = block.parent) == null ? void 0 : _a.children) == null ? void 0 : _b.length) === 1) {
+            pageBuilder.model.updateModel({ delete: [(_c = block.parent) == null ? void 0 : _c.partId] });
+            return;
+          }
+        }
+      }
       partIds = selected.filter((part) => {
         return !selected.some((v) => part.isChildOf(v));
       }).map((part) => part.partId);
@@ -14395,7 +14405,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$9 = { class: "pb-toolbar bs-layout-horizontal align-items-center" };
-const _hoisted_2$3 = { class: "bs-layout-horizontal align-items-center" };
+const _hoisted_2$2 = { class: "bs-layout-horizontal align-items-center" };
 const _hoisted_3 = { class: "mr-8" };
 const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "PbToolbar",
@@ -14447,7 +14457,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       var _a, _b, _c;
       return openBlock(), createElementBlock("div", _hoisted_1$9, [
-        createElementVNode("div", _hoisted_2$3, [
+        createElementVNode("div", _hoisted_2$2, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(buttonGroups), (group) => {
             return openBlock(), createBlock$1(_sfc_main$b, {
               key: group.groupId,
@@ -14535,8 +14545,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     const rowMoved = (event) => {
       var _a, _b, _c, _d, _e, _f;
       let page2 = pageBuilder.context.getSelectedPage();
-      const parentPartId = ((_a = event.destParent) == null ? void 0 : _a.partId) || (page2 == null ? void 0 : page2.partId);
-      if (!parentPartId) return;
+      const destPartId = ((_a = event.destParent) == null ? void 0 : _a.partId) || (page2 == null ? void 0 : page2.partId);
+      if (!destPartId) return;
       let ok = false;
       if (event.row.isSection()) {
         if ((_b = event.destParent) == null ? void 0 : _b.isPage()) ok = true;
@@ -14551,7 +14561,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       }
       if (ok) {
         backupPartSelection();
-        pageBuilder.model.moveElements(event.row.partId, parentPartId, event.destIndex, void 0, true);
+        pageBuilder.model.moveElements(event.row.partId, destPartId, event.destIndex, void 0, true);
       }
     };
     const selectedRows = computed({
@@ -14645,7 +14655,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             "key-provider": (part) => part.partId,
             "label-provider": labelProvider,
             class: "max-w-320",
-            "dont-change-data-when-rowmoved": "",
+            "dont-change-data-when-row-moved": "",
             "multi-select": "",
             "show-move-button": "",
             onRowMoved: rowMoved
@@ -14691,7 +14701,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$6 = { class: "pb-sidebar-property-group" };
-const _hoisted_2$2 = {
+const _hoisted_2$1 = {
   key: 0,
   class: "group-title"
 };
@@ -14710,7 +14720,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$6, [
-        _ctx.group.showGroupName ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
+        _ctx.group.showGroupName ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
           withDirectives(createElementVNode("label", null, null, 512), [
             [unref(vT), { key: _ctx.group.caption }]
           ])
@@ -14826,6 +14836,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const showContextMenu = (event) => {
       var _a, _b;
       if (event.altKey || event.ctrlKey || event.shiftKey) return;
+      const selection = pageBuilder.context.getSelectedParts();
+      if (!selection.length) return;
       event.preventDefault();
       const scale = pageBuilder.scale.value;
       const frame = ((_b = (_a = event.target) == null ? void 0 : _a.ownerDocument.defaultView) == null ? void 0 : _b.frameElement) || void 0;
@@ -14875,7 +14887,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const canvasStyle = '.pb-page-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\n\n.pb-page {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  padding-bottom: 100px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n.pb-page .pb-page-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n.pb-page .pb-page-content.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-page * {\n  box-sizing: border-box;\n}\n\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\n\n.pb-add-widget-button button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  padding: 8px;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n\n.pb-section {\n  display: flex;\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n  background-color: #fff;\n}\n\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n\n.pb-section.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-section.pb-section-static {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n}\n\n.pb-section.pb-section-static:after {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n}\n\n.pb-section-static .pb-widget {\n  outline: none;\n}\n\n.pb-block {\n  display: flex;\n  min-width: 1px;\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n  outline: 1px dashed #ccc;\n}\n\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n\n.pb-block.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-widget {\n  position: relative;\n  outline: 1px dashed #ccc;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  pointer-events: auto !important;\n  min-height: 50px;\n}\n\n.pb-widget * {\n  pointer-events: none;\n}\n\n.pb-widget > .invalid-widget {\n  display: flex;\n  height: 50px;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-widget.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.pb-widget .pan-handle {\n  position: absolute;\n  left: -6px;\n  top: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: move;\n  pointer-events: auto !important;\n}\n\n.pb-widget .resize-handle {\n  position: absolute;\n  right: -6px;\n  bottom: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: nwse-resize;\n  pointer-events: auto !important;\n}\n\n.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-text-widget .text {\n  color: #333;\n}\n\n.pb-text-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-media-widget {\n  width: 100%;\n}\n\n.pb-media-widget .image {\n  width: 100%;\n}\n\n.pb-media-widget .video {\n  width: 100%;\n}\n\n.pb-media-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-media-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-html-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-iframe-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-iframe-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-youtube-widget {\n  width: 100%;\n}\n\n.pb-youtube-widget .youtube {\n  width: 100%;\n  height: 100%;\n}\n\n.pb-youtube-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-youtube-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-container-widget {\n  width: 100%;\n}\n\n.pb-container-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-container-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-product-list-widget {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n\n.pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n\n.pb-product-list-widget .product-wrapper .product {\n  width: 95%;\n  margin: 0 auto;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n\n.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-product-list-widget .product-wrapper .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 200px;\n  vertical-align: middle;\n}\n\n@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n\n.pb-login-widget h3 {\n  padding: 0;\n  margin: 0;\n  font-size: 32px;\n  font-weight: bold;\n  color: #ccc;\n  line-height: 200px;\n  vertical-align: middle;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  background-color: #aaa;\n  overflow: hidden;\n}\n\n.font-icon, .material-icons-outlined {\n  font-family: "Material Symbols Outlined", monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\n\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\n}\n\n.pb-add-section-handle {\n  position: relative;\n  text-align: center;\n  cursor: pointer;\n  z-index: 5;\n  height: 0;\n}\n\n.pb-add-section-handle.top::before, .pb-add-section-handle.bottom::before, .pb-add-section-handle.middle::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.pb-add-section-handle.bottom {\n  bottom: -32px;\n}\n\n.pb-add-section-handle:hover.top::before, .pb-add-section-handle:hover.bottom::before, .pb-add-section-handle:hover.middle::before,\n.pb-add-section-handle:hover > i {\n  opacity: 1;\n}\n\n.pb-add-section-handle > i {\n  font-style: normal;\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}';
+const canvasStyle = '.pb-page-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\n\n.pb-page {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  padding-bottom: 100px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n.pb-page .pb-page-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background-color: #fff;\n}\n\n.pb-page .pb-page-content.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-page * {\n  box-sizing: border-box;\n}\n\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\n\n.pb-add-widget-button button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  padding: 8px;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n\n.pb-section {\n  display: flex;\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n}\n\n.pb-section:empty {\n  background-color: #fff;\n}\n\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n\n.pb-section.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-section.pb-section-static {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n}\n\n.pb-section.pb-section-static:after {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n}\n\n.pb-section-static .pb-widget {\n  outline: none;\n}\n\n.pb-block {\n  display: flex;\n  min-width: 1px;\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n  outline: 1px dashed #ccc;\n}\n\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n\n.pb-block.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-widget {\n  position: relative;\n  outline: 1px dashed #ccc;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  pointer-events: auto !important;\n  min-height: 50px;\n}\n\n.pb-widget * {\n  pointer-events: none;\n}\n\n.pb-widget > .invalid-widget {\n  display: flex;\n  height: 50px;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-widget.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.pb-widget .pan-handle {\n  position: absolute;\n  left: -6px;\n  top: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: move;\n  pointer-events: auto !important;\n}\n\n.pb-widget .resize-handle {\n  position: absolute;\n  right: -6px;\n  bottom: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: nwse-resize;\n  pointer-events: auto !important;\n}\n\n.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-text-widget .text {\n  color: #333;\n}\n\n.pb-text-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-media-widget {\n  width: 100%;\n}\n\n.pb-media-widget .image {\n  width: 100%;\n}\n\n.pb-media-widget .video {\n  width: 100%;\n}\n\n.pb-media-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-media-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-html-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-iframe-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-iframe-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-youtube-widget {\n  width: 100%;\n}\n\n.pb-youtube-widget .youtube {\n  width: 100%;\n  height: 100%;\n}\n\n.pb-youtube-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-youtube-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-container-widget {\n  width: 100%;\n}\n\n.pb-container-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-container-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-product-list-widget {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n\n.pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n\n.pb-product-list-widget .product-wrapper .product {\n  width: 95%;\n  margin: 0 auto;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n\n.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-product-list-widget .product-wrapper .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 200px;\n  vertical-align: middle;\n}\n\n@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n\n.pb-login-widget h3 {\n  padding: 0;\n  margin: 0;\n  font-size: 32px;\n  font-weight: bold;\n  color: #ccc;\n  line-height: 200px;\n  vertical-align: middle;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  background-color: #aaa;\n  overflow: hidden;\n}\n\n.font-icon, .material-icons-outlined {\n  font-family: "Material Symbols Outlined", monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\n\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\n}\n\n.pb-add-section-handle {\n  position: relative;\n  text-align: center;\n  cursor: pointer;\n  z-index: 5;\n  height: 0;\n}\n\n.pb-add-section-handle.top::before, .pb-add-section-handle.bottom::before, .pb-add-section-handle.middle::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.pb-add-section-handle.bottom {\n  bottom: -32px;\n}\n\n.pb-add-section-handle:hover.top::before, .pb-add-section-handle:hover.bottom::before, .pb-add-section-handle:hover.middle::before,\n.pb-add-section-handle:hover > i {\n  opacity: 1;\n}\n\n.pb-add-section-handle > i {\n  font-style: normal;\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}';
 const _hoisted_1$2 = ["width"];
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "PbPageFrame",
@@ -15001,8 +15013,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$1 = { class: "pb-canvas-wrapper" };
-const _hoisted_2$1 = {
+const _hoisted_1$1 = {
   key: 1,
   style: { "width": "20px" }
 };
@@ -15026,22 +15037,33 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         }
       };
     });
+    const canvasRef = ref();
+    watch(() => canvasRef.value, () => {
+      if (canvasRef.value) {
+        pageBuilder.keyHandlers.addDocumentKeyEventListener(canvasRef.value);
+      }
+    }, { immediate: true });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+      return openBlock(), createElementBlock("div", {
+        ref_key: "canvasRef",
+        ref: canvasRef,
+        class: "pb-canvas-wrapper",
+        tabindex: "0"
+      }, [
         createElementVNode("div", mergeProps({ class: "pb-canvas" }, style.value), [
           partS.value ? (openBlock(), createBlock$1(_sfc_main$2, {
             key: 0,
             part: partS.value,
             width: 480
           }, null, 8, ["part"])) : createCommentVNode("", true),
-          partL.value ? (openBlock(), createElementBlock("div", _hoisted_2$1)) : createCommentVNode("", true),
+          partL.value ? (openBlock(), createElementBlock("div", _hoisted_1$1)) : createCommentVNode("", true),
           partL.value ? (openBlock(), createBlock$1(_sfc_main$2, {
             key: 2,
             part: partL.value,
             width: 1024
           }, null, 8, ["part"])) : createCommentVNode("", true)
         ], 16)
-      ]);
+      ], 512);
     };
   }
 });

package/dist/page-builder-editor.js

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

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

@@ -6958,7 +6958,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             innerHTML: styleTag.value
           }, null, 8, ["innerHTML"])) : vue.createCommentVNode("", true),
           vue.withDirectives(vue.createElementVNode("div", {
-            class: vue.normalizeClass([classNames.value, "pb-block"]),
+            class: vue.normalizeClass(classNames.value),
             "data-part-id": _ctx.part.partId,
             style: vue.normalizeStyle(style.value)
           }, [
@@ -7004,7 +7004,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             innerHTML: styleTag.value
           }, null, 8, ["innerHTML"])) : vue.createCommentVNode("", true),
           vue.withDirectives(vue.createElementVNode("div", {
-            class: vue.normalizeClass([classNames.value, "pb-section"]),
+            class: vue.normalizeClass(classNames.value),
             "data-part-id": _ctx.part.partId,
             style: vue.normalizeStyle(style.value)
           }, [
@@ -7534,7 +7534,7 @@ ${_html.style}
     }
   });
   const _hoisted_1$1$1 = ["innerHTML"];
-  const _hoisted_2$v = { class: "pb-viewer" };
+  const _hoisted_2$u = { class: "pb-viewer" };
   const _sfc_main$2$1 = /* @__PURE__ */ vue.defineComponent({
     __name: "PageBuilderViewer",
     props: {
@@ -7575,7 +7575,7 @@ ${_html.style}
             key: 0,
             innerHTML: vue.unref(externalCss)
           }, null, 8, _hoisted_1$1$1)) : vue.createCommentVNode("", true),
-          vue.createElementVNode("div", _hoisted_2$v, [
+          vue.createElementVNode("div", _hoisted_2$u, [
             part.value ? (vue.openBlock(), vue.createBlock(_sfc_main$3$1, {
               key: 0,
               "is-mobile-page": _ctx.isMobilePage,
@@ -8509,7 +8509,7 @@ ${_html.style}
     return mouseTracker;
   };
   const _hoisted_1$G = ["data-part-id", "draggable"];
-  const _hoisted_2$u = {
+  const _hoisted_2$t = {
     key: 1,
     class: "invalid-widget",
     textContent: "Invalid Widget"
@@ -8939,7 +8939,7 @@ ${_html.style}
             draggable: draggable.value,
             style: vue.normalizeStyle(style.value)
           }, [
-            component.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(component.value), vue.normalizeProps(vue.mergeProps({ key: 0 }, bind.value)), null, 16)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$u)),
+            component.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(component.value), vue.normalizeProps(vue.mergeProps({ key: 0 }, bind.value)), null, 16)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$t)),
             selected.value && _ctx.part.isNestedWidget() ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 2,
               class: "pan-handle",
@@ -9318,7 +9318,7 @@ ${_html.style}
     }
   });
   const _hoisted_1$C = { class: "group-editor group-editor-position" };
-  const _hoisted_2$t = { class: "flex-align-center" };
+  const _hoisted_2$s = { class: "flex-align-center" };
   const _hoisted_3$j = { class: "title" };
   const _hoisted_4$e = { class: "flex-grow-1" };
   const _hoisted_5$a = { class: "bg-gray-100 py-5 rounded-8" };
@@ -9350,7 +9350,7 @@ ${_html.style}
       const updateBottom = (value) => updatePropertyValue({ bottom: value });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$C, [
-          vue.createElementVNode("div", _hoisted_2$t, [
+          vue.createElementVNode("div", _hoisted_2$s, [
             vue.createElementVNode("div", _hoisted_3$j, [
               vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.prop.position" }]
@@ -9406,7 +9406,7 @@ ${_html.style}
     }
   });
   const _hoisted_1$B = { class: "group-editor group-editor-size" };
-  const _hoisted_2$s = { class: "flex-align-center" };
+  const _hoisted_2$r = { class: "flex-align-center" };
   const _hoisted_3$i = { class: "title" };
   const _hoisted_4$d = { class: "flex-grow-1 bs-layout-horizontal" };
   const _hoisted_5$9 = { class: "flex-align-center mt-12" };
@@ -9444,7 +9444,7 @@ ${_html.style}
       const updateMinHeight = (value) => updatePropertyValue({ minHeight: value });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$B, [
-          vue.createElementVNode("div", _hoisted_2$s, [
+          vue.createElementVNode("div", _hoisted_2$r, [
             vue.createElementVNode("div", _hoisted_3$i, [
               vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.prop.size" }]
@@ -9668,7 +9668,7 @@ ${_html.style}
     }
   };
   const _hoisted_1$A = { class: "vc-alpha" };
-  const _hoisted_2$r = { class: "vc-alpha-checkboard-wrap" };
+  const _hoisted_2$q = { class: "vc-alpha-checkboard-wrap" };
   const _hoisted_3$h = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-alpha-picker" },
@@ -9682,7 +9682,7 @@ ${_html.style}
   function render$4(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_Checkboard = vue.resolveComponent("Checkboard");
     return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, [
-      vue.createElementVNode("div", _hoisted_2$r, [
+      vue.createElementVNode("div", _hoisted_2$q, [
         vue.createVNode(_component_Checkboard)
       ]),
       vue.createElementVNode(
@@ -10786,7 +10786,7 @@ ${_html.style}
     }
   };
   const _hoisted_1$z = { class: "vc-editable-input" };
-  const _hoisted_2$q = ["aria-labelledby"];
+  const _hoisted_2$p = ["aria-labelledby"];
   const _hoisted_3$g = ["id", "for"];
   const _hoisted_4$b = { class: "vc-input__desc" };
   function render$3(_ctx, _cache, $props, $setup, $data, $options) {
@@ -10798,7 +10798,7 @@ ${_html.style}
         class: "vc-input__input",
         onKeydown: _cache[1] || (_cache[1] = (...args) => $options.handleKeyDown && $options.handleKeyDown(...args)),
         onInput: _cache[2] || (_cache[2] = (...args) => $options.update && $options.update(...args))
-      }, null, 40, _hoisted_2$q), [
+      }, null, 40, _hoisted_2$p), [
         [vue.vModelText, $options.val]
       ]),
       vue.createElementVNode("span", {
@@ -10892,7 +10892,7 @@ ${_html.style}
     -1
     /* HOISTED */
   );
-  const _hoisted_2$p = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_2$o = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-saturation--black" },
     null,
@@ -10922,7 +10922,7 @@ ${_html.style}
       },
       [
         _hoisted_1$y,
-        _hoisted_2$p,
+        _hoisted_2$o,
         vue.createElementVNode(
           "div",
           {
@@ -11071,7 +11071,7 @@ ${_html.style}
     }
   };
   const _hoisted_1$x = ["aria-valuenow"];
-  const _hoisted_2$o = /* @__PURE__ */ vue.createElementVNode(
+  const _hoisted_2$n = /* @__PURE__ */ vue.createElementVNode(
     "div",
     { class: "vc-hue-picker" },
     null,
@@ -11079,7 +11079,7 @@ ${_html.style}
     /* HOISTED */
   );
   const _hoisted_3$e = [
-    _hoisted_2$o
+    _hoisted_2$n
   ];
   function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock(
@@ -11207,7 +11207,7 @@ ${_html.style}
     }
   };
   const _hoisted_1$w = { class: "vc-sketch-saturation-wrap" };
-  const _hoisted_2$n = { class: "vc-sketch-controls" };
+  const _hoisted_2$m = { class: "vc-sketch-controls" };
   const _hoisted_3$d = { class: "vc-sketch-sliders" };
   const _hoisted_4$9 = { class: "vc-sketch-hue-wrap" };
   const _hoisted_5$8 = {
@@ -11255,7 +11255,7 @@ ${_html.style}
             onChange: $options.childChange
           }, null, 8, ["value", "onChange"])
         ]),
-        vue.createElementVNode("div", _hoisted_2$n, [
+        vue.createElementVNode("div", _hoisted_2$m, [
           vue.createElementVNode("div", _hoisted_3$d, [
             vue.createElementVNode("div", _hoisted_4$9, [
               vue.createVNode(_component_Hue, {
@@ -11422,7 +11422,7 @@ ${_html.style}
     }
   });
   const _hoisted_1$v = { class: "buttons" };
-  const _hoisted_2$m = { class: "sketch-wrap" };
+  const _hoisted_2$l = { class: "sketch-wrap" };
   function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_Sketch = vue.resolveComponent("Sketch");
     const _directive_click_outside = vue.resolveDirective("click-outside");
@@ -11446,7 +11446,7 @@ ${_html.style}
           vue.createElementVNode("i", { class: "material-icons-outlined" }, "delete", -1)
         ]))) : vue.createCommentVNode("", true)
       ]),
-      vue.createElementVNode("div", _hoisted_2$m, [
+      vue.createElementVNode("div", _hoisted_2$l, [
         _ctx.isShowColorPicker ? (vue.openBlock(), vue.createBlock(_component_Sketch, {
           key: 0,
           modelValue: _ctx.color,
@@ -11460,7 +11460,7 @@ ${_html.style}
   }
   const PbColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["render", _sfc_render]]);
   const _hoisted_1$u = { class: "group-editor group-editor-background" };
-  const _hoisted_2$l = { class: "flex-align-center" };
+  const _hoisted_2$k = { class: "flex-align-center" };
   const _hoisted_3$c = { class: "title" };
   const _hoisted_4$8 = { class: "bs-layout-horizontal" };
   const _hoisted_5$7 = { class: "color" };
@@ -11499,7 +11499,7 @@ ${_html.style}
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$u, [
-          vue.createElementVNode("div", _hoisted_2$l, [
+          vue.createElementVNode("div", _hoisted_2$k, [
             vue.createElementVNode("div", _hoisted_3$c, [
               vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.prop.background" }]
@@ -11538,7 +11538,7 @@ ${_html.style}
   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$t = { class: "group-editor group-editor-border" };
-  const _hoisted_2$k = { class: "flex-align-center" };
+  const _hoisted_2$j = { class: "flex-align-center" };
   const _hoisted_3$b = { class: "title" };
   const _hoisted_4$7 = { class: "" };
   const _hoisted_5$6 = { class: "sub-title" };
@@ -11595,7 +11595,7 @@ ${_html.style}
       const updateBorderBottomRightRadius = (value) => updatePropertyValue({ borderBottomRightRadius: value });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
-          vue.createElementVNode("div", _hoisted_2$k, [
+          vue.createElementVNode("div", _hoisted_2$j, [
             vue.createElementVNode("div", _hoisted_3$b, [
               vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.prop.border" }]
@@ -11725,7 +11725,7 @@ ${_html.style}
     }
   });
   const _hoisted_1$s = { class: "group-editor group-editor-margin" };
-  const _hoisted_2$j = { class: "flex-align-center" };
+  const _hoisted_2$i = { class: "flex-align-center" };
   const _hoisted_3$a = { class: "title" };
   const _hoisted_4$6 = { class: "flex-grow-1" };
   const _hoisted_5$5 = { class: "bg-gray-100 py-5 rounded-8" };
@@ -11757,7 +11757,7 @@ ${_html.style}
       const updateBottom = (value) => updatePropertyValue({ marginBottom: value });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
-          vue.createElementVNode("div", _hoisted_2$j, [
+          vue.createElementVNode("div", _hoisted_2$i, [
             vue.createElementVNode("div", _hoisted_3$a, [
               vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.prop.margin" }]
@@ -11813,7 +11813,7 @@ ${_html.style}
     }
   });
   const _hoisted_1$r = { class: "group-editor group-editor-padding" };
-  const _hoisted_2$i = { class: "flex-align-center" };
+  const _hoisted_2$h = { class: "flex-align-center" };
   const _hoisted_3$9 = { class: "title" };
   const _hoisted_4$5 = { class: "flex-grow-1" };
   const _hoisted_5$4 = { class: "bg-gray-100 py-5 rounded-8" };
@@ -11845,7 +11845,7 @@ ${_html.style}
       const updateBottom = (value) => updatePropertyValue({ paddingBottom: value });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$r, [
-          vue.createElementVNode("div", _hoisted_2$i, [
+          vue.createElementVNode("div", _hoisted_2$h, [
             vue.createElementVNode("div", _hoisted_3$9, [
               vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
                 [vue.unref(bluesea.vT), { key: "pb.prop.padding" }]
@@ -12236,7 +12236,7 @@ ${_html.style}
     return [alignSelfGroup(), positionGroup(), sizeGroup(), marginGroup(), paddingGroup(), borderGroup(), backgroundGroup(), commonGroup(), hideParentGroup()];
   };
   const _hoisted_1$q = { class: "group-editor group-editor-media" };
-  const _hoisted_2$h = { class: "title" };
+  const _hoisted_2$g = { class: "title" };
   const _hoisted_3$8 = {
     key: 0,
     class: "title mt-12"
@@ -12300,7 +12300,7 @@ ${_html.style}
       return (_ctx, _cache) => {
         var _a, _b, _c, _d;
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
-          vue.createElementVNode("div", _hoisted_2$h, [
+          vue.createElementVNode("div", _hoisted_2$g, [
             vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
               [vue.unref(bluesea.vT), { key: "pb.prop.media" }]
             ])
@@ -13426,6 +13426,7 @@ ${_html.style}
       __publicField(this, "caption", _DeletePartCommand.CAPTION);
     }
     execute(pageBuilder) {
+      var _a, _b, _c;
       const selected = pageBuilder.context.getSelectedParts();
       if (selected.length === 0) return;
       let partIds;
@@ -13435,6 +13436,15 @@ ${_html.style}
         if (partsToDelete.length === 0) return;
         partIds = partsToDelete.map((part) => part.partId);
       } else {
+        if (selected.length === 1) {
+          if (selected[0].isBlock()) {
+            const block = selected[0];
+            if (((_b = (_a = block.parent) == null ? void 0 : _a.children) == null ? void 0 : _b.length) === 1) {
+              pageBuilder.model.updateModel({ delete: [(_c = block.parent) == null ? void 0 : _c.partId] });
+              return;
+            }
+          }
+        }
         partIds = selected.filter((part) => {
           return !selected.some((v) => part.isChildOf(v));
         }).map((part) => part.partId);
@@ -14396,7 +14406,7 @@ ${_html.style}
     }
   });
   const _hoisted_1$n = { class: "pb-toolbar bs-layout-horizontal align-items-center" };
-  const _hoisted_2$g = { class: "bs-layout-horizontal align-items-center" };
+  const _hoisted_2$f = { class: "bs-layout-horizontal align-items-center" };
   const _hoisted_3$7 = { class: "mr-8" };
   const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     __name: "PbToolbar",
@@ -14448,7 +14458,7 @@ ${_html.style}
       return (_ctx, _cache) => {
         var _a, _b, _c;
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
-          vue.createElementVNode("div", _hoisted_2$g, [
+          vue.createElementVNode("div", _hoisted_2$f, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(buttonGroups), (group) => {
               return vue.openBlock(), vue.createBlock(_sfc_main$p, {
                 key: group.groupId,
@@ -14536,8 +14546,8 @@ ${_html.style}
       const rowMoved = (event) => {
         var _a, _b, _c, _d, _e, _f;
         let page2 = pageBuilder.context.getSelectedPage();
-        const parentPartId = ((_a = event.destParent) == null ? void 0 : _a.partId) || (page2 == null ? void 0 : page2.partId);
-        if (!parentPartId) return;
+        const destPartId = ((_a = event.destParent) == null ? void 0 : _a.partId) || (page2 == null ? void 0 : page2.partId);
+        if (!destPartId) return;
         let ok = false;
         if (event.row.isSection()) {
           if ((_b = event.destParent) == null ? void 0 : _b.isPage()) ok = true;
@@ -14552,7 +14562,7 @@ ${_html.style}
         }
         if (ok) {
           backupPartSelection();
-          pageBuilder.model.moveElements(event.row.partId, parentPartId, event.destIndex, void 0, true);
+          pageBuilder.model.moveElements(event.row.partId, destPartId, event.destIndex, void 0, true);
         }
       };
       const selectedRows = vue.computed({
@@ -14646,7 +14656,7 @@ ${_html.style}
               "key-provider": (part) => part.partId,
               "label-provider": labelProvider,
               class: "max-w-320",
-              "dont-change-data-when-rowmoved": "",
+              "dont-change-data-when-row-moved": "",
               "multi-select": "",
               "show-move-button": "",
               onRowMoved: rowMoved
@@ -14692,7 +14702,7 @@ ${_html.style}
     }
   });
   const _hoisted_1$k = { class: "pb-sidebar-property-group" };
-  const _hoisted_2$f = {
+  const _hoisted_2$e = {
     key: 0,
     class: "group-title"
   };
@@ -14711,7 +14721,7 @@ ${_html.style}
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
-          _ctx.group.showGroupName ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$f, [
+          _ctx.group.showGroupName ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$e, [
             vue.withDirectives(vue.createElementVNode("label", null, null, 512), [
               [vue.unref(bluesea.vT), { key: _ctx.group.caption }]
             ])
@@ -14827,6 +14837,8 @@ ${_html.style}
       const showContextMenu = (event) => {
         var _a, _b;
         if (event.altKey || event.ctrlKey || event.shiftKey) return;
+        const selection = pageBuilder.context.getSelectedParts();
+        if (!selection.length) return;
         event.preventDefault();
         const scale = pageBuilder.scale.value;
         const frame = ((_b = (_a = event.target) == null ? void 0 : _a.ownerDocument.defaultView) == null ? void 0 : _b.frameElement) || void 0;
@@ -14876,7 +14888,7 @@ ${_html.style}
       };
     }
   });
-  const canvasStyle = '.pb-page-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\n\n.pb-page {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  padding-bottom: 100px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n.pb-page .pb-page-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n.pb-page .pb-page-content.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-page * {\n  box-sizing: border-box;\n}\n\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\n\n.pb-add-widget-button button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  padding: 8px;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n\n.pb-section {\n  display: flex;\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n  background-color: #fff;\n}\n\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n\n.pb-section.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-section.pb-section-static {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n}\n\n.pb-section.pb-section-static:after {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n}\n\n.pb-section-static .pb-widget {\n  outline: none;\n}\n\n.pb-block {\n  display: flex;\n  min-width: 1px;\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n  outline: 1px dashed #ccc;\n}\n\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n\n.pb-block.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-widget {\n  position: relative;\n  outline: 1px dashed #ccc;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  pointer-events: auto !important;\n  min-height: 50px;\n}\n\n.pb-widget * {\n  pointer-events: none;\n}\n\n.pb-widget > .invalid-widget {\n  display: flex;\n  height: 50px;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-widget.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.pb-widget .pan-handle {\n  position: absolute;\n  left: -6px;\n  top: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: move;\n  pointer-events: auto !important;\n}\n\n.pb-widget .resize-handle {\n  position: absolute;\n  right: -6px;\n  bottom: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: nwse-resize;\n  pointer-events: auto !important;\n}\n\n.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-text-widget .text {\n  color: #333;\n}\n\n.pb-text-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-media-widget {\n  width: 100%;\n}\n\n.pb-media-widget .image {\n  width: 100%;\n}\n\n.pb-media-widget .video {\n  width: 100%;\n}\n\n.pb-media-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-media-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-html-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-iframe-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-iframe-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-youtube-widget {\n  width: 100%;\n}\n\n.pb-youtube-widget .youtube {\n  width: 100%;\n  height: 100%;\n}\n\n.pb-youtube-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-youtube-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-container-widget {\n  width: 100%;\n}\n\n.pb-container-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-container-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-product-list-widget {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n\n.pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n\n.pb-product-list-widget .product-wrapper .product {\n  width: 95%;\n  margin: 0 auto;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n\n.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-product-list-widget .product-wrapper .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 200px;\n  vertical-align: middle;\n}\n\n@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n\n.pb-login-widget h3 {\n  padding: 0;\n  margin: 0;\n  font-size: 32px;\n  font-weight: bold;\n  color: #ccc;\n  line-height: 200px;\n  vertical-align: middle;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  background-color: #aaa;\n  overflow: hidden;\n}\n\n.font-icon, .material-icons-outlined {\n  font-family: "Material Symbols Outlined", monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\n\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\n}\n\n.pb-add-section-handle {\n  position: relative;\n  text-align: center;\n  cursor: pointer;\n  z-index: 5;\n  height: 0;\n}\n\n.pb-add-section-handle.top::before, .pb-add-section-handle.bottom::before, .pb-add-section-handle.middle::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.pb-add-section-handle.bottom {\n  bottom: -32px;\n}\n\n.pb-add-section-handle:hover.top::before, .pb-add-section-handle:hover.bottom::before, .pb-add-section-handle:hover.middle::before,\n.pb-add-section-handle:hover > i {\n  opacity: 1;\n}\n\n.pb-add-section-handle > i {\n  font-style: normal;\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}';
+  const canvasStyle = '.pb-page-wrapper {\n  margin: 0 auto;\n  padding: 0;\n}\n\n.pb-page {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  padding-bottom: 100px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n.pb-page .pb-page-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background-color: #fff;\n}\n\n.pb-page .pb-page-content.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-page * {\n  box-sizing: border-box;\n}\n\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\n\n.pb-add-widget-button button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  padding: 8px;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n\n.pb-section {\n  display: flex;\n  position: relative;\n  width: 100%;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n}\n\n.pb-section:empty {\n  background-color: #fff;\n}\n\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n\n.pb-section.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-section.pb-section-static {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n}\n\n.pb-section.pb-section-static:after {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n}\n\n.pb-section-static .pb-widget {\n  outline: none;\n}\n\n.pb-block {\n  display: flex;\n  min-width: 1px;\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n  outline: 1px dashed #ccc;\n}\n\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n\n.pb-block.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-widget {\n  position: relative;\n  outline: 1px dashed #ccc;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  pointer-events: auto !important;\n  min-height: 50px;\n}\n\n.pb-widget * {\n  pointer-events: none;\n}\n\n.pb-widget > .invalid-widget {\n  display: flex;\n  height: 50px;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-widget.selected::before {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid #4998f8;\n  z-index: 999;\n  pointer-events: none;\n}\n\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.pb-widget .pan-handle {\n  position: absolute;\n  left: -6px;\n  top: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: move;\n  pointer-events: auto !important;\n}\n\n.pb-widget .resize-handle {\n  position: absolute;\n  right: -6px;\n  bottom: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: nwse-resize;\n  pointer-events: auto !important;\n}\n\n.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-text-widget .text {\n  color: #333;\n}\n\n.pb-text-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-media-widget {\n  width: 100%;\n}\n\n.pb-media-widget .image {\n  width: 100%;\n}\n\n.pb-media-widget .video {\n  width: 100%;\n}\n\n.pb-media-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-media-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-html-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-html-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-iframe-widget {\n  width: 100%;\n  height: fit-content;\n}\n\n.pb-iframe-widget .placeholder {\n  padding: 4px 0;\n  font-size: 18px;\n  text-align: center;\n  color: #999;\n}\n\n.pb-youtube-widget {\n  width: 100%;\n}\n\n.pb-youtube-widget .youtube {\n  width: 100%;\n  height: 100%;\n}\n\n.pb-youtube-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-youtube-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-container-widget {\n  width: 100%;\n}\n\n.pb-container-widget .placeholder {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-container-widget .placeholder span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n\n.pb-product-list-widget {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n\n.pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n\n.pb-product-list-widget .product-wrapper .product {\n  width: 95%;\n  margin: 0 auto;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n\n.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n\n.pb-product-list-widget .product-wrapper .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 200px;\n  vertical-align: middle;\n}\n\n@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n\n.pb-login-widget h3 {\n  padding: 0;\n  margin: 0;\n  font-size: 32px;\n  font-weight: bold;\n  color: #ccc;\n  line-height: 200px;\n  vertical-align: middle;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  background-color: #aaa;\n  overflow: hidden;\n}\n\n.font-icon, .material-icons-outlined {\n  font-family: "Material Symbols Outlined", monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\n\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\n}\n\n.pb-add-section-handle {\n  position: relative;\n  text-align: center;\n  cursor: pointer;\n  z-index: 5;\n  height: 0;\n}\n\n.pb-add-section-handle.top::before, .pb-add-section-handle.bottom::before, .pb-add-section-handle.middle::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.pb-add-section-handle.bottom {\n  bottom: -32px;\n}\n\n.pb-add-section-handle:hover.top::before, .pb-add-section-handle:hover.bottom::before, .pb-add-section-handle:hover.middle::before,\n.pb-add-section-handle:hover > i {\n  opacity: 1;\n}\n\n.pb-add-section-handle > i {\n  font-style: normal;\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: 0;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}';
   const _hoisted_1$g = ["width"];
   const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     __name: "PbPageFrame",
@@ -15002,8 +15014,7 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$f = { class: "pb-canvas-wrapper" };
-  const _hoisted_2$e = {
+  const _hoisted_1$f = {
     key: 1,
     style: { "width": "20px" }
   };
@@ -15027,22 +15038,33 @@ ${_html.style}
           }
         };
       });
+      const canvasRef = vue.ref();
+      vue.watch(() => canvasRef.value, () => {
+        if (canvasRef.value) {
+          pageBuilder.keyHandlers.addDocumentKeyEventListener(canvasRef.value);
+        }
+      }, { immediate: true });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
+        return vue.openBlock(), vue.createElementBlock("div", {
+          ref_key: "canvasRef",
+          ref: canvasRef,
+          class: "pb-canvas-wrapper",
+          tabindex: "0"
+        }, [
           vue.createElementVNode("div", vue.mergeProps({ class: "pb-canvas" }, style.value), [
             partS.value ? (vue.openBlock(), vue.createBlock(_sfc_main$g, {
               key: 0,
               part: partS.value,
               width: 480
             }, null, 8, ["part"])) : vue.createCommentVNode("", true),
-            partL.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$e)) : vue.createCommentVNode("", true),
+            partL.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f)) : vue.createCommentVNode("", true),
             partL.value ? (vue.openBlock(), vue.createBlock(_sfc_main$g, {
               key: 2,
               part: partL.value,
               width: 1024
             }, null, 8, ["part"])) : vue.createCommentVNode("", true)
           ], 16)
-        ]);
+        ], 512);
       };
     }
   });

package/package.json

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