@kyro-cms/admin 0.10.5 → 0.10.7

package/src/components/AutoForm.tsx

@@ -1,4 +1,4 @@
-import { ChevronRight, Check, ExternalLink, X } from "./ui/icons";
+import { ChevronRight, Check, ExternalLink, X, AlertTriangle } from "./ui/icons";
 import { useState, useRef, useEffect } from "react";
 import type {
   CollectionConfig,
@@ -39,6 +39,10 @@ import type { SplitButtonStatus } from "./ui/SplitButton";
 import { TabsLayout } from "./fields/TabsLayout";
 import { GroupLayout } from "./fields/GroupLayout";
 import { ArrayLayout } from "./fields/ArrayLayout";
+import { AutoFormHeader } from "./autoform/AutoFormHeader";
+import { AutoFormEditView } from "./autoform/AutoFormEditView";
+import { AutoFormVersionView } from "./autoform/AutoFormVersionView";
+import { AutoFormApiView } from "./autoform/AutoFormApiView";
 
 interface AutoFormProps {
   config: CollectionConfig | GlobalConfig;
@@ -57,10 +61,12 @@ interface AutoFormProps {
   documentStatus?: string;
 }
 
+const EMPTY_OBJECT = {};
+
 export function AutoForm({
   config: propConfig,
-  data: initialData = {},
-  errors = {},
+  data: initialData = EMPTY_OBJECT,
+  errors = EMPTY_OBJECT as Record<string, string>,
   onChange,
   disabled: propDisabled,
   collectionSlug,
@@ -72,13 +78,29 @@ export function AutoForm({
   onActionError,
   justSaved,
 }: AutoFormProps) {
-  // Resolve the "live" config to preserve functions (admin.condition) lost during prop serialization
-  const activeConfig = globalSlug
+  // Use the serialized config from the Astro page prop (SSR + client match).
+  // Only fall back to the live client-side config when no prop was passed.
+  const activeConfig = propConfig || (globalSlug
     ? globals[globalSlug]
     : collectionSlug
       ? collections[collectionSlug]
-      : propConfig;
-  const config = activeConfig || propConfig;
+      : null);
+      
+  const [liveConfig, setLiveConfig] = useState<any>(activeConfig);
+  
+  useEffect(() => {
+    if (globalSlug === "storage-settings") {
+      apiGet("/api/kyro/schema").then((schema: any) => {
+        if (schema?.globals?.["storage-settings"]) {
+           setLiveConfig(schema.globals["storage-settings"]);
+        }
+      }).catch(err => console.error("[AutoForm] Failed to fetch dynamic schema", err));
+    } else {
+      setLiveConfig(activeConfig);
+    }
+  }, [globalSlug, activeConfig]);
+
+  const config = liveConfig || activeConfig;
 
 
   const { confirm } = useUIStore();
@@ -135,6 +157,7 @@ export function AutoForm({
     initialData,
     collectionSlug,
     globalSlug,
+    documentId,
     onChange,
     onActionSuccess,
     onActionError,
@@ -147,29 +170,56 @@ export function AutoForm({
   const [now, setNow] = useState(Date.now());
   const disabled = propDisabled;
   const [clientLoading, setClientLoading] = useState(false);
+  const [fetchError, setFetchError] = useState(false);
+  const [retryTick, setRetryTick] = useState(0);
+  const docCacheRef = useRef(new Map<string, { data: Record<string, unknown>; ts: number }>());
+  const CACHE_TTL = 30_000;
 
-  // Client-side fetch when SSR didn't provide data
+  // Client-side fetch with cache, stale-while-revalidate, and abort
   useEffect(() => {
-    const shouldFetchCollection = collectionSlug && documentId && documentId !== "new";
-    const shouldFetchGlobal = globalSlug;
-    if (!shouldFetchCollection && !shouldFetchGlobal) return;
+    const cacheKey = globalSlug ? `global:${globalSlug}` : `${collectionSlug}:${documentId}`;
+    const shouldFetch = globalSlug || (collectionSlug && documentId && documentId !== "new");
+    if (!shouldFetch) return;
     if (initialData && Object.keys(initialData).length > 0) return;
 
-    setClientLoading(true);
+    const cached = docCacheRef.current.get(cacheKey);
+    const isFresh = cached && Date.now() - cached.ts < CACHE_TTL;
+    const isStale = cached && !isFresh;
+
+    // Fresh cache — skip fetch, render immediately
+    if (isFresh) {
+      useAutoFormStore.getState().loadDocument(cached.data, cached.data);
+      return;
+    }
+
+    // Stale cache — render cached data (no shimmer), re-fetch in background
+    if (isStale) {
+      useAutoFormStore.getState().loadDocument(cached.data, cached.data);
+    }
+
+    const abort = new AbortController();
+    setFetchError(false);
+    if (!cached) setClientLoading(true);
+
     const url = globalSlug
       ? `/api/globals/${globalSlug}`
       : `/api/${collectionSlug}/${documentId}`;
 
-    apiGet<{ data?: Record<string, unknown> }>(url, { autoToast: false })
+    apiGet<{ data?: Record<string, unknown> }>(url, { autoToast: false, signal: abort.signal })
       .then((result) => {
         const docData = result.data || {};
-        setFormData(docData);
+        docCacheRef.current.set(cacheKey, { data: docData, ts: Date.now() });
+        useAutoFormStore.getState().loadDocument(docData, docData);
         setClientLoading(false);
       })
-      .catch(() => {
+      .catch((err) => {
+        if (err.name === "AbortError") return;
         setClientLoading(false);
+        if (!cached) setFetchError(true);
       });
-  }, [collectionSlug, documentId, globalSlug, initialData]);
+
+    return () => abort.abort();
+  }, [collectionSlug, documentId, globalSlug, initialData, retryTick]);
 
   // Tick every 10s so the "saved X ago" label stays fresh
   useEffect(() => {
@@ -412,7 +462,11 @@ export function AutoForm({
           );
           if (response?.ok) {
             onActionSuccess?.("Document unpublished successfully");
-            location.reload();
+            const state = useAutoFormStore.getState();
+            state.loadDocument(
+              { ...formData, status: 'draft' } as Record<string, unknown>,
+              { ...formData, status: 'draft' } as Record<string, unknown>,
+            );
           } else {
             const error = await response?.json().catch(() => ({}));
             toast.error(error?.error || "Failed to unpublish");
@@ -515,8 +569,6 @@ export function AutoForm({
       if (response?.ok) {
         setLocalSaveStatus("saved");
         onActionSuccess?.("Published successfully");
-        await new Promise((r) => setTimeout(r, 1000));
-        location.reload();
       } else {
         const error = await response?.json().catch(() => ({}));
         if (response?.status === 409) setAutoSaveStatus("conflict");
@@ -881,959 +933,6 @@ export function AutoForm({
     }
   };
 
-  const renderHeader = () => {
-    const docTitle = String(
-      (formData.mainTabs as { title?: string })?.title ||
-      (typeof formData.title === "object" ? "" : formData.title) ||
-      (typeof formData.name === "object" ? "" : formData.name) ||
-      "Untitled",
-    );
-    // Use status from the document (merged from version table on draft reads)
-    const docStatus = documentStatus ?? formData.status ?? 'draft';
-    const isNew = !formData.id;
-    const lastModified = formData.updatedAt
-      ? new Date(formData.updatedAt as string).toLocaleString()
-      : "Just now";
-    const createdAt = formData.createdAt
-      ? new Date(formData.createdAt as string).toLocaleString()
-      : "Just now";
-
-    const isDraftMode = !formData.id || documentStatus === 'draft';
-
-    // Status label shown in the header
-    const statusLabel = hasUnpublishedChanges
-      ? 'Draft (unpublished changes)'
-      : docStatus === 'published'
-        ? 'Published'
-        : 'Draft';
-
-    // Compact status label for mobile
-    const statusLabelMobile = hasUnpublishedChanges
-      ? 'Unpublished'
-      : docStatus === 'published'
-        ? 'Published'
-        : 'Draft';
-
-    const statusColor = docStatus === 'published' && !hasUnsavedChanges
-      ? 'bg-[var(--kyro-success)]'
-      : hasUnpublishedChanges
-        ? 'bg-[var(--kyro-warning)]'
-        : 'bg-[var(--kyro-text-muted)]';
-
-    const statusBadgeBg = docStatus === 'published' && !hasUnpublishedChanges
-      ? 'bg-[var(--kyro-success)]/10 text-[var(--kyro-success)] border-[var(--kyro-success)]/20'
-      : hasUnpublishedChanges
-        ? 'bg-[var(--kyro-warning)]/10 text-[var(--kyro-warning)] border-[var(--kyro-warning)]/20'
-        : 'bg-[var(--kyro-text-muted)]/10 text-[var(--kyro-text-muted)] border-[var(--kyro-text-muted)]/20';
-
-    /* ── Auto-save status indicator (shared between mobile and desktop) ─── */
-    const renderAutoSaveStatus = (compact = false) => (
-      <>
-        {autoSaveStatus === "saving" && (
-          <span className="flex items-center gap-1.5 text-[var(--kyro-text-muted)]">
-            <svg
-              className="animate-spin h-3 w-3 shrink-0"
-              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>
-            {compact ? "Saving…" : "Saving draft..."}
-          </span>
-        )}
-        {autoSaveStatus === "success" && (
-          <span className="text-[var(--kyro-success)] flex items-center gap-1">
-            <Check className="w-3.5 h-3.5 shrink-0" />
-            {compact
-              ? "Saved"
-              : lastSavedAt ? `Saved ${Math.floor((Date.now() - lastSavedAt) / 60000)}m ago` : "Draft saved"}
-          </span>
-        )}
-        {autoSaveStatus === "retrying" && (
-          <span className="text-[var(--kyro-warning)] flex items-center gap-1.5">
-            <svg className="animate-spin h-3 w-3 shrink-0" 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>
-            {compact ? `Retry ${retryCount}/5` : `Retrying save (${retryCount}/5)`}
-          </span>
-        )}
-        {autoSaveStatus === "offline" && (
-          <span className="text-[var(--kyro-text-muted)] flex items-center gap-1.5">
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0">
-              <path d="M10.61 10.61a3 3 0 0 0 4.24 4.24" />
-              <path d="M13.36 13.36a3 3 0 0 0-4.24-4.24" />
-              <path d="m2 2 20 20" />
-              <path d="M18.36 5.64a9 9 0 0 0-12.72 0" />
-              <path d="M22.61 1.39a15 15 0 0 0-21.22 0" />
-            </svg>
-            {compact ? "Offline" : "Offline — cached locally"}
-          </span>
-        )}
-        {autoSaveStatus === "error" && (
-          <span className="text-[var(--kyro-danger)]">{compact ? "Failed" : "Draft save failed"}</span>
-        )}
-        {autoSaveStatus === "conflict" && (
-          compact ? (
-            <span className="text-[var(--kyro-danger)] font-semibold">Conflict</span>
-          ) : (
-            <div className="flex items-center gap-3">
-              <span className="text-[var(--kyro-danger)] font-semibold">Conflict detected</span>
-              <span className="opacity-30">—</span>
-              <button
-                type="button"
-                onClick={async () => {
-                  await saveDocument(formData);
-                  setAutoSaveStatus("success");
-                }}
-                className="text-[var(--kyro-primary)] hover:underline"
-              >
-                Keep my changes
-              </button>
-              <span className="opacity-30">|</span>
-              <button
-                type="button"
-                onClick={() => {
-                  window.location.reload();
-                }}
-                className="text-[var(--kyro-danger)] hover:underline"
-              >
-                Reload server version
-              </button>
-            </div>
-          )
-        )}
-      </>
-    );
-
-    /* ── Kebab dropdown (shared between mobile and desktop) ──────────────── */
-    const renderKebabMenu = () => !isNew && (
-      <Dropdown
-        trigger={
-          <button
-            type="button"
-            className="kyro-btn p-2 md:p-2.5 rounded-xl border border-[var(--kyro-border)] hover:bg-[var(--kyro-bg-secondary)] transition-all"
-            title="More actions"
-          >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-              <circle cx="12" cy="5" r="1.5" />
-              <circle cx="12" cy="12" r="1.5" />
-              <circle cx="12" cy="19" r="1.5" />
-            </svg>
-          </button>
-        }
-        direction="down"
-      >
-        {!globalSlug && (
-          <DropdownItem
-            onClick={handleCreateNew}
-            icon={
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <line x1="12" y1="5" x2="12" y2="19" />
-                <line x1="5" y1="12" x2="19" y2="12" />
-              </svg>
-            }
-          >
-            Create New
-          </DropdownItem>
-        )}
-        {!globalSlug && (
-          <DropdownItem
-            onClick={handleDuplicate}
-            icon={
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
-                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-              </svg>
-            }
-          >
-            Duplicate
-          </DropdownItem>
-        )}
-        <DropdownItem
-          onClick={() => setShowSchedulePicker(true)}
-          icon={
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
-              <line x1="16" y1="2" x2="16" y2="6" />
-              <line x1="8" y1="2" x2="8" y2="6" />
-              <line x1="3" y1="10" x2="21" y2="10" />
-            </svg>
-          }
-        >
-          Schedule Publish
-        </DropdownItem>
-        {documentStatus === "published" && (
-          <DropdownItem
-            onClick={handleUnpublish}
-            icon={
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <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" />
-                <line x1="1" y1="1" x2="23" y2="23" />
-              </svg>
-            }
-          >
-            Unpublish
-          </DropdownItem>
-        )}
-        {!globalSlug && (
-          <>
-            <DropdownSeparator />
-            <DropdownItem
-              onClick={handleDelete}
-              danger
-              icon={
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                  <polyline points="3 6 5 6 21 6" />
-                  <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" />
-                </svg>
-              }
-            >
-              Delete
-            </DropdownItem>
-          </>
-        )}
-      </Dropdown>
-    );
-
-    /* ── Schedule picker popover (shared) ──────────────────────────────── */
-    const renderSchedulePicker = () => showSchedulePicker && (
-      <div ref={scheduleRef} className="relative">
-        <div className="absolute right-0 top-2 p-4 rounded-lg border border-[var(--kyro-border)] bg-[var(--kyro-surface)] shadow-2xl z-50 min-w-[260px]">
-          <p className="text-xs font-medium mb-2">Schedule Publish</p>
-          <input
-            type="datetime-local"
-            id="schedule-datetime"
-            className="kyro-form-input text-xs mb-3 w-full"
-            min={new Date().toISOString().slice(0, 16)}
-          />
-          <div className="flex items-center gap-2 justify-end">
-            <button
-              type="button"
-              onClick={() => setShowSchedulePicker(false)}
-              className="px-3 py-1.5 text-xs kyro-btn rounded-lg"
-            >
-              Cancel
-            </button>
-            <button
-              type="button"
-              onClick={() => {
-                const val = (document.getElementById("schedule-datetime") as HTMLInputElement)?.value;
-                if (val) handleSchedulePublish(val);
-              }}
-              className="px-3 py-1.5 text-xs kyro-btn-success rounded-lg"
-            >
-              Schedule
-            </button>
-          </div>
-        </div>
-      </div>
-    );
-
-    return (
-      <>
-        {/* ═══════════════════════════════════════════════════════════════════
-            MOBILE HEADER  (< md)
-            Two rows: top = nav + title + actions, bottom = toolbar
-        ════════════════════════════════════════════════════════════════════ */}
-        <header className="md:hidden border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)] backdrop-blur-md rounded-lg">
-          {/* ── Row 1: Back, Title, Status, Primary actions ─────────────── */}
-          <div className="flex items-center gap-2 px-3 py-2.5">
-            {/* Back button */}
-            <a
-              href={`/${collectionSlug}`}
-              className="p-1.5 rounded-lg hover:bg-[var(--kyro-bg-secondary)] transition-colors shrink-0"
-              aria-label="Back to list"
-            >
-              <ChevronRight className="w-4 h-4" />
-            </a>
-
-            {/* Title + status badge */}
-            <div className="flex items-center gap-2 min-w-0 flex-1">
-              <h1 className="text-base font-bold tracking-tight truncate min-w-0">{docTitle}</h1>
-              <span className={`shrink-0 inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[9px] font-medium border ${statusBadgeBg}`}>
-                <span className={`h-1.5 w-1.5 rounded-full ${statusColor}`} />
-                {statusLabelMobile}
-              </span>
-            </div>
-
-            {/* Primary actions: Publish + Kebab */}
-            <div className="flex items-center gap-1.5 shrink-0">
-              <SplitButton
-                status={documentStatus as SplitButtonStatus}
-                saveStatus={localSaveStatus}
-                hasChanges={hasUnsavedChanges}
-                onPublish={handlePublish}
-                disabled={localSaveStatus === "saving"}
-              />
-              {renderKebabMenu()}
-              {renderSchedulePicker()}
-            </div>
-          </div>
-
-          {/* ── Row 2: Compact toolbar ─────────────────────────────────── */}
-          <div className="flex items-center justify-between px-3 py-1.5 border-t border-[var(--kyro-border)]/50 bg-[var(--kyro-bg-secondary)]/30">
-            {/* View tabs (compact pill style) */}
-            <div className="flex items-center gap-0.5 bg-[var(--kyro-bg-secondary)] p-0.5 rounded-lg border border-[var(--kyro-border)]/50">
-              {(["edit", "version", "api"] as const).map((v) => (
-                <button
-                  key={v}
-                  type="button"
-                  onClick={() => setView(v as View)}
-                  className={`px-3 py-1 text-[10px] font-bold rounded-md 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 active:opacity-100"
-                    }`}
-                >
-                  {v === "edit" ? "Edit" : v === "version" ? "History" : "API"}
-                </button>
-              ))}
-            </div>
-
-            {/* Auto-save status + utility buttons */}
-            <div className="flex items-center gap-2 text-[10px] font-medium">
-              {renderAutoSaveStatus(true)}
-
-              {hasUnsavedChanges && autoSaveStatus !== "saving" && autoSaveStatus !== "retrying" && autoSaveStatus !== "conflict" && (
-                <button
-                  type="button"
-                  onClick={async () => {
-                    setFormData(lastSavedData);
-                    markSaved();
-                  }}
-                  className="text-[var(--kyro-primary)] text-[10px] font-medium hover:underline"
-                >
-                  Revert
-                </button>
-              )}
-
-              <div className="h-4 w-px bg-[var(--kyro-border)] mx-0.5" />
-
-              {/* Preview toggle */}
-              <button
-                type="button"
-                onClick={() => setShowPreview(!showPreview)}
-                className={`p-1.5 rounded-lg transition-all ${showPreview
-                  ? "bg-[var(--kyro-primary)]/10 text-[var(--kyro-primary)]"
-                  : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-bg-secondary)]"
-                  }`}
-                title="Live Preview"
-              >
-                <ExternalLink className="w-3.5 h-3.5" />
-              </button>
-            </div>
-          </div>
-
-          {/* ── Mobile conflict resolution bar (shown when conflict detected) */}
-          {autoSaveStatus === "conflict" && (
-            <div className="flex items-center justify-between gap-2 px-3 py-2 border-t border-[var(--kyro-danger)]/30 bg-[var(--kyro-danger)]/5">
-              <span className="text-[11px] font-semibold text-[var(--kyro-danger)]">Conflict detected</span>
-              <div className="flex items-center gap-2">
-                <button
-                  type="button"
-                  onClick={async () => {
-                    await saveDocument(formData);
-                    setAutoSaveStatus("success");
-                  }}
-                  className="text-[11px] font-medium text-[var(--kyro-primary)] hover:underline"
-                >
-                  Keep mine
-                </button>
-                <span className="text-[var(--kyro-text-muted)] opacity-30">|</span>
-                <button
-                  type="button"
-                  onClick={() => window.location.reload()}
-                  className="text-[11px] font-medium text-[var(--kyro-danger)] hover:underline"
-                >
-                  Reload
-                </button>
-              </div>
-            </div>
-          )}
-        </header>
-
-        {/* ═══════════════════════════════════════════════════════════════════
-            DESKTOP HEADER  (≥ md)
-            Original single-row layout preserved
-        ════════════════════════════════════════════════════════════════════ */}
-        <header className="hidden md:flex surface-tile px-8 py-6 items-center justify-between sticky top-0 border-b border-[var(--kyro-border)] mb-8 bg-[var(--kyro-surface)] backdrop-blur-md">
-          <div className="flex flex-col gap-2 min-w-0">
-            <div className="flex items-center gap-3 flex-wrap min-w-0">
-              <a
-                href={`/${collectionSlug}`}
-                className="p-2 border border-[var(--kyro-border)] rounded-xl hover:bg-[var(--kyro-bg-secondary)] transition-colors shrink-0"
-              >
-                <ChevronRight className="w-4 h-4" />
-              </a>
-              <h1 className="text-xl font-bold tracking-tighter truncate min-w-0">{docTitle}</h1>
-              <span className={`shrink-0 inline-flex items-center gap-1.5 px-2 rounded-full text-[10px] font-regular border ${statusBadgeBg}`}>
-                <span className={`h-1.5 w-1.5 rounded-full ${statusColor}`} />
-                {statusLabel}
-              </span>
-            </div>
-            <div className="flex items-center gap-4 text-[11px] font-medium tracking-wide opacity-60 ml-12">
-              {renderAutoSaveStatus(false)}
-              {hasUnsavedChanges && autoSaveStatus !== "saving" && autoSaveStatus !== "retrying" && autoSaveStatus !== "conflict" && (
-                <>
-                  <span className="opacity-30">—</span>
-                  <button
-                    type="button"
-                    onClick={async () => {
-                      setFormData(lastSavedData);
-                      markSaved();
-                    }}
-                    className="text-[var(--kyro-primary)] hover:underline"
-                  >
-                    Revert changes
-                  </button>
-                </>
-              )}
-              {/* Live auto-save timestamp */}
-              {lastSavedAt && autoSaveStatus !== "saving" && autoSaveStatus !== "retrying" && autoSaveStatus !== "success" && (
-                <span className="border-l border-[var(--kyro-border)] pl-4">
-                  Draft saved {(() => {
-                    const diffMs = now - lastSavedAt;
-                    const diffMin = Math.floor(diffMs / 60_000);
-                    const diffSec = Math.floor(diffMs / 1_000);
-                    if (diffMin >= 1) return `${diffMin}m ago`;
-                    if (diffSec >= 5) return `${diffSec}s ago`;
-                    return "just now";
-                  })()}
-                </span>
-              )}
-              <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>
-
-          <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 View)}
-                  className={`px-5 py-2 text-xs font-bold rounded-lg transition-all ${view === v ? "bg-[var(--kyro-surface)] shadow-sm border border-[var(--kyro-border)] text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)] opacity-50 hover:opacity-100"}`}
-                >
-                  {v.toUpperCase()}
-                </button>
-              ))}
-            </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={`kyro-btn p-2.5 rounded-xl transition-all flex items-center gap-2 ${showPreview ? "shadow-lg" : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-bg-secondary)]"}`}
-                title="Live Preview"
-              >
-                <ExternalLink className="w-4 h-4" />
-                {showPreview && (
-                  <span className="text-[10px] font-bold  tracking-widest pr-1">
-                    Active
-                  </span>
-                )}
-              </button>
-              <button
-                type="button"
-                onClick={() => {
-                  window.dispatchEvent(new CustomEvent("toggle-sidebar"));
-                }}
-                className={`kyro-btn p-2.5 rounded-xl transition-all ${sidebarCollapsed ? "" : "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>
-
-              {/* ── Publish button (no dropdown) ──────────────────────────────── */}
-              <SplitButton
-                status={documentStatus as SplitButtonStatus}
-                saveStatus={localSaveStatus}
-                hasChanges={hasUnsavedChanges}
-                onPublish={handlePublish}
-                disabled={localSaveStatus === "saving"}
-              />
-
-              {/* ── Kebab: document management actions ───────────────────────── */}
-              {renderKebabMenu()}
-
-              {renderSchedulePicker()}
-            </div>
-          </div>
-        </header>
-      </>
-    );
-  };
-
-  const renderEditView = () => {
-    // Single layout: no split grid, no sidebar column — just a clean field list
-    if (layout === "single") {
-      return (
-        <div className="w-full space-y-6 md:space-y-8">
-          <div className="surface-tile p-4 md:p-8 space-y-6 md:space-y-8">
-            {config.fields.map((f: Field) => renderField(f))}
-          </div>
-        </div>
-      );
-    }
-
-    // Default split layout
-    const showRightColumn = !sidebarCollapsed && !showPreview;
-    const hasSidebarFields =
-      config.fields.some((f: Field) => f.admin?.position === "sidebar") &&
-      !showPreview;
-
-    return (
-      <div
-        className={`w-full mx-auto grid gap-4 md:gap-8 pb-32 transition-all duration-700 ${showPreview
-          ? "grid-cols-1 lg:grid-cols-2"
-          : sidebarCollapsed || !hasSidebarFields
-            ? "grid-cols-1"
-            : "grid-cols-1 lg:grid-cols-[1fr_380px]"
-          }`}
-      >
-        <div className="space-y-6 md:space-y-8 animate-in fade-in slide-in-from-left-4 duration-500">
-          {config.tabs ? (
-            renderField({ type: "tabs", tabs: config.tabs } as Field)
-          ) : (
-            <div className="surface-tile p-4 md:p-8 space-y-6 md:space-y-8">
-              {config.fields
-                .filter(
-                  (f: Field) => !f.admin?.position || f.admin.position === "main",
-                )
-                .map((f: Field) => 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-bold  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-4 md:space-y-6 animate-in fade-in slide-in-from-right-4 duration-500">
-            {config.fields.some((f: Field) => f.admin?.position === "sidebar") && (
-              <div className="surface-tile p-4 md:p-6 space-y-4 md:space-y-6">
-                <h3 className="text-[10px] font-bold  tracking-[0.2em] opacity-40">
-                  Settings
-                </h3>
-                {config.fields
-                  .filter((f: Field) => f.admin?.position === "sidebar")
-                  .map((f: Field) => 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-4 md:px-6 py-3 md:py-4 border-b border-[var(--kyro-border)] flex flex-col md:flex-row md:items-center justify-between gap-2">
-          <div>
-            <h2 className="text-base md: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="kyro-btn kyro-btn-primary px-3 py-1.5 rounded-lg text-[11px] font-bold 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  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)]  tracking-wider">
-                {compareDiffs.length} change
-                {compareDiffs.length !== 1 ? "s" : ""}
-              </span>
-              <button
-                type="button"
-                onClick={() => setCompareDiffs([])}
-                className="p-1 rounded hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-muted)]"
-              >
-                <X className="w-4 h-4" />
-              </button>
-            </div>
-            <div className="max-h-[400px] overflow-y-auto">
-              {compareDiffs.map((d, i) => (
-                <div
-                  key={i}
-                  className="flex flex-col md:grid md:grid-cols-4 gap-1 md:gap-3 px-4 md: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 font-semibold md:font-normal">
-                    {d.field}
-                  </div>
-                  <div className="text-[var(--kyro-text-muted)] truncate hidden md:block">
-                    {typeof d.oldValue === "object"
-                      ? JSON.stringify(d.oldValue)
-                      : String(d.oldValue ?? "null")}
-                  </div>
-                  <div className="md:col-span-2 text-[var(--kyro-text-primary)] truncate">
-                    <span className="md:hidden text-[var(--kyro-text-muted)]">→ </span>
-                    {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="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={`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)]"
-                    }`}
-                >
-                  {/* ── Desktop: grid row ─────────────────────────────── */}
-                  <div className="hidden md:grid grid-cols-12 gap-3 px-6 py-3 items-center">
-                    <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 && (
-                            <Check className="w-4 h-4" />
-                          )}
-                        </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  tracking-wider">
-                            Auto
-                          </span>
-                        )}
-                      </div>
-                      <div className="text-[11px] text-[var(--kyro-text-muted)]">
-                        {new Date(v.createdAt as string).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 tracking-wider text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:border-[var(--kyro-primary)] transition-all active:scale-95"
-                        >
-                          Restore
-                        </button>
-                      )}
-                    </div>
-                  </div>
-
-                  {/* ── Mobile: card layout ───────────────────────────── */}
-                  <div className="md:hidden flex items-start gap-3 px-4 py-3">
-                    {/* Left: index or compare checkbox */}
-                    <div className="pt-0.5 shrink-0">
-                      {compareMode ? (
-                        <div
-                          className={`w-4 h-4 rounded-full border ${isSelected
-                            ? "border-[var(--kyro-primary)] bg-[var(--kyro-primary)]"
-                            : "border-[var(--kyro-border)]"
-                            }`}
-                        >
-                          {isSelected && <Check className="w-4 h-4" />}
-                        </div>
-                      ) : (
-                        <span className="text-[10px] font-bold text-[var(--kyro-text-muted)] w-5 inline-block text-center">
-                          {versions.length - i}
-                        </span>
-                      )}
-                    </div>
-
-                    {/* Center: description, date, status */}
-                    <div className="flex-1 min-w-0">
-                      <div className="text-[13px] font-medium text-[var(--kyro-text-primary)] truncate flex items-center gap-1.5">
-                        {v.changeDescription || "Snapshot"}
-                        {isAutoSaved && (
-                          <span className="text-[9px] px-1 py-0.5 bg-[var(--kyro-bg-secondary)] text-[var(--kyro-text-secondary)] rounded font-bold tracking-wider shrink-0">
-                            Auto
-                          </span>
-                        )}
-                      </div>
-                      <div className="flex items-center gap-2 mt-1 flex-wrap">
-                        <span className="text-[11px] text-[var(--kyro-text-muted)]">
-                          {new Date(v.createdAt as string).toLocaleString("en-US", {
-                            month: "short",
-                            day: "numeric",
-                            hour: "2-digit",
-                            minute: "2-digit",
-                          })}
-                        </span>
-                        {v.status && (
-                          <span
-                            className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[9px] font-bold capitalize tracking-wider ${v.status === "published"
-                              ? "text-[var(--kyro-success)]"
-                              : "text-[var(--kyro-warning)]"
-                              }`}
-                          >
-                            <span
-                              className={`w-1 h-1 rounded-full ${v.status === "published" ? "bg-[var(--kyro-success)]" : "bg-[var(--kyro-warning)]"}`}
-                            />
-                            {v.status}
-                          </span>
-                        )}
-                        <span className="text-[10px] text-[var(--kyro-text-muted)] opacity-60">
-                          {v.createdBy || "system"}
-                        </span>
-                      </div>
-                    </div>
-
-                    {/* Right: restore button */}
-                    {!compareMode && (
-                      <button
-                        type="button"
-                        onClick={() => handleRestoreVersion(v.id)}
-                        className="shrink-0 px-2.5 py-1 rounded-lg border border-[var(--kyro-border)] text-[10px] font-bold tracking-wider text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:border-[var(--kyro-primary)] transition-all active:scale-95"
-                      >
-                        Restore
-                      </button>
-                    )}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        )}
-      </div>
-    </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-bold mb-6">Response Payload</h2>
-          <div className="bg-[#0f172a] p-6 rounded-2xl border border-white/5 overflow-x-auto max-h-[800px]">
-            <pre className="text-blue-300 text-xs font-mono whitespace-pre-wrap break-all">
-              {JSON.stringify(formData, null, 2)}
-            </pre>
-          </div>
-        </div>
-
-        <div className="space-y-6">
-          <div className="surface-tile p-8 space-y-6">
-            <h2 className="text-xl font-bold mb-6">API Info</h2>
-
-            <div className="space-y-6">
-              <div>
-                <label className="text-[10px] font-bold  tracking-[0.1em] text-[var(--kyro-text-secondary)] opacity-50 block mb-2">
-                  Reference Path
-                </label>
-                <div className="relative group">
-                  <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  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-bold text-[9px]  tracking-wider">
-                    GET
-                  </span>
-                  <span className="px-3 py-1.5 bg-amber-500/10 text-amber-500 rounded-lg font-bold text-[9px]  tracking-wider">
-                    PATCH
-                  </span>
-                  <span className="px-3 py-1.5 bg-red-500/10 text-red-500 rounded-lg font-bold text-[9px]  tracking-wider">
-                    DELETE
-                  </span>
-                </div>
-              </div>
-
-              <div className="pt-6 border-t border-[var(--kyro-border)]">
-                <label className="text-[10px] font-bold  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 && (
-                          <Check className="w-4 h-4" />
-                        )}
-                      </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  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>
-  );
-
   if (clientLoading) {
     return (
       <div className="space-y-6 p-4">
@@ -1848,9 +947,45 @@ export function AutoForm({
     );
   }
 
+  if (fetchError) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-4 p-16">
+        <AlertTriangle className="w-8 h-8 text-[var(--kyro-danger)]" />
+        <p className="text-sm text-[var(--kyro-text-secondary)]">
+          Failed to load document. Check your connection.
+        </p>
+        <button
+          type="button"
+          onClick={() => {
+            setFetchError(false);
+            setClientLoading(true);
+            setRetryTick((n) => n + 1);
+          }}
+          className="kyro-btn kyro-btn-primary px-6 py-2 rounded-xl text-sm font-bold"
+        >
+          Retry
+        </button>
+      </div>
+    );
+  }
+
   return (
     <div className="flex flex-col h-full">
-      {layout !== "single" && renderHeader()}
+      {layout !== "single" && (
+        <AutoFormHeader
+          collectionSlug={collectionSlug}
+          globalSlug={globalSlug}
+          documentStatus={documentStatus || "draft"}
+          hasUnpublishedChanges={hasUnpublishedChanges}
+          localSaveStatus={localSaveStatus}
+          handleCreateNew={handleCreateNew}
+          handleDuplicate={handleDuplicate}
+          handleUnpublish={handleUnpublish}
+          handleDelete={handleDelete}
+          handlePublish={handlePublish}
+          handleSchedulePublish={handleSchedulePublish}
+        />
+      )}
       {layout === "single" && (
         <>
           <div className="flex items-center justify-between px-4 py-2 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)]">
@@ -1905,7 +1040,7 @@ export function AutoForm({
             style={{ width: 0, height: 0, opacity: 0, padding: 0, margin: 0, border: 'none', position: 'absolute' }}
             onClick={async () => {
               try {
-                const response = await saveDocument();
+                const response = await saveDocument(formData);
                 if (response.ok) {
                   const result = await response.json();
                   const savedData = result.data || formData;
@@ -1922,225 +1057,32 @@ export function AutoForm({
         </>
       )}
       <main className="w-full pt-6 md:pt-0">
-        {view === "edit" && renderEditView()}
-        {view === "version" && renderVersionView()}
-        {view === "api" && renderApiView()}
+        {view === "edit" && (
+          <AutoFormEditView
+            config={config}
+            layout={layout}
+            collectionSlug={collectionSlug}
+            renderField={renderField}
+          />
+        )}
+        {view === "version" && (
+          <AutoFormVersionView
+            handleRestoreVersion={handleRestoreVersion}
+            handleCompareVersions={handleCompareVersions}
+            toggleCompareSelection={toggleCompareSelection}
+          />
+        )}
+        {view === "api" && (
+          <AutoFormApiView
+            collectionSlug={collectionSlug}
+            globalSlug={globalSlug}
+          />
+        )}
       </main>
     </div>
   );
 }
 
-interface RelationshipFieldProps {
-  field: Field;
-  value?: unknown;
-  onChange?: (value: unknown) => void;
-  disabled?: boolean;
-  error?: string;
-}
-
-function RelationshipField({
-  field,
-  value,
-  onChange,
-  disabled,
-  error,
-}: RelationshipFieldProps) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [search, setSearch] = useState("");
-  const [options, setOptions] = useState<unknown[]>([]);
-  const [loading, setLoading] = useState(false);
-
-  const isMultiple = field.hasMany;
-  const targetCollection = Array.isArray(field.relationTo)
-    ? field.relationTo[0]
-    : field.relationTo;
-
-  const fetchOptions = () => {
-    setLoading(true);
-    fetchWithAuth(`/api/${targetCollection}?limit=50`)
-      .then((res) => res.json())
-      .then((data) => {
-        setOptions((data.docs || []) as unknown[]);
-        setLoading(false);
-      })
-      .catch((err) => {
-        console.error("Failed to fetch relations:", err);
-        setLoading(false);
-      });
-  };
-
-  useEffect(() => {
-    fetchOptions();
-  }, [targetCollection]);
-
-  const getLabel = (opt: unknown) => {
-    const o = opt as Record<string, unknown> | undefined;
-    if (!o) return "";
-    return String(
-      o.title || o.name || o.label || o.filename || o.slug || o.id || "",
-    );
-  };
-
-  const findOptionById = (id: unknown) => {
-    return (options as Array<Record<string, unknown>>).find(
-      (o) => o.id === id,
-    );
-  };
-
-  const isSelected = (optId: string) => {
-    if (!value) return false;
-    if (isMultiple) {
-      const arr = Array.isArray(value) ? value : [];
-      return (arr as Array<{ id?: string }>).some((v) => (v.id || v) === optId);
-    }
-    return ((value as { id?: string })?.id || value) === optId;
-  };
-
-  const toggleSelection = (opt: { id?: string }) => {
-    if (isMultiple) {
-      const current = Array.isArray(value) ? value : [];
-      const arr = current as Array<{ id?: string }>;
-      if (isSelected(opt.id as string)) {
-        onChange?.(arr.filter((item) => (item.id || item) !== opt.id));
-      } else {
-        onChange?.([...arr, opt.id]);
-      }
-    } else {
-      if (isSelected(opt.id as string)) {
-        onChange?.(null);
-      } else {
-        onChange?.(opt.id);
-        setIsOpen(false);
-      }
-    }
-  };
-
-  const renderSelectedValue = () => {
-    if (!value) return null;
-    if (isMultiple && Array.isArray(value)) {
-      if (value.length === 0) return "None selected";
-      const arr = value as Array<{ id?: string }>;
-      return arr
-        .map((v) => {
-          const id = v.id || v;
-          const opt = findOptionById(id);
-          return opt ? getLabel(opt) : String(id);
-        })
-        .join(", ");
-    }
-    const id = (value as { id?: string }).id || value;
-    const opt = findOptionById(id);
-    return opt ? getLabel(opt) : String(id);
-  };
-
-  const filteredOptions = (search
-    ? (options || []).filter((opt) => {
-      const o = opt as Record<string, unknown>;
-      const term = search.toLowerCase();
-      const searchableFields = ["title", "name", "label", "filename", "slug"];
-      return searchableFields.some(
-        (key) => o[key] && String(o[key]).toLowerCase().includes(term),
-      );
-    })
-    : options || []) as Array<Record<string, unknown>>;
-
-  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>
-
-      <div
-        className="kyro-form-relationship"
-        onClick={() => !disabled && setIsOpen(true)}
-        style={disabled ? { opacity: 0.5, cursor: "not-allowed" } : {}}
-      >
-        <div className="kyro-form-relationship-header">
-          <span className="kyro-form-relationship-type">
-            {targetCollection}
-          </span>
-          {isMultiple && (
-            <span className="kyro-form-relationship-badge">Multiple</span>
-          )}
-        </div>
-
-        <div className="kyro-form-relationship-value">
-          {value ? (
-            renderSelectedValue()
-          ) : (
-            <span className="kyro-form-relationship-empty">
-              Click to search and select...
-            </span>
-          )}
-        </div>
-      </div>
-
-      {(field.admin?.description && !error) ? (
-        <p className="kyro-form-help">{String((field.admin as { description?: string }).description)}</p>
-      ) : null}
-      {error && <p className="kyro-form-error">{error}</p>}
-
-      {/* Modal */}
-      {isOpen && (
-        <div className="kyro-modal-overlay" onClick={() => setIsOpen(false)}>
-          <div
-            className="kyro-relation-modal"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="kyro-relation-modal-header">
-              <h3>Select {field.label || field.name}</h3>
-              <input
-                type="text"
-                autoFocus
-                placeholder={`Search in ${targetCollection}...`}
-                className="kyro-relation-modal-search"
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-              />
-            </div>
-
-            <div className="kyro-relation-modal-list">
-              {loading ? (
-                <div className="kyro-relation-modal-empty">Loading...</div>
-              ) : filteredOptions.length === 0 ? (
-                <EmptyState title="No results found." />
-              ) : (
-                filteredOptions.map((opt) => {
-                  const o = opt as { id?: string };
-                  return (
-                    <button
-                      key={String(o.id)}
-                      type="button"
-                      className={`kyro-relation-modal-item ${isSelected(String(o.id)) ? "selected" : ""}`}
-                      onClick={() => toggleSelection(o)}
-                    >
-                      <span>{getLabel(opt)}</span>
-                      <span className="kyro-relation-modal-item-id">
-                        {o.id ? `(${String(o.id).slice(0, 8)}...)` : ""}
-                      </span>
-                    </button>
-                  );
-                })
-              )}
-            </div>
-
-            <div className="kyro-relation-modal-footer">
-              <button
-                type="button"
-                className="kyro-btn kyro-btn-secondary kyro-btn-sm"
-                onClick={() => setIsOpen(false)}
-              >
-                Done
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
 // SEO Utilities
 function stripHtml(html: string) {
   if (typeof html !== "string") return "";