@qwanyx/ai-editor 1.4.6 → 1.5.0

package/dist/components/PaddingEditor.d.ts

@@ -0,0 +1,11 @@
+import { PaddingValues } from '../types/page';
+export type { PaddingValues };
+export interface PaddingEditorProps {
+    value: PaddingValues | string | undefined;
+    onChange: (value: PaddingValues) => void;
+    unit?: 'px' | 'rem';
+    label?: string;
+}
+export declare function PaddingEditor({ value, onChange, unit, label }: PaddingEditorProps): import("react/jsx-runtime").JSX.Element;
+export default PaddingEditor;
+//# sourceMappingURL=PaddingEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaddingEditor.d.ts","sourceRoot":"","sources":["../../src/components/PaddingEditor.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAM7C,YAAY,EAAE,aAAa,EAAE,CAAA;AAE7B,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,aAAa,GAAG,MAAM,GAAG,SAAS,CAAA;IACzC,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IACxC,IAAI,CAAC,EAAE,IAAI,GAAG,KAAK,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AA2HD,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAW,EAAE,KAAK,EAAE,EAAE,kBAAkB,2CA0JxF;AAED,eAAe,aAAa,CAAA"}

package/dist/components/PaddingEditor.js

@@ -0,0 +1,185 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaddingEditor = PaddingEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+// ============================================
+// Styles
+// ============================================
+const styles = {
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '8px',
+    },
+    label: {
+        fontSize: '14px',
+        fontWeight: 500,
+        color: '#374151',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+    },
+    editorWrapper: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px',
+    },
+    visualEditor: {
+        width: '120px',
+        height: '80px',
+        position: 'relative',
+        backgroundColor: '#f3f4f6',
+        borderRadius: '4px',
+        border: '1px solid #d1d5db',
+    },
+    innerBox: {
+        position: 'absolute',
+        backgroundColor: '#dbeafe',
+        border: '1px dashed #3b82f6',
+        borderRadius: '2px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: '10px',
+        color: '#6b7280',
+    },
+    inputsGrid: {
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr',
+        gridTemplateRows: '1fr 1fr',
+        gap: '8px',
+        flex: 1,
+    },
+    inputGroup: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '2px',
+    },
+    inputLabel: {
+        fontSize: '10px',
+        color: '#6b7280',
+        textTransform: 'uppercase',
+        letterSpacing: '0.5px',
+    },
+    input: {
+        width: '100%',
+        padding: '6px 8px',
+        border: '1px solid #d1d5db',
+        borderRadius: '4px',
+        fontSize: '13px',
+        boxSizing: 'border-box',
+        outline: 'none',
+    },
+    linkButton: {
+        padding: '4px 8px',
+        border: '1px solid #d1d5db',
+        borderRadius: '4px',
+        backgroundColor: 'white',
+        cursor: 'pointer',
+        fontSize: '12px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: '#6b7280',
+    },
+    linkButtonActive: {
+        backgroundColor: '#eff6ff',
+        borderColor: '#3b82f6',
+        color: '#3b82f6',
+    },
+};
+// ============================================
+// Helper Functions
+// ============================================
+function parsePaddingString(value) {
+    if (!value)
+        return { top: 0, right: 0, bottom: 0, left: 0 };
+    // Remove 'px' or 'rem' and split
+    const parts = value.replace(/px|rem/g, '').trim().split(/\s+/).map(Number);
+    if (parts.length === 1) {
+        return { top: parts[0], right: parts[0], bottom: parts[0], left: parts[0] };
+    }
+    else if (parts.length === 2) {
+        return { top: parts[0], right: parts[1], bottom: parts[0], left: parts[1] };
+    }
+    else if (parts.length === 3) {
+        return { top: parts[0], right: parts[1], bottom: parts[2], left: parts[1] };
+    }
+    else if (parts.length >= 4) {
+        return { top: parts[0], right: parts[1], bottom: parts[2], left: parts[3] };
+    }
+    return { top: 0, right: 0, bottom: 0, left: 0 };
+}
+function normalizePadding(value) {
+    if (!value)
+        return { top: 0, right: 0, bottom: 0, left: 0 };
+    if (typeof value === 'string')
+        return parsePaddingString(value);
+    return value;
+}
+// ============================================
+// Component
+// ============================================
+function PaddingEditor({ value, onChange, unit = 'px', label }) {
+    const [padding, setPadding] = (0, react_1.useState)(() => normalizePadding(value));
+    const [linked, setLinked] = (0, react_1.useState)(false);
+    // Update internal state when value prop changes
+    (0, react_1.useEffect)(() => {
+        setPadding(normalizePadding(value));
+    }, [value]);
+    // Check if all values are equal for linked state
+    (0, react_1.useEffect)(() => {
+        const allEqual = padding.top === padding.right &&
+            padding.right === padding.bottom &&
+            padding.bottom === padding.left;
+        setLinked(allEqual && padding.top > 0);
+    }, [padding]);
+    const handleChange = (0, react_1.useCallback)((side, newValue) => {
+        let newPadding;
+        if (linked) {
+            // When linked, update all values
+            newPadding = { top: newValue, right: newValue, bottom: newValue, left: newValue };
+        }
+        else {
+            newPadding = { ...padding, [side]: newValue };
+        }
+        setPadding(newPadding);
+        onChange(newPadding);
+    }, [linked, padding, onChange]);
+    const toggleLinked = (0, react_1.useCallback)(() => {
+        if (!linked) {
+            // When linking, set all values to the max of current values
+            const maxValue = Math.max(padding.top, padding.right, padding.bottom, padding.left);
+            const newPadding = { top: maxValue, right: maxValue, bottom: maxValue, left: maxValue };
+            setPadding(newPadding);
+            onChange(newPadding);
+        }
+        setLinked(!linked);
+    }, [linked, padding, onChange]);
+    // Calculate visual representation
+    const scale = 0.3;
+    const maxPadding = Math.max(padding.top, padding.right, padding.bottom, padding.left, 20);
+    const visualTop = Math.min((padding.top / maxPadding) * 25, 25);
+    const visualRight = Math.min((padding.right / maxPadding) * 30, 30);
+    const visualBottom = Math.min((padding.bottom / maxPadding) * 25, 25);
+    const visualLeft = Math.min((padding.left / maxPadding) * 30, 30);
+    const handleInputFocus = (e) => {
+        e.target.style.borderColor = '#3b82f6';
+    };
+    const handleInputBlur = (e) => {
+        e.target.style.borderColor = '#d1d5db';
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: styles.container, children: [label && ((0, jsx_runtime_1.jsxs)("label", { style: styles.label, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '18px', color: '#6b7280' }, children: "padding" }), label] })), (0, jsx_runtime_1.jsxs)("div", { style: styles.editorWrapper, children: [(0, jsx_runtime_1.jsx)("div", { style: styles.visualEditor, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                ...styles.innerBox,
+                                top: `${visualTop + 4}px`,
+                                right: `${visualRight + 4}px`,
+                                bottom: `${visualBottom + 4}px`,
+                                left: `${visualLeft + 4}px`,
+                            }, children: "contenu" }) }), (0, jsx_runtime_1.jsxs)("div", { style: styles.inputsGrid, children: [(0, jsx_runtime_1.jsxs)("div", { style: styles.inputGroup, children: [(0, jsx_runtime_1.jsx)("span", { style: styles.inputLabel, children: "Haut" }), (0, jsx_runtime_1.jsx)("input", { type: "number", value: padding.top, onChange: (e) => handleChange('top', parseInt(e.target.value) || 0), min: 0, style: styles.input, onFocus: handleInputFocus, onBlur: handleInputBlur })] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.inputGroup, children: [(0, jsx_runtime_1.jsx)("span", { style: styles.inputLabel, children: "Droite" }), (0, jsx_runtime_1.jsx)("input", { type: "number", value: padding.right, onChange: (e) => handleChange('right', parseInt(e.target.value) || 0), min: 0, style: styles.input, onFocus: handleInputFocus, onBlur: handleInputBlur })] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.inputGroup, children: [(0, jsx_runtime_1.jsx)("span", { style: styles.inputLabel, children: "Bas" }), (0, jsx_runtime_1.jsx)("input", { type: "number", value: padding.bottom, onChange: (e) => handleChange('bottom', parseInt(e.target.value) || 0), min: 0, style: styles.input, onFocus: handleInputFocus, onBlur: handleInputBlur })] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.inputGroup, children: [(0, jsx_runtime_1.jsx)("span", { style: styles.inputLabel, children: "Gauche" }), (0, jsx_runtime_1.jsx)("input", { type: "number", value: padding.left, onChange: (e) => handleChange('left', parseInt(e.target.value) || 0), min: 0, style: styles.input, onFocus: handleInputFocus, onBlur: handleInputBlur })] })] }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: toggleLinked, style: {
+                            ...styles.linkButton,
+                            ...(linked ? styles.linkButtonActive : {}),
+                        }, title: linked ? 'Valeurs liées' : 'Lier les valeurs', children: (0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '16px' }, children: linked ? 'link' : 'link_off' }) })] })] }));
+}
+exports.default = PaddingEditor;

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

@@ -1 +1 @@
-{"version":3,"file":"PageEditor.d.ts","sourceRoot":"","sources":["../../src/components/PageEditor.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,YAAY,EAOb,MAAM,eAAe,CAAA;AAqsBtB,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"}
+{"version":3,"file":"PageEditor.d.ts","sourceRoot":"","sources":["../../src/components/PageEditor.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,YAAY,EAUb,MAAM,eAAe,CAAA;AAgsBtB,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

@@ -1,10 +1,44 @@
 "use strict";
 'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageEditor = PageEditor;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const page_1 = require("../types/page");
+const PaddingEditor_1 = require("./PaddingEditor");
 const PageContext_1 = require("../context/PageContext");
 const Section_1 = require("./Section");
 const layouts_1 = require("../layouts");
@@ -227,47 +261,57 @@ function LayoutPicker({ onSelect, onClose }) {
                         }, children: "Annuler" }) })] }) }));
 }
 // ============================================
-// Section Options Panel
+// Page Options Panel (page-level settings)
 // ============================================
-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 });
+function PageOptionsPanel() {
+    const { document, setSectionGap, setSeparator, setPagePadding, setBackgroundColor, } = (0, PageContext_1.usePageContext)();
+    const separator = document.separator || page_1.DEFAULT_SEPARATOR;
+    const sectionGap = document.sectionGap ?? 16;
+    // Parse padding to PaddingValues
+    const parsePadding = (value) => {
+        if (!value)
+            return { top: 16, right: 16, bottom: 16, left: 16 };
+        if (typeof value === 'object')
+            return value;
+        const parts = value.replace(/px|rem/g, '').trim().split(/\s+/).map(Number);
+        if (parts.length === 1)
+            return { top: parts[0], right: parts[0], bottom: parts[0], left: parts[0] };
+        if (parts.length === 2)
+            return { top: parts[0], right: parts[1], bottom: parts[0], left: parts[1] };
+        if (parts.length === 4)
+            return { top: parts[0], right: parts[1], bottom: parts[2], left: parts[3] };
+        return { top: 16, right: 16, bottom: 16, left: 16 };
     };
-    // Helper to update content fields
-    const handleContentChange = (key, value) => {
-        const newContent = { ...section.content, [key]: value };
-        updateSection(selectedSectionId, newContent);
+    const handlePaddingChange = (padding) => {
+        setPagePadding(padding);
     };
-    // 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 (*)"] }) })] })), section.layoutType === 'gallery' && ((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: "Mode d'affichage" }), (0, jsx_runtime_1.jsxs)("select", { value: content.layout || 'grid', onChange: (e) => handleContentChange('layout', e.target.value), style: styles.optionInput, children: [(0, jsx_runtime_1.jsx)("option", { value: "grid", children: "Grille (hauteur fixe)" }), (0, jsx_runtime_1.jsx)("option", { value: "masonry", children: "Masonry (largeur fixe)" })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.optionGroup, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.optionLabel, children: "Hauteur des images (px)" }), (0, jsx_runtime_1.jsx)("input", { type: "number", value: content.imageHeight || 200, onChange: (e) => handleContentChange('imageHeight', Number(e.target.value)), min: 50, max: 800, step: 10, style: styles.optionInput })] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.optionGroup, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.optionLabel, children: "Alignement galerie" }), (0, jsx_runtime_1.jsxs)("select", { value: content.alignment || 'left', onChange: (e) => handleContentChange('alignment', e.target.value), style: styles.optionInput, children: [(0, jsx_runtime_1.jsx)("option", { value: "left", children: "Gauche" }), (0, jsx_runtime_1.jsx)("option", { value: "center", children: "Centr\u00E9" }), (0, jsx_runtime_1.jsx)("option", { value: "right", children: "Droite" }), (0, jsx_runtime_1.jsx)("option", { value: "distribute", children: "Distribuer" })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.optionGroup, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.optionLabel, children: "Espacement (px)" }), (0, jsx_runtime_1.jsx)("input", { type: "number", value: content.gap || 8, onChange: (e) => handleContentChange('gap', Number(e.target.value)), min: 0, max: 50, 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.showCaptions || false, onChange: (e) => handleContentChange('showCaptions', e.target.checked) }), "Afficher les l\u00E9gendes"] }) }), content.showCaptions && ((0, jsx_runtime_1.jsxs)("div", { style: styles.optionGroup, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.optionLabel, children: "Alignement l\u00E9gendes" }), (0, jsx_runtime_1.jsxs)("select", { value: content.captionAlign || 'left', onChange: (e) => handleContentChange('captionAlign', e.target.value), style: styles.optionInput, children: [(0, jsx_runtime_1.jsx)("option", { value: "left", children: "Gauche" }), (0, jsx_runtime_1.jsx)("option", { value: "right", children: "Droite" })] })] }))] })), (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: {
+    const handleSeparatorChange = (key, value) => {
+        setSeparator({ [key]: value });
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: styles.optionsPanel, children: [(0, jsx_runtime_1.jsxs)("h3", { style: { marginBottom: '1.5rem', fontSize: '1.125rem', display: 'flex', alignItems: 'center', gap: '8px' }, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '20px' }, children: "settings" }), "Options de la page"] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.optionGroup, children: [(0, jsx_runtime_1.jsxs)("label", { style: styles.optionLabel, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '16px', marginRight: '6px', color: '#666' }, children: "height" }), "Espacement entre sections (px)"] }), (0, jsx_runtime_1.jsx)("input", { type: "number", value: sectionGap, onChange: (e) => setSectionGap(Number(e.target.value)), min: 0, max: 100, style: styles.optionInput })] }), (0, jsx_runtime_1.jsx)("hr", { style: { margin: '1.5rem 0', border: 'none', borderTop: '1px solid #e9ecef' } }), (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', cursor: 'pointer' }, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: separator.enabled, onChange: (e) => handleSeparatorChange('enabled', e.target.checked) }), (0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '16px', color: '#666' }, children: "horizontal_rule" }), "Separateur entre sections"] }) }), separator.enabled && ((0, jsx_runtime_1.jsxs)("div", { style: { marginLeft: '1.5rem', marginBottom: '1rem' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: styles.optionGroup, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.optionLabel, children: "Epaisseur (px)" }), (0, jsx_runtime_1.jsx)("input", { type: "number", value: separator.thickness, onChange: (e) => handleSeparatorChange('thickness', Number(e.target.value)), min: 1, max: 10, style: styles.optionInput })] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.optionGroup, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.optionLabel, children: "Couleur" }), (0, jsx_runtime_1.jsxs)("div", { style: styles.optionRow, children: [(0, jsx_runtime_1.jsx)("input", { type: "color", value: separator.color, onChange: (e) => handleSeparatorChange('color', e.target.value), style: styles.colorInput }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: separator.color, onChange: (e) => handleSeparatorChange('color', e.target.value), style: { ...styles.optionInput, flex: 1 } })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.optionGroup, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.optionLabel, children: "Style" }), (0, jsx_runtime_1.jsxs)("select", { value: separator.style, onChange: (e) => handleSeparatorChange('style', e.target.value), style: styles.optionInput, children: [(0, jsx_runtime_1.jsx)("option", { value: "solid", children: "Solide" }), (0, jsx_runtime_1.jsx)("option", { value: "dashed", children: "Tirets" }), (0, jsx_runtime_1.jsx)("option", { value: "dotted", children: "Points" }), (0, jsx_runtime_1.jsx)("option", { value: "double", children: "Double" })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.optionGroup, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.optionLabel, children: "Largeur" }), (0, jsx_runtime_1.jsxs)("select", { value: separator.width, onChange: (e) => handleSeparatorChange('width', e.target.value), style: styles.optionInput, children: [(0, jsx_runtime_1.jsx)("option", { value: "full", children: "Pleine largeur" }), (0, jsx_runtime_1.jsx)("option", { value: "partial", children: "Partielle (avec marges)" })] })] }), separator.width === 'partial' && ((0, jsx_runtime_1.jsxs)("div", { style: styles.optionGroup, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.optionLabel, children: "Marge laterale (px)" }), (0, jsx_runtime_1.jsx)("input", { type: "number", value: separator.margin || 40, onChange: (e) => handleSeparatorChange('margin', Number(e.target.value)), min: 0, max: 200, style: styles.optionInput })] })), (0, jsx_runtime_1.jsxs)("div", { style: { marginTop: '12px', padding: '8px', backgroundColor: '#f9fafb', borderRadius: '4px' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: '11px', color: '#6b7280', marginBottom: '8px' }, children: "Apercu:" }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                    borderTop: `${separator.thickness}px ${separator.style} ${separator.color}`,
+                                    marginLeft: separator.width === 'partial' ? `${separator.margin || 40}px` : 0,
+                                    marginRight: separator.width === 'partial' ? `${separator.margin || 40}px` : 0,
+                                } })] })] })), (0, jsx_runtime_1.jsx)("hr", { style: { margin: '1.5rem 0', border: 'none', borderTop: '1px solid #e9ecef' } }), (0, jsx_runtime_1.jsx)("div", { style: styles.optionGroup, children: (0, jsx_runtime_1.jsx)(PaddingEditor_1.PaddingEditor, { value: parsePadding(document.padding), onChange: handlePaddingChange, label: "Padding de la page" }) }), (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.jsxs)("label", { style: styles.optionLabel, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '16px', marginRight: '6px', color: '#666' }, children: "format_color_fill" }), "Couleur de fond"] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.optionRow, children: [(0, jsx_runtime_1.jsx)("input", { type: "color", value: document.backgroundColor || '#ffffff', onChange: (e) => setBackgroundColor(e.target.value), style: styles.colorInput }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: document.backgroundColor || '', onChange: (e) => setBackgroundColor(e.target.value), placeholder: "transparent", style: { ...styles.optionInput, flex: 1 } }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setBackgroundColor(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 })] })] }));
+                                }, children: "Reset" })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    marginTop: '2rem',
+                    padding: '1rem',
+                    backgroundColor: '#f0f9ff',
+                    borderRadius: '8px',
+                    border: '1px solid #bae6fd',
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '18px', color: '#0284c7' }, children: "info" }), (0, jsx_runtime_1.jsx)("span", { style: { fontWeight: 500, color: '#0369a1' }, children: "Options des sections" })] }), (0, jsx_runtime_1.jsxs)("p", { style: { margin: 0, fontSize: '0.875rem', color: '#0369a1' }, children: ["Pour modifier les options d'une section specifique, double-cliquez sur sa barre d'outils ou cliquez sur l'icone ", (0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '14px', verticalAlign: 'middle' }, children: "tune" })] })] })] }));
 }
 // ============================================
 // Page Editor Inner (with context)
 // ============================================
 function PageEditorInner() {
-    const { document, isEditing, selectedSectionId, setFormat, addSection, selectSection, } = (0, PageContext_1.usePageContext)();
+    const { document, isEditing, setFormat, addSection, } = (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) => {
@@ -280,14 +324,23 @@ function PageEditorInner() {
     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) }))] }));
+    // Compute page container styles based on document settings
+    const sectionGap = document.sectionGap ?? 16;
+    const pagePadding = document.padding;
+    const separator = document.separator;
+    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)(PageOptionsPanel, {})) : ((0, jsx_runtime_1.jsx)("div", { style: {
+                        ...styles.pageContainer,
+                        backgroundColor: document.backgroundColor || undefined,
+                        padding: typeof pagePadding === 'object'
+                            ? `${pagePadding.top}px ${pagePadding.right}px ${pagePadding.bottom}px ${pagePadding.left}px`
+                            : pagePadding || '1rem',
+                    }, 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 a 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.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: { marginBottom: index < document.sections.length - 1 ? `${sectionGap}px` : 0 }, children: (0, jsx_runtime_1.jsx)(Section_1.SectionComponent, { section: section, index: index, totalSections: document.sections.length, isPreviewMode: isPreviewMode }) }), separator?.enabled && index < document.sections.length - 1 && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                    marginBottom: `${sectionGap}px`,
+                                    borderTop: `${separator.thickness}px ${separator.style} ${separator.color}`,
+                                    marginLeft: separator.width === 'partial' ? `${separator.margin || 40}px` : 0,
+                                    marginRight: separator.width === 'partial' ? `${separator.margin || 40}px` : 0,
+                                } }))] }, 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, {}) }) }));

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

@@ -1 +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;AAqLtD,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,2CA8D/G;AAED,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../src/components/Section.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA;AAkMtD,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,2CAoF/G;AAED,eAAe,gBAAgB,CAAA"}

package/dist/components/Section.js

@@ -6,6 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const layouts_1 = require("../layouts");
 const PageContext_1 = require("../context/PageContext");
+const SectionOptionsModal_1 = require("./SectionOptionsModal");
 // ============================================
 // Styles
 // ============================================
@@ -81,7 +82,7 @@ function ToolbarButton({ onClick, title, children, danger, disabled }) {
             cursor: disabled ? 'not-allowed' : 'pointer',
         }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: children }));
 }
-function SectionToolbar({ sectionId, layoutType, index, canMoveUp, canMoveDown, isSelected, onSelect }) {
+function SectionToolbar({ sectionId, layoutType, index, canMoveUp, canMoveDown, isSelected, onSelect, onDoubleClick }) {
     const { moveSection, deleteSection, duplicateSection } = (0, PageContext_1.usePageContext)();
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             ...styles.sectionToolbar,
@@ -92,20 +93,27 @@ function SectionToolbar({ sectionId, layoutType, index, canMoveUp, canMoveDown,
             borderTopLeftRadius: '4px',
             borderTopRightRadius: '4px',
             cursor: 'pointer',
-        }, onClick: onSelect, children: [(0, jsx_runtime_1.jsxs)("span", { style: styles.toolbarLabel, children: ["\u00A7", index + 1] }), (0, jsx_runtime_1.jsx)("span", { style: { color: '#999' }, children: layoutType }), (0, jsx_runtime_1.jsxs)("div", { style: styles.toolbarActions, children: [(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: () => {
+        }, onClick: onSelect, onDoubleClick: (e) => {
+            e.stopPropagation();
+            onDoubleClick();
+        }, children: [(0, jsx_runtime_1.jsxs)("span", { style: styles.toolbarLabel, children: ["\u00A7", index + 1] }), (0, jsx_runtime_1.jsx)("span", { style: { color: '#999' }, children: layoutType }), (0, jsx_runtime_1.jsx)("span", { style: { color: '#bbb', fontSize: '0.65rem', marginLeft: '4px' }, children: "(double-clic pour options)" }), (0, jsx_runtime_1.jsxs)("div", { style: styles.toolbarActions, children: [(0, jsx_runtime_1.jsx)(ToolbarButton, { onClick: () => moveSection(sectionId, 'up'), title: "Monter", disabled: !canMoveUp, children: (0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '14px' }, children: "arrow_upward" }) }), (0, jsx_runtime_1.jsx)(ToolbarButton, { onClick: () => moveSection(sectionId, 'down'), title: "Descendre", disabled: !canMoveDown, children: (0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '14px' }, children: "arrow_downward" }) }), (0, jsx_runtime_1.jsx)(ToolbarButton, { onClick: () => duplicateSection(sectionId), title: "Dupliquer", children: (0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '14px' }, children: "content_copy" }) }), (0, jsx_runtime_1.jsx)(ToolbarButton, { onClick: onDoubleClick, title: "Options", children: (0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '14px' }, children: "tune" }) }), (0, jsx_runtime_1.jsx)(ToolbarButton, { onClick: () => {
                             if (window.confirm('Supprimer cette section ?')) {
                                 deleteSection(sectionId);
                             }
-                        }, title: "Supprimer", danger: true, children: "\u2715" })] })] }));
+                        }, title: "Supprimer", danger: true, children: (0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '14px' }, children: "delete" }) })] })] }));
 }
 function SectionComponent({ section, index, totalSections, isPreviewMode = false }) {
-    const { isEditing, updateSection, selectedSectionId, selectSection } = (0, PageContext_1.usePageContext)();
+    const { isEditing, updateSection, updateSectionSettings, selectedSectionId, selectSection } = (0, PageContext_1.usePageContext)();
+    const [showOptionsModal, setShowOptionsModal] = (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 handleUpdateSettings = (0, react_1.useCallback)((settings) => {
+        updateSectionSettings(section.id, settings);
+    }, [section.id, updateSectionSettings]);
     const wrapperStyle = {
         ...styles.wrapper,
         ...(isSelected && showEditingUI ? styles.wrapperSelected : {}),
@@ -122,6 +130,9 @@ function SectionComponent({ section, index, totalSections, isPreviewMode = false
             selectSection(section.id);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { style: styles.container, children: [showEditingUI && ((0, jsx_runtime_1.jsx)(SectionToolbar, { sectionId: section.id, layoutType: section.layoutType, index: index, canMoveUp: index > 0, canMoveDown: index < totalSections - 1, isSelected: isSelected, onSelect: handleSelect })), (0, jsx_runtime_1.jsx)("div", { style: wrapperStyle, className: section.className, children: (0, jsx_runtime_1.jsx)(LayoutComponent, { section: section, isEditing: showEditingUI, onContentChange: handleContentChange }) })] }));
+    const handleOpenOptions = () => {
+        setShowOptionsModal(true);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: styles.container, children: [showEditingUI && ((0, jsx_runtime_1.jsx)(SectionToolbar, { sectionId: section.id, layoutType: section.layoutType, index: index, canMoveUp: index > 0, canMoveDown: index < totalSections - 1, isSelected: isSelected, onSelect: handleSelect, onDoubleClick: handleOpenOptions })), (0, jsx_runtime_1.jsx)("div", { style: wrapperStyle, className: section.className, children: (0, jsx_runtime_1.jsx)(LayoutComponent, { section: section, isEditing: showEditingUI, onContentChange: handleContentChange }) }), (0, jsx_runtime_1.jsx)(SectionOptionsModal_1.SectionOptionsModal, { isOpen: showOptionsModal, onClose: () => setShowOptionsModal(false), section: section, onUpdateSettings: handleUpdateSettings, onUpdateContent: handleContentChange })] }));
 }
 exports.default = SectionComponent;

package/dist/components/SectionOptionsModal.d.ts

@@ -0,0 +1,11 @@
+import { Section } from '../types/page';
+export interface SectionOptionsModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    section: Section;
+    onUpdateSettings: (settings: Partial<Section>) => void;
+    onUpdateContent: (content: unknown) => void;
+}
+export declare function SectionOptionsModal({ isOpen, onClose, section, onUpdateSettings, onUpdateContent, }: SectionOptionsModalProps): import("react/jsx-runtime").JSX.Element | null;
+export default SectionOptionsModal;
+//# sourceMappingURL=SectionOptionsModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionOptionsModal.d.ts","sourceRoot":"","sources":["../../src/components/SectionOptionsModal.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAOvC,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,EAAE,OAAO,CAAA;IAChB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,OAAO,CAAC,KAAK,IAAI,CAAA;IACtD,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CAC5C;AAgMD,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,OAAO,EACP,OAAO,EACP,gBAAgB,EAChB,eAAe,GAChB,EAAE,wBAAwB,kDAgV1B;AAED,eAAe,mBAAmB,CAAA"}

package/dist/components/SectionOptionsModal.js

@@ -0,0 +1,277 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionOptionsModal = SectionOptionsModal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const PaddingEditor_1 = require("./PaddingEditor");
+// ============================================
+// Styles
+// ============================================
+const styles = {
+    overlay: {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 100000,
+    },
+    dialog: {
+        backgroundColor: 'white',
+        borderRadius: '12px',
+        boxShadow: '0 25px 50px rgba(0,0,0,0.25)',
+        width: '520px',
+        maxWidth: '90vw',
+        maxHeight: '85vh',
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+    },
+    header: {
+        padding: '20px 24px 16px 24px',
+        borderBottom: '1px solid #e5e7eb',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    headerTitle: {
+        margin: 0,
+        fontSize: '18px',
+        fontWeight: 600,
+        color: '#111827',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+    },
+    closeButton: {
+        padding: '4px',
+        border: 'none',
+        backgroundColor: 'transparent',
+        cursor: 'pointer',
+        borderRadius: '4px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: '#6b7280',
+    },
+    content: {
+        padding: '20px 24px',
+        overflowY: 'auto',
+        flex: 1,
+    },
+    section: {
+        marginBottom: '24px',
+    },
+    sectionTitle: {
+        fontSize: '14px',
+        fontWeight: 600,
+        color: '#374151',
+        marginBottom: '12px',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+    },
+    field: {
+        marginBottom: '16px',
+    },
+    label: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        marginBottom: '6px',
+        fontSize: '14px',
+        fontWeight: 500,
+        color: '#374151',
+    },
+    labelIcon: {
+        fontSize: '18px',
+        color: '#6b7280',
+    },
+    input: {
+        width: '100%',
+        padding: '10px 12px',
+        border: '1px solid #d1d5db',
+        borderRadius: '8px',
+        fontSize: '14px',
+        boxSizing: 'border-box',
+        outline: 'none',
+    },
+    select: {
+        width: '100%',
+        padding: '10px 12px',
+        border: '1px solid #d1d5db',
+        borderRadius: '8px',
+        fontSize: '14px',
+        backgroundColor: 'white',
+        cursor: 'pointer',
+        outline: 'none',
+    },
+    colorRow: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px',
+    },
+    colorInput: {
+        width: '48px',
+        height: '40px',
+        padding: '2px',
+        borderRadius: '8px',
+        border: '1px solid #d1d5db',
+        cursor: 'pointer',
+    },
+    checkbox: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        cursor: 'pointer',
+    },
+    separator: {
+        border: 'none',
+        borderTop: '1px solid #e5e7eb',
+        margin: '20px 0',
+    },
+    footer: {
+        padding: '16px 24px',
+        borderTop: '1px solid #e5e7eb',
+        display: 'flex',
+        gap: '12px',
+        justifyContent: 'flex-end',
+    },
+    button: {
+        padding: '10px 20px',
+        border: 'none',
+        borderRadius: '8px',
+        fontSize: '14px',
+        fontWeight: 500,
+        cursor: 'pointer',
+    },
+    cancelButton: {
+        border: '1px solid #d1d5db',
+        backgroundColor: 'white',
+        color: '#374151',
+    },
+    saveButton: {
+        backgroundColor: '#3b82f6',
+        color: 'white',
+    },
+    resetButton: {
+        padding: '6px 12px',
+        border: '1px solid #d1d5db',
+        borderRadius: '6px',
+        backgroundColor: 'white',
+        fontSize: '12px',
+        cursor: 'pointer',
+        color: '#6b7280',
+    },
+    layoutBadge: {
+        padding: '4px 8px',
+        backgroundColor: '#f3f4f6',
+        borderRadius: '4px',
+        fontSize: '12px',
+        color: '#6b7280',
+    },
+};
+// ============================================
+// Helper: Parse padding string
+// ============================================
+function parsePaddingString(value) {
+    if (!value)
+        return { top: 0, right: 0, bottom: 0, left: 0 };
+    const parts = value.replace(/px|rem/g, '').trim().split(/\s+/).map(Number);
+    if (parts.length === 1)
+        return { top: parts[0], right: parts[0], bottom: parts[0], left: parts[0] };
+    if (parts.length === 2)
+        return { top: parts[0], right: parts[1], bottom: parts[0], left: parts[1] };
+    if (parts.length === 4)
+        return { top: parts[0], right: parts[1], bottom: parts[2], left: parts[3] };
+    return { top: 0, right: 0, bottom: 0, left: 0 };
+}
+// ============================================
+// Component
+// ============================================
+function SectionOptionsModal({ isOpen, onClose, section, onUpdateSettings, onUpdateContent, }) {
+    // Local state for settings
+    const [backgroundColor, setBackgroundColor] = (0, react_1.useState)(section.backgroundColor || '');
+    const [padding, setPadding] = (0, react_1.useState)(() => parsePaddingString(section.padding));
+    const [className, setClassName] = (0, react_1.useState)(section.className || '');
+    // Local state for content-specific options
+    const content = section.content;
+    const [columns, setColumns] = (0, react_1.useState)(content.columns || 2);
+    const [columnLines, setColumnLines] = (0, react_1.useState)(content.columnLines || 0);
+    const [dropCapEnabled, setDropCapEnabled] = (0, react_1.useState)(content.dropCap?.enabled || false);
+    const [legendAsterisk, setLegendAsterisk] = (0, react_1.useState)(content.legendAsterisk || false);
+    // Gallery options
+    const [galleryLayout, setGalleryLayout] = (0, react_1.useState)(content.layout || 'grid');
+    const [imageHeight, setImageHeight] = (0, react_1.useState)(content.imageHeight || 200);
+    const [galleryAlignment, setGalleryAlignment] = (0, react_1.useState)(content.alignment || 'left');
+    const [galleryGap, setGalleryGap] = (0, react_1.useState)(content.gap || 8);
+    const [showCaptions, setShowCaptions] = (0, react_1.useState)(content.showCaptions || false);
+    const [captionAlign, setCaptionAlign] = (0, react_1.useState)(content.captionAlign || 'left');
+    // Reset when section changes
+    (0, react_1.useEffect)(() => {
+        if (isOpen) {
+            setBackgroundColor(section.backgroundColor || '');
+            setPadding(parsePaddingString(section.padding));
+            setClassName(section.className || '');
+            const content = section.content;
+            setColumns(content.columns || 2);
+            setColumnLines(content.columnLines || 0);
+            setDropCapEnabled(content.dropCap?.enabled || false);
+            setLegendAsterisk(content.legendAsterisk || false);
+            setGalleryLayout(content.layout || 'grid');
+            setImageHeight(content.imageHeight || 200);
+            setGalleryAlignment(content.alignment || 'left');
+            setGalleryGap(content.gap || 8);
+            setShowCaptions(content.showCaptions || false);
+            setCaptionAlign(content.captionAlign || 'left');
+        }
+    }, [isOpen, section]);
+    const handleSave = () => {
+        // Update section settings
+        const paddingStr = padding.top === padding.right && padding.right === padding.bottom && padding.bottom === padding.left
+            ? (padding.top > 0 ? `${padding.top}px` : undefined)
+            : `${padding.top}px ${padding.right}px ${padding.bottom}px ${padding.left}px`;
+        onUpdateSettings({
+            backgroundColor: backgroundColor || undefined,
+            padding: paddingStr,
+            className: className || undefined,
+        });
+        // Update content based on layout type
+        if (section.layoutType === 'ogilvy') {
+            onUpdateContent({
+                ...content,
+                columns,
+                columnLines: columnLines > 0 ? columnLines : undefined,
+                dropCap: { ...(content.dropCap || {}), enabled: dropCapEnabled },
+                legendAsterisk,
+            });
+        }
+        else if (section.layoutType === 'gallery') {
+            onUpdateContent({
+                ...content,
+                layout: galleryLayout,
+                imageHeight,
+                alignment: galleryAlignment,
+                gap: galleryGap,
+                showCaptions,
+                captionAlign,
+            });
+        }
+        onClose();
+    };
+    const handleInputFocus = (e) => {
+        e.target.style.borderColor = '#3b82f6';
+    };
+    const handleInputBlur = (e) => {
+        e.target.style.borderColor = '#d1d5db';
+    };
+    if (!isOpen)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("div", { style: styles.overlay, onClick: onClose, children: (0, jsx_runtime_1.jsxs)("div", { style: styles.dialog, onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsxs)("div", { style: styles.header, children: [(0, jsx_runtime_1.jsxs)("h3", { style: styles.headerTitle, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '20px' }, children: "tune" }), "Options de la section", (0, jsx_runtime_1.jsx)("span", { style: styles.layoutBadge, children: section.layoutType })] }), (0, jsx_runtime_1.jsx)("button", { style: styles.closeButton, onClick: onClose, children: (0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '20px' }, children: "close" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.content, children: [section.layoutType === 'ogilvy' && ((0, jsx_runtime_1.jsxs)("div", { style: styles.section, children: [(0, jsx_runtime_1.jsxs)("div", { style: styles.sectionTitle, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '18px' }, children: "view_column" }), "Options Ogilvy"] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.field, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.label, children: "Colonnes" }), (0, jsx_runtime_1.jsxs)("select", { value: columns, onChange: (e) => setColumns(Number(e.target.value)), style: styles.select, onFocus: handleInputFocus, onBlur: handleInputBlur, 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.field, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.label, children: "Hauteur (lignes)" }), (0, jsx_runtime_1.jsx)("input", { type: "number", value: columnLines || '', onChange: (e) => setColumnLines(Number(e.target.value) || 0), placeholder: "auto", min: 5, max: 100, style: styles.input, onFocus: handleInputFocus, onBlur: handleInputBlur })] }), (0, jsx_runtime_1.jsx)("div", { style: styles.field, children: (0, jsx_runtime_1.jsxs)("label", { style: styles.checkbox, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: dropCapEnabled, onChange: (e) => setDropCapEnabled(e.target.checked) }), "Lettrine"] }) }), (0, jsx_runtime_1.jsx)("div", { style: styles.field, children: (0, jsx_runtime_1.jsxs)("label", { style: styles.checkbox, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: legendAsterisk, onChange: (e) => setLegendAsterisk(e.target.checked) }), "Ast\u00E9risque (*)"] }) })] })), section.layoutType === 'gallery' && ((0, jsx_runtime_1.jsxs)("div", { style: styles.section, children: [(0, jsx_runtime_1.jsxs)("div", { style: styles.sectionTitle, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '18px' }, children: "collections" }), "Options Galerie"] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.field, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.label, children: "Mode d'affichage" }), (0, jsx_runtime_1.jsxs)("select", { value: galleryLayout, onChange: (e) => setGalleryLayout(e.target.value), style: styles.select, onFocus: handleInputFocus, onBlur: handleInputBlur, children: [(0, jsx_runtime_1.jsx)("option", { value: "grid", children: "Grille (hauteur fixe)" }), (0, jsx_runtime_1.jsx)("option", { value: "masonry", children: "Masonry (largeur fixe)" })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.field, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.label, children: "Hauteur des images (px)" }), (0, jsx_runtime_1.jsx)("input", { type: "number", value: imageHeight, onChange: (e) => setImageHeight(Number(e.target.value)), min: 50, max: 800, step: 10, style: styles.input, onFocus: handleInputFocus, onBlur: handleInputBlur })] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.field, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.label, children: "Alignement" }), (0, jsx_runtime_1.jsxs)("select", { value: galleryAlignment, onChange: (e) => setGalleryAlignment(e.target.value), style: styles.select, onFocus: handleInputFocus, onBlur: handleInputBlur, children: [(0, jsx_runtime_1.jsx)("option", { value: "left", children: "Gauche" }), (0, jsx_runtime_1.jsx)("option", { value: "center", children: "Centre" }), (0, jsx_runtime_1.jsx)("option", { value: "right", children: "Droite" }), (0, jsx_runtime_1.jsx)("option", { value: "distribute", children: "Distribuer" })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.field, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.label, children: "Espacement (px)" }), (0, jsx_runtime_1.jsx)("input", { type: "number", value: galleryGap, onChange: (e) => setGalleryGap(Number(e.target.value)), min: 0, max: 50, style: styles.input, onFocus: handleInputFocus, onBlur: handleInputBlur })] }), (0, jsx_runtime_1.jsx)("div", { style: styles.field, children: (0, jsx_runtime_1.jsxs)("label", { style: styles.checkbox, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: showCaptions, onChange: (e) => setShowCaptions(e.target.checked) }), "Afficher les legendes"] }) }), showCaptions && ((0, jsx_runtime_1.jsxs)("div", { style: styles.field, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.label, children: "Alignement des legendes" }), (0, jsx_runtime_1.jsxs)("select", { value: captionAlign, onChange: (e) => setCaptionAlign(e.target.value), style: styles.select, onFocus: handleInputFocus, onBlur: handleInputBlur, children: [(0, jsx_runtime_1.jsx)("option", { value: "left", children: "Gauche" }), (0, jsx_runtime_1.jsx)("option", { value: "right", children: "Droite" })] })] }))] })), (0, jsx_runtime_1.jsx)("hr", { style: styles.separator }), (0, jsx_runtime_1.jsxs)("div", { style: styles.section, children: [(0, jsx_runtime_1.jsxs)("div", { style: styles.sectionTitle, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '18px' }, children: "palette" }), "Apparence"] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.field, children: [(0, jsx_runtime_1.jsx)("label", { style: styles.label, children: "Couleur de fond" }), (0, jsx_runtime_1.jsxs)("div", { style: styles.colorRow, children: [(0, jsx_runtime_1.jsx)("input", { type: "color", value: backgroundColor || '#ffffff', onChange: (e) => setBackgroundColor(e.target.value), style: styles.colorInput }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: backgroundColor, onChange: (e) => setBackgroundColor(e.target.value), placeholder: "transparent", style: { ...styles.input, flex: 1 }, onFocus: handleInputFocus, onBlur: handleInputBlur }), (0, jsx_runtime_1.jsx)("button", { style: styles.resetButton, onClick: () => setBackgroundColor(''), children: "Reset" })] })] }), (0, jsx_runtime_1.jsx)(PaddingEditor_1.PaddingEditor, { value: padding, onChange: setPadding, label: "Padding" })] }), (0, jsx_runtime_1.jsx)("hr", { style: styles.separator }), (0, jsx_runtime_1.jsxs)("div", { style: styles.field, children: [(0, jsx_runtime_1.jsxs)("label", { style: styles.label, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: styles.labelIcon, children: "code" }), "Classe CSS"] }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: className, onChange: (e) => setClassName(e.target.value), placeholder: "ex: my-custom-class", style: styles.input, onFocus: handleInputFocus, onBlur: handleInputBlur })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: styles.footer, children: [(0, jsx_runtime_1.jsx)("button", { style: { ...styles.button, ...styles.cancelButton }, onClick: onClose, children: "Annuler" }), (0, jsx_runtime_1.jsx)("button", { style: { ...styles.button, ...styles.saveButton }, onClick: handleSave, children: "Enregistrer" })] })] }) }));
+}
+exports.default = SectionOptionsModal;

package/dist/context/PageContext.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PageDocument, PageFormat, Section, LayoutType, PrintSize, VideoSize } from '../types/page';
+import { PageDocument, PageFormat, Section, LayoutType, PrintSize, VideoSize, SectionSeparator, PaddingValues } from '../types/page';
 interface PageContextValue {
     document: PageDocument;
     isEditing: boolean;
@@ -9,6 +9,10 @@ interface PageContextValue {
     setPrintSize: (size: PrintSize) => void;
     setVideoSize: (size: VideoSize) => void;
     setTitle: (title: string) => void;
+    setSectionGap: (gap: number | undefined) => void;
+    setSeparator: (separator: Partial<SectionSeparator>) => void;
+    setPagePadding: (padding: PaddingValues | string | undefined) => void;
+    setBackgroundColor: (color: string | undefined) => void;
     addSection: (layoutType: LayoutType, content: unknown, index?: number) => void;
     updateSection: (id: string, content: unknown) => void;
     updateSectionSettings: (id: string, settings: Partial<Section>) => void;

package/dist/context/PageContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageContext.d.ts","sourceRoot":"","sources":["../../src/context/PageContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsE,MAAM,OAAO,CAAA;AAC1F,OAAO,EACL,YAAY,EACZ,UAAU,EACV,OAAO,EACP,UAAU,EACV,SAAS,EACT,SAAS,EAIV,MAAM,eAAe,CAAA;AAqKtB,UAAU,gBAAgB;IAExB,QAAQ,EAAE,YAAY,CAAA;IACtB,SAAS,EAAE,OAAO,CAAA;IAClB,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAA;IAGhC,WAAW,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAA;IACxC,SAAS,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAA;IACvC,YAAY,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACvC,YAAY,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACvC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,UAAU,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9E,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACrD,qBAAqB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,OAAO,CAAC,KAAK,IAAI,CAAA;IACvE,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAA;IAC3D,eAAe,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACxC,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAG1C,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,GAAG,SAAS,CAAA;IACnD,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,CAAA;IACvC,kBAAkB,EAAE,MAAM,OAAO,GAAG,SAAS,CAAA;CAC9C;AAED,QAAA,MAAM,WAAW,wCAA+C,CAAA;AAMhE,wBAAgB,cAAc,qBAM7B;AAGD,wBAAgB,kBAAkB,4BAEjC;AAMD,UAAU,iBAAiB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,eAAe,CAAC,EAAE,YAAY,CAAA;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAA;CAC5C;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,eAAe,EACf,SAAgB,EAChB,QAAQ,GACT,EAAE,iBAAiB,2CAwInB;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"PageContext.d.ts","sourceRoot":"","sources":["../../src/context/PageContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsE,MAAM,OAAO,CAAA;AAC1F,OAAO,EACL,YAAY,EACZ,UAAU,EACV,OAAO,EACP,UAAU,EACV,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,aAAa,EAId,MAAM,eAAe,CAAA;AAwMtB,UAAU,gBAAgB;IAExB,QAAQ,EAAE,YAAY,CAAA;IACtB,SAAS,EAAE,OAAO,CAAA;IAClB,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAA;IAGhC,WAAW,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAA;IACxC,SAAS,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAA;IACvC,YAAY,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACvC,YAAY,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACvC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAA;IAChD,YAAY,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC5D,cAAc,EAAE,CAAC,OAAO,EAAE,aAAa,GAAG,MAAM,GAAG,SAAS,KAAK,IAAI,CAAA;IACrE,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAA;IACvD,UAAU,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9E,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACrD,qBAAqB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,OAAO,CAAC,KAAK,IAAI,CAAA;IACvE,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAA;IAC3D,eAAe,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACxC,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAG1C,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,GAAG,SAAS,CAAA;IACnD,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,CAAA;IACvC,kBAAkB,EAAE,MAAM,OAAO,GAAG,SAAS,CAAA;CAC9C;AAED,QAAA,MAAM,WAAW,wCAA+C,CAAA;AAMhE,wBAAgB,cAAc,qBAM7B;AAGD,wBAAgB,kBAAkB,4BAEjC;AAMD,UAAU,iBAAiB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,eAAe,CAAC,EAAE,YAAY,CAAA;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAA;CAC5C;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,eAAe,EACf,SAAgB,EAChB,QAAQ,GACT,EAAE,iBAAiB,2CAgKnB;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/context/PageContext.js

@@ -73,6 +73,33 @@ function pageReducer(state, action) {
                 title: action.payload,
                 updatedAt: now,
             };
+        case 'SET_SECTION_GAP':
+            return {
+                ...state,
+                sectionGap: action.payload,
+                updatedAt: now,
+            };
+        case 'SET_SEPARATOR':
+            return {
+                ...state,
+                separator: {
+                    ...(state.separator || { enabled: false, thickness: 1, color: '#e5e7eb', style: 'solid', width: 'full' }),
+                    ...action.payload,
+                },
+                updatedAt: now,
+            };
+        case 'SET_PAGE_PADDING':
+            return {
+                ...state,
+                padding: action.payload,
+                updatedAt: now,
+            };
+        case 'SET_BACKGROUND_COLOR':
+            return {
+                ...state,
+                backgroundColor: action.payload,
+                updatedAt: now,
+            };
         case 'ADD_SECTION': {
             const newSection = (0, page_1.createSection)(action.payload.layoutType, action.payload.content);
             const sections = [...state.sections];
@@ -204,6 +231,18 @@ function PageProvider({ children, initialDocument, isEditing = true, onChange, }
     const setTitle = (0, react_1.useCallback)((title) => {
         dispatch({ type: 'SET_TITLE', payload: title });
     }, []);
+    const setSectionGap = (0, react_1.useCallback)((gap) => {
+        dispatch({ type: 'SET_SECTION_GAP', payload: gap });
+    }, []);
+    const setSeparator = (0, react_1.useCallback)((separator) => {
+        dispatch({ type: 'SET_SEPARATOR', payload: separator });
+    }, []);
+    const setPagePadding = (0, react_1.useCallback)((padding) => {
+        dispatch({ type: 'SET_PAGE_PADDING', payload: padding });
+    }, []);
+    const setBackgroundColor = (0, react_1.useCallback)((color) => {
+        dispatch({ type: 'SET_BACKGROUND_COLOR', payload: color });
+    }, []);
     const addSection = (0, react_1.useCallback)((layoutType, content, index) => {
         dispatch({ type: 'ADD_SECTION', payload: { layoutType, content, index } });
     }, []);
@@ -241,6 +280,10 @@ function PageProvider({ children, initialDocument, isEditing = true, onChange, }
         setPrintSize,
         setVideoSize,
         setTitle,
+        setSectionGap,
+        setSeparator,
+        setPagePadding,
+        setBackgroundColor,
         addSection,
         updateSection,
         updateSectionSettings,
@@ -261,6 +304,10 @@ function PageProvider({ children, initialDocument, isEditing = true, onChange, }
         setPrintSize,
         setVideoSize,
         setTitle,
+        setSectionGap,
+        setSeparator,
+        setPagePadding,
+        setBackgroundColor,
         addSection,
         updateSection,
         updateSectionSettings,

package/dist/index.d.ts

@@ -24,6 +24,10 @@ export { SmartEditor, SmartViewer } from './components/SmartEditor';
 export type { SmartEditorProps, SmartViewerProps } from './components/SmartEditor';
 export { ImageMetadataDialog } from './components/ImageMetadataDialog';
 export type { ImageMetadata, ImageMetadataDialogProps } from './components/ImageMetadataDialog';
+export { SectionOptionsModal } from './components/SectionOptionsModal';
+export type { SectionOptionsModalProps } from './components/SectionOptionsModal';
+export { PaddingEditor } from './components/PaddingEditor';
+export type { PaddingEditorProps } from './components/PaddingEditor';
 export { registerLayout, getLayout, getAllLayouts, getLayoutsByCategory, getLayoutComponent, getLayoutDefaultContent, initializeLayouts, } from './layouts';
 export type { LayoutComponentProps, LayoutRegistryEntry } from './layouts';
 export { OgilvyLayout, createDefaultOgilvyContent } from './layouts/OgilvyLayout';
@@ -32,7 +36,7 @@ export type { RichTextContent } from './layouts/RichTextLayout';
 export { GalleryLayout, createDefaultGalleryContent } from './layouts/GalleryLayout';
 export { detectFormat, isPageDocument, isLexicalState, lexicalToPageDocument, pageDocumentToLexical, ensurePageDocument, isSimpleDocument, prepareForSave, } from './utils/format';
 export type { ContentFormat, FormatDetectionResult, SaveOptions } from './utils/format';
-export type { PageDocument, PageFormat, Section, LayoutType, PrintSize, VideoSize, SectionAnimation, AnimationType, DropCapConfig, ImageData, OgilvyContent, HeroContent, TwoColumnsContent, ThreeColumnsContent, TextOnlyContent, ImageOnlyContent, QuoteContent, GalleryContent, GalleryImage, LayoutDefinition, SectionProps, } from './types/page';
-export { PRINT_PRESETS, VIDEO_PRESETS, DEFAULT_DROP_CAP, generateId, createSection, createEmptyPage, } from './types/page';
+export type { PageDocument, PageFormat, Section, LayoutType, PrintSize, VideoSize, SectionAnimation, AnimationType, DropCapConfig, ImageData, OgilvyContent, HeroContent, TwoColumnsContent, ThreeColumnsContent, TextOnlyContent, ImageOnlyContent, QuoteContent, GalleryContent, GalleryImage, LayoutDefinition, SectionProps, SectionSeparator, PaddingValues, } from './types/page';
+export { PRINT_PRESETS, VIDEO_PRESETS, DEFAULT_DROP_CAP, DEFAULT_SEPARATOR, generateId, createSection, createEmptyPage, } from './types/page';
 export { RichTextEditor as AIEditor } from './components/RichTextEditor';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ensurePageDocument = exports.pageDocumentToLexical = exports.lexicalToPageDocument = exports.isLexicalState = exports.isPageDocument = exports.detectFormat = exports.createDefaultGalleryContent = exports.GalleryLayout = exports.createDefaultRichTextContent = exports.RichTextLayout = exports.createDefaultOgilvyContent = exports.OgilvyLayout = exports.initializeLayouts = exports.getLayoutDefaultContent = exports.getLayoutComponent = exports.getLayoutsByCategory = exports.getAllLayouts = exports.getLayout = exports.registerLayout = exports.ImageMetadataDialog = exports.SmartViewer = exports.SmartEditor = exports.SectionComponent = exports.PageViewer = exports.PageEditor = exports.usePageContextSafe = exports.usePageContext = exports.PageProvider = exports.PageContext = exports.useEditorMode = exports.EditorModeProvider = exports.EditorModeContext = exports.SimpleLinkPlugin = exports.ImageLinkPlugin = exports.INSERT_OBJECT_COMMAND = exports.InsertObjectPlugin = exports.$wrapSelectionInSimpleLink = exports.$isSimpleLinkNode = exports.$createSimpleLinkNode = exports.SimpleLinkNode = exports.$wrapSelectionInImageLink = exports.$isImageLinkNode = exports.$createImageLinkNode = exports.ImageLinkNode = exports.$isImageNode = exports.$createImageNode = exports.ImageNode = exports.EditorToolbar = exports.RichTextViewer = exports.RichTextEditor = void 0;
-exports.AIEditor = exports.createEmptyPage = exports.createSection = exports.generateId = exports.DEFAULT_DROP_CAP = exports.VIDEO_PRESETS = exports.PRINT_PRESETS = exports.prepareForSave = exports.isSimpleDocument = void 0;
+exports.lexicalToPageDocument = exports.isLexicalState = exports.isPageDocument = exports.detectFormat = exports.createDefaultGalleryContent = exports.GalleryLayout = exports.createDefaultRichTextContent = exports.RichTextLayout = exports.createDefaultOgilvyContent = exports.OgilvyLayout = exports.initializeLayouts = exports.getLayoutDefaultContent = exports.getLayoutComponent = exports.getLayoutsByCategory = exports.getAllLayouts = exports.getLayout = exports.registerLayout = exports.PaddingEditor = exports.SectionOptionsModal = exports.ImageMetadataDialog = exports.SmartViewer = exports.SmartEditor = exports.SectionComponent = exports.PageViewer = exports.PageEditor = exports.usePageContextSafe = exports.usePageContext = exports.PageProvider = exports.PageContext = exports.useEditorMode = exports.EditorModeProvider = exports.EditorModeContext = exports.SimpleLinkPlugin = exports.ImageLinkPlugin = exports.INSERT_OBJECT_COMMAND = exports.InsertObjectPlugin = exports.$wrapSelectionInSimpleLink = exports.$isSimpleLinkNode = exports.$createSimpleLinkNode = exports.SimpleLinkNode = exports.$wrapSelectionInImageLink = exports.$isImageLinkNode = exports.$createImageLinkNode = exports.ImageLinkNode = exports.$isImageNode = exports.$createImageNode = exports.ImageNode = exports.EditorToolbar = exports.RichTextViewer = exports.RichTextEditor = void 0;
+exports.AIEditor = exports.createEmptyPage = exports.createSection = exports.generateId = exports.DEFAULT_SEPARATOR = exports.DEFAULT_DROP_CAP = exports.VIDEO_PRESETS = exports.PRINT_PRESETS = exports.prepareForSave = exports.isSimpleDocument = exports.ensurePageDocument = exports.pageDocumentToLexical = void 0;
 // Main WYSIWYG editor component
 var RichTextEditor_1 = require("./components/RichTextEditor");
 Object.defineProperty(exports, "RichTextEditor", { enumerable: true, get: function () { return RichTextEditor_1.RichTextEditor; } });
@@ -61,6 +61,11 @@ Object.defineProperty(exports, "SmartViewer", { enumerable: true, get: function
 // Reusable dialogs
 var ImageMetadataDialog_1 = require("./components/ImageMetadataDialog");
 Object.defineProperty(exports, "ImageMetadataDialog", { enumerable: true, get: function () { return ImageMetadataDialog_1.ImageMetadataDialog; } });
+var SectionOptionsModal_1 = require("./components/SectionOptionsModal");
+Object.defineProperty(exports, "SectionOptionsModal", { enumerable: true, get: function () { return SectionOptionsModal_1.SectionOptionsModal; } });
+// Reusable editors
+var PaddingEditor_1 = require("./components/PaddingEditor");
+Object.defineProperty(exports, "PaddingEditor", { enumerable: true, get: function () { return PaddingEditor_1.PaddingEditor; } });
 // Layouts
 var layouts_1 = require("./layouts");
 Object.defineProperty(exports, "registerLayout", { enumerable: true, get: function () { return layouts_1.registerLayout; } });
@@ -94,6 +99,7 @@ var page_1 = require("./types/page");
 Object.defineProperty(exports, "PRINT_PRESETS", { enumerable: true, get: function () { return page_1.PRINT_PRESETS; } });
 Object.defineProperty(exports, "VIDEO_PRESETS", { enumerable: true, get: function () { return page_1.VIDEO_PRESETS; } });
 Object.defineProperty(exports, "DEFAULT_DROP_CAP", { enumerable: true, get: function () { return page_1.DEFAULT_DROP_CAP; } });
+Object.defineProperty(exports, "DEFAULT_SEPARATOR", { enumerable: true, get: function () { return page_1.DEFAULT_SEPARATOR; } });
 Object.defineProperty(exports, "generateId", { enumerable: true, get: function () { return page_1.generateId; } });
 Object.defineProperty(exports, "createSection", { enumerable: true, get: function () { return page_1.createSection; } });
 Object.defineProperty(exports, "createEmptyPage", { enumerable: true, get: function () { return page_1.createEmptyPage; } });

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

@@ -1 +1 @@
-{"version":3,"file":"GalleryLayout.d.ts","sourceRoot":"","sources":["../../src/layouts/GalleryLayout.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAgB,MAAM,eAAe,CAAA;AAC5D,OAAO,EAAkB,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAoG9D,wBAAgB,2BAA2B,IAAI,cAAc,CAU5D;AA0HD,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,SAAS,EACT,eAAe,GAChB,EAAE,oBAAoB,CAAC,cAAc,CAAC,2CAoMtC"}
+{"version":3,"file":"GalleryLayout.d.ts","sourceRoot":"","sources":["../../src/layouts/GalleryLayout.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAgB,MAAM,eAAe,CAAA;AAC5D,OAAO,EAAkB,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAoG9D,wBAAgB,2BAA2B,IAAI,cAAc,CAU5D;AA0HD,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,SAAS,EACT,eAAe,GAChB,EAAE,oBAAoB,CAAC,cAAc,CAAC,2CAkMtC"}

package/dist/layouts/GalleryLayout.js

@@ -139,7 +139,7 @@ function ImageItem({ image, index, isEditing, showCaption, captionAlign, imageHe
                 } }), hasCaption && ((0, jsx_runtime_1.jsxs)("div", { style: {
                     ...styles.caption,
                     textAlign: captionAlign,
-                }, children: [image.title && (0, jsx_runtime_1.jsx)("span", { style: styles.captionTitle, children: image.title }), image.comment && (0, jsx_runtime_1.jsx)("span", { style: { display: 'block' }, children: image.comment }), (image.photographer || image.copyright) && ((0, jsx_runtime_1.jsxs)("div", { style: { ...styles.captionMeta, justifyContent: captionAlign === 'right' ? 'flex-end' : 'flex-start' }, children: [image.copyright && ((0, jsx_runtime_1.jsxs)("span", { style: { display: 'flex', alignItems: 'center', gap: '2px' }, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '10px' }, children: "copyright" }), image.copyright] })), image.photographer && ((0, jsx_runtime_1.jsxs)("span", { style: { display: 'flex', alignItems: 'center', gap: '2px', marginLeft: image.copyright ? '8px' : 0 }, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '10px' }, children: "photo_camera" }), image.photographer] }))] }))] })), 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" })] }))] }));
+                }, children: [image.title && (0, jsx_runtime_1.jsx)("span", { style: styles.captionTitle, children: image.title }), image.comment && (0, jsx_runtime_1.jsx)("span", { style: { display: 'block' }, children: image.comment }), (image.photographer || image.copyright) && ((0, jsx_runtime_1.jsxs)("div", { style: { ...styles.captionMeta, justifyContent: captionAlign === 'right' ? 'flex-end' : 'flex-start' }, children: [image.copyright && ((0, jsx_runtime_1.jsxs)("span", { style: { display: 'flex', alignItems: 'center', gap: '2px' }, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '10px' }, children: "copyright" }), image.copyright] })), image.photographer && ((0, jsx_runtime_1.jsxs)("span", { style: { display: 'flex', alignItems: 'center', gap: '2px', marginLeft: image.copyright ? '8px' : 0 }, children: [(0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '10px' }, children: "photo_camera" }), image.photographer] }))] }))] })), 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: (0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '18px' }, children: "edit" }) }), (0, jsx_runtime_1.jsx)("button", { style: styles.editButton, onClick: () => onDelete(index), title: "Supprimer", children: (0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '18px' }, children: "delete" }) })] }))] }));
 }
 // ============================================
 // Main Layout Component
@@ -207,12 +207,10 @@ function GalleryLayout({ section, isEditing, onContentChange, }) {
                         }, children: [(0, jsx_runtime_1.jsx)("button", { style: {
                                     ...styles.editButton,
                                     padding: '0.25rem',
-                                    fontSize: '0.75rem',
-                                }, onClick: () => handleEditImage(index), title: "Modifier", children: "\u270F\uFE0F" }), (0, jsx_runtime_1.jsx)("button", { style: {
+                                }, onClick: () => handleEditImage(index), title: "Modifier", children: (0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '16px' }, children: "edit" }) }), (0, jsx_runtime_1.jsx)("button", { style: {
                                     ...styles.editButton,
                                     padding: '0.25rem',
-                                    fontSize: '0.75rem',
-                                }, onClick: () => handleDeleteImage(index), title: "Supprimer", children: "\uD83D\uDDD1\uFE0F" })] }))] }) }, index))) }));
+                                }, onClick: () => handleDeleteImage(index), title: "Supprimer", children: (0, jsx_runtime_1.jsx)("span", { className: "material-icons", style: { fontSize: '16px' }, children: "delete" }) })] }))] }) }, 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);

package/dist/types/page.d.ts

@@ -119,6 +119,21 @@ export interface QuoteContent {
     style: 'simple' | 'large' | 'with-image';
     authorImage?: ImageData;
 }
+export interface PaddingValues {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export interface SectionSeparator {
+    enabled: boolean;
+    thickness: number;
+    color: string;
+    style: 'solid' | 'dashed' | 'dotted' | 'double';
+    width: 'full' | 'partial';
+    margin?: number;
+}
+export declare const DEFAULT_SEPARATOR: SectionSeparator;
 export interface PageDocument {
     id: string;
     title?: string;
@@ -131,6 +146,9 @@ export interface PageDocument {
     defaultFontFamily?: string;
     defaultFontSize?: number;
     backgroundColor?: string;
+    sectionGap?: number;
+    separator?: SectionSeparator;
+    padding?: PaddingValues | string;
 }
 export interface LayoutDefinition<T = unknown> {
     type: LayoutType;

package/dist/types/page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../src/types/page.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../src/types/page.ts"],"names":[],"mappings":"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"}

package/dist/types/page.js

@@ -4,7 +4,7 @@
  * Extension de qwanyx-ai-editor
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_DROP_CAP = exports.VIDEO_PRESETS = exports.PRINT_PRESETS = void 0;
+exports.DEFAULT_SEPARATOR = exports.DEFAULT_DROP_CAP = exports.VIDEO_PRESETS = exports.PRINT_PRESETS = void 0;
 exports.generateId = generateId;
 exports.createSection = createSection;
 exports.createEmptyPage = createEmptyPage;
@@ -29,6 +29,14 @@ exports.DEFAULT_DROP_CAP = {
     fontSize: 3,
     lineHeight: 3,
 };
+exports.DEFAULT_SEPARATOR = {
+    enabled: false,
+    thickness: 1,
+    color: '#e5e7eb',
+    style: 'solid',
+    width: 'full',
+    margin: 40,
+};
 // ============================================
 // Helpers
 // ============================================

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qwanyx/ai-editor",
-  "version": "1.4.6",
+  "version": "1.5.0",
   "description": "AI-powered WYSIWYG rich text editor",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",