@sonicjs-cms/core 2.4.0 → 2.6.0

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

@@ -1,9 +1,10 @@
 import { getCacheService, CACHE_CONFIGS, getLogger, SettingsService } from './chunk-3YNNVSMC.js';
-import { requireAuth, isPluginActive, requireRole, AuthManager, logActivity } from './chunk-DXM575E2.js';
-import { PluginService } from './chunk-SGAG6FD3.js';
-import { MigrationService } from './chunk-D2NLCPO2.js';
-import { init_admin_layout_catalyst_template, renderDesignPage, renderCheckboxPage, renderTestimonialsList, renderCodeExamplesList, renderAlert, renderTable, renderPagination, renderConfirmationDialog, getConfirmationDialogScript, renderAdminLayoutCatalyst, renderAdminLayout, adminLayoutV2, renderForm } from './chunk-V5LBQN3I.js';
-import { QueryFilterBuilder, sanitizeInput, getCoreVersion, escapeHtml } from './chunk-VNCYCH3H.js';
+import { requireAuth, isPluginActive, requireRole, AuthManager, logActivity } from './chunk-EYWR6UA2.js';
+import { PluginService } from './chunk-YFJJU26H.js';
+import { MigrationService } from './chunk-EVZOVYLO.js';
+import { init_admin_layout_catalyst_template, renderDesignPage, renderCheckboxPage, renderTestimonialsList, renderCodeExamplesList, renderAlert, renderTable, renderPagination, renderConfirmationDialog, getConfirmationDialogScript, renderAdminLayoutCatalyst, renderAdminLayout, adminLayoutV2, renderForm } from './chunk-KA2PDJNB.js';
+import { PluginBuilder } from './chunk-CLIH2T74.js';
+import { QueryFilterBuilder, sanitizeInput, getCoreVersion, escapeHtml, getBlocksFieldConfig, parseBlocksValue } from './chunk-7DL5SPPX.js';
 import { metricsTracker } from './chunk-FICTAGD4.js';
 import { Hono } from 'hono';
 import { cors } from 'hono/cors';
@@ -14,6 +15,37 @@ import { html, raw } from 'hono/html';
 // src/schemas/index.ts
 var schemaDefinitions = [];
 var apiContentCrudRoutes = new Hono();
+apiContentCrudRoutes.get("/check-slug", async (c) => {
+  try {
+    const db = c.env.DB;
+    const collectionId = c.req.query("collectionId");
+    const slug = c.req.query("slug");
+    const excludeId = c.req.query("excludeId");
+    if (!collectionId || !slug) {
+      return c.json({ error: "collectionId and slug are required" }, 400);
+    }
+    let query = "SELECT id FROM content WHERE collection_id = ? AND slug = ?";
+    const params = [collectionId, slug];
+    if (excludeId) {
+      query += " AND id != ?";
+      params.push(excludeId);
+    }
+    const existing = await db.prepare(query).bind(...params).first();
+    if (existing) {
+      return c.json({
+        available: false,
+        message: "This URL slug is already in use in this collection"
+      });
+    }
+    return c.json({ available: true });
+  } catch (error) {
+    console.error("Error checking slug:", error);
+    return c.json({
+      error: "Failed to check slug availability",
+      details: error instanceof Error ? error.message : String(error)
+    }, 500);
+  }
+});
 apiContentCrudRoutes.get("/:id", async (c) => {
   try {
     const id = c.req.param("id");
@@ -1551,6 +1583,107 @@ adminApiRoutes.get("/collections/:id", async (c) => {
     return c.json({ error: "Failed to fetch collection" }, 500);
   }
 });
+adminApiRoutes.get("/references", async (c) => {
+  try {
+    const db = c.env.DB;
+    const url = new URL(c.req.url);
+    const collectionParams = url.searchParams.getAll("collection").flatMap((value) => value.split(",")).map((value) => value.trim()).filter(Boolean);
+    const search = c.req.query("search") || "";
+    const id = c.req.query("id") || "";
+    const limit = Math.min(Number.parseInt(c.req.query("limit") || "20", 10) || 20, 100);
+    if (collectionParams.length === 0) {
+      return c.json({ error: "Collection is required" }, 400);
+    }
+    const placeholders = collectionParams.map(() => "?").join(", ");
+    const collectionStmt = db.prepare(`
+      SELECT id, name, display_name
+      FROM collections
+      WHERE id IN (${placeholders}) OR name IN (${placeholders})
+    `);
+    const collectionResults = await collectionStmt.bind(...collectionParams, ...collectionParams).all();
+    const collections = collectionResults.results || [];
+    if (collections.length === 0) {
+      return c.json({ error: "Collection not found" }, 404);
+    }
+    const collectionById = Object.fromEntries(
+      collections.map((entry) => [
+        entry.id,
+        {
+          id: entry.id,
+          name: entry.name,
+          display_name: entry.display_name
+        }
+      ])
+    );
+    const collectionIds = collections.map((entry) => entry.id);
+    if (id) {
+      const idPlaceholders = collectionIds.map(() => "?").join(", ");
+      const itemStmt = db.prepare(`
+        SELECT id, title, slug, collection_id
+        FROM content
+        WHERE id = ? AND collection_id IN (${idPlaceholders})
+        LIMIT 1
+      `);
+      const item = await itemStmt.bind(id, ...collectionIds).first();
+      if (!item) {
+        return c.json({ error: "Reference not found" }, 404);
+      }
+      return c.json({
+        data: {
+          id: item.id,
+          title: item.title,
+          slug: item.slug,
+          collection: collectionById[item.collection_id]
+        }
+      });
+    }
+    let stmt;
+    let results;
+    const listPlaceholders = collectionIds.map(() => "?").join(", ");
+    const statusFilterValues = ["published"];
+    const statusClause = ` AND status IN (${statusFilterValues.map(() => "?").join(", ")})`;
+    if (search) {
+      const searchParam = `%${search}%`;
+      stmt = db.prepare(`
+        SELECT id, title, slug, status, updated_at, collection_id
+        FROM content
+        WHERE collection_id IN (${listPlaceholders})
+        AND (title LIKE ? OR slug LIKE ?)
+        ${statusClause}
+        ORDER BY updated_at DESC
+        LIMIT ?
+      `);
+      const queryResults = await stmt.bind(...collectionIds, searchParam, searchParam, ...statusFilterValues, limit).all();
+      results = queryResults.results;
+    } else {
+      stmt = db.prepare(`
+        SELECT id, title, slug, status, updated_at, collection_id
+        FROM content
+        WHERE collection_id IN (${listPlaceholders})
+        ${statusClause}
+        ORDER BY updated_at DESC
+        LIMIT ?
+      `);
+      const queryResults = await stmt.bind(...collectionIds, ...statusFilterValues, limit).all();
+      results = queryResults.results;
+    }
+    const items = (results || []).map((row) => ({
+      id: row.id,
+      title: row.title,
+      slug: row.slug,
+      status: row.status,
+      updated_at: row.updated_at ? Number(row.updated_at) : null,
+      collection: collectionById[row.collection_id]
+    }));
+    return c.json({
+      data: items,
+      count: items.length
+    });
+  } catch (error) {
+    console.error("Error fetching reference options:", error);
+    return c.json({ error: "Failed to fetch references" }, 500);
+  }
+});
 adminApiRoutes.post("/collections", async (c) => {
   try {
     const contentType = c.req.header("Content-Type");
@@ -1720,7 +1853,7 @@ adminApiRoutes.delete("/collections/:id", async (c) => {
 });
 adminApiRoutes.get("/migrations/status", async (c) => {
   try {
-    const { MigrationService: MigrationService2 } = await import('./migrations-57ZHBQ4X.js');
+    const { MigrationService: MigrationService2 } = await import('./migrations-R6NQBKQV.js');
     const db = c.env.DB;
     const migrationService = new MigrationService2(db);
     const status = await migrationService.getMigrationStatus();
@@ -1745,7 +1878,7 @@ adminApiRoutes.post("/migrations/run", async (c) => {
         error: "Unauthorized. Admin access required."
       }, 403);
     }
-    const { MigrationService: MigrationService2 } = await import('./migrations-57ZHBQ4X.js');
+    const { MigrationService: MigrationService2 } = await import('./migrations-R6NQBKQV.js');
     const db = c.env.DB;
     const migrationService = new MigrationService2(db);
     const result = await migrationService.runPendingMigrations();
@@ -1764,7 +1897,7 @@ adminApiRoutes.post("/migrations/run", async (c) => {
 });
 adminApiRoutes.get("/migrations/validate", async (c) => {
   try {
-    const { MigrationService: MigrationService2 } = await import('./migrations-57ZHBQ4X.js');
+    const { MigrationService: MigrationService2 } = await import('./migrations-R6NQBKQV.js');
     const db = c.env.DB;
     const migrationService = new MigrationService2(db);
     const validation = await migrationService.validateSchema();
@@ -1791,7 +1924,7 @@ function renderLoginPage(data, demoLoginActive = false) {
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Login - SonicJS AI</title>
-      <link rel="icon" type="image/x-icon" href="https://demo.sonicjs.com/images/favicon.ico">
+      <link rel="icon" type="image/svg+xml" href="/favicon.svg">
       <script src="https://unpkg.com/htmx.org@2.0.3"></script>
       <script src="https://cdn.tailwindcss.com"></script>
       <script>
@@ -1968,7 +2101,7 @@ function renderRegisterPage(data) {
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Register - SonicJS AI</title>
-      <link rel="icon" type="image/x-icon" href="https://demo.sonicjs.com/images/favicon.ico">
+      <link rel="icon" type="image/svg+xml" href="/favicon.svg">
       <script src="https://unpkg.com/htmx.org@2.0.3"></script>
       <script src="https://cdn.tailwindcss.com"></script>
       <script>
@@ -1991,40 +2124,18 @@ function renderRegisterPage(data) {
       <div class="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
         <!-- Logo Section -->
         <div class="sm:mx-auto sm:w-full sm:max-w-md text-center">
-          <div class="mx-auto w-64 mb-8">
-            <svg class="w-full h-auto" viewBox="380 1300 2250 400" aria-hidden="true">
-              <path fill="#F1F2F2" d="M476.851,1404.673h168.536c4.714,0,8.695-1.618,11.944-4.866c3.241-3.241,4.866-7.222,4.866-11.943    c0-2.357-0.443-4.569-1.327-6.636c-0.885-2.06-2.067-3.829-3.539-5.308c-1.479-1.472-3.249-2.654-5.308-3.538    c-2.067-0.885-4.279-1.327-6.635-1.327H476.851c-20.057,0-37.158,7.154-51.313,21.454c-14.155,14.308-21.233,31.483-21.233,51.534    c0,20.058,7.078,37.234,21.233,51.534c14.155,14.308,31.255,21.454,51.313,21.454h112.357c10.907,0,20.196,3.837,27.868,11.502    c7.666,7.672,11.502,16.885,11.502,27.646c0,10.769-3.836,19.982-11.502,27.647c-7.672,7.673-16.961,11.502-27.868,11.502H421.115    c-4.721,0-8.702,1.624-11.944,4.865c-3.248,3.249-4.866,7.23-4.866,11.944c0,3.248,0.733,6.123,2.212,8.626    c1.472,2.509,3.462,4.499,5.971,5.972c2.502,1.472,5.378,2.212,8.626,2.212h168.094c20.052,0,37.227-7.078,51.534-21.234    c14.3-14.155,21.454-31.331,21.454-51.534c0-20.196-7.154-37.379-21.454-51.534c-14.308-14.156-31.483-21.234-51.534-21.234    H476.851c-10.616,0-19.76-3.905-27.426-11.721c-7.672-7.811-11.501-17.101-11.501-27.87c0-10.761,3.829-19.975,11.501-27.647    C457.091,1408.508,466.235,1404.673,476.851,1404.673z"></path>
-              <path fill="#F1F2F2" d="M974.78,1398.211c-5.016,6.574-10.034,13.146-15.048,19.721c-1.828,2.398-3.657,4.796-5.487,7.194    c1.994,1.719,3.958,3.51,5.873,5.424c18.724,18.731,28.089,41.216,28.089,67.459c0,26.251-9.366,48.658-28.089,67.237    c-18.731,18.579-41.215,27.868-67.459,27.868c-9.848,0-19.156-1.308-27.923-3.923l-4.185,3.354    c-8.587,6.885-17.154,13.796-25.725,20.702c17.52,8.967,36.86,13.487,58.054,13.487c35.533,0,65.91-12.608,91.124-37.821    c25.214-25.215,37.821-55.584,37.821-91.125c0-35.534-12.607-65.911-37.821-91.126    C981.004,1403.663,977.926,1400.854,974.78,1398.211z"></path>
-              <path fill="#F1F2F2" d="M1364.644,1439.619c-4.72,0-8.702,1.624-11.943,4.865c-3.249,3.249-4.866,7.23-4.866,11.944v138.014    l-167.651-211.003c-0.297-0.586-0.74-1.03-1.327-1.326c-4.721-4.714-10.249-7.742-16.588-9.069    c-6.346-1.326-12.608-0.732-18.801,1.77c-6.192,2.509-11.059,6.49-14.598,11.944c-3.539,5.46-5.308,11.577-5.308,18.357v208.348    c0,4.721,1.618,8.703,4.866,11.944c3.241,3.241,7.222,4.865,11.943,4.865c2.945,0,5.751-0.738,8.405-2.211    c2.654-1.472,4.713-3.463,6.193-5.971c1.473-2.503,2.212-5.378,2.212-8.627v-205.251l166.325,209.675    c2.06,2.654,4.423,4.865,7.078,6.635c5.308,3.829,11.349,5.75,18.137,5.75c5.308,0,10.464-1.182,15.482-3.538    c3.539-1.769,6.56-4.127,9.069-7.078c2.502-2.945,4.491-6.338,5.971-10.175c1.473-3.829,2.212-7.664,2.212-11.501v-141.552    c0-4.714-1.624-8.695-4.865-11.944C1373.339,1441.243,1369.359,1439.619,1364.644,1439.619z"></path>
-              <path fill="#F1F2F2" d="M1508.406,1432.983c-2.654-1.472-5.46-2.212-8.404-2.212c-4.721,0-8.703,1.7-11.944,5.087    c-3.249,3.395-4.865,7.3-4.865,11.723v163.228c0,4.721,1.616,8.702,4.865,11.943c3.241,3.249,7.223,4.866,11.944,4.866    c2.944,0,5.751-0.732,8.404-2.212c2.655-1.472,4.714-3.539,6.193-6.194c1.473-2.654,2.213-5.453,2.213-8.404V1447.58    c0-2.945-0.74-5.75-2.213-8.405C1513.12,1436.522,1511.06,1434.462,1508.406,1432.983z"></path>
-              <path fill="#F1F2F2" d="M1499.78,1367.957c-4.575,0-8.481,1.625-11.722,4.866c-3.249,3.249-4.865,7.23-4.865,11.943    c0,2.951,0.732,5.75,2.212,8.405c1.472,2.654,3.463,4.721,5.971,6.193c2.503,1.479,5.378,2.212,8.627,2.212    c4.423,0,8.328-1.618,11.721-4.865c3.387-3.243,5.088-7.224,5.088-11.944c0-4.713-1.701-8.694-5.088-11.943    C1508.33,1369.582,1504.349,1367.957,1499.78,1367.957z"></path>
-              <path fill="#F1F2F2" d="M1859.627,1369.727H1747.27c-35.388,0-65.69,12.607-90.904,37.821    c-25.213,25.215-37.82,55.591-37.82,91.125c0,35.54,12.607,65.911,37.82,91.125c25.215,25.215,55.516,37.821,90.904,37.821h56.178    c4.714,0,8.695-1.618,11.944-4.866c3.241-3.241,4.865-7.222,4.865-11.943c0-4.714-1.624-8.695-4.865-11.943    c-3.249-3.243-7.23-4.866-11.944-4.866h-56.178c-26.251,0-48.659-9.359-67.237-28.09c-18.579-18.723-27.868-41.207-27.868-67.459    c0-26.243,9.29-48.659,27.868-67.237c18.579-18.579,40.987-27.868,67.237-27.868h112.357c4.714,0,8.696-1.693,11.944-5.087    c3.241-3.387,4.865-7.368,4.865-11.943c0-4.569-1.624-8.475-4.865-11.723C1868.322,1371.351,1864.341,1369.727,1859.627,1369.727z    "></path>
-              <path fill="#06b6d4" d="M2219.256,1371.054h-112.357c-4.423,0-8.336,1.624-11.723,4.865c-3.393,3.249-5.087,7.23-5.087,11.944    c0,4.721,1.694,8.702,5.087,11.943c3.387,3.249,7.3,4.866,11.723,4.866h95.547v95.105c0,26.251-9.365,48.659-28.088,67.237    c-18.731,18.579-41.215,27.868-67.459,27.868c-26.251,0-48.659-9.289-67.237-27.868c-18.579-18.579-27.868-40.987-27.868-67.237    c0-4.713-1.701-8.771-5.088-12.165c-3.393-3.387-7.374-5.087-11.943-5.087c-4.575,0-8.481,1.7-11.722,5.087    c-3.249,3.393-4.865,7.451-4.865,12.165c0,35.388,12.607,65.69,37.82,90.904c25.215,25.213,55.584,37.82,91.126,37.82    c35.532,0,65.91-12.607,91.125-37.82c25.214-25.215,37.82-55.516,37.82-90.904v-111.915c0-4.714-1.624-8.695-4.865-11.944    C2227.951,1372.678,2223.971,1371.054,2219.256,1371.054z"></path>
-              <path fill="#06b6d4" d="M2574.24,1502.875c-14.306-14.156-31.483-21.234-51.533-21.234H2410.35    c-10.617,0-19.762-3.829-27.426-11.501c-7.672-7.664-11.501-16.954-11.501-27.868c0-10.907,3.829-20.196,11.501-27.868    c7.664-7.664,16.809-11.501,27.426-11.501h112.357c4.714,0,8.695-1.617,11.944-4.866c3.241-3.241,4.865-7.222,4.865-11.943    c0-4.714-1.624-8.695-4.865-11.944c-3.249-3.241-7.23-4.865-11.944-4.865H2410.35c-20.058,0-37.158,7.154-51.313,21.454    c-14.156,14.308-21.232,31.483-21.232,51.534c0,20.058,7.077,37.234,21.232,51.534c14.156,14.308,31.255,21.454,51.313,21.454    h112.357c7.078,0,13.637,1.77,19.684,5.308c6.042,3.539,10.838,8.336,14.377,14.377c3.538,6.047,5.307,12.607,5.307,19.685    c0,10.616-3.835,19.76-11.501,27.425c-7.672,7.673-16.961,11.502-27.868,11.502h-168.094c-4.721,0-8.703,1.7-11.944,5.087    c-3.249,3.393-4.865,7.374-4.865,11.943c0,4.576,1.616,8.481,4.865,11.723c3.241,3.249,7.223,4.866,11.944,4.866h168.094    c20.051,0,37.227-7.078,51.533-21.234c14.302-14.155,21.454-31.331,21.454-51.534    C2595.695,1534.213,2588.542,1517.03,2574.24,1502.875z"></path>
-              <path fill="#06b6d4" d="M854.024,1585.195l20.001-16.028c16.616-13.507,33.04-27.265,50.086-40.251    c1.13-0.861,2.9-1.686,2.003-3.516c-0.843-1.716-2.481-2.302-4.484-2.123c-8.514,0.765-17.016-0.538-25.537-0.353    c-1.124,0.024-2.768,0.221-3.163-1.25c-0.371-1.369,1.088-2.063,1.919-2.894c6.26-6.242,12.574-12.43,18.816-18.691    c9.303-9.327,18.565-18.714,27.851-28.066c1.848-1.859,3.701-3.713,5.549-5.572c2.655-2.661,5.309-5.315,7.958-7.982    c0.574-0.579,1.259-1.141,1.246-1.94c-0.004-0.257-0.078-0.538-0.254-0.853c-0.556-0.981-1.441-1.1-2.469-0.957    c-0.658,0.096-1.315,0.185-1.973,0.275c-3.844,0.538-7.689,1.076-11.533,1.608c-3.641,0.505-7.281,1.02-10.922,1.529    c-4.162,0.582-8.324,1.158-12.486,1.748c-1.142,0.161-2.409,1.662-3.354,0.508c-0.419-0.508-0.431-1.028-0.251-1.531    c0.269-0.741,0.957-1.441,1.387-2.021c3.414-4.58,6.882-9.124,10.356-13.662c1.74-2.272,3.48-4.544,5.214-6.822    c4.682-6.141,9.369-12.281,14.051-18.422c0.09-0.119,0.181-0.237,0.271-0.355c6.848-8.98,13.7-17.958,20.553-26.936    c0.488-0.64,0.977-1.28,1.465-1.92c2.159-2.828,4.315-5.658,6.476-8.486c4.197-5.501,8.454-10.954,12.67-16.442    c0.263-0.347,0.538-0.718,0.717-1.106c0.269-0.586,0.299-1.196-0.335-1.776c-0.825-0.753-1.8-0.15-2.595,0.419    c-0.67,0.472-1.333,0.957-1.955,1.489c-2.206,1.889-4.401,3.797-6.595,5.698c-3.958,3.438-7.922,6.876-11.976,10.194    c-2.443,2.003-4.865,4.028-7.301,6.038c-18.689-10.581-39.53-15.906-62.549-15.906c-35.54,0-65.911,12.607-91.125,37.82    c-25.214,25.215-37.821,55.592-37.821,91.126c0,35.54,12.607,65.91,37.821,91.125c4.146,4.146,8.445,7.916,12.87,11.381    c-9.015,11.14-18.036,22.277-27.034,33.429c-1.208,1.489-3.755,3.151-2.745,4.891c0.078,0.144,0.173,0.281,0.305,0.425    c1.321,1.429,3.492-1.303,4.933-2.457c6.673-5.333,13.333-10.685,19.982-16.042c3.707-2.984,7.417-5.965,11.124-8.952    c1.474-1.188,2.951-2.373,4.425-3.561c6.41-5.164,12.816-10.333,19.238-15.481L854.024,1585.195z M797.552,1498.009    c0-26.243,9.29-48.728,27.868-67.459c18.579-18.723,40.987-28.089,67.238-28.089c12.273,0,23.712,2.075,34.34,6.171    c-3.37,2.905-6.734,5.816-10.069,8.762c-6.075,5.351-12.365,10.469-18.667,15.564c-4.179,3.378-8.371,6.744-12.514,10.164    c-7.54,6.23-15.037,12.52-22.529,18.804c-7.091,5.955-14.182,11.904-21.19,17.949c-1.136,0.974-3.055,1.907-2.135,3.94    c0.831,1.836,2.774,1.417,4.341,1.578l12.145-0.599l14.151-0.698c1.031-0.102,2.192-0.257,2.89,0.632    c0.034,0.044,0.073,0.078,0.106,0.127c1.017,1.561-0.67,2.105-1.387,2.942c-6.308,7.318-12.616,14.637-18.978,21.907    c-8.161,9.339-16.353,18.649-24.544,27.958c-2.146,2.433-4.275,4.879-6.422,7.312c-1.034,1.172-2.129,2.272-1.238,3.922    c0.933,1.728,2.685,1.752,4.323,1.602c4.134-0.367,8.263-0.489,12.396-0.492c0.242,0,0.485-0.005,0.728-0.004    c2.711,0.009,5.422,0.068,8.134,0.145c2.582,0.074,5.166,0.165,7.752,0.249c0.275,1.62-0.879,2.356-1.62,3.259    c-1.333,1.626-2.667,3.247-4,4.867c-4.315,5.252-8.62,10.514-12.928,15.772c-3.562-2.725-7.007-5.733-10.324-9.051    C806.842,1546.667,797.552,1524.26,797.552,1498.009z"></path>
+          <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-white">
+            <svg class="h-7 w-7 text-zinc-950" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
             </svg>
           </div>
-          <h2 class="mt-6 text-xl font-medium text-white">${data.isSetup ? "Welcome to SonicJS" : "Create Account"}</h2>
-          ${data.isSetup ? `<p class="mt-2 text-sm text-zinc-400">Create your admin account to get started.</p>` : `<p class="mt-2 text-sm text-zinc-400">Create your account and get started</p>`}
+          <h1 class="mt-6 text-3xl font-semibold tracking-tight text-white">SonicJS AI</h1>
+          <p class="mt-2 text-sm text-zinc-400">Create your account and get started</p>
         </div>
 
         <!-- Form Container -->
         <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
           <div class="bg-zinc-900 shadow-sm ring-1 ring-white/10 rounded-xl px-6 py-8 sm:px-10">
-            <!-- Setup Banner -->
-            ${data.isSetup ? `
-              <div class="mb-6 rounded-lg bg-blue-500/10 p-4 ring-1 ring-blue-500/20">
-                <div class="flex items-start gap-x-3">
-                  <svg class="h-5 w-5 text-blue-400 shrink-0 mt-0.5" 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>
-                  <div class="flex-1">
-                    <p class="text-sm font-medium text-blue-300">First-time Setup</p>
-                    <p class="text-sm text-blue-400/80 mt-1">This account will be the administrator with full access to manage your SonicJS installation.</p>
-                  </div>
-                </div>
-              </div>
-            ` : ""}
             <!-- Alerts -->
             ${data.error ? `<div class="mb-6">${renderAlert({ type: "error", message: data.error })}</div>` : ""}
 
@@ -2139,7 +2250,6 @@ function renderRegisterPage(data) {
     </html>
   `;
 }
-var adminExistsCache = null;
 async function isRegistrationEnabled(db) {
   try {
     const plugin = await db.prepare("SELECT settings FROM plugins WHERE id = ?").bind("core-auth").first();
@@ -2161,21 +2271,6 @@ async function isFirstUserRegistration(db) {
     return false;
   }
 }
-async function checkAdminUserExists(db) {
-  if (adminExistsCache !== null) {
-    return adminExistsCache;
-  }
-  try {
-    const result = await db.prepare("SELECT id FROM users WHERE role = ?").bind("admin").first();
-    adminExistsCache = !!result;
-    return adminExistsCache;
-  } catch {
-    return false;
-  }
-}
-function setAdminExists() {
-  adminExistsCache = true;
-}
 var baseRegistrationSchema = z.object({
   email: z.string().email("Valid email is required"),
   password: z.string().min(8, "Password must be at least 8 characters"),
@@ -2237,11 +2332,8 @@ authRoutes.get("/register", async (c) => {
     }
   }
   const error = c.req.query("error");
-  const isSetup = c.req.query("setup") === "true";
   const pageData = {
-    error: error || void 0,
-    isSetup: isSetup && isFirstUser
-    // Only show setup message if truly first user
+    error: error || void 0
   };
   return c.html(renderRegisterPage(pageData));
 });
@@ -2516,9 +2608,6 @@ authRoutes.post("/register/form", async (c) => {
       now.getTime(),
       now.getTime()
     ).run();
-    if (isFirstUser) {
-      setAdminExists();
-    }
     const token = await AuthManager.generateToken(userId, normalizedEmail, role);
     setCookie(c, "auth_token", token, {
       httpOnly: true,
@@ -2640,7 +2729,6 @@ authRoutes.post("/seed-admin", async (c) => {
     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();
-      setAdminExists();
       return c.json({
         message: "Admin user already exists (password updated)",
         user: {
@@ -2671,7 +2759,6 @@ authRoutes.post("/seed-admin", async (c) => {
       now,
       now
     ).run();
-    setAdminExists();
     return c.json({
       message: "Admin user created successfully",
       user: {
@@ -3381,9 +3468,166 @@ var test_cleanup_default = app;
 // src/templates/pages/admin-content-form.template.ts
 init_admin_layout_catalyst_template();
 
+// src/templates/components/drag-sortable.template.ts
+function getDragSortableScript() {
+  return `
+    <script>
+      if (!window.__sonicDragSortableInit) {
+        window.__sonicDragSortableInit = true;
+
+        window.initializeDragSortable = function(container, options) {
+          if (!container || container.dataset.dragSortableInit === 'true') {
+            return;
+          }
+
+          container.dataset.dragSortableInit = 'true';
+          const itemSelector = options && options.itemSelector ? options.itemSelector : '.sortable-item';
+          const handleSelector = options && options.handleSelector ? options.handleSelector : '[data-action="drag-handle"]';
+          const onUpdate = options && typeof options.onUpdate === 'function' ? options.onUpdate : function() {};
+          let activeDragItem = null;
+
+          const getDragAfterElement = function(list, y) {
+            const items = Array.from(list.querySelectorAll(itemSelector + ':not(.is-dragging)'));
+            let closest = { offset: Number.NEGATIVE_INFINITY, element: null };
+            items.forEach(function(item) {
+              const box = item.getBoundingClientRect();
+              const offset = y - box.top - box.height / 2;
+              if (offset < 0 && offset > closest.offset) {
+                closest = { offset: offset, element: item };
+              }
+            });
+            return closest.element;
+          };
+
+          const activateDragItem = function(event) {
+            const target = event.target;
+            if (!(target instanceof Element)) return;
+            const handle = target.closest(handleSelector);
+            if (!handle) return;
+            const item = handle.closest(itemSelector);
+            if (!item) return;
+            activeDragItem = item;
+          };
+
+          const clearActiveDragItem = function() {
+            activeDragItem = null;
+          };
+
+          container.addEventListener('pointerdown', activateDragItem);
+          container.addEventListener('mousedown', activateDragItem);
+          container.addEventListener('pointerup', clearActiveDragItem);
+          container.addEventListener('mouseup', clearActiveDragItem);
+
+          container.addEventListener('dragstart', function(event) {
+            const target = event.target;
+            if (!(target instanceof Element)) return;
+            const item = target.closest(itemSelector);
+            if (!item || item !== activeDragItem) {
+              event.preventDefault();
+              return;
+            }
+            item.classList.add('is-dragging');
+            if (event.dataTransfer) {
+              event.dataTransfer.setData('text/plain', '');
+            }
+          });
+
+          container.addEventListener('dragend', function(event) {
+            const target = event.target;
+            if (target instanceof Element) {
+              const item = target.closest(itemSelector);
+              if (item) {
+                item.classList.remove('is-dragging');
+              }
+            }
+            activeDragItem = null;
+            onUpdate();
+          });
+
+          container.addEventListener('dragover', function(event) {
+            event.preventDefault();
+            const dragging = container.querySelector(itemSelector + '.is-dragging');
+            if (!dragging) return;
+            const afterElement = getDragAfterElement(container, event.clientY);
+            if (afterElement === null) {
+              container.appendChild(dragging);
+            } else {
+              container.insertBefore(dragging, afterElement);
+            }
+          });
+
+          container.addEventListener('drop', function() {
+            onUpdate();
+          });
+        };
+      }
+    </script>
+  `;
+}
+
 // src/templates/components/dynamic-field.template.ts
+function getReadFieldValueScript() {
+  return `
+    <script>
+      if (!window.__sonicReadFieldValueInit) {
+        window.__sonicReadFieldValueInit = true;
+
+        window.sonicReadFieldValue = function(fieldWrapper) {
+          const fieldType = fieldWrapper.dataset.fieldType;
+          const select = fieldWrapper.querySelector('select');
+          const textarea = fieldWrapper.querySelector('textarea');
+          const inputs = Array.from(fieldWrapper.querySelectorAll('input'));
+          const checkbox = inputs.find((input) => input.type === 'checkbox');
+          const nonHiddenInput = inputs.find((input) => input.type !== 'hidden' && input.type !== 'checkbox');
+          const hiddenInput = inputs.find((input) => input.type === 'hidden');
+
+          if (fieldType === 'object' || fieldType === 'array') {
+            if (!hiddenInput) {
+              return fieldType === 'array' ? [] : {};
+            }
+            const rawValue = hiddenInput.value || '';
+            if (!rawValue.trim()) {
+              return fieldType === 'array' ? [] : {};
+            }
+            try {
+              return JSON.parse(rawValue);
+            } catch {
+              return fieldType === 'array' ? [] : {};
+            }
+          }
+
+          if (fieldType === 'boolean' && checkbox) {
+            return checkbox.checked;
+          }
+
+          if (select) {
+            if (select.multiple) {
+              return Array.from(select.selectedOptions).map((option) => option.value);
+            }
+            return select.value;
+          }
+
+          if (fieldType === 'quill' || fieldType === 'media') {
+            return hiddenInput ? hiddenInput.value : '';
+          }
+
+          const textSource = textarea || nonHiddenInput || hiddenInput;
+          if (!textSource) {
+            return '';
+          }
+
+          if (fieldType === 'number') {
+            return textSource.value === '' ? null : Number(textSource.value);
+          }
+
+          return textSource.value;
+        };
+      }
+    </script>
+  `;
+}
 function renderDynamicField(field, options = {}) {
-  const { value = "", errors = [], disabled = false, className = "", pluginStatuses = {} } = options;
+  const { value = "", errors = [], disabled = false, className = "", pluginStatuses = {}, collectionId = "", contentId = "" } = options;
   const opts = field.field_options || {};
   const required = field.is_required ? "required" : "";
   const baseClasses = `w-full rounded-lg px-3 py-2 text-sm text-zinc-950 dark:text-white bg-white dark:bg-zinc-800 shadow-sm ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-zinc-950 dark:focus:ring-white transition-shadow ${className}`;
@@ -3636,67 +3880,171 @@ function renderDynamicField(field, options = {}) {
       `;
       break;
     case "slug":
-      let slugPattern = opts.pattern || "^[a-z0-9-]+$";
-      let slugHelp = '<p class="mt-2 text-xs text-zinc-500 dark:text-zinc-400">Use lowercase letters, numbers, and hyphens only</p>';
-      slugHelp += `<button type="button" class="mt-1 text-xs text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300" onclick="generateSlugFromTitle('\${fieldId}')">Generate from title</button>`;
+      const slugPattern = opts.pattern || "^[a-z0-9-]+$";
+      const collectionIdValue = collectionId || opts.collectionId || "";
+      const contentIdValue = contentId || opts.contentId || "";
+      const isEditMode = !!value;
       fieldHTML = `
-        <input
-          type="text"
-          id="${fieldId}"
-          name="${fieldName}"
-          value="${escapeHtml2(value)}"
-          placeholder="${opts.placeholder || "url-friendly-slug"}"
-          maxlength="${opts.maxLength || ""}"
-          data-pattern="${slugPattern}"
-          class="${baseClasses} ${errorClasses}"
-          ${required}
-          ${disabled ? "disabled" : ""}
-        >
-        ${slugHelp}
+        <div class="slug-field-container">
+          <input
+            type="text"
+            id="${fieldId}"
+            name="${fieldName}"
+            value="${escapeHtml2(value)}"
+            placeholder="${opts.placeholder || "url-friendly-slug"}"
+            maxlength="${opts.maxLength || 100}"
+            data-pattern="${slugPattern}"
+            data-collection-id="${collectionIdValue}"
+            data-content-id="${contentIdValue}"
+            data-is-edit-mode="${isEditMode}"
+            class="${baseClasses} ${errorClasses}"
+            ${required}
+            ${disabled ? "disabled" : ""}
+          >
+          <div id="${fieldId}-status" class="slug-status mt-1 text-sm min-h-[20px]"></div>
+          <button 
+            type="button" 
+            class="regenerate-slug-btn mt-2 text-sm text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 flex items-center gap-1 transition-colors"
+            onclick="window.regenerateSlugFromTitle_${fieldId.replace(/-/g, "_")}()"
+          >
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
+            </svg>
+            Regenerate from title
+          </button>
+          <p class="text-xs text-zinc-500 dark:text-zinc-400 mt-1">Use lowercase letters, numbers, and hyphens only</p>
+        </div>
+        
         <script>
           (function() {
-            const field = document.getElementById('${fieldId}');
+            const slugField = document.getElementById('${fieldId}');
+            const statusDiv = document.getElementById('${fieldId}-status');
+            const isEditMode = slugField.dataset.isEditMode === 'true';
             const pattern = new RegExp('${slugPattern}');
-
-            field.addEventListener('input', function() {
-              if (this.value && !pattern.test(this.value)) {
-                this.setCustomValidity('Please use only lowercase letters, numbers, and hyphens.');
-              } else {
-                this.setCustomValidity('');
-              }
-            });
-
-            field.addEventListener('blur', function() {
-              this.reportValidity();
-            });
-          })();
-
-          function generateSlugFromTitle(slugFieldId) {
-            const titleField = document.querySelector('input[name="title"]');
-            const slugField = document.getElementById(slugFieldId);
-            if (titleField && slugField) {
-              const slug = titleField.value
+            const collectionId = slugField.dataset.collectionId;
+            const contentId = slugField.dataset.contentId;
+            
+            let checkTimeout;
+            let lastCheckedSlug = '';
+            let manuallyEdited = false;
+            
+            // Shared slug generation function
+            function generateSlug(text) {
+              if (!text) return '';
+              
+              return text
                 .toLowerCase()
+                .normalize('NFD')
+                .replace(/[\\u0300-\\u036f]/g, '')
                 .replace(/[^a-z0-9\\s_-]/g, '')
                 .replace(/\\s+/g, '-')
                 .replace(/[-_]+/g, '-')
-                .replace(/^[-_]|[-_]$/g, '');
-              slugField.value = slug;
+                .replace(/^[-_]+|[-_]+$/g, '')
+                .substring(0, 100);
             }
-          }
-
-          // Auto-generate slug when title changes
-          document.addEventListener('DOMContentLoaded', function() {
-            const titleField = document.querySelector('input[name="title"]');
-            const slugField = document.getElementById('${fieldId}');
-            if (titleField && slugField && !slugField.value) {
-              titleField.addEventListener('input', function() {
-                if (!slugField.value) {
-                  generateSlugFromTitle('${fieldId}');
+            
+            // Check if slug is available
+            async function checkSlugAvailability(slug) {
+              if (!slug || !collectionId) return;
+              
+              // Don't check if it's the same as last time
+              if (slug === lastCheckedSlug) return;
+              lastCheckedSlug = slug;
+              
+              try {
+                // Show checking status
+                statusDiv.innerHTML = '<span class="text-gray-400">\u23F3 Checking availability...</span>';
+                
+                // Build URL
+                let url = \`/api/content/check-slug?collectionId=\${encodeURIComponent(collectionId)}&slug=\${encodeURIComponent(slug)}\`;
+                if (contentId) {
+                  url += \`&excludeId=\${encodeURIComponent(contentId)}\`;
                 }
-              });
+                
+                const response = await fetch(url);
+                const data = await response.json();
+                
+                if (data.available) {
+                  statusDiv.innerHTML = '<span class="text-green-500 dark:text-green-400">\u2713 Available</span>';
+                  slugField.setCustomValidity('');
+                } else {
+                  statusDiv.innerHTML = \`<span class="text-red-500 dark:text-red-400">\u2717 \${data.message || 'Already in use'}</span>\`;
+                  slugField.setCustomValidity(data.message || 'This slug is already in use');
+                }
+              } catch (error) {
+                console.error('Error checking slug:', error);
+                statusDiv.innerHTML = '<span class="text-yellow-500 dark:text-yellow-400">\u26A0 Could not verify</span>';
+              }
             }
-          });
+            
+            // Format validation and duplicate checking
+            slugField.addEventListener('input', function() {
+              const value = this.value;
+              
+              // Mark as manually edited if user types directly
+              if (document.activeElement === this) {
+                manuallyEdited = true;
+              }
+              
+              // Clear status if empty
+              if (!value) {
+                statusDiv.innerHTML = '';
+                this.setCustomValidity('');
+                return;
+              }
+              
+              // Pattern validation
+              if (!pattern.test(value)) {
+                this.setCustomValidity('Please use only lowercase letters, numbers, and hyphens.');
+                statusDiv.innerHTML = '<span class="text-red-500 dark:text-red-400">\u2717 Invalid format</span>';
+                return;
+              }
+              
+              // Debounce the availability check
+              clearTimeout(checkTimeout);
+              checkTimeout = setTimeout(() => {
+                checkSlugAvailability(value);
+              }, 500); // Wait 500ms after user stops typing
+            });
+            
+            // Initial check if field has value
+            if (slugField.value) {
+              checkSlugAvailability(slugField.value);
+            }
+            
+            // Auto-generate only in create mode
+            // Wait for all fields to be rendered before attaching listeners
+            if (!isEditMode) {
+              // Use setTimeout to ensure all fields in the form are rendered
+              setTimeout(() => {
+                const titleField = document.querySelector('input[name="title"]');
+                if (titleField) {
+                  titleField.addEventListener('input', function() {
+                    if (!manuallyEdited) {
+                      const slug = generateSlug(this.value);
+                      slugField.value = slug;
+                      
+                      // Trigger validation and duplicate check
+                      slugField.dispatchEvent(new Event('input', { bubbles: true }));
+                    }
+                  });
+                }
+              }, 0);
+            }
+            
+            // Global function for regenerate button
+            window.regenerateSlugFromTitle_${fieldId.replace(/-/g, "_")} = function() {
+              const titleField = document.querySelector('input[name="title"]');
+              if (titleField && slugField) {
+                const slug = generateSlug(titleField.value);
+                slugField.value = slug;
+                manuallyEdited = false;
+                
+                // Trigger validation and duplicate check
+                slugField.dispatchEvent(new Event('input', { bubbles: true }));
+              }
+            };
+          })();
         </script>
       `;
       break;
@@ -3733,43 +4081,124 @@ function renderDynamicField(field, options = {}) {
         ` : ""}
       `;
       break;
+    case "reference":
+      let referenceCollections = [];
+      if (Array.isArray(opts.collection)) {
+        referenceCollections = opts.collection.filter(Boolean);
+      } else if (typeof opts.collection === "string" && opts.collection) {
+        referenceCollections = [opts.collection];
+      }
+      const referenceCollectionsAttr = referenceCollections.join(",");
+      const hasReferenceCollection = referenceCollections.length > 0;
+      const hasReferenceValue = Boolean(value);
+      fieldHTML = `
+        <div class="reference-field-container space-y-3" data-reference-field data-field-name="${escapeHtml2(fieldName)}" data-reference-collection="${escapeHtml2(referenceCollections[0] || "")}" data-reference-collections="${escapeHtml2(referenceCollectionsAttr)}">
+          <input type="hidden" id="${fieldId}" name="${fieldName}" value="${escapeHtml2(value)}">
+          <div class="rounded-lg border border-zinc-200 bg-white/60 px-3 py-2 text-sm text-zinc-600 dark:border-white/10 dark:bg-white/5 dark:text-zinc-300" data-reference-display>
+            ${hasReferenceCollection ? hasReferenceValue ? "Loading selection..." : "No reference selected." : "Reference collection not configured."}
+          </div>
+          <div class="flex flex-wrap gap-2">
+            <button
+              type="button"
+              onclick="openReferenceSelector('${fieldId}')"
+              class="inline-flex items-center justify-center rounded-lg bg-zinc-900 px-3 py-2 text-sm font-semibold text-white hover:bg-zinc-800 dark:bg-white/10 dark:hover:bg-white/20"
+              ${hasReferenceCollection ? "" : "disabled"}
+            >
+              Select reference
+            </button>
+            <button
+              type="button"
+              onclick="clearReferenceField('${fieldId}')"
+              class="inline-flex items-center justify-center rounded-lg border border-zinc-200 px-3 py-2 text-sm font-semibold text-zinc-700 hover:bg-zinc-100 dark:border-white/10 dark:text-zinc-200 dark:hover:bg-white/10"
+              data-reference-clear
+              ${hasReferenceValue ? "" : "disabled"}
+            >
+              Remove
+            </button>
+          </div>
+        </div>
+      `;
+      break;
     case "media":
+      const isMultiple = opts.multiple === true;
+      const mediaValues = isMultiple && value ? Array.isArray(value) ? value : String(value).split(",").filter(Boolean) : [];
+      const singleValue = !isMultiple ? value : "";
+      const isVideoUrl = (url) => {
+        const videoExtensions = [".mp4", ".webm", ".ogg", ".mov", ".avi"];
+        return videoExtensions.some((ext) => url.toLowerCase().endsWith(ext));
+      };
+      const renderMediaPreview = (url, alt, classes) => {
+        if (isVideoUrl(url)) {
+          return `<video src="${url}" class="${classes}" muted></video>`;
+        }
+        return `<img src="${url}" alt="${alt}" class="${classes}">`;
+      };
       fieldHTML = `
         <div class="media-field-container">
-          <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>
+          <input type="hidden" id="${fieldId}" name="${fieldName}" value="${isMultiple ? mediaValues.join(",") : singleValue}" data-multiple="${isMultiple}">
+
+          ${isMultiple ? `
+            <div class="media-preview-grid grid grid-cols-4 gap-2 mb-2 ${mediaValues.length === 0 ? "hidden" : ""}" id="${fieldId}-preview">
+              ${mediaValues.map((url, idx) => `
+                <div class="relative media-preview-item" data-url="${url}">
+                  ${renderMediaPreview(url, `Media ${idx + 1}`, "w-full h-24 object-cover rounded-lg border border-white/20")}
+                  <button
+                    type="button"
+                    onclick="removeMediaFromMultiple('${fieldId}', '${url}')"
+                    class="absolute top-1 right-1 bg-red-600 text-white rounded-full p-1 hover:bg-red-700"
+                    ${disabled ? "disabled" : ""}
+                  >
+                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                    </svg>
+                  </button>
+                </div>
+              `).join("")}
+            </div>
+          ` : `
+            <div class="media-preview ${singleValue ? "" : "hidden"}" id="${fieldId}-preview">
+              ${singleValue ? renderMediaPreview(singleValue, "Selected media", "w-32 h-32 object-cover rounded-lg border border-white/20") : ""}
+            </div>
+          `}
+
           <div class="media-actions mt-2 space-x-2">
             <button
               type="button"
-              onclick="openMediaSelector('${fieldId}')"
+              onclick="openMediaSelector('${fieldId}', ${isMultiple})"
               class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-all"
               ${disabled ? "disabled" : ""}
             >
               <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
               </svg>
-              Select Media
+              ${isMultiple ? "Select Media (Multiple)" : "Select Media"}
             </button>
-            ${value ? `
+            ${(isMultiple ? mediaValues.length > 0 : singleValue) ? `
               <button
                 type="button"
                 onclick="clearMediaField('${fieldId}')"
                 class="inline-flex items-center px-4 py-2 bg-red-600 text-white rounded-xl hover:bg-red-700 transition-all"
                 ${disabled ? "disabled" : ""}
               >
-                Remove
+                ${isMultiple ? "Clear All" : "Remove"}
               </button>
             ` : ""}
           </div>
         </div>
       `;
       break;
+    case "object":
+      return renderStructuredObjectField(field, options2);
+    case "array":
+      const itemsConfig = opts.items && typeof opts.items === "object" ? opts.items : {};
+      if (itemsConfig.blocks && typeof itemsConfig.blocks === "object") {
+        return renderBlocksField(field, options2, baseClasses, errorClasses);
+      }
+      return renderStructuredArrayField(field, options2);
     default:
       fieldHTML = `
-        <input 
-          type="text" 
+        <input
+          type="text"
           id="${fieldId}"
           name="${fieldName}"
           value="${escapeHtml2(value)}"
@@ -3819,217 +4248,764 @@ function renderFieldGroup(title, fields, collapsible = false) {
     </div>
   `;
 }
-function escapeHtml2(text) {
-  if (typeof text !== "string") return String(text || "");
-  return text.replace(/[&<>"']/g, (char) => ({
-    "&": "&amp;",
-    "<": "&lt;",
-    ">": "&gt;",
-    '"': "&quot;",
-    "'": "&#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;
+function renderBlocksField(field, options, baseClasses, errorClasses) {
+  const { value = [], pluginStatuses = {} } = options;
+  const opts = field.field_options || {};
+  const itemsConfig = opts.items && typeof opts.items === "object" ? opts.items : {};
+  const blocks = normalizeBlockDefinitions(itemsConfig.blocks);
+  const discriminator = typeof itemsConfig.discriminator === "string" && itemsConfig.discriminator ? itemsConfig.discriminator : "blockType";
+  const blockValues = normalizeBlocksValue(value, discriminator);
+  const fieldId = `field-${field.field_name}`;
+  const fieldName = field.field_name;
+  const emptyState = blockValues.length === 0 ? `
+    <div class="rounded-lg border border-dashed border-zinc-200 dark:border-white/10 px-4 py-6 text-center text-sm text-zinc-500 dark:text-zinc-400" data-blocks-empty>
+      No blocks yet. Add your first block to get started.
+    </div>
+  ` : "";
+  const blockOptions = blocks.map((block) => `<option value="${escapeHtml2(block.name)}">${escapeHtml2(block.label)}</option>`).join("");
+  const blockItems = blockValues.map(
+    (blockValue, index) => renderBlockItem(field, blockValue, blocks, discriminator, index, pluginStatuses)
+  ).join("");
+  const templates = blocks.map((block) => renderBlockTemplate(field, block, discriminator, pluginStatuses)).join("");
+  return `
+    <div
+      class="blocks-field space-y-4"
+      data-blocks='${escapeHtml2(JSON.stringify(blocks))}'
+      data-blocks-discriminator="${escapeHtml2(discriminator)}"
+      data-field-name="${escapeHtml2(fieldName)}"
+    >
+      <input type="hidden" id="${fieldId}" name="${fieldName}" value="${escapeHtml2(JSON.stringify(blockValues))}">
+
+      <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div class="flex-1">
+          <select
+            class="${baseClasses} ${errorClasses}"
+            data-role="block-type-select"
+          >
+            <option value="">Choose a block...</option>
+            ${blockOptions}
+          </select>
+        </div>
+        <button
+          type="button"
+          data-action="add-block"
+          class="inline-flex items-center justify-center rounded-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white hover:bg-zinc-800 dark:bg-white/10 dark:hover:bg-white/20"
+        >
+          Add Block
+        </button>
+      </div>
+
+      <div class="space-y-4" data-blocks-list>
+        ${blockItems || emptyState}
+      </div>
+
+      ${templates}
+    </div>
+    ${getDragSortableScript()}
+    ${getBlocksFieldScript()}
+  `;
+}
+function renderStructuredObjectField(field, options, baseClasses, errorClasses) {
+  const { value = {}, pluginStatuses = {} } = options;
+  const opts = field.field_options || {};
+  const properties = opts.properties && typeof opts.properties === "object" ? opts.properties : {};
+  const fieldId = `field-${field.field_name}`;
+  const fieldName = field.field_name;
+  const objectValue = normalizeStructuredObjectValue(value);
+  const subfields = Object.entries(properties).map(
+    ([propertyName, propertyConfig]) => renderStructuredSubfield(
+      field,
+      propertyName,
+      propertyConfig,
+      objectValue,
+      pluginStatuses,
+      field.field_name
+    )
+  ).join("");
+  return `
+    <div class="space-y-4" data-structured-object data-field-name="${escapeHtml2(fieldName)}">
+      <input type="hidden" id="${fieldId}" name="${fieldName}" value="${escapeHtml2(JSON.stringify(objectValue))}">
+      <div class="space-y-4" data-structured-object-fields>
+        ${subfields}
+      </div>
+    </div>
+    ${getStructuredFieldScript()}
+  `;
+}
+function renderStructuredArrayField(field, options, baseClasses, errorClasses) {
+  const { value = [], pluginStatuses = {} } = options;
+  const opts = field.field_options || {};
+  const itemsConfig = opts.items && typeof opts.items === "object" ? opts.items : {};
+  const fieldId = `field-${field.field_name}`;
+  const fieldName = field.field_name;
+  const arrayValue = normalizeStructuredArrayValue(value);
+  const items = arrayValue.map(
+    (itemValue, index) => renderStructuredArrayItem(field, itemsConfig, String(index), itemValue, pluginStatuses)
+  ).join("");
+  const emptyState = arrayValue.length === 0 ? `
+    <div class="rounded-lg border border-dashed border-zinc-200 dark:border-white/10 px-4 py-6 text-center text-sm text-zinc-500 dark:text-zinc-400" data-structured-empty>
+      No items yet. Add the first item to get started.
+    </div>
+  ` : "";
+  return `
+    <div class="space-y-4" data-structured-array data-field-name="${escapeHtml2(fieldName)}">
+      <input type="hidden" id="${fieldId}" name="${fieldName}" value="${escapeHtml2(JSON.stringify(arrayValue))}">
+
+      <div class="flex items-center justify-between gap-3">
+        <div class="text-sm text-zinc-500 dark:text-zinc-400">
+          ${escapeHtml2(opts.itemLabel || "Items")}
+        </div>
+        <button
+          type="button"
+          data-action="add-item"
+          class="inline-flex items-center justify-center rounded-lg bg-zinc-900 px-3 py-2 text-sm font-semibold text-white hover:bg-zinc-800 dark:bg-white/10 dark:hover:bg-white/20"
+        >
+          Add item
+        </button>
+      </div>
+
+      <div class="space-y-4" data-structured-array-list>
+        ${items || emptyState}
+      </div>
+
+      <template data-structured-array-template>
+        ${renderStructuredArrayItem(field, itemsConfig, "__INDEX__", {}, pluginStatuses)}
+      </template>
+    </div>
+    ${getDragSortableScript()}
+    ${getStructuredFieldScript()}
+  `;
+}
+function renderStructuredArrayItem(field, itemConfig, index, itemValue, pluginStatuses) {
+  const itemFields = renderStructuredItemFields(field, itemConfig, index, itemValue, pluginStatuses);
+  return `
+    <div class="structured-array-item rounded-lg border border-zinc-200 dark:border-white/10 bg-white/60 dark:bg-white/5 p-4 shadow-sm" data-array-index="${escapeHtml2(index)}" draggable="true">
+      <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div class="flex items-center gap-3">
+          <div class="drag-handle cursor-move text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-400" data-action="drag-handle" title="Drag to reorder">
+            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M4 8h16M4 16h16"/>
+            </svg>
+          </div>
+          <div class="text-sm font-semibold text-zinc-900 dark:text-white">
+            Item <span class="ml-2 text-xs font-normal text-zinc-500 dark:text-zinc-400" data-array-order-label></span>
+          </div>
+        </div>
+        <div class="flex flex-wrap gap-2 text-xs">
+          <button type="button" data-action="move-up" class="inline-flex items-center justify-center rounded-md border border-zinc-200 px-2 py-1 text-zinc-600 hover:bg-zinc-100 dark:border-white/10 dark:text-zinc-300 dark:hover:bg-white/10 disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent dark:disabled:hover:bg-transparent" aria-label="Move item up" title="Move up">
+            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="4">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 6l-4 4m4-4l4 4m-4-4v12"/>
+            </svg>
+          </button>
+          <button type="button" data-action="move-down" class="inline-flex items-center justify-center rounded-md border border-zinc-200 px-2 py-1 text-zinc-600 hover:bg-zinc-100 dark:border-white/10 dark:text-zinc-300 dark:hover:bg-white/10 disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent dark:disabled:hover:bg-transparent" aria-label="Move item down" title="Move down">
+            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="4">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 18l4-4m-4 4l-4-4m4 4V6"/>
+            </svg>
+          </button>
+          <button type="button" data-action="remove-item" class="inline-flex items-center gap-x-1 px-2.5 py-1.5 text-xs font-medium text-pink-700 dark:text-pink-300 hover:bg-pink-50 dark:hover:bg-pink-900/20 rounded-lg transition-colors">
+            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 0 00-7.5 0"/>
+            </svg>
+            Delete item
+          </button>
+        </div>
+      </div>
+      <div class="mt-4 space-y-4" data-array-item-fields>
+        ${itemFields}
+      </div>
+    </div>
+  `;
+}
+function renderStructuredItemFields(field, itemConfig, index, itemValue, pluginStatuses) {
+  const itemType = itemConfig?.type || "string";
+  if (itemType === "object" && itemConfig?.properties && typeof itemConfig.properties === "object") {
+    const fieldPrefix = `array-${field.field_name}-${index}`;
+    return Object.entries(itemConfig.properties).map(
+      ([propertyName, propertyConfig]) => renderStructuredSubfield(
+        field,
+        propertyName,
+        propertyConfig,
+        itemValue || {},
+        pluginStatuses,
+        fieldPrefix
+      )
+    ).join("");
   }
-  /**
-   * 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;
+  const normalizedField = normalizeBlockField(itemConfig, "Item");
+  const fieldValue = itemValue ?? normalizedField.defaultValue ?? "";
+  const fieldDefinition = {
+    id: `array-${field.field_name}-${index}-value`,
+    field_name: `array-${field.field_name}-${index}-value`,
+    field_type: normalizedField.type,
+    field_label: normalizedField.label,
+    field_options: normalizedField.options,
+    is_required: normalizedField.required};
+  return `
+    <div class="structured-subfield" data-structured-field="__value" data-field-type="${escapeHtml2(normalizedField.type)}">
+      ${renderDynamicField(fieldDefinition, { value: fieldValue, pluginStatuses })}
+    </div>
+  `;
+}
+function renderStructuredSubfield(field, propertyName, propertyConfig, objectValue, pluginStatuses, fieldPrefix) {
+  const normalizedField = normalizeBlockField(propertyConfig, propertyName);
+  const fieldValue = objectValue?.[propertyName] ?? normalizedField.defaultValue ?? "";
+  const fieldDefinition = {
+    field_name: `${fieldPrefix}__${propertyName}`,
+    field_type: normalizedField.type,
+    field_label: normalizedField.label,
+    field_options: normalizedField.options,
+    is_required: normalizedField.required};
+  return `
+    <div class="structured-subfield" data-structured-field="${escapeHtml2(propertyName)}" data-field-type="${escapeHtml2(normalizedField.type)}">
+      ${renderDynamicField(fieldDefinition, { value: fieldValue, pluginStatuses })}
+    </div>
+  `;
+}
+function normalizeStructuredObjectValue(value) {
+  if (!value) return {};
+  if (typeof value === "string") {
+    try {
+      const parsed = JSON.parse(value);
+      return parsed && typeof parsed === "object" && !Array.isArray(parsed) ? parsed : {};
+    } catch {
+      return {};
+    }
   }
-  /**
-   * Add hooks to plugin
-   */
-  addHooks(hooks) {
-    this.plugin.hooks = [...this.plugin.hooks || [], ...hooks];
-    return this;
+  if (typeof value === "object" && !Array.isArray(value)) return value;
+  return {};
+}
+function normalizeStructuredArrayValue(value) {
+  if (!value) return [];
+  if (Array.isArray(value)) return value;
+  if (typeof value === "string") {
+    try {
+      const parsed = JSON.parse(value);
+      return Array.isArray(parsed) ? parsed : [];
+    } catch {
+      return [];
+    }
   }
-  /**
-   * Add a single hook to plugin
-   */
-  addHook(name, handler, options) {
-    const hook = {
-      name,
-      handler,
-      ...options
-    };
-    this.plugin.hooks = [...this.plugin.hooks || [], hook];
-    return this;
+  return [];
+}
+function normalizeBlockDefinitions(rawBlocks) {
+  if (!rawBlocks || typeof rawBlocks !== "object") return [];
+  return Object.entries(rawBlocks).filter(([name, block]) => typeof name === "string" && block && typeof block === "object").map(([name, block]) => ({
+    name,
+    label: block.label || name,
+    description: block.description,
+    properties: block.properties && typeof block.properties === "object" ? block.properties : {}
+  }));
+}
+function normalizeBlocksValue(value, discriminator) {
+  const normalizeItem = (item) => {
+    if (!item || typeof item !== "object") return null;
+    if (item[discriminator]) return item;
+    if (item.blockType && item.data && typeof item.data === "object") {
+      return { [discriminator]: item.blockType, ...item.data };
+    }
+    return item;
+  };
+  const fromArray = (items) => items.map(normalizeItem).filter((item) => item && typeof item === "object");
+  if (Array.isArray(value)) return fromArray(value);
+  if (typeof value === "string" && value.trim()) {
+    try {
+      const parsed = JSON.parse(value);
+      return Array.isArray(parsed) ? fromArray(parsed) : [];
+    } catch {
+      return [];
+    }
   }
-  /**
-   * Add lifecycle hooks
-   */
-  lifecycle(hooks) {
-    Object.assign(this.plugin, hooks);
-    return this;
+  return [];
+}
+function renderBlockTemplate(field, block, discriminator, pluginStatuses) {
+  return `
+    <template data-block-template="${escapeHtml2(block.name)}">
+      ${renderBlockCard(field, block, discriminator, "__INDEX__", {}, pluginStatuses)}
+    </template>
+  `;
+}
+function renderBlockItem(field, blockValue, blocks, discriminator, index, pluginStatuses) {
+  const blockType = blockValue?.[discriminator] || blockValue?.blockType;
+  const blockDefinition = blocks.find((block) => block.name === blockType);
+  if (!blockDefinition) {
+    return `
+      <div class="rounded-lg border border-amber-200 bg-amber-50/50 px-4 py-3 text-sm text-amber-700 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-200" data-block-raw="${escapeHtml2(JSON.stringify(blockValue || {}))}">
+        Unknown block type: <strong>${escapeHtml2(String(blockType || "unknown"))}</strong>. This block will be preserved as-is.
+      </div>
+    `;
   }
-  /**
-   * Build the plugin
-   */
-  build() {
-    if (!this.plugin.name || !this.plugin.version) {
-      throw new Error("Plugin name and version are required");
+  const data = blockValue && typeof blockValue === "object" ? Object.fromEntries(Object.entries(blockValue).filter(([key]) => key !== discriminator)) : {};
+  return renderBlockCard(field, blockDefinition, discriminator, String(index), data, pluginStatuses);
+}
+function renderBlockCard(field, block, discriminator, index, data, pluginStatuses) {
+  const blockFields = Object.entries(block.properties).map(([fieldName, fieldConfig]) => {
+    if (fieldConfig?.type === "array" && fieldConfig?.items?.blocks) {
+      return `
+        <div class="rounded-lg border border-dashed border-amber-200 bg-amber-50/50 px-4 py-3 text-xs text-amber-700 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-200">
+          Nested blocks are not supported yet for "${escapeHtml2(fieldName)}".
+        </div>
+      `;
     }
-    return this.plugin;
+    const normalizedField = normalizeBlockField(fieldConfig, fieldName);
+    const fieldValue = data?.[fieldName] ?? normalizedField.defaultValue ?? "";
+    const fieldDefinition = {
+      id: `block-${field.field_name}-${index}-${fieldName}`,
+      field_name: `block-${field.field_name}-${index}-${fieldName}`,
+      field_type: normalizedField.type,
+      field_label: normalizedField.label,
+      field_options: normalizedField.options,
+      is_required: normalizedField.required};
+    return `
+      <div class="blocks-subfield" data-block-field="${escapeHtml2(fieldName)}" data-field-type="${escapeHtml2(normalizedField.type)}">
+        ${renderDynamicField(fieldDefinition, { value: fieldValue, pluginStatuses })}
+      </div>
+    `;
+  }).join("");
+  return `
+    <div class="blocks-item rounded-lg border border-zinc-200 dark:border-white/10 bg-white/60 dark:bg-white/5 p-4 shadow-sm" data-block-type="${escapeHtml2(block.name)}" data-block-discriminator="${escapeHtml2(discriminator)}" draggable="true">
+      <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div class="flex items-start gap-3">
+          <div class="drag-handle cursor-move text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-400" data-action="drag-handle" title="Drag to reorder">
+            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M4 8h16M4 16h16"/>
+            </svg>
+          </div>
+          <div>
+            <div class="text-sm font-semibold text-zinc-900 dark:text-white">
+              ${escapeHtml2(block.label)}
+              <span class="ml-2 text-xs font-normal text-zinc-500 dark:text-zinc-400" data-block-order-label></span>
+            </div>
+            ${block.description ? `<p class="text-xs text-zinc-500 dark:text-zinc-400">${escapeHtml2(block.description)}</p>` : ""}
+          </div>
+        </div>
+        <div class="flex flex-wrap gap-2 text-xs">
+          <button type="button" data-action="move-up" class="inline-flex items-center justify-center rounded-md border border-zinc-200 px-2 py-1 text-zinc-600 hover:bg-zinc-100 dark:border-white/10 dark:text-zinc-300 dark:hover:bg-white/10 disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent dark:disabled:hover:bg-transparent" aria-label="Move block up" title="Move up">
+            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="4">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 6l-4 4m4-4l4 4m-4-4v12"/>
+            </svg>
+          </button>
+          <button type="button" data-action="move-down" class="inline-flex items-center justify-center rounded-md border border-zinc-200 px-2 py-1 text-zinc-600 hover:bg-zinc-100 dark:border-white/10 dark:text-zinc-300 dark:hover:bg-white/10 disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent dark:disabled:hover:bg-transparent" aria-label="Move block down" title="Move down">
+            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="4">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 18l4-4m-4 4l-4-4m4 4V6"/>
+            </svg>
+          </button>
+          <button type="button" data-action="remove-block" class="inline-flex items-center gap-x-1 px-2.5 py-1.5 text-xs font-medium text-pink-700 dark:text-pink-300 hover:bg-pink-50 dark:hover:bg-pink-900/20 rounded-lg transition-colors">
+            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
+            </svg>
+            Delete block
+          </button>
+        </div>
+      </div>
+      <div class="mt-4 space-y-4">
+        ${blockFields}
+      </div>
+    </div>
+  `;
+}
+function normalizeBlockField(fieldConfig, fieldName) {
+  const type = fieldConfig?.type || "text";
+  const label = fieldConfig?.title || fieldName;
+  const required = fieldConfig?.required === true;
+  const options = { ...fieldConfig };
+  if (type === "select" && Array.isArray(fieldConfig?.enum)) {
+    options.options = fieldConfig.enum.map((value, index) => ({
+      value,
+      label: fieldConfig.enumLabels?.[index] || value
+    }));
   }
-};
+  return {
+    type,
+    label,
+    required,
+    defaultValue: fieldConfig?.default,
+    options
+  };
+}
+function getStructuredFieldScript() {
+  return `
+    ${getReadFieldValueScript()}
+    <script>
+      if (!window.__sonicStructuredFieldInit) {
+        window.__sonicStructuredFieldInit = true;
+
+        function initializeStructuredFields() {
+          const readFieldValue = window.sonicReadFieldValue;
+
+          const readStructuredValue = (container) => {
+            const fields = Array.from(container.querySelectorAll('.structured-subfield'));
+            if (fields.length === 1 && fields[0].dataset.structuredField === '__value') {
+              return readFieldValue(fields[0]);
+            }
+
+            return fields.reduce((acc, fieldWrapper) => {
+              const fieldName = fieldWrapper.dataset.structuredField;
+              if (!fieldName || fieldName === '__value') return acc;
+              acc[fieldName] = readFieldValue(fieldWrapper);
+              return acc;
+            }, {});
+          };
+
+          document.querySelectorAll('[data-structured-object]').forEach((container) => {
+            if (container.dataset.structuredInitialized === 'true') {
+              return;
+            }
+            container.dataset.structuredInitialized = 'true';
+            const hiddenInput = container.querySelector('input[type="hidden"]');
+
+            const updateHiddenInput = () => {
+              if (!hiddenInput) return;
+              const value = readStructuredValue(container);
+              hiddenInput.value = JSON.stringify(value);
+            };
+
+            container.addEventListener('input', updateHiddenInput);
+            container.addEventListener('change', updateHiddenInput);
+            updateHiddenInput();
+          });
+
+          document.querySelectorAll('[data-structured-array]').forEach((container) => {
+            if (container.dataset.structuredInitialized === 'true') {
+              return;
+            }
+            container.dataset.structuredInitialized = 'true';
+            const list = container.querySelector('[data-structured-array-list]');
+            const hiddenInput = container.querySelector('input[type="hidden"]');
+            const template = container.querySelector('template[data-structured-array-template]');
+
+            const updateOrderLabels = () => {
+              const items = Array.from(container.querySelectorAll('.structured-array-item'));
+              items.forEach((item, index) => {
+                const label = item.querySelector('[data-array-order-label]');
+                if (label) {
+                  label.textContent = '#'+ (index + 1);
+                }
+
+                const moveUpButton = item.querySelector('[data-action="move-up"]');
+                if (moveUpButton instanceof HTMLButtonElement) {
+                  moveUpButton.disabled = index === 0;
+                }
+
+                const moveDownButton = item.querySelector('[data-action="move-down"]');
+                if (moveDownButton instanceof HTMLButtonElement) {
+                  moveDownButton.disabled = index === items.length - 1;
+                }
+              });
+            };
+
+            const updateHiddenInput = () => {
+              if (!hiddenInput || !list) return;
+              const items = Array.from(list.querySelectorAll('.structured-array-item'));
+              const values = items.map((item) => readStructuredValue(item));
+              hiddenInput.value = JSON.stringify(values);
+
+              const emptyState = list.querySelector('[data-structured-empty]');
+              if (emptyState) {
+                emptyState.style.display = values.length === 0 ? 'block' : 'none';
+              }
+              updateOrderLabels();
+            };
+
+            if (typeof window.initializeDragSortable === 'function' && list) {
+              window.initializeDragSortable(list, {
+                itemSelector: '.structured-array-item',
+                handleSelector: '[data-action="drag-handle"]',
+                onUpdate: updateHiddenInput
+              });
+            }
+
+            container.addEventListener('click', (event) => {
+              const target = event.target;
+              if (!(target instanceof Element)) return;
+              const actionButton = target.closest('[data-action]');
+              if (!actionButton || actionButton.hasAttribute('disabled')) return;
+
+              const action = actionButton.getAttribute('data-action');
+
+              if (action === 'add-item') {
+                if (!list || !template) return;
+                const nextIndex = list.querySelectorAll('.structured-array-item').length;
+                const html = template.innerHTML.replace(/__INDEX__/g, String(nextIndex));
+                list.insertAdjacentHTML('beforeend', html);
+                if (typeof initializeTinyMCE === 'function') {
+                  initializeTinyMCE();
+                }
+                if (typeof window.initializeQuillEditors === 'function') {
+                  window.initializeQuillEditors();
+                }
+                if (typeof initializeMDXEditor === 'function') {
+                  initializeMDXEditor();
+                }
+                updateHiddenInput();
+                return;
+              }
+
+              const item = actionButton.closest('.structured-array-item');
+              if (!item || !list) return;
+
+              if (action === 'remove-item') {
+                item.remove();
+                updateHiddenInput();
+                return;
+              }
+
+              if (action === 'move-up') {
+                const previous = item.previousElementSibling;
+                if (previous) {
+                  list.insertBefore(item, previous);
+                  updateHiddenInput();
+                }
+                return;
+              }
+
+              if (action === 'move-down') {
+                const next = item.nextElementSibling;
+                if (next) {
+                  list.insertBefore(next, item);
+                  updateHiddenInput();
+                }
+              }
+            });
+
+            container.addEventListener('input', (event) => {
+              const target = event.target;
+              if (!(target instanceof Element)) return;
+              if (target.closest('[data-structured-array-list]')) {
+                updateHiddenInput();
+              }
+            });
+
+            container.addEventListener('change', (event) => {
+              const target = event.target;
+              if (!(target instanceof Element)) return;
+              if (target.closest('[data-structured-array-list]')) {
+                updateHiddenInput();
+              }
+            });
+
+            updateHiddenInput();
+          });
+        }
+
+        window.initializeStructuredFields = initializeStructuredFields;
+
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', initializeStructuredFields);
+        } else {
+          initializeStructuredFields();
+        }
+
+        document.addEventListener('htmx:afterSwap', function() {
+          setTimeout(initializeStructuredFields, 50);
+        });
+      } else if (typeof window.initializeStructuredFields === 'function') {
+        window.initializeStructuredFields();
+      }
+    </script>
+  `;
+}
+function getBlocksFieldScript() {
+  return `
+    ${getReadFieldValueScript()}
+    <script>
+      if (!window.__sonicBlocksFieldInit) {
+        window.__sonicBlocksFieldInit = true;
+
+        function initializeBlocksFields() {
+          document.querySelectorAll('.blocks-field').forEach((container) => {
+            if (container.dataset.blocksInitialized === 'true') {
+              return;
+            }
+
+            container.dataset.blocksInitialized = 'true';
+            const list = container.querySelector('[data-blocks-list]');
+            const hiddenInput = container.querySelector('input[type="hidden"]');
+            const typeSelect = container.querySelector('[data-role="block-type-select"]');
+            const discriminator = container.dataset.blocksDiscriminator || 'blockType';
+
+            const updateOrderLabels = () => {
+              const items = Array.from(container.querySelectorAll('.blocks-item'));
+              items.forEach((item, index) => {
+                const label = item.querySelector('[data-block-order-label]');
+                if (label) {
+                  label.textContent = '#'+ (index + 1);
+                }
+
+                const moveUpButton = item.querySelector('[data-action="move-up"]');
+                if (moveUpButton instanceof HTMLButtonElement) {
+                  moveUpButton.disabled = index === 0;
+                }
+
+                const moveDownButton = item.querySelector('[data-action="move-down"]');
+                if (moveDownButton instanceof HTMLButtonElement) {
+                  moveDownButton.disabled = index === items.length - 1;
+                }
+              });
+            };
+
+            const readFieldValue = window.sonicReadFieldValue;
+
+            const readBlockItem = (item) => {
+              if (item.dataset.blockRaw) {
+                try {
+                  return JSON.parse(item.dataset.blockRaw);
+                } catch (error) {
+                  return {};
+                }
+              }
+
+              const blockType = item.dataset.blockType;
+              const data = {};
+
+              item.querySelectorAll('.blocks-subfield').forEach((fieldWrapper) => {
+                const fieldName = fieldWrapper.dataset.blockField;
+                if (!fieldName) {
+                  return;
+                }
+                data[fieldName] = readFieldValue(fieldWrapper);
+              });
+
+              return { [discriminator]: blockType, ...data };
+            };
+
+            const updateHiddenInput = () => {
+              if (!hiddenInput || !list) return;
+              const items = Array.from(list.querySelectorAll('.blocks-item, [data-block-raw]'));
+              const blocksData = items.map((item) => readBlockItem(item));
+              hiddenInput.value = JSON.stringify(blocksData);
+
+              const emptyState = list.querySelector('[data-blocks-empty]');
+              if (emptyState) {
+                emptyState.style.display = blocksData.length === 0 ? 'block' : 'none';
+              }
+              updateOrderLabels();
+            };
+
+            const initializeEditors = () => {
+              if (typeof initializeTinyMCE === 'function') {
+                initializeTinyMCE();
+              }
+              if (typeof window.initializeQuillEditors === 'function') {
+                window.initializeQuillEditors();
+              }
+              if (typeof initializeMDXEditor === 'function') {
+                initializeMDXEditor();
+              }
+            };
+
+            if (typeof window.initializeDragSortable === 'function' && list) {
+              window.initializeDragSortable(list, {
+                itemSelector: '.blocks-item',
+                handleSelector: '[data-action="drag-handle"]',
+                onUpdate: updateHiddenInput
+              });
+            }
+
+            container.addEventListener('click', (event) => {
+              const target = event.target;
+              if (!(target instanceof Element)) return;
+              const actionButton = target.closest('[data-action]');
+              if (!actionButton) return;
+
+              if (actionButton.hasAttribute('disabled')) {
+                return;
+              }
+
+              const action = actionButton.getAttribute('data-action');
+              if (action === 'add-block') {
+                const blockType = typeSelect ? typeSelect.value : '';
+                if (!blockType || !list) return;
+                const template = container.querySelector('template[data-block-template="' + blockType + '"]');
+                if (!template) return;
+
+                const nextIndex = list.querySelectorAll('.blocks-item').length;
+                const html = template.innerHTML.replace(/__INDEX__/g, String(nextIndex));
+                list.insertAdjacentHTML('beforeend', html);
+                if (typeSelect) {
+                  typeSelect.value = '';
+                }
+                initializeEditors();
+                if (typeof window.initializeStructuredFields === 'function') {
+                  window.initializeStructuredFields();
+                }
+                updateHiddenInput();
+                return;
+              }
+
+              const item = actionButton.closest('.blocks-item');
+              if (!item || !list) return;
+
+              if (action === 'remove-block') {
+                item.remove();
+                updateHiddenInput();
+                return;
+              }
+
+              if (action === 'move-up') {
+                const previous = item.previousElementSibling;
+                if (previous) {
+                  list.insertBefore(item, previous);
+                  updateHiddenInput();
+                }
+                return;
+              }
+
+              if (action === 'move-down') {
+                const next = item.nextElementSibling;
+                if (next) {
+                  list.insertBefore(next, item);
+                  updateHiddenInput();
+                }
+              }
+            });
+
+            container.addEventListener('input', (event) => {
+              const target = event.target;
+              if (!(target instanceof Element)) return;
+              if (target.closest('[data-blocks-list]')) {
+                updateHiddenInput();
+              }
+            });
+
+            container.addEventListener('change', (event) => {
+              const target = event.target;
+              if (!(target instanceof Element)) return;
+              if (target.closest('[data-blocks-list]')) {
+                updateHiddenInput();
+              }
+            });
+
+            updateHiddenInput();
+          });
+        }
+
+        window.initializeBlocksFields = initializeBlocksFields;
+
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', initializeBlocksFields);
+        } else {
+          initializeBlocksFields();
+        }
+
+        document.addEventListener('htmx:afterSwap', function() {
+          setTimeout(initializeBlocksFields, 50);
+        });
+      } else if (typeof window.initializeBlocksFields === 'function') {
+        window.initializeBlocksFields();
+      }
+    </script>
+  `;
+}
+function escapeHtml2(text) {
+  if (typeof text !== "string") return String(text || "");
+  return text.replace(/[&<>"']/g, (char) => ({
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;"
+  })[char] || char);
+}
 
 // src/plugins/available/tinymce-plugin/index.ts
 var builder = PluginBuilder.create({
@@ -4573,17 +5549,24 @@ function renderContentFormPage(data) {
   const coreFieldsHTML = coreFields.sort((a, b) => a.field_order - b.field_order).map((field) => renderDynamicField(field, {
     value: getFieldValue(field.field_name),
     errors: data.validationErrors?.[field.field_name] || [],
-    pluginStatuses
+    pluginStatuses,
+    collectionId: data.collection.id,
+    contentId: data.id
+    // Pass content ID when editing
   }));
   const contentFieldsHTML = contentFields.sort((a, b) => a.field_order - b.field_order).map((field) => renderDynamicField(field, {
     value: getFieldValue(field.field_name),
     errors: data.validationErrors?.[field.field_name] || [],
-    pluginStatuses
+    pluginStatuses,
+    collectionId: data.collection.id,
+    contentId: data.id
   }));
   const metaFieldsHTML = metaFields.sort((a, b) => a.field_order - b.field_order).map((field) => renderDynamicField(field, {
     value: getFieldValue(field.field_name),
     errors: data.validationErrors?.[field.field_name] || [],
-    pluginStatuses
+    pluginStatuses,
+    collectionId: data.collection.id,
+    contentId: data.id
   }));
   const pageContent = `
     <div class="space-y-6">
@@ -4969,71 +5952,371 @@ function renderContentFormPage(data) {
           }
         }
 
-        // Close modal
-        closeMediaSelector();
-      }
+        // Close modal
+        closeMediaSelector();
+      }
+
+      function clearMediaField(fieldId) {
+        const hiddenInput = document.getElementById(fieldId);
+        const preview = document.getElementById(fieldId + '-preview');
+
+        if (hiddenInput) {
+          hiddenInput.value = '';
+        }
+
+        if (preview) {
+          // Clear all children if it's a grid, or hide it
+          if (preview.classList.contains('media-preview-grid')) {
+            preview.innerHTML = '';
+          }
+          preview.classList.add('hidden');
+        }
+      }
+
+      // Global function to remove a single media from multiple selection
+      window.removeMediaFromMultiple = function(fieldId, urlToRemove) {
+        const hiddenInput = document.getElementById(fieldId);
+        if (!hiddenInput) return;
+
+        const values = hiddenInput.value.split(',').filter(url => url !== urlToRemove);
+        hiddenInput.value = values.join(',');
+
+        // Remove preview item
+        const previewItem = document.querySelector(\`[data-url="\${urlToRemove}"]\`);
+        if (previewItem) {
+          previewItem.remove();
+        }
+
+        // Hide preview grid if empty
+        if (values.length === 0) {
+          const preview = document.getElementById(fieldId + '-preview');
+          if (preview) {
+            preview.classList.add('hidden');
+          }
+        }
+      };
+
+      // Global function called by media selector buttons
+      window.selectMediaFile = function(mediaId, mediaUrl, filename) {
+        if (!currentMediaFieldId) {
+          console.error('No field ID set for media selection');
+          return;
+        }
+
+        const fieldId = currentMediaFieldId;
+
+        // Set the hidden input value to the media URL (not ID)
+        const hiddenInput = document.getElementById(fieldId);
+        if (hiddenInput) {
+          hiddenInput.value = mediaUrl;
+        }
+
+        // Update the preview
+        const preview = document.getElementById(fieldId + '-preview');
+        if (preview) {
+          preview.innerHTML = \`<img src="\${mediaUrl}" alt="\${filename}" class="w-32 h-32 object-cover rounded-lg border border-white/20">\`;
+          preview.classList.remove('hidden');
+        }
+
+        // Show the remove button by finding the media actions container and updating it
+        const mediaField = hiddenInput?.closest('.media-field-container');
+        if (mediaField) {
+          const actionsDiv = mediaField.querySelector('.media-actions');
+          if (actionsDiv && !actionsDiv.querySelector('button:has-text("Remove")')) {
+            const removeBtn = document.createElement('button');
+            removeBtn.type = 'button';
+            removeBtn.onclick = () => clearMediaField(fieldId);
+            removeBtn.className = 'inline-flex items-center px-4 py-2 bg-red-600 text-white rounded-xl hover:bg-red-700 transition-all';
+            removeBtn.textContent = 'Remove';
+            actionsDiv.appendChild(removeBtn);
+          }
+        }
+
+        // DON'T close the modal - let user click OK button
+        // Visual feedback: highlight the selected item
+        document.querySelectorAll('#media-selector-grid [data-media-id]').forEach(el => {
+          el.classList.remove('ring-2', 'ring-lime-500', 'dark:ring-lime-400');
+        });
+        const selectedItem = document.querySelector(\`#media-selector-grid [data-media-id="\${mediaId}"]\`);
+        if (selectedItem) {
+          selectedItem.classList.add('ring-2', 'ring-lime-500', 'dark:ring-lime-400');
+        }
+      };
+
+      function setMediaField(fieldId, mediaUrl) {
+        document.getElementById(fieldId).value = mediaUrl;
+        const preview = document.getElementById(fieldId + '-preview');
+        preview.innerHTML = \`<img src="\${mediaUrl}" alt="Selected media" class="w-32 h-32 object-cover rounded-lg ring-1 ring-zinc-950/10 dark:ring-white/10">\`;
+        preview.classList.remove('hidden');
+
+        // Close modal
+        document.querySelector('.fixed.inset-0')?.remove();
+      }
+
+      // Reference field functions
+      let currentReferenceFieldId = null;
+      let referenceSearchTimeout = null;
+
+      function getReferenceContainer(fieldId) {
+        const input = document.getElementById(fieldId);
+        return input ? input.closest('[data-reference-field]') : null;
+      }
+
+      function getReferenceCollections(container) {
+        if (!container) return [];
+        const rawCollections = container.dataset.referenceCollections || '';
+        const collections = rawCollections
+          .split(',')
+          .map((value) => value.trim())
+          .filter(Boolean);
+        if (collections.length > 0) {
+          return collections;
+        }
+        const singleCollection = container.dataset.referenceCollection;
+        return singleCollection ? [singleCollection] : [];
+      }
+
+      async function fetchReferenceItems(collections, search = '', limit = 20) {
+        const params = new URLSearchParams({ limit: String(limit) });
+        collections.forEach((collection) => params.append('collection', collection));
+        if (search) {
+          params.set('search', search);
+        }
+        const response = await fetch('/admin/api/references?' + params.toString());
+        if (!response.ok) {
+          throw new Error('Failed to load references');
+        }
+        const data = await response.json();
+        return data?.data || [];
+      }
+
+      async function fetchReferenceById(collections, id) {
+        if (!id) return null;
+        const params = new URLSearchParams({ id });
+        collections.forEach((collection) => params.append('collection', collection));
+        const response = await fetch('/admin/api/references?' + params.toString());
+        if (!response.ok) {
+          return null;
+        }
+        const data = await response.json();
+        return data?.data || null;
+      }
+
+      function renderReferenceDisplay(container, item, fallbackMessage = 'No reference selected.') {
+        const display = container.querySelector('[data-reference-display]');
+        const removeButton = container.querySelector('[data-reference-clear]');
+        if (!display) return;
+
+        display.innerHTML = '';
+
+        if (!item) {
+          display.textContent = fallbackMessage;
+          if (removeButton) {
+            removeButton.disabled = true;
+          }
+          return;
+        }
+
+        const title = item.title || item.slug || item.id || 'Untitled';
+        const titleEl = document.createElement('div');
+        titleEl.className = 'font-medium text-zinc-900 dark:text-white';
+        titleEl.textContent = title;
+
+        display.appendChild(titleEl);
+
+        const metaRow = document.createElement('div');
+        metaRow.className = 'mt-1 flex flex-wrap items-center gap-2 text-xs text-zinc-500 dark:text-zinc-400';
+
+        if (item.collection?.display_name || item.collection?.name) {
+          const collectionLabel = document.createElement('span');
+          collectionLabel.className = 'inline-flex items-center rounded-full bg-zinc-100 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-zinc-600 dark:bg-white/10 dark:text-zinc-200';
+          collectionLabel.textContent = item.collection.display_name || item.collection.name;
+          metaRow.appendChild(collectionLabel);
+        }
+
+        if (item.slug) {
+          const slugEl = document.createElement('span');
+          slugEl.textContent = item.slug;
+          metaRow.appendChild(slugEl);
+        }
+
+        if (metaRow.childElementCount > 0) {
+          display.appendChild(metaRow);
+        }
+
+        if (removeButton) {
+          removeButton.disabled = false;
+        }
+      }
+
+      function updateReferenceField(fieldId, item) {
+        const input = document.getElementById(fieldId);
+        const container = getReferenceContainer(fieldId);
+        if (!input || !container) return;
+
+        input.value = item?.id || '';
+        renderReferenceDisplay(container, item, 'No reference selected.');
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        input.dispatchEvent(new Event('change', { bubbles: true }));
+      }
+
+      function clearReferenceField(fieldId) {
+        updateReferenceField(fieldId, null);
+      }
+
+      function closeReferenceSelector() {
+        const modal = document.getElementById('reference-selector-modal');
+        if (modal) {
+          modal.remove();
+        }
+        currentReferenceFieldId = null;
+      }
+
+      function openReferenceSelector(fieldId) {
+        const container = getReferenceContainer(fieldId);
+        const collections = getReferenceCollections(container);
+        if (!container || collections.length === 0) {
+          console.error('Reference collection is missing for field', fieldId);
+          return;
+        }
+
+        currentReferenceFieldId = fieldId;
+
+        const modal = document.createElement('div');
+        modal.className = 'fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50';
+        modal.id = 'reference-selector-modal';
+        modal.innerHTML = \`
+          <div class="rounded-xl bg-white dark:bg-zinc-900 shadow-xl ring-1 ring-zinc-950/5 dark:ring-white/10 p-6 w-full max-w-3xl max-h-[90vh] overflow-y-auto">
+            <div class="flex items-center justify-between gap-3">
+              <h3 class="text-lg font-semibold text-zinc-950 dark:text-white">Select Reference</h3>
+              <button
+                type="button"
+                onclick="closeReferenceSelector()"
+                class="rounded-md text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"
+                aria-label="Close"
+              >
+                \u2715
+              </button>
+            </div>
+            <div class="mt-4">
+              <input
+                type="search"
+                id="reference-search-input"
+                placeholder="Search by title or slug..."
+                class="w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 dark:border-white/10 dark:bg-zinc-900 dark:text-white"
+              >
+            </div>
+            <div id="reference-results" class="mt-4 space-y-2"></div>
+            <div class="mt-4 flex justify-end">
+              <button
+                type="button"
+                onclick="closeReferenceSelector()"
+                class="rounded-lg bg-zinc-950 dark:bg-white px-4 py-2 text-sm font-semibold text-white dark:text-zinc-950 hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        \`;
+
+        document.body.appendChild(modal);
+
+        const resultsContainer = modal.querySelector('#reference-results');
+        const searchInput = modal.querySelector('#reference-search-input');
+
+        const renderResults = (items) => {
+          resultsContainer.innerHTML = '';
+          if (!items || items.length === 0) {
+            resultsContainer.innerHTML = '<div class="rounded-lg border border-dashed border-zinc-200 p-4 text-sm text-zinc-500 dark:border-white/10 dark:text-zinc-400">No items found.</div>';
+            return;
+          }
+
+          const selectedId = document.getElementById(fieldId)?.value;
+
+          items.forEach((item) => {
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'w-full text-left rounded-lg border border-zinc-200 px-4 py-3 text-sm text-zinc-700 hover:bg-zinc-50 dark:border-white/10 dark:text-zinc-200 dark:hover:bg-white/5';
+            if (item.id === selectedId) {
+              button.classList.add('ring-2', 'ring-cyan-500', 'dark:ring-cyan-400');
+            }
+
+            const title = item.title || item.slug || item.id || 'Untitled';
+            const titleEl = document.createElement('div');
+            titleEl.className = 'font-medium text-zinc-900 dark:text-white';
+            titleEl.textContent = title;
 
-      function clearMediaField(fieldId) {
-        document.getElementById(fieldId).value = '';
-        document.getElementById(fieldId + '-preview').classList.add('hidden');
-      }
+            button.appendChild(titleEl);
 
-      // Global function called by media selector buttons
-      window.selectMediaFile = function(mediaId, mediaUrl, filename) {
-        if (!currentMediaFieldId) {
-          console.error('No field ID set for media selection');
-          return;
-        }
+            const metaRow = document.createElement('div');
+            metaRow.className = 'mt-1 flex flex-wrap items-center gap-2 text-xs text-zinc-500 dark:text-zinc-400';
 
-        const fieldId = currentMediaFieldId;
+            if (item.collection?.display_name || item.collection?.name) {
+              const collectionLabel = document.createElement('span');
+              collectionLabel.className = 'inline-flex items-center rounded-full bg-zinc-100 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-zinc-600 dark:bg-white/10 dark:text-zinc-200';
+              collectionLabel.textContent = item.collection.display_name || item.collection.name;
+              metaRow.appendChild(collectionLabel);
+            }
 
-        // Set the hidden input value to the media URL (not ID)
-        const hiddenInput = document.getElementById(fieldId);
-        if (hiddenInput) {
-          hiddenInput.value = mediaUrl;
-        }
+            if (item.slug) {
+              const slugEl = document.createElement('span');
+              slugEl.textContent = item.slug;
+              metaRow.appendChild(slugEl);
+            }
 
-        // Update the preview
-        const preview = document.getElementById(fieldId + '-preview');
-        if (preview) {
-          preview.innerHTML = \`<img src="\${mediaUrl}" alt="\${filename}" class="w-32 h-32 object-cover rounded-lg border border-white/20">\`;
-          preview.classList.remove('hidden');
-        }
+            if (metaRow.childElementCount > 0) {
+              button.appendChild(metaRow);
+            }
 
-        // Show the remove button by finding the media actions container and updating it
-        const mediaField = hiddenInput?.closest('.media-field-container');
-        if (mediaField) {
-          const actionsDiv = mediaField.querySelector('.media-actions');
-          if (actionsDiv && !actionsDiv.querySelector('button:has-text("Remove")')) {
-            const removeBtn = document.createElement('button');
-            removeBtn.type = 'button';
-            removeBtn.onclick = () => clearMediaField(fieldId);
-            removeBtn.className = 'inline-flex items-center px-4 py-2 bg-red-600 text-white rounded-xl hover:bg-red-700 transition-all';
-            removeBtn.textContent = 'Remove';
-            actionsDiv.appendChild(removeBtn);
+            button.addEventListener('click', () => {
+              updateReferenceField(fieldId, item);
+              closeReferenceSelector();
+            });
+
+            resultsContainer.appendChild(button);
+          });
+        };
+
+        const loadResults = async (searchValue = '') => {
+          try {
+            const items = await fetchReferenceItems(collections, searchValue);
+            renderResults(items);
+          } catch (error) {
+            resultsContainer.innerHTML = '<div class="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-200">Failed to load references.</div>';
           }
-        }
+        };
 
-        // DON'T close the modal - let user click OK button
-        // Visual feedback: highlight the selected item
-        document.querySelectorAll('#media-selector-grid [data-media-id]').forEach(el => {
-          el.classList.remove('ring-2', 'ring-lime-500', 'dark:ring-lime-400');
+        loadResults();
+
+        searchInput.addEventListener('input', () => {
+          if (referenceSearchTimeout) {
+            clearTimeout(referenceSearchTimeout);
+          }
+          referenceSearchTimeout = setTimeout(() => {
+            loadResults(searchInput.value.trim());
+          }, 250);
         });
-        const selectedItem = document.querySelector(\`#media-selector-grid [data-media-id="\${mediaId}"]\`);
-        if (selectedItem) {
-          selectedItem.classList.add('ring-2', 'ring-lime-500', 'dark:ring-lime-400');
-        }
-      };
+      }
 
-      function setMediaField(fieldId, mediaUrl) {
-        document.getElementById(fieldId).value = mediaUrl;
-        const preview = document.getElementById(fieldId + '-preview');
-        preview.innerHTML = \`<img src="\${mediaUrl}" alt="Selected media" class="w-32 h-32 object-cover rounded-lg ring-1 ring-zinc-950/10 dark:ring-white/10">\`;
-        preview.classList.remove('hidden');
+      document.addEventListener('DOMContentLoaded', () => {
+        document.querySelectorAll('[data-reference-field]').forEach(async (container) => {
+          const input = container.querySelector('input[type="hidden"]');
+          const collections = getReferenceCollections(container);
+          if (!input || collections.length === 0) return;
 
-        // Close modal
-        document.querySelector('.fixed.inset-0')?.remove();
-      }
+          if (!input.value) {
+            renderReferenceDisplay(container, null, 'No reference selected.');
+            return;
+          }
+
+          const item = await fetchReferenceById(collections, input.value);
+          if (item) {
+            renderReferenceDisplay(container, item);
+          } else {
+            renderReferenceDisplay(container, null, 'Reference not found.');
+          }
+        });
+      });
 
       // Custom select options
       function addCustomOption(input, selectId) {
@@ -5200,7 +6483,7 @@ function renderContentListPage(data) {
   if (data.search) urlParams.set("search", data.search);
   if (data.page && data.page !== 1) urlParams.set("page", data.page.toString());
   const currentParams = urlParams.toString();
-  const hasActiveFilters = data.modelName !== "all" || data.status !== "all" || !!data.search;
+  data.modelName !== "all" || data.status !== "all" || !!data.search;
   const filterBarData = {
     filters: [
       {
@@ -5230,6 +6513,11 @@ function renderContentListPage(data) {
       }
     ],
     actions: [
+      {
+        label: "Advanced Search",
+        className: "btn-primary",
+        onclick: "openAdvancedSearch()"
+      },
       {
         label: "Refresh",
         className: "btn-secondary",
@@ -5381,12 +6669,57 @@ function renderContentListPage(data) {
         <div class="relative bg-white/80 dark:bg-zinc-900/80 backdrop-blur-xl shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 rounded-xl">
           <div class="px-6 py-5">
             <div class="flex items-center justify-between">
-              <div class="flex items-center space-x-4">
-                <!-- Search Input -->
+              <div class="flex items-center space-x-4 flex-1">
+                <!-- Model Filter -->
+                <div>
+                  <label class="block text-sm font-medium text-zinc-950 dark:text-white mb-2">Model</label>
+                  <div class="grid grid-cols-1">
+                    <select
+                      name="model"
+                      onchange="updateContentFilters('model', this.value)"
+                      class="col-start-1 row-start-1 w-full appearance-none rounded-lg bg-white/5 dark:bg-white/5 py-2 pl-3 pr-8 text-sm 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 min-w-40"
+                    >
+                      <option value="all" ${data.modelName === "all" ? "selected" : ""}>All Models</option>
+                      ${data.models.map((model) => `
+                        <option value="${model.name}" ${data.modelName === model.name ? "selected" : ""}>
+                          ${model.displayName}
+                        </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">
+                      <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" />
+                    </svg>
+                  </div>
+                </div>
+
+                <!-- Status Filter -->
                 <div>
+                  <label class="block text-sm font-medium text-zinc-950 dark:text-white mb-2">Status</label>
+                  <div class="grid grid-cols-1">
+                    <select
+                      name="status"
+                      onchange="updateContentFilters('status', this.value)"
+                      class="col-start-1 row-start-1 w-full appearance-none rounded-lg bg-white/5 dark:bg-white/5 py-2 pl-3 pr-8 text-sm 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 min-w-40"
+                    >
+                      <option value="all" ${data.status === "all" ? "selected" : ""}>All Status</option>
+                      <option value="draft" ${data.status === "draft" ? "selected" : ""}>Draft</option>
+                      <option value="review" ${data.status === "review" ? "selected" : ""}>Under Review</option>
+                      <option value="scheduled" ${data.status === "scheduled" ? "selected" : ""}>Scheduled</option>
+                      <option value="published" ${data.status === "published" ? "selected" : ""}>Published</option>
+                      <option value="archived" ${data.status === "archived" ? "selected" : ""}>Archived</option>
+                      <option value="deleted" ${data.status === "deleted" ? "selected" : ""}>Deleted</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" />
+                    </svg>
+                  </div>
+                </div>
+
+                <!-- Search Input -->
+                <div class="flex-1 max-w-md">
                   <label class="block text-sm font-medium text-zinc-950 dark:text-white mb-2">Search</label>
                   <form onsubmit="performContentSearch(event)" class="flex items-center space-x-2">
-                    <div class="relative group">
+                    <div class="relative group flex-1">
                       <input
                         type="text"
                         name="search"
@@ -5394,7 +6727,7 @@ function renderContentListPage(data) {
                         value="${data.search || ""}"
                         oninput="toggleContentClearButton()"
                         placeholder="Search content..."
-                        class="rounded-full bg-white/90 dark:bg-zinc-800/90 backdrop-blur-sm px-4 py-2.5 pl-11 pr-10 text-sm w-72 text-zinc-950 dark:text-white border-2 border-cyan-200/50 dark:border-cyan-700/50 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus:outline-none focus:border-cyan-500 dark:focus:border-cyan-400 focus:bg-white dark:focus:bg-zinc-800 focus:shadow-lg focus:shadow-cyan-500/20 dark:focus:shadow-cyan-400/20 transition-all duration-300"
+                        class="w-full rounded-full bg-white/90 dark:bg-zinc-800/90 backdrop-blur-sm px-4 py-2.5 pl-11 pr-10 text-sm text-zinc-950 dark:text-white border-2 border-cyan-200/50 dark:border-cyan-700/50 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus:outline-none focus:border-cyan-500 dark:focus:border-cyan-400 focus:bg-white dark:focus:bg-zinc-800 focus:shadow-lg focus:shadow-cyan-500/20 dark:focus:shadow-cyan-400/20 transition-all duration-300"
                       >
                       <div class="absolute left-3.5 top-2.5 flex items-center justify-center w-5 h-5 rounded-full bg-gradient-to-br from-cyan-400 to-blue-500 dark:from-cyan-300 dark:to-blue-400 opacity-90 group-focus-within:opacity-100 transition-opacity">
                         <svg class="h-3 w-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
@@ -5466,57 +6799,6 @@ function renderContentListPage(data) {
                     }
                   </script>
                 </div>
-
-                ${filterBarData.filters.map((filter) => {
-    const selectedOption = filter.options.find((opt) => opt.selected);
-    const selectedColor = selectedOption?.color || "cyan";
-    const colorMap = {
-      "cyan": "bg-cyan-400 dark:bg-cyan-400",
-      "lime": "bg-lime-400 dark:bg-lime-400",
-      "pink": "bg-pink-400 dark:bg-pink-400",
-      "purple": "bg-purple-400 dark:bg-purple-400",
-      "amber": "bg-amber-400 dark:bg-amber-400",
-      "zinc": "bg-zinc-400 dark:bg-zinc-400"
-    };
-    return `
-                  <div>
-                    <label class="block text-sm/6 font-medium text-zinc-950 dark:text-white">${filter.label}</label>
-                    <div class="mt-2 grid grid-cols-1">
-                      <div class="col-start-1 row-start-1 flex items-center gap-3 pl-3 pr-8 pointer-events-none">
-                        ${filter.name === "status" ? `<span class="inline-block size-2 shrink-0 rounded-full border border-transparent ${colorMap[selectedColor]}"></span>` : ""}
-                      </div>
-                      <select
-                        name="${filter.name}"
-                        onchange="updateContentFilters('${filter.name}', this.value)"
-                        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>
-                        `).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">
-                        <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" />
-                      </svg>
-                    </div>
-                  </div>
-                `;
-  }).join("")}
-
-                <!-- Clear Filters Button -->
-                ${hasActiveFilters ? `
-                  <div>
-                    <label class="block text-sm/6 font-medium text-zinc-950 dark:text-white mb-2">&nbsp;</label>
-                    <button
-                      onclick="clearAllFilters()"
-                      class="inline-flex items-center gap-x-1.5 px-3 py-2 bg-pink-50 dark:bg-pink-500/10 text-pink-700 dark:text-pink-300 text-sm font-medium rounded-md ring-1 ring-inset ring-pink-600/20 dark:ring-pink-500/20 hover:bg-pink-100 dark:hover:bg-pink-500/20 transition-colors"
-                    >
-                      <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
-                      </svg>
-                      Clear Filters
-                    </button>
-                  </div>
-                ` : ""}
               </div>
               <div class="flex items-center gap-x-3">
                 <span class="text-sm/6 font-medium text-zinc-700 dark:text-zinc-300 px-3 py-1.5 rounded-full bg-white/60 dark:bg-zinc-800/60 backdrop-blur-sm">${data.totalItems} ${data.totalItems === 1 ? "item" : "items"}</span>
@@ -5760,66 +7042,352 @@ function renderContentListPage(data) {
         const menu = document.getElementById('bulk-actions-menu');
         menu.classList.add('hidden');
 
-        fetch('/admin/content/bulk-action', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify({
-            action: currentBulkAction,
-            ids: currentSelectedIds
-          })
-        })
-        .then(res => res.json())
-        .then(data => {
-          if (data.success) {
-            location.reload();
-          } else {
-            alert('Error: ' + (data.error || 'Unknown error'));
+        fetch('/admin/content/bulk-action', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            action: currentBulkAction,
+            ids: currentSelectedIds
+          })
+        })
+        .then(res => res.json())
+        .then(data => {
+          if (data.success) {
+            location.reload();
+          } else {
+            alert('Error: ' + (data.error || 'Unknown error'));
+          }
+        })
+        .catch(err => {
+          console.error('Bulk action error:', err);
+          alert('Failed to perform bulk action');
+        })
+        .finally(() => {
+          // Clear context
+          currentBulkAction = null;
+          currentSelectedIds = [];
+        });
+      }
+
+      // Helper to get action text for display
+      function getActionText(action) {
+        const actionCount = currentSelectedIds.length;
+        switch(action) {
+          case 'publish':
+            return \`publish \${actionCount} item\${actionCount > 1 ? 's' : ''}\`;
+          case 'draft':
+            return \`move \${actionCount} item\${actionCount > 1 ? 's' : ''} to draft\`;
+          case 'delete':
+            return \`delete \${actionCount} item\${actionCount > 1 ? 's' : ''}\`;
+          default:
+            return \`perform action on \${actionCount} item\${actionCount > 1 ? 's' : ''}\`;
+        }
+      }
+
+    </script>
+
+    <!-- Confirmation Dialog for Bulk Actions -->
+    ${renderConfirmationDialog({
+    id: "bulk-action-confirm",
+    title: "Confirm Bulk Action",
+    message: "Are you sure you want to perform this action? This operation will affect multiple items.",
+    confirmText: "Confirm",
+    cancelText: "Cancel",
+    confirmClass: "bg-blue-500 hover:bg-blue-400",
+    iconColor: "blue",
+    onConfirm: "executeBulkAction()"
+  })}
+
+    <!-- Confirmation Dialog Script -->
+    ${getConfirmationDialogScript()}
+
+    <!-- Advanced Search Modal -->
+    <div id="advancedSearchModal" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+      <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+        <!-- Background overlay -->
+        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="closeAdvancedSearch()"></div>
+
+        <!-- Modal panel -->
+        <div class="inline-block align-bottom bg-white dark:bg-zinc-900 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
+          <div class="bg-white dark:bg-zinc-900 px-4 pt-5 pb-4 sm:p-6">
+            <!-- Header -->
+            <div class="flex items-center justify-between mb-4">
+              <h3 class="text-lg font-semibold text-zinc-950 dark:text-white" id="modal-title">
+                \u{1F50D} Advanced Search
+              </h3>
+              <button onclick="closeAdvancedSearch()" class="text-zinc-400 hover:text-zinc-500 dark:hover:text-zinc-300">
+                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <!-- Search Form -->
+            <form id="advancedSearchForm" class="space-y-4">
+              <!-- Search Input -->
+              <div>
+                <label class="block text-sm font-medium text-zinc-950 dark:text-white mb-2">Search Query</label>
+                <div class="relative">
+                  <input
+                    type="text"
+                    id="searchQuery"
+                    name="query"
+                    placeholder="Enter your search query..."
+                    class="w-full rounded-lg bg-white dark:bg-white/5 px-4 py-3 text-sm text-zinc-950 dark:text-white ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 focus:ring-2 focus:ring-indigo-500"
+                    autocomplete="off"
+                  />
+                  <div id="searchSuggestions" class="hidden absolute z-10 w-full mt-1 bg-white dark:bg-zinc-800 rounded-lg shadow-lg border border-zinc-200 dark:border-zinc-700 max-h-60 overflow-y-auto"></div>
+                </div>
+              </div>
+
+              <!-- Mode Toggle -->
+              <div>
+                <label class="block text-sm font-medium text-zinc-950 dark:text-white mb-2">Search Mode</label>
+                <div class="flex gap-4">
+                  <label class="flex items-center">
+                    <input type="radio" name="mode" value="ai" checked class="mr-2">
+                    <span class="text-sm text-zinc-950 dark:text-white">\u{1F916} AI Search (Semantic)</span>
+                  </label>
+                  <label class="flex items-center">
+                    <input type="radio" name="mode" value="keyword" class="mr-2">
+                    <span class="text-sm text-zinc-950 dark:text-white">\u{1F524} Keyword Search</span>
+                  </label>
+                </div>
+              </div>
+
+              <!-- Filters -->
+              <div class="border-t border-zinc-200 dark:border-zinc-800 pt-4">
+                <h4 class="text-sm font-semibold text-zinc-950 dark:text-white mb-3">Filters</h4>
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <!-- Collection Filter -->
+                  <div>
+                    <label class="block text-sm font-medium text-zinc-950 dark:text-white mb-2">Collections</label>
+                    <select
+                      id="filterCollections"
+                      name="collections"
+                      multiple
+                      class="w-full rounded-lg bg-white dark:bg-white/5 px-3 py-2 text-sm text-zinc-950 dark:text-white ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10"
+                      size="4"
+                    >
+                      <option value="">All Collections</option>
+                      ${data.models.map(
+    (model) => `
+                          <option value="${model.name}">${model.displayName}</option>
+                        `
+  ).join("")}
+                    </select>
+                    <p class="text-xs text-zinc-500 dark:text-zinc-400 mt-1">Hold Ctrl/Cmd to select multiple</p>
+                  </div>
+
+                  <!-- Status Filter -->
+                  <div>
+                    <label class="block text-sm font-medium text-zinc-950 dark:text-white mb-2">Status</label>
+                    <select
+                      id="filterStatus"
+                      name="status"
+                      multiple
+                      class="w-full rounded-lg bg-white dark:bg-white/5 px-3 py-2 text-sm text-zinc-950 dark:text-white ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10"
+                      size="4"
+                    >
+                      <option value="published">Published</option>
+                      <option value="draft">Draft</option>
+                      <option value="review">Under Review</option>
+                      <option value="scheduled">Scheduled</option>
+                      <option value="archived">Archived</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Actions -->
+              <div class="flex items-center justify-end gap-3 pt-4 border-t border-zinc-200 dark:border-zinc-800">
+                <button
+                  type="button"
+                  onclick="closeAdvancedSearch()"
+                  class="inline-flex items-center justify-center rounded-lg bg-white dark:bg-zinc-800 px-4 py-2 text-sm font-semibold text-zinc-950 dark:text-white ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 hover:bg-zinc-50 dark:hover:bg-zinc-700"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  class="inline-flex items-center justify-center rounded-lg bg-indigo-600 text-white px-6 py-2.5 text-sm font-semibold hover:bg-indigo-500 shadow-sm"
+                >
+                  Search
+                </button>
+              </div>
+            </form>
+          </div>
+
+          <!-- Results Area -->
+          <div id="searchResults" class="hidden px-4 pb-4 sm:px-6">
+            <div class="border-t border-zinc-200 dark:border-zinc-800 pt-4">
+              <div id="searchResultsContent" class="space-y-3"></div>
+              <div id="searchResultsPagination" class="mt-4 flex items-center justify-between"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      // Open modal
+      function openAdvancedSearch() {
+        document.getElementById('advancedSearchModal').classList.remove('hidden');
+        document.getElementById('searchQuery').focus();
+      }
+
+      // Close modal
+      function closeAdvancedSearch() {
+        document.getElementById('advancedSearchModal').classList.add('hidden');
+        document.getElementById('searchResults').classList.add('hidden');
+      }
+
+      // Autocomplete
+      let autocompleteTimeout;
+      const searchQueryInput = document.getElementById('searchQuery');
+      if (searchQueryInput) {
+        searchQueryInput.addEventListener('input', (e) => {
+          const query = e.target.value.trim();
+          const suggestionsDiv = document.getElementById('searchSuggestions');
+          
+          clearTimeout(autocompleteTimeout);
+          
+          if (query.length < 2) {
+            suggestionsDiv.classList.add('hidden');
+            return;
+          }
+
+          autocompleteTimeout = setTimeout(async () => {
+            try {
+              const res = await fetch(\`/api/search/suggest?q=\${encodeURIComponent(query)}\`);
+              const { data } = await res.json();
+              
+              if (data && data.length > 0) {
+                suggestionsDiv.innerHTML = data.map(s => \`
+                  <div class="px-4 py-2 hover:bg-zinc-100 dark:hover:bg-zinc-700 cursor-pointer" onclick="selectSuggestion('\${s.replace(/'/g, "\\'")}')">\${s}</div>
+                \`).join('');
+                suggestionsDiv.classList.remove('hidden');
+              } else {
+                suggestionsDiv.classList.add('hidden');
+              }
+            } catch (error) {
+              console.error('Autocomplete error:', error);
+            }
+          }, 300);
+        });
+      }
+
+      function selectSuggestion(suggestion) {
+        document.getElementById('searchQuery').value = suggestion;
+        document.getElementById('searchSuggestions').classList.add('hidden');
+      }
+
+      // Hide suggestions when clicking outside
+      document.addEventListener('click', (e) => {
+        const suggestionsDiv = document.getElementById('searchSuggestions');
+        if (!e.target.closest('#searchQuery') && !e.target.closest('#searchSuggestions')) {
+          suggestionsDiv.classList.add('hidden');
+        }
+      });
+
+      // Form submission
+      const advancedSearchForm = document.getElementById('advancedSearchForm');
+      if (advancedSearchForm) {
+        advancedSearchForm.addEventListener('submit', async (e) => {
+          e.preventDefault();
+          
+          const formData = new FormData(e.target);
+          const query = formData.get('query');
+          const mode = formData.get('mode') || 'ai';
+          
+          // Build filters
+          const filters = {};
+          
+          const collections = Array.from(formData.getAll('collections')).filter(c => c !== '');
+          if (collections.length > 0) {
+            // Need to convert collection names to IDs - for now, pass names
+            filters.collections = collections;
+          }
+          
+          const status = Array.from(formData.getAll('status'));
+          if (status.length > 0) {
+            filters.status = status;
+          }
+          
+          const dateStart = formData.get('date_start');
+          const dateEnd = formData.get('date_end');
+          if (dateStart || dateEnd) {
+            filters.dateRange = {
+              start: dateStart ? new Date(dateStart) : null,
+              end: dateEnd ? new Date(dateEnd) : null,
+              field: 'created_at'
+            };
+          }
+
+          // Execute search
+          try {
+            const res = await fetch('/api/search', {
+              method: 'POST',
+              headers: {'Content-Type': 'application/json'},
+              body: JSON.stringify({
+                query,
+                mode,
+                filters,
+                limit: 20
+              })
+            });
+
+            const { data } = await res.json();
+            
+            if (data && data.results) {
+              displaySearchResults(data);
+            }
+          } catch (error) {
+            console.error('Search error:', error);
+            alert('Search failed. Please try again.');
           }
-        })
-        .catch(err => {
-          console.error('Bulk action error:', err);
-          alert('Failed to perform bulk action');
-        })
-        .finally(() => {
-          // Clear context
-          currentBulkAction = null;
-          currentSelectedIds = [];
         });
       }
 
-      // Helper to get action text for display
-      function getActionText(action) {
-        const actionCount = currentSelectedIds.length;
-        switch(action) {
-          case 'publish':
-            return \`publish \${actionCount} item\${actionCount > 1 ? 's' : ''}\`;
-          case 'draft':
-            return \`move \${actionCount} item\${actionCount > 1 ? 's' : ''} to draft\`;
-          case 'delete':
-            return \`delete \${actionCount} item\${actionCount > 1 ? 's' : ''}\`;
-          default:
-            return \`perform action on \${actionCount} item\${actionCount > 1 ? 's' : ''}\`;
+      function displaySearchResults(searchData) {
+        const resultsDiv = document.getElementById('searchResultsContent');
+        const resultsSection = document.getElementById('searchResults');
+        
+        if (searchData.results.length === 0) {
+          resultsDiv.innerHTML = '<p class="text-sm text-zinc-500 dark:text-zinc-400">No results found.</p>';
+        } else {
+          resultsDiv.innerHTML = searchData.results.map(result => \`
+            <div class="p-4 rounded-lg border border-zinc-200 dark:border-zinc-800 hover:bg-zinc-50 dark:hover:bg-zinc-800">
+              <div class="flex items-start justify-between">
+                <div class="flex-1">
+                  <h4 class="text-sm font-semibold text-zinc-950 dark:text-white mb-1">
+                    <a href="/admin/content/\${result.id}/edit" class="hover:text-indigo-600 dark:hover:text-indigo-400">\${result.title || 'Untitled'}</a>
+                  </h4>
+                  <p class="text-xs text-zinc-500 dark:text-zinc-400 mb-2">
+                    \${result.collection_name} \u2022 \${new Date(result.created_at).toLocaleDateString()}
+                    \${result.relevance_score ? \` \u2022 Relevance: \${(result.relevance_score * 100).toFixed(0)}%\` : ''}
+                  </p>
+                  \${result.snippet ? \`<p class="text-sm text-zinc-600 dark:text-zinc-400">\${result.snippet}</p>\` : ''}
+                </div>
+                <div class="ml-4">
+                  <span class="px-2 py-1 text-xs rounded-full \${result.status === 'published' ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300' : 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300'}">\${result.status}</span>
+                </div>
+              </div>
+            </div>
+          \`).join('');
         }
+        
+        resultsSection.classList.remove('hidden');
+        resultsSection.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
       }
 
+      // Make functions globally available
+      window.openAdvancedSearch = openAdvancedSearch;
+      window.closeAdvancedSearch = closeAdvancedSearch;
     </script>
-
-    <!-- Confirmation Dialog for Bulk Actions -->
-    ${renderConfirmationDialog({
-    id: "bulk-action-confirm",
-    title: "Confirm Bulk Action",
-    message: "Are you sure you want to perform this action? This operation will affect multiple items.",
-    confirmText: "Confirm",
-    cancelText: "Cancel",
-    confirmClass: "bg-blue-500 hover:bg-blue-400",
-    iconColor: "blue",
-    onConfirm: "executeBulkAction()"
-  })}
-
-    <!-- Confirmation Dialog Script -->
-    ${getConfirmationDialogScript()}
   `;
   const layoutData = {
     title: "Content Management",
@@ -6023,6 +7591,122 @@ async function isPluginActive2(db, pluginId) {
 
 // src/routes/admin-content.ts
 var adminContentRoutes = new Hono();
+function parseFieldValue(field, formData, options = {}) {
+  const { skipValidation = false } = options;
+  const value = formData.get(field.field_name);
+  const errors = [];
+  const blocksConfig = getBlocksFieldConfig(field.field_options);
+  if (blocksConfig) {
+    const parsed = parseBlocksValue(value, blocksConfig);
+    if (!skipValidation && field.is_required && parsed.value.length === 0) {
+      parsed.errors.push(`${field.field_label} is required`);
+    }
+    return { value: parsed.value, errors: parsed.errors };
+  }
+  if (!skipValidation && field.is_required && (!value || value.toString().trim() === "")) {
+    return { value: null, errors: [`${field.field_label} is required`] };
+  }
+  switch (field.field_type) {
+    case "number":
+      if (value && isNaN(Number(value))) {
+        if (!skipValidation) {
+          errors.push(`${field.field_label} must be a valid number`);
+        }
+        return { value: null, errors };
+      }
+      return { value: value ? Number(value) : null, errors: [] };
+    case "boolean":
+      const submitted = formData.get(`${field.field_name}_submitted`);
+      return { value: submitted ? value === "true" : false, errors: [] };
+    case "select":
+      if (field.field_options?.multiple) {
+        return { value: formData.getAll(`${field.field_name}[]`), errors: [] };
+      }
+      return { value, errors: [] };
+    case "array": {
+      if (!value || value.toString().trim() === "") {
+        if (!skipValidation && field.is_required) {
+          errors.push(`${field.field_label} is required`);
+        }
+        return { value: [], errors };
+      }
+      try {
+        const parsed = JSON.parse(value.toString());
+        if (!Array.isArray(parsed)) {
+          if (!skipValidation) {
+            errors.push(`${field.field_label} must be a JSON array`);
+          }
+          return { value: [], errors };
+        }
+        if (!skipValidation && field.is_required && parsed.length === 0) {
+          errors.push(`${field.field_label} is required`);
+        }
+        return { value: parsed, errors };
+      } catch {
+        if (!skipValidation) {
+          errors.push(`${field.field_label} must be valid JSON`);
+        }
+        return { value: [], errors };
+      }
+    }
+    case "object": {
+      if (!value || value.toString().trim() === "") {
+        if (!skipValidation && field.is_required) {
+          errors.push(`${field.field_label} is required`);
+        }
+        return { value: {}, errors };
+      }
+      try {
+        const parsed = JSON.parse(value.toString());
+        if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+          if (!skipValidation) {
+            errors.push(`${field.field_label} must be a JSON object`);
+          }
+          return { value: {}, errors };
+        }
+        if (!skipValidation && field.is_required && Object.keys(parsed).length === 0) {
+          errors.push(`${field.field_label} is required`);
+        }
+        return { value: parsed, errors };
+      } catch {
+        if (!skipValidation) {
+          errors.push(`${field.field_label} must be valid JSON`);
+        }
+        return { value: {}, errors };
+      }
+    }
+    case "json": {
+      if (!value || value.toString().trim() === "") {
+        if (!skipValidation && field.is_required) {
+          errors.push(`${field.field_label} is required`);
+        }
+        return { value: null, errors };
+      }
+      try {
+        return { value: JSON.parse(value.toString()), errors: [] };
+      } catch {
+        if (!skipValidation) {
+          errors.push(`${field.field_label} must be valid JSON`);
+        }
+        return { value: null, errors };
+      }
+    }
+    default:
+      return { value, errors: [] };
+  }
+}
+function extractFieldData(fields, formData, options = {}) {
+  const data = {};
+  const errors = {};
+  for (const field of fields) {
+    const result = parseFieldValue(field, formData, options);
+    data[field.field_name] = result.value;
+    if (result.errors.length > 0) {
+      errors[field.field_name] = result.errors;
+    }
+  }
+  return { data, errors };
+}
 adminContentRoutes.use("*", requireAuth());
 async function getCollectionFields(db, collectionId) {
   const cache = getCacheService(CACHE_CONFIGS.collection);
@@ -6496,36 +8180,7 @@ adminContentRoutes.post("/", async (c) => {
       `);
     }
     const fields = await getCollectionFields(db, collectionId);
-    const data = {};
-    const errors = {};
-    for (const field of fields) {
-      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 (value && isNaN(Number(value))) {
-            errors[field.field_name] = [`${field.field_label} must be a valid number`];
-          } else {
-            data[field.field_name] = value ? Number(value) : null;
-          }
-          break;
-        case "boolean":
-          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] = value;
-          }
-          break;
-        default:
-          data[field.field_name] = value;
-      }
-    }
+    const { data, errors } = extractFieldData(fields, formData);
     if (Object.keys(errors).length > 0) {
       const formDataWithErrors = {
         collection,
@@ -6642,36 +8297,7 @@ adminContentRoutes.put("/:id", async (c) => {
       `);
     }
     const fields = await getCollectionFields(db, existingContent.collection_id);
-    const data = {};
-    const errors = {};
-    for (const field of fields) {
-      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 (value && isNaN(Number(value))) {
-            errors[field.field_name] = [`${field.field_label} must be a valid number`];
-          } else {
-            data[field.field_name] = value ? Number(value) : null;
-          }
-          break;
-        case "boolean":
-          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] = value;
-          }
-          break;
-        default:
-          data[field.field_name] = value;
-      }
-    }
+    const { data, errors } = extractFieldData(fields, formData);
     if (Object.keys(errors).length > 0) {
       const formDataWithErrors = {
         id,
@@ -6784,27 +8410,7 @@ adminContentRoutes.post("/preview", async (c) => {
       return c.html("<p>Collection not found</p>");
     }
     const fields = await getCollectionFields(db, collectionId);
-    const data = {};
-    for (const field of fields) {
-      const value = formData.get(field.field_name);
-      switch (field.field_type) {
-        case "number":
-          data[field.field_name] = value ? Number(value) : null;
-          break;
-        case "boolean":
-          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] = value;
-          }
-          break;
-        default:
-          data[field.field_name] = value;
-      }
-    }
+    const { data } = extractFieldData(fields, formData, { skipValidation: true });
     const previewHTML = `
       <!DOCTYPE html>
       <html lang="en">
@@ -8151,14 +9757,87 @@ function renderUserEditPage(data) {
                     </div>
                   </div>
                 </div>
+              </div>
+
+              <!-- Profile Information -->
+              <div class="mb-8">
+                <h3 class="text-base font-semibold text-zinc-950 dark:text-white mb-4">Profile Information</h3>
+                <p class="text-sm text-zinc-500 dark:text-zinc-400 mb-4">Extended profile data for this user</p>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div>
+                    <label class="block text-sm font-medium text-zinc-950 dark:text-white mb-2">Display Name</label>
+                    <input
+                      type="text"
+                      name="profile_display_name"
+                      value="${escapeHtml(data.userToEdit.profile?.displayName || "")}"
+                      placeholder="Public display name"
+                      class="w-full rounded-lg bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-950 dark:text-white 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"
+                    />
+                  </div>
+
+                  <div>
+                    <label class="block text-sm font-medium text-zinc-950 dark:text-white mb-2">Company</label>
+                    <input
+                      type="text"
+                      name="profile_company"
+                      value="${escapeHtml(data.userToEdit.profile?.company || "")}"
+                      placeholder="Company or organization"
+                      class="w-full rounded-lg bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-950 dark:text-white 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"
+                    />
+                  </div>
+
+                  <div>
+                    <label class="block text-sm font-medium text-zinc-950 dark:text-white mb-2">Job Title</label>
+                    <input
+                      type="text"
+                      name="profile_job_title"
+                      value="${escapeHtml(data.userToEdit.profile?.jobTitle || "")}"
+                      placeholder="Job title or role"
+                      class="w-full rounded-lg bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-950 dark:text-white 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"
+                    />
+                  </div>
+
+                  <div>
+                    <label class="block text-sm font-medium text-zinc-950 dark:text-white mb-2">Website</label>
+                    <input
+                      type="url"
+                      name="profile_website"
+                      value="${escapeHtml(data.userToEdit.profile?.website || "")}"
+                      placeholder="https://example.com"
+                      class="w-full rounded-lg bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-950 dark:text-white 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"
+                    />
+                  </div>
+
+                  <div>
+                    <label class="block text-sm font-medium text-zinc-950 dark:text-white mb-2">Location</label>
+                    <input
+                      type="text"
+                      name="profile_location"
+                      value="${escapeHtml(data.userToEdit.profile?.location || "")}"
+                      placeholder="City, Country"
+                      class="w-full rounded-lg bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-950 dark:text-white 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"
+                    />
+                  </div>
+
+                  <div>
+                    <label class="block text-sm font-medium text-zinc-950 dark:text-white mb-2">Date of Birth</label>
+                    <input
+                      type="date"
+                      name="profile_date_of_birth"
+                      value="${data.userToEdit.profile?.dateOfBirth ? new Date(data.userToEdit.profile.dateOfBirth).toISOString().split("T")[0] : ""}"
+                      class="w-full rounded-lg bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-950 dark:text-white 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"
+                    />
+                  </div>
+                </div>
 
                 <div class="mt-6">
                   <label class="block text-sm font-medium text-zinc-950 dark:text-white mb-2">Bio</label>
                   <textarea
-                    name="bio"
+                    name="profile_bio"
                     rows="3"
+                    placeholder="Short bio or description"
                     class="w-full rounded-lg bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-950 dark:text-white 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"
-                  >${escapeHtml(data.userToEdit.bio || "")}</textarea>
+                  >${escapeHtml(data.userToEdit.profile?.bio || "")}</textarea>
                 </div>
               </div>
 
@@ -9692,7 +11371,7 @@ userRoutes.get("/users/:id/edit", async (c) => {
   const userId = c.req.param("id");
   try {
     const userStmt = db.prepare(`
-      SELECT id, email, username, first_name, last_name, phone, bio, avatar_url,
+      SELECT id, email, username, first_name, last_name, phone, avatar_url,
              role, is_active, email_verified, two_factor_enabled, created_at, last_login_at
       FROM users
       WHERE id = ?
@@ -9705,6 +11384,21 @@ userRoutes.get("/users/:id/edit", async (c) => {
         dismissible: true
       }), 404);
     }
+    const profileStmt = db.prepare(`
+      SELECT display_name, bio, company, job_title, website, location, date_of_birth
+      FROM user_profiles
+      WHERE user_id = ?
+    `);
+    const profileData = await profileStmt.bind(userId).first();
+    const profile = profileData ? {
+      displayName: profileData.display_name,
+      bio: profileData.bio,
+      company: profileData.company,
+      jobTitle: profileData.job_title,
+      website: profileData.website,
+      location: profileData.location,
+      dateOfBirth: profileData.date_of_birth
+    } : void 0;
     const editData = {
       id: userToEdit.id,
       email: userToEdit.email,
@@ -9712,14 +11406,14 @@ userRoutes.get("/users/:id/edit", async (c) => {
       firstName: userToEdit.first_name || "",
       lastName: userToEdit.last_name || "",
       phone: userToEdit.phone,
-      bio: userToEdit.bio,
       avatarUrl: userToEdit.avatar_url,
       role: userToEdit.role,
       isActive: Boolean(userToEdit.is_active),
       emailVerified: Boolean(userToEdit.email_verified),
       twoFactorEnabled: Boolean(userToEdit.two_factor_enabled),
       createdAt: userToEdit.created_at,
-      lastLoginAt: userToEdit.last_login_at
+      lastLoginAt: userToEdit.last_login_at,
+      profile
     };
     const pageData = {
       userToEdit: editData,
@@ -9735,7 +11429,7 @@ userRoutes.get("/users/:id/edit", async (c) => {
     console.error("User edit page error:", error);
     return c.html(renderAlert2({
       type: "error",
-      message: "Failed to load user!. Please try again.",
+      message: "Failed to load user. Please try again.",
       dismissible: true
     }), 500);
   }
@@ -9751,10 +11445,17 @@ userRoutes.put("/users/:id", async (c) => {
     const username = sanitizeInput(formData.get("username")?.toString());
     const email = formData.get("email")?.toString()?.trim().toLowerCase() || "";
     const phone = sanitizeInput(formData.get("phone")?.toString()) || null;
-    const bio = sanitizeInput(formData.get("bio")?.toString()) || null;
     const role = formData.get("role")?.toString() || "viewer";
     const isActive = formData.get("is_active") === "1";
     const emailVerified = formData.get("email_verified") === "1";
+    const profileDisplayName = sanitizeInput(formData.get("profile_display_name")?.toString()) || null;
+    const profileBio = sanitizeInput(formData.get("profile_bio")?.toString()) || null;
+    const profileCompany = sanitizeInput(formData.get("profile_company")?.toString()) || null;
+    const profileJobTitle = sanitizeInput(formData.get("profile_job_title")?.toString()) || null;
+    const profileWebsite = formData.get("profile_website")?.toString()?.trim() || null;
+    const profileLocation = sanitizeInput(formData.get("profile_location")?.toString()) || null;
+    const profileDateOfBirthStr = formData.get("profile_date_of_birth")?.toString()?.trim() || null;
+    const profileDateOfBirth = profileDateOfBirthStr ? new Date(profileDateOfBirthStr).getTime() : null;
     if (!firstName || !lastName || !username || !email) {
       return c.html(renderAlert2({
         type: "error",
@@ -9770,6 +11471,17 @@ userRoutes.put("/users/:id", async (c) => {
         dismissible: true
       }));
     }
+    if (profileWebsite) {
+      try {
+        new URL(profileWebsite);
+      } catch {
+        return c.html(renderAlert2({
+          type: "error",
+          message: "Please enter a valid website URL.",
+          dismissible: true
+        }));
+      }
+    }
     const checkStmt = db.prepare(`
       SELECT id FROM users
       WHERE (username = ? OR email = ?) AND id != ?
@@ -9778,14 +11490,14 @@ userRoutes.put("/users/:id", async (c) => {
     if (existingUser) {
       return c.html(renderAlert2({
         type: "error",
-        message: "Username or email is already taken by another user!.",
+        message: "Username or email is already taken by another user.",
         dismissible: true
       }));
     }
     const updateStmt = db.prepare(`
       UPDATE users SET
         first_name = ?, last_name = ?, username = ?, email = ?,
-        phone = ?, bio = ?, role = ?, is_active = ?, email_verified = ?,
+        phone = ?, role = ?, is_active = ?, email_verified = ?,
         updated_at = ?
       WHERE id = ?
     `);
@@ -9795,20 +11507,63 @@ userRoutes.put("/users/:id", async (c) => {
       username,
       email,
       phone,
-      bio,
       role,
       isActive ? 1 : 0,
       emailVerified ? 1 : 0,
       Date.now(),
       userId
     ).run();
+    const hasProfileData = profileDisplayName || profileBio || profileCompany || profileJobTitle || profileWebsite || profileLocation || profileDateOfBirth;
+    if (hasProfileData) {
+      const now = Date.now();
+      const profileCheckStmt = db.prepare(`SELECT id FROM user_profiles WHERE user_id = ?`);
+      const existingProfile = await profileCheckStmt.bind(userId).first();
+      if (existingProfile) {
+        const updateProfileStmt = db.prepare(`
+          UPDATE user_profiles SET
+            display_name = ?, bio = ?, company = ?, job_title = ?,
+            website = ?, location = ?, date_of_birth = ?, updated_at = ?
+          WHERE user_id = ?
+        `);
+        await updateProfileStmt.bind(
+          profileDisplayName,
+          profileBio,
+          profileCompany,
+          profileJobTitle,
+          profileWebsite,
+          profileLocation,
+          profileDateOfBirth,
+          now,
+          userId
+        ).run();
+      } else {
+        const profileId = `profile_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+        const insertProfileStmt = db.prepare(`
+          INSERT INTO user_profiles (id, user_id, display_name, bio, company, job_title, website, location, date_of_birth, created_at, updated_at)
+          VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+        `);
+        await insertProfileStmt.bind(
+          profileId,
+          userId,
+          profileDisplayName,
+          profileBio,
+          profileCompany,
+          profileJobTitle,
+          profileWebsite,
+          profileLocation,
+          profileDateOfBirth,
+          now,
+          now
+        ).run();
+      }
+    }
     await logActivity(
       db,
       user.userId,
-      "user!.update",
+      "user.update",
       "users",
       userId,
-      { fields: ["first_name", "last_name", "username", "email", "phone", "bio", "role", "is_active", "email_verified"] },
+      { fields: ["first_name", "last_name", "username", "email", "phone", "role", "is_active", "email_verified", "profile"] },
       c.req.header("x-forwarded-for") || c.req.header("cf-connecting-ip"),
       c.req.header("user-agent")
     );
@@ -9821,7 +11576,7 @@ userRoutes.put("/users/:id", async (c) => {
     console.error("User update error:", error);
     return c.html(renderAlert2({
       type: "error",
-      message: "Failed to update user!. Please try again.",
+      message: "Failed to update user. Please try again.",
       dismissible: true
     }));
   }
@@ -13315,6 +15070,9 @@ function renderAuthSettingsForm(settings) {
 }
 
 // src/templates/pages/admin-plugin-settings.template.ts
+function escapeHtmlAttr(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
 function renderPluginSettingsPage(data) {
   const { plugin, activity = [], user } = data;
   const pageContent = `
@@ -13592,6 +15350,7 @@ function renderSettingsTab(plugin) {
   const settings = plugin.settings || {};
   const isSeedDataPlugin = plugin.id === "seed-data" || plugin.name === "seed-data";
   const isAuthPlugin = plugin.id === "core-auth" || plugin.name === "core-auth";
+  const isTurnstilePlugin = plugin.id === "turnstile" || plugin.name === "turnstile";
   return `
     ${isSeedDataPlugin ? `
       <div class="backdrop-blur-md bg-black/20 rounded-xl border border-white/10 shadow-xl p-6 mb-6">
@@ -13618,12 +15377,15 @@ function renderSettingsTab(plugin) {
       ${isAuthPlugin ? `
         <h2 class="text-xl font-semibold text-white mb-4">Authentication Settings</h2>
         <p class="text-gray-400 mb-6">Configure user registration fields and validation rules.</p>
+      ` : isTurnstilePlugin ? `
+        <h2 class="text-xl font-semibold text-white mb-4">Cloudflare Turnstile Settings</h2>
+        <p class="text-gray-400 mb-6">Configure CAPTCHA-free bot protection for your forms.</p>
       ` : `
         <h2 class="text-xl font-semibold text-white mb-4">Plugin Settings</h2>
       `}
 
       <form id="settings-form" class="space-y-6">
-        ${isAuthPlugin && Object.keys(settings).length > 0 ? renderAuthSettingsForm(settings) : Object.keys(settings).length > 0 ? renderSettingsFields(settings) : renderNoSettings(plugin)}
+        ${isAuthPlugin && Object.keys(settings).length > 0 ? renderAuthSettingsForm(settings) : isTurnstilePlugin && Object.keys(settings).length > 0 ? renderTurnstileSettingsForm(settings) : Object.keys(settings).length > 0 ? renderSettingsFields(settings) : renderNoSettings(plugin)}
 
         ${Object.keys(settings).length > 0 ? `
         <div class="flex items-center justify-end pt-6 border-t border-white/10">
@@ -13687,6 +15449,80 @@ function renderSettingsFields(settings) {
     }
   }).join("");
 }
+function renderTurnstileSettingsForm(settings) {
+  const inputClass = "backdrop-blur-sm bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white placeholder-gray-300 focus:border-blue-400 focus:outline-none transition-colors w-full";
+  const selectClass = "backdrop-blur-sm bg-zinc-800 border border-white/20 rounded-lg px-3 py-2 text-white focus:border-blue-400 focus:outline-none transition-colors w-full [&>option]:bg-zinc-800 [&>option]:text-white";
+  return `
+    <!-- Enable Toggle -->
+    <div class="flex items-center justify-between">
+      <div>
+        <label for="setting_enabled" class="text-sm font-medium text-gray-300">Enable Turnstile</label>
+        <p class="text-xs text-gray-400">Enable or disable Turnstile verification globally</p>
+      </div>
+      <label class="relative inline-flex items-center cursor-pointer">
+        <input type="checkbox" name="setting_enabled" id="setting_enabled" ${settings.enabled ? "checked" : ""} class="sr-only peer">
+        <div class="w-11 h-6 bg-gray-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+      </label>
+    </div>
+
+    <!-- Site Key -->
+    <div>
+      <label for="setting_siteKey" class="block text-sm font-medium text-gray-300 mb-2">Site Key</label>
+      <input type="text" name="setting_siteKey" id="setting_siteKey" value="${escapeHtmlAttr(settings.siteKey || "")}" placeholder="0x4AAAAAAAA..." class="${inputClass}">
+      <p class="text-xs text-gray-400 mt-1">Your Cloudflare Turnstile site key (public)</p>
+    </div>
+
+    <!-- Secret Key -->
+    <div>
+      <label for="setting_secretKey" class="block text-sm font-medium text-gray-300 mb-2">Secret Key</label>
+      <input type="password" name="setting_secretKey" id="setting_secretKey" value="${escapeHtmlAttr(settings.secretKey || "")}" placeholder="0x4AAAAAAAA..." class="${inputClass}">
+      <p class="text-xs text-gray-400 mt-1">Your Cloudflare Turnstile secret key (private)</p>
+    </div>
+
+    <!-- Theme -->
+    <div>
+      <label for="setting_theme" class="block text-sm font-medium text-gray-300 mb-2">Widget Theme</label>
+      <select name="setting_theme" id="setting_theme" class="${selectClass}" style="color: white; background-color: rgb(39, 39, 42);">
+        <option value="auto" ${settings.theme === "auto" ? "selected" : ""} style="background-color: rgb(39, 39, 42); color: white;">Auto (matches page theme)</option>
+        <option value="light" ${settings.theme === "light" ? "selected" : ""} style="background-color: rgb(39, 39, 42); color: white;">Light</option>
+        <option value="dark" ${settings.theme === "dark" ? "selected" : ""} style="background-color: rgb(39, 39, 42); color: white;">Dark</option>
+      </select>
+      <p class="text-xs text-gray-400 mt-1">Visual appearance of the Turnstile widget</p>
+    </div>
+
+    <!-- Size -->
+    <div>
+      <label for="setting_size" class="block text-sm font-medium text-gray-300 mb-2">Widget Size</label>
+      <select name="setting_size" id="setting_size" class="${selectClass}" style="color: white; background-color: rgb(39, 39, 42);">
+        <option value="normal" ${settings.size === "normal" ? "selected" : ""} style="background-color: rgb(39, 39, 42); color: white;">Normal (300x65px)</option>
+        <option value="compact" ${settings.size === "compact" ? "selected" : ""} style="background-color: rgb(39, 39, 42); color: white;">Compact (130x120px)</option>
+      </select>
+      <p class="text-xs text-gray-400 mt-1">Size of the Turnstile challenge widget</p>
+    </div>
+
+    <!-- Widget Mode -->
+    <div>
+      <label for="setting_mode" class="block text-sm font-medium text-gray-300 mb-2">Widget Mode</label>
+      <select name="setting_mode" id="setting_mode" class="${selectClass}" style="color: white; background-color: rgb(39, 39, 42);">
+        <option value="managed" ${!settings.mode || settings.mode === "managed" ? "selected" : ""} style="background-color: rgb(39, 39, 42); color: white;">Managed (Recommended) - Adaptive challenge</option>
+        <option value="non-interactive" ${settings.mode === "non-interactive" ? "selected" : ""} style="background-color: rgb(39, 39, 42); color: white;">Non-Interactive - Always visible, minimal friction</option>
+        <option value="invisible" ${settings.mode === "invisible" ? "selected" : ""} style="background-color: rgb(39, 39, 42); color: white;">Invisible - No visible widget</option>
+      </select>
+      <p class="text-xs text-gray-400 mt-1"><strong>Managed:</strong> Shows challenge only when needed. <strong>Non-Interactive:</strong> Always shows but doesn't require interaction. <strong>Invisible:</strong> Runs in background without UI.</p>
+    </div>
+
+    <!-- Appearance (Pre-clearance) -->
+    <div>
+      <label for="setting_appearance" class="block text-sm font-medium text-gray-300 mb-2">Pre-clearance / Appearance</label>
+      <select name="setting_appearance" id="setting_appearance" class="${selectClass}" style="color: white; background-color: rgb(39, 39, 42);">
+        <option value="always" ${!settings.appearance || settings.appearance === "always" ? "selected" : ""} style="background-color: rgb(39, 39, 42); color: white;">Always - Pre-clearance enabled (verifies immediately)</option>
+        <option value="execute" ${settings.appearance === "execute" ? "selected" : ""} style="background-color: rgb(39, 39, 42); color: white;">Execute - Challenge on form submit</option>
+        <option value="interaction-only" ${settings.appearance === "interaction-only" ? "selected" : ""} style="background-color: rgb(39, 39, 42); color: white;">Interaction Only - Only after user interaction</option>
+      </select>
+      <p class="text-xs text-gray-400 mt-1">Controls when Turnstile verification occurs. <strong>Always:</strong> Verifies immediately (pre-clearance). <strong>Execute:</strong> Verifies on form submit. <strong>Interaction Only:</strong> Only after user interaction.</p>
+    </div>
+  `;
+}
 function renderNoSettings(plugin) {
   if (plugin.id === "seed-data" || plugin.name === "seed-data") {
     return `
@@ -13918,6 +15754,32 @@ var AVAILABLE_PLUGINS = [
     permissions: [],
     dependencies: [],
     is_core: false
+  },
+  {
+    id: "turnstile",
+    name: "turnstile-plugin",
+    display_name: "Cloudflare Turnstile",
+    description: "CAPTCHA-free bot protection for forms using Cloudflare Turnstile. Provides seamless spam prevention with configurable modes, themes, and pre-clearance options.",
+    version: "1.0.0",
+    author: "SonicJS Team",
+    category: "security",
+    icon: "\u{1F6E1}\uFE0F",
+    permissions: [],
+    dependencies: [],
+    is_core: true
+  },
+  {
+    id: "ai-search",
+    name: "ai-search-plugin",
+    display_name: "AI Search",
+    description: "Advanced search with Cloudflare AI Search. Full-text search, semantic search, and advanced filtering across all content collections.",
+    version: "1.0.0",
+    author: "SonicJS Team",
+    category: "search",
+    icon: "\u{1F50D}",
+    permissions: [],
+    dependencies: [],
+    is_core: true
   }
 ];
 adminPluginRoutes.get("/", async (c) => {
@@ -13996,6 +15858,9 @@ adminPluginRoutes.get("/:id", async (c) => {
     const user = c.get("user");
     const db = c.env.DB;
     const pluginId = c.req.param("id");
+    if (pluginId === "ai-search") {
+      return c.text("", 404);
+    }
     if (user?.role !== "admin") {
       return c.redirect("/admin/plugins");
     }
@@ -14288,6 +16153,60 @@ adminPluginRoutes.post("/install", async (c) => {
       });
       return c.json({ success: true, plugin: easyMdxPlugin2 });
     }
+    if (body.name === "ai-search-plugin" || body.name === "ai-search") {
+      const defaultSettings = {
+        enabled: true,
+        ai_mode_enabled: true,
+        selected_collections: [],
+        dismissed_collections: [],
+        autocomplete_enabled: true,
+        cache_duration: 1,
+        results_limit: 20,
+        index_media: false
+      };
+      const aiSearchPlugin = await pluginService.installPlugin({
+        id: "ai-search",
+        name: "ai-search-plugin",
+        display_name: "AI Search",
+        description: "Advanced search with Cloudflare AI Search. Full-text search, semantic search, and advanced filtering across all content collections.",
+        version: "1.0.0",
+        author: "SonicJS Team",
+        category: "search",
+        icon: "\u{1F50D}",
+        permissions: [],
+        dependencies: [],
+        is_core: true,
+        settings: defaultSettings
+      });
+      return c.json({ success: true, plugin: aiSearchPlugin });
+    }
+    if (body.name === "turnstile-plugin") {
+      const turnstilePlugin = await pluginService.installPlugin({
+        id: "turnstile",
+        name: "turnstile-plugin",
+        display_name: "Cloudflare Turnstile",
+        description: "CAPTCHA-free bot protection for forms using Cloudflare Turnstile. Provides seamless spam prevention with configurable modes, themes, and pre-clearance options.",
+        version: "1.0.0",
+        author: "SonicJS Team",
+        category: "security",
+        icon: "\u{1F6E1}\uFE0F",
+        permissions: [],
+        dependencies: [],
+        is_core: true,
+        settings: {
+          siteKey: "",
+          secretKey: "",
+          theme: "auto",
+          size: "normal",
+          mode: "managed",
+          appearance: "always",
+          preClearanceEnabled: false,
+          preClearanceLevel: "managed",
+          enabled: false
+        }
+      });
+      return c.json({ success: true, plugin: turnstilePlugin });
+    }
     return c.json({ error: "Plugin not found in registry" }, 404);
   } catch (error) {
     console.error("Error installing plugin:", error);
@@ -19461,16 +21380,30 @@ adminCollectionsRoutes.get("/:id", async (c) => {
         const schema = typeof collection.schema === "string" ? JSON.parse(collection.schema) : collection.schema;
         if (schema && schema.properties) {
           let fieldOrder = 0;
-          fields = Object.entries(schema.properties).map(([fieldName, fieldConfig]) => ({
-            id: `schema-${fieldName}`,
-            field_name: fieldName,
-            field_type: fieldConfig.type || "string",
-            field_label: fieldConfig.title || fieldName,
-            field_options: fieldConfig,
-            field_order: fieldOrder++,
-            is_required: fieldConfig.required === true || schema.required && schema.required.includes(fieldName),
-            is_searchable: fieldConfig.searchable === true || false
-          }));
+          fields = Object.entries(schema.properties).map(([fieldName, fieldConfig]) => {
+            let fieldType = fieldConfig.type || "string";
+            if (fieldConfig.enum) {
+              fieldType = "select";
+            } else if (fieldConfig.format === "richtext") {
+              fieldType = "richtext";
+            } else if (fieldConfig.format === "media") {
+              fieldType = "media";
+            } else if (fieldConfig.format === "date-time") {
+              fieldType = "date";
+            } else if (fieldConfig.type === "slug" || fieldConfig.format === "slug") {
+              fieldType = "slug";
+            }
+            return {
+              id: `schema-${fieldName}`,
+              field_name: fieldName,
+              field_type: fieldType,
+              field_label: fieldConfig.title || fieldName,
+              field_options: fieldConfig,
+              field_order: fieldOrder++,
+              is_required: fieldConfig.required === true || schema.required && schema.required.includes(fieldName),
+              is_searchable: fieldConfig.searchable === true || false
+            };
+          });
         }
       } catch (e) {
         console.error("Error parsing collection schema:", e);
@@ -19685,6 +21618,9 @@ adminCollectionsRoutes.post("/:id/fields", async (c) => {
         fieldConfig.enum = parsedOptions.options || [];
       } else if (fieldType === "media") {
         fieldConfig.format = "media";
+      } else if (fieldType === "slug") {
+        fieldConfig.type = "slug";
+        fieldConfig.format = "slug";
       } else if (fieldType === "quill") {
         fieldConfig.type = "quill";
       } else if (fieldType === "mdxeditor") {
@@ -21802,6 +23738,6 @@ var ROUTES_INFO = {
   reference: "https://github.com/sonicjs/sonicjs"
 };
 
-export { PluginBuilder, ROUTES_INFO, adminCheckboxRoutes, adminCollectionsRoutes, adminDesignRoutes, adminLogsRoutes, adminMediaRoutes, adminPluginRoutes, adminSettingsRoutes, admin_api_default, admin_code_examples_default, admin_content_default, admin_testimonials_default, api_content_crud_default, api_default, api_media_default, api_system_default, auth_default, checkAdminUserExists, router, test_cleanup_default, userRoutes };
-//# sourceMappingURL=chunk-FT6NBHNX.js.map
-//# sourceMappingURL=chunk-FT6NBHNX.js.map
+export { ROUTES_INFO, adminCheckboxRoutes, adminCollectionsRoutes, adminDesignRoutes, adminLogsRoutes, adminMediaRoutes, adminPluginRoutes, adminSettingsRoutes, admin_api_default, admin_code_examples_default, admin_content_default, admin_testimonials_default, api_content_crud_default, api_default, api_media_default, api_system_default, auth_default, router, test_cleanup_default, userRoutes };
+//# sourceMappingURL=chunk-F6GZURXJ.js.map
+//# sourceMappingURL=chunk-F6GZURXJ.js.map