macron-cms 1.0.0 → 2.0.0

data/app/views/macron/cms/articles/_content_blocks_section.html.erb

@@ -0,0 +1,531 @@
+<% article_contents ||= [] %>
+<% content_types ||= [] %>
+<% newly_added_id ||= nil %>
+<% updated_id ||= nil %>
+
+<div class="space-y-6">
+  <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 border-b border-zinc-200 pb-4">
+    <div>
+      <div class="flex items-center gap-3">
+        <h2 class="text-xl font-bold tracking-tight text-zinc-900">Article Content Blocks</h2>
+        <span class="inline-flex items-center rounded-full bg-zinc-100 px-2.5 py-0.5 text-xs font-semibold text-zinc-800 ring-1 ring-inset ring-zinc-300">
+          <%= pluralize(article_contents.size, "block") %>
+        </span>
+      </div>
+      <p class="text-xs text-zinc-500 mt-1">Re-order blocks using drag-and-drop or the Move Up/Down buttons.</p>
+    </div>
+  </div>
+
+  <!-- Content Blocks List -->
+  <div
+    id="content-blocks-list"
+    data-reorder-url="<%= reorder_article_article_contents_path(article) %>"
+    class="space-y-2"
+  >
+    <% if article_contents.any? %>
+      <!-- Inserter above first block (Position 1) -->
+      <div id="inserter-zone-top" class="block-inserter-zone py-0.5" data-position="1">
+        <div class="block-inserter-divider relative py-0.5 flex items-center justify-center group">
+          <div class="absolute inset-0 flex items-center" aria-hidden="true">
+            <div class="w-full border-t border-dashed border-zinc-200 group-hover:border-zinc-300 transition-colors"></div>
+          </div>
+          <button
+            type="button"
+            onclick="toggleInsertForm(1, this);"
+            aria-label="Add block at position 1"
+            class="inserter-toggle-btn relative z-10 inline-flex items-center gap-1 rounded-full bg-white px-2.5 py-1 text-xs font-semibold text-zinc-500 shadow-2xs border border-zinc-200 opacity-60 hover:opacity-100 hover:text-zinc-900 hover:border-zinc-400 focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-zinc-900 group-hover:opacity-100 transition-all cursor-pointer"
+          >
+            <svg class="w-3.5 h-3.5 transition-transform duration-150" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+            </svg>
+            <span class="text-[11px] font-medium">Add block</span>
+          </button>
+        </div>
+        <div id="insert-slot-1" class="insert-slot-target my-3 hidden"></div>
+      </div>
+
+      <% article_contents.each_with_index do |ac, index| %>
+        <% content_type = ac.content %>
+        <% fields = content_type ? content_type.normalized_fields : [] %>
+        <% is_new = (ac.id == newly_added_id) %>
+        <% is_updated = (ac.id == updated_id) %>
+        <div
+          id="article-content-<%= ac.id %>"
+          data-id="<%= ac.id %>"
+          draggable="true"
+          class="content-block-item group rounded-xl border border-zinc-200 bg-white shadow-2xs transition-all duration-300 hover:shadow-xs <%= 'ring-2 ring-emerald-500/80 bg-emerald-50/15' if is_new %> <%= 'ring-2 ring-blue-500/80 bg-blue-50/15' if is_updated %>"
+        >
+          <!-- Card Header & Actions -->
+          <div class="flex flex-wrap items-center justify-between gap-3 border-b border-zinc-100 bg-zinc-50/70 px-5 py-3.5 rounded-t-xl">
+            <div class="flex items-center gap-3">
+              <!-- Drag Handle -->
+              <div class="cursor-grab active:cursor-grabbing text-zinc-400 group-hover:text-zinc-600 transition-colors" title="Drag to reorder">
+                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5" />
+                </svg>
+              </div>
+
+              <span class="inline-flex items-center rounded-md bg-zinc-200/70 px-2 py-0.5 text-xs font-mono font-bold text-zinc-800 position-badge">
+                #<%= index + 1 %>
+              </span>
+
+              <span class="inline-flex items-center rounded-md bg-emerald-50 px-2.5 py-0.5 text-xs font-mono font-medium text-emerald-800 ring-1 ring-inset ring-emerald-200">
+                <%= content_type ? content_type.name : "Unknown" %>
+              </span>
+            </div>
+
+            <!-- Action Buttons -->
+            <div class="flex items-center gap-1.5">
+              <!-- Move Up -->
+              <%= button_to move_article_article_content_path(article, ac, direction: "up"), method: :patch, disabled: (index == 0), class: "inline-flex items-center justify-center w-8 h-8 rounded-lg border border-zinc-200 bg-white text-zinc-600 hover:bg-zinc-50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors cursor-pointer" do %>
+                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
+                </svg>
+              <% end %>
+
+              <!-- Move Down -->
+              <%= button_to move_article_article_content_path(article, ac, direction: "down"), method: :patch, disabled: (index == article_contents.size - 1), class: "inline-flex items-center justify-center w-8 h-8 rounded-lg border border-zinc-200 bg-white text-zinc-600 hover:bg-zinc-50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors cursor-pointer" do %>
+                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+                </svg>
+              <% end %>
+
+              <!-- Edit Toggle Button -->
+              <button
+                type="button"
+                onclick="document.getElementById('edit-form-<%= ac.id %>').classList.toggle('hidden'); document.getElementById('view-payload-<%= ac.id %>').classList.toggle('hidden');"
+                class="inline-flex items-center gap-1 rounded-lg border border-zinc-200 bg-white px-2.5 py-1.5 text-xs font-semibold text-zinc-700 hover:bg-zinc-50 transition-colors cursor-pointer"
+              >
+                <svg class="w-3.5 h-3.5 text-zinc-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Z" />
+                </svg>
+                Edit
+              </button>
+
+              <!-- Delete Block Button -->
+              <% del_block_confirm = "Are you sure you want to remove this #{content_type ? content_type.name : 'content'} block?" %>
+              <%= button_to article_article_content_path(article, ac), method: :delete, onclick: "return confirm(#{del_block_confirm.to_json});", data: { turbo_confirm: del_block_confirm }, class: "inline-flex items-center justify-center w-8 h-8 rounded-lg border border-rose-200 bg-rose-50 text-rose-600 hover:bg-rose-100 transition-colors cursor-pointer" do %>
+                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+                </svg>
+              <% end %>
+            </div>
+          </div>
+
+          <!-- View Payload Mode -->
+          <div id="view-payload-<%= ac.id %>" class="p-5">
+            <% if fields.any? %>
+              <dl class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                <% fields.each do |f| %>
+                  <% fname = f["name"] %>
+                  <% fkind = f["kind"] %>
+                  <% fval = ac.payload[fname] %>
+                  <div class="<%= fkind.in?(%w[text markdown]) ? 'sm:col-span-2' : '' %>">
+                    <dt class="text-xs font-mono font-medium text-zinc-500 uppercase tracking-wide">
+                      <%= fname %>
+                      <span class="text-[10px] text-zinc-400 lowercase font-normal">(<%= fkind %>)</span>
+                    </dt>
+                    <dd class="mt-1 text-sm text-zinc-900 bg-zinc-50/80 rounded-lg p-2.5 border border-zinc-100 font-sans">
+                      <% if fval.present? || ac.files.attached? %>
+                        <% if fkind == 'markdown' %>
+                          <div class="prose prose-zinc prose-sm max-w-none">
+                            <%= cms_render_markdown(fval) %>
+                          </div>
+                        <% elsif fkind == 'text' %>
+                          <div class="whitespace-pre-wrap"><%= fval %></div>
+                        <% elsif fkind == 'file' && ac.files.attached? %>
+                          <div class="space-y-2">
+                            <% ac.files.each do |att| %>
+                              <div class="flex items-center gap-2.5">
+                                <% if att.image? %>
+                                  <div class="w-10 h-10 rounded-md overflow-hidden bg-zinc-100 border border-zinc-200 shrink-0">
+                                    <%= image_tag main_app.rails_blob_path(att), class: "w-full h-full object-cover" %>
+                                  </div>
+                                <% else %>
+                                  <div class="w-8 h-8 rounded-md bg-zinc-100 border border-zinc-200 flex items-center justify-center shrink-0 text-zinc-500">
+                                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                                      <path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
+                                    </svg>
+                                  </div>
+                                <% end %>
+                                <div class="min-w-0">
+                                  <p class="text-xs font-medium font-mono text-zinc-900 truncate"><%= att.filename %></p>
+                                  <p class="text-[10px] text-zinc-400"><%= number_to_human_size(att.byte_size) %></p>
+                                </div>
+                              </div>
+                            <% end %>
+                          </div>
+                        <% else %>
+                          <span><%= fval %></span>
+                        <% end %>
+                      <% else %>
+                        <span class="italic text-zinc-400 text-xs">Empty</span>
+                      <% end %>
+                    </dd>
+                  </div>
+                <% end %>
+              </dl>
+            <% else %>
+              <p class="text-xs text-zinc-500 italic">No fields defined for this content type.</p>
+            <% end %>
+          </div>
+
+          <!-- Inline Edit Form -->
+          <div id="edit-form-<%= ac.id %>" class="hidden p-5 border-t border-zinc-100 bg-zinc-50/30">
+            <%= form_with(model: [article, ac], multipart: true, class: "space-y-4") do |f| %>
+              <div class="space-y-4">
+                <% fields.each do |field_def| %>
+                  <% fname = field_def["name"] %>
+                  <%= cms_render_field(
+                    field_def,
+                    value: ac.payload[fname],
+                    input_name: "article_content[payload][#{fname}]",
+                    input_id: "edit_article_content_#{ac.id}_payload_#{fname}"
+                  ) %>
+                <% end %>
+              </div>
+
+              <div class="flex items-center gap-3 pt-2">
+                <%= f.submit "Save Changes", class: "rounded-lg bg-zinc-900 px-4 py-2 text-xs font-semibold text-white shadow-2xs hover:bg-zinc-800 transition-colors cursor-pointer" %>
+                <button
+                  type="button"
+                  onclick="document.getElementById('edit-form-<%= ac.id %>').classList.add('hidden'); document.getElementById('view-payload-<%= ac.id %>').classList.remove('hidden');"
+                  class="rounded-lg border border-zinc-300 bg-white px-3.5 py-2 text-xs font-medium text-zinc-700 hover:bg-zinc-50 transition-colors cursor-pointer"
+                >
+                  Cancel
+                </button>
+              </div>
+            <% end %>
+          </div>
+        </div>
+
+        <!-- Inserter after block #<%= index + 1 %> (Position <%= index + 2 %>) -->
+        <div class="block-inserter-zone py-0.5" data-position="<%= index + 2 %>" data-block-id="<%= ac.id %>">
+          <div class="block-inserter-divider relative py-0.5 flex items-center justify-center group">
+            <div class="absolute inset-0 flex items-center" aria-hidden="true">
+              <div class="w-full border-t border-dashed border-zinc-200 group-hover:border-zinc-300 transition-colors"></div>
+            </div>
+            <button
+              type="button"
+              onclick="toggleInsertForm(<%= index + 2 %>, this);"
+              aria-label="Add block at position <%= index + 2 %>"
+              class="inserter-toggle-btn relative z-10 inline-flex items-center gap-1 rounded-full bg-white px-2.5 py-1 text-xs font-semibold text-zinc-500 shadow-2xs border border-zinc-200 opacity-60 hover:opacity-100 hover:text-zinc-900 hover:border-zinc-400 focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-zinc-900 group-hover:opacity-100 transition-all cursor-pointer"
+            >
+              <svg class="w-3.5 h-3.5 transition-transform duration-150" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+              </svg>
+              <span class="text-[11px] font-medium">Add block</span>
+            </button>
+          </div>
+          <div id="insert-slot-<%= index + 2 %>" class="insert-slot-target my-3 hidden"></div>
+        </div>
+      <% end %>
+    <% else %>
+      <div class="rounded-xl border border-dashed border-zinc-300 bg-white p-8 text-center">
+        <svg class="mx-auto h-10 w-10 text-zinc-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+        </svg>
+        <h3 class="mt-2 text-sm font-semibold text-zinc-900">No content blocks yet</h3>
+        <p class="mt-1 text-xs text-zinc-500">Get started by adding the first block to this article.</p>
+        <div class="mt-4">
+          <button
+            type="button"
+            onclick="toggleInsertForm(1, this);"
+            aria-label="Add first block"
+            class="inserter-toggle-btn inline-flex items-center gap-1.5 rounded-lg bg-zinc-900 px-3.5 py-2 text-xs font-semibold text-white shadow-2xs hover:bg-zinc-800 transition-colors cursor-pointer"
+          >
+            <svg class="w-4 h-4 transition-transform duration-150" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+            </svg>
+            Add First Block
+          </button>
+        </div>
+        <div id="insert-slot-1" class="insert-slot-target mt-4 text-left hidden"></div>
+      </div>
+    <% end %>
+  </div>
+
+  <!-- Reusable In-Place Add Content Block Card (hidden staging storage) -->
+  <div id="form-dock-storage" class="hidden">
+    <div id="reusable-add-block-card" class="overflow-hidden rounded-xl border border-zinc-300 bg-white shadow-md ring-1 ring-zinc-900/5 transition-all">
+      <div class="px-6 py-4 border-b border-zinc-200 bg-zinc-50 flex items-center justify-between">
+        <div class="flex items-center gap-2.5">
+          <div class="w-6 h-6 rounded-md bg-zinc-900 text-white flex items-center justify-center shrink-0">
+            <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+            </svg>
+          </div>
+          <div>
+            <div class="flex items-center gap-2">
+              <h3 class="text-sm font-semibold text-zinc-900">Add Content Block</h3>
+              <span id="insert-form-position-badge" class="inline-flex items-center rounded-md bg-zinc-200/80 px-2 py-0.5 text-xs font-mono font-semibold text-zinc-800">
+                Position #1
+              </span>
+            </div>
+            <p class="text-xs text-zinc-500 mt-0.5">Select a Content Type and populate its fields.</p>
+          </div>
+        </div>
+        <button
+          type="button"
+          onclick="closeInsertForm();"
+          class="text-zinc-400 hover:text-zinc-700 transition-colors rounded-lg p-1 hover:bg-zinc-100 cursor-pointer"
+          title="Close (Esc)"
+        >
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+
+      <div class="p-6">
+        <% if content_types.any? %>
+          <div class="space-y-4">
+            <div>
+              <label for="new_content_type_select" class="block text-xs font-semibold text-zinc-900 mb-1.5">
+                Select Content Type
+              </label>
+              <select
+                id="new_content_type_select"
+                class="block w-full sm:w-80 rounded-lg border border-zinc-300 bg-white px-3.5 py-2 text-sm text-zinc-900 shadow-2xs focus:border-zinc-900 focus:outline-none focus:ring-1 focus:ring-zinc-900"
+                onchange="switchNewContentType(this.value);"
+              >
+                <option value="">-- Choose a Content Type --</option>
+                <% content_types.each do |ct| %>
+                  <option value="<%= ct.id %>"><%= ct.name %> (<%= pluralize(ct.normalized_fields.size, "field") %>)</option>
+                <% end %>
+              </select>
+            </div>
+
+            <!-- Dynamic Form per Content Type -->
+            <% content_types.each do |ct| %>
+              <% ct_fields = ct.normalized_fields %>
+              <div id="new-content-type-form-<%= ct.id %>" class="new-content-type-form hidden pt-4 border-t border-zinc-100">
+                <%= form_with(url: article_article_contents_path(article), scope: :article_content, multipart: true, class: "space-y-4") do |f| %>
+                  <%= f.hidden_field :content_id, value: ct.id %>
+                  <%= f.hidden_field :insert_at, value: 1, class: "insert-at-field" %>
+
+                  <div class="space-y-4">
+                    <% ct_fields.each do |field_def| %>
+                      <% fname = field_def["name"] %>
+                      <%= cms_render_field(
+                        field_def,
+                        value: nil,
+                        input_name: "article_content[payload][#{fname}]",
+                        input_id: "new_content_#{ct.id}_payload_#{fname}"
+                      ) %>
+                    <% end %>
+                  </div>
+
+                  <div class="flex items-center gap-3 pt-2">
+                    <%= f.submit "Add #{ct.name.titleize} Block", class: "inline-flex items-center gap-1.5 rounded-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white shadow-2xs hover:bg-zinc-800 transition-colors cursor-pointer" %>
+                    <button
+                      type="button"
+                      onclick="closeInsertForm();"
+                      class="rounded-lg border border-zinc-300 bg-white px-3.5 py-2 text-xs font-medium text-zinc-700 hover:bg-zinc-50 transition-colors cursor-pointer"
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                <% end %>
+              </div>
+            <% end %>
+          </div>
+        <% else %>
+          <div class="text-center py-4">
+            <p class="text-sm text-zinc-500">No content types defined yet.</p>
+            <p class="text-xs text-zinc-400 mt-1">Run <code class="font-mono bg-zinc-100 px-1 py-0.5 rounded">bin/rails macron:cms:import_content_types</code> to import defined schemas.</p>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  window.activeInsertPosition = null;
+  window.activeTriggerBtn = null;
+
+  window.switchNewContentType = function(selectedId) {
+    document.querySelectorAll('.new-content-type-form').forEach(function(el) {
+      el.classList.add('hidden');
+    });
+    if (selectedId) {
+      var target = document.getElementById('new-content-type-form-' + selectedId);
+      if (target) target.classList.remove('hidden');
+    }
+  };
+
+  window.toggleInsertForm = function(position, triggerBtn) {
+    if (window.activeInsertPosition === position) {
+      window.closeInsertForm();
+      return;
+    }
+
+    var targetSlot = document.getElementById('insert-slot-' + position);
+    var card = document.getElementById('reusable-add-block-card');
+    if (!targetSlot || !card) return;
+
+    window.closeInsertForm(true);
+
+    window.activeInsertPosition = position;
+    window.activeTriggerBtn = triggerBtn;
+
+    var badge = document.getElementById('insert-form-position-badge');
+    if (badge) {
+      badge.textContent = 'Position #' + position;
+    }
+
+    document.querySelectorAll('.insert-at-field').forEach(function(input) {
+      input.value = position;
+    });
+
+    targetSlot.appendChild(card);
+    targetSlot.classList.remove('hidden');
+
+    if (triggerBtn) {
+      triggerBtn.classList.add('!bg-zinc-900', '!text-white', '!border-zinc-900', '!opacity-100');
+      var svg = triggerBtn.querySelector('svg');
+      if (svg) svg.classList.add('rotate-45');
+    }
+
+    var select = document.getElementById('new_content_type_select');
+    if (select) {
+      setTimeout(function() { select.focus(); }, 50);
+    }
+  };
+
+  window.closeInsertForm = function(skipResetStorage) {
+    var card = document.getElementById('reusable-add-block-card');
+    var storage = document.getElementById('form-dock-storage');
+
+    if (window.activeTriggerBtn) {
+      window.activeTriggerBtn.classList.remove('!bg-zinc-900', '!text-white', '!border-zinc-900', '!opacity-100');
+      var svg = window.activeTriggerBtn.querySelector('svg');
+      if (svg) svg.classList.remove('rotate-45');
+      window.activeTriggerBtn = null;
+    }
+
+    document.querySelectorAll('.insert-slot-target').forEach(function(slot) {
+      slot.classList.add('hidden');
+    });
+
+    if (card && storage && !skipResetStorage) {
+      storage.appendChild(card);
+    }
+
+    window.activeInsertPosition = null;
+  };
+
+  if (!window._macronEscapeBound) {
+    document.addEventListener('keydown', function(e) {
+      if (e.key === 'Escape' && window.activeInsertPosition !== null) {
+        window.closeInsertForm();
+      }
+    });
+    window._macronEscapeBound = true;
+  }
+
+  // Fade out any highlight rings
+  setTimeout(function() {
+    document.querySelectorAll('.content-block-item.ring-2').forEach(function(el) {
+      el.classList.remove('ring-2', 'ring-emerald-500/80', 'bg-emerald-50/15', 'ring-blue-500/80', 'bg-blue-50/15');
+    });
+  }, 2500);
+
+  // Initialize Drag & Drop
+  (function initDragAndDrop() {
+    var container = document.getElementById('content-blocks-list');
+    if (!container) return;
+
+    var draggedItem = null;
+
+    container.addEventListener('dragstart', function(e) {
+      var item = e.target.closest('.content-block-item');
+      if (!item) return;
+      window.closeInsertForm();
+      draggedItem = item;
+      e.dataTransfer.effectAllowed = 'move';
+      item.classList.add('opacity-50', 'border-zinc-400');
+    });
+
+    container.addEventListener('dragend', function(e) {
+      var item = e.target.closest('.content-block-item');
+      if (item) {
+        item.classList.remove('opacity-50', 'border-zinc-400');
+      }
+      draggedItem = null;
+      sendNewOrder();
+    });
+
+    container.addEventListener('dragover', function(e) {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'move';
+      var targetItem = e.target.closest('.content-block-item');
+      if (targetItem && targetItem !== draggedItem) {
+        var rect = targetItem.getBoundingClientRect();
+        var next = (e.clientY - rect.top) / (rect.bottom - rect.top) > 0.5;
+        container.insertBefore(draggedItem, next ? targetItem.nextSibling : targetItem);
+      }
+    });
+
+    function sendNewOrder() {
+      var items = container.querySelectorAll('.content-block-item');
+      var orderedIds = [];
+      items.forEach(function(item, idx) {
+        orderedIds.push(item.getAttribute('data-id'));
+        var badge = item.querySelector('.position-badge');
+        if (badge) badge.textContent = '#' + (idx + 1);
+      });
+
+      refreshInserterSlots();
+
+      var reorderUrl = container.getAttribute('data-reorder-url');
+      var csrfToken = document.querySelector('meta[name="csrf-token"]');
+
+      if (reorderUrl && orderedIds.length > 0) {
+        fetch(reorderUrl, {
+          method: 'PATCH',
+          headers: {
+            'Content-Type': 'application/json',
+            'X-CSRF-Token': csrfToken ? csrfToken.content : '',
+            'Accept': 'application/json'
+          },
+          body: JSON.stringify({ ordered_ids: orderedIds })
+        }).catch(function(err) {
+          console.error('Failed to update content block order:', err);
+        });
+      }
+    }
+
+    function refreshInserterSlots() {
+      var items = container.querySelectorAll('.content-block-item');
+      var topZone = document.getElementById('inserter-zone-top');
+      if (topZone && container.firstElementChild !== topZone) {
+        container.insertBefore(topZone, container.firstElementChild);
+      }
+
+      items.forEach(function(item) {
+        var blockId = item.getAttribute('data-id');
+        var trailingZone = container.querySelector('.block-inserter-zone[data-block-id="' + blockId + '"]');
+        if (trailingZone) {
+          item.after(trailingZone);
+        }
+      });
+
+      var allZones = container.querySelectorAll('.block-inserter-zone');
+      allZones.forEach(function(zone, idx) {
+        var pos = idx + 1;
+        zone.setAttribute('data-position', pos);
+        var btn = zone.querySelector('.inserter-toggle-btn');
+        if (btn) {
+          btn.setAttribute('onclick', 'toggleInsertForm(' + pos + ', this);');
+          btn.setAttribute('aria-label', 'Add block at position ' + pos);
+        }
+        var slot = zone.querySelector('.insert-slot-target');
+        if (slot) {
+          slot.id = 'insert-slot-' + pos;
+        }
+      });
+    }
+  })();
+</script>