@g1cloud/page-builder-editor 1.0.0-alpha.81 → 1.0.0-alpha.82

package/css/page-builder-editor.css

@@ -47,6 +47,7 @@
 .pb-editor .pb-editor-body .pb-canvas-wrapper {
   background-color: var(--color-canvas-frame-bg);
   border-top: 1px solid var(--color-canvas-frame-bg);
+  border-bottom: 1px solid var(--color-canvas-frame-bg);
   flex-grow: 1;
   min-width: 0;
   width: 0;
@@ -266,13 +267,13 @@
   font-weight: 600;
 }
 .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-local-part button {
-  color: #fff;
+  color: var(--white);
   border: none;
   padding: 0 4px;
   cursor: pointer;
   line-height: 1;
   height: 24px;
-  background-color: #1f8fff;
+  background-color: var(--primary);
 }
 .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-local-part .input-area {
   height: 24px;
@@ -301,14 +302,14 @@
   display: inline-block;
   width: 100px;
   height: 1px;
-  background: red;
+  background: var(--red);
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(45deg);
 }
 .pb-editor .pb-editor-body .pb-color-picker .buttons button.picker-button {
-  border: 1px solid #cccccc;
+  border: 1px solid var(--border);
 }
 .pb-editor .pb-editor-body .pb-color-picker .buttons button i {
   font-size: 1.4rem;
@@ -337,7 +338,7 @@
   width: 50%;
 }
 .pb-html-editor-modal .preview .content {
-  border: solid 1px #ccc;
+  border: solid 1px var(--border);
 }
 .pb-html-editor-modal .preview .content iframe {
   width: 100%;
@@ -362,24 +363,24 @@
   text-align: center;
 }
 .pb-html-editor-modal .buttons button {
-  color: #fff;
+  color: var(--white);
   border: none;
   padding: 4px 12px;
   cursor: pointer;
   line-height: 1;
   height: 28px;
-  background-color: #1f8fff;
+  background-color: var(--primary);
 }
 
 .pb-youtube-modal .flex-grow-1.overflow-auto {
   overflow: hidden !important;
 }
 .pb-youtube-modal button {
-  color: #fff;
+  color: var(--white);
   border: none;
   padding: 4px 12px;
   cursor: pointer;
   line-height: 1;
   height: 28px;
-  background-color: #1f8fff;
+  background-color: var(--primary);
 }

package/dist/{PbPropertyEditorColor-D1Et94Ef.js → PbPropertyEditorColor-DePuGm1f.js}

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

package/dist/{PbPropertyEditorCssLength-vEqAkXLy.js → PbPropertyEditorCssLength-BuiZknhP.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createVNode } from "vue";
 import { vT, BSTextInput } from "@g1cloud/bluesea";
-import { t as toCssLength } from "./index-tTR7GhuX.js";
+import { t as toCssLength } from "./index-CV7ELqHT.js";
 const _hoisted_1 = { class: "property-editor property-editor-number flex-align-center" };
 const _hoisted_2 = { class: "title" };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/{PbPropertyEditorHtml-BD1ir-xW.js → PbPropertyEditorHtml-BidGVlHZ.js}

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

package/dist/{PbPropertyEditorImage-CrtSHsie.js → PbPropertyEditorImage-D1EGzUpm.js}

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

package/dist/{PbPropertyEditorMultilineText-v01RFbU-.js → PbPropertyEditorMultilineText-CpnjVtrK.js}

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

package/dist/{PbPropertyEditorText-CDohV0Yq.js → PbPropertyEditorText-CxgIRMsk.js}

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

package/dist/{PbPropertyEditorYoutube-gZIWmCbS.js → PbPropertyEditorYoutube-CmAv_b-p.js}

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

package/dist/{PbWidgetAddModal-CetSlzPe.js → PbWidgetAddModal-Dj6lOg6c.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-tTR7GhuX.js";
+import { w as widgetPartDefinitions } from "./index-CV7ELqHT.js";
 const _hoisted_1 = { class: "bs-layout-vertical pb-part-add-modal" };
 const _hoisted_2 = { class: "bs-layout-horizontal-wrap ml-16 mb-8 gap-8" };
 const _hoisted_3 = ["onClick", "textContent"];

package/dist/{index-tTR7GhuX.js → index-CV7ELqHT.js}

@@ -7046,9 +7046,11 @@ const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
       return (_a = props.part.properties) == null ? void 0 : _a.media;
     });
     const altText = computed(() => {
-      if (media.value && media.value.altText) {
+      var _a, _b;
+      const _altText = (_b = (_a = props.part.properties) == null ? void 0 : _a.media) == null ? void 0 : _b.altText;
+      if (media.value && _altText) {
         const locale = pageBuilder.getLocale();
-        return media.value.altText[locale] || "";
+        return _altText[locale] || "";
       }
       return "";
     });
@@ -8318,16 +8320,16 @@ class PartManager {
 const defaultPartPropertyEditors = () => {
   return {
     "readonly-text": () => defineAsyncComponent(() => import("./PbPropertyEditorReadonlyText-BJ5qx69O.js")),
-    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-CDohV0Yq.js")),
+    "text": () => defineAsyncComponent(() => import("./PbPropertyEditorText-CxgIRMsk.js")),
     "number": () => defineAsyncComponent(() => import("./PbPropertyEditorNumber-B76ArSb5.js")),
     "boolean": () => defineAsyncComponent(() => import("./PbPropertyEditorBoolean-c5CNiTpt.js")),
-    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-v01RFbU-.js")),
+    "multiline-text": () => defineAsyncComponent(() => import("./PbPropertyEditorMultilineText-CpnjVtrK.js")),
     "select": () => defineAsyncComponent(() => import("./PbPropertyEditorSelect-B5sfulvx.js")),
-    "css-length": () => defineAsyncComponent(() => import("./PbPropertyEditorCssLength-vEqAkXLy.js")),
-    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-D1Et94Ef.js")),
-    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-CrtSHsie.js")),
-    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-BD1ir-xW.js")),
-    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-gZIWmCbS.js"))
+    "css-length": () => defineAsyncComponent(() => import("./PbPropertyEditorCssLength-BuiZknhP.js")),
+    "color": () => defineAsyncComponent(() => import("./PbPropertyEditorColor-DePuGm1f.js")),
+    "image": () => defineAsyncComponent(() => import("./PbPropertyEditorImage-D1EGzUpm.js")),
+    "html": () => defineAsyncComponent(() => import("./PbPropertyEditorHtml-BidGVlHZ.js")),
+    "youtube": () => defineAsyncComponent(() => import("./PbPropertyEditorYoutube-CmAv_b-p.js"))
   };
 };
 const getPropertyValueOfParts = (parts, propertyName) => {
@@ -12386,13 +12388,16 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       if (imageProvider) {
         imageProvider({ modal }, (media2) => {
           if (media2.mediaType === "Image") {
-            updateProperty({ media: media2, altText: media2.altText, thumbnail: "" });
+            updateProperty({ media: media2, thumbnail: "" });
           } else if (media2.mediaType === "Video") {
-            updateProperty({ media: media2, altText: media2.altText, link: "", linkTarget: "" });
+            updateProperty({ media: media2, link: "", linkTarget: "" });
           }
         });
       }
     };
+    const updateAltText = (value) => {
+      updateProperty({ media: { ...media.value, altText: value } });
+    };
     const updateProperty = (properties) => {
       pageBuilder.commandRegistry.executeCommand(ChangePropertyCommand.COMMAND_ID, { properties, targetParts: part });
     };
@@ -12402,8 +12407,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       return (_b = (_a = part == null ? void 0 : part[0]) == null ? void 0 : _a.properties) == null ? void 0 : _b.media;
     });
     const altText = computed(() => {
-      var _a, _b;
-      return (_b = (_a = part == null ? void 0 : part[0]) == null ? void 0 : _a.properties) == null ? void 0 : _b.altText;
+      var _a, _b, _c;
+      return (_c = (_b = (_a = part == null ? void 0 : part[0]) == null ? void 0 : _a.properties) == null ? void 0 : _b.media) == null ? void 0 : _c.altText;
     });
     const link = computed(() => {
       var _a, _b;
@@ -12439,7 +12444,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           ])
         ]),
         ((_a = media.value) == null ? void 0 : _a.fileUrl) ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
-          _cache[4] || (_cache[4] = createElementVNode("label", null, "URL", -1)),
+          _cache[3] || (_cache[3] = createElementVNode("label", null, "URL", -1)),
           createElementVNode("div", _hoisted_4, [
             createTextVNode(toDisplayString((_b = media.value) == null ? void 0 : _b.fileUrl) + " ", 1),
             withDirectives(createVNode(unref(BSButton), {
@@ -12467,7 +12472,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
               locales: locales.value,
               "model-value": altText.value,
               width: "100%",
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = (value) => updateProperty({ altText: value }))
+              "onUpdate:modelValue": updateAltText
             }, null, 8, ["locales", "model-value"])
           ]),
           createElementVNode("div", _hoisted_6, [
@@ -12479,7 +12484,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             createVNode(unref(BSTextInput), {
               "model-value": link.value,
               width: "100%",
-              "onUpdate:modelValue": _cache[1] || (_cache[1] = (value) => updateProperty({ link: value }))
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = (value) => updateProperty({ link: value }))
             }, null, 8, ["model-value"])
           ]),
           createElementVNode("div", _hoisted_7, [
@@ -12491,7 +12496,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             createVNode(unref(BSTextInput), {
               "model-value": linkTarget.value,
               width: "100%",
-              "onUpdate:modelValue": _cache[2] || (_cache[2] = (value) => updateProperty({ linkTarget: value }))
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = (value) => updateProperty({ linkTarget: value }))
             }, null, 8, ["model-value"])
           ])
         ], 64)) : createCommentVNode("", true),
@@ -12505,7 +12510,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             createVNode(unref(BSTextInput), {
               "model-value": thumbnail.value,
               width: "100%",
-              "onUpdate:modelValue": _cache[3] || (_cache[3] = (value) => updateProperty({ thumbnail: value }))
+              "onUpdate:modelValue": _cache[2] || (_cache[2] = (value) => updateProperty({ thumbnail: value }))
             }, null, 8, ["model-value"])
           ])
         ], 64)) : createCommentVNode("", true)
@@ -12658,12 +12663,6 @@ const widgets = [
             caption: "Media",
             propertyType: "media"
           },
-          {
-            propertyName: "altText",
-            caption: "Alt Text",
-            propertyType: "text",
-            multiLang: true
-          },
           {
             propertyName: "link",
             caption: "Link",
@@ -12883,7 +12882,7 @@ __publicField(_OpenAddWidgetModalCommand, "COMMAND_ID", "OpenAddWidgetModal");
 let OpenAddWidgetModalCommand = _OpenAddWidgetModalCommand;
 const openWidgetAddModal = (modal, args, callback) => {
   modal.openModal({
-    component: defineAsyncComponent(() => import("./PbWidgetAddModal-CetSlzPe.js")),
+    component: defineAsyncComponent(() => import("./PbWidgetAddModal-Dj6lOg6c.js")),
     style: {
       width: "80%",
       height: "80%",

package/dist/page-builder-editor.js

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

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

@@ -7047,9 +7047,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         return (_a = props.part.properties) == null ? void 0 : _a.media;
       });
       const altText = vue.computed(() => {
-        if (media.value && media.value.altText) {
+        var _a, _b;
+        const _altText = (_b = (_a = props.part.properties) == null ? void 0 : _a.media) == null ? void 0 : _b.altText;
+        if (media.value && _altText) {
           const locale = pageBuilder.getLocale();
-          return media.value.altText[locale] || "";
+          return _altText[locale] || "";
         }
         return "";
       });
@@ -12387,13 +12389,16 @@ ${_html.style}
         if (imageProvider) {
           imageProvider({ modal }, (media2) => {
             if (media2.mediaType === "Image") {
-              updateProperty({ media: media2, altText: media2.altText, thumbnail: "" });
+              updateProperty({ media: media2, thumbnail: "" });
             } else if (media2.mediaType === "Video") {
-              updateProperty({ media: media2, altText: media2.altText, link: "", linkTarget: "" });
+              updateProperty({ media: media2, link: "", linkTarget: "" });
             }
           });
         }
       };
+      const updateAltText = (value) => {
+        updateProperty({ media: { ...media.value, altText: value } });
+      };
       const updateProperty = (properties) => {
         pageBuilder.commandRegistry.executeCommand(ChangePropertyCommand.COMMAND_ID, { properties, targetParts: part });
       };
@@ -12403,8 +12408,8 @@ ${_html.style}
         return (_b = (_a = part == null ? void 0 : part[0]) == null ? void 0 : _a.properties) == null ? void 0 : _b.media;
       });
       const altText = vue.computed(() => {
-        var _a, _b;
-        return (_b = (_a = part == null ? void 0 : part[0]) == null ? void 0 : _a.properties) == null ? void 0 : _b.altText;
+        var _a, _b, _c;
+        return (_c = (_b = (_a = part == null ? void 0 : part[0]) == null ? void 0 : _a.properties) == null ? void 0 : _b.media) == null ? void 0 : _c.altText;
       });
       const link = vue.computed(() => {
         var _a, _b;
@@ -12440,7 +12445,7 @@ ${_html.style}
             ])
           ]),
           ((_a = media.value) == null ? void 0 : _a.fileUrl) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$8, [
-            _cache[4] || (_cache[4] = vue.createElementVNode("label", null, "URL", -1)),
+            _cache[3] || (_cache[3] = vue.createElementVNode("label", null, "URL", -1)),
             vue.createElementVNode("div", _hoisted_4$4, [
               vue.createTextVNode(vue.toDisplayString((_b = media.value) == null ? void 0 : _b.fileUrl) + " ", 1),
               vue.withDirectives(vue.createVNode(vue.unref(bluesea.BSButton), {
@@ -12468,7 +12473,7 @@ ${_html.style}
                 locales: locales.value,
                 "model-value": altText.value,
                 width: "100%",
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = (value) => updateProperty({ altText: value }))
+                "onUpdate:modelValue": updateAltText
               }, null, 8, ["locales", "model-value"])
             ]),
             vue.createElementVNode("div", _hoisted_6$2, [
@@ -12480,7 +12485,7 @@ ${_html.style}
               vue.createVNode(vue.unref(bluesea.BSTextInput), {
                 "model-value": link.value,
                 width: "100%",
-                "onUpdate:modelValue": _cache[1] || (_cache[1] = (value) => updateProperty({ link: value }))
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = (value) => updateProperty({ link: value }))
               }, null, 8, ["model-value"])
             ]),
             vue.createElementVNode("div", _hoisted_7$2, [
@@ -12492,7 +12497,7 @@ ${_html.style}
               vue.createVNode(vue.unref(bluesea.BSTextInput), {
                 "model-value": linkTarget.value,
                 width: "100%",
-                "onUpdate:modelValue": _cache[2] || (_cache[2] = (value) => updateProperty({ linkTarget: value }))
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = (value) => updateProperty({ linkTarget: value }))
               }, null, 8, ["model-value"])
             ])
           ], 64)) : vue.createCommentVNode("", true),
@@ -12506,7 +12511,7 @@ ${_html.style}
               vue.createVNode(vue.unref(bluesea.BSTextInput), {
                 "model-value": thumbnail.value,
                 width: "100%",
-                "onUpdate:modelValue": _cache[3] || (_cache[3] = (value) => updateProperty({ thumbnail: value }))
+                "onUpdate:modelValue": _cache[2] || (_cache[2] = (value) => updateProperty({ thumbnail: value }))
               }, null, 8, ["model-value"])
             ])
           ], 64)) : vue.createCommentVNode("", true)
@@ -12659,12 +12664,6 @@ ${_html.style}
               caption: "Media",
               propertyType: "media"
             },
-            {
-              propertyName: "altText",
-              caption: "Alt Text",
-              propertyType: "text",
-              multiLang: true
-            },
             {
               propertyName: "link",
               caption: "Link",

package/dist/style.css

@@ -47,6 +47,7 @@
 .pb-editor .pb-editor-body .pb-canvas-wrapper {
   background-color: var(--color-canvas-frame-bg);
   border-top: 1px solid var(--color-canvas-frame-bg);
+  border-bottom: 1px solid var(--color-canvas-frame-bg);
   flex-grow: 1;
   min-width: 0;
   width: 0;
@@ -266,13 +267,13 @@
   font-weight: 600;
 }
 .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-local-part button {
-  color: #fff;
+  color: var(--white);
   border: none;
   padding: 0 4px;
   cursor: pointer;
   line-height: 1;
   height: 24px;
-  background-color: #1f8fff;
+  background-color: var(--primary);
 }
 .pb-editor .pb-editor-body .pb-sidebar .pb-sidebar-properties .pb-sidebar-property-group .property-editor-local-part .input-area {
   height: 24px;
@@ -301,14 +302,14 @@
   display: inline-block;
   width: 100px;
   height: 1px;
-  background: red;
+  background: var(--red);
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(45deg);
 }
 .pb-editor .pb-editor-body .pb-color-picker .buttons button.picker-button {
-  border: 1px solid #cccccc;
+  border: 1px solid var(--border);
 }
 .pb-editor .pb-editor-body .pb-color-picker .buttons button i {
   font-size: 1.4rem;
@@ -335,7 +336,7 @@
   width: 50%;
 }
 .pb-html-editor-modal .preview .content {
-  border: solid 1px #ccc;
+  border: solid 1px var(--border);
 }
 .pb-html-editor-modal .preview .content iframe {
   width: 100%;
@@ -360,23 +361,23 @@
   text-align: center;
 }
 .pb-html-editor-modal .buttons button {
-  color: #fff;
+  color: var(--white);
   border: none;
   padding: 4px 12px;
   cursor: pointer;
   line-height: 1;
   height: 28px;
-  background-color: #1f8fff;
+  background-color: var(--primary);
 }
 .pb-youtube-modal .flex-grow-1.overflow-auto {
   overflow: hidden !important;
 }
 .pb-youtube-modal button {
-  color: #fff;
+  color: var(--white);
   border: none;
   padding: 4px 12px;
   cursor: pointer;
   line-height: 1;
   height: 28px;
-  background-color: #1f8fff;
+  background-color: var(--primary);
 }

package/package.json

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

package/scss/canvas.scss

@@ -2,6 +2,7 @@
 .pb-canvas-wrapper {
   background-color: var(--color-canvas-frame-bg);
   border-top: 1px solid var(--color-canvas-frame-bg);
+  border-bottom: 1px solid var(--color-canvas-frame-bg);
   flex-grow: 1;
   min-width: 0;
   width: 0;

package/scss/page-builder-editor.scss

@@ -206,7 +206,7 @@
               display: inline-block;
               width: 100px;
               height: 1px;
-              background: red;
+              background: var(--red);
               position: absolute;
               top: 50%;
               left: 50%;
@@ -215,7 +215,7 @@
           }
 
           &.picker-button {
-            border: 1px solid #cccccc;
+            border: 1px solid var(--border);
           }
 
           i {
@@ -259,7 +259,7 @@
     width: 50%;
 
     .content {
-      border: solid 1px #ccc;
+      border: solid 1px var(--border);
 
       iframe {
         width: 100%;
@@ -298,13 +298,13 @@
     text-align: center;
 
     button {
-      color: #fff;
+      color: var(--white);
       border: none;
       padding: 4px 12px;
       cursor: pointer;
       line-height: 1;
       height: 28px;
-      background-color: #1f8fff;
+      background-color: var(--primary);
     }
   }
 }
@@ -315,12 +315,12 @@
   }
 
   button {
-    color: #fff;
+    color: var(--white);
     border: none;
     padding: 4px 12px;
     cursor: pointer;
     line-height: 1;
     height: 28px;
-    background-color: #1f8fff;
+    background-color: var(--primary);
   }
 }

package/scss/property-editor-youtube.scss

@@ -1,13 +1,13 @@
 .property-editor-youtube {
   button {
-    color: #fff;
+    color: var(--white);
     border: none;
     padding: 4px 12px;
     cursor: pointer;
     line-height: 1;
     width: 120px;
     height: 28px;
-    background-color: #1f8fff;
+    background-color: var(--primary);
   }
 
   .input-area {

package/scss/property-localpart.scss

@@ -5,14 +5,14 @@
   }
 
   button {
-    color: #fff;
+    color: var(--white);
     border: none;
     padding: 0 4px;
     cursor: pointer;
     line-height: 1;
     //width: 100px;
     height: 24px;
-    background-color: #1f8fff;
+    background-color: var(--primary);
   }
 
   .input-area {