@myissue/vue-website-page-builder 3.3.96 → 3.3.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "3.3.96",
+  "version": "3.3.97",
   "description": "Vue 3 page builder component with drag & drop functionality.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",

package/src/Components/PageBuilder/EditorMenu/Editables/ComponentTopMenu.vue

@@ -1,6 +1,6 @@
 <script setup>
 import DynamicModalBuilder from '../../../Modals/DynamicModalBuilder.vue'
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { getPageBuilder } from '../../../../composables/builderInstance'
 import { useTranslations } from '../../../../composables/useTranslations'
 
@@ -22,6 +22,9 @@ const firstModalButtonFunctionDynamicModalBuilder = ref(null)
 const secondModalButtonFunctionDynamicModalBuilder = ref(null)
 const thirdModalButtonFunctionDynamicModalBuilder = ref(null)
 
+const canMoveUp = computed(() => pageBuilderService.canMoveUp())
+const canMoveDown = computed(() => pageBuilderService.canMoveDown())
+
 // remove component
 const handleDelete = function () {
   showModalDeleteComponent.value = true
@@ -78,14 +81,26 @@ const handleDelete = function () {
     <button
       type="button"
       @click="pageBuilderService.reorderComponent(-1)"
-      class="pbx-h-10 pbx-w-10 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0 pbx-text-black hover:pbx-text-white"
+      :disabled="!canMoveUp"
+      class="pbx-h-10 pbx-w-10 pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square pbx-text-black"
+      :class="[
+        canMoveUp
+          ? 'hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0'
+          : 'pbx-cursor-not-allowed pbx-bg-opacity-20 hover:pbx-bg-gray-200',
+      ]"
     >
       <span class="material-symbols-outlined"> move_up </span>
     </button>
     <button
       type="button"
       @click="pageBuilderService.reorderComponent(1)"
-      class="pbx-h-10 pbx-w-10 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0 pbx-text-black hover:pbx-text-white"
+      :disabled="!canMoveDown"
+      class="pbx-h-10 pbx-w-10 pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square pbx-text-black"
+      :class="[
+        canMoveDown
+          ? 'hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0'
+          : 'pbx-cursor-not-allowed pbx-bg-opacity-20 hover:pbx-bg-gray-200',
+      ]"
     >
       <span class="material-symbols-outlined"> move_down </span>
     </button>

package/src/Components/PageBuilder/UndoRedo/UndoRedo.vue

@@ -1,11 +1,13 @@
-<script setup>
-import { computed } from 'vue'
+<script setup lang="ts">
+import { computed, ref } from 'vue'
 import { sharedPageBuilderStore } from '../../../stores/shared-store'
 import GlobalLoader from '../../../Components/Loaders/GlobalLoader.vue'
 import { getPageBuilder } from '../../../composables/builderInstance'
 
 const pageBuilderService = getPageBuilder()
 
+const emit = defineEmits(['toolbar-hide-request'])
+
 // Use shared store instance
 const pageBuilderStateStore = sharedPageBuilderStore
 
@@ -13,30 +15,69 @@ const getIsLoadingGlobal = computed(() => {
   return pageBuilderStateStore.getIsLoadingGlobal
 })
 
+const historyIndex = computed(() => pageBuilderStateStore.getHistoryIndex)
+const historyLength = computed(() => pageBuilderStateStore.getHistoryLength)
+
+const canUndo = computed(() => historyIndex.value > 0)
+const canRedo = computed(() => historyIndex.value < historyLength.value - 1)
+
 const handleUndo = async function () {
-  await pageBuilderService.undo()
+  if (canUndo.value) {
+    // Emit event to hide toolbar
+    emit('toolbar-hide-request')
+    await pageBuilderService.undo()
+    await pageBuilderService.clearHtmlSelection()
+  }
 }
+
 const handleRedo = async function () {
-  await pageBuilderService.redo()
+  if (canRedo.value) {
+    // Emit event to hide toolbar
+    emit('toolbar-hide-request')
+    await pageBuilderService.redo()
+    await pageBuilderService.clearHtmlSelection()
+  }
 }
 </script>
 
 <template>
   <GlobalLoader v-if="getIsLoadingGlobal"></GlobalLoader>
-  <div class="pbx-flex-1 pbx-flex pbx-justify-center pbx-items-center pbx-py-2 pbx-w-full gap-2">
+  <div
+    @click="
+      async () => {
+        await pageBuilderService.clearHtmlSelection()
+      }
+    "
+    class="pbx-flex-1 pbx-flex pbx-justify-center pbx-items-center pbx-py-2 pbx-w-full gap-1"
+  >
     <!-- Undo Start -->
-    <button @click="handleUndo" type="button">
+    <button @click="handleUndo" type="button" :disabled="!canUndo">
       <div
-        class="pbx-h-10 pbx-w-10 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryLinkColor focus-visible:pbx-ring-0 pbx-text-black hover:pbx-text-white"
+        class="pbx-h-10 pbx-w-10 pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square pbx-text-black hover:pbx-text-white"
+        :class="[
+          canUndo
+            ? 'pbx-cursor-pointer hover:pbx-bg-myPrimaryLinkColor focus-visible:pbx-ring-0'
+            : 'pbx-cursor-not-allowed pbx-bg-opacity-20  hover:pbx-bg-gray-200',
+        ]"
       >
         <span class="material-symbols-outlined"> undo </span>
       </div>
     </button>
     <!-- Undo End -->
+    <div
+      class="pbx-text-xs pbx-text-gray-600 pbx-mx-2 pbx-py-3 pbx-px-2 pbx-border-solid pbx-border pbx-border-gray-200 pbx-rounded-full"
+    >
+      {{ historyIndex + 1 }}/{{ historyLength }}
+    </div>
     <!-- Redo Start -->
-    <button @click="handleRedo" type="button">
+    <button @click="handleRedo" type="button" :disabled="!canRedo">
       <div
-        class="pbx-h-10 pbx-w-10 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryLinkColor focus-visible:pbx-ring-0 pbx-text-black hover:pbx-text-white pbx-ml-2"
+        class="pbx-h-10 pbx-w-10 pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square pbx-text-black hover:pbx-text-white"
+        :class="[
+          canRedo
+            ? 'pbx-cursor-pointer hover:pbx-bg-myPrimaryLinkColor focus-visible:pbx-ring-0'
+            : 'pbx-cursor-not-allowed pbx-bg-opacity-20  hover:pbx-bg-gray-200',
+        ]"
       >
         <span class="material-symbols-outlined"> redo </span>
       </div>

package/src/PageBuilder/PageBuilder.vue

@@ -320,12 +320,18 @@ const ensureBuilderInitialized = function () {
   }
 }
 
-const pageBuilderWrapper = ref(null)
-let lastToolbarLeft = null
-let lastToolbarTop = null
+const pbxBuilderWrapper = ref(null)
+
+const hideToolbar = function () {
+  const toolbar = document.querySelector('#pbxEditToolbar')
+  if (toolbar) {
+    toolbar.classList.remove('is-visible')
+    toolbar.removeAttribute('style')
+  }
+}
 
 function updatePanelPosition() {
-  const container = pageBuilderWrapper.value
+  const container = pbxBuilderWrapper.value
   const editToolbarElement = container && container.querySelector('#pbxEditToolbar')
 
   if (!container || !editToolbarElement) return
@@ -356,11 +362,9 @@ function updatePanelPosition() {
     editToolbarElement.style.left = `${left}px`
     editToolbarElement.style.top = `${top}px`
     editToolbarElement.classList.add('is-visible')
-
-    lastToolbarLeft = left
-    lastToolbarTop = top
   } else {
     editToolbarElement.classList.remove('is-visible')
+    editToolbarElement.removeAttribute('style') // Ensure all styles are removed
   }
 }
 
@@ -389,7 +393,7 @@ onMounted(async () => {
   updatePanelPosition()
 
   // Set up MutationObserver and event listeners
-  const container = pageBuilderWrapper.value
+  const container = pbxBuilderWrapper.value
   if (!container) return
 
   const observer = new MutationObserver(updatePanelPosition)
@@ -528,7 +532,7 @@ onMounted(async () => {
       </template>
       <!-- Logo # end -->
 
-      <UndoRedo></UndoRedo>
+      <UndoRedo @toolbar-hide-request="hideToolbar"></UndoRedo>
 
       <div
         @click.self="
@@ -858,18 +862,14 @@ onMounted(async () => {
       <!-- Left Menu End -->
 
       <main
-        ref="pageBuilderWrapper"
+        ref="pbxBuilderWrapper"
         id="page-builder-wrapper"
-        class="pbx-transition-all pbx-duration-300 pbx-font-sans pbx-p-1 pbx-flex pbx-flex-col pbx-grow pbx-rounded-tr-2xl pbx-rounded-tl-2xl pbx-border-solid pbx-border pbx-border-gray-200 pbx-items-stretch pbx-text-black pbx-h-[100vh] pbx-overflow-y-auto"
+        class="pbx-transition-all pbx-duration-300 pbx-font-sans pbx-p-1 pbx-flex pbx-flex-col pbx-grow pbx-rounded-tr-2xl pbx-rounded-tl-2xl pbx-border-solid pbx-border pbx-border-gray-200 pbx-items-stretch pbx-text-black pbx-h-[100vh] pbx-overflow-y-scroll pbx-relative pbx-pt-14"
         :class="[getMenuRight ? 'pbx-w-full' : 'pbx-w-full']"
       >
         <div
           id="pbxEditToolbar"
           class="pbx-z-30 lg:pbx-mx-20 pbx-flex pbx-gap-2 pbx-justify-center pbx-items-center pbx-rounded pbx-px-4 pbx-bg-red-200 pbx-h-0"
-          style="
-            box-shadow: 0 0 0 10px oklch(86.9% 0.005 56.366);
-            background: oklch(86.9% 0.005 56.366);
-          "
         >
           <template v-if="getElement">
             <EditGetElement></EditGetElement>

package/src/css/style.css

@@ -395,6 +395,8 @@
   padding-right: 1rem;
   padding-left: 1rem;
   height: 2.2rem;
+  box-shadow: 0 0 0 10px oklch(86.9% 0.005 56.366);
+  background: oklch(86.9% 0.005 56.366);
 }
 
 /* CSS for content inside page builder # start */
@@ -476,3 +478,29 @@
   list-style: disc !important;
   padding: 0rem;
 }
+
+.pbx-reorder-highlight {
+  animation: pbx-reorder-flash 0.4s ease-in-out;
+}
+
+@keyframes pbx-reorder-flash {
+  0% {
+    box-shadow: 0 0 0 0px rgba(66, 153, 225, 0.7);
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    box-shadow: 0 0 0 10px rgba(66, 153, 225, 0);
+    transform: scale(0.2); /* Even more shrink */
+    opacity: 0.8;
+  }
+  100% {
+    box-shadow: 0 0 0 0px rgba(66, 153, 225, 0);
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.pbx-sibling-highlight {
+  border: 2px dashed #4299e1; /* Blue dashed border */
+}

package/src/services/PageBuilderService.ts

@@ -984,7 +984,6 @@ export class PageBuilderService {
     await this.handleAutoSave()
   }
 
-  private historyIndex: number = -1
   private getHistoryBaseKey(): string | null {
     return this.getLocalStorageItemName.value
   }
@@ -993,7 +992,8 @@ export class PageBuilderService {
     const baseKey = this.getHistoryBaseKey()
     if (baseKey) {
       const history = LocalStorageManager.getHistory(baseKey)
-      this.historyIndex = history.length - 1
+      this.pageBuilderStateStore.setHistoryIndex(history.length - 1)
+      this.pageBuilderStateStore.setHistoryLength(history.length)
     }
   }
 
@@ -1458,9 +1458,9 @@ export class PageBuilderService {
     if (!baseKey) return
 
     const history = LocalStorageManager.getHistory(baseKey)
-    if (history.length > 1 && this.historyIndex > 0) {
-      this.historyIndex--
-      const data = history[this.historyIndex]
+    if (history.length > 1 && this.pageBuilderStateStore.getHistoryIndex > 0) {
+      this.pageBuilderStateStore.setHistoryIndex(this.pageBuilderStateStore.getHistoryIndex - 1)
+      const data = history[this.pageBuilderStateStore.getHistoryIndex]
       const htmlString = this.renderComponentsToHtml(data.components)
       await this.mountComponentsToDOM(htmlString)
     }
@@ -1474,9 +1474,9 @@ export class PageBuilderService {
     if (!baseKey) return
 
     const history = LocalStorageManager.getHistory(baseKey)
-    if (history.length > 0 && this.historyIndex < history.length - 1) {
-      this.historyIndex++
-      const data = history[this.historyIndex]
+    if (history.length > 0 && this.pageBuilderStateStore.getHistoryIndex < history.length - 1) {
+      this.pageBuilderStateStore.setHistoryIndex(this.pageBuilderStateStore.getHistoryIndex + 1)
+      const data = history[this.pageBuilderStateStore.getHistoryIndex]
       const htmlString = this.renderComponentsToHtml(data.components)
       await this.mountComponentsToDOM(htmlString)
     }
@@ -1632,7 +1632,7 @@ export class PageBuilderService {
    * Reorders the currently selected component up or down in the component list.
    * @param {number} direction - The direction to move the component (-1 for up, 1 for down).
    */
-  public reorderComponent(direction: number): void {
+  public async reorderComponent(direction: number): Promise<void> {
     if (!this.getComponents.value || !this.getComponent.value) return
 
     if (this.getComponents.value.length <= 1) return
@@ -1660,6 +1660,69 @@ export class PageBuilderService {
     // Move the component to the new position in the array.
     this.getComponents.value.splice(currentIndex, 1)
     this.getComponents.value.splice(newIndex, 0, componentToMove)
+
+    // Wait for the DOM to update after reordering
+    await nextTick()
+
+    // Scroll to the moved component
+    const pageBuilderWrapper = document.querySelector('#page-builder-wrapper')
+    const movedComponentElement = pageBuilderWrapper?.querySelector(
+      `section[data-componentid="${componentToMove.id}"]`,
+    )
+
+    if (movedComponentElement) {
+      // Apply highlight to the moved element
+      movedComponentElement.classList.add('pbx-reorder-highlight')
+
+      // Highlight its new neighbors (if they exist)
+      const prevSibling = movedComponentElement.previousElementSibling as HTMLElement
+      const nextSibling = movedComponentElement.nextElementSibling as HTMLElement
+
+      if (prevSibling && prevSibling.tagName === 'SECTION') {
+        prevSibling.classList.add('pbx-sibling-highlight')
+      }
+      if (nextSibling && nextSibling.tagName === 'SECTION') {
+        nextSibling.classList.add('pbx-sibling-highlight')
+      }
+
+      // Scroll to the moved component
+      movedComponentElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
+
+      // Remove highlights after a delay
+      setTimeout(() => {
+        movedComponentElement.classList.remove('pbx-reorder-highlight')
+        if (prevSibling && prevSibling.tagName === 'SECTION') {
+          prevSibling.classList.remove('pbx-sibling-highlight')
+        }
+        if (nextSibling && nextSibling.tagName === 'SECTION') {
+          nextSibling.classList.remove('pbx-sibling-highlight')
+        }
+      }, 1000) // Adjust delay as needed
+    }
+  }
+
+  /**
+   * Checks if the currently selected component can be moved up.
+   * @returns {boolean} True if the component can be moved up, false otherwise.
+   */
+  public canMoveUp(): boolean {
+    if (!this.getComponents.value || !this.getComponent.value) return false
+    const currentIndex = this.getComponents.value.findIndex(
+      (component) => component.id === this.getComponent.value?.id,
+    )
+    return currentIndex > 0
+  }
+
+  /**
+   * Checks if the currently selected component can be moved down.
+   * @returns {boolean} True if the component can be moved down, false otherwise.
+   */
+  public canMoveDown(): boolean {
+    if (!this.getComponents.value || !this.getComponent.value) return false
+    const currentIndex = this.getComponents.value.findIndex(
+      (component) => component.id === this.getComponent.value?.id,
+    )
+    return currentIndex < this.getComponents.value.length - 1
   }
 
   /**
@@ -1890,15 +1953,16 @@ export class PageBuilderService {
         }
       }
 
-      if (this.historyIndex < history.length - 1) {
-        history = history.slice(0, this.historyIndex + 1)
+      if (this.pageBuilderStateStore.getHistoryIndex < history.length - 1) {
+        history = history.slice(0, this.pageBuilderStateStore.getHistoryIndex + 1)
       }
       history.push(dataToSave)
       if (history.length > 10) {
         history = history.slice(history.length - 10)
       }
       localStorage.setItem(baseKey + '-history', JSON.stringify(history))
-      this.historyIndex = history.length - 1
+      this.pageBuilderStateStore.setHistoryIndex(history.length - 1)
+      this.pageBuilderStateStore.setHistoryLength(history.length)
     }
   }
   /**

package/src/stores/page-builder-state.ts

@@ -65,6 +65,8 @@ interface PageBuilderState {
   isResumeEditing: boolean
   isRestoring: boolean
   currentLanguage: string | null
+  historyIndex: number
+  historyLength: number
 }
 
 export const usePageBuilderStateStore = defineStore('pageBuilderState', {
@@ -125,6 +127,8 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     isResumeEditing: false,
     isRestoring: false,
     currentLanguage: null,
+    historyIndex: -1,
+    historyLength: 0,
   }),
   getters: {
     // Core Page Builder Getters
@@ -273,6 +277,8 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     getIsLoadingResumeEditing: (state: PageBuilderState): boolean => state.isResumeEditing,
     getIsRestoring: (state: PageBuilderState): boolean => state.isRestoring,
     getCurrentLanguage: (state: PageBuilderState): string | null => state.currentLanguage,
+    getHistoryIndex: (state: PageBuilderState): number => state.historyIndex,
+    getHistoryLength: (state: PageBuilderState): number => state.historyLength,
   },
   actions: {
     setComponentArrayAddMethod(payload: string | null): void {
@@ -473,5 +479,11 @@ export const usePageBuilderStateStore = defineStore('pageBuilderState', {
     setCurrentLanguage(payload: string): void {
       this.currentLanguage = payload
     },
+    setHistoryIndex(payload: number): void {
+      this.historyIndex = payload
+    },
+    setHistoryLength(payload: number): void {
+      this.historyLength = payload
+    },
   },
 })

package/src/tests/DefaultComponents/DefaultBuilderComponents.vue

@@ -147,7 +147,7 @@ const getSvgPreview = (title: string) => {
             v-for="category in categories"
             :key="category"
             @click="selectedCategory = category"
-            class="pbx-mySecondaryButton pbx-px-2 pbx-text-xs"
+            class="pbx-mySecondaryButton pbx-text-xs pbx-px-4"
             :class="{ active: selectedCategory === category }"
           >
             {{ translate(category) }}

package/src/tests/pageBuilderService.test.ts

@@ -5,20 +5,119 @@ import { usePageBuilderStateStore } from '../stores/page-builder-state'
 import componentsArray from './componentsArray.test.json'
 
 // Mock store (replace with your actual store or a better mock if needed)
-const mockStore: ReturnType<typeof usePageBuilderStateStore> = {
+const mockStore = {
+  // Mock getters
+  getApplyImageToSelection: { src: '' },
+  getLocalStorageItemName: 'test-key',
+  getHyberlinkEnable: false,
+  getComponents: [],
+  getComponent: null,
+  getElement: null,
+  getComponentArrayAddMethod: null,
+  getShowModalTipTap: false,
+  getMenuRight: false,
+  getBorderStyle: null,
+  getBorderWidth: null,
+  getBorderColor: null,
+  getBorderRadiusGlobal: null,
+  getBorderRadiusTopLeft: null,
+  getBorderRadiusTopRight: null,
+  getBorderRadiusBottomleft: null,
+  getBorderRadiusBottomRight: null,
+  getElementContainsHyperlink: null,
+  getHyperlinkAbility: null,
+  getHyperlinkInput: null,
+  getHyperlinkMessage: null,
+  getHyperlinkError: null,
+  getOpenHyperlinkInNewTab: null,
+  getOpacity: null,
+  getBackgroundOpacity: null,
+  getTextAreaVueModel: null,
+  getCurrentClasses: [],
+  getCurrentStyles: {},
+  getFontVerticalPadding: null,
+  getFontHorizontalPadding: null,
+  getFontVerticalMargin: null,
+  getFontHorizontalMargin: null,
+  getFontStyle: null,
+  getFontFamily: null,
+  getFontWeight: null,
+  getFontBase: null,
+  getFontDesktop: null,
+  getFontTablet: null,
+  getFontMobile: null,
+  getBackgroundColor: null,
+  getTextColor: null,
+  getBasePrimaryImage: null,
+  getPageBuilderConfig: null,
+  getCurrentPreviewImage: null,
+  getBuilderStarted: false,
+  getIsLoadingGlobal: false,
+  getIsSaving: false,
+  getHasLocalDraftForUpdate: false,
+  getIsLoadingResumeEditing: false,
+  getIsRestoring: false,
+  getCurrentLanguage: null,
+  getHistoryIndex: 0,
+  getHistoryLength: 0,
+
+  // Mock actions
   setBuilderStarted: vi.fn(),
   setPageBuilderConfig: vi.fn(),
-  getPageBuilderConfig: {},
+  setHistoryIndex: vi.fn(),
+  setHistoryLength: vi.fn(),
+  setLocalStorageItemName: vi.fn(),
+  setShowModalTipTap: vi.fn(),
+  setMenuRight: vi.fn(),
+  setBorderStyle: vi.fn(),
+  setBorderWidth: vi.fn(),
+  setBorderColor: vi.fn(),
+  setBorderRadiusGlobal: vi.fn(),
+  setBorderRadiusTopLeft: vi.fn(),
+  setBorderRadiusTopRight: vi.fn(),
+  setBorderRadiusBottomleft: vi.fn(),
+  setBorderRadiusBottomRight: vi.fn(),
+  setElementContainsHyperlink: vi.fn(),
+  setHyperlinkAbility: vi.fn(),
+  setHyperlinkInput: vi.fn(),
+  setHyperlinkMessage: vi.fn(),
+  setHyperlinkError: vi.fn(),
+  setHyberlinkEnable: vi.fn(),
+  setOpenHyperlinkInNewTab: vi.fn(),
+  setOpacity: vi.fn(),
+  setBackgroundOpacity: vi.fn(),
+  setTextAreaVueModel: vi.fn(),
+  setClass: vi.fn(),
+  removeClass: vi.fn(),
+  setCurrentClasses: vi.fn(),
+  setCurrentStyles: vi.fn(),
+  setFontVerticalPadding: vi.fn(),
+  setFontHorizontalPadding: vi.fn(),
+  setFontVerticalMargin: vi.fn(),
+  setFontHorizontalMargin: vi.fn(),
+  setFontStyle: vi.fn(),
+  setFontFamily: vi.fn(),
+  setFontWeight: vi.fn(),
+  setFontBase: vi.fn(),
+  setFontDesktop: vi.fn(),
+  setFontTablet: vi.fn(),
+  setFontMobile: vi.fn(),
+  setBackgroundColor: vi.fn(),
+  setTextColor: vi.fn(),
+  setElement: vi.fn(),
+  setComponent: vi.fn(),
   setComponents: vi.fn(),
+  setPushComponents: vi.fn(),
+  setBasePrimaryImage: vi.fn(),
+  setCurrentLayoutPreview: vi.fn(),
+  setApplyImageToSelection: vi.fn(),
+  setCurrentPreviewImage: vi.fn(),
   setIsLoadingGlobal: vi.fn(),
-  setIsRestoring: vi.fn(),
-  setIsLoadingResumeEditing: vi.fn(),
+  setIsSaving: vi.fn(),
   setHasLocalDraftForUpdate: vi.fn(),
-  setComponent: vi.fn(),
-  setElement: vi.fn(),
-  getLocalStorageItemName: 'test-key',
-  setLocalStorageItemName: vi.fn(),
-  // ...add more as needed for your test
+  setIsLoadingResumeEditing: vi.fn(),
+  setIsRestoring: vi.fn(),
+  setCurrentLanguage: vi.fn(),
 } as unknown as ReturnType<typeof usePageBuilderStateStore>
 
 const configPageBuilder = {
@@ -60,7 +159,7 @@ describe('PageBuilderService', () => {
 
   it('should handle missing components array gracefully', async () => {
     const result = await service.startBuilder(configPageBuilder)
-    expect(result).toHaveProperty('message', 'Page builder started successfully.')
-    // Add more assertions for this scenario
+    expect(result).toHaveProperty('validation.error', true)
+    expect(result).toHaveProperty('validation.reason', 'Components data must be an array.')
   })
 })