@1urso/generic-editor 0.1.44 → 0.1.45

package/dist/editor/context.d.ts

@@ -25,7 +25,7 @@ export interface IElementAnimation {
 }
 export interface IElement {
     id: string;
-    type: 'text' | 'image' | 'box' | 'group' | 'text-container';
+    type: 'text' | 'image' | 'box' | 'group' | 'text-container' | 'checkbox';
     name?: string;
     groupId?: string;
     content: string;

package/dist/generic-editor.js

@@ -11485,7 +11485,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							className: "ContextMenuItem",
 							onSelect: () => {
 								let O = { dataBinding: n.dataName };
-								(_.type === "text" || _.type === "text-container") && (O.content = `{{${n.dataName}}}`), E(_.id, O);
+								(_.type === "text" || _.type === "text-container" || _.type === "image") && (O.content = `{{${n.dataName}}}`), E(_.id, O);
 							},
 							children: [
 								n.name,
@@ -11997,7 +11997,12 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						})));
 					});
 				}
-				return j.isList && (N = Math.max(0, N)), {
+				if (A = Math.max(0, A), j.isList) {
+					N = Math.max(0, N);
+					let _ = n.height ?? 100;
+					Yj > 0 && (N = Math.min(N, Yj - _)), N = Math.max(0, N);
+				}
+				return {
 					id: _,
 					changes: {
 						x: A,
@@ -12157,10 +12162,10 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 								content: _,
 								dataBinding: E
 							});
-						} else n.type === "image" && O(n.id, {
+						} else n.type === "image" ? O(n.id, {
 							dataBinding: E,
 							content: `{{${E}}}`
-						});
+						}) : n.type === "checkbox" && O(n.id, { dataBinding: E });
 					},
 					children: [
 						n.type === "text" && /* @__PURE__ */ jsx(p$2, {
@@ -12316,17 +12321,26 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		j
 	]), Xj = useCallback(() => {
 		Rj.current = !1, zj.current = !1, Lj(null), window.removeEventListener("mousemove", Yj), window.removeEventListener("mouseup", Xj);
-	}, [Yj]), Zj = (_) => {
-		if (_.ctrlKey || _.metaKey) _.preventDefault(), A(Math.min(Math.max(.1, n.zoom - _.deltaY * .001), 5));
-		else {
-			let E = _.shiftKey ? _.deltaY : _.deltaX, O = _.shiftKey ? _.deltaX : _.deltaY;
-			j({
-				x: n.pan.x - E * 1,
-				y: n.pan.y - O * 1
-			});
-		}
-	};
+	}, [Yj]), Zj = useRef(n);
 	useEffect(() => {
+		Zj.current = n;
+	}, [n]), useEffect(() => {
+		let n = (n) => {
+			n.preventDefault();
+			let _ = Zj.current;
+			if (n.ctrlKey || n.metaKey) A(Math.min(Math.max(.1, _.zoom - n.deltaY * .001), 5));
+			else {
+				let E = n.shiftKey ? n.deltaY : n.deltaX, O = n.shiftKey ? n.deltaX : n.deltaY;
+				j({
+					x: _.pan.x - E * 1,
+					y: _.pan.y - O * 1
+				});
+			}
+		}, _ = G.current;
+		return _ && _.addEventListener("wheel", n, { passive: !1 }), () => {
+			_ && _.removeEventListener("wheel", n);
+		};
+	}, [A, j]), useEffect(() => {
 		let _ = (_) => {
 			if (_.code === "Space" && !_.repeat && !(_.target instanceof HTMLInputElement || _.target instanceof HTMLTextAreaElement) && (Hj.current = !0, G.current && (G.current.style.cursor = "grab")), !(_.target instanceof HTMLInputElement || _.target instanceof HTMLTextAreaElement) && ((_.ctrlKey || _.metaKey) && _.key.toLowerCase() === "z" && (_.preventDefault(), _.shiftKey ? N() : M()), (_.ctrlKey || _.metaKey) && _.key.toLowerCase() === "y" && (_.preventDefault(), N()), (_.ctrlKey || _.metaKey) && _.key.toLowerCase() === "c" && (_.preventDefault(), P()), (_.ctrlKey || _.metaKey) && _.key.toLowerCase() === "v" && (_.preventDefault(), z()), (_.key === "Delete" || _.key === "Backspace") && (_.preventDefault(), B()), [
 				"ArrowUp",
@@ -12339,12 +12353,17 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 				n.selectedElementIds.forEach((A) => {
 					let j = n.elements.find((n) => n.id === A);
 					if (j) {
-						let { x: n = 0, y: M = 0 } = j;
-						_.key === "ArrowUp" && (M -= E), _.key === "ArrowDown" && (M += E), _.key === "ArrowLeft" && (n -= E), _.key === "ArrowRight" && (n += E), O.push({
+						let { x: M = 0, y: N = 0 } = j;
+						if (_.key === "ArrowUp" && (N -= E), _.key === "ArrowDown" && (N += E), _.key === "ArrowLeft" && (M -= E), _.key === "ArrowRight" && (M += E), M = Math.max(0, M), n.isList) {
+							N = Math.max(0, N);
+							let _ = j.height ?? 100, E = n.canvasHeight || 150;
+							E > 0 && (N = Math.min(N, E - _)), N = Math.max(0, N);
+						}
+						O.push({
 							id: A,
 							changes: {
-								x: n,
-								y: M
+								x: M,
+								y: N
 							}
 						});
 					}
@@ -12403,7 +12422,6 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		onMouseDown: Jj,
 		onDragOver: rM,
 		onDrop: iM,
-		onWheel: Zj,
 		style: {
 			width: "100%",
 			height: "100%",
@@ -12456,6 +12474,30 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 					zIndex: 9999,
 					pointerEvents: "none"
 				} }, _)),
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						position: "absolute",
+						top: 0,
+						left: 0,
+						width: "100%",
+						height: "1px",
+						borderTop: "1px dashed var(--accent-9)",
+						opacity: .6,
+						zIndex: 5,
+						pointerEvents: "none"
+					},
+					children: /* @__PURE__ */ jsx("span", {
+						style: {
+							position: "absolute",
+							top: -16,
+							left: 4,
+							fontSize: "10px",
+							color: "var(--accent-9)",
+							fontWeight: 500
+						},
+						children: "Início (0px)"
+					})
+				}),
 				n.isList && /* @__PURE__ */ jsxs("div", {
 					style: {
 						position: "absolute",
@@ -17667,7 +17709,26 @@ var getAnimationVariants = (n) => {
 			n.type === "box" && /* @__PURE__ */ jsx(p, { style: {
 				width: "100%",
 				height: "100%"
-			} })
+			} }),
+			n.type === "checkbox" && /* @__PURE__ */ jsx(p, {
+				style: {
+					width: "100%",
+					height: "100%",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center"
+				},
+				children: /* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					checked: E && n.dataBinding ? E[n.dataBinding] === !0 || String(E[n.dataBinding]) === "true" : !1,
+					readOnly: !0,
+					style: {
+						width: "100%",
+						height: "100%",
+						margin: 0
+					}
+				})
+			})
 		]
 	});
 }, ListItem = ({ item: n, elements: E, animation: O }) => {
@@ -18410,5 +18471,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        return layoutElements.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 baseStyle = {\n                position: 'absolute',\n                left: element.x,\n                top: element.y + offsetY,\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                ...element.style,\n                ...conditionalStyles,\n                ...bindingStyles\n            };\n            \n            // Fix: remove padding if it's not explicitly set, or handle it for text\n            if (element.type === 'text' && !baseStyle.padding) {\n                // baseStyle.padding = '8px'; // Removed default padding to respect resize box\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            }\n            return '';\n        }).join('\\n');\n    };\n\n    if (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 itemHeight = computeItemHeight(elements, item, canvasHeight);\n             const itemContainerStyle = styleObjectToString({\n                 position: 'relative',\n                 height: itemHeight,\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 itemHeight = computeItemHeight(elements, data, itemHeightFallback);\n                        const itemContainerStyle = styleObjectToString({\n                            position: 'relative',\n                            height: itemHeight,\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        // 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            // 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                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 ? element.x : 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                    ...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";
 export { GenericEditor as EditorContent, generateHTML };