@jhits/plugin-blog 0.0.14 → 0.0.16

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

@@ -0,0 +1,13 @@
+import type { Block } from '../../../types/block';
+import type { PostMetadata, SEOMetadata } from '../../../types/post';
+export interface EditorSidebarProps {
+    slug: string;
+    seo: SEOMetadata;
+    metadata: PostMetadata;
+    heroBlock: Block | null;
+    status: string;
+    onSEOUpdate: (seo: Partial<SEOMetadata>) => void;
+    onMetadataUpdate: (metadata: Partial<PostMetadata>) => void;
+}
+export declare function EditorSidebar({ slug, seo, metadata, heroBlock, status, onSEOUpdate, onMetadataUpdate, }: EditorSidebarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EditorSidebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorSidebar.d.ts","sourceRoot":"","sources":["EditorSidebar.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAErE,MAAM,WAAW,kBAAkB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,WAAW,CAAC;IACjB,QAAQ,EAAE,YAAY,CAAC;IACvB,SAAS,EAAE,KAAK,GAAG,IAAI,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,CAAC,GAAG,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACjD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;CAC/D;AAED,wBAAgB,aAAa,CAAC,EAC1B,IAAI,EACJ,GAAG,EACH,QAAQ,EACR,SAAS,EACT,MAAM,EACN,WAAW,EACX,gBAAgB,GACnB,EAAE,kBAAkB,2CA0JpB"}

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

@@ -0,0 +1,181 @@
+'use client';
+
+import React from 'react';
+import { Globe, Search, Box } from 'lucide-react';
+import { FeaturedMediaSection, PrivacySettingsSection } from './index';
+import type { Block } from '../../../types/block';
+import type { PostMetadata, SEOMetadata } from '../../../types/post';
+
+export interface EditorSidebarProps {
+    slug: string;
+    seo: SEOMetadata;
+    metadata: PostMetadata;
+    heroBlock: Block | null;
+    status: string;
+    onSEOUpdate: (seo: Partial<SEOMetadata>) => void;
+    onMetadataUpdate: (metadata: Partial<PostMetadata>) => void;
+}
+
+export function EditorSidebar({
+    slug,
+    seo,
+    metadata,
+    heroBlock,
+    status,
+    onSEOUpdate,
+    onMetadataUpdate,
+}: EditorSidebarProps) {
+    return (
+        <div className="p-8 w-80 min-w-0 max-w-full space-y-12 overflow-y-auto max-h-full">
+            {/* SEO Section */}
+            <section>
+                <div className="flex items-center gap-3 mb-6">
+                    <Search 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">
+                        SEO Settings
+                    </label>
+                </div>
+                <div className="space-y-4">
+                    <div>
+                        <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
+                            SEO Title
+                        </label>
+                        <input
+                            type="text"
+                            value={seo.title || ''}
+                            onChange={(e) => onSEOUpdate({ title: e.target.value })}
+                            placeholder="SEO title (defaults to post title)"
+                            className="w-full px-3 py-2 text-xs bg-dashboard-card border border-dashboard-border rounded-lg outline-none focus:border-primary transition-all text-dashboard-text"
+                        />
+                        <p className="text-[9px] text-neutral-400 dark:text-neutral-500 mt-1">
+                            {seo.title?.length || 0} / 60 characters
+                        </p>
+                    </div>
+                    <div>
+                        <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
+                            Meta Description
+                        </label>
+                        <textarea
+                            value={seo.description || ''}
+                            onChange={(e) => onSEOUpdate({ description: e.target.value })}
+                            placeholder="Brief description for search engines"
+                            rows={3}
+                            className="w-full px-3 py-2 text-xs bg-white dark:bg-neutral-900/50 border border-neutral-300 dark:border-neutral-700 rounded-lg outline-none focus:border-primary transition-all dark:text-neutral-100 resize-none"
+                        />
+                        <p className="text-[9px] text-neutral-400 dark:text-neutral-500 mt-1">
+                            {seo.description?.length || 0} / 160 characters
+                        </p>
+                    </div>
+                    <div>
+                        <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
+                            Keywords (comma-separated)
+                        </label>
+                        <input
+                            type="text"
+                            value={seo.keywords?.join(', ') || ''}
+                            onChange={(e) => {
+                                const keywords = e.target.value.split(',').map(k => k.trim()).filter(k => k);
+                                onSEOUpdate({ keywords });
+                            }}
+                            placeholder="keyword1, keyword2, keyword3"
+                            className="w-full px-3 py-2 text-xs bg-dashboard-card border border-dashboard-border rounded-lg outline-none focus:border-primary transition-all text-dashboard-text"
+                        />
+                    </div>
+                    <div>
+                        <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
+                            Open Graph Image URL
+                        </label>
+                        <input
+                            type="url"
+                            value={seo.ogImage || ''}
+                            onChange={(e) => onSEOUpdate({ ogImage: e.target.value })}
+                            placeholder="https://example.com/image.jpg"
+                            className="w-full px-3 py-2 text-xs bg-dashboard-card border border-dashboard-border rounded-lg outline-none focus:border-primary transition-all text-dashboard-text"
+                        />
+                    </div>
+                </div>
+            </section>
+
+            {/* Publishing Section */}
+            <section className="pt-8 border-t border-neutral-200 dark:border-neutral-800">
+                <div className="flex items-center gap-3 mb-6">
+                    <Globe 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">
+                        Publishing
+                    </label>
+                </div>
+                <div className="bg-dashboard-bg p-5 rounded-2xl border border-dashboard-border">
+                    <span className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-3">Slug / Permalink</span>
+                    <div className="text-xs font-mono break-all text-neutral-600 dark:text-neutral-400 leading-relaxed">
+                        /blog/<span className="text-neutral-950 dark:text-white bg-amber-50 dark:bg-amber-900/20 px-1 rounded">{slug || 'untitled-post'}</span>
+                    </div>
+                </div>
+            </section>
+
+            {/* Category Section */}
+            <section className="pt-8 border-t border-neutral-200 dark:border-neutral-800">
+                <div className="flex items-center gap-3 mb-6">
+                    <Box 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">
+                        Category
+                    </label>
+                </div>
+                <div className="space-y-4">
+                    <div>
+                        <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold block mb-2">
+                            Category
+                        </label>
+                        <input
+                            type="text"
+                            value={metadata.categories?.[0] || ''}
+                            onChange={(e) => {
+                                const category = e.target.value.trim();
+                                onMetadataUpdate({
+                                    categories: category ? [category] : []
+                                });
+                            }}
+                            placeholder="Enter category (required for publishing)"
+                            className="w-full px-3 py-2 text-xs bg-dashboard-card border border-dashboard-border rounded-lg outline-none focus:border-primary transition-all text-dashboard-text"
+                        />
+                        <p className="text-[9px] text-neutral-400 dark:text-neutral-500 mt-1">
+                            {metadata.categories?.[0] ? 'Category set' : 'No category set'}
+                        </p>
+                    </div>
+                </div>
+            </section>
+
+            {/* Featured Media Section */}
+            <FeaturedMediaSection
+                featuredImage={metadata.featuredImage}
+                heroBlock={heroBlock}
+                slug={slug}
+                onUpdate={(image) => onMetadataUpdate({ featuredImage: image })}
+            />
+
+            {/* Privacy Settings Section */}
+            <PrivacySettingsSection
+                privacy={metadata.privacy}
+                onUpdate={(privacy) => onMetadataUpdate({ privacy })}
+            />
+
+            {/* Post Status Section */}
+            <section className="pt-8 border-t border-neutral-200 dark:border-neutral-800">
+                <div className="flex items-center justify-between mb-4">
+                    <label className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black">
+                        Post Status
+                    </label>
+                    <span className="text-[10px] font-black text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 px-2.5 py-1 rounded-full uppercase tracking-tighter">
+                        {status}
+                    </span>
+                </div>
+                <p className="text-[11px] text-neutral-500 dark:text-neutral-400 leading-relaxed italic">
+                    {status === 'draft'
+                        ? 'This post is private. Only you can see it until you hit publish.'
+                        : status === 'published'
+                            ? 'This post is live and visible to everyone.'
+                            : 'This post is scheduled for publication.'}
+                </p>
+            </section>
+        </div>
+    );
+}

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

@@ -0,0 +1,6 @@
+export interface ErrorBannerProps {
+    error: string | null;
+    onDismiss: () => void;
+}
+export declare function ErrorBanner({ error, onDismiss }: ErrorBannerProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ErrorBanner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBanner.d.ts","sourceRoot":"","sources":["ErrorBanner.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,gBAAgB;IAC7B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,gBAAgB,kDAoBjE"}

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

@@ -0,0 +1,31 @@
+'use client';
+
+import React from 'react';
+import { AlertTriangle, X } from 'lucide-react';
+
+export interface ErrorBannerProps {
+    error: string | null;
+    onDismiss: () => void;
+}
+
+export function ErrorBanner({ error, onDismiss }: ErrorBannerProps) {
+    if (!error) return null;
+
+    return (
+        <div className="bg-red-50 dark:bg-red-900/20 border-b border-red-200 dark:border-red-800 px-6 py-3 flex items-center justify-between">
+            <div className="flex items-center gap-3 flex-1">
+                <AlertTriangle className="text-red-600 dark:text-red-400 flex-shrink-0" size={20} />
+                <p className="text-red-800 dark:text-red-300 text-sm font-medium">
+                    {error}
+                </p>
+            </div>
+            <button
+                onClick={onDismiss}
+                className="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-200 transition-colors"
+                aria-label="Dismiss error"
+            >
+                <X size={18} />
+            </button>
+        </div>
+    );
+}

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

@@ -0,0 +1,25 @@
+import type { Block } from '../../../types/block';
+export interface FeaturedImage {
+    id?: string;
+    alt?: string;
+    brightness?: number;
+    blur?: number;
+    scale?: number;
+    positionX?: number;
+    positionY?: number;
+    isCustom?: boolean;
+}
+export interface FeaturedMediaSectionProps {
+    featuredImage?: FeaturedImage;
+    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 declare function FeaturedMediaSection({ featuredImage, heroBlock, slug, onUpdate, }: FeaturedMediaSectionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FeaturedMediaSection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FeaturedMediaSection.d.ts","sourceRoot":"","sources":["FeaturedMediaSection.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAElD,MAAM,WAAW,aAAa;IAE1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,yBAAyB;IACtC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,SAAS,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;CACxD;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,EACjC,aAAa,EACb,SAAS,EACT,IAAI,EACJ,QAAQ,GACX,EAAE,yBAAyB,2CA0S3B"}

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

@@ -0,0 +1,341 @@
+'use client';
+
+import React, { useState, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Image as ImageIcon, Plus, X } 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
+    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,
+    slug,
+    onUpdate,
+}: FeaturedMediaSectionProps) {
+    const [showImagePicker, setShowImagePicker] = useState(false);
+    const [openEditorDirectly, setOpenEditorDirectly] = useState(false);
+    const [mounted, setMounted] = useState(false);
+
+    // Handle SSR - ensure we only render portal on client
+    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,
+            });
+        }
+    }, [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) {
+                // 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,
+                };
+                
+                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
+            }
+            
+            // 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);
+        } 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
+    ) => {
+        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
+        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);
+        }
+
+        // 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 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
+                }));
+            }
+        } catch (error) {
+            console.error('Failed to save image transform:', 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
+                </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">
+                        <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)}
+                        />
+                        {/* 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>
+                    <div className="mt-2 flex items-center gap-3">
+                        <button
+                            onClick={() => setShowImagePicker(true)}
+                            className="text-[10px] text-neutral-600 dark:text-neutral-400 hover:text-primary font-bold uppercase tracking-wider"
+                        >
+                            Change Image
+                        </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"
+                        >
+                            Remove Image
+                        </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"
+                    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>
+            )}
+
+            {/* 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" />
+                            </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>
+                </div>,
+                document.body
+            )}
+        </section>
+    );
+}
+

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

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface LibraryItemProps {
+    icon: React.ReactNode;
+    label: string;
+    blockType: string;
+    description?: string;
+    onAddBlock?: (blockType: string) => void;
+}
+/**
+ * Reusable Library Item Component
+ * Makes blocks draggable from the library and clickable to add at bottom
+ */
+export declare function LibraryItem({ icon, label, blockType, description, onAddBlock }: LibraryItemProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LibraryItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LibraryItem.d.ts","sourceRoot":"","sources":["LibraryItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,MAAM,WAAW,gBAAgB;IAC7B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,SAAS,EACT,WAAW,EACX,UAAU,EACb,EAAE,gBAAgB,2CAwDlB"}