@kyro-cms/admin 0.3.2 → 0.3.4

package/src/integration.ts

@@ -4,30 +4,105 @@ import fs from "fs";
 
 export interface KyroAdminOptions {
   basePath?: string;
+  apiPath?: string;
   configPath?: string;
-  disableAuth?: boolean;
 }
 
 export function kyroAdmin(options: KyroAdminOptions = {}): AstroIntegration {
   const {
     basePath = "/admin",
+    apiPath = "/api",
     configPath = "kyro.config.ts",
-    disableAuth = false,
   } = options;
 
   return {
     name: "@kyro-cms/admin",
     hooks: {
-      "astro:config:setup": ({ config, updateConfig, logger }) => {
-        logger.info(`Kyro Admin mounted at ${basePath}`);
+      "astro:config:setup": ({ config, updateConfig, injectRoute, logger }) => {
+        logger.info(`Kyro Admin mounted at ${basePath} (API: ${apiPath})`);
 
-        const resolvedConfig = path.resolve(config.root.pathname, configPath);
-        if (fs.existsSync(resolvedConfig)) {
-          logger.info(`Loaded config from ${configPath}`);
+        const fallbackConfig = path.resolve(
+          new URL(".", import.meta.url).pathname,
+          "lib/default-kyro-config.ts",
+        );
+
+        // Try to resolve config from root first, then admin local
+        const rootConfig = path.resolve(config.root.pathname, "..", configPath);
+        const localConfig = path.resolve(config.root.pathname, configPath);
+
+        const resolvedConfig = fs.existsSync(rootConfig)
+          ? rootConfig
+          : fs.existsSync(localConfig)
+            ? localConfig
+            : fallbackConfig;
+
+        if (resolvedConfig !== fallbackConfig) {
+          logger.info(`Loaded config from ${resolvedConfig}`);
         } else {
-          logger.warn(
-            `Config file not found at ${configPath}. Using defaults.`,
+          logger.warn(`Config file not found. Using defaults.`);
+        }
+
+        // Inject API Routes
+        if (apiPath) {
+          const apiHandlerPath = path.resolve(
+            config.root.pathname,
+            "..",
+            "src/api-handler.ts",
           );
+          injectRoute({
+            pattern: `${apiPath}/[...path]`,
+            entrypoint: apiHandlerPath,
+          });
+        }
+
+        // Inject Admin UI Routes
+        const pages = [
+          { pattern: "", entrypoint: "./pages/index.astro" },
+          { pattern: "/login", entrypoint: "./pages/auth/login.astro" },
+          { pattern: "/register", entrypoint: "./pages/auth/register.astro" },
+          { pattern: "/media", entrypoint: "./pages/media.astro" },
+          { pattern: "/users", entrypoint: "./pages/users/index.astro" },
+          { pattern: "/users/[id]", entrypoint: "./pages/users/[id].astro" },
+          { pattern: "/roles", entrypoint: "./pages/roles/index.astro" },
+          { pattern: "/settings", entrypoint: "./pages/settings/index.astro" },
+          {
+            pattern: "/settings/[slug]",
+            entrypoint: "./pages/settings/[slug].astro",
+          },
+          { pattern: "/audit", entrypoint: "./pages/audit/index.astro" },
+          { pattern: "/sessions", entrypoint: "./pages/sessions.astro" },
+          { pattern: "/keys", entrypoint: "./pages/keys.astro" },
+          { pattern: "/webhooks", entrypoint: "./pages/webhooks.astro" },
+          { pattern: "/plugins", entrypoint: "./pages/plugins.astro" },
+          { pattern: "/marketplace", entrypoint: "./pages/marketplace.astro" },
+          {
+            pattern: "/api-explorer",
+            entrypoint: "./pages/api-explorer.astro",
+          },
+          { pattern: "/graphql", entrypoint: "./pages/graphql.astro" },
+          {
+            pattern: "/rest-playground",
+            entrypoint: "./pages/rest-playground.astro",
+          },
+          {
+            pattern: "/[collection]",
+            entrypoint: "./pages/[collection]/index.astro",
+          },
+          {
+            pattern: "/[collection]/[id]",
+            entrypoint: "./pages/[collection]/[id].astro",
+          },
+        ];
+
+        for (const page of pages) {
+          const pattern = `${basePath}${page.pattern}`.replace(/\/$/, "");
+          injectRoute({
+            pattern: pattern || "/",
+            entrypoint: path.resolve(
+              new URL(".", import.meta.url).pathname,
+              page.entrypoint,
+            ),
+          });
         }
 
         updateConfig({
@@ -38,8 +113,8 @@ export function kyroAdmin(options: KyroAdminOptions = {}): AstroIntegration {
               },
             },
             define: {
-              __KYRO_ADMIN_BASE_PATH__: JSON.stringify(basePath),
-              __KYRO_ADMIN_AUTH_DISABLED__: JSON.stringify(disableAuth),
+              __KYRO_ADMIN_PATH__: JSON.stringify(basePath),
+              __KYRO_API_PATH__: JSON.stringify(apiPath),
             },
           },
         });

package/src/kyro-cms.d.ts

@@ -0,0 +1,209 @@
+declare module '@kyro-cms/core' {
+  export interface CollectionConfig {
+    slug: string;
+    label?: string;
+    fields: FieldConfig[];
+admin?: {
+      layout?: 'single' | 'split';
+      autoGenerate?: string;
+      defaultColumns?: string[];
+      description?: string;
+      useAsTitle?: string;
+      [key: string]: unknown;
+    };
+    timestamps?: boolean;
+    singularLabel?: string;
+    [key: string]: unknown;
+  }
+
+  export interface GlobalConfig {
+    slug: string;
+    label?: string;
+    fields: FieldConfig[];
+    [key: string]: unknown;
+  }
+
+  export interface FieldConfig {
+    name: string;
+    label?: string;
+    type: string;
+    required?: boolean;
+    admin?: {
+      hidden?: boolean;
+      layout?: 'single' | 'split';
+      autoGenerate?: string;
+      [key: string]: unknown;
+    };
+    tabs?: Array<{ label?: string; fields?: FieldConfig[]; [key: string]: unknown }>;
+    fields?: FieldConfig[];
+    options?: Array<{ label: string; value: string | number }>;
+    blocks?: Block[];
+    relationTo?: string | string[];
+    hasMany?: boolean;
+    condition?: unknown;
+    rowWidth?: string;
+    width?: string;
+    [key: string]: unknown;
+  }
+
+  export type FieldType = string;
+  export const ALL_FIELD_TYPES: string[];
+  export type ALL_FIELD_TYPES = string[];
+
+  export interface TextField extends FieldConfig { type: 'text' }
+  export interface NumberField extends FieldConfig { type: 'number' }
+  export interface CheckboxField extends FieldConfig { type: 'checkbox' }
+  export interface DateField extends FieldConfig { type: 'date' }
+  export interface SelectField extends FieldConfig { type: 'select'; options?: { label: string; value: string | number }[] }
+  export interface TextareaField extends FieldConfig { type: 'textarea' }
+  export interface MarkdownField extends FieldConfig { type: 'markdown' }
+  export interface RichTextField extends FieldConfig { type: 'richText' }
+  export interface CodeField extends FieldConfig { type: 'code'; language?: string }
+  export interface JSONField extends FieldConfig { type: 'json' }
+  export interface ImageField extends FieldConfig { type: 'image' }
+  export interface UploadField extends FieldConfig { type: 'upload' }
+  export interface RelationshipField extends FieldConfig { type: 'relationship'; relationTo: string }
+  export interface BlocksField extends FieldConfig { type: 'blocks'; blocks: Block[] }
+  export interface ArrayField extends FieldConfig { type: 'array'; fields: FieldConfig[] }
+  export interface GroupField extends FieldConfig { type: 'group'; fields: FieldConfig[] }
+
+  export type Field = FieldConfig;
+
+  export interface Block {
+    slug: string;
+    label?: string;
+    fields: FieldConfig[];
+    [key: string]: unknown;
+  }
+
+  export interface RichTextBlock extends Block {}
+
+  export interface KyroConfig {
+    collections?: CollectionConfig[] | Record<string, CollectionConfig>;
+    globals?: GlobalConfig[] | Record<string, GlobalConfig>;
+    [key: string]: unknown;
+  }
+
+  export interface Permissions {
+    collections?: {
+      [key: string]: {
+        read?: boolean;
+        create?: boolean;
+        update?: boolean;
+        delete?: boolean;
+        [key: string]: unknown;
+      };
+    };
+    globals?: {
+      [key: string]: {
+        read?: boolean;
+        update?: boolean;
+        [key: string]: unknown;
+      };
+    };
+    media?: {
+      read?: boolean;
+      create?: boolean;
+      update?: boolean;
+      delete?: boolean;
+    };
+    users?: {
+      read?: boolean;
+      create?: boolean;
+      update?: boolean;
+      delete?: boolean;
+    };
+    [key: string]: unknown;
+  }
+
+  export interface FilterConfig {
+    field: string;
+    operator: string;
+    value: string;
+  }
+
+  export interface SortConfig {
+    field: string;
+    direction: 'asc' | 'desc';
+  }
+
+  export interface PaginationConfig {
+    page: number;
+    limit: number;
+    total: number;
+  }
+
+  export interface ColumnConfig {
+    name: string;
+    label: string;
+    sortable?: boolean;
+    width?: string;
+  }
+
+  export interface BlockData {
+    id: string;
+    type: string;
+    data?: Record<string, unknown>;
+    children?: BlockData[];
+    order?: number;
+    [key: string]: unknown;
+  }
+
+  export interface ApiListResponse {
+    docs?: Record<string, unknown>[];
+    totalDocs?: number;
+    [key: string]: unknown;
+  }
+
+  export interface ApiDocResponse {
+    data?: Record<string, unknown>;
+    status?: string;
+    createdAt?: string;
+    updatedAt?: string;
+    publishedAt?: string;
+    [key: string]: unknown;
+  }
+
+  export interface Version {
+    id: string;
+    status?: string;
+    changeDescription?: string;
+    createdAt?: string;
+    updatedAt?: string;
+    createdBy?: string;
+    [key: string]: unknown;
+  }
+
+  export interface VersionDiff {
+    field?: string;
+    oldValue?: unknown;
+    newValue?: unknown;
+    [key: string]: unknown;
+  }
+}
+
+declare module '@kyro-cms/core/client' {
+  export * from '@kyro-cms/core';
+}
+
+// Ambient module for template collections (no type declarations in the package)
+declare module '@kyro-cms/core/templates' {
+  import type { CollectionConfig, GlobalConfig } from '@kyro-cms/core';
+
+  export const blogCollections: Record<string, CollectionConfig>;
+  export const ecommerceCollections: Record<string, CollectionConfig>;
+  export const minimalCollections: Record<string, CollectionConfig>;
+  export const kitchenSinkCollections: Record<string, CollectionConfig>;
+  export const mediaCollections: Record<string, CollectionConfig>;
+  export const authCollections: Record<string, CollectionConfig>;
+  export const allSettingsGlobals: GlobalConfig[];
+  export const coreSettingsGlobals: GlobalConfig[];
+  export const ecommerceSettingsGlobals: GlobalConfig[];
+}
+
+// Ambient module for the Astro virtual import
+declare module 'kyro:config' {
+  import type { KyroConfig } from '@kyro-cms/core';
+  const config: KyroConfig;
+  export default config;
+}

package/src/layouts/AdminLayout.astro

@@ -1,15 +1,22 @@
 ---
 import "../styles/main.css";
-import { nonAuthCollections, collections, globals } from "@/lib/config";
-import { CommandPaletteWrapper } from "@/components/ui/CommandPaletteWrapper";
+import { nonAuthCollections, collections, globals } from "../lib/config";
+import { CommandPaletteWrapper } from "../components/ui/CommandPaletteWrapper";
 import Sidebar from "../components/Sidebar.astro";
+import { adminPath, apiPath } from "../lib/paths";
+import { AuthBridge } from "../components/AuthBridge";
+import { GlobalModal } from "../components/ui/GlobalModal";
+import { Toaster } from "../components/ui/Toaster";
+import { getSiteSettings } from "../lib/globals";
 
 interface Props {
   title: string;
 }
 
 const { title } = Astro.props;
-const user = Astro.locals.user;
+const siteSettings = await getSiteSettings();
+const siteName = siteSettings?.siteName || "Kyro CMS";
+const siteFavicon = siteSettings?.siteFavicon;
 ---
 
 <!doctype html>
@@ -17,9 +24,100 @@ const user = Astro.locals.user;
   <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" />
-    <script is:inline>
+    <title>{title} - {siteName}</title>
+    <link rel="icon" type={siteFavicon?.mimeType || "image/svg+xml"} href={siteFavicon?.url || "/favicon.svg"} />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link
+      rel="preconnect"
+      href="https://fonts.gstatic.com"
+      crossorigin
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap"
+      rel="stylesheet"
+    />
+    <script is:inline define:vars={{ adminPath, apiPath }}>
+      // Simple in-memory auth state (alternative to Zustand for SSR)
+      window.__kyroAuth = window.__kyroAuth || { user: null, permissions: null, verified: false };
+
+      // Verify auth - redirect to login if not authenticated
+      (async () => {
+        try {
+          // Fetch user and permissions using cookies
+          const [meRes, accessRes] = await Promise.all([
+            fetch(apiPath + '/auth/me', { credentials: 'include' }),
+            fetch(apiPath + '/auth/access', { credentials: 'include' })
+          ]);
+
+          if (!meRes.ok) {
+            window.location.href = adminPath + "/login";
+            return;
+          }
+          
+          const meData = await meRes.json();
+          if (!meData.user) {
+            console.log('[AdminLayout] No user in data, redirecting to login');
+            window.location.href = adminPath + "/login";
+            return;
+          }
+
+          const permissions = accessRes.ok ? await accessRes.json() : null;
+
+          // Store user in memory (not localStorage)
+          window.__kyroAuth.user = meData.user;
+          window.__kyroAuth.permissions = permissions;
+          window.__kyroAuth.verified = true;
+          
+          // Dispatch event for components to update
+          window.dispatchEvent(new CustomEvent('kyro:auth-ready', { 
+            detail: { 
+              user: meData.user, 
+              permissions 
+            } 
+          }));
+
+          // Navigation Guard - Check if user has read access to current page
+          if (permissions) {
+            const path = window.location.pathname;
+            const relativePath = path.replace(adminPath, '');
+            
+            // Extract slug and type
+            let slug = '';
+            let type = '';
+            
+            if (relativePath.startsWith('/users')) { slug = 'users'; type = 'collection'; }
+            else if (relativePath.startsWith('/audit')) { slug = 'audit_logs'; type = 'collection'; }
+            else if (relativePath.startsWith('/media')) { slug = 'media'; type = 'collection'; }
+            else if (relativePath.startsWith('/settings/')) { slug = relativePath.split('/')[2]; type = 'global'; }
+            else if (relativePath.includes('/') && !relativePath.startsWith('/login') && !relativePath.startsWith('/403')) {
+               // Dynamic collections: /[adminPath]/[collectionSlug]/...
+               slug = relativePath.split('/')[1];
+               type = 'collection';
+            }
+
+            if (slug && type) {
+              let hasAccess = true;
+              if (type === 'collection' && permissions.collections) {
+                const p = permissions.collections[slug];
+                if (p && p.read === false) hasAccess = false;
+              } else if (type === 'global' && permissions.globals) {
+                const p = permissions.globals[slug];
+                if (p && p.read === false) hasAccess = false;
+              }
+              
+              if (!hasAccess) {
+                console.log('[AdminLayout] Access denied for', slug, 'redirecting to 403');
+                window.location.href = adminPath + "/403";
+              }
+            }
+          }
+        } catch (err) {
+          console.error('[AdminLayout] Auth check error:', err);
+          window.location.href = adminPath + "/login";
+        }
+      })();
+
+      // Theme init (only theme persisted)
       (() => {
         const getTheme = () => {
           const stored = localStorage.getItem("theme");
@@ -38,8 +136,9 @@ const user = Astro.locals.user;
     </script>
   </head>
   <body class="bg-[var(--kyro-bg)] antialiased text-[var(--kyro-text-primary)]">
+    <div id="kyro-user-data" data-user=""></div>
     <div class="flex h-screen p-6 gap-6 overflow-hidden">
-      <Sidebar title={title} user={user} />
+      <Sidebar title={title} />
 
       <!-- Main Content Column -->
       <main class="flex-1 flex flex-col gap-6 overflow-hidden">
@@ -89,6 +188,9 @@ const user = Astro.locals.user;
       </div>
     </div>
 
+    <!-- Auth Bridge: Hydrates Zustand useAuthStore with user + permissions -->
+    <AuthBridge client:load />
+
     <!-- Command Palette (React) -->
     <CommandPaletteWrapper
       client:only="react"
@@ -96,8 +198,14 @@ const user = Astro.locals.user;
       globals={globals}
     />
 
+    <!-- Global Modals (React) -->
+    <GlobalModal client:only="react" />
+
+    <!-- Toast Notifications (React) -->
+    <Toaster client:only="react" />
+
     <!-- Theme UI Logic -->
-    <script is:inline>
+    <script is:inline define:vars={{ adminPath, apiPath }}>
       const lightBtn = document.getElementById("theme-light-btn");
       const darkBtn = document.getElementById("theme-dark-btn");
 
@@ -183,9 +291,18 @@ const user = Astro.locals.user;
 
       logoutBackdrop?.addEventListener("click", closeLogoutModal);
       logoutCancel?.addEventListener("click", closeLogoutModal);
-      logoutConfirm?.addEventListener("click", () => {
-        window.location.href = "/login";
-      });
+        logoutConfirm?.addEventListener("click", async () => {
+          try {
+            await fetch(apiPath + '/auth/logout', { 
+              method: 'POST',
+              credentials: 'include'
+            });
+          } finally {
+            // Clear auth state
+            window.__kyroAuth = { user: null, verified: false };
+            window.location.href = adminPath + "/login";
+          }
+        });
     </script>
   </body>
 </html>

package/src/layouts/AuthLayout.astro

@@ -1,5 +1,6 @@
 ---
 import "../styles/main.css";
+import { adminPath, apiPath } from "../lib/paths";
 
 interface Props {
   title: string;
@@ -15,12 +16,24 @@ const { title } = Astro.props;
     <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" />
-    <script is:inline>
-      (() => {
+    <script is:inline define:vars={{ adminPath, apiPath }}>
+      (async () => {
+        try {
+          const res = await fetch(apiPath + "/auth/me", { credentials: "include" });
+          if (res.ok) {
+            const data = await res.json();
+            if (data?.user) {
+              window.location.href = adminPath;
+              return;
+            }
+          }
+        } catch {}
         const getTheme = () => {
           const stored = localStorage.getItem("theme");
           if (stored) return stored;
-          return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+          return window.matchMedia("(prefers-color-scheme: dark)").matches
+            ? "dark"
+            : "light";
         };
         const theme = getTheme();
         if (theme === "dark") {
@@ -37,10 +50,13 @@ const { title } = Astro.props;
         <!-- Logo -->
         <div class="w-full text-center mb-8">
           <a href="/" class="inline-block">
-            <span class="text-4xl font-black tracking-tighter text-[var(--kyro-text-primary)]">KYRO.</span>
+            <span
+              class="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]"
+              >KYRO.</span
+            >
           </a>
         </div>
-        
+
         <div class="w-full flex justify-center">
           <slot />
         </div>