diff --git a/assets/admin/settings.css b/assets/admin/settings.css
index f7bc5b5..b7dfb3b 100644
--- a/assets/admin/settings.css
+++ b/assets/admin/settings.css
@@ -520,6 +520,9 @@ video {
 .frbl-settings-wrapper .tw--ml-1 {
   margin-left: -0.25rem;
 }
+.frbl-settings-wrapper .tw-mb-0 {
+  margin-bottom: 0px;
+}
 .frbl-settings-wrapper .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -529,24 +532,24 @@ video {
 .frbl-settings-wrapper .tw-mb-8 {
   margin-bottom: 2rem;
 }
-.frbl-settings-wrapper .tw-ml-2 {
-  margin-left: 0.5rem;
-}
 .frbl-settings-wrapper .tw-ml-3 {
   margin-left: 0.75rem;
 }
-.frbl-settings-wrapper .tw-ml-auto {
-  margin-left: auto;
-}
 .frbl-settings-wrapper .tw-mr-2 {
   margin-right: 0.5rem;
 }
-.frbl-settings-wrapper .tw-mt-1 {
-  margin-top: 0.25rem;
+.frbl-settings-wrapper .tw-mt-0 {
+  margin-top: 0px;
 }
 .frbl-settings-wrapper .tw-mt-2 {
   margin-top: 0.5rem;
 }
+.frbl-settings-wrapper .tw-mt-4 {
+  margin-top: 1rem;
+}
+.frbl-settings-wrapper .tw-mt-6 {
+  margin-top: 1.5rem;
+}
 .frbl-settings-wrapper .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -574,15 +577,12 @@ video {
 .frbl-settings-wrapper .tw-max-w-5xl {
   max-width: 64rem;
 }
+.frbl-settings-wrapper .tw-flex-1 {
+  flex: 1 1 0%;
+}
 .frbl-settings-wrapper .tw-flex-shrink-0 {
   flex-shrink: 0;
 }
-.frbl-settings-wrapper .tw-flex-grow {
-  flex-grow: 1;
-}
-.frbl-settings-wrapper .tw-items-start {
-  align-items: flex-start;
-}
 .frbl-settings-wrapper .tw-items-center {
   align-items: center;
 }
@@ -592,24 +592,19 @@ video {
 .frbl-settings-wrapper .tw-gap-2 {
   gap: 0.5rem;
 }
-.frbl-settings-wrapper .tw-gap-3 {
-  gap: 0.75rem;
-}
 .frbl-settings-wrapper :is(.tw-space-x-2 > :not([hidden]) ~ :not([hidden])) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
-.frbl-settings-wrapper :is(.tw-space-y-4 > :not([hidden]) ~ :not([hidden])) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
-}
 .frbl-settings-wrapper :is(.tw-space-y-6 > :not([hidden]) ~ :not([hidden])) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
 }
+.frbl-settings-wrapper .tw-overflow-auto {
+  overflow: auto;
+}
 .frbl-settings-wrapper .tw-overflow-hidden {
   overflow: hidden;
 }
@@ -646,24 +641,16 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
-.frbl-settings-wrapper .tw-border-green-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
-}
 .frbl-settings-wrapper .tw-border-red-200 {
   --tw-border-opacity: 1;
   border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
 }
-.frbl-settings-wrapper .tw-border-red-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
-}
 .frbl-settings-wrapper .tw-border-transparent {
   border-color: transparent;
 }
-.frbl-settings-wrapper .tw-border-yellow-300 {
+.frbl-settings-wrapper .tw-border-yellow-200 {
   --tw-border-opacity: 1;
-  border-color: rgb(253 224 71 / var(--tw-border-opacity, 1));
+  border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
 }
 .frbl-settings-wrapper .tw-border-yellow-400 {
   --tw-border-opacity: 1;
@@ -677,10 +664,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
 }
-.frbl-settings-wrapper .tw-bg-green-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
-}
 .frbl-settings-wrapper .tw-bg-primary-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(228 230 253 / var(--tw-bg-opacity, 1));
@@ -689,10 +672,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(104 125 249 / var(--tw-bg-opacity, 1));
 }
-.frbl-settings-wrapper .tw-bg-red-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
-}
 .frbl-settings-wrapper .tw-bg-red-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
@@ -701,10 +680,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
-.frbl-settings-wrapper .tw-bg-yellow-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
-}
 .frbl-settings-wrapper .tw-bg-yellow-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
@@ -720,12 +695,12 @@ video {
 .frbl-settings-wrapper .tw-to-white {
   --tw-gradient-to: #fff var(--tw-gradient-to-position);
 }
-.frbl-settings-wrapper .tw-p-3 {
-  padding: 0.75rem;
-}
 .frbl-settings-wrapper .tw-p-4 {
   padding: 1rem;
 }
+.frbl-settings-wrapper .tw-p-6 {
+  padding: 1.5rem;
+}
 .frbl-settings-wrapper .tw-px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -742,6 +717,10 @@ video {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
+.frbl-settings-wrapper .tw-py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
 .frbl-settings-wrapper .tw-py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
@@ -754,15 +733,16 @@ video {
   padding-top: 2rem;
   padding-bottom: 2rem;
 }
-.frbl-settings-wrapper .tw-pr-4 {
-  padding-right: 1rem;
-}
 .frbl-settings-wrapper .tw-pt-6 {
   padding-top: 1.5rem;
 }
 .frbl-settings-wrapper .tw-text-center {
   text-align: center;
 }
+.frbl-settings-wrapper .tw-text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
 .frbl-settings-wrapper .tw-text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
@@ -771,6 +751,10 @@ video {
   font-size: 1rem;
   line-height: 1.5rem;
 }
+.frbl-settings-wrapper .tw-text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
 .frbl-settings-wrapper .tw-text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -808,13 +792,13 @@ video {
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity, 1));
 }
-.frbl-settings-wrapper .tw-text-gray-900 {
+.frbl-settings-wrapper .tw-text-gray-700 {
   --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
 }
-.frbl-settings-wrapper .tw-text-green-800 {
+.frbl-settings-wrapper .tw-text-gray-900 {
   --tw-text-opacity: 1;
-  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
+  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
 }
 .frbl-settings-wrapper .tw-text-primary-500 {
   --tw-text-opacity: 1;
@@ -828,10 +812,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(185 28 28 / var(--tw-text-opacity, 1));
 }
-.frbl-settings-wrapper .tw-text-red-800 {
-  --tw-text-opacity: 1;
-  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
-}
 .frbl-settings-wrapper .tw-text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -844,19 +824,9 @@ video {
   --tw-text-opacity: 1;
   color: rgb(161 98 7 / var(--tw-text-opacity, 1));
 }
-.frbl-settings-wrapper .tw-text-yellow-800 {
-  --tw-text-opacity: 1;
-  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
-}
 .frbl-settings-wrapper .tw-underline {
   text-decoration-line: underline;
 }
-.frbl-settings-wrapper .tw-no-underline {
-  text-decoration-line: none;
-}
-.frbl-settings-wrapper .tw-opacity-50 {
-  opacity: 0.5;
-}
 .frbl-settings-wrapper .tw-shadow-sm {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@@ -1051,10 +1021,6 @@ video {
     margin-bottom: calc(1rem * var(--tw-space-y-reverse));
   }
 }
-.frbl-settings-wrapper .hover\:tw-bg-primary-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(205 208 251 / var(--tw-bg-opacity, 1));
-}
 .frbl-settings-wrapper .hover\:tw-bg-primary-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(85 101 237 / var(--tw-bg-opacity, 1));
@@ -1063,9 +1029,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(85 101 237 / var(--tw-text-opacity, 1));
 }
-.frbl-settings-wrapper .hover\:tw-no-underline:hover {
-  text-decoration-line: none;
-}
 .frbl-settings-wrapper .focus\:tw-border-transparent:focus {
   border-color: transparent;
 }
@@ -1100,486 +1063,3 @@ video {
   }
 }
 
-/* Custom styles for license fields */
-.frbl-settings-wrapper .tw-text-base:not(button) {
-	font-size: 1rem;
-	line-height: 1.5rem;
-	width: 100%;
-}
-
-.frbl-settings-wrapper .tw-flex {
-	display: flex;
-	column-gap: 20px;
-}
-
-/* Submit button width */
-.frbl-settings-wrapper .tw-w-1\/2 {
-	width: 50%;
-}
-
-/* Features Grid Layout */
-.frbl-section-wrapper {
-	margin-bottom: 3rem;
-}
-
-.frbl-features-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-	gap: 1.25rem;
-}
-
-/* Feature Card Styles */
-.frbl-feature-card {
-	position: relative;
-	background: #ffffff;
-	border: 1px solid #e5e7eb;
-	border-radius: 12px;
-	padding: 1.5rem;
-	transition: all 0.2s ease;
-	overflow: hidden;
-	display: flex;
-	flex-direction: column;
-	min-height: 80px;
-}
-
-.frbl-feature-card:hover {
-	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-	transform: translateY(-2px);
-	border-color: #687df9;
-}
-
-/* PRO Badge */
-.frbl-pro-badge {
-	position: absolute;
-	top: 0;
-	left: 0;
-	background: linear-gradient(135deg, #ec4899 0%, #f97316 100%);
-	color: #ffffff;
-	font-size: 0.625rem;
-	font-weight: 700;
-	letter-spacing: 0.05em;
-	padding: 0.25rem 0.75rem;
-	border-radius: 0 0 12px 0;
-	box-shadow: 0 2px 4px rgba(236, 72, 153, 0.3);
-	z-index: 10;
-}
-
-/* Feature Card Content */
-.frbl-feature-content {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 1rem;
-	min-height: 3rem;
-}
-
-/* Feature Icon */
-.frbl-feature-icon {
-	flex-shrink: 0;
-	width: 2.5rem;
-	height: 2.5rem;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
-	border-radius: 10px;
-	color: #687df9;
-	transition: all 0.2s ease;
-}
-
-.frbl-feature-card:hover .frbl-feature-icon {
-	background: linear-gradient(135deg, #e0e3fc 0%, #d0d4fb 100%);
-	transform: scale(1.05);
-}
-
-.frbl-feature-icon svg {
-	width: 1.5rem;
-	height: 1.5rem;
-	stroke-width: 2;
-}
-
-/* Feature Info */
-.frbl-feature-info {
-	flex: 1;
-	min-width: 0;
-	display: flex;
-	align-items: center;
-}
-
-.frbl-feature-title {
-	font-size: 0.9375rem;
-	font-weight: 600;
-	color: #1f2937;
-	margin: 0;
-	line-height: 1.5;
-}
-
-.frbl-feature-description {
-	font-size: 0.8125rem;
-	color: #6b7280;
-	margin: 0.25rem 0 0 0;
-	line-height: 1.4;
-}
-
-/* Active Feature Cards */
-.frbl-feature-card.frbl-feature-active {
-	background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
-	border-color: #d1fae5;
-}
-
-.frbl-feature-card.frbl-feature-active:hover {
-	border-color: #10b981;
-}
-
-.frbl-feature-card.frbl-feature-active .frbl-feature-icon {
-	background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
-	color: #10b981;
-}
-
-.frbl-feature-card.frbl-feature-active:hover .frbl-feature-icon {
-	background: linear-gradient(135deg, #a7f3d0 0%, #6ee7b7 100%);
-}
-
-/* Active cards need vertical layout for description */
-.frbl-feature-card.frbl-feature-active .frbl-feature-info {
-	flex-direction: column;
-	align-items: flex-start;
-}
-
-/* Active cards don't have toggle, so don't use space-between */
-.frbl-feature-card.frbl-feature-active .frbl-feature-content {
-	justify-content: flex-start;
-}
-
-/* Feature Toggle */
-.frbl-feature-toggle {
-	flex-shrink: 0;
-	display: flex;
-	align-items: center;
-}
-
-/* PRO Card Styles */
-.frbl-feature-card.frbl-feature-pro {
-	background: linear-gradient(135deg, #ffffff 0%, #fef3f2 100%);
-	border-color: #fee2e2;
-}
-
-.frbl-feature-card.frbl-feature-pro:hover {
-	border-color: #ec4899;
-}
-
-.frbl-feature-card.frbl-feature-pro .frbl-feature-icon {
-	background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
-	color: #ec4899;
-}
-
-.frbl-feature-card.frbl-feature-pro:hover .frbl-feature-icon {
-	background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
-}
-
-/* Disabled state for PRO features without license */
-.frbl-feature-card.frbl-feature-pro .frbl-toggle:has(input:disabled) {
-	opacity: 0.6;
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-	.frbl-features-grid {
-		grid-template-columns: 1fr;
-	}
-	
-	.frbl-feature-card {
-		padding: 1.25rem;
-	}
-}
-
-@media (min-width: 768px) and (max-width: 1024px) {
-	.frbl-features-grid {
-		grid-template-columns: repeat(2, 1fr);
-	}
-}
-
-
-/* =============================================
-   License Management Styles (Complete & Independent)
-   Based on FormsCRM but standalone for FrontBlocks
-   ============================================= */
-
-/* License Wrapper - Grid Layout */
-.formscrm-license-wrapper {
-	display: grid;
-	grid-template-columns: 1fr 320px;
-	gap: 24px;
-	max-width: 1200px;
-	margin: 20px 0;
-}
-
-@media (max-width: 900px) {
-	.formscrm-license-wrapper {
-		grid-template-columns: 1fr;
-	}
-}
-
-/* Main Card */
-.formscrm-card {
-	background: #fff;
-	border: 1px solid #e5e7eb;
-	border-radius: 12px;
-	padding: 32px;
-	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
-}
-
-.formscrm-card-header {
-	margin-bottom: 24px;
-	padding-bottom: 20px;
-	border-bottom: 1px solid #e5e7eb;
-}
-
-.formscrm-card-header h2 {
-	margin: 0 0 8px 0;
-	font-size: 1.5rem;
-	font-weight: 600;
-	color: #1f2937;
-}
-
-.formscrm-card-header p {
-	margin: 0;
-	color: #6b7280;
-	font-size: 0.875rem;
-}
-
-/* Form Elements */
-.formscrm-form-group {
-	margin-bottom: 24px;
-}
-
-.formscrm-label {
-	display: block;
-	font-weight: 600;
-	color: #374151;
-	margin-bottom: 8px;
-	font-size: 0.875rem;
-}
-
-.formscrm-input-group {
-	display: flex;
-	gap: 12px;
-	align-items: center;
-}
-
-.formscrm-input {
-	flex: 1;
-	padding: 12px 16px;
-	border: 1px solid #d1d5db;
-	border-radius: 8px;
-	font-size: 1rem;
-	transition: all 0.2s;
-	background: #fff;
-}
-
-.formscrm-input:focus {
-	outline: none;
-	border-color: #8b5cf6;
-	box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
-}
-
-.formscrm-input[readonly] {
-	background: #f9fafb;
-	color: #6b7280;
-	cursor: not-allowed;
-}
-
-/* Deactivate Label */
-.formscrm-deactivate-label {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 12px 16px;
-	background: #fef2f2;
-	border: 1px solid #fecaca;
-	border-radius: 8px;
-	cursor: pointer;
-	transition: background 0.2s;
-	white-space: nowrap;
-}
-
-.formscrm-deactivate-label:hover {
-	background: #fee2e2;
-}
-
-.formscrm-deactivate-label input {
-	margin: 0;
-}
-
-.formscrm-deactivate-label span {
-	font-size: 0.875rem;
-	font-weight: 600;
-	color: #dc2626;
-}
-
-/* Help Text */
-.formscrm-help-text {
-	margin: 8px 0 0 0;
-	font-size: 0.75rem;
-	color: #9ca3af;
-}
-
-/* Status Box */
-.formscrm-status-box {
-	display: flex;
-	align-items: center;
-	gap: 12px;
-	padding: 14px 18px;
-	border-radius: 8px;
-	border: 2px solid;
-}
-
-.formscrm-status-active {
-	background: #dcfce7;
-	border-color: #86efac;
-	color: #166534;
-}
-
-.formscrm-status-expired {
-	background: #fee2e2;
-	border-color: #fca5a5;
-	color: #991b1b;
-}
-
-.formscrm-status-inactive {
-	background: #fef9c3;
-	border-color: #fde047;
-	color: #854d0e;
-}
-
-.formscrm-status-icon {
-	display: flex;
-	flex-shrink: 0;
-}
-
-.formscrm-icon,
-.fcod-icon {
-	width: 22px;
-	height: 22px;
-}
-
-.formscrm-status-text {
-	font-weight: 700;
-	font-size: 1rem;
-}
-
-/* Notices */
-.formscrm-notice {
-	padding: 14px 18px;
-	border-radius: 8px;
-	margin-bottom: 20px;
-}
-
-.formscrm-notice p {
-	margin: 0;
-	font-size: 0.875rem;
-	line-height: 1.5;
-}
-
-.formscrm-notice a {
-	font-weight: 600;
-	text-decoration: underline;
-}
-
-.formscrm-notice-info {
-	background: #f0f9ff;
-	border: 1px solid #bfdbfe;
-	color: #1e40af;
-}
-
-.formscrm-notice-info a {
-	color: #1d4ed8;
-}
-
-.formscrm-notice-error {
-	background: #fef2f2;
-	border: 1px solid #fecaca;
-	color: #991b1b;
-}
-
-.formscrm-notice-error a {
-	color: #dc2626;
-}
-
-/* Form Actions */
-.formscrm-form-actions {
-	margin-top: 24px;
-	padding-top: 24px;
-	border-top: 1px solid #e5e7eb;
-}
-
-/* Buttons - FrontBlocks Purple Style */
-.formscrm-button {
-	display: inline-flex;
-	align-items: center;
-	padding: 12px 24px;
-	border-radius: 8px;
-	font-size: 1rem;
-	font-weight: 600;
-	cursor: pointer;
-	transition: all 0.2s;
-	border: none;
-}
-
-.formscrm-button-primary {
-	background: #8b5cf6;
-	color: #fff;
-}
-
-.formscrm-button-primary:hover {
-	background: #7c3aed;
-	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-}
-
-/* Info Card (Sidebar) */
-.formscrm-info-card {
-	background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
-	border: 1px solid #e2e8f0;
-	border-radius: 12px;
-	padding: 24px;
-	height: fit-content;
-}
-
-.formscrm-info-card h3 {
-	margin: 0 0 12px 0;
-	font-size: 1.125rem;
-	font-weight: 700;
-	color: #1e293b;
-}
-
-.formscrm-info-card p {
-	margin: 0 0 16px 0;
-	font-size: 0.875rem;
-	color: #64748b;
-	line-height: 1.5;
-}
-
-/* Benefits List */
-.formscrm-benefits-list {
-	margin: 0;
-	padding: 0;
-	list-style: none;
-}
-
-.formscrm-benefits-list li {
-	position: relative;
-	padding-left: 28px;
-	margin-bottom: 10px;
-	font-size: 0.875rem;
-	color: #475569;
-}
-
-.formscrm-benefits-list li::before {
-	content: "✓";
-	position: absolute;
-	left: 0;
-	top: 0;
-	color: #8b5cf6;
-	font-weight: 700;
-	font-size: 1.125rem;
-}
diff --git a/assets/carousel/frontblocks-advanced-option.js b/assets/carousel/frontblocks-advanced-option.js
index c61355e..9ace701 100644
--- a/assets/carousel/frontblocks-advanced-option.js
+++ b/assets/carousel/frontblocks-advanced-option.js
@@ -1,8 +1,14 @@
 "use strict";
 
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 // Add custom controls to the Advanced panel of GenerateBlocks Grid block
 var addFilter = wp.hooks.addFilter;
-var Fragment = wp.element.Fragment;
+var _wp$element = wp.element,
+  Fragment = _wp$element.Fragment,
+  useEffect = _wp$element.useEffect,
+  useRef = _wp$element.useRef;
 var _wp$blockEditor = wp.blockEditor,
   InspectorControls = _wp$blockEditor.InspectorControls,
   PanelColorSettings = _wp$blockEditor.PanelColorSettings;
@@ -12,22 +18,79 @@ var _wp$components = wp.components,
   PanelBody = _wp$components.PanelBody,
   ToggleControl = _wp$components.ToggleControl;
 var __ = wp.i18n.__;
+
+/**
+ * Returns the document that renders block content.
+ * WordPress 6.x uses an <iframe> for the editor canvas.
+ */
+function getEditorDocument() {
+  var iframe = document.querySelector('iframe[name="editor-canvas"]');
+  return iframe && iframe.contentDocument && iframe.contentDocument.body ? iframe.contentDocument : document;
+}
+var UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-/;
+
+/**
+ * Walk an element's subtree to find the container whose DIRECT children
+ * are actual blocks (UUID data-block).  Stops at depth 4.
+ */
+function findSlidesParent(el, depth) {
+  if (depth === 0) return null;
+  if (Array.from(el.children).some(function (c) {
+    return UUID_RE.test(c.dataset.block || '');
+  })) {
+    return el;
+  }
+  var _iterator = _createForOfIteratorHelper(el.children),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var child = _step.value;
+      var found = findSlidesParent(child, depth - 1);
+      if (found) return found;
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return null;
+}
+
+/**
+ * Find the grid DOM element for a given block.
+ *
+ * For generateblocks/element: [data-block][data-type] IS the gb-element.
+ *   Do NOT search inside – that returns a child item.
+ * For generateblocks/grid:  look for .gb-grid-wrapper inside.
+ * For core/group: walk the subtree to find the element whose children
+ *   are the real blocks, because WP nests them differently across versions.
+ */
+function findGridEl(blockEl, name) {
+  if (name === 'generateblocks/element') {
+    return blockEl;
+  }
+  if (name === 'generateblocks/grid') {
+    if (blockEl.classList.contains('gb-grid-wrapper')) return blockEl;
+    var grid = blockEl.querySelector('.gb-grid-wrapper');
+    return grid || null;
+  }
+  if (name === 'core/group') {
+    // Walk up to 4 levels deep to find where the child blocks live.
+    return findSlidesParent(blockEl, 4) || blockEl;
+  }
+  return null;
+}
 function addCustomCarouselPanel(BlockEdit) {
   return function (props) {
-    // Support grid blocks, element blocks with grid display, and core/group blocks
     if (props.name !== 'generateblocks/grid' && props.name !== 'generateblocks/element' && props.name !== 'core/group') {
       return /*#__PURE__*/React.createElement(BlockEdit, props);
     }
-
-    // For element blocks, only show carousel options if it has grid display
     if (props.name === 'generateblocks/element') {
       var styles = props.attributes.styles || {};
       if (styles.display !== 'grid') {
         return /*#__PURE__*/React.createElement(BlockEdit, props);
       }
     }
-
-    // For core/group blocks, only show carousel options if it has grid layout
     if (props.name === 'core/group') {
       var layout = props.attributes.layout || {};
       if (layout.type !== 'grid') {
@@ -47,18 +110,222 @@ function addCustomCarouselPanel(BlockEdit) {
       frblResponsiveToView = _props$attributes$frb5 === void 0 ? '1' : _props$attributes$frb5,
       _props$attributes$frb6 = _props$attributes.frblAutoplay,
       frblAutoplay = _props$attributes$frb6 === void 0 ? '' : _props$attributes$frb6,
-      _props$attributes$frbGap = _props$attributes.frblGap,
-      frblGap = _props$attributes$frbGap === void 0 ? '20' : _props$attributes$frbGap,
-      _props$attributes$frb7 = _props$attributes.frblButtons,
-      frblButtons = _props$attributes$frb7 === void 0 ? 'arrows' : _props$attributes$frb7,
-      _props$attributes$frb8 = _props$attributes.frblRewind,
-      frblRewind = _props$attributes$frb8 === void 0 ? true : _props$attributes$frb8,
+      _props$attributes$frb7 = _props$attributes.frblGap,
+      frblGap = _props$attributes$frb7 === void 0 ? '20' : _props$attributes$frb7,
+      _props$attributes$frb8 = _props$attributes.frblButtons,
+      frblButtons = _props$attributes$frb8 === void 0 ? 'arrows' : _props$attributes$frb8,
+      _props$attributes$frb9 = _props$attributes.frblRewind,
+      frblRewind = _props$attributes$frb9 === void 0 ? true : _props$attributes$frb9,
       frblButtonColor = _props$attributes.frblButtonColor,
       frblButtonBgColor = _props$attributes.frblButtonBgColor,
-      _props$attributes$frb9 = _props$attributes.frblButtonsPosition,
-      frblButtonsPosition = _props$attributes$frb9 === void 0 ? 'side' : _props$attributes$frb9,
-      _props$attributes$frb0 = _props$attributes.frblDisableOnDesktop,
-      frblDisableOnDesktop = _props$attributes$frb0 === void 0 ? false : _props$attributes$frb0;
+      _props$attributes$frb0 = _props$attributes.frblButtonsPosition,
+      frblButtonsPosition = _props$attributes$frb0 === void 0 ? 'side' : _props$attributes$frb0,
+      _props$attributes$frb1 = _props$attributes.frblDisableOnDesktop,
+      frblDisableOnDesktop = _props$attributes$frb1 === void 0 ? false : _props$attributes$frb1;
+
+    // ── Editor carousel preview ──────────────────────────────────────────
+    var stateRef = useRef(null);
+    useEffect(function () {
+      var mounted = true;
+      var timer = null;
+      function cleanup() {
+        if (!stateRef.current) return;
+        var _stateRef$current = stateRef.current,
+          gridEl = _stateRef$current.gridEl,
+          slides = _stateRef$current.slides,
+          spacer = _stateRef$current.spacer,
+          prevBtn = _stateRef$current.prevBtn,
+          nextBtn = _stateRef$current.nextBtn,
+          resizeObs = _stateRef$current.resizeObs,
+          scrollFn = _stateRef$current.scrollFn;
+
+        // Disconnect observer and scroll listener.
+        if (resizeObs) resizeObs.disconnect();
+        var editorDoc = getEditorDocument();
+        var editorScrollEl = editorDoc.documentElement || editorDoc.body;
+        if (scrollFn) editorScrollEl.removeEventListener('scroll', scrollFn, true);
+
+        // Remove arrows from outer window body (completely outside React).
+        [prevBtn, nextBtn].forEach(function (btn) {
+          if (btn && btn.parentNode) btn.parentNode.removeChild(btn);
+        });
+
+        // Remove right spacer element.
+        if (spacer && spacer.parentNode) spacer.parentNode.removeChild(spacer);
+
+        // Restore gridEl styles.
+        try {
+          gridEl.classList.remove('frbl-carousel-noscrollbar');
+          ['display', 'flex-wrap', 'gap', 'overflow-x', 'scroll-behavior', 'padding-left', 'padding-right'].forEach(function (p) {
+            return gridEl.style.removeProperty(p);
+          });
+          slides.forEach(function (slide) {
+            ['flex-shrink', 'width', 'min-width', 'margin-left', 'margin-right', 'grid-column'].forEach(function (p) {
+              return slide.style.removeProperty(p);
+            });
+          });
+        } catch (e) {}
+        stateRef.current = null;
+      }
+      function init() {
+        if (!mounted) return;
+        cleanup();
+        var editorDoc = getEditorDocument();
+
+        // GB 2.x wraps blocks in a root element that shares the same data-block UUID.
+        // Use data-type to select the correct inner element; fall back for native blocks.
+        var blockEl = editorDoc.querySelector("[data-block=\"".concat(props.clientId, "\"][data-type=\"").concat(props.name, "\"]"));
+        if (!blockEl) {
+          blockEl = editorDoc.querySelector("[data-block=\"".concat(props.clientId, "\"]"));
+        }
+        if (!blockEl) return;
+        var gridEl = findGridEl(blockEl, props.name);
+        if (!gridEl) return;
+
+        // Slides = direct children that are real blocks (UUID data-block).
+        var slides = Array.from(gridEl.children).filter(function (el) {
+          return UUID_RE.test(el.dataset.block || '');
+        });
+        if (slides.length === 0) return;
+        var perView = Math.max(1, parseInt(frblItemsToView) || 4);
+        var gap = Math.max(0, parseInt(frblGap) || 20);
+        var btnColor = frblButtonColor || '#fff';
+        var btnBg = frblButtonBgColor || 'rgba(0,0,0,0.45)';
+
+        // Measure content-box width before any style changes.
+        var editorWin = editorDoc.defaultView || window;
+        var ARROW_W = 40; // px reserved on each side for arrow buttons.
+        var cs = editorWin.getComputedStyle(gridEl);
+        var innerW = gridEl.getBoundingClientRect().width - (parseFloat(cs.paddingLeft) || 0) - (parseFloat(cs.paddingRight) || 0);
+        var totalWidth = Math.round(innerW) || 600;
+        // Content area after reserving space for both arrow buttons.
+        var contentW = totalWidth - ARROW_W * 2;
+        var slideWidth = Math.round((contentW - gap * (perView - 1)) / perView);
+        var step = slideWidth + gap;
+
+        // ── Apply scroll-based layout directly to gridEl ─────────────
+        // No DOM restructuring → no React reconciliation conflicts.
+        gridEl.classList.add('frbl-carousel-noscrollbar');
+        gridEl.style.display = 'flex';
+        gridEl.style.flexWrap = 'nowrap';
+        gridEl.style.gap = gap + 'px';
+        gridEl.style.overflowX = 'scroll';
+        gridEl.style.scrollBehavior = 'smooth';
+        // paddingLeft creates left space for the prev arrow.
+        // paddingRight is NOT used because Chrome ignores it in scroll extent;
+        // a spacer flex child is appended instead to guarantee right-side space.
+        gridEl.style.paddingLeft = ARROW_W + 'px';
+        gridEl.style.paddingRight = '0';
+        slides.forEach(function (slide) {
+          slide.style.flexShrink = '0';
+          slide.style.width = slideWidth + 'px';
+          slide.style.minWidth = slideWidth + 'px';
+          slide.style.marginLeft = '0';
+          slide.style.marginRight = '0';
+          slide.style.gridColumn = 'unset';
+        });
+
+        // Right-side spacer: Chrome does not include padding-right in horizontal
+        // scroll extent, so we use a real flex child to guarantee right space.
+        var appender = gridEl.querySelector('.block-list-appender');
+        var spacer = editorDoc.createElement('span');
+        spacer.setAttribute('data-frbl-spacer', '1');
+        spacer.style.cssText = "display:block;flex-shrink:0;width:".concat(ARROW_W, "px;min-width:").concat(ARROW_W, "px;");
+        gridEl.insertBefore(spacer, appender || null);
+
+        // ── Navigation (scrollLeft, infinite loop) ───────────────────
+        var idx = 0;
+        function scrollTo(n) {
+          var total = slides.length;
+          if (n >= total) {
+            // Forward past last: instant snap to 0 then continue.
+            gridEl.style.scrollBehavior = 'auto';
+            gridEl.scrollLeft = 0;
+            void gridEl.offsetWidth;
+            gridEl.style.scrollBehavior = 'smooth';
+            idx = 0;
+            return;
+          }
+          if (n < 0) {
+            // Back past first: instant snap to last.
+            gridEl.style.scrollBehavior = 'auto';
+            gridEl.scrollLeft = Math.round((total - 1) * step);
+            void gridEl.offsetWidth;
+            gridEl.style.scrollBehavior = 'smooth';
+            idx = total - 1;
+            return;
+          }
+          idx = n;
+          gridEl.scrollLeft = Math.round(idx * step);
+        }
+
+        // ── Arrows in OUTER document body ────────────────────────────
+        // Placing them outside the iframe means React never touches them.
+        var iframe = document.querySelector('iframe[name="editor-canvas"]');
+        function updateArrowPos() {
+          if (!stateRef.current) return;
+          var ifrRect = iframe ? iframe.getBoundingClientRect() : {
+            top: 0,
+            left: 0
+          };
+          var rect = gridEl.getBoundingClientRect(); // coords in iframe viewport
+          var midY = Math.round(ifrRect.top + rect.top + rect.height / 2 - 16);
+          prevBtn.style.top = midY + 'px';
+          prevBtn.style.left = Math.round(ifrRect.left + rect.left + 8) + 'px';
+          nextBtn.style.top = midY + 'px';
+          nextBtn.style.right = Math.round(window.innerWidth - (ifrRect.left + rect.right) + 8) + 'px';
+        }
+        function makeArrow(dir) {
+          var btn = document.createElement('button');
+          btn.type = 'button';
+          btn.className = "frbl-editor-arrow frbl-editor-arrow-".concat(dir);
+          btn.setAttribute('aria-label', dir === 'prev' ? 'Previous slide' : 'Next slide');
+          btn.style.cssText = "position:fixed;z-index:99999;background-color:".concat(btnBg, ";");
+          var d = dir === 'prev' ? 'M6 1L1 6L6 11' : 'M1 11L6 6L1 1';
+          btn.innerHTML = "<svg width=\"7\" height=\"12\" viewBox=\"0 0 7 12\" fill=\"none\"><path d=\"".concat(d, "\" stroke=\"").concat(btnColor, "\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>");
+          btn.addEventListener('click', function (e) {
+            e.stopPropagation();
+            scrollTo(dir === 'prev' ? idx - 1 : idx + 1);
+          });
+          document.body.appendChild(btn);
+          return btn;
+        }
+        var prevBtn = makeArrow('prev');
+        var nextBtn = makeArrow('next');
+        updateArrowPos();
+
+        // Keep arrows positioned correctly when the editor scrolls or resizes.
+        var resizeObs = new ResizeObserver(updateArrowPos);
+        resizeObs.observe(gridEl);
+        var editorScrollEl = editorDoc.documentElement || editorDoc.body;
+        var scrollFn = updateArrowPos;
+        editorScrollEl.addEventListener('scroll', scrollFn, {
+          passive: true,
+          capture: true
+        });
+        stateRef.current = {
+          gridEl: gridEl,
+          slides: slides,
+          spacer: spacer,
+          prevBtn: prevBtn,
+          nextBtn: nextBtn,
+          resizeObs: resizeObs,
+          scrollFn: scrollFn
+        };
+      }
+      if (frblGridOption !== 'none') {
+        timer = setTimeout(init, 300);
+      } else {
+        cleanup();
+      }
+      return function () {
+        mounted = false;
+        if (timer) clearTimeout(timer);
+        cleanup();
+      };
+    }, [frblGridOption, frblItemsToView, frblGap, frblButtonColor, frblButtonBgColor, props.clientId]);
+    // ── Inspector panel ──────────────────────────────────────────────────
+
     return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BlockEdit, props), /*#__PURE__*/React.createElement(InspectorControls, null, /*#__PURE__*/React.createElement(PanelBody, {
       title: __('Carousel Settings', 'frontblocks'),
       initialOpen: true
@@ -76,7 +343,7 @@ function addCustomCarouselPanel(BlockEdit) {
         value: 'slider'
       }],
       onChange: function onChange(value) {
-        props.setAttributes({
+        return props.setAttributes({
           frblGridOption: value
         });
       },
@@ -134,7 +401,7 @@ function addCustomCarouselPanel(BlockEdit) {
         });
       },
       help: __('Space between slides in pixels. Leave empty for 20.', 'frontblocks')
-    }), frblGridOption === 'slider' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToggleControl, {
+    }), frblGridOption === 'slider' && /*#__PURE__*/React.createElement(ToggleControl, {
       label: __('Rewind', 'frontblocks'),
       checked: frblRewind,
       onChange: function onChange(value) {
@@ -142,7 +409,7 @@ function addCustomCarouselPanel(BlockEdit) {
           frblRewind: value
         });
       }
-    })), /*#__PURE__*/React.createElement(SelectControl, {
+    }), /*#__PURE__*/React.createElement(SelectControl, {
       label: __('Buttons', 'frontblocks'),
       value: frblButtons,
       options: [{
@@ -160,7 +427,7 @@ function addCustomCarouselPanel(BlockEdit) {
           frblButtons: value
         });
       }
-    }), frblButtons === 'arrows' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectControl, {
+    }), frblButtons === 'arrows' && /*#__PURE__*/React.createElement(SelectControl, {
       label: __('Buttons Position', 'frontblocks'),
       value: frblButtonsPosition,
       options: [{
@@ -175,7 +442,7 @@ function addCustomCarouselPanel(BlockEdit) {
           frblButtonsPosition: value
         });
       }
-    })), /*#__PURE__*/React.createElement(PanelColorSettings, {
+    }), /*#__PURE__*/React.createElement(PanelColorSettings, {
       title: __('Button Colors', 'frontblocks'),
       colorSettings: [{
         value: frblButtonColor,
diff --git a/assets/carousel/frontblocks-advanced-option.jsx b/assets/carousel/frontblocks-advanced-option.jsx
index 6bfd2ef..0a08574 100644
--- a/assets/carousel/frontblocks-advanced-option.jsx
+++ b/assets/carousel/frontblocks-advanced-option.jsx
@@ -1,164 +1,420 @@
 // Add custom controls to the Advanced panel of GenerateBlocks Grid block
 const { addFilter } = wp.hooks;
-const { Fragment } = wp.element;
+const { Fragment, useEffect, useRef } = wp.element;
 const { InspectorControls, PanelColorSettings } = wp.blockEditor;
 const { SelectControl, TextControl, PanelBody, ToggleControl } = wp.components;
 const { __ } = wp.i18n;
 
-function addCustomCarouselPanel(BlockEdit) {
-	return (props) => {
-		// Support grid blocks, element blocks with grid display, and core/group blocks
-		if (props.name !== 'generateblocks/grid' && 
-		    props.name !== 'generateblocks/element' && 
-		    props.name !== 'core/group') {
-			return <BlockEdit {...props} />;
+/**
+ * Returns the document that renders block content.
+ * WordPress 6.x uses an <iframe> for the editor canvas.
+ */
+function getEditorDocument() {
+	const iframe = document.querySelector( 'iframe[name="editor-canvas"]' );
+	return ( iframe && iframe.contentDocument && iframe.contentDocument.body )
+		? iframe.contentDocument
+		: document;
+}
+
+const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-/;
+
+/**
+ * Walk an element's subtree to find the container whose DIRECT children
+ * are actual blocks (UUID data-block).  Stops at depth 4.
+ */
+function findSlidesParent( el, depth ) {
+	if ( depth === 0 ) return null;
+	if ( Array.from( el.children ).some( ( c ) => UUID_RE.test( c.dataset.block || '' ) ) ) {
+		return el;
+	}
+	for ( const child of el.children ) {
+		const found = findSlidesParent( child, depth - 1 );
+		if ( found ) return found;
+	}
+	return null;
+}
+
+/**
+ * Find the grid DOM element for a given block.
+ *
+ * For generateblocks/element: [data-block][data-type] IS the gb-element.
+ *   Do NOT search inside – that returns a child item.
+ * For generateblocks/grid:  look for .gb-grid-wrapper inside.
+ * For core/group: walk the subtree to find the element whose children
+ *   are the real blocks, because WP nests them differently across versions.
+ */
+function findGridEl( blockEl, name ) {
+	if ( name === 'generateblocks/element' ) {
+		return blockEl;
+	}
+	if ( name === 'generateblocks/grid' ) {
+		if ( blockEl.classList.contains( 'gb-grid-wrapper' ) ) return blockEl;
+		const grid = blockEl.querySelector( '.gb-grid-wrapper' );
+		return grid || null;
+	}
+	if ( name === 'core/group' ) {
+		// Walk up to 4 levels deep to find where the child blocks live.
+		return findSlidesParent( blockEl, 4 ) || blockEl;
+	}
+	return null;
+}
+
+function addCustomCarouselPanel( BlockEdit ) {
+	return ( props ) => {
+		if (
+			props.name !== 'generateblocks/grid' &&
+			props.name !== 'generateblocks/element' &&
+			props.name !== 'core/group'
+		) {
+			return <BlockEdit { ...props } />;
 		}
 
-		// For element blocks, only show carousel options if it has grid display
-		if (props.name === 'generateblocks/element') {
+		if ( props.name === 'generateblocks/element' ) {
 			const styles = props.attributes.styles || {};
-			if (styles.display !== 'grid') {
-				return <BlockEdit {...props} />;
+			if ( styles.display !== 'grid' ) {
+				return <BlockEdit { ...props } />;
 			}
 		}
 
-		// For core/group blocks, only show carousel options if it has grid layout
-		if (props.name === 'core/group') {
+		if ( props.name === 'core/group' ) {
 			const layout = props.attributes.layout || {};
-			if (layout.type !== 'grid') {
-				return <BlockEdit {...props} />;
+			if ( layout.type !== 'grid' ) {
+				return <BlockEdit { ...props } />;
 			}
 		}
 
-	const {
-			frblGridOption = 'none',
-			frblItemsToView = '4',
-			frblLaptopToView = '3',
-			frblTabletToView = '2',
+		const {
+			frblGridOption      = 'none',
+			frblItemsToView     = '4',
+			frblLaptopToView    = '3',
+			frblTabletToView    = '2',
 			frblResponsiveToView = '1',
-			frblAutoplay = '',
-			frblGap = '20',
-			frblButtons = 'arrows',
-			frblRewind = true,
+			frblAutoplay        = '',
+			frblGap             = '20',
+			frblButtons         = 'arrows',
+			frblRewind          = true,
 			frblButtonColor,
 			frblButtonBgColor,
 			frblButtonsPosition = 'side',
 			frblDisableOnDesktop = false,
-	} = props.attributes;
+		} = props.attributes;
+
+		// ── Editor carousel preview ──────────────────────────────────────────
+		const stateRef = useRef( null );
+
+		useEffect( () => {
+			let mounted = true;
+			let timer   = null;
+
+		function cleanup() {
+			if ( ! stateRef.current ) return;
+			const { gridEl, slides, spacer, prevBtn, nextBtn, resizeObs, scrollFn } = stateRef.current;
+
+			// Disconnect observer and scroll listener.
+			if ( resizeObs ) resizeObs.disconnect();
+			const editorDoc = getEditorDocument();
+			const editorScrollEl = editorDoc.documentElement || editorDoc.body;
+			if ( scrollFn ) editorScrollEl.removeEventListener( 'scroll', scrollFn, true );
+
+			// Remove arrows from outer window body (completely outside React).
+			[ prevBtn, nextBtn ].forEach( ( btn ) => {
+				if ( btn && btn.parentNode ) btn.parentNode.removeChild( btn );
+			} );
+
+			// Remove right spacer element.
+			if ( spacer && spacer.parentNode ) spacer.parentNode.removeChild( spacer );
+
+			// Restore gridEl styles.
+			try {
+				gridEl.classList.remove( 'frbl-carousel-noscrollbar' );
+				[
+					'display', 'flex-wrap', 'gap',
+					'overflow-x', 'scroll-behavior',
+					'padding-left', 'padding-right',
+				].forEach( ( p ) => gridEl.style.removeProperty( p ) );
+
+					slides.forEach( ( slide ) => {
+						[ 'flex-shrink', 'width', 'min-width',
+						  'margin-left', 'margin-right', 'grid-column',
+						].forEach( ( p ) => slide.style.removeProperty( p ) );
+					} );
+				} catch ( e ) {}
+
+				stateRef.current = null;
+			}
+
+			function init() {
+				if ( ! mounted ) return;
+				cleanup();
+
+				const editorDoc = getEditorDocument();
+
+				// GB 2.x wraps blocks in a root element that shares the same data-block UUID.
+				// Use data-type to select the correct inner element; fall back for native blocks.
+				let blockEl = editorDoc.querySelector(
+					`[data-block="${ props.clientId }"][data-type="${ props.name }"]`
+				);
+				if ( ! blockEl ) {
+					blockEl = editorDoc.querySelector( `[data-block="${ props.clientId }"]` );
+				}
+				if ( ! blockEl ) return;
+
+				const gridEl = findGridEl( blockEl, props.name );
+				if ( ! gridEl ) return;
+
+				// Slides = direct children that are real blocks (UUID data-block).
+				const slides = Array.from( gridEl.children ).filter(
+					( el ) => UUID_RE.test( el.dataset.block || '' )
+				);
+				if ( slides.length === 0 ) return;
+
+				const perView    = Math.max( 1, parseInt( frblItemsToView ) || 4 );
+				const gap        = Math.max( 0, parseInt( frblGap ) || 20 );
+				const btnColor   = frblButtonColor   || '#fff';
+				const btnBg      = frblButtonBgColor || 'rgba(0,0,0,0.45)';
+
+				// Measure content-box width before any style changes.
+				const editorWin  = editorDoc.defaultView || window;
+			const ARROW_W    = 40; // px reserved on each side for arrow buttons.
+			const cs         = editorWin.getComputedStyle( gridEl );
+			const innerW     = gridEl.getBoundingClientRect().width
+				- ( parseFloat( cs.paddingLeft )  || 0 )
+				- ( parseFloat( cs.paddingRight ) || 0 );
+			const totalWidth = Math.round( innerW ) || 600;
+			// Content area after reserving space for both arrow buttons.
+			const contentW   = totalWidth - ARROW_W * 2;
+			const slideWidth = Math.round( ( contentW - gap * ( perView - 1 ) ) / perView );
+			const step       = slideWidth + gap;
+
+			// ── Apply scroll-based layout directly to gridEl ─────────────
+			// No DOM restructuring → no React reconciliation conflicts.
+			gridEl.classList.add( 'frbl-carousel-noscrollbar' );
+			gridEl.style.display        = 'flex';
+			gridEl.style.flexWrap       = 'nowrap';
+			gridEl.style.gap            = gap + 'px';
+			gridEl.style.overflowX      = 'scroll';
+			gridEl.style.scrollBehavior = 'smooth';
+			// paddingLeft creates left space for the prev arrow.
+			// paddingRight is NOT used because Chrome ignores it in scroll extent;
+			// a spacer flex child is appended instead to guarantee right-side space.
+			gridEl.style.paddingLeft    = ARROW_W + 'px';
+			gridEl.style.paddingRight   = '0';
+
+			slides.forEach( ( slide ) => {
+				slide.style.flexShrink  = '0';
+				slide.style.width       = slideWidth + 'px';
+				slide.style.minWidth    = slideWidth + 'px';
+				slide.style.marginLeft  = '0';
+				slide.style.marginRight = '0';
+				slide.style.gridColumn  = 'unset';
+			} );
+
+			// Right-side spacer: Chrome does not include padding-right in horizontal
+			// scroll extent, so we use a real flex child to guarantee right space.
+			const appender = gridEl.querySelector( '.block-list-appender' );
+			const spacer   = editorDoc.createElement( 'span' );
+			spacer.setAttribute( 'data-frbl-spacer', '1' );
+			spacer.style.cssText = `display:block;flex-shrink:0;width:${ ARROW_W }px;min-width:${ ARROW_W }px;`;
+			gridEl.insertBefore( spacer, appender || null );
+
+			// ── Navigation (scrollLeft, infinite loop) ───────────────────
+				let idx = 0;
+
+				function scrollTo( n ) {
+					const total = slides.length;
+					if ( n >= total ) {
+						// Forward past last: instant snap to 0 then continue.
+						gridEl.style.scrollBehavior = 'auto';
+						gridEl.scrollLeft = 0;
+						void gridEl.offsetWidth;
+						gridEl.style.scrollBehavior = 'smooth';
+						idx = 0;
+						return;
+					}
+					if ( n < 0 ) {
+						// Back past first: instant snap to last.
+						gridEl.style.scrollBehavior = 'auto';
+						gridEl.scrollLeft = Math.round( ( total - 1 ) * step );
+						void gridEl.offsetWidth;
+						gridEl.style.scrollBehavior = 'smooth';
+						idx = total - 1;
+						return;
+					}
+					idx = n;
+					gridEl.scrollLeft = Math.round( idx * step );
+				}
+
+				// ── Arrows in OUTER document body ────────────────────────────
+				// Placing them outside the iframe means React never touches them.
+				const iframe = document.querySelector( 'iframe[name="editor-canvas"]' );
+
+				function updateArrowPos() {
+					if ( ! stateRef.current ) return;
+					const ifrRect = iframe ? iframe.getBoundingClientRect() : { top: 0, left: 0 };
+					const rect    = gridEl.getBoundingClientRect(); // coords in iframe viewport
+					const midY    = Math.round( ifrRect.top + rect.top + rect.height / 2 - 16 );
+
+					prevBtn.style.top   = midY + 'px';
+					prevBtn.style.left  = Math.round( ifrRect.left + rect.left + 8 ) + 'px';
+					nextBtn.style.top   = midY + 'px';
+					nextBtn.style.right = Math.round( window.innerWidth - ( ifrRect.left + rect.right ) + 8 ) + 'px';
+				}
+
+				function makeArrow( dir ) {
+					const btn = document.createElement( 'button' );
+					btn.type  = 'button';
+					btn.className = `frbl-editor-arrow frbl-editor-arrow-${ dir }`;
+					btn.setAttribute( 'aria-label', dir === 'prev' ? 'Previous slide' : 'Next slide' );
+					btn.style.cssText = `position:fixed;z-index:99999;background-color:${ btnBg };`;
+					const d = dir === 'prev' ? 'M6 1L1 6L6 11' : 'M1 11L6 6L1 1';
+					btn.innerHTML = `<svg width="7" height="12" viewBox="0 0 7 12" fill="none"><path d="${ d }" stroke="${ btnColor }" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+					btn.addEventListener( 'click', ( e ) => {
+						e.stopPropagation();
+						scrollTo( dir === 'prev' ? idx - 1 : idx + 1 );
+					} );
+					document.body.appendChild( btn );
+					return btn;
+				}
+
+				const prevBtn = makeArrow( 'prev' );
+				const nextBtn = makeArrow( 'next' );
+				updateArrowPos();
+
+				// Keep arrows positioned correctly when the editor scrolls or resizes.
+				const resizeObs = new ResizeObserver( updateArrowPos );
+				resizeObs.observe( gridEl );
+
+				const editorScrollEl = editorDoc.documentElement || editorDoc.body;
+				const scrollFn       = updateArrowPos;
+				editorScrollEl.addEventListener( 'scroll', scrollFn, { passive: true, capture: true } );
+
+				stateRef.current = { gridEl, slides, spacer, prevBtn, nextBtn, resizeObs, scrollFn };
+			}
+
+			if ( frblGridOption !== 'none' ) {
+				timer = setTimeout( init, 300 );
+			} else {
+				cleanup();
+			}
+
+			return () => {
+				mounted = false;
+				if ( timer ) clearTimeout( timer );
+				cleanup();
+			};
+		}, [
+			frblGridOption, frblItemsToView, frblGap,
+			frblButtonColor, frblButtonBgColor, props.clientId,
+		] );
+		// ── Inspector panel ──────────────────────────────────────────────────
 
 		return (
 			<Fragment>
-				<BlockEdit {...props} />
+				<BlockEdit { ...props } />
 				<InspectorControls>
 					<PanelBody
-						title={__('Carousel Settings', 'frontblocks')}
-						initialOpen={true}
+						title={ __( 'Carousel Settings', 'frontblocks' ) }
+						initialOpen={ true }
 					>
-					<SelectControl
-						label={__('FrontBlocks Grid Option', 'frontblocks')}
-						value={frblGridOption}
-						options={[
-							{ label: __('None', 'frontblocks'), value: 'none' },
-							{ label: __('Carousel', 'frontblocks'), value: 'carousel' },
-							{ label: __('Slider', 'frontblocks'), value: 'slider' }
-						]}
-						onChange={(value) => {
-							props.setAttributes({ frblGridOption: value });
-						}}
-						help={__('This option gives the option to make carousel in your grid block.', 'frontblocks')}
-				/>
-				{frblGridOption !== 'none' && (
-					<>
-					<TextControl
-						label={__('Items to view (Desktop)', 'frontblocks')}
-						value={frblItemsToView}
-						onChange={(value) => props.setAttributes({ frblItemsToView: value })}
-						help={__('Number of items to show on desktop (>1200px)', 'frontblocks')}
-					/>
-					<TextControl
-						label={__('Items to view (Laptop)', 'frontblocks')}
-						value={frblLaptopToView}
-						onChange={(value) => props.setAttributes({ frblLaptopToView: value })}
-						help={__('Number of items to show on laptop (992px-1199px)', 'frontblocks')}
-					/>
-					<TextControl
-						label={__('Items to view (Tablet)', 'frontblocks')}
-						value={frblTabletToView}
-						onChange={(value) => props.setAttributes({ frblTabletToView: value })}
-						help={__('Number of items to show on tablet (768px-991px)', 'frontblocks')}
-					/>
-					<TextControl
-						label={__('Items to view (Mobile)', 'frontblocks')}
-						value={frblResponsiveToView}
-						onChange={(value) => props.setAttributes({ frblResponsiveToView: value })}
-						help={__('Number of items to show on mobile (<768px)', 'frontblocks')}
-				/>
-					<TextControl
-						label={__('Autoplay (seconds)', 'frontblocks')}
-						value={frblAutoplay}
-						onChange={(value) => props.setAttributes({ frblAutoplay: value })}
-					/>
-					<TextControl
-						label={__('Gap (px)', 'frontblocks')}
-						value={frblGap}
-						onChange={(value) => props.setAttributes({ frblGap: value })}
-						help={__('Space between slides in pixels. Leave empty for 20.', 'frontblocks')}
-					/>
-					{frblGridOption === 'slider' && (
-						<>
-							<ToggleControl
-								label={__('Rewind', 'frontblocks')}
-								checked={frblRewind}
-								onChange={(value) => props.setAttributes({ frblRewind: value })}
-							/>
-						</>
-				)}
-					<SelectControl
-						label={__('Buttons', 'frontblocks')}
-						value={frblButtons}
-						options={[
-							{ label: __('None', 'frontblocks'), value: 'none' },
-							{ label: __('Bullets', 'frontblocks'), value: 'bullets' },
-							{ label: __('Arrows', 'frontblocks'), value: 'arrows' }
-						]}
-						onChange={(value) => props.setAttributes({ frblButtons: value })}
-					/>
-					{frblButtons === 'arrows' && (
-						<>
-							<SelectControl
-								label={__('Buttons Position', 'frontblocks')}
-								value={frblButtonsPosition}
-								options={[
-									{ label: __('Side', 'frontblocks'), value: 'side' },
-									{ label: __('Bottom', 'frontblocks'), value: 'bottom' },
-								]}
-								onChange={(value) => props.setAttributes({ frblButtonsPosition: value })}
-							/>
-						</>
-				)}
-					<PanelColorSettings
-						title={__('Button Colors', 'frontblocks')}
-						colorSettings={[
-							{
-								value: frblButtonColor,
-								onChange: (color) => props.setAttributes({ frblButtonColor: color }),
-								label: __('Color button', 'frontblocks'),
-							},
-							{
-								value: frblButtonBgColor,
-								onChange: (color) => props.setAttributes({ frblButtonBgColor: color }),
-								label: __('Color background button', 'frontblocks'),
-							},
-					]}
-					/>
-					<ToggleControl
-						label={__('Disable on Desktop', 'frontblocks')}
-						checked={frblDisableOnDesktop}
-						onChange={(value) => props.setAttributes({ frblDisableOnDesktop: value })}
-						help={__('If enabled, carousel/slider will only work on mobile devices.', 'frontblocks')}
-					/>
-					</>
-				)}
+						<SelectControl
+							label={ __( 'FrontBlocks Grid Option', 'frontblocks' ) }
+							value={ frblGridOption }
+							options={ [
+								{ label: __( 'None',     'frontblocks' ), value: 'none'     },
+								{ label: __( 'Carousel', 'frontblocks' ), value: 'carousel' },
+								{ label: __( 'Slider',   'frontblocks' ), value: 'slider'   },
+							] }
+							onChange={ ( value ) => props.setAttributes( { frblGridOption: value } ) }
+							help={ __( 'This option gives the option to make carousel in your grid block.', 'frontblocks' ) }
+						/>
+						{ frblGridOption !== 'none' && (
+							<>
+								<TextControl
+									label={ __( 'Items to view (Desktop)', 'frontblocks' ) }
+									value={ frblItemsToView }
+									onChange={ ( value ) => props.setAttributes( { frblItemsToView: value } ) }
+									help={ __( 'Number of items to show on desktop (>1200px)', 'frontblocks' ) }
+								/>
+								<TextControl
+									label={ __( 'Items to view (Laptop)', 'frontblocks' ) }
+									value={ frblLaptopToView }
+									onChange={ ( value ) => props.setAttributes( { frblLaptopToView: value } ) }
+									help={ __( 'Number of items to show on laptop (992px-1199px)', 'frontblocks' ) }
+								/>
+								<TextControl
+									label={ __( 'Items to view (Tablet)', 'frontblocks' ) }
+									value={ frblTabletToView }
+									onChange={ ( value ) => props.setAttributes( { frblTabletToView: value } ) }
+									help={ __( 'Number of items to show on tablet (768px-991px)', 'frontblocks' ) }
+								/>
+								<TextControl
+									label={ __( 'Items to view (Mobile)', 'frontblocks' ) }
+									value={ frblResponsiveToView }
+									onChange={ ( value ) => props.setAttributes( { frblResponsiveToView: value } ) }
+									help={ __( 'Number of items to show on mobile (<768px)', 'frontblocks' ) }
+								/>
+								<TextControl
+									label={ __( 'Autoplay (seconds)', 'frontblocks' ) }
+									value={ frblAutoplay }
+									onChange={ ( value ) => props.setAttributes( { frblAutoplay: value } ) }
+								/>
+								<TextControl
+									label={ __( 'Gap (px)', 'frontblocks' ) }
+									value={ frblGap }
+									onChange={ ( value ) => props.setAttributes( { frblGap: value } ) }
+									help={ __( 'Space between slides in pixels. Leave empty for 20.', 'frontblocks' ) }
+								/>
+								{ frblGridOption === 'slider' && (
+									<ToggleControl
+										label={ __( 'Rewind', 'frontblocks' ) }
+										checked={ frblRewind }
+										onChange={ ( value ) => props.setAttributes( { frblRewind: value } ) }
+									/>
+								) }
+								<SelectControl
+									label={ __( 'Buttons', 'frontblocks' ) }
+									value={ frblButtons }
+									options={ [
+										{ label: __( 'None',    'frontblocks' ), value: 'none'    },
+										{ label: __( 'Bullets', 'frontblocks' ), value: 'bullets' },
+										{ label: __( 'Arrows',  'frontblocks' ), value: 'arrows'  },
+									] }
+									onChange={ ( value ) => props.setAttributes( { frblButtons: value } ) }
+								/>
+								{ frblButtons === 'arrows' && (
+									<SelectControl
+										label={ __( 'Buttons Position', 'frontblocks' ) }
+										value={ frblButtonsPosition }
+										options={ [
+											{ label: __( 'Side',   'frontblocks' ), value: 'side'   },
+											{ label: __( 'Bottom', 'frontblocks' ), value: 'bottom' },
+										] }
+										onChange={ ( value ) => props.setAttributes( { frblButtonsPosition: value } ) }
+									/>
+								) }
+								<PanelColorSettings
+									title={ __( 'Button Colors', 'frontblocks' ) }
+									colorSettings={ [
+										{
+											value:    frblButtonColor,
+											onChange: ( color ) => props.setAttributes( { frblButtonColor: color } ),
+											label:    __( 'Color button', 'frontblocks' ),
+										},
+										{
+											value:    frblButtonBgColor,
+											onChange: ( color ) => props.setAttributes( { frblButtonBgColor: color } ),
+											label:    __( 'Color background button', 'frontblocks' ),
+										},
+									] }
+								/>
+								<ToggleControl
+									label={ __( 'Disable on Desktop', 'frontblocks' ) }
+									checked={ frblDisableOnDesktop }
+									onChange={ ( value ) => props.setAttributes( { frblDisableOnDesktop: value } ) }
+									help={ __( 'If enabled, carousel/slider will only work on mobile devices.', 'frontblocks' ) }
+								/>
+							</>
+						) }
 					</PanelBody>
 				</InspectorControls>
 			</Fragment>
@@ -167,7 +423,7 @@ function addCustomCarouselPanel(BlockEdit) {
 }
 
 addFilter(
-    'editor.BlockEdit',
-    'frontblocks/gb-grid-carousel-panel',
-    addCustomCarouselPanel
-);
\ No newline at end of file
+	'editor.BlockEdit',
+	'frontblocks/gb-grid-carousel-panel',
+	addCustomCarouselPanel
+);
diff --git a/assets/carousel/frontblocks-carousel-editor.css b/assets/carousel/frontblocks-carousel-editor.css
new file mode 100644
index 0000000..169b031
--- /dev/null
+++ b/assets/carousel/frontblocks-carousel-editor.css
@@ -0,0 +1,28 @@
+/* Editor-only carousel preview styles */
+
+/* Hide the native scrollbar on the carousel grid element */
+.frbl-carousel-noscrollbar {
+	scrollbar-width: none;
+	-ms-overflow-style: none;
+}
+.frbl-carousel-noscrollbar::-webkit-scrollbar {
+	display: none;
+}
+
+/* Navigation arrows – rendered in the outer document body as position:fixed */
+.frbl-editor-arrow {
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	border: none;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0;
+	transition: opacity 0.2s;
+}
+
+.frbl-editor-arrow:hover {
+	opacity: 0.8;
+}
diff --git a/assets/carousel/frontblocks-carousel.css b/assets/carousel/frontblocks-carousel.css
index ca4e3f0..254f7d2 100644
--- a/assets/carousel/frontblocks-carousel.css
+++ b/assets/carousel/frontblocks-carousel.css
@@ -7,7 +7,7 @@
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
-  overflow: hidden;
+  overflow: visible;
   margin: 0;
   padding: 0;
 }
@@ -123,45 +123,41 @@
 }
 
 .frontblocks .glide__bullets {
-  position: absolute;
-  z-index: 2;
-  bottom: -1em;
-  left: 50%;
-  display: inline-flex;
+  display: flex;
+  justify-content: center;
   list-style: none;
-  transform: translateX(-50%);
   gap: 2px;
+  margin: 0.75em 0 0;
+  padding: 0;
 }
 
 .frontblocks .glide__bullet {
-  background-color: rgba(255, 255, 255, 0.5);
-  width: 14px;
-  height: 14px;
-  padding: 10px;
+  box-sizing: content-box;
+  width: 10px;
+  height: 10px;
+  padding: 0;
   border-radius: 50%;
-  border: 2px solid transparent;
-  background-clip: content-box;
-  transition: all 300ms ease-in-out;
+  border: none;
+  background-color: var(--frbl-bullet-bg, rgba(0, 0, 0, 0.25));
   cursor: pointer;
-  line-height: 0;
-  margin: 0;
+  transition: background-color 300ms ease-in-out, transform 300ms ease-in-out;
+  margin: 0 2px;
+  flex-shrink: 0;
 }
 
 .frontblocks .glide__bullet:focus {
-  outline: 2px solid white;
+  outline: 2px solid var(--frbl-bullet-color, rgba(0, 0, 0, 0.8));
   outline-offset: 2px;
 }
 
-.frontblocks .glide__bullet:hover,
-.frontblocks .glide__bullet:focus {
-  border: 2px solid white;
-  background-color: rgba(255, 255, 255, 0.5);
-  background-clip: content-box;
+.frontblocks .glide__bullet:hover {
+  background-color: var(--frbl-bullet-color, rgba(0, 0, 0, 0.8));
+  transform: scale(1.2);
 }
 
 .frontblocks .glide__bullet--active {
-  background-color: white;
-  background-clip: content-box;
+  background-color: var(--frbl-bullet-color, rgba(0, 0, 0, 0.8));
+  transform: scale(1.2);
 }
 
 .frontblocks.glide--swipeable {
@@ -262,3 +258,15 @@
   min-width: 0;
   flex-shrink: 0;
 }
+
+/**
+ * GenerateBlocks (and any other plugin) may inject column-gap via generated
+ * utility classes on the carousel slides container.  Glide manages its own
+ * spacing through margin-right on each slide, so any external column-gap
+ * breaks the width calculation and must be zeroed out.
+ */
+.frontblocks-carousel,
+.frontblocks .glide__slides {
+  column-gap: 0 !important;
+  gap: 0 !important;
+}
diff --git a/assets/carousel/frontblocks-carousel.js b/assets/carousel/frontblocks-carousel.js
index 39d894d..d0c39c3 100644
--- a/assets/carousel/frontblocks-carousel.js
+++ b/assets/carousel/frontblocks-carousel.js
@@ -72,20 +72,19 @@ window.addEventListener('load', function (event) {
                     bullet.classList.add('glide__bullet');
                     bullet.setAttribute('data-glide-dir', '=' + i);
                     bullet.setAttribute('aria-label', 'Go to slide ' + (i + 1));
-                    bullet.style.backgroundColor = carouselbuttonsBackgroundColor;
                     bullets.appendChild(bullet);
                 }
 
                 wrapperParent.appendChild(bullets);
 
-                // Add custom CSS for active bullet color
-                const style = document.createElement('style');
-                style.textContent = `
-					.frontblocks .glide__bullet.glide__bullet--active {
-						background-color: ${carouselbuttonsColor};
-					}
-				`;
-                document.head.appendChild(style);
+                // Set bullet colors via CSS custom properties on the wrapper.
+                // This avoids specificity conflicts with the stylesheet.
+                if (carouselbuttonsColor) {
+                    wrapperParent.style.setProperty('--frbl-bullet-color', carouselbuttonsColor);
+                }
+                if (carouselbuttonsBackgroundColor && carouselbuttonsBackgroundColor !== 'transparent') {
+                    wrapperParent.style.setProperty('--frbl-bullet-bg', carouselbuttonsBackgroundColor);
+                }
             }
 
             if (carouselbuttons == 'arrows') {
diff --git a/assets/shape-animations/frontblocks-shape-animation-option.js b/assets/shape-animations/frontblocks-shape-animation-option.js
index 7a272f0..a0218a3 100644
--- a/assets/shape-animations/frontblocks-shape-animation-option.js
+++ b/assets/shape-animations/frontblocks-shape-animation-option.js
@@ -18,9 +18,9 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
   var _wp$components = wp.components,
     PanelBody = _wp$components.PanelBody,
     ToggleControl = _wp$components.ToggleControl,
+    TextareaControl = _wp$components.TextareaControl,
     Button = _wp$components.Button,
-    Notice = _wp$components.Notice,
-    FormFileUpload = _wp$components.FormFileUpload;
+    Notice = _wp$components.Notice;
 
   /**
    * Add custom SVG animation controls to GenerateBlocks Shape block.
@@ -45,14 +45,6 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
         _useState4 = _slicedToArray(_useState3, 2),
         jsonPreview = _useState4[0],
         setJsonPreview = _useState4[1];
-      var _useState5 = useState(''),
-        _useState6 = _slicedToArray(_useState5, 2),
-        fileName = _useState6[0],
-        setFileName = _useState6[1];
-      var _useState7 = useState(0),
-        _useState8 = _slicedToArray(_useState7, 2),
-        fileInputKey = _useState8[0],
-        setFileInputKey = _useState8[1];
 
       // Detect if JSON is Lottie format.
       var isLottieJson = function isLottieJson(parsed) {
@@ -100,46 +92,19 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
         }
       };
 
-      // Handle file upload.
-      var handleFileUpload = function handleFileUpload(event) {
-        var file = event.target.files[0];
-        if (!file) {
-          return;
-        }
-        
-        // Check if it's a JSON file.
-        if (!file.name.endsWith('.json')) {
-          setJsonError(__('Please select a JSON file', 'frontblocks'));
-          setFileInputKey(function(prev) { return prev + 1; });
-          return;
+      // Handle JSON change.
+      var handleJsonChange = function handleJsonChange(value) {
+        setAttributes({
+          frblCustomSvgAnimationJson: value
+        });
+        if (value.trim()) {
+          validateJson(value);
+        } else {
+          setJsonError('');
+          setJsonPreview(null);
         }
-        
-        setFileName(file.name);
-        
-        // Read file content.
-        var reader = new FileReader();
-        reader.onload = function(e) {
-          var content = e.target.result;
-          setAttributes({ frblCustomSvgAnimationJson: content });
-          validateJson(content);
-          setFileInputKey(function(prev) { return prev + 1; });
-        };
-        reader.onerror = function() {
-          setJsonError(__('Error reading file', 'frontblocks'));
-          setFileInputKey(function(prev) { return prev + 1; });
-        };
-        reader.readAsText(file);
-      };
-      
-      // Clear imported JSON.
-      var handleClear = function handleClear() {
-        setAttributes({ frblCustomSvgAnimationJson: '' });
-        setJsonError('');
-        setJsonPreview(null);
-        setFileName('');
-        setFileInputKey(function(prev) { return prev + 1; });
       };
-      
+
       // Example JSON template.
       var exampleJson = JSON.stringify({
         "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"48\" height=\"48\" fill=\"currentColor\"><path d=\"M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z\"/></svg>",
@@ -152,20 +117,6 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
           "trigger": "load"
         }
       }, null, 2);
-      
-      // Download example JSON.
-      var handleDownloadExample = function handleDownloadExample() {
-        var blob = new Blob([exampleJson], { type: 'application/json' });
-        var url = URL.createObjectURL(blob);
-        var a = document.createElement('a');
-        a.href = url;
-        a.download = 'example-animation.json';
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        URL.revokeObjectURL(url);
-      };
-      
       return wp.element.createElement(Fragment, {}, wp.element.createElement(BlockEdit, props), wp.element.createElement(InspectorControls, {}, wp.element.createElement(PanelBody, {
         title: __('FrontBlocks Custom SVG Animation', 'frontblocks'),
         initialOpen: false
@@ -181,36 +132,16 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
       }), frblCustomSvgAnimationEnabled && wp.element.createElement(Fragment, {}, wp.element.createElement('p', {
         style: {
           fontSize: '12px',
-          marginBottom: '12px',
+          marginBottom: '8px',
           color: '#757575'
         }
-      }, __('Import a JSON file with your animation configuration:', 'frontblocks')), wp.element.createElement(FormFileUpload, {
-        key: fileInputKey,
-        accept: '.json',
-        onChange: handleFileUpload,
-        render: function(ref) {
-          return wp.element.createElement(Button, {
-            isSecondary: true,
-            onClick: ref.openFileDialog,
-            style: { marginBottom: '8px', width: '100%' }
-          }, fileName ? __('Change JSON file', 'frontblocks') : __('Import JSON file', 'frontblocks'));
-        }
-      }), fileName && wp.element.createElement('div', {
-        style: {
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          marginBottom: '12px',
-          padding: '8px',
-          background: '#f6f7f7',
-          borderRadius: '4px',
-          fontSize: '12px'
-        }
-      }, wp.element.createElement('span', {}, '📄 ' + fileName), wp.element.createElement(Button, {
-        isSmall: true,
-        isDestructive: true,
-        onClick: handleClear
-      }, __('Clear', 'frontblocks'))), jsonError && wp.element.createElement(Notice, {
+      }, __('Paste your JSON configuration below:', 'frontblocks')), wp.element.createElement(TextareaControl, {
+        label: __('JSON Configuration', 'frontblocks'),
+        value: frblCustomSvgAnimationJson,
+        onChange: handleJsonChange,
+        rows: 10,
+        help: __('JSON with svg and animation properties', 'frontblocks')
+      }), jsonError && wp.element.createElement(Notice, {
         status: 'error',
         isDismissible: false
       }, jsonError), jsonPreview && wp.element.createElement(Notice, {
@@ -227,7 +158,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
           fontWeight: '600',
           marginBottom: '8px'
         }
-      }, __('📋 Download example JSON', 'frontblocks')), wp.element.createElement('pre', {
+      }, __('📋 Show example JSON', 'frontblocks')), wp.element.createElement('pre', {
         style: {
           background: '#f6f7f7',
           padding: '12px',
@@ -237,23 +168,13 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
           maxHeight: '300px'
         }
       }, exampleJson), wp.element.createElement(Button, {
-        isSecondary: true,
-        isSmall: true,
-        onClick: handleDownloadExample,
-        style: {
-          marginTop: '8px',
-          marginRight: '8px'
-        }
-      }, __('Download example', 'frontblocks')), wp.element.createElement(Button, {
         isSecondary: true,
         isSmall: true,
         onClick: function onClick() {
           setAttributes({
             frblCustomSvgAnimationJson: exampleJson
           });
-          setFileName('example-animation.json');
           validateJson(exampleJson);
-          setFileInputKey(function(prev) { return prev + 1; });
         },
         style: {
           marginTop: '8px'
diff --git a/includes/Frontend/Carousel.php b/includes/Frontend/Carousel.php
index 421afc3..e5320e6 100644
--- a/includes/Frontend/Carousel.php
+++ b/includes/Frontend/Carousel.php
@@ -33,12 +33,30 @@ public function __construct() {
 	 */
 	private function init_hooks() {
 		add_action( 'enqueue_block_editor_assets', array( $this, 'enqueue_block_editor_assets' ) );
+		add_action( 'enqueue_block_assets', array( $this, 'enqueue_block_canvas_assets' ) );
 		add_filter( 'render_block_generateblocks/grid', array( $this, 'add_custom_attributes_to_grid_block' ), 10, 2 );
 		add_filter( 'render_block_generateblocks/element', array( $this, 'add_custom_attributes_to_element_block' ), 10, 2 );
 		add_filter( 'render_block_core/group', array( $this, 'add_custom_attributes_to_core_group_block' ), 10, 2 );
 		add_action( 'init', array( $this, 'register_custom_attributes' ), 5 );
 	}
 
+	/**
+	 * Enqueue carousel CSS in the editor canvas (iframe).
+	 *
+	 * @return void
+	 */
+	public function enqueue_block_canvas_assets() {
+		if ( ! is_admin() ) {
+			return;
+		}
+		wp_enqueue_style(
+			'frontblocks-carousel-editor',
+			FRBL_PLUGIN_URL . 'assets/carousel/frontblocks-carousel-editor.css',
+			array(),
+			FRBL_VERSION
+		);
+	}
+
 	/**
 	 * Enqueue block editor assets.
 	 *