@jhits/plugin-blog 0.0.19 → 0.0.20

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

@@ -2,38 +2,29 @@
 
 import React, { useState, useCallback, useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { Image as ImageIcon, Plus, X } from 'lucide-react';
+import { Image as ImageIcon, Plus, X, Edit2, Trash2 } from 'lucide-react';
 import { ImagePicker, Image } from '@jhits/plugin-images';
 import type { ImageMetadata } from '@jhits/plugin-images';
 import type { Block } from '../../../types/block';
 
 export interface FeaturedImage {
-    // Store only the semantic ID - plugin-images handles everything else
     id?: string;
     alt?: string;
-    // Transform values (stored locally for UI, but plugin-images API is source of truth)
     brightness?: number;
     blur?: number;
     scale?: number;
     positionX?: number;
     positionY?: number;
-    // Indicates if this is a custom featured image (not synced from hero)
     isCustom?: boolean;
 }
 
 export interface FeaturedMediaSectionProps {
     featuredImage?: FeaturedImage;
-    heroBlock?: Block | null; // Hero block to get default image from
-    slug?: string; // Blog post slug for semantic ID
+    heroBlock?: Block | null;
+    slug?: string;
     onUpdate: (image: FeaturedImage | undefined) => void;
 }
 
-/**
- * Featured Media Section Component
- * Handles featured image selection - completely independent from hero image
- * Featured image is a thumbnail used for blog post cards
- * Hero image is separate and managed in the hero block
- */
 export function FeaturedMediaSection({
     featuredImage,
     heroBlock,
@@ -44,293 +35,171 @@ export function FeaturedMediaSection({
     const [openEditorDirectly, setOpenEditorDirectly] = useState(false);
     const [mounted, setMounted] = useState(false);
 
-    // Handle SSR - ensure we only render portal on client
-    useEffect(() => {
-        setMounted(true);
-    }, []);
+    useEffect(() => { setMounted(true); }, []);
 
-    // Create semantic ID for this featured image - plugin-images will handle everything
     const semanticId = slug ? `blog-featured-${slug}` : `blog-featured-${Date.now()}`;
-    
-    // Use semantic ID from featuredImage if it exists, otherwise use generated one
-    // IMPORTANT: Always use the actual id from featuredImage if available, otherwise the semanticId
-    // This ensures the id is stable and doesn't change on re-renders
     const imageId = featuredImage?.id || semanticId;
     
-    // Ensure featuredImage always has an id when it exists
-    // This prevents the "missing featured image" issue on save
     useEffect(() => {
         if (featuredImage && !featuredImage.id) {
-            // If featuredImage exists but has no id, set it to the semanticId
-            onUpdate({
-                ...featuredImage,
-                id: semanticId,
-            });
+            onUpdate({ ...featuredImage, id: semanticId });
         }
     }, [featuredImage, semanticId, onUpdate]);
 
-    // Get transform values from featuredImage or use defaults
     const brightness = featuredImage?.brightness ?? 100;
     const blur = featuredImage?.blur ?? 0;
     const scale = featuredImage?.scale ?? 1.0;
     const positionX = featuredImage?.positionX ?? 0;
     const positionY = featuredImage?.positionY ?? 0;
 
-    // Handle image selection - create initial mapping and update blog metadata with semantic ID
-    // Plugin-images Image component will automatically resolve the semantic ID when it renders
     const handleImageChange = useCallback(async (image: ImageMetadata | null) => {
         if (image) {
-            // Extract filename from image URL for reference
             const isUploadedImage = image.url.startsWith('/api/uploads/');
             let filename = image.filename;
+            if (!filename && isUploadedImage) filename = image.url.split('/api/uploads/')[1]?.split('?')[0] || image.id;
+            else if (!filename) filename = image.id || image.url.split('/').pop()?.split('?')[0] || `external-${Date.now()}`;
             
-            if (!filename && isUploadedImage) {
-                // Extract filename from URL if not provided
-                filename = image.url.split('/api/uploads/')[1]?.split('?')[0] || image.id;
-            } else if (!filename) {
-                // For external URLs, use the image ID or extract from URL
-                filename = image.id || image.url.split('/').pop()?.split('?')[0] || `external-${Date.now()}`;
-            }
-            
-            // Create initial mapping in plugin-images API immediately
-            // This ensures the semantic ID resolves correctly
             try {
-                const saveData = {
-                    id: imageId,
-                    filename: filename,
-                    scale: 1.0,
-                    positionX: 0,
-                    positionY: 0,
-                    brightness: 100,
-                    blur: 0,
-                };
-                
+                const saveData = { id: imageId, filename, scale: 1.0, positionX: 0, positionY: 0, brightness: 100, blur: 0 };
                 await fetch('/api/plugin-images/resolve', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify(saveData),
                 });
-            } catch (error) {
-                console.error('[FeaturedMediaSection] Failed to create initial mapping:', error);
-                // Continue anyway - the mapping might be created later
-            }
+            } catch (error) { console.error(error); }
             
-            // Update blog metadata with semantic ID
-            onUpdate({
-                id: imageId,
-                alt: image.alt || image.filename,
-                brightness: 100,
-                blur: 0,
-                scale: 1.0,
-                positionX: 0,
-                positionY: 0,
-                isCustom: true,
-            } as FeaturedImage);
+            onUpdate({ id: imageId, alt: image.alt || image.filename, brightness: 100, blur: 0, scale: 1.0, positionX: 0, positionY: 0, isCustom: true } as FeaturedImage);
         } else {
-            // If removed, set to undefined
             onUpdate(undefined);
         }
         setShowImagePicker(false);
     }, [imageId, onUpdate]);
 
-    // Handle editor save from ImagePicker - save to plugin-images API
-    const handleEditorSave = useCallback(async (
-        finalScale: number,
-        finalPositionX: number,
-        finalPositionY: number,
-        finalBrightness?: number,
-        finalBlur?: number
-    ) => {
+    const handleEditorSave = useCallback(async (finalScale: number, finalPositionX: number, finalPositionY: number, finalBrightness?: number, finalBlur?: number) => {
         if (!featuredImage?.id) return;
-
-        // Reset the auto-open flag immediately to prevent reopening
         setOpenEditorDirectly(false);
-
-        // Get the actual filename from the API (resolve the semantic ID)
-        let filename = imageId; // Fallback to semantic ID
+        let filename = imageId;
         try {
             const response = await fetch(`/api/plugin-images/resolve?id=${encodeURIComponent(imageId)}`);
             if (response.ok) {
                 const data = await response.json();
                 filename = data.filename || imageId;
             }
-        } catch (error) {
-            console.error('Failed to resolve filename:', error);
-        }
+        } catch (error) { console.error(error); }
 
-        // Normalize position values
         const normalizedPositionX = finalPositionX === -50 ? 0 : finalPositionX;
         const normalizedPositionY = finalPositionY === -50 ? 0 : finalPositionY;
         const finalBrightnessValue = finalBrightness ?? brightness;
         const finalBlurValue = finalBlur ?? blur;
 
-        // Save to plugin-images API
         try {
-            const saveData = {
-                id: imageId,
-                filename: filename,
-                scale: finalScale,
-                positionX: normalizedPositionX,
-                positionY: normalizedPositionY,
-                brightness: finalBrightnessValue,
-                blur: finalBlurValue,
-            };
-            
+            const saveData = { id: imageId, filename, scale: finalScale, positionX: normalizedPositionX, positionY: normalizedPositionY, brightness: finalBrightnessValue, blur: finalBlurValue };
             const response = await fetch('/api/plugin-images/resolve', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify(saveData),
             });
-            
             if (response.ok) {
-                // Update local featured image data - ensure id is preserved
-                onUpdate({
-                    ...featuredImage,
-                    id: featuredImage.id || imageId, // Ensure id is always preserved
-                    scale: finalScale,
-                    positionX: normalizedPositionX,
-                    positionY: normalizedPositionY,
-                    brightness: finalBrightnessValue,
-                    blur: finalBlurValue,
-                });
-                
-                // Dispatch event to notify Image components
-                window.dispatchEvent(new CustomEvent('image-mapping-updated', {
-                    detail: saveData
-                }));
+                onUpdate({ ...featuredImage, id: featuredImage.id || imageId, scale: finalScale, positionX: normalizedPositionX, positionY: normalizedPositionY, brightness: finalBrightnessValue, blur: finalBlurValue });
+                window.dispatchEvent(new CustomEvent('image-mapping-updated', { detail: saveData }));
             }
-        } catch (error) {
-            console.error('Failed to save image transform:', error);
-        }
+        } catch (error) { console.error(error); }
     }, [imageId, featuredImage, brightness, blur, onUpdate]);
 
     return (
         <section>
             <div className="flex items-center gap-3 mb-6">
-                <ImageIcon size={14} className="text-neutral-500 dark:text-neutral-400" />
-                <label className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black">
-                    Featured Media
+                <div className="size-8 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
+                    <ImageIcon size={14} />
+                </div>
+                <label className="text-[10px] font-black text-dashboard-text uppercase tracking-[0.3em]">
+                    Visual Identity
                 </label>
             </div>
+            
             {featuredImage?.id ? (
                 <div className="relative group">
-                    {/* Use Image component from plugin-images - it handles everything automatically */}
-                    {/* Blog component only handles the design/styling */}
-                    <div className="relative aspect-[16/10] bg-dashboard-bg rounded-3xl overflow-hidden border border-dashboard-border group/image">
+                    <div className="relative aspect-[16/10] bg-dashboard-bg rounded-3xl overflow-hidden border border-dashboard-border group/image shadow-inner">
                         <Image
                             id={imageId}
                             alt={featuredImage?.alt || 'Featured image'}
                             fill
-                            className="object-cover w-full h-full"
-                            editable={false} // Disable Image component's overlay - we'll use our own
-                            {...({
-                                brightness,
-                                blur,
-                                scale,
-                                positionX,
-                                positionY,
-                            } as any)}
+                            className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-700"
+                            editable={false}
+                            {...({ brightness, blur, scale, positionX, positionY } as any)}
                         />
-                        {/* Custom edit overlay that opens ImagePicker editor */}
-                        <button
-                            onClick={() => {
-                                setOpenEditorDirectly(true);
-                                setShowImagePicker(true);
-                            }}
-                            className="absolute inset-0 z-30 flex items-center justify-center opacity-0 group-hover/image:opacity-100 transition-all duration-300 bg-neutral-900/40 dark:bg-neutral-900/60 backdrop-blur-[2px]"
-                        >
-                            <div className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-neutral-800 rounded-full shadow-xl">
-                                <ImageIcon size={14} className="text-primary" />
-                                <span className="text-[10px] font-bold uppercase tracking-widest">Edit</span>
-                            </div>
-                        </button>
+                        <div className="absolute inset-0 z-30 flex items-center justify-center opacity-0 group-hover/image:opacity-100 transition-all duration-500 bg-black/20 backdrop-blur-[2px]">
+                            <button
+                                onClick={() => { setOpenEditorDirectly(true); setShowImagePicker(true); }}
+                                className="flex items-center gap-2 px-5 py-2.5 bg-white text-black rounded-full shadow-2xl hover:scale-105 active:scale-95 transition-all"
+                            >
+                                <Edit2 size={12} className="fill-current" />
+                                <span className="text-[10px] font-black uppercase tracking-widest">Adjust View</span>
+                            </button>
+                        </div>
                     </div>
-                    <div className="mt-2 flex items-center gap-3">
+                    <div className="mt-4 flex items-center justify-between px-1">
                         <button
                             onClick={() => setShowImagePicker(true)}
-                            className="text-[10px] text-neutral-600 dark:text-neutral-400 hover:text-primary font-bold uppercase tracking-wider"
+                            className="text-[9px] font-black uppercase tracking-[0.2em] text-primary hover:text-primary/80 transition-colors flex items-center gap-1.5"
                         >
-                            Change Image
+                            <Plus size={10} strokeWidth={3} />
+                            Replace
                         </button>
-                        <span className="text-[10px] text-neutral-400">•</span>
                         <button
                             onClick={() => onUpdate(undefined)}
-                            className="text-[10px] text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 font-bold uppercase tracking-wider"
+                            className="text-[9px] font-black uppercase tracking-[0.2em] text-red-500/60 hover:text-red-500 transition-colors flex items-center gap-1.5"
                         >
-                            Remove Image
+                            <Trash2 size={10} />
+                            Detach
                         </button>
                     </div>
                 </div>
             ) : (
                 <div
-                    className="group relative aspect-[16/10] bg-dashboard-bg rounded-3xl border-2 border-dashed border-dashboard-border flex flex-col items-center justify-center text-neutral-400 dark:text-neutral-500 hover:bg-dashboard-card hover:border-primary cursor-pointer transition-all duration-300"
+                    className="group relative aspect-[16/10] bg-dashboard-bg/50 rounded-[2.5rem] border-2 border-dashed border-dashboard-border/50 flex flex-col items-center justify-center text-dashboard-text-secondary/40 hover:bg-primary/[0.02] hover:border-primary/40 cursor-pointer transition-all duration-500 shadow-inner"
                     onClick={() => setShowImagePicker(true)}
                 >
-                    <Plus size={24} strokeWidth={1} className="mb-3 group-hover:scale-110 transition-transform" />
-                    <span className="text-[9px] font-black uppercase tracking-widest">Assign Image</span>
+                    <div className="size-14 rounded-full bg-dashboard-card flex items-center justify-center border border-dashboard-border group-hover:scale-110 group-hover:border-primary/20 transition-all duration-500 mb-4 shadow-sm">
+                        <ImageIcon size={24} strokeWidth={1.5} className="group-hover:text-primary transition-colors" />
+                    </div>
+                    <span className="text-[10px] font-black uppercase tracking-[0.3em] group-hover:text-primary transition-colors">Assign Visual</span>
                 </div>
             )}
 
-            {/* Image Picker Modal */}
             {showImagePicker && mounted && createPortal(
-                <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm" onClick={() => {
-                    setShowImagePicker(false);
-                    setOpenEditorDirectly(false); // Reset flag when closing
-                }}>
-                    <div className="bg-white dark:bg-neutral-900 rounded-2xl w-full max-w-2xl mx-4 p-6 shadow-2xl max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
-                        <div className="flex items-center justify-between mb-6">
-                            <h3 className="text-lg font-bold text-neutral-900 dark:text-neutral-100">
-                                {openEditorDirectly ? 'Edit Featured Image' : 'Select Featured Image'}
-                            </h3>
-                            <button
-                                onClick={() => {
-                                    setShowImagePicker(false);
-                                    setOpenEditorDirectly(false); // Reset flag when closing
-                                }}
-                                className="p-2 hover:bg-dashboard-bg dark:hover:bg-neutral-800 rounded-lg transition-colors text-neutral-700 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white"
-                                aria-label="Close"
-                            >
-                                <X size={20} className="transition-colors" />
+                <div className="fixed inset-0 z-[9999] flex items-center justify-center p-6" onClick={() => { setShowImagePicker(false); setOpenEditorDirectly(false); }}>
+                    <div className="absolute inset-0 bg-black/60 backdrop-blur-md" />
+                    <div className="relative bg-dashboard-bg border border-dashboard-border rounded-[3rem] w-full max-w-3xl overflow-hidden shadow-2xl animate-in zoom-in-95 duration-300 flex flex-col max-h-full" onClick={(e) => e.stopPropagation()}>
+                        <div className="p-8 border-b border-dashboard-border flex items-center justify-between">
+                            <div>
+                                <h3 className="text-2xl font-black text-dashboard-text uppercase tracking-tighter">
+                                    {openEditorDirectly ? 'Perfecting' : 'Curating'} Image
+                                </h3>
+                                <p className="text-xs text-dashboard-text-secondary italic mt-1">Select or adjust the featured visual for your article.</p>
+                            </div>
+                            <button onClick={() => { setShowImagePicker(false); setOpenEditorDirectly(false); }} className="size-12 flex items-center justify-center bg-dashboard-card border border-dashboard-border rounded-2xl hover:text-red-500 hover:border-red-500/20 transition-all">
+                                <X size={20} />
                             </button>
                         </div>
-                        <ImagePicker
-                            value={featuredImage?.id ? imageId : undefined}
-                            onChange={handleImageChange}
-                            brightness={brightness}
-                            blur={blur}
-                            {...({
-                                scale,
-                                positionX,
-                                positionY,
-                            } as any)}
-                            onBrightnessChange={(val) => {
-                                // Update local state only - don't trigger save
-                                if (featuredImage) {
-                                    onUpdate({
-                                        ...featuredImage,
-                                        id: featuredImage.id || imageId, // Ensure id is preserved
-                                        brightness: val,
-                                    });
-                                }
-                            }}
-                            onBlurChange={(val) => {
-                                // Update local state only - don't trigger save
-                                if (featuredImage) {
-                                    onUpdate({
-                                        ...featuredImage,
-                                        id: featuredImage.id || imageId, // Ensure id is preserved
-                                        blur: val,
-                                    });
-                                }
-                            }}
-                            onEditorSave={handleEditorSave}
-                            darkMode={false}
-                            showEffects={true} // Enable effects so editor can be used
-                            aspectRatio="16/10" // Thumbnail aspect ratio for blog cards
-                            borderRadius="rounded-3xl"
-                            objectFit="cover" // Cover for thumbnails
-                            objectPosition="center"
-                        />
+                        <div className="flex-1 overflow-y-auto p-8 custom-scrollbar">
+                            <ImagePicker
+                                value={featuredImage?.id ? imageId : undefined}
+                                onChange={handleImageChange}
+                                brightness={brightness}
+                                blur={blur}
+                                {...({ scale, positionX, positionY } as any)}
+                                onBrightnessChange={(val) => { if (featuredImage) onUpdate({ ...featuredImage, id: featuredImage.id || imageId, brightness: val }); }}
+                                onBlurChange={(val) => { if (featuredImage) onUpdate({ ...featuredImage, id: featuredImage.id || imageId, blur: val }); }}
+                                onEditorSave={handleEditorSave}
+                                darkMode={true}
+                                showEffects={true}
+                                aspectRatio="16/10"
+                                borderRadius="rounded-[2rem]"
+                                objectFit="cover"
+                                objectPosition="center"
+                            />
+                        </div>
                     </div>
                 </div>,
                 document.body
@@ -338,4 +207,3 @@ export function FeaturedMediaSection({
         </section>
     );
 }
-

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

@@ -0,0 +1,125 @@
+'use client';
+
+import React, { useState, useMemo } from 'react';
+import { Code, X, Copy, Check } from 'lucide-react';
+
+export interface JSONInspectorProps {
+    data: any;
+}
+
+/**
+ * Simple JSON Syntax Highlighter
+ */
+function highlightJSON(json: string) {
+    if (!json) return null;
+    
+    // Convert to string and escape HTML
+    const escaped = json
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+
+    return escaped.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
+        let cls = 'text-orange-400'; // number
+        if (/^"/.test(match)) {
+            if (/:$/.test(match)) {
+                cls = 'text-blue-400'; // key
+            } else {
+                cls = 'text-green-400'; // string
+            }
+        } else if (/true|false/.test(match)) {
+            cls = 'text-purple-400'; // boolean
+        } else if (/null/.test(match)) {
+            cls = 'text-neutral-500'; // null
+        }
+        return `<span class="${cls}">${match}</span>`;
+    });
+}
+
+/**
+ * Dev-only JSON Inspector
+ * Displays the current state of the blog post in a formatted JSON view
+ */
+export function JSONInspector({ data }: JSONInspectorProps) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [copied, setCopied] = useState(false);
+
+    // Memoize the highlighted HTML to prevent re-parsing on every render
+    const highlightedHTML = useMemo(() => {
+        const jsonString = JSON.stringify(data, null, 2);
+        return highlightJSON(jsonString);
+    }, [data]);
+
+    // Only visible in development mode
+    if (process.env.NODE_ENV !== 'development') return null;
+
+    const handleCopy = () => {
+        navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+
+    return (
+        <>
+            {/* Floating Toggle Button */}
+            <button
+                onClick={() => setIsOpen(true)}
+                className="fixed bottom-8 right-8 z-[100] bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 px-5 py-3 rounded-2xl shadow-2xl hover:scale-105 active:scale-95 transition-all flex items-center gap-3 border border-white/10 dark:border-neutral-200"
+                title="Inspect JSON (Dev Only)"
+            >
+                <div className="size-2 rounded-full bg-green-500 animate-pulse" />
+                <Code size={18} strokeWidth={2.5} />
+                <span className="text-[10px] font-black uppercase tracking-[0.2em]">Inspect JSON</span>
+            </button>
+
+            {/* Modal Overlay */}
+            {isOpen && (
+                <div className="fixed inset-0 z-[110] bg-black/60 backdrop-blur-md flex items-center justify-center p-6 md:p-12 animate-in fade-in duration-300">
+                    <div className="bg-white dark:bg-neutral-900 rounded-[2.5rem] w-full max-w-5xl h-[85vh] flex flex-col overflow-hidden shadow-[0_32px_64px_-12px_rgba(0,0,0,0.5)] border border-neutral-200 dark:border-neutral-800 animate-in zoom-in-95 duration-300">
+                        
+                        {/* Header */}
+                        <div className="px-8 py-6 border-b border-neutral-100 dark:border-neutral-800 flex justify-between items-center bg-neutral-50/50 dark:bg-neutral-800/50 shrink-0">
+                            <div>
+                                <div className="flex items-center gap-3 mb-1">
+                                    <h3 className="font-black uppercase tracking-tighter text-2xl text-neutral-900 dark:text-white">Blog Data</h3>
+                                    <span className="px-2 py-0.5 rounded-md bg-primary/10 text-primary text-[9px] font-black uppercase tracking-widest">Dev Tool</span>
+                                </div>
+                                <p className="text-[10px] text-neutral-500 font-bold uppercase tracking-widest">Raw state inspector for debugging purposes</p>
+                            </div>
+                            
+                            <div className="flex items-center gap-3">
+                                <button
+                                    onClick={handleCopy}
+                                    className="flex items-center gap-2 px-5 py-2.5 bg-neutral-100 dark:bg-neutral-800 hover:bg-neutral-200 dark:hover:bg-neutral-700 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all"
+                                >
+                                    {copied ? <Check size={14} className="text-green-500" /> : <Copy size={14} />}
+                                    {copied ? 'Copied' : 'Copy JSON'}
+                                </button>
+                                <button
+                                    onClick={() => setIsOpen(false)}
+                                    className="p-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-full transition-colors text-neutral-400 hover:text-neutral-900 dark:hover:text-white"
+                                >
+                                    <X size={28} strokeWidth={1.5} />
+                                </button>
+                            </div>
+                        </div>
+
+                        {/* Content Area - Fixed scrolling and added syntax highlighting */}
+                        <div className="flex-1 min-h-0 w-full bg-[#0d0d0d] overflow-y-auto overflow-x-hidden custom-scrollbar">
+                            <pre 
+                                className="p-8 font-mono text-[13px] leading-relaxed text-neutral-300 whitespace-pre-wrap break-all"
+                                dangerouslySetInnerHTML={{ __html: highlightedHTML || '' }}
+                            />
+                        </div>
+
+                        {/* Footer */}
+                        <div className="px-8 py-4 bg-neutral-50 dark:bg-neutral-800/30 border-t border-neutral-100 dark:border-neutral-800 flex justify-between items-center text-[9px] font-bold text-neutral-400 uppercase tracking-widest shrink-0">
+                            <span>Blocks Count: {data.blocks?.length || 0}</span>
+                            <span>Status: {data.status || 'Unknown'}</span>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </>
+    );
+}

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

@@ -25,7 +25,7 @@ export function LibraryItem({
     const mouseDownRef = useRef<{ x: number; y: number } | null>(null);
 
     const handleDragStart = (e: React.DragEvent) => {
-        e.dataTransfer.setData('block-type', blockType);
+        e.dataTransfer.setData('blockType', blockType);
         e.dataTransfer.effectAllowed = 'move';
         setHasDragged(true); // Mark as dragged when drag starts
     };
@@ -66,15 +66,14 @@ export function LibraryItem({
             onMouseDown={handleMouseDown}
             onMouseMove={handleMouseMove}
             onClick={handleClick}
-            className="flex flex-col items-center justify-center p-5 rounded-2xl border border-dashboard-border bg-dashboard-card hover:border-primary hover:shadow-xl hover:shadow-primary/5 transition-all cursor-pointer group"
+            className="flex flex-col items-center justify-center p-6 rounded-[2rem] 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 hover:scale-[1.05] transition-all duration-500 cursor-grab active:cursor-grabbing group"
         >
-            <div className="text-neutral-400 dark:text-neutral-500 group-hover:text-primary dark:group-hover:text-primary mb-3 transition-colors duration-300">
-                {React.cloneElement(icon as React.ReactElement, { strokeWidth: 1.5 } as any)}
+            <div className="text-dashboard-text-secondary group-hover:text-primary transition-all duration-500 group-hover:scale-110 mb-4">
+                {React.cloneElement(icon as React.ReactElement, { strokeWidth: 1.5, size: 24 } as any)}
             </div>
-            <span className="text-[9px] font-black uppercase tracking-[0.15em] text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-950 dark:group-hover:text-white transition-colors">
+            <span className="text-[9px] font-black uppercase tracking-[0.2em] text-dashboard-text-secondary group-hover:text-dashboard-text transition-colors text-center leading-tight">
                 {label}
             </span>
         </div>
     );
 }
-