@jhits/plugin-blog 0.0.7 → 0.0.9

package/dist/views/CanvasEditor/hooks/useHeroBlock.js

@@ -0,0 +1,90 @@
+import { useState, useEffect, useMemo } from 'react';
+import { blockRegistry } from '../../../registry/BlockRegistry';
+// Generate a unique block ID
+function generateBlockId() {
+    if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+        return crypto.randomUUID();
+    }
+    return `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+export function useHeroBlock(state, registeredBlocks) {
+    const [heroBlock, setHeroBlock] = useState(null);
+    // Get Hero block definition from registered blocks (REQUIRED)
+    const heroBlockDefinition = useMemo(() => {
+        return blockRegistry.get('hero');
+    }, [registeredBlocks]);
+    // Initialize hero block if Hero block definition exists
+    useEffect(() => {
+        if (heroBlockDefinition) {
+            // Get default data from block definition
+            const heroData = heroBlockDefinition.defaultData || {};
+            // Initialize hero block only if it doesn't exist yet
+            setHeroBlock(prev => {
+                if (!prev) {
+                    // First, try to find hero block in contentBlocks (from loaded post)
+                    const heroBlockFromContent = state.blocks.find(block => block.type === 'hero');
+                    if (heroBlockFromContent) {
+                        return heroBlockFromContent;
+                    }
+                    // If no hero block in contentBlocks, initialize from defaults
+                    // Hero image and featured image are completely independent - no syncing
+                    const initialData = {
+                        ...heroData,
+                        title: state.title || heroData.title || '',
+                        summary: state.metadata.excerpt || heroData.summary || '',
+                        image: heroData.image, // Use default image, not featured image
+                    };
+                    return {
+                        id: generateBlockId(),
+                        type: 'hero',
+                        data: initialData,
+                    };
+                }
+                // Keep existing hero block data - let the Edit component manage it
+                return prev;
+            });
+        }
+        else {
+            setHeroBlock(null);
+        }
+    }, [heroBlockDefinition, state.blocks, state.title, state.metadata.excerpt]);
+    // Sync hero block with editor state when post is loaded (for existing posts)
+    // BUT: Never sync image from featured image to hero - they are independent
+    // Only sync title, summary, and category
+    useEffect(() => {
+        if (heroBlock && heroBlockDefinition && state.postId) {
+            // Only update if the hero block data doesn't match the editor state
+            // This prevents overwriting user edits with stale data
+            const currentTitle = heroBlock.data?.title || '';
+            const currentSummary = heroBlock.data?.summary || '';
+            const currentCategory = heroBlock.data?.category || '';
+            const stateTitle = state.title || '';
+            const stateSummary = state.metadata.excerpt || '';
+            const stateCategory = state.metadata.categories?.[0] || '';
+            // Check if hero block is out of sync with editor state
+            // NOTE: We do NOT sync image anymore - hero and featured image are independent
+            const titleMismatch = currentTitle !== stateTitle;
+            const summaryMismatch = currentSummary !== stateSummary;
+            const categoryMismatch = currentCategory !== stateCategory;
+            // Only update title, summary, and category - NEVER update image
+            // The hero block image should come from contentBlocks, not from featured image
+            if ((titleMismatch || summaryMismatch || categoryMismatch) && (stateTitle || stateSummary || stateCategory)) {
+                setHeroBlock({
+                    ...heroBlock,
+                    data: {
+                        ...heroBlock.data,
+                        title: stateTitle || heroBlock.data?.title || '',
+                        summary: stateSummary || heroBlock.data?.summary || '',
+                        // DO NOT sync image - keep hero block's own image
+                        category: stateCategory || heroBlock.data?.category || '',
+                    },
+                });
+            }
+        }
+    }, [state.postId, state.title, state.metadata.excerpt, state.metadata.categories, heroBlockDefinition, heroBlock]);
+    return {
+        heroBlock,
+        setHeroBlock,
+        heroBlockDefinition,
+    };
+}

package/dist/views/CanvasEditor/hooks/useKeyboardShortcuts.d.ts

@@ -0,0 +1,3 @@
+import type { EditorState } from '../../../state/types';
+export declare function useKeyboardShortcuts(state: EditorState, dispatch: (action: any) => void, canUndo: boolean, canRedo: boolean, undo: () => void, redo: () => void): void;
+//# sourceMappingURL=useKeyboardShortcuts.d.ts.map

package/dist/views/CanvasEditor/hooks/useKeyboardShortcuts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardShortcuts.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/hooks/useKeyboardShortcuts.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAUxD,wBAAgB,oBAAoB,CAChC,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,EAC/B,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,MAAM,IAAI,EAChB,IAAI,EAAE,MAAM,IAAI,QA2HnB"}

package/dist/views/CanvasEditor/hooks/useKeyboardShortcuts.js

@@ -0,0 +1,119 @@
+import { useEffect } from 'react';
+// Generate a unique block ID
+function generateBlockId() {
+    if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+        return crypto.randomUUID();
+    }
+    return `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+export function useKeyboardShortcuts(state, dispatch, canUndo, canRedo, undo, redo) {
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            // Don't handle shortcuts if user is typing in an input/textarea/contentEditable
+            const target = e.target;
+            const isEditableElement = target.tagName === 'INPUT' ||
+                target.tagName === 'TEXTAREA' ||
+                target.isContentEditable ||
+                target.closest('input, textarea, [contenteditable="true"]');
+            // Check for Ctrl+Z / Cmd+Z (Undo)
+            if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
+                if (!isEditableElement) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (canUndo) {
+                        undo();
+                    }
+                    return;
+                }
+            }
+            // Check for Ctrl+Shift+Z / Cmd+Shift+Z or Ctrl+Y / Cmd+Y (Redo)
+            if (((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'z') || ((e.ctrlKey || e.metaKey) && e.key === 'y')) {
+                if (!isEditableElement) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (canRedo) {
+                        redo();
+                    }
+                    return;
+                }
+            }
+            // Check for Ctrl+V (Windows/Linux) or Cmd+V (Mac)
+            if ((e.ctrlKey || e.metaKey) && e.key === 'v') {
+                // Don't paste if user is typing in an input/textarea/contentEditable
+                const target = e.target;
+                const isEditableElement = target.tagName === 'INPUT' ||
+                    target.tagName === 'TEXTAREA' ||
+                    target.isContentEditable ||
+                    target.closest('input, textarea, [contenteditable="true"]');
+                if (isEditableElement) {
+                    return; // Let the browser handle paste in editable elements
+                }
+                // Check if there's a copied block
+                if (typeof window !== 'undefined') {
+                    const copiedBlockJson = localStorage.getItem('__BLOG_EDITOR_COPIED_BLOCK__');
+                    if (copiedBlockJson) {
+                        try {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            const copiedBlock = JSON.parse(copiedBlockJson);
+                            // Clone a block with new IDs (recursive for nested blocks)
+                            const cloneBlock = (blockToClone) => {
+                                const cloned = {
+                                    ...blockToClone,
+                                    id: generateBlockId(),
+                                    data: { ...blockToClone.data },
+                                    meta: blockToClone.meta ? { ...blockToClone.meta } : undefined,
+                                };
+                                // Handle children if they exist
+                                if (blockToClone.children) {
+                                    if (Array.isArray(blockToClone.children) && blockToClone.children.length > 0) {
+                                        if (typeof blockToClone.children[0] === 'object') {
+                                            cloned.children = blockToClone.children.map(cloneBlock);
+                                        }
+                                        else {
+                                            // If children are IDs, find and clone the actual blocks
+                                            const allBlocks = state.blocks;
+                                            const childIds = blockToClone.children;
+                                            const childBlocks = childIds
+                                                .map((childId) => allBlocks.find(b => b.id === childId))
+                                                .filter((b) => b !== undefined);
+                                            cloned.children = childBlocks.map(cloneBlock);
+                                        }
+                                    }
+                                }
+                                return cloned;
+                            };
+                            const pastedBlock = cloneBlock(copiedBlock);
+                            // Find where to paste - use hovered block or selected block, or paste at end
+                            const hoveredBlockId = window.__BLOG_EDITOR_HOVERED_BLOCK_ID__;
+                            const targetBlockId = hoveredBlockId || state.selectedBlockId;
+                            let pasteIndex;
+                            if (targetBlockId) {
+                                const targetIndex = state.blocks.findIndex(b => b.id === targetBlockId);
+                                if (targetIndex !== -1) {
+                                    pasteIndex = targetIndex + 1;
+                                }
+                            }
+                            // Dispatch ADD_BLOCK with the full block structure
+                            dispatch({
+                                type: 'ADD_BLOCK',
+                                payload: {
+                                    block: pastedBlock,
+                                    index: pasteIndex,
+                                    containerId: undefined
+                                }
+                            });
+                        }
+                        catch (error) {
+                            console.error('Failed to paste block:', error);
+                        }
+                    }
+                }
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [state.blocks, state.selectedBlockId, dispatch, canUndo, canRedo, undo, redo]);
+}

package/dist/views/CanvasEditor/hooks/usePostLoader.d.ts

@@ -0,0 +1,5 @@
+import type { BlogPost } from '../../../types/post';
+export declare function usePostLoader(postId: string | undefined, currentPostId: string | null, loadPost: (post: BlogPost) => void, resetHeroBlock: () => void): {
+    isLoadingPost: boolean;
+};
+//# sourceMappingURL=usePostLoader.d.ts.map

package/dist/views/CanvasEditor/hooks/usePostLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePostLoader.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/hooks/usePostLoader.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAEpD,wBAAgB,aAAa,CACzB,MAAM,EAAE,MAAM,GAAG,SAAS,EAC1B,aAAa,EAAE,MAAM,GAAG,IAAI,EAC5B,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,EAClC,cAAc,EAAE,MAAM,IAAI;;EA8B7B"}

package/dist/views/CanvasEditor/hooks/usePostLoader.js

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+import { apiToBlogPost } from '../../../lib/mappers/apiMapper';
+export function usePostLoader(postId, currentPostId, loadPost, resetHeroBlock) {
+    const [isLoadingPost, setIsLoadingPost] = useState(false);
+    useEffect(() => {
+        if (postId && !currentPostId) {
+            const loadPostData = async () => {
+                try {
+                    setIsLoadingPost(true);
+                    // Reset hero block before loading new post so it gets re-initialized from the new post's blocks
+                    resetHeroBlock();
+                    const response = await fetch(`/api/plugin-blog/${postId}`);
+                    if (!response.ok) {
+                        throw new Error('Failed to load post');
+                    }
+                    const apiDoc = await response.json();
+                    const blogPost = apiToBlogPost(apiDoc);
+                    loadPost(blogPost);
+                }
+                catch (error) {
+                    console.error('Failed to load post:', error);
+                    alert('Failed to load post. Please try again.');
+                }
+                finally {
+                    setIsLoadingPost(false);
+                }
+            };
+            loadPostData();
+        }
+    }, [postId, currentPostId, loadPost, resetHeroBlock]);
+    return { isLoadingPost };
+}

package/dist/views/CanvasEditor/hooks/useRegisteredBlocks.d.ts

@@ -0,0 +1,2 @@
+export declare function useRegisteredBlocks(): import("../../..").BlockTypeDefinition[];
+//# sourceMappingURL=useRegisteredBlocks.d.ts.map

package/dist/views/CanvasEditor/hooks/useRegisteredBlocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRegisteredBlocks.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/hooks/useRegisteredBlocks.ts"],"names":[],"mappings":"AAGA,wBAAgB,mBAAmB,6CAmDlC"}

package/dist/views/CanvasEditor/hooks/useRegisteredBlocks.js

@@ -0,0 +1,47 @@
+import { useState, useEffect } from 'react';
+import { blockRegistry } from '../../../registry/BlockRegistry';
+export function useRegisteredBlocks() {
+    const [registeredBlocks, setRegisteredBlocks] = useState(() => {
+        const initial = blockRegistry.getAll();
+        return initial;
+    });
+    // Watch for registry changes and update state
+    useEffect(() => {
+        // Check immediately
+        const checkBlocks = () => {
+            const currentBlocks = blockRegistry.getAll();
+            const hasChanged = currentBlocks.length !== registeredBlocks.length ||
+                currentBlocks.some((b, i) => b.type !== registeredBlocks[i]?.type) ||
+                registeredBlocks.some((b, i) => b.type !== currentBlocks[i]?.type);
+            if (hasChanged) {
+                setRegisteredBlocks([...currentBlocks]);
+            }
+        };
+        // Initial check
+        checkBlocks();
+        // Poll for registry changes (blocks are registered asynchronously in useEffect)
+        // Use a shorter interval initially, then longer
+        let pollCount = 0;
+        const interval = setInterval(() => {
+            pollCount++;
+            checkBlocks();
+            // Stop polling after 5 seconds (25 checks at 200ms)
+            if (pollCount > 25) {
+                clearInterval(interval);
+            }
+        }, 200);
+        // Also check after delays to catch initial registrations
+        const timeouts = [
+            setTimeout(checkBlocks, 50),
+            setTimeout(checkBlocks, 100),
+            setTimeout(checkBlocks, 300),
+            setTimeout(checkBlocks, 500),
+            setTimeout(checkBlocks, 1000),
+        ];
+        return () => {
+            clearInterval(interval);
+            timeouts.forEach(clearTimeout);
+        };
+    }, [registeredBlocks.length]);
+    return registeredBlocks;
+}

package/dist/views/CanvasEditor/hooks/useUnsavedChanges.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Hook for managing unsaved changes warnings and auto-save
+ */
+import type { EditorState } from '../../../state/types';
+import type { Block } from '../../../types/block';
+interface UseUnsavedChangesOptions {
+    state: EditorState;
+    isDirty: boolean;
+    onSave: (heroBlock?: Block | null) => Promise<void>;
+    heroBlock?: Block | null;
+    autoSaveEnabled?: boolean;
+    autoSaveDelay?: number;
+    postId?: string | null;
+}
+/**
+ * Hook to manage unsaved changes warnings and auto-save
+ */
+export declare function useUnsavedChanges({ state, isDirty, onSave, heroBlock, autoSaveEnabled: propAutoSaveEnabled, autoSaveDelay, postId, }: UseUnsavedChangesOptions): {
+    autoSaveEnabled: boolean;
+    setAutoSaveEnabled: (enabled: boolean) => void;
+    countdown: number | null;
+    saveStatus: "error" | "idle" | "saving" | "saved";
+};
+export {};
+//# sourceMappingURL=useUnsavedChanges.d.ts.map

package/dist/views/CanvasEditor/hooks/useUnsavedChanges.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUnsavedChanges.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/hooks/useUnsavedChanges.ts"],"names":[],"mappings":"AAAA;;GAEG;AAKH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAElD,UAAU,wBAAwB;IAC9B,KAAK,EAAE,WAAW,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,CAAC,SAAS,CAAC,EAAE,KAAK,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,SAAS,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAKD;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAC9B,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,eAAe,EAAE,mBAAmB,EACpC,aAAuC,EACvC,MAAM,GACT,EAAE,wBAAwB;;kCAoD6B,OAAO;;;EA4P9D"}

package/dist/views/CanvasEditor/hooks/useUnsavedChanges.js

@@ -0,0 +1,285 @@
+/**
+ * Hook for managing unsaved changes warnings and auto-save
+ */
+'use client';
+import { useEffect, useRef, useCallback, useState } from 'react';
+const AUTO_SAVE_STORAGE_KEY = 'blog-editor-autosave-enabled';
+const DEFAULT_AUTO_SAVE_DELAY = 10000; // 10 seconds
+/**
+ * Hook to manage unsaved changes warnings and auto-save
+ */
+export function useUnsavedChanges({ state, isDirty, onSave, heroBlock, autoSaveEnabled: propAutoSaveEnabled, autoSaveDelay = DEFAULT_AUTO_SAVE_DELAY, postId, }) {
+    const autoSaveTimeoutRef = useRef(null);
+    const isSavingRef = useRef(false);
+    const lastSavedStateRef = useRef('');
+    const countdownIntervalRef = useRef(null);
+    const [countdown, setCountdown] = useState(null);
+    const [saveStatus, setSaveStatus] = useState('idle');
+    const saveStatusTimeoutRef = useRef(null);
+    const previousIsDirtyRef = useRef(false);
+    const countdownStartTimeRef = useRef(null);
+    const performAutoSaveRef = useRef(null);
+    // Get auto-save preference from localStorage
+    const getAutoSavePreference = useCallback(() => {
+        if (typeof window === 'undefined')
+            return false;
+        try {
+            const stored = localStorage.getItem(AUTO_SAVE_STORAGE_KEY);
+            if (stored !== null) {
+                return stored === 'true';
+            }
+        }
+        catch (error) {
+            console.error('[useUnsavedChanges] Failed to read auto-save preference:', error);
+        }
+        // Default to false if not set
+        return false;
+    }, []);
+    // State to track auto-save enabled status (reactive)
+    const [autoSaveEnabledState, setAutoSaveEnabledState] = useState(() => {
+        // Initialize from prop or localStorage
+        if (propAutoSaveEnabled !== undefined) {
+            return propAutoSaveEnabled;
+        }
+        return getAutoSavePreference();
+    });
+    // Sync with prop changes
+    useEffect(() => {
+        if (propAutoSaveEnabled !== undefined) {
+            setAutoSaveEnabledState(propAutoSaveEnabled);
+        }
+    }, [propAutoSaveEnabled]);
+    // Initialize from localStorage on mount (if no prop provided)
+    useEffect(() => {
+        if (propAutoSaveEnabled === undefined && typeof window !== 'undefined') {
+            const stored = getAutoSavePreference();
+            setAutoSaveEnabledState(stored);
+        }
+    }, []); // Only run on mount
+    // Set auto-save preference in localStorage and state
+    const setAutoSavePreference = useCallback((enabled) => {
+        if (typeof window === 'undefined')
+            return;
+        try {
+            localStorage.setItem(AUTO_SAVE_STORAGE_KEY, enabled.toString());
+            setAutoSaveEnabledState(enabled);
+            console.log('[useUnsavedChanges] Auto-save preference updated:', enabled);
+        }
+        catch (error) {
+            console.error('[useUnsavedChanges] Failed to save auto-save preference:', error);
+        }
+    }, []);
+    // Determine if auto-save is enabled (prop takes precedence over state)
+    const autoSaveEnabled = propAutoSaveEnabled !== undefined
+        ? propAutoSaveEnabled
+        : autoSaveEnabledState;
+    // Create a stable reference of the current state for comparison
+    const getStateSnapshot = useCallback(() => {
+        return JSON.stringify({
+            title: state.title,
+            slug: state.slug,
+            blocks: state.blocks,
+            seo: state.seo,
+            metadata: state.metadata,
+            status: state.status,
+        });
+    }, [state]);
+    // Initialize lastSavedStateRef when a post is loaded and marked as clean
+    useEffect(() => {
+        // When a post is loaded (postId exists) and isDirty is false, update the saved state reference
+        if (postId && !isDirty && lastSavedStateRef.current === '') {
+            lastSavedStateRef.current = getStateSnapshot();
+            console.log('[useUnsavedChanges] Initialized saved state reference after post load');
+        }
+        // Also update if isDirty becomes false after being true (e.g., after save or MARK_CLEAN)
+        if (!isDirty && lastSavedStateRef.current !== getStateSnapshot()) {
+            lastSavedStateRef.current = getStateSnapshot();
+        }
+    }, [postId, isDirty, getStateSnapshot]);
+    // Auto-save function
+    const performAutoSave = useCallback(async () => {
+        if (isSavingRef.current || !isDirty) {
+            return;
+        }
+        try {
+            isSavingRef.current = true;
+            setSaveStatus('saving');
+            setCountdown(null);
+            countdownStartTimeRef.current = null;
+            console.log('[useUnsavedChanges] Auto-saving...');
+            await onSave(heroBlock);
+            lastSavedStateRef.current = getStateSnapshot();
+            setSaveStatus('saved');
+            console.log('[useUnsavedChanges] Auto-save completed');
+            // Clear save status after 2 seconds
+            if (saveStatusTimeoutRef.current) {
+                clearTimeout(saveStatusTimeoutRef.current);
+            }
+            saveStatusTimeoutRef.current = setTimeout(() => {
+                setSaveStatus('idle');
+            }, 2000);
+        }
+        catch (error) {
+            console.error('[useUnsavedChanges] Auto-save failed:', error);
+            setSaveStatus('error');
+            // Clear error status after 3 seconds
+            if (saveStatusTimeoutRef.current) {
+                clearTimeout(saveStatusTimeoutRef.current);
+            }
+            saveStatusTimeoutRef.current = setTimeout(() => {
+                setSaveStatus('idle');
+            }, 3000);
+        }
+        finally {
+            isSavingRef.current = false;
+        }
+    }, [isDirty, onSave, heroBlock, getStateSnapshot]);
+    // Keep ref updated with latest function
+    useEffect(() => {
+        performAutoSaveRef.current = performAutoSave;
+    }, [performAutoSave]);
+    // Set up auto-save timer and countdown when state changes
+    useEffect(() => {
+        // Only reset countdown if isDirty changed from false to true, or if auto-save was just disabled
+        const isDirtyChanged = previousIsDirtyRef.current !== isDirty;
+        const becameDirty = !previousIsDirtyRef.current && isDirty;
+        // Update previous isDirty ref
+        previousIsDirtyRef.current = isDirty;
+        // Clear existing countdown interval
+        if (countdownIntervalRef.current) {
+            clearInterval(countdownIntervalRef.current);
+            countdownIntervalRef.current = null;
+        }
+        if (!autoSaveEnabled || !isDirty || isSavingRef.current) {
+            setCountdown(null);
+            countdownStartTimeRef.current = null;
+            // Clear timeout if auto-save is disabled or not dirty
+            if (autoSaveTimeoutRef.current) {
+                clearTimeout(autoSaveTimeoutRef.current);
+                autoSaveTimeoutRef.current = null;
+            }
+            return;
+        }
+        // Only reset countdown if:
+        // 1. isDirty just became true (new changes)
+        // 2. Or if there's no active countdown
+        const shouldResetCountdown = becameDirty || countdownStartTimeRef.current === null;
+        if (shouldResetCountdown) {
+            // Clear existing timeout
+            if (autoSaveTimeoutRef.current) {
+                clearTimeout(autoSaveTimeoutRef.current);
+            }
+            // Initialize countdown
+            const secondsRemaining = Math.ceil(autoSaveDelay / 1000);
+            setCountdown(secondsRemaining);
+            countdownStartTimeRef.current = Date.now();
+            // Set new timeout for auto-save
+            autoSaveTimeoutRef.current = setTimeout(() => {
+                if (performAutoSaveRef.current) {
+                    performAutoSaveRef.current();
+                }
+            }, autoSaveDelay);
+        }
+        else {
+            // Countdown is already running, just update it based on elapsed time
+            if (countdownStartTimeRef.current && autoSaveTimeoutRef.current) {
+                const elapsed = Date.now() - countdownStartTimeRef.current;
+                const remaining = Math.max(0, autoSaveDelay - elapsed);
+                const secondsRemaining = Math.ceil(remaining / 1000);
+                setCountdown(secondsRemaining);
+            }
+        }
+        // Update countdown every second (only if we have an active countdown)
+        if (shouldResetCountdown || countdownIntervalRef.current === null) {
+            countdownIntervalRef.current = setInterval(() => {
+                if (countdownStartTimeRef.current && autoSaveTimeoutRef.current) {
+                    const elapsed = Date.now() - countdownStartTimeRef.current;
+                    const remaining = Math.max(0, autoSaveDelay - elapsed);
+                    const secondsRemaining = Math.ceil(remaining / 1000);
+                    if (secondsRemaining <= 0) {
+                        setCountdown(null);
+                        if (countdownIntervalRef.current) {
+                            clearInterval(countdownIntervalRef.current);
+                            countdownIntervalRef.current = null;
+                        }
+                    }
+                    else {
+                        setCountdown(secondsRemaining);
+                    }
+                }
+            }, 1000);
+        }
+        return () => {
+            if (autoSaveTimeoutRef.current) {
+                clearTimeout(autoSaveTimeoutRef.current);
+            }
+            if (countdownIntervalRef.current) {
+                clearInterval(countdownIntervalRef.current);
+            }
+        };
+    }, [autoSaveEnabled, isDirty, autoSaveDelay]);
+    // Handle browser beforeunload event (page refresh/close)
+    useEffect(() => {
+        if (!isDirty) {
+            return;
+        }
+        const handleBeforeUnload = (e) => {
+            e.preventDefault();
+            // Modern browsers ignore custom messages, but we still need to set returnValue
+            e.returnValue = '';
+            return '';
+        };
+        window.addEventListener('beforeunload', handleBeforeUnload);
+        return () => {
+            window.removeEventListener('beforeunload', handleBeforeUnload);
+        };
+    }, [isDirty]);
+    // Handle link clicks (for Next.js App Router)
+    useEffect(() => {
+        if (!isDirty) {
+            return;
+        }
+        const handleLinkClick = (e) => {
+            const target = e.target;
+            const link = target.closest('a');
+            if (link && link.href) {
+                const url = new URL(link.href);
+                const currentPath = window.location.pathname;
+                // Check if navigating away from editor
+                if (!url.pathname.includes('/blog/editor') && !url.pathname.includes('/blog/new')) {
+                    const confirmed = window.confirm('You have unsaved changes. Are you sure you want to leave? Your changes will be lost.');
+                    if (!confirmed) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        return false;
+                    }
+                }
+            }
+        };
+        // Listen for clicks on links
+        document.addEventListener('click', handleLinkClick, true);
+        return () => {
+            document.removeEventListener('click', handleLinkClick, true);
+        };
+    }, [isDirty]);
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            if (autoSaveTimeoutRef.current) {
+                clearTimeout(autoSaveTimeoutRef.current);
+            }
+            if (countdownIntervalRef.current) {
+                clearInterval(countdownIntervalRef.current);
+            }
+            if (saveStatusTimeoutRef.current) {
+                clearTimeout(saveStatusTimeoutRef.current);
+            }
+        };
+    }, []);
+    return {
+        autoSaveEnabled,
+        setAutoSaveEnabled: setAutoSavePreference,
+        countdown,
+        saveStatus,
+    };
+}

package/dist/views/CanvasEditor/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Canvas Editor View Exports
+ */
+export { CanvasEditorView } from './CanvasEditorView';
+export type { CanvasEditorViewProps } from './CanvasEditorView';
+export { EditorBody } from './EditorBody';
+export { LayoutContainer } from './LayoutContainer';
+export type { LayoutContainerProps } from './LayoutContainer';
+export type { EditorBodyProps } from './EditorBody';
+export { BlockWrapper } from './BlockWrapper';
+export type { BlockWrapperProps } from './BlockWrapper';
+export { EditorHeader } from './EditorHeader';
+export type { EditorHeaderProps } from './EditorHeader';
+export { SaveConfirmationModal } from './SaveConfirmationModal';
+export type { SaveConfirmationModalProps } from './SaveConfirmationModal';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/CanvasEditor/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/views/CanvasEditor/index.js

@@ -0,0 +1,9 @@
+/**
+ * Canvas Editor View Exports
+ */
+export { CanvasEditorView } from './CanvasEditorView';
+export { EditorBody } from './EditorBody';
+export { LayoutContainer } from './LayoutContainer';
+export { BlockWrapper } from './BlockWrapper';
+export { EditorHeader } from './EditorHeader';
+export { SaveConfirmationModal } from './SaveConfirmationModal';