@jhits/plugin-blog 0.0.9 → 0.0.11

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

@@ -1,181 +0,0 @@
-'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

@@ -1,6 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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.js

@@ -1,8 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AlertTriangle, X } from 'lucide-react';
-export function ErrorBanner({ error, onDismiss }) {
-    if (!error)
-        return null;
-    return (_jsxs("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", children: [_jsxs("div", { className: "flex items-center gap-3 flex-1", children: [_jsx(AlertTriangle, { className: "text-red-600 dark:text-red-400 flex-shrink-0", size: 20 }), _jsx("p", { className: "text-red-800 dark:text-red-300 text-sm font-medium", children: error })] }), _jsx("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", children: _jsx(X, { size: 18 }) })] }));
-}

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

@@ -1,31 +0,0 @@
-'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

@@ -1,25 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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.js

@@ -1,182 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { 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';
-/**
- * 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, }) {
-    var _a, _b, _c, _d, _e;
-    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 === null || featuredImage === void 0 ? void 0 : 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(Object.assign(Object.assign({}, featuredImage), { id: semanticId }));
-        }
-    }, [featuredImage, semanticId, onUpdate]);
-    // Get transform values from featuredImage or use defaults
-    const brightness = (_a = featuredImage === null || featuredImage === void 0 ? void 0 : featuredImage.brightness) !== null && _a !== void 0 ? _a : 100;
-    const blur = (_b = featuredImage === null || featuredImage === void 0 ? void 0 : featuredImage.blur) !== null && _b !== void 0 ? _b : 0;
-    const scale = (_c = featuredImage === null || featuredImage === void 0 ? void 0 : featuredImage.scale) !== null && _c !== void 0 ? _c : 1.0;
-    const positionX = (_d = featuredImage === null || featuredImage === void 0 ? void 0 : featuredImage.positionX) !== null && _d !== void 0 ? _d : 0;
-    const positionY = (_e = featuredImage === null || featuredImage === void 0 ? void 0 : featuredImage.positionY) !== null && _e !== void 0 ? _e : 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) => {
-        var _a, _b;
-        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 = ((_a = image.url.split('/api/uploads/')[1]) === null || _a === void 0 ? void 0 : _a.split('?')[0]) || image.id;
-            }
-            else if (!filename) {
-                // For external URLs, use the image ID or extract from URL
-                filename = image.id || ((_b = image.url.split('/').pop()) === null || _b === void 0 ? void 0 : _b.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,
-            });
-        }
-        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, finalPositionX, finalPositionY, finalBrightness, finalBlur) => {
-        if (!(featuredImage === null || featuredImage === void 0 ? void 0 : 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 !== null && finalBrightness !== void 0 ? finalBrightness : brightness;
-        const finalBlurValue = finalBlur !== null && finalBlur !== void 0 ? 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(Object.assign(Object.assign({}, featuredImage), { id: featuredImage.id || imageId, 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 (_jsxs("section", { children: [_jsxs("div", { className: "flex items-center gap-3 mb-6", children: [_jsx(ImageIcon, { size: 14, className: "text-neutral-500 dark:text-neutral-400" }), _jsx("label", { className: "text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black", children: "Featured Media" })] }), (featuredImage === null || featuredImage === void 0 ? void 0 : featuredImage.id) ? (_jsxs("div", { className: "relative group", children: [_jsxs("div", { className: "relative aspect-[16/10] bg-dashboard-bg rounded-3xl overflow-hidden border border-dashboard-border group/image", children: [_jsx(Image, Object.assign({ id: imageId, alt: (featuredImage === null || featuredImage === void 0 ? void 0 : featuredImage.alt) || 'Featured image', fill: true, className: "object-cover w-full h-full", editable: false }, {
-                                brightness,
-                                blur,
-                                scale,
-                                positionX,
-                                positionY,
-                            })), _jsx("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]", children: _jsxs("div", { className: "flex items-center gap-2 px-4 py-2 bg-white dark:bg-neutral-800 rounded-full shadow-xl", children: [_jsx(ImageIcon, { size: 14, className: "text-primary" }), _jsx("span", { className: "text-[10px] font-bold uppercase tracking-widest", children: "Edit" })] }) })] }), _jsxs("div", { className: "mt-2 flex items-center gap-3", children: [_jsx("button", { onClick: () => setShowImagePicker(true), className: "text-[10px] text-neutral-600 dark:text-neutral-400 hover:text-primary font-bold uppercase tracking-wider", children: "Change Image" }), _jsx("span", { className: "text-[10px] text-neutral-400", children: "\u2022" }), _jsx("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", children: "Remove Image" })] })] })) : (_jsxs("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), children: [_jsx(Plus, { size: 24, strokeWidth: 1, className: "mb-3 group-hover:scale-110 transition-transform" }), _jsx("span", { className: "text-[9px] font-black uppercase tracking-widest", children: "Assign Image" })] })), showImagePicker && mounted && createPortal(_jsx("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
-                }, children: _jsxs("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(), children: [_jsxs("div", { className: "flex items-center justify-between mb-6", children: [_jsx("h3", { className: "text-lg font-bold text-neutral-900 dark:text-neutral-100", children: openEditorDirectly ? 'Edit Featured Image' : 'Select Featured Image' }), _jsx("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", children: _jsx(X, { size: 20, className: "transition-colors" }) })] }), _jsx(ImagePicker, Object.assign({ value: (featuredImage === null || featuredImage === void 0 ? void 0 : featuredImage.id) ? imageId : undefined, onChange: handleImageChange, brightness: brightness, blur: blur }, {
-                            scale,
-                            positionX,
-                            positionY,
-                        }, { onBrightnessChange: (val) => {
-                                // Update local state only - don't trigger save
-                                if (featuredImage) {
-                                    onUpdate(Object.assign(Object.assign({}, featuredImage), { id: featuredImage.id || imageId, brightness: val }));
-                                }
-                            }, onBlurChange: (val) => {
-                                // Update local state only - don't trigger save
-                                if (featuredImage) {
-                                    onUpdate(Object.assign(Object.assign({}, featuredImage), { id: featuredImage.id || imageId, blur: val }));
-                                }
-                            }, onEditorSave: handleEditorSave, darkMode: false, showEffects: true, aspectRatio: "16/10" // Thumbnail aspect ratio for blog cards
-                            , borderRadius: "rounded-3xl", objectFit: "cover" // Cover for thumbnails
-                            , objectPosition: "center" }))] }) }), document.body)] }));
-}