@jhits/plugin-blog 0.0.18 → 0.0.20

package/src/views/CanvasEditor/CanvasEditorView.tsx

@@ -1,481 +1,206 @@
 'use client';
 
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useEditor } from '../../state/EditorContext';
 import { EditorHeader } from './EditorHeader';
 import { ErrorBanner } from './components/ErrorBanner';
 import { EditorLibrary } from './components/EditorLibrary';
-import { EditorCanvas } from './components/EditorCanvas';
 import { EditorSidebar } from './components/EditorSidebar';
-import { usePostLoader, useHeroBlock, useRegisteredBlocks, useKeyboardShortcuts, useUnsavedChanges } from './hooks';
+import { EditorCanvas } from './components/EditorCanvas';
+import { JSONInspector } from './components/JSONInspector';
+import { useRegisteredBlocks } from './hooks/useRegisteredBlocks';
+import { useAutoSave } from '../../hooks/useAutoSave';
+import { usePostLoader } from './hooks/usePostLoader';
+import { RefreshCw } from 'lucide-react';
 import type { Block } from '../../types/block';
-import type { SEOMetadata, PostMetadata } from '../../types/post';
 
 export interface CanvasEditorViewProps {
     postId?: string;
     siteId: string;
     locale: string;
-    /** Enable dark mode for content area and wrappers (default: true) */
+    initialData?: any;
+    availableLanguages?: string[];
     darkMode?: boolean;
-    /** Background colors for the editor */
-    backgroundColors?: {
-        light: string;
-        dark?: string;
-    };
+    backgroundColors?: { light: string; dark?: string };
+    LayoutWrapper?: React.ComponentType<any>;
 }
 
-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);
+export function CanvasEditorView({ 
+    postId, 
+    siteId, 
+    locale, 
+    initialData, 
+    availableLanguages = [],
+    darkMode = false,
+    backgroundColors,
+    LayoutWrapper
+}: CanvasEditorViewProps) {
+    const { state, dispatch, helpers, availableLanguages: contextLanguages } = useEditor();
+    const registeredBlocks = useRegisteredBlocks();
+    
     const [isLibraryOpen, setLibraryOpen] = useState(true);
+    const [isSidebarOpen, setSidebarOpen] = useState(true);
     const [isPreviewMode, setIsPreviewMode] = useState(false);
     const [isSaving, setIsSaving] = useState(false);
     const [saveError, setSaveError] = useState<string | null>(null);
 
-    // Language state for multilingual support
-    const [primaryLanguage, setPrimaryLanguage] = useState<string>(locale || 'en');
-    const [isLoadingLanguage, setIsLoadingLanguage] = useState(true);
-    const [availableLanguages, setAvailableLanguages] = useState<string[]>([locale || 'en']);
-    const [currentLanguage, setCurrentLanguage] = useState<string>(locale || 'en');
-
-    // Get registered blocks
-    const registeredBlocks = useRegisteredBlocks();
-
-    // Hero block management
-    const { heroBlock, setHeroBlock, heroBlockDefinition } = useHeroBlock(state, registeredBlocks);
+    // Ensure currentLanguage is always set from the locale prop
+    useEffect(() => {
+        if (locale && !state.currentLanguage) {
+            dispatch({ type: 'SET_CURRENT_LANGUAGE', payload: locale });
+        }
+    }, [locale, state.currentLanguage, dispatch]);
 
-    // Post loading - wait for language settings to be loaded first
+    // Initial post loading logic
     const { isLoadingPost } = usePostLoader(
         postId,
         state.postId,
-        (post) => {
-            helpers.loadPost(post);
-            // Don't reset current language when loading - preserve user's selection
-            // This allows switching to a new language even if no content exists yet
-            // Update available languages from post's languages object
-            if (post.languages && Object.keys(post.languages).length > 0) {
-                const langs = Object.keys(post.languages);
-                // Add current language to available if not already there
-                if (!langs.includes(currentLanguage)) {
-                    langs.push(currentLanguage);
-                }
-                setAvailableLanguages(langs);
-            }
-            // After loading, ensure we're marked as clean
-            // Use setTimeout to ensure this runs after the reducer has processed LOAD_POST
-            setTimeout(() => {
-                dispatch({ type: 'MARK_CLEAN' });
-            }, 0);
-        },
+        helpers.loadPost,
         () => setHeroBlock(null),
-        !isLoadingLanguage ? currentLanguage : undefined
+        locale
     );
 
-    // Sync currentLanguage to editor state on mount so onSave always knows the active language
-    useEffect(() => {
-        dispatch({ type: 'SET_CURRENT_LANGUAGE', payload: currentLanguage });
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps -- only on mount
-
-    // Fetch primary language from settings (simulated - in real app would come from config)
-    useEffect(() => {
-        const fetchLanguageSettings = async () => {
-            try {
-                // Use the locale prop as the initial language
-                // Only set this once on initial load, don't override if user already selected a language
-                if (!currentLanguage || currentLanguage === 'en') {
-                    setPrimaryLanguage(locale || 'nl');
-                    if (!availableLanguages.includes(locale || 'nl')) {
-                        setAvailableLanguages([locale || 'nl']);
-                    }
-                    setCurrentLanguage(locale || 'nl');
-                    dispatch({ type: 'SET_CURRENT_LANGUAGE', payload: locale || 'nl' });
-                }
-            } catch (error) {
-                console.error('Failed to fetch language settings:', error);
-            } finally {
-                setIsLoadingLanguage(false);
-            }
-        };
-        fetchLanguageSettings();
-    }, []); // Empty dependency - only run once on mount
-
-    // Handle language change
-    const handleLanguageChange = async (newLanguage: string) => {
-        // Save current content first if dirty
-        if (state.isDirty) {
-            const confirmed = window.confirm('You have unsaved changes. Do you want to save them first?');
-            if (confirmed) {
-                await handleSave();
-            }
-        }
-
-        setCurrentLanguage(newLanguage);
-        dispatch({ type: 'SET_CURRENT_LANGUAGE', payload: newLanguage });
-
-        // Reload with new language
-        if (postId) {
-            try {
-                const response = await fetch(`/api/plugin-blog/${postId}?language=${newLanguage}`);
-                if (response && response.ok) {
-                    const apiDoc = await response.json();
-                    
-                    // Manually update state instead of going through loadPost
-                    // This avoids re-triggering the usePostLoader hook
-                    const blocks = apiDoc.contentBlocks || apiDoc.blocks || [];
-                    dispatch({ type: 'SET_TITLE', payload: apiDoc.title || '' });
-                    
-                    // Replace all blocks
-                    // First clear, then set new blocks via LOAD_POST-like behavior
-                    // We use a custom dispatch to update blocks without resetting postId
-                    dispatch({ 
-                        type: 'LOAD_POST', 
-                        payload: {
-                            id: state.postId || apiDoc._id || apiDoc.id,
-                            title: apiDoc.title || '',
-                            slug: apiDoc.slug || state.slug,
-                            blocks: blocks,
-                            seo: apiDoc.seo || {},
-                            publication: {
-                                status: apiDoc.publicationData?.status === 'concept' ? 'draft' : (apiDoc.publicationData?.status || state.status),
-                                date: apiDoc.publicationData?.date,
-                                authorId: apiDoc.authorId,
-                            },
-                            metadata: {
-                                featuredImage: apiDoc.image ? {
-                                    id: apiDoc.image.id || apiDoc.image.src,
-                                    alt: apiDoc.image.alt,
-                                    isCustom: apiDoc.image.isCustom,
-                                } : state.metadata?.featuredImage,
-                                categories: apiDoc.categoryTags?.category ? [apiDoc.categoryTags.category] : [],
-                                tags: apiDoc.categoryTags?.tags || [],
-                                excerpt: apiDoc.summary || '',
-                                lang: newLanguage,
-                            },
-                            languages: apiDoc.languages,
-                            createdAt: apiDoc.createdAt || new Date().toISOString(),
-                            updatedAt: apiDoc.updatedAt || new Date().toISOString(),
-                        }
-                    });
-                    
-                    // Update available languages
-                    if (apiDoc.availableLanguages) {
-                        const langs = [...apiDoc.availableLanguages];
-                        if (!langs.includes(newLanguage)) {
-                            langs.push(newLanguage);
-                        }
-                        setAvailableLanguages(langs);
-                    }
-                    
-                    // Reset hero block so it re-initializes from new blocks
-                    setHeroBlock(null);
-                    
-                    setTimeout(() => {
-                        dispatch({ type: 'MARK_CLEAN' });
-                    }, 100);
-                }
-            } catch (error) {
-                console.error('Failed to switch language:', error);
-            }
-        }
-    };
-
-    // Handle adding a new language
-    const handleAddLanguage = async (newLanguage: string) => {
-        if (availableLanguages.includes(newLanguage)) return;
-
-        // Add the new language to the list
-        setAvailableLanguages([...availableLanguages, newLanguage]);
-
-        // Switch to the new language (it will copy from primary language)
-        await handleLanguageChange(newLanguage);
-    };
-
-    // Track if we just loaded a post to prevent marking as dirty during cleanup
-    const justLoadedRef = useRef(false);
-    const previousIsLoadingRef = useRef<boolean>(false);
-    const loadingCleanupTimerRef = useRef<NodeJS.Timeout | null>(null);
-
-    // Mark when post loading completes and ensure it stays clean after all effects
-    useEffect(() => {
-        // Detect when loading just finished (was loading, now not loading, and we have a postId)
-        const loadingJustFinished = previousIsLoadingRef.current && !isLoadingPost && state.postId;
-
-        if (loadingJustFinished) {
-            justLoadedRef.current = true;
-
-            // Clear any existing cleanup timer
-            if (loadingCleanupTimerRef.current) {
-                clearTimeout(loadingCleanupTimerRef.current);
-            }
-
-            // Wait for all effects to complete, then ensure we're marked as clean
-            // Use multiple animation frames + setTimeout to ensure all effects have run
-            requestAnimationFrame(() => {
-                requestAnimationFrame(() => {
-                    loadingCleanupTimerRef.current = setTimeout(() => {
-                        // Force mark as clean after loading - this ensures cleanup effects don't leave us dirty
-                        console.log('[CanvasEditorView] Post loading complete - ensuring clean state');
-                        dispatch({ type: 'MARK_CLEAN' });
-                        justLoadedRef.current = false;
-                        loadingCleanupTimerRef.current = null;
-                    }, 500); // Delay to ensure all effects complete
-                });
-            });
-        }
-
-        // Update ref
-        previousIsLoadingRef.current = isLoadingPost;
-
-        return () => {
-            if (loadingCleanupTimerRef.current) {
-                clearTimeout(loadingCleanupTimerRef.current);
-                loadingCleanupTimerRef.current = null;
-            }
-        };
-    }, [isLoadingPost, state.postId, dispatch]);
-
-    // Keyboard shortcuts
-    useKeyboardShortcuts(state, dispatch, canUndo, canRedo, helpers.undo, helpers.redo);
-
-    // Unsaved changes warning and auto-save
-    const { autoSaveEnabled, setAutoSaveEnabled, countdown, saveStatus } = useUnsavedChanges({
-        state,
-        isDirty: state.isDirty,
-        onSave: async () => {
-            // Preserve current status: if already published, keep it published
-            // Otherwise save as draft
-            const shouldPublish = state.status === 'published';
-            await handleSave(shouldPublish);
-        },
-        heroBlock,
-        postId: state.postId,
+    const { 
+        autoSaveEnabled, 
+        setAutoSaveEnabled, 
+        saveStatus, 
+        countdown 
+    } = useAutoSave(postId, state, async (data) => {
+        await helpers.save(heroBlock);
     });
 
-    // Listen for hero title updates from HeroBlock (if it dispatches events)
+    // Initialize editor with post data (fallback if not using usePostLoader)
     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
-    // Note: This effect will mark as dirty, but the loading cleanup effect will fix it
-    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 } });
-            });
-            // Don't mark as clean here - let the loading cleanup effect handle it
-            // This ensures we wait for all effects to complete before marking clean
+        if (initialData) {
+            const data = initialData.data || initialData;
+            if (data.blocks) dispatch({ type: 'SET_BLOCKS', payload: data.blocks });
+            if (data.title) dispatch({ type: 'SET_TITLE', payload: data.title });
+            if (data.slug) dispatch({ type: 'SET_SLUG', payload: data.slug });
+            if (data.seo) dispatch({ type: 'SET_SEO', payload: data.seo });
+            if (data.metadata) dispatch({ type: 'SET_METADATA', payload: data.metadata });
+            if (data.status) dispatch({ type: 'SET_STATUS', payload: data.status });
+            dispatch({ type: 'SET_CURRENT_LANGUAGE', payload: locale });
         }
-    }, [state.blocks, dispatch]);
-
-    // Filter out hero blocks from content blocks
-    const contentBlocks = state.blocks.filter(b => b.type !== 'hero');
-
-    // 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);
-    };
+    }, [initialData, locale, dispatch]);
 
-    // Handle save
-    const handleSave = async (publish?: boolean) => {
+    const handleSave = async (publish: boolean = false) => {
         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);
-
-            // Only change status if explicitly requested (publish is true or false)
-            // If publish is undefined, preserve the current status (used for autosave)
-            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' && state.status !== 'published') {
-                // Only set to draft if not already published (preserve published status)
-                // This prevents autosave from changing published posts back to 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);
-
-            // Pass hero block to save function so it can be included in the saved data
-            await helpers.save(heroBlock);
-            setIsSaving(false);
+            await helpers.save(heroBlock, publish ? 'published' : 'draft');
         } 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
+            setSaveError(error.message || 'Failed to save publication');
+        } finally {
+            setIsSaving(false);
         }
     };
 
-    // Handle hero block update
-    const handleHeroBlockUpdate = (data: Partial<Block['data']>) => {
-        if (!heroBlock) return;
-
-        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 }
-            });
-        }
-
-        // Hero image and featured image are completely independent
-        // Do NOT sync hero image to featured image
-        // The featured image is a separate thumbnail that the client adjusts independently
-
-        // 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()] : []
-                }
-            });
-        }
+    const handleHeroUpdate = (block: any) => {
+        setHeroBlock(block);
     };
 
-    // Handle hero block delete/reset
-    const handleHeroBlockDelete = () => {
-        if (!heroBlock || !heroBlockDefinition) return;
-        const defaultData = heroBlockDefinition.defaultData || {};
-        setHeroBlock({
-            ...heroBlock,
-            data: { ...defaultData },
-        });
-    };
+    // Find hero block if it exists
+    const [heroBlock, setHeroBlock] = useState<any>(null);
+    useEffect(() => {
+        const hero = state.blocks.find((b: any) => b.type === 'hero' || b.category === 'hero');
+        if (hero) setHeroBlock(hero);
+    }, [state.blocks]);
+
+    const heroBlockDefinition = registeredBlocks.find(b => b.type === heroBlock?.type);
+
+    if (isLoadingPost) {
+        return (
+            <div className="absolute inset-0 w-full flex items-center justify-center bg-dashboard-bg/10 backdrop-blur-sm z-[100]">
+                <div className="flex flex-col items-center gap-4">
+                    <RefreshCw className="size-10 text-primary animate-spin" />
+                    <p className="text-[10px] font-black uppercase tracking-[0.3em] text-primary">Synchronizing_Node_Data...</p>
+                </div>
+            </div>
+        );
+    }
 
     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">
-            {/* Header needs overflow-visible for dropdown to escape the rounded container */}
-            <header className="overflow-visible flex-none shrink-0 z-10">
-                <EditorHeader
-                    isLibraryOpen={isLibraryOpen}
-                    onLibraryToggle={() => setLibraryOpen(!isLibraryOpen)}
-                    isPreviewMode={isPreviewMode}
-                    onPreviewToggle={() => setIsPreviewMode(!isPreviewMode)}
-                    isSidebarOpen={isSidebarOpen}
-                    onSidebarToggle={() => setSidebarOpen(!isSidebarOpen)}
-                    isSaving={isSaving}
-                    onSave={handleSave}
-                    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);
-                        }
-                    }}
-                    autoSaveEnabled={autoSaveEnabled}
-                    onAutoSaveToggle={setAutoSaveEnabled}
-                    isDirty={state.isDirty}
-                    autoSaveCountdown={countdown}
-                    autoSaveStatus={saveStatus}
-                    languages={availableLanguages}
-                    currentLanguage={currentLanguage}
-                    onLanguageChange={handleLanguageChange}
-                    onAddLanguage={handleAddLanguage}
-                />
-            </header>
+        <div className="absolute inset-0 w-full flex flex-col overflow-hidden bg-dashboard-bg/10 backdrop-blur-sm">
+            <EditorHeader
+                isLibraryOpen={isLibraryOpen}
+                onLibraryToggle={() => setLibraryOpen(!isLibraryOpen)}
+                isPreviewMode={isPreviewMode}
+                onPreviewToggle={() => setIsPreviewMode(!isPreviewMode)}
+                isSidebarOpen={isSidebarOpen}
+                onSidebarToggle={() => setSidebarOpen(!isSidebarOpen)}
+                isSaving={isSaving}
+                onSave={handleSave}
+                onSaveError={setSaveError}
+                autoSaveEnabled={autoSaveEnabled}
+                onAutoSaveToggle={setAutoSaveEnabled}
+                isDirty={state.isDirty}
+                autoSaveCountdown={countdown}
+                autoSaveStatus={saveStatus}
+                languages={contextLanguages}
+                currentLanguage={state.currentLanguage || locale}
+                onLanguageChange={(lang) => helpers.switchLanguage(lang, postId)}
+                onAddLanguage={(lang) => helpers.switchLanguage(lang, postId)}
+            />
 
-            {/* Error Banner */}
             <ErrorBanner error={saveError} onDismiss={() => setSaveError(null)} />
 
-            {/* Editor Content Wrapper */}
-            <main className="flex flex-1 flex-col relative min-h-0 overflow-hidden">
-                <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'
-                                }`}
-                        >
-                            <EditorLibrary
-                                registeredBlocks={registeredBlocks}
-                                onAddBlock={handleAddBlockAtBottom}
-                            />
-                        </aside>
-                    )}
-
-                    {/* CENTER: THE WRITING CANVAS */}
+            <main className="flex flex-1 relative overflow-hidden">
+                {/* 1. BLOCKS LIBRARY */}
+                <aside 
+                    className={`transition-all duration-500 bg-dashboard-sidebar/40 backdrop-blur-xl border-r border-dashboard-border/50 relative z-20 overflow-hidden ${
+                        isLibraryOpen ? 'w-72' : 'w-0'
+                    }`}
+                >
+                    <div className="w-72 h-full opacity-100 transition-opacity duration-300">
+                        <EditorLibrary registeredBlocks={registeredBlocks} onAddBlock={(type) => helpers.addBlock(type)} />
+                    </div>
+                </aside>
+
+                {/* 2. MAIN CANVAS */}
+                <div className="flex-1 relative overflow-hidden bg-white/[0.01] flex flex-col">
                     <EditorCanvas
                         isPreviewMode={isPreviewMode}
                         heroBlock={heroBlock}
                         heroBlockDefinition={heroBlockDefinition}
-                        contentBlocks={contentBlocks}
+                        contentBlocks={state.blocks}
                         title={state.title}
                         siteId={siteId}
                         locale={locale}
-                        darkMode={effectiveDarkMode}
-                        backgroundColors={effectiveBackgroundColors}
+                        darkMode={darkMode}
+                        backgroundColors={backgroundColors}
                         featuredImage={state.metadata.featuredImage}
-                        onTitleChange={(title: string) => dispatch({ type: 'SET_TITLE', payload: title })}
-                        onHeroBlockUpdate={handleHeroBlockUpdate}
-                        onHeroBlockDelete={handleHeroBlockDelete}
-                        onBlockAdd={(type: string, index: number, containerId?: string) => helpers.addBlock(type, index, containerId)}
-                        onBlockUpdate={(id: string, data: Partial<Block['data']>) => helpers.updateBlock(id, data)}
-                        onBlockDelete={(id: string) => helpers.deleteBlock(id)}
-                        onBlockMove={(id: string, newIndex: number, containerId?: string) => helpers.moveBlock(id, newIndex, containerId)}
+                        LayoutWrapper={LayoutWrapper}
+                        onTitleChange={(title) => dispatch({ type: 'SET_TITLE', payload: title })}
+                        onHeroBlockUpdate={handleHeroUpdate}
+                        onHeroBlockDelete={() => setHeroBlock(null)}
+                        onBlockAdd={helpers.addBlock}
+                        onBlockUpdate={helpers.updateBlock}
+                        onBlockDelete={helpers.deleteBlock}
+                        onBlockMove={helpers.moveBlock}
                     />
-
-                    {/* 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'
-                                }`}
-                        >
-                            <EditorSidebar
-                                slug={state.slug}
-                                seo={state.seo}
-                                metadata={state.metadata}
-                                heroBlock={heroBlock}
-                                status={state.status}
-                                onSEOUpdate={(seo: Partial<SEOMetadata>) => dispatch({ type: 'SET_SEO', payload: seo })}
-                                onMetadataUpdate={(metadata: Partial<PostMetadata>) => dispatch({ type: 'SET_METADATA', payload: metadata })}
-                            />
-                        </aside>
-                    )}
                 </div>
+
+                {/* 3. SETTINGS SIDEBAR */}
+                <aside 
+                    className={`transition-all duration-500 bg-dashboard-sidebar/40 backdrop-blur-xl border-l border-dashboard-border/50 relative z-20 overflow-hidden ${
+                        isSidebarOpen ? 'w-80' : 'w-0'
+                    }`}
+                >
+                    <div className="w-80 h-full opacity-100 transition-opacity duration-300">
+                        <EditorSidebar
+                            slug={state.slug}
+                            seo={state.seo}
+                            metadata={state.metadata}
+                            heroBlock={heroBlock}
+                            status={state.status}
+                            onSEOUpdate={(seo) => dispatch({ type: 'SET_SEO', payload: seo })}
+                            onMetadataUpdate={(meta) => dispatch({ type: 'SET_METADATA', payload: meta })}
+                        />
+                    </div>
+                </aside>
             </main>
+
+            <JSONInspector data={state} />
         </div>
     );
 }