@kyro-cms/admin 0.11.6 → 0.12.0

package/src/components/autoform/AutoFormHeader.tsx

@@ -20,7 +20,9 @@ interface AutoFormHeaderProps {
   handleUnpublish: () => void;
   handleDelete: () => void;
   handlePublish: () => void;
+  handleSaveDraft: () => void;
   handleSchedulePublish: (scheduledFor: string) => void;
+  handleConflictOverride?: () => void;
 }
 
 export function AutoFormHeader({
@@ -35,7 +37,9 @@ export function AutoFormHeader({
   handleUnpublish,
   handleDelete,
   handlePublish,
+  handleSaveDraft,
   handleSchedulePublish,
+  handleConflictOverride,
 }: AutoFormHeaderProps) {
   const [now, setNow] = useState(Date.now());
   const [showSchedulePicker, setShowSchedulePicker] = useState(false);
@@ -76,7 +80,7 @@ export function AutoFormHeader({
   }, [showSchedulePicker]);
 
   const docTitle = String(
-    (formData.mainTabs as { title?: string })?.title ||
+    (formData.tabs as { title?: string })?.title ||
     (typeof formData.title === "object" ? "" : formData.title) ||
     (typeof formData.name === "object" ? "" : formData.name) ||
     "Untitled",
@@ -165,13 +169,7 @@ export function AutoFormHeader({
             <span className="opacity-30">—</span>
             <button
               type="button"
-              onClick={async () => {
-                // To keep changes during conflict, we'd fire the prop or a store action.
-                // For now, reload handles the other side. Since this is in header, we'll
-                // trigger a window reload or a saveDocument via context if needed.
-                // It's cleaner to handle this conflict directly if passed as a prop,
-                // but let's just trigger a reload for simplicity if they want the server version.
-              }}
+              onClick={() => handleConflictOverride?.()}
               className="text-[var(--kyro-primary)] hover:underline"
             >
               Keep my changes
@@ -207,6 +205,19 @@ export function AutoFormHeader({
       }
       direction="down"
     >
+      <DropdownItem
+        onClick={handleSaveDraft}
+        icon={
+          <svg 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" />
+          </svg>
+        }
+      >
+        Save Draft
+        <span className="ml-auto text-[9px] opacity-40 font-mono">⌘S</span>
+      </DropdownItem>
       {!globalSlug && (
         <DropdownItem
           onClick={handleCreateNew}

package/src/components/autoform/ErrorBoundary.tsx

@@ -0,0 +1,93 @@
+import React, { Component, type ReactNode } from "react";
+import { AlertTriangle, RefreshCw, Copy } from "../ui/icons";
+import { useAutoFormStore } from "../../lib/autoform-store";
+import { toast } from "../../lib/stores";
+
+interface Props {
+  children: ReactNode;
+  fallbackTitle?: string;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: string | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null, errorInfo: null };
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<State> {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error("[ErrorBoundary] Caught:", error, errorInfo);
+    this.setState({ errorInfo: errorInfo.componentStack || null });
+  }
+
+  handleCopyToClipboard = () => {
+    const { error, errorInfo } = this.state;
+    const formData = useAutoFormStore.getState().formData;
+    const payload = {
+      error: error?.message,
+      stack: error?.stack,
+      componentStack: errorInfo,
+      formData,
+      timestamp: new Date().toISOString(),
+    };
+    navigator.clipboard.writeText(JSON.stringify(payload, null, 2)).then(() => {
+      toast.success("Crash details copied to clipboard");
+    });
+  };
+
+  handleReload = () => {
+    window.location.reload();
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="flex flex-col items-center justify-center gap-4 p-16">
+          <div className="w-16 h-16 rounded-2xl bg-red-500/10 flex items-center justify-center">
+            <AlertTriangle className="w-8 h-8 text-red-500" />
+          </div>
+          <h3 className="text-lg font-bold text-[var(--kyro-text-primary)]">
+            {this.props.fallbackTitle || "Something went wrong"}
+          </h3>
+          <p className="text-sm text-[var(--kyro-text-secondary)] text-center max-w-md">
+            The form encountered an unexpected error. Your unsaved changes may still be recoverable.
+          </p>
+          {this.state.error && (
+            <p className="text-xs font-mono text-red-500/70 bg-red-500/5 px-4 py-2 rounded-lg max-w-full overflow-auto">
+              {this.state.error.message}
+            </p>
+          )}
+          <div className="flex items-center gap-3 mt-2">
+            <button
+              type="button"
+              onClick={this.handleReload}
+              className="flex items-center gap-2 px-4 py-2 text-sm font-bold rounded-xl border border-[var(--kyro-border)] hover:bg-[var(--kyro-surface-accent)] transition-colors"
+            >
+              <RefreshCw className="w-4 h-4" />
+              Reload Page
+            </button>
+            <button
+              type="button"
+              onClick={this.handleCopyToClipboard}
+              className="flex items-center gap-2 px-4 py-2 text-sm font-bold rounded-xl bg-[var(--kyro-primary)]/10 text-[var(--kyro-primary)] hover:bg-[var(--kyro-primary)]/20 transition-colors"
+            >
+              <Copy className="w-4 h-4" />
+              Copy Details
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/src/components/blocks/HeadingSubheadingBlock.tsx

@@ -22,8 +22,8 @@ export const HeadingSubheadingBlock: React.FC<{ block: Record<string, unknown>;
   return (
     <BlockWrapper id={block.id} type="heading-subheading" label="Heading + Subheading">
       <HeadingSubheadingField
-        heading={data.heading || ""}
-        subheading={data.subheading || ""}
+        heading={data.title || ""}
+        subheading={data.subtitle || ""}
         onChange={handleChange}
         compact
       />

package/src/components/blocks/HeroBlock.tsx

@@ -60,8 +60,8 @@ export const HeroBlock: React.FC<{ block: Record<string, unknown>; index: number
 
       <div className="space-y-3">
         <HeroField
-          heading={data.heading || ""}
-          subheading={data.subheading || ""}
+          heading={data.title || ""}
+          subheading={data.subtitle || ""}
           ctaText={data.ctaText || ""}
           ctaUrl={data.ctaUrl || ""}
           onChange={handleChange}

package/src/components/fields/BlocksField.tsx

@@ -58,7 +58,7 @@ function getBlockPreviewSnippet(
       }
     }
   }
-  return data.heading || data.title || data.text || data.name || data.label || data.sectionTitle || "";
+  return data.title || data.text || data.name || data.label || "";
 }
 
 // Sortable block wrapper for drag-and-drop

package/src/components/fields/HeadingSubheadingField.tsx

@@ -26,13 +26,13 @@ export const HeadingSubheadingField: React.FC<HeadingSubheadingFieldProps> = ({
       <input
         type="text"
         value={heading}
-        onChange={(e) => onChange("heading", e.target.value)}
+        onChange={(e) => onChange("title", e.target.value)}
         className={`${inputClass} font-bold text-base`}
         placeholder="Heading..."
       />
       <textarea
         value={subheading}
-        onChange={(e) => onChange("subheading", e.target.value)}
+        onChange={(e) => onChange("subtitle", e.target.value)}
         className={textareaClass}
         placeholder="Subheading..."
       />

package/src/components/fields/HeroField.tsx

@@ -31,13 +31,13 @@ export const HeroField: React.FC<HeroFieldProps> = ({
         <input
           type="text"
           value={heading}
-          onChange={(e) => onChange("heading", e.target.value)}
+          onChange={(e) => onChange("title", e.target.value)}
           className={`${inputClass} font-bold text-base`}
           placeholder="Hero heading..."
         />
         <textarea
           value={subheading}
-          onChange={(e) => onChange("subheading", e.target.value)}
+          onChange={(e) => onChange("subtitle", e.target.value)}
           className={textareaClass}
           placeholder="Hero subheading..."
         />
@@ -67,13 +67,13 @@ export const HeroField: React.FC<HeroFieldProps> = ({
       <input
         type="text"
         value={heading}
-        onChange={(e) => onChange("heading", e.target.value)}
+        onChange={(e) => onChange("title", e.target.value)}
         className={`${inputClass} font-bold text-base`}
         placeholder="Hero heading..."
       />
       <textarea
         value={subheading}
-        onChange={(e) => onChange("subheading", e.target.value)}
+        onChange={(e) => onChange("subtitle", e.target.value)}
         className={textareaClass}
         placeholder="Hero subheading..."
       />

package/src/components/fields/RelationshipField.tsx

@@ -43,11 +43,11 @@ interface ResolvedDoc {
 }
 
 function getLabel(opt: Record<string, unknown>): string {
-  const mainTabs = opt?.mainTabs as Record<string, unknown> | undefined;
+  const tabs = opt?.tabs as Record<string, unknown> | undefined;
 
   return (
     (opt?.title as string) ||
-    (mainTabs?.title as string) ||
+    (tabs?.title as string) ||
     (opt?.name as string) ||
     (opt?.label as string) ||
     (opt?.email as string) ||

package/src/components/fields/extensions/blocksStore.ts

@@ -157,7 +157,7 @@ export function createNewBlock(type: string): BlockData {
 function getDefaultData(type: string): Record<string, unknown> {
   const defaults: Record<string, unknown> = {
     heading: { level: 1, text: "" },
-    "heading-subheading": { heading: "", subheading: "" },
+    "heading-subheading": { title: "", subtitle: "" },
     hero: { isMultiScreen: false },
     card: { title: "", description: "", icon: "", link: "", linkText: "", isMultiCard: false },
     paragraph: { text: "" },

package/src/hooks/useAutoFormState.ts

@@ -151,7 +151,7 @@ const persistBrowserDraft = useCallback(
     const latestFormData = state.formData;
     const currentLastSaved = state.lastSavedData;
 
-    if (autoSaveSkipRef.current || (!versionsEnabled && !!globalSlug)) return;
+    if (autoSaveSkipRef.current) return;
     if (!globalSlug && (!collectionSlug || !latestFormData.id)) return;
     if (!state.hasDirtyFields()) return;
 
@@ -169,6 +169,10 @@ const persistBrowserDraft = useCallback(
     setAutoSaveStatus("saving");
     state.setBackgroundProcessing(true);
 
+    if (globalSlug) {
+      window.dispatchEvent(new Event("kyro:global-save-start"));
+    }
+
     try {
       const url = globalSlug
         ? resolveUrl(`/api/globals/${globalSlug}?autosave=true`)
@@ -226,6 +230,9 @@ const persistBrowserDraft = useCallback(
         setAutoSaveStatus("offline");
       }
     } finally {
+      if (globalSlug) {
+        window.dispatchEvent(new Event("kyro:global-save-end"));
+      }
       setIsAutoSaving(false);
       useAutoFormStore.getState().setBackgroundProcessing(false);
     }
@@ -287,6 +294,48 @@ const persistBrowserDraft = useCallback(
     [collectionSlug, globalSlug, setAutoSaveStatus],
   );
 
+  // Force-save: retries without baseUpdatedAt to bypass OCC (conflict override)
+  const forceSave = useCallback(
+    async (isDraft = true) => {
+      const state = useAutoFormStore.getState();
+      const payload = state.formData;
+
+      const url = globalSlug
+        ? resolveUrl(`/api/globals/${globalSlug}`)
+        : resolveUrl(`/api/${collectionSlug}/${payload.id}`);
+
+      const response = await fetchWithAuth(
+        url,
+        {
+          method: "PATCH",
+          headers: {
+            "Content-Type": "application/json",
+            "X-Draft": String(isDraft),
+          },
+          body: JSON.stringify({
+            ...normalizeUploadFields(payload) as Record<string, unknown>,
+          }),
+        },
+      );
+
+      if (response.ok) {
+        const result = await response.json();
+        const savedData = result.data || payload;
+        state.setFormData({ ...payload, ...savedData });
+        state.setLastSavedData({ ...payload, ...savedData });
+        setAutoSaveStatus("success");
+        setTimeout(() => {
+          if (useAutoFormStore.getState().autoSaveStatus === "success") {
+            setAutoSaveStatus("idle");
+          }
+        }, 2000);
+      }
+
+      return response;
+    },
+    [collectionSlug, globalSlug, setAutoSaveStatus],
+  );
+
   // Track sidebar toggle
   useEffect(() => {
     const handleToggle = () => {
@@ -527,6 +576,7 @@ const persistBrowserDraft = useCallback(
     fetchVersions,
     performAutoSave: performAutosave,
     saveDocument,
+    forceSave,
     autoSaveSkipRef,
     lastAutoSaveTimeRef,
     documentStatus,

package/src/integration.ts

@@ -141,11 +141,11 @@ export function kyroAdmin(options: KyroAdminOptions = {}): AstroIntegration {
           ];
           for (const col of (configResult.collections || [])) {
             if (col.seo) {
-              const mainTabsField = col.fields?.find((f: any) => f.type === 'tabs' && f.name === 'mainTabs');
-              if (mainTabsField?.tabs) {
+              const tabsField = col.fields?.find((f: any) => f.type === 'tabs' && f.name === 'tabs');
+              if (tabsField?.tabs) {
                 // Only add if not already injected (avoid duplicates on hot-reload)
-                if (!mainTabsField.tabs.find((t: any) => t.label === 'SEO Settings')) {
-                  mainTabsField.tabs.push({ label: "SEO Settings", fields: seoFields });
+                if (!tabsField.tabs.find((t: any) => t.label === 'SEO Settings')) {
+                  tabsField.tabs.push({ label: "SEO Settings", fields: seoFields });
                 }
               }
             }

package/src/pages/settings/[slug].astro

@@ -118,7 +118,7 @@ const description =
     window.addEventListener("kyro:global-save-start", () => {
       if (saveBtn) {
         saveBtn.disabled = true;
-        saveBtn.innerHTML = "Saving...";
+        saveBtn.innerHTML = `<svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white inline-block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>Saving...`;
         saveBtn.classList.add("opacity-50", "cursor-wait");
       }
     });