@kyro-cms/admin 0.5.3 → 0.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyro-cms/admin",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "engines": {
     "node": ">=22"
   },
@@ -89,30 +89,34 @@
     "@uiw/codemirror-theme-github": "^4.25.9",
     "@uiw/react-codemirror": "^4.25.9",
     "astro": "^6.3.1",
+    "astro-loading-indicator": "^0.8.0",
+    "dotenv": "^17.4.2",
     "graphiql": "^5.2.2",
     "idb-keyval": "^6.2.2",
     "lucide-react": "^0.475.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-icons": "^5.0.0",
     "react-image-crop": "^11.0.10",
     "slate": "^0.124.1",
     "slate-history": "^0.113.1",
     "slate-react": "^0.124.0",
+    "swup": "^4.9.0",
     "tailwindcss": "^4.0.0",
+    "unstorage": "^1.17.5",
     "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.9",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "dotenv": "^17.4.2",
     "dotenv-cli": "^11.0.0",
     "tsup": "^6.0.0",
     "typescript": "^6.0.3",
     "vitest": "^4.1.4"
   },
   "peerDependencies": {
-    "@kyro-cms/core": "^0.5.3",
+    "@kyro-cms/core": "^0.5.4",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

package/src/components/AuditLogsPage.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { fetchWithAuth } from "../lib/api";
 import { Modal } from "./ui/Modal";
+import { Shimmer } from "./ui/Shimmer";
 
 interface AuditLog {
   id: string;
@@ -206,7 +207,7 @@ export function AuditLogsPage() {
   };
 
   return (
-    <div className="flex-1 overflow-y-auto pr-12 space-y-6">
+    <div className="flex-1 overflow-y-auto  space-y-6">
       {/* Header */}
       <div className="surface-tile p-6 flex items-center justify-between gap-8">
         <div>
@@ -332,13 +333,8 @@ export function AuditLogsPage() {
       {/* Table */}
       <div className="surface-tile overflow-hidden">
         {loading ? (
-          <div className="divide-y divide-[var(--kyro-border)]">
-            {Array.from({ length: 5 }).map((_, i) => (
-              <div
-                key={i}
-                className="h-16 animate-pulse bg-[var(--kyro-surface-accent)]"
-              />
-            ))}
+          <div className="space-y-2 p-4">
+            <Shimmer variant="table-row" count={5} />
           </div>
         ) : logs.length === 0 ? (
           <div className="px-8 py-20 text-center">

package/src/components/Dashboard.tsx

@@ -3,6 +3,7 @@ import { LayoutDashboard, FileText, Image as ImageIcon, Users, Plus, ArrowUpRigh
 import { useAuthStore } from "../lib/stores";
 import { authCollectionSlugs } from "../lib/config";
 import { PageHeader } from "./ui/PageHeader";
+import { Shimmer } from "./ui/Shimmer";
 
 
 interface DashboardProps {
@@ -124,7 +125,7 @@ export function Dashboard({ collections, onNavigate, user }: DashboardProps) {
                 {stat.label}
               </p>
               <h3 className="text-3xl font-bold tracking-tighter">
-                {loading ? "..." : stat.value}
+                {loading ? <Shimmer variant="text" className="w-16" /> : stat.value}
               </h3>
             </div>
             <div

package/src/components/DetailView.tsx

@@ -8,6 +8,7 @@ import type {
 import { AutoForm } from "./AutoForm";
 import { ActionBar, type DocumentStatus, type SaveStatus } from "./ActionBar";
 import { Spinner } from "./ui/Spinner";
+import { Shimmer } from "./ui/Shimmer";
 import { useToast } from "./ui/Toast";
 import { useUIStore } from "../lib/stores";
 import { PageHeader } from "./ui/PageHeader";
@@ -233,8 +234,14 @@ export function DetailView({
   if (loading) {
     return (
       <div className="kyro-detail">
-        <div className="kyro-loading">
-          <Spinner />
+        <div className="space-y-6 p-4">
+          <div className="space-y-2">
+            <Shimmer variant="text" className="w-1/3" />
+            <Shimmer variant="text" className="w-2/3" />
+          </div>
+          <div className="space-y-4">
+            <Shimmer variant="rect" count={4} />
+          </div>
         </div>
       </div>
     );

package/src/components/ListView.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useMemo, useCallback, useRef } from "react";
 import { Spinner } from "./ui/Spinner";
+import { Shimmer } from "./ui/Shimmer";
 import { Plus } from "./ui/icons";
 import { apiGet, apiDelete, withCacheBust } from "../lib/api";
 
@@ -615,8 +616,8 @@ export function ListView({
       {/* Data Table */}
       <div className="surface-tile overflow-hidden">
         {loading ? (
-          <div className="flex items-center justify-center py-20">
-            <Spinner />
+          <div className="space-y-2 p-4">
+            <Shimmer variant="table-row" count={8} />
           </div>
         ) : docs.length === 0 ? (
           <div className="flex flex-col items-center justify-center py-16 px-8">

package/src/components/MediaGallery.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import { createPortal } from "react-dom";
 import { Spinner } from "./ui/Spinner";
+import { Shimmer } from "./ui/Shimmer";
 import { SlidePanel } from "./ui/SlidePanel";
 import { Badge } from "./ui/Badge";
 import { Folder } from "./ui/icons";
@@ -139,9 +140,8 @@ export function MediaGallery({
     {},
   );
   const [showNewFolderModal, setShowNewFolderModal] = useState(false);
-  const [storageConfigured, setStorageConfigured] = useState<boolean | null>(
-    null,
-  );
+  const [storageConfigured, setStorageConfigured] = useState<boolean | null>(null);
+  const [storageChecked, setStorageChecked] = useState(false);
   const [showStorageConfigModal, setShowStorageConfigModal] = useState(false);
   const [page, setPage] = useState(1);
   const [total, setTotal] = useState(0);
@@ -204,6 +204,13 @@ export function MediaGallery({
     checkStorage();
   }, [checkStorage]);
 
+  useEffect(() => {
+    if (storageConfigured === false && !storageChecked) {
+      setStorageChecked(true);
+      setShowStorageConfigModal(true);
+    }
+  }, [storageConfigured, storageChecked]);
+
   useEffect(() => {
     loadMedia();
   }, [loadMedia]);
@@ -569,8 +576,8 @@ export function MediaGallery({
         <div className="flex-1 flex flex-col min-h-0 bg-[var(--kyro-bg)]">
           <div className="flex-1 overflow-y-auto py-8 px-4 custom-scrollbar">
             {loading ? (
-              <div className="flex items-center justify-center h-64">
-                <Spinner />
+              <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
+                <Shimmer variant="media-card" count={12} />
               </div>
             ) : items.length === 0 ? (
               <div className="flex flex-col items-center justify-center py-32 text-center">
@@ -847,7 +854,7 @@ export function MediaGallery({
       {/* Selection Footer */}
       {selectedIds.size > 0 && (
         <div className="fixed bottom-12 left-1/2 -translate-x-1/2 z-[60] bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-full shadow-2xl px-2 py-2 flex items-center gap-12 animate-in slide-in-from-bottom-12 duration-700 ring-1 ring-white/10 backdrop-blur-xl">
-          <div className="flex items-center gap-5 border-r border-[var(--kyro-border)] pr-12">
+          <div className="flex items-center gap-5 border-r border-[var(--kyro-border)] ">
             <div className="w-12 h-12 rounded-full bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] flex items-center justify-center text-lg font-bold shadow-inner">
               {selectedIds.size}
             </div>

package/src/components/Sidebar.astro

@@ -30,7 +30,7 @@ interface NavItem {
   icon: string;
 }
 
-const siteSettings = await getSiteSettings();
+const siteSettings = await getSiteSettings({ request: Astro.request });
 const siteName = siteSettings?.siteName || "KYRO.";
 const siteLogo = siteSettings?.siteLogo;
 const logoWidth = siteSettings?.logo?.width;

package/src/components/ui/Shimmer.tsx

@@ -0,0 +1,28 @@
+interface ShimmerProps {
+  variant: "text" | "circle" | "rect" | "card" | "table-row" | "media-card" | "stat-card";
+  count?: number;
+  className?: string;
+}
+
+export function Shimmer({ variant, count = 1, className = "" }: ShimmerProps) {
+  const variants = {
+    text: "h-3 rounded-md",
+    circle: "size-10 rounded-full",
+    rect: "h-10 rounded-xl",
+    card: "h-32 rounded-2xl",
+    "table-row": "h-14 rounded-xl",
+    "media-card": "aspect-square rounded-2xl",
+    "stat-card": "h-24 rounded-2xl",
+  };
+
+  return (
+    <>
+      {Array.from({ length: count }).map((_, i) => (
+        <div
+          key={i}
+          className={`kyro-shimmer ${variants[variant]} ${className}`}
+        />
+      ))}
+    </>
+  );
+}

package/src/components/users/UserDetail.tsx

@@ -136,7 +136,7 @@ export function UserDetail({ user, apiPath, adminPath }: UserDetailProps) {
   };
 
   return (
-    <div className="flex-1 overflow-y-auto pr-12 space-y-8">
+    <div className="flex-1 overflow-y-auto  space-y-8">
       <div className="surface-tile p-6 flex items-center justify-between">
         <div className="flex items-center gap-4">
           <div className="w-14 h-14 rounded-full bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] flex items-center justify-center font-bold text-xl">

package/src/components/users/UserForm.tsx

@@ -85,7 +85,7 @@ export function UserForm({ mode, apiPath, adminPath, user }: UserFormProps) {
   };
 
   return (
-    <div className="flex-1 overflow-y-auto pr-12 space-y-8">
+    <div className="flex-1 overflow-y-auto  space-y-8">
       <div className="surface-tile p-6 flex items-center justify-between">
         <div>
           <h1 className="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]">

package/src/components/users/UsersList.tsx

@@ -81,7 +81,7 @@ export function UsersList({
   };
 
   return (
-    <div className="flex-1 overflow-y-auto pr-12 space-y-8">
+    <div className="flex-1 overflow-y-auto  space-y-8">
       <div className="surface-tile p-6 flex items-center justify-between">
         <div>
           <h1 className="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]">

package/src/hooks/useAutoFormState.ts

@@ -389,11 +389,27 @@ const drafts = [browserDraft, serverDraft].filter(Boolean) as Array<{
     setFormData,
   ]);
 
+  // Recursively find a field by name inside tabs/group/collapsible
+  function findFieldDeep(fields: Record<string, any>[], name: string): Record<string, any> | undefined {
+    for (const f of fields) {
+      if (f.name === name && f.admin?.autoGenerate === "title") return f;
+      if (f.type === "tabs" && "tabs" in f) {
+        for (const tab of f.tabs) {
+          const found = findFieldDeep(tab.fields, name);
+          if (found) return found;
+        }
+      }
+      if ((f.type === "group" || f.type === "collapsible") && "fields" in f) {
+        const found = findFieldDeep(f.fields, name);
+        if (found) return found;
+      }
+    }
+    return undefined;
+  }
+
   // Auto-generate metaTitle
   useEffect(() => {
-const metaTitleField = config.fields.find(
-       (f: Record<string, unknown>) => f.name === "metaTitle" && f.admin?.autoGenerate === "title",
-     );
+    const metaTitleField = findFieldDeep(config.fields, "metaTitle");
     if (!metaTitleField) return;
 
     let titleValue = "";

package/src/integration.ts

@@ -1,6 +1,10 @@
 import type { AstroIntegration } from "astro";
 import path from "path";
 import fs from "fs";
+import { execSync } from "child_process";
+import { pathToFileURL } from "url";
+import { config as loadDotEnv } from "dotenv";
+import { transform } from "esbuild";
 
 export interface KyroAdminOptions {
   basePath?: string;
@@ -18,7 +22,7 @@ export function kyroAdmin(options: KyroAdminOptions = {}): AstroIntegration {
   return {
     name: "@kyro-cms/admin",
     hooks: {
-      "astro:config:setup": ({ config, updateConfig, injectRoute, logger }) => {
+      "astro:config:setup": async ({ config, updateConfig, injectRoute, logger }) => {
         logger.info(`Kyro Admin mounted at ${basePath} (API: ${apiPath})`);
 
         const fallbackConfig = path.resolve(
@@ -42,19 +46,81 @@ export function kyroAdmin(options: KyroAdminOptions = {}): AstroIntegration {
           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,
+        // Load the user's config and expose it globally so that
+        // admin lib modules (config.ts, globals.ts) can access it
+        // without needing the kyro:config Vite alias during config loading.
+        // Load .env first since Vite hasn't processed it yet at this point
+        // in the lifecycle, and the config module evaluates eagerly.
+        // Use esbuild to transpile TS to ESM, then evaluate in a child
+        // process to completely bypass Vite's module runner interception.
+        let tmpFile = "";
+        try {
+          const envPath = path.join(path.dirname(resolvedConfig), ".env");
+          if (fs.existsSync(envPath)) {
+            loadDotEnv({ path: envPath });
+          }
+          const configContent = fs.readFileSync(resolvedConfig, "utf8");
+          const result = await transform(configContent, {
+            loader: "ts",
+            format: "esm",
+            target: "es2022",
+            sourcemap: false,
           });
+          // Write transpiled config alongside original so Node.js can
+          // resolve @kyro-cms/core from the project's node_modules
+          tmpFile = resolvedConfig.replace(/\.ts$/, ".admin.mjs");
+          fs.writeFileSync(tmpFile, result.code, "utf8");
+          // Evaluate in a child process to bypass Vite's module runner.
+          // Write a wrapper entrypoint that imports the config and prints JSON,
+          // then execute it with tsx (handles .ts resolution from .js imports).
+          const entryFile = tmpFile.replace(/\.admin\.mjs$/, ".admin-entry.mjs");
+          const resultFile = tmpFile.replace(/\.admin\.mjs$/, ".admin-result.json");
+          fs.writeFileSync(entryFile, `
+            import cfg from './${path.basename(tmpFile)}';
+            import fs from 'fs';
+            const data = { collections: cfg.default?.collections || cfg?.collections || [], globals: cfg.default?.globals || cfg?.globals || [] };
+            fs.writeFileSync('${path.basename(resultFile)}', JSON.stringify(data));
+          `, "utf8");
+          execSync(
+            `npx tsx "${entryFile}"`,
+            { cwd: path.dirname(resolvedConfig), encoding: "utf8", timeout: 15000, stdio: "pipe" },
+          );
+          const resultContent = fs.readFileSync(resultFile, "utf8");
+          const configModule = JSON.parse(resultContent);
+          try { fs.unlinkSync(resultFile); } catch {}
+          if (configModule.error) {
+            throw new Error(configModule.error);
+          }
+          (globalThis as any).__KYRO_ADMIN_PROJECT_CONFIG__ = {
+            collections: configModule.collections,
+            globals: configModule.globals,
+            adapter: configModule.adapter || null,
+          };
+          logger.info("Project config loaded for admin");
+        } catch (e: any) {
+          logger.warn(`Could not load project config: ${e.message}`);
+        } finally {
+          for (const suffix of [".admin.mjs", ".admin-entry.mjs", ".admin-result.json"]) {
+            const f = resolvedConfig.replace(/\.ts$/, suffix);
+            if (fs.existsSync(f)) { try { fs.unlinkSync(f); } catch { /* ignore */ } }
+          }
         }
 
+        // Set up Vite aliases and defines for runtime use
+        updateConfig({
+          vite: {
+            resolve: {
+              alias: {
+                "kyro:config": resolvedConfig,
+              },
+            },
+            define: {
+              __KYRO_ADMIN_PATH__: JSON.stringify(basePath),
+              __KYRO_API_PATH__: JSON.stringify(apiPath),
+            },
+          },
+        });
+
         // Inject Admin UI Routes
         const pages = [
           { pattern: "", entrypoint: "./pages/index.astro" },
@@ -104,20 +170,6 @@ export function kyroAdmin(options: KyroAdminOptions = {}): AstroIntegration {
             ),
           });
         }
-
-        updateConfig({
-          vite: {
-            resolve: {
-              alias: {
-                "kyro:config": resolvedConfig,
-              },
-            },
-            define: {
-              __KYRO_ADMIN_PATH__: JSON.stringify(basePath),
-              __KYRO_API_PATH__: JSON.stringify(apiPath),
-            },
-          },
-        });
       },
       "astro:build:done": ({ logger }) => {
         logger.info("Kyro Admin build complete");

package/src/layouts/AdminLayout.astro

@@ -14,7 +14,7 @@ interface Props {
 }
 
 const { title } = Astro.props;
-const siteSettings = await getSiteSettings();
+const siteSettings = await getSiteSettings({ request: Astro.request });
 const siteName = siteSettings?.siteName || "Kyro CMS";
 const siteFavicon = siteSettings?.siteFavicon;
 ---
@@ -25,38 +25,42 @@ const siteFavicon = siteSettings?.siteFavicon;
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <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
+      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 };
+      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' })
+            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');
+            console.log("[AdminLayout] No user in data, redirecting to login");
             window.location.href = adminPath + "/login";
             return;
           }
@@ -67,52 +71,70 @@ const siteFavicon = siteSettings?.siteFavicon;
           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 
-            } 
-          }));
+          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, '');
-            
+            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';
+            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) {
+              if (type === "collection" && permissions.collections) {
                 const p = permissions.collections[slug];
                 if (p && p.read === false) hasAccess = false;
-              } else if (type === 'global' && permissions.globals) {
+              } 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');
+                console.log(
+                  "[AdminLayout] Access denied for",
+                  slug,
+                  "redirecting to 403",
+                );
                 window.location.href = adminPath + "/403";
               }
             }
           }
         } catch (err) {
-          console.error('[AdminLayout] Auth check error:', err);
+          console.error("[AdminLayout] Auth check error:", err);
           window.location.href = adminPath + "/login";
         }
       })();
@@ -291,18 +313,18 @@ const siteFavicon = siteSettings?.siteFavicon;
 
       logoutBackdrop?.addEventListener("click", closeLogoutModal);
       logoutCancel?.addEventListener("click", closeLogoutModal);
-        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";
-          }
-        });
+      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/lib/config.ts

@@ -1,5 +1,4 @@
 import type { CollectionConfig, GlobalConfig } from "@kyro-cms/core/client";
-import projectConfig from "kyro:config";
 import {
   blogCollections,
   ecommerceCollections,
@@ -122,6 +121,12 @@ function createProjectAdminConfig(config: {
   };
 }
 
+// Default to kitchen-sink during module evaluation (config loading phase).
+// The real config is set later by the admin integration via globalThis.
+const global = globalThis as any;
+const projectConfig: { collections?: ConfigCollectionInput; globals?: ConfigGlobalInput } =
+  global.__KYRO_ADMIN_PROJECT_CONFIG__ || {};
+
 export const adminConfig = createProjectAdminConfig(projectConfig);
 export const collections = adminConfig.collections;
 export const globals = adminConfig.globals;