@g1cloud/page-builder-editor 1.0.0-alpha.1 → 1.0.0-alpha.2

package/README.md

@@ -1,8 +1,21 @@
 # Page Builder
 
-## Editor
+## Viewer
+
+Install packages
+
+```bash
+$ cd packages/viewer
+$ pnpm install
+```
+
+Build
+
+```bash
+$ pnpm build --watch
+```
 
-### Setup
+## Editor
 
 Install packages
 
@@ -11,13 +24,25 @@ $ cd packages/editor
 $ pnpm install
 ```
 
-### Run
+Build
 
-Start server
+```bash
+$ pnpm build --watch
+```
+
+## Demo
+
+Install packages
 
 ```bash
-$ cd packages/editor
-$ pnpm run dev
+$ cd packages/demo
+$ pnpm install
+```
+
+Run
+
+```bash
+$ pnpm dev
 ```
 
 Open browser : http://localhost:5173/

package/css/canvas.scss

@@ -18,6 +18,7 @@ html, body {
 body {
   background-color: white;
   height: 100%;
+  margin: 0;
 }
 
 .pb-canvas-wrapper {

package/css/page-builder-editor.scss

@@ -14,9 +14,7 @@
   width: 100%;
 
   .pb-toolbar {
-    padding: 0 8px;
-    margin: 6px 0;
-
+    margin: 0 -8px;
 
     .pb-tool-button-group {
       &::after {
@@ -41,17 +39,40 @@
   }
 }
 
+.editor-wrapper {
+  height: 100%;
+}
+
+.pb-editor {
+  height: 100%;
+}
+
+.pb-editor-body {
+  padding: 8px 0 0;
+  gap: 8px;
+  height: 1px;
+
+  .bs-tab-sheet {
+    .tab-bar {
+      .tabs {
+        padding-top: 0;
+      }
+    }
+  }
+}
+
 .pb-navigator {
   width: 200px;
-  height: 100%;
-  overflow: auto;
-  border-right: 1px solid $color-border-light;
+  height: 1px;
+  overflow-y: auto;
+  padding: 8px 0;
+  flex-grow: 1;
 }
 
 .pb-sidebar {
   width: 300px;
   overflow: auto;
-  border-left: 1px solid $color-border-light;
+  border: 1px solid $color-border-light;
 
   .pb-sidebar-properties {
     padding: 4px 0;

package/dist/PageBuilderEditor.vue.d.ts

@@ -3,7 +3,9 @@ declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimePr
     title?: string | undefined;
     editMode?: string | undefined;
     pageContent?: any;
-}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+}>, {
+    getLocalDesignPartContent: () => any[] | undefined;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     instanceId?: string | undefined;
     title?: string | undefined;
     editMode?: string | undefined;

package/dist/{PbPropertyEditorImage-BFIqG-bL.js → PbPropertyEditorImage-DA92v7AE.js}

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

package/dist/{PbPropertyEditorProduct--cf9LI2Z.js → PbPropertyEditorProduct-CkydxTwD.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
 import { useModal } from "@g1cloud/bluesea";
-import { u as usePageBuilderEditor, P as PageBuilderEditorEvent } from "./index-BtILenNo.js";
+import { u as usePageBuilderEditor, P as PageBuilderEditorEvent } from "./index-Dwk2ffWe.js";
 const _hoisted_1 = { class: "property-editor property-editor-product flex-align-center" };
 const _hoisted_2 = { class: "label" };
 const _hoisted_3 = ["textContent"];

package/dist/{index-BtILenNo.js → index-Dwk2ffWe.js}

@@ -6628,8 +6628,8 @@ const PageBuilderEditorEvent = {
     requestProducts: (listener) => {
       emitter$1.on("requestProducts", listener);
     },
-    requestLocalPartContentSchedule: (listener) => {
-      emitter$1.on("requestLocalPartContentSchedule", listener);
+    requestLocalMarketingPartSchedule: (listener) => {
+      emitter$1.on("requestLocalMarketingPartSchedule", listener);
     }
   },
   off: {
@@ -6645,8 +6645,8 @@ const PageBuilderEditorEvent = {
     requestProducts: (listener) => {
       emitter$1.off("requestProducts", listener);
     },
-    requestLocalPartContentSchedule: (listener) => {
-      emitter$1.off("requestLocalPartContentSchedule", listener);
+    requestLocalMarketingPartSchedule: (listener) => {
+      emitter$1.off("requestLocalMarketingPartSchedule", listener);
     }
   },
   emit: {
@@ -6662,8 +6662,8 @@ const PageBuilderEditorEvent = {
     requestProducts: (param) => {
       emitter$1.emit("requestProducts", param);
     },
-    requestLocalPartContentSchedule: (param) => {
-      emitter$1.emit("requestLocalPartContentSchedule", param);
+    requestLocalMarketingPartSchedule: (param) => {
+      emitter$1.emit("requestLocalMarketingPartSchedule", param);
     }
   }
 };
@@ -7268,6 +7268,11 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     pageBuilderViewer.instanceId = props.instanceId;
     providePageBuilderViewer(pageBuilderViewer);
     const page = computed(() => pageBuilderViewer.model.rootPart.value.children && pageBuilderViewer.model.rootPart.value.children[0]);
+    onMounted(() => {
+      if (props.pageContent) {
+        pageBuilderViewer.render(props.pageContent);
+      }
+    });
     watch(
       () => props.pageContent,
       (pageContent) => {
@@ -7342,12 +7347,12 @@ const partToJsonObject = (part) => {
   }
   return object;
 };
-const partsFromJsonString = (jsonString) => {
+const partsFromJsonString = (jsonString, keepPartId = false) => {
   const objects = JSON.parse(jsonString);
   const parts = [];
   if (objects && objects instanceof Array) {
     objects.forEach((object) => {
-      const part = partFromJsonObject(object);
+      const part = partFromJsonObject(object, keepPartId);
       if (part) {
         parts.push(part);
       }
@@ -7355,10 +7360,13 @@ const partsFromJsonString = (jsonString) => {
   }
   return parts;
 };
-const partFromJsonObject = (object) => {
+const partFromJsonObject = (object, keepPartId = false) => {
   const part = createPart(object.partType, object.partName);
   if (!part)
     return;
+  if (keepPartId && object.partId) {
+    part.partId = object.partId;
+  }
   if (object.properties) {
     part.properties = {};
     for (const name in object.properties) {
@@ -7369,7 +7377,7 @@ const partFromJsonObject = (object) => {
     part.children = [];
     object.children.forEach((childJson) => {
       var _a;
-      const childPart = partFromJsonObject(childJson);
+      const childPart = partFromJsonObject(childJson, keepPartId);
       if (childPart) {
         childPart.parent = part;
         (_a = part.children) == null ? void 0 : _a.push(childPart);
@@ -7564,8 +7572,8 @@ class Model2 {
     });
     return parts;
   }
-  parsePageModel(json, removePartId) {
-    return partsFromJsonString(json);
+  parsePageModel(json, keepPartId = false) {
+    return partsFromJsonString(json, keepPartId);
   }
   moveElements(partId, destPartId, destIndex, update) {
     var _a;
@@ -7677,7 +7685,7 @@ class Model2 {
       }
     }
     node.setAttribute(PART_NAME_KEY, part.partName);
-    node.setAttribute(PART_ID_KEY, getNewPartId());
+    node.setAttribute(PART_ID_KEY, part.partId || getNewPartId());
     if (part.children) {
       const childNodes = part.children.map((child) => this.createElement(child));
       node.insert(0, childNodes);
@@ -7761,6 +7769,20 @@ class PartManager {
       }
     }
   }
+  getLocalDesignPartPropertyDefinitions(partName) {
+    let properties;
+    const partDef = this.getPartDefinition(partName);
+    if (!partDef || !partDef.propertyGroups)
+      return;
+    for (const group of partDef.propertyGroups) {
+      for (const property of group.properties) {
+        if (property.localized) {
+          properties = [...properties || [], property];
+        }
+      }
+    }
+    return properties;
+  }
   createPartComponent(part) {
     if (part) {
       const def = this.getPartDefinition(part.partName);
@@ -7842,8 +7864,8 @@ const defaultPartPropertyEditors = () => {
     "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-DNdXl-Tr.js")),
     "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-BMeNUGm8.js")),
     "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-BJovN1su.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-BFIqG-bL.js")),
-    "product": () => defineAsyncComponent(() => import("./PbPropertyEditorProduct--cf9LI2Z.js"))
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-DA92v7AE.js")),
+    "product": () => defineAsyncComponent(() => import("./PbPropertyEditorProduct-CkydxTwD.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -8835,9 +8857,9 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
       var _a, _b, _c;
       if (["static"].includes(((_a = props.part.properties) == null ? void 0 : _a.sectionType) || ""))
         return true;
-      if (pageBuilder.editMode === "local" && ["globalPart"].includes(((_b = props.part.properties) == null ? void 0 : _b.sectionType) || ""))
+      if (pageBuilder.editMode === "local" && ["GlobalDesignPart"].includes(((_b = props.part.properties) == null ? void 0 : _b.sectionType) || ""))
         return true;
-      if (pageBuilder.editMode === "global" && ["localPart", "scheduledLocalPart"].includes(((_c = props.part.properties) == null ? void 0 : _c.sectionType) || ""))
+      if (pageBuilder.editMode === "global" && ["LocalDesignPart", "LocalMarketingPart"].includes(((_c = props.part.properties) == null ? void 0 : _c.sectionType) || ""))
         return true;
       return false;
     });
@@ -12482,7 +12504,7 @@ const _PastePartCommand = class _PastePartCommand {
     const { target, index = 0 } = findInsertTargetAndIndex(pageBuilder);
     if (target) {
       const json = await navigator.clipboard.readText();
-      const parts = pageBuilder.model.parsePageModel(json, true);
+      const parts = pageBuilder.model.parsePageModel(json);
       if (parts) {
         insertParts(pageBuilder, target.partId, index, parts, false);
       }
@@ -13047,9 +13069,13 @@ class PageBuilderEditorImpl {
     this.model.rootPart.pageBuilderId = this.instanceId;
     let parts;
     if (content) {
-      const page = partFromJsonObject(content);
-      if (page) {
-        parts = [page, page];
+      for (const p of content) {
+        const page = partFromJsonObject(p, true);
+        if (page) {
+          if (!parts)
+            parts = [];
+          parts.push(page);
+        }
       }
     }
     if (!parts) {
@@ -13213,7 +13239,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const canvasStyle = '.pb-page {\n  margin: 0 auto;\n  margin-top: 20px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-page-content.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 5px;\n}\n.pb-page * {\n  box-sizing: border-box;\n}\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\n.pb-add-widget-button button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  padding: 8px;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n.pb-section {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n  background-color: #fff;\n}\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-section.selected {\n  outline: 1px solid #e67e22;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-section.pb-section-static {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n}\n.pb-section.pb-section-static:after {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n}\n.pb-section-static .pb-widget {\n  outline: none;\n}\n.pb-block {\n  display: flex;\n  min-width: 1px;\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n  outline: 1px dashed #ccc;\n}\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-block.selected {\n  outline: 1px solid #8e44ad;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget {\n  position: relative;\n  outline: 1px dashed #ccc;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-widget.selected {\n  outline: 2px solid #27ae60;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-widget .pan-handle {\n  position: absolute;\n  left: -6px;\n  top: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: move;\n}\n.pb-widget .resize-handle {\n  position: absolute;\n  right: -6px;\n  bottom: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: nwse-resize;\n}\n.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-text-widget .text {\n  color: #333;\n}\n.pb-text-widget.empty .text {\n  color: #999;\n}\n.pb-image-widget {\n  width: 100%;\n}\n.pb-image-widget .image {\n  width: 100%;\n}\n.pb-image-widget .empty {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-image-widget .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-product-list-widget {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.pb-product-list-widget .product {\n  width: 95%;\n  margin: 0 auto;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n.pb-product-list-widget img {\n  width: 100%;\n}\n.pb-product-list-widget .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n.pb-product-list-widget .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n.pb-product-list-widget .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-product-list-widget .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 200px;\n  vertical-align: middle;\n}\n.pb-page .mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n.pb-page .pc .pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n.pb-login-widget h3 {\n  font-size: 32px;\n  font-weight: bold;\n  color: #ccc;\n  line-height: 200px;\n  vertical-align: middle;\n}\n.font-icon {\n  font-family: Material Symbols Outlined, monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\nhtml, body {\n  font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n  font-size: 12px;\n}\nbody {\n  background-color: white;\n  height: 100%;\n}\n.pb-canvas-wrapper {\n  padding: 32px 40px 56px 40px;\n  height: 100%;\n  background-color: #aaa;\n  overflow: auto;\n}\n.pb-canvas-wrapper .pb-canvas {\n  display: flex;\n  flex-direction: row;\n  transform-origin: top left;\n  width: fit-content;\n  min-width: 40px;\n  min-height: 40px;\n  margin: 0 auto;\n}\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\n}\n.pb-add-section-handle {\n  position: relative;\n  text-align: center;\n  cursor: pointer;\n  z-index: 5;\n  height: 0;\n}\n.pb-add-section-handle.top::before, .pb-add-section-handle.bottom::before, .pb-add-section-handle.middle::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n.pb-add-section-handle.bottom {\n  left: 50%;\n  bottom: -32px;\n}\n.pb-add-section-handle:hover.top::before, .pb-add-section-handle:hover.bottom::before, .pb-add-section-handle:hover.middle::before,\n.pb-add-section-handle:hover > i {\n  opacity: 1;\n}\n.pb-add-section-handle > i {\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: -20px;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}\n.pb-button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  vertical-align: middle;\n}\n.pb-guideline {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.pb-guideline.selected {\n  z-index: 3;\n}\n.pb-guideline.preselect {\n  z-index: 4;\n}';
+const canvasStyle = '.pb-page {\n  margin: 0 auto;\n  margin-top: 20px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-page-content.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 5px;\n}\n.pb-page * {\n  box-sizing: border-box;\n}\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\n.pb-add-widget-button button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  padding: 8px;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n.pb-section {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n  background-color: #fff;\n}\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-section.selected {\n  outline: 1px solid #e67e22;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-section.pb-section-static {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n}\n.pb-section.pb-section-static:after {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n}\n.pb-section-static .pb-widget {\n  outline: none;\n}\n.pb-block {\n  display: flex;\n  min-width: 1px;\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n  outline: 1px dashed #ccc;\n}\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-block.selected {\n  outline: 1px solid #8e44ad;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget {\n  position: relative;\n  outline: 1px dashed #ccc;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-widget.selected {\n  outline: 2px solid #27ae60;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-widget .pan-handle {\n  position: absolute;\n  left: -6px;\n  top: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: move;\n}\n.pb-widget .resize-handle {\n  position: absolute;\n  right: -6px;\n  bottom: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: nwse-resize;\n}\n.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-text-widget .text {\n  color: #333;\n}\n.pb-text-widget.empty .text {\n  color: #999;\n}\n.pb-image-widget {\n  width: 100%;\n}\n.pb-image-widget .image {\n  width: 100%;\n}\n.pb-image-widget .empty {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-image-widget .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-product-list-widget {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n.pb-product-list-widget .product-wrapper .product {\n  width: 95%;\n  margin: 0 auto;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-product-list-widget .product-wrapper .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 200px;\n  vertical-align: middle;\n}\n@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n.pb-login-widget h3 {\n  font-size: 32px;\n  font-weight: bold;\n  color: #ccc;\n  line-height: 200px;\n  vertical-align: middle;\n}\n.font-icon {\n  font-family: Material Symbols Outlined, monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\nhtml, body {\n  font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n  font-size: 12px;\n}\nbody {\n  background-color: white;\n  height: 100%;\n  margin: 0;\n}\n.pb-canvas-wrapper {\n  padding: 32px 40px 56px 40px;\n  height: 100%;\n  background-color: #aaa;\n  overflow: auto;\n}\n.pb-canvas-wrapper .pb-canvas {\n  display: flex;\n  flex-direction: row;\n  transform-origin: top left;\n  width: fit-content;\n  min-width: 40px;\n  min-height: 40px;\n  margin: 0 auto;\n}\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\n}\n.pb-add-section-handle {\n  position: relative;\n  text-align: center;\n  cursor: pointer;\n  z-index: 5;\n  height: 0;\n}\n.pb-add-section-handle.top::before, .pb-add-section-handle.bottom::before, .pb-add-section-handle.middle::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n.pb-add-section-handle.bottom {\n  left: 50%;\n  bottom: -32px;\n}\n.pb-add-section-handle:hover.top::before, .pb-add-section-handle:hover.bottom::before, .pb-add-section-handle:hover.middle::before,\n.pb-add-section-handle:hover > i {\n  opacity: 1;\n}\n.pb-add-section-handle > i {\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: -20px;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}\n.pb-button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  vertical-align: middle;\n}\n.pb-guideline {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.pb-guideline.selected {\n  z-index: 3;\n}\n.pb-guideline.preselect {\n  z-index: 4;\n}';
 const _hoisted_1$a = { class: "pb-canvas-frame" };
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "PbCanvasFrame",
@@ -13575,10 +13601,10 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       var _a, _b, _c, _d;
       if (pageBuilder.editMode === "local" && props.selectedParts.length > 0) {
         const section = pageBuilder.partManager.findNearestSection(props.selectedParts[0]);
-        if (section && ["globalPart"].includes(((_a = section.properties) == null ? void 0 : _a.sectionType) || "")) {
+        if (section && ["GlobalDesignPart"].includes(((_a = section.properties) == null ? void 0 : _a.sectionType) || "")) {
           return;
         }
-        if (section && ["localPart", "scheduledLocalPart"].includes(((_b = section.properties) == null ? void 0 : _b.sectionType) || "")) {
+        if (section && ["LocalDesignPart", "LocalMarketingPart"].includes(((_b = section.properties) == null ? void 0 : _b.sectionType) || "")) {
           if (!props.property.localized) {
             return;
           }
@@ -13586,7 +13612,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       }
       if (pageBuilder.editMode === "template" && props.selectedParts.length > 0) {
         const section = pageBuilder.partManager.findNearestSection(props.selectedParts[0]);
-        if (section && ["localPart", "scheduledLocalPart"].includes(((_c = section.properties) == null ? void 0 : _c.sectionType) || "")) {
+        if (section && ["LocalDesignPart", "LocalMarketingPart"].includes(((_c = section.properties) == null ? void 0 : _c.sectionType) || "")) {
           if (props.property.localized) {
             return;
           }
@@ -13633,10 +13659,10 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       var _a, _b, _c, _d, _e;
       if (pageBuilder.editMode === "local" && props.selectedParts.length > 0) {
         const section = pageBuilder.partManager.findNearestSection(props.selectedParts[0]);
-        if (section && ["globalPart"].includes(((_a = section.properties) == null ? void 0 : _a.sectionType) || "")) {
+        if (section && ["GlobalDesignPart"].includes(((_a = section.properties) == null ? void 0 : _a.sectionType) || "")) {
           return;
         }
-        if (section && ["localPart", "scheduledLocalPart"].includes(((_b = section.properties) == null ? void 0 : _b.sectionType) || "")) {
+        if (section && ["LocalDesignPart", "LocalMarketingPart"].includes(((_b = section.properties) == null ? void 0 : _b.sectionType) || "")) {
           if (!props.group.localized) {
             return;
           }
@@ -13644,7 +13670,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       }
       if (pageBuilder.editMode === "template" && props.selectedParts.length > 0) {
         const section = pageBuilder.partManager.findNearestSection(props.selectedParts[0]);
-        if (section && ["localPart", "scheduledLocalPart"].includes(((_c = section.properties) == null ? void 0 : _c.sectionType) || "")) {
+        if (section && ["LocalDesignPart", "LocalMarketingPart"].includes(((_c = section.properties) == null ? void 0 : _c.sectionType) || "")) {
           if (props.group.localized) {
             return;
           }
@@ -13685,7 +13711,7 @@ const _hoisted_6 = [
   _hoisted_5
 ];
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  __name: "PbPropertyLocalPart",
+  __name: "PbPropertyLocalMarketingPart",
   props: {
     selectedPart: {}
   },
@@ -13697,18 +13723,19 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const endDt = ref("");
     const pageBuilder = usePageBuilderEditor();
     const selectSchedule = () => {
-      PageBuilderEditorEvent.emit.requestLocalPartContentSchedule({
+      PageBuilderEditorEvent.emit.requestLocalMarketingPartSchedule({
         pageBuilderId: pageBuilder.instanceId,
+        partId: props.selectedPart.partId,
         callback: (schedule) => {
           startDt.value = schedule.startDt;
           endDt.value = schedule.endDt;
           if (props.selectedPart && props.selectedPart.isSection()) {
             clearContents(props.selectedPart);
-            if (schedule.content) {
-              for (const id in schedule.content) {
-                const part = findWidget(props.selectedPart, id);
+            if (schedule.data) {
+              for (const partId in schedule.data) {
+                const part = findWidget(props.selectedPart, partId);
                 if (part) {
-                  Object.entries(schedule.content[id]).forEach(([key, value]) => {
+                  Object.entries(schedule.data[partId]).forEach(([key, value]) => {
                     if (!value)
                       return;
                     part.properties = part.properties || {};
@@ -13721,15 +13748,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         }
       });
     };
-    const findWidget = (part, id) => {
-      var _a;
+    const findWidget = (part, partId) => {
       if (!part)
         return;
-      if (((_a = part.properties) == null ? void 0 : _a.id) === id)
+      if (part.partId === partId)
         return part;
       if (part.children) {
         for (const child of part.children) {
-          const found = findWidget(child, id);
+          const found = findWidget(child, partId);
           if (found)
             return found;
         }
@@ -13790,21 +13816,21 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         return [];
       }
     });
-    const showScheduledLocalPart = computed(() => {
+    const showLocalMarketingPart = computed(() => {
       var _a;
       if (pageBuilder.editMode === "template")
         return false;
       if (!selectedParts.length || selectedParts.length !== 1)
         return false;
       const part = selectedParts[0];
-      if (part.isSection() && ((_a = part.properties) == null ? void 0 : _a.sectionType) === "scheduledLocalPart") {
+      if (part.isSection() && ((_a = part.properties) == null ? void 0 : _a.sectionType) === "LocalMarketingPart") {
         return true;
       }
       return false;
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$2, [
-        showScheduledLocalPart.value ? (openBlock(), createBlock$1(_sfc_main$3, {
+        showLocalMarketingPart.value ? (openBlock(), createBlock$1(_sfc_main$3, {
           key: 0,
           "selected-part": unref(selectedParts)[0]
         }, null, 8, ["selected-part"])) : createCommentVNode("", true),
@@ -13844,7 +13870,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     editMode: {},
     pageContent: {}
   },
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
     const modal = useModal();
     const pageBuilderEditor = createPageBuilderEditor();
@@ -13861,6 +13887,59 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     watch(() => props.pageContent, (pageContent) => pageContent && pageBuilderEditor.initData(pageContent));
     const colorHistory = ref([]);
     provide("colorHistory", colorHistory);
+    const getLocalDesignPartContent = () => {
+      let content;
+      if (pageBuilderEditor.model.rootPart) {
+        content = doGetLocalDesignPartContent(pageBuilderEditor.model.rootPart);
+      }
+      return content;
+    };
+    const doGetLocalDesignPartContent = (part) => {
+      var _a;
+      let content;
+      if (((_a = part.properties) == null ? void 0 : _a.sectionType) && ["LocalDesignPart", "LocalMarketingPart"].includes(part.properties.sectionType)) {
+        const properties = getLocalDesignPartProperties(part);
+        if (properties) {
+          if (!content)
+            content = [];
+          content.push({ partId: part.partId, data: properties });
+        }
+      }
+      if (part.children) {
+        for (const child of part.children) {
+          const childContent = doGetLocalDesignPartContent(child);
+          if (childContent)
+            content = [...content || [], ...childContent];
+        }
+      }
+      return content;
+    };
+    const getLocalDesignPartProperties = (part) => {
+      let properties;
+      if (part.isWidget()) {
+        const defs = pageBuilderEditor.partManager.getLocalDesignPartPropertyDefinitions(part.partName);
+        if (defs) {
+          const data = {};
+          for (const def of defs) {
+            if (part.properties)
+              data[def.propertyName] = part.properties[def.propertyName];
+          }
+          properties = { [part.partId]: data };
+        }
+      }
+      if (part.children) {
+        for (const child of part.children) {
+          const childProperties = getLocalDesignPartProperties(child);
+          if (childProperties) {
+            properties = { ...properties, ...childProperties };
+          }
+        }
+      }
+      return properties;
+    };
+    __expose({
+      getLocalDesignPartContent
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createVNode(_sfc_main$7),

package/dist/model/event.d.ts

@@ -12,8 +12,9 @@ export type PageBuilderEditorEventType = {
         itemCodes: string;
         callback: (products: any[]) => void;
     };
-    requestLocalPartContentSchedule: {
+    requestLocalMarketingPartSchedule: {
         pageBuilderId?: string;
+        partId: string;
         callback: (schedule: any) => void;
     };
 };
@@ -30,8 +31,9 @@ export declare const PageBuilderEditorEvent: {
             itemCodes: string;
             callback: (products: any[]) => void;
         }) => void) => void;
-        requestLocalPartContentSchedule: (listener: (param: {
+        requestLocalMarketingPartSchedule: (listener: (param: {
             pageBuilderId?: string;
+            partId: string;
             callback: (schedule: any) => void;
         }) => void) => void;
     };
@@ -47,7 +49,9 @@ export declare const PageBuilderEditorEvent: {
             itemCodes: string;
             callback: (products: any[]) => void;
         }) => void) => void;
-        requestLocalPartContentSchedule: (listener: (param: {
+        requestLocalMarketingPartSchedule: (listener: (param: {
+            pageBuilderId?: string;
+            partId: string;
             callback: (schedule: any) => void;
         }) => void) => void;
     };
@@ -63,8 +67,9 @@ export declare const PageBuilderEditorEvent: {
             itemCodes: string;
             callback: (products: any[]) => void;
         }) => void;
-        requestLocalPartContentSchedule: (param: {
+        requestLocalMarketingPartSchedule: (param: {
             pageBuilderId?: string;
+            partId: string;
             callback: (schedule: any) => void;
         }) => void;
     };

package/dist/model/model.d.ts

@@ -7,7 +7,7 @@ export declare const BLOCK_TYPE = "Block";
 export declare const WIDGET_TYPE = "Widget";
 export declare const getNewPartId: () => string;
 export declare const partsToJsonString: (parts: IPart[]) => string;
-export declare const partFromJsonObject: (object: any) => IPart | undefined;
+export declare const partFromJsonObject: (object: any, keepPartId?: boolean) => IPart | undefined;
 export declare const createPart: (partType: string, partName: string, properties?: Record<string, string>) => IPart | undefined;
 export declare class Model {
     yjsDoc: Y.Doc;
@@ -20,7 +20,7 @@ export declare class Model {
     findPartById(partId?: string): IPart | undefined;
     findPartsByIds(partIds: string[]): IPart[];
     serializePageModel: (partIds: string[]) => string;
-    parsePageModel(json: string, removePartId: boolean): IPart[] | undefined;
+    parsePageModel(json: string, keepPartId?: boolean): IPart[] | undefined;
     moveElements(partId: string, destPartId: string, destIndex: number, update?: PartUpdateParam[]): void;
     isMobilePart(part: IPart): boolean;
     isPcPart(part: IPart): boolean;

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

@@ -42,7 +42,7 @@ export declare class PageBuilderEditorImpl implements PageBuilderEditor {
     scale: Ref<number>;
     constructor();
     registerPlugin(plugin: PageBuilderPlugin): void;
-    initData(content?: any): void;
+    initData(content?: any[]): void;
     undo(): void;
     redo(): void;
     zoom(scale: number): void;

package/dist/model/part-manager.d.ts

@@ -15,6 +15,7 @@ export declare class PartManager {
     registerPartDefinitions(partDefinitions: Record<string, PartDefinition>): void;
     getPartDefinition(partName: string): PartDefinition | undefined;
     getPropertyDefinition(partName: string, propertyName: string): PartProperty | undefined;
+    getLocalDesignPartPropertyDefinitions(partName: string): PartProperty[] | undefined;
     createPartComponent(part?: IPart): Component | undefined;
     createPartComponents(parts?: IPart[]): PartComponent[];
     registerPartPropertyGroupEditors(editors: Record<string, PartPropertyGroupEditor>): void;

package/dist/page-builder-editor.js

@@ -1,4 +1,4 @@
-import { B, a, M, b, c, _, P, d, e, f, g, h, i, R, j, S, k, W, l, m, n, o, p, q } from "./index-BtILenNo.js";
+import { B, a, M, b, c, _, P, d, e, f, g, h, i, R, j, S, k, W, l, m, n, o, p, q } from "./index-Dwk2ffWe.js";
 export {
   B as BLOCK_TYPE,
   a as Block,

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

@@ -6630,8 +6630,8 @@ var __publicField = (obj, key, value) => {
       requestProducts: (listener) => {
         emitter$1.on("requestProducts", listener);
       },
-      requestLocalPartContentSchedule: (listener) => {
-        emitter$1.on("requestLocalPartContentSchedule", listener);
+      requestLocalMarketingPartSchedule: (listener) => {
+        emitter$1.on("requestLocalMarketingPartSchedule", listener);
       }
     },
     off: {
@@ -6647,8 +6647,8 @@ var __publicField = (obj, key, value) => {
       requestProducts: (listener) => {
         emitter$1.off("requestProducts", listener);
       },
-      requestLocalPartContentSchedule: (listener) => {
-        emitter$1.off("requestLocalPartContentSchedule", listener);
+      requestLocalMarketingPartSchedule: (listener) => {
+        emitter$1.off("requestLocalMarketingPartSchedule", listener);
       }
     },
     emit: {
@@ -6664,8 +6664,8 @@ var __publicField = (obj, key, value) => {
       requestProducts: (param) => {
         emitter$1.emit("requestProducts", param);
       },
-      requestLocalPartContentSchedule: (param) => {
-        emitter$1.emit("requestLocalPartContentSchedule", param);
+      requestLocalMarketingPartSchedule: (param) => {
+        emitter$1.emit("requestLocalMarketingPartSchedule", param);
       }
     }
   };
@@ -7270,6 +7270,11 @@ var __publicField = (obj, key, value) => {
       pageBuilderViewer.instanceId = props.instanceId;
       providePageBuilderViewer(pageBuilderViewer);
       const page = vue.computed(() => pageBuilderViewer.model.rootPart.value.children && pageBuilderViewer.model.rootPart.value.children[0]);
+      vue.onMounted(() => {
+        if (props.pageContent) {
+          pageBuilderViewer.render(props.pageContent);
+        }
+      });
       vue.watch(
         () => props.pageContent,
         (pageContent) => {
@@ -7344,12 +7349,12 @@ var __publicField = (obj, key, value) => {
     }
     return object;
   };
-  const partsFromJsonString = (jsonString) => {
+  const partsFromJsonString = (jsonString, keepPartId = false) => {
     const objects = JSON.parse(jsonString);
     const parts = [];
     if (objects && objects instanceof Array) {
       objects.forEach((object) => {
-        const part = partFromJsonObject(object);
+        const part = partFromJsonObject(object, keepPartId);
         if (part) {
           parts.push(part);
         }
@@ -7357,10 +7362,13 @@ var __publicField = (obj, key, value) => {
     }
     return parts;
   };
-  const partFromJsonObject = (object) => {
+  const partFromJsonObject = (object, keepPartId = false) => {
     const part = createPart(object.partType, object.partName);
     if (!part)
       return;
+    if (keepPartId && object.partId) {
+      part.partId = object.partId;
+    }
     if (object.properties) {
       part.properties = {};
       for (const name in object.properties) {
@@ -7371,7 +7379,7 @@ var __publicField = (obj, key, value) => {
       part.children = [];
       object.children.forEach((childJson) => {
         var _a;
-        const childPart = partFromJsonObject(childJson);
+        const childPart = partFromJsonObject(childJson, keepPartId);
         if (childPart) {
           childPart.parent = part;
           (_a = part.children) == null ? void 0 : _a.push(childPart);
@@ -7566,8 +7574,8 @@ var __publicField = (obj, key, value) => {
       });
       return parts;
     }
-    parsePageModel(json, removePartId) {
-      return partsFromJsonString(json);
+    parsePageModel(json, keepPartId = false) {
+      return partsFromJsonString(json, keepPartId);
     }
     moveElements(partId, destPartId, destIndex, update) {
       var _a;
@@ -7679,7 +7687,7 @@ var __publicField = (obj, key, value) => {
         }
       }
       node.setAttribute(PART_NAME_KEY, part.partName);
-      node.setAttribute(PART_ID_KEY, getNewPartId());
+      node.setAttribute(PART_ID_KEY, part.partId || getNewPartId());
       if (part.children) {
         const childNodes = part.children.map((child) => this.createElement(child));
         node.insert(0, childNodes);
@@ -7763,6 +7771,20 @@ var __publicField = (obj, key, value) => {
         }
       }
     }
+    getLocalDesignPartPropertyDefinitions(partName) {
+      let properties;
+      const partDef = this.getPartDefinition(partName);
+      if (!partDef || !partDef.propertyGroups)
+        return;
+      for (const group of partDef.propertyGroups) {
+        for (const property of group.properties) {
+          if (property.localized) {
+            properties = [...properties || [], property];
+          }
+        }
+      }
+      return properties;
+    }
     createPartComponent(part) {
       if (part) {
         const def = this.getPartDefinition(part.partName);
@@ -8837,9 +8859,9 @@ var __publicField = (obj, key, value) => {
         var _a, _b, _c;
         if (["static"].includes(((_a = props.part.properties) == null ? void 0 : _a.sectionType) || ""))
           return true;
-        if (pageBuilder.editMode === "local" && ["globalPart"].includes(((_b = props.part.properties) == null ? void 0 : _b.sectionType) || ""))
+        if (pageBuilder.editMode === "local" && ["GlobalDesignPart"].includes(((_b = props.part.properties) == null ? void 0 : _b.sectionType) || ""))
           return true;
-        if (pageBuilder.editMode === "global" && ["localPart", "scheduledLocalPart"].includes(((_c = props.part.properties) == null ? void 0 : _c.sectionType) || ""))
+        if (pageBuilder.editMode === "global" && ["LocalDesignPart", "LocalMarketingPart"].includes(((_c = props.part.properties) == null ? void 0 : _c.sectionType) || ""))
           return true;
         return false;
       });
@@ -12484,7 +12506,7 @@ var __publicField = (obj, key, value) => {
       const { target, index = 0 } = findInsertTargetAndIndex(pageBuilder);
       if (target) {
         const json = await navigator.clipboard.readText();
-        const parts = pageBuilder.model.parsePageModel(json, true);
+        const parts = pageBuilder.model.parsePageModel(json);
         if (parts) {
           insertParts(pageBuilder, target.partId, index, parts, false);
         }
@@ -13049,9 +13071,13 @@ var __publicField = (obj, key, value) => {
       this.model.rootPart.pageBuilderId = this.instanceId;
       let parts;
       if (content) {
-        const page = partFromJsonObject(content);
-        if (page) {
-          parts = [page, page];
+        for (const p of content) {
+          const page = partFromJsonObject(p, true);
+          if (page) {
+            if (!parts)
+              parts = [];
+            parts.push(page);
+          }
         }
       }
       if (!parts) {
@@ -13215,7 +13241,7 @@ var __publicField = (obj, key, value) => {
       };
     }
   });
-  const canvasStyle = '.pb-page {\n  margin: 0 auto;\n  margin-top: 20px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-page-content.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 5px;\n}\n.pb-page * {\n  box-sizing: border-box;\n}\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\n.pb-add-widget-button button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  padding: 8px;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n.pb-section {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n  background-color: #fff;\n}\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-section.selected {\n  outline: 1px solid #e67e22;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-section.pb-section-static {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n}\n.pb-section.pb-section-static:after {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n}\n.pb-section-static .pb-widget {\n  outline: none;\n}\n.pb-block {\n  display: flex;\n  min-width: 1px;\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n  outline: 1px dashed #ccc;\n}\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-block.selected {\n  outline: 1px solid #8e44ad;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget {\n  position: relative;\n  outline: 1px dashed #ccc;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-widget.selected {\n  outline: 2px solid #27ae60;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-widget .pan-handle {\n  position: absolute;\n  left: -6px;\n  top: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: move;\n}\n.pb-widget .resize-handle {\n  position: absolute;\n  right: -6px;\n  bottom: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: nwse-resize;\n}\n.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-text-widget .text {\n  color: #333;\n}\n.pb-text-widget.empty .text {\n  color: #999;\n}\n.pb-image-widget {\n  width: 100%;\n}\n.pb-image-widget .image {\n  width: 100%;\n}\n.pb-image-widget .empty {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-image-widget .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-product-list-widget {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.pb-product-list-widget .product {\n  width: 95%;\n  margin: 0 auto;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n.pb-product-list-widget img {\n  width: 100%;\n}\n.pb-product-list-widget .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n.pb-product-list-widget .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n.pb-product-list-widget .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-product-list-widget .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 200px;\n  vertical-align: middle;\n}\n.pb-page .mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n.pb-page .pc .pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n.pb-login-widget h3 {\n  font-size: 32px;\n  font-weight: bold;\n  color: #ccc;\n  line-height: 200px;\n  vertical-align: middle;\n}\n.font-icon {\n  font-family: Material Symbols Outlined, monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\nhtml, body {\n  font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n  font-size: 12px;\n}\nbody {\n  background-color: white;\n  height: 100%;\n}\n.pb-canvas-wrapper {\n  padding: 32px 40px 56px 40px;\n  height: 100%;\n  background-color: #aaa;\n  overflow: auto;\n}\n.pb-canvas-wrapper .pb-canvas {\n  display: flex;\n  flex-direction: row;\n  transform-origin: top left;\n  width: fit-content;\n  min-width: 40px;\n  min-height: 40px;\n  margin: 0 auto;\n}\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\n}\n.pb-add-section-handle {\n  position: relative;\n  text-align: center;\n  cursor: pointer;\n  z-index: 5;\n  height: 0;\n}\n.pb-add-section-handle.top::before, .pb-add-section-handle.bottom::before, .pb-add-section-handle.middle::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n.pb-add-section-handle.bottom {\n  left: 50%;\n  bottom: -32px;\n}\n.pb-add-section-handle:hover.top::before, .pb-add-section-handle:hover.bottom::before, .pb-add-section-handle:hover.middle::before,\n.pb-add-section-handle:hover > i {\n  opacity: 1;\n}\n.pb-add-section-handle > i {\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: -20px;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}\n.pb-button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  vertical-align: middle;\n}\n.pb-guideline {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.pb-guideline.selected {\n  z-index: 3;\n}\n.pb-guideline.preselect {\n  z-index: 4;\n}';
+  const canvasStyle = '.pb-page {\n  margin: 0 auto;\n  margin-top: 20px;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-page .pb-page-content.selected {\n  outline: 2px solid #4998f8;\n  outline-offset: 5px;\n}\n.pb-page * {\n  box-sizing: border-box;\n}\n.pb-add-widget-button {\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  position: relative;\n}\n.pb-add-widget-button button {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  padding: 8px;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n.pb-add-widget-button button:hover {\n  background-color: #eeeeee;\n}\n.pb-add-widget-button .icon {\n  font-size: 1rem;\n  vertical-align: middle;\n}\n.pb-add-widget-button .text {\n  font-size: 1rem;\n  vertical-align: middle;\n  margin-left: 0.4rem;\n}\n.pb-section {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  outline: 1px dashed #ccc;\n  background-color: #fff;\n}\n.pb-section:hover:not(:has(.pb-block:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-section.selected {\n  outline: 1px solid #e67e22;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-section.pb-section-static {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n}\n.pb-section.pb-section-static:after {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.2);\n}\n.pb-section-static .pb-widget {\n  outline: none;\n}\n.pb-block {\n  display: flex;\n  min-width: 1px;\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n  outline: 1px dashed #ccc;\n}\n.pb-block:hover:not(:has(.pb-widget:hover)) {\n  background-color: #f0f0f0;\n}\n.pb-block.selected {\n  outline: 1px solid #8e44ad;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget {\n  position: relative;\n  outline: 1px dashed #ccc;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n.pb-widget.selected {\n  outline: 2px solid #27ae60;\n  outline-offset: 1px;\n  z-index: 999;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-widget .pan-handle {\n  position: absolute;\n  left: -6px;\n  top: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: move;\n}\n.pb-widget .resize-handle {\n  position: absolute;\n  right: -6px;\n  bottom: -6px;\n  width: 12px;\n  height: 12px;\n  background-color: #27ae60;\n  cursor: nwse-resize;\n}\n.pb-widget {\n  position: relative;\n  background-position: 50% 50%;\n  background-repeat: no-repeat;\n  background-size: cover;\n  width: 100%;\n}\n.pb-widget .children {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.pb-text-widget {\n  width: 100%;\n  height: fit-content;\n}\n.pb-text-widget .text {\n  color: #333;\n}\n.pb-text-widget.empty .text {\n  color: #999;\n}\n.pb-image-widget {\n  width: 100%;\n}\n.pb-image-widget .image {\n  width: 100%;\n}\n.pb-image-widget .empty {\n  height: 100px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-image-widget .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 100px;\n  vertical-align: middle;\n}\n.pb-product-list-widget {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n}\n.pb-product-list-widget .product-wrapper {\n  width: 25%;\n}\n.pb-product-list-widget .product-wrapper .product {\n  width: 95%;\n  margin: 0 auto;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n.pb-product-list-widget .product-wrapper img {\n  width: 100%;\n}\n.pb-product-list-widget .product-wrapper .name {\n  margin-top: 8px;\n  font-size: 14px;\n}\n.pb-product-list-widget .product-wrapper .price {\n  margin-top: 8px;\n  font-size: 14px;\n  font-weight: bold;\n}\n.pb-product-list-widget .product-wrapper .empty {\n  height: 200px;\n  background-color: #eee;\n  text-align: center;\n}\n.pb-product-list-widget .product-wrapper .empty span {\n  font-size: 40px;\n  color: #999;\n  line-height: 200px;\n  vertical-align: middle;\n}\n@media (max-width: 768px) {\n  .pb-product-list-widget .product-wrapper {\n    width: 50%;\n  }\n}\n.mobile .pb-product-list-widget .product-wrapper {\n  width: 50%;\n}\n.pb-login-widget {\n  height: 200px;\n  text-align: center;\n}\n.pb-login-widget h3 {\n  font-size: 32px;\n  font-weight: bold;\n  color: #ccc;\n  line-height: 200px;\n  vertical-align: middle;\n}\n.font-icon {\n  font-family: Material Symbols Outlined, monospace;\n  font-size: 1rem;\n  max-width: 1em;\n}\nhtml, body {\n  font-family: Noto Sans, Noto Sans KR, Noto Sans JP, Arial, sans-serif;\n  font-size: 12px;\n}\nbody {\n  background-color: white;\n  height: 100%;\n  margin: 0;\n}\n.pb-canvas-wrapper {\n  padding: 32px 40px 56px 40px;\n  height: 100%;\n  background-color: #aaa;\n  overflow: auto;\n}\n.pb-canvas-wrapper .pb-canvas {\n  display: flex;\n  flex-direction: row;\n  transform-origin: top left;\n  width: fit-content;\n  min-width: 40px;\n  min-height: 40px;\n  margin: 0 auto;\n}\n.pb-position-mark {\n  background-color: #ff3333;\n  opacity: 0.5;\n  border-radius: 2px;\n}\n.pb-add-section-handle {\n  position: relative;\n  text-align: center;\n  cursor: pointer;\n  z-index: 5;\n  height: 0;\n}\n.pb-add-section-handle.top::before, .pb-add-section-handle.bottom::before, .pb-add-section-handle.middle::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n.pb-add-section-handle.bottom {\n  left: 50%;\n  bottom: -32px;\n}\n.pb-add-section-handle:hover.top::before, .pb-add-section-handle:hover.bottom::before, .pb-add-section-handle:hover.middle::before,\n.pb-add-section-handle:hover > i {\n  opacity: 1;\n}\n.pb-add-section-handle > i {\n  vertical-align: middle;\n  position: absolute;\n  top: 50%;\n  left: -20px;\n  font-size: 2rem;\n  transform: translate(-50%, -50%);\n  opacity: 0.2;\n}\n.pb-button {\n  background: none;\n  border: none;\n  cursor: pointer;\n  vertical-align: middle;\n}\n.pb-guideline {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.pb-guideline.selected {\n  z-index: 3;\n}\n.pb-guideline.preselect {\n  z-index: 4;\n}';
   const _hoisted_1$i = { class: "pb-canvas-frame" };
   const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     __name: "PbCanvasFrame",
@@ -13577,10 +13603,10 @@ var __publicField = (obj, key, value) => {
         var _a, _b, _c, _d;
         if (pageBuilder.editMode === "local" && props.selectedParts.length > 0) {
           const section = pageBuilder.partManager.findNearestSection(props.selectedParts[0]);
-          if (section && ["globalPart"].includes(((_a = section.properties) == null ? void 0 : _a.sectionType) || "")) {
+          if (section && ["GlobalDesignPart"].includes(((_a = section.properties) == null ? void 0 : _a.sectionType) || "")) {
             return;
           }
-          if (section && ["localPart", "scheduledLocalPart"].includes(((_b = section.properties) == null ? void 0 : _b.sectionType) || "")) {
+          if (section && ["LocalDesignPart", "LocalMarketingPart"].includes(((_b = section.properties) == null ? void 0 : _b.sectionType) || "")) {
             if (!props.property.localized) {
               return;
             }
@@ -13588,7 +13614,7 @@ var __publicField = (obj, key, value) => {
         }
         if (pageBuilder.editMode === "template" && props.selectedParts.length > 0) {
           const section = pageBuilder.partManager.findNearestSection(props.selectedParts[0]);
-          if (section && ["localPart", "scheduledLocalPart"].includes(((_c = section.properties) == null ? void 0 : _c.sectionType) || "")) {
+          if (section && ["LocalDesignPart", "LocalMarketingPart"].includes(((_c = section.properties) == null ? void 0 : _c.sectionType) || "")) {
             if (props.property.localized) {
               return;
             }
@@ -13635,10 +13661,10 @@ var __publicField = (obj, key, value) => {
         var _a, _b, _c, _d, _e;
         if (pageBuilder.editMode === "local" && props.selectedParts.length > 0) {
           const section = pageBuilder.partManager.findNearestSection(props.selectedParts[0]);
-          if (section && ["globalPart"].includes(((_a = section.properties) == null ? void 0 : _a.sectionType) || "")) {
+          if (section && ["GlobalDesignPart"].includes(((_a = section.properties) == null ? void 0 : _a.sectionType) || "")) {
             return;
           }
-          if (section && ["localPart", "scheduledLocalPart"].includes(((_b = section.properties) == null ? void 0 : _b.sectionType) || "")) {
+          if (section && ["LocalDesignPart", "LocalMarketingPart"].includes(((_b = section.properties) == null ? void 0 : _b.sectionType) || "")) {
             if (!props.group.localized) {
               return;
             }
@@ -13646,7 +13672,7 @@ var __publicField = (obj, key, value) => {
         }
         if (pageBuilder.editMode === "template" && props.selectedParts.length > 0) {
           const section = pageBuilder.partManager.findNearestSection(props.selectedParts[0]);
-          if (section && ["localPart", "scheduledLocalPart"].includes(((_c = section.properties) == null ? void 0 : _c.sectionType) || "")) {
+          if (section && ["LocalDesignPart", "LocalMarketingPart"].includes(((_c = section.properties) == null ? void 0 : _c.sectionType) || "")) {
             if (props.group.localized) {
               return;
             }
@@ -13687,7 +13713,7 @@ var __publicField = (obj, key, value) => {
     _hoisted_5
   ];
   const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
-    __name: "PbPropertyLocalPart",
+    __name: "PbPropertyLocalMarketingPart",
     props: {
       selectedPart: {}
     },
@@ -13699,18 +13725,19 @@ var __publicField = (obj, key, value) => {
       const endDt = vue.ref("");
       const pageBuilder = usePageBuilderEditor();
       const selectSchedule = () => {
-        PageBuilderEditorEvent.emit.requestLocalPartContentSchedule({
+        PageBuilderEditorEvent.emit.requestLocalMarketingPartSchedule({
           pageBuilderId: pageBuilder.instanceId,
+          partId: props.selectedPart.partId,
           callback: (schedule) => {
             startDt.value = schedule.startDt;
             endDt.value = schedule.endDt;
             if (props.selectedPart && props.selectedPart.isSection()) {
               clearContents(props.selectedPart);
-              if (schedule.content) {
-                for (const id in schedule.content) {
-                  const part = findWidget(props.selectedPart, id);
+              if (schedule.data) {
+                for (const partId in schedule.data) {
+                  const part = findWidget(props.selectedPart, partId);
                   if (part) {
-                    Object.entries(schedule.content[id]).forEach(([key, value]) => {
+                    Object.entries(schedule.data[partId]).forEach(([key, value]) => {
                       if (!value)
                         return;
                       part.properties = part.properties || {};
@@ -13723,15 +13750,14 @@ var __publicField = (obj, key, value) => {
           }
         });
       };
-      const findWidget = (part, id) => {
-        var _a;
+      const findWidget = (part, partId) => {
         if (!part)
           return;
-        if (((_a = part.properties) == null ? void 0 : _a.id) === id)
+        if (part.partId === partId)
           return part;
         if (part.children) {
           for (const child of part.children) {
-            const found = findWidget(child, id);
+            const found = findWidget(child, partId);
             if (found)
               return found;
           }
@@ -13792,21 +13818,21 @@ var __publicField = (obj, key, value) => {
           return [];
         }
       });
-      const showScheduledLocalPart = vue.computed(() => {
+      const showLocalMarketingPart = vue.computed(() => {
         var _a;
         if (pageBuilder.editMode === "template")
           return false;
         if (!selectedParts.length || selectedParts.length !== 1)
           return false;
         const part = selectedParts[0];
-        if (part.isSection() && ((_a = part.properties) == null ? void 0 : _a.sectionType) === "scheduledLocalPart") {
+        if (part.isSection() && ((_a = part.properties) == null ? void 0 : _a.sectionType) === "LocalMarketingPart") {
           return true;
         }
         return false;
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
-          showScheduledLocalPart.value ? (vue.openBlock(), vue.createBlock(_sfc_main$b, {
+          showLocalMarketingPart.value ? (vue.openBlock(), vue.createBlock(_sfc_main$b, {
             key: 0,
             "selected-part": vue.unref(selectedParts)[0]
           }, null, 8, ["selected-part"])) : vue.createCommentVNode("", true),
@@ -13846,7 +13872,7 @@ var __publicField = (obj, key, value) => {
       editMode: {},
       pageContent: {}
     },
-    setup(__props) {
+    setup(__props, { expose: __expose }) {
       const props = __props;
       const modal = bluesea.useModal();
       const pageBuilderEditor = createPageBuilderEditor();
@@ -13863,6 +13889,59 @@ var __publicField = (obj, key, value) => {
       vue.watch(() => props.pageContent, (pageContent) => pageContent && pageBuilderEditor.initData(pageContent));
       const colorHistory = vue.ref([]);
       vue.provide("colorHistory", colorHistory);
+      const getLocalDesignPartContent = () => {
+        let content;
+        if (pageBuilderEditor.model.rootPart) {
+          content = doGetLocalDesignPartContent(pageBuilderEditor.model.rootPart);
+        }
+        return content;
+      };
+      const doGetLocalDesignPartContent = (part) => {
+        var _a;
+        let content;
+        if (((_a = part.properties) == null ? void 0 : _a.sectionType) && ["LocalDesignPart", "LocalMarketingPart"].includes(part.properties.sectionType)) {
+          const properties = getLocalDesignPartProperties(part);
+          if (properties) {
+            if (!content)
+              content = [];
+            content.push({ partId: part.partId, data: properties });
+          }
+        }
+        if (part.children) {
+          for (const child of part.children) {
+            const childContent = doGetLocalDesignPartContent(child);
+            if (childContent)
+              content = [...content || [], ...childContent];
+          }
+        }
+        return content;
+      };
+      const getLocalDesignPartProperties = (part) => {
+        let properties;
+        if (part.isWidget()) {
+          const defs = pageBuilderEditor.partManager.getLocalDesignPartPropertyDefinitions(part.partName);
+          if (defs) {
+            const data = {};
+            for (const def of defs) {
+              if (part.properties)
+                data[def.propertyName] = part.properties[def.propertyName];
+            }
+            properties = { [part.partId]: data };
+          }
+        }
+        if (part.children) {
+          for (const child of part.children) {
+            const childProperties = getLocalDesignPartProperties(child);
+            if (childProperties) {
+              properties = { ...properties, ...childProperties };
+            }
+          }
+        }
+        return properties;
+      };
+      __expose({
+        getLocalDesignPartContent
+      });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
           vue.createVNode(_sfc_main$f),

package/dist/style.css

@@ -1,170 +1,3 @@
-.pb-page {
-  margin: 0 auto;
-  margin-top: 20px;
-  background-position: 50% 50%;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-.pb-page .pb-section {
-  position: relative;
-  background-position: 50% 50%;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-color: #fff;
-}
-.pb-page .pb-section .pb-block {
-  display: flex;
-  min-width: 1px;
-  position: relative;
-  background-position: 50% 50%;
-  background-repeat: no-repeat;
-  background-size: cover;
-  width: 100%;
-}
-.pb-page .pb-section .pb-block .pb-widget {
-  position: relative;
-  background-position: 50% 50%;
-  background-repeat: no-repeat;
-  background-size: cover;
-  width: 100%;
-}
-.pb-page .pb-section .pb-block .pb-widget .children {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-.pb-page .pb-section .pb-block .pb-text-widget {
-  width: 100%;
-  height: fit-content;
-}
-.pb-page .pb-section .pb-block .pb-text-widget .text {
-  color: #333;
-}
-.pb-page .pb-section .pb-block .pb-text-widget.empty .text {
-  color: #999;
-}
-.pb-page .pb-section .pb-block .pb-image-widget {
-  width: 100%;
-}
-.pb-page .pb-section .pb-block .pb-image-widget .image {
-  width: 100%;
-}
-.pb-page .pb-section .pb-block .pb-image-widget .empty {
-  height: 100px;
-  background-color: #eee;
-  text-align: center;
-}
-.pb-page .pb-section .pb-block .pb-image-widget .empty span {
-  font-size: 40px;
-  color: #999;
-  line-height: 100px;
-  vertical-align: middle;
-}
-.pb-page .pb-section .pb-block .pb-product-list-widget {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  align-items: center;
-}
-.pb-page .pb-section .pb-block .pb-product-list-widget .product {
-  width: 95%;
-  margin: 0 auto;
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-.pb-page .pb-section .pb-block .pb-product-list-widget img {
-  width: 100%;
-}
-.pb-page .pb-section .pb-block .pb-product-list-widget .name {
-  margin-top: 8px;
-  font-size: 14px;
-}
-.pb-page .pb-section .pb-block .pb-product-list-widget .price {
-  margin-top: 8px;
-  font-size: 14px;
-  font-weight: bold;
-}
-.pb-page .pb-section .pb-block .pb-product-list-widget .empty {
-  height: 200px;
-  background-color: #eee;
-  text-align: center;
-}
-.pb-page .pb-section .pb-block .pb-product-list-widget .empty span {
-  font-size: 40px;
-  color: #999;
-  line-height: 200px;
-  vertical-align: middle;
-}
-.pb-page .pb-section .pb-block .pb-page .mobile .pb-product-list-widget .product-wrapper {
-  width: 50%;
-}
-.pb-page .pb-section .pb-block .pb-page .pc .pb-product-list-widget .product-wrapper {
-  width: 25%;
-}
-.pb-page .pb-section .pb-block .pb-login-widget {
-  height: 200px;
-  text-align: center;
-}
-.pb-page .pb-section .pb-block .pb-login-widget h3 {
-  font-size: 32px;
-  font-weight: bold;
-  color: #ccc;
-  line-height: 200px;
-  vertical-align: middle;
-}
-.pb-page .pb-section .pb-block .pb-editor {
-  outline: 1px dashed #ccc;
-}
-.pb-page .pb-section .pb-block:hover:not(:has(.pb-widget:hover)) {
-  background-color: #f0f0f0;
-}
-.pb-page .pb-section .pb-block.selected {
-  outline: 1px solid #8e44ad;
-  outline-offset: 1px;
-  z-index: 999;
-}
-.pb-page .pb-section .pb-editor {
-  outline: 1px dashed #ccc;
-}
-.pb-page .pb-section:hover:not(:has(.pb-block:hover)) {
-  background-color: #f0f0f0;
-}
-.pb-page .pb-section.selected {
-  outline: 1px solid #e67e22;
-  outline-offset: 1px;
-  z-index: 999;
-}
-.pb-page .pb-section.pb-section-static {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  pointer-events: none;
-}
-.pb-page .pb-section.pb-section-static:after {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.2);
-}
-.pb-page .pb-section-static .pb-widget {
-  outline: none;
-}
-.pb-page .pb-page-content.selected {
-  outline: 2px solid #4998f8;
-  outline-offset: 5px;
-}
-.pb-page * {
-  box-sizing: border-box;
-}
-.pb-viewer {
-  width: 100%;
-}
 .pb-editor .pb-editor-body {
   height: 100%;
 }

package/package.json

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