maglevcms 3.0.2 → 3.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 862336e896c5cea49b17ff58d5837b8d3e301580f8dbe5966d35e9ab378cbf04
-  data.tar.gz: 2d49e3d1f3ddf480906efbffc2477073a65f66694593bfe347b9faf75ec3c798
+  metadata.gz: 7b3c21664099214944c91eb07e3aa563b6043e9ab1e7af4d6a0443b0d83972a9
+  data.tar.gz: b2618b80cdec94c2b2574ce61845c783a0593748a1498c097107213d80c60677
 SHA512:
-  metadata.gz: 232bde061cabd3d356e6623cfdddfc4c26c2f82c3a4ace19eafe52667afe1cb94afbf7705d03519ec77a65145ab5a3fddbc41ee9e0ff10960973fe8282fe2010
-  data.tar.gz: 3fc4998c42adb572d2f930eafb255872e90560d4330517181fd6457da0f7d8ea4f09e84ea43669ffba5dcd2b8187b43e0f263d9fa93801e07de79dcaec207d3e
+  metadata.gz: 7352a60fca5460da127d428cfc52cc430d887cb794879238e8a34a545e67a4a39c2fd002dd9de79a71e48f6e4e434194ffc2309e3c4b0a3c7f64084c2226d324
+  data.tar.gz: 16a58a3770b2be147e894d5630837ee5c4cc6de0cfaa4d81b1cd601a887f2d3b81f2f67d01821ef453b252287a8abbd83d801df59a55059545f8650ca9dc61ee

data/app/assets/builds/maglev/tailwind.css

@@ -301,6 +301,27 @@
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
+  .-start-1 {
+    inset-inline-start: calc(var(--spacing) * -1);
+  }
+  .start-0 {
+    inset-inline-start: calc(var(--spacing) * 0);
+  }
+  .start-3 {
+    inset-inline-start: calc(var(--spacing) * 3);
+  }
+  .start-16 {
+    inset-inline-start: calc(var(--spacing) * 16);
+  }
+  .-end-2 {
+    inset-inline-end: calc(var(--spacing) * -2);
+  }
+  .end-0 {
+    inset-inline-end: calc(var(--spacing) * 0);
+  }
+  .end-3 {
+    inset-inline-end: calc(var(--spacing) * 3);
+  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
@@ -319,15 +340,9 @@
   .top-16 {
     top: calc(var(--spacing) * 16);
   }
-  .-right-2 {
-    right: calc(var(--spacing) * -2);
-  }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
-  .right-3 {
-    right: calc(var(--spacing) * 3);
-  }
   .-bottom-0\.25 {
     bottom: calc(var(--spacing) * -0.25);
   }
@@ -337,18 +352,9 @@
   .bottom-0\.5 {
     bottom: calc(var(--spacing) * 0.5);
   }
-  .-left-1 {
-    left: calc(var(--spacing) * -1);
-  }
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
-  .left-3 {
-    left: calc(var(--spacing) * 3);
-  }
-  .left-16 {
-    left: calc(var(--spacing) * 16);
-  }
   .isolate {
     isolation: isolate;
   }
@@ -439,6 +445,27 @@
   .my-20 {
     margin-block: calc(var(--spacing) * 20);
   }
+  .ms-1 {
+    margin-inline-start: calc(var(--spacing) * 1);
+  }
+  .ms-2 {
+    margin-inline-start: calc(var(--spacing) * 2);
+  }
+  .ms-3 {
+    margin-inline-start: calc(var(--spacing) * 3);
+  }
+  .ms-5 {
+    margin-inline-start: calc(var(--spacing) * 5);
+  }
+  .ms-auto {
+    margin-inline-start: auto;
+  }
+  .me-2 {
+    margin-inline-end: calc(var(--spacing) * 2);
+  }
+  .me-3 {
+    margin-inline-end: calc(var(--spacing) * 3);
+  }
   .-mt-0\.5 {
     margin-top: calc(var(--spacing) * -0.5);
   }
@@ -475,12 +502,6 @@
   .-mr-1 {
     margin-right: calc(var(--spacing) * -1);
   }
-  .mr-2 {
-    margin-right: calc(var(--spacing) * 2);
-  }
-  .mr-3 {
-    margin-right: calc(var(--spacing) * 3);
-  }
   .-mb-5 {
     margin-bottom: calc(var(--spacing) * -5);
   }
@@ -514,18 +535,6 @@
   .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
-  .ml-2 {
-    margin-left: calc(var(--spacing) * 2);
-  }
-  .ml-3 {
-    margin-left: calc(var(--spacing) * 3);
-  }
-  .ml-5 {
-    margin-left: calc(var(--spacing) * 5);
-  }
-  .ml-auto {
-    margin-left: auto;
-  }
   .box-content {
     box-sizing: content-box;
   }
@@ -911,6 +920,9 @@
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
+  .gap-1\.5 {
+    gap: calc(var(--spacing) * 1.5);
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -970,34 +982,6 @@
   .gap-x-8 {
     column-gap: calc(var(--spacing) * 8);
   }
-  .space-x-0\.5 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
-  .space-x-1 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
-  .space-x-1\.5 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
-  .space-x-2 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
   .space-x-4 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -1077,13 +1061,13 @@
   .rounded-xs {
     border-radius: var(--radius-xs);
   }
-  .rounded-l-2xl {
-    border-top-left-radius: var(--radius-2xl);
-    border-bottom-left-radius: var(--radius-2xl);
+  .rounded-s-2xl {
+    border-start-start-radius: var(--radius-2xl);
+    border-end-start-radius: var(--radius-2xl);
   }
-  .rounded-r-2xl {
-    border-top-right-radius: var(--radius-2xl);
-    border-bottom-right-radius: var(--radius-2xl);
+  .rounded-e-2xl {
+    border-start-end-radius: var(--radius-2xl);
+    border-end-end-radius: var(--radius-2xl);
   }
   .rounded-b {
     border-bottom-right-radius: 0.25rem;
@@ -1105,6 +1089,10 @@
     border-style: var(--tw-border-style);
     border-width: 4px;
   }
+  .border-e {
+    border-inline-end-style: var(--tw-border-style);
+    border-inline-end-width: 1px;
+  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -1117,10 +1105,6 @@
     border-top-style: var(--tw-border-style);
     border-top-width: 4px;
   }
-  .border-r {
-    border-right-style: var(--tw-border-style);
-    border-right-width: 1px;
-  }
   .border-b {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
@@ -1409,6 +1393,24 @@
   .py-24 {
     padding-block: calc(var(--spacing) * 24);
   }
+  .ps-2 {
+    padding-inline-start: calc(var(--spacing) * 2);
+  }
+  .ps-3 {
+    padding-inline-start: calc(var(--spacing) * 3);
+  }
+  .ps-11 {
+    padding-inline-start: calc(var(--spacing) * 11);
+  }
+  .pe-4 {
+    padding-inline-end: calc(var(--spacing) * 4);
+  }
+  .pe-8 {
+    padding-inline-end: calc(var(--spacing) * 8);
+  }
+  .pe-9 {
+    padding-inline-end: calc(var(--spacing) * 9);
+  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
@@ -1424,15 +1426,6 @@
   .pt-32 {
     padding-top: calc(var(--spacing) * 32);
   }
-  .pr-4 {
-    padding-right: calc(var(--spacing) * 4);
-  }
-  .pr-8 {
-    padding-right: calc(var(--spacing) * 8);
-  }
-  .pr-9 {
-    padding-right: calc(var(--spacing) * 9);
-  }
   .pb-0 {
     padding-bottom: calc(var(--spacing) * 0);
   }
@@ -1454,21 +1447,15 @@
   .pb-16 {
     padding-bottom: calc(var(--spacing) * 16);
   }
-  .pl-2 {
-    padding-left: calc(var(--spacing) * 2);
-  }
-  .pl-3 {
-    padding-left: calc(var(--spacing) * 3);
-  }
-  .pl-11 {
-    padding-left: calc(var(--spacing) * 11);
-  }
   .text-center {
     text-align: center;
   }
   .text-left {
     text-align: left;
   }
+  .text-start {
+    text-align: start;
+  }
   .font-nunito {
     font-family: var(--font-nunito);
   }
@@ -1867,14 +1854,14 @@
       width: calc(1024px * var(--page-preview-scale-ratio));
     }
   }
-  .group-data-\[expanded-page-layout\]\/page-layout\:left-104 {
+  .group-data-\[expanded-page-layout\]\/page-layout\:start-104 {
     &:is(:where(.group\/page-layout)[data-expanded-page-layout] *) {
-      left: calc(var(--spacing) * 104);
+      inset-inline-start: calc(var(--spacing) * 104);
     }
   }
-  .group-data-\[expanded-page-layout\]\/page-layout\:pl-88 {
+  .group-data-\[expanded-page-layout\]\/page-layout\:ps-88 {
     &:is(:where(.group\/page-layout)[data-expanded-page-layout] *) {
-      padding-left: calc(var(--spacing) * 88);
+      padding-inline-start: calc(var(--spacing) * 88);
     }
   }
   .group-data-\[focus\]\:text-white {
@@ -2046,16 +2033,16 @@
       display: flex;
     }
   }
-  .first\:rounded-l-sm {
+  .first\:rounded-s-sm {
     &:first-child {
-      border-top-left-radius: var(--radius-sm);
-      border-bottom-left-radius: var(--radius-sm);
+      border-start-start-radius: var(--radius-sm);
+      border-end-start-radius: var(--radius-sm);
     }
   }
-  .last\:rounded-r-sm {
+  .last\:rounded-e-sm {
     &:last-child {
-      border-top-right-radius: var(--radius-sm);
-      border-bottom-right-radius: var(--radius-sm);
+      border-start-end-radius: var(--radius-sm);
+      border-end-end-radius: var(--radius-sm);
     }
   }
   .hover\:z-10 {
@@ -2783,6 +2770,37 @@
       padding-inline: calc(var(--spacing) * 16);
     }
   }
+  .rtl\:origin-top-right {
+    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+      transform-origin: 100% 0;
+    }
+  }
+  .rtl\:-translate-x-\[50\%\] {
+    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+      --tw-translate-x: calc(50% * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .rtl\:translate-x-\[50\%\] {
+    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+      --tw-translate-x: 50%;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .rtl\:-scale-x-100 {
+    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+      --tw-scale-x: calc(100% * -1);
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
+  .rtl\:group-has-checked\:-translate-x-4 {
+    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+      &:is(:where(.group):has(*:checked) *) {
+        --tw-translate-x: calc(var(--spacing) * -4);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
   .dark\:text-editor-primary {
     @media (prefers-color-scheme: dark) {
       color: var(--color-editor-primary);
@@ -2881,16 +2899,16 @@
       }
     }
   }
-  .\[\&\>\*\:first-child\]\:rounded-l-sm {
+  .\[\&\>\*\:first-child\]\:rounded-s-sm {
     &>*:first-child {
-      border-top-left-radius: var(--radius-sm);
-      border-bottom-left-radius: var(--radius-sm);
+      border-start-start-radius: var(--radius-sm);
+      border-end-start-radius: var(--radius-sm);
     }
   }
-  .\[\&\>\*\:last-child\]\:rounded-r-sm {
+  .\[\&\>\*\:last-child\]\:rounded-e-sm {
     &>*:last-child {
-      border-top-right-radius: var(--radius-sm);
-      border-bottom-right-radius: var(--radius-sm);
+      border-start-end-radius: var(--radius-sm);
+      border-end-end-radius: var(--radius-sm);
     }
   }
 }

data/app/assets/javascripts/maglev/editor/controllers/app/forms/section_form_controller.js

@@ -9,8 +9,10 @@ export default class extends Controller {
   static debounces = ['afterSettingUpdate']
 
   connect() {
-    useDebounce(this)    
+    useDebounce(this)
+    
     this.sourceId = this.sectionBlockIdValue !== '' ?  this.sectionBlockIdValue : this.sectionIdValue
+    
     requestAnimationFrame(() => {
       this.dispatch('connected', { bubbles: true, detail: { 
         sectionId: this.sectionIdValue, 
@@ -18,6 +20,12 @@ export default class extends Controller {
           lockVersion: this.sectionLockVersionValue } 
         })
     })
+
+    // we need to keep track of the submitting state to avoid multiple requests being sent with a wrong lock version
+    this.submitting = false
+    this.element.addEventListener('turbo:submit-end', (event) => {
+      if (!event.detail.success) this.submitting = false
+    })
   }
 
   onSettingChange(event) {
@@ -33,15 +41,32 @@ export default class extends Controller {
   onPersist(event) {
     log('[SectionForm::onPersist]', event.detail, typeof event.detail)
     this.lockVersionTarget.value = event.detail.lockVersion
+
+    // we are done submitting, so we can reset the submitting flag
+    this.submitting = false
   }
 
-  async afterSettingUpdate(event) {
+  afterSettingUpdate(event) {    
+    // if the request is still running (flight), we need to debounce the call
+    // to avoid multiple requests being sent with a wrong lock version
+    if (this.submitting) {
+      this.afterSettingUpdate(event)
+      return
+    }
+
     log('[SectionForm::afterSettingUpdate] 🙌🙌', event.detail)
-    await this.element.requestSubmit()
-    
+
+    // we couldn't update the content just by modifying the DOM, so we have to refresh the whole section.
+    // The right time to do this is when the request is finished, so we listen for the turbo:submit-end event.
     if (!event.detail.updated) {
-      // we couldn't update the content just by modifying the DOM, so we have to refresh the whole section
-      this.dispatch('updateSection', { detail: { sectionId: this.sectionIdValue } })
+      this.element.addEventListener('turbo:submit-end', () => {
+        this.dispatch('updateSection', { detail: { sectionId: this.sectionIdValue } })
+      }, { once: true })
     }
+    
+    // better to set it to true instead of relying on the turbo:submit-start event
+    this.submitting = true
+
+    this.element.requestSubmit()
   }
 }

data/app/assets/javascripts/maglev/editor/controllers/app/page_preview_controller.js

@@ -164,13 +164,14 @@ export default class extends Controller {
 
   setupTransformations() {
     this.calculateTransformations = this.calculateTransformations.bind(this)
-    this.ro = new ResizeObserver(this.calculateTransformations)
-    
+    this.scheduleTransformations = this.scheduleTransformations.bind(this)
+    this.resizeObserver = new ResizeObserver(this.scheduleTransformations)
+
     const sidebar = this.appLayoutSidebar
     const pageLayout = document.querySelector('#page-layout')
-    if (sidebar) this.ro.observe(this.appLayoutSidebar())
-    if (pageLayout) this.ro.observe(pageLayout)
-    this.ro.observe(document.documentElement)
+    if (sidebar) this.resizeObserver.observe(this.appLayoutSidebar())
+    if (pageLayout) this.resizeObserver.observe(pageLayout)
+    this.resizeObserver.observe(document.documentElement)
 
     // Recompute on page layout toggles / VT renders
     addEventListener("turbo:render", this.calculateTransformations)
@@ -180,7 +181,11 @@ export default class extends Controller {
   }
 
   teardownTransformations() {
-    this.ro?.disconnect()
+    if (this.transformationsFrame) {
+      cancelAnimationFrame(this.transformationsFrame)
+      this.transformationsFrame = null
+    }
+    this.resizeObserver?.disconnect()
     removeEventListener("turbo:render", this.calculateTransformations)
     removeEventListener("turbo:before-render", this.calculateTransformations)
   }
@@ -230,6 +235,15 @@ export default class extends Controller {
     this.dispatch('scale-ratio-updated', { detail: {  value: scaleRatio } })
   }
 
+  scheduleTransformations() {
+    if (this.transformationsFrame) return
+
+    this.transformationsFrame = requestAnimationFrame(() => {
+      this.transformationsFrame = null
+      this.calculateTransformations()
+    })
+  }
+
   calculateTransformX() {
     if (!this.hasExpandedPageLayout()) return 0
     return this.expandedPageLayout().offsetWidth - this.appLayoutSidebarWidth()

data/app/assets/stylesheets/maglev/application.css

@@ -32,6 +32,27 @@
   }
 }
 
+/* RTL: the page-layout panel lives on the right, so it slides off to / in from the right edge */
+@keyframes slide-out-rtl {
+  from {
+    transform: translateX(0%);
+  }
+
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes slide-in-rtl {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0%);
+  }
+}
+
 html[data-turbo-visit-direction="forward"]::view-transition-old(page-layout),
 html[data-turbo-visit-direction="back"]::view-transition-old(page-layout),
 html[data-turbo-visit-direction="forward"]::view-transition-old(expanded-page-layout),
@@ -46,6 +67,20 @@ html[data-turbo-visit-direction="back"]::view-transition-new(expanded-page-layou
   animation: 0.2s cubic-bezier(0.55, 0, 0.1, 1) both slide-in;
 }
 
+html[dir="rtl"][data-turbo-visit-direction="forward"]::view-transition-old(page-layout),
+html[dir="rtl"][data-turbo-visit-direction="back"]::view-transition-old(page-layout),
+html[dir="rtl"][data-turbo-visit-direction="forward"]::view-transition-old(expanded-page-layout),
+html[dir="rtl"][data-turbo-visit-direction="back"]::view-transition-old(expanded-page-layout) {
+  animation-name: slide-out-rtl;
+}
+
+html[dir="rtl"][data-turbo-visit-direction="forward"]::view-transition-new(page-layout),
+html[dir="rtl"][data-turbo-visit-direction="back"]::view-transition-new(page-layout),
+html[dir="rtl"][data-turbo-visit-direction="forward"]::view-transition-new(expanded-page-layout),
+html[dir="rtl"][data-turbo-visit-direction="back"]::view-transition-new(expanded-page-layout) {
+  animation-name: slide-in-rtl;
+}
+
 html[data-page-layout-vt-pair="already-present"]::view-transition-old(page-layout),
 html[data-page-layout-vt-pair="already-present"]::view-transition-old(expanded-page-layout),
 html[data-page-layout-vt-pair="already-present"]::view-transition-new(page-layout),
@@ -61,8 +96,12 @@ html[data-page-layout-vt-pair="already-present"]::view-transition-new(expanded-p
   z-index: 30;
 }
 
-::view-transition-group(page-preview) { 
-  transform-origin: right center; 
+::view-transition-group(page-preview) {
+  transform-origin: right center;
+}
+
+html[dir="rtl"]::view-transition-group(page-preview) {
+  transform-origin: left center;
 }
 
 #page-layout[data-not-expanded] {
@@ -95,7 +134,12 @@ html[data-page-layout-vt-pair="already-present"]::view-transition-new(expanded-p
 
 /* couldn't get this done in Tailwind custom classes */
 #page-preview {
-  transform: translateX(var(--page-preview-transform-x, 0px)) scale(var(--page-preview-scale-ratio, 1)); 
+  transform: translateX(var(--page-preview-transform-x, 0px)) scale(var(--page-preview-scale-ratio, 1));
   height: calc(100% * 1 / 1 / var(--page-preview-scale-ratio, 1));
   width: var(--page-preview-width, 100%);
+}
+
+/* RTL: the expanded panel is on the right, so the canvas must shift the opposite way to clear it */
+html[dir="rtl"] #page-preview {
+  transform: translateX(calc(-1 * var(--page-preview-transform-x, 0px))) scale(var(--page-preview-scale-ratio, 1));
 }

data/app/components/maglev/uikit/app_layout/sidebar_component.html.erb

@@ -1,6 +1,6 @@
 <aside 
   id="app-layout-sidebar"
-  class="w-16 flex-shrink-0 flex content-center h-full border-r border-gray-200 relative z-20 bg-white"
+  class="w-16 flex-shrink-0 flex content-center h-full border-e border-gray-200 relative z-20 bg-white"
 >
   <nav class="flex h-full w-16 flex-col justify-between py-2">
     <ol class="flex flex-col gap-1 px-2">

data/app/components/maglev/uikit/app_layout/topbar/logo_component.html.erb

@@ -1,3 +1,3 @@
-<%= link_to root_path, class: "w-16 h-full flex justify-center items-center border-r border-gray-200 shrink-0", data: { controller: 'prevent-same-path' } do %>
+<%= link_to root_path, class: "w-16 h-full flex justify-center items-center border-e border-gray-200 shrink-0", data: { controller: 'prevent-same-path' } do %>
   <%= image_tag logo_url, class: "w-2/4", id: 'editor-logo-image', data: { turbo_permanent: true } %>
 <% end %>

data/app/components/maglev/uikit/app_layout/topbar/page_info_component.html.erb

@@ -5,7 +5,7 @@
     <div class="flex flex-col leading-none overflow-hidden">
       <div class="flex items-center overflow-hidden">
         <%= helpers.maglev_page_icon(page, size: '1.1rem', wrapper_class_names: 'text-gray-900 shrink-0') %>
-        <div class="text-base font-semibold truncate ml-1 mr-3 min-w-0">
+        <div class="text-base font-semibold truncate ms-1 me-3 min-w-0">
           <%= page.title.presence || page.default_title %>
         </div>
 
@@ -16,7 +16,7 @@
         %>
       </div>
 
-      <div class="text-xs text-gray-500 flex items-center space-x-1 overflow-hidden">
+      <div class="text-xs text-gray-500 flex items-center gap-1 overflow-hidden">
         <p class="truncate text-gray-700 min-w-0">
           <span class="text-gray-900 font-semibold">/</span><%= page_path %>
         </p>

data/app/components/maglev/uikit/breadcrumbs/breadcrumbs_component.html.erb

@@ -1,9 +1,9 @@
 <nav class="flex justify-between">
-  <ol class="inline-flex items-center space-x-0.5 text-xs text-gray-500">
+  <ol class="inline-flex items-center gap-0.5 text-xs text-gray-500">
     <% breadcrumbs.each_with_index do |breadcrumb, index| %>
       <%= breadcrumb %>
       <% if index < breadcrumbs.size - 1 %>
-        <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_right', size: '1rem', class_names: 'text-gray-400') %>
+        <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_right', size: '1rem', class_names: 'text-gray-400 rtl:-scale-x-100') %>
       <% end %>
     <% end %>
   </ol>

data/app/components/maglev/uikit/breadcrumbs/link_component.html.erb

@@ -1,12 +1,12 @@
 <li class="flex items-center h-full">
   <% if url? %>
-    <%= link_to url, class: 'inline-flex items-center text-xs space-x-1.5 rounded-sm hover:text-gray-900', data: { turbo_frame: '_top' } do %>
+    <%= link_to url, class: 'inline-flex items-center text-xs gap-1.5 rounded-sm hover:text-gray-900', data: { turbo_frame: '_top' } do %>
       <% if icon? %>
         <%= render Maglev::Uikit::IconComponent.new(name: icon, size: '0.85rem') %>
       <% end %>
       <span><%= label %></span>
     <% end %>
   <% else %>
-    <span class="inline-flex items-center text-xs space-x-1.5 rounded-sm"><%= label %></span>
+    <span class="inline-flex items-center text-xs gap-1.5 rounded-sm"><%= label %></span>
   <% end %>
 </li>  

data/app/components/maglev/uikit/button_group_component/button_group_component.html.erb

@@ -1,4 +1,4 @@
-<div class="[&>*:first-child]:rounded-l-sm [&>*:last-child]:rounded-r-sm inline-flex items-center text-white divide-x divide-white/15">
+<div class="[&>*:first-child]:rounded-s-sm [&>*:last-child]:rounded-e-sm inline-flex items-center text-white divide-x divide-white/15">
   <% buttons.each do |button| %>
     <%= button %>    
   <% end %>

data/app/components/maglev/uikit/collapsible/item_component.html.erb

@@ -2,7 +2,7 @@
   <div class="flex items-center cursor-pointer select-none px-3 py-3 bg-editor-primary text-white rounded-xs" data-action="click->uikit-collapsible#toggle">
     <div class="flex items-center"><%= title %></div>
 
-    <div class="ml-auto">
+    <div class="ms-auto">
       <%= render Maglev::Uikit::IconComponent.new(name: :arrow_down, size: '1.15rem', class_names: 'transition-transform duration-200 rotate-180 group-[.is-collapsed]:rotate-0') %>
     </div>
   </div>

data/app/components/maglev/uikit/dropdown_component/dropdown_controller.js

@@ -9,10 +9,11 @@ export default class extends Controller {
   connect() {
     const button = this.buttonTarget
     const content = this.contentTarget
+    const placement = this.directionAwarePlacement(this.placementValue || 'bottom-start')
 
-    this.cleanup = autoUpdate(button, content, () => computePosition(button, content, { 
+    this.cleanup = autoUpdate(button, content, () => computePosition(button, content, {
       strategy: 'fixed',
-      placement: this.placementValue || 'bottom-start',
+      placement,
       middleware: [
         flip(), 
         shift(),
@@ -71,4 +72,14 @@ export default class extends Controller {
   hide() {
     this.leave()
   }
+
+  // Floating UI already flips the -start/-end alignment for RTL, but the physical
+  // left/right main side is direction-agnostic. Mirror it so submenus/side popovers
+  // open toward the reading direction (e.g. right-start -> left-start in RTL).
+  directionAwarePlacement(placement) {
+    if (getComputedStyle(this.element).direction !== 'rtl') return placement
+    if (placement.startsWith('left')) return placement.replace('left', 'right')
+    if (placement.startsWith('right')) return placement.replace('right', 'left')
+    return placement
+  }
 }