@sonicjs-cms/core 2.0.0-alpha.7 → 2.0.0-alpha.9

package/dist/{chunk-Y6VF3YFA.cjs → chunk-H6E2I5GW.cjs}

@@ -2,6 +2,7 @@
 
 var chunkAGOE25LF_cjs = require('./chunk-AGOE25LF.cjs');
 var chunkBUKT6HP5_cjs = require('./chunk-BUKT6HP5.cjs');
+var chunkRNR4HA23_cjs = require('./chunk-RNR4HA23.cjs');
 var chunkRGCQSFKC_cjs = require('./chunk-RGCQSFKC.cjs');
 var chunkIGJUBJBW_cjs = require('./chunk-IGJUBJBW.cjs');
 var hono = require('hono');
@@ -9946,6 +9947,3669 @@ userRoutes.get("/activity-logs/export", chunkBUKT6HP5_cjs.requirePermission("act
   }
 });
 
+// src/templates/components/media-grid.template.ts
+function renderMediaGrid(data) {
+  if (data.files.length === 0) {
+    return `
+      <div class="text-center py-12">
+        <svg class="mx-auto h-12 w-12 text-zinc-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <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" />
+        </svg>
+        <h3 class="mt-2 text-sm font-medium text-zinc-950 dark:text-white">No media files</h3>
+        <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">${data.emptyMessage || "Get started by uploading your first file."}</p>
+      </div>
+    `;
+  }
+  const gridClass = data.viewMode === "list" ? "space-y-4" : "media-grid";
+  return `
+    <div class="${gridClass} ${data.className || ""}">
+      ${data.files.map(
+    (file) => renderMediaFileCard(file, data.viewMode, data.selectable)
+  ).join("")}
+    </div>
+  `;
+}
+function renderMediaFileCard(file, viewMode = "grid", selectable = false) {
+  if (viewMode === "list") {
+    return `
+      <div class="media-item rounded-xl bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 hover:shadow-md transition-all" data-file-id="${file.id}">
+        <div class="flex items-center p-4">
+          ${selectable ? `
+            <div class="flex h-6 shrink-0 items-center mr-4">
+              <div class="group grid size-4 grid-cols-1">
+                <input type="checkbox" value="${file.id}" onchange="toggleFileSelection('${file.id}')" class="col-start-1 row-start-1 appearance-none rounded border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-white/5 checked:border-indigo-500 checked:bg-indigo-500 indeterminate:border-indigo-500 indeterminate:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:border-zinc-950/5 dark:disabled:border-white/5 disabled:bg-zinc-950/10 dark:disabled:bg-white/10 disabled:checked:bg-zinc-950/10 dark:disabled:checked:bg-white/10 forced-colors:appearance-auto media-checkbox" />
+                <svg viewBox="0 0 14 14" fill="none" class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-zinc-950/25 dark:group-has-[:disabled]:stroke-white/25">
+                  <path d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-[:checked]:opacity-100" />
+                  <path d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-[:indeterminate]:opacity-100" />
+                </svg>
+              </div>
+            </div>
+          ` : ""}
+
+          <div class="flex-shrink-0 mr-4">
+            ${file.isImage ? `
+              <img src="${file.thumbnail_url || file.public_url}" alt="${file.alt || file.original_name}"
+                   class="w-16 h-16 object-cover rounded-lg ring-1 ring-zinc-950/10 dark:ring-white/10">
+            ` : `
+              <div class="w-16 h-16 bg-zinc-100 dark:bg-zinc-800 rounded-lg flex items-center justify-center">
+                ${getFileIcon(file.mime_type)}
+              </div>
+            `}
+          </div>
+
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center justify-between">
+              <h4 class="text-sm font-medium text-zinc-950 dark:text-white truncate" title="${file.original_name}">
+                ${file.original_name}
+              </h4>
+              <div class="flex items-center space-x-2">
+                <span class="text-sm text-zinc-500 dark:text-zinc-400">${file.fileSize}</span>
+                <button
+                  class="text-zinc-500 dark:text-zinc-400 hover:text-zinc-950 dark:hover:text-white transition-colors"
+                  hx-get="/admin/media/${file.id}/details"
+                  hx-target="#file-modal-content"
+                  onclick="document.getElementById('file-modal').classList.remove('hidden')"
+                >
+                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                  </svg>
+                </button>
+              </div>
+            </div>
+            <div class="mt-1 flex items-center text-sm text-zinc-500 dark:text-zinc-400">
+              <span>${file.uploadedAt}</span>
+              ${file.tags.length > 0 ? `
+                <span class="mx-2">\u2022</span>
+                <div class="flex items-center space-x-1">
+                  ${file.tags.slice(0, 2).map(
+      (tag) => `
+                    <span class="inline-block px-2 py-1 text-xs rounded-lg bg-zinc-100 dark:bg-zinc-800 text-zinc-950 dark:text-white">
+                      ${tag}
+                    </span>
+                  `
+    ).join("")}
+                  ${file.tags.length > 2 ? `<span class="text-xs text-zinc-500 dark:text-zinc-400">+${file.tags.length - 2}</span>` : ""}
+                </div>
+              ` : ""}
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  return `
+    <div class="media-item relative rounded-xl bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 hover:shadow-md transition-all duration-200 overflow-hidden group" data-file-id="${file.id}">
+      ${selectable ? `
+        <div class="absolute top-2 left-2 z-10">
+          <div class="flex h-6 shrink-0 items-center">
+            <div class="group grid size-4 grid-cols-1">
+              <input type="checkbox" value="${file.id}" onchange="toggleFileSelection('${file.id}')" class="col-start-1 row-start-1 appearance-none rounded border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-white/5 checked:border-indigo-500 checked:bg-indigo-500 indeterminate:border-indigo-500 indeterminate:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:border-zinc-950/5 dark:disabled:border-white/5 disabled:bg-zinc-950/10 dark:disabled:bg-white/10 disabled:checked:bg-zinc-950/10 dark:disabled:checked:bg-white/10 forced-colors:appearance-auto media-checkbox" />
+              <svg viewBox="0 0 14 14" fill="none" class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-zinc-950/25 dark:group-has-[:disabled]:stroke-white/25">
+                <path d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-[:checked]:opacity-100" />
+                <path d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-[:indeterminate]:opacity-100" />
+              </svg>
+            </div>
+          </div>
+        </div>
+      ` : ""}
+
+      <div class="aspect-square relative">
+        ${file.isImage ? `
+          <img src="${file.thumbnail_url || file.public_url}" alt="${file.alt || file.original_name}"
+               class="w-full h-full object-cover">
+        ` : `
+          <div class="w-full h-full bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center">
+            ${getFileIcon(file.mime_type)}
+          </div>
+        `}
+
+        <!-- Overlay actions -->
+        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-40 transition-all duration-200 flex items-center justify-center opacity-0 group-hover:opacity-100">
+          <div class="flex space-x-2">
+            <button
+              hx-get="/admin/media/${file.id}/details"
+              hx-target="#file-modal-content"
+              onclick="document.getElementById('file-modal').classList.remove('hidden')"
+              class="p-2 bg-white/20 rounded-full hover:bg-white/30 transition-colors"
+            >
+              <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+              </svg>
+            </button>
+            <button
+              onclick="event.stopPropagation(); copyToClipboard('${file.public_url}')"
+              class="p-2 bg-white/20 rounded-full hover:bg-white/30 transition-colors"
+            >
+              <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="p-3">
+        <h4 class="text-sm font-medium text-zinc-950 dark:text-white truncate" title="${file.original_name}">
+          ${file.original_name}
+        </h4>
+        <div class="flex justify-between items-center mt-1">
+          <span class="text-xs text-zinc-500 dark:text-zinc-400">${file.fileSize}</span>
+          <span class="text-xs text-zinc-500 dark:text-zinc-400">${file.uploadedAt}</span>
+        </div>
+        ${file.tags.length > 0 ? `
+          <div class="flex flex-wrap gap-1 mt-2">
+            ${file.tags.slice(0, 2).map(
+    (tag) => `
+              <span class="inline-block px-2 py-1 text-xs rounded-lg bg-zinc-100 dark:bg-zinc-800 text-zinc-950 dark:text-white">
+                ${tag}
+              </span>
+            `
+  ).join("")}
+            ${file.tags.length > 2 ? `<span class="text-xs text-zinc-500 dark:text-zinc-400">+${file.tags.length - 2}</span>` : ""}
+          </div>
+        ` : ""}
+      </div>
+    </div>
+  `;
+}
+function getFileIcon(mimeType) {
+  if (mimeType.startsWith("image/")) {
+    return `
+      <svg class="w-8 h-8 text-gray-400" 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" />
+      </svg>
+    `;
+  } else if (mimeType.startsWith("video/")) {
+    return `
+      <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
+      </svg>
+    `;
+  } else if (mimeType === "application/pdf") {
+    return `
+      <svg class="w-8 h-8 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+      </svg>
+    `;
+  } else {
+    return `
+      <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+      </svg>
+    `;
+  }
+}
+
+// src/templates/pages/admin-media-library.template.ts
+init_admin_layout_catalyst_template();
+function renderMediaLibraryPage(data) {
+  const pageContent = `
+    <div>
+      <!-- Header -->
+      <div class="sm:flex sm:items-center sm:justify-between mb-6">
+        <div class="sm:flex-auto">
+          <h1 class="text-2xl/8 font-semibold text-zinc-950 dark:text-white sm:text-xl/8">Media Library</h1>
+          <p class="mt-2 text-sm/6 text-zinc-500 dark:text-zinc-400">Manage your media files and assets</p>
+        </div>
+        <div class="mt-4 sm:mt-0 sm:ml-16 flex gap-x-2">
+          <button
+            class="inline-flex items-center justify-center rounded-lg bg-zinc-950 dark:bg-white px-3.5 py-2.5 text-sm font-semibold text-white dark:text-zinc-950 hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors shadow-sm"
+            onclick="document.getElementById('upload-modal').classList.remove('hidden')"
+          >
+            <svg class="-ml-0.5 mr-1.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
+            </svg>
+            Upload Media
+          </button>
+        </div>
+      </div>
+      
+      <div class="flex gap-6">
+        <!-- Sidebar -->
+        <div class="w-64 rounded-xl bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 p-6">
+          <div class="space-y-6">
+            <!-- Upload Button -->
+            <div>
+              <button
+                class="w-full rounded-lg bg-zinc-950 dark:bg-white px-4 py-2.5 text-sm font-semibold text-white dark:text-zinc-950 hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors shadow-sm"
+                onclick="document.getElementById('upload-modal').classList.remove('hidden')"
+              >
+                Upload Files
+              </button>
+            </div>
+
+            <!-- Folders -->
+            <div>
+              <h3 class="text-sm font-medium text-zinc-950 dark:text-white mb-3">Folders</h3>
+              <ul class="space-y-1">
+                <li>
+                  <a href="/admin/media?folder=all"
+                     class="block px-3 py-2 text-sm rounded-lg transition-colors ${data.currentFolder === "all" ? "bg-zinc-950 dark:bg-white text-white dark:text-zinc-950 font-medium" : "text-zinc-700 dark:text-zinc-300 hover:text-zinc-950 dark:hover:text-white hover:bg-zinc-50 dark:hover:bg-zinc-800/50"}">
+                    All Files (${data.totalFiles})
+                  </a>
+                </li>
+                ${data.folders.map(
+    (folder) => `
+                  <li>
+                    <a href="/admin/media?folder=${folder.folder}"
+                       class="block px-3 py-2 text-sm rounded-lg transition-colors ${data.currentFolder === folder.folder ? "bg-zinc-950 dark:bg-white text-white dark:text-zinc-950 font-medium" : "text-zinc-700 dark:text-zinc-300 hover:text-zinc-950 dark:hover:text-white hover:bg-zinc-50 dark:hover:bg-zinc-800/50"}">
+                      ${folder.folder} (${folder.count})
+                    </a>
+                  </li>
+                `
+  ).join("")}
+              </ul>
+            </div>
+
+            <!-- File Types -->
+            <div>
+              <h3 class="text-sm font-medium text-zinc-950 dark:text-white mb-3">File Types</h3>
+              <ul class="space-y-1">
+                <li>
+                  <a href="/admin/media?type=all"
+                     class="block px-3 py-2 text-sm rounded-lg transition-colors ${data.currentType === "all" ? "bg-zinc-950 dark:bg-white text-white dark:text-zinc-950 font-medium" : "text-zinc-700 dark:text-zinc-300 hover:text-zinc-950 dark:hover:text-white hover:bg-zinc-50 dark:hover:bg-zinc-800/50"}">
+                    All Types
+                  </a>
+                </li>
+                ${data.types.map(
+    (type) => `
+                  <li>
+                    <a href="/admin/media?type=${type.type}"
+                       class="block px-3 py-2 text-sm rounded-lg transition-colors ${data.currentType === type.type ? "bg-zinc-950 dark:bg-white text-white dark:text-zinc-950 font-medium" : "text-zinc-700 dark:text-zinc-300 hover:text-zinc-950 dark:hover:text-white hover:bg-zinc-50 dark:hover:bg-zinc-800/50"}">
+                      ${type.type.charAt(0).toUpperCase() + type.type.slice(1)} (${type.count})
+                    </a>
+                  </li>
+                `
+  ).join("")}
+              </ul>
+            </div>
+
+            <!-- Quick Actions -->
+            <div>
+              <h3 class="text-sm font-medium text-zinc-950 dark:text-white mb-3">Quick Actions</h3>
+              <div class="space-y-2">
+                <button
+                  onclick="openCreateFolderModal()"
+                  class="w-full text-left px-3 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:text-zinc-950 dark:hover:text-white hover:bg-zinc-50 dark:hover:bg-zinc-800/50 rounded-lg transition-colors">
+                  Create Folder
+                </button>
+                <button
+                  class="w-full text-left px-3 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:text-zinc-950 dark:hover:text-white hover:bg-zinc-50 dark:hover:bg-zinc-800/50 rounded-lg transition-colors"
+                  hx-delete="/media/cleanup"
+                  hx-confirm="Delete unused files?"
+                >
+                  Cleanup Unused
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- Main Content -->
+        <div class="flex-1">
+          <!-- Toolbar -->
+          <div class="relative rounded-xl mb-6 z-10">
+            <!-- Gradient Background -->
+            <div class="absolute inset-0 bg-gradient-to-r from-cyan-500/10 via-pink-500/10 to-purple-500/10 dark:from-cyan-400/20 dark:via-pink-400/20 dark:to-purple-400/20"></div>
+
+            <div class="relative bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10">
+              <div class="px-6 py-5">
+                <div class="flex items-center justify-between">
+                  <div class="flex items-center space-x-4">
+                    <div class="flex items-center space-x-2">
+                      <label class="text-sm/6 font-medium text-zinc-950 dark:text-white">View:</label>
+                      <div class="grid grid-cols-1">
+                        <select
+                          class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white/5 dark:bg-white/5 py-1.5 pl-3 pr-8 text-base text-zinc-950 dark:text-white outline outline-1 -outline-offset-1 outline-cyan-500/30 dark:outline-cyan-400/30 *:bg-white dark:*:bg-zinc-800 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-cyan-500 dark:focus-visible:outline-cyan-400 sm:text-sm/6 min-w-32"
+                          onchange="window.location.href = updateUrlParam('view', this.value)"
+                        >
+                          <option value="grid" ${data.currentView === "grid" ? "selected" : ""}>Grid</option>
+                          <option value="list" ${data.currentView === "list" ? "selected" : ""}>List</option>
+                        </select>
+                        <svg class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-zinc-500 dark:text-zinc-400 sm:size-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+                          <path fill-rule="evenodd" 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" />
+                        </svg>
+                      </div>
+                    </div>
+
+                    <div class="relative group">
+                      <input
+                        type="text"
+                        id="media-search-input"
+                        name="search"
+                        placeholder="Search files..."
+                        oninput="toggleMediaClearButton()"
+                        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"
+                        hx-get="/admin/media/search"
+                        hx-trigger="keyup changed delay:300ms"
+                        hx-target="#media-grid"
+                        hx-include="[name='folder'], [name='type']"
+                      >
+                      <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">
+                          <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+                        </svg>
+                      </div>
+                      <button
+                        type="button"
+                        id="clear-media-search"
+                        class="hidden absolute right-3 top-2.5 p-0.5 rounded-full bg-zinc-200/80 dark:bg-zinc-700/80 hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors"
+                        onclick="clearMediaSearch()"
+                        title="Clear search"
+                      >
+                        <svg class="h-3.5 w-3.5 text-zinc-600 dark:text-zinc-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
+                        </svg>
+                      </button>
+                      <input type="hidden" name="folder" value="${data.currentFolder}">
+                      <input type="hidden" name="type" value="${data.currentType}">
+                    </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.files.length} files</span>
+                    <button
+                      id="select-all-btn"
+                      class="inline-flex items-center gap-x-1.5 px-3 py-1.5 bg-white/90 dark:bg-zinc-800/90 backdrop-blur-sm text-zinc-950 dark:text-white text-sm font-medium rounded-full ring-1 ring-inset ring-cyan-200/50 dark:ring-cyan-700/50 hover:bg-gradient-to-r hover:from-cyan-50 hover:to-pink-50 dark:hover:from-cyan-900/30 dark:hover:to-pink-900/30 hover:ring-cyan-300 dark:hover:ring-cyan-600 transition-all duration-200"
+                      onclick="toggleSelectAll()"
+                    >
+                      Select All
+                    </button>
+                    <div class="relative inline-block z-50" id="bulk-actions-dropdown">
+                      <button
+                        id="bulk-actions-btn"
+                        onclick="toggleBulkActionsDropdown()"
+                        class="inline-flex items-center gap-x-1.5 px-3 py-1.5 bg-zinc-100/60 dark:bg-zinc-800/60 backdrop-blur-sm text-zinc-400 dark:text-zinc-600 text-sm font-medium rounded-full ring-1 ring-inset ring-zinc-200/50 dark:ring-zinc-700/50 cursor-not-allowed"
+                        disabled
+                      >
+                        Bulk Actions
+                        <svg viewBox="0 0 20 20" fill="currentColor" class="size-4">
+                          <path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
+                        </svg>
+                      </button>
+
+                      <div
+                        id="bulk-actions-menu"
+                        class="hidden absolute right-0 mt-2 w-56 origin-top-right divide-y divide-zinc-200 dark:divide-white/10 rounded-lg bg-white dark:bg-zinc-900 shadow-xl ring-1 ring-zinc-950/5 dark:ring-white/10 transition-all duration-100 scale-95 opacity-0 z-50"
+                        style="transition-behavior: allow-discrete;"
+                      >
+                        <div class="py-1">
+                          <button
+                            onclick="openMoveToFolderModal()"
+                            class="group/item flex w-full items-center px-4 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-white/5 hover:text-zinc-950 dark:hover:text-white transition-colors"
+                          >
+                            <svg viewBox="0 0 20 20" fill="currentColor" class="mr-3 size-5 text-zinc-400 dark:text-zinc-500 group-hover/item:text-zinc-950 dark:group-hover/item:text-white">
+                              <path d="M2 6a2 2 0 0 1 2-2h5.532a2 2 0 0 1 1.536.72l1.9 2.28a1 1 0 0 0 .768.36H17a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6Z" />
+                            </svg>
+                            Move to Folder
+                          </button>
+                        </div>
+                        <div class="py-1">
+                          <button
+                            onclick="confirmBulkDelete()"
+                            class="group/item flex w-full items-center px-4 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-red-50 dark:hover:bg-red-500/10 hover:text-red-600 dark:hover:text-red-400 transition-colors"
+                          >
+                            <svg viewBox="0 0 20 20" fill="currentColor" class="mr-3 size-5 text-zinc-400 dark:text-zinc-500 group-hover/item:text-red-600 dark:group-hover/item:text-red-400">
+                              <path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z" clip-rule="evenodd" fill-rule="evenodd" />
+                            </svg>
+                            Delete Selected Files
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Media Grid -->
+          <div id="media-grid">
+            ${renderMediaGrid({
+    files: data.files,
+    viewMode: data.currentView,
+    selectable: true,
+    emptyMessage: "No media files found. Upload your first file to get started."
+  })}
+          </div>
+          
+          <!-- Pagination -->
+          ${data.hasNextPage ? `
+            <div class="mt-6 flex justify-center">
+              <div class="flex space-x-2">
+                ${data.currentPage > 1 ? `
+                  <a href="${buildPageUrl(
+    data.currentPage - 1,
+    data.currentFolder,
+    data.currentType
+  )}"
+                     class="rounded-lg bg-white dark:bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-950 dark:text-white ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors">
+                    Previous
+                  </a>
+                ` : ""}
+                <span class="px-3 py-2 text-sm text-zinc-500 dark:text-zinc-400">Page ${data.currentPage}</span>
+                <a href="${buildPageUrl(
+    data.currentPage + 1,
+    data.currentFolder,
+    data.currentType
+  )}"
+                   class="rounded-lg bg-white dark:bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-950 dark:text-white ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors">
+                  Next
+                </a>
+              </div>
+            </div>
+          ` : ""}
+        </div>
+      </div>
+    </div>
+    
+    <!-- Upload Modal -->
+    <div id="upload-modal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50">
+      <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-2xl">
+        <div class="flex justify-between items-center mb-4">
+          <h3 class="text-lg font-semibold text-zinc-950 dark:text-white">Upload Files</h3>
+          <button onclick="document.getElementById('upload-modal').classList.add('hidden')" class="text-zinc-500 dark:text-zinc-400 hover:text-zinc-950 dark:hover:text-white transition-colors">
+            <svg class="w-6 h-6" 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>
+        
+        <!-- Upload Form -->
+        <form 
+          id="upload-form"
+          hx-post="/admin/media/upload"
+          hx-encoding="multipart/form-data"
+          hx-target="#upload-results"
+          class="space-y-4"
+        >
+          <!-- Drag and Drop Zone -->
+          <div
+            id="upload-zone"
+            class="upload-zone border-2 border-dashed border-zinc-950/10 dark:border-white/20 rounded-xl p-8 text-center cursor-pointer bg-zinc-50 dark:bg-zinc-800/50 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
+            onclick="document.getElementById('file-input').click()"
+          >
+            <svg class="mx-auto h-12 w-12 text-zinc-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
+              <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+            <div class="mt-4">
+              <p class="text-lg text-zinc-950 dark:text-white">Drop files here or click to upload</p>
+              <p class="text-sm text-zinc-500 dark:text-zinc-400">PNG, JPG, GIF, PDF up to 10MB</p>
+            </div>
+          </div>
+          
+          <input 
+            type="file" 
+            id="file-input" 
+            name="files" 
+            multiple 
+            accept="image/*,application/pdf,text/plain"
+            class="hidden"
+            onchange="handleFileSelect(this.files)"
+          >
+          
+          <!-- Folder Selection -->
+          <div>
+            <label class="block text-sm font-medium text-zinc-950 dark:text-white mb-2">Upload to folder:</label>
+            <select name="folder" 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 focus:outline-none focus:ring-2 focus:ring-zinc-950 dark:focus:ring-white transition-shadow">
+              <option value="uploads">uploads</option>
+              <option value="images">images</option>
+              <option value="documents">documents</option>
+            </select>
+          </div>
+
+          <!-- File List -->
+          <div id="file-list" class="hidden">
+            <h4 class="text-sm font-medium text-zinc-950 dark:text-white mb-2">Selected Files:</h4>
+            <div id="selected-files" class="space-y-2 max-h-40 overflow-y-auto"></div>
+          </div>
+
+          <!-- Upload Button -->
+          <div class="flex justify-end space-x-2">
+            <button
+              type="button"
+              onclick="document.getElementById('upload-modal').classList.add('hidden')"
+              class="rounded-lg bg-white dark:bg-zinc-800 px-4 py-2.5 text-sm font-semibold text-zinc-950 dark:text-white shadow-sm ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              id="upload-btn"
+              class="rounded-lg bg-zinc-950 dark:bg-white px-4 py-2.5 text-sm font-semibold text-white dark:text-zinc-950 hover:bg-zinc-800 dark:hover:bg-zinc-100 disabled:opacity-50 transition-colors shadow-sm"
+              disabled
+            >
+              Upload Files
+            </button>
+          </div>
+        </form>
+        
+        <!-- Upload Results -->
+        <div id="upload-results" class="mt-4"></div>
+      </div>
+    </div>
+    
+    <!-- File Details Modal -->
+    <div id="file-modal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50">
+      <div id="file-modal-content" class="rounded-xl bg-white dark:bg-zinc-900 shadow-xl ring-1 ring-zinc-950/5 dark:ring-white/10 p-6 w-full max-w-4xl max-h-screen overflow-y-auto">
+        <!-- Content loaded via HTMX -->
+      </div>
+    </div>
+
+    <!-- Move to Folder Modal -->
+    <div id="move-to-folder-modal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50">
+      <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-md">
+        <div class="flex justify-between items-center mb-4">
+          <h3 class="text-lg font-semibold text-zinc-950 dark:text-white">Move to Folder</h3>
+          <button onclick="closeMoveToFolderModal()" class="text-zinc-500 dark:text-zinc-400 hover:text-zinc-950 dark:hover:text-white transition-colors">
+            <svg class="w-6 h-6" 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>
+
+        <p class="text-sm text-zinc-500 dark:text-zinc-400 mb-4">
+          Select a folder to move <span id="move-file-count" class="font-medium text-zinc-950 dark:text-white">0</span> selected file(s) to:
+        </p>
+
+        <div class="space-y-2 mb-6">
+          ${data.folders.length > 0 ? data.folders.map(
+    (folder) => `
+            <button
+              onclick="performBulkMove('${folder.folder}')"
+              class="w-full text-left px-4 py-3 rounded-lg bg-zinc-50 dark:bg-zinc-800/50 hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-950 dark:text-white transition-colors ring-1 ring-inset ring-zinc-200 dark:ring-zinc-700"
+            >
+              <div class="flex items-center justify-between">
+                <span class="font-medium">${folder.folder}</span>
+                <span class="text-sm text-zinc-500 dark:text-zinc-400">${folder.count} files</span>
+              </div>
+            </button>
+          `
+  ).join("") : '<p class="text-sm text-zinc-500 dark:text-zinc-400 text-center py-4">No folders available</p>'}
+        </div>
+
+        <div class="flex justify-end space-x-2">
+          <button
+            onclick="closeMoveToFolderModal()"
+            class="rounded-lg bg-white dark:bg-zinc-800 px-4 py-2.5 text-sm font-semibold text-zinc-950 dark:text-white shadow-sm ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Create Folder Modal -->
+    <div id="create-folder-modal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50">
+      <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-md">
+        <div class="flex justify-between items-center mb-4">
+          <h3 class="text-lg font-semibold text-zinc-950 dark:text-white">Create New Folder</h3>
+          <button onclick="closeCreateFolderModal()" aria-label="Close" class="text-zinc-500 dark:text-zinc-400 hover:text-zinc-950 dark:hover:text-white transition-colors">
+            <svg class="w-6 h-6" 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>
+
+        <form onsubmit="createNewFolder(event)" class="space-y-4">
+          <div>
+            <label for="folder-name" class="block text-sm font-medium text-zinc-950 dark:text-white mb-2">
+              Folder Name
+            </label>
+            <input
+              type="text"
+              id="folder-name"
+              name="folderName"
+              placeholder="e.g., images, documents"
+              required
+              pattern="[a-z0-9-_]+"
+              title="Only lowercase letters, numbers, hyphens, and underscores allowed"
+              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 focus:outline-none focus:ring-2 focus:ring-cyan-500 dark:focus:ring-cyan-400 transition-shadow"
+            >
+            <p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">
+              Use lowercase letters, numbers, hyphens, and underscores only
+            </p>
+          </div>
+
+          <div class="flex justify-end space-x-2">
+            <button
+              type="button"
+              onclick="closeCreateFolderModal()"
+              class="rounded-lg bg-white dark:bg-zinc-800 px-4 py-2.5 text-sm font-semibold text-zinc-950 dark:text-white shadow-sm ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              class="rounded-lg bg-zinc-950 dark:bg-white px-4 py-2.5 text-sm font-semibold text-white dark:text-zinc-950 hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors shadow-sm"
+            >
+              Create Folder
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <style>
+      .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
+      .media-item { position: relative; border-radius: 8px; overflow: hidden; transition: transform 0.2s; }
+      .media-item:hover { transform: scale(1.02); }
+      .media-item.selected { ring: 2px solid rgba(255, 255, 255, 0.4); }
+      .upload-zone { border: 2px dashed rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); min-height: 200px; }
+      .upload-zone.dragover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.2); }
+      .file-icon { width: 48px; height: 48px; }
+      .preview-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); opacity: 0; transition: opacity 0.2s; }
+      .media-item:hover .preview-overlay { opacity: 1; }
+    </style>
+    
+    <script>
+      let selectedFiles = new Set();
+      let dragDropFiles = [];
+      
+      // File selection handling
+      function toggleFileSelection(fileId) {
+        if (selectedFiles.has(fileId)) {
+          selectedFiles.delete(fileId);
+          document.querySelector(\`[data-file-id="\${fileId}"]\`).classList.remove('selected');
+        } else {
+          selectedFiles.add(fileId);
+          document.querySelector(\`[data-file-id="\${fileId}"]\`).classList.add('selected');
+        }
+        updateBulkActionsButton();
+      }
+      
+      function toggleSelectAll() {
+        const allItems = document.querySelectorAll('[data-file-id]');
+        if (selectedFiles.size === allItems.length) {
+          selectedFiles.clear();
+          allItems.forEach(item => item.classList.remove('selected'));
+          document.getElementById('select-all-btn').textContent = 'Select All';
+        } else {
+          allItems.forEach(item => {
+            const fileId = item.dataset.fileId;
+            selectedFiles.add(fileId);
+            item.classList.add('selected');
+          });
+          document.getElementById('select-all-btn').textContent = 'Deselect All';
+        }
+        updateBulkActionsButton();
+      }
+      
+      function updateBulkActionsButton() {
+        const btn = document.getElementById('bulk-actions-btn');
+        const chevronIcon = btn.querySelector('svg');
+
+        if (selectedFiles.size > 0) {
+          btn.disabled = false;
+          btn.className = 'inline-flex items-center gap-x-1.5 px-3 py-1.5 bg-white/90 dark:bg-zinc-800/90 backdrop-blur-sm text-zinc-950 dark:text-white text-sm font-medium rounded-full ring-1 ring-inset ring-cyan-200/50 dark:ring-cyan-700/50 hover:bg-gradient-to-r hover:from-cyan-50 hover:to-blue-50 dark:hover:from-cyan-900/30 dark:hover:to-blue-900/30 hover:ring-cyan-300 dark:hover:ring-cyan-600 transition-all duration-200';
+          btn.innerHTML = \`Actions (\${selectedFiles.size}) <svg viewBox="0 0 20 20" fill="currentColor" class="size-4"><path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" /></svg>\`;
+          // Re-attach onclick handler after innerHTML update
+          btn.onclick = toggleBulkActionsDropdown;
+        } else {
+          btn.disabled = true;
+          btn.className = 'inline-flex items-center gap-x-1.5 px-3 py-1.5 bg-zinc-100/60 dark:bg-zinc-800/60 backdrop-blur-sm text-zinc-400 dark:text-zinc-600 text-sm font-medium rounded-full ring-1 ring-inset ring-zinc-200/50 dark:ring-zinc-700/50 cursor-not-allowed';
+          btn.innerHTML = \`Bulk Actions <svg viewBox="0 0 20 20" fill="currentColor" class="size-4"><path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" /></svg>\`;
+          btn.onclick = null; // Remove handler when disabled
+          // Hide menu when no files selected
+          const menu = document.getElementById('bulk-actions-menu');
+          menu.classList.remove('scale-100', 'opacity-100');
+          menu.classList.add('scale-95', 'opacity-0', 'hidden');
+        }
+      }
+
+      function toggleBulkActionsDropdown() {
+        const menu = document.getElementById('bulk-actions-menu');
+        const isHidden = menu.classList.contains('hidden');
+
+        if (isHidden) {
+          menu.classList.remove('hidden');
+          setTimeout(() => {
+            menu.classList.remove('scale-95', 'opacity-0');
+            menu.classList.add('scale-100', 'opacity-100');
+          }, 10);
+        } else {
+          menu.classList.remove('scale-100', 'opacity-100');
+          menu.classList.add('scale-95', 'opacity-0');
+          setTimeout(() => {
+            menu.classList.add('hidden');
+          }, 100);
+        }
+      }
+      
+      function confirmBulkDelete() {
+        if (selectedFiles.size === 0) return;
+        showConfirmDialog('media-bulk-delete-confirm');
+      }
+
+      async function performBulkDelete() {
+        if (selectedFiles.size === 0) return;
+
+        try {
+          // Show loading state
+          const btn = document.getElementById('bulk-actions-btn');
+          const originalText = btn.innerHTML;
+          btn.innerHTML = 'Deleting...';
+          btn.disabled = true;
+
+          // Hide menu
+          const menu = document.getElementById('bulk-actions-menu');
+          menu.classList.remove('scale-100', 'opacity-100');
+          menu.classList.add('scale-95', 'opacity-0');
+          setTimeout(() => menu.classList.add('hidden'), 100);
+          
+          const response = await fetch('/api/media/bulk-delete', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              fileIds: Array.from(selectedFiles)
+            })
+          });
+          
+          const result = await response.json();
+          
+          if (result.success) {
+            // Show success notification
+            showNotification(\`Successfully deleted \${result.summary.successful} file\${result.summary.successful > 1 ? 's' : ''}\`, 'success');
+            
+            // Remove deleted files from DOM
+            result.deleted.forEach(item => {
+              const element = document.querySelector(\`[data-file-id="\${item.fileId}"]\`);
+              if (element) {
+                element.remove();
+              }
+            });
+            
+            // Show errors if any
+            if (result.errors.length > 0) {
+              console.warn('Some files failed to delete:', result.errors);
+              showNotification(\`\${result.errors.length} file\${result.errors.length > 1 ? 's' : ''} failed to delete\`, 'warning');
+            }
+            
+            // Clear selection
+            selectedFiles.clear();
+            updateBulkActionsButton();
+            document.getElementById('select-all-btn').textContent = 'Select All';
+          } else {
+            showNotification('Failed to delete files', 'error');
+          }
+        } catch (error) {
+          console.error('Bulk delete error:', error);
+          showNotification('An error occurred while deleting files', 'error');
+        } finally {
+          // Reset button state
+          updateBulkActionsButton();
+        }
+      }
+      
+      function openMoveToFolderModal() {
+        if (selectedFiles.size === 0) return;
+
+        // Update file count in modal
+        document.getElementById('move-file-count').textContent = selectedFiles.size.toString();
+
+        // Show modal
+        document.getElementById('move-to-folder-modal').classList.remove('hidden');
+
+        // Hide bulk actions menu
+        const menu = document.getElementById('bulk-actions-menu');
+        menu.classList.remove('scale-100', 'opacity-100');
+        menu.classList.add('scale-95', 'opacity-0');
+        setTimeout(() => menu.classList.add('hidden'), 100);
+      }
+
+      function closeMoveToFolderModal() {
+        document.getElementById('move-to-folder-modal').classList.add('hidden');
+      }
+
+      function openCreateFolderModal() {
+        document.getElementById('create-folder-modal').classList.remove('hidden');
+        // Clear and focus the input
+        const input = document.getElementById('folder-name');
+        input.value = '';
+        setTimeout(() => input.focus(), 100);
+      }
+
+      function closeCreateFolderModal() {
+        document.getElementById('create-folder-modal').classList.add('hidden');
+      }
+
+      async function createNewFolder(event) {
+        event.preventDefault();
+
+        const folderName = document.getElementById('folder-name').value.trim();
+
+        if (!folderName) {
+          showNotification('Please enter a folder name', 'error');
+          return;
+        }
+
+        // Validate folder name format
+        const folderPattern = /^[a-z0-9-_]+$/;
+        if (!folderPattern.test(folderName)) {
+          showNotification('Folder name can only contain lowercase letters, numbers, hyphens, and underscores', 'error');
+          return;
+        }
+
+        try {
+          const response = await fetch('/api/media/create-folder', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ folderName })
+          });
+
+          const result = await response.json();
+
+          if (result.success) {
+            showNotification(\`Folder "\${folderName}" created successfully\`, 'success');
+            closeCreateFolderModal();
+
+            // Reload the page to show the new folder (delay to allow notification to show)
+            setTimeout(() => {
+              window.location.reload();
+            }, 2000);
+          } else {
+            showNotification(result.error || 'Failed to create folder', 'error');
+          }
+        } catch (error) {
+          console.error('Create folder error:', error);
+          showNotification('An error occurred while creating the folder', 'error');
+        }
+      }
+
+      async function performBulkMove(targetFolder) {
+        if (selectedFiles.size === 0) return;
+
+        try {
+          // Show loading state
+          closeMoveToFolderModal();
+          const btn = document.getElementById('bulk-actions-btn');
+          const originalText = btn.innerHTML;
+          btn.innerHTML = 'Moving...';
+          btn.disabled = true;
+
+          const response = await fetch('/api/media/bulk-move', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              fileIds: Array.from(selectedFiles),
+              folder: targetFolder
+            })
+          });
+
+          const result = await response.json();
+
+          if (result.success) {
+            // Show success notification
+            const movedCount = result.summary.successful;
+            showNotification(\`Successfully moved \${movedCount} file\${movedCount > 1 ? 's' : ''} to \${targetFolder}\`, 'success');
+
+            // Reload the page to show updated file locations
+            setTimeout(() => {
+              window.location.reload();
+            }, 1000);
+          } else {
+            showNotification('Failed to move files', 'error');
+            updateBulkActionsButton();
+          }
+        } catch (error) {
+          console.error('Bulk move error:', error);
+          showNotification('An error occurred while moving files', 'error');
+          updateBulkActionsButton();
+        }
+      }
+
+      function showNotification(message, type = 'info') {
+        const notification = document.createElement('div');
+        const bgColor = type === 'success' ? 'bg-green-600' :
+                       type === 'warning' ? 'bg-yellow-600' :
+                       type === 'error' ? 'bg-red-600' : 'bg-blue-600';
+
+        notification.className = \`fixed top-4 right-4 \${bgColor} text-white px-4 py-3 rounded-lg shadow-xl ring-1 ring-white/10 z-50 transition-all transform translate-x-full\`;
+        notification.textContent = message;
+        document.body.appendChild(notification);
+
+        // Animate in
+        setTimeout(() => {
+          notification.classList.remove('translate-x-full');
+        }, 100);
+
+        // Remove after 3 seconds
+        setTimeout(() => {
+          notification.classList.add('translate-x-full');
+          setTimeout(() => {
+            if (document.body.contains(notification)) {
+              document.body.removeChild(notification);
+            }
+          }, 300);
+        }, 3000);
+      }
+      
+      // URL parameter helpers
+      function updateUrlParam(param, value) {
+        const url = new URL(window.location);
+        url.searchParams.set(param, value);
+        return url.toString();
+      }
+      
+      // Drag and drop handling
+      const uploadZone = document.getElementById('upload-zone');
+      
+      ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+        uploadZone.addEventListener(eventName, preventDefaults, false);
+      });
+      
+      function preventDefaults(e) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+      
+      ['dragenter', 'dragover'].forEach(eventName => {
+        uploadZone.addEventListener(eventName, () => uploadZone.classList.add('dragover'), false);
+      });
+      
+      ['dragleave', 'drop'].forEach(eventName => {
+        uploadZone.addEventListener(eventName, () => uploadZone.classList.remove('dragover'), false);
+      });
+      
+      uploadZone.addEventListener('drop', handleDrop, false);
+      
+      function handleDrop(e) {
+        const dt = e.dataTransfer;
+        const files = dt.files;
+        handleFileSelect(files);
+      }
+      
+      function handleFileSelect(files) {
+        dragDropFiles = Array.from(files);
+        
+        // Update the actual file input with the selected files
+        const fileInput = document.getElementById('file-input');
+        const dt = new DataTransfer();
+        dragDropFiles.forEach(file => dt.items.add(file));
+        fileInput.files = dt.files;
+        
+        displaySelectedFiles();
+        document.getElementById('upload-btn').disabled = false;
+      }
+      
+      function displaySelectedFiles() {
+        const fileList = document.getElementById('file-list');
+        const selectedFilesDiv = document.getElementById('selected-files');
+
+        selectedFilesDiv.innerHTML = '';
+
+        dragDropFiles.forEach((file, index) => {
+          const fileItem = document.createElement('div');
+          fileItem.className = 'flex items-center justify-between p-2 rounded-lg bg-zinc-50 dark:bg-zinc-800 ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10';
+          fileItem.innerHTML = \`
+            <div class="flex items-center space-x-2">
+              <span class="text-sm text-zinc-950 dark:text-white">\${file.name}</span>
+              <span class="text-xs text-zinc-500 dark:text-zinc-400">(\${formatFileSize(file.size)})</span>
+            </div>
+            <button onclick="removeFile(\${index})" class="text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 transition-colors">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+              </svg>
+            </button>
+          \`;
+          selectedFilesDiv.appendChild(fileItem);
+        });
+
+        fileList.classList.toggle('hidden', dragDropFiles.length === 0);
+      }
+      
+      function removeFile(index) {
+        dragDropFiles.splice(index, 1);
+        displaySelectedFiles();
+        
+        const fileInput = document.getElementById('file-input');
+        const dt = new DataTransfer();
+        dragDropFiles.forEach(file => dt.items.add(file));
+        fileInput.files = dt.files;
+        
+        document.getElementById('upload-btn').disabled = dragDropFiles.length === 0;
+      }
+      
+      function formatFileSize(bytes) {
+        if (bytes === 0) return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+      }
+      
+      // Copy to clipboard function
+      function copyToClipboard(text) {
+        navigator.clipboard.writeText(text).then(() => {
+          const notification = document.createElement('div');
+          notification.className = 'fixed top-4 right-4 bg-green-600 text-white px-4 py-3 rounded-lg shadow-xl ring-1 ring-white/10 z-50';
+          notification.textContent = 'URL copied to clipboard!';
+          document.body.appendChild(notification);
+          setTimeout(() => document.body.removeChild(notification), 2000);
+        }).catch(err => {
+          console.error('Failed to copy: ', err);
+        });
+      }
+
+      // Toggle clear button visibility
+      function toggleMediaClearButton() {
+        const searchInput = document.getElementById('media-search-input');
+        const clearButton = document.getElementById('clear-media-search');
+        if (searchInput.value.trim()) {
+          clearButton.classList.remove('hidden');
+        } else {
+          clearButton.classList.add('hidden');
+        }
+      }
+
+      // Clear search input
+      function clearMediaSearch() {
+        const searchInput = document.getElementById('media-search-input');
+        searchInput.value = '';
+        toggleMediaClearButton();
+        // Trigger htmx to refresh the grid
+        htmx.trigger(searchInput, 'keyup');
+      }
+
+      // Initialize clear button visibility on page load
+      document.addEventListener('DOMContentLoaded', function() {
+        toggleMediaClearButton();
+      });
+
+      // Close modal when clicking outside
+      document.getElementById('file-modal').addEventListener('click', function(e) {
+        if (e.target === this) {
+          this.classList.add('hidden');
+        }
+      });
+      
+      // Close bulk actions dropdown when clicking outside
+      document.addEventListener('click', function(e) {
+        const dropdown = document.getElementById('bulk-actions-dropdown');
+        const menu = document.getElementById('bulk-actions-menu');
+        if (dropdown && menu && !dropdown.contains(e.target)) {
+          menu.classList.remove('scale-100', 'opacity-100');
+          menu.classList.add('scale-95', 'opacity-0');
+          setTimeout(() => {
+            menu.classList.add('hidden');
+          }, 100);
+        }
+      });
+    </script>
+
+    <!-- Confirmation Dialog for Bulk Delete -->
+    ${renderConfirmationDialog({
+    id: "media-bulk-delete-confirm",
+    title: "Delete Selected Files",
+    message: `Are you sure you want to delete ${data.files.length > 0 ? "the selected files" : "these files"}? This action cannot be undone and the files will be permanently removed.`,
+    confirmText: "Delete Files",
+    cancelText: "Cancel",
+    confirmClass: "bg-red-500 hover:bg-red-400",
+    iconColor: "red",
+    onConfirm: "performBulkDelete()"
+  })}
+
+    <!-- Confirmation Dialog Script -->
+    ${getConfirmationDialogScript()}
+  `;
+  function buildPageUrl(page, folder, type) {
+    const params = new URLSearchParams();
+    params.set("page", page.toString());
+    if (folder !== "all") params.set("folder", folder);
+    if (type !== "all") params.set("type", type);
+    return `/admin/media?${params.toString()}`;
+  }
+  const layoutData = {
+    title: "Media Library",
+    currentPath: "/admin/media",
+    user: data.user,
+    version: data.version,
+    content: pageContent
+  };
+  return renderAdminLayoutCatalyst(layoutData);
+}
+
+// src/templates/components/media-file-details.template.ts
+function renderMediaFileDetails(data) {
+  const { file } = data;
+  return `
+    <div class="flex justify-between items-center mb-4">
+      <h3 class="text-lg font-semibold text-zinc-950 dark:text-white">File Details</h3>
+      <button onclick="document.getElementById('file-modal').classList.add('hidden')" class="text-zinc-500 dark:text-zinc-400 hover:text-zinc-950 dark:hover:text-white transition-colors">
+        <svg class="w-6 h-6" 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>
+    
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      <!-- Preview -->
+      <div class="space-y-4">
+        <div class="rounded-xl bg-zinc-50 dark:bg-zinc-800 p-4">
+          ${file.isImage ? `
+            <img src="${file.public_url}" alt="${file.alt || file.filename}" class="w-full h-auto rounded-lg">
+          ` : file.isVideo ? `
+            <video src="${file.public_url}" controls class="w-full h-auto rounded-lg"></video>
+          ` : `
+            <div class="flex items-center justify-center h-32">
+              <svg class="w-12 h-12 text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+              </svg>
+            </div>
+          `}
+        </div>
+
+        <div class="text-center space-x-2">
+          <button
+            onclick="copyToClipboard('${file.public_url}')"
+            class="inline-flex items-center rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700 transition-colors"
+          >
+            Copy URL
+          </button>
+          <a
+            href="${file.public_url}"
+            target="_blank"
+            class="inline-flex items-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 transition-colors"
+          >
+            Open Original
+          </a>
+        </div>
+      </div>
+      
+      <!-- Details -->
+      <div class="space-y-4">
+        <div>
+          <label class="block text-sm font-medium text-zinc-950 dark:text-white mb-1">Filename</label>
+          <p class="text-sm text-zinc-500 dark:text-zinc-400">${file.original_name}</p>
+        </div>
+
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <label class="block text-sm font-medium text-zinc-950 dark:text-white mb-1">Size</label>
+            <p class="text-sm text-zinc-500 dark:text-zinc-400">${file.fileSize}</p>
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-zinc-950 dark:text-white mb-1">Type</label>
+            <p class="text-sm text-zinc-500 dark:text-zinc-400">${file.mime_type}</p>
+          </div>
+        </div>
+
+        ${file.width && file.height ? `
+          <div class="grid grid-cols-2 gap-4">
+            <div>
+              <label class="block text-sm font-medium text-zinc-950 dark:text-white mb-1">Width</label>
+              <p class="text-sm text-zinc-500 dark:text-zinc-400">${file.width}px</p>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-zinc-950 dark:text-white mb-1">Height</label>
+              <p class="text-sm text-zinc-500 dark:text-zinc-400">${file.height}px</p>
+            </div>
+          </div>
+        ` : ""}
+
+        <div>
+          <label class="block text-sm font-medium text-zinc-950 dark:text-white mb-1">Folder</label>
+          <p class="text-sm text-zinc-500 dark:text-zinc-400">${file.folder}</p>
+        </div>
+
+        <div>
+          <label class="block text-sm font-medium text-zinc-950 dark:text-white mb-1">Uploaded</label>
+          <p class="text-sm text-zinc-500 dark:text-zinc-400">${file.uploadedAt}</p>
+        </div>
+
+        <!-- Editable Fields -->
+        <form hx-put="/admin/media/${file.id}" hx-target="#file-modal-content" class="space-y-4">
+          <div>
+            <label class="block text-sm font-medium text-zinc-950 dark:text-white mb-1">Alt Text</label>
+            <input
+              type="text"
+              name="alt"
+              value="${file.alt || ""}"
+              class="w-full rounded-lg bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-950 dark:text-white placeholder-zinc-500 dark:placeholder-zinc-400 ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 focus:ring-2 focus:ring-blue-600 dark:focus:ring-blue-500 focus:outline-none transition-colors"
+              placeholder="Describe this image..."
+            >
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-zinc-950 dark:text-white mb-1">Caption</label>
+            <textarea
+              name="caption"
+              rows="3"
+              class="w-full rounded-lg bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-950 dark:text-white placeholder-zinc-500 dark:placeholder-zinc-400 ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 focus:ring-2 focus:ring-blue-600 dark:focus:ring-blue-500 focus:outline-none transition-colors"
+              placeholder="Optional caption..."
+            >${file.caption || ""}</textarea>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-zinc-950 dark:text-white mb-1">Tags</label>
+            <input
+              type="text"
+              name="tags"
+              value="${file.tags.join(", ")}"
+              class="w-full rounded-lg bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-950 dark:text-white placeholder-zinc-500 dark:placeholder-zinc-400 ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 focus:ring-2 focus:ring-blue-600 dark:focus:ring-blue-500 focus:outline-none transition-colors"
+              placeholder="tag1, tag2, tag3"
+            >
+          </div>
+
+          <div class="flex justify-between">
+            <button
+              type="submit"
+              class="rounded-lg bg-green-600 px-4 py-2 text-sm font-semibold text-white hover:bg-green-700 transition-colors"
+            >
+              Save Changes
+            </button>
+            <button
+              type="button"
+              hx-delete="/admin/media/${file.id}"
+              hx-confirm="Are you sure you want to delete this file?"
+              hx-target="body"
+              class="rounded-lg bg-red-600 px-4 py-2 text-sm font-semibold text-white hover:bg-red-700 transition-colors"
+            >
+              Delete File
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  `;
+}
+
+// src/routes/admin-media.ts
+var fileValidationSchema2 = zod.z.object({
+  name: zod.z.string().min(1).max(255),
+  type: zod.z.string().refine(
+    (type) => {
+      const allowedTypes = [
+        // Images
+        "image/jpeg",
+        "image/jpg",
+        "image/png",
+        "image/gif",
+        "image/webp",
+        "image/svg+xml",
+        // Documents
+        "application/pdf",
+        "text/plain",
+        "application/msword",
+        "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+        // Videos
+        "video/mp4",
+        "video/webm",
+        "video/ogg",
+        "video/avi",
+        "video/mov",
+        // Audio
+        "audio/mp3",
+        "audio/wav",
+        "audio/ogg",
+        "audio/m4a"
+      ];
+      return allowedTypes.includes(type);
+    },
+    { message: "Unsupported file type" }
+  ),
+  size: zod.z.number().min(1).max(50 * 1024 * 1024)
+  // 50MB max
+});
+var adminMediaRoutes = new hono.Hono();
+adminMediaRoutes.get("/", async (c) => {
+  try {
+    const user = c.get("user");
+    const { searchParams } = new URL(c.req.url);
+    const folder = searchParams.get("folder") || "all";
+    const type = searchParams.get("type") || "all";
+    const view = searchParams.get("view") || "grid";
+    const page = parseInt(searchParams.get("page") || "1");
+    const cacheBust = searchParams.get("t");
+    const limit = 24;
+    const offset = (page - 1) * limit;
+    const db = c.env.DB;
+    let query = "SELECT * FROM media";
+    const params = [];
+    const conditions = ["deleted_at IS NULL"];
+    if (folder !== "all") {
+      conditions.push("folder = ?");
+      params.push(folder);
+    }
+    if (type !== "all") {
+      switch (type) {
+        case "images":
+          conditions.push("mime_type LIKE ?");
+          params.push("image/%");
+          break;
+        case "documents":
+          conditions.push("mime_type IN (?, ?, ?)");
+          params.push("application/pdf", "text/plain", "application/msword");
+          break;
+        case "videos":
+          conditions.push("mime_type LIKE ?");
+          params.push("video/%");
+          break;
+      }
+    }
+    if (conditions.length > 0) {
+      query += ` WHERE ${conditions.join(" AND ")}`;
+    }
+    query += ` ORDER BY uploaded_at DESC LIMIT ${limit} OFFSET ${offset}`;
+    const stmt = db.prepare(query);
+    const { results } = await stmt.bind(...params).all();
+    const foldersStmt = db.prepare(`
+      SELECT folder, COUNT(*) as count, SUM(size) as totalSize
+      FROM media 
+      GROUP BY folder 
+      ORDER BY folder
+    `);
+    const { results: folders } = await foldersStmt.all();
+    const typesStmt = db.prepare(`
+      SELECT 
+        CASE 
+          WHEN mime_type LIKE 'image/%' THEN 'images'
+          WHEN mime_type LIKE 'video/%' THEN 'videos'
+          WHEN mime_type IN ('application/pdf', 'text/plain') THEN 'documents'
+          ELSE 'other'
+        END as type,
+        COUNT(*) as count
+      FROM media 
+      GROUP BY type
+    `);
+    const { results: types } = await typesStmt.all();
+    const mediaFiles = results.map((row) => ({
+      id: row.id,
+      filename: row.filename,
+      original_name: row.original_name,
+      mime_type: row.mime_type,
+      size: row.size,
+      public_url: `/files/${row.r2_key}`,
+      thumbnail_url: row.mime_type.startsWith("image/") ? `/files/${row.r2_key}` : void 0,
+      alt: row.alt,
+      caption: row.caption,
+      tags: row.tags ? JSON.parse(row.tags) : [],
+      uploaded_at: row.uploaded_at,
+      fileSize: formatFileSize(row.size),
+      uploadedAt: new Date(row.uploaded_at).toLocaleDateString(),
+      isImage: row.mime_type.startsWith("image/"),
+      isVideo: row.mime_type.startsWith("video/"),
+      isDocument: !row.mime_type.startsWith("image/") && !row.mime_type.startsWith("video/")
+    }));
+    const pageData = {
+      files: mediaFiles,
+      folders: folders.map((f) => ({
+        folder: f.folder,
+        count: f.count,
+        totalSize: f.totalSize
+      })),
+      types: types.map((t) => ({
+        type: t.type,
+        count: t.count
+      })),
+      currentFolder: folder,
+      currentType: type,
+      currentView: view,
+      currentPage: page,
+      totalFiles: results.length,
+      hasNextPage: results.length === limit,
+      user: {
+        name: user.email,
+        email: user.email,
+        role: user.role
+      },
+      version: c.get("appVersion")
+    };
+    return c.html(renderMediaLibraryPage(pageData));
+  } catch (error) {
+    console.error("Error loading media library:", error);
+    return c.html(html.html`<p>Error loading media library</p>`);
+  }
+});
+adminMediaRoutes.get("/selector", async (c) => {
+  try {
+    const { searchParams } = new URL(c.req.url);
+    const search = searchParams.get("search") || "";
+    const db = c.env.DB;
+    let query = "SELECT * FROM media WHERE deleted_at IS NULL";
+    const params = [];
+    if (search.trim()) {
+      query += " AND (filename LIKE ? OR original_name LIKE ? OR alt LIKE ?)";
+      const searchTerm = `%${search}%`;
+      params.push(searchTerm, searchTerm, searchTerm);
+    }
+    query += " ORDER BY uploaded_at DESC LIMIT 24";
+    const stmt = db.prepare(query);
+    const { results } = await stmt.bind(...params).all();
+    const mediaFiles = results.map((row) => ({
+      id: row.id,
+      filename: row.filename,
+      original_name: row.original_name,
+      mime_type: row.mime_type,
+      size: row.size,
+      public_url: `/files/${row.r2_key}`,
+      thumbnail_url: row.mime_type.startsWith("image/") ? `/files/${row.r2_key}` : void 0,
+      alt: row.alt,
+      tags: row.tags ? JSON.parse(row.tags) : [],
+      uploaded_at: row.uploaded_at,
+      fileSize: formatFileSize(row.size),
+      uploadedAt: new Date(row.uploaded_at).toLocaleDateString(),
+      isImage: row.mime_type.startsWith("image/"),
+      isVideo: row.mime_type.startsWith("video/"),
+      isDocument: !row.mime_type.startsWith("image/") && !row.mime_type.startsWith("video/")
+    }));
+    return c.html(html.html`
+      <div class="mb-4">
+        <input
+          type="search"
+          id="media-selector-search"
+          placeholder="Search files..."
+          class="w-full rounded-lg bg-white dark:bg-zinc-800 px-4 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"
+          hx-get="/admin/media/selector"
+          hx-trigger="keyup changed delay:300ms"
+          hx-target="#media-selector-grid"
+          hx-include="[name='search']"
+        >
+      </div>
+
+      <div id="media-selector-grid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 max-h-96 overflow-y-auto">
+        ${html.raw(mediaFiles.map((file) => `
+          <div
+            class="relative group cursor-pointer rounded-lg overflow-hidden bg-zinc-50 dark:bg-zinc-800 shadow-sm hover:shadow-md transition-shadow"
+            data-media-id="${file.id}"
+          >
+            <div class="aspect-square relative">
+              ${file.isImage ? `
+                <img
+                  src="${file.public_url}"
+                  alt="${file.alt || file.filename}"
+                  class="w-full h-full object-cover"
+                  loading="lazy"
+                >
+              ` : file.isVideo ? `
+                <video
+                  src="${file.public_url}"
+                  class="w-full h-full object-cover"
+                  muted
+                ></video>
+              ` : `
+                <div class="w-full h-full flex items-center justify-center bg-zinc-100 dark:bg-zinc-700">
+                  <div class="text-center">
+                    <svg class="w-12 h-12 mx-auto text-zinc-400 dark:text-zinc-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                    </svg>
+                    <span class="text-xs text-zinc-500 dark:text-zinc-400 mt-1">${file.filename.split(".").pop()?.toUpperCase()}</span>
+                  </div>
+                </div>
+              `}
+
+              <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                <button
+                  type="button"
+                  onclick="selectMediaFile('${file.id}', '${file.public_url.replace(/'/g, "\\'")}', '${file.filename.replace(/'/g, "\\'")}')"
+                  class="px-4 py-2 bg-white dark:bg-zinc-900 text-zinc-950 dark:text-white rounded-lg font-medium hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
+                >
+                  Select
+                </button>
+              </div>
+            </div>
+
+            <div class="p-2">
+              <p class="text-xs text-zinc-700 dark:text-zinc-300 truncate" title="${file.original_name}">
+                ${file.original_name}
+              </p>
+              <p class="text-xs text-zinc-500 dark:text-zinc-400">
+                ${file.fileSize}
+              </p>
+            </div>
+          </div>
+        `).join(""))}
+      </div>
+
+      ${mediaFiles.length === 0 ? html.html`
+        <div class="text-center py-12 text-zinc-500 dark:text-zinc-400">
+          <svg class="mx-auto h-12 w-12 text-zinc-400 dark:text-zinc-500" 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>
+          <p class="mt-2">No media files found</p>
+        </div>
+      ` : ""}
+    `);
+  } catch (error) {
+    console.error("Error loading media selector:", error);
+    return c.html(html.html`<div class="text-red-500 dark:text-red-400">Error loading media files</div>`);
+  }
+});
+adminMediaRoutes.get("/search", async (c) => {
+  try {
+    const { searchParams } = new URL(c.req.url);
+    const search = searchParams.get("search") || "";
+    const folder = searchParams.get("folder") || "all";
+    const type = searchParams.get("type") || "all";
+    const db = c.env.DB;
+    let query = "SELECT * FROM media";
+    const params = [];
+    const conditions = [];
+    if (search.trim()) {
+      conditions.push("(filename LIKE ? OR original_name LIKE ? OR alt LIKE ?)");
+      const searchTerm = `%${search}%`;
+      params.push(searchTerm, searchTerm, searchTerm);
+    }
+    if (folder !== "all") {
+      conditions.push("folder = ?");
+      params.push(folder);
+    }
+    if (type !== "all") {
+      switch (type) {
+        case "images":
+          conditions.push("mime_type LIKE ?");
+          params.push("image/%");
+          break;
+        case "documents":
+          conditions.push("mime_type IN (?, ?, ?)");
+          params.push("application/pdf", "text/plain", "application/msword");
+          break;
+        case "videos":
+          conditions.push("mime_type LIKE ?");
+          params.push("video/%");
+          break;
+      }
+    }
+    if (conditions.length > 0) {
+      query += ` WHERE ${conditions.join(" AND ")}`;
+    }
+    query += ` ORDER BY uploaded_at DESC LIMIT 24`;
+    const stmt = db.prepare(query);
+    const { results } = await stmt.bind(...params).all();
+    const mediaFiles = results.map((row) => ({
+      ...row,
+      public_url: `/files/${row.r2_key}`,
+      thumbnail_url: row.mime_type.startsWith("image/") ? `/files/${row.r2_key}` : void 0,
+      tags: row.tags ? JSON.parse(row.tags) : [],
+      uploadedAt: new Date(row.uploaded_at).toLocaleDateString(),
+      fileSize: formatFileSize(row.size),
+      isImage: row.mime_type.startsWith("image/"),
+      isVideo: row.mime_type.startsWith("video/"),
+      isDocument: !row.mime_type.startsWith("image/") && !row.mime_type.startsWith("video/")
+    }));
+    const gridHTML = mediaFiles.map((file) => generateMediaItemHTML(file)).join("");
+    return c.html(html.raw(gridHTML));
+  } catch (error) {
+    console.error("Error searching media:", error);
+    return c.html('<div class="text-red-500">Error searching files</div>');
+  }
+});
+adminMediaRoutes.get("/:id/details", async (c) => {
+  try {
+    const id = c.req.param("id");
+    const db = c.env.DB;
+    const stmt = db.prepare("SELECT * FROM media WHERE id = ?");
+    const result = await stmt.bind(id).first();
+    if (!result) {
+      return c.html('<div class="text-red-500">File not found</div>');
+    }
+    const file = {
+      id: result.id,
+      filename: result.filename,
+      original_name: result.original_name,
+      mime_type: result.mime_type,
+      size: result.size,
+      public_url: `/files/${result.r2_key}`,
+      thumbnail_url: result.mime_type.startsWith("image/") ? `/files/${result.r2_key}` : void 0,
+      alt: result.alt,
+      caption: result.caption,
+      tags: result.tags ? JSON.parse(result.tags) : [],
+      uploaded_at: result.uploaded_at,
+      fileSize: formatFileSize(result.size),
+      uploadedAt: new Date(result.uploaded_at).toLocaleString(),
+      isImage: result.mime_type.startsWith("image/"),
+      isVideo: result.mime_type.startsWith("video/"),
+      isDocument: !result.mime_type.startsWith("image/") && !result.mime_type.startsWith("video/"),
+      width: result.width,
+      height: result.height,
+      folder: result.folder
+    };
+    const detailsData = { file };
+    return c.html(renderMediaFileDetails(detailsData));
+  } catch (error) {
+    console.error("Error fetching file details:", error);
+    return c.html('<div class="text-red-500">Error loading file details</div>');
+  }
+});
+adminMediaRoutes.post("/upload", async (c) => {
+  try {
+    const user = c.get("user");
+    const formData = await c.req.formData();
+    const files = formData.getAll("files");
+    if (!files || files.length === 0) {
+      return c.html(html.html`
+        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+          No files provided
+        </div>
+      `);
+    }
+    const uploadResults = [];
+    const errors = [];
+    for (const file of files) {
+      try {
+        const validation = fileValidationSchema2.safeParse({
+          name: file.name,
+          type: file.type,
+          size: file.size
+        });
+        if (!validation.success) {
+          errors.push({
+            filename: file.name,
+            error: validation.error.issues[0]?.message || "Validation failed"
+          });
+          continue;
+        }
+        const fileId = globalThis.crypto.randomUUID();
+        const fileExtension = file.name.split(".").pop() || "";
+        const filename = `${fileId}.${fileExtension}`;
+        const folder = formData.get("folder") || "uploads";
+        const r2Key = `${folder}/${filename}`;
+        const arrayBuffer = await file.arrayBuffer();
+        const uploadResult = await c.env.MEDIA_BUCKET.put(r2Key, arrayBuffer, {
+          httpMetadata: {
+            contentType: file.type,
+            contentDisposition: `inline; filename="${file.name}"`
+          },
+          customMetadata: {
+            originalName: file.name,
+            uploadedBy: user.userId,
+            uploadedAt: (/* @__PURE__ */ new Date()).toISOString()
+          }
+        });
+        if (!uploadResult) {
+          errors.push({
+            filename: file.name,
+            error: "Failed to upload to storage"
+          });
+          continue;
+        }
+        let width;
+        let height;
+        if (file.type.startsWith("image/") && !file.type.includes("svg")) {
+          try {
+            const dimensions = await getImageDimensions2(arrayBuffer);
+            width = dimensions.width;
+            height = dimensions.height;
+          } catch (error) {
+            console.warn("Failed to extract image dimensions:", error);
+          }
+        }
+        const publicUrl = `/files/${r2Key}`;
+        const thumbnailUrl = file.type.startsWith("image/") ? publicUrl : void 0;
+        const stmt = c.env.DB.prepare(`
+          INSERT INTO media (
+            id, filename, original_name, mime_type, size, width, height, 
+            folder, r2_key, public_url, thumbnail_url, uploaded_by, uploaded_at
+          ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+        `);
+        await stmt.bind(
+          fileId,
+          filename,
+          file.name,
+          file.type,
+          file.size,
+          width,
+          height,
+          folder,
+          r2Key,
+          publicUrl,
+          thumbnailUrl,
+          user.userId,
+          Math.floor(Date.now() / 1e3)
+        ).run();
+        uploadResults.push({
+          id: fileId,
+          filename,
+          originalName: file.name,
+          mimeType: file.type,
+          size: file.size,
+          publicUrl
+        });
+      } catch (error) {
+        errors.push({
+          filename: file.name,
+          error: "Upload failed: " + (error instanceof Error ? error.message : "Unknown error")
+        });
+      }
+    }
+    let mediaGridHTML = "";
+    if (uploadResults.length > 0) {
+      try {
+        const folder = formData.get("folder") || "uploads";
+        const query = "SELECT * FROM media WHERE deleted_at IS NULL ORDER BY uploaded_at DESC LIMIT 24";
+        const stmt = c.env.DB.prepare(query);
+        const { results } = await stmt.all();
+        const mediaFiles = results.map((row) => ({
+          id: row.id,
+          filename: row.filename,
+          original_name: row.original_name,
+          mime_type: row.mime_type,
+          size: row.size,
+          public_url: `/files/${row.r2_key}`,
+          thumbnail_url: row.mime_type.startsWith("image/") ? `/files/${row.r2_key}` : void 0,
+          tags: row.tags ? JSON.parse(row.tags) : [],
+          uploaded_at: row.uploaded_at,
+          fileSize: formatFileSize(row.size),
+          uploadedAt: new Date(row.uploaded_at).toLocaleDateString(),
+          isImage: row.mime_type.startsWith("image/"),
+          isVideo: row.mime_type.startsWith("video/"),
+          isDocument: !row.mime_type.startsWith("image/") && !row.mime_type.startsWith("video/")
+        }));
+        mediaGridHTML = mediaFiles.map((file) => renderMediaFileCard(file, "grid", true)).join("");
+      } catch (error) {
+        console.error("Error fetching updated media list:", error);
+      }
+    }
+    return c.html(html.html`
+      ${uploadResults.length > 0 ? html.html`
+        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
+          Successfully uploaded ${uploadResults.length} file${uploadResults.length > 1 ? "s" : ""}
+        </div>
+      ` : ""}
+
+      ${errors.length > 0 ? html.html`
+        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+          <p class="font-medium">Upload errors:</p>
+          <ul class="list-disc list-inside mt-2">
+            ${errors.map((error) => html.html`
+              <li>${error.filename}: ${error.error}</li>
+            `)}
+          </ul>
+        </div>
+      ` : ""}
+
+      ${uploadResults.length > 0 ? html.html`
+        <script>
+          // Close modal and refresh page after successful upload with cache busting
+          setTimeout(() => {
+            document.getElementById('upload-modal').classList.add('hidden');
+            window.location.href = '/admin/media?t=' + Date.now();
+          }, 1500);
+        </script>
+      ` : ""}
+    `);
+  } catch (error) {
+    console.error("Upload error:", error);
+    return c.html(html.html`
+      <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+        Upload failed: ${error instanceof Error ? error.message : "Unknown error"}
+      </div>
+    `);
+  }
+});
+adminMediaRoutes.get("/file/*", async (c) => {
+  try {
+    const r2Key = c.req.path.replace("/admin/media/file/", "");
+    if (!r2Key) {
+      return c.notFound();
+    }
+    const object = await c.env.MEDIA_BUCKET.get(r2Key);
+    if (!object) {
+      return c.notFound();
+    }
+    const headers = new Headers();
+    object.httpMetadata?.contentType && headers.set("Content-Type", object.httpMetadata.contentType);
+    object.httpMetadata?.contentDisposition && headers.set("Content-Disposition", object.httpMetadata.contentDisposition);
+    headers.set("Cache-Control", "public, max-age=31536000");
+    return new Response(object.body, {
+      headers
+    });
+  } catch (error) {
+    console.error("Error serving file:", error);
+    return c.notFound();
+  }
+});
+adminMediaRoutes.put("/:id", async (c) => {
+  try {
+    const user = c.get("user");
+    const fileId = c.req.param("id");
+    const formData = await c.req.formData();
+    const stmt = c.env.DB.prepare("SELECT * FROM media WHERE id = ? AND deleted_at IS NULL");
+    const fileRecord = await stmt.bind(fileId).first();
+    if (!fileRecord) {
+      return c.html(html.html`
+        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+          File not found
+        </div>
+      `);
+    }
+    if (fileRecord.uploaded_by !== user.userId && user.role !== "admin") {
+      return c.html(html.html`
+        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+          Permission denied
+        </div>
+      `);
+    }
+    const alt = formData.get("alt") || null;
+    const caption = formData.get("caption") || null;
+    const tagsString = formData.get("tags") || "";
+    const tags = tagsString ? tagsString.split(",").map((tag) => tag.trim()).filter((tag) => tag) : [];
+    const updateStmt = c.env.DB.prepare(`
+      UPDATE media 
+      SET alt = ?, caption = ?, tags = ?, updated_at = ?
+      WHERE id = ?
+    `);
+    await updateStmt.bind(
+      alt,
+      caption,
+      JSON.stringify(tags),
+      Math.floor(Date.now() / 1e3),
+      fileId
+    ).run();
+    return c.html(html.html`
+      <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
+        File updated successfully
+      </div>
+      <script>
+        // Refresh the file details
+        setTimeout(() => {
+          htmx.trigger('#file-modal-content', 'htmx:load');
+        }, 1000);
+      </script>
+    `);
+  } catch (error) {
+    console.error("Update error:", error);
+    return c.html(html.html`
+      <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+        Update failed: ${error instanceof Error ? error.message : "Unknown error"}
+      </div>
+    `);
+  }
+});
+adminMediaRoutes.delete("/:id", async (c) => {
+  try {
+    const user = c.get("user");
+    const fileId = c.req.param("id");
+    const stmt = c.env.DB.prepare("SELECT * FROM media WHERE id = ? AND deleted_at IS NULL");
+    const fileRecord = await stmt.bind(fileId).first();
+    if (!fileRecord) {
+      return c.html(html.html`
+        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+          File not found
+        </div>
+      `);
+    }
+    if (fileRecord.uploaded_by !== user.userId && user.role !== "admin") {
+      return c.html(html.html`
+        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+          Permission denied
+        </div>
+      `);
+    }
+    try {
+      await c.env.MEDIA_BUCKET.delete(fileRecord.r2_key);
+    } catch (error) {
+      console.warn("Failed to delete from R2:", error);
+    }
+    const deleteStmt = c.env.DB.prepare("UPDATE media SET deleted_at = ? WHERE id = ?");
+    await deleteStmt.bind(Math.floor(Date.now() / 1e3), fileId).run();
+    return c.html(html.html`
+      <script>
+        // Close modal if open
+        const modal = document.getElementById('file-modal');
+        if (modal) {
+          modal.classList.add('hidden');
+        }
+        // Redirect to media library
+        window.location.href = '/admin/media';
+      </script>
+    `);
+  } catch (error) {
+    console.error("Delete error:", error);
+    return c.html(html.html`
+      <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+        Delete failed: ${error instanceof Error ? error.message : "Unknown error"}
+      </div>
+    `);
+  }
+});
+async function getImageDimensions2(arrayBuffer) {
+  const uint8Array = new Uint8Array(arrayBuffer);
+  if (uint8Array[0] === 255 && uint8Array[1] === 216) {
+    return getJPEGDimensions2(uint8Array);
+  }
+  if (uint8Array[0] === 137 && uint8Array[1] === 80 && uint8Array[2] === 78 && uint8Array[3] === 71) {
+    return getPNGDimensions2(uint8Array);
+  }
+  return { width: 0, height: 0 };
+}
+function getJPEGDimensions2(uint8Array) {
+  let i = 2;
+  while (i < uint8Array.length - 8) {
+    if (uint8Array[i] === 255 && uint8Array[i + 1] === 192) {
+      return {
+        height: uint8Array[i + 5] << 8 | uint8Array[i + 6],
+        width: uint8Array[i + 7] << 8 | uint8Array[i + 8]
+      };
+    }
+    const segmentLength = uint8Array[i + 2] << 8 | uint8Array[i + 3];
+    i += 2 + segmentLength;
+  }
+  return { width: 0, height: 0 };
+}
+function getPNGDimensions2(uint8Array) {
+  if (uint8Array.length < 24) {
+    return { width: 0, height: 0 };
+  }
+  return {
+    width: uint8Array[16] << 24 | uint8Array[17] << 16 | uint8Array[18] << 8 | uint8Array[19],
+    height: uint8Array[20] << 24 | uint8Array[21] << 16 | uint8Array[22] << 8 | uint8Array[23]
+  };
+}
+function generateMediaItemHTML(file) {
+  const isImage = file.isImage;
+  const isVideo = file.isVideo;
+  return `
+    <div 
+      class="media-item bg-white rounded-lg shadow-sm overflow-hidden cursor-pointer" 
+      data-file-id="${file.id}"
+      onclick="toggleFileSelection('${file.id}')"
+    >
+      <div class="aspect-square relative">
+        ${isImage ? `
+          <img 
+            src="${file.public_url}" 
+            alt="${file.alt || file.filename}"
+            class="w-full h-full object-cover"
+            loading="lazy"
+          >
+        ` : isVideo ? `
+          <video 
+            src="${file.public_url}" 
+            class="w-full h-full object-cover"
+            muted
+          ></video>
+        ` : `
+          <div class="w-full h-full flex items-center justify-center bg-gray-100">
+            <div class="text-center">
+              <svg class="file-icon mx-auto text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+              </svg>
+              <span class="text-xs text-gray-500 mt-1">${file.filename.split(".").pop()?.toUpperCase()}</span>
+            </div>
+          </div>
+        `}
+        
+        <div class="preview-overlay flex items-center justify-center">
+          <div class="flex space-x-2">
+            <button 
+              onclick="event.stopPropagation(); showFileDetails('${file.id}')"
+              class="p-2 bg-white bg-opacity-20 rounded-full hover:bg-opacity-30"
+            >
+              <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+              </svg>
+            </button>
+            <button 
+              onclick="event.stopPropagation(); copyToClipboard('${file.public_url}')"
+              class="p-2 bg-white bg-opacity-20 rounded-full hover:bg-opacity-30"
+            >
+              <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+      
+      <div class="p-3">
+        <h4 class="text-sm font-medium text-gray-900 truncate" title="${file.original_name}">
+          ${file.original_name}
+        </h4>
+        <div class="flex justify-between items-center mt-1">
+          <span class="text-xs text-gray-500">${file.fileSize}</span>
+          <span class="text-xs text-gray-500">${file.uploadedAt}</span>
+        </div>
+        ${file.tags.length > 0 ? `
+          <div class="flex flex-wrap gap-1 mt-2">
+            ${file.tags.slice(0, 2).map((tag) => `
+              <span class="inline-block px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded">
+                ${tag}
+              </span>
+            `).join("")}
+            ${file.tags.length > 2 ? `<span class="text-xs text-gray-400">+${file.tags.length - 2}</span>` : ""}
+          </div>
+        ` : ""}
+      </div>
+    </div>
+  `;
+}
+function formatFileSize(bytes) {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+}
+
+// src/templates/pages/admin-plugins-list.template.ts
+init_admin_layout_catalyst_template();
+function renderPluginsListPage(data) {
+  const pageContent = `
+    <div>
+      <!-- Header -->
+      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
+        <div>
+          <h1 class="text-2xl/8 font-semibold text-zinc-950 dark:text-white sm:text-xl/8">Plugins</h1>
+          <p class="mt-2 text-sm/6 text-zinc-500 dark:text-zinc-400">Manage and extend functionality with plugins</p>
+        </div>
+        <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
+          <div class="relative inline-block text-left">
+            <button onclick="toggleDropdown()" class="inline-flex items-center justify-center rounded-lg bg-zinc-950 dark:bg-white px-3.5 py-2.5 text-sm font-semibold text-white dark:text-zinc-950 hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors shadow-sm">
+              <svg class="-ml-0.5 mr-1.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
+              </svg>
+              Install Plugin
+              <svg class="-mr-1 ml-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+              </svg>
+            </button>
+            <div id="plugin-dropdown" class="hidden absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-xl bg-white dark:bg-zinc-900 shadow-xl ring-1 ring-zinc-950/5 dark:ring-white/10 focus:outline-none">
+              <div class="py-1">
+                <button onclick="installPlugin('faq-plugin')" class="block w-full text-left px-4 py-2 text-sm text-zinc-950 dark:text-white hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors first:rounded-t-xl">
+                  <div class="flex items-center">
+                    <span class="text-lg mr-2">\u2753</span>
+                    <div>
+                      <div class="font-medium">FAQ System</div>
+                      <div class="text-xs text-zinc-500 dark:text-zinc-400">Community FAQ management plugin</div>
+                    </div>
+                  </div>
+                </button>
+                <div class="border-t border-zinc-950/5 dark:border-white/10 my-1"></div>
+                <button onclick="showNotification('Plugin marketplace coming soon!', 'info')" class="block w-full text-left px-4 py-2 text-sm text-zinc-950 dark:text-white hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors last:rounded-b-xl">
+                  <div class="flex items-center">
+                    <svg class="w-5 h-5 mr-2 text-zinc-500 dark:text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
+                    </svg>
+                    <div>
+                      <div class="font-medium">Browse Marketplace</div>
+                      <div class="text-xs text-zinc-500 dark:text-zinc-400">Discover more plugins</div>
+                    </div>
+                  </div>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Stats -->
+      <div class="mb-6">
+        <h3 class="text-base font-semibold text-zinc-950 dark:text-white">Plugin Statistics</h3>
+        <dl class="mt-5 grid grid-cols-1 divide-zinc-950/5 dark:divide-white/10 overflow-hidden rounded-lg bg-zinc-800/75 dark:bg-zinc-800/75 ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 md:grid-cols-4 md:divide-x md:divide-y-0">
+          <div class="px-4 py-5 sm:p-6">
+            <dt class="text-base font-normal text-zinc-700 dark:text-zinc-100">Total Plugins</dt>
+            <dd class="mt-1 flex items-baseline justify-between md:block lg:flex">
+              <div class="flex items-baseline text-2xl font-semibold text-cyan-400">
+                ${data.stats?.total || 0}
+              </div>
+              <div class="inline-flex items-baseline rounded-full bg-lime-400/10 text-lime-600 dark:text-lime-400 px-2.5 py-0.5 text-sm font-medium md:mt-2 lg:mt-0">
+                <svg viewBox="0 0 20 20" fill="currentColor" class="-ml-1 mr-0.5 size-5 shrink-0 self-center">
+                  <path d="M10 17a.75.75 0 0 1-.75-.75V5.612L5.29 9.77a.75.75 0 0 1-1.08-1.04l5.25-5.5a.75.75 0 0 1 1.08 0l5.25 5.5a.75.75 0 1 1-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0 1 10 17Z" clip-rule="evenodd" fill-rule="evenodd" />
+                </svg>
+                <span class="sr-only">Increased by</span>
+                8.5%
+              </div>
+            </dd>
+          </div>
+          <div class="px-4 py-5 sm:p-6">
+            <dt class="text-base font-normal text-zinc-700 dark:text-zinc-100">Active Plugins</dt>
+            <dd class="mt-1 flex items-baseline justify-between md:block lg:flex">
+              <div class="flex items-baseline text-2xl font-semibold text-lime-400">
+                ${data.stats?.active || 0}
+              </div>
+              <div class="inline-flex items-baseline rounded-full bg-lime-400/10 text-lime-600 dark:text-lime-400 px-2.5 py-0.5 text-sm font-medium md:mt-2 lg:mt-0">
+                <svg viewBox="0 0 20 20" fill="currentColor" class="-ml-1 mr-0.5 size-5 shrink-0 self-center">
+                  <path d="M10 17a.75.75 0 0 1-.75-.75V5.612L5.29 9.77a.75.75 0 0 1-1.08-1.04l5.25-5.5a.75.75 0 0 1 1.08 0l5.25 5.5a.75.75 0 1 1-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0 1 10 17Z" clip-rule="evenodd" fill-rule="evenodd" />
+                </svg>
+                <span class="sr-only">Increased by</span>
+                12.3%
+              </div>
+            </dd>
+          </div>
+          <div class="px-4 py-5 sm:p-6">
+            <dt class="text-base font-normal text-zinc-700 dark:text-zinc-100">Inactive Plugins</dt>
+            <dd class="mt-1 flex items-baseline justify-between md:block lg:flex">
+              <div class="flex items-baseline text-2xl font-semibold text-purple-400">
+                ${data.stats?.inactive || 0}
+              </div>
+              <div class="inline-flex items-baseline rounded-full bg-pink-400/10 text-pink-600 dark:text-pink-400 px-2.5 py-0.5 text-sm font-medium md:mt-2 lg:mt-0">
+                <svg viewBox="0 0 20 20" fill="currentColor" class="-ml-1 mr-0.5 size-5 shrink-0 self-center">
+                  <path d="M10 3a.75.75 0 0 1 .75.75v10.638l3.96-4.158a.75.75 0 1 1 1.08 1.04l-5.25 5.5a.75.75 0 0 1-1.08 0l-5.25-5.5a.75.75 0 1 1 1.08-1.04l3.96 4.158V3.75A.75.75 0 0 1 10 3Z" clip-rule="evenodd" fill-rule="evenodd" />
+                </svg>
+                <span class="sr-only">Decreased by</span>
+                3.2%
+              </div>
+            </dd>
+          </div>
+          <div class="px-4 py-5 sm:p-6">
+            <dt class="text-base font-normal text-zinc-700 dark:text-zinc-100">Plugin Errors</dt>
+            <dd class="mt-1 flex items-baseline justify-between md:block lg:flex">
+              <div class="flex items-baseline text-2xl font-semibold text-pink-400">
+                ${data.stats?.errors || 0}
+              </div>
+              <div class="inline-flex items-baseline rounded-full bg-pink-400/10 text-pink-600 dark:text-pink-400 px-2.5 py-0.5 text-sm font-medium md:mt-2 lg:mt-0">
+                <svg viewBox="0 0 20 20" fill="currentColor" class="-ml-1 mr-0.5 size-5 shrink-0 self-center">
+                  <path d="M10 3a.75.75 0 0 1 .75.75v10.638l3.96-4.158a.75.75 0 1 1 1.08 1.04l-5.25 5.5a.75.75 0 0 1-1.08 0l-5.25-5.5a.75.75 0 1 1 1.08-1.04l3.96 4.158V3.75A.75.75 0 0 1 10 3Z" clip-rule="evenodd" fill-rule="evenodd" />
+                </svg>
+                <span class="sr-only">Decreased by</span>
+                1.5%
+              </div>
+            </dd>
+          </div>
+        </dl>
+      </div>
+
+      <!-- Filters -->
+      <div class="relative rounded-xl overflow-hidden mb-6">
+        <!-- Gradient Background -->
+        <div class="absolute inset-0 bg-gradient-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10 dark:from-cyan-400/20 dark:via-blue-400/20 dark:to-purple-400/20"></div>
+
+        <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">
+          <div class="px-6 py-5">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center space-x-4 flex-1">
+                <div>
+                  <label class="block text-sm/6 font-medium text-zinc-950 dark:text-white">Category</label>
+                  <div class="mt-2 grid grid-cols-1">
+                    <select class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white/5 dark:bg-white/5 py-1.5 pl-3 pr-8 text-base text-zinc-950 dark:text-white outline outline-1 -outline-offset-1 outline-cyan-500/30 dark:outline-cyan-400/30 *:bg-white dark:*:bg-zinc-800 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-cyan-500 dark:focus-visible:outline-cyan-400 sm:text-sm/6 min-w-48">
+                      <option value="">All Categories</option>
+                      <option value="content">Content Management</option>
+                      <option value="media">Media</option>
+                      <option value="seo">SEO & Analytics</option>
+                      <option value="security">Security</option>
+                      <option value="utilities">Utilities</option>
+                    </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>
+                <div>
+                  <label class="block text-sm/6 font-medium text-zinc-950 dark:text-white">Status</label>
+                  <div class="mt-2 grid grid-cols-1">
+                    <select class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white/5 dark:bg-white/5 py-1.5 pl-3 pr-8 text-base text-zinc-950 dark:text-white outline outline-1 -outline-offset-1 outline-cyan-500/30 dark:outline-cyan-400/30 *:bg-white dark:*:bg-zinc-800 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-cyan-500 dark:focus-visible:outline-cyan-400 sm:text-sm/6 min-w-48">
+                      <option value="">All Status</option>
+                      <option value="active">Active</option>
+                      <option value="inactive">Inactive</option>
+                      <option value="error">Error</option>
+                    </select>
+                    <svg viewBox="0 0 16 16" fill="currentColor" data-slot="icon" aria-hidden="true" class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-cyan-600 dark:text-cyan-400 sm:size-4">
+                      <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>
+                <div class="flex-1 max-w-md">
+                  <label class="block text-sm font-medium text-zinc-950 dark:text-white mb-2">Search</label>
+                  <div class="relative group">
+                    <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">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+                      </svg>
+                    </div>
+                    <input
+                      type="text"
+                      placeholder="Search plugins..."
+                      class="w-full rounded-full bg-transparent px-11 py-2 text-sm text-zinc-950 dark:text-white placeholder-zinc-500 dark:placeholder-zinc-400 border-2 border-cyan-200/50 dark:border-cyan-700/50 focus:outline-none focus:border-cyan-500 dark:focus:border-cyan-400 focus:shadow-lg focus:shadow-cyan-500/20 dark:focus:shadow-cyan-400/20 transition-all duration-300"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div class="flex items-center gap-x-3 ml-4">
+                <button
+                  onclick="location.reload()"
+                  class="inline-flex items-center gap-x-1.5 px-3 py-1.5 bg-white/90 dark:bg-zinc-800/90 backdrop-blur-sm text-zinc-950 dark:text-white text-sm font-medium rounded-full ring-1 ring-inset ring-cyan-200/50 dark:ring-cyan-700/50 hover:bg-gradient-to-r hover:from-cyan-50 hover:to-blue-50 dark:hover:from-cyan-900/30 dark:hover:to-blue-900/30 hover:ring-cyan-300 dark:hover:ring-cyan-600 transition-all duration-200"
+                >
+                  <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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"/>
+                  </svg>
+                  Refresh
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    <!-- Plugins Grid -->
+    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
+      ${data.plugins.map((plugin) => renderPluginCard(plugin)).join("")}
+    </div>
+
+    <script>
+      async function togglePlugin(pluginId, action) {
+        const button = event.target;
+        const originalText = button.textContent;
+        button.disabled = true;
+        button.textContent = action === 'activate' ? 'Activating...' : 'Deactivating...';
+        
+        try {
+          const response = await fetch(\`/admin/plugins/\${pluginId}/\${action}\`, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json'
+            }
+          });
+          
+          const result = await response.json();
+          
+          if (result.success) {
+            // Update UI
+            const card = button.closest('.plugin-card');
+            const statusBadge = card.querySelector('.status-badge');
+
+            if (action === 'activate') {
+              // Update status badge
+              statusBadge.className = 'status-badge inline-flex items-center rounded-md px-2.5 py-1 text-sm font-medium ring-1 ring-inset bg-lime-50 dark:bg-lime-500/10 text-lime-700 dark:text-lime-300 ring-lime-700/10 dark:ring-lime-400/20';
+              statusBadge.innerHTML = '<div class="w-2 h-2 bg-lime-500 dark:bg-lime-400 rounded-full mr-2"></div>Active';
+              // Update card border to green
+              card.className = 'plugin-card rounded-xl bg-white dark:bg-zinc-900 shadow-sm ring-[3px] ring-lime-500 dark:ring-lime-400 p-6 hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-all';
+              // Update button
+              button.textContent = 'Deactivate';
+              button.onclick = () => togglePlugin(pluginId, 'deactivate');
+              button.className = 'bg-red-600 dark:bg-red-700 hover:bg-red-700 dark:hover:bg-red-600 text-white px-3 py-1.5 rounded-lg text-sm font-medium transition-colors';
+            } else {
+              // Update status badge
+              statusBadge.className = 'status-badge inline-flex items-center rounded-md px-2.5 py-1 text-sm font-medium ring-1 ring-inset bg-zinc-50 dark:bg-zinc-500/10 text-zinc-700 dark:text-zinc-400 ring-zinc-700/10 dark:ring-zinc-400/20';
+              statusBadge.innerHTML = '<div class="w-2 h-2 bg-zinc-500 dark:bg-zinc-400 rounded-full mr-2"></div>Inactive';
+              // Update card border to pink
+              card.className = 'plugin-card rounded-xl bg-white dark:bg-zinc-900 shadow-sm ring-[3px] ring-pink-500 dark:ring-pink-400 p-6 hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-all';
+              // Update button
+              button.textContent = 'Activate';
+              button.onclick = () => togglePlugin(pluginId, 'activate');
+              button.className = 'bg-lime-600 dark:bg-lime-700 hover:bg-lime-700 dark:hover:bg-lime-600 text-white px-3 py-1.5 rounded-lg text-sm font-medium transition-colors';
+            }
+
+            showNotification(\`Plugin \${action}d successfully\`, 'success');
+          } else {
+            throw new Error(result.error || \`Failed to \${action} plugin\`);
+          }
+        } catch (error) {
+          showNotification(error.message, 'error');
+          button.textContent = originalText;
+        } finally {
+          button.disabled = false;
+        }
+      }
+      
+      async function installPlugin(pluginName) {
+        const button = event.target;
+        button.disabled = true;
+        button.textContent = 'Installing...';
+        
+        try {
+          const response = await fetch('/admin/plugins/install', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ name: pluginName })
+          });
+          
+          const result = await response.json();
+          
+          if (result.success) {
+            showNotification('Plugin installed successfully!', 'success');
+            setTimeout(() => location.reload(), 1500);
+          } else {
+            throw new Error(result.error || 'Failed to install plugin');
+          }
+        } catch (error) {
+          showNotification(error.message, 'error');
+          button.disabled = false;
+          button.textContent = 'Install';
+        }
+      }
+      
+      let pluginToUninstall = null;
+
+      async function uninstallPlugin(pluginId) {
+        pluginToUninstall = pluginId;
+        showConfirmDialog('uninstall-plugin-confirm');
+      }
+
+      async function performUninstallPlugin() {
+        if (!pluginToUninstall) return;
+
+        const button = event.target;
+        if (button) button.disabled = true;
+
+        try {
+          const response = await fetch(\`/admin/plugins/\${pluginToUninstall}/uninstall\`, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json'
+            }
+          });
+
+          const result = await response.json();
+
+          if (result.success) {
+            showNotification('Plugin uninstalled successfully!', 'success');
+            setTimeout(() => location.reload(), 1500);
+          } else {
+            throw new Error(result.error || 'Failed to uninstall plugin');
+          }
+        } catch (error) {
+          showNotification(error.message, 'error');
+          if (button) button.disabled = false;
+        } finally {
+          pluginToUninstall = null;
+        }
+      }
+      
+      function openPluginSettings(pluginId) {
+        window.location.href = \`/admin/plugins/\${pluginId}\`;
+      }
+      
+      function showPluginDetails(pluginId) {
+        // TODO: Implement plugin details modal
+        showNotification('Plugin details coming soon!', 'info');
+      }
+      
+      function showNotification(message, type) {
+        const notification = document.createElement('div');
+        const bgColor = type === 'success' ? 'bg-green-600' : type === 'error' ? 'bg-red-600' : 'bg-blue-600';
+        notification.className = \`fixed top-4 right-4 px-4 py-2 rounded-lg text-white z-50 \${bgColor}\`;
+        notification.textContent = message;
+        document.body.appendChild(notification);
+        
+        setTimeout(() => {
+          notification.remove();
+        }, 3000);
+      }
+      
+      function toggleDropdown() {
+        const dropdown = document.getElementById('plugin-dropdown');
+        dropdown.classList.toggle('hidden');
+      }
+      
+      // Close dropdown when clicking outside
+      document.addEventListener('click', (event) => {
+        const dropdown = document.getElementById('plugin-dropdown');
+        const button = event.target.closest('button[onclick="toggleDropdown()"]');
+        
+        if (!button && !dropdown.contains(event.target)) {
+          dropdown.classList.add('hidden');
+        }
+      });
+    </script>
+
+    <!-- Confirmation Dialogs -->
+    ${renderConfirmationDialog({
+    id: "uninstall-plugin-confirm",
+    title: "Uninstall Plugin",
+    message: "Are you sure you want to uninstall this plugin? This action cannot be undone.",
+    confirmText: "Uninstall",
+    cancelText: "Cancel",
+    iconColor: "red",
+    confirmClass: "bg-red-500 hover:bg-red-400",
+    onConfirm: "performUninstallPlugin()"
+  })}
+
+    ${getConfirmationDialogScript()}
+  `;
+  const layoutData = {
+    title: "Plugins",
+    currentPath: "/admin/plugins",
+    user: data.user,
+    version: data.version,
+    content: pageContent
+  };
+  return renderAdminLayoutCatalyst(layoutData);
+}
+function renderPluginCard(plugin) {
+  const statusColors = {
+    active: "bg-lime-50 dark:bg-lime-500/10 text-lime-700 dark:text-lime-300 ring-lime-700/10 dark:ring-lime-400/20",
+    inactive: "bg-zinc-50 dark:bg-zinc-500/10 text-zinc-700 dark:text-zinc-400 ring-zinc-700/10 dark:ring-zinc-400/20",
+    error: "bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-400 ring-red-700/10 dark:ring-red-400/20"
+  };
+  const statusIcons = {
+    active: '<div class="w-2 h-2 bg-lime-500 dark:bg-lime-400 rounded-full mr-2"></div>',
+    inactive: '<div class="w-2 h-2 bg-zinc-500 dark:bg-zinc-400 rounded-full mr-2"></div>',
+    error: '<div class="w-2 h-2 bg-red-500 dark:bg-red-400 rounded-full mr-2"></div>'
+  };
+  const borderColors = {
+    active: "ring-[3px] ring-lime-500 dark:ring-lime-400",
+    inactive: "ring-[3px] ring-pink-500 dark:ring-pink-400",
+    error: "ring-[3px] ring-red-500 dark:ring-red-400"
+  };
+  const criticalCorePlugins = ["core-auth", "core-media"];
+  const canToggle = !criticalCorePlugins.includes(plugin.id);
+  const actionButton = plugin.status === "active" ? `<button onclick="togglePlugin('${plugin.id}', 'deactivate')" class="bg-red-600 dark:bg-red-700 hover:bg-red-700 dark:hover:bg-red-600 text-white px-3 py-1.5 rounded-lg text-sm font-medium transition-colors">Deactivate</button>` : `<button onclick="togglePlugin('${plugin.id}', 'activate')" class="bg-lime-600 dark:bg-lime-700 hover:bg-lime-700 dark:hover:bg-lime-600 text-white px-3 py-1.5 rounded-lg text-sm font-medium transition-colors">Activate</button>`;
+  return `
+    <div class="plugin-card rounded-xl bg-white dark:bg-zinc-900 shadow-sm ${borderColors[plugin.status]} p-6 hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-all">
+      <div class="flex items-start justify-between mb-4">
+        <div class="flex items-center gap-3">
+          <div class="w-12 h-12 rounded-lg flex items-center justify-center ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 bg-zinc-50 dark:bg-zinc-800">
+            ${plugin.icon || getDefaultPluginIcon(plugin.category)}
+          </div>
+          <div>
+            <h3 class="text-lg font-semibold text-zinc-950 dark:text-white">${plugin.displayName}</h3>
+            <p class="text-sm text-zinc-500 dark:text-zinc-400">v${plugin.version} by ${plugin.author}</p>
+          </div>
+        </div>
+        <div class="flex flex-col items-end gap-2">
+          <span class="status-badge inline-flex items-center rounded-md px-2.5 py-1 text-sm font-medium ring-1 ring-inset ${statusColors[plugin.status]}">
+            ${statusIcons[plugin.status]}${plugin.status.charAt(0).toUpperCase() + plugin.status.slice(1)}
+          </span>
+          ${plugin.isCore ? '<span class="inline-flex items-center rounded-md px-2.5 py-1 text-sm font-medium bg-cyan-50 dark:bg-cyan-500/10 text-cyan-700 dark:text-cyan-300 ring-1 ring-inset ring-cyan-700/10 dark:ring-cyan-400/20">Core</span>' : ""}
+        </div>
+      </div>
+
+      <p class="text-zinc-600 dark:text-zinc-300 text-sm mb-4 line-clamp-3">${plugin.description}</p>
+
+      <div class="flex items-center gap-4 mb-4 text-xs text-zinc-500 dark:text-zinc-400">
+        <span class="flex items-center gap-1">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
+          </svg>
+          ${plugin.category}
+        </span>
+
+        ${plugin.downloadCount ? `
+        <span class="flex items-center gap-1">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
+          </svg>
+          ${plugin.downloadCount.toLocaleString()}
+        </span>
+        ` : ""}
+
+        ${plugin.rating ? `
+        <span class="flex items-center gap-1">
+          <svg class="w-4 h-4 text-yellow-500 dark:text-yellow-400 fill-current" viewBox="0 0 24 24">
+            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+          </svg>
+          ${plugin.rating}
+        </span>
+        ` : ""}
+
+        <span>${plugin.lastUpdated}</span>
+      </div>
+
+      ${plugin.dependencies && plugin.dependencies.length > 0 ? `
+      <div class="mb-4">
+        <p class="text-xs text-zinc-500 dark:text-zinc-400 mb-2">Dependencies:</p>
+        <div class="flex flex-wrap gap-1">
+          ${plugin.dependencies.map((dep) => `<span class="inline-block bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 text-xs px-2 py-1 rounded">${dep}</span>`).join("")}
+        </div>
+      </div>
+      ` : ""}
+
+      <div class="flex items-center justify-between">
+        <div class="flex gap-2">
+          ${canToggle ? actionButton : ""}
+          <button onclick="openPluginSettings('${plugin.id}')" class="bg-white dark:bg-zinc-800 hover:bg-zinc-50 dark:hover:bg-zinc-700 text-zinc-950 dark:text-white ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors">
+            Settings
+          </button>
+        </div>
+
+        <div class="flex items-center gap-2">
+          <button onclick="showPluginDetails('${plugin.id}')" class="text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300 p-1.5 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors" title="Plugin Details">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+          </button>
+
+          ${!plugin.isCore ? `
+          <button onclick="uninstallPlugin('${plugin.id}')" class="text-zinc-500 dark:text-zinc-400 hover:text-red-600 dark:hover:text-red-400 p-1.5 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors" title="Uninstall Plugin">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+            </svg>
+          </button>
+          ` : ""}
+        </div>
+      </div>
+    </div>
+  `;
+}
+function getDefaultPluginIcon(category) {
+  const iconColor = "text-zinc-600 dark:text-zinc-400";
+  const icons = {
+    "content": `
+      <svg class="w-6 h-6 ${iconColor}" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
+      </svg>
+    `,
+    "media": `
+      <svg class="w-6 h-6 ${iconColor}" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
+      </svg>
+    `,
+    "seo": `
+      <svg class="w-6 h-6 ${iconColor}" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+      </svg>
+    `,
+    "analytics": `
+      <svg class="w-6 h-6 ${iconColor}" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />
+      </svg>
+    `,
+    "ecommerce": `
+      <svg class="w-6 h-6 ${iconColor}" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
+      </svg>
+    `,
+    "email": `
+      <svg class="w-6 h-6 ${iconColor}" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
+      </svg>
+    `,
+    "workflow": `
+      <svg class="w-6 h-6 ${iconColor}" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
+      </svg>
+    `,
+    "security": `
+      <svg class="w-6 h-6 ${iconColor}" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
+      </svg>
+    `,
+    "social": `
+      <svg class="w-6 h-6 ${iconColor}" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
+      </svg>
+    `,
+    "utility": `
+      <svg class="w-6 h-6 ${iconColor}" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+      </svg>
+    `
+  };
+  const iconKey = category.toLowerCase();
+  return icons[iconKey] || icons["utility"] || "";
+}
+
+// src/templates/components/auth-settings-form.template.ts
+function renderAuthSettingsForm(settings) {
+  const fields = settings.requiredFields;
+  const validation = settings.validation;
+  const registration = settings.registration;
+  return `
+    <div class="space-y-8">
+      <!-- Required Fields Section -->
+      <div class="backdrop-blur-md bg-black/20 rounded-xl border border-white/10 shadow-xl p-6">
+        <h3 class="text-lg font-semibold text-white mb-4">Registration Fields</h3>
+        <p class="text-sm text-gray-400 mb-6">Configure which fields are required during user registration and their minimum lengths.</p>
+
+        <div class="space-y-6">
+          ${Object.entries(fields).map(([fieldName, config]) => `
+            <div class="border-b border-white/10 pb-6 last:border-b-0 last:pb-0">
+              <div class="flex items-start justify-between mb-4">
+                <div>
+                  <h4 class="text-sm font-medium text-white">${config.label}</h4>
+                  <p class="text-xs text-gray-400 mt-1">Field type: ${config.type}</p>
+                </div>
+                <label class="relative inline-flex items-center cursor-pointer">
+                  <input
+                    type="checkbox"
+                    name="requiredFields_${fieldName}_required"
+                    ${config.required ? "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>
+                  <span class="ml-3 text-sm font-medium text-gray-300">Required</span>
+                </label>
+              </div>
+
+              <div class="grid grid-cols-2 gap-4">
+                <div>
+                  <label class="block text-xs font-medium text-gray-400 mb-2">Minimum Length</label>
+                  <input
+                    type="number"
+                    name="requiredFields_${fieldName}_minLength"
+                    value="${config.minLength}"
+                    min="0"
+                    max="100"
+                    class="backdrop-blur-sm bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white placeholder-gray-300 focus:border-blue-400 focus:outline-none transition-colors w-full"
+                  >
+                </div>
+                <div>
+                  <label class="block text-xs font-medium text-gray-400 mb-2">Field Label</label>
+                  <input
+                    type="text"
+                    name="requiredFields_${fieldName}_label"
+                    value="${config.label}"
+                    class="backdrop-blur-sm bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white placeholder-gray-300 focus:border-blue-400 focus:outline-none transition-colors w-full"
+                  >
+                </div>
+              </div>
+            </div>
+          `).join("")}
+        </div>
+      </div>
+
+      <!-- Password Requirements Section -->
+      <div class="backdrop-blur-md bg-black/20 rounded-xl border border-white/10 shadow-xl p-6">
+        <h3 class="text-lg font-semibold text-white mb-4">Password Requirements</h3>
+        <p class="text-sm text-gray-400 mb-6">Additional password complexity requirements.</p>
+
+        <div class="space-y-4">
+          <div class="flex items-center justify-between">
+            <div>
+              <label class="text-sm font-medium text-gray-300">Require Uppercase Letter</label>
+              <p class="text-xs text-gray-400">Password must contain at least one uppercase letter (A-Z)</p>
+            </div>
+            <label class="relative inline-flex items-center cursor-pointer">
+              <input
+                type="checkbox"
+                name="validation_passwordRequirements_requireUppercase"
+                ${validation.passwordRequirements.requireUppercase ? "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>
+
+          <div class="flex items-center justify-between">
+            <div>
+              <label class="text-sm font-medium text-gray-300">Require Lowercase Letter</label>
+              <p class="text-xs text-gray-400">Password must contain at least one lowercase letter (a-z)</p>
+            </div>
+            <label class="relative inline-flex items-center cursor-pointer">
+              <input
+                type="checkbox"
+                name="validation_passwordRequirements_requireLowercase"
+                ${validation.passwordRequirements.requireLowercase ? "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>
+
+          <div class="flex items-center justify-between">
+            <div>
+              <label class="text-sm font-medium text-gray-300">Require Numbers</label>
+              <p class="text-xs text-gray-400">Password must contain at least one number (0-9)</p>
+            </div>
+            <label class="relative inline-flex items-center cursor-pointer">
+              <input
+                type="checkbox"
+                name="validation_passwordRequirements_requireNumbers"
+                ${validation.passwordRequirements.requireNumbers ? "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>
+
+          <div class="flex items-center justify-between">
+            <div>
+              <label class="text-sm font-medium text-gray-300">Require Special Characters</label>
+              <p class="text-xs text-gray-400">Password must contain at least one special character (!@#$%^&*)</p>
+            </div>
+            <label class="relative inline-flex items-center cursor-pointer">
+              <input
+                type="checkbox"
+                name="validation_passwordRequirements_requireSpecialChars"
+                ${validation.passwordRequirements.requireSpecialChars ? "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>
+        </div>
+      </div>
+
+      <!-- Registration Settings Section -->
+      <div class="backdrop-blur-md bg-black/20 rounded-xl border border-white/10 shadow-xl p-6">
+        <h3 class="text-lg font-semibold text-white mb-4">Registration Settings</h3>
+        <p class="text-sm text-gray-400 mb-6">General registration behavior.</p>
+
+        <div class="space-y-4">
+          <div class="flex items-center justify-between">
+            <div>
+              <label class="text-sm font-medium text-gray-300">Allow User Registration</label>
+              <p class="text-xs text-gray-400">Enable or disable public user registration</p>
+            </div>
+            <label class="relative inline-flex items-center cursor-pointer">
+              <input
+                type="checkbox"
+                name="registration_enabled"
+                ${registration.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>
+
+          <div class="flex items-center justify-between">
+            <div>
+              <label class="text-sm font-medium text-gray-300">Require Email Verification</label>
+              <p class="text-xs text-gray-400">Users must verify their email before accessing the system</p>
+            </div>
+            <label class="relative inline-flex items-center cursor-pointer">
+              <input
+                type="checkbox"
+                name="registration_requireEmailVerification"
+                ${registration.requireEmailVerification ? "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>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-300 mb-2">Default User Role</label>
+            <select
+              name="registration_defaultRole"
+              class="backdrop-blur-sm bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white focus:border-blue-400 focus:outline-none transition-colors w-full"
+            >
+              <option value="viewer" ${registration.defaultRole === "viewer" ? "selected" : ""}>Viewer</option>
+              <option value="editor" ${registration.defaultRole === "editor" ? "selected" : ""}>Editor</option>
+              <option value="admin" ${registration.defaultRole === "admin" ? "selected" : ""}>Admin</option>
+            </select>
+            <p class="text-xs text-gray-400 mt-1">Role assigned to new users upon registration</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Validation Settings Section -->
+      <div class="backdrop-blur-md bg-black/20 rounded-xl border border-white/10 shadow-xl p-6">
+        <h3 class="text-lg font-semibold text-white mb-4">Validation Settings</h3>
+        <p class="text-sm text-gray-400 mb-6">Additional validation rules.</p>
+
+        <div class="space-y-4">
+          <div class="flex items-center justify-between">
+            <div>
+              <label class="text-sm font-medium text-gray-300">Enforce Email Format</label>
+              <p class="text-xs text-gray-400">Validate that email addresses are in correct format</p>
+            </div>
+            <label class="relative inline-flex items-center cursor-pointer">
+              <input
+                type="checkbox"
+                name="validation_emailFormat"
+                ${validation.emailFormat ? "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>
+
+          <div class="flex items-center justify-between">
+            <div>
+              <label class="text-sm font-medium text-gray-300">Prevent Duplicate Usernames</label>
+              <p class="text-xs text-gray-400">Ensure usernames are unique across all users</p>
+            </div>
+            <label class="relative inline-flex items-center cursor-pointer">
+              <input
+                type="checkbox"
+                name="validation_allowDuplicateUsernames"
+                ${!validation.allowDuplicateUsernames ? "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>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+// src/templates/pages/admin-plugin-settings.template.ts
+function renderPluginSettingsPage(data) {
+  const { plugin, activity = [], user } = data;
+  const pageContent = `
+    <div class="w-full px-4 sm:px-6 lg:px-8 py-6">
+      <!-- Header with breadcrumb -->
+      <div class="flex items-center mb-6">
+        <nav class="flex" aria-label="Breadcrumb">
+          <ol class="flex items-center space-x-2">
+            <li>
+              <a href="/admin/plugins" class="text-gray-400 hover:text-white transition-colors">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
+                </svg>
+                Plugins
+              </a>
+            </li>
+            <li>
+              <svg class="w-5 h-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
+              </svg>
+            </li>
+            <li>
+              <span class="text-gray-300">${plugin.displayName}</span>
+            </li>
+          </ol>
+        </nav>
+      </div>
+
+      <!-- Plugin Header -->
+      <div class="backdrop-blur-md bg-black/20 rounded-xl border border-white/10 shadow-xl p-6 mb-6">
+        <div class="flex items-start justify-between">
+          <div class="flex items-center gap-4">
+            <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center text-white text-2xl font-bold">
+              ${plugin.icon || plugin.displayName.charAt(0).toUpperCase()}
+            </div>
+            <div>
+              <h1 class="text-2xl font-semibold text-white mb-1">${plugin.displayName}</h1>
+              <p class="text-gray-300 mb-2">${plugin.description}</p>
+              <div class="flex items-center gap-4 text-sm text-gray-400">
+                <span>v${plugin.version}</span>
+                <span>by ${plugin.author}</span>
+                <span>${plugin.category}</span>
+                ${plugin.downloadCount ? `<span>${plugin.downloadCount.toLocaleString()} downloads</span>` : ""}
+                ${plugin.rating ? `<span>\u2605 ${plugin.rating}</span>` : ""}
+              </div>
+            </div>
+          </div>
+          
+          <div class="flex items-center gap-3">
+            ${renderStatusBadge(plugin.status)}
+            ${renderToggleButton(plugin)}
+          </div>
+        </div>
+      </div>
+
+      <!-- Tabs -->
+      <div class="mb-6">
+        <nav class="flex space-x-8" aria-label="Tabs">
+          <button onclick="showTab('settings')" id="settings-tab" class="tab-button active border-b-2 border-blue-400 py-2 px-1 text-sm font-medium text-blue-400">
+            Settings
+          </button>
+          <button onclick="showTab('activity')" id="activity-tab" class="tab-button border-b-2 border-transparent py-2 px-1 text-sm font-medium text-gray-400 hover:text-gray-300">
+            Activity Log
+          </button>
+          <button onclick="showTab('info')" id="info-tab" class="tab-button border-b-2 border-transparent py-2 px-1 text-sm font-medium text-gray-400 hover:text-gray-300">
+            Information
+          </button>
+        </nav>
+      </div>
+
+      <!-- Tab Content -->
+      <div id="tab-content">
+        <!-- Settings Tab -->
+        <div id="settings-content" class="tab-content">
+          ${renderSettingsTab(plugin)}
+        </div>
+
+        <!-- Activity Tab -->
+        <div id="activity-content" class="tab-content hidden">
+          ${renderActivityTab(activity)}
+        </div>
+
+        <!-- Information Tab -->
+        <div id="info-content" class="tab-content hidden">
+          ${renderInformationTab(plugin)}
+        </div>
+      </div>
+    </div>
+
+    <script>
+      function showTab(tabName) {
+        // Hide all tab contents
+        document.querySelectorAll('.tab-content').forEach(content => {
+          content.classList.add('hidden');
+        });
+        
+        // Remove active class from all tabs
+        document.querySelectorAll('.tab-button').forEach(tab => {
+          tab.classList.remove('active', 'border-blue-400', 'text-blue-400');
+          tab.classList.add('border-transparent', 'text-gray-400');
+        });
+        
+        // Show selected tab content
+        document.getElementById(tabName + '-content').classList.remove('hidden');
+        
+        // Add active class to selected tab
+        const activeTab = document.getElementById(tabName + '-tab');
+        activeTab.classList.add('active', 'border-blue-400', 'text-blue-400');
+        activeTab.classList.remove('border-transparent', 'text-gray-400');
+      }
+
+      async function togglePlugin(pluginId, action) {
+        const button = event.target;
+        const originalText = button.textContent;
+        button.disabled = true;
+        button.textContent = action === 'activate' ? 'Activating...' : 'Deactivating...';
+        
+        try {
+          const response = await fetch(\`/admin/plugins/\${pluginId}/\${action}\`, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json'
+            }
+          });
+          
+          const result = await response.json();
+          
+          if (result.success) {
+            showNotification(\`Plugin \${action}d successfully\`, 'success');
+            setTimeout(() => location.reload(), 1000);
+          } else {
+            throw new Error(result.error || \`Failed to \${action} plugin\`);
+          }
+        } catch (error) {
+          showNotification(error.message, 'error');
+          button.textContent = originalText;
+          button.disabled = false;
+        }
+      }
+
+      async function saveSettings() {
+        const form = document.getElementById('settings-form');
+        const formData = new FormData(form);
+        const isAuthPlugin = '${plugin.id}' === 'core-auth';
+        let settings = {};
+
+        if (isAuthPlugin) {
+          // Handle nested auth settings structure
+          settings = {
+            requiredFields: {},
+            validation: {
+              passwordRequirements: {}
+            },
+            registration: {}
+          };
+
+          for (let [key, value] of formData.entries()) {
+            const input = form.querySelector(\`[name="\${key}"]\`);
+            const fieldValue = input.type === 'checkbox' ? input.checked :
+                             input.type === 'number' ? parseInt(value) || 0 : value;
+
+            // Parse nested field names like "requiredFields_email_required"
+            if (key.startsWith('requiredFields_')) {
+              const parts = key.replace('requiredFields_', '').split('_');
+              const fieldName = parts[0];
+              const propName = parts[1];
+
+              if (!settings.requiredFields[fieldName]) {
+                settings.requiredFields[fieldName] = { type: 'text', label: '' };
+              }
+              settings.requiredFields[fieldName][propName] = fieldValue;
+            } else if (key.startsWith('validation_passwordRequirements_')) {
+              const propName = key.replace('validation_passwordRequirements_', '');
+              settings.validation.passwordRequirements[propName] = fieldValue;
+            } else if (key.startsWith('validation_')) {
+              const propName = key.replace('validation_', '');
+              // Invert the allowDuplicateUsernames logic
+              if (propName === 'allowDuplicateUsernames') {
+                settings.validation[propName] = !fieldValue;
+              } else {
+                settings.validation[propName] = fieldValue;
+              }
+            } else if (key.startsWith('registration_')) {
+              const propName = key.replace('registration_', '');
+              settings.registration[propName] = fieldValue;
+            }
+          }
+        } else {
+          // Handle regular plugin settings
+          for (let [key, value] of formData.entries()) {
+            if (key.startsWith('setting_')) {
+              const settingKey = key.replace('setting_', '');
+
+              const input = form.querySelector(\`[name="\${key}"]\`);
+              if (input.type === 'checkbox') {
+                settings[settingKey] = input.checked;
+              } else if (input.type === 'number') {
+                settings[settingKey] = parseInt(value) || 0;
+              } else {
+                settings[settingKey] = value;
+              }
+            }
+          }
+        }
+
+        const saveButton = document.getElementById('save-button');
+        saveButton.disabled = true;
+        saveButton.textContent = 'Saving...';
+
+        try {
+          const response = await fetch(\`/admin/plugins/${plugin.id}/settings\`, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(settings)
+          });
+
+          const result = await response.json();
+
+          if (result.success) {
+            showNotification('Settings saved successfully', 'success');
+            // Reload page after 1 second to show updated settings
+            setTimeout(() => location.reload(), 1000);
+          } else {
+            throw new Error(result.error || 'Failed to save settings');
+          }
+        } catch (error) {
+          showNotification(error.message, 'error');
+        } finally {
+          saveButton.disabled = false;
+          saveButton.textContent = 'Save Settings';
+        }
+      }
+
+      function showNotification(message, type) {
+        const notification = document.createElement('div');
+        const bgColor = type === 'success' ? 'bg-green-600' : type === 'error' ? 'bg-red-600' : 'bg-blue-600';
+        notification.className = \`fixed top-4 right-4 px-4 py-2 rounded-lg text-white z-50 \${bgColor}\`;
+        notification.textContent = message;
+        document.body.appendChild(notification);
+        
+        setTimeout(() => {
+          notification.remove();
+        }, 3000);
+      }
+    </script>
+  `;
+  const layoutData = {
+    title: `${plugin.displayName} Settings`,
+    pageTitle: `${plugin.displayName} Settings`,
+    currentPath: `/admin/plugins/${plugin.id}`,
+    user,
+    content: pageContent
+  };
+  return renderAdminLayout(layoutData);
+}
+function renderStatusBadge(status) {
+  const statusColors = {
+    active: "bg-green-900/50 text-green-300 border-green-600/30",
+    inactive: "bg-gray-800/50 text-gray-400 border-gray-600/30",
+    error: "bg-red-900/50 text-red-300 border-red-600/30"
+  };
+  const statusIcons = {
+    active: '<div class="w-2 h-2 bg-green-400 rounded-full mr-2"></div>',
+    inactive: '<div class="w-2 h-2 bg-gray-500 rounded-full mr-2"></div>',
+    error: '<div class="w-2 h-2 bg-red-400 rounded-full mr-2"></div>'
+  };
+  return `
+    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium ${statusColors[status] || statusColors.inactive} border">
+      ${statusIcons[status] || statusIcons.inactive}${status.charAt(0).toUpperCase() + status.slice(1)}
+    </span>
+  `;
+}
+function renderToggleButton(plugin) {
+  if (plugin.isCore) {
+    return '<span class="text-sm text-gray-400">Core Plugin</span>';
+  }
+  return plugin.status === "active" ? `<button onclick="togglePlugin('${plugin.id}', 'deactivate')" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">Deactivate</button>` : `<button onclick="togglePlugin('${plugin.id}', 'activate')" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">Activate</button>`;
+}
+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";
+  return `
+    ${isSeedDataPlugin ? `
+      <div class="backdrop-blur-md bg-black/20 rounded-xl border border-white/10 shadow-xl p-6 mb-6">
+        <div class="flex items-center justify-between">
+          <div>
+            <h2 class="text-xl font-semibold text-white mb-2">Seed Data Generator</h2>
+            <p class="text-gray-400">Generate realistic example data for testing and development.</p>
+          </div>
+          <a
+            href="/admin/seed-data"
+            target="_blank"
+            class="inline-flex items-center gap-2 bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-medium transition-colors"
+          >
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
+            </svg>
+            Open Seed Data Tool
+          </a>
+        </div>
+      </div>
+    ` : ""}
+
+    <div class="backdrop-blur-md bg-black/20 rounded-xl border border-white/10 shadow-xl p-6">
+      ${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>
+      ` : `
+        <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)}
+
+        ${Object.keys(settings).length > 0 ? `
+        <div class="flex items-center justify-end pt-6 border-t border-white/10">
+          <button
+            type="button"
+            id="save-button"
+            onclick="saveSettings()"
+            class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition-colors"
+          >
+            Save Settings
+          </button>
+        </div>
+        ` : ""}
+      </form>
+    </div>
+  `;
+}
+function renderSettingsFields(settings) {
+  return Object.entries(settings).map(([key, value]) => {
+    const fieldId = `setting_${key}`;
+    const displayName = key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase());
+    if (typeof value === "boolean") {
+      return `
+        <div class="flex items-center justify-between">
+          <div>
+            <label for="${fieldId}" class="text-sm font-medium text-gray-300">${displayName}</label>
+            <p class="text-xs text-gray-400">Enable or disable this feature</p>
+          </div>
+          <label class="relative inline-flex items-center cursor-pointer">
+            <input type="checkbox" name="${fieldId}" id="${fieldId}" ${value ? "checked" : ""} class="sr-only peer">
+            <div class="w-11 h-6 bg-gray-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+          </label>
+        </div>
+      `;
+    } else if (typeof value === "number") {
+      return `
+        <div>
+          <label for="${fieldId}" class="block text-sm font-medium text-gray-300 mb-2">${displayName}</label>
+          <input 
+            type="number" 
+            name="${fieldId}" 
+            id="${fieldId}" 
+            value="${value}"
+            class="backdrop-blur-sm bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white placeholder-gray-300 focus:border-blue-400 focus:outline-none transition-colors w-full"
+          >
+        </div>
+      `;
+    } else {
+      return `
+        <div>
+          <label for="${fieldId}" class="block text-sm font-medium text-gray-300 mb-2">${displayName}</label>
+          <input 
+            type="text" 
+            name="${fieldId}" 
+            id="${fieldId}" 
+            value="${value}"
+            class="backdrop-blur-sm bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white placeholder-gray-300 focus:border-blue-400 focus:outline-none transition-colors w-full"
+          >
+        </div>
+      `;
+    }
+  }).join("");
+}
+function renderNoSettings(plugin) {
+  if (plugin.id === "seed-data" || plugin.name === "seed-data") {
+    return `
+      <div class="text-center py-8">
+        <svg class="w-16 h-16 text-green-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
+        </svg>
+        <h3 class="text-lg font-medium text-gray-300 mb-2">Seed Data Generator</h3>
+        <p class="text-gray-400 mb-6">Generate realistic example data for testing and development.</p>
+        <a
+          href="/admin/seed-data"
+          class="inline-flex items-center gap-2 bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-medium transition-colors"
+        >
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
+          </svg>
+          Generate Seed Data
+        </a>
+      </div>
+    `;
+  }
+  return `
+    <div class="text-center py-8">
+      <svg class="w-12 h-12 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+      </svg>
+      <h3 class="text-lg font-medium text-gray-300 mb-2">No Settings Available</h3>
+      <p class="text-gray-400">This plugin doesn't have any configurable settings.</p>
+    </div>
+  `;
+}
+function renderActivityTab(activity) {
+  return `
+    <div class="backdrop-blur-md bg-black/20 rounded-xl border border-white/10 shadow-xl p-6">
+      <h2 class="text-xl font-semibold text-white mb-4">Activity Log</h2>
+      
+      ${activity.length > 0 ? `
+        <div class="space-y-4">
+          ${activity.map((item) => `
+            <div class="flex items-start gap-3 p-3 rounded-lg bg-white/5">
+              <div class="w-2 h-2 bg-blue-400 rounded-full mt-2"></div>
+              <div class="flex-1">
+                <div class="flex items-center justify-between">
+                  <span class="text-sm font-medium text-white">${item.action}</span>
+                  <span class="text-xs text-gray-400">${formatTimestamp(item.timestamp)}</span>
+                </div>
+                <p class="text-sm text-gray-300 mt-1">${item.message}</p>
+                ${item.user ? `<p class="text-xs text-gray-400 mt-1">by ${item.user}</p>` : ""}
+              </div>
+            </div>
+          `).join("")}
+        </div>
+      ` : `
+        <div class="text-center py-8">
+          <svg class="w-12 h-12 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
+          </svg>
+          <h3 class="text-lg font-medium text-gray-300 mb-2">No Activity</h3>
+          <p class="text-gray-400">No recent activity for this plugin.</p>
+        </div>
+      `}
+    </div>
+  `;
+}
+function renderInformationTab(plugin) {
+  return `
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      <!-- Plugin Details -->
+      <div class="backdrop-blur-md bg-black/20 rounded-xl border border-white/10 shadow-xl p-6">
+        <h2 class="text-xl font-semibold text-white mb-4">Plugin Details</h2>
+        <div class="space-y-3">
+          <div class="flex justify-between">
+            <span class="text-gray-400">Name:</span>
+            <span class="text-white">${plugin.displayName}</span>
+          </div>
+          <div class="flex justify-between">
+            <span class="text-gray-400">Version:</span>
+            <span class="text-white">${plugin.version}</span>
+          </div>
+          <div class="flex justify-between">
+            <span class="text-gray-400">Author:</span>
+            <span class="text-white">${plugin.author}</span>
+          </div>
+          <div class="flex justify-between">
+            <span class="text-gray-400">Category:</span>
+            <span class="text-white">${plugin.category}</span>
+          </div>
+          <div class="flex justify-between">
+            <span class="text-gray-400">Status:</span>
+            <span class="text-white">${plugin.status}</span>
+          </div>
+          <div class="flex justify-between">
+            <span class="text-gray-400">Last Updated:</span>
+            <span class="text-white">${plugin.lastUpdated}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Dependencies & Permissions -->
+      <div class="backdrop-blur-md bg-black/20 rounded-xl border border-white/10 shadow-xl p-6">
+        <h2 class="text-xl font-semibold text-white mb-4">Dependencies & Permissions</h2>
+        
+        ${plugin.dependencies && plugin.dependencies.length > 0 ? `
+          <div class="mb-6">
+            <h3 class="text-sm font-medium text-gray-300 mb-2">Dependencies:</h3>
+            <div class="space-y-1">
+              ${plugin.dependencies.map((dep) => `
+                <div class="inline-block bg-white/10 text-gray-300 text-sm px-2 py-1 rounded mr-2">${dep}</div>
+              `).join("")}
+            </div>
+          </div>
+        ` : ""}
+
+        ${plugin.permissions && plugin.permissions.length > 0 ? `
+          <div>
+            <h3 class="text-sm font-medium text-gray-300 mb-2">Permissions:</h3>
+            <div class="space-y-1">
+              ${plugin.permissions.map((perm) => `
+                <div class="inline-block bg-white/10 text-gray-300 text-sm px-2 py-1 rounded mr-2">${perm}</div>
+              `).join("")}
+            </div>
+          </div>
+        ` : ""}
+
+        ${(!plugin.dependencies || plugin.dependencies.length === 0) && (!plugin.permissions || plugin.permissions.length === 0) ? `
+          <p class="text-gray-400">No dependencies or special permissions required.</p>
+        ` : ""}
+      </div>
+    </div>
+  `;
+}
+function formatTimestamp(timestamp) {
+  const date = new Date(timestamp * 1e3);
+  return date.toLocaleString();
+}
+
+// src/routes/admin-plugins.ts
+var adminPluginRoutes = new hono.Hono();
+adminPluginRoutes.get("/", async (c) => {
+  try {
+    const user = c.get("user");
+    const db = c.env.DB;
+    if (user?.role !== "admin") {
+      return c.text("Access denied", 403);
+    }
+    const pluginService = new chunkRNR4HA23_cjs.PluginService(db);
+    let plugins = [];
+    let stats = { total: 0, active: 0, inactive: 0, errors: 0 };
+    try {
+      plugins = await pluginService.getAllPlugins();
+      stats = await pluginService.getPluginStats();
+    } catch (error) {
+      console.error("Error loading plugins:", error);
+    }
+    const templatePlugins = plugins.map((p) => ({
+      id: p.id,
+      name: p.name,
+      displayName: p.display_name,
+      description: p.description,
+      version: p.version,
+      author: p.author,
+      status: p.status,
+      category: p.category,
+      icon: p.icon,
+      downloadCount: p.download_count,
+      rating: p.rating,
+      lastUpdated: formatLastUpdated(p.last_updated),
+      dependencies: p.dependencies,
+      permissions: p.permissions,
+      isCore: p.is_core
+    }));
+    const pageData = {
+      plugins: templatePlugins,
+      stats,
+      user: {
+        name: user?.email || "User",
+        email: user?.email || "",
+        role: user?.role || "user"
+      },
+      version: c.get("appVersion")
+    };
+    return c.html(renderPluginsListPage(pageData));
+  } catch (error) {
+    console.error("Error loading plugins page:", error);
+    return c.text("Internal server error", 500);
+  }
+});
+adminPluginRoutes.get("/:id", async (c) => {
+  try {
+    const user = c.get("user");
+    const db = c.env.DB;
+    const pluginId = c.req.param("id");
+    if (user?.role !== "admin") {
+      return c.redirect("/admin/plugins");
+    }
+    const pluginService = new chunkRNR4HA23_cjs.PluginService(db);
+    const plugin = await pluginService.getPlugin(pluginId);
+    if (!plugin) {
+      return c.text("Plugin not found", 404);
+    }
+    const activity = await pluginService.getPluginActivity(pluginId, 20);
+    const templatePlugin = {
+      id: plugin.id,
+      name: plugin.name,
+      displayName: plugin.display_name,
+      description: plugin.description,
+      version: plugin.version,
+      author: plugin.author,
+      status: plugin.status,
+      category: plugin.category,
+      icon: plugin.icon,
+      downloadCount: plugin.download_count,
+      rating: plugin.rating,
+      lastUpdated: formatLastUpdated(plugin.last_updated),
+      dependencies: plugin.dependencies,
+      permissions: plugin.permissions,
+      isCore: plugin.is_core,
+      settings: plugin.settings
+    };
+    const templateActivity = (activity || []).map((item) => ({
+      id: item.id,
+      action: item.action,
+      message: item.message,
+      timestamp: item.timestamp,
+      user: item.user_email
+    }));
+    const pageData = {
+      plugin: templatePlugin,
+      activity: templateActivity,
+      user: {
+        name: user?.email || "User",
+        email: user?.email || "",
+        role: user?.role || "user"
+      }
+    };
+    return c.html(renderPluginSettingsPage(pageData));
+  } catch (error) {
+    console.error("Error getting plugin settings page:", error);
+    return c.text("Internal server error", 500);
+  }
+});
+adminPluginRoutes.post("/:id/activate", async (c) => {
+  try {
+    const user = c.get("user");
+    const db = c.env.DB;
+    const pluginId = c.req.param("id");
+    if (user?.role !== "admin") {
+      return c.json({ error: "Access denied" }, 403);
+    }
+    const pluginService = new chunkRNR4HA23_cjs.PluginService(db);
+    await pluginService.activatePlugin(pluginId);
+    return c.json({ success: true });
+  } catch (error) {
+    console.error("Error activating plugin:", error);
+    const message = error instanceof Error ? error.message : "Failed to activate plugin";
+    return c.json({ error: message }, 400);
+  }
+});
+adminPluginRoutes.post("/:id/deactivate", async (c) => {
+  try {
+    const user = c.get("user");
+    const db = c.env.DB;
+    const pluginId = c.req.param("id");
+    if (user?.role !== "admin") {
+      return c.json({ error: "Access denied" }, 403);
+    }
+    const pluginService = new chunkRNR4HA23_cjs.PluginService(db);
+    await pluginService.deactivatePlugin(pluginId);
+    return c.json({ success: true });
+  } catch (error) {
+    console.error("Error deactivating plugin:", error);
+    const message = error instanceof Error ? error.message : "Failed to deactivate plugin";
+    return c.json({ error: message }, 400);
+  }
+});
+adminPluginRoutes.post("/install", async (c) => {
+  try {
+    const user = c.get("user");
+    const db = c.env.DB;
+    if (user?.role !== "admin") {
+      return c.json({ error: "Access denied" }, 403);
+    }
+    const body = await c.req.json();
+    const pluginService = new chunkRNR4HA23_cjs.PluginService(db);
+    if (body.name === "faq-plugin") {
+      const faqPlugin = await pluginService.installPlugin({
+        id: "third-party-faq",
+        name: "faq-plugin",
+        display_name: "FAQ System",
+        description: "Frequently Asked Questions management system with categories, search, and custom styling",
+        version: "2.0.0",
+        author: "Community Developer",
+        category: "content",
+        icon: "\u2753",
+        permissions: ["manage:faqs"],
+        dependencies: [],
+        settings: {
+          enableSearch: true,
+          enableCategories: true,
+          questionsPerPage: 10
+        }
+      });
+      return c.json({ success: true, plugin: faqPlugin });
+    }
+    if (body.name === "demo-login-plugin") {
+      const demoPlugin = await pluginService.installPlugin({
+        id: "demo-login-prefill",
+        name: "demo-login-plugin",
+        display_name: "Demo Login Prefill",
+        description: "Prefills login form with demo credentials (admin@sonicjs.com/admin123) for easy site demonstration",
+        version: "1.0.0-beta.1",
+        author: "SonicJS",
+        category: "demo",
+        icon: "\u{1F3AF}",
+        permissions: [],
+        dependencies: [],
+        settings: {
+          enableNotice: true,
+          demoEmail: "admin@sonicjs.com",
+          demoPassword: "admin123"
+        }
+      });
+      return c.json({ success: true, plugin: demoPlugin });
+    }
+    if (body.name === "core-auth") {
+      const authPlugin = await pluginService.installPlugin({
+        id: "core-auth",
+        name: "core-auth",
+        display_name: "Authentication System",
+        description: "Core authentication and user management system",
+        version: "1.0.0-beta.1",
+        author: "SonicJS Team",
+        category: "security",
+        icon: "\u{1F510}",
+        permissions: ["manage:users", "manage:roles", "manage:permissions"],
+        dependencies: [],
+        is_core: true,
+        settings: {}
+      });
+      return c.json({ success: true, plugin: authPlugin });
+    }
+    if (body.name === "core-media") {
+      const mediaPlugin = await pluginService.installPlugin({
+        id: "core-media",
+        name: "core-media",
+        display_name: "Media Manager",
+        description: "Core media upload and management system",
+        version: "1.0.0-beta.1",
+        author: "SonicJS Team",
+        category: "media",
+        icon: "\u{1F4F8}",
+        permissions: ["manage:media", "upload:files"],
+        dependencies: [],
+        is_core: true,
+        settings: {}
+      });
+      return c.json({ success: true, plugin: mediaPlugin });
+    }
+    if (body.name === "core-workflow") {
+      const workflowPlugin = await pluginService.installPlugin({
+        id: "core-workflow",
+        name: "core-workflow",
+        display_name: "Workflow Engine",
+        description: "Content workflow and approval system",
+        version: "1.0.0-beta.1",
+        author: "SonicJS Team",
+        category: "content",
+        icon: "\u{1F504}",
+        permissions: ["manage:workflows", "approve:content"],
+        dependencies: [],
+        is_core: true,
+        settings: {}
+      });
+      return c.json({ success: true, plugin: workflowPlugin });
+    }
+    if (body.name === "database-tools") {
+      const databaseToolsPlugin = await pluginService.installPlugin({
+        id: "database-tools",
+        name: "database-tools",
+        display_name: "Database Tools",
+        description: "Database management tools including truncate, backup, and validation",
+        version: "1.0.0-beta.1",
+        author: "SonicJS Team",
+        category: "system",
+        icon: "\u{1F5C4}\uFE0F",
+        permissions: ["manage:database", "admin"],
+        dependencies: [],
+        is_core: false,
+        settings: {
+          enableTruncate: true,
+          enableBackup: true,
+          enableValidation: true,
+          requireConfirmation: true
+        }
+      });
+      return c.json({ success: true, plugin: databaseToolsPlugin });
+    }
+    if (body.name === "seed-data") {
+      const seedDataPlugin = await pluginService.installPlugin({
+        id: "seed-data",
+        name: "seed-data",
+        display_name: "Seed Data",
+        description: "Generate realistic example users and content for testing and development",
+        version: "1.0.0-beta.1",
+        author: "SonicJS Team",
+        category: "development",
+        icon: "\u{1F331}",
+        permissions: ["admin"],
+        dependencies: [],
+        is_core: false,
+        settings: {
+          userCount: 20,
+          contentCount: 200,
+          defaultPassword: "password123"
+        }
+      });
+      return c.json({ success: true, plugin: seedDataPlugin });
+    }
+    return c.json({ error: "Plugin not found in registry" }, 404);
+  } catch (error) {
+    console.error("Error installing plugin:", error);
+    const message = error instanceof Error ? error.message : "Failed to install plugin";
+    return c.json({ error: message }, 400);
+  }
+});
+adminPluginRoutes.post("/:id/uninstall", async (c) => {
+  try {
+    const user = c.get("user");
+    const db = c.env.DB;
+    const pluginId = c.req.param("id");
+    if (user?.role !== "admin") {
+      return c.json({ error: "Access denied" }, 403);
+    }
+    const pluginService = new chunkRNR4HA23_cjs.PluginService(db);
+    await pluginService.uninstallPlugin(pluginId);
+    return c.json({ success: true });
+  } catch (error) {
+    console.error("Error uninstalling plugin:", error);
+    const message = error instanceof Error ? error.message : "Failed to uninstall plugin";
+    return c.json({ error: message }, 400);
+  }
+});
+adminPluginRoutes.post("/:id/settings", async (c) => {
+  try {
+    const user = c.get("user");
+    const db = c.env.DB;
+    const pluginId = c.req.param("id");
+    if (user?.role !== "admin") {
+      return c.json({ error: "Access denied" }, 403);
+    }
+    const settings = await c.req.json();
+    const pluginService = new chunkRNR4HA23_cjs.PluginService(db);
+    await pluginService.updatePluginSettings(pluginId, settings);
+    return c.json({ success: true });
+  } catch (error) {
+    console.error("Error updating plugin settings:", error);
+    const message = error instanceof Error ? error.message : "Failed to update settings";
+    return c.json({ error: message }, 400);
+  }
+});
+function formatLastUpdated(timestamp) {
+  const now = Date.now() / 1e3;
+  const diff = now - timestamp;
+  if (diff < 60) return "just now";
+  if (diff < 3600) return `${Math.floor(diff / 60)} minutes ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)} hours ago`;
+  if (diff < 604800) return `${Math.floor(diff / 86400)} days ago`;
+  if (diff < 2592e3) return `${Math.floor(diff / 604800)} weeks ago`;
+  return `${Math.floor(diff / 2592e3)} months ago`;
+}
+
 // src/routes/index.ts
 var ROUTES_INFO = {
   message: "Routes migration in progress",
@@ -9957,13 +13621,17 @@ var ROUTES_INFO = {
     "adminApiRoutes",
     "authRoutes",
     "adminContentRoutes",
-    "adminUsersRoutes"
+    "adminUsersRoutes",
+    "adminMediaRoutes",
+    "adminPluginRoutes"
   ],
   status: "Routes are being added incrementally",
   reference: "https://github.com/sonicjs/sonicjs"
 };
 
 exports.ROUTES_INFO = ROUTES_INFO;
+exports.adminMediaRoutes = adminMediaRoutes;
+exports.adminPluginRoutes = adminPluginRoutes;
 exports.admin_api_default = admin_api_default;
 exports.admin_content_default = admin_content_default;
 exports.api_content_crud_default = api_content_crud_default;
@@ -9972,5 +13640,5 @@ exports.api_media_default = api_media_default;
 exports.api_system_default = api_system_default;
 exports.auth_default = auth_default;
 exports.userRoutes = userRoutes;
-//# sourceMappingURL=chunk-Y6VF3YFA.cjs.map
-//# sourceMappingURL=chunk-Y6VF3YFA.cjs.map
+//# sourceMappingURL=chunk-H6E2I5GW.cjs.map
+//# sourceMappingURL=chunk-H6E2I5GW.cjs.map