@jhits/plugin-blog 0.0.14 → 0.0.16

package/src/lib/layouts/blocks/SectionBlock.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Section Block
+ * Full-width wrapper with configurable padding and background
+ */
+import React from 'react';
+import { BlockEditProps, BlockPreviewProps } from '../../../types/block';
+import { Block } from '../../../types/block';
+/**
+ * Section Block Edit Component
+ */
+export declare const SectionEdit: React.FC<BlockEditProps & {
+    childBlocks: Block[];
+    onChildBlockAdd: (type: string, index: number, containerId: string) => void;
+    onChildBlockUpdate: (id: string, data: Partial<Block['data']>, containerId: string) => void;
+    onChildBlockDelete: (id: string, containerId: string) => void;
+    onChildBlockMove: (id: string, newIndex: number, containerId: string) => void;
+}>;
+/**
+ * Section Block Preview Component
+ */
+export declare const SectionPreview: React.FC<BlockPreviewProps & {
+    childBlocks?: Block[];
+    renderChild?: (block: Block) => React.ReactNode;
+}>;
+//# sourceMappingURL=SectionBlock.d.ts.map

package/src/lib/layouts/blocks/SectionBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionBlock.d.ts","sourceRoot":"","sources":["SectionBlock.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAGzE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE7C;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,GAAG;IAChD,WAAW,EAAE,KAAK,EAAE,CAAC;IACrB,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5E,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5F,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9D,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACjF,CA+CI,CAAC;AAEN;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,GAAG;IACtD,WAAW,CAAC,EAAE,KAAK,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,KAAK,CAAC,SAAS,CAAC;CACnD,CAyBA,CAAC"}

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

@@ -0,0 +1,104 @@
+/**
+ * Section Block
+ * Full-width wrapper with configurable padding and background
+ */
+
+'use client';
+
+import React from 'react';
+import { BlockEditProps, BlockPreviewProps } from '../../../types/block';
+import { LayoutContainer } from '../../../views/CanvasEditor/LayoutContainer';
+import { LAYOUT_CONSTANTS, LAYOUT_BACKGROUNDS } from '../index';
+import { Block } from '../../../types/block';
+
+/**
+ * Section Block Edit Component
+ */
+export const SectionEdit: React.FC<BlockEditProps & {
+    childBlocks: Block[];
+    onChildBlockAdd: (type: string, index: number, containerId: string) => void;
+    onChildBlockUpdate: (id: string, data: Partial<Block['data']>, containerId: string) => void;
+    onChildBlockDelete: (id: string, containerId: string) => void;
+    onChildBlockMove: (id: string, newIndex: number, containerId: string) => void;
+}> = ({
+    block,
+    onUpdate,
+    isSelected,
+    childBlocks = [],
+    onChildBlockAdd,
+    onChildBlockUpdate,
+    onChildBlockDelete,
+    onChildBlockMove,
+}) => {
+        const background = (block.data.background as keyof typeof LAYOUT_BACKGROUNDS) || 'DEFAULT';
+
+        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);
+                        }
+                    }
+                }}
+            >
+                {/* Nested Content */}
+                <div className={`px-8 py-4`}>
+                    <LayoutContainer
+                        blocks={childBlocks}
+                        containerId={block.id}
+                        onBlockAdd={onChildBlockAdd}
+                        onBlockUpdate={onChildBlockUpdate}
+                        onBlockDelete={onChildBlockDelete}
+                        onBlockMove={onChildBlockMove}
+                        emptyLabel="Drop blocks into section"
+                    />
+                </div>
+            </div>
+        );
+    };
+
+/**
+ * Section Block Preview Component
+ */
+export const SectionPreview: React.FC<BlockPreviewProps & {
+    childBlocks?: Block[];
+    renderChild?: (block: Block) => React.ReactNode;
+}> = ({ block, childBlocks = [], renderChild, context }) => {
+    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
+        ? childBlocks
+        : (block.children && Array.isArray(block.children) && typeof block.children[0] === 'object'
+            ? block.children as Block[]
+            : []);
+
+    return (
+        <section className={`w-full ${LAYOUT_BACKGROUNDS[background]}`}>
+            <div className={`max-w-7xl mx-auto px-6 py-2`}>
+                {children.length > 0 && renderChild ? (
+                    children.map((childBlock) => (
+                        <React.Fragment key={childBlock.id}>
+                            {renderChild(childBlock)}
+                        </React.Fragment>
+                    ))
+                ) : (
+                    <div className="text-gray-400 text-sm italic">Empty section</div>
+                )}
+            </div>
+        </section>
+    );
+};
+

package/src/lib/layouts/blocks/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Core Layout Blocks
+ * Section and Columns blocks for the Universal Layout System
+ */
+
+export { SectionEdit, SectionPreview } from './SectionBlock';
+export { ColumnsEdit, ColumnsPreview } from './ColumnsBlock';
+

package/src/lib/layouts/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Layout System Constants
+ * Standardized spacing and styling for layout blocks
+ */
+export declare const LAYOUT_CONSTANTS: {
+    readonly GUTTER: "2rem";
+    readonly SPACING: "4rem";
+    readonly SPACING_SM: "2rem";
+    readonly SPACING_LG: "6rem";
+    readonly BORDER_RADIUS: "2rem";
+};
+export declare const LAYOUT_BACKGROUNDS: {
+    readonly DEFAULT: "bg-white";
+    readonly NEUTRAL: "bg-neutral-50";
+    readonly SAGE: "bg-primary/5";
+    readonly CREAM: "bg-amber-50/50";
+};
+export type ColumnLayout = '50-50' | '33-66' | '66-33' | '25-25-25-25' | '25-75' | '75-25';
+export declare const COLUMN_LAYOUTS: Record<ColumnLayout, {
+    grid: string;
+    widths: number[];
+}>;
+//# sourceMappingURL=index.d.ts.map

package/src/lib/layouts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,eAAO,MAAM,gBAAgB;;;;;;CAMnB,CAAC;AAGX,eAAO,MAAM,kBAAkB;;;;;CAKrB,CAAC;AAGX,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa,GAAG,OAAO,GAAG,OAAO,CAAC;AAE3F,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,YAAY,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,EAAE,CAAA;CAAE,CAyBnF,CAAC"}

package/src/lib/layouts/index.ts

@@ -0,0 +1,52 @@
+/**
+ * Layout System Constants
+ * Standardized spacing and styling for layout blocks
+ */
+
+// Spacing Constants (Earth-tone aligned)
+export const LAYOUT_CONSTANTS = {
+    GUTTER: '2rem',      // 32px - Space between columns
+    SPACING: '4rem',     // 64px - Vertical padding for sections
+    SPACING_SM: '2rem',  // 32px - Smaller vertical padding
+    SPACING_LG: '6rem',  // 96px - Larger vertical padding
+    BORDER_RADIUS: '2rem', // 32px - Consistent rounded corners
+} as const;
+
+// Background Colors (Light mode only - matches client website theme)
+export const LAYOUT_BACKGROUNDS = {
+    DEFAULT: 'bg-white',
+    NEUTRAL: 'bg-neutral-50',
+    SAGE: 'bg-primary/5',
+    CREAM: 'bg-amber-50/50',
+} as const;
+
+// Column Layout Presets
+export type ColumnLayout = '50-50' | '33-66' | '66-33' | '25-25-25-25' | '25-75' | '75-25';
+
+export const COLUMN_LAYOUTS: Record<ColumnLayout, { grid: string; widths: number[] }> = {
+    '50-50': {
+        grid: 'grid-cols-2',
+        widths: [50, 50],
+    },
+    '33-66': {
+        grid: 'grid-cols-3',
+        widths: [33, 66],
+    },
+    '66-33': {
+        grid: 'grid-cols-3',
+        widths: [66, 33],
+    },
+    '25-25-25-25': {
+        grid: 'grid-cols-4',
+        widths: [25, 25, 25, 25],
+    },
+    '25-75': {
+        grid: 'grid-cols-4',
+        widths: [25, 75],
+    },
+    '75-25': {
+        grid: 'grid-cols-4',
+        widths: [75, 25],
+    },
+};
+

package/src/lib/layouts/registerLayoutBlocks.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Register Core Layout Blocks
+ * Registers Section and Columns blocks in the block registry
+ */
+/**
+ * Register all core layout blocks
+ */
+export declare function registerLayoutBlocks(): void;
+//# sourceMappingURL=registerLayoutBlocks.d.ts.map

package/src/lib/layouts/registerLayoutBlocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerLayoutBlocks.d.ts","sourceRoot":"","sources":["registerLayoutBlocks.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAOH;;GAEG;AACH,wBAAgB,oBAAoB,SAiDnC"}

package/src/lib/layouts/registerLayoutBlocks.ts

@@ -0,0 +1,64 @@
+/**
+ * Register Core Layout Blocks
+ * Registers Section and Columns blocks in the block registry
+ */
+
+import { blockRegistry } from '../../registry/BlockRegistry';
+import { SectionEdit, SectionPreview } from './blocks/SectionBlock';
+import { ColumnsEdit, ColumnsPreview } from './blocks/ColumnsBlock';
+import { Columns, Square } from 'lucide-react';
+
+/**
+ * Register all core layout blocks
+ */
+export function registerLayoutBlocks() {
+    // Section Block
+    blockRegistry.register({
+        type: 'section',
+        name: 'Section',
+        description: 'Full-width wrapper with configurable padding and background',
+        icon: Square,
+        defaultData: {
+            padding: 'md',
+            background: 'DEFAULT',
+        },
+        category: 'layout',
+        isContainer: true,
+        validate: (data) => {
+            return ['sm', 'md', 'lg'].includes(data.padding as string) &&
+                   ['DEFAULT', 'NEUTRAL', 'SAGE', 'CREAM'].includes(data.background as string);
+        },
+        components: {
+            Edit: SectionEdit as any,
+            Preview: SectionPreview as any,
+            Icon: Square,
+        },
+    });
+
+    // Columns Block
+    blockRegistry.register({
+        type: 'columns',
+        name: 'Columns',
+        description: 'Flex/grid container with configurable column layouts (50/50, 33/66, etc.)',
+        icon: Columns,
+        defaultData: {
+            columnCount: 2, // Start with 2 columns, can be dynamically added/removed
+            columnWidths: [50, 50], // Equal width columns by default
+        },
+        category: 'layout',
+        isContainer: true,
+        validate: (data) => {
+            // Support both new dynamic system (columnCount) and legacy layout system
+            if (data.columnCount !== undefined) {
+                return typeof data.columnCount === 'number' && data.columnCount > 0 && data.columnCount <= 6;
+            }
+            return ['50-50', '33-66', '66-33', '25-25-25-25', '25-75', '75-25'].includes(data.layout as string);
+        },
+        components: {
+            Edit: ColumnsEdit as any,
+            Preview: ColumnsPreview as any,
+            Icon: Columns,
+        },
+    });
+}
+

package/src/lib/mappers/apiMapper.d.ts

@@ -0,0 +1,66 @@
+/**
+ * API Mapper
+ * Converts between API format (MongoDB) and BlogPost format
+ */
+import { BlogPost, PostStatus, SEOMetadata, PostMetadata } from '../../types/post';
+import { Block } from '../../types/block';
+/**
+ * API Blog Document Format (from MongoDB)
+ */
+export interface APIBlogDocument {
+    _id?: string;
+    id?: string;
+    title: string;
+    slug: string;
+    contentBlocks?: Block[];
+    content?: any[];
+    summary?: string;
+    image?: {
+        id?: string;
+        src?: string;
+        alt?: string;
+        isCustom?: boolean;
+    };
+    categoryTags?: {
+        category?: string;
+        tags?: string[];
+    };
+    publicationData?: {
+        status?: PostStatus | 'concept';
+        date?: string | Date;
+    };
+    seo?: {
+        title?: string;
+        description?: string;
+        keywords?: string[];
+        ogImage?: string;
+        canonicalUrl?: string;
+    };
+    authorId?: string;
+    createdAt?: string | Date;
+    updatedAt?: string | Date;
+}
+/**
+ * Convert API document to BlogPost format
+ */
+export declare function apiToBlogPost(doc: APIBlogDocument): BlogPost;
+/**
+ * Convert BlogPost to API document format
+ */
+export declare function blogPostToAPI(post: BlogPost, authorId?: string): Partial<APIBlogDocument>;
+/**
+ * Convert EditorState to API format for saving
+ * @param state - Editor state
+ * @param authorId - Optional author ID
+ * @param heroBlock - Optional hero block (stored separately from content blocks)
+ */
+export declare function editorStateToAPI(state: {
+    title: string;
+    slug: string;
+    blocks: Block[];
+    seo: SEOMetadata;
+    metadata: PostMetadata;
+    status: PostStatus;
+    postId?: string | null;
+}, authorId?: string, heroBlock?: Block | null): Partial<APIBlogDocument>;
+//# sourceMappingURL=apiMapper.d.ts.map

package/src/lib/mappers/apiMapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"apiMapper.d.ts","sourceRoot":"","sources":["apiMapper.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACnF,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C;;GAEG;AACH,MAAM,WAAW,eAAe;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,KAAK,EAAE,CAAC;IACxB,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE;QACJ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,OAAO,CAAC;KAGtB,CAAC;IACF,YAAY,CAAC,EAAE;QACX,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;KACnB,CAAC;IACF,eAAe,CAAC,EAAE;QACd,MAAM,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;QAChC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;KACxB,CAAC;IACF,GAAG,CAAC,EAAE;QACF,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;QACpB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,YAAY,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC;IACF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,eAAe,GAAG,QAAQ,CAmE5D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,eAAe,CAAC,CAgCzF;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,GAAG,EAAE,WAAW,CAAC;IACjB,QAAQ,EAAE,YAAY,CAAC;IACvB,MAAM,EAAE,UAAU,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,OAAO,CAAC,eAAe,CAAC,CAkFxE"}

package/src/lib/mappers/apiMapper.ts

@@ -0,0 +1,254 @@
+/**
+ * API Mapper
+ * Converts between API format (MongoDB) and BlogPost format
+ */
+
+import { BlogPost, PostStatus, SEOMetadata, PostMetadata } from '../../types/post';
+import { Block } from '../../types/block';
+
+/**
+ * API Blog Document Format (from MongoDB)
+ */
+export interface APIBlogDocument {
+    _id?: string;
+    id?: string;
+    title: string;
+    slug: string;
+    contentBlocks?: Block[]; // New block-based format
+    content?: any[]; // Legacy format
+    summary?: string;
+    image?: {
+        id?: string; // Semantic ID (preferred) - plugin-images handles everything else
+        src?: string; // Legacy support - will be converted to id when loading
+        alt?: string;
+        isCustom?: boolean;
+        // Transform fields (brightness, blur, scale, positionX, positionY) are NOT stored here
+        // They are handled by plugin-images API only
+    };
+    categoryTags?: {
+        category?: string;
+        tags?: string[];
+    };
+    publicationData?: {
+        status?: PostStatus | 'concept'; // API uses 'concept' instead of 'draft'
+        date?: string | Date;
+    };
+    seo?: {
+        title?: string;
+        description?: string;
+        keywords?: string[];
+        ogImage?: string;
+        canonicalUrl?: string;
+    };
+    authorId?: string;
+    createdAt?: string | Date;
+    updatedAt?: string | Date;
+}
+
+/**
+ * Convert API document to BlogPost format
+ */
+export function apiToBlogPost(doc: APIBlogDocument): BlogPost {
+    const id = doc._id?.toString() || doc.id || '';
+    
+    // Use contentBlocks if available, otherwise fallback to content (legacy)
+    // Hero block is included in contentBlocks
+    const blocks = doc.contentBlocks || [];
+    
+    // Convert publication data
+    const publicationDate = doc.publicationData?.date 
+        ? (typeof doc.publicationData.date === 'string' 
+            ? doc.publicationData.date 
+            : doc.publicationData.date.toISOString())
+        : undefined;
+    
+    // Convert SEO data
+    const seo: SEOMetadata = {
+        title: doc.seo?.title,
+        description: doc.seo?.description,
+        keywords: doc.seo?.keywords,
+        ogImage: doc.seo?.ogImage,
+        canonicalUrl: doc.seo?.canonicalUrl,
+    };
+    
+    // Convert metadata
+    // Only store semantic ID (id) and alt - plugin-images handles everything else
+    const metadata: PostMetadata = {
+        featuredImage: doc.image ? {
+            // Prefer id (semantic ID) over src (legacy)
+            id: doc.image.id || doc.image.src,
+            alt: doc.image.alt,
+            isCustom: doc.image.isCustom,
+            // Don't load transform fields - plugin-images handles those
+        } : undefined,
+        categories: doc.categoryTags?.category ? [doc.categoryTags.category] : [],
+        tags: doc.categoryTags?.tags || [],
+        excerpt: doc.summary,
+        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;
+    
+    const publication = {
+        status: normalizedStatus as PostStatus,
+        date: publicationDate,
+        authorId: doc.authorId,
+        updatedAt: doc.updatedAt 
+            ? (typeof doc.updatedAt === 'string' ? doc.updatedAt : doc.updatedAt.toISOString())
+            : undefined,
+    };
+    
+    return {
+        id,
+        title: doc.title,
+        slug: doc.slug,
+        blocks,
+        seo,
+        publication,
+        metadata,
+        createdAt: doc.createdAt 
+            ? (typeof doc.createdAt === 'string' ? doc.createdAt : doc.createdAt.toISOString())
+            : new Date().toISOString(),
+        updatedAt: doc.updatedAt 
+            ? (typeof doc.updatedAt === 'string' ? doc.updatedAt : doc.updatedAt.toISOString())
+            : new Date().toISOString(),
+    };
+}
+
+/**
+ * Convert BlogPost to API document format
+ */
+export function blogPostToAPI(post: BlogPost, authorId?: string): Partial<APIBlogDocument> {
+    return {
+        title: post.title,
+        slug: post.slug,
+        contentBlocks: post.blocks, // Use new block format
+        summary: post.metadata.excerpt,
+        // Only save semantic ID (id) and alt - plugin-images handles transform data
+        image: post.metadata.featuredImage ? {
+            id: post.metadata.featuredImage.id,
+            alt: post.metadata.featuredImage.alt,
+            isCustom: post.metadata.featuredImage.isCustom,
+            // Don't save transform fields - plugin-images API handles those
+        } : undefined,
+        categoryTags: {
+            category: post.metadata.categories?.[0] || '',
+            tags: post.metadata.tags || [],
+        },
+        publicationData: {
+            // API uses 'concept' instead of 'draft'
+            status: post.publication.status === 'draft' ? 'concept' : post.publication.status,
+            date: post.publication.date ? new Date(post.publication.date) : new Date(),
+        },
+        seo: {
+            title: post.seo.title,
+            description: post.seo.description,
+            keywords: post.seo.keywords,
+            ogImage: post.seo.ogImage,
+            canonicalUrl: post.seo.canonicalUrl,
+        },
+        authorId: authorId || post.publication.authorId,
+        updatedAt: new Date(),
+    };
+}
+
+/**
+ * Convert EditorState to API format for saving
+ * @param state - Editor state
+ * @param authorId - Optional author ID
+ * @param heroBlock - Optional hero block (stored separately from content blocks)
+ */
+export function editorStateToAPI(state: {
+    title: string;
+    slug: string;
+    blocks: Block[];
+    seo: SEOMetadata;
+    metadata: PostMetadata;
+    status: PostStatus;
+    postId?: string | null;
+}, authorId?: string, heroBlock?: Block | null): Partial<APIBlogDocument> {
+    // 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;
+    if (state.metadata.categories && state.metadata.categories.length > 0 && state.metadata.categories[0]?.trim()) {
+        category = state.metadata.categories[0].trim();
+    } else {
+        // Check hero block for category - use the passed heroBlock parameter first, then check state.blocks
+        const heroBlockToCheck = heroBlock || state.blocks.find(block => block.type === 'hero');
+        if (heroBlockToCheck && heroBlockToCheck.data && typeof heroBlockToCheck.data === 'object') {
+            const heroCategory = (heroBlockToCheck.data as any).category;
+            if (heroCategory && typeof heroCategory === 'string' && heroCategory.trim()) {
+                category = heroCategory.trim();
+            }
+        }
+    }
+    
+    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;
+    
+    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,
+    });
+    
+    return {
+        title: state.title,
+        slug: state.slug,
+        contentBlocks: allBlocks,
+        summary: state.metadata.excerpt,
+        // 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,
+            // Don't save transform fields - plugin-images API handles those
+        } : undefined,
+        categoryTags: {
+            category: category,
+            tags: state.metadata.tags || [],
+        },
+        publicationData: {
+            status: apiStatus,
+            date: new Date(),
+        },
+        seo: {
+            title: state.seo.title,
+            description: state.seo.description,
+            keywords: state.seo.keywords,
+            ogImage: state.seo.ogImage,
+            canonicalUrl: state.seo.canonicalUrl,
+        },
+        authorId,
+        updatedAt: new Date(),
+    };
+}
+

package/src/lib/migration/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Migration utilities exports
+ */
+
+export * from './mapper';
+