maglevcms 3.0.0.beta3 → 3.0.1

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

@@ -1,13 +1,17 @@
-<%= render Maglev::Uikit::DropdownComponent.new(placement: placement) do |component| %>
+<%= render Maglev::Uikit::DropdownComponent.new(placement: placement, wrapper_classes: wrapper_classes) do |component| %>
   <% component.with_trigger do %>
     <% if trigger.present? %>
       <%= trigger %>
+    <% elsif trigger_classes.present? && icon_name.present? %>
+      <%= button_tag class: trigger_classes, data: { action: "click->uikit-dropdown#toggle", 'uikit-dropdown-target': 'button' } do %>
+        <%= render Maglev::Uikit::IconComponent.new(name: icon_name) %>
+      <% end %>
     <% else %>
       <%= render Maglev::Uikit::IconButtonComponent.new(icon_name: icon_name, data: { action: "click->uikit-dropdown#toggle", 'uikit-dropdown-target': 'button' }) %>
     <% end %>
   <% end %>
 
-  <div class="flex flex-col w-48 text-gray-800">
+  <div class="<%= list_item_classes %>">
     <% items.each do |item| %>
       <%= item %>
     <% end %>

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

@@ -3,30 +3,267 @@
 module Maglev
   module Uikit
     class MenuDropdownComponent < Maglev::Uikit::BaseComponent
+      module RenderPolymorphicItems
+        extend ActiveSupport::Concern
+
+        included do
+          renders_many :items, types: {
+            button: lambda { |options = nil|
+              Maglev::Uikit::MenuDropdownComponent::ButtonItemComponent.new(options, parent: self)
+            },
+            link_to: lambda { |options = nil, html_options = nil|
+              Maglev::Uikit::MenuDropdownComponent::LinkToItemComponent.new(options, html_options, parent: self)
+            },
+            button_to: lambda { |options = nil, html_options = nil|
+              Maglev::Uikit::MenuDropdownComponent::ButtonToItemComponent.new(options, html_options, parent: self)
+            },
+            text: lambda { |options = nil|
+              Maglev::Uikit::MenuDropdownComponent::TextItemComponent.new(options, parent: self)
+            },
+            nested_menu: lambda { |placement:|
+              Maglev::Uikit::MenuDropdownComponent::NestedMenuComponent.new(placement: placement, parent: self)
+            },
+            wrapper: lambda { |options = nil|
+              Maglev::Uikit::MenuDropdownComponent::WrapperItemComponent.new(options, parent: self)
+            },
+            divider: -> { Maglev::Uikit::MenuDropdownComponent::DividerItemComponent.new(parent: self) }
+          }
+        end
+      end
+
       renders_one :trigger
-      renders_many :items
+      include RenderPolymorphicItems
 
-      attr_reader :icon_name, :placement
+      attr_reader :icon_name, :placement, :wrapper_classes, :trigger_classes
 
-      def initialize(icon_name: nil, placement: 'bottom-start')
+      def initialize(icon_name: nil, placement: 'bottom-start', wrapper_classes: nil, trigger_classes: nil)
         @icon_name = icon_name
         @placement = placement
+        @wrapper_classes = wrapper_classes
+        @trigger_classes = trigger_classes
+      end
+
+      def list_item_classes
+        'text-gray-800 grid grid-cols-[auto_1fr_auto] min-w-[12rem] my-1'
       end
 
+      # rubocop:disable Metrics/MethodLength
       def item_classes(...)
         class_variants(
           base: %(
-            flex items-center px-4 py-4 hover:bg-gray-100 w-full
-            transition-colors duration-200 focus:outline-none cursor-pointer flex-1
-          )
+            col-span-3 grid grid-cols-subgrid
+            flex flex-1 items-center px-2 py-3 w-full mx-1 rounded-sm text-left
+            transition-colors duration-200 focus:outline-none cursor-pointer
+          ),
+          variants: {
+            danger: 'text-red-600 hover:bg-red-100',
+            '!danger': 'hover:bg-gray-100',
+            subdued: 'text-gray-400'
+          },
+          defaults: { danger: false, subdued: false }
         ).render(...)
       end
+      # rubocop:enable Metrics/MethodLength
 
       def form_item_classes(...)
         class_variants(
-          base: 'flex items-center focus:outline-none cursor-pointer'
+          base: %w[
+            col-span-3 grid grid-cols-subgrid
+            flex items-center focus:outline-none cursor-pointer
+          ]
         ).render(...)
       end
+
+      class ItemComponent < ViewComponent::Base
+        renders_one :icon
+        renders_one :label
+        renders_one :sub_label
+        renders_one :right_icon
+
+        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? %>
+            <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? %>
+            <span class="col-start-2 whitespace-nowrap whitespace-nowrap truncate overflow-hidden text-xs text-gray-500">
+              <%= sub_label %>
+            </span>
+          ERB
+        end
+
+        def right_arrow?
+          false
+        end
+      end
+
+      class TextItemComponent < ItemComponent
+        attr_reader :options, :parent_component, :variant
+
+        def initialize(options = nil, parent: nil)
+          @parent_component = parent
+          @options = options || {}
+          @variant = @options.delete(:variant)
+
+          apply_parent_classes
+        end
+
+        erb_template <<-ERB
+          <%= tag.span(**options) do %>
+            #{inner_content}
+          <% end %>
+        ERB
+
+        private
+
+        def apply_parent_classes
+          options[:class] = parent_component.item_classes(subdued: variant == 'subdued', class: options[:class])
+        end
+      end
+
+      class LinkToItemComponent < ItemComponent
+        attr_reader :options, :html_options, :parent_component, :variant
+
+        def initialize(options = nil, html_options = nil, parent: nil)
+          @parent_component = parent
+          @options = options
+          @html_options = html_options || {}
+          @variant = @html_options.delete(:variant)
+
+          apply_parent_classes
+        end
+
+        erb_template <<-ERB
+          <%= link_to options, html_options do %>
+            #{inner_content}
+          <% end %>
+        ERB
+
+        private
+
+        def apply_parent_classes
+          html_options[:class] = parent_component.item_classes(danger: variant == 'danger', class: html_options[:class])
+        end
+      end
+
+      class ButtonItemComponent < ItemComponent
+        attr_reader :options, :parent_component
+
+        def initialize(options = nil, parent: nil)
+          @parent_component = parent
+          @options = (options || {}).merge(type: 'button')
+
+          apply_parent_classes
+        end
+
+        erb_template <<-ERB
+          <%= button_tag options do %>
+            #{inner_content}
+          <% end %>
+        ERB
+
+        private
+
+        def apply_parent_classes
+          options[:class] = parent_component.item_classes(class: options[:class])
+        end
+      end
+
+      class ButtonToItemComponent < LinkToItemComponent
+        erb_template <<-ERB
+          <%= button_to options, html_options do %>
+            #{inner_content}
+          <% end %>
+        ERB
+
+        private
+
+        def apply_parent_classes
+          super
+          html_options[:form_class] = parent_component.form_item_classes(class: html_options[:form_class])
+        end
+      end
+
+      class NestedMenuComponent < ItemComponent
+        include RenderPolymorphicItems
+
+        attr_reader :placement, :parent_component
+
+        delegate :list_item_classes, :item_classes, :form_item_classes, to: :parent_component
+
+        alias wrapper_classes form_item_classes
+
+        def initialize(placement:, parent:)
+          @placement = placement
+          @parent_component = parent
+        end
+
+        erb_template <<-ERB
+          <%= render Maglev::Uikit::DropdownComponent.new(placement: placement, wrapper_classes: wrapper_classes) do |dropdown| %>
+            <% dropdown.with_trigger do %>
+              <%= button_tag class: item_classes, data: { action: 'click->uikit-dropdown#toggle', 'uikit-dropdown-target': 'button' } do %>
+                #{inner_content}#{'                '}
+              <% end %>
+            <% end %>
+
+            <div class="<%= list_item_classes %>">
+              <% items.each do |item| %>
+                <%= item %>
+              <% end %>
+            </div>
+          <% end %>
+        ERB
+
+        def right_arrow?
+          true
+        end
+      end
+
+      class WrapperItemComponent < Maglev::Uikit::BaseComponent
+        include RenderPolymorphicItems
+
+        attr_reader :options, :parent_component
+
+        delegate :item_classes, :form_item_classes, to: :parent_component
+
+        def initialize(options, parent: nil)
+          @parent_component = parent
+          @options = options || {}
+
+          apply_parent_classes
+        end
+
+        erb_template <<-ERB
+          <%= tag.div(**options) do %>
+            <% items.each do |item| %>
+              <%= item %>
+            <% end %>
+          <% end %>
+        ERB
+
+        private
+
+        def apply_parent_classes
+          options[:class] = parent_component.form_item_classes(class: options[:class])
+        end
+      end
+
+      class DividerItemComponent < ItemComponent
+        attr_reader :parent_component
+
+        def initialize(parent:)
+          @parent_component = parent
+        end
+
+        def item_classes(...)
+          parent_component.form_item_classes(class: 'border-t border-gray-200 my-1 px-0!')
+        end
+
+        erb_template <<-ERB
+          <%= tag.hr class: item_classes %>
+        ERB
+      end
     end
   end
 end

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

@@ -1,56 +1,49 @@
-<%= render Maglev::Uikit::MenuDropdownComponent.new(icon_name: icon_name) do |dropdown| %>
-  <% dropdown.with_item do %>
-    <%= link_to paths[:edit], class: dropdown.item_classes, data: { turbo_frame: '_top' } do %>
-      <%= render Maglev::Uikit::IconComponent.new(name: 'settings', class_names: 'shrink-0') %>
-      <span class="ml-2 whitespace-nowrap truncate overflow-hidden"><%= t('maglev.editor.pages.actions.edit') %></span>
-    <% end %>
+<%= render Maglev::Uikit::MenuDropdownComponent.new(icon_name: icon_name) do |menu_dropdown| %>
+  <% menu_dropdown.with_item_link_to(paths[:edit], data: { turbo_frame: '_top' }) do |menu_item| %>
+    <% menu_item.with_icon_content('settings') %>
+    <% menu_item.with_label_content(t('maglev.editor.pages.actions.edit')) %>
   <% end if allow?(:edit) %>
 
-  <% dropdown.with_item do %>    
-    <%= render Maglev::Uikit::MenuDropdownComponent.new(placement: 'right-start') do |sub_menu| %>
-      <% sub_menu.with_trigger do %>
-        <%= button_tag class: sub_menu.item_classes, data: { action: 'click->uikit-dropdown#toggle', 'uikit-dropdown-target': 'button' } do %>
-          <%= render Maglev::Uikit::IconComponent.new(name: 'preview', class_names: 'shrink-0') %>
-          <span class="ml-2 whitespace-nowrap truncate overflow-hidden"><%= t('maglev.editor.pages.actions.preview') %></span>
-        <% end %>
-      <% end %>
-      <% sub_menu.with_item do %>
-        <%= link_to t('maglev.editor.pages.actions.draft_preview'), paths[:preview], class: sub_menu.item_classes, target: '_blank' %>
-      <% end %>
-      <% sub_menu.with_item do %>
-        <%= link_to t('maglev.editor.pages.actions.live_preview'), live_url, class: sub_menu.item_classes, target: '_blank' %>
-      <% end %>
+  <% menu_dropdown.with_item_divider if allow?(:edit) %>
+
+  <% menu_dropdown.with_item_nested_menu(placement: 'right-start') do |menu_item| %>
+    <% menu_item.with_icon_content('preview') %>
+    <% menu_item.with_label_content(t('maglev.editor.pages.actions.preview')) %>
+
+    <% menu_item.with_item_link_to(paths[:preview], target: '_blank') do |sub_menu_item| %>
+      <% sub_menu_item.with_label_content(t('maglev.editor.pages.actions.draft_preview')) %>
     <% end %>
-  <% end if allow?(:preview) %>
 
-  <% dropdown.with_item do %>
-    <%= button_to paths[:clone], class: dropdown.form_item_classes, form_class: dropdown.item_classes do %>
-      <%= render Maglev::Uikit::IconComponent.new(name: 'clone', class_names: 'shrink-0') %>
-      <span class="ml-2 whitespace-nowrap truncate overflow-hidden"><%= t('maglev.editor.pages.actions.clone') %></span>
+    <% menu_item.with_item_link_to(live_url, target: '_blank') do |sub_menu_item| %>
+      <% sub_menu_item.with_label_content(t('maglev.editor.pages.actions.live_preview')) %>
+    <% end if live_url.present? %>
+
+    <% menu_item.with_item_text(variant: 'subdued') do |text_item| %>   
+      <% text_item.with_label_content(t('maglev.editor.pages.actions.no_live_preview')) %>
+    <% end if live_url.blank? %> 
+  <% end %>  
+
+  <% menu_dropdown.with_item_wrapper(data: { controller: 'copy-to-clipboard', copy_to_clipboard_source_value: live_url }) do |wrapper_item| %>
+    <% wrapper_item.with_item_button(data: { copy_to_clipboard_target: 'text', action: 'click->copy-to-clipboard#copy:prevent' }) do |menu_item| %>
+      <% menu_item.with_icon_content('clipboard') %>
+      <% menu_item.with_label_content(t('maglev.editor.pages.actions.copy_url_to_clipboard')) %>
     <% end %>
-  <% end if allow?(:clone) %>
 
-  <% dropdown.with_item do %> 
-    <div data-controller="copy-to-clipboard" data-copy-to-clipboard-source-value="<%= live_url %>">
-      <%= link_to '#', class: dropdown.item_classes, data: { copy_to_clipboard_target: 'text', action: 'click->copy-to-clipboard#copy:prevent' } do %>
-        <%= render Maglev::Uikit::IconComponent.new(name: 'clipboard', class_names: 'shrink-0') %>
-        <span class="ml-2 whitespace-nowrap truncate overflow-hidden">
-          <%= t('maglev.editor.pages.actions.copy_url_to_clipboard') %>
-        </span>                                    
-      <% end %>
-      <div class="<%= dropdown.item_classes %> hidden" data-copy-to-clipboard-target="success">
-        <%= render Maglev::Uikit::IconComponent.new(name: 'checkbox_circle', class_names: 'text-green-500 shrink-0') %>
-        <span class="ml-2 whitespace-nowrap truncate overflow-hidden text-green-500">
-          <%= t('maglev.editor.pages.actions.copy_url_to_clipboard_success') %>
-        </span>
-      </div>
-    </div>
+    <% wrapper_item.with_item_button(class: 'hidden text-green-500', data: { copy_to_clipboard_target: 'success' }) do |menu_item| %>
+      <% menu_item.with_icon_content('checkbox_circle') %>
+      <% menu_item.with_label_content(t('maglev.editor.pages.actions.copy_url_to_clipboard_success')) %>
+    <% end %>
   <% end if allow?(:copy_url_to_clipboard) %>
 
-  <% dropdown.with_item do %>
-    <%= button_to paths[:delete], method: :delete, class: dropdown.item_classes, form_class: dropdown.form_item_classes, data: { turbo_confirm: t('maglev.editor.pages.actions.confirm_delete'), turbo_frame: '_top' } do %>
-      <%= render Maglev::Uikit::IconComponent.new(name: 'delete_bin', class_names: 'shrink-0') %>
-      <span class="ml-2 whitespace-nowrap truncate overflow-hidden"><%= t('maglev.editor.pages.actions.delete') %></span>
-    <% end %>
+  <% menu_dropdown.with_item_divider if allow?(:clone) || allow?(:delete) %>
+
+  <% menu_dropdown.with_item_button_to(paths[:clone], data: { turbo_frame: '_top' }) do |menu_item| %>
+    <% menu_item.with_icon_content('clone') %>
+    <% menu_item.with_label_content(t('maglev.editor.pages.actions.clone')) %>
+  <% end if allow?(:clone) %>
+
+  <% menu_dropdown.with_item_button_to(paths[:delete], method: :delete, variant: 'danger', data: { turbo_confirm: t('maglev.editor.pages.actions.confirm_delete'), turbo_frame: '_top' }) do |menu_item| %>
+    <% menu_item.with_icon_content('delete_bin') %>
+    <% menu_item.with_label_content(t('maglev.editor.pages.actions.delete')) %>
   <% end if allow?(:delete) %>
 <% end %>

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

@@ -27,20 +27,17 @@
     <% end %>
   </div>
 
-  <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
-    <div>
-      <p class="text-sm">
+  <div class="hidden sm:flex sm:flex-1 sm:items-center <%= show_info? ? 'sm:justify-between' : 'sm:justify-center' %>">
+      <p class="text-sm <%= 'hidden' unless show_info? %>">
         <%== pagy_info(pagy, item_name: item_name) %>
-      </p>
-    </div>
+      </p>    
 
-    <div class="<%= 'hidden' if pagy.series.size == 1 %>">  
       <nav class="isolate inline-flex gap-1" aria-label="Pages">
         <%# Previous page link %>
         <% if pagy.prev %>
-          <%== a.(pagy.prev, left_arrow, aria_label: 'Previous', classes: 'relative inline-flex items-center rounded-sm px-1 py-1 text-gray-400 hover:bg-gray-100 focus:z-20 focus:outline-offset-0') %>
+          <%== a.(pagy.prev, left_arrow, aria_label: 'Previous', classes: 'relative inline-flex items-center rounded-xs px-1 py-1 text-gray-400 hover:bg-gray-100 focus:z-20 focus:outline-offset-0') %>
         <% else %>
-          <a role="link" aria-disabled="true" aria-label="Previous" class="relative inline-flex items-center rounded-sm px-1 py-1 text-gray-400 hover:bg-gray-100 focus:z-20 focus:outline-offset-0">
+          <a role="link" aria-disabled="true" aria-label="Previous" class="relative inline-flex items-center rounded-xs px-1 py-1 text-gray-400 hover:bg-gray-100 focus:z-20 focus:outline-offset-0">
             <%= left_arrow %>
           </a>
         <% end %>
@@ -48,9 +45,9 @@
         <%# Page links (series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]) %>
         <% pagy.series.each do |item| %>
           <% if item.is_a?(Integer) %>
-            <%== a.(item, classes: 'relative inline-flex items-center px-2.5 py-1 text-sm font-semibold text-gray-900 hover:bg-gray-100 focus:z-20 focus:outline-offset-0') %>
+            <%== a.(item, classes: 'relative inline-flex items-center px-2.5 py-1 text-sm font-semibold text-gray-900 rounded-xs hover:bg-gray-100 focus:z-20 focus:outline-offset-0') %>
           <% elsif item.is_a?(String) %>
-            <a role="link" aria-disabled="true" aria-current="page" class="relative z-10 inline-flex items-center bg-editor-primary px-2.5 py-1 text-sm font-semibold text-white focus:z-20"><%= item %></a>
+            <a role="link" aria-disabled="true" aria-current="page" class="relative z-10 inline-flex items-center rounded-xs bg-editor-primary px-2.5 py-1 text-sm font-semibold text-white focus:z-20"><%= item %></a>
           <% elsif item == :gap %>
             <a role="link" aria-disabled="true" class="relative inline-flex items-center px-2.5 py-1 text-sm font-semibold text-gray-700 focus:outline-offset-0">&hellip;</a>
           <% end %>
@@ -58,9 +55,9 @@
 
         <%# Next page link %>
         <% if pagy.next %>
-          <%== a.(pagy.next, right_arrow, aria_label: 'Next', classes: 'relative inline-flex items-center rounded-sm px-1 py-1 text-gray-400 hover:bg-gray-100 focus:z-20 focus:outline-offset-0') %>
+          <%== a.(pagy.next, right_arrow, aria_label: 'Next', classes: 'relative inline-flex items-center rounded-xs px-1 py-1 text-gray-400 hover:bg-gray-100 focus:z-20 focus:outline-offset-0') %>
         <% else %>
-          <a role="link" aria-disabled="true" aria-label="Next" class="relative inline-flex items-center rounded-sm px-1 py-1 text-gray-400 hover:bg-gray-100 focus:z-20 focus:outline-offset-0">
+          <a role="link" aria-disabled="true" aria-label="Next" class="relative inline-flex items-center rounded-xs px-1 py-1 text-gray-400 hover:bg-gray-100 focus:z-20 focus:outline-offset-0">
             <%= right_arrow %>
           </a>
         <% end %>

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

@@ -7,10 +7,11 @@ module Maglev
 
       attr_reader :pagy, :hidden_if_single_page
 
-      def initialize(pagy:, item_name: 'item', hidden_if_single_page: true)
+      def initialize(pagy:, item_name: 'item', hidden_if_single_page: true, show_info: true)
         @pagy = pagy
         @hidden_if_single_page = hidden_if_single_page
         @item_name = item_name
+        @show_info = show_info
       end
 
       def item_name
@@ -20,6 +21,10 @@ module Maglev
       def render?
         !(hidden_if_single_page && pagy.pages < 2)
       end
+
+      def show_info?
+        @show_info
+      end
     end
   end
 end

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

@@ -7,7 +7,7 @@
   data-transition-leave-start="translate-y-0 opacity-100"
   data-transition-leave-end="translate-y-[50%] opacity-0"
 >
-  <%= link_to paths[:add], class: button_classes, data: { turbo_frame: '_top' } do %>
+  <%= link_to paths[:add], class: button_classes, data: { turbo_frame: 'modal' } do %>
     <%= render Maglev::Uikit::IconComponent.new(name: 'add') %>
   <% end if insert_button? %>
 </div>

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

@@ -8,9 +8,9 @@
   <input type="hidden" name="active_tab" value="<%= active_tab_index %>" data-uikit-tabs-target="hiddenInput" />  
 
   <nav>
-    <ul class="flex flex-col sm:flex-row">
+    <ul class="flex flex-row">
       <% tabs.each_with_index do |tab, index| %>
-        <li>
+        <li class="shrink-0">
           <% if tab.link? %>
             <%= link_to tab.label, tab.link[:url], class: label_classes(active: tab.active?), **tab.link_html_options %>
           <% else %>
@@ -25,11 +25,14 @@
     </ul>
   </nav>
 
-  <div class="relative -mt-0.5"><div class="w-full border-gray-200 border-t-2 h-0"></div></div>
+  <% if variant == :default %>
+    <div class="relative -mt-0.5"><div class="w-full border-gray-200 border-t-2 h-0"></div></div>
+  <% end %>
 
   <% tabs.each_with_index do |tab, index| %>
+    <% next unless tab.block? %>
     <div data-uikit-tabs-target="tabContent" class="flex-1 mt-4 pt-2 pb-4 overflow-y-auto overflow-x-visible <%= 'hidden' unless tab.active? %>">
-      <%= capture(&tab.block) if tab.block? %>
+      <%= capture(&tab.block) %>
     </div>
   <% end %>
 </div>

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

@@ -7,16 +7,21 @@ module Maglev
         Tab.new(self, label: label, active: active, link: link, block: block)
       }
 
-      attr_reader :container_classes, :active_tab, :active_tab_index, :disable_inputs
+      attr_reader :container_classes, :active_tab, :active_tab_index, :disable_inputs, :variant
 
       # disable_inputs: true | false (default: false) if true, the inputs of hidden tabs will not be submitted
-      def initialize(container_classes: nil, active_tab_index: nil, disable_inputs: false)
+      def initialize(container_classes: nil, active_tab_index: nil, disable_inputs: false, variant: :default)
         @container_classes = container_classes
         @active_tab_index = active_tab_index
         @disable_inputs = disable_inputs
+        @variant = variant
       end
 
       def label_classes(...)
+        variant == :pills ? pills_label_classes(...) : default_label_classes(...)
+      end
+
+      def default_label_classes(...)
         class_variants(
           base: %(
             relative py-1 pb-0 px-4 block focus:outline-none border-b-2
@@ -29,9 +34,23 @@ module Maglev
         ).render(...)
       end
 
+      def pills_label_classes(...)
+        class_variants(
+          base: %(rounded-md px-3 py-2 text-sm),
+          variants: {
+            active: 'rounded-md bg-editor-primary/10 font-semibold text-editor-primary',
+            '!active': 'text-gray-500 hover:text-gray-700 font-medium'
+          }
+        ).render(...)
+      end
+
       def before_render
-        @active_tab = tabs.find(&:active?) || tabs[active_tab_index.to_i]
-        @active_tab.active = true
+        @active_tab = tabs.find(&:active?)
+
+        return unless !@active_tab && active_tab_index != -1
+
+        @active_tab = tabs[active_tab_index.to_i]
+        @active_tab&.active = true
       end
 
       def disable_inputs?

data/app/components/maglev/uikit/well/simple_well_component.html.erb

@@ -0,0 +1,15 @@
+<div class="bg-gray-50 sm:rounded-lg">
+  <div class="px-4 py-5 sm:p-6">
+    <h3 class="text-base font-semibold text-gray-900">
+      <%= title %>
+    </h3>
+    <div class="mt-2 max-w-xl text-sm text-gray-500 space-y-2">
+      <%= description %>
+    </div>
+    <% if action? %>
+      <div class="mt-5">
+        <%= action %>
+      </div>
+    <% end %>    
+  </div>
+</div>

data/app/components/maglev/uikit/well/simple_well_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    module Well
+      class SimpleWellComponent < ViewComponent::Base
+        renders_one :title
+        renders_one :description
+        renders_one :action
+      end
+    end
+  end
+end

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

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Editor
+    module PreviewUrlsConcern
+      extend ActiveSupport::Concern
+
+      included do
+        helper_method :current_maglev_page_urls, :maglev_page_live_url, :maglev_page_preview_url
+      end
+
+      private
+
+      def current_maglev_page_urls
+        {
+          path: maglev_services.get_page_fullpath.call(page: current_maglev_page, preview_mode: false,
+                                                       locale: content_locale),
+          preview: maglev_page_preview_url(current_maglev_page),
+          live: maglev_page_live_url(current_maglev_page)
+        }
+      end
+
+      def maglev_page_live_url(page)
+        maglev_services.get_page_fullpath.call(page: page, preview_mode: false, locale: content_locale)
+      end
+
+      def maglev_page_preview_url(page)
+        maglev_services.get_page_fullpath.call(page: page, preview_mode: true, locale: content_locale)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Editor
+    module TurboConcern
+      extend ActiveSupport::Concern
+
+      included do
+        helper_method :maglev_disable_turbo_cache?
+      end
+
+      private
+
+      def maglev_disable_turbo_cache
+        @maglev_disable_turbo_cache = true
+      end
+
+      def maglev_disable_turbo_cache?
+        !!@maglev_disable_turbo_cache
+      end
+
+      def ensure_turbo_frame_request
+        return if turbo_frame_request?
+
+        redirect_to editor_root_path
+      end
+    end
+  end
+end

data/app/controllers/concerns/maglev/flash_i18n_concern.rb

@@ -5,6 +5,7 @@ module Maglev
     private
 
     def flash_t(type, **opts)
+      controller_name = controller_path.gsub('maglev/editor/', '').gsub('/', '.')
       t("maglev.editor.flash.#{controller_name}.#{action_name}.#{type}", **opts)
     end
   end