@jhits/plugin-blog 0.0.8 → 0.0.9

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

@@ -0,0 +1,182 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Image as ImageIcon, Plus, X } from 'lucide-react';
+import { ImagePicker, Image } from '@jhits/plugin-images';
+/**
+ * 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 function FeaturedMediaSection({ featuredImage, heroBlock, slug, onUpdate, }) {
+    var _a, _b, _c, _d, _e;
+    const [showImagePicker, setShowImagePicker] = useState(false);
+    const [openEditorDirectly, setOpenEditorDirectly] = useState(false);
+    const [mounted, setMounted] = useState(false);
+    // Handle SSR - ensure we only render portal on client
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    // Create semantic ID for this featured image - plugin-images will handle everything
+    const semanticId = slug ? `blog-featured-${slug}` : `blog-featured-${Date.now()}`;
+    // Use semantic ID from featuredImage if it exists, otherwise use generated one
+    // IMPORTANT: Always use the actual id from featuredImage if available, otherwise the semanticId
+    // This ensures the id is stable and doesn't change on re-renders
+    const imageId = (featuredImage === null || featuredImage === void 0 ? void 0 : featuredImage.id) || semanticId;
+    // Ensure featuredImage always has an id when it exists
+    // This prevents the "missing featured image" issue on save
+    useEffect(() => {
+        if (featuredImage && !featuredImage.id) {
+            // If featuredImage exists but has no id, set it to the semanticId
+            onUpdate(Object.assign(Object.assign({}, featuredImage), { id: semanticId }));
+        }
+    }, [featuredImage, semanticId, onUpdate]);
+    // Get transform values from featuredImage or use defaults
+    const brightness = (_a = featuredImage === null || featuredImage === void 0 ? void 0 : featuredImage.brightness) !== null && _a !== void 0 ? _a : 100;
+    const blur = (_b = featuredImage === null || featuredImage === void 0 ? void 0 : featuredImage.blur) !== null && _b !== void 0 ? _b : 0;
+    const scale = (_c = featuredImage === null || featuredImage === void 0 ? void 0 : featuredImage.scale) !== null && _c !== void 0 ? _c : 1.0;
+    const positionX = (_d = featuredImage === null || featuredImage === void 0 ? void 0 : featuredImage.positionX) !== null && _d !== void 0 ? _d : 0;
+    const positionY = (_e = featuredImage === null || featuredImage === void 0 ? void 0 : featuredImage.positionY) !== null && _e !== void 0 ? _e : 0;
+    // Handle image selection - create initial mapping and update blog metadata with semantic ID
+    // Plugin-images Image component will automatically resolve the semantic ID when it renders
+    const handleImageChange = useCallback(async (image) => {
+        var _a, _b;
+        if (image) {
+            // Extract filename from image URL for reference
+            const isUploadedImage = image.url.startsWith('/api/uploads/');
+            let filename = image.filename;
+            if (!filename && isUploadedImage) {
+                // Extract filename from URL if not provided
+                filename = ((_a = image.url.split('/api/uploads/')[1]) === null || _a === void 0 ? void 0 : _a.split('?')[0]) || image.id;
+            }
+            else if (!filename) {
+                // For external URLs, use the image ID or extract from URL
+                filename = image.id || ((_b = image.url.split('/').pop()) === null || _b === void 0 ? void 0 : _b.split('?')[0]) || `external-${Date.now()}`;
+            }
+            // Create initial mapping in plugin-images API immediately
+            // This ensures the semantic ID resolves correctly
+            try {
+                const saveData = {
+                    id: imageId,
+                    filename: filename,
+                    scale: 1.0,
+                    positionX: 0,
+                    positionY: 0,
+                    brightness: 100,
+                    blur: 0,
+                };
+                await fetch('/api/plugin-images/resolve', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(saveData),
+                });
+            }
+            catch (error) {
+                console.error('[FeaturedMediaSection] Failed to create initial mapping:', error);
+                // Continue anyway - the mapping might be created later
+            }
+            // Update blog metadata with semantic ID
+            onUpdate({
+                id: imageId,
+                alt: image.alt || image.filename,
+                brightness: 100,
+                blur: 0,
+                scale: 1.0,
+                positionX: 0,
+                positionY: 0,
+                isCustom: true,
+            });
+        }
+        else {
+            // If removed, set to undefined
+            onUpdate(undefined);
+        }
+        setShowImagePicker(false);
+    }, [imageId, onUpdate]);
+    // Handle editor save from ImagePicker - save to plugin-images API
+    const handleEditorSave = useCallback(async (finalScale, finalPositionX, finalPositionY, finalBrightness, finalBlur) => {
+        if (!(featuredImage === null || featuredImage === void 0 ? void 0 : featuredImage.id))
+            return;
+        // Reset the auto-open flag immediately to prevent reopening
+        setOpenEditorDirectly(false);
+        // Get the actual filename from the API (resolve the semantic ID)
+        let filename = imageId; // Fallback to semantic ID
+        try {
+            const response = await fetch(`/api/plugin-images/resolve?id=${encodeURIComponent(imageId)}`);
+            if (response.ok) {
+                const data = await response.json();
+                filename = data.filename || imageId;
+            }
+        }
+        catch (error) {
+            console.error('Failed to resolve filename:', error);
+        }
+        // Normalize position values
+        const normalizedPositionX = finalPositionX === -50 ? 0 : finalPositionX;
+        const normalizedPositionY = finalPositionY === -50 ? 0 : finalPositionY;
+        const finalBrightnessValue = finalBrightness !== null && finalBrightness !== void 0 ? finalBrightness : brightness;
+        const finalBlurValue = finalBlur !== null && finalBlur !== void 0 ? finalBlur : blur;
+        // Save to plugin-images API
+        try {
+            const saveData = {
+                id: imageId,
+                filename: filename,
+                scale: finalScale,
+                positionX: normalizedPositionX,
+                positionY: normalizedPositionY,
+                brightness: finalBrightnessValue,
+                blur: finalBlurValue,
+            };
+            const response = await fetch('/api/plugin-images/resolve', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(saveData),
+            });
+            if (response.ok) {
+                // Update local featured image data - ensure id is preserved
+                onUpdate(Object.assign(Object.assign({}, featuredImage), { id: featuredImage.id || imageId, scale: finalScale, positionX: normalizedPositionX, positionY: normalizedPositionY, brightness: finalBrightnessValue, blur: finalBlurValue }));
+                // Dispatch event to notify Image components
+                window.dispatchEvent(new CustomEvent('image-mapping-updated', {
+                    detail: saveData
+                }));
+            }
+        }
+        catch (error) {
+            console.error('Failed to save image transform:', error);
+        }
+    }, [imageId, featuredImage, brightness, blur, onUpdate]);
+    return (_jsxs("section", { children: [_jsxs("div", { className: "flex items-center gap-3 mb-6", children: [_jsx(ImageIcon, { 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: "Featured Media" })] }), (featuredImage === null || featuredImage === void 0 ? void 0 : featuredImage.id) ? (_jsxs("div", { className: "relative group", children: [_jsxs("div", { className: "relative aspect-[16/10] bg-dashboard-bg rounded-3xl overflow-hidden border border-dashboard-border group/image", children: [_jsx(Image, Object.assign({ id: imageId, alt: (featuredImage === null || featuredImage === void 0 ? void 0 : featuredImage.alt) || 'Featured image', fill: true, className: "object-cover w-full h-full", editable: false }, {
+                                brightness,
+                                blur,
+                                scale,
+                                positionX,
+                                positionY,
+                            })), _jsx("button", { onClick: () => {
+                                    setOpenEditorDirectly(true);
+                                    setShowImagePicker(true);
+                                }, className: "absolute inset-0 z-30 flex items-center justify-center opacity-0 group-hover/image:opacity-100 transition-all duration-300 bg-neutral-900/40 dark:bg-neutral-900/60 backdrop-blur-[2px]", children: _jsxs("div", { className: "flex items-center gap-2 px-4 py-2 bg-white dark:bg-neutral-800 rounded-full shadow-xl", children: [_jsx(ImageIcon, { size: 14, className: "text-primary" }), _jsx("span", { className: "text-[10px] font-bold uppercase tracking-widest", children: "Edit" })] }) })] }), _jsxs("div", { className: "mt-2 flex items-center gap-3", children: [_jsx("button", { onClick: () => setShowImagePicker(true), className: "text-[10px] text-neutral-600 dark:text-neutral-400 hover:text-primary font-bold uppercase tracking-wider", children: "Change Image" }), _jsx("span", { className: "text-[10px] text-neutral-400", children: "\u2022" }), _jsx("button", { onClick: () => onUpdate(undefined), className: "text-[10px] text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 font-bold uppercase tracking-wider", children: "Remove Image" })] })] })) : (_jsxs("div", { className: "group relative aspect-[16/10] bg-dashboard-bg rounded-3xl border-2 border-dashed border-dashboard-border flex flex-col items-center justify-center text-neutral-400 dark:text-neutral-500 hover:bg-dashboard-card hover:border-primary cursor-pointer transition-all duration-300", onClick: () => setShowImagePicker(true), children: [_jsx(Plus, { size: 24, strokeWidth: 1, className: "mb-3 group-hover:scale-110 transition-transform" }), _jsx("span", { className: "text-[9px] font-black uppercase tracking-widest", children: "Assign Image" })] })), showImagePicker && mounted && createPortal(_jsx("div", { className: "fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm", onClick: () => {
+                    setShowImagePicker(false);
+                    setOpenEditorDirectly(false); // Reset flag when closing
+                }, children: _jsxs("div", { className: "bg-white dark:bg-neutral-900 rounded-2xl w-full max-w-2xl mx-4 p-6 shadow-2xl max-h-[90vh] overflow-y-auto", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "flex items-center justify-between mb-6", children: [_jsx("h3", { className: "text-lg font-bold text-neutral-900 dark:text-neutral-100", children: openEditorDirectly ? 'Edit Featured Image' : 'Select Featured Image' }), _jsx("button", { onClick: () => {
+                                        setShowImagePicker(false);
+                                        setOpenEditorDirectly(false); // Reset flag when closing
+                                    }, className: "p-2 hover:bg-dashboard-bg dark:hover:bg-neutral-800 rounded-lg transition-colors text-neutral-700 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white", "aria-label": "Close", children: _jsx(X, { size: 20, className: "transition-colors" }) })] }), _jsx(ImagePicker, Object.assign({ value: (featuredImage === null || featuredImage === void 0 ? void 0 : featuredImage.id) ? imageId : undefined, onChange: handleImageChange, brightness: brightness, blur: blur }, {
+                            scale,
+                            positionX,
+                            positionY,
+                        }, { onBrightnessChange: (val) => {
+                                // Update local state only - don't trigger save
+                                if (featuredImage) {
+                                    onUpdate(Object.assign(Object.assign({}, featuredImage), { id: featuredImage.id || imageId, brightness: val }));
+                                }
+                            }, onBlurChange: (val) => {
+                                // Update local state only - don't trigger save
+                                if (featuredImage) {
+                                    onUpdate(Object.assign(Object.assign({}, featuredImage), { id: featuredImage.id || imageId, blur: val }));
+                                }
+                            }, onEditorSave: handleEditorSave, darkMode: false, showEffects: true, aspectRatio: "16/10" // Thumbnail aspect ratio for blog cards
+                            , borderRadius: "rounded-3xl", objectFit: "cover" // Cover for thumbnails
+                            , objectPosition: "center" }))] }) }), document.body)] }));
+}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface LibraryItemProps {
+    icon: React.ReactNode;
+    label: string;
+    blockType: string;
+    description?: string;
+    onAddBlock?: (blockType: string) => void;
+}
+/**
+ * Reusable Library Item Component
+ * Makes blocks draggable from the library and clickable to add at bottom
+ */
+export declare function LibraryItem({ icon, label, blockType, description, onAddBlock }: LibraryItemProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LibraryItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LibraryItem.d.ts","sourceRoot":"","sources":["LibraryItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,MAAM,WAAW,gBAAgB;IAC7B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,SAAS,EACT,WAAW,EACX,UAAU,EACb,EAAE,gBAAgB,2CAwDlB"}

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

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useRef } from 'react';
+/**
+ * Reusable Library Item Component
+ * Makes blocks draggable from the library and clickable to add at bottom
+ */
+export function LibraryItem({ icon, label, blockType, description, 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: "flex flex-col items-center justify-center p-5 rounded-2xl border border-dashboard-border bg-dashboard-card hover:border-primary hover:shadow-xl hover:shadow-primary/5 transition-all cursor-pointer group", children: [_jsx("div", { className: "text-neutral-400 dark:text-neutral-500 group-hover:text-primary dark:group-hover:text-primary mb-3 transition-colors duration-300", children: React.cloneElement(icon, { strokeWidth: 1.5 }) }), _jsx("span", { className: "text-[9px] font-black uppercase tracking-[0.15em] text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-950 dark:group-hover:text-white transition-colors", children: label })] }));
+}

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

@@ -0,0 +1,15 @@
+export interface PrivacySettings {
+    isPrivate?: boolean;
+    password?: string;
+    sharedWithUsers?: string[];
+}
+export interface PrivacySettingsSectionProps {
+    privacy?: PrivacySettings;
+    onUpdate: (privacy: PrivacySettings) => void;
+}
+/**
+ * Privacy Settings Section Component
+ * Handles privacy settings: private, password-protected, share with users
+ */
+export declare function PrivacySettingsSection({ privacy, onUpdate, }: PrivacySettingsSectionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PrivacySettingsSection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PrivacySettingsSection.d.ts","sourceRoot":"","sources":["PrivacySettingsSection.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,eAAe;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;CAC9B;AAED,MAAM,WAAW,2BAA2B;IACxC,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;CAChD;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,EACnC,OAAO,EACP,QAAQ,GACX,EAAE,2BAA2B,2CA2L7B"}

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

@@ -0,0 +1,63 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Shield, Key, Users } from 'lucide-react';
+/**
+ * Privacy Settings Section Component
+ * Handles privacy settings: private, password-protected, share with users
+ */
+export function PrivacySettingsSection({ privacy, onUpdate, }) {
+    var _a;
+    const [users, setUsers] = useState([]);
+    const [loadingUsers, setLoadingUsers] = useState(false);
+    const [showPasswordInput, setShowPasswordInput] = useState(false);
+    const [passwordValue, setPasswordValue] = useState((privacy === null || privacy === void 0 ? void 0 : privacy.password) || '');
+    const [showUserSelector, setShowUserSelector] = useState(false);
+    // Fetch users from plugin-users
+    useEffect(() => {
+        const fetchUsers = async () => {
+            try {
+                setLoadingUsers(true);
+                const res = await fetch('/api/users');
+                const data = await res.json();
+                if (Array.isArray(data)) {
+                    setUsers(data);
+                }
+            }
+            catch (err) {
+                console.error('Failed to load users', err);
+            }
+            finally {
+                setLoadingUsers(false);
+            }
+        };
+        fetchUsers();
+    }, []);
+    const handlePrivacyToggle = (isPrivate) => {
+        onUpdate(Object.assign(Object.assign(Object.assign({}, privacy), { isPrivate }), (isPrivate ? {} : { password: undefined, sharedWithUsers: undefined })));
+    };
+    const handlePasswordChange = (password) => {
+        setPasswordValue(password);
+        onUpdate(Object.assign(Object.assign({}, privacy), { password: password || undefined }));
+    };
+    const handleUserToggle = (userId) => {
+        const currentUsers = (privacy === null || privacy === void 0 ? void 0 : privacy.sharedWithUsers) || [];
+        const newUsers = currentUsers.includes(userId)
+            ? currentUsers.filter(id => id !== userId)
+            : [...currentUsers, userId];
+        onUpdate(Object.assign(Object.assign({}, privacy), { sharedWithUsers: newUsers.length > 0 ? newUsers : undefined }));
+    };
+    return (_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(Shield, { 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: "Privacy Settings" })] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("label", { className: "text-[10px] text-neutral-700 dark:text-neutral-300 font-bold block mb-1", children: "Make Private" }), _jsx("p", { className: "text-[9px] text-neutral-500 dark:text-neutral-400", children: "Hide from public view" })] }), _jsx("button", { onClick: () => handlePrivacyToggle(!(privacy === null || privacy === void 0 ? void 0 : privacy.isPrivate)), className: `relative w-12 h-6 rounded-full transition-colors ${(privacy === null || privacy === void 0 ? void 0 : privacy.isPrivate) ? 'bg-primary' : 'bg-neutral-300 dark:bg-neutral-700'}`, children: _jsx("div", { className: `absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform ${(privacy === null || privacy === void 0 ? void 0 : privacy.isPrivate) ? 'translate-x-6' : 'translate-x-0'}` }) })] }), (privacy === null || privacy === void 0 ? void 0 : privacy.isPrivate) && (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("label", { className: "text-[10px] text-neutral-700 dark:text-neutral-300 font-bold block mb-1", children: "Password Protection" }), _jsx("p", { className: "text-[9px] text-neutral-500 dark:text-neutral-400", children: "Require password to view" })] }), _jsx("button", { onClick: () => {
+                                            setShowPasswordInput(!showPasswordInput);
+                                            if (!showPasswordInput && !privacy.password) {
+                                                setPasswordValue('');
+                                            }
+                                        }, className: `p-1.5 rounded-lg transition-colors ${privacy.password || showPasswordInput
+                                            ? 'bg-primary/10 text-primary'
+                                            : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-400'}`, children: _jsx(Key, { size: 14 }) })] }), (showPasswordInput || privacy.password) && (_jsx("input", { type: "password", value: passwordValue, onChange: (e) => handlePasswordChange(e.target.value), placeholder: "Enter password", 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" }))] })), (privacy === null || privacy === void 0 ? void 0 : privacy.isPrivate) && (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("label", { className: "text-[10px] text-neutral-700 dark:text-neutral-300 font-bold block mb-1", children: "Share with Users" }), _jsx("p", { className: "text-[9px] text-neutral-500 dark:text-neutral-400", children: "Grant access to specific users" })] }), _jsx("button", { onClick: () => setShowUserSelector(!showUserSelector), className: `p-1.5 rounded-lg transition-colors ${(((_a = privacy.sharedWithUsers) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0 || showUserSelector
+                                            ? 'bg-primary/10 text-primary'
+                                            : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-400'}`, children: _jsx(Users, { size: 14 }) })] }), showUserSelector && (_jsx("div", { className: "bg-dashboard-bg rounded-lg p-3 border border-dashboard-border max-h-48 overflow-y-auto", children: loadingUsers ? (_jsx("p", { className: "text-[10px] text-neutral-500 dark:text-neutral-400", children: "Loading users..." })) : users.length === 0 ? (_jsx("p", { className: "text-[10px] text-neutral-500 dark:text-neutral-400", children: "No users found" })) : (_jsx("div", { className: "space-y-2", children: users.map((user) => {
+                                        var _a;
+                                        return (_jsxs("label", { className: "flex items-center gap-2 cursor-pointer hover:bg-dashboard-bg p-2 rounded transition-colors", children: [_jsx("input", { type: "checkbox", checked: ((_a = privacy.sharedWithUsers) === null || _a === void 0 ? void 0 : _a.includes(user._id)) || false, onChange: () => handleUserToggle(user._id), className: "rounded border-neutral-300 dark:border-neutral-700 text-primary focus:ring-primary" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-[10px] font-bold text-neutral-700 dark:text-neutral-300 truncate", children: user.name }), _jsx("p", { className: "text-[9px] text-neutral-500 dark:text-neutral-400 truncate", children: user.email })] })] }, user._id));
+                                    }) })) })), privacy.sharedWithUsers && privacy.sharedWithUsers.length > 0 && (_jsxs("p", { className: "text-[9px] text-neutral-500 dark:text-neutral-400", children: ["Shared with ", privacy.sharedWithUsers.length, " user", privacy.sharedWithUsers.length !== 1 ? 's' : ''] }))] }))] })] }));
+}

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

@@ -0,0 +1,21 @@
+/**
+ * Canvas Editor Components
+ * Exports all components used in the Canvas Editor
+ */
+export { LibraryItem } from './LibraryItem';
+export type { LibraryItemProps } from './LibraryItem';
+export { CustomBlockItem } from './CustomBlockItem';
+export type { CustomBlockItemProps } from './CustomBlockItem';
+export { FeaturedMediaSection } from './FeaturedMediaSection';
+export type { FeaturedMediaSectionProps, FeaturedImage } from './FeaturedMediaSection';
+export { PrivacySettingsSection } from './PrivacySettingsSection';
+export type { PrivacySettingsSectionProps, PrivacySettings } from './PrivacySettingsSection';
+export { ErrorBanner } from './ErrorBanner';
+export type { ErrorBannerProps } from './ErrorBanner';
+export { EditorLibrary } from './EditorLibrary';
+export type { EditorLibraryProps } from './EditorLibrary';
+export { EditorCanvas } from './EditorCanvas';
+export type { EditorCanvasProps } from './EditorCanvas';
+export { EditorSidebar } from './EditorSidebar';
+export type { EditorSidebarProps } from './EditorSidebar';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,yBAAyB,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAEvF,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,YAAY,EAAE,2BAA2B,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE7F,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}

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

@@ -0,0 +1,12 @@
+/**
+ * Canvas Editor Components
+ * Exports all components used in the Canvas Editor
+ */
+export { LibraryItem } from './LibraryItem';
+export { CustomBlockItem } from './CustomBlockItem';
+export { FeaturedMediaSection } from './FeaturedMediaSection';
+export { PrivacySettingsSection } from './PrivacySettingsSection';
+export { ErrorBanner } from './ErrorBanner';
+export { EditorLibrary } from './EditorLibrary';
+export { EditorCanvas } from './EditorCanvas';
+export { EditorSidebar } from './EditorSidebar';

package/src/views/CanvasEditor/hooks/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Canvas Editor Hooks
+ * Exports all custom hooks used in the Canvas Editor
+ */
+export { usePostLoader } from './usePostLoader';
+export { useHeroBlock } from './useHeroBlock';
+export { useRegisteredBlocks } from './useRegisteredBlocks';
+export { useKeyboardShortcuts } from './useKeyboardShortcuts';
+export { useUnsavedChanges } from './useUnsavedChanges';
+//# sourceMappingURL=index.d.ts.map

package/src/views/CanvasEditor/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/src/views/CanvasEditor/hooks/index.js

@@ -0,0 +1,9 @@
+/**
+ * Canvas Editor Hooks
+ * Exports all custom hooks used in the Canvas Editor
+ */
+export { usePostLoader } from './usePostLoader';
+export { useHeroBlock } from './useHeroBlock';
+export { useRegisteredBlocks } from './useRegisteredBlocks';
+export { useKeyboardShortcuts } from './useKeyboardShortcuts';
+export { useUnsavedChanges } from './useUnsavedChanges';

package/src/views/CanvasEditor/hooks/useHeroBlock.d.ts

@@ -0,0 +1,8 @@
+import type { Block } from '../../../types/block';
+import type { EditorState } from '../../../state/types';
+export declare function useHeroBlock(state: EditorState, registeredBlocks: any[]): {
+    heroBlock: Block | null;
+    setHeroBlock: import("react").Dispatch<import("react").SetStateAction<Block | null>>;
+    heroBlockDefinition: import("../../..").BlockTypeDefinition | undefined;
+};
+//# sourceMappingURL=useHeroBlock.d.ts.map

package/src/views/CanvasEditor/hooks/useHeroBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHeroBlock.d.ts","sourceRoot":"","sources":["useHeroBlock.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAUxD,wBAAgB,YAAY,CAAC,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,GAAG,EAAE;;;;EAyFvE"}

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

@@ -0,0 +1,79 @@
+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 = Object.assign(Object.assign({}, heroData), { title: state.title || heroData.title || '', summary: state.metadata.excerpt || heroData.summary || '', image: heroData.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(() => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        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 = ((_a = heroBlock.data) === null || _a === void 0 ? void 0 : _a.title) || '';
+            const currentSummary = ((_b = heroBlock.data) === null || _b === void 0 ? void 0 : _b.summary) || '';
+            const currentCategory = ((_c = heroBlock.data) === null || _c === void 0 ? void 0 : _c.category) || '';
+            const stateTitle = state.title || '';
+            const stateSummary = state.metadata.excerpt || '';
+            const stateCategory = ((_d = state.metadata.categories) === null || _d === void 0 ? void 0 : _d[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(Object.assign(Object.assign({}, heroBlock), { data: Object.assign(Object.assign({}, heroBlock.data), { title: stateTitle || ((_e = heroBlock.data) === null || _e === void 0 ? void 0 : _e.title) || '', summary: stateSummary || ((_f = heroBlock.data) === null || _f === void 0 ? void 0 : _f.summary) || '', 
+                        // DO NOT sync image - keep hero block's own image
+                        category: stateCategory || ((_g = heroBlock.data) === null || _g === void 0 ? void 0 : _g.category) || '' }) }));
+            }
+        }
+    }, [state.postId, state.title, state.metadata.excerpt, state.metadata.categories, heroBlockDefinition, heroBlock]);
+    return {
+        heroBlock,
+        setHeroBlock,
+        heroBlockDefinition,
+    };
+}

package/src/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/src/views/CanvasEditor/hooks/useKeyboardShortcuts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardShortcuts.d.ts","sourceRoot":"","sources":["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/src/views/CanvasEditor/hooks/useKeyboardShortcuts.js

@@ -0,0 +1,114 @@
+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 = Object.assign(Object.assign({}, blockToClone), { id: generateBlockId(), data: Object.assign({}, blockToClone.data), meta: blockToClone.meta ? Object.assign({}, 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/src/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