@myissue/vue-website-page-builder 3.3.37 → 3.3.39

package/package.json

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

package/src/Components/Loaders/GlobalLoader.vue

@@ -4,7 +4,7 @@
   >
     <div class="pbx-absolute pbx-top-1/3">
       <div
-        class="pbx-inline-block pbx-h-10 pbx-w-10 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border-current pbx-border-r-transparent"
+        class="pbx-inline-block pbx-h-10 pbx-w-10 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border pbx-border-current pbx-border-r-transparent"
       ></div>
     </div>
   </div>

package/src/Components/Modals/BuilderComponents.vue

@@ -50,7 +50,7 @@ const firstButtonBuilder = function () {
       </div>
     </div>
     <div
-      class="pbx-py-4 pbx-flex sm:pbx-justify-end pbx-justify-center pbx-border-t-solid pbx-border-gray-200 pbx-mt-4"
+      class="pbx-py-4 pbx-flex sm:pbx-justify-end pbx-justify-center pbx-border-solid pbx-border-t pbx-border-gray-200 pbx-mt-4"
     >
       <div class="sm:pbx-w-3/6 pbx-w-full pbx-px-2 pbx-my-2 pbx-flex pbx-gap-2 pbx-justify-end">
         <button

package/src/Components/Modals/DynamicModalBuilder.vue

@@ -104,7 +104,7 @@ const thirdButtonBuilder = function () {
     </div>
 
     <div
-      class="pbx-border-t-solid pbx-border-gray-200 pbx-mt-4 pbx-flex pbx-items-center pbx-justify-end"
+      class="pbx-border-solid pbx-border-t pbx-border-gray-200 pbx-mt-4 pbx-flex pbx-items-center pbx-justify-end"
     >
       <div
         v-if="simpleModal !== true && !isLoading"
@@ -157,7 +157,7 @@ const thirdButtonBuilder = function () {
       <template v-if="isLoading">
         <div class="pbx-flex pbx-items-center pbx-my-2 pbx-py-4 pbx-px-2 pbx-justify-end">
           <div
-            class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
+            class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
           >
             <span
               class="!pbx-absolute !pbx-m-px !pbx-h-px !pbx-w-px !pbx-overflow-hidden !pbx-whitespace-nowrap !pbx-border-0 !pbx-p-0 !pbx-[clip:rect(0,0,0,0)]"

package/src/Components/Modals/ModalBuilder.vue

@@ -80,7 +80,7 @@ const maxWidthClass = computed(() => {
           ]"
         >
           <div
-            class="pbx-h-16 pbx-px-4 pbx-border-b-solid pbx-border-gray-200 pbx-mb-2 pbx-flex pbx-items-center pbx-justify-between"
+            class="pbx-h-16 pbx-px-4 pbx-border-solid pbx-border-b pbx-border-gray-200 pbx-mb-2 pbx-flex pbx-items-center pbx-justify-between"
             :class="[
               type === 'success' ? 'pbx-bg-white' : '',
               type === 'warning' ? 'pbx-bg-white' : '',

package/src/Components/PageBuilder/DefaultComponents/DefaultBuilderComponents.vue

@@ -53,7 +53,7 @@ const getSvgPreview = (title: string) => {
         <div
           v-for="helper in componentHelpers"
           :key="helper.title"
-          class="pbx-border-solid pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer pbx-p-4"
+          class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer pbx-p-4"
           @click="handleDropComponent(helper)"
         >
           <div class="pbx-max-h-72 pbx-cursor-pointer pbx-object-contain pbx-bg-white pbx-mx-auto">
@@ -74,11 +74,11 @@ const getSvgPreview = (title: string) => {
         <div
           v-for="comp in components[0].components.data"
           :key="comp.title"
-          class="pbx-border-solid pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer"
+          class="pbx-border-solid pbx-border pbx-border-gray-400 pbx-overflow-hidden hover:pbx-border-myPrimaryLinkColor pbx-duration-100 pbx-cursor-pointer"
           @click="handleDropComponent(convertToComponentObject(comp))"
         >
           <div
-            class="pbx-overflow-hidden pbx-whitespace-pre-line pbx-flex-1 pbx-h-auto pbx-border-b-solid pbx-border-gray-200 lg:pbx-py-10 pbx-py-8 pbx-px-2"
+            class="pbx-overflow-hidden pbx-whitespace-pre-line pbx-flex-1 pbx-h-auto pbx-border-solid pbx-border-b pbx-border-gray-200 lg:pbx-py-10 pbx-py-8 pbx-px-2"
           >
             <!-- Use SVG preview instead of external images -->
             <div

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

@@ -74,7 +74,7 @@ watch(
               </div>
               <div v-if="color !== 'none'" class="pbx-flex pbx-items-center">
                 <div
-                  class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border-solid pbx-border-gray-100 pbx-rounded-sm"
+                  class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border-solid pbx-border pbx-border-gray-100 pbx-rounded-sm"
                   :class="`pbx-bg-${color.replace('pbx-bg-', '')}`"
                 ></div>
                 <span class="pbx-ml-3">{{ color }}</span>

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

@@ -101,7 +101,7 @@ watch(
               </div>
               <div
                 v-if="borderColor !== 'none'"
-                class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border-solid pbx-border-gray-100 pbx-rounded-sm"
+                class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border-solid pbx-border pbx-border-gray-100 pbx-rounded-sm"
                 :class="`bg-${borderColor?.replace('border-', '')}`"
               ></div>
               <span class="pbx-block pbx-truncate">{{ borderColor }}</span>

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

@@ -59,7 +59,7 @@ const handleAddClasses = async function () {
       <div class="pbx-flex pbx-gap-2 pbx-item-center pbx-flex-col">
         <div class="pbx-flex pbx-gap-2 pbx-item-center">
           <div
-            class="pbx-mt-1 pbx-relative pbx-flex pbx-items-center pbx-w-full pbx-border-solid pbx-myPrimaryInput pbx-py-0 pbx-p-0"
+            class="pbx-mt-1 pbx-relative pbx-flex pbx-items-center pbx-w-full pbx-border-solid pbx-border pbx-myPrimaryInput pbx-py-0 pbx-p-0"
           >
             <input
               v-model="inputClass"

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

@@ -64,7 +64,7 @@ const loadingImage = async function (imageURL) {
     <div v-show="getIsLoadingImage">
       <div class="pbx-flex pbx-items-center pbx-justify-center pbx-mt-4 pbx-min-h-80">
         <div
-          class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
+          class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
         >
           <span
             class="!pbx-absolute !pbx-m-px !pbx-h-px !pbx-w-px !pbx-overflow-hidden !pbx-whitespace-nowrap !pbx-border-0 !pbx-p-0 !pbx-[clip:rect(0,0,0,0)]"

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

@@ -219,7 +219,7 @@ const handleToggleOpenHyperlinkInNewTab = async function () {
         <!-- no attached url - end -->
         <div v-if="hyperlinkEnable === true" class="pbx-my-2 pbx-py-2">
           <div
-            class="pbx-relative pbx-flex pbx-items-center pbx-w-full pbx-border-solid pbx-border-gray-200 pbx-myPrimaryInput pbx-py-0 pbx-p-0"
+            class="pbx-relative pbx-flex pbx-items-center pbx-w-full pbx-border-solid pbx-border pbx-border-gray-200 pbx-myPrimaryInput pbx-py-0 pbx-p-0"
           >
             <input
               v-model="urlInput"

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

@@ -73,7 +73,7 @@ watch(
               </div>
               <div v-if="color !== 'none'" class="pbx-flex pbx-items-center">
                 <div
-                  class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border-solid pbx-border-gray-100 pbx-rounded-sm"
+                  class="pbx-aspect-square pbx-w-6 pbx-h-6 pbx-border-solid pbx-border pbx-border-gray-100 pbx-rounded-sm"
                   :class="`pbx-bg-${color.replace('pbx-text-', '')}`"
                 ></div>
                 <span class="pbx-ml-3">{{ color }}</span>

package/src/Components/PageBuilder/EditorMenu/EditorAccordion.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="pbx-flex pbx-flex-col pbx-border-solid pbx-border-gray-400" :class="{ '': expanded }">
+  <div
+    class="pbx-flex pbx-flex-col pbx-border-solid pbx-border pbx-border-gray-400"
+    :class="{ '': expanded }"
+  >
     <div
       class="pbx-flex pbx-flex-row pbx-justify-between pbx-items-center pbx-pl-3 pbx-pr-3 pbx-py-5 pbx-cursor-pointer pbx-duration-200 hover:pbx-bg-myPrimaryLightGrayColor"
       @click="expanded = !expanded"

package/src/Components/PageBuilder/Settings/AdvancedPageBuilderSettings.vue

@@ -117,9 +117,11 @@ function prettifyHtml(html) {
               </div>
               <div
                 v-if="getElement"
-                class="pbx-overflow-hidden pbx-border-solid pbx-border-gray-100 pbx-mb-6"
+                class="pbx-overflow-hidden pbx-border-solid pbx-border pbx-border-gray-100 pbx-mb-6"
               >
-                <div class="pbx-bg-stone-800 pbx-pt-4 pbx-1 pbx-border-b-solid pbx-border-gray-200">
+                <div
+                  class="pbx-bg-stone-800 pbx-pt-4 pbx-1 pbx-border-solid pbx-border-b pbx-border-gray-200"
+                >
                   <div class="pbx-overflow-x-auto">
                     <table class="pbx-min-w-full">
                       <thead class="pbx-bg-stone-800">
@@ -134,7 +136,7 @@ function prettifyHtml(html) {
                       <tbody class="pbx-bg-stone-800 pbx-divide-y pbx-divide-gray-200">
                         <tr>
                           <td
-                            class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal pbx-border-b-solid"
+                            class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal pbx-border-solid pbx-border-b"
                           >
                             {{ getElement?.outerHTML }}
                           </td>
@@ -202,9 +204,11 @@ function prettifyHtml(html) {
               </div>
               <div
                 v-if="getComponent"
-                class="pbx-overflow-hidden pbx-border-solid pbx-border-gray-100 pbx-mb-6"
+                class="pbx-overflow-hidden pbx-border-solid pbx-border pbx-border-gray-100 pbx-mb-6"
               >
-                <div class="pbx-bg-stone-800 pbx-pt-4 pbx-1 pbx-border-b-solid pbx-border-gray-200">
+                <div
+                  class="pbx-bg-stone-800 pbx-pt-4 pbx-1 pbx-border-solid pbx-border-b pbx-border-gray-200"
+                >
                   <div class="pbx-overflow-x-auto">
                     <table class="pbx-min-w-full">
                       <thead class="pbx-bg-stone-800">
@@ -232,7 +236,7 @@ function prettifyHtml(html) {
                       <thead class="pbx-bg-stone-800">
                         <tr>
                           <th
-                            class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal pbx-border-t-solid pbx-border-gray-200"
+                            class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal pbx-border-solid pbx-border-t pbx-border-gray-200"
                           >
                             Title:
                           </th>
@@ -287,11 +291,11 @@ function prettifyHtml(html) {
                 <div
                   v-for="component in getComponents"
                   :key="component.id"
-                  class="pbx-overflow-hidden pbx-border-solid pbx-border-gray-100 pbx-mb-6"
+                  class="pbx-overflow-hidden pbx-border-solid pbx-border pbx-border-gray-100 pbx-mb-6"
                 >
                   <!-- Id and Title above the table, styled to look connected -->
                   <div
-                    class="pbx-bg-stone-800 pbx-pt-4 pbx-1 pbx-border-b-solid pbx-border-gray-200"
+                    class="pbx-bg-stone-800 pbx-pt-4 pbx-1 pbx-border-solid pbx-border-b pbx-border-gray-200"
                   >
                     <div class="pbx-overflow-x-auto">
                       <table class="pbx-min-w-full">
@@ -320,7 +324,7 @@ function prettifyHtml(html) {
                         <thead class="pbx-bg-stone-800">
                           <tr>
                             <th
-                              class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal pbx-border-t-solid pbx-border-gray-200"
+                              class="pbx-px-6 pbx-py-3 pbx-text-left pbx-text-xs pbx-text-gray-100 pbx-font-normal pbx-border-solid pbx-border-t pbx-border-gray-200"
                             >
                               Title:
                             </th>

package/src/Components/PageBuilder/Settings/PageBuilderSettings.vue

@@ -52,7 +52,9 @@ const handleDownloadHTML = function () {
     <!-- Advanced Settings - start -->
     <div class="pbx-flex pbx-gap-4 pbx-flex-col pbx-divide-y pbx-divide-gray-300">
       <!-- Advanced Settings - start -->
-      <div class="pbx-mb-4 pbx-pb-8 pbx-border-b-solid pbx-border-myPrimbryLightGrayColor">
+      <div
+        class="pbx-mb-4 pbx-pb-8 pbx-border-solid pbx-border-b pbx-border-myPrimbryLightGrayColor"
+      >
         <div class="pbx-flex pbx-items-left pbx-flex-col pbx-gap-1">
           <h3 class="pbx-myQuaternaryHeader">Configuration Overview</h3>
           <p class="pbx-myPrimaryParagraph pbx-text-xs">
@@ -576,7 +578,9 @@ const handleDownloadHTML = function () {
     </div>
     <!-- Advanced Settings - end -->
     <!-- Download Layout HTML - start -->
-    <div class="pbx-mt-4 pbx-mb-4 pbx-py-8 pbx-border-b-solid pbx-border-myPrimbryLightGrayColor">
+    <div
+      class="pbx-mt-4 pbx-mb-4 pbx-py-8 pbx-border-solid pbx-border-b pbx-border-myPrimbryLightGrayColor"
+    >
       <div class="pbx-flex pbx-items-left pbx-flex-col pbx-gap-1">
         <h3 class="pbx-myQuaternaryHeader">Download Page as HTML</h3>
         <p class="pbx-myPrimaryParagraph pbx-text-xs">Download current page layout.</p>
@@ -590,7 +594,9 @@ const handleDownloadHTML = function () {
     <!-- Download Layout HTML - end -->
 
     <!-- Congig - start -->
-    <div class="pbx-mt-4 pbx-mb-4 pbx-py-8 pbx-border-b-solid pbx-border-myPrimbryLightGrayColor">
+    <div
+      class="pbx-mt-4 pbx-mb-4 pbx-py-8 pbx-border-solid pbx-border-b pbx-border-myPrimbryLightGrayColor"
+    >
       <div class="pbx-flex pbx-items-left pbx-flex-col pbx-gap-1">
         <h3 class="pbx-myQuaternaryHeader">Complete Configuration Overview</h3>
         <p class="pbx-myPrimaryParagraph pbx-text-xs">

package/src/Components/PageBuilder/ToolbarOption/ToolbarOption.vue

@@ -156,7 +156,7 @@ const openHTMLSettings = function () {
             <span> Options </span>
           </button>
           <div
-            class="pbx-absolute pbx-left-0 -pbx-ml-16 -pbx-mt-2 pbx-flex pbx-flex-col pbx-gap-3 pbx-shadow-lg pbx-bg-white pbx-w-max pbx-border-solid pbx-border-gray-100 pbx-rounded-2xl pbx-transition-all pbx-duration-200 pbx-ease-out pbx-pt-4 pbx-pr-4 pbx-pb-4 pbx-pl-2 pbx-z-30 pbx-opacity-0 pbx-pointer-events-none pbx-translate-y-2 group-hover:pbx-opacity-100 group-hover:pbx-pointer-events-auto group-hover:pbx-translate-y-0"
+            class="pbx-absolute pbx-left-0 -pbx-ml-16 -pbx-mt-2 pbx-flex pbx-flex-col pbx-gap-3 pbx-shadow-lg pbx-bg-white pbx-w-max pbx-border-solid pbx-border pbx-border-gray-100 pbx-rounded-2xl pbx-transition-all pbx-duration-200 pbx-ease-out pbx-pt-4 pbx-pr-4 pbx-pb-4 pbx-pl-2 pbx-z-30 pbx-opacity-0 pbx-pointer-events-none pbx-translate-y-2 group-hover:pbx-opacity-100 group-hover:pbx-pointer-events-auto group-hover:pbx-translate-y-0"
           >
             <!-- Main Settings Start -->
             <button

package/src/Components/TipTap/TipTapInput.vue

@@ -219,12 +219,12 @@ onMounted(() => {
       <div v-if="pageBuilderService.isSelectedElementValidText() && editor">
         <div class="pbx-relative pbx-rounded-lg">
           <div
-            class="pbx-flex pbx-justify-between pbx-myPrimaryGap pbx-items-center pbx-py-4 pbx-px-4 pbx-overflow-x-auto pbx-border-b-solid pbx-border-gray-200"
+            class="pbx-flex pbx-justify-between pbx-myPrimaryGap pbx-items-center pbx-py-4 pbx-px-4 pbx-overflow-x-auto pbx-border-solid pbx-border-b pbx-border-gray-200"
           >
             <div>
               <div>
                 <div
-                  class="pbx-px-2 pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max pbx-p-1 pbx-rounded-full pbx-border-solid pbx-border-gray-200 pbx-shadow-sm"
+                  class="pbx-px-2 pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max pbx-p-1 pbx-rounded-full pbx-border-solid pbx-border pbx-border-gray-200 pbx-shadow-sm"
                 >
                   <button
                     @click="pageBuilderService.toggleTipTapModal(false)"
@@ -238,7 +238,7 @@ onMounted(() => {
               </div>
             </div>
             <div
-              class="pbx-flex pbx-items-center pbx-p-1 pbx-rounded-full pbx-border-solid pbx-border-gray-200 pbx-shadow-sm"
+              class="pbx-flex pbx-items-center pbx-p-1 pbx-rounded-full pbx-border-solid pbx-border pbx-border-gray-200 pbx-shadow-sm"
             >
               <div class="pbx-px-2 pbx-flex pbx-items-center pbx-justify-start pbx-gap-2 pbx-w-max">
                 <button

package/src/DemoComponents/DemoUnsplash.vue

@@ -169,7 +169,7 @@ onMounted(async () => {
       <div class="pbx-mt-2">
         <div
           v-if="getUnsplashImages && getUnsplashImages.results"
-          class="pbx-flex lg:pbx-justify-between pbx-justify-end pbx-items-center pbx-gap-2 pbx-py-2 pbx-px-2 pbx-mb-1 pbx-rounded-full pbx-border-solid pbx-border-gray-200 pbx-shadow-sm"
+          class="pbx-flex lg:pbx-justify-between pbx-justify-end pbx-items-center pbx-gap-2 pbx-py-2 pbx-px-2 pbx-mb-1 pbx-rounded-full pbx-border-solid pbx-border pbx-border-gray-200 pbx-shadow-sm"
         >
           <div class="lg:pbx-flex pbx-hidden pbx-justify-left pbx-items-center pbx-gap-2">
             <button
@@ -274,7 +274,7 @@ onMounted(async () => {
             <div v-if="getIsLoading">
               <div class="pbx-flex pbx-items-center pbx-justify-center pbx-mt-4">
                 <div
-                  class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
+                  class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
                 >
                   <span
                     class="!pbx-absolute !pbx-m-px !pbx-h-px !pbx-w-px !pbx-overflow-hidden !pbx-whitespace-nowrap !pbx-border-0 !pbx-p-0 !pbx-[clip:rect(0,0,0,0)]"
@@ -292,7 +292,7 @@ onMounted(async () => {
                   v-for="image in getUnsplashImages.results"
                   :key="image.id"
                   @click="handleImageClick({ url: image.urls.regular, user: image.user.name })"
-                  class="pbx-border-solid pbx-border-gray-200 pbx-my-2 pbx-px-2 pbx-p-2 pbx-cursor-pointer"
+                  class="pbx-border-solid pbx-border pbx-border-gray-200 pbx-my-2 pbx-px-2 pbx-p-2 pbx-cursor-pointer"
                 >
                   <img
                     :alt="image.user.name"
@@ -332,7 +332,7 @@ onMounted(async () => {
             <template v-if="getIsLoadingImage">
               <div class="pbx-flex pbx-items-center pbx-justify-center pbx-mt-4">
                 <div
-                  class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
+                  class="pbx-inline-block pbx-h-8 pbx-w-8 pbx-animate-spin pbx-rounded-full pbx-border-4 pbx-border-solid pbx-border pbx-border-current pbx-border-r-transparent pbx-align-[-0.125em] motion-reduce:pbx-animate-[spin_1.5s_linear_infinite]"
                 >
                   <span
                     class="!pbx-absolute !pbx-m-px !pbx-h-px !pbx-w-px !pbx-overflow-hidden !pbx-whitespace-nowrap !pbx-border-0 !pbx-p-0 !pbx-[clip:rect(0,0,0,0)]"
@@ -353,7 +353,7 @@ onMounted(async () => {
                     Information
                   </p>
                   <dl
-                    class="pbx-mt-2 pbx-border-t-solid pbx-border-b-solid pbx-border-gray-200 pbx-divide-y pbx-divide-gray-200"
+                    class="pbx-mt-2 pbx-border-solid pbx-border-t pbx-border-solid pbx-border-b pbx-border-gray-200 pbx-divide-y pbx-divide-gray-200"
                   >
                     <div
                       class="pbx-py-3 pbx-flex pbx-justify-between pbx-text-sm pbx-font-normal pbx-items-center"
@@ -377,7 +377,7 @@ onMounted(async () => {
 
         <!-- Actions footer # start -->
         <div
-          class="pbx-px-4 pbx-py-3 pbx-flex pbx-gap-2 pbx-border-t-solid pbx-border-gray-200 pbx-mt-4 pbx-justify-end"
+          class="pbx-px-4 pbx-py-3 pbx-flex pbx-gap-2 pbx-border-solid pbx-border-t pbx-border-gray-200 pbx-mt-4 pbx-justify-end"
         >
           <button
             @click="

package/src/PageBuilder/PageBuilder.vue

@@ -288,7 +288,6 @@ function updatePanelPosition() {
     const selectedRect = selected.getBoundingClientRect()
     const containerRect = container.getBoundingClientRect()
 
-    // Position editToolbar just above selected element, with a gap
     const left =
       selectedRect.left - containerRect.left + selectedRect.width / 2 - editToolbar.offsetWidth / 2
 
@@ -301,25 +300,17 @@ function updatePanelPosition() {
     editToolbar.style.position = 'absolute'
     editToolbar.style.left = `${left}px`
     editToolbar.style.top = `${top}px`
-    editToolbar.style.opacity = '1'
-    editToolbar.style.pointerEvents = 'auto'
-    editToolbar.style.transform = 'translateY(0)'
+    editToolbar.classList.add('is-visible')
 
-    // Store last position
     lastToolbarLeft = left
     lastToolbarTop = top
   } else if (restored && lastToolbarLeft !== null && lastToolbarTop !== null) {
-    // Use last position for restore icon
     editToolbar.style.position = 'absolute'
     editToolbar.style.left = `${lastToolbarLeft}px`
     editToolbar.style.top = `${lastToolbarTop}px`
-    editToolbar.style.opacity = '1'
-    editToolbar.style.pointerEvents = 'auto'
-    editToolbar.style.transform = 'translateY(0)'
+    editToolbar.classList.add('is-visible')
   } else {
-    editToolbar.style.opacity = '0'
-    editToolbar.style.pointerEvents = 'none'
-    editToolbar.style.transform = 'translateY(0.5rem)'
+    editToolbar.classList.remove('is-visible')
   }
 }
 
@@ -363,7 +354,7 @@ onMounted(async () => {
 
 <template>
   <div
-    class="pbx-font-sans pbx-max-w-full pbx-m-1 pbx-border-solid pbx-border-gray-400 pbx-inset-x-0 pbx-z-10 pbx-bg-white pbx-overflow-x-auto pbx-h-full"
+    class="pbx-font-sans pbx-max-w-full pbx-m-1 pbx-border-solid pbx-border pbx-border-gray-400 pbx-inset-x-0 pbx-z-10 pbx-bg-white pbx-overflow-x-auto pbx-h-full"
   >
     <GlobalLoader v-if="getIsLoadingGlobal & !openAppNotStartedModal"></GlobalLoader>
     <ModalBuilder
@@ -436,7 +427,7 @@ onMounted(async () => {
       <!-- Top Layout Save And Reset Area - Start -->
       <div
         id="pagebuilder-toolbar-area"
-        class="pbx-flex pbx-items-center pbx-justify-between pbx-bg-myPrimaryLightGrayColor pbx-border-b-solid pbx-border-gray-200 pbx-mb-2 lg:pbx-px-6 pbx-px-4 pbx-font-sans"
+        class="pbx-flex pbx-items-center pbx-justify-between pbx-bg-myPrimaryLightGrayColor pbx-border-solid pbx-border-b pbx-border-gray-200 pbx-mb-2 lg:pbx-px-6 pbx-px-4 pbx-font-sans"
       >
         <template
           v-if="
@@ -691,16 +682,16 @@ onMounted(async () => {
 
         <main
           ref="pbxToolBar"
-          class="pbx-flex pbx-flex-col pbx-grow pbx-rounded-tr-2xl pbx-rounded-tl-2xl pbx-border-solid pbx-border-gray-200 pbx-items-stretch pbx-h-[90vh]"
+          class="pbx-flex pbx-flex-col pbx-grow pbx-rounded-tr-2xl pbx-rounded-tl-2xl pbx-border-solid pbx-border pbx-border-gray-200 pbx-items-stretch pbx-h-[100vh]"
           :class="{ 'pbx-mr-2': !getMenuRight, '': getMenuRight }"
         >
           <div
             id="editToolbar"
             class="pbx-z-30 lg:pbx-mx-20 pbx-flex pbx-gap-2 pbx-justify-center pbx-min-w-48 pbx-items-center pbx-rounded-full pbx-px-4"
             style="
-              outline: 10px solid oklch(86.9% 0.005 56.366);
-              outline-offset: 0px;
+              box-shadow: 0 0 0 10px oklch(86.9% 0.005 56.366);
               background: oklch(86.9% 0.005 56.366);
+              border-radius: 9999px;
             "
           >
             <template v-if="getElement">
@@ -783,7 +774,7 @@ onMounted(async () => {
         </aside>
       </div>
       <div
-        class="pbx-flex pbx-items-center pbx-justify-center pbx-border-t-solid pbx-border-gray-200 pbx-py-4"
+        class="pbx-flex pbx-items-center pbx-justify-center pbx-p-4 pbx-border-t pbx-border-solid pbx-border-t-gray-200 lg:pbx-mx-10"
       >
         <div
           @click="

package/src/css/dev-global.css

@@ -125,28 +125,44 @@ These styles affect all HTML elements (like input, button, h1, etc.) in the cons
   justify-content: center;
 }
 
-/* Hide the panel by default */
 #settingsPanel {
+  position: absolute;
   opacity: 0;
   pointer-events: none;
-  /* matches pbx-translate-y-2 */
   transform: translateY(1rem);
-  transition: all 0.3s ease-out;
+  transition:
+    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow:
+    0 8px 24px rgba(0, 0, 0, 0.08),
+    0 1.5px 4px rgba(0, 0, 0, 0.06);
+}
+
+[selected]:hover #settingsPanel,
+[selected]:focus-within #settingsPanel {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+#editToolbar {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(0.5rem);
+  transition:
+    left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-/* Show the panel when the parent with [selected] is hovered */
-[selected]:hover #settingsPanel {
+#editToolbar.is-visible {
   opacity: 1;
   pointer-events: auto;
-  /* visible position */
-  transform: translateY(1);
+  transform: translateY(0);
 }
 
 #contains-pagebuilder {
   position: relative; /* make this the positioning context for absolute children */
   overflow-y: auto;
 }
-#settingsPanel {
-  position: absolute;
-  /* top and left will be set dynamically */
-}