@kyro-cms/admin 0.9.4 → 0.9.6

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/layouts/AdminLayout.astro

@@ -177,17 +177,64 @@ 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");
+        const fab = document.getElementById("kyro-fab");
+        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);
+          fab?.classList.remove("fab-hidden");
+        } else {
+          sidebar.classList.remove("-translate-x-full");
+          sidebar.classList.add("translate-x-0");
+          backdrop?.classList.remove("hidden");
+          setTimeout(() => backdrop?.classList.add("opacity-100"), 10);
+          fab?.classList.add("fab-hidden");
+        }
+      };
+
+      menuBtn?.addEventListener("click", toggleSidebar);
+      closeBtn?.addEventListener("click", toggleSidebar);
+      backdrop?.addEventListener("click", toggleSidebar);
+    </script>
+
     <!-- Logout Confirmation Modal -->
     <div
       id="logout-modal"
@@ -246,6 +293,19 @@ if (includeSiteName) {
     <!-- Toast Notifications (React) -->
     <Toaster client:only="react" />
 
+    <!-- Floating Command Palette Trigger -->
+    <button
+      id="kyro-fab"
+      type="button"
+      onclick="window.openCommandPalette?.()"
+      class="fixed bottom-6 right-6 z-50 w-12 h-12 flex md:hidden items-center justify-center rounded-2xl bg-[var(--kyro-primary)] text-white shadow-lg shadow-[var(--kyro-primary)]/30 hover:shadow-xl hover:shadow-[var(--kyro-primary)]/40 hover:scale-110 active:scale-95 transition-all duration-200"
+      title="Open command palette (Cmd+K)"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
+      </svg>
+    </button>
+
     <!-- Theme UI Logic -->
     <script is:inline define:vars={{ adminPath, apiPath }}>
       const lightBtn = document.getElementById("theme-light-btn");

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/pages/graphql-explorer.astro

@@ -1,59 +1,15 @@
 ---
 import AdminLayout from "../layouts/AdminLayout.astro";
 import { GraphQLPlayground } from "../components/GraphQLPlayground";
-
-import { adminPath, apiPath } from "../lib/paths";
+import { apiPath } from "../lib/paths";
 ---
 
 <AdminLayout title="GraphQL Explorer">
-  <div class="flex-1 overflow-hidden">
-    <!-- Header -->
-    <div class="mb-6 surface-tile">
-      <div class="flex items-center justify-between mb-4">
-        <div>
-          <h1
-            class="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]"
-          >
-            GraphQL Explorer
-          </h1>
-          <p
-            class="text-[var(--kyro-text-secondary)] font-bold mt-2 text-sm tracking-wider"
-          >
-            Schema documentation and type explorer
-          </p>
-        </div>
-        <div class="flex items-center gap-4">
-          <a
-            href={`${adminPath}/graphql`}
-            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="M13 10V3L4 14h7v7l9-11h-7z"></path>
-            </svg>
-            Playground
-          </a>
-        </div>
-      </div>
-    </div>
-
-    <!-- Explorer Container -->
-    <div class="h-[calc(100vh-200px)] surface-tile overflow-hidden">
-      <div class="surface-tile h-full overflow-hidden">
-        <GraphQLPlayground
-          client:load
-          endpoint={`${apiPath}/graphql`}
-          initialShowDocs={true}
-        />
-      </div>
-    </div>
+  <div class="flex-1 overflow-hidden h-[calc(100vh-64px)] md:h-[calc(100vh-80px)]">
+    <GraphQLPlayground
+      client:load
+      endpoint={`${apiPath}/graphql`}
+      initialShowDocs={true}
+    />
   </div>
 </AdminLayout>