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

package/dist/{chunk-VY6FDZ6Y.js → chunk-RWLPYK7R.js}

@@ -7,7 +7,7 @@ import { cors } from 'hono/cors';
 import { z } from 'zod';
 import { validator } from 'hono/validator';
 import { setCookie } from 'hono/cookie';
-import { html } from 'hono/html';
+import { html, raw } from 'hono/html';
 
 // src/templates/components/logo.template.ts
 function renderLogo(data = {}) {
@@ -9944,6 +9944,2049 @@ userRoutes.get("/activity-logs/export", requirePermission("activity.read"), asyn
   }
 });
 
+// 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 = z.object({
+  name: z.string().min(1).max(255),
+  type: 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: z.number().min(1).max(50 * 1024 * 1024)
+  // 50MB max
+});
+var adminMediaRoutes = new 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`<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`
+      <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">
+        ${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`
+        <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`<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(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`
+        <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`
+      ${uploadResults.length > 0 ? 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`
+        <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`
+              <li>${error.filename}: ${error.error}</li>
+            `)}
+          </ul>
+        </div>
+      ` : ""}
+
+      ${uploadResults.length > 0 ? 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`
+      <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`
+        <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`
+        <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`
+      <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`
+      <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`
+        <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`
+        <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`
+      <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`
+      <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/routes/index.ts
 var ROUTES_INFO = {
   message: "Routes migration in progress",
@@ -9955,12 +11998,13 @@ var ROUTES_INFO = {
     "adminApiRoutes",
     "authRoutes",
     "adminContentRoutes",
-    "adminUsersRoutes"
+    "adminUsersRoutes",
+    "adminMediaRoutes"
   ],
   status: "Routes are being added incrementally",
   reference: "https://github.com/sonicjs/sonicjs"
 };
 
-export { ROUTES_INFO, admin_api_default, admin_content_default, api_content_crud_default, api_default, api_media_default, api_system_default, auth_default, userRoutes };
-//# sourceMappingURL=chunk-VY6FDZ6Y.js.map
-//# sourceMappingURL=chunk-VY6FDZ6Y.js.map
+export { ROUTES_INFO, adminMediaRoutes, admin_api_default, admin_content_default, api_content_crud_default, api_default, api_media_default, api_system_default, auth_default, userRoutes };
+//# sourceMappingURL=chunk-RWLPYK7R.js.map
+//# sourceMappingURL=chunk-RWLPYK7R.js.map