@qwanyx/ai-editor 1.3.13 → 1.4.1

package/dist/layouts/GalleryLayout.js

@@ -0,0 +1,262 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createDefaultGalleryContent = createDefaultGalleryContent;
+exports.GalleryLayout = GalleryLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const index_1 = require("./index");
+// ============================================
+// Styles
+// ============================================
+const styles = {
+    container: {
+        width: '100%',
+    },
+    // Grid layout
+    gridContainer: {
+        display: 'flex',
+        flexWrap: 'wrap',
+    },
+    gridItem: {
+        overflow: 'hidden',
+    },
+    gridImage: {
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+        display: 'block',
+    },
+    // Masonry layout
+    masonryContainer: {
+        columnFill: 'balance',
+    },
+    masonryItem: {
+        breakInside: 'avoid',
+        marginBottom: '8px',
+    },
+    masonryImage: {
+        width: '100%',
+        height: 'auto',
+        display: 'block',
+    },
+    // Caption
+    caption: {
+        fontSize: '0.75rem',
+        color: '#666',
+        textAlign: 'center',
+        padding: '4px 0',
+        backgroundColor: 'rgba(255,255,255,0.9)',
+    },
+    // Edit mode
+    addButton: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '2rem',
+        border: '2px dashed #ccc',
+        borderRadius: '8px',
+        backgroundColor: '#f9f9f9',
+        cursor: 'pointer',
+        color: '#666',
+        fontSize: '0.875rem',
+        marginTop: '1rem',
+    },
+    editOverlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        opacity: 0,
+        transition: 'opacity 0.2s',
+    },
+    editButton: {
+        padding: '0.5rem',
+        backgroundColor: 'white',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer',
+        margin: '0 2px',
+    },
+    imageWrapper: {
+        position: 'relative',
+    },
+};
+// ============================================
+// Default Content
+// ============================================
+function createDefaultGalleryContent() {
+    return {
+        images: [],
+        imageWidth: 200,
+        layout: 'grid',
+        alignment: 'left',
+        gap: 8,
+        showCaptions: false,
+    };
+}
+// ============================================
+// Helper: Get alignment CSS
+// ============================================
+function getAlignmentStyle(alignment) {
+    switch (alignment) {
+        case 'left':
+            return { justifyContent: 'flex-start' };
+        case 'center':
+            return { justifyContent: 'center' };
+        case 'right':
+            return { justifyContent: 'flex-end' };
+        case 'distribute':
+            return { justifyContent: 'space-between' };
+        default:
+            return { justifyContent: 'flex-start' };
+    }
+}
+function ImageItem({ image, index, isEditing, showCaption, onDelete, onEdit, style, imageStyle, }) {
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { ...styles.imageWrapper, ...style }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [(0, jsx_runtime_1.jsx)("img", { src: image.src, alt: image.alt || '', style: imageStyle }), showCaption && image.caption && ((0, jsx_runtime_1.jsx)("div", { style: styles.caption, children: image.caption })), isEditing && ((0, jsx_runtime_1.jsxs)("div", { style: { ...styles.editOverlay, opacity: isHovered ? 1 : 0 }, children: [(0, jsx_runtime_1.jsx)("button", { style: styles.editButton, onClick: () => onEdit(index), title: "Modifier", children: "\u270F\uFE0F" }), (0, jsx_runtime_1.jsx)("button", { style: styles.editButton, onClick: () => onDelete(index), title: "Supprimer", children: "\uD83D\uDDD1\uFE0F" })] }))] }));
+}
+function AddImageDialog({ onAdd, onClose, editImage }) {
+    const [url, setUrl] = (0, react_1.useState)(editImage?.src || '');
+    const [alt, setAlt] = (0, react_1.useState)(editImage?.alt || '');
+    const [caption, setCaption] = (0, react_1.useState)(editImage?.caption || '');
+    const handleSubmit = () => {
+        if (url.trim()) {
+            onAdd({ src: url.trim(), alt: alt.trim(), caption: caption.trim() });
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: 'rgba(0,0,0,0.5)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 1000,
+        }, onClick: onClose, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                backgroundColor: 'white',
+                padding: '1.5rem',
+                borderRadius: '8px',
+                minWidth: '400px',
+                maxWidth: '90%',
+            }, onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsx)("h3", { style: { margin: '0 0 1rem 0' }, children: editImage ? 'Modifier l\'image' : 'Ajouter une image' }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '1rem' }, children: [(0, jsx_runtime_1.jsx)("label", { style: { display: 'block', marginBottom: '0.25rem', fontSize: '0.875rem' }, children: "URL de l'image *" }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: url, onChange: (e) => setUrl(e.target.value), placeholder: "https://...", style: {
+                                width: '100%',
+                                padding: '0.5rem',
+                                border: '1px solid #ccc',
+                                borderRadius: '4px',
+                            } })] }), url && ((0, jsx_runtime_1.jsx)("img", { src: url, alt: "Preview", style: {
+                        maxWidth: '100%',
+                        maxHeight: '150px',
+                        marginBottom: '1rem',
+                        display: 'block',
+                        borderRadius: '4px',
+                    }, onError: (e) => {
+                        e.target.style.display = 'none';
+                    } })), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '1rem' }, children: [(0, jsx_runtime_1.jsx)("label", { style: { display: 'block', marginBottom: '0.25rem', fontSize: '0.875rem' }, children: "Texte alternatif" }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: alt, onChange: (e) => setAlt(e.target.value), placeholder: "Description de l'image", style: {
+                                width: '100%',
+                                padding: '0.5rem',
+                                border: '1px solid #ccc',
+                                borderRadius: '4px',
+                            } })] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '1rem' }, children: [(0, jsx_runtime_1.jsx)("label", { style: { display: 'block', marginBottom: '0.25rem', fontSize: '0.875rem' }, children: "L\u00E9gende" }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: caption, onChange: (e) => setCaption(e.target.value), placeholder: "L\u00E9gende affich\u00E9e sous l'image", style: {
+                                width: '100%',
+                                padding: '0.5rem',
+                                border: '1px solid #ccc',
+                                borderRadius: '4px',
+                            } })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '0.5rem', justifyContent: 'flex-end' }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: onClose, style: {
+                                padding: '0.5rem 1rem',
+                                border: '1px solid #ccc',
+                                borderRadius: '4px',
+                                backgroundColor: 'white',
+                                cursor: 'pointer',
+                            }, children: "Annuler" }), (0, jsx_runtime_1.jsx)("button", { onClick: handleSubmit, disabled: !url.trim(), style: {
+                                padding: '0.5rem 1rem',
+                                border: 'none',
+                                borderRadius: '4px',
+                                backgroundColor: url.trim() ? '#007bff' : '#ccc',
+                                color: 'white',
+                                cursor: url.trim() ? 'pointer' : 'not-allowed',
+                            }, children: editImage ? 'Modifier' : 'Ajouter' })] })] }) }));
+}
+// ============================================
+// Main Layout Component
+// ============================================
+function GalleryLayout({ section, isEditing, onContentChange, }) {
+    const content = section.content;
+    const [showAddDialog, setShowAddDialog] = (0, react_1.useState)(false);
+    const [editingIndex, setEditingIndex] = (0, react_1.useState)(null);
+    const gap = content.gap || 8;
+    const imageWidth = content.imageWidth || 200;
+    const handleAddImage = (0, react_1.useCallback)((image) => {
+        if (editingIndex !== null) {
+            // Editing existing image
+            const newImages = [...content.images];
+            newImages[editingIndex] = image;
+            onContentChange({ ...content, images: newImages });
+            setEditingIndex(null);
+        }
+        else {
+            // Adding new image
+            onContentChange({ ...content, images: [...content.images, image] });
+        }
+        setShowAddDialog(false);
+    }, [content, onContentChange, editingIndex]);
+    const handleDeleteImage = (0, react_1.useCallback)((index) => {
+        const newImages = content.images.filter((_, i) => i !== index);
+        onContentChange({ ...content, images: newImages });
+    }, [content, onContentChange]);
+    const handleEditImage = (0, react_1.useCallback)((index) => {
+        setEditingIndex(index);
+        setShowAddDialog(true);
+    }, []);
+    // Grid Layout
+    const renderGrid = () => ((0, jsx_runtime_1.jsx)("div", { style: {
+            ...styles.gridContainer,
+            gap: `${gap}px`,
+            ...getAlignmentStyle(content.alignment),
+        }, children: content.images.map((image, index) => ((0, jsx_runtime_1.jsx)(ImageItem, { image: image, index: index, isEditing: isEditing, showCaption: content.showCaptions || false, onDelete: handleDeleteImage, onEdit: handleEditImage, style: {
+                ...styles.gridItem,
+                width: `${imageWidth}px`,
+                height: `${imageWidth}px`,
+            }, imageStyle: styles.gridImage }, index))) }));
+    // Masonry Layout
+    const renderMasonry = () => {
+        // Calculate column count based on container width
+        // We'll use CSS columns for true masonry effect
+        const columnWidth = imageWidth + gap;
+        return ((0, jsx_runtime_1.jsx)("div", { style: {
+                ...styles.masonryContainer,
+                columnWidth: `${imageWidth}px`,
+                columnGap: `${gap}px`,
+            }, children: content.images.map((image, index) => ((0, jsx_runtime_1.jsx)(ImageItem, { image: image, index: index, isEditing: isEditing, showCaption: content.showCaptions || false, onDelete: handleDeleteImage, onEdit: handleEditImage, style: {
+                    ...styles.masonryItem,
+                    marginBottom: `${gap}px`,
+                }, imageStyle: styles.masonryImage }, index))) }));
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: styles.container, children: [content.images.length === 0 && !isEditing ? ((0, jsx_runtime_1.jsx)("div", { style: { textAlign: 'center', padding: '2rem', color: '#999' }, children: "Aucune image" })) : (content.layout === 'masonry' ? renderMasonry() : renderGrid()), isEditing && ((0, jsx_runtime_1.jsx)("div", { style: styles.addButton, onClick: () => {
+                    setEditingIndex(null);
+                    setShowAddDialog(true);
+                }, children: "+ Ajouter une image" })), showAddDialog && ((0, jsx_runtime_1.jsx)(AddImageDialog, { onAdd: handleAddImage, onClose: () => {
+                    setShowAddDialog(false);
+                    setEditingIndex(null);
+                }, editImage: editingIndex !== null ? content.images[editingIndex] : undefined }))] }));
+}
+// ============================================
+// Register Layout
+// ============================================
+(0, index_1.registerLayout)({
+    type: 'gallery',
+    name: 'Galerie',
+    description: 'Grille d\'images responsive avec modes grid et masonry',
+    icon: '🖼️',
+    component: GalleryLayout,
+    defaultContent: createDefaultGalleryContent,
+    category: 'media',
+});

package/dist/layouts/OgilvyLayout.d.ts

@@ -0,0 +1,5 @@
+import { OgilvyContent } from '../types/page';
+import { LayoutComponentProps } from './index';
+export declare function createDefaultOgilvyContent(): OgilvyContent;
+export declare function OgilvyLayout({ section, isEditing, onContentChange, }: LayoutComponentProps<OgilvyContent>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=OgilvyLayout.d.ts.map

package/dist/layouts/OgilvyLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OgilvyLayout.d.ts","sourceRoot":"","sources":["../../src/layouts/OgilvyLayout.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,aAAa,EAId,MAAM,eAAe,CAAA;AACtB,OAAO,EAAkB,oBAAoB,EAAE,MAAM,SAAS,CAAA;AA0H9D,wBAAgB,0BAA0B,IAAI,aAAa,CAe1D;AAiUD,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,SAAS,EACT,eAAe,GAChB,EAAE,oBAAoB,CAAC,aAAa,CAAC,2CA8GrC"}

package/dist/layouts/OgilvyLayout.js

@@ -0,0 +1,301 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createDefaultOgilvyContent = createDefaultOgilvyContent;
+exports.OgilvyLayout = OgilvyLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const page_1 = require("../types/page");
+const index_1 = require("./index");
+const RichTextEditor_1 = require("../components/RichTextEditor");
+const RichTextViewer_1 = require("../components/RichTextViewer");
+// ============================================
+// Styles
+// ============================================
+const styles = {
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '1.5rem',
+        fontFamily: 'Georgia, serif',
+    },
+    imageContainer: {
+        width: '100%',
+        position: 'relative',
+    },
+    image: {
+        width: '100%',
+        height: 'auto',
+        display: 'block',
+    },
+    imagePlaceholder: {
+        width: '100%',
+        aspectRatio: '16/9',
+        backgroundColor: '#f0f0f0',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: '#999',
+        fontSize: '1rem',
+        cursor: 'pointer',
+        border: '2px dashed #ccc',
+        borderRadius: '4px',
+    },
+    legend: {
+        fontSize: '0.85rem',
+        color: '#666',
+        marginTop: '0.5rem',
+        fontStyle: 'italic',
+    },
+    titleContainer: {
+        textAlign: 'center',
+    },
+    title: {
+        fontSize: '2.5rem',
+        fontWeight: 700,
+        margin: 0,
+        lineHeight: 1.2,
+    },
+    titleInput: {
+        fontSize: '2.5rem',
+        fontWeight: 700,
+        margin: 0,
+        lineHeight: 1.2,
+        border: 'none',
+        outline: 'none',
+        width: '100%',
+        textAlign: 'center',
+        fontFamily: 'inherit',
+        backgroundColor: 'transparent',
+    },
+    subtitle: {
+        fontSize: '1.25rem',
+        fontWeight: 400,
+        color: '#555',
+        margin: '0.5rem 0 0 0',
+        fontStyle: 'italic',
+    },
+    subtitleInput: {
+        fontSize: '1.25rem',
+        fontWeight: 400,
+        color: '#555',
+        margin: '0.5rem 0 0 0',
+        fontStyle: 'italic',
+        border: 'none',
+        outline: 'none',
+        width: '100%',
+        textAlign: 'center',
+        fontFamily: 'inherit',
+        backgroundColor: 'transparent',
+    },
+    columnsContainer: {
+        display: 'grid',
+        gap: '2rem',
+    },
+    column: {
+        lineHeight: 1.7,
+        fontSize: '1rem',
+        textAlign: 'justify',
+    },
+    dropCap: {
+        float: 'left',
+        fontSize: '3em',
+        lineHeight: 1,
+        marginRight: '0.1em',
+        marginTop: '0.1em',
+    },
+    footnote: {
+        fontSize: '0.85rem',
+        color: '#666',
+        borderTop: '1px solid #ddd',
+        paddingTop: '1rem',
+        marginTop: '1rem',
+    },
+    editableField: {
+        border: '1px solid transparent',
+        borderRadius: '4px',
+        transition: 'border-color 0.2s, background-color 0.2s',
+    },
+    editableFieldHover: {
+        borderColor: '#007bff',
+        backgroundColor: 'rgba(0, 123, 255, 0.05)',
+    },
+};
+// ============================================
+// Default Content
+// ============================================
+function createDefaultOgilvyContent() {
+    return {
+        image: {
+            src: '',
+            altText: '',
+        },
+        legend: '',
+        legendAsterisk: false,
+        title: 'Titre de la section',
+        subtitle: 'Sous-titre descriptif',
+        bodyText: '',
+        columns: 2,
+        dropCap: { ...page_1.DEFAULT_DROP_CAP },
+        footnote: '',
+    };
+}
+function EditableText({ value, onChange, isEditing, placeholder = 'Cliquez pour éditer...', style = {}, inputStyle = {}, multiline = false, as: Component = 'p', }) {
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    if (!isEditing) {
+        return (0, jsx_runtime_1.jsx)(Component, { style: style, children: value || placeholder });
+    }
+    const combinedStyle = {
+        ...style,
+        ...inputStyle,
+        ...(isHovered ? styles.editableFieldHover : {}),
+    };
+    if (multiline) {
+        return ((0, jsx_runtime_1.jsx)("textarea", { value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, style: {
+                ...combinedStyle,
+                resize: 'none',
+                minHeight: '100px',
+            }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false) }));
+    }
+    return ((0, jsx_runtime_1.jsx)("input", { type: "text", value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, style: combinedStyle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false) }));
+}
+function ImagePicker({ image, onChange, isEditing }) {
+    const [showDialog, setShowDialog] = (0, react_1.useState)(false);
+    const [tempUrl, setTempUrl] = (0, react_1.useState)(image.src);
+    const handleClick = () => {
+        if (isEditing) {
+            setTempUrl(image.src);
+            setShowDialog(true);
+        }
+    };
+    const handleSave = () => {
+        onChange({ ...image, src: tempUrl });
+        setShowDialog(false);
+    };
+    if (!image.src) {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: styles.imagePlaceholder, onClick: handleClick, children: isEditing ? 'Cliquez pour ajouter une image' : 'Aucune image' }), showDialog && ((0, jsx_runtime_1.jsx)(ImageDialog, { url: tempUrl, onUrlChange: setTempUrl, onSave: handleSave, onCancel: () => setShowDialog(false) }))] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: styles.imageContainer, children: (0, jsx_runtime_1.jsx)("img", { src: image.src, alt: image.altText || '', style: {
+                        ...styles.image,
+                        cursor: isEditing ? 'pointer' : 'default',
+                    }, onClick: handleClick }) }), showDialog && ((0, jsx_runtime_1.jsx)(ImageDialog, { url: tempUrl, onUrlChange: setTempUrl, onSave: handleSave, onCancel: () => setShowDialog(false) }))] }));
+}
+function ImageDialog({ url, onUrlChange, onSave, onCancel }) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: 'rgba(0,0,0,0.5)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 1000,
+        }, onClick: onCancel, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                backgroundColor: 'white',
+                padding: '1.5rem',
+                borderRadius: '8px',
+                minWidth: '400px',
+            }, onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsx)("h3", { style: { margin: '0 0 1rem 0' }, children: "URL de l'image" }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: url, onChange: (e) => onUrlChange(e.target.value), placeholder: "https://...", style: {
+                        width: '100%',
+                        padding: '0.5rem',
+                        marginBottom: '1rem',
+                        border: '1px solid #ccc',
+                        borderRadius: '4px',
+                    } }), url && ((0, jsx_runtime_1.jsx)("img", { src: url, alt: "Preview", style: {
+                        maxWidth: '100%',
+                        maxHeight: '200px',
+                        marginBottom: '1rem',
+                        display: 'block',
+                    } })), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '0.5rem', justifyContent: 'flex-end' }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: onCancel, style: {
+                                padding: '0.5rem 1rem',
+                                border: '1px solid #ccc',
+                                borderRadius: '4px',
+                                backgroundColor: 'white',
+                                cursor: 'pointer',
+                            }, children: "Annuler" }), (0, jsx_runtime_1.jsx)("button", { onClick: onSave, style: {
+                                padding: '0.5rem 1rem',
+                                border: 'none',
+                                borderRadius: '4px',
+                                backgroundColor: '#007bff',
+                                color: 'white',
+                                cursor: 'pointer',
+                            }, children: "Enregistrer" })] })] }) }));
+}
+function DropCapText({ text, dropCap }) {
+    if (!text || !dropCap.enabled) {
+        return (0, jsx_runtime_1.jsx)("div", { style: styles.column, children: text });
+    }
+    const firstChar = text.charAt(0);
+    const restOfText = text.slice(1);
+    const dropCapStyle = {
+        ...styles.dropCap,
+        fontSize: `${dropCap.fontSize || 3}em`,
+        fontFamily: dropCap.fontFamily || 'inherit',
+        color: dropCap.color || 'inherit',
+    };
+    if (dropCap.type === 'icon' && dropCap.iconUrl) {
+        return ((0, jsx_runtime_1.jsxs)("div", { style: styles.column, children: [(0, jsx_runtime_1.jsx)("img", { src: dropCap.iconUrl, alt: "", style: {
+                        float: 'left',
+                        width: `${dropCap.iconSize || 48}px`,
+                        height: `${dropCap.iconSize || 48}px`,
+                        marginRight: '0.5em',
+                        marginTop: '0.1em',
+                    } }), text] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { style: styles.column, children: [(0, jsx_runtime_1.jsx)("span", { style: dropCapStyle, children: firstChar }), restOfText] }));
+}
+function Columns({ text, columns, dropCap }) {
+    // Pour l'instant, on divise simplement le texte en paragraphes
+    // TODO: Intégrer RichTextEditor pour l'édition du corps de texte
+    const paragraphs = text.split('\n\n').filter(Boolean);
+    // Distribuer les paragraphes dans les colonnes
+    const columnTexts = Array(columns).fill('');
+    paragraphs.forEach((para, idx) => {
+        columnTexts[idx % columns] += (columnTexts[idx % columns] ? '\n\n' : '') + para;
+    });
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            ...styles.columnsContainer,
+            gridTemplateColumns: `repeat(${columns}, 1fr)`,
+        }, children: columnTexts.map((colText, idx) => ((0, jsx_runtime_1.jsx)("div", { children: idx === 0 ? ((0, jsx_runtime_1.jsx)(DropCapText, { text: colText, dropCap: dropCap })) : ((0, jsx_runtime_1.jsx)("div", { style: styles.column, children: colText })) }, idx))) }));
+}
+// ============================================
+// Main Layout Component
+// ============================================
+function OgilvyLayout({ section, isEditing, onContentChange, }) {
+    const content = section.content;
+    const updateField = (0, react_1.useCallback)((field, value) => {
+        onContentChange({
+            ...content,
+            [field]: value,
+        });
+    }, [content, onContentChange]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: styles.container, children: [(0, jsx_runtime_1.jsx)(ImagePicker, { image: content.image, onChange: (img) => updateField('image', img), isEditing: isEditing }), (content.legend || isEditing) && ((0, jsx_runtime_1.jsxs)("div", { style: styles.legend, children: [(0, jsx_runtime_1.jsx)(EditableText, { value: content.legend, onChange: (v) => updateField('legend', v), isEditing: isEditing, placeholder: "L\u00E9gende de l'image...", style: styles.legend }), content.legendAsterisk && '*'] })), (0, jsx_runtime_1.jsxs)("div", { style: styles.titleContainer, children: [(0, jsx_runtime_1.jsx)(EditableText, { value: content.title, onChange: (v) => updateField('title', v), isEditing: isEditing, placeholder: "Titre", style: styles.title, inputStyle: styles.titleInput, as: "h1" }), (0, jsx_runtime_1.jsx)(EditableText, { value: content.subtitle, onChange: (v) => updateField('subtitle', v), isEditing: isEditing, placeholder: "Sous-titre", style: styles.subtitle, inputStyle: styles.subtitleInput, as: "h2" })] }), (0, jsx_runtime_1.jsxs)("div", { className: content.dropCap.enabled ? 'ogilvy-drop-cap' : '', style: {
+                    ['--drop-cap-size']: `${content.dropCap.fontSize || 3}em`,
+                    ['--drop-cap-color']: content.dropCap.color || 'inherit',
+                    ['--drop-cap-font']: content.dropCap.fontFamily || 'Georgia, serif',
+                }, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+          .ogilvy-drop-cap .editor-paragraph:first-of-type::first-letter {
+            float: left;
+            font-size: var(--drop-cap-size, 3em);
+            font-family: var(--drop-cap-font, Georgia, serif);
+            color: var(--drop-cap-color, inherit);
+            line-height: 0.8;
+            margin-right: 0.1em;
+            margin-top: 0.1em;
+          }
+        ` }), isEditing ? ((0, jsx_runtime_1.jsx)(RichTextEditor_1.RichTextEditor, { initialContent: content.bodyText, onChange: (_html, json) => updateField('bodyText', json), placeholder: "Corps du texte...", columns: content.columns, minHeight: content.columnLines ? `calc(${content.columnLines * 1.7}em + 60px)` : "200px", autoGrow: !content.columnLines })) : ((0, jsx_runtime_1.jsx)(RichTextViewer_1.RichTextViewer, { content: content.bodyText, columns: content.columns }))] }), (content.footnote || (isEditing && content.legendAsterisk)) && ((0, jsx_runtime_1.jsx)("div", { style: styles.footnote, children: (0, jsx_runtime_1.jsx)(EditableText, { value: content.footnote || '', onChange: (v) => updateField('footnote', v), isEditing: isEditing, placeholder: "* Note explicative...", style: styles.footnote }) }))] }));
+}
+// ============================================
+// Register Layout
+// ============================================
+(0, index_1.registerLayout)({
+    type: 'ogilvy',
+    name: 'Ogilvy',
+    description: 'Image hero + légende + titre + sous-titre + texte en colonnes avec lettrine',
+    icon: '📰',
+    component: OgilvyLayout,
+    defaultContent: createDefaultOgilvyContent,
+    category: 'editorial',
+});

package/dist/layouts/RichTextLayout.d.ts

@@ -0,0 +1,7 @@
+import { LayoutComponentProps } from './index';
+export interface RichTextContent {
+    lexicalState: string;
+}
+export declare function createDefaultRichTextContent(): RichTextContent;
+export declare function RichTextLayout({ section, isEditing, onContentChange, }: LayoutComponentProps<RichTextContent>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RichTextLayout.d.ts.map

package/dist/layouts/RichTextLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextLayout.d.ts","sourceRoot":"","sources":["../../src/layouts/RichTextLayout.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAkB,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAQ9D,MAAM,WAAW,eAAe;IAE9B,YAAY,EAAE,MAAM,CAAA;CACrB;AAMD,wBAAgB,4BAA4B,IAAI,eAAe,CAI9D;AAMD,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,SAAS,EACT,eAAe,GAChB,EAAE,oBAAoB,CAAC,eAAe,CAAC,2CA6BvC"}

package/dist/layouts/RichTextLayout.js

@@ -0,0 +1,47 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createDefaultRichTextContent = createDefaultRichTextContent;
+exports.RichTextLayout = RichTextLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const index_1 = require("./index");
+const RichTextEditor_1 = require("../components/RichTextEditor");
+const RichTextViewer_1 = require("../components/RichTextViewer");
+// ============================================
+// Default Content
+// ============================================
+function createDefaultRichTextContent() {
+    return {
+        lexicalState: '',
+    };
+}
+// ============================================
+// Layout Component
+// ============================================
+function RichTextLayout({ section, isEditing, onContentChange, }) {
+    const content = section.content;
+    const handleChange = (0, react_1.useCallback)((_html, json) => {
+        onContentChange({
+            lexicalState: json,
+        });
+    }, [onContentChange]);
+    if (!isEditing) {
+        // Mode lecture: utiliser RichTextViewer
+        return ((0, jsx_runtime_1.jsx)(RichTextViewer_1.RichTextViewer, { content: content.lexicalState }));
+    }
+    // Mode édition: utiliser RichTextEditor
+    return ((0, jsx_runtime_1.jsx)(RichTextEditor_1.RichTextEditor, { initialContent: content.lexicalState, onChange: handleChange, placeholder: "Commencez \u00E0 \u00E9crire..." }));
+}
+// ============================================
+// Register Layout
+// ============================================
+(0, index_1.registerLayout)({
+    type: 'text-only', // On utilise 'text-only' qui est déjà dans les types
+    name: 'Texte riche',
+    description: 'Éditeur de texte riche simple (compatible avec l\'ancien format)',
+    icon: '📝',
+    component: RichTextLayout,
+    defaultContent: createDefaultRichTextContent,
+    category: 'editorial',
+});

package/dist/layouts/index.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Layout Registry
+ * Centralise tous les layouts disponibles pour les sections
+ */
+import React from 'react';
+import { LayoutType, Section } from '../types/page';
+export interface LayoutComponentProps<T = unknown> {
+    section: Section<T>;
+    isEditing: boolean;
+    onContentChange: (content: T) => void;
+}
+export interface LayoutRegistryEntry<T = unknown> {
+    type: LayoutType;
+    name: string;
+    description: string;
+    icon?: string;
+    component: React.ComponentType<LayoutComponentProps<T>>;
+    defaultContent: () => T;
+    category: 'editorial' | 'media' | 'grid' | 'special';
+}
+export declare function registerLayout<T>(entry: LayoutRegistryEntry<T>): void;
+export declare function getLayout(type: LayoutType): LayoutRegistryEntry | undefined;
+export declare function getAllLayouts(): LayoutRegistryEntry[];
+export declare function getLayoutsByCategory(category: LayoutRegistryEntry['category']): LayoutRegistryEntry[];
+export declare function getLayoutComponent(type: LayoutType): React.ComponentType<LayoutComponentProps> | null;
+export declare function getLayoutDefaultContent<T>(type: LayoutType): T | null;
+export * from './OgilvyLayout';
+export * from './RichTextLayout';
+export * from './GalleryLayout';
+export declare function initializeLayouts(): void;
+//# sourceMappingURL=index.d.ts.map