@1urso/generic-editor 0.1.1 → 0.1.2

package/dist/generic-editor.js

@@ -7653,8 +7653,8 @@ var _excluded$Y = ["color"], ChevronRightIcon = /* @__PURE__ */ forwardRef(funct
 	"Arial Black",
 	"Impact"
 ];
-const EditorProvider = ({ children: s, isList: C = !1, availableProps: w = [] }) => {
-	let [k, F] = useState({
+const EditorProvider = ({ children: s, isList: C = !1, availableProps: w = [], theme: k = "light" }) => {
+	let [F, L] = useState({
 		elements: [],
 		selectedElementId: null,
 		isList: C,
@@ -7668,10 +7668,11 @@ const EditorProvider = ({ children: s, isList: C = !1, availableProps: w = [] })
 			"Open Sans",
 			"Lato",
 			"Montserrat"
-		]
+		],
+		theme: k
 	});
 	React.useEffect(() => {
-		k.availableFonts.forEach((s) => {
+		F.availableFonts.forEach((s) => {
 			if (SAFE_FONTS.includes(s)) return;
 			let d = `font-${s.replace(/\s+/g, "-").toLowerCase()}`;
 			if (!document.getElementById(d)) {
@@ -7679,15 +7680,20 @@ const EditorProvider = ({ children: s, isList: C = !1, availableProps: w = [] })
 				C.id = d, C.href = `https://fonts.googleapis.com/css2?family=${s.replace(/ /g, "+")}&display=swap`, C.rel = "stylesheet", document.head.appendChild(C);
 			}
 		});
-	}, [k.availableFonts]), React.useEffect(() => {
-		F((s) => ({
+	}, [F.availableFonts]), React.useEffect(() => {
+		L((s) => ({
 			...s,
 			isList: C,
-			availableProps: w
+			availableProps: w,
+			theme: k
 		}));
-	}, [C, w]);
-	let L = React.useCallback((s) => {
-		F((d) => ({
+	}, [
+		C,
+		w,
+		k
+	]);
+	let V = React.useCallback((s) => {
+		L((d) => ({
 			...d,
 			...s,
 			isList: s.isList ?? d.isList,
@@ -7695,7 +7701,7 @@ const EditorProvider = ({ children: s, isList: C = !1, availableProps: w = [] })
 			availableFonts: s.availableFonts ?? d.availableFonts,
 			selectedElementId: null
 		}));
-	}, []), V = React.useCallback((s) => {
+	}, []), U = React.useCallback((s) => {
 		let d = {};
 		s.type === "box" && (d.backgroundColor = "var(--gray-4)");
 		let C = {
@@ -7710,74 +7716,74 @@ const EditorProvider = ({ children: s, isList: C = !1, availableProps: w = [] })
 				...s.style || {}
 			}
 		};
-		F((s) => ({
+		L((s) => ({
 			...s,
 			elements: [...s.elements, C]
 		}));
-	}, []), U = React.useCallback((s) => {
-		F((d) => ({
+	}, []), K = React.useCallback((s) => {
+		L((d) => ({
 			...d,
 			elements: d.elements.filter((d) => d.id !== s),
 			selectedElementId: d.selectedElementId === s ? null : d.selectedElementId
 		}));
-	}, []), K = React.useCallback((s) => {
-		F((d) => ({
+	}, []), q = React.useCallback((s) => {
+		L((d) => ({
 			...d,
 			selectedElementId: s
 		}));
-	}, []), q = React.useCallback((s, d) => {
-		F((C) => {
+	}, []), J = React.useCallback((s, d) => {
+		L((C) => {
 			let w = [...C.elements], k = w[s];
 			return w.splice(s, 1), w.splice(d, 0, k), {
 				...C,
 				elements: w
 			};
 		});
-	}, []), J = React.useCallback((s, d) => {
-		F((C) => ({
+	}, []), X = React.useCallback((s, d) => {
+		L((C) => ({
 			...C,
 			elements: C.elements.map((C) => C.id === s ? {
 				...C,
 				...d
 			} : C)
 		}));
-	}, []), X = React.useCallback((s, d) => {
-		F((C) => ({
+	}, []), $ = React.useCallback((s, d) => {
+		L((C) => ({
 			...C,
 			mockData: s,
 			singleMockData: d
 		}));
-	}, []), $ = React.useCallback((s) => {
-		F((d) => ({
+	}, []), CO = React.useCallback((s) => {
+		L((d) => ({
 			...d,
 			listSettings: {
 				...d.listSettings,
 				...s
 			}
 		}));
-	}, []), CO = React.useMemo(() => ({
-		state: k,
-		addElement: V,
-		removeElement: U,
-		selectElement: K,
-		moveElement: q,
-		updateElement: J,
-		setMockData: X,
-		updateListSettings: $,
-		loadState: L
+	}, []), wO = React.useMemo(() => ({
+		state: F,
+		addElement: U,
+		removeElement: K,
+		selectElement: q,
+		moveElement: J,
+		updateElement: X,
+		setMockData: $,
+		updateListSettings: CO,
+		loadState: V
 	}), [
-		k,
-		V,
+		F,
 		U,
 		K,
 		q,
 		J,
 		X,
 		$,
-		L
+		CO,
+		V
 	]);
 	return /* @__PURE__ */ jsx(EditorContext.Provider, {
-		value: CO,
+		value: wO,
 		children: s
 	});
 }, useEditor = () => {
@@ -8421,373 +8427,437 @@ const ElementContextMenu = ({ children: s, element: C }) => {
 		/* @__PURE__ */ jsxs(Root2$1, { children: [/* @__PURE__ */ jsx(Trigger$1, {
 			asChild: !0,
 			children: s
-		}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsxs(Content2$1, {
-			className: "ContextMenuContent",
-			children: [
-				/* @__PURE__ */ jsxs(Sub2$1, { children: [/* @__PURE__ */ jsxs(SubTrigger2$1, {
-					className: "ContextMenuSubTrigger",
-					children: [
-						"Vincular Dados ",
-						C.dataBinding && `(${C.dataBinding})`,
-						/* @__PURE__ */ jsx("div", {
-							className: "RightSlot",
-							children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
-						})
-					]
-				}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsxs(SubContent2$1, {
-					className: "ContextMenuSubContent",
-					children: [
-						V.availableProps && V.availableProps.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [V.availableProps.map((s) => /* @__PURE__ */ jsxs(Item2$1, {
-							className: "ContextMenuItem",
-							onSelect: () => {
-								let d = { dataBinding: s.dataName };
-								C.type === "text" && (d.content = `{{${s.dataName}}}`), w(C.id, d);
-							},
-							children: [s.name, /* @__PURE__ */ jsx("div", {
-								className: "RightSlot",
-								style: {
-									color: "var(--gray-10)",
-									fontSize: 10
-								},
-								children: s.dataName
-							})]
-						}, s.dataName)), /* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" })] }),
-						/* @__PURE__ */ jsx(Item2$1, {
-							className: "ContextMenuItem",
-							onSelect: () => {
-								wO(C.dataBinding || ""), J(!0);
-							},
-							children: "Outro / Manual..."
-						}),
-						C.dataBinding && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" }), /* @__PURE__ */ jsx(Item2$1, {
-							className: "ContextMenuItem",
-							style: { color: "var(--red-9)" },
-							onSelect: () => w(C.id, { dataBinding: void 0 }),
-							children: "Remover Vínculo"
-						})] })
-					]
-				}) })] }),
-				/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" }),
-				C.type === "text" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Item2$1, {
-					className: "ContextMenuItem",
-					onSelect: () => {
-						$(C.content), K(!0);
-					},
-					children: "Editar Texto..."
-				}), /* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" })] }),
-				/* @__PURE__ */ jsx(Item2$1, {
-					className: "ContextMenuItem",
-					onSelect: FO,
-					children: "Duplicar"
-				}),
-				/* @__PURE__ */ jsx(Item2$1, {
-					className: "ContextMenuItem",
-					onSelect: () => k(C.id),
-					children: "Excluir"
-				}),
-				/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" }),
-				C.type === "image" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-					/* @__PURE__ */ jsxs(Sub2$1, { children: [/* @__PURE__ */ jsxs(SubTrigger2$1, {
-						className: "ContextMenuSubTrigger",
-						children: ["Alterar Imagem", /* @__PURE__ */ jsx("div", {
-							className: "RightSlot",
-							children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
-						})]
-					}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsxs(SubContent2$1, {
-						className: "ContextMenuSubContent",
-						children: [/* @__PURE__ */ jsx(Item2$1, {
-							className: "ContextMenuItem",
-							onSelect: () => LO.current?.click(),
-							children: "Carregar do Computador"
-						}), /* @__PURE__ */ jsx(Item2$1, {
-							className: "ContextMenuItem",
-							onSelect: () => {
-								let s = window.prompt("Insira a URL da imagem:", C.content);
-								s !== null && w(C.id, { content: s });
-							},
-							children: "Inserir URL"
-						})]
-					}) })] }),
+		}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsx(R, {
+			appearance: V.theme,
+			style: { display: "contents" },
+			children: /* @__PURE__ */ jsxs(Content2$1, {
+				className: "ContextMenuContent",
+				children: [
 					/* @__PURE__ */ jsxs(Sub2$1, { children: [/* @__PURE__ */ jsxs(SubTrigger2$1, {
 						className: "ContextMenuSubTrigger",
-						children: ["Ajuste da Imagem", /* @__PURE__ */ jsx("div", {
-							className: "RightSlot",
-							children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
-						})]
-					}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsxs(SubContent2$1, {
-						className: "ContextMenuSubContent",
 						children: [
-							/* @__PURE__ */ jsx(Item2$1, {
-								className: "ContextMenuItem",
-								onSelect: () => kO({ objectFit: "cover" }),
-								children: "Preencher (Cover)"
-							}),
-							/* @__PURE__ */ jsx(Item2$1, {
-								className: "ContextMenuItem",
-								onSelect: () => kO({ objectFit: "contain" }),
-								children: "Ajustar (Contain)"
-							}),
-							/* @__PURE__ */ jsx(Item2$1, {
-								className: "ContextMenuItem",
-								onSelect: () => kO({ objectFit: "fill" }),
-								children: "Esticar (Fill)"
+							"Vincular Dados ",
+							C.dataBinding && `(${C.dataBinding})`,
+							/* @__PURE__ */ jsx("div", {
+								className: "RightSlot",
+								children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
 							})
 						]
+					}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsx(R, {
+						appearance: V.theme,
+						style: { display: "contents" },
+						children: /* @__PURE__ */ jsxs(SubContent2$1, {
+							className: "ContextMenuSubContent",
+							children: [
+								V.availableProps && V.availableProps.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [V.availableProps.map((s) => /* @__PURE__ */ jsxs(Item2$1, {
+									className: "ContextMenuItem",
+									onSelect: () => {
+										let d = { dataBinding: s.dataName };
+										C.type === "text" && (d.content = `{{${s.dataName}}}`), w(C.id, d);
+									},
+									children: [s.name, /* @__PURE__ */ jsx("div", {
+										className: "RightSlot",
+										style: {
+											color: "var(--gray-10)",
+											fontSize: 10
+										},
+										children: s.dataName
+									})]
+								}, s.dataName)), /* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" })] }),
+								/* @__PURE__ */ jsx(Item2$1, {
+									className: "ContextMenuItem",
+									onSelect: () => {
+										wO(C.dataBinding || ""), J(!0);
+									},
+									children: "Outro / Manual..."
+								}),
+								C.dataBinding && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" }), /* @__PURE__ */ jsx(Item2$1, {
+									className: "ContextMenuItem",
+									style: { color: "var(--red-9)" },
+									onSelect: () => w(C.id, { dataBinding: void 0 }),
+									children: "Remover Vínculo"
+								})] })
+							]
+						})
 					}) })] }),
-					/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" })
-				] }),
-				/* @__PURE__ */ jsxs(Sub2$1, { children: [/* @__PURE__ */ jsxs(SubTrigger2$1, {
-					className: "ContextMenuSubTrigger",
-					children: ["Camadas", /* @__PURE__ */ jsx("div", {
-						className: "RightSlot",
-						children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
-					})]
-				}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsxs(SubContent2$1, {
-					className: "ContextMenuSubContent",
-					children: [/* @__PURE__ */ jsx(Item2$1, {
+					/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" }),
+					C.type === "text" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Item2$1, {
 						className: "ContextMenuItem",
-						onSelect: AO,
-						children: "Trazer para frente"
-					}), /* @__PURE__ */ jsx(Item2$1, {
+						onSelect: () => {
+							$(C.content), K(!0);
+						},
+						children: "Editar Texto..."
+					}), /* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" })] }),
+					/* @__PURE__ */ jsx(Item2$1, {
 						className: "ContextMenuItem",
-						onSelect: PO,
-						children: "Enviar para trás"
-					})]
-				}) })] }),
-				/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" }),
-				C.type === "text" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						onSelect: FO,
+						children: "Duplicar"
+					}),
+					/* @__PURE__ */ jsx(Item2$1, {
+						className: "ContextMenuItem",
+						onSelect: () => k(C.id),
+						children: "Excluir"
+					}),
+					/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" }),
+					C.type === "image" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						/* @__PURE__ */ jsxs(Sub2$1, { children: [/* @__PURE__ */ jsxs(SubTrigger2$1, {
+							className: "ContextMenuSubTrigger",
+							children: ["Alterar Imagem", /* @__PURE__ */ jsx("div", {
+								className: "RightSlot",
+								children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+							})]
+						}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsx(R, {
+							appearance: V.theme,
+							style: { display: "contents" },
+							children: /* @__PURE__ */ jsxs(SubContent2$1, {
+								className: "ContextMenuSubContent",
+								children: [/* @__PURE__ */ jsx(Item2$1, {
+									className: "ContextMenuItem",
+									onSelect: () => LO.current?.click(),
+									children: "Carregar do Computador"
+								}), /* @__PURE__ */ jsx(Item2$1, {
+									className: "ContextMenuItem",
+									onSelect: () => {
+										let s = window.prompt("Insira a URL da imagem:", C.content);
+										s !== null && w(C.id, { content: s });
+									},
+									children: "Inserir URL"
+								})]
+							})
+						}) })] }),
+						/* @__PURE__ */ jsxs(Sub2$1, { children: [/* @__PURE__ */ jsxs(SubTrigger2$1, {
+							className: "ContextMenuSubTrigger",
+							children: ["Ajuste da Imagem", /* @__PURE__ */ jsx("div", {
+								className: "RightSlot",
+								children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+							})]
+						}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsx(R, {
+							appearance: V.theme,
+							style: { display: "contents" },
+							children: /* @__PURE__ */ jsxs(SubContent2$1, {
+								className: "ContextMenuSubContent",
+								children: [
+									/* @__PURE__ */ jsx(Item2$1, {
+										className: "ContextMenuItem",
+										onSelect: () => kO({ objectFit: "cover" }),
+										children: "Preencher (Cover)"
+									}),
+									/* @__PURE__ */ jsx(Item2$1, {
+										className: "ContextMenuItem",
+										onSelect: () => kO({ objectFit: "contain" }),
+										children: "Ajustar (Contain)"
+									}),
+									/* @__PURE__ */ jsx(Item2$1, {
+										className: "ContextMenuItem",
+										onSelect: () => kO({ objectFit: "fill" }),
+										children: "Esticar (Fill)"
+									})
+								]
+							})
+						}) })] }),
+						/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" })
+					] }),
 					/* @__PURE__ */ jsxs(Sub2$1, { children: [/* @__PURE__ */ jsxs(SubTrigger2$1, {
 						className: "ContextMenuSubTrigger",
-						children: ["Fonte", /* @__PURE__ */ jsx("div", {
+						children: ["Camadas", /* @__PURE__ */ jsx("div", {
 							className: "RightSlot",
 							children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
 						})]
-					}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsx(SubContent2$1, {
-						className: "ContextMenuSubContent",
-						style: {
-							maxHeight: "300px",
-							overflowY: "auto"
-						},
-						children: V.availableFonts && V.availableFonts.map((s) => /* @__PURE__ */ jsxs(Item2$1, {
-							className: "ContextMenuItem",
-							onSelect: () => kO({ fontFamily: s }),
-							style: { fontFamily: s },
-							children: [s, C.style?.fontFamily === s && /* @__PURE__ */ jsx("div", {
-								className: "RightSlot",
-								children: "✓"
+					}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsx(R, {
+						appearance: V.theme,
+						style: { display: "contents" },
+						children: /* @__PURE__ */ jsxs(SubContent2$1, {
+							className: "ContextMenuSubContent",
+							children: [/* @__PURE__ */ jsx(Item2$1, {
+								className: "ContextMenuItem",
+								onSelect: AO,
+								children: "Trazer para frente"
+							}), /* @__PURE__ */ jsx(Item2$1, {
+								className: "ContextMenuItem",
+								onSelect: PO,
+								children: "Enviar para trás"
 							})]
-						}, s))
+						})
 					}) })] }),
+					/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" }),
+					C.type === "text" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						/* @__PURE__ */ jsxs(Sub2$1, { children: [/* @__PURE__ */ jsxs(SubTrigger2$1, {
+							className: "ContextMenuSubTrigger",
+							children: ["Fonte", /* @__PURE__ */ jsx("div", {
+								className: "RightSlot",
+								children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+							})]
+						}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsx(R, {
+							appearance: V.theme,
+							style: { display: "contents" },
+							children: /* @__PURE__ */ jsx(SubContent2$1, {
+								className: "ContextMenuSubContent",
+								style: {
+									maxHeight: "300px",
+									overflowY: "auto"
+								},
+								children: V.availableFonts && V.availableFonts.map((s) => /* @__PURE__ */ jsxs(Item2$1, {
+									className: "ContextMenuItem",
+									onSelect: () => kO({ fontFamily: s }),
+									style: { fontFamily: s },
+									children: [s, C.style?.fontFamily === s && /* @__PURE__ */ jsx("div", {
+										className: "RightSlot",
+										children: "✓"
+									})]
+								}, s))
+							})
+						}) })] }),
+						/* @__PURE__ */ jsxs(Sub2$1, { children: [/* @__PURE__ */ jsxs(SubTrigger2$1, {
+							className: "ContextMenuSubTrigger",
+							children: ["Tamanho da Fonte", /* @__PURE__ */ jsx("div", {
+								className: "RightSlot",
+								children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+							})]
+						}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsx(R, {
+							appearance: V.theme,
+							style: { display: "contents" },
+							children: /* @__PURE__ */ jsx(SubContent2$1, {
+								className: "ContextMenuSubContent",
+								children: [
+									12,
+									14,
+									16,
+									20,
+									24,
+									32,
+									48,
+									64
+								].map((s) => /* @__PURE__ */ jsxs(Item2$1, {
+									className: "ContextMenuItem",
+									onSelect: () => kO({ fontSize: `${s}px` }),
+									children: [s, "px"]
+								}, s))
+							})
+						}) })] }),
+						/* @__PURE__ */ jsxs(Sub2$1, { children: [/* @__PURE__ */ jsxs(SubTrigger2$1, {
+							className: "ContextMenuSubTrigger",
+							children: ["Cor do Texto", /* @__PURE__ */ jsx("div", {
+								className: "RightSlot",
+								children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+							})]
+						}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsx(R, {
+							appearance: V.theme,
+							style: { display: "contents" },
+							children: /* @__PURE__ */ jsx(SubContent2$1, {
+								className: "ContextMenuSubContent",
+								children: IO.filter((s) => s !== "transparent").map((s) => /* @__PURE__ */ jsxs(Item2$1, {
+									className: "ContextMenuItem",
+									onSelect: () => kO({ color: s }),
+									children: [/* @__PURE__ */ jsx("div", { style: {
+										width: 12,
+										height: 12,
+										backgroundColor: s,
+										marginRight: 8,
+										border: "1px solid #ccc"
+									} }), s]
+								}, s))
+							})
+						}) })] }),
+						/* @__PURE__ */ jsxs(Sub2$1, { children: [/* @__PURE__ */ jsxs(SubTrigger2$1, {
+							className: "ContextMenuSubTrigger",
+							children: ["Peso da Fonte", /* @__PURE__ */ jsx("div", {
+								className: "RightSlot",
+								children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+							})]
+						}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsx(R, {
+							appearance: V.theme,
+							style: { display: "contents" },
+							children: /* @__PURE__ */ jsxs(SubContent2$1, {
+								className: "ContextMenuSubContent",
+								children: [/* @__PURE__ */ jsx(Item2$1, {
+									className: "ContextMenuItem",
+									onSelect: () => kO({ fontWeight: "normal" }),
+									children: "Normal"
+								}), /* @__PURE__ */ jsx(Item2$1, {
+									className: "ContextMenuItem",
+									onSelect: () => kO({ fontWeight: "bold" }),
+									children: "Negrito"
+								})]
+							})
+						}) })] }),
+						/* @__PURE__ */ jsxs(Sub2$1, { children: [/* @__PURE__ */ jsxs(SubTrigger2$1, {
+							className: "ContextMenuSubTrigger",
+							children: ["Alinhamento", /* @__PURE__ */ jsx("div", {
+								className: "RightSlot",
+								children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+							})]
+						}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsx(R, {
+							appearance: V.theme,
+							style: { display: "contents" },
+							children: /* @__PURE__ */ jsxs(SubContent2$1, {
+								className: "ContextMenuSubContent",
+								children: [
+									/* @__PURE__ */ jsx(Item2$1, {
+										className: "ContextMenuItem",
+										onSelect: () => kO({ textAlign: "left" }),
+										children: "Esquerda"
+									}),
+									/* @__PURE__ */ jsx(Item2$1, {
+										className: "ContextMenuItem",
+										onSelect: () => kO({ textAlign: "center" }),
+										children: "Centro"
+									}),
+									/* @__PURE__ */ jsx(Item2$1, {
+										className: "ContextMenuItem",
+										onSelect: () => kO({ textAlign: "right" }),
+										children: "Direita"
+									})
+								]
+							})
+						}) })] })
+					] }),
 					/* @__PURE__ */ jsxs(Sub2$1, { children: [/* @__PURE__ */ jsxs(SubTrigger2$1, {
 						className: "ContextMenuSubTrigger",
-						children: ["Tamanho da Fonte", /* @__PURE__ */ jsx("div", {
+						children: ["Cor de Fundo", /* @__PURE__ */ jsx("div", {
 							className: "RightSlot",
 							children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
 						})]
-					}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsx(SubContent2$1, {
-						className: "ContextMenuSubContent",
-						children: [
-							12,
-							14,
-							16,
-							20,
-							24,
-							32,
-							48,
-							64
-						].map((s) => /* @__PURE__ */ jsxs(Item2$1, {
-							className: "ContextMenuItem",
-							onSelect: () => kO({ fontSize: `${s}px` }),
-							children: [s, "px"]
-						}, s))
+					}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsx(R, {
+						appearance: V.theme,
+						style: { display: "contents" },
+						children: /* @__PURE__ */ jsx(SubContent2$1, {
+							className: "ContextMenuSubContent",
+							children: IO.map((s) => /* @__PURE__ */ jsxs(Item2$1, {
+								className: "ContextMenuItem",
+								onSelect: () => kO({ backgroundColor: s }),
+								children: [/* @__PURE__ */ jsx("div", { style: {
+									width: 12,
+									height: 12,
+									backgroundColor: s,
+									marginRight: 8,
+									border: "1px solid #ccc"
+								} }), s === "transparent" ? "Transparente" : s]
+							}, s))
+						})
 					}) })] }),
 					/* @__PURE__ */ jsxs(Sub2$1, { children: [/* @__PURE__ */ jsxs(SubTrigger2$1, {
 						className: "ContextMenuSubTrigger",
-						children: ["Cor do Texto", /* @__PURE__ */ jsx("div", {
+						children: ["Arredondamento", /* @__PURE__ */ jsx("div", {
 							className: "RightSlot",
 							children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
 						})]
-					}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsx(SubContent2$1, {
-						className: "ContextMenuSubContent",
-						children: IO.filter((s) => s !== "transparent").map((s) => /* @__PURE__ */ jsxs(Item2$1, {
-							className: "ContextMenuItem",
-							onSelect: () => kO({ color: s }),
-							children: [/* @__PURE__ */ jsx("div", { style: {
-								width: 12,
-								height: 12,
-								backgroundColor: s,
-								marginRight: 8,
-								border: "1px solid #ccc"
-							} }), s]
-						}, s))
+					}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsx(R, {
+						appearance: V.theme,
+						style: { display: "contents" },
+						children: /* @__PURE__ */ jsx(SubContent2$1, {
+							className: "ContextMenuSubContent",
+							children: [
+								0,
+								4,
+								8,
+								12,
+								16,
+								24,
+								"50%"
+							].map((s) => /* @__PURE__ */ jsx(Item2$1, {
+								className: "ContextMenuItem",
+								onSelect: () => kO({ borderRadius: typeof s == "number" ? `${s}px` : s }),
+								children: s === "50%" ? "Círculo" : `${s}px`
+							}, s))
+						})
 					}) })] }),
 					/* @__PURE__ */ jsxs(Sub2$1, { children: [/* @__PURE__ */ jsxs(SubTrigger2$1, {
 						className: "ContextMenuSubTrigger",
-						children: ["Peso da Fonte", /* @__PURE__ */ jsx("div", {
+						children: ["Espaçamento", /* @__PURE__ */ jsx("div", {
 							className: "RightSlot",
 							children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
 						})]
-					}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsxs(SubContent2$1, {
-						className: "ContextMenuSubContent",
-						children: [/* @__PURE__ */ jsx(Item2$1, {
-							className: "ContextMenuItem",
-							onSelect: () => kO({ fontWeight: "normal" }),
-							children: "Normal"
-						}), /* @__PURE__ */ jsx(Item2$1, {
-							className: "ContextMenuItem",
-							onSelect: () => kO({ fontWeight: "bold" }),
-							children: "Negrito"
-						})]
+					}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsx(R, {
+						appearance: V.theme,
+						style: { display: "contents" },
+						children: /* @__PURE__ */ jsx(SubContent2$1, {
+							className: "ContextMenuSubContent",
+							children: [
+								0,
+								4,
+								8,
+								12,
+								16,
+								24,
+								32
+							].map((s) => /* @__PURE__ */ jsxs(Item2$1, {
+								className: "ContextMenuItem",
+								onSelect: () => kO({ padding: `${s}px` }),
+								children: [s, "px"]
+							}, s))
+						})
 					}) })] }),
 					/* @__PURE__ */ jsxs(Sub2$1, { children: [/* @__PURE__ */ jsxs(SubTrigger2$1, {
 						className: "ContextMenuSubTrigger",
-						children: ["Alinhamento", /* @__PURE__ */ jsx("div", {
+						children: ["Borda", /* @__PURE__ */ jsx("div", {
 							className: "RightSlot",
 							children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
 						})]
-					}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsxs(SubContent2$1, {
-						className: "ContextMenuSubContent",
-						children: [
-							/* @__PURE__ */ jsx(Item2$1, {
-								className: "ContextMenuItem",
-								onSelect: () => kO({ textAlign: "left" }),
-								children: "Esquerda"
-							}),
-							/* @__PURE__ */ jsx(Item2$1, {
-								className: "ContextMenuItem",
-								onSelect: () => kO({ textAlign: "center" }),
-								children: "Centro"
-							}),
-							/* @__PURE__ */ jsx(Item2$1, {
-								className: "ContextMenuItem",
-								onSelect: () => kO({ textAlign: "right" }),
-								children: "Direita"
-							})
-						]
+					}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsx(R, {
+						appearance: V.theme,
+						style: { display: "contents" },
+						children: /* @__PURE__ */ jsxs(SubContent2$1, {
+							className: "ContextMenuSubContent",
+							children: [/* @__PURE__ */ jsxs(Sub2$1, { children: [/* @__PURE__ */ jsxs(SubTrigger2$1, {
+								className: "ContextMenuSubTrigger",
+								children: ["Cor da Borda", /* @__PURE__ */ jsx("div", {
+									className: "RightSlot",
+									children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+								})]
+							}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsx(R, {
+								appearance: V.theme,
+								style: { display: "contents" },
+								children: /* @__PURE__ */ jsxs(SubContent2$1, {
+									className: "ContextMenuSubContent",
+									children: [IO.filter((s) => s !== "transparent").map((s) => /* @__PURE__ */ jsxs(Item2$1, {
+										className: "ContextMenuItem",
+										onSelect: () => kO({
+											borderColor: s,
+											borderStyle: "solid"
+										}),
+										children: [/* @__PURE__ */ jsx("div", { style: {
+											width: 12,
+											height: 12,
+											backgroundColor: s,
+											marginRight: 8,
+											border: "1px solid #ccc"
+										} }), s]
+									}, s)), /* @__PURE__ */ jsx(Item2$1, {
+										className: "ContextMenuItem",
+										onSelect: () => kO({ borderStyle: "none" }),
+										children: "Sem Borda"
+									})]
+								})
+							}) })] }), /* @__PURE__ */ jsxs(Sub2$1, { children: [/* @__PURE__ */ jsxs(SubTrigger2$1, {
+								className: "ContextMenuSubTrigger",
+								children: ["Espessura", /* @__PURE__ */ jsx("div", {
+									className: "RightSlot",
+									children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+								})]
+							}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsx(R, {
+								appearance: V.theme,
+								style: { display: "contents" },
+								children: /* @__PURE__ */ jsx(SubContent2$1, {
+									className: "ContextMenuSubContent",
+									children: [
+										1,
+										2,
+										4,
+										8
+									].map((s) => /* @__PURE__ */ jsxs(Item2$1, {
+										className: "ContextMenuItem",
+										onSelect: () => kO({
+											borderWidth: `${s}px`,
+											borderStyle: "solid"
+										}),
+										children: [s, "px"]
+									}, s))
+								})
+							}) })] })]
+						})
 					}) })] })
-				] }),
-				/* @__PURE__ */ jsxs(Sub2$1, { children: [/* @__PURE__ */ jsxs(SubTrigger2$1, {
-					className: "ContextMenuSubTrigger",
-					children: ["Cor de Fundo", /* @__PURE__ */ jsx("div", {
-						className: "RightSlot",
-						children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
-					})]
-				}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsx(SubContent2$1, {
-					className: "ContextMenuSubContent",
-					children: IO.map((s) => /* @__PURE__ */ jsxs(Item2$1, {
-						className: "ContextMenuItem",
-						onSelect: () => kO({ backgroundColor: s }),
-						children: [/* @__PURE__ */ jsx("div", { style: {
-							width: 12,
-							height: 12,
-							backgroundColor: s,
-							marginRight: 8,
-							border: "1px solid #ccc"
-						} }), s === "transparent" ? "Transparente" : s]
-					}, s))
-				}) })] }),
-				/* @__PURE__ */ jsxs(Sub2$1, { children: [/* @__PURE__ */ jsxs(SubTrigger2$1, {
-					className: "ContextMenuSubTrigger",
-					children: ["Arredondamento", /* @__PURE__ */ jsx("div", {
-						className: "RightSlot",
-						children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
-					})]
-				}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsx(SubContent2$1, {
-					className: "ContextMenuSubContent",
-					children: [
-						0,
-						4,
-						8,
-						12,
-						16,
-						24,
-						"50%"
-					].map((s) => /* @__PURE__ */ jsx(Item2$1, {
-						className: "ContextMenuItem",
-						onSelect: () => kO({ borderRadius: typeof s == "number" ? `${s}px` : s }),
-						children: s === "50%" ? "Círculo" : `${s}px`
-					}, s))
-				}) })] }),
-				/* @__PURE__ */ jsxs(Sub2$1, { children: [/* @__PURE__ */ jsxs(SubTrigger2$1, {
-					className: "ContextMenuSubTrigger",
-					children: ["Espaçamento", /* @__PURE__ */ jsx("div", {
-						className: "RightSlot",
-						children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
-					})]
-				}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsx(SubContent2$1, {
-					className: "ContextMenuSubContent",
-					children: [
-						0,
-						4,
-						8,
-						12,
-						16,
-						24,
-						32
-					].map((s) => /* @__PURE__ */ jsxs(Item2$1, {
-						className: "ContextMenuItem",
-						onSelect: () => kO({ padding: `${s}px` }),
-						children: [s, "px"]
-					}, s))
-				}) })] }),
-				/* @__PURE__ */ jsxs(Sub2$1, { children: [/* @__PURE__ */ jsxs(SubTrigger2$1, {
-					className: "ContextMenuSubTrigger",
-					children: ["Borda", /* @__PURE__ */ jsx("div", {
-						className: "RightSlot",
-						children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
-					})]
-				}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsxs(SubContent2$1, {
-					className: "ContextMenuSubContent",
-					children: [/* @__PURE__ */ jsxs(Sub2$1, { children: [/* @__PURE__ */ jsxs(SubTrigger2$1, {
-						className: "ContextMenuSubTrigger",
-						children: ["Cor da Borda", /* @__PURE__ */ jsx("div", {
-							className: "RightSlot",
-							children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
-						})]
-					}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsxs(SubContent2$1, {
-						className: "ContextMenuSubContent",
-						children: [IO.filter((s) => s !== "transparent").map((s) => /* @__PURE__ */ jsxs(Item2$1, {
-							className: "ContextMenuItem",
-							onSelect: () => kO({
-								borderColor: s,
-								borderStyle: "solid"
-							}),
-							children: [/* @__PURE__ */ jsx("div", { style: {
-								width: 12,
-								height: 12,
-								backgroundColor: s,
-								marginRight: 8,
-								border: "1px solid #ccc"
-							} }), s]
-						}, s)), /* @__PURE__ */ jsx(Item2$1, {
-							className: "ContextMenuItem",
-							onSelect: () => kO({ borderStyle: "none" }),
-							children: "Sem Borda"
-						})]
-					}) })] }), /* @__PURE__ */ jsxs(Sub2$1, { children: [/* @__PURE__ */ jsxs(SubTrigger2$1, {
-						className: "ContextMenuSubTrigger",
-						children: ["Espessura", /* @__PURE__ */ jsx("div", {
-							className: "RightSlot",
-							children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
-						})]
-					}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsx(SubContent2$1, {
-						className: "ContextMenuSubContent",
-						children: [
-							1,
-							2,
-							4,
-							8
-						].map((s) => /* @__PURE__ */ jsxs(Item2$1, {
-							className: "ContextMenuItem",
-							onSelect: () => kO({
-								borderWidth: `${s}px`,
-								borderStyle: "solid"
-							}),
-							children: [s, "px"]
-						}, s))
-					}) })] })]
-				}) })] })
-			]
+				]
+			})
 		}) })] })
 	] });
 };
@@ -13394,7 +13464,7 @@ const Preview = () => {
 			height: "100%",
 			position: "relative",
 			overflow: "hidden",
-			backgroundColor: "white"
+			backgroundColor: "var(--color-panel-solid)"
 		},
 		children: /* @__PURE__ */ jsx(c, {
 			type: "auto",
@@ -13456,35 +13526,37 @@ const Preview = () => {
 		})
 	});
 };
-var EditorContent = ({ layout: s, initialState: C, onSave: w }) => {
-	let [k, F] = useState(!0), [L, V] = useState(!0), { addElement: U, loadState: K, state: q } = useEditor();
+var EditorContent = ({ layout: s, initialState: C, onSave: w, theme: k = "light" }) => {
+	let [F, L] = useState(!0), [V, U] = useState(!0), { addElement: K, loadState: q, state: J } = useEditor();
 	React.useEffect(() => {
 		if (C) try {
 			let s = typeof C == "string" ? JSON.parse(C) : C;
-			Array.isArray(s) ? K({ elements: s }) : s.elements && K(s);
+			Array.isArray(s) ? q({ elements: s }) : s.elements && q(s);
 		} catch (s) {
 			console.error("Failed to load initial state", s);
 		}
-	}, [C, K]);
-	let J = (s) => {
-		console.log(`Adding element of type: ${s}`), U({
+	}, [C, q]);
+	let X = (s) => {
+		console.log(`Adding element of type: ${s}`), K({
 			type: s,
 			content: `New ${s}`
 		});
 	};
 	return /* @__PURE__ */ jsx(R, {
-		appearance: "light",
+		appearance: k,
 		accentColor: "blue",
 		grayColor: "slate",
 		radius: "medium",
 		scaling: "100%",
 		children: /* @__PURE__ */ jsxs(p, {
+			direction: "row",
 			style: {
-				height: "100%",
+				height: "100vh",
 				width: "100%",
-				overflow: "hidden"
+				overflow: "hidden",
+				backgroundColor: "var(--color-background)"
 			},
-			children: [L && /* @__PURE__ */ jsxs(p, {
+			children: [V && /* @__PURE__ */ jsxs(p, {
 				direction: "column",
 				width: "280px",
 				style: {
@@ -13521,15 +13593,15 @@ var EditorContent = ({ layout: s, initialState: C, onSave: w }) => {
 							style: { width: "240px" },
 							children: [
 								/* @__PURE__ */ jsx(v$1, {
-									onSelect: () => J("text"),
+									onSelect: () => X("text"),
 									children: "Texto"
 								}),
 								/* @__PURE__ */ jsx(v$1, {
-									onSelect: () => J("image"),
+									onSelect: () => X("image"),
 									children: "Imagem"
 								}),
 								/* @__PURE__ */ jsx(v$1, {
-									onSelect: () => J("box"),
+									onSelect: () => X("box"),
 									children: "Caixa (Container)"
 								})
 							]
@@ -13606,13 +13678,16 @@ var EditorContent = ({ layout: s, initialState: C, onSave: w }) => {
 									marginBottom: "12px"
 								},
 								onClick: () => {
-									w ? w(JSON.stringify({
-										elements: q.elements,
-										listSettings: q.listSettings,
-										mockData: q.mockData,
-										singleMockData: q.singleMockData,
-										isList: q.isList
-									}, null, 2)) : console.log("Salvar acionado, mas nenhum callback onSave foi fornecido.");
+									if (w) {
+										let s = {
+											elements: J.elements,
+											isList: J.isList,
+											mockData: J.mockData,
+											singleMockData: J.singleMockData,
+											listSettings: J.listSettings
+										};
+										w(JSON.stringify(s, null, 2));
+									}
 								},
 								children: [/* @__PURE__ */ jsx(Share1Icon, {}), " Salvar Alterações"]
 							})
@@ -13637,9 +13712,9 @@ var EditorContent = ({ layout: s, initialState: C, onSave: w }) => {
 							size: "2",
 							variant: "soft",
 							color: "gray",
-							onClick: () => V(!L),
-							title: L ? "Ocultar Barra Lateral" : "Mostrar Barra Lateral",
-							children: jsx(L ? DoubleArrowLeftIcon : DoubleArrowRightIcon, {})
+							onClick: () => U(!V),
+							title: V ? "Ocultar Barra Lateral" : "Mostrar Barra Lateral",
+							children: jsx(V ? DoubleArrowLeftIcon : DoubleArrowRightIcon, {})
 						})
 					}),
 					/* @__PURE__ */ jsx(p, {
@@ -13653,10 +13728,10 @@ var EditorContent = ({ layout: s, initialState: C, onSave: w }) => {
 						children: /* @__PURE__ */ jsx(o$1, {
 							size: "2",
 							variant: "soft",
-							color: k ? "blue" : "gray",
-							onClick: () => F(!k),
-							title: k ? "Ocultar Preview" : "Mostrar Preview",
-							children: jsx(k ? EyeOpenIcon : EyeNoneIcon, {})
+							color: F ? "blue" : "gray",
+							onClick: () => L(!F),
+							title: F ? "Ocultar Preview" : "Mostrar Preview",
+							children: jsx(F ? EyeOpenIcon : EyeNoneIcon, {})
 						})
 					}),
 					/* @__PURE__ */ jsxs(Rt, {
@@ -13678,13 +13753,13 @@ var EditorContent = ({ layout: s, initialState: C, onSave: w }) => {
 									children: /* @__PURE__ */ jsx(Canvas, {})
 								})
 							}),
-							k && /* @__PURE__ */ jsx(Ot, { style: {
+							F && /* @__PURE__ */ jsx(Ot, { style: {
 								width: "4px",
 								backgroundColor: "var(--gray-6)",
 								cursor: "col-resize",
 								transition: "background-color 0.2s"
 							} }),
-							k && /* @__PURE__ */ jsx(kt, {
+							F && /* @__PURE__ */ jsx(kt, {
 								defaultSize: 50,
 								minSize: 20,
 								children: /* @__PURE__ */ jsx(p$1, {
@@ -13707,6 +13782,7 @@ var EditorContent = ({ layout: s, initialState: C, onSave: w }) => {
 const GenericEditor = (s) => /* @__PURE__ */ jsx(EditorProvider, {
 	isList: s.layout.isList,
 	availableProps: s.layout.props,
+	theme: s.theme,
 	children: /* @__PURE__ */ jsx(EditorContent, { ...s })
 }), generateHTML = (s, d, C = {}) => Function("elements", "data", "options", getRendererCode() + "\nreturn renderTemplate(elements, data, options);")(s, d, C), 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' } }\n * @returns {string} - The generated HTML string\n */\nfunction renderTemplate(elements, data, options = {}) {\n    const { isList, listSettings } = 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            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 maxY = Math.max(...elements.map(el => el.y + el.height));\n        const itemHeight = maxY; // Add some padding if needed, or rely on element positioning\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        // Generate HTML for all items\n        const itemsHtml = listData.map((item, index) => {\n             // We render each item inside a relative container to maintain local positioning\n             // But for the scroll animation, we usually stack them.\n             // Let's stack them vertically.\n             \n             const itemHtml = renderItem(item, index, 0); // Internal offset is 0, we move the container\n             const itemContainerStyle = styleObjectToString({\n                 position: 'relative',\n                 height: itemHeight,\n                 width: '100%',\n                 marginBottom: 20 // Spacing between items\n             });\n             \n             return `<div class=\"list-item\" style=\"${itemContainerStyle}\">${itemHtml}</div>`;\n        }).join('\\n');\n\n        // Animation Styles\n        // Bottom-anchored list (chat style)\n        const animationCss = `\n            @keyframes slideIn {\n                from { opacity: 0; transform: translateY(50px); }\n                to { opacity: 1; transform: translateY(0); }\n            }\n            .list-wrapper {\n                display: flex;\n                flex-direction: column;\n                justify-content: flex-end;\n                height: 100%;\n                width: 100%;\n                overflow: hidden;\n                padding-bottom: 20px;\n                box-sizing: border-box;\n            }\n            .list-item {\n                flex-shrink: 0;\n                animation: slideIn 0.5s ease-out;\n                margin-top: 20px;\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";
 export { GenericEditor as EditorContent, generateHTML };