@kyro-cms/admin 0.10.13 → 0.10.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyro-cms/admin",
-  "version": "0.10.13",
+  "version": "0.10.18",
   "engines": {
     "node": ">=22"
   },

package/src/components/AutoForm.tsx

@@ -272,7 +272,9 @@ export function AutoForm({
 
           const result = await resp.json();
           if (result.data) {
-            const restoredData = { ...formData, ...result.data };
+            // Omit historical timestamps so OCC doesn't panic on save
+            const { updatedAt, createdAt, ...historicalData } = result.data;
+            const restoredData = { ...formData, ...historicalData };
             setFormData(restoredData);
             useAutoFormStore.getState().loadDocument(restoredData, restoredData);
             onActionSuccess?.("Version restored successfully");
@@ -540,6 +542,8 @@ export function AutoForm({
     setLocalSaveStatus("saving");
 
     try {
+      let dataToPublish = { ...formData };
+
       if (isNewDoc && !globalSlug) {
         // Create then immediately publish
         const data = normalizeUploadFields({ ...formData }) as Record<string, unknown>;
@@ -560,10 +564,11 @@ export function AutoForm({
         const savedData = result.data || data;
         setFormData({ ...formData, ...savedData });
         setLastSavedData({ ...formData, ...savedData });
+        dataToPublish = { ...formData, ...savedData };
       }
 
       // Save and publish (X-Draft: false writes to main doc + versions table)
-      const data = normalizeUploadFields({ ...formData }) as Record<string, unknown>;
+      const data = normalizeUploadFields(dataToPublish) as Record<string, unknown>;
       const response = await saveDocument(data, false);
 
       if (response?.ok) {

package/src/components/autoform/AutoFormApiView.tsx

@@ -33,7 +33,7 @@ export function AutoFormApiView({
                 <label className="text-[10px] font-bold tracking-[0.1em] text-[var(--kyro-text-secondary)] opacity-50 block mb-2">
                   Reference Path
                 </label>
-                <div className="bg-[var(--kyro-bg-secondary)] px-4 py-3 rounded-xl border border-[var(--kyro-border)] text-[11px] font-mono break-all selection:bg-[var(--kyro-primary)]/20 text-[var(--kyro-text-primary)]">
+                <div className="bg-[var(--kyro-bg-secondary)] px-4 py-3 rounded-md border border-[var(--kyro-border)] text-[11px] font-mono break-all selection:bg-[var(--kyro-primary)]/20 text-[var(--kyro-text-primary)]">
                   {globalSlug
                     ? `kyro.globals('${globalSlug}').get()`
                     : formData.id

package/src/components/autoform/AutoFormVersionView.tsx

@@ -167,7 +167,7 @@ export function AutoFormVersionView({
                         )}
                       </div>
                       <div className="text-[11px] text-[var(--kyro-text-muted)]">
-                        {new Date(v.createdAt as string).toLocaleString("en-US", {
+                        {new Date((v.createdAt || (v as any).created_at) as string).toLocaleString("en-US", {
                           month: "short",
                           day: "numeric",
                           hour: "2-digit",
@@ -236,7 +236,7 @@ export function AutoFormVersionView({
                       </div>
                       <div className="flex items-center gap-2 mt-1 flex-wrap">
                         <span className="text-[11px] text-[var(--kyro-text-muted)]">
-                          {new Date(v.createdAt as string).toLocaleString("en-US", {
+                          {new Date((v.createdAt || (v as any).created_at) as string).toLocaleString("en-US", {
                             month: "short",
                             day: "numeric",
                             hour: "2-digit",

package/src/components/blocks/BlockEditModal.tsx

@@ -107,17 +107,6 @@ export const BlockEditModal: React.FC<BlockEditModalProps> = ({
       accentClass={theme.border}
     >
       <div className="space-y-4">
-        <div>
-          <label className="text-[10px] font-medium text-[var(--kyro-text-muted)] mb-1 block">
-            Block Name
-          </label>
-          <input
-            value={(blockData?.name as string) || ""}
-            onChange={(e) => updateBlock(block.id, { name: e.target.value })}
-            placeholder={blockSchema?.label || (block.type as string)}
-            className="w-full bg-[var(--kyro-bg-primary)] border border-[var(--kyro-border)] rounded-lg px-3 py-2 text-sm text-[var(--kyro-text-primary)] outline-none focus:border-[var(--kyro-primary)] transition-colors"
-          />
-        </div>
 
         {renderFields()}
 

package/src/components/fields/BlocksField.tsx

@@ -257,7 +257,7 @@ const SortableBlockComponent = ({
               onKeyDown={(e) => { if (e.key === "Enter") commitName(); if (e.key === "Escape") { setNameDraft((block.name as string) || ""); setEditingName(false); } }}
               onClick={(e) => e.stopPropagation()}
               placeholder={getBlockLabel(block.type as string)}
-              className="w-[150px] sm:w-[250px] md:w-full bg-[var(--kyro-surface-accent)] border border-[var(--kyro-primary)] rounded px-2 py-0.5 text-xs font-semibold text-[var(--kyro-text-primary)] outline-none"
+              className="w-full max-w-[150px] sm:max-w-[250px] md:max-w-[400px] bg-[var(--kyro-surface-accent)] border border-[var(--kyro-primary)] rounded px-2 py-0.5 text-xs font-semibold text-[var(--kyro-text-primary)] outline-none"
             />
           ) : (
             <div

package/src/components/fields/RelationshipField.tsx

@@ -65,7 +65,7 @@ export function RelationshipField({
     ? field.relationTo
     : [field.relationTo];
   const isPolymorphic = relationTo.length > 1;
-  const [activeRelation, setActiveRelation] = useState(relationTo[0]);
+  const [activeRelation, setActiveRelation] = useState(relationTo[0] || "");
 
   const extractIds = useCallback((): string[] => {
     if (!value) return [];

package/src/components/fields/extensions/blockComponents.tsx

@@ -8,9 +8,7 @@ import { CodeBlock } from "../../blocks/CodeBlock";
 import { FileBlock } from "../../blocks/FileBlock";
 import { AccordionBlock } from "../../blocks/AccordionBlock";
 import { RichTextBlock } from "../../blocks/RichTextBlock";
-
 import { HeroBlock } from "../../blocks/HeroBlock";
-import { HeadingSubheadingBlock } from "../../blocks/HeadingSubheadingBlock";
 import { CardBlock } from "../../blocks/CardBlock";
 import { ArrayBlock } from "../../blocks/ArrayBlock";
 import { RelationshipBlock } from "../../blocks/RelationshipBlock";
@@ -53,7 +51,6 @@ export const BLOCK_COMPONENTS: Record<string, React.ComponentType<{ block: Recor
   richtext: RichTextBlock,
 
   hero: HeroBlock,
-  "heading-subheading": HeadingSubheadingBlock,
   card: CardBlock,
   array: ArrayBlock,
   relationship: RelationshipBlock,
@@ -61,19 +58,19 @@ export const BLOCK_COMPONENTS: Record<string, React.ComponentType<{ block: Recor
 
 // Block Theme mapping for consistent coloring across UI
 export const blockTheme: Record<string, { text: string; border: string; borderLeft: string }> = {
-  "feature-split": { text: "text-indigo-500", border: "border-indigo-500", borderLeft: "border-l-indigo-500" },
-  "feature-grid": { text: "text-blue-500", border: "border-blue-500", borderLeft: "border-l-blue-500" },
-  "cta-banner": { text: "text-amber-500", border: "border-amber-500", borderLeft: "border-l-amber-500" },
+  featureSplit: { text: "text-indigo-500", border: "border-indigo-500", borderLeft: "border-l-indigo-500" },
+  featureGrid: { text: "text-blue-500", border: "border-blue-500", borderLeft: "border-l-blue-500" },
+  ctaBanner: { text: "text-amber-500", border: "border-amber-500", borderLeft: "border-l-amber-500" },
   testimonials: { text: "text-emerald-500", border: "border-emerald-500", borderLeft: "border-l-emerald-500" },
   faq: { text: "text-orange-500", border: "border-orange-500", borderLeft: "border-l-orange-500" },
   stats: { text: "text-rose-500", border: "border-rose-500", borderLeft: "border-l-rose-500" },
-  "logo-cloud": { text: "text-cyan-500", border: "border-cyan-500", borderLeft: "border-l-cyan-500" },
+  logoCloud: { text: "text-cyan-500", border: "border-cyan-500", borderLeft: "border-l-cyan-500" },
   pricing: { text: "text-green-500", border: "border-green-500", borderLeft: "border-l-green-500" },
   team: { text: "text-violet-500", border: "border-violet-500", borderLeft: "border-l-violet-500" },
-  "recent-feed": { text: "text-sky-500", border: "border-sky-500", borderLeft: "border-l-sky-500" },
-  "process-steps": { text: "text-fuchsia-500", border: "border-fuchsia-500", borderLeft: "border-l-fuchsia-500" },
-  "form-embed": { text: "text-pink-500", border: "border-pink-500", borderLeft: "border-l-pink-500" },
-  "video-showcase": { text: "text-red-500", border: "border-red-500", borderLeft: "border-l-red-500" },
+  recentFeed: { text: "text-sky-500", border: "border-sky-500", borderLeft: "border-l-sky-500" },
+  processSteps: { text: "text-fuchsia-500", border: "border-fuchsia-500", borderLeft: "border-l-fuchsia-500" },
+  formEmbed: { text: "text-pink-500", border: "border-pink-500", borderLeft: "border-l-pink-500" },
+  videoShowcase: { text: "text-red-500", border: "border-red-500", borderLeft: "border-l-red-500" },
   hero: { text: "text-yellow-500", border: "border-yellow-500", borderLeft: "border-l-yellow-500" },
   card: { text: "text-teal-500", border: "border-teal-500", borderLeft: "border-l-teal-500" },
   default: { text: "text-zinc-400", border: "border-zinc-400", borderLeft: "border-l-zinc-400" },
@@ -92,25 +89,24 @@ export const blockIcons: Record<string, React.ReactNode> = {
   richtext: <AlignLeft className={`w-4 h-4 ${blockTheme.default.text}`} />,
 
   hero: <Star className={`w-4 h-4 ${blockTheme.hero.text}`} />,
-  "heading-subheading": <Heading1 className={`w-4 h-4 ${blockTheme.default.text}`} />,
   card: <Box className={`w-4 h-4 ${blockTheme.card.text}`} />,
   array: <ListOrdered className={`w-4 h-4 ${blockTheme.default.text}`} />,
   relationship: <Link2 className={`w-4 h-4 ${blockTheme.default.text}`} />,
 
   // New Block Icons
-  "feature-split": <Columns3 className={`w-4 h-4 ${blockTheme["feature-split"].text}`} />,
-  "feature-grid": <Blocks className={`w-4 h-4 ${blockTheme["feature-grid"].text}`} />,
-  "cta-banner": <Sparkles className={`w-4 h-4 ${blockTheme["cta-banner"].text}`} />,
+  featureSplit: <Columns3 className={`w-4 h-4 ${blockTheme.featureSplit.text}`} />,
+  featureGrid: <Blocks className={`w-4 h-4 ${blockTheme.featureGrid.text}`} />,
+  ctaBanner: <Sparkles className={`w-4 h-4 ${blockTheme.ctaBanner.text}`} />,
   testimonials: <Users className={`w-4 h-4 ${blockTheme.testimonials.text}`} />,
   faq: <HelpCircle className={`w-4 h-4 ${blockTheme.faq.text}`} />,
   stats: <Activity className={`w-4 h-4 ${blockTheme.stats.text}`} />,
-  "logo-cloud": <Image className={`w-4 h-4 ${blockTheme["logo-cloud"].text}`} />,
+  logoCloud: <Image className={`w-4 h-4 ${blockTheme.logoCloud.text}`} />,
   pricing: <Tag className={`w-4 h-4 ${blockTheme.pricing.text}`} />,
   team: <Users className={`w-4 h-4 ${blockTheme.team.text}`} />,
-  "recent-feed": <Database className={`w-4 h-4 ${blockTheme["recent-feed"].text}`} />,
-  "process-steps": <Clock className={`w-4 h-4 ${blockTheme["process-steps"].text}`} />,
-  "form-embed": <Mail className={`w-4 h-4 ${blockTheme["form-embed"].text}`} />,
-  "video-showcase": <Video className={`w-4 h-4 ${blockTheme["video-showcase"].text}`} />,
+  recentFeed: <Database className={`w-4 h-4 ${blockTheme.recentFeed.text}`} />,
+  processSteps: <Clock className={`w-4 h-4 ${blockTheme.processSteps.text}`} />,
+  formEmbed: <Mail className={`w-4 h-4 ${blockTheme.formEmbed.text}`} />,
+  videoShowcase: <Video className={`w-4 h-4 ${blockTheme.videoShowcase.text}`} />,
 };
 
 // Internal utility to check if block has a specific custom react component
@@ -121,9 +117,9 @@ export function getBlockComponent(type: string) {
 // Determines if block is a native layout requiring generic rendering
 export function isGenericSemanticBlock(type: string) {
   return [
-    "feature-split", "feature-grid", "cta-banner",
-    "testimonials", "faq", "stats", "logo-cloud",
-    "pricing", "team", "recent-feed", "process-steps", "form-embed", "video-showcase"
+    "featureSplit", "featureGrid", "ctaBanner",
+    "testimonials", "faq", "stats", "logoCloud",
+    "pricing", "team", "recentFeed", "processSteps", "formEmbed", "videoShowcase"
   ].includes(type);
 }
 
@@ -145,32 +141,31 @@ export function getBlockLabel(type: string): string {
 
     // Core Semantic Blocks
     hero: "Hero Section",
-    "heading-subheading": "Heading + Subheading",
     card: "Card Block",
-    "feature-split": "Feature Split",
-    "feature-grid": "Feature Grid",
-    "cta-banner": "CTA Banner",
+    featureSplit: "Feature Split",
+    featureGrid: "Feature Grid",
+    ctaBanner: "CTA Banner",
     testimonials: "Testimonials Stack",
     faq: "FAQ Section",
     stats: "Stats & Metrics",
-    "logo-cloud": "Logo Cloud",
+    logoCloud: "Logo Cloud",
 
     // Brand New Blocks
     pricing: "Pricing Grid / Plan",
     team: "Team Profiles Showcase",
-    "recent-feed": "Dynamic Content Feed",
-    "process-steps": "Process Timeline / Steps",
-    "form-embed": "Lead Intake Form",
-    "video-showcase": "Cinematic Video Showcase",
+    recentFeed: "Dynamic Content Feed",
+    processSteps: "Process Timeline / Steps",
+    formEmbed: "Lead Intake Form",
+    videoShowcase: "Cinematic Video Showcase",
 
     // Inline Content Elements
-    "heading-element": "Heading",
-    "text-element": "Text",
-    "image-element": "Image",
-    "richtext-element": "Rich Text",
-    "button-element": "Button",
-    "video-element": "Video",
-    "list-element": "List",
+    headingElement: "Heading",
+    textElement: "Text",
+    imageElement: "Image",
+    richtextElement: "Rich Text",
+    buttonElement: "Button",
+    videoElement: "Video",
+    listElement: "List",
   };
   return labelMap[type] || type;
 }

package/src/lib/config.ts

@@ -101,6 +101,33 @@ 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) {
+            if (tab.fields && Array.isArray(tab.fields)) {
+              if (updateFieldByPath(tab.fields, remainingPath, updates)) {
+                return true;
+              }
+            }
+          }
+          return false;
+        }
+
+        // For blocks fields, the next path segment is the block slug
+        if (field.type === "blocks" && field.blocks && Array.isArray(field.blocks)) {
+          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);
+            }
+          }
+          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);
@@ -112,6 +139,27 @@ 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.
+    const isFlatStructuralField =
+      !field.name ||
+      field.type === "tabs" ||
+      field.type === "row" ||
+      field.type === "collapsible";
+
+    if (isFlatStructuralField) {
+      if (field.fields && Array.isArray(field.fields)) {
+        if (updateFieldByPath(field.fields, path, updates)) return true;
+      }
+      if (field.type === "tabs" && field.tabs && Array.isArray(field.tabs)) {
+        for (const tab of field.tabs) {
+          if (tab.fields && Array.isArray(tab.fields)) {
+            if (updateFieldByPath(tab.fields, path, updates)) return true;
+          }
+        }
+      }
+    }
   }
   return false;
 }