@kyro-cms/admin 0.3.2 → 0.3.4

package/src/hooks/useAutoFormState.ts

@@ -0,0 +1,527 @@
+import { useEffect, useRef, useCallback } from "react";
+import { useAutoFormStore } from "../lib/autoform-store";
+import { slugifyText } from "../lib/slugify";
+import { resolveUrl, fetchWithAuth } from "../lib/api";
+import { useUIStore } from "../lib/stores";
+
+interface UseAutoFormStateProps {
+  config: Record<string, unknown>;
+  initialData: Record<string, unknown>;
+  collectionSlug?: string;
+  globalSlug?: string;
+  onChange?: (data: Record<string, unknown>) => void;
+  onActionSuccess?: (msg: string) => void;
+  onActionError?: (msg: string) => void;
+}
+
+export function useAutoFormState({
+  config,
+  initialData,
+  collectionSlug,
+  globalSlug,
+  onChange,
+  onActionSuccess,
+  onActionError,
+}: UseAutoFormStateProps) {
+  const store = useAutoFormStore();
+  const { confirm, alert } = useUIStore();
+  const {
+    formData,
+    setFormData,
+    setField,
+    lastSavedData,
+    setLastSavedData,
+    setHasUnsavedChanges,
+    isSlugLocked,
+    loadDocument,
+    setIsAutoSaving,
+    setAutoSaveStatus,
+    setVersions,
+    setLoadingVersions,
+    sidebarCollapsed,
+    setSidebarCollapsed,
+    getDraftCache,
+    setDraftCache,
+    clearDraftCache,
+  } = store;
+
+  const versionsEnabled = !!config.versions;
+
+  const localSaveTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const serverSaveTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const lastAutoSaveTimeRef = useRef<number>(0);
+  const autoSaveSkipRef = useRef<boolean>(false);
+  const restorePromptedRef = useRef<string | null>(null);
+
+  const getDocumentKey = useCallback(
+    (id?: string) => {
+      if (globalSlug) return `global:${globalSlug}`;
+      if (collectionSlug && id) return `${collectionSlug}:${id}`;
+      return null;
+    },
+    [collectionSlug, globalSlug],
+  );
+
+const persistBrowserDraft = useCallback(
+     (
+       documentKey: string,
+       data: Record<string, unknown>,
+      options?: { lastSyncedAt?: string | null },
+    ) => {
+      setDraftCache(documentKey, {
+        data,
+        baseUpdatedAt: lastSavedData.updatedAt ?? null,
+        draftUpdatedAt: new Date().toISOString(),
+        lastSyncedAt: options?.lastSyncedAt ?? null,
+      });
+    },
+    [lastSavedData.updatedAt, setDraftCache],
+  );
+
+  const clearDraftArtifacts = useCallback(async () => {
+    const state = useAutoFormStore.getState();
+    const documentKey = getDocumentKey(state.formData.id);
+    if (documentKey) {
+      clearDraftCache(documentKey);
+    }
+
+    const draftUrl = globalSlug 
+      ? resolveUrl(`/api/globals/${globalSlug}/draft`)
+      : collectionSlug && state.formData.id 
+        ? resolveUrl(`/api/${collectionSlug}/${state.formData.id}/draft`)
+        : null;
+
+    if (draftUrl && versionsEnabled) {
+      try {
+        await fetchWithAuth(draftUrl, {
+          method: "DELETE",
+        });
+      } catch (err) {
+        console.error("Failed to clear draft snapshot:", err);
+      }
+    }
+  }, [clearDraftCache, collectionSlug, globalSlug, getDocumentKey]);
+
+  const fetchVersions = useCallback(async () => {
+    const url = globalSlug 
+      ? resolveUrl(`/api/globals/${globalSlug}/versions`)
+      : collectionSlug && formData.id 
+        ? resolveUrl(`/api/${collectionSlug}/${formData.id}/versions`)
+        : null;
+
+    if (!url) return;
+    setLoadingVersions(true);
+    try {
+      const resp = await fetchWithAuth(url);
+      const data = await resp.json();
+      setVersions(data.docs || []);
+    } catch (e) {
+      console.error("Failed to fetch versions:", e);
+    } finally {
+      setLoadingVersions(false);
+    }
+  }, [formData.id, collectionSlug, globalSlug, setLoadingVersions, setVersions]);
+
+  const performLocalAutoSave = useCallback(() => {
+    const state = useAutoFormStore.getState();
+    const latestFormData = state.formData;
+    const currentLastSaved = state.lastSavedData;
+    if (autoSaveSkipRef.current || !collectionSlug || !latestFormData.id) return;
+    if (JSON.stringify(latestFormData) === JSON.stringify(currentLastSaved)) return;
+    const documentKey = getDocumentKey(latestFormData.id);
+    if (documentKey) {
+      persistBrowserDraft(documentKey, latestFormData);
+    }
+  }, [collectionSlug, getDocumentKey, persistBrowserDraft]);
+
+  const performServerAutoSave = useCallback(async (options?: { keepalive?: boolean }) => {
+    const state = useAutoFormStore.getState();
+    const latestFormData = state.formData;
+    const currentLastSaved = state.lastSavedData;
+    
+    if (autoSaveSkipRef.current || (!versionsEnabled && !!globalSlug)) return;
+    if (!globalSlug && (!collectionSlug || !latestFormData.id)) return;
+    if (JSON.stringify(latestFormData) === JSON.stringify(currentLastSaved)) return;
+    
+    const documentKey = getDocumentKey(latestFormData.id);
+    if (documentKey) {
+      persistBrowserDraft(documentKey, latestFormData);
+    }
+
+    setIsAutoSaving(true);
+    setAutoSaveStatus("saving");
+
+    try {
+      const draftUpdatedAt = new Date().toISOString();
+      const draftUrl = globalSlug 
+        ? resolveUrl(`/api/globals/${globalSlug}/draft`)
+        : resolveUrl(`/api/${collectionSlug}/${latestFormData.id}/draft`);
+
+      const response = await fetchWithAuth(
+        draftUrl,
+        {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          keepalive: options?.keepalive,
+          body: JSON.stringify({
+            data: latestFormData,
+            baseUpdatedAt: currentLastSaved.updatedAt ?? null,
+            draftUpdatedAt,
+          }),
+        },
+      );
+
+      if (response.ok) {
+        const result = await response.json();
+        lastAutoSaveTimeRef.current = Date.now();
+        if (documentKey) {
+          setDraftCache(documentKey, {
+            data: latestFormData,
+            baseUpdatedAt: currentLastSaved.updatedAt ?? null,
+            draftUpdatedAt: result.data?.draftUpdatedAt || draftUpdatedAt,
+            lastSyncedAt: result.data?.updatedAt || new Date().toISOString(),
+          });
+        }
+        setAutoSaveStatus("success");
+        setTimeout(() => setAutoSaveStatus("idle"), 2000);
+      } else {
+        const error = await response.json().catch(() => ({}));
+        console.error("Draft auto-save failed:", error);
+        setAutoSaveStatus("error");
+        setTimeout(() => setAutoSaveStatus("idle"), 5000);
+      }
+    } catch (err) {
+      console.error("Auto-save failed:", err);
+      setAutoSaveStatus("error");
+      setTimeout(() => setAutoSaveStatus("idle"), 5000);
+    } finally {
+      setIsAutoSaving(false);
+    }
+  }, [
+    collectionSlug,
+    getDocumentKey,
+    persistBrowserDraft,
+    setAutoSaveStatus,
+    setDraftCache,
+    setIsAutoSaving,
+  ]);
+
+const saveDocument = useCallback(
+     async (dataOverride?: Record<string, unknown>) => {
+      const state = useAutoFormStore.getState();
+      const payload = dataOverride || 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" },
+          body: JSON.stringify({
+            ...payload,
+            baseUpdatedAt: state.lastSavedData.updatedAt ?? null,
+          }),
+        },
+      );
+
+      if (response.status === 409) {
+        setAutoSaveStatus("conflict");
+      }
+
+      return response;
+    },
+    [collectionSlug, globalSlug, setAutoSaveStatus],
+  );
+
+  const publishDocument = useCallback(async () => {
+    const state = useAutoFormStore.getState();
+    const url = globalSlug 
+      ? resolveUrl(`/api/globals/${globalSlug}/publish`)
+      : resolveUrl(`/api/${collectionSlug}/${state.formData.id}/publish`);
+
+    const response = await fetchWithAuth(
+      url,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          baseUpdatedAt: state.lastSavedData.updatedAt ?? null,
+        }),
+      },
+    );
+
+    if (response.status === 409) {
+      setAutoSaveStatus("conflict");
+    }
+
+    return response;
+  }, [collectionSlug, globalSlug, setAutoSaveStatus]);
+
+  const unpublishDocument = useCallback(async () => {
+    const state = useAutoFormStore.getState();
+    const url = globalSlug 
+      ? resolveUrl(`/api/globals/${globalSlug}/unpublish`)
+      : resolveUrl(`/api/${collectionSlug}/${state.formData.id}/unpublish`);
+
+    const response = await fetchWithAuth(
+      url,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+      },
+    );
+    return response;
+  }, [collectionSlug, globalSlug]);
+
+  // Track sidebar toggle
+  useEffect(() => {
+    const handleToggle = () => {
+      setSidebarCollapsed(!sidebarCollapsed);
+    };
+    window.addEventListener("toggle-sidebar", handleToggle);
+    return () => window.removeEventListener("toggle-sidebar", handleToggle);
+  }, [sidebarCollapsed, setSidebarCollapsed]);
+
+  // Track unsaved changes
+  useEffect(() => {
+    const isDifferent = JSON.stringify(formData) !== JSON.stringify(lastSavedData);
+    setHasUnsavedChanges(isDifferent);
+  }, [formData, lastSavedData, setHasUnsavedChanges]);
+
+  // Initial data load
+  const lastLoadedSlugRef = useRef<string | null>(null);
+  const initialDataLoadedRef = useRef(false);
+  useEffect(() => {
+    const currentSlug = globalSlug || initialData?.id;
+    if (initialDataLoadedRef.current && lastLoadedSlugRef.current === currentSlug) return;
+
+    setFormData(initialData || {});
+    loadDocument(initialData || {}, initialData || {});
+    initialDataLoadedRef.current = true;
+    lastLoadedSlugRef.current = currentSlug;
+  }, [formData.id, globalSlug, initialData, loadDocument, setFormData]);
+
+  useEffect(() => {
+    if (!collectionSlug || !initialData?.id) return;
+
+    const documentKey = getDocumentKey(initialData.id);
+    if (!documentKey) return;
+    if (restorePromptedRef.current === documentKey) return;
+
+    let cancelled = false;
+
+    const maybeRestoreDraft = async () => {
+      if (!versionsEnabled) return;
+      const browserDraft = getDraftCache(documentKey);
+      let serverDraft: Record<string, unknown> | null = null;
+
+try {
+         const response = await fetchWithAuth(
+           resolveUrl(`/api/${collectionSlug}/${initialData.id}/draft`),
+         );
+         if (response.ok) {
+           const result: { data?: Record<string, unknown> } = await response.json();
+           serverDraft = result.data || null;
+        }
+      } catch (err) {
+        console.error("Failed to fetch server draft:", err);
+      }
+
+const drafts = [browserDraft, serverDraft].filter(Boolean) as Array<{
+         data: Record<string, unknown>;
+         draftUpdatedAt: string;
+       }>;
+
+      const candidate = drafts.sort(
+        (a, b) =>
+          new Date(b.draftUpdatedAt).getTime() -
+          new Date(a.draftUpdatedAt).getTime(),
+      )[0];
+
+      if (!candidate) return;
+      if (JSON.stringify(candidate.data) === JSON.stringify(initialData)) {
+        return;
+      }
+
+      restorePromptedRef.current = documentKey;
+
+      confirm({
+        title: "Restore draft?",
+        message:
+          "A newer autosaved draft was found for this document. Restore it or discard it and continue with the saved version.",
+        confirmLabel: "Restore draft",
+        cancelLabel: "Discard draft",
+        onConfirm: async () => {
+          if (cancelled) return;
+          setFormData(candidate.data);
+          onActionSuccess?.("Recovered autosaved draft");
+        },
+        onCancel: async () => {
+          clearDraftCache(documentKey);
+          try {
+            await fetchWithAuth(
+              resolveUrl(`/api/${collectionSlug}/${initialData.id}/draft`),
+              { method: "DELETE" },
+            );
+          } catch (err) {
+            console.error("Failed to discard server draft:", err);
+          }
+        },
+      });
+    };
+
+    maybeRestoreDraft();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    clearDraftCache,
+    collectionSlug,
+    confirm,
+    getDocumentKey,
+    getDraftCache,
+    initialData,
+    onActionSuccess,
+    setFormData,
+  ]);
+
+  // Auto-generate metaTitle
+  useEffect(() => {
+const metaTitleField = config.fields.find(
+       (f: Record<string, unknown>) => f.name === "metaTitle" && f.admin?.autoGenerate === "title",
+     );
+    if (!metaTitleField) return;
+
+    let titleValue = "";
+    for (const field of config.fields) {
+      if (field.type === "tabs" && "tabs" in field && field.name) {
+        const tabData = formData[field.name as string];
+        if (tabData && typeof tabData === "object" && tabData.title) {
+          titleValue = tabData.title;
+          break;
+        }
+      }
+    }
+
+    if (titleValue && (!formData.metaTitle || formData.metaTitle === formData._lastMetaTitle)) {
+      setField("metaTitle", titleValue);
+    }
+  }, [formData, config.fields, setField]);
+
+  // Auto-generate slug
+  useEffect(() => {
+const slugField = config.fields.find(
+       (f: Record<string, unknown>) => f.name === "slug" && f.admin?.autoGenerate,
+     );
+    if (!slugField?.admin?.autoGenerate) return;
+    const sourceField: string = slugField.admin.autoGenerate;
+
+    let sourceValue = formData[sourceField];
+    if (!sourceValue) {
+      for (const field of config.fields) {
+        if (field.type === "tabs" && "tabs" in field && field.name) {
+          const tabData = formData[field.name as string];
+          if (tabData && typeof tabData === "object" && tabData[sourceField]) {
+            sourceValue = tabData[sourceField];
+            break;
+          }
+        }
+      }
+    }
+
+    if (isSlugLocked && sourceValue) {
+      const newSlug = slugifyText(sourceValue);
+      if (newSlug !== formData.slug) {
+        setField("slug", newSlug);
+      }
+    }
+  }, [formData, isSlugLocked, config.fields, setField]);
+
+  // Auto-save effect (Split-timer: 1.5s local, 10s server)
+  useEffect(() => {
+    if (sidebarCollapsed) return;
+    if (!globalSlug && (!collectionSlug || !formData.id)) return;
+
+    if (localSaveTimerRef.current) clearTimeout(localSaveTimerRef.current);
+    if (serverSaveTimerRef.current) clearTimeout(serverSaveTimerRef.current);
+
+    localSaveTimerRef.current = setTimeout(performLocalAutoSave, 1500);
+    serverSaveTimerRef.current = setTimeout(performServerAutoSave, 10000);
+
+    return () => {
+      if (localSaveTimerRef.current) clearTimeout(localSaveTimerRef.current);
+      if (serverSaveTimerRef.current) clearTimeout(serverSaveTimerRef.current);
+    };
+  }, [formData, sidebarCollapsed, collectionSlug, globalSlug, performLocalAutoSave, performServerAutoSave]);
+
+  useEffect(() => {
+    if (!globalSlug && (!collectionSlug || !formData.id)) return;
+
+    const flushDraft = () => {
+      if (autoSaveSkipRef.current) return;
+      void performServerAutoSave({ keepalive: true });
+    };
+
+    const handleVisibilityChange = () => {
+      if (document.hidden) {
+        flushDraft();
+      }
+    };
+
+    window.addEventListener("blur", flushDraft);
+    window.addEventListener("pagehide", flushDraft);
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+
+    return () => {
+      window.removeEventListener("blur", flushDraft);
+      window.removeEventListener("pagehide", flushDraft);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [collectionSlug, globalSlug, formData.id, performServerAutoSave]);
+
+  // Astro sync
+  useEffect(() => {
+    const hiddenInput = document.getElementById("form-data") as HTMLInputElement;
+    if (hiddenInput) {
+      hiddenInput.value = JSON.stringify(formData);
+    }
+    onChange?.(formData);
+  }, [formData, onChange]);
+
+  // Fetch versions on load
+  useEffect(() => {
+    if (globalSlug || formData.id) fetchVersions();
+  }, [formData.id, globalSlug, fetchVersions]);
+
+  // Derived status values the UI can use for badges and button state
+  const documentStatus: 'draft' | 'published' | 'archived' | undefined = (() => {
+    if (!versionsEnabled) return 'published';
+    if (!formData.id && !globalSlug) return 'draft';
+    // If it has a pending draft version, effectively it's in a draft state for the editor
+    if (formData._has_draft) return 'draft';
+    return formData._status || 'published';
+  })();
+
+  const hasUnpublishedChanges =
+    (!!formData.id || !!globalSlug) && (documentStatus !== 'published' || !!formData._has_draft);
+
+  return {
+    ...store,
+    fetchVersions,
+    performAutoSave: performServerAutoSave,
+    saveDocument,
+    publishDocument,
+    unpublishDocument,
+    clearDraftArtifacts,
+    autoSaveSkipRef,
+    lastAutoSaveTimeRef,
+    alert,
+    documentStatus,
+    hasUnpublishedChanges,
+    versionsEnabled,
+  };
+}

package/src/hooks/useSelection.ts

@@ -0,0 +1,49 @@
+import { useState, useCallback } from "react";
+
+interface SelectionState {
+  selectedIds: Set<string>;
+  selectOne: (id: string) => void;
+  selectAll: (ids: string[]) => void;
+  clearSelection: () => void;
+  isSelected: (id: string) => boolean;
+  selectedCount: number;
+}
+
+export function useSelection(): SelectionState {
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+
+  const selectOne = useCallback((id: string) => {
+    setSelectedIds(prev => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+
+  const selectAll = useCallback((ids: string[]) => {
+    setSelectedIds(prev => {
+      if (prev.size === ids.length && ids.every(id => prev.has(id))) {
+        return new Set();
+      }
+      return new Set(ids);
+    });
+  }, []);
+
+  const clearSelection = useCallback(() => {
+    setSelectedIds(new Set());
+  }, []);
+
+  const isSelected = useCallback((id: string) => {
+    return selectedIds.has(id);
+  }, [selectedIds]);
+
+  return {
+    selectedIds,
+    selectOne,
+    selectAll,
+    clearSelection,
+    isSelected,
+    selectedCount: selectedIds.size,
+  };
+}

package/src/index.ts

@@ -11,7 +11,8 @@ export {
   type SaveStatus,
 } from "./components/ActionBar";
 export { BulkActionsBar } from "./components/BulkActionsBar";
-export { StatusBadge, CountBadge } from "./components/StatusBadge";
+export { Badge, CountBadge } from "./components/ui/Badge";
+export { PageHeader } from "./components/ui/PageHeader";
 export { VersionHistoryPanel } from "./components/VersionHistoryPanel";
 export {
   ThemeProvider,
@@ -110,3 +111,12 @@ export {
 // Astro Integration
 export { kyroAdmin } from "./integration";
 export type { KyroAdminOptions } from "./integration";
+
+// Paths (for users who need direct access)
+export {
+  adminPath,
+  apiPath,
+  resolveApi,
+  resolveAdmin,
+  paths,
+} from "./lib/paths";