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

package/dist/{PbPropertyEditorColor-BC6HW3q7.js → PbPropertyEditorColor-BFMkFOYX.js}

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

package/dist/{PbPropertyEditorHtml-DGiHzR3a.js → PbPropertyEditorHtml-DZw8qbJH.js}

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

package/dist/{PbPropertyEditorImage-BFqppMwa.js → PbPropertyEditorImage-BQhiQyNM.js}

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

package/dist/{PbPropertyEditorMultilineText-BdgciM4C.js → PbPropertyEditorMultilineText-CT3vTbYY.js}

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

package/dist/{PbPropertyEditorText-BDKWUgPG.js → PbPropertyEditorText-DmM_LMjC.js}

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

package/dist/{PbWidgetAddModal-BKP0MLJe.js → PbWidgetAddModal-BoYfb0dm.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-KDwlEwIU.js";
+import { w as widgetPartDefinitions } from "./index-Cr-_-n9T.js";
 const _hoisted_1 = { class: "bs-layout-vertical pb-part-add-modal" };
 const _hoisted_2 = /* @__PURE__ */ createElementVNode("div", {
   class: "mb-8",

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

@@ -4,8 +4,8 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { ref, defineComponent, openBlock, createElementBlock, createCommentVNode, computed, mergeProps, toDisplayString, onMounted, onBeforeUnmount, provide, inject, watch, createBlock as createBlock$1, resolveDynamicComponent, normalizeProps, createElementVNode, normalizeClass, Fragment, renderList, reactive, defineAsyncComponent, withDirectives, unref, createVNode, normalizeStyle, resolveComponent, vModelText, resolveDirective, withModifiers, renderSlot, guardReactiveProps, markRaw, Teleport, toHandlers, withCtx } from "vue";
-import { notNull, BSTextInput, vClickOutside, useModal, useContextMenu, BSSelect, BSTabSheet, BSTree } from "@g1cloud/bluesea";
+import { ref, defineComponent, openBlock, createElementBlock, createCommentVNode, computed, mergeProps, toDisplayString, onMounted, onBeforeUnmount, provide, inject, watch, createBlock as createBlock$1, resolveDynamicComponent, normalizeProps, createElementVNode, normalizeClass, Fragment, renderList, reactive, defineAsyncComponent, withDirectives, unref, createVNode, normalizeStyle, resolveComponent, vModelText, resolveDirective, withModifiers, renderSlot, guardReactiveProps, markRaw, Teleport, toHandlers } from "vue";
+import { notNull, BSTextInput, vClickOutside, useModal, useContextMenu, BSSelect, BSTree } from "@g1cloud/bluesea";
 const create$5 = () => /* @__PURE__ */ new Map();
 const copy = (m) => {
   const r = create$5();
@@ -6778,8 +6778,6 @@ class Part {
 class RootPart extends Part {
   constructor() {
     super();
-    __publicField2(this, "language");
-    this.language = "en";
     this.partType = ROOT_TYPE$1;
     this.partName = ROOT_TYPE$1;
   }
@@ -7055,8 +7053,8 @@ const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
         return;
       if (typeof html2 !== "object")
         return;
-      const language = pageBuilder.locale.value;
-      let _html = html2[language];
+      const locale = pageBuilder.locale.value;
+      let _html = html2[locale];
       if (!_html && html2.tags) {
         _html = html2;
       }
@@ -7344,18 +7342,23 @@ const _sfc_main$1$1 = /* @__PURE__ */ defineComponent({
   props: {
     pageContent: {},
     isMobilePage: { type: Boolean },
-    language: {},
+    locale: {},
     plugin: {}
   },
   setup(__props) {
     const props = __props;
     const pageBuilderViewer = createPageBuilderViewer();
-    pageBuilderViewer.setLocale(props.language);
+    pageBuilderViewer.setLocale(props.locale);
     if (props.plugin)
       pageBuilderViewer.registerCustomPlugin(props.plugin);
     providePageBuilderViewer(pageBuilderViewer);
     providePageBuilder(pageBuilderViewer);
-    const page = computed(() => pageBuilderViewer.model.rootPart.value.children && pageBuilderViewer.model.rootPart.value.children[props.isMobilePage ? 0 : 1]);
+    const page = computed(() => {
+      const pages = pageBuilderViewer.model.rootPart.value.children;
+      if (!pages || !pages.length)
+        return;
+      return pages[pages.length === 1 || props.isMobilePage ? 0 : 1];
+    });
     onMounted(() => {
       if (props.pageContent) {
         pageBuilderViewer.render(props.pageContent);
@@ -8002,12 +8005,12 @@ class PartManager {
 const defaultPartPropertyEditors = () => {
   return {
     "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-Dgp_AVOD.js")),
-    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-BDKWUgPG.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-BdgciM4C.js")),
+    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-DmM_LMjC.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-CT3vTbYY.js")),
     "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-CWedbXJI.js")),
-    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-BC6HW3q7.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-BFqppMwa.js")),
-    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-DGiHzR3a.js"))
+    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-BFMkFOYX.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-BQhiQyNM.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-DZw8qbJH.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -11881,6 +11884,23 @@ const defaultPropertyGroups = () => {
 const defaultWidgetPropertyGroups = () => {
   return [positionGroup(), sizeGroup(), marginGroup(), paddingGroup(), borderGroup(), backgroundGroup(), commonGroup()];
 };
+const pageParts = [
+  {
+    partType: "Page",
+    partName: "Page",
+    caption: "Page",
+    icon: "draft",
+    propertyGroups: [
+      paddingGroup(),
+      backgroundGroup(),
+      commonGroup()
+    ],
+    initialProperties: {},
+    localized: false,
+    allowsChild: () => true,
+    creator: () => _sfc_main$k
+  }
+];
 const sectionParts = [
   {
     partType: "Section",
@@ -12039,13 +12059,16 @@ const widgets = [
   }
 ];
 const partDefinitions = {};
-for (let part of sectionParts) {
+for (const part of pageParts) {
+  partDefinitions[part.partName] = part;
+}
+for (const part of sectionParts) {
   partDefinitions[part.partName] = part;
 }
-for (let part of blockParts) {
+for (const part of blockParts) {
   partDefinitions[part.partName] = part;
 }
-for (let part of widgets) {
+for (const part of widgets) {
   partDefinitions[part.partName] = part;
 }
 [
@@ -12119,7 +12142,7 @@ __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
 let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
 const openWidgetAddModal = (modal, args, callback) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./PbWidgetAddModal-BKP0MLJe.js")),
+    component: defineAsyncComponent(() => import("./PbWidgetAddModal-BoYfb0dm.js")),
     style: {
       width: "80%",
       height: "80%",
@@ -13096,7 +13119,11 @@ class PageBuilderContextImpl {
   }
   setSelection(parts) {
     this.selection.splice(0, this.selection.length);
-    parts.forEach((part) => this.selection.push(part));
+    if (parts && parts.length) {
+      parts.forEach((part) => this.selection.push(part));
+    } else if (this.model.rootPart.children && this.model.rootPart.children.length) {
+      this.selection.push(this.model.rootPart.children[0]);
+    }
   }
   addSelection(parts) {
     parts.forEach((part) => this.selection.push(part));
@@ -13345,7 +13372,6 @@ class PageBuilderEditorImpl {
     }
   }
   initData(data) {
-    this.model.rootPart.language = this.locale.value;
     const _data = JSON.parse(data || "{}") || {};
     let rootPart = partFromJsonObject(_data, true);
     if (!rootPart)
@@ -13353,6 +13379,21 @@ class PageBuilderEditorImpl {
     let parts = rootPart.children;
     if (!parts)
       parts = [this.getEmptyPageContent(), this.getEmptyPageContent()];
+    if (parts.length === 1) {
+      parts[0].properties = {
+        ...parts[0].properties || {},
+        name: "Page"
+      };
+    } else if (parts.length === 2) {
+      parts[0].properties = {
+        ...parts[0].properties || {},
+        name: "Page (Mobile)"
+      };
+      parts[1].properties = {
+        ...parts[0].properties || {},
+        name: "Page (PC)"
+      };
+    }
     let partIdsToDelete = void 0;
     if (this.model.rootPart.children && this.model.rootPart.children.length) {
       partIdsToDelete = this.model.rootPart.children.map((v) => v.partId);
@@ -13385,9 +13426,18 @@ class PageBuilderEditorImpl {
     const screenCount = ((_a = this.model.rootPart.children) == null ? void 0 : _a.length) || 0;
     if (screenCount !== 2)
       return;
-    const part = this.model.rootPart.children[screenToKeep === 0 ? 1 : 0];
+    const remaining = this.model.rootPart.children[screenToKeep === 0 ? 0 : 1];
+    const deleting = this.model.rootPart.children[screenToKeep === 0 ? 1 : 0];
     this.model.updateModel({
-      delete: [part.partId]
+      delete: [deleting.partId],
+      update: [
+        {
+          partId: remaining.partId,
+          properties: {
+            name: "Page"
+          }
+        }
+      ]
     });
   }
   makeMultipleScreen() {
@@ -13402,6 +13452,10 @@ class PageBuilderEditorImpl {
     const copied = this.model.parseParts(json);
     if (!copied)
       return;
+    copied[0].properties = {
+      ...copied[0].properties || {},
+      name: "Page (PC)"
+    };
     this.model.updateModel({
       insert: [
         {
@@ -13409,6 +13463,14 @@ class PageBuilderEditorImpl {
           index: 1,
           parts: copied
         }
+      ],
+      update: [
+        {
+          partId: part.partId,
+          properties: {
+            name: "Page (Mobile)"
+          }
+        }
       ]
     });
   }
@@ -13550,7 +13612,11 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
         minHeight: ((_b = (_a = props.page) == null ? void 0 : _a.children) == null ? void 0 : _b.length) ? void 0 : "200px"
       };
     });
-    const selected = computed(() => editor.context.getSelectedPage() === props.page);
+    const properties = computed(() => {
+      var _a;
+      return { style: ((_a = props.page) == null ? void 0 : _a.getStyles()) || {} };
+    });
+    const selected = computed(() => !!props.page && editor.context.isSelected(props.page));
     const insertSection = (index) => {
       if (!props.page)
         return;
@@ -13562,16 +13628,16 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
         style: normalizeStyle(style.value),
         class: "pb-page"
       }, [
-        createElementVNode("div", {
-          class: normalizeClass([selected.value && "selected", _ctx.isMobilePage ? "mobile" : "pc", "pb-page-content"])
-        }, [
+        createElementVNode("div", mergeProps({
+          class: [selected.value && "selected", _ctx.isMobilePage ? "mobile" : "pc", "pb-page-content"]
+        }, properties.value), [
           (openBlock(true), createElementBlock(Fragment, null, renderList((_a = _ctx.page) == null ? void 0 : _a.children, (section, index) => {
             return openBlock(), createBlock$1(_sfc_main$k, {
               key: section.partId,
               part: section
             }, null, 8, ["part"]);
           }), 128))
-        ], 2),
+        ], 16),
         createElementVNode("div", {
           class: "pb-add-section-handle bottom",
           onClick: _cache[0] || (_cache[0] = ($event) => {
@@ -13867,49 +13933,14 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$4 = {
-  key: 1,
-  class: "bs-layout-vertical border"
-};
+const _hoisted_1$4 = { class: "bs-layout-vertical border" };
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "PbNavigator",
   setup(__props) {
     const pageBuilder = usePageBuilderEditor();
-    const treeS = ref();
-    const treeL = ref();
-    watch(
-      () => treeS.value,
-      () => treeS.value && pageBuilder.keyHandlers.addDocumentKeyEventListener(treeS.value)
-    );
-    watch(
-      () => treeL.value,
-      () => treeL.value && pageBuilder.keyHandlers.addDocumentKeyEventListener(treeL.value)
-    );
-    const tabs = [
-      { tabId: "pageS", caption: "Mobile", icon: "phone_iphone" },
-      { tabId: "pageL", caption: "PC", icon: "desktop_windows" }
-    ];
-    const isMultipleScreen = computed(() => {
-      var _a;
-      return (((_a = pageBuilder.model.rootPart.children) == null ? void 0 : _a.length) || 0) >= 2;
-    });
-    const pageS = computed(() => {
-      var _a;
-      return ((_a = (pageBuilder.model.rootPart.children || [])[0]) == null ? void 0 : _a.children) || [];
-    });
-    const pageL = computed(() => {
-      var _a;
-      return ((_a = (pageBuilder.model.rootPart.children || [])[1]) == null ? void 0 : _a.children) || [];
-    });
-    const tabId = computed({
-      get() {
-        const page = pageBuilder.context.getSelectedPage();
-        return page === (pageBuilder.model.rootPart.children || [])[1] ? "pageL" : "pageS";
-      },
-      // @ts-ignore
-      set(value) {
-      }
-    });
+    const tree = ref();
+    watch(() => tree.value, () => tree.value && pageBuilder.keyHandlers.addDocumentKeyEventListener(tree.value));
+    const page = computed(() => pageBuilder.model.rootPart.children || []);
     let savedPartSelection = null;
     const treeDragAndDropPolicy = {
       dropStep: () => 3,
@@ -13943,8 +13974,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
     const rowMoved = (event) => {
       var _a, _b, _c, _d, _e, _f;
-      let page = pageBuilder.context.getSelectedPage();
-      const parentPartId = ((_a = event.destParent) == null ? void 0 : _a.partId) || (page == null ? void 0 : page.partId);
+      let page2 = pageBuilder.context.getSelectedPage();
+      const parentPartId = ((_a = event.destParent) == null ? void 0 : _a.partId) || (page2 == null ? void 0 : page2.partId);
       if (!parentPartId)
         return;
       let ok = false;
@@ -14030,92 +14061,25 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       PageBuilderEditorEvent.off.modelUpdatedByUI(modelUpdateHandler);
     });
     return (_ctx, _cache) => {
-      return isMultipleScreen.value ? (openBlock(), createBlock$1(unref(BSTabSheet), {
-        key: 0,
-        "tab-id": tabId.value,
-        "onUpdate:tabId": _cache[4] || (_cache[4] = ($event) => tabId.value = $event),
-        tabs
-      }, {
-        pageS: withCtx(() => [
-          createElementVNode("div", {
-            ref_key: "treeS",
-            ref: treeS,
-            class: "pb-navigator",
-            tabindex: "0"
-          }, [
-            createVNode(unref(BSTree), {
-              expandedRows: expandedRows.value,
-              "onUpdate:expandedRows": [
-                _cache[0] || (_cache[0] = ($event) => expandedRows.value = $event),
-                expandedRowsChanged
-              ],
-              selectedRows: selectedRows.value,
-              "onUpdate:selectedRows": [
-                _cache[1] || (_cache[1] = ($event) => selectedRows.value = $event),
-                selectedRowsChanged
-              ],
-              data: pageS.value,
-              "enable-drag-and-drop": treeDragAndDropPolicy,
-              "icon-provider": iconProvider,
-              "key-provider": (part) => part.partId,
-              "label-provider": labelProvider,
-              class: "max-w-320",
-              "dont-change-data-when-rowmoved": "",
-              "show-move-button": "",
-              onRowMoved: rowMoved
-            }, null, 8, ["expandedRows", "selectedRows", "data", "key-provider"])
-          ], 512)
-        ]),
-        pageL: withCtx(() => [
-          createElementVNode("div", {
-            ref_key: "treeL",
-            ref: treeL,
-            class: "pb-navigator",
-            tabindex: "0"
-          }, [
-            createVNode(unref(BSTree), {
-              expandedRows: expandedRows.value,
-              "onUpdate:expandedRows": [
-                _cache[2] || (_cache[2] = ($event) => expandedRows.value = $event),
-                expandedRowsChanged
-              ],
-              selectedRows: selectedRows.value,
-              "onUpdate:selectedRows": [
-                _cache[3] || (_cache[3] = ($event) => selectedRows.value = $event),
-                selectedRowsChanged
-              ],
-              data: pageL.value,
-              "enable-drag-and-drop": treeDragAndDropPolicy,
-              "icon-provider": iconProvider,
-              "key-provider": (part) => part.partId,
-              "label-provider": labelProvider,
-              class: "max-w-320",
-              "dont-change-data-when-rowmoved": "",
-              "show-move-button": "",
-              onRowMoved: rowMoved
-            }, null, 8, ["expandedRows", "selectedRows", "data", "key-provider"])
-          ], 512)
-        ]),
-        _: 1
-      }, 8, ["tab-id"])) : (openBlock(), createElementBlock("div", _hoisted_1$4, [
+      return openBlock(), createElementBlock("div", _hoisted_1$4, [
         createElementVNode("div", {
-          ref_key: "treeS",
-          ref: treeS,
+          ref_key: "tree",
+          ref: tree,
           class: "pb-navigator",
           tabindex: "0"
         }, [
           createVNode(unref(BSTree), {
             expandedRows: expandedRows.value,
             "onUpdate:expandedRows": [
-              _cache[5] || (_cache[5] = ($event) => expandedRows.value = $event),
+              _cache[0] || (_cache[0] = ($event) => expandedRows.value = $event),
               expandedRowsChanged
             ],
             selectedRows: selectedRows.value,
             "onUpdate:selectedRows": [
-              _cache[6] || (_cache[6] = ($event) => selectedRows.value = $event),
+              _cache[1] || (_cache[1] = ($event) => selectedRows.value = $event),
               selectedRowsChanged
             ],
-            data: pageS.value,
+            data: page.value,
             "enable-drag-and-drop": treeDragAndDropPolicy,
             "icon-provider": iconProvider,
             "key-provider": (part) => part.partId,
@@ -14126,7 +14090,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             onRowMoved: rowMoved
           }, null, 8, ["expandedRows", "selectedRows", "data", "key-provider"])
         ], 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, R, m, S, n, W, o, p, q, r, s, t, v, x } from "./index-KDwlEwIU.js";
+import { B, b, M, c, d, e, _, a, f, g, h, i, j, k, l, R, m, S, n, W, o, p, q, r, s, t, v, x } from "./index-Cr-_-n9T.js";
 export {
   B as BLOCK_TYPE,
   b as Block,

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

@@ -6780,8 +6780,6 @@ var __publicField = (obj, key, value) => {
   class RootPart extends Part {
     constructor() {
       super();
-      __publicField2(this, "language");
-      this.language = "en";
       this.partType = ROOT_TYPE$1;
       this.partName = ROOT_TYPE$1;
     }
@@ -7057,8 +7055,8 @@ var __publicField = (obj, key, value) => {
           return;
         if (typeof html2 !== "object")
           return;
-        const language = pageBuilder.locale.value;
-        let _html = html2[language];
+        const locale = pageBuilder.locale.value;
+        let _html = html2[locale];
         if (!_html && html2.tags) {
           _html = html2;
         }
@@ -7346,18 +7344,23 @@ ${_html.style}
     props: {
       pageContent: {},
       isMobilePage: { type: Boolean },
-      language: {},
+      locale: {},
       plugin: {}
     },
     setup(__props) {
       const props = __props;
       const pageBuilderViewer = createPageBuilderViewer();
-      pageBuilderViewer.setLocale(props.language);
+      pageBuilderViewer.setLocale(props.locale);
       if (props.plugin)
         pageBuilderViewer.registerCustomPlugin(props.plugin);
       providePageBuilderViewer(pageBuilderViewer);
       providePageBuilder(pageBuilderViewer);
-      const page = vue.computed(() => pageBuilderViewer.model.rootPart.value.children && pageBuilderViewer.model.rootPart.value.children[props.isMobilePage ? 0 : 1]);
+      const page = vue.computed(() => {
+        const pages = pageBuilderViewer.model.rootPart.value.children;
+        if (!pages || !pages.length)
+          return;
+        return pages[pages.length === 1 || props.isMobilePage ? 0 : 1];
+      });
       vue.onMounted(() => {
         if (props.pageContent) {
           pageBuilderViewer.render(props.pageContent);
@@ -11883,6 +11886,23 @@ ${_html.style}
   const defaultWidgetPropertyGroups = () => {
     return [positionGroup(), sizeGroup(), marginGroup(), paddingGroup(), borderGroup(), backgroundGroup(), commonGroup()];
   };
+  const pageParts = [
+    {
+      partType: "Page",
+      partName: "Page",
+      caption: "Page",
+      icon: "draft",
+      propertyGroups: [
+        paddingGroup(),
+        backgroundGroup(),
+        commonGroup()
+      ],
+      initialProperties: {},
+      localized: false,
+      allowsChild: () => true,
+      creator: () => _sfc_main$u
+    }
+  ];
   const sectionParts = [
     {
       partType: "Section",
@@ -12041,13 +12061,16 @@ ${_html.style}
     }
   ];
   const partDefinitions = {};
-  for (let part of sectionParts) {
+  for (const part of pageParts) {
+    partDefinitions[part.partName] = part;
+  }
+  for (const part of sectionParts) {
     partDefinitions[part.partName] = part;
   }
-  for (let part of blockParts) {
+  for (const part of blockParts) {
     partDefinitions[part.partName] = part;
   }
-  for (let part of widgets) {
+  for (const part of widgets) {
     partDefinitions[part.partName] = part;
   }
   [
@@ -13098,7 +13121,11 @@ ${_html.style}
     }
     setSelection(parts) {
       this.selection.splice(0, this.selection.length);
-      parts.forEach((part) => this.selection.push(part));
+      if (parts && parts.length) {
+        parts.forEach((part) => this.selection.push(part));
+      } else if (this.model.rootPart.children && this.model.rootPart.children.length) {
+        this.selection.push(this.model.rootPart.children[0]);
+      }
     }
     addSelection(parts) {
       parts.forEach((part) => this.selection.push(part));
@@ -13347,7 +13374,6 @@ ${_html.style}
       }
     }
     initData(data) {
-      this.model.rootPart.language = this.locale.value;
       const _data = JSON.parse(data || "{}") || {};
       let rootPart = partFromJsonObject(_data, true);
       if (!rootPart)
@@ -13355,6 +13381,21 @@ ${_html.style}
       let parts = rootPart.children;
       if (!parts)
         parts = [this.getEmptyPageContent(), this.getEmptyPageContent()];
+      if (parts.length === 1) {
+        parts[0].properties = {
+          ...parts[0].properties || {},
+          name: "Page"
+        };
+      } else if (parts.length === 2) {
+        parts[0].properties = {
+          ...parts[0].properties || {},
+          name: "Page (Mobile)"
+        };
+        parts[1].properties = {
+          ...parts[0].properties || {},
+          name: "Page (PC)"
+        };
+      }
       let partIdsToDelete = void 0;
       if (this.model.rootPart.children && this.model.rootPart.children.length) {
         partIdsToDelete = this.model.rootPart.children.map((v) => v.partId);
@@ -13387,9 +13428,18 @@ ${_html.style}
       const screenCount = ((_a = this.model.rootPart.children) == null ? void 0 : _a.length) || 0;
       if (screenCount !== 2)
         return;
-      const part = this.model.rootPart.children[screenToKeep === 0 ? 1 : 0];
+      const remaining = this.model.rootPart.children[screenToKeep === 0 ? 0 : 1];
+      const deleting = this.model.rootPart.children[screenToKeep === 0 ? 1 : 0];
       this.model.updateModel({
-        delete: [part.partId]
+        delete: [deleting.partId],
+        update: [
+          {
+            partId: remaining.partId,
+            properties: {
+              name: "Page"
+            }
+          }
+        ]
       });
     }
     makeMultipleScreen() {
@@ -13404,6 +13454,10 @@ ${_html.style}
       const copied = this.model.parseParts(json);
       if (!copied)
         return;
+      copied[0].properties = {
+        ...copied[0].properties || {},
+        name: "Page (PC)"
+      };
       this.model.updateModel({
         insert: [
           {
@@ -13411,6 +13465,14 @@ ${_html.style}
             index: 1,
             parts: copied
           }
+        ],
+        update: [
+          {
+            partId: part.partId,
+            properties: {
+              name: "Page (Mobile)"
+            }
+          }
         ]
       });
     }
@@ -13552,7 +13614,11 @@ ${_html.style}
           minHeight: ((_b = (_a = props.page) == null ? void 0 : _a.children) == null ? void 0 : _b.length) ? void 0 : "200px"
         };
       });
-      const selected = vue.computed(() => editor.context.getSelectedPage() === props.page);
+      const properties = vue.computed(() => {
+        var _a;
+        return { style: ((_a = props.page) == null ? void 0 : _a.getStyles()) || {} };
+      });
+      const selected = vue.computed(() => !!props.page && editor.context.isSelected(props.page));
       const insertSection = (index) => {
         if (!props.page)
           return;
@@ -13564,16 +13630,16 @@ ${_html.style}
           style: vue.normalizeStyle(style.value),
           class: "pb-page"
         }, [
-          vue.createElementVNode("div", {
-            class: vue.normalizeClass([selected.value && "selected", _ctx.isMobilePage ? "mobile" : "pc", "pb-page-content"])
-          }, [
+          vue.createElementVNode("div", vue.mergeProps({
+            class: [selected.value && "selected", _ctx.isMobilePage ? "mobile" : "pc", "pb-page-content"]
+          }, properties.value), [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList((_a = _ctx.page) == null ? void 0 : _a.children, (section, index) => {
               return vue.openBlock(), vue.createBlock(_sfc_main$u, {
                 key: section.partId,
                 part: section
               }, null, 8, ["part"]);
             }), 128))
-          ], 2),
+          ], 16),
           vue.createElementVNode("div", {
             class: "pb-add-section-handle bottom",
             onClick: _cache[0] || (_cache[0] = ($event) => {
@@ -13869,49 +13935,14 @@ ${_html.style}
       };
     }
   });
-  const _hoisted_1$e = {
-    key: 1,
-    class: "bs-layout-vertical border"
-  };
+  const _hoisted_1$e = { class: "bs-layout-vertical border" };
   const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     __name: "PbNavigator",
     setup(__props) {
       const pageBuilder = usePageBuilderEditor();
-      const treeS = vue.ref();
-      const treeL = vue.ref();
-      vue.watch(
-        () => treeS.value,
-        () => treeS.value && pageBuilder.keyHandlers.addDocumentKeyEventListener(treeS.value)
-      );
-      vue.watch(
-        () => treeL.value,
-        () => treeL.value && pageBuilder.keyHandlers.addDocumentKeyEventListener(treeL.value)
-      );
-      const tabs = [
-        { tabId: "pageS", caption: "Mobile", icon: "phone_iphone" },
-        { tabId: "pageL", caption: "PC", icon: "desktop_windows" }
-      ];
-      const isMultipleScreen = vue.computed(() => {
-        var _a;
-        return (((_a = pageBuilder.model.rootPart.children) == null ? void 0 : _a.length) || 0) >= 2;
-      });
-      const pageS = vue.computed(() => {
-        var _a;
-        return ((_a = (pageBuilder.model.rootPart.children || [])[0]) == null ? void 0 : _a.children) || [];
-      });
-      const pageL = vue.computed(() => {
-        var _a;
-        return ((_a = (pageBuilder.model.rootPart.children || [])[1]) == null ? void 0 : _a.children) || [];
-      });
-      const tabId = vue.computed({
-        get() {
-          const page = pageBuilder.context.getSelectedPage();
-          return page === (pageBuilder.model.rootPart.children || [])[1] ? "pageL" : "pageS";
-        },
-        // @ts-ignore
-        set(value) {
-        }
-      });
+      const tree = vue.ref();
+      vue.watch(() => tree.value, () => tree.value && pageBuilder.keyHandlers.addDocumentKeyEventListener(tree.value));
+      const page = vue.computed(() => pageBuilder.model.rootPart.children || []);
       let savedPartSelection = null;
       const treeDragAndDropPolicy = {
         dropStep: () => 3,
@@ -13945,8 +13976,8 @@ ${_html.style}
       };
       const rowMoved = (event) => {
         var _a, _b, _c, _d, _e, _f;
-        let page = pageBuilder.context.getSelectedPage();
-        const parentPartId = ((_a = event.destParent) == null ? void 0 : _a.partId) || (page == null ? void 0 : page.partId);
+        let page2 = pageBuilder.context.getSelectedPage();
+        const parentPartId = ((_a = event.destParent) == null ? void 0 : _a.partId) || (page2 == null ? void 0 : page2.partId);
         if (!parentPartId)
           return;
         let ok = false;
@@ -14032,92 +14063,25 @@ ${_html.style}
         PageBuilderEditorEvent.off.modelUpdatedByUI(modelUpdateHandler);
       });
       return (_ctx, _cache) => {
-        return isMultipleScreen.value ? (vue.openBlock(), vue.createBlock(vue.unref(bluesea.BSTabSheet), {
-          key: 0,
-          "tab-id": tabId.value,
-          "onUpdate:tabId": _cache[4] || (_cache[4] = ($event) => tabId.value = $event),
-          tabs
-        }, {
-          pageS: vue.withCtx(() => [
-            vue.createElementVNode("div", {
-              ref_key: "treeS",
-              ref: treeS,
-              class: "pb-navigator",
-              tabindex: "0"
-            }, [
-              vue.createVNode(vue.unref(bluesea.BSTree), {
-                expandedRows: expandedRows.value,
-                "onUpdate:expandedRows": [
-                  _cache[0] || (_cache[0] = ($event) => expandedRows.value = $event),
-                  expandedRowsChanged
-                ],
-                selectedRows: selectedRows.value,
-                "onUpdate:selectedRows": [
-                  _cache[1] || (_cache[1] = ($event) => selectedRows.value = $event),
-                  selectedRowsChanged
-                ],
-                data: pageS.value,
-                "enable-drag-and-drop": treeDragAndDropPolicy,
-                "icon-provider": iconProvider,
-                "key-provider": (part) => part.partId,
-                "label-provider": labelProvider,
-                class: "max-w-320",
-                "dont-change-data-when-rowmoved": "",
-                "show-move-button": "",
-                onRowMoved: rowMoved
-              }, null, 8, ["expandedRows", "selectedRows", "data", "key-provider"])
-            ], 512)
-          ]),
-          pageL: vue.withCtx(() => [
-            vue.createElementVNode("div", {
-              ref_key: "treeL",
-              ref: treeL,
-              class: "pb-navigator",
-              tabindex: "0"
-            }, [
-              vue.createVNode(vue.unref(bluesea.BSTree), {
-                expandedRows: expandedRows.value,
-                "onUpdate:expandedRows": [
-                  _cache[2] || (_cache[2] = ($event) => expandedRows.value = $event),
-                  expandedRowsChanged
-                ],
-                selectedRows: selectedRows.value,
-                "onUpdate:selectedRows": [
-                  _cache[3] || (_cache[3] = ($event) => selectedRows.value = $event),
-                  selectedRowsChanged
-                ],
-                data: pageL.value,
-                "enable-drag-and-drop": treeDragAndDropPolicy,
-                "icon-provider": iconProvider,
-                "key-provider": (part) => part.partId,
-                "label-provider": labelProvider,
-                class: "max-w-320",
-                "dont-change-data-when-rowmoved": "",
-                "show-move-button": "",
-                onRowMoved: rowMoved
-              }, null, 8, ["expandedRows", "selectedRows", "data", "key-provider"])
-            ], 512)
-          ]),
-          _: 1
-        }, 8, ["tab-id"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
           vue.createElementVNode("div", {
-            ref_key: "treeS",
-            ref: treeS,
+            ref_key: "tree",
+            ref: tree,
             class: "pb-navigator",
             tabindex: "0"
           }, [
             vue.createVNode(vue.unref(bluesea.BSTree), {
               expandedRows: expandedRows.value,
               "onUpdate:expandedRows": [
-                _cache[5] || (_cache[5] = ($event) => expandedRows.value = $event),
+                _cache[0] || (_cache[0] = ($event) => expandedRows.value = $event),
                 expandedRowsChanged
               ],
               selectedRows: selectedRows.value,
               "onUpdate:selectedRows": [
-                _cache[6] || (_cache[6] = ($event) => selectedRows.value = $event),
+                _cache[1] || (_cache[1] = ($event) => selectedRows.value = $event),
                 selectedRowsChanged
               ],
-              data: pageS.value,
+              data: page.value,
               "enable-drag-and-drop": treeDragAndDropPolicy,
               "icon-provider": iconProvider,
               "key-provider": (part) => part.partId,
@@ -14128,7 +14092,7 @@ ${_html.style}
               onRowMoved: rowMoved
             }, null, 8, ["expandedRows", "selectedRows", "data", "key-provider"])
           ], 512)
-        ]));
+        ]);
       };
     }
   });

package/package.json

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