@kyro-cms/admin 0.1.7 → 0.1.8

package/src/components/AutoForm.tsx

@@ -4,34 +4,20 @@ import type {
   GlobalConfig,
   Field,
   Block,
-} from "@kyro-cms/core";
-import { ImageField } from "./fields/ImageField";
-import { PortableTextField, HybridContentField } from "./fields";
+} from "@kyro-cms/core/client";
+import { UploadField } from "./fields/UploadField";
+import { CodeField } from "./fields";
 import NumberField from "./fields/NumberField";
 import CheckboxField from "./fields/CheckboxField";
 import SelectField from "./fields/SelectField";
 import DateField from "./fields/DateField";
 import { MarkdownField } from "./fields/MarkdownField";
-import CodeMirror from "@uiw/react-codemirror";
-import { json } from "@codemirror/lang-json";
-import { javascript } from "@codemirror/lang-javascript";
-import { aura } from "@uiw/codemirror-theme-aura";
 import { globals, collections } from "@/lib/config";
+import { slugifyText } from "@/lib/slugify";
 
 import { BlocksField } from "./fields/BlocksField";
-// Lightweight slugify helper for on-the-fly slug generation from a title/name
-function slugifyText(text: string): string {
-  if (!text) return "";
-  return text
-    .toString()
-    .toLowerCase()
-    .trim()
-    .replace(/\s+/g, "-") // Replace spaces with -
-    .replace(/[^\w-]+/g, "") // Remove all non-word chars
-    .replace(/--+/g, "-") // Replace multiple - with single -
-    .replace(/^-+/, "") // Trim - from start of text
-    .replace(/-+$/, ""); // Trim - from end of text
-}
+import PortableTextField from "./fields/PortableTextField";
+import { ConfirmModal, UIModal } from "./Modal";
 
 interface AutoFormProps {
   config: CollectionConfig | GlobalConfig;
@@ -172,33 +158,158 @@ export function AutoForm({
   const [loadingFields, setLoadingFields] = useState<Record<string, boolean>>(
     {},
   );
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [compareMode, setCompareMode] = useState(false);
+  const [compareSelected, setCompareSelected] = useState<string[]>([]);
+  const [compareDiffs, setCompareDiffs] = useState<any[]>([]);
+  const [loadingDiffs, setLoadingDiffs] = useState(false);
+  const [confirmModal, setConfirmModal] = useState<{
+    open: boolean;
+    title: string;
+    message: string;
+    onConfirm: () => void;
+    danger?: boolean;
+  }>({ open: false, title: "", message: "", onConfirm: () => {} });
+  const [alertModal, setAlertModal] = useState<{
+    open: boolean;
+    title: string;
+    message: string;
+  }>({ open: false, title: "", message: "" });
+  const [lastSavedData, setLastSavedData] = useState<Record<string, any>>({});
+  const [isAutoSaving, setIsAutoSaving] = useState(false);
+  const [autoSaveStatus, setAutoSaveStatus] = useState<
+    "idle" | "saving" | "saved" | "error"
+  >("idle");
+  const autoSaveTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const lastAutoSaveTimeRef = useRef<number>(0);
+  const autoSaveSkipRef = useRef<boolean>(false);
 
   const disabled = propDisabled;
 
-  // Track unsaved changes
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+
+  useEffect(() => {
+    const handleToggle = () => {
+      setSidebarCollapsed((prev) => !prev);
+    };
+    window.addEventListener("toggle-sidebar", handleToggle);
+    return () => window.removeEventListener("toggle-sidebar", handleToggle);
+  }, []);
+
+  // Track unsaved changes (compare against last saved state)
   useEffect(() => {
     const isDifferent =
-      JSON.stringify(formData) !== JSON.stringify(initialData);
+      JSON.stringify(formData) !== JSON.stringify(lastSavedData);
     setHasUnsavedChanges(isDifferent);
-  }, [formData, initialData]);
+  }, [formData, lastSavedData]);
 
-  // Auto-generate slug from title if locked
+  // Auto-generate slug from configured source field if locked
   useEffect(() => {
-    if (isSlugLocked && formData.title) {
-      const newSlug = slugifyText(formData.title);
+    const slugField = config.fields.find(
+      (f: any) => f.name === "slug" && f.admin?.autoGenerate,
+    );
+    if (!slugField?.admin?.autoGenerate) return;
+    const sourceField: string = slugField.admin.autoGenerate;
+    if (isSlugLocked && formData[sourceField]) {
+      const newSlug = slugifyText(formData[sourceField]);
       if (newSlug !== formData.slug) {
         setFormData((prev) => ({ ...prev, slug: newSlug }));
       }
     }
-  }, [formData.title, isSlugLocked]);
+  }, [
+    formData.title,
+    formData.name,
+    formData.label,
+    isSlugLocked,
+    config.fields,
+  ]);
 
   // Sync prop changes to local state
   useEffect(() => {
     if (initialData && Object.keys(initialData).length > 0) {
       setFormData(initialData);
+      setLastSavedData(initialData);
     }
   }, [initialData]);
 
+  // Auto-save with Strategy 3: 1s debounce, lastSavedData comparison, 15s hard throttle
+  useEffect(() => {
+    if (!formData.id || sidebarCollapsed) return;
+
+    if (autoSaveTimerRef.current) {
+      clearTimeout(autoSaveTimerRef.current);
+    }
+
+    const now = Date.now();
+    const timeSinceLastSave = now - lastAutoSaveTimeRef.current;
+    const hasChanges =
+      JSON.stringify(formData) !== JSON.stringify(lastSavedData);
+
+    if (!hasChanges) {
+      setAutoSaveStatus("idle");
+      return;
+    }
+
+    if (timeSinceLastSave < 15000 && lastAutoSaveTimeRef.current > 0) {
+      const remainingTime = Math.max(1000, 15000 - timeSinceLastSave);
+      autoSaveTimerRef.current = setTimeout(async () => {
+        await performAutoSave();
+      }, remainingTime);
+    } else {
+      autoSaveTimerRef.current = setTimeout(async () => {
+        await performAutoSave();
+      }, 1000);
+    }
+
+    return () => {
+      if (autoSaveTimerRef.current) {
+        clearTimeout(autoSaveTimerRef.current);
+      }
+    };
+  }, [formData]);
+
+  const performAutoSave = async () => {
+    if (autoSaveSkipRef.current) return;
+    if (JSON.stringify(formData) === JSON.stringify(lastSavedData)) return;
+
+    setIsAutoSaving(true);
+    setAutoSaveStatus("saving");
+
+    try {
+      const { id, createdAt, updatedAt, ...rest } = formData;
+      const saveData = {
+        ...rest,
+        _changeDescription: "Auto-saved",
+        status: formData.status === "published" ? "draft" : formData.status,
+      };
+
+      const response = await fetch(`/api/${collectionSlug}/${formData.id}`, {
+        method: "PATCH",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(saveData),
+      });
+
+      if (response.ok) {
+        const result = await response.json();
+        setLastSavedData(result.data || formData);
+        lastAutoSaveTimeRef.current = Date.now();
+        setAutoSaveStatus("saved");
+        fetchVersions();
+        setTimeout(() => setAutoSaveStatus("idle"), 2000);
+      } else {
+        setAutoSaveStatus("error");
+        setTimeout(() => setAutoSaveStatus("idle"), 3000);
+      }
+    } catch (err) {
+      console.error("Auto-save failed:", err);
+      setAutoSaveStatus("error");
+      setTimeout(() => setAutoSaveStatus("idle"), 3000);
+    } finally {
+      setIsAutoSaving(false);
+    }
+  };
+
   // Sync to hidden input for Astro form submission
   useEffect(() => {
     const hiddenInput = document.getElementById(
@@ -256,6 +367,35 @@ export function AutoForm({
     }
   };
 
+  const handleCompareVersions = async () => {
+    if (compareSelected.length !== 2) return;
+    setLoadingDiffs(true);
+    try {
+      const resp = await fetch(
+        `/api/${collectionSlug}/${formData.id}/versions?compareA=${compareSelected[0]}&compareB=${compareSelected[1]}`,
+      );
+      const data = await resp.json();
+      setCompareDiffs(data.diffs || []);
+    } catch (e) {
+      console.error("Compare failed:", e);
+      setCompareDiffs([]);
+    } finally {
+      setLoadingDiffs(false);
+    }
+  };
+
+  const toggleCompareSelection = (versionId: string) => {
+    setCompareSelected((prev) => {
+      if (prev.includes(versionId)) {
+        return prev.filter((id) => id !== versionId);
+      }
+      if (prev.length >= 2) {
+        return [prev[1], versionId];
+      }
+      return [...prev, versionId];
+    });
+  };
+
   useEffect(() => {
     const handleShortcuts = (e: KeyboardEvent) => {
       // Cmd/Ctrl + S = Publish
@@ -282,6 +422,156 @@ export function AutoForm({
     return () => window.removeEventListener("keydown", handleShortcuts);
   }, []);
 
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setIsMenuOpen(false);
+      }
+    };
+    if (isMenuOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () =>
+        document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isMenuOpen]);
+
+  const handleCreateNew = () => {
+    if (hasUnsavedChanges) {
+      setConfirmModal({
+        open: true,
+        title: "Unsaved Changes",
+        message: "You have unsaved changes. Save before creating new?",
+        onConfirm: async () => {
+          (document.getElementById("btn-save") as any)?.click();
+          await new Promise((r) => setTimeout(r, 1000));
+          window.location.href = `/${collectionSlug}/new`;
+        },
+      });
+    } else {
+      window.location.href = `/${collectionSlug}/new`;
+    }
+  };
+
+  const handleDuplicate = () => {
+    setConfirmModal({
+      open: true,
+      title: "Duplicate Document",
+      message: "Create a duplicate of this document?",
+      onConfirm: async () => {
+        const { id, createdAt, updatedAt, status, ...rest } = formData;
+        const duplicateData = {
+          ...rest,
+          title: `${rest.title || rest.name || "Untitled"} (Copy)`,
+        };
+        try {
+          const response = await fetch(`/api/${collectionSlug}`, {
+            method: "POST",
+            credentials: "include",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(duplicateData),
+          });
+          if (response.ok) {
+            const result = await response.json();
+            window.location.href = `/${collectionSlug}/${result.data.id}`;
+          } else {
+            const error = await response.json();
+            setAlertModal({
+              open: true,
+              title: "Error",
+              message: error.error || "Failed to duplicate document",
+            });
+          }
+        } catch (err) {
+          setAlertModal({
+            open: true,
+            title: "Error",
+            message: "Failed to duplicate document",
+          });
+        }
+      },
+    });
+  };
+
+  const handleDelete = () => {
+    setConfirmModal({
+      open: true,
+      title: "Delete Document",
+      message: "Delete this document? This cannot be undone.",
+      danger: true,
+      onConfirm: () => {
+        setConfirmModal({
+          open: true,
+          title: "Confirm Deletion",
+          message: "Are you absolutely sure?",
+          danger: true,
+          onConfirm: async () => {
+            try {
+              const response = await fetch(
+                `/api/${collectionSlug}/${formData.id}`,
+                {
+                  method: "DELETE",
+                  credentials: "include",
+                },
+              );
+              if (response.ok) {
+                window.location.href = `/${collectionSlug}`;
+              } else {
+                const error = await response.json();
+                setAlertModal({
+                  open: true,
+                  title: "Error",
+                  message: error.error || "Failed to delete document",
+                });
+              }
+            } catch (err) {
+              setAlertModal({
+                open: true,
+                title: "Error",
+                message: "Failed to delete document",
+              });
+            }
+          },
+        });
+      },
+    });
+  };
+
+  const handleUnpublish = () => {
+    setConfirmModal({
+      open: true,
+      title: "Unpublish Document",
+      message: "Unpublish this document?",
+      onConfirm: async () => {
+        try {
+          const response = await fetch(
+            `/api/${collectionSlug}/${formData.id}/unpublish`,
+            {
+              method: "POST",
+              credentials: "include",
+            },
+          );
+          if (response.ok) {
+            onActionSuccess?.("Document unpublished successfully");
+            location.reload();
+          } else {
+            const error = await response.json();
+            setAlertModal({
+              open: true,
+              title: "Error",
+              message: error.error || "Failed to unpublish",
+            });
+          }
+        } catch (err) {
+          setAlertModal({
+            open: true,
+            title: "Error",
+            message: "Failed to unpublish",
+          });
+        }
+      },
+    });
+  };
+
   const handleFieldChange = (fieldName: string, value: any) => {
     setFormData((prev) => ({
       ...prev,
@@ -389,6 +679,7 @@ export function AutoForm({
                         }));
                       }
                     }}
+                    //@ts-ignore
                     disabled={loadingFields[f.name!] || disabled}
                     className="bg-[var(--kyro-primary)] text-white px-4 py-2 rounded-lg font-medium hover:opacity-90 transition-opacity disabled:opacity-50"
                   >
@@ -463,7 +754,6 @@ export function AutoForm({
           </div>
         );
       }
-
       case "text":
       case "email":
         const textValue = currentData[field.name!];
@@ -493,13 +783,18 @@ export function AutoForm({
                           chars[Math.floor(Math.random() * chars.length)];
                       }
                       onFieldChange(`kyro_${suffix}`);
+                    } else if (field.admin?.autoGenerate) {
+                      onFieldChange(
+                        slugifyText(
+                          formData[field.admin!.autoGenerate as string] || "",
+                        ),
+                      );
                     } else if (
                       field.admin?.readOnly &&
                       textValue &&
                       !isKeyHidden
                     ) {
                       await navigator.clipboard.writeText(String(textValue));
-                      // Store the actual key in a temp var and show hidden
                       const actualKey = textValue;
                       onFieldChange(actualKey + "__COPIED__");
                       setTimeout(
@@ -512,7 +807,9 @@ export function AutoForm({
                   title={
                     field.admin?.autoGenerate === "key"
                       ? "Generate new key"
-                      : "Copy to clipboard"
+                      : field.admin?.autoGenerate
+                        ? `Generate from ${field.admin.autoGenerate}`
+                        : "Copy to clipboard"
                   }
                 >
                   {field.admin?.autoGenerate === "key" ? (
@@ -526,6 +823,17 @@ export function AutoForm({
                     >
                       <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
                     </svg>
+                  ) : field.admin?.autoGenerate ? (
+                    <svg
+                      width="14"
+                      height="14"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                    >
+                      <path d="M12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
+                    </svg>
                   ) : (
                     <svg
                       width="14"
@@ -557,7 +865,12 @@ export function AutoForm({
                       <button
                         type="button"
                         onClick={() =>
-                          onFieldChange(slugifyText(formData.title || ""))
+                          onFieldChange(
+                            slugifyText(
+                              formData[field.admin?.autoGenerate || "title"] ||
+                                "",
+                            ),
+                          )
                         }
                         className="p-1 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)]"
                       >
@@ -658,32 +971,8 @@ export function AutoForm({
       case "textarea":
         return (
           <div key={field.name} className="kyro-form-field">
-            <label className="kyro-form-label flex items-center justify-between">
+            <label className="kyro-form-label">
               {field.label || field.name}
-              {field.admin?.autoGenerate && (
-                <button
-                  type="button"
-                  onClick={() =>
-                    onFieldChange(
-                      stripHtml(
-                        formData[field.admin!.autoGenerate!] || "",
-                      ).slice(0, 160),
-                    )
-                  }
-                  className="p-1 text-[var(--kyro-text-secondary)]"
-                >
-                  <svg
-                    width="14"
-                    height="14"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                  >
-                    <path d="M12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
-                  </svg>
-                </button>
-              )}
             </label>
             <textarea
               className="kyro-form-input kyro-form-textarea"
@@ -716,27 +1005,24 @@ export function AutoForm({
         );
 
       case "richtext":
-        // TEMP: replaced with textarea to isolate hydration crash
-        return (
-          <div key={field.name} className="kyro-form-field">
-            <label className="kyro-form-label">
-              {field.label || field.name}
-            </label>
-            <textarea
-              className="kyro-form-input kyro-form-textarea"
-              rows={10}
-              value={
-                typeof value === "string"
-                  ? value
-                  : value
-                    ? JSON.stringify(value, null, 2)
-                    : ""
-              }
-              onChange={(e) => onFieldChange(e.target.value)}
-              disabled={disabled}
-              placeholder="Enter content..."
-            />
-          </div>
+        return (field as any).hasBlocks === false ? (
+          <PortableTextField
+            key={field.name}
+            field={field as any}
+            value={value}
+            onChange={(newValue: any) => onFieldChange(newValue)}
+            disabled={disabled}
+            error={error}
+          />
+        ) : (
+          <BlocksField
+            key={field.name}
+            field={field as any}
+            value={value}
+            onChange={(newValue: any) => onFieldChange(newValue)}
+            disabled={disabled}
+            error={error}
+          />
         );
 
       case "group":
@@ -760,45 +1046,67 @@ export function AutoForm({
       case "array":
         if ("fields" in field) {
           const items = Array.isArray(value) ? value : [];
+          const labelField = (field as any).fields?.[0]?.name || "user";
+          const isRelationship =
+            (field as any).fields?.[0]?.type === "relationship";
           return (
             <div key={field.name} className="kyro-form-field">
               <label className="kyro-form-label">
                 {field.label || field.name}
               </label>
-              <div className="kyro-form-array">
-                {items.map((item: any, index: number) => (
-                  <div key={index} className="kyro-form-array-item">
-                    <div className="flex justify-between mb-2">
-                      <span className="text-xs font-bold opacity-50">
-                        Item {index + 1}
-                      </span>
-                      <button
-                        type="button"
-                        className="text-red-500"
-                        onClick={() =>
-                          onFieldChange(items.filter((_, i) => i !== index))
-                        }
-                      >
-                        Remove
-                      </button>
+              {isRelationship ? (
+                <RelationshipField
+                  field={{
+                    name: labelField,
+                    relationTo: (field as any).fields[0].relationTo,
+                    hasMany: true,
+                    label: (field as any).fields[0].label,
+                  }}
+                  value={items.map((i: any) => i[labelField]).filter(Boolean)}
+                  onChange={(newValue: any) => {
+                    const newItems = (newValue || []).map((id: string) => ({
+                      [labelField]: id,
+                    }));
+                    onFieldChange(newItems);
+                  }}
+                  disabled={disabled}
+                />
+              ) : (
+                <div className="kyro-form-array">
+                  {items.map((item: any, index: number) => (
+                    <div key={index} className="kyro-form-array-item">
+                      <div className="flex justify-between mb-2">
+                        <span className="text-xs font-bold opacity-50">
+                          Item {index + 1}
+                        </span>
+                        <button
+                          type="button"
+                          className="text-red-500"
+                          onClick={() =>
+                            onFieldChange(items.filter((_, i) => i !== index))
+                          }
+                        >
+                          Remove
+                        </button>
+                      </div>
+                      {(field as any).fields.map((f: Field) =>
+                        renderField(f, item, (newItem) => {
+                          const newItems = [...items];
+                          newItems[index] = newItem;
+                          onFieldChange(newItems);
+                        }),
+                      )}
                     </div>
-                    {(field as any).fields.map((f: Field) =>
-                      renderField(f, item, (newItem) => {
-                        const newItems = [...items];
-                        newItems[index] = newItem;
-                        onFieldChange(newItems);
-                      }),
-                    )}
-                  </div>
-                ))}
-                <button
-                  type="button"
-                  className="kyro-btn kyro-btn-secondary kyro-btn-sm"
-                  onClick={() => onFieldChange([...items, {}])}
-                >
-                  Add Item
-                </button>
-              </div>
+                  ))}
+                  <button
+                    type="button"
+                    className="kyro-btn kyro-btn-secondary kyro-btn-sm"
+                    onClick={() => onFieldChange([...items, {}])}
+                  >
+                    Add Item
+                  </button>
+                </div>
+              )}
             </div>
           );
         }
@@ -806,31 +1114,14 @@ export function AutoForm({
 
       case "blocks":
         return (
-          <div key={field.name} className="kyro-form-field">
-            <label className="kyro-form-label">
-              {field.label || field.name}
-            </label>
-            <textarea
-              className="kyro-form-input kyro-form-textarea"
-              rows={10}
-              value={
-                typeof value === "string"
-                  ? value
-                  : value
-                    ? JSON.stringify(value, null, 2)
-                    : ""
-              }
-              onChange={(e) => {
-                try {
-                  onFieldChange(JSON.parse(e.target.value));
-                } catch {
-                  onFieldChange(e.target.value);
-                }
-              }}
-              disabled={disabled}
-              placeholder="Blocks data (JSON)..."
-            />
-          </div>
+          <BlocksField
+            key={field.name}
+            field={field as any}
+            value={value}
+            onChange={(newValue: any) => onFieldChange(newValue)}
+            disabled={disabled}
+            error={error}
+          />
         );
 
       case "number":
@@ -1087,10 +1378,23 @@ export function AutoForm({
           />
         );
 
-      case "upload":
+      case "code":
+        return (
+          <CodeField
+            key={field.name}
+            field={field as any}
+            value={value || ""}
+            onChange={(newValue) => onFieldChange(newValue)}
+            disabled={disabled}
+            error={error}
+          />
+        );
+
+      // @ts-ignore - 'image' is supported but not in the standard union yet
       case "image":
+      case "upload":
         return (
-          <ImageField
+          <UploadField
             key={field.name}
             field={field as any}
             value={value}
@@ -1107,6 +1411,7 @@ export function AutoForm({
   const renderHeader = () => {
     const docTitle = formData.title || formData.name || "Untitled";
     const status = formData.status || "draft";
+    const isNew = !formData.id;
     const lastModified = formData.updatedAt
       ? new Date(formData.updatedAt).toLocaleString()
       : "Just now";
@@ -1141,19 +1446,61 @@ export function AutoForm({
           <div className="flex items-center gap-4 text-[11px] font-medium tracking-wide opacity-60 ml-12">
             <span className="flex items-center gap-1.5 capitalize">
               <span
-                className={`h-1.5 w-1.5 rounded-full ${status === "published" ? "bg-green-500" : "bg-amber-500"}`}
+                className={`h-1.5 w-1.5 rounded-full ${status === "published" && !hasUnsavedChanges ? "bg-[var(--kyro-success)]" : "bg-[var(--kyro-warning)]"}`}
               />
-              {status}
+              {hasUnsavedChanges ? "Draft" : status}
             </span>
-            {hasUnsavedChanges && (
+            {autoSaveStatus === "saving" && (
+              <span className="flex items-center gap-1.5 text-[var(--kyro-text-muted)]">
+                <svg
+                  className="animate-spin h-3 w-3"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  />
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                  />
+                </svg>
+                Saving...
+              </span>
+            )}
+            {autoSaveStatus === "saved" && (
+              <span className="text-[var(--kyro-success)] flex items-center gap-1">
+                <svg
+                  width="12"
+                  height="12"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="3"
+                >
+                  <path d="M20 6L9 17l-5-5" />
+                </svg>
+                Saved
+              </span>
+            )}
+            {autoSaveStatus === "error" && (
+              <span className="text-[var(--kyro-danger)]">Save failed</span>
+            )}
+            {hasUnsavedChanges && autoSaveStatus !== "saving" && (
               <>
                 <span className="opacity-30">—</span>
                 <button
                   type="button"
-                  onClick={() => setFormData(initialData)}
+                  onClick={() => setFormData(lastSavedData)}
                   className="text-[var(--kyro-primary)] hover:underline"
                 >
-                  Revert to published
+                  Revert changes
                 </button>
               </>
             )}
@@ -1207,8 +1554,11 @@ export function AutoForm({
             </button>
             <button
               type="button"
-              className="p-2.5 text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-bg-secondary)] rounded-xl transition-all"
-              title="Desktop View"
+              onClick={() => {
+                window.dispatchEvent(new CustomEvent("toggle-sidebar"));
+              }}
+              className={`p-2.5 rounded-xl transition-all ${sidebarCollapsed ? "bg-[var(--kyro-primary)] text-white" : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-bg-secondary)]"}`}
+              title="Toggle Sidebar"
             >
               <svg
                 width="20"
@@ -1219,38 +1569,258 @@ export function AutoForm({
                 strokeWidth="2"
               >
                 <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
-                <line x1="15" y1="3" x2="15" y2="21" />
+                <line x1="9" y1="3" x2="9" y2="21" />
               </svg>
             </button>
 
             <button
               id="btn-save"
               type="button"
-              onClick={() =>
-                (document.getElementById("btn-save") as any)?.click()
-              }
+              onClick={async () => {
+                const hiddenInput = document.getElementById(
+                  "form-data",
+                ) as HTMLInputElement;
+                if (!hiddenInput || !hiddenInput.value) return;
+
+                const btn = document.getElementById(
+                  "btn-save",
+                ) as HTMLButtonElement;
+                const originalText = btn?.textContent || "";
+                if (btn) {
+                  btn.textContent = "Saving...";
+                  btn.setAttribute("disabled", "true");
+                }
+
+                try {
+                  const data = JSON.parse(hiddenInput.value);
+                  const url = isNew
+                    ? `/api/${collectionSlug}`
+                    : `/api/${collectionSlug}/${formData.id}`;
+                  const method = isNew ? "POST" : "PATCH";
+
+                  const response = await fetch(url, {
+                    method,
+                    credentials: "include",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify(data),
+                  });
+
+                  if (response.ok) {
+                    const result = await response.json();
+                    setLastSavedData(result.data || formData);
+                    lastAutoSaveTimeRef.current = Date.now();
+                    setAutoSaveStatus("saved");
+                    fetchVersions();
+                    setTimeout(() => setAutoSaveStatus("idle"), 2000);
+                    onActionSuccess?.(
+                      isNew ? "Document created successfully" : "Changes saved",
+                    );
+                    if (isNew) {
+                      setTimeout(() => {
+                        window.location.href = `/${collectionSlug}`;
+                      }, 800);
+                    }
+                  } else {
+                    const error = await response.json();
+                    setAlertModal({
+                      open: true,
+                      title: "Error",
+                      message: error.error || "Failed to save",
+                    });
+                  }
+                } catch (err) {
+                  setAlertModal({
+                    open: true,
+                    title: "Error",
+                    message: "Failed to save document",
+                  });
+                } finally {
+                  if (btn) {
+                    btn.textContent = originalText;
+                    btn.removeAttribute("disabled");
+                  }
+                }
+              }}
               className="kyro-btn kyro-btn-primary px-6 py-2.5 text-xs rounded-xl shadow-lg transition-all"
             >
-              Publish Changes
+              {isNew ? "Create" : hasUnsavedChanges ? "Save Draft" : "Saved"}
             </button>
 
-            <button
-              type="button"
-              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"
+            {!isNew && status === "draft" && (
+              <button
+                id="btn-publish"
+                type="button"
+                onClick={async () => {
+                  const btn = document.getElementById(
+                    "btn-publish",
+                  ) as HTMLButtonElement;
+                  const originalText = btn?.textContent || "";
+                  if (btn) {
+                    btn.textContent = "Publishing...";
+                    btn.setAttribute("disabled", "true");
+                  }
+
+                  try {
+                    const response = await fetch(
+                      `/api/${collectionSlug}/${formData.id}/publish`,
+                      {
+                        method: "POST",
+                        credentials: "include",
+                      },
+                    );
+
+                    if (response.ok) {
+                      onActionSuccess?.("Published successfully");
+                      location.reload();
+                    } else {
+                      const error = await response.json();
+                      setAlertModal({
+                        open: true,
+                        title: "Error",
+                        message: error.error || "Failed to publish",
+                      });
+                    }
+                  } catch (err) {
+                    setAlertModal({
+                      open: true,
+                      title: "Error",
+                      message: "Failed to publish",
+                    });
+                  } finally {
+                    if (btn) {
+                      btn.textContent = originalText;
+                      btn.removeAttribute("disabled");
+                    }
+                  }
+                }}
+                className="px-6 py-2.5 text-xs font-bold rounded-xl border-2 border-[var(--kyro-border)] text-[var(--kyro-text-primary)] hover:border-[var(--kyro-primary)] hover:bg-[var(--kyro-primary)] hover:text-white transition-all"
               >
-                <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>
+                Publish
+              </button>
+            )}
+
+            <div ref={menuRef} className="relative">
+              <button
+                type="button"
+                onClick={() => setIsMenuOpen(!isMenuOpen)}
+                className="p-2.5 text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-bg-secondary)] rounded-xl transition-all"
+              >
+                <svg
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="3"
+                >
+                  <circle cx="12" cy="12" r="1.5" fill="currentColor" />
+                  <circle cx="12" cy="5" r="1.5" fill="currentColor" />
+                  <circle cx="12" cy="19" r="1.5" fill="currentColor" />
+                </svg>
+              </button>
+              {isMenuOpen && (
+                <div className="absolute right-0 mt-2 w-48 rounded-lg border border-[var(--kyro-border)] bg-[var(--kyro-surface)] shadow-2xl z-50 overflow-hidden">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      handleCreateNew();
+                      setIsMenuOpen(false);
+                    }}
+                    className="w-full px-4 py-2.5 text-left text-xs font-medium text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] flex items-center gap-3 transition-colors"
+                  >
+                    <svg
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                    >
+                      <line x1="12" y1="5" x2="12" y2="19"></line>
+                      <line x1="5" y1="12" x2="19" y2="12"></line>
+                    </svg>
+                    Create New
+                  </button>
+                  {!isNew && (
+                    <>
+                      <button
+                        type="button"
+                        onClick={() => {
+                          handleDuplicate();
+                          setIsMenuOpen(false);
+                        }}
+                        className="w-full px-4 py-2.5 text-left text-xs font-medium text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] flex items-center gap-3 transition-colors"
+                      >
+                        <svg
+                          width="16"
+                          height="16"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                        >
+                          <rect
+                            x="9"
+                            y="9"
+                            width="13"
+                            height="13"
+                            rx="2"
+                            ry="2"
+                          ></rect>
+                          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                        </svg>
+                        Duplicate
+                      </button>
+                      {status === "published" && (
+                        <button
+                          type="button"
+                          onClick={() => {
+                            handleUnpublish();
+                            setIsMenuOpen(false);
+                          }}
+                          className="w-full px-4 py-2.5 text-left text-xs font-medium text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] flex items-center gap-3 transition-colors"
+                        >
+                          <svg
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                          >
+                            <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>
+                    </>
+                  )}
+                </div>
+              )}
+            </div>
           </div>
         </div>
       </header>
@@ -1270,9 +1840,20 @@ export function AutoForm({
     }
 
     // Default split layout
+    const showRightColumn = !sidebarCollapsed && !showPreview;
+    const hasSidebarFields =
+      config.fields.some((f) => f.admin?.position === "sidebar") &&
+      !showPreview;
+
     return (
       <div
-        className={`w-full mx-auto grid gap-8 pb-32 transition-all duration-700 ${showPreview ? "grid-cols-1 lg:grid-cols-2" : "grid-cols-1 lg:grid-cols-[1fr_380px]"}`}
+        className={`w-full mx-auto grid gap-8 pb-32 transition-all duration-700 ${
+          showPreview
+            ? "grid-cols-1 lg:grid-cols-2"
+            : sidebarCollapsed || !hasSidebarFields
+              ? "grid-cols-1"
+              : "grid-cols-1 lg:grid-cols-[1fr_380px]"
+        }`}
       >
         <div className="space-y-8 animate-in fade-in slide-in-from-left-4 duration-500">
           {config.tabs ? (
@@ -1305,12 +1886,12 @@ export function AutoForm({
               <div className="absolute inset-0 bg-transparent pointer-events-none border-[12px] border-[var(--kyro-surface)] rounded-3xl" />
             </div>
           </div>
-        ) : (
+        ) : sidebarCollapsed ? null : (
           <div className="space-y-6 animate-in fade-in slide-in-from-right-4 duration-500">
             {config.fields.some((f) => f.admin?.position === "sidebar") && (
               <div className="surface-tile p-6 space-y-6">
                 <h3 className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40">
-                  Sidebar Settings
+                  Settings
                 </h3>
                 {config.fields
                   .filter((f) => f.admin?.position === "sidebar")
@@ -1324,62 +1905,205 @@ export function AutoForm({
   };
 
   const renderVersionView = () => (
-    <div className="w-full space-y-6 animate-in fade-in slide-in-from-bottom-4 px-8 pb-12">
-      <div className="surface-tile p-8">
-        <h2 className="text-2xl font-black mb-2">Version History</h2>
-        <p className="text-[11px] text-[var(--kyro-text-secondary)] opacity-50 mb-8 uppercase tracking-widest font-bold">
-          Snapshots are created automatically every time you save changes.
-        </p>
+    <div className="w-full animate-in fade-in slide-in-from-bottom-4 pb-12">
+      <div className="surface-tile p-0 overflow-hidden">
+        <div className="px-6 py-4 border-b border-[var(--kyro-border)] flex items-center justify-between">
+          <div>
+            <h2 className="text-lg font-bold text-[var(--kyro-text-primary)]">
+              Version History
+            </h2>
+            <p className="text-[11px] text-[var(--kyro-text-muted)] mt-0.5">
+              {compareMode
+                ? `Select 2 versions · ${compareSelected.length}/2 chosen`
+                : `${versions.length} snapshot${versions.length !== 1 ? "s" : ""} · Auto-saved`}
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            {compareMode && compareSelected.length === 2 && (
+              <button
+                type="button"
+                onClick={handleCompareVersions}
+                disabled={loadingDiffs}
+                className="px-3 py-1.5 rounded-lg bg-[var(--kyro-primary)] text-white text-[11px] font-bold uppercase tracking-wider hover:opacity-90 disabled:opacity-50"
+              >
+                {loadingDiffs ? "Comparing..." : "Compare"}
+              </button>
+            )}
+            <button
+              type="button"
+              onClick={() => {
+                setCompareMode(!compareMode);
+                setCompareSelected([]);
+                setCompareDiffs([]);
+              }}
+              className={`px-3 py-1.5 rounded-lg text-[11px] font-bold uppercase tracking-wider transition-all ${
+                compareMode
+                  ? "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)]"
+                  : "border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)]"
+              }`}
+            >
+              {compareMode ? "Done" : "Compare"}
+            </button>
+          </div>
+        </div>
+
+        {compareDiffs.length > 0 && (
+          <div className="border-b border-[var(--kyro-border)]">
+            <div className="px-6 py-3 flex items-center justify-between">
+              <span className="text-[11px] font-bold text-[var(--kyro-text-primary)] uppercase tracking-wider">
+                {compareDiffs.length} change
+                {compareDiffs.length !== 1 ? "s" : ""}
+              </span>
+              <button
+                type="button"
+                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>
+              </button>
+            </div>
+            <div className="max-h-[400px] overflow-y-auto">
+              {compareDiffs.map((d, i) => (
+                <div
+                  key={i}
+                  className="grid grid-cols-4 gap-3 px-6 py-2.5 text-[11px] font-mono border-t border-[var(--kyro-border)] hover:bg-[var(--kyro-bg-secondary)]"
+                >
+                  <div className="text-[var(--kyro-text-muted)] truncate">
+                    {d.field}
+                  </div>
+                  <div className="text-[var(--kyro-text-muted)] truncate">
+                    {typeof d.oldValue === "object"
+                      ? JSON.stringify(d.oldValue)
+                      : String(d.oldValue ?? "null")}
+                  </div>
+                  <div className="col-span-2 text-[var(--kyro-text-primary)] truncate">
+                    {typeof d.newValue === "object"
+                      ? JSON.stringify(d.newValue)
+                      : String(d.newValue ?? "null")}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
 
         {loadingVersions ? (
-          <div className="flex justify-center py-20">
+          <div className="flex justify-center py-16">
             <span className="animate-spin text-[var(--kyro-primary)]">⌛</span>
           </div>
         ) : versions.length === 0 ? (
-          <p className="opacity-50 font-medium py-12 text-center italic">
-            No previous versions found for this document.
-          </p>
+          <div className="text-center py-16 text-[var(--kyro-text-muted)] text-sm italic">
+            No versions yet.
+          </div>
         ) : (
-          <div className="space-y-4">
-            {versions.map((v, i) => (
-              <div
-                key={v.id}
-                className="p-6 rounded-2xl border border-[var(--kyro-border)] bg-[var(--kyro-bg-secondary)] flex items-center justify-between group hover:border-[var(--kyro-primary)] transition-all duration-300"
-              >
-                <div className="flex items-center gap-6">
-                  <div className="w-12 h-12 rounded-2xl bg-[var(--kyro-bg-secondary)] flex items-center justify-center border border-[var(--kyro-border)]">
-                    <span className="text-[10px] font-black opacity-40">
-                      v{versions.length - i}
-                    </span>
-                  </div>
-                  <div>
-                    <div className="flex items-center gap-3 mb-1">
-                      <span className="text-sm font-black text-[var(--kyro-text-primary)]">
-                        {new Date(v.createdAt).toLocaleString("en-US", {
-                          month: "short",
-                          day: "numeric",
-                          year: "numeric",
-                          hour: "2-digit",
-                          minute: "2-digit",
-                        })}
+          <div className="divide-y divide-[var(--kyro-border)]">
+            {versions.map((v, i) => {
+              const isSelected = compareSelected.includes(v.id);
+              const isDraftVersion = v.status === "draft";
+              const isAutoSaved = (v.changeDescription || "")
+                .toLowerCase()
+                .includes("auto");
+
+              return (
+                <div
+                  key={v.id}
+                  onClick={
+                    compareMode ? () => toggleCompareSelection(v.id) : undefined
+                  }
+                  className={`grid grid-cols-12 gap-3 px-6 py-3 items-center transition-all ${
+                    compareMode
+                      ? isSelected
+                        ? "bg-[var(--kyro-primary)]/5 cursor-pointer"
+                        : "hover:bg-[var(--kyro-bg-secondary)] cursor-pointer"
+                      : "hover:bg-[var(--kyro-bg-secondary)]"
+                  } ${isDraftVersion ? "" : ""}`}
+                >
+                  <div className="col-span-1 flex items-center gap-2">
+                    {compareMode ? (
+                      <div
+                        className={`w-4 h-4 rounded-full border ${
+                          isSelected
+                            ? "border-[var(--kyro-primary)] bg-[var(--kyro-primary)]"
+                            : "border-[var(--kyro-border)]"
+                        }`}
+                      >
+                        {isSelected && (
+                          <svg
+                            className="w-full h-full text-white p-0.5"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="3"
+                          >
+                            <path d="M20 6L9 17l-5-5" />
+                          </svg>
+                        )}
+                      </div>
+                    ) : (
+                      <span className="text-[10px] font-bold text-[var(--kyro-text-muted)] w-5">
+                        {versions.length - i}
                       </span>
+                    )}
+                  </div>
+                  <div className="col-span-4 min-w-0">
+                    <div className="text-[13px] font-medium text-[var(--kyro-text-primary)] truncate flex items-center gap-2">
+                      {v.changeDescription || "Snapshot"}
+                      {isAutoSaved && (
+                        <span className="text-[9px] px-1.5 py-0.5 bg-[var(--kyro-bg-secondary)] text-[var(--kyro-text-secondary)] rounded font-bold uppercase tracking-wider">
+                          Auto
+                        </span>
+                      )}
+                    </div>
+                    <div className="text-[11px] text-[var(--kyro-text-muted)]">
+                      {new Date(v.createdAt).toLocaleString("en-US", {
+                        month: "short",
+                        day: "numeric",
+                        hour: "2-digit",
+                        minute: "2-digit",
+                      })}
                     </div>
-                    <p className="text-[11px] text-[var(--kyro-text-secondary)] font-medium italic opacity-60">
-                      System captured snapshot
-                    </p>
+                  </div>
+                  <div className="col-span-3">
+                    {v.status && (
+                      <span
+                        className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-bold capitalize tracking-wider ${
+                          v.status === "published"
+                            ? " text-[var(--kyro-success)]"
+                            : " text-[var(--kyro-warning)]"
+                        }`}
+                      >
+                        <span
+                          className={`w-1.5 h-1.5 rounded-full ${v.status === "published" ? "bg-[var(--kyro-success)]" : "bg-[var(--kyro-warning)]"}`}
+                        />
+                        {v.status}
+                      </span>
+                    )}
+                  </div>
+                  <div className="col-span-2 text-[11px] text-[var(--kyro-text-muted)]">
+                    {v.createdBy || "system"}
+                  </div>
+                  <div className="col-span-2 flex justify-end">
+                    {!compareMode && (
+                      <button
+                        type="button"
+                        onClick={() => handleRestoreVersion(v.id)}
+                        className="px-3 py-1.5 rounded-lg border border-[var(--kyro-border)] text-[11px] font-bold uppercase tracking-wider text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-primary)] hover:text-white hover:border-[var(--kyro-primary)] transition-all active:scale-95"
+                      >
+                        Restore
+                      </button>
+                    )}
                   </div>
                 </div>
-                <div className="flex items-center gap-3">
-                  <button
-                    type="button"
-                    onClick={() => handleRestoreVersion(v.id)}
-                    className="px-5 py-2.5 rounded-xl border border-[var(--kyro-border)] text-[var(--kyro-text-primary)] text-xs font-black uppercase tracking-widest hover:bg-[var(--kyro-primary)] hover:text-white hover:border-[var(--kyro-primary)] transition-all active:scale-95 shadow-lg group-hover:shadow-[var(--kyro-primary)]"
-                  >
-                    Restore
-                  </button>
-                </div>
-              </div>
-            ))}
+              );
+            })}
           </div>
         )}
       </div>
@@ -1508,131 +2232,36 @@ export function AutoForm({
         {view === "version" && renderVersionView()}
         {view === "api" && renderApiView()}
       </main>
-    </div>
-  );
-}
-
-interface UploadFieldProps {
-  field: any;
-  value: any;
-  onChange: (value: any) => void;
-  disabled?: boolean;
-  error?: string;
-  documentName?: string;
-}
-
-function UploadField({
-  field,
-  value,
-  onChange,
-  disabled,
-  error,
-  documentName,
-}: UploadFieldProps) {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [preview, setPreview] = useState<string | null>(null);
-  const [isDragging, setIsDragging] = useState(false);
-
-  const isImage = (file: File) => file.type.startsWith("image/");
-
-  const handleFile = (file: File) => {
-    if (isImage(file)) {
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        setPreview(reader.result as string);
-      };
-      reader.readAsDataURL(file);
-    }
-    onChange({
-      filename: file.name,
-      size: file.size,
-      type: file.type,
-      url: URL.createObjectURL(file),
-    });
-  };
-
-  const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragging(false);
-    const file = e.dataTransfer.files[0];
-    if (file) handleFile(file);
-  };
-
-  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-upload ${isDragging ? "kyro-form-upload-dragging" : ""} ${error ? "kyro-form-upload-error" : ""}`}
-        onDragOver={(e) => {
-          e.preventDefault();
-          setIsDragging(true);
+      <ConfirmModal
+        open={confirmModal.open}
+        onClose={() => setConfirmModal({ ...confirmModal, open: false })}
+        onConfirm={() => {
+          confirmModal.onConfirm();
+          setConfirmModal({ ...confirmModal, open: false });
         }}
-        onDragLeave={() => setIsDragging(false)}
-        onDrop={handleDrop}
-        onClick={() => inputRef.current?.click()}
+        title={confirmModal.title}
+        message={confirmModal.message}
+        variant={confirmModal.danger ? "danger" : "default"}
+      />
+      <UIModal
+        open={alertModal.open}
+        onClose={() => setAlertModal({ ...alertModal, open: false })}
+        title={alertModal.title}
+        size="sm"
+        footer={
+          <button
+            type="button"
+            onClick={() => setAlertModal({ ...alertModal, open: false })}
+            className="px-4 py-2 rounded-lg font-medium text-sm bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] hover:opacity-90 transition-colors"
+          >
+            OK
+          </button>
+        }
       >
-        <input
-          ref={inputRef}
-          type="file"
-          className="kyro-form-upload-input"
-          onChange={(e) => {
-            const file = e.target.files?.[0];
-            if (file) handleFile(file);
-          }}
-          disabled={disabled}
-          accept={field.mimeTypes?.join(",")}
-        />
-        {preview || value?.url ? (
-          <div className="kyro-form-upload-preview">
-            <img
-              src={preview || value.url}
-              alt="Preview"
-              className="kyro-form-upload-image"
-            />
-            <div className="kyro-form-upload-info">
-              <span className="kyro-form-upload-filename">
-                {value?.filename || "Uploaded file"}
-              </span>
-              <button
-                type="button"
-                className="kyro-form-upload-change"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  inputRef.current?.click();
-                }}
-              >
-                Change
-              </button>
-            </div>
-          </div>
-        ) : (
-          <div className="kyro-form-upload-placeholder">
-            <svg
-              width="32"
-              height="32"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="1.5"
-            >
-              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-              <polyline points="17,8 12,3 7,8" />
-              <line x1="12" y1="3" x2="12" y2="15" />
-            </svg>
-            <span>Drop image here or click to upload</span>
-            <span className="kyro-form-upload-hint">
-              PNG, JPG, GIF up to 10MB
-            </span>
-          </div>
-        )}
-      </div>
-      {field.admin?.description && !error && (
-        <p className="kyro-form-help">{field.admin.description}</p>
-      )}
-      {error && <p className="kyro-form-error">{error}</p>}
+        <p className="text-[var(--kyro-text-secondary)]">
+          {alertModal.message}
+        </p>
+      </UIModal>
     </div>
   );
 }