@myissue/vue-website-page-builder 3.0.30 → 3.0.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "v3.0.30",
+  "version": "v3.0.32",
   "description": "🚧 DEVELOPMENT VERSION - Vue.js page builder component with drag & drop functionality. Not ready for production use.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",

package/src/Components/MediaLibrary/SidebarUnsplash.vue

@@ -1,11 +1,11 @@
 <script setup>
 import { ref, computed, onMounted, inject } from 'vue'
 
-// Get stores from parent PageBuilder component
-const mediaLibraryStore = inject('mediaLibraryStore')
+// Get consolidated store from parent PageBuilder component
+const pageBuilderStateStore = inject('pageBuilderStateStore')
 
 const getCurrentImage = computed(() => {
-  return mediaLibraryStore.getCurrentImage
+  return pageBuilderStateStore.getCurrentImage
 })
 </script>
 

package/src/Components/MediaLibrary/Unsplash.vue

@@ -3,7 +3,6 @@ import { ref, computed, onMounted, inject } from 'vue'
 import { useUnsplashStore } from '@/stores/unsplash'
 
 // Get stores from parent PageBuilder component
-const mediaLibraryStore = inject('mediaLibraryStore')
 const unsplashStore = useUnsplashStore()
 const searchQuery = ref('')
 const currentPage = ref(1)
@@ -18,8 +17,8 @@ const getUnsplashImages = computed(() => {
 })
 
 const handleImageClick = function (file) {
-  mediaLibraryStore.setCurrentImage({ src: file })
-  mediaLibraryStore.setCurrentPreviewImage(null)
+  pageBuilderStateStore.setCurrentImage({ src: file })
+  pageBuilderStateStore.setCurrentPreviewImage(null)
 }
 
 // search by orientation

package/src/Components/Modals/PageBuilderPreviewModal.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, inject } from 'vue'
 import { delay } from '@/composables/delay'
+import { usePageBuilderStateStore } from '@/stores/page-builder-state'
 
 import {
   Dialog,
@@ -11,8 +12,8 @@ import {
 } from '@headlessui/vue'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 
-// Get stores from parent PageBuilder component
-const userStore = inject('userStore')
+// Get store from parent PageBuilder component
+const internalPinia = inject('internalPinia')
 
 defineProps({
   show: {
@@ -28,14 +29,20 @@ const emit = defineEmits(['firstPageBuilderPreviewModalButton'])
 const firstButton = async function () {
   emit('firstPageBuilderPreviewModalButton')
 
-  userStore.setIsLoading(true)
+  pageBuilderStateStore.setIsLoading(true)
   await delay()
-  userStore.setIsLoading(false)
+  pageBuilderStateStore.setIsLoading(false)
 }
 
 const handleEscapeKey = function () {
   firstButton()
 }
+
+const pageBuilderStateStore = usePageBuilderStateStore(internalPinia)
+
+const getPageBuilderLogo = computed(() => {
+  return pageBuilderStateStore.getPageBuilderLogo
+})
 </script>
 
 <template>
@@ -82,11 +89,18 @@ const handleEscapeKey = function () {
               <div
                 class="px-4 lg:h-[10vh] h-[16vh] flex items-center justify-between border-b border-gray-200 bg-white"
               >
-                <template v-if="getPageBuilderLogo">
-                  <div class="border-r border-gray-200 pr-6">
+                <div v-if="getPageBuilderLogo" class="flex items-center divide-x divide-gray-200">
+                  <div class="pr-4">
                     <img class="h-6" :src="getPageBuilderLogo" alt="Logo" />
                   </div>
-                </template>
+                  <span class="myPrimaryParagraph font-medium pl-4">Preview mode </span>
+                </div>
+                <div v-else>
+                  <div class="pr-6">
+                    <span class="myPrimaryParagraph font-medium">Preview mode </span>
+                  </div>
+                </div>
+
                 <div
                   @click="firstButton"
                   class="flex items-center justify-center gap-1 cursor-pointer"

package/src/Components/PageBuilder/DropdownsPlusToggles/OptionsDropdown.vue

@@ -8,20 +8,18 @@ import SlideOverRight from '@/Components/PageBuilder/Slidebars/SlideOverRight.vu
 import PageBuilderSettings from '@/Components/PageBuilder/Settings/PageBuilderSettings.vue'
 import DynamicModal from '@/Components/Modals/DynamicModal.vue'
 
-// Get stores from parent PageBuilder component
+// Get consolidated store from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')
-const mediaLibraryStore = inject('mediaLibraryStore')
-const userStore = inject('userStore')
 
 const getCurrentUser = computed(() => {
-  return userStore.getCurrentUser
+  return pageBuilderStateStore.getCurrentUser
 })
 
 const getCurrentResourceData = computed(() => {
   return pageBuilderStateStore.getCurrentResourceData
 })
 
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 const emit = defineEmits(['previewCurrentDesign'])
 
 const showModalDeleteAllComponents = ref(false)

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

@@ -6,8 +6,7 @@ import tailwindColors from '@/utils/builder/tailwaind-colors'
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')
-const mediaLibraryStore = inject('mediaLibraryStore')
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 const backgroundColor = ref(null)
 const getBackgroundColor = computed(() => {
   return pageBuilderStateStore.getBackgroundColor

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

@@ -6,9 +6,8 @@ import tailwindBorderRadius from '@/utils/builder/tailwind-border-radius'
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')
-const mediaLibraryStore = inject('mediaLibraryStore')
 
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 const borderRadiusGlobal = ref(null)
 const borderRadiusTopLeft = ref(null)
 const borderRadiusTopRight = ref(null)

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

@@ -8,9 +8,8 @@ import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headless
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')
-const mediaLibraryStore = inject('mediaLibraryStore')
 
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 const borderStyle = ref(null)
 const borderWidth = ref(null)
 const borderColor = ref(null)

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

@@ -5,9 +5,8 @@ import PageBuilderClass from '@/composables/PageBuilderClass.ts'
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')
-const mediaLibraryStore = inject('mediaLibraryStore')
 
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 const currentClasses = ref(null)
 const getCurrentClasses = computed(() => {
   return pageBuilderStateStore.getCurrentClasses

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

@@ -6,7 +6,6 @@ import { ref } from 'vue'
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')
-const mediaLibraryStore = inject('mediaLibraryStore')
 
 const showModalDeleteComponent = ref(false)
 // use dynamic model
@@ -21,7 +20,7 @@ const thirdButtonModal = ref(null)
 const firstModalButtonFunction = ref(null)
 const secondModalButtonFunction = ref(null)
 const thirdModalButtonFunction = ref(null)
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 
 // remove component
 const deleteComponent = function (e) {

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

@@ -5,9 +5,8 @@ import PageBuilderClass from '@/composables/PageBuilderClass.ts'
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')
-const mediaLibraryStore = inject('mediaLibraryStore')
 
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 const getRestoredElement = computed(() => {
   return pageBuilderStateStore.getRestoredElement
 })

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

@@ -9,10 +9,9 @@ import BackgroundColorEditor from '@/Components/PageBuilder/EditorMenu/Editables
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')
-const mediaLibraryStore = inject('mediaLibraryStore')
 const customMediaComponent = inject('CustomMediaComponent')
 
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 
 const getElement = computed(() => {
   return pageBuilderStateStore.getElement

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

@@ -5,9 +5,8 @@ import EditorAccordion from '@/Components/PageBuilder/EditorMenu/EditorAccordion
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')
-const mediaLibraryStore = inject('mediaLibraryStore')
 
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 
 const getElement = computed(() => {
   return pageBuilderStateStore.getElement

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

@@ -6,10 +6,9 @@ import PageBuilderClass from '@/composables/PageBuilderClass.ts'
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')
-const mediaLibraryStore = inject('mediaLibraryStore')
 const customMediaComponent = inject('CustomMediaComponent')
 
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 const isLoading = ref(false)
 
 // use media library

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

@@ -6,9 +6,8 @@ import { Switch } from '@headlessui/vue'
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')
-const mediaLibraryStore = inject('mediaLibraryStore')
 
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 const hyperlinkEnable = ref(false)
 const urlInput = ref(null)
 const openHyperlinkInNewTab = ref(false)

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

@@ -13,8 +13,7 @@ import {
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')
-const mediaLibraryStore = inject('mediaLibraryStore')
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 const opacityVueModel = ref(null)
 const getBackgroundOpacity = computed(() => {
   return pageBuilderStateStore.getBackgroundOpacity

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

@@ -13,8 +13,7 @@ import {
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')
-const mediaLibraryStore = inject('mediaLibraryStore')
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 const opacityVueModel = ref(null)
 const getOpacity = computed(() => {
   return pageBuilderStateStore.getOpacity

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

@@ -6,9 +6,8 @@ import tailwindPaddingPlusMargin from '@/utils/builder/tailwind-padding-margin'
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')
-const mediaLibraryStore = inject('mediaLibraryStore')
 
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 const fontVerticalPadding = ref(null)
 const fontHorizontalPadding = ref(null)
 const fontVerticalMargin = ref(null)

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

@@ -6,8 +6,7 @@ import tailwindColors from '@/utils/builder/tailwaind-colors'
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')
-const mediaLibraryStore = inject('mediaLibraryStore')
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 const textColor = ref(null)
 const getTextColor = computed(() => {
   return pageBuilderStateStore.getTextColor

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

@@ -7,9 +7,8 @@ import tailwindFontStyles from '@/utils/builder/tailwind-font-styles'
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')
-const mediaLibraryStore = inject('mediaLibraryStore')
 
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 const fontBase = ref(null)
 const fontDesktop = ref(null)
 const fontTablet = ref(null)

package/src/Components/PageBuilder/NoneCustomSearchComponent.vue

@@ -4,18 +4,17 @@ import components from '../../utils/html-elements/component'
 import PageBuilderClass from '../../composables/PageBuilderClass'
 import { usePageBuilderModal } from '../../composables/usePageBuilderModal'
 import { generateComponentPreview } from '../../utils/componentPreviews'
-import type { ComponentObject, PageBuilderStateStore, MediaLibraryStore } from '../../types'
+import type { ComponentObject, PageBuilderStateStore } from '../../types'
 
 import { inject, ref } from 'vue'
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject<PageBuilderStateStore>('pageBuilderStateStore')
-const mediaLibraryStore = inject<MediaLibraryStore>('mediaLibraryStore')
 
 // Get modal close function
 const { closeAddComponentModal } = usePageBuilderModal()
 
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore!, mediaLibraryStore!)
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore!)
 
 // Track image loading states
 const imageLoadingStates = ref<Record<string, boolean>>({})

package/src/Components/TipTap/TipTap.vue

@@ -4,9 +4,8 @@ import PageBuilderClass from '@/composables/PageBuilderClass.ts'
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')
-const mediaLibraryStore = inject('mediaLibraryStore')
 
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 </script>
 
 <template>

package/src/Components/TipTap/TipTapInput.vue

@@ -8,7 +8,6 @@ import DynamicModal from '@/Components/Modals/DynamicModal.vue'
 
 // Get stores from parent PageBuilder component
 const pageBuilderStateStore = inject('pageBuilderStateStore')
-const mediaLibraryStore = inject('mediaLibraryStore')
 
 const showModalUrl = ref(false)
 
@@ -25,7 +24,7 @@ const firstModalButtonFunction = ref(null)
 const secondModalButtonFunction = ref(null)
 const thirdModalButtonFunction = ref(null)
 
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 
 const getElement = computed(() => {
   return pageBuilderStateStore.getElement

package/src/PageBuilder/PageBuilder.vue

@@ -11,8 +11,6 @@ import SearchComponents from '@/Components/Search/SearchComponents.vue'
 import OptionsDropdown from '@/Components/PageBuilder/DropdownsPlusToggles/OptionsDropdown.vue'
 import RightSidebarEditor from '@/Components/PageBuilder/EditorMenu/RightSidebarEditor.vue'
 import { usePageBuilderStateStore } from '@/stores/page-builder-state'
-import { useMediaLibraryStore } from '@/stores/media-library'
-import { useUserStore } from '@/stores/user'
 
 /**
  * Props for PageBuilder component
@@ -66,9 +64,7 @@ const props = defineProps({
 
 // Create internal Pinia instance for PageBuilder package
 const internalPinia = createPinia()
-const mediaLibraryStore = useMediaLibraryStore(internalPinia)
 const pageBuilderStateStore = usePageBuilderStateStore(internalPinia)
-const userStore = useUserStore(internalPinia)
 
 // Set logo
 if (props.PageBuilderLogo) {
@@ -85,19 +81,17 @@ if (props.resourceData) {
 }
 // Set current user if provided
 if (props.userForPageBuilder) {
-  userStore.setCurrentUser(props.userForPageBuilder)
+  pageBuilderStateStore.setCurrentUser(props.userForPageBuilder)
 }
 
 // Set updateOrCreate in store
 pageBuilderStateStore.setUpdateOrCreate(props.updateOrCreate)
 
-// Initialize PageBuilder with stores
-const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore, mediaLibraryStore)
+// Initialize PageBuilder with store
+const pageBuilderClass = new PageBuilderClass(pageBuilderStateStore)
 
-// Provide stores for child components
+// Provide store for child components (all pointing to the same consolidated store)
 provide('pageBuilderStateStore', pageBuilderStateStore)
-provide('mediaLibraryStore', mediaLibraryStore)
-provide('userStore', userStore)
 
 // Provide the internal Pinia instance for components that need to create stores
 provide('internalPinia', internalPinia)
@@ -158,7 +152,7 @@ const getComponents = computed(() => {
 })
 
 const getCurrentUser = computed(() => {
-  return userStore.getCurrentUser
+  return pageBuilderStateStore.getCurrentUser
 })
 
 const getCurrentResourceData = computed(() => {
@@ -360,7 +354,7 @@ onMounted(async () => {
                 "
                 class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
               >
-                <span class="myMediumIcon material-symbols-outlined"> add </span>
+                <span class="myMediumIcon material-symbols-outlined"> interests </span>
               </button>
             </div>
             <div @click.self="pageBuilderStateStore.setComponent(null)">
@@ -405,12 +399,13 @@ onMounted(async () => {
                   "
                 >
                   <div class="flex items-center justify-center gap-2">
-                    <span class="lg:block hidden"> Add new Component </span>
-
+                    <span class="lg:block hidden">
+                      <div>Add new Elements</div>
+                    </span>
                     <span
                       class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
                     >
-                      <span class="myMediumIcon material-symbols-outlined"> add </span>
+                      <span class="myMediumIcon material-symbols-outlined"> interests </span>
                     </span>
                   </div>
                 </button>
@@ -477,25 +472,27 @@ onMounted(async () => {
 
               <!-- Add Component # start -->
               <div
-                class="rounded-lg border-2 border-dashed border-gray-300 p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 my-12 mx-8"
+                @click="
+                  () => {
+                    pageBuilderStateStore.setComponentArrayAddMethod('push')
+                    handleAddComponent()
+                  }
+                "
+                class="hover:bg-gray-100 rounded-lg border border-gray-200 p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 my-12 mx-8 cursor-pointer"
               >
-                <h3 class="mt-2 text-sm font-medium text-gray-900">Add Components</h3>
-                <p class="mt-1 text-sm text-gray-500">
-                  Get started by adding components using the drag & drop Page Builder.
-                </p>
+                <div class="flex items-center justify-center gap-2 font-medium cursor-pointer">
+                  <span class="lg:block hidden">
+                    <div>Add new Elements</div>
+                  </span>
+                </div>
+
                 <div class="mt-6 flex items-center gap-2 justify-center">
                   <button
-                    @click="
-                      () => {
-                        pageBuilderStateStore.setComponentArrayAddMethod('push')
-                        handleAddComponent()
-                      }
-                    "
                     type="button"
                     class="myPrimaryButton flex items-center gap-2 justify-center"
                   >
-                    <span class="myMediumIcon material-symbols-outlined"> add </span>
-                    Add component
+                    <span class="myMediumIcon material-symbols-outlined"> interests </span>
+                    Add new Elements
                   </button>
                 </div>
               </div>

package/src/composables/PageBuilderClass.ts

@@ -2,8 +2,6 @@
 import type {
   ComponentObject,
   ImageObject,
-  PageBuilderStateStore,
-  MediaLibraryStore,
   TimerHandle,
   MutationObserver as MutationObserverType,
   TailwindColors,
@@ -14,6 +12,7 @@ import type {
   TailwindBorderRadius,
   TailwindBorderStyleWidthColor,
 } from '@/types'
+import type { usePageBuilderStateStore } from '@/stores/page-builder-state'
 
 import tailwindColors from '@/utils/builder/tailwaind-colors'
 import tailwindOpacities from '@/utils/builder/tailwind-opacities'
@@ -33,11 +32,10 @@ class PageBuilderClass {
   private nextTick: Promise<void>
   private containsPagebuilder: Element | null
   private timer: number | null
-  private pageBuilderStateStore: PageBuilderStateStore
-  private mediaLibraryStore: MediaLibraryStore
+  private pageBuilderStateStore: ReturnType<typeof usePageBuilderStateStore>
   private getTextAreaVueModel: ComputedRef<string | null>
   private getLocalStorageItemName: ComputedRef<string | null>
-  private getCurrentImage: ComputedRef<ImageObject | null>
+  private getCurrentImage: ComputedRef<ImageObject>
   private getHyberlinkEnable: ComputedRef<boolean>
   private getComponents: ComputedRef<ComponentObject[] | null>
   private getComponent: ComputedRef<ComponentObject | null>
@@ -53,7 +51,7 @@ class PageBuilderClass {
   private delay: ReturnType<typeof delay>
   private observer?: MutationObserverType
 
-  constructor(pageBuilderStateStore: PageBuilderStateStore, mediaLibraryStore: MediaLibraryStore) {
+  constructor(pageBuilderStateStore: ReturnType<typeof usePageBuilderStateStore>) {
     /**
      * Initialize an instance variable 'elementsWithListeners' as a WeakSet.
      *
@@ -74,16 +72,15 @@ class PageBuilderClass {
 
     this.timer = null
 
-    // Stores are now required parameters - no fallback to inject
+    // Store is now required parameter - no fallback to inject
     this.pageBuilderStateStore = pageBuilderStateStore
-    this.mediaLibraryStore = mediaLibraryStore
 
     this.getTextAreaVueModel = computed(() => this.pageBuilderStateStore.getTextAreaVueModel)
     this.getLocalStorageItemName = computed(
       () => this.pageBuilderStateStore.getLocalStorageItemName,
     )
 
-    this.getCurrentImage = computed(() => this.mediaLibraryStore.getCurrentImage)
+    this.getCurrentImage = computed(() => this.pageBuilderStateStore.getCurrentImage)
     this.getHyberlinkEnable = computed(() => this.pageBuilderStateStore.getHyberlinkEnable)
     this.getComponents = computed(() => this.pageBuilderStateStore.getComponents)
 
@@ -144,9 +141,8 @@ class PageBuilderClass {
     })
 
     // set to 'none' if undefined
-    let elementClass = currentCSS || 'none'
-
-    this.pageBuilderStateStore[mutationName as keyof PageBuilderStateStore](elementClass)
+    let elementClass =
+      currentCSS || 'none'(this.pageBuilderStateStore as any)[mutationName](elementClass)
 
     if (typeof selectedCSS === 'string' && selectedCSS !== 'none') {
       if (elementClass && this.getElement.value?.classList.contains(elementClass)) {

package/src/index.ts

@@ -2,10 +2,8 @@
 export { default as PageBuilder } from './PageBuilder/PageBuilder.vue'
 export { default as Preview } from './PageBuilder/Preview.vue'
 
-// Export stores
+// Export stores (consolidated into single store)
 export { usePageBuilderStateStore } from './stores/page-builder-state'
-export { useMediaLibraryStore } from './stores/media-library'
-export { useUserStore } from './stores/user'
 
 export { default as PageBuilderClass } from './composables/PageBuilderClass'