@kyro-cms/admin 0.11.6 → 0.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyro-cms/admin",
-  "version": "0.11.6",
+  "version": "0.12.1",
   "engines": {
     "node": ">=22"
   },

package/src/components/ActionBar.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
-import { IconPlus, IconSend, IconClock, IconArchive, IconUndo, IconCopy, IconEye, IconTrash2, IconMoreVertical } from "./ui/icons";
+import { IconPlus, IconSend, IconClock, IconArchive, IconUndo, IconCopy, IconEye, IconTrash2, IconMoreVertical, ClipboardPaste, ClipboardCopy } from "./ui/icons";
 import { DropdownItem, DropdownSeparator } from "./ui/Dropdown";
 import { SplitButton } from "./ui/SplitButton";
 import { Spinner } from "./ui/Spinner";
@@ -23,6 +23,8 @@ export interface ActionBarProps {
   onToggleSidebar?: () => void;
   publishedAt?: string | null;
   updatedAt?: string | null;
+  onCopyData?: () => void;
+  onPasteData?: () => void;
 }
 
 const STATUS_DOT: Record<string, string> = {
@@ -54,6 +56,8 @@ export function ActionBar({
   onToggleSidebar,
   publishedAt,
   updatedAt,
+  onCopyData,
+  onPasteData,
 }: ActionBarProps) {
   const view = useAutoFormStore((s) => s.view) || "edit";
   const setView = useAutoFormStore((s) => s.setView);
@@ -130,6 +134,16 @@ export function ActionBar({
             <IconCopy className="w-3.5 h-3.5" />
           </button>
         )}
+        {onCopyData && (
+          <button type="button" onClick={onCopyData} className={`${iconBtnClass} max-md:hidden`} title="Copy Data">
+            <ClipboardCopy className="w-3.5 h-3.5" />
+          </button>
+        )}
+        {onPasteData && (
+          <button type="button" onClick={onPasteData} className={`${iconBtnClass} max-md:hidden`} title="Paste Data">
+            <ClipboardPaste className="w-3.5 h-3.5" />
+          </button>
+        )}
         {onDelete && (
           <button type="button" onClick={onDelete} className={`${iconBtnClass} hover:bg-[var(--kyro-danger-bg)] hover:text-[var(--kyro-danger)] max-md:hidden`} title="Delete">
             <IconTrash2 className="w-3.5 h-3.5" />
@@ -183,6 +197,16 @@ export function ActionBar({
                   <IconCopy className="w-3.5 h-3.5" /> Duplicate
                 </button>
               )}
+              {onCopyData && (
+                <button type="button" onClick={() => { onCopyData(); setMoreOpen(false); }} className="w-full flex items-center gap-2 px-3 py-2 text-xs text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] transition-colors">
+                  <ClipboardCopy className="w-3.5 h-3.5" /> Copy Data
+                </button>
+              )}
+              {onPasteData && (
+                <button type="button" onClick={() => { onPasteData(); setMoreOpen(false); }} className="w-full flex items-center gap-2 px-3 py-2 text-xs text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] transition-colors">
+                  <ClipboardPaste className="w-3.5 h-3.5" /> Paste Data
+                </button>
+              )}
               {onPreview && (
                 <button type="button" onClick={() => { onPreview(); setMoreOpen(false); }} className="w-full flex items-center gap-2 px-3 py-2 text-xs text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] transition-colors">
                   <IconEye className="w-3.5 h-3.5" /> Preview
@@ -225,15 +249,21 @@ export function ActionBar({
           onPublish={onSave}
         >
           {onDuplicate && (
-            <DropdownItem icon={<IconCopy className="w-4 h-4" />}>Duplicate</DropdownItem>
+            <DropdownItem icon={<IconCopy className="w-4 h-4" />} onClick={onDuplicate}>Duplicate</DropdownItem>
+          )}
+          {onCopyData && (
+            <DropdownItem icon={<ClipboardCopy className="w-4 h-4" />} onClick={onCopyData}>Copy Data</DropdownItem>
+          )}
+          {onPasteData && (
+            <DropdownItem icon={<ClipboardPaste className="w-4 h-4" />} onClick={onPasteData}>Paste Data</DropdownItem>
           )}
           {onViewHistory && (
-            <DropdownItem icon={<IconClock className="w-4 h-4" />}>View History</DropdownItem>
+            <DropdownItem icon={<IconClock className="w-4 h-4" />} onClick={onViewHistory}>View History</DropdownItem>
           )}
           {onPreview && (
-            <DropdownItem icon={<IconEye className="w-4 h-4" />}>Preview</DropdownItem>
+            <DropdownItem icon={<IconEye className="w-4 h-4" />} onClick={onPreview}>Preview</DropdownItem>
           )}
-          {(onDuplicate || onViewHistory || onPreview) && <DropdownSeparator />}
+          {(onDuplicate || onCopyData || onPasteData || onViewHistory || onPreview) && <DropdownSeparator />}
           {onDelete && (
             <DropdownItem onClick={onDelete} danger icon={<IconTrash2 className="w-4 h-4" />}>Delete</DropdownItem>
           )}

package/src/components/AutoForm.tsx

@@ -43,6 +43,7 @@ import { AutoFormHeader } from "./autoform/AutoFormHeader";
 import { AutoFormEditView } from "./autoform/AutoFormEditView";
 import { AutoFormVersionView } from "./autoform/AutoFormVersionView";
 import { AutoFormApiView } from "./autoform/AutoFormApiView";
+import { ErrorBoundary } from "./autoform/ErrorBoundary";
 
 interface AutoFormProps {
   config: CollectionConfig | GlobalConfig;
@@ -61,8 +62,49 @@ interface AutoFormProps {
   documentStatus?: string;
 }
 
-const EMPTY_OBJECT = {};
+function getNestedValue(obj: any, path: string): any {
+  if (!obj || typeof path !== "string") return undefined;
+  return path.split('.').reduce((acc, part) => (acc && acc[part] !== undefined ? acc[part] : undefined), obj);
+}
+
+function evaluateDeclarativeCondition(cond: any, currentData: any, formData: any): boolean {
+  if (!cond) return true;
+  
+  if (Array.isArray(cond.and)) {
+    return cond.and.every((c: any) => evaluateDeclarativeCondition(c, currentData, formData));
+  }
+  if (Array.isArray(cond.or)) {
+    return cond.or.some((c: any) => evaluateDeclarativeCondition(c, currentData, formData));
+  }
+  
+  if (cond.field) {
+    const targetField = cond.field;
+    let val = getNestedValue(currentData, targetField);
+    if (val === undefined) {
+      val = getNestedValue(formData, targetField);
+    }
+    
+    if ("equals" in cond) {
+      return val === cond.equals;
+    }
+    if ("notEquals" in cond) {
+      return val !== cond.notEquals;
+    }
+    if ("in" in cond && Array.isArray(cond.in)) {
+      return cond.in.includes(val);
+    }
+    if ("greaterThan" in cond) {
+      return typeof val === "number" && val > cond.greaterThan;
+    }
+    
+    // If field exists but no operator is provided, just check truthiness
+    return Boolean(val);
+  }
+  
+  return true;
+}
 
+const EMPTY_OBJECT = {};
 export function AutoForm({
   config: propConfig,
   data: initialData = EMPTY_OBJECT,
@@ -147,6 +189,7 @@ export function AutoForm({
     setAutoSaveStatus,
     fetchVersions,
     saveDocument,
+    forceSave,
     autoSaveSkipRef,
     lastAutoSaveTimeRef,
     documentStatus,
@@ -460,11 +503,14 @@ export function AutoForm({
       message: "Delete this document? This cannot be undone. Are you absolutely sure?",
       variant: "danger",
       onConfirm: async () => {
+        autoSaveSkipRef.current = true;
         try {
           await apiDelete(`/api/${collectionSlug}/${formData.id}`);
           window.location.href = `${ADMIN_BASE}/${collectionSlug}`;
         } catch (err) {
           toast.error((err as Error).message || "Failed to delete document");
+        } finally {
+          autoSaveSkipRef.current = false;
         }
       },
     });
@@ -475,6 +521,7 @@ export function AutoForm({
       title: "Unpublish Document",
       message: "Unpublish this document?",
       onConfirm: async () => {
+        autoSaveSkipRef.current = true;
         try {
           const response = await saveDocument(
             { ...formData, status: 'draft' } as Record<string, unknown>,
@@ -493,6 +540,8 @@ export function AutoForm({
           }
         } catch (err) {
           toast.error("Failed to unpublish");
+        } finally {
+          autoSaveSkipRef.current = false;
         }
       },
     });
@@ -533,7 +582,7 @@ export function AutoForm({
         );
         if (isPost) {
           setTimeout(() => {
-            window.location.href = `${ADMIN_BASE}/${collectionSlug}`;
+            window.location.href = `${ADMIN_BASE}/${collectionSlug}/${result.data.id}`;
           }, 800);
         }
       } else {
@@ -593,7 +642,22 @@ export function AutoForm({
       if (response?.ok) {
         setLocalSaveStatus("saved");
         onActionSuccess?.("Published successfully");
+        if (isNewDoc && !globalSlug && dataToPublish.id) {
+          setTimeout(() => {
+            window.location.href = `${ADMIN_BASE}/${collectionSlug}/${dataToPublish.id}`;
+          }, 800);
+        }
       } else {
+        // Two-step publish: if POST succeeded but PATCH failed,
+        // document exists as draft — navigate and inform user
+        if (isNewDoc && !globalSlug && dataToPublish.id) {
+          const error = await response?.json().catch(() => ({}));
+          toast.warning("Document saved as draft. Publishing failed: " + (error?.error || "Unknown error"));
+          setTimeout(() => {
+            window.location.href = `${ADMIN_BASE}/${collectionSlug}/${dataToPublish.id}`;
+          }, 1200);
+          return;
+        }
         const error = await response?.json().catch(() => ({}));
         if (response?.status === 409) setAutoSaveStatus("conflict");
         setLocalSaveStatus("error");
@@ -683,23 +747,7 @@ export function AutoForm({
         }
       } 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);
-          }
-
+          const shouldShow = evaluateDeclarativeCondition(field.admin.condition, currentData, formData);
           if (!shouldShow) {
             return null;
           }
@@ -1012,7 +1060,9 @@ export function AutoForm({
           handleUnpublish={handleUnpublish}
           handleDelete={handleDelete}
           handlePublish={handlePublish}
+          handleSaveDraft={handleSaveDraft}
           handleSchedulePublish={handleSchedulePublish}
+          handleConflictOverride={() => forceSave()}
         />
       )}
       {layout === "single" && (
@@ -1068,7 +1118,9 @@ export function AutoForm({
             type="button"
             style={{ width: 0, height: 0, opacity: 0, padding: 0, margin: 0, border: 'none', position: 'absolute' }}
             onClick={async () => {
+              autoSaveSkipRef.current = true;
               try {
+                window.dispatchEvent(new Event("kyro:global-save-start"));
                 const response = await saveDocument(formData);
                 if (response.ok) {
                   const result = await response.json();
@@ -1080,33 +1132,38 @@ export function AutoForm({
               } catch (e) {
                 console.error("Save error exception:", e);
                 onActionError?.("Save failed: " + (e as Error).message);
+              } finally {
+                autoSaveSkipRef.current = false;
+                window.dispatchEvent(new Event("kyro:global-save-end"));
               }
             }}
           />
         </>
       )}
       <main className="w-full pt-6 md:pt-0">
-        {view === "edit" && (
-          <AutoFormEditView
-            config={config}
-            layout={layout}
-            collectionSlug={collectionSlug}
-            renderField={renderField}
-          />
-        )}
-        {view === "version" && (
-          <AutoFormVersionView
-            handleRestoreVersion={handleRestoreVersion}
-            handleCompareVersions={handleCompareVersions}
-            toggleCompareSelection={toggleCompareSelection}
-          />
-        )}
-        {view === "api" && (
-          <AutoFormApiView
-            collectionSlug={collectionSlug}
-            globalSlug={globalSlug}
-          />
-        )}
+        <ErrorBoundary>
+          {view === "edit" && (
+            <AutoFormEditView
+              config={config}
+              layout={layout}
+              collectionSlug={collectionSlug}
+              renderField={renderField}
+            />
+          )}
+          {view === "version" && (
+            <AutoFormVersionView
+              handleRestoreVersion={handleRestoreVersion}
+              handleCompareVersions={handleCompareVersions}
+              toggleCompareSelection={toggleCompareSelection}
+            />
+          )}
+          {view === "api" && (
+            <AutoFormApiView
+              collectionSlug={collectionSlug}
+              globalSlug={globalSlug}
+            />
+          )}
+        </ErrorBoundary>
       </main>
     </div>
   );

package/src/components/DetailView.tsx

@@ -229,6 +229,45 @@ export function DetailView({
     }
   };
 
+  const handleCopyData = async () => {
+    try {
+      const copyPayload = { ...data };
+      // Strip system fields
+      delete copyPayload.id;
+      delete copyPayload.createdAt;
+      delete copyPayload.updatedAt;
+      delete (copyPayload as any).status;
+      
+      await navigator.clipboard.writeText(JSON.stringify(copyPayload));
+      toast.success("Document data copied to clipboard");
+    } catch (e) {
+      toast.error("Failed to copy document data");
+    }
+  };
+
+  const handlePasteData = async () => {
+    try {
+      const text = await navigator.clipboard.readText();
+      const pastedData = JSON.parse(text);
+      if (typeof pastedData !== 'object' || pastedData === null) {
+        throw new Error("Invalid format");
+      }
+      
+      setData((prev) => ({
+        ...prev,
+        ...pastedData,
+        // Preserve system fields from overwrite
+        id: prev.id,
+        createdAt: prev.createdAt,
+        updatedAt: prev.updatedAt,
+        status: prev.status,
+      }));
+      toast.success("Document data pasted");
+    } catch (e) {
+      toast.error("Clipboard does not contain valid document JSON");
+    }
+  };
+
   const handleDeleteTrigger = () => {
     confirm({
       title: `Delete ${label}?`,
@@ -300,6 +339,8 @@ export function DetailView({
         onPublish={handlePublish}
         onUnpublish={status === "published" ? handleUnpublish : undefined}
         onDuplicate={handleDuplicate}
+        onCopyData={handleCopyData}
+        onPasteData={handlePasteData}
         onViewHistory={() => {
           window.dispatchEvent(new CustomEvent('kyro:show-version-history'));
         }}

package/src/components/FieldRenderer.tsx

@@ -8,6 +8,7 @@ import SelectField from "./fields/SelectField";
 import DateField from "./fields/DateField";
 import { MarkdownField } from "./fields/MarkdownField";
 import TextField from "./fields/TextField";
+import IconField from "./fields/IconField";
 import { BlocksField } from "./fields/BlocksField";
 import { RichTextField } from "./fields";
 import { ListField } from "./fields/ListField";
@@ -62,6 +63,16 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
           disabled={disabled}
         />
       );
+    case "icon":
+      return (
+        <IconField
+          field={field as any}
+          value={value}
+          onChange={onChangeKeystroke}
+          error={error}
+          disabled={disabled}
+        />
+      );
     case "textarea":
       return (
         <TextField