@kyro-cms/admin 0.9.0 → 0.9.2

package/src/components/AutoForm.tsx

@@ -1,3 +1,4 @@
+import { ChevronRight, Check, ExternalLink, X } from "./ui/icons";
 import { useState, useRef, useEffect } from "react";
 import type {
   CollectionConfig,
@@ -18,18 +19,22 @@ import TextField from "./fields/TextField";
 import { globals, collections } from "../lib/config";
 import { slugifyText } from "../lib/slugify";
 import { resolveUrl, apiDelete, fetchWithAuth } from "../lib/api";
+import { normalizeUploadFields } from "../lib/normalize-upload-fields";
 import { useAutoFormStore } from "../lib/autoform-store";
 import { useAutoFormState } from "../hooks/useAutoFormState";
-import { useUIStore } from "../lib/stores";
+import { useUIStore, toast } from "../lib/stores";
+import { EmptyState } from "./ui/EmptyState";
 
 import { adminPath as ADMIN_BASE, apiPath as API_BASE } from "../lib/paths";
 
 import { BlocksField } from "./fields/BlocksField";
-import PortableTextField from "./fields/PortableTextField";
 import { ConfirmModal, Modal as UIModal } from "./ui/Modal";
 import { ListField } from "./fields/ListField";
 import { RelationshipBlockField } from "./fields/RelationshipBlockField";
 import { FieldRenderer } from "./FieldRenderer";
+import { Dropdown, DropdownItem, DropdownSeparator } from "./ui/Dropdown";
+import { SplitButton } from "./ui/SplitButton";
+import type { SplitButtonStatus } from "./ui/SplitButton";
 import { TabsLayout } from "./fields/TabsLayout";
 import { GroupLayout } from "./fields/GroupLayout";
 import { ArrayLayout } from "./fields/ArrayLayout";
@@ -73,14 +78,17 @@ export function AutoForm({
   const config = activeConfig || propConfig;
 
 
-  const { confirm, alert } = useUIStore();
+  const { confirm } = useUIStore();
 
   const {
     formData,
     lastSavedData,
     hasUnsavedChanges,
     isAutoSaving,
+    backgroundProcessing,
     autoSaveStatus,
+    lastSavedAt,
+    retryCount,
     sidebarCollapsed,
     setSidebarCollapsed,
     activeTab,
@@ -114,8 +122,6 @@ export function AutoForm({
     setAutoSaveStatus,
     fetchVersions,
     saveDocument,
-    publishDocument,
-    clearDraftArtifacts,
     autoSaveSkipRef,
     lastAutoSaveTimeRef,
     documentStatus,
@@ -132,8 +138,36 @@ export function AutoForm({
   });
 
   const menuRef = useRef<HTMLDivElement>(null);
+  const scheduleRef = useRef<HTMLDivElement>(null);
+  const [showSchedulePicker, setShowSchedulePicker] = useState(false);
+  const [localSaveStatus, setLocalSaveStatus] = useState<"idle" | "saving" | "saved" | "error">("idle");
+  const [now, setNow] = useState(Date.now());
   const disabled = propDisabled;
 
+  // Tick every 10s so the "saved X ago" label stays fresh
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 10_000);
+    return () => clearInterval(id);
+  }, []);
+
+  const resolveAdminFlag = (
+    value: boolean | ((
+      data: Record<string, unknown>,
+      siblingData: Record<string, unknown>,
+    ) => boolean) | undefined,
+    currentData: Record<string, unknown>,
+  ): boolean => {
+    if (typeof value === "function") {
+      try {
+        return value(formData, currentData);
+      } catch (error) {
+        console.warn("Error evaluating admin runtime flag:", error);
+        return false;
+      }
+    }
+    return Boolean(value);
+  };
+
   const handleRestoreVersion = (versionId: string) => {
     confirm({
       title: "Restore Version",
@@ -161,17 +195,18 @@ export function AutoForm({
 
           const result = await resp.json();
           if (result.data) {
-            setFormData(result.data);
-            useAutoFormStore.getState().loadDocument(result.data, result.data);
+            const restoredData = { ...formData, ...result.data };
+            setFormData(restoredData);
+            useAutoFormStore.getState().loadDocument(restoredData, restoredData);
             onActionSuccess?.("Version restored successfully");
             fetchVersions();
             setView("edit");
           } else {
-            alert({ title: "Error", message: result.error || "Failed to restore version" });
+            toast.error(result.error || "Failed to restore version");
           }
         } catch (err) {
           console.error("Failed to restore version:", err);
-          alert({ title: "Error", message: "Failed to restore version" });
+          toast.error("Failed to restore version");
         }
       }
     });
@@ -208,13 +243,18 @@ export function AutoForm({
 
   useEffect(() => {
     const handleShortcuts = (e: KeyboardEvent) => {
-      // Cmd/Ctrl + S = Publish
+      // Cmd/Ctrl + S = Save Draft
       if ((e.metaKey || e.ctrlKey) && e.key === "s") {
         e.preventDefault();
-        (document.getElementById("btn-save") as HTMLButtonElement | null)?.click();
+        handleSaveDraft();
       }
-      // Cmd/Ctrl + P = Toggle Preview
-      if ((e.metaKey || e.ctrlKey) && e.key === "p") {
+      // Cmd/Ctrl + Shift + P = Publish Changes
+      if ((e.metaKey || e.ctrlKey) && e.shiftKey && (e.key === "P" || e.key === "p")) {
+        e.preventDefault();
+        (document.getElementById("btn-publish") as HTMLButtonElement | null)?.click();
+      }
+      // Cmd/Ctrl + P (no shift) = Toggle Preview
+      if ((e.metaKey || e.ctrlKey) && !e.shiftKey && e.key === "p") {
         e.preventDefault();
         setShowPreview((prev) => !prev);
       }
@@ -248,17 +288,30 @@ export function AutoForm({
     if (isMenuOpen) {
       document.addEventListener("mousedown", handleClickOutside);
       return () =>
-        document.addEventListener("mousedown", handleClickOutside);
+        document.removeEventListener("mousedown", handleClickOutside);
     }
   }, [isMenuOpen]);
 
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (scheduleRef.current && !scheduleRef.current.contains(e.target as Node)) {
+        setShowSchedulePicker(false);
+      }
+    };
+    if (showSchedulePicker) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () =>
+        document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [showSchedulePicker]);
+
   const handleCreateNew = () => {
     if (hasUnsavedChanges) {
       confirm({
         title: "Unsaved Changes",
         message: "You have unsaved changes. Save before creating new?",
         onConfirm: async () => {
-          (document.getElementById("btn-save") as HTMLButtonElement | null)?.click();
+          await handleSaveDraft();
           await new Promise((r) => setTimeout(r, 1000));
           window.location.href = `${ADMIN_BASE}/${collectionSlug}/new`;
         },
@@ -275,11 +328,12 @@ export function AutoForm({
       onConfirm: async () => {
         try {
           const { id, createdAt, updatedAt, ...duplicateData } = formData;
+          const normalizedData = normalizeUploadFields(duplicateData) as Record<string, unknown>;
           const response = await fetchWithAuth(`/api/${collectionSlug}`, {
             method: "POST",
             headers: { "Content-Type": "application/json" },
             body: JSON.stringify({
-              ...duplicateData,
+              ...normalizedData,
               title: `${duplicateData.title || duplicateData.name || "Copy"} (Copy)`,
               slug: `${duplicateData.slug || "copy"}-${Date.now()}`,
               status: "draft",
@@ -294,16 +348,10 @@ export function AutoForm({
             }
           } else {
             const error = await response.json();
-            alert({
-              title: "Error",
-              message: error.error || "Failed to duplicate document",
-            });
+            toast.error(error.error || "Failed to duplicate document");
           }
         } catch (err) {
-          alert({
-            title: "Error",
-            message: "Failed to duplicate document",
-          });
+          toast.error("Failed to duplicate document");
         }
       },
     });
@@ -319,10 +367,7 @@ export function AutoForm({
           await apiDelete(`/api/${collectionSlug}/${formData.id}`);
           window.location.href = `${ADMIN_BASE}/${collectionSlug}`;
         } catch (err) {
-          alert({
-            title: "Error",
-            message: (err as Error).message || "Failed to delete document",
-          });
+          toast.error((err as Error).message || "Failed to delete document");
         }
       },
     });
@@ -334,32 +379,173 @@ export function AutoForm({
       message: "Unpublish this document?",
       onConfirm: async () => {
         try {
-          const response = await fetchWithAuth(
-            resolveUrl(`/api/${collectionSlug}/${formData.id}/unpublish`),
-            {
-              method: "POST",
-            },
+          const response = await saveDocument(
+            { ...formData, status: 'draft' } as Record<string, unknown>,
+            false,
           );
-          if (response.ok) {
+          if (response?.ok) {
             onActionSuccess?.("Document unpublished successfully");
             location.reload();
           } else {
-            const error = await response.json();
-            alert({
-              title: "Error",
-              message: error.error || "Failed to unpublish",
-            });
+            const error = await response?.json().catch(() => ({}));
+            toast.error(error?.error || "Failed to unpublish");
           }
         } catch (err) {
-          alert({
-            title: "Error",
-            message: "Failed to unpublish",
-          });
+          toast.error("Failed to unpublish");
         }
       },
     });
   };
 
+  const handleSaveDraft = async () => {
+    const isNewDoc = !formData.id;
+    autoSaveSkipRef.current = true;
+    setLocalSaveStatus("saving");
+
+    try {
+      const data = normalizeUploadFields({ ...formData }) as Record<string, unknown>;
+      const isPost = isNewDoc && !globalSlug;
+
+      const response = isPost
+        ? await fetchWithAuth(`/api/${collectionSlug}`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(data),
+        })
+        : await saveDocument(data);
+
+      if (response.ok) {
+        const result = await response.json();
+        const savedData = result.data || data;
+        setFormData({ ...formData, ...savedData });
+        setLastSavedData({ ...formData, ...savedData });
+        lastAutoSaveTimeRef.current = Date.now();
+        setAutoSaveStatus("success");
+        setLocalSaveStatus("saved");
+        if (versionsEnabled) fetchVersions();
+        setTimeout(() => {
+          setAutoSaveStatus("idle");
+          setLocalSaveStatus("idle");
+        }, 2000);
+        onActionSuccess?.(
+          isPost ? "Document created successfully" : "Changes saved",
+        );
+        if (isPost) {
+          setTimeout(() => {
+            window.location.href = `${ADMIN_BASE}/${collectionSlug}`;
+          }, 800);
+        }
+      } else {
+        const error = await response.json();
+        if (response.status === 409) {
+          setAutoSaveStatus("conflict");
+        }
+        setLocalSaveStatus("error");
+        toast.error(error.error || "Failed to save");
+        setTimeout(() => setLocalSaveStatus("idle"), 3000);
+      }
+    } catch (err) {
+      setLocalSaveStatus("error");
+      toast.error("Failed to save document");
+      setTimeout(() => setLocalSaveStatus("idle"), 3000);
+    } finally {
+      autoSaveSkipRef.current = false;
+    }
+  };
+
+  const handlePublish = async () => {
+    const isNewDoc = !formData.id;
+    autoSaveSkipRef.current = true;
+    setLocalSaveStatus("saving");
+
+    try {
+      if (isNewDoc && !globalSlug) {
+        // Create then immediately publish
+        const data = normalizeUploadFields({ ...formData }) as Record<string, unknown>;
+        const response = await fetchWithAuth(`/api/${collectionSlug}`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(data),
+        });
+        if (!response.ok) {
+          const error = await response.json().catch(() => ({}));
+          if (response.status === 409) setAutoSaveStatus("conflict");
+          setLocalSaveStatus("error");
+          toast.error(error.error || "Failed to create document");
+          setTimeout(() => setLocalSaveStatus("idle"), 3000);
+          return;
+        }
+        const result = await response.json();
+        const savedData = result.data || data;
+        setFormData({ ...formData, ...savedData });
+        setLastSavedData({ ...formData, ...savedData });
+      }
+
+      // Save and publish (X-Draft: false writes to main doc + versions table)
+      const data = normalizeUploadFields({ ...formData }) as Record<string, unknown>;
+      const response = await saveDocument(data, false);
+
+      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");
+        setLocalSaveStatus("error");
+        toast.error(error?.error || "Failed to publish");
+        setTimeout(() => setLocalSaveStatus("idle"), 3000);
+      }
+    } catch (err) {
+      setLocalSaveStatus("error");
+      toast.error("Failed to publish");
+      setTimeout(() => setLocalSaveStatus("idle"), 3000);
+    } finally {
+      autoSaveSkipRef.current = false;
+    }
+  };
+
+  const handleSchedulePublish = async (scheduledFor: string) => {
+    const isNewDoc = !formData.id;
+    // Save the document first with _schedulePublishAt metadata
+    autoSaveSkipRef.current = true;
+
+    try {
+      const data = {
+        ...normalizeUploadFields({ ...formData }) as Record<string, unknown>,
+        _schedulePublishAt: scheduledFor,
+      };
+
+      if (isNewDoc && !globalSlug) {
+        const response = await fetchWithAuth(`/api/${collectionSlug}`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(data),
+        });
+        if (!response.ok) {
+          const err = await response.json().catch(() => ({}));
+          toast.error(err.error || "Failed to schedule publish");
+          return;
+        }
+      } else {
+        const response = await saveDocument(data);
+        if (!response.ok) {
+          const err = await response.json().catch(() => ({}));
+          toast.error(err.error || "Failed to schedule publish");
+          return;
+        }
+      }
+
+      onActionSuccess?.(`Scheduled publish for ${new Date(scheduledFor).toLocaleString()}`);
+      setShowSchedulePicker(false);
+    } catch {
+      toast.error("Failed to schedule publish");
+    } finally {
+      autoSaveSkipRef.current = false;
+    }
+  };
+
   const handleFieldChange = (fieldName: string, value: unknown) => {
     setField(fieldName, value);
   };
@@ -369,22 +555,54 @@ export function AutoForm({
     parentData?: Record<string, unknown>,
     onParentChange?: (val: unknown) => void,
   ): React.ReactNode => {
-    if (field.admin?.hidden) return null;
-
     const currentData = parentData !== undefined ? parentData : formData;
+    const isHidden = resolveAdminFlag((field.hidden !== undefined ? field.hidden : field.admin?.hidden) as any, currentData);
+    if (isHidden) return null;
+
+    const isReadOnly = resolveAdminFlag((field.readOnly !== undefined ? field.readOnly : field.admin?.readOnly) as any, currentData);
+    const effectiveDisabled = Boolean(disabled || isReadOnly);
 
     // 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;
+    if (field.admin?.condition) {
+      if (typeof field.admin.condition === "function") {
+        try {
+          // Compatibility wrapper: pass { values: formData, ...formData } to support both old and new signatures
+          const evalData = { values: formData || {}, ...(formData || {}) };
+          const shouldShow = field.admin.condition(evalData, 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
+        }
+      } else if (typeof field.admin.condition === "object") {
+        try {
+          const cond = field.admin.condition as any;
+          const targetField = cond.field;
+          
+          // Get target field value, prioritizing sibling context (currentData) then root context (formData)
+          const val = (currentData && currentData[targetField] !== undefined)
+            ? currentData[targetField]
+            : (formData && formData[targetField] !== undefined ? formData[targetField] : undefined);
+            
+          let shouldShow = true;
+          if ("equals" in cond) {
+            shouldShow = val === cond.equals;
+          } else if ("notEquals" in cond) {
+            shouldShow = val !== cond.notEquals;
+          } else if ("in" in cond && Array.isArray(cond.in)) {
+            shouldShow = cond.in.includes(val);
+          }
+          
+          if (!shouldShow) {
+            return null;
+          }
+        } catch (e) {
+          console.warn(`Declarative condition error for field ${field.name}:`, e);
         }
-      } catch (e) {
-        console.warn(`Condition error for field ${field.name}:`, e);
-        // Show the field if there's an error evaluating the condition
       }
     }
 
@@ -399,7 +617,7 @@ export function AutoForm({
       }
     };
 
-if (field.type === "row" && "fields" in field) {
+    if (field.type === "row" && "fields" in field) {
       const rowFields = (field as Field & { fields?: Field[] }).fields;
       return (
         <div
@@ -410,7 +628,7 @@ if (field.type === "row" && "fields" in field) {
             const fAdmin = f.admin || {};
             const actionUrl = fAdmin?.action as string | undefined;
 
-            if (f.type === "button" && actionUrl) {
+            if ((f.type === "button" || f.type === "action") && actionUrl) {
               const siblingEmailField = rowFields?.find(
                 (ff: Field) => ff.type === "email",
               );
@@ -465,8 +683,8 @@ if (field.type === "row" && "fields" in field) {
                       }
                     }}
                     //@ts-ignore
-                    disabled={loadingFields[f.name as string] || disabled}
-                    className="bg-[var(--kyro-primary)] text-white px-4 py-2 rounded-lg font-medium hover:opacity-90 transition-opacity disabled:opacity-50"
+                    disabled={loadingFields[f.name as string] || effectiveDisabled}
+                    className="kyro-btn kyro-btn-primary px-4 py-2 rounded-lg font-medium hover:opacity-90 transition-opacity disabled:opacity-50"
                   >
                     {loadingFields[f.name as string] ? "Sending..." : f.label || "Click"}
                   </button>
@@ -477,7 +695,7 @@ if (field.type === "row" && "fields" in field) {
             return (
               <div
                 key={f.name}
-                className={f.type === "button" ? "flex-shrink-0" : "flex-1"}
+                className={f.type === "button" || f.type === "action" ? "flex-shrink-0" : "flex-1"}
                 style={
                   fAdmin?.width ? { width: fAdmin.width as string, flex: "none" } : {}
                 }
@@ -497,11 +715,10 @@ if (field.type === "row" && "fields" in field) {
             key={field.name || `tabs-${Math.random()}`}
             field={field}
             formData={formData}
-            onTabDataChange={(newTabData) => {
-              const updateTabData = useAutoFormStore.getState().updateTabData;
-              updateTabData(field.name as string, newTabData);
+            onTabDataChange={(tabData) => {
+              setField(field.name!, tabData);
             }}
-            renderField={renderField}
+            renderField={(f, parentData, onChange) => renderField(f, parentData, onChange)}
           />
         );
 
@@ -524,19 +741,20 @@ if (field.type === "row" && "fields" in field) {
             value={value as unknown[]}
             onChange={onFieldChange}
             renderField={renderField}
-            disabled={disabled}
+            disabled={effectiveDisabled}
           />
         );
 
 
-      case "button": {
+      case "button":
+      case "action": {
         const fieldName = field.name as string;
         const isLoading = loadingFields[fieldName];
         return (
           <div key={fieldName} className="kyro-form-field">
             <button
               type="button"
-              disabled={isLoading || disabled}
+              disabled={isLoading || effectiveDisabled}
               onClick={async () => {
                 const action = (field.admin?.action || (field as Record<string, unknown>).action) as string | undefined;
                 const method =
@@ -630,7 +848,7 @@ if (field.type === "row" && "fields" in field) {
             value={value}
             onChange={onFieldChange}
             error={error}
-            disabled={disabled}
+            disabled={effectiveDisabled}
           />
         );
     }
@@ -638,13 +856,13 @@ if (field.type === "row" && "fields" in field) {
 
   const renderHeader = () => {
     const docTitle = String(
-    (formData.mainTabs as { title?: string })?.title ||
-      formData.title ||
-      formData.name ||
+      (formData.mainTabs as { title?: string })?.title ||
+      (typeof formData.title === "object" ? "" : formData.title) ||
+      (typeof formData.name === "object" ? "" : formData.name) ||
       "Untitled",
-  );
-    // Use _status from the document (set by the new draft/publish system)
-    const docStatus = documentStatus ?? formData._status ?? formData.status ?? 'draft';
+    );
+    // 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()
@@ -653,52 +871,44 @@ if (field.type === "row" && "fields" in field) {
       ? new Date(formData.createdAt as string).toLocaleString()
       : "Just now";
 
+    const isDraftMode = !formData.id || documentStatus === 'draft';
+
     // Status label shown in the header
     const statusLabel = hasUnpublishedChanges
-      ? docStatus === 'draft' && !formData._prevStatus
-        ? 'Draft'
-        : 'Published (unpublished changes)'
+      ? 'Draft (unpublished changes)'
       : docStatus === 'published'
         ? 'Published'
         : 'Draft';
 
-    const statusColor = docStatus === 'published' && !hasUnpublishedChanges
+    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';
+
     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">
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center gap-3">
             <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>
+              <ChevronRight className="w-4 h-4" />
             </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 ${statusColor}`}
-              />
+            <span className={`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">
             {autoSaveStatus === "saving" && (
               <span className="flex items-center gap-1.5 text-[var(--kyro-text-muted)]">
                 <svg
@@ -725,26 +935,63 @@ if (field.type === "row" && "fields" in field) {
             )}
             {autoSaveStatus === "success" && (
               <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" />
+                <Check className="w-4 h-4" />
+                {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" 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>
-                Draft saved
+                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">
+                  <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>
+                Offline — cached locally
               </span>
             )}
             {autoSaveStatus === "error" && (
               <span className="text-[var(--kyro-danger)]">Draft save failed</span>
             )}
             {autoSaveStatus === "conflict" && (
-              <span className="text-[var(--kyro-danger)]">Conflict detected</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 () => {
+                    // Keep mine: force save and overwrite server
+                    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={() => {
+                    // Reload server version
+                    window.location.reload();
+                  }}
+                  className="text-[var(--kyro-danger)] hover:underline"
+                >
+                  Reload server version
+                </button>
+              </div>
             )}
-            {hasUnsavedChanges && autoSaveStatus !== "saving" && (
+            {hasUnsavedChanges && autoSaveStatus !== "saving" && autoSaveStatus !== "retrying" && autoSaveStatus !== "conflict" && (
               <>
                 <span className="opacity-30">—</span>
                 <button
@@ -752,7 +999,6 @@ if (field.type === "row" && "fields" in field) {
                   onClick={async () => {
                     setFormData(lastSavedData);
                     markSaved();
-                    await clearDraftArtifacts();
                   }}
                   className="text-[var(--kyro-primary)] hover:underline"
                 >
@@ -760,6 +1006,19 @@ if (field.type === "row" && "fields" in field) {
                 </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>
@@ -789,19 +1048,10 @@ if (field.type === "row" && "fields" in field) {
             <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)]"}`}
+              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"
             >
-              <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>
+              <ExternalLink className="w-4 h-4" />
               {showPreview && (
                 <span className="text-[10px] font-bold  tracking-widest pr-1">
                   Active
@@ -813,7 +1063,7 @@ if (field.type === "row" && "fields" in field) {
               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)]"}`}
+              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
@@ -829,282 +1079,138 @@ if (field.type === "row" && "fields" in field) {
               </svg>
             </button>
 
-            <button
-              id="btn-save"
-              type="button"
-              onClick={async () => {
-                autoSaveSkipRef.current = true;
-                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 isPost = isNew && !globalSlug;
+            {/* ── Publish button (no dropdown) ──────────────────────────────── */}
+            <SplitButton
+              status={documentStatus as SplitButtonStatus}
+              saveStatus={localSaveStatus}
+              hasChanges={hasUnsavedChanges}
+              onPublish={handlePublish}
+              disabled={localSaveStatus === "saving"}
+            />
 
-                  const response = isPost
-                    ? await fetchWithAuth(`/api/${collectionSlug}`, {
-                      method: "POST",
-                      headers: { "Content-Type": "application/json" },
-                      body: JSON.stringify(data),
-                    })
-                    : await saveDocument(data);
-
-                  if (response.ok) {
-                    const result = await response.json();
-                    setFormData(result.data || data);
-                    setLastSavedData(result.data || data);
-                    lastAutoSaveTimeRef.current = Date.now();
-                    setAutoSaveStatus("success");
-                    await clearDraftArtifacts();
-                    if (versionsEnabled) fetchVersions();
-                    setTimeout(() => setAutoSaveStatus("idle"), 2000);
-                    onActionSuccess?.(
-                      isPost ? "Document created successfully" : "Changes saved",
-                    );
-                    if (globalSlug) {
-                      setTimeout(() => {
-                        window.location.reload();
-                      }, 1000);
-                    }
-                    if (isPost) {
-                      setTimeout(() => {
-                        window.location.href = `/${collectionSlug}`;
-                      }, 800);
+            {/* ── Kebab: document management actions ───────────────────────── */}
+            {!isNew && (
+              <Dropdown
+                trigger={
+                  <button
+                    type="button"
+                    className="kyro-btn 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>
                     }
-                  } else {
-                    const error = await response.json();
-                    if (response.status === 409) {
-                      setAutoSaveStatus("conflict");
+                  >
+                    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>
                     }
-                    alert({
-                      title: response.status === 409 ? "Conflict detected" : "Error",
-                      message: error.error || "Failed to save",
-                    });
-                  }
-                } catch (err) {
-                  alert({
-                    title: "Error",
-                    message: "Failed to save document",
-                  });
-                } finally {
-                  autoSaveSkipRef.current = false;
-                  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 ? (globalSlug ? "Save" : "Create") : hasUnsavedChanges ? (versionsEnabled ? "Save Draft" : "Save") : "Saved"}
-            </button>
-
-            {!isNew && versionsEnabled && documentStatus === "draft" && (
-              <button
-                id="btn-publish"
-                type="button"
-                onClick={async () => {
-                  autoSaveSkipRef.current = true;
-                  const btn = document.getElementById(
-                    "btn-publish",
-                  ) as HTMLButtonElement;
-                  const originalText = btn?.textContent || "";
-                  if (btn) {
-                    btn.textContent = "Publishing...";
-                    btn.setAttribute("disabled", "true");
+                  >
+                    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>
                   }
-
-                  try {
-                    if (hasUnsavedChanges) {
-                      const saveResponse = await saveDocument(formData);
-                      if (!saveResponse.ok) {
-                        const saveError = await saveResponse.json().catch(() => ({}));
-                        if (saveResponse.status === 409) {
-                          setAutoSaveStatus("conflict");
-                        }
-                        alert({
-                          title:
-                            saveResponse.status === 409
-                              ? "Conflict detected"
-                              : "Error",
-                          message: saveError.error || "Failed to save latest draft before publishing",
-                        });
-                        return;
-                      }
-
-                      const saveResult = await saveResponse.json();
-                      setFormData(saveResult.data || formData);
-                      setLastSavedData(saveResult.data || formData);
+                >
+                  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>
                     }
-
-                    const response = await publishDocument();
-
-                    if (response.ok) {
-                      await clearDraftArtifacts();
-                      onActionSuccess?.("Published successfully");
-                      location.reload();
-                    } else {
-                      const error = await response.json();
-                      if (response.status === 409) {
-                        setAutoSaveStatus("conflict");
+                  >
+                    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>
                       }
-                      alert({
-                        title: response.status === 409 ? "Conflict detected" : "Error",
-                        message: error.error || "Failed to publish",
-                      });
-                    }
-                  } catch (err) {
-                    alert({
-                      title: "Error",
-                      message: "Failed to publish",
-                    });
-                  } finally {
-                    autoSaveSkipRef.current = false;
-                    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"
-              >
-                {formData._prevStatus === 'published' ? 'Publish Changes' : 'Publish'}
-              </button>
+                    >
+                      Delete
+                    </DropdownItem>
+                  </>
+                )}
+              </Dropdown>
             )}
 
-            <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"
+
+            {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">
+                  <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"
                     >
-                      <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>
-                      {formData._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"
-                          >
-                            <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
-                        type="button"
-                        onClick={() => {
-                          handleDelete();
-                          setIsMenuOpen(false);
-                        }}
-                        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"
-                      >
-                        <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>
-                    </>
-                  )}
+                      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>
+              </div>
+            )}
           </div>
         </div>
       </header>
@@ -1207,7 +1313,7 @@ if (field.type === "row" && "fields" in field) {
                 type="button"
                 onClick={handleCompareVersions}
                 disabled={loadingDiffs}
-                className="px-3 py-1.5 rounded-lg bg-[var(--kyro-primary)] text-white text-[11px] font-bold  tracking-wider hover:opacity-90 disabled:opacity-50"
+                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>
@@ -1241,15 +1347,7 @@ if (field.type === "row" && "fields" in field) {
                 onClick={() => setCompareDiffs([])}
                 className="p-1 rounded hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-muted)]"
               >
-                <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>
+                <X className="w-4 h-4" />
               </button>
             </div>
             <div className="max-h-[400px] overflow-y-auto">
@@ -1316,15 +1414,7 @@ if (field.type === "row" && "fields" in field) {
                           }`}
                       >
                         {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>
+                          <Check className="w-4 h-4" />
                         )}
                       </div>
                     ) : (
@@ -1374,7 +1464,7 @@ if (field.type === "row" && "fields" in field) {
                       <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:bg-[var(--kyro-primary)] hover:text-white hover:border-[var(--kyro-primary)] transition-all active:scale-95"
+                        className="px-3 py-1.5 rounded-lg border border-[var(--kyro-border)] text-[11px] font-bold tracking-wider text-[var(--kyro-text-secondary)] kyro-btn-primary hover:border-[var(--kyro-primary)] transition-all active:scale-95"
                       >
                         Restore
                       </button>
@@ -1464,16 +1554,7 @@ if (field.type === "row" && "fields" in field) {
                         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>
+                          <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">
@@ -1507,42 +1588,74 @@ if (field.type === "row" && "fields" in field) {
     <div className="flex flex-col h-full">
       {layout !== "single" && renderHeader()}
       {layout === "single" && (
-        <button
-          id="btn-save"
-          type="button"
-          style={{ width: 0, height: 0, opacity: 0, padding: 0, margin: 0, border: 'none', position: 'absolute' }}
-          onClick={async () => {
-            console.log("[AutoForm] Hidden save button clicked");
-            const hiddenInput = document.getElementById("form-data") as HTMLInputElement;
-            if (!hiddenInput || !hiddenInput.value) {
-              console.error("[AutoForm] #form-data input not found or empty");
-              return;
-            }
-            try {
-              const data = JSON.parse(hiddenInput.value);
-              console.log("[AutoForm] Saving data:", data);
-              const response = await saveDocument(data);
+        <>
+          <div className="flex items-center justify-between px-4 py-2 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)]">
+            <div className="flex items-center gap-3 text-[11px] font-medium">
+              {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 === "success" && (
+                <span className="text-[var(--kyro-success)] flex items-center gap-1">
+                  <Check className="w-4 h-4" />
+                  {lastSavedAt ? `Saved ${Math.floor((Date.now() - lastSavedAt) / 60000)}m ago` : "Saved"}
+                </span>
+              )}
+              {autoSaveStatus === "retrying" && (
+                <span className="text-[var(--kyro-warning)] flex items-center gap-1.5">
+                  <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>
+                  Retrying...
+                </span>
+              )}
+              {autoSaveStatus === "offline" && (
+                <span className="text-[var(--kyro-text-muted)]">Offline — cached locally</span>
+              )}
+              {autoSaveStatus === "error" && (
+                <span className="text-[var(--kyro-danger)]">Save failed</span>
+              )}
+              {autoSaveStatus === "conflict" && (
+                <span className="text-[var(--kyro-danger)]">Conflict detected</span>
+              )}
+              {hasUnsavedChanges && autoSaveStatus !== "saving" && autoSaveStatus !== "retrying" && autoSaveStatus !== "conflict" && (
+                <span className="text-[var(--kyro-warning)]">Unsaved changes</span>
+              )}
+              {!hasUnsavedChanges && autoSaveStatus !== "success" && autoSaveStatus !== "saving" && autoSaveStatus !== "error" && (
+                <span className="text-[var(--kyro-success)]">All changes saved</span>
+              )}
+            </div>
+            <span className="text-[11px] text-[var(--kyro-text-muted)] opacity-60">
+              {formData.updatedAt ? `Modified ${new Date(formData.updatedAt as string).toLocaleString()}` : ""}
+            </span>
+          </div>
+          <button
+            id="btn-save"
+            type="button"
+            style={{ width: 0, height: 0, opacity: 0, padding: 0, margin: 0, border: 'none', position: 'absolute' }}
+            onClick={async () => {
+              try {
+                const response = await saveDocument();
               if (response.ok) {
                 const result = await response.json();
-                const savedData = result.data || data;
-                setFormData(savedData);
-                setLastSavedData(savedData);
+                const savedData = result.data || formData;
+                setFormData({ ...formData, ...savedData });
+                setLastSavedData({ ...formData, ...savedData });
                 onActionSuccess?.("Changes saved");
-                // Trigger a refresh to ensure all global state is updated
-                setTimeout(() => {
-                  window.location.reload();
-                }, 1000); // Small delay to let the toast show
-              } else {
-                const errorData = await response.json().catch(() => ({}));
-                console.error("Save global failed:", errorData);
-                onActionError?.(errorData.error || "Save failed");
               }
-            } catch (e) {
-              console.error("Save error exception:", e);
-              onActionError?.("Save failed: " + (e as Error).message);
-            }
-          }}
-        />
+              } catch (e) {
+                console.error("Save error exception:", e);
+                onActionError?.("Save failed: " + (e as Error).message);
+              }
+            }}
+          />
+        </>
       )}
       <main className="w-full">
         {view === "edit" && renderEditView()}
@@ -1596,7 +1709,7 @@ function RelationshipField({
     fetchOptions();
   }, [targetCollection]);
 
-const getLabel = (opt: unknown) => {
+  const getLabel = (opt: unknown) => {
     const o = opt as Record<string, unknown> | undefined;
     if (!o) return "";
     return String(
@@ -1658,13 +1771,13 @@ const getLabel = (opt: unknown) => {
 
   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),
-        );
-      })
+      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 (
@@ -1727,9 +1840,7 @@ const getLabel = (opt: unknown) => {
               {loading ? (
                 <div className="kyro-relation-modal-empty">Loading...</div>
               ) : filteredOptions.length === 0 ? (
-                <div className="kyro-relation-modal-empty">
-                  No results found.
-                </div>
+                <EmptyState title="No results found." />
               ) : (
                 filteredOptions.map((opt) => {
                   const o = opt as { id?: string };