@kyro-cms/admin 0.1.6 → 0.1.8

package/src/components/AutoForm.tsx

@@ -1,144 +1,969 @@
 import { useState, useRef, useEffect } from "react";
-import type { CollectionConfig, Field, Block } from "@kyro-cms/core";
+import type {
+  CollectionConfig,
+  GlobalConfig,
+  Field,
+  Block,
+} from "@kyro-cms/core/client";
+import { UploadField } from "./fields/UploadField";
+import { CodeField } from "./fields";
+import NumberField from "./fields/NumberField";
+import CheckboxField from "./fields/CheckboxField";
+import SelectField from "./fields/SelectField";
+import DateField from "./fields/DateField";
+import { MarkdownField } from "./fields/MarkdownField";
+import { globals, collections } from "@/lib/config";
+import { slugifyText } from "@/lib/slugify";
+
+import { BlocksField } from "./fields/BlocksField";
+import PortableTextField from "./fields/PortableTextField";
+import { ConfirmModal, UIModal } from "./Modal";
 
 interface AutoFormProps {
-  config: CollectionConfig;
+  config: CollectionConfig | GlobalConfig;
   data?: Record<string, any>;
   errors?: Record<string, string>;
   onChange?: (data: Record<string, any>) => void;
   disabled?: boolean;
   collectionSlug?: string;
+  globalSlug?: string;
+  documentName?: string;
+  layout?: "split" | "single";
+  onActionSuccess?: (message: string) => void;
+  onActionError?: (message: string) => void;
+  documentStatus?: "draft" | "published";
+  justSaved?: boolean;
 }
 
 export function AutoForm({
-  config,
-  data = {},
+  config: propConfig,
+  data: initialData = {},
   errors = {},
   onChange,
-  disabled,
+  disabled: propDisabled,
+  collectionSlug,
+  globalSlug,
+  documentName,
+  layout = "split",
+  onActionSuccess,
+  onActionError,
+  documentStatus,
+  justSaved,
 }: AutoFormProps) {
+  // Resolve the "live" config to preserve functions (admin.condition) lost during prop serialization
+  const activeConfig = globalSlug
+    ? globals[globalSlug]
+    : collectionSlug
+      ? collections[collectionSlug]
+      : 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 [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,
+    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]);
+
+  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 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 = 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();
+      }
+    } 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 data = await resp.json();
+      setCompareDiffs(data.diffs || []);
+    } catch (e) {
+      console.error("Compare failed:", e);
+      setCompareDiffs([]);
+    } finally {
+      setLoadingDiffs(false);
+    }
+  };
+
+  const toggleCompareSelection = (versionId: string) => {
+    setCompareSelected((prev) => {
+      if (prev.includes(versionId)) {
+        return prev.filter((id) => id !== versionId);
+      }
+      if (prev.length >= 2) {
+        return [prev[1], versionId];
+      }
+      return [...prev, versionId];
+    });
+  };
+
+  useEffect(() => {
+    const handleShortcuts = (e: KeyboardEvent) => {
+      // Cmd/Ctrl + S = Publish
+      if ((e.metaKey || e.ctrlKey) && e.key === "s") {
+        e.preventDefault();
+        (document.getElementById("btn-save") as any)?.click();
+      }
+      // Cmd/Ctrl + P = Toggle Preview
+      if ((e.metaKey || e.ctrlKey) && e.key === "p") {
+        e.preventDefault();
+        setShowPreview((prev) => !prev);
+      }
+      // Keys 1, 2, 3 = Tab Switching
+      if (
+        document.activeElement?.tagName !== "INPUT" &&
+        document.activeElement?.tagName !== "TEXTAREA"
+      ) {
+        if (e.key === "1") setView("edit");
+        if (e.key === "2") setView("version");
+        if (e.key === "3") setView("api");
+      }
+    };
+    window.addEventListener("keydown", handleShortcuts);
+    return () => window.removeEventListener("keydown", handleShortcuts);
+  }, []);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setIsMenuOpen(false);
+      }
+    };
+    if (isMenuOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () =>
+        document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isMenuOpen]);
+
+  const handleCreateNew = () => {
+    if (hasUnsavedChanges) {
+      setConfirmModal({
+        open: true,
+        title: "Unsaved Changes",
+        message: "You have unsaved changes. Save before creating new?",
+        onConfirm: async () => {
+          (document.getElementById("btn-save") as any)?.click();
+          await new Promise((r) => setTimeout(r, 1000));
+          window.location.href = `/${collectionSlug}/new`;
+        },
+      });
+    } else {
+      window.location.href = `/${collectionSlug}/new`;
+    }
+  };
+
+  const handleDuplicate = () => {
+    setConfirmModal({
+      open: true,
+      title: "Duplicate Document",
+      message: "Create a duplicate of 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}`, {
+            method: "POST",
+            credentials: "include",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(duplicateData),
+          });
+          if (response.ok) {
+            const result = await response.json();
+            window.location.href = `/${collectionSlug}/${result.data.id}`;
+          } else {
+            const error = await response.json();
+            setAlertModal({
+              open: true,
+              title: "Error",
+              message: error.error || "Failed to duplicate document",
+            });
+          }
+        } catch (err) {
+          setAlertModal({
+            open: true,
+            title: "Error",
+            message: "Failed to duplicate document",
+          });
+        }
+      },
+    });
+  };
+
+  const handleDelete = () => {
+    setConfirmModal({
+      open: true,
+      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",
+              });
+            }
+          },
+        });
+      },
+    });
+  };
+
+  const handleUnpublish = () => {
+    setConfirmModal({
+      open: true,
+      title: "Unpublish Document",
+      message: "Unpublish this document?",
+      onConfirm: async () => {
+        try {
+          const response = await fetch(
+            `/api/${collectionSlug}/${formData.id}/unpublish`,
+            {
+              method: "POST",
+              credentials: "include",
+            },
+          );
+          if (response.ok) {
+            onActionSuccess?.("Document unpublished successfully");
+            location.reload();
+          } else {
+            const error = await response.json();
+            setAlertModal({
+              open: true,
+              title: "Error",
+              message: error.error || "Failed to unpublish",
+            });
+          }
+        } catch (err) {
+          setAlertModal({
+            open: true,
+            title: "Error",
+            message: "Failed to unpublish",
+          });
+        }
+      },
+    });
+  };
+
   const handleFieldChange = (fieldName: string, value: any) => {
-    onChange?.({
-      ...data,
+    setFormData((prev) => ({
+      ...prev,
       [fieldName]: value,
-    });
+    }));
   };
 
-  const renderField = (field: Field, parentData?: Record<string, any>) => {
+  const renderField = (
+    field: Field,
+    parentData?: Record<string, any>,
+    onParentChange?: (val: any) => void,
+  ): React.ReactNode => {
     if (field.admin?.hidden) return null;
 
-    const value =
-      parentData !== undefined ? parentData[field.name!] : data[field.name!];
+    const currentData = parentData !== undefined ? parentData : formData;
+
+    // Evaluate display condition if present
+    // For conditional fields, pass formData as the root context (first arg)
+    // and currentData as the sibling context (second arg)
+    if (field.admin?.condition && typeof field.admin.condition === "function") {
+      try {
+        const shouldShow = field.admin.condition(formData, currentData);
+        if (!shouldShow) {
+          return null;
+        }
+      } catch (e) {
+        console.warn(`Condition error for field ${field.name}:`, e);
+        // Show the field if there's an error evaluating the condition
+      }
+    }
+
+    const value = currentData[field.name!];
     const error = errors[field.name!];
 
+    const onFieldChange = (val: any) => {
+      if (onParentChange) {
+        onParentChange({ ...currentData, [field.name!]: val });
+      } else {
+        handleFieldChange(field.name!, val);
+      }
+    };
+
     if (field.type === "row" && "fields" in field) {
       return (
         <div
           key={field.name || `row-${Math.random()}`}
-          className="kyro-form-row"
+          className="kyro-form-row flex gap-6 items-end"
         >
-          {(field as any).fields.map((f: Field) => renderField(f, parentData))}
-        </div>
-      );
-    }
+          {(field as any).fields.map((f: Field) => {
+            const fAdmin = f.admin;
+            const actionUrl = fAdmin?.action;
 
-    if (field.type === "collapsible" && "fields" in field) {
-      return (
-        <details
-          key={field.name || `collapsible-${Math.random()}`}
-          className="kyro-form-collapsible"
-        >
-          <summary className="kyro-form-collapsible-header">
-            <svg
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-            >
-              <path d="M9 18l6-6-6-6" />
-            </svg>
-            {(field as any).label}
-          </summary>
-          <div className="kyro-form-collapsible-content">
-            {(field as any).fields.map((f: Field) =>
-              renderField(f, parentData),
-            )}
-          </div>
-        </details>
-      );
-    }
+            if (f.type === "button" && actionUrl) {
+              const siblingEmailField = (field as any).fields?.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];
+                      }
+                      if (!emailValue) return;
 
-    if (field.type === "tabs" && "tabs" in field) {
-      return (
-        <div
-          key={field.name || `tabs-${Math.random()}`}
-          className="kyro-form-tabs"
-        >
-          {(field as any).tabs.map((tab: any, index: number) => (
-            <div key={index} className="kyro-form-tab">
-              <h3 className="kyro-form-tab-title">{tab.label}</h3>
-              <div className="kyro-form-tab-content">
-                {tab.fields.map((f: Field) => renderField(f, parentData))}
+                      setLoadingFields((prev) => ({
+                        ...prev,
+                        [f.name!]: true,
+                      }));
+                      try {
+                        const response = await fetch(actionUrl, {
+                          method: fAdmin.method || "POST",
+                          headers: { "Content-Type": "application/json" },
+                          body: JSON.stringify({ email: emailValue }),
+                        });
+                        let result;
+                        try {
+                          result = await response.json();
+                        } catch {
+                          result = {};
+                        }
+                        if (response.ok && result.success) {
+                          onActionSuccess?.(
+                            result.message || "Action completed successfully",
+                          );
+                        } else {
+                          const errorMsg =
+                            result.error ||
+                            `Request failed (${response.status})`;
+                          onActionError?.(errorMsg);
+                        }
+                      } catch (err: any) {
+                        onActionError?.(
+                          err.message || "Error connecting to server",
+                        );
+                      } finally {
+                        setLoadingFields((prev) => ({
+                          ...prev,
+                          [f.name!]: false,
+                        }));
+                      }
+                    }}
+                    //@ts-ignore
+                    disabled={loadingFields[f.name!] || 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"}
+                  </button>
+                </div>
+              );
+            }
+
+            return (
+              <div
+                key={f.name}
+                className={f.type === "button" ? "flex-shrink-0" : "flex-1"}
+                style={
+                  fAdmin?.width ? { width: fAdmin.width, flex: "none" } : {}
+                }
+              >
+                {renderField(f, parentData, onParentChange)}
               </div>
-            </div>
-          ))}
+            );
+          })}
         </div>
       );
     }
 
     switch (field.type) {
-      case "text":
-      case "email":
+      case "tabs": {
+        const fieldTabs = (field as any).tabs;
+        const currentTab = fieldTabs[activeTab] || fieldTabs[0];
+
         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>
+          <div
+            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),
               )}
-            </label>
-            <input
-              type={
-                field.type === "email"
-                  ? "email"
-                  : (field as any).variant === "url"
-                    ? "url"
-                    : "text"
-              }
-              className={`kyro-form-input ${error ? "kyro-form-input-error" : ""}`}
-              value={value || ""}
-              onChange={(e) => handleFieldChange(field.name!, e.target.value)}
-              disabled={disabled}
-              placeholder={`Enter ${field.label || field.name}`}
-              minLength={(field as any).minLength}
-              maxLength={(field as any).maxLength}
-            />
-            {field.admin?.description && !error && (
-              <p className="kyro-form-help">{field.admin.description}</p>
+            </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>
             )}
-            {error && <p className="kyro-form-error">{error}</p>}
           </div>
         );
+      }
+      case "text":
+      case "email":
+        const textValue = currentData[field.name!];
+        const isKeyHidden = String(textValue).startsWith("••");
 
-      case "password":
         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 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>
-            <input
-              type="password"
-              className={`kyro-form-input ${error ? "kyro-form-input-error" : ""}`}
-              value={value || ""}
-              onChange={(e) => handleFieldChange(field.name!, e.target.value)}
-              disabled={disabled}
-              placeholder={`Enter ${field.label || field.name}`}
-            />
+            {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>
         );
@@ -148,25 +973,157 @@ export function AutoForm({
           <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>
             <textarea
-              className={`kyro-form-input kyro-form-textarea ${error ? "kyro-form-input-error" : ""}`}
+              className="kyro-form-input kyro-form-textarea"
               value={value || ""}
-              onChange={(e) => handleFieldChange(field.name!, e.target.value)}
+              onChange={(e) => onFieldChange(e.target.value)}
               disabled={disabled}
-              rows={(field as any).rows || 4}
-              placeholder={`Enter ${field.label || field.name}`}
+              rows={4}
             />
-            {field.admin?.description && !error && (
-              <p className="kyro-form-help">{field.admin.description}</p>
+            {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>
             )}
-            {error && <p className="kyro-form-error">{error}</p>}
           </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}
+          />
+        );
+
+      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
+            key={field.name}
+            field={field as any}
+            value={value}
+            onChange={(newValue: any) => onFieldChange(newValue)}
+            disabled={disabled}
+            error={error}
+          />
+        );
+
       case "number":
         return (
           <div key={field.name} className="kyro-form-field">
@@ -176,49 +1133,31 @@ export function AutoForm({
                 <span className="kyro-form-label-required">*</span>
               )}
             </label>
-            <input
-              type="number"
-              className={`kyro-form-input kyro-form-number ${error ? "kyro-form-input-error" : ""}`}
-              value={value ?? ""}
-              onChange={(e) =>
-                handleFieldChange(field.name!, parseFloat(e.target.value) || 0)
-              }
+            <NumberField
+              field={field as any}
+              value={value}
+              onChange={(newValue) => onFieldChange(newValue)}
               disabled={disabled}
-              placeholder="0"
-              min={(field as any).min}
-              max={(field as any).max}
-              step={(field as any).step || "any"}
+              error={error}
             />
-            {field.admin?.description && !error && (
-              <p className="kyro-form-help">{field.admin.description}</p>
-            )}
-            {error && <p className="kyro-form-error">{error}</p>}
           </div>
         );
 
-      case "checkbox":
-        return (
-          <div key={field.name} className="kyro-form-field">
-            <label className="kyro-form-checkbox">
-              <input
-                type="checkbox"
-                checked={value || false}
-                onChange={(e) =>
-                  handleFieldChange(field.name!, e.target.checked)
-                }
-                disabled={disabled}
-              />
-              <span className="kyro-form-checkbox-label">
-                {field.label || field.name}
-              </span>
-            </label>
-            {field.admin?.description && (
-              <p className="kyro-form-help">{field.admin.description}</p>
-            )}
+      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 "date":
+      case "select":
         return (
           <div key={field.name} className="kyro-form-field">
             <label className="kyro-form-label">
@@ -227,23 +1166,18 @@ export function AutoForm({
                 <span className="kyro-form-label-required">*</span>
               )}
             </label>
-            <input
-              type="date"
-              className={`kyro-form-input ${error ? "kyro-form-input-error" : ""}`}
-              value={value ? new Date(value).toISOString().split("T")[0] : ""}
-              onChange={(e) =>
-                handleFieldChange(
-                  field.name!,
-                  e.target.value ? new Date(e.target.value) : null,
-                )
-              }
+            <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 "select":
+      case "date":
         return (
           <div key={field.name} className="kyro-form-field">
             <label className="kyro-form-label">
@@ -252,22 +1186,38 @@ export function AutoForm({
                 <span className="kyro-form-label-required">*</span>
               )}
             </label>
-            <select
-              className={`kyro-form-input kyro-form-select ${error ? "kyro-form-input-error" : ""}`}
+            <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) => handleFieldChange(field.name!, e.target.value)}
+              onChange={(e) => onFieldChange(e.target.value)}
               disabled={disabled}
-            >
-              <option value="">Select {field.label || field.name}</option>
-              {(field as any).options?.map((opt: any) => (
-                <option key={opt.value || opt} value={opt.value || opt}>
-                  {opt.label || opt}
-                </option>
-              ))}
-            </select>
-            {field.admin?.description && !error && (
-              <p className="kyro-form-help">{field.admin.description}</p>
-            )}
+              placeholder={
+                field.admin?.placeholder || `Enter ${field.label || field.name}`
+              }
+            />
             {error && <p className="kyro-form-error">{error}</p>}
           </div>
         );
@@ -282,19 +1232,18 @@ export function AutoForm({
               )}
             </label>
             <div className="kyro-form-radio-group">
-              {(field as any).options?.map((opt: any) => (
-                <label key={opt.value || opt} className="kyro-form-radio">
+              {((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 || opt}
-                    checked={value === (opt.value || opt)}
-                    onChange={(e) =>
-                      handleFieldChange(field.name!, e.target.value)
-                    }
+                    value={opt.value}
+                    checked={value === opt.value}
+                    onChange={() => onFieldChange(opt.value)}
                     disabled={disabled}
+                    className="kyro-form-radio"
                   />
-                  <span>{opt.label || opt}</span>
+                  <span>{opt.label || opt.value}</span>
                 </label>
               ))}
             </div>
@@ -305,635 +1254,1014 @@ export function AutoForm({
       case "color":
         return (
           <div key={field.name} className="kyro-form-field">
-            <label className="kyro-form-label">
+            <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="kyro-form-color-wrapper">
+            <div className="flex items-center gap-3">
               <input
                 type="color"
-                className={`kyro-form-color ${error ? "kyro-form-input-error" : ""}`}
                 value={value || "#000000"}
-                onChange={(e) => handleFieldChange(field.name!, e.target.value)}
+                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"
               />
-              <span className="kyro-form-color-value">
-                {value || "#000000"}
-              </span>
             </div>
             {error && <p className="kyro-form-error">{error}</p>}
           </div>
         );
 
-      case "json":
+      case "markdown":
+        return (
+          <MarkdownField
+            key={field.name}
+            field={field as any}
+            value={value || ""}
+            onChange={(val) => onFieldChange(val)}
+            disabled={disabled}
+          />
+        );
+
+      case "button": {
+        const isLoading = loadingFields[field.name!];
         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>
-            <textarea
-              className={`kyro-form-input kyro-form-textarea kyro-form-code ${error ? "kyro-form-input-error" : ""}`}
-              value={
-                typeof value === "string"
-                  ? value
-                  : JSON.stringify(value || {}, null, 2)
-              }
-              onChange={(e) => {
-                try {
-                  handleFieldChange(field.name!, JSON.parse(e.target.value));
-                } catch {
-                  handleFieldChange(field.name!, e.target.value);
+            <button
+              type="button"
+              disabled={isLoading || disabled}
+              onClick={async () => {
+                const action = field.admin?.action || (field as any).action;
+                const method =
+                  field.admin?.method || (field as any).method || "POST";
+                if (action) {
+                  setLoadingFields((prev) => ({
+                    ...prev,
+                    [field.name!]: true,
+                  }));
+                  try {
+                    const response = await fetch(action, {
+                      method,
+                      headers: { "Content-Type": "application/json" },
+                      body: JSON.stringify(formData),
+                    });
+                    const result = await response.json();
+                    if (response.ok) {
+                      // handle result
+                    } else {
+                      // handle error
+                    }
+                  } catch (err) {
+                    console.error("Error executing action:", err);
+                  } finally {
+                    setLoadingFields((prev) => ({
+                      ...prev,
+                      [field.name!]: false,
+                    }));
+                  }
                 }
               }}
-              disabled={disabled}
-              rows={6}
-              placeholder='{"key": "value"}'
-            />
-            {field.admin?.description && !error && (
-              <p className="kyro-form-help">{field.admin.description}</p>
-            )}
-            {error && <p className="kyro-form-error">{error}</p>}
+              className={`kyro-btn kyro-btn-md kyro-btn-secondary transition-all active:scale-95 whitespace-nowrap flex items-center gap-2 ${isLoading ? "opacity-70 cursor-not-allowed" : ""}`}
+            >
+              {isLoading && (
+                <svg
+                  className="animate-spin h-3 w-3 text-white"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  ></circle>
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
+                </svg>
+              )}
+              {isLoading ? "Processing..." : field.label || "Click"}
+            </button>
           </div>
         );
+      }
 
-      case "markdown":
+      case "relationship":
         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>
-            <textarea
-              className={`kyro-form-input kyro-form-textarea ${error ? "kyro-form-input-error" : ""}`}
-              value={value || ""}
-              onChange={(e) => handleFieldChange(field.name!, e.target.value)}
-              disabled={disabled}
-              rows={8}
-              placeholder="Enter markdown content..."
-            />
-            {field.admin?.description && !error && (
-              <p className="kyro-form-help">{field.admin.description}</p>
-            )}
-            {error && <p className="kyro-form-error">{error}</p>}
-          </div>
+          <RelationshipField
+            key={field.name}
+            field={field as any}
+            value={value}
+            onChange={(newValue) => onFieldChange(newValue)}
+            disabled={disabled}
+            error={error}
+          />
         );
 
       case "code":
         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>
-            <textarea
-              className={`kyro-form-input kyro-form-textarea kyro-form-code ${error ? "kyro-form-input-error" : ""}`}
-              value={value || ""}
-              onChange={(e) => handleFieldChange(field.name!, e.target.value)}
-              disabled={disabled}
-              rows={8}
-              placeholder="Enter code..."
-            />
-            {field.admin?.description && !error && (
-              <p className="kyro-form-help">{field.admin.description}</p>
-            )}
-            {error && <p className="kyro-form-error">{error}</p>}
-          </div>
+          <CodeField
+            key={field.name}
+            field={field as any}
+            value={value || ""}
+            onChange={(newValue) => onFieldChange(newValue)}
+            disabled={disabled}
+            error={error}
+          />
         );
 
-      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),
-                )}
-              </div>
-            </div>
-          );
-        }
+      // @ts-ignore - 'image' is supported but not in the standard union yet
+      case "image":
+      case "upload":
+        return (
+          <UploadField
+            key={field.name}
+            field={field as any}
+            value={value}
+            onChange={(newValue) => onFieldChange(newValue)}
+            disabled={disabled}
+          />
+        );
+
+      default:
         return null;
+    }
+  };
 
-      case "array":
-        if ("fields" in field) {
-          const items = Array.isArray(value) ? value : [];
-          const labels = (field as any).labels || {
-            singular: "Item",
-            plural: "Items",
-          };
-          return (
-            <div key={field.name} className="kyro-form-field">
-              <label className="kyro-form-label">
-                {field.label || field.name}
-              </label>
-              <div className="kyro-form-array">
-                {items.length === 0 ? (
-                  <p className="kyro-form-array-empty">
-                    No {labels.plural.toLowerCase()} yet
-                  </p>
-                ) : (
-                  items.map((item: any, index: number) => (
-                    <div key={index} className="kyro-form-array-item">
-                      <div className="kyro-form-array-item-header">
-                        <span className="kyro-form-array-item-number">
-                          {index + 1}
-                        </span>
-                        <button
-                          type="button"
-                          className="kyro-form-array-item-remove"
-                          onClick={() => {
-                            const newItems = items.filter(
-                              (_: any, i: number) => i !== index,
-                            );
-                            handleFieldChange(field.name!, newItems);
-                          }}
-                          disabled={disabled}
-                        >
-                          <svg
-                            width="14"
-                            height="14"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            strokeWidth="2"
-                          >
-                            <path d="M18 6L6 18M6 6l12 12" />
-                          </svg>
-                        </button>
-                      </div>
-                      <div className="kyro-form-array-item-fields">
-                        {(field as any).fields.map((f: Field) => {
-                          const fieldKey = f.name!;
-                          const subFieldValue = item[fieldKey];
-                          const handleSubFieldChange = (newValue: any) => {
-                            const newItem = { ...item, [fieldKey]: newValue };
-                            const newItems = [...items];
-                            newItems[index] = newItem;
-                            handleFieldChange(field.name!, newItems);
-                          };
-                          return (
-                            <div key={fieldKey} className="kyro-form-field">
-                              <label className="kyro-form-label">
-                                {f.label || f.name}
-                              </label>
-                              {renderSubField(
-                                f,
-                                subFieldValue,
-                                handleSubFieldChange,
-                                disabled,
-                              )}
-                            </div>
-                          );
-                        })}
-                      </div>
-                    </div>
-                  ))
-                )}
+  const renderHeader = () => {
+    const docTitle = formData.title || formData.name || "Untitled";
+    const status = formData.status || "draft";
+    const isNew = !formData.id;
+    const lastModified = formData.updatedAt
+      ? new Date(formData.updatedAt).toLocaleString()
+      : "Just now";
+    const createdAt = formData.createdAt
+      ? new Date(formData.createdAt).toLocaleString()
+      : "Just now";
+
+    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">
+          <div className="flex items-center gap-4">
+            <a
+              href={`/${collectionSlug}`}
+              className="p-2 border border-[var(--kyro-border)] rounded-xl hover:bg-[var(--kyro-bg-secondary)] transition-colors"
+            >
+              <svg
+                className="w-4 h-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2.5"
+                  d="M15 19l-7-7 7-7"
+                />
+              </svg>
+            </a>
+            <h1 className="text-xl font-bold tracking-tighter">{docTitle}</h1>
+          </div>
+          <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)]"}`}
+              />
+              {hasUnsavedChanges ? "Draft" : status}
+            </span>
+            {autoSaveStatus === "saving" && (
+              <span className="flex items-center gap-1.5 text-[var(--kyro-text-muted)]">
+                <svg
+                  className="animate-spin h-3 w-3"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  />
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                  />
+                </svg>
+                Saving...
+              </span>
+            )}
+            {autoSaveStatus === "saved" && (
+              <span className="text-[var(--kyro-success)] flex items-center gap-1">
+                <svg
+                  width="12"
+                  height="12"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="3"
+                >
+                  <path d="M20 6L9 17l-5-5" />
+                </svg>
+                Saved
+              </span>
+            )}
+            {autoSaveStatus === "error" && (
+              <span className="text-[var(--kyro-danger)]">Save failed</span>
+            )}
+            {hasUnsavedChanges && autoSaveStatus !== "saving" && (
+              <>
+                <span className="opacity-30">—</span>
                 <button
                   type="button"
-                  className="kyro-btn kyro-btn-secondary kyro-btn-sm"
-                  onClick={() => {
-                    const newItem: Record<string, any> = {};
-                    (field as any).fields.forEach((f: Field) => {
-                      if (f.defaultValue !== undefined) {
-                        newItem[f.name!] = f.defaultValue;
-                      }
-                    });
-                    handleFieldChange(field.name!, [...items, newItem]);
-                  }}
-                  disabled={disabled}
+                  onClick={() => setFormData(lastSavedData)}
+                  className="text-[var(--kyro-primary)] hover:underline"
                 >
-                  <svg
-                    width="14"
-                    height="14"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                  >
-                    <path d="M12 5v14M5 12h14" />
-                  </svg>
-                  Add {labels.singular}
+                  Revert changes
                 </button>
-              </div>
-            </div>
-          );
-        }
-        return null;
+              </>
+            )}
+            <span className="border-l border-[var(--kyro-border)] pl-4">
+              Modified {lastModified}
+            </span>
+            <span className="border-l border-[var(--kyro-border)] pl-4">
+              Created {createdAt}
+            </span>
+          </div>
+        </div>
 
-      case "blocks":
-        if ("blocks" in field) {
-          const blocks = Array.isArray(value) ? value : [];
-          const labels = (field as any).labels || {
-            singular: "Block",
-            plural: "Blocks",
-          };
-          return (
-            <div key={field.name} className="kyro-form-field">
-              <label className="kyro-form-label">
-                {field.label || field.name}
-              </label>
-              <div className="kyro-form-blocks">
-                {blocks.length === 0 ? (
-                  <p className="kyro-form-blocks-empty">
-                    No {labels.plural.toLowerCase()} yet
-                  </p>
-                ) : (
-                  blocks.map((block: any, index: number) => (
-                    <div key={index} className="kyro-form-block-item">
-                      <div className="kyro-form-block-item-header">
-                        <span className="kyro-form-block-item-type">
-                          {(field as any).blocks.find(
-                            (b: Block) => b.slug === block.blockType,
-                          )?.label || block.blockType}
-                        </span>
-                        <div className="kyro-form-block-item-actions">
-                          <button
-                            type="button"
-                            className="kyro-form-block-item-move"
-                            onClick={() => {
-                              if (index > 0) {
-                                const newBlocks = [...blocks];
-                                [newBlocks[index - 1], newBlocks[index]] = [
-                                  newBlocks[index],
-                                  newBlocks[index - 1],
-                                ];
-                                handleFieldChange(field.name!, newBlocks);
-                              }
-                            }}
-                            disabled={disabled || index === 0}
-                          >
-                            <svg
-                              width="14"
-                              height="14"
-                              viewBox="0 0 24 24"
-                              fill="none"
-                              stroke="currentColor"
-                              strokeWidth="2"
-                            >
-                              <path d="M18 15l-6-6-6 6" />
-                            </svg>
-                          </button>
-                          <button
-                            type="button"
-                            className="kyro-form-block-item-remove"
-                            onClick={() => {
-                              const newBlocks = blocks.filter(
-                                (_: any, i: number) => i !== index,
-                              );
-                              handleFieldChange((field as any).name, newBlocks);
-                            }}
-                            disabled={disabled}
+        <div className="flex items-center gap-6">
+          <div className="flex items-center gap-1 bg-[var(--kyro-bg-secondary)] p-1 rounded-xl border border-[var(--kyro-border)]">
+            {["edit", "version", "api"].map((v) => (
+              <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"}`}
+              >
+                {v.toUpperCase()}
+              </button>
+            ))}
+          </div>
+
+          <div className="h-8 w-px bg-[var(--kyro-border)] mx-2" />
+
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              onClick={() => setShowPreview(!showPreview)}
+              className={`p-2.5 rounded-xl transition-all flex items-center gap-2 ${showPreview ? "bg-[var(--kyro-primary)] text-white shadow-lg" : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-bg-secondary)]"}`}
+              title="Live Preview"
+            >
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+              >
+                <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">
+                  Active
+                </span>
+              )}
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                window.dispatchEvent(new CustomEvent("toggle-sidebar"));
+              }}
+              className={`p-2.5 rounded-xl transition-all ${sidebarCollapsed ? "bg-[var(--kyro-primary)] text-white" : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-bg-secondary)]"}`}
+              title="Toggle Sidebar"
+            >
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+              >
+                <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+                <line x1="9" y1="3" x2="9" y2="21" />
+              </svg>
+            </button>
+
+            <button
+              id="btn-save"
+              type="button"
+              onClick={async () => {
+                const hiddenInput = document.getElementById(
+                  "form-data",
+                ) as HTMLInputElement;
+                if (!hiddenInput || !hiddenInput.value) return;
+
+                const btn = document.getElementById(
+                  "btn-save",
+                ) as HTMLButtonElement;
+                const originalText = btn?.textContent || "";
+                if (btn) {
+                  btn.textContent = "Saving...";
+                  btn.setAttribute("disabled", "true");
+                }
+
+                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),
+                  });
+
+                  if (response.ok) {
+                    const result = await response.json();
+                    setLastSavedData(result.data || formData);
+                    lastAutoSaveTimeRef.current = Date.now();
+                    setAutoSaveStatus("saved");
+                    fetchVersions();
+                    setTimeout(() => setAutoSaveStatus("idle"), 2000);
+                    onActionSuccess?.(
+                      isNew ? "Document created successfully" : "Changes saved",
+                    );
+                    if (isNew) {
+                      setTimeout(() => {
+                        window.location.href = `/${collectionSlug}`;
+                      }, 800);
+                    }
+                  } else {
+                    const error = await response.json();
+                    setAlertModal({
+                      open: true,
+                      title: "Error",
+                      message: error.error || "Failed to save",
+                    });
+                  }
+                } catch (err) {
+                  setAlertModal({
+                    open: true,
+                    title: "Error",
+                    message: "Failed to save document",
+                  });
+                } finally {
+                  if (btn) {
+                    btn.textContent = originalText;
+                    btn.removeAttribute("disabled");
+                  }
+                }
+              }}
+              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"}
+            </button>
+
+            {!isNew && status === "draft" && (
+              <button
+                id="btn-publish"
+                type="button"
+                onClick={async () => {
+                  const btn = document.getElementById(
+                    "btn-publish",
+                  ) as HTMLButtonElement;
+                  const originalText = btn?.textContent || "";
+                  if (btn) {
+                    btn.textContent = "Publishing...";
+                    btn.setAttribute("disabled", "true");
+                  }
+
+                  try {
+                    const response = await fetch(
+                      `/api/${collectionSlug}/${formData.id}/publish`,
+                      {
+                        method: "POST",
+                        credentials: "include",
+                      },
+                    );
+
+                    if (response.ok) {
+                      onActionSuccess?.("Published successfully");
+                      location.reload();
+                    } else {
+                      const error = await response.json();
+                      setAlertModal({
+                        open: true,
+                        title: "Error",
+                        message: error.error || "Failed to publish",
+                      });
+                    }
+                  } catch (err) {
+                    setAlertModal({
+                      open: true,
+                      title: "Error",
+                      message: "Failed to publish",
+                    });
+                  } finally {
+                    if (btn) {
+                      btn.textContent = originalText;
+                      btn.removeAttribute("disabled");
+                    }
+                  }
+                }}
+                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
+              </button>
+            )}
+
+            <div ref={menuRef} className="relative">
+              <button
+                type="button"
+                onClick={() => setIsMenuOpen(!isMenuOpen)}
+                className="p-2.5 text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-bg-secondary)] rounded-xl transition-all"
+              >
+                <svg
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="3"
+                >
+                  <circle cx="12" cy="12" r="1.5" fill="currentColor" />
+                  <circle cx="12" cy="5" r="1.5" fill="currentColor" />
+                  <circle cx="12" cy="19" r="1.5" fill="currentColor" />
+                </svg>
+              </button>
+              {isMenuOpen && (
+                <div className="absolute right-0 mt-2 w-48 rounded-lg border border-[var(--kyro-border)] bg-[var(--kyro-surface)] shadow-2xl z-50 overflow-hidden">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      handleCreateNew();
+                      setIsMenuOpen(false);
+                    }}
+                    className="w-full px-4 py-2.5 text-left text-xs font-medium text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] flex items-center gap-3 transition-colors"
+                  >
+                    <svg
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                    >
+                      <line x1="12" y1="5" x2="12" y2="19"></line>
+                      <line x1="5" y1="12" x2="19" y2="12"></line>
+                    </svg>
+                    Create New
+                  </button>
+                  {!isNew && (
+                    <>
+                      <button
+                        type="button"
+                        onClick={() => {
+                          handleDuplicate();
+                          setIsMenuOpen(false);
+                        }}
+                        className="w-full px-4 py-2.5 text-left text-xs font-medium text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] flex items-center gap-3 transition-colors"
+                      >
+                        <svg
+                          width="16"
+                          height="16"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                        >
+                          <rect
+                            x="9"
+                            y="9"
+                            width="13"
+                            height="13"
+                            rx="2"
+                            ry="2"
+                          ></rect>
+                          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                        </svg>
+                        Duplicate
+                      </button>
+                      {status === "published" && (
+                        <button
+                          type="button"
+                          onClick={() => {
+                            handleUnpublish();
+                            setIsMenuOpen(false);
+                          }}
+                          className="w-full px-4 py-2.5 text-left text-xs font-medium text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] flex items-center gap-3 transition-colors"
+                        >
+                          <svg
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="2"
                           >
-                            <svg
-                              width="14"
-                              height="14"
-                              viewBox="0 0 24 24"
-                              fill="none"
-                              stroke="currentColor"
-                              strokeWidth="2"
-                            >
-                              <path d="M18 6L6 18M6 6l12 12" />
-                            </svg>
-                          </button>
-                        </div>
-                      </div>
-                      <div className="kyro-form-block-item-fields">
-                        {(field as any).blocks
-                          .find((b: Block) => b.slug === block.blockType)
-                          ?.fields?.map((f: Field) => {
-                            if (!f.name) return null;
-                            const fieldKey = f.name;
-                            const blockData = block;
-                            const handleBlockFieldChange = (newValue: any) => {
-                              const newBlock = {
-                                ...blockData,
-                                [fieldKey]: newValue,
-                              };
-                              const newBlocks = [...blocks];
-                              newBlocks[index] = newBlock;
-                              handleFieldChange(field.name!, newBlocks);
-                            };
-                            return (
-                              <div key={fieldKey} className="kyro-form-field">
-                                <label className="kyro-form-label">
-                                  {f.label || f.name}
-                                </label>
-                                {renderSubField(
-                                  f,
-                                  block[fieldKey],
-                                  handleBlockFieldChange,
-                                  disabled,
-                                )}
-                              </div>
-                            );
-                          })}
-                      </div>
-                    </div>
-                  ))
-                )}
-                <div className="kyro-form-blocks-add">
-                  <span className="kyro-form-blocks-add-label">Add block:</span>
-                  <div className="kyro-form-blocks-add-buttons">
-                    {(field as any).blocks.map((block: Block) => (
+                            <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
+                            <line x1="1" y1="1" x2="23" y2="23"></line>
+                          </svg>
+                          Unpublish
+                        </button>
+                      )}
+                      <div className="h-px bg-[var(--kyro-border)]" />
                       <button
-                        key={block.slug}
                         type="button"
-                        className="kyro-btn kyro-btn-secondary kyro-btn-sm"
                         onClick={() => {
-                          const newBlock = { blockType: block.slug };
-                          handleFieldChange(field.name!, [...blocks, newBlock]);
+                          handleDelete();
+                          setIsMenuOpen(false);
                         }}
-                        disabled={disabled}
+                        className="w-full px-4 py-2.5 text-left text-xs font-medium text-red-600 hover:bg-red-50 flex items-center gap-3 transition-colors"
                       >
-                        {block.label}
+                        <svg
+                          width="16"
+                          height="16"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                        >
+                          <polyline points="3 6 5 6 21 6"></polyline>
+                          <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+                        </svg>
+                        Delete
                       </button>
-                    ))}
-                  </div>
+                    </>
+                  )}
                 </div>
-              </div>
-            </div>
-          );
-        }
-        return null;
-
-      case "relationship":
-        return (
-          <RelationshipField
-            key={field.name}
-            field={field as any}
-            value={value}
-            onChange={(newValue) => handleFieldChange(field.name!, newValue)}
-            disabled={disabled}
-            error={error}
-          />
-        );
-
-      case "upload":
-        return (
-          <UploadField
-            key={field.name}
-            field={field as any}
-            value={value}
-            onChange={(newValue) => handleFieldChange(field.name!, newValue)}
-            disabled={disabled}
-            error={error}
-          />
-        );
-
-      case "richtext":
-        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>
-            <textarea
-              className={`kyro-form-input kyro-form-textarea kyro-form-richtext ${error ? "kyro-form-input-error" : ""}`}
-              value={value || ""}
-              onChange={(e) => handleFieldChange(field.name!, e.target.value)}
-              disabled={disabled}
-              rows={8}
-              placeholder="Enter rich text content..."
-            />
-            {field.admin?.description && !error && (
-              <p className="kyro-form-help">{field.admin.description}</p>
-            )}
-            {error && <p className="kyro-form-error">{error}</p>}
-          </div>
-        );
-
-      default: {
-        const anyField = field as any;
-        return (
-          <div key={anyField.name} className="kyro-form-field">
-            <span className="kyro-form-unsupported">
-              Unsupported field type: {anyField.type}
-            </span>
+            </div>
           </div>
-        );
-      }
-    }
+        </div>
+      </header>
+    );
   };
 
-  return (
-    <div className="kyro-form">
-      {config.fields.map((field) => renderField(field))}
-    </div>
-  );
-}
-
-function renderSubField(
-  field: Field,
-  value: any,
-  onChange: (value: any) => void,
-  disabled?: boolean,
-) {
-  switch (field.type) {
-    case "text":
-    case "email":
-    case "password":
+  const renderEditView = () => {
+    // Single layout: no split grid, no sidebar column — just a clean field list
+    if (layout === "single") {
       return (
-        <input
-          type={field.type === "email" ? "email" : "text"}
-          className="kyro-form-input"
-          value={value || ""}
-          onChange={(e) => onChange(e.target.value)}
-          disabled={disabled}
-        />
-      );
-    case "number":
-      return (
-        <input
-          type="number"
-          className="kyro-form-input kyro-form-number"
-          value={value ?? ""}
-          onChange={(e) => onChange(parseFloat(e.target.value) || 0)}
-          disabled={disabled}
-        />
-      );
-    case "checkbox":
-      return (
-        <input
-          type="checkbox"
-          checked={value || false}
-          onChange={(e) => onChange(e.target.checked)}
-          disabled={disabled}
-        />
-      );
-    case "textarea":
-      return (
-        <textarea
-          className="kyro-form-input kyro-form-textarea"
-          value={value || ""}
-          onChange={(e) => onChange(e.target.value)}
-          disabled={disabled}
-          rows={3}
-        />
-      );
-    case "select":
-      return (
-        <select
-          className="kyro-form-input kyro-form-select"
-          value={value || ""}
-          onChange={(e) => onChange(e.target.value)}
-          disabled={disabled}
-        >
-          <option value="">Select...</option>
-          {(field as any).options?.map((opt: any) => (
-            <option key={opt.value || opt} value={opt.value || opt}>
-              {opt.label || opt}
-            </option>
-          ))}
-        </select>
-      );
-    default:
-      return (
-        <input
-          type="text"
-          className="kyro-form-input"
-          value={value || ""}
-          onChange={(e) => onChange(e.target.value)}
-          disabled={disabled}
-        />
+        <div className="w-full space-y-8">
+          <div className="surface-tile p-8 space-y-8">
+            {config.fields.map((f) => renderField(f))}
+          </div>
+        </div>
       );
-  }
-}
-
-interface UploadFieldProps {
-  field: any;
-  value: any;
-  onChange: (value: any) => void;
-  disabled?: boolean;
-  error?: string;
-}
-
-function UploadField({
-  field,
-  value,
-  onChange,
-  disabled,
-  error,
-}: UploadFieldProps) {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [preview, setPreview] = useState<string | null>(null);
-  const [isDragging, setIsDragging] = useState(false);
-
-  const isImage = (file: File) => file.type.startsWith("image/");
-
-  const handleFile = (file: File) => {
-    if (isImage(file)) {
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        setPreview(reader.result as string);
-      };
-      reader.readAsDataURL(file);
     }
-    onChange({
-      filename: file.name,
-      size: file.size,
-      type: file.type,
-      url: URL.createObjectURL(file),
-    });
-  };
 
-  const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragging(false);
-    const file = e.dataTransfer.files[0];
-    if (file) handleFile(file);
-  };
+    // Default split layout
+    const showRightColumn = !sidebarCollapsed && !showPreview;
+    const hasSidebarFields =
+      config.fields.some((f) => f.admin?.position === "sidebar") &&
+      !showPreview;
 
-  return (
-    <div className="kyro-form-field">
-      <label className="kyro-form-label">
-        {field.label || field.name}
-        {field.required && <span className="kyro-form-label-required">*</span>}
-      </label>
+    return (
       <div
-        className={`kyro-form-upload ${isDragging ? "kyro-form-upload-dragging" : ""} ${error ? "kyro-form-upload-error" : ""}`}
-        onDragOver={(e) => {
-          e.preventDefault();
-          setIsDragging(true);
-        }}
-        onDragLeave={() => setIsDragging(false)}
-        onDrop={handleDrop}
-        onClick={() => inputRef.current?.click()}
+        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]"
+        }`}
       >
-        <input
-          ref={inputRef}
-          type="file"
-          className="kyro-form-upload-input"
-          onChange={(e) => {
-            const file = e.target.files?.[0];
-            if (file) handleFile(file);
-          }}
-          disabled={disabled}
-          accept={field.mimeTypes?.join(",")}
-        />
-        {preview || value?.url ? (
-          <div className="kyro-form-upload-preview">
-            <img
-              src={preview || value.url}
-              alt="Preview"
-              className="kyro-form-upload-image"
-            />
-            <div className="kyro-form-upload-info">
-              <span className="kyro-form-upload-filename">
-                {value?.filename || "Uploaded file"}
+        <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)
+          ) : (
+            <div className="surface-tile p-8 space-y-8">
+              {config.fields
+                .filter(
+                  (f) => !f.admin?.position || f.admin.position === "main",
+                )
+                .map((f) => renderField(f))}
+            </div>
+          )}
+        </div>
+
+        {showPreview ? (
+          <div className="sticky top-36 h-[calc(100vh-280px)] animate-in fade-in slide-in-from-right-10 duration-700">
+            <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">
+                  Live Preview Mode
+                </span>
+              </div>
+              <iframe
+                src={`/${collectionSlug}/${formData.slug || formData.id}?preview=true`}
+                className="w-full h-full border-none"
+                title="Live Preview"
+              />
+              <div className="absolute inset-0 bg-transparent pointer-events-none border-[12px] border-[var(--kyro-surface)] rounded-3xl" />
+            </div>
+          </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") && (
+              <div className="surface-tile p-6 space-y-6">
+                <h3 className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40">
+                  Settings
+                </h3>
+                {config.fields
+                  .filter((f) => f.admin?.position === "sidebar")
+                  .map((f) => renderField(f))}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const renderVersionView = () => (
+    <div className="w-full animate-in fade-in slide-in-from-bottom-4 pb-12">
+      <div className="surface-tile p-0 overflow-hidden">
+        <div className="px-6 py-4 border-b border-[var(--kyro-border)] flex items-center justify-between">
+          <div>
+            <h2 className="text-lg font-bold text-[var(--kyro-text-primary)]">
+              Version History
+            </h2>
+            <p className="text-[11px] text-[var(--kyro-text-muted)] mt-0.5">
+              {compareMode
+                ? `Select 2 versions · ${compareSelected.length}/2 chosen`
+                : `${versions.length} snapshot${versions.length !== 1 ? "s" : ""} · Auto-saved`}
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            {compareMode && compareSelected.length === 2 && (
+              <button
+                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"
+              >
+                {loadingDiffs ? "Comparing..." : "Compare"}
+              </button>
+            )}
+            <button
+              type="button"
+              onClick={() => {
+                setCompareMode(!compareMode);
+                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)]"
+              }`}
+            >
+              {compareMode ? "Done" : "Compare"}
+            </button>
+          </div>
+        </div>
+
+        {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">
+                {compareDiffs.length} change
+                {compareDiffs.length !== 1 ? "s" : ""}
               </span>
               <button
                 type="button"
-                className="kyro-form-upload-change"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  inputRef.current?.click();
-                }}
+                onClick={() => setCompareDiffs([])}
+                className="p-1 rounded hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-muted)]"
               >
-                Change
+                <svg
+                  className="w-3.5 h-3.5"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2.5"
+                >
+                  <path d="M18 6L6 18M6 6l12 12" />
+                </svg>
               </button>
             </div>
+            <div className="max-h-[400px] overflow-y-auto">
+              {compareDiffs.map((d, i) => (
+                <div
+                  key={i}
+                  className="grid grid-cols-4 gap-3 px-6 py-2.5 text-[11px] font-mono border-t border-[var(--kyro-border)] hover:bg-[var(--kyro-bg-secondary)]"
+                >
+                  <div className="text-[var(--kyro-text-muted)] truncate">
+                    {d.field}
+                  </div>
+                  <div className="text-[var(--kyro-text-muted)] truncate">
+                    {typeof d.oldValue === "object"
+                      ? JSON.stringify(d.oldValue)
+                      : String(d.oldValue ?? "null")}
+                  </div>
+                  <div className="col-span-2 text-[var(--kyro-text-primary)] truncate">
+                    {typeof d.newValue === "object"
+                      ? JSON.stringify(d.newValue)
+                      : String(d.newValue ?? "null")}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {loadingVersions ? (
+          <div className="flex justify-center py-16">
+            <span className="animate-spin text-[var(--kyro-primary)]">⌛</span>
+          </div>
+        ) : versions.length === 0 ? (
+          <div className="text-center py-16 text-[var(--kyro-text-muted)] text-sm italic">
+            No versions yet.
           </div>
         ) : (
-          <div className="kyro-form-upload-placeholder">
-            <svg
-              width="32"
-              height="32"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="1.5"
-            >
-              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-              <polyline points="17,8 12,3 7,8" />
-              <line x1="12" y1="3" x2="12" y2="15" />
-            </svg>
-            <span>Drop image here or click to upload</span>
-            <span className="kyro-form-upload-hint">
-              PNG, JPG, GIF up to 10MB
-            </span>
+          <div className="divide-y divide-[var(--kyro-border)]">
+            {versions.map((v, i) => {
+              const isSelected = compareSelected.includes(v.id);
+              const isDraftVersion = v.status === "draft";
+              const isAutoSaved = (v.changeDescription || "")
+                .toLowerCase()
+                .includes("auto");
+
+              return (
+                <div
+                  key={v.id}
+                  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 ? "" : ""}`}
+                >
+                  <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)]"
+                        }`}
+                      >
+                        {isSelected && (
+                          <svg
+                            className="w-full h-full text-white p-0.5"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="3"
+                          >
+                            <path d="M20 6L9 17l-5-5" />
+                          </svg>
+                        )}
+                      </div>
+                    ) : (
+                      <span className="text-[10px] font-bold text-[var(--kyro-text-muted)] w-5">
+                        {versions.length - i}
+                      </span>
+                    )}
+                  </div>
+                  <div className="col-span-4 min-w-0">
+                    <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">
+                          Auto
+                        </span>
+                      )}
+                    </div>
+                    <div className="text-[11px] text-[var(--kyro-text-muted)]">
+                      {new Date(v.createdAt).toLocaleString("en-US", {
+                        month: "short",
+                        day: "numeric",
+                        hour: "2-digit",
+                        minute: "2-digit",
+                      })}
+                    </div>
+                  </div>
+                  <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)]"
+                        }`}
+                      >
+                        <span
+                          className={`w-1.5 h-1.5 rounded-full ${v.status === "published" ? "bg-[var(--kyro-success)]" : "bg-[var(--kyro-warning)]"}`}
+                        />
+                        {v.status}
+                      </span>
+                    )}
+                  </div>
+                  <div className="col-span-2 text-[11px] text-[var(--kyro-text-muted)]">
+                    {v.createdBy || "system"}
+                  </div>
+                  <div className="col-span-2 flex justify-end">
+                    {!compareMode && (
+                      <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"
+                      >
+                        Restore
+                      </button>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
           </div>
         )}
       </div>
-      {field.admin?.description && !error && (
-        <p className="kyro-form-help">{field.admin.description}</p>
-      )}
-      {error && <p className="kyro-form-error">{error}</p>}
+    </div>
+  );
+
+  const renderApiView = () => (
+    <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>
+          <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)}
+            </pre>
+          </div>
+        </div>
+
+        <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>
+
+            <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">
+                  Reference Path
+                </label>
+                <div className="relative group">
+                  <code className="block bg-[var(--kyro-bg-secondary)] p-4 rounded-xl border border-[var(--kyro-border)] text-[var(--kyro-text-primary)] text-xs font-mono break-all leading-relaxed">
+                    {`/api/${collectionSlug}/${formData.id || ""}`}
+                  </code>
+                </div>
+              </div>
+
+              <div>
+                <label className="text-[10px] font-bold uppercase 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">
+                    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">
+                    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">
+                    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">
+                  Security Policy
+                </label>
+                <div className="space-y-3">
+                  {[
+                    {
+                      id: "auth-required",
+                      label: "Authorization required",
+                      checked: true,
+                    },
+                    {
+                      id: "auth-admin",
+                      label: "System administrator only",
+                      checked: false,
+                    },
+                    {
+                      id: "auth-api",
+                      label: "API Key authentication allowed",
+                      checked: true,
+                    },
+                  ].map((item) => (
+                    <label
+                      key={item.id}
+                      className="flex items-center gap-3 cursor-pointer group"
+                    >
+                      <div
+                        className={`w-4 h-4 rounded border transition-all flex items-center justify-center ${item.checked ? "bg-[var(--kyro-primary)] border-[var(--kyro-primary)]" : "border-[var(--kyro-border)] group-hover:border-[var(--kyro-text-secondary)]"}`}
+                      >
+                        {item.checked && (
+                          <svg
+                            width="10"
+                            height="10"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="white"
+                            strokeWidth="4"
+                          >
+                            <path d="M20 6L9 17l-5-5" />
+                          </svg>
+                        )}
+                      </div>
+                      <span className="text-xs font-medium text-[var(--kyro-text-secondary)] group-hover:text-[var(--kyro-text-primary)] transition-colors">
+                        {item.label}
+                      </span>
+                    </label>
+                  ))}
+                </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-2">
+                  Usage Help
+                </label>
+                <p className="text-[11px] text-[var(--kyro-text-secondary)] leading-relaxed">
+                  Include the{" "}
+                  <code className="text-[var(--kyro-text-primary)] font-bold">
+                    Authorization: Bearer &lt;token&gt;
+                  </code>{" "}
+                  header to perform write operations on this document.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="flex flex-col h-full">
+      {layout !== "single" && renderHeader()}
+      <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>
   );
 }
@@ -963,33 +2291,33 @@ function RelationshipField({
     ? field.relationTo[0]
     : field.relationTo;
 
-  useEffect(() => {
-    if (isOpen) {
-      setLoading(true);
-      fetch(`/api/${targetCollection}?limit=50`)
-        .then((res) => res.json())
-        .then((data) => {
-          setOptions(data.docs || []);
-          setLoading(false);
-        })
-        .catch((err) => {
-          console.error("Failed to fetch relations:", err);
-          setLoading(false);
-        });
-    }
-  }, [isOpen, targetCollection]);
+  const fetchOptions = () => {
+    setLoading(true);
+    fetch(`/api/${targetCollection}?limit=50`)
+      .then((res) => res.json())
+      .then((data) => {
+        setOptions(data.docs || []);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.error("Failed to fetch relations:", err);
+        setLoading(false);
+      });
+  };
 
-  const filteredOptions = options.filter((opt) => {
-    const term = search.toLowerCase();
-    const searchableFields = ["title", "name", "filename", "id", "slug"];
-    return searchableFields.some(
-      (key) => opt[key] && String(opt[key]).toLowerCase().includes(term),
-    );
-  });
+  useEffect(() => {
+    fetchOptions();
+  }, [targetCollection]);
 
   const getLabel = (opt: any) => {
     if (!opt) return "";
-    return opt.title || opt.name || opt.filename || opt.slug || opt.id;
+    return (
+      opt.title || opt.name || opt.label || opt.filename || opt.slug || opt.id
+    );
+  };
+
+  const findOptionById = (id: string) => {
+    return options.find((opt) => opt.id === id);
   };
 
   const isSelected = (optId: string) => {
@@ -1018,6 +2346,33 @@ function RelationshipField({
     }
   };
 
+  const renderSelectedValue = () => {
+    if (!value) return null;
+    if (isMultiple && Array.isArray(value)) {
+      if (value.length === 0) return "None selected";
+      return value
+        .map((v) => {
+          const id = v.id || v;
+          const opt = findOptionById(id);
+          return opt ? getLabel(opt) : id;
+        })
+        .join(", ");
+    }
+    const id = value.id || value;
+    const opt = findOptionById(id);
+    return opt ? getLabel(opt) : id;
+  };
+
+  const filteredOptions = search
+    ? (options || []).filter((opt) => {
+        const term = search.toLowerCase();
+        const searchableFields = ["title", "name", "label", "filename", "slug"];
+        return searchableFields.some(
+          (key) => opt[key] && String(opt[key]).toLowerCase().includes(term),
+        );
+      })
+    : options || [];
+
   return (
     <div className="kyro-form-field">
       <label className="kyro-form-label">
@@ -1041,15 +2396,7 @@ function RelationshipField({
 
         <div className="kyro-form-relationship-value">
           {value ? (
-            isMultiple && Array.isArray(value) ? (
-              value.length > 0 ? (
-                `${value.length} items selected`
-              ) : (
-                "None selected"
-              )
-            ) : (
-              `Selected: ${getLabel(value) || value.id || value}`
-            )
+            renderSelectedValue()
           ) : (
             <span className="kyro-form-relationship-empty">
               Click to search and select...
@@ -1099,7 +2446,7 @@ function RelationshipField({
                   >
                     <span>{getLabel(opt)}</span>
                     <span className="kyro-relation-modal-item-id">
-                      ({opt.id.slice(0, 8)}...)
+                      {opt.id ? `(${String(opt.id).slice(0, 8)}...)` : ""}
                     </span>
                   </button>
                 ))
@@ -1121,3 +2468,41 @@ function RelationshipField({
     </div>
   );
 }
+
+// SEO Utilities
+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>
+);