@kyro-cms/admin 0.1.6 → 0.1.7

package/src/components/index.ts

@@ -2,6 +2,7 @@ export { Admin } from "./Admin";
 export { ListView } from "./ListView";
 export { DetailView } from "./DetailView";
 export { CreateView } from "./CreateView";
+export { Dashboard } from "./Dashboard";
 export { AutoForm } from "./AutoForm";
 export {
   ActionBar,
@@ -19,8 +20,6 @@ export {
   useTheme,
   type ThemeMode,
 } from "./ThemeProvider";
-export * from "./layout/Header";
-export * from "./layout/Sidebar";
 export * from "./ui/Button";
 export * from "./ui/Badge";
 export * from "./ui/Spinner";

package/src/components/layout/Header.tsx

@@ -10,7 +10,7 @@ export function Header({ title, onMenuClick, actions }: HeaderProps) {
   return (
     <header className="kyro-header">
       <div className="kyro-header-left">
-        <button
+        <button type="button"
           className="kyro-header-menu"
           onClick={onMenuClick}
           aria-label="Toggle menu"
@@ -24,7 +24,7 @@ export function Header({ title, onMenuClick, actions }: HeaderProps) {
       <div className="kyro-header-right">
         {actions}
         <div className="kyro-header-user">
-          <button className="kyro-header-user-btn">
+          <button type="button" className="kyro-header-user-btn">
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
               <circle cx="12" cy="8" r="4" />
               <path d="M4 20c0-4 4-6 8-6s8 2 8 6" />

package/src/components/layout/Layout.tsx

@@ -14,10 +14,10 @@ export default function Layout({ children, collections = [], currentSlug }: Layo
         <div id="sidebar-root" className="hidden lg:block">
           {/* Sidebar rendered here */}
         </div>
-        
+
         {/* Main content */}
         <main className="flex-1 min-w-0">
-          {children}
+          {/* {children} */}
         </main>
       </div>
     </div>

package/src/components/ui/Badge.tsx

@@ -1,13 +1,18 @@
-import type { ReactNode } from 'react';
+import type { ReactNode } from "react";
 
 interface BadgeProps {
-  variant?: 'default' | 'success' | 'warning' | 'danger' | 'info';
+  variant?: "default" | "success" | "warning" | "danger" | "info";
+  className?: string;
   children: ReactNode;
 }
 
-export function Badge({ variant = 'default', children }: BadgeProps) {
+export function Badge({
+  variant = "default",
+  className = "",
+  children,
+}: BadgeProps) {
   return (
-    <span className={`kyro-badge kyro-badge-${variant}`}>
+    <span className={`kyro-badge kyro-badge-${variant} ${className}`}>
       {children}
     </span>
   );

package/src/components/ui/BlockDrawer.tsx

@@ -0,0 +1,79 @@
+import React, { type ReactNode } from "react";
+import { useDraggable } from "@dnd-kit/core";
+import { SlidePanel } from "./SlidePanel";
+
+interface BlockDrawerProps {
+  open: boolean;
+  onClose: () => void;
+  onSelect: (blockType: string) => void;
+  children?: ReactNode;
+}
+
+export function BlockDrawer({
+  open,
+  onClose,
+  onSelect,
+  children,
+}: BlockDrawerProps) {
+  if (!open) return null;
+
+  return (
+    <SlidePanel open={open} onClose={onClose} title="Insert Block" width="md">
+      <p className="text-sm text-[var(--kyro-text-muted)] mb-4">
+        Drag blocks into the editor or click to insert
+      </p>
+      {children}
+    </SlidePanel>
+  );
+}
+
+// Draggable wrapper for block types in the drawer
+export function DraggableBlockType({
+  block,
+  onSelect,
+  children,
+}: {
+  block: { type: string; label: string; icon: any; description: string };
+  onSelect: (type: string) => void;
+  children?: ReactNode;
+}) {
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: `drawer-${block.type}`,
+    data: { source: "drawer", blockType: block.type },
+  });
+
+  return (
+    <div
+      ref={setNodeRef}
+      {...listeners}
+      {...attributes}
+      onClick={() => onSelect(block.type)}
+      className={`flex flex-col items-center text-center gap-1 p-2 rounded-md border border-[var(--kyro-border)] hover:border-[var(--kyro-primary)]/60 hover:bg-[var(--kyro-surface-accent)]/30 transition-all cursor-pointer group ${
+        isDragging ? "opacity-50 border-[var(--kyro-primary)]" : ""
+      }`}
+      style={{ opacity: isDragging ? 0.5 : 1 }}
+    >
+      <div className="w-6 h-6 flex items-center justify-center rounded group-hover:bg-[var(--kyro-primary)]/10 group-hover:text-[var(--kyro-primary)] transition-all duration-300">
+        {children || (
+          <span className="text-[var(--kyro-text-muted)]">
+            {/* Default icon */}
+          </span>
+        )}
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="text-xs font-medium uppercase tracking-tight text-[var(--kyro-text-primary)] leading-tight">
+          {block.label}
+        </div>
+        <div className="text-[10px] text-[var(--kyro-text-muted)] mt-0.5 leading-tight">
+          {block.description}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export interface BlockType {
+  type: string;
+  label: string;
+  icon: string;
+}

package/src/components/ui/Button.tsx

@@ -21,7 +21,7 @@ export function Button({
   const sizeClass = `kyro-btn-${size}`;
 
   return (
-    <button
+    <button type="button"
       className={`${baseClass} ${variantClass} ${sizeClass} ${className}`}
       disabled={disabled || loading}
       {...props}

package/src/components/ui/CommandPalette.tsx

@@ -0,0 +1,362 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import {
+  Search,
+  FileText,
+  Image as ImageIcon,
+  Settings,
+  Plus,
+  ArrowRight,
+  Clock,
+  Loader2,
+  File,
+  Moon,
+  Sun,
+  LogOut,
+  Shield,
+  Code,
+  Database,
+  Network,
+  Hexagon,
+} from "lucide-react";
+
+interface SearchResult {
+  collection: string;
+  label: string;
+  id: string;
+  title: string;
+  doc?: any;
+}
+
+interface CommandPaletteProps {
+  isOpen: boolean;
+  onClose: () => void;
+  collections: any;
+  globals: any;
+  onNavigate: (view: any, collection?: string, id?: string) => void;
+}
+
+export function CommandPalette({
+  isOpen,
+  onClose,
+  collections,
+  globals,
+  onNavigate,
+}: CommandPaletteProps) {
+  const [query, setQuery] = useState("");
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const debounceRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      setQuery("");
+      setSelectedIndex(0);
+      setSearchResults([]);
+      setLoading(false);
+      setTimeout(() => inputRef.current?.focus(), 100);
+    }
+  }, [isOpen]);
+
+  const performSearch = useCallback(async (searchQuery: string) => {
+    if (!searchQuery || searchQuery.length < 2) {
+      setSearchResults([]);
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const response = await fetch(
+        `/api/search?q=${encodeURIComponent(searchQuery)}&limit=15`,
+      );
+      const data = await response.json();
+      if (data.results) {
+        setSearchResults(data.results);
+      }
+    } catch (err) {
+      console.error("Search error:", err);
+      setSearchResults([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+
+    if (query.length >= 2) {
+      debounceRef.current = setTimeout(() => performSearch(query), 300);
+    } else {
+      setSearchResults([]);
+    }
+
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+    };
+  }, [query, performSearch]);
+
+  if (!isOpen) return null;
+
+  const collectionItems = Object.entries(collections).map(
+    ([slug, config]: [string, any]) => ({
+      id: `col-${slug}`,
+      label: config.label || slug,
+      type: "collection",
+      slug,
+      icon: FileText,
+    }),
+  );
+
+  const globalItems = Object.entries(globals).map(
+    ([slug, config]: [string, any]) => ({
+      id: `global-${slug}`,
+      label: config.label || slug,
+      type: "global",
+      slug,
+      icon: Settings,
+    }),
+  );
+
+  const isDark =
+    typeof document !== "undefined" &&
+    document.documentElement.classList.contains("dark");
+
+  const actionItems = [
+    {
+      id: "action-media",
+      label: "Media Gallery",
+      type: "action",
+      view: "media",
+      icon: ImageIcon,
+    },
+    {
+      id: "action-users",
+      label: "Team Management",
+      type: "action",
+      view: "users",
+      icon: Clock,
+    },
+    {
+      id: "action-audit",
+      label: "Audit Logs",
+      type: "action",
+      view: "audit",
+      icon: File,
+    },
+    {
+      id: "action-roles",
+      label: "Roles & Permissions",
+      type: "action",
+      view: "roles",
+      icon: Shield,
+    },
+    {
+      id: "action-api",
+      label: "REST API Explorer",
+      type: "action",
+      view: "api-explorer",
+      icon: Database,
+    },
+    {
+      id: "action-graphql",
+      label: "GraphQL Playground",
+      type: "action",
+      view: "graphql",
+      icon: Hexagon,
+    },
+    {
+      id: "action-rest",
+      label: "REST Playground",
+      type: "action",
+      view: "rest",
+      icon: Network,
+    },
+    {
+      id: "action-theme",
+      label: isDark ? "Switch to Light Mode" : "Switch to Dark Mode",
+      type: "action",
+      view: "theme",
+      icon: isDark ? Sun : Moon,
+    },
+    {
+      id: "action-logout",
+      label: "Sign Out",
+      type: "action",
+      view: "logout",
+      icon: LogOut,
+    },
+  ];
+
+  const docResultItems: any[] = searchResults.map((result, idx) => ({
+    id: `doc-${result.collection}-${result.id}`,
+    label: result.title,
+    type: "document",
+    collection: result.collection,
+    label2: result.label,
+    docId: result.id,
+    icon: File,
+    doc: result.doc,
+  }));
+
+  const allItems =
+    query.length >= 2
+      ? [...actionItems, ...collectionItems, ...globalItems, ...docResultItems]
+      : [...actionItems, ...collectionItems, ...globalItems];
+
+  const filteredItems =
+    query === ""
+      ? allItems
+      : allItems.filter((item) =>
+          item.label.toLowerCase().includes(query.toLowerCase()),
+        );
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setSelectedIndex((i) => (i + 1) % filteredItems.length);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setSelectedIndex(
+        (i) => (i - 1 + filteredItems.length) % filteredItems.length,
+      );
+    } else if (e.key === "Enter") {
+      const item = filteredItems[selectedIndex];
+      if (item) handleSelect(item);
+    } else if (e.key === "Escape") {
+      onClose();
+    }
+  };
+
+  const handleSelect = (item: any) => {
+    if (item.type === "collection") {
+      onNavigate("list", item.slug);
+    } else if (item.type === "global") {
+      onNavigate("settings", item.slug);
+    } else if (item.type === "document") {
+      onNavigate("edit", item.collection, item.docId);
+    } else if (item.type === "action") {
+      if (item.view === "users") {
+        onNavigate(item.view, item.view);
+      } else if (item.view === "media") {
+        onNavigate("media", item.view);
+      }
+    }
+    onClose();
+  };
+
+  const getSectionLabel = () => {
+    if (query === "") return "Quick Actions & Collections";
+    if (searchResults.length > 0) return "Documents";
+    if (loading) return "Searching...";
+    return "Search Results";
+  };
+
+  return (
+    <div className="fixed inset-0 z-[1000] flex items-start justify-center pt-[15vh] px-4">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm animate-in fade-in duration-300"
+        onClick={onClose}
+      />
+
+      {/* Palette Body */}
+      <div className="relative w-full max-w-2xl bg-[var(--kyro-surface)] rounded-3xl shadow-2xl overflow-hidden animate-in zoom-in-95 fade-in duration-300 ring-1 ring-white/10 border border-white/5">
+        <div className="flex items-center px-6 py-5 border-b border-[var(--kyro-border)]">
+          {loading ? (
+            <Loader2 className="w-5 h-5 text-[var(--kyro-text-secondary)] opacity-50 mr-4 animate-spin" />
+          ) : (
+            <Search className="w-5 h-5 text-[var(--kyro-text-secondary)] opacity-50 mr-4" />
+          )}
+          <input
+            ref={inputRef}
+            placeholder="Search anything..."
+            className="flex-1 bg-transparent border-none focus:outline-none text-lg font-medium text-[var(--kyro-text-primary)] placeholder:text-[var(--kyro-text-muted)]"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={handleKeyDown}
+          />
+          <div className="flex items-center gap-2 px-2 py-1 bg-[var(--kyro-bg-secondary)] rounded-lg border border-[var(--kyro-border)]">
+            <span className="text-[10px] font-black opacity-40 uppercase tracking-widest">
+              ESC
+            </span>
+          </div>
+        </div>
+
+        <div className="max-h-[400px] overflow-y-auto py-4">
+          {filteredItems.length > 0 ? (
+            <div className="space-y-1 px-4">
+              <p className="px-4 text-[10px] font-black uppercase tracking-[0.2em] opacity-40 mb-4">
+                {getSectionLabel()}
+              </p>
+              {filteredItems.map((item, index) => (
+                <div
+                  key={item.id}
+                  onClick={() => handleSelect(item)}
+                  onMouseEnter={() => setSelectedIndex(index)}
+                  className={`flex items-center justify-between px-4 py-4 rounded-2xl cursor-pointer transition-all ${
+                    index === selectedIndex
+                      ? "bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)] shadow-xl shadow-[var(--kyro-primary)]"
+                      : "hover:bg-[var(--kyro-bg-secondary)] text-[var(--kyro-text-secondary)]"
+                  }`}
+                >
+                  <div className="flex items-center gap-4">
+                    <div
+                      className={`p-2 rounded-xl ${index === selectedIndex ? "bg-white/20" : "bg-[var(--kyro-bg-secondary)] border border-[var(--kyro-border)]"}`}
+                    >
+                      <item.icon className="w-4 h-4" />
+                    </div>
+                    <div className="flex flex-col">
+                      <span className="font-bold text-sm">{item.label}</span>
+                      {item.type === "document" && item.label2 && (
+                        <span
+                          className={`text-[10px] font-black uppercase tracking-widest ${index === selectedIndex ? "text-[var(--kyro-sidebar-text-active)]/60" : "opacity-40"}`}
+                        >
+                          {item.label2}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span
+                      className={`text-[10px] font-black uppercase tracking-widest opacity-40 ${index === selectedIndex ? "text-[var(--kyro-sidebar-text-active)] p-1" : ""}`}
+                    >
+                      {item.type}
+                    </span>
+                    {index === selectedIndex && (
+                      <ArrowRight className="w-4 h-4 mr-2" />
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="py-12 text-center">
+              <p className="text-[var(--kyro-text-secondary)] italic opacity-60">
+                {query.length >= 2 && !loading
+                  ? `No results found for "${query}"`
+                  : "Start typing to search..."}
+              </p>
+            </div>
+          )}
+        </div>
+
+        <div className="px-8 py-4 bg-[var(--kyro-bg-secondary)] border-t border-[var(--kyro-border)] flex items-center justify-between text-[10px] font-black uppercase tracking-widest text-[var(--kyro-text-secondary)] opacity-60">
+          <div className="flex gap-6">
+            <span className="flex items-center gap-2 underline underline-offset-4 decoration-2 decoration-[var(--kyro-primary)]">
+              ↑↓ Navigate
+            </span>
+            <span className="flex items-center gap-2 underline underline-offset-4 decoration-2 decoration-[var(--kyro-primary)]">
+              ⏎ Select
+            </span>
+          </div>
+          <div>Kyro Universal Search</div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/CommandPaletteWrapper.tsx

@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from "react";
+import { CommandPalette } from "./CommandPalette";
+import { ConfirmModal } from "./Modal";
+
+interface Props {
+  collections: any;
+  globals: any;
+}
+
+export function CommandPaletteWrapper({ collections, globals }: Props) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [showLogoutConfirm, setShowLogoutConfirm] = useState(false);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        setIsOpen((prev) => !prev);
+      }
+    };
+
+    (window as any).openCommandPalette = () => setIsOpen(true);
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      delete (window as any).openCommandPalette;
+    };
+  }, []);
+
+  const handleClose = () => setIsOpen(false);
+
+  const handleLogoutConfirm = () => {
+    localStorage.removeItem("kyro_token");
+    localStorage.removeItem("kyro_user");
+    window.location.href = "/login";
+  };
+
+  const handleNavigate = (view: string, collection?: string, id?: string) => {
+    if (view === "list" && collection) {
+      window.location.href = `/${collection}`;
+    } else if (view === "edit" && collection && id) {
+      window.location.href = `/${collection}/${id}`;
+    } else if (view === "create" && collection) {
+      window.location.href = `/${collection}/new`;
+    } else if (view === "settings" && collection) {
+      window.location.href = `/settings/${collection}`;
+    } else if (view === "media") {
+      window.location.href = `/media`;
+    } else if (view === "users") {
+      window.location.href = `/users`;
+    } else if (view === "audit") {
+      window.location.href = `/audit`;
+    } else if (view === "roles") {
+      window.location.href = `/roles`;
+    } else if (view === "api-explorer") {
+      window.location.href = `/admin/api-explorer`;
+    } else if (view === "graphql") {
+      window.location.href = `/admin/graphql`;
+    } else if (view === "rest") {
+      window.location.href = `/admin/rest-playground`;
+    } else if (view === "theme") {
+      const isDark = document.documentElement.classList.contains("dark");
+      if (isDark) {
+        document.documentElement.classList.remove("dark");
+        localStorage.setItem("theme", "light");
+      } else {
+        document.documentElement.classList.add("dark");
+        localStorage.setItem("theme", "dark");
+      }
+    } else if (view === "logout") {
+      setShowLogoutConfirm(true);
+    }
+  };
+
+  return (
+    <>
+      <CommandPalette
+        isOpen={isOpen}
+        onClose={handleClose}
+        collections={collections}
+        globals={globals}
+        onNavigate={handleNavigate}
+      />
+      <ConfirmModal
+        open={showLogoutConfirm}
+        onClose={() => setShowLogoutConfirm(false)}
+        onConfirm={handleLogoutConfirm}
+        title="Sign Out"
+        message="Are you sure you want to sign out?"
+        confirmLabel="Sign Out"
+        variant="danger"
+      />
+    </>
+  );
+}

package/src/components/ui/Dropdown.tsx

@@ -62,7 +62,7 @@ export function DropdownItem({
   disabled,
 }: DropdownItemProps) {
   return (
-    <button
+    <button type="button"
       onClick={onClick}
       disabled={disabled}
       className={`w-full flex items-center gap-3 px-3 py-2 text-sm text-left transition-colors ${