@myissue/vue-website-page-builder 3.3.61 → 3.3.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "3.3.61",
+  "version": "3.3.63",
   "description": "Vue 3 page builder component with drag & drop functionality.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",
@@ -64,7 +64,8 @@
     "type-check": "vue-tsc --build",
     "lint": "eslint . --fix",
     "format": "prettier --write src/",
-    "prepublishOnly": "npm run build:lib"
+    "prepublishOnly": "npm run build:lib",
+    "test": "vitest"
   },
   "dependencies": {
     "@headlessui/vue": "^1.7.23",
@@ -95,6 +96,7 @@
     "eslint": "^9.22.0",
     "eslint-plugin-vue": "~10.0.0",
     "jiti": "^2.4.2",
+    "jsdom": "^26.1.0",
     "npm-run-all2": "^7.0.2",
     "postcss": "^8.4.39",
     "prettier": "3.5.3",
@@ -102,6 +104,7 @@
     "typescript": "~5.8.0",
     "vite": "^6.2.4",
     "vite-plugin-vue-devtools": "^7.7.2",
+    "vitest": "^3.2.4",
     "vue-tsc": "^2.2.8"
   }
 }

package/src/App.vue

@@ -1,13 +1,13 @@
 <script setup>
 import Navbar from './Components/Homepage/Navbar.vue'
-import HomeSection from './DemoComponents/HomeSection.vue'
+import PageBuilderTest from './tests/PageBuilderTest.vue'
 import Footer from './Components/Homepage/Footer.vue'
 </script>
 
 <template>
   <div>
     <Navbar></Navbar>
-    <HomeSection></HomeSection>
+    <PageBuilderTest></PageBuilderTest>
     <Footer></Footer>
   </div>
 </template>

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

@@ -57,7 +57,7 @@ watch(
 
         <ListboxButton
           v-if="!globalPageLayout"
-          class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white pbx-bg-gray-300 focus-visible:pbx-ring-0"
+          class="pbx-h-10 pbx-w-10 pbx-flex-end 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-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
         >
           <div class="pbx-flex pbx-flex-col">
             <div class="pbx-flex pbx-gap-2 pbx-items-center">

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

@@ -57,7 +57,7 @@ watch(
 
         <ListboxButton
           v-if="!globalPageLayout"
-          class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white pbx-bg-gray-300 focus-visible:pbx-ring-0"
+          class="pbx-h-10 pbx-w-10 pbx-flex-end 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-gray-100 hover:pbx-fill-white focus-visible:pbx-ring-0"
         >
           <div class="pbx-flex pbx-flex-col">
             <div class="pbx-flex pbx-gap-2 pbx-items-center">

package/src/composables/builderInstance.ts

@@ -1,5 +1,5 @@
 // builderInstance.ts
-import { PageBuilderService } from '../composables/PageBuilderService'
+import { PageBuilderService } from '../services/PageBuilderService'
 import { sharedPageBuilderStore } from '../stores/shared-store'
 
 // Singleton instance

package/src/index.ts

@@ -20,6 +20,6 @@ import './css/app.css'
 // Export shared store instances for external access
 export { sharedPageBuilderPinia, sharedPageBuilderStore } from './stores/shared-store'
 
-// export { PageBuilderService } from './composables/PageBuilderService.ts'
+// export { PageBuilderService } from './src/services/PageBuilderService.ts'
 
 export { initPageBuilder, getPageBuilder } from './composables/builderInstance'

package/src/services/LocalStorageManager.ts

@@ -0,0 +1,162 @@
+import { usePageBuilderStateStore } from '../stores/shared-store'
+
+export class LocalStorageManager {
+  private pageBuilderStateStore: ReturnType<typeof usePageBuilderStateStore>
+  private sanitizeForLocalStorage: (input: string) => string
+
+  constructor(
+    pageBuilderStateStore: ReturnType<typeof usePageBuilderStateStore>,
+    sanitizeForLocalStorage: (input: string) => string,
+  ) {
+    this.pageBuilderStateStore = pageBuilderStateStore
+    this.sanitizeForLocalStorage = sanitizeForLocalStorage
+  }
+
+  public updateLocalStorageItemName(): void {
+    const formtype =
+      this.pageBuilderStateStore.getPageBuilderConfig &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType
+
+    const formname =
+      this.pageBuilderStateStore.getPageBuilderConfig &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formName
+
+    const resourceData =
+      this.pageBuilderStateStore.getPageBuilderConfig &&
+      this.pageBuilderStateStore.getPageBuilderConfig.resourceData
+
+    // Logic for create resource
+    if (formtype === 'create') {
+      if (formname && formname.length > 0) {
+        this.pageBuilderStateStore.setLocalStorageItemName(
+          `page-builder-create-resource-${this.sanitizeForLocalStorage(formname)}`,
+        )
+        return
+      }
+
+      this.pageBuilderStateStore.setLocalStorageItemName(`page-builder-create-resource`)
+      return
+    }
+
+    // Logic for create
+    // Logic for update and with resource form name
+    if (formtype === 'update') {
+      if (typeof formname === 'string' && formname.length > 0) {
+        //
+        //
+        if (resourceData && resourceData != null && !resourceData.title) {
+          // Check if id is missing, null, undefined, or an empty string (after trimming)
+          if (!resourceData.id || typeof resourceData.id === 'string') {
+            this.pageBuilderStateStore.setLocalStorageItemName(
+              `page-builder-update-resource-${this.sanitizeForLocalStorage(formname)}`,
+            )
+            return
+          }
+        }
+
+        // Runs when resourceData has title but no ID
+        if (resourceData && resourceData != null) {
+          if (
+            resourceData.title &&
+            typeof resourceData.title === 'string' &&
+            resourceData.title.length > 0
+          ) {
+            if (!resourceData.id || typeof resourceData.id === 'string') {
+              this.pageBuilderStateStore.setLocalStorageItemName(
+                `page-builder-update-resource-${this.sanitizeForLocalStorage(formname)}-${this.sanitizeForLocalStorage(resourceData.title)}`,
+              )
+              return
+            }
+          }
+        }
+
+        // Runs when resourceData has ID but no title
+        if (resourceData && resourceData != null) {
+          if (!resourceData.title && typeof resourceData.title !== 'string') {
+            if (resourceData.id || typeof resourceData.id === 'number') {
+              this.pageBuilderStateStore.setLocalStorageItemName(
+                `page-builder-update-resource-${this.sanitizeForLocalStorage(formname)}-${this.sanitizeForLocalStorage(String(resourceData.id))}`,
+              )
+              return
+            }
+          }
+        }
+
+        // Runs when resourceData has both title and ID
+        if (resourceData && resourceData != null) {
+          if (
+            resourceData.title &&
+            typeof resourceData.title === 'string' &&
+            resourceData.title.length > 0
+          ) {
+            if (resourceData.id || typeof resourceData.id === 'number') {
+              this.pageBuilderStateStore.setLocalStorageItemName(
+                `page-builder-update-resource-${this.sanitizeForLocalStorage(formname)}-${this.sanitizeForLocalStorage(resourceData.title)}-${this.sanitizeForLocalStorage(String(resourceData.id))}`,
+              )
+              return
+            }
+          }
+        }
+      }
+
+      // Logic for update without without formname
+      if (!formname || (typeof formname === 'string' && formname.length === 0)) {
+        //
+        //
+        if (resourceData && resourceData != null && !resourceData.title) {
+          // Check if id is missing, null, undefined, or an empty string (after trimming)
+          if (!resourceData.id || typeof resourceData.id === 'string') {
+            this.pageBuilderStateStore.setLocalStorageItemName(`page-builder-update-resource`)
+            return
+          }
+        }
+
+        // Runs when resourceData has title but no ID
+        if (resourceData && resourceData != null) {
+          if (
+            resourceData.title &&
+            typeof resourceData.title === 'string' &&
+            resourceData.title.length > 0
+          ) {
+            if (!resourceData.id || typeof resourceData.id === 'string') {
+              this.pageBuilderStateStore.setLocalStorageItemName(
+                `page-builder-update-resource-${this.sanitizeForLocalStorage(resourceData.title)}`,
+              )
+              return
+            }
+          }
+        }
+
+        // Runs when resourceData has ID but no title
+        if (resourceData && resourceData != null) {
+          if (!resourceData.title && typeof resourceData.title !== 'string') {
+            if (resourceData.id || typeof resourceData.id === 'number') {
+              this.pageBuilderStateStore.setLocalStorageItemName(
+                `page-builder-update-resource-${this.sanitizeForLocalStorage(String(resourceData.id))}`,
+              )
+              return
+            }
+          }
+        }
+
+        // Runs when resourceData has both title and ID
+        if (resourceData && resourceData != null) {
+          if (
+            resourceData.title &&
+            typeof resourceData.title === 'string' &&
+            resourceData.title.length > 0
+          ) {
+            if (resourceData.id || typeof resourceData.id === 'number') {
+              this.pageBuilderStateStore.setLocalStorageItemName(
+                `page-builder-update-resource-${this.sanitizeForLocalStorage(resourceData.title)}-${this.sanitizeForLocalStorage(String(resourceData.id))}`,
+              )
+              return
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/{composables → services}/PageBuilderService.ts

@@ -1,3 +1,5 @@
+import { LocalStorageManager } from './LocalStorageManager'
+
 // Type definitions
 import type {
   BuilderResourceData,
@@ -6,7 +8,6 @@ import type {
   PageBuilderConfig,
   StartBuilderResult,
 } from '../types'
-
 import type { usePageBuilderStateStore } from '../stores/page-builder-state'
 
 import tailwindFontSizes from '../utils/builder/tailwind-font-sizes'
@@ -19,16 +20,16 @@ import tailwindBorderStyleWidthPlusColor from '../utils/builder/tailwind-border-
 import { computed, ref, nextTick } from 'vue'
 import type { ComputedRef } from 'vue'
 import { v4 as uuidv4 } from 'uuid'
-import { delay } from './delay'
+import { delay } from '../composables/delay'
 import { isEmptyObject } from '../helpers/isEmptyObject'
-import { extractCleanHTMLFromPageBuilder } from './extractCleanHTMLFromPageBuilder'
+import { extractCleanHTMLFromPageBuilder } from '../composables/extractCleanHTMLFromPageBuilder'
 
 export class PageBuilderService {
   // Class properties with types
   private fontSizeRegex =
     /^(sm:|md:|lg:|xl:|2xl:)?pbx-text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/
 
-  private pageBuilderStateStore: ReturnType<typeof usePageBuilderStateStore>
+  protected pageBuilderStateStore: ReturnType<typeof usePageBuilderStateStore>
   private getLocalStorageItemName: ComputedRef<string | null>
   private getApplyImageToSelection: ComputedRef<ImageObject>
   private getHyberlinkEnable: ComputedRef<boolean>
@@ -46,8 +47,13 @@ export class PageBuilderService {
   // Holds data to be mounted when #pagebuilder is not yet present in the DOM
   private pendingMountData: BuilderResourceData | null = null
   private isPageBuilderMissingOnStart: boolean = false
+  private localStorageManager: LocalStorageManager
 
   constructor(pageBuilderStateStore: ReturnType<typeof usePageBuilderStateStore>) {
+    this.localStorageManager = new LocalStorageManager(
+      pageBuilderStateStore,
+      this.sanitizeForLocalStorage,
+    )
     this.hasStartedEditing = false
     this.pageBuilderStateStore = pageBuilderStateStore
 
@@ -276,7 +282,7 @@ export class PageBuilderService {
       validation = this.#validateUserProvidedComponents(passedComponentsArray)
 
       // Update the localStorage key name based on the config/resource
-      this.#updateLocalStorageItemName()
+      this.localStorageManager.updateLocalStorageItemName()
 
       // Page Builder is not Present in the DOM but Components have been passed to the Builder
       if (!pagebuilder) {
@@ -335,7 +341,12 @@ export class PageBuilderService {
     //
     if (formType === 'update' || formType === 'create') {
       if (!this.pendingMountData) {
-        // FOCUS ON: passedComponentsArray
+        //
+        //
+        if (!passedComponentsArray && !this.isPageBuilderMissingOnStart && localStorageData) {
+          await this.#completeMountProcess(localStorageData)
+          return
+        }
         if (passedComponentsArray && !localStorageData) {
           await this.#completeMountProcess(JSON.stringify(passedComponentsArray), true)
           return
@@ -1298,7 +1309,7 @@ export class PageBuilderService {
     }
   }
   // Helper function to sanitize title for localStorage key
-  private sanitizeForLocalStorage(input: string): string {
+  public sanitizeForLocalStorage(input: string): string {
     return input
       .trim() // Remove leading/trailing spaces
       .toLowerCase() // Convert to lowercase
@@ -1308,154 +1319,6 @@ export class PageBuilderService {
       .replace(/^-+|-+$/g, '') // Remove leading/trailing hyphens
   }
 
-  #updateLocalStorageItemName(): void {
-    const formtype =
-      this.pageBuilderStateStore.getPageBuilderConfig &&
-      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
-      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType
-
-    const formname =
-      this.pageBuilderStateStore.getPageBuilderConfig &&
-      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
-      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formName
-
-    const resourceData =
-      this.pageBuilderStateStore.getPageBuilderConfig &&
-      this.pageBuilderStateStore.getPageBuilderConfig.resourceData
-
-    // Logic for create resource
-    if (formtype === 'create') {
-      if (formname && formname.length > 0) {
-        this.pageBuilderStateStore.setLocalStorageItemName(
-          `page-builder-create-resource-${this.sanitizeForLocalStorage(formname)}`,
-        )
-        return
-      }
-
-      this.pageBuilderStateStore.setLocalStorageItemName(`page-builder-create-resource`)
-      return
-    }
-
-    // Logic for create
-    // Logic for update and with resource form name
-    if (formtype === 'update') {
-      if (typeof formname === 'string' && formname.length > 0) {
-        //
-        //
-        if (resourceData && resourceData != null && !resourceData.title) {
-          // Check if id is missing, null, undefined, or an empty string (after trimming)
-          if (!resourceData.id || typeof resourceData.id === 'string') {
-            this.pageBuilderStateStore.setLocalStorageItemName(
-              `page-builder-update-resource-${this.sanitizeForLocalStorage(formname)}`,
-            )
-            return
-          }
-        }
-
-        // Runs when resourceData has title but no ID
-        if (resourceData && resourceData != null) {
-          if (
-            resourceData.title &&
-            typeof resourceData.title === 'string' &&
-            resourceData.title.length > 0
-          ) {
-            if (!resourceData.id || typeof resourceData.id === 'string') {
-              this.pageBuilderStateStore.setLocalStorageItemName(
-                `page-builder-update-resource-${this.sanitizeForLocalStorage(formname)}-${this.sanitizeForLocalStorage(resourceData.title)}`,
-              )
-              return
-            }
-          }
-        }
-
-        // Runs when resourceData has ID but no title
-        if (resourceData && resourceData != null) {
-          if (!resourceData.title && typeof resourceData.title !== 'string') {
-            if (resourceData.id || typeof resourceData.id === 'number') {
-              this.pageBuilderStateStore.setLocalStorageItemName(
-                `page-builder-update-resource-${this.sanitizeForLocalStorage(formname)}-${this.sanitizeForLocalStorage(String(resourceData.id))}`,
-              )
-              return
-            }
-          }
-        }
-
-        // Runs when resourceData has both title and ID
-        if (resourceData && resourceData != null) {
-          if (
-            resourceData.title &&
-            typeof resourceData.title === 'string' &&
-            resourceData.title.length > 0
-          ) {
-            if (resourceData.id || typeof resourceData.id === 'number') {
-              this.pageBuilderStateStore.setLocalStorageItemName(
-                `page-builder-update-resource-${this.sanitizeForLocalStorage(formname)}-${this.sanitizeForLocalStorage(resourceData.title)}-${this.sanitizeForLocalStorage(String(resourceData.id))}`,
-              )
-              return
-            }
-          }
-        }
-      }
-
-      // Logic for update without without formname
-      if (!formname || (typeof formname === 'string' && formname.length === 0)) {
-        //
-        //
-        if (resourceData && resourceData != null && !resourceData.title) {
-          // Check if id is missing, null, undefined, or an empty string (after trimming)
-          if (!resourceData.id || typeof resourceData.id === 'string') {
-            this.pageBuilderStateStore.setLocalStorageItemName(`page-builder-update-resource`)
-            return
-          }
-        }
-
-        // Runs when resourceData has title but no ID
-        if (resourceData && resourceData != null) {
-          if (
-            resourceData.title &&
-            typeof resourceData.title === 'string' &&
-            resourceData.title.length > 0
-          ) {
-            if (!resourceData.id || typeof resourceData.id === 'string') {
-              this.pageBuilderStateStore.setLocalStorageItemName(
-                `page-builder-update-resource-${this.sanitizeForLocalStorage(resourceData.title)}`,
-              )
-              return
-            }
-          }
-        }
-
-        // Runs when resourceData has ID but no title
-        if (resourceData && resourceData != null) {
-          if (!resourceData.title && typeof resourceData.title !== 'string') {
-            if (resourceData.id || typeof resourceData.id === 'number') {
-              this.pageBuilderStateStore.setLocalStorageItemName(
-                `page-builder-update-resource-${this.sanitizeForLocalStorage(String(resourceData.id))}`,
-              )
-              return
-            }
-          }
-        }
-
-        // Runs when resourceData has both title and ID
-        if (resourceData && resourceData != null) {
-          if (
-            resourceData.title &&
-            typeof resourceData.title === 'string' &&
-            resourceData.title.length > 0
-          ) {
-            if (resourceData.id || typeof resourceData.id === 'number') {
-              this.pageBuilderStateStore.setLocalStorageItemName(
-                `page-builder-update-resource-${this.sanitizeForLocalStorage(resourceData.title)}-${this.sanitizeForLocalStorage(String(resourceData.id))}`,
-              )
-              return
-            }
-          }
-        }
-      }
-    }
-  }
-
   /**
    * Returns a clone of the given element with [hovered] and [selected] attributes
    * removed from itself and all descendants. Does NOT mutate the live DOM.
@@ -1501,7 +1364,7 @@ export class PageBuilderService {
    * Saves the current DOM state (components) to localStorage.
    */
   #saveDomComponentsToLocalStorage() {
-    this.#updateLocalStorageItemName()
+    this.localStorageManager.updateLocalStorageItemName()
     const pagebuilder = document.querySelector('#pagebuilder')
     if (!pagebuilder) return
 
@@ -1540,7 +1403,7 @@ export class PageBuilderService {
     }
   }
   async removeCurrentComponentsFromLocalStorage() {
-    this.#updateLocalStorageItemName()
+    this.localStorageManager.updateLocalStorageItemName()
     await nextTick()
 
     const key = this.getLocalStorageItemName.value
@@ -1609,7 +1472,7 @@ export class PageBuilderService {
 
   //
   async resumeEditingFromDraft() {
-    this.#updateLocalStorageItemName()
+    this.localStorageManager.updateLocalStorageItemName()
 
     const localStorageData = this.loadStoredComponentsFromStorage()
 
@@ -1629,7 +1492,7 @@ export class PageBuilderService {
   }
 
   async restoreOriginalContent() {
-    this.#updateLocalStorageItemName()
+    this.localStorageManager.updateLocalStorageItemName()
 
     this.pageBuilderStateStore.setIsRestoring(true)
     await delay(400)
@@ -1653,7 +1516,7 @@ export class PageBuilderService {
   }
 
   loadStoredComponentsFromStorage() {
-    this.#updateLocalStorageItemName()
+    this.localStorageManager.updateLocalStorageItemName()
     if (!this.getLocalStorageItemName.value) return false
 
     if (

package/src/{DemoComponents/HomeSection.vue → tests/PageBuilderTest.vue}

@@ -1,13 +1,10 @@
 <script setup lang="ts">
 import FullWidthElement from '../Components/Layouts/FullWidthElement.vue'
 import PageBuilder from '../PageBuilder/PageBuilder.vue'
-
-import DemoMediaLibraryComponent from './DemoMediaLibraryComponent.vue'
-import DemoBuilderComponents from './DemoBuilderComponents.vue'
+import DemoMediaLibraryComponentTest from '../tests/TestComponents/DemoMediaLibraryComponentTest.vue'
+import DemoBuilderComponentsTest from '../tests/TestComponents/DemoBuilderComponentsTest.vue'
 import { onMounted } from 'vue'
-import oldhtmlfromdb from './oldhtmlfromdb.json'
-import html from './html.json'
-import { rawHTML } from './rawHTML'
+import componentsArray from '../tests/componentsArray.test.json'
 
 import { getPageBuilder } from '../composables/builderInstance'
 const pageBuilderService = getPageBuilder()
@@ -61,7 +58,7 @@ const configPageBuilder = {
     image: '/jane_doe.jpg',
   },
   updateOrCreate: {
-    formType: 'create',
+    formType: 'update',
     formName: 'collection',
   },
   pageBuilderLogo: {
@@ -132,8 +129,8 @@ onMounted(async () => {
         </div>
       </div>
       <div class="pbx-m-4">
-        <!--   :CustomBuilderComponents="DemoBuilderComponents" -->
-        <PageBuilder :CustomMediaLibraryComponent="DemoMediaLibraryComponent"></PageBuilder>
+        <!--   :CustomBuilderComponents="DemoBuilderComponentsTest" -->
+        <PageBuilder :CustomMediaLibraryComponent="DemoMediaLibraryComponentTest"></PageBuilder>
       </div>
     </div>
 

package/src/{DemoComponents/DemoMediaLibraryComponent.vue → tests/TestComponents/DemoMediaLibraryComponentTest.vue}

@@ -1,5 +1,5 @@
 <script setup>
-import Unsplash from './DemoUnsplash.vue'
+import Unsplash from '../../Components/DemoUnsplash.vue'
 </script>
 <template>
   <div>

package/src/tests/pageBuilderService.test.ts

@@ -0,0 +1,66 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach, beforeAll } from 'vitest'
+import { PageBuilderService } from '../services/PageBuilderService'
+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> = {
+  setBuilderStarted: vi.fn(),
+  setPageBuilderConfig: vi.fn(),
+  getPageBuilderConfig: {},
+  setComponents: vi.fn(),
+  setIsLoadingGlobal: vi.fn(),
+  setIsRestoring: vi.fn(),
+  setIsLoadingResumeEditing: vi.fn(),
+  setHasLocalDraftForUpdate: vi.fn(),
+  setComponent: vi.fn(),
+  setElement: vi.fn(),
+  getLocalStorageItemName: 'test-key',
+  setLocalStorageItemName: vi.fn(),
+  // ...add more as needed for your test
+} as unknown as ReturnType<typeof usePageBuilderStateStore>
+
+const configPageBuilder = {
+  updateOrCreate: {
+    formType: 'update',
+    formName: 'collection',
+  },
+  // ...other config options as needed
+} as const
+
+beforeAll(() => {
+  // Create a fake #pagebuilder element in the DOM for the test
+  const div = document.createElement('div')
+  div.id = 'pagebuilder'
+  document.body.appendChild(div)
+})
+
+describe('PageBuilderService', () => {
+  let service: PageBuilderService
+
+  beforeEach(() => {
+    // Reset mocks before each test
+    Object.values(mockStore).forEach(
+      (fn) =>
+        typeof fn === 'function' &&
+        typeof (fn as { mockClear?: () => void }).mockClear === 'function' &&
+        (fn as { mockClear: () => void }).mockClear(),
+    )
+    service = new PageBuilderService(mockStore)
+  })
+
+  it('should start builder and return a success message', async () => {
+    const result = await service.startBuilder(configPageBuilder, componentsArray)
+    expect(result).toHaveProperty('message', 'Page builder started successfully.')
+    expect(mockStore.setBuilderStarted).toHaveBeenCalledWith(true)
+    expect(mockStore.setPageBuilderConfig).toHaveBeenCalledWith(configPageBuilder)
+    // Add more assertions as needed
+  })
+
+  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
+  })
+})

package/src/types/index.ts

@@ -1,4 +1,4 @@
-import type { PageBuilderService } from '../composables/PageBuilderService.ts'
+import type { PageBuilderService } from '../services/PageBuilderService.ts'
 
 export interface PageBuilderState {
   // ...other state properties...