@jhits/plugin-blog 0.0.5 → 0.0.7

package/src/views/CanvasEditor/LayoutContainer.tsx

@@ -1,49 +1,27 @@
 /**
  * Layout Container Component
- * Recursive drop zone for nested blocks (used in Section, Columns, etc.)
+ * Recursive drop zone for nested blocks
  */
 
 'use client';
 
-import React, { useState, Fragment, useEffect } from 'react';
+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 {
-    /** Child blocks to render */
     blocks: Block[];
-
-    /** Container ID (for nested operations) */
     containerId: string;
-
-    /** Callback when a block is added to this container */
     onBlockAdd: (type: string, index: number, containerId: string) => void;
-
-    /** Callback when a block is updated */
     onBlockUpdate: (id: string, data: Partial<Block['data']>, containerId: string) => void;
-
-    /** Callback when a block is deleted */
     onBlockDelete: (id: string, containerId: string) => void;
-
-    /** Callback when a block is moved */
     onBlockMove: (id: string, newIndex: number, containerId: string) => void;
-
-    /** Additional CSS classes for styling */
     className?: string;
-
-    /** Whether this is an empty state (show drop zone) */
-    isEmpty?: boolean;
-
-    /** Label for empty state */
     emptyLabel?: string;
 }
 
-/**
- * Layout Container
- * Recursive drop zone that can contain nested blocks
- */
 export function LayoutContainer({
     blocks,
     containerId,
@@ -52,443 +30,293 @@ export function LayoutContainer({
     onBlockDelete,
     onBlockMove,
     className = '',
-    isEmpty = false,
     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 [draggedBlockId, setDraggedBlockId] = useState<string | null>(null);
     const [dropIndicatorPosition, setDropIndicatorPosition] = useState<{ top: number; left: number; width: number } | null>(null);
-    const containerRef = React.useRef<HTMLDivElement>(null);
 
-    // Listen for clear-drop-indicator events from nested containers
+    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 handleClearIndicator = () => {
+        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', handleClearIndicator);
+            container.addEventListener('clear-drop-indicator', resetState);
+            document.addEventListener('dragend', resetState);
             return () => {
-                container.removeEventListener('clear-drop-indicator', handleClearIndicator);
+                container.removeEventListener('clear-drop-indicator', resetState);
+                document.removeEventListener('dragend', resetState);
             };
         }
     }, []);
 
-    // Global drag end handler - clear all indicators when drag ends
-    useEffect(() => {
-        const handleGlobalDragEnd = () => {
-            setDropIndicatorPosition(null);
-            setDragOverIndex(null);
-            setIsDragging(false);
-            setDraggedBlockId(null);
-        };
-
-        document.addEventListener('dragend', handleGlobalDragEnd);
-        return () => {
-            document.removeEventListener('dragend', handleGlobalDragEnd);
-        };
-    }, []);
-
-    // Store refs for all blocks - use callback refs to avoid hook violations
-    const blockRefs = React.useRef<Map<string, HTMLDivElement>>(new Map());
-
-    const setBlockRef = (blockId: string) => (el: HTMLDivElement | null) => {
-        if (el) {
-            blockRefs.current.set(blockId, el);
-        } else {
-            blockRefs.current.delete(blockId);
-        }
-    };
+    // --- Drag & Drop Logic ---
 
-    const handleDragStart = (e: React.DragEvent) => {
-        // This is called when dragging starts from the container
-        // The actual block drag start is handled in BlockWrapper
-        setIsDragging(true);
-    };
-
-    const handleDragOver = (e: React.DragEvent, index: number, element?: HTMLElement) => {
+    const handleDragOverBlock = (e: React.DragEvent, index: number, element: HTMLElement) => {
         e.preventDefault();
-        e.stopPropagation(); // Prevent parent containers from also handling this
+        e.stopPropagation();
 
-        // Check if we're dragging over a deeper nested container - if so, clear our indicator
+        // 1. Check for deeper nested containers
         const target = e.target as HTMLElement;
         const deeperContainer = target.closest('[data-layout-container]');
         if (deeperContainer && deeperContainer !== containerRef.current) {
-            // We're over a deeper nested container, clear our indicator
             setDropIndicatorPosition(null);
-            setDragOverIndex(null);
             return;
         }
 
-        // Clear any parent container indicators by dispatching a custom event
-        // This ensures only the active (deepest) container shows an indicator
-        const customEvent = new CustomEvent('clear-drop-indicator', { bubbles: true });
-        e.currentTarget.dispatchEvent(customEvent);
+        // 2. Notify parent containers to hide their indicators
+        e.currentTarget.dispatchEvent(new CustomEvent('clear-drop-indicator', { bubbles: true }));
 
-        setDragOverIndex(index);
+        // 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);
 
-        // Calculate position for absolute drop indicator using mouse position
-        const container = containerRef.current;
-        if (container) {
-            requestAnimationFrame(() => {
-                // Double-check refs are still valid inside RAF callback
-                if (!containerRef.current) return;
-
-                const containerRect = containerRef.current.getBoundingClientRect();
-                // Use mouse Y position relative to container for accurate positioning
-                const mouseY = e.clientY;
-                const relativeTop = mouseY - containerRect.top;
+        setDragOverIndex(index);
+        setDropAtEnd(isBottomHalf);
+        dropAtEndRef.current = isBottomHalf; // Update ref immediately
+        setIsDragging(true);
 
-                // Determine if we should show above or below the element
-                let finalTop = relativeTop;
-                if (element) {
-                    const elementRect = element.getBoundingClientRect();
-                    const elementTop = elementRect.top - containerRect.top;
-                    const elementCenter = elementTop + elementRect.height / 2;
+        // 4. Update Visual Indicator - always show between blocks
+        const elementTop = elementRect.top - containerRect.top;
+        const elementBottom = elementRect.bottom - containerRect.top;
+        let indicatorTop: number;
 
-                    // If mouse is in upper half of element, show above; otherwise show below
-                    if (relativeTop < elementCenter) {
-                        finalTop = elementTop;
-                    } else {
-                        finalTop = elementTop + elementRect.height;
-                    }
+        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;
                 }
-
-                setDropIndicatorPosition({
-                    top: finalTop,
-                    left: 0,
-                    width: containerRect.width,
-                });
-            });
-        }
-    };
-
-    const handleDragLeave = (e: React.DragEvent) => {
-        // Only clear if we're actually leaving the container
-        // Check if we're moving to a child element (nested container)
-        const relatedTarget = e.relatedTarget as Node;
-        if (!e.currentTarget.contains(relatedTarget)) {
-            // Check if relatedTarget is inside a nested LayoutContainer
-            const isMovingToNested = relatedTarget && (relatedTarget as HTMLElement).closest('[data-layout-container]');
-            if (!isMovingToNested) {
-                setDragOverIndex(null);
-                setDropIndicatorPosition(null);
             }
-        }
-    };
-
-    const handleDrop = (e: React.DragEvent, index: number) => {
-        e.preventDefault();
-        e.stopPropagation();
-
-        const dataTransferBlockId = e.dataTransfer.getData('block-id');
-        const globalBlockId = typeof window !== 'undefined' ? (window as any).__DRAGGED_BLOCK_ID__ : null;
-        const blockId = dataTransferBlockId || globalBlockId;
-        const blockType = e.dataTransfer.getData('block-type');
-
-        console.log('[LayoutContainer] Drop Event:', {
-            containerId,
-            index,
-            dataTransferBlockId,
-            globalBlockId,
-            resolvedBlockId: blockId,
-            blockType,
-            currentContainerBlocks: blocks.map(b => ({ id: b.id, type: b.type })),
-            containerBlockIds: blocks.map(b => b.id),
-        });
-
-        // Clear the global dragged block ID
-        if (typeof window !== 'undefined') {
-            (window as any).__DRAGGED_BLOCK_ID__ = null;
-        }
-
-        if (blockId) {
-            // Moving existing block - check if it's in this container or elsewhere
-            const currentIndex = blocks.findIndex(b => b.id === blockId);
-            console.log('[LayoutContainer] Block location check:', {
-                blockId,
-                currentIndex,
-                isInThisContainer: currentIndex !== -1,
-                targetIndex: index,
-                containerId,
-            });
-
-            if (currentIndex !== -1) {
-                // Block is in this container - move within container
-                if (currentIndex !== index) {
-                    const targetIndex = currentIndex < index ? index - 1 : index;
-                    console.log('[LayoutContainer] Moving within container:', { blockId, currentIndex, targetIndex, containerId });
-                    onBlockMove(blockId, targetIndex, containerId);
+        } 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 {
-                    console.log('[LayoutContainer] Block already at target position in container');
+                    indicatorTop = elementTop;
                 }
-            } else {
-                // Block is in root or another container - move it here
-                console.log('[LayoutContainer] Moving block from elsewhere to container:', { blockId, index, containerId });
-                onBlockMove(blockId, index, containerId);
             }
-        } else if (blockType) {
-            // Adding new block from library
-            console.log('[LayoutContainer] Adding new block to container:', { blockType, index, containerId });
-            onBlockAdd(blockType, index, containerId);
-        } else {
-            console.warn('[LayoutContainer] Drop event with no block ID or type!');
-        }
-
-        setDragOverIndex(null);
-        setIsDragging(false);
-        setDraggedBlockId(null);
-        setDropIndicatorPosition(null);
-    };
-
-    const handleBodyDragOver = (e: React.DragEvent) => {
-        e.preventDefault();
-        e.stopPropagation(); // Prevent parent containers from also handling this
-
-        // Check if we're dragging over a deeper nested container - if so, clear our indicator
-        const target = e.target as HTMLElement;
-        const deeperContainer = target.closest('[data-layout-container]');
-        if (deeperContainer && deeperContainer !== containerRef.current) {
-            // We're over a deeper nested container, clear our indicator
-            setDropIndicatorPosition(null);
-            setDragOverIndex(null);
-            setIsDragging(false);
-            return;
         }
 
-        // Clear any parent container indicators by dispatching a custom event
-        const customEvent = new CustomEvent('clear-drop-indicator', { bubbles: true });
-        e.currentTarget.dispatchEvent(customEvent);
-
-        setIsDragging(true);
-
-        // Calculate drop indicator position for body drop zone (at the end)
-        const container = containerRef.current;
-        if (container) {
-            requestAnimationFrame(() => {
-                if (!containerRef.current) return;
-
-                const containerRect = containerRef.current.getBoundingClientRect();
-                // Position at the bottom of the container
-                const relativeTop = containerRect.height;
-
-                setDropIndicatorPosition({
-                    top: relativeTop,
-                    left: 0,
-                    width: containerRect.width,
-                });
-            });
-        }
+        setDropIndicatorPosition({
+            top: indicatorTop,
+            left: 0,
+            width: containerRect.width,
+        });
     };
 
-    const handleBodyDrop = (e: React.DragEvent) => {
+    const handleDrop = (e: React.DragEvent, index: number | null) => {
         e.preventDefault();
         e.stopPropagation();
 
-        const dataTransferBlockId = e.dataTransfer.getData('block-id');
-        const globalBlockId = typeof window !== 'undefined' ? (window as any).__DRAGGED_BLOCK_ID__ : null;
-        const blockId = dataTransferBlockId || globalBlockId;
+        const blockId = e.dataTransfer.getData('block-id') || (window as any).__DRAGGED_BLOCK_ID__;
         const blockType = e.dataTransfer.getData('block-type');
 
-        console.log('[LayoutContainer] Body Drop Event (empty state):', {
-            containerId,
-            dataTransferBlockId,
-            globalBlockId,
-            resolvedBlockId: blockId,
-            blockType,
-            currentContainerBlocks: blocks.map(b => ({ id: b.id, type: b.type })),
-            containerBlockIds: blocks.map(b => b.id),
-        });
-
-        // Clear the global dragged block ID
+        // 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) {
-            // Moving existing block - check if it's in this container or elsewhere
             const currentIndex = blocks.findIndex(b => b.id === blockId);
-            const targetIndex = blocks.length; // When empty, this is 0, otherwise it's the end
-
-            console.log('[LayoutContainer] Body drop - block location:', {
-                blockId,
-                currentIndex,
-                isInThisContainer: currentIndex !== -1,
-                targetIndex,
-                containerId,
-                isEmpty: blocks.length === 0,
-            });
-
             if (currentIndex !== -1) {
-                // Block is already in this container
-                if (blocks.length === 0) {
-                    // Empty container - shouldn't happen, but handle it
-                    console.log('[LayoutContainer] Block already in empty container (should not happen)');
-                } else if (currentIndex !== blocks.length - 1) {
-                    // Move to end
-                    console.log('[LayoutContainer] Moving within container to end:', { blockId, currentIndex, targetIndex: blocks.length - 1, containerId });
-                    onBlockMove(blockId, blocks.length - 1, containerId);
-                } else {
-                    console.log('[LayoutContainer] Block already at end of container');
+                // 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 {
-                // Block is in root or another container - move it here
-                console.log('[LayoutContainer] Moving block from elsewhere to container:', { blockId, targetIndex, containerId, isEmpty: blocks.length === 0 });
+                // Moving from another container - no adjustment needed
                 onBlockMove(blockId, targetIndex, containerId);
             }
         } else if (blockType) {
-            // Adding new block
-            const targetIndex = blocks.length; // When empty, this is 0
-            console.log('[LayoutContainer] Adding new block to container:', { blockType, index: targetIndex, containerId, isEmpty: blocks.length === 0 });
+            // Adding new block - use targetIndex as-is
             onBlockAdd(blockType, targetIndex, containerId);
-        } else {
-            console.warn('[LayoutContainer] Body drop with no block ID or type!');
         }
 
-        setIsDragging(false);
-        setDragOverIndex(null);
-        setDraggedBlockId(null);
+        // 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 ${className}`}
-            onDragOver={handleBodyDragOver}
-            onDrop={handleBodyDrop}
-            onDragLeave={handleDragLeave}
-            onDragStart={handleDragStart}
-            onDragEnd={() => {
-                setDropIndicatorPosition(null);
-                setDragOverIndex(null);
-                setIsDragging(false);
-                setDraggedBlockId(null);
+            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);
+                }
             }}
         >
-            {/* Enhanced Drop Indicator - Visual drop zone */}
-            {dropIndicatorPosition && (
-                <div
-                    className="absolute z-50 pointer-events-none"
-                    style={{
-                        top: `${dropIndicatorPosition.top - 12}px`,
-                        left: `${dropIndicatorPosition.left}px`,
-                        width: `${dropIndicatorPosition.width}px`,
-                        height: '24px',
-                    }}
-                >
-                    {/* Drop zone background */}
-                    <div className={`absolute inset-0 rounded-lg border border-dashed backdrop-blur-sm ${darkMode
-                        ? 'bg-primary/10 dark:bg-primary/20 border-primary/30 dark:border-primary/40'
-                        : 'bg-primary/10 border-primary/30'
-                        }`} />
-
-                    {/* Center line indicator */}
-                    <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'
-                        }`} />
-
-                    {/* Drop icon indicator */}
-                    <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 shadow-lg shadow-primary/30 ${darkMode ? 'bg-primary dark:bg-primary/90' : 'bg-primary'
-                            }`}>
-                            <div className={`w-2 h-2 rounded-full ${darkMode ? 'bg-white dark:bg-neutral-900' : 'bg-white'
-                                }`} />
-                        </div>
-                    </div>
-                </div>
+            {/* 1. Visual Indicator Overlay */}
+            {dropIndicatorPosition && isDragging && (
+                <DropIndicator position={dropIndicatorPosition} darkMode={darkMode} />
             )}
 
+            {/* 2. Content Area */}
             {blocks.length === 0 ? (
-                /* Empty State - Drop Zone */
-                <div
-                    className={`flex flex-col items-center justify-center py-12 px-6 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/30 dark:bg-neutral-800/20'
-                        : isDragging
-                            ? 'border-primary/30 bg-primary/5'
-                            : 'border-gray-200/50 bg-neutral-50/30'
-                        }`}
-                >
+                <EmptyState isDragging={isDragging} darkMode={darkMode} label={emptyLabel} />
+            ) : (
+                blocks.map((block, index) => (
                     <div
-                        className={`p-3 rounded-full mb-3 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'
-                            }`}
+                        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"
                     >
-                        <Plus
-                            size={20}
-                            className={`transition-colors ${darkMode
-                                ? isDragging
-                                    ? 'text-primary'
-                                    : 'text-neutral-400 dark:text-neutral-500'
-                                : isDragging
-                                    ? 'text-primary'
-                                    : 'text-neutral-400'
-                                }`}
+                        <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>
-                    <p
-                        className={`text-xs font-black uppercase tracking-wider transition-colors ${darkMode
-                            ? isDragging
-                                ? 'text-primary'
-                                : 'text-neutral-500 dark:text-neutral-400'
-                            : isDragging
-                                ? 'text-primary'
-                                : 'text-neutral-500'
-                            }`}
-                    >
-                        {isDragging ? 'Drop Block Here' : emptyLabel}
-                    </p>
-                </div>
-            ) : (
-                /* Blocks with visual drop zones between them */
-                blocks.map((block, index) => (
-                    <Fragment key={block.id}>
-                        {/* Visual Drop Zone - appears between blocks when dragging */}
-                        {index > 0 && (
-                            <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'
-                                    }`}
-                            />
-                        )}
-
-                        {/* Block Container */}
-                        <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-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>
-                    </Fragment>
                 ))
             )}
         </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>
+    );
+}