@jhits/plugin-blog 0.0.1

package/src/views/CanvasEditor/CanvasEditorView.tsx

@@ -0,0 +1,917 @@
+'use client';
+
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import {
+    Globe,
+    Image as ImageIcon, Library,
+    LayoutTemplate, Type,
+    Box,
+    Search,
+    AlertTriangle, X
+} from 'lucide-react';
+import { useEditor } from '../../state/EditorContext';
+import { EditorBody } from './EditorBody';
+import { BlockWrapper } from './BlockWrapper';
+import { EditorHeader } from './EditorHeader';
+import { blockRegistry } from '../../registry/BlockRegistry';
+import { BlockRenderer } from '../../lib/blocks/BlockRenderer';
+import { Block } from '../../types/block';
+import { apiToBlogPost, type APIBlogDocument } from '../../lib/mappers/apiMapper';
+import {
+    LibraryItem,
+    CustomBlockItem,
+    FeaturedMediaSection,
+    PrivacySettingsSection
+} from './components';
+
+// Generate a unique block ID
+function generateBlockId(): string {
+    if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+        return crypto.randomUUID();
+    }
+    return `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+
+
+export interface CanvasEditorViewProps {
+    postId?: string;
+    siteId: string;
+    locale: string;
+    /** Enable dark mode for content area and wrappers (default: true) */
+    darkMode?: boolean;
+    /** Background colors for the editor */
+    backgroundColors?: {
+        light: string;
+        dark?: string;
+    };
+}
+
+export function CanvasEditorView({ postId, darkMode, backgroundColors: propsBackgroundColors, siteId, locale }: CanvasEditorViewProps) {
+    const { state, helpers, dispatch, darkMode: contextDarkMode, backgroundColors: contextBackgroundColors, canUndo, canRedo } = useEditor();
+    const effectiveDarkMode = darkMode !== undefined ? darkMode : contextDarkMode;
+    const effectiveBackgroundColors = propsBackgroundColors || contextBackgroundColors;
+    const [isSidebarOpen, setSidebarOpen] = useState(true);
+    const [isLibraryOpen, setLibraryOpen] = useState(true);
+    const [isPreviewMode, setIsPreviewMode] = useState(false);
+    const [isLoadingPost, setIsLoadingPost] = useState(false);
+    const [isSaving, setIsSaving] = useState(false);
+    const [saveError, setSaveError] = useState<string | null>(null);
+    const titleRef = useRef<HTMLTextAreaElement>(null);
+
+    // Load post when postId (slug) is provided
+    useEffect(() => {
+        if (postId && !state.postId) {
+            const loadPost = async () => {
+                try {
+                    setIsLoadingPost(true);
+                    const response = await fetch(`/api/plugin-blog/${postId}`);
+                    if (!response.ok) {
+                        throw new Error('Failed to load post');
+                    }
+                    const apiDoc: APIBlogDocument = await response.json();
+                    console.log('[CanvasEditorView] Loaded API document:', {
+                        title: apiDoc.title,
+                        slug: apiDoc.slug,
+                        contentBlocksCount: apiDoc.contentBlocks?.length || 0,
+                        contentBlocks: apiDoc.contentBlocks?.map((b: any) => ({ id: b.id, type: b.type })) || [],
+                        hasContent: !!apiDoc.contentBlocks,
+                        hasLegacyContent: !!apiDoc.content,
+                    });
+                    const blogPost = apiToBlogPost(apiDoc);
+                    console.log('[CanvasEditorView] Converted to BlogPost:', {
+                        id: blogPost.id,
+                        title: blogPost.title,
+                        blocksCount: blogPost.blocks.length,
+                        blocks: blogPost.blocks.map(b => ({ id: b.id, type: b.type })),
+                    });
+                    helpers.loadPost(blogPost);
+                } catch (error) {
+                    console.error('Failed to load post:', error);
+                    alert('Failed to load post. Please try again.');
+                } finally {
+                    setIsLoadingPost(false);
+                }
+            };
+            loadPost();
+        }
+    }, [postId, state.postId, helpers]);
+
+    // Reactive state for registered blocks (updates when registry changes)
+    const [registeredBlocks, setRegisteredBlocks] = useState(() => {
+        const initial = blockRegistry.getAll();
+        console.log('[CanvasEditorView] Initial blocks:', initial.length, initial.map(b => b.type));
+        return initial;
+    });
+
+    // Watch for registry changes and update state
+    useEffect(() => {
+        // Check immediately
+        const checkBlocks = () => {
+            const currentBlocks = blockRegistry.getAll();
+            const hasChanged = currentBlocks.length !== registeredBlocks.length ||
+                currentBlocks.some((b, i) => b.type !== registeredBlocks[i]?.type) ||
+                registeredBlocks.some((b, i) => b.type !== currentBlocks[i]?.type);
+
+            if (hasChanged) {
+                console.log('[CanvasEditorView] Blocks updated:', currentBlocks.length, currentBlocks.map(b => `${b.type}(${b.category})`));
+                setRegisteredBlocks([...currentBlocks]);
+            }
+        };
+
+        // Initial check
+        checkBlocks();
+
+        // Poll for registry changes (blocks are registered asynchronously in useEffect)
+        // Use a shorter interval initially, then longer
+        let pollCount = 0;
+        const interval = setInterval(() => {
+            pollCount++;
+            checkBlocks();
+            // Stop polling after 5 seconds (25 checks at 200ms)
+            if (pollCount > 25) {
+                clearInterval(interval);
+            }
+        }, 200);
+
+        // Also check after delays to catch initial registrations
+        const timeouts = [
+            setTimeout(checkBlocks, 50),
+            setTimeout(checkBlocks, 100),
+            setTimeout(checkBlocks, 300),
+            setTimeout(checkBlocks, 500),
+            setTimeout(checkBlocks, 1000),
+        ];
+
+        return () => {
+            clearInterval(interval);
+            timeouts.forEach(clearTimeout);
+        };
+    }, [registeredBlocks.length]);
+
+
+    // Get Hero block definition from registered blocks (REQUIRED)
+    const heroBlockDefinition = useMemo(() => {
+        return blockRegistry.get('hero');
+    }, [registeredBlocks]);
+
+    // Hero block state - separate from content blocks (statically positioned at top)
+    const [heroBlock, setHeroBlock] = useState<Block | null>(null);
+
+    // Initialize hero block if Hero block definition exists
+    useEffect(() => {
+        if (heroBlockDefinition) {
+            // Get default data from block definition
+            const heroData = heroBlockDefinition.defaultData || {};
+
+            // Initialize hero block only if it doesn't exist yet
+            setHeroBlock(prev => {
+                if (!prev) {
+                    // Initialize hero block from editor state (if editing existing post) or use defaults
+                    const initialData = {
+                        ...heroData,
+                        title: state.title || heroData.title || '',
+                        summary: state.metadata.excerpt || heroData.summary || '',
+                        image: state.metadata.featuredImage ? {
+                            src: state.metadata.featuredImage.src,
+                            alt: state.metadata.featuredImage.alt,
+                            brightness: state.metadata.featuredImage.brightness,
+                            blur: state.metadata.featuredImage.blur,
+                        } : heroData.image,
+                    };
+                    return {
+                        id: generateBlockId(),
+                        type: 'hero',
+                        data: initialData,
+                    };
+                }
+                // Keep existing hero block data - let the Edit component manage it
+                return prev;
+            });
+        } else {
+            setHeroBlock(null);
+        }
+    }, [heroBlockDefinition]);
+
+    // Sync hero block with editor state when post is loaded (for existing posts)
+    useEffect(() => {
+        if (heroBlock && heroBlockDefinition && state.postId) {
+            // Only update if the hero block data doesn't match the editor state
+            // This prevents overwriting user edits with stale data
+            const currentTitle = (heroBlock.data as any)?.title || '';
+            const currentSummary = (heroBlock.data as any)?.summary || '';
+            const currentImage = (heroBlock.data as any)?.image;
+            const currentCategory = (heroBlock.data as any)?.category || '';
+
+            const stateTitle = state.title || '';
+            const stateSummary = state.metadata.excerpt || '';
+            const stateImage = state.metadata.featuredImage;
+            const stateCategory = state.metadata.categories?.[0] || '';
+
+            // Check if hero block is out of sync with editor state
+            const titleMismatch = currentTitle !== stateTitle;
+            const summaryMismatch = currentSummary !== stateSummary;
+            const imageMismatch = !currentImage && stateImage ||
+                currentImage?.src !== stateImage?.src ||
+                currentImage?.alt !== stateImage?.alt ||
+                currentImage?.brightness !== stateImage?.brightness ||
+                currentImage?.blur !== stateImage?.blur;
+            const categoryMismatch = currentCategory !== stateCategory;
+
+            // Only update if there's a mismatch and the editor state has data (post was loaded)
+            if ((titleMismatch || summaryMismatch || imageMismatch || categoryMismatch) && (stateTitle || stateSummary || stateImage || stateCategory)) {
+                setHeroBlock({
+                    ...heroBlock,
+                    data: {
+                        ...heroBlock.data,
+                        title: stateTitle || (heroBlock.data as any)?.title || '',
+                        summary: stateSummary || (heroBlock.data as any)?.summary || '',
+                        image: stateImage ? {
+                            src: stateImage.src,
+                            alt: stateImage.alt,
+                            brightness: stateImage.brightness,
+                            blur: stateImage.blur,
+                        } : (heroBlock.data as any)?.image,
+                        category: stateCategory || (heroBlock.data as any)?.category || '',
+                    },
+                });
+            }
+        }
+    }, [state.postId, state.title, state.metadata.excerpt, state.metadata.featuredImage, state.metadata.categories, heroBlockDefinition]);
+
+    // Listen for hero title updates from HeroBlock (if it dispatches events)
+    useEffect(() => {
+        const handleHeroTitleUpdate = (e: CustomEvent) => {
+            dispatch({ type: 'SET_TITLE', payload: e.detail });
+        };
+        window.addEventListener('hero-title-update', handleHeroTitleUpdate as EventListener);
+        return () => window.removeEventListener('hero-title-update', handleHeroTitleUpdate as EventListener);
+    }, [dispatch]);
+
+    // Remove any hero blocks from the content blocks array
+    useEffect(() => {
+        const heroBlocksInContent = state.blocks.filter(b => b.type === 'hero');
+        if (heroBlocksInContent.length > 0) {
+            heroBlocksInContent.forEach(block => {
+                dispatch({ type: 'DELETE_BLOCK', payload: { id: block.id } });
+            });
+        }
+    }, [state.blocks, dispatch]);
+
+    // Filter out hero blocks from content blocks
+    const contentBlocks = state.blocks.filter(b => b.type !== 'hero');
+
+    // Get all registered blocks from state (excluding Hero block from sidebar)
+    const allBlocks = registeredBlocks.filter(block => block.type !== 'hero');
+    const textBlocks = allBlocks.filter(block => block.category === 'text');
+    const customBlocks = allBlocks.filter(block => block.category === 'custom');
+    const mediaBlocks = allBlocks.filter(block => block.category === 'media');
+    const layoutBlocks = allBlocks.filter(block => block.category === 'layout');
+
+    // Handler to add block at the bottom when clicking (not dragging)
+    const handleAddBlockAtBottom = (blockType: string) => {
+        // Add at the end of content blocks (excluding hero)
+        helpers.addBlock(blockType, contentBlocks.length, undefined);
+    };
+
+    // Handle Title Auto-resize
+    useEffect(() => {
+        if (titleRef.current) {
+            titleRef.current.style.height = 'auto';
+            titleRef.current.style.height = `${titleRef.current.scrollHeight}px`;
+        }
+    }, [state.title]);
+
+    // Keyboard shortcuts: Ctrl+V to paste, Ctrl+Z to undo, Ctrl+Shift+Z/Ctrl+Y to redo
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            // Don't handle shortcuts if user is typing in an input/textarea/contentEditable
+            const target = e.target as HTMLElement;
+            const isEditableElement = target.tagName === 'INPUT' ||
+                target.tagName === 'TEXTAREA' ||
+                target.isContentEditable ||
+                target.closest('input, textarea, [contenteditable="true"]');
+
+            // Check for Ctrl+Z / Cmd+Z (Undo)
+            if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
+                if (!isEditableElement) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (canUndo) {
+                        helpers.undo();
+                    }
+                    return;
+                }
+            }
+
+            // Check for Ctrl+Shift+Z / Cmd+Shift+Z or Ctrl+Y / Cmd+Y (Redo)
+            if (((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'z') || ((e.ctrlKey || e.metaKey) && e.key === 'y')) {
+                if (!isEditableElement) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (canRedo) {
+                        helpers.redo();
+                    }
+                    return;
+                }
+            }
+
+            // Check for Ctrl+V (Windows/Linux) or Cmd+V (Mac)
+            if ((e.ctrlKey || e.metaKey) && e.key === 'v') {
+                // Don't paste if user is typing in an input/textarea/contentEditable
+                const target = e.target as HTMLElement;
+                const isEditableElement = target.tagName === 'INPUT' ||
+                    target.tagName === 'TEXTAREA' ||
+                    target.isContentEditable ||
+                    target.closest('input, textarea, [contenteditable="true"]');
+
+                if (isEditableElement) {
+                    return; // Let the browser handle paste in editable elements
+                }
+
+                // Check if there's a copied block
+                if (typeof window !== 'undefined') {
+                    const copiedBlockJson = localStorage.getItem('__BLOG_EDITOR_COPIED_BLOCK__');
+                    if (copiedBlockJson) {
+                        try {
+                            e.preventDefault();
+                            e.stopPropagation();
+
+                            const copiedBlock = JSON.parse(copiedBlockJson) as Block;
+
+                            // Generate a unique block ID
+                            const generateBlockId = (): string => {
+                                if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+                                    return crypto.randomUUID();
+                                }
+                                return `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+                            };
+
+                            // Clone a block with new IDs (recursive for nested blocks)
+                            const cloneBlock = (blockToClone: Block): Block => {
+                                const cloned: Block = {
+                                    ...blockToClone,
+                                    id: generateBlockId(),
+                                    data: { ...blockToClone.data },
+                                    meta: blockToClone.meta ? { ...blockToClone.meta } : undefined,
+                                };
+
+                                // Handle children if they exist
+                                if (blockToClone.children) {
+                                    if (Array.isArray(blockToClone.children) && blockToClone.children.length > 0) {
+                                        if (typeof blockToClone.children[0] === 'object') {
+                                            cloned.children = (blockToClone.children as Block[]).map(cloneBlock);
+                                        } else {
+                                            // If children are IDs, find and clone the actual blocks
+                                            const allBlocks = state.blocks;
+                                            const childIds = blockToClone.children as string[];
+                                            const childBlocks = childIds
+                                                .map((childId: string) => allBlocks.find(b => b.id === childId))
+                                                .filter((b): b is Block => b !== undefined);
+                                            cloned.children = childBlocks.map(cloneBlock);
+                                        }
+                                    }
+                                }
+
+                                return cloned;
+                            };
+
+                            const pastedBlock = cloneBlock(copiedBlock);
+
+                            // Find where to paste - use hovered block or selected block, or paste at end
+                            const hoveredBlockId = (window as any).__BLOG_EDITOR_HOVERED_BLOCK_ID__;
+                            const targetBlockId = hoveredBlockId || state.selectedBlockId;
+
+                            let pasteIndex: number | undefined;
+                            if (targetBlockId) {
+                                const targetIndex = state.blocks.findIndex(b => b.id === targetBlockId);
+                                if (targetIndex !== -1) {
+                                    pasteIndex = targetIndex + 1;
+                                }
+                            }
+
+                            // Dispatch ADD_BLOCK with the full block structure
+                            dispatch({
+                                type: 'ADD_BLOCK',
+                                payload: {
+                                    block: pastedBlock,
+                                    index: pasteIndex,
+                                    containerId: undefined
+                                }
+                            });
+                        } catch (error) {
+                            console.error('Failed to paste block:', error);
+                        }
+                    }
+                }
+            }
+        };
+
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [state.blocks, state.selectedBlockId, dispatch]);
+
+    return (
+        <div className="h-full rounded-[2.5rem] w-full bg-dashboard-card text-dashboard-text flex flex-col font-sans transition-colors duration-300 overflow-hidden relative">
+
+            <main className="flex flex-1 flex-col relative min-h-0">
+                {/* Error Banner */}
+                {saveError && (
+                    <div className="bg-red-50 dark:bg-red-900/20 border-b border-red-200 dark:border-red-800 px-6 py-3 flex items-center justify-between">
+                        <div className="flex items-center gap-3 flex-1">
+                            <AlertTriangle className="text-red-600 dark:text-red-400 flex-shrink-0" size={20} />
+                            <p className="text-red-800 dark:text-red-300 text-sm font-medium">
+                                {saveError}
+                            </p>
+                        </div>
+                        <button
+                            onClick={() => setSaveError(null)}
+                            className="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-200 transition-colors"
+                            aria-label="Dismiss error"
+                        >
+                            <X size={18} />
+                        </button>
+                    </div>
+                )}
+                <EditorHeader
+                    isLibraryOpen={isLibraryOpen}
+                    onLibraryToggle={() => setLibraryOpen(!isLibraryOpen)}
+                    isPreviewMode={isPreviewMode}
+                    onPreviewToggle={() => setIsPreviewMode(!isPreviewMode)}
+                    isSidebarOpen={isSidebarOpen}
+                    onSidebarToggle={() => setSidebarOpen(!isSidebarOpen)}
+                    isSaving={isSaving}
+                    onSave={async (publish?: boolean) => {
+                        setIsSaving(true);
+                        setSaveError(null);
+                        try {
+                            // Status should already be set in EditorHeader, but verify and log
+                            console.log('[CanvasEditorView] onSave called with publish:', publish, 'current status:', state.status);
+
+                            // Double-check status is set correctly before saving
+                            if (publish === true && state.status !== 'published') {
+                                console.warn('[CanvasEditorView] Status mismatch! Setting to published...');
+                                dispatch({ type: 'SET_STATUS', payload: 'published' });
+                                await new Promise(resolve => setTimeout(resolve, 100));
+                            } else if (publish === false && state.status !== 'draft') {
+                                console.warn('[CanvasEditorView] Status mismatch! Setting to draft...');
+                                dispatch({ type: 'SET_STATUS', payload: 'draft' });
+                                await new Promise(resolve => setTimeout(resolve, 100));
+                            }
+
+                            console.log('[CanvasEditorView] Final status before save:', state.status);
+                            await helpers.save();
+                            setIsSaving(false);
+                        } catch (error: any) {
+                            console.error('[CanvasEditorView] Save error:', error);
+                            // Extract and format user-friendly error message
+                            let errorMessage = error.message || 'Failed to save post';
+
+                            // Make error messages more user-friendly
+                            if (errorMessage.includes('Missing required fields')) {
+                                errorMessage = errorMessage.replace('Missing required fields for publishing:', 'To publish, please fill in:');
+                            } else if (errorMessage.includes('All required fields')) {
+                                errorMessage = 'To publish, please fill in all required fields: summary, featured image, category, and content.';
+                            } else if (errorMessage.includes('Unauthorized')) {
+                                errorMessage = 'You are not authorized to save this post. Please log in again.';
+                            } else if (errorMessage.includes('Failed to save')) {
+                                errorMessage = 'Unable to save the post. Please check your connection and try again.';
+                            }
+
+                            setSaveError(errorMessage);
+                            setIsSaving(false); // Always reset saving state on error
+                            throw error; // Re-throw so EditorHeader can handle it
+                        }
+                    }}
+                    onSaveError={(error) => {
+                        // Format error message for display
+                        if (error) {
+                            let formattedError = error;
+                            if (formattedError.includes('Missing required fields')) {
+                                formattedError = formattedError.replace('Missing required fields for publishing:', 'To publish, please fill in:');
+                            }
+                            setSaveError(formattedError);
+                        } else {
+                            setSaveError(null);
+                        }
+                    }}
+                />
+
+                {/* Editor Content Wrapper */}
+                <div className="flex flex-1 relative overflow-hidden min-h-0 flex-nowrap">
+
+                    {/* LEFT SIDEBAR: COMPONENT LIBRARY */}
+                    {!isPreviewMode && (
+                        <aside
+                            className={`transition-all duration-500 ease-[cubic-bezier(0.4,0,0.2,1)] border-r border-dashboard-border bg-dashboard-sidebar overflow-y-auto overflow-x-hidden h-full ${isLibraryOpen ? 'w-72' : 'w-0 opacity-0 pointer-events-none'
+                                }`}
+                        >
+                            <div className="p-6 w-72 min-w-0 max-w-full">
+                                {/* Text Blocks */}
+                                {textBlocks.length > 0 && (
+                                    <div className="mb-10">
+                                        <h3 className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black mb-6">Text</h3>
+                                        <div className="grid grid-cols-2 gap-3">
+                                            {textBlocks.map((block) => {
+                                                const IconComponent = block.icon || block.components.Icon || Type;
+                                                return (
+                                                    <LibraryItem
+                                                        key={block.type}
+                                                        icon={<IconComponent size={16} />}
+                                                        label={block.name}
+                                                        blockType={block.type}
+                                                        description={block.description}
+                                                        onAddBlock={handleAddBlockAtBottom}
+                                                    />
+                                                );
+                                            })}
+                                        </div>
+                                    </div>
+                                )}
+
+                                {/* Media Blocks */}
+                                {mediaBlocks.length > 0 && (
+                                    <div className="mb-10">
+                                        <h3 className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black mb-6">Media</h3>
+                                        <div className="grid grid-cols-2 gap-3">
+                                            {mediaBlocks.map((block) => {
+                                                const IconComponent = block.icon || block.components.Icon || ImageIcon;
+                                                return (
+                                                    <LibraryItem
+                                                        key={block.type}
+                                                        icon={<IconComponent size={16} />}
+                                                        label={block.name}
+                                                        blockType={block.type}
+                                                        description={block.description}
+                                                        onAddBlock={handleAddBlockAtBottom}
+                                                    />
+                                                );
+                                            })}
+                                        </div>
+                                    </div>
+                                )}
+
+                                {/* Layout Blocks */}
+                                {layoutBlocks.length > 0 && (
+                                    <div className="mb-10">
+                                        <h3 className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black mb-6">Layout</h3>
+                                        <div className="grid grid-cols-2 gap-3">
+                                            {layoutBlocks.map((block) => {
+                                                const IconComponent = block.icon || block.components.Icon || LayoutTemplate;
+                                                return (
+                                                    <LibraryItem
+                                                        key={block.type}
+                                                        icon={<IconComponent size={16} />}
+                                                        label={block.name}
+                                                        blockType={block.type}
+                                                        description={block.description}
+                                                        onAddBlock={handleAddBlockAtBottom}
+                                                    />
+                                                );
+                                            })}
+                                        </div>
+                                    </div>
+                                )}
+
+                                {/* Custom Blocks */}
+                                {customBlocks.length > 0 && (
+                                    <div>
+                                        <h3 className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black mb-6">Custom Blocks</h3>
+                                        <div className="space-y-3">
+                                            {customBlocks.map((block) => {
+                                                const IconComponent = block.icon || block.components.Icon || Box;
+                                                return (
+                                                    <CustomBlockItem
+                                                        key={block.type}
+                                                        blockType={block.type}
+                                                        name={block.name}
+                                                        description={block.description}
+                                                        icon={<IconComponent size={14} />}
+                                                        onAddBlock={handleAddBlockAtBottom}
+                                                    />
+                                                );
+                                            })}
+                                        </div>
+                                    </div>
+                                )}
+
+                                {/* Empty State */}
+                                {allBlocks.length === 0 && (
+                                    <div className="text-center py-12">
+                                        <Library size={32} className="mx-auto text-neutral-300 dark:text-neutral-700 mb-4" />
+                                        <p className="text-xs text-neutral-500 dark:text-neutral-400">
+                                            No blocks registered yet.
+                                        </p>
+                                    </div>
+                                )}
+                            </div>
+                        </aside>
+                    )}
+
+                    {/* CENTER: THE WRITING CANVAS */}
+                    <div
+                        className="flex-1 overflow-y-auto overflow-x-hidden pb-40 px-6 custom-scrollbar selection:bg-primary/20 dark:selection:bg-primary/30 min-h-0"
+                        style={{
+                            backgroundColor: effectiveBackgroundColors
+                                ? (effectiveDarkMode && effectiveBackgroundColors.dark
+                                    ? effectiveBackgroundColors.dark
+                                    : effectiveBackgroundColors.light)
+                                : undefined,
+                        }}
+                    >
+                        <div className={`mx-auto transition-all duration-500 max-w-7xl w-full`}>
+                            {/* Hero Block - Only show editable version when NOT in preview mode */}
+                            {!isPreviewMode && heroBlockDefinition && heroBlock && (
+                                <div className="mb-12">
+                                    <BlockWrapper
+                                        block={heroBlock}
+                                        onUpdate={(data) => {
+                                            setHeroBlock({
+                                                ...heroBlock,
+                                                data: { ...heroBlock.data, ...data },
+                                            });
+                                            // Sync title to editor state
+                                            if (data.title !== undefined && typeof data.title === 'string') {
+                                                dispatch({ type: 'SET_TITLE', payload: data.title });
+                                            }
+                                            // Sync summary to editor state metadata
+                                            if (data.summary !== undefined && typeof data.summary === 'string') {
+                                                dispatch({
+                                                    type: 'SET_METADATA',
+                                                    payload: { excerpt: data.summary }
+                                                });
+                                            }
+                                            // Sync image to editor state metadata
+                                            if (data.image !== undefined) {
+                                                const imageData = data.image as any;
+                                                dispatch({
+                                                    type: 'SET_METADATA',
+                                                    payload: {
+                                                        featuredImage: imageData ? {
+                                                            src: imageData.src || '',
+                                                            alt: imageData.alt || '',
+                                                            brightness: imageData.brightness ?? 100,
+                                                            blur: imageData.blur ?? 0,
+                                                        } : undefined
+                                                    }
+                                                });
+                                            }
+                                            // Sync category to editor state metadata
+                                            if (data.category !== undefined && typeof data.category === 'string') {
+                                                dispatch({
+                                                    type: 'SET_METADATA',
+                                                    payload: {
+                                                        categories: data.category.trim() ? [data.category.trim()] : []
+                                                    }
+                                                });
+                                            }
+                                        }}
+                                        onDelete={() => {
+                                            const defaultData = heroBlockDefinition.defaultData || {};
+                                            setHeroBlock({
+                                                ...heroBlock,
+                                                data: { ...defaultData },
+                                            });
+                                        }}
+                                        onMoveUp={() => { }}
+                                        onMoveDown={() => { }}
+                                        allBlocks={[heroBlock]}
+                                    />
+                                </div>
+                            )}
+
+                            {isPreviewMode ? (
+                                <div className="space-y-8">
+                                    {heroBlockDefinition && heroBlock && (
+                                        <BlockRenderer
+                                            block={heroBlock}
+                                            context={{ siteId, locale }}
+                                        />
+                                    )}
+
+                                    {!heroBlockDefinition && state.title && (
+                                        <h1 className="text-5xl font-serif font-medium text-neutral-950 dark:text-white leading-tight mb-12">
+                                            {state.title}
+                                        </h1>
+                                    )}
+
+                                    {contentBlocks.length > 0 ? (
+                                        <div className="space-y-8">
+                                            {contentBlocks.map((block) => (
+                                                <BlockRenderer
+                                                    key={block.id}
+                                                    block={block}
+                                                    context={{ siteId, locale }}
+                                                />
+                                            ))}
+                                        </div>
+                                    ) : (
+                                        <div className="text-center py-20 text-neutral-400 dark:text-neutral-500">
+                                            <p className="text-sm">No content blocks yet. Switch to Edit mode to add blocks.</p>
+                                        </div>
+                                    )}
+                                </div>
+                            ) : (
+                                <>
+                                    {!heroBlockDefinition && (
+                                        <div className="mb-12">
+                                            <textarea
+                                                ref={titleRef}
+                                                rows={1}
+                                                value={state.title}
+                                                onChange={(e) => dispatch({ type: 'SET_TITLE', payload: e.target.value })}
+                                                placeholder="The title of your story..."
+                                                className="w-full bg-transparent border-none outline-none text-5xl font-serif font-medium placeholder:text-neutral-500 dark:placeholder:text-neutral-500 resize-none leading-tight transition-colors duration-300 text-neutral-950 dark:text-white"
+                                            />
+                                        </div>
+                                    )}
+
+                                    <EditorBody
+                                        blocks={contentBlocks}
+                                        darkMode={effectiveDarkMode}
+                                        backgroundColors={effectiveBackgroundColors}
+                                        onBlockAdd={(type, index, containerId) => {
+                                            helpers.addBlock(type, index, containerId);
+                                        }}
+                                        onBlockUpdate={(id, data) => {
+                                            helpers.updateBlock(id, data);
+                                        }}
+                                        onBlockDelete={(id) => {
+                                            helpers.deleteBlock(id);
+                                        }}
+                                        onBlockMove={(id, newIndex, containerId) => {
+                                            helpers.moveBlock(id, newIndex, containerId);
+                                        }}
+                                    />
+                                </>
+                            )}
+                        </div>
+                    </div>
+
+                    {/* RIGHT SIDEBAR: THE "DESK" (SETTINGS) */}
+                    {!isPreviewMode && (
+                        <aside
+                            className={`transition-all duration-500 ease-[cubic-bezier(0.4,0,0.2,1)] border-l border-dashboard-border bg-dashboard-sidebar overflow-y-auto overflow-x-hidden h-full ${isSidebarOpen ? 'w-80' : 'w-0 opacity-0 pointer-events-none'
+                                }`}
+                        >
+                            <div className="p-8 w-80 min-w-0 max-w-full space-y-12 overflow-y-auto max-h-full">
+                                {/* SEO Section */}
+                                <section>
+                                    <div className="flex items-center gap-3 mb-6">
+                                        <Search size={14} className="text-neutral-500 dark:text-neutral-400" />
+                                        <label className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black">
+                                            SEO Settings
+                                        </label>
+                                    </div>
+                                    <div className="space-y-4">
+                                        <div>
+                                            <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
+                                                SEO Title
+                                            </label>
+                                            <input
+                                                type="text"
+                                                value={state.seo.title || ''}
+                                                onChange={(e) => dispatch({ type: 'SET_SEO', payload: { title: e.target.value } })}
+                                                placeholder="SEO title (defaults to post title)"
+                                                className="w-full px-3 py-2 text-xs bg-dashboard-card border border-dashboard-border rounded-lg outline-none focus:border-primary transition-all text-dashboard-text"
+                                            />
+                                            <p className="text-[9px] text-neutral-400 dark:text-neutral-500 mt-1">
+                                                {state.seo.title?.length || 0} / 60 characters
+                                            </p>
+                                        </div>
+                                        <div>
+                                            <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
+                                                Meta Description
+                                            </label>
+                                            <textarea
+                                                value={state.seo.description || ''}
+                                                onChange={(e) => dispatch({ type: 'SET_SEO', payload: { description: e.target.value } })}
+                                                placeholder="Brief description for search engines"
+                                                rows={3}
+                                                className="w-full px-3 py-2 text-xs bg-white dark:bg-neutral-900/50 border border-neutral-300 dark:border-neutral-700 rounded-lg outline-none focus:border-primary transition-all dark:text-neutral-100 resize-none"
+                                            />
+                                            <p className="text-[9px] text-neutral-400 dark:text-neutral-500 mt-1">
+                                                {state.seo.description?.length || 0} / 160 characters
+                                            </p>
+                                        </div>
+                                        <div>
+                                            <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
+                                                Keywords (comma-separated)
+                                            </label>
+                                            <input
+                                                type="text"
+                                                value={state.seo.keywords?.join(', ') || ''}
+                                                onChange={(e) => {
+                                                    const keywords = e.target.value.split(',').map(k => k.trim()).filter(k => k);
+                                                    dispatch({ type: 'SET_SEO', payload: { keywords } });
+                                                }}
+                                                placeholder="keyword1, keyword2, keyword3"
+                                                className="w-full px-3 py-2 text-xs bg-dashboard-card border border-dashboard-border rounded-lg outline-none focus:border-primary transition-all text-dashboard-text"
+                                            />
+                                        </div>
+                                        <div>
+                                            <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
+                                                Open Graph Image URL
+                                            </label>
+                                            <input
+                                                type="url"
+                                                value={state.seo.ogImage || ''}
+                                                onChange={(e) => dispatch({ type: 'SET_SEO', payload: { ogImage: e.target.value } })}
+                                                placeholder="https://example.com/image.jpg"
+                                                className="w-full px-3 py-2 text-xs bg-dashboard-card border border-dashboard-border rounded-lg outline-none focus:border-primary transition-all text-dashboard-text"
+                                            />
+                                        </div>
+                                    </div>
+                                </section>
+
+                                {/* Publishing Section */}
+                                <section className="pt-8 border-t border-neutral-200 dark:border-neutral-800">
+                                    <div className="flex items-center gap-3 mb-6">
+                                        <Globe size={14} className="text-neutral-500 dark:text-neutral-400" />
+                                        <label className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black">
+                                            Publishing
+                                        </label>
+                                    </div>
+                                    <div className="bg-dashboard-bg p-5 rounded-2xl border border-dashboard-border">
+                                        <span className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-3">Slug / Permalink</span>
+                                        <div className="text-xs font-mono break-all text-neutral-600 dark:text-neutral-400 leading-relaxed">
+                                            /blog/<span className="text-neutral-950 dark:text-white bg-amber-50 dark:bg-amber-900/20 px-1 rounded">{state.slug || 'untitled-post'}</span>
+                                        </div>
+                                    </div>
+                                </section>
+
+                                {/* Category Section */}
+                                <section className="pt-8 border-t border-neutral-200 dark:border-neutral-800">
+                                    <div className="flex items-center gap-3 mb-6">
+                                        <Box size={14} className="text-neutral-500 dark:text-neutral-400" />
+                                        <label className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black">
+                                            Category
+                                        </label>
+                                    </div>
+                                    <div className="space-y-4">
+                                        <div>
+                                            <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
+                                                Category
+                                            </label>
+                                            <input
+                                                type="text"
+                                                value={state.metadata.categories?.[0] || ''}
+                                                onChange={(e) => {
+                                                    const category = e.target.value.trim();
+                                                    dispatch({
+                                                        type: 'SET_METADATA',
+                                                        payload: {
+                                                            categories: category ? [category] : []
+                                                        }
+                                                    });
+                                                }}
+                                                placeholder="Enter category (required for publishing)"
+                                                className="w-full px-3 py-2 text-xs bg-dashboard-card border border-dashboard-border rounded-lg outline-none focus:border-primary transition-all text-dashboard-text"
+                                            />
+                                            <p className="text-[9px] text-neutral-400 dark:text-neutral-500 mt-1">
+                                                {state.metadata.categories?.[0] ? 'Category set' : 'No category set'}
+                                            </p>
+                                        </div>
+                                    </div>
+                                </section>
+
+                                {/* Featured Media Section */}
+                                <FeaturedMediaSection
+                                    featuredImage={state.metadata.featuredImage}
+                                    onUpdate={(image) => dispatch({ type: 'SET_METADATA', payload: { featuredImage: image } })}
+                                />
+
+                                {/* Privacy Settings Section */}
+                                <PrivacySettingsSection
+                                    privacy={state.metadata.privacy}
+                                    onUpdate={(privacy) => dispatch({ type: 'SET_METADATA', payload: { privacy } })}
+                                />
+
+                                {/* Post Status Section */}
+                                <section className="pt-8 border-t border-neutral-200 dark:border-neutral-800">
+                                    <div className="flex items-center justify-between mb-4">
+                                        <label className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black">
+                                            Post Status
+                                        </label>
+                                        <span className="text-[10px] font-black text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 px-2.5 py-1 rounded-full uppercase tracking-tighter">
+                                            {state.status}
+                                        </span>
+                                    </div>
+                                    <p className="text-[11px] text-neutral-500 dark:text-neutral-400 leading-relaxed italic">
+                                        {state.status === 'draft'
+                                            ? 'This post is private. Only you can see it until you hit publish.'
+                                            : state.status === 'published'
+                                                ? 'This post is live and visible to everyone.'
+                                                : 'This post is scheduled for publication.'}
+                                    </p>
+                                </section>
+                            </div>
+                        </aside>
+                    )}
+                </div>
+            </main>
+        </div>
+    );
+}
+