@kyro-cms/admin 0.9.4 → 0.9.5

package/src/components/ui/PageHeader.tsx

@@ -27,6 +27,104 @@ interface PageHeaderProps {
   children?: ReactNode;
 }
 
+function BackButton({ back }: { back: NonNullable<PageHeaderProps["back"]> }) {
+  if (back.href) {
+    return (
+      <a
+        href={back.href}
+        onClick={(e) => {
+          if (back.onClick) {
+            e.preventDefault();
+            back.onClick();
+          }
+        }}
+        className="p-1.5 rounded-lg hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] transition-all"
+      >
+        <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+          <path d="M19 12H5M12 19l-7-7 7-7" />
+        </svg>
+      </a>
+    );
+  }
+  return (
+    <button
+      type="button"
+      onClick={back.onClick}
+      className="p-1.5 rounded-lg hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] transition-all"
+    >
+      <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+        <path d="M19 12H5M12 19l-7-7 7-7" />
+      </svg>
+    </button>
+  );
+}
+
+function DesktopBreadcrumbs({ breadcrumbs }: { breadcrumbs: Breadcrumb[] }) {
+  return breadcrumbs?.map((crumb: Breadcrumb, i: number) => (
+    <React.Fragment key={i}>
+      {i > 0 && <span className="opacity-20 text-[10px]">/</span>}
+      {crumb.href || crumb.onClick ? (
+        <a
+          href={crumb.href}
+          onClick={(e) => {
+            if (crumb.onClick) {
+              e.preventDefault();
+              crumb.onClick();
+            }
+          }}
+          className="text-[10px] font-bold tracking-widest text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] transition-all"
+        >
+          {crumb.label}
+        </a>
+      ) : (
+        <span className="text-[10px] font-bold tracking-widest opacity-40">
+          {crumb.label}
+        </span>
+      )}
+    </React.Fragment>
+  ));
+}
+
+function ActionsSlot({ actions }: { actions: NonNullable<PageHeaderProps["actions"]> }) {
+  if (Array.isArray(actions)) {
+    return (
+      <div className="flex items-center gap-3">
+        {actions.map((act, i) => (
+          <button
+            key={i}
+            type="button"
+            onClick={act.onClick}
+            className={`flex items-center gap-2 px-6 py-2.5 rounded-xl font-bold text-sm transition-all shadow-lg shadow-[var(--kyro-primary)]/10 ${
+              act.variant === "outline"
+                ? "border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
+                : act.variant === "ghost"
+                ? "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] shadow-none"
+                : "kyro-btn-primary hover:opacity-90"
+            } ${act.className || ""}`}
+          >
+            {act.icon && <act.icon className="w-4 h-4" />}
+            {act.label}
+          </button>
+        ))}
+      </div>
+    );
+  }
+  return <>{actions}</>;
+}
+
+function SingleAction({ action }: { action: NonNullable<PageHeaderProps["action"]> }) {
+  return (
+    <button
+      type="button"
+      onClick={action.onClick}
+      className={`kyro-btn kyro-btn-primary flex items-center gap-2 px-6 py-2.5 rounded-xl font-bold text-sm hover:opacity-90 transition-all shadow-lg shadow-[var(--kyro-primary)]/10 w-full lg:w-auto justify-center ${action.className || ""}`}
+    >
+      {action.icon && <action.icon className="w-4 h-4" />}
+      {action.label}
+    </button>
+  );
+}
+
 export function PageHeader({
   title,
   description,
@@ -38,66 +136,75 @@ export function PageHeader({
   actions,
   children,
 }: PageHeaderProps) {
+  const lastBreadcrumb = breadcrumbs?.[breadcrumbs.length - 1];
+
   return (
-    <div className="flex flex-col lg:flex-row lg:items-center surface-tile justify-between gap-6 pt-4 mb-8">
-      <div className="min-w-0 flex-1">
-        {/* Breadcrumbs / Back */}
+    <div className="surface-tile px-3 md:px-6 py-3 md:pt-4 mb-4 md:mb-8">
+      {/* ─── MOBILE ─── */}
+      <div className="md:hidden space-y-2">
         {(breadcrumbs || back) && (
-          <div className="flex items-center gap-2 mb-3">
-            {back && (
-              <a
-                href={back.href}
-                onClick={(e) => {
-                  if (back.onClick) {
-                    e.preventDefault();
-                    back.onClick();
-                  }
-                }}
-                className="p-1.5 rounded-lg hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] transition-all"
-              >
-                <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                  <path d="M19 12H5M12 19l-7-7 7-7" />
+          <div className="flex items-center gap-2">
+            {back && <BackButton back={back} />}
+            <details className="group [&::-webkit-details-marker]:hidden flex-1 min-w-0">
+              <summary className="flex items-center gap-2 cursor-pointer list-none">
+                <span className="flex-1 text-[10px] font-bold tracking-widest text-[var(--kyro-text-secondary)] truncate">
+                  {lastBreadcrumb?.label || ""}
+                </span>
+                <svg className="w-3 h-3 text-[var(--kyro-text-secondary)] opacity-40 group-open:rotate-180 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                  <path d="M6 9l6 6 6-6" />
                 </svg>
-              </a>
-            )}
-            {breadcrumbs?.map((crumb: Breadcrumb, i: number) => (
-              <React.Fragment key={i}>
-                {i > 0 && <span className="opacity-20 text-[10px]">/</span>}
-                {crumb.href || crumb.onClick ? (
-                  <a
-                    href={crumb.href}
-                    onClick={(e) => {
-                      if (crumb.onClick) {
-                        e.preventDefault();
-                        crumb.onClick();
-                      }
-                    }}
-                    className="text-[10px] font-bold  tracking-widest text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] transition-all"
-                  >
-                    {crumb.label}
-                  </a>
-                ) : (
-                  <span className="text-[10px] font-bold  tracking-widest opacity-40">
-                    {crumb.label}
-                  </span>
+              </summary>
+              <div className="mt-2 pt-2 border-t border-[var(--kyro-border)] space-y-2">
+                {breadcrumbs && (
+                  <div className="flex items-center gap-2">
+                    {breadcrumbs.map((crumb: Breadcrumb, i: number) => (
+                      <React.Fragment key={i}>
+                        {i > 0 && <span className="opacity-20 text-[10px]">/</span>}
+                        {crumb.href || crumb.onClick ? (
+                          <a
+                            href={crumb.href}
+                            onClick={(e) => {
+                              if (crumb.onClick) { e.preventDefault(); crumb.onClick(); }
+                            }}
+                            className="text-[10px] font-bold tracking-widest text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] transition-all"
+                          >
+                            {crumb.label}
+                          </a>
+                        ) : (
+                          <span className="text-[10px] font-bold tracking-widest opacity-40">{crumb.label}</span>
+                        )}
+                      </React.Fragment>
+                    ))}
+                  </div>
                 )}
-              </React.Fragment>
-            ))}
+                {metadata && (
+                  <div className="flex items-center gap-2 flex-wrap">
+                    {metadata.map((item, i) => (
+                      <React.Fragment key={i}>{item}</React.Fragment>
+                    ))}
+                  </div>
+                )}
+                {children}
+              </div>
+            </details>
           </div>
         )}
 
-        <div className="flex items-center gap-3">
-          {Icon && <Icon className="w-6 h-6 text-[var(--kyro-primary)]" />}
+        <div className="flex items-center gap-2">
+          {Icon && <Icon className="w-5 h-5 text-[var(--kyro-primary)] shrink-0" />}
           {title && (
-            <h1 className="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)] truncate">
+            <h1 className="text-lg font-bold tracking-tighter text-[var(--kyro-text-primary)] truncate">
               {title}
             </h1>
           )}
+          {metadata && !description && (
+            <span className="h-2 w-2 rounded-full bg-[var(--kyro-primary)] shrink-0" />
+          )}
         </div>
 
         {description && (
-          <div className="flex items-center gap-2 mt-1">
-            <p className="text-[var(--kyro-text-secondary)] font-medium opacity-60 line-clamp-1">
+          <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+            <p className="text-[var(--kyro-text-secondary)] font-medium opacity-60 line-clamp-1 min-w-0 text-xs">
               {description}
             </p>
             {metadata && (
@@ -110,49 +217,64 @@ export function PageHeader({
                 ))}
               </div>
             )}
-            {children}
           </div>
         )}
       </div>
 
-      <div className="flex items-center gap-3">
-        {actions && (
-          Array.isArray(actions) ? (
-            <div className="flex items-center gap-3">
-              {actions.map((act, i) => (
-                <button
-                  key={i}
-                  type="button"
-                  onClick={act.onClick}
-                  className={`flex items-center gap-2 px-6 py-2.5 rounded-xl font-bold text-sm transition-all shadow-lg shadow-[var(--kyro-primary)]/10 ${
-                    act.variant === "outline"
-                      ? "border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
-                      : act.variant === "ghost"
-                      ? "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] shadow-none"
-                      : "kyro-btn-primary hover:opacity-90"
-                  } ${act.className || ""}`}
-                >
-                  {act.icon && <act.icon className="w-4 h-4" />}
-                  {act.label}
-                </button>
-              ))}
+      {/* ─── DESKTOP ─── */}
+      <div className="hidden md:flex md:flex-row md:items-center justify-between gap-6">
+        <div className="min-w-0 flex-1">
+          {(breadcrumbs || back) && (
+            <div className="flex items-center gap-2 mb-3">
+              {back && <BackButton back={back} />}
+              {breadcrumbs && <DesktopBreadcrumbs breadcrumbs={breadcrumbs} />}
             </div>
-          ) : (
-            actions
-          )
-        )}
-        {action && (
-          <button
-            type="button"
-            onClick={action.onClick}
-            className={`kyro-btn kyro-btn-primary flex items-center gap-2 px-6 py-2.5 rounded-xl font-bold text-sm hover:opacity-90 transition-all shadow-lg shadow-[var(--kyro-primary)]/10 ${action.className || ""}`}
-          >
-            {action.icon && <action.icon className="w-4 h-4" />}
-            {action.label}
-          </button>
-        )}
+          )}
+
+          <div className="flex items-center gap-3">
+            {Icon && <Icon className="w-6 h-6 text-[var(--kyro-primary)]" />}
+            {title && (
+              <h1 className="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)] truncate">
+                {title}
+              </h1>
+            )}
+          </div>
+
+          {(description || metadata) && (
+            <div className="flex flex-wrap items-center gap-x-2 gap-y-1 mt-1">
+              {description && (
+                <p className="text-[var(--kyro-text-secondary)] font-medium opacity-60 line-clamp-1 min-w-0">
+                  {description}
+                </p>
+              )}
+              {metadata && (
+                <div className="flex items-center gap-2">
+                  {metadata.map((item: ReactNode, i: number) => (
+                    <React.Fragment key={i}>
+                      {i === 0 && (description || i > 0) && <span className="opacity-20 ml-1">·</span>}
+                      {item}
+                    </React.Fragment>
+                  ))}
+                </div>
+              )}
+              {children}
+            </div>
+          )}
+        </div>
+
+        <div className="flex items-center gap-3 flex-wrap shrink-0">
+          {actions && <ActionsSlot actions={actions} />}
+          {action && <SingleAction action={action} />}
+        </div>
       </div>
+
+      {/* mobile actions */}
+      {(actions || action) && (
+        <div className="md:hidden flex items-center gap-2 mt-3 pt-3 border-t border-[var(--kyro-border)]">
+          {action && <SingleAction action={action} />}
+          {actions && <ActionsSlot actions={actions} />}
+        </div>
+      )}
     </div>
   );
 }
-

package/src/components/ui/Pagination.tsx

@@ -13,7 +13,7 @@ export function Pagination({ page, totalPages, totalDocs, limit, onPageChange, o
   if (totalPages <= 1) return null;
 
   return (
-    <div className="flex items-center justify-between px-4 py-3 border-t border-[var(--kyro-border)]">
+    <div className="flex flex-col sm:flex-row items-center justify-between gap-3 px-4 py-3 border-t border-[var(--kyro-border)]">
       {totalDocs !== undefined && limit ? (
         <span className="text-xs text-[var(--kyro-text-secondary)] font-medium">
           Showing {(page - 1) * limit + 1} to {Math.min(page * limit, totalDocs)} of {totalDocs}
@@ -21,7 +21,7 @@ export function Pagination({ page, totalPages, totalDocs, limit, onPageChange, o
       ) : (
         <span />
       )}
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 flex-wrap justify-center">
         {onLimitChange && (
           <select
             value={limit}

package/src/components/ui/SlidePanel.tsx

@@ -47,10 +47,10 @@ export function SlidePanel({
   }, [open, onClose]);
 
   const widthClasses = {
-    sm: "w-[320px]",
-    md: "w-[400px]",
-    lg: "w-[550px]",
-    xl: "w-[700px]",
+    sm: "w-full sm:w-[320px]",
+    md: "w-full sm:w-[400px]",
+    lg: "w-full sm:w-[550px]",
+    xl: "w-full sm:w-[700px]",
   };
 
   if (!open || !hydrated) return null;

package/src/components/ui/Toast.tsx

@@ -52,7 +52,6 @@ export function Toast({ type, message, onClose }: ToastProps) {
       onMouseEnter={() => setIsPaused(true)}
       onMouseLeave={() => setIsPaused(false)}
     >
-      <div className="kyro-toast-accent" />
       <div className="kyro-toast-icon-container">
         <Icon className="w-4 h-4" />
       </div>
@@ -61,7 +60,7 @@ export function Toast({ type, message, onClose }: ToastProps) {
       </div>
       <button 
         type="button" 
-        className="kyro-toast-close group-hover:opacity-100 opacity-40 transition-opacity" 
+        className="kyro-toast-close" 
         onClick={onClose}
       >
         <X className="w-3.5 h-3.5" />

package/src/layouts/AdminLayout.astro

@@ -177,17 +177,62 @@ if (includeSiteName) {
       })();
     </script>
   </head>
-  <body class="bg-[var(--kyro-bg)] antialiased text-[var(--kyro-text-primary)]">
+  <body class="bg-[var(--kyro-bg)] antialiased text-[var(--kyro-text-primary)] overflow-x-hidden overflow-y-auto">
     <div id="kyro-user-data" data-user=""></div>
-    <div class="flex h-screen p-6 gap-6 overflow-hidden">
+    
+    <!-- Mobile Sidebar Backdrop -->
+    <div id="mobile-sidebar-backdrop" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-40 hidden md:hidden transition-opacity opacity-0 duration-300"></div>
+
+    <div class="flex h-[100dvh] md:h-screen p-0 md:p-6 gap-0 md:gap-6 overflow-hidden w-full relative">
       <Sidebar title={title} />
 
       <!-- Main Content Column -->
-      <main class="flex-1 flex flex-col gap-6 overflow-hidden">
-        <slot />
+      <main class="flex-1 flex flex-col gap-0 md:gap-6 overflow-hidden relative w-full h-full max-w-full">
+        <!-- Mobile Header -->
+        <header class="md:hidden flex items-center justify-between p-4 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)] shrink-0 z-30 shadow-sm">
+          <div class="flex items-center gap-3">
+            <button id="mobile-menu-btn" class="p-2 -ml-2 rounded-lg text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] transition-colors">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
+            </button>
+            <span class="font-bold text-lg">{title}</span>
+          </div>
+        </header>
+
+        <div class="flex-1 overflow-y-auto p-4 md:p-0">
+          <slot />
+        </div>
       </main>
     </div>
 
+    <!-- Mobile Sidebar Logic -->
+    <script is:inline>
+      const menuBtn = document.getElementById("mobile-menu-btn");
+      const closeBtn = document.getElementById("mobile-close-btn");
+      const backdrop = document.getElementById("mobile-sidebar-backdrop");
+      const sidebar = document.getElementById("kyro-sidebar");
+
+      const toggleSidebar = () => {
+        if (!sidebar) return;
+        const isOpen = sidebar.classList.contains("translate-x-0");
+        if (isOpen) {
+          sidebar.classList.remove("translate-x-0");
+          sidebar.classList.add("-translate-x-full");
+          backdrop?.classList.remove("opacity-100");
+          setTimeout(() => backdrop?.classList.add("hidden"), 300);
+        } else {
+          sidebar.classList.remove("-translate-x-full");
+          sidebar.classList.add("translate-x-0");
+          backdrop?.classList.remove("hidden");
+          // small delay to allow display:block to apply before opacity transition
+          setTimeout(() => backdrop?.classList.add("opacity-100"), 10);
+        }
+      };
+
+      menuBtn?.addEventListener("click", toggleSidebar);
+      closeBtn?.addEventListener("click", toggleSidebar);
+      backdrop?.addEventListener("click", toggleSidebar);
+    </script>
+
     <!-- Logout Confirmation Modal -->
     <div
       id="logout-modal"

package/src/lib/useResourceManager.ts

@@ -50,6 +50,7 @@ export function useResourceManager<T extends { id: string }>(
           await apiDelete(`${options.endpoint}/${id}`);
           setItems((prev) => prev.filter((item) => item.id !== id));
           options.onSuccess?.("delete", id);
+          toast.success(`${resourceName} deleted`);
 } catch (e: unknown) {
            const message = e instanceof Error ? e.message : `Failed to delete ${resourceName}`;
            toast.error(message);

package/src/styles/main.css

@@ -1393,14 +1393,14 @@
     color: var(--kyro-text-secondary);
   }
 
-  /* Toast — Colored Flat */
+  /* Toast — Subtle Modern */
   .kyro-toasts-container {
     position: fixed;
     bottom: 16px;
     right: 16px;
     display: flex;
     flex-direction: column;
-    gap: 6px;
+    gap: 8px;
     z-index: 9999;
     pointer-events: none;
   }
@@ -1408,25 +1408,34 @@
   .kyro-toast {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 10px;
     min-width: 240px;
     max-width: 340px;
-    padding: 8px 10px;
-    color: white;
-    border-radius: 8px;
+    padding: 12px 14px;
+    border-radius: 12px;
     box-shadow:
-      0 2px 4px -1px rgba(0, 0, 0, 0.08),
-      0 8px 16px -4px rgba(0, 0, 0, 0.15),
-      0 16px 24px -8px rgba(0, 0, 0, 0.2);
+      0 4px 12px rgba(0, 0, 0, 0.06),
+      0 8px 24px rgba(0, 0, 0, 0.04);
     pointer-events: auto;
     position: relative;
-    transition: box-shadow 0.2s ease;
+    overflow: hidden;
+    border: 1px solid var(--kyro-border);
+    background: var(--kyro-surface);
   }
 
-  .kyro-toast-success { background: #16a34a; }
-  .kyro-toast-error { background: #dc2626; }
-  .kyro-toast-warning { background: #d97706; }
-  .kyro-toast-info { background: #4f46e5; }
+  .kyro-toast::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+  }
+
+  .kyro-toast-success::before { background: var(--kyro-success); }
+  .kyro-toast-error::before { background: var(--kyro-danger); }
+  .kyro-toast-warning::before { background: var(--kyro-warning); }
+  .kyro-toast-info::before { background: #6366f1; }
 
   .kyro-toast-icon-container {
     flex-shrink: 0;
@@ -1435,9 +1444,13 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: rgba(255, 255, 255, 0.85);
   }
 
+  .kyro-toast-success .kyro-toast-icon-container { color: var(--kyro-success); }
+  .kyro-toast-error .kyro-toast-icon-container { color: var(--kyro-danger); }
+  .kyro-toast-warning .kyro-toast-icon-container { color: var(--kyro-warning); }
+  .kyro-toast-info .kyro-toast-icon-container { color: #6366f1; }
+
   .kyro-toast-content {
     flex: 1;
     min-width: 0;
@@ -1447,21 +1460,23 @@
     font-size: 12px;
     font-weight: 500;
     letter-spacing: -0.01em;
-    color: rgba(255, 255, 255, 0.92);
+    color: var(--kyro-text-primary);
     line-height: 1.3;
   }
 
   .kyro-toast-close {
     padding: 3px;
     border-radius: 4px;
-    color: rgba(255, 255, 255, 0.35);
+    color: var(--kyro-text-muted);
     transition: all 0.15s ease;
     flex-shrink: 0;
+    opacity: 0.4;
   }
 
   .kyro-toast-close:hover {
-    background: rgba(255, 255, 255, 0.15);
-    color: white;
+    background: var(--kyro-surface-accent);
+    opacity: 1;
+    color: var(--kyro-text-primary);
   }
 
   /* Spinner — Monochrome */