@jhits/plugin-blog 0.0.7 → 0.0.9

package/src/views/CanvasEditor/LayoutContainer.js

@@ -0,0 +1,222 @@
+/**
+ * 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 })] }));
+}

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

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

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

@@ -0,0 +1,78 @@
+'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/components/CustomBlockItem.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"CustomBlockItem.d.ts","sourceRoot":"","sources":["CustomBlockItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAGhD,MAAM,WAAW,oBAAoB;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC5B,SAAS,EACT,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,UAAU,EACb,EAAE,oBAAoB,2CAmEtB"}

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

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef } from 'react';
+import { GripVertical } from 'lucide-react';
+/**
+ * Custom Block Item Component
+ * Draggable custom block from client registry and clickable to add at bottom
+ */
+export function CustomBlockItem({ blockType, name, description, icon, onAddBlock }) {
+    const [hasDragged, setHasDragged] = useState(false);
+    const mouseDownRef = useRef(null);
+    const handleDragStart = (e) => {
+        e.dataTransfer.setData('block-type', blockType);
+        e.dataTransfer.effectAllowed = 'move';
+        setHasDragged(true); // Mark as dragged when drag starts
+    };
+    const handleMouseDown = (e) => {
+        // Track mouse position on mousedown
+        mouseDownRef.current = { x: e.clientX, y: e.clientY };
+        setHasDragged(false); // Reset drag state
+    };
+    const handleMouseMove = (e) => {
+        // If mouse moved more than 5px, consider it a drag
+        if (mouseDownRef.current) {
+            const dx = Math.abs(e.clientX - mouseDownRef.current.x);
+            const dy = Math.abs(e.clientY - mouseDownRef.current.y);
+            if (dx > 5 || dy > 5) {
+                setHasDragged(true);
+            }
+        }
+    };
+    const handleClick = (e) => {
+        // Only add block if we didn't drag
+        if (!hasDragged && onAddBlock) {
+            e.preventDefault();
+            e.stopPropagation();
+            onAddBlock(blockType);
+        }
+        // Reset state
+        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 }))] }));
+}

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

@@ -0,0 +1,29 @@
+import type { Block } from '../../../types/block';
+import type { BlockTypeDefinition } from '../../../types/block';
+export interface EditorCanvasProps {
+    isPreviewMode: boolean;
+    heroBlock: Block | null;
+    heroBlockDefinition: BlockTypeDefinition | undefined;
+    contentBlocks: Block[];
+    title: string;
+    siteId: string;
+    locale: string;
+    darkMode: boolean;
+    backgroundColors?: {
+        light: string;
+        dark?: string;
+    };
+    featuredImage?: {
+        id?: string;
+        alt?: 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;
+    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;
+//# sourceMappingURL=EditorCanvas.d.ts.map

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

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

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

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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, }) {
+    const titleRef = useRef(null);
+    // Handle Title Auto-resize
+    useEffect(() => {
+        if (titleRef.current) {
+            titleRef.current.style.height = 'auto';
+            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 })] }))] }) }));
+}

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

@@ -0,0 +1,7 @@
+import type { BlockTypeDefinition } from '../../../types/block';
+export interface EditorLibraryProps {
+    registeredBlocks: BlockTypeDefinition[];
+    onAddBlock: (type: string) => void;
+}
+export declare function EditorLibrary({ registeredBlocks, onAddBlock }: EditorLibraryProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EditorLibrary.d.ts.map

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

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

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

@@ -0,0 +1,25 @@
+'use client';
+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';
+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');
+    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));
+                        }) })] })), mediaBlocks.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: "Media" }), _jsx("div", { className: "grid grid-cols-2 gap-3", children: mediaBlocks.map((block) => {
+                            const IconComponent = block.icon || block.components.Icon || ImageIcon;
+                            return (_jsx(LibraryItem, { icon: _jsx(IconComponent, { size: 16 }), label: block.name, blockType: block.type, description: block.description, onAddBlock: onAddBlock }, block.type));
+                        }) })] })), layoutBlocks.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: "Layout" }), _jsx("div", { className: "grid grid-cols-2 gap-3", children: layoutBlocks.map((block) => {
+                            const IconComponent = block.icon || block.components.Icon || LayoutTemplate;
+                            return (_jsx(LibraryItem, { icon: _jsx(IconComponent, { size: 16 }), label: block.name, blockType: block.type, description: block.description, onAddBlock: onAddBlock }, block.type));
+                        }) })] })), 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." })] }))] }));
+}

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertTriangle, X } from 'lucide-react';
+export function ErrorBanner({ error, onDismiss }) {
+    if (!error)
+        return null;
+    return (_jsxs("div", { className: "bg-red-50 dark:bg-red-900/20 border-b border-red-200 dark:border-red-800 px-6 py-3 flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3 flex-1", children: [_jsx(AlertTriangle, { className: "text-red-600 dark:text-red-400 flex-shrink-0", size: 20 }), _jsx("p", { className: "text-red-800 dark:text-red-300 text-sm font-medium", children: error })] }), _jsx("button", { onClick: onDismiss, className: "text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-200 transition-colors", "aria-label": "Dismiss error", children: _jsx(X, { size: 18 }) })] }));
+}

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

@@ -0,0 +1,25 @@
+import type { Block } from '../../../types/block';
+export interface FeaturedImage {
+    id?: string;
+    alt?: string;
+    brightness?: number;
+    blur?: number;
+    scale?: number;
+    positionX?: number;
+    positionY?: number;
+    isCustom?: boolean;
+}
+export interface FeaturedMediaSectionProps {
+    featuredImage?: FeaturedImage;
+    heroBlock?: Block | null;
+    slug?: string;
+    onUpdate: (image: FeaturedImage | undefined) => void;
+}
+/**
+ * Featured Media Section Component
+ * Handles featured image selection - completely independent from hero image
+ * Featured image is a thumbnail used for blog post cards
+ * Hero image is separate and managed in the hero block
+ */
+export declare function FeaturedMediaSection({ featuredImage, heroBlock, slug, onUpdate, }: FeaturedMediaSectionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FeaturedMediaSection.d.ts.map

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

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