spree_page_builder 5.3.0.rc1

data/app/views/spree/admin/page_blocks/forms/_heading.html.erb

@@ -0,0 +1,28 @@
+<div class="trix-container">
+  <%= f.rich_text_area :text, data: {
+    action: 'trix-change->auto-submit#submit'
+  }, class: 'mb-6' %>
+</div>
+
+<% content_for(:design_tab) do %>
+  <div class="form-group">
+    <%= f.label :preferred_size %>
+    <%= f.select :preferred_size, options_for_select(['small', 'medium', 'large'], @page_block.preferred_size), {  }, { class: 'form-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <% unless @page_block.section.is_a? Spree::PageSections::Video %>
+    <div class="form-group">
+      <%= f.label :preferred_text_alignment %>
+      <%= f.select :preferred_text_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_text_alignment), {}, { class: 'form-select', data: {  action: 'auto-submit#submit' } } %>
+    </div>
+
+    <div class="form-group">
+      <%= f.label :preferred_container_alignment %>
+      <%= f.select :preferred_container_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_container_alignment), {}, { class: 'form-select', data: {  action: 'auto-submit#submit' } } %>
+    </div>
+  <% end %>
+
+  <%= render 'spree/admin/page_builder/labeled_range_input',
+    f: f, field: :preferred_width_desktop, min: 1, max: 100, unit: '%', _label: 'Max heading width on desktop'
+  %>
+<% end %>

data/app/views/spree/admin/page_blocks/forms/_image.html.erb

@@ -0,0 +1,10 @@
+<%= f.spree_file_field :asset, width: 512, height: 512, auto_submit: true %>
+<%= f.spree_text_field :preferred_image_alt, label: Spree.t(:alt_text), data: { action: 'auto-submit#submit' } %>
+<% content_for(:design_tab) do %>
+  <%= render 'spree/admin/page_builder/labeled_range_input',
+    f: f, field: :preferred_height, min: 1, max: 1024, unit: 'px', _label: 'Max image height on desktop'
+  %>
+  <%= render 'spree/admin/page_builder/labeled_range_input',
+    f: f, field: :preferred_mobile_height, min: 1, max: 512, unit: 'px', _label: 'Max image height on mobile'
+  %>
+<% end %>

data/app/views/spree/admin/page_blocks/forms/_link.html.erb

@@ -0,0 +1,19 @@
+<%= f.fields_for :link do |lf| %>
+  <div class="form-group">
+    <%= lf.label :linkable_type, 'Link' %>
+    <%= lf.select :linkable_type, @page_block.allowed_linkable_types, { include_blank: false }, { class: 'form-select mb-6', data: { action: 'auto-submit#submit' } } %>
+    <div id="linkable_type_dropdown">
+      <%= render 'spree/admin/page_links/linkable_type_dropdown', page_link: lf.object, form_name: 'page_block[link_attributes]' %>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <%= lf.label :label %>
+    <%= lf.text_field :label, class: 'form-input', data: { action: 'blur->auto-submit#submit' }, placeholder: 'eg. About us', required: true %>
+  </div>
+
+  <div class="custom-control form-checkbox mb-6">
+    <%= lf.check_box :open_in_new_tab, class: 'custom-control-input', data: { action: 'auto-submit#submit' } %>
+    <%= lf.label :open_in_new_tab, class: 'custom-control-label' %>
+  </div>
+<% end %>

data/app/views/spree/admin/page_blocks/forms/_mega_nav.html.erb

@@ -0,0 +1,14 @@
+<h5 class="font-bold"><%= Spree.t(:title_link) %></h5>
+<%= render 'spree/admin/page_blocks/forms/link', f: f %>
+
+<%= render 'spree/admin/page_links/list', parent: @page_block, show_add_link_button: true %>
+
+<h5 class="font-bold"><%= Spree.t(:featured_taxon) %></h5>
+<div class="form-group">
+  <%= tom_select_tag 'page_block[preferred_featured_taxon_id]',
+    active_option: @page_block.preferred_featured_taxon_id,
+    class: 'w-full',
+    url: spree.admin_taxons_select_options_path(format: :json),
+    select_data: { action: 'auto-submit#submit' },
+    include_blank: "" %>
+</div>

data/app/views/spree/admin/page_blocks/forms/_mega_nav_with_subcategories.html.erb

@@ -0,0 +1,9 @@
+<h5 class="font-bold"><%= Spree.t(:category) %></h5>
+<div class="form-group">
+  <%= tom_select_tag 'page_block[preferred_taxon_id]', active_option: @page_block.preferred_taxon_id, class: 'w-full', url: spree.admin_taxons_select_options_path(format: :json), select_data: { action: 'auto-submit#submit' } %>
+</div>
+
+<h5 class="font-bold"><%= Spree.t(:featured_taxon) %></h5>
+<div class="form-group">
+  <%= tom_select_tag 'page_block[preferred_featured_taxon_id]', active_option: @page_block.preferred_featured_taxon_id, class: 'w-full', url: spree.admin_taxons_select_options_path(format: :json), select_data: { action: 'auto-submit#submit' } %>
+</div>

data/app/views/spree/admin/page_blocks/forms/_metafields.html.erb

@@ -0,0 +1,35 @@
+<div class="form-group">
+  <div class="mb-4">
+    <label class="form-label"><%= Spree.t(:metafields) %></label>
+    <div class="p-1 border rounded-lg  flex flex-col gap-1 mb-6"
+         data-controller="sortable-auto-submit"
+         data-sortable-auto-submit-handle-value=".handle"
+    >
+      <%= hidden_field_tag "#{f.object_name}[preferred_metafield_definition_ids][]", "" %>
+      <% selected_keys = f.object.preferred_metafield_definition_ids.map(&:to_s) %>
+      <% sorted_definitions = f.object.available_metafield_definitions.sort_by { |definition| selected_keys.index(definition.id.to_s) || selected_keys.length } %>
+      <% sorted_definitions.each do |definition| %>
+        <div class="rounded-md hover:bg-gray-25 pl-4 pr-1 py-1 flex items-center justify-between"
+             id="<%= spree_dom_id(definition) %>"
+        >
+          <div class="custom-control form-checkbox grow flex">
+            <input type="checkbox"
+                  class="custom-control-input"
+                  name="<%= "#{f.object_name}[preferred_metafield_definition_ids][]" %>"
+                  id="<%= "#{f.object_name}_preferred_metafield_definition_ids_#{definition.id}" %>"
+                  value="<%= definition.id %>"
+                  data-action="change->auto-submit#submit"
+                  <%= 'checked' if selected_keys.include?(definition.id.to_s) %>>
+            <label class="custom-control-label grow" for="<%= "#{f.object_name}_preferred_metafield_definition_ids_#{definition.id}" %>" data-controller="tooltip">
+              <%= definition.name %>
+              <%= tooltip(definition.full_key) %>
+            </label>
+          </div>
+          <button class="btn btn-sm pr-0 handle hover:bg-gray-100 h-full mr-1 px-1" type="button">
+            <%= icon('grip-vertical', class: 'mr-0') %>
+          </button>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/views/spree/admin/page_blocks/forms/_nav.html.erb

@@ -0,0 +1,6 @@
+<div class="form-group">
+  <%= f.label :preferred_label %>
+  <%= f.text_field :preferred_label, data: { action: 'auto-submit#submit' }, class: 'form-input' %>
+</div>
+
+<%= render 'spree/admin/page_links/list', parent: @page_block, show_add_link_button: true %>

data/app/views/spree/admin/page_blocks/forms/_newsletter_form.html.erb

@@ -0,0 +1,20 @@
+<div class="form-group">
+  <%= f.label :preferred_button_text %>
+  <%= f.text_field :preferred_button_text, data: { action: 'auto-submit#submit' }, class: 'form-input' %>
+</div>
+
+<div class="form-group">
+  <%= f.label :preferred_placeholder %>
+  <%= f.text_field :preferred_placeholder, data: { action: 'auto-submit#submit' }, class: 'form-input' %>
+</div>
+
+<% content_for(:design_tab) do %>
+  <div class="form-group">
+    <%= f.label :preferred_justify %>
+    <%= f.select :preferred_justify, options_for_select(['start', 'center', 'end'], @page_block.preferred_justify), {}, { class: 'form-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+  <div class="form-group">
+    <%= f.label :preferred_button_style %>
+    <%= f.select :preferred_button_style, options_for_select(['primary', 'secondary'], @page_block.preferred_button_style), {}, { class: 'form-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+<% end %>

data/app/views/spree/admin/page_blocks/forms/_price.html.erb

@@ -0,0 +1,15 @@
+<% content_for(:design_tab) do %>
+  <div class="form-group">
+    <%= f.label :preferred_text_alignment %>
+    <%= f.select :preferred_text_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_text_alignment), {}, { class: 'form-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <div class="form-group">
+    <%= f.label :preferred_container_alignment %>
+    <%= f.select :preferred_container_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_container_alignment), {}, { class: 'form-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <%= render 'spree/admin/page_builder/labeled_range_input',
+    f: f, field: :preferred_width_desktop, min: 1, max: 100, unit: '%', _label: 'Max text width on desktop'
+  %>
+<% end %>

data/app/views/spree/admin/page_blocks/forms/_share.html.erb

@@ -0,0 +1,5 @@
+<div class="trix-container">
+  <%= f.rich_text_area :text, data: {
+    action: 'trix-change->auto-submit#submit'
+  }, class: 'mb-6' %>
+</div>

data/app/views/spree/admin/page_blocks/forms/_subheading.html.erb

@@ -0,0 +1,26 @@
+<div class="trix-container">
+  <%= f.rich_text_area :text, data: {
+    action: 'trix-change->auto-submit#submit'
+  }, class: 'mb-6' %>
+</div>
+
+<% content_for(:design_tab) do %>
+  <div class="form-group">
+    <%= f.label :preferred_size %>
+    <%= f.select :preferred_size, options_for_select(['small', 'medium', 'large'], @page_block.preferred_size), {  }, { class: 'form-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <div class="form-group">
+    <%= f.label :preferred_text_alignment %>
+    <%= f.select :preferred_text_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_text_alignment), {}, { class: 'form-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <div class="form-group">
+    <%= f.label :preferred_container_alignment %>
+    <%= f.select :preferred_container_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_container_alignment), {}, { class: 'form-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <%= render 'spree/admin/page_builder/labeled_range_input',
+    f: f, field: :preferred_width_desktop, min: 1, max: 100, unit: '%', _label: 'Max subheading width on desktop'
+  %>
+<% end %>

data/app/views/spree/admin/page_blocks/forms/_text.html.erb

@@ -0,0 +1,21 @@
+<div class="trix-container">
+  <%= f.rich_text_area :text, data: {
+    action: 'trix-change->auto-submit#submit'
+  }, class: 'mb-6' %>
+</div>
+
+<% content_for(:design_tab) do %>
+  <div class="form-group">
+    <%= f.label :preferred_text_alignment %>
+    <%= f.select :preferred_text_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_text_alignment), {}, { class: 'form-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <div class="form-group">
+    <%= f.label :preferred_container_alignment %>
+    <%= f.select :preferred_container_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_container_alignment), {}, { class: 'form-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <%= render 'spree/admin/page_builder/labeled_range_input',
+    f: f, field: :preferred_width_desktop, min: 1, max: 100, unit: '%', _label: 'Max text width on desktop'
+  %>
+<% end %>

data/app/views/spree/admin/page_blocks/forms/_title.html.erb

@@ -0,0 +1,20 @@
+<% content_for(:design_tab) do %>
+  <div class="form-group">
+    <%= f.label :preferred_size %>
+    <%= f.select :preferred_size, options_for_select(['small', 'medium', 'large'], @page_block.preferred_size), {  }, { class: 'form-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <div class="form-group">
+    <%= f.label :preferred_text_alignment %>
+    <%= f.select :preferred_text_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_text_alignment), {}, { class: 'form-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <div class="form-group">
+    <%= f.label :preferred_container_alignment %>
+    <%= f.select :preferred_container_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_container_alignment), {}, { class: 'form-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <%= render 'spree/admin/page_builder/labeled_range_input',
+    f: f, field: :preferred_width_desktop, min: 1, max: 100, unit: '%',_label: 'Max heading width on desktop'
+  %>
+<% end %>

data/app/views/spree/admin/page_blocks/forms/_variant_picker.html.erb

@@ -0,0 +1,10 @@
+<% content_for(:design_tab) do %>
+  <div class="form-group">
+    <%= f.label :preferred_container_alignment %>
+    <%= f.select :preferred_container_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_container_alignment), {}, { class: 'form-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <%= render 'spree/admin/page_builder/labeled_range_input',
+    f: f, field: :preferred_width_desktop, min: 1, max: 100, unit: '%', _label: 'Max text width on desktop'
+  %>
+<% end %>

data/app/views/spree/admin/page_blocks/forms/products/_buy_buttons.html.erb

@@ -0,0 +1,10 @@
+<% content_for(:design_tab) do %>
+  <div class="form-group">
+    <%= f.label :preferred_container_alignment %>
+    <%= f.select :preferred_container_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_container_alignment), {}, { class: 'form-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <%= render 'spree/admin/page_builder/labeled_range_input',
+    f: f, field: :preferred_width_desktop, min: 1, max: 100, unit: '%', _label: 'Max text width on desktop'
+  %>
+<% end %>

data/app/views/spree/admin/page_blocks/forms/products/_quantity_selector.html.erb

@@ -0,0 +1,10 @@
+<% content_for(:design_tab) do %>
+  <div class="form-group">
+    <%= f.label :preferred_container_alignment %>
+    <%= f.select :preferred_container_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_container_alignment), {}, { class: 'form-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <%= render 'spree/admin/page_builder/labeled_range_input',
+    f: f, field: :preferred_width_desktop, min: 1, max: 100, unit: '%', _label: 'Max text width on desktop'
+  %>
+<% end %>

data/app/views/spree/admin/page_blocks/move_higher.turbo_stream.erb

@@ -0,0 +1,4 @@
+<%= turbo_stream.replace dom_id(@page_block.section) do %>
+  <%= render 'spree/admin/page_builder/sidebar_section', section: @page_block.section %>
+<% end %>
+<%= refresh_theme_preview %>

data/app/views/spree/admin/page_blocks/move_lower.turbo_stream.erb

@@ -0,0 +1,4 @@
+<%= turbo_stream.replace dom_id(@page_block.section) do %>
+  <%= render 'spree/admin/page_builder/sidebar_section', section: @page_block.section %>
+<% end %>
+<%= refresh_theme_preview %>

data/app/views/spree/admin/page_blocks/show.html.erb

@@ -0,0 +1 @@
+<%= render 'spree/admin/page_builder/sidebar_block', block: @page_block %>

data/app/views/spree/admin/page_blocks/update.turbo_stream.erb

@@ -0,0 +1,6 @@
+<%= refresh_theme_preview(@page_block.section, @page_block) %>
+<% if @page_block.respond_to?(:link) %>
+  <%= turbo_stream.update :linkable_type_dropdown do %>
+    <%= render 'spree/admin/page_links/linkable_type_dropdown', page_link: @page_block.link, form_name: 'page_block[link_attributes]' %>
+  <% end %>
+<% end %>

data/app/views/spree/admin/page_builder/_add_block.html.erb

@@ -0,0 +1,22 @@
+<%= form_for section.blocks.new, url: spree.admin_page_section_blocks_path(section), html: { class: 'list-group-item sidebar-page-block px-0 py-1 border-0 rounded'}, data: { controller: 'block-form', block_form_target: :form } do |f| %>
+  <%= f.hidden_field :type, data: { block_form_target: 'type' } %>
+
+  <%= dropdown portal: false do %>
+    <%= dropdown_toggle class: 'btn-sm btn-secondary flex-inline' do %>
+      <%= icon("circle-plus") %>
+      <%= Spree.t(:add_page_block) %>
+    <% end %>
+    <%= dropdown_menu do %>
+    <% section.available_blocks_to_add.each do |block_class| %>
+      <a href="#" class="dropdown-item btn-sm"
+          data-action="click->block-form#addBlock"
+        data-block-form-type-param="<%= block_class %>"
+        >
+        <% block_instance = block_class.new %>
+        <%= icon block_instance.icon_name, height: 18, class: 'mr-2' if block_class.new.icon_name.present? %>
+        <%= block_instance.display_name.presence || block_class.to_s.demodulize.titleize %>
+      </a>
+    <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/spree/admin/page_builder/_color_palette.html.erb

@@ -0,0 +1,17 @@
+<% active ||= false %>
+<div
+  data-action="click->color-palette#selectPalette"
+  data-color-palette-primary-color-param="<%= primary_color %>"
+  data-color-palette-text-color-param="<%= text_color %>"
+  data-color-palette-button-text-color-param="<%= button_text_color %>"
+  data-color-palette-border-color-param="<%= border_color %>"
+  data-color-palette-background-color-param="<%= background_color %>"
+  class="mb-4 block w-full rounded-lg  overflow-hidden border cursor-pointer <% if active %>border-2 border-primary<% end %>" style="height: 40px">
+  <div class="row mx-0 h-full">
+    <div class="col" style="background-color: <%= primary_color %>"></div>
+    <div class="col" style="background-color: <%= text_color %>"></div>
+    <div class="col" style="background-color: <%= button_text_color %>"></div>
+    <div class="col" style="background-color: <%= border_color %>"></div>
+    <div class="col" style="background-color: <%= background_color %>"></div>
+  </div>
+</div>

data/app/views/spree/admin/page_builder/_color_picker.html.erb

@@ -0,0 +1,26 @@
+<% color_picker_value ||= value || @theme_preview&.try(:send, field) %>
+
+<div
+  class="mb-4 form-group"
+  data-controller="color-picker"
+  data-color-picker-clear-value="<%= defined?(clear) ? clear : false %>"
+  data-color-picker-default-color-value="<%= color_picker_value %>">
+  <div class="flex items-center">
+    <%= f.hidden_field field, class: 'form-input mr-1', data: {
+      'color-picker-target': 'input',
+      'color-palette-target': field.to_s.camelize(:lower),
+      action: action,
+    }, value: value %>
+    <div>
+      <label class="mb-0"><%= label %></label>
+      <br />
+      <span data-color-picker-target="value" class="text-gray-600">
+        <%= color_picker_value&.upcase || Spree.t('admin.page_builder.not_set') %>
+      </span>
+    </div>
+    <div class="ml-auto flex items-center" style="width:40px">
+      <div data-color-picker-target="picker" class="border inline-block rounded-full <% unless color_picker_value.present? %>checkered-background<% end %>" style="height: 40px;width: 40px; background-color: <%= color_picker_value %>;">
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/spree/admin/page_builder/_header.html.erb

@@ -0,0 +1,113 @@
+<header id="page-builder-header" class="fixed-top">
+  <nav class="navbar navbar-expand-lg">
+    <div data-controller="tooltip">
+      <% back_url = @page.custom? ? spree.admin_pages_path : spree.admin_themes_path %>
+      <%= link_to back_url, class: 'btn hover:bg-gray-100 shadow-none px-2' do %>
+        <%= icon('x', class: 'mr-0') %>
+      <% end %>
+      <%= tooltip(Spree.t('admin.back_to_dashboard')) %>
+    </div>
+    <% if @page.custom? %>
+      <div class="px-3">
+        <span class="text-gray-600 mr-1"><%= I18n.t('activerecord.models.spree/page.one') %>:</span>
+        <strong><%= @page.display_name %></strong>
+      </div>
+
+      <%= link_to_with_icon 'settings', Spree.t(:settings), spree.edit_admin_page_path(@page.id), class: 'btn btn-light', data: { turbo_frame: 'dialog', action: 'dialog#open' } %>
+    <% else %>
+      <div class="px-3">
+        <span class="text-gray-600 mr-1"><%= Spree.t(:theme) %>:</span>
+        <strong class="mr-1"><%= @theme.name %></strong>
+        &nbsp;
+        <% if @theme.default? %>
+          <span class="badge badge-success">
+            <%= icon('check') %>
+            <%= Spree.t(:live) %>
+          </span>
+        <% else %>
+          <span class="badge badge-warning">
+            <%= Spree.t(:draft) %>
+          </span>
+        <% end %>
+      </div>
+      <%= render 'spree/admin/page_builder/pages_dropdown' %>
+
+      <ul class="nav nav-pills" role="tablist">
+        <li class="nav-item" role="presentation">
+          <button class="nav-link active"
+                        data-controller="tooltip"
+                        data-tabs-target="tab"
+                        data-action="click->tabs#select"
+                        type="button"
+                        role="tab"
+                        aria-controls="sections"
+                        aria-selected="true"
+                        data-trigger="hover"
+                        id="sidebar-icon-page">
+            <%= icon 'section', class: 'mr-0' %>
+            <%= tooltip("Page sections") %>
+          </button>
+        </li>
+        <li class="nav-item" role="presentation">
+          <button class="nav-link"
+                  data-controller="tooltip"
+                  data-tabs-target="tab"
+                  data-action="click->tabs#select"
+                  type="button"
+                  role="tab"
+                  aria-controls="theme"
+                  aria-selected="false"
+                  data-trigger="hover"
+                  id="sidebar-icon-colors">
+            <%= icon 'palette', class: 'mr-0' %>
+            <%= tooltip(Spree.t(:theme)) %>
+          </button>
+        </li>
+        <li class="nav-item" role="presentation">
+          <button class="nav-link"
+                data-controller="tooltip"
+                type="button"
+                data-tabs-target="tab"
+                data-action="click->tabs#select"
+                type="button"
+                role="tab"
+                aria-controls="fonts"
+                aria-selected="false"
+                data-trigger="hover"
+                id="sidebar-icon-fonts">
+            <%= icon 'typography', class: 'mr-0' %>
+            <%= tooltip("Fonts") %>
+          </button>
+        </li>
+      </ul>
+    <% end %>
+
+    <ul class="nav nav-pills ml-auto" role="tablist">
+      <li class="nav-item" role="presentation">
+        <button class="nav-link" type="button"
+                data-controller="tooltip"
+                data-trigger="hover"
+                data-action="click->page-builder#setResponsiveBreakpoint"
+                data-page-builder-target="mobileButton"
+                data-page-builder-breakpoint-param="mobile">
+          <%= icon 'device-mobile', class: 'mr-0' %>
+          <%= tooltip("Mobile") %>
+        </button>
+      </li>
+      <li class="nav-item" role="presentation">
+        <button class="nav-link active" type="button"
+                data-controller="tooltip"
+                data-action="click->page-builder#setResponsiveBreakpoint"
+                data-page-builder-breakpoint-param="desktop"
+                data-trigger="hover"
+                data-page-builder-target="desktopButton">
+          <%= icon 'device-laptop', class: 'mr-0' %>
+          <%= tooltip("Desktop") %>
+        </button>
+      </li>
+    </ul>
+
+    <%= link_to_with_icon 'eye', Spree.t(:preview), @page.preview_url(@theme_preview, @page_preview), class: 'btn btn-light ml-auto', target: '_blank' %>
+    <%= turbo_save_button_tag(@theme.default? ? icon('cloud-up') + Spree.t('actions.publish') : icon('pencil-check') + Spree.t('actions.save')) %>
+  </nav>
+</header>

data/app/views/spree/admin/page_builder/_labeled_range_input.html.erb

@@ -0,0 +1,10 @@
+<div class="mb-4 form-group">
+  <div data-controller="better-slider">
+    <label><%= _label %>: <span data-better-slider-target="currentValueLabel"></span><%= unit %></label>
+    <div class="flex flex-row w-full">
+      <span class="mr-2"><%= min %><%= unit %></span>
+      <%= f.range_field field, class: "custom-range", min: min, max: max, step: 1, data: {'better-slider-target': 'rangeInput', action: 'change->auto-submit#submit'} %>
+      <span class="ml-2"><%= max %><%= unit  %></span>
+    </div>
+  </div>
+</div>

data/app/views/spree/admin/page_builder/_pages_dropdown.html.erb

@@ -0,0 +1,17 @@
+<%= dropdown id: 'pages_dropdown', direction: 'left' do %>
+  <%= dropdown_toggle class: 'btn-light' do %>
+    <span class="flex items-center pr-12">
+      <%= icon @page.icon_name, class: 'mr-2' %>
+      <%= @page.display_name %>
+    </span>
+    <%= icon 'selector', class: 'mr-0 ml-2 mb-0 text-gray-600' %>
+  <% end %>
+  <%= dropdown_menu style: 'min-width: 250px' do %>
+    <% @theme.pages.standard.order(name: :asc).find_all(&:customizable?).each do |page| %>
+      <%= active_link_to spree.edit_admin_theme_path(@theme, theme_preview_id: @theme_preview.id, page_id: page.id), class: 'dropdown-item', active: @page == page, data: { turbo_prefetch: false } do %>
+        <%= icon page.icon_name, class: 'mr-2' %>
+        <%= page.display_name %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/spree/admin/page_builder/_range_input.html.erb

@@ -0,0 +1,12 @@
+<% label ||= nil %>
+<% label_for_min_value ||= nil %>
+<% action ||= 'change->auto-submit#submit' %>
+<div class="mb-4 form-group">
+  <div data-controller="better-slider" data-better-slider-label-for-min-value="<%= label_for_min_value %>" data-better-slider-unit-value="<%= unit %>">
+    <label><%= label.presence || field.to_s.humanize %></label>
+    <div class="flex flex-row w-full">
+      <%= f.range_field field, class: "custom-range", min: min, max: max, step: 1, data: {'better-slider-target': 'rangeInput', action: action} %>
+    </div>
+    <span data-better-slider-target="currentValueLabel"></span>
+  </div>
+</div>

data/app/views/spree/admin/page_builder/_sidebar.html.erb

@@ -0,0 +1,12 @@
+<aside id="page-builder-sidebar" class="overflow-y-scroll">
+  <div data-tabs-target="panel" id="sections" role="tabpanel" aria-labelledby="sidebar-icon-page" class="animate-fade-in">
+    <%= render 'spree/admin/page_builder/sidebar_sections' %>
+    <%= render 'spree/admin/page_builder/sidebar_sections_toolbar' %>
+  </div>
+  <div data-tabs-target="panel" role="tabpanel" aria-labelledby="sidebar-icon-colors" id="colors" hidden class="animate-fade-in">
+    <%= render 'spree/admin/page_builder/sidebar_colors' %>
+  </div>
+  <div data-tabs-target="panel" role="tabpanel" aria-labelledby="sidebar-icon-fonts" id="fonts" hidden class="animate-fade-in">
+    <%= render 'spree/admin/page_builder/sidebar_fonts' %>
+  </div>
+</aside>

data/app/views/spree/admin/page_builder/_sidebar_block.html.erb

@@ -0,0 +1,30 @@
+<% if block.persisted? %>
+  <%= turbo_frame_tag dom_id(block), class: 'list-group-item sidebar-page-block px-0 py-0 border-0 rounded',
+                                     data: {
+                                       action: 'mouseover->page-builder#toggleHighlightElement mouseout->page-builder#toggleHighlightElement',
+                                       page_builder_editor_id_param: "block-#{block.id}",
+                                       sortable_update_url: spree.admin_page_section_block_path(block.section, block, format: :turbo_stream)
+                                     } do %>
+    <div class="flex items-center justify-between sidebar-block-title p-1 rounded-md">
+      <div class="flex items-center flex-1">
+        <%= link_to(edit_admin_page_section_block_path(block.section, block),
+          class: 'block-edit-link flex-1 text-gray-900',
+          data: {
+            turbo_frame: :page_sidebar,
+            action: 'click->page-builder#makeOverlayActive',
+            page_builder_editor_id_param: "block-#{block.id}"
+          }) do %>
+          <%= icon "#{block.icon_name}", class: 'mr-2' if block.icon_name.present? %>
+          <%= block.display_name %>
+        <% end %>
+      </div>
+      <div class="flex items-center hidden">
+        <% if block.section.can_sort_blocks? %>
+          <button class="btn btn-sm pr-0 handle hover:bg-gray-100 h-full px-1 handle-block shadow-none">
+            <%= icon('grip-vertical', class: 'mr-0') %>
+          </button>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+<% end %>