@jhits/plugin-blog 0.0.5 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jhits/plugin-blog",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Professional blog management system for the JHITS ecosystem",
   "publishConfig": {
     "access": "public"
@@ -18,14 +18,14 @@
     }
   },
   "dependencies": {
-    "@jhits/plugin-core": "^0.0.1",
-    "@jhits/plugin-content": "^0.0.1",
-    "@jhits/plugin-images": "^0.0.1",
     "bcrypt": "^6.0.0",
     "framer-motion": "^12.23.26",
     "lucide-react": "^0.562.0",
     "mongodb": "^7.0.0",
-    "next-auth": "^4.24.13"
+    "next-auth": "^4.24.13",
+    "@jhits/plugin-core": "0.0.1",
+    "@jhits/plugin-content": "0.0.3",
+    "@jhits/plugin-images": "0.0.5"
   },
   "peerDependencies": {
     "next": ">=15.0.0",

package/src/api/handler.ts

@@ -124,7 +124,7 @@ export async function POST(req: NextRequest, config: BlogApiConfig): Promise<Nex
         if (isPublishing) {
             // Publishing requires all fields
             if (!summary?.trim()) errors.push('Summary is required for publishing');
-            if (!image?.src?.trim()) errors.push('Featured image is required for publishing');
+            if (!image?.id?.trim()) errors.push('Featured image is required for publishing');
             // Only require category if it's explicitly provided and empty
             // If categoryTags is undefined or category is undefined, that's also missing
             if (!categoryTags || !categoryTags.category || !categoryTags.category.trim()) {
@@ -168,7 +168,7 @@ export async function POST(req: NextRequest, config: BlogApiConfig): Promise<Nex
             summary: (summary || '').trim(),
             contentBlocks: contentBlocks || [],
             content: content || [],
-            image: image || { src: '', alt: '', brightness: 100, blur: 0 },
+            image: image || { id: '', alt: '' }, // Only store id and alt - plugin-images handles transforms
             categoryTags: {
                 category: categoryTags?.category?.trim() || '',
                 tags: categoryTags?.tags || [],
@@ -295,7 +295,7 @@ export async function PUT_BY_SLUG(
             // Collect all missing fields for better error messages
             const missingFields: string[] = [];
             if (!summary?.trim()) missingFields.push('summary');
-            if (!image?.src?.trim()) missingFields.push('featured image');
+            if (!image?.id?.trim()) missingFields.push('featured image');
             // Only require category if it's explicitly provided and empty
             // If categoryTags is undefined or category is undefined, that's also missing
             if (!categoryTags || !categoryTags.category || !categoryTags.category.trim()) {
@@ -308,7 +308,7 @@ export async function PUT_BY_SLUG(
                     isPublishing,
                     missingFields,
                     summary: summary?.trim() || 'missing',
-                    imageSrc: image?.src?.trim() || 'missing',
+                    imageId: image?.id?.trim() || 'missing',
                     category: categoryTags?.category?.trim() || 'missing',
                     hasContent,
                     contentBlocksLength: contentBlocks?.length || 0,

package/src/hooks/index.ts

@@ -5,4 +5,5 @@
 
 export { useBlogs, type UseBlogsOptions, type UseBlogsResult } from './useBlogs';
 export { useBlog, type UseBlogOptions, type UseBlogResult } from './useBlog';
+export { useCategories } from './useCategories';
 

package/src/hooks/useCategories.ts

@@ -0,0 +1,76 @@
+/**
+ * Hook to fetch categories from existing blog posts
+ * Extracts categories from Hero blocks in all posts
+ */
+
+'use client';
+
+import { useState, useEffect } from 'react';
+
+export function useCategories() {
+    const [categories, setCategories] = useState<string[]>([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        const fetchCategories = async () => {
+            try {
+                const categorySet = new Set<string>();
+                
+                // 1. Fetch from categories endpoint (legacy categoryTags.category)
+                try {
+                    const categoriesResponse = await fetch('/api/plugin-blog/categories');
+                    if (categoriesResponse.ok) {
+                        const categoriesData = await categoriesResponse.json();
+                        if (Array.isArray(categoriesData.categories)) {
+                            categoriesData.categories.forEach((cat: string) => {
+                                if (cat && cat.trim()) {
+                                    categorySet.add(cat.trim());
+                                }
+                            });
+                        }
+                    }
+                } catch (e) {
+                    // Categories endpoint not available, continue
+                }
+                
+                // 2. Fetch all blog posts and extract categories from Hero blocks
+                try {
+                    const response = await fetch('/api/plugin-blog?admin=true&limit=1000');
+                    if (response.ok) {
+                        const data = await response.json();
+                        const posts = Array.isArray(data.blogs) ? data.blogs : (Array.isArray(data) ? data : []);
+                        
+                        posts.forEach((post: any) => {
+                            if (post.blocks && Array.isArray(post.blocks)) {
+                                // Find Hero block
+                                const heroBlock = post.blocks.find((block: any) => block.type === 'hero');
+                                if (heroBlock && heroBlock.data && heroBlock.data.category) {
+                                    const category = heroBlock.data.category.trim();
+                                    if (category) {
+                                        categorySet.add(category);
+                                    }
+                                }
+                            }
+                        });
+                    }
+                } catch (e) {
+                    console.error('Failed to fetch posts for categories:', e);
+                }
+                
+                // Convert to sorted array
+                const sortedCategories = Array.from(categorySet).sort();
+                setCategories(sortedCategories);
+            } catch (error) {
+                console.error('Failed to fetch categories:', error);
+                // Fallback to empty array
+                setCategories([]);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchCategories();
+    }, []);
+
+    return { categories, loading };
+}

package/src/index.tsx

@@ -49,7 +49,6 @@ export interface PluginProps {
  */
 export default function BlogPlugin(props: PluginProps) {
     const { subPath, siteId, locale, customBlocks: propsCustomBlocks, darkMode: propsDarkMode, backgroundColors: propsBackgroundColors } = props;
-    console.log('[BlogPlugin] Component rendering, propsDarkMode:', propsDarkMode);
     
     // Get custom blocks from props or window global (client app injection point)
     const customBlocks = useMemo(() => {
@@ -79,7 +78,6 @@ export default function BlogPlugin(props: PluginProps) {
                 if (saved) {
                     const config = JSON.parse(saved);
                     if (config.darkMode !== undefined) {
-                        console.log('[BlogPlugin] Using darkMode from localStorage (dev settings):', config.darkMode);
                         return config.darkMode as boolean;
                     }
                 }
@@ -90,7 +88,6 @@ export default function BlogPlugin(props: PluginProps) {
         
         // Then try props
         if (propsDarkMode !== undefined) {
-            console.log('[BlogPlugin] Using darkMode from props:', propsDarkMode);
             return propsDarkMode;
         }
         
@@ -98,12 +95,10 @@ export default function BlogPlugin(props: PluginProps) {
         if (typeof window !== 'undefined' && (window as any).__JHITS_PLUGIN_PROPS__) {
             const pluginProps = (window as any).__JHITS_PLUGIN_PROPS__['plugin-blog'];
             if (pluginProps?.darkMode !== undefined) {
-                console.log('[BlogPlugin] Using darkMode from window global (fallback):', pluginProps.darkMode);
                 return pluginProps.darkMode as boolean;
             }
         }
         
-        console.log('[BlogPlugin] darkMode not found, defaulting to true');
         return true; // Default to dark mode enabled
     }, [propsDarkMode]);
     
@@ -167,8 +162,6 @@ export default function BlogPlugin(props: PluginProps) {
         };
     }, []);
     
-    console.log('[BlogPlugin] Final darkMode value:', darkMode);
-    console.log('[BlogPlugin] Background colors:', backgroundColors);
     if (heroBlockDefinition !== undefined) {
         console.log('[BlogPlugin] Hero block definition:', heroBlockDefinition ? 'found' : 'not found (REQUIRED)');
     }
@@ -180,13 +173,12 @@ export default function BlogPlugin(props: PluginProps) {
         
         case 'editor':
             const postId = subPath[1]; // This is actually the slug, not the ID
-            console.log('[BlogPlugin] Rendering editor route with postId (slug):', postId, 'darkMode:', darkMode);
             return (
                 <EditorProvider 
                     customBlocks={customBlocks} 
                     darkMode={darkMode} 
                     backgroundColors={backgroundColors}
-                    onSave={async (state) => {
+                    onSave={async (state, heroBlock) => {
                         // Save to API - update existing post
                         // Use the route postId (original slug) to identify which blog to update
                         // If route postId is missing, use state.slug or state.postId as fallback
@@ -195,22 +187,7 @@ export default function BlogPlugin(props: PluginProps) {
                             throw new Error('Cannot save: no post identifier available. Please reload the page.');
                         }
                         console.log('[BlogPlugin] Saving post with slug:', originalSlug);
-                        console.log('[BlogPlugin] Post state:', {
-                            title: state.title,
-                            status: state.status,
-                            blocksCount: state.blocks.length,
-                            blocks: state.blocks.map(b => ({ id: b.id, type: b.type, hasData: !!b.data })),
-                            hasFeaturedImage: !!state.metadata.featuredImage,
-                        });
-                        const apiData = editorStateToAPI(state);
-                        console.log('[BlogPlugin] API data being sent:', {
-                            title: apiData.title,
-                            status: apiData.publicationData?.status,
-                            contentBlocksCount: apiData.contentBlocks?.length || 0,
-                            contentBlocks: apiData.contentBlocks?.map((b: any) => ({ id: b.id, type: b.type, hasData: !!b.data })) || [],
-                            hasImage: !!apiData.image,
-                            fullApiData: JSON.stringify(apiData, null, 2),
-                        });
+                        const apiData = editorStateToAPI(state, undefined, heroBlock);
                         const response = await fetch(`/api/plugin-blog/${originalSlug}`, {
                             method: 'PUT',
                             headers: { 'Content-Type': 'application/json' },
@@ -233,7 +210,6 @@ export default function BlogPlugin(props: PluginProps) {
                             throw new Error(errorMessage + missingFieldsMsg);
                         }
                         const result = await response.json();
-                        console.log('[BlogPlugin] Save successful:', result);
                         // If the slug changed, update the URL
                         if (result.slug && result.slug !== originalSlug) {
                             window.history.replaceState(null, '', `/dashboard/blog/editor/${result.slug}`);
@@ -246,7 +222,6 @@ export default function BlogPlugin(props: PluginProps) {
             );
         
         case 'new':
-            console.log('[BlogPlugin] Rendering new route with darkMode:', darkMode);
             return (
                 <EditorProvider 
                     customBlocks={customBlocks} 
@@ -349,6 +324,9 @@ export { registerLayoutBlocks } from './lib/layouts/registerLayoutBlocks';
 export { EditorProvider, useEditor } from './state/EditorContext';
 export type { EditorProviderProps, EditorState, EditorContextValue } from './state';
 
+// Export hooks
+export { useCategories } from './hooks/useCategories';
+
 // Note: API handlers are server-only and exported from ./index.ts (server entry point)
 // They are NOT exported here to prevent client/server context mixing
 

package/src/init.tsx

@@ -59,14 +59,5 @@ export function initBlogPlugin(config: BlogPluginConfig): void {
         darkMode: config.darkMode !== undefined ? config.darkMode : true, // Default to true
         backgroundColors: config.backgroundColors || undefined,
     };
-
-    console.log('[BlogPlugin] Initialized with config:', {
-        customBlocks: config.customBlocks?.length || 0,
-        darkMode: config.darkMode !== undefined ? config.darkMode : true,
-        backgroundColors: config.backgroundColors ? {
-            light: config.backgroundColors.light,
-            dark: config.backgroundColors.dark || 'not set',
-        } : 'not set',
-    });
 }
 

package/src/lib/mappers/apiMapper.ts

@@ -18,10 +18,12 @@ export interface APIBlogDocument {
     content?: any[]; // Legacy format
     summary?: string;
     image?: {
-        src?: string;
+        id?: string; // Semantic ID (preferred) - plugin-images handles everything else
+        src?: string; // Legacy support - will be converted to id when loading
         alt?: string;
-        brightness?: number;
-        blur?: number;
+        isCustom?: boolean;
+        // Transform fields (brightness, blur, scale, positionX, positionY) are NOT stored here
+        // They are handled by plugin-images API only
     };
     categoryTags?: {
         category?: string;
@@ -50,6 +52,7 @@ export function apiToBlogPost(doc: APIBlogDocument): BlogPost {
     const id = doc._id?.toString() || doc.id || '';
     
     // Use contentBlocks if available, otherwise fallback to content (legacy)
+    // Hero block is included in contentBlocks
     const blocks = doc.contentBlocks || [];
     
     // Convert publication data
@@ -69,12 +72,14 @@ export function apiToBlogPost(doc: APIBlogDocument): BlogPost {
     };
     
     // Convert metadata
+    // Only store semantic ID (id) and alt - plugin-images handles everything else
     const metadata: PostMetadata = {
         featuredImage: doc.image ? {
-            src: doc.image.src,
+            // Prefer id (semantic ID) over src (legacy)
+            id: doc.image.id || doc.image.src,
             alt: doc.image.alt,
-            brightness: doc.image.brightness,
-            blur: doc.image.blur,
+            isCustom: doc.image.isCustom,
+            // Don't load transform fields - plugin-images handles those
         } : undefined,
         categories: doc.categoryTags?.category ? [doc.categoryTags.category] : [],
         tags: doc.categoryTags?.tags || [],
@@ -121,11 +126,12 @@ export function blogPostToAPI(post: BlogPost, authorId?: string): Partial<APIBlo
         slug: post.slug,
         contentBlocks: post.blocks, // Use new block format
         summary: post.metadata.excerpt,
+        // Only save semantic ID (id) and alt - plugin-images handles transform data
         image: post.metadata.featuredImage ? {
-            src: post.metadata.featuredImage.src,
+            id: post.metadata.featuredImage.id,
             alt: post.metadata.featuredImage.alt,
-            brightness: post.metadata.featuredImage.brightness,
-            blur: post.metadata.featuredImage.blur,
+            isCustom: post.metadata.featuredImage.isCustom,
+            // Don't save transform fields - plugin-images API handles those
         } : undefined,
         categoryTags: {
             category: post.metadata.categories?.[0] || '',
@@ -150,6 +156,9 @@ export function blogPostToAPI(post: BlogPost, authorId?: string): Partial<APIBlo
 
 /**
  * Convert EditorState to API format for saving
+ * @param state - Editor state
+ * @param authorId - Optional author ID
+ * @param heroBlock - Optional hero block (stored separately from content blocks)
  */
 export function editorStateToAPI(state: {
     title: string;
@@ -159,7 +168,7 @@ export function editorStateToAPI(state: {
     metadata: PostMetadata;
     status: PostStatus;
     postId?: string | null;
-}, authorId?: string): Partial<APIBlogDocument> {
+}, authorId?: string, heroBlock?: Block | null): Partial<APIBlogDocument> {
     // Map status: draft -> concept, published -> published, everything else stays as-is
     const apiStatus = state.status === 'draft' ? 'concept' : state.status;
     
@@ -174,10 +183,10 @@ export function editorStateToAPI(state: {
     if (state.metadata.categories && state.metadata.categories.length > 0 && state.metadata.categories[0]?.trim()) {
         category = state.metadata.categories[0].trim();
     } else {
-        // Check hero block for category
-        const heroBlock = state.blocks.find(block => block.type === 'hero');
-        if (heroBlock && heroBlock.data && typeof heroBlock.data === 'object') {
-            const heroCategory = (heroBlock.data as any).category;
+        // Check hero block for category - use the passed heroBlock parameter first, then check state.blocks
+        const heroBlockToCheck = heroBlock || state.blocks.find(block => block.type === 'hero');
+        if (heroBlockToCheck && heroBlockToCheck.data && typeof heroBlockToCheck.data === 'object') {
+            const heroCategory = (heroBlockToCheck.data as any).category;
             if (heroCategory && typeof heroCategory === 'string' && heroCategory.trim()) {
                 category = heroCategory.trim();
             }
@@ -186,20 +195,42 @@ export function editorStateToAPI(state: {
     
     console.log('[editorStateToAPI] Category resolution:', {
         fromMetadata: state.metadata.categories?.[0],
-        fromHeroBlock: state.blocks.find(b => b.type === 'hero')?.data ? (state.blocks.find(b => b.type === 'hero')!.data as any).category : undefined,
-        finalCategory: category
+        fromHeroBlock: (heroBlock || state.blocks.find(b => b.type === 'hero'))?.data ? ((heroBlock || state.blocks.find(b => b.type === 'hero'))!.data as any).category : undefined,
+        finalCategory: category,
+        hasHeroBlock: !!heroBlock,
+        heroBlockImage: heroBlock?.data ? (heroBlock.data as any)?.image : undefined,
+    });
+    
+    // Include hero block in contentBlocks if it exists
+    // Filter out any existing hero blocks from state.blocks first, then add the current hero block
+    const contentBlocksWithoutHero = state.blocks.filter(block => block.type !== 'hero');
+    const allBlocks = heroBlock 
+        ? [heroBlock, ...contentBlocksWithoutHero] 
+        : contentBlocksWithoutHero;
+    
+    console.log('[editorStateToAPI] Hero block details:', {
+        hasHeroBlock: !!heroBlock,
+        heroBlockType: heroBlock?.type,
+        heroBlockId: heroBlock?.id,
+        heroBlockImage: heroBlock?.data ? (heroBlock.data as any)?.image : undefined,
+        heroBlockImageSrc: heroBlock?.data ? (heroBlock.data as any)?.image?.src : undefined,
+        contentBlocksCount: allBlocks.length,
+        contentBlocksTypes: allBlocks.map(b => b.type),
+        heroBlockInContentBlocks: allBlocks.find(b => b.type === 'hero')?.data ? (allBlocks.find(b => b.type === 'hero')!.data as any)?.image : undefined,
     });
     
     return {
         title: state.title,
         slug: state.slug,
-        contentBlocks: state.blocks,
+        contentBlocks: allBlocks,
         summary: state.metadata.excerpt,
-        image: state.metadata.featuredImage ? {
-            src: state.metadata.featuredImage.src,
-            alt: state.metadata.featuredImage.alt,
-            brightness: state.metadata.featuredImage.brightness,
-            blur: state.metadata.featuredImage.blur,
+        // Only save semantic ID (id) and alt - plugin-images handles transform data
+        // Only create image object if id exists and is not empty
+        image: state.metadata.featuredImage?.id?.trim() ? {
+            id: state.metadata.featuredImage.id.trim(),
+            alt: state.metadata.featuredImage.alt || '',
+            isCustom: state.metadata.featuredImage.isCustom,
+            // Don't save transform fields - plugin-images API handles those
         } : undefined,
         categoryTags: {
             category: category,

package/src/registry/BlockRegistry.ts

@@ -35,10 +35,7 @@ class BlockRegistryImpl implements IBlockRegistry {
             );
         }
 
-        if (this._types.has(definition.type)) {
-            console.warn(`Block type "${definition.type}" is already registered. Overwriting...`);
-        }
-        
+        // Silently overwrite if already registered (expected in React 18 Strict Mode)
         this._types.set(definition.type, definition);
     }
 

package/src/state/EditorContext.tsx

@@ -26,7 +26,7 @@ export interface EditorProviderProps {
     /** Initial state (optional) */
     initialState?: Partial<EditorState>;
     /** Callback when save is triggered */
-    onSave?: (state: EditorState) => Promise<void>;
+    onSave?: (state: EditorState, heroBlock?: Block | null) => Promise<void>;
     /** 
      * Custom blocks from client application
      * These blocks will be registered in the BlockRegistry on mount
@@ -56,29 +56,19 @@ export function EditorProvider({
     darkMode = true,
     backgroundColors
 }: EditorProviderProps) {
-    console.log('[EditorProvider] Rendering with darkMode:', darkMode);
-    
     // Register core layout blocks on mount
     useEffect(() => {
-        console.log('[EditorContext] Registering layout blocks...');
         registerLayoutBlocks();
-        const layoutBlocks = blockRegistry.getByCategory('layout');
-        console.log('[EditorContext] Layout blocks registered:', layoutBlocks.length, layoutBlocks.map(b => b.type));
     }, []);
 
     // Register client blocks on mount
     useEffect(() => {
         if (customBlocks && customBlocks.length > 0) {
             try {
-                console.log('[EditorContext] Registering custom blocks:', customBlocks.length, customBlocks.map(b => b.type));
                 blockRegistry.registerClientBlocks(customBlocks);
-                const allBlocks = blockRegistry.getAll();
-                console.log('[EditorContext] Total blocks after registration:', allBlocks.length, allBlocks.map(b => b.type));
             } catch (error) {
                 console.error('[EditorContext] Failed to register custom blocks:', error);
             }
-        } else {
-            console.log('[EditorContext] No custom blocks provided');
         }
     }, [customBlocks]);
 
@@ -98,33 +88,50 @@ export function EditorProvider({
     const MAX_HISTORY = 50; // Limit history to prevent memory issues
 
     // Save current state to history after state changes (but not during undo/redo)
+    // Debounce history updates to avoid excessive re-renders
+    const historyTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+    
     useEffect(() => {
         if (isRestoringRef.current) {
             isRestoringRef.current = false;
             return;
         }
 
-        // Save current state to history
-        setHistory(prev => {
-            const newHistory = [...prev];
-            // Remove any future history if we're not at the end
-            if (historyIndex < newHistory.length - 1) {
-                newHistory.splice(historyIndex + 1);
-            }
-            // Add current state
-            newHistory.push({ ...state });
-            // Limit history size
-            if (newHistory.length > MAX_HISTORY) {
-                newHistory.shift();
+        // Clear existing timeout
+        if (historyTimeoutRef.current) {
+            clearTimeout(historyTimeoutRef.current);
+        }
+
+        // Debounce history updates to reduce re-renders
+        historyTimeoutRef.current = setTimeout(() => {
+            // Save current state to history
+            setHistory(prev => {
+                const newHistory = [...prev];
+                // Remove any future history if we're not at the end
+                if (historyIndex < newHistory.length - 1) {
+                    newHistory.splice(historyIndex + 1);
+                }
+                // Add current state
+                newHistory.push({ ...state });
+                // Limit history size
+                if (newHistory.length > MAX_HISTORY) {
+                    newHistory.shift();
+                    return newHistory;
+                }
                 return newHistory;
+            });
+            setHistoryIndex(prev => {
+                const newIndex = prev + 1;
+                return newIndex >= MAX_HISTORY ? MAX_HISTORY - 1 : newIndex;
+            });
+        }, 300); // Debounce by 300ms
+
+        return () => {
+            if (historyTimeoutRef.current) {
+                clearTimeout(historyTimeoutRef.current);
             }
-            return newHistory;
-        });
-        setHistoryIndex(prev => {
-            const newIndex = prev + 1;
-            return newIndex >= MAX_HISTORY ? MAX_HISTORY - 1 : newIndex;
-        });
-    }, [state.blocks, state.title, state.slug, state.seo, state.metadata, state.status]);
+        };
+    }, [state.blocks, state.title, state.slug, state.seo, state.metadata, state.status, historyIndex]);
 
     // Helper: Add a new block (supports nested containers)
     const addBlock = useCallback((type: string, index?: number, containerId?: string) => {
@@ -176,12 +183,11 @@ export function EditorProvider({
 
     // Helper: Save
     // Uses stateRef to always get the latest state, avoiding stale closure issues
-    const save = useCallback(async () => {
+    const save = useCallback(async (heroBlock?: Block | null) => {
         if (onSave) {
             // Use stateRef.current to get the absolute latest state
             // This ensures we don't have stale closure issues with React state updates
-            console.log('[EditorContext] save() called with status:', stateRef.current.status);
-            await onSave(stateRef.current);
+            await onSave(stateRef.current, heroBlock);
             dispatch({ type: 'MARK_CLEAN' });
         }
     }, [onSave]);

package/src/state/types.ts

@@ -118,7 +118,7 @@ export interface EditorContextValue {
         resetEditor: () => void;
         
         /** Save current state (triggers save callback) */
-        save: () => Promise<void>;
+        save: (heroBlock?: Block | null) => Promise<void>;
         
         /** Undo last action */
         undo: () => void;

package/src/types/post.ts

@@ -75,6 +75,10 @@ export interface PostMetadata {
         alt?: string;
         brightness?: number; // 0-200, 100 = normal
         blur?: number; // 0-20
+        scale?: number; // 0.1-3.0, 1.0 = normal
+        positionX?: number; // -100 to 100, 0 = center
+        positionY?: number; // -100 to 100, 0 = center
+        isCustom?: boolean; // true if edited independently from hero image
     };
     
     /** Categories */

package/src/views/CanvasEditor/BlockWrapper.tsx

@@ -274,7 +274,7 @@ export function BlockWrapper({
         >
             {/* Left Margin Controls - Visible on Hover */}
             <div
-                className={`absolute -left-16 top-1/2 -translate-y-1/2 flex flex-col gap-2 transition-all duration-200 z-20 ${showControls ? 'opacity-100' : 'opacity-0 pointer-events-none'
+                className={`absolute -left-16 top-1/2 -translate-y-1/2 flex flex-col gap-2 transition-all duration-200 ${showControls ? 'opacity-100' : 'opacity-0 pointer-events-none'
                     }`}
                 onMouseEnter={() => setIsControlsHovered(true)}
                 onMouseLeave={() => setIsControlsHovered(false)}
@@ -321,7 +321,7 @@ export function BlockWrapper({
 
             {/* Block Header - Positioned above the component */}
             <div
-                className={`mb-2 transition-all relative z-[100] ${isHovered || showControls || showSettingsMenu
+                className={`mb-2 transition-all relative ${isHovered || showControls || showSettingsMenu
                     ? 'opacity-100 translate-y-0'
                     : 'opacity-0 -translate-y-2 pointer-events-none'
                     }`}
@@ -339,7 +339,7 @@ export function BlockWrapper({
                         </span>
 
                         {/* Layout Block Settings - Inline in header */}
-                        {block.type === 'section' && (
+                        {/* {block.type === 'section' && (
                             <div className="flex items-center gap-2 ml-4 flex-1 min-w-0">
                                 <select
                                     value={(block.data.padding as string) || 'md'}
@@ -363,7 +363,7 @@ export function BlockWrapper({
                                     <option value="CREAM">Cream</option>
                                 </select>
                             </div>
-                        )}
+                        )} */}
 
                         {block.type === 'columns' && (
                             <select
@@ -381,13 +381,13 @@ export function BlockWrapper({
                             </select>
                         )}
                     </div>
-                    <div className="relative shrink-0 z-[200]" ref={settingsMenuRef}>
+                    <div className="relative shrink-0 z-20" ref={settingsMenuRef}>
                         <button
                             onClick={(e) => {
                                 e.stopPropagation();
                                 setShowSettingsMenu(!showSettingsMenu);
                             }}
-                            className="p-1 rounded transition-colors text-neutral-400 dark:text-neutral-500 hover:text-neutral-950 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 relative z-[200]"
+                            className="p-1 rounded transition-colors text-neutral-400 dark:text-neutral-500 hover:text-neutral-950 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 relative z-20"
                             title="Block settings"
                         >
                             <Settings2 size={12} />
@@ -395,7 +395,7 @@ export function BlockWrapper({
 
                         {/* Settings Dropdown Menu */}
                         {showSettingsMenu && (
-                            <div className="absolute right-0 top-full mt-1 w-40 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-700 rounded-lg shadow-xl z-[200] overflow-hidden">
+                            <div className="absolute right-0 top-full mt-1 w-40 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-700 rounded-lg shadow-xl z-20 overflow-hidden">
                                 <button
                                     onClick={(e) => {
                                         e.stopPropagation();
@@ -418,7 +418,6 @@ export function BlockWrapper({
                     ? 'border-primary/60 dark:border-primary/40 bg-primary/5 dark:bg-primary/10'
                     : 'border-neutral-200 dark:border-neutral-700 bg-transparent'
                     }`}
-                style={{ zIndex: 1 }}
             >
                 {/* Edit Component - No padding, let the component control its own spacing */}
                 <div className="relative" style={{ userSelect: 'text' }}>