@kyro-cms/admin 0.1.6 → 0.1.8

package/src/pages/admin/index.astro

@@ -15,83 +15,44 @@ const authItems = authCollections.map(slug => ({
     <!-- Header -->
     <div class="surface-tile p-6 flex items-center justify-between gap-8">
       <div class="relative flex-1 max-w-2xl">
-        <div class="absolute inset-y-0 left-6 flex items-center pointer-events-none text-[#64748b]">
+        <div class="absolute inset-y-0 left-6 flex items-center pointer-events-none text-[var(--kyro-text-muted)]">
           <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.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
           </svg>
         </div>
-        <input type="text" placeholder="Search anything..." class="w-full bg-gray-50/50 border border-transparent rounded-2xl py-4 pl-16 pr-8 text-lg font-medium focus:outline-none focus:bg-white focus:border-gray-100 transition-all shadow-inner" />
+        <input type="text" id="header-search-input" placeholder="Search anything..." class="w-full bg-[var(--kyro-surface-accent)] border border-transparent rounded-2xl py-4 pl-16 pr-8 text-lg font-medium focus:outline-none focus:bg-[var(--kyro-surface)] focus:border-[var(--kyro-border)] transition-all shadow-inner text-[var(--kyro-text-primary)] placeholder-[var(--kyro-text-muted)]" autocomplete="off" />
+        <div id="header-search-results" class="hidden absolute top-full left-0 right-0 mt-2 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-xl shadow-xl max-h-80 overflow-y-auto z-50"></div>
       </div>
-      <div class="flex p-1.5 bg-gray-50/50 rounded-2xl">
-        <button class="flex items-center gap-3 px-8 py-3 bg-[#0b1222] text-white rounded-xl font-bold shadow-lg transition-all active:scale-95">
-          <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.5" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
-          </svg>
-          <span>Card</span>
-        </button>
-        <button class="flex items-center gap-3 px-8 py-3 text-[#64748b] rounded-xl font-bold hover:bg-white/50 transition-all">
-          <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.5" d="M4 6h16M4 12h16M4 18h16"></path>
-          </svg>
-          <span>List</span>
+      <div class="flex p-1.5 bg-[var(--kyro-surface-accent)] rounded-2xl">
+        <button id="cmd-k-btn" class="flex items-center gap-3 px-8 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl font-bold shadow-lg transition-all active:scale-95 cursor-pointer">
+          <span>⌘ K</span>
         </button>
       </div>
     </div>
 
-    <!-- Auth Management Section -->
+    <!-- Quick Links Section -->
     <div class="surface-tile overflow-hidden">
-      <div class="flex items-center justify-between p-12 border-b border-gray-50/50">
+      <div class="flex items-center justify-between p-6 border-b border-[var(--kyro-border)]">
         <div class="flex-1">
-          <h2 class="text-5xl font-black tracking-tighter text-[#0b1222]">
-            Authentication
+          <h2 class="text-xl font-black tracking-tight text-[var(--kyro-text-primary)] flex items-center gap-2">
+            Quick Links
           </h2>
-          <p class="text-[#64748b] font-bold mt-4 uppercase tracking-[0.2em] text-sm">
-            Manage users, roles, and security
+          <p class="text-xs text-[var(--kyro-text-secondary)] font-medium mt-1">
+            Create new collection documents
           </p>
         </div>
-        <a href="/users/new" class="flex items-center gap-2 px-6 py-3 bg-[#0b1222] text-white rounded-xl font-bold transition-all hover:bg-[#1a2332] active:scale-95">
-          <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.5" d="M12 5v14M5 12h14"></path>
-          </svg>
-          Add User
-        </a>
       </div>
 
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-6">
-        {authItems.map((item) => (
-          <a href={`/${item.slug}`} class="group p-6 bg-gray-50/30 rounded-2xl hover:bg-gray-50/50 transition-all border border-transparent hover:border-gray-100/50">
-            <div class="flex items-center gap-4 mb-4">
-              <div class={`w-12 h-12 rounded-xl flex items-center justify-center ${
-                item.slug === 'users' ? 'bg-blue-50 text-blue-500' :
-                item.slug === 'roles' ? 'bg-purple-50 text-purple-500' :
-                'bg-green-50 text-green-500'
-              }`}>
-                {item.icon === 'users' && (
-                  <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="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
-                  </svg>
-                )}
-                {item.icon === 'shield' && (
-                  <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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
-                  </svg>
-                )}
-                {item.icon === 'file-text' && (
-                  <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="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>
-                <h3 class="text-xl font-black text-[#0b1222] tracking-tighter">{item.label}</h3>
-                <p class="text-sm text-[#64748b] font-medium mt-1">Manage {item.slug.replace('_', ' ')}</p>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4">
+        {Object.entries(collections).filter(([slug]) => !['users', 'roles', 'audit_logs', 'media'].includes(slug)).slice(0, 6).map(([slug, config]: [string, any]) => (
+          <a href={`/${slug}/new`} class="group p-4 bg-[var(--kyro-surface-accent)] rounded-xl hover:bg-[var(--kyro-surface)] transition-all border border-transparent hover:border-[var(--kyro-border)] shadow-sm hover:shadow-md">
+            <div class="flex items-center gap-3">
+              <div class="w-8 h-8 rounded-lg flex items-center justify-center bg-[var(--kyro-bg-secondary)] text-[var(--kyro-text-secondary)] group-hover:bg-[var(--kyro-surface-accent)] group-hover:text-[var(--kyro-primary)] transition-all">
+                <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="M12 5v14M5 12h14"></path>
+                </svg>
               </div>
-            </div>
-            <div class="flex items-center gap-2 text-[#64748b] font-bold text-sm group-hover:text-[#0b1222] transition-colors">
-              <span>View all</span>
-              <svg class="w-4 h-4 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-              </svg>
+              <span class="text-sm font-bold text-[var(--kyro-text-primary)]">New {config.label || slug}</span>
             </div>
           </a>
         ))}
@@ -100,126 +61,226 @@ const authItems = authCollections.map(slug => ({
 
     <!-- Security Quick Actions -->
     <div class="surface-tile overflow-hidden">
-      <div class="p-8 border-b border-gray-50/50">
-        <h2 class="text-3xl font-black tracking-tighter text-[#0b1222]">
+      <div class="p-6 border-b border-[var(--kyro-border)]">
+        <h2 class="text-xl font-black tracking-tight text-[var(--kyro-text-primary)]">
           Security & Monitoring
         </h2>
-        <p class="text-[#64748b] font-bold mt-2 text-sm">
+        <p class="text-xs text-[var(--kyro-text-secondary)] font-medium mt-1">
           Rate limiting, audit logs, and account lockout settings
         </p>
       </div>
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 p-6">
-        <a href="/audit_logs" class="p-5 bg-gray-50/30 rounded-xl hover:bg-gray-50/50 transition-all border border-transparent hover:border-gray-100/50 group">
-          <div class="w-10 h-10 rounded-lg bg-orange-50 text-orange-500 flex items-center justify-center mb-3">
+        <a href="/audit" class="p-5 bg-[var(--kyro-surface-accent)] rounded-xl hover:bg-[var(--kyro-surface-accent)] transition-all border border-transparent hover:border-[var(--kyro-border)] group">
+          <div class="w-10 h-10 rounded-lg bg-orange-500/10 text-orange-500 flex items-center justify-center mb-3">
             <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
             </svg>
           </div>
-          <h4 class="font-bold text-[#0b1222] mb-1">Audit Logs</h4>
-          <p class="text-xs text-[#64748b]">View last 30 days</p>
+          <h4 class="font-bold text-[var(--kyro-text-primary)] mb-1">Audit Logs</h4>
+          <p class="text-xs text-[var(--kyro-text-secondary)]">View last 30 days</p>
         </a>
 
-        <a href="/users?locked=true" class="p-5 bg-gray-50/30 rounded-xl hover:bg-gray-50/50 transition-all border border-transparent hover:border-gray-100/50 group">
-          <div class="w-10 h-10 rounded-lg bg-red-50 text-red-500 flex items-center justify-center mb-3">
+        <a href="/users?locked=true" class="p-5 bg-[var(--kyro-surface-accent)] rounded-xl hover:bg-[var(--kyro-surface-accent)] transition-all border border-transparent hover:border-[var(--kyro-border)] group">
+          <div class="w-10 h-10 rounded-lg bg-red-500/10 text-red-500 flex items-center justify-center mb-3">
             <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
             </svg>
           </div>
-          <h4 class="font-bold text-[#0b1222] mb-1">Locked Accounts</h4>
-          <p class="text-xs text-[#64748b]">Manage lockouts</p>
+          <h4 class="font-bold text-[var(--kyro-text-primary)] mb-1">Locked Accounts</h4>
+          <p class="text-xs text-[var(--kyro-text-secondary)]">Manage lockouts</p>
         </a>
 
-        <a href="/roles" class="p-5 bg-gray-50/30 rounded-xl hover:bg-gray-50/50 transition-all border border-transparent hover:border-gray-100/50 group">
-          <div class="w-10 h-10 rounded-lg bg-indigo-50 text-indigo-500 flex items-center justify-center mb-3">
+        <a href="/roles" class="p-5 bg-[var(--kyro-surface-accent)] rounded-xl hover:bg-[var(--kyro-surface-accent)] transition-all border border-transparent hover:border-[var(--kyro-border)] group">
+          <div class="w-10 h-10 rounded-lg bg-indigo-500/10 text-indigo-500 flex items-center justify-center mb-3">
             <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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
             </svg>
           </div>
-          <h4 class="font-bold text-[#0b1222] mb-1">Permissions</h4>
-          <p class="text-xs text-[#64748b]">RBAC settings</p>
+          <h4 class="font-bold text-[var(--kyro-text-primary)] mb-1">Permissions</h4>
+          <p class="text-xs text-[var(--kyro-text-secondary)]">RBAC settings</p>
         </a>
 
-        <a href="/api/health" target="_blank" class="p-5 bg-gray-50/30 rounded-xl hover:bg-gray-50/50 transition-all border border-transparent hover:border-gray-100/50 group">
-          <div class="w-10 h-10 rounded-lg bg-green-50 text-green-500 flex items-center justify-center mb-3">
+        <a href="/api/health" target="_blank" class="p-5 bg-[var(--kyro-surface-accent)] rounded-xl hover:bg-[var(--kyro-surface-accent)] transition-all border border-transparent hover:border-[var(--kyro-border)] group">
+          <div class="w-10 h-10 rounded-lg bg-green-500/10 text-green-500 flex items-center justify-center mb-3">
             <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
             </svg>
           </div>
-          <h4 class="font-bold text-[#0b1222] mb-1">API Health</h4>
-          <p class="text-xs text-[#64748b]">System status</p>
+          <h4 class="font-bold text-[var(--kyro-text-primary)] mb-1">API Health</h4>
+          <p class="text-xs text-[var(--kyro-text-secondary)]">System status</p>
         </a>
       </div>
     </div>
 
-    <!-- Environment Info -->
-    <div class="surface-tile p-6">
-      <h3 class="text-xl font-black text-[#0b1222] tracking-tighter mb-4">Configuration</h3>
-      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-        <div class="bg-gray-50/50 rounded-xl p-4">
-          <div class="text-xs text-[#64748b] font-bold uppercase tracking-wider mb-1">Database</div>
-          <div class="text-sm font-bold text-[#0b1222]">PostgreSQL</div>
-        </div>
-        <div class="bg-gray-50/50 rounded-xl p-4">
-          <div class="text-xs text-[#64748b] font-bold uppercase tracking-wider mb-1">Cache/Sessions</div>
-          <div class="text-sm font-bold text-[#0b1222]">Redis</div>
-        </div>
-        <div class="bg-gray-50/50 rounded-xl p-4">
-          <div class="text-xs text-[#64748b] font-bold uppercase tracking-wider mb-1">Auth Method</div>
-          <div class="text-sm font-bold text-[#0b1222]">JWT + Redis</div>
-        </div>
-        <div class="bg-gray-50/50 rounded-xl p-4">
-          <div class="text-xs text-[#64748b] font-bold uppercase tracking-wider mb-1">Email</div>
-          <div class="text-sm font-bold text-[#0b1222]">Nodemailer</div>
-        </div>
+    <!-- Developer Tools Section -->
+    <div class="surface-tile overflow-hidden">
+      <div class="p-6 border-b border-[var(--kyro-border)]">
+        <h2 class="text-xl font-black tracking-tight text-[var(--kyro-text-primary)]">
+          Developer Tools
+        </h2>
+        <p class="text-xs text-[var(--kyro-text-secondary)] font-medium mt-1">
+          REST API & GraphQL testing tools
+        </p>
       </div>
-      <p class="text-xs text-[#64748b] mt-4 font-medium">
-        Configure via <code class="bg-gray-100 px-2 py-0.5 rounded text-[#0b1222]">.env</code> file
-      </p>
-    </div>
 
-    <!-- Quick Links -->
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-      <a href="/api/health" target="_blank" class="surface-tile group p-6 hover:shadow-2xl transition-all hover:translate-y-[-4px]">
-        <div class="flex items-center gap-4">
-          <div class="w-14 h-14 rounded-2xl bg-green-50 flex items-center justify-center text-green-500 group-hover:scale-110 transition-transform">
-            <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-            </svg>
-          </div>
-          <div>
-            <h4 class="text-lg font-bold text-[#0b1222]">API Health</h4>
-            <p class="text-sm text-[#64748b]">Check system status</p>
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 p-8">
+        <!-- REST API -->
+        <div class="bg-[var(--kyro-surface-accent)] rounded-2xl p-6">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 rounded-xl bg-pink-500/10 flex items-center justify-center text-pink-500">
+              <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="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+              </svg>
+            </div>
+            <div>
+              <h3 class="text-xl font-black text-[var(--kyro-text-primary)]">REST API</h3>
+              <p class="text-xs text-[var(--kyro-text-secondary)]">HTTP endpoints</p>
+            </div>
           </div>
-        </div>
-      </a>
-
-      <a href="/graphql" target="_blank" class="surface-tile group p-6 hover:shadow-2xl transition-all hover:translate-y-[-4px]">
-        <div class="flex items-center gap-4">
-          <div class="w-14 h-14 rounded-2xl bg-pink-50 flex items-center justify-center text-pink-500 group-hover:scale-110 transition-transform">
-            <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
-            </svg>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <a href="/admin/api-explorer" class="group p-4 bg-[var(--kyro-surface)] rounded-xl hover:bg-[var(--kyro-surface-accent)] transition-all border border-transparent hover:border-[var(--kyro-border)]">
+              <div class="flex items-center gap-3 mb-2">
+                <div class="w-8 h-8 rounded-lg bg-green-500/10 flex items-center justify-center text-green-500 group-hover:scale-110 transition-transform">
+                  <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                  </svg>
+                </div>
+                <h4 class="font-bold text-[var(--kyro-text-primary)]">Explorer</h4>
+              </div>
+              <p class="text-xs text-[var(--kyro-text-secondary)]">Test endpoints interactively</p>
+            </a>
+            <a href="/admin/rest-playground" class="group p-4 bg-[var(--kyro-surface)] rounded-xl hover:bg-[var(--kyro-surface-accent)] transition-all border border-transparent hover:border-[var(--kyro-border)]">
+              <div class="flex items-center gap-3 mb-2">
+                <div class="w-8 h-8 rounded-lg bg-blue-500/10 flex items-center justify-center text-blue-500 group-hover:scale-110 transition-transform">
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
+                  </svg>
+                </div>
+                <h4 class="font-bold text-[var(--kyro-text-primary)]">Playground</h4>
+              </div>
+              <p class="text-xs text-[var(--kyro-text-secondary)]">Saved requests & history</p>
+            </a>
           </div>
-          <div>
-            <h4 class="text-lg font-bold text-[#0b1222]">GraphQL</h4>
-            <p class="text-sm text-[#64748b]">API Playground</p>
+          <div class="mt-4 pt-4 border-t border-[var(--kyro-border)]">
+            <a href="/api/collections" target="_blank" class="flex items-center gap-2 text-xs text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-secondary)] transition-colors">
+              <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
+              </svg>
+              View Collections JSON
+            </a>
           </div>
         </div>
-      </a>
 
-      <a href="/api/collections" target="_blank" class="surface-tile group p-6 hover:shadow-2xl transition-all hover:translate-y-[-4px]">
-        <div class="flex items-center gap-4">
-          <div class="w-14 h-14 rounded-2xl bg-blue-50 flex items-center justify-center text-blue-500 group-hover:scale-110 transition-transform">
-            <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"></path>
-            </svg>
+        <!-- GraphQL -->
+        <div class="bg-[var(--kyro-surface-accent)] rounded-2xl p-6">
+          <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 rounded-xl bg-pink-500/10 flex items-center justify-center text-pink-500">
+              <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 10V3L4 14h7v7l9-11h-7z"></path>
+              </svg>
+            </div>
+            <div>
+              <h3 class="text-xl font-black text-[var(--kyro-text-primary)]">GraphQL</h3>
+              <p class="text-xs text-[var(--kyro-text-secondary)]">Query language API</p>
+            </div>
           </div>
-          <div>
-            <h4 class="text-lg font-bold text-[#0b1222]">REST API</h4>
-            <p class="text-sm text-[#64748b]">Collections endpoint</p>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <a href="/admin/graphql" class="group p-4 bg-[var(--kyro-surface)] rounded-xl hover:bg-[var(--kyro-surface-accent)] transition-all border border-transparent hover:border-[var(--kyro-border)]">
+              <div class="flex items-center gap-3 mb-2">
+                <div class="w-8 h-8 rounded-lg bg-purple-500/10 flex items-center justify-center text-purple-500 group-hover:scale-110 transition-transform">
+                  <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="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                  </svg>
+                </div>
+                <h4 class="font-bold text-[var(--kyro-text-primary)]">Playground</h4>
+              </div>
+              <p class="text-xs text-[var(--kyro-text-secondary)]">Write & test queries</p>
+            </a>
+            <a href="/admin/graphql-explorer" class="group p-4 bg-[var(--kyro-surface)] rounded-xl hover:bg-[var(--kyro-surface-accent)] transition-all border border-transparent hover:border-[var(--kyro-border)]">
+              <div class="flex items-center gap-3 mb-2">
+                <div class="w-8 h-8 rounded-lg bg-orange-500/10 flex items-center justify-center text-orange-500 group-hover:scale-110 transition-transform">
+                  <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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
+                  </svg>
+                </div>
+                <h4 class="font-bold text-[var(--kyro-text-primary)]">Explorer</h4>
+              </div>
+              <p class="text-xs text-[var(--kyro-text-secondary)]">Schema documentation</p>
+            </a>
+          </div>
+          <div class="mt-4 pt-4 border-t border-[var(--kyro-border)]">
+            <a href="/api/graphql" target="_blank" class="flex items-center gap-2 text-xs text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-secondary)] transition-colors">
+              <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
+              </svg>
+              View GraphQL Endpoint
+            </a>
           </div>
         </div>
-      </a>
+      </div>
     </div>
-  </div>
+
+  <script is:inline>
+    (function() {
+      var searchInput = document.getElementById('header-search-input');
+      var searchResults = document.getElementById('header-search-results');
+      if (!searchInput || !searchResults) return;
+      
+      var debounceTimer = null;
+      
+      function renderResults(results) {
+        var html = '';
+        if (!results || results.length === 0) {
+          html = '<div class="p-4 text-center text-[var(--kyro-text-secondary)] opacity-60">No documents found</div>';
+        } else {
+          for (var i = 0; i < Math.min(results.length, 6); i++) {
+            var r = results[i];
+            html += '<a href="/' + r.collection + '/' + r.id + '" class="flex items-center justify-between px-4 py-3 hover:bg-[var(--kyro-surface-accent)] transition-colors">';
+            html += '<div class="flex flex-col"><span class="font-bold text-sm text-[var(--kyro-text-primary)]">' + (r.title || 'Untitled') + '</span>';
+            html += '<span class="text-[10px] font-black uppercase tracking-widest opacity-40">' + r.label + '</span></div>';
+            html += '<span class="text-xs text-[var(--kyro-text-muted)]">View</span></a>';
+          }
+        }
+        searchResults.innerHTML = html;
+        searchResults.classList.remove('hidden');
+      }
+      
+      function hideResults() {
+        searchResults.classList.add('hidden');
+      }
+      
+      searchInput.addEventListener('input', function(e) {
+        var query = e.target.value.trim();
+        if (query.length < 2) {
+          searchResults.classList.add('hidden');
+          return;
+        }
+        if (debounceTimer) clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(function() {
+          var xhr = new XMLHttpRequest();
+          xhr.open('GET', '/api/search?q=' + encodeURIComponent(query) + '&limit=10', true);
+          xhr.onload = function() {
+            if (xhr.status === 200) {
+              try {
+                var data = JSON.parse(xhr.responseText);
+                if (data.results) renderResults(data.results);
+              } catch(err) { console.error(err); }
+            }
+          };
+          xhr.send();
+        }, 300);
+      });
+      
+      searchInput.addEventListener('blur', function() {
+        setTimeout(hideResults, 200);
+      });
+      
+      document.addEventListener('click', function(e) {
+        if (!searchInput.contains(e.target) && !searchResults.contains(e.target)) {
+          hideResults();
+        }
+      });
+    })();
+  </script>
 </AdminLayout>

package/src/pages/admin/keys.astro

@@ -0,0 +1,8 @@
+---
+import AdminLayout from "../../layouts/AdminLayout.astro";
+import { ApiKeysManager } from "../../components/ApiKeysManager";
+---
+
+<AdminLayout title="API Keys">
+  <ApiKeysManager client:only="react" />
+</AdminLayout>

package/src/pages/admin/rest-playground.astro

@@ -0,0 +1,44 @@
+---
+import AdminLayout from '../../layouts/AdminLayout.astro';
+import { RestPlayground } from '../../components/RestPlayground';
+
+const collectionsResponse = await fetch(`${Astro.url.origin}/api/collections`);
+const collectionsData = await collectionsResponse.json();
+const collections = collectionsData.collections || [];
+---
+
+<AdminLayout title="REST Playground">
+  <div class="flex-1 overflow-hidden p-8 pr-12">
+    <!-- Header -->
+    <div class="mb-6">
+      <div class="flex items-center justify-between mb-4">
+        <div>
+          <h1 class="text-3xl font-black tracking-tighter text-[var(--kyro-text-primary)]">
+            REST Playground
+          </h1>
+          <p class="text-[var(--kyro-text-secondary)] font-bold mt-2 text-sm uppercase tracking-wider">
+            Saved collections, history, and environment variables
+          </p>
+        </div>
+        <div class="flex items-center gap-4">
+          <a
+            href="/admin/api-explorer"
+            class="flex items-center gap-2 px-4 py-2 bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-primary)] rounded-lg font-bold text-sm hover:bg-[var(--kyro-surface)] transition-all border border-[var(--kyro-border)]"
+          >
+            <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="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+            </svg>
+            Explorer
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <!-- Playground Container -->
+    <div class="h-[calc(100vh-200px)] overflow-hidden">
+      <div class="surface-tile h-full overflow-hidden">
+        <RestPlayground client:load collections={collections} />
+      </div>
+    </div>
+  </div>
+</AdminLayout>

package/src/pages/admin/webhooks.astro

@@ -0,0 +1,8 @@
+---
+import AdminLayout from "../../layouts/AdminLayout.astro";
+import { WebhookManager } from "../../components/WebhookManager";
+---
+
+<AdminLayout title="Webhooks">
+  <WebhookManager client:only="react" />
+</AdminLayout>

package/src/pages/api/[collection]/[id]/publish.ts

@@ -0,0 +1,52 @@
+import type { APIRoute } from "astro";
+import { dataStore } from "@/lib/dataStore";
+import { collections } from "@/lib/config";
+
+dataStore.initialize(collections);
+
+export const POST: APIRoute = async ({ params, request }) => {
+  const collection = params.collection as string;
+  const id = params.id as string;
+
+  if (!collection || !collections[collection]) {
+    return new Response(JSON.stringify({ error: "Invalid collection" }), {
+      status: 404,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+
+  try {
+    const doc = await dataStore.findById(collection, id);
+    if (!doc) {
+      return new Response(JSON.stringify({ error: "Document not found" }), {
+        status: 404,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+
+    const now = new Date().toISOString();
+    const updated = await dataStore.update(
+      collection,
+      id,
+      {
+        status: "published",
+        publishedAt: now,
+      },
+      {
+        versionStatus: "published",
+        changeDescription: "Published changes",
+      },
+    );
+
+    return new Response(JSON.stringify({ success: true, data: updated }), {
+      status: 200,
+      headers: { "Content-Type": "application/json" },
+    });
+  } catch (error) {
+    console.error("Publish error:", error);
+    return new Response(JSON.stringify({ error: "Failed to publish" }), {
+      status: 500,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+};

package/src/pages/api/[collection]/[id]/unpublish.ts

@@ -0,0 +1,42 @@
+import type { APIRoute } from "astro";
+import { dataStore } from "@/lib/dataStore";
+import { collections } from "@/lib/config";
+
+dataStore.initialize(collections);
+
+export const POST: APIRoute = async ({ params, request }) => {
+  const collection = params.collection as string;
+  const id = params.id as string;
+
+  if (!collection || !collections[collection]) {
+    return new Response(JSON.stringify({ error: "Invalid collection" }), {
+      status: 404,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+
+  try {
+    const doc = await dataStore.findById(collection, id);
+    if (!doc) {
+      return new Response(JSON.stringify({ error: "Document not found" }), {
+        status: 404,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+
+    const updated = await dataStore.update(collection, id, {
+      status: "draft",
+    });
+
+    return new Response(JSON.stringify({ success: true, data: updated }), {
+      status: 200,
+      headers: { "Content-Type": "application/json" },
+    });
+  } catch (error) {
+    console.error("Unpublish error:", error);
+    return new Response(JSON.stringify({ error: "Failed to unpublish" }), {
+      status: 500,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+};