@kyro-cms/admin 0.3.2 → 0.3.4

package/src/components/ui/CommandPalette.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
-import { apiGet } from "../../lib/api";
+import { apiGet, resolveApi } from "../../lib/api";
 import {
   Search,
   FileText,
@@ -16,24 +16,25 @@ import {
   Shield,
   Code,
   Database,
-  Network,
+  Network as NetworkIcon,
   Hexagon,
-} from "lucide-react";
+} from "./icons";
+import { useAuthStore } from "../../lib/stores";
 
 interface SearchResult {
   collection: string;
   label: string;
   id: string;
   title: string;
-  doc?: any;
+  doc?: Record<string, unknown>;
 }
 
 interface CommandPaletteProps {
   isOpen: boolean;
   onClose: () => void;
-  collections: any;
-  globals: any;
-  onNavigate: (view: any, collection?: string, id?: string) => void;
+  collections: Record<string, unknown>;
+  globals: Record<string, unknown>;
+  onNavigate: (view: string, collection?: string, id?: string) => void;
 }
 
 export function CommandPalette({
@@ -43,6 +44,7 @@ export function CommandPalette({
   globals,
   onNavigate,
 }: CommandPaletteProps) {
+  const { user, permissions } = useAuthStore();
   const [query, setQuery] = useState("");
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [loading, setLoading] = useState(false);
@@ -69,7 +71,7 @@ export function CommandPalette({
     setLoading(true);
     try {
       const response = await fetch(
-        `/api/search?q=${encodeURIComponent(searchQuery)}&limit=15`,
+        resolveApi(`/api/search?q=${encodeURIComponent(searchQuery)}&limit=15`),
       );
       const data = await response.json();
       if (data.results) {
@@ -103,30 +105,32 @@ export function CommandPalette({
 
   if (!isOpen) return null;
 
-  const collectionItems = Object.entries(collections).map(
-    ([slug, config]: [string, any]) => ({
+  const collectionItems = Object.entries(collections)
+    .filter(([slug]) => permissions?.collections?.[slug]?.read !== false)
+    .map(([slug, config]: [string, Record<string, unknown>]) => ({
       id: `col-${slug}`,
       label: config.label || slug,
       type: "collection",
       slug,
       icon: FileText,
-    }),
-  );
+    }));
 
-  const globalItems = Object.entries(globals).map(
-    ([slug, config]: [string, any]) => ({
+  const globalItems = Object.entries(globals)
+    .filter(([slug]) => permissions?.globals?.[slug]?.read !== false)
+    .map(([slug, config]: [string, Record<string, unknown>]) => ({
       id: `global-${slug}`,
       label: config.label || slug,
       type: "global",
       slug,
       icon: Settings,
-    }),
-  );
+    }));
 
   const isDark =
     typeof document !== "undefined" &&
     document.documentElement.classList.contains("dark");
 
+  const isAdmin = user?.role === "admin";
+
   const actionItems = [
     {
       id: "action-media",
@@ -134,6 +138,7 @@ export function CommandPalette({
       type: "action",
       view: "media",
       icon: ImageIcon,
+      visible: permissions?.collections?.media?.read !== false,
     },
     {
       id: "action-users",
@@ -141,6 +146,7 @@ export function CommandPalette({
       type: "action",
       view: "users",
       icon: Clock,
+      visible: isAdmin,
     },
     {
       id: "action-audit",
@@ -148,6 +154,7 @@ export function CommandPalette({
       type: "action",
       view: "audit",
       icon: File,
+      visible: isAdmin,
     },
     {
       id: "action-roles",
@@ -155,6 +162,7 @@ export function CommandPalette({
       type: "action",
       view: "roles",
       icon: Shield,
+      visible: isAdmin,
     },
     {
       id: "action-api",
@@ -162,6 +170,7 @@ export function CommandPalette({
       type: "action",
       view: "api-explorer",
       icon: Database,
+      visible: isAdmin,
     },
     {
       id: "action-graphql",
@@ -169,13 +178,15 @@ export function CommandPalette({
       type: "action",
       view: "graphql",
       icon: Hexagon,
+      visible: isAdmin,
     },
     {
       id: "action-rest",
       label: "REST Playground",
       type: "action",
       view: "rest",
-      icon: Network,
+      icon: NetworkIcon,
+      visible: isAdmin,
     },
     {
       id: "action-theme",
@@ -183,6 +194,7 @@ export function CommandPalette({
       type: "action",
       view: "theme",
       icon: isDark ? Sun : Moon,
+      visible: true,
     },
     {
       id: "action-logout",
@@ -190,10 +202,11 @@ export function CommandPalette({
       type: "action",
       view: "logout",
       icon: LogOut,
+      visible: true,
     },
-  ];
+  ].filter((a) => a.visible);
 
-  const docResultItems: any[] = searchResults.map((result, idx) => ({
+  const docResultItems: { id: string; label: string; type: string; collection: string; label2?: string; docId: string; icon: typeof File; doc?: Record<string, unknown> }[] = searchResults.map((result, idx) => ({
     id: `doc-${result.collection}-${result.id}`,
     label: result.title,
     type: "document",
@@ -213,8 +226,8 @@ export function CommandPalette({
     query === ""
       ? allItems
       : allItems.filter((item) =>
-          item.label.toLowerCase().includes(query.toLowerCase()),
-        );
+        item.label.toLowerCase().includes(query.toLowerCase()),
+      );
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === "ArrowDown") {
@@ -233,18 +246,28 @@ export function CommandPalette({
     }
   };
 
-  const handleSelect = (item: any) => {
+  const handleSelect = (item: { type: string; slug?: string; view?: string; collection?: string; docId?: string }) => {
     if (item.type === "collection") {
-      onNavigate("list", item.slug);
+      if (item.slug === "users") {
+        onNavigate(item.slug, item.slug);
+      } else {
+        onNavigate("list", item.slug);
+      }
     } else if (item.type === "global") {
       onNavigate("settings", item.slug);
     } else if (item.type === "document") {
-      onNavigate("edit", item.collection, item.docId);
+      if (item.collection === "users") {
+        onNavigate("users", "users", item.docId);
+      } else {
+        onNavigate("edit", item.collection, item.docId);
+      }
     } else if (item.type === "action") {
       if (item.view === "users") {
-        onNavigate(item.view, item.view);
+        onNavigate("users", "users");
       } else if (item.view === "media") {
-        onNavigate("media", item.view);
+        onNavigate("media", "media");
+      } else {
+        onNavigate(item.view, item.view);
       }
     }
     onClose();
@@ -282,7 +305,7 @@ export function CommandPalette({
             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">
+            <span className="text-[10px] font-bold opacity-40  tracking-widest">
               ESC
             </span>
           </div>
@@ -291,7 +314,7 @@ export function CommandPalette({
         <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">
+              <p className="px-4 text-[10px] font-bold  tracking-[0.2em] opacity-40 mb-4">
                 {getSectionLabel()}
               </p>
               {filteredItems.map((item, index) => (
@@ -299,11 +322,10 @@ export function CommandPalette({
                   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)]"
-                  }`}
+                  className={`flex items-center justify-between px-4 py-4 rounded-2xl cursor-pointer ${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
@@ -315,7 +337,7 @@ export function CommandPalette({
                       <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"}`}
+                          className={`text-[10px] font-bold  tracking-widest ${index === selectedIndex ? "text-[var(--kyro-sidebar-text-active)]/60" : "opacity-40"}`}
                         >
                           {item.label2}
                         </span>
@@ -324,7 +346,7 @@ export function CommandPalette({
                   </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" : ""}`}
+                      className={`text-[10px] font-bold  tracking-widest opacity-40 ${index === selectedIndex ? "text-[var(--kyro-sidebar-text-active)] p-1" : ""}`}
                     >
                       {item.type}
                     </span>
@@ -346,7 +368,7 @@ export function CommandPalette({
           )}
         </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="px-8 py-4 bg-[var(--kyro-bg-secondary)] border-t border-[var(--kyro-border)] flex items-center justify-between text-[10px] font-bold  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

package/src/components/ui/CommandPaletteWrapper.tsx

@@ -1,10 +1,11 @@
 import React, { useState, useEffect } from "react";
 import { CommandPalette } from "./CommandPalette";
 import { ConfirmModal } from "./Modal";
+import { adminPath } from "../../lib/paths";
 
 interface Props {
-  collections: any;
-  globals: any;
+  collections: Record<string, unknown>;
+  globals: Record<string, unknown>;
 }
 
 export function CommandPaletteWrapper({ collections, globals }: Props) {
@@ -19,47 +20,47 @@ export function CommandPaletteWrapper({ collections, globals }: Props) {
       }
     };
 
-    (window as any).openCommandPalette = () => setIsOpen(true);
+    (window as { openCommandPalette?: () => void }).openCommandPalette = () => setIsOpen(true);
 
     window.addEventListener("keydown", handleKeyDown);
 
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
-      delete (window as any).openCommandPalette;
+      delete (window as { openCommandPalette?: () => void }).openCommandPalette;
     };
   }, []);
 
   const handleClose = () => setIsOpen(false);
 
   const handleLogoutConfirm = () => {
-    localStorage.removeItem("kyro_token");
-    localStorage.removeItem("kyro_user");
+    // Clear in-memory auth (not localStorage)
+    (window as { __kyroAuth?: { user: unknown; verified: boolean } }).__kyroAuth = { user: null, verified: false };
     window.location.href = "/login";
   };
 
   const handleNavigate = (view: string, collection?: string, id?: string) => {
     if (view === "list" && collection) {
-      window.location.href = `/${collection}`;
+      window.location.href = `${adminPath}/${collection}`;
     } else if (view === "edit" && collection && id) {
-      window.location.href = `/${collection}/${id}`;
+      window.location.href = `${adminPath}/${collection}/${id}`;
     } else if (view === "create" && collection) {
-      window.location.href = `/${collection}/new`;
+      window.location.href = `${adminPath}/${collection}/new`;
     } else if (view === "settings" && collection) {
-      window.location.href = `/settings/${collection}`;
+      window.location.href = `${adminPath}/settings/${collection}`;
     } else if (view === "media") {
-      window.location.href = `/media`;
+      window.location.href = `${adminPath}/media`;
     } else if (view === "users") {
-      window.location.href = `/users`;
+      window.location.href = `${adminPath}/users`;
     } else if (view === "audit") {
-      window.location.href = `/audit`;
+      window.location.href = `${adminPath}/audit`;
     } else if (view === "roles") {
-      window.location.href = `/roles`;
+      window.location.href = `${adminPath}/roles`;
     } else if (view === "api-explorer") {
-      window.location.href = `/admin/api-explorer`;
+      window.location.href = `${adminPath}/api-explorer`;
     } else if (view === "graphql") {
-      window.location.href = `/admin/graphql`;
+      window.location.href = `${adminPath}/graphql`;
     } else if (view === "rest") {
-      window.location.href = `/admin/rest-playground`;
+      window.location.href = `${adminPath}/rest-playground`;
     } else if (view === "theme") {
       const isDark = document.documentElement.classList.contains("dark");
       if (isDark) {

package/src/components/ui/Dropdown.tsx

@@ -34,9 +34,8 @@ export function Dropdown({
       </div>
       {open && (
         <div
-          className={`absolute z-50 mt-2 min-w-[180px] py-1 bg-white rounded-lg shadow-lg border border-gray-200 ${
-            align === "right" ? "right-0" : "left-0"
-          }`}
+          className={`absolute z-[100] mt-2 min-w-[200px] py-2 bg-[var(--kyro-surface)] rounded-2xl shadow-2xl border border-[var(--kyro-border)] animate-in fade-in zoom-in-95 duration-100 ${align === "right" ? "right-0 bottom-full mb-2" : "left-0 bottom-full mb-2"
+            }`}
           onClick={() => setOpen(false)}
         >
           {children}
@@ -52,6 +51,7 @@ interface DropdownItemProps {
   icon?: ReactNode;
   danger?: boolean;
   disabled?: boolean;
+  className?: string;
 }
 
 export function DropdownItem({
@@ -60,23 +60,25 @@ export function DropdownItem({
   icon,
   danger,
   disabled,
+  className = "",
 }: DropdownItemProps) {
   return (
-    <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 ${
-        danger
-          ? "text-red-600 hover:bg-red-50"
-          : "text-gray-700 hover:bg-gray-50"
-      } ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
-    >
-      {icon && <span className="w-4 h-4">{icon}</span>}
-      {children}
-    </button>
+    <div className="px-1.5">
+      <button type="button"
+        onClick={onClick}
+        disabled={disabled}
+        className={`w-full flex items-center gap-3 px-3 py-2.5 text-[11px] font-medium tracking-wide text-left transition-all rounded-xl ${danger
+          ? "text-red-500 hover:bg-red-500/10"
+          : "text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"
+          } ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${className}`}
+      >
+        {icon && <span className="w-4 h-4 opacity-70">{icon}</span>}
+        <span className="flex-1">{children}</span>
+      </button>
+    </div>
   );
 }
 
 export function DropdownSeparator() {
-  return <div className="my-1 border-t border-gray-100" />;
+  return <div className="my-1 border-t border-[var(--kyro-border)] opacity-50" />;
 }

package/src/components/ui/EmptyState.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+
+interface EmptyStateProps {
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+  action?: ReactNode;
+}
+
+export function EmptyState({ icon, title, description, action }: EmptyStateProps) {
+  return (
+    <div className="flex flex-col items-center gap-3 justify-center py-16 px-8">
+      {icon && (
+        <div className="w-16 h-16 rounded-2xl bg-[var(--kyro-surface-accent)] flex items-center justify-center mb-4">
+          {icon}
+        </div>
+      )}
+      <p className="font-medium text-[var(--kyro-text-primary)] text-base">{title}</p>
+      {description && (
+        <p className="text-sm text-[var(--kyro-text-secondary)] mt-1">{description}</p>
+      )}
+      {action}
+    </div>
+  );
+}

package/src/components/ui/GlobalModal.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import { useUIStore } from "../../lib/stores";
+import { ConfirmModal } from "./Modal";
+
+export function GlobalModal() {
+  const { modal, closeModal } = useUIStore();
+  const [loading, setLoading] = useState(false);
+
+  if (!modal.open || !modal.config) return null;
+
+  const { config } = modal;
+
+  const handleConfirm = async () => {
+    if (config.onConfirm) {
+      try {
+        setLoading(true);
+        await config.onConfirm();
+      } catch (error) {
+        console.error("Modal confirm action failed:", error);
+      } finally {
+        setLoading(false);
+        closeModal();
+      }
+    } else {
+      closeModal();
+    }
+  };
+
+  const handleClose = () => {
+    if (config.onCancel) {
+      config.onCancel();
+    }
+    closeModal();
+  };
+
+  return (
+    <ConfirmModal
+      open={modal.open}
+      onClose={handleClose}
+      onConfirm={handleConfirm}
+      title={config.title}
+      message={config.message}
+      confirmLabel={config.confirmLabel}
+      cancelLabel={config.cancelLabel}
+      variant={config.variant === "danger" ? "danger" : "default"}
+      loading={loading}
+    />
+  );
+}

package/src/components/ui/IconButton.tsx

@@ -0,0 +1,44 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import type { ButtonVariant, ButtonSize } from './Button';
+
+export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  icon: ReactNode;
+  size?: ButtonSize;
+  variant?: ButtonVariant;
+  label: string;
+  active?: boolean;
+}
+
+export function IconButton({
+  icon,
+  size = 'md',
+  variant = 'ghost',
+  label,
+  active = false,
+  className = '',
+  disabled,
+  ...props
+}: IconButtonProps) {
+  const classes = [
+    'kyro-btn',
+    `kyro-btn-${variant}`,
+    `kyro-btn-${size}`,
+    'kyro-btn-icon',
+    active ? 'kyro-btn-active' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <button type="button"
+      className={classes}
+      aria-label={label}
+      title={label}
+      disabled={disabled}
+      {...props}
+    >
+      {icon}
+    </button>
+  );
+}

package/src/components/ui/Modal.tsx

@@ -51,30 +51,29 @@ export function Modal({
   const sizeClasses = {
     sm: "max-w-sm",
     md: "max-w-md",
-    lg: "max-w-2xl",
+    lg: "max-w-lg",
   };
 
   return createPortal(
-    <div className="fixed inset-0 z-[9999] flex items-center justify-center">
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4">
       <div
-        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+        className="absolute inset-0 bg-[var(--kyro-black)]/40 backdrop-blur-md transition-all duration-500"
         onClick={onClose}
       />
       <div
-        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)]"
-        }`}
+        className={`relative w-full ${sizeClasses[size]} bg-[var(--kyro-surface)] rounded-[var(--kyro-radius-lg)] shadow-2xl animate-in fade-in zoom-in-95 duration-300 border ${variant === "danger"
+          ? "border-red-500/30"
+          : "border-[var(--kyro-border)]"
+          } overflow-hidden`}
       >
-        <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)]">
+        <div className="flex items-center justify-between px-8 py-6 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)]/50 backdrop-blur-md">
+          <h2 className="text-xl font-bold text-[var(--kyro-text-primary)]">
             {title}
           </h2>
           <button
             type="button"
             onClick={onClose}
-            className="p-1 text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] rounded-lg hover:bg-[var(--kyro-surface-accent)] transition-colors"
+            className="p-2 text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] rounded-xl hover:bg-[var(--kyro-surface)] transition-all duration-200"
           >
             <svg
               width="20"
@@ -82,15 +81,15 @@ export function Modal({
               viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"
-              strokeWidth="2"
+              strokeWidth="2.5"
             >
               <path d="M18 6L6 18M6 6l12 12" />
             </svg>
           </button>
         </div>
-        <div className="px-6 py-4">{children}</div>
+        <div className="px-8 py-8">{children}</div>
         {footer && (
-          <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">
+          <div className="flex items-center justify-end gap-3 px-8 py-6 border-t border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)]/50">
             {footer}
           </div>
         )}
@@ -98,6 +97,7 @@ export function Modal({
     </div>,
     document.body,
   );
+
 }
 
 interface ConfirmModalProps {
@@ -135,7 +135,7 @@ export function ConfirmModal({
             type="button"
             onClick={onClose}
             disabled={loading}
-            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"
+            className="kyro-btn kyro-btn-md kyro-btn-secondary"
           >
             {cancelLabel}
           </button>
@@ -143,11 +143,10 @@ export function ConfirmModal({
             type="button"
             onClick={onConfirm}
             disabled={loading}
-            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"
-            }`}
+            className={`kyro-btn kyro-btn-md ${variant === "danger"
+              ? "kyro-btn-danger"
+              : "kyro-btn-primary"
+              }`}
           >
             {loading ? "Loading..." : confirmLabel}
           </button>