@jhits/plugin-blog 0.0.7 → 0.0.9

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.js

@@ -0,0 +1,182 @@
+/**
+ * Columns Block
+ * Flex/grid container with configurable column layouts
+ */
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Plus, Trash2 } from 'lucide-react';
+import { LayoutContainer } from '../../../views/CanvasEditor/LayoutContainer';
+import { COLUMN_LAYOUTS } from '../index';
+/**
+ * Columns Block Edit Component
+ */
+export const ColumnsEdit = ({ block, onUpdate, isSelected, childBlocks = [], onChildBlockAdd, onChildBlockUpdate, onChildBlockDelete, onChildBlockMove, }) => {
+    // Support both old layout-based system and new dynamic column count
+    const columnCount = block.data.columnCount;
+    const layout = block.data.layout;
+    // Determine number of columns: use columnCount if set, otherwise derive from layout
+    let numColumns;
+    let gridClass;
+    let columnWidths;
+    // Grid class mapping for Tailwind (must be explicit for dynamic classes)
+    const gridClassMap = {
+        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 = Array.from({ length: numColumns }, () => []);
+    childBlocks.forEach((childBlock) => {
+        var _a;
+        const columnIndex = (_a = childBlock.meta) === null || _a === void 0 ? void 0 : _a.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;
+    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(Object.assign(Object.assign({}, block.data), { columnCount: newColumnCount, columnWidths: newWidths, 
+            // Clear layout if using dynamic columns
+            layout: undefined }));
+    };
+    // Delete column handler
+    const deleteColumn = (colIndex) => {
+        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(Object.assign(Object.assign({}, block.data), { columnCount: newColumnCount, columnWidths: normalizedWidths, layout: undefined }));
+    };
+    return (_jsxs("div", { className: "rounded-xl bg-white relative", children: [_jsx("div", { className: "grid gap-8 p-6", style: {
+                    gridTemplateColumns: currentWidths.map(w => `${w}%`).join(' '),
+                }, children: Array.from({ length: numColumns }).map((_, colIndex) => (_jsx("div", { className: `group/col min-h-[200px] rounded-xl border border-dashed transition-all relative ${isSelected
+                        ? 'border-primary/20'
+                        : 'border-gray-200/50'}`, children: _jsxs("div", { className: "p-4", children: [_jsxs("div", { className: "mb-3 flex items-center justify-between", children: [_jsxs("span", { className: "text-[10px] font-black uppercase tracking-widest text-gray-400", children: ["Column ", colIndex + 1] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-[9px] text-gray-500", children: [currentWidths[colIndex], "%"] }), numColumns > 1 && (_jsx("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", children: _jsx(Trash2, { size: 10 }) }))] })] }), _jsx(LayoutContainer, { blocks: columns[colIndex] || [], containerId: `${block.id}-col-${colIndex}`, onBlockAdd: onChildBlockAdd, onBlockUpdate: onChildBlockUpdate, onBlockDelete: onChildBlockDelete, onBlockMove: onChildBlockMove, emptyLabel: `Drop blocks in column ${colIndex + 1}` })] }) }, colIndex))) }), numColumns < 4 && (_jsx("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", children: _jsx(Plus, { size: 16 }) }))] }));
+};
+/**
+ * Columns Block Preview Component
+ */
+export const ColumnsPreview = ({ block, childBlocks = [], renderChild, context }) => {
+    // Support both old layout-based system and new dynamic column count
+    const columnCount = block.data.columnCount;
+    const layout = block.data.layout;
+    // Determine number of columns: use columnCount if set, otherwise derive from layout
+    let numColumns;
+    let gridClass;
+    // Grid class mapping for Tailwind (must be explicit for dynamic classes)
+    const gridClassMap = {
+        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;
+    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
+            : []);
+    // Split child blocks into columns based on columnIndex in meta, or round-robin
+    const columns = Array.from({ length: numColumns }, () => []);
+    children.forEach((childBlock) => {
+        var _a;
+        const columnIndex = (_a = childBlock.meta) === null || _a === void 0 ? void 0 : _a.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 (_jsx("div", { className: "grid gap-8 my-8", style: {
+            gridTemplateColumns: columnWidths.map(w => `${w}%`).join(' '),
+        }, children: Array.from({ length: numColumns }).map((_, colIndex) => {
+            var _a;
+            return (_jsx("div", { className: "min-h-[100px]", children: (_a = columns[colIndex]) === null || _a === void 0 ? void 0 : _a.map((childBlock) => (_jsx(React.Fragment, { children: renderChild ? renderChild(childBlock) : null }, childBlock.id))) }, colIndex));
+        }) }));
+};

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

@@ -0,0 +1,25 @@
+/**
+ * Section Block
+ * Full-width wrapper with configurable padding and background
+ */
+import React from 'react';
+import { BlockEditProps, BlockPreviewProps } from '../../../types/block';
+import { Block } from '../../../types/block';
+/**
+ * Section Block Edit Component
+ */
+export declare const SectionEdit: 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;
+}>;
+/**
+ * Section Block Preview Component
+ */
+export declare const SectionPreview: React.FC<BlockPreviewProps & {
+    childBlocks?: Block[];
+    renderChild?: (block: Block) => React.ReactNode;
+}>;
+//# sourceMappingURL=SectionBlock.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionBlock.d.ts","sourceRoot":"","sources":["SectionBlock.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,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,CA+CI,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,CAyBA,CAAC"}

package/src/lib/layouts/blocks/SectionBlock.js

@@ -0,0 +1,44 @@
+/**
+ * Section Block
+ * Full-width wrapper with configurable padding and background
+ */
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { LayoutContainer } from '../../../views/CanvasEditor/LayoutContainer';
+import { LAYOUT_BACKGROUNDS } from '../index';
+/**
+ * Section Block Edit Component
+ */
+export const SectionEdit = ({ block, onUpdate, isSelected, childBlocks = [], onChildBlockAdd, onChildBlockUpdate, onChildBlockDelete, onChildBlockMove, }) => {
+    const background = block.data.background || 'DEFAULT';
+    return (_jsx("div", { className: `rounded-xl transition-all ${isSelected
+            ? 'bg-primary/5'
+            : ''} ${LAYOUT_BACKGROUNDS[background]}`, onDragStart: (e) => {
+            // Prevent section from being dragged when dragging nested blocks
+            // Check if the drag started on a nested block wrapper
+            const nestedBlockWrapper = e.target.closest('[data-block-wrapper]');
+            if (nestedBlockWrapper) {
+                const nestedBlockId = nestedBlockWrapper.getAttribute('data-block-id');
+                // If dragging a nested block, prevent the section's drag handler from firing
+                if (nestedBlockId && nestedBlockId !== block.id) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    console.log('[SectionBlock] Preventing section drag, nested block is being dragged:', nestedBlockId);
+                }
+            }
+        }, children: _jsx("div", { className: `px-8 py-4`, children: _jsx(LayoutContainer, { blocks: childBlocks, containerId: block.id, onBlockAdd: onChildBlockAdd, onBlockUpdate: onChildBlockUpdate, onBlockDelete: onChildBlockDelete, onBlockMove: onChildBlockMove, emptyLabel: "Drop blocks into section" }) }) }));
+};
+/**
+ * Section Block Preview Component
+ */
+export const SectionPreview = ({ block, childBlocks = [], renderChild, context }) => {
+    const background = block.data.background || 'DEFAULT';
+    // 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
+            : []);
+    return (_jsx("section", { className: `w-full ${LAYOUT_BACKGROUNDS[background]}`, children: _jsx("div", { className: `max-w-7xl mx-auto px-6 py-2`, children: children.length > 0 && renderChild ? (children.map((childBlock) => (_jsx(React.Fragment, { children: renderChild(childBlock) }, childBlock.id)))) : (_jsx("div", { className: "text-gray-400 text-sm italic", children: "Empty section" })) }) }));
+};

package/src/lib/layouts/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Layout System Constants
+ * Standardized spacing and styling for layout blocks
+ */
+export declare const LAYOUT_CONSTANTS: {
+    readonly GUTTER: "2rem";
+    readonly SPACING: "4rem";
+    readonly SPACING_SM: "2rem";
+    readonly SPACING_LG: "6rem";
+    readonly BORDER_RADIUS: "2rem";
+};
+export declare const LAYOUT_BACKGROUNDS: {
+    readonly DEFAULT: "bg-white";
+    readonly NEUTRAL: "bg-neutral-50";
+    readonly SAGE: "bg-primary/5";
+    readonly CREAM: "bg-amber-50/50";
+};
+export type ColumnLayout = '50-50' | '33-66' | '66-33' | '25-25-25-25' | '25-75' | '75-25';
+export declare const COLUMN_LAYOUTS: Record<ColumnLayout, {
+    grid: string;
+    widths: number[];
+}>;
+//# sourceMappingURL=index.d.ts.map

package/src/lib/layouts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,eAAO,MAAM,gBAAgB;;;;;;CAMnB,CAAC;AAGX,eAAO,MAAM,kBAAkB;;;;;CAKrB,CAAC;AAGX,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa,GAAG,OAAO,GAAG,OAAO,CAAC;AAE3F,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,YAAY,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,EAAE,CAAA;CAAE,CAyBnF,CAAC"}

package/src/lib/layouts/index.js

@@ -0,0 +1,45 @@
+/**
+ * Layout System Constants
+ * Standardized spacing and styling for layout blocks
+ */
+// Spacing Constants (Earth-tone aligned)
+export const LAYOUT_CONSTANTS = {
+    GUTTER: '2rem', // 32px - Space between columns
+    SPACING: '4rem', // 64px - Vertical padding for sections
+    SPACING_SM: '2rem', // 32px - Smaller vertical padding
+    SPACING_LG: '6rem', // 96px - Larger vertical padding
+    BORDER_RADIUS: '2rem', // 32px - Consistent rounded corners
+};
+// Background Colors (Light mode only - matches client website theme)
+export const LAYOUT_BACKGROUNDS = {
+    DEFAULT: 'bg-white',
+    NEUTRAL: 'bg-neutral-50',
+    SAGE: 'bg-primary/5',
+    CREAM: 'bg-amber-50/50',
+};
+export const COLUMN_LAYOUTS = {
+    '50-50': {
+        grid: 'grid-cols-2',
+        widths: [50, 50],
+    },
+    '33-66': {
+        grid: 'grid-cols-3',
+        widths: [33, 66],
+    },
+    '66-33': {
+        grid: 'grid-cols-3',
+        widths: [66, 33],
+    },
+    '25-25-25-25': {
+        grid: 'grid-cols-4',
+        widths: [25, 25, 25, 25],
+    },
+    '25-75': {
+        grid: 'grid-cols-4',
+        widths: [25, 75],
+    },
+    '75-25': {
+        grid: 'grid-cols-4',
+        widths: [75, 25],
+    },
+};

package/src/lib/layouts/registerLayoutBlocks.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Register Core Layout Blocks
+ * Registers Section and Columns blocks in the block registry
+ */
+/**
+ * Register all core layout blocks
+ */
+export declare function registerLayoutBlocks(): void;
+//# sourceMappingURL=registerLayoutBlocks.d.ts.map

package/src/lib/layouts/registerLayoutBlocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerLayoutBlocks.d.ts","sourceRoot":"","sources":["registerLayoutBlocks.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAOH;;GAEG;AACH,wBAAgB,oBAAoB,SAiDnC"}

package/src/lib/layouts/registerLayoutBlocks.js

@@ -0,0 +1,60 @@
+/**
+ * Register Core Layout Blocks
+ * Registers Section and Columns blocks in the block registry
+ */
+import { blockRegistry } from '../../registry/BlockRegistry';
+import { SectionEdit, SectionPreview } from './blocks/SectionBlock';
+import { ColumnsEdit, ColumnsPreview } from './blocks/ColumnsBlock';
+import { Columns, Square } from 'lucide-react';
+/**
+ * Register all core layout blocks
+ */
+export function registerLayoutBlocks() {
+    // Section Block
+    blockRegistry.register({
+        type: 'section',
+        name: 'Section',
+        description: 'Full-width wrapper with configurable padding and background',
+        icon: Square,
+        defaultData: {
+            padding: 'md',
+            background: 'DEFAULT',
+        },
+        category: 'layout',
+        isContainer: true,
+        validate: (data) => {
+            return ['sm', 'md', 'lg'].includes(data.padding) &&
+                ['DEFAULT', 'NEUTRAL', 'SAGE', 'CREAM'].includes(data.background);
+        },
+        components: {
+            Edit: SectionEdit,
+            Preview: SectionPreview,
+            Icon: Square,
+        },
+    });
+    // Columns Block
+    blockRegistry.register({
+        type: 'columns',
+        name: 'Columns',
+        description: 'Flex/grid container with configurable column layouts (50/50, 33/66, etc.)',
+        icon: Columns,
+        defaultData: {
+            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);
+        },
+        components: {
+            Edit: ColumnsEdit,
+            Preview: ColumnsPreview,
+            Icon: Columns,
+        },
+    });
+}

package/src/lib/mappers/apiMapper.d.ts

@@ -0,0 +1,66 @@
+/**
+ * API Mapper
+ * Converts between API format (MongoDB) and BlogPost format
+ */
+import { BlogPost, PostStatus, SEOMetadata, PostMetadata } from '../../types/post';
+import { Block } from '../../types/block';
+/**
+ * API Blog Document Format (from MongoDB)
+ */
+export interface APIBlogDocument {
+    _id?: string;
+    id?: string;
+    title: string;
+    slug: string;
+    contentBlocks?: Block[];
+    content?: any[];
+    summary?: string;
+    image?: {
+        id?: string;
+        src?: string;
+        alt?: string;
+        isCustom?: boolean;
+    };
+    categoryTags?: {
+        category?: string;
+        tags?: string[];
+    };
+    publicationData?: {
+        status?: PostStatus | 'concept';
+        date?: string | Date;
+    };
+    seo?: {
+        title?: string;
+        description?: string;
+        keywords?: string[];
+        ogImage?: string;
+        canonicalUrl?: string;
+    };
+    authorId?: string;
+    createdAt?: string | Date;
+    updatedAt?: string | Date;
+}
+/**
+ * Convert API document to BlogPost format
+ */
+export declare function apiToBlogPost(doc: APIBlogDocument): BlogPost;
+/**
+ * Convert BlogPost to API document format
+ */
+export declare function blogPostToAPI(post: BlogPost, authorId?: string): Partial<APIBlogDocument>;
+/**
+ * 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 declare function editorStateToAPI(state: {
+    title: string;
+    slug: string;
+    blocks: Block[];
+    seo: SEOMetadata;
+    metadata: PostMetadata;
+    status: PostStatus;
+    postId?: string | null;
+}, authorId?: string, heroBlock?: Block | null): Partial<APIBlogDocument>;
+//# sourceMappingURL=apiMapper.d.ts.map

package/src/lib/mappers/apiMapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"apiMapper.d.ts","sourceRoot":"","sources":["apiMapper.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACnF,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C;;GAEG;AACH,MAAM,WAAW,eAAe;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,KAAK,EAAE,CAAC;IACxB,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE;QACJ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,OAAO,CAAC;KAGtB,CAAC;IACF,YAAY,CAAC,EAAE;QACX,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;KACnB,CAAC;IACF,eAAe,CAAC,EAAE;QACd,MAAM,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;QAChC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;KACxB,CAAC;IACF,GAAG,CAAC,EAAE;QACF,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;QACpB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,YAAY,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC;IACF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,eAAe,GAAG,QAAQ,CAmE5D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,eAAe,CAAC,CAgCzF;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,GAAG,EAAE,WAAW,CAAC;IACjB,QAAQ,EAAE,YAAY,CAAC;IACvB,MAAM,EAAE,UAAU,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,OAAO,CAAC,eAAe,CAAC,CAkFxE"}