@sonicjs-cms/core 2.0.10 → 2.0.11

package/dist/{chunk-Z4H6DBVF.js → chunk-CLLJFZ5U.js}

@@ -1,8 +1,9 @@
 import { getCacheService, CACHE_CONFIGS, getLogger, SettingsService } from './chunk-6FR25MPC.js';
-import { requireAuth, isPluginActive, requireRole, AuthManager, logActivity } from './chunk-YHG45LMU.js';
-import { PluginService, MigrationService } from './chunk-COBUPOMD.js';
-import { init_admin_layout_catalyst_template, renderDesignPage, renderCheckboxPage, renderFAQList, renderTestimonialsList, renderCodeExamplesList, renderAlert, renderTable, renderPagination, renderConfirmationDialog, getConfirmationDialogScript, renderAdminLayoutCatalyst, renderAdminLayout, adminLayoutV2, renderForm } from './chunk-LW33AOBF.js';
-import { QueryFilterBuilder, sanitizeInput, getCoreVersion, escapeHtml } from './chunk-MXJJN4IA.js';
+import { requireAuth, isPluginActive, requireRole, AuthManager, logActivity } from './chunk-FYWJMETG.js';
+import { PluginService } from './chunk-I5ZPYKNX.js';
+import { MigrationService } from './chunk-ZPMFT2JW.js';
+import { init_admin_layout_catalyst_template, renderDesignPage, renderCheckboxPage, renderTestimonialsList, renderCodeExamplesList, renderAlert, renderTable, renderPagination, renderConfirmationDialog, getConfirmationDialogScript, renderAdminLayoutCatalyst, renderAdminLayout, adminLayoutV2, renderForm } from './chunk-5RKQB2JG.js';
+import { QueryFilterBuilder, sanitizeInput, getCoreVersion, escapeHtml } from './chunk-DU7JJZN7.js';
 import { metricsTracker } from './chunk-FICTAGD4.js';
 import { Hono } from 'hono';
 import { cors } from 'hono/cors';
@@ -337,8 +338,8 @@ apiRoutes.get("/content", async (c) => {
       filter.limit = 50;
     }
     filter.limit = Math.min(filter.limit, 1e3);
-    const builder = new QueryFilterBuilder();
-    const queryResult = builder.build("content", filter);
+    const builder3 = new QueryFilterBuilder();
+    const queryResult = builder3.build("content", filter);
     if (queryResult.errors.length > 0) {
       return c.json({
         error: "Invalid filter parameters",
@@ -440,8 +441,8 @@ apiRoutes.get("/collections/:collection/content", async (c) => {
       filter.limit = 50;
     }
     filter.limit = Math.min(filter.limit, 1e3);
-    const builder = new QueryFilterBuilder();
-    const queryResult = builder.build("content", filter);
+    const builder3 = new QueryFilterBuilder();
+    const queryResult = builder3.build("content", filter);
     if (queryResult.errors.length > 0) {
       return c.json({
         error: "Invalid filter parameters",
@@ -1084,10 +1085,10 @@ apiMediaRoutes.patch("/:id", async (c) => {
     const allowedFields = ["alt", "caption", "tags", "folder"];
     const updates = [];
     const values = [];
-    for (const [key, value2] of Object.entries(body)) {
+    for (const [key, value] of Object.entries(body)) {
       if (allowedFields.includes(key)) {
         updates.push(`${key} = ?`);
-        values.push(key === "tags" ? JSON.stringify(value2) : value2);
+        values.push(key === "tags" ? JSON.stringify(value) : value);
       }
     }
     if (updates.length === 0) {
@@ -1717,6 +1718,68 @@ adminApiRoutes.delete("/collections/:id", async (c) => {
     return c.json({ error: "Failed to delete collection" }, 500);
   }
 });
+adminApiRoutes.get("/migrations/status", async (c) => {
+  try {
+    const { MigrationService: MigrationService2 } = await import('./migrations-IHERIQVD.js');
+    const db = c.env.DB;
+    const migrationService = new MigrationService2(db);
+    const status = await migrationService.getMigrationStatus();
+    return c.json({
+      success: true,
+      data: status
+    });
+  } catch (error) {
+    console.error("Error fetching migration status:", error);
+    return c.json({
+      success: false,
+      error: "Failed to fetch migration status"
+    }, 500);
+  }
+});
+adminApiRoutes.post("/migrations/run", async (c) => {
+  try {
+    const user = c.get("user");
+    if (!user || user.role !== "admin") {
+      return c.json({
+        success: false,
+        error: "Unauthorized. Admin access required."
+      }, 403);
+    }
+    const { MigrationService: MigrationService2 } = await import('./migrations-IHERIQVD.js');
+    const db = c.env.DB;
+    const migrationService = new MigrationService2(db);
+    const result = await migrationService.runPendingMigrations();
+    return c.json({
+      success: result.success,
+      message: result.message,
+      applied: result.applied
+    });
+  } catch (error) {
+    console.error("Error running migrations:", error);
+    return c.json({
+      success: false,
+      error: "Failed to run migrations"
+    }, 500);
+  }
+});
+adminApiRoutes.get("/migrations/validate", async (c) => {
+  try {
+    const { MigrationService: MigrationService2 } = await import('./migrations-IHERIQVD.js');
+    const db = c.env.DB;
+    const migrationService = new MigrationService2(db);
+    const validation = await migrationService.validateSchema();
+    return c.json({
+      success: true,
+      data: validation
+    });
+  } catch (error) {
+    console.error("Error validating schema:", error);
+    return c.json({
+      success: false,
+      error: "Failed to validate schema"
+    }, 500);
+  }
+});
 var admin_api_default = adminApiRoutes;
 
 // src/templates/pages/auth-login.template.ts
@@ -1861,7 +1924,7 @@ function renderLoginPage(data, demoLoginActive = false) {
 
             if (emailInput && passwordInput) {
               emailInput.value = 'admin@sonicjs.com';
-              passwordInput.value = 'admin123';
+              passwordInput.value = 'sonicjs!';
 
               // Add visual indication that form is prefilled (only if not already present)
               const form = emailInput.closest('form');
@@ -2120,16 +2183,22 @@ authRoutes.post(
   async (c) => {
     try {
       const db = c.env.DB;
-      const requestData = await c.req.json();
+      let requestData;
+      try {
+        requestData = await c.req.json();
+      } catch (parseError) {
+        return c.json({ error: "Invalid JSON in request body" }, 400);
+      }
       const validationSchema = await authValidationService.buildRegistrationSchema(db);
-      const validationResult = await validationSchema.safeParseAsync(requestData);
-      if (!validationResult.success) {
+      let validatedData;
+      try {
+        validatedData = await validationSchema.parseAsync(requestData);
+      } catch (validationError) {
         return c.json({
           error: "Validation failed",
-          details: validationResult.error.errors.map((e) => e.message)
+          details: validationError.errors?.map((e) => e.message) || [validationError.message || "Invalid request data"]
         }, 400);
       }
-      const validatedData = validationResult.data;
       const email = validatedData.email;
       const password = validatedData.password;
       const username = validatedData.username || authValidationService.generateDefaultValue("username", validatedData);
@@ -2181,7 +2250,13 @@ authRoutes.post(
       }, 201);
     } catch (error) {
       console.error("Registration error:", error);
-      return c.json({ error: "Registration failed" }, 500);
+      if (error instanceof Error && error.message.includes("validation")) {
+        return c.json({ error: error.message }, 400);
+      }
+      return c.json({
+        error: "Registration failed",
+        details: error instanceof Error ? error.message : String(error)
+      }, 500);
     }
   }
 );
@@ -2227,8 +2302,8 @@ authRoutes.post("/login", async (c) => {
         id: user.id,
         email: user.email,
         username: user.username,
-        firstName: user.firstName,
-        lastName: user.lastName,
+        firstName: user.first_name,
+        lastName: user.last_name,
         role: user.role
       },
       token
@@ -2470,8 +2545,10 @@ authRoutes.post("/seed-admin", async (c) => {
     `).run();
     const existingAdmin = await db.prepare("SELECT id FROM users WHERE email = ? OR username = ?").bind("admin@sonicjs.com", "admin").first();
     if (existingAdmin) {
+      const passwordHash2 = await AuthManager.hashPassword("sonicjs!");
+      await db.prepare("UPDATE users SET password_hash = ?, updated_at = ? WHERE id = ?").bind(passwordHash2, Date.now(), existingAdmin.id).run();
       return c.json({
-        message: "Admin user already exists",
+        message: "Admin user already exists (password updated)",
         user: {
           id: existingAdmin.id,
           email: "admin@sonicjs.com",
@@ -2480,7 +2557,7 @@ authRoutes.post("/seed-admin", async (c) => {
         }
       });
     }
-    const passwordHash = await AuthManager.hashPassword("admin123");
+    const passwordHash = await AuthManager.hashPassword("sonicjs!");
     const userId = "admin-user-id";
     const now = Date.now();
     const adminEmail = "admin@sonicjs.com".toLowerCase();
@@ -2990,7 +3067,7 @@ init_admin_layout_catalyst_template();
 
 // src/templates/components/dynamic-field.template.ts
 function renderDynamicField(field, options = {}) {
-  const { value: value2 = "", errors = [], disabled = false, className = "" } = options;
+  const { value = "", errors = [], disabled = false, className = "" } = 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}`;
@@ -3047,7 +3124,7 @@ function renderDynamicField(field, options = {}) {
           type="text" 
           id="${fieldId}"
           name="${fieldName}"
-          value="${escapeHtml2(value2)}"
+          value="${escapeHtml2(value)}"
           placeholder="${opts.placeholder || ""}"
           maxlength="${opts.maxLength || ""}"
           ${opts.pattern ? `data-pattern="${opts.pattern}"` : ""}
@@ -3083,40 +3160,66 @@ function renderDynamicField(field, options = {}) {
         ` : ""}
       `;
       break;
+    case "textarea":
+      fieldHTML = `
+        <textarea
+          id="${fieldId}"
+          name="${fieldName}"
+          rows="${opts.rows || 6}"
+          placeholder="${opts.placeholder || ""}"
+          maxlength="${opts.maxLength || ""}"
+          class="${baseClasses} ${errorClasses} resize-y"
+          ${required}
+          ${disabled ? "disabled" : ""}
+        >${escapeHtml2(value)}</textarea>
+      `;
+      break;
     case "richtext":
       fieldHTML = `
-        <div class="richtext-container">
-          <textarea 
+        <div class="richtext-container" data-height="${opts.height || 300}" data-toolbar="${opts.toolbar || "full"}">
+          <textarea
             id="${fieldId}"
             name="${fieldName}"
             class="${baseClasses} ${errorClasses} min-h-[${opts.height || 300}px]"
             ${required}
             ${disabled ? "disabled" : ""}
-          >${escapeHtml2(value2)}</textarea>
-          <script>
-            // Initialize TinyMCE for this field
-            if (typeof tinymce !== 'undefined') {
-              tinymce.init({
-                selector: '#${fieldId}',
-                skin: 'oxide-dark',
-                content_css: 'dark',
-                height: ${opts.height || 300},
-                menubar: false,
-                plugins: [
-                  'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
-                  'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
-                  'insertdatetime', 'media', 'table', 'help', 'wordcount'
-                ],
-                toolbar: '${opts.toolbar === "simple" ? "bold italic underline | bullist numlist | link" : "undo redo | blocks | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help"}',
-                content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif; font-size: 14px; color: #fff; background-color: #1f2937; }',
-                setup: function(editor) {
-                  editor.on('change', function() {
-                    editor.save();
-                  });
-                }
-              });
-            }
-          </script>
+          >${escapeHtml2(value)}</textarea>
+        </div>
+      `;
+      break;
+    case "quill":
+      fieldHTML = `
+        <div class="quill-editor-container" data-field-id="${fieldId}">
+          <!-- Quill Editor Container -->
+          <div
+            id="${fieldId}-editor"
+            class="quill-editor bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100"
+            data-theme="${opts.theme || "snow"}"
+            data-toolbar="${opts.toolbar || "full"}"
+            data-placeholder="${opts.placeholder || "Enter content..."}"
+            data-height="${opts.height || 300}"
+          >${value}</div>
+
+          <!-- Hidden input to store the actual content for form submission -->
+          <input
+            type="hidden"
+            id="${fieldId}"
+            name="${fieldName}"
+            value="${escapeHtml2(value)}"
+          >
+        </div>
+      `;
+      break;
+    case "mdxeditor":
+      fieldHTML = `
+        <div class="richtext-container" data-height="${opts.height || 300}" data-toolbar="${opts.toolbar || "full"}">
+          <textarea
+            id="${fieldId}"
+            name="${fieldName}"
+            class="${baseClasses} ${errorClasses} min-h-[${opts.height || 300}px]"
+            ${required}
+            ${disabled ? "disabled" : ""}
+          >${escapeHtml2(value)}</textarea>
         </div>
       `;
       break;
@@ -3126,7 +3229,7 @@ function renderDynamicField(field, options = {}) {
           type="number" 
           id="${fieldId}"
           name="${fieldName}"
-          value="${value2}"
+          value="${value}"
           min="${opts.min || ""}"
           max="${opts.max || ""}"
           step="${opts.step || ""}"
@@ -3138,7 +3241,7 @@ function renderDynamicField(field, options = {}) {
       `;
       break;
     case "boolean":
-      const checked = value2 === true || value2 === "true" || value2 === "1" ? "checked" : "";
+      const checked = value === true || value === "true" || value === "1" ? "checked" : "";
       fieldHTML = `
         <div class="flex items-center space-x-3">
           <input 
@@ -3159,11 +3262,26 @@ function renderDynamicField(field, options = {}) {
       break;
     case "date":
       fieldHTML = `
-        <input 
-          type="date" 
+        <input
+          type="date"
+          id="${fieldId}"
+          name="${fieldName}"
+          value="${value}"
+          min="${opts.min || ""}"
+          max="${opts.max || ""}"
+          class="${baseClasses} ${errorClasses}"
+          ${required}
+          ${disabled ? "disabled" : ""}
+        >
+      `;
+      break;
+    case "datetime":
+      fieldHTML = `
+        <input
+          type="datetime-local"
           id="${fieldId}"
           name="${fieldName}"
-          value="${value2}"
+          value="${value}"
           min="${opts.min || ""}"
           max="${opts.max || ""}"
           class="${baseClasses} ${errorClasses}"
@@ -3172,10 +3290,75 @@ 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>`;
+      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}
+        <script>
+          (function() {
+            const field = document.getElementById('${fieldId}');
+            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
+                .toLowerCase()
+                .replace(/[^a-z0-9\\s_-]/g, '')
+                .replace(/\\s+/g, '-')
+                .replace(/[-_]+/g, '-')
+                .replace(/^[-_]|[-_]$/g, '');
+              slugField.value = slug;
+            }
+          }
+
+          // 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}');
+                }
+              });
+            }
+          });
+        </script>
+      `;
+      break;
     case "select":
       const options2 = opts.options || [];
       const multiple = opts.multiple ? "multiple" : "";
-      const selectedValues = Array.isArray(value2) ? value2 : [value2];
+      const selectedValues = Array.isArray(value) ? value : [value];
       fieldHTML = `
         <select 
           id="${fieldId}"
@@ -3208,9 +3391,9 @@ function renderDynamicField(field, options = {}) {
     case "media":
       fieldHTML = `
         <div class="media-field-container">
-          <input type="hidden" id="${fieldId}" name="${fieldName}" value="${value2}">
-          <div class="media-preview ${value2 ? "" : "hidden"}" id="${fieldId}-preview">
-            ${value2 ? `<img src="${value2}" alt="Selected media" class="w-32 h-32 object-cover rounded-lg border border-white/20">` : ""}
+          <input type="hidden" id="${fieldId}" name="${fieldName}" value="${value}">
+          <div class="media-preview ${value ? "" : "hidden"}" id="${fieldId}-preview">
+            ${value ? `<img src="${value}" alt="Selected media" class="w-32 h-32 object-cover rounded-lg border border-white/20">` : ""}
           </div>
           <div class="media-actions mt-2 space-x-2">
             <button
@@ -3224,7 +3407,7 @@ function renderDynamicField(field, options = {}) {
               </svg>
               Select Media
             </button>
-            ${value2 ? `
+            ${value ? `
               <button
                 type="button"
                 onclick="clearMediaField('${fieldId}')"
@@ -3238,36 +3421,13 @@ function renderDynamicField(field, options = {}) {
         </div>
       `;
       break;
-    case "guid":
-      fieldHTML = `
-        <div class="guid-field-container">
-          <input
-            type="text"
-            id="${fieldId}"
-            name="${fieldName}"
-            value="${escapeHtml2(value2)}"
-            class="${baseClasses} bg-zinc-100 dark:bg-zinc-800/50 cursor-not-allowed"
-            readonly
-            disabled
-          >
-          <div class="mt-2 flex items-start gap-x-2">
-            <svg class="h-5 w-5 text-cyan-600 dark:text-cyan-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"/>
-            </svg>
-            <div class="text-xs text-zinc-600 dark:text-zinc-400">
-              ${value2 ? "This unique identifier was automatically generated and cannot be changed." : "A unique identifier (UUID) will be automatically generated when you save this content."}
-            </div>
-          </div>
-        </div>
-      `;
-      break;
     default:
       fieldHTML = `
         <input 
           type="text" 
           id="${fieldId}"
           name="${fieldName}"
-          value="${escapeHtml2(value2)}"
+          value="${escapeHtml2(value)}"
           class="${baseClasses} ${errorClasses}"
           ${required}
           ${disabled ? "disabled" : ""}
@@ -3324,34 +3484,750 @@ 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/templates/pages/admin-content-form.template.ts
-function renderContentFormPage(data) {
-  const isEdit = data.isEdit || !!data.id;
-  const title = isEdit ? `Edit: ${data.title || "Content"}` : `New ${data.collection.display_name}`;
-  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_"));
-  const metaFields = data.fields.filter((f) => f.field_name.startsWith("meta_"));
-  const getFieldValue = (fieldName) => {
-    if (fieldName === "title") return data.title || data.data?.[fieldName] || "";
-    if (fieldName === "slug") return data.slug || data.data?.[fieldName] || "";
-    return data.data?.[fieldName] || "";
-  };
-  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] || []
-  }));
-  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] || []
-  }));
-  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] || []
-  }));
-  const pageContent = `
-    <div class="space-y-6">
+// src/plugins/available/tinymce-plugin/index.ts
+var builder = PluginBuilder.create({
+  name: "tinymce-plugin",
+  version: "1.0.0",
+  description: "Powerful WYSIWYG rich text editor for content creation"
+});
+builder.metadata({
+  author: {
+    name: "SonicJS Team",
+    email: "team@sonicjs.com"
+  },
+  license: "MIT",
+  compatibility: "^2.0.0"
+});
+builder.lifecycle({
+  activate: async () => {
+    console.info("\u2705 TinyMCE plugin activated");
+  },
+  deactivate: async () => {
+    console.info("\u274C TinyMCE plugin deactivated");
+  }
+});
+builder.build();
+function getTinyMCEScript(apiKey = "no-api-key") {
+  return `<script src="https://cdn.tiny.cloud/1/${apiKey}/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>`;
+}
+function getTinyMCEInitScript(config) {
+  const skin = config?.skin || "oxide-dark";
+  const contentCss = skin.includes("dark") ? "dark" : "default";
+  const defaultHeight = config?.defaultHeight || 300;
+  return `
+    // Initialize TinyMCE for all richtext fields
+    function initializeTinyMCE() {
+      if (typeof tinymce !== 'undefined') {
+        // Find all textareas that need TinyMCE
+        document.querySelectorAll('.richtext-container textarea').forEach((textarea) => {
+          // Skip if already initialized
+          if (tinymce.get(textarea.id)) {
+            return;
+          }
+
+          // Get configuration from data attributes
+          const container = textarea.closest('.richtext-container');
+          const height = container?.dataset.height || ${defaultHeight};
+          const toolbar = container?.dataset.toolbar || 'full';
+
+          tinymce.init({
+            selector: '#' + textarea.id,
+            skin: '${skin}',
+            content_css: '${contentCss}',
+            height: parseInt(height),
+            menubar: false,
+            plugins: [
+              'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
+              'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
+              'insertdatetime', 'media', 'table', 'help', 'wordcount'
+            ],
+            toolbar: toolbar === 'simple'
+              ? 'bold italic underline | bullist numlist | link'
+              : toolbar === 'minimal'
+                ? 'bold italic | link'
+                : 'undo redo | blocks | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
+            content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; font-size: 14px }'
+          });
+        });
+      }
+    }
+
+    // Initialize on DOMContentLoaded
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', initializeTinyMCE);
+    } else {
+      // DOM already loaded, initialize immediately
+      initializeTinyMCE();
+    }
+
+    // Also reinitialize after HTMX swaps (for dynamic content)
+    document.addEventListener('htmx:afterSwap', function(event) {
+      // Give the DOM a moment to settle
+      setTimeout(initializeTinyMCE, 100);
+    });
+  `;
+}
+
+// src/plugins/core-plugins/quill-editor/index.ts
+var QUILL_TOOLBARS = {
+  full: [
+    [{ "header": [1, 2, 3, 4, 5, 6, false] }],
+    ["bold", "italic", "underline", "strike"],
+    [{ "color": [] }, { "background": [] }],
+    [{ "align": [] }],
+    [{ "list": "ordered" }, { "list": "bullet" }],
+    [{ "indent": "-1" }, { "indent": "+1" }],
+    ["blockquote", "code-block"],
+    ["link", "image", "video"],
+    ["clean"]
+  ],
+  simple: [
+    ["bold", "italic", "underline"],
+    [{ "list": "ordered" }, { "list": "bullet" }],
+    ["link"]
+  ],
+  minimal: [
+    ["bold", "italic"],
+    ["link"]
+  ]
+};
+function getQuillInitScript() {
+  return `
+    <script>
+      // Global Quill initialization function
+      window.initializeQuillEditors = function() {
+        console.log('[Quill] initializeQuillEditors called');
+        if (typeof Quill === 'undefined') {
+          console.warn('[Quill] Quill is not loaded yet. Retrying...');
+          setTimeout(window.initializeQuillEditors, 100);
+          return;
+        }
+
+        console.log('[Quill] Quill is loaded, searching for editors...');
+        // Find all Quill editor containers that haven't been initialized
+        const containers = document.querySelectorAll('.quill-editor-container');
+        console.log('[Quill] Found', containers.length, 'editor containers');
+
+        containers.forEach((container, index) => {
+          console.log('[Quill] Processing container', index);
+          try {
+          const editorDiv = container.querySelector('.quill-editor');
+          if (!editorDiv || editorDiv.classList.contains('ql-container')) {
+            return; // Already initialized or invalid
+          }
+
+          const fieldId = container.getAttribute('data-field-id');
+          const hiddenInput = document.getElementById(fieldId);
+          const theme = editorDiv.getAttribute('data-theme') || 'snow';
+          const toolbarPreset = editorDiv.getAttribute('data-toolbar') || 'full';
+          const placeholder = editorDiv.getAttribute('data-placeholder') || 'Enter content...';
+          const height = parseInt(editorDiv.getAttribute('data-height') || '300');
+
+          // Get toolbar configuration
+          const toolbarConfig = ${JSON.stringify(QUILL_TOOLBARS)};
+          const toolbar = toolbarConfig[toolbarPreset] || toolbarConfig.full;
+
+          // Initialize Quill
+          const quill = new Quill('#' + editorDiv.id, {
+            theme: theme,
+            placeholder: placeholder,
+            modules: {
+              toolbar: toolbar
+            },
+            formats: [
+              'header', 'bold', 'italic', 'underline', 'strike',
+              'color', 'background', 'align',
+              'list', 'bullet', 'indent',
+              'blockquote', 'code-block',
+              'link', 'image', 'video'
+            ]
+          });
+
+          // Set editor height
+          const editorElement = editorDiv.querySelector('.ql-editor');
+          if (editorElement) {
+            editorElement.style.minHeight = height + 'px';
+          }
+
+          // Sync content to hidden input on change
+          quill.on('text-change', function() {
+            const html = quill.root.innerHTML;
+            if (hiddenInput) {
+              hiddenInput.value = html;
+            }
+          });
+
+          // Store quill instance for potential later access
+          editorDiv.quillInstance = quill;
+          console.log('[Quill] Successfully initialized editor', index);
+          } catch (error) {
+            console.error('[Quill] Error initializing editor', index, ':', error);
+          }
+        });
+        console.log('[Quill] Initialization complete');
+      };
+
+      // Initialize on DOM ready
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', window.initializeQuillEditors);
+      } else {
+        window.initializeQuillEditors();
+      }
+
+      // Re-initialize after HTMX swaps
+      if (typeof htmx !== 'undefined') {
+        document.body.addEventListener('htmx:afterSwap', window.initializeQuillEditors);
+      }
+    </script>
+  `;
+}
+function getQuillCDN(version = "2.0.2") {
+  return `
+    <!-- Quill Editor CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/quill@${version}/dist/quill.snow.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/quill@${version}/dist/quill.bubble.css" rel="stylesheet">
+
+    <!-- Quill Editor JS -->
+    <script src="https://cdn.jsdelivr.net/npm/quill@${version}/dist/quill.js"></script>
+
+    <!-- Quill Dark Mode Styles -->
+    <style>
+      /* Dark mode styles for Quill editor */
+      .dark .ql-toolbar {
+        background-color: #18181b !important;
+        border-color: #3f3f46 !important;
+      }
+
+      .dark .ql-toolbar button,
+      .dark .ql-toolbar .ql-picker-label {
+        color: #e4e4e7 !important;
+      }
+
+      .dark .ql-toolbar button:hover,
+      .dark .ql-toolbar .ql-picker-label:hover {
+        color: #fff !important;
+      }
+
+      .dark .ql-toolbar button.ql-active,
+      .dark .ql-toolbar .ql-picker-label.ql-active {
+        color: #3b82f6 !important;
+      }
+
+      .dark .ql-stroke {
+        stroke: #e4e4e7 !important;
+      }
+
+      .dark .ql-fill {
+        fill: #e4e4e7 !important;
+      }
+
+      .dark .ql-picker-options {
+        background-color: #18181b !important;
+        border-color: #3f3f46 !important;
+      }
+
+      .dark .ql-picker-item:hover {
+        background-color: #27272a !important;
+      }
+
+      .dark .ql-container {
+        background-color: #09090b !important;
+        border-color: #3f3f46 !important;
+        color: #e4e4e7 !important;
+      }
+
+      .dark .ql-editor {
+        color: #e4e4e7 !important;
+      }
+
+      .dark .ql-editor.ql-blank::before {
+        color: #71717a !important;
+      }
+
+      /* Improve contrast for dark mode */
+      .dark .ql-snow .ql-stroke {
+        stroke: #e4e4e7 !important;
+      }
+
+      .dark .ql-snow .ql-stroke.ql-fill {
+        fill: #e4e4e7 !important;
+      }
+
+      .dark .ql-snow .ql-fill {
+        fill: #e4e4e7 !important;
+      }
+
+      .dark .ql-snow .ql-picker-options {
+        background-color: #18181b !important;
+      }
+
+      .dark .ql-snow .ql-picker-item:hover {
+        color: #3b82f6 !important;
+      }
+    </style>
+  `;
+}
+function createQuillEditorPlugin() {
+  const builder3 = PluginBuilder.create({
+    name: "quill-editor",
+    version: "1.0.0",
+    description: "Quill rich text editor integration for SonicJS"
+  });
+  builder3.metadata({
+    author: {
+      name: "SonicJS Team",
+      email: "team@sonicjs.com"
+    },
+    license: "MIT",
+    compatibility: "^2.0.0",
+    tags: ["editor", "rich-text", "wysiwyg", "quill"]
+  });
+  builder3.lifecycle({
+    activate: async () => {
+      console.info("\u2705 Quill Editor plugin activated");
+    },
+    deactivate: async () => {
+      console.info("\u274C Quill Editor plugin deactivated");
+    }
+  });
+  return builder3.build();
+}
+createQuillEditorPlugin();
+
+// src/plugins/available/mdxeditor-plugin/index.ts
+var builder2 = PluginBuilder.create({
+  name: "mdxeditor-plugin",
+  version: "1.0.0",
+  description: "Lightweight markdown editor with live preview"
+});
+builder2.metadata({
+  author: {
+    name: "SonicJS Team",
+    email: "team@sonicjs.com"
+  },
+  license: "MIT",
+  compatibility: "^2.0.0"
+});
+builder2.lifecycle({
+  activate: async () => {
+    console.info("\u2705 EasyMDE editor plugin activated");
+  },
+  deactivate: async () => {
+    console.info("\u274C EasyMDE editor plugin deactivated");
+  }
+});
+builder2.build();
+function getMDXEditorScripts() {
+  return `
+    <!-- EasyMDE Markdown Editor -->
+    <link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
+    <script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
+    <style>
+      /* Dark mode styling for EasyMDE */
+      .EasyMDEContainer {
+        background-color: #1e293b;
+      }
+
+      .EasyMDEContainer .CodeMirror {
+        background-color: #1e293b;
+        color: #e2e8f0;
+        border-color: #334155;
+      }
+
+      .EasyMDEContainer .CodeMirror-scroll {
+        background-color: #1e293b;
+      }
+
+      .EasyMDEContainer .CodeMirror-cursor {
+        border-left-color: #e2e8f0;
+      }
+
+      .EasyMDEContainer .CodeMirror-gutters {
+        background-color: #0f172a;
+        border-right-color: #334155;
+      }
+
+      .EasyMDEContainer .CodeMirror-linenumber {
+        color: #64748b;
+      }
+
+      .editor-toolbar {
+        background-color: #0f172a;
+        border-color: #334155;
+      }
+
+      .editor-toolbar button {
+        color: #94a3b8 !important;
+      }
+
+      .editor-toolbar button:hover,
+      .editor-toolbar button.active {
+        background-color: #334155;
+        border-color: #475569;
+        color: #e2e8f0 !important;
+      }
+
+      .editor-toolbar i.separator {
+        border-left-color: #334155;
+        border-right-color: #334155;
+      }
+
+      .editor-statusbar {
+        background-color: #0f172a;
+        color: #64748b;
+        border-top-color: #334155;
+      }
+
+      .editor-preview,
+      .editor-preview-side {
+        background-color: #1e293b;
+        color: #e2e8f0;
+      }
+
+      .CodeMirror-selected {
+        background-color: #334155 !important;
+      }
+
+      .CodeMirror-focused .CodeMirror-selected {
+        background-color: #475569 !important;
+      }
+
+      /* Syntax highlighting for dark mode */
+      .cm-header {
+        color: #60a5fa;
+      }
+
+      .cm-strong {
+        color: #fbbf24;
+      }
+
+      .cm-em {
+        color: #a78bfa;
+      }
+
+      .cm-link {
+        color: #34d399;
+      }
+
+      .cm-url {
+        color: #34d399;
+      }
+
+      .cm-quote {
+        color: #94a3b8;
+        font-style: italic;
+      }
+
+      .cm-comment {
+        color: #64748b;
+      }
+    </style>
+  `;
+}
+function getMDXEditorInitScript(config) {
+  const defaultHeight = config?.defaultHeight || 400;
+  const toolbar = config?.toolbar || "full";
+  const placeholder = config?.placeholder || "Start writing your content...";
+  return `
+    // Initialize EasyMDE (Markdown Editor) for all richtext fields
+    function initializeMDXEditor() {
+      if (typeof EasyMDE === 'undefined') {
+        console.warn('EasyMDE not loaded yet, retrying...');
+        setTimeout(initializeMDXEditor, 100);
+        return;
+      }
+
+      // Find all textareas that need EasyMDE
+      document.querySelectorAll('.richtext-container textarea').forEach((textarea) => {
+        // Skip if already initialized
+        if (textarea.dataset.mdxeditorInitialized === 'true') {
+          return;
+        }
+
+        // Mark as initialized
+        textarea.dataset.mdxeditorInitialized = 'true';
+
+        // Get configuration from data attributes
+        const container = textarea.closest('.richtext-container');
+        const height = container?.dataset.height || ${defaultHeight};
+        const editorToolbar = container?.dataset.toolbar || '${toolbar}';
+
+        // Initialize EasyMDE
+        try {
+          const toolbarButtons = editorToolbar === 'minimal'
+            ? ['bold', 'italic', 'heading', '|', 'quote', 'unordered-list', 'ordered-list', '|', 'link', 'preview']
+            : ['bold', 'italic', 'heading', '|', 'quote', 'unordered-list', 'ordered-list', '|', 'link', 'image', 'table', '|', 'preview', 'side-by-side', 'fullscreen', '|', 'guide'];
+
+          const easyMDE = new EasyMDE({
+            element: textarea,
+            placeholder: '${placeholder}',
+            spellChecker: false,
+            minHeight: height + 'px',
+            toolbar: toolbarButtons,
+            status: ['lines', 'words', 'cursor'],
+            renderingConfig: {
+              singleLineBreaks: false,
+              codeSyntaxHighlighting: true
+            }
+          });
+
+          // Store reference to editor instance
+          textarea.easyMDEInstance = easyMDE;
+
+          console.log('EasyMDE initialized for field:', textarea.id || textarea.name);
+        } catch (error) {
+          console.error('Error initializing EasyMDE:', error);
+          // Show textarea as fallback
+          textarea.style.display = 'block';
+        }
+      });
+    }
+
+    // Initialize on DOMContentLoaded
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', initializeMDXEditor);
+    } else {
+      // DOM already loaded, initialize immediately
+      initializeMDXEditor();
+    }
+
+    // Also reinitialize after HTMX swaps (for dynamic content)
+    document.addEventListener('htmx:afterSwap', function(event) {
+      // Give the DOM a moment to settle
+      setTimeout(initializeMDXEditor, 100);
+    });
+  `;
+}
+
+// src/templates/pages/admin-content-form.template.ts
+function renderContentFormPage(data) {
+  const isEdit = data.isEdit || !!data.id;
+  const title = isEdit ? `Edit: ${data.title || "Content"}` : `New ${data.collection.display_name}`;
+  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_"));
+  const metaFields = data.fields.filter((f) => f.field_name.startsWith("meta_"));
+  const getFieldValue = (fieldName) => {
+    if (fieldName === "title") return data.title || data.data?.[fieldName] || "";
+    if (fieldName === "slug") return data.slug || data.data?.[fieldName] || "";
+    return data.data?.[fieldName] || "";
+  };
+  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] || []
+  }));
+  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] || []
+  }));
+  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] || []
+  }));
+  const pageContent = `
+    <div class="space-y-6">
       <!-- Header -->
       <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
         <div>
@@ -3650,8 +4526,13 @@ function renderContentFormPage(data) {
 
     ${getConfirmationDialogScript()}
 
-    <!-- TinyMCE CDN -->
-    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
+    ${data.tinymceEnabled ? getTinyMCEScript(data.tinymceSettings?.apiKey) : "<!-- TinyMCE plugin not active -->"}
+
+    ${data.quillEnabled ? getQuillCDN(data.quillSettings?.version) : "<!-- Quill plugin not active -->"}
+
+    ${data.quillEnabled ? getQuillInitScript() : "<!-- Quill init script not needed -->"}
+
+    ${data.mdxeditorEnabled ? getMDXEditorScripts() : "<!-- MDXEditor plugin not active -->"}
 
     <!-- Dynamic Field Scripts -->
     <script>
@@ -3926,6 +4807,19 @@ function renderContentFormPage(data) {
         form.addEventListener('input', scheduleAutoSave);
         form.addEventListener('change', scheduleAutoSave);
       });
+
+      ${data.tinymceEnabled ? `<script>${getTinyMCEInitScript({
+    skin: data.tinymceSettings?.skin,
+    defaultHeight: data.tinymceSettings?.defaultHeight,
+    defaultToolbar: data.tinymceSettings?.defaultToolbar
+  })}</script>` : ""}
+
+      ${data.mdxeditorEnabled ? `<script>${getMDXEditorInitScript({
+    theme: data.mdxeditorSettings?.theme,
+    defaultHeight: data.mdxeditorSettings?.defaultHeight,
+    toolbar: data.mdxeditorSettings?.toolbar,
+    placeholder: data.mdxeditorSettings?.placeholder
+  })}</script>` : ""}
     </script>
   `;
   const layoutData = {
@@ -3996,11 +4890,11 @@ function renderContentListPage(data) {
       label: "Title",
       sortable: true,
       sortType: "string",
-      render: (value2, row) => `
+      render: (value, row) => `
         <div class="flex items-center">
           <div>
             <div class="text-sm font-medium text-zinc-950 dark:text-white">
-              <a href="/content/${row.id}" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">${row.title}</a>
+              <a href="/admin/content/${row.id}/edit${currentParams ? `?ref=${encodeURIComponent(currentParams)}` : ""}" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">${row.title}</a>
             </div>
             <div class="text-sm text-zinc-500 dark:text-zinc-400">${row.slug}</div>
           </div>
@@ -4019,7 +4913,7 @@ function renderContentListPage(data) {
       label: "Status",
       sortable: true,
       sortType: "string",
-      render: (value2) => value2
+      render: (value) => value
     },
     {
       key: "authorName",
@@ -4040,7 +4934,7 @@ function renderContentListPage(data) {
       label: "Actions",
       sortable: false,
       className: "text-sm font-medium",
-      render: (value2, row) => `
+      render: (value, row) => `
         <div class="flex space-x-2">
           <button
             class="inline-flex items-center justify-center p-1.5 rounded-lg bg-cyan-50 dark:bg-cyan-500/10 text-cyan-700 dark:text-cyan-400 ring-1 ring-inset ring-cyan-600/20 dark:ring-cyan-500/20 hover:bg-cyan-100 dark:hover:bg-cyan-500/20 transition-colors"
@@ -4051,6 +4945,15 @@ function renderContentListPage(data) {
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/>
             </svg>
           </button>
+          <button
+            class="inline-flex items-center justify-center p-1.5 rounded-lg bg-purple-50 dark:bg-purple-500/10 text-purple-700 dark:text-purple-400 ring-1 ring-inset ring-purple-600/20 dark:ring-purple-500/20 hover:bg-purple-100 dark:hover:bg-purple-500/20 transition-colors"
+            onclick="window.open('/api/content/${row.id}', '_blank')"
+            title="View API"
+          >
+            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
+            </svg>
+          </button>
           <button
             class="inline-flex items-center justify-center p-1.5 rounded-lg bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-400 ring-1 ring-inset ring-red-600/20 dark:ring-red-500/20 hover:bg-red-100 dark:hover:bg-red-500/20 transition-colors"
             hx-delete="/admin/content/${row.id}"
@@ -4230,7 +5133,7 @@ function renderContentListPage(data) {
                         class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white/5 dark:bg-white/5 py-1.5 ${filter.name === "status" ? "pl-8" : "pl-3"} pr-8 text-base text-zinc-950 dark:text-white outline outline-1 -outline-offset-1 outline-cyan-500/30 dark:outline-cyan-400/30 *:bg-white dark:*:bg-zinc-800 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-cyan-500 dark:focus-visible:outline-cyan-400 sm:text-sm/6 min-w-48"
                       >
                         ${filter.options.map((opt) => `
-                          <option value="${opt.value}" ${opt.selected ? "selected" : ""}>${opt.label}</option>
+                          <option value="${opt.__value}" ${opt.selected ? "selected" : ""}>${opt.label}</option>
                         `).join("")}
                       </select>
                       <svg viewBox="0 0 16 16" fill="currentColor" data-slot="icon" aria-hidden="true" class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-cyan-600 dark:text-cyan-400 sm:size-4">
@@ -4750,7 +5653,15 @@ function escapeHtml3(text) {
 }
 
 // src/middleware/plugin-middleware.ts
-var isPluginActive2 = () => false;
+async function isPluginActive2(db, pluginId) {
+  try {
+    const result = await db.prepare("SELECT status FROM plugins WHERE id = ?").bind(pluginId).first();
+    return result?.status === "active";
+  } catch (error) {
+    console.error(`[isPluginActive] Error checking plugin status for ${pluginId}:`, error);
+    return false;
+  }
+}
 
 // src/routes/admin-content.ts
 var adminContentRoutes = new Hono();
@@ -4767,16 +5678,25 @@ async function getCollectionFields(db, collectionId) {
           const schema = typeof collectionRow.schema === "string" ? JSON.parse(collectionRow.schema) : collectionRow.schema;
           if (schema && schema.properties) {
             let fieldOrder = 0;
-            return 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: false
-            }));
+            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
+                }));
+              }
+              return {
+                id: `schema-${fieldName}`,
+                field_name: fieldName,
+                field_type: fieldConfig.type || "string",
+                field_label: fieldConfig.title || fieldName,
+                field_options: fieldOptions,
+                field_order: fieldOrder++,
+                is_required: fieldConfig.required === true || schema.required && schema.required.includes(fieldName),
+                is_searchable: false
+              };
+            });
           }
         } catch (e) {
           console.error("Error parsing collection schema:", e);
@@ -5024,11 +5944,44 @@ adminContentRoutes.get("/new", async (c) => {
     }
     const fields = await getCollectionFields(db, collectionId);
     const workflowEnabled = await isPluginActive2(db, "workflow");
+    const tinymceEnabled = await isPluginActive2(db, "tinymce-plugin");
+    let tinymceSettings;
+    if (tinymceEnabled) {
+      const pluginService = new PluginService(db);
+      const tinymcePlugin2 = await pluginService.getPlugin("tinymce-plugin");
+      tinymceSettings = tinymcePlugin2?.settings;
+    }
+    const quillEnabled = await isPluginActive2(db, "quill-editor");
+    let quillSettings;
+    if (quillEnabled) {
+      const pluginService = new PluginService(db);
+      const quillPlugin = await pluginService.getPlugin("quill-editor");
+      quillSettings = quillPlugin?.settings;
+    }
+    const mdxeditorEnabled = await isPluginActive2(db, "mdxeditor-plugin");
+    let mdxeditorSettings;
+    if (mdxeditorEnabled) {
+      const pluginService = new PluginService(db);
+      const mdxeditorPlugin2 = await pluginService.getPlugin("mdxeditor-plugin");
+      mdxeditorSettings = mdxeditorPlugin2?.settings;
+    }
+    console.log("[Content Form /new] Editor plugins status:", {
+      tinymce: tinymceEnabled,
+      quill: quillEnabled,
+      mdxeditor: mdxeditorEnabled,
+      mdxeditorSettings
+    });
     const formData = {
       collection,
       fields,
       isEdit: false,
       workflowEnabled,
+      tinymceEnabled,
+      tinymceSettings,
+      quillEnabled,
+      quillSettings,
+      mdxeditorEnabled,
+      mdxeditorSettings,
       user: user ? {
         name: user.email,
         email: user.email,
@@ -5096,6 +6049,27 @@ adminContentRoutes.get("/:id/edit", async (c) => {
     const fields = await getCollectionFields(db, content.collection_id);
     const contentData = content.data ? JSON.parse(content.data) : {};
     const workflowEnabled = await isPluginActive2(db, "workflow");
+    const tinymceEnabled = await isPluginActive2(db, "tinymce-plugin");
+    let tinymceSettings;
+    if (tinymceEnabled) {
+      const pluginService = new PluginService(db);
+      const tinymcePlugin2 = await pluginService.getPlugin("tinymce-plugin");
+      tinymceSettings = tinymcePlugin2?.settings;
+    }
+    const quillEnabled = await isPluginActive2(db, "quill-editor");
+    let quillSettings;
+    if (quillEnabled) {
+      const pluginService = new PluginService(db);
+      const quillPlugin = await pluginService.getPlugin("quill-editor");
+      quillSettings = quillPlugin?.settings;
+    }
+    const mdxeditorEnabled = await isPluginActive2(db, "mdxeditor-plugin");
+    let mdxeditorSettings;
+    if (mdxeditorEnabled) {
+      const pluginService = new PluginService(db);
+      const mdxeditorPlugin2 = await pluginService.getPlugin("mdxeditor-plugin");
+      mdxeditorSettings = mdxeditorPlugin2?.settings;
+    }
     const formData = {
       id: content.id,
       title: content.title,
@@ -5111,6 +6085,12 @@ adminContentRoutes.get("/:id/edit", async (c) => {
       fields,
       isEdit: true,
       workflowEnabled,
+      tinymceEnabled,
+      tinymceSettings,
+      quillEnabled,
+      quillSettings,
+      mdxeditorEnabled,
+      mdxeditorSettings,
       referrerParams,
       user: user ? {
         name: user.email,
@@ -5161,41 +6141,31 @@ adminContentRoutes.post("/", async (c) => {
     const data = {};
     const errors = {};
     for (const field of fields) {
-      const value2 = formData.get(field.field_name);
-      if (field.field_type === "guid") {
-        const options = field.field_options || {};
-        if (options.autoGenerate) {
-          data[field.field_name] = crypto.randomUUID();
-          continue;
-        }
-      }
-      if (field.is_required && (!value2 || value2.toString().trim() === "")) {
+      const value = formData.get(field.field_name);
+      if (field.is_required && (!value || value.toString().trim() === "")) {
         errors[field.field_name] = [`${field.field_label} is required`];
         continue;
       }
       switch (field.field_type) {
         case "number":
-          if (value2 && isNaN(Number(value2))) {
+          if (value && isNaN(Number(value))) {
             errors[field.field_name] = [`${field.field_label} must be a valid number`];
           } else {
-            data[field.field_name] = value2 ? Number(value2) : null;
+            data[field.field_name] = value ? Number(value) : null;
           }
           break;
         case "boolean":
-          data[field.field_name] = formData.get(`${field.field_name}_submitted`) ? value2 === "true" : false;
+          data[field.field_name] = formData.get(`${field.field_name}_submitted`) ? value === "true" : false;
           break;
         case "select":
           if (field.field_options?.multiple) {
             data[field.field_name] = formData.getAll(`${field.field_name}[]`);
           } else {
-            data[field.field_name] = value2;
+            data[field.field_name] = value;
           }
           break;
-        case "guid":
-          data[field.field_name] = value2 || null;
-          break;
         default:
-          data[field.field_name] = value2;
+          data[field.field_name] = value;
       }
     }
     if (Object.keys(errors).length > 0) {
@@ -5322,31 +6292,31 @@ adminContentRoutes.put("/:id", async (c) => {
     const data = {};
     const errors = {};
     for (const field of fields) {
-      const value2 = formData.get(field.field_name);
-      if (field.is_required && (!value2 || value2.toString().trim() === "")) {
+      const value = formData.get(field.field_name);
+      if (field.is_required && (!value || value.toString().trim() === "")) {
         errors[field.field_name] = [`${field.field_label} is required`];
         continue;
       }
       switch (field.field_type) {
         case "number":
-          if (value2 && isNaN(Number(value2))) {
+          if (value && isNaN(Number(value))) {
             errors[field.field_name] = [`${field.field_label} must be a valid number`];
           } else {
-            data[field.field_name] = value2 ? Number(value2) : null;
+            data[field.field_name] = value ? Number(value) : null;
           }
           break;
         case "boolean":
-          data[field.field_name] = formData.get(`${field.field_name}_submitted`) ? value2 === "true" : false;
+          data[field.field_name] = formData.get(`${field.field_name}_submitted`) ? value === "true" : false;
           break;
         case "select":
           if (field.field_options?.multiple) {
             data[field.field_name] = formData.getAll(`${field.field_name}[]`);
           } else {
-            data[field.field_name] = value2;
+            data[field.field_name] = value;
           }
           break;
         default:
-          data[field.field_name] = value2;
+          data[field.field_name] = value;
       }
     }
     if (Object.keys(errors).length > 0) {
@@ -5463,23 +6433,23 @@ adminContentRoutes.post("/preview", async (c) => {
     const fields = await getCollectionFields(db, collectionId);
     const data = {};
     for (const field of fields) {
-      const value2 = formData.get(field.field_name);
+      const value = formData.get(field.field_name);
       switch (field.field_type) {
         case "number":
-          data[field.field_name] = value2 ? Number(value2) : null;
+          data[field.field_name] = value ? Number(value) : null;
           break;
         case "boolean":
-          data[field.field_name] = value2 === "true";
+          data[field.field_name] = value === "true";
           break;
         case "select":
           if (field.field_options?.multiple) {
             data[field.field_name] = formData.getAll(`${field.field_name}[]`);
           } else {
-            data[field.field_name] = value2;
+            data[field.field_name] = value;
           }
           break;
         default:
-          data[field.field_name] = value2;
+          data[field.field_name] = value;
       }
     }
     const previewHTML = `
@@ -7335,10 +8305,10 @@ function renderUsersListPage(data) {
       label: "",
       className: "w-12",
       sortable: false,
-      render: (value2, row) => {
+      render: (value, row) => {
         const initials = `${row.firstName.charAt(0)}${row.lastName.charAt(0)}`.toUpperCase();
-        if (value2) {
-          return `<img src="${value2}" alt="${row.firstName} ${row.lastName}" class="w-8 h-8 rounded-full">`;
+        if (value) {
+          return `<img src="${value}" alt="${row.firstName} ${row.lastName}" class="w-8 h-8 rounded-full">`;
         }
         return `
           <div class="w-8 h-8 bg-gradient-to-br from-cyan-400 to-blue-500 dark:from-cyan-300 dark:to-blue-400 rounded-full flex items-center justify-center">
@@ -7353,7 +8323,7 @@ function renderUsersListPage(data) {
       sortable: true,
       sortType: "string",
       render: (_value, row) => {
-        const escapeHtml7 = (text) => text.replace(/[&<>"']/g, (char) => ({
+        const escapeHtml6 = (text) => text.replace(/[&<>"']/g, (char) => ({
           "&": "&amp;",
           "<": "&lt;",
           ">": "&gt;",
@@ -7362,9 +8332,9 @@ function renderUsersListPage(data) {
         })[char] || char);
         const truncatedFirstName = row.firstName.length > 25 ? row.firstName.substring(0, 25) + "..." : row.firstName;
         const truncatedLastName = row.lastName.length > 25 ? row.lastName.substring(0, 25) + "..." : row.lastName;
-        const fullName = escapeHtml7(`${truncatedFirstName} ${truncatedLastName}`);
+        const fullName = escapeHtml6(`${truncatedFirstName} ${truncatedLastName}`);
         const truncatedUsername = row.username.length > 100 ? row.username.substring(0, 100) + "..." : row.username;
-        const username = escapeHtml7(truncatedUsername);
+        const username = escapeHtml6(truncatedUsername);
         const statusBadge = row.isActive ? '<span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-lime-50 dark:bg-lime-500/10 text-lime-700 dark:text-lime-300 ring-1 ring-inset ring-lime-700/10 dark:ring-lime-400/20 ml-2">Active</span>' : '<span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-400 ring-1 ring-inset ring-red-700/10 dark:ring-red-500/20 ml-2">Inactive</span>';
         return `
           <div>
@@ -7379,15 +8349,15 @@ function renderUsersListPage(data) {
       label: "Email",
       sortable: true,
       sortType: "string",
-      render: (value2) => {
-        const escapeHtml7 = (text) => text.replace(/[&<>"']/g, (char) => ({
+      render: (value) => {
+        const escapeHtml6 = (text) => text.replace(/[&<>"']/g, (char) => ({
           "&": "&amp;",
           "<": "&lt;",
           ">": "&gt;",
           '"': "&quot;",
           "'": "&#39;"
         })[char] || char);
-        const escapedEmail = escapeHtml7(value2);
+        const escapedEmail = escapeHtml6(value);
         return `<a href="mailto:${escapedEmail}" class="text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 transition-colors">${escapedEmail}</a>`;
       }
     },
@@ -7396,7 +8366,7 @@ function renderUsersListPage(data) {
       label: "Role",
       sortable: true,
       sortType: "string",
-      render: (_value) => {
+      render: (value) => {
         const roleColors = {
           admin: "bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-400 ring-1 ring-inset ring-red-700/10 dark:ring-red-500/20",
           editor: "bg-blue-50 dark:bg-blue-500/10 text-blue-700 dark:text-blue-400 ring-1 ring-inset ring-blue-700/10 dark:ring-blue-500/20",
@@ -7412,7 +8382,7 @@ function renderUsersListPage(data) {
       label: "Last Login",
       sortable: true,
       sortType: "date",
-      render: (_value) => {
+      render: (value) => {
         if (!value) return '<span class="text-zinc-500 dark:text-zinc-400">Never</span>';
         return `<span class="text-sm text-zinc-500 dark:text-zinc-400">${new Date(value).toLocaleDateString()}</span>`;
       }
@@ -7422,7 +8392,7 @@ function renderUsersListPage(data) {
       label: "Created",
       sortable: true,
       sortType: "date",
-      render: (_value) => `<span class="text-sm text-zinc-500 dark:text-zinc-400">${new Date(value).toLocaleDateString()}</span>`
+      render: (value) => `<span class="text-sm text-zinc-500 dark:text-zinc-400">${new Date(value).toLocaleDateString()}</span>`
     },
     {
       key: "actions",
@@ -7920,7 +8890,7 @@ userRoutes.post("/profile/avatar", async (c) => {
   try {
     const formData = await c.req.formData();
     const avatarFile = formData.get("avatar");
-    if (!avatarFile || !(avatarFile instanceof File) || !avatarFile.name) {
+    if (!avatarFile || typeof avatarFile === "string" || !avatarFile.name) {
       return c.html(renderAlert2({
         type: "error",
         message: "Please select an image file.",
@@ -8503,6 +9473,46 @@ userRoutes.put("/users/:id", async (c) => {
     }));
   }
 });
+userRoutes.post("/users/:id/toggle", async (c) => {
+  const db = c.env.DB;
+  const user = c.get("user");
+  const userId = c.req.param("id");
+  try {
+    const body = await c.req.json().catch(() => ({ active: true }));
+    const active = body.active === true;
+    if (userId === user.userId && !active) {
+      return c.json({ error: "You cannot deactivate your own account" }, 400);
+    }
+    const userStmt = db.prepare(`
+      SELECT id, email FROM users WHERE id = ?
+    `);
+    const userToToggle = await userStmt.bind(userId).first();
+    if (!userToToggle) {
+      return c.json({ error: "User not found" }, 404);
+    }
+    const toggleStmt = db.prepare(`
+      UPDATE users SET is_active = ?, updated_at = ? WHERE id = ?
+    `);
+    await toggleStmt.bind(active ? 1 : 0, Date.now(), userId).run();
+    await logActivity(
+      db,
+      user.userId,
+      active ? "user.activate" : "user.deactivate",
+      "users",
+      userId,
+      { email: userToToggle.email },
+      c.req.header("x-forwarded-for") || c.req.header("cf-connecting-ip"),
+      c.req.header("user-agent")
+    );
+    return c.json({
+      success: true,
+      message: active ? "User activated successfully" : "User deactivated successfully"
+    });
+  } catch (error) {
+    console.error("User toggle error:", error);
+    return c.json({ error: "Failed to toggle user status" }, 500);
+  }
+});
 userRoutes.delete("/users/:id", async (c) => {
   const db = c.env.DB;
   const user = c.get("user");
@@ -11135,7 +12145,7 @@ function renderPluginsListPage(data) {
       <!-- Stats -->
       <div class="mb-6">
         <h3 class="text-base font-semibold text-zinc-950 dark:text-white">Plugin Statistics</h3>
-        <dl class="mt-5 grid grid-cols-1 divide-zinc-950/5 dark:divide-white/10 overflow-hidden rounded-lg bg-zinc-800/75 dark:bg-zinc-800/75 ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 md:grid-cols-4 md:divide-x md:divide-y-0">
+        <dl class="mt-5 grid grid-cols-1 divide-zinc-950/5 dark:divide-white/10 overflow-hidden rounded-lg bg-zinc-800/75 dark:bg-zinc-800/75 ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 md:grid-cols-5 md:divide-x md:divide-y-0">
           <div class="px-4 py-5 sm:p-6">
             <dt class="text-base font-normal text-zinc-700 dark:text-zinc-100">Total Plugins</dt>
             <dd class="mt-1 flex items-baseline justify-between md:block lg:flex">
@@ -11196,10 +12206,25 @@ function renderPluginsListPage(data) {
               </div>
             </dd>
           </div>
-        </dl>
-      </div>
-
-      <!-- Filters -->
+          <div class="px-4 py-5 sm:p-6">
+            <dt class="text-base font-normal text-zinc-700 dark:text-zinc-100">Available to Install</dt>
+            <dd class="mt-1 flex items-baseline justify-between md:block lg:flex">
+              <div class="flex items-baseline text-2xl font-semibold text-zinc-400">
+                ${data.stats?.uninstalled || 0}
+              </div>
+              <div class="inline-flex items-baseline rounded-full bg-zinc-400/10 text-zinc-600 dark:text-zinc-400 px-2.5 py-0.5 text-sm font-medium md:mt-2 lg:mt-0">
+                <svg viewBox="0 0 20 20" fill="currentColor" class="-ml-1 mr-0.5 size-5 shrink-0 self-center">
+                  <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
+                </svg>
+                <span class="sr-only">Available</span>
+                Ready
+              </div>
+            </dd>
+          </div>
+        </dl>
+      </div>
+
+      <!-- Filters -->
       <div class="relative rounded-xl overflow-hidden mb-6">
         <!-- Gradient Background -->
         <div class="absolute inset-0 bg-gradient-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10 dark:from-cyan-400/20 dark:via-blue-400/20 dark:to-purple-400/20"></div>
@@ -11211,13 +12236,16 @@ function renderPluginsListPage(data) {
                 <div>
                   <label class="block text-sm/6 font-medium text-zinc-950 dark:text-white">Category</label>
                   <div class="mt-2 grid grid-cols-1">
-                    <select class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white/5 dark:bg-white/5 py-1.5 pl-3 pr-8 text-base text-zinc-950 dark:text-white outline outline-1 -outline-offset-1 outline-cyan-500/30 dark:outline-cyan-400/30 *:bg-white dark:*:bg-zinc-800 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-cyan-500 dark:focus-visible:outline-cyan-400 sm:text-sm/6 min-w-48">
+                    <select id="category-filter" onchange="filterPlugins()" class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white/5 dark:bg-white/5 py-1.5 pl-3 pr-8 text-base text-zinc-950 dark:text-white outline outline-1 -outline-offset-1 outline-cyan-500/30 dark:outline-cyan-400/30 *:bg-white dark:*:bg-zinc-800 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-cyan-500 dark:focus-visible:outline-cyan-400 sm:text-sm/6 min-w-48">
                       <option value="">All Categories</option>
                       <option value="content">Content Management</option>
                       <option value="media">Media</option>
                       <option value="seo">SEO & Analytics</option>
                       <option value="security">Security</option>
                       <option value="utilities">Utilities</option>
+                      <option value="system">System</option>
+                      <option value="development">Development</option>
+                      <option value="demo">Demo</option>
                     </select>
                     <svg viewBox="0 0 16 16" fill="currentColor" data-slot="icon" aria-hidden="true" class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-cyan-600 dark:text-cyan-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" />
@@ -11227,10 +12255,11 @@ function renderPluginsListPage(data) {
                 <div>
                   <label class="block text-sm/6 font-medium text-zinc-950 dark:text-white">Status</label>
                   <div class="mt-2 grid grid-cols-1">
-                    <select class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white/5 dark:bg-white/5 py-1.5 pl-3 pr-8 text-base text-zinc-950 dark:text-white outline outline-1 -outline-offset-1 outline-cyan-500/30 dark:outline-cyan-400/30 *:bg-white dark:*:bg-zinc-800 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-cyan-500 dark:focus-visible:outline-cyan-400 sm:text-sm/6 min-w-48">
+                    <select id="status-filter" onchange="filterPlugins()" class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white/5 dark:bg-white/5 py-1.5 pl-3 pr-8 text-base text-zinc-950 dark:text-white outline outline-1 -outline-offset-1 outline-cyan-500/30 dark:outline-cyan-400/30 *:bg-white dark:*:bg-zinc-800 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-cyan-500 dark:focus-visible:outline-cyan-400 sm:text-sm/6 min-w-48">
                       <option value="">All Status</option>
                       <option value="active">Active</option>
                       <option value="inactive">Inactive</option>
+                      <option value="uninstalled">Available to Install</option>
                       <option value="error">Error</option>
                     </select>
                     <svg viewBox="0 0 16 16" fill="currentColor" data-slot="icon" aria-hidden="true" class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-cyan-600 dark:text-cyan-400 sm:size-4">
@@ -11247,8 +12276,10 @@ function renderPluginsListPage(data) {
                       </svg>
                     </div>
                     <input
+                      id="search-input"
                       type="text"
                       placeholder="Search plugins..."
+                      oninput="filterPlugins()"
                       class="w-full rounded-full bg-transparent px-11 py-2 text-sm text-zinc-950 dark:text-white placeholder-zinc-500 dark:placeholder-zinc-400 border-2 border-cyan-200/50 dark:border-cyan-700/50 focus:outline-none focus:border-cyan-500 dark:focus:border-cyan-400 focus:shadow-lg focus:shadow-cyan-500/20 dark:focus:shadow-cyan-400/20 transition-all duration-300"
                     />
                   </div>
@@ -11271,7 +12302,7 @@ function renderPluginsListPage(data) {
       </div>
 
     <!-- Plugins Grid -->
-    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
+    <div id="plugins-grid" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
       ${data.plugins.map((plugin) => renderPluginCard(plugin)).join("")}
     </div>
 
@@ -11398,7 +12429,12 @@ function renderPluginsListPage(data) {
       }
       
       function openPluginSettings(pluginId) {
-        window.location.href = \`/admin/plugins/\${pluginId}\`;
+        // Email plugin has a custom settings page
+        if (pluginId === 'email') {
+          window.location.href = '/admin/plugins/email/settings';
+        } else {
+          window.location.href = \`/admin/plugins/\${pluginId}\`;
+        }
       }
       
       function showPluginDetails(pluginId) {
@@ -11422,12 +12458,78 @@ function renderPluginsListPage(data) {
         const dropdown = document.getElementById('plugin-dropdown');
         dropdown.classList.toggle('hidden');
       }
-      
+
+      function filterPlugins() {
+        const categoryFilter = document.getElementById('category-filter').value.toLowerCase();
+        const statusFilter = document.getElementById('status-filter').value.toLowerCase();
+        const searchInput = document.getElementById('search-input').value.toLowerCase();
+
+        const pluginCards = document.querySelectorAll('.plugin-card');
+        let visibleCount = 0;
+
+        pluginCards.forEach(card => {
+          // Get plugin data from card attributes
+          const category = card.getAttribute('data-category')?.toLowerCase() || '';
+          const status = card.getAttribute('data-status')?.toLowerCase() || '';
+          const name = card.getAttribute('data-name')?.toLowerCase() || '';
+          const description = card.getAttribute('data-description')?.toLowerCase() || '';
+
+          // Check if plugin matches all filters
+          let matches = true;
+
+          // Category filter
+          if (categoryFilter && category !== categoryFilter) {
+            matches = false;
+          }
+
+          // Status filter
+          if (statusFilter && status !== statusFilter) {
+            matches = false;
+          }
+
+          // Search filter - check if search term is in name or description
+          if (searchInput && !name.includes(searchInput) && !description.includes(searchInput)) {
+            matches = false;
+          }
+
+          // Show/hide card
+          if (matches) {
+            card.style.display = '';
+            visibleCount++;
+          } else {
+            card.style.display = 'none';
+          }
+        });
+
+        // Show/hide "no results" message
+        let noResultsMsg = document.getElementById('no-results-message');
+        if (visibleCount === 0) {
+          if (!noResultsMsg) {
+            noResultsMsg = document.createElement('div');
+            noResultsMsg.id = 'no-results-message';
+            noResultsMsg.className = 'col-span-full text-center py-12';
+            noResultsMsg.innerHTML = \`
+              <div class="flex flex-col items-center">
+                <svg class="w-16 h-16 text-zinc-400 dark:text-zinc-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                <h3 class="text-lg font-semibold text-zinc-950 dark:text-white mb-2">No plugins found</h3>
+                <p class="text-sm text-zinc-500 dark:text-zinc-400">Try adjusting your filters or search terms</p>
+              </div>
+            \`;
+            document.getElementById('plugins-grid').appendChild(noResultsMsg);
+          }
+          noResultsMsg.style.display = '';
+        } else if (noResultsMsg) {
+          noResultsMsg.style.display = 'none';
+        }
+      }
+
       // Close dropdown when clicking outside
       document.addEventListener('click', (event) => {
         const dropdown = document.getElementById('plugin-dropdown');
         const button = event.target.closest('button[onclick="toggleDropdown()"]');
-        
+
         if (!button && !dropdown.contains(event.target)) {
           dropdown.classList.add('hidden');
         }
@@ -11462,23 +12564,33 @@ function renderPluginCard(plugin) {
   const statusColors = {
     active: "bg-lime-50 dark:bg-lime-500/10 text-lime-700 dark:text-lime-300 ring-lime-700/10 dark:ring-lime-400/20",
     inactive: "bg-zinc-50 dark:bg-zinc-500/10 text-zinc-700 dark:text-zinc-400 ring-zinc-700/10 dark:ring-zinc-400/20",
-    error: "bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-400 ring-red-700/10 dark:ring-red-400/20"
+    error: "bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-400 ring-red-700/10 dark:ring-red-400/20",
+    uninstalled: "bg-zinc-100 dark:bg-zinc-600/10 text-zinc-600 dark:text-zinc-500 ring-zinc-600/10 dark:ring-zinc-500/20"
   };
   const statusIcons = {
     active: '<div class="w-2 h-2 bg-lime-500 dark:bg-lime-400 rounded-full mr-2"></div>',
     inactive: '<div class="w-2 h-2 bg-zinc-500 dark:bg-zinc-400 rounded-full mr-2"></div>',
-    error: '<div class="w-2 h-2 bg-red-500 dark:bg-red-400 rounded-full mr-2"></div>'
+    error: '<div class="w-2 h-2 bg-red-500 dark:bg-red-400 rounded-full mr-2"></div>',
+    uninstalled: '<div class="w-2 h-2 bg-zinc-400 dark:bg-zinc-600 rounded-full mr-2"></div>'
   };
   const borderColors = {
     active: "ring-[3px] ring-lime-500 dark:ring-lime-400",
     inactive: "ring-[3px] ring-pink-500 dark:ring-pink-400",
-    error: "ring-[3px] ring-red-500 dark:ring-red-400"
+    error: "ring-[3px] ring-red-500 dark:ring-red-400",
+    uninstalled: "ring-[3px] ring-zinc-400 dark:ring-zinc-600"
   };
   const criticalCorePlugins = ["core-auth", "core-media"];
   const canToggle = !criticalCorePlugins.includes(plugin.id);
-  const actionButton = plugin.status === "active" ? `<button onclick="togglePlugin('${plugin.id}', 'deactivate')" class="bg-red-600 dark:bg-red-700 hover:bg-red-700 dark:hover:bg-red-600 text-white px-3 py-1.5 rounded-lg text-sm font-medium transition-colors">Deactivate</button>` : `<button onclick="togglePlugin('${plugin.id}', 'activate')" class="bg-lime-600 dark:bg-lime-700 hover:bg-lime-700 dark:hover:bg-lime-600 text-white px-3 py-1.5 rounded-lg text-sm font-medium transition-colors">Activate</button>`;
+  let actionButton = "";
+  if (plugin.status === "uninstalled") {
+    actionButton = `<button onclick="installPlugin('${plugin.name}')" class="bg-cyan-600 dark:bg-cyan-700 hover:bg-cyan-700 dark:hover:bg-cyan-600 text-white px-3 py-1.5 rounded-lg text-sm font-medium transition-colors">Install</button>`;
+  } else if (plugin.status === "active") {
+    actionButton = `<button onclick="togglePlugin('${plugin.id}', 'deactivate')" class="bg-red-600 dark:bg-red-700 hover:bg-red-700 dark:hover:bg-red-600 text-white px-3 py-1.5 rounded-lg text-sm font-medium transition-colors">Deactivate</button>`;
+  } else {
+    actionButton = `<button onclick="togglePlugin('${plugin.id}', 'activate')" class="bg-lime-600 dark:bg-lime-700 hover:bg-lime-700 dark:hover:bg-lime-600 text-white px-3 py-1.5 rounded-lg text-sm font-medium transition-colors">Activate</button>`;
+  }
   return `
-    <div class="plugin-card rounded-xl bg-white dark:bg-zinc-900 shadow-sm ${borderColors[plugin.status]} p-6 hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-all">
+    <div class="plugin-card rounded-xl bg-white dark:bg-zinc-900 shadow-sm ${borderColors[plugin.status]} p-6 hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-all" data-category="${plugin.category}" data-status="${plugin.status}" data-name="${plugin.displayName}" data-description="${plugin.description}">
       <div class="flex items-start justify-between mb-4">
         <div class="flex items-center gap-3">
           <div class="w-12 h-12 rounded-lg flex items-center justify-center ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 bg-zinc-50 dark:bg-zinc-800">
@@ -11539,20 +12651,24 @@ function renderPluginCard(plugin) {
 
       <div class="flex items-center justify-between">
         <div class="flex gap-2">
-          ${canToggle ? actionButton : ""}
+          ${plugin.status === "uninstalled" ? actionButton : canToggle ? actionButton : ""}
+          ${plugin.status !== "uninstalled" ? `
           <button onclick="openPluginSettings('${plugin.id}')" class="bg-white dark:bg-zinc-800 hover:bg-zinc-50 dark:hover:bg-zinc-700 text-zinc-950 dark:text-white ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors">
             Settings
           </button>
+          ` : ""}
         </div>
 
         <div class="flex items-center gap-2">
+          ${plugin.status !== "uninstalled" ? `
           <button onclick="showPluginDetails('${plugin.id}')" class="text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300 p-1.5 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors" title="Plugin Details">
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
             </svg>
           </button>
+          ` : ""}
 
-          ${!plugin.isCore ? `
+          ${!plugin.isCore && plugin.status !== "uninstalled" ? `
           <button onclick="uninstallPlugin('${plugin.id}')" class="text-zinc-500 dark:text-zinc-400 hover:text-red-600 dark:hover:text-red-400 p-1.5 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors" title="Uninstall Plugin">
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
@@ -11855,28 +12971,22 @@ function renderPluginSettingsPage(data) {
   const { plugin, activity = [], user } = data;
   const pageContent = `
     <div class="w-full px-4 sm:px-6 lg:px-8 py-6">
-      <!-- Header with breadcrumb -->
-      <div class="flex items-center mb-6">
-        <nav class="flex" aria-label="Breadcrumb">
-          <ol class="flex items-center space-x-2">
-            <li>
-              <a href="/admin/plugins" class="text-gray-400 hover:text-white transition-colors">
-                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
-                </svg>
-                Plugins
-              </a>
-            </li>
-            <li>
-              <svg class="w-5 h-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
-                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
-              </svg>
-            </li>
-            <li>
-              <span class="text-gray-300">${plugin.displayName}</span>
-            </li>
-          </ol>
-        </nav>
+      <!-- Header with Back Button -->
+      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
+        <div>
+          <h1 class="text-2xl/8 font-semibold text-zinc-950 dark:text-white sm:text-xl/8">Plugin Settings</h1>
+          <p class="mt-2 text-sm/6 text-zinc-500 dark:text-zinc-400">
+            ${plugin.description}
+          </p>
+        </div>
+        <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
+          <a href="/admin/plugins" class="inline-flex items-center justify-center rounded-lg bg-white dark:bg-zinc-800 px-3.5 py-2.5 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 shadow-sm">
+            <svg class="-ml-0.5 mr-1.5 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
+            </svg>
+            Back to Plugins
+          </a>
+        </div>
       </div>
 
       <!-- Plugin Header -->
@@ -11887,9 +12997,8 @@ function renderPluginSettingsPage(data) {
               ${plugin.icon || plugin.displayName.charAt(0).toUpperCase()}
             </div>
             <div>
-              <h1 class="text-2xl font-semibold text-white mb-1">${plugin.displayName}</h1>
-              <p class="text-gray-300 mb-2">${plugin.description}</p>
-              <div class="flex items-center gap-4 text-sm text-gray-400">
+              <h2 class="text-2xl font-semibold text-white mb-1">${plugin.displayName}</h2>
+              <div class="flex items-center gap-4 text-sm text-gray-400 mt-2">
                 <span>v${plugin.version}</span>
                 <span>by ${plugin.author}</span>
                 <span>${plugin.category}</span>
@@ -11898,7 +13007,7 @@ function renderPluginSettingsPage(data) {
               </div>
             </div>
           </div>
-          
+
           <div class="flex items-center gap-3">
             ${renderStatusBadge(plugin.status)}
             ${renderToggleButton(plugin)}
@@ -12185,10 +13294,10 @@ function renderSettingsTab(plugin) {
   `;
 }
 function renderSettingsFields(settings) {
-  return Object.entries(settings).map(([key, value2]) => {
+  return Object.entries(settings).map(([key, value]) => {
     const fieldId = `setting_${key}`;
     const displayName = key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase());
-    if (typeof value2 === "boolean") {
+    if (typeof value === "boolean") {
       return `
         <div class="flex items-center justify-between">
           <div>
@@ -12196,12 +13305,12 @@ function renderSettingsFields(settings) {
             <p class="text-xs text-gray-400">Enable or disable this feature</p>
           </div>
           <label class="relative inline-flex items-center cursor-pointer">
-            <input type="checkbox" name="${fieldId}" id="${fieldId}" ${value2 ? "checked" : ""} class="sr-only peer">
+            <input type="checkbox" name="${fieldId}" id="${fieldId}" ${value ? "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>
       `;
-    } else if (typeof value2 === "number") {
+    } else if (typeof value === "number") {
       return `
         <div>
           <label for="${fieldId}" class="block text-sm font-medium text-gray-300 mb-2">${displayName}</label>
@@ -12209,7 +13318,7 @@ function renderSettingsFields(settings) {
             type="number" 
             name="${fieldId}" 
             id="${fieldId}" 
-            value="${value2}"
+            value="${value}"
             class="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"
           >
         </div>
@@ -12222,7 +13331,7 @@ function renderSettingsFields(settings) {
             type="text" 
             name="${fieldId}" 
             id="${fieldId}" 
-            value="${value2}"
+            value="${value}"
             class="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"
           >
         </div>
@@ -12370,6 +13479,86 @@ function formatTimestamp(timestamp) {
 // src/routes/admin-plugins.ts
 var adminPluginRoutes = new Hono();
 adminPluginRoutes.use("*", requireAuth());
+var AVAILABLE_PLUGINS = [
+  {
+    id: "third-party-faq",
+    name: "faq-plugin",
+    display_name: "FAQ System",
+    description: "Frequently Asked Questions management system with categories, search, and custom styling",
+    version: "2.0.0",
+    author: "Community Developer",
+    category: "content",
+    icon: "\u2753",
+    permissions: ["manage:faqs"],
+    dependencies: [],
+    is_core: false
+  },
+  {
+    id: "demo-login-prefill",
+    name: "demo-login-plugin",
+    display_name: "Demo Login Prefill",
+    description: "Prefills login form with demo credentials (admin@sonicjs.com/sonicjs!) for easy site demonstration",
+    version: "1.0.0-beta.1",
+    author: "SonicJS",
+    category: "demo",
+    icon: "\u{1F3AF}",
+    permissions: [],
+    dependencies: [],
+    is_core: false
+  },
+  {
+    id: "database-tools",
+    name: "database-tools",
+    display_name: "Database Tools",
+    description: "Database management tools including truncate, backup, and validation",
+    version: "1.0.0-beta.1",
+    author: "SonicJS Team",
+    category: "system",
+    icon: "\u{1F5C4}\uFE0F",
+    permissions: ["manage:database", "admin"],
+    dependencies: [],
+    is_core: false
+  },
+  {
+    id: "seed-data",
+    name: "seed-data",
+    display_name: "Seed Data",
+    description: "Generate realistic example users and content for testing and development",
+    version: "1.0.0-beta.1",
+    author: "SonicJS Team",
+    category: "development",
+    icon: "\u{1F331}",
+    permissions: ["admin"],
+    dependencies: [],
+    is_core: false
+  },
+  {
+    id: "quill-editor",
+    name: "quill-editor",
+    display_name: "Quill Rich Text Editor",
+    description: "Quill WYSIWYG editor integration for rich text editing. Lightweight, modern editor with customizable toolbars and dark mode support.",
+    version: "1.0.0",
+    author: "SonicJS Team",
+    category: "editor",
+    icon: "\u270D\uFE0F",
+    permissions: [],
+    dependencies: [],
+    is_core: true
+  },
+  {
+    id: "tinymce-plugin",
+    name: "tinymce-plugin",
+    display_name: "TinyMCE Rich Text Editor",
+    description: "Powerful WYSIWYG rich text editor for content creation. Provides a full-featured editor with formatting, media embedding, and customizable toolbars for richtext fields.",
+    version: "1.0.0",
+    author: "SonicJS Team",
+    category: "editor",
+    icon: "\u{1F4DD}",
+    permissions: [],
+    dependencies: [],
+    is_core: false
+  }
+];
 adminPluginRoutes.get("/", async (c) => {
   try {
     const user = c.get("user");
@@ -12378,15 +13567,17 @@ adminPluginRoutes.get("/", async (c) => {
       return c.text("Access denied", 403);
     }
     const pluginService = new PluginService(db);
-    let plugins = [];
-    let stats = { total: 0, active: 0, inactive: 0, errors: 0 };
+    let installedPlugins = [];
+    let stats = { total: 0, active: 0, inactive: 0, errors: 0, uninstalled: 0 };
     try {
-      plugins = await pluginService.getAllPlugins();
+      installedPlugins = await pluginService.getAllPlugins();
       stats = await pluginService.getPluginStats();
     } catch (error) {
       console.error("Error loading plugins:", error);
     }
-    const templatePlugins = plugins.map((p) => ({
+    const installedPluginIds = new Set(installedPlugins.map((p) => p.id));
+    const uninstalledPlugins = AVAILABLE_PLUGINS.filter((p) => !installedPluginIds.has(p.id));
+    const templatePlugins = installedPlugins.map((p) => ({
       id: p.id,
       name: p.name,
       displayName: p.display_name,
@@ -12403,8 +13594,28 @@ adminPluginRoutes.get("/", async (c) => {
       permissions: p.permissions,
       isCore: p.is_core
     }));
+    const uninstalledTemplatePlugins = uninstalledPlugins.map((p) => ({
+      id: p.id,
+      name: p.name,
+      displayName: p.display_name,
+      description: p.description,
+      version: p.version,
+      author: p.author,
+      status: "uninstalled",
+      category: p.category,
+      icon: p.icon,
+      downloadCount: 0,
+      rating: 0,
+      lastUpdated: "Not installed",
+      dependencies: p.dependencies,
+      permissions: p.permissions,
+      isCore: p.is_core
+    }));
+    const allPlugins = [...templatePlugins, ...uninstalledTemplatePlugins];
+    stats.uninstalled = uninstalledPlugins.length;
+    stats.total = installedPlugins.length + uninstalledPlugins.length;
     const pageData = {
-      plugins: templatePlugins,
+      plugins: allPlugins,
       stats,
       user: {
         name: user?.email || "User",
@@ -12541,7 +13752,7 @@ adminPluginRoutes.post("/install", async (c) => {
         id: "demo-login-prefill",
         name: "demo-login-plugin",
         display_name: "Demo Login Prefill",
-        description: "Prefills login form with demo credentials (admin@sonicjs.com/admin123) for easy site demonstration",
+        description: "Prefills login form with demo credentials (admin@sonicjs.com/sonicjs!) for easy site demonstration",
         version: "1.0.0-beta.1",
         author: "SonicJS",
         category: "demo",
@@ -12551,7 +13762,7 @@ adminPluginRoutes.post("/install", async (c) => {
         settings: {
           enableNotice: true,
           demoEmail: "admin@sonicjs.com",
-          demoPassword: "admin123"
+          demoPassword: "sonicjs!"
         }
       });
       return c.json({ success: true, plugin: demoPlugin });
@@ -12650,6 +13861,50 @@ adminPluginRoutes.post("/install", async (c) => {
       });
       return c.json({ success: true, plugin: seedDataPlugin });
     }
+    if (body.name === "quill-editor") {
+      const quillPlugin = await pluginService.installPlugin({
+        id: "quill-editor",
+        name: "quill-editor",
+        display_name: "Quill Rich Text Editor",
+        description: "Quill WYSIWYG editor integration for rich text editing. Lightweight, modern editor with customizable toolbars and dark mode support.",
+        version: "1.0.0",
+        author: "SonicJS Team",
+        category: "editor",
+        icon: "\u270D\uFE0F",
+        permissions: [],
+        dependencies: [],
+        is_core: true,
+        settings: {
+          version: "2.0.2",
+          defaultHeight: 300,
+          defaultToolbar: "full",
+          theme: "snow"
+        }
+      });
+      return c.json({ success: true, plugin: quillPlugin });
+    }
+    if (body.name === "tinymce-plugin") {
+      const tinymcePlugin2 = await pluginService.installPlugin({
+        id: "tinymce-plugin",
+        name: "tinymce-plugin",
+        display_name: "TinyMCE Rich Text Editor",
+        description: "Powerful WYSIWYG rich text editor for content creation. Provides a full-featured editor with formatting, media embedding, and customizable toolbars for richtext fields.",
+        version: "1.0.0",
+        author: "SonicJS Team",
+        category: "editor",
+        icon: "\u{1F4DD}",
+        permissions: [],
+        dependencies: [],
+        is_core: false,
+        settings: {
+          apiKey: "no-api-key",
+          defaultHeight: 300,
+          defaultToolbar: "full",
+          skin: "oxide-dark"
+        }
+      });
+      return c.json({ success: true, plugin: tinymcePlugin2 });
+    }
     return c.json({ error: "Plugin not found in registry" }, 404);
   } catch (error) {
     console.error("Error installing plugin:", error);
@@ -13725,751 +14980,146 @@ adminLogsRoutes.get("/export", async (c) => {
     return c.json({ error: "Failed to export logs" }, 500);
   }
 });
-adminLogsRoutes.post("/cleanup", async (c) => {
-  try {
-    const user = c.get("user");
-    if (!user || user.role !== "admin") {
-      return c.json({
-        success: false,
-        error: "Unauthorized. Admin access required."
-      }, 403);
-    }
-    const logger = getLogger(c.env.DB);
-    await logger.cleanupByRetention();
-    return c.html(html`
-      <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded">
-        Log cleanup completed successfully!
-      </div>
-    `);
-  } catch (error) {
-    console.error("Error cleaning up logs:", error);
-    return c.html(html`
-      <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
-        Failed to clean up logs. Please try again.
-      </div>
-    `);
-  }
-});
-adminLogsRoutes.post("/search", async (c) => {
-  try {
-    const formData = await c.req.formData();
-    const search = formData.get("search");
-    const level = formData.get("level");
-    const category = formData.get("category");
-    const logger = getLogger(c.env.DB);
-    const filter = {
-      limit: 20,
-      offset: 0,
-      sortBy: "created_at",
-      sortOrder: "desc"
-    };
-    if (search) filter.search = search;
-    if (level) filter.level = [level];
-    if (category) filter.category = [category];
-    const { logs } = await logger.getLogs(filter);
-    const rows = logs.map((log) => {
-      const formattedLog = {
-        ...log,
-        formattedDate: new Date(log.createdAt).toLocaleString(),
-        levelClass: getLevelClass(log.level),
-        categoryClass: getCategoryClass(log.category)
-      };
-      return `
-        <tr class="hover:bg-gray-50">
-          <td class="px-6 py-4 whitespace-nowrap">
-            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${formattedLog.levelClass}">
-              ${formattedLog.level}
-            </span>
-          </td>
-          <td class="px-6 py-4 whitespace-nowrap">
-            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${formattedLog.categoryClass}">
-              ${formattedLog.category}
-            </span>
-          </td>
-          <td class="px-6 py-4">
-            <div class="text-sm text-gray-900 max-w-md truncate">${formattedLog.message}</div>
-          </td>
-          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${formattedLog.source || "-"}</td>
-          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${formattedLog.formattedDate}</td>
-          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-            <a href="/admin/logs/${formattedLog.id}" class="text-indigo-600 hover:text-indigo-900">View</a>
-          </td>
-        </tr>
-      `;
-    }).join("");
-    return c.html(rows);
-  } catch (error) {
-    console.error("Error searching logs:", error);
-    return c.html(html`<tr><td colspan="6" class="px-6 py-4 text-center text-red-500">Error searching logs</td></tr>`);
-  }
-});
-function getLevelClass(level) {
-  switch (level) {
-    case "debug":
-      return "bg-gray-100 text-gray-800";
-    case "info":
-      return "bg-blue-100 text-blue-800";
-    case "warn":
-      return "bg-yellow-100 text-yellow-800";
-    case "error":
-      return "bg-red-100 text-red-800";
-    case "fatal":
-      return "bg-purple-100 text-purple-800";
-    default:
-      return "bg-gray-100 text-gray-800";
-  }
-}
-function getCategoryClass(category) {
-  switch (category) {
-    case "auth":
-      return "bg-green-100 text-green-800";
-    case "api":
-      return "bg-blue-100 text-blue-800";
-    case "workflow":
-      return "bg-purple-100 text-purple-800";
-    case "plugin":
-      return "bg-indigo-100 text-indigo-800";
-    case "media":
-      return "bg-pink-100 text-pink-800";
-    case "system":
-      return "bg-gray-100 text-gray-800";
-    case "security":
-      return "bg-red-100 text-red-800";
-    case "error":
-      return "bg-red-100 text-red-800";
-    default:
-      return "bg-gray-100 text-gray-800";
-  }
-}
-var adminDesignRoutes = new Hono();
-adminDesignRoutes.get("/", (c) => {
-  const user = c.get("user");
-  const pageData = {
-    user: user ? {
-      name: user.email,
-      email: user.email,
-      role: user.role
-    } : void 0
-  };
-  return c.html(renderDesignPage(pageData));
-});
-var adminCheckboxRoutes = new Hono();
-adminCheckboxRoutes.get("/", (c) => {
-  const user = c.get("user");
-  const pageData = {
-    user: user ? {
-      name: user.email,
-      email: user.email,
-      role: user.role
-    } : void 0
-  };
-  return c.html(renderCheckboxPage(pageData));
-});
-
-// src/templates/pages/admin-faq-form.template.ts
-function renderFAQForm(data) {
-  const { faq, isEdit, errors, message, messageType } = data;
-  const pageTitle = isEdit ? "Edit FAQ" : "New FAQ";
-  const pageContent = `
-    <div class="w-full px-4 sm:px-6 lg:px-8 py-6 space-y-6">
-      <!-- Header -->
-      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
-        <div>
-          <h1 class="text-2xl font-semibold text-white">${pageTitle}</h1>
-          <p class="mt-2 text-sm text-gray-300">
-            ${isEdit ? "Update the FAQ details below" : "Create a new frequently asked question"}
-          </p>
-        </div>
-        <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
-          <a href="/admin/faq" 
-             class="inline-flex items-center justify-center rounded-xl backdrop-blur-sm bg-white/10 px-4 py-2 text-sm font-semibold text-white border border-white/20 hover:bg-white/20 transition-all">
-            <svg class="-ml-0.5 mr-1.5 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
-            </svg>
-            Back to List
-          </a>
-        </div>
-      </div>
-
-      ${message ? renderAlert({ type: messageType || "info", message, dismissible: true }) : ""}
-
-      <!-- Form -->
-      <div class="backdrop-blur-xl bg-white/10 rounded-xl border border-white/20 shadow-2xl">
-        <form ${isEdit ? `hx-put="/admin/faq/${faq?.id}"` : 'hx-post="/admin/faq"'} 
-              hx-target="body" 
-              hx-swap="outerHTML"
-              class="space-y-6 p-6">
-          
-          <!-- Question -->
-          <div>
-            <label for="question" class="block text-sm font-medium text-white">
-              Question <span class="text-red-400">*</span>
-            </label>
-            <div class="mt-1">
-              <textarea name="question" 
-                        id="question" 
-                        rows="3" 
-                        required
-                        maxlength="500"
-                        class="backdrop-blur-sm bg-white/10 border border-white/20 rounded-xl px-3 py-2 text-white placeholder-gray-300 focus:border-blue-400 focus:outline-none transition-colors w-full"
-                        placeholder="Enter the frequently asked question...">${faq?.question || ""}</textarea>
-              <p class="mt-1 text-sm text-gray-300">
-                <span id="question-count">0</span>/500 characters
-              </p>
-            </div>
-            ${errors?.question ? `
-              <div class="mt-1">
-                ${errors.question.map((error) => `
-                  <p class="text-sm text-red-400">${escapeHtml4(error)}</p>
-                `).join("")}
-              </div>
-            ` : ""}
-          </div>
-
-          <!-- Answer -->
-          <div>
-            <label for="answer" class="block text-sm font-medium text-white">
-              Answer <span class="text-red-400">*</span>
-            </label>
-            <div class="mt-1">
-              <textarea name="answer" 
-                        id="answer" 
-                        rows="6" 
-                        required
-                        maxlength="2000"
-                        class="backdrop-blur-sm bg-white/10 border border-white/20 rounded-xl px-3 py-2 text-white placeholder-gray-300 focus:border-blue-400 focus:outline-none transition-colors w-full"
-                        placeholder="Enter the detailed answer...">${faq?.answer || ""}</textarea>
-              <p class="mt-1 text-sm text-gray-300">
-                <span id="answer-count">0</span>/2000 characters. You can use basic HTML for formatting.
-              </p>
-            </div>
-            ${errors?.answer ? `
-              <div class="mt-1">
-                ${errors.answer.map((error) => `
-                  <p class="text-sm text-red-400">${escapeHtml4(error)}</p>
-                `).join("")}
-              </div>
-            ` : ""}
-          </div>
-
-          <!-- Category and Tags Row -->
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <!-- Category -->
-            <div>
-              <label for="category" class="block text-sm font-medium text-white">Category</label>
-              <div class="mt-1">
-                <select name="category" 
-                        id="category" 
-                        class="block w-full rounded-md border-0 bg-gray-700 py-1.5 text-gray-100 shadow-sm ring-1 ring-inset ring-gray-600 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6">
-                  <option value="">Select a category</option>
-                  <option value="general" ${faq?.category === "general" ? "selected" : ""}>General</option>
-                  <option value="technical" ${faq?.category === "technical" ? "selected" : ""}>Technical</option>
-                  <option value="billing" ${faq?.category === "billing" ? "selected" : ""}>Billing</option>
-                  <option value="support" ${faq?.category === "support" ? "selected" : ""}>Support</option>
-                  <option value="account" ${faq?.category === "account" ? "selected" : ""}>Account</option>
-                  <option value="features" ${faq?.category === "features" ? "selected" : ""}>Features</option>
-                </select>
-              </div>
-              ${errors?.category ? `
-                <div class="mt-1">
-                  ${errors.category.map((error) => `
-                    <p class="text-sm text-red-400">${escapeHtml4(error)}</p>
-                  `).join("")}
-                </div>
-              ` : ""}
-            </div>
-
-            <!-- Tags -->
-            <div>
-              <label for="tags" class="block text-sm font-medium text-white">Tags</label>
-              <div class="mt-1">
-                <input type="text" 
-                       name="tags" 
-                       id="tags" 
-                       value="${faq?.tags || ""}"
-                       class="block w-full rounded-md border-0 bg-gray-700 py-1.5 text-gray-100 shadow-sm ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
-                       placeholder="e.g., payment, setup, troubleshooting">
-                <p class="mt-1 text-sm text-gray-300">Separate multiple tags with commas</p>
-              </div>
-              ${errors?.tags ? `
-                <div class="mt-1">
-                  ${errors.tags.map((error) => `
-                    <p class="text-sm text-red-400">${escapeHtml4(error)}</p>
-                  `).join("")}
-                </div>
-              ` : ""}
-            </div>
-          </div>
-
-          <!-- Status and Sort Order Row -->
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <!-- Published Status -->
-            <div>
-              <label class="block text-sm font-medium text-white">Status</label>
-              <div class="mt-2 space-y-2">
-                <div class="flex items-center">
-                  <input id="published" 
-                         name="isPublished" 
-                         type="radio" 
-                         value="true"
-                         ${!faq || faq.isPublished ? "checked" : ""}
-                         class="h-4 w-4 text-blue-600 focus:ring-blue-600 border-gray-600 bg-gray-700">
-                  <label for="published" class="ml-2 block text-sm text-white">
-                    Published <span class="text-gray-300">(visible to users)</span>
-                  </label>
-                </div>
-                <div class="flex items-center">
-                  <input id="draft" 
-                         name="isPublished" 
-                         type="radio" 
-                         value="false"
-                         ${faq && !faq.isPublished ? "checked" : ""}
-                         class="h-4 w-4 text-blue-600 focus:ring-blue-600 border-gray-600 bg-gray-700">
-                  <label for="draft" class="ml-2 block text-sm text-white">
-                    Draft <span class="text-gray-300">(not visible to users)</span>
-                  </label>
-                </div>
-              </div>
-            </div>
-
-            <!-- Sort Order -->
-            <div>
-              <label for="sortOrder" class="block text-sm font-medium text-white">Sort Order</label>
-              <div class="mt-1">
-                <input type="number" 
-                       name="sortOrder" 
-                       id="sortOrder" 
-                       value="${faq?.sortOrder || 0}"
-                       min="0"
-                       step="1"
-                       class="block w-full rounded-md border-0 bg-gray-700 py-1.5 text-gray-100 shadow-sm ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6">
-                <p class="mt-1 text-sm text-gray-300">Lower numbers appear first (0 = highest priority)</p>
-              </div>
-              ${errors?.sortOrder ? `
-                <div class="mt-1">
-                  ${errors.sortOrder.map((error) => `
-                    <p class="text-sm text-red-400">${escapeHtml4(error)}</p>
-                  `).join("")}
-                </div>
-              ` : ""}
-            </div>
-          </div>
-
-          <!-- Form Actions -->
-          <div class="flex items-center justify-end space-x-3 pt-6 border-t border-white/20">
-            <a href="/admin/faq" 
-               class="inline-flex items-center justify-center rounded-xl backdrop-blur-sm bg-white/10 px-4 py-2 text-sm font-semibold text-white border border-white/20 hover:bg-white/20 transition-all">
-              Cancel
-            </a>
-            <button type="submit" 
-                    class="inline-flex items-center justify-center rounded-xl backdrop-blur-sm bg-blue-500/80 px-4 py-2 text-sm font-semibold text-white border border-white/20 hover:bg-blue-500 transition-all">
-              <svg class="-ml-0.5 mr-1.5 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-              </svg>
-              ${isEdit ? "Update FAQ" : "Create FAQ"}
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-
-    <script>
-      // Character count for question
-      const questionTextarea = document.getElementById('question');
-      const questionCount = document.getElementById('question-count');
-      
-      function updateQuestionCount() {
-        questionCount.textContent = questionTextarea.value.length;
-      }
-      
-      questionTextarea.addEventListener('input', updateQuestionCount);
-      updateQuestionCount(); // Initial count
-
-      // Character count for answer
-      const answerTextarea = document.getElementById('answer');
-      const answerCount = document.getElementById('answer-count');
-      
-      function updateAnswerCount() {
-        answerCount.textContent = answerTextarea.value.length;
-      }
-      
-      answerTextarea.addEventListener('input', updateAnswerCount);
-      updateAnswerCount(); // Initial count
-    </script>
-  `;
-  const layoutData = {
-    title: `${pageTitle} - Admin`,
-    pageTitle,
-    currentPath: isEdit ? `/admin/faq/${faq?.id}` : "/admin/faq/new",
-    user: data.user,
-    content: pageContent
-  };
-  return renderAdminLayout(layoutData);
-}
-function escapeHtml4(unsafe) {
-  return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
-}
-
-// src/routes/admin-faq.ts
-var faqSchema = z.object({
-  question: z.string().min(1, "Question is required").max(500, "Question must be under 500 characters"),
-  answer: z.string().min(1, "Answer is required").max(2e3, "Answer must be under 2000 characters"),
-  category: z.string().optional(),
-  tags: z.string().optional(),
-  isPublished: z.string().transform((val) => val === "true"),
-  sortOrder: z.string().transform((val) => parseInt(val, 10)).pipe(z.number().min(0))
-});
-var adminFAQRoutes = new Hono();
-adminFAQRoutes.get("/", async (c) => {
-  try {
-    const user = c.get("user");
-    const { category, published, search, page = "1" } = c.req.query();
-    const currentPage = parseInt(page, 10) || 1;
-    const limit = 20;
-    const offset = (currentPage - 1) * limit;
-    const db = c.env?.DB;
-    if (!db) {
-      return c.html(renderFAQList({
-        faqs: [],
-        totalCount: 0,
-        currentPage: 1,
-        totalPages: 1,
-        user: user ? {
-          name: user.email,
-          email: user.email,
-          role: user.role
-        } : void 0,
-        message: "Database not available",
-        messageType: "error"
-      }));
-    }
-    let whereClause = "WHERE 1=1";
-    const params = [];
-    if (category) {
-      whereClause += " AND category = ?";
-      params.push(category);
-    }
-    if (published !== void 0) {
-      whereClause += " AND isPublished = ?";
-      params.push(published === "true" ? 1 : 0);
-    }
-    if (search) {
-      whereClause += " AND (question LIKE ? OR answer LIKE ? OR tags LIKE ?)";
-      const searchTerm = `%${search}%`;
-      params.push(searchTerm, searchTerm, searchTerm);
-    }
-    const countQuery = `SELECT COUNT(*) as count FROM faqs ${whereClause}`;
-    const { results: countResults } = await db.prepare(countQuery).bind(...params).all();
-    const totalCount = countResults?.[0]?.count || 0;
-    const dataQuery = `
-      SELECT * FROM faqs 
-      ${whereClause} 
-      ORDER BY sortOrder ASC, created_at DESC 
-      LIMIT ? OFFSET ?
-    `;
-    const { results: faqs } = await db.prepare(dataQuery).bind(...params, limit, offset).all();
-    const totalPages = Math.ceil(totalCount / limit);
-    return c.html(renderFAQList({
-      faqs: faqs || [],
-      totalCount,
-      currentPage,
-      totalPages,
-      user: user ? {
-        name: user.email,
-        email: user.email,
-        role: user.role
-      } : void 0
-    }));
-  } catch (error) {
-    console.error("Error fetching FAQs:", error);
-    const user = c.get("user");
-    return c.html(renderFAQList({
-      faqs: [],
-      totalCount: 0,
-      currentPage: 1,
-      totalPages: 1,
-      user: user ? {
-        name: user.email,
-        email: user.email,
-        role: user.role
-      } : void 0,
-      message: "Failed to load FAQs",
-      messageType: "error"
-    }));
-  }
-});
-adminFAQRoutes.get("/new", async (c) => {
-  const user = c.get("user");
-  return c.html(renderFAQForm({
-    isEdit: false,
-    user: user ? {
-      name: user.email,
-      email: user.email,
-      role: user.role
-    } : void 0
-  }));
-});
-adminFAQRoutes.post("/", async (c) => {
-  try {
-    const formData = await c.req.formData();
-    const data = Object.fromEntries(formData.entries());
-    const validatedData = faqSchema.parse(data);
-    const user = c.get("user");
-    const db = c.env?.DB;
-    if (!db) {
-      return c.html(renderFAQForm({
-        isEdit: false,
-        user: user ? {
-          name: user.email,
-          email: user.email,
-          role: user.role
-        } : void 0,
-        message: "Database not available",
-        messageType: "error"
-      }));
-    }
-    const { results } = await db.prepare(`
-      INSERT INTO faqs (question, answer, category, tags, isPublished, sortOrder)
-      VALUES (?, ?, ?, ?, ?, ?)
-      RETURNING *
-    `).bind(
-      validatedData.question,
-      validatedData.answer,
-      validatedData.category || null,
-      validatedData.tags || null,
-      validatedData.isPublished ? 1 : 0,
-      validatedData.sortOrder
-    ).all();
-    if (results && results.length > 0) {
-      return c.redirect("/admin/faq?message=FAQ created successfully");
-    } else {
-      return c.html(renderFAQForm({
-        isEdit: false,
-        user: user ? {
-          name: user.email,
-          email: user.email,
-          role: user.role
-        } : void 0,
-        message: "Failed to create FAQ",
-        messageType: "error"
-      }));
-    }
-  } catch (error) {
-    console.error("Error creating FAQ:", error);
-    const user = c.get("user");
-    if (error instanceof z.ZodError) {
-      const errors = {};
-      error.errors.forEach((err) => {
-        const field = err.path[0];
-        if (!errors[field]) errors[field] = [];
-        errors[field].push(err.message);
-      });
-      return c.html(renderFAQForm({
-        isEdit: false,
-        user: user ? {
-          name: user.email,
-          email: user.email,
-          role: user.role
-        } : void 0,
-        errors,
-        message: "Please correct the errors below",
-        messageType: "error"
-      }));
-    }
-    return c.html(renderFAQForm({
-      isEdit: false,
-      user: user ? {
-        name: user.email,
-        email: user.email,
-        role: user.role
-      } : void 0,
-      message: "Failed to create FAQ",
-      messageType: "error"
-    }));
-  }
-});
-adminFAQRoutes.get("/:id", async (c) => {
-  try {
-    const id = parseInt(c.req.param("id"));
-    const user = c.get("user");
-    const db = c.env?.DB;
-    if (!db) {
-      return c.html(renderFAQForm({
-        isEdit: true,
-        user: user ? {
-          name: user.email,
-          email: user.email,
-          role: user.role
-        } : void 0,
-        message: "Database not available",
-        messageType: "error"
-      }));
-    }
-    const { results } = await db.prepare("SELECT * FROM faqs WHERE id = ?").bind(id).all();
-    if (!results || results.length === 0) {
-      return c.redirect("/admin/faq?message=FAQ not found&type=error");
-    }
-    const faq = results[0];
-    return c.html(renderFAQForm({
-      faq: {
-        id: faq.id,
-        question: faq.question,
-        answer: faq.answer,
-        category: faq.category,
-        tags: faq.tags,
-        isPublished: Boolean(faq.isPublished),
-        sortOrder: faq.sortOrder
-      },
-      isEdit: true,
-      user: user ? {
-        name: user.email,
-        email: user.email,
-        role: user.role
-      } : void 0
-    }));
-  } catch (error) {
-    console.error("Error fetching FAQ:", error);
-    const user = c.get("user");
-    return c.html(renderFAQForm({
-      isEdit: true,
-      user: user ? {
-        name: user.email,
-        email: user.email,
-        role: user.role
-      } : void 0,
-      message: "Failed to load FAQ",
-      messageType: "error"
-    }));
-  }
-});
-adminFAQRoutes.put("/:id", async (c) => {
-  try {
-    const id = parseInt(c.req.param("id"));
-    const formData = await c.req.formData();
-    const data = Object.fromEntries(formData.entries());
-    const validatedData = faqSchema.parse(data);
-    const user = c.get("user");
-    const db = c.env?.DB;
-    if (!db) {
-      return c.html(renderFAQForm({
-        isEdit: true,
-        user: user ? {
-          name: user.email,
-          email: user.email,
-          role: user.role
-        } : void 0,
-        message: "Database not available",
-        messageType: "error"
-      }));
-    }
-    const { results } = await db.prepare(`
-      UPDATE faqs 
-      SET question = ?, answer = ?, category = ?, tags = ?, isPublished = ?, sortOrder = ?
-      WHERE id = ?
-      RETURNING *
-    `).bind(
-      validatedData.question,
-      validatedData.answer,
-      validatedData.category || null,
-      validatedData.tags || null,
-      validatedData.isPublished ? 1 : 0,
-      validatedData.sortOrder,
-      id
-    ).all();
-    if (results && results.length > 0) {
-      return c.redirect("/admin/faq?message=FAQ updated successfully");
-    } else {
-      return c.html(renderFAQForm({
-        faq: {
-          id,
-          question: validatedData.question,
-          answer: validatedData.answer,
-          category: validatedData.category,
-          tags: validatedData.tags,
-          isPublished: validatedData.isPublished,
-          sortOrder: validatedData.sortOrder
-        },
-        isEdit: true,
-        user: user ? {
-          name: user.email,
-          email: user.email,
-          role: user.role
-        } : void 0,
-        message: "FAQ not found",
-        messageType: "error"
-      }));
-    }
-  } catch (error) {
-    console.error("Error updating FAQ:", error);
-    const user = c.get("user");
-    const id = parseInt(c.req.param("id"));
-    if (error instanceof z.ZodError) {
-      const errors = {};
-      error.errors.forEach((err) => {
-        const field = err.path[0];
-        if (!errors[field]) errors[field] = [];
-        errors[field].push(err.message);
-      });
-      return c.html(renderFAQForm({
-        faq: {
-          id,
-          question: "",
-          answer: "",
-          category: "",
-          tags: "",
-          isPublished: true,
-          sortOrder: 0
-        },
-        isEdit: true,
-        user: user ? {
-          name: user.email,
-          email: user.email,
-          role: user.role
-        } : void 0,
-        errors,
-        message: "Please correct the errors below",
-        messageType: "error"
-      }));
-    }
-    return c.html(renderFAQForm({
-      faq: {
-        id,
-        question: "",
-        answer: "",
-        category: "",
-        tags: "",
-        isPublished: true,
-        sortOrder: 0
-      },
-      isEdit: true,
-      user: user ? {
-        name: user.email,
-        email: user.email,
-        role: user.role
-      } : void 0,
-      message: "Failed to update FAQ",
-      messageType: "error"
-    }));
-  }
-});
-adminFAQRoutes.delete("/:id", async (c) => {
+adminLogsRoutes.post("/cleanup", async (c) => {
   try {
-    const id = parseInt(c.req.param("id"));
-    const db = c.env?.DB;
-    if (!db) {
-      return c.json({ error: "Database not available" }, 500);
-    }
-    const { changes } = await db.prepare("DELETE FROM faqs WHERE id = ?").bind(id).run();
-    if (changes === 0) {
-      return c.json({ error: "FAQ not found" }, 404);
+    const user = c.get("user");
+    if (!user || user.role !== "admin") {
+      return c.json({
+        success: false,
+        error: "Unauthorized. Admin access required."
+      }, 403);
     }
-    return c.redirect("/admin/faq?message=FAQ deleted successfully");
+    const logger = getLogger(c.env.DB);
+    await logger.cleanupByRetention();
+    return c.html(html`
+      <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded">
+        Log cleanup completed successfully!
+      </div>
+    `);
+  } catch (error) {
+    console.error("Error cleaning up logs:", error);
+    return c.html(html`
+      <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+        Failed to clean up logs. Please try again.
+      </div>
+    `);
+  }
+});
+adminLogsRoutes.post("/search", async (c) => {
+  try {
+    const formData = await c.req.formData();
+    const search = formData.get("search");
+    const level = formData.get("level");
+    const category = formData.get("category");
+    const logger = getLogger(c.env.DB);
+    const filter = {
+      limit: 20,
+      offset: 0,
+      sortBy: "created_at",
+      sortOrder: "desc"
+    };
+    if (search) filter.search = search;
+    if (level) filter.level = [level];
+    if (category) filter.category = [category];
+    const { logs } = await logger.getLogs(filter);
+    const rows = logs.map((log) => {
+      const formattedLog = {
+        ...log,
+        formattedDate: new Date(log.createdAt).toLocaleString(),
+        levelClass: getLevelClass(log.level),
+        categoryClass: getCategoryClass(log.category)
+      };
+      return `
+        <tr class="hover:bg-gray-50">
+          <td class="px-6 py-4 whitespace-nowrap">
+            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${formattedLog.levelClass}">
+              ${formattedLog.level}
+            </span>
+          </td>
+          <td class="px-6 py-4 whitespace-nowrap">
+            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${formattedLog.categoryClass}">
+              ${formattedLog.category}
+            </span>
+          </td>
+          <td class="px-6 py-4">
+            <div class="text-sm text-gray-900 max-w-md truncate">${formattedLog.message}</div>
+          </td>
+          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${formattedLog.source || "-"}</td>
+          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${formattedLog.formattedDate}</td>
+          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+            <a href="/admin/logs/${formattedLog.id}" class="text-indigo-600 hover:text-indigo-900">View</a>
+          </td>
+        </tr>
+      `;
+    }).join("");
+    return c.html(rows);
   } catch (error) {
-    console.error("Error deleting FAQ:", error);
-    return c.json({ error: "Failed to delete FAQ" }, 500);
+    console.error("Error searching logs:", error);
+    return c.html(html`<tr><td colspan="6" class="px-6 py-4 text-center text-red-500">Error searching logs</td></tr>`);
+  }
+});
+function getLevelClass(level) {
+  switch (level) {
+    case "debug":
+      return "bg-gray-100 text-gray-800";
+    case "info":
+      return "bg-blue-100 text-blue-800";
+    case "warn":
+      return "bg-yellow-100 text-yellow-800";
+    case "error":
+      return "bg-red-100 text-red-800";
+    case "fatal":
+      return "bg-purple-100 text-purple-800";
+    default:
+      return "bg-gray-100 text-gray-800";
+  }
+}
+function getCategoryClass(category) {
+  switch (category) {
+    case "auth":
+      return "bg-green-100 text-green-800";
+    case "api":
+      return "bg-blue-100 text-blue-800";
+    case "workflow":
+      return "bg-purple-100 text-purple-800";
+    case "plugin":
+      return "bg-indigo-100 text-indigo-800";
+    case "media":
+      return "bg-pink-100 text-pink-800";
+    case "system":
+      return "bg-gray-100 text-gray-800";
+    case "security":
+      return "bg-red-100 text-red-800";
+    case "error":
+      return "bg-red-100 text-red-800";
+    default:
+      return "bg-gray-100 text-gray-800";
   }
+}
+var adminDesignRoutes = new Hono();
+adminDesignRoutes.get("/", (c) => {
+  const user = c.get("user");
+  const pageData = {
+    user: user ? {
+      name: user.email,
+      email: user.email,
+      role: user.role
+    } : void 0
+  };
+  return c.html(renderDesignPage(pageData));
+});
+var adminCheckboxRoutes = new Hono();
+adminCheckboxRoutes.get("/", (c) => {
+  const user = c.get("user");
+  const pageData = {
+    user: user ? {
+      name: user.email,
+      email: user.email,
+      role: user.role
+    } : void 0
+  };
+  return c.html(renderCheckboxPage(pageData));
 });
-var admin_faq_default = adminFAQRoutes;
 
 // src/templates/pages/admin-testimonials-form.template.ts
 function renderTestimonialsForm(data) {
@@ -14527,7 +15177,7 @@ function renderTestimonialsForm(data) {
               ${errors?.authorName ? `
                 <div class="mt-1">
                   ${errors.authorName.map((error) => `
-                    <p class="text-sm text-red-400">${escapeHtml5(error)}</p>
+                    <p class="text-sm text-red-400">${escapeHtml4(error)}</p>
                   `).join("")}
                 </div>
               ` : ""}
@@ -14549,7 +15199,7 @@ function renderTestimonialsForm(data) {
                 ${errors?.authorTitle ? `
                   <div class="mt-1">
                     ${errors.authorTitle.map((error) => `
-                      <p class="text-sm text-red-400">${escapeHtml5(error)}</p>
+                      <p class="text-sm text-red-400">${escapeHtml4(error)}</p>
                     `).join("")}
                   </div>
                 ` : ""}
@@ -14570,7 +15220,7 @@ function renderTestimonialsForm(data) {
                 ${errors?.authorCompany ? `
                   <div class="mt-1">
                     ${errors.authorCompany.map((error) => `
-                      <p class="text-sm text-red-400">${escapeHtml5(error)}</p>
+                      <p class="text-sm text-red-400">${escapeHtml4(error)}</p>
                     `).join("")}
                   </div>
                 ` : ""}
@@ -14602,7 +15252,7 @@ function renderTestimonialsForm(data) {
               ${errors?.testimonialText ? `
                 <div class="mt-1">
                   ${errors.testimonialText.map((error) => `
-                    <p class="text-sm text-red-400">${escapeHtml5(error)}</p>
+                    <p class="text-sm text-red-400">${escapeHtml4(error)}</p>
                   `).join("")}
                 </div>
               ` : ""}
@@ -14626,7 +15276,7 @@ function renderTestimonialsForm(data) {
               ${errors?.rating ? `
                 <div class="mt-1">
                   ${errors.rating.map((error) => `
-                    <p class="text-sm text-red-400">${escapeHtml5(error)}</p>
+                    <p class="text-sm text-red-400">${escapeHtml4(error)}</p>
                   `).join("")}
                 </div>
               ` : ""}
@@ -14680,7 +15330,7 @@ function renderTestimonialsForm(data) {
               ${errors?.sortOrder ? `
                 <div class="mt-1">
                   ${errors.sortOrder.map((error) => `
-                    <p class="text-sm text-red-400">${escapeHtml5(error)}</p>
+                    <p class="text-sm text-red-400">${escapeHtml4(error)}</p>
                   `).join("")}
                 </div>
               ` : ""}
@@ -14727,7 +15377,7 @@ function renderTestimonialsForm(data) {
   };
   return renderAdminLayout(layoutData);
 }
-function escapeHtml5(unsafe) {
+function escapeHtml4(unsafe) {
   return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
 }
 
@@ -15155,7 +15805,7 @@ function renderCodeExamplesForm(data) {
               ${errors?.title ? `
                 <div class="mt-1">
                   ${errors.title.map((error) => `
-                    <p class="text-sm text-red-400">${escapeHtml6(error)}</p>
+                    <p class="text-sm text-red-400">${escapeHtml5(error)}</p>
                   `).join("")}
                 </div>
               ` : ""}
@@ -15178,7 +15828,7 @@ function renderCodeExamplesForm(data) {
               ${errors?.description ? `
                 <div class="mt-1">
                   ${errors.description.map((error) => `
-                    <p class="text-sm text-red-400">${escapeHtml6(error)}</p>
+                    <p class="text-sm text-red-400">${escapeHtml5(error)}</p>
                   `).join("")}
                 </div>
               ` : ""}
@@ -15210,7 +15860,7 @@ function renderCodeExamplesForm(data) {
                 ${errors?.language ? `
                   <div class="mt-1">
                     ${errors.language.map((error) => `
-                      <p class="text-sm text-red-400">${escapeHtml6(error)}</p>
+                      <p class="text-sm text-red-400">${escapeHtml5(error)}</p>
                     `).join("")}
                   </div>
                 ` : ""}
@@ -15231,7 +15881,7 @@ function renderCodeExamplesForm(data) {
                 ${errors?.category ? `
                   <div class="mt-1">
                     ${errors.category.map((error) => `
-                      <p class="text-sm text-red-400">${escapeHtml6(error)}</p>
+                      <p class="text-sm text-red-400">${escapeHtml5(error)}</p>
                     `).join("")}
                   </div>
                 ` : ""}
@@ -15253,7 +15903,7 @@ function renderCodeExamplesForm(data) {
                 ${errors?.tags ? `
                   <div class="mt-1">
                     ${errors.tags.map((error) => `
-                      <p class="text-sm text-red-400">${escapeHtml6(error)}</p>
+                      <p class="text-sm text-red-400">${escapeHtml5(error)}</p>
                     `).join("")}
                   </div>
                 ` : ""}
@@ -15284,7 +15934,7 @@ function renderCodeExamplesForm(data) {
               ${errors?.code ? `
                 <div class="mt-1">
                   ${errors.code.map((error) => `
-                    <p class="text-sm text-red-400">${escapeHtml6(error)}</p>
+                    <p class="text-sm text-red-400">${escapeHtml5(error)}</p>
                   `).join("")}
                 </div>
               ` : ""}
@@ -15338,7 +15988,7 @@ function renderCodeExamplesForm(data) {
               ${errors?.sortOrder ? `
                 <div class="mt-1">
                   ${errors.sortOrder.map((error) => `
-                    <p class="text-sm text-red-400">${escapeHtml6(error)}</p>
+                    <p class="text-sm text-red-400">${escapeHtml5(error)}</p>
                   `).join("")}
                 </div>
               ` : ""}
@@ -15396,7 +16046,7 @@ function renderCodeExamplesForm(data) {
   };
   return renderAdminLayout(layoutData);
 }
-function escapeHtml6(unsafe) {
+function escapeHtml5(unsafe) {
   return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
 }
 
@@ -16730,8 +17380,8 @@ function renderTable2(data) {
                     </td>
                   ` : ""}
                   ${data.columns.map((column, colIndex) => {
-      const value2 = row[column.key];
-      const displayValue = column.render ? column.render(value2, row) : value2;
+      const value = row[column.key];
+      const displayValue = column.render ? column.render(value, row) : value;
       const stopPropagation = column.key === "actions" ? 'onclick="event.stopPropagation()"' : "";
       const isFirst = colIndex === 0 && !data.selectable;
       const isLast = colIndex === data.columns.length - 1;
@@ -17118,10 +17768,41 @@ function renderCollectionsListPage(data) {
 
 // src/templates/pages/admin-collections-form.template.ts
 init_admin_layout_catalyst_template();
+function getFieldTypeBadge(fieldType) {
+  const typeLabels = {
+    "text": "Text",
+    "richtext": "Rich Text (TinyMCE)",
+    "quill": "Rich Text (Quill)",
+    "mdxeditor": "Rich Text (MDXEditor)",
+    "number": "Number",
+    "boolean": "Boolean",
+    "date": "Date",
+    "select": "Select",
+    "media": "Media"
+  };
+  const typeColors = {
+    "text": "bg-blue-500/10 dark:bg-blue-400/10 text-blue-700 dark:text-blue-300 ring-blue-500/20 dark:ring-blue-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",
+    "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",
+    "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",
+    "select": "bg-indigo-500/10 dark:bg-indigo-400/10 text-indigo-700 dark:text-indigo-300 ring-indigo-500/20 dark:ring-indigo-400/20",
+    "media": "bg-rose-500/10 dark:bg-rose-400/10 text-rose-700 dark:text-rose-300 ring-rose-500/20 dark:ring-rose-400/20"
+  };
+  const label = typeLabels[fieldType] || fieldType;
+  const color = typeColors[fieldType] || "bg-zinc-500/10 dark:bg-zinc-400/10 text-zinc-700 dark:text-zinc-300 ring-zinc-500/20 dark:ring-zinc-400/20";
+  return `<span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ${color} ring-1 ring-inset">${label}</span>`;
+}
 function renderCollectionFormPage(data) {
   const isEdit = data.isEdit || !!data.id;
   const title = isEdit ? "Edit Collection" : "Create New Collection";
   const subtitle = isEdit ? `Update collection: ${data.display_name}` : "Define a new content collection with custom fields and settings.";
+  const fieldsWithData = (data.fields || []).map((field) => ({
+    ...field,
+    dataFieldJSON: JSON.stringify(JSON.stringify(field))
+  }));
   const fields = [
     {
       name: "displayName",
@@ -17358,21 +18039,24 @@ function renderCollectionFormPage(data) {
 
               <!-- Fields List (Read-Only) -->
               <div class="space-y-3">
-                ${(data.fields || []).map((field) => `
+                ${fieldsWithData.map((field) => `
                   <div class="bg-zinc-50 dark:bg-zinc-800/50 rounded-lg border border-zinc-950/5 dark:border-white/10 p-4">
                     <div class="flex items-center justify-between">
                       <div class="flex items-center gap-x-4">
                         <div>
                           <div class="flex items-center gap-x-2">
                             <span class="text-sm/6 font-medium text-zinc-950 dark:text-white">${field.field_label}</span>
-                            <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium bg-cyan-500/10 dark:bg-cyan-400/10 text-cyan-700 dark:text-cyan-300 ring-1 ring-inset ring-cyan-500/20 dark:ring-cyan-400/20">
-                              ${field.field_type}
-                            </span>
+                            ${getFieldTypeBadge(field.field_type)}
                             ${field.is_required ? `
                               <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium bg-rose-500/10 dark:bg-rose-400/10 text-rose-700 dark:text-rose-300 ring-1 ring-inset ring-rose-500/20 dark:ring-rose-400/20">
                                 Required
                               </span>
                             ` : ""}
+                            ${field.is_searchable ? `
+                              <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium bg-emerald-500/10 dark:bg-emerald-400/10 text-emerald-700 dark:text-emerald-300 ring-1 ring-inset ring-emerald-500/20 dark:ring-emerald-400/20">
+                                Searchable
+                              </span>
+                            ` : ""}
                           </div>
                           <div class="text-xs text-zinc-500 dark:text-zinc-400 mt-1">
                             <code class="px-1.5 py-0.5 rounded bg-zinc-100 dark:bg-zinc-800 font-mono">${field.field_name}</code>
@@ -17418,8 +18102,10 @@ function renderCollectionFormPage(data) {
               
               <!-- Fields List -->
               <div id="fields-list" class="space-y-3">
-                ${(data.fields || []).map((field) => `
-                  <div class="field-item bg-zinc-50 dark:bg-zinc-800/50 rounded-lg border border-zinc-950/5 dark:border-white/10 p-4" data-field-id="${field.id}">
+                ${fieldsWithData.map((field) => `
+                  <div class="field-item bg-zinc-50 dark:bg-zinc-800/50 rounded-lg border border-zinc-950/5 dark:border-white/10 p-4"
+                       data-field-id="${field.id}"
+                       data-field-data="${field.dataFieldJSON}">
                     <div class="flex items-center justify-between">
                       <div class="flex items-center gap-x-4">
                         <div class="drag-handle cursor-move text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-400">
@@ -17430,14 +18116,17 @@ function renderCollectionFormPage(data) {
                         <div>
                           <div class="flex items-center gap-x-2">
                             <span class="text-sm/6 font-medium text-zinc-950 dark:text-white">${field.field_label}</span>
-                            <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium bg-cyan-500/10 dark:bg-cyan-400/10 text-cyan-700 dark:text-cyan-300 ring-1 ring-inset ring-cyan-500/20 dark:ring-cyan-400/20">
-                              ${field.field_type}
-                            </span>
+                            ${getFieldTypeBadge(field.field_type)}
                             ${field.is_required ? `
                               <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium bg-pink-500/10 dark:bg-pink-400/10 text-pink-700 dark:text-pink-300 ring-1 ring-inset ring-pink-500/20 dark:ring-pink-400/20">
                                 Required
                               </span>
                             ` : ""}
+                            ${field.is_searchable ? `
+                              <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium bg-emerald-500/10 dark:bg-emerald-400/10 text-emerald-700 dark:text-emerald-300 ring-1 ring-inset ring-emerald-500/20 dark:ring-emerald-400/20">
+                                Searchable
+                              </span>
+                            ` : ""}
                           </div>
                           <div class="text-sm/6 text-zinc-500 dark:text-zinc-400 mt-1">
                             Field name: <code class="text-zinc-950 dark:text-white font-mono text-xs">${field.field_name}</code>
@@ -17548,7 +18237,7 @@ function renderCollectionFormPage(data) {
             <label class="block text-sm font-medium text-zinc-950 dark:text-white mb-2">Field Name</label>
             <input
               type="text"
-              id="field-name"
+              id="modal-field-name"
               name="field_name"
               required
               pattern="[a-z0-9_]+"
@@ -17569,13 +18258,14 @@ function renderCollectionFormPage(data) {
               >
                 <option value="">Select field type...</option>
                 <option value="text">Text</option>
-                <option value="richtext">Rich Text</option>
+                ${data.editorPlugins?.tinymce ? '<option value="richtext">Rich Text (TinyMCE)</option>' : ""}
+                ${data.editorPlugins?.quill ? '<option value="quill">Rich Text (Quill)</option>' : ""}
+                ${data.editorPlugins?.mdxeditor ? '<option value="mdxeditor">Rich Text (MDXEditor)</option>' : ""}
                 <option value="number">Number</option>
                 <option value="boolean">Boolean</option>
                 <option value="date">Date</option>
                 <option value="select">Select</option>
                 <option value="media">Media</option>
-                <option value="guid">GUID (Auto-generated)</option>
               </select>
               <svg viewBox="0 0 16 16" fill="currentColor" data-slot="icon" aria-hidden="true" class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-blue-600 dark:text-blue-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" />
@@ -17600,6 +18290,7 @@ function renderCollectionFormPage(data) {
             <div class="flex gap-3">
               <div class="flex h-6 shrink-0 items-center">
                 <div class="group grid size-4 grid-cols-1">
+                  <input type="hidden" name="is_required" value="0">
                   <input
                     type="checkbox"
                     id="field-required"
@@ -17621,6 +18312,7 @@ function renderCollectionFormPage(data) {
             <div class="flex gap-3">
               <div class="flex h-6 shrink-0 items-center">
                 <div class="group grid size-4 grid-cols-1">
+                  <input type="hidden" name="is_searchable" value="0">
                   <input
                     type="checkbox"
                     id="field-searchable"
@@ -17683,18 +18375,52 @@ function renderCollectionFormPage(data) {
         document.getElementById('submit-text').textContent = 'Add Field';
         document.getElementById('field-form').reset();
         document.getElementById('field-id').value = '';
-        document.getElementById('field-name').disabled = false;
+        document.getElementById('modal-field-name').disabled = false;
         currentEditingField = null;
+        isEditingField = false; // Allow change handlers for add mode
         document.getElementById('field-modal').classList.remove('hidden');
       }
 
       function editField(fieldId) {
         const fieldItem = document.querySelector(\`[data-field-id="\${fieldId}"]\`);
-        if (!fieldItem) return;
+        if (!fieldItem) {
+          console.error('Field item not found:', fieldId);
+          return;
+        }
+
+        // Get field data from data attribute (primary source) or embedded array (fallback)
+        let field = null;
+
+        // Try to get from data attribute first
+        const fieldDataAttr = fieldItem.getAttribute('data-field-data');
+        if (fieldDataAttr) {
+          try {
+            // Data is double-JSON encoded to properly escape all special characters
+            field = JSON.parse(JSON.parse(fieldDataAttr));
+            console.log('Loaded field data from data attribute:', field);
+          } catch (e) {
+            console.error('Error parsing field data from attribute:', e);
+            // Try single parse as fallback for backwards compatibility
+            try {
+              field = JSON.parse(fieldDataAttr);
+              console.log('Loaded field data from data attribute (single parse):', field);
+            } catch (e2) {
+              console.error('Error parsing field data (fallback):', e2);
+            }
+          }
+        }
+
+        // Fallback to embedded array
+        if (!field) {
+          const fields = ${JSON.stringify(data.fields || [])};
+          field = fields.find(f => f.id === fieldId);
+          console.log('Loaded field data from embedded array:', field);
+        }
 
-        // Find the field data from the collection's fields array
-        const field = ${JSON.stringify(data.fields || [])}.find(f => f.id === fieldId);
-        if (!field) return;
+        if (!field) {
+          console.error('Field data not found for id:', fieldId);
+          return;
+        }
 
         // Set up the modal for editing
         document.getElementById('modal-title').textContent = 'Edit Field';
@@ -17702,18 +18428,102 @@ function renderCollectionFormPage(data) {
         document.getElementById('field-id').value = fieldId;
         currentEditingField = fieldId;
 
-        // Populate form with existing field data
-        document.getElementById('field-name').value = field.field_name || '';
-        document.getElementById('field-name').disabled = true;
-        document.getElementById('field-label').value = field.field_label || '';
-        document.getElementById('field-type').value = field.field_type || '';
-        document.getElementById('field-required').checked = Boolean(field.is_required);
-        document.getElementById('field-searchable').checked = Boolean(field.is_searchable);
-        
+        // Show modal FIRST before populating fields
+        document.getElementById('field-modal').classList.remove('hidden');
+
+        // Set flag to prevent change event handlers from interfering
+        isEditingField = true;
+
+        // Use setTimeout to ensure modal is rendered before setting values
+        setTimeout(() => {
+          // Populate form with existing field data
+        console.log('Field object for editing:', field);
+        console.log('field.field_name:', field.field_name);
+        console.log('field.field_type:', field.field_type);
+        console.log('field.field_label:', field.field_label);
+
+        const fieldNameInput = document.getElementById('modal-field-name');
+        const fieldTypeSelect = document.getElementById('field-type');
+        const fieldLabelInput = document.getElementById('field-label');
+
+        console.log('Field name input element:', fieldNameInput);
+        console.log('Field type select element:', fieldTypeSelect);
+        console.log('Field label input element:', fieldLabelInput);
+
+        if (fieldNameInput) {
+          console.log('Before setting - field-name value:', fieldNameInput.value);
+          console.log('Before setting - field-name disabled:', fieldNameInput.disabled);
+
+          fieldNameInput.disabled = false; // Enable first to ensure value can be set
+          fieldNameInput.value = field.field_name || '';
+          fieldNameInput.disabled = true; // Then disable
+
+          console.log('After setting - field-name value:', fieldNameInput.value);
+          console.log('After setting - field-name disabled:', fieldNameInput.disabled);
+
+          // Verify the value stuck
+          setTimeout(() => {
+            console.log('After 100ms - field-name value:', fieldNameInput.value);
+          }, 100);
+        } else {
+          console.error('field-name input not found!');
+        }
+
+        if (fieldLabelInput) {
+          fieldLabelInput.value = field.field_label || '';
+          console.log('Set field-label to:', fieldLabelInput.value);
+        } else {
+          console.error('field-label input not found!');
+        }
+
+        if (fieldTypeSelect) {
+          // Map schema types to UI field types
+          let uiFieldType = field.field_type || '';
+
+          // 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') {
+            // Check for richtext format
+            if (field.field_options.format === 'richtext') {
+              uiFieldType = 'richtext';
+            }
+            // Check for other format indicators
+            else if (field.field_options.type) {
+              uiFieldType = field.field_options.type;
+            }
+          }
+
+          // Map common schema types to UI types
+          const typeMapping = {
+            'string': 'text',
+            'integer': 'number',
+            'bool': 'boolean'
+          };
+
+          if (typeMapping[uiFieldType]) {
+            uiFieldType = typeMapping[uiFieldType];
+          }
+
+          fieldTypeSelect.value = uiFieldType;
+          console.log('Set field-type to:', fieldTypeSelect.value, '(original:', field.field_type, ')');
+        } else {
+          console.error('field-type select not found!');
+        }
+
+        const requiredCheckbox = document.getElementById('field-required');
+        const searchableCheckbox = document.getElementById('field-searchable');
+
+        if (requiredCheckbox) {
+          requiredCheckbox.checked = Boolean(field.is_required);
+        }
+
+        if (searchableCheckbox) {
+          searchableCheckbox.checked = Boolean(field.is_searchable);
+        }
+
         // Handle field options - serialize object back to JSON string
         if (field.field_options) {
-          document.getElementById('field-options').value = typeof field.field_options === 'string' 
-            ? field.field_options 
+          document.getElementById('field-options').value = typeof field.field_options === 'string'
+            ? field.field_options
             : JSON.stringify(field.field_options, null, 2);
         } else {
           document.getElementById('field-options').value = '';
@@ -17724,7 +18534,7 @@ function renderCollectionFormPage(data) {
         const optionsContainer = document.getElementById('field-options-container');
         const helpText = document.getElementById('field-type-help');
 
-        if (['select', 'media', 'richtext', 'guid'].includes(fieldType)) {
+        if (['select', 'media', 'richtext'].includes(fieldType)) {
           optionsContainer.classList.remove('hidden');
 
           // Set help text based on type
@@ -17738,9 +18548,6 @@ function renderCollectionFormPage(data) {
             case 'richtext':
               helpText.textContent = 'Full-featured WYSIWYG text editor with formatting options';
               break;
-            case 'guid':
-              helpText.textContent = 'Automatically generates a unique identifier (UUID v4) for each content item';
-              break;
           }
         } else {
           optionsContainer.classList.add('hidden');
@@ -17764,12 +18571,19 @@ function renderCollectionFormPage(data) {
           }
         }
 
-        document.getElementById('field-modal').classList.remove('hidden');
+        // Clear the flag after a short delay to allow all events to settle
+        setTimeout(() => {
+          isEditingField = false;
+          console.log('Cleared isEditingField flag');
+        }, 100);
+
+        }, 10); // Small delay to ensure modal is fully rendered
       }
 
       function closeFieldModal() {
         document.getElementById('field-modal').classList.add('hidden');
         currentEditingField = null;
+        isEditingField = false; // Clear the flag when closing
       }
 
       let fieldToDelete = null;
@@ -17843,12 +18657,21 @@ function renderCollectionFormPage(data) {
         });
       });
 
+      // Flag to prevent change handler during programmatic edits
+      let isEditingField = false;
+
       // Field type change handler
       document.getElementById('field-type').addEventListener('change', function() {
+        // Skip if we're programmatically setting values during edit
+        if (isEditingField) {
+          console.log('Skipping change handler - field is being edited');
+          return;
+        }
+
         const optionsContainer = document.getElementById('field-options-container');
         const fieldOptions = document.getElementById('field-options');
         const helpText = document.getElementById('field-type-help');
-        const fieldNameInput = document.getElementById('field-name');
+        const fieldNameInput = document.getElementById('modal-field-name');
 
         // Show/hide options based on field type
         if (['select', 'media', 'richtext', 'guid'].includes(this.value)) {
@@ -17868,14 +18691,6 @@ function renderCollectionFormPage(data) {
               fieldOptions.value = '{"toolbar": "full", "height": 400}';
               helpText.textContent = 'Full-featured WYSIWYG text editor with formatting options';
               break;
-            case 'guid':
-              fieldOptions.value = '{"autoGenerate": true, "format": "uuid-v4"}';
-              helpText.textContent = 'Automatically generates a unique identifier (UUID v4) for each content item';
-              // Suggest 'id' as field name for GUID fields
-              if (!fieldNameInput.value || fieldNameInput.value === '') {
-                fieldNameInput.value = 'id';
-              }
-              break;
           }
         } else {
           optionsContainer.classList.add('hidden');
@@ -18012,8 +18827,19 @@ adminCollectionsRoutes.get("/", async (c) => {
     return c.html(html`<p>Error loading collections</p>`);
   }
 });
-adminCollectionsRoutes.get("/new", (c) => {
+adminCollectionsRoutes.get("/new", async (c) => {
   const user = c.get("user");
+  const db = c.env.DB;
+  const [tinymceActive, quillActive, mdxeditorActive] = await Promise.all([
+    isPluginActive2(db, "tinymce-plugin"),
+    isPluginActive2(db, "quill-editor"),
+    isPluginActive2(db, "mdxeditor-plugin")
+  ]);
+  console.log("[Collections /new] Editor plugins status:", {
+    tinymce: tinymceActive,
+    quill: quillActive,
+    mdxeditor: mdxeditorActive
+  });
   const formData = {
     isEdit: false,
     user: user ? {
@@ -18021,7 +18847,12 @@ adminCollectionsRoutes.get("/new", (c) => {
       email: user.email,
       role: user.role
     } : void 0,
-    version: c.get("appVersion")
+    version: c.get("appVersion"),
+    editorPlugins: {
+      tinymce: tinymceActive,
+      quill: quillActive,
+      mdxeditor: mdxeditorActive
+    }
   };
   return c.html(renderCollectionFormPage(formData));
 });
@@ -18121,16 +18952,16 @@ adminCollectionsRoutes.post("/", async (c) => {
     if (isHtmx) {
       return c.html(html`
         <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
-          Collection created successfully! Redirecting...
+          Collection created successfully! Redirecting to edit mode...
           <script>
             setTimeout(() => {
-              window.location.href = '/admin/collections';
+              window.location.href = '/admin/collections/${collectionId}';
             }, 1500);
           </script>
         </div>
       `);
     } else {
-      return c.redirect("/admin/collections");
+      return c.redirect(`/admin/collections/${collectionId}`);
     }
   } catch (error) {
     console.error("Error creating collection:", error);
@@ -18180,7 +19011,7 @@ adminCollectionsRoutes.get("/:id", async (c) => {
             field_options: fieldConfig,
             field_order: fieldOrder++,
             is_required: fieldConfig.required === true || schema.required && schema.required.includes(fieldName),
-            is_searchable: false
+            is_searchable: fieldConfig.searchable === true || false
           }));
         }
       } catch (e) {
@@ -18205,6 +19036,11 @@ adminCollectionsRoutes.get("/:id", async (c) => {
         is_searchable: row.is_searchable === 1
       }));
     }
+    const [tinymceActive, quillActive, mdxeditorActive] = await Promise.all([
+      isPluginActive2(db, "tinymce-plugin"),
+      isPluginActive2(db, "quill-editor"),
+      isPluginActive2(db, "mdxeditor-plugin")
+    ]);
     const formData = {
       id: collection.id,
       name: collection.name,
@@ -18218,7 +19054,12 @@ adminCollectionsRoutes.get("/:id", async (c) => {
         email: user.email,
         role: user.role
       } : void 0,
-      version: c.get("appVersion")
+      version: c.get("appVersion"),
+      editorPlugins: {
+        tinymce: tinymceActive,
+        quill: quillActive,
+        mdxeditor: mdxeditorActive
+      }
     };
     return c.html(renderCollectionFormPage(formData));
   } catch (error) {
@@ -18358,21 +19199,103 @@ adminCollectionsRoutes.post("/:id/fields", async (c) => {
 adminCollectionsRoutes.put("/:collectionId/fields/:fieldId", async (c) => {
   try {
     const fieldId = c.req.param("fieldId");
+    const collectionId = c.req.param("collectionId");
     const formData = await c.req.formData();
     const fieldLabel = formData.get("field_label");
-    const isRequired = formData.get("is_required") === "1";
-    const isSearchable = formData.get("is_searchable") === "1";
+    const fieldType = formData.get("field_type");
+    const isRequiredValues = formData.getAll("is_required");
+    const isSearchableValues = formData.getAll("is_searchable");
+    const isRequired = isRequiredValues[isRequiredValues.length - 1] === "1";
+    const isSearchable = isSearchableValues[isSearchableValues.length - 1] === "1";
     const fieldOptions = formData.get("field_options") || "{}";
+    console.log("[Field Update] Field ID:", fieldId);
+    console.log("[Field Update] Form data received:", {
+      field_label: fieldLabel,
+      field_type: fieldType,
+      is_required: formData.get("is_required"),
+      is_searchable: formData.get("is_searchable"),
+      field_options: fieldOptions
+    });
     if (!fieldLabel) {
       return c.json({ success: false, error: "Field label is required." });
     }
     const db = c.env.DB;
+    if (fieldId.startsWith("schema-")) {
+      const fieldName = fieldId.replace("schema-", "");
+      console.log("[Field Update] Updating schema field:", fieldName);
+      const getCollectionStmt = db.prepare("SELECT * FROM collections WHERE id = ?");
+      const collection = await getCollectionStmt.bind(collectionId).first();
+      if (!collection) {
+        return c.json({ success: false, error: "Collection not found." });
+      }
+      let schema = typeof collection.schema === "string" ? JSON.parse(collection.schema) : collection.schema;
+      if (!schema) {
+        schema = { type: "object", properties: {}, required: [] };
+      }
+      if (!schema.properties) {
+        schema.properties = {};
+      }
+      if (!schema.required) {
+        schema.required = [];
+      }
+      if (schema.properties[fieldName]) {
+        const updatedFieldConfig = {
+          ...schema.properties[fieldName],
+          type: fieldType,
+          title: fieldLabel,
+          searchable: isSearchable
+        };
+        if (isRequired) {
+          updatedFieldConfig.required = true;
+        } else {
+          delete updatedFieldConfig.required;
+        }
+        schema.properties[fieldName] = updatedFieldConfig;
+        const requiredIndex = schema.required.indexOf(fieldName);
+        console.log("[Field Update] Required field handling:", {
+          fieldName,
+          isRequired,
+          currentRequiredArray: schema.required,
+          requiredIndex
+        });
+        if (isRequired && requiredIndex === -1) {
+          schema.required.push(fieldName);
+          console.log("[Field Update] Added field to required array");
+        } else if (!isRequired && requiredIndex !== -1) {
+          schema.required.splice(requiredIndex, 1);
+          console.log("[Field Update] Removed field from required array");
+        }
+        console.log("[Field Update] Final required array:", schema.required);
+        console.log("[Field Update] Final field config:", schema.properties[fieldName]);
+      }
+      const updateCollectionStmt = db.prepare(`
+        UPDATE collections
+        SET schema = ?, updated_at = ?
+        WHERE id = ?
+      `);
+      const result2 = await updateCollectionStmt.bind(JSON.stringify(schema), Date.now(), collectionId).run();
+      console.log("[Field Update] Schema update result:", {
+        success: result2.success,
+        changes: result2.meta?.changes
+      });
+      return c.json({ success: true });
+    }
     const updateStmt = db.prepare(`
       UPDATE content_fields
-      SET field_label = ?, field_options = ?, is_required = ?, is_searchable = ?, updated_at = ?
+      SET field_label = ?, field_type = ?, field_options = ?, is_required = ?, is_searchable = ?, updated_at = ?
       WHERE id = ?
     `);
-    await updateStmt.bind(fieldLabel, fieldOptions, isRequired ? 1 : 0, isSearchable ? 1 : 0, Date.now(), fieldId).run();
+    const result = await updateStmt.bind(fieldLabel, fieldType, fieldOptions, isRequired ? 1 : 0, isSearchable ? 1 : 0, Date.now(), fieldId).run();
+    console.log("[Field Update] Update result:", {
+      success: result.success,
+      meta: result.meta,
+      changes: result.meta?.changes,
+      last_row_id: result.meta?.last_row_id
+    });
+    const verifyStmt = db.prepare("SELECT * FROM content_fields WHERE id = ?");
+    const verifyResult = await verifyStmt.bind(fieldId).first();
+    console.log("[Field Update] Verification - field after update:", verifyResult);
+    console.log("[Field Update] Successfully updated field with type:", fieldType);
     return c.json({ success: true });
   } catch (error) {
     console.error("Error updating field:", error);
@@ -19633,7 +20556,7 @@ function renderMigrationSettings(settings) {
           btn.innerHTML = 'Running...';
 
           try {
-            const response = await fetch('/admin/api/migrations/run', {
+            const response = await fetch('/admin/settings/api/migrations/run', {
               method: 'POST'
             });
             const result = await response.json();
@@ -19654,7 +20577,7 @@ function renderMigrationSettings(settings) {
 
         window.validateSchema = async function() {
           try {
-            const response = await fetch('/admin/api/migrations/validate');
+            const response = await fetch('/admin/settings/api/migrations/validate');
             const result = await response.json();
             
             if (result.success) {
@@ -20282,7 +21205,6 @@ var ROUTES_INFO = {
     "adminLogsRoutes",
     "adminDesignRoutes",
     "adminCheckboxRoutes",
-    "adminFAQRoutes",
     "adminTestimonialsRoutes",
     "adminCodeExamplesRoutes",
     "adminDashboardRoutes",
@@ -20293,6 +21215,6 @@ var ROUTES_INFO = {
   reference: "https://github.com/sonicjs/sonicjs"
 };
 
-export { ROUTES_INFO, adminCheckboxRoutes, adminCollectionsRoutes, adminDesignRoutes, adminLogsRoutes, adminMediaRoutes, adminPluginRoutes, adminSettingsRoutes, admin_api_default, admin_code_examples_default, admin_content_default, admin_faq_default, admin_testimonials_default, api_content_crud_default, api_default, api_media_default, api_system_default, auth_default, router, userRoutes };
-//# sourceMappingURL=chunk-Z4H6DBVF.js.map
-//# sourceMappingURL=chunk-Z4H6DBVF.js.map
+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, router, userRoutes };
+//# sourceMappingURL=chunk-CLLJFZ5U.js.map
+//# sourceMappingURL=chunk-CLLJFZ5U.js.map