@jhits/plugin-blog 0.0.14 → 0.0.16

package/src/views/CanvasEditor/EditorHeader.tsx

@@ -0,0 +1,268 @@
+'use client';
+
+import React, { useState } from 'react';
+import { ArrowLeft, Library, Settings2, Save, Clock, Edit, Eye } from 'lucide-react';
+import { useEditor } from '../../state/EditorContext';
+import { SaveConfirmationModal } from './SaveConfirmationModal';
+
+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 function EditorHeader({
+    isLibraryOpen,
+    onLibraryToggle,
+    isPreviewMode,
+    onPreviewToggle,
+    isSidebarOpen,
+    onSidebarToggle,
+    isSaving,
+    onSave,
+    onSaveError,
+    autoSaveEnabled = false,
+    onAutoSaveToggle,
+    isDirty = false,
+    autoSaveCountdown = null,
+    autoSaveStatus = 'idle',
+}: EditorHeaderProps) {
+    const { state, dispatch } = useEditor();
+    const [showConfirmModal, setShowConfirmModal] = useState(false);
+    const [saveAsDraft, setSaveAsDraft] = useState(false);
+    const [saveError, setSaveError] = useState<string | null>(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: any) {
+            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 (
+        <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">
+            <div className="flex items-center gap-6">
+                <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"
+                >
+                    <ArrowLeft size={20} strokeWidth={1.5} />
+                </button>
+                <div className="h-4 w-[1px] bg-neutral-300 dark:border-neutral-700" />
+                <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'
+                        }`}
+                >
+                    <Library size={16} strokeWidth={1.5} />
+                    Library
+                </button>
+            </div>
+
+            <div className="flex items-center gap-4">
+                {/* Auto-save Toggle */}
+                {onAutoSaveToggle && (
+                    <div className="flex items-center gap-2">
+                        <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'}
+                        >
+                            <Clock size={12} className={autoSaveEnabled && autoSaveStatus !== 'saving' ? 'animate-pulse' : ''} />
+                            <span>Auto-save</span>
+                            <span className={`ml-1 text-[9px] ${autoSaveEnabled ? 'text-primary' : 'text-neutral-500 dark:text-neutral-400'}`}>
+                                {autoSaveEnabled ? 'ON' : 'OFF'}
+                            </span>
+                            {/* Countdown or Status */}
+                            {autoSaveEnabled && isDirty && (
+                                <span className="ml-1.5 text-[9px] font-bold tabular-nums">
+                                    {autoSaveStatus === 'saving' && (
+                                        <span className="text-primary animate-pulse">Saving...</span>
+                                    )}
+                                    {autoSaveStatus === 'saved' && (
+                                        <span className="text-green-500 dark:text-green-400">Saved!</span>
+                                    )}
+                                    {autoSaveStatus === 'error' && (
+                                        <span className="text-red-500 dark:text-red-400">Error</span>
+                                    )}
+                                    {autoSaveStatus === 'idle' && autoSaveCountdown !== null && (
+                                        <span className="text-primary/70">{autoSaveCountdown}s</span>
+                                    )}
+                                </span>
+                            )}
+                        </button>
+                        {/* Unsaved Changes Indicator - only show when auto-save is off */}
+                        {isDirty && !autoSaveEnabled && (
+                            <span className="text-[10px] text-amber-500 dark:text-amber-400 font-bold uppercase tracking-widest animate-pulse">
+                                Unsaved
+                            </span>
+                        )}
+                    </div>
+                )}
+                {/* Edit/Preview Toggle - Segmented Control Style */}
+                <div className="flex items-center bg-dashboard-bg border border-dashboard-border rounded-full p-1 gap-1">
+                    <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"
+                    >
+                        <Edit size={12} strokeWidth={2.5} />
+                        <span>Edit</span>
+                    </button>
+                    <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"
+                    >
+                        <Eye size={12} strokeWidth={2.5} />
+                        <span>Preview</span>
+                    </button>
+                </div>
+                {/* Save Draft Button - Always visible for drafts and new posts */}
+                {(state.status === 'draft' || !state.postId) && (
+                    <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'
+                            }`}
+                    >
+                        {isSaving ? 'Saving...' : 'Save Draft'}
+                    </button>
+                )}
+                {/* Publish/Update Button */}
+                <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'
+                        }`}
+                >
+                    {isSaving ? 'Saving...' : state.status === 'published' ? 'Update Post' : 'Publish Post'}
+                </button>
+                <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'
+                        }`}
+                >
+                    <Settings2 size={18} />
+                </button>
+            </div>
+
+            {/* Save Confirmation Modal */}
+            <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}
+            />
+        </header>
+    );
+}
+

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"}

package/src/views/CanvasEditor/LayoutContainer.tsx

@@ -0,0 +1,322 @@
+/**
+ * Layout Container Component
+ * Recursive drop zone for nested blocks
+ */
+
+'use client';
+
+import React, { useState, useEffect, useRef } from 'react';
+import { Plus } from 'lucide-react';
+import { Block } from '../../types/block';
+import { BlockWrapper } from './BlockWrapper';
+import { useEditor } from '../../state/EditorContext';
+
+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 function LayoutContainer({
+    blocks,
+    containerId,
+    onBlockAdd,
+    onBlockUpdate,
+    onBlockDelete,
+    onBlockMove,
+    className = '',
+    emptyLabel = 'Drop blocks here',
+}: LayoutContainerProps) {
+    const { darkMode } = useEditor();
+
+    // --- State ---
+    const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
+    const [dropAtEnd, setDropAtEnd] = useState(false);
+    const [isDragging, setIsDragging] = useState(false);
+    const [dropIndicatorPosition, setDropIndicatorPosition] = useState<{ top: number; left: number; width: number } | null>(null);
+
+    const containerRef = useRef<HTMLDivElement>(null);
+    const blockRefs = useRef<Map<string, HTMLDivElement>>(new Map());
+    // Use ref to ensure we always have the latest dropAtEnd value (React state updates are async)
+    const dropAtEndRef = useRef(false);
+
+    // --- Cleanup & Event Listeners ---
+    useEffect(() => {
+        const resetState = () => {
+            setDropIndicatorPosition(null);
+            setDragOverIndex(null);
+            setDropAtEnd(false);
+            dropAtEndRef.current = false; // Reset ref too
+            setIsDragging(false);
+            // Clear global dragged block ID on dragend (in case drag was cancelled)
+            if (typeof window !== 'undefined') {
+                (window as any).__DRAGGED_BLOCK_ID__ = null;
+            }
+        };
+
+        const container = containerRef.current;
+        if (container) {
+            container.addEventListener('clear-drop-indicator', resetState);
+            document.addEventListener('dragend', resetState);
+            return () => {
+                container.removeEventListener('clear-drop-indicator', resetState);
+                document.removeEventListener('dragend', resetState);
+            };
+        }
+    }, []);
+
+    // --- Drag & Drop Logic ---
+
+    const handleDragOverBlock = (e: React.DragEvent, index: number, element: HTMLElement) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        // 1. Check for deeper nested containers
+        const target = e.target as HTMLElement;
+        const deeperContainer = target.closest('[data-layout-container]');
+        if (deeperContainer && deeperContainer !== containerRef.current) {
+            setDropIndicatorPosition(null);
+            return;
+        }
+
+        // 2. Notify parent containers to hide their indicators
+        e.currentTarget.dispatchEvent(new CustomEvent('clear-drop-indicator', { bubbles: true }));
+
+        // 3. Calculate "Above" vs "Below" and position indicator between blocks
+        const containerRect = containerRef.current!.getBoundingClientRect();
+        const elementRect = element.getBoundingClientRect();
+        const mouseRelativeToBlock = e.clientY - elementRect.top;
+        const isBottomHalf = mouseRelativeToBlock > (elementRect.height / 2);
+
+        setDragOverIndex(index);
+        setDropAtEnd(isBottomHalf);
+        dropAtEndRef.current = isBottomHalf; // Update ref immediately
+        setIsDragging(true);
+
+        // 4. Update Visual Indicator - always show between blocks
+        const elementTop = elementRect.top - containerRect.top;
+        const elementBottom = elementRect.bottom - containerRect.top;
+        let indicatorTop: number;
+
+        if (isBottomHalf) {
+            // Show below this block - position between current block and next block
+            if (index === blocks.length - 1) {
+                // Last block - show after it
+                indicatorTop = 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 (mb-4 = 16px margin)
+                    indicatorTop = elementBottom + (nextBlockTop - elementBottom) / 2;
+                } else {
+                    indicatorTop = elementBottom;
+                }
+            }
+        } else {
+            // Show above this block - position between previous block and current block
+            if (index === 0) {
+                // First block - show at top of container (before first block)
+                indicatorTop = 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-4 = 16px margin)
+                    indicatorTop = prevBlockBottom + (elementTop - prevBlockBottom) / 2;
+                } else {
+                    indicatorTop = elementTop;
+                }
+            }
+        }
+
+        setDropIndicatorPosition({
+            top: indicatorTop,
+            left: 0,
+            width: containerRect.width,
+        });
+    };
+
+    const handleDrop = (e: React.DragEvent, index: number | null) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const blockId = e.dataTransfer.getData('block-id') || (window as any).__DRAGGED_BLOCK_ID__;
+        const blockType = e.dataTransfer.getData('block-type');
+
+        // Clear the global dragged block ID immediately to prevent it from being used for new blocks
+        if (typeof window !== 'undefined') {
+            (window as any).__DRAGGED_BLOCK_ID__ = null;
+        }
+
+        // Logic: index is null when dropping on the container background (appends to end)
+        // When dropAtEnd is true, we want to place it AFTER the block at index, so targetIndex = index + 1
+        // When dropAtEnd is false, we want to place it BEFORE the block at index, so targetIndex = index
+        // Use ref to get the latest value (React state updates are async)
+        const isDropAtEnd = dropAtEndRef.current;
+        let targetIndex = index === null ? blocks.length : (isDropAtEnd ? index + 1 : index);
+
+        if (blockId) {
+            const currentIndex = blocks.findIndex(b => b.id === blockId);
+            if (currentIndex !== -1) {
+                // Moving within the same array - need to adjust for removal
+                let finalMoveIndex = targetIndex;
+                
+                if (currentIndex < targetIndex) {
+                    // Moving forward: when we remove the item from currentIndex, everything after it shifts down by 1.
+                    if (isDropAtEnd) {
+                        // Dropping below: we want it at index + 1 in the original array
+                        // If currentIndex <= index: after removal, block at index stays at index, so we want index + 1 = targetIndex
+                        // If index < currentIndex < targetIndex: after removal, we still want index + 1, but since we removed
+                        // an item before targetIndex, the position targetIndex in original = targetIndex - 1 in new array
+                        if (index !== null && currentIndex <= index) {
+                            // Item is at or before target block - no adjustment needed
+                            finalMoveIndex = targetIndex;
+                        } else {
+                            // Item is after target block but before targetIndex - need to adjust
+                            finalMoveIndex = targetIndex - 1;
+                        }
+                    } else {
+                        // Dropping above: targetIndex = index means "before the block at index"
+                        // After removal, if currentIndex < index, the block at index shifts to index - 1,
+                        // so we want it at index - 1 in the new array.
+                        finalMoveIndex = targetIndex - 1;
+                    }
+                }
+                // If currentIndex >= targetIndex, no adjustment needed (moving backward or same position)
+                
+                console.log('[LayoutContainer] Drop calculation:', {
+                    blockId,
+                    index,
+                    dropAtEnd: isDropAtEnd,
+                    currentIndex,
+                    targetIndex,
+                    finalMoveIndex,
+                    blocksCount: blocks.length
+                });
+                
+                onBlockMove(blockId, Math.max(0, finalMoveIndex), containerId);
+            } else {
+                // Moving from another container - no adjustment needed
+                onBlockMove(blockId, targetIndex, containerId);
+            }
+        } else if (blockType) {
+            // Adding new block - use targetIndex as-is
+            onBlockAdd(blockType, targetIndex, containerId);
+        }
+
+        // Clean up
+        setDropIndicatorPosition(null);
+        setDragOverIndex(null);
+        setDropAtEnd(false);
+    };
+
+    const setBlockRef = (id: string) => (el: HTMLDivElement | null) => {
+        if (el) blockRefs.current.set(id, el); else blockRefs.current.delete(id);
+    };
+
+    return (
+        <div
+            ref={containerRef}
+            data-layout-container={containerId}
+            className={`relative flex flex-col min-h-[40px] transition-colors ${className}`}
+            onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
+            onDrop={(e) => handleDrop(e, null)}
+            onDragLeave={(e) => {
+                if (!e.currentTarget.contains(e.relatedTarget as Node)) {
+                    setDropIndicatorPosition(null);
+                }
+            }}
+        >
+            {/* 1. Visual Indicator Overlay */}
+            {dropIndicatorPosition && isDragging && (
+                <DropIndicator position={dropIndicatorPosition} darkMode={darkMode} />
+            )}
+
+            {/* 2. Content Area */}
+            {blocks.length === 0 ? (
+                <EmptyState isDragging={isDragging} darkMode={darkMode} label={emptyLabel} />
+            ) : (
+                blocks.map((block, index) => (
+                    <div
+                        key={block.id}
+                        ref={setBlockRef(block.id)}
+                        onDragOver={(e) => handleDragOverBlock(e, index, blockRefs.current.get(block.id)!)}
+                        onDrop={(e) => handleDrop(e, index)}
+                        className="relative mb-4 last:mb-0"
+                    >
+                        <BlockWrapper
+                            block={block}
+                            onUpdate={(data) => onBlockUpdate(block.id, data, containerId)}
+                            onDelete={() => onBlockDelete(block.id, containerId)}
+                            onMoveUp={index > 0 ? () => onBlockMove(block.id, index - 1, containerId) : undefined}
+                            onMoveDown={index < blocks.length - 1 ? () => onBlockMove(block.id, index + 1, containerId) : undefined}
+                        />
+                    </div>
+                ))
+            )}
+        </div>
+    );
+}
+
+/**
+ * Visual Line that shows where the block will land
+ */
+function DropIndicator({ position, darkMode }: { position: any; darkMode: boolean }) {
+    return (
+        <div
+            className="absolute z-50 pointer-events-none"
+            style={{
+                top: `${position.top - 12}px`,
+                left: `${position.left}px`,
+                width: `${position.width}px`,
+                height: '24px',
+            }}
+        >
+            <div className={`absolute inset-0 rounded-lg border border-dashed backdrop-blur-sm 
+                ${darkMode ? 'bg-primary/20 border-primary/40' : 'bg-primary/10 border-primary/30'}`}
+            />
+            <div className={`absolute top-1/2 left-0 right-0 h-0.5 transform -translate-y-1/2 
+                ${darkMode ? 'bg-primary' : 'bg-primary'}`}
+            />
+            <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+                <div className="w-6 h-6 rounded-full flex items-center justify-center bg-primary shadow-lg">
+                    <div className="w-2 h-2 rounded-full bg-white" />
+                </div>
+            </div>
+        </div>
+    );
+}
+
+/**
+ * Placeholder when the container is empty
+ */
+function EmptyState({ isDragging, darkMode, label }: { isDragging: boolean; darkMode: boolean; label: string }) {
+    return (
+        <div className={`flex flex-col items-center justify-center py-12 px-6 rounded-2xl border border-dashed transition-all
+            ${darkMode
+                ? isDragging ? 'border-primary/50 bg-primary/10' : 'border-neutral-700 bg-neutral-800/20'
+                : isDragging ? 'border-primary/50 bg-primary/5' : 'border-neutral-200 bg-neutral-50/30'
+            }`}
+        >
+            <div className={`p-3 rounded-full mb-3 ${darkMode ? 'bg-neutral-800' : 'bg-neutral-100'}`}>
+                <Plus size={20} className={isDragging ? 'text-primary' : 'text-neutral-400'} />
+            </div>
+            <p className={`text-xs font-black uppercase tracking-wider 
+                ${isDragging ? 'text-primary' : 'text-neutral-500'}`}>
+                {isDragging ? 'Drop Block Here' : label}
+            </p>
+        </div>
+    );
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface SaveConfirmationModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => Promise<void>;
+    isSaving: boolean;
+    postTitle?: string;
+    isPublished?: boolean;
+    saveAsDraft?: boolean;
+    error?: string | null;
+}
+export declare function SaveConfirmationModal({ isOpen, onClose, onConfirm, isSaving, postTitle, isPublished, saveAsDraft, error, }: SaveConfirmationModalProps): React.ReactPortal | null;
+//# sourceMappingURL=SaveConfirmationModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SaveConfirmationModal.d.ts","sourceRoot":"","sources":["SaveConfirmationModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,MAAM,WAAW,0BAA0B;IACvC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/B,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAED,wBAAgB,qBAAqB,CAAC,EAClC,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAS,EACT,WAAW,EACX,WAAmB,EACnB,KAAK,GACR,EAAE,0BAA0B,4BA4M5B"}