@kyro-cms/admin 0.9.1 → 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,
@@ -22,6 +23,7 @@ import { normalizeUploadFields } from "../lib/normalize-upload-fields";
 import { useAutoFormStore } from "../lib/autoform-store";
 import { useAutoFormState } from "../hooks/useAutoFormState";
 import { useUIStore, toast } from "../lib/stores";
+import { EmptyState } from "./ui/EmptyState";
 
 import { adminPath as ADMIN_BASE, apiPath as API_BASE } from "../lib/paths";
 
@@ -30,6 +32,9 @@ 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";
@@ -80,6 +85,7 @@ export function AutoForm({
     lastSavedData,
     hasUnsavedChanges,
     isAutoSaving,
+    backgroundProcessing,
     autoSaveStatus,
     lastSavedAt,
     retryCount,
@@ -116,8 +122,6 @@ export function AutoForm({
     setAutoSaveStatus,
     fetchVersions,
     saveDocument,
-    publishDocument,
-    clearDraftArtifacts,
     autoSaveSkipRef,
     lastAutoSaveTimeRef,
     documentStatus,
@@ -136,8 +140,16 @@ 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>,
@@ -367,18 +379,16 @@ 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();
-            toast.error(error.error || "Failed to unpublish");
+            const error = await response?.json().catch(() => ({}));
+            toast.error(error?.error || "Failed to unpublish");
           }
         } catch (err) {
           toast.error("Failed to unpublish");
@@ -390,13 +400,7 @@ export function AutoForm({
   const handleSaveDraft = async () => {
     const isNewDoc = !formData.id;
     autoSaveSkipRef.current = true;
-
-    const btn = document.getElementById("btn-publish") as HTMLButtonElement | null;
-    const originalText = btn?.textContent || "";
-    if (btn) {
-      btn.textContent = "Saving...";
-      btn.setAttribute("disabled", "true");
-    }
+    setLocalSaveStatus("saving");
 
     try {
       const data = normalizeUploadFields({ ...formData }) as Record<string, unknown>;
@@ -417,9 +421,12 @@ export function AutoForm({
         setLastSavedData({ ...formData, ...savedData });
         lastAutoSaveTimeRef.current = Date.now();
         setAutoSaveStatus("success");
-        await clearDraftArtifacts();
+        setLocalSaveStatus("saved");
         if (versionsEnabled) fetchVersions();
-        setTimeout(() => setAutoSaveStatus("idle"), 5000);
+        setTimeout(() => {
+          setAutoSaveStatus("idle");
+          setLocalSaveStatus("idle");
+        }, 2000);
         onActionSuccess?.(
           isPost ? "Document created successfully" : "Changes saved",
         );
@@ -433,33 +440,27 @@ export function AutoForm({
         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;
-      if (btn) {
-        btn.textContent = originalText;
-        btn.removeAttribute("disabled");
-      }
     }
   };
 
   const handlePublish = async () => {
     const isNewDoc = !formData.id;
     autoSaveSkipRef.current = true;
-
-    const btn = document.getElementById("btn-publish") as HTMLButtonElement | null;
-    const originalText = btn?.textContent || "";
-    if (btn) {
-      btn.textContent = "Publishing...";
-      btn.setAttribute("disabled", "true");
-    }
+    setLocalSaveStatus("saving");
 
     try {
-      // Step 1: Create or save the document
       if (isNewDoc && !globalSlug) {
+        // Create then immediately publish
         const data = normalizeUploadFields({ ...formData }) as Record<string, unknown>;
         const response = await fetchWithAuth(`/api/${collectionSlug}`, {
           method: "POST",
@@ -469,49 +470,39 @@ export function AutoForm({
         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 });
-      } else if (hasUnsavedChanges) {
-        const response = await saveDocument(formData);
-        if (!response.ok) {
-          const error = await response.json().catch(() => ({}));
-          if (response.status === 409) setAutoSaveStatus("conflict");
-          toast.error(error.error || "Failed to save before publishing");
-          return;
-        }
-        const result = await response.json();
-        if (result.data) {
-          setFormData({ ...formData, ...result.data });
-          setLastSavedData({ ...formData, ...result.data });
-        }
       }
 
-      // Step 2: Publish
-      const response = await publishDocument();
+      // 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) {
-        await clearDraftArtifacts();
+      if (response?.ok) {
+        setLocalSaveStatus("saved");
         onActionSuccess?.("Published successfully");
-        await new Promise((r) => setTimeout(r, 1500));
+        await new Promise((r) => setTimeout(r, 1000));
         location.reload();
       } else {
-        const error = await response.json();
-        if (response.status === 409) setAutoSaveStatus("conflict");
-        toast.error(error.error || "Failed to publish");
+        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;
-      if (btn) {
-        btn.textContent = originalText;
-        btn.removeAttribute("disabled");
-      }
     }
   };
 
@@ -870,8 +861,8 @@ export function AutoForm({
       (typeof formData.name === "object" ? "" : formData.name) ||
       "Untitled",
     );
-    // Use publishStatus from the document (set by the new draft/publish system)
-    const docStatus = documentStatus ?? formData.publishStatus ?? 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()
@@ -880,13 +871,11 @@ export function AutoForm({
       ? new Date(formData.createdAt as string).toLocaleString()
       : "Just now";
 
-    const isDraftMode = !formData.id || documentStatus === 'draft' || !!formData.hasDraft;
+    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';
@@ -911,19 +900,7 @@ export function AutoForm({
               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>
             <span className={`inline-flex items-center gap-1.5 px-2 rounded-full text-[10px] font-regular border ${statusBadgeBg}`}>
@@ -958,16 +935,7 @@ export function AutoForm({
             )}
             {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" />
-                </svg>
+                <Check className="w-4 h-4" />
                 {lastSavedAt ? `Saved ${Math.floor((Date.now() - lastSavedAt) / 60000)}m ago` : "Draft saved"}
               </span>
             )}
@@ -1031,7 +999,6 @@ export function AutoForm({
                   onClick={async () => {
                     setFormData(lastSavedData);
                     markSaved();
-                    await clearDraftArtifacts();
                   }}
                   className="text-[var(--kyro-primary)] hover:underline"
                 >
@@ -1039,6 +1006,19 @@ export function AutoForm({
                 </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>
@@ -1071,16 +1051,7 @@ export function AutoForm({
               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
@@ -1108,152 +1079,106 @@ export function AutoForm({
               </svg>
             </button>
 
-            {documentStatus === "published" && !isNew && !hasUnsavedChanges ? (
-              <span className="inline-flex items-center gap-1.5 px-6 py-2.5 text-xs rounded-xl bg-green-100 text-green-700 border border-green-200 cursor-not-allowed">
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                  <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" />
-                </svg>
-                Published
-              </span>
-            ) : (
-              <div ref={menuRef} className="relative flex items-center gap-3">
-                <div className="flex items-center rounded-xl overflow-hidden shadow-lg">
-                  <button
-                    id="btn-publish"
-                    type="button"
-                    onClick={isDraftMode ? handleSaveDraft : handlePublish}
-                    className={`px-6 py-2.5 text-xs font-bold rounded-l-xl rounded-r-none transition-all whitespace-nowrap ${isDraftMode ? 'kyro-btn-primary' : 'kyro-btn-success'}`}
-                  >
-                    {isDraftMode ? "Save Draft" : "Publish Changes"}
-                  </button>
+            {/* ── Publish button (no dropdown) ──────────────────────────────── */}
+            <SplitButton
+              status={documentStatus as SplitButtonStatus}
+              saveStatus={localSaveStatus}
+              hasChanges={hasUnsavedChanges}
+              onPublish={handlePublish}
+              disabled={localSaveStatus === "saving"}
+            />
+
+            {/* ── Kebab: document management actions ───────────────────────── */}
+            {!isNew && (
+              <Dropdown
+                trigger={
                   <button
                     type="button"
-                    onClick={() => setIsMenuOpen(!isMenuOpen)}
-                    className={`px-2.5 py-2.5 text-xs rounded-r-xl rounded-l-none transition-all ${isDraftMode ? 'kyro-btn-primary' : 'kyro-btn-success'}`}
+                    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="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
-                      <polyline points="6 9 12 15 18 9" />
+                    <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>
-                </div>
-
-                {isMenuOpen && (
-                  <div className="absolute right-0 top-full mt-2 w-56 rounded-lg border border-[var(--kyro-border)] bg-[var(--kyro-surface)] shadow-2xl z-50 overflow-hidden">
-                    <button
-                      type="button"
-                      onClick={() => {
-                        handleSaveDraft();
-                        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="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
-                        <polyline points="17 21 17 13 7 13 7 21" />
-                        <polyline points="7 3 7 8 15 8" />
+                }
+                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>
-                      Save Draft
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => {
-                        handlePublish();
-                        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">
-                        <polygon points="5 3 19 12 5 21 5 3" />
+                    }
+                  >
+                    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>
-                      Publish
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => {
-                        setIsMenuOpen(false);
-                        setShowSchedulePicker(true);
-                      }}
-                      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="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" />
+                    }
+                  >
+                    Duplicate
+                  </DropdownItem>
+                )}
+                <DropdownItem
+                  onClick={() => setShowSchedulePicker(true)}
+                  icon={
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                      <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+                      <line x1="16" y1="2" x2="16" y2="6" />
+                      <line x1="8" y1="2" x2="8" y2="6" />
+                      <line x1="3" y1="10" x2="21" y2="10" />
+                    </svg>
+                  }
+                >
+                  Schedule Publish
+                </DropdownItem>
+                {documentStatus === "published" && (
+                  <DropdownItem
+                    onClick={handleUnpublish}
+                    icon={
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
+                        <line x1="1" y1="1" x2="23" y2="23" />
                       </svg>
-                      Schedule Publish
-                    </button>
-                    <div className="h-px bg-[var(--kyro-border)]" />
-                    {!globalSlug && (
-                      <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>
+                    }
+                  >
+                    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>
-                        Create New
-                      </button>
-                    )}
-                    {!isNew && !globalSlug && (
-                      <>
-                        <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" />
-                            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-                          </svg>
-                          Duplicate
-                        </button>
-                        {documentStatus === "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" />
-                              <line x1="1" y1="1" x2="23" y2="23" />
-                            </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" />
-                            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-                          </svg>
-                          Delete
-                        </button>
-                      </>
-                    )}
-                  </div>
+                      }
+                    >
+                      Delete
+                    </DropdownItem>
+                  </>
                 )}
-              </div>
+              </Dropdown>
             )}
 
+
             {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">
@@ -1422,15 +1347,7 @@ export function AutoForm({
                 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">
@@ -1497,15 +1414,7 @@ export function AutoForm({
                           }`}
                       >
                         {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>
                     ) : (
@@ -1645,16 +1554,7 @@ export function AutoForm({
                         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">
@@ -1702,9 +1602,7 @@ export function AutoForm({
               )}
               {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" />
-                  </svg>
+                  <Check className="w-4 h-4" />
                   {lastSavedAt ? `Saved ${Math.floor((Date.now() - lastSavedAt) / 60000)}m ago` : "Saved"}
                 </span>
               )}
@@ -1742,7 +1640,6 @@ export function AutoForm({
             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");
               try {
                 const response = await saveDocument();
               if (response.ok) {
@@ -1943,9 +1840,7 @@ function RelationshipField({
               {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 };