react-edit-to-html 1.3.11 → 1.3.12

package/dist/index.js

@@ -16946,7 +16946,33 @@ var gb = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAw
 			minHeight: "auto"
 		}
 	};
-}, Cb = (e) => {
+}, Cb = (e, t) => {
+	let n = [], r = [];
+	if (e.querySelector("thead")) r = Array.from(e.querySelectorAll("tbody tr"));
+	else {
+		let t = Array.from(e.querySelectorAll("tr"));
+		t.length > 1 && (r = t.slice(1));
+	}
+	return r.forEach((e) => {
+		let r = {}, i = Array.from(e.querySelectorAll("td")), a = 0;
+		i.forEach((e) => {
+			let n = t[a];
+			if (n) {
+				var i;
+				r[n.columnName] = e.innerHTML.trim() || ((i = e.textContent) == null ? void 0 : i.trim()) || "";
+				let t = e.getAttribute("colspan");
+				if (t) {
+					let e = parseInt(t, 10);
+					if (!isNaN(e) && e > 1) {
+						r[`${n.columnName}_colspan`] = e, a += e;
+						return;
+					}
+				}
+			}
+			a += 1;
+		}), Object.keys(r).length > 0 && n.push(r);
+	}), n.length > 0 ? n : [{}];
+}, wb = (e) => {
 	let t = new DOMParser().parseFromString(e, "text/html"), n = [], r = Array.from(t.body.children), i = t.querySelector(".paper-sheet");
 	if (i && i.children.length > 0 && (r = Array.from(i.children)), r.length === 0) {
 		let e = t.body.innerText || t.body.textContent || "";
@@ -17000,21 +17026,24 @@ var gb = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAw
 						let t = e.tagName.toLowerCase(), n = a(e);
 						if (t === "table") {
 							let t = Array.from(e.querySelectorAll("thead th"));
-							t.length === 0 && (t = Array.from(e.querySelectorAll("tr:first-child th, tr:first-child td"))), o.push({
+							t.length === 0 && (t = Array.from(e.querySelectorAll("tr:first-child th, tr:first-child td")));
+							let r = t.map((e) => {
+								var t, n;
+								return {
+									columnName: ((t = e.textContent) == null ? void 0 : t.trim()) || "Header",
+									placeholder: `{{item.${((n = e.textContent) == null ? void 0 : n.trim().toLowerCase().replace(/\s+/g, "_")) || "field"}}}`,
+									enabled: !0
+								};
+							}), i = Cb(e, r);
+							o.push({
 								id: `block-${Math.random().toString(36).substr(2, 9)}`,
 								type: "table",
 								content: "",
 								style: n,
 								tableInfo: {
 									tableName: "imported_table",
-									columns: t.map((e) => {
-										var t, n;
-										return {
-											columnName: ((t = e.textContent) == null ? void 0 : t.trim()) || "Header",
-											placeholder: `{{item.${((n = e.textContent) == null ? void 0 : n.trim().toLowerCase().replace(/\s+/g, "_")) || "field"}}}`,
-											enabled: !0
-										};
-									}),
+									columns: r,
+									mockRows: i,
 									loop: !0,
 									isNestable: !1,
 									parentPath: "items",
@@ -17092,7 +17121,7 @@ var gb = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAw
 						placeholder: `{{item.${((n = e.textContent) == null ? void 0 : n.trim().toLowerCase().replace(/\s+/g, "_")) || "field"}}}`,
 						enabled: !0
 					};
-				});
+				}), r = Cb(i, t);
 				n.push({
 					id: `block-${Math.random().toString(36).substr(2, 9)}`,
 					type: "table",
@@ -17101,6 +17130,7 @@ var gb = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAw
 					tableInfo: {
 						tableName: "imported_table",
 						columns: t,
+						mockRows: r,
 						loop: !0,
 						isNestable: !1,
 						parentPath: "items",
@@ -17149,7 +17179,7 @@ var gb = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAw
 		});
 	}
 	return n;
-}, wb = function() {
+}, Tb = function() {
 	var e = b(function* (e, t) {
 		let n = yield t.getDocument({ data: new Uint8Array(e) }).promise, r = [], i = Math.min(n.numPages, 3);
 		for (let e = 1; e <= i; e++) {
@@ -17214,7 +17244,7 @@ var gb = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAw
 }();
 //#endregion
 //#region src/hooks/useCanvasBlocks.ts
-function Tb({ initialBlocks: e, defaultStyles: t, defaultLogo: n, defaultBanner: r, onChange: i } = {}) {
+function Eb({ initialBlocks: e, defaultStyles: t, defaultLogo: n, defaultBanner: r, onChange: i } = {}) {
 	let [o, c] = s(e || []), [l, u] = s(null);
 	a(() => {
 		i && i(o);
@@ -17622,7 +17652,7 @@ function Tb({ initialBlocks: e, defaultStyles: t, defaultLogo: n, defaultBanner:
 }
 //#endregion
 //#region src/hooks/useZoomPan.ts
-function Eb() {
+function Db() {
 	let [e, t] = s(.7), [n, r] = s({
 		x: 0,
 		y: 0
@@ -17708,7 +17738,7 @@ function Eb() {
 }
 //#endregion
 //#region src/hooks/useSidebarState.ts
-function Db({ tableSchemas: e } = {}) {
+function Ob({ tableSchemas: e } = {}) {
 	let [t, n] = s("invoice_items"), [r, i] = s("{% for item in invoice.items %}"), [o, c] = s("{% endfor %}"), [l, u] = s(""), [d, f] = s(""), [p, m] = s(null), [h, g] = s([]), [_, v] = s(!1), [y, b] = s(""), [x, S] = s(null), [C, w] = s(""), [T, E] = s(null), [ee, O] = s(null), [k, te] = s(""), [A, ne] = s([]), re = (e) => ({
 		columnName: e.columnName || e.columnNameEn || e.columnNameDe || "",
 		placeholder: e.placeholder || "",
@@ -17806,10 +17836,10 @@ function Db({ tableSchemas: e } = {}) {
 }
 //#endregion
 //#region node_modules/lucide-react/dist/esm/shared/src/utils/mergeClasses.mjs
-var Ob = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) === t).join(" ").trim(), kb = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), Ab = (e) => e.replace(/^([A-Z])|[\s-_]+(\w)/g, (e, t, n) => n ? n.toUpperCase() : t.toLowerCase()), jb = (e) => {
-	let t = Ab(e);
+var kb = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) === t).join(" ").trim(), Ab = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), jb = (e) => e.replace(/^([A-Z])|[\s-_]+(\w)/g, (e, t, n) => n ? n.toUpperCase() : t.toLowerCase()), Mb = (e) => {
+	let t = jb(e);
 	return t.charAt(0).toUpperCase() + t.slice(1);
-}, Mb = {
+}, Nb = {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
 	height: 24,
@@ -17819,13 +17849,13 @@ var Ob = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e)
 	strokeWidth: 2,
 	strokeLinecap: "round",
 	strokeLinejoin: "round"
-}, Nb = (e) => {
+}, Pb = (e) => {
 	for (let t in e) if (t.startsWith("aria-") || t === "role" || t === "title") return !0;
 	return !1;
-}, Pb = t({}), Fb = () => i(Pb);
+}, Fb = t({}), Ib = () => i(Fb);
 //#endregion
 //#region \0@oxc-project+runtime@0.139.0/helpers/esm/objectWithoutPropertiesLoose.js
-function Ib(e, t) {
+function Lb(e, t) {
 	if (e == null) return {};
 	var n = {};
 	for (var r in e) if ({}.hasOwnProperty.call(e, r)) {
@@ -17836,9 +17866,9 @@ function Ib(e, t) {
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.139.0/helpers/esm/objectWithoutProperties.js
-function Lb(e, t) {
+function Rb(e, t) {
 	if (e == null) return {};
-	var n, r, i = Ib(e, t);
+	var n, r, i = Lb(e, t);
 	if (Object.getOwnPropertySymbols) {
 		var a = Object.getOwnPropertySymbols(e);
 		for (r = 0; r < a.length; r++) n = a[r], t.includes(n) || {}.propertyIsEnumerable.call(e, n) && (i[n] = e[n]);
@@ -17847,7 +17877,7 @@ function Lb(e, t) {
 }
 //#endregion
 //#region node_modules/lucide-react/dist/esm/Icon.mjs
-var Rb = [
+var zb = [
 	"color",
 	"size",
 	"strokeWidth",
@@ -17855,39 +17885,39 @@ var Rb = [
 	"className",
 	"children",
 	"iconNode"
-], zb = r((e, t) => {
+], Bb = r((e, t) => {
 	var r, i, a;
-	let { color: o, size: s, strokeWidth: c, absoluteStrokeWidth: l, className: u = "", children: d, iconNode: f } = e, p = Lb(e, Rb), { size: m = 24, strokeWidth: h = 2, absoluteStrokeWidth: g = !1, color: _ = "currentColor", className: v = "" } = (r = Fb()) == null ? {} : r, y = (l == null ? g : l) ? Number(c == null ? h : c) * 24 / Number(s == null ? m : s) : c == null ? h : c;
-	return n("svg", D(D(D({ ref: t }, Mb), {}, {
-		width: (i = s == null ? m : s) == null ? Mb.width : i,
-		height: (a = s == null ? m : s) == null ? Mb.height : a,
+	let { color: o, size: s, strokeWidth: c, absoluteStrokeWidth: l, className: u = "", children: d, iconNode: f } = e, p = Rb(e, zb), { size: m = 24, strokeWidth: h = 2, absoluteStrokeWidth: g = !1, color: _ = "currentColor", className: v = "" } = (r = Ib()) == null ? {} : r, y = (l == null ? g : l) ? Number(c == null ? h : c) * 24 / Number(s == null ? m : s) : c == null ? h : c;
+	return n("svg", D(D(D({ ref: t }, Nb), {}, {
+		width: (i = s == null ? m : s) == null ? Nb.width : i,
+		height: (a = s == null ? m : s) == null ? Nb.height : a,
 		stroke: o == null ? _ : o,
 		strokeWidth: y,
-		className: Ob("lucide", v, u)
-	}, !d && !Nb(p) && { "aria-hidden": "true" }), p), [...f.map(([e, t]) => n(e, t)), ...Array.isArray(d) ? d : [d]]);
-}), Bb = ["className"], $ = (e, t) => {
+		className: kb("lucide", v, u)
+	}, !d && !Pb(p) && { "aria-hidden": "true" }), p), [...f.map(([e, t]) => n(e, t)), ...Array.isArray(d) ? d : [d]]);
+}), Vb = ["className"], $ = (e, t) => {
 	let i = r((r, i) => {
-		let { className: a } = r, o = Lb(r, Bb);
-		return n(zb, D({
+		let { className: a } = r, o = Rb(r, Vb);
+		return n(Bb, D({
 			ref: i,
 			iconNode: t,
-			className: Ob(`lucide-${kb(jb(e))}`, `lucide-${e}`, a)
+			className: kb(`lucide-${Ab(Mb(e))}`, `lucide-${e}`, a)
 		}, o));
 	});
-	return i.displayName = jb(e), i;
-}, Vb = $("arrow-down", [["path", {
+	return i.displayName = Mb(e), i;
+}, Hb = $("arrow-down", [["path", {
 	d: "M12 5v14",
 	key: "s699le"
 }], ["path", {
 	d: "m19 12-7 7-7-7",
 	key: "1idqje"
-}]]), Hb = $("arrow-up", [["path", {
+}]]), Ub = $("arrow-up", [["path", {
 	d: "m5 12 7-7 7 7",
 	key: "hav0vg"
 }], ["path", {
 	d: "M12 19V5",
 	key: "x0mq9r"
-}]]), Ub = $("barcode", [
+}]]), Wb = $("barcode", [
 	["path", {
 		d: "M3 5v14",
 		key: "1nt18q"
@@ -17908,10 +17938,10 @@ var Rb = [
 		d: "M21 5v14",
 		key: "nzette"
 	}]
-]), Wb = $("check", [["path", {
+]), Gb = $("check", [["path", {
 	d: "M20 6 9 17l-5-5",
 	key: "1gmf2c"
-}]]), Gb = $("columns-2", [["rect", {
+}]]), Kb = $("columns-2", [["rect", {
 	width: "18",
 	height: "18",
 	x: "3",
@@ -17921,7 +17951,7 @@ var Rb = [
 }], ["path", {
 	d: "M12 3v18",
 	key: "108xh3"
-}]]), Kb = $("columns-4", [
+}]]), qb = $("columns-4", [
 	["rect", {
 		width: "18",
 		height: "18",
@@ -17942,7 +17972,7 @@ var Rb = [
 		d: "M16.5 3v18",
 		key: "10tjh1"
 	}]
-]), qb = $("columns-3", [
+]), Jb = $("columns-3", [
 	["rect", {
 		width: "18",
 		height: "18",
@@ -17959,7 +17989,7 @@ var Rb = [
 		d: "M15 3v18",
 		key: "14nvp0"
 	}]
-]), Jb = $("copy", [["rect", {
+]), Yb = $("copy", [["rect", {
 	width: "14",
 	height: "14",
 	x: "8",
@@ -17970,7 +18000,7 @@ var Rb = [
 }], ["path", {
 	d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2",
 	key: "zix9uf"
-}]]), Yb = $("download", [
+}]]), Xb = $("download", [
 	["path", {
 		d: "M12 15V3",
 		key: "m9g1x1"
@@ -17983,7 +18013,7 @@ var Rb = [
 		d: "m7 10 5 5 5-5",
 		key: "brsn70"
 	}]
-]), Xb = $("eye", [["path", {
+]), Zb = $("eye", [["path", {
 	d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0",
 	key: "1nclc0"
 }], ["circle", {
@@ -17991,7 +18021,7 @@ var Rb = [
 	cy: "12",
 	r: "3",
 	key: "1v7zrd"
-}]]), Zb = $("file-text", [
+}]]), Qb = $("file-text", [
 	["path", {
 		d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
 		key: "1oefj6"
@@ -18012,7 +18042,7 @@ var Rb = [
 		d: "M16 17H8",
 		key: "z1uh3a"
 	}]
-]), Qb = $("image", [
+]), $b = $("image", [
 	["rect", {
 		width: "18",
 		height: "18",
@@ -18032,7 +18062,7 @@ var Rb = [
 		d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21",
 		key: "1xmnt7"
 	}]
-]), $b = $("layout-grid", [
+]), ex = $("layout-grid", [
 	["rect", {
 		width: "7",
 		height: "7",
@@ -18065,7 +18095,7 @@ var Rb = [
 		rx: "1",
 		key: "1bb6yr"
 	}]
-]), ex = $("merge", [
+]), tx = $("merge", [
 	["path", {
 		d: "m8 6 4-4 4 4",
 		key: "ybng9g"
@@ -18078,19 +18108,19 @@ var Rb = [
 		d: "m20 22-5-5",
 		key: "1m27yz"
 	}]
-]), tx = $("pencil", [["path", {
+]), nx = $("pencil", [["path", {
 	d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
 	key: "1a8usu"
 }], ["path", {
 	d: "m15 5 4 4",
 	key: "1mk7zo"
-}]]), nx = $("plus", [["path", {
+}]]), rx = $("plus", [["path", {
 	d: "M5 12h14",
 	key: "1ays0h"
 }], ["path", {
 	d: "M12 5v14",
 	key: "s699le"
-}]]), rx = $("printer", [
+}]]), ix = $("printer", [
 	["path", {
 		d: "M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2",
 		key: "143wyd"
@@ -18107,7 +18137,7 @@ var Rb = [
 		rx: "1",
 		key: "1ue0tg"
 	}]
-]), ix = $("search", [["path", {
+]), ax = $("search", [["path", {
 	d: "m21 21-4.34-4.34",
 	key: "14j7rj"
 }], ["circle", {
@@ -18115,7 +18145,7 @@ var Rb = [
 	cy: "11",
 	r: "8",
 	key: "4ej97u"
-}]]), ax = $("sliders-vertical", [
+}]]), ox = $("sliders-vertical", [
 	["path", {
 		d: "M10 8h4",
 		key: "1sr2af"
@@ -18152,7 +18182,7 @@ var Rb = [
 		d: "M5 21v-7",
 		key: "1w1uti"
 	}]
-]), ox = $("sparkles", [
+]), sx = $("sparkles", [
 	["path", {
 		d: "M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z",
 		key: "1s2grr"
@@ -18171,20 +18201,20 @@ var Rb = [
 		r: "2",
 		key: "6kqj1y"
 	}]
-]), sx = $("square-check-big", [["path", {
+]), cx = $("square-check-big", [["path", {
 	d: "M21 10.656V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h12.344",
 	key: "2acyp4"
 }], ["path", {
 	d: "m9 11 3 3L22 4",
 	key: "1pflzl"
-}]]), cx = $("square", [["rect", {
+}]]), lx = $("square", [["rect", {
 	width: "18",
 	height: "18",
 	x: "3",
 	y: "3",
 	rx: "2",
 	key: "afitv7"
-}]]), lx = $("table", [
+}]]), ux = $("table", [
 	["path", {
 		d: "M12 3v18",
 		key: "108xh3"
@@ -18205,7 +18235,7 @@ var Rb = [
 		d: "M3 15h18",
 		key: "5xshup"
 	}]
-]), ux = $("text-align-center", [
+]), dx = $("text-align-center", [
 	["path", {
 		d: "M21 5H3",
 		key: "1fi0y6"
@@ -18218,7 +18248,7 @@ var Rb = [
 		d: "M19 19H5",
 		key: "vjpgq2"
 	}]
-]), dx = $("text-align-end", [
+]), fx = $("text-align-end", [
 	["path", {
 		d: "M21 5H3",
 		key: "1fi0y6"
@@ -18231,7 +18261,7 @@ var Rb = [
 		d: "M21 19H7",
 		key: "4cu937"
 	}]
-]), fx = $("text-align-justify", [
+]), px = $("text-align-justify", [
 	["path", {
 		d: "M3 5h18",
 		key: "1u36vt"
@@ -18244,7 +18274,7 @@ var Rb = [
 		d: "M3 19h18",
 		key: "awlh7x"
 	}]
-]), px = $("text-align-start", [
+]), mx = $("text-align-start", [
 	["path", {
 		d: "M21 5H3",
 		key: "1fi0y6"
@@ -18257,7 +18287,7 @@ var Rb = [
 		d: "M17 19H3",
 		key: "z6ezky"
 	}]
-]), mx = $("trash-2", [
+]), hx = $("trash-2", [
 	["path", {
 		d: "M10 11v6",
 		key: "nco0om"
@@ -18278,7 +18308,7 @@ var Rb = [
 		d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2",
 		key: "e791ji"
 	}]
-]), hx = $("type", [
+]), gx = $("type", [
 	["path", {
 		d: "M12 4v16",
 		key: "1654pz"
@@ -18291,7 +18321,7 @@ var Rb = [
 		d: "M9 20h6",
 		key: "s66wpe"
 	}]
-]), gx = $("upload", [
+]), _x = $("upload", [
 	["path", {
 		d: "M12 3v12",
 		key: "1x0j5s"
@@ -18304,7 +18334,7 @@ var Rb = [
 		d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4",
 		key: "ih7n3h"
 	}]
-]), _x = $("x", [["path", {
+]), vx = $("x", [["path", {
 	d: "M18 6 6 18",
 	key: "1bl5f8"
 }], ["path", {
@@ -18313,7 +18343,7 @@ var Rb = [
 }]]);
 //#endregion
 //#region src/components/WorkspaceHeader.tsx
-function vx({ headerLogo: e, headerTitle: t, headerSubtitle: n, parseError: r, isParsing: i, parseStatusText: a, themeColor: o = "#ea580c" }) {
+function yx({ headerLogo: e, headerTitle: t, headerSubtitle: n, parseError: r, isParsing: i, parseStatusText: a, themeColor: o = "#ea580c" }) {
 	return /* @__PURE__ */ d("header", {
 		className: "bg-white border-b border-gray-200 px-6 py-3.5 flex items-center justify-between sticky top-0 z-10 shadow-xs gap-4",
 		children: [/* @__PURE__ */ d("div", {
@@ -18321,7 +18351,7 @@ function vx({ headerLogo: e, headerTitle: t, headerSubtitle: n, parseError: r, i
 			children: [e || /* @__PURE__ */ u("div", {
 				style: { backgroundColor: o },
 				className: "h-9 w-9 rounded-xl flex items-center justify-center text-white shadow-md",
-				children: /* @__PURE__ */ u(ox, { className: "h-5 w-5" })
+				children: /* @__PURE__ */ u(sx, { className: "h-5 w-5" })
 			}), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("h1", {
 				className: "text-lg font-bold tracking-tight text-slate-800",
 				children: t
@@ -18348,7 +18378,7 @@ function vx({ headerLogo: e, headerTitle: t, headerSubtitle: n, parseError: r, i
 }
 //#endregion
 //#region src/components/sidebar/TextTab.tsx
-function yx({ handleSidebarDragStart: e, createTextBlock: t, setBlocks: n, setSelectedBlockId: r, setActiveTab: i, defaultStyles: a }) {
+function bx({ handleSidebarDragStart: e, createTextBlock: t, setBlocks: n, setSelectedBlockId: r, setActiveTab: i, defaultStyles: a }) {
 	return /* @__PURE__ */ d("div", {
 		className: "space-y-5",
 		children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("h3", {
@@ -18423,13 +18453,13 @@ function yx({ handleSidebarDragStart: e, createTextBlock: t, setBlocks: n, setSe
 }
 //#endregion
 //#region src/components/sidebar/LayoutsTab.tsx
-function bx({ handleSidebarDragStart: e, createLayoutBlock: t, setBlocks: n, setSelectedBlockId: r, setActiveTab: i, themeColor: a = "#ea580c" }) {
+function xx({ handleSidebarDragStart: e, createLayoutBlock: t, setBlocks: n, setSelectedBlockId: r, setActiveTab: i, themeColor: a = "#ea580c" }) {
 	let [o, c] = s(null), [l, f] = s(null);
 	return /* @__PURE__ */ d("div", {
 		className: "space-y-5",
 		children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("h3", {
 			className: "text-sm font-bold text-slate-800 flex items-center gap-1.5",
-			children: [/* @__PURE__ */ u($b, {
+			children: [/* @__PURE__ */ u(ex, {
 				className: "h-4 w-4",
 				style: { color: a }
 			}), /* @__PURE__ */ u("span", { children: "Multi-Column Layouts" })]
@@ -18443,7 +18473,7 @@ function bx({ handleSidebarDragStart: e, createLayoutBlock: t, setBlocks: n, set
 					columnsCount: 1,
 					title: "1 Column",
 					description: "Single column container layout (100%)",
-					icon: /* @__PURE__ */ u(cx, {
+					icon: /* @__PURE__ */ u(lx, {
 						className: "h-5 w-5",
 						style: { color: a }
 					}),
@@ -18454,7 +18484,7 @@ function bx({ handleSidebarDragStart: e, createLayoutBlock: t, setBlocks: n, set
 					columnsCount: 2,
 					title: "2 Columns",
 					description: "Side-by-side split layout (50% / 50%)",
-					icon: /* @__PURE__ */ u(Gb, {
+					icon: /* @__PURE__ */ u(Kb, {
 						className: "h-5 w-5",
 						style: { color: a }
 					}),
@@ -18465,7 +18495,7 @@ function bx({ handleSidebarDragStart: e, createLayoutBlock: t, setBlocks: n, set
 					columnsCount: 3,
 					title: "3 Columns",
 					description: "Triple column layout (33% / 33% / 33%)",
-					icon: /* @__PURE__ */ u(qb, {
+					icon: /* @__PURE__ */ u(Jb, {
 						className: "h-5 w-5",
 						style: { color: a }
 					}),
@@ -18476,7 +18506,7 @@ function bx({ handleSidebarDragStart: e, createLayoutBlock: t, setBlocks: n, set
 					columnsCount: 4,
 					title: "4 Columns",
 					description: "Quad column layout (25% / 25% / 25% / 25%)",
-					icon: /* @__PURE__ */ u(Kb, {
+					icon: /* @__PURE__ */ u(qb, {
 						className: "h-5 w-5",
 						style: { color: a }
 					}),
@@ -18547,7 +18577,7 @@ function bx({ handleSidebarDragStart: e, createLayoutBlock: t, setBlocks: n, set
 								color: "#ffffff"
 							},
 							className: "w-full py-1.5 rounded-lg text-[10px] font-bold transition-all flex items-center justify-center space-x-1 shadow-xs cursor-pointer active:scale-[0.99]",
-							children: [/* @__PURE__ */ u(nx, { className: "h-3 w-3" }), /* @__PURE__ */ d("span", { children: [
+							children: [/* @__PURE__ */ u(rx, { className: "h-3 w-3" }), /* @__PURE__ */ d("span", { children: [
 								"Add ",
 								s.title,
 								" to Editor"
@@ -18561,7 +18591,7 @@ function bx({ handleSidebarDragStart: e, createLayoutBlock: t, setBlocks: n, set
 }
 //#endregion
 //#region src/components/sidebar/TablesTab.tsx
-function xx({ schemas: e, toggleSchemaColumn: t, customTableName: n, setCustomTableName: r, customLoopStart: i, setCustomLoopStart: a, customLoopEnd: o, setCustomLoopEnd: s, handleAddCustomTable: c, handleSidebarDragStart: l, setBlocks: f, setSelectedBlockId: p, setActiveTab: m, defaultStyles: h, isTablesLoading: g, tablesLoading: _, themeColor: v = "#ea580c" }) {
+function Sx({ schemas: e, toggleSchemaColumn: t, customTableName: n, setCustomTableName: r, customLoopStart: i, setCustomLoopStart: a, customLoopEnd: o, setCustomLoopEnd: s, handleAddCustomTable: c, handleSidebarDragStart: l, setBlocks: f, setSelectedBlockId: p, setActiveTab: m, defaultStyles: h, isTablesLoading: g, tablesLoading: _, themeColor: v = "#ea580c" }) {
 	return g || _ ? /* @__PURE__ */ d("div", {
 		className: "space-y-6",
 		children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("h3", {
@@ -18609,7 +18639,7 @@ function xx({ schemas: e, toggleSchemaColumn: t, customTableName: n, setCustomTa
 							className: "flex items-center justify-between",
 							children: [/* @__PURE__ */ d("div", {
 								className: "flex items-center space-x-2",
-								children: [/* @__PURE__ */ u(lx, { className: "h-4 w-4 text-slate-650" }), /* @__PURE__ */ u("h4", {
+								children: [/* @__PURE__ */ u(ux, { className: "h-4 w-4 text-slate-650" }), /* @__PURE__ */ u("h4", {
 									className: "font-bold text-xs uppercase text-slate-700 tracking-wider",
 									children: e.tableName
 								})]
@@ -18626,7 +18656,7 @@ function xx({ schemas: e, toggleSchemaColumn: t, customTableName: n, setCustomTa
 								className: "flex items-center space-x-2",
 								children: [/* @__PURE__ */ u("div", {
 									className: "h-5 w-5 bg-slate-200 rounded flex items-center justify-center",
-									children: /* @__PURE__ */ u(nx, { className: "h-3 w-3 text-slate-600" })
+									children: /* @__PURE__ */ u(rx, { className: "h-3 w-3 text-slate-600" })
 								}), /* @__PURE__ */ u("span", {
 									className: "text-xs font-bold text-slate-700",
 									children: "Drag to Canvas"
@@ -18650,7 +18680,7 @@ function xx({ schemas: e, toggleSchemaColumn: t, customTableName: n, setCustomTa
 										children: [/* @__PURE__ */ d("button", {
 											onClick: () => t(n, r),
 											className: "flex items-center space-x-2 w-full text-left py-0.5 text-xs text-slate-600 hover:text-slate-800 transition-colors font-medium",
-											children: [e.enabled === !1 ? /* @__PURE__ */ u(cx, { className: "h-3.5 w-3.5 text-slate-300 flex-shrink-0" }) : /* @__PURE__ */ u(sx, { className: "h-3.5 w-3.5 text-slate-700 flex-shrink-0" }), /* @__PURE__ */ d("span", {
+											children: [e.enabled === !1 ? /* @__PURE__ */ u(lx, { className: "h-3.5 w-3.5 text-slate-300 flex-shrink-0" }) : /* @__PURE__ */ u(cx, { className: "h-3.5 w-3.5 text-slate-700 flex-shrink-0" }), /* @__PURE__ */ d("span", {
 												className: "truncate flex items-center gap-1",
 												children: [/* @__PURE__ */ u("span", { children: e.columnName }), i && /* @__PURE__ */ u("span", {
 													className: "px-1 bg-slate-200 text-slate-600 rounded text-[8px] font-mono",
@@ -18665,7 +18695,7 @@ function xx({ schemas: e, toggleSchemaColumn: t, customTableName: n, setCustomTa
 											}), e.columns.map((e, i) => /* @__PURE__ */ d("button", {
 												onClick: () => t(n, r, i),
 												className: "flex items-center space-x-2 w-full text-left py-0.5 text-[11px] text-slate-500 hover:text-slate-800 transition-colors",
-												children: [e.enabled === !1 ? /* @__PURE__ */ u(cx, { className: "h-3 w-3 text-slate-300 flex-shrink-0" }) : /* @__PURE__ */ u(sx, { className: "h-3 w-3 text-slate-600 flex-shrink-0" }), /* @__PURE__ */ d("span", {
+												children: [e.enabled === !1 ? /* @__PURE__ */ u(lx, { className: "h-3 w-3 text-slate-300 flex-shrink-0" }) : /* @__PURE__ */ u(cx, { className: "h-3 w-3 text-slate-600 flex-shrink-0" }), /* @__PURE__ */ d("span", {
 													className: "truncate",
 													children: [
 														e.columnName,
@@ -18720,7 +18750,7 @@ function xx({ schemas: e, toggleSchemaColumn: t, customTableName: n, setCustomTa
 				className: "border border-gray-200 rounded-2xl p-4 bg-slate-50/20 border-dashed space-y-4 mt-6",
 				children: [/* @__PURE__ */ d("div", {
 					className: "flex items-center space-x-2 pb-2 border-b border-gray-150",
-					children: [/* @__PURE__ */ u(ox, { className: "h-4 w-4 text-slate-655" }), /* @__PURE__ */ u("h4", {
+					children: [/* @__PURE__ */ u(sx, { className: "h-4 w-4 text-slate-655" }), /* @__PURE__ */ u("h4", {
 						className: "font-bold text-xs uppercase text-slate-800 tracking-wider",
 						children: "Custom Table Builder"
 					})]
@@ -18761,7 +18791,7 @@ function xx({ schemas: e, toggleSchemaColumn: t, customTableName: n, setCustomTa
 							onClick: c,
 							style: { backgroundColor: v },
 							className: "w-full py-2 text-white rounded-xl text-xs font-bold transition-all shadow-sm flex items-center justify-center space-x-1.5",
-							children: [/* @__PURE__ */ u(nx, { className: "h-4 w-4" }), /* @__PURE__ */ u("span", { children: "Add Custom Loop Table" })]
+							children: [/* @__PURE__ */ u(rx, { className: "h-4 w-4" }), /* @__PURE__ */ u("span", { children: "Add Custom Loop Table" })]
 						})
 					]
 				})]
@@ -18771,37 +18801,37 @@ function xx({ schemas: e, toggleSchemaColumn: t, customTableName: n, setCustomTa
 }
 //#endregion
 //#region src/components/sidebar/ImagesTab.tsx
-function Sx({ customImageTypes: e, newImgTypeName: t, setNewImgTypeName: n, handleAddCustomImageType: r, handleSidebarDragStart: i, createImageBlock: a, setBlocks: o, setSelectedBlockId: s, setActiveTab: c, themeColor: l = "#ea580c" }) {
+function Cx({ customImageTypes: e, newImgTypeName: t, setNewImgTypeName: n, handleAddCustomImageType: r, handleSidebarDragStart: i, createImageBlock: a, setBlocks: o, setSelectedBlockId: s, setActiveTab: c, themeColor: l = "#ea580c" }) {
 	let f = [
 		{
 			label: "Brand Logo",
 			imageType: "logo",
 			description: "Standard document vector logo",
-			icon: /* @__PURE__ */ u(Qb, { className: "h-4 w-4 text-slate-550" })
+			icon: /* @__PURE__ */ u($b, { className: "h-4 w-4 text-slate-550" })
 		},
 		{
 			label: "Campaign Banner",
 			imageType: "banner",
 			description: "Wide horizontal graphics banner",
-			icon: /* @__PURE__ */ u(Qb, { className: "h-4 w-4 text-slate-550" })
+			icon: /* @__PURE__ */ u($b, { className: "h-4 w-4 text-slate-550" })
 		},
 		{
 			label: "Dynamic Barcode",
 			imageType: "barcode",
 			description: "Barcode replaced dynamically",
-			icon: /* @__PURE__ */ u(Ub, { className: "h-4 w-4 text-slate-550" })
+			icon: /* @__PURE__ */ u(Wb, { className: "h-4 w-4 text-slate-550" })
 		},
 		{
 			label: "Watermark",
 			imageType: "watermark",
 			description: "Background graphic with low opacity",
-			icon: /* @__PURE__ */ u(Qb, { className: "h-4 w-4 text-slate-550" })
+			icon: /* @__PURE__ */ u($b, { className: "h-4 w-4 text-slate-550" })
 		},
 		...e.map((e) => ({
 			label: e.label,
 			imageType: e.imageType,
 			description: e.description,
-			icon: /* @__PURE__ */ u(Qb, { className: "h-4 w-4 text-slate-550" })
+			icon: /* @__PURE__ */ u($b, { className: "h-4 w-4 text-slate-550" })
 		}))
 	];
 	return /* @__PURE__ */ d("div", {
@@ -18840,7 +18870,7 @@ function Sx({ customImageTypes: e, newImgTypeName: t, setNewImgTypeName: n, hand
 								className: "flex items-center space-x-2",
 								children: [/* @__PURE__ */ u("div", {
 									className: "h-5 w-5 bg-slate-200 rounded flex items-center justify-center",
-									children: /* @__PURE__ */ u(nx, { className: "h-3 w-3 text-slate-750" })
+									children: /* @__PURE__ */ u(rx, { className: "h-3 w-3 text-slate-750" })
 								}), /* @__PURE__ */ u("span", {
 									className: "text-[11px] font-bold text-slate-700",
 									children: "Drag to Canvas"
@@ -18879,7 +18909,7 @@ function Sx({ customImageTypes: e, newImgTypeName: t, setNewImgTypeName: n, hand
 						onClick: r,
 						style: { backgroundColor: l },
 						className: "w-full py-1.5 text-white rounded-lg text-xs font-bold transition-all flex items-center justify-center space-x-1",
-						children: [/* @__PURE__ */ u(nx, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ u("span", { children: "Add Custom Category" })]
+						children: [/* @__PURE__ */ u(rx, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ u("span", { children: "Add Custom Category" })]
 					})
 				]
 			})
@@ -18888,7 +18918,7 @@ function Sx({ customImageTypes: e, newImgTypeName: t, setNewImgTypeName: n, hand
 }
 //#endregion
 //#region src/components/sidebar/PlaceholdersTab.tsx
-function Cx({ placeholders: e, schemas: t, searchPlaceholder: n, setSearchPlaceholder: r, selectedBlockId: i, setBlocks: a, isPlaceholdersLoading: o, placeholdersLoading: s }) {
+function wx({ placeholders: e, schemas: t, searchPlaceholder: n, setSearchPlaceholder: r, selectedBlockId: i, setBlocks: a, isPlaceholdersLoading: o, placeholdersLoading: s }) {
 	if (o || s) return /* @__PURE__ */ d("div", {
 		className: "space-y-4 flex-1 flex flex-col min-h-0",
 		children: [
@@ -18944,7 +18974,7 @@ function Cx({ placeholders: e, schemas: t, searchPlaceholder: n, setSearchPlaceh
 			})] }),
 			/* @__PURE__ */ d("div", {
 				className: "relative",
-				children: [/* @__PURE__ */ u(ix, { className: "absolute left-3 top-2.5 h-4 w-4 text-slate-400" }), /* @__PURE__ */ u("input", {
+				children: [/* @__PURE__ */ u(ax, { className: "absolute left-3 top-2.5 h-4 w-4 text-slate-400" }), /* @__PURE__ */ u("input", {
 					type: "text",
 					value: n,
 					onChange: (e) => r(e.target.value),
@@ -18985,7 +19015,7 @@ function Cx({ placeholders: e, schemas: t, searchPlaceholder: n, setSearchPlaceh
 }
 //#endregion
 //#region src/components/sidebar/StylesTab.tsx
-var wx = (e) => {
+var Tx = (e) => {
 	if (!e) return 100;
 	if (e.endsWith("%")) {
 		let t = parseInt(e, 10);
@@ -18993,7 +19023,7 @@ var wx = (e) => {
 	}
 	return 100;
 };
-function Tx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, updateSelectedImageInfo: r, fontSizesState: i, fontFamiliesState: a, fontWeightsState: o, handleDeleteBlock: c, newColName: f, setNewColName: p, newColPlaceholder: m, setNewColPlaceholder: h, handleAddTableColumn: g, handleRemoveTableColumn: _, handleUpdateTableColumn: v, handleReorderTableColumn: y, handleAddTableRow: b, handleRemoveTableRow: x, addColumnToLayout: S, deleteColumnFromLayout: C, mergeColumns: w, updateColumnStyle: T, updateColumnWidth: E, setBlocks: ee, themeColor: O = "#ea580c" }) {
+function Ex({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, updateSelectedImageInfo: r, fontSizesState: i, fontFamiliesState: a, fontWeightsState: o, handleDeleteBlock: c, newColName: f, setNewColName: p, newColPlaceholder: m, setNewColPlaceholder: h, handleAddTableColumn: g, handleRemoveTableColumn: _, handleUpdateTableColumn: v, handleReorderTableColumn: y, handleAddTableRow: b, handleRemoveTableRow: x, addColumnToLayout: S, deleteColumnFromLayout: C, mergeColumns: w, updateColumnStyle: T, updateColumnWidth: E, setBlocks: ee, themeColor: O = "#ea580c" }) {
 	var k;
 	let [te, A] = s(null), [ne, re] = s(""), [ie, ae] = s(""), [oe, se] = s(null), [ce, le] = s(""), [ue, de] = s(""), [fe, pe] = s(0), j = t();
 	if (!e || !j) return /* @__PURE__ */ d("div", {
@@ -19007,7 +19037,7 @@ function Tx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 		})] }), /* @__PURE__ */ d("div", {
 			className: "border border-dashed border-gray-200 rounded-xl p-6 text-center bg-slate-50/50",
 			children: [
-				/* @__PURE__ */ u(ax, { className: "h-8 w-8 text-slate-350 mx-auto mb-2" }),
+				/* @__PURE__ */ u(ox, { className: "h-8 w-8 text-slate-350 mx-auto mb-2" }),
 				/* @__PURE__ */ u("span", {
 					className: "text-xs font-semibold text-slate-500 block",
 					children: "No block selected"
@@ -19041,7 +19071,7 @@ function Tx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 					children: [
 						/* @__PURE__ */ d("h4", {
 							className: "text-xs font-bold text-slate-700 flex items-center gap-1.5",
-							children: [/* @__PURE__ */ u($b, { className: "h-4 w-4 text-indigo-600" }), /* @__PURE__ */ d("span", { children: [
+							children: [/* @__PURE__ */ u(ex, { className: "h-4 w-4 text-indigo-600" }), /* @__PURE__ */ d("span", { children: [
 								"Layout Container (",
 								e.columns.length,
 								" Column",
@@ -19056,14 +19086,14 @@ function Tx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 									S && S(j.id, t);
 								},
 								className: "flex-1 py-1.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-[10px] font-bold transition-all flex items-center justify-center space-x-1 shadow-xs cursor-pointer",
-								children: [/* @__PURE__ */ u(nx, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ u("span", { children: "Add Column to Right" })]
+								children: [/* @__PURE__ */ u(rx, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ u("span", { children: "Add Column to Right" })]
 							}), e.columns.length > 1 && /* @__PURE__ */ d("button", {
 								onClick: () => {
 									C && C(j.id, t);
 								},
 								className: "py-1.5 px-3 bg-red-50 hover:bg-red-100 text-red-600 border border-red-200 rounded-lg text-[10px] font-bold transition-all flex items-center justify-center space-x-1 cursor-pointer",
 								title: "Delete Selected Column",
-								children: [/* @__PURE__ */ u(mx, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ u("span", { children: "Delete Col" })]
+								children: [/* @__PURE__ */ u(hx, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ u("span", { children: "Delete Col" })]
 							})]
 						}),
 						/* @__PURE__ */ d("div", {
@@ -19093,7 +19123,7 @@ function Tx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 					className: "space-y-4 border border-slate-200 rounded-xl p-3.5 bg-white shadow-xs",
 					children: [/* @__PURE__ */ d("h4", {
 						className: "text-xs font-bold text-slate-700 flex items-center gap-1.5",
-						children: [/* @__PURE__ */ u(Gb, { className: "h-4 w-4 text-indigo-600" }), /* @__PURE__ */ u("span", { children: "Column Styling" })]
+						children: [/* @__PURE__ */ u(Kb, { className: "h-4 w-4 text-indigo-600" }), /* @__PURE__ */ u("span", { children: "Column Styling" })]
 					}), /* @__PURE__ */ d("div", {
 						className: "space-y-3",
 						children: [
@@ -19254,7 +19284,7 @@ function Tx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 										w && w(j.id, t, t + 1);
 									},
 									className: "w-full py-1.5 bg-indigo-50 hover:bg-indigo-100 text-indigo-700 rounded-lg text-[10px] font-bold transition-all flex items-center justify-center space-x-1",
-									children: [/* @__PURE__ */ u(ex, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ d("span", { children: [
+									children: [/* @__PURE__ */ u(tx, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ d("span", { children: [
 										"Merge Column ",
 										t + 1,
 										" with Column ",
@@ -19268,7 +19298,7 @@ function Tx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 				/* @__PURE__ */ d("button", {
 					onClick: () => c(j.id),
 					className: "w-full py-2 bg-red-50 hover:bg-red-100 text-red-600 rounded-xl text-xs font-bold transition-all flex items-center justify-center space-x-1.5 border border-red-200",
-					children: [/* @__PURE__ */ u(mx, { className: "h-4 w-4" }), /* @__PURE__ */ u("span", { children: "Delete Layout Block" })]
+					children: [/* @__PURE__ */ u(hx, { className: "h-4 w-4" }), /* @__PURE__ */ u("span", { children: "Delete Layout Block" })]
 				})
 			]
 		});
@@ -19293,7 +19323,7 @@ function Tx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 						className: "flex items-center space-x-2 pb-3 border-b border-gray-100",
 						children: [/* @__PURE__ */ u("div", {
 							className: "h-6 w-6 bg-slate-100 rounded flex items-center justify-center text-slate-700",
-							children: /* @__PURE__ */ u(Qb, { className: "h-3.5 w-3.5" })
+							children: /* @__PURE__ */ u($b, { className: "h-3.5 w-3.5" })
 						}), /* @__PURE__ */ u("span", {
 							className: "text-xs font-bold text-slate-700 capitalize",
 							children: "Editing Image Element"
@@ -19352,15 +19382,15 @@ function Tx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 							children: [
 								{
 									value: "left",
-									icon: /* @__PURE__ */ u(px, { className: "h-3.5 w-3.5" })
+									icon: /* @__PURE__ */ u(mx, { className: "h-3.5 w-3.5" })
 								},
 								{
 									value: "center",
-									icon: /* @__PURE__ */ u(ux, { className: "h-3.5 w-3.5" })
+									icon: /* @__PURE__ */ u(dx, { className: "h-3.5 w-3.5" })
 								},
 								{
 									value: "right",
-									icon: /* @__PURE__ */ u(dx, { className: "h-3.5 w-3.5" })
+									icon: /* @__PURE__ */ u(fx, { className: "h-3.5 w-3.5" })
 								}
 							].map((e) => /* @__PURE__ */ u("button", {
 								onClick: () => n("textAlign", e.value),
@@ -19379,7 +19409,7 @@ function Tx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 								children: "Block Width (%)"
 							}), /* @__PURE__ */ d("span", {
 								className: "text-[10px] font-mono text-slate-500 font-bold bg-slate-100 px-1.5 py-0.5 rounded",
-								children: [wx(j.style.width), "%"]
+								children: [Tx(j.style.width), "%"]
 							})]
 						}), /* @__PURE__ */ d("div", {
 							className: "flex items-center space-x-2",
@@ -19388,13 +19418,13 @@ function Tx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 								min: "10",
 								max: "100",
 								step: "5",
-								value: wx(j.style.width),
+								value: Tx(j.style.width),
 								onChange: (e) => n("width", `${Math.min(100, Math.max(10, parseInt(e.target.value, 10)))}%`),
 								style: { accentColor: O },
 								className: "w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer"
 							}), /* @__PURE__ */ d("span", {
 								className: "text-[10px] font-mono text-slate-500 w-10 text-right",
-								children: [wx(j.style.width), "%"]
+								children: [Tx(j.style.width), "%"]
 							})]
 						})]
 					}),
@@ -19522,7 +19552,7 @@ function Tx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 						}), /* @__PURE__ */ d("div", {
 							className: "flex flex-col items-center p-3 border border-dashed border-gray-200 rounded-lg bg-slate-50/50 hover:bg-slate-50 transition-all cursor-pointer relative",
 							children: [
-								/* @__PURE__ */ u(gx, { className: "h-5 w-5 text-slate-400 mb-1" }),
+								/* @__PURE__ */ u(_x, { className: "h-5 w-5 text-slate-400 mb-1" }),
 								/* @__PURE__ */ u("span", {
 									className: "text-[10px] font-bold text-slate-650",
 									children: "Choose local image file"
@@ -19587,7 +19617,7 @@ function Tx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 						children: /* @__PURE__ */ d("button", {
 							onClick: () => c(j.id),
 							className: "w-full py-2 bg-red-50 hover:bg-red-100 border border-red-200 text-red-650 rounded-xl text-xs font-bold transition-all flex items-center justify-center space-x-1 shadow-xs cursor-pointer",
-							children: [/* @__PURE__ */ u(mx, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ u("span", { children: "Delete Element" })]
+							children: [/* @__PURE__ */ u(hx, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ u("span", { children: "Delete Element" })]
 						})
 					})
 				]
@@ -19733,19 +19763,19 @@ function Tx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 								children: [
 									{
 										value: "left",
-										icon: /* @__PURE__ */ u(px, { className: "h-3.5 w-3.5" })
+										icon: /* @__PURE__ */ u(mx, { className: "h-3.5 w-3.5" })
 									},
 									{
 										value: "center",
-										icon: /* @__PURE__ */ u(ux, { className: "h-3.5 w-3.5" })
+										icon: /* @__PURE__ */ u(dx, { className: "h-3.5 w-3.5" })
 									},
 									{
 										value: "right",
-										icon: /* @__PURE__ */ u(dx, { className: "h-3.5 w-3.5" })
+										icon: /* @__PURE__ */ u(fx, { className: "h-3.5 w-3.5" })
 									},
 									{
 										value: "justify",
-										icon: /* @__PURE__ */ u(fx, { className: "h-3.5 w-3.5" })
+										icon: /* @__PURE__ */ u(px, { className: "h-3.5 w-3.5" })
 									}
 								].map((e) => /* @__PURE__ */ u("button", {
 									onClick: () => n("textAlign", e.value),
@@ -19848,7 +19878,7 @@ function Tx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 									children: "Block Width (%)"
 								}), /* @__PURE__ */ d("span", {
 									className: "text-[10px] font-mono text-slate-500 font-bold bg-slate-100 px-1.5 py-0.5 rounded",
-									children: [wx(j.style.width), "%"]
+									children: [Tx(j.style.width), "%"]
 								})]
 							}), /* @__PURE__ */ d("div", {
 								className: "flex items-center space-x-2",
@@ -19857,13 +19887,13 @@ function Tx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 									min: "10",
 									max: "100",
 									step: "5",
-									value: wx(j.style.width),
+									value: Tx(j.style.width),
 									onChange: (e) => n("width", `${Math.min(100, Math.max(10, parseInt(e.target.value, 10)))}%`),
 									style: { accentColor: O },
 									className: "w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer"
 								}), /* @__PURE__ */ d("span", {
 									className: "text-[10px] font-mono text-slate-500 w-10 text-right",
-									children: [wx(j.style.width), "%"]
+									children: [Tx(j.style.width), "%"]
 								})]
 							})]
 						}),
@@ -19940,7 +19970,7 @@ function Tx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 							style: { backgroundColor: O },
 							className: "px-3 py-1.5 text-white rounded-lg text-xs font-bold transition-all flex items-center space-x-1 shadow-xs cursor-pointer",
 							title: "Add a new row to table",
-							children: [/* @__PURE__ */ u(nx, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ u("span", { children: "Add Row" })]
+							children: [/* @__PURE__ */ u(rx, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ u("span", { children: "Add Row" })]
 						})]
 					}), /* @__PURE__ */ u("div", {
 						className: "space-y-1.5 max-h-[140px] overflow-y-auto pr-1",
@@ -19957,7 +19987,7 @@ function Tx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 									disabled: (((n = j.tableInfo) == null || (n = n.mockRows) == null ? void 0 : n.length) || 1) <= 1,
 									className: "p-1 text-slate-400 hover:text-red-600 hover:bg-red-50 disabled:opacity-30 disabled:hover:bg-transparent rounded transition-colors",
 									title: "Remove row",
-									children: /* @__PURE__ */ u(mx, { className: "h-3.5 w-3.5" })
+									children: /* @__PURE__ */ u(hx, { className: "h-3.5 w-3.5" })
 								})]
 							}, t);
 						})
@@ -20005,11 +20035,11 @@ function Tx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 													},
 													style: { backgroundColor: O },
 													className: "p-1 px-2 text-white rounded text-[10px] flex items-center gap-1 font-bold cursor-pointer",
-													children: [/* @__PURE__ */ u(Wb, { className: "h-3 w-3" }), /* @__PURE__ */ u("span", { children: "Save" })]
+													children: [/* @__PURE__ */ u(Gb, { className: "h-3 w-3" }), /* @__PURE__ */ u("span", { children: "Save" })]
 												}), /* @__PURE__ */ d("button", {
 													onClick: () => A(null),
 													className: "p-1 px-2 bg-gray-200 text-slate-700 hover:bg-gray-300 rounded text-[10px] flex items-center gap-1",
-													children: [/* @__PURE__ */ u(_x, { className: "h-3 w-3" }), /* @__PURE__ */ u("span", { children: "Cancel" })]
+													children: [/* @__PURE__ */ u(vx, { className: "h-3 w-3" }), /* @__PURE__ */ u("span", { children: "Cancel" })]
 												})]
 											})
 										]
@@ -20035,14 +20065,14 @@ function Tx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 													disabled: t === 0,
 													className: "p-1 text-slate-400 hover:text-slate-700 hover:bg-slate-200 disabled:opacity-30 disabled:hover:bg-transparent rounded transition-colors",
 													title: "Move Up",
-													children: /* @__PURE__ */ u(Hb, { className: "h-3.5 w-3.5" })
+													children: /* @__PURE__ */ u(Ub, { className: "h-3.5 w-3.5" })
 												}),
 												/* @__PURE__ */ u("button", {
 													onClick: () => y && y(t, "down"),
 													disabled: t === (((n = j.tableInfo) == null ? void 0 : n.columns.length) || 0) - 1,
 													className: "p-1 text-slate-400 hover:text-slate-700 hover:bg-slate-200 disabled:opacity-30 disabled:hover:bg-transparent rounded transition-colors",
 													title: "Move Down",
-													children: /* @__PURE__ */ u(Vb, { className: "h-3.5 w-3.5" })
+													children: /* @__PURE__ */ u(Hb, { className: "h-3.5 w-3.5" })
 												}),
 												/* @__PURE__ */ u("button", {
 													onClick: () => {
@@ -20050,14 +20080,14 @@ function Tx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 													},
 													className: "p-1 text-slate-400 hover:text-slate-700 hover:bg-slate-200 rounded transition-colors",
 													title: "Edit column",
-													children: /* @__PURE__ */ u(tx, { className: "h-3.5 w-3.5" })
+													children: /* @__PURE__ */ u(nx, { className: "h-3.5 w-3.5" })
 												}),
 												/* @__PURE__ */ u("button", {
 													onClick: () => _(t),
 													className: "p-1 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors border border-transparent",
 													disabled: !j.tableInfo || j.tableInfo.columns.length <= 1,
 													title: "Delete column",
-													children: /* @__PURE__ */ u(mx, { className: "h-3.5 w-3.5" })
+													children: /* @__PURE__ */ u(hx, { className: "h-3.5 w-3.5" })
 												})
 											]
 										})]
@@ -20105,11 +20135,11 @@ function Tx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 																	v && v(t, ne, ie, r), A(null);
 																},
 																className: "p-0.5 px-1.5 bg-blue-600 text-white hover:bg-blue-700 rounded text-[9px] flex items-center gap-1 font-bold",
-																children: [/* @__PURE__ */ u(Wb, { className: "h-2.5 w-2.5" }), /* @__PURE__ */ u("span", { children: "Save" })]
+																children: [/* @__PURE__ */ u(Gb, { className: "h-2.5 w-2.5" }), /* @__PURE__ */ u("span", { children: "Save" })]
 															}), /* @__PURE__ */ d("button", {
 																onClick: () => A(null),
 																className: "p-0.5 px-1.5 bg-gray-200 text-slate-700 hover:bg-gray-300 rounded text-[9px] flex items-center gap-1",
-																children: [/* @__PURE__ */ u(_x, { className: "h-2.5 w-2.5" }), /* @__PURE__ */ u("span", { children: "Cancel" })]
+																children: [/* @__PURE__ */ u(vx, { className: "h-2.5 w-2.5" }), /* @__PURE__ */ u("span", { children: "Cancel" })]
 															})]
 														})
 													]
@@ -20132,14 +20162,14 @@ function Tx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 																disabled: r === 0,
 																className: "p-0.5 text-slate-400 hover:text-slate-700 hover:bg-slate-100 disabled:opacity-30 disabled:hover:bg-transparent rounded",
 																title: "Move Sub-Column Up",
-																children: /* @__PURE__ */ u(Hb, { className: "h-3 w-3" })
+																children: /* @__PURE__ */ u(Ub, { className: "h-3 w-3" })
 															}),
 															/* @__PURE__ */ u("button", {
 																onClick: () => y && y(t, "down", r),
 																disabled: r === e.columns.length - 1,
 																className: "p-0.5 text-slate-400 hover:text-slate-700 hover:bg-slate-100 disabled:opacity-30 disabled:hover:bg-transparent rounded",
 																title: "Move Sub-Column Down",
-																children: /* @__PURE__ */ u(Vb, { className: "h-3 w-3" })
+																children: /* @__PURE__ */ u(Hb, { className: "h-3 w-3" })
 															}),
 															/* @__PURE__ */ u("button", {
 																onClick: () => {
@@ -20147,13 +20177,13 @@ function Tx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 																},
 																className: "p-0.5 text-slate-400 hover:text-slate-700 hover:bg-slate-100 rounded",
 																title: "Edit sub-column",
-																children: /* @__PURE__ */ u(tx, { className: "h-3 w-3" })
+																children: /* @__PURE__ */ u(nx, { className: "h-3 w-3" })
 															}),
 															/* @__PURE__ */ u("button", {
 																onClick: () => _(t, r),
 																className: "p-0.5 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded",
 																title: "Delete sub-column",
-																children: /* @__PURE__ */ u(mx, { className: "h-3 w-3" })
+																children: /* @__PURE__ */ u(hx, { className: "h-3 w-3" })
 															})
 														]
 													})]
@@ -20200,7 +20230,7 @@ function Tx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 											}) : /* @__PURE__ */ d("button", {
 												onClick: () => se(t),
 												className: "w-full py-1 text-[10px] font-bold text-blue-600 hover:bg-blue-50 border border-dashed border-blue-200 rounded flex items-center justify-center space-x-1 transition-colors mt-1",
-												children: [/* @__PURE__ */ u(nx, { className: "h-3 w-3" }), /* @__PURE__ */ u("span", { children: "Add Sub-Column" })]
+												children: [/* @__PURE__ */ u(rx, { className: "h-3 w-3" }), /* @__PURE__ */ u("span", { children: "Add Sub-Column" })]
 											})
 										]
 									})]
@@ -20234,14 +20264,14 @@ function Tx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 										onClick: ve,
 										style: { backgroundColor: O },
 										className: "flex-1 py-1.5 text-white rounded-lg text-xs font-bold transition-all flex items-center justify-center space-x-1 cursor-pointer",
-										children: [/* @__PURE__ */ u(nx, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ u("span", { children: "Column" })]
+										children: [/* @__PURE__ */ u(rx, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ u("span", { children: "Column" })]
 									}), /* @__PURE__ */ d("button", {
 										onClick: () => {
 											f.trim() && (g(f, m || "{{item.price}}", !0), p(""), h(""));
 										},
 										className: "flex-1 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-xs font-bold transition-all flex items-center justify-center space-x-1",
 										title: "Add column as nested sub-table",
-										children: [/* @__PURE__ */ u(nx, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ u("span", { children: "Sub-Table" })]
+										children: [/* @__PURE__ */ u(rx, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ u("span", { children: "Sub-Table" })]
 									})]
 								})
 							]
@@ -20253,7 +20283,7 @@ function Tx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 					children: /* @__PURE__ */ d("button", {
 						onClick: () => c(j.id),
 						className: "w-full py-2 bg-red-50 hover:bg-red-100 border border-red-200 text-red-650 rounded-xl text-xs font-bold transition-all flex items-center justify-center space-x-1 shadow-xs cursor-pointer",
-						children: [/* @__PURE__ */ u(mx, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ u("span", { children: "Delete Element" })]
+						children: [/* @__PURE__ */ u(hx, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ u("span", { children: "Delete Element" })]
 					})
 				})
 			]
@@ -20262,7 +20292,7 @@ function Tx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 }
 //#endregion
 //#region src/components/SidebarPanel.tsx
-function Ex({ activeTab: e, setActiveTab: t, themeColor: n = "#ea580c", setBlocks: r, selectedBlockId: i, setSelectedBlockId: a, getSelectedBlock: o, defaultStyles: s, createTextBlock: c, createImageBlock: l, createLayoutBlock: f, addColumnToLayout: p, deleteColumnFromLayout: m, mergeColumns: h, updateColumnStyle: g, updateColumnWidth: _, updateSelectedStyle: v, updateSelectedImageInfo: y, handleDeleteBlock: b, handleRemoveTableColumn: x, handleAddTableColumn: S, handleUpdateTableColumn: C, handleReorderTableColumn: w, handleAddTableRow: T, handleRemoveTableRow: E, schemas: D, toggleSchemaColumn: ee, customTableName: O, setCustomTableName: k, customLoopStart: te, setCustomLoopStart: A, customLoopEnd: ne, setCustomLoopEnd: re, handleAddCustomTable: ie, newColName: ae, setNewColName: oe, newColPlaceholder: se, setNewColPlaceholder: ce, customImageTypes: le, newImgTypeName: ue, setNewImgTypeName: de, handleAddCustomImageType: fe, placeholders: pe, searchPlaceholder: j, setSearchPlaceholder: me, handleSidebarDragStart: he, isTablesLoading: ge, tablesLoading: _e, isPlaceholdersLoading: ve, placeholdersLoading: ye, fontSizesState: be, fontFamiliesState: xe, fontWeightsState: Se, sidebarPosition: Ce = "left" }) {
+function Dx({ activeTab: e, setActiveTab: t, themeColor: n = "#ea580c", setBlocks: r, selectedBlockId: i, setSelectedBlockId: a, getSelectedBlock: o, defaultStyles: s, createTextBlock: c, createImageBlock: l, createLayoutBlock: f, addColumnToLayout: p, deleteColumnFromLayout: m, mergeColumns: h, updateColumnStyle: g, updateColumnWidth: _, updateSelectedStyle: v, updateSelectedImageInfo: y, handleDeleteBlock: b, handleRemoveTableColumn: x, handleAddTableColumn: S, handleUpdateTableColumn: C, handleReorderTableColumn: w, handleAddTableRow: T, handleRemoveTableRow: E, schemas: D, toggleSchemaColumn: ee, customTableName: O, setCustomTableName: k, customLoopStart: te, setCustomLoopStart: A, customLoopEnd: ne, setCustomLoopEnd: re, handleAddCustomTable: ie, newColName: ae, setNewColName: oe, newColPlaceholder: se, setNewColPlaceholder: ce, customImageTypes: le, newImgTypeName: ue, setNewImgTypeName: de, handleAddCustomImageType: fe, placeholders: pe, searchPlaceholder: j, setSearchPlaceholder: me, handleSidebarDragStart: he, isTablesLoading: ge, tablesLoading: _e, isPlaceholdersLoading: ve, placeholdersLoading: ye, fontSizesState: be, fontFamiliesState: xe, fontWeightsState: Se, sidebarPosition: Ce = "left" }) {
 	return /* @__PURE__ */ d("aside", {
 		className: `w-full lg:col-span-4 h-full max-h-full min-h-0 flex flex-col bg-white border-t lg:border-t-0 ${Ce === "left" ? "lg:border-r lg:order-1" : "lg:border-l lg:order-2"} border-gray-200 overflow-hidden shrink-0`,
 		children: [/* @__PURE__ */ u("div", {
@@ -20270,27 +20300,27 @@ function Ex({ activeTab: e, setActiveTab: t, themeColor: n = "#ea580c", setBlock
 			children: [
 				{
 					value: "text",
-					icon: /* @__PURE__ */ u(hx, { className: "h-4 w-4" })
+					icon: /* @__PURE__ */ u(gx, { className: "h-4 w-4" })
 				},
 				{
 					value: "layouts",
-					icon: /* @__PURE__ */ u($b, { className: "h-4 w-4" })
+					icon: /* @__PURE__ */ u(ex, { className: "h-4 w-4" })
 				},
 				{
 					value: "tables",
-					icon: /* @__PURE__ */ u(lx, { className: "h-4 w-4" })
+					icon: /* @__PURE__ */ u(ux, { className: "h-4 w-4" })
 				},
 				{
 					value: "images",
-					icon: /* @__PURE__ */ u(Qb, { className: "h-4 w-4" })
+					icon: /* @__PURE__ */ u($b, { className: "h-4 w-4" })
 				},
 				{
 					value: "placeholders",
-					icon: /* @__PURE__ */ u(ox, { className: "h-4 w-4" })
+					icon: /* @__PURE__ */ u(sx, { className: "h-4 w-4" })
 				},
 				{
 					value: "styles",
-					icon: /* @__PURE__ */ u(ax, { className: "h-4 w-4" })
+					icon: /* @__PURE__ */ u(ox, { className: "h-4 w-4" })
 				}
 			].map((r) => /* @__PURE__ */ d("button", {
 				onClick: () => t(r.value),
@@ -20304,7 +20334,7 @@ function Ex({ activeTab: e, setActiveTab: t, themeColor: n = "#ea580c", setBlock
 		}), /* @__PURE__ */ d("div", {
 			className: "p-4 flex-1 flex flex-col min-h-0 max-h-[80%] h-[80%] overflow-y-auto custom-scrollbar",
 			children: [
-				e === "text" && /* @__PURE__ */ u(yx, {
+				e === "text" && /* @__PURE__ */ u(bx, {
 					handleSidebarDragStart: he,
 					createTextBlock: c,
 					setBlocks: r,
@@ -20312,7 +20342,7 @@ function Ex({ activeTab: e, setActiveTab: t, themeColor: n = "#ea580c", setBlock
 					setActiveTab: t,
 					defaultStyles: s
 				}),
-				e === "layouts" && /* @__PURE__ */ u(bx, {
+				e === "layouts" && /* @__PURE__ */ u(xx, {
 					handleSidebarDragStart: he,
 					createLayoutBlock: f || (() => c("p", "Layout")),
 					setBlocks: r,
@@ -20320,7 +20350,7 @@ function Ex({ activeTab: e, setActiveTab: t, themeColor: n = "#ea580c", setBlock
 					setActiveTab: t,
 					themeColor: n
 				}),
-				e === "tables" && /* @__PURE__ */ u(xx, {
+				e === "tables" && /* @__PURE__ */ u(Sx, {
 					schemas: D,
 					toggleSchemaColumn: ee,
 					customTableName: O,
@@ -20339,7 +20369,7 @@ function Ex({ activeTab: e, setActiveTab: t, themeColor: n = "#ea580c", setBlock
 					tablesLoading: _e,
 					themeColor: n
 				}),
-				e === "images" && /* @__PURE__ */ u(Sx, {
+				e === "images" && /* @__PURE__ */ u(Cx, {
 					customImageTypes: le,
 					newImgTypeName: ue,
 					setNewImgTypeName: de,
@@ -20351,7 +20381,7 @@ function Ex({ activeTab: e, setActiveTab: t, themeColor: n = "#ea580c", setBlock
 					setActiveTab: t,
 					themeColor: n
 				}),
-				e === "placeholders" && /* @__PURE__ */ u(Cx, {
+				e === "placeholders" && /* @__PURE__ */ u(wx, {
 					placeholders: pe,
 					schemas: D,
 					searchPlaceholder: j,
@@ -20361,7 +20391,7 @@ function Ex({ activeTab: e, setActiveTab: t, themeColor: n = "#ea580c", setBlock
 					isPlaceholdersLoading: ve,
 					placeholdersLoading: ye
 				}),
-				e === "styles" && /* @__PURE__ */ u(Tx, {
+				e === "styles" && /* @__PURE__ */ u(Ex, {
 					selectedBlockId: i,
 					getSelectedBlock: o,
 					updateSelectedStyle: v,
@@ -20394,18 +20424,18 @@ function Ex({ activeTab: e, setActiveTab: t, themeColor: n = "#ea580c", setBlock
 }
 //#endregion
 //#region src/components/EditableBlock.tsx
-var Dx = [
+var Ox = [
 	"bold",
 	"italic",
 	"underline",
 	"strikethrough",
 	"width"
-], Ox = ({ block: e, onUpdate: t, onSelect: n, onDrop: r }) => {
+], kx = ({ block: e, onUpdate: t, onSelect: n, onDrop: r }) => {
 	let i = o(null);
 	a(() => {
 		i.current && i.current.innerHTML !== e.content && document.activeElement !== i.current && (i.current.innerHTML = e.content || "<br/>");
 	}, [e.id, e.content]);
-	let s = e.style, { bold: c, italic: l, underline: d, strikethrough: f, width: p } = s, m = D({}, Lb(s, Dx));
+	let s = e.style, { bold: c, italic: l, underline: d, strikethrough: f, width: p } = s, m = D({}, Rb(s, Ox));
 	c && (m.fontWeight = "bold"), l && (m.fontStyle = "italic");
 	let h = [];
 	return d && h.push("underline"), f && h.push("line-through"), h.length > 0 && (m.textDecoration = h.join(" ")), /* @__PURE__ */ u("div", {
@@ -20420,7 +20450,7 @@ var Dx = [
 		onDrop: r,
 		onDragOver: (e) => e.preventDefault()
 	});
-}, kx = ({ blockId: e, colIdx: t, placeholder: n, onUpdate: r, onDrop: i, colSpan: c = 1, onColSpanChange: l, themeColor: f }) => {
+}, Ax = ({ blockId: e, colIdx: t, placeholder: n, onUpdate: r, onDrop: i, colSpan: c = 1, onColSpanChange: l, themeColor: f }) => {
 	let p = o(null), [m, h] = s(!1);
 	a(() => {
 		p.current && g(p.current) !== n && document.activeElement !== p.current && (p.current.innerHTML = n);
@@ -20470,7 +20500,7 @@ var Dx = [
 			})]
 		})
 	});
-}, Ax = (e) => {
+}, jx = (e) => {
 	let t = [];
 	return e.forEach((e) => {
 		e.style.sameRow && t.length > 0 ? t[t.length - 1].blocks.push(e) : t.push({
@@ -20479,7 +20509,7 @@ var Dx = [
 		});
 	}), t;
 };
-function jx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r, setActiveTab: i, showMockData: o, placeholderMockData: c, dragOverIndex: l, setDragOverIndex: f, draggedSidebarItem: p, defaultStyles: m, zoom: h, panOffset: g, spacePressed: _, canvasHeight: v, setCanvasHeight: y, viewportRef: b, canvasContainerRef: x, contentRef: S, handleMouseDown: C, handleMouseMove: w, handleMouseUp: T, createTextBlock: E, createImageBlock: ee, createLayoutBlock: O, addColumnToLayout: k, deleteColumnFromLayout: te, mergeColumns: A, duplicateBlock: ne, reorderBlock: re, handleDeleteBlock: ie, handleSidebarDrop: ae, handleTableCellDrop: oe, updateTableCell: se, updateTableCellColspan: ce, handleTextDrop: le, themeColor: ue = "#ea580c" }) {
+function Mx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r, setActiveTab: i, showMockData: o, placeholderMockData: c, dragOverIndex: l, setDragOverIndex: f, draggedSidebarItem: p, defaultStyles: m, zoom: h, panOffset: g, spacePressed: _, canvasHeight: v, setCanvasHeight: y, viewportRef: b, canvasContainerRef: x, contentRef: S, handleMouseDown: C, handleMouseMove: w, handleMouseUp: T, createTextBlock: E, createImageBlock: ee, createLayoutBlock: O, addColumnToLayout: k, deleteColumnFromLayout: te, mergeColumns: A, duplicateBlock: ne, reorderBlock: re, handleDeleteBlock: ie, handleSidebarDrop: ae, handleTableCellDrop: oe, updateTableCell: se, updateTableCellColspan: ce, handleTextDrop: le, themeColor: ue = "#ea580c" }) {
 	let [de, fe] = s(null), [pe, j] = s(null), [me, he] = s([]);
 	a(() => {
 		let e = () => {
@@ -20736,7 +20766,7 @@ function jx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r
 									},
 									className: "flex items-center space-x-1 bg-red-500 hover:bg-red-600 text-white px-2.5 py-1 rounded-full text-[10px] font-bold shadow-md hover:shadow-lg transition-all duration-150 cursor-pointer active:scale-95 z-40",
 									title: `Delete empty Page ${n}`,
-									children: [/* @__PURE__ */ u(mx, { className: "h-3 w-3" }), /* @__PURE__ */ d("span", { children: ["Delete Page ", n] })]
+									children: [/* @__PURE__ */ u(hx, { className: "h-3 w-3" }), /* @__PURE__ */ d("span", { children: ["Delete Page ", n] })]
 								})]
 							})
 						}, t);
@@ -20747,7 +20777,7 @@ function jx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r
 						children: e.length === 0 ? /* @__PURE__ */ d("div", {
 							className: "flex-1 border-2 border-dashed border-gray-200 rounded-2xl flex flex-col items-center justify-center p-8 text-center text-slate-400",
 							children: [
-								/* @__PURE__ */ u(ax, { className: "h-10 w-10 mb-3 animate-bounce text-slate-350" }),
+								/* @__PURE__ */ u(ox, { className: "h-10 w-10 mb-3 animate-bounce text-slate-350" }),
 								/* @__PURE__ */ u("span", {
 									className: "font-bold text-sm text-slate-600 block",
 									children: "Drag & Drop Editor Canvas"
@@ -20757,7 +20787,7 @@ function jx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r
 									children: "Select elements from sidebar (Text, Layouts, Tables, Images) and drag them here to assemble your template structure."
 								})
 							]
-						}) : Ax(e).map((a) => {
+						}) : jx(e).map((a) => {
 							var o;
 							let s = a.blocks.length > 1, c = a.blocks.some((e) => e.type === "table"), l = a.blocks.some((e) => e.style.pageBreakBefore === "always" || e.style.pageBreakBefore === !0);
 							return /* @__PURE__ */ u("div", {
@@ -20813,7 +20843,7 @@ function jx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r
 													},
 													className: "hover:text-slate-200 flex items-center gap-1 border-r border-white/30 pr-1.5",
 													title: "Add Column to Right",
-													children: [/* @__PURE__ */ u(nx, { className: "h-3 w-3" }), /* @__PURE__ */ u("span", {
+													children: [/* @__PURE__ */ u(rx, { className: "h-3 w-3" }), /* @__PURE__ */ u("span", {
 														className: "text-[9px]",
 														children: "Add Col"
 													})]
@@ -20824,7 +20854,7 @@ function jx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r
 													},
 													className: "hover:text-slate-200",
 													title: "Move Up",
-													children: /* @__PURE__ */ u(Hb, { className: "h-3 w-3" })
+													children: /* @__PURE__ */ u(Ub, { className: "h-3 w-3" })
 												}),
 												/* @__PURE__ */ u("button", {
 													onClick: (t) => {
@@ -20832,19 +20862,19 @@ function jx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r
 													},
 													className: "hover:text-slate-200",
 													title: "Move Down",
-													children: /* @__PURE__ */ u(Vb, { className: "h-3 w-3" })
+													children: /* @__PURE__ */ u(Hb, { className: "h-3 w-3" })
 												}),
 												/* @__PURE__ */ u("button", {
 													onClick: (e) => ne(a.id, e),
 													className: "hover:text-slate-200",
 													title: "Duplicate",
-													children: /* @__PURE__ */ u(Jb, { className: "h-3 w-3" })
+													children: /* @__PURE__ */ u(Yb, { className: "h-3 w-3" })
 												}),
 												/* @__PURE__ */ u("button", {
 													onClick: (e) => ie(a.id, e),
 													className: "text-red-200 hover:text-red-300 ml-1",
 													title: "Delete",
-													children: /* @__PURE__ */ u(mx, { className: "h-3 w-3" })
+													children: /* @__PURE__ */ u(hx, { className: "h-3 w-3" })
 												})
 											]
 										}), a.type === "layout" ? /* @__PURE__ */ u("div", {
@@ -20905,7 +20935,7 @@ function jx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r
 															className: "flex items-center justify-between mb-1.5 text-[9px] font-bold text-slate-400 border-b border-slate-100 pb-1 select-none",
 															children: [/* @__PURE__ */ d("span", {
 																className: "flex items-center space-x-1",
-																children: [/* @__PURE__ */ u(Gb, { className: "h-3 w-3 text-slate-400" }), /* @__PURE__ */ d("span", { children: ["Col ", t + 1] })]
+																children: [/* @__PURE__ */ u(Kb, { className: "h-3 w-3 text-slate-400" }), /* @__PURE__ */ d("span", { children: ["Col ", t + 1] })]
 															}), /* @__PURE__ */ d("div", {
 																className: "flex items-center space-x-1 opacity-0 group-hover/col:opacity-100 transition-opacity",
 																children: [
@@ -20915,7 +20945,7 @@ function jx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r
 																		},
 																		className: "px-1.5 py-0.5 bg-indigo-50 hover:bg-indigo-100 text-indigo-700 rounded text-[8px] font-bold flex items-center gap-0.5 transition-all",
 																		title: "Add Column to Right",
-																		children: [/* @__PURE__ */ u(nx, { className: "h-2.5 w-2.5" }), /* @__PURE__ */ u("span", { children: "+ Col" })]
+																		children: [/* @__PURE__ */ u(rx, { className: "h-2.5 w-2.5" }), /* @__PURE__ */ u("span", { children: "+ Col" })]
 																	}),
 																	t < (((m = a.layoutInfo) == null ? void 0 : m.columns.length) || 0) - 1 && /* @__PURE__ */ d("button", {
 																		onClick: (e) => {
@@ -20923,7 +20953,7 @@ function jx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r
 																		},
 																		className: "px-1.5 py-0.5 bg-slate-100 hover:bg-indigo-100 text-slate-600 hover:text-indigo-700 rounded text-[8px] font-bold flex items-center gap-1 transition-all",
 																		title: "Merge with next column",
-																		children: [/* @__PURE__ */ u(ex, { className: "h-2.5 w-2.5" }), /* @__PURE__ */ u("span", { children: "Merge Next" })]
+																		children: [/* @__PURE__ */ u(tx, { className: "h-2.5 w-2.5" }), /* @__PURE__ */ u("span", { children: "Merge Next" })]
 																	}),
 																	(((h = a.layoutInfo) == null ? void 0 : h.columns.length) || 0) > 1 && /* @__PURE__ */ u("button", {
 																		onClick: (e) => {
@@ -20931,7 +20961,7 @@ function jx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r
 																		},
 																		className: "px-1 py-0.5 bg-red-50 hover:bg-red-100 text-red-600 rounded text-[8px] font-bold flex items-center gap-0.5 transition-all",
 																		title: "Delete Column",
-																		children: /* @__PURE__ */ u(mx, { className: "h-2.5 w-2.5" })
+																		children: /* @__PURE__ */ u(hx, { className: "h-2.5 w-2.5" })
 																	})
 																]
 															})]
@@ -20960,14 +20990,14 @@ function jx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r
 																					e.stopPropagation(), xe(a.id, t, o, "up");
 																				},
 																				title: "Move Up",
-																				children: /* @__PURE__ */ u(Hb, { className: "h-2.5 w-2.5" })
+																				children: /* @__PURE__ */ u(Ub, { className: "h-2.5 w-2.5" })
 																			}),
 																			/* @__PURE__ */ u("button", {
 																				onClick: (e) => {
 																					e.stopPropagation(), xe(a.id, t, o, "down");
 																				},
 																				title: "Move Down",
-																				children: /* @__PURE__ */ u(Vb, { className: "h-2.5 w-2.5" })
+																				children: /* @__PURE__ */ u(Hb, { className: "h-2.5 w-2.5" })
 																			}),
 																			/* @__PURE__ */ u("button", {
 																				onClick: (t) => {
@@ -20975,7 +21005,7 @@ function jx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r
 																				},
 																				className: "text-red-300 hover:text-red-400",
 																				title: "Delete item",
-																				children: /* @__PURE__ */ u(mx, { className: "h-2.5 w-2.5" })
+																				children: /* @__PURE__ */ u(hx, { className: "h-2.5 w-2.5" })
 																			})
 																		]
 																	}), e.type === "table" ? /* @__PURE__ */ u("div", {
@@ -21021,7 +21051,7 @@ function jx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r
 																										children: e.columnName
 																									}, t)) }) }), /* @__PURE__ */ u("tbody", { children: /* @__PURE__ */ u("tr", {
 																										className: "bg-slate-50/10",
-																										children: t.map((t, r) => /* @__PURE__ */ u(kx, {
+																										children: t.map((t, r) => /* @__PURE__ */ u(Ax, {
 																											blockId: e.id,
 																											colIdx: r,
 																											placeholder: t.placeholder,
@@ -21036,7 +21066,7 @@ function jx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r
 																							})
 																						}, a);
 																					}
-																					return /* @__PURE__ */ u(kx, {
+																					return /* @__PURE__ */ u(Ax, {
 																						blockId: e.id,
 																						colIdx: a,
 																						colSpan: s,
@@ -21069,7 +21099,7 @@ function jx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r
 																			},
 																			alt: "Column graphic"
 																		})
-																	}) : /* @__PURE__ */ u(Ox, {
+																	}) : /* @__PURE__ */ u(kx, {
 																		block: e,
 																		onUpdate: (n) => be(a.id, t, e.id, n),
 																		onSelect: () => r(e.id),
@@ -21132,7 +21162,7 @@ function jx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r
 																				children: e.columnName
 																			}, t)) }) }), /* @__PURE__ */ u("tbody", { children: /* @__PURE__ */ u("tr", {
 																				className: "bg-slate-50/30",
-																				children: e.map((e, n) => /* @__PURE__ */ u(kx, {
+																				children: e.map((e, n) => /* @__PURE__ */ u(Ax, {
 																					blockId: a.id,
 																					colIdx: n,
 																					placeholder: e.placeholder,
@@ -21148,7 +21178,7 @@ function jx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r
 																	})
 																}, i);
 															}
-															return /* @__PURE__ */ u(kx, {
+															return /* @__PURE__ */ u(Ax, {
 																blockId: a.id,
 																colIdx: i,
 																colSpan: s,
@@ -21205,7 +21235,7 @@ function jx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r
 													alt: "Uploaded content graphic"
 												})
 											})
-										}) : /* @__PURE__ */ u(Ox, {
+										}) : /* @__PURE__ */ u(kx, {
 											block: a,
 											onUpdate: (e) => {
 												t((t) => t.map((t) => t.id === a.id ? D(D({}, t), {}, { content: e }) : t));
@@ -21229,7 +21259,7 @@ function jx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r
 }
 //#endregion
 //#region src/components/CanvasToolbar.tsx
-function Mx({ showImportHtml: e = !0, showImportPdf: t = !0, showPreview: n = !0, showExport: r = !0, showExportPdf: i = !0, showClearCanvas: a, customButtonStyles: s, customButtonClassNames: c, customActionComponents: f, handleHtmlImport: p, handlePdfImport: m, setPreviewOpen: h, handleExport: g, handleExportPdf: _, handleClearCanvas: v, zoom: y, setZoom: b, setPanOffset: x, themeColor: S = "#ea580c" }) {
+function Nx({ showImportHtml: e = !0, showImportPdf: t = !0, showPreview: n = !0, showExport: r = !0, showExportPdf: i = !0, showClearCanvas: a, customButtonStyles: s, customButtonClassNames: c, customActionComponents: f, handleHtmlImport: p, handlePdfImport: m, setPreviewOpen: h, handleExport: g, handleExportPdf: _, handleClearCanvas: v, zoom: y, setZoom: b, setPanOffset: x, themeColor: S = "#ea580c" }) {
 	let C = o(null), w = o(null);
 	return /* @__PURE__ */ d("div", {
 		className: "bg-white border-b border-gray-200 px-4 py-2 flex flex-wrap items-center justify-between shadow-xs sticky top-0 z-20 gap-2",
@@ -21247,7 +21277,7 @@ function Mx({ showImportHtml: e = !0, showImportPdf: t = !0, showPreview: n = !0
 					style: s == null ? void 0 : s.importHtml,
 					className: (c == null ? void 0 : c.importHtml) || "inline-flex items-center space-x-1 px-2.5 py-1 border border-gray-200 rounded-lg text-xs font-semibold bg-white hover:bg-slate-50 text-slate-700 transition-colors shadow-2xs cursor-pointer",
 					title: "Import local HTML file",
-					children: [/* @__PURE__ */ u(gx, { className: "h-3.5 w-3.5 text-slate-500" }), /* @__PURE__ */ u("span", { children: "Import HTML" })]
+					children: [/* @__PURE__ */ u(_x, { className: "h-3.5 w-3.5 text-slate-500" }), /* @__PURE__ */ u("span", { children: "Import HTML" })]
 				}), /* @__PURE__ */ u("input", {
 					type: "file",
 					ref: C,
@@ -21266,7 +21296,7 @@ function Mx({ showImportHtml: e = !0, showImportPdf: t = !0, showPreview: n = !0
 					style: s == null ? void 0 : s.importPdf,
 					className: (c == null ? void 0 : c.importPdf) || "inline-flex items-center space-x-1 px-2.5 py-1 border border-gray-200 rounded-lg text-xs font-semibold bg-white hover:bg-slate-50 text-slate-700 transition-colors shadow-2xs cursor-pointer",
 					title: "Import PDF layout structure",
-					children: [/* @__PURE__ */ u(Zb, { className: "h-3.5 w-3.5 text-slate-500" }), /* @__PURE__ */ u("span", { children: "Import PDF" })]
+					children: [/* @__PURE__ */ u(Qb, { className: "h-3.5 w-3.5 text-slate-500" }), /* @__PURE__ */ u("span", { children: "Import PDF" })]
 				}), /* @__PURE__ */ u("input", {
 					type: "file",
 					ref: w,
@@ -21278,26 +21308,26 @@ function Mx({ showImportHtml: e = !0, showImportPdf: t = !0, showPreview: n = !0
 					onClick: () => h(!0),
 					style: s == null ? void 0 : s.preview,
 					className: (c == null ? void 0 : c.preview) || "inline-flex items-center space-x-1 px-2.5 py-1 border border-slate-200 rounded-lg text-xs font-semibold bg-slate-50 text-slate-700 hover:bg-slate-100 transition-colors shadow-2xs cursor-pointer",
-					children: [/* @__PURE__ */ u(Xb, { className: "h-3.5 w-3.5 text-slate-500" }), /* @__PURE__ */ u("span", { children: "Live Preview" })]
+					children: [/* @__PURE__ */ u(Zb, { className: "h-3.5 w-3.5 text-slate-500" }), /* @__PURE__ */ u("span", { children: "Live Preview" })]
 				})),
 				i && (f != null && f.exportPdf ? f.exportPdf({ onClick: _ }) : /* @__PURE__ */ d("button", {
 					onClick: _,
 					style: s == null ? void 0 : s.exportPdf,
 					className: (c == null ? void 0 : c.exportPdf) || "inline-flex items-center space-x-1 px-2.5 py-1 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-xs font-semibold transition-colors shadow-2xs shadow-indigo-600/10 cursor-pointer",
-					children: [/* @__PURE__ */ u(rx, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ u("span", { children: "Download PDF" })]
+					children: [/* @__PURE__ */ u(ix, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ u("span", { children: "Download PDF" })]
 				})),
 				r && (f != null && f.export ? f.export({ onClick: g }) : /* @__PURE__ */ d("button", {
 					onClick: g,
 					style: D({ backgroundColor: S }, s == null ? void 0 : s.export),
 					className: (c == null ? void 0 : c.export) || "inline-flex items-center space-x-1 px-2.5 py-1 text-white rounded-lg text-xs font-semibold transition-colors shadow-2xs cursor-pointer",
-					children: [/* @__PURE__ */ u(Yb, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ u("span", { children: "Export Template" })]
+					children: [/* @__PURE__ */ u(Xb, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ u("span", { children: "Export Template" })]
 				})),
 				a && /* @__PURE__ */ d("button", {
 					onClick: v,
 					style: s == null ? void 0 : s.clearCanvas,
 					className: (c == null ? void 0 : c.clearCanvas) || "inline-flex items-center space-x-1 px-2.5 py-1 text-xs font-semibold border border-red-200 text-red-650 bg-red-50 hover:bg-red-100 rounded-lg transition-colors cursor-pointer",
 					title: "Clear all canvas elements",
-					children: [/* @__PURE__ */ u(mx, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ u("span", { children: "Clear Canvas" })]
+					children: [/* @__PURE__ */ u(hx, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ u("span", { children: "Clear Canvas" })]
 				})
 			]
 		}), /* @__PURE__ */ d("div", {
@@ -21351,7 +21381,7 @@ function Mx({ showImportHtml: e = !0, showImportPdf: t = !0, showPreview: n = !0
 }
 //#endregion
 //#region src/components/PreviewModal.tsx
-function Nx({ previewOpen: e, setPreviewOpen: t, generateExportHtml: n }) {
+function Px({ previewOpen: e, setPreviewOpen: t, generateExportHtml: n }) {
 	return e ? /* @__PURE__ */ u("div", {
 		className: "fixed inset-0 bg-slate-950/65 backdrop-blur-xs flex items-center justify-center z-50 p-6",
 		children: /* @__PURE__ */ d("div", {
@@ -21361,14 +21391,14 @@ function Nx({ previewOpen: e, setPreviewOpen: t, generateExportHtml: n }) {
 					className: "bg-slate-50 border-b border-gray-200 px-6 py-4 flex items-center justify-between",
 					children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ d("h3", {
 						className: "text-sm font-bold text-slate-800 flex items-center space-x-2",
-						children: [/* @__PURE__ */ u(Xb, { className: "h-4 w-4 text-slate-655" }), /* @__PURE__ */ u("span", { children: "HTML Document Render Output" })]
+						children: [/* @__PURE__ */ u(Zb, { className: "h-4 w-4 text-slate-655" }), /* @__PURE__ */ u("span", { children: "HTML Document Render Output" })]
 					}), /* @__PURE__ */ u("p", {
 						className: "text-[10px] text-slate-400 mt-0.5",
 						children: "Sandboxed iframe preview of final template markup"
 					})] }), /* @__PURE__ */ u("button", {
 						onClick: () => t(!1),
 						className: "p-1.5 bg-slate-100 hover:bg-slate-200 text-slate-500 hover:text-slate-800 rounded-lg transition-colors",
-						children: /* @__PURE__ */ u(_x, { className: "h-4 w-4" })
+						children: /* @__PURE__ */ u(vx, { className: "h-4 w-4" })
 					})]
 				}),
 				/* @__PURE__ */ u("div", {
@@ -21402,7 +21432,7 @@ function Nx({ previewOpen: e, setPreviewOpen: t, generateExportHtml: n }) {
 }
 //#endregion
 //#region src/components/SelectionBubble.tsx
-function Px({ bubbleCoords: e, applySelectionFormat: t }) {
+function Fx({ bubbleCoords: e, applySelectionFormat: t }) {
 	return e ? /* @__PURE__ */ d("div", {
 		className: "fixed bg-slate-900 border border-slate-800 text-white rounded-xl shadow-xl py-1 px-1.5 flex items-center space-x-1.5 z-50 select-none -translate-x-1/2",
 		style: {
@@ -21513,7 +21543,7 @@ function Px({ bubbleCoords: e, applySelectionFormat: t }) {
 //#endregion
 //#region src/App.tsx
 Hu.workerSrc = "https://cdn.jsdelivr.net/npm/pdfjs-dist@6.1.200/build/pdf.worker.min.mjs";
-var Fx = (e) => {
+var Ix = (e) => {
 	let t = [];
 	return e.forEach((e) => {
 		e.style.sameRow && t.length > 0 ? t[t.length - 1].blocks.push(e) : t.push({
@@ -21521,9 +21551,9 @@ var Fx = (e) => {
 			blocks: [e]
 		});
 	}), t;
-}, Ix = (e) => e ? e.replace(/contenteditable="[^"]*"/g, "").replace(/class="[^"]*"/g, "").replace(/data-placeholder="[^"]*"/g, "").replace(/&nbsp;/g, " ").trim() : "";
-function Lx({ tableSchemas: e, placeholders: t, defaultLogo: n, defaultBanner: r, headerTitle: i = "HTML Template Builder", headerSubtitle: o = "Design and export templates dynamically", headerLogo: c, typographySizes: l, typographyWeights: f, typographyFonts: p, templatingLanguage: m = "csharp", loopSyntax: h = "foreach", onChange: g, onExport: _, onExportPdf: v, getHTMLOutput: y, initialBlocks: x, defaultStyles: S, showImportHtml: C = !0, showImportPdf: w = !0, showClearCanvas: T = !0, showPreview: E = !0, showExport: ee = !0, showExportPdf: O = !0, showHeader: k = !0, sidebarPosition: A = "left", themeColor: ne, primaryColor: re, isTablesLoading: ie, tablesLoading: ae, isPlaceholdersLoading: oe, placeholdersLoading: se, customButtonStyles: ce, customButtonClassNames: le, customActionComponents: ue } = {}) {
-	let de = ne || re || "#ea580c", { zoom: fe, setZoom: pe, panOffset: j, setPanOffset: me, spacePressed: he, canvasHeight: ge, setCanvasHeight: _e, viewportRef: ve, canvasContainerRef: ye, contentRef: be, handleMouseDown: xe, handleMouseMove: Se, handleMouseUp: Ce } = Eb(), { customTableName: we, setCustomTableName: Te, customLoopStart: Ee, setCustomLoopStart: De, customLoopEnd: Oe, setCustomLoopEnd: M, newColName: N, setNewColName: ke, newColPlaceholder: Ae, setNewColPlaceholder: je, bubbleCoords: Me, setBubbleCoords: Ne, schemas: Pe, isParsing: Fe, setIsParsing: Ie, parseStatusText: Le, setParseStatusText: Re, parseError: ze, setParseError: Be, draggedSidebarItem: Ve, setDraggedSidebarItem: P, dragOverIndex: F, setDragOverIndex: He, newImgTypeName: Ue, setNewImgTypeName: We, customImageTypes: Ge, searchPlaceholder: Ke, setSearchPlaceholder: I, handleAddCustomTable: qe, handleAddCustomImageType: Je, toggleSchemaColumn: Ye, applySelectionFormat: Xe, setSavedRange: Ze } = Db({ tableSchemas: e }), { blocks: Qe, setBlocks: $e, selectedBlockId: et, setSelectedBlockId: tt, getSelectedBlock: L, createTextBlock: R, createTableBlock: nt, createImageBlock: rt, createLayoutBlock: it, addColumnToLayout: at, deleteColumnFromLayout: ot, mergeColumns: st, updateColumnStyle: ct, updateColumnWidth: lt, handleDeleteBlock: ut, handleDuplicateBlock: dt, handleMoveBlockUp: ft, handleMoveBlockDown: z, updateSelectedStyle: pt, updateSelectedImageInfo: mt, handleRemoveTableColumn: ht, handleAddTableColumn: gt, handleUpdateTableColumn: _t, handleReorderTableColumn: vt, handleAddTableRow: yt, handleRemoveTableRow: bt } = Tb({
+}, Lx = (e) => e ? e.replace(/contenteditable="[^"]*"/g, "").replace(/class="[^"]*"/g, "").replace(/data-placeholder="[^"]*"/g, "").replace(/&nbsp;/g, " ").trim() : "";
+function Rx({ tableSchemas: e, placeholders: t, defaultLogo: n, defaultBanner: r, headerTitle: i = "HTML Template Builder", headerSubtitle: o = "Design and export templates dynamically", headerLogo: c, typographySizes: l, typographyWeights: f, typographyFonts: p, templatingLanguage: m = "csharp", loopSyntax: h = "foreach", onChange: g, onExport: _, onExportPdf: v, getHTMLOutput: y, initialBlocks: x, defaultStyles: S, showImportHtml: C = !0, showImportPdf: w = !0, showClearCanvas: T = !0, showPreview: E = !0, showExport: ee = !0, showExportPdf: O = !0, showHeader: k = !0, sidebarPosition: A = "left", themeColor: ne, primaryColor: re, isTablesLoading: ie, tablesLoading: ae, isPlaceholdersLoading: oe, placeholdersLoading: se, customButtonStyles: ce, customButtonClassNames: le, customActionComponents: ue } = {}) {
+	let de = ne || re || "#ea580c", { zoom: fe, setZoom: pe, panOffset: j, setPanOffset: me, spacePressed: he, canvasHeight: ge, setCanvasHeight: _e, viewportRef: ve, canvasContainerRef: ye, contentRef: be, handleMouseDown: xe, handleMouseMove: Se, handleMouseUp: Ce } = Db(), { customTableName: we, setCustomTableName: Te, customLoopStart: Ee, setCustomLoopStart: De, customLoopEnd: Oe, setCustomLoopEnd: M, newColName: N, setNewColName: ke, newColPlaceholder: Ae, setNewColPlaceholder: je, bubbleCoords: Me, setBubbleCoords: Ne, schemas: Pe, isParsing: Fe, setIsParsing: Ie, parseStatusText: Le, setParseStatusText: Re, parseError: ze, setParseError: Be, draggedSidebarItem: Ve, setDraggedSidebarItem: P, dragOverIndex: F, setDragOverIndex: He, newImgTypeName: Ue, setNewImgTypeName: We, customImageTypes: Ge, searchPlaceholder: Ke, setSearchPlaceholder: I, handleAddCustomTable: qe, handleAddCustomImageType: Je, toggleSchemaColumn: Ye, applySelectionFormat: Xe, setSavedRange: Ze } = Ob({ tableSchemas: e }), { blocks: Qe, setBlocks: $e, selectedBlockId: et, setSelectedBlockId: tt, getSelectedBlock: L, createTextBlock: R, createTableBlock: nt, createImageBlock: rt, createLayoutBlock: it, addColumnToLayout: at, deleteColumnFromLayout: ot, mergeColumns: st, updateColumnStyle: ct, updateColumnWidth: lt, handleDeleteBlock: ut, handleDuplicateBlock: dt, handleMoveBlockUp: ft, handleMoveBlockDown: z, updateSelectedStyle: pt, updateSelectedImageInfo: mt, handleRemoveTableColumn: ht, handleAddTableColumn: gt, handleUpdateTableColumn: _t, handleReorderTableColumn: vt, handleAddTableRow: yt, handleRemoveTableRow: bt } = Eb({
 		initialBlocks: x,
 		defaultStyles: S,
 		defaultLogo: n,
@@ -21682,7 +21712,7 @@ function Lx({ tableSchemas: e, placeholders: t, defaultLogo: n, defaultBanner: r
 		r.onload = (t) => {
 			try {
 				var n;
-				let e = Cb((n = t.target) == null ? void 0 : n.result);
+				let e = wb((n = t.target) == null ? void 0 : n.result);
 				e.length > 0 && $e(e);
 			} catch (e) {
 				console.error(e), Be(e.message || "Failed to parse HTML");
@@ -21698,7 +21728,7 @@ function Lx({ tableSchemas: e, placeholders: t, defaultLogo: n, defaultBanner: r
 		let r = new FileReader();
 		r.onload = b(function* () {
 			try {
-				let e = r.result, t = yield wb(e, te);
+				let e = r.result, t = yield Tb(e, te);
 				t.length > 0 && $e((e) => [...e, ...t]);
 			} catch (e) {
 				console.error(e), Be(e.message || "Failed to read PDF");
@@ -21737,7 +21767,7 @@ function Lx({ tableSchemas: e, placeholders: t, defaultLogo: n, defaultBanner: r
 			let a = t.columnName, o = n && Array.isArray(n[a]) && n[a].length > 0 ? n[a] : [{}];
 			if (e || o.length > 1 || !t.loop) o.forEach((e) => {
 				i += "          <tr>\n", r.forEach((t) => {
-					let n = Ix(t.placeholder);
+					let n = Lx(t.placeholder);
 					typeof e == "object" && e && Object.keys(e).forEach((t) => {
 						let r = RegExp(`\\{\\{(item\\.|package\\.)?${t}\\}\\}`, "g");
 						n = n.replace(r, e[t]);
@@ -21755,7 +21785,7 @@ function Lx({ tableSchemas: e, placeholders: t, defaultLogo: n, defaultBanner: r
 			}
 			return i += "        </tbody>\n", i += "      </table>", i;
 		};
-		return Fx(Qe).forEach((r) => {
+		return Ix(Qe).forEach((r) => {
 			let i = r.blocks.length > 1, a = r.blocks.some((e) => e.type === "table");
 			if (i) {
 				var o;
@@ -21770,23 +21800,26 @@ function Lx({ tableSchemas: e, placeholders: t, defaultLogo: n, defaultBanner: r
 					let o = i.columns.filter((e) => e.enabled !== !1);
 					t += `  <div class="block-container table-container" style="${u}">\n`;
 					let s = a;
-					a.includes("font-size") || (s += " font-size: 10px;"), a.includes("color") || (s += " color: #334155;"), a.includes("text-align") || (s += " text-align: left;"), a.includes("font-weight") || (s += " font-weight: 400;"), t += `    <table style="${s}">\n`, t += "      <thead>\n", t += "        <tr>\n", t += o.map((e) => {
-						let t = e.columnName || "";
-						return `          <th${e.colspan && e.colspan > 1 ? ` colspan="${e.colspan}"` : ""}>${t}</th>\n`;
-					}).join(""), t += "        </tr>\n", t += "      </thead>\n", t += "      <tbody>\n";
+					a.includes("font-size") || (s += " font-size: 10px;"), a.includes("color") || (s += " color: #334155;"), a.includes("text-align") || (s += " text-align: left;"), a.includes("font-weight") || (s += " font-weight: 400;"), t += `    <table style="${s}">\n`, t += "      <thead>\n", t += "        <tr>\n", t += o.map((e) => `          <th>${e.columnName || ""}</th>\n`).join(""), t += "        </tr>\n", t += "      </thead>\n", t += "      <tbody>\n";
 					let c = (t) => {
-						let r = "        <tr>\n";
-						return o.forEach((a) => {
-							let o = a.colspan && a.colspan > 1 ? ` colspan="${a.colspan}"` : "";
-							if (a.loop && a.columns && a.columns.length > 0) r += `          <td${o}>\n${n(a, t)}\n          </td>\n`;
+						let r = "        <tr>\n", a = 0;
+						return o.forEach((o) => {
+							if (a > 0) {
+								a--;
+								return;
+							}
+							let s = t && t[`${o.columnName}_colspan`] || 1;
+							s > 1 && (a = s - 1);
+							let c = s > 1 ? ` colspan="${s}"` : "";
+							if (o.loop && o.columns && o.columns.length > 0) r += `          <td${c}>\n${n(o, t)}\n          </td>\n`;
 							else {
-								let n = Ix(a.placeholder);
-								(e || i.mockRows && i.mockRows.length > 1) && (t && typeof t == "object" && Object.keys(t).forEach((e) => {
+								let n = Lx(o.placeholder);
+								t && typeof t == "object" && t[o.columnName] !== void 0 ? n = Lx(String(t[o.columnName])) : t && typeof t == "object" && Object.keys(t).forEach((e) => {
 									n.includes(`{{${e}}}`) && (n = n.replace(RegExp(`\\{\\{${e}\\}\\}`, "g"), t[e])), n.includes(`{{item.${e}}}`) && (n = n.replace(RegExp(`\\{\\{item\\.${e}\\}\\}`, "g"), t[e])), n.includes(`{{package.${e}}}`) && (n = n.replace(RegExp(`\\{\\{package\\.${e}\\}\\}`, "g"), t[e]));
-								}), Object.keys(Mt).forEach((e) => {
+								}), (e || i.mockRows && i.mockRows.length > 1) && (Object.keys(Mt).forEach((e) => {
 									let t = Mt[e];
 									n.includes(`{{${e}}}`) && (n = n.replace(RegExp(`\\{\\{${e}\\}\\}`, "g"), t));
-								}), e && (n = n.replace(/\{\{[^}]+\}\}/g, ""))), r += `          <td${o}>${n}</td>\n`;
+								}), e && (n = n.replace(/\{\{[^}]+\}\}/g, ""))), r += `          <td${c}>${n}</td>\n`;
 							}
 						}), r += "        </tr>\n", r;
 					}, l = i.mockRows && i.mockRows.length > 0 ? i.mockRows : [{}];
@@ -21795,9 +21828,18 @@ function Lx({ tableSchemas: e, placeholders: t, defaultLogo: n, defaultBanner: r
 					});
 					else {
 						let e = i.tableName === "package" ? "shipment.packages" : i.tableName === "article" ? "package.articles" : i.tableName, r = Pt(e);
-						jt ? t += `        <!-- ${r.start} --><tr>\n` : t += `        ${r.start}<tr>\n`, o.forEach((e) => {
-							let r = e.colspan && e.colspan > 1 ? ` colspan="${e.colspan}"` : "";
-							e.loop && e.columns && e.columns.length > 0 ? t += `          <td${r}>\n${n(e)}\n          </td>\n` : t += `          <td${r}>${e.placeholder}</td>\n`;
+						jt ? t += `        <!-- ${r.start} --><tr>\n` : t += `        ${r.start}<tr>\n`;
+						let a = 0;
+						o.forEach((e) => {
+							var r;
+							if (a > 0) {
+								a--;
+								return;
+							}
+							let o = ((r = i.mockRows) == null || (r = r[0]) == null ? void 0 : r[`${e.columnName}_colspan`]) || 1;
+							o > 1 && (a = o - 1);
+							let s = o > 1 ? ` colspan="${o}"` : "";
+							e.loop && e.columns && e.columns.length > 0 ? t += `          <td${s}>\n${n(e)}\n          </td>\n` : t += `          <td${s}>${e.placeholder}</td>\n`;
 						}), jt ? t += `        </tr><!-- ${r.end} -->\n` : t += `        </tr>${r.end}\n`;
 					}
 					t += "      </tbody>\n", t += "    </table>\n", t += "  </div>\n";
@@ -21825,7 +21867,7 @@ function Lx({ tableSchemas: e, placeholders: t, defaultLogo: n, defaultBanner: r
 								}), t += "          </tr></thead>\n", t += "          <tbody><tr>\n", a.forEach((r) => {
 									if (r.loop || Array.isArray(r.columns)) t += `            <td style="border: 1px solid #e2e8f0; padding: 4px 6px; font-size: 10px;">\n${n(r)}\n            </td>\n`;
 									else {
-										let n = Ix(r.placeholder);
+										let n = Lx(r.placeholder);
 										(e || Tt) && (Object.keys(Mt).forEach((e) => {
 											n = n.replace(RegExp(`\\{\\{${e}\\}\\}`, "g"), Mt[e]);
 										}), e && (n = n.replace(/\{\{[^}]+\}\}/g, ""))), t += `            <td style="border: 1px solid #e2e8f0; padding: 6px 8px; font-size: 10px; color: #475569;">${n}</td>\n`;
@@ -21844,7 +21886,7 @@ function Lx({ tableSchemas: e, placeholders: t, defaultLogo: n, defaultBanner: r
 									"h5",
 									"h6"
 								].includes(r.type) ? n = r.type : r.type === "title" ? n = "h1" : r.type === "subtitle" ? n = "h2" : r.type === "caption" && (n = "span");
-								let i = yb(r.style), a = Ix(r.content);
+								let i = yb(r.style), a = Lx(r.content);
 								(e || Tt) && (Object.keys(Mt).forEach((e) => {
 									a = a.replace(RegExp(`\\{\\{${e}\\}\\}`, "g"), Mt[e]);
 								}), e && (a = a.replace(/\{\{[^}]+\}\}/g, ""))), t += `      <div class="block-container" style="width: 100%; margin-bottom: ${r.style.marginBottom || "8px"}; text-align: ${r.style.textAlign || "left"};">\n`, t += `        <${n} style="${i}">${a}</${n}>\n`, t += "      </div>\n";
@@ -21861,7 +21903,7 @@ function Lx({ tableSchemas: e, placeholders: t, defaultLogo: n, defaultBanner: r
 						"h5",
 						"h6"
 					].includes(r.type) ? n = r.type : r.type === "title" ? n = "h1" : r.type === "subtitle" ? n = "h2" : r.type === "caption" && (n = "span");
-					let i = Ix(r.content);
+					let i = Lx(r.content);
 					(e || Tt) && (Object.keys(Mt).forEach((e) => {
 						let t = Mt[e];
 						i = i.replace(RegExp(`\\{\\{${e}\\}\\}`, "g"), t);
@@ -21929,7 +21971,7 @@ function Lx({ tableSchemas: e, placeholders: t, defaultLogo: n, defaultBanner: r
 	return /* @__PURE__ */ d("div", {
 		className: "reth-editor h-screen max-h-screen bg-slate-50 flex flex-col font-sans overflow-hidden",
 		children: [
-			k && /* @__PURE__ */ u(vx, {
+			k && /* @__PURE__ */ u(yx, {
 				headerLogo: c,
 				headerTitle: i,
 				headerSubtitle: o,
@@ -21942,7 +21984,7 @@ function Lx({ tableSchemas: e, placeholders: t, defaultLogo: n, defaultBanner: r
 				className: "flex-1 min-h-0 h-full grid grid-cols-1 lg:grid-cols-12 overflow-hidden",
 				children: [/* @__PURE__ */ d("main", {
 					className: `w-full lg:col-span-8 h-full min-h-0 flex flex-col bg-slate-100 border-b lg:border-b-0 ${A === "left" ? "lg:border-l lg:order-2" : "lg:border-r lg:order-1"} border-gray-200 overflow-hidden relative`,
-					children: [/* @__PURE__ */ u(Mx, {
+					children: [/* @__PURE__ */ u(Nx, {
 						showImportHtml: C,
 						showImportPdf: w,
 						showPreview: E,
@@ -21962,7 +22004,7 @@ function Lx({ tableSchemas: e, placeholders: t, defaultLogo: n, defaultBanner: r
 						setZoom: pe,
 						setPanOffset: me,
 						themeColor: de
-					}), /* @__PURE__ */ u(jx, {
+					}), /* @__PURE__ */ u(Mx, {
 						blocks: Qe,
 						setBlocks: $e,
 						selectedBlockId: et,
@@ -22032,7 +22074,7 @@ function Lx({ tableSchemas: e, placeholders: t, defaultLogo: n, defaultBanner: r
 						handleTextDrop: zt,
 						themeColor: de
 					})]
-				}), /* @__PURE__ */ u(Ex, {
+				}), /* @__PURE__ */ u(Dx, {
 					activeTab: xt,
 					setActiveTab: St,
 					themeColor: de,
@@ -22096,11 +22138,11 @@ function Lx({ tableSchemas: e, placeholders: t, defaultLogo: n, defaultBanner: r
 					sidebarPosition: A
 				})]
 			}),
-			/* @__PURE__ */ u(Px, {
+			/* @__PURE__ */ u(Fx, {
 				bubbleCoords: Me,
 				applySelectionFormat: Xe
 			}),
-			/* @__PURE__ */ u(Nx, {
+			/* @__PURE__ */ u(Px, {
 				previewOpen: Ct,
 				setPreviewOpen: wt,
 				generateExportHtml: Ft
@@ -22110,14 +22152,14 @@ function Lx({ tableSchemas: e, placeholders: t, defaultLogo: n, defaultBanner: r
 }
 //#endregion
 //#region src/index.ts
-var Rx = Lx, zx = /* @__PURE__ */ new WeakMap();
-function Bx(t, n) {
-	let r = zx.get(t);
-	return r || (r = c(t), zx.set(t, r)), r.render(e.createElement(Lx, n)), r;
+var zx = Rx, Bx = /* @__PURE__ */ new WeakMap();
+function Vx(t, n) {
+	let r = Bx.get(t);
+	return r || (r = c(t), Bx.set(t, r)), r.render(e.createElement(Rx, n)), r;
 }
-function Vx(e) {
-	let t = zx.get(e);
-	return t ? (t.unmount(), zx.delete(e), !0) : !1;
+function Hx(e) {
+	let t = Bx.get(e);
+	return t ? (t.unmount(), Bx.delete(e), !0) : !1;
 }
 //#endregion
-export { Lx as HtmlEditor, Rx as default, Bx as mountHtmlEditor, Vx as unmountHtmlEditor };
+export { Rx as HtmlEditor, zx as default, Vx as mountHtmlEditor, Hx as unmountHtmlEditor };