@jhits/plugin-blog 0.0.5 → 0.0.7

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

@@ -6,6 +6,7 @@
 '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';
@@ -30,9 +31,45 @@ export const ColumnsEdit: React.FC<BlockEditProps & {
     onChildBlockDelete,
     onChildBlockMove,
 }) => {
-        const layout = (block.data.layout as ColumnLayout) || '50-50';
-        const layoutConfig = COLUMN_LAYOUTS[layout];
-        const numColumns = layoutConfig.widths.length;
+        // 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 }, () => []);
@@ -47,14 +84,72 @@ export const ColumnsEdit: React.FC<BlockEditProps & {
             }
         });
 
+        // 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,
+            });
+        };
+
         return (
-            <div className="rounded-xl bg-white">
+            <div className="rounded-xl bg-white relative">
                 {/* Column Grid */}
-                <div className={`grid ${layoutConfig.grid} gap-8 p-6`}>
+                <div 
+                    className="grid gap-8 p-6"
+                    style={{
+                        gridTemplateColumns: currentWidths.map(w => `${w}%`).join(' '),
+                    }}
+                >
                     {Array.from({ length: numColumns }).map((_, colIndex) => (
                         <div
                             key={colIndex}
-                            className={`min-h-[200px] rounded-xl border border-dashed transition-all ${isSelected
+                            className={`group/col min-h-[200px] rounded-xl border border-dashed transition-all relative ${isSelected
                                 ? 'border-primary/20'
                                 : 'border-gray-200/50'
                                 }`}
@@ -64,9 +159,25 @@ export const ColumnsEdit: React.FC<BlockEditProps & {
                                     <span className="text-[10px] font-black uppercase tracking-widest text-gray-400">
                                         Column {colIndex + 1}
                                     </span>
-                                    <span className="text-[9px] text-gray-500">
-                                        {layoutConfig.widths[colIndex]}%
-                                    </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>
 
                                 <LayoutContainer
@@ -82,6 +193,17 @@ export const ColumnsEdit: React.FC<BlockEditProps & {
                         </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>
         );
     };
@@ -93,9 +215,46 @@ export const ColumnsPreview: React.FC<BlockPreviewProps & {
     childBlocks?: Block[];
     renderChild?: (block: Block) => React.ReactNode;
 }> = ({ block, childBlocks = [], renderChild, context }) => {
-    const layout = (block.data.layout as ColumnLayout) || '50-50';
-    const layoutConfig = COLUMN_LAYOUTS[layout];
-    const numColumns = layoutConfig.widths.length;
+    // 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;
+    
+    // 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;
+    
+    if (columnCount !== undefined && columnCount > 0) {
+        // Dynamic column system
+        numColumns = columnCount;
+        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;
+    } else {
+        // Default to 2 columns
+        numColumns = 2;
+        gridClass = 'grid-cols-2';
+    }
+    
+    // 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
@@ -118,7 +277,12 @@ export const ColumnsPreview: React.FC<BlockPreviewProps & {
     });
 
     return (
-        <div className={`grid ${layoutConfig.grid} gap-8 my-8`}>
+        <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) => (

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

@@ -0,0 +1,81 @@
+/**
+ * Columns Block
+ * Flex/grid container with configurable column layouts
+ */
+
+'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';
+import { Block } from '../../../types/block';
+
+/**
+ * Columns Block Edit Component
+ */
+export const ColumnsEdit: React.FC<BlockEditProps & {
+    childBlocks: Block[];
+    onChildBlockAdd: (type: string, index: number, containerId: string) => void;
+    onChildBlockDelete: (blockId: string) => void;
+    onChildBlockMove: (blockId: string, newIndex: number) => void;
+}> = ({
+    block,
+    childBlocks,
+    onChildBlockAdd,
+    onChildBlockDelete,
+    onChildBlockMove,
+}) => {
+        // 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) => {
+            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);
+                columns[index % numColumns].push(childBlock);
+            }
+        });

package/src/lib/layouts/registerLayoutBlocks.ts

@@ -42,11 +42,16 @@ export function registerLayoutBlocks() {
         description: 'Flex/grid container with configurable column layouts (50/50, 33/66, etc.)',
         icon: Columns,
         defaultData: {
-            layout: '50-50',
+            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: {

package/src/lib/mappers/apiMapper.ts

@@ -18,10 +18,12 @@ export interface APIBlogDocument {
     content?: any[]; // Legacy format
     summary?: string;
     image?: {
-        src?: string;
+        id?: string; // Semantic ID (preferred) - plugin-images handles everything else
+        src?: string; // Legacy support - will be converted to id when loading
         alt?: string;
-        brightness?: number;
-        blur?: number;
+        isCustom?: boolean;
+        // Transform fields (brightness, blur, scale, positionX, positionY) are NOT stored here
+        // They are handled by plugin-images API only
     };
     categoryTags?: {
         category?: string;
@@ -50,6 +52,7 @@ 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
@@ -69,12 +72,14 @@ export function apiToBlogPost(doc: APIBlogDocument): BlogPost {
     };
     
     // Convert metadata
+    // Only store semantic ID (id) and alt - plugin-images handles everything else
     const metadata: PostMetadata = {
         featuredImage: doc.image ? {
-            src: doc.image.src,
+            // Prefer id (semantic ID) over src (legacy)
+            id: doc.image.id || doc.image.src,
             alt: doc.image.alt,
-            brightness: doc.image.brightness,
-            blur: doc.image.blur,
+            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 || [],
@@ -121,11 +126,12 @@ export function blogPostToAPI(post: BlogPost, authorId?: string): Partial<APIBlo
         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 ? {
-            src: post.metadata.featuredImage.src,
+            id: post.metadata.featuredImage.id,
             alt: post.metadata.featuredImage.alt,
-            brightness: post.metadata.featuredImage.brightness,
-            blur: post.metadata.featuredImage.blur,
+            isCustom: post.metadata.featuredImage.isCustom,
+            // Don't save transform fields - plugin-images API handles those
         } : undefined,
         categoryTags: {
             category: post.metadata.categories?.[0] || '',
@@ -150,6 +156,9 @@ export function blogPostToAPI(post: BlogPost, authorId?: string): Partial<APIBlo
 
 /**
  * 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;
@@ -159,7 +168,7 @@ export function editorStateToAPI(state: {
     metadata: PostMetadata;
     status: PostStatus;
     postId?: string | null;
-}, authorId?: string): Partial<APIBlogDocument> {
+}, 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;
     
@@ -174,10 +183,10 @@ export function editorStateToAPI(state: {
     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
-        const heroBlock = state.blocks.find(block => block.type === 'hero');
-        if (heroBlock && heroBlock.data && typeof heroBlock.data === 'object') {
-            const heroCategory = (heroBlock.data as any).category;
+        // 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();
             }
@@ -186,20 +195,42 @@ export function editorStateToAPI(state: {
     
     console.log('[editorStateToAPI] Category resolution:', {
         fromMetadata: state.metadata.categories?.[0],
-        fromHeroBlock: state.blocks.find(b => b.type === 'hero')?.data ? (state.blocks.find(b => b.type === 'hero')!.data as any).category : undefined,
-        finalCategory: category
+        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: state.blocks,
+        contentBlocks: allBlocks,
         summary: state.metadata.excerpt,
-        image: state.metadata.featuredImage ? {
-            src: state.metadata.featuredImage.src,
-            alt: state.metadata.featuredImage.alt,
-            brightness: state.metadata.featuredImage.brightness,
-            blur: state.metadata.featuredImage.blur,
+        // 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,

package/src/registry/BlockRegistry.ts

@@ -35,10 +35,7 @@ class BlockRegistryImpl implements IBlockRegistry {
             );
         }
 
-        if (this._types.has(definition.type)) {
-            console.warn(`Block type "${definition.type}" is already registered. Overwriting...`);
-        }
-        
+        // Silently overwrite if already registered (expected in React 18 Strict Mode)
         this._types.set(definition.type, definition);
     }
 

package/src/state/EditorContext.tsx

@@ -26,7 +26,7 @@ export interface EditorProviderProps {
     /** Initial state (optional) */
     initialState?: Partial<EditorState>;
     /** Callback when save is triggered */
-    onSave?: (state: EditorState) => Promise<void>;
+    onSave?: (state: EditorState, heroBlock?: Block | null) => Promise<void>;
     /** 
      * Custom blocks from client application
      * These blocks will be registered in the BlockRegistry on mount
@@ -56,29 +56,19 @@ export function EditorProvider({
     darkMode = true,
     backgroundColors
 }: EditorProviderProps) {
-    console.log('[EditorProvider] Rendering with darkMode:', darkMode);
-    
     // Register core layout blocks on mount
     useEffect(() => {
-        console.log('[EditorContext] Registering layout blocks...');
         registerLayoutBlocks();
-        const layoutBlocks = blockRegistry.getByCategory('layout');
-        console.log('[EditorContext] Layout blocks registered:', layoutBlocks.length, layoutBlocks.map(b => b.type));
     }, []);
 
     // Register client blocks on mount
     useEffect(() => {
         if (customBlocks && customBlocks.length > 0) {
             try {
-                console.log('[EditorContext] Registering custom blocks:', customBlocks.length, customBlocks.map(b => b.type));
                 blockRegistry.registerClientBlocks(customBlocks);
-                const allBlocks = blockRegistry.getAll();
-                console.log('[EditorContext] Total blocks after registration:', allBlocks.length, allBlocks.map(b => b.type));
             } catch (error) {
                 console.error('[EditorContext] Failed to register custom blocks:', error);
             }
-        } else {
-            console.log('[EditorContext] No custom blocks provided');
         }
     }, [customBlocks]);
 
@@ -98,33 +88,50 @@ export function EditorProvider({
     const MAX_HISTORY = 50; // Limit history to prevent memory issues
 
     // Save current state to history after state changes (but not during undo/redo)
+    // Debounce history updates to avoid excessive re-renders
+    const historyTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+    
     useEffect(() => {
         if (isRestoringRef.current) {
             isRestoringRef.current = false;
             return;
         }
 
-        // Save current state to history
-        setHistory(prev => {
-            const newHistory = [...prev];
-            // Remove any future history if we're not at the end
-            if (historyIndex < newHistory.length - 1) {
-                newHistory.splice(historyIndex + 1);
-            }
-            // Add current state
-            newHistory.push({ ...state });
-            // Limit history size
-            if (newHistory.length > MAX_HISTORY) {
-                newHistory.shift();
+        // Clear existing timeout
+        if (historyTimeoutRef.current) {
+            clearTimeout(historyTimeoutRef.current);
+        }
+
+        // Debounce history updates to reduce re-renders
+        historyTimeoutRef.current = setTimeout(() => {
+            // Save current state to history
+            setHistory(prev => {
+                const newHistory = [...prev];
+                // Remove any future history if we're not at the end
+                if (historyIndex < newHistory.length - 1) {
+                    newHistory.splice(historyIndex + 1);
+                }
+                // Add current state
+                newHistory.push({ ...state });
+                // Limit history size
+                if (newHistory.length > MAX_HISTORY) {
+                    newHistory.shift();
+                    return newHistory;
+                }
                 return newHistory;
+            });
+            setHistoryIndex(prev => {
+                const newIndex = prev + 1;
+                return newIndex >= MAX_HISTORY ? MAX_HISTORY - 1 : newIndex;
+            });
+        }, 300); // Debounce by 300ms
+
+        return () => {
+            if (historyTimeoutRef.current) {
+                clearTimeout(historyTimeoutRef.current);
             }
-            return newHistory;
-        });
-        setHistoryIndex(prev => {
-            const newIndex = prev + 1;
-            return newIndex >= MAX_HISTORY ? MAX_HISTORY - 1 : newIndex;
-        });
-    }, [state.blocks, state.title, state.slug, state.seo, state.metadata, state.status]);
+        };
+    }, [state.blocks, state.title, state.slug, state.seo, state.metadata, state.status, historyIndex]);
 
     // Helper: Add a new block (supports nested containers)
     const addBlock = useCallback((type: string, index?: number, containerId?: string) => {
@@ -176,12 +183,11 @@ export function EditorProvider({
 
     // Helper: Save
     // Uses stateRef to always get the latest state, avoiding stale closure issues
-    const save = useCallback(async () => {
+    const save = useCallback(async (heroBlock?: Block | null) => {
         if (onSave) {
             // Use stateRef.current to get the absolute latest state
             // This ensures we don't have stale closure issues with React state updates
-            console.log('[EditorContext] save() called with status:', stateRef.current.status);
-            await onSave(stateRef.current);
+            await onSave(stateRef.current, heroBlock);
             dispatch({ type: 'MARK_CLEAN' });
         }
     }, [onSave]);

package/src/state/types.ts

@@ -118,7 +118,7 @@ export interface EditorContextValue {
         resetEditor: () => void;
         
         /** Save current state (triggers save callback) */
-        save: () => Promise<void>;
+        save: (heroBlock?: Block | null) => Promise<void>;
         
         /** Undo last action */
         undo: () => void;

package/src/types/index.ts

@@ -13,3 +13,5 @@ export type {
     ClientBlockDefinition,
 } from './block';
 
+
+export type { BlockRegistry } from './block';

package/src/types/post.ts

@@ -75,6 +75,10 @@ export interface PostMetadata {
         alt?: string;
         brightness?: number; // 0-200, 100 = normal
         blur?: number; // 0-20
+        scale?: number; // 0.1-3.0, 1.0 = normal
+        positionX?: number; // -100 to 100, 0 = center
+        positionY?: number; // -100 to 100, 0 = center
+        isCustom?: boolean; // true if edited independently from hero image
     };
     
     /** Categories */