@kyro-cms/admin 0.12.7 → 0.12.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyro-cms/admin",
-  "version": "0.12.7",
+  "version": "0.12.8",
   "engines": {
     "node": ">=22"
   },
@@ -61,8 +61,8 @@
     "prepare": "npm run build"
   },
   "dependencies": {
-    "@astrojs/node": "^10.1.0",
-    "@astrojs/react": "^5.0.4",
+    "@astrojs/node": "^11.0.2",
+    "@astrojs/react": "^6.0.1",
     "@codemirror/autocomplete": "^6.20.3",
     "@codemirror/lang-cpp": "^6.0.3",
     "@codemirror/lang-css": "^6.3.1",
@@ -81,7 +81,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@graphiql/react": "^0.37.3",
-    "@kyro-cms/core": "workspace:*",
+    "@kyro-cms/core": "^0.12.7",
     "@tailwindcss/vite": "^4.0.0",
     "@tiptap/extension-color": "^3.23.6",
     "@tiptap/extension-highlight": "^3.23.6",
@@ -100,7 +100,7 @@
     "@uiw/codemirror-theme-dracula": "^4.25.9",
     "@uiw/codemirror-theme-github": "^4.25.9",
     "@uiw/react-codemirror": "^4.25.9",
-    "astro": "^6.3.1",
+    "astro": "^7.1.1",
     "astro-loading-indicator": "^0.8.0",
     "dotenv": "^17.4.2",
     "graphiql": "^5.2.2",
@@ -128,6 +128,7 @@
     "i18next-parser": "^9.4.0",
     "tsup": "^8.5.1",
     "typescript": "^5.7.3",
+    "vite": "^8.1.5",
     "vitest": "^4.1.4"
   },
   "peerDependencies": {

package/src/components/AuthBridge.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useAuthStore } from "../lib/stores";
+import { useAuthStore, type AuthUser, type Permissions } from "../lib/stores";
 
 /**
  * AuthBridge
@@ -24,7 +24,7 @@ export function AuthBridge() {
 
     function populate(detail: { user: unknown; permissions: unknown }) {
       if (detail?.user) {
-        setUser(detail.user, detail.permissions ?? null);
+        setUser(detail.user as AuthUser, (detail.permissions ?? null) as Permissions | null);
       } else {
         // Unauthenticated – set loading to false so components don't hang
         setLoading(false);

package/src/components/AutoForm.tsx

@@ -10,6 +10,8 @@ import type { DeclarativeCondition } from "../lib/core-types";
 type View = "edit" | "version" | "api";
 import { globals, collections } from "../lib/config";
 import { resolveUrl, apiGet, apiDelete, fetchWithAuth } from "../lib/api";
+import { EmptyState } from "./ui/EmptyState";
+import { navigate } from "astro:transitions/client";
 import { Shimmer } from "./ui/Shimmer";
 import { normalizeUploadFields } from "../lib/normalize-upload-fields";
 import { useAutoFormStore } from "../lib/autoform-store";
@@ -426,11 +428,11 @@ export function AutoForm({
         onConfirm: async () => {
           await handleSaveDraft();
           await new Promise((r) => setTimeout(r, 1000));
-          window.location.href = `${ADMIN_BASE}/${collectionSlug}/new`;
+          navigate(`${ADMIN_BASE}/${collectionSlug}/new`);
         },
       });
     } else {
-      window.location.href = `${ADMIN_BASE}/${collectionSlug}/new`;
+      navigate(`${ADMIN_BASE}/${collectionSlug}/new`);
     }
   };
 
@@ -451,9 +453,9 @@ export function AutoForm({
           const result = await response.json();
           onActionSuccess?.("Document duplicated successfully");
           if (result.data?.id) {
-            window.location.href = `${ADMIN_BASE}/${collectionSlug}/${result.data.id}`;
+            navigate(`${ADMIN_BASE}/${collectionSlug}/${result.data.id}`);
           } else {
-            window.location.href = `${ADMIN_BASE}/${collectionSlug}`;
+            navigate(`${ADMIN_BASE}/${collectionSlug}`);
           }
         } else {
           const err = await response.json();
@@ -496,7 +498,7 @@ export function AutoForm({
         autoSaveSkipRef.current = true;
         try {
           await apiDelete(`/api/${collectionSlug}/${formData.id}`);
-          window.location.href = `${ADMIN_BASE}/${collectionSlug}`;
+          navigate(`${ADMIN_BASE}/${collectionSlug}`);
         } catch (err) {
           toast.error((err as Error).message || "Failed to delete document");
         } finally {
@@ -543,7 +545,7 @@ export function AutoForm({
     setLocalSaveStatus("saving");
 
     try {
-      const data = normalizeUploadFields({ ...formData }) as Record<string, unknown>;
+      const data = normalizeUploadFields({ ...formData }, true) as Record<string, unknown>;
       const isPost = isNewDoc && !globalSlug;
 
       const response = isPost
@@ -574,7 +576,7 @@ export function AutoForm({
         }
         if (isPost) {
           setTimeout(() => {
-            window.location.href = `${ADMIN_BASE}/${collectionSlug}/${result.data.id}`;
+            navigate(`${ADMIN_BASE}/${collectionSlug}/${result.data.id}`);
           }, 800);
         }
       } else {
@@ -606,7 +608,7 @@ export function AutoForm({
 
       if (isNewDoc && !globalSlug) {
         // Create then immediately publish
-        const data = normalizeUploadFields({ ...formData }) as Record<string, unknown>;
+        const data = normalizeUploadFields({ ...formData }, true) as Record<string, unknown>;
         const response = await fetchWithAuth(`/api/${collectionSlug}`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
@@ -627,7 +629,7 @@ export function AutoForm({
       }
 
       // Save and publish (X-Draft: false writes to main doc + versions table)
-      const data = normalizeUploadFields(dataToPublish) as Record<string, unknown>;
+      const data = normalizeUploadFields(dataToPublish, true) as Record<string, unknown>;
       const response = await saveDocument(data, false);
 
       if (response?.ok) {
@@ -643,7 +645,7 @@ export function AutoForm({
 
         if (isNewDoc && !globalSlug && dataToPublish.id) {
           setTimeout(() => {
-            window.location.href = `${ADMIN_BASE}/${collectionSlug}/${dataToPublish.id}`;
+            navigate(`${ADMIN_BASE}/${collectionSlug}/${dataToPublish.id}`);
           }, 800);
         }
       } else {
@@ -653,7 +655,7 @@ export function AutoForm({
           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}`;
+            navigate(`${ADMIN_BASE}/${collectionSlug}/${dataToPublish.id}`);
           }, 1200);
           return;
         }
@@ -679,7 +681,7 @@ export function AutoForm({
 
     try {
       const data = {
-        ...normalizeUploadFields({ ...formData }) as Record<string, unknown>,
+        ...normalizeUploadFields({ ...formData }, true) as Record<string, unknown>,
         _schedulePublishAt: scheduledFor,
       };
 

package/src/components/BrandingHub.tsx

@@ -59,7 +59,7 @@ export function BrandingHub() {
         "--kyro-primary",
         primaryColor,
       );
-      setTimeout(() => window.location.reload(), 800);
+      setTimeout(() => window.dispatchEvent(new Event('kyro:soft-reload')), 800);
     } catch (e) {
       toast.error("Failed to save branding");
       console.error(e);

package/src/components/DetailView.tsx

@@ -14,6 +14,8 @@ import { useAutoFormStore } from "../lib/autoform-store";
 import { PageHeader } from "./ui/PageHeader";
 import { Badge } from "./ui/Badge";
 import { SplitButton } from "./ui/SplitButton";
+import { Lock, FileText, ChevronLeft, Save } from "lucide-react";
+import { navigate } from "astro:transitions/client";
 import { useTranslation } from "react-i18next";
 import "../lib/i18n";
 import { adminPath } from "../lib/paths";
@@ -231,9 +233,9 @@ export function DetailView({
       const response = await apiPost(`/api/${slug}/${documentId}/duplicate`, undefined, { autoToast: false }) as { data?: { id?: string } };
       toast.success(t("toast.duplicated", { defaultValue: "Document duplicated" }));
       if (response?.data?.id) {
-        window.location.href = `${adminPath}/${slug}/${response.data.id}`;
+        navigate(`${adminPath}/${slug}/${response.data.id}`);
       } else {
-        window.location.href = `${adminPath}/${slug}`;
+        navigate(`${adminPath}/${slug}`);
       }
     } catch (e) {
       toast.error((e as Error).message || t("toast.duplicateError", { defaultValue: "Failed to duplicate document" }));
@@ -290,7 +292,7 @@ export function DetailView({
         try {
           setIsDeleting(true);
           await apiDelete(`/api/${slug}/${documentId}`);
-          window.location.href = `${adminPath}/${slug}`;
+          navigate(`${adminPath}/${slug}`);
         } catch (e) {
           setIsDeleting(false);
         }

package/src/components/ListView.tsx

@@ -1,6 +1,7 @@
 import { Search, Filter, Columns3, X, Trash2, Archive, ChevronUp, Edit2 } from "./ui/icons";
 import { useState, useEffect, useMemo, useCallback, useRef } from "react";
 import { Spinner } from "./ui/Spinner";
+import { navigate } from "astro:transitions/client";
 import { Shimmer } from "./ui/Shimmer";
 import { Plus } from "./ui/icons";
 import { apiGet, apiDelete, withCacheBust } from "../lib/api";
@@ -78,7 +79,7 @@ export function ListView({
       import("astro:transitions/client").then(({ navigate }) => {
         navigate(href);
       }).catch(() => {
-        window.location.href = href;
+        navigate(href);
       });
     }
   };
@@ -92,7 +93,7 @@ export function ListView({
       import("astro:transitions/client").then(({ navigate }) => {
         navigate(href);
       }).catch(() => {
-        window.location.href = href;
+        navigate(href);
       });
     }
   };
@@ -104,7 +105,16 @@ export function ListView({
   const [limit, setLimit] = useState(10);
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
   const [search, setSearch] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
   const [filters, setFilters] = useState<FilterConfig[]>([]);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearch(search);
+      setPage(1); // Reset to page 1 on new search
+    }, 300);
+    return () => clearTimeout(handler);
+  }, [search]);
   const { confirm, alert } = useUIStore();
 
   const addFilter = () => {
@@ -262,7 +272,7 @@ export function ListView({
         depth: "1",
       });
 
-      if (search) params.append("search", search);
+      if (debouncedSearch) params.append("search", debouncedSearch);
       if (sort) params.append("sort", sort.field);
       if (sort) params.append("order", sort.direction);
       if (filters.length > 0) {
@@ -280,7 +290,7 @@ export function ListView({
     } finally {
       setLoading(false);
     }
-  }, [collectionSlug, page, limit, search, sort, filters]);
+  }, [collectionSlug, page, limit, debouncedSearch, sort, filters]);
 
   // Initial fetch only if not provided with initialDocs or if empty
   useEffect(() => {
@@ -297,7 +307,7 @@ export function ListView({
       return;
     }
     fetchDocs();
-  }, [page, limit, search, sort, filters]);
+  }, [page, limit, debouncedSearch, sort, filters]);
 
   const handleSelectAll = () => {
     if (selectedIds.size === docs.length) {

package/src/components/MediaGallery.tsx

@@ -1256,7 +1256,7 @@ export function MediaGallery({
                   }).then(() => {
                     setShowStorageConfigModal(false);
                     setStorageConfigured(true);
-                    window.location.reload();
+                    window.dispatchEvent(new Event('kyro:soft-reload'));
                   }).catch(() => {
                     toast.error("Failed to configure storage");
                   });

package/src/components/PluginsManager.tsx

@@ -16,6 +16,7 @@ import { Modal, ModalContent, ModalActions } from "./ui/Modal";
 import { PageHeader } from "./ui/PageHeader";
 import { Badge } from "./ui/Badge";
 import { useTranslation } from "react-i18next";
+import { navigate } from "astro:transitions/client";
 
 
 interface Plugin {
@@ -97,7 +98,7 @@ export function PluginsManager() {
         actions={[
           {
             label: "Marketplace",
-            onClick: () => (window.location.href = "/admin/marketplace"),
+            onClick: () => (navigate("/admin/marketplace")),
             icon: Plus,
           },
         ]}

package/src/components/UserMenu.tsx

@@ -4,6 +4,7 @@ import { User, Shield, Key, Webhook, Clock, FileText, ExternalLink, HelpCircle,
 import { useAuthStore } from "../lib/stores";
 import { apiGet } from "../lib/api";
 import { useTranslation } from "react-i18next";
+import { navigate } from 'astro:transitions/client';
 
 interface UserMenuProps {
   adminPath: string;
@@ -64,9 +65,9 @@ export function UserMenu({ adminPath }: UserMenuProps) {
         onClick={() => {
           const id = currentUser?.id;
           if (id) {
-            window.location.href = `${adminPath}/users/${id}`;
+            navigate(`${adminPath}/users/${id}`);
           } else {
-            window.location.href = `${adminPath}/users`;
+            navigate(`${adminPath}/users`);
           }
         }}
       >
@@ -75,7 +76,7 @@ export function UserMenu({ adminPath }: UserMenuProps) {
 
       <DropdownItem
         icon={<Shield className="w-4 h-4" />}
-        onClick={() => window.location.href = `${adminPath}/roles`}
+        onClick={() => navigate(`${adminPath}/roles`)}
       >
         {t("userMenu.permissions", { defaultValue: "Permissions" })}
       </DropdownItem>
@@ -90,33 +91,33 @@ export function UserMenu({ adminPath }: UserMenuProps) {
 
       <DropdownItem
         icon={<Key className="w-4 h-4" />}
-        onClick={() => (window.location.href = `${adminPath}/keys`)}
+        onClick={() => (navigate(`${adminPath}/keys`))}
       >
         {t("userMenu.apiKeys", { defaultValue: "API Keys" })}
       </DropdownItem>
 
       <DropdownItem
         icon={<Webhook className="w-4 h-4" />}
-        onClick={() => (window.location.href = `${adminPath}/webhooks`)}
+        onClick={() => (navigate(`${adminPath}/webhooks`))}
       >
         {t("userMenu.webHooks", { defaultValue: "Web Hooks" })}
       </DropdownItem>
       <DropdownItem
         icon={<Clock className="w-4 h-4" />}
-        onClick={() => (window.location.href = `${adminPath}/sessions`)}
+        onClick={() => (navigate(`${adminPath}/sessions`))}
       >
         {t("userMenu.sessions", { defaultValue: "Sessions" })}
       </DropdownItem>
       <DropdownItem
         icon={<FileText className="w-4 h-4" />}
-        onClick={() => (window.location.href = `${adminPath}/audit`)}
+        onClick={() => (navigate(`${adminPath}/audit`))}
       >
         {t("userMenu.auditLogs", { defaultValue: "Audit Logs" })}
       </DropdownItem>
 
       <DropdownItem
         icon={<Terminal className="w-4 h-4" />}
-        onClick={() => (window.location.href = `${adminPath}/rest-playground`)}
+        onClick={() => (navigate(`${adminPath}/rest-playground`))}
       >
         {t("userMenu.apiExplorer", { defaultValue: "API Explorer" })}
       </DropdownItem>
@@ -124,7 +125,7 @@ export function UserMenu({ adminPath }: UserMenuProps) {
       {(apiAccess === null || apiAccess?.graphqlEnabled) && (
         <DropdownItem
           icon={<Zap className="w-4 h-4" />}
-          onClick={() => (window.location.href = `${adminPath}/graphql`)}
+          onClick={() => (navigate(`${adminPath}/graphql`))}
         >
           {t("userMenu.graphqlPlayground", { defaultValue: "GraphQL Playground" })}
         </DropdownItem>

package/src/components/autoform/AutoFormApiView.tsx

@@ -44,7 +44,7 @@ export function AutoFormApiView({
                 </div>
               </div>
 
-              {formData.id && (
+              {Boolean(formData.id) && (
                 <div>
                   <label className="text-[10px] font-bold tracking-[0.1em] text-[var(--kyro-text-secondary)] opacity-50 block mb-2">
                     Document ID

package/src/components/autoform/AutoFormHeader.tsx

@@ -179,7 +179,7 @@ export function AutoFormHeader({
             <span className="opacity-30">|</span>
             <button
               type="button"
-              onClick={() => window.location.reload()}
+              onClick={() => window.dispatchEvent(new Event('kyro:soft-reload'))}
               className="text-[var(--kyro-danger)] hover:underline"
             >
               Reload server version

package/src/components/autoform/ErrorBoundary.tsx

@@ -45,7 +45,7 @@ export class ErrorBoundary extends Component<Props, State> {
   };
 
   handleReload = () => {
-    window.location.reload();
+    window.dispatchEvent(new Event('kyro:soft-reload'));
   };
 
   render() {

package/src/components/fields/IconField.tsx

@@ -43,7 +43,7 @@ export default function IconField({
             type="text"
             value={normalizedValue}
             onChange={(e) => onChange?.(e.target.value)}
-            placeholder={field.admin?.placeholder || "e.g., activity"}
+            placeholder={(field.admin?.placeholder as string) || "e.g., activity"}
             disabled={disabled || isReadOnly}
             required={field.required}
             className={`kyro-form-input ${disabled || isReadOnly ? "opacity-70 bg-[var(--kyro-bg-secondary)] cursor-not-allowed" : ""}`}

package/src/components/ui/Button.tsx

@@ -1,8 +1,11 @@
 import type { ButtonHTMLAttributes, ReactNode } from 'react';
 
+export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
-  size?: 'sm' | 'md' | 'lg';
+  variant?: ButtonVariant;
+  size?: ButtonSize;
   loading?: boolean;
   children: ReactNode;
 }

package/src/components/users/UserDetail.tsx

@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { apiGet } from "../../lib/api";
 import { useUIStore, toast } from "../../lib/stores";
-import { X } from "../ui/icons";
 import { UploadField } from "../fields/UploadField";
 import { useTranslation } from "react-i18next";
+import { navigate } from 'astro:transitions/client';
 
 interface User {
   id: string;
@@ -43,8 +43,8 @@ export function UserDetail({ user, apiPath, adminPath }: UserDetailProps) {
   const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
   const [avatarMedia, setAvatarMedia] = useState<any>(user.avatar ? { id: user.avatar } : null);
   const [saving, setSaving] = useState(false);
-  const { confirm, alert } = useUIStore();
-  const [deleting, setDeleting] = useState(false);
+  const { confirm } = useUIStore();
+  const [, setDeleting] = useState(false);
   const [locking, setLocking] = useState(false);
   const [isLocked, setIsLocked] = useState(user.locked || false);
 
@@ -90,7 +90,7 @@ export function UserDetail({ user, apiPath, adminPath }: UserDetailProps) {
       }
 
       if (Object.keys(body).length === 0) {
-        window.location.href = adminPath + "/users";
+        navigate(adminPath + "/users");
         return;
       }
 
@@ -105,7 +105,7 @@ export function UserDetail({ user, apiPath, adminPath }: UserDetailProps) {
 
       if (res.ok) {
         toast.success("User updated");
-        window.location.href = adminPath + "/users";
+        navigate(adminPath + "/users");
       } else {
         toast.error(data.error || "Failed to save user");
       }
@@ -162,7 +162,7 @@ export function UserDetail({ user, apiPath, adminPath }: UserDetailProps) {
           });
           if (res.ok) {
             toast.success("User deleted");
-            window.location.href = adminPath + "/users";
+            navigate(adminPath + "/users");
           } else {
             toast.error("Failed to delete user");
           }

package/src/components/users/UserForm.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { navigate } from 'astro:transitions/client';
 
 interface UserFormProps {
   mode: "create" | "edit";
@@ -38,7 +39,7 @@ export function UserForm({ mode, apiPath, adminPath, user }: UserFormProps) {
     type: "success" | "error";
   } | null>(null);
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setLoading(true);
     setMessage(null);
@@ -71,7 +72,7 @@ export function UserForm({ mode, apiPath, adminPath, user }: UserFormProps) {
           type: "success",
         });
         setTimeout(() => {
-          window.location.href = `${adminPath}/users`;
+          navigate(`${adminPath}/users`);
         }, 1000);
       } else {
         setMessage({

package/src/components/users/UsersList.tsx

@@ -1,6 +1,7 @@
 import { Plus, Lock, CheckCircle2, Edit2, Trash2, XCircle, X } from "../ui/icons";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useUIStore } from "../../lib/stores";
+import { navigate } from 'astro:transitions/client';
 
 interface User {
   id: string;
@@ -39,8 +40,8 @@ export function UsersList({
 }: UsersListProps) {
   const [users, setUsers] = useState<User[]>(initialUsers);
   const [totalUsers, setTotalUsers] = useState(initialTotal);
-  const { confirm, alert } = useUIStore();
-  const [deleting, setDeleting] = useState(false);
+  const { confirm } = useUIStore();
+  const [, setDeleting] = useState(false);
   const [errorMsg, setErrorMsg] = useState<string | null>(null);
 
   const handleDeleteClick = (user: User) => {
@@ -168,7 +169,7 @@ export function UsersList({
                   key={user.id}
                   className="group hover:bg-gray-50/50 transition-colors cursor-pointer"
                   onClick={() =>
-                    (window.location.href = `${adminPath}/users/${user.id}`)
+                    navigate(`${adminPath}/users/${user.id}`)
                   }
                 >
                   <td className="px-8 py-5">

package/src/env.d.ts

@@ -2,6 +2,10 @@ declare const __KYRO_API_PATH__: string;
 declare const __KYRO_ADMIN_PATH__: string;
 declare const __KYRO_ADMIN_AUTH_DISABLED__: boolean;
 
+declare module 'astro:transitions/client' {
+  export function navigate(href: string, options?: any): void;
+}
+
 declare namespace App {
   interface Locals {
     user?: {

package/src/hooks/useQueue.ts

@@ -14,7 +14,6 @@ type QueueTask = (fn: QueuedFunction, options?: QueueTaskOptions) => void;
  * Only the last task in the queue is ever processed; all prior pending tasks are discarded.
  * This prevents race conditions where multiple autosave fetches could run in parallel.
  *
- * Inspired by Payload's useQueues hook.
  *
  * @returns {queueTask} A function used to queue a task for execution.
  */
@@ -40,7 +39,9 @@ export function useQueue(): { queueTask: QueueTask } {
         isProcessing.current = true;
 
         try {
-          await latestTask();
+          if (latestTask) {
+            await latestTask();
+          }
         } catch (err) {
           console.error("Error in queued function:", err);
         } finally {

package/src/kyro-cms.d.ts

@@ -62,6 +62,8 @@ admin?: {
   export interface JSONField extends FieldConfig { type: 'json' }
   export interface ImageField extends FieldConfig { type: 'image' }
   export interface UploadField extends FieldConfig { type: 'upload' }
+  export interface IconField extends FieldConfig { type: 'icon' }
+  export interface SecretField extends FieldConfig { type: 'secret' }
   export interface RelationshipField extends FieldConfig { type: 'relationship'; relationTo: string }
   export interface BlocksField extends FieldConfig { type: 'blocks'; blocks: Block[] }
   export interface ArrayField extends FieldConfig { type: 'array'; fields: FieldConfig[] }
@@ -181,6 +183,9 @@ admin?: {
     newValue?: unknown;
     [key: string]: unknown;
   }
+
+  export const richTextStyles: string;
+  export function renderRichText(content: unknown, options?: unknown): string;
 }
 
 declare module '@kyro-cms/core/client' {

package/src/lib/autoform-store.ts

@@ -3,7 +3,7 @@ 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";
+import type { Version, VersionDiff } from "@kyro-cms/core/client";
 import { deepEqual, isEmpty } from "./deep-equal";
 import { normalizeUploadFields } from "./normalize-upload-fields";
 
@@ -247,8 +247,9 @@ export const useAutoFormStore = create<AutoFormStore>()(
             if (current[keys[i]] === undefined) {
               current[keys[i]] = {};
             }
-            current[keys[i]] = { ...current[keys[i]] };
-            current = current[keys[i]];
+            const nextVal = current[keys[i]] as Record<string, unknown>;
+            current[keys[i]] = { ...nextVal };
+            current = current[keys[i]] as Record<string, unknown>;
           }
 
           current[keys[keys.length - 1]] = value;

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

@@ -7,13 +7,13 @@
  * 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 {
+export function normalizeUploadFields(value: unknown, isRoot = false): 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);
+    return value.map(v => normalizeUploadFields(v, false));
   }
 
   if (typeof value === "object") {
@@ -25,14 +25,27 @@ export function normalizeUploadFields(value: unknown): unknown {
     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 <= 25) {
+    if (!isRoot && hasId && hasMediaField && keys.length <= 25) {
+      return obj.id;
+    }
+
+    // Heuristic for polymorphic relationships: { relationTo: '...', value: { id: '...' } }
+    if (!isRoot && "relationTo" in obj && "value" in obj && typeof obj.value === "object" && obj.value !== null) {
+      const valObj = obj.value as Record<string, unknown>;
+      if ("id" in valObj && (typeof valObj.id === "string" || typeof valObj.id === "number")) {
+        return { relationTo: obj.relationTo, value: valObj.id };
+      }
+    }
+
+    // Heuristic for regular populated relationships: must have id, createdAt, updatedAt
+    if (!isRoot && hasId && "createdAt" in obj && "updatedAt" in obj) {
       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]);
+      result[key] = normalizeUploadFields(obj[key], false);
     }
     return result;
   }