@jhits/plugin-blog 0.0.9 → 0.0.11

package/src/views/CanvasEditor/LayoutContainer.tsx

@@ -1,322 +0,0 @@
-/**
- * Layout Container Component
- * Recursive drop zone for nested blocks
- */
-
-'use client';
-
-import React, { useState, useEffect, useRef } from 'react';
-import { Plus } from 'lucide-react';
-import { Block } from '../../types/block';
-import { BlockWrapper } from './BlockWrapper';
-import { useEditor } from '../../state/EditorContext';
-
-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 function LayoutContainer({
-    blocks,
-    containerId,
-    onBlockAdd,
-    onBlockUpdate,
-    onBlockDelete,
-    onBlockMove,
-    className = '',
-    emptyLabel = 'Drop blocks here',
-}: LayoutContainerProps) {
-    const { darkMode } = useEditor();
-
-    // --- State ---
-    const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
-    const [dropAtEnd, setDropAtEnd] = useState(false);
-    const [isDragging, setIsDragging] = useState(false);
-    const [dropIndicatorPosition, setDropIndicatorPosition] = useState<{ top: number; left: number; width: number } | null>(null);
-
-    const containerRef = useRef<HTMLDivElement>(null);
-    const blockRefs = useRef<Map<string, HTMLDivElement>>(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 as any).__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: React.DragEvent, index: number, element: HTMLElement) => {
-        e.preventDefault();
-        e.stopPropagation();
-
-        // 1. Check for deeper nested containers
-        const target = e.target as HTMLElement;
-        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: number;
-
-        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: React.DragEvent, index: number | null) => {
-        e.preventDefault();
-        e.stopPropagation();
-
-        const blockId = e.dataTransfer.getData('block-id') || (window as any).__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 as any).__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: string) => (el: HTMLDivElement | null) => {
-        if (el) blockRefs.current.set(id, el); else blockRefs.current.delete(id);
-    };
-
-    return (
-        <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 as Node)) {
-                    setDropIndicatorPosition(null);
-                }
-            }}
-        >
-            {/* 1. Visual Indicator Overlay */}
-            {dropIndicatorPosition && isDragging && (
-                <DropIndicator position={dropIndicatorPosition} darkMode={darkMode} />
-            )}
-
-            {/* 2. Content Area */}
-            {blocks.length === 0 ? (
-                <EmptyState isDragging={isDragging} darkMode={darkMode} label={emptyLabel} />
-            ) : (
-                blocks.map((block, index) => (
-                    <div
-                        key={block.id}
-                        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"
-                    >
-                        <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}
-                        />
-                    </div>
-                ))
-            )}
-        </div>
-    );
-}
-
-/**
- * Visual Line that shows where the block will land
- */
-function DropIndicator({ position, darkMode }: { position: any; darkMode: boolean }) {
-    return (
-        <div
-            className="absolute z-50 pointer-events-none"
-            style={{
-                top: `${position.top - 12}px`,
-                left: `${position.left}px`,
-                width: `${position.width}px`,
-                height: '24px',
-            }}
-        >
-            <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'}`}
-            />
-            <div className={`absolute top-1/2 left-0 right-0 h-0.5 transform -translate-y-1/2 
-                ${darkMode ? 'bg-primary' : 'bg-primary'}`}
-            />
-            <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                <div className="w-6 h-6 rounded-full flex items-center justify-center bg-primary shadow-lg">
-                    <div className="w-2 h-2 rounded-full bg-white" />
-                </div>
-            </div>
-        </div>
-    );
-}
-
-/**
- * Placeholder when the container is empty
- */
-function EmptyState({ isDragging, darkMode, label }: { isDragging: boolean; darkMode: boolean; label: string }) {
-    return (
-        <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'
-            }`}
-        >
-            <div className={`p-3 rounded-full mb-3 ${darkMode ? 'bg-neutral-800' : 'bg-neutral-100'}`}>
-                <Plus size={20} className={isDragging ? 'text-primary' : 'text-neutral-400'} />
-            </div>
-            <p className={`text-xs font-black uppercase tracking-wider 
-                ${isDragging ? 'text-primary' : 'text-neutral-500'}`}>
-                {isDragging ? 'Drop Block Here' : label}
-            </p>
-        </div>
-    );
-}

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

@@ -1,13 +0,0 @@
-import React from 'react';
-export interface SaveConfirmationModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-    onConfirm: () => Promise<void>;
-    isSaving: boolean;
-    postTitle?: string;
-    isPublished?: boolean;
-    saveAsDraft?: boolean;
-    error?: string | null;
-}
-export declare function SaveConfirmationModal({ isOpen, onClose, onConfirm, isSaving, postTitle, isPublished, saveAsDraft, error, }: SaveConfirmationModalProps): React.ReactPortal | null;
-//# sourceMappingURL=SaveConfirmationModal.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"SaveConfirmationModal.d.ts","sourceRoot":"","sources":["SaveConfirmationModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,MAAM,WAAW,0BAA0B;IACvC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/B,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAED,wBAAgB,qBAAqB,CAAC,EAClC,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAS,EACT,WAAW,EACX,WAAmB,EACnB,KAAK,GACR,EAAE,0BAA0B,4BA4M5B"}

package/src/views/CanvasEditor/SaveConfirmationModal.js

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

package/src/views/CanvasEditor/SaveConfirmationModal.tsx

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

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

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