@kyro-cms/admin 0.3.1 → 0.3.4

package/src/lib/autoform-store.ts

@@ -0,0 +1,435 @@
+import { create } from "zustand";
+import { persist, createJSONStorage } from "zustand/middleware";
+import type { StateStorage } from "zustand/middleware";
+import { createStorage } from "unstorage";
+import indexedbDriver from "unstorage/drivers/indexedb";
+import type { Version } from "@kyro-cms/core/client";
+
+let storageInstance: ReturnType<typeof createStorage> | null = null;
+let storageReady = false;
+
+const getStorage = async () => {
+  if (storageInstance && storageReady) {
+    return storageInstance;
+  }
+
+  storageInstance = createStorage({
+    driver: indexedbDriver({
+      dbName: "kyro-autosave",
+      storeName: "autosave",
+    }),
+  });
+
+  storageReady = true;
+  return storageInstance;
+};
+
+const createAutoFormStorage = (): StateStorage => {
+  if (typeof window === "undefined") {
+    return {
+      getItem: async () => null,
+      setItem: async () => {},
+      removeItem: async () => {},
+    };
+  }
+
+  return {
+    getItem: async (name: string): Promise<string | null> => {
+      try {
+        const store = await getStorage();
+        const value = await store.getItem<string>(name);
+        return value ?? null;
+      } catch (e) {
+        console.error("Storage getItem error:", e);
+        return localStorage.getItem(name);
+      }
+    },
+    setItem: async (name: string, value: string): Promise<void> => {
+      try {
+        const store = await getStorage();
+        await store.setItem(name, value);
+      } catch (e) {
+        console.error("Storage setItem error:", e);
+        localStorage.setItem(name, value);
+      }
+    },
+    removeItem: async (name: string): Promise<void> => {
+      try {
+        const store = await getStorage();
+        await store.removeItem(name);
+      } catch (e) {
+        console.error("Storage removeItem error:", e);
+        localStorage.removeItem(name);
+      }
+    },
+  };
+};
+
+interface AutoFormStore {
+   // In-memory document state
+   formData: Record<string, unknown>;
+   lastSavedData: Record<string, unknown>;
+   sidebarCollapsed: boolean;
+   draftCache: Record<string, BrowserDraftCacheEntry>;
+
+   // UI State (not persisted)
+   activeTab: number;
+   isSlugLocked: boolean;
+   view: "edit" | "version" | "api";
+   isDropdownOpen: boolean;
+   versions: Version[];
+   loadingVersions: boolean;
+   showPreview: boolean;
+   isMenuOpen: boolean;
+   hasUnsavedChanges: boolean;
+   loadingFields: Record<string, boolean>;
+   compareMode: boolean;
+   compareSelected: string[];
+   compareDiffs: VersionDiff[];
+   loadingDiffs: boolean;
+   isAutoSaving: boolean;
+   autoSaveStatus: "idle" | "saving" | "success" | "error" | "conflict";
+
+   // Auto-save
+   lastAutoSaveTime: number;
+   autoSaveSkip: boolean;
+   autoSaveTimer: NodeJS.Timeout | null;
+
+   // Actions - Field Updates
+   setField: (field: string, value: unknown) => void;
+   setFormData: (data: Record<string, unknown>) => void;
+   setLastSavedData: (data: Record<string, unknown>) => void;
+   setNestedField: (path: string, value: unknown) => void;
+
+  // Actions - UI State
+  setActiveTab: (tab: number) => void;
+  setIsSlugLocked: (locked: boolean | ((prev: boolean) => boolean)) => void;
+  setView: (view: "edit" | "version" | "api") => void;
+  setIsDropdownOpen: (open: boolean | ((prev: boolean) => boolean)) => void;
+  setVersions: (versions: Version[]) => void;
+  setLoadingVersions: (loading: boolean) => void;
+  setShowPreview: (show: boolean | ((prev: boolean) => boolean)) => void;
+  setIsMenuOpen: (open: boolean | ((prev: boolean) => boolean)) => void;
+  setHasUnsavedChanges: (hasChanges: boolean) => void;
+  setLoadingFields: (fields: Record<string, boolean> | ((prev: Record<string, boolean>) => Record<string, boolean>)) => void;
+  updateLoadingField: (field: string, loading: boolean) => void;
+  setCompareMode: (mode: boolean) => void;
+  setCompareSelected: (selected: string[] | ((prev: string[]) => string[])) => void;
+  setCompareDiffs: (diffs: VersionDiff[]) => void;
+  setLoadingDiffs: (loading: boolean) => void;
+  setIsAutoSaving: (saving: boolean) => void;
+  setAutoSaveStatus: (status: "idle" | "saving" | "success" | "error" | "conflict") => void;
+  setSidebarCollapsed: (collapsed: boolean) => void;
+
+  // Auto-save actions
+  setAutoSaveSkip: (skip: boolean) => void;
+  setLastAutoSaveTime: (time: number) => void;
+  startAutoSaveTimer: (callback: () => void, delay: number) => void;
+  clearAutoSaveTimer: () => void;
+
+  // Actions - Data Management
+  markSaved: () => void;
+  resetForm: () => void;
+loadDocument: (
+     data: Record<string, unknown>,
+     lastSaved?: Record<string, unknown>,
+   ) => void;
+
+   updateTabData: (tabName: string, newTabData: Record<string, unknown>) => void;
+   getField: (field: string) => unknown;
+   getNestedField: (path: string) => unknown;
+  getHasChanges: () => boolean;
+  setDraftCache: (documentKey: string, draft: BrowserDraftCacheEntry) => void;
+  getDraftCache: (documentKey: string) => BrowserDraftCacheEntry | null;
+  clearDraftCache: (documentKey: string) => void;
+}
+
+export interface BrowserDraftCacheEntry {
+   data: Record<string, unknown>;
+  baseUpdatedAt?: string | null;
+  draftUpdatedAt: string;
+  lastSyncedAt?: string | null;
+}
+
+export const useAutoFormStore = create<AutoFormStore>()(
+  persist(
+    (set, get) => ({
+      // Initial persisted state
+      formData: {},
+      lastSavedData: {},
+      sidebarCollapsed: false,
+      draftCache: {},
+
+      // Initial UI state
+      activeTab: 0,
+      isSlugLocked: true,
+      view: "edit",
+      isDropdownOpen: false,
+      versions: [],
+      loadingVersions: false,
+      showPreview: false,
+      isMenuOpen: false,
+      hasUnsavedChanges: false,
+      loadingFields: {},
+      compareMode: false,
+      compareSelected: [],
+      compareDiffs: [],
+      loadingDiffs: false,
+      isAutoSaving: false,
+      autoSaveStatus: "idle",
+
+      // Auto-save state
+      lastAutoSaveTime: 0,
+      autoSaveSkip: false,
+      autoSaveTimer: null,
+
+      // Field update actions
+setField: (field: string, value: unknown) => {
+         if (field === "blocks") {
+           console.log("autoform setField blocks: value=", value);
+         }
+         set((state) => ({
+           formData: {
+             ...state.formData,
+             [field]: value,
+           },
+         }));
+       },
+
+       setFormData: (data: Record<string, unknown>) => {
+         set({ formData: data });
+       },
+
+       setNestedField: (path: string, value: unknown) => {
+         set((state) => {
+           const keys = path.split(".");
+           const newFormData = { ...state.formData };
+           let current: Record<string, unknown> = newFormData;
+
+          for (let i = 0; i < keys.length - 1; i++) {
+            if (current[keys[i]] === undefined) {
+              current[keys[i]] = {};
+            }
+            current[keys[i]] = { ...current[keys[i]] };
+            current = current[keys[i]];
+          }
+
+          current[keys[keys.length - 1]] = value;
+
+          return { formData: newFormData };
+        });
+      },
+
+      // UI state actions
+      setActiveTab: (tab: number) => set({ activeTab: tab }),
+      setIsSlugLocked: (locked) =>
+        set((state) => ({
+          isSlugLocked:
+            typeof locked === "function" ? locked(state.isSlugLocked) : locked,
+        })),
+      setView: (view) => set({ view }),
+      setIsDropdownOpen: (open) =>
+        set((state) => ({
+          isDropdownOpen:
+            typeof open === "function" ? open(state.isDropdownOpen) : open,
+        })),
+      setVersions: (versions: Version[]) => set({ versions }),
+      setLoadingVersions: (loading: boolean) =>
+        set({ loadingVersions: loading }),
+      setShowPreview: (show) =>
+        set((state) => ({
+          showPreview:
+            typeof show === "function" ? show(state.showPreview) : show,
+        })),
+      setIsMenuOpen: (open) =>
+        set((state) => ({
+          isMenuOpen: typeof open === "function" ? open(state.isMenuOpen) : open,
+        })),
+      setHasUnsavedChanges: (hasChanges: boolean) =>
+        set({ hasUnsavedChanges: hasChanges }),
+      setLoadingFields: (fields) =>
+        set((state) => ({
+          loadingFields:
+            typeof fields === "function" ? fields(state.loadingFields) : fields,
+        })),
+      updateLoadingField: (field, loading) =>
+        set((state) => ({
+          loadingFields: { ...state.loadingFields, [field]: loading },
+        })),
+      setCompareMode: (mode: boolean) => set({ compareMode: mode }),
+      setCompareSelected: (selected) =>
+        set((state) => ({
+          compareSelected:
+            typeof selected === "function"
+              ? selected(state.compareSelected)
+              : selected,
+        })),
+      setCompareDiffs: (diffs: VersionDiff[]) => set({ compareDiffs: diffs }),
+      setLoadingDiffs: (loading: boolean) => set({ loadingDiffs: loading }),
+      setIsAutoSaving: (saving: boolean) => set({ isAutoSaving: saving }),
+      setAutoSaveStatus: (status) => set({ autoSaveStatus: status }),
+      setSidebarCollapsed: (collapsed: boolean) =>
+        set({ sidebarCollapsed: collapsed }),
+
+      // Auto-save actions
+      setAutoSaveSkip: (skip: boolean) => set({ autoSaveSkip: skip }),
+      setLastAutoSaveTime: (time: number) => set({ lastAutoSaveTime: time }),
+
+      startAutoSaveTimer: (callback: () => void, delay: number) => {
+        const { autoSaveTimer } = get();
+        if (autoSaveTimer) {
+          clearTimeout(autoSaveTimer);
+        }
+        const timer = setTimeout(callback, delay);
+        set({ autoSaveTimer: timer as any });
+      },
+
+      clearAutoSaveTimer: () => {
+        const { autoSaveTimer } = get();
+        if (autoSaveTimer) {
+          clearTimeout(autoSaveTimer);
+          set({ autoSaveTimer: null });
+        }
+      },
+
+      // Data management
+      markSaved: () => {
+        const { formData } = get();
+        set({ lastSavedData: formData, hasUnsavedChanges: false });
+      },
+
+      setLastSavedData: (data: Record<string, unknown>) => {
+        set({ lastSavedData: data });
+      },
+
+      resetForm: () => {
+        set({
+          formData: {},
+          lastSavedData: {},
+          hasUnsavedChanges: false,
+          activeTab: 0,
+        });
+      },
+
+      loadDocument: (
+        data: Record<string, unknown>,
+        lastSaved?: Record<string, unknown>,
+      ) => {
+        set({
+          formData: data,
+          lastSavedData: lastSaved || data,
+          hasUnsavedChanges: false,
+        });
+      },
+
+      updateTabData: (tabName, newTabData) => {
+        const { formData } = get();
+        const tabData = formData[tabName] || {};
+        
+        let updatedTab;
+        if (Array.isArray(newTabData)) {
+          updatedTab = { ...tabData, content: newTabData };
+        } else if (typeof newTabData === "object" && newTabData !== null) {
+          updatedTab = { ...tabData, ...newTabData };
+        } else {
+          updatedTab = newTabData;
+        }
+
+        set((state) => ({
+          formData: {
+            ...state.formData,
+            [tabName]: updatedTab,
+          },
+        }));
+      },
+
+      // Computed values
+      getField: (field: string) => {
+        return get().formData[field];
+      },
+
+      getNestedField: (path: string) => {
+        const keys = path.split(".");
+        let current: unknown = get().formData;
+
+        for (const key of keys) {
+          if (current === undefined || current === null) return undefined;
+          current = (current as Record<string, unknown>)[key];
+        }
+
+        return current;
+      },
+
+      getHasChanges: () => {
+        const { formData, lastSavedData } = get();
+        return JSON.stringify(formData) !== JSON.stringify(lastSavedData);
+      },
+
+      setDraftCache: (documentKey, draft) =>
+        set((state) => ({
+          draftCache: {
+            ...state.draftCache,
+            [documentKey]: draft,
+          },
+        })),
+
+      getDraftCache: (documentKey) => get().draftCache[documentKey] || null,
+
+      clearDraftCache: (documentKey) =>
+        set((state) => {
+          const next = { ...state.draftCache };
+          delete next[documentKey];
+          return { draftCache: next };
+        }),
+    }),
+    {
+      name: "kyro-autoform-storage",
+      storage: createJSONStorage(() => createAutoFormStorage()),
+      partialize: (state) => ({
+        sidebarCollapsed: state.sidebarCollapsed,
+        draftCache: state.draftCache,
+      }),
+    },
+  ),
+);
+
+// Helper hook to get field value with tab support
+export function useAutoFormField(
+   fieldName: string,
+   tabData?: Record<string, unknown>,
+) {
+  const formData = useAutoFormStore((s) => s.formData);
+  const setField = useAutoFormStore((s) => s.setField);
+  const setNestedField = useAutoFormStore((s) => s.setNestedField);
+
+  // If tabData is provided, look inside it first (for fields inside tabs)
+  if (tabData !== undefined) {
+    return {
+      value: tabData[fieldName],
+      onChange: (value: unknown) => {
+        return value;
+      },
+    };
+  }
+
+  return {
+    value: formData[fieldName],
+    onChange: (value: unknown) => setField(fieldName, value),
+  };
+}
+
+// Helper to get formData for tabs
+export function useAutoFormTabData(tabName: string) {
+  const formData = useAutoFormStore((s) => s.formData);
+  const setNestedField = useAutoFormStore((s) => s.setNestedField);
+  const setFormData = useAutoFormStore((s) => s.setFormData);
+
+  const tabData = formData[tabName] || {};
+  const updateTabData = useAutoFormStore((s) => s.updateTabData);
+
+  const onTabDataChange = (newTabData: Record<string, unknown>) => {
+    updateTabData(tabName, newTabData);
+  };
+
+  return { tabData, onTabDataChange };
+}

package/src/lib/config.ts

@@ -1,31 +1,72 @@
 import type { CollectionConfig, GlobalConfig } from "@kyro-cms/core/client";
+import projectConfig from "kyro:config";
 import {
   blogCollections,
   ecommerceCollections,
   minimalCollections,
   kitchenSinkCollections,
   mediaCollections,
+  authCollections,
   allSettingsGlobals,
   coreSettingsGlobals,
   ecommerceSettingsGlobals,
-} from "@kyro-cms/core";
-import { authCollections } from "../collections/auth";
-import { portfolioCollections } from "../collections/portfolio";
+} from "@kyro-cms/core/templates";
 
-export type AdminTemplate =
-  | "minimal"
-  | "blog"
-  | "ecommerce"
-  | "kitchen-sink"
-  | "portfolio";
+type ConfigCollectionInput =
+  | CollectionConfig[]
+  | Record<string, CollectionConfig>
+  | undefined;
+type ConfigGlobalInput =
+  | GlobalConfig[]
+  | Record<string, GlobalConfig>
+  | undefined;
+
+export type AdminTemplate = "minimal" | "blog" | "ecommerce" | "kitchen-sink";
+
+export function toArray<T>(input: T[] | Record<string, T> | undefined): T[] {
+  if (!input) return [];
+  return Array.isArray(input) ? input : Object.values(input);
+}
+
+export function toCollectionMap(
+  collections: CollectionConfig[],
+): Record<string, CollectionConfig> {
+  return collections.reduce(
+    (acc, c) => {
+      if (c.slug) acc[c.slug] = c;
+      return acc;
+    },
+    {} as Record<string, CollectionConfig>,
+  );
+}
+
+export function toGlobalMap(globals: GlobalConfig[]): Record<string, GlobalConfig> {
+  return globals.reduce(
+    (acc, g) => {
+      if (g.slug) acc[g.slug] = g;
+      return acc;
+    },
+    {} as Record<string, GlobalConfig>,
+  );
+}
+
+function addMissingCollections(
+  target: CollectionConfig[],
+  collections: CollectionConfig[],
+) {
+  const existing = new Set(target.map((collection) => collection.slug));
+  for (const collection of collections) {
+    if (!existing.has(collection.slug)) {
+      target.push(collection);
+      existing.add(collection.slug);
+    }
+  }
+}
 
 export function getAdminConfig(template: AdminTemplate = "blog") {
   const collections: CollectionConfig[] = [];
   const globals: GlobalConfig[] = [];
 
-  collections.push(...Object.values(mediaCollections));
-  collections.push(...Object.values(authCollections));
-
   switch (template) {
     case "minimal":
       collections.push(...Object.values(minimalCollections));
@@ -48,37 +89,44 @@ export function getAdminConfig(template: AdminTemplate = "blog") {
       );
       globals.push(...allSettingsGlobals);
       break;
-    case "portfolio":
-      collections.push(...Object.values(blogCollections));
-      collections.push(...Object.values(portfolioCollections));
-      globals.push(...coreSettingsGlobals);
-      break;
   }
 
-  const collectionsMap = collections.reduce(
-    (acc, c) => {
-      if (c.slug) acc[c.slug] = c;
-      return acc;
-    },
-    {} as Record<string, CollectionConfig>,
-  );
+  addMissingCollections(collections, Object.values(mediaCollections));
+  addMissingCollections(collections, Object.values(authCollections));
 
-  const globalsMap = globals.reduce(
-    (acc, g) => {
-      if (g.slug) acc[g.slug] = g;
-      return acc;
-    },
-    {} as Record<string, GlobalConfig>,
-  );
+  return {
+    collections: toCollectionMap(collections),
+    globals: toGlobalMap(globals),
+  };
+}
+
+function createProjectAdminConfig(config: {
+  collections?: ConfigCollectionInput;
+  globals?: ConfigGlobalInput;
+}) {
+  const projectCollections = toArray(config.collections);
+  const projectGlobals = toArray(config.globals);
+
+  if (projectCollections.length === 0 && projectGlobals.length === 0) {
+    return getAdminConfig("kitchen-sink");
+  }
+
+  const collections: CollectionConfig[] = [];
+  addMissingCollections(collections, Object.values(mediaCollections));
+  addMissingCollections(collections, Object.values(authCollections));
+  addMissingCollections(collections, projectCollections);
 
-  return { collections: collectionsMap, globals: globalsMap };
+  return {
+    collections: toCollectionMap(collections),
+    globals: toGlobalMap(projectGlobals),
+  };
 }
 
-export const adminConfig = getAdminConfig("minimal");
+export const adminConfig = createProjectAdminConfig(projectConfig);
 export const collections = adminConfig.collections;
 export const globals = adminConfig.globals;
 
-export const authCollectionSlugs = ["users", "roles", "audit_logs"];
+export const authCollectionSlugs = ["users", "audit_logs"];
 export const nonAuthCollections = Object.values(collections).filter(
   (c) => !authCollectionSlugs.includes(c.slug),
 );

package/src/lib/createRegistry.ts

@@ -0,0 +1,29 @@
+export interface RegistryItem {
+  id: string;
+}
+
+export function createRegistry<T extends RegistryItem>(validate?: (item: T) => void) {
+  const items = new Map<string, T>();
+
+  return {
+    register(item: T) {
+      if (items.has(item.id)) {
+        console.warn(`Item with id "${item.id}" is already registered. Overwriting.`);
+      }
+      validate?.(item);
+      items.set(item.id, item);
+    },
+
+    unregister(id: string) {
+      items.delete(id);
+    },
+
+    get(id: string): T | undefined {
+      return items.get(id);
+    },
+
+    getAll(): T[] {
+      return Array.from(items.values());
+    },
+  };
+}

package/src/lib/default-kyro-config.ts

@@ -0,0 +1,4 @@
+export default {
+  collections: [],
+  globals: [],
+};

package/src/lib/globals.ts

@@ -0,0 +1,50 @@
+import projectConfig from "kyro:config";
+import type { BaseAdapter } from "../../../src/registry/types.js";
+
+/**
+ * Fetches a global document by its slug.
+ * Works only in environments where kyro:config is available (Astro server).
+ */
+export async function getGlobal(slug: string, options?: { draft?: boolean }) {
+  const db = (projectConfig as Record<string, unknown>).adapter as BaseAdapter;
+  if (!db) return null;
+
+  try {
+    const doc = await db.findOne({
+      collection: `_globals_${slug}`,
+      where: {},
+      draft: options?.draft ?? false,
+    });
+
+    if (!doc) return null;
+
+    // Auto-resolve media IDs for common branding fields
+    const mediaFields = ["siteLogo", "siteFavicon", "siteOgImage"];
+    for (const field of mediaFields) {
+      if (typeof doc[field] === "string" && doc[field].length > 0) {
+        try {
+          const mediaDoc = await db.findByID({
+            collection: "media",
+            id: doc[field],
+          });
+          if (mediaDoc) {
+            doc[field] = mediaDoc;
+          }
+        } catch (e) {
+          console.warn(`Failed to resolve media for field "${field}":`, e);
+        }
+      }
+    }
+
+    return doc;
+  } catch (e) {
+    return null;
+  }
+}
+
+/**
+ * Convenience helper to get the site settings.
+ */
+export async function getSiteSettings(options?: { draft?: boolean }) {
+  return await getGlobal("site-settings", options);
+}

package/src/lib/media-utils.ts

@@ -0,0 +1,18 @@
+export type FileType = "image" | "video" | "audio" | "document" | "archive" | "code" | "unknown";
+
+export function getFileType(mimeType: string, filename?: string): FileType {
+  const ext = filename?.split(".").pop()?.toLowerCase();
+
+  if (mimeType.startsWith("image/")) return "image";
+  if (mimeType.startsWith("video/")) return "video";
+  if (mimeType.startsWith("audio/")) return "audio";
+
+  if (["pdf", "doc", "docx", "xls", "xlsx", "ppt", "pptx", "txt", "csv"].includes(ext || "")) return "document";
+  if (["zip", "rar", "tar", "gz", "7z"].includes(ext || "")) return "archive";
+  if (["js", "ts", "py", "rb", "java", "c", "cpp", "go", "rs", "css", "html", "json", "xml", "yaml", "toml", "sh"].includes(ext || "")) return "code";
+  if (mimeType.startsWith("text/")) return "document";
+
+  return "unknown";
+}
+
+export type MediaIconType = "image" | "video" | "audio" | "document" | "archive" | "unknown";