@jhits/plugin-blog 0.0.14 → 0.0.16

package/src/views/CanvasEditor/SaveConfirmationModal.tsx

@@ -0,0 +1,233 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { X, AlertTriangle, CheckCircle2 } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+export interface SaveConfirmationModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => Promise<void>;
+    isSaving: boolean;
+    postTitle?: string;
+    isPublished?: boolean;
+    saveAsDraft?: boolean;
+    error?: string | null;
+}
+
+export function SaveConfirmationModal({
+    isOpen,
+    onClose,
+    onConfirm,
+    isSaving,
+    postTitle,
+    isPublished,
+    saveAsDraft = false,
+    error,
+}: SaveConfirmationModalProps) {
+    const [mounted, setMounted] = useState(false);
+    const [showSuccess, setShowSuccess] = useState(false);
+    const [saveError, setSaveError] = useState<string | null>(null);
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    // Reset states when modal opens
+    useEffect(() => {
+        if (isOpen) {
+            setShowSuccess(false);
+            setSaveError(null);
+        }
+    }, [isOpen]);
+
+    // Update error state when error prop changes
+    useEffect(() => {
+        if (error) {
+            setSaveError(error);
+            setShowSuccess(false);
+        } else {
+            setSaveError(null);
+        }
+    }, [error]);
+
+    if (!mounted) return null;
+
+    const handleConfirm = async () => {
+        // Clear any previous errors
+        setSaveError(null);
+        try {
+            await onConfirm();
+            // Only show success if onConfirm completes without error
+            setShowSuccess(true);
+            // Close modal after showing success for 1.5 seconds
+            setTimeout(() => {
+                onClose();
+                setShowSuccess(false);
+                setSaveError(null);
+            }, 1500);
+        } catch (error: any) {
+            // Display error in modal
+            const errorMessage = error.message || 'Failed to save post. Please try again.';
+            setSaveError(errorMessage);
+            console.error('[SaveConfirmationModal] Save failed:', error);
+        }
+    };
+
+    const modalContent = (
+        <AnimatePresence>
+            {isOpen && (
+                <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4">
+                    {/* Backdrop */}
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        onClick={onClose}
+                        className="absolute inset-0 bg-black/60 backdrop-blur-md"
+                    />
+
+                    {/* Modal */}
+                    <motion.div
+                        initial={{ scale: 0.9, opacity: 0, y: 20 }}
+                        animate={{ scale: 1, opacity: 1, y: 0 }}
+                        exit={{ scale: 0.9, opacity: 0, y: 20 }}
+                        onClick={(e) => e.stopPropagation()}
+                        className="relative w-full font-sans max-w-md bg-dashboard-card rounded-[2.5rem] p-8 shadow-2xl border border-dashboard-border"
+                    >
+                        {/* Close Button */}
+                        <button
+                            onClick={onClose}
+                            disabled={isSaving}
+                            className="absolute top-6 right-6 text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                            <X size={24} />
+                        </button>
+
+                        {/* Icon */}
+                        <div className={`w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6 transition-all ${
+                            saveError
+                                ? 'bg-red-100 dark:bg-red-900/20'
+                                : showSuccess
+                                ? 'bg-green-100 dark:bg-green-900/20'
+                                : 'bg-amber-100 dark:bg-amber-900/20'
+                            }`}>
+                            {saveError ? (
+                                <AlertTriangle size={32} className="text-red-600 dark:text-red-400" />
+                            ) : showSuccess ? (
+                                <CheckCircle2 size={32} className="text-green-600 dark:text-green-400" />
+                            ) : (
+                                <AlertTriangle size={32} className="text-amber-600 dark:text-amber-400" />
+                            )}
+                        </div>
+
+                        {/* Title */}
+                        <h3 className="text-2xl font-black text-center mb-4 text-neutral-950 dark:text-white">
+                            {saveError
+                                ? 'Error'
+                                : showSuccess
+                                ? 'Success!'
+                                : saveAsDraft
+                                    ? 'Save Draft'
+                                    : `Confirm ${isPublished ? 'Update' : 'Publish'}`
+                            }
+                        </h3>
+
+                        {/* Message */}
+                        <div className="text-center mb-8">
+                            {saveError ? (
+                                <div className="space-y-3">
+                                    <p className="text-red-700 dark:text-red-300 font-semibold">
+                                        {saveError}
+                                    </p>
+                                    <p className="text-sm text-neutral-600 dark:text-neutral-400">
+                                        Please fix the issues above and try again.
+                                    </p>
+                                </div>
+                            ) : showSuccess ? (
+                                <p className="text-green-700 dark:text-green-300 font-semibold">
+                                    {saveAsDraft ? 'Draft saved successfully!' : 'Post saved successfully!'}
+                                </p>
+                            ) : (
+                                <>
+                                    <p className="text-neutral-700 dark:text-neutral-300 mb-2">
+                                        {saveAsDraft
+                                            ? 'Save this post as a draft? You can continue editing and publish it later.'
+                                            : isPublished
+                                                ? 'You are about to update this post. Changes cannot be undone.'
+                                                : 'You are about to publish this post. This action cannot be undone.'
+                                        }
+                                    </p>
+                                    {postTitle && (
+                                        <p className="text-sm text-neutral-500 dark:text-neutral-400 italic">
+                                            "{postTitle}"
+                                        </p>
+                                    )}
+                                </>
+                            )}
+                        </div>
+
+                        {/* Actions */}
+                        {showSuccess ? (
+                            <div className="flex justify-center">
+                                <button
+                                    onClick={onClose}
+                                    className="px-6 py-3 rounded-full bg-green-600 text-white font-bold uppercase text-[10px] tracking-widest transition-all hover:bg-green-700 shadow-lg shadow-green-600/20"
+                                >
+                                    Close
+                                </button>
+                            </div>
+                        ) : saveError ? (
+                            <div className="flex gap-4">
+                                <button
+                                    onClick={onClose}
+                                    className="flex-1 px-6 py-3 rounded-full border-2 border-dashboard-border text-dashboard-text font-bold uppercase text-[10px] tracking-widest transition-all hover:bg-dashboard-bg"
+                                >
+                                    Close
+                                </button>
+                                <button
+                                    onClick={handleConfirm}
+                                    disabled={isSaving}
+                                    className="flex-1 px-6 py-3 rounded-full bg-primary text-white font-bold uppercase text-[10px] tracking-widest transition-all hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-primary/20"
+                                >
+                                    {isSaving 
+                                        ? 'Retrying...' 
+                                        : 'Try Again'
+                                    }
+                                </button>
+                            </div>
+                        ) : (
+                            <div className="flex gap-4">
+                                <button
+                                    onClick={onClose}
+                                    disabled={isSaving}
+                                    className="flex-1 px-6 py-3 rounded-full border-2 border-dashboard-border text-dashboard-text font-bold uppercase text-[10px] tracking-widest transition-all hover:bg-dashboard-bg disabled:opacity-50 disabled:cursor-not-allowed"
+                                >
+                                    Cancel
+                                </button>
+                                <button
+                                    onClick={handleConfirm}
+                                    disabled={isSaving}
+                                    className="flex-1 px-6 py-3 rounded-full bg-primary text-white font-bold uppercase text-[10px] tracking-widest transition-all hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-primary/20"
+                                >
+                                    {isSaving 
+                                        ? 'Saving...' 
+                                        : saveAsDraft 
+                                            ? 'Save Draft' 
+                                            : isPublished 
+                                                ? 'Update Post' 
+                                                : 'Publish Post'
+                                    }
+                                </button>
+                            </div>
+                        )}
+                    </motion.div>
+                </div>
+            )}
+        </AnimatePresence>
+    );
+
+    return createPortal(modalContent, document.body);
+}
+

package/src/views/CanvasEditor/components/CustomBlockItem.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface CustomBlockItemProps {
+    blockType: string;
+    name: string;
+    description?: string;
+    icon: React.ReactNode;
+    onAddBlock?: (blockType: string) => void;
+}
+/**
+ * Custom Block Item Component
+ * Draggable custom block from client registry and clickable to add at bottom
+ */
+export declare function CustomBlockItem({ blockType, name, description, icon, onAddBlock }: CustomBlockItemProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CustomBlockItem.d.ts.map

package/src/views/CanvasEditor/components/CustomBlockItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomBlockItem.d.ts","sourceRoot":"","sources":["CustomBlockItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAGhD,MAAM,WAAW,oBAAoB;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC5B,SAAS,EACT,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,UAAU,EACb,EAAE,oBAAoB,2CAmEtB"}

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

@@ -0,0 +1,92 @@
+'use client';
+
+import React, { useState, useRef } from 'react';
+import { GripVertical } from 'lucide-react';
+
+export interface CustomBlockItemProps {
+    blockType: string;
+    name: string;
+    description?: string;
+    icon: React.ReactNode;
+    onAddBlock?: (blockType: string) => void;
+}
+
+/**
+ * Custom Block Item Component
+ * Draggable custom block from client registry and clickable to add at bottom
+ */
+export function CustomBlockItem({
+    blockType,
+    name,
+    description,
+    icon,
+    onAddBlock
+}: CustomBlockItemProps) {
+    const [hasDragged, setHasDragged] = useState(false);
+    const mouseDownRef = useRef<{ x: number; y: number } | null>(null);
+
+    const handleDragStart = (e: React.DragEvent) => {
+        e.dataTransfer.setData('block-type', blockType);
+        e.dataTransfer.effectAllowed = 'move';
+        setHasDragged(true); // Mark as dragged when drag starts
+    };
+
+    const handleMouseDown = (e: React.MouseEvent) => {
+        // Track mouse position on mousedown
+        mouseDownRef.current = { x: e.clientX, y: e.clientY };
+        setHasDragged(false); // Reset drag state
+    };
+
+    const handleMouseMove = (e: React.MouseEvent) => {
+        // If mouse moved more than 5px, consider it a drag
+        if (mouseDownRef.current) {
+            const dx = Math.abs(e.clientX - mouseDownRef.current.x);
+            const dy = Math.abs(e.clientY - mouseDownRef.current.y);
+            if (dx > 5 || dy > 5) {
+                setHasDragged(true);
+            }
+        }
+    };
+
+    const handleClick = (e: React.MouseEvent) => {
+        // Only add block if we didn't drag
+        if (!hasDragged && onAddBlock) {
+            e.preventDefault();
+            e.stopPropagation();
+            onAddBlock(blockType);
+        }
+        // Reset state
+        mouseDownRef.current = null;
+        setTimeout(() => setHasDragged(false), 100);
+    };
+
+    return (
+        <div
+            draggable
+            onDragStart={handleDragStart}
+            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"
+            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">
+                        {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">
+                        {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" />
+            </div>
+            {description && (
+                <p className="text-[9px] text-neutral-500 dark:text-neutral-400 leading-relaxed line-clamp-2">
+                    {description}
+                </p>
+            )}
+        </div>
+    );
+}
+

package/src/views/CanvasEditor/components/EditorCanvas.d.ts

@@ -0,0 +1,29 @@
+import type { Block } from '../../../types/block';
+import type { BlockTypeDefinition } from '../../../types/block';
+export interface EditorCanvasProps {
+    isPreviewMode: boolean;
+    heroBlock: Block | null;
+    heroBlockDefinition: BlockTypeDefinition | undefined;
+    contentBlocks: Block[];
+    title: string;
+    siteId: string;
+    locale: string;
+    darkMode: boolean;
+    backgroundColors?: {
+        light: string;
+        dark?: string;
+    };
+    featuredImage?: {
+        id?: string;
+        alt?: 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;
+    onBlockMove: (id: string, newIndex: number, containerId?: string) => void;
+}
+export declare function EditorCanvas({ isPreviewMode, heroBlock, heroBlockDefinition, contentBlocks, title, siteId, locale, darkMode, backgroundColors, featuredImage, onTitleChange, onHeroBlockUpdate, onHeroBlockDelete, onBlockAdd, onBlockUpdate, onBlockDelete, onBlockMove, }: EditorCanvasProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EditorCanvas.d.ts.map

package/src/views/CanvasEditor/components/EditorCanvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorCanvas.d.ts","sourceRoot":"","sources":["EditorCanvas.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAEhE,MAAM,WAAW,iBAAiB;IAC9B,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,KAAK,GAAG,IAAI,CAAC;IACxB,mBAAmB,EAAE,mBAAmB,GAAG,SAAS,CAAC;IACrD,aAAa,EAAE,KAAK,EAAE,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,aAAa,CAAC,EAAE;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,GAAG,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,iBAAiB,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,IAAI,CAAC;IAC1D,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACxE,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,IAAI,CAAC;IAClE,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7E;AAED,wBAAgB,YAAY,CAAC,EACzB,aAAa,EACb,SAAS,EACT,mBAAmB,EACnB,aAAa,EACb,KAAK,EACL,MAAM,EACN,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,iBAAiB,EACjB,UAAU,EACV,aAAa,EACb,aAAa,EACb,WAAW,GACd,EAAE,iBAAiB,2CA0GnB"}

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

@@ -0,0 +1,160 @@
+'use client';
+
+import React, { useRef, useEffect } from 'react';
+import { BlockWrapper } from '../BlockWrapper';
+import { EditorBody } from '../EditorBody';
+import { BlockRenderer } from '../../../lib/blocks/BlockRenderer';
+import type { Block } from '../../../types/block';
+import type { BlockTypeDefinition } from '../../../types/block';
+
+export interface EditorCanvasProps {
+    isPreviewMode: boolean;
+    heroBlock: Block | null;
+    heroBlockDefinition: BlockTypeDefinition | undefined;
+    contentBlocks: Block[];
+    title: string;
+    siteId: string;
+    locale: string;
+    darkMode: boolean;
+    backgroundColors?: {
+        light: string;
+        dark?: string;
+    };
+    featuredImage?: {
+        id?: string; // Semantic ID - plugin-images handles transforms
+        alt?: 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;
+    onBlockMove: (id: string, newIndex: number, containerId?: string) => void;
+}
+
+export function EditorCanvas({
+    isPreviewMode,
+    heroBlock,
+    heroBlockDefinition,
+    contentBlocks,
+    title,
+    siteId,
+    locale,
+    darkMode,
+    backgroundColors,
+    featuredImage,
+    onTitleChange,
+    onHeroBlockUpdate,
+    onHeroBlockDelete,
+    onBlockAdd,
+    onBlockUpdate,
+    onBlockDelete,
+    onBlockMove,
+}: EditorCanvasProps) {
+    const titleRef = useRef<HTMLTextAreaElement>(null);
+
+    // Handle Title Auto-resize
+    useEffect(() => {
+        if (titleRef.current) {
+            titleRef.current.style.height = 'auto';
+            titleRef.current.style.height = `${titleRef.current.scrollHeight}px`;
+        }
+    }, [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>
+                )}
+
+                {isPreviewMode ? (
+                    <div className="space-y-8">
+                        {heroBlockDefinition && heroBlock && (
+                            <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,
+                                }}
+                            />
+                        )}
+
+                        {!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>
+                        )}
+
+                        <EditorBody
+                            blocks={contentBlocks}
+                            darkMode={darkMode}
+                            backgroundColors={backgroundColors}
+                            onBlockAdd={onBlockAdd}
+                            onBlockUpdate={onBlockUpdate}
+                            onBlockDelete={onBlockDelete}
+                            onBlockMove={onBlockMove}
+                        />
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/views/CanvasEditor/components/EditorLibrary.d.ts

@@ -0,0 +1,7 @@
+import type { BlockTypeDefinition } from '../../../types/block';
+export interface EditorLibraryProps {
+    registeredBlocks: BlockTypeDefinition[];
+    onAddBlock: (type: string) => void;
+}
+export declare function EditorLibrary({ registeredBlocks, onAddBlock }: EditorLibraryProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EditorLibrary.d.ts.map

package/src/views/CanvasEditor/components/EditorLibrary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorLibrary.d.ts","sourceRoot":"","sources":["EditorLibrary.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAEhE,MAAM,WAAW,kBAAkB;IAC/B,gBAAgB,EAAE,mBAAmB,EAAE,CAAC;IACxC,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,wBAAgB,aAAa,CAAC,EAAE,gBAAgB,EAAE,UAAU,EAAE,EAAE,kBAAkB,2CA6GjF"}

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

@@ -0,0 +1,122 @@
+'use client';
+
+import React from 'react';
+import { Library, Image as ImageIcon, LayoutTemplate, Type, Box } from 'lucide-react';
+import { LibraryItem, CustomBlockItem } from './index';
+import type { BlockTypeDefinition } from '../../../types/block';
+
+export interface EditorLibraryProps {
+    registeredBlocks: BlockTypeDefinition[];
+    onAddBlock: (type: string) => void;
+}
+
+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');
+
+    return (
+        <div className="p-6 w-72 min-w-0 max-w-full">
+            {/* Text Blocks */}
+            {textBlocks.length > 0 && (
+                <div className="mb-10">
+                    <h3 className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black mb-6">Text</h3>
+                    <div className="grid grid-cols-2 gap-3">
+                        {textBlocks.map((block) => {
+                            const IconComponent = block.icon || block.components.Icon || Type;
+                            return (
+                                <LibraryItem
+                                    key={block.type}
+                                    icon={<IconComponent size={16} />}
+                                    label={block.name}
+                                    blockType={block.type}
+                                    description={block.description}
+                                    onAddBlock={onAddBlock}
+                                />
+                            );
+                        })}
+                    </div>
+                </div>
+            )}
+
+            {/* Media Blocks */}
+            {mediaBlocks.length > 0 && (
+                <div className="mb-10">
+                    <h3 className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black mb-6">Media</h3>
+                    <div className="grid grid-cols-2 gap-3">
+                        {mediaBlocks.map((block) => {
+                            const IconComponent = block.icon || block.components.Icon || ImageIcon;
+                            return (
+                                <LibraryItem
+                                    key={block.type}
+                                    icon={<IconComponent size={16} />}
+                                    label={block.name}
+                                    blockType={block.type}
+                                    description={block.description}
+                                    onAddBlock={onAddBlock}
+                                />
+                            );
+                        })}
+                    </div>
+                </div>
+            )}
+
+            {/* Layout Blocks */}
+            {layoutBlocks.length > 0 && (
+                <div className="mb-10">
+                    <h3 className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black mb-6">Layout</h3>
+                    <div className="grid grid-cols-2 gap-3">
+                        {layoutBlocks.map((block) => {
+                            const IconComponent = block.icon || block.components.Icon || LayoutTemplate;
+                            return (
+                                <LibraryItem
+                                    key={block.type}
+                                    icon={<IconComponent size={16} />}
+                                    label={block.name}
+                                    blockType={block.type}
+                                    description={block.description}
+                                    onAddBlock={onAddBlock}
+                                />
+                            );
+                        })}
+                    </div>
+                </div>
+            )}
+
+            {/* Custom Blocks */}
+            {customBlocks.length > 0 && (
+                <div>
+                    <h3 className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black mb-6">Custom Blocks</h3>
+                    <div className="space-y-3">
+                        {customBlocks.map((block) => {
+                            const IconComponent = block.icon || block.components.Icon || Box;
+                            return (
+                                <CustomBlockItem
+                                    key={block.type}
+                                    blockType={block.type}
+                                    name={block.name}
+                                    description={block.description}
+                                    icon={<IconComponent size={14} />}
+                                    onAddBlock={onAddBlock}
+                                />
+                            );
+                        })}
+                    </div>
+                </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" />
+                    <p className="text-xs text-neutral-500 dark:text-neutral-400">
+                        No blocks registered yet.
+                    </p>
+                </div>
+            )}
+        </div>
+    );
+}