macron-cms 1.0.0

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

@@ -0,0 +1,366 @@
+<% content_for :title, "#{@article.title} - Macron CMS" %>
+<% cms_breadcrumb "Articles", articles_path %>
+<% cms_breadcrumb @article.title %>
+
+<div class="space-y-8">
+  <!-- Page Header -->
+  <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 border-b border-zinc-200 pb-6">
+    <div class="space-y-2">
+      <div class="flex items-center gap-2 flex-wrap">
+        <h1 class="text-2xl font-bold tracking-tight text-zinc-900 sm:text-3xl"><%= @article.title %></h1>
+        <span class="inline-flex items-center rounded-md bg-zinc-100 px-2 py-1 text-xs font-mono font-medium text-zinc-700 ring-1 ring-inset ring-zinc-200">
+          <%= @article.slug %>
+        </span>
+      </div>
+      <p class="text-xs text-zinc-500">
+        Created on <%= @article.created_at.strftime("%B %d, %Y at %H:%M UTC") %> &middot; Updated <%= time_ago_in_words(@article.updated_at) %> ago
+      </p>
+    </div>
+
+    <!-- Actions -->
+    <div class="flex items-center gap-2.5 shrink-0">
+      <% if main_app.respond_to?(:article_path) %>
+        <%= link_to main_app.article_path(@article), class: "inline-flex items-center gap-1.5 rounded-lg border border-zinc-300 bg-white px-3.5 py-2 text-sm font-semibold text-zinc-700 shadow-2xs hover:bg-zinc-50 transition-colors", target: "_blank", rel: "noopener" do %>
+          <svg class="w-4 h-4 text-zinc-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+          </svg>
+          Public View
+        <% end %>
+      <% end %>
+
+      <%= link_to edit_article_path(@article), class: "inline-flex items-center gap-1.5 rounded-lg bg-zinc-900 px-3.5 py-2 text-sm font-semibold text-white shadow-2xs hover:bg-zinc-800 transition-colors" 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="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.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
+        </svg>
+        Edit
+      <% end %>
+
+      <% delete_confirm = "Are you sure you want to delete \"#{@article.title}\"?" %>
+      <%= button_to article_path(@article), method: :delete, onclick: "return confirm(#{delete_confirm.to_json});", data: { turbo_confirm: delete_confirm }, class: "inline-flex items-center gap-1.5 rounded-lg border border-rose-200 bg-rose-50 px-3.5 py-2 text-sm font-semibold text-rose-700 hover:bg-rose-100 transition-colors cursor-pointer" do %>
+        <svg class="w-4 h-4 text-rose-500" 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>
+        Delete
+      <% end %>
+    </div>
+  </div>
+
+  <!-- Article Details Card -->
+  <div class="overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-xs">
+    <div class="px-6 py-4 border-b border-zinc-200 bg-zinc-50">
+      <h3 class="text-sm font-semibold text-zinc-900">Record Information</h3>
+    </div>
+    <dl class="divide-y divide-zinc-200">
+      <div class="px-6 py-4 sm:grid sm:grid-cols-3 sm:gap-4">
+        <dt class="text-sm font-medium text-zinc-500">Record ID</dt>
+        <dd class="mt-1 text-sm font-mono text-zinc-900 sm:col-span-2 sm:mt-0"><%= @article.id %></dd>
+      </div>
+      <div class="px-6 py-4 sm:grid sm:grid-cols-3 sm:gap-4">
+        <dt class="text-sm font-medium text-zinc-500">Title</dt>
+        <dd class="mt-1 text-sm font-medium text-zinc-900 sm:col-span-2 sm:mt-0"><%= @article.title %></dd>
+      </div>
+    </dl>
+  </div>
+
+  <!-- Content Blocks Section -->
+  <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.count, "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-4"
+    >
+      <% if @article_contents.any? %>
+        <% @article_contents.each_with_index do |ac, index| %>
+          <% content_type = ac.content %>
+          <% fields = content_type ? content_type.normalized_fields : [] %>
+          <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-shadow hover:shadow-xs"
+          >
+            <!-- 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" 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" 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 == 'text' ? '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? %>
+                          <% if fkind == 'text' %>
+                            <div class="whitespace-pre-wrap"><%= fval %></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], 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>
+        <% 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">Choose a content type below to add the first block to this article.</p>
+        </div>
+      <% end %>
+    </div>
+
+    <!-- Add Content Block Card -->
+    <div class="overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-xs">
+      <div class="px-6 py-4 border-b border-zinc-200 bg-zinc-50 flex items-center justify-between">
+        <div>
+          <h3 class="text-sm font-semibold text-zinc-900">Add Content Block</h3>
+          <p class="text-xs text-zinc-500 mt-0.5">Select a Content Type and populate its fields.</p>
+        </div>
+      </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, class: "space-y-4") do |f| %>
+                  <%= f.hidden_field :content_id, value: ct.id %>
+
+                  <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="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" %>
+                  </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 class="pt-2">
+    <%= link_to "&larr; Back to all articles".html_safe, articles_path, class: "text-sm font-medium text-zinc-600 hover:text-zinc-900 transition-colors" %>
+  </div>
+</div>
+
+<script>
+  function switchNewContentType(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');
+    }
+  }
+
+  // HTML5 Drag and Drop Reordering
+  (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;
+      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);
+      });
+
+      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);
+        });
+      }
+    }
+  })();
+</script>

data/app/views/macron/cms/content_types/index.html.erb

@@ -0,0 +1,87 @@
+<% content_for :title, "Content Types - Macron CMS" %>
+<% cms_breadcrumb "Content Types" %>
+
+<div class="space-y-6">
+  <!-- Page Header -->
+  <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 border-b border-zinc-200 pb-6">
+    <div>
+      <div class="flex items-center gap-3">
+        <h1 class="text-2xl font-bold tracking-tight text-zinc-900 sm:text-3xl">Content Types</h1>
+        <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(@content_types.count, "content type") %>
+        </span>
+      </div>
+      <p class="mt-1 text-sm text-zinc-500">Manage and inspect imported content type schemas and field definitions.</p>
+    </div>
+  </div>
+
+  <% if @content_types.any? %>
+    <div class="overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-xs">
+      <div class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-zinc-200 text-left text-sm">
+          <thead class="bg-zinc-50 text-zinc-700 font-semibold text-xs uppercase tracking-wider">
+            <tr>
+              <th scope="col" class="px-6 py-3.5">Name</th>
+              <th scope="col" class="px-6 py-3.5">Fields Summary</th>
+              <th scope="col" class="px-6 py-3.5">Created At</th>
+              <th scope="col" class="px-6 py-3.5 text-right">Actions</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-zinc-200">
+            <% @content_types.each do |content_type| %>
+              <%
+                field_list = if content_type.fields.is_a?(Array)
+                  content_type.fields
+                elsif content_type.fields.is_a?(Hash) && content_type.fields.present?
+                  [content_type.fields]
+                else
+                  []
+                end
+              %>
+              <tr class="hover:bg-zinc-50/80 transition-colors">
+                <td class="px-6 py-4 font-semibold text-zinc-900 whitespace-nowrap">
+                  <div class="flex items-center gap-2">
+                    <%= link_to content_type.name, content_type_path(content_type), class: "hover:underline font-mono text-sm" %>
+                  </div>
+                </td>
+                <td class="px-6 py-4 text-zinc-600 text-xs">
+                  <% if field_list.any? %>
+                    <div class="flex flex-wrap gap-1.5">
+                      <% field_list.each do |field| %>
+                        <span class="inline-flex items-center rounded-md bg-zinc-100 px-2 py-0.5 font-mono text-[11px] text-zinc-700 ring-1 ring-inset ring-zinc-200">
+                          <%= field["name"] || field[:name] || "field" %>
+                          <span class="text-zinc-600 ml-1">(<%= field["kind"] || field[:kind] || "any" %>)</span>
+                        </span>
+                      <% end %>
+                    </div>
+                  <% else %>
+                    <span class="text-zinc-600 italic">No fields defined</span>
+                  <% end %>
+                </td>
+                <td class="px-6 py-4 text-zinc-500 text-xs whitespace-nowrap">
+                  <%= content_type.created_at.strftime("%b %d, %Y") rescue "—" %>
+                </td>
+                <td class="px-6 py-4 text-right text-xs font-medium whitespace-nowrap">
+                  <%= link_to "Show", content_type_path(content_type), class: "text-zinc-700 hover:text-zinc-900 hover:underline" %>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  <% else %>
+    <div class="rounded-xl border border-dashed border-zinc-300 bg-white p-12 text-center">
+      <svg class="mx-auto h-12 w-12 text-zinc-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3" />
+      </svg>
+      <h3 class="mt-2 text-sm font-semibold text-zinc-900">No content types found</h3>
+      <p class="mt-1 text-sm text-zinc-500">Import YAML content types from your application by running the import task.</p>
+      <div class="mt-4">
+        <code class="rounded-md bg-zinc-100 px-3 py-1.5 font-mono text-xs text-zinc-800 ring-1 ring-inset ring-zinc-200">
+          bin/rails macron:cms:import_content_types
+        </code>
+      </div>
+    </div>
+  <% end %>
+</div>

data/app/views/macron/cms/content_types/show.html.erb

@@ -0,0 +1,148 @@
+<% content_for :title, "#{@content_type.name.titleize} - Content Types - Macron CMS" %>
+<% cms_breadcrumb "Content Types", content_types_path %>
+<% cms_breadcrumb @content_type.name %>
+
+<%
+  field_list = if @content_type.fields.is_a?(Array)
+    @content_type.fields
+  elsif @content_type.fields.is_a?(Hash) && @content_type.fields.present?
+    [@content_type.fields]
+  else
+    []
+  end
+%>
+
+<div class="space-y-6">
+  <!-- Page Header -->
+  <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 border-b border-zinc-200 pb-6">
+    <div class="space-y-2">
+      <div class="flex items-center gap-3 flex-wrap">
+        <h1 class="text-2xl font-bold tracking-tight text-zinc-900 sm:text-3xl font-mono"><%= @content_type.name %></h1>
+        <span class="inline-flex items-center rounded-md bg-zinc-100 px-2.5 py-1 text-xs font-semibold text-zinc-800 ring-1 ring-inset ring-zinc-300">
+          <%= pluralize(field_list.count, "field") %>
+        </span>
+      </div>
+      <p class="text-xs text-zinc-500">
+        Created on <%= @content_type.created_at.strftime("%B %d, %Y at %H:%M UTC") rescue "—" %> &middot; Updated <%= time_ago_in_words(@content_type.updated_at) rescue "—" %> ago
+      </p>
+    </div>
+
+    <!-- Actions -->
+    <div class="flex items-center gap-2.5 shrink-0">
+      <%= link_to content_types_path, class: "inline-flex items-center gap-1.5 rounded-lg border border-zinc-300 bg-white px-3.5 py-2 text-sm font-semibold text-zinc-700 shadow-2xs hover:bg-zinc-50 transition-colors" do %>
+        <svg class="w-4 h-4 text-zinc-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
+        </svg>
+        Back to Content Types
+      <% end %>
+    </div>
+  </div>
+
+  <!-- Record Information Card -->
+  <div class="overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-xs">
+    <div class="px-6 py-4 border-b border-zinc-200 bg-zinc-50">
+      <h3 class="text-sm font-semibold text-zinc-900">Record Information</h3>
+    </div>
+    <dl class="divide-y divide-zinc-200">
+      <div class="px-6 py-4 sm:grid sm:grid-cols-3 sm:gap-4">
+        <dt class="text-sm font-medium text-zinc-500">Record ID</dt>
+        <dd class="mt-1 text-sm font-mono text-zinc-900 sm:col-span-2 sm:mt-0"><%= @content_type.id %></dd>
+      </div>
+      <div class="px-6 py-4 sm:grid sm:grid-cols-3 sm:gap-4">
+        <dt class="text-sm font-medium text-zinc-500">Content Type Name</dt>
+        <dd class="mt-1 text-sm font-mono font-medium text-zinc-900 sm:col-span-2 sm:mt-0"><%= @content_type.name %></dd>
+      </div>
+      <div class="px-6 py-4 sm:grid sm:grid-cols-3 sm:gap-4">
+        <dt class="text-sm font-medium text-zinc-500">Field Count</dt>
+        <dd class="mt-1 text-sm text-zinc-900 sm:col-span-2 sm:mt-0"><%= field_list.count %></dd>
+      </div>
+      <div class="px-6 py-4 sm:grid sm:grid-cols-3 sm:gap-4">
+        <dt class="text-sm font-medium text-zinc-500">Created At</dt>
+        <dd class="mt-1 text-sm text-zinc-900 sm:col-span-2 sm:mt-0"><%= @content_type.created_at.to_fs(:long) rescue @content_type.created_at.to_s %></dd>
+      </div>
+      <div class="px-6 py-4 sm:grid sm:grid-cols-3 sm:gap-4">
+        <dt class="text-sm font-medium text-zinc-500">Last Updated</dt>
+        <dd class="mt-1 text-sm text-zinc-900 sm:col-span-2 sm:mt-0"><%= @content_type.updated_at.to_fs(:long) rescue @content_type.updated_at.to_s %></dd>
+      </div>
+    </dl>
+  </div>
+
+  <!-- Field Details Card -->
+  <div class="overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-xs">
+    <div class="px-6 py-4 border-b border-zinc-200 bg-zinc-50 flex items-center justify-between">
+      <div>
+        <h3 class="text-sm font-semibold text-zinc-900">Defined Fields</h3>
+        <p class="text-xs text-zinc-500 mt-0.5">Attributes and input types schema configured for this content type.</p>
+      </div>
+      <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(field_list.count, "attribute") %>
+      </span>
+    </div>
+
+    <% if field_list.any? %>
+      <div class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-zinc-200 text-left text-sm">
+          <thead class="bg-zinc-50/50 text-zinc-700 font-semibold text-xs uppercase tracking-wider">
+            <tr>
+              <th scope="col" class="px-6 py-3">Field Name</th>
+              <th scope="col" class="px-6 py-3">Kind / Type</th>
+              <th scope="col" class="px-6 py-3">Additional Attributes</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-zinc-200">
+            <% field_list.each do |field| %>
+              <%
+                fname = field["name"] || field[:name] || "—"
+                fkind = field["kind"] || field[:kind] || "string"
+                extra_keys = field.reject { |k, _| %w[name kind].include?(k.to_s) }
+              %>
+              <tr class="hover:bg-zinc-50/60 transition-colors">
+                <td class="px-6 py-3.5 font-mono font-medium text-zinc-900 whitespace-nowrap">
+                  <%= fname %>
+                </td>
+                <td class="px-6 py-3.5 whitespace-nowrap">
+                  <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">
+                    <%= fkind %>
+                  </span>
+                </td>
+                <td class="px-6 py-3.5 text-xs text-zinc-600">
+                  <% if extra_keys.any? %>
+                    <dl class="flex flex-wrap gap-x-4 gap-y-1">
+                      <% extra_keys.each do |k, v| %>
+                        <div class="flex items-center gap-1">
+                          <dt class="font-mono text-zinc-500"><%= k %>:</dt>
+                          <dd class="font-mono font-medium text-zinc-800"><%= v.inspect %></dd>
+                        </div>
+                      <% end %>
+                    </dl>
+                  <% else %>
+                    <span class="text-zinc-600 italic">None</span>
+                  <% end %>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+    <% else %>
+      <div class="p-6 text-center text-sm text-zinc-500 italic">
+        No field schema definitions present.
+      </div>
+    <% end %>
+  </div>
+
+  <!-- Raw JSON Schema Preview Card -->
+  <div class="overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-xs">
+    <div class="px-6 py-4 border-b border-zinc-200 bg-zinc-50 flex items-center justify-between">
+      <h3 class="text-sm font-semibold text-zinc-900">Raw Field Schema (JSON)</h3>
+      <span class="text-xs font-mono text-zinc-600">application/json</span>
+    </div>
+    <div class="p-6 bg-zinc-900 overflow-x-auto text-zinc-100">
+      <pre class="font-mono text-xs text-zinc-100 leading-relaxed" style="color: #f4f4f5;"><code><%= JSON.pretty_generate(@content_type.fields.presence || {}) rescue (@content_type.fields || {}).inspect %></code></pre>
+    </div>
+  </div>
+
+  <div class="pt-2">
+    <%= link_to "&larr; Back to all content types".html_safe, content_types_path, class: "text-sm font-medium text-zinc-600 hover:text-zinc-900 transition-colors" %>
+  </div>
+</div>