@kyro-cms/admin 0.8.0 → 0.9.1

package/src/lib/autoform-store.ts

@@ -65,6 +65,8 @@ const createAutoFormStorage = (): StateStorage => {
   };
 };
 
+type AutoSaveStatus = "idle" | "saving" | "success" | "error" | "conflict" | "retrying" | "offline";
+
 interface AutoFormStore {
    // In-memory document state
    formData: Record<string, unknown>;
@@ -72,6 +74,9 @@ interface AutoFormStore {
    sidebarCollapsed: boolean;
    draftCache: Record<string, BrowserDraftCacheEntry>;
 
+   // Dirty field tracking (not persisted)
+   dirtyFields: Set<string>;
+
    // UI State (not persisted)
    activeTab: number;
    isSlugLocked: boolean;
@@ -88,13 +93,14 @@ interface AutoFormStore {
    compareDiffs: VersionDiff[];
    loadingDiffs: boolean;
    isAutoSaving: boolean;
-   autoSaveStatus: "idle" | "saving" | "success" | "error" | "conflict";
+   autoSaveStatus: AutoSaveStatus;
 
    // Auto-save
-   lastAutoSaveTime: number;
-   autoSaveSkip: boolean;
-   autoSaveTimer: NodeJS.Timeout | null;
-
+    lastAutoSaveTime: number;
+    lastSavedAt: number | null;
+    retryCount: number;
+    autoSaveSkip: boolean;
+    autoSaveTimer: NodeJS.Timeout | null;
    // Actions - Field Updates
    setField: (field: string, value: unknown) => void;
    setFormData: (data: Record<string, unknown>) => void;
@@ -118,8 +124,10 @@ interface AutoFormStore {
   setCompareDiffs: (diffs: VersionDiff[]) => void;
   setLoadingDiffs: (loading: boolean) => void;
   setIsAutoSaving: (saving: boolean) => void;
-  setAutoSaveStatus: (status: "idle" | "saving" | "success" | "error" | "conflict") => void;
+  setAutoSaveStatus: (status: AutoSaveStatus) => void;
   setSidebarCollapsed: (collapsed: boolean) => void;
+  setLastSavedAt: (time: number | null) => void;
+  setRetryCount: (count: number) => void;
 
   // Auto-save actions
   setAutoSaveSkip: (skip: boolean) => void;
@@ -127,6 +135,7 @@ interface AutoFormStore {
   startAutoSaveTimer: (callback: () => void, delay: number) => void;
   clearAutoSaveTimer: () => void;
 
+
   // Actions - Data Management
   markSaved: () => void;
   resetForm: () => void;
@@ -135,10 +144,13 @@ loadDocument: (
      lastSaved?: Record<string, unknown>,
    ) => void;
 
-   updateTabData: (tabName: string, newTabData: Record<string, unknown>) => void;
    getField: (field: string) => unknown;
    getNestedField: (path: string) => unknown;
   getHasChanges: () => boolean;
+  hasDirtyFields: () => boolean;
+  getDirtyData: () => Record<string, unknown>;
+  clearDirtyFields: () => void;
+  pruneExpiredDrafts: () => void;
   setDraftCache: (documentKey: string, draft: BrowserDraftCacheEntry) => void;
   getDraftCache: (documentKey: string) => BrowserDraftCacheEntry | null;
   clearDraftCache: (documentKey: string) => void;
@@ -160,6 +172,9 @@ export const useAutoFormStore = create<AutoFormStore>()(
       sidebarCollapsed: false,
       draftCache: {},
 
+      // Dirty field tracking
+      dirtyFields: new Set<string>(),
+
       // Initial UI state
       activeTab: 0,
       isSlugLocked: true,
@@ -176,24 +191,34 @@ export const useAutoFormStore = create<AutoFormStore>()(
       compareDiffs: [],
       loadingDiffs: false,
       isAutoSaving: false,
-      autoSaveStatus: "idle",
+      autoSaveStatus: "idle" as AutoSaveStatus,
 
       // Auto-save state
       lastAutoSaveTime: 0,
+      lastSavedAt: null,
+      retryCount: 0,
       autoSaveSkip: false,
       autoSaveTimer: null,
 
+
       // Field update actions
 setField: (field: string, value: unknown) => {
-         if (field === "blocks") {
-           console.log("autoform setField blocks: value=", value);
+         const state = get();
+         const newDirty = new Set(state.dirtyFields);
+         // Mark dirty if value differs from last saved baseline
+         if (JSON.stringify(value) !== JSON.stringify(state.lastSavedData[field])) {
+           newDirty.add(field);
+         } else {
+           newDirty.delete(field);
          }
-         set((state) => ({
+         set({
            formData: {
              ...state.formData,
              [field]: value,
            },
-         }));
+           dirtyFields: newDirty,
+           hasUnsavedChanges: newDirty.size > 0,
+         });
        },
 
        setFormData: (data: Record<string, unknown>) => {
@@ -267,9 +292,11 @@ setField: (field: string, value: unknown) => {
       setCompareDiffs: (diffs: VersionDiff[]) => set({ compareDiffs: diffs }),
       setLoadingDiffs: (loading: boolean) => set({ loadingDiffs: loading }),
       setIsAutoSaving: (saving: boolean) => set({ isAutoSaving: saving }),
-      setAutoSaveStatus: (status) => set({ autoSaveStatus: status }),
+      setAutoSaveStatus: (status: AutoSaveStatus) => set({ autoSaveStatus: status }),
       setSidebarCollapsed: (collapsed: boolean) =>
         set({ sidebarCollapsed: collapsed }),
+      setLastSavedAt: (time: number | null) => set({ lastSavedAt: time }),
+      setRetryCount: (count: number) => set({ retryCount: count }),
 
       // Auto-save actions
       setAutoSaveSkip: (skip: boolean) => set({ autoSaveSkip: skip }),
@@ -295,7 +322,12 @@ setField: (field: string, value: unknown) => {
       // Data management
       markSaved: () => {
         const { formData } = get();
-        set({ lastSavedData: formData, hasUnsavedChanges: false });
+        set({
+          lastSavedData: formData,
+          hasUnsavedChanges: false,
+          dirtyFields: new Set<string>(),
+          lastSavedAt: Date.now(),
+        });
       },
 
       setLastSavedData: (data: Record<string, unknown>) => {
@@ -307,6 +339,7 @@ setField: (field: string, value: unknown) => {
           formData: {},
           lastSavedData: {},
           hasUnsavedChanges: false,
+          dirtyFields: new Set<string>(),
           activeTab: 0,
         });
       },
@@ -319,30 +352,10 @@ setField: (field: string, value: unknown) => {
           formData: data,
           lastSavedData: lastSaved || data,
           hasUnsavedChanges: false,
+          dirtyFields: new Set<string>(),
         });
       },
 
-      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];
@@ -361,8 +374,37 @@ setField: (field: string, value: unknown) => {
       },
 
       getHasChanges: () => {
-        const { formData, lastSavedData } = get();
-        return JSON.stringify(formData) !== JSON.stringify(lastSavedData);
+        return get().dirtyFields.size > 0;
+      },
+
+      hasDirtyFields: () => {
+        return get().dirtyFields.size > 0;
+      },
+
+      getDirtyData: () => {
+        const { formData, dirtyFields } = get();
+        const delta: Record<string, unknown> = {};
+        for (const field of dirtyFields) {
+          delta[field] = formData[field];
+        }
+        return delta;
+      },
+
+      clearDirtyFields: () => {
+        set({ dirtyFields: new Set<string>(), hasUnsavedChanges: false });
+      },
+
+      pruneExpiredDrafts: () => {
+        const DRAFT_TTL_MS = 7 * 24 * 60 * 60 * 1000; // 7 days
+        const now = Date.now();
+        const { draftCache } = get();
+        const pruned: Record<string, BrowserDraftCacheEntry> = {};
+        for (const [key, entry] of Object.entries(draftCache)) {
+          if (now - new Date(entry.draftUpdatedAt).getTime() < DRAFT_TTL_MS) {
+            pruned[key] = entry;
+          }
+        }
+        set({ draftCache: pruned });
       },
 
       setDraftCache: (documentKey, draft) =>
@@ -389,6 +431,12 @@ setField: (field: string, value: unknown) => {
         sidebarCollapsed: state.sidebarCollapsed,
         draftCache: state.draftCache,
       }),
+      onRehydrateStorage: () => (state) => {
+        // Prune expired drafts on hydration
+        if (state) {
+          state.pruneExpiredDrafts();
+        }
+      },
     },
   ),
 );
@@ -418,18 +466,3 @@ export function useAutoFormField(
   };
 }
 
-// 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/change-source.ts

@@ -0,0 +1,9 @@
+let _lastChangeSource: "keystroke" | "other" = "other";
+
+export function getLastChangeSource(): "keystroke" | "other" {
+  return _lastChangeSource;
+}
+
+export function setChangeSource(source: "keystroke" | "other"): void {
+  _lastChangeSource = source;
+}

package/src/lib/config.ts

@@ -1,4 +1,4 @@
-import type { CollectionConfig, GlobalConfig } from "@kyro-cms/core/client";
+import type { AdminConfig, CollectionConfig, GlobalConfig } from "@kyro-cms/core/client";
 import {
   blogCollections,
   ecommerceCollections,
@@ -10,6 +10,10 @@ import {
   allSettingsGlobals,
   coreSettingsGlobals,
 } from "@kyro-cms/core/templates";
+import fs from "fs";
+
+// Injected by Vite's define config — exact path to the serialized config JSON.
+declare const __KYRO_ADMIN_CONFIG_FILE__: string;
 
 type ConfigCollectionInput =
   | CollectionConfig[]
@@ -62,6 +66,83 @@ function addMissingCollections(
   }
 }
 
+const defaultCollectionIcons: Record<string, string> = {
+  pages: "FileText",
+  posts: "Newspaper",
+  categories: "Tags",
+  menu: "Menu",
+  products: "ShoppingBag",
+  customers: "Users",
+  orders: "ShoppingCart",
+  coupons: "Ticket",
+  forms: "FileInput",
+  "form-entries": "Inbox",
+};
+
+/**
+ * Recursively find and update a field by its dot-notation path.
+ * Example: "menu.menu_item.internal_target" navigates through nested field structures.
+ */
+function updateFieldByPath(
+  fields: any[],
+  path: string,
+  updates: Record<string, any>,
+): boolean {
+  const parts = path.split(".");
+  if (parts.length === 0) return false;
+
+  const currentPart = parts[0];
+  const remainingPath = parts.slice(1).join(".");
+
+  for (const field of fields) {
+    if (field.name === currentPart) {
+      if (remainingPath) {
+        // Continue traversing nested fields
+        if (field.fields && Array.isArray(field.fields)) {
+          return updateFieldByPath(field.fields, remainingPath, updates);
+        }
+        // For array fields, look in the nested fields
+        if (field.type === "array" && field.fields && Array.isArray(field.fields)) {
+          return updateFieldByPath(field.fields, remainingPath, updates);
+        }
+        return false;
+      } else {
+        // Found the target field, apply updates
+        Object.assign(field, updates);
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+function applyCollectionAdminOverrides(
+  collections: Record<string, CollectionConfig>,
+  overrides?: Record<
+    string,
+    Partial<AdminConfig> & { fields?: Record<string, any> }
+  >,
+): void {
+  for (const [slug, col] of Object.entries(collections)) {
+    const defaultIcon = defaultCollectionIcons[slug];
+    const override = overrides?.[slug];
+    if (defaultIcon && !col.admin?.icon) {
+      col.admin = { ...col.admin, icon: defaultIcon };
+    }
+    if (override) {
+      const { fields: fieldOverrides, ...adminOverrides } = override;
+      col.admin = { ...col.admin, ...adminOverrides };
+
+      // Apply field-level overrides
+      if (fieldOverrides && col.fields && Array.isArray(col.fields)) {
+        for (const [fieldPath, fieldUpdates] of Object.entries(fieldOverrides)) {
+          updateFieldByPath(col.fields, fieldPath, fieldUpdates);
+        }
+      }
+    }
+  }
+}
+
 export function getAdminConfig(template: AdminTemplate = "blog") {
   const collections: CollectionConfig[] = [];
   const globals: GlobalConfig[] = [];
@@ -126,17 +207,32 @@ function createProjectAdminConfig(config: {
   };
 }
 
-// Default to kitchen-sink during module evaluation (config loading phase).
-// The real config is set later by the admin integration via globalThis.
-const global = globalThis as any;
-const projectConfig: { collections?: ConfigCollectionInput; globals?: ConfigGlobalInput } =
-  global.__KYRO_ADMIN_PROJECT_CONFIG__ || {};
+// Read config from the JSON file whose path is injected by Vite's define.
+let cachedConfig: { collections: any[]; globals: any[]; collectionOverrides?: Record<string, any> } | null = null;
+
+function loadProjectConfig() {
+  if (cachedConfig) return cachedConfig;
+  try {
+    if (typeof __KYRO_ADMIN_CONFIG_FILE__ === "string" && fs.existsSync(__KYRO_ADMIN_CONFIG_FILE__)) {
+      cachedConfig = JSON.parse(fs.readFileSync(__KYRO_ADMIN_CONFIG_FILE__, "utf8"));
+      return cachedConfig;
+    }
+  } catch {
+    // fall through to kitchen-sink default
+  }
+  return null;
+}
+
+const projectCfg = loadProjectConfig() || { collections: [], globals: [] };
+
+const rawConfig = createProjectAdminConfig(projectCfg);
+applyCollectionAdminOverrides(rawConfig.collections, projectCfg.collectionOverrides);
 
-export const adminConfig = createProjectAdminConfig(projectConfig);
+export const adminConfig = rawConfig;
 export const collections = adminConfig.collections;
 export const globals = adminConfig.globals;
 
 export const authCollectionSlugs = ["users", "audit_logs"];
 export const nonAuthCollections = Object.values(collections).filter(
-  (c) => !authCollectionSlugs.includes(c.slug),
+  (c) => !authCollectionSlugs.includes(c.slug) && c.admin?.hidden !== true,
 );

package/src/lib/globals.ts

@@ -12,7 +12,38 @@ export interface GlobalOptions {
  * falling back to the direct adapter approach.
  */
 export async function getGlobal(slug: string, options?: GlobalOptions) {
-  // Strategy 1: Use the API endpoint (works for all dialects, adapter agnostic)
+  // Strategy 1: Direct adapter access via shared kyro instance (SSR context)
+  // This avoids HTTP round-trips and auth cookie forwarding issues
+  const kyroInstance = (globalThis as any).__KYRO_INSTANCE__;
+  if (kyroInstance?.db) {
+    try {
+      const db = kyroInstance.db as BaseAdapter;
+      const doc = await db.findOne({
+        collection: `_globals_${slug}`,
+        where: {},
+        draft: options?.draft ?? false,
+      });
+      if (!doc) return null;
+
+      const mediaFields = ["siteLogo", "siteFavicon", "siteOgImage"];
+      for (const field of mediaFields) {
+        const val = doc[field];
+        const id = typeof val === "string" ? val : (val && typeof val === "object" && typeof val.id === "string" ? val.id : null);
+        if (id) {
+          try {
+            const mediaDoc = await db.findByID({
+              collection: "media",
+              id,
+            });
+            if (mediaDoc) doc[field] = mediaDoc;
+          } catch { /* media field stays as-is */ }
+        }
+      }
+      return doc;
+    } catch { /* fall through to API strategy */ }
+  }
+
+  // Strategy 2: Use the API endpoint (works for all dialects, adapter agnostic)
   if (options?.request) {
     try {
       const apiPath = (globalThis as any).__KYRO_API_PATH__ || "/api";
@@ -27,23 +58,25 @@ export async function getGlobal(slug: string, options?: GlobalOptions) {
         // Resolve media fields via the same API endpoint
         const mediaFields = ["siteLogo", "siteFavicon", "siteOgImage"];
         for (const field of mediaFields) {
-          if (typeof doc[field] === "string" && doc[field].length > 0) {
+          const val = doc[field];
+          const id = typeof val === "string" ? val : (val && typeof val === "object" && typeof val.id === "string" ? val.id : null);
+          if (id) {
             try {
-              const mediaRes = await fetch(`${apiPath}/media/${doc[field]}`, {
+              const mediaRes = await fetch(`${apiPath}/media/${id}`, {
                 headers: { Cookie: cookie },
               });
               if (mediaRes.ok) {
                 doc[field] = await mediaRes.json();
               }
-            } catch { /* media field stays as ID string */ }
+            } catch { /* media field stays as-is */ }
           }
         }
         return doc;
       }
-    } catch { /* fall through to adapter */ }
+    } catch { /* fall through to legacy adapter */ }
   }
 
-  // Strategy 2: Direct adapter access (fallback for non-request contexts)
+  // Strategy 3: Legacy direct adapter access (fallback for non-request contexts)
   const global = globalThis as any;
   const projectConfig = global.__KYRO_ADMIN_PROJECT_CONFIG__;
   if (!projectConfig) return null;
@@ -66,14 +99,16 @@ export async function getGlobal(slug: string, options?: GlobalOptions) {
 
     const mediaFields = ["siteLogo", "siteFavicon", "siteOgImage"];
     for (const field of mediaFields) {
-      if (typeof doc[field] === "string" && doc[field].length > 0) {
+      const val = doc[field];
+      const id = typeof val === "string" ? val : (val && typeof val === "object" && typeof val.id === "string" ? val.id : null);
+      if (id) {
         try {
           const mediaDoc = await db.findByID({
             collection: "media",
-            id: doc[field],
+            id,
           });
           if (mediaDoc) doc[field] = mediaDoc;
-        } catch { /* media field stays as ID string */ }
+        } catch { /* media field stays as-is */ }
       }
     }
     return doc;

package/src/lib/normalize-upload-fields.ts

@@ -0,0 +1,41 @@
+/**
+ * Recursively walks the given value and converts full media upload objects
+ * back to their ID strings before sending to the server.
+ *
+ * The UploadField stores full media objects { id, url, filename, mimeType }
+ * in formData for display purposes, but the server expects just the ID string.
+ * Without normalization, the server stores the full object as a JSON string,
+ * which causes 404s on the next load when trying to fetch the media.
+ */
+export function normalizeUploadFields(value: unknown): unknown {
+  if (value === null || value === undefined || typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+    return value;
+  }
+
+  if (Array.isArray(value)) {
+    return value.map(normalizeUploadFields);
+  }
+
+  if (typeof value === "object") {
+    const obj = value as Record<string, unknown>;
+
+    // Heuristic: detect a full media object by checking for id + url/filename/mimeType
+    // and a small number of keys (media objects typically have ~6-8 keys).
+    // Also handle bare {id} objects that result from JSONB column conversion.
+    const keys = Object.keys(obj);
+    const hasId = "id" in obj && (typeof obj.id === "string" || obj.id === null);
+    const hasMediaField = "url" in obj || "filename" in obj || "mimeType" in obj;
+    if (hasId && (hasMediaField || keys.length <= 2) && keys.length <= 8) {
+      return obj.id;
+    }
+
+    // Recursively normalize nested objects (tabs, groups, blocks, arrays)
+    const result: Record<string, unknown> = {};
+    for (const key of keys) {
+      result[key] = normalizeUploadFields(obj[key]);
+    }
+    return result;
+  }
+
+  return value;
+}

package/src/lib/paths.ts

@@ -39,8 +39,8 @@ export function resolveAdmin(url: string): string {
 }
 
 
-export function resolveMedia(url: string): string {
-  if (!url) return "";
+export function resolveMedia(url: unknown): string {
+  if (!url || typeof url !== "string") return "";
   // Absolute URLs, blob URLs, and data URLs are returned as-is
   if (url.startsWith("http") || url.startsWith("blob:") || url.startsWith("data:")) {
     return url;

package/src/lib/resolve-field-value.ts

@@ -0,0 +1,110 @@
+/**
+ * Recursively resolves a field value from formData regardless of
+ * whether it lives at root level, inside a tab container, group,
+ * or collapsible.
+ *
+ * Mirrors the `useAsTitle` pattern — finds where a field actually
+ * lives in the config, then reads from the correct location in formData.
+ *
+ * @param fields  - The top-level field definitions from the collection/global config
+ * @param formData - The current form data object
+ * @param fieldName - The name of the field to resolve
+ * @returns The field value, or undefined if not found
+ */
+export function resolveFieldValue(
+  fields: Record<string, unknown>[],
+  formData: Record<string, unknown>,
+  fieldName: string,
+): unknown {
+  // 1. Check root level first
+  if (fieldName in formData) {
+    return formData[fieldName];
+  }
+
+  // 2. Search inside containers (tabs, groups, collapsibles)
+  return searchContainers(fields, formData, fieldName);
+}
+
+function searchContainers(
+  fields: Record<string, unknown>[],
+  formData: Record<string, unknown>,
+  fieldName: string,
+): unknown {
+  for (const field of fields) {
+    if (!field.name) continue;
+
+    // Tabs container
+    if (field.type === "tabs" && "tabs" in field) {
+      const containerData = formData[field.name as string];
+      if (containerData && typeof containerData === "object") {
+        // Check if the field is directly inside the tab data
+        if (fieldName in (containerData as Record<string, unknown>)) {
+          return (containerData as Record<string, unknown>)[fieldName];
+        }
+        // Recursively search nested tabs/groups inside this tab container
+        const nested = searchContainers(
+          (field as any).tabs?.flatMap((t: any) => t.fields || []) || [],
+          containerData as Record<string, unknown>,
+          fieldName,
+        );
+        if (nested !== undefined) return nested;
+      }
+    }
+
+    // Group or collapsible container
+    if ((field.type === "group" || field.type === "collapsible") && "fields" in field) {
+      const containerData = formData[field.name as string];
+      if (containerData && typeof containerData === "object") {
+        // Check if the field is directly inside the group data
+        if (fieldName in (containerData as Record<string, unknown>)) {
+          return (containerData as Record<string, unknown>)[fieldName];
+        }
+        // Recursively search nested fields inside this group
+        const nested = searchContainers(
+          (field as any).fields || [],
+          containerData as Record<string, unknown>,
+          fieldName,
+        );
+        if (nested !== undefined) return nested;
+      }
+    }
+  }
+
+  return undefined;
+}
+
+/**
+ * Finds the container path for a field (useful for debugging).
+ * Returns an array of container names leading to the field, or [] if at root.
+ */
+export function resolveFieldPath(
+  fields: Record<string, unknown>[],
+  fieldName: string,
+  prefix: string = "",
+): string[] {
+  for (const field of fields) {
+    if (!field.name) continue;
+
+    if (field.type === "tabs" && "tabs" in field) {
+      const tabs = (field as any).tabs || [];
+      for (const tab of tabs) {
+        if (tab.fields) {
+          const found = tab.fields.find((f: any) => f.name === fieldName);
+          if (found) return [field.name as string];
+          const nested = resolveFieldPath(tab.fields, fieldName, field.name as string);
+          if (nested.length > 0) return [field.name as string, ...nested];
+        }
+      }
+    }
+
+    if ((field.type === "group" || field.type === "collapsible") && "fields" in field) {
+      const groupFields = (field as any).fields || [];
+      const found = groupFields.find((f: any) => f.name === fieldName);
+      if (found) return [field.name as string];
+      const nested = resolveFieldPath(groupFields, fieldName, field.name as string);
+      if (nested.length > 0) return [field.name as string, ...nested];
+    }
+  }
+
+  return [];
+}