@kyro-cms/admin 0.1.6 → 0.1.8

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 ${

package/src/components/ui/Modal.tsx

@@ -1,4 +1,15 @@
 import React, { useEffect, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+
+export function ModalContent({ children }: { children: ReactNode }) {
+  return <div className="text-[var(--kyro-text-secondary)]">{children}</div>;
+}
+
+export function ModalActions({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex items-center justify-end gap-3 mt-6">{children}</div>
+  );
+}
 
 interface ModalProps {
   open: boolean;
@@ -7,6 +18,7 @@ interface ModalProps {
   children: ReactNode;
   footer?: ReactNode;
   size?: "sm" | "md" | "lg";
+  variant?: "default" | "danger";
 }
 
 export function Modal({
@@ -16,6 +28,7 @@ export function Modal({
   children,
   footer,
   size = "md",
+  variant = "default",
 }: ModalProps) {
   useEffect(() => {
     const handleEscape = (e: KeyboardEvent) => {
@@ -41,20 +54,27 @@ export function Modal({
     lg: "max-w-2xl",
   };
 
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
+  return createPortal(
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center">
       <div
         className="absolute inset-0 bg-black/50 backdrop-blur-sm"
         onClick={onClose}
       />
       <div
-        className={`relative w-full ${sizeClasses[size]} mx-4 bg-white rounded-xl shadow-2xl animate-in fade-in zoom-in-95 duration-200`}
+        className={`relative w-full ${sizeClasses[size]} mx-4 bg-[var(--kyro-surface)] rounded-lg shadow-2xl animate-in fade-in zoom-in-95 duration-200 border ${
+          variant === "danger"
+            ? "border-red-500/20"
+            : "border-[var(--kyro-border)]"
+        }`}
       >
-        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
-          <h2 className="text-lg font-semibold text-gray-900">{title}</h2>
+        <div className="flex items-center justify-between px-6 py-4 border-b border-[var(--kyro-border)]">
+          <h2 className="text-lg font-semibold text-[var(--kyro-text-primary)]">
+            {title}
+          </h2>
           <button
+            type="button"
             onClick={onClose}
-            className="p-1 text-gray-400 hover:text-gray-600 rounded-lg hover:bg-gray-100 transition-colors"
+            className="p-1 text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] rounded-lg hover:bg-[var(--kyro-surface-accent)] transition-colors"
           >
             <svg
               width="20"
@@ -70,12 +90,13 @@ export function Modal({
         </div>
         <div className="px-6 py-4">{children}</div>
         {footer && (
-          <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-200 bg-gray-50 rounded-b-xl">
+          <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] rounded-b-lg">
             {footer}
           </div>
         )}
       </div>
-    </div>
+    </div>,
+    document.body,
   );
 }
 
@@ -111,17 +132,21 @@ export function ConfirmModal({
       footer={
         <>
           <button
+            type="button"
             onClick={onClose}
             disabled={loading}
-            className="kyro-btn kyro-btn-secondary kyro-btn-md"
+            className="px-4 py-2 rounded-lg font-medium text-sm border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)] transition-colors"
           >
             {cancelLabel}
           </button>
           <button
+            type="button"
             onClick={onConfirm}
             disabled={loading}
-            className={`kyro-btn kyro-btn-md ${
-              variant === "danger" ? "kyro-btn-danger" : "kyro-btn-primary"
+            className={`px-4 py-2 rounded-lg font-medium text-sm transition-colors ${
+              variant === "danger"
+                ? "bg-red-500 text-white hover:bg-red-600"
+                : "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] hover:opacity-90"
             }`}
           >
             {loading ? "Loading..." : confirmLabel}
@@ -129,7 +154,7 @@ export function ConfirmModal({
         </>
       }
     >
-      <p className="text-gray-600">{message}</p>
+      <p className="text-[var(--kyro-text-secondary)]">{message}</p>
     </Modal>
   );
 }