maglevcms 3.0.2 → 3.1.0

data/app/components/maglev/uikit/form/checkbox_component.html.erb

@@ -3,8 +3,8 @@
     <div class="font-semibold text-gray-800">
       <%= label %>
     </div>
-    <div class="ml-auto group relative inline-flex w-10 shrink-0 rounded-full bg-gray-200 p-0.5 inset-ring inset-ring-gray-900/5 outline-offset-2 outline-editor-primary transition-colors duration-200 ease-in-out has-checked:bg-editor-primary has-focus-visible:outline-2">
-      <span class="size-5 rounded-full bg-white shadow-xs ring-1 ring-gray-900/5 transition-transform duration-200 ease-in-out group-has-checked:translate-x-4"></span>
+    <div class="ms-auto group relative inline-flex w-10 shrink-0 rounded-full bg-gray-200 p-0.5 inset-ring inset-ring-gray-900/5 outline-offset-2 outline-editor-primary transition-colors duration-200 ease-in-out has-checked:bg-editor-primary has-focus-visible:outline-2">
+      <span class="size-5 rounded-full bg-white shadow-xs ring-1 ring-gray-900/5 transition-transform duration-200 ease-in-out group-has-checked:translate-x-4 rtl:group-has-checked:-translate-x-4"></span>
       <%= hidden_field_tag name, '0', { id: "#{dom_id}_hidden" } %>
       <%= check_box_tag name, '1', checked?, class: 'absolute inset-0 appearance-none focus:outline-hidden cursor-pointer', aria: { label: label }, data: { action: 'change->uikit-form-checkbox#change' } %>
     </div>

data/app/components/maglev/uikit/form/color_field_component.html.erb

@@ -16,7 +16,7 @@
 
   <div class="inline-block relative">
     <%= tag.div(
-      class: 'absolute left-3 top-2 w-6 h-6 rounded-sm border border-gray-200 group-[.is-empty]/color:bg-checkerboard group-[.is-empty]/color:bg-white!',
+      class: 'absolute start-3 top-2 w-6 h-6 rounded-sm border border-gray-200 group-[.is-empty]/color:bg-checkerboard group-[.is-empty]/color:bg-white!',
       style: "background-color: #{value}",
       data: {
         "uikit-form-color-field-target": "preview",
@@ -31,7 +31,7 @@
       minlength: 4,
       maxlength: 8,
       size: 9,
-      class: 'block py-2 pl-11 pr-8 rounded bg-gray-100 text-gray-800 focus:outline-none focus:ring focus:ring-inset focus:ring-2 focus:ring-editor-primary/50 placeholder-gray-500',
+      class: 'block py-2 ps-11 pe-8 rounded bg-gray-100 text-gray-800 focus:outline-none focus:ring focus:ring-inset focus:ring-2 focus:ring-editor-primary/50 placeholder-gray-500',
       data: {
         'uikit-form-color-field-target': 'input',
         action: ['input->uikit-form-color-field#change', **input_action].join(' '),
@@ -41,7 +41,7 @@
     ) %>
 
     <% if presets? %>
-      <div class="absolute top-1.5 right-3">
+      <div class="absolute top-1.5 end-3">
         <%= render Maglev::Uikit::DropdownComponent.new(placement: 'bottom-end') do |dropdown| %>
           <% dropdown.with_trigger do %>
             <%= render Maglev::Uikit::IconButtonComponent.new(

data/app/components/maglev/uikit/form/combobox/list_component.html.erb

@@ -1,6 +1,6 @@
 <% options.each_with_index do |option, index| %>
   <li
-    class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 group data-[focus]:bg-editor-primary data-[focus]:text-white" 
+    class="relative cursor-default select-none py-2 ps-3 pe-9 text-gray-900 group data-[focus]:bg-editor-primary data-[focus]:text-white"
     role="option" 
     tabindex="-1"     
     data-id="<%= option.id %>"

data/app/components/maglev/uikit/form/combobox/option_component.html.erb

@@ -9,7 +9,7 @@
   </span>
 <% end %>
 
-<span class="absolute inset-y-0 right-0 flex items-center pr-4 text-editor-primary hidden group-data-[selected]:flex group-data-[focus]:text-white">
+<span class="absolute inset-y-0 end-0 flex items-center pe-4 text-editor-primary hidden group-data-[selected]:flex group-data-[focus]:text-white">
   <svg class="size-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
     <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
   </svg>

data/app/components/maglev/uikit/form/combobox_component.html.erb

@@ -48,7 +48,7 @@
         }
       ) %>
       
-      <div class="absolute top-0.5 bottom-0.5 right-3 bg-gray-100 flex items-center gap-2">
+      <div class="absolute top-0.5 bottom-0.5 end-3 bg-gray-100 flex items-center gap-2">
         <svg data-uikit-form-combobox-target="spinner" aria-hidden="true" class="hidden w-4 h-4 text-gray-200 animate-spin dark:text-editor-primary fill-editor-primary" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
           <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>

data/app/components/maglev/uikit/form/link/email_link_component.html.erb

@@ -3,10 +3,10 @@
     class: 'flex-1 flex items-center overflow-hidden items-center w-full h-10 px-3 rounded bg-gray-100 text-gray-800 cursor-pointer focus:outline-none focus:ring focus:ring-inset focus:ring-2 focus:ring-editor-primary/50',
     data: { turbo_frame: 'modal' } do %>
     <%= render Maglev::Uikit::IconComponent.new(name: "mail") %>
-    <span class="ml-3 shrink"><%= link[:email] %></span>
+    <span class="ms-3 shrink"><%= link[:email] %></span>
   <% end %>
 
-  <div class="absolute right-3 top-0 bottom-0 flex items-center pl-3">
+  <div class="absolute end-3 top-0 bottom-0 flex items-center ps-3">
     <%= render(Maglev::Uikit::IconButtonComponent.new(icon_name: 'eraser', data: { action: 'click->uikit-form-link#clear:prevent' })) %>
   </div>
 

data/app/components/maglev/uikit/form/link/page_link_component.html.erb

@@ -3,10 +3,10 @@
     class: 'flex-1 flex items-center overflow-hidden items-center w-full h-10 px-3 rounded bg-gray-100 text-gray-800 cursor-pointer focus:outline-none focus:ring focus:ring-inset focus:ring-2 focus:ring-editor-primary/50',
     data: { turbo_frame: 'modal' } do %>
     <%= render Maglev::Uikit::IconComponent.new(name: "file") %>
-    <span class="ml-3 shrink"><%= link[:link_label] %></span>
+    <span class="ms-3 shrink"><%= link[:link_label] %></span>
   <% end %>
 
-  <div class="absolute right-3 top-0 bottom-0 flex items-center pl-3">
+  <div class="absolute end-3 top-0 bottom-0 flex items-center ps-3">
     <%= render(Maglev::Uikit::IconButtonComponent.new(icon_name: 'eraser', data: { action: 'click->uikit-form-link#clear:prevent' })) %>
   </div>
 

data/app/components/maglev/uikit/form/link/static_page_link_component.html.erb

@@ -3,10 +3,10 @@
     class: 'flex-1 flex items-center overflow-hidden items-center w-full h-10 px-3 rounded bg-gray-100 text-gray-800 cursor-pointer focus:outline-none focus:ring focus:ring-inset focus:ring-2 focus:ring-editor-primary/50',
     data: { turbo_frame: 'modal' } do %>
     <%= render Maglev::Uikit::IconComponent.new(name: "file") %>
-    <span class="ml-3 shrink"><%= link[:link_label] %></span>
+    <span class="ms-3 shrink"><%= link[:link_label] %></span>
   <% end %>
 
-  <div class="absolute right-3 top-0 bottom-0 flex items-center pl-3">
+  <div class="absolute end-3 top-0 bottom-0 flex items-center ps-3">
     <%= render(Maglev::Uikit::IconButtonComponent.new(icon_name: 'eraser', data: { action: 'click->uikit-form-link#clear:prevent' })) %>
   </div>
 

data/app/components/maglev/uikit/form/link/url_link_component.html.erb

@@ -3,10 +3,10 @@
     class: 'flex-1 flex items-center overflow-hidden items-center w-full h-10 px-3 rounded bg-gray-100 text-gray-800 cursor-pointer focus:outline-none focus:ring focus:ring-inset focus:ring-2 focus:ring-editor-primary/50',
     data: { turbo_frame: 'modal' } do %>
     <%= render Maglev::Uikit::IconComponent.new(name: "external_link") %>
-    <span class="ml-3 shrink"><%= link[:href] %></span>
+    <span class="ms-3 shrink"><%= link[:href] %></span>
   <% end %>
 
-  <div class="absolute right-3 top-0 bottom-0 flex items-center pl-3">
+  <div class="absolute end-3 top-0 bottom-0 flex items-center ps-3">
     <%= render(Maglev::Uikit::IconButtonComponent.new(icon_name: 'eraser', data: { action: 'click->uikit-form-link#clear:prevent' })) %>
   </div>
   

data/app/components/maglev/uikit/form/richtext/block_button_component.html.erb

@@ -20,7 +20,7 @@
     <% end %>
   <% end %>
           
-  <div class="flex flex-row space-x-2 py-1 px-1">
+  <div class="flex flex-row gap-2 py-1 px-1">
     <% choices.each do |choice| %>
       <%= tag.button(
         class: 'hover:bg-gray-100 px-2 py-1 cursor-pointer rounded-sm',

data/app/components/maglev/uikit/form/richtext/button_component.html.erb

@@ -1,8 +1,8 @@
 <%= tag.button(
   class: class_names(
     'cursor-pointer px-2 py-2 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-editor-primary/50 focus:ring-inset focus:ring bg-gray-100',
-    'first:rounded-l-sm',
-    'last:rounded-r-sm',
+    'first:rounded-s-sm',
+    'last:rounded-e-sm',
     '[&.active]:bg-gray-600 [&.active]:hover:bg-gray-600 [&.active]:text-white'
   ),
   type: 'button', 

data/app/components/maglev/uikit/form/richtext/toolbar_component.html.erb

@@ -1,4 +1,4 @@
-<div class="flex sticky top-0 z-10 pb-2 bg-white space-x-1 overflow-x-auto">  
+<div class="flex sticky top-0 z-10 pb-2 bg-white gap-1 overflow-x-auto">
   <%= render Maglev::Uikit::Form::Richtext::ButtonGroupComponent.new do |button_group| %>
     <%= render Maglev::Uikit::Form::Richtext::BlockButtonComponent.new %>
   <% end unless line_break? %>

data/app/components/maglev/uikit/form/search_form_component.html.erb

@@ -5,7 +5,7 @@
   <%= tag.attributes(data: data) %>
 >
   <%= content if content? %>
-  <button type="submit" class="mr-2">
+  <button type="submit" class="me-2">
     <%= render Maglev::Uikit::IconComponent.new(name: 'search', size: '1.25rem', class_names: 'text-gray-500') %>
   </button>
   <%= tag.input(

data/app/components/maglev/uikit/form/search_form_component.rb

@@ -26,7 +26,7 @@ module Maglev
 
         def clear_button_class_names(...)
           class_variants(
-            base: 'ml-1 text-gray-500 cursor-pointer',
+            base: 'ms-1 text-gray-500 cursor-pointer',
             variants: {
               invisible: 'invisible'
             }

data/app/components/maglev/uikit/form/select_component.html.erb

@@ -14,6 +14,6 @@
       **input_tag_options,
       **html_options
     %>
-    <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_down', size: '1.25rem', class_names: 'pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4') %>    
+    <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_down', size: '1.25rem', class_names: 'pointer-events-none col-start-1 row-start-1 me-2 size-5 self-center justify-self-end text-gray-500 sm:size-4') %>
   </div>
 </div>

data/app/components/maglev/uikit/image_library/card_component.html.erb

@@ -24,7 +24,7 @@
       >
         <%= button_to delete_path, 
           method: :delete,
-          form_class: 'ml-auto flex items-center', 
+          form_class: 'ms-auto flex items-center',
           class: 'px-1 py-1 bg-white rounded-full flex items-center justify-center text-gray-900 cursor-pointer',
           data: { turbo_confirm: t('maglev.editor.image_library.confirm_destroy'), turbo_frame: 'modal-dialog' } do 
         %>

data/app/components/maglev/uikit/list/insert_button_component.html.erb

@@ -1,5 +1,5 @@
 <div <%= tag.attributes(class: wrapper_classes) %>>
-  <div class="absolute top-0 left-0 w-full justify-center flex opacity-0 group-hover/button:opacity-100 transition-opacity duration-200">
+  <div class="absolute top-0 start-0 w-full justify-center flex opacity-0 group-hover/button:opacity-100 transition-opacity duration-200">
     <%= link_to link_url, data: link_data, class: "h-7 w-7 flex items-center justify-center rounded-full focus:outline-none transition-colors duration-200 border-4 border-white bg-gray-500 text-gray-200 hover:bg-gray-900 hover:text-gray-100" do %>
       <%= render Maglev::Uikit::IconComponent.new(name: "add", size: "1.15rem") %>    
     <% end %>

data/app/components/maglev/uikit/list/list_item_component.html.erb

@@ -1,6 +1,6 @@
 <%= tag.div(data: { sortable_target: sortable_target, item_id: id, item_index: index }) do %>
   <%= content_tag(wrapper_tag_name.to_sym, class: wrapper_classes) do %>
-    <%= content if content? %>
+    <%= leading if leading? %>
 
     <%= tag.div(class: 'flex items-center cursor-move', data: { sortable_target: sortable_handle }) do %>
       <%= render Maglev::Uikit::IconComponent.new(name: "draggable") %>
@@ -9,7 +9,7 @@
     <% item_body = capture do %>
       <% if icon? %>
         <div class="grid grid-cols-[auto_1fr_auto] flex flex-1 items-center">
-          <div class="mr-2">
+          <div class="me-2">
             <%= icon %>
           </div>
           <div class="text-gray-800 truncate"><%= title %></div>
@@ -56,9 +56,11 @@
     <% end %>
 
     <% if action? %>
-      <div class="relative ml-auto flex items-center shrink-0 min-h-full gap-2">
+      <div class="relative ms-auto flex items-center shrink-0 min-h-full gap-2">
         <%= action %>
       </div>
     <% end %>  
-  <% end %>  
-<% end %>
+  <% end %>
+
+  <%= content if content? %>
+<% end %>

data/app/components/maglev/uikit/list/list_item_component.rb

@@ -12,6 +12,8 @@ module Maglev
         renders_one :sub_title
         renders_one :title
         renders_one :action
+        # Inside the wrapper (e.g. radio for label wrappers). Default content stays below.
+        renders_one :leading
 
         attr_reader :link, :index, :options, :variant, :wrapper_tag_name
 

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

@@ -1,6 +1,6 @@
 <%= render(Maglev::Uikit::MenuDropdownComponent.new) do |dropdown| %>
   <% dropdown.with_trigger do %>
-    <%= tag.button class: helpers.maglev_button_classes(color: :secondary, class: 'space-x-2'), data: { action: 'click->uikit-dropdown#toggle', 'uikit-dropdown-target': 'button' } do %>
+    <%= tag.button class: helpers.maglev_button_classes(color: :secondary, class: 'gap-2'), data: { action: 'click->uikit-dropdown#toggle', 'uikit-dropdown-target': 'button' } do %>
       <%= render Maglev::Uikit::IconComponent.new(name: 'global') %>
       <span class="whitespace-nowrap">
         <%= current_locale_label %>

data/app/components/maglev/uikit/menu_dropdown_component.rb

@@ -52,7 +52,7 @@ module Maglev
         class_variants(
           base: %(
             col-span-3 grid grid-cols-subgrid
-            flex flex-1 items-center px-2 py-3 w-full mx-1 rounded-sm text-left
+            flex flex-1 items-center px-2 py-3 w-full mx-1 rounded-sm text-start
             transition-colors duration-200 focus:outline-none cursor-pointer
           ),
           variants: {
@@ -82,11 +82,11 @@ module Maglev
 
         def self.inner_content
           <<-ERB
-            <%= render Maglev::Uikit::IconComponent.new(name: icon.to_s, size: '1.15rem', class_names: 'mr-2 shrink-0') if icon? %>
+            <%= render Maglev::Uikit::IconComponent.new(name: icon.to_s, size: '1.15rem', class_names: 'me-2 shrink-0') if icon? %>
             <span class="<%= 'col-start-2' unless icon? %> whitespace-nowrap whitespace-nowrap truncate overflow-hidden">
               <%= label %>
             </span>
-            <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_right', size: '1.15rem', class_names: 'ml-2 shrink-0') if right_arrow? %>
+            <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_right', size: '1.15rem', class_names: 'ms-2 shrink-0 rtl:-scale-x-100') if right_arrow? %>
             <span class="col-start-2 whitespace-nowrap whitespace-nowrap truncate overflow-hidden text-xs text-gray-500">
               <%= sub_label %>
             </span>

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

@@ -23,7 +23,7 @@
   <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
     <div class="flex min-h-full items-center justify-center p-4" data-action="click->uikit-modal#close:self">
       <div 
-        class="relative transform overflow-y-visible rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:min-w-96 sm:p-6 w-full sm:w-auto hidden"
+        class="relative transform overflow-y-visible rounded-lg bg-white px-4 pb-4 pt-5 text-start shadow-xl transition-all sm:my-8 sm:min-w-96 sm:p-6 w-full sm:w-auto hidden"
         data-uikit-modal-target="dialog"
         data-transition-enter="ease-out duration-100"
         data-transition-enter-start="opacity-0 -translate-y-6 scale-95"
@@ -36,12 +36,12 @@
           <div class="flex items-center justify-between">
             <h2 class="text-gray-800 font-semibold antialiased text-lg"><%= title %></h2>
 
-            <div class="ml-auto pl-2 gap-0.5 flex items-center">
+            <div class="ms-auto ps-2 gap-0.5 flex items-center">
               <% if notification? %>
                 <%= notification %>          
               <% end %>
 
-              <div class="relative -right-2">
+              <div class="relative -end-2">
                 <%= render Maglev::Uikit::IconButtonComponent.new(icon_name: 'close', data: { action: 'click->uikit-modal#close' }) %>
               </div>
             </div>

data/app/components/maglev/uikit/modal_component.rb

@@ -19,7 +19,7 @@ module Maglev
       def dialog_classes
         class_variants(
           base: %(
-            relative transform overflow-y-visible rounded-lg bg-white px-4 pb-4 pt-5 text-left
+            relative transform overflow-y-visible rounded-lg bg-white px-4 pb-4 pt-5 text-start
             shadow-xl transition-all sm:my-8 sm:p-6 hidden
           ),
           variants: {

data/app/components/maglev/uikit/page_layout_component/back_link_component.html.erb

@@ -1,4 +1,4 @@
 <%= link_to path, class: 'text-gray-500 hover:text-gray-700 inline-flex items-center space-x text-xs', data: { turbo_frame: '_top' } do %>
-  <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_left', size: '1.15rem', class_names: 'relative -left-1') %>
+  <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_left', size: '1.15rem', class_names: 'relative -start-1 rtl:-scale-x-100') %>
   <%= content %>
 <% end %>

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

@@ -22,14 +22,14 @@
           <%= title_html %>
         <% end %>
       </div>
-      <div class="ml-auto pl-2 gap-0.5 flex items-center">
+      <div class="ms-auto ps-2 gap-0.5 flex items-center">
         <turbo-frame id="page-layout-notification">
           <% if notification? %>
             <%= notification %>
           <% end %>
         </turbo-frame>
 
-        <%= link_to back_path, class: 'h-7 w-7 flex items-center justify-center rounded-full focus:outline-none transition-colors duration-200 relative -right-2 bg-gray-600/0 hover:text-gray-900 text-gray-800 hover:bg-gray-600/10', data: { turbo_frame: '_top' } do %>
+        <%= link_to back_path, class: 'h-7 w-7 flex items-center justify-center rounded-full focus:outline-none transition-colors duration-200 relative -end-2 bg-gray-600/0 hover:text-gray-900 text-gray-800 hover:bg-gray-600/10', data: { turbo_frame: '_top' } do %>
           <%= render Maglev::Uikit::IconComponent.new(name: 'close', size: '1.15rem') %>
         <% end %>
       </div>

data/app/components/maglev/uikit/page_layout_component.rb

@@ -21,11 +21,11 @@ module Maglev
         class_variants(
           base: %(
             slide-pane absolute inset-y-0 h-[100dvh-(--spacing(16))] bg-white
-            border-r border-gray-200 origin-top-left flex flex-col top-16 w-104
+            border-e border-gray-200 origin-top-left rtl:origin-top-right flex flex-col top-16 w-104
           ),
           variants: {
-            expanded: 'left-0 z-40',
-            '!expanded': 'left-16 z-10'
+            expanded: 'start-0 z-40',
+            '!expanded': 'start-16 z-10'
           }
         ).render(expanded: expanded)
       end

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

@@ -1,11 +1,11 @@
 <% a = pagy_anchor(pagy) %>
 
 <% left_arrow = capture do %>
-  <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_left', size: '1.25rem') %>  
+  <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_left', size: '1.25rem', class_names: 'rtl:-scale-x-100') %>
 <% end %>
 
 <% right_arrow = capture do %>
-  <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_right', size: '1.25rem') %>
+  <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_right', size: '1.25rem', class_names: 'rtl:-scale-x-100') %>
 <% end %>
 
 <div class="flex items-center justify-between bg-white w-full h-10">
@@ -19,9 +19,9 @@
     <% end %>
 
      <% if pagy.next %>
-      <%== a.(pagy.next, pagy_t('pagy.aria_label.next'), aria_label: 'Next', classes: 'relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100') %>
+      <%== a.(pagy.next, pagy_t('pagy.aria_label.next'), aria_label: 'Next', classes: 'relative ms-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100') %>
     <% else %>
-      <a role="link" aria-disabled="true" aria-label="Next" class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100">
+      <a role="link" aria-disabled="true" aria-label="Next" class="relative ms-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100">
         <%= pagy_t('pagy.aria_label.next') %>
       </a>
     <% end %>

data/app/components/maglev/uikit/section_toolbar/top_left_corner_component.html.erb

@@ -1,15 +1,15 @@
 <div 
-  class="absolute top-0 left-0 mt-2 ml-2 flex hidden transition ease-[cubic-bezier(0.55,0,0.1,1)]"
+  class="absolute top-0 start-0 mt-2 ms-2 flex hidden transition ease-[cubic-bezier(0.55,0,0.1,1)]"
   data-uikit-section-toolbar-target="topLeftCorner"
   data-transition-enter="duration-200"
-  data-transition-enter-start="-translate-x-[50%] opacity-0"
+  data-transition-enter-start="-translate-x-[50%] rtl:translate-x-[50%] opacity-0"
   data-transition-enter-end="translate-x-0 opacity-100"
   data-transition-leave="duration-200"
   data-transition-leave-start="translate-x-0 opacity-100"
-  data-transition-leave-end="-translate-x-[50%] opacity-0"
+  data-transition-leave-end="-translate-x-[50%] rtl:translate-x-[50%] opacity-0"
 >
   <div
-    class="bg-editor-primary text-white py-1 px-3 rounded-l-2xl rounded-r-2xl text-xs flex items-center"    
+    class="bg-editor-primary text-white py-1 px-3 rounded-s-2xl rounded-e-2xl text-xs flex items-center"
   >
     <span><%= label %></span>
   </div>  

data/app/components/maglev/uikit/section_toolbar/top_right_corner_component.html.erb

@@ -1,11 +1,11 @@
-<div class="absolute top-0 right-0 mt-2 mr-2 flex justify-center gap-x-2 hidden transition ease-[cubic-bezier(0.55,0,0.1,1)]"
+<div class="absolute top-0 end-0 mt-2 me-2 flex justify-center gap-x-2 hidden transition ease-[cubic-bezier(0.55,0,0.1,1)]"
   data-uikit-section-toolbar-target="topRightCorner"
   data-transition-enter="duration-200"
-  data-transition-enter-start="translate-x-[50%] opacity-0"
+  data-transition-enter-start="translate-x-[50%] rtl:-translate-x-[50%] opacity-0"
   data-transition-enter-end="translate-x-0 opacity-100"
   data-transition-leave="duration-200"
   data-transition-leave-start="translate-x-0 opacity-100"
-  data-transition-leave-end="translate-x-[50%] opacity-0"
+  data-transition-leave-end="translate-x-[50%] rtl:-translate-x-[50%] opacity-0"
 >
   <%= link_to paths[:edit], class: button_classes, data: { turbo_frame: '_top' } do %>
     <%= render Maglev::Uikit::IconComponent.new(name: 'pencil') %>

data/app/controllers/concerns/maglev/editor/errors_concern.rb

@@ -26,7 +26,7 @@ module Maglev
 
       def handle_stale_object
         respond_to do |format|
-          format.turbo_stream { render 'maglev/editor/shared/errors/stale_object_error' }
+          format.turbo_stream { render 'maglev/editor/shared/errors/stale_object_error', status: :conflict }
           format.html { redirect_to editor_root_path }
         end
       end

data/app/controllers/concerns/maglev/editor/lock_version_concern.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Editor
+    module LockVersionConcern
+      extend ActiveSupport::Concern
+
+      included do
+        helper_method :source_lock_version
+      end
+
+      private
+
+      def lock_source
+        @section.site_scoped? ? maglev_site : current_maglev_page
+      end
+
+      def source_lock_version
+        lock_source.lock_version || 0
+      end
+
+      def reload_lock_source
+        lock_source.reload if @section.site_scoped?
+      end
+    end
+  end
+end

data/app/controllers/maglev/editor/section_blocks_controller.rb

@@ -3,8 +3,9 @@
 module Maglev
   module Editor
     class SectionBlocksController < Maglev::Editor::BaseController
+      include Maglev::Editor::LockVersionConcern
+
       helper Maglev::Editor::SettingsHelper
-      helper_method :source_lock_version
 
       before_action :set_section
       before_action :set_section_block, only: %i[edit update destroy]
@@ -32,6 +33,7 @@ module Maglev
 
       def update
         update_section_block
+        reload_lock_source
         flash.now[:notice] = flash_t(:success)
       end
 
@@ -77,14 +79,6 @@ module Maglev
         )
       end
 
-      def lock_source
-        @section.site_scoped? ? maglev_site : current_maglev_page
-      end
-
-      def source_lock_version
-        lock_source.lock_version || 0
-      end
-
       def redirect_to_section_blocks_path(success: true)
         flash = case success
                 when true then { notice: flash_t(:success) }

data/app/controllers/maglev/editor/sections_controller.rb

@@ -3,8 +3,9 @@
 module Maglev
   module Editor
     class SectionsController < Maglev::Editor::BaseController
+      include Maglev::Editor::LockVersionConcern
+
       helper Maglev::Editor::SettingsHelper
-      helper_method :source_lock_version
 
       before_action :ensure_turbo_frame_request, only: [:new]
       before_action :set_section, only: %i[edit update]
@@ -39,6 +40,7 @@ module Maglev
 
       def update
         update_section
+        reload_lock_source
         flash.now[:notice] = flash_t(:success)
       end
 
@@ -95,14 +97,6 @@ module Maglev
         headers['X-Section-Position'] = flash[:position]
       end
 
-      def lock_source
-        @section.site_scoped? ? maglev_site : current_maglev_page
-      end
-
-      def source_lock_version
-        lock_source.lock_version || 0
-      end
-
       def redirect_to_sections_path
         redirect_to editor_sections_path_with_context, notice: flash_t(:success), status: :see_other
       end

data/app/helpers/maglev/application_helper.rb

@@ -3,6 +3,8 @@
 # rubocop:disable Metrics/ModuleLength
 module Maglev
   module ApplicationHelper
+    RTL_UI_LOCALES = %i[ar he fa ur].freeze
+
     ## "system" helpers
     def turbo_stream
       # we don't want to pollute the global Turbo::Streams::TagBuilder
@@ -63,6 +65,10 @@ module Maglev
     end
 
     ## Editor helpers
+    def maglev_editor_direction
+      RTL_UI_LOCALES.include?(editor_ui_locale.to_sym) ? 'rtl' : 'ltr'
+    end
+
     def maglev_editor_title
       case maglev_config.title
       when nil

data/app/services/concerns/maglev/content/helpers_concern.rb

@@ -58,7 +58,7 @@ module Maglev
 
       def update_setting_value(setting, current_content)
         setting_content = current_content.find { |s| s['id'] == setting.id }
-        value = content[setting.id.to_sym]
+        value = setting.cast_value(content[setting.id.to_sym])
 
         if setting_content.nil?
           current_content.push({ id: setting.id, value: value })

data/app/views/layouts/maglev/editor/application.html.erb

@@ -1,4 +1,4 @@
-<html lang="<%= I18n.locale %>">
+<html lang="<%= editor_ui_locale %>" dir="<%= maglev_editor_direction %>">
   <head>
     <title><%= maglev_editor_title %></title>
     <meta name="view-transition" content="same-origin" />

data/app/views/maglev/editor/assets/index.html.erb

@@ -19,7 +19,7 @@
           <% end %>
           
         </div>
-        <div class="ml-auto">
+        <div class="ms-auto">
           <%= render Maglev::Uikit::ImageLibrary::UploaderComponent.new(
             create_path: editor_assets_path,
             refresh_path: editor_assets_path(query_params)

data/app/views/maglev/editor/pages/_preview.html.erb

@@ -1,5 +1,5 @@
 <div 
-  class="absolute top-16 left-16 right-0 bottom-0 z-0 overflow-hidden group"
+  class="absolute top-16 start-16 end-0 bottom-0 z-0 overflow-hidden group"
   data-controller="editor-page-preview"
   data-action="
     uikit-device-toggler:change@window->editor-page-preview#changeDevice 
@@ -14,7 +14,7 @@
 >
   <div 
     id="page-preview"
-    class="bg-gray-50 origin-top-left transition-transform duration-150 ease-out will-change-transform transform-gpu hidden opacity-0 group-[.is-loaded]:opacity-100 group-[.is-loaded]:block"  
+    class="bg-gray-50 origin-top-left rtl:origin-top-right transition-transform duration-150 ease-out will-change-transform transform-gpu hidden opacity-0 group-[.is-loaded]:opacity-100 group-[.is-loaded]:block"
     data-editor-page-preview-target="iframe-wrapper"
   >
     <iframe 
@@ -28,7 +28,7 @@
   </div>
 
   <div class="flex h-full w-full justify-center items-center transition-discrete transition-all duration-100 ease-in-out opacity-100 group-[.is-loaded]:opacity-0 group-[.is-loaded]:hidden" data-editor-page-preview-target="loading">
-    <p class="animate-bounce duration-200 group-data-[expanded-page-layout]/page-layout:pl-88">
+    <p class="animate-bounce duration-200 group-data-[expanded-page-layout]/page-layout:ps-88">
       <%= t('maglev.editor.page_preview.loading') %>
     </p>
   </div>

data/app/views/maglev/editor/pages/_preview_empty_message.html.erb

@@ -1,5 +1,5 @@
 <%# z-[5]: below PageLayoutComponent (z-10 / z-40), above preview shell (z-0). editor-preview-empty: tailwind.css.erb @custom-variant on [data-controller~="editor-page-preview"].is-empty %>
-<div class="fixed top-16 left-16 right-0 bottom-0 z-[5] bg-gray-50 hidden editor-preview-empty:block">
+<div class="fixed top-16 start-16 end-0 bottom-0 z-[5] bg-gray-50 hidden editor-preview-empty:block">
   <div class="flex min-h-full flex-col items-center justify-center px-4">
     <h2 class="text-center text-2xl font-bold">
       <%= t('maglev.editor.page_preview.empty.title') %>