@jhits/plugin-blog 0.0.9 → 0.0.11

package/src/views/CanvasEditor/CanvasEditorView.js

@@ -1,209 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef } 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';
-export function CanvasEditorView({ postId, darkMode, backgroundColors: propsBackgroundColors, siteId, locale }) {
-    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 [isSaving, setIsSaving] = useState(false);
-    const [saveError, setSaveError] = useState(null);
-    // Get registered blocks
-    const registeredBlocks = useRegisteredBlocks();
-    // Hero block management
-    const { heroBlock, setHeroBlock, heroBlockDefinition } = useHeroBlock(state, registeredBlocks);
-    // Post loading
-    const { isLoadingPost } = usePostLoader(postId, state.postId, (post) => {
-        helpers.loadPost(post);
-        // 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);
-    }, () => setHeroBlock(null));
-    // Track if we just loaded a post to prevent marking as dirty during cleanup
-    const justLoadedRef = useRef(false);
-    const previousIsLoadingRef = useRef(false);
-    const loadingCleanupTimerRef = useRef(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,
-    });
-    // Listen for hero title updates from HeroBlock (if it dispatches events)
-    useEffect(() => {
-        const handleHeroTitleUpdate = (e) => {
-            dispatch({ type: 'SET_TITLE', payload: e.detail });
-        };
-        window.addEventListener('hero-title-update', handleHeroTitleUpdate);
-        return () => window.removeEventListener('hero-title-update', handleHeroTitleUpdate);
-    }, [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
-        }
-    }, [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) => {
-        // Add at the end of content blocks (excluding hero)
-        helpers.addBlock(blockType, contentBlocks.length, undefined);
-    };
-    // Handle save
-    const handleSave = async (publish) => {
-        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);
-        }
-        catch (error) {
-            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
-        }
-    };
-    // Handle hero block update
-    const handleHeroBlockUpdate = (data) => {
-        if (!heroBlock)
-            return;
-        setHeroBlock(Object.assign(Object.assign({}, heroBlock), { data: Object.assign(Object.assign({}, 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()] : []
-                }
-            });
-        }
-    };
-    // Handle hero block delete/reset
-    const handleHeroBlockDelete = () => {
-        if (!heroBlock || !heroBlockDefinition)
-            return;
-        const defaultData = heroBlockDefinition.defaultData || {};
-        setHeroBlock(Object.assign(Object.assign({}, heroBlock), { data: Object.assign({}, defaultData) }));
-    };
-    return (_jsx("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", children: _jsxs("main", { className: "flex flex-1 flex-col relative min-h-0", children: [_jsx(ErrorBanner, { error: saveError, onDismiss: () => setSaveError(null) }), _jsx(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 }), _jsxs("div", { className: "flex flex-1 relative overflow-hidden min-h-0 flex-nowrap", children: [!isPreviewMode && (_jsx("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'}`, children: _jsx(EditorLibrary, { registeredBlocks: registeredBlocks, onAddBlock: handleAddBlockAtBottom }) })), _jsx(EditorCanvas, { isPreviewMode: isPreviewMode, heroBlock: heroBlock, heroBlockDefinition: heroBlockDefinition, contentBlocks: contentBlocks, title: state.title, siteId: siteId, locale: locale, darkMode: effectiveDarkMode, backgroundColors: effectiveBackgroundColors, featuredImage: state.metadata.featuredImage, onTitleChange: (title) => dispatch({ type: 'SET_TITLE', payload: title }), onHeroBlockUpdate: handleHeroBlockUpdate, onHeroBlockDelete: handleHeroBlockDelete, 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) }), !isPreviewMode && (_jsx("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'}`, children: _jsx(EditorSidebar, { slug: state.slug, seo: state.seo, metadata: state.metadata, heroBlock: heroBlock, status: state.status, onSEOUpdate: (seo) => dispatch({ type: 'SET_SEO', payload: seo }), onMetadataUpdate: (metadata) => dispatch({ type: 'SET_METADATA', payload: metadata }) }) }))] })] }) }));
-}

package/src/views/CanvasEditor/CanvasEditorView.tsx

@@ -1,337 +0,0 @@
-'use client';
-
-import React, { useState, useEffect, useRef } 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 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) */
-    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 [isSaving, setIsSaving] = useState(false);
-    const [saveError, setSaveError] = useState<string | null>(null);
-
-    // Get registered blocks
-    const registeredBlocks = useRegisteredBlocks();
-
-    // Hero block management
-    const { heroBlock, setHeroBlock, heroBlockDefinition } = useHeroBlock(state, registeredBlocks);
-
-    // Post loading
-    const { isLoadingPost } = usePostLoader(
-        postId,
-        state.postId,
-        (post) => {
-            helpers.loadPost(post);
-            // 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);
-        },
-        () => setHeroBlock(null)
-    );
-
-    // 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,
-    });
-
-    // 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
-    // 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
-        }
-    }, [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);
-    };
-
-    // Handle save
-    const handleSave = 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);
-
-            // 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);
-        } 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
-        }
-    };
-
-    // 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()] : []
-                }
-            });
-        }
-    };
-
-    // Handle hero block delete/reset
-    const handleHeroBlockDelete = () => {
-        if (!heroBlock || !heroBlockDefinition) return;
-        const defaultData = heroBlockDefinition.defaultData || {};
-        setHeroBlock({
-            ...heroBlock,
-            data: { ...defaultData },
-        });
-    };
-
-    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 */}
-                <ErrorBanner error={saveError} onDismiss={() => setSaveError(null)} />
-
-                <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}
-                />
-
-                {/* 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'
-                                }`}
-                        >
-                            <EditorLibrary
-                                registeredBlocks={registeredBlocks}
-                                onAddBlock={handleAddBlockAtBottom}
-                            />
-                        </aside>
-                    )}
-
-                    {/* CENTER: THE WRITING CANVAS */}
-                    <EditorCanvas
-                        isPreviewMode={isPreviewMode}
-                        heroBlock={heroBlock}
-                        heroBlockDefinition={heroBlockDefinition}
-                        contentBlocks={contentBlocks}
-                        title={state.title}
-                        siteId={siteId}
-                        locale={locale}
-                        darkMode={effectiveDarkMode}
-                        backgroundColors={effectiveBackgroundColors}
-                        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)}
-                    />
-
-                    {/* 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>
-            </main>
-        </div>
-    );
-}

package/src/views/CanvasEditor/EditorBody.d.ts

@@ -1,22 +0,0 @@
-/**
- * Editor Body Component
- * Primary root container for the editor canvas
- * Acts as the main drop zone for blocks
- */
-import { Block } from '../../types/block';
-export interface EditorBodyProps {
-    blocks: Block[];
-    onBlockAdd: (type: string, index: number, containerId?: string) => void;
-    onBlockUpdate: (id: string, data: Partial<Block['data']>) => void;
-    onBlockDelete: (id: string) => void;
-    onBlockMove: (id: string, newIndex: number, containerId?: string) => void;
-    /** Enable dark mode for content area and wrappers (default: true) */
-    darkMode?: boolean;
-    /** Background colors for the editor */
-    backgroundColors?: {
-        light: string;
-        dark?: string;
-    };
-}
-export declare function EditorBody({ blocks, onBlockAdd, onBlockUpdate, onBlockDelete, onBlockMove, darkMode, backgroundColors, }: EditorBodyProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=EditorBody.d.ts.map

package/src/views/CanvasEditor/EditorBody.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EditorBody.d.ts","sourceRoot":"","sources":["EditorBody.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAG1C,MAAM,WAAW,eAAe;IAC5B,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACxE,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,IAAI,CAAC;IAClE,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1E,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,gBAAgB,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;CACL;AAED,wBAAgB,UAAU,CAAC,EACvB,MAAM,EACN,UAAU,EACV,aAAa,EACb,aAAa,EACb,WAAW,EACX,QAAe,EACf,gBAAgB,GACnB,EAAE,eAAe,2CAuhBjB"}