@kyro-cms/admin 0.1.2

package/src/components/ui/Modal.tsx

@@ -0,0 +1,135 @@
+import React, { useEffect, type ReactNode } from "react";
+
+interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  children: ReactNode;
+  footer?: ReactNode;
+  size?: "sm" | "md" | "lg";
+}
+
+export function Modal({
+  open,
+  onClose,
+  title,
+  children,
+  footer,
+  size = "md",
+}: ModalProps) {
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+
+    if (open) {
+      document.addEventListener("keydown", handleEscape);
+      document.body.style.overflow = "hidden";
+    }
+
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "";
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  const sizeClasses = {
+    sm: "max-w-sm",
+    md: "max-w-md",
+    lg: "max-w-2xl",
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 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`}
+      >
+        <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>
+          <button
+            onClick={onClose}
+            className="p-1 text-gray-400 hover:text-gray-600 rounded-lg hover:bg-gray-100 transition-colors"
+          >
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+            >
+              <path d="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </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">
+            {footer}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface ConfirmModalProps {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  variant?: "default" | "danger";
+  loading?: boolean;
+}
+
+export function ConfirmModal({
+  open,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  variant = "default",
+  loading = false,
+}: ConfirmModalProps) {
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={title}
+      size="sm"
+      footer={
+        <>
+          <button
+            onClick={onClose}
+            disabled={loading}
+            className="kyro-btn kyro-btn-secondary kyro-btn-md"
+          >
+            {cancelLabel}
+          </button>
+          <button
+            onClick={onConfirm}
+            disabled={loading}
+            className={`kyro-btn kyro-btn-md ${
+              variant === "danger" ? "kyro-btn-danger" : "kyro-btn-primary"
+            }`}
+          >
+            {loading ? "Loading..." : confirmLabel}
+          </button>
+        </>
+      }
+    >
+      <p className="text-gray-600">{message}</p>
+    </Modal>
+  );
+}

package/src/components/ui/SlidePanel.tsx

@@ -0,0 +1,73 @@
+import React, { useEffect, useRef, type ReactNode } from "react";
+
+interface SlidePanelProps {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  children: ReactNode;
+  width?: "sm" | "md" | "lg";
+}
+
+export function SlidePanel({
+  open,
+  onClose,
+  title,
+  children,
+  width = "md",
+}: SlidePanelProps) {
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+
+    if (open) {
+      document.addEventListener("keydown", handleEscape);
+      document.body.style.overflow = "hidden";
+    }
+
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "";
+    };
+  }, [open, onClose]);
+
+  const widthClasses = {
+    sm: "w-[320px]",
+    md: "w-[480px]",
+    lg: "w-[640px]",
+  };
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50">
+      <div className="absolute inset-0 bg-black/30" onClick={onClose} />
+      <div
+        ref={panelRef}
+        className={`absolute right-0 top-0 h-full ${widthClasses[width]} bg-white shadow-2xl flex flex-col animate-in slide-in-from-right duration-300`}
+      >
+        <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>
+          <button
+            onClick={onClose}
+            className="p-1 text-gray-400 hover:text-gray-600 rounded-lg hover:bg-gray-100 transition-colors"
+          >
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+            >
+              <path d="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        <div className="flex-1 overflow-y-auto p-6">{children}</div>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/Spinner.tsx

@@ -0,0 +1,24 @@
+interface SpinnerProps {
+  size?: "sm" | "md" | "lg";
+  className?: string;
+}
+
+export function Spinner({ size = "md", className = "" }: SpinnerProps) {
+  return (
+    <svg
+      className={`kyro-spinner kyro-spinner-${size} ${className}`}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <circle
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeDasharray="40 20"
+      />
+    </svg>
+  );
+}

package/src/components/ui/Toast.tsx

@@ -0,0 +1,78 @@
+import { createContext, useContext, type ReactNode } from 'react';
+
+interface Toast {
+  id: string;
+  type: 'success' | 'error' | 'info' | 'warning';
+  message: string;
+}
+
+interface ToastContextType {
+  toasts: Toast[];
+  addToast: (type: Toast['type'], message: string) => void;
+  removeToast: (id: string) => void;
+}
+
+const ToastContext = createContext<ToastContextType | null>(null);
+
+interface ToastProps {
+  type: Toast['type'];
+  message: string;
+  onClose: () => void;
+}
+
+export function Toast({ type, message, onClose }: ToastProps) {
+  const icons = {
+    success: (
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+        <path d="M22 4L12 14.01l-3-3" />
+      </svg>
+    ),
+    error: (
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <circle cx="12" cy="12" r="10" />
+        <path d="M15 9l-6 6M9 9l6 6" />
+      </svg>
+    ),
+    warning: (
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+        <path d="M12 9v4M12 17h.01" />
+      </svg>
+    ),
+    info: (
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <circle cx="12" cy="12" r="10" />
+        <path d="M12 16v-4M12 8h.01" />
+      </svg>
+    )
+  };
+
+  return (
+    <div className={`kyro-toast kyro-toast-${type}`}>
+      <span className="kyro-toast-icon">{icons[type]}</span>
+      <span className="kyro-toast-message">{message}</span>
+      <button className="kyro-toast-close" onClick={onClose}>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M18 6L6 18M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+  );
+}
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  return (
+    <ToastContext.Provider value={{ toasts: [], addToast: () => {}, removeToast: () => {} }}>
+      {children}
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+}

package/src/layouts/AdminLayout.astro

@@ -0,0 +1,197 @@
+---
+import "../styles/main.css";
+import { getRegistry } from "@kyro-cms/core";
+
+const registry = getRegistry();
+const collections = registry.getCollections();
+
+interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{title} - Kyro CMS</title>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  </head>
+  <body class="bg-[#eaeff2] antialiased text-[#0b1222]">
+    <div class="flex h-screen p-6 gap-6 overflow-hidden">
+      <!-- Sidebar Tile -->
+      <aside
+        class="surface-tile w-[320px] flex flex-col flex-shrink-0 overflow-hidden"
+      >
+        <!-- Logo Section -->
+        <div class="px-4 py-8">
+          <div class="flex items-center gap-4">
+            <span class="text-3xl font-black tracking-tighter text-[#0b1222]"
+              >KYRO.</span
+            >
+          </div>
+        </div>
+
+        <!-- Navigation -->
+        <nav class="flex-1 px-4 overflow-y-auto">
+          <div class="space-y-2 mt-4">
+            <a
+              href="/"
+              class={`flex items-center gap-4 px-6 py-4 rounded-2xl transition-all font-bold ${
+                title === "Dashboard"
+                  ? "bg-[#0b1222] text-white shadow-lg"
+                  : "text-[#64748b] hover:bg-gray-50 hover:text-[#0b1222]"
+              }`}
+            >
+              <svg
+                class="w-5 h-5"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                ><path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2.5"
+                  d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+                ></path></svg
+              >
+              <span>Dashboard</span>
+            </a>
+
+            <div class="pt-8 pb-4">
+              <p
+                class="px-6 text-[10px] font-black text-[#64748b] uppercase tracking-[0.3em] opacity-50"
+              >
+                Authentication
+              </p>
+            </div>
+
+            <a
+              href="/users"
+              class={`flex items-center gap-4 px-6 py-4 rounded-2xl transition-all font-bold ${
+                title === "Users"
+                  ? "bg-[#0b1222] text-white shadow-lg"
+                  : "text-[#64748b] hover:bg-gray-50 hover:text-[#0b1222]"
+              }`}
+            >
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
+              </svg>
+              <span>Users</span>
+            </a>
+
+            <a
+              href="/roles"
+              class={`flex items-center gap-4 px-6 py-4 rounded-2xl transition-all font-bold ${
+                title === "Roles"
+                  ? "bg-[#0b1222] text-white shadow-lg"
+                  : "text-[#64748b] hover:bg-gray-50 hover:text-[#0b1222]"
+              }`}
+            >
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
+              </svg>
+              <span>Roles</span>
+            </a>
+
+            <a
+              href="/audit"
+              class={`flex items-center gap-4 px-6 py-4 rounded-2xl transition-all font-bold ${
+                title === "Audit Logs"
+                  ? "bg-[#0b1222] text-white shadow-lg"
+                  : "text-[#64748b] hover:bg-gray-50 hover:text-[#0b1222]"
+              }`}
+            >
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+              </svg>
+              <span>Audit Logs</span>
+            </a>
+
+            <div class="pt-8 pb-4">
+              <p
+                class="px-6 text-[10px] font-black text-[#64748b] uppercase tracking-[0.3em] opacity-50"
+              >
+                Collections
+              </p>
+            </div>
+
+            {
+              collections.map((col) => (
+                <a
+                  href={`/${col.slug}`}
+                  class="flex items-center gap-4 px-6 py-4 rounded-2xl text-[#64748b] font-bold transition-all hover:bg-gray-50 hover:text-[#0b1222] group"
+                >
+                  <div class="w-2 h-2 rounded-full bg-gray-200 group-hover:bg-[#0b1222] transition-colors" />
+                  <span>{col.label}</span>
+                </a>
+              ))
+            }
+
+            <div class="pt-8 pb-4">
+              <p
+                class="px-6 text-[10px] font-black text-[#64748b] uppercase tracking-[0.3em] opacity-50"
+              >
+                System
+              </p>
+            </div>
+
+            <a
+              href="/admin"
+              class="flex items-center gap-4 px-6 py-4 rounded-2xl text-[#64748b] font-bold transition-all hover:bg-gray-50 hover:text-[#0b1222]"
+            >
+              <svg
+                class="w-5 h-5"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                ><path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2.5"
+                  d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+                ></path><path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2.5"
+                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg
+              >
+              <span>Settings</span>
+            </a>
+          </div>
+        </nav>
+
+        <!-- User Section Tile-Adjacent -->
+        <div class="p-10 mt-auto bg-gray-50/50">
+          <div class="flex flex-col items-center text-center">
+            <div class="relative mb-5">
+              <img
+                src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=150&auto=format&fit=crop"
+                class="w-20 h-20 rounded-full object-cover border-4 border-white shadow-md"
+                alt="Emily Jonson"
+              />
+              <div
+                class="absolute bottom-1 right-1 w-5 h-5 bg-orange-400 border-4 border-white rounded-full"
+              >
+              </div>
+            </div>
+            <h3 class="font-black text-lg text-[#0b1222] tracking-tight">
+              Emily Jonson
+            </h3>
+            <p class="text-xs text-[#64748b] mt-1 uppercase tracking-widest">
+              jonson@bress.com
+            </p>
+          </div>
+        </div>
+      </aside>
+
+      <!-- Main Content Column -->
+      <main class="flex-1 flex flex-col gap-6 overflow-hidden">
+        <slot />
+      </main>
+    </div>
+  </body>
+</html>

package/src/lib/config.ts

@@ -0,0 +1,68 @@
+import type { CollectionConfig, GlobalConfig } from "@kyro-cms/core";
+import { blogCollections } from "../../../src/index";
+import { ecommerceCollections } from "../../../src/index";
+import { minimalCollections } from "../../../src/index";
+import { kitchenSinkCollections } from "../../../src/index";
+import { mediaCollections } from "../../../src/templates/media";
+import {
+  allSettingsGlobals,
+  coreSettingsGlobals,
+  ecommerceSettingsGlobals,
+} from "../../../src/templates/settings";
+import { authCollections } from "../collections/auth";
+
+export type AdminTemplate = "minimal" | "blog" | "ecommerce" | "kitchen-sink";
+
+export function getAdminConfig(template: AdminTemplate = "blog") {
+  const collections: CollectionConfig[] = [];
+  const globals: GlobalConfig[] = [];
+
+  collections.push(...Object.values(mediaCollections));
+  collections.push(...Object.values(authCollections));
+
+  switch (template) {
+    case "minimal":
+      collections.push(...Object.values(minimalCollections));
+      globals.push(...coreSettingsGlobals);
+      break;
+    case "blog":
+      collections.push(...Object.values(blogCollections));
+      globals.push(...coreSettingsGlobals);
+      break;
+    case "ecommerce":
+      collections.push(...Object.values(ecommerceCollections));
+      globals.push(...coreSettingsGlobals, ...ecommerceSettingsGlobals);
+      break;
+    case "kitchen-sink":
+      collections.push(
+        ...Object.values(minimalCollections),
+        ...Object.values(blogCollections),
+        ...Object.values(ecommerceCollections),
+        ...Object.values(kitchenSinkCollections),
+      );
+      globals.push(...allSettingsGlobals);
+      break;
+  }
+
+  const collectionsMap = collections.reduce(
+    (acc, c) => {
+      if (c.slug) acc[c.slug] = c;
+      return acc;
+    },
+    {} as Record<string, CollectionConfig>,
+  );
+
+  const globalsMap = globals.reduce(
+    (acc, g) => {
+      if (g.slug) acc[g.slug] = g;
+      return acc;
+    },
+    {} as Record<string, GlobalConfig>,
+  );
+
+  return { collections: collectionsMap, globals: globalsMap };
+}
+
+export const adminConfig = getAdminConfig("blog");
+export const collections = adminConfig.collections;
+export const globals = adminConfig.globals;

package/src/lib/dataStore.ts

@@ -0,0 +1,111 @@
+import type { CollectionConfig } from "@kyro-cms/core";
+
+interface Document {
+  id: string;
+  [key: string]: any;
+}
+
+class DataStore {
+  private data: Map<string, Document[]> = new Map();
+  private metadata: Map<string, { createdAt: string; updatedAt: string }> =
+    new Map();
+  private idCounters: Map<string, number> = new Map();
+
+  initialize(collections: Record<string, CollectionConfig>) {
+    for (const [slug, config] of Object.entries(collections)) {
+      if (!this.data.has(slug)) {
+        this.data.set(slug, []);
+        this.idCounters.set(slug, 1);
+      }
+    }
+  }
+
+  private generateId(slug: string): string {
+    const counter = this.idCounters.get(slug) || 1;
+    this.idCounters.set(slug, counter + 1);
+    return `${slug}-${counter}`;
+  }
+
+  private getTimestamp(): string {
+    return new Date().toISOString();
+  }
+
+  find<T = any>(
+    slug: string,
+    options: { page?: number; limit?: number } = {},
+  ): { docs: T[]; totalDocs: number; totalPages: number; page: number } {
+    const docs = this.data.get(slug) || [];
+    const page = options.page || 1;
+    const limit = options.limit || 25;
+    const start = (page - 1) * limit;
+    const end = start + limit;
+
+    return {
+      docs: docs.slice(start, end) as T[],
+      totalDocs: docs.length,
+      totalPages: Math.ceil(docs.length / limit),
+      page,
+    };
+  }
+
+  findById<T = any>(slug: string, id: string): T | null {
+    const docs = this.data.get(slug) || [];
+    return (docs.find((d) => d.id === id) as T) || null;
+  }
+
+  create<T = any>(slug: string, data: Partial<T>): T {
+    const docs = this.data.get(slug) || [];
+    const now = this.getTimestamp();
+    const newDoc = {
+      id: this.generateId(slug),
+      ...data,
+      createdAt: now,
+      updatedAt: now,
+    } as T;
+    docs.push(newDoc as any);
+    this.data.set(slug, docs);
+    this.metadata.set(`${slug}:${(newDoc as any).id}`, {
+      createdAt: now,
+      updatedAt: now,
+    });
+    return newDoc;
+  }
+
+  update<T = any>(slug: string, id: string, data: Partial<T>): T | null {
+    const docs = this.data.get(slug) || [];
+    const index = docs.findIndex((d) => d.id === id);
+    if (index === -1) return null;
+
+    const now = this.getTimestamp();
+    const updated = {
+      ...docs[index],
+      ...data,
+      id,
+      updatedAt: now,
+    };
+    docs[index] = updated;
+    this.data.set(slug, docs);
+    this.metadata.set(`${slug}:${id}`, {
+      createdAt: docs[index].createdAt,
+      updatedAt: now,
+    });
+    return updated as T;
+  }
+
+  delete(slug: string, id: string): boolean {
+    const docs = this.data.get(slug) || [];
+    const index = docs.findIndex((d) => d.id === id);
+    if (index === -1) return false;
+
+    docs.splice(index, 1);
+    this.data.set(slug, docs);
+    this.metadata.delete(`${slug}:${id}`);
+    return true;
+  }
+
+  count(slug: string): number {
+    return (this.data.get(slug) || []).length;
+  }
+}
+
+export const dataStore = new DataStore();