@jhits/plugin-blog 0.0.8 → 0.0.9

package/src/views/CanvasEditor/EditorBody.js

@@ -0,0 +1,505 @@
+/**
+ * Editor Body Component
+ * Primary root container for the editor canvas
+ * Acts as the main drop zone for blocks
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, Fragment, useEffect } from 'react';
+import { Plus } from 'lucide-react';
+import { BlockWrapper } from './BlockWrapper';
+export function EditorBody({ blocks, onBlockAdd, onBlockUpdate, onBlockDelete, onBlockMove, darkMode = true, backgroundColors, }) {
+    // --- State ---
+    const [dragOverIndex, setDragOverIndex] = useState(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [draggedBlockId, setDraggedBlockId] = useState(null);
+    const [dropIndicatorPosition, setDropIndicatorPosition] = useState(null);
+    const [calculatedInsertIndex, setCalculatedInsertIndex] = useState(null);
+    // --- Refs ---
+    const containerRef = useRef(null);
+    const blockRefs = useRef(new Map());
+    // --- Cleanup & Event Listeners ---
+    useEffect(() => {
+        const handleClearIndicator = () => {
+            setDropIndicatorPosition(null);
+            setDragOverIndex(null);
+        };
+        const container = containerRef.current;
+        if (container) {
+            container.addEventListener('clear-drop-indicator', handleClearIndicator);
+            return () => {
+                container.removeEventListener('clear-drop-indicator', handleClearIndicator);
+            };
+        }
+    }, []);
+    useEffect(() => {
+        const handleGlobalDragEnd = () => {
+            setDropIndicatorPosition(null);
+            setDragOverIndex(null);
+            setIsDragging(false);
+            setDraggedBlockId(null);
+            setCalculatedInsertIndex(null);
+        };
+        document.addEventListener('dragend', handleGlobalDragEnd);
+        return () => {
+            document.removeEventListener('dragend', handleGlobalDragEnd);
+        };
+    }, []);
+    // --- Helper Functions ---
+    const setBlockRef = (blockId) => (el) => {
+        if (el) {
+            blockRefs.current.set(blockId, el);
+        }
+        else {
+            blockRefs.current.delete(blockId);
+        }
+    };
+    // --- Drag & Drop Logic ---
+    const handleDragStart = (e) => {
+        // This is called when dragging starts from the container
+        // The actual block drag start is handled in BlockWrapper
+        setIsDragging(true);
+    };
+    const handleDragOver = (e, index, element) => {
+        e.preventDefault();
+        e.stopPropagation();
+        // Check if we're dragging over a nested container - if so, clear our indicator
+        const target = e.target;
+        const nestedContainer = target.closest('[data-layout-container]');
+        if (nestedContainer && nestedContainer !== containerRef.current) {
+            // We're over a nested container, clear our indicator
+            setDropIndicatorPosition(null);
+            setDragOverIndex(null);
+            return;
+        }
+        setDragOverIndex(index);
+        // Calculate position for absolute drop indicator - always show between blocks
+        const container = containerRef.current;
+        if (container && element) {
+            requestAnimationFrame(() => {
+                // Double-check refs are still valid inside RAF callback
+                if (!containerRef.current)
+                    return;
+                const containerRect = containerRef.current.getBoundingClientRect();
+                const elementRect = element.getBoundingClientRect();
+                const mouseY = e.clientY;
+                const relativeTop = mouseY - containerRect.top;
+                const elementTop = elementRect.top - containerRect.top;
+                const elementBottom = elementRect.bottom - containerRect.top;
+                const elementCenter = elementTop + elementRect.height / 2;
+                // Calculate width - use container width minus padding (32px on each side)
+                const padding = 32;
+                const width = containerRect.width - (padding * 2);
+                let finalTop;
+                // Determine if we should show above or below the element
+                if (relativeTop < elementCenter) {
+                    // Show above this block - position between previous block and current block
+                    if (index === 0) {
+                        // First block - show at top of container (before first block)
+                        finalTop = 0;
+                    }
+                    else {
+                        // Get previous block to find the gap
+                        const prevBlock = blocks[index - 1];
+                        const prevBlockEl = blockRefs.current.get(prevBlock.id);
+                        if (prevBlockEl) {
+                            const prevBlockRect = prevBlockEl.getBoundingClientRect();
+                            const prevBlockBottom = prevBlockRect.bottom - containerRect.top;
+                            // Position in the middle of the gap (mb-6 = 24px margin)
+                            finalTop = prevBlockBottom + 12; // Half of the 24px gap
+                        }
+                        else {
+                            finalTop = elementTop;
+                        }
+                    }
+                }
+                else {
+                    // Show below this block - position between current block and next block
+                    if (index === blocks.length - 1) {
+                        // Last block - show after it
+                        finalTop = elementBottom;
+                    }
+                    else {
+                        // Get next block to find the gap
+                        const nextBlock = blocks[index + 1];
+                        const nextBlockEl = blockRefs.current.get(nextBlock.id);
+                        if (nextBlockEl) {
+                            const nextBlockRect = nextBlockEl.getBoundingClientRect();
+                            const nextBlockTop = nextBlockRect.top - containerRect.top;
+                            // Position in the middle of the gap
+                            finalTop = elementBottom + (nextBlockTop - elementBottom) / 2;
+                        }
+                        else {
+                            finalTop = elementBottom;
+                        }
+                    }
+                }
+                setDropIndicatorPosition({
+                    top: finalTop,
+                    left: padding,
+                    width: width,
+                });
+            });
+        }
+    };
+    const handleDragLeave = (e) => {
+        // Only clear if we're actually leaving the container
+        // Check if we're moving to a child element (nested container)
+        const relatedTarget = e.relatedTarget;
+        if (!e.currentTarget.contains(relatedTarget)) {
+            // Check if relatedTarget is inside a nested LayoutContainer
+            const isMovingToNested = relatedTarget && relatedTarget.closest('[data-layout-container]');
+            if (!isMovingToNested) {
+                setDragOverIndex(null);
+                setDropIndicatorPosition(null);
+                setCalculatedInsertIndex(null);
+                setIsDragging(false);
+            }
+        }
+    };
+    const handleDrop = (e, index, containerId) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const dataTransferBlockId = e.dataTransfer.getData('block-id');
+        const globalBlockId = typeof window !== 'undefined' ? window.__DRAGGED_BLOCK_ID__ : null;
+        const blockId = dataTransferBlockId || globalBlockId;
+        const blockType = e.dataTransfer.getData('block-type');
+        console.log('[EditorBody] Drop Event:', {
+            index,
+            containerId,
+            dataTransferBlockId,
+            globalBlockId,
+            resolvedBlockId: blockId,
+            blockType,
+            currentBlocks: blocks.map(b => ({ id: b.id, type: b.type })),
+            rootBlockIds: blocks.map(b => b.id),
+        });
+        // Clear the global dragged block ID
+        if (typeof window !== 'undefined') {
+            window.__DRAGGED_BLOCK_ID__ = null;
+        }
+        if (blockId) {
+            // Moving existing block - check if it's in root or nested
+            const currentIndex = blocks.findIndex(b => b.id === blockId);
+            console.log('[EditorBody] Block location check:', {
+                blockId,
+                currentIndex,
+                isInRoot: currentIndex !== -1,
+                targetIndex: index,
+                containerId,
+            });
+            if (currentIndex !== -1) {
+                // Block is in root level - move to container or within root
+                if (containerId) {
+                    // Moving from root to container
+                    console.log('[EditorBody] Moving from root to container:', { blockId, index, containerId });
+                    onBlockMove(blockId, index, containerId);
+                }
+                else if (currentIndex !== index) {
+                    // Moving within root level
+                    const targetIndex = currentIndex < index ? index - 1 : index;
+                    console.log('[EditorBody] Moving within root:', { blockId, currentIndex, targetIndex });
+                    onBlockMove(blockId, targetIndex);
+                }
+                else {
+                    console.log('[EditorBody] Block already at target position, no move needed');
+                }
+            }
+            else {
+                // Block is nested somewhere - need to move it to this location
+                console.log('[EditorBody] Moving nested block to root:', { blockId, index, containerId: containerId || 'root' });
+                // Pass undefined containerId to move to root
+                onBlockMove(blockId, index, undefined);
+            }
+        }
+        else if (blockType) {
+            // Adding new block from library
+            console.log('[EditorBody] Adding new block from library:', { blockType, index, containerId });
+            onBlockAdd(blockType, index, containerId);
+        }
+        else {
+            console.warn('[EditorBody] Drop event with no block ID or type!');
+        }
+        setDragOverIndex(null);
+        setIsDragging(false);
+        setDraggedBlockId(null);
+        setDropIndicatorPosition(null);
+        setCalculatedInsertIndex(null);
+    };
+    const handleBodyDragOver = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        // Check if we're dragging over a nested container - if so, clear our indicator
+        const target = e.target;
+        const nestedContainer = target.closest('[data-layout-container]');
+        if (nestedContainer && nestedContainer !== containerRef.current) {
+            // We're over a nested container, clear our indicator
+            setDropIndicatorPosition(null);
+            setDragOverIndex(null);
+            setCalculatedInsertIndex(null);
+            setIsDragging(false);
+            return;
+        }
+        setIsDragging(true);
+        // Calculate drop indicator position based on mouse Y position relative to blocks
+        const container = containerRef.current;
+        if (container && blocks.length > 0) {
+            requestAnimationFrame(() => {
+                if (!containerRef.current)
+                    return;
+                const containerRect = containerRef.current.getBoundingClientRect();
+                const mouseY = e.clientY;
+                const relativeTop = mouseY - containerRect.top;
+                const padding = 32;
+                const width = containerRect.width - (padding * 2);
+                // Find the closest insertion point based on block positions - always between blocks
+                let insertIndex = blocks.length; // Default to end
+                let indicatorTop = containerRect.height; // Default to bottom
+                // Check each block to find where to insert
+                for (let i = 0; i < blocks.length; i++) {
+                    const blockEl = blockRefs.current.get(blocks[i].id);
+                    if (blockEl) {
+                        const blockRect = blockEl.getBoundingClientRect();
+                        const blockTop = blockRect.top - containerRect.top;
+                        const blockBottom = blockRect.bottom - containerRect.top;
+                        const blockCenter = blockTop + blockRect.height / 2;
+                        // If mouse is above this block's center, insert before it
+                        if (relativeTop < blockCenter) {
+                            insertIndex = i;
+                            if (i === 0) {
+                                // First block - show at top
+                                indicatorTop = 0;
+                            }
+                            else {
+                                // Get previous block to find the gap
+                                const prevBlock = blocks[i - 1];
+                                const prevBlockEl = blockRefs.current.get(prevBlock.id);
+                                if (prevBlockEl) {
+                                    const prevBlockRect = prevBlockEl.getBoundingClientRect();
+                                    const prevBlockBottom = prevBlockRect.bottom - containerRect.top;
+                                    // Position in the middle of the gap
+                                    indicatorTop = prevBlockBottom + (blockTop - prevBlockBottom) / 2;
+                                }
+                                else {
+                                    indicatorTop = blockTop;
+                                }
+                            }
+                            break;
+                        }
+                        // If mouse is below this block's center, check if we should insert after it
+                        else if (i === blocks.length - 1 || relativeTop < blockBottom) {
+                            insertIndex = i + 1;
+                            if (i === blocks.length - 1) {
+                                // Last block - show after it
+                                indicatorTop = blockBottom;
+                            }
+                            else {
+                                // Get next block to find the gap
+                                const nextBlock = blocks[i + 1];
+                                const nextBlockEl = blockRefs.current.get(nextBlock.id);
+                                if (nextBlockEl) {
+                                    const nextBlockRect = nextBlockEl.getBoundingClientRect();
+                                    const nextBlockTop = nextBlockRect.top - containerRect.top;
+                                    // Position in the middle of the gap
+                                    indicatorTop = blockBottom + (nextBlockTop - blockBottom) / 2;
+                                }
+                                else {
+                                    indicatorTop = blockBottom;
+                                }
+                            }
+                            break;
+                        }
+                    }
+                }
+                // If we didn't find a position, use the last block's bottom
+                if (insertIndex === blocks.length) {
+                    const lastBlockEl = blockRefs.current.get(blocks[blocks.length - 1].id);
+                    if (lastBlockEl) {
+                        const lastBlockRect = lastBlockEl.getBoundingClientRect();
+                        indicatorTop = lastBlockRect.bottom - containerRect.top;
+                    }
+                }
+                setCalculatedInsertIndex(insertIndex);
+                setDropIndicatorPosition({
+                    top: indicatorTop,
+                    left: padding,
+                    width: width,
+                });
+            });
+        }
+        else if (container) {
+            // No blocks, show indicator at top
+            requestAnimationFrame(() => {
+                if (!containerRef.current)
+                    return;
+                const containerRect = containerRef.current.getBoundingClientRect();
+                const padding = 32;
+                const width = containerRect.width - (padding * 2);
+                setCalculatedInsertIndex(0);
+                setDropIndicatorPosition({
+                    top: 0,
+                    left: padding,
+                    width: width,
+                });
+            });
+        }
+    };
+    const handleBodyDrop = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const dataTransferBlockId = e.dataTransfer.getData('block-id');
+        const globalBlockId = typeof window !== 'undefined' ? window.__DRAGGED_BLOCK_ID__ : null;
+        const blockId = dataTransferBlockId || globalBlockId;
+        const blockType = e.dataTransfer.getData('block-type');
+        // Use the calculated insert index if available, otherwise calculate it now
+        let targetIndex = calculatedInsertIndex !== null ? calculatedInsertIndex : blocks.length;
+        // If we don't have a calculated index, calculate it based on mouse position
+        if (calculatedInsertIndex === null && containerRef.current && blocks.length > 0) {
+            const containerRect = containerRef.current.getBoundingClientRect();
+            const mouseY = e.clientY;
+            const relativeTop = mouseY - containerRect.top;
+            for (let i = 0; i < blocks.length; i++) {
+                const blockEl = blockRefs.current.get(blocks[i].id);
+                if (blockEl) {
+                    const blockRect = blockEl.getBoundingClientRect();
+                    const blockTop = blockRect.top - containerRect.top;
+                    const blockCenter = blockTop + blockRect.height / 2;
+                    if (relativeTop < blockCenter) {
+                        targetIndex = i;
+                        break;
+                    }
+                    else if (i === blocks.length - 1) {
+                        targetIndex = blocks.length;
+                        break;
+                    }
+                }
+            }
+        }
+        console.log('[EditorBody] Body Drop Event:', {
+            dataTransferBlockId,
+            globalBlockId,
+            resolvedBlockId: blockId,
+            blockType,
+            calculatedInsertIndex,
+            targetIndex,
+            currentBlocksCount: blocks.length,
+            rootBlockIds: blocks.map(b => b.id),
+        });
+        // Clear the global dragged block ID
+        if (typeof window !== 'undefined') {
+            window.__DRAGGED_BLOCK_ID__ = null;
+        }
+        if (blockId) {
+            // Moving existing block to calculated position
+            const currentIndex = blocks.findIndex(b => b.id === blockId);
+            console.log('[EditorBody] Body drop - block location:', {
+                blockId,
+                currentIndex,
+                isInRoot: currentIndex !== -1,
+                targetIndex,
+            });
+            if (currentIndex !== -1) {
+                // Already in root, move to target position
+                if (currentIndex !== targetIndex) {
+                    // Adjust for removal if moving forward
+                    const adjustedIndex = currentIndex < targetIndex ? targetIndex - 1 : targetIndex;
+                    console.log('[EditorBody] Moving within root:', { blockId, currentIndex, adjustedIndex });
+                    onBlockMove(blockId, Math.max(0, adjustedIndex));
+                }
+            }
+            else {
+                // Block is nested - move it to root level at target position
+                console.log('[EditorBody] Moving nested block to root:', { blockId, targetIndex });
+                onBlockMove(blockId, targetIndex, undefined);
+            }
+        }
+        else if (blockType) {
+            // Adding new block at calculated position
+            console.log('[EditorBody] Adding new block:', { blockType, index: targetIndex });
+            onBlockAdd(blockType, targetIndex);
+        }
+        else {
+            console.warn('[EditorBody] Body drop with no block ID or type!');
+        }
+        setIsDragging(false);
+        setDragOverIndex(null);
+        setDraggedBlockId(null);
+        setDropIndicatorPosition(null);
+        setCalculatedInsertIndex(null);
+    };
+    return (_jsxs("div", { ref: containerRef, className: `relative w-full rounded-[2.5rem] border shadow-lg min-h-[400px] transition-all bg-transparent ${darkMode
+            ? 'border-neutral-200 dark:border-neutral-800 shadow-neutral-200/50 dark:shadow-neutral-900/50'
+            : 'border-neutral-200 shadow-neutral-200/50'}`, onDragOver: handleBodyDragOver, onDrop: handleBodyDrop, onDragLeave: handleDragLeave, onDragStart: handleDragStart, onDragEnd: () => {
+            setDropIndicatorPosition(null);
+            setDragOverIndex(null);
+            setIsDragging(false);
+            setDraggedBlockId(null);
+            setCalculatedInsertIndex(null);
+        }, children: [dropIndicatorPosition && isDragging && (_jsx(DropIndicator, { position: dropIndicatorPosition, darkMode: darkMode })), _jsx("div", { className: "flex flex-col p-8", onDragOver: (e) => {
+                    // Only handle if not over a block or nested container
+                    const target = e.target;
+                    const isOverBlock = target.closest('[data-block-wrapper]');
+                    const isOverNestedContainer = target.closest('[data-layout-container]') && target.closest('[data-layout-container]') !== containerRef.current;
+                    if (!isOverBlock && !isOverNestedContainer) {
+                        handleBodyDragOver(e);
+                    }
+                }, onDrop: (e) => {
+                    // Only handle if not over a block or nested container
+                    const target = e.target;
+                    const isOverBlock = target.closest('[data-block-wrapper]');
+                    const isOverNestedContainer = target.closest('[data-layout-container]') && target.closest('[data-layout-container]') !== containerRef.current;
+                    if (!isOverBlock && !isOverNestedContainer) {
+                        handleBodyDrop(e);
+                    }
+                }, children: blocks.length === 0 ? (_jsx(EmptyState, { isDragging: isDragging, darkMode: darkMode })) : (blocks.map((block, index) => (_jsxs(Fragment, { children: [index > 0 && (_jsx("div", { className: `h-6 transition-all duration-200 ${isDragging && dragOverIndex === index
+                                ? 'bg-primary/5 border-y border-dashed border-primary/20 rounded-lg'
+                                : 'bg-transparent'}` })), _jsx("div", { ref: setBlockRef(block.id), onDragOver: (e) => {
+                                const blockEl = blockRefs.current.get(block.id);
+                                if (blockEl) {
+                                    handleDragOver(e, index, blockEl);
+                                }
+                            }, onDragLeave: handleDragLeave, onDrop: (e) => handleDrop(e, index), className: "relative mb-6 last:mb-0", children: _jsx(BlockWrapper, { block: block, onUpdate: (data) => onBlockUpdate(block.id, data), onDelete: () => onBlockDelete(block.id), onMoveUp: index > 0 ? () => onBlockMove(block.id, index - 1) : undefined, onMoveDown: index < blocks.length - 1 ? () => onBlockMove(block.id, index + 1) : undefined, allBlocks: blocks }) })] }, block.id)))) })] }));
+}
+/**
+ * Visual Line that shows where the block will land
+ */
+function DropIndicator({ position, darkMode }) {
+    return (_jsxs("div", { className: "absolute z-50 pointer-events-none", style: {
+            top: `${position.top - 12}px`,
+            left: `${position.left}px`,
+            width: `${position.width}px`,
+            height: '24px',
+        }, children: [_jsx("div", { className: `absolute inset-0 rounded-lg border border-dashed backdrop-blur-sm ${darkMode
+                    ? 'bg-primary/10 dark:bg-primary/20 border-primary dark:border-primary/60'
+                    : 'bg-primary/10 border-primary'}` }), _jsx("div", { className: `absolute top-1/2 left-0 right-0 h-0.5 rounded-full transform -translate-y-1/2 ${darkMode ? 'bg-primary dark:bg-primary/80' : 'bg-primary'}` }), _jsx("div", { className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2", children: _jsx("div", { className: `w-6 h-6 rounded-full flex items-center justify-center shadow-lg shadow-primary/30 ${darkMode ? 'bg-primary dark:bg-primary/90' : 'bg-primary'}`, children: _jsx("div", { className: `w-2 h-2 rounded-full ${darkMode ? 'bg-white dark:bg-neutral-900' : 'bg-white'}` }) }) })] }));
+}
+/**
+ * Placeholder when the editor is empty
+ */
+function EmptyState({ isDragging, darkMode }) {
+    return (_jsxs("div", { className: `flex flex-col items-center justify-center py-20 px-8 rounded-2xl border border-dashed transition-all ${darkMode
+            ? isDragging
+                ? 'border-primary/30 bg-primary/5 dark:bg-primary/10'
+                : 'border-gray-200/50 dark:border-neutral-700/50 bg-neutral-50/50 dark:bg-neutral-800/30'
+            : isDragging
+                ? 'border-primary/30 bg-primary/5'
+                : 'border-gray-200/50 bg-neutral-50/50'}`, children: [_jsx("div", { className: `p-4 rounded-full mb-4 transition-colors ${darkMode
+                    ? isDragging
+                        ? 'bg-primary/10 dark:bg-primary/20'
+                        : 'bg-neutral-100 dark:bg-neutral-800'
+                    : isDragging
+                        ? 'bg-primary/10'
+                        : 'bg-neutral-100'}`, children: _jsx(Plus, { size: 24, className: `transition-colors ${darkMode
+                        ? isDragging
+                            ? 'text-primary'
+                            : 'text-neutral-400 dark:text-neutral-500'
+                        : isDragging
+                            ? 'text-primary'
+                            : 'text-neutral-400'}` }) }), _jsx("p", { className: `text-sm font-black uppercase tracking-wider transition-colors ${darkMode
+                    ? isDragging
+                        ? 'text-primary'
+                        : 'text-neutral-500 dark:text-neutral-400'
+                    : isDragging
+                        ? 'text-primary'
+                        : 'text-neutral-500'}`, children: isDragging ? 'Drop Block Here' : 'Drop a component here' }), _jsx("p", { className: `text-xs mt-2 ${darkMode ? 'text-neutral-400 dark:text-neutral-500' : 'text-neutral-400'}`, children: "Drag blocks from the library to get started" })] }));
+}

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

@@ -0,0 +1,18 @@
+export interface EditorHeaderProps {
+    isLibraryOpen: boolean;
+    onLibraryToggle: () => void;
+    isPreviewMode: boolean;
+    onPreviewToggle: () => void;
+    isSidebarOpen: boolean;
+    onSidebarToggle: () => void;
+    isSaving: boolean;
+    onSave: (publish?: boolean) => Promise<void>;
+    onSaveError: (error: string | null) => void;
+    autoSaveEnabled?: boolean;
+    onAutoSaveToggle?: (enabled: boolean) => void;
+    isDirty?: boolean;
+    autoSaveCountdown?: number | null;
+    autoSaveStatus?: 'idle' | 'saving' | 'saved' | 'error';
+}
+export declare function EditorHeader({ isLibraryOpen, onLibraryToggle, isPreviewMode, onPreviewToggle, isSidebarOpen, onSidebarToggle, isSaving, onSave, onSaveError, autoSaveEnabled, onAutoSaveToggle, isDirty, autoSaveCountdown, autoSaveStatus, }: EditorHeaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EditorHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorHeader.d.ts","sourceRoot":"","sources":["EditorHeader.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,iBAAiB;IAC9B,aAAa,EAAE,OAAO,CAAC;IACvB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,EAAE,OAAO,CAAC;IACvB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,EAAE,OAAO,CAAC;IACvB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,cAAc,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;CAC1D;AAED,wBAAgB,YAAY,CAAC,EACzB,aAAa,EACb,eAAe,EACf,aAAa,EACb,eAAe,EACf,aAAa,EACb,eAAe,EACf,QAAQ,EACR,MAAM,EACN,WAAW,EACX,eAAuB,EACvB,gBAAgB,EAChB,OAAe,EACf,iBAAwB,EACxB,cAAuB,GAC1B,EAAE,iBAAiB,2CAmOnB"}

package/src/views/CanvasEditor/EditorHeader.js

@@ -0,0 +1,101 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ArrowLeft, Library, Settings2, Clock, Edit, Eye } from 'lucide-react';
+import { useEditor } from '../../state/EditorContext';
+import { SaveConfirmationModal } from './SaveConfirmationModal';
+export function EditorHeader({ isLibraryOpen, onLibraryToggle, isPreviewMode, onPreviewToggle, isSidebarOpen, onSidebarToggle, isSaving, onSave, onSaveError, autoSaveEnabled = false, onAutoSaveToggle, isDirty = false, autoSaveCountdown = null, autoSaveStatus = 'idle', }) {
+    const { state, dispatch } = useEditor();
+    const [showConfirmModal, setShowConfirmModal] = useState(false);
+    const [saveAsDraft, setSaveAsDraft] = useState(false);
+    const [saveError, setSaveError] = useState(null);
+    const handleSaveDraftClick = () => {
+        setSaveAsDraft(true);
+        setSaveError(null); // Clear any previous errors
+        setShowConfirmModal(true);
+    };
+    const handlePublishClick = () => {
+        setSaveAsDraft(false);
+        setSaveError(null); // Clear any previous errors
+        setShowConfirmModal(true);
+    };
+    const handleConfirmSave = async () => {
+        try {
+            const targetStatus = saveAsDraft ? 'draft' : 'published';
+            console.log('[EditorHeader] Starting save process...', { saveAsDraft, targetStatus, currentStatus: state.status });
+            // Set status before saving - ensure state is updated
+            if (saveAsDraft) {
+                dispatch({ type: 'SET_STATUS', payload: 'draft' });
+            }
+            else {
+                dispatch({ type: 'SET_STATUS', payload: 'published' });
+            }
+            // Wait longer to ensure state update propagates through the reducer and context
+            // React state updates are asynchronous, so we need to wait for the state to actually update
+            await new Promise(resolve => setTimeout(resolve, 150));
+            // Verify status was updated
+            console.log('[EditorHeader] Status after update:', state.status, 'Expected:', targetStatus);
+            await onSave(!saveAsDraft);
+            console.log('[EditorHeader] Post saved successfully');
+            // Clear any previous errors
+            setSaveError(null);
+            // Modal will show success message and close automatically
+        }
+        catch (error) {
+            console.error('[EditorHeader] Failed to save post:', error);
+            // Extract user-friendly error message
+            let errorMessage = error.message || 'Failed to save post';
+            // Make error messages more user-friendly
+            if (errorMessage.includes('Missing required fields')) {
+                // Keep the detailed message about missing 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);
+            onSaveError(errorMessage);
+            // Re-throw the error so the modal knows it failed and doesn't show success
+            throw error;
+        }
+    };
+    return (_jsxs("header", { className: "flex items-center justify-between px-6 py-3 bg-dashboard-sidebar backdrop-blur-md border-b border-dashboard-border flex-none shrink-0", children: [_jsxs("div", { className: "flex items-center gap-6", children: [_jsx("button", { onClick: () => {
+                            if (isDirty) {
+                                const confirmed = window.confirm('You have unsaved changes. Are you sure you want to leave? Your changes will be lost.');
+                                if (!confirmed) {
+                                    return;
+                                }
+                            }
+                            window.location.href = '/dashboard/blog';
+                        }, className: "text-neutral-500 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white transition-colors", children: _jsx(ArrowLeft, { size: 20, strokeWidth: 1.5 }) }), _jsx("div", { className: "h-4 w-[1px] bg-neutral-300 dark:border-neutral-700" }), _jsxs("button", { onClick: onLibraryToggle, className: `flex items-center gap-2 text-[10px] uppercase tracking-widest font-black transition-all ${isLibraryOpen ? 'text-dashboard-text' : 'text-neutral-500 dark:text-neutral-400'}`, children: [_jsx(Library, { size: 16, strokeWidth: 1.5 }), "Library"] })] }), _jsxs("div", { className: "flex items-center gap-4", children: [onAutoSaveToggle && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("button", { onClick: () => onAutoSaveToggle(!autoSaveEnabled), className: `relative flex items-center gap-2 px-3 py-1.5 rounded-full text-[10px] uppercase tracking-widest font-bold transition-all ${autoSaveEnabled
+                                    ? 'bg-primary/20 text-primary border border-primary/30'
+                                    : 'bg-dashboard-bg text-neutral-600 dark:text-neutral-400 border border-dashboard-border hover:text-neutral-950 dark:hover:text-white'}`, title: autoSaveEnabled ? 'Auto-save enabled (saves after 10s of inactivity)' : 'Click to enable auto-save', children: [_jsx(Clock, { size: 12, className: autoSaveEnabled && autoSaveStatus !== 'saving' ? 'animate-pulse' : '' }), _jsx("span", { children: "Auto-save" }), _jsx("span", { className: `ml-1 text-[9px] ${autoSaveEnabled ? 'text-primary' : 'text-neutral-500 dark:text-neutral-400'}`, children: autoSaveEnabled ? 'ON' : 'OFF' }), autoSaveEnabled && isDirty && (_jsxs("span", { className: "ml-1.5 text-[9px] font-bold tabular-nums", children: [autoSaveStatus === 'saving' && (_jsx("span", { className: "text-primary animate-pulse", children: "Saving..." })), autoSaveStatus === 'saved' && (_jsx("span", { className: "text-green-500 dark:text-green-400", children: "Saved!" })), autoSaveStatus === 'error' && (_jsx("span", { className: "text-red-500 dark:text-red-400", children: "Error" })), autoSaveStatus === 'idle' && autoSaveCountdown !== null && (_jsxs("span", { className: "text-primary/70", children: [autoSaveCountdown, "s"] }))] }))] }), isDirty && !autoSaveEnabled && (_jsx("span", { className: "text-[10px] text-amber-500 dark:text-amber-400 font-bold uppercase tracking-widest animate-pulse", children: "Unsaved" }))] })), _jsxs("div", { className: "flex items-center bg-dashboard-bg border border-dashboard-border rounded-full p-1 gap-1", children: [_jsxs("button", { onClick: () => {
+                                    if (isPreviewMode) {
+                                        onPreviewToggle();
+                                    }
+                                }, className: `flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] uppercase tracking-widest font-bold transition-all ${!isPreviewMode
+                                    ? 'bg-primary text-white shadow-sm'
+                                    : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white'}`, title: "Edit mode - Make changes to your post", children: [_jsx(Edit, { size: 12, strokeWidth: 2.5 }), _jsx("span", { children: "Edit" })] }), _jsxs("button", { onClick: () => {
+                                    if (!isPreviewMode) {
+                                        onPreviewToggle();
+                                    }
+                                }, className: `flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] uppercase tracking-widest font-bold transition-all ${isPreviewMode
+                                    ? 'bg-primary text-white shadow-sm'
+                                    : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white'}`, title: "Preview mode - See how your post will look", children: [_jsx(Eye, { size: 12, strokeWidth: 2.5 }), _jsx("span", { children: "Preview" })] })] }), (state.status === 'draft' || !state.postId) && (_jsx("button", { onClick: handleSaveDraftClick, disabled: isSaving, className: `px-4 py-2 border-2 border-dashboard-border text-dashboard-text rounded-full text-[10px] font-bold uppercase tracking-widest transition-all ${isSaving
+                            ? 'opacity-50 cursor-not-allowed'
+                            : 'hover:bg-dashboard-bg'}`, children: isSaving ? 'Saving...' : 'Save Draft' })), _jsx("button", { onClick: handlePublishClick, disabled: isSaving, className: `px-6 py-2 bg-primary text-white rounded-full text-[10px] font-bold uppercase tracking-widest transition-all shadow-lg shadow-primary/20 ${isSaving
+                            ? 'opacity-50 cursor-not-allowed'
+                            : 'hover:bg-primary/90'}`, children: isSaving ? 'Saving...' : state.status === 'published' ? 'Update Post' : 'Publish Post' }), _jsx("button", { onClick: onSidebarToggle, className: `p-2 rounded-full transition-colors ${isSidebarOpen
+                            ? 'bg-dashboard-bg text-dashboard-text'
+                            : 'text-neutral-500 dark:text-neutral-400 hover:bg-dashboard-bg'}`, children: _jsx(Settings2, { size: 18 }) })] }), _jsx(SaveConfirmationModal, { isOpen: showConfirmModal, onClose: () => {
+                    setShowConfirmModal(false);
+                    setSaveAsDraft(false);
+                    setSaveError(null);
+                }, onConfirm: handleConfirmSave, isSaving: isSaving, postTitle: state.title || undefined, isPublished: state.status === 'published', saveAsDraft: saveAsDraft, error: saveError })] }));
+}

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

@@ -0,0 +1,17 @@
+/**
+ * Layout Container Component
+ * Recursive drop zone for nested blocks
+ */
+import { Block } from '../../types/block';
+export interface LayoutContainerProps {
+    blocks: Block[];
+    containerId: string;
+    onBlockAdd: (type: string, index: number, containerId: string) => void;
+    onBlockUpdate: (id: string, data: Partial<Block['data']>, containerId: string) => void;
+    onBlockDelete: (id: string, containerId: string) => void;
+    onBlockMove: (id: string, newIndex: number, containerId: string) => void;
+    className?: string;
+    emptyLabel?: string;
+}
+export declare function LayoutContainer({ blocks, containerId, onBlockAdd, onBlockUpdate, onBlockDelete, onBlockMove, className, emptyLabel, }: LayoutContainerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LayoutContainer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutContainer.d.ts","sourceRoot":"","sources":["LayoutContainer.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAI1C,MAAM,WAAW,oBAAoB;IACjC,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACvE,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACvF,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,eAAe,CAAC,EAC5B,MAAM,EACN,WAAW,EACX,UAAU,EACV,aAAa,EACb,aAAa,EACb,WAAW,EACX,SAAc,EACd,UAA+B,GAClC,EAAE,oBAAoB,2CA6OtB"}