@1urso/generic-editor 0.1.14 → 0.1.15

package/dist/generic-editor.js

@@ -14329,209 +14329,219 @@ const Preview = () => {
 		})
 	});
 }, EditorSettings = () => {
-	let { state: s, updateListSettings: d, setCanvasHeight: w } = useEditor(), [k, F] = useState(""), [L, V] = useState("asc"), [U, K] = useState("bottom"), [q, J] = useState("down"), [$, pA] = useState("150"), [mA, hA] = useState("");
+	let { state: s, updateListSettings: d, setCanvasHeight: w } = useEditor(), [k, F] = useState(!1), [L, V] = useState(""), [U, K] = useState("asc"), [q, J] = useState("bottom"), [$, pA] = useState("down"), [mA, hA] = useState("150"), [gA, _A] = useState("");
 	return useEffect(() => {
-		F(s.listSettings.sortProp || "__none__"), V(s.listSettings.sortOrder || "asc"), K(s.listSettings.newestPosition || "bottom"), J(s.listSettings.scrollDirection || "down"), hA(s.listSettings.containerHeight ? String(s.listSettings.containerHeight) : ""), pA(String(s.canvasHeight || 150));
-	}, [s.listSettings, s.canvasHeight]), useEffect(() => {
-		let s = parseInt($, 10);
-		!isNaN(s) && s > 0 && w(s);
-	}, [$, w]), /* @__PURE__ */ jsxs(s$2, { children: [/* @__PURE__ */ jsx(n$2, { children: /* @__PURE__ */ jsxs(o, {
-		variant: "soft",
-		color: "gray",
-		style: {
-			width: "100%",
-			justifyContent: "center",
-			cursor: "pointer"
-		},
-		children: [/* @__PURE__ */ jsx(GearIcon, {}), " Configurações"]
-	}) }), /* @__PURE__ */ jsxs(p$6, {
-		style: { maxWidth: 600 },
-		children: [
-			/* @__PURE__ */ jsx(g$2, { children: "Configurações do Editor" }),
-			/* @__PURE__ */ jsx(m, {
-				size: "2",
-				mb: "4",
-				children: "Configure o comportamento da lista."
-			}),
-			/* @__PURE__ */ jsx(p$1, {
-				pt: "3",
-				children: /* @__PURE__ */ jsxs(p, {
-					direction: "column",
-					gap: "3",
-					children: [
-						/* @__PURE__ */ jsx(p$2, {
-							size: "2",
-							weight: "bold",
-							children: "Ordenação"
-						}),
-						/* @__PURE__ */ jsxs(p, {
-							gap: "3",
-							align: "center",
-							children: [/* @__PURE__ */ jsxs(p$1, {
-								flexGrow: "1",
-								children: [/* @__PURE__ */ jsx(p$2, {
-									size: "1",
-									mb: "1",
-									as: "div",
-									children: "Propriedade para Ordenar (ex: data, id)"
-								}), /* @__PURE__ */ jsxs(C, {
-									value: k,
-									onValueChange: (s) => F(s),
-									children: [/* @__PURE__ */ jsx(u$2, {
-										style: { width: "100%" },
-										placeholder: "Selecione..."
-									}), /* @__PURE__ */ jsxs(g, { children: [/* @__PURE__ */ jsx(v$1, {
-										value: "__none__",
-										children: "(Nenhum)"
-									}), s.availableProps.map((s) => /* @__PURE__ */ jsx(v$1, {
-										value: s.dataName,
-										children: s.name
-									}, s.dataName))] })]
-								})]
-							}), /* @__PURE__ */ jsxs(p$1, { children: [/* @__PURE__ */ jsx(p$2, {
-								size: "1",
-								mb: "1",
-								as: "div",
-								children: "Direção"
-							}), /* @__PURE__ */ jsxs(C, {
-								value: L,
-								onValueChange: (s) => V(s),
-								children: [/* @__PURE__ */ jsx(u$2, {}), /* @__PURE__ */ jsxs(g, { children: [/* @__PURE__ */ jsx(v$1, {
-									value: "asc",
-									children: "Crescente (A-Z)"
-								}), /* @__PURE__ */ jsx(v$1, {
-									value: "desc",
-									children: "Decrescente (Z-A)"
-								})] })]
-							})] })]
-						}),
-						/* @__PURE__ */ jsxs(p, {
-							gap: "3",
-							align: "center",
-							children: [/* @__PURE__ */ jsxs(p$1, {
-								flexGrow: "1",
-								children: [/* @__PURE__ */ jsx(p$2, {
+		k && (V(s.listSettings.sortProp || "__none__"), K(s.listSettings.sortOrder || "asc"), J(s.listSettings.newestPosition || "bottom"), pA(s.listSettings.scrollDirection || "down"), _A(s.listSettings.containerHeight ? String(s.listSettings.containerHeight) : ""), hA(String(s.canvasHeight || 150)));
+	}, [k]), useEffect(() => {
+		if (!k) return;
+		let d = parseInt(mA, 10);
+		!isNaN(d) && d > 0 && s.canvasHeight !== d && w(d);
+	}, [
+		mA,
+		k,
+		w,
+		s.canvasHeight
+	]), /* @__PURE__ */ jsxs(s$2, {
+		open: k,
+		onOpenChange: F,
+		children: [/* @__PURE__ */ jsx(n$2, { children: /* @__PURE__ */ jsxs(o, {
+			variant: "soft",
+			color: "gray",
+			style: {
+				width: "100%",
+				justifyContent: "center",
+				cursor: "pointer"
+			},
+			children: [/* @__PURE__ */ jsx(GearIcon, {}), " Configurações"]
+		}) }), /* @__PURE__ */ jsxs(p$6, {
+			style: { maxWidth: 600 },
+			children: [
+				/* @__PURE__ */ jsx(g$2, { children: "Configurações do Editor" }),
+				/* @__PURE__ */ jsx(m, {
+					size: "2",
+					mb: "4",
+					children: "Configure o comportamento da lista."
+				}),
+				/* @__PURE__ */ jsx(p$1, {
+					pt: "3",
+					children: /* @__PURE__ */ jsxs(p, {
+						direction: "column",
+						gap: "3",
+						children: [
+							/* @__PURE__ */ jsx(p$2, {
+								size: "2",
+								weight: "bold",
+								children: "Ordenação"
+							}),
+							/* @__PURE__ */ jsxs(p, {
+								gap: "3",
+								align: "center",
+								children: [/* @__PURE__ */ jsxs(p$1, {
+									flexGrow: "1",
+									children: [/* @__PURE__ */ jsx(p$2, {
+										size: "1",
+										mb: "1",
+										as: "div",
+										children: "Propriedade para Ordenar (ex: data, id)"
+									}), /* @__PURE__ */ jsxs(C, {
+										value: L,
+										onValueChange: (s) => V(s),
+										children: [/* @__PURE__ */ jsx(u$2, {
+											style: { width: "100%" },
+											placeholder: "Selecione..."
+										}), /* @__PURE__ */ jsxs(g, { children: [/* @__PURE__ */ jsx(v$1, {
+											value: "__none__",
+											children: "(Nenhum)"
+										}), s.availableProps.map((s) => /* @__PURE__ */ jsx(v$1, {
+											value: s.dataName,
+											children: s.name
+										}, s.dataName))] })]
+									})]
+								}), /* @__PURE__ */ jsxs(p$1, { children: [/* @__PURE__ */ jsx(p$2, {
 									size: "1",
 									mb: "1",
 									as: "div",
-									children: "Posição do Recente"
+									children: "Direção"
 								}), /* @__PURE__ */ jsxs(C, {
 									value: U,
 									onValueChange: (s) => K(s),
-									children: [/* @__PURE__ */ jsx(u$2, { style: { width: "100%" } }), /* @__PURE__ */ jsxs(g, { children: [/* @__PURE__ */ jsx(v$1, {
-										value: "top",
-										children: "Topo (Início)"
-									}), /* @__PURE__ */ jsx(v$1, {
-										value: "bottom",
-										children: "Base (Final)"
-									})] })]
-								})]
-							}), /* @__PURE__ */ jsxs(p$1, {
-								flexGrow: "1",
-								children: [/* @__PURE__ */ jsx(p$2, {
-									size: "1",
-									mb: "1",
-									as: "div",
-									children: "Comportamento de Rolagem"
-								}), /* @__PURE__ */ jsxs(C, {
-									value: q,
-									onValueChange: (s) => J(s),
-									children: [/* @__PURE__ */ jsx(u$2, { style: { width: "100%" } }), /* @__PURE__ */ jsxs(g, { children: [/* @__PURE__ */ jsx(v$1, {
-										value: "down",
-										children: "Descer (Padrão)"
+									children: [/* @__PURE__ */ jsx(u$2, {}), /* @__PURE__ */ jsxs(g, { children: [/* @__PURE__ */ jsx(v$1, {
+										value: "asc",
+										children: "Crescente (A-Z)"
 									}), /* @__PURE__ */ jsx(v$1, {
-										value: "up",
-										children: "Subir (Chat)"
+										value: "desc",
+										children: "Decrescente (Z-A)"
 									})] })]
-								})]
-							})]
-						}),
-						/* @__PURE__ */ jsx(p$2, {
-							size: "2",
-							weight: "bold",
-							mt: "2",
-							children: "Dimensões"
-						}),
-						/* @__PURE__ */ jsxs(p, {
-							gap: "3",
-							align: "center",
-							children: [/* @__PURE__ */ jsxs(p$1, {
-								flexGrow: "1",
-								children: [
-									/* @__PURE__ */ jsx(p$2, {
+								})] })]
+							}),
+							/* @__PURE__ */ jsxs(p, {
+								gap: "3",
+								align: "center",
+								children: [/* @__PURE__ */ jsxs(p$1, {
+									flexGrow: "1",
+									children: [/* @__PURE__ */ jsx(p$2, {
 										size: "1",
 										mb: "1",
 										as: "div",
-										children: "Altura do Item (Template) (px)"
-									}),
-									/* @__PURE__ */ jsx(u, {
-										type: "number",
-										min: "10",
-										value: $,
-										onChange: (s) => pA(s.target.value)
-									}),
-									/* @__PURE__ */ jsx(p$2, {
-										size: "1",
-										color: "gray",
-										children: "Altura de cada item individual na lista."
-									})
-								]
-							}), /* @__PURE__ */ jsxs(p$1, {
-								flexGrow: "1",
-								children: [
-									/* @__PURE__ */ jsx(p$2, {
+										children: "Posição do Recente"
+									}), /* @__PURE__ */ jsxs(C, {
+										value: q,
+										onValueChange: (s) => J(s),
+										children: [/* @__PURE__ */ jsx(u$2, { style: { width: "100%" } }), /* @__PURE__ */ jsxs(g, { children: [/* @__PURE__ */ jsx(v$1, {
+											value: "top",
+											children: "Topo (Início)"
+										}), /* @__PURE__ */ jsx(v$1, {
+											value: "bottom",
+											children: "Base (Final)"
+										})] })]
+									})]
+								}), /* @__PURE__ */ jsxs(p$1, {
+									flexGrow: "1",
+									children: [/* @__PURE__ */ jsx(p$2, {
 										size: "1",
 										mb: "1",
 										as: "div",
-										children: "Altura da Lista (Container) (px)"
-									}),
-									/* @__PURE__ */ jsx(u, {
-										type: "number",
-										min: "0",
-										placeholder: "Auto (100%)",
-										value: mA,
-										onChange: (s) => hA(s.target.value)
-									}),
-									/* @__PURE__ */ jsx(p$2, {
-										size: "1",
-										color: "gray",
-										children: "Altura total da lista. Se exceder, rola. Vazio = 100%."
-									})
-								]
-							})]
-						}),
-						/* @__PURE__ */ jsx(p$2, {
-							size: "1",
-							color: "gray",
-							children: "Essa propriedade será usada para ordenar os itens no modo lista."
-						})
-					]
+										children: "Comportamento de Rolagem"
+									}), /* @__PURE__ */ jsxs(C, {
+										value: $,
+										onValueChange: (s) => pA(s),
+										children: [/* @__PURE__ */ jsx(u$2, { style: { width: "100%" } }), /* @__PURE__ */ jsxs(g, { children: [/* @__PURE__ */ jsx(v$1, {
+											value: "down",
+											children: "Descer (Padrão)"
+										}), /* @__PURE__ */ jsx(v$1, {
+											value: "up",
+											children: "Subir (Chat)"
+										})] })]
+									})]
+								})]
+							}),
+							/* @__PURE__ */ jsx(p$2, {
+								size: "2",
+								weight: "bold",
+								mt: "2",
+								children: "Dimensões"
+							}),
+							/* @__PURE__ */ jsxs(p, {
+								gap: "3",
+								align: "center",
+								children: [/* @__PURE__ */ jsxs(p$1, {
+									flexGrow: "1",
+									children: [
+										/* @__PURE__ */ jsx(p$2, {
+											size: "1",
+											mb: "1",
+											as: "div",
+											children: "Altura do Item (Template) (px)"
+										}),
+										/* @__PURE__ */ jsx(u, {
+											type: "number",
+											min: "10",
+											value: mA,
+											onChange: (s) => hA(s.target.value)
+										}),
+										/* @__PURE__ */ jsx(p$2, {
+											size: "1",
+											color: "gray",
+											children: "Altura de cada item individual na lista."
+										})
+									]
+								}), /* @__PURE__ */ jsxs(p$1, {
+									flexGrow: "1",
+									children: [
+										/* @__PURE__ */ jsx(p$2, {
+											size: "1",
+											mb: "1",
+											as: "div",
+											children: "Altura da Lista (Container) (px)"
+										}),
+										/* @__PURE__ */ jsx(u, {
+											type: "number",
+											min: "0",
+											placeholder: "Auto (100%)",
+											value: gA,
+											onChange: (s) => _A(s.target.value)
+										}),
+										/* @__PURE__ */ jsx(p$2, {
+											size: "1",
+											color: "gray",
+											children: "Altura total da lista. Se exceder, rola. Vazio = 100%."
+										})
+									]
+								})]
+							}),
+							/* @__PURE__ */ jsx(p$2, {
+								size: "1",
+								color: "gray",
+								children: "Essa propriedade será usada para ordenar os itens no modo lista."
+							})
+						]
+					})
+				}),
+				/* @__PURE__ */ jsxs(p, {
+					gap: "3",
+					mt: "4",
+					justify: "end",
+					children: [/* @__PURE__ */ jsx(D$1, { children: /* @__PURE__ */ jsx(o, {
+						variant: "soft",
+						color: "gray",
+						children: "Cancelar"
+					}) }), /* @__PURE__ */ jsx(D$1, { children: /* @__PURE__ */ jsx(o, {
+						onClick: () => {
+							let s = parseInt(gA, 10);
+							d({
+								sortProp: L === "__none__" ? "" : L,
+								sortOrder: U,
+								newestPosition: q,
+								scrollDirection: $,
+								containerHeight: !isNaN(s) && s > 0 ? s : void 0
+							}), F(!1);
+						},
+						children: "Salvar Alterações"
+					}) })]
 				})
-			}),
-			/* @__PURE__ */ jsxs(p, {
-				gap: "3",
-				mt: "4",
-				justify: "end",
-				children: [/* @__PURE__ */ jsx(D$1, { children: /* @__PURE__ */ jsx(o, {
-					variant: "soft",
-					color: "gray",
-					children: "Cancelar"
-				}) }), /* @__PURE__ */ jsx(D$1, { children: /* @__PURE__ */ jsx(o, {
-					onClick: () => {
-						let s = parseInt(mA, 10);
-						d({
-							sortProp: k === "__none__" ? "" : k,
-							sortOrder: L,
-							newestPosition: U,
-							scrollDirection: q,
-							containerHeight: !isNaN(s) && s > 0 ? s : void 0
-						});
-					},
-					children: "Salvar Alterações"
-				}) })]
-			})
-		]
-	})] });
+			]
+		})]
+	});
 };
 var EditorContent = ({ layout: s, initialState: w, onSave: k, theme: F = "light" }) => {
 	let [L, V] = useState(!0), [U, K] = useState(!0), { addElement: q, loadState: J, state: X } = useEditor();
@@ -14789,5 +14799,5 @@ const GenericEditor = (s) => /* @__PURE__ */ jsx(EditorProvider, {
 	availableProps: s.layout.props,
 	theme: s.theme,
 	children: /* @__PURE__ */ jsx(EditorContent, { ...s })
-}), generateHTML = (s, d, w = {}) => Function("elements", "data", "options", getRendererCode() + "\nreturn renderTemplate(elements, data, options);")(s, d, w), 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' }, canvasHeight: number }\n * @returns {string} - The generated HTML string\n */\nfunction renderTemplate(elements, data, options = {}) {\n    const { isList, listSettings, canvasHeight } = options;\n\n    const camelToKebab = (string) => {\n        return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();\n    };\n\n    const styleObjectToString = (style) => {\n        if (!style) return '';\n        const pxProps = ['width', 'height', 'top', 'left', 'right', 'bottom', 'fontSize', 'borderRadius', 'padding', 'margin', 'borderWidth'];\n        \n        return Object.entries(style)\n            .map(([key, value]) => {\n                if (value === undefined || value === null) return '';\n                const cssKey = camelToKebab(key);\n                const cssValue = (typeof value === 'number' && pxProps.includes(key)) ? value + 'px' : value;\n                return `${cssKey}: ${cssValue}`;\n            })\n            .filter(Boolean)\n            .join('; ');\n    };\n\n    const renderItem = (itemData, index = 0, offsetY = 0) => {\n        return elements.map(element => {\n            let content = element.content;\n            let imgSrc = '';\n\n            if (element.type === 'text') {\n                content = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {\n                    const val = itemData[key.trim()];\n                    return val !== undefined && val !== null ? String(val) : match;\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            const baseStyle = {\n                position: 'absolute',\n                left: element.x,\n                top: element.y + offsetY,\n                width: element.width,\n                height: element.height,\n                transform: element.rotation ? `rotate(${element.rotation}deg)` : undefined,\n                overflow: 'hidden',\n                ...element.style\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') {\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 item height\n        const itemHeight = canvasHeight || Math.max(...elements.map(el => el.y + el.height));\n\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                 height: itemHeight,\n                 width: '100%',\n                 marginBottom: 0\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        const animationCss = `\n            @keyframes slideIn {\n                from { opacity: 0; transform: translateY(20px); }\n                to { opacity: 1; transform: translateY(0); }\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: slideIn 0.3s ease-out;\n                margin-bottom: 10px;\n                width: 100%;\n                position: relative;\n            }\n        `;\n\n        return `\n            <style>${animationCss}</style>\n            <div class=\"list-wrapper\">\n                ${itemsHtml}\n            </div>\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 = (s, d, w = {}) => Function("elements", "data", "options", getRendererCode() + "\nreturn renderTemplate(elements, data, options);")(s, d, w), 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' }, canvasHeight: number }\n * @returns {string} - The generated HTML string\n */\nfunction renderTemplate(elements, data, options = {}) {\n    const { isList, listSettings, canvasHeight } = options;\n\n    const camelToKebab = (string) => {\n        return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();\n    };\n\n    const styleObjectToString = (style) => {\n        if (!style) return '';\n        const pxProps = ['width', 'height', 'top', 'left', 'right', 'bottom', 'fontSize', 'borderRadius', 'padding', 'margin', 'borderWidth'];\n        \n        return Object.entries(style)\n            .map(([key, value]) => {\n                if (value === undefined || value === null) return '';\n                const cssKey = camelToKebab(key);\n                const cssValue = (typeof value === 'number' && pxProps.includes(key)) ? value + 'px' : value;\n                return `${cssKey}: ${cssValue}`;\n            })\n            .filter(Boolean)\n            .join('; ');\n    };\n\n    const renderItem = (itemData, index = 0, offsetY = 0) => {\n        return elements.map(element => {\n            let content = element.content;\n            let imgSrc = '';\n\n            if (element.type === 'text') {\n                content = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {\n                    const val = itemData[key.trim()];\n                    return val !== undefined && val !== null ? String(val) : match;\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            const baseStyle = {\n                position: 'absolute',\n                left: element.x,\n                top: element.y + offsetY,\n                width: element.width,\n                height: element.height,\n                transform: element.rotation ? `rotate(${element.rotation}deg)` : undefined,\n                overflow: 'hidden',\n                ...element.style\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') {\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 item height\n        const itemHeight = canvasHeight || Math.max(...elements.map(el => el.y + el.height));\n\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                 height: itemHeight,\n                 width: '100%',\n                 marginBottom: 0\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        const animationCss = `\n            @keyframes slideIn {\n                from { opacity: 0; transform: translateY(20px); }\n                to { opacity: 1; transform: translateY(0); }\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: slideIn 0.3s ease-out;\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        return `\n            <style>${animationCss}</style>\n            <div class=\"list-wrapper\">\n                ${itemsHtml}\n            </div>\n            ${scrollScript}\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 };