@kyro-cms/admin 0.9.0 → 0.9.1

package/src/hooks/useAutoFormState.ts

@@ -1,8 +1,11 @@
 import { useEffect, useRef, useCallback } from "react";
 import { useAutoFormStore } from "../lib/autoform-store";
+import { getLastChangeSource, setChangeSource } from "../lib/change-source";
 import { slugifyText } from "../lib/slugify";
 import { resolveUrl, fetchWithAuth } from "../lib/api";
+import { normalizeUploadFields } from "../lib/normalize-upload-fields";
 import { useUIStore } from "../lib/stores";
+import { resolveFieldValue } from "../lib/resolve-field-value";
 
 interface UseAutoFormStateProps {
   config: Record<string, unknown>;
@@ -24,7 +27,7 @@ export function useAutoFormState({
   onActionError,
 }: UseAutoFormStateProps) {
   const store = useAutoFormStore();
-  const { confirm, alert } = useUIStore();
+  const { confirm } = useUIStore();
   const {
     formData,
     setFormData,
@@ -43,12 +46,40 @@ export function useAutoFormState({
     getDraftCache,
     setDraftCache,
     clearDraftCache,
+    resetForm,
   } = store;
 
   const versionsEnabled = !!config.versions;
 
+  // Guard: clear stale formData from a previous page context.
+  // For collections, if the loaded document's id doesn't match the expected
+  // context key, the singleton zustand store is holding stale data.
+  // Globals have no id field and are singleton per slug, so skip this check.
+  // Must run in useEffect — calling resetForm() during render triggers
+  // "Cannot update a component while rendering" React error.
+  const currentContextKey = globalSlug || (initialData?.id as string | undefined) || collectionSlug;
+  const needsResetRef = useRef(false);
+  if (
+    !globalSlug &&
+    currentContextKey &&
+    formData &&
+    Object.keys(formData).length > 0 &&
+    formData.id !== currentContextKey
+  ) {
+    needsResetRef.current = true;
+  }
+
+  useEffect(() => {
+    if (needsResetRef.current) {
+      needsResetRef.current = false;
+      resetForm();
+    }
+  }, [resetForm]);
+
   const localSaveTimerRef = useRef<NodeJS.Timeout | null>(null);
   const serverSaveTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const retryTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const isOnlineRef = useRef(typeof navigator !== 'undefined' ? navigator.onLine : true);
   const lastAutoSaveTimeRef = useRef<number>(0);
   const autoSaveSkipRef = useRef<boolean>(false);
   const restorePromptedRef = useRef<string | null>(null);
@@ -125,9 +156,8 @@ const persistBrowserDraft = useCallback(
   const performLocalAutoSave = useCallback(() => {
     const state = useAutoFormStore.getState();
     const latestFormData = state.formData;
-    const currentLastSaved = state.lastSavedData;
     if (autoSaveSkipRef.current || !collectionSlug || !latestFormData.id) return;
-    if (JSON.stringify(latestFormData) === JSON.stringify(currentLastSaved)) return;
+    if (!state.hasDirtyFields()) return;
     const documentKey = getDocumentKey(latestFormData.id);
     if (documentKey) {
       persistBrowserDraft(documentKey, latestFormData);
@@ -141,13 +171,18 @@ const persistBrowserDraft = useCallback(
     
     if (autoSaveSkipRef.current || (!versionsEnabled && !!globalSlug)) return;
     if (!globalSlug && (!collectionSlug || !latestFormData.id)) return;
-    if (JSON.stringify(latestFormData) === JSON.stringify(currentLastSaved)) return;
+    if (!state.hasDirtyFields()) return;
     
     const documentKey = getDocumentKey(latestFormData.id);
     if (documentKey) {
       persistBrowserDraft(documentKey, latestFormData);
     }
 
+    if (!isOnlineRef.current) {
+      setAutoSaveStatus("offline");
+      return;
+    }
+
     setIsAutoSaving(true);
     setAutoSaveStatus("saving");
 
@@ -157,14 +192,20 @@ const persistBrowserDraft = useCallback(
         ? resolveUrl(`/api/globals/${globalSlug}/draft`)
         : resolveUrl(`/api/${collectionSlug}/${latestFormData.id}/draft`);
 
+      const delta = state.getDirtyData();
+      const idempotencyKey = `${documentKey || "global"}:${Date.now()}`;
+
       const response = await fetchWithAuth(
         draftUrl,
         {
           method: "PUT",
-          headers: { "Content-Type": "application/json" },
+          headers: { 
+            "Content-Type": "application/json",
+            "X-Idempotency-Key": idempotencyKey
+          },
           keepalive: options?.keepalive,
           body: JSON.stringify({
-            data: latestFormData,
+            delta: normalizeUploadFields(delta),
             baseUpdatedAt: currentLastSaved.updatedAt ?? null,
             draftUpdatedAt,
           }),
@@ -174,6 +215,10 @@ const persistBrowserDraft = useCallback(
       if (response.ok) {
         const result = await response.json();
         lastAutoSaveTimeRef.current = Date.now();
+        state.setRetryCount(0);
+        state.setLastSavedAt(Date.now());
+        if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
+        
         if (documentKey) {
           setDraftCache(documentKey, {
             data: latestFormData,
@@ -183,27 +228,39 @@ const persistBrowserDraft = useCallback(
           });
         }
         setAutoSaveStatus("success");
-        setTimeout(() => setAutoSaveStatus("idle"), 2000);
+        setTimeout(() => {
+           if (useAutoFormStore.getState().autoSaveStatus === "success") {
+             setAutoSaveStatus("idle");
+           }
+        }, 2000);
       } else {
-        const error = await response.json().catch(() => ({}));
-        console.error("Draft auto-save failed:", error);
-        setAutoSaveStatus("error");
-        setTimeout(() => setAutoSaveStatus("idle"), 5000);
+        throw new Error(`Draft auto-save failed with status ${response.status}`);
       }
     } catch (err) {
       console.error("Auto-save failed:", err);
-      setAutoSaveStatus("error");
-      setTimeout(() => setAutoSaveStatus("idle"), 5000);
+      const state = useAutoFormStore.getState();
+      const currentRetryCount = state.retryCount;
+      if (currentRetryCount < 5) {
+        state.setRetryCount(currentRetryCount + 1);
+        setAutoSaveStatus("retrying");
+        const delay = Math.min(1000 * Math.pow(2, currentRetryCount), 60000);
+        if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
+        retryTimerRef.current = setTimeout(() => performServerAutoSave(options), delay);
+      } else {
+        setAutoSaveStatus("offline");
+      }
     } finally {
       setIsAutoSaving(false);
     }
   }, [
     collectionSlug,
     getDocumentKey,
+    globalSlug,
     persistBrowserDraft,
     setAutoSaveStatus,
     setDraftCache,
     setIsAutoSaving,
+    versionsEnabled
   ]);
 
 const saveDocument = useCallback(
@@ -221,7 +278,7 @@ const saveDocument = useCallback(
           method: "PATCH",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
-            ...payload,
+            ...normalizeUploadFields(payload) as Record<string, unknown>,
             baseUpdatedAt: state.lastSavedData.updatedAt ?? null,
           }),
         },
@@ -285,11 +342,7 @@ const saveDocument = useCallback(
     return () => window.removeEventListener("toggle-sidebar", handleToggle);
   }, [sidebarCollapsed, setSidebarCollapsed]);
 
-  // Track unsaved changes
-  useEffect(() => {
-    const isDifferent = JSON.stringify(formData) !== JSON.stringify(lastSavedData);
-    setHasUnsavedChanges(isDifferent);
-  }, [formData, lastSavedData, setHasUnsavedChanges]);
+  // Track unsaved changes (handled by setField / dirtyFields now)
 
   // Initial data load
   const lastLoadedSlugRef = useRef<string | null>(null);
@@ -298,11 +351,10 @@ const saveDocument = useCallback(
     const currentSlug = globalSlug || initialData?.id;
     if (initialDataLoadedRef.current && lastLoadedSlugRef.current === currentSlug) return;
 
-    setFormData(initialData || {});
     loadDocument(initialData || {}, initialData || {});
     initialDataLoadedRef.current = true;
     lastLoadedSlugRef.current = currentSlug;
-  }, [formData.id, globalSlug, initialData, loadDocument, setFormData]);
+  }, [collectionSlug, formData.id, globalSlug, initialData, loadDocument]);
 
   useEffect(() => {
     if (!collectionSlug || !initialData?.id) return;
@@ -356,7 +408,9 @@ const drafts = [browserDraft, serverDraft].filter(Boolean) as Array<{
         cancelLabel: "Discard draft",
         onConfirm: async () => {
           if (cancelled) return;
-          setFormData(candidate.data);
+          const currentFormData = useAutoFormStore.getState().formData;
+          const mergedData = { ...currentFormData, ...candidate.data };
+          setFormData(mergedData);
           onActionSuccess?.("Recovered autosaved draft");
         },
         onCancel: async () => {
@@ -409,45 +463,28 @@ const drafts = [browserDraft, serverDraft].filter(Boolean) as Array<{
 
   // Auto-generate metaTitle
   useEffect(() => {
-    const metaTitleField = findFieldDeep(config.fields, "metaTitle");
+    const fields = config.fields as Record<string, unknown>[];
+    const metaTitleField = findFieldDeep(fields, "metaTitle");
     if (!metaTitleField) return;
 
-    let titleValue = "";
-    for (const field of config.fields) {
-      if (field.type === "tabs" && "tabs" in field && field.name) {
-        const tabData = formData[field.name as string];
-        if (tabData && typeof tabData === "object" && tabData.title) {
-          titleValue = tabData.title;
-          break;
-        }
-      }
-    }
+    const titleValue = resolveFieldValue(fields, formData, "title");
+    const titleStr = titleValue ? String(titleValue) : "";
 
-    if (titleValue && (!formData.metaTitle || formData.metaTitle === formData._lastMetaTitle)) {
-      setField("metaTitle", titleValue);
+    if (titleStr && (!formData.metaTitle || formData.metaTitle === formData._lastMetaTitle)) {
+      setField("metaTitle", titleStr);
     }
   }, [formData, config.fields, setField]);
 
   // Auto-generate slug
   useEffect(() => {
-const slugField = config.fields.find(
-       (f: Record<string, unknown>) => f.name === "slug" && f.admin?.autoGenerate,
-     );
+    const fields = config.fields as Record<string, unknown>[];
+    const slugField = fields.find(
+      (f: Record<string, unknown>) => f.name === "slug" && f.admin?.autoGenerate,
+    );
     if (!slugField?.admin?.autoGenerate) return;
     const sourceField: string = slugField.admin.autoGenerate;
 
-    let sourceValue = formData[sourceField];
-    if (!sourceValue) {
-      for (const field of config.fields) {
-        if (field.type === "tabs" && "tabs" in field && field.name) {
-          const tabData = formData[field.name as string];
-          if (tabData && typeof tabData === "object" && tabData[sourceField]) {
-            sourceValue = tabData[sourceField];
-            break;
-          }
-        }
-      }
-    }
+    const sourceValue = resolveFieldValue(fields, formData, sourceField);
 
     if (isSlugLocked && sourceValue) {
       const newSlug = slugifyText(sourceValue);
@@ -457,21 +494,28 @@ const slugField = config.fields.find(
     }
   }, [formData, isSlugLocked, config.fields, setField]);
 
-  // Auto-save effect (Split-timer: 1.5s local, 10s server)
+  // Auto-save effect — only starts timers on keystroke-originated changes.
+  // Local save fires after 1.5s of inactivity, server save after 8s.
+  // Non-keystroke changes (block add/drag, select, checkbox, etc.) do NOT restart auto-save.
   useEffect(() => {
     if (sidebarCollapsed) return;
     if (!globalSlug && (!collectionSlug || !formData.id)) return;
 
+    const state = useAutoFormStore.getState();
+    if (!state.hasDirtyFields()) return;
+
+    // Only schedule/reschedule on keystroke-originated changes
+    if (getLastChangeSource() !== "keystroke") return;
+
+    // Reset source so subsequent non-keystroke changes don't re-schedule
+    setChangeSource("other");
+
+    // Clear existing timers and start fresh
     if (localSaveTimerRef.current) clearTimeout(localSaveTimerRef.current);
     if (serverSaveTimerRef.current) clearTimeout(serverSaveTimerRef.current);
 
     localSaveTimerRef.current = setTimeout(performLocalAutoSave, 1500);
-    serverSaveTimerRef.current = setTimeout(performServerAutoSave, 10000);
-
-    return () => {
-      if (localSaveTimerRef.current) clearTimeout(localSaveTimerRef.current);
-      if (serverSaveTimerRef.current) clearTimeout(serverSaveTimerRef.current);
-    };
+    serverSaveTimerRef.current = setTimeout(performServerAutoSave, 8000);
   }, [formData, sidebarCollapsed, collectionSlug, globalSlug, performLocalAutoSave, performServerAutoSave]);
 
   useEffect(() => {
@@ -479,6 +523,9 @@ const slugField = config.fields.find(
 
     const flushDraft = () => {
       if (autoSaveSkipRef.current) return;
+      const state = useAutoFormStore.getState();
+      // Only flush if there are actual unsaved changes
+      if (!state.hasDirtyFields()) return;
       void performServerAutoSave({ keepalive: true });
     };
 
@@ -488,13 +535,30 @@ const slugField = config.fields.find(
       }
     };
 
+    const handleOnline = () => {
+      isOnlineRef.current = true;
+      flushDraft();
+    };
+
+    const handleOffline = () => {
+      isOnlineRef.current = false;
+      const state = useAutoFormStore.getState();
+      if (state.hasDirtyFields()) {
+         state.setAutoSaveStatus("offline");
+      }
+    };
+
     window.addEventListener("blur", flushDraft);
     window.addEventListener("pagehide", flushDraft);
+    window.addEventListener("online", handleOnline);
+    window.addEventListener("offline", handleOffline);
     document.addEventListener("visibilitychange", handleVisibilityChange);
 
     return () => {
       window.removeEventListener("blur", flushDraft);
       window.removeEventListener("pagehide", flushDraft);
+      window.removeEventListener("online", handleOnline);
+      window.removeEventListener("offline", handleOffline);
       document.removeEventListener("visibilitychange", handleVisibilityChange);
     };
   }, [collectionSlug, globalSlug, formData.id, performServerAutoSave]);
@@ -515,15 +579,15 @@ const slugField = config.fields.find(
 
   // Derived status values the UI can use for badges and button state
   const documentStatus: 'draft' | 'published' | 'archived' | undefined = (() => {
-    if (!versionsEnabled) return 'published';
     if (!formData.id && !globalSlug) return 'draft';
+    if (!versionsEnabled) return 'published';
     // If it has a pending draft version, effectively it's in a draft state for the editor
-    if (formData._has_draft) return 'draft';
-    return formData._status || 'published';
+    if (formData.hasDraft) return 'draft';
+    return formData.publishStatus || 'published';
   })();
 
   const hasUnpublishedChanges =
-    (!!formData.id || !!globalSlug) && (documentStatus !== 'published' || !!formData._has_draft);
+    (!!formData.id || !!globalSlug) && (documentStatus !== 'published' || !!formData.hasDraft);
 
   return {
     ...store,
@@ -535,7 +599,6 @@ const slugField = config.fields.find(
     clearDraftArtifacts,
     autoSaveSkipRef,
     lastAutoSaveTimeRef,
-    alert,
     documentStatus,
     hasUnpublishedChanges,
     versionsEnabled,

package/src/integration.ts

@@ -1,10 +1,14 @@
 import type { AstroIntegration } from "astro";
 import path from "path";
 import fs from "fs";
-import { execSync } from "child_process";
 import { pathToFileURL } from "url";
+import { build } from "esbuild";
 import { config as loadDotEnv } from "dotenv";
-import { transform } from "esbuild";
+import { Worker } from "worker_threads";
+
+const _shimDir = path.resolve(new URL(".", import.meta.url).pathname, "lib/shim");
+const _shimUses = path.join(_shimDir, "use-sync-external-store.js");
+const _shimUsesWs = path.join(_shimDir, "use-sync-external-store-with-selector.js");
 
 export interface KyroAdminOptions {
   basePath?: string;
@@ -46,81 +50,178 @@ export function kyroAdmin(options: KyroAdminOptions = {}): AstroIntegration {
           logger.warn(`Config file not found. Using defaults.`);
         }
 
-        // 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.
+        // Transpile the user's config and write a serialized JSON copy.
+        // The JSON path is injected via Vite's define so the admin can read it reliably.
+        const configFile = path.join(path.dirname(resolvedConfig), ".kyro-admin-config.json");
         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",
+          const result = await build({
+            entryPoints: [resolvedConfig],
+            bundle: true,
             format: "esm",
+            platform: "node",
             target: "es2022",
+            write: false,
             sourcemap: false,
+            loader: { '.ts': 'ts', '.tsx': 'tsx' },
+            resolveExtensions: ['.ts', '.tsx', '.js', '.jsx', '.mjs', '.cjs', '.json'],
+            external: ['@kyro-cms/*'],
           });
-          // 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);
+          fs.writeFileSync(tmpFile, result.outputFiles[0].text, "utf8");
+
+          // Use a Worker thread to load the config in an isolated context.
+          const workerCode = `
+            import { parentPort } from 'worker_threads';
+            import('${pathToFileURL(tmpFile).href}').then(mod => {
+              const cfg = mod.default || mod;
+              const serialize = (obj) => {
+                if (obj === null || obj === undefined) return obj;
+                if (typeof obj === 'function') return undefined;
+                if (Array.isArray(obj)) return obj.map(serialize);
+                if (typeof obj === 'object') {
+                  const result = {};
+                  for (const [k, v] of Object.entries(obj)) {
+                    const sv = serialize(v);
+                    if (sv !== undefined) result[k] = sv;
+                  }
+                  return result;
+                }
+                return obj;
+              };
+              parentPort.postMessage({
+                collections: serialize(cfg?.collections) || [],
+                globals: serialize(cfg?.globals) || [],
+                collectionOverrides: serialize(cfg?.admin?.collectionOverrides) || {},
+              });
+            }).catch(err => {
+              parentPort.postMessage({ error: err.message });
+            });
+          `;
+          const worker = new Worker(workerCode, { eval: true, env: { ...process.env, NODE_OPTIONS: '' } });
+          const configResult = await new Promise<any>((resolve, reject) => {
+            worker.on("message", resolve);
+            worker.on("error", reject);
+            const timer = setTimeout(() => {
+              worker.terminate();
+              reject(new Error("Config loading timed out"));
+            }, 30000);
+          });
+          worker.terminate();
+
+          if (configResult.error) {
+            throw new Error(configResult.error);
           }
-          (globalThis as any).__KYRO_ADMIN_PROJECT_CONFIG__ = {
-            collections: configModule.collections,
-            globals: configModule.globals,
-            adapter: configModule.adapter || null,
-          };
+          fs.writeFileSync(configFile, JSON.stringify(configResult, null, 2), "utf8");
           logger.info("Project config loaded for admin");
         } catch (e: any) {
-          logger.warn(`Could not load project config: ${e.message}`);
+          logger.error(`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 */ } }
-          }
+          if (tmpFile && fs.existsSync(tmpFile)) { try { fs.unlinkSync(tmpFile); } catch { /* ignore */ } }
         }
 
-        // Set up Vite aliases and defines for runtime use
+        // Set up Vite aliases, defines, and plugins for runtime use
         updateConfig({
           vite: {
+            plugins: [
+              {
+                name: "kyro-admin-tsx-loader",
+                enforce: "pre" as const,
+                config(_config: any) {
+                  const existingEsbuild = _config.esbuild;
+                  const existingExclude = existingEsbuild?.exclude;
+                  const adminInclude = /\/node_modules\/(?!.*@kyro-cms\/(admin|core))/;
+                  return {
+                    esbuild: {
+                      ...(existingEsbuild || {}),
+                      exclude: existingExclude
+                        ? Array.isArray(existingExclude)
+                          ? [...existingExclude, adminInclude]
+                          : [existingExclude, adminInclude]
+                        : adminInclude,
+                    },
+                  };
+                },
+              },
+              {
+                name: "kyro-cjs-shim",
+                enforce: "pre" as const,
+                resolveId(id: string) {
+                  if (id.includes('react/compiler-runtime')) {
+                    return "\0react-compiler-runtime";
+                  }
+                  if (id === 'debug' || id.includes('debug/src/browser.js')) {
+                    return "\0debug-browser";
+                  }
+                },
+                load(id: string) {
+                  if (id === "\0react-compiler-runtime") {
+                    return `
+import React from "react";
+export function c(size) {
+  const internals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+  if (!internals || !internals.H) {
+    return new Array(size);
+  }
+  return internals.H.useMemoCache(size);
+}
+`;
+                  }
+                  if (id === "\0debug-browser") {
+                    return `
+function debug(namespace) {
+  function d(...args) {
+    if (typeof localStorage !== "undefined" && localStorage.getItem("DEBUG")) {
+      console.log(namespace, ...args);
+    }
+  }
+  d.enabled = false;
+  return d;
+}
+debug.enable = function() {};
+debug.disable = function() {};
+debug.enabled = function() { return false; };
+export default debug;
+`;
+                  }
+                },
+              },
+            ],
             resolve: {
               alias: {
                 "kyro:config": resolvedConfig,
               },
             },
+            optimizeDeps: {
+              include: [
+                'use-sync-external-store',
+              ],
+              exclude: ['debug', 'react/compiler-runtime'],
+            },
             define: {
               __KYRO_ADMIN_PATH__: JSON.stringify(basePath),
               __KYRO_API_PATH__: JSON.stringify(apiPath),
+              __KYRO_ADMIN_CONFIG_FILE__: JSON.stringify(configFile),
+            },
+            ssr: {
+              noExternal: ['@kyro-cms/admin', '@kyro-cms/core'],
             },
           },
         });
 
+        // Load the user's config at runtime via the kyro:config alias.
+        // We set a placeholder here; the actual config is loaded by
+        // admin/lib/config.ts via dynamic import of kyro:config.
+        (globalThis as any).__KYRO_ADMIN_PROJECT_CONFIG__ = {
+          collections: [],
+          globals: [],
+          adapter: null,
+        };
+
         // Inject Admin UI Routes
         const pages = [
           { pattern: "", entrypoint: "./pages/index.astro" },
@@ -128,6 +229,7 @@ export function kyroAdmin(options: KyroAdminOptions = {}): AstroIntegration {
           { pattern: "/register", entrypoint: "./pages/auth/register.astro" },
           { pattern: "/media", entrypoint: "./pages/media.astro" },
           { pattern: "/users", entrypoint: "./pages/users/index.astro" },
+          { pattern: "/users/new", entrypoint: "./pages/users/new.astro" },
           { pattern: "/users/[id]", entrypoint: "./pages/users/[id].astro" },
           { pattern: "/roles", entrypoint: "./pages/roles/index.astro" },
           { pattern: "/settings", entrypoint: "./pages/settings/index.astro" },

package/src/kyro-cms.d.ts

@@ -57,7 +57,7 @@ admin?: {
   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 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' }
@@ -208,4 +208,9 @@ declare module 'kyro:config' {
   import type { KyroConfig } from '@kyro-cms/core';
   const config: KyroConfig;
   export default config;
-}
+}
+
+// Injected by Vite's define config during admin integration setup
+declare const __KYRO_ADMIN_CONFIG_FILE__: string;
+declare const __KYRO_ADMIN_PATH__: string;
+declare const __KYRO_API_PATH__: string;

package/src/layouts/AuthLayout.astro

@@ -49,10 +49,22 @@ const { title } = Astro.props;
       <div class="w-full max-w-md flex flex-col items-center">
         <!-- Logo -->
         <div class="w-full text-center mb-8">
-          <a href="/" class="inline-block">
+          <a href="/" class="inline-flex items-center justify-center gap-2">
+            <svg class="w-7 h-7 text-[var(--kyro-text-primary)]" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+              <defs>
+                <mask id="kyro-cutout-auth">
+                  <rect width="100" height="100" fill="white" />
+                  <path d="M 40 89.72 L 40 40 L 89.72 40 A 45 45 0 0 1 40 89.72 Z" stroke="black" stroke-width="8" fill="none" />
+                </mask>
+              </defs>
+              <g mask="url(#kyro-cutout-auth)" fill="currentColor">
+                <circle cx="45" cy="45" r="45" />
+                <rect x="40" y="40" width="60" height="60" />
+              </g>
+            </svg>
             <span
               class="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]"
-              >KYRO.</span
+              >Kyro CMS</span
             >
           </a>
         </div>