@kyro-cms/admin 0.3.2 → 0.3.5

package/src/components/AutoForm.tsx

@@ -5,6 +5,8 @@ import type {
   Field,
   Block,
 } from "@kyro-cms/core/client";
+
+type View = "edit" | "version" | "api";
 import { UploadField } from "./fields/UploadField";
 import { CodeField } from "./fields";
 import NumberField from "./fields/NumberField";
@@ -12,18 +14,31 @@ import CheckboxField from "./fields/CheckboxField";
 import SelectField from "./fields/SelectField";
 import DateField from "./fields/DateField";
 import { MarkdownField } from "./fields/MarkdownField";
+import TextField from "./fields/TextField";
 import { globals, collections } from "../lib/config";
 import { slugifyText } from "../lib/slugify";
+import { resolveUrl, apiDelete, fetchWithAuth } from "../lib/api";
+import { useAutoFormStore } from "../lib/autoform-store";
+import { useAutoFormState } from "../hooks/useAutoFormState";
+import { useUIStore } from "../lib/stores";
+
+import { adminPath as ADMIN_BASE, apiPath as API_BASE } from "../lib/paths";
 
 import { BlocksField } from "./fields/BlocksField";
 import PortableTextField from "./fields/PortableTextField";
 import { ConfirmModal, Modal as UIModal } from "./ui/Modal";
+import { ListField } from "./fields/ListField";
+import { RelationshipBlockField } from "./fields/RelationshipBlockField";
+import { FieldRenderer } from "./FieldRenderer";
+import { TabsLayout } from "./fields/TabsLayout";
+import { GroupLayout } from "./fields/GroupLayout";
+import { ArrayLayout } from "./fields/ArrayLayout";
 
 interface AutoFormProps {
   config: CollectionConfig | GlobalConfig;
-  data?: Record<string, any>;
+  data?: Record<string, unknown>;
   errors?: Record<string, string>;
-  onChange?: (data: Record<string, any>) => void;
+  onChange?: (data: Record<string, unknown>) => void;
   disabled?: boolean;
   collectionSlug?: string;
   globalSlug?: string;
@@ -31,8 +46,8 @@ interface AutoFormProps {
   layout?: "split" | "single";
   onActionSuccess?: (message: string) => void;
   onActionError?: (message: string) => void;
-  documentStatus?: "draft" | "published" | "scheduled" | "archived";
   justSaved?: boolean;
+  documentStatus?: string;
 }
 
 export function AutoForm({
@@ -47,7 +62,6 @@ export function AutoForm({
   layout = "split",
   onActionSuccess,
   onActionError,
-  documentStatus,
   justSaved,
 }: AutoFormProps) {
   // Resolve the "live" config to preserve functions (admin.condition) lost during prop serialization
@@ -58,321 +72,117 @@ export function AutoForm({
       : propConfig;
   const config = activeConfig || propConfig;
 
-  // Helper to extract default values from config recursively
-  function getDefaults(fields: any[], prefix = ""): Record<string, any> {
-    const defaults: Record<string, any> = {};
-    for (const field of fields || []) {
-      if (field.defaultValue !== undefined) {
-        const key = prefix + field.name;
-        defaults[key] = field.defaultValue;
-        // Also set nested defaults for groups
-        if (field.type === "group" && field.fields) {
-          for (const subField of field.fields) {
-            if (subField.defaultValue !== undefined) {
-              defaults[prefix + field.name + "." + subField.name] =
-                subField.defaultValue;
-            }
-          }
-        }
-      }
-      if (field.fields && Array.isArray(field.fields)) {
-        Object.assign(defaults, getDefaults(field.fields, field.name + "."));
-      }
-      if (field.tabs) {
-        for (const tab of field.tabs) {
-          if (tab.fields) {
-            Object.assign(defaults, getDefaults(tab.fields, prefix));
-          }
-        }
-      }
-    }
-    return defaults;
-  }
-
-  // Helper to flatten nested object with dot notation keys
-  function flattenObject(
-    obj: Record<string, any>,
-    prefix = "",
-  ): Record<string, any> {
-    const result: Record<string, any> = {};
-    for (const key in obj) {
-      const newKey = prefix ? `${prefix}.${key}` : key;
-      const val = obj[key];
-      if (
-        val !== null &&
-        typeof val === "object" &&
-        !Array.isArray(val) &&
-        // Only recurse into plain objects, not Dates, Maps, or other class instances
-        (val.constructor === Object || !val.constructor)
-      ) {
-        Object.assign(result, flattenObject(val, newKey));
-      } else {
-        result[newKey] = val;
-      }
-    }
-    return result;
-  }
-
-  // Helper to unflatten dot notation keys back to nested object
-  function unflattenObject(flat: Record<string, any>): Record<string, any> {
-    const result: Record<string, any> = {};
-    for (const key in flat) {
-      const parts = key.split(".");
-      let current = result;
-      for (let i = 0; i < parts.length - 1; i++) {
-        if (!current[parts[i]]) {
-          current[parts[i]] = {};
-        }
-        current = current[parts[i]];
-      }
-      current[parts[parts.length - 1]] = flat[key];
-    }
-    return result;
-  }
-
-  // Merge initial data with defaults from config
-  const [formData, setFormData] = useState<Record<string, any>>({});
-
-  useEffect(() => {
-    try {
-      const configDefaults = config ? getDefaults(config.fields) : {};
-      const flatInitialData = flattenObject(initialData || {});
-      const mergedFlatData = { ...configDefaults, ...flatInitialData };
-      const mergedInitialData = unflattenObject(mergedFlatData);
-      setFormData(mergedInitialData);
-    } catch (e) {
-      console.error("Critical error in AutoForm data initialization:", e);
-      // Fallback to raw initialData if flattening fails
-      setFormData(initialData || {});
-    }
-  }, [initialData, config]);
-  const [activeTab, setActiveTab] = useState(0);
-  const [isSlugLocked, setIsSlugLocked] = useState(true);
-  const [view, setView] = useState<"edit" | "version" | "api">("edit");
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const [versions, setVersions] = useState<any[]>([]);
-  const [loadingVersions, setLoadingVersions] = useState(false);
-  const [showPreview, setShowPreview] = useState(false);
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
-  const [loadingFields, setLoadingFields] = useState<Record<string, boolean>>(
-    {},
-  );
-  const menuRef = useRef<HTMLDivElement>(null);
-  const [compareMode, setCompareMode] = useState(false);
-  const [compareSelected, setCompareSelected] = useState<string[]>([]);
-  const [compareDiffs, setCompareDiffs] = useState<any[]>([]);
-  const [loadingDiffs, setLoadingDiffs] = useState(false);
-  const [confirmModal, setConfirmModal] = useState<{
-    open: boolean;
-    title: string;
-    message: string;
-    onConfirm: () => void;
-    danger?: boolean;
-  }>({ open: false, title: "", message: "", onConfirm: () => {} });
-  const [alertModal, setAlertModal] = useState<{
-    open: boolean;
-    title: string;
-    message: string;
-  }>({ open: false, title: "", message: "" });
-  const [lastSavedData, setLastSavedData] = useState<Record<string, any>>({});
-  const [isAutoSaving, setIsAutoSaving] = useState(false);
-  const [autoSaveStatus, setAutoSaveStatus] = useState<
-    "idle" | "saving" | "saved" | "error"
-  >("idle");
-  const autoSaveTimerRef = useRef<NodeJS.Timeout | null>(null);
-  const lastAutoSaveTimeRef = useRef<number>(0);
-  const autoSaveSkipRef = useRef<boolean>(false);
 
-  const disabled = propDisabled;
+  const { confirm, alert } = useUIStore();
 
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
-
-  useEffect(() => {
-    const handleToggle = () => {
-      setSidebarCollapsed((prev) => !prev);
-    };
-    window.addEventListener("toggle-sidebar", handleToggle);
-    return () => window.removeEventListener("toggle-sidebar", handleToggle);
-  }, []);
-
-  // Track unsaved changes (compare against last saved state)
-  useEffect(() => {
-    const isDifferent =
-      JSON.stringify(formData) !== JSON.stringify(lastSavedData);
-    setHasUnsavedChanges(isDifferent);
-  }, [formData, lastSavedData]);
-
-  // Auto-generate slug from configured source field if locked
-  useEffect(() => {
-    const slugField = config.fields.find(
-      (f: any) => f.name === "slug" && f.admin?.autoGenerate,
-    );
-    if (!slugField?.admin?.autoGenerate) return;
-    const sourceField: string = slugField.admin.autoGenerate;
-    if (isSlugLocked && formData[sourceField]) {
-      const newSlug = slugifyText(formData[sourceField]);
-      if (newSlug !== formData.slug) {
-        setFormData((prev) => ({ ...prev, slug: newSlug }));
-      }
-    }
-  }, [
-    formData.title,
-    formData.name,
-    formData.label,
+  const {
+    formData,
+    lastSavedData,
+    hasUnsavedChanges,
+    isAutoSaving,
+    autoSaveStatus,
+    sidebarCollapsed,
+    setSidebarCollapsed,
+    activeTab,
+    setActiveTab,
     isSlugLocked,
-    config.fields,
-  ]);
-
-  // Sync prop changes to local state
-  useEffect(() => {
-    if (initialData && Object.keys(initialData).length > 0) {
-      setFormData(initialData);
-      setLastSavedData(initialData);
-    }
-  }, [initialData]);
-
-  // Auto-save with Strategy 3: 1s debounce, lastSavedData comparison, 15s hard throttle
-  useEffect(() => {
-    if (!formData.id || sidebarCollapsed) return;
-
-    if (autoSaveTimerRef.current) {
-      clearTimeout(autoSaveTimerRef.current);
-    }
-
-    const now = Date.now();
-    const timeSinceLastSave = now - lastAutoSaveTimeRef.current;
-    const hasChanges =
-      JSON.stringify(formData) !== JSON.stringify(lastSavedData);
-
-    if (!hasChanges) {
-      setAutoSaveStatus("idle");
-      return;
-    }
-
-    if (timeSinceLastSave < 15000 && lastAutoSaveTimeRef.current > 0) {
-      const remainingTime = Math.max(1000, 15000 - timeSinceLastSave);
-      autoSaveTimerRef.current = setTimeout(async () => {
-        await performAutoSave();
-      }, remainingTime);
-    } else {
-      autoSaveTimerRef.current = setTimeout(async () => {
-        await performAutoSave();
-      }, 1000);
-    }
-
-    return () => {
-      if (autoSaveTimerRef.current) {
-        clearTimeout(autoSaveTimerRef.current);
-      }
-    };
-  }, [formData]);
+    setIsSlugLocked,
+    view,
+    setView,
+    isDropdownOpen,
+    setIsDropdownOpen,
+    versions,
+    loadingVersions,
+    showPreview,
+    setShowPreview,
+    isMenuOpen,
+    setIsMenuOpen,
+    loadingFields,
+    setLoadingFields,
+    compareMode,
+    setCompareMode,
+    compareSelected,
+    setCompareSelected,
+    compareDiffs,
+    setCompareDiffs,
+    loadingDiffs,
+    setLoadingDiffs,
+    setField,
+    setFormData,
+    markSaved,
+    setLastSavedData,
+    setAutoSaveStatus,
+    fetchVersions,
+    saveDocument,
+    publishDocument,
+    clearDraftArtifacts,
+    autoSaveSkipRef,
+    lastAutoSaveTimeRef,
+    documentStatus,
+    hasUnpublishedChanges,
+    versionsEnabled,
+  } = useAutoFormState({
+    config,
+    initialData,
+    collectionSlug,
+    globalSlug,
+    onChange,
+    onActionSuccess,
+    onActionError,
+  });
 
-  const performAutoSave = async () => {
-    if (autoSaveSkipRef.current) return;
-    if (JSON.stringify(formData) === JSON.stringify(lastSavedData)) return;
-
-    setIsAutoSaving(true);
-    setAutoSaveStatus("saving");
-
-    try {
-      const { id, createdAt, updatedAt, ...rest } = formData;
-      const saveData = {
-        ...rest,
-        _changeDescription: "Auto-saved",
-        status: formData.status === "published" ? "draft" : formData.status,
-      };
-
-      const response = await fetch(`/api/${collectionSlug}/${formData.id}`, {
-        method: "PATCH",
-        credentials: "include",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(saveData),
-      });
-
-      if (response.ok) {
-        const result = await response.json();
-        setLastSavedData(result.data || formData);
-        lastAutoSaveTimeRef.current = Date.now();
-        setAutoSaveStatus("saved");
-        fetchVersions();
-        setTimeout(() => setAutoSaveStatus("idle"), 2000);
-      } else {
-        setAutoSaveStatus("error");
-        setTimeout(() => setAutoSaveStatus("idle"), 3000);
-      }
-    } catch (err) {
-      console.error("Auto-save failed:", err);
-      setAutoSaveStatus("error");
-      setTimeout(() => setAutoSaveStatus("idle"), 3000);
-    } finally {
-      setIsAutoSaving(false);
-    }
-  };
-
-  // Sync to hidden input for Astro form submission
-  useEffect(() => {
-    const hiddenInput = document.getElementById(
-      "form-data",
-    ) as HTMLInputElement;
-    if (hiddenInput) {
-      hiddenInput.value = JSON.stringify(formData);
-    }
-    onChange?.(formData);
-  }, [formData, onChange]);
-
-  useEffect(() => {
-    if (formData.id) fetchVersions();
-  }, [formData.id]);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const disabled = propDisabled;
 
-  const fetchVersions = async () => {
-    setLoadingVersions(true);
-    try {
-      const resp = await fetch(
-        `/api/${collectionSlug}/${formData.id}/versions`,
-      );
-      const data = await resp.json();
-      setVersions(data.docs || []);
-    } catch (e) {
-      console.error("Failed to fetch versions:", e);
-    } finally {
-      setLoadingVersions(false);
-    }
-  };
+  const handleRestoreVersion = (versionId: string) => {
+    confirm({
+      title: "Restore Version",
+      message: "Are you sure you want to restore this version? This will overwrite your current changes.",
+      onConfirm: async () => {
+        try {
+          const url = globalSlug
+            ? resolveUrl(`/api/globals/${globalSlug}/versions/${versionId}/restore`)
+            : resolveUrl(`/api/${collectionSlug}/${formData.id}/versions/${versionId}/restore`);
+
+          // Try RESTful URL first
+          let resp = await fetchWithAuth(url, { method: "POST" });
+
+          // Fallback to legacy action-based URL for Collections if needed
+          if (!resp.ok && collectionSlug) {
+            resp = await fetchWithAuth(
+              resolveUrl(`/api/${collectionSlug}/${formData.id}/versions`),
+              {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ versionId, action: "restore" }),
+              },
+            );
+          }
 
-  const handleRestoreVersion = async (versionId: string) => {
-    if (
-      !confirm(
-        "Are you sure you want to restore this version? This will overwrite your current changes.",
-      )
-    )
-      return;
-    try {
-      const resp = await fetch(
-        `/api/${collectionSlug}/${formData.id}/versions`,
-        {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ versionId, action: "restore" }),
-        },
-      );
-      const result = await resp.json();
-      if (result.data) {
-        setFormData(result.data);
-        setView("edit");
-        fetchVersions();
+          const result = await resp.json();
+          if (result.data) {
+            setFormData(result.data);
+            useAutoFormStore.getState().loadDocument(result.data, result.data);
+            onActionSuccess?.("Version restored successfully");
+            fetchVersions();
+            setView("edit");
+          } else {
+            alert({ title: "Error", message: result.error || "Failed to restore version" });
+          }
+        } catch (err) {
+          console.error("Failed to restore version:", err);
+          alert({ title: "Error", message: "Failed to restore version" });
+        }
       }
-    } catch (e) {
-      console.error("Restore failed:", e);
-    }
+    });
   };
 
   const handleCompareVersions = async () => {
     if (compareSelected.length !== 2) return;
     setLoadingDiffs(true);
     try {
-      const resp = await fetch(
-        `/api/${collectionSlug}/${formData.id}/versions?compareA=${compareSelected[0]}&compareB=${compareSelected[1]}`,
+      const resp = await fetchWithAuth(
+        resolveUrl(`/api/${collectionSlug}/${formData.id}/versions?compareA=${compareSelected[0]}&compareB=${compareSelected[1]}`),
       );
       const data = await resp.json();
       setCompareDiffs(data.diffs || []);
@@ -401,7 +211,7 @@ export function AutoForm({
       // Cmd/Ctrl + S = Publish
       if ((e.metaKey || e.ctrlKey) && e.key === "s") {
         e.preventDefault();
-        (document.getElementById("btn-save") as any)?.click();
+        (document.getElementById("btn-save") as HTMLButtonElement | null)?.click();
       }
       // Cmd/Ctrl + P = Toggle Preview
       if ((e.metaKey || e.ctrlKey) && e.key === "p") {
@@ -422,6 +232,13 @@ export function AutoForm({
     return () => window.removeEventListener("keydown", handleShortcuts);
   }, []);
 
+  // Listen for external "View History" trigger from ActionBar
+  useEffect(() => {
+    const handler = () => setView("version");
+    window.addEventListener("kyro:show-version-history", handler);
+    return () => window.removeEventListener("kyro:show-version-history", handler);
+  }, []);
+
   useEffect(() => {
     const handleClickOutside = (e: MouseEvent) => {
       if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
@@ -431,59 +248,59 @@ export function AutoForm({
     if (isMenuOpen) {
       document.addEventListener("mousedown", handleClickOutside);
       return () =>
-        document.removeEventListener("mousedown", handleClickOutside);
+        document.addEventListener("mousedown", handleClickOutside);
     }
   }, [isMenuOpen]);
 
   const handleCreateNew = () => {
     if (hasUnsavedChanges) {
-      setConfirmModal({
-        open: true,
+      confirm({
         title: "Unsaved Changes",
         message: "You have unsaved changes. Save before creating new?",
         onConfirm: async () => {
-          (document.getElementById("btn-save") as any)?.click();
+          (document.getElementById("btn-save") as HTMLButtonElement | null)?.click();
           await new Promise((r) => setTimeout(r, 1000));
-          window.location.href = `/${collectionSlug}/new`;
+          window.location.href = `${ADMIN_BASE}/${collectionSlug}/new`;
         },
       });
     } else {
-      window.location.href = `/${collectionSlug}/new`;
+      window.location.href = `${ADMIN_BASE}/${collectionSlug}/new`;
     }
   };
 
   const handleDuplicate = () => {
-    setConfirmModal({
-      open: true,
+    confirm({
       title: "Duplicate Document",
-      message: "Create a duplicate of this document?",
+      message: "Are you sure you want to duplicate this document?",
       onConfirm: async () => {
-        const { id, createdAt, updatedAt, status, ...rest } = formData;
-        const duplicateData = {
-          ...rest,
-          title: `${rest.title || rest.name || "Untitled"} (Copy)`,
-        };
         try {
-          const response = await fetch(`/api/${collectionSlug}`, {
+          const { id, createdAt, updatedAt, ...duplicateData } = formData;
+          const response = await fetchWithAuth(`/api/${collectionSlug}`, {
             method: "POST",
-            credentials: "include",
             headers: { "Content-Type": "application/json" },
-            body: JSON.stringify(duplicateData),
+            body: JSON.stringify({
+              ...duplicateData,
+              title: `${duplicateData.title || duplicateData.name || "Copy"} (Copy)`,
+              slug: `${duplicateData.slug || "copy"}-${Date.now()}`,
+              status: "draft",
+            }),
           });
+
           if (response.ok) {
             const result = await response.json();
-            window.location.href = `/${collectionSlug}/${result.data.id}`;
+            onActionSuccess?.("Document duplicated successfully");
+            if (result.data?.id) {
+              window.location.href = `${ADMIN_BASE}/${collectionSlug}/${result.data.id}`;
+            }
           } else {
             const error = await response.json();
-            setAlertModal({
-              open: true,
+            alert({
               title: "Error",
               message: error.error || "Failed to duplicate document",
             });
           }
         } catch (err) {
-          setAlertModal({
-            open: true,
+          alert({
             title: "Error",
             message: "Failed to duplicate document",
           });
@@ -493,61 +310,34 @@ export function AutoForm({
   };
 
   const handleDelete = () => {
-    setConfirmModal({
-      open: true,
+    confirm({
       title: "Delete Document",
-      message: "Delete this document? This cannot be undone.",
-      danger: true,
-      onConfirm: () => {
-        setConfirmModal({
-          open: true,
-          title: "Confirm Deletion",
-          message: "Are you absolutely sure?",
-          danger: true,
-          onConfirm: async () => {
-            try {
-              const response = await fetch(
-                `/api/${collectionSlug}/${formData.id}`,
-                {
-                  method: "DELETE",
-                  credentials: "include",
-                },
-              );
-              if (response.ok) {
-                window.location.href = `/${collectionSlug}`;
-              } else {
-                const error = await response.json();
-                setAlertModal({
-                  open: true,
-                  title: "Error",
-                  message: error.error || "Failed to delete document",
-                });
-              }
-            } catch (err) {
-              setAlertModal({
-                open: true,
-                title: "Error",
-                message: "Failed to delete document",
-              });
-            }
-          },
-        });
+      message: "Delete this document? This cannot be undone. Are you absolutely sure?",
+      variant: "danger",
+      onConfirm: async () => {
+        try {
+          await apiDelete(`/api/${collectionSlug}/${formData.id}`);
+          window.location.href = `${ADMIN_BASE}/${collectionSlug}`;
+        } catch (err) {
+          alert({
+            title: "Error",
+            message: (err as Error).message || "Failed to delete document",
+          });
+        }
       },
     });
   };
 
   const handleUnpublish = () => {
-    setConfirmModal({
-      open: true,
+    confirm({
       title: "Unpublish Document",
       message: "Unpublish this document?",
       onConfirm: async () => {
         try {
-          const response = await fetch(
-            `/api/${collectionSlug}/${formData.id}/unpublish`,
+          const response = await fetchWithAuth(
+            resolveUrl(`/api/${collectionSlug}/${formData.id}/unpublish`),
             {
               method: "POST",
-              credentials: "include",
             },
           );
           if (response.ok) {
@@ -555,15 +345,13 @@ export function AutoForm({
             location.reload();
           } else {
             const error = await response.json();
-            setAlertModal({
-              open: true,
+            alert({
               title: "Error",
               message: error.error || "Failed to unpublish",
             });
           }
         } catch (err) {
-          setAlertModal({
-            open: true,
+          alert({
             title: "Error",
             message: "Failed to unpublish",
           });
@@ -572,17 +360,14 @@ export function AutoForm({
     });
   };
 
-  const handleFieldChange = (fieldName: string, value: any) => {
-    setFormData((prev) => ({
-      ...prev,
-      [fieldName]: value,
-    }));
+  const handleFieldChange = (fieldName: string, value: unknown) => {
+    setField(fieldName, value);
   };
 
   const renderField = (
     field: Field,
-    parentData?: Record<string, any>,
-    onParentChange?: (val: any) => void,
+    parentData?: Record<string, unknown>,
+    onParentChange?: (val: unknown) => void,
   ): React.ReactNode => {
     if (field.admin?.hidden) return null;
 
@@ -606,7 +391,7 @@ export function AutoForm({
     const value = currentData[field.name!];
     const error = errors[field.name!];
 
-    const onFieldChange = (val: any) => {
+    const onFieldChange = (val: unknown) => {
       if (onParentChange) {
         onParentChange({ ...currentData, [field.name!]: val });
       } else {
@@ -614,47 +399,47 @@ export function AutoForm({
       }
     };
 
-    if (field.type === "row" && "fields" in field) {
+if (field.type === "row" && "fields" in field) {
+      const rowFields = (field as Field & { fields?: Field[] }).fields;
       return (
         <div
           key={field.name || `row-${Math.random()}`}
           className="kyro-form-row flex gap-6 items-end"
         >
-          {(field as any).fields.map((f: Field) => {
-            const fAdmin = f.admin;
-            const actionUrl = fAdmin?.action;
+          {rowFields?.map((f: Field) => {
+            const fAdmin = f.admin || {};
+            const actionUrl = fAdmin?.action as string | undefined;
 
             if (f.type === "button" && actionUrl) {
-              const siblingEmailField = (field as any).fields?.find(
+              const siblingEmailField = rowFields?.find(
                 (ff: Field) => ff.type === "email",
               );
               return (
                 <div key={f.name} className="flex-shrink-0">
                   <button
                     type="button"
-                    disabled={disabled}
                     onClick={async () => {
-                      const rowName = field.name;
-                      const emailFieldName = siblingEmailField?.name;
-                      let emailValue = formData[emailFieldName];
-                      if (!emailValue && rowName) {
-                        emailValue = formData[rowName]?.[emailFieldName];
+                      const rowName = field.name as string | undefined;
+                      const emailFieldName = siblingEmailField?.name as string | undefined;
+                      let emailValue = emailFieldName ? formData[emailFieldName] : undefined;
+                      if (!emailValue && rowName && typeof rowName === "string" && emailFieldName) {
+                        emailValue = (formData[rowName] as Record<string, unknown>)?.[emailFieldName] as string | undefined;
                       }
                       if (!emailValue) return;
 
                       setLoadingFields((prev) => ({
                         ...prev,
-                        [f.name!]: true,
+                        [f.name as string]: true,
                       }));
                       try {
-                        const response = await fetch(actionUrl, {
-                          method: fAdmin.method || "POST",
+                        const response = await fetchWithAuth(resolveUrl(actionUrl), {
+                          method: (fAdmin.method as string) || "POST",
                           headers: { "Content-Type": "application/json" },
                           body: JSON.stringify({ email: emailValue }),
                         });
-                        let result;
+                        let result: { success?: boolean; message?: string; error?: string } = {};
                         try {
-                          result = await response.json();
+                          result = await response.json() as typeof result;
                         } catch {
                           result = {};
                         }
@@ -668,22 +453,22 @@ export function AutoForm({
                             `Request failed (${response.status})`;
                           onActionError?.(errorMsg);
                         }
-                      } catch (err: any) {
+                      } catch (err: unknown) {
                         onActionError?.(
-                          err.message || "Error connecting to server",
+                          err instanceof Error ? err.message : "Error connecting to server",
                         );
                       } finally {
                         setLoadingFields((prev) => ({
                           ...prev,
-                          [f.name!]: false,
+                          [f.name as string]: false,
                         }));
                       }
                     }}
                     //@ts-ignore
-                    disabled={loadingFields[f.name!] || disabled}
+                    disabled={loadingFields[f.name as string] || disabled}
                     className="bg-[var(--kyro-primary)] text-white px-4 py-2 rounded-lg font-medium hover:opacity-90 transition-opacity disabled:opacity-50"
                   >
-                    {loadingFields[f.name!] ? "Sending..." : f.label || "Click"}
+                    {loadingFields[f.name as string] ? "Sending..." : f.label || "Click"}
                   </button>
                 </div>
               );
@@ -694,7 +479,7 @@ export function AutoForm({
                 key={f.name}
                 className={f.type === "button" ? "flex-shrink-0" : "flex-1"}
                 style={
-                  fAdmin?.width ? { width: fAdmin.width, flex: "none" } : {}
+                  fAdmin?.width ? { width: fAdmin.width as string, flex: "none" } : {}
                 }
               >
                 {renderField(f, parentData, onParentChange)}
@@ -706,621 +491,68 @@ export function AutoForm({
     }
 
     switch (field.type) {
-      case "tabs": {
-        const fieldTabs = (field as any).tabs;
-        const currentTab = fieldTabs[activeTab] || fieldTabs[0];
-
+      case "tabs":
         return (
-          <div
+          <TabsLayout
             key={field.name || `tabs-${Math.random()}`}
-            className="space-y-8"
-          >
-            <div className="flex items-center gap-1 border-b border-[var(--kyro-border)] mb-6">
-              {fieldTabs.map((tab: any, index: number) => (
-                <button
-                  key={index}
-                  type="button"
-                  className={`px-6 py-3 text-sm font-bold transition-all border-b-2 -mb-[1px] ${
-                    activeTab === index
-                      ? "border-[var(--kyro-text-primary)] text-[var(--kyro-text-primary)]"
-                      : "border-transparent text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)]"
-                  }`}
-                  onClick={() => setActiveTab(index)}
-                >
-                  {tab.label}
-                </button>
-              ))}
-            </div>
-            <div className="space-y-6">
-              {currentTab?.fields.map((f: Field) =>
-                renderField(f, parentData, onParentChange),
-              )}
-            </div>
-
-            {currentTab?.label === "SEO" && (
-              <div className="mt-12 pt-8 border-t border-[var(--kyro-border)]">
-                <h4 className="text-xs font-bold text-[var(--kyro-text-secondary)] uppercase tracking-[0.2em] mb-6 opacity-50">
-                  Live Google Preview
-                </h4>
-                <SeoPreview
-                  title={formData.metaTitle || formData.title || "Untitled"}
-                  description={
-                    formData.metaDescription || "Please enter a description..."
-                  }
-                  slug={formData.slug || "your-slug"}
-                />
-              </div>
-            )}
-          </div>
-        );
-      }
-      case "text":
-      case "email":
-        const textValue = currentData[field.name!];
-        const isKeyHidden = String(textValue).startsWith("••");
-
-        return (
-          <div key={field.name} className="kyro-form-field">
-            <label className="kyro-form-label flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                {field.label || field.name}
-                {field.required && (
-                  <span className="kyro-form-label-required">*</span>
-                )}
-              </div>
-              {(field.admin?.autoGenerate || field.admin?.readOnly) && (
-                <button
-                  type="button"
-                  onClick={async (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-
-                    if (field.admin?.autoGenerate === "key") {
-                      const chars = "abcdefghijklmnopqrstuvwxyz0123456789";
-                      let suffix = "";
-                      for (let i = 0; i < 32; i++) {
-                        suffix +=
-                          chars[Math.floor(Math.random() * chars.length)];
-                      }
-                      onFieldChange(`kyro_${suffix}`);
-                    } else if (field.admin?.autoGenerate) {
-                      onFieldChange(
-                        slugifyText(
-                          formData[field.admin!.autoGenerate as string] || "",
-                        ),
-                      );
-                    } else if (
-                      field.admin?.readOnly &&
-                      textValue &&
-                      !isKeyHidden
-                    ) {
-                      await navigator.clipboard.writeText(String(textValue));
-                      const actualKey = textValue;
-                      onFieldChange(actualKey + "__COPIED__");
-                      setTimeout(
-                        () => onFieldChange("••••••••••••••••••••••••••••••"),
-                        100,
-                      );
-                    }
-                  }}
-                  className="p-1.5 rounded-lg text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] hover:bg-[var(--kyro-surface-accent)] transition-all"
-                  title={
-                    field.admin?.autoGenerate === "key"
-                      ? "Generate new key"
-                      : field.admin?.autoGenerate
-                        ? `Generate from ${field.admin.autoGenerate}`
-                        : "Copy to clipboard"
-                  }
-                >
-                  {field.admin?.autoGenerate === "key" ? (
-                    <svg
-                      width="14"
-                      height="14"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                    >
-                      <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
-                    </svg>
-                  ) : field.admin?.autoGenerate ? (
-                    <svg
-                      width="14"
-                      height="14"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                    >
-                      <path d="M12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
-                    </svg>
-                  ) : (
-                    <svg
-                      width="14"
-                      height="14"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                    >
-                      <rect x="8" y="8" width="12" height="12" rx="2" />
-                      <path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" />
-                    </svg>
-                  )}
-                </button>
-              )}
-            </label>
-            {field.name === "slug" ? (
-              <div className="flex items-center gap-2">
-                <div className="relative flex-1">
-                  <input
-                    type="text"
-                    className={`kyro-form-input pr-24 ${isSlugLocked ? "opacity-70 bg-[var(--kyro-bg-secondary)]" : ""}`}
-                    value={value || ""}
-                    onChange={(e) => onFieldChange(e.target.value)}
-                    disabled={isSlugLocked || disabled}
-                  />
-                  <div className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1">
-                    {!isSlugLocked && (
-                      <button
-                        type="button"
-                        onClick={() =>
-                          onFieldChange(
-                            slugifyText(
-                              formData[field.admin?.autoGenerate || "title"] ||
-                                "",
-                            ),
-                          )
-                        }
-                        className="p-1 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)]"
-                      >
-                        <svg
-                          width="12"
-                          height="12"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          strokeWidth="2.5"
-                        >
-                          <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
-                          <path d="M21 3v5h-5" />
-                        </svg>
-                      </button>
-                    )}
-                    <button
-                      type="button"
-                      onClick={() => setIsSlugLocked(!isSlugLocked)}
-                      className={`p-1.5 rounded ${isSlugLocked ? "text-[var(--kyro-primary)]" : "text-[var(--kyro-text-secondary)]"}`}
-                    >
-                      {isSlugLocked ? (
-                        <svg
-                          width="12"
-                          height="12"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          strokeWidth="2.5"
-                        >
-                          <rect
-                            x="3"
-                            y="11"
-                            width="18"
-                            height="11"
-                            rx="2"
-                            ry="2"
-                          />
-                          <path d="M7 11V7a5 5 0 0 1 10 0v4" />
-                        </svg>
-                      ) : (
-                        <svg
-                          width="12"
-                          height="12"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          strokeWidth="2.5"
-                        >
-                          <rect
-                            x="3"
-                            y="11"
-                            width="18"
-                            height="11"
-                            rx="2"
-                            ry="2"
-                          />
-                          <path d="M7 11V7a5 5 0 0 1 9.9-1" />
-                        </svg>
-                      )}
-                    </button>
-                  </div>
-                </div>
-              </div>
-            ) : (
-              <input
-                type={(field as any).variant === "url" ? "url" : "text"}
-                className="kyro-form-input"
-                value={value || ""}
-                onChange={(e) => onFieldChange(e.target.value)}
-                disabled={disabled}
-              />
-            )}
-            {field.name?.toLowerCase().includes("metatitle") && (
-              <div className="flex items-center justify-between mt-1 text-[10px] font-bold uppercase tracking-wider">
-                <span
-                  className={
-                    (value?.length || 0) > 60
-                      ? "text-red-500"
-                      : (value?.length || 0) >= 40
-                        ? "text-green-500"
-                        : "text-amber-600"
-                  }
-                >
-                  {value?.length || 0} / 60 —{" "}
-                  {(value?.length || 0) > 60
-                    ? "Too Long"
-                    : (value?.length || 0) >= 40
-                      ? "Ideal"
-                      : "Short"}
-                </span>
-              </div>
-            )}
-            {error && <p className="kyro-form-error">{error}</p>}
-          </div>
-        );
-
-      case "textarea":
-        return (
-          <div key={field.name} className="kyro-form-field">
-            <label className="kyro-form-label">
-              {field.label || field.name}
-            </label>
-            <textarea
-              className="kyro-form-input kyro-form-textarea"
-              value={value || ""}
-              onChange={(e) => onFieldChange(e.target.value)}
-              disabled={disabled}
-              rows={4}
-            />
-            {field.name?.toLowerCase().includes("metadescription") && (
-              <div className="mt-1 text-[10px] font-bold uppercase tracking-wider">
-                <span
-                  className={
-                    (value?.length || 0) > 160
-                      ? "text-red-500"
-                      : (value?.length || 0) >= 120
-                        ? "text-green-500"
-                        : "text-amber-600"
-                  }
-                >
-                  {value?.length || 0} / 160 —{" "}
-                  {(value?.length || 0) > 160
-                    ? "Too Long"
-                    : (value?.length || 0) >= 120
-                      ? "Ideal"
-                      : "Short"}
-                </span>
-              </div>
-            )}
-          </div>
-        );
-
-      case "richtext":
-        return (field as any).hasBlocks === false ? (
-          <PortableTextField
-            key={field.name}
-            field={field as any}
-            value={value}
-            onChange={(newValue: any) => onFieldChange(newValue)}
-            disabled={disabled}
-            error={error}
-          />
-        ) : (
-          <BlocksField
-            key={field.name}
-            field={field as any}
-            value={value}
-            onChange={(newValue: any) => onFieldChange(newValue)}
-            disabled={disabled}
-            error={error}
+            field={field}
+            formData={formData}
+            onTabDataChange={(newTabData) => {
+              const updateTabData = useAutoFormStore.getState().updateTabData;
+              updateTabData(field.name as string, newTabData);
+            }}
+            renderField={renderField}
           />
         );
 
       case "group":
-        if ("fields" in field) {
-          const groupData = value || {};
-          return (
-            <div key={field.name} className="kyro-form-group">
-              <h3 className="kyro-form-group-title">
-                {field.label || field.name}
-              </h3>
-              <div className="kyro-form-group-fields">
-                {(field as any).fields.map((f: Field) =>
-                  renderField(f, groupData, onFieldChange),
-                )}
-              </div>
-            </div>
-          );
-        }
-        return null;
-
-      case "array":
-        if ("fields" in field) {
-          const items = Array.isArray(value) ? value : [];
-          const labelField = (field as any).fields?.[0]?.name || "user";
-          const isRelationship =
-            (field as any).fields?.[0]?.type === "relationship";
-          return (
-            <div key={field.name} className="kyro-form-field">
-              <label className="kyro-form-label">
-                {field.label || field.name}
-              </label>
-              {isRelationship ? (
-                <RelationshipField
-                  field={{
-                    name: labelField,
-                    relationTo: (field as any).fields[0].relationTo,
-                    hasMany: true,
-                    label: (field as any).fields[0].label,
-                  }}
-                  value={items.map((i: any) => i[labelField]).filter(Boolean)}
-                  onChange={(newValue: any) => {
-                    const newItems = (newValue || []).map((id: string) => ({
-                      [labelField]: id,
-                    }));
-                    onFieldChange(newItems);
-                  }}
-                  disabled={disabled}
-                />
-              ) : (
-                <div className="kyro-form-array">
-                  {items.map((item: any, index: number) => (
-                    <div key={index} className="kyro-form-array-item">
-                      <div className="flex justify-between mb-2">
-                        <span className="text-xs font-bold opacity-50">
-                          Item {index + 1}
-                        </span>
-                        <button
-                          type="button"
-                          className="text-red-500"
-                          onClick={() =>
-                            onFieldChange(items.filter((_, i) => i !== index))
-                          }
-                        >
-                          Remove
-                        </button>
-                      </div>
-                      {(field as any).fields.map((f: Field) =>
-                        renderField(f, item, (newItem) => {
-                          const newItems = [...items];
-                          newItems[index] = newItem;
-                          onFieldChange(newItems);
-                        }),
-                      )}
-                    </div>
-                  ))}
-                  <button
-                    type="button"
-                    className="kyro-btn kyro-btn-secondary kyro-btn-sm"
-                    onClick={() => onFieldChange([...items, {}])}
-                  >
-                    Add Item
-                  </button>
-                </div>
-              )}
-            </div>
-          );
-        }
-        return null;
-
-      case "blocks":
         return (
-          <BlocksField
+          <GroupLayout
             key={field.name}
-            field={field as any}
-            value={value}
-            onChange={(newValue: any) => onFieldChange(newValue)}
-            disabled={disabled}
-            error={error}
+            field={field}
+            value={value as Record<string, unknown> | null}
+            onChange={onFieldChange}
+            renderField={renderField}
           />
         );
 
-      case "number":
-        return (
-          <div key={field.name} className="kyro-form-field">
-            <label className="kyro-form-label">
-              {field.label || field.name}
-              {field.required && (
-                <span className="kyro-form-label-required">*</span>
-              )}
-            </label>
-            <NumberField
-              field={field as any}
-              value={value}
-              onChange={(newValue) => onFieldChange(newValue)}
-              disabled={disabled}
-              error={error}
-            />
-          </div>
-        );
-
-      case "checkbox":
-        return (
-          <div key={field.name} className="kyro-form-field">
-            <CheckboxField
-              field={field as any}
-              value={value}
-              onChange={(newValue) => onFieldChange(newValue)}
-              disabled={disabled}
-              error={error}
-            />
-            {error && <p className="kyro-form-error">{error}</p>}
-          </div>
-        );
-
-      case "select":
-        return (
-          <div key={field.name} className="kyro-form-field">
-            <label className="kyro-form-label">
-              {field.label || field.name}
-              {field.required && (
-                <span className="kyro-form-label-required">*</span>
-              )}
-            </label>
-            <SelectField
-              field={field as any}
-              value={value}
-              onChange={(newValue) => onFieldChange(newValue)}
-              disabled={disabled}
-              error={error}
-            />
-            {error && <p className="kyro-form-error">{error}</p>}
-          </div>
-        );
-
-      case "date":
-        return (
-          <div key={field.name} className="kyro-form-field">
-            <label className="kyro-form-label">
-              {field.label || field.name}
-              {field.required && (
-                <span className="kyro-form-label-required">*</span>
-              )}
-            </label>
-            <DateField
-              field={field as any}
-              value={value}
-              onChange={(newValue) => onFieldChange(newValue)}
-              disabled={disabled}
-              error={error}
-            />
-            {error && <p className="kyro-form-error">{error}</p>}
-          </div>
-        );
-
-      case "password":
-        return (
-          <div key={field.name} className="kyro-form-field">
-            <label className="kyro-form-label flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                {field.label || field.name}
-                {field.required && (
-                  <span className="kyro-form-label-required">*</span>
-                )}
-              </div>
-            </label>
-            <input
-              type="password"
-              className="kyro-form-input"
-              value={value || ""}
-              onChange={(e) => onFieldChange(e.target.value)}
-              disabled={disabled}
-              placeholder={
-                field.admin?.placeholder || `Enter ${field.label || field.name}`
-              }
-            />
-            {error && <p className="kyro-form-error">{error}</p>}
-          </div>
-        );
-
-      case "radio":
-        return (
-          <div key={field.name} className="kyro-form-field">
-            <label className="kyro-form-label">
-              {field.label || field.name}
-              {field.required && (
-                <span className="kyro-form-label-required">*</span>
-              )}
-            </label>
-            <div className="kyro-form-radio-group">
-              {((field as any).options || []).map((opt: any) => (
-                <label key={opt.value} className="kyro-form-radio-label">
-                  <input
-                    type="radio"
-                    name={field.name}
-                    value={opt.value}
-                    checked={value === opt.value}
-                    onChange={() => onFieldChange(opt.value)}
-                    disabled={disabled}
-                    className="kyro-form-radio"
-                  />
-                  <span>{opt.label || opt.value}</span>
-                </label>
-              ))}
-            </div>
-            {error && <p className="kyro-form-error">{error}</p>}
-          </div>
-        );
-
-      case "color":
-        return (
-          <div key={field.name} className="kyro-form-field">
-            <label className="kyro-form-label flex items-center gap-2">
-              {field.label || field.name}
-              {field.required && (
-                <span className="kyro-form-label-required">*</span>
-              )}
-              {value && (
-                <span
-                  className="w-5 h-5 rounded border border-[var(--kyro-border)] shrink-0"
-                  style={{ backgroundColor: value }}
-                />
-              )}
-            </label>
-            <div className="flex items-center gap-3">
-              <input
-                type="color"
-                value={value || "#000000"}
-                onChange={(e) => onFieldChange(e.target.value)}
-                disabled={disabled}
-                className="kyro-form-input h-10 w-14 p-1 cursor-pointer"
-              />
-              <input
-                type="text"
-                className="kyro-form-input font-mono uppercase"
-                value={value || ""}
-                onChange={(e) => onFieldChange(e.target.value)}
-                disabled={disabled}
-                placeholder="#000000"
-              />
-            </div>
-            {error && <p className="kyro-form-error">{error}</p>}
-          </div>
-        );
-
-      case "markdown":
+      case "array":
         return (
-          <MarkdownField
+          <ArrayLayout
             key={field.name}
-            field={field as any}
-            value={value || ""}
-            onChange={(val) => onFieldChange(val)}
+            field={field}
+            value={value as unknown[]}
+            onChange={onFieldChange}
+            renderField={renderField}
             disabled={disabled}
           />
         );
 
+
       case "button": {
-        const isLoading = loadingFields[field.name!];
+        const fieldName = field.name as string;
+        const isLoading = loadingFields[fieldName];
         return (
-          <div key={field.name} className="kyro-form-field">
+          <div key={fieldName} className="kyro-form-field">
             <button
               type="button"
               disabled={isLoading || disabled}
               onClick={async () => {
-                const action = field.admin?.action || (field as any).action;
+                const action = (field.admin?.action || (field as Record<string, unknown>).action) as string | undefined;
                 const method =
-                  field.admin?.method || (field as any).method || "POST";
+                  (field.admin?.method || (field as Record<string, unknown>).method || "POST") as string;
                 if (action) {
                   setLoadingFields((prev) => ({
                     ...prev,
-                    [field.name!]: true,
+                    [fieldName]: true,
                   }));
                   try {
-                    const response = await fetch(action, {
+                    const response = await fetchWithAuth(action, {
                       method,
                       headers: { "Content-Type": "application/json" },
                       body: JSON.stringify(formData),
                     });
-                    const result = await response.json();
+                    await response.json();
                     if (response.ok) {
                       // handle result
                     } else {
@@ -1331,7 +563,7 @@ export function AutoForm({
                   } finally {
                     setLoadingFields((prev) => ({
                       ...prev,
-                      [field.name!]: false,
+                      [fieldName]: false,
                     }));
                   }
                 }
@@ -1366,59 +598,76 @@ export function AutoForm({
         );
       }
 
-      case "relationship":
+      case "relationship-block":
         return (
-          <RelationshipField
-            key={field.name}
-            field={field as any}
-            value={value}
-            onChange={(newValue) => onFieldChange(newValue)}
-            disabled={disabled}
-            error={error}
-          />
-        );
-
-      case "code":
-        return (
-          <CodeField
-            key={field.name}
-            field={field as any}
-            value={value || ""}
-            onChange={(newValue) => onFieldChange(newValue)}
-            disabled={disabled}
-            error={error}
-          />
+          <div key={field.name} className="kyro-form-field">
+            <label className="kyro-form-label">
+              {field.label || field.name}
+              {field.required && (
+                <span className="kyro-form-label-required">*</span>
+              )}
+            </label>
+            <RelationshipBlockField
+              relationTo={field.relationTo as string}
+              hasMany={field.hasMany as boolean}
+              selectedIds={Array.isArray(value) ? value : value ? [value] : []}
+              onChange={(_field: string, newValue: unknown) => {
+                onFieldChange(newValue);
+              }}
+              compact
+            />
+            {field.admin?.description ? (
+              <p className="kyro-form-help">{String(field.admin?.description)}</p>
+            ) : null}
+          </div>
         );
 
-      // @ts-ignore - 'image' is supported but not in the standard union yet
-      case "image":
-      case "upload":
+      default:
         return (
-          <UploadField
-            key={field.name}
-            field={field as any}
+          <FieldRenderer
+            key={field.name || Math.random().toString()}
+            field={field}
             value={value}
-            onChange={(newValue) => onFieldChange(newValue)}
+            onChange={onFieldChange}
+            error={error}
             disabled={disabled}
           />
         );
-
-      default:
-        return null;
     }
   };
 
   const renderHeader = () => {
-    const docTitle = formData.title || formData.name || "Untitled";
-    const status = formData.status || "draft";
+    const docTitle = String(
+    (formData.mainTabs as { title?: string })?.title ||
+      formData.title ||
+      formData.name ||
+      "Untitled",
+  );
+    // Use _status from the document (set by the new draft/publish system)
+    const docStatus = documentStatus ?? formData._status ?? formData.status ?? 'draft';
     const isNew = !formData.id;
     const lastModified = formData.updatedAt
-      ? new Date(formData.updatedAt).toLocaleString()
+      ? new Date(formData.updatedAt as string).toLocaleString()
       : "Just now";
     const createdAt = formData.createdAt
-      ? new Date(formData.createdAt).toLocaleString()
+      ? new Date(formData.createdAt as string).toLocaleString()
       : "Just now";
 
+    // Status label shown in the header
+    const statusLabel = hasUnpublishedChanges
+      ? docStatus === 'draft' && !formData._prevStatus
+        ? 'Draft'
+        : 'Published (unpublished changes)'
+      : docStatus === 'published'
+        ? 'Published'
+        : 'Draft';
+
+    const statusColor = docStatus === 'published' && !hasUnpublishedChanges
+      ? 'bg-[var(--kyro-success)]'
+      : hasUnpublishedChanges
+        ? 'bg-[var(--kyro-warning)]'
+        : 'bg-[var(--kyro-text-muted)]';
+
     return (
       <header className="surface-tile px-8 py-6 flex items-center justify-between sticky top-0 z-50 border-b border-[var(--kyro-border)] mb-8 bg-[var(--kyro-surface)] backdrop-blur-md">
         <div className="flex flex-col gap-1">
@@ -1446,9 +695,9 @@ export function AutoForm({
           <div className="flex items-center gap-4 text-[11px] font-medium tracking-wide opacity-60 ml-12">
             <span className="flex items-center gap-1.5 capitalize">
               <span
-                className={`h-1.5 w-1.5 rounded-full ${status === "published" && !hasUnsavedChanges ? "bg-[var(--kyro-success)]" : "bg-[var(--kyro-warning)]"}`}
+                className={`h-1.5 w-1.5 rounded-full ${statusColor}`}
               />
-              {hasUnsavedChanges ? "Draft" : status}
+              {statusLabel}
             </span>
             {autoSaveStatus === "saving" && (
               <span className="flex items-center gap-1.5 text-[var(--kyro-text-muted)]">
@@ -1471,10 +720,10 @@ export function AutoForm({
                     d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
                   />
                 </svg>
-                Saving...
+                Saving draft...
               </span>
             )}
-            {autoSaveStatus === "saved" && (
+            {autoSaveStatus === "success" && (
               <span className="text-[var(--kyro-success)] flex items-center gap-1">
                 <svg
                   width="12"
@@ -1486,18 +735,25 @@ export function AutoForm({
                 >
                   <path d="M20 6L9 17l-5-5" />
                 </svg>
-                Saved
+                Draft saved
               </span>
             )}
             {autoSaveStatus === "error" && (
-              <span className="text-[var(--kyro-danger)]">Save failed</span>
+              <span className="text-[var(--kyro-danger)]">Draft save failed</span>
+            )}
+            {autoSaveStatus === "conflict" && (
+              <span className="text-[var(--kyro-danger)]">Conflict detected</span>
             )}
             {hasUnsavedChanges && autoSaveStatus !== "saving" && (
               <>
                 <span className="opacity-30">—</span>
                 <button
                   type="button"
-                  onClick={() => setFormData(lastSavedData)}
+                  onClick={async () => {
+                    setFormData(lastSavedData);
+                    markSaved();
+                    await clearDraftArtifacts();
+                  }}
                   className="text-[var(--kyro-primary)] hover:underline"
                 >
                   Revert changes
@@ -1519,8 +775,8 @@ export function AutoForm({
               <button
                 key={v}
                 type="button"
-                onClick={() => setView(v as any)}
-                className={`px-5 py-2 text-xs font-black rounded-lg transition-all ${view === v ? "bg-[var(--kyro-surface)] shadow-sm border border-[var(--kyro-border)] text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)] opacity-50 hover:opacity-100"}`}
+                onClick={() => setView(v as View)}
+                className={`px-5 py-2 text-xs font-bold rounded-lg transition-all ${view === v ? "bg-[var(--kyro-surface)] shadow-sm border border-[var(--kyro-border)] text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)] opacity-50 hover:opacity-100"}`}
               >
                 {v.toUpperCase()}
               </button>
@@ -1547,7 +803,7 @@ export function AutoForm({
                 <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3" />
               </svg>
               {showPreview && (
-                <span className="text-[10px] font-black uppercase tracking-widest pr-1">
+                <span className="text-[10px] font-bold  tracking-widest pr-1">
                   Active
                 </span>
               )}
@@ -1577,6 +833,7 @@ export function AutoForm({
               id="btn-save"
               type="button"
               onClick={async () => {
+                autoSaveSkipRef.current = true;
                 const hiddenInput = document.getElementById(
                   "form-data",
                 ) as HTMLInputElement;
@@ -1593,48 +850,55 @@ export function AutoForm({
 
                 try {
                   const data = JSON.parse(hiddenInput.value);
-                  const url = isNew
-                    ? `/api/${collectionSlug}`
-                    : `/api/${collectionSlug}/${formData.id}`;
-                  const method = isNew ? "POST" : "PATCH";
-
-                  const response = await fetch(url, {
-                    method,
-                    credentials: "include",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify(data),
-                  });
+                  const isPost = isNew && !globalSlug;
+
+                  const response = isPost
+                    ? await fetchWithAuth(`/api/${collectionSlug}`, {
+                      method: "POST",
+                      headers: { "Content-Type": "application/json" },
+                      body: JSON.stringify(data),
+                    })
+                    : await saveDocument(data);
 
                   if (response.ok) {
                     const result = await response.json();
-                    setLastSavedData(result.data || formData);
+                    setFormData(result.data || data);
+                    setLastSavedData(result.data || data);
                     lastAutoSaveTimeRef.current = Date.now();
-                    setAutoSaveStatus("saved");
-                    fetchVersions();
+                    setAutoSaveStatus("success");
+                    await clearDraftArtifacts();
+                    if (versionsEnabled) fetchVersions();
                     setTimeout(() => setAutoSaveStatus("idle"), 2000);
                     onActionSuccess?.(
-                      isNew ? "Document created successfully" : "Changes saved",
+                      isPost ? "Document created successfully" : "Changes saved",
                     );
-                    if (isNew) {
+                    if (globalSlug) {
+                      setTimeout(() => {
+                        window.location.reload();
+                      }, 1000);
+                    }
+                    if (isPost) {
                       setTimeout(() => {
                         window.location.href = `/${collectionSlug}`;
                       }, 800);
                     }
                   } else {
                     const error = await response.json();
-                    setAlertModal({
-                      open: true,
-                      title: "Error",
+                    if (response.status === 409) {
+                      setAutoSaveStatus("conflict");
+                    }
+                    alert({
+                      title: response.status === 409 ? "Conflict detected" : "Error",
                       message: error.error || "Failed to save",
                     });
                   }
                 } catch (err) {
-                  setAlertModal({
-                    open: true,
+                  alert({
                     title: "Error",
                     message: "Failed to save document",
                   });
                 } finally {
+                  autoSaveSkipRef.current = false;
                   if (btn) {
                     btn.textContent = originalText;
                     btn.removeAttribute("disabled");
@@ -1643,14 +907,15 @@ export function AutoForm({
               }}
               className="kyro-btn kyro-btn-primary px-6 py-2.5 text-xs rounded-xl shadow-lg transition-all"
             >
-              {isNew ? "Create" : hasUnsavedChanges ? "Save Draft" : "Saved"}
+              {isNew ? (globalSlug ? "Save" : "Create") : hasUnsavedChanges ? (versionsEnabled ? "Save Draft" : "Save") : "Saved"}
             </button>
 
-            {!isNew && status === "draft" && (
+            {!isNew && versionsEnabled && documentStatus === "draft" && (
               <button
                 id="btn-publish"
                 type="button"
                 onClick={async () => {
+                  autoSaveSkipRef.current = true;
                   const btn = document.getElementById(
                     "btn-publish",
                   ) as HTMLButtonElement;
@@ -1661,32 +926,51 @@ export function AutoForm({
                   }
 
                   try {
-                    const response = await fetch(
-                      `/api/${collectionSlug}/${formData.id}/publish`,
-                      {
-                        method: "POST",
-                        credentials: "include",
-                      },
-                    );
+                    if (hasUnsavedChanges) {
+                      const saveResponse = await saveDocument(formData);
+                      if (!saveResponse.ok) {
+                        const saveError = await saveResponse.json().catch(() => ({}));
+                        if (saveResponse.status === 409) {
+                          setAutoSaveStatus("conflict");
+                        }
+                        alert({
+                          title:
+                            saveResponse.status === 409
+                              ? "Conflict detected"
+                              : "Error",
+                          message: saveError.error || "Failed to save latest draft before publishing",
+                        });
+                        return;
+                      }
+
+                      const saveResult = await saveResponse.json();
+                      setFormData(saveResult.data || formData);
+                      setLastSavedData(saveResult.data || formData);
+                    }
+
+                    const response = await publishDocument();
 
                     if (response.ok) {
+                      await clearDraftArtifacts();
                       onActionSuccess?.("Published successfully");
                       location.reload();
                     } else {
                       const error = await response.json();
-                      setAlertModal({
-                        open: true,
-                        title: "Error",
+                      if (response.status === 409) {
+                        setAutoSaveStatus("conflict");
+                      }
+                      alert({
+                        title: response.status === 409 ? "Conflict detected" : "Error",
                         message: error.error || "Failed to publish",
                       });
                     }
                   } catch (err) {
-                    setAlertModal({
-                      open: true,
+                    alert({
                       title: "Error",
                       message: "Failed to publish",
                     });
                   } finally {
+                    autoSaveSkipRef.current = false;
                     if (btn) {
                       btn.textContent = originalText;
                       btn.removeAttribute("disabled");
@@ -1695,7 +979,7 @@ export function AutoForm({
                 }}
                 className="px-6 py-2.5 text-xs font-bold rounded-xl border-2 border-[var(--kyro-border)] text-[var(--kyro-text-primary)] hover:border-[var(--kyro-primary)] hover:bg-[var(--kyro-primary)] hover:text-white transition-all"
               >
-                Publish
+                {formData._prevStatus === 'published' ? 'Publish Changes' : 'Publish'}
               </button>
             )}
 
@@ -1771,7 +1055,7 @@ export function AutoForm({
                         </svg>
                         Duplicate
                       </button>
-                      {status === "published" && (
+                      {formData._status === "published" && (
                         <button
                           type="button"
                           onClick={() => {
@@ -1833,7 +1117,7 @@ export function AutoForm({
       return (
         <div className="w-full space-y-8">
           <div className="surface-tile p-8 space-y-8">
-            {config.fields.map((f) => renderField(f))}
+            {config.fields.map((f: Field) => renderField(f))}
           </div>
         </div>
       );
@@ -1842,29 +1126,28 @@ export function AutoForm({
     // Default split layout
     const showRightColumn = !sidebarCollapsed && !showPreview;
     const hasSidebarFields =
-      config.fields.some((f) => f.admin?.position === "sidebar") &&
+      config.fields.some((f: Field) => f.admin?.position === "sidebar") &&
       !showPreview;
 
     return (
       <div
-        className={`w-full mx-auto grid gap-8 pb-32 transition-all duration-700 ${
-          showPreview
-            ? "grid-cols-1 lg:grid-cols-2"
-            : sidebarCollapsed || !hasSidebarFields
-              ? "grid-cols-1"
-              : "grid-cols-1 lg:grid-cols-[1fr_380px]"
-        }`}
+        className={`w-full mx-auto grid gap-8 pb-32 transition-all duration-700 ${showPreview
+          ? "grid-cols-1 lg:grid-cols-2"
+          : sidebarCollapsed || !hasSidebarFields
+            ? "grid-cols-1"
+            : "grid-cols-1 lg:grid-cols-[1fr_380px]"
+          }`}
       >
         <div className="space-y-8 animate-in fade-in slide-in-from-left-4 duration-500">
           {config.tabs ? (
-            renderField({ type: "tabs", tabs: config.tabs } as any)
+            renderField({ type: "tabs", tabs: config.tabs } as Field)
           ) : (
             <div className="surface-tile p-8 space-y-8">
               {config.fields
                 .filter(
-                  (f) => !f.admin?.position || f.admin.position === "main",
+                  (f: Field) => !f.admin?.position || f.admin.position === "main",
                 )
-                .map((f) => renderField(f))}
+                .map((f: Field) => renderField(f))}
             </div>
           )}
         </div>
@@ -1874,7 +1157,7 @@ export function AutoForm({
             <div className="w-full h-full rounded-3xl border border-[var(--kyro-border)] bg-[var(--kyro-bg-secondary)] shadow-2xl overflow-hidden relative group">
               <div className="absolute top-4 left-4 z-10 flex items-center gap-2">
                 <div className="h-2 w-2 rounded-full bg-green-500 animate-pulse" />
-                <span className="text-[10px] font-black uppercase tracking-widest text-white/60">
+                <span className="text-[10px] font-bold  tracking-widest text-white/60">
                   Live Preview Mode
                 </span>
               </div>
@@ -1888,14 +1171,14 @@ export function AutoForm({
           </div>
         ) : sidebarCollapsed ? null : (
           <div className="space-y-6 animate-in fade-in slide-in-from-right-4 duration-500">
-            {config.fields.some((f) => f.admin?.position === "sidebar") && (
+            {config.fields.some((f: Field) => f.admin?.position === "sidebar") && (
               <div className="surface-tile p-6 space-y-6">
-                <h3 className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40">
+                <h3 className="text-[10px] font-bold  tracking-[0.2em] opacity-40">
                   Settings
                 </h3>
                 {config.fields
-                  .filter((f) => f.admin?.position === "sidebar")
-                  .map((f) => renderField(f))}
+                  .filter((f: Field) => f.admin?.position === "sidebar")
+                  .map((f: Field) => renderField(f))}
               </div>
             )}
           </div>
@@ -1924,7 +1207,7 @@ export function AutoForm({
                 type="button"
                 onClick={handleCompareVersions}
                 disabled={loadingDiffs}
-                className="px-3 py-1.5 rounded-lg bg-[var(--kyro-primary)] text-white text-[11px] font-bold uppercase tracking-wider hover:opacity-90 disabled:opacity-50"
+                className="px-3 py-1.5 rounded-lg bg-[var(--kyro-primary)] text-white text-[11px] font-bold  tracking-wider hover:opacity-90 disabled:opacity-50"
               >
                 {loadingDiffs ? "Comparing..." : "Compare"}
               </button>
@@ -1936,11 +1219,10 @@ export function AutoForm({
                 setCompareSelected([]);
                 setCompareDiffs([]);
               }}
-              className={`px-3 py-1.5 rounded-lg text-[11px] font-bold uppercase tracking-wider transition-all ${
-                compareMode
-                  ? "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)]"
-                  : "border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)]"
-              }`}
+              className={`px-3 py-1.5 rounded-lg text-[11px] font-bold  tracking-wider transition-all ${compareMode
+                ? "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)]"
+                : "border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)]"
+                }`}
             >
               {compareMode ? "Done" : "Compare"}
             </button>
@@ -1950,7 +1232,7 @@ export function AutoForm({
         {compareDiffs.length > 0 && (
           <div className="border-b border-[var(--kyro-border)]">
             <div className="px-6 py-3 flex items-center justify-between">
-              <span className="text-[11px] font-bold text-[var(--kyro-text-primary)] uppercase tracking-wider">
+              <span className="text-[11px] font-bold text-[var(--kyro-text-primary)]  tracking-wider">
                 {compareDiffs.length} change
                 {compareDiffs.length !== 1 ? "s" : ""}
               </span>
@@ -2018,22 +1300,20 @@ export function AutoForm({
                   onClick={
                     compareMode ? () => toggleCompareSelection(v.id) : undefined
                   }
-                  className={`grid grid-cols-12 gap-3 px-6 py-3 items-center transition-all ${
-                    compareMode
-                      ? isSelected
-                        ? "bg-[var(--kyro-primary)]/5 cursor-pointer"
-                        : "hover:bg-[var(--kyro-bg-secondary)] cursor-pointer"
-                      : "hover:bg-[var(--kyro-bg-secondary)]"
-                  } ${isDraftVersion ? "" : ""}`}
+                  className={`grid grid-cols-12 gap-3 px-6 py-3 items-center transition-all ${compareMode
+                    ? isSelected
+                      ? "bg-[var(--kyro-primary)]/5 cursor-pointer"
+                      : "hover:bg-[var(--kyro-bg-secondary)] cursor-pointer"
+                    : "hover:bg-[var(--kyro-bg-secondary)]"
+                    } ${isDraftVersion ? "" : ""}`}
                 >
                   <div className="col-span-1 flex items-center gap-2">
                     {compareMode ? (
                       <div
-                        className={`w-4 h-4 rounded-full border ${
-                          isSelected
-                            ? "border-[var(--kyro-primary)] bg-[var(--kyro-primary)]"
-                            : "border-[var(--kyro-border)]"
-                        }`}
+                        className={`w-4 h-4 rounded-full border ${isSelected
+                          ? "border-[var(--kyro-primary)] bg-[var(--kyro-primary)]"
+                          : "border-[var(--kyro-border)]"
+                          }`}
                       >
                         {isSelected && (
                           <svg
@@ -2057,13 +1337,13 @@ export function AutoForm({
                     <div className="text-[13px] font-medium text-[var(--kyro-text-primary)] truncate flex items-center gap-2">
                       {v.changeDescription || "Snapshot"}
                       {isAutoSaved && (
-                        <span className="text-[9px] px-1.5 py-0.5 bg-[var(--kyro-bg-secondary)] text-[var(--kyro-text-secondary)] rounded font-bold uppercase tracking-wider">
+                        <span className="text-[9px] px-1.5 py-0.5 bg-[var(--kyro-bg-secondary)] text-[var(--kyro-text-secondary)] rounded font-bold  tracking-wider">
                           Auto
                         </span>
                       )}
                     </div>
                     <div className="text-[11px] text-[var(--kyro-text-muted)]">
-                      {new Date(v.createdAt).toLocaleString("en-US", {
+                      {new Date(v.createdAt as string).toLocaleString("en-US", {
                         month: "short",
                         day: "numeric",
                         hour: "2-digit",
@@ -2074,11 +1354,10 @@ export function AutoForm({
                   <div className="col-span-3">
                     {v.status && (
                       <span
-                        className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-bold capitalize tracking-wider ${
-                          v.status === "published"
-                            ? " text-[var(--kyro-success)]"
-                            : " text-[var(--kyro-warning)]"
-                        }`}
+                        className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-bold capitalize tracking-wider ${v.status === "published"
+                          ? " text-[var(--kyro-success)]"
+                          : " text-[var(--kyro-warning)]"
+                          }`}
                       >
                         <span
                           className={`w-1.5 h-1.5 rounded-full ${v.status === "published" ? "bg-[var(--kyro-success)]" : "bg-[var(--kyro-warning)]"}`}
@@ -2095,7 +1374,7 @@ export function AutoForm({
                       <button
                         type="button"
                         onClick={() => handleRestoreVersion(v.id)}
-                        className="px-3 py-1.5 rounded-lg border border-[var(--kyro-border)] text-[11px] font-bold uppercase tracking-wider text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-primary)] hover:text-white hover:border-[var(--kyro-primary)] transition-all active:scale-95"
+                        className="px-3 py-1.5 rounded-lg border border-[var(--kyro-border)] text-[11px] font-bold  tracking-wider text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-primary)] hover:text-white hover:border-[var(--kyro-primary)] transition-all active:scale-95"
                       >
                         Restore
                       </button>
@@ -2114,7 +1393,7 @@ export function AutoForm({
     <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4">
       <div className="grid grid-cols-1 lg:grid-cols-[1fr_300px] gap-8">
         <div className="surface-tile p-8 min-w-0">
-          <h2 className="text-xl font-black mb-6">Response Payload</h2>
+          <h2 className="text-xl font-bold mb-6">Response Payload</h2>
           <div className="bg-[#0f172a] p-6 rounded-2xl border border-white/5 overflow-x-auto max-h-[800px]">
             <pre className="text-blue-300 text-xs font-mono whitespace-pre-wrap break-all">
               {JSON.stringify(formData, null, 2)}
@@ -2124,11 +1403,11 @@ export function AutoForm({
 
         <div className="space-y-6">
           <div className="surface-tile p-8 space-y-6">
-            <h2 className="text-xl font-black mb-6">API Info</h2>
+            <h2 className="text-xl font-bold mb-6">API Info</h2>
 
             <div className="space-y-6">
               <div>
-                <label className="text-[10px] font-bold uppercase tracking-[0.1em] text-[var(--kyro-text-secondary)] opacity-50 block mb-2">
+                <label className="text-[10px] font-bold  tracking-[0.1em] text-[var(--kyro-text-secondary)] opacity-50 block mb-2">
                   Reference Path
                 </label>
                 <div className="relative group">
@@ -2139,24 +1418,24 @@ export function AutoForm({
               </div>
 
               <div>
-                <label className="text-[10px] font-bold uppercase tracking-[0.1em] text-[var(--kyro-text-secondary)] opacity-50 block mb-3">
+                <label className="text-[10px] font-bold  tracking-[0.1em] text-[var(--kyro-text-secondary)] opacity-50 block mb-3">
                   Methods Allowed
                 </label>
                 <div className="flex gap-2">
-                  <span className="px-3 py-1.5 bg-green-500/10 text-green-500 rounded-lg font-black text-[9px] uppercase tracking-wider">
+                  <span className="px-3 py-1.5 bg-green-500/10 text-green-500 rounded-lg font-bold text-[9px]  tracking-wider">
                     GET
                   </span>
-                  <span className="px-3 py-1.5 bg-amber-500/10 text-amber-500 rounded-lg font-black text-[9px] uppercase tracking-wider">
+                  <span className="px-3 py-1.5 bg-amber-500/10 text-amber-500 rounded-lg font-bold text-[9px]  tracking-wider">
                     PATCH
                   </span>
-                  <span className="px-3 py-1.5 bg-red-500/10 text-red-500 rounded-lg font-black text-[9px] uppercase tracking-wider">
+                  <span className="px-3 py-1.5 bg-red-500/10 text-red-500 rounded-lg font-bold text-[9px]  tracking-wider">
                     DELETE
                   </span>
                 </div>
               </div>
 
               <div className="pt-6 border-t border-[var(--kyro-border)]">
-                <label className="text-[10px] font-bold uppercase tracking-[0.1em] text-[var(--kyro-text-secondary)] opacity-50 block mb-4">
+                <label className="text-[10px] font-bold  tracking-[0.1em] text-[var(--kyro-text-secondary)] opacity-50 block mb-4">
                   Security Policy
                 </label>
                 <div className="space-y-3">
@@ -2206,7 +1485,7 @@ export function AutoForm({
               </div>
 
               <div className="pt-6 border-t border-[var(--kyro-border)]">
-                <label className="text-[10px] font-bold uppercase tracking-[0.1em] text-[var(--kyro-text-secondary)] opacity-50 block mb-2">
+                <label className="text-[10px] font-bold  tracking-[0.1em] text-[var(--kyro-text-secondary)] opacity-50 block mb-2">
                   Usage Help
                 </label>
                 <p className="text-[11px] text-[var(--kyro-text-secondary)] leading-relaxed">
@@ -2227,49 +1506,57 @@ export function AutoForm({
   return (
     <div className="flex flex-col h-full">
       {layout !== "single" && renderHeader()}
+      {layout === "single" && (
+        <button
+          id="btn-save"
+          type="button"
+          style={{ width: 0, height: 0, opacity: 0, padding: 0, margin: 0, border: 'none', position: 'absolute' }}
+          onClick={async () => {
+            console.log("[AutoForm] Hidden save button clicked");
+            const hiddenInput = document.getElementById("form-data") as HTMLInputElement;
+            if (!hiddenInput || !hiddenInput.value) {
+              console.error("[AutoForm] #form-data input not found or empty");
+              return;
+            }
+            try {
+              const data = JSON.parse(hiddenInput.value);
+              console.log("[AutoForm] Saving data:", data);
+              const response = await saveDocument(data);
+              if (response.ok) {
+                const result = await response.json();
+                const savedData = result.data || data;
+                setFormData(savedData);
+                setLastSavedData(savedData);
+                onActionSuccess?.("Changes saved");
+                // Trigger a refresh to ensure all global state is updated
+                setTimeout(() => {
+                  window.location.reload();
+                }, 1000); // Small delay to let the toast show
+              } else {
+                const errorData = await response.json().catch(() => ({}));
+                console.error("Save global failed:", errorData);
+                onActionError?.(errorData.error || "Save failed");
+              }
+            } catch (e) {
+              console.error("Save error exception:", e);
+              onActionError?.("Save failed: " + (e as Error).message);
+            }
+          }}
+        />
+      )}
       <main className="w-full">
         {view === "edit" && renderEditView()}
         {view === "version" && renderVersionView()}
         {view === "api" && renderApiView()}
       </main>
-      <ConfirmModal
-        open={confirmModal.open}
-        onClose={() => setConfirmModal({ ...confirmModal, open: false })}
-        onConfirm={() => {
-          confirmModal.onConfirm();
-          setConfirmModal({ ...confirmModal, open: false });
-        }}
-        title={confirmModal.title}
-        message={confirmModal.message}
-        variant={confirmModal.danger ? "danger" : "default"}
-      />
-      <UIModal
-        open={alertModal.open}
-        onClose={() => setAlertModal({ ...alertModal, open: false })}
-        title={alertModal.title}
-        size="sm"
-        footer={
-          <button
-            type="button"
-            onClick={() => setAlertModal({ ...alertModal, open: false })}
-            className="px-4 py-2 rounded-lg font-medium text-sm bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] hover:opacity-90 transition-colors"
-          >
-            OK
-          </button>
-        }
-      >
-        <p className="text-[var(--kyro-text-secondary)]">
-          {alertModal.message}
-        </p>
-      </UIModal>
     </div>
   );
 }
 
 interface RelationshipFieldProps {
-  field: any;
-  value: any;
-  onChange: (value: any) => void;
+  field: Field;
+  value?: unknown;
+  onChange?: (value: unknown) => void;
   disabled?: boolean;
   error?: string;
 }
@@ -2283,7 +1570,7 @@ function RelationshipField({
 }: RelationshipFieldProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [search, setSearch] = useState("");
-  const [options, setOptions] = useState<any[]>([]);
+  const [options, setOptions] = useState<unknown[]>([]);
   const [loading, setLoading] = useState(false);
 
   const isMultiple = field.hasMany;
@@ -2293,10 +1580,10 @@ function RelationshipField({
 
   const fetchOptions = () => {
     setLoading(true);
-    fetch(`/api/${targetCollection}?limit=50`)
+    fetchWithAuth(`/api/${targetCollection}?limit=50`)
       .then((res) => res.json())
       .then((data) => {
-        setOptions(data.docs || []);
+        setOptions((data.docs || []) as unknown[]);
         setLoading(false);
       })
       .catch((err) => {
@@ -2309,38 +1596,43 @@ function RelationshipField({
     fetchOptions();
   }, [targetCollection]);
 
-  const getLabel = (opt: any) => {
-    if (!opt) return "";
-    return (
-      opt.title || opt.name || opt.label || opt.filename || opt.slug || opt.id
+const getLabel = (opt: unknown) => {
+    const o = opt as Record<string, unknown> | undefined;
+    if (!o) return "";
+    return String(
+      o.title || o.name || o.label || o.filename || o.slug || o.id || "",
     );
   };
 
-  const findOptionById = (id: string) => {
-    return options.find((opt) => opt.id === id);
+  const findOptionById = (id: unknown) => {
+    return (options as Array<Record<string, unknown>>).find(
+      (o) => o.id === id,
+    );
   };
 
   const isSelected = (optId: string) => {
     if (!value) return false;
     if (isMultiple) {
-      return (value as any[]).some((v) => (v.id || v) === optId);
+      const arr = Array.isArray(value) ? value : [];
+      return (arr as Array<{ id?: string }>).some((v) => (v.id || v) === optId);
     }
-    return (value.id || value) === optId;
+    return ((value as { id?: string })?.id || value) === optId;
   };
 
-  const toggleSelection = (opt: any) => {
+  const toggleSelection = (opt: { id?: string }) => {
     if (isMultiple) {
       const current = Array.isArray(value) ? value : [];
-      if (isSelected(opt.id)) {
-        onChange(current.filter((item) => (item.id || item) !== opt.id));
+      const arr = current as Array<{ id?: string }>;
+      if (isSelected(opt.id as string)) {
+        onChange?.(arr.filter((item) => (item.id || item) !== opt.id));
       } else {
-        onChange([...current, opt.id]);
+        onChange?.([...arr, opt.id]);
       }
     } else {
-      if (isSelected(opt.id)) {
-        onChange(null);
+      if (isSelected(opt.id as string)) {
+        onChange?.(null);
       } else {
-        onChange(opt.id);
+        onChange?.(opt.id);
         setIsOpen(false);
       }
     }
@@ -2350,28 +1642,30 @@ function RelationshipField({
     if (!value) return null;
     if (isMultiple && Array.isArray(value)) {
       if (value.length === 0) return "None selected";
-      return value
+      const arr = value as Array<{ id?: string }>;
+      return arr
         .map((v) => {
           const id = v.id || v;
           const opt = findOptionById(id);
-          return opt ? getLabel(opt) : id;
+          return opt ? getLabel(opt) : String(id);
         })
         .join(", ");
     }
-    const id = value.id || value;
+    const id = (value as { id?: string }).id || value;
     const opt = findOptionById(id);
-    return opt ? getLabel(opt) : id;
+    return opt ? getLabel(opt) : String(id);
   };
 
-  const filteredOptions = search
+  const filteredOptions = (search
     ? (options || []).filter((opt) => {
+        const o = opt as Record<string, unknown>;
         const term = search.toLowerCase();
         const searchableFields = ["title", "name", "label", "filename", "slug"];
         return searchableFields.some(
-          (key) => opt[key] && String(opt[key]).toLowerCase().includes(term),
+          (key) => o[key] && String(o[key]).toLowerCase().includes(term),
         );
       })
-    : options || [];
+    : options || []) as Array<Record<string, unknown>>;
 
   return (
     <div className="kyro-form-field">
@@ -2405,9 +1699,9 @@ function RelationshipField({
         </div>
       </div>
 
-      {field.admin?.description && !error && (
-        <p className="kyro-form-help">{field.admin.description}</p>
-      )}
+      {(field.admin?.description && !error) ? (
+        <p className="kyro-form-help">{String((field.admin as { description?: string }).description)}</p>
+      ) : null}
       {error && <p className="kyro-form-error">{error}</p>}
 
       {/* Modal */}
@@ -2437,19 +1731,22 @@ function RelationshipField({
                   No results found.
                 </div>
               ) : (
-                filteredOptions.map((opt) => (
-                  <button
-                    key={opt.id}
-                    type="button"
-                    className={`kyro-relation-modal-item ${isSelected(opt.id) ? "selected" : ""}`}
-                    onClick={() => toggleSelection(opt)}
-                  >
-                    <span>{getLabel(opt)}</span>
-                    <span className="kyro-relation-modal-item-id">
-                      {opt.id ? `(${String(opt.id).slice(0, 8)}...)` : ""}
-                    </span>
-                  </button>
-                ))
+                filteredOptions.map((opt) => {
+                  const o = opt as { id?: string };
+                  return (
+                    <button
+                      key={String(o.id)}
+                      type="button"
+                      className={`kyro-relation-modal-item ${isSelected(String(o.id)) ? "selected" : ""}`}
+                      onClick={() => toggleSelection(o)}
+                    >
+                      <span>{getLabel(opt)}</span>
+                      <span className="kyro-relation-modal-item-id">
+                        {o.id ? `(${String(o.id).slice(0, 8)}...)` : ""}
+                      </span>
+                    </button>
+                  );
+                })
               )}
             </div>
 
@@ -2474,35 +1771,3 @@ function stripHtml(html: string) {
   if (typeof html !== "string") return "";
   return html.replace(/<[^>]*>?/gm, "").trim();
 }
-
-const SeoPreview = ({
-  title,
-  description,
-  slug,
-}: {
-  title: string;
-  description: string;
-  slug: string;
-}) => (
-  <div className="bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-lg p-6 max-w-2xl shadow-sm transition-colors duration-300">
-    <div className="flex items-center gap-2 mb-2">
-      <div className="w-7 h-7 bg-[var(--kyro-bg-secondary)] rounded-full flex items-center justify-center text-[10px] text-[var(--kyro-text-primary)] font-medium border border-[var(--kyro-border)]">
-        K
-      </div>
-      <div className="flex flex-col">
-        <span className="text-sm font-medium text-[var(--kyro-text-primary)] leading-tight">
-          kyro-cms.com
-        </span>
-        <span className="text-[12px] text-[var(--kyro-text-secondary)] leading-tight opacity-80">
-          https://kyro-cms.com › posts › {slug}
-        </span>
-      </div>
-    </div>
-    <h3 className="text-[20px] text-[#2563eb] dark:text-[#60a5fa] font-medium hover:underline cursor-pointer mb-1 leading-tight transition-colors">
-      {title}
-    </h3>
-    <p className="text-[14px] text-[var(--kyro-text-secondary)] leading-relaxed line-clamp-2">
-      {description}
-    </p>
-  </div>
-);