@myissue/vue-website-page-builder 3.0.29 → 3.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "v3.0.29",
+  "version": "v3.0.31",
   "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/MediaLibraryModal.vue

@@ -94,7 +94,7 @@ provide('closeMediaLibraryModal', closeMediaLibraryModal)
             leave-to="opacity-0 scale-95"
           >
             <div
-              class="relative max-h-[65rem] my-2 inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-xl transform transition-all sm:align-middle sm:max-w-7xl sm:w-full w-[96%]"
+              class="font-sans relative max-h-[65rem] my-2 inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-xl transform transition-all sm:align-middle sm:max-w-7xl sm:w-full w-[96%]"
             >
               <div
                 class="flex gap-2 justify-between items-center border-b border-gray-200 p-4 mb-2"

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>
@@ -48,7 +55,9 @@ const handleEscapeKey = function () {
         class="fixed z-30 inset-0 overflow-y-auto focus:outline-none"
         tabindex="0"
       >
-        <div class="flex items-end justify-center pb-20 text-center sm:block sm:p-0 bg-white">
+        <div
+          class="font-sans flex items-end justify-center pb-20 text-center sm:block sm:p-0 bg-white"
+        >
           <TransitionChild
             as="template"
             enter="ease-out duration-100"
@@ -78,11 +87,20 @@ const handleEscapeKey = function () {
               class="bg-red-100 inline-block align-bottom text-left transform transition-all sm:align-middle w-full overflow-hidden h-[100vh] top-0 left-0 right-0 absolute"
             >
               <div
-                class="px-4 px-4 lg:h-[10vh] h-[16vh] flex items-center justify-between border-b border-gray-200 bg-white"
+                class="px-4 lg:h-[10vh] h-[16vh] flex items-center justify-between border-b border-gray-200 bg-white"
               >
-                <button type="button" @click="firstButton">
-                  <img class="h-6" src="/logo/logo.svg" alt="Logo" />
-                </button>
+                <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>
+                  <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/NoneCustomMediaLibraryComponent.vue

@@ -1,5 +1,3 @@
 <template>
-  <div class="font-sans">
-    <div>NoneCustomMediaLibraryComponent here for the page builder to add media if needed</div>
-  </div>
+  <div>NoneCustomMediaLibraryComponent here for the page builder to add media if needed</div>
 </template>

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>>({})
@@ -63,7 +62,7 @@ const getSvgPreview = (title: string) => {
 </style>
 
 <template>
-  <div class="font-sans p-4">
+  <div class="p-4">
     <!-- Helper Components Section -->
     <div class="mb-8">
       <h3 class="myQuaternaryHeader mb-4">Helper Components</h3>

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(() => {

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'