@jhits/plugin-blog 0.0.19 → 0.0.20

package/src/views/CanvasEditor/LayoutContainer.tsx

@@ -32,7 +32,7 @@ export function LayoutContainer({
     className = '',
     emptyLabel = 'Drop blocks here',
 }: LayoutContainerProps) {
-    const { darkMode } = useEditor();
+    const { darkMode, helpers } = useEditor();
 
     // --- State ---
     const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
@@ -47,28 +47,37 @@ export function LayoutContainer({
 
     // --- Cleanup & Event Listeners ---
     useEffect(() => {
-        const resetState = () => {
+        const resetState = (e: Event) => {
+            // Only reset if this is the container that was actually being dragged over
+            // or if it's a global dragend event
             setDropIndicatorPosition(null);
             setDragOverIndex(null);
             setDropAtEnd(false);
-            dropAtEndRef.current = false; // Reset ref too
+            dropAtEndRef.current = false;
             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);
+            
+            // Listen for dragend on the document but ONLY if we are currently dragging
+            const handleGlobalDragEnd = () => {
+                if (isDragging) {
+                    resetState(new Event('dragend'));
+                    if (typeof window !== 'undefined') {
+                        (window as any).__DRAGGED_BLOCK_ID__ = null;
+                    }
+                }
+            };
+
+            document.addEventListener('dragend', handleGlobalDragEnd);
             return () => {
                 container.removeEventListener('clear-drop-indicator', resetState);
-                document.removeEventListener('dragend', resetState);
+                document.removeEventListener('dragend', handleGlobalDragEnd);
             };
         }
-    }, []);
+    }, [isDragging]);
 
     // --- Drag & Drop Logic ---
 
@@ -152,67 +161,35 @@ export function LayoutContainer({
         e.preventDefault();
         e.stopPropagation();
 
-        const blockId = e.dataTransfer.getData('block-id') || (window as any).__DRAGGED_BLOCK_ID__;
-        const blockType = e.dataTransfer.getData('block-type');
+        // MATCHING KEYS: use blockId and blockType (not hyphenated)
+        const blockId = e.dataTransfer.getData('blockId') || (window as any).__DRAGGED_BLOCK_ID__ || e.dataTransfer.getData('text/plain');
+        const blockType = e.dataTransfer.getData('blockType');
 
-        // Clear the global dragged block ID immediately to prevent it from being used for new blocks
+
+
+        // Clear the global dragged block ID immediately
         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
+                // Moving within same container
                 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;
-                    }
+                    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
+                // Moving from different container
                 onBlockMove(blockId, targetIndex, containerId);
             }
         } else if (blockType) {
-            // Adding new block - use targetIndex as-is
+            // Adding new block
             onBlockAdd(blockType, targetIndex, containerId);
         }
 
@@ -230,11 +207,21 @@ export function LayoutContainer({
         <div
             ref={containerRef}
             data-layout-container={containerId}
-            className={`relative flex flex-col min-h-[40px] transition-colors ${className}`}
-            onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
+            className={`relative flex flex-col min-h-[40px] transition-colors pb-2 ${className}`}
+            onDragEnter={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                setIsDragging(true);
+            }}
+            onDragOver={(e) => { 
+                e.preventDefault(); 
+                e.stopPropagation();
+                setIsDragging(true); 
+            }}
             onDrop={(e) => handleDrop(e, null)}
             onDragLeave={(e) => {
                 if (!e.currentTarget.contains(e.relatedTarget as Node)) {
+                    setIsDragging(false);
                     setDropIndicatorPosition(null);
                 }
             }}
@@ -260,8 +247,16 @@ export function LayoutContainer({
                             block={block}
                             onUpdate={(data) => onBlockUpdate(block.id, data, containerId)}
                             onDelete={() => onBlockDelete(block.id, containerId)}
+                            onDuplicate={() => helpers.duplicateBlock(block.id)}
                             onMoveUp={index > 0 ? () => onBlockMove(block.id, index - 1, containerId) : undefined}
                             onMoveDown={index < blocks.length - 1 ? () => onBlockMove(block.id, index + 1, containerId) : undefined}
+                            
+                            // Essential for nested rendering: pass children and handlers to the Edit component
+                            childBlocks={Array.isArray(block.children) && typeof block.children[0] === 'object' ? (block.children as Block[]) : []}
+                            onChildBlockAdd={(type, idx, cid) => onBlockAdd(type, idx ?? 0, cid || containerId)}
+                            onChildBlockUpdate={(bid, data, cid) => onBlockUpdate(bid, data, cid || containerId)}
+                            onChildBlockDelete={(bid, cid) => onBlockDelete(bid, cid || containerId)}
+                            onChildBlockMove={(bid, idx, cid) => onBlockMove(bid, idx, cid || containerId)}
                         />
                     </div>
                 ))
@@ -271,52 +266,42 @@ export function LayoutContainer({
 }
 
 /**
- * Visual Line that shows where the block will land
+ * Visual Components
  */
-function DropIndicator({ position, darkMode }: { position: any; darkMode: boolean }) {
+function DropIndicator({ position, darkMode }: { position: { top: number, left: number, width: number }, darkMode: boolean }) {
     return (
         <div
-            className="absolute z-50 pointer-events-none"
+            className="absolute z-50 pointer-events-none transition-all duration-150 ease-out"
             style={{
-                top: `${position.top - 12}px`,
-                left: `${position.left}px`,
-                width: `${position.width}px`,
-                height: '24px',
+                top: position.top,
+                left: position.left,
+                width: position.width,
+                height: '4px',
+                marginTop: '-2px', // Center on the line
             }}
         >
-            <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 className="w-full h-full bg-primary rounded-full shadow-[0_0_8px_rgba(var(--primary-rgb),0.5)] animate-pulse" />
+            <div className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-1 w-2 h-2 rounded-full bg-primary" />
+            <div className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-1 w-2 h-2 rounded-full bg-primary" />
         </div>
     );
 }
 
-/**
- * Placeholder when the container is empty
- */
-function EmptyState({ isDragging, darkMode, label }: { isDragging: boolean; darkMode: boolean; label: string }) {
+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={`flex flex-col items-center justify-center py-10 rounded-2xl border-2 border-dashed transition-all duration-300 ${isDragging
+                ? 'border-primary bg-primary/5 scale-[0.98]'
+                : 'border-neutral-200 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-900/20'
+                }`}
         >
-            <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>
+            <Plus
+                size={24}
+                className={`mb-2 transition-colors ${isDragging ? 'text-primary' : 'text-neutral-300 dark:text-neutral-700'}`}
+            />
+            <span className={`text-[10px] font-bold uppercase tracking-widest ${isDragging ? 'text-primary' : 'text-neutral-400 dark:text-neutral-600'}`}>
+                {label}
+            </span>
         </div>
     );
-}
+}

package/src/views/CanvasEditor/components/CustomBlockItem.tsx

@@ -67,26 +67,25 @@ export function CustomBlockItem({
             onMouseDown={handleMouseDown}
             onMouseMove={handleMouseMove}
             onClick={handleClick}
-            className="p-4 rounded-xl border border-dashboard-border bg-dashboard-bg hover:border-primary cursor-pointer transition-all group"
+            className="p-5 rounded-[1.5rem] border border-dashboard-border/50 bg-dashboard-card/30 backdrop-blur-sm hover:border-primary/40 hover:bg-primary/[0.02] hover:shadow-2xl hover:shadow-primary/10 transition-all duration-500 cursor-grab active:cursor-grabbing group"
             title={description}
         >
-            <div className="flex items-center justify-between mb-2">
-                <div className="flex items-center gap-2">
-                    <div className="text-neutral-500 dark:text-neutral-400 group-hover:text-primary dark:group-hover:text-primary transition-colors">
+            <div className="flex items-center justify-between mb-3">
+                <div className="flex items-center gap-3">
+                    <div className="text-dashboard-text-secondary group-hover:text-primary transition-all duration-500 group-hover:scale-110">
                         {icon}
                     </div>
-                    <span className="text-[10px] font-bold uppercase tracking-wider text-neutral-700 dark:text-neutral-300 group-hover:text-neutral-950 dark:group-hover:text-white transition-colors">
+                    <span className="text-[10px] font-black uppercase tracking-[0.2em] text-dashboard-text-secondary group-hover:text-dashboard-text transition-colors">
                         {name}
                     </span>
                 </div>
-                <GripVertical size={12} className="text-neutral-400 dark:text-neutral-500 group-hover:text-neutral-600 dark:group-hover:text-neutral-400" />
+                <GripVertical size={14} className="text-dashboard-text-secondary/30 group-hover:text-primary transition-colors" />
             </div>
             {description && (
-                <p className="text-[9px] text-neutral-500 dark:text-neutral-400 leading-relaxed line-clamp-2">
+                <p className="text-[9px] text-dashboard-text-secondary/60 leading-relaxed line-clamp-2 italic font-medium">
                     {description}
                 </p>
             )}
         </div>
     );
 }
-

package/src/views/CanvasEditor/components/EditorCanvas.tsx

@@ -16,20 +16,31 @@ export interface EditorCanvasProps {
     siteId: string;
     locale: string;
     darkMode: boolean;
+    tags?: string[];
     backgroundColors?: {
         light: string;
         dark?: string;
     };
     featuredImage?: {
         id?: string; // Semantic ID - plugin-images handles transforms
+        src?: string; // Preview URL
         alt?: string;
     };
+    LayoutWrapper?: React.ComponentType<{ 
+        children: React.ReactNode; 
+        header?: React.ReactNode; 
+        footer?: React.ReactNode;
+        heroImage?: React.ReactNode;
+        isPreview?: boolean;
+        isWrapper?: boolean;
+        tags?: string[];
+    }>;
     onTitleChange: (title: string) => void;
     onHeroBlockUpdate: (data: Partial<Block['data']>) => void;
     onHeroBlockDelete: () => void;
     onBlockAdd: (type: string, index: number, containerId?: string) => void;
-    onBlockUpdate: (id: string, data: Partial<Block['data']>) => void;
-    onBlockDelete: (id: 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;
 }
 
@@ -42,8 +53,10 @@ export function EditorCanvas({
     siteId,
     locale,
     darkMode,
+    tags = [],
     backgroundColors,
     featuredImage,
+    LayoutWrapper,
     onTitleChange,
     onHeroBlockUpdate,
     onHeroBlockDelete,
@@ -62,97 +75,139 @@ export function EditorCanvas({
         }
     }, [title]);
 
-    return (
-        <div
-            className="flex-1 overflow-y-auto overflow-x-hidden pb-40 px-6 custom-scrollbar selection:bg-primary/20 dark:selection:bg-primary/30 min-h-0"
-            style={{
-                backgroundColor: backgroundColors
-                    ? (darkMode && backgroundColors.dark
-                        ? backgroundColors.dark
-                        : backgroundColors.light)
-                    : undefined,
-            }}
-        >
-            <div className={`mx-auto transition-all duration-500 max-w-7xl w-full`}>
-                {/* Hero Block - Only show editable version when NOT in preview mode */}
-                {!isPreviewMode && heroBlockDefinition && heroBlock && (
-                    <div className="mb-12">
-                        <BlockWrapper
-                            block={heroBlock}
-                            onUpdate={onHeroBlockUpdate}
-                            onDelete={onHeroBlockDelete}
-                            onMoveUp={() => { }}
-                            onMoveDown={() => { }}
-                            allBlocks={[heroBlock]}
-                        />
-                    </div>
+    const renderPreviewContent = () => {
+        // Filter out hero block from content if it's already rendered in header
+        const mainContent = heroBlockDefinition && heroBlock 
+            ? contentBlocks.filter(b => b.type !== 'hero')
+            : contentBlocks;
+
+        const commonContext = { 
+            siteId, 
+            locale,
+            fallbackImage: featuredImage ? {
+                id: featuredImage.id,
+                src: featuredImage.src,
+                alt: featuredImage.alt,
+            } : undefined,
+        };
+
+        return (
+            <div className="space-y-8">
+                {!heroBlockDefinition && title && (
+                    <h1 className="text-5xl font-serif font-medium leading-tight mb-12" style={{ color: 'var(--color-forest, var(--color-neutral-950))' }}>
+                        {title}
+                    </h1>
                 )}
 
-                {isPreviewMode ? (
+                {mainContent.length > 0 ? (
                     <div className="space-y-8">
-                        {heroBlockDefinition && heroBlock && (
+                        {mainContent.map((block) => (
                             <BlockRenderer
-                                block={heroBlock}
-                                context={{ 
-                                    siteId, 
-                                    locale,
-                                    // Pass featured image as fallback for hero block
-                                    // Only pass id and alt - plugin-images handles transforms
-                                    fallbackImage: featuredImage ? {
-                                        id: featuredImage.id,
-                                        alt: featuredImage.alt,
-                                    } : undefined,
-                                }}
+                                key={block.id}
+                                block={block}
+                                context={commonContext}
                             />
-                        )}
-
-                        {!heroBlockDefinition && title && (
-                            <h1 className="text-5xl font-serif font-medium text-neutral-950 dark:text-white leading-tight mb-12">
-                                {title}
-                            </h1>
-                        )}
-
-                        {contentBlocks.length > 0 ? (
-                            <div className="space-y-8">
-                                {contentBlocks.map((block) => (
-                                    <BlockRenderer
-                                        key={block.id}
-                                        block={block}
-                                        context={{ siteId, locale }}
-                                    />
-                                ))}
-                            </div>
-                        ) : (
-                            <div className="text-center py-20 text-neutral-400 dark:text-neutral-500">
-                                <p className="text-sm">No content blocks yet. Switch to Edit mode to add blocks.</p>
-                            </div>
-                        )}
+                        ))}
                     </div>
                 ) : (
-                    <>
-                        {!heroBlockDefinition && (
-                            <div className="mb-12">
-                                <textarea
-                                    ref={titleRef}
-                                    rows={1}
-                                    value={title}
-                                    onChange={(e) => onTitleChange(e.target.value)}
-                                    placeholder="The title of your story..."
-                                    className="w-full bg-transparent border-none outline-none text-5xl font-serif font-medium placeholder:text-neutral-500 dark:placeholder:text-neutral-500 resize-none leading-tight transition-colors duration-300 text-neutral-950 dark:text-white"
-                                />
-                            </div>
-                        )}
+                    <div className="text-center py-20 text-neutral-400 dark:text-neutral-500">
+                        <p className="text-sm">No content blocks yet. Switch to Edit mode to add blocks.</p>
+                    </div>
+                )}
+            </div>
+        );
+    };
+
+    const renderEditorContent = () => {
+        // Filter out hero block from content if it's already rendered in header
+        const mainBlocks = heroBlockDefinition && heroBlock 
+            ? contentBlocks.filter(b => b.type !== 'hero')
+            : contentBlocks;
 
-                        <EditorBody
-                            blocks={contentBlocks}
-                            darkMode={darkMode}
-                            backgroundColors={backgroundColors}
-                            onBlockAdd={onBlockAdd}
-                            onBlockUpdate={onBlockUpdate}
-                            onBlockDelete={onBlockDelete}
-                            onBlockMove={onBlockMove}
+        return (
+            <div className="space-y-12">
+                {!heroBlockDefinition && (
+                    <div className="mb-12">
+                        <textarea
+                            ref={titleRef}
+                            rows={1}
+                            value={title}
+                            onChange={(e) => onTitleChange(e.target.value)}
+                            placeholder="The title of your story..."
+                            className="w-full bg-transparent border-none outline-none text-5xl md:text-7xl lg:text-9xl font-serif font-medium placeholder:text-neutral-500 dark:placeholder:text-neutral-500 resize-none leading-tight transition-colors duration-300 italic"
+                            style={{ color: 'var(--color-forest, var(--color-neutral-950))' }}
                         />
-                    </>
+                    </div>
+                )}
+
+                <EditorBody
+                    blocks={mainBlocks}
+                    darkMode={darkMode}
+                    backgroundColors={backgroundColors}
+                    onBlockAdd={onBlockAdd}
+                    onBlockUpdate={onBlockUpdate}
+                    onBlockDelete={onBlockDelete}
+                    onBlockMove={onBlockMove}
+                />
+            </div>
+        );
+    };
+
+    // Render Hero Block for Slot Injection
+    const heroElement = heroBlockDefinition && heroBlock ? (
+        isPreviewMode ? (
+            <BlockRenderer
+                block={heroBlock}
+                context={{ 
+                    siteId, 
+                    locale,
+                    fallbackImage: featuredImage ? {
+                        id: featuredImage.id,
+                        src: featuredImage.src,
+                        alt: featuredImage.alt,
+                    } : undefined,
+                }}
+            />
+        ) : (
+            <BlockWrapper
+                block={heroBlock}
+                onUpdate={onHeroBlockUpdate}
+                onDelete={onHeroBlockDelete}
+                onMoveUp={() => { }}
+                onMoveDown={() => { }}
+            />
+        )
+    ) : null;
+
+    return (
+        <div
+            data-theme={darkMode ? 'dark' : 'light'}
+            className="flex-1 overflow-y-auto overflow-x-hidden pb-40 px-4 lg:px-10 custom-scrollbar selection:bg-primary/20 dark:selection:bg-primary/30 min-h-0 transition-colors duration-300"
+            style={{
+                backgroundColor: darkMode 
+                    ? (backgroundColors?.dark || '#0c0c0c') 
+                    : (backgroundColors?.light || '#ffffff')
+            }}
+        >
+            <div className={`${!LayoutWrapper ? 'mx-auto transition-all duration-500 max-w-[1600px] w-full px-2 pt-8' : ''}`}>
+                {LayoutWrapper ? (
+                    <div data-theme={darkMode ? 'dark' : 'light'} data-dashboard="false" className="theme-reset contents">
+                        <LayoutWrapper
+                            header={heroElement}
+                            isPreview={true}
+                            isWrapper={true}
+                            tags={tags}
+                        >
+                            {isPreviewMode ? renderPreviewContent() : renderEditorContent()}
+                        </LayoutWrapper>
+                    </div>
+                ) : (
+                    <div data-theme={darkMode ? 'dark' : 'light'} data-dashboard="false" className="theme-reset">
+                        {heroElement}
+                        <div className="max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8 py-6 prose prose-lg max-w-none prose-headings:font-serif">
+                            {isPreviewMode ? renderPreviewContent() : renderEditorContent()}
+                        </div>
+                    </div>
                 )}
             </div>
         </div>

package/src/views/CanvasEditor/components/EditorLibrary.tsx

@@ -7,16 +7,32 @@ import type { BlockTypeDefinition } from '../../../types/block';
 
 export interface EditorLibraryProps {
     registeredBlocks: BlockTypeDefinition[];
-    onAddBlock: (type: string) => void;
+    onAddBlock: (blockType: string) => void;
 }
 
+/**
+ * Editor Library Component
+ * Displays available blocks that can be added to the canvas
+ */
 export function EditorLibrary({ registeredBlocks, onAddBlock }: EditorLibraryProps) {
-    // Get all registered blocks from state (excluding Hero block from sidebar)
-    const allBlocks = registeredBlocks.filter(block => block.type !== 'hero');
-    const textBlocks = allBlocks.filter(block => block.category === 'text');
-    const customBlocks = allBlocks.filter(block => block.category === 'custom');
-    const mediaBlocks = allBlocks.filter(block => block.category === 'media');
-    const layoutBlocks = allBlocks.filter(block => block.category === 'layout');
+    // Categorize blocks
+    const allBlocks = registeredBlocks || [];
+    
+    const textBlocks = allBlocks.filter(bl => 
+        bl.category === 'text' || bl.type === 'heading' || bl.type === 'paragraph' || bl.type === 'list'
+    );
+    
+    const mediaBlocks = allBlocks.filter(bl => 
+        bl.category === 'media' || bl.type === 'image' || bl.type === 'gallery' || bl.type === 'video'
+    );
+    
+    const layoutBlocks = allBlocks.filter(bl => 
+        bl.category === 'layout' || bl.type === 'section' || bl.type === 'columns' || bl.type === 'spacer'
+    );
+    
+    const customBlocks = allBlocks.filter(bl => 
+        !textBlocks.includes(bl) && !mediaBlocks.includes(bl) && !layoutBlocks.includes(bl)
+    );
 
     return (
         <div className="p-6 w-72 min-w-0 max-w-full">
@@ -108,10 +124,9 @@ export function EditorLibrary({ registeredBlocks, onAddBlock }: EditorLibraryPro
                 </div>
             )}
 
-            {/* Empty State */}
             {allBlocks.length === 0 && (
-                <div className="text-center py-12">
-                    <Library size={32} className="mx-auto text-neutral-300 dark:text-neutral-700 mb-4" />
+                <div className="flex flex-col items-center justify-center py-12 text-center">
+                    <Library className="size-12 text-neutral-300 dark:text-neutral-700 mb-4" />
                     <p className="text-xs text-neutral-500 dark:text-neutral-400">
                         No blocks registered yet.
                     </p>