@jhits/plugin-blog 0.0.6 → 0.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jhits/plugin-blog",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Professional blog management system for the JHITS ecosystem",
   "publishConfig": {
     "access": "public"
@@ -19,12 +19,12 @@
   },
   "dependencies": {
     "bcrypt": "^6.0.0",
-    "framer-motion": "^12.23.26",
+    "framer-motion": "^12.27.5",
     "lucide-react": "^0.562.0",
     "mongodb": "^7.0.0",
     "next-auth": "^4.24.13",
-    "@jhits/plugin-core": "0.0.1",
     "@jhits/plugin-content": "0.0.3",
+    "@jhits/plugin-core": "0.0.1",
     "@jhits/plugin-images": "0.0.5"
   },
   "peerDependencies": {
@@ -35,20 +35,20 @@
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4",
+    "@tailwindcss/postcss": "^4.1.18",
     "@types/bcrypt": "^6.0.0",
-    "@types/node": "^20.19.27",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9",
-    "eslint-config-next": "16.1.1",
-    "next": "16.1.1",
-    "next-intl": "4.6.1",
+    "@types/node": "^25.0.9",
+    "@types/react": "^19.2.9",
+    "@types/react-dom": "^19.2.3",
+    "eslint": "^9.39.2",
+    "eslint-config-next": "16.1.4",
+    "next": "16.1.4",
+    "next-intl": "4.7.0",
     "next-themes": "0.4.6",
     "react": "19.2.3",
     "react-dom": "19.2.3",
-    "tailwindcss": "^4",
-    "typescript": "^5"
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3"
   },
   "files": [
     "src",

package/src/api/config-handler.ts

@@ -0,0 +1,76 @@
+/**
+ * Blog Config API Handler
+ * Handles saving/loading plugin configuration
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { getPluginConfig, savePluginConfig } from '../lib/config-storage';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface ConfigApiConfig {
+    getDb: () => Promise<{ db: any }>;
+    getUserId: (req: NextRequest) => Promise<string | null>;
+    siteId?: string;
+}
+
+/**
+ * GET /api/plugin-blog/config - Get plugin config
+ */
+export async function GET(req: NextRequest, config: ConfigApiConfig): Promise<NextResponse> {
+    try {
+        const siteId = config.siteId || 'default';
+        
+        const pluginConfig = await getPluginConfig(
+            config.getDb,
+            'plugin-blog',
+            siteId
+        );
+
+        if (!pluginConfig) {
+            return NextResponse.json({ config: null });
+        }
+
+        return NextResponse.json({ config: pluginConfig.config });
+    } catch (err: any) {
+        console.error('[BlogConfigAPI] GET error:', err);
+        return NextResponse.json(
+            { error: 'Failed to get config', detail: err.message },
+            { status: 500 }
+        );
+    }
+}
+
+/**
+ * POST /api/plugin-blog/config - Save plugin config
+ */
+export async function POST(req: NextRequest, config: ConfigApiConfig): Promise<NextResponse> {
+    try {
+        const userId = await config.getUserId(req);
+        if (!userId) {
+            return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+        }
+
+        const body = await req.json();
+        const siteId = body.siteId || config.siteId || 'default';
+        const pluginConfig = body.config;
+
+        if (!pluginConfig) {
+            return NextResponse.json({ error: 'Config is required' }, { status: 400 });
+        }
+
+        await savePluginConfig(
+            config.getDb,
+            'plugin-blog',
+            siteId,
+            pluginConfig
+        );
+
+        return NextResponse.json({ message: 'Config saved successfully' });
+    } catch (err: any) {
+        console.error('[BlogConfigAPI] POST error:', err);
+        return NextResponse.json(
+            { error: 'Failed to save config', detail: err.message },
+            { status: 500 }
+        );
+    }
+}

package/src/api/router.ts

@@ -11,6 +11,7 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { GET as BlogListHandler, POST as BlogCreateHandler } from './handler';
 import { GET as BlogGetHandler, PUT as BlogUpdateHandler, DELETE as BlogDeleteHandler, createBlogApiConfig } from './route';
+import { GET as ConfigGetHandler, POST as ConfigPostHandler } from './config-handler';
 
 export interface BlogApiRouterConfig {
     /** MongoDB client promise - should return { db: () => Database } */
@@ -19,6 +20,8 @@ export interface BlogApiRouterConfig {
     getUserId: (req: NextRequest) => Promise<string | null>;
     /** Collection name (default: 'blogs') */
     collectionName?: string;
+    /** Site ID for multi-site setups */
+    siteId?: string;
 }
 
 /**
@@ -81,6 +84,20 @@ export async function handleBlogApi(
                 return await checkTitleModule.GET(req, blogApiConfig);
             }
         }
+        // Route: /api/plugin-blog/config (get/save plugin config)
+        else if (route === 'config') {
+            const configApiConfig = {
+                getDb: config.getDb,
+                getUserId: config.getUserId,
+                siteId: config.siteId || 'default',
+            };
+            if (method === 'GET') {
+                return await ConfigGetHandler(req, configApiConfig);
+            }
+            if (method === 'POST') {
+                return await ConfigPostHandler(req, configApiConfig);
+            }
+        }
         // Route: /api/plugin-blog/[slug] (get/update/delete by slug)
         else {
             const slug = route;

package/src/index.tsx

@@ -320,6 +320,9 @@ export { blockRegistry } from './registry';
 // Export layout block registration
 export { registerLayoutBlocks } from './lib/layouts/registerLayoutBlocks';
 
+// Export config storage utilities
+export { getPluginConfig, savePluginConfig } from './lib/config-storage';
+
 // Export editor state management
 export { EditorProvider, useEditor } from './state/EditorContext';
 export type { EditorProviderProps, EditorState, EditorContextValue } from './state';

package/src/lib/config-storage.ts

@@ -0,0 +1,65 @@
+/**
+ * Plugin Configuration Storage
+ * Stores plugin-specific configuration in MongoDB
+ * Used by both client apps and dashboard
+ */
+
+export interface PluginConfigDocument {
+    _id?: string;
+    pluginId: string;
+    siteId: string;
+    config: {
+        customBlocks?: unknown[];
+        darkMode?: boolean;
+        backgroundColors?: {
+            light: string;
+            dark?: string;
+        };
+        [key: string]: unknown;
+    };
+    updatedAt: Date;
+}
+
+const COLLECTION_NAME = 'pluginConfigs';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export async function getPluginConfigCollection(getDb: () => Promise<{ db: any }>) {
+    const { db } = await getDb();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return (db as any).collection(COLLECTION_NAME);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export async function getPluginConfig(
+    getDb: () => Promise<{ db: any }>,
+    pluginId: string,
+    siteId: string = 'default'
+): Promise<PluginConfigDocument | null> {
+    const collection = await getPluginConfigCollection(getDb);
+    return collection.findOne({ pluginId, siteId }) as Promise<PluginConfigDocument | null>;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export async function savePluginConfig(
+    getDb: () => Promise<{ db: any }>,
+    pluginId: string,
+    siteId: string,
+    config: PluginConfigDocument['config']
+): Promise<void> {
+    const collection = await getPluginConfigCollection(getDb);
+    
+    await collection.updateOne(
+        { pluginId, siteId },
+        {
+            $set: {
+                config,
+                updatedAt: new Date()
+            },
+            $setOnInsert: {
+                pluginId,
+                siteId
+            }
+        },
+        { upsert: true }
+    );
+}

package/src/lib/layouts/blocks/ColumnsBlock.tsx

@@ -6,6 +6,7 @@
 'use client';
 
 import React from 'react';
+import { Plus, Trash2 } from 'lucide-react';
 import { BlockEditProps, BlockPreviewProps } from '../../../types/block';
 import { LayoutContainer } from '../../../views/CanvasEditor/LayoutContainer';
 import { COLUMN_LAYOUTS, ColumnLayout } from '../index';
@@ -30,9 +31,45 @@ export const ColumnsEdit: React.FC<BlockEditProps & {
     onChildBlockDelete,
     onChildBlockMove,
 }) => {
-        const layout = (block.data.layout as ColumnLayout) || '50-50';
-        const layoutConfig = COLUMN_LAYOUTS[layout];
-        const numColumns = layoutConfig.widths.length;
+        // Support both old layout-based system and new dynamic column count
+        const columnCount = block.data.columnCount as number | undefined;
+        const layout: ColumnLayout | undefined = block.data.layout as ColumnLayout | undefined;
+        
+        // Determine number of columns: use columnCount if set, otherwise derive from layout
+        let numColumns: number;
+        let gridClass: string;
+        let columnWidths: number[];
+        
+        // Grid class mapping for Tailwind (must be explicit for dynamic classes)
+        const gridClassMap: Record<number, string> = {
+            1: 'grid-cols-1',
+            2: 'grid-cols-2',
+            3: 'grid-cols-3',
+            4: 'grid-cols-4',
+            5: 'grid-cols-5',
+            6: 'grid-cols-6',
+        };
+        
+        if (columnCount !== undefined && columnCount > 0) {
+            // Dynamic column system
+            numColumns = columnCount;
+            // Create equal-width columns
+            const widthPercent = Math.floor(100 / numColumns);
+            columnWidths = Array(numColumns).fill(widthPercent);
+            // Use explicit grid class from map, fallback to inline style if needed
+            gridClass = gridClassMap[numColumns] || `grid-cols-${numColumns}`;
+        } else if (layout && COLUMN_LAYOUTS[layout]) {
+            // Legacy layout-based system
+            const layoutConfig = COLUMN_LAYOUTS[layout];
+            numColumns = layoutConfig.widths.length;
+            gridClass = layoutConfig.grid;
+            columnWidths = layoutConfig.widths;
+        } else {
+            // Default to 2 columns
+            numColumns = 2;
+            gridClass = 'grid-cols-2';
+            columnWidths = [50, 50];
+        }
 
         // Split child blocks into columns based on columnIndex in meta, or round-robin
         const columns: Block[][] = Array.from({ length: numColumns }, () => []);
@@ -47,14 +84,72 @@ export const ColumnsEdit: React.FC<BlockEditProps & {
             }
         });
 
+        // Get column widths from data or use equal widths
+        const storedWidths = block.data.columnWidths as number[] | undefined;
+        const currentWidths = storedWidths && storedWidths.length === numColumns 
+            ? storedWidths 
+            : columnWidths; // Use calculated equal widths if not set
+        
+        // Add column handler
+        const addColumn = () => {
+            if (numColumns >= 4) return; // Max 4 columns
+            const newColumnCount = numColumns + 1;
+            // Calculate new equal widths
+            const newWidthPercent = Math.floor(100 / newColumnCount);
+            const newWidths = Array(newColumnCount).fill(newWidthPercent);
+            onUpdate({
+                ...block.data,
+                columnCount: newColumnCount,
+                columnWidths: newWidths,
+                // Clear layout if using dynamic columns
+                layout: undefined,
+            });
+        };
+
+        // Delete column handler
+        const deleteColumn = (colIndex: number) => {
+            if (numColumns <= 1) return; // Don't allow deleting the last column
+            
+            // Move blocks from deleted column to the last column (or previous column if deleting last)
+            const blocksToMove = columns[colIndex] || [];
+            const targetColumnIndex = colIndex === numColumns - 1 ? numColumns - 2 : numColumns - 1;
+            const targetColumn = columns[targetColumnIndex] || [];
+            
+            // Move each block to the target column using moveBlock (which will update meta.columnIndex)
+            blocksToMove.forEach((blockToMove, blockIndex) => {
+                const newIndex = targetColumn.length + blockIndex;
+                onChildBlockMove(blockToMove.id, newIndex, `${block.id}-col-${targetColumnIndex}`);
+            });
+            
+            // Update column count and widths after moving blocks
+            const newColumnCount = numColumns - 1;
+            // Remove the deleted column's width and redistribute
+            const newWidths = currentWidths.filter((_, i) => i !== colIndex);
+            // Normalize to ensure they sum to 100
+            const total = newWidths.reduce((sum, w) => sum + w, 0);
+            const normalizedWidths = newWidths.map(w => Math.round((w / total) * 100));
+            
+            onUpdate({
+                ...block.data,
+                columnCount: newColumnCount,
+                columnWidths: normalizedWidths,
+                layout: undefined,
+            });
+        };
+
         return (
-            <div className="rounded-xl bg-white">
+            <div className="rounded-xl bg-white relative">
                 {/* Column Grid */}
-                <div className={`grid ${layoutConfig.grid} gap-8 p-6`}>
+                <div 
+                    className="grid gap-8 p-6"
+                    style={{
+                        gridTemplateColumns: currentWidths.map(w => `${w}%`).join(' '),
+                    }}
+                >
                     {Array.from({ length: numColumns }).map((_, colIndex) => (
                         <div
                             key={colIndex}
-                            className={`min-h-[200px] rounded-xl border border-dashed transition-all ${isSelected
+                            className={`group/col min-h-[200px] rounded-xl border border-dashed transition-all relative ${isSelected
                                 ? 'border-primary/20'
                                 : 'border-gray-200/50'
                                 }`}
@@ -64,9 +159,25 @@ export const ColumnsEdit: React.FC<BlockEditProps & {
                                     <span className="text-[10px] font-black uppercase tracking-widest text-gray-400">
                                         Column {colIndex + 1}
                                     </span>
-                                    <span className="text-[9px] text-gray-500">
-                                        {layoutConfig.widths[colIndex]}%
-                                    </span>
+                                    <div className="flex items-center gap-2">
+                                        <span className="text-[9px] text-gray-500">
+                                            {currentWidths[colIndex]}%
+                                        </span>
+                                        {/* Delete Column Button - Similar to table, appears on column hover */}
+                                        {numColumns > 1 && (
+                                            <button
+                                                onClick={(e) => {
+                                                    e.stopPropagation();
+                                                    deleteColumn(colIndex);
+                                                }}
+                                                className="opacity-0 group-hover/col:opacity-100 p-1 text-neutral-400 hover:text-red-500 transition-all rounded"
+                                                title="Delete Column"
+                                                aria-label="Delete Column"
+                                            >
+                                                <Trash2 size={10} />
+                                            </button>
+                                        )}
+                                    </div>
                                 </div>
 
                                 <LayoutContainer
@@ -82,6 +193,17 @@ export const ColumnsEdit: React.FC<BlockEditProps & {
                         </div>
                     ))}
                 </div>
+                
+                {/* Add Column Button - Similar to table, pinned top right */}
+                {numColumns < 4 && (
+                    <button
+                        onClick={addColumn}
+                        className="absolute top-0 right-0 h-8 w-8 flex items-center justify-center bg-white border-l border-b border-gray-200 text-primary hover:bg-primary hover:text-white transition-all z-10 rounded-br-xl"
+                        title="Add Column"
+                    >
+                        <Plus size={16} />
+                    </button>
+                )}
             </div>
         );
     };
@@ -93,9 +215,46 @@ export const ColumnsPreview: React.FC<BlockPreviewProps & {
     childBlocks?: Block[];
     renderChild?: (block: Block) => React.ReactNode;
 }> = ({ block, childBlocks = [], renderChild, context }) => {
-    const layout = (block.data.layout as ColumnLayout) || '50-50';
-    const layoutConfig = COLUMN_LAYOUTS[layout];
-    const numColumns = layoutConfig.widths.length;
+    // Support both old layout-based system and new dynamic column count
+    const columnCount = block.data.columnCount as number | undefined;
+    const layout: ColumnLayout | undefined = block.data.layout as ColumnLayout | undefined;
+    
+    // Determine number of columns: use columnCount if set, otherwise derive from layout
+    let numColumns: number;
+    let gridClass: string;
+    
+    // Grid class mapping for Tailwind (must be explicit for dynamic classes)
+    const gridClassMap: Record<number, string> = {
+        1: 'grid-cols-1',
+        2: 'grid-cols-2',
+        3: 'grid-cols-3',
+        4: 'grid-cols-4',
+        5: 'grid-cols-5',
+        6: 'grid-cols-6',
+    };
+    
+    // Get column widths
+    const storedWidths = block.data.columnWidths as number[] | undefined;
+    
+    if (columnCount !== undefined && columnCount > 0) {
+        // Dynamic column system
+        numColumns = columnCount;
+        gridClass = gridClassMap[numColumns] || `grid-cols-${numColumns}`;
+    } else if (layout && COLUMN_LAYOUTS[layout]) {
+        // Legacy layout-based system
+        const layoutConfig = COLUMN_LAYOUTS[layout];
+        numColumns = layoutConfig.widths.length;
+        gridClass = layoutConfig.grid;
+    } else {
+        // Default to 2 columns
+        numColumns = 2;
+        gridClass = 'grid-cols-2';
+    }
+    
+    // Use stored widths if available, otherwise use equal widths
+    const columnWidths = storedWidths && storedWidths.length === numColumns
+        ? storedWidths
+        : Array(numColumns).fill(Math.floor(100 / numColumns));
 
     // If childBlocks are provided, use them; otherwise get from block.children
     const children = childBlocks.length > 0
@@ -118,7 +277,12 @@ export const ColumnsPreview: React.FC<BlockPreviewProps & {
     });
 
     return (
-        <div className={`grid ${layoutConfig.grid} gap-8 my-8`}>
+        <div 
+            className="grid gap-8 my-8"
+            style={{
+                gridTemplateColumns: columnWidths.map(w => `${w}%`).join(' '),
+            }}
+        >
             {Array.from({ length: numColumns }).map((_, colIndex) => (
                 <div key={colIndex} className="min-h-[100px]">
                     {columns[colIndex]?.map((childBlock) => (

package/src/lib/layouts/blocks/ColumnsBlock.tsx.tmp

@@ -0,0 +1,81 @@
+/**
+ * Columns Block
+ * Flex/grid container with configurable column layouts
+ */
+
+'use client';
+
+import React from 'react';
+import { Plus, Trash2 } from 'lucide-react';
+import { BlockEditProps, BlockPreviewProps } from '../../../types/block';
+import { LayoutContainer } from '../../../views/CanvasEditor/LayoutContainer';
+import { COLUMN_LAYOUTS, ColumnLayout } from '../index';
+import { Block } from '../../../types/block';
+
+/**
+ * Columns Block Edit Component
+ */
+export const ColumnsEdit: React.FC<BlockEditProps & {
+    childBlocks: Block[];
+    onChildBlockAdd: (type: string, index: number, containerId: string) => void;
+    onChildBlockDelete: (blockId: string) => void;
+    onChildBlockMove: (blockId: string, newIndex: number) => void;
+}> = ({
+    block,
+    childBlocks,
+    onChildBlockAdd,
+    onChildBlockDelete,
+    onChildBlockMove,
+}) => {
+        // Support both old layout-based system and new dynamic column count
+        const columnCount = block.data.columnCount as number | undefined;
+        const layout: ColumnLayout | undefined = block.data.layout as ColumnLayout | undefined;
+        
+        // Determine number of columns: use columnCount if set, otherwise derive from layout
+        let numColumns: number;
+        let gridClass: string;
+        let columnWidths: number[];
+        
+        // Grid class mapping for Tailwind (must be explicit for dynamic classes)
+        const gridClassMap: Record<number, string> = {
+            1: 'grid-cols-1',
+            2: 'grid-cols-2',
+            3: 'grid-cols-3',
+            4: 'grid-cols-4',
+            5: 'grid-cols-5',
+            6: 'grid-cols-6',
+        };
+        
+        if (columnCount !== undefined && columnCount > 0) {
+            // Dynamic column system
+            numColumns = columnCount;
+            // Create equal-width columns
+            const widthPercent = Math.floor(100 / numColumns);
+            columnWidths = Array(numColumns).fill(widthPercent);
+            // Use explicit grid class from map, fallback to inline style if needed
+            gridClass = gridClassMap[numColumns] || \`grid-cols-\${numColumns}\`;
+        } else if (layout && COLUMN_LAYOUTS[layout]) {
+            // Legacy layout-based system
+            const layoutConfig = COLUMN_LAYOUTS[layout];
+            numColumns = layoutConfig.widths.length;
+            gridClass = layoutConfig.grid;
+            columnWidths = layoutConfig.widths;
+        } else {
+            // Default to 2 columns
+            numColumns = 2;
+            gridClass = 'grid-cols-2';
+            columnWidths = [50, 50];
+        }
+
+        // Split child blocks into columns based on columnIndex in meta, or round-robin
+        const columns: Block[][] = Array.from({ length: numColumns }, () => []);
+        childBlocks.forEach((childBlock) => {
+            const columnIndex = childBlock.meta?.columnIndex;
+            if (typeof columnIndex === 'number' && columnIndex >= 0 && columnIndex < numColumns) {
+                columns[columnIndex].push(childBlock);
+            } else {
+                // Fallback to round-robin if no columnIndex specified
+                const index = childBlocks.indexOf(childBlock);
+                columns[index % numColumns].push(childBlock);
+            }
+        });

package/src/lib/layouts/registerLayoutBlocks.ts

@@ -42,11 +42,16 @@ export function registerLayoutBlocks() {
         description: 'Flex/grid container with configurable column layouts (50/50, 33/66, etc.)',
         icon: Columns,
         defaultData: {
-            layout: '50-50',
+            columnCount: 2, // Start with 2 columns, can be dynamically added/removed
+            columnWidths: [50, 50], // Equal width columns by default
         },
         category: 'layout',
         isContainer: true,
         validate: (data) => {
+            // Support both new dynamic system (columnCount) and legacy layout system
+            if (data.columnCount !== undefined) {
+                return typeof data.columnCount === 'number' && data.columnCount > 0 && data.columnCount <= 6;
+            }
             return ['50-50', '33-66', '66-33', '25-25-25-25', '25-75', '75-25'].includes(data.layout as string);
         },
         components: {

package/src/types/index.ts

@@ -13,3 +13,5 @@ export type {
     ClientBlockDefinition,
 } from './block';
 
+
+export type { BlockRegistry } from './block';

package/src/views/CanvasEditor/BlockWrapper.tsx

@@ -365,21 +365,85 @@ export function BlockWrapper({
                             </div>
                         )} */}
 
-                        {block.type === 'columns' && (
-                            <select
-                                value={(block.data.layout as string) || '50-50'}
-                                onChange={(e) => onUpdate({ layout: e.target.value })}
-                                onClick={(e) => e.stopPropagation()}
-                                className="text-[10px] font-bold bg-white dark:bg-neutral-900/50 border border-neutral-300 dark:border-neutral-700 px-2 py-1 rounded outline-none focus:border-primary transition-all dark:text-neutral-100 ml-4"
-                            >
-                                <option value="50-50">50% / 50%</option>
-                                <option value="33-66">33% / 66%</option>
-                                <option value="66-33">66% / 33%</option>
-                                <option value="25-25-25-25">25% / 25% / 25% / 25%</option>
-                                <option value="25-75">25% / 75%</option>
-                                <option value="75-25">75% / 25%</option>
-                            </select>
-                        )}
+                        {block.type === 'columns' && (() => {
+                            const columnCount = block.data.columnCount as number | undefined;
+                            const layout = block.data.layout as string | undefined;
+                            
+                            // Determine number of columns
+                            let numColumns: number;
+                            if (columnCount !== undefined && columnCount > 0) {
+                                numColumns = columnCount;
+                            } else if (layout) {
+                                // Legacy layout system
+                                const layoutMap: Record<string, number> = {
+                                    '50-50': 2,
+                                    '33-66': 2,
+                                    '66-33': 2,
+                                    '25-25-25-25': 4,
+                                    '25-75': 2,
+                                    '75-25': 2,
+                                };
+                                numColumns = layoutMap[layout] || 2;
+                            } else {
+                                numColumns = 2;
+                            }
+                            
+                            // Get column widths
+                            const storedWidths = block.data.columnWidths as number[] | undefined;
+                            const columnWidths = storedWidths && storedWidths.length === numColumns
+                                ? storedWidths
+                                : Array(numColumns).fill(Math.floor(100 / numColumns));
+                            
+                            return (
+                                <div className="flex items-center gap-1.5 ml-4 flex-1 min-w-0">
+                                    {Array.from({ length: numColumns }).map((_, colIndex) => (
+                                        <div key={colIndex} className="flex items-center gap-1">
+                                            <input
+                                                type="number"
+                                                min="10"
+                                                max="90"
+                                                step="1"
+                                                value={columnWidths[colIndex] || 50}
+                                                onChange={(e) => {
+                                                    const newWidth = parseInt(e.target.value) || 50;
+                                                    const newWidths = [...columnWidths];
+                                                    newWidths[colIndex] = Math.max(10, Math.min(90, newWidth));
+                                                    
+                                                    // Normalize remaining columns to sum to 100
+                                                    const remainingTotal = newWidths.reduce((sum, w, i) => i === colIndex ? sum : sum + w, 0);
+                                                    const remainingTarget = 100 - newWidths[colIndex];
+                                                    if (remainingTotal > 0 && remainingTarget > 0) {
+                                                        const scale = remainingTarget / remainingTotal;
+                                                        newWidths.forEach((w, i) => {
+                                                            if (i !== colIndex) {
+                                                                newWidths[i] = Math.round(w * scale);
+                                                            }
+                                                        });
+                                                    }
+                                                    
+                                                    // Ensure sum is exactly 100
+                                                    const finalTotal = newWidths.reduce((sum, w) => sum + w, 0);
+                                                    if (finalTotal !== 100) {
+                                                        const diff = 100 - finalTotal;
+                                                        const lastIndex = newWidths.length - 1;
+                                                        newWidths[lastIndex] = Math.max(10, newWidths[lastIndex] + diff);
+                                                    }
+                                                    
+                                                    onUpdate({
+                                                        ...block.data,
+                                                        columnWidths: newWidths,
+                                                        layout: undefined, // Clear layout when using custom widths
+                                                    });
+                                                }}
+                                                onClick={(e) => e.stopPropagation()}
+                                                className="w-12 text-[10px] font-bold bg-white dark:bg-neutral-900/50 border border-neutral-300 dark:border-neutral-700 px-1.5 py-0.5 rounded outline-none focus:border-primary transition-all dark:text-neutral-100 text-center"
+                                            />
+                                            <span className="text-[9px] text-neutral-400 dark:text-neutral-500">%</span>
+                                        </div>
+                                    ))}
+                                </div>
+                            );
+                        })()}
                     </div>
                     <div className="relative shrink-0 z-20" ref={settingsMenuRef}>
                         <button

package/src/views/CanvasEditor/CanvasEditorView.tsx

@@ -107,7 +107,10 @@ export function CanvasEditorView({ postId, darkMode, backgroundColors: propsBack
         state,
         isDirty: state.isDirty,
         onSave: async () => {
-            await handleSave(false); // Auto-save as draft
+            // Preserve current status: if already published, keep it published
+            // Otherwise save as draft
+            const shouldPublish = state.status === 'published';
+            await handleSave(shouldPublish);
         },
         heroBlock,
         postId: state.postId,
@@ -152,12 +155,15 @@ export function CanvasEditorView({ postId, darkMode, backgroundColors: propsBack
             // Status should already be set in EditorHeader, but verify and log
             console.log('[CanvasEditorView] onSave called with publish:', publish, 'current status:', state.status);
 
-            // Double-check status is set correctly before saving
+            // Only change status if explicitly requested (publish is true or false)
+            // If publish is undefined, preserve the current status (used for autosave)
             if (publish === true && state.status !== 'published') {
                 console.warn('[CanvasEditorView] Status mismatch! Setting to published...');
                 dispatch({ type: 'SET_STATUS', payload: 'published' });
                 await new Promise(resolve => setTimeout(resolve, 100));
-            } else if (publish === false && state.status !== 'draft') {
+            } else if (publish === false && state.status !== 'draft' && state.status !== 'published') {
+                // Only set to draft if not already published (preserve published status)
+                // This prevents autosave from changing published posts back to draft
                 console.warn('[CanvasEditorView] Status mismatch! Setting to draft...');
                 dispatch({ type: 'SET_STATUS', payload: 'draft' });
                 await new Promise(resolve => setTimeout(resolve, 100));

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

@@ -76,19 +76,46 @@ export function FeaturedMediaSection({
     const positionX = featuredImage?.positionX ?? 0;
     const positionY = featuredImage?.positionY ?? 0;
 
-    // Handle image selection - just update blog metadata with semantic ID
+    // 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
-    // GlobalImageEditor will handle saving transform data when editing
-    // NO API CALLS HERE - plugin-images handles everything
-    const handleImageChange = useCallback((image: ImageMetadata | null) => {
+    const handleImageChange = useCallback(async (image: ImageMetadata | null) => {
         if (image) {
-            // Extract filename from image URL for reference (not saved to API)
+            // Extract filename from image URL for reference
             const isUploadedImage = image.url.startsWith('/api/uploads/');
-            const filename = isUploadedImage ? image.filename : image.url.split('/').pop()?.split('?')[0] || image.id;
+            let filename = image.filename;
             
-            // Save initial mapping to plugin-images API via GlobalImageEditor when image is first edited
-            // For now, just update blog metadata with semantic ID
-            // The Image component will handle resolution, and GlobalImageEditor will save the mapping when user edits
+            if (!filename && isUploadedImage) {
+                // Extract filename from URL if not provided
+                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
+                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,
+                };
+                
+                await fetch('/api/plugin-images/resolve', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(saveData),
+                });
+            } catch (error) {
+                console.error('[FeaturedMediaSection] Failed to create initial mapping:', error);
+                // Continue anyway - the mapping might be created later
+            }
+            
+            // Update blog metadata with semantic ID
             onUpdate({
                 id: imageId,
                 alt: image.alt || image.filename,
@@ -250,7 +277,7 @@ export function FeaturedMediaSection({
                     setShowImagePicker(false);
                     setOpenEditorDirectly(false); // Reset flag when closing
                 }}>
-                    <div className="bg-dashboard-card rounded-2xl w-full max-w-2xl mx-4 p-6 shadow-2xl max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
+                    <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()}>
                         <div className="flex items-center justify-between mb-6">
                             <h3 className="text-lg font-bold text-neutral-900 dark:text-neutral-100">
                                 {openEditorDirectly ? 'Edit Featured Image' : 'Select Featured Image'}
@@ -260,13 +287,14 @@ export function FeaturedMediaSection({
                                     setShowImagePicker(false);
                                     setOpenEditorDirectly(false); // Reset flag when closing
                                 }}
-                                className="p-2 hover:bg-dashboard-bg rounded-lg transition-colors"
+                                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"
                             >
-                                <X size={20} />
+                                <X size={20} className="transition-colors" />
                             </button>
                         </div>
                         <ImagePicker
-                            value={imageId}
+                            value={featuredImage?.id ? imageId : undefined}
                             onChange={handleImageChange}
                             brightness={brightness}
                             blur={blur}