@sonicjs-cms/core 2.4.0 → 2.5.0

package/dist/{chunk-FT6NBHNX.js → chunk-OJZ45OJD.js}

@@ -1,9 +1,10 @@
 import { getCacheService, CACHE_CONFIGS, getLogger, SettingsService } from './chunk-3YNNVSMC.js';
-import { requireAuth, isPluginActive, requireRole, AuthManager, logActivity } from './chunk-DXM575E2.js';
+import { requireAuth, isPluginActive, requireRole, AuthManager, logActivity } from './chunk-TJTWRO4G.js';
 import { PluginService } from './chunk-SGAG6FD3.js';
-import { MigrationService } from './chunk-D2NLCPO2.js';
+import { MigrationService } from './chunk-VEL7QRYI.js';
 import { init_admin_layout_catalyst_template, renderDesignPage, renderCheckboxPage, renderTestimonialsList, renderCodeExamplesList, renderAlert, renderTable, renderPagination, renderConfirmationDialog, getConfirmationDialogScript, renderAdminLayoutCatalyst, renderAdminLayout, adminLayoutV2, renderForm } from './chunk-V5LBQN3I.js';
-import { QueryFilterBuilder, sanitizeInput, getCoreVersion, escapeHtml } from './chunk-VNCYCH3H.js';
+import { PluginBuilder } from './chunk-QDBNW7KQ.js';
+import { QueryFilterBuilder, getBlocksFieldConfig, parseBlocksValue, sanitizeInput, getCoreVersion, escapeHtml } from './chunk-BHNDALCA.js';
 import { metricsTracker } from './chunk-FICTAGD4.js';
 import { Hono } from 'hono';
 import { cors } from 'hono/cors';
@@ -14,6 +15,37 @@ import { html, raw } from 'hono/html';
 // src/schemas/index.ts
 var schemaDefinitions = [];
 var apiContentCrudRoutes = new Hono();
+apiContentCrudRoutes.get("/check-slug", async (c) => {
+  try {
+    const db = c.env.DB;
+    const collectionId = c.req.query("collectionId");
+    const slug = c.req.query("slug");
+    const excludeId = c.req.query("excludeId");
+    if (!collectionId || !slug) {
+      return c.json({ error: "collectionId and slug are required" }, 400);
+    }
+    let query = "SELECT id FROM content WHERE collection_id = ? AND slug = ?";
+    const params = [collectionId, slug];
+    if (excludeId) {
+      query += " AND id != ?";
+      params.push(excludeId);
+    }
+    const existing = await db.prepare(query).bind(...params).first();
+    if (existing) {
+      return c.json({
+        available: false,
+        message: "This URL slug is already in use in this collection"
+      });
+    }
+    return c.json({ available: true });
+  } catch (error) {
+    console.error("Error checking slug:", error);
+    return c.json({
+      error: "Failed to check slug availability",
+      details: error instanceof Error ? error.message : String(error)
+    }, 500);
+  }
+});
 apiContentCrudRoutes.get("/:id", async (c) => {
   try {
     const id = c.req.param("id");
@@ -1720,7 +1752,7 @@ adminApiRoutes.delete("/collections/:id", async (c) => {
 });
 adminApiRoutes.get("/migrations/status", async (c) => {
   try {
-    const { MigrationService: MigrationService2 } = await import('./migrations-57ZHBQ4X.js');
+    const { MigrationService: MigrationService2 } = await import('./migrations-TGZKJKV4.js');
     const db = c.env.DB;
     const migrationService = new MigrationService2(db);
     const status = await migrationService.getMigrationStatus();
@@ -1745,7 +1777,7 @@ adminApiRoutes.post("/migrations/run", async (c) => {
         error: "Unauthorized. Admin access required."
       }, 403);
     }
-    const { MigrationService: MigrationService2 } = await import('./migrations-57ZHBQ4X.js');
+    const { MigrationService: MigrationService2 } = await import('./migrations-TGZKJKV4.js');
     const db = c.env.DB;
     const migrationService = new MigrationService2(db);
     const result = await migrationService.runPendingMigrations();
@@ -1764,7 +1796,7 @@ adminApiRoutes.post("/migrations/run", async (c) => {
 });
 adminApiRoutes.get("/migrations/validate", async (c) => {
   try {
-    const { MigrationService: MigrationService2 } = await import('./migrations-57ZHBQ4X.js');
+    const { MigrationService: MigrationService2 } = await import('./migrations-TGZKJKV4.js');
     const db = c.env.DB;
     const migrationService = new MigrationService2(db);
     const validation = await migrationService.validateSchema();
@@ -3383,7 +3415,7 @@ init_admin_layout_catalyst_template();
 
 // src/templates/components/dynamic-field.template.ts
 function renderDynamicField(field, options = {}) {
-  const { value = "", errors = [], disabled = false, className = "", pluginStatuses = {} } = options;
+  const { value = "", errors = [], disabled = false, className = "", pluginStatuses = {}, collectionId = "", contentId = "" } = options;
   const opts = field.field_options || {};
   const required = field.is_required ? "required" : "";
   const baseClasses = `w-full rounded-lg px-3 py-2 text-sm text-zinc-950 dark:text-white bg-white dark:bg-zinc-800 shadow-sm ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-zinc-950 dark:focus:ring-white transition-shadow ${className}`;
@@ -3636,67 +3668,171 @@ function renderDynamicField(field, options = {}) {
       `;
       break;
     case "slug":
-      let slugPattern = opts.pattern || "^[a-z0-9-]+$";
-      let slugHelp = '<p class="mt-2 text-xs text-zinc-500 dark:text-zinc-400">Use lowercase letters, numbers, and hyphens only</p>';
-      slugHelp += `<button type="button" class="mt-1 text-xs text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300" onclick="generateSlugFromTitle('\${fieldId}')">Generate from title</button>`;
+      const slugPattern = opts.pattern || "^[a-z0-9-]+$";
+      const collectionIdValue = collectionId || opts.collectionId || "";
+      const contentIdValue = contentId || opts.contentId || "";
+      const isEditMode = !!value;
       fieldHTML = `
-        <input
-          type="text"
-          id="${fieldId}"
-          name="${fieldName}"
-          value="${escapeHtml2(value)}"
-          placeholder="${opts.placeholder || "url-friendly-slug"}"
-          maxlength="${opts.maxLength || ""}"
-          data-pattern="${slugPattern}"
-          class="${baseClasses} ${errorClasses}"
-          ${required}
-          ${disabled ? "disabled" : ""}
-        >
-        ${slugHelp}
+        <div class="slug-field-container">
+          <input
+            type="text"
+            id="${fieldId}"
+            name="${fieldName}"
+            value="${escapeHtml2(value)}"
+            placeholder="${opts.placeholder || "url-friendly-slug"}"
+            maxlength="${opts.maxLength || 100}"
+            data-pattern="${slugPattern}"
+            data-collection-id="${collectionIdValue}"
+            data-content-id="${contentIdValue}"
+            data-is-edit-mode="${isEditMode}"
+            class="${baseClasses} ${errorClasses}"
+            ${required}
+            ${disabled ? "disabled" : ""}
+          >
+          <div id="${fieldId}-status" class="slug-status mt-1 text-sm min-h-[20px]"></div>
+          <button 
+            type="button" 
+            class="regenerate-slug-btn mt-2 text-sm text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 flex items-center gap-1 transition-colors"
+            onclick="window.regenerateSlugFromTitle_${fieldId.replace(/-/g, "_")}()"
+          >
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+            </svg>
+            Regenerate from title
+          </button>
+          <p class="text-xs text-zinc-500 dark:text-zinc-400 mt-1">Use lowercase letters, numbers, and hyphens only</p>
+        </div>
+        
         <script>
           (function() {
-            const field = document.getElementById('${fieldId}');
+            const slugField = document.getElementById('${fieldId}');
+            const statusDiv = document.getElementById('${fieldId}-status');
+            const isEditMode = slugField.dataset.isEditMode === 'true';
             const pattern = new RegExp('${slugPattern}');
-
-            field.addEventListener('input', function() {
-              if (this.value && !pattern.test(this.value)) {
-                this.setCustomValidity('Please use only lowercase letters, numbers, and hyphens.');
-              } else {
-                this.setCustomValidity('');
-              }
-            });
-
-            field.addEventListener('blur', function() {
-              this.reportValidity();
-            });
-          })();
-
-          function generateSlugFromTitle(slugFieldId) {
-            const titleField = document.querySelector('input[name="title"]');
-            const slugField = document.getElementById(slugFieldId);
-            if (titleField && slugField) {
-              const slug = titleField.value
+            const collectionId = slugField.dataset.collectionId;
+            const contentId = slugField.dataset.contentId;
+            
+            let checkTimeout;
+            let lastCheckedSlug = '';
+            let manuallyEdited = false;
+            
+            // Shared slug generation function
+            function generateSlug(text) {
+              if (!text) return '';
+              
+              return text
                 .toLowerCase()
+                .normalize('NFD')
+                .replace(/[\\u0300-\\u036f]/g, '')
                 .replace(/[^a-z0-9\\s_-]/g, '')
                 .replace(/\\s+/g, '-')
                 .replace(/[-_]+/g, '-')
-                .replace(/^[-_]|[-_]$/g, '');
-              slugField.value = slug;
+                .replace(/^[-_]+|[-_]+$/g, '')
+                .substring(0, 100);
             }
-          }
-
-          // Auto-generate slug when title changes
-          document.addEventListener('DOMContentLoaded', function() {
-            const titleField = document.querySelector('input[name="title"]');
-            const slugField = document.getElementById('${fieldId}');
-            if (titleField && slugField && !slugField.value) {
-              titleField.addEventListener('input', function() {
-                if (!slugField.value) {
-                  generateSlugFromTitle('${fieldId}');
+            
+            // Check if slug is available
+            async function checkSlugAvailability(slug) {
+              if (!slug || !collectionId) return;
+              
+              // Don't check if it's the same as last time
+              if (slug === lastCheckedSlug) return;
+              lastCheckedSlug = slug;
+              
+              try {
+                // Show checking status
+                statusDiv.innerHTML = '<span class="text-gray-400">\u23F3 Checking availability...</span>';
+                
+                // Build URL
+                let url = \`/api/content/check-slug?collectionId=\${encodeURIComponent(collectionId)}&slug=\${encodeURIComponent(slug)}\`;
+                if (contentId) {
+                  url += \`&excludeId=\${encodeURIComponent(contentId)}\`;
                 }
-              });
+                
+                const response = await fetch(url);
+                const data = await response.json();
+                
+                if (data.available) {
+                  statusDiv.innerHTML = '<span class="text-green-500 dark:text-green-400">\u2713 Available</span>';
+                  slugField.setCustomValidity('');
+                } else {
+                  statusDiv.innerHTML = \`<span class="text-red-500 dark:text-red-400">\u2717 \${data.message || 'Already in use'}</span>\`;
+                  slugField.setCustomValidity(data.message || 'This slug is already in use');
+                }
+              } catch (error) {
+                console.error('Error checking slug:', error);
+                statusDiv.innerHTML = '<span class="text-yellow-500 dark:text-yellow-400">\u26A0 Could not verify</span>';
+              }
             }
-          });
+            
+            // Format validation and duplicate checking
+            slugField.addEventListener('input', function() {
+              const value = this.value;
+              
+              // Mark as manually edited if user types directly
+              if (document.activeElement === this) {
+                manuallyEdited = true;
+              }
+              
+              // Clear status if empty
+              if (!value) {
+                statusDiv.innerHTML = '';
+                this.setCustomValidity('');
+                return;
+              }
+              
+              // Pattern validation
+              if (!pattern.test(value)) {
+                this.setCustomValidity('Please use only lowercase letters, numbers, and hyphens.');
+                statusDiv.innerHTML = '<span class="text-red-500 dark:text-red-400">\u2717 Invalid format</span>';
+                return;
+              }
+              
+              // Debounce the availability check
+              clearTimeout(checkTimeout);
+              checkTimeout = setTimeout(() => {
+                checkSlugAvailability(value);
+              }, 500); // Wait 500ms after user stops typing
+            });
+            
+            // Initial check if field has value
+            if (slugField.value) {
+              checkSlugAvailability(slugField.value);
+            }
+            
+            // Auto-generate only in create mode
+            // Wait for all fields to be rendered before attaching listeners
+            if (!isEditMode) {
+              // Use setTimeout to ensure all fields in the form are rendered
+              setTimeout(() => {
+                const titleField = document.querySelector('input[name="title"]');
+                if (titleField) {
+                  titleField.addEventListener('input', function() {
+                    if (!manuallyEdited) {
+                      const slug = generateSlug(this.value);
+                      slugField.value = slug;
+                      
+                      // Trigger validation and duplicate check
+                      slugField.dispatchEvent(new Event('input', { bubbles: true }));
+                    }
+                  });
+                }
+              }, 0);
+            }
+            
+            // Global function for regenerate button
+            window.regenerateSlugFromTitle_${fieldId.replace(/-/g, "_")} = function() {
+              const titleField = document.querySelector('input[name="title"]');
+              if (titleField && slugField) {
+                const slug = generateSlug(titleField.value);
+                slugField.value = slug;
+                manuallyEdited = false;
+                
+                // Trigger validation and duplicate check
+                slugField.dispatchEvent(new Event('input', { bubbles: true }));
+              }
+            };
+          })();
         </script>
       `;
       break;
@@ -3829,207 +3965,6 @@ function escapeHtml2(text) {
     "'": "&#39;"
   })[char] || char);
 }
-var PluginBuilder = class _PluginBuilder {
-  plugin;
-  constructor(options) {
-    this.plugin = {
-      name: options.name,
-      version: options.version,
-      description: options.description,
-      author: options.author,
-      dependencies: options.dependencies,
-      routes: [],
-      middleware: [],
-      models: [],
-      services: [],
-      adminPages: [],
-      adminComponents: [],
-      menuItems: [],
-      hooks: []
-    };
-  }
-  /**
-   * Create a new plugin builder
-   */
-  static create(options) {
-    return new _PluginBuilder(options);
-  }
-  /**
-   * Add metadata to the plugin
-   */
-  metadata(metadata) {
-    Object.assign(this.plugin, metadata);
-    return this;
-  }
-  /**
-   * Add routes to plugin
-   */
-  addRoutes(routes) {
-    this.plugin.routes = [...this.plugin.routes || [], ...routes];
-    return this;
-  }
-  /**
-   * Add a single route to plugin
-   */
-  addRoute(path, handler, options) {
-    const route = {
-      path,
-      handler,
-      ...options
-    };
-    this.plugin.routes = [...this.plugin.routes || [], route];
-    return this;
-  }
-  /**
-   * Add middleware to plugin
-   */
-  addMiddleware(middleware) {
-    this.plugin.middleware = [...this.plugin.middleware || [], ...middleware];
-    return this;
-  }
-  /**
-   * Add a single middleware to plugin
-   */
-  addSingleMiddleware(name, handler, options) {
-    const middleware = {
-      name,
-      handler,
-      ...options
-    };
-    this.plugin.middleware = [...this.plugin.middleware || [], middleware];
-    return this;
-  }
-  /**
-   * Add models to plugin
-   */
-  addModels(models) {
-    this.plugin.models = [...this.plugin.models || [], ...models];
-    return this;
-  }
-  /**
-   * Add a single model to plugin
-   */
-  addModel(name, options) {
-    const model = {
-      name,
-      ...options
-    };
-    this.plugin.models = [...this.plugin.models || [], model];
-    return this;
-  }
-  /**
-   * Add services to plugin
-   */
-  addServices(services) {
-    this.plugin.services = [...this.plugin.services || [], ...services];
-    return this;
-  }
-  /**
-   * Add a single service to plugin
-   */
-  addService(name, implementation, options) {
-    const service = {
-      name,
-      implementation,
-      ...options
-    };
-    this.plugin.services = [...this.plugin.services || [], service];
-    return this;
-  }
-  /**
-   * Add admin pages to plugin
-   */
-  addAdminPages(pages) {
-    this.plugin.adminPages = [...this.plugin.adminPages || [], ...pages];
-    return this;
-  }
-  /**
-   * Add a single admin page to plugin
-   */
-  addAdminPage(path, title, component, options) {
-    const page = {
-      path,
-      title,
-      component,
-      ...options
-    };
-    this.plugin.adminPages = [...this.plugin.adminPages || [], page];
-    return this;
-  }
-  /**
-   * Add admin components to plugin
-   */
-  addComponents(components) {
-    this.plugin.adminComponents = [...this.plugin.adminComponents || [], ...components];
-    return this;
-  }
-  /**
-   * Add a single admin component to plugin
-   */
-  addComponent(name, template, options) {
-    const component = {
-      name,
-      template,
-      ...options
-    };
-    this.plugin.adminComponents = [...this.plugin.adminComponents || [], component];
-    return this;
-  }
-  /**
-   * Add menu items to plugin
-   */
-  addMenuItems(items) {
-    this.plugin.menuItems = [...this.plugin.menuItems || [], ...items];
-    return this;
-  }
-  /**
-   * Add a single menu item to plugin
-   */
-  addMenuItem(label, path, options) {
-    const menuItem = {
-      label,
-      path,
-      ...options
-    };
-    this.plugin.menuItems = [...this.plugin.menuItems || [], menuItem];
-    return this;
-  }
-  /**
-   * Add hooks to plugin
-   */
-  addHooks(hooks) {
-    this.plugin.hooks = [...this.plugin.hooks || [], ...hooks];
-    return this;
-  }
-  /**
-   * Add a single hook to plugin
-   */
-  addHook(name, handler, options) {
-    const hook = {
-      name,
-      handler,
-      ...options
-    };
-    this.plugin.hooks = [...this.plugin.hooks || [], hook];
-    return this;
-  }
-  /**
-   * Add lifecycle hooks
-   */
-  lifecycle(hooks) {
-    Object.assign(this.plugin, hooks);
-    return this;
-  }
-  /**
-   * Build the plugin
-   */
-  build() {
-    if (!this.plugin.name || !this.plugin.version) {
-      throw new Error("Plugin name and version are required");
-    }
-    return this.plugin;
-  }
-};
 
 // src/plugins/available/tinymce-plugin/index.ts
 var builder = PluginBuilder.create({
@@ -4573,17 +4508,24 @@ function renderContentFormPage(data) {
   const coreFieldsHTML = coreFields.sort((a, b) => a.field_order - b.field_order).map((field) => renderDynamicField(field, {
     value: getFieldValue(field.field_name),
     errors: data.validationErrors?.[field.field_name] || [],
-    pluginStatuses
+    pluginStatuses,
+    collectionId: data.collection.id,
+    contentId: data.id
+    // Pass content ID when editing
   }));
   const contentFieldsHTML = contentFields.sort((a, b) => a.field_order - b.field_order).map((field) => renderDynamicField(field, {
     value: getFieldValue(field.field_name),
     errors: data.validationErrors?.[field.field_name] || [],
-    pluginStatuses
+    pluginStatuses,
+    collectionId: data.collection.id,
+    contentId: data.id
   }));
   const metaFieldsHTML = metaFields.sort((a, b) => a.field_order - b.field_order).map((field) => renderDynamicField(field, {
     value: getFieldValue(field.field_name),
     errors: data.validationErrors?.[field.field_name] || [],
-    pluginStatuses
+    pluginStatuses,
+    collectionId: data.collection.id,
+    contentId: data.id
   }));
   const pageContent = `
     <div class="space-y-6">
@@ -6500,6 +6442,18 @@ adminContentRoutes.post("/", async (c) => {
     const errors = {};
     for (const field of fields) {
       const value = formData.get(field.field_name);
+      const blocksConfig = getBlocksFieldConfig(field.field_options);
+      if (blocksConfig) {
+        const parsed = parseBlocksValue(value, blocksConfig);
+        if (field.is_required && parsed.value.length === 0) {
+          parsed.errors.push(`${field.field_label} is required`);
+        }
+        if (parsed.errors.length > 0) {
+          errors[field.field_name] = parsed.errors;
+        }
+        data[field.field_name] = parsed.value;
+        continue;
+      }
       if (field.is_required && (!value || value.toString().trim() === "")) {
         errors[field.field_name] = [`${field.field_label} is required`];
         continue;
@@ -6522,6 +6476,67 @@ adminContentRoutes.post("/", async (c) => {
             data[field.field_name] = value;
           }
           break;
+        case "array": {
+          if (!value || value.toString().trim() === "") {
+            data[field.field_name] = [];
+            if (field.is_required) {
+              errors[field.field_name] = [`${field.field_label} is required`];
+            }
+            break;
+          }
+          try {
+            const parsed = JSON.parse(value.toString());
+            if (!Array.isArray(parsed)) {
+              errors[field.field_name] = [`${field.field_label} must be a JSON array`];
+            } else {
+              if (field.is_required && parsed.length === 0) {
+                errors[field.field_name] = [`${field.field_label} is required`];
+              }
+              data[field.field_name] = parsed;
+            }
+          } catch {
+            errors[field.field_name] = [`${field.field_label} must be valid JSON`];
+          }
+          break;
+        }
+        case "object": {
+          if (!value || value.toString().trim() === "") {
+            data[field.field_name] = {};
+            if (field.is_required) {
+              errors[field.field_name] = [`${field.field_label} is required`];
+            }
+            break;
+          }
+          try {
+            const parsed = JSON.parse(value.toString());
+            if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+              errors[field.field_name] = [`${field.field_label} must be a JSON object`];
+            } else {
+              if (field.is_required && Object.keys(parsed).length === 0) {
+                errors[field.field_name] = [`${field.field_label} is required`];
+              }
+              data[field.field_name] = parsed;
+            }
+          } catch {
+            errors[field.field_name] = [`${field.field_label} must be valid JSON`];
+          }
+          break;
+        }
+        case "json": {
+          if (!value || value.toString().trim() === "") {
+            data[field.field_name] = null;
+            if (field.is_required) {
+              errors[field.field_name] = [`${field.field_label} is required`];
+            }
+            break;
+          }
+          try {
+            data[field.field_name] = JSON.parse(value.toString());
+          } catch {
+            errors[field.field_name] = [`${field.field_label} must be valid JSON`];
+          }
+          break;
+        }
         default:
           data[field.field_name] = value;
       }
@@ -6646,6 +6661,18 @@ adminContentRoutes.put("/:id", async (c) => {
     const errors = {};
     for (const field of fields) {
       const value = formData.get(field.field_name);
+      const blocksConfig = getBlocksFieldConfig(field.field_options);
+      if (blocksConfig) {
+        const parsed = parseBlocksValue(value, blocksConfig);
+        if (field.is_required && parsed.value.length === 0) {
+          parsed.errors.push(`${field.field_label} is required`);
+        }
+        if (parsed.errors.length > 0) {
+          errors[field.field_name] = parsed.errors;
+        }
+        data[field.field_name] = parsed.value;
+        continue;
+      }
       if (field.is_required && (!value || value.toString().trim() === "")) {
         errors[field.field_name] = [`${field.field_label} is required`];
         continue;
@@ -6668,6 +6695,67 @@ adminContentRoutes.put("/:id", async (c) => {
             data[field.field_name] = value;
           }
           break;
+        case "array": {
+          if (!value || value.toString().trim() === "") {
+            data[field.field_name] = [];
+            if (field.is_required) {
+              errors[field.field_name] = [`${field.field_label} is required`];
+            }
+            break;
+          }
+          try {
+            const parsed = JSON.parse(value.toString());
+            if (!Array.isArray(parsed)) {
+              errors[field.field_name] = [`${field.field_label} must be a JSON array`];
+            } else {
+              if (field.is_required && parsed.length === 0) {
+                errors[field.field_name] = [`${field.field_label} is required`];
+              }
+              data[field.field_name] = parsed;
+            }
+          } catch {
+            errors[field.field_name] = [`${field.field_label} must be valid JSON`];
+          }
+          break;
+        }
+        case "object": {
+          if (!value || value.toString().trim() === "") {
+            data[field.field_name] = {};
+            if (field.is_required) {
+              errors[field.field_name] = [`${field.field_label} is required`];
+            }
+            break;
+          }
+          try {
+            const parsed = JSON.parse(value.toString());
+            if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+              errors[field.field_name] = [`${field.field_label} must be a JSON object`];
+            } else {
+              if (field.is_required && Object.keys(parsed).length === 0) {
+                errors[field.field_name] = [`${field.field_label} is required`];
+              }
+              data[field.field_name] = parsed;
+            }
+          } catch {
+            errors[field.field_name] = [`${field.field_label} must be valid JSON`];
+          }
+          break;
+        }
+        case "json": {
+          if (!value || value.toString().trim() === "") {
+            data[field.field_name] = null;
+            if (field.is_required) {
+              errors[field.field_name] = [`${field.field_label} is required`];
+            }
+            break;
+          }
+          try {
+            data[field.field_name] = JSON.parse(value.toString());
+          } catch {
+            errors[field.field_name] = [`${field.field_label} must be valid JSON`];
+          }
+          break;
+        }
         default:
           data[field.field_name] = value;
       }
@@ -6787,6 +6875,12 @@ adminContentRoutes.post("/preview", async (c) => {
     const data = {};
     for (const field of fields) {
       const value = formData.get(field.field_name);
+      const blocksConfig = getBlocksFieldConfig(field.field_options);
+      if (blocksConfig) {
+        const parsed = parseBlocksValue(value, blocksConfig);
+        data[field.field_name] = parsed.value;
+        continue;
+      }
       switch (field.field_type) {
         case "number":
           data[field.field_name] = value ? Number(value) : null;
@@ -13315,6 +13409,9 @@ function renderAuthSettingsForm(settings) {
 }
 
 // src/templates/pages/admin-plugin-settings.template.ts
+function escapeHtmlAttr(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
 function renderPluginSettingsPage(data) {
   const { plugin, activity = [], user } = data;
   const pageContent = `
@@ -13592,6 +13689,7 @@ function renderSettingsTab(plugin) {
   const settings = plugin.settings || {};
   const isSeedDataPlugin = plugin.id === "seed-data" || plugin.name === "seed-data";
   const isAuthPlugin = plugin.id === "core-auth" || plugin.name === "core-auth";
+  const isTurnstilePlugin = plugin.id === "turnstile" || plugin.name === "turnstile";
   return `
     ${isSeedDataPlugin ? `
       <div class="backdrop-blur-md bg-black/20 rounded-xl border border-white/10 shadow-xl p-6 mb-6">
@@ -13618,12 +13716,15 @@ function renderSettingsTab(plugin) {
       ${isAuthPlugin ? `
         <h2 class="text-xl font-semibold text-white mb-4">Authentication Settings</h2>
         <p class="text-gray-400 mb-6">Configure user registration fields and validation rules.</p>
+      ` : isTurnstilePlugin ? `
+        <h2 class="text-xl font-semibold text-white mb-4">Cloudflare Turnstile Settings</h2>
+        <p class="text-gray-400 mb-6">Configure CAPTCHA-free bot protection for your forms.</p>
       ` : `
         <h2 class="text-xl font-semibold text-white mb-4">Plugin Settings</h2>
       `}
 
       <form id="settings-form" class="space-y-6">
-        ${isAuthPlugin && Object.keys(settings).length > 0 ? renderAuthSettingsForm(settings) : Object.keys(settings).length > 0 ? renderSettingsFields(settings) : renderNoSettings(plugin)}
+        ${isAuthPlugin && Object.keys(settings).length > 0 ? renderAuthSettingsForm(settings) : isTurnstilePlugin && Object.keys(settings).length > 0 ? renderTurnstileSettingsForm(settings) : Object.keys(settings).length > 0 ? renderSettingsFields(settings) : renderNoSettings(plugin)}
 
         ${Object.keys(settings).length > 0 ? `
         <div class="flex items-center justify-end pt-6 border-t border-white/10">
@@ -13687,6 +13788,80 @@ function renderSettingsFields(settings) {
     }
   }).join("");
 }
+function renderTurnstileSettingsForm(settings) {
+  const inputClass = "backdrop-blur-sm bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white placeholder-gray-300 focus:border-blue-400 focus:outline-none transition-colors w-full";
+  const selectClass = "backdrop-blur-sm bg-zinc-800 border border-white/20 rounded-lg px-3 py-2 text-white focus:border-blue-400 focus:outline-none transition-colors w-full [&>option]:bg-zinc-800 [&>option]:text-white";
+  return `
+    <!-- Enable Toggle -->
+    <div class="flex items-center justify-between">
+      <div>
+        <label for="setting_enabled" class="text-sm font-medium text-gray-300">Enable Turnstile</label>
+        <p class="text-xs text-gray-400">Enable or disable Turnstile verification globally</p>
+      </div>
+      <label class="relative inline-flex items-center cursor-pointer">
+        <input type="checkbox" name="setting_enabled" id="setting_enabled" ${settings.enabled ? "checked" : ""} class="sr-only peer">
+        <div class="w-11 h-6 bg-gray-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+      </label>
+    </div>
+
+    <!-- Site Key -->
+    <div>
+      <label for="setting_siteKey" class="block text-sm font-medium text-gray-300 mb-2">Site Key</label>
+      <input type="text" name="setting_siteKey" id="setting_siteKey" value="${escapeHtmlAttr(settings.siteKey || "")}" placeholder="0x4AAAAAAAA..." class="${inputClass}">
+      <p class="text-xs text-gray-400 mt-1">Your Cloudflare Turnstile site key (public)</p>
+    </div>
+
+    <!-- Secret Key -->
+    <div>
+      <label for="setting_secretKey" class="block text-sm font-medium text-gray-300 mb-2">Secret Key</label>
+      <input type="password" name="setting_secretKey" id="setting_secretKey" value="${escapeHtmlAttr(settings.secretKey || "")}" placeholder="0x4AAAAAAAA..." class="${inputClass}">
+      <p class="text-xs text-gray-400 mt-1">Your Cloudflare Turnstile secret key (private)</p>
+    </div>
+
+    <!-- Theme -->
+    <div>
+      <label for="setting_theme" class="block text-sm font-medium text-gray-300 mb-2">Widget Theme</label>
+      <select name="setting_theme" id="setting_theme" class="${selectClass}" style="color: white; background-color: rgb(39, 39, 42);">
+        <option value="auto" ${settings.theme === "auto" ? "selected" : ""} style="background-color: rgb(39, 39, 42); color: white;">Auto (matches page theme)</option>
+        <option value="light" ${settings.theme === "light" ? "selected" : ""} style="background-color: rgb(39, 39, 42); color: white;">Light</option>
+        <option value="dark" ${settings.theme === "dark" ? "selected" : ""} style="background-color: rgb(39, 39, 42); color: white;">Dark</option>
+      </select>
+      <p class="text-xs text-gray-400 mt-1">Visual appearance of the Turnstile widget</p>
+    </div>
+
+    <!-- Size -->
+    <div>
+      <label for="setting_size" class="block text-sm font-medium text-gray-300 mb-2">Widget Size</label>
+      <select name="setting_size" id="setting_size" class="${selectClass}" style="color: white; background-color: rgb(39, 39, 42);">
+        <option value="normal" ${settings.size === "normal" ? "selected" : ""} style="background-color: rgb(39, 39, 42); color: white;">Normal (300x65px)</option>
+        <option value="compact" ${settings.size === "compact" ? "selected" : ""} style="background-color: rgb(39, 39, 42); color: white;">Compact (130x120px)</option>
+      </select>
+      <p class="text-xs text-gray-400 mt-1">Size of the Turnstile challenge widget</p>
+    </div>
+
+    <!-- Widget Mode -->
+    <div>
+      <label for="setting_mode" class="block text-sm font-medium text-gray-300 mb-2">Widget Mode</label>
+      <select name="setting_mode" id="setting_mode" class="${selectClass}" style="color: white; background-color: rgb(39, 39, 42);">
+        <option value="managed" ${!settings.mode || settings.mode === "managed" ? "selected" : ""} style="background-color: rgb(39, 39, 42); color: white;">Managed (Recommended) - Adaptive challenge</option>
+        <option value="non-interactive" ${settings.mode === "non-interactive" ? "selected" : ""} style="background-color: rgb(39, 39, 42); color: white;">Non-Interactive - Always visible, minimal friction</option>
+        <option value="invisible" ${settings.mode === "invisible" ? "selected" : ""} style="background-color: rgb(39, 39, 42); color: white;">Invisible - No visible widget</option>
+      </select>
+      <p class="text-xs text-gray-400 mt-1"><strong>Managed:</strong> Shows challenge only when needed. <strong>Non-Interactive:</strong> Always shows but doesn't require interaction. <strong>Invisible:</strong> Runs in background without UI.</p>
+    </div>
+
+    <!-- Appearance (Pre-clearance) -->
+    <div>
+      <label for="setting_appearance" class="block text-sm font-medium text-gray-300 mb-2">Pre-clearance / Appearance</label>
+      <select name="setting_appearance" id="setting_appearance" class="${selectClass}" style="color: white; background-color: rgb(39, 39, 42);">
+        <option value="always" ${!settings.appearance || settings.appearance === "always" ? "selected" : ""} style="background-color: rgb(39, 39, 42); color: white;">Always - Pre-clearance enabled (verifies immediately)</option>
+        <option value="execute" ${settings.appearance === "execute" ? "selected" : ""} style="background-color: rgb(39, 39, 42); color: white;">Execute - Challenge on form submit</option>
+        <option value="interaction-only" ${settings.appearance === "interaction-only" ? "selected" : ""} style="background-color: rgb(39, 39, 42); color: white;">Interaction Only - Only after user interaction</option>
+      </select>
+      <p class="text-xs text-gray-400 mt-1">Controls when Turnstile verification occurs. <strong>Always:</strong> Verifies immediately (pre-clearance). <strong>Execute:</strong> Verifies on form submit. <strong>Interaction Only:</strong> Only after user interaction.</p>
+    </div>
+  `;
+}
 function renderNoSettings(plugin) {
   if (plugin.id === "seed-data" || plugin.name === "seed-data") {
     return `
@@ -13918,6 +14093,19 @@ var AVAILABLE_PLUGINS = [
     permissions: [],
     dependencies: [],
     is_core: false
+  },
+  {
+    id: "turnstile",
+    name: "turnstile-plugin",
+    display_name: "Cloudflare Turnstile",
+    description: "CAPTCHA-free bot protection for forms using Cloudflare Turnstile. Provides seamless spam prevention with configurable modes, themes, and pre-clearance options.",
+    version: "1.0.0",
+    author: "SonicJS Team",
+    category: "security",
+    icon: "\u{1F6E1}\uFE0F",
+    permissions: [],
+    dependencies: [],
+    is_core: true
   }
 ];
 adminPluginRoutes.get("/", async (c) => {
@@ -14288,6 +14476,33 @@ adminPluginRoutes.post("/install", async (c) => {
       });
       return c.json({ success: true, plugin: easyMdxPlugin2 });
     }
+    if (body.name === "turnstile-plugin") {
+      const turnstilePlugin = await pluginService.installPlugin({
+        id: "turnstile",
+        name: "turnstile-plugin",
+        display_name: "Cloudflare Turnstile",
+        description: "CAPTCHA-free bot protection for forms using Cloudflare Turnstile. Provides seamless spam prevention with configurable modes, themes, and pre-clearance options.",
+        version: "1.0.0",
+        author: "SonicJS Team",
+        category: "security",
+        icon: "\u{1F6E1}\uFE0F",
+        permissions: [],
+        dependencies: [],
+        is_core: true,
+        settings: {
+          siteKey: "",
+          secretKey: "",
+          theme: "auto",
+          size: "normal",
+          mode: "managed",
+          appearance: "always",
+          preClearanceEnabled: false,
+          preClearanceLevel: "managed",
+          enabled: false
+        }
+      });
+      return c.json({ success: true, plugin: turnstilePlugin });
+    }
     return c.json({ error: "Plugin not found in registry" }, 404);
   } catch (error) {
     console.error("Error installing plugin:", error);
@@ -19461,16 +19676,30 @@ adminCollectionsRoutes.get("/:id", async (c) => {
         const schema = typeof collection.schema === "string" ? JSON.parse(collection.schema) : collection.schema;
         if (schema && schema.properties) {
           let fieldOrder = 0;
-          fields = Object.entries(schema.properties).map(([fieldName, fieldConfig]) => ({
-            id: `schema-${fieldName}`,
-            field_name: fieldName,
-            field_type: fieldConfig.type || "string",
-            field_label: fieldConfig.title || fieldName,
-            field_options: fieldConfig,
-            field_order: fieldOrder++,
-            is_required: fieldConfig.required === true || schema.required && schema.required.includes(fieldName),
-            is_searchable: fieldConfig.searchable === true || false
-          }));
+          fields = Object.entries(schema.properties).map(([fieldName, fieldConfig]) => {
+            let fieldType = fieldConfig.type || "string";
+            if (fieldConfig.enum) {
+              fieldType = "select";
+            } else if (fieldConfig.format === "richtext") {
+              fieldType = "richtext";
+            } else if (fieldConfig.format === "media") {
+              fieldType = "media";
+            } else if (fieldConfig.format === "date-time") {
+              fieldType = "date";
+            } else if (fieldConfig.type === "slug" || fieldConfig.format === "slug") {
+              fieldType = "slug";
+            }
+            return {
+              id: `schema-${fieldName}`,
+              field_name: fieldName,
+              field_type: fieldType,
+              field_label: fieldConfig.title || fieldName,
+              field_options: fieldConfig,
+              field_order: fieldOrder++,
+              is_required: fieldConfig.required === true || schema.required && schema.required.includes(fieldName),
+              is_searchable: fieldConfig.searchable === true || false
+            };
+          });
         }
       } catch (e) {
         console.error("Error parsing collection schema:", e);
@@ -19685,6 +19914,9 @@ adminCollectionsRoutes.post("/:id/fields", async (c) => {
         fieldConfig.enum = parsedOptions.options || [];
       } else if (fieldType === "media") {
         fieldConfig.format = "media";
+      } else if (fieldType === "slug") {
+        fieldConfig.type = "slug";
+        fieldConfig.format = "slug";
       } else if (fieldType === "quill") {
         fieldConfig.type = "quill";
       } else if (fieldType === "mdxeditor") {
@@ -21802,6 +22034,6 @@ var ROUTES_INFO = {
   reference: "https://github.com/sonicjs/sonicjs"
 };
 
-export { PluginBuilder, ROUTES_INFO, adminCheckboxRoutes, adminCollectionsRoutes, adminDesignRoutes, 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, checkAdminUserExists, router, test_cleanup_default, userRoutes };
-//# sourceMappingURL=chunk-FT6NBHNX.js.map
-//# sourceMappingURL=chunk-FT6NBHNX.js.map
+export { ROUTES_INFO, adminCheckboxRoutes, adminCollectionsRoutes, adminDesignRoutes, 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, checkAdminUserExists, router, test_cleanup_default, userRoutes };
+//# sourceMappingURL=chunk-OJZ45OJD.js.map
+//# sourceMappingURL=chunk-OJZ45OJD.js.map