@kyro-cms/admin 0.11.3 → 0.11.5

package/src/pages/index.astro

@@ -3,6 +3,7 @@ import AdminLayout from "../layouts/AdminLayout.astro";
 import { collections } from "../lib/config";
 const authCollections = ["users", "audit_logs"];
 import { adminPath, apiPath } from "../lib/paths";
+import { DashboardMetrics } from "../components/DashboardMetrics";
 
 const authItems = authCollections.map((slug) => ({
   slug,
@@ -16,15 +17,8 @@ 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-[var(--kyro-text-muted)]"
-        >
-          <svg
-            class="w-6 h-6"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
+        <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"
@@ -55,29 +49,24 @@ const authItems = authCollections.map((slug) => ({
       </div>
     </div>
 
+    <!-- CMS Metrics -->
+    <DashboardMetrics client:load />
+
     <!-- Quick Links Section -->
-    <div class="surface-tile overflow-hidden">
-      <div
-        class="flex items-center justify-between p-6 border-b border-[var(--kyro-border)]"
-      >
+    <div class="surface-tile overflow-hidden mt-8">
+      <div class="flex items-center justify-between p-6 border-b border-[var(--kyro-border)]">
         <div class="flex-1">
-          <h2
-            class="text-xl font-bold tracking-tight text-[var(--kyro-text-primary)] flex items-center gap-2"
-          >
+          <h2 class="text-xl font-bold tracking-tight text-[var(--kyro-text-primary)] flex items-center gap-2">
             Quick Links
           </h2>
-          <p class="text-xs text-[var(--kyro-text-secondary)] font-medium mt-1">
-            Create new collection documents
-          </p>
+          <p class="text-xs text-[var(--kyro-text-secondary)] font-medium mt-1">Create new collection documents</p>
         </div>
       </div>
 
       <div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4">
         {
           Object.entries(collections)
-            .filter(
-              ([slug]) => !["users", "audit_logs", "media"].includes(slug),
-            )
+            .filter(([slug]) => !["users", "audit_logs", "media"].includes(slug))
             .slice(0, 6)
             .map(([slug, config]: [string, any]) => (
               <a
@@ -86,23 +75,11 @@ const authItems = authCollections.map((slug) => ({
               >
                 <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"
-                      />
+                    <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" />
                     </svg>
                   </div>
-                  <span class="text-sm font-medium text-[var(--kyro-text-primary)]">
-                    New {config.label || slug}
-                  </span>
+                  <span class="text-sm font-medium text-[var(--kyro-text-primary)]">New {config.label || slug}</span>
                 </div>
               </a>
             ))
@@ -113,11 +90,7 @@ const authItems = authCollections.map((slug) => ({
     <!-- Security Quick Actions -->
     <div class="surface-tile overflow-hidden">
       <div class="p-6 border-b border-[var(--kyro-border)]">
-        <h2
-          class="text-xl font-bold tracking-tight text-[var(--kyro-text-primary)]"
-        >
-          Security & Monitoring
-        </h2>
+        <h2 class="text-xl font-bold tracking-tight text-[var(--kyro-text-primary)]">Security & Monitoring</h2>
         <p class="text-xs text-[var(--kyro-text-secondary)] font-medium mt-1">
           Rate limiting, audit logs, and account lockout settings
         </p>
@@ -127,15 +100,8 @@ const authItems = authCollections.map((slug) => ({
           href={`${adminPath}/audit`}
           class="p-5 bg-[var(--kyro-surface-accent)] rounded-lg 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"
-            >
+          <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"
@@ -144,27 +110,16 @@ const authItems = authCollections.map((slug) => ({
               ></path>
             </svg>
           </div>
-          <h4 class="font-medium text-[var(--kyro-text-primary)] mb-1">
-            Audit Logs
-          </h4>
-          <p class="text-xs text-[var(--kyro-text-secondary)]">
-            View last 30 days
-          </p>
+          <h4 class="font-medium 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={`${adminPath}/users?locked=true`}
           class="p-5 bg-[var(--kyro-surface-accent)] rounded-lg 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"
-            >
+          <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"
@@ -173,27 +128,16 @@ const authItems = authCollections.map((slug) => ({
               ></path>
             </svg>
           </div>
-          <h4 class="font-medium text-[var(--kyro-text-primary)] mb-1">
-            Locked Accounts
-          </h4>
-          <p class="text-xs text-[var(--kyro-text-secondary)]">
-            Manage lockouts
-          </p>
+          <h4 class="font-medium 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={`${adminPath}/roles`}
           class="p-5 bg-[var(--kyro-surface-accent)] rounded-lg 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"
-            >
+          <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"
@@ -202,9 +146,7 @@ const authItems = authCollections.map((slug) => ({
               ></path>
             </svg>
           </div>
-          <h4 class="font-medium text-[var(--kyro-text-primary)] mb-1">
-            Permissions
-          </h4>
+          <h4 class="font-medium text-[var(--kyro-text-primary)] mb-1">Permissions</h4>
           <p class="text-xs text-[var(--kyro-text-secondary)]">RBAC settings</p>
         </a>
 
@@ -213,15 +155,8 @@ const authItems = authCollections.map((slug) => ({
           target="_blank"
           class="p-5 bg-[var(--kyro-surface-accent)] rounded-lg 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"
-            >
+          <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"
@@ -229,9 +164,7 @@ const authItems = authCollections.map((slug) => ({
                 d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
             </svg>
           </div>
-          <h4 class="font-medium text-[var(--kyro-text-primary)] mb-1">
-            API Health
-          </h4>
+          <h4 class="font-medium text-[var(--kyro-text-primary)] mb-1">API Health</h4>
           <p class="text-xs text-[var(--kyro-text-secondary)]">System status</p>
         </a>
       </div>
@@ -248,8 +181,7 @@ const authItems = authCollections.map((slug) => ({
         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>';
+            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];
@@ -265,12 +197,8 @@ const authItems = authCollections.map((slug) => ({
                 '<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-bold  tracking-widest opacity-40">' +
-                r.label +
-                "</span></div>";
-              html +=
-                '<span class="text-xs text-[var(--kyro-text-muted)]">View</span></a>';
+              html += '<span class="text-[10px] font-bold  tracking-widest opacity-40">' + r.label + "</span></div>";
+              html += '<span class="text-xs text-[var(--kyro-text-muted)]">View</span></a>';
             }
           }
           searchResults.innerHTML = html;
@@ -290,11 +218,7 @@ const authItems = authCollections.map((slug) => ({
           if (debounceTimer) clearTimeout(debounceTimer);
           debounceTimer = setTimeout(function () {
             var xhr = new XMLHttpRequest();
-            xhr.open(
-              "GET",
-              apiPath + "/search?q=" + encodeURIComponent(query) + "&limit=10",
-              true,
-            );
+            xhr.open("GET", apiPath + "/search?q=" + encodeURIComponent(query) + "&limit=10", true);
             xhr.onload = function () {
               if (xhr.status === 200) {
                 try {
@@ -314,10 +238,7 @@ const authItems = authCollections.map((slug) => ({
         });
 
         document.addEventListener("click", function (e) {
-          if (
-            !searchInput.contains(e.target) &&
-            !searchResults.contains(e.target)
-          ) {
+          if (!searchInput.contains(e.target) && !searchResults.contains(e.target)) {
             hideResults();
           }
         });

package/src/pages/media.astro

@@ -7,7 +7,7 @@ import { adminPath, apiPath } from '../lib/paths';
 ---
 
 <AdminLayout title="Media Library">
-  <div class="flex-1 overflow-hidden">
+  <div class="flex-1 flex flex-col h-full min-h-0 overflow-hidden -m-4 md:m-0">
     <MediaGallery client:load />
   </div>
 </AdminLayout>

package/src/pages/settings/[slug].astro

@@ -102,7 +102,9 @@ const description =
 
   <script>
     console.log("[Astro] Settings page script running");
-    document.getElementById("settings-save-btn")?.addEventListener("click", () => {
+    const saveBtn = document.getElementById("settings-save-btn");
+    
+    saveBtn?.addEventListener("click", () => {
       console.log("[Astro] Header save clicked");
       const btn = document.getElementById("btn-save");
       if (btn) {
@@ -112,5 +114,21 @@ const description =
         console.error("[Astro] Hidden save button not found!");
       }
     });
+
+    window.addEventListener("kyro:global-save-start", () => {
+      if (saveBtn) {
+        saveBtn.disabled = true;
+        saveBtn.innerHTML = "Saving...";
+        saveBtn.classList.add("opacity-50", "cursor-wait");
+      }
+    });
+
+    window.addEventListener("kyro:global-save-end", () => {
+      if (saveBtn) {
+        saveBtn.disabled = false;
+        saveBtn.innerHTML = "Save Changes";
+        saveBtn.classList.remove("opacity-50", "cursor-wait");
+      }
+    });
   </script>
 </AdminLayout>

package/src/styles/main.css

@@ -5,9 +5,10 @@
 
 :root {
   /* Monochrome Palette */
-  --kyro-black: #0b1222;
-  --kyro-black-light: #1a2332;
-  --kyro-black-hover: #2a3342;
+  --kyro-black: #0a0a0a;
+  --kyro-black-light: #171717;
+  --kyro-black-hover: #262626;
+  --kyro-black-inverted: #ffffff;
 
   /* Neutral Palette */
   --kyro-gray-50: #f9fafb;
@@ -26,13 +27,13 @@
   --kyro-surface: #ffffff;
   --kyro-surface-accent: #f9fafb;
   --kyro-sidebar-bg: #ffffff;
-  --kyro-sidebar-active: #0b1222;
+  --kyro-sidebar-active: var(--kyro-black);
   --kyro-sidebar-text: #64748b;
-  --kyro-sidebar-text-active: #ffffff;
+  --kyro-sidebar-text-active: var(--kyro-black-inverted);
   --kyro-sidebar-border: rgba(0, 0, 0, 0.05);
 
   /* Semantic Typography */
-  --kyro-text-primary: #0b1222;
+  --kyro-text-primary: #0a0a0a;
   --kyro-text-secondary: #64748b;
   --kyro-text-muted: #94a3b8;
 
@@ -48,8 +49,8 @@
   --kyro-shadow-tile: 0 10px 40px -10px rgba(0, 0, 0, 0.04);
 
   /* Primary Brand Color */
-  --kyro-primary: #0b1222;
-  --kyro-primary-hover: #1a2332;
+  --kyro-primary: #0a0a0a;
+  --kyro-primary-hover: #171717;
 
   /* Success Color */
   --kyro-success: #22c55e;
@@ -76,29 +77,30 @@
 }
 
 :root.dark {
-  --kyro-bg: #050912;
-  --kyro-surface: #0b1222;
-  --kyro-surface-accent: #111a2e;
-  --kyro-sidebar-bg: #0b1222;
-  --kyro-sidebar-active: #ffffff;
-  --kyro-sidebar-text: #94a3b8;
-  --kyro-sidebar-text-active: #0b1222;
-  --kyro-sidebar-border: rgba(255, 255, 255, 0.05);
-
-  --kyro-text-primary: #ffffff;
-  --kyro-text-secondary: #94a3b8;
-  --kyro-text-muted: #64748b;
-
-  --kyro-border: #1a2332;
-  --kyro-input-bg: #111a2e;
-  --kyro-input-border: #1e293b;
+  --kyro-bg: #0a0a0a;
+  --kyro-surface: #121212;
+  --kyro-surface-accent: #1c1c1c;
+  --kyro-sidebar-bg: #0a0a0a;
+  --kyro-sidebar-active: var(--kyro-black);
+  --kyro-sidebar-text: #a1a1aa;
+  --kyro-sidebar-text-active: var(--kyro-black-inverted);
+  --kyro-sidebar-border: rgba(255, 255, 255, 0.08);
+
+  --kyro-text-primary: #ededed;
+  --kyro-text-secondary: #a1a1aa;
+  --kyro-text-muted: #71717a;
+
+  --kyro-border: rgba(255, 255, 255, 0.08);
+  --kyro-input-bg: #1c1c1c;
+  --kyro-input-border: rgba(255, 255, 255, 0.1);
 
   --kyro-black: #ffffff;
   --kyro-black-light: #f3f4f6;
   --kyro-black-hover: #e5e7eb;
-  --kyro-gray-50: #1a2332;
-  --kyro-gray-100: #1e293b;
-  --kyro-gray-200: #334155;
+  --kyro-black-inverted: #0a0a0a;
+  --kyro-gray-50: #171717;
+  --kyro-gray-100: #262626;
+  --kyro-gray-200: #404040;
 
   /* Primary Brand Color (dark) - Use sidebar accent for consistency */
   --kyro-primary: var(--kyro-sidebar-active);
@@ -121,7 +123,7 @@
   --kyro-border-active: #ffffff;
 
   /* Secondary Backgrounds (dark) */
-  --kyro-bg-secondary: #111a2e;
+  --kyro-bg-secondary: #171717;
 
   color-scheme: dark;
 }
@@ -200,8 +202,8 @@
   }
 
   .dark .kyro-glass {
-    background: rgba(11, 18, 34, 0.7);
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    background: rgba(18, 18, 18, 0.7);
+    border: 1px solid rgba(255, 255, 255, 0.08);
   }
 
   .font-bold {
@@ -293,6 +295,10 @@
     background: var(--kyro-gray-50);
   }
 
+  .kyro-sidebar-item:active {
+    transform: scale(0.97);
+  }
+
   .kyro-sidebar-item.active {
     color: var(--kyro-sidebar-text-active);
     background: var(--kyro-sidebar-active);
@@ -374,6 +380,11 @@
     cursor: not-allowed;
   }
 
+  /* Active states for all buttons */
+  .kyro-btn:active:not(:disabled) {
+    transform: scale(0.97);
+  }
+
   .kyro-btn-sm {
     padding: 6px 10px;
     font-size: 12px;
@@ -391,7 +402,7 @@
 
   .kyro-btn-primary {
     background: var(--kyro-black);
-    color: var(--kyro-sidebar-text-active);
+    color: var(--kyro-black-inverted);
     border-color: var(--kyro-black);
   }
 
@@ -407,19 +418,20 @@
   }
 
   .kyro-btn-secondary:hover:not(:disabled) {
-    background: var(--kyro-gray-50);
-    border-color: var(--kyro-gray-300);
+    background: var(--kyro-bg-secondary);
+    border-color: var(--kyro-text-primary);
   }
 
   .kyro-btn-danger {
     background: var(--kyro-surface);
-    color: var(--kyro-text-primary);
-    border-color: var(--kyro-text-primary);
+    color: var(--kyro-danger);
+    border-color: var(--kyro-border);
   }
 
   .kyro-btn-danger:hover:not(:disabled) {
-    background: var(--kyro-gray-900);
-    color: var(--kyro-sidebar-text-active);
+    background: var(--kyro-danger);
+    color: #ffffff;
+    border-color: var(--kyro-danger);
   }
 
   .kyro-btn-ghost {
@@ -428,7 +440,7 @@
   }
 
   .kyro-btn-ghost:hover:not(:disabled) {
-    background: var(--kyro-gray-100);
+    background: var(--kyro-bg-secondary);
     color: var(--kyro-text-primary);
   }