@jhits/plugin-blog 0.0.18 → 0.0.20

package/src/lib/layouts/blocks/ColumnsBlock.tsx

@@ -6,7 +6,6 @@
 'use client';
 
 import React from 'react';
-import { Plus, Trash2 } from 'lucide-react';
 import { BlockEditProps, BlockPreviewProps } from '../../../types/block';
 import { LayoutContainer } from '../../../views/CanvasEditor/LayoutContainer';
 import { COLUMN_LAYOUTS, ColumnLayout } from '../index';
@@ -31,117 +30,49 @@ export const ColumnsEdit: React.FC<BlockEditProps & {
     onChildBlockDelete,
     onChildBlockMove,
 }) => {
+        // Filter out hero block from being rendered inside containers
+        const blocks = childBlocks.filter(b => b.type !== 'hero');
+
         // Support both old layout-based system and new dynamic column count
         const columnCount = block.data.columnCount as number | undefined;
         const layout: ColumnLayout | undefined = block.data.layout as ColumnLayout | undefined;
         
-        // Determine number of columns: use columnCount if set, otherwise derive from layout
         let numColumns: number;
-        let gridClass: string;
         let columnWidths: number[];
         
-        // Grid class mapping for Tailwind (must be explicit for dynamic classes)
-        const gridClassMap: Record<number, string> = {
-            1: 'grid-cols-1',
-            2: 'grid-cols-2',
-            3: 'grid-cols-3',
-            4: 'grid-cols-4',
-            5: 'grid-cols-5',
-            6: 'grid-cols-6',
-        };
-        
         if (columnCount !== undefined && columnCount > 0) {
-            // Dynamic column system
             numColumns = columnCount;
-            // Create equal-width columns
             const widthPercent = Math.floor(100 / numColumns);
             columnWidths = Array(numColumns).fill(widthPercent);
-            // Use explicit grid class from map, fallback to inline style if needed
-            gridClass = gridClassMap[numColumns] || `grid-cols-${numColumns}`;
         } else if (layout && COLUMN_LAYOUTS[layout]) {
-            // Legacy layout-based system
             const layoutConfig = COLUMN_LAYOUTS[layout];
             numColumns = layoutConfig.widths.length;
-            gridClass = layoutConfig.grid;
             columnWidths = layoutConfig.widths;
         } else {
-            // Default to 2 columns
             numColumns = 2;
-            gridClass = 'grid-cols-2';
             columnWidths = [50, 50];
         }
 
-        // Split child blocks into columns based on columnIndex in meta, or round-robin
         const columns: Block[][] = Array.from({ length: numColumns }, () => []);
-        childBlocks.forEach((childBlock) => {
+        blocks.forEach((childBlock) => {
             const columnIndex = childBlock.meta?.columnIndex;
             if (typeof columnIndex === 'number' && columnIndex >= 0 && columnIndex < numColumns) {
                 columns[columnIndex].push(childBlock);
             } else {
-                // Fallback to round-robin if no columnIndex specified
-                const index = childBlocks.indexOf(childBlock);
+                const index = blocks.indexOf(childBlock);
                 columns[index % numColumns].push(childBlock);
             }
         });
 
-        // Get column widths from data or use equal widths
         const storedWidths = block.data.columnWidths as number[] | undefined;
         const currentWidths = storedWidths && storedWidths.length === numColumns 
             ? storedWidths 
-            : columnWidths; // Use calculated equal widths if not set
-        
-        // Add column handler
-        const addColumn = () => {
-            if (numColumns >= 4) return; // Max 4 columns
-            const newColumnCount = numColumns + 1;
-            // Calculate new equal widths
-            const newWidthPercent = Math.floor(100 / newColumnCount);
-            const newWidths = Array(newColumnCount).fill(newWidthPercent);
-            onUpdate({
-                ...block.data,
-                columnCount: newColumnCount,
-                columnWidths: newWidths,
-                // Clear layout if using dynamic columns
-                layout: undefined,
-            });
-        };
-
-        // Delete column handler
-        const deleteColumn = (colIndex: number) => {
-            if (numColumns <= 1) return; // Don't allow deleting the last column
-            
-            // Move blocks from deleted column to the last column (or previous column if deleting last)
-            const blocksToMove = columns[colIndex] || [];
-            const targetColumnIndex = colIndex === numColumns - 1 ? numColumns - 2 : numColumns - 1;
-            const targetColumn = columns[targetColumnIndex] || [];
-            
-            // Move each block to the target column using moveBlock (which will update meta.columnIndex)
-            blocksToMove.forEach((blockToMove, blockIndex) => {
-                const newIndex = targetColumn.length + blockIndex;
-                onChildBlockMove(blockToMove.id, newIndex, `${block.id}-col-${targetColumnIndex}`);
-            });
-            
-            // Update column count and widths after moving blocks
-            const newColumnCount = numColumns - 1;
-            // Remove the deleted column's width and redistribute
-            const newWidths = currentWidths.filter((_, i) => i !== colIndex);
-            // Normalize to ensure they sum to 100
-            const total = newWidths.reduce((sum, w) => sum + w, 0);
-            const normalizedWidths = newWidths.map(w => Math.round((w / total) * 100));
-            
-            onUpdate({
-                ...block.data,
-                columnCount: newColumnCount,
-                columnWidths: normalizedWidths,
-                layout: undefined,
-            });
-        };
+            : columnWidths;
 
         return (
-            <div className="rounded-xl bg-white relative">
-                {/* Column Grid */}
+            <div className="rounded-xl bg-transparent relative">
                 <div 
-                    className="grid gap-8 p-6"
+                    className="grid gap-2 p-1"
                     style={{
                         gridTemplateColumns: currentWidths.map(w => `${w}%`).join(' '),
                     }}
@@ -149,61 +80,33 @@ export const ColumnsEdit: React.FC<BlockEditProps & {
                     {Array.from({ length: numColumns }).map((_, colIndex) => (
                         <div
                             key={colIndex}
-                            className={`group/col min-h-[200px] rounded-xl border border-dashed transition-all relative ${isSelected
+                            className={`group/col min-h-[100px] rounded-xl border border-dashed transition-all relative ${isSelected
                                 ? 'border-primary/20'
-                                : 'border-gray-200/50'
+                                : 'border-neutral-200 dark:border-neutral-800'
                                 }`}
                         >
-                            <div className="p-4">
+                            <div className="p-1">
                                 <div className="mb-3 flex items-center justify-between">
-                                    <span className="text-[10px] font-black uppercase tracking-widest text-gray-400">
+                                    <span className="text-[10px] font-black uppercase tracking-widest text-neutral-400 dark:text-neutral-600">
                                         Column {colIndex + 1}
                                     </span>
-                                    <div className="flex items-center gap-2">
-                                        <span className="text-[9px] text-gray-500">
-                                            {currentWidths[colIndex]}%
-                                        </span>
-                                        {/* Delete Column Button - Similar to table, appears on column hover */}
-                                        {numColumns > 1 && (
-                                            <button
-                                                onClick={(e) => {
-                                                    e.stopPropagation();
-                                                    deleteColumn(colIndex);
-                                                }}
-                                                className="opacity-0 group-hover/col:opacity-100 p-1 text-neutral-400 hover:text-red-500 transition-all rounded"
-                                                title="Delete Column"
-                                                aria-label="Delete Column"
-                                            >
-                                                <Trash2 size={10} />
-                                            </button>
-                                        )}
-                                    </div>
+                                </div>
+                                <div data-layout-container={`${block.id}-col-${colIndex}`}>
+                                    <LayoutContainer
+                                        blocks={columns[colIndex]}
+                                        containerId={`${block.id}-col-${colIndex}`}
+                                        onBlockAdd={onChildBlockAdd}
+                                        onBlockUpdate={onChildBlockUpdate}
+                                        onBlockDelete={onChildBlockDelete}
+                                        onBlockMove={onChildBlockMove}
+                                        emptyLabel="Drop blocks here"
+                                    />
                                 </div>
 
-                                <LayoutContainer
-                                    blocks={columns[colIndex] || []}
-                                    containerId={`${block.id}-col-${colIndex}`}
-                                    onBlockAdd={onChildBlockAdd}
-                                    onBlockUpdate={onChildBlockUpdate}
-                                    onBlockDelete={onChildBlockDelete}
-                                    onBlockMove={onChildBlockMove}
-                                    emptyLabel={`Drop blocks in column ${colIndex + 1}`}
-                                />
                             </div>
                         </div>
                     ))}
                 </div>
-                
-                {/* Add Column Button - Similar to table, pinned top right */}
-                {numColumns < 4 && (
-                    <button
-                        onClick={addColumn}
-                        className="absolute top-0 right-0 h-8 w-8 flex items-center justify-center bg-white border-l border-b border-gray-200 text-primary hover:bg-primary hover:text-white transition-all z-10 rounded-br-xl"
-                        title="Add Column"
-                    >
-                        <Plus size={16} />
-                    </button>
-                )}
             </div>
         );
     };
@@ -214,85 +117,69 @@ export const ColumnsEdit: React.FC<BlockEditProps & {
 export const ColumnsPreview: React.FC<BlockPreviewProps & {
     childBlocks?: Block[];
     renderChild?: (block: Block) => React.ReactNode;
-}> = ({ block, childBlocks = [], renderChild, context }) => {
-    // Support both old layout-based system and new dynamic column count
+}> = ({ block, context, childBlocks = [], renderChild }) => {
+    // Filter out hero block from children
+    const rawChildren = childBlocks.length > 0
+        ? childBlocks
+        : (block.children && Array.isArray(block.children) && typeof block.children[0] === 'object'
+            ? block.children as Block[]
+            : []);
+            
+    const children = rawChildren.filter(b => b.type !== 'hero');
+
     const columnCount = block.data.columnCount as number | undefined;
     const layout: ColumnLayout | undefined = block.data.layout as ColumnLayout | undefined;
     
-    // Determine number of columns: use columnCount if set, otherwise derive from layout
     let numColumns: number;
-    let gridClass: string;
-    
-    // Grid class mapping for Tailwind (must be explicit for dynamic classes)
-    const gridClassMap: Record<number, string> = {
-        1: 'grid-cols-1',
-        2: 'grid-cols-2',
-        3: 'grid-cols-3',
-        4: 'grid-cols-4',
-        5: 'grid-cols-5',
-        6: 'grid-cols-6',
-    };
-    
-    // Get column widths
-    const storedWidths = block.data.columnWidths as number[] | undefined;
+    let columnWidths: number[];
     
     if (columnCount !== undefined && columnCount > 0) {
-        // Dynamic column system
         numColumns = columnCount;
-        gridClass = gridClassMap[numColumns] || `grid-cols-${numColumns}`;
+        const widthPercent = Math.floor(100 / numColumns);
+        columnWidths = Array(numColumns).fill(widthPercent);
     } else if (layout && COLUMN_LAYOUTS[layout]) {
-        // Legacy layout-based system
         const layoutConfig = COLUMN_LAYOUTS[layout];
         numColumns = layoutConfig.widths.length;
-        gridClass = layoutConfig.grid;
+        columnWidths = layoutConfig.widths;
     } else {
-        // Default to 2 columns
         numColumns = 2;
-        gridClass = 'grid-cols-2';
+        columnWidths = [50, 50];
     }
-    
-    // Use stored widths if available, otherwise use equal widths
-    const columnWidths = storedWidths && storedWidths.length === numColumns
-        ? storedWidths
-        : Array(numColumns).fill(Math.floor(100 / numColumns));
 
-    // If childBlocks are provided, use them; otherwise get from block.children
-    const children = childBlocks.length > 0
-        ? childBlocks
-        : (block.children && Array.isArray(block.children) && typeof block.children[0] === 'object'
-            ? block.children as Block[]
-            : []);
-
-    // Split child blocks into columns based on columnIndex in meta, or round-robin
     const columns: Block[][] = Array.from({ length: numColumns }, () => []);
     children.forEach((childBlock) => {
         const columnIndex = childBlock.meta?.columnIndex;
         if (typeof columnIndex === 'number' && columnIndex >= 0 && columnIndex < numColumns) {
             columns[columnIndex].push(childBlock);
         } else {
-            // Fallback to round-robin if no columnIndex specified
             const index = children.indexOf(childBlock);
             columns[index % numColumns].push(childBlock);
         }
     });
 
+    const storedWidths = block.data.columnWidths as number[] | undefined;
+    const currentWidths = storedWidths && storedWidths.length === numColumns 
+        ? storedWidths 
+        : columnWidths;
+
     return (
-        <div 
-            className="grid gap-8 my-8"
-            style={{
-                gridTemplateColumns: columnWidths.map(w => `${w}%`).join(' '),
-            }}
-        >
-            {Array.from({ length: numColumns }).map((_, colIndex) => (
-                <div key={colIndex} className="min-h-[100px]">
-                    {columns[colIndex]?.map((childBlock) => (
-                        <React.Fragment key={childBlock.id}>
-                            {renderChild ? renderChild(childBlock) : null}
-                        </React.Fragment>
-                    ))}
-                </div>
-            ))}
+        <div className="w-full">
+            <div 
+                className="grid gap-8"
+                style={{
+                    gridTemplateColumns: currentWidths.map(w => `${w}%`).join(' '),
+                }}
+            >
+                {columns.map((colBlocks, colIdx) => (
+                    <div key={colIdx} className="w-full">
+                        {colBlocks.map((childBlock) => (
+                            <React.Fragment key={childBlock.id}>
+                                {renderChild?.(childBlock)}
+                            </React.Fragment>
+                        ))}
+                    </div>
+                ))}
+            </div>
         </div>
     );
 };
-

package/src/lib/layouts/blocks/SectionBlock.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import { BlockEditProps, BlockPreviewProps } from '../../../types/block';
 import { LayoutContainer } from '../../../views/CanvasEditor/LayoutContainer';
-import { LAYOUT_CONSTANTS, LAYOUT_BACKGROUNDS } from '../index';
+import { LAYOUT_BACKGROUNDS } from '../index';
 import { Block } from '../../../types/block';
 
 /**
@@ -32,31 +32,26 @@ export const SectionEdit: React.FC<BlockEditProps & {
 }) => {
         const background = (block.data.background as keyof typeof LAYOUT_BACKGROUNDS) || 'DEFAULT';
 
+        // Filter out hero block from being rendered inside containers
+        const blocks = childBlocks.filter(b => b.type !== 'hero');
+
         return (
             <div
-                className={`rounded-xl transition-all ${isSelected
-                    ? 'bg-primary/5'
-                    : ''
-                    } ${LAYOUT_BACKGROUNDS[background]}`}
-                onDragStart={(e) => {
-                    // Prevent section from being dragged when dragging nested blocks
-                    // Check if the drag started on a nested block wrapper
-                    const nestedBlockWrapper = (e.target as HTMLElement).closest('[data-block-wrapper]');
-                    if (nestedBlockWrapper) {
-                        const nestedBlockId = nestedBlockWrapper.getAttribute('data-block-id');
-                        // If dragging a nested block, prevent the section's drag handler from firing
-                        if (nestedBlockId && nestedBlockId !== block.id) {
-                            e.stopPropagation();
-                            e.preventDefault();
-                            console.log('[SectionBlock] Preventing section drag, nested block is being dragged:', nestedBlockId);
-                        }
-                    }
-                }}
+                className={`rounded-3xl transition-all relative group/section ${
+                    isSelected ? 'ring-2 ring-primary/20 bg-primary/5' : 'border border-dashed border-neutral-200 dark:border-neutral-800'
+                } ${LAYOUT_BACKGROUNDS[background]}`}
             >
+                {/* Section Identifier Tag */}
+                <div className="absolute -top-3 left-8 px-2 py-0.5 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-md z-20 pointer-events-none transition-opacity opacity-40 group-hover/section:opacity-100">
+                    <span className="text-[8px] font-black uppercase tracking-widest text-neutral-400 dark:text-neutral-500">
+                        Section Container
+                    </span>
+                </div>
+
                 {/* Nested Content */}
-                <div className={`px-8 py-4`}>
+                <div className={`px-8 py-6`} data-layout-container={block.id}>
                     <LayoutContainer
-                        blocks={childBlocks}
+                        blocks={blocks}
                         containerId={block.id}
                         onBlockAdd={onChildBlockAdd}
                         onBlockUpdate={onChildBlockUpdate}
@@ -75,15 +70,17 @@ export const SectionEdit: React.FC<BlockEditProps & {
 export const SectionPreview: React.FC<BlockPreviewProps & {
     childBlocks?: Block[];
     renderChild?: (block: Block) => React.ReactNode;
-}> = ({ block, childBlocks = [], renderChild, context }) => {
+}> = ({ block, context, childBlocks = [], renderChild }) => {
     const background = (block.data.background as keyof typeof LAYOUT_BACKGROUNDS) || 'DEFAULT';
 
-    // If childBlocks are provided, use them; otherwise get from block.children
-    const children = childBlocks.length > 0
+    // Filter out hero block from children
+    const rawChildren = childBlocks.length > 0
         ? childBlocks
         : (block.children && Array.isArray(block.children) && typeof block.children[0] === 'object'
             ? block.children as Block[]
             : []);
+            
+    const children = rawChildren.filter(b => b.type !== 'hero');
 
     return (
         <section className={`w-full ${LAYOUT_BACKGROUNDS[background]}`}>
@@ -95,10 +92,9 @@ export const SectionPreview: React.FC<BlockPreviewProps & {
                         </React.Fragment>
                     ))
                 ) : (
-                    <div className="text-gray-400 text-sm italic">Empty section</div>
+                    children.length > 0 ? null : <div className="text-gray-400 text-sm italic">Empty section</div>
                 )}
             </div>
         </section>
     );
 };
-

package/src/lib/layouts/index.ts

@@ -12,12 +12,12 @@ export const LAYOUT_CONSTANTS = {
     BORDER_RADIUS: '2rem', // 32px - Consistent rounded corners
 } as const;
 
-// Background Colors (Light mode only - matches client website theme)
+// Background Colors (Theme-aware - integrates with client website theme)
 export const LAYOUT_BACKGROUNDS = {
-    DEFAULT: 'bg-white',
-    NEUTRAL: 'bg-neutral-50',
+    DEFAULT: 'bg-transparent',
+    NEUTRAL: 'bg-neutral-50 dark:bg-neutral-900/50',
     SAGE: 'bg-primary/5',
-    CREAM: 'bg-amber-50/50',
+    CREAM: 'bg-amber-50/50 dark:bg-orange-950/10',
 } as const;
 
 // Column Layout Presets

package/src/lib/mappers/apiMapper.ts

@@ -41,6 +41,11 @@ export interface APIBlogDocument {
         canonicalUrl?: string;
     };
     authorId?: string;
+    author?: {
+        name: string;
+        image?: string;
+        displayRole?: string;
+    };
     createdAt?: string | Date;
     updatedAt?: string | Date;
     // Multilingual fields
@@ -59,6 +64,11 @@ export interface APIBlogDocument {
     };
     availableLanguages?: string[];
     lang?: string;
+    status?: PostStatus;
+    publication?: {
+        status: PostStatus;
+        date?: string | Date;
+    };
     metadata?: {
         lang?: string;
     };
@@ -72,7 +82,7 @@ export function apiToBlogPost(doc: APIBlogDocument): BlogPost {
     
     // Use contentBlocks if available, otherwise fallback to content (legacy)
     // Hero block is included in contentBlocks
-    const blocks = doc.contentBlocks || [];
+    const blocks = doc.contentBlocks || doc.content || [];
     
     // Convert publication data
     const publicationDate = doc.publicationData?.date 
@@ -106,9 +116,18 @@ export function apiToBlogPost(doc: APIBlogDocument): BlogPost {
         privacy: undefined, // Privacy settings not in API yet
     };
     
-    // Convert publication data - API uses 'concept' but we use 'draft'
-    const apiStatus = doc.publicationData?.status || 'concept';
-    const normalizedStatus = apiStatus === 'concept' ? 'draft' : apiStatus;
+    // Convert publication data - strictly isolate per-language status
+    // 1. Prefer specific language status from 'publication.status'
+    // 2. Fallback to top-level 'status' if provided by specific language endpoint
+    // 3. Defaults to 'draft'
+    let apiStatus: string = doc.publication?.status || doc.status || 'concept';
+    
+    // If we're missing translation, force draft
+    if (apiStatus === 'not-translated' || apiStatus === 'concept') {
+        apiStatus = 'draft';
+    }
+    
+    const normalizedStatus = apiStatus as PostStatus;
     
     const publication = {
         status: normalizedStatus as PostStatus,
@@ -119,6 +138,12 @@ export function apiToBlogPost(doc: APIBlogDocument): BlogPost {
             : undefined,
     };
     
+    const author = doc.author ? {
+        name: doc.author.name,
+        image: doc.author.image,
+        displayRole: doc.author.displayRole,
+    } : undefined;
+    
     return {
         id,
         title: doc.title,
@@ -126,8 +151,10 @@ export function apiToBlogPost(doc: APIBlogDocument): BlogPost {
         blocks,
         seo,
         publication,
+        author,
         metadata,
         languages: doc.languages,
+        availableLanguages: doc.availableLanguages || (doc.languages ? Object.keys(doc.languages) : []),
         createdAt: doc.createdAt 
             ? (typeof doc.createdAt === 'string' ? doc.createdAt : doc.createdAt.toISOString())
             : new Date().toISOString(),
@@ -192,11 +219,7 @@ export function editorStateToAPI(state: {
     // Map status: draft -> concept, published -> published, everything else stays as-is
     const apiStatus = state.status === 'draft' ? 'concept' : state.status;
     
-    console.log('[editorStateToAPI] Mapping status:', {
-        editorStatus: state.status,
-        apiStatus: apiStatus,
-        willBePublished: apiStatus === 'published'
-    });
+
     
     // Try to get category from metadata first, then check hero block
     let category: string | undefined = undefined;
@@ -213,43 +236,51 @@ export function editorStateToAPI(state: {
         }
     }
     
-    console.log('[editorStateToAPI] Category resolution:', {
-        fromMetadata: state.metadata.categories?.[0],
-        fromHeroBlock: (heroBlock || state.blocks.find(b => b.type === 'hero'))?.data ? ((heroBlock || state.blocks.find(b => b.type === 'hero'))!.data as any).category : undefined,
-        finalCategory: category,
-        hasHeroBlock: !!heroBlock,
-        heroBlockImage: heroBlock?.data ? (heroBlock.data as any)?.image : undefined,
-    });
+
     
     // Include hero block in contentBlocks if it exists
-    // Filter out any existing hero blocks from state.blocks first, then add the current hero block
     const contentBlocksWithoutHero = state.blocks.filter(block => block.type !== 'hero');
     const allBlocks = heroBlock 
         ? [heroBlock, ...contentBlocksWithoutHero] 
         : contentBlocksWithoutHero;
+
+    // Try to get featured image from metadata first, then check hero block
+    let featuredImage = state.metadata.featuredImage;
+    if (!featuredImage?.id?.trim()) {
+        const heroBlockToCheck = heroBlock || state.blocks.find(block => block.type === 'hero');
+        if (heroBlockToCheck && heroBlockToCheck.data && typeof heroBlockToCheck.data === 'object') {
+            const heroImageId = (heroBlockToCheck.data as any).imageId;
+            if (heroImageId && typeof heroImageId === 'string' && heroImageId.trim()) {
+                featuredImage = {
+                    id: heroImageId.trim(),
+                    alt: state.title,
+                    isCustom: false
+                };
+            }
+        }
+    }
     
-    console.log('[editorStateToAPI] Hero block details:', {
-        hasHeroBlock: !!heroBlock,
-        heroBlockType: heroBlock?.type,
-        heroBlockId: heroBlock?.id,
-        heroBlockImage: heroBlock?.data ? (heroBlock.data as any)?.image : undefined,
-        heroBlockImageSrc: heroBlock?.data ? (heroBlock.data as any)?.image?.src : undefined,
-        contentBlocksCount: allBlocks.length,
-        contentBlocksTypes: allBlocks.map(b => b.type),
-        heroBlockInContentBlocks: allBlocks.find(b => b.type === 'hero')?.data ? (allBlocks.find(b => b.type === 'hero')!.data as any)?.image : undefined,
-    });
+    // Try to get summary from hero block first, then metadata
+    let summary = state.metadata.excerpt;
+    const heroBlockToCheck = heroBlock || state.blocks.find(block => block.type === 'hero');
+    if (heroBlockToCheck && heroBlockToCheck.data && typeof heroBlockToCheck.data === 'object') {
+        const heroDesc = (heroBlockToCheck.data as any).description;
+        if (heroDesc && typeof heroDesc === 'string' && heroDesc.trim()) {
+            summary = heroDesc.trim();
+        }
+    }
     
     return {
         title: state.title,
         slug: state.slug,
         contentBlocks: allBlocks,
-        summary: state.metadata.excerpt,
+        summary: summary,
         // Only save semantic ID (id) and alt - plugin-images handles transform data
         // Only create image object if id exists and is not empty
-        image: state.metadata.featuredImage?.id?.trim() ? {
-            id: state.metadata.featuredImage.id.trim(),
-            alt: state.metadata.featuredImage.alt || '',
-            isCustom: state.metadata.featuredImage.isCustom,
+        image: featuredImage?.id?.trim() ? {
+            id: featuredImage.id.trim(),
+            alt: featuredImage.alt || '',
+            isCustom: featuredImage.isCustom,
             // Don't save transform fields - plugin-images API handles those
         } : undefined,
         categoryTags: {