@jhits/plugin-blog 0.0.18 → 0.0.20

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

@@ -1,19 +1,37 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Globe, Search, Box } from 'lucide-react';
+import { useState } from 'react';
+import { Globe, Search, Box, Hash, X, Layout, Image as ImageIcon } from 'lucide-react';
 import { FeaturedMediaSection, PrivacySettingsSection } from './index';
+import { useEditor } from '../../../state/EditorContext';
+import { useCategories } from '../../../hooks/useCategories';
 export function EditorSidebar({ slug, seo, metadata, heroBlock, status, onSEOUpdate, onMetadataUpdate, }) {
-    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: [seo.title?.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: [seo.description?.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: seo.keywords?.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: metadata.categories?.[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: metadata.categories?.[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.' })] })] }));
+    const [newTag, setNewTag] = useState('');
+    const { state } = useEditor();
+    const { categories: existingCategories } = useCategories(state.currentLanguage || undefined);
+    const handleTagAdd = (e) => {
+        if (e.key === 'Enter' && newTag.trim()) {
+            const tag = newTag.trim();
+            if (!metadata.tags?.includes(tag)) {
+                onMetadataUpdate({
+                    tags: [...(metadata.tags || []), tag]
+                });
+            }
+            setNewTag('');
+        }
+    };
+    const handleTagRemove = (tagToRemove) => {
+        onMetadataUpdate({
+            tags: (metadata.tags || []).filter(t => t !== tagToRemove)
+        });
+    };
+    return (_jsxs("div", { className: "p-8 w-96 min-w-0 max-w-full space-y-10 overflow-y-auto max-h-full custom-scrollbar", children: [_jsxs("section", { className: "p-6 bg-primary/5 border border-primary/20 rounded-[2rem] relative overflow-hidden", children: [_jsx("div", { className: "absolute top-0 right-0 p-4 opacity-10", children: _jsx(Globe, { size: 60, className: "text-primary" }) }), _jsxs("div", { className: "relative z-10", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("label", { className: "text-[10px] font-black text-primary uppercase tracking-[0.3em]", children: "Publication Status" }), _jsx("span", { className: `px-3 py-1 rounded-full text-[9px] font-black uppercase tracking-widest border shadow-sm ${status === 'published'
+                                            ? 'bg-emerald-500 text-white border-emerald-400'
+                                            : status === 'not-translated'
+                                                ? 'bg-blue-500 text-white border-blue-400'
+                                                : 'bg-amber-500 text-white border-amber-400'}`, children: status === 'not-translated' ? 'Not Translated' : status })] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "bg-dashboard-card/50 p-4 rounded-2xl border border-dashboard-border/50", children: [_jsx("span", { className: "text-[9px] font-black text-dashboard-text-secondary uppercase tracking-[0.2em] block mb-2", children: "Live Endpoint" }), _jsxs("div", { className: "text-[11px] font-mono text-dashboard-text leading-relaxed break-all bg-white/5 p-2 rounded-lg border border-white/5", children: ["/blog/", _jsx("span", { className: "text-primary font-bold", children: slug || 'untitled-publication' })] })] }), _jsx("p", { className: "text-[10px] text-dashboard-text-secondary leading-relaxed italic opacity-70", children: status === 'published'
+                                            ? 'This publication is live across all connected digital touchpoints.'
+                                            : status === 'not-translated'
+                                                ? 'This language edition has not been created yet. Save it as a draft to begin.'
+                                                : 'Your article is currently private. Only editorial staff can view and modify it.' })] })] })] }), _jsxs("section", { className: "space-y-6", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "size-8 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20", children: _jsx(Box, { size: 14 }) }), _jsx("label", { className: "text-[10px] font-black text-dashboard-text uppercase tracking-[0.3em]", children: "Classification" })] }), _jsxs("div", { className: "space-y-4 p-6 bg-dashboard-card/30 rounded-[2rem] border border-dashboard-border/50", children: [_jsxs("div", { className: "group", children: [_jsx("label", { className: "text-[9px] font-black text-dashboard-text-secondary uppercase tracking-[0.2em] mb-2 block px-1 group-focus-within:text-primary transition-colors", children: "Primary Category" }), _jsxs("div", { className: "relative", children: [_jsx(Layout, { size: 12, className: "absolute left-3.5 top-1/2 -translate-y-1/2 text-dashboard-text-secondary group-focus-within:text-primary transition-colors" }), _jsx("input", { type: "text", list: "category-suggestions", value: metadata.categories?.[0] || '', onChange: (e) => onMetadataUpdate({ categories: e.target.value.trim() ? [e.target.value.trim()] : [] }), placeholder: "e.g. Technology, Lifestyle", className: "w-full pl-10 pr-4 py-3 bg-dashboard-bg/50 border border-dashboard-border/50 rounded-xl text-xs font-bold text-dashboard-text placeholder:text-dashboard-text-secondary/30 outline-none focus:border-primary/40 focus:bg-primary/[0.02] transition-all" }), _jsx("datalist", { id: "category-suggestions", children: existingCategories.map(cat => (_jsx("option", { value: cat }, cat))) })] })] }), _jsxs("div", { className: "group", children: [_jsx("label", { className: "text-[9px] font-black text-dashboard-text-secondary uppercase tracking-[0.2em] mb-2 block px-1 group-focus-within:text-primary transition-colors", children: "Article Tags" }), _jsx("div", { className: "flex flex-wrap gap-2 mb-3", children: metadata.tags?.map((tag) => (_jsxs("span", { className: "inline-flex items-center gap-2 px-3 py-1.5 bg-primary/10 border border-primary/20 rounded-full text-[9px] font-black text-primary uppercase tracking-widest group/tag hover:bg-primary/20 transition-all", children: [tag, _jsx("button", { onClick: () => handleTagRemove(tag), className: "text-primary/40 hover:text-primary transition-colors", children: _jsx(X, { size: 10, strokeWidth: 3 }) })] }, tag))) }), _jsxs("div", { className: "relative", children: [_jsx(Hash, { size: 12, className: "absolute left-3.5 top-1/2 -translate-y-1/2 text-dashboard-text-secondary group-focus-within:text-primary transition-colors" }), _jsx("input", { type: "text", value: newTag, onChange: (e) => setNewTag(e.target.value), onKeyDown: handleTagAdd, placeholder: "Add tag + Enter", className: "w-full pl-10 pr-4 py-3 bg-dashboard-bg/50 border border-dashboard-border/50 rounded-xl text-xs font-bold text-dashboard-text placeholder:text-dashboard-text-secondary/30 outline-none focus:border-primary/40 focus:bg-primary/[0.02] transition-all" })] })] })] })] }), _jsx("div", { className: "p-6 bg-dashboard-card/30 rounded-[2rem] border border-dashboard-border/50", children: _jsx(FeaturedMediaSection, { featuredImage: metadata.featuredImage, heroBlock: heroBlock, slug: slug, onUpdate: (image) => onMetadataUpdate({ featuredImage: image }) }) }), _jsxs("section", { className: "space-y-6", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "size-8 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20", children: _jsx(Search, { size: 14 }) }), _jsx("label", { className: "text-[10px] font-black text-dashboard-text uppercase tracking-[0.3em]", children: "SEO & Meta" })] }), _jsxs("div", { className: "space-y-5 p-6 bg-dashboard-card/30 rounded-[2.5rem] border border-dashboard-border/50", children: [_jsxs("div", { className: "group", children: [_jsx("label", { className: "text-[9px] font-black text-dashboard-text-secondary uppercase tracking-[0.2em] mb-2 block px-1 group-focus-within:text-primary transition-colors", children: "Search Engine Title" }), _jsx("input", { type: "text", value: seo.title || '', onChange: (e) => onSEOUpdate({ title: e.target.value }), placeholder: "Defaults to article title", className: "w-full px-4 py-3 bg-dashboard-bg/50 border border-dashboard-border/50 rounded-xl text-xs font-bold text-dashboard-text placeholder:text-dashboard-text-secondary/30 outline-none focus:border-primary/40 focus:bg-primary/[0.02] transition-all" }), _jsxs("div", { className: "flex justify-between mt-1.5 px-1", children: [_jsx("p", { className: "text-[8px] font-black text-dashboard-text-secondary uppercase opacity-40", children: "Optimized: 60 chars" }), _jsxs("p", { className: `text-[9px] font-mono ${(seo.title?.length || 0) > 60 ? 'text-red-500' : 'text-primary'}`, children: [seo.title?.length || 0, "/60"] })] })] }), _jsxs("div", { className: "group", children: [_jsx("label", { className: "text-[9px] font-black text-dashboard-text-secondary uppercase tracking-[0.2em] mb-2 block px-1 group-focus-within:text-primary transition-colors", children: "Meta Description" }), _jsx("textarea", { value: seo.description || '', onChange: (e) => onSEOUpdate({ description: e.target.value }), placeholder: "Write a compelling summary...", rows: 4, className: "w-full px-4 py-3 bg-dashboard-bg/50 border border-dashboard-border/50 rounded-xl text-xs font-bold text-dashboard-text placeholder:text-dashboard-text-secondary/30 outline-none focus:border-primary/40 focus:bg-primary/[0.02] transition-all resize-none" }), _jsxs("div", { className: "flex justify-between mt-1.5 px-1", children: [_jsx("p", { className: "text-[8px] font-black text-dashboard-text-secondary uppercase opacity-40", children: "Recommended: 160 chars" }), _jsxs("p", { className: `text-[9px] font-mono ${(seo.description?.length || 0) > 160 ? 'text-red-500' : 'text-primary'}`, children: [seo.description?.length || 0, "/160"] })] })] }), _jsxs("div", { className: "group", children: [_jsx("label", { className: "text-[9px] font-black text-dashboard-text-secondary uppercase tracking-[0.2em] mb-2 block px-1 group-focus-within:text-primary transition-colors", children: "Social Media Asset (OG Image)" }), _jsxs("div", { className: "relative", children: [_jsx(ImageIcon, { size: 12, className: "absolute left-3.5 top-1/2 -translate-y-1/2 text-dashboard-text-secondary group-focus-within:text-primary transition-colors" }), _jsx("input", { type: "url", value: seo.ogImage || '', onChange: (e) => onSEOUpdate({ ogImage: e.target.value }), placeholder: "https://...", className: "w-full pl-10 pr-4 py-3 bg-dashboard-bg/50 border border-dashboard-border/50 rounded-xl text-xs font-bold text-dashboard-text placeholder:text-dashboard-text-secondary/30 outline-none focus:border-primary/40 focus:bg-primary/[0.02] transition-all" })] })] })] })] }), _jsx("div", { className: "p-6 bg-dashboard-card/30 rounded-[2.5rem] border border-dashboard-border/50", children: _jsx(PrivacySettingsSection, { privacy: metadata.privacy, onUpdate: (privacy) => onMetadataUpdate({ privacy }) }) }), _jsx("div", { className: "pb-10" })] }));
 }

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

@@ -15,11 +15,5 @@ export interface FeaturedMediaSectionProps {
     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/dist/views/CanvasEditor/components/FeaturedMediaSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FeaturedMediaSection.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/components/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"}
+{"version":3,"file":"FeaturedMediaSection.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/components/FeaturedMediaSection.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAElD,MAAM,WAAW,aAAa;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,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;IACnB,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,wBAAgB,oBAAoB,CAAC,EACjC,aAAa,EACb,SAAS,EACT,IAAI,EACJ,QAAQ,GACX,EAAE,yBAAyB,2CAgL3B"}

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

@@ -2,72 +2,35 @@
 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 { Image as ImageIcon, Plus, X, Edit2, Trash2 } 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, }) {
     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
+    useEffect(() => { setMounted(true); }, []);
     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?.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({
-                ...featuredImage,
-                id: semanticId,
-            });
+            onUpdate({ ...featuredImage, id: semanticId });
         }
     }, [featuredImage, semanticId, onUpdate]);
-    // Get transform values from featuredImage or use defaults
     const brightness = featuredImage?.brightness ?? 100;
     const blur = featuredImage?.blur ?? 0;
     const scale = featuredImage?.scale ?? 1.0;
     const positionX = featuredImage?.positionX ?? 0;
     const positionY = featuredImage?.positionY ?? 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) => {
         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
+            if (!filename && isUploadedImage)
                 filename = image.url.split('/api/uploads/')[1]?.split('?')[0] || image.id;
-            }
-            else if (!filename) {
-                // For external URLs, use the image ID or extract from URL
+            else if (!filename)
                 filename = image.id || image.url.split('/').pop()?.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,
-                };
+                const saveData = { id: imageId, 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' },
@@ -75,35 +38,20 @@ export function FeaturedMediaSection({ featuredImage, heroBlock, slug, onUpdate,
                 });
             }
             catch (error) {
-                console.error('[FeaturedMediaSection] Failed to create initial mapping:', error);
-                // Continue anyway - the mapping might be created later
+                console.error(error);
             }
-            // 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,
-            });
+            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?.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
+        let filename = imageId;
         try {
             const response = await fetch(`/api/plugin-images/resolve?id=${encodeURIComponent(imageId)}`);
             if (response.ok) {
@@ -112,88 +60,29 @@ export function FeaturedMediaSection({ featuredImage, heroBlock, slug, onUpdate,
             }
         }
         catch (error) {
-            console.error('Failed to resolve filename:', error);
+            console.error(error);
         }
-        // Normalize position values
         const normalizedPositionX = finalPositionX === -50 ? 0 : finalPositionX;
         const normalizedPositionY = finalPositionY === -50 ? 0 : finalPositionY;
         const finalBrightnessValue = finalBrightness ?? brightness;
         const finalBlurValue = 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 saveData = { id: imageId, 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({
-                    ...featuredImage,
-                    id: featuredImage.id || imageId, // Ensure id is always preserved
-                    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
-                }));
+                onUpdate({ ...featuredImage, id: featuredImage.id || imageId, scale: finalScale, positionX: normalizedPositionX, positionY: normalizedPositionY, brightness: finalBrightnessValue, blur: finalBlurValue });
+                window.dispatchEvent(new CustomEvent('image-mapping-updated', { detail: saveData }));
             }
         }
         catch (error) {
-            console.error('Failed to save image transform:', error);
+            console.error(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?.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, { id: imageId, alt: 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, { value: 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({
-                                        ...featuredImage,
-                                        id: featuredImage.id || imageId, // Ensure id is preserved
-                                        brightness: val,
-                                    });
-                                }
-                            }, onBlurChange: (val) => {
-                                // Update local state only - don't trigger save
-                                if (featuredImage) {
-                                    onUpdate({
-                                        ...featuredImage,
-                                        id: featuredImage.id || imageId, // Ensure id is preserved
-                                        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)] }));
+    return (_jsxs("section", { children: [_jsxs("div", { className: "flex items-center gap-3 mb-6", children: [_jsx("div", { className: "size-8 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20", children: _jsx(ImageIcon, { size: 14 }) }), _jsx("label", { className: "text-[10px] font-black text-dashboard-text uppercase tracking-[0.3em]", children: "Visual Identity" })] }), 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 shadow-inner", children: [_jsx(Image, { id: imageId, alt: featuredImage?.alt || 'Featured image', fill: true, className: "object-cover w-full h-full group-hover:scale-105 transition-transform duration-700", editable: false, ...{ brightness, blur, scale, positionX, positionY } }), _jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center opacity-0 group-hover/image:opacity-100 transition-all duration-500 bg-black/20 backdrop-blur-[2px]", children: _jsxs("button", { onClick: () => { setOpenEditorDirectly(true); setShowImagePicker(true); }, className: "flex items-center gap-2 px-5 py-2.5 bg-white text-black rounded-full shadow-2xl hover:scale-105 active:scale-95 transition-all", children: [_jsx(Edit2, { size: 12, className: "fill-current" }), _jsx("span", { className: "text-[10px] font-black uppercase tracking-widest", children: "Adjust View" })] }) })] }), _jsxs("div", { className: "mt-4 flex items-center justify-between px-1", children: [_jsxs("button", { onClick: () => setShowImagePicker(true), className: "text-[9px] font-black uppercase tracking-[0.2em] text-primary hover:text-primary/80 transition-colors flex items-center gap-1.5", children: [_jsx(Plus, { size: 10, strokeWidth: 3 }), "Replace"] }), _jsxs("button", { onClick: () => onUpdate(undefined), className: "text-[9px] font-black uppercase tracking-[0.2em] text-red-500/60 hover:text-red-500 transition-colors flex items-center gap-1.5", children: [_jsx(Trash2, { size: 10 }), "Detach"] })] })] })) : (_jsxs("div", { className: "group relative aspect-[16/10] bg-dashboard-bg/50 rounded-[2.5rem] border-2 border-dashed border-dashboard-border/50 flex flex-col items-center justify-center text-dashboard-text-secondary/40 hover:bg-primary/[0.02] hover:border-primary/40 cursor-pointer transition-all duration-500 shadow-inner", onClick: () => setShowImagePicker(true), children: [_jsx("div", { className: "size-14 rounded-full bg-dashboard-card flex items-center justify-center border border-dashboard-border group-hover:scale-110 group-hover:border-primary/20 transition-all duration-500 mb-4 shadow-sm", children: _jsx(ImageIcon, { size: 24, strokeWidth: 1.5, className: "group-hover:text-primary transition-colors" }) }), _jsx("span", { className: "text-[10px] font-black uppercase tracking-[0.3em] group-hover:text-primary transition-colors", children: "Assign Visual" })] })), showImagePicker && mounted && createPortal(_jsxs("div", { className: "fixed inset-0 z-[9999] flex items-center justify-center p-6", onClick: () => { setShowImagePicker(false); setOpenEditorDirectly(false); }, children: [_jsx("div", { className: "absolute inset-0 bg-black/60 backdrop-blur-md" }), _jsxs("div", { className: "relative bg-dashboard-bg border border-dashboard-border rounded-[3rem] w-full max-w-3xl overflow-hidden shadow-2xl animate-in zoom-in-95 duration-300 flex flex-col max-h-full", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "p-8 border-b border-dashboard-border flex items-center justify-between", children: [_jsxs("div", { children: [_jsxs("h3", { className: "text-2xl font-black text-dashboard-text uppercase tracking-tighter", children: [openEditorDirectly ? 'Perfecting' : 'Curating', " Image"] }), _jsx("p", { className: "text-xs text-dashboard-text-secondary italic mt-1", children: "Select or adjust the featured visual for your article." })] }), _jsx("button", { onClick: () => { setShowImagePicker(false); setOpenEditorDirectly(false); }, className: "size-12 flex items-center justify-center bg-dashboard-card border border-dashboard-border rounded-2xl hover:text-red-500 hover:border-red-500/20 transition-all", children: _jsx(X, { size: 20 }) })] }), _jsx("div", { className: "flex-1 overflow-y-auto p-8 custom-scrollbar", children: _jsx(ImagePicker, { value: featuredImage?.id ? imageId : undefined, onChange: handleImageChange, brightness: brightness, blur: blur, ...{ scale, positionX, positionY }, onBrightnessChange: (val) => { if (featuredImage)
+                                        onUpdate({ ...featuredImage, id: featuredImage.id || imageId, brightness: val }); }, onBlurChange: (val) => { if (featuredImage)
+                                        onUpdate({ ...featuredImage, id: featuredImage.id || imageId, blur: val }); }, onEditorSave: handleEditorSave, darkMode: true, showEffects: true, aspectRatio: "16/10", borderRadius: "rounded-[2rem]", objectFit: "cover", objectPosition: "center" }) })] })] }), document.body)] }));
 }

package/dist/views/CanvasEditor/components/JSONInspector.d.ts

@@ -0,0 +1,9 @@
+export interface JSONInspectorProps {
+    data: any;
+}
+/**
+ * Dev-only JSON Inspector
+ * Displays the current state of the blog post in a formatted JSON view
+ */
+export declare function JSONInspector({ data }: JSONInspectorProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=JSONInspector.d.ts.map

package/dist/views/CanvasEditor/components/JSONInspector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JSONInspector.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/components/JSONInspector.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,kBAAkB;IAC/B,IAAI,EAAE,GAAG,CAAC;CACb;AA+BD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,EAAE,kBAAkB,kDAkFzD"}

package/dist/views/CanvasEditor/components/JSONInspector.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { Code, X, Copy, Check } from 'lucide-react';
+/**
+ * Simple JSON Syntax Highlighter
+ */
+function highlightJSON(json) {
+    if (!json)
+        return null;
+    // Convert to string and escape HTML
+    const escaped = json
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+    return escaped.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
+        let cls = 'text-orange-400'; // number
+        if (/^"/.test(match)) {
+            if (/:$/.test(match)) {
+                cls = 'text-blue-400'; // key
+            }
+            else {
+                cls = 'text-green-400'; // string
+            }
+        }
+        else if (/true|false/.test(match)) {
+            cls = 'text-purple-400'; // boolean
+        }
+        else if (/null/.test(match)) {
+            cls = 'text-neutral-500'; // null
+        }
+        return `<span class="${cls}">${match}</span>`;
+    });
+}
+/**
+ * Dev-only JSON Inspector
+ * Displays the current state of the blog post in a formatted JSON view
+ */
+export function JSONInspector({ data }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [copied, setCopied] = useState(false);
+    // Memoize the highlighted HTML to prevent re-parsing on every render
+    const highlightedHTML = useMemo(() => {
+        const jsonString = JSON.stringify(data, null, 2);
+        return highlightJSON(jsonString);
+    }, [data]);
+    // Only visible in development mode
+    if (process.env.NODE_ENV !== 'development')
+        return null;
+    const handleCopy = () => {
+        navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { onClick: () => setIsOpen(true), className: "fixed bottom-8 right-8 z-[100] bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 px-5 py-3 rounded-2xl shadow-2xl hover:scale-105 active:scale-95 transition-all flex items-center gap-3 border border-white/10 dark:border-neutral-200", title: "Inspect JSON (Dev Only)", children: [_jsx("div", { className: "size-2 rounded-full bg-green-500 animate-pulse" }), _jsx(Code, { size: 18, strokeWidth: 2.5 }), _jsx("span", { className: "text-[10px] font-black uppercase tracking-[0.2em]", children: "Inspect JSON" })] }), isOpen && (_jsx("div", { className: "fixed inset-0 z-[110] bg-black/60 backdrop-blur-md flex items-center justify-center p-6 md:p-12 animate-in fade-in duration-300", children: _jsxs("div", { className: "bg-white dark:bg-neutral-900 rounded-[2.5rem] w-full max-w-5xl h-[85vh] flex flex-col overflow-hidden shadow-[0_32px_64px_-12px_rgba(0,0,0,0.5)] border border-neutral-200 dark:border-neutral-800 animate-in zoom-in-95 duration-300", children: [_jsxs("div", { className: "px-8 py-6 border-b border-neutral-100 dark:border-neutral-800 flex justify-between items-center bg-neutral-50/50 dark:bg-neutral-800/50 shrink-0", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-3 mb-1", children: [_jsx("h3", { className: "font-black uppercase tracking-tighter text-2xl text-neutral-900 dark:text-white", children: "Blog Data" }), _jsx("span", { className: "px-2 py-0.5 rounded-md bg-primary/10 text-primary text-[9px] font-black uppercase tracking-widest", children: "Dev Tool" })] }), _jsx("p", { className: "text-[10px] text-neutral-500 font-bold uppercase tracking-widest", children: "Raw state inspector for debugging purposes" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("button", { onClick: handleCopy, className: "flex items-center gap-2 px-5 py-2.5 bg-neutral-100 dark:bg-neutral-800 hover:bg-neutral-200 dark:hover:bg-neutral-700 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all", children: [copied ? _jsx(Check, { size: 14, className: "text-green-500" }) : _jsx(Copy, { size: 14 }), copied ? 'Copied' : 'Copy JSON'] }), _jsx("button", { onClick: () => setIsOpen(false), className: "p-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-full transition-colors text-neutral-400 hover:text-neutral-900 dark:hover:text-white", children: _jsx(X, { size: 28, strokeWidth: 1.5 }) })] })] }), _jsx("div", { className: "flex-1 min-h-0 w-full bg-[#0d0d0d] overflow-y-auto overflow-x-hidden custom-scrollbar", children: _jsx("pre", { className: "p-8 font-mono text-[13px] leading-relaxed text-neutral-300 whitespace-pre-wrap break-all", dangerouslySetInnerHTML: { __html: highlightedHTML || '' } }) }), _jsxs("div", { className: "px-8 py-4 bg-neutral-50 dark:bg-neutral-800/30 border-t border-neutral-100 dark:border-neutral-800 flex justify-between items-center text-[9px] font-bold text-neutral-400 uppercase tracking-widest shrink-0", children: [_jsxs("span", { children: ["Blocks Count: ", data.blocks?.length || 0] }), _jsxs("span", { children: ["Status: ", data.status || 'Unknown'] })] })] }) }))] }));
+}

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

@@ -9,7 +9,7 @@ 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.setData('blockType', blockType);
         e.dataTransfer.effectAllowed = 'move';
         setHasDragged(true); // Mark as dragged when drag starts
     };
@@ -39,5 +39,5 @@ export function LibraryItem({ icon, label, blockType, description, onAddBlock })
         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 })] }));
+    return (_jsxs("div", { draggable: true, onDragStart: handleDragStart, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onClick: handleClick, className: "flex flex-col items-center justify-center p-6 rounded-[2rem] border border-dashboard-border/50 bg-dashboard-card/30 backdrop-blur-sm hover:border-primary/40 hover:bg-primary/[0.02] hover:shadow-2xl hover:shadow-primary/10 hover:scale-[1.05] transition-all duration-500 cursor-grab active:cursor-grabbing group", children: [_jsx("div", { className: "text-dashboard-text-secondary group-hover:text-primary transition-all duration-500 group-hover:scale-110 mb-4", children: React.cloneElement(icon, { strokeWidth: 1.5, size: 24 }) }), _jsx("span", { className: "text-[9px] font-black uppercase tracking-[0.2em] text-dashboard-text-secondary group-hover:text-dashboard-text transition-colors text-center leading-tight", children: label })] }));
 }

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

@@ -7,9 +7,5 @@ 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/dist/views/CanvasEditor/components/PrivacySettingsSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrivacySettingsSection.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/components/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"}
+{"version":3,"file":"PrivacySettingsSection.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/components/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,wBAAgB,sBAAsB,CAAC,EACnC,OAAO,EACP,QAAQ,GACX,EAAE,2BAA2B,2CA6I7B"}

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

@@ -1,30 +1,24 @@
 '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
- */
+import { Shield, Key, Users, Lock, Unlock } from 'lucide-react';
 export function PrivacySettingsSection({ privacy, onUpdate, }) {
     const [users, setUsers] = useState([]);
     const [loadingUsers, setLoadingUsers] = useState(false);
     const [showPasswordInput, setShowPasswordInput] = useState(false);
     const [passwordValue, setPasswordValue] = useState(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)) {
+                if (Array.isArray(data))
                     setUsers(data);
-                }
             }
             catch (err) {
-                console.error('Failed to load users', err);
+                console.error(err);
             }
             finally {
                 setLoadingUsers(false);
@@ -36,35 +30,19 @@ export function PrivacySettingsSection({ privacy, onUpdate, }) {
         onUpdate({
             ...privacy,
             isPrivate,
-            // Clear password and shared users if making public
             ...(isPrivate ? {} : { password: undefined, sharedWithUsers: undefined }),
         });
     };
     const handlePasswordChange = (password) => {
         setPasswordValue(password);
-        onUpdate({
-            ...privacy,
-            password: password || undefined,
-        });
+        onUpdate({ ...privacy, password: password || undefined });
     };
     const handleUserToggle = (userId) => {
         const currentUsers = privacy?.sharedWithUsers || [];
         const newUsers = currentUsers.includes(userId)
             ? currentUsers.filter(id => id !== userId)
             : [...currentUsers, userId];
-        onUpdate({
-            ...privacy,
-            sharedWithUsers: newUsers.length > 0 ? newUsers : undefined,
-        });
+        onUpdate({ ...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?.isPrivate), className: `relative w-12 h-6 rounded-full transition-colors ${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?.isPrivate ? 'translate-x-6' : 'translate-x-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?.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 ${(privacy.sharedWithUsers?.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) => (_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: privacy.sharedWithUsers?.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' : ''] }))] }))] })] }));
+    return (_jsxs("section", { className: "space-y-6", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "size-8 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20", children: _jsx(Shield, { size: 14 }) }), _jsx("label", { className: "text-[10px] font-black text-dashboard-text uppercase tracking-[0.3em]", children: "Privacy & Security" })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: `p-4 rounded-[1.5rem] border transition-all duration-500 ${privacy?.isPrivate ? 'bg-primary/5 border-primary/20 shadow-sm' : 'bg-dashboard-bg/50 border-dashboard-border/50'}`, children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `size-10 rounded-xl flex items-center justify-center border transition-all ${privacy?.isPrivate ? 'bg-primary text-white border-primary/20' : 'bg-dashboard-card text-dashboard-text-secondary border-dashboard-border'}`, children: privacy?.isPrivate ? _jsx(Lock, { size: 16 }) : _jsx(Unlock, { size: 16 }) }), _jsxs("div", { children: [_jsx("label", { className: "text-[10px] font-black text-dashboard-text uppercase tracking-widest", children: "Restrict Access" }), _jsx("p", { className: "text-[9px] text-dashboard-text-secondary italic opacity-60", children: "Hide from public view" })] })] }), _jsx("button", { onClick: () => handlePrivacyToggle(!privacy?.isPrivate), className: `relative w-12 h-6 rounded-full transition-colors ${privacy?.isPrivate ? 'bg-primary' : 'bg-dashboard-card border border-dashboard-border'}`, children: _jsx("div", { className: `absolute top-1 left-1 size-4 rounded-full transition-transform ${privacy?.isPrivate ? 'translate-x-6 bg-white shadow-sm' : 'translate-x-0 bg-dashboard-text-secondary/30'}` }) })] }) }), privacy?.isPrivate && (_jsxs("div", { className: "space-y-3 animate-in fade-in slide-in-from-top-2 duration-300", children: [_jsxs("div", { className: "group", children: [_jsx("div", { className: "flex items-center justify-between mb-2 px-1", children: _jsxs("label", { className: "text-[9px] font-black text-dashboard-text-secondary uppercase tracking-widest group-focus-within:text-primary transition-colors flex items-center gap-2", children: [_jsx(Key, { size: 10 }), " Password Layer"] }) }), _jsx("input", { type: "password", value: passwordValue, onChange: (e) => handlePasswordChange(e.target.value), placeholder: "Set viewing password...", className: "w-full px-4 py-2.5 bg-dashboard-bg/50 border border-dashboard-border/50 rounded-xl text-xs font-bold text-dashboard-text placeholder:text-dashboard-text-secondary/30 outline-none focus:border-primary/40 focus:bg-primary/[0.02] transition-all" })] }), _jsxs("div", { className: "pt-2", children: [_jsxs("button", { onClick: () => setShowUserSelector(!showUserSelector), className: `w-full flex items-center justify-between p-3 rounded-xl border transition-all ${showUserSelector ? 'bg-primary/10 border-primary/30 text-primary' : 'bg-dashboard-card/50 border-dashboard-border/50 text-dashboard-text-secondary hover:border-primary/30'}`, children: [_jsxs("div", { className: "flex items-center gap-2 text-[9px] font-black uppercase tracking-widest", children: [_jsx(Users, { size: 12 }), _jsx("span", { children: "Grant Personal Access" })] }), _jsx("span", { className: "text-[10px] font-bold opacity-60 bg-white/5 px-2 py-0.5 rounded-full", children: privacy.sharedWithUsers?.length || 0 })] }), showUserSelector && (_jsx("div", { className: "mt-3 bg-dashboard-bg/80 backdrop-blur-xl rounded-2xl border border-dashboard-border/50 overflow-hidden animate-in fade-in slide-in-from-top-2 duration-300", children: _jsx("div", { className: "max-h-48 overflow-y-auto p-2 custom-scrollbar space-y-1", children: loadingUsers ? (_jsx("div", { className: "p-4 text-center animate-pulse text-[10px] font-black text-primary/40 uppercase tracking-widest", children: "Scanning Network..." })) : users.map((user) => (_jsxs("label", { className: "flex items-center gap-3 p-2 rounded-xl hover:bg-primary/5 cursor-pointer transition-all group/user", children: [_jsx("input", { type: "checkbox", checked: privacy.sharedWithUsers?.includes(user._id) || false, onChange: () => handleUserToggle(user._id), className: "size-4 rounded border-dashboard-border text-primary focus:ring-primary/20 bg-dashboard-card" }), _jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx("div", { className: "size-7 rounded-lg bg-dashboard-card border border-dashboard-border flex items-center justify-center text-[10px] font-black overflow-hidden shrink-0", children: user.image ? _jsx("img", { src: user.image, className: "size-full object-cover", crossOrigin: "anonymous" }) : user.name[0] }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-[10px] font-black text-dashboard-text uppercase truncate", children: user.name }), _jsx("p", { className: "text-[8px] text-dashboard-text-secondary truncate opacity-60 italic", children: user.email })] })] })] }, user._id))) }) }))] })] }))] })] }));
 }

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

@@ -18,4 +18,6 @@ export { EditorCanvas } from './EditorCanvas';
 export type { EditorCanvasProps } from './EditorCanvas';
 export { EditorSidebar } from './EditorSidebar';
 export type { EditorSidebarProps } from './EditorSidebar';
+export { JSONInspector } from './JSONInspector';
+export type { JSONInspectorProps } from './JSONInspector';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/components/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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/CanvasEditor/components/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;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC1G,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}

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

@@ -10,3 +10,4 @@ export { ErrorBanner } from './ErrorBanner';
 export { EditorLibrary } from './EditorLibrary';
 export { EditorCanvas } from './EditorCanvas';
 export { EditorSidebar } from './EditorSidebar';
+export { JSONInspector } from './JSONInspector';

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

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