alchemy_cms 7.1.7 → 7.2.0.rc1

data/app/views/alchemy/_menubar.html.erb

@@ -1,20 +1,133 @@
-<% if !@preview_mode && @page && can?(:edit_content, @page) %>
+<% if !Alchemy::Current.preview_page? && @page && can?(:edit_content, @page) %>
   <alchemy-menubar>
     <template>
-      <%= stylesheet_link_tag("alchemy/menubar") %>
-      <div id="alchemy_menubar" data-turbo="false">
-        <ul>
-          <li><%= link_to Alchemy.t(:to_alchemy), alchemy.admin_dashboard_url %></li>
-          <li><%= link_to Alchemy.t(:edit_page), alchemy.edit_admin_page_url(@page) %></li>
-          <li>
-            <%= form_tag Alchemy.logout_path, method: Alchemy.logout_method do %>
-              <%= button_tag Alchemy.t(:logout) %>
-            <% end %>
-          </li>
-        </ul>
+      <style>
+        .menubar {
+          --icon-size: 24px;
+          --panel-width: 525px;
+          --border-radius: 3px;
+          --left-offset: 0px;
+          display: flex;
+          position: fixed;
+          top: 0;
+          left: calc(-1 * (var(--panel-width) - var(--left-offset)));
+          z-index: 10000;
+          background: #214166;
+          transition: left 0.25s cubic-bezier(0.23, 1, 0.32, 1);
+          box-shadow: 0 0 0 1px #fff;
+          box-sizing: border-box;
+          border-bottom-right-radius: var(--border-radius);
+          padding: 12px 16px 12px;
+          gap: 12px;
+          justify-content: space-between;
+          align-items: center;
+          flex-wrap: nowrap;
+          overflow: hidden;
+          font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode",
+            "Lucida Sans", Verdana, Tahoma, sans-serif;
+          font-size: 13px;
+        }
+
+        .menubar * {
+          box-sizing: border-box;
+          margin: 0;
+          padding: 0;
+        }
+
+        .menubar:hover,
+        .menubar:focus-within {
+          left: 0;
+        }
+
+        .menubar > svg {
+          width: var(--icon-size);
+          height: var(--icon-size);
+          flex-shrink: 0;
+          margin-left: 4px;
+        }
+
+        .menubar .button {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+          font-size: inherit;
+          font-weight: 700;
+          cursor: pointer;
+          border-radius: var(--border-radius);
+          background-color: transparent;
+          border: 1px solid rgba(255, 255, 255, 0.5);
+          color: #fff;
+          margin: 0;
+          padding: 0.75em 1.5em;
+          appearance: none;
+          transition: all 250ms;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
+          text-decoration: none;
+          white-space: nowrap;
+        }
+
+        .menubar .button:hover {
+          text-decoration: none;
+          background-color: rgba(0, 0, 0, 0.25);
+          border-color: rgba(255, 255, 255, 0.75)
+        }
+
+        .menubar .button:active {
+          box-shadow: inset 0px 1px 1px -1px #333;
+        }
+
+        .menubar .button:focus {
+          outline: solid 2px #eca96e;
+          outline-offset: 2px;
+        }
+      </style>
+
+      <div class="menubar" data-turbo="false">
+        <%= link_to alchemy.admin_dashboard_url, class: "button" do %>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+            <path d="M7.82843 10.9999H20V12.9999H7.82843L13.1924 18.3638L11.7782 19.778L4 11.9999L11.7782 4.22168L13.1924 5.63589L7.82843 10.9999Z"></path>
+          </svg>
+          <%= Alchemy.t(:to_alchemy) %>
+        <% end %>
+        <%= link_to alchemy.edit_admin_page_url(@page), class: "button" do %>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+            <path d="M6.41421 15.89L16.5563 5.74785L15.1421 4.33363L5 14.4758V15.89H6.41421ZM7.24264 17.89H3V13.6473L14.435 2.21231C14.8256 1.82179 15.4587 1.82179 15.8492 2.21231L18.6777 5.04074C19.0682 5.43126 19.0682 6.06443 18.6777 6.45495L7.24264 17.89ZM3 19.89H21V21.89H3V19.89Z"></path>
+          </svg>
+          <%= Alchemy.t(:edit_page) %>
+        <% end %>
+        <%= form_tag Alchemy.logout_path, method: Alchemy.logout_method do %>
+          <%= button_tag class: "button" do %>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+              <path d="M5 22C4.44772 22 4 21.5523 4 21V3C4 2.44772 4.44772 2 5 2H19C19.5523 2 20 2.44772 20 3V6H18V4H6V20H18V18H20V21C20 21.5523 19.5523 22 19 22H5ZM18 16V13H11V11H18V8L23 12L18 16Z"></path>
+            </svg>
+            <%= Alchemy.t(:logout) %>
+          <% end %>
+        <% end %>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
+          <path fill="#fff" d="M15.7 7.9L9.9 2.2 2.1 4.3 0 12.1l5.7 5.8 7.8-2.1 2.2-7.9zm-5.3 10.3l-1.2 4.4 3.2 3.2 4.4-1.2 1.2-4.4-3.2-3.2-4.4 1.2zM23.5 7.3L17.2 9l-1.7 6.2 4.5 4.6 6.2-1.7 1.7-6.2-4.4-4.6z"/>
+        </svg>
       </div>
     </template>
-  </alchemy-menubar>
 
-  <%= javascript_include_tag('menubar', type: "module") %>
+    <script type="module">
+      class Menubar extends HTMLElement {
+        constructor() {
+          super()
+          const template = this.querySelector("template")
+          const attachedShadowRoot = this.attachShadow({ mode: "open" })
+          attachedShadowRoot.appendChild(template.content.cloneNode(true))
+        }
+
+        connectedCallback() {
+          const bar = this.shadowRoot.querySelector(".menubar")
+          const width = bar.offsetWidth
+          bar.style = `--panel-width: ${width}px; --left-offset: calc(var(--icon-size) + 32px);`
+        }
+      }
+
+      customElements.define("alchemy-menubar", Menubar)
+    </script>
+  </alchemy-menubar>
 <% end %>

data/app/views/alchemy/_preview_mode_code.html.erb

@@ -1,4 +1,4 @@
-<% if @preview_mode %>
+<% if Alchemy::Current.preview_page? %>
   <script type="text/javascript">
     Alchemy = { locale: "<%= session[:alchemy_locale] %>" };
   </script>

data/app/views/alchemy/admin/attachments/_tag_list.html.erb

@@ -1,12 +1,12 @@
 <% if Alchemy::Attachment.tag_counts.any? %>
   <h3><%= Alchemy.t("Filter by tag") %></h3>
-  <%= js_filter_field '.tag-list li' %>
+  <%= render Alchemy::Admin::ListFilter.new(".tag-list li") %>
   <ul>
     <%= render_tag_list('Alchemy::Attachment') %>
   </ul>
   <% if search_filter_params[:tagged_with].present? %>
     <%= link_to(
-      render_icon(:times, size: 'xs') + Alchemy.t('Remove tag filter'),
+      render_icon(:times, size: '1x') + Alchemy.t('Remove tag filter'),
       url_for(search_filter_params.except(:tagged_with)),
       remote: request.xhr?,
       class: 'secondary button small with_icon'

data/app/views/alchemy/admin/attachments/archive_overlay.js.erb

@@ -1,5 +1,4 @@
 (function() {
   var dialog = Alchemy.currentDialog();
   dialog.dialog_body.html('<%= j render("archive_overlay") %>');
-  Alchemy.ListFilter(dialog.dialog_body);
 })();

data/app/views/alchemy/admin/attachments/edit.html.erb

@@ -2,9 +2,8 @@
   url: {action: :update, q: search_filter_params[:q], page: params[:page]}) do |f| -%>
   <%= f.input :name, input_html: {autofocus: true} %>
   <%= f.input :file_name, input_html: {autofocus: true}, hint: Alchemy.t(:attachment_filename_notice) %>
-  <div class="input string autocomplete_tag_list">
-    <%= f.label :tag_list %>
-    <%= render 'alchemy/admin/partials/autocomplete_tag_list', f: f %>
-  </div>
+  <%= render Alchemy::Admin::TagsAutocomplete.new do %>
+    <%= f.input :tag_list, input_html: { value: f.object.tag_list.join(",") } %>
+  <% end %>
   <%= f.submit Alchemy.t(:save) %>
 <% end %>

data/app/views/alchemy/admin/clipboard/clear.js.erb

@@ -1,3 +1,3 @@
 $("#clipboard_items").replaceWith("<%= j render_message { Alchemy.t('No items in your clipboard') } -%>");
-$('#clipboard_button .icon').removeClass('ri-clipboard-fill').addClass('ri-clipboard-line');
+$('#clipboard_button alchemy-icon').attr('icon-style', 'line');
 Alchemy.pleaseWaitOverlay(false);

data/app/views/alchemy/admin/clipboard/index.html.erb

@@ -12,7 +12,7 @@
         <%= render_icon(:file) %>
         <%= truncate(item.name, length: 50) %>
       <% else %>
-        <%= render_icon(:draggable, style: nil) %>
+        <%= render_icon(:draggable, style: false) %>
         <%= truncate(item.display_name_with_preview_text(50), length: 50) %>
       <% end %>
       <span class="float_right">

data/app/views/alchemy/admin/clipboard/insert.js.erb

@@ -13,7 +13,7 @@
 <% else -%>
   Alchemy.growl('<%= j Alchemy.t("item copied to clipboard", name: @item.class.name == "Alchemy::Element" ? @item.display_name_with_preview_text : @item.name) %>')
 <% end -%>
-$('#clipboard_button .icon').removeClass('ri-clipboard-line').addClass('ri-clipboard-fill');
+$('#clipboard_button alchemy-icon').attr('icon-style', 'fill');
 
 <%# Update add nested element forms for any elements that accept ONLY this as a nested element %>
 <% if @item.class == Alchemy::Element %>

data/app/views/alchemy/admin/clipboard/remove.js.erb

@@ -3,7 +3,7 @@
   $("#clipboard_item_<%= @item.id -%>").remove();
   Alchemy.growl('<%= Alchemy.t("item removed from clipboard", :name => @item.class.to_s == "Element" ? @item.display_name_with_preview_text : @item.name) -%>');
 <%- if @clipboard.blank? -%>
-  $('#clipboard_button .icon').removeClass('fa-paste').addClass('fa-clipboard');
+  $('#clipboard_button alchemy-icon').attr('icon-style', 'line');
   $("#clipboard_items").replaceWith("<%= j render_message { Alchemy.t('No items in your clipboard') } %>");
 <%- end -%>
 

data/app/views/alchemy/admin/dashboard/_locked_pages.html.erb

@@ -36,7 +36,7 @@
         <% end %>
       </td>
       <td>
-        <% if (current_alchemy_user.id == page.locked_by) || can?(:manage, Alchemy::Site.current) %>
+        <% if (current_alchemy_user.id == page.locked_by) || can?(:manage, Alchemy::Current.site) %>
         <%= form_tag(alchemy.unlock_admin_page_path(page, :redirect_to => alchemy.admin_dashboard_url)) do %>
           <button class="icon_button small" title="<%= Alchemy.t(:explain_unlocking) %>">
             <%= render_icon(:close, size: '1x') %>

data/app/views/alchemy/admin/dashboard/_sites.html.erb

@@ -7,7 +7,7 @@
     <tr class="<%= cycle('even', 'odd', name: 'sites') %>">
       <td>
         <% if alchemy.respond_to?(:login_url) %>
-          <%= link_to_unless site == Alchemy::Site.current,
+          <%= link_to_unless site == Alchemy::Current.site,
             site.name,
             alchemy.login_url(
               protocol: 'http://',

data/app/views/alchemy/admin/dashboard/help.html.erb

@@ -1,21 +1,57 @@
 <h2><%= Alchemy.t('Global shortcuts') %></h2>
 <ul class="shortcuts">
-  <li><kbd>?</kbd><%= Alchemy.t('Open help window', scope: 'help.shortcuts') %></li>
-  <li><kbd>esc</kbd><%= Alchemy.t('Close current dialog', scope: 'help.shortcuts') %></li>
-  <li><kbd>alt</kbd><kbd>q</kbd><%= Alchemy.t('Open logout dialog', scope: 'help.shortcuts') %></li>
-  <li><kbd>alt</kbd><kbd>f</kbd><%= Alchemy.t('Focus search field', scope: 'help.shortcuts') %></li>
-  <li><kbd>alt</kbd><kbd>n</kbd><%= Alchemy.t('Create a new record', scope: 'help.shortcuts') %></li>
+  <li>
+    <kbd>?</kbd>
+    <%= Alchemy.t('Open help window', scope: 'help.shortcuts') %>
+  </li>
+  <li>
+    <kbd>esc</kbd>
+    <%= Alchemy.t('Close current dialog', scope: 'help.shortcuts') %>
+  </li>
+  <li>
+    <kbd>alt</kbd><kbd>q</kbd>
+    <%= Alchemy.t('Open logout dialog', scope: 'help.shortcuts') %>
+  </li>
+  <li>
+    <kbd>alt</kbd><kbd>f</kbd>
+    <%= Alchemy.t('Focus search field', scope: 'help.shortcuts') %>
+  </li>
+  <li>
+    <kbd>alt</kbd><kbd>n</kbd>
+    <%= Alchemy.t('Create a new record', scope: 'help.shortcuts') %>
+  </li>
 </ul>
 <h2><%= Alchemy.t('Page edit shortcuts') %></h2>
 <ul class="shortcuts">
-  <li><kbd>alt</kbd><kbd>i</kbd><%= Alchemy.t('Show page infos', scope: 'help.shortcuts') %></li>
-  <li><kbd>alt</kbd><kbd>n</kbd><%= Alchemy.t('Create new element', scope: 'help.shortcuts') %></li>
-  <li><kbd>alt</kbd><kbd>e</kbd><%= Alchemy.t('Edit page properties', scope: 'help.shortcuts') %></li>
-  <li><kbd>alt</kbd><kbd>r</kbd><%= Alchemy.t('Reload the preview', scope: 'help.shortcuts') %></li>
-  <li><kbd>alt</kbd><kbd>x</kbd><%= Alchemy.t('Leave the page', scope: 'help.shortcuts') %></li>
+  <li>
+    <kbd>alt</kbd><kbd>i</kbd>
+    <%= Alchemy.t('Show page infos', scope: 'help.shortcuts') %>
+  </li>
+  <li>
+    <kbd>alt</kbd><kbd>n</kbd>
+    <%= Alchemy.t('Create new element', scope: 'help.shortcuts') %>
+  </li>
+  <li>
+    <kbd>alt</kbd><kbd>e</kbd>
+    <%= Alchemy.t('Edit page properties', scope: 'help.shortcuts') %>
+  </li>
+  <li>
+    <kbd>alt</kbd><kbd>r</kbd>
+    <%= Alchemy.t('Reload the preview', scope: 'help.shortcuts') %>
+  </li>
+  <li>
+    <kbd>alt</kbd><kbd>x</kbd>
+    <%= Alchemy.t('Leave the page', scope: 'help.shortcuts') %>
+  </li>
 </ul>
 <h2><%= Alchemy.t('Library shortcuts') %></h2>
 <ul class="shortcuts">
-  <li><kbd>alt</kbd><kbd>n</kbd><%= Alchemy.t('Open upload form', scope: 'help.shortcuts') %></li>
-  <li><kbd>alt</kbd><kbd>a</kbd><%= Alchemy.t('Select all pictures', scope: 'help.shortcuts') %></li>
+  <li>
+    <kbd>alt</kbd><kbd>n</kbd>
+    <%= Alchemy.t('Open upload form', scope: 'help.shortcuts') %>
+  </li>
+  <li>
+    <kbd>alt</kbd><kbd>a</kbd>
+    <%= Alchemy.t('Select all pictures', scope: 'help.shortcuts') %>
+  </li>
 </ul>

data/app/views/alchemy/admin/dashboard/index.html.erb

@@ -1,6 +1,6 @@
 <%= content_for :toolbar do %>
   <div class="toolbar_buttons">
-    <%= toolbar_button(
+    <%= render Alchemy::Admin::ToolbarButton.new(
       icon: 'information',
       label: Alchemy.t(:info),
       url: alchemy.dashboard_info_path,

data/app/views/alchemy/admin/dashboard/info.html.erb

@@ -43,22 +43,19 @@
   <p><%= Alchemy.t('Alchemy is open software and itself uses open software and free resources:') %></p>
   <ul>
     <li>
-      <a href="http://rubyonrails.org" target="_blank">RubyOnRails</a>
+      <a href="https://rubyonrails.org" target="_blank">Ruby on Rails</a>
     </li>
     <li>
-      <a href="http://jquery.com" target="_blank">jQuery Javascript Library</a>
+      <a href="https://jquery.com" target="_blank">jQuery Javascript Library</a>
     </li>
     <li>
-      <a href="http://jqueryui.com" target="_blank">jQuery UI Javascript GUI Library</a>
+      <a href="https://shoelace.style" target="_blank">Shoelace Web Components Library</a>
     </li>
     <li>
-      <a href="http://tinymce.moxiecode.com" target="_blank">TinyMCE - Javascript WYSIWYG Editor</a>
+      <a href="https://www.tiny.cloud" target="_blank">TinyMCE - Javascript WYSIWYG Editor</a>
     </li>
     <li>
-      <a href="http://blueimp.github.io/jQuery-File-Upload/" target="_blank">jQuery File Upload</a>
-    </li>
-    <li>
-      <a href="https://remixicon.com" target="_blank">Remix Icon</a>
+      <a href="https://remixicon.com" target="_blank">Remix Icons</a>
     </li>
   </ul>
 <% end %>

data/app/views/alchemy/admin/elements/_add_nested_element_form.html.erb

@@ -8,7 +8,7 @@
       <%= f.hidden_field :name %>
       <%= f.hidden_field :page_version_id, value: element.page_version_id %>
       <%= f.hidden_field :parent_element_id, value: element.id %>
-      <button class="add-nestable-element-button" is="alchemy-button">
+      <button class="add-nestable-element-button" is="alchemy-button" data-turbo="false">
         <%= Alchemy.t(:add_nested_element, name: Alchemy.t(nestable_element.to_sym, scope: 'element_names')) %>
       </button>
     <% end %>

data/app/views/alchemy/admin/elements/_element.html.erb

@@ -2,7 +2,7 @@
   id="element_<%= element.id %>"
   data-element-id="<%= element.id %>"
   data-element-name="<%= element.name %>"
-  class="<%= element.css_classes %>"
+  class="<%= element.css_classes.join(" ") %>"
   <%= element.compact? ? "compact" : nil %>
   <%= element.fixed? ? "fixed" : nil %>
 >
@@ -44,7 +44,7 @@
             <%= content_tag :details, class: "ingredient-group", id: "element_#{element.id}_ingredient_group_#{group.parameterize.underscore}", is: "alchemy-ingredient-group" do %>
               <summary>
                 <%= element.translated_group group %>
-                <i class="ingredient-group-expand icon ri-fw ri-arrow-left-s-line"></i>
+                <%= render_icon "arrow-left-s" %>
               </summary>
               <%= render ingredients, element_form: f %>
             <% end %>
@@ -53,10 +53,10 @@
       <% end %>
 
       <% if element.taggable? %>
-        <div class="autocomplete_tag_list">
+        <%= render Alchemy::Admin::TagsAutocomplete.new do %>
           <%= f.label :tag_list %>
-          <%= render 'alchemy/admin/partials/autocomplete_tag_list', f: f %>
-        </div>
+          <%= f.text_field :tag_list, value: f.object.tag_list.join(",") %>
+        <% end %>
       <% end %>
     <% end %>
 

data/app/views/alchemy/admin/elements/_footer.html.erb

@@ -5,7 +5,7 @@
     </p>
   <% end %>
 
-  <button type="submit" form="element_<%= element.id %>_form" is="alchemy-button">
+  <button type="submit" form="element_<%= element.id %>_form" is="alchemy-button" data-turbo="false">
     <%= Alchemy.t(:save) %>
   </button>
 </div>

data/app/views/alchemy/admin/elements/_header.html.erb

@@ -5,7 +5,7 @@
     <% elsif element.deprecated? %>
       <%= hint_with_tooltip element.deprecation_notice %>
     <% else %>
-      <%= render_icon('draggable', style: nil, class: 'element', fixed_width: false) %>
+      <%= render_icon('draggable', style: false, class: 'element', fixed_width: false) %>
     <% end %>
   </span>
   <span class="element-title">
@@ -24,6 +24,10 @@
     title: Alchemy.t(element.folded? ? :show_element_content : :hide_element_content),
     class: "element-toggle"
   }) do %>
-    <%= render_icon element.folded? ? 'arrow-left-s' : 'arrow-down-s' %>
+    <% if element.compact? %>
+      <%= render_icon "more-2" %>
+    <% else %>
+      <%= render_icon element.folded? ? "arrow-left-s" : "arrow-down-s" %>
+    <% end %>
   <% end %>
 </div>

data/app/views/alchemy/admin/elements/_toolbar.html.erb

@@ -19,12 +19,14 @@
     ) %>
   </sl-tooltip>
   <sl-tooltip content="<%= Alchemy.t("Delete element") %>">
-    <%= link_to_confirm_dialog(
-      render_icon('delete-bin-2'),
-      Alchemy.t(:confirm_to_delete_element),
-      alchemy.admin_element_path(element),
-      class: "icon_button"
-    ) -%>
+    <alchemy-delete-element-button
+      href="<%= alchemy.admin_element_path(element) %>"
+      message="<%= Alchemy.t(:confirm_to_delete_element) %>"
+    >
+      <button type="button" class="icon_button" data-turbo="false">
+        <%= render_icon('delete-bin-2') %>
+      </button>
+    </alchemy-delete-element-button>
   </sl-tooltip>
   <sl-tooltip content="<%= element.public? ? Alchemy.t(:hide_element) : Alchemy.t(:show_element) %>" placement="top-end">
     <alchemy-publish-element-button>

data/app/views/alchemy/admin/elements/create.js.erb

@@ -7,9 +7,6 @@
 <%- end -%>
 
 <% if @element.fixed? %>
-  if ($('#fixed-elements').length == 0) {
-    Alchemy.FixedElements.buildTabs('<%= Alchemy.t(:main_content) %>');
-  }
   Alchemy.FixedElements.createTab('<%= @element.id %>', '<%= @element.display_name %>');
   $element_area = $('[name="fixed-element-<%= @element.id %>"]');
 <% elsif @element.parent_element %>
@@ -24,8 +21,6 @@
   $element_area.append(element_html);
 <%- end -%>
 
-  Alchemy.SortableElements('[data-element-id="<%= @element.id %>"] .nested-elements');
-
   Alchemy.growl('<%= Alchemy.t(:successfully_added_element) %>');
   Alchemy.closeCurrentDialog();
   Alchemy.reloadPreview();

data/app/views/alchemy/admin/elements/index.html.erb

@@ -1,36 +1,72 @@
-<% if @fixed_elements.any? %>
-  <sl-tab-group id="fixed-elements">
-    <sl-tab slot="nav" panel="main-content-elements">
-      <%= Alchemy.t(:main_content) %>
-    </sl-tab>
-    <% @fixed_elements.each do |element| %>
-      <sl-tab slot="nav" panel="fixed-element-<%= element.id %>">
-        <%= element.display_name %>
-      </sl-tab>
+<%= turbo_frame_tag "alchemy_elements_window" do %>
+  <alchemy-elements-window>
+    <div class="elements-window-toolbar">
+      <%= render Alchemy::Admin::ToolbarButton.new(
+        url: alchemy.new_admin_element_path(page_version_id: @page_version.id),
+        icon: :add,
+        hotkey: "alt+n",
+        label: Alchemy.t("New Element"),
+        dialog_options: {
+          title: Alchemy.t("New Element"),
+          size: "320x125"
+        },
+        if_permitted_to: [:create, Alchemy::Element]
+      ) %>
+      <%= render Alchemy::Admin::ToolbarButton.new(
+        url: alchemy.admin_clipboard_path(remarkable_type: "elements"),
+        label: Alchemy.t("Show clipboard"),
+        icon: :clipboard,
+        icon_style: clipboard_empty?("elements") ? "line" : "fill",
+        dialog_options: {
+          title: Alchemy.t("Clipboard"),
+          size: "400x305"
+        },
+        link_options: {
+          id: "clipboard_button"
+        },
+        if_permitted_to: [:index, :alchemy_admin_clipboard]
+      ) %>
+      <sl-tooltip content="<%= Alchemy.t("Collapse all elements") %>" placement="top-end" class="right">
+        <button id="collapse-all-elements-button" class="icon_button">
+          <alchemy-icon name="contract-up-down"></alchemy-icon>
+        </button>
+      </sl-tooltip>
+    </div>
+    <% if @page.element_definitions.any? { |el| el["fixed"] } %>
+      <sl-tab-group id="fixed-elements">
+        <sl-tab slot="nav" panel="main-content-elements">
+          <%= Alchemy.t(:main_content) %>
+        </sl-tab>
+        <% @fixed_elements.each do |element| %>
+          <sl-tab slot="nav" panel="fixed-element-<%= element.id %>">
+            <%= element.display_name %>
+          </sl-tab>
+        <% end %>
+        <sl-tab-panel
+          name="main-content-elements"
+          class="sortable-elements scrollable-elements"
+          data-droppable-elements="<%= @page.element_definition_names.join(' ') %>"
+          data-element-name="main-content-elements"
+          id="main-content-elements"
+          style="--padding: 0"
+        >
+          <%= render @elements.map { |element| Alchemy::ElementEditor.new(element) } %>
+        </sl-tab-panel>
+        <% @fixed_elements.each do |element| %>
+          <sl-tab-panel name="fixed-element-<%= element.id %>" style="--padding: 0" class="scrollable-elements">
+            <%= render Alchemy::ElementEditor.new(element) %>
+          </sl-tab-panel>
+        <% end %>
+      </sl-tab-group>
+    <% else %>
+      <div
+        id="main-content-elements"
+        class="sortable-elements scrollable-elements"
+        data-droppable-elements="<%= @page.element_definition_names.join(' ') %>"
+        data-element-name="main-content-elements"
+      >
+        <%= render @elements.map { |element| Alchemy::ElementEditor.new(element) } %>
+      </div>
     <% end %>
-    <sl-tab-panel
-      name="main-content-elements"
-      class="sortable-elements scrollable-elements"
-      data-droppable-elements="<%= @page.element_definition_names.join(' ') %>"
-      data-element-name="main-content-elements"
-      id="main-content-elements"
-      style="--padding: 0"
-    >
-      <%= render @elements.map { |element| Alchemy::ElementEditor.new(element) } %>
-    </sl-tab-panel>
-    <% @fixed_elements.each do |element| %>
-      <sl-tab-panel name="fixed-element-<%= element.id %>" style="--padding: 0" class="scrollable-elements">
-        <%= render Alchemy::ElementEditor.new(element) %>
-      </sl-tab-panel>
-    <% end %>
-  </sl-tab-group>
-<% else %>
-  <div
-    id="main-content-elements"
-    class="sortable-elements scrollable-elements"
-    data-droppable-elements="<%= @page.element_definition_names.join(' ') %>"
-    data-element-name="main-content-elements"
-  >
-    <%= render @elements.map { |element| Alchemy::ElementEditor.new(element) } %>
-  </div>
+  </alchemy-elements-window>
 <% end %>

data/app/views/alchemy/admin/ingredients/_file_fields.html.erb

@@ -5,9 +5,9 @@
 <%- if css_classes.present? -%>
   <%= f.input :css_class,
     collection: css_classes,
-    include_blank: Alchemy.t('None'),
-    input_html: {is: 'alchemy-select'} %>
+    include_blank: Alchemy.t('None') %>
 <%- else -%>
+  <% Alchemy::Deprecation.warn %(Float positioning in File ingredients is deprecated. If you rely on them, please use `css_classes` in your "#{ingredient.role}" settings instead.) %>
   <%= f.input :css_class,
     label: Alchemy.t(:position_in_text),
     collection: [

data/app/views/alchemy/admin/ingredients/_picture_fields.html.erb

@@ -1,20 +1,19 @@
 <%= f.input :caption, as: ingredient.settings[:caption_as_textarea] ? 'text' : 'string' %>
 <%= f.input :title %>
-<%= f.input :alt_tag %>
+<%= f.input :alt_tag, as: :text, placeholder: ingredient.alt_text(language: @language) %>
 <%- if ingredient.settings[:sizes].present? && ingredient.settings[:srcset].blank? -%>
   <%= f.input :render_size,
     collection: [
       [Alchemy.t('Layout default'), ""]
     ] + ingredient.settings[:sizes].to_a,
-    include_blank: false,
-    input_html: {is: 'alchemy-select'} %>
+    include_blank: false %>
 <%- end -%>
 <%- if ingredient.settings[:css_classes].present? -%>
   <%= f.input :css_class,
     collection: ingredient.settings[:css_classes],
-    include_blank: Alchemy.t('None'),
-    input_html: {is: 'alchemy-select'} %>
+    include_blank: Alchemy.t('None') %>
 <%- else -%>
+  <% Alchemy::Deprecation.warn %(Float positioning in Picture ingredients is deprecated. If you rely on them, please use `css_classes` in your "#{ingredient.role}" settings instead.) %>
   <%= f.input :css_class,
     label: Alchemy.t(:position_in_text),
     collection: [

data/app/views/alchemy/admin/ingredients/update.turbo_stream.erb

@@ -0,0 +1,5 @@
+<alchemy-action name="closeCurrentDialog"></alchemy-action>
+<alchemy-action name="reloadPreview"></alchemy-action>
+<% if @ingredient.settings[:anchor] %>
+<alchemy-action name="updateAnchorIcon" params="<%= [@ingredient.id, @ingredient.dom_id.present?].to_json %>"></alchemy-action>
+<% end %>

data/app/views/alchemy/admin/languages/_language.html.erb

@@ -1,6 +1,6 @@
 <tr class="<%= cycle('even', 'odd') %>">
   <td class="icon">
-    <%= render_icon("translate-2", size: "xl", style: nil) %>
+    <%= render_icon("translate-2", size: "xl", style: false) %>
   </td>
   <td>
     <%= language.name %>