@1urso/generic-editor 0.1.38 → 0.1.39

package/dist/generic-editor.js

@@ -8644,7 +8644,13 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 		history: [[]],
 		historyIndex: 0,
 		clipboard: [],
-		gridSize: 0
+		gridSize: 0,
+		zoom: 1,
+		pan: {
+			x: 0,
+			y: 0
+		},
+		snapLines: []
 	});
 	React.useEffect(() => {
 		j.availableFonts.forEach((n) => {
@@ -8678,6 +8684,21 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 			gridSize: n
 		}));
 	}, []), z = React.useCallback((n) => {
+		M((_) => ({
+			..._,
+			zoom: n
+		}));
+	}, []), B = React.useCallback((n) => {
+		M((_) => ({
+			..._,
+			pan: n
+		}));
+	}, []), H = React.useCallback((n) => {
+		M((_) => ({
+			..._,
+			snapLines: n
+		}));
+	}, []), U = React.useCallback((n) => {
 		M((_) => {
 			let E = n.elements || _.elements;
 			return {
@@ -8692,7 +8713,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				clipboard: []
 			};
 		});
-	}, []), B = React.useCallback(() => {
+	}, []), W = React.useCallback(() => {
 		M((n) => {
 			if (n.historyIndex > 0) {
 				let _ = n.historyIndex - 1;
@@ -8705,7 +8726,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 			}
 			return n;
 		});
-	}, []), H = React.useCallback(() => {
+	}, []), G = React.useCallback(() => {
 		M((n) => {
 			if (n.historyIndex < n.history.length - 1) {
 				let _ = n.historyIndex + 1;
@@ -8718,7 +8739,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 			}
 			return n;
 		});
-	}, []), U = React.useCallback(() => {
+	}, []), Z = React.useCallback(() => {
 		M((n) => {
 			if (n.selectedElementIds.length > 0) {
 				let _ = n.elements.filter((_) => n.selectedElementIds.includes(_.id));
@@ -8729,7 +8750,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 			}
 			return n;
 		});
-	}, []), W = React.useCallback(() => {
+	}, []), Lj = React.useCallback(() => {
 		M((n) => {
 			if (n.clipboard.length > 0) {
 				let _ = n.clipboard.map((n) => ({
@@ -8748,7 +8769,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 			}
 			return n;
 		});
-	}, []), G = React.useCallback((n) => {
+	}, []), Rj = React.useCallback((n) => {
 		let _ = {};
 		n.type === "box" && (_.backgroundColor = "var(--gray-4)");
 		let E = {
@@ -8773,7 +8794,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				selectedElementIds: [E.id]
 			};
 		});
-	}, []), Z = React.useCallback((n) => {
+	}, []), zj = React.useCallback((n) => {
 		M((_) => {
 			let E = _.elements.filter((_) => _.id !== n), O = _.history.slice(0, _.historyIndex + 1);
 			return O.push(E), {
@@ -8784,7 +8805,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: O.length - 1
 			};
 		});
-	}, []), Lj = React.useCallback(() => {
+	}, []), Bj = React.useCallback(() => {
 		M((n) => {
 			if (n.selectedElementIds.length === 0) return n;
 			let _ = n.elements.filter((_) => !n.selectedElementIds.includes(_.id)), E = n.history.slice(0, n.historyIndex + 1);
@@ -8796,7 +8817,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: E.length - 1
 			};
 		});
-	}, []), Rj = React.useCallback((n, _ = !1) => {
+	}, []), Hj = React.useCallback((n, _ = !1) => {
 		M((E) => {
 			if (n === null) return {
 				...E,
@@ -8813,12 +8834,12 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				selectedElementIds: [n]
 			};
 		});
-	}, []), zj = React.useCallback((n) => {
+	}, []), Uj = React.useCallback((n) => {
 		M((_) => ({
 			..._,
 			selectedElementIds: n
 		}));
-	}, []), Bj = React.useCallback((n, _) => {
+	}, []), Wj = React.useCallback((n, _) => {
 		M((E) => {
 			let O = [...E.elements], A = O[n];
 			O.splice(n, 1), O.splice(_, 0, A);
@@ -8830,7 +8851,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: j.length - 1
 			};
 		});
-	}, []), Hj = React.useCallback((n, _, E = !0) => {
+	}, []), Gj = React.useCallback((n, _, E = !0) => {
 		M((O) => {
 			let A = O.elements.map((E) => E.id === n ? {
 				...E,
@@ -8843,7 +8864,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: M
 			};
 		});
-	}, []), Uj = React.useCallback((n, _ = !0) => {
+	}, []), qj = React.useCallback((n, _ = !0) => {
 		M((E) => {
 			let O = [...E.elements], A = [], j = /* @__PURE__ */ new Set();
 			n.forEach(({ id: n, changes: _ }) => {
@@ -8897,7 +8918,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: P
 			};
 		});
-	}, []), Wj = React.useCallback((n) => {
+	}, []), Jj = React.useCallback((n) => {
 		M((_) => {
 			let E = _.elements.filter((_) => n.includes(_.id));
 			if (E.length === 0) return _;
@@ -8925,7 +8946,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: z.length - 1
 			};
 		});
-	}, []), Gj = React.useCallback((n) => {
+	}, []), Yj = React.useCallback((n) => {
 		M((_) => {
 			let E = _.elements.find((_) => _.id === n);
 			if (!E || E.type !== "group") return _;
@@ -8941,7 +8962,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: j.length - 1
 			};
 		});
-	}, []), qj = React.useCallback((n, _) => {
+	}, []), Xj = React.useCallback((n, _) => {
 		M((E) => {
 			let O = E.elements.map((E) => E.id === n ? {
 				...E,
@@ -8952,7 +8973,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				elements: O
 			};
 		});
-	}, []), Jj = React.useCallback((n, _) => {
+	}, []), Zj = React.useCallback((n, _) => {
 		if (!n.find((n) => n.id === _ && n.type === "group")) return n;
 		let E = n.filter((n) => n.groupId === _);
 		if (E.length === 0) return n;
@@ -8964,7 +8985,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 			width: j - O,
 			height: M - A
 		} : n);
-	}, []), Yj = React.useCallback((n, _) => {
+	}, []), Qj = React.useCallback((n, _) => {
 		M((E) => {
 			let O = E.elements.find((_) => _.id === n), A = E.elements.find((n) => n.id === _ && n.type === "group");
 			if (!O || !A) return E;
@@ -8972,7 +8993,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				...E,
 				groupId: _
 			} : E);
-			j = Jj(j, _);
+			j = Zj(j, _);
 			let M = E.history.slice(0, E.historyIndex + 1);
 			return M.push(j), {
 				...E,
@@ -8981,7 +9002,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: M.length - 1
 			};
 		});
-	}, [Jj]), Xj = React.useCallback((n) => {
+	}, [Zj]), $j = React.useCallback((n) => {
 		M((_) => {
 			let E = _.elements.find((_) => _.id === n);
 			if (!E || !E.groupId) return _;
@@ -8989,7 +9010,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				..._,
 				groupId: void 0
 			} : _);
-			A = Jj(A, O);
+			A = Zj(A, O);
 			let j = _.history.slice(0, _.historyIndex + 1);
 			return j.push(A), {
 				..._,
@@ -8998,7 +9019,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: j.length - 1
 			};
 		});
-	}, [Jj]), Zj = React.useCallback((n, _, E) => {
+	}, [Zj]), eM = React.useCallback((n, _, E) => {
 		M((O) => {
 			let A = O.elements.find((_) => _.id === n && _.type === "group");
 			if (!A) return O;
@@ -9027,13 +9048,13 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: B.length - 1
 			};
 		});
-	}, []), Qj = React.useCallback((n, _) => {
+	}, []), tM = React.useCallback((n, _) => {
 		M((E) => ({
 			...E,
 			mockData: n,
 			singleMockData: _
 		}));
-	}, []), $j = React.useCallback((n) => {
+	}, []), nM = React.useCallback((n) => {
 		M((_) => ({
 			..._,
 			listSettings: {
@@ -9041,36 +9062,36 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				...n
 			}
 		}));
-	}, []), eM = React.useMemo(() => ({
+	}, []), rM = React.useMemo(() => ({
 		state: j,
-		addElement: G,
-		removeElement: Z,
-		removeSelected: Lj,
-		selectElement: Rj,
-		setSelectedElements: zj,
-		moveElement: Bj,
-		updateElement: Hj,
-		updateElements: Uj,
-		groupElements: Wj,
-		ungroupElements: Gj,
-		renameElement: qj,
-		addToGroup: Yj,
-		removeFromGroup: Xj,
-		resizeGroup: Zj,
-		setMockData: Qj,
-		updateListSettings: $j,
+		addElement: Rj,
+		removeElement: zj,
+		removeSelected: Bj,
+		selectElement: Hj,
+		setSelectedElements: Uj,
+		moveElement: Wj,
+		updateElement: Gj,
+		updateElements: qj,
+		groupElements: Jj,
+		ungroupElements: Yj,
+		renameElement: Xj,
+		addToGroup: Qj,
+		removeFromGroup: $j,
+		resizeGroup: eM,
+		setMockData: tM,
+		updateListSettings: nM,
 		setCanvasHeight: N,
-		loadState: z,
-		undo: B,
-		redo: H,
-		copy: U,
-		paste: W,
-		setGridSize: P
+		loadState: U,
+		undo: W,
+		redo: G,
+		copy: Z,
+		paste: Lj,
+		setGridSize: P,
+		setZoom: z,
+		setPan: B,
+		setSnapLines: H
 	}), [
 		j,
-		G,
-		Z,
-		Lj,
 		Rj,
 		zj,
 		Bj,
@@ -9079,21 +9100,27 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 		Wj,
 		Gj,
 		qj,
+		Jj,
 		Yj,
 		Xj,
-		Zj,
 		Qj,
 		$j,
+		eM,
+		tM,
+		nM,
 		N,
-		z,
-		B,
-		H,
 		U,
 		W,
-		P
+		G,
+		Z,
+		Lj,
+		P,
+		z,
+		B,
+		H
 	]);
 	return /* @__PURE__ */ jsx(EditorContext.Provider, {
-		value: eM,
+		value: rM,
 		children: n
 	});
 }, useEditor = () => {
@@ -11838,55 +11865,55 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		}) })] })
 	] });
 }, DraggableElement = React.memo(({ element: n, isSelected: _ }) => {
-	let { selectElement: E, updateElement: O, updateElements: A, state: j, resizeGroup: M } = useEditor(), [N, P] = useState(!1), [z, B] = useState(!1), H = useRef({
+	let { selectElement: E, updateElement: O, updateElements: A, state: j, resizeGroup: M, setSnapLines: N } = useEditor(), [P, z] = useState(!1), [B, H] = useState(!1), U = useRef({
 		x: 0,
 		y: 0
-	}), U = useRef({}), G = useRef(!1), Z = useRef(!1), Lj = useRef(0), Rj = useRef(0), zj = useRef({
+	}), G = useRef({}), Z = useRef(!1), Lj = useRef(!1), Rj = useRef(0), zj = useRef(0), Hj = useRef({
 		x: 0,
 		y: 0
-	}), Hj = useRef(!1), Uj = j.canvasHeight || 150, Wj = j.isList ? j.mockData.length > 0 ? j.mockData[0] : null : j.singleMockData, Gj = n.content, Jj = {};
-	if (Wj) {
-		if (n.type === "text") Gj = Gj.replace(/\{\{(.*?)\}\}/g, (_, E) => {
-			let O = Wj[E.trim()];
+	}), Uj = useRef(!1), Wj = j.canvasHeight || 150, Gj = j.isList ? j.mockData.length > 0 ? j.mockData[0] : null : j.singleMockData, Jj = n.content, Yj = {};
+	if (Gj) {
+		if (n.type === "text") Jj = Jj.replace(/\{\{(.*?)\}\}/g, (_, E) => {
+			let O = Gj[E.trim()];
 			return O == null ? _ : n.formatting ? formatValue(O, n.formatting) : String(O);
 		});
 		else if (n.type === "image") if (n.dataBinding) {
-			let _ = Wj[n.dataBinding];
-			_ != null && (Gj = String(_));
-		} else Gj = Gj.replace(/\{\{(.*?)\}\}/g, (n, _) => {
-			let E = Wj[_.trim()];
+			let _ = Gj[n.dataBinding];
+			_ != null && (Jj = String(_));
+		} else Jj = Jj.replace(/\{\{(.*?)\}\}/g, (n, _) => {
+			let E = Gj[_.trim()];
 			return E == null ? n : String(E);
 		});
 		n.styleBindings && Object.entries(n.styleBindings).forEach(([n, _]) => {
-			let E = Wj[_];
-			E != null && (Jj = {
-				...Jj,
+			let E = Gj[_];
+			E != null && (Yj = {
+				...Yj,
 				[n]: String(E)
 			});
 		}), n.conditions && n.conditions.forEach((n) => {
-			let _ = Wj[n.property];
-			checkCondition(_, n.operator, n.value) && (Jj = {
-				...Jj,
+			let _ = Gj[n.property];
+			checkCondition(_, n.operator, n.value) && (Yj = {
+				...Yj,
 				...n.style
 			});
 		});
 	}
-	let Yj = Jj.display === "none";
-	if (Yj && _) {
-		let { display: n, ..._ } = Jj;
-		Jj = _;
+	let Xj = Yj.display === "none";
+	if (Xj && _) {
+		let { display: n, ..._ } = Yj;
+		Yj = _;
 	}
-	let Xj = (_) => {
-		_.stopPropagation(), !G.current && !Z.current && !N && (_.shiftKey ? E(n.id, !0) : E(n.id, !1));
-	}, Zj = (O) => {
+	let Zj = (_) => {
+		_.stopPropagation(), !Z.current && !Lj.current && !P && (_.shiftKey ? E(n.id, !0) : E(n.id, !1));
+	}, Qj = (O) => {
 		if (O.button !== 0) return;
 		O.stopPropagation();
 		let A = O.shiftKey;
-		if (G.current = !1, Z.current = !1, n.groupId && !_) {
+		if (Z.current = !1, Lj.current = !1, n.groupId && !_) {
 			E(n.groupId, A);
 			return;
 		}
-		_ || (E(n.id, A), Z.current = !0), P(!0), H.current = {
+		_ || (E(n.id, A), Lj.current = !0), z(!0), U.current = {
 			x: O.clientX,
 			y: O.clientY
 		};
@@ -11898,55 +11925,90 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 				x: n.x,
 				y: n.y
 			});
-		}), U.current = N;
-	}, Qj = (_) => {
-		_.stopPropagation(), _.preventDefault(), B(!0);
+		}), G.current = N;
+	}, $j = (_) => {
+		_.stopPropagation(), _.preventDefault(), H(!0);
 		let E = _.target.closest(".resizable-element");
 		if (E) {
 			let O = E.getBoundingClientRect();
-			zj.current = {
+			Hj.current = {
 				x: O.left + O.width / 2,
 				y: O.top + O.height / 2
 			};
-			let A = _.clientX - zj.current.x, j = _.clientY - zj.current.y;
-			Lj.current = Math.atan2(j, A) * (180 / Math.PI), Rj.current = n.rotation || 0;
+			let A = _.clientX - Hj.current.x, j = _.clientY - Hj.current.y;
+			Rj.current = Math.atan2(j, A) * (180 / Math.PI), zj.current = n.rotation || 0;
 		}
 	};
 	useEffect(() => {
 		let _ = (_) => {
-			if (N) {
-				let n = _.clientX - H.current.x, E = _.clientY - H.current.y;
-				(Math.abs(n) > 2 || Math.abs(E) > 2) && (G.current = !0), A(Object.entries(U.current).map(([_, O]) => {
-					let A = O.x + n, M = O.y + E;
-					return j.gridSize > 0 && (A = Math.round(A / j.gridSize) * j.gridSize, M = Math.round(M / j.gridSize) * j.gridSize), j.isList && (M = Math.max(0, M)), {
+			if (P) {
+				let E = j.zoom || 1, O = (_.clientX - U.current.x) / E, M = (_.clientY - U.current.y) / E;
+				(Math.abs(O) > 2 || Math.abs(M) > 2) && (Z.current = !0);
+				let P = 5 / E, z = [], B = Object.entries(G.current).map(([_, E]) => {
+					let A = E.x + O, N = E.y + M;
+					if (j.gridSize > 0) A = Math.round(A / j.gridSize) * j.gridSize, N = Math.round(N / j.gridSize) * j.gridSize;
+					else {
+						let E = !1, O = !1, M = n.width ?? 100, B = n.height ?? 100;
+						Object.keys(G.current).length === 1 && j.elements.forEach((n) => {
+							if (n.id === _) return;
+							let j = n.width ?? 100, H = n.height ?? 100;
+							E || (Math.abs(A - n.x) < P ? (A = n.x, E = !0, z.push({
+								orientation: "vertical",
+								position: n.x
+							})) : Math.abs(A - (n.x + j)) < P ? (A = n.x + j, E = !0, z.push({
+								orientation: "vertical",
+								position: n.x + j
+							})) : Math.abs(A + M - n.x) < P ? (A = n.x - M, E = !0, z.push({
+								orientation: "vertical",
+								position: n.x
+							})) : Math.abs(A + M - (n.x + j)) < P && (A = n.x + j - M, E = !0, z.push({
+								orientation: "vertical",
+								position: n.x + j
+							}))), O || (Math.abs(N - n.y) < P ? (N = n.y, O = !0, z.push({
+								orientation: "horizontal",
+								position: n.y
+							})) : Math.abs(N - (n.y + H)) < P ? (N = n.y + H, O = !0, z.push({
+								orientation: "horizontal",
+								position: n.y + H
+							})) : Math.abs(N + B - n.y) < P ? (N = n.y - B, O = !0, z.push({
+								orientation: "horizontal",
+								position: n.y
+							})) : Math.abs(N + B - (n.y + H)) < P && (N = n.y + H - B, O = !0, z.push({
+								orientation: "horizontal",
+								position: n.y + H
+							})));
+						});
+					}
+					return j.isList && (N = Math.max(0, N)), {
 						id: _,
 						changes: {
 							x: A,
-							y: M
+							y: N
 						}
 					};
-				}), !1);
+				});
+				N && N(z), A(B, !1);
 			}
-			if (z) {
-				let E = _.clientX - zj.current.x, A = _.clientY - zj.current.y, j = Math.atan2(A, E) * (180 / Math.PI) - Lj.current, M = (Rj.current + j) % 360;
+			if (B) {
+				let E = _.clientX - Hj.current.x, A = _.clientY - Hj.current.y, j = Math.atan2(A, E) * (180 / Math.PI) - Rj.current, M = (zj.current + j) % 360;
 				O(n.id, { rotation: M }, !1);
 			}
 		}, E = () => {
-			N && (P(!1), A([], !0)), z && (B(!1), O(n.id, { rotation: n.rotation }, !0));
+			P && (z(!1), A([], !0), N && N([])), B && (H(!1), O(n.id, { rotation: n.rotation }, !0));
 		};
-		return (N || z) && (window.addEventListener("mousemove", _), window.addEventListener("mouseup", E)), () => {
+		return (P || B) && (window.addEventListener("mousemove", _), window.addEventListener("mouseup", E)), () => {
 			window.removeEventListener("mousemove", _), window.removeEventListener("mouseup", E);
 		};
 	}, [
-		N,
-		z,
+		P,
+		B,
 		n.id,
 		O,
 		A,
 		j.isList,
 		j.selectedElementIds
 	]);
-	let $j = {
+	let eM = {
 		position: "absolute",
 		left: 0,
 		top: 0,
@@ -11956,14 +12018,14 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		padding: n.type === "image" || n.type === "text" ? 0 : "8px",
 		border: _ ? "2px solid var(--accent-9)" : "1px dashed transparent",
 		outline: _ ? "none" : "1px solid transparent",
-		cursor: N ? "grabbing" : "grab",
+		cursor: P ? "grabbing" : "grab",
 		borderRadius: "var(--radius-2)",
 		overflow: n.autoGrow ? "visible" : "hidden",
 		whiteSpace: n.autoGrow ? "pre-wrap" : void 0,
 		wordBreak: n.autoGrow ? "break-word" : void 0,
 		userSelect: "none",
 		...n.style,
-		...Jj
+		...Yj
 	};
 	return /* @__PURE__ */ jsx(Resizable, {
 		className: "resizable-element",
@@ -11971,9 +12033,9 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 			width: n.width ?? 100,
 			height: n.autoGrow ? "auto" : n.height ?? 100
 		},
-		maxHeight: j.isList ? Math.max(10, Uj - n.y) : void 0,
+		maxHeight: j.isList ? Math.max(10, Wj - n.y) : void 0,
 		onResizeStart: (n) => {
-			Hj.current = !!n.shiftKey;
+			Uj.current = !!n.shiftKey;
 		},
 		onResizeStop: (_, E, A, j) => {
 			let N = (n.width ?? 100) + j.width, P = (n.height ?? 100) + j.height;
@@ -11986,8 +12048,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 			position: "absolute",
 			transform: `translate(${n.x ?? 0}px, ${n.y ?? 0}px) rotate(${n.rotation || 0}deg)`,
 			height: n.autoGrow ? "auto" : void 0,
-			display: Yj && !_ ? "none" : void 0,
-			opacity: Yj && _ ? .4 : 1
+			display: Xj && !_ ? "none" : void 0,
+			opacity: Xj && _ ? .4 : 1
 		},
 		enable: _ && !n.autoGrow ? void 0 : {
 			top: !1,
@@ -11999,7 +12061,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 			bottomLeft: !1,
 			topLeft: !1
 		},
-		lockAspectRatio: Hj.current === !0,
+		lockAspectRatio: Uj.current === !0,
 		grid: j.gridSize > 0 ? [j.gridSize, j.gridSize] : void 0,
 		children: /* @__PURE__ */ jsx(ElementContextMenu, {
 			element: n,
@@ -12010,9 +12072,9 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 					position: "relative"
 				},
 				children: [/* @__PURE__ */ jsxs(p, {
-					style: $j,
-					onMouseDown: Zj,
-					onClick: Xj,
+					style: eM,
+					onMouseDown: Qj,
+					onClick: Zj,
 					title: n.name,
 					onMouseEnter: (n) => {
 						_ || (n.currentTarget.style.borderColor = "var(--gray-6)");
@@ -12026,10 +12088,10 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 								width: "100%",
 								height: "100%"
 							},
-							children: Gj
+							children: Jj
 						}),
-						n.type === "image" && (Gj ? /* @__PURE__ */ jsx("img", {
-							src: Gj,
+						n.type === "image" && (Jj ? /* @__PURE__ */ jsx("img", {
+							src: Jj,
 							alt: "Element",
 							style: {
 								width: "100%",
@@ -12094,7 +12156,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						zIndex: 50,
 						boxShadow: "0 0 0 2px white"
 					},
-					onMouseDown: Qj,
+					onMouseDown: $j,
 					children: /* @__PURE__ */ jsx(p, { style: {
 						position: "absolute",
 						top: 12,
@@ -12109,53 +12171,131 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		})
 	});
 }), Canvas = () => {
-	let { state: n, selectElement: _, setSelectedElements: E, addElement: O } = useEditor(), A = useRef(null), [j, M] = useState(null), N = useRef(!1), P = useRef({
+	let { state: n, selectElement: _, setSelectedElements: E, addElement: O, setZoom: A, setPan: j, undo: M, redo: N, copy: P, paste: z, removeSelected: B, updateElements: U } = useEditor(), G = useRef(null), [Z, Lj] = useState(null), Rj = useRef(!1), zj = useRef(!1), Hj = useRef(!1), Uj = useRef({
 		x: 0,
 		y: 0
-	}), z = useRef([]), B = (E) => {
-		if (E.target !== A.current && E.target !== E.currentTarget) return;
-		N.current = !0;
-		let O = A.current?.getBoundingClientRect();
-		O && (P.current = {
-			x: E.clientX - O.left,
-			y: E.clientY - O.top
-		}, z.current = n.selectedElementIds, E.shiftKey || (_(null), z.current = []), window.addEventListener("mousemove", U), window.addEventListener("mouseup", G));
-	}, U = useCallback((_) => {
-		if (!N.current || !A.current) return;
-		let O = A.current.getBoundingClientRect(), j = _.clientX - O.left, B = _.clientY - O.top, H = Math.min(P.current.x, j), U = Math.min(P.current.y, B), W = Math.abs(j - P.current.x), G = Math.abs(B - P.current.y);
-		if (M({
-			x: H,
-			y: U,
-			width: W,
-			height: G
-		}), W > 2 || G > 2) {
+	}), Wj = useRef({
+		x: 0,
+		y: 0
+	}), Gj = useRef([]), Jj = (E) => {
+		if (E.target !== G.current && E.target !== E.currentTarget) return;
+		if (E.button === 1 || E.button === 0 && Hj.current) {
+			E.preventDefault(), zj.current = !0, Wj.current = {
+				x: E.clientX,
+				y: E.clientY
+			};
+			return;
+		}
+		Rj.current = !0;
+		let O = G.current?.getBoundingClientRect();
+		if (!O) return;
+		let A = O.left, j = O.top;
+		Uj.current = {
+			x: (E.clientX - A - n.pan.x) / n.zoom,
+			y: (E.clientY - j - n.pan.y) / n.zoom
+		}, Gj.current = n.selectedElementIds, E.shiftKey || (_(null), Gj.current = []), window.addEventListener("mousemove", Yj), window.addEventListener("mouseup", Xj);
+	}, Yj = useCallback((_) => {
+		if (!G.current) return;
+		if (zj.current) {
+			let E = _.clientX - Wj.current.x, O = _.clientY - Wj.current.y;
+			j({
+				x: n.pan.x + E,
+				y: n.pan.y + O
+			}), Wj.current = {
+				x: _.clientX,
+				y: _.clientY
+			};
+			return;
+		}
+		if (!Rj.current) return;
+		let O = G.current.getBoundingClientRect(), A = (_.clientX - O.left - n.pan.x) / n.zoom, M = (_.clientY - O.top - n.pan.y) / n.zoom, N = Math.min(Uj.current.x, A), P = Math.min(Uj.current.y, M), z = Math.abs(A - Uj.current.x), B = Math.abs(M - Uj.current.y);
+		if (Lj({
+			x: N,
+			y: P,
+			width: z,
+			height: B
+		}), z > 2 || B > 2) {
 			let _ = [];
 			n.elements.forEach((n) => {
-				let E = n.x ?? 0, O = n.y ?? 0, A = n.width ?? 100, j = n.height ?? 100, M = E + A, N = O + j, P = H + W, z = U + G;
-				E < P && M > H && O < z && N > U && _.push(n.id);
-			}), E(Array.from(new Set([...z.current, ..._])));
+				let E = n.x ?? 0, O = n.y ?? 0, A = n.width ?? 100, j = n.height ?? 100, M = E + A, H = O + j, U = N + z, W = P + B;
+				E < U && M > N && O < W && H > P && _.push(n.id);
+			}), E(Array.from(new Set([...Gj.current, ..._])));
 		}
-	}, [n.elements, E]), G = useCallback(() => {
-		N.current = !1, M(null), window.removeEventListener("mousemove", U), window.removeEventListener("mouseup", G);
-	}, [U]);
-	useEffect(() => () => {
-		window.removeEventListener("mousemove", U), window.removeEventListener("mouseup", G);
-	}, [U, G]);
-	let Z = useRef(!1), { setCanvasHeight: Lj } = useEditor(), Rj = (n) => {
-		n.stopPropagation(), n.preventDefault(), Z.current = !0, window.addEventListener("mousemove", zj), window.addEventListener("mouseup", Hj);
-	}, zj = useCallback((n) => {
-		if (!Z.current || !A.current) return;
-		let _ = A.current.getBoundingClientRect(), E = n.clientY - _.top, O = Math.max(50, Math.min(E, 2e3));
-		Lj(Math.round(O));
-	}, [Lj]), Hj = useCallback(() => {
-		Z.current = !1, window.removeEventListener("mousemove", zj), window.removeEventListener("mouseup", Hj);
-	}, [zj]);
+	}, [
+		n.elements,
+		n.pan,
+		n.zoom,
+		E,
+		j
+	]), Xj = useCallback(() => {
+		Rj.current = !1, zj.current = !1, Lj(null), window.removeEventListener("mousemove", Yj), window.removeEventListener("mouseup", Xj);
+	}, [Yj]), Zj = (_) => {
+		if (_.ctrlKey || _.metaKey) _.preventDefault(), A(Math.min(Math.max(.1, n.zoom - _.deltaY * .001), 5));
+		else {
+			let E = _.shiftKey ? _.deltaY : _.deltaX, O = _.shiftKey ? _.deltaX : _.deltaY;
+			j({
+				x: n.pan.x - E * 1,
+				y: n.pan.y - O * 1
+			});
+		}
+	};
+	useEffect(() => {
+		let _ = (_) => {
+			if (_.code === "Space" && !_.repeat && !(_.target instanceof HTMLInputElement || _.target instanceof HTMLTextAreaElement) && (Hj.current = !0, G.current && (G.current.style.cursor = "grab")), !(_.target instanceof HTMLInputElement || _.target instanceof HTMLTextAreaElement) && ((_.ctrlKey || _.metaKey) && _.key.toLowerCase() === "z" && (_.preventDefault(), _.shiftKey ? N() : M()), (_.ctrlKey || _.metaKey) && _.key.toLowerCase() === "y" && (_.preventDefault(), N()), (_.ctrlKey || _.metaKey) && _.key.toLowerCase() === "c" && (_.preventDefault(), P()), (_.ctrlKey || _.metaKey) && _.key.toLowerCase() === "v" && (_.preventDefault(), z()), (_.key === "Delete" || _.key === "Backspace") && (_.preventDefault(), B()), [
+				"ArrowUp",
+				"ArrowDown",
+				"ArrowLeft",
+				"ArrowRight"
+			].includes(_.key))) {
+				_.preventDefault();
+				let E = _.shiftKey ? 10 : 1, O = [];
+				n.selectedElementIds.forEach((A) => {
+					let j = n.elements.find((n) => n.id === A);
+					if (j) {
+						let { x: n = 0, y: M = 0 } = j;
+						_.key === "ArrowUp" && (M -= E), _.key === "ArrowDown" && (M += E), _.key === "ArrowLeft" && (n -= E), _.key === "ArrowRight" && (n += E), O.push({
+							id: A,
+							changes: {
+								x: n,
+								y: M
+							}
+						});
+					}
+				}), O.length > 0 && U(O);
+			}
+		}, E = (n) => {
+			n.code === "Space" && (Hj.current = !1, G.current && !zj.current && (G.current.style.cursor = "default"));
+		};
+		return window.addEventListener("keydown", _), window.addEventListener("keyup", E), () => {
+			window.removeEventListener("keydown", _), window.removeEventListener("keyup", E), window.removeEventListener("mousemove", Yj), window.removeEventListener("mouseup", Xj);
+		};
+	}, [
+		M,
+		N,
+		P,
+		z,
+		B,
+		U,
+		n.selectedElementIds,
+		n.elements,
+		Yj,
+		Xj
+	]);
+	let Qj = useRef(!1), { setCanvasHeight: $j } = useEditor(), eM = (n) => {
+		n.stopPropagation(), n.preventDefault(), Qj.current = !0, window.addEventListener("mousemove", tM), window.addEventListener("mouseup", nM);
+	}, tM = useCallback((n) => {
+		if (!Qj.current || !G.current) return;
+		let _ = G.current.getBoundingClientRect(), E = n.clientY - _.top, O = Math.max(50, Math.min(E, 2e3));
+		$j(Math.round(O));
+	}, [$j]), nM = useCallback(() => {
+		Qj.current = !1, window.removeEventListener("mousemove", tM), window.removeEventListener("mouseup", nM);
+	}, [tM]);
 	useEffect(() => () => {
-		window.removeEventListener("mousemove", zj), window.removeEventListener("mouseup", Hj);
-	}, [zj, Hj]);
-	let Uj = (n) => {
+		window.removeEventListener("mousemove", tM), window.removeEventListener("mouseup", nM);
+	}, [tM, nM]);
+	let rM = (n) => {
 		n.preventDefault(), n.dataTransfer.dropEffect = "copy";
-	}, Wj = (n) => {
+	}, iM = (n) => {
 		n.preventDefault();
 		let _ = n.dataTransfer.getData("application/x-editor-prop");
 		if (_) {
@@ -12170,92 +12310,177 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 				dataBinding: _
 			});
 		}
-	}, Gj = n.canvasHeight || 150;
+	}, aM = n.canvasHeight || 150;
 	return /* @__PURE__ */ jsxs(p, {
-		ref: A,
-		onMouseDown: B,
-		onDragOver: Uj,
-		onDrop: Wj,
+		ref: G,
+		onMouseDown: Jj,
+		onDragOver: rM,
+		onDrop: iM,
+		onWheel: Zj,
 		style: {
 			width: "100%",
 			height: "100%",
 			position: "relative",
 			overflow: "hidden",
 			backgroundColor: "var(--color-background)",
-			backgroundImage: "radial-gradient(var(--gray-5) 1px, transparent 1px)",
-			backgroundSize: "20px 20px"
+			cursor: zj.current ? "grabbing" : "default"
 		},
-		children: [
-			j && /* @__PURE__ */ jsx("div", { style: {
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: {
+				transform: `translate(${n.pan.x}px, ${n.pan.y}px) scale(${n.zoom})`,
+				transformOrigin: "0 0",
+				width: "100%",
+				height: "100%",
 				position: "absolute",
-				left: j.x,
-				top: j.y,
-				width: j.width,
-				height: j.height,
-				backgroundColor: "rgba(0, 120, 255, 0.1)",
-				border: "1px solid rgba(0, 120, 255, 0.5)",
-				pointerEvents: "none",
-				zIndex: 9999
-			} }),
-			n.isList && /* @__PURE__ */ jsxs("div", {
-				style: {
+				top: 0,
+				left: 0
+			},
+			children: [
+				/* @__PURE__ */ jsx("div", { style: {
 					position: "absolute",
-					top: Gj,
-					left: 0,
-					right: 0,
-					height: "10px",
-					marginTop: "-5px",
-					cursor: "ns-resize",
-					zIndex: 100,
-					display: "flex",
-					alignItems: "center",
-					justifyContent: "center",
-					group: "resize-handle"
-				},
-				onMouseDown: Rj,
-				children: [/* @__PURE__ */ jsx("div", { style: {
-					width: "100%",
-					height: "2px",
-					backgroundColor: "var(--accent-9)",
-					borderBottom: "none",
-					opacity: .8,
-					boxShadow: "0 1px 4px rgba(0,0,0,0.2)"
-				} }), /* @__PURE__ */ jsxs("div", {
+					top: -n.pan.y / n.zoom,
+					left: -n.pan.x / n.zoom,
+					width: "200vw",
+					height: "200vh",
+					backgroundImage: "radial-gradient(var(--gray-5) 1px, transparent 1px)",
+					backgroundSize: "20px 20px",
+					pointerEvents: "none",
+					transform: "scale(1)"
+				} }),
+				Z && /* @__PURE__ */ jsx("div", { style: {
+					position: "absolute",
+					left: Z.x,
+					top: Z.y,
+					width: Z.width,
+					height: Z.height,
+					backgroundColor: "rgba(0, 120, 255, 0.1)",
+					border: "1px solid rgba(0, 120, 255, 0.5)",
+					pointerEvents: "none",
+					zIndex: 9999
+				} }),
+				n.snapLines.map((n, _) => /* @__PURE__ */ jsx("div", { style: {
+					position: "absolute",
+					left: n.orientation === "vertical" ? n.position : 0,
+					top: n.orientation === "horizontal" ? n.position : 0,
+					width: n.orientation === "vertical" ? "1px" : "100%",
+					height: n.orientation === "horizontal" ? "1px" : "100%",
+					backgroundColor: "red",
+					zIndex: 9999,
+					pointerEvents: "none"
+				} }, _)),
+				n.isList && /* @__PURE__ */ jsxs("div", {
 					style: {
 						position: "absolute",
-						right: 10,
-						top: -20,
+						top: aM,
+						left: 0,
+						right: 0,
+						height: "10px",
+						marginTop: "-5px",
+						cursor: "ns-resize",
+						zIndex: 100,
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+						group: "resize-handle"
+					},
+					onMouseDown: eM,
+					children: [/* @__PURE__ */ jsx("div", { style: {
+						width: "100%",
+						height: "2px",
 						backgroundColor: "var(--accent-9)",
-						color: "white",
-						fontSize: "11px",
-						padding: "2px 6px",
-						borderRadius: "4px",
-						fontWeight: 500,
+						borderBottom: "none",
+						opacity: .8,
+						boxShadow: "0 1px 4px rgba(0,0,0,0.2)"
+					} }), /* @__PURE__ */ jsxs("div", {
+						style: {
+							position: "absolute",
+							right: 10,
+							top: -20,
+							backgroundColor: "var(--accent-9)",
+							color: "white",
+							fontSize: "11px",
+							padding: "2px 6px",
+							borderRadius: "4px",
+							fontWeight: 500,
+							pointerEvents: "none",
+							boxShadow: "0 2px 5px rgba(0,0,0,0.1)"
+						},
+						children: [
+							"Altura do Item: ",
+							aM,
+							"px"
+						]
+					})]
+				}),
+				n.elements.length === 0 && /* @__PURE__ */ jsx(p$1, {
+					align: "center",
+					justify: "center",
+					style: {
+						height: "100%",
+						color: "var(--gray-8)",
 						pointerEvents: "none",
-						boxShadow: "0 2px 5px rgba(0,0,0,0.1)"
+						transform: `scale(${1 / n.zoom})`
 					},
-					children: [
-						"Altura do Item: ",
-						Gj,
-						"px"
-					]
-				})]
-			}),
-			n.elements.length === 0 && /* @__PURE__ */ jsx(p$1, {
-				align: "center",
-				justify: "center",
-				style: {
-					height: "100%",
-					color: "var(--gray-8)",
-					pointerEvents: "none"
-				},
-				children: /* @__PURE__ */ jsx(p$2, { children: "Adicione elementos e arraste livremente" })
-			}),
-			n.elements.map((_) => /* @__PURE__ */ jsx(DraggableElement, {
-				element: _,
-				isSelected: n.selectedElementIds.includes(_.id)
-			}, _.id))
-		]
+					children: /* @__PURE__ */ jsx(p$2, { children: "Adicione elementos e arraste livremente" })
+				}),
+				n.elements.map((_) => /* @__PURE__ */ jsx(DraggableElement, {
+					element: _,
+					isSelected: n.selectedElementIds.includes(_.id)
+				}, _.id))
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			style: {
+				position: "absolute",
+				bottom: 20,
+				right: 20,
+				display: "flex",
+				gap: "8px",
+				backgroundColor: "var(--color-panel-solid)",
+				padding: "4px",
+				borderRadius: "8px",
+				boxShadow: "0 2px 10px rgba(0,0,0,0.1)",
+				zIndex: 1e3
+			},
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					onClick: () => A(Math.max(.1, n.zoom - .1)),
+					style: {
+						padding: "4px 8px",
+						cursor: "pointer"
+					},
+					children: "-"
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					style: {
+						padding: "4px 8px",
+						minWidth: "50px",
+						textAlign: "center"
+					},
+					children: [Math.round(n.zoom * 100), "%"]
+				}),
+				/* @__PURE__ */ jsx("button", {
+					onClick: () => A(Math.min(5, n.zoom + .1)),
+					style: {
+						padding: "4px 8px",
+						cursor: "pointer"
+					},
+					children: "+"
+				}),
+				/* @__PURE__ */ jsx("button", {
+					onClick: () => {
+						A(1), j({
+							x: 0,
+							y: 0
+						});
+					},
+					style: {
+						padding: "4px 8px",
+						cursor: "pointer"
+					},
+					children: "Reset"
+				})
+			]
+		})]
 	});
 }, EditorSettings = () => {
 	let { state: n, updateListSettings: _, setCanvasHeight: E, setGridSize: O } = useEditor(), [A, j] = useState(!1), [M, N] = useState(""), [P, z] = useState("asc"), [B, H] = useState("bottom"), [U, G] = useState("down"), [Z, Lj] = useState("150"), [Rj, zj] = useState(""), [Bj, Hj] = useState("0"), [Uj, Wj] = useState("slideIn"), [Gj, Jj] = useState(.3), [Yj, Xj] = useState("ease-out");