@myissue/vue-website-page-builder 3.2.90 → 3.2.92

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

@@ -14,8 +14,9 @@ import { computed, ref, nextTick } from 'vue'
 import type { ComputedRef } from 'vue'
 import { v4 as uuidv4 } from 'uuid'
 import { delay } from './delay'
+import { isEmptyObject } from '../helpers/isEmptyObject'
 
-class PageBuilderClass {
+export class PageBuilderService {
   // Class properties with types
   private nextTick: Promise<void>
   private containsPagebuilder: Element | null
@@ -35,10 +36,10 @@ class PageBuilderClass {
   private NoneListernesTags: string[]
   private delay: (ms?: number) => Promise<void>
   private hasStartedEditing: boolean = false
+  private originalComponents: string | null = null
 
   constructor(pageBuilderStateStore: ReturnType<typeof usePageBuilderStateStore>) {
     this.nextTick = nextTick()
-
     this.hasStartedEditing = false
     this.containsPagebuilder = document.querySelector('#contains-pagebuilder')
     this.pageBuilderStateStore = pageBuilderStateStore
@@ -93,9 +94,138 @@ class PageBuilderClass {
     this.pageBuilderStateStore.setElement(null)
     await this.#removeHoveredAndSelected()
   }
-  // Load existing content from HTML when in update mode
-  applyPageBuilderConfig(data: PageBuilderConfig): void {
-    this.pageBuilderStateStore.applyPageBuilderConfig(data)
+
+  #ensureUpdateOrCreateConfig(config: PageBuilderConfig): void {
+    // Case A: updateOrCreate is missing or an empty object
+    if (!config.updateOrCreate || (config.updateOrCreate && isEmptyObject(config.updateOrCreate))) {
+      const updatedConfig = {
+        ...config,
+        updateOrCreate: {
+          formType: 'create',
+          formName: 'post',
+        },
+      } as const
+
+      this.pageBuilderStateStore.setPageBuilderConfig(updatedConfig)
+      return
+    }
+
+    // Case B: formType is valid ('create' or 'update'), but formName is missing or an empty string
+    if (
+      (config.updateOrCreate &&
+        typeof config.updateOrCreate.formType === 'string' &&
+        (config.updateOrCreate.formType === 'create' ||
+          config.updateOrCreate.formType === 'update') &&
+        typeof config.updateOrCreate.formName !== 'string') ||
+      (typeof config.updateOrCreate.formName === 'string' &&
+        config.updateOrCreate.formName.length === 0)
+    ) {
+      const updatedConfig = {
+        ...config,
+        updateOrCreate: {
+          formType: config.updateOrCreate.formType,
+          formName: 'post',
+        },
+      } as const
+      this.pageBuilderStateStore.setPageBuilderConfig(updatedConfig)
+    }
+
+    // Case C: formType is missing or not a valid string like ('create' or 'update') but formName is valid string
+    if (
+      (config.updateOrCreate && typeof config.updateOrCreate.formType !== 'string') ||
+      (typeof config.updateOrCreate.formType === 'string' &&
+        config.updateOrCreate.formType !== 'create' &&
+        config.updateOrCreate.formType !== 'update' &&
+        typeof config.updateOrCreate.formName === 'string' &&
+        config.updateOrCreate.formName.length !== 0)
+    ) {
+      const updatedConfig = {
+        ...config,
+        updateOrCreate: {
+          formType: 'create',
+          formName: config.updateOrCreate.formName,
+        },
+      } as const
+
+      this.pageBuilderStateStore.setPageBuilderConfig(updatedConfig)
+      return
+    }
+
+    // Case D: formType exists but is not 'create' or 'update', and formName is missing or invalid
+    if (
+      config.updateOrCreate &&
+      typeof config.updateOrCreate.formType === 'string' &&
+      config.updateOrCreate.formType !== 'create' &&
+      config.updateOrCreate.formType !== 'update' &&
+      typeof config.formName !== 'string'
+    ) {
+      const updatedConfig = {
+        ...config,
+        updateOrCreate: {
+          formType: 'create',
+          formName: 'post',
+        },
+      } as const
+
+      this.pageBuilderStateStore.setPageBuilderConfig(updatedConfig)
+    }
+  }
+
+  #validateConfig(config: PageBuilderConfig): void {
+    const defaultConfigValues = {
+      updateOrCreate: {
+        formType: 'create',
+        formName: 'post',
+      },
+    } as const
+
+    // Set config for page builder if not set by user
+    if (!config || (config && Object.keys(config).length === 0 && config.constructor === Object)) {
+      this.pageBuilderStateStore.setPageBuilderConfig(defaultConfigValues)
+    }
+
+    if (config && Object.keys(config).length !== 0 && config.constructor === Object) {
+      this.#ensureUpdateOrCreateConfig(config)
+    }
+  }
+
+  /**
+   * Initializes the Page Builder with the provided configuration.
+   * Handles config validation, local storage, and sets up the builder state.
+   */
+  async startBuilder(config: PageBuilderConfig): Promise<void> {
+    // Show a global loading indicator while initializing
+    this.pageBuilderStateStore.setIsLoadingGlobal(true)
+
+    // Wait briefly to ensure UI updates and async processes settle
+    await this.delay(300)
+
+    // Store the provided config in the builder's state store
+    this.pageBuilderStateStore.setPageBuilderConfig(config)
+
+    // Validate and normalize the config (ensure required fields are present)
+    this.#validateConfig(config)
+
+    // Update the localStorage key name based on the config/resource
+    this.#updateLocalStorageItemName()
+
+    // If there is a local draft for this resource, mark it in the state
+    if (await this.#hasLocalDraftForUpdate()) {
+      this.pageBuilderStateStore.setHasLocalDraftForUpdate(true)
+    }
+
+    // Clean up any old localStorage items related to previous builder sessions
+    this.deleteOldPageBuilderLocalStorage()
+
+    // Clear any selected HTML elements in the builder UI
+    await this.clearHtmlSelection()
+
+    // Attach event listeners to all editable elements in the builder
+    await this.addListenersToEditableElements()
+
+    // Hide the global loading indicator and mark the builder as started
+    this.pageBuilderStateStore.setIsLoadingGlobal(false)
+    this.pageBuilderStateStore.setBuilderStarted(true)
   }
 
   #applyElementClassChanges(
@@ -265,7 +395,7 @@ class PageBuilderClass {
 
   handleAutoSave = async () => {
     this.startEditing()
-    const passedConfig = this.pageBuilderStateStore.getConfigPageBuilder
+    const passedConfig = this.pageBuilderStateStore.getPageBuilderConfig
 
     // Check if config is set
     if (passedConfig && passedConfig.userSettings) {
@@ -280,7 +410,7 @@ class PageBuilderClass {
         try {
           this.pageBuilderStateStore.setIsSaving(true)
           await this.saveComponentsLocalStorage()
-          await this.delay(300)
+          await this.delay(500)
         } catch (err) {
           console.error('Error trying auto save.', err)
         } finally {
@@ -303,7 +433,7 @@ class PageBuilderClass {
 
   handleManualSave = async () => {
     this.startEditing()
-    const passedConfig = this.pageBuilderStateStore.getConfigPageBuilder
+    const passedConfig = this.pageBuilderStateStore.getPageBuilderConfig
 
     // Check if config is set
     if (passedConfig && passedConfig.userSettings) {
@@ -575,7 +705,6 @@ class PageBuilderClass {
     )
   }
 
-  // border color, style & width / start
   handleBorderStyle(borderStyle?: string): void {
     this.#applyElementClassChanges(
       borderStyle,
@@ -611,7 +740,6 @@ class PageBuilderClass {
     this.#applyElementClassChanges(color, tailwindColors.textColorVariables, 'setTextColor')
   }
 
-  // border radius / start
   handleBorderRadiusGlobal(borderRadiusGlobal?: string): void {
     this.#applyElementClassChanges(
       borderRadiusGlobal,
@@ -690,7 +818,7 @@ class PageBuilderClass {
     this.pageBuilderStateStore.setComponents([])
   }
 
-  deleteSelectedComponent() {
+  async deleteSelectedComponent() {
     if (!this.getComponents.value || !this.getComponent.value) return
 
     // Find the index of the component to delete
@@ -706,6 +834,8 @@ class PageBuilderClass {
     // Remove the component from the array
     this.getComponents.value.splice(indexToDelete, 1)
     this.pageBuilderStateStore.setComponents(this.getComponents.value)
+    await nextTick()
+    await this.addListenersToEditableElements()
 
     this.pageBuilderStateStore.setComponent(null)
     this.pageBuilderStateStore.setElement(null)
@@ -879,16 +1009,16 @@ class PageBuilderClass {
       .replace(/^-+|-+$/g, '') // Remove leading/trailing hyphens
   }
 
-  updateLocalStorageItemName(): void {
+  #updateLocalStorageItemName(): void {
     const updateOrCreate =
-      this.pageBuilderStateStore.getConfigPageBuilder &&
-      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate &&
-      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType
+      this.pageBuilderStateStore.getPageBuilderConfig &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType
 
-    const resourceData = this.pageBuilderStateStore.getConfigPageBuilder?.resourceData
+    const resourceData = this.pageBuilderStateStore.getPageBuilderConfig?.resourceData
 
     const resourceFormName =
-      this.pageBuilderStateStore.getConfigPageBuilder?.updateOrCreate?.formName
+      this.pageBuilderStateStore.getPageBuilderConfig?.updateOrCreate?.formName
 
     // Logic for create resource
     if (updateOrCreate === 'create') {
@@ -906,9 +1036,6 @@ class PageBuilderClass {
     // Logic for create
     // Logic for update and with resource form name
     if (updateOrCreate === 'update') {
-      //
-      //
-      //
       if (typeof resourceFormName === 'string' && resourceFormName.length > 0) {
         //
         //
@@ -1053,14 +1180,16 @@ class PageBuilderClass {
       })
     })
 
-    if (this.getLocalStorageItemName.value) {
-      localStorage.setItem(
-        this.getLocalStorageItemName.value,
-        JSON.stringify({
-          pageBuilderContentSavedAt: new Date().toISOString(),
-          components: componentsToSave,
-        }),
-      )
+    // Save to localStorage with pageBuilderContentSavedAt using the correct key
+    const dataToSave = {
+      components: componentsToSave,
+      pageBuilderContentSavedAt: new Date().toISOString(),
+    }
+
+    const keyForSavingFromDomToLocal = this.getLocalStorageItemName.value
+
+    if (keyForSavingFromDomToLocal && typeof keyForSavingFromDomToLocal === 'string') {
+      localStorage.setItem(keyForSavingFromDomToLocal, JSON.stringify(dataToSave))
     }
 
     // No DOM mutation here!
@@ -1085,10 +1214,10 @@ class PageBuilderClass {
   //
   deleteOldPageBuilderLocalStorage(): void {
     if (
-      this.pageBuilderStateStore.getConfigPageBuilder &&
-      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate &&
-      typeof this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'string' &&
-      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'update'
+      this.pageBuilderStateStore.getPageBuilderConfig &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
+      typeof this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'string' &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'update'
     ) {
       let oldCountLocalStorages = 0
       const deletedItemsLog: { Number: number; Key: string; SavedAt: string }[] = []
@@ -1137,14 +1266,14 @@ class PageBuilderClass {
     }
   }
 
-  async hasLocalDraftForUpdate(): Promise<boolean> {
+  async #hasLocalDraftForUpdate(): Promise<boolean> {
     if (this.hasStartedEditing) return false
 
     if (
-      this.pageBuilderStateStore.getConfigPageBuilder &&
-      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate &&
-      typeof this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'string' &&
-      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'update'
+      this.pageBuilderStateStore.getPageBuilderConfig &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
+      typeof this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'string' &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'update'
     ) {
       const key = this.getLocalStorageItemName.value
       if (typeof key === 'string') {
@@ -1152,10 +1281,13 @@ class PageBuilderClass {
         if (draft) {
           try {
             await this.delay(500)
-            const draftParsed = JSON.parse(draft)
-            const dbComponents = this.getComponents.value
-            return JSON.stringify(draftParsed.components) !== JSON.stringify(dbComponents)
-          } catch (e) {
+
+            return true
+            // const dbComponents = this.getComponents.value
+            // const draftParsed = JSON.parse(draft)
+            // return JSON.stringify(draftParsed.components) !== JSON.stringify(dbComponents)
+          } catch (err) {
+            console.error('Unable to mount components to DOM.', err)
             return false
           }
         }
@@ -1169,34 +1301,51 @@ class PageBuilderClass {
     this.hasStartedEditing = true
   }
 
+  //
   async resumeEditingForUpdate() {
     if (
-      this.pageBuilderStateStore.getConfigPageBuilder &&
-      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate &&
-      typeof this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'string' &&
-      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'update'
+      this.pageBuilderStateStore.getPageBuilderConfig &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
+      typeof this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'string' &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'update'
     ) {
       const key = this.getLocalStorageItemName.value
+
       if (typeof key === 'string') {
-        const savedCurrentDesign = localStorage.getItem(key)
-        if (savedCurrentDesign) {
-          try {
-            const parsed = JSON.parse(savedCurrentDesign)
-            if (parsed && Array.isArray(parsed.components)) {
-              this.pageBuilderStateStore.setComponents(parsed.components)
-              localStorage.removeItem(key)
-              await nextTick()
-              await this.addListenersToEditableElements()
-              await this.handleAutoSave()
-            }
-          } catch (e) {
-            console.error('Failed to parse local draft:', e)
-          }
+        const updateDraftFromLocalStorage = localStorage.getItem(key)
+
+        if (typeof updateDraftFromLocalStorage === 'string') {
+          this.pageBuilderStateStore.setIsResumeEditing(true)
+          await delay(500)
+          this.mountComponentsToDOM(updateDraftFromLocalStorage)
+          this.pageBuilderStateStore.setIsResumeEditing(false)
         }
       }
     }
   }
 
+  async restoreOriginalContent() {
+    if (
+      this.pageBuilderStateStore.getPageBuilderConfig &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
+      typeof this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'string' &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'update'
+    ) {
+      this.pageBuilderStateStore.setIsRestoring(true)
+      await this.delay(300)
+
+      // Restore the original content if available
+      if (this.originalComponents) {
+        this.mountComponentsToDOM(this.originalComponents)
+      }
+
+      await nextTick()
+      await this.addListenersToEditableElements()
+
+      this.pageBuilderStateStore.setIsRestoring(false)
+    }
+  }
+
   getStorageItemNameForResource(): string | null {
     return this.getLocalStorageItemName.value
   }
@@ -1476,9 +1625,9 @@ class PageBuilderClass {
    * @param data - JSON string (e.g., '[{"html_code":"...","id":"123","title":"..."}]')
    *               OR HTML string (e.g., '<section data-componentid="123">...</section>')
    */
-  setComponentsFromData(data: string): void {
+  #setComponentsFromData(htmlString: string): void {
     // Auto-detect if input is JSON or HTML
-    const trimmedData = data.trim()
+    const trimmedData = htmlString.trim()
 
     if (trimmedData.startsWith('[') || trimmedData.startsWith('{')) {
       // Looks like JSON - parse as JSON
@@ -1492,7 +1641,7 @@ class PageBuilderClass {
   }
 
   // Private method to parse JSON components and save pageBuilderContentSavedAt to localStorage
-  #parseJSONComponents(jsonData: string): void {
+  async #parseJSONComponents(jsonData: string): Promise<void> {
     try {
       const parsedData = JSON.parse(jsonData)
       let componentsArray: ComponentObject[] = []
@@ -1544,18 +1693,8 @@ class PageBuilderClass {
 
       this.pageBuilderStateStore.setComponents(savedCurrentDesign)
 
-      // Save to localStorage with pageBuilderContentSavedAt using the correct key
-      const dataToSave = {
-        pageBuilderContentSavedAt: parsedData.pageBuilderContentSavedAt || new Date().toISOString(),
-        components: savedCurrentDesign,
-      }
-
-      if (
-        this.getLocalStorageItemName.value &&
-        typeof this.getLocalStorageItemName.value === 'string'
-      ) {
-        localStorage.setItem(this.getLocalStorageItemName.value, JSON.stringify(dataToSave))
-      }
+      await this.clearHtmlSelection()
+      await this.addListenersToEditableElements()
     } catch (error) {
       console.error('Error parsing JSON components:', error)
       this.pageBuilderStateStore.setComponents([])
@@ -1602,37 +1741,60 @@ class PageBuilderClass {
     }
   }
 
-  // Load existing content from HTML when in update mode
-  mountComponentsToDOM(data?: string, injectCustomHTMLSections?: boolean): void {
-    this.pageBuilderStateStore.setComponents([])
-
-    if (!this.pageBuilderStateStore.getConfigPageBuilder) return
-
-    if (injectCustomHTMLSections && data !== undefined) {
-      this.setComponentsFromData(data)
+  /**
+   * Mount Components to DOM
+   * @param passedData - HTML/JSON string to inject (optional)
+   * @param preferLocalStorage - if true, always try localStorage first
+   */
+  mountComponentsToDOM(passedData: string): void {
+    // Save the original content only once, in update mode, and only if passedData is provided
+    // Form type Update
+    if (
+      this.pageBuilderStateStore.getPageBuilderConfig &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
+      typeof this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'string' &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'update' &&
+      passedData &&
+      !this.originalComponents
+    ) {
+      this.originalComponents = passedData
     }
 
-    const storedData = this.loadStoredComponentsFromStorage()
+    this.pageBuilderStateStore.setComponents([])
+
+    if (!this.pageBuilderStateStore.getPageBuilderConfig) return
 
+    // Form type Update
     if (
-      this.pageBuilderStateStore.getConfigPageBuilder &&
-      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate &&
-      typeof this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'string' &&
-      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'create'
+      this.pageBuilderStateStore.getPageBuilderConfig &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
+      typeof this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'string' &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'update'
     ) {
-      if (storedData) {
-        this.setComponentsFromData(storedData)
+      if (passedData) {
+        this.#setComponentsFromData(passedData)
+        return
       }
     }
 
+    // Form type Create
+    const localStorageData = this.loadStoredComponentsFromStorage()
+
     if (
-      this.pageBuilderStateStore.getConfigPageBuilder &&
-      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate &&
-      typeof this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'string' &&
-      this.pageBuilderStateStore.getConfigPageBuilder.updateOrCreate.formType === 'update'
+      this.pageBuilderStateStore.getPageBuilderConfig &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate &&
+      typeof this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'string' &&
+      this.pageBuilderStateStore.getPageBuilderConfig.updateOrCreate.formType === 'create'
     ) {
-      if (data) {
-        this.setComponentsFromData(data)
+      if (localStorageData) {
+        this.#setComponentsFromData(localStorageData)
+        return
+      }
+
+      // If no localStorage, but passedData exists (for demo), use it
+      if (passedData) {
+        this.#setComponentsFromData(passedData)
+        return
       }
     }
   }
@@ -1646,6 +1808,7 @@ class PageBuilderClass {
   }
 
   async initializeElementStyles(): Promise<void> {
+    if (!this.pageBuilderStateStore.getPageBuilderConfig) return
     await new Promise((resolve) => requestAnimationFrame(resolve))
 
     // handle custom URL
@@ -1699,5 +1862,3 @@ class PageBuilderClass {
     await this.#syncCurrentClasses()
   }
 }
-
-export default PageBuilderClass

package/src/composables/builderInstance.ts

@@ -0,0 +1,25 @@
+// builderInstance.ts
+import { PageBuilderService } from '../composables/PageBuilderService'
+import { sharedPageBuilderStore } from '../stores/shared-store'
+
+// Singleton instance
+let instance: PageBuilderService | null = null
+
+// Used to create and store the single instance
+export function initPageBuilder(): PageBuilderService {
+  if (!instance) {
+    const pageBuilderStateStore = sharedPageBuilderStore
+    instance = new PageBuilderService(pageBuilderStateStore)
+  }
+  return instance
+}
+
+// Used to access the existing instance anywhere else
+export function getPageBuilder(): PageBuilderService {
+  if (!instance) {
+    throw new Error(
+      'PageBuilderService has not been created. Please call createPageBuilder() first in your App.vue or setup file.',
+    )
+  }
+  return instance
+}

package/src/css/app.css

@@ -357,3 +357,18 @@
     @apply pbx-aspect-square pbx-border pbx-border-gray-200 pbx-cursor-pointer pbx-min-h-[1.5rem] pbx-rounded-sm;
   }
 }
+
+/* p {
+  @apply pbx-font-normal lg:pbx-text-base pbx-text-base;
+} */
+
+a {
+  @apply pbx-text-myPrimaryLinkColor;
+}
+
+h2 {
+  @apply pbx-text-3xl pbx-mt-4 pbx-mb-3 pbx-font-medium;
+}
+h3 {
+  @apply pbx-text-2xl pbx-mt-4 pbx-mb-3 pbx-font-medium;
+}

package/src/css/dev-global.css

@@ -14,8 +14,15 @@ These styles affect all HTML elements (like input, button, h1, etc.) in the cons
 }
 /* CSS for content inside page builder # start */
 #page-builder-editor .tiptap {
+  outline: none !important;
+  box-shadow: none !important;
   background: #fff;
   min-height: 25rem;
+  border: 1px solid #aaa;
+  border-radius: 10px;
+  padding: 6px;
+  margin-bottom: 20px;
+  padding-bottom: 100px;
 }
 
 #pagebuilder #youtube-video::before {

package/src/index.ts

@@ -5,8 +5,6 @@ export { default as Preview } from './PageBuilder/Preview.vue'
 // Export stores (consolidated into single store)
 export { usePageBuilderStateStore } from './stores/page-builder-state'
 
-export { default as PageBuilderClass } from './composables/PageBuilderClass.ts'
-
 // Export composables
 export { usePageBuilderModal } from './composables/usePageBuilderModal'
 
@@ -21,3 +19,7 @@ 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 { initPageBuilder, getPageBuilder } from './composables/builderInstance'

package/src/main.ts

@@ -1,10 +1,13 @@
 import './css/dev-global.css'
 import './css/app.css'
+import { initPageBuilder } from './composables/builderInstance'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import App from './App.vue'
 
+initPageBuilder()
+
 const app = createApp(App)
 
 app.use(createPinia())