@1urso/generic-editor 0.1.47 → 0.1.48

package/dist/generic-editor.js

@@ -18546,5 +18546,5 @@ const GenericEditor = (n) => /* @__PURE__ */ jsx(EditorProvider, {
 	availableProps: n.layout.props,
 	theme: n.theme,
 	children: /* @__PURE__ */ jsx(EditorContent, { ...n })
-}), generateHTML = (n, _, E = {}) => Function("elements", "data", "options", getRendererCode() + "\nreturn renderTemplate(elements, data, options);")(n, _, E), getRendererCode = () => "\n/**\n * Render Template\n * @param {Array} elements - The JSON configuration of elements\n * @param {Object|Array} data - The data object to inject (Object for single, Array for list)\n * @param {Object} options - { isList: boolean, listSettings: { sortProp: string, sortOrder: 'asc'|'desc', newestPosition: 'top'|'bottom', scrollDirection: 'up'|'down', containerHeight: number }, canvasHeight: number }\n * @returns {string} - The generated HTML string\n */\nfunction renderTemplate(elements, data, options = {}) {\n    const { isList, listSettings, canvasHeight } = options;\n\n    const measureTextHeight = (text, width, fontFamily, fontSize, lineHeightMultiplier = 1.2) => {\n        if (!text) return 0;\n        try {\n            const canvas = document.createElement('canvas');\n            const context = canvas.getContext('2d');\n            if (!context) return 0;\n            context.font = `${fontSize}px ${fontFamily}`;\n            const words = String(text).split(' ');\n            let line = '';\n            let lineCount = 1;\n            for (let i = 0; i < words.length; i++) {\n                const testLine = line + words[i] + ' ';\n                const metrics = context.measureText(testLine);\n                const testWidth = metrics.width;\n                if (testWidth > width && i > 0) {\n                    line = words[i] + ' ';\n                    lineCount++;\n                } else {\n                    line = testLine;\n                }\n            }\n            const explicitLines = String(text).split('\\n').length - 1;\n            lineCount += explicitLines;\n            return Math.ceil(lineCount * fontSize * lineHeightMultiplier);\n        } catch (_) {\n            return 0;\n        }\n    };\n\n    const computeLayout = (elements, itemData) => {\n        const layoutElements = JSON.parse(JSON.stringify(elements));\n        \n        const isInside = (inner, outer) => {\n             const eps = 0.1;\n             return (\n                 inner.x >= outer.x - eps &&\n                 inner.x + inner.width <= outer.x + outer.width + eps &&\n                 inner.y >= outer.y - eps &&\n                 inner.y + inner.height <= outer.y + outer.height + eps\n             );\n        };\n\n        const autoGrowElements = layoutElements\n            .filter(el => (el.type === 'text' || el.type === 'text-container') && el.autoGrow)\n            .sort((a, b) => a.y - b.y);\n\n        autoGrowElements.forEach(textEl => {\n            let content = textEl.content;\n            content = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {\n                const val = itemData[key.trim()];\n                return val !== undefined && val !== null ? String(val) : match;\n            });\n            \n            const fontSize = parseInt(String((textEl.style && textEl.style.fontSize) || 16));\n            const fontFamily = String((textEl.style && textEl.style.fontFamily) || 'Arial');\n            \n            const isHorizontal = textEl.type === 'text-container' && textEl.containerExpansion === 'horizontal';\n            \n            if (isHorizontal) {\n                // Horizontal expansion: Update width only\n                // Requires canvas context which is available in measureTextHeight scope or we create new one\n                // For simplicity, we can't easily access the measure logic here if it's not exposed, \n                // but measureTextHeight is available in this scope.\n                // However measureTextHeight calculates HEIGHT. We need WIDTH.\n                \n                try {\n                    const canvas = document.createElement('canvas');\n                    const context = canvas.getContext('2d');\n                    if (context) {\n                         context.font = `${fontSize}px ${fontFamily}`;\n                         const metrics = context.measureText(content);\n                         const padding = parseInt(String((textEl.style && textEl.style.padding) || 0)) * 2;\n                         const newWidth = Math.ceil(metrics.width + padding);\n                         if (newWidth > textEl.width) {\n                             textEl.width = newWidth;\n                         }\n                    }\n                } catch(e) {}\n            } else {\n                // Vertical Expansion\n                const measuredHeight = measureTextHeight(content, textEl.width, fontFamily, fontSize);\n                const designHeight = textEl.height;\n                const delta = measuredHeight - designHeight;\n                \n                if (delta > 0) {\n                    const originalBottom = textEl.y + designHeight;\n                    const originalTextRect = {\n                        x: textEl.x,\n                        y: textEl.y,\n                        width: textEl.width,\n                        height: designHeight\n                    };\n                    \n                    textEl.height = measuredHeight;\n                    \n                    layoutElements.forEach(other => {\n                        if (other.id === textEl.id) return;\n                        \n                        if (isInside(originalTextRect, other)) {\n                            other.height += delta;\n                        }\n                        \n                        if (other.y >= originalBottom) {\n                            other.y += delta;\n                        }\n                    });\n                }\n            }\n        });\n        \n        let maxY = 0;\n        layoutElements.forEach(el => {\n            const bottom = el.y + el.height;\n            if (bottom > maxY) maxY = bottom;\n        });\n        \n        return { layoutElements, maxY };\n    };\n\n    const computeItemHeight = (elements, itemData, fallbackHeight) => {\n        const { maxY } = computeLayout(elements, itemData);\n        return fallbackHeight ? Math.max(maxY, fallbackHeight) : maxY;\n    };\n\n    const formatValue = (value, formatting) => {\n        if (!formatting || formatting.type === 'text') return value !== undefined && value !== null ? String(value) : '';\n        if (value === undefined || value === null) return '';\n\n        if (formatting.type === 'boolean') {\n             const isTrue = String(value) === 'true' || value === true || (typeof value === 'number' && value > 0);\n             return isTrue ? (formatting.trueLabel || 'Sim') : (formatting.falseLabel || 'Não');\n        }\n\n        if (formatting.type === 'date') {\n            try {\n                const date = new Date(value);\n                if (isNaN(date.getTime())) return String(value);\n                \n                if (formatting.dateFormat) {\n                     const d = date.getDate().toString().padStart(2, '0');\n                     const m = (date.getMonth() + 1).toString().padStart(2, '0');\n                     const y = date.getFullYear();\n                     const H = date.getHours().toString().padStart(2, '0');\n                     const M = date.getMinutes().toString().padStart(2, '0');\n                     const S = date.getSeconds().toString().padStart(2, '0');\n                     \n                     return formatting.dateFormat\n                        .replace('DD', d)\n                        .replace('MM', m)\n                        .replace('YYYY', String(y))\n                        .replace('HH', H)\n                        .replace('mm', M)\n                        .replace('ss', S);\n                }\n                return date.toLocaleDateString();\n            } catch (e) { return String(value); }\n        }\n\n        if (formatting.type === 'number') {\n             const num = parseFloat(value);\n             if (isNaN(num)) return String(value);\n             \n             if (formatting.numberFormat === 'currency') {\n                 return (formatting.currencySymbol || 'R$') + ' ' + num.toFixed(formatting.decimalPlaces || 2);\n             }\n             if (formatting.numberFormat === 'percent') {\n                 return num.toFixed(formatting.decimalPlaces || 0) + '%';\n             }\n             if (formatting.decimalPlaces !== undefined) {\n                 return num.toFixed(formatting.decimalPlaces);\n             }\n             return num.toFixed(formatting.decimalPlaces || 0);\n        }\n        \n        return String(value);\n    };\n\n    const checkCondition = (propValue, operator, ruleValue) => {\n        const val = String(propValue).toLowerCase();\n        const target = String(ruleValue).toLowerCase();\n        \n        switch (operator) {\n            case 'equals': return val === target;\n            case 'notEquals': return val !== target;\n            case 'contains': return val.includes(target);\n            case 'greaterThan': return parseFloat(val) > parseFloat(target);\n            case 'lessThan': return parseFloat(val) < parseFloat(target);\n            case 'truthy': return !!propValue;\n            case 'falsy': return !propValue;\n            default: return false;\n        }\n    };\n\n    const camelToKebab = (string) => {\n        return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();\n    };\n\n    const hex8ToRgba = (hex) => {\n        const m = /^#([0-9a-fA-F]{8})$/.exec(hex);\n        if (!m) return hex;\n        const h = m[1];\n        const r = parseInt(h.slice(0, 2), 16);\n        const g = parseInt(h.slice(2, 4), 16);\n        const b = parseInt(h.slice(4, 6), 16);\n        const a = parseInt(h.slice(6, 8), 16) / 255;\n        return `rgba(${r}, ${g}, ${b}, ${a})`;\n    };\n\n    const styleObjectToString = (style) => {\n        if (!style) return '';\n        const pxProps = [\n            'width', 'height', 'top', 'left', 'right', 'bottom', \n            'fontSize', 'borderRadius', 'padding', 'margin', 'borderWidth',\n            'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius'\n        ];\n        \n        return Object.entries(style)\n            .map(([key, value]) => {\n                if (value === undefined || value === null) return '';\n                const cssKey = camelToKebab(key);\n                let cssValue = (typeof value === 'number' && pxProps.includes(key)) ? value + 'px' : value;\n                if (typeof cssValue === 'string') {\n                    if (/^#([0-9a-fA-F]{8})$/.test(cssValue)) {\n                        cssValue = hex8ToRgba(cssValue);\n                    }\n                }\n                return `${cssKey}: ${cssValue}`;\n            })\n            .filter(Boolean)\n            .join('; ');\n    };\n\n    const getAnimationStyles = (anim) => {\n        if (!anim || anim.type === 'none') return {};\n        return {\n            animationName: anim.type,\n            animationDuration: (anim.duration || 1) + 's',\n            animationDelay: (anim.delay || 0) + 's',\n            animationIterationCount: anim.iterationCount || 1,\n            animationTimingFunction: anim.timingFunction || 'ease',\n            animationFillMode: 'both'\n        };\n    };\n\n    const keyframesCss = `\n    @keyframes slideIn {\n                from { opacity: 0; transform: translateY(20px); }\n                to { opacity: 1; transform: translateY(0); }\n    }\n    @keyframes fadeIn { \n        from { opacity: 0; } \n        to { opacity: 1; } \n    }\n    @keyframes slideInLeft { \n        from { opacity: 0; transform: translateX(-50px); } \n        to { opacity: 1; transform: translateX(0); } \n    }\n    @keyframes slideInRight { \n        from { opacity: 0; transform: translateX(50px); } \n        to { opacity: 1; transform: translateX(0); } \n    }\n    @keyframes slideInUp { \n        from { opacity: 0; transform: translateY(50px); } \n        to { opacity: 1; transform: translateY(0); } \n    }\n    @keyframes slideInDown { \n        from { opacity: 0; transform: translateY(-50px); } \n        to { opacity: 1; transform: translateY(0); } \n    }\n    @keyframes zoomIn { \n        from { opacity: 0; transform: scale(0.5); } \n        to { opacity: 1; transform: scale(1); } \n    }\n    @keyframes bounceIn {\n        0% { opacity: 0; transform: scale(0.3); }\n        50% { opacity: 1; transform: scale(1.05); }\n        70% { transform: scale(0.9); }\n        100% { transform: scale(1); }\n    }\n    @keyframes pulse {\n        0% { transform: scale(1); }\n        50% { transform: scale(1.05); }\n        100% { transform: scale(1); }\n    }\n    @keyframes shake {\n        0%, 100% { transform: translateX(0); }\n        10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }\n        20%, 40%, 60%, 80% { transform: translateX(5px); }\n    }\n    @keyframes spin { \n        from { transform: rotate(0deg); } \n        to { transform: rotate(360deg); } \n    }\n    \n    /* Improved / Smoother Animations */\n    @keyframes smoothSlideUp {\n        0% { opacity: 0; transform: translateY(30px); }\n        100% { opacity: 1; transform: translateY(0); }\n    }\n    @keyframes popIn {\n        0% { opacity: 0; transform: scale(0.8) translateY(10px); }\n        100% { opacity: 1; transform: scale(1) translateY(0); }\n    }\n    @keyframes blurIn {\n        0% { opacity: 0; filter: blur(10px); }\n        100% { opacity: 1; filter: blur(0); }\n    }\n    `;\n\n    const renderItem = (itemData, index = 0, offsetY = 0) => {\n        const { layoutElements } = computeLayout(elements, itemData);\n        \n        // Group elements into logical rows based on Y position overlap to support dynamic height\n        layoutElements.sort((a, b) => a.y - b.y);\n        \n        const rows = [];\n        let currentRow = null;\n        \n        layoutElements.forEach(el => {\n            const elBottom = el.y + el.height;\n            if (!currentRow) {\n                currentRow = { startY: el.y, endY: elBottom, elements: [el] };\n                rows.push(currentRow);\n            } else {\n                // If this element starts significantly after the current row ends, start a new row\n                if (el.y >= currentRow.endY - 5) { \n                    currentRow = { startY: el.y, endY: elBottom, elements: [el] };\n                    rows.push(currentRow);\n                } else {\n                    currentRow.elements.push(el);\n                    currentRow.endY = Math.max(currentRow.endY, elBottom);\n                }\n            }\n        });\n\n        return rows.map(row => {\n            // Find autoGrow elements in this row\n            const flowElements = row.elements.filter(el => (el.type === 'text' || el.type === 'text-container') && el.autoGrow);\n            \n            // Sort flow elements by X position to render them in correct order\n            // This is CRITICAL for correct flow layout\n            flowElements.sort((a, b) => a.x - b.x);\n\n            // Calculate Row Min Height (based on static elements and initial size of flow elements)\n            let minHeight = 0;\n            row.elements.forEach(el => {\n                // For static elements, bottom relative to row start\n                // For flow elements, we also use their initial design height as minimum\n                const bottom = (el.y - row.startY) + el.height;\n                if (bottom > minHeight) minHeight = bottom;\n            });\n\n            const rowStyle = styleObjectToString({\n                position: 'relative',\n                width: '100%',\n                minHeight: minHeight,\n            });\n\n            const childrenHtml = row.elements.map(element => {\n                let content = element.content;\n                let imgSrc = '';\n\n                // Resolve Content & Formatting\n                if (element.type === 'text' || element.type === 'text-container') {\n                    content = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {\n                        const val = itemData[key.trim()];\n                        if (val === undefined || val === null) return match;\n                        if (element.formatting) {\n                            return formatValue(val, element.formatting);\n                        }\n                        return String(val);\n                    });\n                } else if (element.type === 'image') {\n                     if (element.dataBinding) {\n                        const val = itemData[element.dataBinding];\n                        if (val !== undefined && val !== null) {\n                            imgSrc = String(val);\n                        } else {\n                            imgSrc = content;\n                        }\n                     } else {\n                         imgSrc = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {\n                            const val = itemData[key.trim()];\n                            return val !== undefined && val !== null ? String(val) : match;\n                        });\n                     }\n                }\n\n                // Resolve Conditional Styles\n                let conditionalStyles = {};\n                if (element.conditions) {\n                    element.conditions.forEach(rule => {\n                        const propVal = itemData[rule.property];\n                        if (checkCondition(propVal, rule.operator, rule.value)) {\n                             conditionalStyles = { ...conditionalStyles, ...rule.style };\n                        }\n                    });\n                }\n\n                // Resolve Style Bindings\n                let bindingStyles = {};\n                if (element.styleBindings) {\n                    Object.entries(element.styleBindings).forEach(([styleProp, variableName]) => {\n                        const val = itemData[variableName];\n                        if (val !== undefined && val !== null) {\n                            bindingStyles[styleProp] = String(val);\n                        }\n                    });\n                }\n\n                const isFlow = flowElements.includes(element);\n                \n                let marginLeft = undefined;\n                if (isFlow) {\n                    // Calculate margin based on distance from previous flow element\n                    const flowIndex = flowElements.indexOf(element);\n                    if (flowIndex > 0) {\n                        const prev = flowElements[flowIndex - 1];\n                        const prevEnd = prev.x + prev.width;\n                        const gap = element.x - prevEnd;\n                        marginLeft = gap > 0 ? gap : 0;\n                    } else {\n                        marginLeft = element.x;\n                    }\n                }\n\n                const baseStyle = {\n                    position: isFlow ? 'relative' : 'absolute',\n                    left: isFlow ? undefined : element.x,\n                    top: isFlow ? undefined : (element.y - row.startY + offsetY),\n                    marginLeft: isFlow ? marginLeft : undefined,\n                    marginTop: isFlow ? (element.y - row.startY) : undefined,\n                    width: element.width,\n                    height: element.autoGrow ? 'auto' : element.height,\n                    transform: element.rotation ? `rotate(${element.rotation}deg)` : undefined,\n                    overflow: element.autoGrow ? 'visible' : 'hidden',\n                    whiteSpace: (element.type === 'text-container' && element.autoGrow && element.containerExpansion === 'horizontal') ? 'nowrap' : (element.autoGrow ? 'pre-wrap' : undefined),\n                    wordBreak: element.autoGrow ? 'break-word' : undefined,\n                    display: isFlow ? 'inline-block' : undefined,\n                    verticalAlign: isFlow ? 'top' : undefined,\n                    boxSizing: 'border-box', // Ensure padding doesn't affect dimensions\n                    ...element.style,\n                    ...conditionalStyles,\n                    ...bindingStyles\n                };\n                \n                const styleString = styleObjectToString(baseStyle);\n\n                if (element.type === 'text' || element.type === 'text-container') {\n                    return `<div style=\"${styleString}\">${content}</div>`;\n                } else if (element.type === 'image') {\n                    const imgStyle = styleObjectToString({\n                        width: '100%',\n                        height: '100%',\n                        objectFit: element.style?.objectFit || 'cover',\n                        display: 'block'\n                    });\n                    return `<div style=\"${styleString}\"><img src=\"${imgSrc}\" alt=\"Element\" style=\"${imgStyle}\" /></div>`;\n                } else if (element.type === 'box') {\n                     return `<div style=\"${styleString}\"></div>`;\n                } else if (element.type === 'checkbox') {\n                    let isChecked = false;\n                    if (element.dataBinding) {\n                        const val = itemData[element.dataBinding];\n                        isChecked = val === true || String(val) === 'true';\n                    }\n                    const checkboxStyle = styleObjectToString({\n                        ...baseStyle,\n                        display: 'flex',\n                        alignItems: 'center',\n                        justifyContent: 'center'\n                    });\n                    return `<div style=\"${checkboxStyle}\"><input type=\"checkbox\" ${isChecked ? 'checked' : ''} disabled style=\"width:100%;height:100%;margin:0;\" /></div>`;\n                }\n                return '';\n            }).join('\\n');\n            \n            return `<div class=\"list-row\" style=\"${rowStyle}\">${childrenHtml}</div>`;\n        }).join('\\n');\n    };\n\nif (isList && Array.isArray(data)) {\n    // Calculate per-item height respecting autoGrow\n    // Sort data\n    let listData = [...data];\n    if (listSettings && listSettings.sortProp) {\n        const prop = listSettings.sortProp;\n        const order = listSettings.sortOrder === 'asc' ? 1 : -1;\n        listData.sort((a, b) => {\n            const valA = a[prop];\n            const valB = b[prop];\n            if (valA < valB) return -1 * order;\n            if (valA > valB) return 1 * order;\n            return 0;\n        });\n    }\n\n    // Handle newest position\n    if (listSettings && listSettings.newestPosition === 'top') {\n        listData.reverse();\n    }\n\n    // Generate HTML for all items\n    const itemsHtml = listData.map((item, index) => {\n        const itemHtml = renderItem(item, index, 0);\n        const itemContainerStyle = styleObjectToString({\n            position: 'relative',\n            minHeight: canvasHeight + 'px',\n            width: '100%'\n        });\n\n        return `<div class=\"list-item\" style=\"${itemContainerStyle}\">${itemHtml}</div>`;\n        }).join('\\n');\n\n        // Animation Styles based on settings\n        const scrollDirection = (listSettings && listSettings.scrollDirection) || 'down';\n        const containerHeight = (listSettings && listSettings.containerHeight) ? listSettings.containerHeight + 'px' : '100%';\n        \n        const justify = (listSettings && listSettings.newestPosition === 'top') ? 'flex-start' : 'flex-end';\n\n        // Entry Animation from settings\n        const entryAnim = listSettings && listSettings.entryAnimation ? listSettings.entryAnimation : { type: 'slideIn', duration: 0.3, timingFunction: 'ease-out' };\n        const entryAnimName = entryAnim.type === 'none' ? 'none' : entryAnim.type;\n        const entryAnimDuration = entryAnim.duration + 's';\n        const entryAnimTiming = entryAnim.timingFunction || 'ease-out';\n\n        const animationCss = `\n            ${keyframesCss}\n\n            .list-wrapper {\n                display: flex;\n                flex-direction: column;\n                justify-content: ${justify};\n                height: ${containerHeight};\n                width: 100%;\n                overflow-y: auto;\n                overflow-x: hidden;\n                box-sizing: border-box;\n                padding: 10px;\n            }\n            .list-item {\n                flex-shrink: 0;\n                animation: ${entryAnimName} ${entryAnimDuration} ${entryAnimTiming};\n                margin-bottom: 10px;\n                width: 100%;\n                position: relative;\n            }\n        `;\n        \n        const scrollScript = scrollDirection === 'up' \n            ? `<script>\n                document.addEventListener('DOMContentLoaded', () => {\n                    const wrapper = document.querySelector('.list-wrapper');\n                    if(wrapper) wrapper.scrollTop = wrapper.scrollHeight;\n                });\n               <\/script>`\n            : '';\n\n        // Inject Smart Script for Dynamic Updates\n        const injectionScript = `\n            <script>\n            (function() {\n                try {\n                    const elements = ${JSON.stringify(elements)};\n                    const formatValue = ${formatValue.toString()};\n                    const checkCondition = ${checkCondition.toString()};\n                    const camelToKebab = ${camelToKebab.toString()};\n                    const hex8ToRgba = ${hex8ToRgba.toString()};\n                    const styleObjectToString = ${styleObjectToString.toString()};\n                    const getAnimationStyles = ${getAnimationStyles.toString()};\n                    const renderItem = ${renderItem.toString()};\n\n                    const measureTextHeight = ${measureTextHeight.toString()};\n                    const computeLayout = ${computeLayout.toString()};\n                    const computeItemHeight = ${computeItemHeight.toString()};\n                    const itemHeightFallback = ${canvasHeight || 0};\n                    const newestPosition = \"${(listSettings && listSettings.newestPosition) || 'bottom'}\";\n                    const scrollDirection = \"${(listSettings && listSettings.scrollDirection) || 'down'}\";\n\n                    window.addItem = function(data) {\n                        const wrapper = document.querySelector('.list-wrapper');\n                        if (!wrapper) return;\n\n                        const itemHtml = renderItem(data, 0, 0);\n                        const itemContainerStyle = styleObjectToString({\n                            position: 'relative',\n                            minHeight: itemHeightFallback + 'px',\n                            width: '100%'\n                        });\n\n                        const div = document.createElement('div');\n                        div.className = 'list-item';\n                        div.setAttribute('style', itemContainerStyle);\n                        div.innerHTML = itemHtml;\n\n                        if (newestPosition === 'top') {\n                            wrapper.insertBefore(div, wrapper.firstChild);\n                        } else {\n                            wrapper.appendChild(div);\n                        }\n                        \n                        if (scrollDirection === 'up') {\n                           wrapper.scrollTop = wrapper.scrollHeight;\n                        }\n                    };\n                } catch(e) { console.error(\"Smart List Init Error\", e); }\n            })();\n            <\/script>\n        `;\n\n        return `\n            <style>${animationCss}</style>\n            <div class=\"list-wrapper\">\n                ${itemsHtml}\n            </div>\n            ${scrollScript}\n            ${injectionScript}\n        `;\n    }\n\n    // Single Item\n    const contentHtml = renderItem(data);\n    return `<div style=\"position: relative; width: 100%; height: 100%; overflow: hidden;\">${contentHtml}</div>`;\n}\n";
+}), generateHTML = (n, _, E = {}) => Function("elements", "data", "options", getRendererCode() + "\nreturn renderTemplate(elements, data, options);")(n, _, E), getRendererCode = () => "\n/**\n * Render Template\n * @param {Array} elements - The JSON configuration of elements\n * @param {Object|Array} data - The data object to inject (Object for single, Array for list)\n * @param {Object} options - { isList: boolean, listSettings: { sortProp: string, sortOrder: 'asc'|'desc', newestPosition: 'top'|'bottom', scrollDirection: 'up'|'down', containerHeight: number }, canvasHeight: number }\n * @returns {string} - The generated HTML string\n */\nfunction renderTemplate(elements, data, options = {}) {\n    const { isList, listSettings, canvasHeight } = options;\n\n    const measureTextHeight = (text, width, fontFamily, fontSize, lineHeightMultiplier = 1.2) => {\n        if (!text) return 0;\n        try {\n            const canvas = document.createElement('canvas');\n            const context = canvas.getContext('2d');\n            if (!context) return 0;\n            context.font = `${fontSize}px ${fontFamily}`;\n            const words = String(text).split(' ');\n            let line = '';\n            let lineCount = 1;\n            for (let i = 0; i < words.length; i++) {\n                const testLine = line + words[i] + ' ';\n                const metrics = context.measureText(testLine);\n                const testWidth = metrics.width;\n                if (testWidth > width && i > 0) {\n                    line = words[i] + ' ';\n                    lineCount++;\n                } else {\n                    line = testLine;\n                }\n            }\n            const explicitLines = String(text).split('\\n').length - 1;\n            lineCount += explicitLines;\n            return Math.ceil(lineCount * fontSize * lineHeightMultiplier);\n        } catch (_) {\n            return 0;\n        }\n    };\n\n    const computeLayout = (elements, itemData) => {\n        const layoutElements = JSON.parse(JSON.stringify(elements));\n        \n        const isInside = (inner, outer) => {\n             const eps = 0.1;\n             return (\n                 inner.x >= outer.x - eps &&\n                 inner.x + inner.width <= outer.x + outer.width + eps &&\n                 inner.y >= outer.y - eps &&\n                 inner.y + inner.height <= outer.y + outer.height + eps\n             );\n        };\n\n        const autoGrowElements = layoutElements\n            .filter(el => (el.type === 'text' || el.type === 'text-container') && el.autoGrow)\n            .sort((a, b) => a.y - b.y);\n\n        autoGrowElements.forEach(textEl => {\n            let content = textEl.content;\n            content = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {\n                const val = itemData[key.trim()];\n                return val !== undefined && val !== null ? String(val) : match;\n            });\n            \n            const fontSize = parseInt(String((textEl.style && textEl.style.fontSize) || 16));\n            const fontFamily = String((textEl.style && textEl.style.fontFamily) || 'Arial');\n            \n            const isHorizontal = textEl.type === 'text-container' && textEl.containerExpansion === 'horizontal';\n            \n            if (isHorizontal) {\n                // Horizontal expansion: Update width only\n                // Requires canvas context which is available in measureTextHeight scope or we create new one\n                // For simplicity, we can't easily access the measure logic here if it's not exposed, \n                // but measureTextHeight is available in this scope.\n                // However measureTextHeight calculates HEIGHT. We need WIDTH.\n                \n                try {\n                    const canvas = document.createElement('canvas');\n                    const context = canvas.getContext('2d');\n                    if (context) {\n                         context.font = `${fontSize}px ${fontFamily}`;\n                         const metrics = context.measureText(content);\n                         const padding = parseInt(String((textEl.style && textEl.style.padding) || 0)) * 2;\n                         const newWidth = Math.ceil(metrics.width + padding);\n                         if (newWidth > textEl.width) {\n                             textEl.width = newWidth;\n                         }\n                    }\n                } catch(e) {}\n            } else {\n                // Vertical Expansion\n                const measuredHeight = measureTextHeight(content, textEl.width, fontFamily, fontSize);\n                const designHeight = textEl.height;\n                const delta = measuredHeight - designHeight;\n                \n                if (delta > 0) {\n                    const originalBottom = textEl.y + designHeight;\n                    const originalTextRect = {\n                        x: textEl.x,\n                        y: textEl.y,\n                        width: textEl.width,\n                        height: designHeight\n                    };\n                    \n                    textEl.height = measuredHeight;\n                    \n                    layoutElements.forEach(other => {\n                        if (other.id === textEl.id) return;\n                        \n                        if (isInside(originalTextRect, other)) {\n                            other.height += delta;\n                        }\n                        \n                        if (other.y >= originalBottom) {\n                            other.y += delta;\n                        }\n                    });\n                }\n            }\n        });\n        \n        let maxY = 0;\n        layoutElements.forEach(el => {\n            const bottom = el.y + el.height;\n            if (bottom > maxY) maxY = bottom;\n        });\n        \n        return { layoutElements, maxY };\n    };\n\n    const computeItemHeight = (elements, itemData, fallbackHeight) => {\n        const { maxY } = computeLayout(elements, itemData);\n        return fallbackHeight ? Math.max(maxY, fallbackHeight) : maxY;\n    };\n\n    const formatValue = (value, formatting) => {\n        if (!formatting || formatting.type === 'text') return value !== undefined && value !== null ? String(value) : '';\n        if (value === undefined || value === null) return '';\n\n        if (formatting.type === 'boolean') {\n             const isTrue = String(value) === 'true' || value === true || (typeof value === 'number' && value > 0);\n             return isTrue ? (formatting.trueLabel || 'Sim') : (formatting.falseLabel || 'Não');\n        }\n\n        if (formatting.type === 'date') {\n            try {\n                const date = new Date(value);\n                if (isNaN(date.getTime())) return String(value);\n                \n                if (formatting.dateFormat) {\n                     const d = date.getDate().toString().padStart(2, '0');\n                     const m = (date.getMonth() + 1).toString().padStart(2, '0');\n                     const y = date.getFullYear();\n                     const H = date.getHours().toString().padStart(2, '0');\n                     const M = date.getMinutes().toString().padStart(2, '0');\n                     const S = date.getSeconds().toString().padStart(2, '0');\n                     \n                     return formatting.dateFormat\n                        .replace('DD', d)\n                        .replace('MM', m)\n                        .replace('YYYY', String(y))\n                        .replace('HH', H)\n                        .replace('mm', M)\n                        .replace('ss', S);\n                }\n                return date.toLocaleDateString();\n            } catch (e) { return String(value); }\n        }\n\n        if (formatting.type === 'number') {\n             const num = parseFloat(value);\n             if (isNaN(num)) return String(value);\n             \n             if (formatting.numberFormat === 'currency') {\n                 return (formatting.currencySymbol || 'R$') + ' ' + num.toFixed(formatting.decimalPlaces || 2);\n             }\n             if (formatting.numberFormat === 'percent') {\n                 return num.toFixed(formatting.decimalPlaces || 0) + '%';\n             }\n             if (formatting.decimalPlaces !== undefined) {\n                 return num.toFixed(formatting.decimalPlaces);\n             }\n             return num.toFixed(formatting.decimalPlaces || 0);\n        }\n        \n        return String(value);\n    };\n\n    const checkCondition = (propValue, operator, ruleValue) => {\n        const val = String(propValue).toLowerCase();\n        const target = String(ruleValue).toLowerCase();\n        \n        switch (operator) {\n            case 'equals': return val === target;\n            case 'notEquals': return val !== target;\n            case 'contains': return val.includes(target);\n            case 'greaterThan': return parseFloat(val) > parseFloat(target);\n            case 'lessThan': return parseFloat(val) < parseFloat(target);\n            case 'truthy': return !!propValue;\n            case 'falsy': return !propValue;\n            default: return false;\n        }\n    };\n\n    const camelToKebab = (string) => {\n        return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();\n    };\n\n    const hex8ToRgba = (hex) => {\n        const m = /^#([0-9a-fA-F]{8})$/.exec(hex);\n        if (!m) return hex;\n        const h = m[1];\n        const r = parseInt(h.slice(0, 2), 16);\n        const g = parseInt(h.slice(2, 4), 16);\n        const b = parseInt(h.slice(4, 6), 16);\n        const a = parseInt(h.slice(6, 8), 16) / 255;\n        return `rgba(${r}, ${g}, ${b}, ${a})`;\n    };\n\n    const styleObjectToString = (style) => {\n        if (!style) return '';\n        const pxProps = [\n            'width', 'height', 'top', 'left', 'right', 'bottom', \n            'fontSize', 'borderRadius', 'padding', 'margin', 'borderWidth',\n            'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius'\n        ];\n        \n        return Object.entries(style)\n            .map(([key, value]) => {\n                if (value === undefined || value === null) return '';\n                const cssKey = camelToKebab(key);\n                let cssValue = (typeof value === 'number' && pxProps.includes(key)) ? value + 'px' : value;\n                if (typeof cssValue === 'string') {\n                    if (/^#([0-9a-fA-F]{8})$/.test(cssValue)) {\n                        cssValue = hex8ToRgba(cssValue);\n                    }\n                }\n                return `${cssKey}: ${cssValue}`;\n            })\n            .filter(Boolean)\n            .join('; ');\n    };\n\n    const getAnimationStyles = (anim) => {\n        if (!anim || anim.type === 'none') return {};\n        return {\n            animationName: anim.type,\n            animationDuration: (anim.duration || 1) + 's',\n            animationDelay: (anim.delay || 0) + 's',\n            animationIterationCount: anim.iterationCount || 1,\n            animationTimingFunction: anim.timingFunction || 'ease',\n            animationFillMode: 'both'\n        };\n    };\n\n    const keyframesCss = `\n    @keyframes slideIn {\n                from { opacity: 0; transform: translateY(20px); }\n                to { opacity: 1; transform: translateY(0); }\n    }\n    @keyframes fadeIn { \n        from { opacity: 0; } \n        to { opacity: 1; } \n    }\n    @keyframes slideInLeft { \n        from { opacity: 0; transform: translateX(-50px); } \n        to { opacity: 1; transform: translateX(0); } \n    }\n    @keyframes slideInRight { \n        from { opacity: 0; transform: translateX(50px); } \n        to { opacity: 1; transform: translateX(0); } \n    }\n    @keyframes slideInUp { \n        from { opacity: 0; transform: translateY(50px); } \n        to { opacity: 1; transform: translateY(0); } \n    }\n    @keyframes slideInDown { \n        from { opacity: 0; transform: translateY(-50px); } \n        to { opacity: 1; transform: translateY(0); } \n    }\n    @keyframes zoomIn { \n        from { opacity: 0; transform: scale(0.5); } \n        to { opacity: 1; transform: scale(1); } \n    }\n    @keyframes bounceIn {\n        0% { opacity: 0; transform: scale(0.3); }\n        50% { opacity: 1; transform: scale(1.05); }\n        70% { transform: scale(0.9); }\n        100% { transform: scale(1); }\n    }\n    @keyframes pulse {\n        0% { transform: scale(1); }\n        50% { transform: scale(1.05); }\n        100% { transform: scale(1); }\n    }\n    @keyframes shake {\n        0%, 100% { transform: translateX(0); }\n        10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }\n        20%, 40%, 60%, 80% { transform: translateX(5px); }\n    }\n    @keyframes spin { \n        from { transform: rotate(0deg); } \n        to { transform: rotate(360deg); } \n    }\n    \n    /* Improved / Smoother Animations */\n    @keyframes smoothSlideUp {\n        0% { opacity: 0; transform: translateY(30px); }\n        100% { opacity: 1; transform: translateY(0); }\n    }\n    @keyframes popIn {\n        0% { opacity: 0; transform: scale(0.8) translateY(10px); }\n        100% { opacity: 1; transform: scale(1) translateY(0); }\n    }\n    @keyframes blurIn {\n        0% { opacity: 0; filter: blur(10px); }\n        100% { opacity: 1; filter: blur(0); }\n    }\n    `;\n\n    const renderItem = (itemData, index = 0, offsetY = 0) => {\n        const { layoutElements } = computeLayout(elements, itemData);\n        \n        // Split into Static (absolute) and Flow (relative/dynamic) elements\n        const staticElements = [];\n        const flowElements = [];\n        \n        layoutElements.forEach(el => {\n            if ((el.type === 'text' || el.type === 'text-container') && el.autoGrow) {\n                flowElements.push(el);\n            } else {\n                staticElements.push(el);\n            }\n        });\n\n        // 1. Render Static Elements (Absolute Positioning)\n        // They form the \"base layer\" and don't affect the flow\n        const staticHtml = staticElements.map(element => renderSingleElement(element, itemData, false)).join('\\n');\n\n        // 2. Render Flow Elements (Relative Positioning)\n        // Group them into \"Visual Lines\" based on Y position\n        flowElements.sort((a, b) => a.y - b.y);\n        \n        const flowLines = [];\n        let currentLine = null;\n        \n        flowElements.forEach(el => {\n            if (!currentLine) {\n                currentLine = { y: el.y, elements: [el] };\n                flowLines.push(currentLine);\n            } else {\n                // If element is within 10px vertically, consider it same line\n                if (Math.abs(el.y - currentLine.y) <= 10) {\n                    currentLine.elements.push(el);\n                } else {\n                    currentLine = { y: el.y, elements: [el] };\n                    flowLines.push(currentLine);\n                }\n            }\n        });\n\n        // Render Flow Lines\n        let previousLineBottomDesign = 0; // Track where the previous line ended in DESIGN coordinates\n\n        const flowHtml = flowLines.map((line, lineIndex) => {\n            // Sort elements in line by X\n            line.elements.sort((a, b) => a.x - b.x);\n\n            // Calculate margin-top for the line container\n            // If it's the first line, margin is its Y position.\n            // If subsequent line, margin is the gap between this line's design Y and previous line's design bottom.\n            let marginTop = 0;\n            if (lineIndex === 0) {\n                marginTop = line.y;\n            } else {\n                marginTop = Math.max(0, line.y - previousLineBottomDesign);\n            }\n\n            // Update previousLineBottomDesign for the NEXT iteration\n            // We use the MAX bottom of elements in this line\n            let maxLineHeight = 0;\n            line.elements.forEach(el => {\n                if (el.height > maxLineHeight) maxLineHeight = el.height;\n            });\n            previousLineBottomDesign = line.y + maxLineHeight;\n\n            const lineStyle = styleObjectToString({\n                position: 'relative',\n                width: '100%',\n                marginTop: marginTop,\n                // We don't set height, let it grow\n                display: 'block', // Ensure it breaks to new line\n                whiteSpace: 'nowrap' // Keep inline-block children on same line\n            });\n\n            const childrenHtml = line.elements.map(element => {\n                // Calculate margin-left relative to previous element in line\n                const elemIndex = line.elements.indexOf(element);\n                let marginLeft = 0;\n                if (elemIndex === 0) {\n                    marginLeft = element.x;\n                } else {\n                    const prev = line.elements[elemIndex - 1];\n                    const prevEnd = prev.x + prev.width;\n                    marginLeft = Math.max(0, element.x - prevEnd);\n                }\n\n                // Pass computed margin to render function\n                return renderSingleElement(element, itemData, true, { marginLeft, marginTop: 0 }); // marginTop handled by line container\n            }).join('\\n');\n\n            return `<div class=\"flow-line\" style=\"${lineStyle}\">${childrenHtml}</div>`;\n        }).join('\\n');\n\n        return staticHtml + '\\n' + flowHtml;\n    };\n\n    const renderSingleElement = (element, itemData, isFlow, flowStyles = {}) => {\n        let content = element.content;\n        let imgSrc = '';\n\n        // Resolve Content & Formatting\n        if (element.type === 'text' || element.type === 'text-container') {\n            content = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {\n                const val = itemData[key.trim()];\n                if (val === undefined || val === null) return match;\n                if (element.formatting) {\n                    return formatValue(val, element.formatting);\n                }\n                return String(val);\n            });\n        } else if (element.type === 'image') {\n                if (element.dataBinding) {\n                const val = itemData[element.dataBinding];\n                if (val !== undefined && val !== null) {\n                    imgSrc = String(val);\n                } else {\n                    imgSrc = content;\n                }\n                } else {\n                    imgSrc = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {\n                    const val = itemData[key.trim()];\n                    return val !== undefined && val !== null ? String(val) : match;\n                });\n                }\n        }\n\n        // Resolve Conditional Styles\n        let conditionalStyles = {};\n        if (element.conditions) {\n            element.conditions.forEach(rule => {\n                const propVal = itemData[rule.property];\n                if (checkCondition(propVal, rule.operator, rule.value)) {\n                        conditionalStyles = { ...conditionalStyles, ...rule.style };\n                }\n            });\n        }\n\n        // Resolve Style Bindings\n        let bindingStyles = {};\n        if (element.styleBindings) {\n            Object.entries(element.styleBindings).forEach(([styleProp, variableName]) => {\n                const val = itemData[variableName];\n                if (val !== undefined && val !== null) {\n                    bindingStyles[styleProp] = String(val);\n                }\n            });\n        }\n\n        const baseStyle = {\n            position: isFlow ? 'relative' : 'absolute',\n            left: isFlow ? undefined : element.x,\n            top: isFlow ? undefined : element.y,\n            marginLeft: isFlow ? flowStyles.marginLeft : undefined,\n            marginTop: isFlow ? flowStyles.marginTop : undefined,\n            width: element.width,\n            height: element.autoGrow ? 'auto' : element.height,\n            transform: element.rotation ? `rotate(${element.rotation}deg)` : undefined,\n            overflow: element.autoGrow ? 'visible' : 'hidden',\n            whiteSpace: (element.type === 'text-container' && element.autoGrow && element.containerExpansion === 'horizontal') ? 'nowrap' : (element.autoGrow ? 'pre-wrap' : undefined),\n            wordBreak: element.autoGrow ? 'break-word' : undefined,\n            display: isFlow ? 'inline-block' : undefined,\n            verticalAlign: isFlow ? 'top' : undefined,\n            boxSizing: 'border-box',\n            ...element.style,\n            ...conditionalStyles,\n            ...bindingStyles\n        };\n        \n        const styleString = styleObjectToString(baseStyle);\n\n        if (element.type === 'text' || element.type === 'text-container') {\n            return `<div style=\"${styleString}\">${content}</div>`;\n        } else if (element.type === 'image') {\n            const imgStyle = styleObjectToString({\n                width: '100%',\n                height: '100%',\n                objectFit: element.style?.objectFit || 'cover',\n                display: 'block'\n            });\n            return `<div style=\"${styleString}\"><img src=\"${imgSrc}\" alt=\"Element\" style=\"${imgStyle}\" /></div>`;\n        } else if (element.type === 'box') {\n                return `<div style=\"${styleString}\"></div>`;\n        } else if (element.type === 'checkbox') {\n            let isChecked = false;\n            if (element.dataBinding) {\n                const val = itemData[element.dataBinding];\n                isChecked = val === true || String(val) === 'true';\n            }\n            const checkboxStyle = styleObjectToString({\n                ...baseStyle,\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center'\n            });\n            return `<div style=\"${checkboxStyle}\"><input type=\"checkbox\" ${isChecked ? 'checked' : ''} disabled style=\"width:100%;height:100%;margin:0;\" /></div>`;\n        }\n        return '';\n    };\n    };\n\nif (isList && Array.isArray(data)) {\n    // Calculate per-item height respecting autoGrow\n    // Sort data\n    let listData = [...data];\n    if (listSettings && listSettings.sortProp) {\n        const prop = listSettings.sortProp;\n        const order = listSettings.sortOrder === 'asc' ? 1 : -1;\n        listData.sort((a, b) => {\n            const valA = a[prop];\n            const valB = b[prop];\n            if (valA < valB) return -1 * order;\n            if (valA > valB) return 1 * order;\n            return 0;\n        });\n    }\n\n    // Handle newest position\n    if (listSettings && listSettings.newestPosition === 'top') {\n        listData.reverse();\n    }\n\n    // Generate HTML for all items\n    const itemsHtml = listData.map((item, index) => {\n        const itemHtml = renderItem(item, index, 0);\n        const itemContainerStyle = styleObjectToString({\n            position: 'relative',\n            minHeight: canvasHeight + 'px',\n            width: '100%'\n        });\n\n        return `<div class=\"list-item\" style=\"${itemContainerStyle}\">${itemHtml}</div>`;\n        }).join('\\n');\n\n        // Animation Styles based on settings\n        const scrollDirection = (listSettings && listSettings.scrollDirection) || 'down';\n        const containerHeight = (listSettings && listSettings.containerHeight) ? listSettings.containerHeight + 'px' : '100%';\n        \n        const justify = (listSettings && listSettings.newestPosition === 'top') ? 'flex-start' : 'flex-end';\n\n        // Entry Animation from settings\n        const entryAnim = listSettings && listSettings.entryAnimation ? listSettings.entryAnimation : { type: 'slideIn', duration: 0.3, timingFunction: 'ease-out' };\n        const entryAnimName = entryAnim.type === 'none' ? 'none' : entryAnim.type;\n        const entryAnimDuration = entryAnim.duration + 's';\n        const entryAnimTiming = entryAnim.timingFunction || 'ease-out';\n\n        const animationCss = `\n            ${keyframesCss}\n\n            .list-wrapper {\n                display: flex;\n                flex-direction: column;\n                justify-content: ${justify};\n                height: ${containerHeight};\n                width: 100%;\n                overflow-y: auto;\n                overflow-x: hidden;\n                box-sizing: border-box;\n                padding: 10px;\n            }\n            .list-item {\n                flex-shrink: 0;\n                animation: ${entryAnimName} ${entryAnimDuration} ${entryAnimTiming};\n                margin-bottom: 10px;\n                width: 100%;\n                position: relative;\n            }\n        `;\n        \n        const scrollScript = scrollDirection === 'up' \n            ? `<script>\n                document.addEventListener('DOMContentLoaded', () => {\n                    const wrapper = document.querySelector('.list-wrapper');\n                    if(wrapper) wrapper.scrollTop = wrapper.scrollHeight;\n                });\n               <\/script>`\n            : '';\n\n        // Inject Smart Script for Dynamic Updates\n        const injectionScript = `\n            <script>\n            (function() {\n                try {\n                    const elements = ${JSON.stringify(elements)};\n                    const formatValue = ${formatValue.toString()};\n                    const checkCondition = ${checkCondition.toString()};\n                    const camelToKebab = ${camelToKebab.toString()};\n                    const hex8ToRgba = ${hex8ToRgba.toString()};\n                    const styleObjectToString = ${styleObjectToString.toString()};\n                    const getAnimationStyles = ${getAnimationStyles.toString()};\n                    const renderItem = ${renderItem.toString()};\n\n                    const measureTextHeight = ${measureTextHeight.toString()};\n                    const computeLayout = ${computeLayout.toString()};\n                    const computeItemHeight = ${computeItemHeight.toString()};\n                    const itemHeightFallback = ${canvasHeight || 0};\n                    const newestPosition = \"${(listSettings && listSettings.newestPosition) || 'bottom'}\";\n                    const scrollDirection = \"${(listSettings && listSettings.scrollDirection) || 'down'}\";\n\n                    window.addItem = function(data) {\n                        const wrapper = document.querySelector('.list-wrapper');\n                        if (!wrapper) return;\n\n                        const itemHtml = renderItem(data, 0, 0);\n                        const itemContainerStyle = styleObjectToString({\n                            position: 'relative',\n                            minHeight: itemHeightFallback + 'px',\n                            width: '100%'\n                        });\n\n                        const div = document.createElement('div');\n                        div.className = 'list-item';\n                        div.setAttribute('style', itemContainerStyle);\n                        div.innerHTML = itemHtml;\n\n                        if (newestPosition === 'top') {\n                            wrapper.insertBefore(div, wrapper.firstChild);\n                        } else {\n                            wrapper.appendChild(div);\n                        }\n                        \n                        if (scrollDirection === 'up') {\n                           wrapper.scrollTop = wrapper.scrollHeight;\n                        }\n                    };\n                } catch(e) { console.error(\"Smart List Init Error\", e); }\n            })();\n            <\/script>\n        `;\n\n        return `\n            <style>${animationCss}</style>\n            <div class=\"list-wrapper\">\n                ${itemsHtml}\n            </div>\n            ${scrollScript}\n            ${injectionScript}\n        `;\n    }\n\n    // Single Item\n    const contentHtml = renderItem(data);\n    return `<div style=\"position: relative; width: 100%; height: 100%; overflow: hidden;\">${contentHtml}</div>`;\n}\n";
 export { GenericEditor as EditorContent, generateHTML };

package/dist/generic-editor.umd.cjs

@@ -378,173 +378,202 @@ function renderTemplate(elements, data, options = {}) {
     const renderItem = (itemData, index = 0, offsetY = 0) => {
         const { layoutElements } = computeLayout(elements, itemData);
         
-        // Group elements into logical rows based on Y position overlap to support dynamic height
-        layoutElements.sort((a, b) => a.y - b.y);
-        
-        const rows = [];
-        let currentRow = null;
+        // Split into Static (absolute) and Flow (relative/dynamic) elements
+        const staticElements = [];
+        const flowElements = [];
         
         layoutElements.forEach(el => {
-            const elBottom = el.y + el.height;
-            if (!currentRow) {
-                currentRow = { startY: el.y, endY: elBottom, elements: [el] };
-                rows.push(currentRow);
+            if ((el.type === 'text' || el.type === 'text-container') && el.autoGrow) {
+                flowElements.push(el);
+            } else {
+                staticElements.push(el);
+            }
+        });
+
+        // 1. Render Static Elements (Absolute Positioning)
+        // They form the "base layer" and don't affect the flow
+        const staticHtml = staticElements.map(element => renderSingleElement(element, itemData, false)).join('\\n');
+
+        // 2. Render Flow Elements (Relative Positioning)
+        // Group them into "Visual Lines" based on Y position
+        flowElements.sort((a, b) => a.y - b.y);
+        
+        const flowLines = [];
+        let currentLine = null;
+        
+        flowElements.forEach(el => {
+            if (!currentLine) {
+                currentLine = { y: el.y, elements: [el] };
+                flowLines.push(currentLine);
             } else {
-                // If this element starts significantly after the current row ends, start a new row
-                if (el.y >= currentRow.endY - 5) { 
-                    currentRow = { startY: el.y, endY: elBottom, elements: [el] };
-                    rows.push(currentRow);
+                // If element is within 10px vertically, consider it same line
+                if (Math.abs(el.y - currentLine.y) <= 10) {
+                    currentLine.elements.push(el);
                 } else {
-                    currentRow.elements.push(el);
-                    currentRow.endY = Math.max(currentRow.endY, elBottom);
+                    currentLine = { y: el.y, elements: [el] };
+                    flowLines.push(currentLine);
                 }
             }
         });
 
-        return rows.map(row => {
-            // Find autoGrow elements in this row
-            const flowElements = row.elements.filter(el => (el.type === 'text' || el.type === 'text-container') && el.autoGrow);
-            
-            // Sort flow elements by X position to render them in correct order
-            // This is CRITICAL for correct flow layout
-            flowElements.sort((a, b) => a.x - b.x);
-
-            // Calculate Row Min Height (based on static elements and initial size of flow elements)
-            let minHeight = 0;
-            row.elements.forEach(el => {
-                // For static elements, bottom relative to row start
-                // For flow elements, we also use their initial design height as minimum
-                const bottom = (el.y - row.startY) + el.height;
-                if (bottom > minHeight) minHeight = bottom;
+        // Render Flow Lines
+        let previousLineBottomDesign = 0; // Track where the previous line ended in DESIGN coordinates
+
+        const flowHtml = flowLines.map((line, lineIndex) => {
+            // Sort elements in line by X
+            line.elements.sort((a, b) => a.x - b.x);
+
+            // Calculate margin-top for the line container
+            // If it's the first line, margin is its Y position.
+            // If subsequent line, margin is the gap between this line's design Y and previous line's design bottom.
+            let marginTop = 0;
+            if (lineIndex === 0) {
+                marginTop = line.y;
+            } else {
+                marginTop = Math.max(0, line.y - previousLineBottomDesign);
+            }
+
+            // Update previousLineBottomDesign for the NEXT iteration
+            // We use the MAX bottom of elements in this line
+            let maxLineHeight = 0;
+            line.elements.forEach(el => {
+                if (el.height > maxLineHeight) maxLineHeight = el.height;
             });
+            previousLineBottomDesign = line.y + maxLineHeight;
 
-            const rowStyle = styleObjectToString({
+            const lineStyle = styleObjectToString({
                 position: 'relative',
                 width: '100%',
-                minHeight: minHeight,
+                marginTop: marginTop,
+                // We don't set height, let it grow
+                display: 'block', // Ensure it breaks to new line
+                whiteSpace: 'nowrap' // Keep inline-block children on same line
             });
 
-            const childrenHtml = row.elements.map(element => {
-                let content = element.content;
-                let imgSrc = '';
-
-                // Resolve Content & Formatting
-                if (element.type === 'text' || element.type === 'text-container') {
-                    content = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {
-                        const val = itemData[key.trim()];
-                        if (val === undefined || val === null) return match;
-                        if (element.formatting) {
-                            return formatValue(val, element.formatting);
-                        }
-                        return String(val);
-                    });
-                } else if (element.type === 'image') {
-                     if (element.dataBinding) {
-                        const val = itemData[element.dataBinding];
-                        if (val !== undefined && val !== null) {
-                            imgSrc = String(val);
-                        } else {
-                            imgSrc = content;
-                        }
-                     } else {
-                         imgSrc = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {
-                            const val = itemData[key.trim()];
-                            return val !== undefined && val !== null ? String(val) : match;
-                        });
-                     }
+            const childrenHtml = line.elements.map(element => {
+                // Calculate margin-left relative to previous element in line
+                const elemIndex = line.elements.indexOf(element);
+                let marginLeft = 0;
+                if (elemIndex === 0) {
+                    marginLeft = element.x;
+                } else {
+                    const prev = line.elements[elemIndex - 1];
+                    const prevEnd = prev.x + prev.width;
+                    marginLeft = Math.max(0, element.x - prevEnd);
                 }
 
-                // Resolve Conditional Styles
-                let conditionalStyles = {};
-                if (element.conditions) {
-                    element.conditions.forEach(rule => {
-                        const propVal = itemData[rule.property];
-                        if (checkCondition(propVal, rule.operator, rule.value)) {
-                             conditionalStyles = { ...conditionalStyles, ...rule.style };
-                        }
-                    });
-                }
+                // Pass computed margin to render function
+                return renderSingleElement(element, itemData, true, { marginLeft, marginTop: 0 }); // marginTop handled by line container
+            }).join('\\n');
 
-                // Resolve Style Bindings
-                let bindingStyles = {};
-                if (element.styleBindings) {
-                    Object.entries(element.styleBindings).forEach(([styleProp, variableName]) => {
-                        const val = itemData[variableName];
-                        if (val !== undefined && val !== null) {
-                            bindingStyles[styleProp] = String(val);
-                        }
-                    });
+            return \`<div class="flow-line" style="\${lineStyle}">\${childrenHtml}</div>\`;
+        }).join('\\n');
+
+        return staticHtml + '\\n' + flowHtml;
+    };
+
+    const renderSingleElement = (element, itemData, isFlow, flowStyles = {}) => {
+        let content = element.content;
+        let imgSrc = '';
+
+        // Resolve Content & Formatting
+        if (element.type === 'text' || element.type === 'text-container') {
+            content = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {
+                const val = itemData[key.trim()];
+                if (val === undefined || val === null) return match;
+                if (element.formatting) {
+                    return formatValue(val, element.formatting);
+                }
+                return String(val);
+            });
+        } else if (element.type === 'image') {
+                if (element.dataBinding) {
+                const val = itemData[element.dataBinding];
+                if (val !== undefined && val !== null) {
+                    imgSrc = String(val);
+                } else {
+                    imgSrc = content;
                 }
+                } else {
+                    imgSrc = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {
+                    const val = itemData[key.trim()];
+                    return val !== undefined && val !== null ? String(val) : match;
+                });
+                }
+        }
 
-                const isFlow = flowElements.includes(element);
-                
-                let marginLeft = undefined;
-                if (isFlow) {
-                    // Calculate margin based on distance from previous flow element
-                    const flowIndex = flowElements.indexOf(element);
-                    if (flowIndex > 0) {
-                        const prev = flowElements[flowIndex - 1];
-                        const prevEnd = prev.x + prev.width;
-                        const gap = element.x - prevEnd;
-                        marginLeft = gap > 0 ? gap : 0;
-                    } else {
-                        marginLeft = element.x;
-                    }
+        // Resolve Conditional Styles
+        let conditionalStyles = {};
+        if (element.conditions) {
+            element.conditions.forEach(rule => {
+                const propVal = itemData[rule.property];
+                if (checkCondition(propVal, rule.operator, rule.value)) {
+                        conditionalStyles = { ...conditionalStyles, ...rule.style };
                 }
+            });
+        }
 
-                const baseStyle = {
-                    position: isFlow ? 'relative' : 'absolute',
-                    left: isFlow ? undefined : element.x,
-                    top: isFlow ? undefined : (element.y - row.startY + offsetY),
-                    marginLeft: isFlow ? marginLeft : undefined,
-                    marginTop: isFlow ? (element.y - row.startY) : undefined,
-                    width: element.width,
-                    height: element.autoGrow ? 'auto' : element.height,
-                    transform: element.rotation ? \`rotate(\${element.rotation}deg)\` : undefined,
-                    overflow: element.autoGrow ? 'visible' : 'hidden',
-                    whiteSpace: (element.type === 'text-container' && element.autoGrow && element.containerExpansion === 'horizontal') ? 'nowrap' : (element.autoGrow ? 'pre-wrap' : undefined),
-                    wordBreak: element.autoGrow ? 'break-word' : undefined,
-                    display: isFlow ? 'inline-block' : undefined,
-                    verticalAlign: isFlow ? 'top' : undefined,
-                    boxSizing: 'border-box', // Ensure padding doesn't affect dimensions
-                    ...element.style,
-                    ...conditionalStyles,
-                    ...bindingStyles
-                };
-                
-                const styleString = styleObjectToString(baseStyle);
-
-                if (element.type === 'text' || element.type === 'text-container') {
-                    return \`<div style="\${styleString}">\${content}</div>\`;
-                } else if (element.type === 'image') {
-                    const imgStyle = styleObjectToString({
-                        width: '100%',
-                        height: '100%',
-                        objectFit: element.style?.objectFit || 'cover',
-                        display: 'block'
-                    });
-                    return \`<div style="\${styleString}"><img src="\${imgSrc}" alt="Element" style="\${imgStyle}" /></div>\`;
-                } else if (element.type === 'box') {
-                     return \`<div style="\${styleString}"></div>\`;
-                } else if (element.type === 'checkbox') {
-                    let isChecked = false;
-                    if (element.dataBinding) {
-                        const val = itemData[element.dataBinding];
-                        isChecked = val === true || String(val) === 'true';
-                    }
-                    const checkboxStyle = styleObjectToString({
-                        ...baseStyle,
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center'
-                    });
-                    return \`<div style="\${checkboxStyle}"><input type="checkbox" \${isChecked ? 'checked' : ''} disabled style="width:100%;height:100%;margin:0;" /></div>\`;
+        // Resolve Style Bindings
+        let bindingStyles = {};
+        if (element.styleBindings) {
+            Object.entries(element.styleBindings).forEach(([styleProp, variableName]) => {
+                const val = itemData[variableName];
+                if (val !== undefined && val !== null) {
+                    bindingStyles[styleProp] = String(val);
                 }
-                return '';
-            }).join('\\n');
-            
-            return \`<div class="list-row" style="\${rowStyle}">\${childrenHtml}</div>\`;
-        }).join('\\n');
+            });
+        }
+
+        const baseStyle = {
+            position: isFlow ? 'relative' : 'absolute',
+            left: isFlow ? undefined : element.x,
+            top: isFlow ? undefined : element.y,
+            marginLeft: isFlow ? flowStyles.marginLeft : undefined,
+            marginTop: isFlow ? flowStyles.marginTop : undefined,
+            width: element.width,
+            height: element.autoGrow ? 'auto' : element.height,
+            transform: element.rotation ? \`rotate(\${element.rotation}deg)\` : undefined,
+            overflow: element.autoGrow ? 'visible' : 'hidden',
+            whiteSpace: (element.type === 'text-container' && element.autoGrow && element.containerExpansion === 'horizontal') ? 'nowrap' : (element.autoGrow ? 'pre-wrap' : undefined),
+            wordBreak: element.autoGrow ? 'break-word' : undefined,
+            display: isFlow ? 'inline-block' : undefined,
+            verticalAlign: isFlow ? 'top' : undefined,
+            boxSizing: 'border-box',
+            ...element.style,
+            ...conditionalStyles,
+            ...bindingStyles
+        };
+        
+        const styleString = styleObjectToString(baseStyle);
+
+        if (element.type === 'text' || element.type === 'text-container') {
+            return \`<div style="\${styleString}">\${content}</div>\`;
+        } else if (element.type === 'image') {
+            const imgStyle = styleObjectToString({
+                width: '100%',
+                height: '100%',
+                objectFit: element.style?.objectFit || 'cover',
+                display: 'block'
+            });
+            return \`<div style="\${styleString}"><img src="\${imgSrc}" alt="Element" style="\${imgStyle}" /></div>\`;
+        } else if (element.type === 'box') {
+                return \`<div style="\${styleString}"></div>\`;
+        } else if (element.type === 'checkbox') {
+            let isChecked = false;
+            if (element.dataBinding) {
+                const val = itemData[element.dataBinding];
+                isChecked = val === true || String(val) === 'true';
+            }
+            const checkboxStyle = styleObjectToString({
+                ...baseStyle,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center'
+            });
+            return \`<div style="\${checkboxStyle}"><input type="checkbox" \${isChecked ? 'checked' : ''} disabled style="width:100%;height:100%;margin:0;" /></div>\`;
+        }
+        return '';
+    };
     };
 
 if (isList && Array.isArray(data)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1urso/generic-editor",
-  "version": "0.1.47",
+  "version": "0.1.48",
   "publishConfig": {
     "access": "public"
   },