@sonicjs-cms/core 2.8.3 → 2.10.0

package/dist/{chunk-CH5UHZVM.js → chunk-JTNUM7JE.js}

@@ -1,10 +1,10 @@
-import { getCacheService, CACHE_CONFIGS, getLogger, SettingsService } from './chunk-G44QUVNM.js';
-import { requireAuth, isPluginActive, optionalAuth, requireRole, rateLimit, AuthManager, logActivity, generateCsrfToken } from './chunk-Y3VMEGY2.js';
-import { PluginService } from './chunk-YFJJU26H.js';
-import { MigrationService } from './chunk-GTFMI24U.js';
+import { getCacheService, CACHE_CONFIGS, getLogger, SettingsService, getAppInstance, buildRouteList, CATEGORY_INFO } from './chunk-7JMMLHPQ.js';
+import { requireAuth, requireRole, isPluginActive, optionalAuth, rateLimit, AuthManager, logActivity, generateCsrfToken } from './chunk-4TTMQQC7.js';
+import { PluginService } from './chunk-27AOVQTR.js';
+import { MigrationService } from './chunk-6O3RJV3C.js';
 import { init_admin_layout_catalyst_template, renderDesignPage, renderCheckboxPage, renderTestimonialsList, renderCodeExamplesList, renderAlert, renderTable, renderPagination, renderConfirmationDialog, getConfirmationDialogScript, renderAdminLayoutCatalyst, renderAdminLayout, adminLayoutV2, renderForm } from './chunk-JJS7JZCH.js';
 import { PluginBuilder, TurnstileService } from './chunk-J5WGMRSU.js';
-import { QueryFilterBuilder, getCoreVersion, getBlocksFieldConfig, parseBlocksValue } from './chunk-5XAI2XUF.js';
+import { QueryFilterBuilder, getCoreVersion, getBlocksFieldConfig, parseBlocksValue } from './chunk-IZWNIUJI.js';
 import { metricsTracker } from './chunk-FICTAGD4.js';
 import { escapeHtml, sanitizeRichText, sanitizeInput } from './chunk-TQABQWOP.js';
 import { Hono } from 'hono';
@@ -119,7 +119,7 @@ apiContentCrudRoutes.get("/:id", async (c) => {
     }, 500);
   }
 });
-apiContentCrudRoutes.post("/", requireAuth(), async (c) => {
+apiContentCrudRoutes.post("/", requireAuth(), requireRole(["admin", "editor", "author"]), async (c) => {
   try {
     const db = c.env.DB;
     const user = c.get("user");
@@ -185,7 +185,7 @@ apiContentCrudRoutes.post("/", requireAuth(), async (c) => {
     }, 500);
   }
 });
-apiContentCrudRoutes.put("/:id", requireAuth(), async (c) => {
+apiContentCrudRoutes.put("/:id", requireAuth(), requireRole(["admin", "editor", "author"]), async (c) => {
   try {
     const id = c.req.param("id");
     const db = c.env.DB;
@@ -249,7 +249,7 @@ apiContentCrudRoutes.put("/:id", requireAuth(), async (c) => {
     }, 500);
   }
 });
-apiContentCrudRoutes.delete("/:id", requireAuth(), async (c) => {
+apiContentCrudRoutes.delete("/:id", requireAuth(), requireRole(["admin", "editor", "author"]), async (c) => {
   try {
     const id = c.req.param("id");
     const db = c.env.DB;
@@ -2281,7 +2281,7 @@ adminApiRoutes.delete("/collections/:id", async (c) => {
 });
 adminApiRoutes.get("/migrations/status", async (c) => {
   try {
-    const { MigrationService: MigrationService2 } = await import('./migrations-KHWFJ2HN.js');
+    const { MigrationService: MigrationService2 } = await import('./migrations-N2C2VPJU.js');
     const db = c.env.DB;
     const migrationService = new MigrationService2(db);
     const status = await migrationService.getMigrationStatus();
@@ -2306,7 +2306,7 @@ adminApiRoutes.post("/migrations/run", async (c) => {
         error: "Unauthorized. Admin access required."
       }, 403);
     }
-    const { MigrationService: MigrationService2 } = await import('./migrations-KHWFJ2HN.js');
+    const { MigrationService: MigrationService2 } = await import('./migrations-N2C2VPJU.js');
     const db = c.env.DB;
     const migrationService = new MigrationService2(db);
     const result = await migrationService.runPendingMigrations();
@@ -2325,7 +2325,7 @@ adminApiRoutes.post("/migrations/run", async (c) => {
 });
 adminApiRoutes.get("/migrations/validate", async (c) => {
   try {
-    const { MigrationService: MigrationService2 } = await import('./migrations-KHWFJ2HN.js');
+    const { MigrationService: MigrationService2 } = await import('./migrations-N2C2VPJU.js');
     const db = c.env.DB;
     const migrationService = new MigrationService2(db);
     const validation = await migrationService.validateSchema();
@@ -4284,7 +4284,7 @@ function getMDXEditorInitScript(config) {
   const toolbar = config?.toolbar || "full";
   const placeholder = config?.placeholder || "Start writing your content...";
   return `
-    // Initialize EasyMDE (Markdown Editor) for all richtext fields
+    // Initialize EasyMDE (Markdown Editor) only for markdown-marked fields
     function initializeMDXEditor() {
       if (typeof EasyMDE === 'undefined') {
         console.warn('EasyMDE not loaded yet, retrying...');
@@ -4293,7 +4293,7 @@ function getMDXEditorInitScript(config) {
       }
 
       // Find all textareas that need EasyMDE
-      document.querySelectorAll('.richtext-container textarea').forEach((textarea) => {
+      document.querySelectorAll('.richtext-container[data-editor-provider="easymde"] textarea').forEach((textarea) => {
         // Skip if already initialized
         if (textarea.dataset.mdxeditorInitialized === 'true') {
           return;
@@ -4392,11 +4392,11 @@ function getTinyMCEInitScript(config) {
   const contentCss = skin.includes("dark") ? "dark" : "default";
   const defaultHeight = config?.defaultHeight || 300;
   return `
-    // Initialize TinyMCE for all richtext fields
+    // Initialize TinyMCE only for TinyMCE-backed richtext fields
     function initializeTinyMCE() {
       if (typeof tinymce !== 'undefined') {
         // Find all textareas that need TinyMCE
-        document.querySelectorAll('.richtext-container textarea').forEach((textarea) => {
+        document.querySelectorAll('.richtext-container[data-editor-provider="tinymce"] textarea').forEach((textarea) => {
           // Skip if already initialized
           if (tinymce.get(textarea.id)) {
             return;
@@ -4775,6 +4775,39 @@ function getReadFieldValueScript() {
         window.__sonicReadFieldValueInit = true;
 
         window.sonicReadFieldValue = function(fieldWrapper) {
+          const getDirectChild = (parent, selector) => {
+            if (!(parent instanceof Element)) return null;
+            return Array.from(parent.children).find(
+              (child) => child instanceof Element && child.matches(selector),
+            ) || null;
+          };
+          const getDirectStructuredSubfields = (host) =>
+            Array.from(host.children).filter(
+              (child) => child instanceof Element && child.classList.contains('structured-subfield'),
+            );
+          const getStructuredObjectFieldsHost = (container) => {
+            const directFieldsHost = getDirectChild(container, '[data-structured-object-fields]');
+            if (directFieldsHost) return directFieldsHost;
+            const groupContent = getDirectChild(container, '.field-group-content');
+            const nestedFieldsHost = groupContent
+              ? getDirectChild(groupContent, '[data-structured-object-fields]')
+              : null;
+            if (nestedFieldsHost) return nestedFieldsHost;
+            return getDirectChild(container, '[data-array-item-fields]') || container;
+          };
+          const getDirectStructuredObject = (fieldWrapper) => {
+            const directObject = getDirectChild(fieldWrapper, '[data-structured-object]');
+            if (directObject) return directObject;
+            const formGroup = getDirectChild(fieldWrapper, '.form-group');
+            return formGroup ? getDirectChild(formGroup, '[data-structured-object]') : null;
+          };
+          const getDirectStructuredArray = (fieldWrapper) => {
+            const directArray = getDirectChild(fieldWrapper, '[data-structured-array]');
+            if (directArray) return directArray;
+            const formGroup = getDirectChild(fieldWrapper, '.form-group');
+            return formGroup ? getDirectChild(formGroup, '[data-structured-array]') : null;
+          };
+
           const fieldType = fieldWrapper.dataset.fieldType;
           const select = fieldWrapper.querySelector('select');
           const textarea = fieldWrapper.querySelector('textarea');
@@ -4784,7 +4817,47 @@ function getReadFieldValueScript() {
           const nonHiddenInput = inputs.find((input) => input.type !== 'hidden' && input.type !== 'checkbox');
           const hiddenInput = inputs.find((input) => input.type === 'hidden');
 
+          const readStructuredFieldsHost = (host) => {
+            const fields = getDirectStructuredSubfields(host);
+            if (fields.length === 1 && fields[0].dataset.structuredField === '__value') {
+              return window.sonicReadFieldValue(fields[0]);
+            }
+            return fields.reduce((acc, subfield) => {
+              const fieldName = subfield.dataset.structuredField;
+              if (!fieldName || fieldName === '__value') return acc;
+              acc[fieldName] = window.sonicReadFieldValue(subfield);
+              return acc;
+            }, {});
+          };
+
+          const readStructuredObject = () => {
+            const objectContainer = getDirectStructuredObject(fieldWrapper);
+            if (!objectContainer) return null;
+            const host = getStructuredObjectFieldsHost(objectContainer);
+            return readStructuredFieldsHost(host);
+          };
+
+          const readStructuredArray = () => {
+            const arrayContainer = getDirectStructuredArray(fieldWrapper);
+            if (!arrayContainer) return null;
+            const list = arrayContainer.querySelector('[data-structured-array-list]');
+            if (!list) return [];
+            const items = Array.from(list.querySelectorAll(':scope > .structured-array-item'));
+            return items.map((item) => {
+              const host =
+                item.querySelector(':scope > [data-array-item-fields]') ||
+                item.querySelector('[data-array-item-fields]') ||
+                item;
+              return readStructuredFieldsHost(host);
+            });
+          };
+
           if (fieldType === 'object' || fieldType === 'array') {
+            const liveValue = fieldType === 'array' ? readStructuredArray() : readStructuredObject();
+            if (liveValue !== null) {
+              return liveValue;
+            }
+
             if (!hiddenInput) {
               return fieldType === 'array' ? [] : {};
             }
@@ -4833,6 +4906,33 @@ function getReadFieldValueScript() {
     </script>
   `;
 }
+var STRUCTURED_INDEX_TOKEN = "__INDEX__";
+var BLOCK_INDEX_TOKEN = "__BLOCK_INDEX__";
+function sanitizeStructuredGroupId(fieldName) {
+  return `object-${fieldName}`.split(BLOCK_INDEX_TOKEN).map(
+    (blockSegment) => blockSegment.split(STRUCTURED_INDEX_TOKEN).map(
+      (segment) => segment.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "")
+    ).join(STRUCTURED_INDEX_TOKEN)
+  ).join(BLOCK_INDEX_TOKEN);
+}
+function isMarkdownEditorFieldType(fieldType) {
+  return fieldType === "markdown" || fieldType === "mdxeditor" || fieldType === "easymde";
+}
+function getEditorMetadata(fieldType) {
+  if (fieldType === "richtext" || fieldType === "tinymce") {
+    return {
+      family: "richtext",
+      provider: "tinymce"
+    };
+  }
+  if (isMarkdownEditorFieldType(fieldType)) {
+    return {
+      family: "markdown",
+      provider: "easymde"
+    };
+  }
+  return null;
+}
 function renderDynamicField(field, options = {}) {
   const { value = "", errors = [], disabled = false, className = "", pluginStatuses = {}, collectionId = "", contentId = "" } = options;
   const opts = field.field_options || {};
@@ -4846,10 +4946,10 @@ function renderDynamicField(field, options = {}) {
   if (field.field_type === "quill" && !pluginStatuses.quillEnabled) {
     fallbackToTextarea = true;
     fallbackWarning = "\u26A0\uFE0F Quill Editor plugin is inactive. Using textarea fallback.";
-  } else if ((field.field_type === "mdxeditor" || field.field_type === "easymde" || field.field_type === "markdown") && !pluginStatuses.mdxeditorEnabled) {
+  } else if (isMarkdownEditorFieldType(field.field_type) && !pluginStatuses.mdxeditorEnabled) {
     fallbackToTextarea = true;
-    fallbackWarning = "\u26A0\uFE0F EasyMDE plugin is inactive. Using textarea fallback.";
-  } else if (field.field_type === "tinymce" && !pluginStatuses.tinymceEnabled) {
+    fallbackWarning = "\u26A0\uFE0F Markdown editor plugin is inactive. Using textarea fallback.";
+  } else if ((field.field_type === "richtext" || field.field_type === "tinymce") && !pluginStatuses.tinymceEnabled) {
     fallbackToTextarea = true;
     fallbackWarning = "\u26A0\uFE0F TinyMCE plugin is inactive. Using textarea fallback.";
   }
@@ -4971,8 +5071,10 @@ function renderDynamicField(field, options = {}) {
       `;
       break;
     case "richtext":
+    case "tinymce": {
+      const editorMetadata = getEditorMetadata(field.field_type);
       fieldHTML = `
-        <div class="richtext-container" data-height="${opts.height || 300}" data-toolbar="${opts.toolbar || "full"}">
+        <div class="richtext-container" data-height="${opts.height || 300}" data-toolbar="${opts.toolbar || "full"}" data-editor-family="${editorMetadata?.family || ""}" data-editor-provider="${editorMetadata?.provider || ""}">
           <textarea
             id="${fieldId}"
             name="${fieldName}"
@@ -4983,6 +5085,7 @@ function renderDynamicField(field, options = {}) {
         </div>
       `;
       break;
+    }
     case "quill":
       fieldHTML = `
         <div class="quill-editor-container" data-field-id="${fieldId}">
@@ -5006,12 +5109,12 @@ function renderDynamicField(field, options = {}) {
         </div>
       `;
       break;
-    case "mdxeditor":
-    case "tinymce":
-    case "easymde":
     case "markdown":
+    case "mdxeditor":
+    case "easymde": {
+      const editorMetadata = getEditorMetadata(field.field_type);
       fieldHTML = `
-        <div class="richtext-container" data-height="${opts.height || 300}" data-toolbar="${opts.toolbar || "full"}">
+        <div class="richtext-container" data-height="${opts.height || 300}" data-toolbar="${opts.toolbar || "full"}" data-editor-family="${editorMetadata?.family || ""}" data-editor-provider="${editorMetadata?.provider || ""}">
           <textarea
             id="${fieldId}"
             name="${fieldName}"
@@ -5022,6 +5125,7 @@ function renderDynamicField(field, options = {}) {
         </div>
       `;
       break;
+    }
     case "number":
       fieldHTML = `
         <input 
@@ -5391,12 +5495,14 @@ function renderDynamicField(field, options = {}) {
 
           ${isMultiple ? `
             <div class="media-preview-grid grid grid-cols-4 gap-2 mb-2 ${mediaValues.length === 0 ? "hidden" : ""}" id="${fieldId}-preview">
-              ${mediaValues.map((url, idx) => `
+              ${mediaValues.map(
+        (url, idx) => `
                 <div class="relative media-preview-item" data-url="${url}">
                   ${renderMediaPreview(url, `Media ${idx + 1}`, "w-full h-24 object-cover rounded-lg border border-white/20")}
                   <button
                     type="button"
                     onclick="removeMediaFromMultiple('${fieldId}', '${url}')"
+                    data-media-remove="true"
                     class="absolute top-1 right-1 bg-red-600 text-white rounded-full p-1 hover:bg-red-700"
                     ${disabled ? "disabled" : ""}
                   >
@@ -5405,7 +5511,8 @@ function renderDynamicField(field, options = {}) {
                     </svg>
                   </button>
                 </div>
-              `).join("")}
+              `
+      ).join("")}
             </div>
           ` : `
             <div class="media-preview ${singleValue ? "" : "hidden"}" id="${fieldId}-preview">
@@ -5429,6 +5536,7 @@ function renderDynamicField(field, options = {}) {
               <button
                 type="button"
                 onclick="clearMediaField('${fieldId}')"
+                data-media-remove="true"
                 class="inline-flex items-center px-4 py-2 bg-red-600 text-white rounded-xl hover:bg-red-700 transition-all"
                 ${disabled ? "disabled" : ""}
               >
@@ -5462,7 +5570,7 @@ function renderDynamicField(field, options = {}) {
   }
   const showLabel = field.field_type !== "boolean";
   return `
-    <div class="form-group">
+    <div class="form-group" data-has-errors="${errors.length > 0 ? "true" : "false"}">
       ${showLabel ? `
       <label for="${fieldId}" class="block text-sm/6 font-medium text-zinc-950 dark:text-white mb-2">
         ${escapeHtml3(field.field_label)}
@@ -5471,7 +5579,7 @@ function renderDynamicField(field, options = {}) {
       ` : ""}
       ${fieldHTML}
       ${errors.length > 0 ? `
-        <div class="mt-2 text-sm text-pink-600 dark:text-pink-400">
+        <div class="mt-2 text-sm text-pink-600 dark:text-pink-400" data-validation-error-message>
           ${errors.map((error) => `<div>${escapeHtml3(error)}</div>`).join("")}
         </div>
       ` : ""}
@@ -5486,8 +5594,8 @@ function renderDynamicField(field, options = {}) {
 function renderFieldGroup(title, fields, collapsible = false) {
   const groupId = title.toLowerCase().replace(/\s+/g, "-");
   return `
-    <div class="field-group rounded-lg bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 mb-6">
-      <div class="field-group-header border-b border-zinc-950/5 dark:border-white/10 px-6 py-4 ${collapsible ? "cursor-pointer" : ""}" ${collapsible ? `onclick="toggleFieldGroup('${groupId}')"` : ""}>
+    <div class="field-group rounded-lg bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 mb-6" data-group-id="${escapeHtml3(groupId)}">
+      <div class="field-group-header border-b border-zinc-950/5 dark:border-white/10 px-6 py-4 ${collapsible ? "cursor-pointer" : ""}" ${collapsible ? `onclick="toggleFieldGroup(this)"` : ""}>
         <h3 class="text-base/7 font-semibold text-zinc-950 dark:text-white flex items-center">
           ${escapeHtml3(title)}
           ${collapsible ? `
@@ -5531,6 +5639,12 @@ function renderBlocksField(field, options, baseClasses, errorClasses) {
     >
       <input type="hidden" id="${fieldId}" name="${fieldName}" value="${escapeHtml3(JSON.stringify(blockValues))}">
 
+      <div class="flex items-center justify-between border-b border-zinc-950/5 dark:border-white/10 py-4">
+        <h3 class="text-base/7 font-semibold text-zinc-950 dark:text-white">
+          ${escapeHtml3(field.field_label || "Content Blocks")}
+        </h3>
+      </div>
+
       <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div class="flex-1">
           <select
@@ -5561,12 +5675,14 @@ function renderBlocksField(field, options, baseClasses, errorClasses) {
   `;
 }
 function renderStructuredObjectField(field, options, baseClasses, errorClasses) {
-  const { value = {}, pluginStatuses = {} } = options;
+  const { value = {}, pluginStatuses = {}, errors = [] } = options;
   const opts = field.field_options || {};
   const properties = opts.properties && typeof opts.properties === "object" ? opts.properties : {};
   const fieldId = `field-${field.field_name}`;
   const fieldName = field.field_name;
   const objectValue = normalizeStructuredObjectValue(value);
+  const objectLayout = opts.objectLayout || "nested";
+  const useNestedLayout = objectLayout !== "flat";
   const subfields = Object.entries(properties).map(
     ([propertyName, propertyConfig]) => renderStructuredSubfield(
       field,
@@ -5577,11 +5693,40 @@ function renderStructuredObjectField(field, options, baseClasses, errorClasses)
       field.field_name
     )
   ).join("");
+  const groupTitle = field.field_label || field.field_name;
+  if (!useNestedLayout) {
+    return `
+      <div class="space-y-4" data-structured-object data-field-name="${escapeHtml3(fieldName)}">
+        <input type="hidden" id="${fieldId}" name="${fieldName}" value="${escapeHtml3(JSON.stringify(objectValue))}">
+        <div class="flex items-center justify-between border-b border-zinc-950/5 dark:border-white/10 py-4 first-of-type:pt-0">
+          <h3 class="text-base/7 font-semibold text-zinc-950 dark:text-white">
+            ${escapeHtml3(groupTitle)}
+          </h3>
+        </div>
+        <div class="space-y-4" data-structured-object-fields>
+          ${subfields}
+        </div>
+      </div>
+      ${getStructuredFieldScript()}
+    `;
+  }
+  const groupId = sanitizeStructuredGroupId(field.field_name);
+  const isCollapsed = errors.length > 0 ? false : opts.collapsed !== false;
   return `
-    <div class="space-y-4" data-structured-object data-field-name="${escapeHtml3(fieldName)}">
-      <input type="hidden" id="${fieldId}" name="${fieldName}" value="${escapeHtml3(JSON.stringify(objectValue))}">
-      <div class="space-y-4" data-structured-object-fields>
-        ${subfields}
+    <div class="field-group rounded-lg shadow-sm mb-6" data-group-id="${escapeHtml3(groupId)}" data-structured-object data-field-name="${escapeHtml3(fieldName)}">
+      <div class="field-group-header border-b border-zinc-950/5 dark:border-white/10 pr-6 pb-4 cursor-pointer" onclick="toggleFieldGroup(this)">
+        <h3 class="text-base/7 font-semibold text-zinc-950 dark:text-white flex items-center">
+          ${escapeHtml3(groupTitle)}
+          <svg id="${groupId}-icon" class="w-5 h-5 ml-2 transform transition-transform ${isCollapsed ? "-rotate-90" : ""} text-zinc-500 dark:text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+          </svg>
+        </h3>
+      </div>
+      <div id="${groupId}-content" class="field-group-content px-6 py-6 space-y-4 ${isCollapsed ? "hidden" : ""}">
+        <input type="hidden" id="${fieldId}" name="${fieldName}" value="${escapeHtml3(JSON.stringify(objectValue))}">
+        <div class="space-y-4" data-structured-object-fields>
+          ${subfields}
+        </div>
       </div>
     </div>
     ${getStructuredFieldScript()}
@@ -5652,7 +5797,7 @@ function renderStructuredArrayField(field, options, baseClasses, errorClasses) {
 function renderStructuredArrayItem(field, itemConfig, index, itemValue, pluginStatuses, arrayItemTitle) {
   const itemFields = renderStructuredItemFields(field, itemConfig, index, itemValue, pluginStatuses);
   return `
-    <div class="structured-array-item rounded-lg border border-zinc-200 dark:border-white/10 bg-white/60 dark:bg-white/5 p-4 shadow-sm" data-array-index="${escapeHtml3(index)}" draggable="true">
+    <div class="structured-array-item rounded-lg border border-zinc-200 dark:border-white/10 bg-white/60 dark:bg-zinc-600/5 p-4 shadow-lg shadow-zinc-950/20" data-array-index="${escapeHtml3(index)}" draggable="true">
       <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div class="flex items-center gap-3">
           <div class="drag-handle cursor-move text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-400" data-action="drag-handle" title="Drag to reorder">
@@ -5665,6 +5810,11 @@ function renderStructuredArrayItem(field, itemConfig, index, itemValue, pluginSt
           </div>
         </div>
         <div class="flex flex-wrap gap-2 text-xs">
+          <button type="button" data-action="toggle-item" class="inline-flex items-center justify-center rounded-md border border-zinc-200 px-2 py-1 text-zinc-600 hover:bg-zinc-100 dark:border-white/10 dark:text-zinc-300 dark:hover:bg-white/10" aria-label="Expand item" title="Expand">
+            <svg class="h-4 w-4 transition-transform -rotate-90 text-zinc-500 dark:text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" data-item-toggle-icon>
+              <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path>
+            </svg>
+          </button>
           <button type="button" data-action="move-up" class="inline-flex items-center justify-center rounded-md border border-zinc-200 px-2 py-1 text-zinc-600 hover:bg-zinc-100 dark:border-white/10 dark:text-zinc-300 dark:hover:bg-white/10 disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent dark:disabled:hover:bg-transparent" aria-label="Move item up" title="Move up">
             <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="4">
               <path stroke-linecap="round" stroke-linejoin="round" d="M12 6l-4 4m4-4l4 4m-4-4v12"/>
@@ -5683,7 +5833,7 @@ function renderStructuredArrayItem(field, itemConfig, index, itemValue, pluginSt
           </button>
         </div>
       </div>
-      <div class="mt-4 space-y-4" data-array-item-fields>
+      <div class="mt-4 space-y-4 hidden" data-array-item-fields>
         ${itemFields}
       </div>
     </div>
@@ -5793,7 +5943,7 @@ function normalizeBlocksValue(value, discriminator) {
 function renderBlockTemplate(field, block, discriminator, pluginStatuses) {
   return `
     <template data-block-template="${escapeHtml3(block.name)}">
-      ${renderBlockCard(field, block, discriminator, "__INDEX__", {}, pluginStatuses)}
+      ${renderBlockCard(field, block, discriminator, BLOCK_INDEX_TOKEN, {}, pluginStatuses)}
     </template>
   `;
 }
@@ -5835,7 +5985,7 @@ function renderBlockCard(field, block, discriminator, index, data, pluginStatuse
     `;
   }).join("");
   return `
-    <div class="blocks-item rounded-lg border border-zinc-200 dark:border-white/10 bg-white/60 dark:bg-white/5 p-4 shadow-sm" data-block-type="${escapeHtml3(block.name)}" data-block-discriminator="${escapeHtml3(discriminator)}" draggable="true">
+    <div class="blocks-item rounded-lg border border-zinc-200 dark:border-white/10 dark:bg-zinc-600/5 p-4 shadow-lg shadow-zinc-950/20" data-block-type="${escapeHtml3(block.name)}" data-block-discriminator="${escapeHtml3(discriminator)}" draggable="true">
       <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div class="flex items-start gap-3">
           <div class="drag-handle cursor-move text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-400" data-action="drag-handle" title="Drag to reorder">
@@ -5843,7 +5993,7 @@ function renderBlockCard(field, block, discriminator, index, data, pluginStatuse
               <path stroke-linecap="round" stroke-linejoin="round" d="M4 8h16M4 16h16"/>
             </svg>
           </div>
-          <div>
+          <div class="cursor-pointer" data-action="toggle-block">
             <div class="text-sm font-semibold text-zinc-900 dark:text-white">
               ${escapeHtml3(block.label)}
               <span class="ml-2 text-xs font-normal text-zinc-500 dark:text-zinc-400" data-block-order-label></span>
@@ -5852,6 +6002,11 @@ function renderBlockCard(field, block, discriminator, index, data, pluginStatuse
           </div>
         </div>
         <div class="flex flex-wrap gap-2 text-xs">
+          <button type="button" data-action="toggle-block" class="inline-flex items-center justify-center rounded-md border border-zinc-200 px-2 py-1 text-zinc-600 hover:bg-zinc-100 dark:border-white/10 dark:text-zinc-300 dark:hover:bg-white/10" aria-label="Expand block" title="Expand">
+            <svg class="h-4 w-4 transition-transform -rotate-90 text-zinc-500 dark:text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" data-block-toggle-icon>
+              <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path>
+            </svg>
+          </button>
           <button type="button" data-action="move-up" class="inline-flex items-center justify-center rounded-md border border-zinc-200 px-2 py-1 text-zinc-600 hover:bg-zinc-100 dark:border-white/10 dark:text-zinc-300 dark:hover:bg-white/10 disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent dark:disabled:hover:bg-transparent" aria-label="Move block up" title="Move up">
             <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="4">
               <path stroke-linecap="round" stroke-linejoin="round" d="M12 6l-4 4m4-4l4 4m-4-4v12"/>
@@ -5870,7 +6025,7 @@ function renderBlockCard(field, block, discriminator, index, data, pluginStatuse
           </button>
         </div>
       </div>
-      <div class="mt-4 space-y-4">
+      <div class="mt-4 space-y-4 hidden" data-block-content>
         ${blockFields}
       </div>
     </div>
@@ -5904,9 +6059,101 @@ function getStructuredFieldScript() {
 
         function initializeStructuredFields() {
           const readFieldValue = window.sonicReadFieldValue;
+          const getDirectChild = (parent, selector) => {
+            if (!(parent instanceof Element)) return null;
+            return Array.from(parent.children).find(
+              (child) => child instanceof Element && child.matches(selector),
+            ) || null;
+          };
+          const getDirectStructuredSubfields = (host) =>
+            Array.from(host.children).filter(
+              (child) => child instanceof Element && child.classList.contains('structured-subfield'),
+            );
+          const getStructuredValueHost = (container) => {
+            const directObjectHost = getDirectChild(container, '[data-structured-object-fields]');
+            if (directObjectHost) return directObjectHost;
+            const groupContent = getDirectChild(container, '.field-group-content');
+            const nestedObjectHost = groupContent
+              ? getDirectChild(groupContent, '[data-structured-object-fields]')
+              : null;
+            if (nestedObjectHost) return nestedObjectHost;
+            return getDirectChild(container, '[data-array-item-fields]') || container;
+          };
+          const getCollectionScope = () => {
+            const url = new URL(window.location.href);
+            const collectionFromQuery = url.searchParams.get('collection');
+            const form = document.getElementById('content-form');
+            const collectionInput = form?.querySelector('input[name="collection_id"]');
+            const collectionFromForm = collectionInput instanceof HTMLInputElement ? collectionInput.value : '';
+            const collectionId = collectionFromQuery || collectionFromForm || '';
+            return window.location.pathname + ':' + collectionId;
+          };
+
+          const getArrayStateKey = (container) => {
+            const fieldName = container.dataset.fieldName || 'unknown';
+            return 'sonic:ui:repeaters:' + getCollectionScope() + ':' + fieldName;
+          };
+
+          const readArrayState = (container) => {
+            try {
+              const raw = sessionStorage.getItem(getArrayStateKey(container));
+              if (!raw) return null;
+              const parsed = JSON.parse(raw);
+              return Array.isArray(parsed) ? parsed : null;
+            } catch {
+              return null;
+            }
+          };
+
+          const writeArrayState = (container, state) => {
+            try {
+              sessionStorage.setItem(getArrayStateKey(container), JSON.stringify(state));
+            } catch {}
+          };
+
+          const setArrayItemExpanded = (item, isExpanded) => {
+            const content = item.querySelector('[data-array-item-fields]');
+            const icon = item.querySelector('[data-item-toggle-icon]');
+            if (content instanceof HTMLElement) {
+              content.classList.toggle('hidden', !isExpanded);
+            }
+            if (icon instanceof Element) {
+              icon.classList.toggle('-rotate-90', !isExpanded);
+            }
+          };
+
+          const getArrayItems = (container, list) => {
+            if (list) {
+              return Array.from(list.querySelectorAll(':scope > .structured-array-item'));
+            }
+            return Array.from(
+              container.querySelectorAll(':scope > [data-structured-array-list] > .structured-array-item'),
+            );
+          };
+
+          const captureArrayState = (container) => {
+            return getArrayItems(container).map((item) => {
+              const content = item.querySelector('[data-array-item-fields]');
+              return content instanceof HTMLElement ? !content.classList.contains('hidden') : false;
+            });
+          };
+
+          const applyArrayState = (container, state) => {
+            const items = getArrayItems(container);
+            items.forEach((item, index) => {
+              if (typeof state[index] === 'boolean') {
+                setArrayItemExpanded(item, state[index]);
+              }
+            });
+          };
+
+          const syncArrayState = (container) => {
+            writeArrayState(container, captureArrayState(container));
+          };
 
           const readStructuredValue = (container) => {
-            const fields = Array.from(container.querySelectorAll('.structured-subfield'));
+            const fieldHost = getStructuredValueHost(container);
+            const fields = getDirectStructuredSubfields(fieldHost);
             if (fields.length === 1 && fields[0].dataset.structuredField === '__value') {
               return readFieldValue(fields[0]);
             }
@@ -5920,111 +6167,229 @@ function getStructuredFieldScript() {
           };
 
           document.querySelectorAll('[data-structured-object]').forEach((container) => {
+            if (container.closest('template')) {
+              return;
+            }
             if (container.dataset.structuredInitialized === 'true') {
               return;
             }
-            container.dataset.structuredInitialized = 'true';
-            const hiddenInput = container.querySelector('input[type="hidden"]');
+            if (container.dataset.structuredInitializing === 'true') {
+              return;
+            }
+            container.dataset.structuredInitializing = 'true';
+            try {
+              const hiddenInput = container.querySelector('input[type="hidden"]');
 
-            const updateHiddenInput = () => {
-              if (!hiddenInput) return;
-              const value = readStructuredValue(container);
-              hiddenInput.value = JSON.stringify(value);
-            };
+              const updateHiddenInput = () => {
+                if (!hiddenInput) return;
+                const value = readStructuredValue(container);
+                hiddenInput.value = JSON.stringify(value);
+              };
 
-            container.addEventListener('input', updateHiddenInput);
-            container.addEventListener('change', updateHiddenInput);
-            updateHiddenInput();
+              container.addEventListener('input', updateHiddenInput);
+              container.addEventListener('change', updateHiddenInput);
+              updateHiddenInput();
+              container.dataset.structuredInitialized = 'true';
+            } catch (error) {
+              delete container.dataset.structuredInitialized;
+              console.error('[structured-object] initialization failed', error);
+            } finally {
+              delete container.dataset.structuredInitializing;
+            }
           });
 
           document.querySelectorAll('[data-structured-array]').forEach((container) => {
+            if (container.closest('template')) {
+              return;
+            }
             if (container.dataset.structuredInitialized === 'true') {
               return;
             }
-            container.dataset.structuredInitialized = 'true';
-            const list = container.querySelector('[data-structured-array-list]');
-            const hiddenInput = container.querySelector('input[type="hidden"]');
-            const template = container.querySelector('template[data-structured-array-template]');
+            if (container.dataset.structuredInitializing === 'true') {
+              return;
+            }
+            container.dataset.structuredInitializing = 'true';
+            try {
+              const list = container.querySelector(':scope > [data-structured-array-list]');
+              const hiddenInput = container.querySelector(':scope > input[type="hidden"]');
+              const template = container.querySelector(':scope > template[data-structured-array-template]');
+              if (
+                template instanceof HTMLTemplateElement &&
+                typeof template.innerHTML === 'string' &&
+                template.innerHTML.trim()
+              ) {
+                container.__sonicStructuredArrayTemplate = template.innerHTML;
+              }
 
-            const updateOrderLabels = () => {
-              const items = Array.from(container.querySelectorAll('.structured-array-item'));
-              items.forEach((item, index) => {
-                const label = item.querySelector('[data-array-order-label]');
-                if (label) {
-                  label.textContent = '#'+ (index + 1);
+              const getLiveList = () =>
+                list || container.querySelector(':scope > [data-structured-array-list]');
+              const getLiveHiddenInput = () =>
+                hiddenInput || container.querySelector(':scope > input[type="hidden"]');
+              const getTemplateHtml = () => {
+                if (typeof container.__sonicStructuredArrayTemplate === 'string' &&
+                    container.__sonicStructuredArrayTemplate.trim()) {
+                  return container.__sonicStructuredArrayTemplate;
                 }
 
-                const moveUpButton = item.querySelector('[data-action="move-up"]');
-                if (moveUpButton instanceof HTMLButtonElement) {
-                  moveUpButton.disabled = index === 0;
+                const liveTemplate =
+                  template instanceof HTMLTemplateElement
+                    ? template
+                    : container.querySelector(':scope > template[data-structured-array-template]');
+                if (
+                  liveTemplate instanceof HTMLTemplateElement &&
+                  typeof liveTemplate.innerHTML === 'string' &&
+                  liveTemplate.innerHTML.trim()
+                ) {
+                  container.__sonicStructuredArrayTemplate = liveTemplate.innerHTML;
+                  return liveTemplate.innerHTML;
                 }
+                return typeof container.__sonicStructuredArrayTemplate === 'string'
+                  ? container.__sonicStructuredArrayTemplate
+                  : '';
+              };
 
-                const moveDownButton = item.querySelector('[data-action="move-down"]');
-                if (moveDownButton instanceof HTMLButtonElement) {
-                  moveDownButton.disabled = index === items.length - 1;
+              const updateOrderLabels = () => {
+                const liveList = getLiveList();
+                if (!liveList) return;
+                const items = getArrayItems(container, liveList);
+                items.forEach((item, index) => {
+                  const label = item.querySelector('[data-array-order-label]');
+                  if (label) {
+                    label.textContent = '#'+ (index + 1);
+                  }
+
+                  const moveUpButton = item.querySelector('[data-action="move-up"]');
+                  if (moveUpButton instanceof HTMLButtonElement) {
+                    moveUpButton.disabled = index === 0;
+                  }
+
+                  const moveDownButton = item.querySelector('[data-action="move-down"]');
+                  if (moveDownButton instanceof HTMLButtonElement) {
+                    moveDownButton.disabled = index === items.length - 1;
+                  }
+                });
+              };
+
+              const updateHiddenInput = () => {
+                const liveHiddenInput = getLiveHiddenInput();
+                const liveList = getLiveList();
+                if (!liveHiddenInput || !liveList) return;
+                const items = getArrayItems(container, liveList);
+                const values = items.map((item) => readStructuredValue(item));
+                liveHiddenInput.value = JSON.stringify(values);
+                // Notify parent structured containers after non-input actions (add/remove/move)
+                // so nested array mutations are persisted correctly.
+                liveHiddenInput.dispatchEvent(new Event('change', { bubbles: true }));
+
+                const emptyState = liveList.querySelector(':scope > [data-structured-empty]');
+                if (emptyState) {
+                  emptyState.style.display = values.length === 0 ? 'block' : 'none';
                 }
-              });
-            };
+                updateOrderLabels();
+              };
 
-            const updateHiddenInput = () => {
-              if (!hiddenInput || !list) return;
-              const items = Array.from(list.querySelectorAll('.structured-array-item'));
-              const values = items.map((item) => readStructuredValue(item));
-              hiddenInput.value = JSON.stringify(values);
+              const addArrayItem = () => {
+                const liveList = getLiveList();
+                if (!liveList) return;
+                const templateHtml = getTemplateHtml();
+                if (!templateHtml) return;
+                try {
+                  const nextIndex = getArrayItems(container, liveList).length;
+                  const html = templateHtml.replace(/__INDEX__/g, String(nextIndex));
+                  liveList.insertAdjacentHTML('beforeend', html);
+                  const newItem = liveList.lastElementChild;
+                  if (newItem instanceof HTMLElement) {
+                    // Ensure cloned template content can be initialized even if stale
+                    // data-structured-initialized attributes were copied.
+                    newItem
+                      .querySelectorAll('[data-structured-object], [data-structured-array]')
+                      .forEach((nestedContainer) => {
+                        if (nestedContainer instanceof HTMLElement) {
+                          delete nestedContainer.dataset.structuredInitialized;
+                        }
+                      });
+                    setArrayItemExpanded(newItem, true);
+                  }
+                  if (typeof initializeTinyMCE === 'function') {
+                    initializeTinyMCE();
+                  }
+                  if (typeof window.initializeQuillEditors === 'function') {
+                    window.initializeQuillEditors();
+                  }
+                  if (typeof initializeMDXEditor === 'function') {
+                    initializeMDXEditor();
+                  }
+                  if (typeof window.initializeStructuredFields === 'function') {
+                    window.initializeStructuredFields();
+                  }
+                  updateHiddenInput();
+                  syncArrayState(container);
+                } catch (error) {
+                  console.error('[structured-array] add-item failed', error);
+                }
+              };
 
-              const emptyState = list.querySelector('[data-structured-empty]');
-              if (emptyState) {
-                emptyState.style.display = values.length === 0 ? 'block' : 'none';
+              const topLevelAddButton = container.querySelector(
+                ':scope > .flex.items-center.justify-between.gap-3 [data-action="add-item"]',
+              );
+              if (topLevelAddButton instanceof HTMLElement) {
+                topLevelAddButton.addEventListener('click', (event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  addArrayItem();
+                });
               }
-              updateOrderLabels();
-            };
 
-            if (typeof window.initializeDragSortable === 'function' && list) {
-              window.initializeDragSortable(list, {
-                itemSelector: '.structured-array-item',
-                handleSelector: '[data-action="drag-handle"]',
-                onUpdate: updateHiddenInput
-              });
-            }
+              const dragList = getLiveList();
+              if (typeof window.initializeDragSortable === 'function' && dragList) {
+                window.initializeDragSortable(dragList, {
+                  itemSelector: '.structured-array-item',
+                  handleSelector: '[data-action="drag-handle"]',
+                  onUpdate: () => {
+                    updateHiddenInput();
+                    syncArrayState(container);
+                  }
+                });
+              }
 
-            container.addEventListener('click', (event) => {
+              container.addEventListener('click', (event) => {
               const target = event.target;
               if (!(target instanceof Element)) return;
               const actionButton = target.closest('[data-action]');
               if (!actionButton || actionButton.hasAttribute('disabled')) return;
+              const actionOwner = actionButton.closest('[data-structured-array]');
+              if (actionOwner !== container) return;
 
-              const action = actionButton.getAttribute('data-action');
+                const action = actionButton.getAttribute('data-action');
 
-              if (action === 'add-item') {
-                if (!list || !template) return;
-                const nextIndex = list.querySelectorAll('.structured-array-item').length;
-                const html = template.innerHTML.replace(/__INDEX__/g, String(nextIndex));
-                list.insertAdjacentHTML('beforeend', html);
-                if (typeof initializeTinyMCE === 'function') {
-                  initializeTinyMCE();
-                }
-                if (typeof window.initializeQuillEditors === 'function') {
-                  window.initializeQuillEditors();
-                }
-                if (typeof initializeMDXEditor === 'function') {
-                  initializeMDXEditor();
+                if (action === 'add-item') {
+                  addArrayItem();
+                  return;
                 }
-                updateHiddenInput();
-                return;
-              }
 
               const item = actionButton.closest('.structured-array-item');
-              if (!item || !list) return;
+              const liveList = getLiveList();
+              if (!item || !liveList) return;
+
+              if (action === 'toggle-item') {
+                const content = item.querySelector('[data-array-item-fields]');
+                if (!(content instanceof HTMLElement)) return;
+                setArrayItemExpanded(item, content.classList.contains('hidden'));
+                syncArrayState(container);
+                return;
+              }
 
               if (action === 'remove-item') {
                 if (typeof requestRepeaterDelete === 'function') {
                   requestRepeaterDelete(() => {
                     item.remove();
                     updateHiddenInput();
+                    syncArrayState(container);
                   });
                 } else {
                   item.remove();
                   updateHiddenInput();
+                  syncArrayState(container);
                 }
                 return;
               }
@@ -6032,8 +6397,9 @@ function getStructuredFieldScript() {
               if (action === 'move-up') {
                 const previous = item.previousElementSibling;
                 if (previous) {
-                  list.insertBefore(item, previous);
+                  liveList.insertBefore(item, previous);
                   updateHiddenInput();
+                  syncArrayState(container);
                 }
                 return;
               }
@@ -6041,29 +6407,43 @@ function getStructuredFieldScript() {
               if (action === 'move-down') {
                 const next = item.nextElementSibling;
                 if (next) {
-                  list.insertBefore(next, item);
+                  liveList.insertBefore(next, item);
                   updateHiddenInput();
+                  syncArrayState(container);
                 }
               }
-            });
+              });
 
-            container.addEventListener('input', (event) => {
+              container.addEventListener('input', (event) => {
               const target = event.target;
               if (!(target instanceof Element)) return;
               if (target.closest('[data-structured-array-list]')) {
                 updateHiddenInput();
               }
-            });
+              });
 
-            container.addEventListener('change', (event) => {
+              container.addEventListener('change', (event) => {
               const target = event.target;
               if (!(target instanceof Element)) return;
               if (target.closest('[data-structured-array-list]')) {
                 updateHiddenInput();
               }
-            });
+              });
 
-            updateHiddenInput();
+              updateHiddenInput();
+              const savedArrayState = readArrayState(container);
+              if (savedArrayState) {
+                applyArrayState(container, savedArrayState);
+              } else {
+                syncArrayState(container);
+              }
+              container.dataset.structuredInitialized = 'true';
+            } catch (error) {
+              delete container.dataset.structuredInitialized;
+              console.error('[structured-array] initialization failed', error);
+            } finally {
+              delete container.dataset.structuredInitializing;
+            }
           });
         }
 
@@ -6078,7 +6458,10 @@ function getStructuredFieldScript() {
         document.addEventListener('htmx:afterSwap', function() {
           setTimeout(initializeStructuredFields, 50);
         });
-      } else if (typeof window.initializeStructuredFields === 'function') {
+      } else if (
+        typeof window.initializeStructuredFields === 'function' &&
+        document.readyState !== 'loading'
+      ) {
         window.initializeStructuredFields();
       }
     </script>
@@ -6090,6 +6473,68 @@ function getBlocksFieldScript() {
     <script>
       if (!window.__sonicBlocksFieldInit) {
         window.__sonicBlocksFieldInit = true;
+        const getCollectionScope = () => {
+          const url = new URL(window.location.href);
+          const collectionFromQuery = url.searchParams.get('collection');
+          const form = document.getElementById('content-form');
+          const collectionInput = form?.querySelector('input[name="collection_id"]');
+          const collectionFromForm = collectionInput instanceof HTMLInputElement ? collectionInput.value : '';
+          const collectionId = collectionFromQuery || collectionFromForm || '';
+          return window.location.pathname + ':' + collectionId;
+        };
+
+        const getBlocksStateKey = (container) => {
+          const fieldName = container.dataset.fieldName || 'unknown';
+          return 'sonic:ui:blocks:' + getCollectionScope() + ':' + fieldName;
+        };
+
+        const readBlocksState = (container) => {
+          try {
+            const raw = sessionStorage.getItem(getBlocksStateKey(container));
+            if (!raw) return null;
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : null;
+          } catch {
+            return null;
+          }
+        };
+
+        const writeBlocksState = (container, state) => {
+          try {
+            sessionStorage.setItem(getBlocksStateKey(container), JSON.stringify(state));
+          } catch {}
+        };
+
+        const setBlockExpanded = (item, isExpanded) => {
+          const content = item.querySelector('[data-block-content]');
+          const icon = item.querySelector('[data-block-toggle-icon]');
+          if (content instanceof HTMLElement) {
+            content.classList.toggle('hidden', !isExpanded);
+          }
+          if (icon instanceof Element) {
+            icon.classList.toggle('-rotate-90', !isExpanded);
+          }
+        };
+
+        const captureBlocksState = (container) => {
+          return Array.from(container.querySelectorAll('.blocks-item')).map((item) => {
+            const content = item.querySelector('[data-block-content]');
+            return content instanceof HTMLElement ? !content.classList.contains('hidden') : false;
+          });
+        };
+
+        const applyBlocksState = (container, state) => {
+          const items = Array.from(container.querySelectorAll('.blocks-item'));
+          items.forEach((item, index) => {
+            if (typeof state[index] === 'boolean') {
+              setBlockExpanded(item, state[index]);
+            }
+          });
+        };
+
+        const syncBlocksState = (container) => {
+          writeBlocksState(container, captureBlocksState(container));
+        };
 
         function initializeBlocksFields() {
           document.querySelectorAll('.blocks-field').forEach((container) => {
@@ -6177,7 +6622,10 @@ function getBlocksFieldScript() {
               window.initializeDragSortable(list, {
                 itemSelector: '.blocks-item',
                 handleSelector: '[data-action="drag-handle"]',
-                onUpdate: updateHiddenInput
+                onUpdate: () => {
+                  updateHiddenInput();
+                  syncBlocksState(container);
+                }
               });
             }
 
@@ -6199,8 +6647,12 @@ function getBlocksFieldScript() {
                 if (!template) return;
 
                 const nextIndex = list.querySelectorAll('.blocks-item').length;
-                const html = template.innerHTML.replace(/__INDEX__/g, String(nextIndex));
+                const html = template.innerHTML.replace(/__BLOCK_INDEX__/g, String(nextIndex));
                 list.insertAdjacentHTML('beforeend', html);
+                const newItem = list.lastElementChild;
+                if (newItem instanceof HTMLElement) {
+                  setBlockExpanded(newItem, true);
+                }
                 if (typeSelect) {
                   typeSelect.value = '';
                 }
@@ -6209,21 +6661,32 @@ function getBlocksFieldScript() {
                   window.initializeStructuredFields();
                 }
                 updateHiddenInput();
+                syncBlocksState(container);
                 return;
               }
 
               const item = actionButton.closest('.blocks-item');
               if (!item || !list) return;
 
+              if (action === 'toggle-block') {
+                const content = item.querySelector('[data-block-content]');
+                if (!(content instanceof HTMLElement)) return;
+                setBlockExpanded(item, content.classList.contains('hidden'));
+                syncBlocksState(container);
+                return;
+              }
+
               if (action === 'remove-block') {
                 if (typeof requestRepeaterDelete === 'function') {
                   requestRepeaterDelete(() => {
                     item.remove();
                     updateHiddenInput();
+                    syncBlocksState(container);
                   }, 'block');
                 } else {
                   item.remove();
                   updateHiddenInput();
+                  syncBlocksState(container);
                 }
                 return;
               }
@@ -6233,6 +6696,7 @@ function getBlocksFieldScript() {
                 if (previous) {
                   list.insertBefore(item, previous);
                   updateHiddenInput();
+                  syncBlocksState(container);
                 }
                 return;
               }
@@ -6242,6 +6706,7 @@ function getBlocksFieldScript() {
                 if (next) {
                   list.insertBefore(next, item);
                   updateHiddenInput();
+                  syncBlocksState(container);
                 }
               }
             });
@@ -6263,6 +6728,12 @@ function getBlocksFieldScript() {
             });
 
             updateHiddenInput();
+            const savedBlocksState = readBlocksState(container);
+            if (savedBlocksState) {
+              applyBlocksState(container, savedBlocksState);
+            } else {
+              syncBlocksState(container);
+            }
           });
         }
 
@@ -6299,6 +6770,7 @@ init_admin_layout_catalyst_template();
 function renderContentFormPage(data) {
   const isEdit = data.isEdit || !!data.id;
   const title = isEdit ? `Edit: ${data.title || "Content"}` : `New ${data.collection.display_name}`;
+  const hasValidationErrors = Boolean(data.validationErrors && Object.keys(data.validationErrors).length > 0);
   const backUrl = data.referrerParams ? `/admin/content?${data.referrerParams}` : `/admin/content?collection=${data.collection.id}`;
   const coreFields = data.fields.filter((f) => ["title", "slug", "content"].includes(f.field_name));
   const contentFields = data.fields.filter((f) => !["title", "slug", "content"].includes(f.field_name) && !f.field_name.startsWith("meta_"));
@@ -6387,6 +6859,7 @@ function renderContentFormPage(data) {
             ${isEdit ? `hx-put="/admin/content/${data.id}"` : `hx-post="/admin/content"`}
             hx-target="#form-messages"
             hx-encoding="multipart/form-data"
+            data-has-validation-errors="${hasValidationErrors ? "true" : "false"}"
             class="space-y-6"
           >
             <input type="hidden" name="collection_id" value="${data.collection.id}">
@@ -6667,39 +7140,456 @@ function renderContentFormPage(data) {
 
     <!-- Dynamic Field Scripts -->
     <script>
+      const contentFormCollectionId = ${JSON.stringify(data.collection.id)};
+
+      function getFieldGroupScope() {
+        const url = new URL(window.location.href);
+        const urlCollectionId = url.searchParams.get('collection');
+        const effectiveCollectionId = urlCollectionId || contentFormCollectionId || '';
+        return window.location.pathname + ':' + effectiveCollectionId;
+      }
+
+      function getItemPosition(itemSelector, item) {
+        if (!(item instanceof Element)) return -1;
+        const parent = item.parentElement;
+        if (!parent) return -1;
+        return Array.from(parent.querySelectorAll(':scope > ' + itemSelector)).indexOf(item);
+      }
+
+      function stripIndexedFieldPrefix(fullFieldName, prefix) {
+        if (!fullFieldName || !prefix || !fullFieldName.startsWith(prefix)) {
+          return fullFieldName;
+        }
+
+        const remainder = fullFieldName.slice(prefix.length);
+        const indexMatch = remainder.match(/^(\\d+)(-|__)(.*)$/);
+        if (!indexMatch) {
+          return fullFieldName;
+        }
+
+        return indexMatch[3];
+      }
+
+      function getFieldGroupStorageKey(groupOrId) {
+        const defaultGroupId = typeof groupOrId === 'string' ? groupOrId : (groupOrId?.getAttribute('data-group-id') || 'unknown');
+        const group = typeof groupOrId === 'string'
+          ? document.querySelector('.field-group[data-group-id="' + defaultGroupId + '"]')
+          : groupOrId;
+
+        const scopePrefix = 'sonic:ui:objects:' + getFieldGroupScope() + ':';
+        if (!(group instanceof Element)) {
+          return scopePrefix + defaultGroupId;
+        }
+
+        const fullFieldName = group.getAttribute('data-field-name') || '';
+
+        const blocksField = group.closest('.blocks-field');
+        const blockItem = group.closest('.blocks-item');
+        if (blocksField instanceof Element && blockItem instanceof Element) {
+          const blocksFieldName = blocksField.getAttribute('data-field-name') || 'unknown';
+          const blockPosition = getItemPosition('.blocks-item', blockItem);
+          const relativePath = stripIndexedFieldPrefix(fullFieldName, 'block-' + blocksFieldName + '-') || defaultGroupId;
+          return scopePrefix + 'blocks:' + blocksFieldName + ':' + blockPosition + ':' + relativePath;
+        }
+
+        const arrayField = group.closest('[data-structured-array][data-field-name]');
+        const arrayItem = group.closest('.structured-array-item');
+        if (arrayField instanceof Element && arrayItem instanceof Element) {
+          const arrayFieldName = arrayField.getAttribute('data-field-name') || 'unknown';
+          const itemPosition = getItemPosition('.structured-array-item', arrayItem);
+          const relativePath = stripIndexedFieldPrefix(fullFieldName, 'array-' + arrayFieldName + '-') || defaultGroupId;
+          return scopePrefix + 'repeaters:' + arrayFieldName + ':' + itemPosition + ':' + relativePath;
+        }
+
+        return scopePrefix + defaultGroupId;
+      }
+
+      function loadFieldGroupState(group) {
+        try {
+          const value = sessionStorage.getItem(getFieldGroupStorageKey(group));
+          if (value === '1') return true;
+          if (value === '0') return false;
+        } catch {}
+        return null;
+      }
+
+      function saveFieldGroupState(group, isCollapsed) {
+        try {
+          sessionStorage.setItem(getFieldGroupStorageKey(group), isCollapsed ? '1' : '0');
+        } catch {}
+      }
+
+      function resolveFieldGroupElements(groupOrId) {
+        let group = null;
+
+        if (groupOrId instanceof Element) {
+          group = groupOrId.classList.contains('field-group')
+            ? groupOrId
+            : groupOrId.closest('.field-group[data-group-id]');
+        } else if (typeof groupOrId === 'string' && groupOrId) {
+          group = document.querySelector('.field-group[data-group-id="' + groupOrId + '"]');
+        }
+
+        let content = null;
+        let icon = null;
+
+        if (group instanceof Element) {
+          content = group.querySelector(':scope > .field-group-content');
+          icon = group.querySelector(':scope > .field-group-header svg[id$="-icon"]');
+        }
+
+        // Legacy fallback for any existing calls still passing string IDs.
+        if (!(content instanceof HTMLElement) && typeof groupOrId === 'string') {
+          content = document.getElementById(groupOrId + '-content');
+        }
+        if (!(icon instanceof Element) && typeof groupOrId === 'string') {
+          icon = document.getElementById(groupOrId + '-icon');
+        }
+
+        if (!(group instanceof Element) && content instanceof Element) {
+          group = content.closest('.field-group[data-group-id]');
+        }
+
+        return { group, content, icon };
+      }
+
+      function applyFieldGroupState(groupOrId, isCollapsed) {
+        const { content, icon } = resolveFieldGroupElements(groupOrId);
+        if (!(content instanceof HTMLElement) || !(icon instanceof Element)) return;
+        content.classList.toggle('hidden', isCollapsed);
+        icon.classList.toggle('-rotate-90', isCollapsed);
+      }
+
+      function restoreFieldGroupStates() {
+        document.querySelectorAll('.field-group[data-group-id]').forEach((group) => {
+          const savedState = loadFieldGroupState(group);
+          if (savedState === null) return;
+          applyFieldGroupState(group, savedState);
+        });
+      }
+
+      function persistAllFieldGroupStates() {
+        document.querySelectorAll('.field-group[data-group-id]').forEach((group) => {
+          const { content } = resolveFieldGroupElements(group);
+          if (!(content instanceof HTMLElement)) return;
+          saveFieldGroupState(group, content.classList.contains('hidden'));
+        });
+      }
+
+      function setValidationHeaderIndicator(container) {
+        if (!(container instanceof Element)) return;
+        let header = null;
+        let markerTarget = null;
+
+        if (container.classList.contains('field-group')) {
+          header = container.querySelector(':scope > .field-group-header');
+          markerTarget = container.querySelector(':scope > .field-group-header h3');
+        } else if (container.classList.contains('structured-array-item')) {
+          header = container.querySelector('[data-action="toggle-item"]');
+          markerTarget = header;
+        } else if (container.classList.contains('blocks-item')) {
+          header = container.querySelector('[data-action="toggle-block"]');
+          markerTarget = header;
+        }
+
+        if (!(header instanceof HTMLElement)) return;
+        if (!(markerTarget instanceof HTMLElement)) {
+          markerTarget = header;
+        }
+
+        header.dataset.validationHeaderError = 'true';
+        header.classList.add('text-pink-700', 'dark:text-pink-300');
+
+        if (!markerTarget.querySelector('[data-validation-indicator]')) {
+          const marker = document.createElement('span');
+          marker.setAttribute('data-validation-indicator', 'true');
+          marker.className = 'ml-2 inline-block h-2 w-2 rounded-full bg-pink-500 align-middle';
+          marker.setAttribute('aria-hidden', 'true');
+          markerTarget.appendChild(marker);
+        }
+      }
+
+      function clearValidationIndicators() {
+        document.querySelectorAll('[data-validation-header-error="true"]').forEach((el) => {
+          if (!(el instanceof HTMLElement)) return;
+          delete el.dataset.validationHeaderError;
+          el.classList.remove('text-pink-700', 'dark:text-pink-300');
+        });
+
+        document.querySelectorAll('[data-validation-indicator]').forEach((el) => el.remove());
+      }
+
+      function expandContainerForValidation(container) {
+        if (!(container instanceof Element)) return;
+
+        if (container.classList.contains('field-group')) {
+          applyFieldGroupState(container, false);
+          return;
+        }
+
+        if (container.classList.contains('structured-array-item')) {
+          const content = container.querySelector('[data-array-item-fields]');
+          const icon = container.querySelector('[data-item-toggle-icon]');
+          if (content instanceof HTMLElement) {
+            content.classList.remove('hidden');
+          }
+          if (icon instanceof Element) {
+            icon.classList.remove('-rotate-90');
+          }
+          return;
+        }
+
+        if (container.classList.contains('blocks-item')) {
+          const content = container.querySelector('[data-block-content]');
+          const icon = container.querySelector('[data-block-toggle-icon]');
+          if (content instanceof HTMLElement) {
+            content.classList.remove('hidden');
+          }
+          if (icon instanceof Element) {
+            icon.classList.remove('-rotate-90');
+          }
+        }
+      }
+
+      function walkErrorContainers(node, expand) {
+        if (!(node instanceof Element)) return;
+        const visited = new Set();
+        let cursor = node;
+        while (cursor) {
+          const candidates = [
+            cursor.closest('.structured-array-item'),
+            cursor.closest('.blocks-item'),
+            cursor.closest('.field-group[data-group-id]')
+          ].filter((c) => c instanceof Element && !visited.has(c));
+
+          if (candidates.length === 0) break;
+
+          // Pick nearest ancestor container to preserve "first-error path only".
+          let nearest = candidates[0];
+          let bestDistance = Number.MAX_SAFE_INTEGER;
+          for (const candidate of candidates) {
+            let distance = 0;
+            let walker = cursor;
+            while (walker && walker !== candidate) {
+              walker = walker.parentElement;
+              distance += 1;
+            }
+            if (distance < bestDistance) {
+              bestDistance = distance;
+              nearest = candidate;
+            }
+          }
+
+          visited.add(nearest);
+          setValidationHeaderIndicator(nearest);
+          if (expand) {
+            expandContainerForValidation(nearest);
+          }
+          cursor = nearest.parentElement;
+        }
+      }
+
+      function getFocusableTargetFromErrorGroup(group) {
+        if (!(group instanceof Element)) return null;
+        return (
+          group.querySelector('input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled]), [contenteditable="true"]') ||
+          group.querySelector('button:not([disabled])')
+        );
+      }
+
+      function revealServerValidationErrors() {
+        clearValidationIndicators();
+
+        const errorGroups = Array.from(document.querySelectorAll('.form-group[data-has-errors="true"]'));
+        if (errorGroups.length === 0) return;
+
+        // Add indicators for all errored sections, expand only first-error path.
+        errorGroups.forEach((group, index) => {
+          walkErrorContainers(group, index === 0);
+        });
+
+        const firstTarget = getFocusableTargetFromErrorGroup(errorGroups[0]);
+        if (firstTarget instanceof HTMLElement) {
+          firstTarget.scrollIntoView({ behavior: 'smooth', block: 'center' });
+          firstTarget.focus({ preventScroll: true });
+        }
+      }
+
+      function revealNativeValidationErrors(form) {
+        if (!(form instanceof HTMLFormElement)) return;
+        clearValidationIndicators();
+
+        const invalidControls = Array.from(form.querySelectorAll(':invalid'));
+        if (invalidControls.length === 0) return;
+
+        invalidControls.forEach((control, index) => {
+          walkErrorContainers(control, index === 0);
+        });
+
+        const first = invalidControls[0];
+        if (first instanceof HTMLElement) {
+          first.scrollIntoView({ behavior: 'smooth', block: 'center' });
+          first.focus({ preventScroll: true });
+        }
+      }
+
       // Field group toggle
-      function toggleFieldGroup(groupId) {
-        const content = document.getElementById(groupId + '-content');
-        const icon = document.getElementById(groupId + '-icon');
-        
-        if (content.classList.contains('hidden')) {
-          content.classList.remove('hidden');
-          icon.classList.remove('rotate-[-90deg]');
-        } else {
-          content.classList.add('hidden');
-          icon.classList.add('rotate-[-90deg]');
+      function toggleFieldGroup(groupOrTrigger) {
+        const { group, content } = resolveFieldGroupElements(groupOrTrigger);
+        if (!(group instanceof Element)) return;
+        if (!(content instanceof HTMLElement)) return;
+
+        const isCollapsed = !content.classList.contains('hidden');
+        applyFieldGroupState(group, isCollapsed);
+        saveFieldGroupState(group, isCollapsed);
+      }
+
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', () => {
+          restoreFieldGroupStates();
+          const form = document.getElementById('content-form');
+          if (form?.getAttribute('data-has-validation-errors') === 'true') {
+            revealServerValidationErrors();
+          }
+        });
+      } else {
+        restoreFieldGroupStates();
+        const form = document.getElementById('content-form');
+        if (form?.getAttribute('data-has-validation-errors') === 'true') {
+          revealServerValidationErrors();
         }
       }
 
+      document.addEventListener('htmx:afterSwap', function() {
+        setTimeout(() => {
+          restoreFieldGroupStates();
+          const form = document.getElementById('content-form');
+          if (form?.getAttribute('data-has-validation-errors') === 'true') {
+            revealServerValidationErrors();
+          }
+        }, 50);
+      });
+
+      const contentFormEl = document.getElementById('content-form');
+      if (contentFormEl instanceof HTMLFormElement) {
+        contentFormEl.addEventListener('submit', () => {
+          persistAllFieldGroupStates();
+        }, true);
+      }
+
+      window.addEventListener('beforeunload', () => {
+        persistAllFieldGroupStates();
+      });
+
+      document.addEventListener('visibilitychange', () => {
+        if (document.visibilityState === 'hidden') {
+          persistAllFieldGroupStates();
+        }
+      });
+
+      let pendingNativeValidationReveal = false;
+      document.addEventListener('invalid', function(event) {
+        const target = event.target;
+        if (!(target instanceof Element)) return;
+        const form = target.closest('form');
+        if (!(form instanceof HTMLFormElement)) return;
+
+        if (pendingNativeValidationReveal) return;
+        pendingNativeValidationReveal = true;
+
+        // Expand only first invalid path synchronously so the browser can focus it
+        // and avoid "invalid form control is not focusable" errors.
+        walkErrorContainers(target, true);
+
+        setTimeout(() => {
+          pendingNativeValidationReveal = false;
+          revealNativeValidationErrors(form);
+        }, 0);
+      }, true);
+
       // Media field functions
-      let currentMediaFieldId = null;
+      function notifyFieldChange(input) {
+        if (!input) return;
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        input.dispatchEvent(new Event('change', { bubbles: true }));
+      }
+
+      function getActiveMediaModal() {
+        const modal = document.getElementById('media-selector-modal');
+        return modal instanceof HTMLElement ? modal : null;
+      }
+
+      function getMediaFieldElements(fieldId) {
+        if (!fieldId) {
+          return {
+            fieldId: '',
+            hiddenInput: null,
+            preview: null,
+            mediaField: null,
+            actionsDiv: null,
+          };
+        }
+
+        const hiddenInput = document.getElementById(fieldId);
+        const preview = document.getElementById(fieldId + '-preview');
+        const mediaField = hiddenInput?.closest('.media-field-container') || null;
+        const actionsDiv = mediaField?.querySelector('.media-actions') || null;
+
+        return {
+          fieldId,
+          hiddenInput,
+          preview,
+          mediaField,
+          actionsDiv,
+        };
+      }
+
+      function getActiveMediaTarget() {
+        const modal = getActiveMediaModal();
+        const fieldId = modal?.dataset.targetFieldId || '';
+        return {
+          modal,
+          originalValue: modal?.dataset.originalValue || '',
+          ...getMediaFieldElements(fieldId),
+        };
+      }
+
+      function ensureSingleMediaRemoveButton(fieldId, actionsDiv) {
+        if (!(actionsDiv instanceof HTMLElement)) return;
+        const existingRemoveButton = actionsDiv.querySelector('[data-media-remove="true"]');
+        if (existingRemoveButton) return;
+
+        const removeBtn = document.createElement('button');
+        removeBtn.type = 'button';
+        removeBtn.setAttribute('data-media-remove', 'true');
+        removeBtn.onclick = () => clearMediaField(fieldId);
+        removeBtn.className = 'inline-flex items-center px-4 py-2 bg-red-600 text-white rounded-xl hover:bg-red-700 transition-all';
+        removeBtn.textContent = 'Remove';
+        actionsDiv.appendChild(removeBtn);
+      }
 
       function openMediaSelector(fieldId) {
-        currentMediaFieldId = fieldId;
+        const existingModal = getActiveMediaModal();
+        if (existingModal) {
+          existingModal.remove();
+        }
+
         // Store the original value in case user cancels
-        const originalValue = document.getElementById(fieldId)?.value || '';
+        const originalValue = getMediaFieldElements(fieldId).hiddenInput?.value || '';
 
         // Open media library modal
         const modal = document.createElement('div');
         modal.className = 'fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50';
         modal.id = 'media-selector-modal';
+        modal.dataset.targetFieldId = fieldId;
+        modal.dataset.originalValue = originalValue;
         modal.innerHTML = \`
           <div class="rounded-xl bg-white dark:bg-zinc-900 shadow-xl ring-1 ring-zinc-950/5 dark:ring-white/10 p-6 w-full max-w-4xl max-h-[90vh] overflow-y-auto">
             <h3 class="text-lg font-semibold text-zinc-950 dark:text-white mb-4">Select Media</h3>
             <div id="media-grid-container" hx-get="/admin/media/selector" hx-trigger="load"></div>
             <div class="mt-4 flex justify-end space-x-2">
               <button
-                onclick="cancelMediaSelection('\${fieldId}', '\${originalValue}')"
+                onclick="cancelMediaSelection()"
                 class="rounded-lg bg-white dark:bg-zinc-800 px-4 py-2 text-sm font-semibold text-zinc-950 dark:text-white ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors">
                 Cancel
               </button>
@@ -6719,23 +7609,23 @@ function renderContentFormPage(data) {
       }
 
       function closeMediaSelector() {
-        const modal = document.getElementById('media-selector-modal');
+        const modal = getActiveMediaModal();
         if (modal) {
           modal.remove();
         }
-        currentMediaFieldId = null;
       }
 
-      function cancelMediaSelection(fieldId, originalValue) {
+      function cancelMediaSelection() {
+        const { hiddenInput, preview, originalValue } = getActiveMediaTarget();
+
         // Restore original value
-        const hiddenInput = document.getElementById(fieldId);
         if (hiddenInput) {
           hiddenInput.value = originalValue;
+          notifyFieldChange(hiddenInput);
         }
 
         // If original value was empty, hide the preview and show select button
         if (!originalValue) {
-          const preview = document.getElementById(fieldId + '-preview');
           if (preview) {
             preview.classList.add('hidden');
           }
@@ -6746,11 +7636,11 @@ function renderContentFormPage(data) {
       }
 
       function clearMediaField(fieldId) {
-        const hiddenInput = document.getElementById(fieldId);
-        const preview = document.getElementById(fieldId + '-preview');
+        const { hiddenInput, preview, actionsDiv } = getMediaFieldElements(fieldId);
 
         if (hiddenInput) {
           hiddenInput.value = '';
+          notifyFieldChange(hiddenInput);
         }
 
         if (preview) {
@@ -6760,25 +7650,34 @@ function renderContentFormPage(data) {
           }
           preview.classList.add('hidden');
         }
+
+        const removeButton = actionsDiv?.querySelector('[data-media-remove="true"]');
+        if (removeButton) {
+          removeButton.remove();
+        }
       }
 
       // Global function to remove a single media from multiple selection
       window.removeMediaFromMultiple = function(fieldId, urlToRemove) {
-        const hiddenInput = document.getElementById(fieldId);
+        const { hiddenInput, preview } = getMediaFieldElements(fieldId);
         if (!hiddenInput) return;
 
         const values = hiddenInput.value.split(',').filter(url => url !== urlToRemove);
         hiddenInput.value = values.join(',');
+        notifyFieldChange(hiddenInput);
 
         // Remove preview item
-        const previewItem = document.querySelector(\`[data-url="\${urlToRemove}"]\`);
+        const previewItem =
+          preview &&
+          Array.from(preview.querySelectorAll('[data-url]')).find(
+            (item) => item.getAttribute('data-url') === urlToRemove,
+          );
         if (previewItem) {
           previewItem.remove();
         }
 
         // Hide preview grid if empty
         if (values.length === 0) {
-          const preview = document.getElementById(fieldId + '-preview');
           if (preview) {
             preview.classList.add('hidden');
           }
@@ -6787,39 +7686,24 @@ function renderContentFormPage(data) {
 
       // Global function called by media selector buttons
       window.selectMediaFile = function(mediaId, mediaUrl, filename) {
-        if (!currentMediaFieldId) {
+        const { fieldId, hiddenInput, preview, actionsDiv } = getActiveMediaTarget();
+        if (!fieldId || !hiddenInput) {
           console.error('No field ID set for media selection');
           return;
         }
 
-        const fieldId = currentMediaFieldId;
-
         // Set the hidden input value to the media URL (not ID)
-        const hiddenInput = document.getElementById(fieldId);
-        if (hiddenInput) {
-          hiddenInput.value = mediaUrl;
-        }
+        hiddenInput.value = mediaUrl;
+        notifyFieldChange(hiddenInput);
 
         // Update the preview
-        const preview = document.getElementById(fieldId + '-preview');
         if (preview) {
           preview.innerHTML = \`<img src="\${mediaUrl}" alt="\${filename}" class="w-32 h-32 object-cover rounded-lg border border-white/20">\`;
           preview.classList.remove('hidden');
         }
 
         // Show the remove button by finding the media actions container and updating it
-        const mediaField = hiddenInput?.closest('.media-field-container');
-        if (mediaField) {
-          const actionsDiv = mediaField.querySelector('.media-actions');
-          if (actionsDiv && !actionsDiv.querySelector('button:has-text("Remove")')) {
-            const removeBtn = document.createElement('button');
-            removeBtn.type = 'button';
-            removeBtn.onclick = () => clearMediaField(fieldId);
-            removeBtn.className = 'inline-flex items-center px-4 py-2 bg-red-600 text-white rounded-xl hover:bg-red-700 transition-all';
-            removeBtn.textContent = 'Remove';
-            actionsDiv.appendChild(removeBtn);
-          }
-        }
+        ensureSingleMediaRemoveButton(fieldId, actionsDiv);
 
         // DON'T close the modal - let user click OK button
         // Visual feedback: highlight the selected item
@@ -6833,7 +7717,9 @@ function renderContentFormPage(data) {
       };
 
       function setMediaField(fieldId, mediaUrl) {
-        document.getElementById(fieldId).value = mediaUrl;
+        const hiddenInput = document.getElementById(fieldId);
+        hiddenInput.value = mediaUrl;
+        notifyFieldChange(hiddenInput);
         const preview = document.getElementById(fieldId + '-preview');
         preview.innerHTML = \`<img src="\${mediaUrl}" alt="Selected media" class="w-32 h-32 object-cover rounded-lg ring-1 ring-zinc-950/10 dark:ring-white/10">\`;
         preview.classList.remove('hidden');
@@ -8240,6 +9126,40 @@ function renderContentListPage(data) {
   return renderAdminLayoutCatalyst(layoutData);
 }
 
+// src/routes/admin-content-field-types.ts
+function resolveSchemaFieldType(fieldConfig) {
+  if (fieldConfig.type === "slug" || fieldConfig.format === "slug") {
+    return "slug";
+  }
+  if (fieldConfig.type && fieldConfig.type !== "string") {
+    return fieldConfig.type;
+  }
+  if (fieldConfig.format === "richtext") {
+    return "richtext";
+  }
+  if (fieldConfig.format === "media") {
+    return "media";
+  }
+  if (fieldConfig.format === "date-time") {
+    return "date";
+  }
+  if (Array.isArray(fieldConfig.enum)) {
+    return "select";
+  }
+  return fieldConfig.type || "string";
+}
+function buildSchemaFieldOptions(fieldConfig) {
+  const fieldOptions = { ...fieldConfig };
+  const resolvedFieldType = resolveSchemaFieldType(fieldConfig);
+  if (resolvedFieldType === "select" && Array.isArray(fieldConfig.enum)) {
+    fieldOptions.options = fieldConfig.enum.map((value, index) => ({
+      value,
+      label: fieldConfig.enumLabels?.[index] || value
+    }));
+  }
+  return fieldOptions;
+}
+
 // src/routes/admin-content.ts
 var adminContentRoutes = new Hono();
 function parseFieldValue(field, formData, options = {}) {
@@ -8372,17 +9292,11 @@ async function getCollectionFields(db, collectionId) {
           if (schema && schema.properties) {
             let fieldOrder = 0;
             return Object.entries(schema.properties).map(([fieldName, fieldConfig]) => {
-              let fieldOptions = { ...fieldConfig };
-              if (fieldConfig.type === "select" && fieldConfig.enum) {
-                fieldOptions.options = fieldConfig.enum.map((value, index) => ({
-                  value,
-                  label: fieldConfig.enumLabels?.[index] || value
-                }));
-              }
+              const fieldOptions = buildSchemaFieldOptions(fieldConfig);
               return {
                 id: `schema-${fieldName}`,
                 field_name: fieldName,
-                field_type: fieldConfig.type || "string",
+                field_type: resolveSchemaFieldType(fieldConfig),
                 field_label: fieldConfig.title || fieldName,
                 field_options: fieldOptions,
                 field_order: fieldOrder++,
@@ -11400,6 +12314,13 @@ function renderUsersListPage(data) {
 // src/routes/admin-users.ts
 var userRoutes = new Hono();
 userRoutes.use("*", requireAuth());
+userRoutes.use("/users/*", requireRole(["admin"]));
+userRoutes.use("/users", requireRole(["admin"]));
+userRoutes.use("/invite-user", requireRole(["admin"]));
+userRoutes.use("/resend-invitation/*", requireRole(["admin"]));
+userRoutes.use("/cancel-invitation/*", requireRole(["admin"]));
+userRoutes.use("/activity-logs", requireRole(["admin"]));
+userRoutes.use("/activity-logs/*", requireRole(["admin"]));
 userRoutes.get("/", (c) => {
   return c.redirect("/admin/dashboard");
 });
@@ -11887,7 +12808,9 @@ userRoutes.post("/users/new", async (c) => {
     const email = formData.get("email")?.toString()?.trim().toLowerCase() || "";
     const phone = sanitizeInput(formData.get("phone")?.toString()) || null;
     const bio = sanitizeInput(formData.get("bio")?.toString()) || null;
-    const role = formData.get("role")?.toString() || "viewer";
+    const roleInput = formData.get("role")?.toString() || "viewer";
+    const validRoles = ["admin", "editor", "author", "viewer"];
+    const role = validRoles.includes(roleInput) ? roleInput : "viewer";
     const password = formData.get("password")?.toString() || "";
     const confirmPassword = formData.get("confirm_password")?.toString() || "";
     const isActive = formData.get("is_active") === "1";
@@ -12107,7 +13030,9 @@ userRoutes.put("/users/:id", async (c) => {
     const username = sanitizeInput(formData.get("username")?.toString());
     const email = formData.get("email")?.toString()?.trim().toLowerCase() || "";
     const phone = sanitizeInput(formData.get("phone")?.toString()) || null;
-    const role = formData.get("role")?.toString() || "viewer";
+    const roleInput = formData.get("role")?.toString() || "viewer";
+    const validRoles = ["admin", "editor", "author", "viewer"];
+    const role = validRoles.includes(roleInput) ? roleInput : "viewer";
     const isActive = formData.get("is_active") === "1";
     const emailVerified = formData.get("email_verified") === "1";
     const profileDisplayName = sanitizeInput(formData.get("profile_display_name")?.toString()) || null;
@@ -17432,6 +18357,18 @@ adminPluginRoutes.post("/:id/settings", async (c) => {
     const settings = await c.req.json();
     const pluginService = new PluginService(db);
     await pluginService.updatePluginSettings(pluginId, settings);
+    if (pluginId === "core-auth") {
+      try {
+        const cacheKv = c.env.CACHE_KV;
+        if (cacheKv) {
+          await cacheKv.delete("auth:settings");
+          await cacheKv.delete("auth:registration-enabled");
+          console.log("[AuthSettings] Cache cleared after updating authentication settings");
+        }
+      } catch (cacheError) {
+        console.error("[AuthSettings] Failed to clear cache:", cacheError);
+      }
+    }
     return c.json({ success: true });
   } catch (error) {
     console.error("Error updating plugin settings:", error);
@@ -20780,6 +21717,20 @@ router.get("/system-status", async (c) => {
   }
 });
 
+// src/routes/admin-collections-field-types.ts
+function isMarkdownEditorType(fieldType) {
+  return fieldType === "markdown" || fieldType === "mdxeditor" || fieldType === "easymde";
+}
+function normalizeFieldType(fieldType) {
+  if (isMarkdownEditorType(fieldType)) {
+    return "markdown";
+  }
+  if (fieldType === "tinymce") {
+    return "richtext";
+  }
+  return fieldType;
+}
+
 // src/templates/pages/admin-collections-list.template.ts
 init_admin_layout_catalyst_template();
 
@@ -21266,7 +22217,9 @@ function getFieldTypeBadge(fieldType) {
     "slug": "URL Slug",
     "richtext": "Rich Text (TinyMCE)",
     "quill": "Rich Text (Quill)",
-    "mdxeditor": "EasyMDX",
+    "markdown": "Markdown",
+    "mdxeditor": "Markdown",
+    "easymde": "Markdown",
     "number": "Number",
     "boolean": "Boolean",
     "date": "Date",
@@ -21279,7 +22232,9 @@ function getFieldTypeBadge(fieldType) {
     "slug": "bg-sky-500/10 dark:bg-sky-400/10 text-sky-700 dark:text-sky-300 ring-sky-500/20 dark:ring-sky-400/20",
     "richtext": "bg-purple-500/10 dark:bg-purple-400/10 text-purple-700 dark:text-purple-300 ring-purple-500/20 dark:ring-purple-400/20",
     "quill": "bg-purple-500/10 dark:bg-purple-400/10 text-purple-700 dark:text-purple-300 ring-purple-500/20 dark:ring-purple-400/20",
+    "markdown": "bg-purple-500/10 dark:bg-purple-400/10 text-purple-700 dark:text-purple-300 ring-purple-500/20 dark:ring-purple-400/20",
     "mdxeditor": "bg-purple-500/10 dark:bg-purple-400/10 text-purple-700 dark:text-purple-300 ring-purple-500/20 dark:ring-purple-400/20",
+    "easymde": "bg-purple-500/10 dark:bg-purple-400/10 text-purple-700 dark:text-purple-300 ring-purple-500/20 dark:ring-purple-400/20",
     "number": "bg-green-500/10 dark:bg-green-400/10 text-green-700 dark:text-green-300 ring-green-500/20 dark:ring-green-400/20",
     "boolean": "bg-amber-500/10 dark:bg-amber-400/10 text-amber-700 dark:text-amber-300 ring-amber-500/20 dark:ring-amber-400/20",
     "date": "bg-cyan-500/10 dark:bg-cyan-400/10 text-cyan-700 dark:text-cyan-300 ring-cyan-500/20 dark:ring-cyan-400/20",
@@ -21760,7 +22715,7 @@ function renderCollectionFormPage(data) {
                 <option value="slug">URL Slug</option>
                 ${data.editorPlugins?.tinymce ? '<option value="richtext">Rich Text (TinyMCE)</option>' : ""}
                 ${data.editorPlugins?.quill ? '<option value="quill">Rich Text (Quill)</option>' : ""}
-                ${data.editorPlugins?.easyMdx ? '<option value="mdxeditor">EasyMDX</option>' : ""}
+                ${data.editorPlugins?.easyMdx ? '<option value="markdown">Markdown</option>' : ""}
                 <option value="number">Number</option>
                 <option value="boolean">Boolean</option>
                 <option value="date">Date</option>
@@ -21985,7 +22940,7 @@ function renderCollectionFormPage(data) {
           // Check if it's a schema field with field_options that might indicate the actual type
           if (field.field_options && typeof field.field_options === 'object') {
             // Only convert to richtext if type is explicitly 'string' and format is richtext
-            // Don't convert if it's already a specific editor type like 'mdxeditor', 'quill', etc.
+            // Don't convert if it's already a specific editor type like 'markdown', 'quill', etc.
             if (field.field_options.format === 'richtext' && uiFieldType === 'string') {
               uiFieldType = 'richtext';
             }
@@ -22006,6 +22961,12 @@ function renderCollectionFormPage(data) {
             uiFieldType = typeMapping[uiFieldType];
           }
 
+          if (uiFieldType === 'mdxeditor' || uiFieldType === 'easymde') {
+            uiFieldType = 'markdown';
+          } else if (uiFieldType === 'tinymce') {
+            uiFieldType = 'richtext';
+          }
+
           // Log all available options
           const availableOptions = Array.from(fieldTypeSelect.options).map(opt => ({ value: opt.value, text: opt.text }));
           console.log('Available dropdown options:', availableOptions);
@@ -22092,7 +23053,7 @@ function renderCollectionFormPage(data) {
 
         console.log('[Edit Field] Showing options for field type:', fieldType, '(original:', field.field_type, ')');
 
-        if (['select', 'radio', 'media', 'richtext', 'reference'].includes(fieldType)) {
+        if (['select', 'radio', 'media', 'richtext', 'markdown', 'reference'].includes(fieldType)) {
           optionsContainer.classList.remove('hidden');
 
           // Set help text based on type
@@ -22109,6 +23070,9 @@ function renderCollectionFormPage(data) {
             case 'richtext':
               helpText.textContent = 'Full-featured WYSIWYG text editor with formatting options';
               break;
+            case 'markdown':
+              helpText.textContent = 'Markdown editor with live preview powered by the EasyMDE plugin';
+              break;
             case 'reference':
               helpText.textContent = 'Link to content from other collections';
               break;
@@ -22249,7 +23213,7 @@ function renderCollectionFormPage(data) {
         const fieldNameInput = document.getElementById('modal-field-name');
 
         // Show/hide options based on field type
-        if (['select', 'radio', 'media', 'richtext', 'guid', 'reference'].includes(this.value)) {
+        if (['select', 'radio', 'media', 'richtext', 'markdown', 'guid', 'reference'].includes(this.value)) {
           optionsContainer.classList.remove('hidden');
 
           // Set default options and help text based on type
@@ -22270,6 +23234,10 @@ function renderCollectionFormPage(data) {
               fieldOptions.value = '{"toolbar": "full", "height": 400}';
               helpText.textContent = 'Full-featured WYSIWYG text editor with formatting options';
               break;
+            case 'markdown':
+              fieldOptions.value = '{"toolbar": "full", "height": 400}';
+              helpText.textContent = 'Markdown editor with live preview powered by the EasyMDE plugin';
+              break;
             case 'reference':
               fieldOptions.value = '{"collection": ["pages", "posts"]}';
               helpText.textContent = 'Link to content from other collections';
@@ -22345,6 +23313,9 @@ function renderCollectionFormPage(data) {
 // src/routes/admin-collections.ts
 var adminCollectionsRoutes = new Hono();
 adminCollectionsRoutes.use("*", requireAuth());
+adminCollectionsRoutes.post("*", requireRole(["admin"]));
+adminCollectionsRoutes.put("*", requireRole(["admin"]));
+adminCollectionsRoutes.delete("*", requireRole(["admin"]));
 adminCollectionsRoutes.get("/", async (c) => {
   try {
     const user = c.get("user");
@@ -22830,11 +23801,12 @@ adminCollectionsRoutes.post("/:id/fields", async (c) => {
         searchable: isSearchable,
         ...parsedOptions
       };
-      if (fieldType === "richtext") {
+      const normalizedFieldType = normalizeFieldType(fieldType);
+      if (normalizedFieldType === "richtext") {
         fieldConfig.format = "richtext";
-      } else if (fieldType === "date") {
+      } else if (normalizedFieldType === "date") {
         fieldConfig.format = "date-time";
-      } else if (fieldType === "select") {
+      } else if (normalizedFieldType === "select") {
         fieldConfig.enum = parsedOptions.options || [];
       } else if (fieldType === "radio") {
         fieldConfig.type = "radio";
@@ -22843,20 +23815,14 @@ adminCollectionsRoutes.post("/:id/fields", async (c) => {
         }
       } else if (fieldType === "media") {
         fieldConfig.format = "media";
-      } else if (fieldType === "slug") {
+      } else if (normalizedFieldType === "slug") {
         fieldConfig.type = "slug";
         fieldConfig.format = "slug";
-      } else if (fieldType === "quill") {
+      } else if (normalizedFieldType === "quill") {
         fieldConfig.type = "quill";
-      } else if (fieldType === "mdxeditor") {
-        fieldConfig.type = "mdxeditor";
-      } else if (fieldType === "tinymce") {
-        fieldConfig.type = "tinymce";
-      } else if (fieldType === "easymde") {
-        fieldConfig.type = "easymde";
-      } else if (fieldType === "markdown") {
+      } else if (normalizedFieldType === "markdown") {
         fieldConfig.type = "markdown";
-      } else if (fieldType === "reference") {
+      } else if (normalizedFieldType === "reference") {
         fieldConfig.type = "reference";
       }
       schema.properties[fieldName] = fieldConfig;
@@ -27461,6 +28427,33 @@ var public_forms_default = publicFormsRoutes;
 
 // src/templates/pages/admin-api-reference.template.ts
 init_admin_layout_catalyst_template();
+function renderAuthBadge(auth) {
+  if (auth === true) {
+    return `
+      <span class="shrink-0 inline-flex items-center gap-x-1 rounded-md bg-amber-50 dark:bg-amber-500/10 px-2 py-1 text-xs font-medium text-amber-700 dark:text-amber-300 ring-1 ring-inset ring-amber-700/10 dark:ring-amber-400/20">
+        <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
+        </svg>
+        Auth
+      </span>`;
+  }
+  if (auth === false) {
+    return `
+      <span class="shrink-0 inline-flex items-center gap-x-1 rounded-md bg-lime-50 dark:bg-lime-500/10 px-2 py-1 text-xs font-medium text-lime-700 dark:text-lime-300 ring-1 ring-inset ring-lime-700/10 dark:ring-lime-400/20">
+        <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+        </svg>
+        Public
+      </span>`;
+  }
+  return `
+    <span class="shrink-0 inline-flex items-center gap-x-1 rounded-md bg-zinc-50 dark:bg-zinc-500/10 px-2 py-1 text-xs font-medium text-zinc-500 dark:text-zinc-400 ring-1 ring-inset ring-zinc-500/10 dark:ring-zinc-400/20">
+      <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+      </svg>
+      Unknown
+    </span>`;
+}
 function renderAPIReferencePage(data) {
   const endpointsByCategory = data.endpoints.reduce((acc, endpoint) => {
     if (!acc[endpoint.category]) {
@@ -27469,40 +28462,18 @@ function renderAPIReferencePage(data) {
     acc[endpoint.category].push(endpoint);
     return acc;
   }, {});
-  const categoryInfo = {
-    "Auth": {
-      title: "Authentication",
-      description: "User authentication and authorization endpoints",
-      icon: "\u{1F510}"
-    },
-    "Content": {
-      title: "Content Management",
-      description: "Content creation, retrieval, and management",
-      icon: "\u{1F4DD}"
-    },
-    "Media": {
-      title: "Media Management",
-      description: "File upload, storage, and media operations",
-      icon: "\u{1F5BC}\uFE0F"
-    },
-    "Admin": {
-      title: "Admin Interface",
-      description: "Administrative panel and management features",
-      icon: "\u2699\uFE0F"
-    },
-    "System": {
-      title: "System",
-      description: "Health checks and system information",
-      icon: "\u{1F527}"
-    }
-  };
+  const categories = Object.keys(endpointsByCategory);
+  const totalEndpoints = data.endpoints.length;
+  const publicEndpoints = data.endpoints.filter((e) => e.authentication === false).length;
+  const protectedEndpoints = data.endpoints.filter((e) => e.authentication === true).length;
+  const undocumentedCount = data.endpoints.filter((e) => e.documented === false).length;
   const pageContent = `
     <div class="space-y-6">
       <!-- Header -->
       <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h1 class="text-2xl/8 font-semibold text-zinc-950 dark:text-white sm:text-xl/8">API Reference</h1>
-          <p class="mt-2 text-sm/6 text-zinc-500 dark:text-zinc-400">Complete documentation of all available API endpoints</p>
+          <p class="mt-2 text-sm/6 text-zinc-500 dark:text-zinc-400">Auto-discovered documentation of all registered API endpoints</p>
         </div>
         <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
           <a href="/api" target="_blank" class="inline-flex items-center justify-center gap-x-1.5 rounded-lg bg-zinc-950 dark:bg-white px-3.5 py-2.5 text-sm font-semibold text-white dark:text-zinc-950 hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors shadow-sm">
@@ -27515,29 +28486,35 @@ function renderAPIReferencePage(data) {
       </div>
 
       <!-- Stats -->
-      <dl class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      <dl class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
         <div class="rounded-lg bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 px-6 py-5">
           <dt class="text-sm/6 font-medium text-zinc-500 dark:text-zinc-400">Total Endpoints</dt>
           <dd class="mt-2 flex items-baseline gap-x-2">
-            <span class="text-4xl font-semibold tracking-tight text-zinc-950 dark:text-white">${data.endpoints.length}</span>
+            <span class="text-4xl font-semibold tracking-tight text-zinc-950 dark:text-white">${totalEndpoints}</span>
           </dd>
         </div>
         <div class="rounded-lg bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 px-6 py-5">
           <dt class="text-sm/6 font-medium text-zinc-500 dark:text-zinc-400">Public Endpoints</dt>
           <dd class="mt-2 flex items-baseline gap-x-2">
-            <span class="text-4xl font-semibold tracking-tight text-lime-600 dark:text-lime-400">${data.endpoints.filter((e) => !e.authentication).length}</span>
+            <span class="text-4xl font-semibold tracking-tight text-lime-600 dark:text-lime-400">${publicEndpoints}</span>
           </dd>
         </div>
         <div class="rounded-lg bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 px-6 py-5">
           <dt class="text-sm/6 font-medium text-zinc-500 dark:text-zinc-400">Protected Endpoints</dt>
           <dd class="mt-2 flex items-baseline gap-x-2">
-            <span class="text-4xl font-semibold tracking-tight text-amber-600 dark:text-amber-400">${data.endpoints.filter((e) => e.authentication).length}</span>
+            <span class="text-4xl font-semibold tracking-tight text-amber-600 dark:text-amber-400">${protectedEndpoints}</span>
           </dd>
         </div>
         <div class="rounded-lg bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 px-6 py-5">
           <dt class="text-sm/6 font-medium text-zinc-500 dark:text-zinc-400">Categories</dt>
           <dd class="mt-2 flex items-baseline gap-x-2">
-            <span class="text-4xl font-semibold tracking-tight text-cyan-600 dark:text-cyan-400">${Object.keys(endpointsByCategory).length}</span>
+            <span class="text-4xl font-semibold tracking-tight text-cyan-600 dark:text-cyan-400">${categories.length}</span>
+          </dd>
+        </div>
+        <div class="rounded-lg bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 px-6 py-5">
+          <dt class="text-sm/6 font-medium text-zinc-500 dark:text-zinc-400">Undocumented</dt>
+          <dd class="mt-2 flex items-baseline gap-x-2">
+            <span class="text-4xl font-semibold tracking-tight ${undocumentedCount > 0 ? "text-zinc-400 dark:text-zinc-500" : "text-lime-600 dark:text-lime-400"}">${undocumentedCount}</span>
           </dd>
         </div>
       </dl>
@@ -27589,9 +28566,11 @@ function renderAPIReferencePage(data) {
                   class="col-start-1 row-start-1 w-full appearance-none rounded-lg bg-white dark:bg-zinc-800 py-2 pl-3 pr-8 text-sm text-zinc-950 dark:text-white outline outline-1 -outline-offset-1 outline-zinc-950/10 dark:outline-white/10 *:bg-white dark:*:bg-zinc-800 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-zinc-950 dark:focus:outline-white min-w-[200px]"
                 >
                   <option value="">All Categories</option>
-                  ${Object.keys(categoryInfo).map((category) => `
-                    <option value="${category}">${categoryInfo[category].title}</option>
-                  `).join("")}
+                  ${categories.map((category) => {
+    const info = CATEGORY_INFO[category];
+    const title = info ? info.title : category;
+    return `<option value="${category}">${title}</option>`;
+  }).join("\n                  ")}
                 </select>
                 <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-zinc-500 dark:text-zinc-400 sm:size-4">
                   <path d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
@@ -27605,7 +28584,7 @@ function renderAPIReferencePage(data) {
       <!-- API Categories -->
       <div class="space-y-6">
         ${Object.entries(endpointsByCategory).map(([category, endpoints]) => {
-    const info = categoryInfo[category] || { title: category, description: "", icon: "\u{1F4CB}" };
+    const info = CATEGORY_INFO[category] || { title: category, description: "", icon: "&#x1f4cb;" };
     return `
             <div class="api-category" data-category="${category}">
               <div class="rounded-lg bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 overflow-hidden">
@@ -27639,23 +28618,14 @@ function renderAPIReferencePage(data) {
                         <div class="flex-1 min-w-0">
                           <div class="flex items-center gap-x-2 mb-2">
                             <code class="text-zinc-950 dark:text-white text-sm font-mono font-medium break-all">${endpoint.path}</code>
-                            ${endpoint.authentication ? `
-                              <span class="shrink-0 inline-flex items-center gap-x-1 rounded-md bg-amber-50 dark:bg-amber-500/10 px-2 py-1 text-xs font-medium text-amber-700 dark:text-amber-300 ring-1 ring-inset ring-amber-700/10 dark:ring-amber-400/20">
-                                <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-                                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
-                                </svg>
-                                Auth
-                              </span>
-                            ` : `
-                              <span class="shrink-0 inline-flex items-center gap-x-1 rounded-md bg-lime-50 dark:bg-lime-500/10 px-2 py-1 text-xs font-medium text-lime-700 dark:text-lime-300 ring-1 ring-inset ring-lime-700/10 dark:ring-lime-400/20">
-                                <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-                                  <path stroke-linecap="round" stroke-linejoin="round" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
-                                </svg>
-                                Public
+                            ${renderAuthBadge(endpoint.authentication)}
+                            ${endpoint.documented === false ? `
+                              <span class="shrink-0 inline-flex items-center rounded-md bg-zinc-50 dark:bg-zinc-800 px-2 py-1 text-xs font-medium text-zinc-400 dark:text-zinc-500 ring-1 ring-inset ring-zinc-200 dark:ring-zinc-700">
+                                Auto-discovered
                               </span>
-                            `}
+                            ` : ""}
                           </div>
-                          <p class="text-zinc-600 dark:text-zinc-400 text-sm leading-6">${endpoint.description}</p>
+                          <p class="text-zinc-600 dark:text-zinc-400 text-sm leading-6">${endpoint.description || '<em class="text-zinc-400 dark:text-zinc-500">No description available</em>'}</p>
                         </div>
                       </div>
                     </div>
@@ -27733,8 +28703,8 @@ function renderAPIReferencePage(data) {
               const path = endpoint.dataset.path.toLowerCase();
               const description = endpoint.dataset.description.toLowerCase();
 
-              const matchesSearch = !searchTerm || 
-                path.includes(searchTerm) || 
+              const matchesSearch = !searchTerm ||
+                path.includes(searchTerm) ||
                 description.includes(searchTerm);
               const matchesMethod = !selectedMethod || method === selectedMethod;
 
@@ -27794,207 +28764,13 @@ function renderAPIReferencePage(data) {
 var VERSION2 = getCoreVersion();
 var router2 = new Hono();
 router2.use("*", requireAuth());
-var apiEndpoints = [
-  // Auth endpoints
-  {
-    method: "POST",
-    path: "/auth/login",
-    description: "Authenticate user with email and password",
-    authentication: false,
-    category: "Auth"
-  },
-  {
-    method: "POST",
-    path: "/auth/register",
-    description: "Register a new user account",
-    authentication: false,
-    category: "Auth"
-  },
-  {
-    method: "POST",
-    path: "/auth/logout",
-    description: "Log out the current user and invalidate session",
-    authentication: true,
-    category: "Auth"
-  },
-  {
-    method: "GET",
-    path: "/auth/me",
-    description: "Get current authenticated user information",
-    authentication: true,
-    category: "Auth"
-  },
-  {
-    method: "POST",
-    path: "/auth/refresh",
-    description: "Refresh authentication token",
-    authentication: true,
-    category: "Auth"
-  },
-  // Content endpoints
-  {
-    method: "GET",
-    path: "/api/collections",
-    description: "List all available collections",
-    authentication: false,
-    category: "Content"
-  },
-  {
-    method: "GET",
-    path: "/api/collections/:collection/content",
-    description: "Get all content items from a specific collection",
-    authentication: false,
-    category: "Content"
-  },
-  {
-    method: "GET",
-    path: "/api/content/:id",
-    description: "Get a specific content item by ID",
-    authentication: false,
-    category: "Content"
-  },
-  {
-    method: "POST",
-    path: "/api/content",
-    description: "Create a new content item",
-    authentication: true,
-    category: "Content"
-  },
-  {
-    method: "PUT",
-    path: "/api/content/:id",
-    description: "Update an existing content item",
-    authentication: true,
-    category: "Content"
-  },
-  {
-    method: "DELETE",
-    path: "/api/content/:id",
-    description: "Delete a content item",
-    authentication: true,
-    category: "Content"
-  },
-  // Media endpoints
-  {
-    method: "GET",
-    path: "/api/media",
-    description: "List all media files with pagination",
-    authentication: false,
-    category: "Media"
-  },
-  {
-    method: "GET",
-    path: "/api/media/:id",
-    description: "Get a specific media file by ID",
-    authentication: false,
-    category: "Media"
-  },
-  {
-    method: "POST",
-    path: "/api/media/upload",
-    description: "Upload a new media file to R2 storage",
-    authentication: true,
-    category: "Media"
-  },
-  {
-    method: "DELETE",
-    path: "/api/media/:id",
-    description: "Delete a media file from storage",
-    authentication: true,
-    category: "Media"
-  },
-  // Admin endpoints
-  {
-    method: "GET",
-    path: "/admin/api/stats",
-    description: "Get dashboard statistics (collections, content, media, users)",
-    authentication: true,
-    category: "Admin"
-  },
-  {
-    method: "GET",
-    path: "/admin/api/storage",
-    description: "Get storage usage information",
-    authentication: true,
-    category: "Admin"
-  },
-  {
-    method: "GET",
-    path: "/admin/api/activity",
-    description: "Get recent activity logs",
-    authentication: true,
-    category: "Admin"
-  },
-  {
-    method: "GET",
-    path: "/admin/api/collections",
-    description: "List all collections with field counts",
-    authentication: true,
-    category: "Admin"
-  },
-  {
-    method: "POST",
-    path: "/admin/api/collections",
-    description: "Create a new collection",
-    authentication: true,
-    category: "Admin"
-  },
-  {
-    method: "PATCH",
-    path: "/admin/api/collections/:id",
-    description: "Update an existing collection",
-    authentication: true,
-    category: "Admin"
-  },
-  {
-    method: "DELETE",
-    path: "/admin/api/collections/:id",
-    description: "Delete a collection (must be empty)",
-    authentication: true,
-    category: "Admin"
-  },
-  {
-    method: "GET",
-    path: "/admin/api/migrations/status",
-    description: "Get database migration status",
-    authentication: true,
-    category: "Admin"
-  },
-  {
-    method: "POST",
-    path: "/admin/api/migrations/run",
-    description: "Run pending database migrations",
-    authentication: true,
-    category: "Admin"
-  },
-  // System endpoints
-  {
-    method: "GET",
-    path: "/health",
-    description: "Health check endpoint for monitoring",
-    authentication: false,
-    category: "System"
-  },
-  {
-    method: "GET",
-    path: "/api/health",
-    description: "API health check with schema information",
-    authentication: false,
-    category: "System"
-  },
-  {
-    method: "GET",
-    path: "/api",
-    description: "API root - returns API information and OpenAPI spec",
-    authentication: false,
-    category: "System"
-  }
-];
 router2.get("/", async (c) => {
   const user = c.get("user");
   try {
+    const app2 = getAppInstance();
+    const endpoints = buildRouteList(app2);
     const pageData = {
-      endpoints: apiEndpoints,
+      endpoints,
       user: user ? {
         name: user.email.split("@")[0] || user.email,
         email: user.email,
@@ -28050,5 +28826,5 @@ var ROUTES_INFO = {
 };
 
 export { ROUTES_INFO, adminCheckboxRoutes, adminCollectionsRoutes, adminDesignRoutes, adminFormsRoutes, adminLogsRoutes, adminMediaRoutes, adminPluginRoutes, adminSettingsRoutes, admin_api_default, admin_code_examples_default, admin_content_default, admin_testimonials_default, api_content_crud_default, api_default, api_media_default, api_system_default, auth_default, getConfirmationDialogScript2 as getConfirmationDialogScript, public_forms_default, renderConfirmationDialog2 as renderConfirmationDialog, router, router2, test_cleanup_default, userRoutes };
-//# sourceMappingURL=chunk-CH5UHZVM.js.map
-//# sourceMappingURL=chunk-CH5UHZVM.js.map
+//# sourceMappingURL=chunk-JTNUM7JE.js.map
+//# sourceMappingURL=chunk-JTNUM7JE.js.map