@jhits/plugin-blog 0.0.9 → 0.0.11

package/src/views/CanvasEditor/EditorHeader.js

@@ -1,101 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { ArrowLeft, Library, Settings2, Clock, Edit, Eye } 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', }) {
-    const { state, dispatch } = useEditor();
-    const [showConfirmModal, setShowConfirmModal] = useState(false);
-    const [saveAsDraft, setSaveAsDraft] = useState(false);
-    const [saveError, setSaveError] = useState(null);
-    const handleSaveDraftClick = () => {
-        setSaveAsDraft(true);
-        setSaveError(null); // Clear any previous errors
-        setShowConfirmModal(true);
-    };
-    const handlePublishClick = () => {
-        setSaveAsDraft(false);
-        setSaveError(null); // Clear any previous errors
-        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("header", { 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: () => {
-                            if (isDirty) {
-                                const confirmed = window.confirm('You have unsaved changes. Are you sure you want to leave? Your changes will be lost.');
-                                if (!confirmed) {
-                                    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"] })] }), _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: () => {
-                    setShowConfirmModal(false);
-                    setSaveAsDraft(false);
-                    setSaveError(null);
-                }, onConfirm: handleConfirmSave, isSaving: isSaving, postTitle: state.title || undefined, isPublished: state.status === 'published', saveAsDraft: saveAsDraft, error: saveError })] }));
-}

package/src/views/CanvasEditor/EditorHeader.tsx

@@ -1,268 +0,0 @@
-'use client';
-
-import React, { useState } from 'react';
-import { ArrowLeft, Library, Settings2, Save, Clock, Edit, Eye } from 'lucide-react';
-import { useEditor } from '../../state/EditorContext';
-import { SaveConfirmationModal } from './SaveConfirmationModal';
-
-export interface EditorHeaderProps {
-    isLibraryOpen: boolean;
-    onLibraryToggle: () => void;
-    isPreviewMode: boolean;
-    onPreviewToggle: () => void;
-    isSidebarOpen: boolean;
-    onSidebarToggle: () => void;
-    isSaving: boolean;
-    onSave: (publish?: boolean) => Promise<void>;
-    onSaveError: (error: string | null) => void;
-    autoSaveEnabled?: boolean;
-    onAutoSaveToggle?: (enabled: boolean) => void;
-    isDirty?: boolean;
-    autoSaveCountdown?: number | null;
-    autoSaveStatus?: 'idle' | 'saving' | 'saved' | 'error';
-}
-
-export function EditorHeader({
-    isLibraryOpen,
-    onLibraryToggle,
-    isPreviewMode,
-    onPreviewToggle,
-    isSidebarOpen,
-    onSidebarToggle,
-    isSaving,
-    onSave,
-    onSaveError,
-    autoSaveEnabled = false,
-    onAutoSaveToggle,
-    isDirty = false,
-    autoSaveCountdown = null,
-    autoSaveStatus = 'idle',
-}: EditorHeaderProps) {
-    const { state, dispatch } = useEditor();
-    const [showConfirmModal, setShowConfirmModal] = useState(false);
-    const [saveAsDraft, setSaveAsDraft] = useState(false);
-    const [saveError, setSaveError] = useState<string | null>(null);
-
-    const handleSaveDraftClick = () => {
-        setSaveAsDraft(true);
-        setSaveError(null); // Clear any previous errors
-        setShowConfirmModal(true);
-    };
-
-    const handlePublishClick = () => {
-        setSaveAsDraft(false);
-        setSaveError(null); // Clear any previous errors
-        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: any) {
-            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 (
-        <header 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">
-            <div className="flex items-center gap-6">
-                <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) {
-                                return;
-                            }
-                        }
-                        window.location.href = '/dashboard/blog';
-                    }}
-                    className="text-neutral-500 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white transition-colors"
-                >
-                    <ArrowLeft size={20} strokeWidth={1.5} />
-                </button>
-                <div className="h-4 w-[1px] bg-neutral-300 dark:border-neutral-700" />
-                <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'
-                        }`}
-                >
-                    <Library size={16} strokeWidth={1.5} />
-                    Library
-                </button>
-            </div>
-
-            <div className="flex items-center gap-4">
-                {/* Auto-save Toggle */}
-                {onAutoSaveToggle && (
-                    <div className="flex items-center gap-2">
-                        <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'}
-                        >
-                            <Clock size={12} className={autoSaveEnabled && autoSaveStatus !== 'saving' ? 'animate-pulse' : ''} />
-                            <span>Auto-save</span>
-                            <span className={`ml-1 text-[9px] ${autoSaveEnabled ? 'text-primary' : 'text-neutral-500 dark:text-neutral-400'}`}>
-                                {autoSaveEnabled ? 'ON' : 'OFF'}
-                            </span>
-                            {/* Countdown or Status */}
-                            {autoSaveEnabled && isDirty && (
-                                <span className="ml-1.5 text-[9px] font-bold tabular-nums">
-                                    {autoSaveStatus === 'saving' && (
-                                        <span className="text-primary animate-pulse">Saving...</span>
-                                    )}
-                                    {autoSaveStatus === 'saved' && (
-                                        <span className="text-green-500 dark:text-green-400">Saved!</span>
-                                    )}
-                                    {autoSaveStatus === 'error' && (
-                                        <span className="text-red-500 dark:text-red-400">Error</span>
-                                    )}
-                                    {autoSaveStatus === 'idle' && autoSaveCountdown !== null && (
-                                        <span className="text-primary/70">{autoSaveCountdown}s</span>
-                                    )}
-                                </span>
-                            )}
-                        </button>
-                        {/* Unsaved Changes Indicator - only show when auto-save is off */}
-                        {isDirty && !autoSaveEnabled && (
-                            <span className="text-[10px] text-amber-500 dark:text-amber-400 font-bold uppercase tracking-widest animate-pulse">
-                                Unsaved
-                            </span>
-                        )}
-                    </div>
-                )}
-                {/* Edit/Preview Toggle - Segmented Control Style */}
-                <div className="flex items-center bg-dashboard-bg border border-dashboard-border rounded-full p-1 gap-1">
-                    <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"
-                    >
-                        <Edit size={12} strokeWidth={2.5} />
-                        <span>Edit</span>
-                    </button>
-                    <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"
-                    >
-                        <Eye size={12} strokeWidth={2.5} />
-                        <span>Preview</span>
-                    </button>
-                </div>
-                {/* Save Draft Button - Always visible for drafts and new posts */}
-                {(state.status === 'draft' || !state.postId) && (
-                    <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'
-                            }`}
-                    >
-                        {isSaving ? 'Saving...' : 'Save Draft'}
-                    </button>
-                )}
-                {/* Publish/Update Button */}
-                <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'
-                        }`}
-                >
-                    {isSaving ? 'Saving...' : state.status === 'published' ? 'Update Post' : 'Publish Post'}
-                </button>
-                <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'
-                        }`}
-                >
-                    <Settings2 size={18} />
-                </button>
-            </div>
-
-            {/* Save Confirmation Modal */}
-            <SaveConfirmationModal
-                isOpen={showConfirmModal}
-                onClose={() => {
-                    setShowConfirmModal(false);
-                    setSaveAsDraft(false);
-                    setSaveError(null);
-                }}
-                onConfirm={handleConfirmSave}
-                isSaving={isSaving}
-                postTitle={state.title || undefined}
-                isPublished={state.status === 'published'}
-                saveAsDraft={saveAsDraft}
-                error={saveError}
-            />
-        </header>
-    );
-}
-

package/src/views/CanvasEditor/LayoutContainer.d.ts

@@ -1,17 +0,0 @@
-/**
- * Layout Container Component
- * Recursive drop zone for nested blocks
- */
-import { Block } from '../../types/block';
-export interface LayoutContainerProps {
-    blocks: Block[];
-    containerId: string;
-    onBlockAdd: (type: string, index: number, containerId: 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;
-    className?: string;
-    emptyLabel?: string;
-}
-export declare function LayoutContainer({ blocks, containerId, onBlockAdd, onBlockUpdate, onBlockDelete, onBlockMove, className, emptyLabel, }: LayoutContainerProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=LayoutContainer.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"LayoutContainer.d.ts","sourceRoot":"","sources":["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"}

package/src/views/CanvasEditor/LayoutContainer.js

@@ -1,222 +0,0 @@
-/**
- * Layout Container Component
- * Recursive drop zone for nested blocks
- */
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from 'react';
-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();
-    // --- State ---
-    const [dragOverIndex, setDragOverIndex] = useState(null);
-    const [dropAtEnd, setDropAtEnd] = useState(false);
-    const [isDragging, setIsDragging] = useState(false);
-    const [dropIndicatorPosition, setDropIndicatorPosition] = useState(null);
-    const containerRef = useRef(null);
-    const blockRefs = useRef(new Map());
-    // Use ref to ensure we always have the latest dropAtEnd value (React state updates are async)
-    const dropAtEndRef = useRef(false);
-    // --- Cleanup & Event Listeners ---
-    useEffect(() => {
-        const resetState = () => {
-            setDropIndicatorPosition(null);
-            setDragOverIndex(null);
-            setDropAtEnd(false);
-            dropAtEndRef.current = false; // Reset ref too
-            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);
-            return () => {
-                container.removeEventListener('clear-drop-indicator', resetState);
-                document.removeEventListener('dragend', resetState);
-            };
-        }
-    }, []);
-    // --- Drag & Drop Logic ---
-    const handleDragOverBlock = (e, index, element) => {
-        e.preventDefault();
-        e.stopPropagation();
-        // 1. Check for deeper nested containers
-        const target = e.target;
-        const deeperContainer = target.closest('[data-layout-container]');
-        if (deeperContainer && deeperContainer !== containerRef.current) {
-            setDropIndicatorPosition(null);
-            return;
-        }
-        // 2. Notify parent containers to hide their indicators
-        e.currentTarget.dispatchEvent(new CustomEvent('clear-drop-indicator', { bubbles: true }));
-        // 3. Calculate "Above" vs "Below" and position indicator between blocks
-        const containerRect = containerRef.current.getBoundingClientRect();
-        const elementRect = element.getBoundingClientRect();
-        const mouseRelativeToBlock = e.clientY - elementRect.top;
-        const isBottomHalf = mouseRelativeToBlock > (elementRect.height / 2);
-        setDragOverIndex(index);
-        setDropAtEnd(isBottomHalf);
-        dropAtEndRef.current = isBottomHalf; // Update ref immediately
-        setIsDragging(true);
-        // 4. Update Visual Indicator - always show between blocks
-        const elementTop = elementRect.top - containerRect.top;
-        const elementBottom = elementRect.bottom - containerRect.top;
-        let indicatorTop;
-        if (isBottomHalf) {
-            // Show below this block - position between current block and next block
-            if (index === blocks.length - 1) {
-                // Last block - show after it
-                indicatorTop = elementBottom;
-            }
-            else {
-                // Get next block to find the gap
-                const nextBlock = blocks[index + 1];
-                const nextBlockEl = blockRefs.current.get(nextBlock.id);
-                if (nextBlockEl) {
-                    const nextBlockRect = nextBlockEl.getBoundingClientRect();
-                    const nextBlockTop = nextBlockRect.top - containerRect.top;
-                    // Position in the middle of the gap (mb-4 = 16px margin)
-                    indicatorTop = elementBottom + (nextBlockTop - elementBottom) / 2;
-                }
-                else {
-                    indicatorTop = elementBottom;
-                }
-            }
-        }
-        else {
-            // Show above this block - position between previous block and current block
-            if (index === 0) {
-                // First block - show at top of container (before first block)
-                indicatorTop = 0;
-            }
-            else {
-                // Get previous block to find the gap
-                const prevBlock = blocks[index - 1];
-                const prevBlockEl = blockRefs.current.get(prevBlock.id);
-                if (prevBlockEl) {
-                    const prevBlockRect = prevBlockEl.getBoundingClientRect();
-                    const prevBlockBottom = prevBlockRect.bottom - containerRect.top;
-                    // Position in the middle of the gap (mb-4 = 16px margin)
-                    indicatorTop = prevBlockBottom + (elementTop - prevBlockBottom) / 2;
-                }
-                else {
-                    indicatorTop = elementTop;
-                }
-            }
-        }
-        setDropIndicatorPosition({
-            top: indicatorTop,
-            left: 0,
-            width: containerRect.width,
-        });
-    };
-    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
-        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
-                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;
-                    }
-                }
-                // 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
-                onBlockMove(blockId, targetIndex, containerId);
-            }
-        }
-        else if (blockType) {
-            // Adding new block - use targetIndex as-is
-            onBlockAdd(blockType, targetIndex, containerId);
-        }
-        // Clean up
-        setDropIndicatorPosition(null);
-        setDragOverIndex(null);
-        setDropAtEnd(false);
-    };
-    const setBlockRef = (id) => (el) => {
-        if (el)
-            blockRefs.current.set(id, el);
-        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) => {
-            if (!e.currentTarget.contains(e.relatedTarget)) {
-                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))))] }));
-}
-/**
- * Visual Line that shows where the block will land
- */
-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" }) }) })] }));
-}
-/**
- * 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 })] }));
-}