@jhits/plugin-blog 0.0.15 → 0.0.16

package/src/lib/blocks/BlockRenderer.tsx

@@ -0,0 +1,141 @@
+/**
+ * Block Renderer
+ * Library component for rendering blocks (decoupled from editor)
+ * This is the "headless" rendering layer
+ * 
+ * Multi-Tenant: Uses Preview components from client-provided blocks
+ */
+
+'use client';
+
+import React from 'react';
+import { Block, BlockPreviewProps } from '../../types/block';
+import { blockRegistry } from '../../registry/BlockRegistry';
+import { getChildBlocks } from '../utils/blockHelpers';
+
+/**
+ * Block Renderer Props
+ */
+export interface BlockRendererProps {
+    /** Block to render */
+    block: Block;
+    
+    /** Custom renderers for specific block types (optional override) */
+    customRenderers?: Map<string, React.ComponentType<BlockPreviewProps>>;
+    
+    /** Additional context for rendering */
+    context?: {
+        siteId?: string;
+        locale?: string;
+        [key: string]: unknown;
+    };
+}
+
+/**
+ * Block Renderer Component
+ * Renders a single block using its Preview component from the registry
+ * 
+ * This is the headless rendering layer - it uses the Preview component
+ * provided by the client application, allowing each client to have
+ * their own design system in the frontend while the editor uses
+ * the dashboard's design system.
+ */
+export function BlockRenderer({ 
+    block, 
+    customRenderers,
+    context = {}
+}: BlockRendererProps) {
+    // Check for custom renderer override first
+    if (customRenderers?.has(block.type)) {
+        const CustomRenderer = customRenderers.get(block.type)!;
+        return <CustomRenderer block={block} context={context} />;
+    }
+
+    // Get block definition from registry
+    const definition = blockRegistry.get(block.type);
+    if (!definition) {
+        console.warn(`Block type "${block.type}" not found in registry. Available types:`, 
+            blockRegistry.getAll().map(b => b.type).join(', '));
+        return (
+            <div className="p-4 border border-red-300 bg-red-50 rounded">
+                <p className="text-red-600">Unknown block type: {block.type}</p>
+                <p className="text-xs text-red-500 mt-1">
+                    Make sure this block type is registered via customBlocks prop
+                </p>
+            </div>
+        );
+    }
+
+    // Use the Preview component from the block definition
+    // This is provided by the client application
+    const PreviewComponent = definition.components.Preview;
+    
+    // Check if this is a container block with children
+    const isContainer = definition.isContainer === true;
+    const childBlocks = isContainer && block.children && Array.isArray(block.children) && block.children.length > 0
+        ? (typeof block.children[0] === 'object' 
+            ? block.children as Block[]
+            : [])
+        : [];
+    
+    // If container block, pass child blocks and render function
+    if (isContainer) {
+        return (
+            <PreviewComponent 
+                block={block} 
+                context={context}
+                childBlocks={childBlocks}
+                renderChild={(childBlock: Block) => (
+                    <BlockRenderer
+                        block={childBlock}
+                        customRenderers={customRenderers}
+                        context={context}
+                    />
+                )}
+            />
+        );
+    }
+    
+    return <PreviewComponent block={block} context={context} />;
+}
+
+/**
+ * Blocks Renderer
+ * Renders an array of blocks
+ */
+export interface BlocksRendererProps {
+    /** Array of blocks to render */
+    blocks: Block[];
+    
+    /** Custom renderers for specific block types */
+    customRenderers?: Map<string, React.ComponentType<{ block: Block }>>;
+    
+    /** Additional props to pass to renderers */
+    renderProps?: Record<string, unknown>;
+    
+    /** Wrapper component for the blocks */
+    wrapper?: React.ComponentType<{ children: React.ReactNode }>;
+}
+
+export function BlocksRenderer({
+    blocks,
+    customRenderers,
+    renderProps,
+    wrapper: Wrapper,
+}: BlocksRendererProps) {
+    const content = blocks.map((block, index) => (
+        <BlockRenderer
+            key={block.id || index}
+            block={block}
+            customRenderers={customRenderers}
+            context={renderProps}
+        />
+    ));
+
+    if (Wrapper) {
+        return <Wrapper>{content}</Wrapper>;
+    }
+
+    return <>{content}</>;
+}
+

package/src/lib/blocks/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Block library exports
+ */
+
+export * from './BlockRenderer';
+

package/src/lib/config-storage.d.ts

@@ -0,0 +1,30 @@
+/**
+ * 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;
+}
+export declare function getPluginConfigCollection(getDb: () => Promise<{
+    db: any;
+}>): Promise<any>;
+export declare function getPluginConfig(getDb: () => Promise<{
+    db: any;
+}>, pluginId: string, siteId?: string): Promise<PluginConfigDocument | null>;
+export declare function savePluginConfig(getDb: () => Promise<{
+    db: any;
+}>, pluginId: string, siteId: string, config: PluginConfigDocument['config']): Promise<void>;
+//# sourceMappingURL=config-storage.d.ts.map

package/src/lib/config-storage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-storage.d.ts","sourceRoot":"","sources":["config-storage.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,oBAAoB;IACjC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE;QACJ,YAAY,CAAC,EAAE,OAAO,EAAE,CAAC;QACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,gBAAgB,CAAC,EAAE;YACf,KAAK,EAAE,MAAM,CAAC;YACd,IAAI,CAAC,EAAE,MAAM,CAAC;SACjB,CAAC;QACF,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KAC1B,CAAC;IACF,SAAS,EAAE,IAAI,CAAC;CACnB;AAKD,wBAAsB,yBAAyB,CAAC,KAAK,EAAE,MAAM,OAAO,CAAC;IAAE,EAAE,EAAE,GAAG,CAAA;CAAE,CAAC,gBAIhF;AAGD,wBAAsB,eAAe,CACjC,KAAK,EAAE,MAAM,OAAO,CAAC;IAAE,EAAE,EAAE,GAAG,CAAA;CAAE,CAAC,EACjC,QAAQ,EAAE,MAAM,EAChB,MAAM,GAAE,MAAkB,GAC3B,OAAO,CAAC,oBAAoB,GAAG,IAAI,CAAC,CAGtC;AAGD,wBAAsB,gBAAgB,CAClC,KAAK,EAAE,MAAM,OAAO,CAAC;IAAE,EAAE,EAAE,GAAG,CAAA;CAAE,CAAC,EACjC,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,oBAAoB,CAAC,QAAQ,CAAC,GACvC,OAAO,CAAC,IAAI,CAAC,CAiBf"}

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/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Library exports
+ * All decoupled, reusable components and utilities
+ */
+
+export * from './blocks';
+export * from './utils';
+export * from './migration';
+

package/src/lib/layouts/blocks/ColumnsBlock.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Columns Block
+ * Flex/grid container with configurable column layouts
+ */
+import React from 'react';
+import { BlockEditProps, BlockPreviewProps } from '../../../types/block';
+import { Block } from '../../../types/block';
+/**
+ * Columns Block Edit Component
+ */
+export declare const ColumnsEdit: React.FC<BlockEditProps & {
+    childBlocks: Block[];
+    onChildBlockAdd: (type: string, index: number, containerId: string) => void;
+    onChildBlockUpdate: (id: string, data: Partial<Block['data']>, containerId: string) => void;
+    onChildBlockDelete: (id: string, containerId: string) => void;
+    onChildBlockMove: (id: string, newIndex: number, containerId: string) => void;
+}>;
+/**
+ * Columns Block Preview Component
+ */
+export declare const ColumnsPreview: React.FC<BlockPreviewProps & {
+    childBlocks?: Block[];
+    renderChild?: (block: Block) => React.ReactNode;
+}>;
+//# sourceMappingURL=ColumnsBlock.d.ts.map

package/src/lib/layouts/blocks/ColumnsBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnsBlock.d.ts","sourceRoot":"","sources":["ColumnsBlock.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAGzE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE7C;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,GAAG;IAChD,WAAW,EAAE,KAAK,EAAE,CAAC;IACrB,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5E,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5F,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9D,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACjF,CAyLI,CAAC;AAEN;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,GAAG;IACtD,WAAW,CAAC,EAAE,KAAK,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,KAAK,CAAC,SAAS,CAAC;CACnD,CAgFA,CAAC"}

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

@@ -0,0 +1,298 @@
+/**
+ * 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;
+    onChildBlockUpdate: (id: string, data: Partial<Block['data']>, containerId: string) => void;
+    onChildBlockDelete: (id: string, containerId: string) => void;
+    onChildBlockMove: (id: string, newIndex: number, containerId: string) => void;
+}> = ({
+    block,
+    onUpdate,
+    isSelected,
+    childBlocks = [],
+    onChildBlockAdd,
+    onChildBlockUpdate,
+    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);
+            }
+        });
+
+        // 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 relative">
+                {/* Column Grid */}
+                <div 
+                    className="grid gap-8 p-6"
+                    style={{
+                        gridTemplateColumns: currentWidths.map(w => `${w}%`).join(' '),
+                    }}
+                >
+                    {Array.from({ length: numColumns }).map((_, colIndex) => (
+                        <div
+                            key={colIndex}
+                            className={`group/col min-h-[200px] rounded-xl border border-dashed transition-all relative ${isSelected
+                                ? 'border-primary/20'
+                                : 'border-gray-200/50'
+                                }`}
+                        >
+                            <div className="p-4">
+                                <div className="mb-3 flex items-center justify-between">
+                                    <span className="text-[10px] font-black uppercase tracking-widest text-gray-400">
+                                        Column {colIndex + 1}
+                                    </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
+                                    blocks={columns[colIndex] || []}
+                                    containerId={`${block.id}-col-${colIndex}`}
+                                    onBlockAdd={onChildBlockAdd}
+                                    onBlockUpdate={onChildBlockUpdate}
+                                    onBlockDelete={onChildBlockDelete}
+                                    onBlockMove={onChildBlockMove}
+                                    emptyLabel={`Drop blocks in column ${colIndex + 1}`}
+                                />
+                            </div>
+                        </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>
+        );
+    };
+
+/**
+ * Columns Block Preview Component
+ */
+export const ColumnsPreview: React.FC<BlockPreviewProps & {
+    childBlocks?: Block[];
+    renderChild?: (block: Block) => React.ReactNode;
+}> = ({ block, childBlocks = [], renderChild, context }) => {
+    // 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
+        ? childBlocks
+        : (block.children && Array.isArray(block.children) && typeof block.children[0] === 'object'
+            ? block.children as Block[]
+            : []);
+
+    // Split child blocks into columns based on columnIndex in meta, or round-robin
+    const columns: Block[][] = Array.from({ length: numColumns }, () => []);
+    children.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 = children.indexOf(childBlock);
+            columns[index % numColumns].push(childBlock);
+        }
+    });
+
+    return (
+        <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) => (
+                        <React.Fragment key={childBlock.id}>
+                            {renderChild ? renderChild(childBlock) : null}
+                        </React.Fragment>
+                    ))}
+                </div>
+            ))}
+        </div>
+    );
+};
+

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);
+            }
+        });