@kyro-cms/admin 0.12.17 → 0.12.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyro-cms/admin",
-  "version": "0.12.17",
+  "version": "0.12.18",
   "engines": {
     "node": ">=22"
   },
@@ -73,6 +73,8 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@graphiql/react": "^0.37.3",
+    "@kyro-cms/astro": "0.12.18",
+    "@kyro-cms/core": "0.12.18",
     "@tailwindcss/vite": "^4.0.0",
     "@tiptap/extension-color": "^3.23.6",
     "@tiptap/extension-highlight": "^3.23.6",
@@ -109,8 +111,7 @@
     "tailwindcss": "^4.0.0",
     "unstorage": "^1.17.5",
     "use-sync-external-store": "1.5.0",
-    "zustand": "^5.0.3",
-    "@kyro-cms/core": "0.12.17"
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.9",
@@ -124,9 +125,9 @@
     "vitest": "^4.1.4"
   },
   "peerDependencies": {
+    "@kyro-cms/core": "0.12.18",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@kyro-cms/core": "0.12.17"
+    "react-dom": "^19.0.0"
   },
   "repository": {
     "type": "git",

package/src/components/AutoForm.tsx

@@ -864,11 +864,13 @@ export function AutoForm({
       case "tabs":
         return (
           <TabsLayout
-            key={field.name || `tabs-${Math.random()}`}
+            key={field.name || `tabs-layout`}
             field={field}
             formData={formData}
             onTabDataChange={(tabData) => {
-              setField(field.name!, tabData);
+              if (field.name) {
+                setField(field.name, tabData);
+              }
             }}
             renderField={(f, parentData, onChange) => renderField(f, parentData, onChange)}
           />

package/src/components/DashboardMetrics.tsx

@@ -431,32 +431,34 @@ export const DashboardMetrics: React.FC<DashboardMetricsProps> = ({ isEcommerce
 
   const currency = analyticsData?.currencyCode || "USD";
 
+  const productCount =
+    (data?.collectionCounts?.["products"] || 0) +
+    (data?.collectionCounts?.["food-menu"] || 0) +
+    (data?.collectionCounts?.["menu"] || 0);
+
   const ecommerceCards = [
     {
       icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>,
       gradient: "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)",
-      value: analyticsData?.totalRevenue
+      value: analyticsData?.totalRevenue !== undefined
         ? new Intl.NumberFormat("en-US", { style: "currency", currency }).format(analyticsData.totalRevenue)
         : "$0",
       label: "Total Revenue",
-      subtext: "From paid orders",
-      trend: { value: "+12.4%", up: true },
+      subtext: "From system orders",
     },
     {
       icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" /></svg>,
       gradient: "linear-gradient(135deg, #ec4899 0%, #f43f5e 100%)",
-      value: data?.collectionCounts?.["products"] || 0,
-      label: "Products",
-      subtext: "Active inventory items",
-      trend: { value: "+3 new", up: true },
+      value: productCount,
+      label: "Products / Menu Items",
+      subtext: "Active inventory & menu items",
     },
     {
       icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" /></svg>,
       gradient: "linear-gradient(135deg, #10b981 0%, #06b6d4 100%)",
-      value: data?.collectionCounts?.["orders"] || 0,
+      value: analyticsData?.totalOrders !== undefined ? analyticsData.totalOrders : (data?.collectionCounts?.["orders"] || 0),
       label: "Orders",
       subtext: "Total orders placed",
-      trend: { value: "+8 today", up: true },
     },
     {
       icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>,
@@ -464,7 +466,6 @@ export const DashboardMetrics: React.FC<DashboardMetricsProps> = ({ isEcommerce
       value: data?.collectionCounts?.["customers"] || 0,
       label: "Customers",
       subtext: "Registered shoppers",
-      trend: { value: "+5 this week", up: true },
     },
     {
       icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" /></svg>,
@@ -475,7 +476,26 @@ export const DashboardMetrics: React.FC<DashboardMetricsProps> = ({ isEcommerce
     },
   ];
 
-  const cmsCards = [
+  // Dynamically extract top active custom collections if present
+  const activeCustomCollections = data?.collectionCounts
+    ? Object.entries(data.collectionCounts)
+        .filter(([slug, count]) => count > 0 && !["users", "audit_logs", "media"].includes(slug))
+        .sort((a, b) => b[1] - a[1])
+        .slice(0, 3)
+    : [];
+
+  const dynamicCollectionCards = activeCustomCollections.map(([slug, count]) => {
+    const formattedLabel = slug.split("-").map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+    return {
+      icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>,
+      gradient: "linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%)",
+      value: count,
+      label: formattedLabel,
+      subtext: "Active entries",
+    };
+  });
+
+  const baseCmsCards = [
     {
       icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>,
       gradient: "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)",
@@ -490,6 +510,9 @@ export const DashboardMetrics: React.FC<DashboardMetricsProps> = ({ isEcommerce
       label: "Media Files",
       subtext: "Images, videos & docs",
     },
+  ];
+
+  const trailingCmsCards = [
     {
       icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" /></svg>,
       gradient: "linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%)",
@@ -497,22 +520,14 @@ export const DashboardMetrics: React.FC<DashboardMetricsProps> = ({ isEcommerce
       label: "Team Members",
       subtext: "Active user accounts",
     },
-    {
-      icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>,
-      gradient: "linear-gradient(135deg, #10b981 0%, #06b6d4 100%)",
-      value: data?.totalWebhooks || 0,
-      label: "Webhooks",
-      subtext: "Active integrations",
-    },
-    {
-      icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" /></svg>,
-      gradient: "linear-gradient(135deg, #f59e0b 0%, #f97316 100%)",
-      value: data?.totalApiKeys || 0,
-      label: "API Keys",
-      subtext: "Developer access tokens",
-    },
   ];
 
+  const cmsCards = [
+    ...baseCmsCards,
+    ...dynamicCollectionCards,
+    ...trailingCmsCards,
+  ].slice(0, 5);
+
   const cards = isEcommerce ? ecommerceCards : cmsCards;
 
   return (

package/src/components/fields/ArrayLayout.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import type { Field } from "@kyro-cms/core/client";
 import RelationshipField from "./RelationshipField";
 import { ChevronDown, ChevronUp, GripVertical } from "../ui/icons";
+import { apiGet } from "../../lib/api";
 import {
   DndContext,
   closestCenter,
@@ -20,6 +21,32 @@ import { useTranslation } from "react-i18next";
 
 const SIMPLE_TYPES = new Set(["text", "number", "checkbox", "select", "radio", "color", "email", "password"]);
 
+function extractLabelFromObj(obj: unknown): string | null {
+  if (!obj || typeof obj !== "object") return null;
+  const o = obj as Record<string, unknown>;
+  const tabs = o.tabs as Record<string, unknown> | undefined;
+  const label =
+    (o.title as string) ||
+    (tabs?.title as string) ||
+    (o.name as string) ||
+    (o.label as string) ||
+    (o.email as string) ||
+    (o.filename as string) ||
+    (o.slug as string);
+  if (label && typeof label === "string") return label;
+  if (o.value && typeof o.value === "object") return extractLabelFromObj(o.value);
+  if (o.doc && typeof o.doc === "object") return extractLabelFromObj(o.doc);
+  return null;
+}
+
+function getFallbackLabel(field: Field, index: number): string {
+  const rawLabel = field.label || field.name || "Item";
+  if (/item$/i.test(rawLabel.trim())) {
+    return `${rawLabel} ${index + 1}`;
+  }
+  return `${rawLabel} Item ${index + 1}`;
+}
+
 interface ArrayLayoutProps {
   field: Field;
   value: unknown[];
@@ -148,7 +175,7 @@ function SortableArrayItem({
         
         <div className="flex-1 min-w-0">
           <span className="text-xs font-medium text-[var(--kyro-text-primary)] truncate block">
-            {getItemLabel(item) || `${field.label || field.name} Item`}
+            {getItemLabel(item) || getFallbackLabel(field, index)}
           </span>
         </div>
 
@@ -197,11 +224,13 @@ export function ArrayLayout({
   disabled,
 }: ArrayLayoutProps) {
   const items = (Array.isArray(value) ? value : []) as Record<string, unknown>[];
-  const fields = (field as Field & { fields?: { name?: string; type?: string; relationTo?: string; label?: string }[] }).fields || [];
+  const fields = (field as Field & { fields?: { name?: string; type?: string; relationTo?: string | string[]; label?: string }[] }).fields || [];
   const firstField = fields[0];
   const labelField = firstField?.name || "user";
   const isRelationship = firstField?.type === "relationship";
   const [openIndex, setOpenIndex] = React.useState<number | null>(0);
+  const [relLabels, setRelLabels] = React.useState<Record<string, string>>({});
+  const fetchedRelIds = React.useRef<Set<string>>(new Set());
 
   // Sync stable IDs and heal bad data
   React.useEffect(() => {
@@ -229,27 +258,117 @@ export function ArrayLayout({
     }
   }, [value, onChange]);
 
+  React.useEffect(() => {
+    const fieldsTyped = (field as Field & { fields?: Field[] }).fields || [];
+    items.forEach((item) => {
+      if (!item || typeof item !== "object") return;
+      fieldsTyped.forEach((f) => {
+        if (f.type === "relationship" && f.name) {
+          const val = item[f.name];
+          if (!val) return;
+
+          let id = "";
+          let rel = Array.isArray(f.relationTo) ? f.relationTo[0] : f.relationTo;
+
+          if (typeof val === "string") {
+            id = val;
+          } else if (typeof val === "object" && val !== null) {
+            const vObj = val as Record<string, unknown>;
+            if (vObj.relationTo && typeof vObj.relationTo === "string") {
+              rel = vObj.relationTo;
+            }
+            if (vObj.id && typeof vObj.id === "string") {
+              id = vObj.id;
+            } else if (vObj.value && typeof vObj.value === "string") {
+              id = vObj.value;
+            }
+          }
+
+          if (id && rel && !fetchedRelIds.current.has(id)) {
+            fetchedRelIds.current.add(id);
+            apiGet<Record<string, unknown>>(`/api/${rel}/${id}`)
+              .then((res) => {
+                const doc = (res as any)?.data || res;
+                const label = extractLabelFromObj(doc);
+                if (label) {
+                  setRelLabels((prev) => ({ ...prev, [id]: label }));
+                }
+              })
+              .catch(() => {});
+          }
+        }
+      });
+    });
+  }, [items, field]);
+
   function getItemLabel(item: Record<string, unknown>): string {
-    for (const key of ["label", "title", "name"]) {
+    for (const key of ["label", "title", "name", "externalUrl", "url"]) {
       const val = item[key];
-      if (val && typeof val === "string") return val;
+      if (val && typeof val === "string" && val.trim() !== "") return val;
     }
-    const fieldsTyped = fields as Field[];
+
+    const fieldsTyped = (field as Field & { fields?: Field[] }).fields || [];
+    const DISCRIMINATOR_NAMES = new Set(["linkType", "type", "blockType", "kind", "mode"]);
+
     for (const f of fieldsTyped) {
+      if (!f.name) continue;
+      const val = item[f.name];
+      if (!val) continue;
+
       if (f.type === "text" || f.type === "textarea") {
-        const val = item[f.name!];
-        if (val && typeof val === "string") return val;
+        if (typeof val === "string" && val.trim() !== "") return val;
       }
+
+      if (f.type === "select" && !DISCRIMINATOR_NAMES.has(f.name)) {
+        if (typeof val === "string" && val.trim() !== "") return val;
+      }
+
+      if (f.type === "relationship") {
+        const directLabel = extractLabelFromObj(val);
+        if (directLabel) return directLabel;
+
+        let id = "";
+        if (typeof val === "string") {
+          id = val;
+        } else if (typeof val === "object" && val !== null) {
+          const vObj = val as Record<string, unknown>;
+          if (vObj.id && typeof vObj.id === "string") id = vObj.id;
+          else if (vObj.value && typeof vObj.value === "string") id = vObj.value;
+        }
+        if (id && relLabels[id]) {
+          return relLabels[id];
+        }
+      }
+
       if (f.type === "group" && (f as Field & { fields?: Field[] }).fields) {
-        for (const inner of (f as Field & { fields?: Field[] }).fields || []) {
-          if (inner.type === "text" || inner.type === "textarea") {
-            const group = item[f.name!] as Record<string, unknown> | undefined;
-            const val = group?.[inner.name!];
-            if (val && typeof val === "string") return val;
+        const groupObj = val as Record<string, unknown> | undefined;
+        if (groupObj && typeof groupObj === "object") {
+          for (const inner of (f as Field & { fields?: Field[] }).fields || []) {
+            if (!inner.name) continue;
+            const innerVal = groupObj[inner.name];
+            if (inner.type === "text" || inner.type === "textarea") {
+              if (typeof innerVal === "string" && innerVal.trim() !== "") return innerVal;
+            }
+            if (inner.type === "select" && !DISCRIMINATOR_NAMES.has(inner.name)) {
+              if (typeof innerVal === "string" && innerVal.trim() !== "") return innerVal;
+            }
+            if (inner.type === "relationship") {
+              const directLabel = extractLabelFromObj(innerVal);
+              if (directLabel) return directLabel;
+              let id = "";
+              if (typeof innerVal === "string") id = innerVal;
+              else if (typeof innerVal === "object" && innerVal !== null) {
+                const vObj = innerVal as Record<string, unknown>;
+                if (vObj.id && typeof vObj.id === "string") id = vObj.id;
+                else if (vObj.value && typeof vObj.value === "string") id = vObj.value;
+              }
+              if (id && relLabels[id]) return relLabels[id];
+            }
           }
         }
       }
     }
+
     return "";
   }
 

package/src/components/fields/RelationshipField.tsx

@@ -326,14 +326,14 @@ export function RelationshipField({
               items={tagIds}
               strategy={horizontalListSortingStrategy}
             >
-              {items.map((item) => {
+              {items.map((item, idx) => {
                 const rawId = getValueId(item);
                 const doc = selectedDocs.find((d) => d.id === rawId);
-                const label = doc ? getLabel(doc) : rawId.slice(0, 12);
+                const label = doc ? getLabel(doc) : (rawId ? rawId.slice(0, 12) : "Item");
                 const rel = isPolymorphic && doc ? doc.relationTo : null;
                 return (
                   <SortableTag
-                    key={rawId}
+                    key={`${rawId}-${idx}`}
                     id={rawId}
                     label={label}
                     relation={rel}
@@ -353,14 +353,14 @@ export function RelationshipField({
 
     return (
       <div className="flex flex-wrap gap-1.5 mt-2">
-        {items.map((item) => {
+        {items.map((item, idx) => {
           const rawId = getValueId(item);
           const doc = selectedDocs.find((d) => d.id === rawId);
-          const label = doc ? getLabel(doc) : rawId.slice(0, 12);
+          const label = doc ? getLabel(doc) : (rawId ? rawId.slice(0, 12) : "Item");
           const rel = isPolymorphic && doc ? doc.relationTo : null;
           return (
             <span
-              key={rawId}
+              key={`${rawId}-${idx}`}
               className="inline-flex items-center gap-1 px-2 py-1 text-xs rounded-md bg-[var(--kyro-sidebar-active)]/10 text-[var(--kyro-sidebar-active)]"
             >
               {rel && <span className="opacity-60 mr-0.5">{rel}:</span>}

package/src/components/fields/TabsLayout.tsx

@@ -53,7 +53,11 @@ export function TabsLayout({
       </div>
       <div className="space-y-6">
         {currentTab?.fields.map((f: Field) =>
-          renderField(f, tabData, onTabDataChange),
+          renderField(
+            f,
+            field.name ? tabData : formData,
+            field.name ? onTabDataChange : undefined as any,
+          ),
         )}
       </div>
 

package/src/hooks/useAutoFormState.ts

@@ -447,9 +447,17 @@ const persistBrowserDraft = useCallback(
     const titleStr = titleValue ? String(titleValue) : "";
 
     if (titleStr && (!formData.metaTitle || formData.metaTitle === formData._lastMetaTitle)) {
-      setField("metaTitle", titleStr);
+      if (formData.metaTitle !== titleStr) {
+        useAutoFormStore.setState((state) => ({
+          formData: {
+            ...state.formData,
+            metaTitle: titleStr,
+            _lastMetaTitle: titleStr,
+          },
+        }));
+      }
     }
-  }, [formData, config?.fields, setField]);
+  }, [formData.title, config?.fields]);
 
   interface FieldConfig {
     name?: string;
@@ -471,13 +479,18 @@ const persistBrowserDraft = useCallback(
 
     const sourceValue = resolveFieldValue(fields, formData, sourceField);
 
-    if (isSlugLocked && typeof sourceValue === "string") {
+    if (isSlugLocked && typeof sourceValue === "string" && sourceValue) {
       const newSlug = slugifyText(sourceValue);
-      if (newSlug !== formData.slug) {
-        setField("slug", newSlug);
+      if (newSlug && newSlug !== formData.slug) {
+        useAutoFormStore.setState((state) => ({
+          formData: {
+            ...state.formData,
+            slug: newSlug,
+          },
+        }));
       }
     }
-  }, [formData, isSlugLocked, config?.fields, setField]);
+  }, [formData.title, isSlugLocked, config?.fields]);
 
   // Auto-save effect — only starts timers on keystroke-originated changes.
   // Local save fires after 1.5s of inactivity, server save after 8s.

package/src/integration.ts

@@ -150,7 +150,7 @@ export function kyroAdmin(options: KyroAdminOptions = {}): AstroIntegration {
           ];
           for (const col of (configResult.collections || [])) {
             if (col.seo) {
-              const tabsField = col.fields?.find((f: any) => f.type === 'tabs' && f.name === 'tabs');
+              const tabsField = col.fields?.find((f: any) => f.type === 'tabs');
               if (tabsField?.tabs) {
                 // Only add if not already injected (avoid duplicates on hot-reload)
                 if (!tabsField.tabs.find((t: any) => t.label === 'SEO Settings')) {
@@ -258,6 +258,7 @@ export default debug;
               alias: {
                 "kyro:config": resolvedConfig,
               },
+              dedupe: ["react", "react-dom"],
             },
             optimizeDeps: {
               include: [

package/src/lib/autoform-store.ts

@@ -211,6 +211,7 @@ export const useAutoFormStore = create<AutoFormStore>()(
 
       // Field update actions
         setField: (field: string, value: unknown) => {
+         if (!field || field === "undefined") return;
          const state = get();
          const newDirty = new Set(state.dirtyFields);
          // Mark dirty if value differs from last saved baseline (normalized to strip full media details)
@@ -223,18 +224,22 @@ export const useAutoFormStore = create<AutoFormStore>()(
          } else {
            newDirty.delete(field);
          }
+         const nextFormData = { ...state.formData };
+         delete nextFormData.undefined;
+         delete nextFormData["undefined"];
+         nextFormData[field] = value;
          set({
-           formData: {
-             ...state.formData,
-             [field]: value,
-           },
+           formData: nextFormData,
            dirtyFields: newDirty,
            hasUnsavedChanges: newDirty.size > 0,
          });
        },
 
        setFormData: (data: Record<string, unknown>) => {
-         set({ formData: data });
+         const cleanData = { ...data };
+         delete cleanData.undefined;
+         delete cleanData["undefined"];
+         set({ formData: cleanData });
        },
 
        setNestedField: (path: string, value: unknown) => {
@@ -253,6 +258,8 @@ export const useAutoFormStore = create<AutoFormStore>()(
           }
 
           current[keys[keys.length - 1]] = value;
+          delete newFormData.undefined;
+          delete newFormData["undefined"];
 
           return { formData: newFormData };
         });
@@ -363,17 +370,24 @@ export const useAutoFormStore = create<AutoFormStore>()(
         data: Record<string, unknown>,
         lastSaved?: Record<string, unknown>,
       ) => {
+        const cleanData = { ...data };
+        delete cleanData.undefined;
+        delete cleanData["undefined"];
+        const cleanLastSaved = lastSaved ? { ...lastSaved } : cleanData;
+        delete cleanLastSaved.undefined;
+        delete cleanLastSaved["undefined"];
+
         const state = get();
         if (
-          state.formData === data &&
-          state.lastSavedData === (lastSaved || data) &&
+          state.formData === cleanData &&
+          state.lastSavedData === cleanLastSaved &&
           !state.hasUnsavedChanges
         ) {
           return;
         }
         set({
-          formData: data,
-          lastSavedData: lastSaved || data,
+          formData: cleanData,
+          lastSavedData: cleanLastSaved,
           hasUnsavedChanges: false,
           dirtyFields: new Set<string>(),
         });

package/src/lib/config.ts

@@ -98,7 +98,7 @@ function updateFieldByPath(
         if (field.fields && Array.isArray(field.fields)) {
           return updateFieldByPath(field.fields, remainingPath, updates);
         }
-        
+
         // For tabs fields, traverse into all tabs
         if (field.type === "tabs" && field.tabs && Array.isArray(field.tabs)) {
           for (const tab of field.tabs) {
@@ -116,7 +116,7 @@ function updateFieldByPath(
           const blockSlug = remainingPath.split(".")[0];
           const restOfPath = remainingPath.split(".").slice(1).join(".");
           if (!restOfPath) return false;
-          
+
           for (const block of field.blocks) {
             if (block.slug === blockSlug && block.fields && Array.isArray(block.fields)) {
               return updateFieldByPath(block.fields, restOfPath, updates);
@@ -124,7 +124,7 @@ function updateFieldByPath(
           }
           return false;
         }
-        
+
         // For array fields, look in the nested fields
         if (field.type === "array" && field.fields && Array.isArray(field.fields)) {
           return updateFieldByPath(field.fields, remainingPath, updates);
@@ -136,9 +136,10 @@ function updateFieldByPath(
         return true;
       }
     }
-    
-    // If it's a structural field (like tabs, row, or collapsible) that we should pass through implicitly,
-    // we must traverse it even if it has a name, because these fields do not create nested data objects.
+  }
+
+  // Pass through structural flat wrappers (unnamed tabs, rows, collapsibles)
+  for (const field of fields) {
     const isFlatStructuralField =
       !field.name ||
       field.type === "tabs" ||
@@ -158,6 +159,17 @@ function updateFieldByPath(
       }
     }
   }
+
+  // Target field does not exist in this container.
+  // If there is no remaining path, this is the terminal target container — append the new field here!
+  if (!remainingPath) {
+    fields.push({
+      name: currentPart,
+      ...updates,
+    });
+    return true;
+  }
+
   return false;
 }
 

package/src/pages/index.astro

@@ -1,6 +1,6 @@
 ---
 import AdminLayout from "../layouts/AdminLayout.astro";
-import i18next from '../lib/i18n';
+import i18next from "../lib/i18n";
 import { collections } from "../lib/config";
 const authCollections = ["users", "audit_logs"];
 import { adminPath, apiPath } from "../lib/paths";
@@ -13,7 +13,7 @@ const authItems = authCollections.map((slug) => ({
 }));
 ---
 
-<AdminLayout title={i18next.t("pages." + "Dashboard".replace(/ /g, ""), { defaultValue: "Dashboard" })}> 
+<AdminLayout title={i18next.t("pages." + "Dashboard".replace(/ /g, ""), { defaultValue: "Dashboard" })}>
   <div class="flex-1 overflow-y-auto space-y-8">
     <!-- Header -->
     <div class="surface-tile p-6 flex items-center justify-between gap-8">
@@ -31,7 +31,7 @@ const authItems = authCollections.map((slug) => ({
           type="text"
           id="header-search-input"
           placeholder="Search anything..."
-          class="w-full bg-[var(--kyro-surface-accent)] border border-transparent rounded-2xl py-3 pl-16 pr-8 text-lg font-medium focus:outline-none focus:bg-[var(--kyro-surface)] focus:border-[var(--kyro-border)] transition-all shadow-inner text-[var(--kyro-text-primary)] placeholder-[var(--kyro-text-muted)]"
+          class="w-full bg-[var(--kyro-surface-accent)] border border-transparent rounded-2xl py-3 pl-16 pr-8 text-md font-medium focus:outline-none focus:bg-[var(--kyro-surface)] focus:border-[var(--kyro-border)] transition-all shadow-inner text-[var(--kyro-text-primary)] placeholder-[var(--kyro-text-muted)]"
           autocomplete="off"
         />
         <div
@@ -51,8 +51,8 @@ const authItems = authCollections.map((slug) => ({
     </div>
 
     <!-- CMS Metrics -->
-    <DashboardMetrics client:load isEcommerce={!!collections['orders'] || !!collections['products']} />
-    {(!!collections['orders'] || !!collections['products']) && <RevenueChart client:load />}
+    <DashboardMetrics client:load isEcommerce={!!collections["orders"] || !!collections["products"]} />
+    {(!!collections["orders"] || !!collections["products"]) && <RevenueChart client:load />}
 
     <!-- Quick Links Section -->
     <div class="surface-tile overflow-hidden mt-8">