maglevcms 2.0.0 → 3.0.0.beta1

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

@@ -0,0 +1,28 @@
+<div class="flex-1 overflow-y-auto">
+  <% if @pages.empty? %>
+    <p class="text-center mt-8"><%= t('maglev.editor.pages.list.empty') %></p>
+  <% else %>
+    <% @pages.each do |page| %>
+      <div class="flex items-center pl-4 pr-2 hover:bg-gray-50 transition-colors duration-200">
+        <%= link_to editor_real_root_path(maglev_editing_route_context(page: page)), class: 'flex items-center text-gray-800 overflow-hidden w-full py-3.5 gap-2', data: { turbo_frame: '_top', **maglev_page_preview_reload_data } do %>
+          <%= maglev_page_icon(page) %>
+          <span class="truncate">
+            <%= page.title.presence || page.default_title %>
+          </span>
+        <% end %>
+        <div class="ml-auto pr-2 relative">
+          <%= render Maglev::Uikit::PageActionsDropdownComponent.new(
+            paths: {
+              edit: edit_editor_page_path(page.id, **query_params(from_list: true), **maglev_editing_route_context),
+              preview: maglev_page_preview_url(page),
+              clone: editor_page_clone_path(page.id, maglev_editing_route_context),
+              delete: editor_page_path(page.id, **query_params, **maglev_editing_route_context)
+            },
+            live_url: maglev_page_live_url(page),
+            without_actions: page.index? ? [:delete] : []
+          ) %>
+        </div>
+      </div>
+    <% end %>
+  <% end %>
+</div>  

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

@@ -0,0 +1,35 @@
+<div 
+  class="absolute top-16 left-16 right-0 bottom-0 overflow-hidden group"
+  data-controller="editor-page-preview"
+  data-action="
+    uikit-device-toggler:change@window->editor-page-preview#changeDevice 
+    client:ready@window->editor-page-preview#clientReady
+    client:ready@window->editor-preview-notification-center#clientReady
+    turbo:load@window->editor-page-preview#detectUrlChange
+    dispatcher:page-preview:reload@window->editor-page-preview#startLoading
+    dispatcher:page-preview:remove-empty-message@window->editor-page-preview#removeEmptyMessage
+  "
+>
+  <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"  
+    data-editor-page-preview-target="iframe-wrapper"
+  >
+    <iframe 
+      src="<%= current_maglev_page_urls[:preview] %>" 
+      class="bg-white w-full h-full mx-auto transition-discrete transition-all duration-100 ease-in-out group-data-[device=mobile]/device:w-[375px] group-data-[device=tablet]/device:w-[1024px]" 
+      data-editor-page-preview-target="iframe"
+      data-editor-preview-notification-center-target="iframe"
+      data-editor-preview-notification-center-primary-color-param="<%= maglev_primary_hex_color %>"
+      data-editor-preview-notification-center-sticky-section-ids-param="<%=current_maglev_sections.select(&:sticky?).map(&:id).to_json %>"
+      data-action="load->editor-preview-notification-center#sendConfig"></iframe>
+  </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">
+      <%= t('maglev.editor.page_preview.loading') %>
+    </p>
+  </div>
+
+  <%= render 'maglev/editor/pages/preview_empty_message' %>
+</div>

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

@@ -0,0 +1,14 @@
+<div class="absolute inset-0 flex-col justify-center items-center hidden group-[.is-empty]:flex bg-gray-50">
+  <h2 class="text-center text-2xl font-bold">
+    <%= t('maglev.editor.page_preview.empty.title') %>
+  </h2>
+  <div class="mt-4 text-gray-600 max-w-md mx-auto leading-9">
+    <% new_section_link = capture do %>
+      <%= link_to new_editor_section_path(**maglev_editing_route_context), class: 'text-editor-primary inline-block relative top-1.5' do %>
+        <%= render Maglev::Uikit::IconComponent.new(name: 'stack', size: '1.5rem') %>
+      <% end %>
+    <% end %>
+
+    <%= t('maglev.editor.page_preview.empty.message', button: new_section_link).html_safe %>    
+  </div>
+</div>

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

@@ -0,0 +1,32 @@
+<%= render Maglev::Uikit::PageLayoutComponent.new(back_path: maglev_page_back_path) do |page_layout| %>
+  <% page_layout.with_title_content maglev_edit_page_title(@page) %>
+  <% page_layout.with_notification_content maglev_flash_message %>
+
+  <%= form_for @page, 
+    url: editor_page_path(@page, maglev_editing_route_context), 
+    method: :put,
+    html: { 
+      class: 'flex flex-col flex-1 overflow-y-hidden', 
+      data: { turbo_frame: '_top' } 
+    } do |f| 
+  %>
+    <%= hidden_field_tag :from_list, params[:from_list] %>
+    <%= hidden_field_tag :q, params[:q] %>
+
+    <%= f.hidden_field :lock_version %>
+    
+    <%= render 'maglev/editor/pages/form/tabs', f: f %>
+  
+    <% content_for :submit_button do %>
+      <%= f.submit t('maglev.editor.pages.edit.submit_button.default'), 
+        form: f.id,
+        class: maglev_button_classes(color: :primary, size: :big),
+        data: { turbo_submits_with: t('maglev.editor.pages.edit.submit_button.in_progress') }
+      %>
+    <% end %>
+  <% end %>
+
+  <% page_layout.with_footer do %>
+    <%= yield :submit_button %>
+  <% end %>
+<% end %>

data/app/views/maglev/editor/pages/form/_main.html.erb

@@ -0,0 +1,7 @@
+<div class="grid grid-cols-1 gap-4">
+  <%= f.text_field :title %>
+
+  <%= f.text_field :path unless f.object.index? %>
+
+  <%= f.check_box :visible, placeholder: t('maglev.editor.placeholders.pages.visible_placeholder') %>
+</div>

data/app/views/maglev/editor/pages/form/_seo.html.erb

@@ -0,0 +1,11 @@
+<div class="grid grid-cols-1 gap-4">
+  <%= f.textarea :seo_title, max_length: 60, rows: 2 %>
+
+  <%= f.textarea :meta_description, max_length: 155, rows: 5 %>
+
+  <%= f.textarea :og_title, max_length: 60, rows: 2 %>
+
+  <%= f.textarea :og_description, max_length: 155, rows: 5 %>
+
+  <%= f.image_field :og_image_url, search_path: ->(context) { editor_assets_path(context) } %>
+</div>

data/app/views/maglev/editor/pages/form/_tabs.html.erb

@@ -0,0 +1,8 @@
+<%= render Maglev::Uikit::TabsComponent.new(container_classes: 'w-full h-full flex flex-col', active_tab_index: params[:active_tab]) do |tabs| %>
+  <% tabs.with_tab(label: t('maglev.editor.pages.form.tabs.main')) do %>
+    <%= render 'maglev/editor/pages/form/main', f: f %>
+  <% end %>
+  <% tabs.with_tab(label: t('maglev.editor.pages.form.tabs.seo')) do %>
+    <%= render 'maglev/editor/pages/form/seo', f: f %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,23 @@
+<%= render Maglev::Uikit::PageLayoutComponent.new(back_path: editor_real_root_path(maglev_editing_route_context)) do |page_layout| %>
+  <% page_layout.with_title_content t('maglev.editor.pages.list.title') %>
+  <% page_layout.with_description_content t('maglev.editor.pages.list.sub_title') %>
+  <% page_layout.with_notification_content maglev_flash_message %>
+
+  <div class="space-y-5 flex flex-col h-full">
+    <%= render(Maglev::Uikit::Form::SearchFormComponent.new(
+      name: 'q', 
+      value: params[:q], 
+      search_path: editor_pages_path, 
+      options: {
+        placeholder: t('maglev.editor.pages.list.search_placeholder'),
+        data: { turbo_action: 'replace' }
+      }
+    )) %>
+
+    <%= render 'list' %>
+  </div>
+
+  <% page_layout.with_footer do %>
+    <%= link_to t('maglev.editor.pages.list.new_button'), new_editor_page_path(**maglev_editing_route_context, **query_params), class: maglev_button_classes(size: :big), data: { turbo_frame: '_top' } %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,28 @@
+<%= render Maglev::Uikit::PageLayoutComponent.new(back_path: maglev_page_back_path) do |page_layout| %>
+  <% page_layout.with_title_content t('maglev.editor.pages.new.title') %>
+  <% page_layout.with_notification_content maglev_flash_message %>
+
+  <%= form_for @page, 
+    url: editor_pages_path(maglev_editing_route_context),
+    html: { 
+      class: 'flex flex-col flex-1 overflow-y-hidden', 
+      data: { turbo_frame: '_top' } 
+    } do |f| 
+  %>
+    <%= f.hidden_field :lock_version %>
+
+    <%= render 'maglev/editor/pages/form/tabs', f: f %>
+  
+    <% content_for :submit_button do %>
+      <%= f.submit t('maglev.editor.pages.new.submit_button.default'), 
+        form: f.id,
+        class: maglev_button_classes(color: :primary, size: :big),
+        data: { turbo_submits_with: t('maglev.editor.pages.new.submit_button.in_progress') }
+      %>
+    <% end %>
+  <% end %>
+
+  <% page_layout.with_footer do %>
+    <%= yield :submit_button %>
+  <% end %>
+<% end %>

data/app/views/maglev/editor/publication/create.turbo_stream.erb

@@ -0,0 +1 @@
+<%= turbo_stream.console_log 'Publication created' %>

data/app/views/maglev/editor/section_blocks/_form.html.erb

@@ -0,0 +1,15 @@
+<%= hidden_field_tag 'lock_version', @section_block.lock_version.presence || 0, data: { editor_section_form_target: 'lockVersion' } %>
+
+<% if @section_block.definition.advanced_settings.blank? %>
+  <%= section_block_form_settings(@section, @section_block) %>
+<% else %>
+  <%= render Maglev::Uikit::TabsComponent.new(container_classes: 'w-full h-full flex flex-col') do |tabs| %>
+    <% tabs.with_tab(label: t('maglev.editor.section_blocks.edit.tabs.main')) do %>
+      <%= section_block_form_settings(@section, @section_block) %>
+    <% end %>
+
+    <% tabs.with_tab(label: t('maglev.editor.section_blocks.edit.tabs.advanced')) do %>
+      <%= section_block_form_settings(@section, @section_block, advanced: true) %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/maglev/editor/section_blocks/_new.html.erb

@@ -0,0 +1,21 @@
+<%= form_with url: editor_section_blocks_path(@section, **maglev_editing_route_context), 
+  data: { 
+    turbo_frame: '_top', 
+    controller: 'auto-save',
+    action: 'turbo:submit-end->editor-preview-notification-center#addSectionBlock',
+    'editor-preview-notification-center-section-id-param': @section.id,
+  } do |f| %>
+  <%= f.hidden_field :parent_id, value: parent_id if parent_id %>
+  <%= f.hidden_field :lock_version, value: @section.lock_version %>
+
+  <div class="space-y-4">
+    <% blocks.each do |block_definition| %>
+      <label class="block cursor-pointer transition duration-150 ease-in-out transform hover:-translate-y-1">
+        <%= f.radio_button :block_type, block_definition.type, class: 'sr-only peer' %>
+        <%= render Maglev::Uikit::List::ListItemComponent.new do |item| %>
+          <% item.with_title_content block_definition.human_name %>
+        <% end %>
+      </label>
+    <% end %>
+  </div>
+<% end %>

data/app/views/maglev/editor/section_blocks/edit.html.erb

@@ -0,0 +1,28 @@
+<%= render Maglev::Uikit::PageLayoutComponent.new(expanded: true, back_path: editor_real_root_path(maglev_editing_route_context)) do |page_layout| %>
+  <% page_layout.with_title do %> 
+    <span class="text-gray-800 font-extrabold">#<%= @section_block.position_in_parent + 1 %></span>
+    &dash;
+    <%= @section_block.name %>
+  <% end %>
+  <% page_layout.with_notification_content maglev_flash_message %>
+
+  <% page_layout.with_back_link(path: editor_section_blocks_path(@section, **maglev_editing_route_context)).with_content(@section.blocks_label) %>
+
+  <%= form_with url: editor_section_block_path(@section, @section_block, **maglev_editing_route_context), method: :put, data: { 
+    controller: 'editor-section-form', 
+    'editor-section-form-section-id-value': @section.id,
+    'editor-section-form-section-block-id-value': @section_block.id,
+    'editor-section-form-section-lock-version-value': @section.lock_version,
+    action: %(
+      editor-setting:change->editor-section-form#onSettingChange
+      editor-section-form:connected@window->editor-preview-notification-center#checkSectionLockVersion
+      editor-section-form:connected@window->editor-preview-notification-center#pingSectionBlock
+      editor-section-form:updateSetting->editor-preview-notification-center#updateSetting
+      editor-section-form:updateSection->editor-preview-notification-center#updateSection
+      client:setting:updated@window->editor-section-form#afterSettingUpdate
+      dispatcher:section-block-#{@section_block.id}:persisted@window->editor-section-form#onPersist
+    )
+  } do %>
+    <%= render 'maglev/editor/section_blocks/form' %>
+  <% end %>
+<% end %>

data/app/views/maglev/editor/section_blocks/index/_list.html.erb

@@ -0,0 +1,41 @@
+<% if @section.blocks.any? %>
+  <%= render Maglev::Uikit::List::ListComponent.new(
+    sort_form: { 
+      path: sort_editor_section_blocks_path(@section, lock_version: @section.lock_version, **maglev_editing_route_context), 
+      data: { 
+        turbo_frame: '_top',
+        action: 'sortable:drag-stopped@window->editor-preview-notification-center#moveSectionBlocks', 
+        'editor-preview-notification-center-section-id-param': @section.id,
+      } 
+    }
+  ) do |component| %>
+    <% @section.blocks.each do |section_block| %>
+      <% component.with_item_content(
+        id: section_block.id, 
+        link: { 
+          url: edit_editor_section_block_path(@section, section_block, **maglev_editing_route_context), 
+          data: { turbo_frame: '_top' } 
+        }) do |item| %>
+        <% item.with_handle %>
+
+        <% if section_block.label? %>
+          <% item.with_title_content(section_block.label) %>
+        <% else %>
+          <% item.with_title_content(section_block.name) %>
+        <% end %>
+
+        <% item.with_image do %>
+          <%= image_tag section_block.image, class: item.image_classes, data: { controller: 'broken-image' } %>
+        <% end if section_block.image? %>
+
+        <% item.with_action do %>
+          <%= delete_section_block_button(@section, section_block, maglev_editing_route_context) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% else %>
+  <p class="text-center mt-8 text-gray-800">
+    <%= t('maglev.editor.section_blocks.index.empty') %>
+  </p>
+<% end %>

data/app/views/maglev/editor/section_blocks/index/_tree.html.erb

@@ -0,0 +1,56 @@
+<%= render Maglev::Uikit::List::ListComponent.new(
+  sort_form: { 
+    path: sort_editor_section_blocks_path(@section, parent_id: parent_id, lock_version: @section.lock_version, **maglev_editing_route_context), 
+    data: { turbo_frame: '_top' } 
+  },
+  sortable_scope: parent_id || 'root',
+  html_options: {
+    data: {
+      action: 'sortable:drag-stopped@window->editor-preview-notification-center#moveSectionBlocks:self', 
+      'editor-preview-notification-center-section-id-param': @section.id,
+    }
+  }
+) do |component| %>
+  <% blocks.each do |section_block| %>
+    <% component.with_item_content(
+      id: section_block.id,
+      options: { sortable_scope: parent_id || 'root' },
+      link: { 
+        url: edit_editor_section_block_path(@section, section_block, **maglev_editing_route_context), 
+        data: { turbo_frame: '_top' } 
+      }) do |item| %>
+      <% item.with_handle %>
+
+      <% if section_block.label? %>
+        <% item.with_title_content(section_block.label) %>
+      <% else %>
+        <% item.with_title_content(section_block.name) %>
+      <% end %>
+
+      <% item.with_image do %>
+        <%= image_tag section_block.image, class: item.image_classes, data: { controller: 'broken-image' } %>
+      <% end if section_block.image? %>
+
+      <% item.with_action do %>
+        <%= add_child_section_block_button(@section, section_block) %>
+        
+        <%= delete_section_block_button(@section, section_block, maglev_editing_route_context) %>        
+      <% end %>
+
+      <% if @section.child_blocks_of(section_block.id).any? %>
+        <div class="ml-5 mt-3">
+          <%= render 'maglev/editor/section_blocks/index/tree', 
+            blocks: @section.child_blocks_of(section_block.id), 
+            parent_id: section_block.id
+          %>
+        </div>
+      <% end %>
+    <% end %>    
+  <% end %>
+<% end %>
+
+<% if blocks.blank? && parent_id.blank? %>
+  <p class="text-center mt-20 text-gray-800">
+    <%= t('maglev.editor.section_blocks.index.empty') %>
+  </p>
+<% end %>

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

@@ -0,0 +1,20 @@
+<%= render Maglev::Uikit::PageLayoutComponent.new(expanded: true, back_path: editor_real_root_path(maglev_editing_route_context)) do |page_layout| %>
+  <% page_layout.with_title_content @section.blocks_label %>
+  <% page_layout.with_notification_content maglev_flash_message %>
+
+  <% page_layout.with_back_link(path: edit_editor_section_path(@section, maglev_editing_route_context)).with_content(@section.type_name) %>
+
+  <% if @section.definition.blocks_tree? && @section.definition.accepts_blocks? %>
+    <%= render 'maglev/editor/section_blocks/index/tree', blocks: @section.root_blocks, parent_id: nil %>
+  <% else %>
+    <%= render 'maglev/editor/section_blocks/index/list' %>
+  <% end %>
+
+  <% page_layout.with_footer do %>
+    <% if @section.definition.blocks_tree? && @section.definition.accepts_blocks? %>
+      <%= add_section_block_button(@section, @section.root_block_definitions) %>
+    <% else %>
+      <%= add_section_block_button(@section, @section.block_definitions) %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/maglev/editor/section_blocks/update.turbo_stream.erb

@@ -0,0 +1,5 @@
+<%= turbo_stream.update 'page-layout-notification', method: 'morph' do %>
+  <%= render Maglev::Uikit::BadgeComponent.new(color: :green, icon_name: 'checkbox_circle', disappear_after: 3.seconds).with_content(flash.now[:notice]) %>
+<% end %>
+
+<%= turbo_stream.dispatch_event "section-block-#{@section_block.id}:persisted", payload: { lockVersion: @section_block.lock_version }.to_json %>

data/app/views/maglev/editor/sections/_form.html.erb

@@ -0,0 +1,21 @@
+<%= hidden_field_tag 'lock_version', @section.lock_version.presence || 0, data: { editor_section_form_target: 'lockVersion' } %>
+
+<% if @section.definition.blocks.none? && !@section.definition.advanced_settings.any? %>
+  <%= section_form_settings(@section) %>
+<% else %>
+  <%= render Maglev::Uikit::TabsComponent.new(container_classes: 'w-full h-full flex flex-col') do |tabs| %>
+    <% tabs.with_tab(label: t('maglev.editor.sections.edit.tabs.main')) do %>
+      <%= section_form_settings(@section) %>
+    <% end %>
+
+    <% tabs.with_tab(label: t('maglev.editor.sections.edit.tabs.advanced')) do %>
+      <%= section_form_settings(@section, advanced: true) %>
+    <% end if @section.definition.advanced_settings.any? %>
+
+    <% tabs.with_tab(
+        label: @section.blocks_label, 
+        link: { url: editor_section_blocks_path(@section, maglev_editing_route_context), html_options: { data: { turbo_frame: '_top' } } }
+      ) unless @section.definition.blocks.none?
+    %>
+  <% end %>
+<% end %>

data/app/views/maglev/editor/sections/_list.html.erb

@@ -0,0 +1,50 @@
+<div class="py-6">
+  <% if current_maglev_sections.any? %>
+    <%= render Maglev::Uikit::List::ListComponent.new(
+        sort_form: { 
+          path: sort_editor_sections_path(lock_version: current_maglev_page.lock_version, **maglev_editing_route_context), 
+          data: { 
+            turbo_frame: '_top',
+            action: 'sortable:drag-stopped@window->editor-preview-notification-center#moveSection',            
+          } 
+        }) do |component| %>
+      <% component.with_item_insert_button(link: { url: new_editor_section_path(position: 0, **maglev_editing_route_context), data: { turbo_frame: '_top' } })%>
+      
+      <% current_maglev_sections.each_with_index do |section, index| %>
+        <% component.with_item_content(id: section.id, link: { url: edit_editor_section_path(section.id, maglev_editing_route_context), data: { turbo_frame: '_top' } }) do |item| %>
+          <% item.with_handle %>
+
+          <% if section.label? %>
+            <% item.with_pre_title_content(section.type_name) %>
+            <% item.with_title_content(section.label) %>
+          <% else %>
+            <% item.with_title_content(section.type_name) %>
+          <% end %>
+
+          <% item.with_action do %>
+            <%= button_to editor_section_path(section.id, maglev_editing_route_context), 
+              method: :delete, 
+              class: maglev_icon_button_classes, 
+              data: { 
+                turbo_confirm: t('maglev.editor.sections.index.confirm_delete')
+              }, 
+              form: { 
+                data: {
+                  action: 'turbo:submit-end->editor-preview-notification-center#deleteSection',
+                  'editor-preview-notification-center-section-id-param': section.id
+                }
+              } do %>
+              <%= render Maglev::Uikit::IconComponent.new(name: "delete_bin", size: "1.15rem") %>
+            <% end %>
+          <% end %>
+        <% end %>
+        
+        <% component.with_item_insert_button(link: { url: new_editor_section_path(position: index + 1, **maglev_editing_route_context), data: { turbo_frame: '_top' } }) %> 
+      <% end %>
+    <% end %>
+  <% else %>
+    <p class="text-center mt-8 text-gray-800">
+      <%= t('maglev.editor.sections.index.empty') %>
+    </p>
+  <% end %>
+</div>

data/app/views/maglev/editor/sections/_theme_list.html.erb

@@ -0,0 +1,32 @@
+<%= render Maglev::Uikit::Collapsible::CollapsibleComponent.new do |collapsible| %>
+  <% maglev_theme.section_categories.each do |category| %>
+    <% sections = @grouped_sections[category.id] || [] %>
+
+    <% collapsible.with_item do |item| %>
+      <% item.with_title do %>
+        <span class="capitalize-first"><%= category.human_name %></span>
+        <span class="ml-2 px-3 bg-white/25 text-xs rounded-full"><%= sections.count %></span>
+      <% end %>
+      
+      <% if sections.any? %>
+        <div class="space-y-4 py-2">
+          <% sections.each do |section| %>
+            <label class="block cursor-pointer transition duration-150 ease-in-out transform hover:-translate-y-1">
+              <%= f.radio_button :section_type, section.id, class: 'sr-only peer' %>
+              <%= render Maglev::Uikit::List::ListItemComponent.new do |item| %>
+                <% item.with_big_image do %>
+                  <%= image_tag services.fetch_section_screenshot_url.call(section: section), class: item.big_image_classes, data: { controller: 'broken-image' } %>
+                <% end %>
+                <% item.with_title_content(section.human_name) %>
+              <% end %>
+            </label>
+          <% end %>
+        </div>
+      <% else %>
+        <p class="text-center pt-2 pb-6">
+          <%= t('maglev.editor.new.empty_category') %>
+        </p>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/maglev/editor/sections/_toolbar_list.html.erb

@@ -0,0 +1,17 @@
+<div class="
+  absolute inset-0 top-16 left-16 group-data-[expanded-page-layout]/page-layout:left-104 bg-transparent z-5 pointer-events-none mx-auto 
+  group-data-[device=mobile]/device:w-[calc(375px*var(--page-preview-scale-ratio))] group-data-[device=tablet]/device:w-[calc(1024px*var(--page-preview-scale-ratio))]
+  ">
+  <% current_maglev_sections.each_with_index do |section, index| %>
+    <%= render Maglev::Uikit::SectionToolbar::SectionToolbarComponent.new(
+      id: section.id, 
+      label: section.type_name, 
+      paths: { 
+        edit: edit_editor_section_path(section.id, **maglev_editing_route_context), 
+        delete: editor_section_path(section.id, **maglev_editing_route_context), 
+        add: new_editor_section_path(position: index + 1, **maglev_editing_route_context)
+      }, 
+      options: {}) 
+    %>
+  <% end %>
+</div>

data/app/views/maglev/editor/sections/edit.html.erb

@@ -0,0 +1,24 @@
+<%= render Maglev::Uikit::PageLayoutComponent.new(expanded: true, back_path: editor_real_root_path(maglev_editing_route_context)) do |page_layout| %>
+  <% page_layout.with_title_content @section.type_name %>
+  <% page_layout.with_notification_content maglev_flash_message %>
+
+  <% page_layout.with_back_link(path: editor_sections_path(maglev_editing_route_context)).with_content(t('maglev.editor.sections.breadcrumbs.sections')) %>    
+
+  <%= form_with url: editor_section_path(@section, maglev_editing_route_context), method: :put, data: { 
+      controller: 'editor-section-form', 
+      'editor-section-form-section-id-value': @section.id,
+      'editor-section-form-section-lock-version-value': @section.lock_version,
+      action: %(
+        editor-setting:change->editor-section-form#onSettingChange
+        editor-section-form:connected@window->editor-preview-notification-center#checkSectionLockVersion
+        editor-section-form:connected@window->editor-preview-notification-center#pingSection
+        editor-section-form:updateSetting->editor-preview-notification-center#updateSetting
+        editor-section-form:updateSection->editor-preview-notification-center#updateSection
+        client:setting:updated@window->editor-section-form#afterSettingUpdate
+        dispatcher:section-#{@section.id}:persisted@window->editor-section-form#onPersist
+      )
+    } do 
+  %>    
+    <%= render 'maglev/editor/sections/form' %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,11 @@
+<%= render Maglev::Uikit::PageLayoutComponent.new(expanded: true, back_path: editor_real_root_path(maglev_editing_route_context)) do |page_layout| %>
+  <% page_layout.with_title_content t('maglev.editor.sections.index.title') %>
+  <% page_layout.with_description_content t('maglev.editor.sections.index.sub_title') %>
+  <% page_layout.with_notification_content maglev_flash_message %>
+
+  <%= render 'list' %>
+
+  <% page_layout.with_footer do %>
+    <%= link_to t('maglev.editor.sections.index.add_button'), new_editor_section_path(maglev_editing_route_context), class: maglev_button_classes(size: :big), data: { turbo_frame: '_top' } %>
+  <% end %>
+<% end %>

data/app/views/maglev/editor/sections/new.html.erb

@@ -0,0 +1,20 @@
+<%= render Maglev::Uikit::PageLayoutComponent.new(expanded: true, back_path: editor_real_root_path(maglev_editing_route_context)) do |page_layout| %>
+  <% page_layout.with_title_content t('maglev.editor.sections.new.title') %>
+  <% page_layout.with_notification_content maglev_flash_message %>
+
+  <% page_layout.with_back_link(path: editor_sections_path(maglev_editing_route_context)).with_content(t('maglev.editor.sections.breadcrumbs.sections')) %>
+
+  <%= form_with url: editor_sections_path(maglev_editing_route_context), data: { 
+      turbo_frame: '_top',
+      controller: 'auto-save dispatcher',
+      action: %(
+        turbo:submit-end->editor-preview-notification-center#addSection
+        turbo:submit-end->dispatcher#trigger
+      ),
+      'dispatcher-event-name-value': 'page-preview:remove-empty-message'
+    } do |f| %>
+    <%= f.hidden_field :position, value: @position %>
+
+    <%= render 'theme_list', f: f %>
+  <% end %>
+<% end %>

data/app/views/maglev/editor/sections/update.turbo_stream.erb

@@ -0,0 +1,5 @@
+<%= turbo_stream.update 'page-layout-notification', method: 'morph' do %>
+  <%= render Maglev::Uikit::BadgeComponent.new(color: :green, icon_name: 'checkbox_circle', disappear_after: 3.seconds).with_content(flash.now[:notice]) %>
+<% end %>
+
+<%= turbo_stream.dispatch_event "section-#{@section.id}:persisted", payload: { lockVersion: @section.lock_version }.to_json %>

data/app/views/maglev/editor/shared/_button_label.html.erb

@@ -0,0 +1,18 @@
+<span class="group-[.is-pending]/form:hidden group-[.is-success]/form:hidden group-[.is-error]/form:hidden">
+  <%= label %>
+</span>
+
+<span class="hidden group-[.is-pending]/form:inline-flex gap-x-2 items-center">
+  <%= pending_label %>
+  <%= render Maglev::Uikit::IconComponent.new(name: 'spinner', size: '1rem', class_names: 'animate-spin') %>
+</span>
+
+<span class="hidden group-[.is-success]/form:inline-flex gap-x-2 items-center">
+  <%= success_label %>
+  <%= render Maglev::Uikit::IconComponent.new(name: 'check', size: '1rem') %>
+</span>
+
+<span class="hidden group-[.is-error]/form:inline-flex gap-x-2 items-center">
+  <%= error_label %>
+  <%= render Maglev::Uikit::IconComponent.new(name: 'error_warning', size: '1rem') %>
+</span>

data/app/views/maglev/editor/shared/errors/not_authorized_error.turbo_stream.erb

@@ -0,0 +1,17 @@
+<%= turbo_stream.update 'modal' do %>
+  <%= render Maglev::Uikit::ModalComponent.new(id: 'stale-object-error', open: true) do |modal| %>
+    <% modal.with_title_content t('maglev.editor.error_modals.not_authorized.title') %>
+    
+    <div class="prose">
+      <%= t('maglev.editor.error_modals.not_authorized.message').html_safe %>
+    </div>
+
+    <% modal.with_footer do %>
+      <%= button_tag t('maglev.editor.error_modals.not_authorized.button'), 
+        type: 'button', 
+        class: maglev_button_classes,
+        data: { action: 'click->uikit-modal#close' } 
+      %>
+    <% end %>
+  <% end %>
+<% end %>