@jhits/plugin-blog 0.0.18 → 0.0.20

package/dist/views/CanvasEditor/EditorHeader.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
-import { ArrowLeft, Library, Settings2, Clock, Edit, Eye, Globe, ChevronDown } from 'lucide-react';
+import { ArrowLeft, Library, Settings2, Save, Clock, Edit, Eye, Plus, ChevronDown, CheckCircle2 } from 'lucide-react';
 import { useEditor } from '../../state/EditorContext';
 import { SaveConfirmationModal } from './SaveConfirmationModal';
 export function EditorHeader({ isLibraryOpen, onLibraryToggle, isPreviewMode, onPreviewToggle, isSidebarOpen, onSidebarToggle, isSaving, onSave, onSaveError, autoSaveEnabled = false, onAutoSaveToggle, isDirty = false, autoSaveCountdown = null, autoSaveStatus = 'idle', languages = [], currentLanguage = 'en', onLanguageChange, onAddLanguage, }) {
@@ -18,100 +18,64 @@ export function EditorHeader({ isLibraryOpen, onLibraryToggle, isPreviewMode, on
         fr: 'Français',
         es: 'Español',
     };
-    const availableToAdd = ['en', 'nl', 'sv', 'de', 'fr', 'es'].filter(lang => !languages.includes(lang));
+    const getFlagUrl = (lang) => {
+        const mapping = {
+            en: 'gb', nl: 'nl', sv: 'se', de: 'de', fr: 'fr', es: 'es'
+        };
+        return `https://flagcdn.com/w40/${(mapping[lang] || lang).toLowerCase()}.png`;
+    };
+    const allCreatedLanguages = Array.from(new Set([...languages, currentLanguage]));
+    const availableToAdd = ['en', 'nl', 'sv', 'de', 'fr', 'es'].filter(lang => !allCreatedLanguages.includes(lang));
     const handleSaveDraftClick = () => {
         setSaveAsDraft(true);
-        setSaveError(null); // Clear any previous errors
+        setSaveError(null);
         setShowConfirmModal(true);
     };
     const handlePublishClick = () => {
         setSaveAsDraft(false);
-        setSaveError(null); // Clear any previous errors
+        setSaveError(null);
         setShowConfirmModal(true);
     };
     const handleConfirmSave = async () => {
         try {
-            const targetStatus = saveAsDraft ? 'draft' : 'published';
-            console.log('[EditorHeader] Starting save process...', { saveAsDraft, targetStatus, currentStatus: state.status });
-            // Set status before saving - ensure state is updated
             if (saveAsDraft) {
                 dispatch({ type: 'SET_STATUS', payload: 'draft' });
             }
             else {
                 dispatch({ type: 'SET_STATUS', payload: 'published' });
             }
-            // Wait longer to ensure state update propagates through the reducer and context
-            // React state updates are asynchronous, so we need to wait for the state to actually update
             await new Promise(resolve => setTimeout(resolve, 150));
-            // Verify status was updated
-            console.log('[EditorHeader] Status after update:', state.status, 'Expected:', targetStatus);
             await onSave(!saveAsDraft);
-            console.log('[EditorHeader] Post saved successfully');
-            // Clear any previous errors
             setSaveError(null);
-            // Modal will show success message and close automatically
         }
         catch (error) {
-            console.error('[EditorHeader] Failed to save post:', error);
-            // Extract user-friendly error message
             let errorMessage = error.message || 'Failed to save post';
-            // Make error messages more user-friendly
-            if (errorMessage.includes('Missing required fields')) {
-                // Keep the detailed message about missing fields
-                errorMessage = errorMessage.replace('Missing required fields for publishing:', 'To publish, please fill in:');
-            }
-            else if (errorMessage.includes('All required fields')) {
-                errorMessage = 'To publish, please fill in all required fields: summary, featured image, category, and content.';
-            }
-            else if (errorMessage.includes('Unauthorized')) {
-                errorMessage = 'You are not authorized to save this post. Please log in again.';
-            }
-            else if (errorMessage.includes('Failed to save')) {
-                errorMessage = 'Unable to save the post. Please check your connection and try again.';
-            }
             setSaveError(errorMessage);
             onSaveError(errorMessage);
-            // Re-throw the error so the modal knows it failed and doesn't show success
             throw error;
         }
     };
-    return (_jsxs("div", { className: "flex items-center justify-between px-6 py-3 bg-dashboard-sidebar backdrop-blur-md border-b border-dashboard-border flex-none shrink-0", children: [_jsxs("div", { className: "flex items-center gap-6", children: [_jsx("button", { onClick: () => {
+    return (_jsxs("div", { className: "flex items-center justify-between px-4 lg:px-8 py-3 lg:py-4 bg-dashboard-bg/80 backdrop-blur-xl border-b border-dashboard-border/50 flex-none shrink-0 z-50", children: [_jsxs("div", { className: "flex items-center gap-3 lg:gap-6", children: [_jsx("button", { onClick: () => {
                             if (isDirty) {
-                                const confirmed = window.confirm('You have unsaved changes. Are you sure you want to leave? Your changes will be lost.');
-                                if (!confirmed) {
+                                if (!window.confirm('You have unsaved changes. Leave anyway?'))
                                     return;
-                                }
                             }
                             window.location.href = '/dashboard/blog';
-                        }, className: "text-neutral-500 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white transition-colors", children: _jsx(ArrowLeft, { size: 20, strokeWidth: 1.5 }) }), _jsx("div", { className: "h-4 w-[1px] bg-neutral-300 dark:border-neutral-700" }), _jsxs("button", { onClick: onLibraryToggle, className: `flex items-center gap-2 text-[10px] uppercase tracking-widest font-black transition-all ${isLibraryOpen ? 'text-dashboard-text' : 'text-neutral-500 dark:text-neutral-400'}`, children: [_jsx(Library, { size: 16, strokeWidth: 1.5 }), "Library"] }), languages.length > 0 && onLanguageChange && (_jsxs(_Fragment, { children: [_jsx("div", { className: "h-4 w-[1px] bg-neutral-300 dark:border-neutral-700" }), _jsxs("div", { className: "relative", children: [_jsxs("button", { onClick: () => setShowLanguageDropdown(!showLanguageDropdown), className: "flex items-center gap-2 px-3 py-2 text-[10px] uppercase tracking-widest font-bold bg-dashboard-card border border-dashboard-border rounded-lg text-neutral-600 dark:text-neutral-400 hover:text-dashboard-text hover:border-primary/50 transition-all shadow-sm", children: [_jsx(Globe, { size: 14, strokeWidth: 1.5 }), _jsx("span", { children: languageLabels[currentLanguage] || currentLanguage.toUpperCase() }), _jsx(ChevronDown, { size: 12, className: `transition-transform ${showLanguageDropdown ? 'rotate-180' : ''}` })] }), showLanguageDropdown && (_jsxs("div", { className: "absolute top-full left-0 mt-2 py-1 bg-dashboard-card border border-dashboard-border rounded-lg shadow-xl z-[9999] min-w-[160px] overflow-hidden", children: [_jsx("div", { className: "px-3 py-2 text-[9px] text-neutral-500 uppercase tracking-wider border-b border-dashboard-border", children: "Beschikbare Talen" }), languages.map(lang => (_jsx("button", { onClick: () => {
-                                                    onLanguageChange(lang);
+                        }, className: "size-9 lg:size-10 flex items-center justify-center bg-dashboard-card border border-dashboard-border rounded-xl text-dashboard-text-secondary hover:text-primary hover:border-primary/30 transition-all active:scale-95 shadow-sm", children: _jsx(ArrowLeft, { className: "size-[18px] lg:size-[20px]" }) }), _jsx("div", { className: "h-6 lg:h-8 w-px bg-dashboard-border/30" }), _jsxs("button", { onClick: onLibraryToggle, className: `flex items-center gap-2 lg:gap-3 px-3 lg:px-5 py-2 lg:py-2.5 rounded-xl text-[10px] font-black uppercase tracking-[0.2em] transition-all border ${isLibraryOpen
+                            ? 'bg-primary text-white border-primary/20 shadow-lg shadow-primary/20'
+                            : 'bg-dashboard-card text-dashboard-text-secondary border-dashboard-border hover:border-primary/30'}`, children: [_jsx(Library, { size: 16 }), _jsx("span", { className: "hidden xl:inline", children: "Blocks Library" }), _jsx("span", { className: "xl:hidden hidden lg:inline text-[8px]", children: "Blocks" })] }), languages.length > 0 && onLanguageChange && (_jsxs("div", { className: "relative group", children: [_jsxs("button", { onClick: () => setShowLanguageDropdown(!showLanguageDropdown), className: "flex items-center gap-2 lg:gap-3 px-3 lg:px-4 py-2 lg:py-2.5 bg-dashboard-card border border-dashboard-border rounded-xl hover:border-primary/30 transition-all shadow-sm", children: [_jsx("img", { src: getFlagUrl(currentLanguage), className: "w-4 h-2.5 lg:w-5 lg:h-3.5 object-cover rounded-sm border border-white/20", alt: "" }), _jsx("span", { className: "text-[10px] font-black uppercase tracking-widest text-dashboard-text-secondary", children: currentLanguage.toUpperCase() }), _jsx(ChevronDown, { className: `size-[12px] lg:size-[14px] text-dashboard-text-secondary transition-transform ${showLanguageDropdown ? 'rotate-180' : ''}` })] }), showLanguageDropdown && (_jsxs("div", { className: "absolute top-full left-0 mt-3 p-2 bg-dashboard-bg/95 backdrop-blur-2xl border border-dashboard-border rounded-2xl shadow-2xl z-[100] min-w-[180px] animate-in fade-in zoom-in-95 duration-200", children: [_jsx("label", { className: "px-3 py-2 text-[8px] font-black text-dashboard-text-secondary uppercase tracking-[0.3em] block border-b border-dashboard-border/30 mb-1", children: "Switch Edition" }), allCreatedLanguages.map(lang => (_jsxs("button", { onClick: () => {
+                                            onLanguageChange(lang);
+                                            setShowLanguageDropdown(false);
+                                        }, className: `w-full flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all ${lang === currentLanguage
+                                            ? 'bg-primary/10 text-primary font-bold'
+                                            : 'text-dashboard-text-secondary hover:bg-white/5 hover:text-dashboard-text'}`, children: [_jsx("img", { src: getFlagUrl(lang), className: "w-4 h-3 object-cover rounded-sm", alt: "" }), _jsx("span", { className: "text-[10px] font-black uppercase tracking-widest", children: languageLabels[lang] || lang.toUpperCase() })] }, lang))), availableToAdd.length > 0 && onAddLanguage && (_jsxs(_Fragment, { children: [_jsx("div", { className: "my-2 border-t border-dashboard-border/30 mx-2" }), _jsx("label", { className: "px-3 py-2 text-[8px] font-black text-dashboard-text-secondary uppercase tracking-[0.3em] block mb-1", children: "Add Edition" }), availableToAdd.map(lang => (_jsxs("button", { onClick: () => {
+                                                    onAddLanguage(lang);
                                                     setShowLanguageDropdown(false);
-                                                }, className: `w-full text-left px-3 py-2 text-[10px] uppercase tracking-wider transition-colors ${lang === currentLanguage
-                                                    ? 'bg-primary/10 text-primary font-bold'
-                                                    : 'text-neutral-600 dark:text-neutral-400 hover:bg-dashboard-bg hover:text-dashboard-text'}`, children: languageLabels[lang] || lang.toUpperCase() }, lang))), availableToAdd.length > 0 && onAddLanguage && (_jsxs(_Fragment, { children: [_jsx("div", { className: "my-1 border-t border-dashboard-border" }), _jsx("div", { className: "px-3 py-1 text-[9px] text-neutral-500 uppercase tracking-wider", children: "Add Language" }), availableToAdd.slice(0, 3).map(lang => (_jsxs("button", { onClick: () => {
-                                                            onAddLanguage(lang);
-                                                            setShowLanguageDropdown(false);
-                                                        }, className: "w-full text-left px-3 py-2 text-[10px] uppercase tracking-wider text-neutral-600 dark:text-neutral-400 hover:bg-dashboard-bg hover:text-dashboard-text transition-colors", children: ["+ ", languageLabels[lang] || lang.toUpperCase()] }, lang)))] }))] }))] })] }))] }), _jsxs("div", { className: "flex items-center gap-4", children: [onAutoSaveToggle && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("button", { onClick: () => onAutoSaveToggle(!autoSaveEnabled), className: `relative flex items-center gap-2 px-3 py-1.5 rounded-full text-[10px] uppercase tracking-widest font-bold transition-all ${autoSaveEnabled
-                                    ? 'bg-primary/20 text-primary border border-primary/30'
-                                    : 'bg-dashboard-bg text-neutral-600 dark:text-neutral-400 border border-dashboard-border hover:text-neutral-950 dark:hover:text-white'}`, title: autoSaveEnabled ? 'Auto-save enabled (saves after 10s of inactivity)' : 'Click to enable auto-save', children: [_jsx(Clock, { size: 12, className: autoSaveEnabled && autoSaveStatus !== 'saving' ? 'animate-pulse' : '' }), _jsx("span", { children: "Auto-save" }), _jsx("span", { className: `ml-1 text-[9px] ${autoSaveEnabled ? 'text-primary' : 'text-neutral-500 dark:text-neutral-400'}`, children: autoSaveEnabled ? 'ON' : 'OFF' }), autoSaveEnabled && isDirty && (_jsxs("span", { className: "ml-1.5 text-[9px] font-bold tabular-nums", children: [autoSaveStatus === 'saving' && (_jsx("span", { className: "text-primary animate-pulse", children: "Saving..." })), autoSaveStatus === 'saved' && (_jsx("span", { className: "text-green-500 dark:text-green-400", children: "Saved!" })), autoSaveStatus === 'error' && (_jsx("span", { className: "text-red-500 dark:text-red-400", children: "Error" })), autoSaveStatus === 'idle' && autoSaveCountdown !== null && (_jsxs("span", { className: "text-primary/70", children: [autoSaveCountdown, "s"] }))] }))] }), isDirty && !autoSaveEnabled && (_jsx("span", { className: "text-[10px] text-amber-500 dark:text-amber-400 font-bold uppercase tracking-widest animate-pulse", children: "Unsaved" }))] })), _jsxs("div", { className: "flex items-center bg-dashboard-bg border border-dashboard-border rounded-full p-1 gap-1", children: [_jsxs("button", { onClick: () => {
-                                    if (isPreviewMode) {
-                                        onPreviewToggle();
-                                    }
-                                }, className: `flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] uppercase tracking-widest font-bold transition-all ${!isPreviewMode
-                                    ? 'bg-primary text-white shadow-sm'
-                                    : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white'}`, title: "Edit mode - Make changes to your post", children: [_jsx(Edit, { size: 12, strokeWidth: 2.5 }), _jsx("span", { children: "Edit" })] }), _jsxs("button", { onClick: () => {
-                                    if (!isPreviewMode) {
-                                        onPreviewToggle();
-                                    }
-                                }, className: `flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] uppercase tracking-widest font-bold transition-all ${isPreviewMode
-                                    ? 'bg-primary text-white shadow-sm'
-                                    : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white'}`, title: "Preview mode - See how your post will look", children: [_jsx(Eye, { size: 12, strokeWidth: 2.5 }), _jsx("span", { children: "Preview" })] })] }), (state.status === 'draft' || !state.postId) && (_jsx("button", { onClick: handleSaveDraftClick, disabled: isSaving, className: `px-4 py-2 border-2 border-dashboard-border text-dashboard-text rounded-full text-[10px] font-bold uppercase tracking-widest transition-all ${isSaving
-                            ? 'opacity-50 cursor-not-allowed'
-                            : 'hover:bg-dashboard-bg'}`, children: isSaving ? 'Saving...' : 'Save Draft' })), _jsx("button", { onClick: handlePublishClick, disabled: isSaving, className: `px-6 py-2 bg-primary text-white rounded-full text-[10px] font-bold uppercase tracking-widest transition-all shadow-lg shadow-primary/20 ${isSaving
-                            ? 'opacity-50 cursor-not-allowed'
-                            : 'hover:bg-primary/90'}`, children: isSaving ? 'Saving...' : state.status === 'published' ? 'Update Post' : 'Publish Post' }), _jsx("button", { onClick: onSidebarToggle, className: `p-2 rounded-full transition-colors ${isSidebarOpen
-                            ? 'bg-dashboard-bg text-dashboard-text'
-                            : 'text-neutral-500 dark:text-neutral-400 hover:bg-dashboard-bg'}`, children: _jsx(Settings2, { size: 18 }) })] }), _jsx(SaveConfirmationModal, { isOpen: showConfirmModal, onClose: () => {
+                                                }, className: "w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-dashboard-text-secondary hover:bg-primary/10 hover:text-primary transition-all group/add", children: [_jsxs("div", { className: "relative", children: [_jsx("img", { src: getFlagUrl(lang), className: "w-4 h-3 object-cover rounded-sm opacity-60 group-hover/add:opacity-100 transition-opacity", alt: "" }), _jsx("div", { className: "absolute -top-1 -right-1 size-2 bg-primary rounded-full border border-dashboard-bg flex items-center justify-center text-[6px] text-white font-bold", children: "+" })] }), _jsx("span", { className: "text-[10px] font-black uppercase tracking-widest", children: languageLabels[lang] || lang.toUpperCase() })] }, lang)))] }))] }))] }))] }), _jsxs("div", { className: "hidden md:flex items-center gap-2 lg:gap-4", children: [state.status === 'published' && (_jsxs("div", { className: "flex items-center gap-2 px-3 lg:px-4 py-1.5 bg-emerald-500/10 border border-emerald-500/20 rounded-full text-emerald-500", children: [_jsx(CheckCircle2, { size: 12, className: "animate-pulse" }), _jsx("span", { className: "text-[9px] font-black uppercase tracking-[0.2em] hidden lg:inline", children: "Live Edition" }), _jsx("span", { className: "text-[9px] font-black uppercase tracking-[0.2em] lg:hidden", children: "Live" })] })), state.status === 'not-translated' && (_jsxs("div", { className: "flex items-center gap-2 px-3 lg:px-4 py-1.5 bg-blue-500/10 border border-blue-500/20 rounded-full text-blue-500", children: [_jsx(Plus, { size: 12 }), _jsx("span", { className: "text-[9px] font-black uppercase tracking-[0.2em] hidden lg:inline", children: "New Edition" }), _jsx("span", { className: "text-[9px] font-black uppercase tracking-[0.2em] lg:hidden", children: "New" })] })), isDirty && !autoSaveEnabled && (_jsxs("div", { className: "flex items-center gap-2 px-3 lg:px-4 py-1.5 bg-amber-500/10 border border-amber-500/20 rounded-full text-amber-500 animate-pulse", children: [_jsx(Clock, { size: 12 }), _jsx("span", { className: "text-[9px] font-black uppercase tracking-[0.2em] hidden lg:inline", children: "Unsaved Edits" }), _jsx("span", { className: "text-[9px] font-black uppercase tracking-[0.2em] lg:hidden", children: "Dirty" })] }))] }), _jsxs("div", { className: "flex items-center gap-2 lg:gap-4", children: [onAutoSaveToggle && (_jsxs("button", { onClick: () => onAutoSaveToggle(!autoSaveEnabled), className: `group flex items-center gap-2 lg:gap-3 px-3 lg:px-4 py-2 lg:py-2.5 rounded-xl border transition-all ${autoSaveEnabled
+                            ? 'bg-primary/10 border-primary/30 text-primary'
+                            : 'bg-dashboard-card border border-dashboard-border text-dashboard-text-secondary'}`, children: [_jsx(Clock, { size: 14, className: autoSaveEnabled && autoSaveStatus === 'saving' ? 'animate-spin' : '' }), _jsx("span", { className: "text-[9px] font-black uppercase tracking-widest hidden lg:inline", children: autoSaveStatus === 'saving' ? 'Syncing...' : 'Auto-Sync' }), _jsx("div", { className: `size-1.5 rounded-full ${autoSaveEnabled ? 'bg-primary animate-pulse' : 'bg-dashboard-text-secondary/30'}` })] })), _jsxs("div", { className: "flex items-center bg-dashboard-card border border-dashboard-border rounded-xl p-1 shadow-inner", children: [_jsxs("button", { onClick: () => isPreviewMode && onPreviewToggle(), className: `flex items-center gap-2 px-3 lg:px-4 py-1.5 lg:py-2 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all ${!isPreviewMode ? 'bg-primary text-white shadow-md' : 'text-dashboard-text-secondary hover:text-dashboard-text'}`, children: [_jsx(Edit, { size: 12 }), _jsx("span", { className: "hidden sm:inline", children: "Edit" })] }), _jsxs("button", { onClick: () => !isPreviewMode && onPreviewToggle(), className: `flex items-center gap-2 px-3 lg:px-4 py-1.5 lg:py-2 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all ${isPreviewMode ? 'bg-primary text-white shadow-md' : 'text-dashboard-text-secondary hover:text-dashboard-text'}`, children: [_jsx(Eye, { size: 12 }), _jsx("span", { className: "hidden sm:inline", children: "View" })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [state.status !== 'published' && (_jsxs("button", { onClick: handleSaveDraftClick, disabled: isSaving, className: "px-4 lg:px-6 py-2 lg:py-2.5 bg-dashboard-card border border-dashboard-border text-dashboard-text-secondary rounded-xl text-[10px] font-black uppercase tracking-[0.2em] hover:border-primary/30 transition-all active:scale-95", children: [_jsx("span", { className: "hidden lg:inline", children: isSaving ? '...' : 'Save Draft' }), _jsx("span", { className: "lg:hidden", children: isSaving ? '...' : 'Draft' })] })), _jsxs("button", { onClick: handlePublishClick, disabled: isSaving, className: "px-5 lg:px-8 py-2 lg:py-2.5 bg-primary text-white rounded-xl text-[10px] font-black uppercase tracking-[0.3em] shadow-xl shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all", children: [_jsx("span", { className: "hidden lg:inline", children: isSaving ? 'Publishing...' : state.status === 'published' ? 'Update Live' : 'Go Live' }), _jsx(Save, { size: 14, className: "lg:hidden" })] })] }), _jsx("button", { onClick: onSidebarToggle, className: `size-9 lg:size-10 flex items-center justify-center rounded-xl transition-all border ${isSidebarOpen
+                            ? 'bg-primary/10 border-primary/30 text-primary shadow-lg shadow-primary/10'
+                            : 'bg-dashboard-card border border-dashboard-border text-dashboard-text-secondary hover:border-primary/30'}`, children: _jsx(Settings2, { className: "size-[18px] lg:size-[20px]" }) })] }), _jsx(SaveConfirmationModal, { isOpen: showConfirmModal, onClose: () => {
                     setShowConfirmModal(false);
                     setSaveAsDraft(false);
                     setSaveError(null);

package/dist/views/CanvasEditor/LayoutContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutContainer.d.ts","sourceRoot":"","sources":["../../../src/views/CanvasEditor/LayoutContainer.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAI1C,MAAM,WAAW,oBAAoB;IACjC,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACvE,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACvF,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,eAAe,CAAC,EAC5B,MAAM,EACN,WAAW,EACX,UAAU,EACV,aAAa,EACb,aAAa,EACb,WAAW,EACX,SAAc,EACd,UAA+B,GAClC,EAAE,oBAAoB,2CA6OtB"}
+{"version":3,"file":"LayoutContainer.d.ts","sourceRoot":"","sources":["../../../src/views/CanvasEditor/LayoutContainer.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAI1C,MAAM,WAAW,oBAAoB;IACjC,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACvE,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACvF,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,eAAe,CAAC,EAC5B,MAAM,EACN,WAAW,EACX,UAAU,EACV,aAAa,EACb,aAAa,EACb,WAAW,EACX,SAAc,EACd,UAA+B,GAClC,EAAE,oBAAoB,2CAwOtB"}

package/dist/views/CanvasEditor/LayoutContainer.js

@@ -9,7 +9,7 @@ import { Plus } from 'lucide-react';
 import { BlockWrapper } from './BlockWrapper';
 import { useEditor } from '../../state/EditorContext';
 export function LayoutContainer({ blocks, containerId, onBlockAdd, onBlockUpdate, onBlockDelete, onBlockMove, className = '', emptyLabel = 'Drop blocks here', }) {
-    const { darkMode } = useEditor();
+    const { darkMode, helpers } = useEditor();
     // --- State ---
     const [dragOverIndex, setDragOverIndex] = useState(null);
     const [dropAtEnd, setDropAtEnd] = useState(false);
@@ -21,27 +21,34 @@ export function LayoutContainer({ blocks, containerId, onBlockAdd, onBlockUpdate
     const dropAtEndRef = useRef(false);
     // --- Cleanup & Event Listeners ---
     useEffect(() => {
-        const resetState = () => {
+        const resetState = (e) => {
+            // Only reset if this is the container that was actually being dragged over
+            // or if it's a global dragend event
             setDropIndicatorPosition(null);
             setDragOverIndex(null);
             setDropAtEnd(false);
-            dropAtEndRef.current = false; // Reset ref too
+            dropAtEndRef.current = false;
             setIsDragging(false);
-            // Clear global dragged block ID on dragend (in case drag was cancelled)
-            if (typeof window !== 'undefined') {
-                window.__DRAGGED_BLOCK_ID__ = null;
-            }
         };
         const container = containerRef.current;
         if (container) {
             container.addEventListener('clear-drop-indicator', resetState);
-            document.addEventListener('dragend', resetState);
+            // Listen for dragend on the document but ONLY if we are currently dragging
+            const handleGlobalDragEnd = () => {
+                if (isDragging) {
+                    resetState(new Event('dragend'));
+                    if (typeof window !== 'undefined') {
+                        window.__DRAGGED_BLOCK_ID__ = null;
+                    }
+                }
+            };
+            document.addEventListener('dragend', handleGlobalDragEnd);
             return () => {
                 container.removeEventListener('clear-drop-indicator', resetState);
-                document.removeEventListener('dragend', resetState);
+                document.removeEventListener('dragend', handleGlobalDragEnd);
             };
         }
-    }, []);
+    }, [isDragging]);
     // --- Drag & Drop Logic ---
     const handleDragOverBlock = (e, index, element) => {
         e.preventDefault();
@@ -119,65 +126,32 @@ export function LayoutContainer({ blocks, containerId, onBlockAdd, onBlockUpdate
     const handleDrop = (e, index) => {
         e.preventDefault();
         e.stopPropagation();
-        const blockId = e.dataTransfer.getData('block-id') || window.__DRAGGED_BLOCK_ID__;
-        const blockType = e.dataTransfer.getData('block-type');
-        // Clear the global dragged block ID immediately to prevent it from being used for new blocks
+        // MATCHING KEYS: use blockId and blockType (not hyphenated)
+        const blockId = e.dataTransfer.getData('blockId') || window.__DRAGGED_BLOCK_ID__ || e.dataTransfer.getData('text/plain');
+        const blockType = e.dataTransfer.getData('blockType');
+        // Clear the global dragged block ID immediately
         if (typeof window !== 'undefined') {
             window.__DRAGGED_BLOCK_ID__ = null;
         }
-        // Logic: index is null when dropping on the container background (appends to end)
-        // When dropAtEnd is true, we want to place it AFTER the block at index, so targetIndex = index + 1
-        // When dropAtEnd is false, we want to place it BEFORE the block at index, so targetIndex = index
-        // Use ref to get the latest value (React state updates are async)
         const isDropAtEnd = dropAtEndRef.current;
         let targetIndex = index === null ? blocks.length : (isDropAtEnd ? index + 1 : index);
         if (blockId) {
             const currentIndex = blocks.findIndex(b => b.id === blockId);
             if (currentIndex !== -1) {
-                // Moving within the same array - need to adjust for removal
+                // Moving within same container
                 let finalMoveIndex = targetIndex;
                 if (currentIndex < targetIndex) {
-                    // Moving forward: when we remove the item from currentIndex, everything after it shifts down by 1.
-                    if (isDropAtEnd) {
-                        // Dropping below: we want it at index + 1 in the original array
-                        // If currentIndex <= index: after removal, block at index stays at index, so we want index + 1 = targetIndex
-                        // If index < currentIndex < targetIndex: after removal, we still want index + 1, but since we removed
-                        // an item before targetIndex, the position targetIndex in original = targetIndex - 1 in new array
-                        if (index !== null && currentIndex <= index) {
-                            // Item is at or before target block - no adjustment needed
-                            finalMoveIndex = targetIndex;
-                        }
-                        else {
-                            // Item is after target block but before targetIndex - need to adjust
-                            finalMoveIndex = targetIndex - 1;
-                        }
-                    }
-                    else {
-                        // Dropping above: targetIndex = index means "before the block at index"
-                        // After removal, if currentIndex < index, the block at index shifts to index - 1,
-                        // so we want it at index - 1 in the new array.
-                        finalMoveIndex = targetIndex - 1;
-                    }
+                    finalMoveIndex = targetIndex - 1;
                 }
-                // If currentIndex >= targetIndex, no adjustment needed (moving backward or same position)
-                console.log('[LayoutContainer] Drop calculation:', {
-                    blockId,
-                    index,
-                    dropAtEnd: isDropAtEnd,
-                    currentIndex,
-                    targetIndex,
-                    finalMoveIndex,
-                    blocksCount: blocks.length
-                });
                 onBlockMove(blockId, Math.max(0, finalMoveIndex), containerId);
             }
             else {
-                // Moving from another container - no adjustment needed
+                // Moving from different container
                 onBlockMove(blockId, targetIndex, containerId);
             }
         }
         else if (blockType) {
-            // Adding new block - use targetIndex as-is
+            // Adding new block
             onBlockAdd(blockType, targetIndex, containerId);
         }
         // Clean up
@@ -191,32 +165,37 @@ export function LayoutContainer({ blocks, containerId, onBlockAdd, onBlockUpdate
         else
             blockRefs.current.delete(id);
     };
-    return (_jsxs("div", { ref: containerRef, "data-layout-container": containerId, className: `relative flex flex-col min-h-[40px] transition-colors ${className}`, onDragOver: (e) => { e.preventDefault(); setIsDragging(true); }, onDrop: (e) => handleDrop(e, null), onDragLeave: (e) => {
+    return (_jsxs("div", { ref: containerRef, "data-layout-container": containerId, className: `relative flex flex-col min-h-[40px] transition-colors pb-2 ${className}`, onDragEnter: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setIsDragging(true);
+        }, onDragOver: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setIsDragging(true);
+        }, onDrop: (e) => handleDrop(e, null), onDragLeave: (e) => {
             if (!e.currentTarget.contains(e.relatedTarget)) {
+                setIsDragging(false);
                 setDropIndicatorPosition(null);
             }
-        }, children: [dropIndicatorPosition && isDragging && (_jsx(DropIndicator, { position: dropIndicatorPosition, darkMode: darkMode })), blocks.length === 0 ? (_jsx(EmptyState, { isDragging: isDragging, darkMode: darkMode, label: emptyLabel })) : (blocks.map((block, index) => (_jsx("div", { ref: setBlockRef(block.id), onDragOver: (e) => handleDragOverBlock(e, index, blockRefs.current.get(block.id)), onDrop: (e) => handleDrop(e, index), className: "relative mb-4 last:mb-0", children: _jsx(BlockWrapper, { block: block, onUpdate: (data) => onBlockUpdate(block.id, data, containerId), onDelete: () => onBlockDelete(block.id, containerId), onMoveUp: index > 0 ? () => onBlockMove(block.id, index - 1, containerId) : undefined, onMoveDown: index < blocks.length - 1 ? () => onBlockMove(block.id, index + 1, containerId) : undefined }) }, block.id))))] }));
+        }, children: [dropIndicatorPosition && isDragging && (_jsx(DropIndicator, { position: dropIndicatorPosition, darkMode: darkMode })), blocks.length === 0 ? (_jsx(EmptyState, { isDragging: isDragging, darkMode: darkMode, label: emptyLabel })) : (blocks.map((block, index) => (_jsx("div", { ref: setBlockRef(block.id), onDragOver: (e) => handleDragOverBlock(e, index, blockRefs.current.get(block.id)), onDrop: (e) => handleDrop(e, index), className: "relative mb-4 last:mb-0", children: _jsx(BlockWrapper, { block: block, onUpdate: (data) => onBlockUpdate(block.id, data, containerId), onDelete: () => onBlockDelete(block.id, containerId), onDuplicate: () => helpers.duplicateBlock(block.id), onMoveUp: index > 0 ? () => onBlockMove(block.id, index - 1, containerId) : undefined, onMoveDown: index < blocks.length - 1 ? () => onBlockMove(block.id, index + 1, containerId) : undefined, 
+                    // Essential for nested rendering: pass children and handlers to the Edit component
+                    childBlocks: Array.isArray(block.children) && typeof block.children[0] === 'object' ? block.children : [], onChildBlockAdd: (type, idx, cid) => onBlockAdd(type, idx ?? 0, cid || containerId), onChildBlockUpdate: (bid, data, cid) => onBlockUpdate(bid, data, cid || containerId), onChildBlockDelete: (bid, cid) => onBlockDelete(bid, cid || containerId), onChildBlockMove: (bid, idx, cid) => onBlockMove(bid, idx, cid || containerId) }) }, block.id))))] }));
 }
 /**
- * Visual Line that shows where the block will land
+ * Visual Components
  */
 function DropIndicator({ position, darkMode }) {
-    return (_jsxs("div", { className: "absolute z-50 pointer-events-none", style: {
-            top: `${position.top - 12}px`,
-            left: `${position.left}px`,
-            width: `${position.width}px`,
-            height: '24px',
-        }, children: [_jsx("div", { className: `absolute inset-0 rounded-lg border border-dashed backdrop-blur-sm 
-                ${darkMode ? 'bg-primary/20 border-primary/40' : 'bg-primary/10 border-primary/30'}` }), _jsx("div", { className: `absolute top-1/2 left-0 right-0 h-0.5 transform -translate-y-1/2 
-                ${darkMode ? 'bg-primary' : 'bg-primary'}` }), _jsx("div", { className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2", children: _jsx("div", { className: "w-6 h-6 rounded-full flex items-center justify-center bg-primary shadow-lg", children: _jsx("div", { className: "w-2 h-2 rounded-full bg-white" }) }) })] }));
+    return (_jsxs("div", { className: "absolute z-50 pointer-events-none transition-all duration-150 ease-out", style: {
+            top: position.top,
+            left: position.left,
+            width: position.width,
+            height: '4px',
+            marginTop: '-2px', // Center on the line
+        }, children: [_jsx("div", { className: "w-full h-full bg-primary rounded-full shadow-[0_0_8px_rgba(var(--primary-rgb),0.5)] animate-pulse" }), _jsx("div", { className: "absolute left-0 top-1/2 -translate-y-1/2 -translate-x-1 w-2 h-2 rounded-full bg-primary" }), _jsx("div", { className: "absolute right-0 top-1/2 -translate-y-1/2 translate-x-1 w-2 h-2 rounded-full bg-primary" })] }));
 }
-/**
- * Placeholder when the container is empty
- */
 function EmptyState({ isDragging, darkMode, label }) {
-    return (_jsxs("div", { className: `flex flex-col items-center justify-center py-12 px-6 rounded-2xl border border-dashed transition-all
-            ${darkMode
-            ? isDragging ? 'border-primary/50 bg-primary/10' : 'border-neutral-700 bg-neutral-800/20'
-            : isDragging ? 'border-primary/50 bg-primary/5' : 'border-neutral-200 bg-neutral-50/30'}`, children: [_jsx("div", { className: `p-3 rounded-full mb-3 ${darkMode ? 'bg-neutral-800' : 'bg-neutral-100'}`, children: _jsx(Plus, { size: 20, className: isDragging ? 'text-primary' : 'text-neutral-400' }) }), _jsx("p", { className: `text-xs font-black uppercase tracking-wider 
-                ${isDragging ? 'text-primary' : 'text-neutral-500'}`, children: isDragging ? 'Drop Block Here' : label })] }));
+    return (_jsxs("div", { className: `flex flex-col items-center justify-center py-10 rounded-2xl border-2 border-dashed transition-all duration-300 ${isDragging
+            ? 'border-primary bg-primary/5 scale-[0.98]'
+            : 'border-neutral-200 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-900/20'}`, children: [_jsx(Plus, { size: 24, className: `mb-2 transition-colors ${isDragging ? 'text-primary' : 'text-neutral-300 dark:text-neutral-700'}` }), _jsx("span", { className: `text-[10px] font-bold uppercase tracking-widest ${isDragging ? 'text-primary' : 'text-neutral-400 dark:text-neutral-600'}`, children: label })] }));
 }

package/dist/views/CanvasEditor/components/CustomBlockItem.js

@@ -40,5 +40,5 @@ export function CustomBlockItem({ blockType, name, description, icon, onAddBlock
         mouseDownRef.current = null;
         setTimeout(() => setHasDragged(false), 100);
     };
-    return (_jsxs("div", { draggable: true, 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, children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "text-neutral-500 dark:text-neutral-400 group-hover:text-primary dark:group-hover:text-primary transition-colors", children: icon }), _jsx("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", children: name })] }), _jsx(GripVertical, { size: 12, className: "text-neutral-400 dark:text-neutral-500 group-hover:text-neutral-600 dark:group-hover:text-neutral-400" })] }), description && (_jsx("p", { className: "text-[9px] text-neutral-500 dark:text-neutral-400 leading-relaxed line-clamp-2", children: description }))] }));
+    return (_jsxs("div", { draggable: true, onDragStart: handleDragStart, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onClick: handleClick, className: "p-5 rounded-[1.5rem] border border-dashboard-border/50 bg-dashboard-card/30 backdrop-blur-sm hover:border-primary/40 hover:bg-primary/[0.02] hover:shadow-2xl hover:shadow-primary/10 transition-all duration-500 cursor-grab active:cursor-grabbing group", title: description, children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "text-dashboard-text-secondary group-hover:text-primary transition-all duration-500 group-hover:scale-110", children: icon }), _jsx("span", { className: "text-[10px] font-black uppercase tracking-[0.2em] text-dashboard-text-secondary group-hover:text-dashboard-text transition-colors", children: name })] }), _jsx(GripVertical, { size: 14, className: "text-dashboard-text-secondary/30 group-hover:text-primary transition-colors" })] }), description && (_jsx("p", { className: "text-[9px] text-dashboard-text-secondary/60 leading-relaxed line-clamp-2 italic font-medium", children: description }))] }));
 }

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Block } from '../../../types/block';
 import type { BlockTypeDefinition } from '../../../types/block';
 export interface EditorCanvasProps {
@@ -9,21 +10,32 @@ export interface EditorCanvasProps {
     siteId: string;
     locale: string;
     darkMode: boolean;
+    tags?: string[];
     backgroundColors?: {
         light: string;
         dark?: string;
     };
     featuredImage?: {
         id?: string;
+        src?: string;
         alt?: string;
     };
+    LayoutWrapper?: React.ComponentType<{
+        children: React.ReactNode;
+        header?: React.ReactNode;
+        footer?: React.ReactNode;
+        heroImage?: React.ReactNode;
+        isPreview?: boolean;
+        isWrapper?: boolean;
+        tags?: string[];
+    }>;
     onTitleChange: (title: string) => void;
     onHeroBlockUpdate: (data: Partial<Block['data']>) => void;
     onHeroBlockDelete: () => void;
     onBlockAdd: (type: string, index: number, containerId?: string) => void;
-    onBlockUpdate: (id: string, data: Partial<Block['data']>) => void;
-    onBlockDelete: (id: string) => void;
+    onBlockUpdate: (id: string, data: Partial<Block['data']>, containerId?: string) => void;
+    onBlockDelete: (id: string, containerId?: string) => void;
     onBlockMove: (id: string, newIndex: number, containerId?: string) => void;
 }
-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;
+export declare function EditorCanvas({ isPreviewMode, heroBlock, heroBlockDefinition, contentBlocks, title, siteId, locale, darkMode, tags, backgroundColors, featuredImage, LayoutWrapper, onTitleChange, onHeroBlockUpdate, onHeroBlockDelete, onBlockAdd, onBlockUpdate, onBlockDelete, onBlockMove, }: EditorCanvasProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=EditorCanvas.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"EditorCanvas.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/components/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"}
+{"version":3,"file":"EditorCanvas.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/components/EditorCanvas.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,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,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,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;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;KACnB,CAAC,CAAC;IACH,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,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACxF,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,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,IAAS,EACT,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,iBAAiB,EACjB,UAAU,EACV,aAAa,EACb,aAAa,EACb,WAAW,GACd,EAAE,iBAAiB,2CAoJnB"}

package/dist/views/CanvasEditor/components/EditorCanvas.js

@@ -1,10 +1,10 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useEffect } from 'react';
 import { BlockWrapper } from '../BlockWrapper';
 import { EditorBody } from '../EditorBody';
 import { BlockRenderer } from '../../../lib/blocks/BlockRenderer';
-export function EditorCanvas({ isPreviewMode, heroBlock, heroBlockDefinition, contentBlocks, title, siteId, locale, darkMode, backgroundColors, featuredImage, onTitleChange, onHeroBlockUpdate, onHeroBlockDelete, onBlockAdd, onBlockUpdate, onBlockDelete, onBlockMove, }) {
+export function EditorCanvas({ isPreviewMode, heroBlock, heroBlockDefinition, contentBlocks, title, siteId, locale, darkMode, tags = [], backgroundColors, featuredImage, LayoutWrapper, onTitleChange, onHeroBlockUpdate, onHeroBlockDelete, onBlockAdd, onBlockUpdate, onBlockDelete, onBlockMove, }) {
     const titleRef = useRef(null);
     // Handle Title Auto-resize
     useEffect(() => {
@@ -13,20 +13,42 @@ export function EditorCanvas({ isPreviewMode, heroBlock, heroBlockDefinition, co
             titleRef.current.style.height = `${titleRef.current.scrollHeight}px`;
         }
     }, [title]);
-    return (_jsx("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,
-        }, children: _jsxs("div", { className: `mx-auto transition-all duration-500 max-w-7xl w-full`, children: [!isPreviewMode && heroBlockDefinition && heroBlock && (_jsx("div", { className: "mb-12", children: _jsx(BlockWrapper, { block: heroBlock, onUpdate: onHeroBlockUpdate, onDelete: onHeroBlockDelete, onMoveUp: () => { }, onMoveDown: () => { }, allBlocks: [heroBlock] }) })), isPreviewMode ? (_jsxs("div", { className: "space-y-8", children: [heroBlockDefinition && heroBlock && (_jsx(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 && (_jsx("h1", { className: "text-5xl font-serif font-medium text-neutral-950 dark:text-white leading-tight mb-12", children: title })), contentBlocks.length > 0 ? (_jsx("div", { className: "space-y-8", children: contentBlocks.map((block) => (_jsx(BlockRenderer, { block: block, context: { siteId, locale } }, block.id))) })) : (_jsx("div", { className: "text-center py-20 text-neutral-400 dark:text-neutral-500", children: _jsx("p", { className: "text-sm", children: "No content blocks yet. Switch to Edit mode to add blocks." }) }))] })) : (_jsxs(_Fragment, { children: [!heroBlockDefinition && (_jsx("div", { className: "mb-12", children: _jsx("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" }) })), _jsx(EditorBody, { blocks: contentBlocks, darkMode: darkMode, backgroundColors: backgroundColors, onBlockAdd: onBlockAdd, onBlockUpdate: onBlockUpdate, onBlockDelete: onBlockDelete, onBlockMove: onBlockMove })] }))] }) }));
+    const renderPreviewContent = () => {
+        // Filter out hero block from content if it's already rendered in header
+        const mainContent = heroBlockDefinition && heroBlock
+            ? contentBlocks.filter(b => b.type !== 'hero')
+            : contentBlocks;
+        const commonContext = {
+            siteId,
+            locale,
+            fallbackImage: featuredImage ? {
+                id: featuredImage.id,
+                src: featuredImage.src,
+                alt: featuredImage.alt,
+            } : undefined,
+        };
+        return (_jsxs("div", { className: "space-y-8", children: [!heroBlockDefinition && title && (_jsx("h1", { className: "text-5xl font-serif font-medium leading-tight mb-12", style: { color: 'var(--color-forest, var(--color-neutral-950))' }, children: title })), mainContent.length > 0 ? (_jsx("div", { className: "space-y-8", children: mainContent.map((block) => (_jsx(BlockRenderer, { block: block, context: commonContext }, block.id))) })) : (_jsx("div", { className: "text-center py-20 text-neutral-400 dark:text-neutral-500", children: _jsx("p", { className: "text-sm", children: "No content blocks yet. Switch to Edit mode to add blocks." }) }))] }));
+    };
+    const renderEditorContent = () => {
+        // Filter out hero block from content if it's already rendered in header
+        const mainBlocks = heroBlockDefinition && heroBlock
+            ? contentBlocks.filter(b => b.type !== 'hero')
+            : contentBlocks;
+        return (_jsxs("div", { className: "space-y-12", children: [!heroBlockDefinition && (_jsx("div", { className: "mb-12", children: _jsx("textarea", { ref: titleRef, rows: 1, value: title, onChange: (e) => onTitleChange(e.target.value), placeholder: "The title of your story...", className: "w-full bg-transparent border-none outline-none text-5xl md:text-7xl lg:text-9xl font-serif font-medium placeholder:text-neutral-500 dark:placeholder:text-neutral-500 resize-none leading-tight transition-colors duration-300 italic", style: { color: 'var(--color-forest, var(--color-neutral-950))' } }) })), _jsx(EditorBody, { blocks: mainBlocks, darkMode: darkMode, backgroundColors: backgroundColors, onBlockAdd: onBlockAdd, onBlockUpdate: onBlockUpdate, onBlockDelete: onBlockDelete, onBlockMove: onBlockMove })] }));
+    };
+    // Render Hero Block for Slot Injection
+    const heroElement = heroBlockDefinition && heroBlock ? (isPreviewMode ? (_jsx(BlockRenderer, { block: heroBlock, context: {
+            siteId,
+            locale,
+            fallbackImage: featuredImage ? {
+                id: featuredImage.id,
+                src: featuredImage.src,
+                alt: featuredImage.alt,
+            } : undefined,
+        } })) : (_jsx(BlockWrapper, { block: heroBlock, onUpdate: onHeroBlockUpdate, onDelete: onHeroBlockDelete, onMoveUp: () => { }, onMoveDown: () => { } }))) : null;
+    return (_jsx("div", { "data-theme": darkMode ? 'dark' : 'light', className: "flex-1 overflow-y-auto overflow-x-hidden pb-40 px-4 lg:px-10 custom-scrollbar selection:bg-primary/20 dark:selection:bg-primary/30 min-h-0 transition-colors duration-300", style: {
+            backgroundColor: darkMode
+                ? (backgroundColors?.dark || '#0c0c0c')
+                : (backgroundColors?.light || '#ffffff')
+        }, children: _jsx("div", { className: `${!LayoutWrapper ? 'mx-auto transition-all duration-500 max-w-[1600px] w-full px-2 pt-8' : ''}`, children: LayoutWrapper ? (_jsx("div", { "data-theme": darkMode ? 'dark' : 'light', "data-dashboard": "false", className: "theme-reset contents", children: _jsx(LayoutWrapper, { header: heroElement, isPreview: true, isWrapper: true, tags: tags, children: isPreviewMode ? renderPreviewContent() : renderEditorContent() }) })) : (_jsxs("div", { "data-theme": darkMode ? 'dark' : 'light', "data-dashboard": "false", className: "theme-reset", children: [heroElement, _jsx("div", { className: "max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8 py-6 prose prose-lg max-w-none prose-headings:font-serif", children: isPreviewMode ? renderPreviewContent() : renderEditorContent() })] })) }) }));
 }

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

@@ -1,7 +1,11 @@
 import type { BlockTypeDefinition } from '../../../types/block';
 export interface EditorLibraryProps {
     registeredBlocks: BlockTypeDefinition[];
-    onAddBlock: (type: string) => void;
+    onAddBlock: (blockType: string) => void;
 }
+/**
+ * Editor Library Component
+ * Displays available blocks that can be added to the canvas
+ */
 export declare function EditorLibrary({ registeredBlocks, onAddBlock }: EditorLibraryProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=EditorLibrary.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"EditorLibrary.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/components/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"}
+{"version":3,"file":"EditorLibrary.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/components/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,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,gBAAgB,EAAE,UAAU,EAAE,EAAE,kBAAkB,2CAwHjF"}

package/dist/views/CanvasEditor/components/EditorLibrary.js

@@ -2,13 +2,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Library, Image as ImageIcon, LayoutTemplate, Type, Box } from 'lucide-react';
 import { LibraryItem, CustomBlockItem } from './index';
+/**
+ * Editor Library Component
+ * Displays available blocks that can be added to the canvas
+ */
 export function EditorLibrary({ registeredBlocks, onAddBlock }) {
-    // Get all registered blocks from state (excluding Hero block from sidebar)
-    const allBlocks = registeredBlocks.filter(block => block.type !== 'hero');
-    const textBlocks = allBlocks.filter(block => block.category === 'text');
-    const customBlocks = allBlocks.filter(block => block.category === 'custom');
-    const mediaBlocks = allBlocks.filter(block => block.category === 'media');
-    const layoutBlocks = allBlocks.filter(block => block.category === 'layout');
+    // Categorize blocks
+    const allBlocks = registeredBlocks || [];
+    const textBlocks = allBlocks.filter(bl => bl.category === 'text' || bl.type === 'heading' || bl.type === 'paragraph' || bl.type === 'list');
+    const mediaBlocks = allBlocks.filter(bl => bl.category === 'media' || bl.type === 'image' || bl.type === 'gallery' || bl.type === 'video');
+    const layoutBlocks = allBlocks.filter(bl => bl.category === 'layout' || bl.type === 'section' || bl.type === 'columns' || bl.type === 'spacer');
+    const customBlocks = allBlocks.filter(bl => !textBlocks.includes(bl) && !mediaBlocks.includes(bl) && !layoutBlocks.includes(bl));
     return (_jsxs("div", { className: "p-6 w-72 min-w-0 max-w-full", children: [textBlocks.length > 0 && (_jsxs("div", { className: "mb-10", children: [_jsx("h3", { className: "text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black mb-6", children: "Text" }), _jsx("div", { className: "grid grid-cols-2 gap-3", children: textBlocks.map((block) => {
                             const IconComponent = block.icon || block.components.Icon || Type;
                             return (_jsx(LibraryItem, { icon: _jsx(IconComponent, { size: 16 }), label: block.name, blockType: block.type, description: block.description, onAddBlock: onAddBlock }, block.type));
@@ -21,5 +25,5 @@ export function EditorLibrary({ registeredBlocks, onAddBlock }) {
                         }) })] })), customBlocks.length > 0 && (_jsxs("div", { children: [_jsx("h3", { className: "text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black mb-6", children: "Custom Blocks" }), _jsx("div", { className: "space-y-3", children: customBlocks.map((block) => {
                             const IconComponent = block.icon || block.components.Icon || Box;
                             return (_jsx(CustomBlockItem, { blockType: block.type, name: block.name, description: block.description, icon: _jsx(IconComponent, { size: 14 }), onAddBlock: onAddBlock }, block.type));
-                        }) })] })), allBlocks.length === 0 && (_jsxs("div", { className: "text-center py-12", children: [_jsx(Library, { size: 32, className: "mx-auto text-neutral-300 dark:text-neutral-700 mb-4" }), _jsx("p", { className: "text-xs text-neutral-500 dark:text-neutral-400", children: "No blocks registered yet." })] }))] }));
+                        }) })] })), allBlocks.length === 0 && (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [_jsx(Library, { className: "size-12 text-neutral-300 dark:text-neutral-700 mb-4" }), _jsx("p", { className: "text-xs text-neutral-500 dark:text-neutral-400", children: "No blocks registered yet." })] }))] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"EditorSidebar.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/components/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"}
+{"version":3,"file":"EditorSidebar.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/components/EditorSidebar.tsx"],"names":[],"mappings":"AAOA,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,2CA6NpB"}