@qwanyx/ai-editor 1.3.13 → 1.4.0

package/dist/components/PageEditor.d.ts

@@ -0,0 +1,10 @@
+import { PageDocument } from '../types/page';
+export interface PageEditorProps {
+    initialDocument?: PageDocument;
+    onChange?: (document: PageDocument) => void;
+    className?: string;
+    isEditing?: boolean;
+}
+export declare function PageEditor({ initialDocument, onChange, className, isEditing, }: PageEditorProps): import("react/jsx-runtime").JSX.Element;
+export default PageEditor;
+//# sourceMappingURL=PageEditor.d.ts.map

package/dist/components/PageEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageEditor.d.ts","sourceRoot":"","sources":["../../src/components/PageEditor.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,YAAY,EAOb,MAAM,eAAe,CAAA;AAmnBtB,MAAM,WAAW,eAAe;IAC9B,eAAe,CAAC,EAAE,YAAY,CAAA;IAC9B,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAA;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,wBAAgB,UAAU,CAAC,EACzB,eAAe,EACf,QAAQ,EACR,SAAS,EACT,SAAgB,GACjB,EAAE,eAAe,2CAYjB;AAED,eAAe,UAAU,CAAA"}

package/dist/components/PageEditor.js

@@ -0,0 +1,294 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageEditor = PageEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const page_1 = require("../types/page");
+const PageContext_1 = require("../context/PageContext");
+const Section_1 = require("./Section");
+const layouts_1 = require("../layouts");
+// Initialize layouts on module load
+(0, layouts_1.initializeLayouts)();
+// ============================================
+// Styles
+// ============================================
+const styles = {
+    container: {
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+    },
+    tabBar: {
+        display: 'flex',
+        borderBottom: '1px solid #e9ecef',
+        backgroundColor: '#f8f9fa',
+    },
+    tab: {
+        padding: '0.75rem 1.5rem',
+        border: 'none',
+        backgroundColor: 'transparent',
+        cursor: 'pointer',
+        fontSize: '0.875rem',
+        fontWeight: 500,
+        color: '#666',
+        borderBottom: '2px solid transparent',
+        transition: 'color 0.2s, border-color 0.2s',
+    },
+    tabActive: {
+        color: '#007bff',
+        borderBottomColor: '#007bff',
+    },
+    tabHover: {
+        color: '#333',
+    },
+    toolbar: {
+        display: 'flex',
+        gap: '1rem',
+        padding: '0.75rem 1rem',
+        backgroundColor: '#fff',
+        borderBottom: '1px solid #e9ecef',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+    },
+    toolbarGroup: {
+        display: 'flex',
+        gap: '0.5rem',
+        alignItems: 'center',
+    },
+    toolbarLabel: {
+        fontSize: '0.875rem',
+        color: '#666',
+    },
+    select: {
+        padding: '0.5rem',
+        borderRadius: '4px',
+        border: '1px solid #ddd',
+        fontSize: '0.875rem',
+        backgroundColor: 'white',
+    },
+    addButton: {
+        padding: '0.5rem 1rem',
+        backgroundColor: '#007bff',
+        color: 'white',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer',
+        fontSize: '0.875rem',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.25rem',
+    },
+    content: {
+        flex: 1,
+        overflow: 'auto',
+    },
+    pageContainer: {
+        maxWidth: '1200px',
+        margin: '0 auto',
+    },
+    emptyState: {
+        textAlign: 'center',
+        padding: '4rem 2rem',
+        color: '#666',
+        backgroundColor: '#f9f9f9',
+        borderRadius: '8px',
+        border: '2px dashed #ddd',
+        margin: '2rem',
+    },
+    emptyStateTitle: {
+        fontSize: '1.5rem',
+        marginBottom: '1rem',
+        color: '#333',
+    },
+    emptyStateText: {
+        marginBottom: '1.5rem',
+    },
+    // Options panel styles
+    optionsPanel: {
+        padding: '1.5rem',
+        maxWidth: '600px',
+        margin: '0 auto',
+    },
+    optionGroup: {
+        marginBottom: '1.5rem',
+    },
+    optionLabel: {
+        display: 'block',
+        fontSize: '0.875rem',
+        fontWeight: 500,
+        marginBottom: '0.5rem',
+        color: '#333',
+    },
+    optionInput: {
+        width: '100%',
+        padding: '0.5rem',
+        borderRadius: '4px',
+        border: '1px solid #ddd',
+        fontSize: '0.875rem',
+    },
+    optionRow: {
+        display: 'flex',
+        gap: '1rem',
+        alignItems: 'center',
+    },
+    colorInput: {
+        width: '60px',
+        height: '36px',
+        padding: '2px',
+        borderRadius: '4px',
+        border: '1px solid #ddd',
+        cursor: 'pointer',
+    },
+    noSelection: {
+        textAlign: 'center',
+        padding: '4rem 2rem',
+        color: '#999',
+    },
+    // Layout picker
+    layoutPicker: {
+        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,
+    },
+    layoutPickerContent: {
+        backgroundColor: 'white',
+        borderRadius: '8px',
+        padding: '1.5rem',
+        maxWidth: '600px',
+        width: '90%',
+        maxHeight: '80vh',
+        overflow: 'auto',
+    },
+    layoutPickerTitle: {
+        fontSize: '1.25rem',
+        marginBottom: '1rem',
+        fontWeight: 600,
+    },
+    layoutGrid: {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))',
+        gap: '1rem',
+    },
+    layoutCard: {
+        padding: '1rem',
+        border: '1px solid #ddd',
+        borderRadius: '8px',
+        cursor: 'pointer',
+        textAlign: 'center',
+        transition: 'border-color 0.2s, box-shadow 0.2s',
+    },
+    layoutCardHover: {
+        borderColor: '#007bff',
+        boxShadow: '0 0 0 3px rgba(0, 123, 255, 0.1)',
+    },
+    layoutCardIcon: {
+        fontSize: '2rem',
+        marginBottom: '0.5rem',
+    },
+    layoutCardName: {
+        fontWeight: 500,
+        marginBottom: '0.25rem',
+    },
+    layoutCardDesc: {
+        fontSize: '0.75rem',
+        color: '#666',
+    },
+};
+function TabButton({ label, isActive, onClick }) {
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, style: {
+            ...styles.tab,
+            ...(isActive ? styles.tabActive : {}),
+            ...(isHovered && !isActive ? styles.tabHover : {}),
+        }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: label }));
+}
+function LayoutPicker({ onSelect, onClose }) {
+    const layouts = (0, layouts_1.getAllLayouts)();
+    const [hoveredLayout, setHoveredLayout] = (0, react_1.useState)(null);
+    return ((0, jsx_runtime_1.jsx)("div", { style: styles.layoutPicker, onClick: onClose, children: (0, jsx_runtime_1.jsxs)("div", { style: styles.layoutPickerContent, onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsx)("h3", { style: styles.layoutPickerTitle, children: "Choisir un layout" }), (0, jsx_runtime_1.jsx)("div", { style: styles.layoutGrid, children: layouts.map((layout) => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                            ...styles.layoutCard,
+                            ...(hoveredLayout === layout.type ? styles.layoutCardHover : {}),
+                        }, onClick: () => onSelect(layout.type), onMouseEnter: () => setHoveredLayout(layout.type), onMouseLeave: () => setHoveredLayout(null), children: [(0, jsx_runtime_1.jsx)("div", { style: styles.layoutCardIcon, children: layout.icon || '📄' }), (0, jsx_runtime_1.jsx)("div", { style: styles.layoutCardName, children: layout.name }), (0, jsx_runtime_1.jsx)("div", { style: styles.layoutCardDesc, children: layout.description })] }, layout.type))) }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: '1rem', textAlign: 'right' }, children: (0, jsx_runtime_1.jsx)("button", { onClick: onClose, style: {
+                            padding: '0.5rem 1rem',
+                            border: '1px solid #ddd',
+                            borderRadius: '4px',
+                            backgroundColor: 'white',
+                            cursor: 'pointer',
+                        }, children: "Annuler" }) })] }) }));
+}
+// ============================================
+// Section Options Panel
+// ============================================
+function SectionOptionsPanel() {
+    const { selectedSectionId, getSelectedSection, updateSectionSettings, updateSection } = (0, PageContext_1.usePageContext)();
+    const section = getSelectedSection();
+    if (!selectedSectionId || !section) {
+        return ((0, jsx_runtime_1.jsx)("div", { style: styles.noSelection, children: (0, jsx_runtime_1.jsx)("p", { children: "Cliquez sur une section pour modifier ses options" }) }));
+    }
+    const handleChange = (key, value) => {
+        updateSectionSettings(selectedSectionId, { [key]: value });
+    };
+    // Helper to update content fields
+    const handleContentChange = (key, value) => {
+        const newContent = { ...section.content, [key]: value };
+        updateSection(selectedSectionId, newContent);
+    };
+    // Type-safe content access
+    const content = section.content;
+    return ((0, jsx_runtime_1.jsxs)("div", { style: styles.optionsPanel, children: [(0, jsx_runtime_1.jsx)("h3", { style: { marginBottom: '1.5rem', fontSize: '1.125rem' }, children: "Options de la section" }), (0, jsx_runtime_1.jsxs)("div", { style: styles.optionGroup, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.optionLabel, children: "Type de layout" }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            padding: '0.5rem',
+                            backgroundColor: '#f8f9fa',
+                            borderRadius: '4px',
+                            fontSize: '0.875rem',
+                            color: '#666'
+                        }, children: section.layoutType })] }), section.layoutType === 'ogilvy' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: styles.optionGroup, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.optionLabel, children: "Colonnes" }), (0, jsx_runtime_1.jsxs)("select", { value: content.columns || 2, onChange: (e) => handleContentChange('columns', Number(e.target.value)), style: styles.optionInput, children: [(0, jsx_runtime_1.jsx)("option", { value: 2, children: "2 colonnes" }), (0, jsx_runtime_1.jsx)("option", { value: 3, children: "3 colonnes" })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.optionGroup, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.optionLabel, children: "Hauteur (lignes)" }), (0, jsx_runtime_1.jsx)("input", { type: "number", value: content.columnLines || '', onChange: (e) => handleContentChange('columnLines', e.target.value ? Number(e.target.value) : undefined), placeholder: "auto", min: 5, max: 100, style: styles.optionInput })] }), (0, jsx_runtime_1.jsx)("div", { style: styles.optionGroup, children: (0, jsx_runtime_1.jsxs)("label", { style: { ...styles.optionLabel, display: 'flex', alignItems: 'center', gap: '0.5rem' }, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: content.dropCap?.enabled || false, onChange: (e) => handleContentChange('dropCap', {
+                                        ...(content.dropCap || {}),
+                                        enabled: e.target.checked
+                                    }) }), "Lettrine"] }) }), (0, jsx_runtime_1.jsx)("div", { style: styles.optionGroup, children: (0, jsx_runtime_1.jsxs)("label", { style: { ...styles.optionLabel, display: 'flex', alignItems: 'center', gap: '0.5rem' }, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: content.legendAsterisk || false, onChange: (e) => handleContentChange('legendAsterisk', e.target.checked) }), "Ast\u00E9risque (*)"] }) })] })), (0, jsx_runtime_1.jsx)("hr", { style: { margin: '1.5rem 0', border: 'none', borderTop: '1px solid #e9ecef' } }), (0, jsx_runtime_1.jsxs)("div", { style: styles.optionGroup, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.optionLabel, children: "Couleur de fond" }), (0, jsx_runtime_1.jsxs)("div", { style: styles.optionRow, children: [(0, jsx_runtime_1.jsx)("input", { type: "color", value: section.backgroundColor || '#ffffff', onChange: (e) => handleChange('backgroundColor', e.target.value), style: styles.colorInput }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: section.backgroundColor || '', onChange: (e) => handleChange('backgroundColor', e.target.value), placeholder: "transparent", style: { ...styles.optionInput, flex: 1 } }), (0, jsx_runtime_1.jsx)("button", { onClick: () => handleChange('backgroundColor', undefined), style: {
+                                    padding: '0.5rem',
+                                    border: '1px solid #ddd',
+                                    borderRadius: '4px',
+                                    backgroundColor: 'white',
+                                    cursor: 'pointer',
+                                    fontSize: '0.75rem',
+                                }, children: "Reset" })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.optionGroup, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.optionLabel, children: "Padding" }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: section.padding || '', onChange: (e) => handleChange('padding', e.target.value), placeholder: "ex: 1rem, 20px, 10px 20px", style: styles.optionInput })] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.optionGroup, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.optionLabel, children: "Classe CSS" }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: section.className || '', onChange: (e) => handleChange('className', e.target.value), placeholder: "ex: my-custom-class", style: styles.optionInput })] })] }));
+}
+// ============================================
+// Page Editor Inner (with context)
+// ============================================
+function PageEditorInner() {
+    const { document, isEditing, selectedSectionId, setFormat, addSection, selectSection, } = (0, PageContext_1.usePageContext)();
+    const [activeTab, setActiveTab] = (0, react_1.useState)('edition');
+    const [showLayoutPicker, setShowLayoutPicker] = (0, react_1.useState)(false);
+    const handleAddSection = (0, react_1.useCallback)((layoutType) => {
+        const defaultContent = (0, layouts_1.getLayoutDefaultContent)(layoutType);
+        if (defaultContent) {
+            addSection(layoutType, defaultContent);
+        }
+        setShowLayoutPicker(false);
+    }, [addSection]);
+    const handleFormatChange = (0, react_1.useCallback)((e) => {
+        setFormat(e.target.value);
+    }, [setFormat]);
+    // Auto-select first section when switching to options tab
+    (0, react_1.useEffect)(() => {
+        if (activeTab === 'options' && !selectedSectionId && document.sections.length > 0) {
+            selectSection(document.sections[0].id);
+        }
+    }, [activeTab, selectedSectionId, document.sections, selectSection]);
+    const isPreviewMode = activeTab === 'preview';
+    return ((0, jsx_runtime_1.jsxs)("div", { style: styles.container, children: [(0, jsx_runtime_1.jsxs)("div", { style: styles.tabBar, children: [(0, jsx_runtime_1.jsx)(TabButton, { label: "\u00C9dition", isActive: activeTab === 'edition', onClick: () => setActiveTab('edition') }), (0, jsx_runtime_1.jsx)(TabButton, { label: "Pr\u00E9visualisation", isActive: activeTab === 'preview', onClick: () => setActiveTab('preview') }), (0, jsx_runtime_1.jsx)(TabButton, { label: "Options", isActive: activeTab === 'options', onClick: () => setActiveTab('options') })] }), activeTab === 'edition' && isEditing && ((0, jsx_runtime_1.jsxs)("div", { style: styles.toolbar, children: [(0, jsx_runtime_1.jsxs)("div", { style: styles.toolbarGroup, children: [(0, jsx_runtime_1.jsx)("span", { style: styles.toolbarLabel, children: "Format:" }), (0, jsx_runtime_1.jsxs)("select", { value: document.format, onChange: handleFormatChange, style: styles.select, children: [(0, jsx_runtime_1.jsx)("option", { value: "web", children: "Web (scroll infini)" }), (0, jsx_runtime_1.jsx)("option", { value: "print", children: "Print (A4, Letter...)" }), (0, jsx_runtime_1.jsx)("option", { value: "video", children: "Video / Pr\u00E9sentation" })] })] }), document.format === 'print' && ((0, jsx_runtime_1.jsxs)("div", { style: styles.toolbarGroup, children: [(0, jsx_runtime_1.jsx)("span", { style: styles.toolbarLabel, children: "Taille:" }), (0, jsx_runtime_1.jsx)("select", { style: styles.select, children: Object.entries(page_1.PRINT_PRESETS).map(([key, preset]) => ((0, jsx_runtime_1.jsx)("option", { value: key, children: preset.name }, key))) })] })), document.format === 'video' && ((0, jsx_runtime_1.jsxs)("div", { style: styles.toolbarGroup, children: [(0, jsx_runtime_1.jsx)("span", { style: styles.toolbarLabel, children: "Taille:" }), (0, jsx_runtime_1.jsx)("select", { style: styles.select, children: Object.entries(page_1.VIDEO_PRESETS).map(([key, preset]) => ((0, jsx_runtime_1.jsx)("option", { value: key, children: preset.name }, key))) })] })), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), (0, jsx_runtime_1.jsx)("button", { style: styles.addButton, onClick: () => setShowLayoutPicker(true), children: "+ Ajouter une section" })] })), (0, jsx_runtime_1.jsx)("div", { style: styles.content, children: activeTab === 'options' ? ((0, jsx_runtime_1.jsx)(SectionOptionsPanel, {})) : ((0, jsx_runtime_1.jsx)("div", { style: styles.pageContainer, children: document.sections.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { style: styles.emptyState, children: [(0, jsx_runtime_1.jsx)("div", { style: styles.emptyStateTitle, children: "Page vide" }), (0, jsx_runtime_1.jsx)("div", { style: styles.emptyStateText, children: "Commencez par ajouter une section \u00E0 votre page" }), isEditing && activeTab === 'edition' && ((0, jsx_runtime_1.jsx)("button", { style: styles.addButton, onClick: () => setShowLayoutPicker(true), children: "+ Ajouter une section" }))] })) : (document.sections.map((section, index) => ((0, jsx_runtime_1.jsx)(Section_1.SectionComponent, { section: section, index: index, totalSections: document.sections.length, isPreviewMode: isPreviewMode }, section.id)))) })) }), showLayoutPicker && ((0, jsx_runtime_1.jsx)(LayoutPicker, { onSelect: handleAddSection, onClose: () => setShowLayoutPicker(false) }))] }));
+}
+function PageEditor({ initialDocument, onChange, className, isEditing = true, }) {
+    return ((0, jsx_runtime_1.jsx)(PageContext_1.PageProvider, { initialDocument: initialDocument, isEditing: isEditing, onChange: onChange, children: (0, jsx_runtime_1.jsx)("div", { className: className, style: { height: '100%' }, children: (0, jsx_runtime_1.jsx)(PageEditorInner, {}) }) }));
+}
+exports.default = PageEditor;

package/dist/components/PageViewer.d.ts

@@ -0,0 +1,8 @@
+import { PageDocument } from '../types/page';
+export interface PageViewerProps {
+    document: PageDocument;
+    className?: string;
+}
+export declare function PageViewer({ document, className }: PageViewerProps): import("react/jsx-runtime").JSX.Element;
+export default PageViewer;
+//# sourceMappingURL=PageViewer.d.ts.map

package/dist/components/PageViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageViewer.d.ts","sourceRoot":"","sources":["../../src/components/PageViewer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAiE5C,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,YAAY,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,eAAe,2CAQlE;AAED,eAAe,UAAU,CAAA"}

package/dist/components/PageViewer.js

@@ -0,0 +1,38 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageViewer = PageViewer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PageContext_1 = require("../context/PageContext");
+const Section_1 = require("./Section");
+const layouts_1 = require("../layouts");
+// Initialize layouts on module load
+(0, layouts_1.initializeLayouts)();
+// ============================================
+// Styles
+// ============================================
+const styles = {
+    container: {
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    },
+    pageContainer: {
+        padding: '2rem',
+        maxWidth: '1200px',
+        margin: '0 auto',
+    },
+    emptyState: {
+        textAlign: 'center',
+        padding: '4rem 2rem',
+        color: '#666',
+    },
+};
+function PageViewerInner({ document }) {
+    if (document.sections.length === 0) {
+        return ((0, jsx_runtime_1.jsx)("div", { style: styles.pageContainer, children: (0, jsx_runtime_1.jsx)("div", { style: styles.emptyState, children: "Cette page est vide" }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: styles.pageContainer, children: document.sections.map((section, index) => ((0, jsx_runtime_1.jsx)(Section_1.SectionComponent, { section: section, index: index, totalSections: document.sections.length }, section.id))) }));
+}
+function PageViewer({ document, className }) {
+    return ((0, jsx_runtime_1.jsx)(PageContext_1.PageProvider, { initialDocument: document, isEditing: false, children: (0, jsx_runtime_1.jsx)("div", { style: styles.container, className: className, children: (0, jsx_runtime_1.jsx)(PageViewerInner, { document: document }) }) }));
+}
+exports.default = PageViewer;

package/dist/components/RichTextEditor.d.ts

@@ -10,6 +10,10 @@ export interface RichTextEditorProps {
     placeholder?: string;
     className?: string;
     minHeight?: string;
+    /** Number of columns for text flow (newspaper-style) */
+    columns?: 1 | 2 | 3;
+    /** If true, editor grows to fit content (no scroll). If false, fixed height with scroll. */
+    autoGrow?: boolean;
 }
-export declare function RichTextEditor({ initialContent, onChange, onAIRequest, placeholder, className, minHeight }: RichTextEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function RichTextEditor({ initialContent, onChange, onAIRequest, placeholder, className, minHeight, columns, autoGrow }: RichTextEditorProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=RichTextEditor.d.ts.map

package/dist/components/RichTextEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../src/components/RichTextEditor.tsx"],"names":[],"mappings":"AAkCA,MAAM,WAAW,mBAAmB;IAClC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/C,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE;QACrB,QAAQ,EAAE,MAAM,CAAA;QAChB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,MAAM,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAA;QAC1C,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,KAAK,OAAO,CAAC,MAAM,CAAC,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAqKD,wBAAgB,cAAc,CAAC,EAC7B,cAAmB,EACnB,QAAQ,EACR,WAAW,EACX,WAAqC,EACrC,SAAc,EACd,SAAmB,EACpB,EAAE,mBAAmB,2CAkJrB"}
+{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../src/components/RichTextEditor.tsx"],"names":[],"mappings":"AAkCA,MAAM,WAAW,mBAAmB;IAClC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/C,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE;QACrB,QAAQ,EAAE,MAAM,CAAA;QAChB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,MAAM,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAA;QAC1C,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,KAAK,OAAO,CAAC,MAAM,CAAC,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,wDAAwD;IACxD,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACnB,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAqKD,wBAAgB,cAAc,CAAC,EAC7B,cAAmB,EACnB,QAAQ,EACR,WAAW,EACX,WAAqC,EACrC,SAAc,EACd,SAAmB,EACnB,OAAW,EACX,QAAe,EAChB,EAAE,mBAAmB,2CA6JrB"}

package/dist/components/RichTextEditor.js

@@ -211,7 +211,7 @@ function EditorRefPlugin({ editorRef }) {
     }, [editor, editorRef]);
     return null;
 }
-function RichTextEditor({ initialContent = '', onChange, onAIRequest, placeholder = 'Commencez à écrire...', className = '', minHeight = '300px' }) {
+function RichTextEditor({ initialContent = '', onChange, onAIRequest, placeholder = 'Commencez à écrire...', className = '', minHeight = '300px', columns = 1, autoGrow = true }) {
     const editorRef = react_1.default.useRef(null);
     const [isLoading, setIsLoading] = react_1.default.useState(false);
     const [isFullscreen, setIsFullscreen] = react_1.default.useState(false);
@@ -286,5 +286,14 @@ function RichTextEditor({ initialContent = '', onChange, onAIRequest, placeholde
     const fullscreenClasses = isFullscreen
         ? 'fixed inset-0 z-50'
         : '';
-    return ((0, jsx_runtime_1.jsx)(EditorModeContext_1.EditorModeProvider, { isViewer: false, children: (0, jsx_runtime_1.jsxs)("div", { className: `border border-gray-200 rounded-lg bg-white flex flex-col overflow-hidden ${fullscreenClasses} ${className}`, style: minHeight && !isFullscreen ? { height: minHeight } : {}, children: [(0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: editorStyles } }), (0, jsx_runtime_1.jsxs)(LexicalComposer_1.LexicalComposer, { initialConfig: getEditorConfig(initialContent), children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-shrink-0 bg-white border-b border-gray-200", children: (0, jsx_runtime_1.jsx)(EditorToolbar_1.EditorToolbar, { onAIAction: handleAIAction, isLoading: isLoading, isFullscreen: isFullscreen, onToggleFullscreen: toggleFullscreen }) }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex-1 overflow-y-auto", children: [(0, jsx_runtime_1.jsx)(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: (0, jsx_runtime_1.jsx)(LexicalContentEditable_1.ContentEditable, { className: "outline-none p-4 text-gray-900" }), placeholder: (0, jsx_runtime_1.jsx)("div", { className: "absolute top-4 left-4 text-gray-400 pointer-events-none", children: placeholder }), ErrorBoundary: LexicalErrorBoundary_1.LexicalErrorBoundary }), (0, jsx_runtime_1.jsx)(LexicalHistoryPlugin_1.HistoryPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalListPlugin_1.ListPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalLinkPlugin_1.LinkPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalOnChangePlugin_1.OnChangePlugin, { onChange: handleChange }), (0, jsx_runtime_1.jsx)(InitialContentPlugin, { content: initialContent }), (0, jsx_runtime_1.jsx)(EditorRefPlugin, { editorRef: editorRef }), (0, jsx_runtime_1.jsx)(InsertObjectPlugin_1.InsertObjectPlugin, {}), (0, jsx_runtime_1.jsx)(ImageLinkPlugin_1.ImageLinkPlugin, {}), (0, jsx_runtime_1.jsx)(LinkPlugin_1.SimpleLinkPlugin, {}), isLoading && ((0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 bg-white/80 flex items-center justify-center z-10", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 text-blue-600", children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons animate-spin", children: "sync" }), (0, jsx_runtime_1.jsx)("span", { children: "L'IA travaille..." })] }) }))] })] })] }) }));
+    // Container style: autoGrow uses minHeight, fixed uses height
+    const containerStyle = minHeight && !isFullscreen
+        ? autoGrow
+            ? { minHeight }
+            : { height: minHeight }
+        : {};
+    return ((0, jsx_runtime_1.jsx)(EditorModeContext_1.EditorModeProvider, { isViewer: false, children: (0, jsx_runtime_1.jsxs)("div", { className: `border border-gray-200 rounded-lg bg-white flex flex-col ${autoGrow ? '' : 'overflow-hidden'} ${fullscreenClasses} ${className}`, style: containerStyle, children: [(0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: editorStyles } }), (0, jsx_runtime_1.jsxs)(LexicalComposer_1.LexicalComposer, { initialConfig: getEditorConfig(initialContent), children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-shrink-0 bg-white border-b border-gray-200", children: (0, jsx_runtime_1.jsx)(EditorToolbar_1.EditorToolbar, { onAIAction: handleAIAction, isLoading: isLoading, isFullscreen: isFullscreen, onToggleFullscreen: toggleFullscreen }) }), (0, jsx_runtime_1.jsxs)("div", { className: `relative flex-1 ${autoGrow ? '' : 'overflow-y-auto'}`, children: [(0, jsx_runtime_1.jsx)(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: (0, jsx_runtime_1.jsx)(LexicalContentEditable_1.ContentEditable, { className: "outline-none p-4 text-gray-900", style: columns > 1 ? {
+                                            columnCount: columns,
+                                            columnGap: '2rem',
+                                        } : undefined }), placeholder: (0, jsx_runtime_1.jsx)("div", { className: "absolute top-4 left-4 text-gray-400 pointer-events-none", children: placeholder }), ErrorBoundary: LexicalErrorBoundary_1.LexicalErrorBoundary }), (0, jsx_runtime_1.jsx)(LexicalHistoryPlugin_1.HistoryPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalListPlugin_1.ListPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalLinkPlugin_1.LinkPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalOnChangePlugin_1.OnChangePlugin, { onChange: handleChange }), (0, jsx_runtime_1.jsx)(InitialContentPlugin, { content: initialContent }), (0, jsx_runtime_1.jsx)(EditorRefPlugin, { editorRef: editorRef }), (0, jsx_runtime_1.jsx)(InsertObjectPlugin_1.InsertObjectPlugin, {}), (0, jsx_runtime_1.jsx)(ImageLinkPlugin_1.ImageLinkPlugin, {}), (0, jsx_runtime_1.jsx)(LinkPlugin_1.SimpleLinkPlugin, {}), isLoading && ((0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 bg-white/80 flex items-center justify-center z-10", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 text-blue-600", children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons animate-spin", children: "sync" }), (0, jsx_runtime_1.jsx)("span", { children: "L'IA travaille..." })] }) }))] })] })] }) }));
 }

package/dist/components/RichTextViewer.d.ts

@@ -1,6 +1,8 @@
 export interface RichTextViewerProps {
     content?: string;
     className?: string;
+    /** Number of columns for text flow (newspaper-style) */
+    columns?: 1 | 2 | 3;
 }
-export declare function RichTextViewer({ content, className }: RichTextViewerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function RichTextViewer({ content, className, columns }: RichTextViewerProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=RichTextViewer.d.ts.map

package/dist/components/RichTextViewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextViewer.d.ts","sourceRoot":"","sources":["../../src/components/RichTextViewer.tsx"],"names":[],"mappings":"AAoBA,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA4ID,wBAAgB,cAAc,CAAC,EAC7B,OAAY,EACZ,SAAc,EACf,EAAE,mBAAmB,kDA8BrB"}
+{"version":3,"file":"RichTextViewer.d.ts","sourceRoot":"","sources":["../../src/components/RichTextViewer.tsx"],"names":[],"mappings":"AAoBA,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,wDAAwD;IACxD,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;CACpB;AA4ID,wBAAgB,cAAc,CAAC,EAC7B,OAAY,EACZ,SAAc,EACd,OAAW,EACZ,EAAE,mBAAmB,kDAoCrB"}

package/dist/components/RichTextViewer.js

@@ -153,10 +153,15 @@ function ContentLoaderPlugin({ content }) {
     }, [editor, content]);
     return null;
 }
-function RichTextViewer({ content = '', className = '' }) {
+function RichTextViewer({ content = '', className = '', columns = 1 }) {
     // Don't render anything if no content
     if (!content) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(EditorModeContext_1.EditorModeProvider, { isViewer: true, children: (0, jsx_runtime_1.jsxs)("div", { className: className, children: [(0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: viewerStyles } }), (0, jsx_runtime_1.jsxs)(LexicalComposer_1.LexicalComposer, { initialConfig: getViewerConfig(), children: [(0, jsx_runtime_1.jsx)(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: (0, jsx_runtime_1.jsx)(LexicalContentEditable_1.ContentEditable, { className: "outline-none text-gray-900", style: { cursor: 'default' } }), placeholder: null, ErrorBoundary: LexicalErrorBoundary_1.LexicalErrorBoundary }), (0, jsx_runtime_1.jsx)(LexicalListPlugin_1.ListPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalLinkPlugin_1.LinkPlugin, {}), (0, jsx_runtime_1.jsx)(ContentLoaderPlugin, { content: content }), (0, jsx_runtime_1.jsx)(ImageLinkPlugin_1.ImageLinkPlugin, {}), (0, jsx_runtime_1.jsx)(LinkPlugin_1.SimpleLinkPlugin, {})] })] }) }));
+    const columnStyle = columns > 1 ? {
+        columnCount: columns,
+        columnGap: '2rem',
+        cursor: 'default',
+    } : { cursor: 'default' };
+    return ((0, jsx_runtime_1.jsx)(EditorModeContext_1.EditorModeProvider, { isViewer: true, children: (0, jsx_runtime_1.jsxs)("div", { className: className, children: [(0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: viewerStyles } }), (0, jsx_runtime_1.jsxs)(LexicalComposer_1.LexicalComposer, { initialConfig: getViewerConfig(), children: [(0, jsx_runtime_1.jsx)(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: (0, jsx_runtime_1.jsx)(LexicalContentEditable_1.ContentEditable, { className: "outline-none text-gray-900", style: columnStyle }), placeholder: null, ErrorBoundary: LexicalErrorBoundary_1.LexicalErrorBoundary }), (0, jsx_runtime_1.jsx)(LexicalListPlugin_1.ListPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalLinkPlugin_1.LinkPlugin, {}), (0, jsx_runtime_1.jsx)(ContentLoaderPlugin, { content: content }), (0, jsx_runtime_1.jsx)(ImageLinkPlugin_1.ImageLinkPlugin, {}), (0, jsx_runtime_1.jsx)(LinkPlugin_1.SimpleLinkPlugin, {})] })] }) }));
 }

package/dist/components/Section.d.ts

@@ -0,0 +1,10 @@
+import { Section as SectionType } from '../types/page';
+interface SectionComponentProps {
+    section: SectionType;
+    index: number;
+    totalSections: number;
+    isPreviewMode?: boolean;
+}
+export declare function SectionComponent({ section, index, totalSections, isPreviewMode }: SectionComponentProps): import("react/jsx-runtime").JSX.Element;
+export default SectionComponent;
+//# sourceMappingURL=Section.d.ts.map

package/dist/components/Section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../src/components/Section.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA;AAkKtD,UAAU,qBAAqB;IAC7B,OAAO,EAAE,WAAW,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,aAAqB,EAAE,EAAE,qBAAqB,2CA+D/G;AAED,eAAe,gBAAgB,CAAA"}

package/dist/components/Section.js

@@ -0,0 +1,117 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionComponent = SectionComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const layouts_1 = require("../layouts");
+const PageContext_1 = require("../context/PageContext");
+// ============================================
+// Styles
+// ============================================
+const styles = {
+    container: {
+        position: 'relative',
+    },
+    wrapper: {
+        border: '1px solid transparent',
+        transition: 'border-color 0.2s, box-shadow 0.2s',
+    },
+    wrapperHover: {
+        borderColor: '#007bff',
+        boxShadow: '0 0 0 3px rgba(0, 123, 255, 0.1)',
+    },
+    wrapperSelected: {
+        borderColor: '#007bff',
+        boxShadow: '0 0 0 3px rgba(0, 123, 255, 0.2)',
+    },
+    toolbar: {
+        position: 'absolute',
+        top: '-40px',
+        right: '0',
+        display: 'flex',
+        gap: '0.25rem',
+        backgroundColor: 'white',
+        padding: '0.25rem',
+        borderRadius: '4px',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+        zIndex: 10,
+    },
+    toolbarButton: {
+        padding: '0.5rem',
+        border: 'none',
+        borderRadius: '4px',
+        backgroundColor: 'transparent',
+        cursor: 'pointer',
+        fontSize: '1rem',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minWidth: '32px',
+        transition: 'background-color 0.2s',
+    },
+    toolbarButtonHover: {
+        backgroundColor: '#f0f0f0',
+    },
+    toolbarButtonDanger: {
+        color: '#dc3545',
+    },
+    dragHandle: {
+        cursor: 'grab',
+        padding: '0.5rem',
+        color: '#999',
+    },
+    emptyLayout: {
+        padding: '2rem',
+        textAlign: 'center',
+        color: '#999',
+        backgroundColor: '#f9f9f9',
+        borderRadius: '4px',
+        border: '1px dashed #ddd',
+    },
+};
+function ToolbarButton({ onClick, title, children, danger, disabled }) {
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, title: title, disabled: disabled, style: {
+            ...styles.toolbarButton,
+            ...(isHovered ? styles.toolbarButtonHover : {}),
+            ...(danger ? styles.toolbarButtonDanger : {}),
+            opacity: disabled ? 0.5 : 1,
+            cursor: disabled ? 'not-allowed' : 'pointer',
+        }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: children }));
+}
+function SectionToolbar({ sectionId, canMoveUp, canMoveDown }) {
+    const { moveSection, deleteSection, duplicateSection } = (0, PageContext_1.usePageContext)();
+    return ((0, jsx_runtime_1.jsxs)("div", { style: styles.toolbar, children: [(0, jsx_runtime_1.jsx)("div", { style: styles.dragHandle, title: "Glisser pour d\u00E9placer", children: "\u22EE\u22EE" }), (0, jsx_runtime_1.jsx)(ToolbarButton, { onClick: () => moveSection(sectionId, 'up'), title: "Monter", disabled: !canMoveUp, children: "\u2191" }), (0, jsx_runtime_1.jsx)(ToolbarButton, { onClick: () => moveSection(sectionId, 'down'), title: "Descendre", disabled: !canMoveDown, children: "\u2193" }), (0, jsx_runtime_1.jsx)(ToolbarButton, { onClick: () => duplicateSection(sectionId), title: "Dupliquer", children: "\u29C9" }), (0, jsx_runtime_1.jsx)(ToolbarButton, { onClick: () => {
+                    if (window.confirm('Supprimer cette section ?')) {
+                        deleteSection(sectionId);
+                    }
+                }, title: "Supprimer", danger: true, children: "\u00D7" })] }));
+}
+function SectionComponent({ section, index, totalSections, isPreviewMode = false }) {
+    const { isEditing, updateSection, selectedSectionId, selectSection } = (0, PageContext_1.usePageContext)();
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const isSelected = selectedSectionId === section.id;
+    const showEditingUI = isEditing && !isPreviewMode;
+    const LayoutComponent = (0, layouts_1.getLayoutComponent)(section.layoutType);
+    const handleContentChange = (0, react_1.useCallback)((content) => {
+        updateSection(section.id, content);
+    }, [section.id, updateSection]);
+    const wrapperStyle = {
+        ...styles.wrapper,
+        ...(isHovered && showEditingUI ? styles.wrapperHover : {}),
+        ...(isSelected && showEditingUI ? styles.wrapperSelected : {}),
+        backgroundColor: section.backgroundColor || 'transparent',
+        padding: section.padding || 0,
+    };
+    if (!LayoutComponent) {
+        return ((0, jsx_runtime_1.jsx)("div", { style: styles.container, children: (0, jsx_runtime_1.jsxs)("div", { style: styles.emptyLayout, children: ["Layout \"", section.layoutType, "\" non trouv\u00E9"] }) }));
+    }
+    const handleClick = () => {
+        if (showEditingUI) {
+            selectSection(section.id);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: styles.container, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: handleClick, children: [showEditingUI && isHovered && ((0, jsx_runtime_1.jsx)(SectionToolbar, { sectionId: section.id, canMoveUp: index > 0, canMoveDown: index < totalSections - 1 })), (0, jsx_runtime_1.jsx)("div", { style: wrapperStyle, className: section.className, children: (0, jsx_runtime_1.jsx)(LayoutComponent, { section: section, isEditing: showEditingUI, onContentChange: handleContentChange }) })] }));
+}
+exports.default = SectionComponent;