From 87dfa25903bf9a37c222ff25ba140f3eb24ba07f Mon Sep 17 00:00:00 2001
From: stravo1 <stravoone@gmail.com>
Date: Thu, 2 Jul 2026 02:47:24 +0530
Subject: [PATCH 1/9] feat: render canvas in iframe to support DOM isolation

---
 frontend/components.d.ts                      |   1 +
 frontend/cypress/e2e/canvas_iframe.cy.js      |  25 ++
 frontend/src/components/BlockEditor.vue       |  20 +-
 .../src/components/BorderRadiusHandler.vue    |  14 +-
 frontend/src/components/BoxResizer.vue        |   7 +-
 frontend/src/components/BuilderBlock.vue      |  57 ++--
 frontend/src/components/BuilderCanvas.vue     | 261 +++++++++++++++---
 .../src/components/BuilderCanvasFrame.vue     | 155 +++++++++++
 frontend/src/components/MarginHandler.vue     |   9 +-
 frontend/src/components/PaddingHandler.vue    |   3 +-
 frontend/src/components/TextBlock.vue         |   8 +-
 frontend/src/stores/builderStore.ts           |   1 +
 frontend/src/stores/canvasStore.ts            |  15 +-
 frontend/src/types/Builder/BuilderCanvas.ts   |   2 +
 frontend/src/utils/canvasFrameDom.ts          |  80 ++++++
 frontend/src/utils/fontManager.ts             |  43 ++-
 frontend/src/utils/guidesTracker.ts           |  37 ++-
 frontend/src/utils/helpers.ts                 |   6 +-
 frontend/src/utils/scriptSandbox.ts           |  63 +++--
 frontend/src/utils/trackTarget.ts             |  49 ++--
 frontend/src/utils/useBlockEventHandlers.ts   | 137 ++++-----
 frontend/src/utils/useBuilderEvents.ts        |   1 +
 frontend/src/utils/useCanvasDropZone.ts       |  10 +-
 frontend/src/utils/useCanvasEvents.ts         | 183 ++++++------
 .../src/utils/useCanvasMarqueeSelection.ts    |  69 +++--
 25 files changed, 916 insertions(+), 340 deletions(-)
 create mode 100644 frontend/cypress/e2e/canvas_iframe.cy.js
 create mode 100644 frontend/src/components/BuilderCanvasFrame.vue
 create mode 100644 frontend/src/utils/canvasFrameDom.ts

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 197005627..c2bea1fa2 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -39,6 +39,7 @@ declare module 'vue' {
     BuilderBlock: typeof import('./src/components/BuilderBlock.vue')['default']
     BuilderBlockTemplates: typeof import('./src/components/BuilderBlockTemplates.vue')['default']
     BuilderCanvas: typeof import('./src/components/BuilderCanvas.vue')['default']
+    BuilderCanvasFrame: typeof import('./src/components/BuilderCanvasFrame.vue')['default']
     BuilderCommandPalette: typeof import('./src/components/BuilderCommandPalette.vue')['default']
     BuilderLeftPanel: typeof import('./src/components/BuilderLeftPanel.vue')['default']
     BuilderRightPanel: typeof import('./src/components/BuilderRightPanel.vue')['default']
diff --git a/frontend/cypress/e2e/canvas_iframe.cy.js b/frontend/cypress/e2e/canvas_iframe.cy.js
new file mode 100644
index 000000000..525806ecd
--- /dev/null
+++ b/frontend/cypress/e2e/canvas_iframe.cy.js
@@ -0,0 +1,25 @@
+describe("Iframe canvas", () => {
+	before(() => {
+		cy.login();
+	});
+
+	it("renders the page tree inside a replaceable breakpoint frame", () => {
+		cy.visit("builder/page/new");
+
+		cy.get('iframe[data-canvas-breakpoint="desktop"]')
+			.should("be.visible")
+			.then(($frame) => {
+				const firstFrame = $frame[0];
+				const frameDocument = firstFrame.contentDocument;
+
+				expect(frameDocument?.body.querySelector(".canvas[data-breakpoint='desktop']")).to.exist;
+				expect(frameDocument?.body.querySelector(".__builder_component__")).to.exist;
+				expect(firstFrame.ownerDocument.body.querySelector(".__builder_component__")).not.to.exist;
+
+				cy.get('[data-testid="run-canvas-scripts"]').click();
+				cy.get('iframe[data-canvas-breakpoint="desktop"]').should(($replacement) => {
+					expect($replacement[0]).not.to.equal(firstFrame);
+				});
+			});
+	});
+});
diff --git a/frontend/src/components/BlockEditor.vue b/frontend/src/components/BlockEditor.vue
index af93e4483..d04d827fb 100644
--- a/frontend/src/components/BlockEditor.vue
+++ b/frontend/src/components/BlockEditor.vue
@@ -37,6 +37,7 @@ import type Block from "@/block";
 import useBuilderStore from "@/stores/builderStore";
 import useCanvasStore from "@/stores/canvasStore";
 import blockController from "@/utils/blockController";
+import { elementFromEditorPoint } from "@/utils/canvasFrameDom";
 import { addPxToNumber } from "@/utils/helpers";
 import { Ref, computed, inject, nextTick, onMounted, ref, watch, watchEffect } from "vue";
 import setGuides from "../utils/guidesTracker";
@@ -217,14 +218,27 @@ const handleClick = (ev: MouseEvent) => {
 
 	const editorWrapper = editor.value;
 	editorWrapper.classList.add("pointer-events-none");
-	let element = document.elementFromPoint(ev.x, ev.y) as HTMLElement;
+	let element = elementFromEditorPoint(ev.x, ev.y) as HTMLElement;
+	if (!element) return;
 	if (element.classList.contains("editor")) {
 		element.classList.remove("pointer-events-auto");
 		element.classList.add("pointer-events-none");
-		element = document.elementFromPoint(ev.x, ev.y) as HTMLElement;
+		element = elementFromEditorPoint(ev.x, ev.y) as HTMLElement;
 	}
 	if (element.classList.contains("__builder_component__")) {
-		element.dispatchEvent(new MouseEvent("click", ev));
+		const EventConstructor = element.ownerDocument.defaultView?.MouseEvent || MouseEvent;
+		element.dispatchEvent(
+			new EventConstructor("click", {
+				bubbles: true,
+				cancelable: true,
+				clientX: ev.clientX,
+				clientY: ev.clientY,
+				ctrlKey: ev.ctrlKey,
+				metaKey: ev.metaKey,
+				shiftKey: ev.shiftKey,
+				altKey: ev.altKey,
+			}),
+		);
 	}
 };
 
diff --git a/frontend/src/components/BorderRadiusHandler.vue b/frontend/src/components/BorderRadiusHandler.vue
index adab3b15c..ae95c0a4f 100644
--- a/frontend/src/components/BorderRadiusHandler.vue
+++ b/frontend/src/components/BorderRadiusHandler.vue
@@ -18,8 +18,8 @@
 
 <script setup lang="ts">
 import type Block from "@/block";
+import { getComputedStyleFor, getElementRectInEditor } from "@/utils/canvasFrameDom";
 import { getNumberFromPx } from "@/utils/helpers";
-import { useElementBounding } from "@vueuse/core";
 import type { Ref } from "vue";
 import { computed, inject, onMounted, reactive, ref, watchEffect } from "vue";
 
@@ -38,13 +38,21 @@ const handlerLeft = ref(10);
 const MIN_POSITION = { top: 10, left: 10 };
 const MIN_TARGET_SIZE = 25;
 
-const targetBounds = reactive(useElementBounding(props.target));
+const targetBounds = reactive({
+	width: 0,
+	height: 0,
+	update() {
+		const rect = getElementRectInEditor(props.target);
+		targetBounds.width = rect.width;
+		targetBounds.height = rect.height;
+	},
+});
 const maxDistance = computed(() => Math.min(targetBounds.width, targetBounds.height) / 2);
 
 const maxRadius = computed(() => {
 	props.targetBlock.getStyle("width");
 	props.targetBlock.getStyle("height");
-	const targetStyle = window.getComputedStyle(props.target);
+	const targetStyle = getComputedStyleFor(props.target);
 	return Math.min(parseInt(targetStyle.height, 10), parseInt(targetStyle.width, 10)) / 2;
 });
 
diff --git a/frontend/src/components/BoxResizer.vue b/frontend/src/components/BoxResizer.vue
index 95a179c66..59276a591 100644
--- a/frontend/src/components/BoxResizer.vue
+++ b/frontend/src/components/BoxResizer.vue
@@ -34,6 +34,7 @@
 <script setup lang="ts">
 import type Block from "@/block";
 import useCanvasStore from "@/stores/canvasStore";
+import { getComputedStyleFor } from "@/utils/canvasFrameDom";
 import { getNumberFromPx } from "@/utils/helpers";
 import { clamp } from "@vueuse/core";
 import { computed, inject, onMounted, ref, watch } from "vue";
@@ -73,17 +74,17 @@ watch(resizing, () => {
 
 const targetWidth = computed(() => {
 	props.targetBlock.getStyle("width"); // to trigger reactivity
-	return Math.round(getNumberFromPx(getComputedStyle(props.target).getPropertyValue("width")));
+	return Math.round(getNumberFromPx(getComputedStyleFor(props.target).getPropertyValue("width")));
 });
 
 const targetHeight = computed(() => {
 	props.targetBlock.getStyle("height"); // to trigger reactivity
-	return Math.round(getNumberFromPx(getComputedStyle(props.target).getPropertyValue("height")));
+	return Math.round(getNumberFromPx(getComputedStyleFor(props.target).getPropertyValue("height")));
 });
 
 const fontSize = computed(() => {
 	props.targetBlock.getStyle("fontSize"); // to trigger reactivity
-	return Math.round(getNumberFromPx(getComputedStyle(props.target).getPropertyValue("font-size")));
+	return Math.round(getNumberFromPx(getComputedStyleFor(props.target).getPropertyValue("font-size")));
 });
 
 const handleRightResize = (ev: MouseEvent) => {
diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index f1df8ff27..c600c3510 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -49,6 +49,7 @@ import useComponentStore from "@/stores/componentStore";
 import usePageStore from "@/stores/pageStore";
 import { setFont } from "@/utils/fontManager";
 import { extractComponentId, getDataForKey, getParentProps, getPropValue } from "@/utils/helpers";
+import { isElementLike } from "@/utils/canvasFrameDom";
 import type { BlockClientScriptEmulator } from "@/utils/scriptSandbox";
 import { useDraggableBlock } from "@/utils/useDraggableBlock";
 import {
@@ -285,8 +286,8 @@ const emulateBlockClientScript = inject<BlockClientScriptEmulator>(
 
 const target = computed(() => {
 	if (!component.value) return null;
-	if (component.value instanceof HTMLElement || component.value instanceof SVGElement) {
-		return component.value;
+	if (isElementLike(component.value)) {
+		return component.value as HTMLElement | SVGElement;
 	} else {
 		return component.value.component;
 	}
@@ -412,7 +413,7 @@ watchEffect(() => {
 			parent = parent.getParentBlock();
 		}
 	}
-	setFont(fontFamily, fontWeight);
+	setFont(fontFamily, fontWeight, target.value?.ownerDocument || document);
 });
 
 onMounted(async () => {
@@ -437,43 +438,22 @@ onUnmounted(() => {
 });
 
 const allResolvedProps = computed(() => {
-	const defaultProps = Object.entries(props.defaultProps || {}).reduce(
-		(acc, [key, value]) => {
-			acc[key] = value.value;
-			return acc;
-		},
-		{} as Record<string, any>,
-	);
+	const defaultProps = Object.entries(props.defaultProps || {}).reduce((acc, [key, value]) => {
+		acc[key] = value.value;
+		return acc;
+	}, {} as Record<string, any>);
 
 	const blockProps = Object.entries({
 		...props.block.getBlockProps(),
-	}).reduce(
-		(acc, [key]) => {
-			acc[key] = getPropValue(
-				key,
-				props.block,
-				getDataScriptValue,
-				props.defaultProps,
-				getComponentDataValue,
-			);
-			return acc;
-		},
-		{} as Record<string, any>,
-	);
+	}).reduce((acc, [key]) => {
+		acc[key] = getPropValue(key, props.block, getDataScriptValue, props.defaultProps, getComponentDataValue);
+		return acc;
+	}, {} as Record<string, any>);
 
-	const parentProps = Object.entries(getParentProps(props.block)).reduce(
-		(acc, [key, value]) => {
-			acc[key] = getPropValue(
-				key,
-				value.block!,
-				getDataScriptValue,
-				props.defaultProps,
-				getComponentDataValue,
-			);
-			return acc;
-		},
-		{} as Record<string, any>,
-	);
+	const parentProps = Object.entries(getParentProps(props.block)).reduce((acc, [key, value]) => {
+		acc[key] = getPropValue(key, value.block!, getDataScriptValue, props.defaultProps, getComponentDataValue);
+		return acc;
+	}, {} as Record<string, any>);
 
 	return {
 		...parentProps,
@@ -534,11 +514,12 @@ watch(
 		blockClientScript,
 		resolvedComponentData,
 		allResolvedProps,
+		() => builderStore.runCanvasScripts,
 		() => builderSettings.doc?.execute_block_scripts_in_editor,
 		() => pageStore.settingPage,
 		componentDataReady,
 	],
-	([element, clientScript, componentData, resolvedProps, , settingPage, dataReady], _, onCleanup) => {
+	([element, clientScript, componentData, resolvedProps, , , settingPage, dataReady], _, onCleanup) => {
 		if (!element || !clientScript) return;
 		const waitsForComponentData = Boolean(props.block.extendedFromComponent);
 		const cleanup = emulateBlockClientScript({
@@ -549,7 +530,7 @@ watch(
 			javascript:
 				settingPage || (waitsForComponentData && !editingComponentId.value && !dataReady)
 					? ""
-					: (clientScript.javascript ?? ""),
+					: clientScript.javascript ?? "",
 			componentData: componentData ?? {},
 			props: resolvedProps,
 		});
diff --git a/frontend/src/components/BuilderCanvas.vue b/frontend/src/components/BuilderCanvas.vue
index f6d3ba9f6..5b72e7311 100644
--- a/frontend/src/components/BuilderCanvas.vue
+++ b/frontend/src/components/BuilderCanvas.vue
@@ -1,10 +1,5 @@
 <template>
-	<div
-		ref="canvasContainer"
-		:data-builder-canvas="canvasId"
-		@click="handleClick"
-		@mousedown="handleMarqueeStart">
-		<component :is="'style'" v-if="blockClientStyles" v-text="blockClientStyles" />
+	<div ref="canvasContainer" :data-builder-canvas="canvasId" @click="handleClick">
 		<Transition name="fade">
 			<div
 				class="absolute bottom-0 left-0 right-0 top-0 grid w-full place-items-center bg-surface-gray-1 p-10 text-ink-gray-5"
@@ -15,17 +10,47 @@
 		<BlockSnapGuides></BlockSnapGuides>
 		<div
 			class="fixed flex gap-40"
-			:class="{
-				'scheme-dark': builderStore.canvasDarkMode,
-			}"
 			ref="canvas"
 			:style="{
 				transformOrigin: 'top center',
 				transform: `scale(${canvasProps.scale}) translate(${canvasProps.translateX}px, ${canvasProps.translateY}px)`,
 				'--canvas-scale': canvasProps.scale,
-				colorScheme: builderStore.canvasDarkMode ? 'dark' : 'light',
 			}">
 			<div class="absolute right-0 top-[-60px] flex rounded-md bg-surface-base px-3">
+				<Tooltip
+					:text="scriptsDisabled ? 'Scripts are disabled in Builder Settings' : 'Run scripts in canvas'"
+					:hoverDelay="0.6">
+					<div
+						data-testid="run-canvas-scripts"
+						v-show="!canvasProps.scaling && !canvasProps.panning"
+						class="w-auto p-2"
+						:class="scriptsDisabled ? 'cursor-not-allowed opacity-40' : 'cursor-pointer'"
+						@click.stop="toggleCanvasScripts">
+						<span
+							:class="[
+								builderStore.runCanvasScripts ? 'lucide-square' : 'lucide-play',
+								'h-8 w-6 text-ink-gray-8',
+							]"
+							aria-hidden="true" />
+					</div>
+				</Tooltip>
+				<Tooltip text="Refresh canvas scripts" :hoverDelay="0.6">
+					<div
+						data-testid="refresh-canvas-scripts"
+						v-show="
+							builderStore.runCanvasScripts &&
+							!scriptsDisabled &&
+							!canvasProps.scaling &&
+							!canvasProps.panning
+						"
+						class="w-auto cursor-pointer p-2"
+						@click.stop="refreshCanvasScripts">
+						<span class="lucide-refresh-cw h-8 w-6 text-ink-gray-8" aria-hidden="true" />
+					</div>
+				</Tooltip>
+				<div
+					v-show="!canvasProps.scaling && !canvasProps.panning"
+					class="m-2 my-3 w-px bg-[var(--outline-gray-2)]"></div>
 				<Tooltip text="Toggle Canvas Dark Mode" :hoverDelay="0.6">
 					<div
 						v-show="!canvasProps.scaling && !canvasProps.panning"
@@ -55,13 +80,7 @@
 				</div>
 			</div>
 			<div
-				class="canvas relative flex h-full bg-surface-base shadow-xl contain-layout"
-				:data-breakpoint="breakpoint.device"
-				:style="{
-					...canvasStyles,
-					background: canvasProps.background,
-					width: `${breakpoint.width}px`,
-				}"
+				class="relative bg-surface-base shadow-xl"
 				v-for="breakpoint in renderedBreakpoints"
 				v-show="breakpoint.visible"
 				:key="breakpoint.device">
@@ -75,15 +94,31 @@
 					@click="activeBreakpoint = breakpoint.device">
 					{{ breakpoint.displayName }}
 				</div>
-				<BuilderBlock
-					class="h-full min-h-[inherit]"
-					:block="block"
-					:style="variables"
-					:key="block.blockId"
-					:readonly="builderStore.readOnlyMode"
-					v-if="showBlocks"
+				<BuilderCanvasFrame
+					:key="`${breakpoint.device}:${frameEpoch}`"
 					:breakpoint="breakpoint.device"
-					:data="pageStore.pageData" />
+					:width="breakpoint.width"
+					:background="canvasProps.background"
+					:canvas-id="canvasId"
+					:canvas-styles="{ ...canvasStyles, '--canvas-scale': canvasProps.scale, cursor: cursorStyle }"
+					:dark="builderStore.canvasDarkMode"
+					@ready="registerFrame"
+					@dispose="unregisterFrame">
+					<component
+						:is="'style'"
+						v-if="blockClientStyles"
+						data-builder-client-styles
+						v-text="blockClientStyles" />
+					<BuilderBlock
+						class="h-full min-h-[inherit]"
+						:block="block"
+						:style="variables"
+						:key="block.blockId"
+						:readonly="builderStore.readOnlyMode"
+						v-if="showBlocks"
+						:breakpoint="breakpoint.device"
+						:data="pageStore.pageData" />
+				</BuilderCanvasFrame>
 			</div>
 		</div>
 		<div
@@ -118,20 +153,27 @@
 </template>
 <script setup lang="ts">
 import type Block from "@/block";
+import BuilderCanvasFrame from "@/components/BuilderCanvasFrame.vue";
 import DraggablePopup from "@/components/Controls/DraggablePopup.vue";
 import SearchBlock from "@/components/Controls/SearchBlock.vue";
 import LoadingIcon from "@/components/Icons/Loading.vue";
 import { builderSettings } from "@/data/builderSettings";
 import useBuilderStore from "@/stores/builderStore";
 import usePageStore from "@/stores/pageStore";
-import { BreakpointConfig, CanvasHistory } from "@/types/Builder/BuilderCanvas";
-import { getBlockObject, isCtrlOrCmd } from "@/utils/helpers";
+import { BreakpointConfig, CanvasHistory, CanvasProps } from "@/types/Builder/BuilderCanvas";
+import { elementFromEditorPoint } from "@/utils/canvasFrameDom";
+import { getBlockObject, isCtrlOrCmd, isTargetEditable } from "@/utils/helpers";
 import {
 	type BlockClientScriptRuntime,
 	executeClientScriptRestricted,
 	executeClientScriptUnrestricted,
 } from "@/utils/scriptSandbox";
-import { useBlockEventHandlers } from "@/utils/useBlockEventHandlers";
+import {
+	handleBlockClick,
+	handleBlockContextMenu,
+	handleBlockDoubleClick,
+	useBlockEventHandlers,
+} from "@/utils/useBlockEventHandlers";
 import { useBlockSelection } from "@/utils/useBlockSelection";
 import { useBuilderVariable } from "@/utils/useBuilderVariable";
 import { useCanvasDropZone } from "@/utils/useCanvasDropZone";
@@ -139,7 +181,7 @@ import { useCanvasEvents } from "@/utils/useCanvasEvents";
 import { useCanvasMarqueeSelection } from "@/utils/useCanvasMarqueeSelection";
 import { useCanvasUtils } from "@/utils/useCanvasUtils";
 import { Tooltip } from "frappe-ui";
-import { Ref, computed, onMounted, onUnmounted, provide, reactive, ref, useId, watch } from "vue";
+import { Ref, computed, nextTick, onMounted, onUnmounted, provide, reactive, ref, useId, watch } from "vue";
 import setPanAndZoom from "../utils/panAndZoom";
 import BlockSnapGuides from "./BlockSnapGuides.vue";
 import BuilderBlock from "./BuilderBlock.vue";
@@ -164,6 +206,11 @@ const canvas = ref(null);
 const showBlocks = ref(false);
 const overlay = ref(null);
 const blockStyles = reactive(new Map<string, string>());
+const frameRoots = reactive(new Map<string, HTMLElement>());
+const frameDocuments = reactive(new Map<string, Document>());
+const frameEpoch = ref(0);
+const frameDropStates = reactive(new Map<string, boolean>());
+const cursorStyle = ref("default");
 
 const props = withDefaults(
 	defineProps<{
@@ -177,7 +224,13 @@ const props = withDefaults(
 
 const block = ref(props.blockData) as Ref<Block>;
 const history = ref(null) as Ref<null> | CanvasHistory;
-const blockClientStyles = computed(() => Array.from(blockStyles.values()).join("\n"));
+const blockClientStyles = computed(() => {
+	const css = Array.from(blockStyles.values()).filter(Boolean).join("\n");
+	return css ? `@layer builder-authored {\n${css}\n}` : "";
+});
+const scriptsDisabled = computed(
+	() => builderSettings.doc?.execute_block_scripts_in_editor === "Don't Execute",
+);
 
 const activeBreakpoint = ref("desktop") as Ref<string | null>;
 const hoveredBreakpoint = ref("desktop") as Ref<string | null>;
@@ -193,7 +246,7 @@ const {
 	selectedBlocks,
 } = useBlockSelection(block);
 
-const canvasProps = reactive({
+const canvasProps = reactive<CanvasProps>({
 	overlayElement: null,
 	background: "#fff",
 	scale: 1,
@@ -202,6 +255,8 @@ const canvasProps = reactive({
 	settingCanvas: true,
 	scaling: false,
 	panning: false,
+	frameDocuments,
+	frameRoots,
 	breakpoints: [
 		{
 			icon: "lucide-monitor",
@@ -250,6 +305,7 @@ const {
 const { marquee, marqueeStyle, suppressNextClick, handleMarqueeStart, cleanupMarqueeListeners } =
 	useCanvasMarqueeSelection({
 		canvasContainer,
+		frameRoots,
 		canvasProps,
 		activeBreakpoint,
 		selectedBlockIds,
@@ -258,11 +314,7 @@ const { marquee, marqueeStyle, suppressNextClick, handleMarqueeStart, cleanupMar
 		setHoveredBreakpoint,
 	});
 
-const { isOverDropZone } = useCanvasDropZone(
-	canvasContainer as unknown as Ref<HTMLElement>,
-	block,
-	findBlock,
-);
+const isOverDropZone = computed(() => Array.from(frameDropStates.values()).some(Boolean));
 
 onMounted(() => {
 	const canvasContainerEl = canvasContainer.value as unknown as HTMLElement;
@@ -301,7 +353,7 @@ const handleClick = (ev: MouseEvent) => {
 		return;
 	}
 
-	const target = document.elementFromPoint(ev.clientX, ev.clientY);
+	const target = elementFromEditorPoint(ev.clientX, ev.clientY);
 	// hack to ensure if click is on canvas-container
 	// TODO: Still clears selection if space handlers are dragged over canvas-container
 	if (target?.classList.contains("canvas-container")) {
@@ -309,6 +361,115 @@ const handleClick = (ev: MouseEvent) => {
 	}
 };
 
+function registerFrame(breakpoint: string, doc: Document, root: HTMLElement, iframe: HTMLIFrameElement) {
+	frameRoots.set(breakpoint, root);
+	frameDocuments.set(breakpoint, doc);
+
+	doc.addEventListener("mousedown", handleMarqueeStart);
+	doc.addEventListener("click", handleBlockClick);
+	doc.addEventListener("dblclick", handleBlockDoubleClick);
+	doc.addEventListener("contextmenu", handleBlockContextMenu);
+	useCanvasEvents(
+		ref(root) as Ref<HTMLElement>,
+		canvasProps,
+		history as CanvasHistory,
+		selectedBlocks,
+		getRootBlock,
+		findBlock,
+		false,
+		doc,
+	);
+	const { isOverDropZone: frameIsOverDropZone } = useCanvasDropZone(ref(doc.body), block, findBlock);
+	watch(frameIsOverDropZone, (value) => frameDropStates.set(breakpoint, value), { immediate: true });
+	bridgeFrameEvents(doc, iframe);
+	nextTick(setScaleAndTranslate);
+}
+
+function unregisterFrame(breakpoint: string, doc: Document | null) {
+	doc?.removeEventListener("mousedown", handleMarqueeStart);
+	doc?.removeEventListener("click", handleBlockClick);
+	doc?.removeEventListener("dblclick", handleBlockDoubleClick);
+	doc?.removeEventListener("contextmenu", handleBlockContextMenu);
+	if (!doc || frameDocuments.get(breakpoint) === doc) {
+		frameRoots.delete(breakpoint);
+		frameDocuments.delete(breakpoint);
+		frameDropStates.delete(breakpoint);
+	}
+}
+
+function bridgeFrameEvents(doc: Document, iframe: HTMLIFrameElement) {
+	const forwardWheel = (event: WheelEvent) => {
+		event.preventDefault();
+		const frameRect = iframe.getBoundingClientRect();
+		const scaleX = iframe.clientWidth ? frameRect.width / iframe.clientWidth : 1;
+		const scaleY = iframe.clientHeight ? frameRect.height / iframe.clientHeight : 1;
+		iframe.dispatchEvent(
+			new WheelEvent("wheel", {
+				bubbles: true,
+				cancelable: true,
+				clientX: frameRect.left + event.clientX * scaleX,
+				clientY: frameRect.top + event.clientY * scaleY,
+				deltaX: event.deltaX,
+				deltaY: event.deltaY,
+				deltaZ: event.deltaZ,
+				deltaMode: event.deltaMode,
+				ctrlKey: event.ctrlKey,
+				metaKey: event.metaKey,
+				shiftKey: event.shiftKey,
+				altKey: event.altKey,
+			}),
+		);
+	};
+	doc.addEventListener("wheel", forwardWheel, { passive: false });
+
+	const forwardKeyboard = (event: KeyboardEvent) => {
+		console.log(event);
+		if (isTargetEditable(event)) return;
+		const forwarded = new KeyboardEvent(event.type, {
+			bubbles: true,
+			cancelable: true,
+			key: event.key,
+			code: event.code,
+			repeat: event.repeat,
+			ctrlKey: event.ctrlKey,
+			metaKey: event.metaKey,
+			shiftKey: event.shiftKey,
+			altKey: event.altKey,
+		});
+		if (!document.dispatchEvent(forwarded)) event.preventDefault();
+	};
+	doc.addEventListener("keydown", forwardKeyboard);
+	doc.addEventListener("keyup", forwardKeyboard);
+
+	const forwardClipboard = (event: ClipboardEvent) => {
+		if (isTargetEditable(event)) return;
+		const forwarded = new ClipboardEvent(event.type, {
+			bubbles: true,
+			cancelable: true,
+			clipboardData: event.clipboardData,
+		});
+		if (!document.dispatchEvent(forwarded)) event.preventDefault();
+	};
+	doc.addEventListener("copy", forwardClipboard);
+	doc.addEventListener("cut", forwardClipboard);
+	doc.addEventListener("paste", forwardClipboard);
+}
+
+onMounted(() => {
+	if (!canvasContainer.value) return;
+
+	const observer = new MutationObserver(() => {
+		cursorStyle.value = canvasContainer.value?.style.cursor || "default";
+	});
+
+	observer.observe(canvasContainer.value, {
+		attributes: true,
+		attributeFilter: ["style"],
+	});
+
+	onUnmounted(() => observer.disconnect());
+});
+
 function searchBlock(searchTerm: string, targetBlock: null | Block, limit: number = 5): Block[] {
 	const results: Block[] = [];
 
@@ -376,6 +537,12 @@ watch(
 	},
 );
 
+watch(scriptsDisabled, (disabled) => {
+	if (!disabled || !builderStore.runCanvasScripts) return;
+	builderStore.runCanvasScripts = false;
+	frameEpoch.value++;
+});
+
 provide("canvasProps", canvasProps);
 provide("emulateBlockClientScript", emulateBlockClientScript);
 
@@ -444,6 +611,17 @@ function selectBreakpoint(ev: MouseEvent, breakpoint: BreakpointConfig) {
 	}
 }
 
+function toggleCanvasScripts() {
+	if (scriptsDisabled.value) return;
+	builderStore.runCanvasScripts = !builderStore.runCanvasScripts;
+	frameEpoch.value++;
+}
+
+function refreshCanvasScripts() {
+	if (!builderStore.runCanvasScripts || scriptsDisabled.value) return;
+	frameEpoch.value++;
+}
+
 function escapeAttributeValue(value: string) {
 	return value.replaceAll("\\", "\\\\").replaceAll('"', '\\"');
 }
@@ -457,7 +635,7 @@ function emulateBlockClientScript(script: BlockClientScriptRuntime) {
 
 	const mode = builderSettings.doc?.execute_block_scripts_in_editor ?? "Restricted";
 	let cleanup = () => {};
-	if (mode !== "Don't Execute" && script.javascript.trim()) {
+	if (builderStore.runCanvasScripts && mode !== "Don't Execute" && script.javascript.trim()) {
 		const context = {
 			componentData: script.componentData,
 			props: script.props,
@@ -465,7 +643,12 @@ function emulateBlockClientScript(script: BlockClientScriptRuntime) {
 		cleanup =
 			mode === "Unrestricted"
 				? executeClientScriptUnrestricted(script.element, script.javascript, context)
-				: executeClientScriptRestricted(script.element, canvasContainer.value, script.javascript, context);
+				: executeClientScriptRestricted(
+						script.element,
+						frameRoots.get(script.breakpoint) || null,
+						script.javascript,
+						context,
+				  );
 	}
 
 	return () => {
diff --git a/frontend/src/components/BuilderCanvasFrame.vue b/frontend/src/components/BuilderCanvasFrame.vue
new file mode 100644
index 000000000..4a5aa98d1
--- /dev/null
+++ b/frontend/src/components/BuilderCanvasFrame.vue
@@ -0,0 +1,155 @@
+<template>
+	<iframe
+		ref="iframe"
+		:srcdoc="FRAME_DOCUMENT"
+		:title="`Canvas frame for ${breakpoint}`"
+		:data-canvas-breakpoint="breakpoint"
+		class="block border-0 bg-transparent"
+		:style="{
+			width: `${width}px`,
+			height: `${height}px`,
+			background,
+			colorScheme: dark ? 'dark' : 'light',
+		}" />
+	<Teleport v-if="target" :to="target">
+		<div
+			ref="canvasRoot"
+			class="canvas canvas-container relative flex w-full contain-layout"
+			:class="{ 'scheme-dark': dark }"
+			:data-breakpoint="breakpoint"
+			:data-builder-canvas="canvasId"
+			:style="rootStyle">
+			<slot />
+		</div>
+	</Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, ref, watch } from "vue";
+
+const FRAME_DOCUMENT = "<!doctype html><html><head></head><body></body></html>";
+
+const props = withDefaults(
+	defineProps<{
+		breakpoint: string;
+		width: number;
+		background: string;
+		canvasId: string;
+		canvasStyles?: Record<string, any>;
+		dark?: boolean;
+	}>(),
+	{
+		canvasStyles: () => ({}),
+		dark: false,
+	},
+);
+
+const emit = defineEmits<{
+	ready: [breakpoint: string, doc: Document, root: HTMLElement, iframe: HTMLIFrameElement];
+	dispose: [breakpoint: string, doc: Document | null];
+}>();
+
+const iframe = ref<HTMLIFrameElement | null>(null);
+const canvasRoot = ref<HTMLElement | null>(null);
+const target = ref<HTMLElement | null>(null);
+const height = ref(1);
+let resizeObserver: ResizeObserver | null = null;
+let headObserver: MutationObserver | null = null;
+let currentDocument: Document | null = null;
+
+const rootStyle = computed(() => ({
+	...props.canvasStyles,
+	background: props.background,
+	minHeight: props.canvasStyles.minHeight || "100%",
+}));
+
+function syncDocumentChrome(doc: Document) {
+	doc.documentElement.dataset.theme = document.documentElement.dataset.theme || "";
+	doc.documentElement.className = document.documentElement.className;
+	doc.body.className = document.body.className;
+	doc.body.style.margin = "0";
+	doc.body.style.width = "100%";
+	doc.body.style.minHeight = "100%";
+	doc.body.style.overflow = "visible";
+}
+
+function cloneEditorStyles(doc: Document) {
+	doc.head.querySelectorAll("[data-builder-frame-style]").forEach((node) => node.remove());
+	document.head
+		.querySelectorAll<HTMLLinkElement | HTMLStyleElement>("link[rel='stylesheet'], style")
+		.forEach((source) => {
+			const clone = source.cloneNode(true) as HTMLLinkElement | HTMLStyleElement;
+			clone.setAttribute("data-builder-frame-style", "");
+			doc.head.appendChild(clone);
+		});
+}
+
+function updateHeight() {
+	const doc = currentDocument;
+	if (!doc || !canvasRoot.value) return;
+	height.value = Math.max(
+		1,
+		Math.ceil(canvasRoot.value.scrollHeight),
+		Math.ceil(doc.body.scrollHeight),
+		Math.ceil(doc.documentElement.scrollHeight),
+	);
+}
+
+function cleanupFrame() {
+	resizeObserver?.disconnect();
+	resizeObserver = null;
+	headObserver?.disconnect();
+	headObserver = null;
+	if (currentDocument) emit("dispose", props.breakpoint, currentDocument);
+	currentDocument = null;
+	target.value = null;
+}
+
+async function attachFrame() {
+	cleanupFrame();
+	const frame = iframe.value;
+	const doc = frame?.contentDocument;
+	if (!frame || !doc || doc.readyState === "loading") return;
+
+	currentDocument = doc;
+	syncDocumentChrome(doc);
+	cloneEditorStyles(doc);
+	target.value = doc.body;
+	await nextTick();
+	if (!canvasRoot.value) return;
+
+	const FrameResizeObserver = doc.defaultView?.ResizeObserver || ResizeObserver;
+	resizeObserver = new FrameResizeObserver(updateHeight);
+	resizeObserver.observe(canvasRoot.value);
+	resizeObserver.observe(doc.body);
+	updateHeight();
+
+	headObserver = new MutationObserver(() => {
+		if (!currentDocument) return;
+		cloneEditorStyles(currentDocument);
+	});
+	headObserver.observe(document.head, { childList: true, subtree: true, characterData: true });
+
+	emit("ready", props.breakpoint, doc, canvasRoot.value, frame);
+}
+
+watch(
+	iframe,
+	(frame, previous) => {
+		previous?.removeEventListener("load", attachFrame);
+		frame?.addEventListener("load", attachFrame);
+		attachFrame();
+	},
+	{ flush: "post" },
+);
+
+watch(
+	() => [props.dark, document.documentElement.dataset.theme],
+	() => currentDocument && syncDocumentChrome(currentDocument),
+);
+
+onBeforeUnmount(() => {
+	iframe.value?.removeEventListener("load", attachFrame);
+	cleanupFrame();
+});
+</script>
diff --git a/frontend/src/components/MarginHandler.vue b/frontend/src/components/MarginHandler.vue
index c58440660..9574c52ad 100644
--- a/frontend/src/components/MarginHandler.vue
+++ b/frontend/src/components/MarginHandler.vue
@@ -115,6 +115,7 @@
 <script setup lang="ts">
 import type Block from "@/block";
 import { Position, useSpacingHandler } from "@/composables/useSpacingHandler";
+import { getComputedStyleFor } from "@/utils/canvasFrameDom";
 import { computed, watchEffect } from "vue";
 import { getNumberFromPx } from "../utils/helpers";
 const props = withDefaults(
@@ -146,7 +147,7 @@ const topMarginHandlerHeight = computed(() => {
 	blockStyles.value.marginTop;
 	blockStyles.value.display;
 	blockStyles.value.margin;
-	let marginTop = window.getComputedStyle(props.target).marginTop;
+	let marginTop = getComputedStyleFor(props.target).marginTop;
 	let value = getNumberFromPx(marginTop) * canvasProps.scale;
 	return value;
 });
@@ -154,7 +155,7 @@ const bottomMarginHandlerHeight = computed(() => {
 	blockStyles.value.marginBottom;
 	blockStyles.value.display;
 	blockStyles.value.margin;
-	let marginBottom = window.getComputedStyle(props.target).marginBottom;
+	let marginBottom = getComputedStyleFor(props.target).marginBottom;
 	let value = getNumberFromPx(marginBottom) * canvasProps.scale;
 	return value;
 });
@@ -162,7 +163,7 @@ const leftMarginHandlerWidth = computed(() => {
 	blockStyles.value.marginLeft;
 	blockStyles.value.display;
 	blockStyles.value.margin;
-	let marginLeft = window.getComputedStyle(props.target).marginLeft;
+	let marginLeft = getComputedStyleFor(props.target).marginLeft;
 	let value = getNumberFromPx(marginLeft) * canvasProps.scale;
 	return value;
 });
@@ -170,7 +171,7 @@ const rightMarginHandlerWidth = computed(() => {
 	blockStyles.value.marginRight;
 	blockStyles.value.display;
 	blockStyles.value.margin;
-	let marginRight = window.getComputedStyle(props.target).marginRight;
+	let marginRight = getComputedStyleFor(props.target).marginRight;
 	let value = getNumberFromPx(marginRight) * canvasProps.scale;
 	return value;
 });
diff --git a/frontend/src/components/PaddingHandler.vue b/frontend/src/components/PaddingHandler.vue
index bc3e06dbf..9208c45b0 100644
--- a/frontend/src/components/PaddingHandler.vue
+++ b/frontend/src/components/PaddingHandler.vue
@@ -111,6 +111,7 @@
 <script setup lang="ts">
 import type Block from "@/block";
 import { Position, useSpacingHandler } from "@/composables/useSpacingHandler";
+import { getComputedStyleFor } from "@/utils/canvasFrameDom";
 import { computed, ref, watchEffect } from "vue";
 import { getNumberFromPx } from "../utils/helpers";
 
@@ -163,7 +164,7 @@ const getPadding = (side: "Top" | "Left" | "Right" | "Bottom") => {
 	blockStyles.value.paddingBottom;
 	blockStyles.value.paddingLeft;
 	blockStyles.value.padding;
-	return getNumberFromPx(getComputedStyle(props.target)[`padding${side}`]) * canvasProps.scale;
+	return getNumberFromPx(getComputedStyleFor(props.target)[`padding${side}`]) * canvasProps.scale;
 };
 
 const topHandle = computed(() => {
diff --git a/frontend/src/components/TextBlock.vue b/frontend/src/components/TextBlock.vue
index 98259df11..5bb09e25a 100644
--- a/frontend/src/components/TextBlock.vue
+++ b/frontend/src/components/TextBlock.vue
@@ -48,7 +48,6 @@ const canvasStore = useCanvasStore();
 const dataChanged = ref(false);
 const component = ref(null) as Ref<HTMLElement | null>;
 const bubbleMenu = ref(null) as Ref<{ handleKeydown: (e: KeyboardEvent) => void } | null>;
-const overlayElement = document.querySelector("#overlay") as HTMLElement;
 let editor: Ref<Editor | null> = ref(null);
 let selectionTriggered = false as boolean;
 
@@ -71,6 +70,9 @@ const props = withDefaults(
 );
 
 const canvasProps = !props.preview ? (inject("canvasProps") as CanvasProps) : null;
+const overlayElement = computed(
+	() => component.value?.ownerDocument.body || canvasProps?.overlayElement || document.body,
+);
 
 const FontFamilyPasteRule = Extension.create({
 	name: "fontFamilyPasteRule",
@@ -184,7 +186,7 @@ const showEditor = computed(() => {
 
 onBeforeMount(() => {
 	let html = props.block.getInnerHTML() || "";
-	setFontFromHTML(html);
+	setFontFromHTML(html, component.value?.ownerDocument || document);
 });
 
 let pauseId: PauseId | undefined = undefined;
@@ -353,7 +355,7 @@ const handleEscKey = () => {
 };
 
 const handleClickOutside = (e: MouseEvent) => {
-	if ((e.target as HTMLElement).closest(".canvas-container")) {
+	if ((e.target as HTMLElement).closest(".canvas, .canvas-container")) {
 		canvasStore.editableBlock = null;
 	}
 };
diff --git a/frontend/src/stores/builderStore.ts b/frontend/src/stores/builderStore.ts
index fa3519057..f13775309 100644
--- a/frontend/src/stores/builderStore.ts
+++ b/frontend/src/stores/builderStore.ts
@@ -46,6 +46,7 @@ const useBuilderStore = defineStore("builderStore", {
 			attribute: "data-theme",
 		}),
 		canvasDarkMode: useStorage("canvasDarkMode", false),
+		runCanvasScripts: false,
 		highlightBlocksWithClientScripts: false,
 		showSettingsDialog: false,
 		settingsActiveTab: <string>"page_general",
diff --git a/frontend/src/stores/canvasStore.ts b/frontend/src/stores/canvasStore.ts
index 8aff08ed6..540e86ab4 100644
--- a/frontend/src/stores/canvasStore.ts
+++ b/frontend/src/stores/canvasStore.ts
@@ -255,18 +255,19 @@ const useCanvasStore = defineStore("canvasStore", {
 			// to avoid re-rendering the whole canvas
 			if (this.dropTarget.placeholder) return;
 
-			let element = document.createElement("div");
-			element.id = "placeholder";
+			const breakpoint = this.activeCanvas?.hoveredBreakpoint || this.activeCanvas?.activeBreakpoint;
+			const frameRoot = breakpoint ? this.activeCanvas?.canvasProps.frameRoots?.get(breakpoint) : null;
+			const root = frameRoot?.querySelector(".__builder_component__[data-block-id='root']");
+			if (!root) return;
 
-			const root = document.querySelector(".__builder_component__[data-block-id='root']");
-			if (root) {
-				this.dropTarget.placeholder = root.appendChild(element);
-			}
+			let element = root.ownerDocument.createElement("div");
+			element.id = "placeholder";
+			this.dropTarget.placeholder = root.appendChild(element);
 			return this.dropTarget.placeholder;
 		},
 
 		removeDropPlaceholder() {
-			const placeholder = document.getElementById("placeholder");
+			const placeholder = this.dropTarget.placeholder;
 			if (placeholder) {
 				placeholder.remove();
 			}
diff --git a/frontend/src/types/Builder/BuilderCanvas.ts b/frontend/src/types/Builder/BuilderCanvas.ts
index e70a25cfd..558a83ceb 100644
--- a/frontend/src/types/Builder/BuilderCanvas.ts
+++ b/frontend/src/types/Builder/BuilderCanvas.ts
@@ -20,6 +20,8 @@ export interface CanvasProps {
 	scaling: boolean;
 	panning: boolean;
 	breakpoints: BreakpointConfig[];
+	frameDocuments?: Map<string, Document>;
+	frameRoots?: Map<string, HTMLElement>;
 }
 
 export type CanvasHistory = Ref<ReturnType<typeof useCanvasHistory>>;
diff --git a/frontend/src/utils/canvasFrameDom.ts b/frontend/src/utils/canvasFrameDom.ts
new file mode 100644
index 000000000..0550ee305
--- /dev/null
+++ b/frontend/src/utils/canvasFrameDom.ts
@@ -0,0 +1,80 @@
+export type CanvasFramePoint = {
+	x: number;
+	y: number;
+};
+
+export function getElementDocument(element: Element | null): Document {
+	return element?.ownerDocument || document;
+}
+
+export function getElementWindow(element: Element | null): Window {
+	return getElementDocument(element).defaultView || window;
+}
+
+export function getComputedStyleFor(element: Element): CSSStyleDeclaration {
+	return getElementWindow(element).getComputedStyle(element);
+}
+
+export function getFrameElement(doc: Document): HTMLIFrameElement | null {
+	const frame = doc.defaultView?.frameElement;
+	return frame && frame.tagName === "IFRAME" ? (frame as HTMLIFrameElement) : null;
+}
+
+export function getElementRectInEditor(element: Element): DOMRect {
+	const rect = element.getBoundingClientRect();
+	const frame = getFrameElement(element.ownerDocument);
+	if (!frame) return rect;
+
+	const frameRect = frame.getBoundingClientRect();
+	const scaleX = frame.clientWidth ? frameRect.width / frame.clientWidth : 1;
+	const scaleY = frame.clientHeight ? frameRect.height / frame.clientHeight : 1;
+
+	return new DOMRect(
+		frameRect.left + rect.left * scaleX,
+		frameRect.top + rect.top * scaleY,
+		rect.width * scaleX,
+		rect.height * scaleY,
+	);
+}
+
+export function framePointToEditor(doc: Document, point: CanvasFramePoint): CanvasFramePoint {
+	const frame = getFrameElement(doc);
+	if (!frame) return point;
+
+	const frameRect = frame.getBoundingClientRect();
+	const scaleX = frame.clientWidth ? frameRect.width / frame.clientWidth : 1;
+	const scaleY = frame.clientHeight ? frameRect.height / frame.clientHeight : 1;
+	return {
+		x: frameRect.left + point.x * scaleX,
+		y: frameRect.top + point.y * scaleY,
+	};
+}
+
+export function editorPointToFrame(frame: HTMLIFrameElement, point: CanvasFramePoint): CanvasFramePoint {
+	const rect = frame.getBoundingClientRect();
+	const scaleX = frame.clientWidth ? rect.width / frame.clientWidth : 1;
+	const scaleY = frame.clientHeight ? rect.height / frame.clientHeight : 1;
+	return {
+		x: (point.x - rect.left) / scaleX,
+		y: (point.y - rect.top) / scaleY,
+	};
+}
+
+export function elementFromEditorPoint(x: number, y: number): Element | null {
+	const outerElement = document.elementFromPoint(x, y);
+	if (!(outerElement instanceof HTMLIFrameElement)) return outerElement;
+
+	const frameDocument = outerElement.contentDocument;
+	if (!frameDocument) return outerElement;
+	const point = editorPointToFrame(outerElement, { x, y });
+	return frameDocument.elementFromPoint(point.x, point.y) || outerElement;
+}
+
+export function isElementLike(value: unknown): value is Element {
+	return Boolean(
+		value &&
+			typeof value === "object" &&
+			"nodeType" in value &&
+			(value as { nodeType: number }).nodeType === Node.ELEMENT_NODE,
+	);
+}
diff --git a/frontend/src/utils/fontManager.ts b/frontend/src/utils/fontManager.ts
index 94d7ca0a8..b6d1cbf88 100644
--- a/frontend/src/utils/fontManager.ts
+++ b/frontend/src/utils/fontManager.ts
@@ -20,13 +20,14 @@ const WEIGHT_LABELS: Record<FontWeight, string> = {
 };
 
 const GF_CSS = "https://fonts.googleapis.com/css2";
-const fontCache = new Map<string, Promise<string>>();
+const fontCache = new WeakMap<Document, Map<string, Promise<string>>>();
 
-function loadCustomFont(font: string, url: string): Promise<string> {
-	return new FontFace(font, `url("${url}")`)
+function loadCustomFont(font: string, url: string, targetDocument: Document): Promise<string> {
+	const FontFaceConstructor = targetDocument.defaultView?.FontFace || FontFace;
+	return new FontFaceConstructor(font, `url("${url}")`)
 		.load()
 		.then((face) => {
-			document.fonts.add(face);
+			targetDocument.fonts.add(face);
 			return font;
 		})
 		.catch(() => {
@@ -35,12 +36,17 @@ function loadCustomFont(font: string, url: string): Promise<string> {
 		});
 }
 
-function loadGoogleFont(font: string, weight?: string): Promise<string> {
+function loadGoogleFont(font: string, weight: string | undefined, targetDocument: Document): Promise<string> {
 	const familyParam = weight ? `${encodeURIComponent(font)}:wght@${weight}` : encodeURIComponent(font);
 
 	return new Promise<string>((resolve) => {
 		const id = `gf-${font.replace(/\s+/g, "-")}${weight ? `-${weight}` : ""}`;
-		const link = document.createElement("link");
+		const existing = targetDocument.getElementById(id);
+		if (existing) {
+			resolve(font);
+			return;
+		}
+		const link = targetDocument.createElement("link");
 		link.id = id;
 		link.rel = "stylesheet";
 		link.crossOrigin = "anonymous";
@@ -54,14 +60,23 @@ function loadGoogleFont(font: string, weight?: string): Promise<string> {
 			},
 			{ once: true },
 		);
-		document.head.appendChild(link);
+		targetDocument.head.appendChild(link);
 	});
 }
 
-export function setFont(font: string | null, weight?: string): Promise<string> {
+export function setFont(
+	font: string | null,
+	weight?: string,
+	targetDocument: Document = document,
+): Promise<string> {
 	if (!font) return Promise.resolve("");
 	const cacheKey = weight ? `${font}:${weight}` : font;
-	if (fontCache.has(cacheKey)) return fontCache.get(cacheKey)!;
+	let documentCache = fontCache.get(targetDocument);
+	if (!documentCache) {
+		documentCache = new Map();
+		fontCache.set(targetDocument, documentCache);
+	}
+	if (documentCache.has(cacheKey)) return documentCache.get(cacheKey)!;
 
 	// userFont list resource may not have loaded yet (e.g. a page rendered right
 	// after navigation); fall back to treating it as a Google font until it does.
@@ -69,18 +84,20 @@ export function setFont(font: string | null, weight?: string): Promise<string> {
 		(f: { font_name: string; font_file: string }) => f.font_name === font,
 	);
 
-	const promise = customFont ? loadCustomFont(font, customFont.font_file) : loadGoogleFont(font, weight);
+	const promise = customFont
+		? loadCustomFont(font, customFont.font_file, targetDocument)
+		: loadGoogleFont(font, weight, targetDocument);
 
-	fontCache.set(cacheKey, promise);
+	documentCache.set(cacheKey, promise);
 	return promise;
 }
 
-export function setFontFromHTML(html: string): void {
+export function setFontFromHTML(html: string, targetDocument: Document = document): void {
 	const matches = html.match(/font-family:\s*([^;"]+)[";]/g) ?? [];
 	matches
 		.map((m) => m.replace(/font-family:\s*([^;"]+)[";]/, "$1").trim())
 		.filter(Boolean)
-		.forEach((font) => setFont(font));
+		.forEach((font) => setFont(font, undefined, targetDocument));
 }
 
 export function getFontWeightOptions(font: string): WeightOption[] {
diff --git a/frontend/src/utils/guidesTracker.ts b/frontend/src/utils/guidesTracker.ts
index 77a119ed5..b99b3d062 100644
--- a/frontend/src/utils/guidesTracker.ts
+++ b/frontend/src/utils/guidesTracker.ts
@@ -1,6 +1,5 @@
 import useCanvasStore from "@/stores/canvasStore";
-import { useElementBounding } from "@vueuse/core";
-import { reactive } from "vue";
+import { getElementRectInEditor } from "./canvasFrameDom";
 const canvasStore = useCanvasStore();
 const tracks = [
 	{
@@ -27,11 +26,10 @@ const tracks = [
 
 function setGuides(target: HTMLElement | SVGElement, canvasProps: CanvasProps) {
 	const threshold = 10;
-	// TODO: Remove canvas dependency
 	const canvasElement = target.closest(".canvas") as HTMLElement;
-	const canvasBounds = reactive(useElementBounding(canvasElement));
-	const targetBounds = reactive(useElementBounding(target));
-	const parentBounds = reactive(useElementBounding(target.parentElement as HTMLElement));
+	const canvasBounds = createBounds(canvasElement);
+	const targetBounds = createBounds(target);
+	const parentBounds = createBounds(target.parentElement as HTMLElement);
 
 	const getFinalWidth = (calculatedWidth: number) => {
 		targetBounds.update();
@@ -161,4 +159,31 @@ function setGuides(target: HTMLElement | SVGElement, canvasProps: CanvasProps) {
 	};
 }
 
+function createBounds(element: Element) {
+	let rect = getElementRectInEditor(element);
+	return {
+		get left() {
+			return rect.left;
+		},
+		get right() {
+			return rect.right;
+		},
+		get top() {
+			return rect.top;
+		},
+		get bottom() {
+			return rect.bottom;
+		},
+		get width() {
+			return rect.width;
+		},
+		get height() {
+			return rect.height;
+		},
+		update() {
+			rect = getElementRectInEditor(element);
+		},
+	};
+}
+
 export default setGuides;
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index b74b16510..28ff6d867 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -4,6 +4,7 @@ import { BuilderPage } from "@/types/doctypes";
 import getBlockTemplate from "@/utils/blockTemplate";
 import { dialog, FileUploadHandler, toast } from "frappe-ui";
 import { reactive, toRaw } from "vue";
+import { isElementLike } from "./canvasFrameDom";
 import { getRGB, HexToHSV, HSVToHex } from "./colors";
 import {
 	addPxToNumber,
@@ -504,10 +505,7 @@ function generateId() {
 }
 
 function isBlock(e: MouseEvent) {
-	return (
-		(e.target instanceof HTMLElement || e.target instanceof SVGElement) &&
-		e.target.closest(".__builder_component__")
-	);
+	return isElementLike(e.target) && e.target.closest(".__builder_component__");
 }
 
 type BlockInfo = {
diff --git a/frontend/src/utils/scriptSandbox.ts b/frontend/src/utils/scriptSandbox.ts
index 1aba8af32..a15436790 100644
--- a/frontend/src/utils/scriptSandbox.ts
+++ b/frontend/src/utils/scriptSandbox.ts
@@ -17,10 +17,11 @@ type ScriptContext = {
 	props?: Record<string, any>;
 };
 
-function createEvents(defaultTarget: EventTarget) {
+function createEvents(defaultTarget: EventTarget, targetWindow: Window) {
+	const CustomEventConstructor = (targetWindow as any).CustomEvent as typeof CustomEvent;
 	return {
 		dispatch(name: string, data: any, target: EventTarget = defaultTarget) {
-			target.dispatchEvent(new CustomEvent(name, { detail: data }));
+			target.dispatchEvent(new CustomEventConstructor(name, { detail: data }));
 		},
 		listen(name: string, callback: (data: any, event: Event) => void, target: EventTarget = defaultTarget) {
 			const handler = (event: Event) => callback((event as CustomEvent).detail, event);
@@ -30,8 +31,9 @@ function createEvents(defaultTarget: EventTarget) {
 	};
 }
 
-function createScriptFunction(userScript: string) {
-	return new Function(
+function createScriptFunction(userScript: string, targetWindow: Window) {
+	const FunctionConstructor = (targetWindow as any).Function as FunctionConstructor;
+	return new FunctionConstructor(
 		"context",
 		`with (context) {
 			return (async function(component_data, props) { ${userScript} })
@@ -48,18 +50,26 @@ function executeClientScriptUnrestricted(
 	if (!thisElement || !userScript.trim()) return () => {};
 
 	try {
-		const fn = createScriptFunction(userScript);
+		const targetDocument = thisElement.ownerDocument;
+		const targetWindow = targetDocument.defaultView || window;
+		const fn = createScriptFunction(userScript, targetWindow);
 		const cleanup = fn({
 			component_data: componentData,
-			document,
-			events: createEvents(document),
+			document: targetDocument,
+			events: createEvents(targetDocument, targetWindow),
 			props,
 			thisRef: thisElement,
 		});
-		if (typeof cleanup !== "function") return () => {};
+		let disposed = false;
+		let resolvedCleanup: unknown;
+		Promise.resolve(cleanup).then((value) => {
+			resolvedCleanup = value;
+			if (disposed && typeof value === "function") value.call(thisElement);
+		});
 		return () => {
+			disposed = true;
 			try {
-				cleanup.call(thisElement);
+				if (typeof resolvedCleanup === "function") resolvedCleanup.call(thisElement);
 			} catch (error) {
 				console.error("Error cleaning up user script (unrestricted):", error);
 			}
@@ -81,6 +91,14 @@ function executeClientScriptRestricted(
 	{ componentData = {}, props = {} }: ScriptContext = {},
 ): ScriptCleanup {
 	if (!thisElement || !sandboxRoot || !userScript.trim()) return () => {};
+	const targetDocument = thisElement.ownerDocument;
+	const targetWindow = targetDocument.defaultView || window;
+	const FrameNode = targetWindow.Node;
+	const FrameNamedNodeMap = targetWindow.NamedNodeMap;
+	const FrameDOMTokenList = targetWindow.DOMTokenList;
+	const FrameCSSStyleDeclaration = targetWindow.CSSStyleDeclaration;
+	const FrameNodeList = targetWindow.NodeList;
+	const FrameHTMLCollection = targetWindow.HTMLCollection;
 
 	const cache = new WeakMap<object, any>();
 	const rawValues = new WeakMap<object, object>();
@@ -129,11 +147,15 @@ function executeClientScriptRestricted(
 			const val = Reflect.get(target, prop, target);
 
 			// Wrap DOM returns
-			if (val instanceof Node) return wrap(val);
-			if (val instanceof NamedNodeMap || val instanceof DOMTokenList || val instanceof CSSStyleDeclaration)
+			if (val instanceof FrameNode) return wrap(val);
+			if (
+				val instanceof FrameNamedNodeMap ||
+				val instanceof FrameDOMTokenList ||
+				val instanceof FrameCSSStyleDeclaration
+			)
 				return wrap(val as any);
 
-			if (val instanceof NodeList || val instanceof HTMLCollection) {
+			if (val instanceof FrameNodeList || val instanceof FrameHTMLCollection) {
 				return Array.from(val, wrap);
 			}
 
@@ -161,7 +183,7 @@ function executeClientScriptRestricted(
 
 					// Do not allow inserting nodes outside the sandbox
 					for (const a of realArgs) {
-						if (a instanceof Node && !sandboxRoot.contains(a)) {
+						if (a instanceof FrameNode && !sandboxRoot.contains(a)) {
 							throw new Error("Blocked: external node insertion");
 						}
 					}
@@ -193,7 +215,7 @@ function executeClientScriptRestricted(
 
 	const context = {
 		document: proxiedRoot,
-		events: createEvents(proxiedRoot),
+		events: createEvents(proxiedRoot, targetWindow),
 		thisRef: proxiedThis,
 		props,
 		component_data: componentData,
@@ -207,15 +229,22 @@ function executeClientScriptRestricted(
 	};
 
 	try {
-		const fn = createScriptFunction(userScript);
+		const fn = createScriptFunction(userScript, targetWindow);
 		const userCleanup = fn(context);
+		let disposed = false;
+		let resolvedCleanup: unknown;
+		Promise.resolve(userCleanup).then((value) => {
+			resolvedCleanup = value;
+			if (disposed && typeof value === "function") value.call(proxiedThis);
+		});
 		return () => {
+			disposed = true;
 			eventListeners.forEach(({ target, type, listener, options }) => {
 				target.removeEventListener(type, listener, options);
 			});
-			if (typeof userCleanup === "function") {
+			if (typeof resolvedCleanup === "function") {
 				try {
-					userCleanup.call(proxiedThis);
+					resolvedCleanup.call(proxiedThis);
 				} catch (error) {
 					console.error("Error cleaning up user script (restricted):", error);
 				}
diff --git a/frontend/src/utils/trackTarget.ts b/frontend/src/utils/trackTarget.ts
index 295bfa374..14cfaac02 100644
--- a/frontend/src/utils/trackTarget.ts
+++ b/frontend/src/utils/trackTarget.ts
@@ -1,36 +1,32 @@
-import { useElementBounding } from "@vueuse/core";
 import { nextTick, onScopeDispose, reactive, watch, watchEffect } from "vue";
 import { addPxToNumber } from "./helpers";
+import { getElementRectInEditor } from "./canvasFrameDom";
 
-// All tracked targets share one MutationObserver on the canvas container. It is
-// created when the first target registers and disconnected once the last one is
-// removed, so it survives individual BlockEditor remounts (a component-scoped
-// observer would die with whichever editor happened to create it) without leaking
-// stale updaters across the session.
-const updateList = new Set<() => void>();
-let observer: MutationObserver | null = null;
-
-function startObserver(container: HTMLElement) {
-	observer = new MutationObserver(() => {
-		nextTick(() => updateList.forEach((fn) => fn()));
+function trackTarget(target: HTMLElement | SVGElement, host: HTMLElement, canvasProps: CanvasProps) {
+	const targetBounds = reactive({
+		width: 0,
+		height: 0,
+		top: 0,
+		left: 0,
+		update() {
+			const rect = getElementRectInEditor(target);
+			targetBounds.width = rect.width;
+			targetBounds.height = rect.height;
+			targetBounds.top = rect.top;
+			targetBounds.left = rect.left;
+		},
 	});
-	observer.observe(container, {
+	const observer = new MutationObserver(() => nextTick(targetBounds.update));
+	observer.observe(target.ownerDocument.body, {
 		attributes: true,
 		childList: true,
 		subtree: true,
 		attributeFilter: ["style", "class"],
 		characterData: true,
 	});
-}
-
-function trackTarget(target: HTMLElement | SVGElement, host: HTMLElement, canvasProps: CanvasProps) {
-	const targetBounds = reactive(useElementBounding(target));
-	const container = target.closest(".canvas-container") as HTMLElement | null;
-
-	updateList.add(targetBounds.update);
-	if (container && !observer) {
-		startObserver(container);
-	}
+	const resizeObserver = new ResizeObserver(() => targetBounds.update());
+	resizeObserver.observe(target);
+	targetBounds.update();
 
 	watch(canvasProps, () => nextTick(targetBounds.update), { deep: true });
 
@@ -42,11 +38,8 @@ function trackTarget(target: HTMLElement | SVGElement, host: HTMLElement, canvas
 	});
 
 	onScopeDispose(() => {
-		updateList.delete(targetBounds.update);
-		if (updateList.size === 0 && observer) {
-			observer.disconnect();
-			observer = null;
-		}
+		observer.disconnect();
+		resizeObserver.disconnect();
 	});
 
 	return targetBounds.update;
diff --git a/frontend/src/utils/useBlockEventHandlers.ts b/frontend/src/utils/useBlockEventHandlers.ts
index c50963e73..3987c891d 100644
--- a/frontend/src/utils/useBlockEventHandlers.ts
+++ b/frontend/src/utils/useBlockEventHandlers.ts
@@ -2,85 +2,98 @@ import useBuilderStore from "@/stores/builderStore";
 import useCanvasStore from "@/stores/canvasStore";
 import getBlockTemplate from "@/utils/blockTemplate";
 import { getBlock, getBlockInfo, isBlock } from "@/utils/helpers";
-import { useEventListener } from "@vueuse/core";
+import { framePointToEditor } from "@/utils/canvasFrameDom";
 import { nextTick } from "vue";
 
 const builderStore = useBuilderStore();
 const canvasStore = useCanvasStore();
 
 export function useBlockEventHandlers(target: HTMLElement) {
-	useEventListener(target, "click", handleClick);
-	useEventListener(target, "dblclick", handleDoubleClick);
-	useEventListener(target, "contextmenu", triggerContextMenu);
+	target.addEventListener("click", handleBlockClick);
+	target.addEventListener("dblclick", handleBlockDoubleClick);
+	target.addEventListener("contextmenu", handleBlockContextMenu);
 
-	function handleClick(e: MouseEvent) {
-		if (!isBlock(e) || isEditable(e)) return;
-		if (canvasStore.preventClick) {
-			e.stopPropagation();
-			e.preventDefault();
-			canvasStore.preventClick = false;
-			return;
-		}
-		selectBlock(e);
+	return () => {
+		target.removeEventListener("click", handleBlockClick);
+		target.removeEventListener("dblclick", handleBlockDoubleClick);
+		target.removeEventListener("contextmenu", handleBlockContextMenu);
+	};
+}
+
+export function handleBlockClick(e: MouseEvent) {
+	if (!isBlock(e) || isEditable(e)) return;
+	if (canvasStore.preventClick) {
 		e.stopPropagation();
 		e.preventDefault();
+		canvasStore.preventClick = false;
+		return;
 	}
+	selectBlock(e);
+	e.stopPropagation();
+	e.preventDefault();
+}
 
-	function handleDoubleClick(e: MouseEvent) {
-		if (!isBlock(e) || isEditable(e)) return;
-		canvasStore.editableBlock = null;
-		const block = getBlock(e);
-		if (!block) return;
-		if (block.isImage()) {
-			nextTick(() => {
-				builderStore.openImageUpload = true;
-			});
-			e.stopPropagation();
-			return;
-		}
-		if (block.isText() || block.isLink() || block.isButton()) {
-			canvasStore.editableBlock = block;
-			e.stopPropagation();
-		}
-
-		// dblclick on container adds text block or selects text block if only one child
-		let children = block.getChildren();
-		if (block.isHTML()) {
-			document
-				.querySelector(`.editor[data-block-id="${block.blockId}"]`)
-				?.dispatchEvent(new MouseEvent("dblclick", e));
-			e.stopPropagation();
-		} else if (block.isContainer()) {
-			if (!children.length) {
-				const child = getBlockTemplate("text");
-				block.setBaseStyle("alignItems", "center");
-				block.setBaseStyle("justifyContent", "center");
-				const childBlock = block.addChild(child);
-				childBlock.makeBlockEditable();
-			} else if (children.length === 1 && children[0].isText()) {
-				const child = children[0];
-				child.makeBlockEditable();
-			}
-			e.stopPropagation();
-		}
+export function handleBlockDoubleClick(e: MouseEvent) {
+	if (!isBlock(e) || isEditable(e)) return;
+	canvasStore.editableBlock = null;
+	const block = getBlock(e);
+	if (!block) return;
+	if (block.isImage()) {
+		nextTick(() => {
+			builderStore.openImageUpload = true;
+		});
+		e.stopPropagation();
+		return;
+	}
+	if (block.isText() || block.isLink() || block.isButton()) {
+		canvasStore.editableBlock = block;
+		e.stopPropagation();
 	}
 
-	function triggerContextMenu(e: MouseEvent) {
-		if (!isBlock(e) || isEditable(e)) return;
-		const block = getBlock(e);
-		const { blockId } = getBlockInfo(e);
-		if (block && block.isRoot()) return;
+	// dblclick on container adds text block or selects text block if only one child
+	let children = block.getChildren();
+	if (block.isHTML()) {
+		document
+			.querySelector(`.editor[data-block-id="${block.blockId}"]`)
+			?.dispatchEvent(new MouseEvent("dblclick", { bubbles: true, cancelable: true }));
+		e.stopPropagation();
+	} else if (block.isContainer()) {
+		if (!children.length) {
+			const child = getBlockTemplate("text");
+			block.setBaseStyle("alignItems", "center");
+			block.setBaseStyle("justifyContent", "center");
+			const childBlock = block.addChild(child);
+			childBlock.makeBlockEditable();
+		} else if (children.length === 1 && children[0].isText()) {
+			const child = children[0];
+			child.makeBlockEditable();
+		}
 		e.stopPropagation();
-		e.preventDefault();
-		selectBlock(e);
-		nextTick(() => {
-			document
-				.querySelector(`.editor[data-block-id="${blockId}"]`)
-				?.dispatchEvent(new MouseEvent("contextmenu", e));
-		});
 	}
 }
 
+export function handleBlockContextMenu(e: MouseEvent) {
+	if (!isBlock(e) || isEditable(e)) return;
+	const block = getBlock(e);
+	const { blockId } = getBlockInfo(e);
+	if (block && block.isRoot()) return;
+	e.stopPropagation();
+	e.preventDefault();
+	selectBlock(e);
+	const ownerDocument = (e.target as Element).ownerDocument;
+	const point = framePointToEditor(ownerDocument, { x: e.clientX, y: e.clientY });
+	nextTick(() => {
+		document.querySelector(`.editor[data-block-id="${blockId}"]`)?.dispatchEvent(
+			new MouseEvent("contextmenu", {
+				bubbles: true,
+				cancelable: true,
+				clientX: point.x,
+				clientY: point.y,
+			}),
+		);
+	});
+}
+
 const isEditable = (e: MouseEvent) => {
 	const { blockId, breakpoint } = getBlockInfo(e);
 	// to ensure it is right block and not on different breakpoint
diff --git a/frontend/src/utils/useBuilderEvents.ts b/frontend/src/utils/useBuilderEvents.ts
index f5a117dd7..a30615e03 100644
--- a/frontend/src/utils/useBuilderEvents.ts
+++ b/frontend/src/utils/useBuilderEvents.ts
@@ -361,6 +361,7 @@ export function useBuilderEvents(
 			description: "Undo",
 			group: "Edit",
 			handler: () => {
+				console.log(canvasStore.activeCanvas?.history?.canUndo())
 				if (canvasStore.activeCanvas?.history?.canUndo) {
 					canvasStore.activeCanvas?.history.undo();
 				}
diff --git a/frontend/src/utils/useCanvasDropZone.ts b/frontend/src/utils/useCanvasDropZone.ts
index d49f787fd..34851a4ed 100644
--- a/frontend/src/utils/useCanvasDropZone.ts
+++ b/frontend/src/utils/useCanvasDropZone.ts
@@ -15,6 +15,7 @@ import { useDropZone } from "@vueuse/core";
 import { useTelemetry } from "frappe-ui/frappe";
 import { Ref } from "vue";
 import blockController from "./blockController";
+import { getComputedStyleFor } from "./canvasFrameDom";
 
 const { capture } = useTelemetry();
 const builderStore = useBuilderStore();
@@ -69,7 +70,9 @@ export function useCanvasDropZone(
 	});
 
 	const getInitialParentBlock = (ev: DragEvent) => {
-		const element = document.elementFromPoint(ev.x, ev.y) as HTMLElement;
+		const ownerDocument = (ev.currentTarget as Element | null)?.ownerDocument || document;
+		const element = ownerDocument.elementFromPoint(ev.x, ev.y) as HTMLElement;
+		if (!element) return block.value as Block | null;
 		const targetElement = element.closest(".__builder_component__") as HTMLElement;
 
 		// set the hoveredBreakpoint from the target element to show placeholder at the correct breakpoint canvas
@@ -97,7 +100,8 @@ export function useCanvasDropZone(
 	const getBlockElement = (block: Block) => {
 		const breakpoint =
 			canvasStore.activeCanvas?.hoveredBreakpoint || canvasStore.activeCanvas?.activeBreakpoint;
-		return document.querySelector(
+		const root = breakpoint ? canvasStore.activeCanvas?.canvasProps?.frameRoots?.get(breakpoint) : null;
+		return root?.querySelector(
 			`.__builder_component__[data-block-id="${block.blockId}"][data-breakpoint="${breakpoint}"]`,
 		) as HTMLElement;
 	};
@@ -158,7 +162,7 @@ export function useCanvasDropZone(
 	};
 
 	const getLayoutDirection = (element: HTMLElement): LayoutDirection => {
-		const style = window.getComputedStyle(element);
+		const style = getComputedStyleFor(element);
 		const display = style.display;
 		if (display === "flex" || display === "inline-flex") {
 			return style.flexDirection.includes("row") ? "row" : "column";
diff --git a/frontend/src/utils/useCanvasEvents.ts b/frontend/src/utils/useCanvasEvents.ts
index 97f85ffe4..410fed406 100644
--- a/frontend/src/utils/useCanvasEvents.ts
+++ b/frontend/src/utils/useCanvasEvents.ts
@@ -3,6 +3,7 @@ import useBuilderStore from "@/stores/builderStore";
 import useCanvasStore from "@/stores/canvasStore";
 import { CanvasHistory } from "@/types/Builder/BuilderCanvas";
 import getBlockTemplate from "@/utils/blockTemplate";
+import { getComputedStyleFor } from "@/utils/canvasFrameDom";
 import {
 	addPxToNumber,
 	getBlock,
@@ -24,9 +25,11 @@ export function useCanvasEvents(
 	selectedBlocks: Ref<Block[]>,
 	getRootBlock: () => Block,
 	findBlock: (blockId: string) => Block | null,
+	registerKeyboard = true,
+	eventTarget: EventTarget | Ref<EventTarget> = container,
 ) {
 	let counter = 0;
-	useEventListener(container, "mousedown", (ev: MouseEvent) => {
+	useEventListener(eventTarget, "mousedown", (ev: MouseEvent) => {
 		if (builderStore.mode === "move") {
 			return;
 		}
@@ -38,7 +41,9 @@ export function useCanvasEvents(
 			if (builderStore.readOnlyMode) return;
 			const pauseId = canvasHistory.value?.pause();
 			ev.stopPropagation();
-			let element = document.elementFromPoint(ev.x, ev.y) as HTMLElement;
+			const ownerDocument = container.value.ownerDocument;
+			const eventScale = ownerDocument === document ? canvasProps.scale : 1;
+			let element = ownerDocument.elementFromPoint(ev.x, ev.y) as HTMLElement;
 			let block = getRootBlock();
 			if (element) {
 				if (element.dataset.blockId) {
@@ -46,25 +51,26 @@ export function useCanvasEvents(
 				}
 			}
 			let parentBlock = getRootBlock();
-			if (element.dataset.blockId) {
+			if (element?.dataset.blockId) {
 				parentBlock = findBlock(element.dataset.blockId) || parentBlock;
 				while (parentBlock && !parentBlock.canHaveChildren()) {
 					parentBlock = parentBlock.getParentBlock() || getRootBlock();
 				}
 			}
 			const child = getBlockTemplate(builderStore.mode);
-			const parentElement = document.body.querySelector(
+			const parentElement = ownerDocument.body.querySelector(
 				`.canvas [data-block-id="${parentBlock.blockId}"]`,
 			) as HTMLElement;
+			if (!parentElement) return;
 			const parentOldPosition = parentBlock.getStyle("position");
 			if (parentOldPosition === "static" || parentOldPosition === "inherit" || !parentOldPosition) {
 				parentBlock.setBaseStyle("position", "relative");
 			}
 			const parentElementBounds = parentElement.getBoundingClientRect();
-			let x = (ev.x - parentElementBounds.left) / canvasProps.scale;
-			let y = (ev.y - parentElementBounds.top) / canvasProps.scale;
-			const parentWidth = getNumberFromPx(getComputedStyle(parentElement).width);
-			const parentHeight = getNumberFromPx(getComputedStyle(parentElement).height);
+			let x = (ev.x - parentElementBounds.left) / eventScale;
+			let y = (ev.y - parentElementBounds.top) / eventScale;
+			const parentWidth = getNumberFromPx(getComputedStyleFor(parentElement).width);
+			const parentHeight = getNumberFromPx(getComputedStyleFor(parentElement).height);
 
 			const childBlock = parentBlock.addChild(child);
 			childBlock.setBaseStyle("position", "absolute");
@@ -81,8 +87,8 @@ export function useCanvasEvents(
 					return;
 				} else {
 					mouseMoveEvent.preventDefault();
-					let width = (mouseMoveEvent.clientX - initialX) / canvasProps.scale;
-					let height = (mouseMoveEvent.clientY - initialY) / canvasProps.scale;
+					let width = (mouseMoveEvent.clientX - initialX) / eventScale;
+					let height = (mouseMoveEvent.clientY - initialY) / eventScale;
 					width = clamp(width, 0, parentWidth);
 					height = clamp(height, 0, parentHeight);
 					const setFullWidth = width === parentWidth;
@@ -90,12 +96,12 @@ export function useCanvasEvents(
 					childBlock.setBaseStyle("height", addPxToNumber(height));
 				}
 			};
-			useEventListener(document, "mousemove", mouseMoveHandler);
+			useEventListener(ownerDocument, "mousemove", mouseMoveHandler);
 			useEventListener(
-				document,
+				ownerDocument,
 				"mouseup",
 				() => {
-					document.removeEventListener("mousemove", mouseMoveHandler);
+					ownerDocument.removeEventListener("mousemove", mouseMoveHandler);
 					parentBlock.setBaseStyle("position", parentOldPosition || "static");
 					childBlock.setBaseStyle("position", "static");
 					childBlock.setBaseStyle("top", "auto");
@@ -113,10 +119,10 @@ export function useCanvasEvents(
 						childBlock.setStyle("width", "auto");
 						childBlock.setStyle("height", "100%");
 					} else {
-						if (getNumberFromPx(childBlock.getStyle("width")) < 100) {
+						if (getNumberFromPx(String(childBlock.getStyle("width") || "")) < 100) {
 							childBlock.setBaseStyle("width", "100%");
 						}
-						if (getNumberFromPx(childBlock.getStyle("height")) < 100) {
+						if (getNumberFromPx(String(childBlock.getStyle("height") || "")) < 100) {
 							childBlock.setBaseStyle("height", "200px");
 						}
 					}
@@ -130,26 +136,28 @@ export function useCanvasEvents(
 		}
 	});
 
-	useEventListener(container, "mousedown", (ev: MouseEvent) => {
+	useEventListener(eventTarget, "mousedown", (ev: MouseEvent) => {
 		if (builderStore.mode === "move") {
 			container.value.style.cursor = "grabbing";
 			const initialX = ev.clientX;
 			const initialY = ev.clientY;
 			const initialTranslateX = canvasProps.translateX;
 			const initialTranslateY = canvasProps.translateY;
+			const ownerDocument = container.value.ownerDocument;
+			const eventScale = ownerDocument === document ? canvasProps.scale : 1;
 			const mouseMoveHandler = (mouseMoveEvent: MouseEvent) => {
 				mouseMoveEvent.preventDefault();
-				const diffX = (mouseMoveEvent.clientX - initialX) / canvasProps.scale;
-				const diffY = (mouseMoveEvent.clientY - initialY) / canvasProps.scale;
+				const diffX = (mouseMoveEvent.clientX - initialX) / eventScale;
+				const diffY = (mouseMoveEvent.clientY - initialY) / eventScale;
 				canvasProps.translateX = initialTranslateX + diffX;
 				canvasProps.translateY = initialTranslateY + diffY;
 			};
-			useEventListener(document, "mousemove", mouseMoveHandler);
+			useEventListener(ownerDocument, "mousemove", mouseMoveHandler);
 			useEventListener(
-				document,
+				ownerDocument,
 				"mouseup",
 				() => {
-					document.removeEventListener("mousemove", mouseMoveHandler);
+					ownerDocument.removeEventListener("mousemove", mouseMoveHandler);
 					container.value.style.cursor = "grab";
 				},
 				{ once: true },
@@ -159,80 +167,81 @@ export function useCanvasEvents(
 		}
 	});
 
-	useEventListener(document, "keydown", (ev: KeyboardEvent) => {
-		// make sure reference container is not hidden or not editable
-		if (!container.value.offsetParent || isTargetEditable(ev) || selectedBlocks.value.length !== 1) {
-			return;
-		}
+	if (registerKeyboard)
+		useEventListener(document, "keydown", (ev: KeyboardEvent) => {
+			// make sure reference container is not hidden or not editable
+			if (!container.value.offsetParent || isTargetEditable(ev) || selectedBlocks.value.length !== 1) {
+				return;
+			}
 
-		const selectedBlock = selectedBlocks.value[0];
+			const selectedBlock = selectedBlocks.value[0];
 
-		const selectBlock = (block: Block | null) => {
-			// TODO: Use canvas's selectBlock instead of canvasStore's to avoid mixup with other canvas
-			if (block) canvasStore.selectBlock(block, null, true, true);
-			return !!block;
-		};
+			const selectBlock = (block: Block | null) => {
+				// TODO: Use canvas's selectBlock instead of canvasStore's to avoid mixup with other canvas
+				if (block) canvasStore.selectBlock(block, null, true, true);
+				return !!block;
+			};
 
-		const selectSibling = (direction: "previous" | "next", fallback: () => void) => {
-			selectBlock(selectedBlock.getSiblingBlock(direction)) || fallback();
-		};
+			const selectSibling = (direction: "previous" | "next", fallback: () => void) => {
+				selectBlock(selectedBlock.getSiblingBlock(direction)) || fallback();
+			};
 
-		const selectParent = () => selectBlock(selectedBlock.getParentBlock());
+			const selectParent = () => selectBlock(selectedBlock.getParentBlock());
 
-		const selectFirstChild = () => selectBlock(selectedBlock.children[0]);
+			const selectFirstChild = () => selectBlock(selectedBlock.children[0]);
 
-		const selectNextSiblingOrParent = () => {
-			let sibling = selectedBlock.getSiblingBlock("next");
-			let parentBlock = selectedBlock.getParentBlock();
-			while (!sibling && parentBlock) {
-				sibling = parentBlock.getSiblingBlock("next");
-				parentBlock = parentBlock.getParentBlock();
-			}
-			selectBlock(sibling);
-		};
-
-		const selectLastChildInTree = (block: Block) => {
-			let currentBlock = block;
-			while (builderStore.activeLayers?.isExpandedInTree(currentBlock)) {
-				const lastChild = currentBlock.getLastChild() as Block;
-				if (!lastChild) break;
-				currentBlock = lastChild;
+			const selectNextSiblingOrParent = () => {
+				let sibling = selectedBlock.getSiblingBlock("next");
+				let parentBlock = selectedBlock.getParentBlock();
+				while (!sibling && parentBlock) {
+					sibling = parentBlock.getSiblingBlock("next");
+					parentBlock = parentBlock.getParentBlock();
+				}
+				selectBlock(sibling);
+			};
+
+			const selectLastChildInTree = (block: Block) => {
+				let currentBlock = block;
+				while (builderStore.activeLayers?.isExpandedInTree(currentBlock)) {
+					const lastChild = currentBlock.getLastChild() as Block;
+					if (!lastChild) break;
+					currentBlock = lastChild;
+				}
+				selectBlock(currentBlock);
+			};
+
+			const arrowKeyHandlers = {
+				ArrowLeft: () => {
+					builderStore.activeLayers?.isExpandedInTree(selectedBlock)
+						? builderStore.activeLayers.toggleExpanded(selectedBlock)
+						: selectSibling("previous", selectParent);
+				},
+				ArrowRight: () => {
+					selectedBlock.hasChildren() && selectedBlock.isVisible()
+						? (builderStore.activeLayers?.toggleExpanded(selectedBlock), selectFirstChild())
+						: selectNextSiblingOrParent();
+				},
+				ArrowUp: () => {
+					const previousSibling = selectedBlock.getSiblingBlock("previous");
+					previousSibling ? selectLastChildInTree(previousSibling) : selectParent();
+				},
+				ArrowDown: () => {
+					builderStore.activeLayers?.isExpandedInTree(selectedBlock) &&
+					selectedBlock.hasChildren() &&
+					selectedBlock.isVisible()
+						? selectFirstChild()
+						: selectNextSiblingOrParent();
+				},
+			};
+
+			const handler = arrowKeyHandlers[ev.key as keyof typeof arrowKeyHandlers];
+			if (handler) {
+				handler();
+				ev.preventDefault();
 			}
-			selectBlock(currentBlock);
-		};
-
-		const arrowKeyHandlers = {
-			ArrowLeft: () => {
-				builderStore.activeLayers?.isExpandedInTree(selectedBlock)
-					? builderStore.activeLayers.toggleExpanded(selectedBlock)
-					: selectSibling("previous", selectParent);
-			},
-			ArrowRight: () => {
-				selectedBlock.hasChildren() && selectedBlock.isVisible()
-					? (builderStore.activeLayers?.toggleExpanded(selectedBlock), selectFirstChild())
-					: selectNextSiblingOrParent();
-			},
-			ArrowUp: () => {
-				const previousSibling = selectedBlock.getSiblingBlock("previous");
-				previousSibling ? selectLastChildInTree(previousSibling) : selectParent();
-			},
-			ArrowDown: () => {
-				builderStore.activeLayers?.isExpandedInTree(selectedBlock) &&
-				selectedBlock.hasChildren() &&
-				selectedBlock.isVisible()
-					? selectFirstChild()
-					: selectNextSiblingOrParent();
-			},
-		};
-
-		const handler = arrowKeyHandlers[ev.key as keyof typeof arrowKeyHandlers];
-		if (handler) {
-			handler();
-			ev.preventDefault();
-		}
-	});
+		});
 
-	useEventListener(container, "mouseover", handleMouseOver);
+	useEventListener(eventTarget, "mouseover", handleMouseOver);
 }
 
 function handleMouseOver(e: MouseEvent) {
diff --git a/frontend/src/utils/useCanvasMarqueeSelection.ts b/frontend/src/utils/useCanvasMarqueeSelection.ts
index 652df5437..1d34da5e0 100644
--- a/frontend/src/utils/useCanvasMarqueeSelection.ts
+++ b/frontend/src/utils/useCanvasMarqueeSelection.ts
@@ -2,6 +2,7 @@ import type Block from "@/block";
 import useBuilderStore from "@/stores/builderStore";
 import useCanvasStore from "@/stores/canvasStore";
 import type { CanvasProps } from "@/types/Builder/BuilderCanvas";
+import { framePointToEditor, getElementRectInEditor } from "@/utils/canvasFrameDom";
 import { computed, reactive, ref, type Ref } from "vue";
 
 const MIN_MARQUEE_DRAG = 5;
@@ -19,6 +20,7 @@ const setsEqual = (a: Set<string>, b: Set<string>): boolean => {
 
 type UseCanvasMarqueeSelectionOptions = {
 	canvasContainer: Ref<HTMLElement | null>;
+	frameRoots: Map<string, HTMLElement>;
 	canvasProps: CanvasProps;
 	activeBreakpoint: Ref<string | null>;
 	selectedBlockIds: Ref<Set<string>>;
@@ -30,6 +32,7 @@ type UseCanvasMarqueeSelectionOptions = {
 export function useCanvasMarqueeSelection(options: UseCanvasMarqueeSelectionOptions) {
 	const {
 		canvasContainer,
+		frameRoots,
 		canvasProps,
 		activeBreakpoint,
 		selectedBlockIds,
@@ -49,6 +52,7 @@ export function useCanvasMarqueeSelection(options: UseCanvasMarqueeSelectionOpti
 	let rafId: number | null = null;
 	// Tracks which blocks currently have the DOM highlight attribute (no Vue overhead)
 	let marqueePreviewIds = new Set<string>();
+	let activeWindow: Window = window;
 	const marquee = reactive({
 		active: false,
 		visible: false,
@@ -95,9 +99,14 @@ export function useCanvasMarqueeSelection(options: UseCanvasMarqueeSelectionOpti
 	};
 
 	const removeWindowListeners = () => {
-		window.removeEventListener("mousemove", handleMarqueeMove);
-		window.removeEventListener("mouseup", handleMarqueeEnd);
-		window.removeEventListener("dragstart", cancelMarqueeOnDrag);
+		activeWindow.removeEventListener("mousemove", handleMarqueeMove as EventListener);
+		activeWindow.removeEventListener("mouseup", handleMarqueeEnd);
+		activeWindow.removeEventListener("dragstart", cancelMarqueeOnDrag);
+		if (activeWindow !== window) {
+			window.removeEventListener("mousemove", handleMarqueeMove);
+			window.removeEventListener("mouseup", handleMarqueeEnd);
+			window.removeEventListener("dragstart", cancelMarqueeOnDrag);
+		}
 	};
 
 	const handleMarqueeStart = (ev: MouseEvent) => {
@@ -110,25 +119,35 @@ export function useCanvasMarqueeSelection(options: UseCanvasMarqueeSelectionOpti
 
 		marquee.active = true;
 		marquee.visible = false;
-		marquee.startX = ev.clientX;
-		marquee.startY = ev.clientY;
-		marquee.currentX = ev.clientX;
-		marquee.currentY = ev.clientY;
+		const eventDocument = getEventDocument(ev);
+		const point = framePointToEditor(eventDocument, { x: ev.clientX, y: ev.clientY });
+		marquee.startX = point.x;
+		marquee.startY = point.y;
+		marquee.currentX = point.x;
+		marquee.currentY = point.y;
 		marqueeAdditiveSelection.value = ev.shiftKey || ev.metaKey || ev.ctrlKey;
 		marqueeInitialSelection.value = new Set(selectedBlockIds.value);
-		marqueeBreakpoint.value = getBreakpointAtPoint(ev.clientX, ev.clientY);
+		marqueeBreakpoint.value =
+			(ev.target as HTMLElement | null)?.closest(".canvas")?.getAttribute("data-breakpoint") ||
+			getBreakpointAtPoint(point.x, point.y);
 
-		window.addEventListener("mousemove", handleMarqueeMove);
-		window.addEventListener("mouseup", handleMarqueeEnd);
+		activeWindow = eventDocument.defaultView || window;
+		activeWindow.addEventListener("mousemove", handleMarqueeMove as EventListener);
+		activeWindow.addEventListener("mouseup", handleMarqueeEnd);
 		// Cancel marquee if the browser starts an HTML5 block drag (mouseup won't fire during drag)
-		window.addEventListener("dragstart", cancelMarqueeOnDrag);
+		activeWindow.addEventListener("dragstart", cancelMarqueeOnDrag);
+		if (activeWindow !== window) {
+			window.addEventListener("mousemove", handleMarqueeMove);
+			window.addEventListener("mouseup", handleMarqueeEnd);
+			window.addEventListener("dragstart", cancelMarqueeOnDrag);
+		}
 	};
 
 	const snapshotBlockRects = (): BlockRectSnapshot[] => {
-		const container = canvasContainer.value;
-		if (!container) return [];
 		const target = marqueeBreakpoint.value || activeBreakpoint.value;
-		const elements = container.querySelectorAll<HTMLElement>(
+		const root = target ? frameRoots.get(target) : null;
+		if (!root) return [];
+		const elements = root.querySelectorAll<HTMLElement>(
 			".__builder_component__[data-block-id][data-breakpoint]",
 		);
 		const result: BlockRectSnapshot[] = [];
@@ -136,7 +155,7 @@ export function useCanvasMarqueeSelection(options: UseCanvasMarqueeSelectionOpti
 			if ((el.dataset.breakpoint || null) !== target) continue;
 			const blockId = el.dataset.blockId;
 			if (!blockId || blockId === "root") continue;
-			const rect = el.getBoundingClientRect();
+			const rect = getElementRectInEditor(el);
 			if (!rect.width || !rect.height) continue;
 			const block = findBlock(blockId);
 			if (!block) continue;
@@ -169,8 +188,10 @@ export function useCanvasMarqueeSelection(options: UseCanvasMarqueeSelectionOpti
 		if (!marquee.active) return;
 
 		// Always capture the latest position — even if a rAF is already pending
-		marquee.currentX = ev.clientX;
-		marquee.currentY = ev.clientY;
+		const eventDocument = (ev.currentTarget as Window | null)?.document || document;
+		const point = framePointToEditor(eventDocument, { x: ev.clientX, y: ev.clientY });
+		marquee.currentX = point.x;
+		marquee.currentY = point.y;
 
 		if (rafId !== null) return; // coalesce: only one rAF per frame
 
@@ -247,13 +268,15 @@ export function useCanvasMarqueeSelection(options: UseCanvasMarqueeSelectionOpti
 			return activeBreakpoint.value;
 		}
 
-		const canvases = Array.from(container.querySelectorAll(".canvas[data-breakpoint]")) as HTMLElement[];
+		const canvases = Array.from(
+			container.querySelectorAll("iframe[data-canvas-breakpoint]"),
+		) as HTMLIFrameElement[];
 
 		for (const canvasElement of canvases) {
 			const rect = canvasElement.getBoundingClientRect();
 			if (!rect.width || !rect.height) continue;
 			if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
-				return canvasElement.dataset.breakpoint || activeBreakpoint.value;
+				return canvasElement.dataset.canvasBreakpoint || activeBreakpoint.value;
 			}
 		}
 
@@ -355,3 +378,11 @@ export function useCanvasMarqueeSelection(options: UseCanvasMarqueeSelectionOpti
 		cleanupMarqueeListeners: removeWindowListeners,
 	};
 }
+
+function getEventDocument(event: Event): Document {
+	const target = event.currentTarget as
+		| (EventTarget & { nodeType?: number; ownerDocument?: Document })
+		| null;
+	if (target?.nodeType === 9) return target as unknown as Document;
+	return target?.ownerDocument || document;
+}

From be3e5fe3e2189bd4ac404d747c26df1ad01ce293 Mon Sep 17 00:00:00 2001
From: stravo1 <stravoone@gmail.com>
Date: Thu, 2 Jul 2026 22:19:16 +0530
Subject: [PATCH 2/9] fix: forward all IO events

---
 frontend/src/components/BuilderCanvas.vue     | 104 ++--------
 frontend/src/utils/canvasFrameDom.ts          | 176 +++++++++++++++++
 frontend/src/utils/helpers.ts                 |  19 +-
 frontend/src/utils/useBlockEventHandlers.ts   |   5 +-
 frontend/src/utils/useCanvasEvents.ts         | 181 +++++++++---------
 .../src/utils/useCanvasMarqueeSelection.ts    |  42 +---
 6 files changed, 307 insertions(+), 220 deletions(-)

diff --git a/frontend/src/components/BuilderCanvas.vue b/frontend/src/components/BuilderCanvas.vue
index 5b72e7311..637362e82 100644
--- a/frontend/src/components/BuilderCanvas.vue
+++ b/frontend/src/components/BuilderCanvas.vue
@@ -1,5 +1,9 @@
 <template>
-	<div ref="canvasContainer" :data-builder-canvas="canvasId" @click="handleClick">
+	<div
+		ref="canvasContainer"
+		:data-builder-canvas="canvasId"
+		@click="handleClick"
+		@mousedown="handleMarqueeStart">
 		<Transition name="fade">
 			<div
 				class="absolute bottom-0 left-0 right-0 top-0 grid w-full place-items-center bg-surface-gray-1 p-10 text-ink-gray-5"
@@ -161,19 +165,14 @@ import { builderSettings } from "@/data/builderSettings";
 import useBuilderStore from "@/stores/builderStore";
 import usePageStore from "@/stores/pageStore";
 import { BreakpointConfig, CanvasHistory, CanvasProps } from "@/types/Builder/BuilderCanvas";
-import { elementFromEditorPoint } from "@/utils/canvasFrameDom";
-import { getBlockObject, isCtrlOrCmd, isTargetEditable } from "@/utils/helpers";
+import { elementFromEditorPoint, forwardFrameEvents } from "@/utils/canvasFrameDom";
+import { getBlockObject, isCtrlOrCmd } from "@/utils/helpers";
 import {
 	type BlockClientScriptRuntime,
 	executeClientScriptRestricted,
 	executeClientScriptUnrestricted,
 } from "@/utils/scriptSandbox";
-import {
-	handleBlockClick,
-	handleBlockContextMenu,
-	handleBlockDoubleClick,
-	useBlockEventHandlers,
-} from "@/utils/useBlockEventHandlers";
+import { useBlockEventHandlers } from "@/utils/useBlockEventHandlers";
 import { useBlockSelection } from "@/utils/useBlockSelection";
 import { useBuilderVariable } from "@/utils/useBuilderVariable";
 import { useCanvasDropZone } from "@/utils/useCanvasDropZone";
@@ -210,6 +209,7 @@ const frameRoots = reactive(new Map<string, HTMLElement>());
 const frameDocuments = reactive(new Map<string, Document>());
 const frameEpoch = ref(0);
 const frameDropStates = reactive(new Map<string, boolean>());
+const frameEventCleanups = new Map<Document, () => void>();
 const cursorStyle = ref("default");
 
 const props = withDefaults(
@@ -345,6 +345,8 @@ onMounted(() => {
 
 onUnmounted(() => {
 	cleanupMarqueeListeners();
+	frameEventCleanups.forEach((cleanup) => cleanup());
+	frameEventCleanups.clear();
 });
 
 const handleClick = (ev: MouseEvent) => {
@@ -365,31 +367,17 @@ function registerFrame(breakpoint: string, doc: Document, root: HTMLElement, ifr
 	frameRoots.set(breakpoint, root);
 	frameDocuments.set(breakpoint, doc);
 
-	doc.addEventListener("mousedown", handleMarqueeStart);
-	doc.addEventListener("click", handleBlockClick);
-	doc.addEventListener("dblclick", handleBlockDoubleClick);
-	doc.addEventListener("contextmenu", handleBlockContextMenu);
-	useCanvasEvents(
-		ref(root) as Ref<HTMLElement>,
-		canvasProps,
-		history as CanvasHistory,
-		selectedBlocks,
-		getRootBlock,
-		findBlock,
-		false,
-		doc,
-	);
+	frameEventCleanups.set(doc, forwardFrameEvents(doc, iframe));
 	const { isOverDropZone: frameIsOverDropZone } = useCanvasDropZone(ref(doc.body), block, findBlock);
 	watch(frameIsOverDropZone, (value) => frameDropStates.set(breakpoint, value), { immediate: true });
-	bridgeFrameEvents(doc, iframe);
 	nextTick(setScaleAndTranslate);
 }
 
 function unregisterFrame(breakpoint: string, doc: Document | null) {
-	doc?.removeEventListener("mousedown", handleMarqueeStart);
-	doc?.removeEventListener("click", handleBlockClick);
-	doc?.removeEventListener("dblclick", handleBlockDoubleClick);
-	doc?.removeEventListener("contextmenu", handleBlockContextMenu);
+	if (doc) {
+		frameEventCleanups.get(doc)?.();
+		frameEventCleanups.delete(doc);
+	}
 	if (!doc || frameDocuments.get(breakpoint) === doc) {
 		frameRoots.delete(breakpoint);
 		frameDocuments.delete(breakpoint);
@@ -397,64 +385,6 @@ function unregisterFrame(breakpoint: string, doc: Document | null) {
 	}
 }
 
-function bridgeFrameEvents(doc: Document, iframe: HTMLIFrameElement) {
-	const forwardWheel = (event: WheelEvent) => {
-		event.preventDefault();
-		const frameRect = iframe.getBoundingClientRect();
-		const scaleX = iframe.clientWidth ? frameRect.width / iframe.clientWidth : 1;
-		const scaleY = iframe.clientHeight ? frameRect.height / iframe.clientHeight : 1;
-		iframe.dispatchEvent(
-			new WheelEvent("wheel", {
-				bubbles: true,
-				cancelable: true,
-				clientX: frameRect.left + event.clientX * scaleX,
-				clientY: frameRect.top + event.clientY * scaleY,
-				deltaX: event.deltaX,
-				deltaY: event.deltaY,
-				deltaZ: event.deltaZ,
-				deltaMode: event.deltaMode,
-				ctrlKey: event.ctrlKey,
-				metaKey: event.metaKey,
-				shiftKey: event.shiftKey,
-				altKey: event.altKey,
-			}),
-		);
-	};
-	doc.addEventListener("wheel", forwardWheel, { passive: false });
-
-	const forwardKeyboard = (event: KeyboardEvent) => {
-		console.log(event);
-		if (isTargetEditable(event)) return;
-		const forwarded = new KeyboardEvent(event.type, {
-			bubbles: true,
-			cancelable: true,
-			key: event.key,
-			code: event.code,
-			repeat: event.repeat,
-			ctrlKey: event.ctrlKey,
-			metaKey: event.metaKey,
-			shiftKey: event.shiftKey,
-			altKey: event.altKey,
-		});
-		if (!document.dispatchEvent(forwarded)) event.preventDefault();
-	};
-	doc.addEventListener("keydown", forwardKeyboard);
-	doc.addEventListener("keyup", forwardKeyboard);
-
-	const forwardClipboard = (event: ClipboardEvent) => {
-		if (isTargetEditable(event)) return;
-		const forwarded = new ClipboardEvent(event.type, {
-			bubbles: true,
-			cancelable: true,
-			clipboardData: event.clipboardData,
-		});
-		if (!document.dispatchEvent(forwarded)) event.preventDefault();
-	};
-	doc.addEventListener("copy", forwardClipboard);
-	doc.addEventListener("cut", forwardClipboard);
-	doc.addEventListener("paste", forwardClipboard);
-}
-
 onMounted(() => {
 	if (!canvasContainer.value) return;
 
@@ -648,7 +578,7 @@ function emulateBlockClientScript(script: BlockClientScriptRuntime) {
 						frameRoots.get(script.breakpoint) || null,
 						script.javascript,
 						context,
-				  );
+					);
 	}
 
 	return () => {
diff --git a/frontend/src/utils/canvasFrameDom.ts b/frontend/src/utils/canvasFrameDom.ts
index 0550ee305..a6dbb2960 100644
--- a/frontend/src/utils/canvasFrameDom.ts
+++ b/frontend/src/utils/canvasFrameDom.ts
@@ -3,6 +3,8 @@ export type CanvasFramePoint = {
 	y: number;
 };
 
+const forwardedEventSources = new WeakMap<Event, Event>();
+
 export function getElementDocument(element: Element | null): Document {
 	return element?.ownerDocument || document;
 }
@@ -60,6 +62,34 @@ export function editorPointToFrame(frame: HTMLIFrameElement, point: CanvasFrameP
 	};
 }
 
+export function getEventSource(event: Event): Event {
+	return forwardedEventSources.get(event) || event;
+}
+
+export function getEventTarget(event: Event): EventTarget | null {
+	return getEventSource(event).target || event.target;
+}
+
+export function getEventDocument(event: Event): Document {
+	const target = getEventTarget(event) as { nodeType?: number; ownerDocument?: Document } | null;
+	if (target?.nodeType === 9) return target as unknown as Document;
+	return target?.ownerDocument || document;
+}
+
+export function getEventPointInEditor(event: MouseEvent): CanvasFramePoint {
+	const source = getEventSource(event) as MouseEvent;
+	return framePointToEditor(getEventDocument(event), {
+		x: source.clientX,
+		y: source.clientY,
+	});
+}
+
+export function getEventPointInDocument(event: MouseEvent, doc: Document): CanvasFramePoint {
+	const point = getEventPointInEditor(event);
+	const frame = getFrameElement(doc);
+	return frame ? editorPointToFrame(frame, point) : point;
+}
+
 export function elementFromEditorPoint(x: number, y: number): Element | null {
 	const outerElement = document.elementFromPoint(x, y);
 	if (!(outerElement instanceof HTMLIFrameElement)) return outerElement;
@@ -78,3 +108,149 @@ export function isElementLike(value: unknown): value is Element {
 			(value as { nodeType: number }).nodeType === Node.ELEMENT_NODE,
 	);
 }
+
+const bubblingMouseEventTypes = [
+	"auxclick",
+	"click",
+	"contextmenu",
+	"dblclick",
+	"mousedown",
+	"mousemove",
+	"mouseout",
+	"mouseover",
+	"mouseup",
+] as const;
+
+const keyboardEventTypes = ["keydown", "keypress", "keyup"] as const;
+const clipboardEventTypes = ["copy", "cut", "paste"] as const;
+const dragEventTypes = [
+	"drag",
+	"dragend",
+	"dragenter",
+	"dragleave",
+	"dragover",
+	"dragstart",
+	"drop",
+] as const;
+
+function getForwardedMouseEventInit(event: MouseEvent, doc: Document): MouseEventInit {
+	const point = framePointToEditor(doc, { x: event.clientX, y: event.clientY });
+	return {
+		bubbles: true,
+		cancelable: event.cancelable,
+		composed: true,
+		view: window,
+		detail: event.detail,
+		screenX: event.screenX,
+		screenY: event.screenY,
+		clientX: point.x,
+		clientY: point.y,
+		ctrlKey: event.ctrlKey,
+		altKey: event.altKey,
+		shiftKey: event.shiftKey,
+		metaKey: event.metaKey,
+		button: event.button,
+		buttons: event.buttons,
+		relatedTarget: event.relatedTarget,
+	};
+}
+
+export function forwardFrameEvents(doc: Document, iframe: HTMLIFrameElement) {
+	const frameTarget: EventTarget = doc.defaultView || doc;
+
+	const forward = (source: Event, forwarded: Event) => {
+		forwardedEventSources.set(forwarded, source);
+		if (source.target) {
+			// Keep target-based guards working as if the iframe were part of the editor's DOM tree.
+			Object.defineProperty(forwarded, "target", {
+				configurable: true,
+				value: source.target,
+			});
+		}
+		if (!iframe.dispatchEvent(forwarded)) source.preventDefault();
+	};
+
+	const forwardMouse = (event: MouseEvent) => {
+		console.log(99, event.type)
+		forward(event, new MouseEvent(event.type, getForwardedMouseEventInit(event, doc)));
+	};
+
+	const forwardWheel = (event: WheelEvent) => {
+		forward(
+			event,
+			new WheelEvent(event.type, {
+				...getForwardedMouseEventInit(event, doc),
+				deltaX: event.deltaX,
+				deltaY: event.deltaY,
+				deltaZ: event.deltaZ,
+				deltaMode: event.deltaMode,
+			}),
+		);
+	};
+
+	const forwardDrag = (event: DragEvent) => {
+		forward(
+			event,
+			new DragEvent(event.type, {
+				...getForwardedMouseEventInit(event, doc),
+				dataTransfer: event.dataTransfer,
+			}),
+		);
+	};
+
+	const forwardKeyboard = (event: KeyboardEvent) => {
+		forward(
+			event,
+			new KeyboardEvent(event.type, {
+				bubbles: true,
+				cancelable: event.cancelable,
+				composed: true,
+				key: event.key,
+				code: event.code,
+				location: event.location,
+				repeat: event.repeat,
+				isComposing: event.isComposing,
+				ctrlKey: event.ctrlKey,
+				altKey: event.altKey,
+				shiftKey: event.shiftKey,
+				metaKey: event.metaKey,
+			}),
+		);
+	};
+
+	const forwardClipboard = (event: ClipboardEvent) => {
+		forward(
+			event,
+			new ClipboardEvent(event.type, {
+				bubbles: true,
+				cancelable: event.cancelable,
+				composed: true,
+				clipboardData: event.clipboardData,
+			}),
+		);
+	};
+
+	bubblingMouseEventTypes.forEach((type) =>
+		frameTarget.addEventListener(type, forwardMouse as EventListener),
+	);
+	frameTarget.addEventListener("wheel", forwardWheel as EventListener, { passive: false });
+	dragEventTypes.forEach((type) => frameTarget.addEventListener(type, forwardDrag as EventListener));
+	keyboardEventTypes.forEach((type) => frameTarget.addEventListener(type, forwardKeyboard as EventListener));
+	clipboardEventTypes.forEach((type) =>
+		frameTarget.addEventListener(type, forwardClipboard as EventListener),
+	);
+
+	return () => {
+		bubblingMouseEventTypes.forEach((type) =>
+			frameTarget.removeEventListener(type, forwardMouse as EventListener),
+		);
+		frameTarget.removeEventListener("wheel", forwardWheel as EventListener);
+		dragEventTypes.forEach((type) => frameTarget.removeEventListener(type, forwardDrag as EventListener));
+		keyboardEventTypes.forEach((type) =>
+			frameTarget.removeEventListener(type, forwardKeyboard as EventListener),
+		);
+		clipboardEventTypes.forEach((type) =>
+			frameTarget.removeEventListener(type, forwardClipboard as EventListener),
+		);
+	};
+}
diff --git a/frontend/src/utils/helpers.ts b/frontend/src/utils/helpers.ts
index 28ff6d867..6f3942275 100644
--- a/frontend/src/utils/helpers.ts
+++ b/frontend/src/utils/helpers.ts
@@ -4,7 +4,7 @@ import { BuilderPage } from "@/types/doctypes";
 import getBlockTemplate from "@/utils/blockTemplate";
 import { dialog, FileUploadHandler, toast } from "frappe-ui";
 import { reactive, toRaw } from "vue";
-import { isElementLike } from "./canvasFrameDom";
+import { getEventTarget, isElementLike } from "./canvasFrameDom";
 import { getRGB, HexToHSV, HSVToHex } from "./colors";
 import {
 	addPxToNumber,
@@ -129,10 +129,10 @@ function isJSONString(str: string) {
 }
 
 function isTargetEditable(e: Event) {
-	const target = e.target as HTMLElement;
-	const isEditable = target.isContentEditable;
-	const isInput = target.tagName === "INPUT" || target.tagName === "TEXTAREA";
-	return isEditable || isInput;
+	const target = getEventTarget(e) as HTMLElement | null;
+	const isEditable = target?.isContentEditable;
+	const isInput = target?.tagName === "INPUT" || target?.tagName === "TEXTAREA";
+	return Boolean(isEditable || isInput);
 }
 
 function getDataForKey(datum: Object, key: string) {
@@ -505,7 +505,8 @@ function generateId() {
 }
 
 function isBlock(e: MouseEvent) {
-	return isElementLike(e.target) && e.target.closest(".__builder_component__");
+	const target = getEventTarget(e);
+	return isElementLike(target) && target.closest(".__builder_component__");
 }
 
 type BlockInfo = {
@@ -514,7 +515,11 @@ type BlockInfo = {
 };
 
 function getBlockInfo(e: MouseEvent) {
-	const target = (e.target as HTMLElement)?.closest(".__builder_component__") as HTMLElement;
+	const eventTarget = getEventTarget(e);
+	const target = isElementLike(eventTarget)
+		? (eventTarget.closest(".__builder_component__") as HTMLElement)
+		: null;
+	if (!target) return {} as BlockInfo;
 	return target.dataset as BlockInfo;
 }
 
diff --git a/frontend/src/utils/useBlockEventHandlers.ts b/frontend/src/utils/useBlockEventHandlers.ts
index 3987c891d..15dffa57d 100644
--- a/frontend/src/utils/useBlockEventHandlers.ts
+++ b/frontend/src/utils/useBlockEventHandlers.ts
@@ -2,7 +2,7 @@ import useBuilderStore from "@/stores/builderStore";
 import useCanvasStore from "@/stores/canvasStore";
 import getBlockTemplate from "@/utils/blockTemplate";
 import { getBlock, getBlockInfo, isBlock } from "@/utils/helpers";
-import { framePointToEditor } from "@/utils/canvasFrameDom";
+import { getEventPointInEditor } from "@/utils/canvasFrameDom";
 import { nextTick } from "vue";
 
 const builderStore = useBuilderStore();
@@ -80,8 +80,7 @@ export function handleBlockContextMenu(e: MouseEvent) {
 	e.stopPropagation();
 	e.preventDefault();
 	selectBlock(e);
-	const ownerDocument = (e.target as Element).ownerDocument;
-	const point = framePointToEditor(ownerDocument, { x: e.clientX, y: e.clientY });
+	const point = getEventPointInEditor(e);
 	nextTick(() => {
 		document.querySelector(`.editor[data-block-id="${blockId}"]`)?.dispatchEvent(
 			new MouseEvent("contextmenu", {
diff --git a/frontend/src/utils/useCanvasEvents.ts b/frontend/src/utils/useCanvasEvents.ts
index 410fed406..963d129bb 100644
--- a/frontend/src/utils/useCanvasEvents.ts
+++ b/frontend/src/utils/useCanvasEvents.ts
@@ -3,7 +3,12 @@ import useBuilderStore from "@/stores/builderStore";
 import useCanvasStore from "@/stores/canvasStore";
 import { CanvasHistory } from "@/types/Builder/BuilderCanvas";
 import getBlockTemplate from "@/utils/blockTemplate";
-import { getComputedStyleFor } from "@/utils/canvasFrameDom";
+import {
+	getComputedStyleFor,
+	getEventDocument,
+	getEventPointInDocument,
+	getEventPointInEditor,
+} from "@/utils/canvasFrameDom";
 import {
 	addPxToNumber,
 	getBlock,
@@ -25,25 +30,21 @@ export function useCanvasEvents(
 	selectedBlocks: Ref<Block[]>,
 	getRootBlock: () => Block,
 	findBlock: (blockId: string) => Block | null,
-	registerKeyboard = true,
-	eventTarget: EventTarget | Ref<EventTarget> = container,
 ) {
 	let counter = 0;
-	useEventListener(eventTarget, "mousedown", (ev: MouseEvent) => {
+	useEventListener(container, "mousedown", (ev: MouseEvent) => {
 		if (builderStore.mode === "move") {
 			return;
 		}
-		const initialX = ev.clientX;
-		const initialY = ev.clientY;
 		if (builderStore.mode === "select") {
 			return;
 		} else {
 			if (builderStore.readOnlyMode) return;
 			const pauseId = canvasHistory.value?.pause();
 			ev.stopPropagation();
-			const ownerDocument = container.value.ownerDocument;
-			const eventScale = ownerDocument === document ? canvasProps.scale : 1;
-			let element = ownerDocument.elementFromPoint(ev.x, ev.y) as HTMLElement;
+			const ownerDocument = getEventDocument(ev);
+			const initialPoint = getEventPointInDocument(ev, ownerDocument);
+			let element = ownerDocument.elementFromPoint(initialPoint.x, initialPoint.y) as HTMLElement;
 			let block = getRootBlock();
 			if (element) {
 				if (element.dataset.blockId) {
@@ -67,8 +68,8 @@ export function useCanvasEvents(
 				parentBlock.setBaseStyle("position", "relative");
 			}
 			const parentElementBounds = parentElement.getBoundingClientRect();
-			let x = (ev.x - parentElementBounds.left) / eventScale;
-			let y = (ev.y - parentElementBounds.top) / eventScale;
+			let x = initialPoint.x - parentElementBounds.left;
+			let y = initialPoint.y - parentElementBounds.top;
 			const parentWidth = getNumberFromPx(getComputedStyleFor(parentElement).width);
 			const parentHeight = getNumberFromPx(getComputedStyleFor(parentElement).height);
 
@@ -87,8 +88,9 @@ export function useCanvasEvents(
 					return;
 				} else {
 					mouseMoveEvent.preventDefault();
-					let width = (mouseMoveEvent.clientX - initialX) / eventScale;
-					let height = (mouseMoveEvent.clientY - initialY) / eventScale;
+					const point = getEventPointInDocument(mouseMoveEvent, ownerDocument);
+					let width = point.x - initialPoint.x;
+					let height = point.y - initialPoint.y;
 					width = clamp(width, 0, parentWidth);
 					height = clamp(height, 0, parentHeight);
 					const setFullWidth = width === parentWidth;
@@ -96,12 +98,12 @@ export function useCanvasEvents(
 					childBlock.setBaseStyle("height", addPxToNumber(height));
 				}
 			};
-			useEventListener(ownerDocument, "mousemove", mouseMoveHandler);
+			useEventListener(document, "mousemove", mouseMoveHandler);
 			useEventListener(
-				ownerDocument,
+				document,
 				"mouseup",
 				() => {
-					ownerDocument.removeEventListener("mousemove", mouseMoveHandler);
+					document.removeEventListener("mousemove", mouseMoveHandler);
 					parentBlock.setBaseStyle("position", parentOldPosition || "static");
 					childBlock.setBaseStyle("position", "static");
 					childBlock.setBaseStyle("top", "auto");
@@ -136,28 +138,26 @@ export function useCanvasEvents(
 		}
 	});
 
-	useEventListener(eventTarget, "mousedown", (ev: MouseEvent) => {
+	useEventListener(container, "mousedown", (ev: MouseEvent) => {
 		if (builderStore.mode === "move") {
 			container.value.style.cursor = "grabbing";
-			const initialX = ev.clientX;
-			const initialY = ev.clientY;
+			const initialPoint = getEventPointInEditor(ev);
 			const initialTranslateX = canvasProps.translateX;
 			const initialTranslateY = canvasProps.translateY;
-			const ownerDocument = container.value.ownerDocument;
-			const eventScale = ownerDocument === document ? canvasProps.scale : 1;
 			const mouseMoveHandler = (mouseMoveEvent: MouseEvent) => {
 				mouseMoveEvent.preventDefault();
-				const diffX = (mouseMoveEvent.clientX - initialX) / eventScale;
-				const diffY = (mouseMoveEvent.clientY - initialY) / eventScale;
+				const point = getEventPointInEditor(mouseMoveEvent);
+				const diffX = (point.x - initialPoint.x) / canvasProps.scale;
+				const diffY = (point.y - initialPoint.y) / canvasProps.scale;
 				canvasProps.translateX = initialTranslateX + diffX;
 				canvasProps.translateY = initialTranslateY + diffY;
 			};
-			useEventListener(ownerDocument, "mousemove", mouseMoveHandler);
+			useEventListener(document, "mousemove", mouseMoveHandler);
 			useEventListener(
-				ownerDocument,
+				document,
 				"mouseup",
 				() => {
-					ownerDocument.removeEventListener("mousemove", mouseMoveHandler);
+					document.removeEventListener("mousemove", mouseMoveHandler);
 					container.value.style.cursor = "grab";
 				},
 				{ once: true },
@@ -167,81 +167,80 @@ export function useCanvasEvents(
 		}
 	});
 
-	if (registerKeyboard)
-		useEventListener(document, "keydown", (ev: KeyboardEvent) => {
-			// make sure reference container is not hidden or not editable
-			if (!container.value.offsetParent || isTargetEditable(ev) || selectedBlocks.value.length !== 1) {
-				return;
-			}
+	useEventListener(document, "keydown", (ev: KeyboardEvent) => {
+		// make sure reference container is not hidden or not editable
+		if (!container.value.offsetParent || isTargetEditable(ev) || selectedBlocks.value.length !== 1) {
+			return;
+		}
 
-			const selectedBlock = selectedBlocks.value[0];
+		const selectedBlock = selectedBlocks.value[0];
 
-			const selectBlock = (block: Block | null) => {
-				// TODO: Use canvas's selectBlock instead of canvasStore's to avoid mixup with other canvas
-				if (block) canvasStore.selectBlock(block, null, true, true);
-				return !!block;
-			};
+		const selectBlock = (block: Block | null) => {
+			// TODO: Use canvas's selectBlock instead of canvasStore's to avoid mixup with other canvas
+			if (block) canvasStore.selectBlock(block, null, true, true);
+			return !!block;
+		};
 
-			const selectSibling = (direction: "previous" | "next", fallback: () => void) => {
-				selectBlock(selectedBlock.getSiblingBlock(direction)) || fallback();
-			};
+		const selectSibling = (direction: "previous" | "next", fallback: () => void) => {
+			selectBlock(selectedBlock.getSiblingBlock(direction)) || fallback();
+		};
 
-			const selectParent = () => selectBlock(selectedBlock.getParentBlock());
+		const selectParent = () => selectBlock(selectedBlock.getParentBlock());
 
-			const selectFirstChild = () => selectBlock(selectedBlock.children[0]);
+		const selectFirstChild = () => selectBlock(selectedBlock.children[0]);
 
-			const selectNextSiblingOrParent = () => {
-				let sibling = selectedBlock.getSiblingBlock("next");
-				let parentBlock = selectedBlock.getParentBlock();
-				while (!sibling && parentBlock) {
-					sibling = parentBlock.getSiblingBlock("next");
-					parentBlock = parentBlock.getParentBlock();
-				}
-				selectBlock(sibling);
-			};
+		const selectNextSiblingOrParent = () => {
+			let sibling = selectedBlock.getSiblingBlock("next");
+			let parentBlock = selectedBlock.getParentBlock();
+			while (!sibling && parentBlock) {
+				sibling = parentBlock.getSiblingBlock("next");
+				parentBlock = parentBlock.getParentBlock();
+			}
+			selectBlock(sibling);
+		};
 
-			const selectLastChildInTree = (block: Block) => {
-				let currentBlock = block;
-				while (builderStore.activeLayers?.isExpandedInTree(currentBlock)) {
-					const lastChild = currentBlock.getLastChild() as Block;
-					if (!lastChild) break;
-					currentBlock = lastChild;
-				}
-				selectBlock(currentBlock);
-			};
+		const selectLastChildInTree = (block: Block) => {
+			let currentBlock = block;
+			while (builderStore.activeLayers?.isExpandedInTree(currentBlock)) {
+				const lastChild = currentBlock.getLastChild() as Block;
+				if (!lastChild) break;
+				currentBlock = lastChild;
+			}
+			selectBlock(currentBlock);
+		};
 
-			const arrowKeyHandlers = {
-				ArrowLeft: () => {
-					builderStore.activeLayers?.isExpandedInTree(selectedBlock)
-						? builderStore.activeLayers.toggleExpanded(selectedBlock)
-						: selectSibling("previous", selectParent);
-				},
-				ArrowRight: () => {
-					selectedBlock.hasChildren() && selectedBlock.isVisible()
-						? (builderStore.activeLayers?.toggleExpanded(selectedBlock), selectFirstChild())
-						: selectNextSiblingOrParent();
-				},
-				ArrowUp: () => {
-					const previousSibling = selectedBlock.getSiblingBlock("previous");
-					previousSibling ? selectLastChildInTree(previousSibling) : selectParent();
-				},
-				ArrowDown: () => {
-					builderStore.activeLayers?.isExpandedInTree(selectedBlock) &&
-					selectedBlock.hasChildren() &&
-					selectedBlock.isVisible()
-						? selectFirstChild()
-						: selectNextSiblingOrParent();
-				},
-			};
+		const arrowKeyHandlers = {
+			ArrowLeft: () => {
+				builderStore.activeLayers?.isExpandedInTree(selectedBlock)
+					? builderStore.activeLayers.toggleExpanded(selectedBlock)
+					: selectSibling("previous", selectParent);
+			},
+			ArrowRight: () => {
+				selectedBlock.hasChildren() && selectedBlock.isVisible()
+					? (builderStore.activeLayers?.toggleExpanded(selectedBlock), selectFirstChild())
+					: selectNextSiblingOrParent();
+			},
+			ArrowUp: () => {
+				const previousSibling = selectedBlock.getSiblingBlock("previous");
+				previousSibling ? selectLastChildInTree(previousSibling) : selectParent();
+			},
+			ArrowDown: () => {
+				builderStore.activeLayers?.isExpandedInTree(selectedBlock) &&
+				selectedBlock.hasChildren() &&
+				selectedBlock.isVisible()
+					? selectFirstChild()
+					: selectNextSiblingOrParent();
+			},
+		};
 
-			const handler = arrowKeyHandlers[ev.key as keyof typeof arrowKeyHandlers];
-			if (handler) {
-				handler();
-				ev.preventDefault();
-			}
-		});
+		const handler = arrowKeyHandlers[ev.key as keyof typeof arrowKeyHandlers];
+		if (handler) {
+			handler();
+			ev.preventDefault();
+		}
+	});
 
-	useEventListener(eventTarget, "mouseover", handleMouseOver);
+	useEventListener(container, "mouseover", handleMouseOver);
 }
 
 function handleMouseOver(e: MouseEvent) {
diff --git a/frontend/src/utils/useCanvasMarqueeSelection.ts b/frontend/src/utils/useCanvasMarqueeSelection.ts
index 1d34da5e0..3c86c64ca 100644
--- a/frontend/src/utils/useCanvasMarqueeSelection.ts
+++ b/frontend/src/utils/useCanvasMarqueeSelection.ts
@@ -2,7 +2,7 @@ import type Block from "@/block";
 import useBuilderStore from "@/stores/builderStore";
 import useCanvasStore from "@/stores/canvasStore";
 import type { CanvasProps } from "@/types/Builder/BuilderCanvas";
-import { framePointToEditor, getElementRectInEditor } from "@/utils/canvasFrameDom";
+import { getElementRectInEditor, getEventPointInEditor, getEventTarget } from "@/utils/canvasFrameDom";
 import { computed, reactive, ref, type Ref } from "vue";
 
 const MIN_MARQUEE_DRAG = 5;
@@ -52,7 +52,6 @@ export function useCanvasMarqueeSelection(options: UseCanvasMarqueeSelectionOpti
 	let rafId: number | null = null;
 	// Tracks which blocks currently have the DOM highlight attribute (no Vue overhead)
 	let marqueePreviewIds = new Set<string>();
-	let activeWindow: Window = window;
 	const marquee = reactive({
 		active: false,
 		visible: false,
@@ -99,14 +98,9 @@ export function useCanvasMarqueeSelection(options: UseCanvasMarqueeSelectionOpti
 	};
 
 	const removeWindowListeners = () => {
-		activeWindow.removeEventListener("mousemove", handleMarqueeMove as EventListener);
-		activeWindow.removeEventListener("mouseup", handleMarqueeEnd);
-		activeWindow.removeEventListener("dragstart", cancelMarqueeOnDrag);
-		if (activeWindow !== window) {
-			window.removeEventListener("mousemove", handleMarqueeMove);
-			window.removeEventListener("mouseup", handleMarqueeEnd);
-			window.removeEventListener("dragstart", cancelMarqueeOnDrag);
-		}
+		window.removeEventListener("mousemove", handleMarqueeMove);
+		window.removeEventListener("mouseup", handleMarqueeEnd);
+		window.removeEventListener("dragstart", cancelMarqueeOnDrag);
 	};
 
 	const handleMarqueeStart = (ev: MouseEvent) => {
@@ -119,8 +113,7 @@ export function useCanvasMarqueeSelection(options: UseCanvasMarqueeSelectionOpti
 
 		marquee.active = true;
 		marquee.visible = false;
-		const eventDocument = getEventDocument(ev);
-		const point = framePointToEditor(eventDocument, { x: ev.clientX, y: ev.clientY });
+		const point = getEventPointInEditor(ev);
 		marquee.startX = point.x;
 		marquee.startY = point.y;
 		marquee.currentX = point.x;
@@ -128,19 +121,13 @@ export function useCanvasMarqueeSelection(options: UseCanvasMarqueeSelectionOpti
 		marqueeAdditiveSelection.value = ev.shiftKey || ev.metaKey || ev.ctrlKey;
 		marqueeInitialSelection.value = new Set(selectedBlockIds.value);
 		marqueeBreakpoint.value =
-			(ev.target as HTMLElement | null)?.closest(".canvas")?.getAttribute("data-breakpoint") ||
+			(getEventTarget(ev) as HTMLElement | null)?.closest(".canvas")?.getAttribute("data-breakpoint") ||
 			getBreakpointAtPoint(point.x, point.y);
 
-		activeWindow = eventDocument.defaultView || window;
-		activeWindow.addEventListener("mousemove", handleMarqueeMove as EventListener);
-		activeWindow.addEventListener("mouseup", handleMarqueeEnd);
+		window.addEventListener("mousemove", handleMarqueeMove);
+		window.addEventListener("mouseup", handleMarqueeEnd);
 		// Cancel marquee if the browser starts an HTML5 block drag (mouseup won't fire during drag)
-		activeWindow.addEventListener("dragstart", cancelMarqueeOnDrag);
-		if (activeWindow !== window) {
-			window.addEventListener("mousemove", handleMarqueeMove);
-			window.addEventListener("mouseup", handleMarqueeEnd);
-			window.addEventListener("dragstart", cancelMarqueeOnDrag);
-		}
+		window.addEventListener("dragstart", cancelMarqueeOnDrag);
 	};
 
 	const snapshotBlockRects = (): BlockRectSnapshot[] => {
@@ -188,8 +175,7 @@ export function useCanvasMarqueeSelection(options: UseCanvasMarqueeSelectionOpti
 		if (!marquee.active) return;
 
 		// Always capture the latest position — even if a rAF is already pending
-		const eventDocument = (ev.currentTarget as Window | null)?.document || document;
-		const point = framePointToEditor(eventDocument, { x: ev.clientX, y: ev.clientY });
+		const point = getEventPointInEditor(ev);
 		marquee.currentX = point.x;
 		marquee.currentY = point.y;
 
@@ -378,11 +364,3 @@ export function useCanvasMarqueeSelection(options: UseCanvasMarqueeSelectionOpti
 		cleanupMarqueeListeners: removeWindowListeners,
 	};
 }
-
-function getEventDocument(event: Event): Document {
-	const target = event.currentTarget as
-		| (EventTarget & { nodeType?: number; ownerDocument?: Document })
-		| null;
-	if (target?.nodeType === 9) return target as unknown as Document;
-	return target?.ownerDocument || document;
-}

From a855409cd59397ca9fb012de050f4c6cb8cd3cfe Mon Sep 17 00:00:00 2001
From: stravo1 <stravoone@gmail.com>
Date: Thu, 2 Jul 2026 22:41:21 +0530
Subject: [PATCH 3/9] fix: block editor teleport and text block insertion issue

---
 frontend/src/builder.d.ts                     |  2 +
 frontend/src/components/BlockEditor.vue       | 36 ++++++-----
 .../src/components/BorderRadiusHandler.vue    | 18 +++---
 frontend/src/components/BoxResizer.vue        | 52 ++++++++++------
 frontend/src/components/BuilderBlock.vue      |  5 +-
 frontend/src/components/MarginHandler.vue     | 59 +++++++++++--------
 frontend/src/components/PaddingHandler.vue    | 53 ++++++++++-------
 frontend/src/components/TextBlock.vue         |  8 +--
 frontend/src/composables/useSpacingHandler.ts | 23 ++++++--
 frontend/src/utils/trackTarget.ts             |  5 +-
 10 files changed, 162 insertions(+), 99 deletions(-)

diff --git a/frontend/src/builder.d.ts b/frontend/src/builder.d.ts
index a8023140e..05e940576 100644
--- a/frontend/src/builder.d.ts
+++ b/frontend/src/builder.d.ts
@@ -131,6 +131,8 @@ declare interface CanvasProps {
 	background: string;
 	settingCanvas: boolean;
 	overlayElement: HTMLElement | null;
+	frameDocuments?: Map<string, Document>;
+	frameRoots?: Map<string, HTMLElement>;
 	breakpoints: Breakpoint[];
 }
 
diff --git a/frontend/src/components/BlockEditor.vue b/frontend/src/components/BlockEditor.vue
index d04d827fb..8f34872d3 100644
--- a/frontend/src/components/BlockEditor.vue
+++ b/frontend/src/components/BlockEditor.vue
@@ -37,7 +37,12 @@ import type Block from "@/block";
 import useBuilderStore from "@/stores/builderStore";
 import useCanvasStore from "@/stores/canvasStore";
 import blockController from "@/utils/blockController";
-import { elementFromEditorPoint } from "@/utils/canvasFrameDom";
+import {
+	elementFromEditorPoint,
+	getElementDocument,
+	getEventPointInDocument,
+	getEventPointInEditor,
+} from "@/utils/canvasFrameDom";
 import { addPxToNumber } from "@/utils/helpers";
 import { Ref, computed, inject, nextTick, onMounted, ref, watch, watchEffect } from "vue";
 import setGuides from "../utils/guidesTracker";
@@ -84,7 +89,7 @@ const props = withDefaults(
 const editor = ref(null) as unknown as Ref<HTMLElement>;
 const updateTracker = ref(() => {});
 const resizing = ref(false);
-const guides = setGuides(props.target, canvasProps);
+let guides: ReturnType<typeof setGuides>;
 const moving = ref(false);
 const preventCLick = ref(false);
 
@@ -202,6 +207,7 @@ const movable = computed(() => {
 });
 
 onMounted(() => {
+	guides = setGuides(props.target, canvasProps);
 	updateTracker.value = trackTarget(props.target, editor.value, canvasProps);
 });
 
@@ -218,21 +224,23 @@ const handleClick = (ev: MouseEvent) => {
 
 	const editorWrapper = editor.value;
 	editorWrapper.classList.add("pointer-events-none");
-	let element = elementFromEditorPoint(ev.x, ev.y) as HTMLElement;
+	const editorPoint = getEventPointInEditor(ev);
+	let element = elementFromEditorPoint(editorPoint.x, editorPoint.y) as HTMLElement;
 	if (!element) return;
 	if (element.classList.contains("editor")) {
 		element.classList.remove("pointer-events-auto");
 		element.classList.add("pointer-events-none");
-		element = elementFromEditorPoint(ev.x, ev.y) as HTMLElement;
+		element = elementFromEditorPoint(editorPoint.x, editorPoint.y) as HTMLElement;
 	}
 	if (element.classList.contains("__builder_component__")) {
 		const EventConstructor = element.ownerDocument.defaultView?.MouseEvent || MouseEvent;
+		const point = getEventPointInDocument(ev, element.ownerDocument);
 		element.dispatchEvent(
 			new EventConstructor("click", {
 				bubbles: true,
 				cancelable: true,
-				clientX: ev.clientX,
-				clientY: ev.clientY,
+				clientX: point.x,
+				clientY: point.y,
 				ctrlKey: ev.ctrlKey,
 				metaKey: ev.metaKey,
 				shiftKey: ev.shiftKey,
@@ -270,8 +278,8 @@ const handleMove = (ev: MouseEvent) => {
 	ev.stopPropagation();
 	const pauseId = canvasStore.activeCanvas?.history?.pause();
 	const target = ev.target as HTMLElement;
-	const startX = ev.clientX;
-	const startY = ev.clientY;
+	const ownerDocument = getElementDocument(props.target);
+	const startPoint = getEventPointInDocument(ev, ownerDocument);
 	const startLeft = (props.target as HTMLElement).offsetLeft || 0;
 	const startTop = (props.target as HTMLElement).offsetTop || 0;
 
@@ -279,15 +287,15 @@ const handleMove = (ev: MouseEvent) => {
 	guides.showX();
 
 	// to disable cursor jitter
-	const docCursor = document.body.style.cursor;
-	document.body.style.cursor = "grabbing";
+	const docCursor = ownerDocument.body.style.cursor;
+	ownerDocument.body.style.cursor = "grabbing";
 	target.style.cursor = "grabbing";
 
 	const mousemove = async (mouseMoveEvent: MouseEvent) => {
 		if (canvasStore.isMarqueeActive) return;
-		const scale = canvasProps.scale;
-		const movementX = (mouseMoveEvent.clientX - startX) / scale;
-		const movementY = (mouseMoveEvent.clientY - startY) / scale;
+		const point = getEventPointInDocument(mouseMoveEvent, ownerDocument);
+		const movementX = point.x - startPoint.x;
+		const movementY = point.y - startPoint.y;
 		let finalLeft = startLeft + movementX;
 		let finalTop = startTop + movementY;
 		props.block.setStyle("left", addPxToNumber(finalLeft));
@@ -309,7 +317,7 @@ const handleMove = (ev: MouseEvent) => {
 		"mouseup",
 		(mouseUpEvent) => {
 			moving.value = false;
-			document.body.style.cursor = docCursor;
+			ownerDocument.body.style.cursor = docCursor;
 			target.style.cursor = "grab";
 			document.removeEventListener("mousemove", mousemove);
 			mouseUpEvent.preventDefault();
diff --git a/frontend/src/components/BorderRadiusHandler.vue b/frontend/src/components/BorderRadiusHandler.vue
index ae95c0a4f..4fbb19149 100644
--- a/frontend/src/components/BorderRadiusHandler.vue
+++ b/frontend/src/components/BorderRadiusHandler.vue
@@ -18,7 +18,7 @@
 
 <script setup lang="ts">
 import type Block from "@/block";
-import { getComputedStyleFor, getElementRectInEditor } from "@/utils/canvasFrameDom";
+import { getComputedStyleFor, getElementDocument, getEventPointInDocument } from "@/utils/canvasFrameDom";
 import { getNumberFromPx } from "@/utils/helpers";
 import type { Ref } from "vue";
 import { computed, inject, onMounted, reactive, ref, watchEffect } from "vue";
@@ -42,7 +42,7 @@ const targetBounds = reactive({
 	width: 0,
 	height: 0,
 	update() {
-		const rect = getElementRectInEditor(props.target);
+		const rect = props.target.getBoundingClientRect();
 		targetBounds.width = rect.width;
 		targetBounds.height = rect.height;
 	},
@@ -77,18 +77,17 @@ const setHandlerPosition = (radius: number) => {
 };
 
 const handleRounded = (ev: MouseEvent) => {
-	const startX = ev.clientX;
-	const startY = ev.clientY;
-	let lastX = startX;
-	let lastY = startY;
+	const ownerDocument = getElementDocument(props.target);
+	let lastPoint = getEventPointInDocument(ev, ownerDocument);
 	updating.value = true;
 
 	const handleDimensions = handler.value.getBoundingClientRect();
 
 	const mousemove = (mouseMoveEvent: MouseEvent) => {
 		mouseMoveEvent.preventDefault();
-		const movementX = mouseMoveEvent.clientX - lastX;
-		const movementY = mouseMoveEvent.clientY - lastY;
+		const point = getEventPointInDocument(mouseMoveEvent, ownerDocument);
+		const movementX = point.x - lastPoint.x;
+		const movementY = point.y - lastPoint.y;
 		const movement = ((movementX + movementY) / 2) * 2;
 
 		if (movement < 0) {
@@ -104,8 +103,7 @@ const handleRounded = (ev: MouseEvent) => {
 		setHandlerPosition(radius);
 		props.targetBlock.setStyle("borderRadius", `${radius}px`);
 
-		lastX = mouseMoveEvent.clientX;
-		lastY = mouseMoveEvent.clientY;
+		lastPoint = point;
 	};
 
 	const mouseup = (mouseUpEvent: MouseEvent) => {
diff --git a/frontend/src/components/BoxResizer.vue b/frontend/src/components/BoxResizer.vue
index 59276a591..54d9ced5b 100644
--- a/frontend/src/components/BoxResizer.vue
+++ b/frontend/src/components/BoxResizer.vue
@@ -34,7 +34,12 @@
 <script setup lang="ts">
 import type Block from "@/block";
 import useCanvasStore from "@/stores/canvasStore";
-import { getComputedStyleFor } from "@/utils/canvasFrameDom";
+import {
+	getComputedStyleFor,
+	getElementDocument,
+	getElementWindow,
+	getEventPointInDocument,
+} from "@/utils/canvasFrameDom";
 import { getNumberFromPx } from "@/utils/helpers";
 import { clamp } from "@vueuse/core";
 import { computed, inject, onMounted, ref, watch } from "vue";
@@ -88,7 +93,8 @@ const fontSize = computed(() => {
 });
 
 const handleRightResize = (ev: MouseEvent) => {
-	const startX = ev.clientX;
+	const ownerDocument = getElementDocument(props.target);
+	const startPoint = getEventPointInDocument(ev, ownerDocument);
 	const startHeight = (props.target as HTMLElement).offsetHeight;
 	const startWidth = (props.target as HTMLElement).offsetWidth;
 	const blockStartWidth = props.targetBlock.getStyle("width") as string;
@@ -96,12 +102,15 @@ const handleRightResize = (ev: MouseEvent) => {
 	const startFontSize = fontSize.value || 0;
 
 	// to disable cursor jitter
-	const docCursor = document.body.style.cursor;
-	document.body.style.cursor = window.getComputedStyle(ev.target as HTMLElement).cursor;
+	const docCursor = ownerDocument.body.style.cursor;
+	ownerDocument.body.style.cursor = getElementWindow(props.target).getComputedStyle(
+		ev.target as HTMLElement,
+	).cursor;
 	resizing.value = true;
 	guides.showX();
 	const mousemove = (mouseMoveEvent: MouseEvent) => {
-		const movement = (mouseMoveEvent.clientX - startX) / canvasProps.scale;
+		const point = getEventPointInDocument(mouseMoveEvent, ownerDocument);
+		const movement = point.x - startPoint.x;
 		if (props.targetBlock.isText() && !props.targetBlock.hasChildren()) {
 			setFontSize(movement, startFontSize);
 			return mouseMoveEvent.preventDefault();
@@ -116,7 +125,7 @@ const handleRightResize = (ev: MouseEvent) => {
 	document.addEventListener(
 		"mouseup",
 		(mouseUpEvent) => {
-			document.body.style.cursor = docCursor;
+			ownerDocument.body.style.cursor = docCursor;
 			document.removeEventListener("mousemove", mousemove);
 			mouseUpEvent.preventDefault();
 			resizing.value = false;
@@ -127,7 +136,8 @@ const handleRightResize = (ev: MouseEvent) => {
 };
 
 const handleBottomResize = (ev: MouseEvent) => {
-	const startY = ev.clientY;
+	const ownerDocument = getElementDocument(props.target);
+	const startPoint = getEventPointInDocument(ev, ownerDocument);
 	const startHeight = (props.target as HTMLElement).offsetHeight;
 	const startWidth = (props.target as HTMLElement).offsetWidth;
 	const blockStartWidth = props.targetBlock.getStyle("width") as string;
@@ -135,13 +145,16 @@ const handleBottomResize = (ev: MouseEvent) => {
 	const startFontSize = fontSize.value || 0;
 
 	// to disable cursor jitter
-	const docCursor = document.body.style.cursor;
-	document.body.style.cursor = window.getComputedStyle(ev.target as HTMLElement).cursor;
+	const docCursor = ownerDocument.body.style.cursor;
+	ownerDocument.body.style.cursor = getElementWindow(props.target).getComputedStyle(
+		ev.target as HTMLElement,
+	).cursor;
 	resizing.value = true;
 	guides.showY();
 
 	const mousemove = (mouseMoveEvent: MouseEvent) => {
-		const movement = (mouseMoveEvent.clientY - startY) / canvasProps.scale;
+		const point = getEventPointInDocument(mouseMoveEvent, ownerDocument);
+		const movement = point.y - startPoint.y;
 
 		if (props.targetBlock.isText() && !props.targetBlock.hasChildren()) {
 			setFontSize(movement, startFontSize);
@@ -157,7 +170,7 @@ const handleBottomResize = (ev: MouseEvent) => {
 	document.addEventListener(
 		"mouseup",
 		(mouseUpEvent) => {
-			document.body.style.cursor = docCursor;
+			ownerDocument.body.style.cursor = docCursor;
 			document.removeEventListener("mousemove", mousemove);
 			mouseUpEvent.preventDefault();
 			resizing.value = false;
@@ -168,8 +181,8 @@ const handleBottomResize = (ev: MouseEvent) => {
 };
 
 const handleBottomCornerResize = (ev: MouseEvent) => {
-	const startX = ev.clientX;
-	const startY = ev.clientY;
+	const ownerDocument = getElementDocument(props.target);
+	const startPoint = getEventPointInDocument(ev, ownerDocument);
 	const startHeight = (props.target as HTMLElement).offsetHeight;
 	const startWidth = (props.target as HTMLElement).offsetWidth;
 	const blockStartWidth = props.targetBlock.getStyle("width") as string;
@@ -177,13 +190,16 @@ const handleBottomCornerResize = (ev: MouseEvent) => {
 	const startFontSize = fontSize.value || 0;
 
 	// to disable cursor jitter
-	const docCursor = document.body.style.cursor;
-	document.body.style.cursor = window.getComputedStyle(ev.target as HTMLElement).cursor;
+	const docCursor = ownerDocument.body.style.cursor;
+	ownerDocument.body.style.cursor = getElementWindow(props.target).getComputedStyle(
+		ev.target as HTMLElement,
+	).cursor;
 	resizing.value = true;
 
 	const mousemove = (mouseMoveEvent: MouseEvent) => {
-		const movementX = (mouseMoveEvent.clientX - startX) / canvasProps.scale;
-		const movementY = (mouseMoveEvent.clientY - startY) / canvasProps.scale;
+		const point = getEventPointInDocument(mouseMoveEvent, ownerDocument);
+		const movementX = point.x - startPoint.x;
+		const movementY = point.y - startPoint.y;
 		if (props.targetBlock.isText() && !props.targetBlock.hasChildren()) {
 			setFontSize(movementY, startFontSize);
 			return mouseMoveEvent.preventDefault();
@@ -196,7 +212,7 @@ const handleBottomCornerResize = (ev: MouseEvent) => {
 	document.addEventListener(
 		"mouseup",
 		(mouseUpEvent) => {
-			document.body.style.cursor = docCursor;
+			ownerDocument.body.style.cursor = docCursor;
 			document.removeEventListener("mousemove", mousemove);
 			mouseUpEvent.preventDefault();
 			resizing.value = false;
diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index c600c3510..7ae140973 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -25,8 +25,8 @@
 			v-for="child in block.getChildren().filter((child) => child.isVisible(breakpoint))" />
 	</component>
 	<teleport
-		:to="canvasProps?.overlayElement"
-		v-if="canvasProps?.overlayElement && !preview && Boolean(canvasProps)">
+		:to="canvasOverlayElement"
+		v-if="canvasOverlayElement && !preview && Boolean(canvasProps)">
 		<!-- prettier-ignore -->
 		<BlockEditor
 			ref="editor"
@@ -279,6 +279,7 @@ const attributes = computed(() => {
 });
 
 const canvasProps = !props.preview ? (inject("canvasProps") as CanvasProps) : null;
+const canvasOverlayElement = computed(() => canvasProps?.frameRoots?.get(props.breakpoint) || null);
 const emulateBlockClientScript = inject<BlockClientScriptEmulator>(
 	"emulateBlockClientScript",
 	() => () => {},
diff --git a/frontend/src/components/MarginHandler.vue b/frontend/src/components/MarginHandler.vue
index 9574c52ad..73bbd8ab6 100644
--- a/frontend/src/components/MarginHandler.vue
+++ b/frontend/src/components/MarginHandler.vue
@@ -115,7 +115,12 @@
 <script setup lang="ts">
 import type Block from "@/block";
 import { Position, useSpacingHandler } from "@/composables/useSpacingHandler";
-import { getComputedStyleFor } from "@/utils/canvasFrameDom";
+import {
+	getComputedStyleFor,
+	getElementDocument,
+	getElementWindow,
+	getEventPointInDocument,
+} from "@/utils/canvasFrameDom";
 import { computed, watchEffect } from "vue";
 import { getNumberFromPx } from "../utils/helpers";
 const props = withDefaults(
@@ -133,11 +138,18 @@ const props = withDefaults(
 );
 
 const emit = defineEmits(["update"]);
-const { canvasProps, updating, blockStyles, handleBorderWidth, longHandleSize, sideHandleSize } =
-	useSpacingHandler(
-		() => props.targetBlock,
-		() => props.breakpoint,
-	);
+const {
+	canvasProps,
+	updating,
+	blockStyles,
+	handleBorderWidth,
+	longHandleSize,
+	sideHandleSize,
+	canvasPixelsForScreenScale,
+} = useSpacingHandler(
+	() => props.targetBlock,
+	() => props.breakpoint,
+);
 
 watchEffect(() => {
 	emit("update", updating.value);
@@ -148,7 +160,7 @@ const topMarginHandlerHeight = computed(() => {
 	blockStyles.value.display;
 	blockStyles.value.margin;
 	let marginTop = getComputedStyleFor(props.target).marginTop;
-	let value = getNumberFromPx(marginTop) * canvasProps.scale;
+	let value = getNumberFromPx(marginTop);
 	return value;
 });
 const bottomMarginHandlerHeight = computed(() => {
@@ -156,7 +168,7 @@ const bottomMarginHandlerHeight = computed(() => {
 	blockStyles.value.display;
 	blockStyles.value.margin;
 	let marginBottom = getComputedStyleFor(props.target).marginBottom;
-	let value = getNumberFromPx(marginBottom) * canvasProps.scale;
+	let value = getNumberFromPx(marginBottom);
 	return value;
 });
 const leftMarginHandlerWidth = computed(() => {
@@ -164,7 +176,7 @@ const leftMarginHandlerWidth = computed(() => {
 	blockStyles.value.display;
 	blockStyles.value.margin;
 	let marginLeft = getComputedStyleFor(props.target).marginLeft;
-	let value = getNumberFromPx(marginLeft) * canvasProps.scale;
+	let value = getNumberFromPx(marginLeft);
 	return value;
 });
 const rightMarginHandlerWidth = computed(() => {
@@ -172,7 +184,7 @@ const rightMarginHandlerWidth = computed(() => {
 	blockStyles.value.display;
 	blockStyles.value.margin;
 	let marginRight = getComputedStyleFor(props.target).marginRight;
-	let value = getNumberFromPx(marginRight) * canvasProps.scale;
+	let value = getNumberFromPx(marginRight);
 	return value;
 });
 
@@ -181,7 +193,7 @@ const topHandle = computed(() => {
 	return {
 		width,
 		height,
-		bottom: `clamp(0px, calc(4px * ${canvasProps.scale}), 12px)`,
+		bottom: `${canvasPixelsForScreenScale(4, 0, 12)}px`,
 		left: `calc(50% - ${width / 2}px)`,
 	};
 });
@@ -191,7 +203,7 @@ const bottomHandle = computed(() => {
 	return {
 		width,
 		height,
-		bottom: `clamp(-16px, calc(-8px * ${canvasProps.scale}), 2px)`,
+		bottom: `${canvasPixelsForScreenScale(-8, -16, 2)}px`,
 		left: `calc(50% - ${width / 2}px)`,
 	};
 });
@@ -201,7 +213,7 @@ const leftHandle = computed(() => {
 	return {
 		width,
 		height,
-		right: `clamp(0px, calc(4px * ${canvasProps.scale}), 12px)`,
+		right: `${canvasPixelsForScreenScale(4, 0, 12)}px`,
 		top: `calc(50% - ${height / 2}px)`,
 	};
 });
@@ -211,7 +223,7 @@ const rightHandle = computed(() => {
 	return {
 		width,
 		height,
-		right: `clamp(-16px, calc(-8px * ${canvasProps.scale}), 2px)`,
+		right: `${canvasPixelsForScreenScale(-8, -16, 2)}px`,
 		top: `calc(50% - ${height / 2}px)`,
 	};
 });
@@ -220,8 +232,8 @@ const handleMargin = (ev: MouseEvent, position: Position) => {
 	if (props.disableHandlers) return;
 	ev.preventDefault();
 	updating.value = true;
-	const startY = ev.clientY;
-	const startX = ev.clientX;
+	const ownerDocument = getElementDocument(props.target);
+	const startPoint = getEventPointInDocument(ev, ownerDocument);
 	const target = ev.target as HTMLElement;
 
 	const startTop = getNumberFromPx(blockStyles.value.marginTop) || 0;
@@ -230,27 +242,28 @@ const handleMargin = (ev: MouseEvent, position: Position) => {
 	const startRight = getNumberFromPx(blockStyles.value.marginRight) || 0;
 
 	// to disable cursor jitter
-	const docCursor = document.body.style.cursor;
-	document.body.style.cursor = window.getComputedStyle(target).cursor;
+	const docCursor = ownerDocument.body.style.cursor;
+	ownerDocument.body.style.cursor = getElementWindow(props.target).getComputedStyle(target).cursor;
 
 	const mousemove = (mouseMoveEvent: MouseEvent) => {
+		const point = getEventPointInDocument(mouseMoveEvent, ownerDocument);
 		let movement = 0;
 		let affectingAxis = null;
 		props.onUpdate && props.onUpdate();
 		if (position === Position.Top) {
-			movement = Math.max(startTop + mouseMoveEvent.clientY - startY, 0);
+			movement = Math.max(startTop + point.y - startPoint.y, 0);
 			props.targetBlock.setStyle("marginTop", movement + "px");
 			affectingAxis = "y";
 		} else if (position === Position.Bottom) {
-			movement = Math.max(startBottom + mouseMoveEvent.clientY - startY, 0);
+			movement = Math.max(startBottom + point.y - startPoint.y, 0);
 			props.targetBlock.setStyle("marginBottom", movement + "px");
 			affectingAxis = "y";
 		} else if (position === Position.Left) {
-			movement = Math.max(startLeft + mouseMoveEvent.clientX - startX, 0);
+			movement = Math.max(startLeft + point.x - startPoint.x, 0);
 			props.targetBlock.setStyle("marginLeft", movement + "px");
 			affectingAxis = "x";
 		} else if (position === Position.Right) {
-			movement = Math.max(startRight + mouseMoveEvent.clientX - startX, 0);
+			movement = Math.max(startRight + point.x - startPoint.x, 0);
 			props.targetBlock.setStyle("marginRight", movement + "px");
 			affectingAxis = "x";
 		}
@@ -276,7 +289,7 @@ const handleMargin = (ev: MouseEvent, position: Position) => {
 	document.addEventListener(
 		"mouseup",
 		(mouseUpEvent) => {
-			document.body.style.cursor = docCursor;
+			ownerDocument.body.style.cursor = docCursor;
 			document.removeEventListener("mousemove", mousemove);
 			updating.value = false;
 			mouseUpEvent.preventDefault();
diff --git a/frontend/src/components/PaddingHandler.vue b/frontend/src/components/PaddingHandler.vue
index 9208c45b0..5549ebcda 100644
--- a/frontend/src/components/PaddingHandler.vue
+++ b/frontend/src/components/PaddingHandler.vue
@@ -111,7 +111,12 @@
 <script setup lang="ts">
 import type Block from "@/block";
 import { Position, useSpacingHandler } from "@/composables/useSpacingHandler";
-import { getComputedStyleFor } from "@/utils/canvasFrameDom";
+import {
+	getComputedStyleFor,
+	getElementDocument,
+	getElementWindow,
+	getEventPointInDocument,
+} from "@/utils/canvasFrameDom";
 import { computed, ref, watchEffect } from "vue";
 import { getNumberFromPx } from "../utils/helpers";
 
@@ -132,11 +137,18 @@ const props = withDefaults(
 );
 
 const emit = defineEmits(["update"]);
-const { canvasProps, updating, blockStyles, handleBorderWidth, longHandleSize, sideHandleSize } =
-	useSpacingHandler(
-		() => props.targetBlock,
-		() => props.breakpoint,
-	);
+const {
+	canvasProps,
+	updating,
+	blockStyles,
+	handleBorderWidth,
+	longHandleSize,
+	sideHandleSize,
+	canvasPixelsForScreenScale,
+} = useSpacingHandler(
+	() => props.targetBlock,
+	() => props.breakpoint,
+);
 
 watchEffect(() => {
 	emit("update", updating.value);
@@ -164,7 +176,7 @@ const getPadding = (side: "Top" | "Left" | "Right" | "Bottom") => {
 	blockStyles.value.paddingBottom;
 	blockStyles.value.paddingLeft;
 	blockStyles.value.padding;
-	return getNumberFromPx(getComputedStyleFor(props.target)[`padding${side}`]) * canvasProps.scale;
+	return getNumberFromPx(getComputedStyleFor(props.target)[`padding${side}`]);
 };
 
 const topHandle = computed(() => {
@@ -172,7 +184,7 @@ const topHandle = computed(() => {
 	return {
 		width,
 		height,
-		bottom: `clamp(-20px, calc(-10px * ${canvasProps.scale}), -6px)`,
+		bottom: `${canvasPixelsForScreenScale(-10, -20, -6)}px`,
 		left: `calc(50% - ${width / 2}px)`,
 	};
 });
@@ -182,7 +194,7 @@ const bottomHandle = computed(() => {
 	return {
 		width,
 		height,
-		top: `clamp(-20px, calc(-10px * ${canvasProps.scale}), -6px)`,
+		top: `${canvasPixelsForScreenScale(-10, -20, -6)}px`,
 		left: `calc(50% - ${width / 2}px)`,
 	};
 });
@@ -192,7 +204,7 @@ const leftHandle = computed(() => {
 	return {
 		width,
 		height,
-		right: `clamp(-20px, calc(-10px * ${canvasProps.scale}), -6px)`,
+		right: `${canvasPixelsForScreenScale(-10, -20, -6)}px`,
 		top: `calc(50% - ${height / 2}px)`,
 	};
 });
@@ -202,7 +214,7 @@ const rightHandle = computed(() => {
 	return {
 		width,
 		height,
-		left: `clamp(-20px, calc(-10px * ${canvasProps.scale}), -6px)`,
+		left: `${canvasPixelsForScreenScale(-10, -20, -6)}px`,
 		top: `calc(50% - ${height / 2}px)`,
 	};
 });
@@ -216,8 +228,8 @@ const handlePadding = (ev: MouseEvent, position: Position) => {
 	// 	messageShown.value = true;
 	// }
 	updating.value = true;
-	const startY = ev.clientY;
-	const startX = ev.clientX;
+	const ownerDocument = getElementDocument(props.target);
+	const startPoint = getEventPointInDocument(ev, ownerDocument);
 	const target = ev.target as HTMLElement;
 
 	const startTop = getNumberFromPx(blockStyles.value.paddingTop) || 5;
@@ -226,27 +238,28 @@ const handlePadding = (ev: MouseEvent, position: Position) => {
 	const startRight = getNumberFromPx(blockStyles.value.paddingRight) || 5;
 
 	// to disable cursor jitter
-	const docCursor = document.body.style.cursor;
-	document.body.style.cursor = window.getComputedStyle(target).cursor;
+	const docCursor = ownerDocument.body.style.cursor;
+	ownerDocument.body.style.cursor = getElementWindow(props.target).getComputedStyle(target).cursor;
 
 	const mousemove = (mouseMoveEvent: MouseEvent) => {
+		const point = getEventPointInDocument(mouseMoveEvent, ownerDocument);
 		let movement = 0;
 		let affectingAxis = null;
 		props.onUpdate && props.onUpdate();
 		if (position === Position.Top) {
-			movement = Math.max(startTop + mouseMoveEvent.clientY - startY, 0);
+			movement = Math.max(startTop + point.y - startPoint.y, 0);
 			props.targetBlock.setStyle("paddingTop", movement + "px");
 			affectingAxis = "y";
 		} else if (position === Position.Bottom) {
-			movement = Math.max(startBottom + startY - mouseMoveEvent.clientY, 0);
+			movement = Math.max(startBottom + startPoint.y - point.y, 0);
 			props.targetBlock.setStyle("paddingBottom", movement + "px");
 			affectingAxis = "y";
 		} else if (position === Position.Left) {
-			movement = Math.max(startLeft + mouseMoveEvent.clientX - startX, 0);
+			movement = Math.max(startLeft + point.x - startPoint.x, 0);
 			props.targetBlock.setStyle("paddingLeft", movement + "px");
 			affectingAxis = "x";
 		} else if (position === Position.Right) {
-			movement = Math.max(startRight + startX - mouseMoveEvent.clientX, 0);
+			movement = Math.max(startRight + startPoint.x - point.x, 0);
 			props.targetBlock.setStyle("paddingRight", movement + "px");
 			affectingAxis = "x";
 		}
@@ -273,7 +286,7 @@ const handlePadding = (ev: MouseEvent, position: Position) => {
 	document.addEventListener(
 		"mouseup",
 		(mouseUpEvent) => {
-			document.body.style.cursor = docCursor;
+			ownerDocument.body.style.cursor = docCursor;
 			document.removeEventListener("mousemove", mousemove);
 			updating.value = false;
 			mouseUpEvent.preventDefault();
diff --git a/frontend/src/components/TextBlock.vue b/frontend/src/components/TextBlock.vue
index 5bb09e25a..98c509d4a 100644
--- a/frontend/src/components/TextBlock.vue
+++ b/frontend/src/components/TextBlock.vue
@@ -2,11 +2,11 @@
 	<component :is="block.getTag()" ref="component" :key="editor" class="__text_block__">
 		<div v-html="textContent" v-show="!editor && textContent" @click="handleClick"></div>
 		<TextBlockBubbleMenu
-			v-if="editor"
+			v-if="editor && canvasOverlayElement"
 			:block="block"
 			:editor="editor"
 			:canvas-props="canvasProps"
-			:overlay-element="overlayElement"
+			:overlay-element="canvasOverlayElement"
 			:is-editable="isEditable"
 			ref="bubbleMenu" />
 		<editor-content
@@ -70,9 +70,7 @@ const props = withDefaults(
 );
 
 const canvasProps = !props.preview ? (inject("canvasProps") as CanvasProps) : null;
-const overlayElement = computed(
-	() => component.value?.ownerDocument.body || canvasProps?.overlayElement || document.body,
-);
+const canvasOverlayElement = computed(() => canvasProps?.frameRoots?.get(props.breakpoint) || null);
 
 const FontFamilyPasteRule = Extension.create({
 	name: "fontFamilyPasteRule",
diff --git a/frontend/src/composables/useSpacingHandler.ts b/frontend/src/composables/useSpacingHandler.ts
index cbb4f9a94..1cc4d1e44 100644
--- a/frontend/src/composables/useSpacingHandler.ts
+++ b/frontend/src/composables/useSpacingHandler.ts
@@ -30,19 +30,30 @@ export function useSpacingHandler(getTargetBlock: () => Block, getBreakpoint: ()
 		return styles;
 	});
 
-	const handleBorderWidth = computed(() => `${clamp(1 * canvasProps.scale, 1, 2)}px`);
+	const canvasPixelsForScreenScale = (size: number, min: number, max: number) =>
+		clamp(size * canvasProps.scale, min, max) / canvasProps.scale;
+
+	const handleBorderWidth = computed(() => `${canvasPixelsForScreenScale(1, 1, 2)}px`);
 
 	// Long-edge handles (top/bottom) are wide and short; side handles (left/right)
 	// are tall and narrow. The dimensions are identical for margin and padding;
 	// only the offsets (set per-component) differ.
 	const longHandleSize = computed(() => ({
-		width: clamp(16 * canvasProps.scale, 8, 32),
-		height: clamp(4 * canvasProps.scale, 2, 8),
+		width: canvasPixelsForScreenScale(16, 8, 32),
+		height: canvasPixelsForScreenScale(4, 2, 8),
 	}));
 	const sideHandleSize = computed(() => ({
-		width: clamp(4 * canvasProps.scale, 2, 8),
-		height: clamp(16 * canvasProps.scale, 8, 32),
+		width: canvasPixelsForScreenScale(4, 2, 8),
+		height: canvasPixelsForScreenScale(16, 8, 32),
 	}));
 
-	return { canvasProps, updating, blockStyles, handleBorderWidth, longHandleSize, sideHandleSize };
+	return {
+		canvasProps,
+		updating,
+		blockStyles,
+		handleBorderWidth,
+		longHandleSize,
+		sideHandleSize,
+		canvasPixelsForScreenScale,
+	};
 }
diff --git a/frontend/src/utils/trackTarget.ts b/frontend/src/utils/trackTarget.ts
index 14cfaac02..674d71e75 100644
--- a/frontend/src/utils/trackTarget.ts
+++ b/frontend/src/utils/trackTarget.ts
@@ -9,7 +9,10 @@ function trackTarget(target: HTMLElement | SVGElement, host: HTMLElement, canvas
 		top: 0,
 		left: 0,
 		update() {
-			const rect = getElementRectInEditor(target);
+			const rect =
+				target.ownerDocument === host.ownerDocument
+					? target.getBoundingClientRect()
+					: getElementRectInEditor(target);
 			targetBounds.width = rect.width;
 			targetBounds.height = rect.height;
 			targetBounds.top = rect.top;

From 950705a4564c8adec5efe151648d3a1f2b187721 Mon Sep 17 00:00:00 2001
From: stravo1 <stravoone@gmail.com>
Date: Thu, 2 Jul 2026 23:12:45 +0530
Subject: [PATCH 4/9] refactor: consolidate iframe canvas integration

Centralize cross-frame DOM and drag handling so canvas interactions use a
single coordinate conversion and listener lifecycle.

- consolidate resize, spacing, block movement, panning, and insertion drags
- manage event forwarding and drop-zone cleanup per iframe registration
- remove obsolete outer overlay and unused frame document state
- preserve editable targets when forwarding iframe events
- fix HTML editor double-click and context-menu dispatch inside frames
- initialize fonts after teleported canvas elements are mounted
- keep iframe styles, classes, and theme attributes synchronized
- consolidate async client-script cleanup and error handling
- prevent history from remaining paused when insertion targets disappear
- remove leftover event and history debug logging

Verification:
- production frontend build passes
- touched iframe modules pass focused TypeScript checking
- browser and Cypress testing left for manual verification
---
 frontend/src/builder.d.ts                     |   2 -
 frontend/src/components/BlockEditor.vue       |  59 +++----
 .../src/components/BorderRadiusHandler.vue    |  72 ++++----
 frontend/src/components/BoxResizer.vue        | 164 +++++-------------
 frontend/src/components/BuilderBlock.vue      |   6 +-
 frontend/src/components/BuilderCanvas.vue     |  74 ++++----
 .../src/components/BuilderCanvasFrame.vue     |  27 +--
 frontend/src/components/MarginHandler.vue     | 100 +++++------
 frontend/src/components/PaddingHandler.vue    | 102 +++++------
 frontend/src/components/TextBlock.vue         |  10 +-
 frontend/src/types/Builder/BuilderCanvas.ts   |   2 -
 frontend/src/utils/canvasFrameDom.ts          |  90 +++++++---
 frontend/src/utils/scriptSandbox.ts           |  67 +++----
 frontend/src/utils/useBlockEventHandlers.ts   |  16 +-
 frontend/src/utils/useBuilderEvents.ts        |   1 -
 frontend/src/utils/useCanvasEvents.ts         |  59 +++----
 .../src/utils/useCanvasMarqueeSelection.ts    |   2 +-
 17 files changed, 389 insertions(+), 464 deletions(-)

diff --git a/frontend/src/builder.d.ts b/frontend/src/builder.d.ts
index 05e940576..1141ae5df 100644
--- a/frontend/src/builder.d.ts
+++ b/frontend/src/builder.d.ts
@@ -130,8 +130,6 @@ declare interface CanvasProps {
 	panning: boolean;
 	background: string;
 	settingCanvas: boolean;
-	overlayElement: HTMLElement | null;
-	frameDocuments?: Map<string, Document>;
 	frameRoots?: Map<string, HTMLElement>;
 	breakpoints: Breakpoint[];
 }
diff --git a/frontend/src/components/BlockEditor.vue b/frontend/src/components/BlockEditor.vue
index 8f34872d3..ef8687177 100644
--- a/frontend/src/components/BlockEditor.vue
+++ b/frontend/src/components/BlockEditor.vue
@@ -39,9 +39,9 @@ import useCanvasStore from "@/stores/canvasStore";
 import blockController from "@/utils/blockController";
 import {
 	elementFromEditorPoint,
-	getElementDocument,
 	getEventPointInDocument,
 	getEventPointInEditor,
+	startCanvasDrag,
 } from "@/utils/canvasFrameDom";
 import { addPxToNumber } from "@/utils/helpers";
 import { Ref, computed, inject, nextTick, onMounted, ref, watch, watchEffect } from "vue";
@@ -278,54 +278,41 @@ const handleMove = (ev: MouseEvent) => {
 	ev.stopPropagation();
 	const pauseId = canvasStore.activeCanvas?.history?.pause();
 	const target = ev.target as HTMLElement;
-	const ownerDocument = getElementDocument(props.target);
-	const startPoint = getEventPointInDocument(ev, ownerDocument);
 	const startLeft = (props.target as HTMLElement).offsetLeft || 0;
 	const startTop = (props.target as HTMLElement).offsetTop || 0;
 
 	moving.value = true;
 	guides.showX();
-
-	// to disable cursor jitter
-	const docCursor = ownerDocument.body.style.cursor;
-	ownerDocument.body.style.cursor = "grabbing";
 	target.style.cursor = "grabbing";
 
-	const mousemove = async (mouseMoveEvent: MouseEvent) => {
-		if (canvasStore.isMarqueeActive) return;
-		const point = getEventPointInDocument(mouseMoveEvent, ownerDocument);
-		const movementX = point.x - startPoint.x;
-		const movementY = point.y - startPoint.y;
-		let finalLeft = startLeft + movementX;
-		let finalTop = startTop + movementY;
-		props.block.setStyle("left", addPxToNumber(finalLeft));
-		props.block.setStyle("top", addPxToNumber(finalTop));
-		await nextTick();
-		const { leftOffset, rightOffset } = guides.getPositionOffset();
-		if (leftOffset !== 0) {
-			props.block.setStyle("left", addPxToNumber(finalLeft + leftOffset));
-		}
-		if (rightOffset !== 0) {
-			props.block.setStyle("left", addPxToNumber(finalLeft + rightOffset));
-		}
+	startCanvasDrag(ev, props.target, {
+		cursor: "grabbing",
+		onMove: async ({ event, movementX, movementY }) => {
+			if (canvasStore.isMarqueeActive) return;
+			const finalLeft = startLeft + movementX;
+			const finalTop = startTop + movementY;
+			props.block.setStyle("left", addPxToNumber(finalLeft));
+			props.block.setStyle("top", addPxToNumber(finalTop));
+			await nextTick();
+			const { leftOffset, rightOffset } = guides.getPositionOffset();
+			if (leftOffset !== 0) {
+				props.block.setStyle("left", addPxToNumber(finalLeft + leftOffset));
+			}
+			if (rightOffset !== 0) {
+				props.block.setStyle("left", addPxToNumber(finalLeft + rightOffset));
+			}
 
-		mouseMoveEvent.preventDefault();
-		preventCLick.value = true;
-	};
-	document.addEventListener("mousemove", mousemove);
-	document.addEventListener(
-		"mouseup",
-		(mouseUpEvent) => {
+			event.preventDefault();
+			preventCLick.value = true;
+		},
+		onEnd: (event) => {
 			moving.value = false;
-			ownerDocument.body.style.cursor = docCursor;
 			target.style.cursor = "grab";
-			document.removeEventListener("mousemove", mousemove);
-			mouseUpEvent.preventDefault();
+			event.preventDefault();
 			guides.hideX();
 			canvasStore.activeCanvas?.history?.resume(pauseId, true);
 		},
-		{ once: true },
-	);
+	});
 };
 
 defineExpose({
diff --git a/frontend/src/components/BorderRadiusHandler.vue b/frontend/src/components/BorderRadiusHandler.vue
index 4fbb19149..b6ed41cda 100644
--- a/frontend/src/components/BorderRadiusHandler.vue
+++ b/frontend/src/components/BorderRadiusHandler.vue
@@ -18,7 +18,7 @@
 
 <script setup lang="ts">
 import type Block from "@/block";
-import { getComputedStyleFor, getElementDocument, getEventPointInDocument } from "@/utils/canvasFrameDom";
+import { getComputedStyleFor, startCanvasDrag } from "@/utils/canvasFrameDom";
 import { getNumberFromPx } from "@/utils/helpers";
 import type { Ref } from "vue";
 import { computed, inject, onMounted, reactive, ref, watchEffect } from "vue";
@@ -77,47 +77,43 @@ const setHandlerPosition = (radius: number) => {
 };
 
 const handleRounded = (ev: MouseEvent) => {
-	const ownerDocument = getElementDocument(props.target);
-	let lastPoint = getEventPointInDocument(ev, ownerDocument);
+	let lastPoint: { x: number; y: number } | null = null;
 	updating.value = true;
 
 	const handleDimensions = handler.value.getBoundingClientRect();
 
-	const mousemove = (mouseMoveEvent: MouseEvent) => {
-		mouseMoveEvent.preventDefault();
-		const point = getEventPointInDocument(mouseMoveEvent, ownerDocument);
-		const movementX = point.x - lastPoint.x;
-		const movementY = point.y - lastPoint.y;
-		const movement = ((movementX + movementY) / 2) * 2;
-
-		if (movement < 0) {
-			MIN_POSITION.top = -(handleDimensions.height / 2);
-			MIN_POSITION.left = -(handleDimensions.width / 2);
-		}
-
-		const radius = Math.round(
-			Math.max(0, Math.min(getNumberFromPx(props.target.style.borderRadius) + movement, maxRadius.value)),
-		);
-
-		borderRadius.value = radius;
-		setHandlerPosition(radius);
-		props.targetBlock.setStyle("borderRadius", `${radius}px`);
-
-		lastPoint = point;
-	};
-
-	const mouseup = (mouseUpEvent: MouseEvent) => {
-		mouseUpEvent.preventDefault();
-		if (getNumberFromPx(props.targetBlock.getStyle("borderRadius")) < 10) {
-			handlerTop.value = MIN_POSITION.top;
-			handlerLeft.value = MIN_POSITION.left;
-		}
-		updating.value = false;
-		document.removeEventListener("mousemove", mousemove);
-	};
-
-	document.addEventListener("mousemove", mousemove);
-	document.addEventListener("mouseup", mouseup, { once: true });
+	startCanvasDrag(ev, props.target, {
+		onMove: ({ event, point, startPoint }) => {
+			const previousPoint = lastPoint || startPoint;
+			event.preventDefault();
+			const movementX = point.x - previousPoint.x;
+			const movementY = point.y - previousPoint.y;
+			const movement = ((movementX + movementY) / 2) * 2;
+
+			if (movement < 0) {
+				MIN_POSITION.top = -(handleDimensions.height / 2);
+				MIN_POSITION.left = -(handleDimensions.width / 2);
+			}
+
+			const radius = Math.round(
+				Math.max(0, Math.min(getNumberFromPx(props.target.style.borderRadius) + movement, maxRadius.value)),
+			);
+
+			borderRadius.value = radius;
+			setHandlerPosition(radius);
+			props.targetBlock.setStyle("borderRadius", `${radius}px`);
+
+			lastPoint = point;
+		},
+		onEnd: (event) => {
+			event.preventDefault();
+			if (getNumberFromPx(String(props.targetBlock.getStyle("borderRadius") || "")) < 10) {
+				handlerTop.value = MIN_POSITION.top;
+				handlerLeft.value = MIN_POSITION.left;
+			}
+			updating.value = false;
+		},
+	});
 };
 
 onMounted(() => {
diff --git a/frontend/src/components/BoxResizer.vue b/frontend/src/components/BoxResizer.vue
index 54d9ced5b..6d15a0b7d 100644
--- a/frontend/src/components/BoxResizer.vue
+++ b/frontend/src/components/BoxResizer.vue
@@ -34,12 +34,7 @@
 <script setup lang="ts">
 import type Block from "@/block";
 import useCanvasStore from "@/stores/canvasStore";
-import {
-	getComputedStyleFor,
-	getElementDocument,
-	getElementWindow,
-	getEventPointInDocument,
-} from "@/utils/canvasFrameDom";
+import { getComputedStyleFor, startCanvasDrag } from "@/utils/canvasFrameDom";
 import { getNumberFromPx } from "@/utils/helpers";
 import { clamp } from "@vueuse/core";
 import { computed, inject, onMounted, ref, watch } from "vue";
@@ -92,135 +87,60 @@ const fontSize = computed(() => {
 	return Math.round(getNumberFromPx(getComputedStyleFor(props.target).getPropertyValue("font-size")));
 });
 
-const handleRightResize = (ev: MouseEvent) => {
-	const ownerDocument = getElementDocument(props.target);
-	const startPoint = getEventPointInDocument(ev, ownerDocument);
-	const startHeight = (props.target as HTMLElement).offsetHeight;
-	const startWidth = (props.target as HTMLElement).offsetWidth;
-	const blockStartWidth = props.targetBlock.getStyle("width") as string;
-	const blockStartHeight = props.targetBlock.getStyle("height") as string;
-	const startFontSize = fontSize.value || 0;
+type ResizeDirection = "right" | "bottom" | "corner";
 
-	// to disable cursor jitter
-	const docCursor = ownerDocument.body.style.cursor;
-	ownerDocument.body.style.cursor = getElementWindow(props.target).getComputedStyle(
-		ev.target as HTMLElement,
-	).cursor;
-	resizing.value = true;
-	guides.showX();
-	const mousemove = (mouseMoveEvent: MouseEvent) => {
-		const point = getEventPointInDocument(mouseMoveEvent, ownerDocument);
-		const movement = point.x - startPoint.x;
-		if (props.targetBlock.isText() && !props.targetBlock.hasChildren()) {
-			setFontSize(movement, startFontSize);
-			return mouseMoveEvent.preventDefault();
-		}
-		setWidth(movement, startWidth, blockStartWidth);
-		if (mouseMoveEvent.shiftKey) {
-			setHeight(movement, startHeight, blockStartHeight);
-		}
-		mouseMoveEvent.preventDefault();
-	};
-	document.addEventListener("mousemove", mousemove);
-	document.addEventListener(
-		"mouseup",
-		(mouseUpEvent) => {
-			ownerDocument.body.style.cursor = docCursor;
-			document.removeEventListener("mousemove", mousemove);
-			mouseUpEvent.preventDefault();
-			resizing.value = false;
-			guides.hideX();
-		},
-		{ once: true },
-	);
-};
-
-const handleBottomResize = (ev: MouseEvent) => {
-	const ownerDocument = getElementDocument(props.target);
-	const startPoint = getEventPointInDocument(ev, ownerDocument);
+const startResize = (ev: MouseEvent, direction: ResizeDirection) => {
 	const startHeight = (props.target as HTMLElement).offsetHeight;
 	const startWidth = (props.target as HTMLElement).offsetWidth;
 	const blockStartWidth = props.targetBlock.getStyle("width") as string;
 	const blockStartHeight = props.targetBlock.getStyle("height") as string;
 	const startFontSize = fontSize.value || 0;
 
-	// to disable cursor jitter
-	const docCursor = ownerDocument.body.style.cursor;
-	ownerDocument.body.style.cursor = getElementWindow(props.target).getComputedStyle(
-		ev.target as HTMLElement,
-	).cursor;
 	resizing.value = true;
-	guides.showY();
-
-	const mousemove = (mouseMoveEvent: MouseEvent) => {
-		const point = getEventPointInDocument(mouseMoveEvent, ownerDocument);
-		const movement = point.y - startPoint.y;
-
-		if (props.targetBlock.isText() && !props.targetBlock.hasChildren()) {
-			setFontSize(movement, startFontSize);
-			return mouseMoveEvent.preventDefault();
-		}
-		setHeight(movement, startHeight, blockStartHeight);
-		if (mouseMoveEvent.shiftKey) {
-			setWidth(movement, startWidth, blockStartWidth);
-		}
-		mouseMoveEvent.preventDefault();
-	};
-	document.addEventListener("mousemove", mousemove);
-	document.addEventListener(
-		"mouseup",
-		(mouseUpEvent) => {
-			ownerDocument.body.style.cursor = docCursor;
-			document.removeEventListener("mousemove", mousemove);
-			mouseUpEvent.preventDefault();
-			resizing.value = false;
-			guides.hideY();
+	if (direction === "right") guides.showX();
+	if (direction === "bottom") guides.showY();
+
+	startCanvasDrag(ev, props.target, {
+		cursor: getComputedStyleFor(ev.target as Element).cursor,
+		onMove: ({ event, movementX, movementY }) => {
+			const primaryMovement = direction === "right" ? movementX : movementY;
+			if (props.targetBlock.isText() && !props.targetBlock.hasChildren()) {
+				setFontSize(primaryMovement, startFontSize);
+				event.preventDefault();
+				return;
+			}
+
+			if (direction !== "bottom") {
+				setWidth(movementX, startWidth, blockStartWidth);
+			}
+			if (direction !== "right") {
+				setHeight(
+					direction === "corner" && event.shiftKey ? movementX : movementY,
+					startHeight,
+					blockStartHeight,
+				);
+			}
+			if (direction === "right" && event.shiftKey) {
+				setHeight(movementX, startHeight, blockStartHeight);
+			}
+			if (direction === "bottom" && event.shiftKey) {
+				setWidth(movementY, startWidth, blockStartWidth);
+			}
+			event.preventDefault();
 		},
-		{ once: true },
-	);
-};
-
-const handleBottomCornerResize = (ev: MouseEvent) => {
-	const ownerDocument = getElementDocument(props.target);
-	const startPoint = getEventPointInDocument(ev, ownerDocument);
-	const startHeight = (props.target as HTMLElement).offsetHeight;
-	const startWidth = (props.target as HTMLElement).offsetWidth;
-	const blockStartWidth = props.targetBlock.getStyle("width") as string;
-	const blockStartHeight = props.targetBlock.getStyle("height") as string;
-	const startFontSize = fontSize.value || 0;
-
-	// to disable cursor jitter
-	const docCursor = ownerDocument.body.style.cursor;
-	ownerDocument.body.style.cursor = getElementWindow(props.target).getComputedStyle(
-		ev.target as HTMLElement,
-	).cursor;
-	resizing.value = true;
-
-	const mousemove = (mouseMoveEvent: MouseEvent) => {
-		const point = getEventPointInDocument(mouseMoveEvent, ownerDocument);
-		const movementX = point.x - startPoint.x;
-		const movementY = point.y - startPoint.y;
-		if (props.targetBlock.isText() && !props.targetBlock.hasChildren()) {
-			setFontSize(movementY, startFontSize);
-			return mouseMoveEvent.preventDefault();
-		}
-		setWidth(movementX, startWidth, blockStartWidth);
-		setHeight(mouseMoveEvent.shiftKey ? movementX : movementY, startHeight, blockStartHeight);
-		mouseMoveEvent.preventDefault();
-	};
-	document.addEventListener("mousemove", mousemove);
-	document.addEventListener(
-		"mouseup",
-		(mouseUpEvent) => {
-			ownerDocument.body.style.cursor = docCursor;
-			document.removeEventListener("mousemove", mousemove);
-			mouseUpEvent.preventDefault();
+		onEnd: (event) => {
+			event.preventDefault();
 			resizing.value = false;
+			if (direction === "right") guides.hideX();
+			if (direction === "bottom") guides.hideY();
 		},
-		{ once: true },
-	);
+	});
 };
 
+const handleRightResize = (ev: MouseEvent) => startResize(ev, "right");
+const handleBottomResize = (ev: MouseEvent) => startResize(ev, "bottom");
+const handleBottomCornerResize = (ev: MouseEvent) => startResize(ev, "corner");
+
 const setWidth = (movementX: number, startWidth: number, blockStartWidth: string) => {
 	const finalWidth = Math.round(startWidth + movementX);
 	if (blockStartWidth?.includes("%")) {
diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 7ae140973..0cf8a5149 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -25,8 +25,8 @@
 			v-for="child in block.getChildren().filter((child) => child.isVisible(breakpoint))" />
 	</component>
 	<teleport
-		:to="canvasOverlayElement"
-		v-if="canvasOverlayElement && !preview && Boolean(canvasProps)">
+		:to="canvasRoot"
+		v-if="canvasRoot && !preview && Boolean(canvasProps)">
 		<!-- prettier-ignore -->
 		<BlockEditor
 			ref="editor"
@@ -279,7 +279,7 @@ const attributes = computed(() => {
 });
 
 const canvasProps = !props.preview ? (inject("canvasProps") as CanvasProps) : null;
-const canvasOverlayElement = computed(() => canvasProps?.frameRoots?.get(props.breakpoint) || null);
+const canvasRoot = computed(() => canvasProps?.frameRoots?.get(props.breakpoint) || null);
 const emulateBlockClientScript = inject<BlockClientScriptEmulator>(
 	"emulateBlockClientScript",
 	() => () => {},
diff --git a/frontend/src/components/BuilderCanvas.vue b/frontend/src/components/BuilderCanvas.vue
index 637362e82..97dd45346 100644
--- a/frontend/src/components/BuilderCanvas.vue
+++ b/frontend/src/components/BuilderCanvas.vue
@@ -133,11 +133,6 @@
 				<FitScreenIcon />
 			</div>
 		</div>
-		<div
-			class="overlay absolute"
-			:class="{ 'pointer-events-none': isOverDropZone }"
-			id="overlay"
-			ref="overlay" />
 		<div v-show="marquee.visible" class="pointer-events-none fixed z-[200]" :style="marqueeStyle" />
 		<div class="absolute top-0 order-1 w-full">
 			<slot name="header"></slot>
@@ -180,7 +175,20 @@ import { useCanvasEvents } from "@/utils/useCanvasEvents";
 import { useCanvasMarqueeSelection } from "@/utils/useCanvasMarqueeSelection";
 import { useCanvasUtils } from "@/utils/useCanvasUtils";
 import { Tooltip } from "frappe-ui";
-import { Ref, computed, nextTick, onMounted, onUnmounted, provide, reactive, ref, useId, watch } from "vue";
+import {
+	type EffectScope,
+	Ref,
+	computed,
+	effectScope,
+	nextTick,
+	onMounted,
+	onUnmounted,
+	provide,
+	reactive,
+	ref,
+	useId,
+	watch,
+} from "vue";
 import setPanAndZoom from "../utils/panAndZoom";
 import BlockSnapGuides from "./BlockSnapGuides.vue";
 import BuilderBlock from "./BuilderBlock.vue";
@@ -203,13 +211,13 @@ const resizingBlock = ref(false);
 const canvasContainer = ref(null) as Ref<HTMLElement | null>;
 const canvas = ref(null);
 const showBlocks = ref(false);
-const overlay = ref(null);
 const blockStyles = reactive(new Map<string, string>());
 const frameRoots = reactive(new Map<string, HTMLElement>());
-const frameDocuments = reactive(new Map<string, Document>());
 const frameEpoch = ref(0);
-const frameDropStates = reactive(new Map<string, boolean>());
-const frameEventCleanups = new Map<Document, () => void>();
+const frameRegistrations = new Map<
+	string,
+	{ document: Document; scope: EffectScope; stopForwarding: () => void }
+>();
 const cursorStyle = ref("default");
 
 const props = withDefaults(
@@ -247,7 +255,6 @@ const {
 } = useBlockSelection(block);
 
 const canvasProps = reactive<CanvasProps>({
-	overlayElement: null,
 	background: "#fff",
 	scale: 1,
 	translateX: 0,
@@ -255,7 +262,6 @@ const canvasProps = reactive<CanvasProps>({
 	settingCanvas: true,
 	scaling: false,
 	panning: false,
-	frameDocuments,
 	frameRoots,
 	breakpoints: [
 		{
@@ -314,12 +320,9 @@ const { marquee, marqueeStyle, suppressNextClick, handleMarqueeStart, cleanupMar
 		setHoveredBreakpoint,
 	});
 
-const isOverDropZone = computed(() => Array.from(frameDropStates.values()).some(Boolean));
-
 onMounted(() => {
 	const canvasContainerEl = canvasContainer.value as unknown as HTMLElement;
 	const canvasEl = canvas.value as unknown as HTMLElement;
-	canvasProps.overlayElement = overlay.value;
 	setScaleAndTranslate();
 	showBlocks.value = true;
 	setupHistory();
@@ -345,8 +348,7 @@ onMounted(() => {
 
 onUnmounted(() => {
 	cleanupMarqueeListeners();
-	frameEventCleanups.forEach((cleanup) => cleanup());
-	frameEventCleanups.clear();
+	frameRegistrations.forEach(({ document }, breakpoint) => unregisterFrame(breakpoint, document));
 });
 
 const handleClick = (ev: MouseEvent) => {
@@ -364,25 +366,31 @@ const handleClick = (ev: MouseEvent) => {
 };
 
 function registerFrame(breakpoint: string, doc: Document, root: HTMLElement, iframe: HTMLIFrameElement) {
+	unregisterFrame(breakpoint);
 	frameRoots.set(breakpoint, root);
-	frameDocuments.set(breakpoint, doc);
 
-	frameEventCleanups.set(doc, forwardFrameEvents(doc, iframe));
-	const { isOverDropZone: frameIsOverDropZone } = useCanvasDropZone(ref(doc.body), block, findBlock);
-	watch(frameIsOverDropZone, (value) => frameDropStates.set(breakpoint, value), { immediate: true });
+	const scope = effectScope();
+	scope.run(() => {
+		const { isOverDropZone } = useCanvasDropZone(ref(doc.body), block, findBlock);
+		watch(isOverDropZone, (isOver) => root.toggleAttribute("data-drop-active", isOver), { immediate: true });
+	});
+	frameRegistrations.set(breakpoint, {
+		document: doc,
+		scope,
+		stopForwarding: forwardFrameEvents(doc, iframe),
+	});
 	nextTick(setScaleAndTranslate);
 }
 
-function unregisterFrame(breakpoint: string, doc: Document | null) {
-	if (doc) {
-		frameEventCleanups.get(doc)?.();
-		frameEventCleanups.delete(doc);
-	}
-	if (!doc || frameDocuments.get(breakpoint) === doc) {
-		frameRoots.delete(breakpoint);
-		frameDocuments.delete(breakpoint);
-		frameDropStates.delete(breakpoint);
-	}
+function unregisterFrame(breakpoint: string, doc: Document | null = null) {
+	const registration = frameRegistrations.get(breakpoint);
+	if (doc && registration && registration.document !== doc) return;
+
+	registration?.stopForwarding();
+	registration?.scope.stop();
+	frameRegistrations.delete(breakpoint);
+	frameRoots.get(breakpoint)?.removeAttribute("data-drop-active");
+	frameRoots.delete(breakpoint);
 }
 
 onMounted(() => {
@@ -623,4 +631,8 @@ const renderedBreakpoints = computed(() => canvasProps.breakpoints.filter((bp) =
 		line-height: revert;
 	}
 }
+
+.canvas[data-drop-active] > .editor {
+	pointer-events: none;
+}
 </style>
diff --git a/frontend/src/components/BuilderCanvasFrame.vue b/frontend/src/components/BuilderCanvasFrame.vue
index 4a5aa98d1..7493417c3 100644
--- a/frontend/src/components/BuilderCanvasFrame.vue
+++ b/frontend/src/components/BuilderCanvasFrame.vue
@@ -54,7 +54,7 @@ const canvasRoot = ref<HTMLElement | null>(null);
 const target = ref<HTMLElement | null>(null);
 const height = ref(1);
 let resizeObserver: ResizeObserver | null = null;
-let headObserver: MutationObserver | null = null;
+let editorObserver: MutationObserver | null = null;
 let currentDocument: Document | null = null;
 
 const rootStyle = computed(() => ({
@@ -98,8 +98,8 @@ function updateHeight() {
 function cleanupFrame() {
 	resizeObserver?.disconnect();
 	resizeObserver = null;
-	headObserver?.disconnect();
-	headObserver = null;
+	editorObserver?.disconnect();
+	editorObserver = null;
 	if (currentDocument) emit("dispose", props.breakpoint, currentDocument);
 	currentDocument = null;
 	target.value = null;
@@ -124,11 +124,21 @@ async function attachFrame() {
 	resizeObserver.observe(doc.body);
 	updateHeight();
 
-	headObserver = new MutationObserver(() => {
+	editorObserver = new MutationObserver((mutations) => {
 		if (!currentDocument) return;
-		cloneEditorStyles(currentDocument);
+		if (mutations.some(({ target }) => document.head.contains(target))) {
+			cloneEditorStyles(currentDocument);
+		}
+		if (mutations.some(({ type }) => type === "attributes")) {
+			syncDocumentChrome(currentDocument);
+		}
 	});
-	headObserver.observe(document.head, { childList: true, subtree: true, characterData: true });
+	editorObserver.observe(document.head, { childList: true, subtree: true, characterData: true });
+	editorObserver.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: ["class", "data-theme"],
+	});
+	editorObserver.observe(document.body, { attributes: true, attributeFilter: ["class"] });
 
 	emit("ready", props.breakpoint, doc, canvasRoot.value, frame);
 }
@@ -143,11 +153,6 @@ watch(
 	{ flush: "post" },
 );
 
-watch(
-	() => [props.dark, document.documentElement.dataset.theme],
-	() => currentDocument && syncDocumentChrome(currentDocument),
-);
-
 onBeforeUnmount(() => {
 	iframe.value?.removeEventListener("load", attachFrame);
 	cleanupFrame();
diff --git a/frontend/src/components/MarginHandler.vue b/frontend/src/components/MarginHandler.vue
index 73bbd8ab6..b535b6c87 100644
--- a/frontend/src/components/MarginHandler.vue
+++ b/frontend/src/components/MarginHandler.vue
@@ -115,12 +115,7 @@
 <script setup lang="ts">
 import type Block from "@/block";
 import { Position, useSpacingHandler } from "@/composables/useSpacingHandler";
-import {
-	getComputedStyleFor,
-	getElementDocument,
-	getElementWindow,
-	getEventPointInDocument,
-} from "@/utils/canvasFrameDom";
+import { getComputedStyleFor, startCanvasDrag } from "@/utils/canvasFrameDom";
 import { computed, watchEffect } from "vue";
 import { getNumberFromPx } from "../utils/helpers";
 const props = withDefaults(
@@ -232,69 +227,58 @@ const handleMargin = (ev: MouseEvent, position: Position) => {
 	if (props.disableHandlers) return;
 	ev.preventDefault();
 	updating.value = true;
-	const ownerDocument = getElementDocument(props.target);
-	const startPoint = getEventPointInDocument(ev, ownerDocument);
 	const target = ev.target as HTMLElement;
 
-	const startTop = getNumberFromPx(blockStyles.value.marginTop) || 0;
-	const startBottom = getNumberFromPx(blockStyles.value.marginBottom) || 0;
-	const startLeft = getNumberFromPx(blockStyles.value.marginLeft) || 0;
-	const startRight = getNumberFromPx(blockStyles.value.marginRight) || 0;
+	const startTop = getNumberFromPx(String(blockStyles.value.marginTop || "")) || 0;
+	const startBottom = getNumberFromPx(String(blockStyles.value.marginBottom || "")) || 0;
+	const startLeft = getNumberFromPx(String(blockStyles.value.marginLeft || "")) || 0;
+	const startRight = getNumberFromPx(String(blockStyles.value.marginRight || "")) || 0;
 
-	// to disable cursor jitter
-	const docCursor = ownerDocument.body.style.cursor;
-	ownerDocument.body.style.cursor = getElementWindow(props.target).getComputedStyle(target).cursor;
-
-	const mousemove = (mouseMoveEvent: MouseEvent) => {
-		const point = getEventPointInDocument(mouseMoveEvent, ownerDocument);
-		let movement = 0;
-		let affectingAxis = null;
-		props.onUpdate && props.onUpdate();
-		if (position === Position.Top) {
-			movement = Math.max(startTop + point.y - startPoint.y, 0);
-			props.targetBlock.setStyle("marginTop", movement + "px");
-			affectingAxis = "y";
-		} else if (position === Position.Bottom) {
-			movement = Math.max(startBottom + point.y - startPoint.y, 0);
-			props.targetBlock.setStyle("marginBottom", movement + "px");
-			affectingAxis = "y";
-		} else if (position === Position.Left) {
-			movement = Math.max(startLeft + point.x - startPoint.x, 0);
-			props.targetBlock.setStyle("marginLeft", movement + "px");
-			affectingAxis = "x";
-		} else if (position === Position.Right) {
-			movement = Math.max(startRight + point.x - startPoint.x, 0);
-			props.targetBlock.setStyle("marginRight", movement + "px");
-			affectingAxis = "x";
-		}
+	startCanvasDrag(ev, props.target, {
+		cursor: getComputedStyleFor(target).cursor,
+		onMove: ({ event, point, startPoint }) => {
+			let movement = 0;
+			let affectingAxis = null;
+			props.onUpdate?.();
+			if (position === Position.Top) {
+				movement = Math.max(startTop + point.y - startPoint.y, 0);
+				props.targetBlock.setStyle("marginTop", movement + "px");
+				affectingAxis = "y";
+			} else if (position === Position.Bottom) {
+				movement = Math.max(startBottom + point.y - startPoint.y, 0);
+				props.targetBlock.setStyle("marginBottom", movement + "px");
+				affectingAxis = "y";
+			} else if (position === Position.Left) {
+				movement = Math.max(startLeft + point.x - startPoint.x, 0);
+				props.targetBlock.setStyle("marginLeft", movement + "px");
+				affectingAxis = "x";
+			} else if (position === Position.Right) {
+				movement = Math.max(startRight + point.x - startPoint.x, 0);
+				props.targetBlock.setStyle("marginRight", movement + "px");
+				affectingAxis = "x";
+			}
 
-		if (mouseMoveEvent.shiftKey) {
-			props.targetBlock.setStyle("marginTop", movement + "px");
-			props.targetBlock.setStyle("marginBottom", movement + "px");
-			props.targetBlock.setStyle("marginLeft", movement + "px");
-			props.targetBlock.setStyle("marginRight", movement + "px");
-		} else if (mouseMoveEvent.altKey) {
-			if (affectingAxis === "y") {
+			if (event.shiftKey) {
 				props.targetBlock.setStyle("marginTop", movement + "px");
 				props.targetBlock.setStyle("marginBottom", movement + "px");
-			} else if (affectingAxis === "x") {
 				props.targetBlock.setStyle("marginLeft", movement + "px");
 				props.targetBlock.setStyle("marginRight", movement + "px");
+			} else if (event.altKey) {
+				if (affectingAxis === "y") {
+					props.targetBlock.setStyle("marginTop", movement + "px");
+					props.targetBlock.setStyle("marginBottom", movement + "px");
+				} else if (affectingAxis === "x") {
+					props.targetBlock.setStyle("marginLeft", movement + "px");
+					props.targetBlock.setStyle("marginRight", movement + "px");
+				}
 			}
-		}
 
-		mouseMoveEvent.preventDefault();
-	};
-	document.addEventListener("mousemove", mousemove);
-	document.addEventListener(
-		"mouseup",
-		(mouseUpEvent) => {
-			ownerDocument.body.style.cursor = docCursor;
-			document.removeEventListener("mousemove", mousemove);
+			event.preventDefault();
+		},
+		onEnd: (event) => {
 			updating.value = false;
-			mouseUpEvent.preventDefault();
+			event.preventDefault();
 		},
-		{ once: true },
-	);
+	});
 };
 </script>
diff --git a/frontend/src/components/PaddingHandler.vue b/frontend/src/components/PaddingHandler.vue
index 5549ebcda..18ae5383f 100644
--- a/frontend/src/components/PaddingHandler.vue
+++ b/frontend/src/components/PaddingHandler.vue
@@ -111,12 +111,7 @@
 <script setup lang="ts">
 import type Block from "@/block";
 import { Position, useSpacingHandler } from "@/composables/useSpacingHandler";
-import {
-	getComputedStyleFor,
-	getElementDocument,
-	getElementWindow,
-	getEventPointInDocument,
-} from "@/utils/canvasFrameDom";
+import { getComputedStyleFor, startCanvasDrag } from "@/utils/canvasFrameDom";
 import { computed, ref, watchEffect } from "vue";
 import { getNumberFromPx } from "../utils/helpers";
 
@@ -228,71 +223,60 @@ const handlePadding = (ev: MouseEvent, position: Position) => {
 	// 	messageShown.value = true;
 	// }
 	updating.value = true;
-	const ownerDocument = getElementDocument(props.target);
-	const startPoint = getEventPointInDocument(ev, ownerDocument);
 	const target = ev.target as HTMLElement;
 
-	const startTop = getNumberFromPx(blockStyles.value.paddingTop) || 5;
-	const startBottom = getNumberFromPx(blockStyles.value.paddingBottom) || 5;
-	const startLeft = getNumberFromPx(blockStyles.value.paddingLeft) || 5;
-	const startRight = getNumberFromPx(blockStyles.value.paddingRight) || 5;
+	const startTop = getNumberFromPx(String(blockStyles.value.paddingTop || "")) || 5;
+	const startBottom = getNumberFromPx(String(blockStyles.value.paddingBottom || "")) || 5;
+	const startLeft = getNumberFromPx(String(blockStyles.value.paddingLeft || "")) || 5;
+	const startRight = getNumberFromPx(String(blockStyles.value.paddingRight || "")) || 5;
 
-	// to disable cursor jitter
-	const docCursor = ownerDocument.body.style.cursor;
-	ownerDocument.body.style.cursor = getElementWindow(props.target).getComputedStyle(target).cursor;
-
-	const mousemove = (mouseMoveEvent: MouseEvent) => {
-		const point = getEventPointInDocument(mouseMoveEvent, ownerDocument);
-		let movement = 0;
-		let affectingAxis = null;
-		props.onUpdate && props.onUpdate();
-		if (position === Position.Top) {
-			movement = Math.max(startTop + point.y - startPoint.y, 0);
-			props.targetBlock.setStyle("paddingTop", movement + "px");
-			affectingAxis = "y";
-		} else if (position === Position.Bottom) {
-			movement = Math.max(startBottom + startPoint.y - point.y, 0);
-			props.targetBlock.setStyle("paddingBottom", movement + "px");
-			affectingAxis = "y";
-		} else if (position === Position.Left) {
-			movement = Math.max(startLeft + point.x - startPoint.x, 0);
-			props.targetBlock.setStyle("paddingLeft", movement + "px");
-			affectingAxis = "x";
-		} else if (position === Position.Right) {
-			movement = Math.max(startRight + startPoint.x - point.x, 0);
-			props.targetBlock.setStyle("paddingRight", movement + "px");
-			affectingAxis = "x";
-		}
+	startCanvasDrag(ev, props.target, {
+		cursor: getComputedStyleFor(target).cursor,
+		onMove: ({ event, point, startPoint }) => {
+			let movement = 0;
+			let affectingAxis = null;
+			props.onUpdate?.();
+			if (position === Position.Top) {
+				movement = Math.max(startTop + point.y - startPoint.y, 0);
+				props.targetBlock.setStyle("paddingTop", movement + "px");
+				affectingAxis = "y";
+			} else if (position === Position.Bottom) {
+				movement = Math.max(startBottom + startPoint.y - point.y, 0);
+				props.targetBlock.setStyle("paddingBottom", movement + "px");
+				affectingAxis = "y";
+			} else if (position === Position.Left) {
+				movement = Math.max(startLeft + point.x - startPoint.x, 0);
+				props.targetBlock.setStyle("paddingLeft", movement + "px");
+				affectingAxis = "x";
+			} else if (position === Position.Right) {
+				movement = Math.max(startRight + startPoint.x - point.x, 0);
+				props.targetBlock.setStyle("paddingRight", movement + "px");
+				affectingAxis = "x";
+			}
 
-		if (mouseMoveEvent.altKey) {
-			if (affectingAxis === "y") {
+			if (event.altKey) {
+				if (affectingAxis === "y") {
+					props.targetBlock.setStyle("paddingTop", movement + "px");
+					props.targetBlock.setStyle("paddingBottom", movement + "px");
+				} else if (affectingAxis === "x") {
+					props.targetBlock.setStyle("paddingLeft", movement + "px");
+					props.targetBlock.setStyle("paddingRight", movement + "px");
+				}
+			} else if (event.shiftKey) {
 				props.targetBlock.setStyle("paddingTop", movement + "px");
 				props.targetBlock.setStyle("paddingBottom", movement + "px");
-			} else if (affectingAxis === "x") {
 				props.targetBlock.setStyle("paddingLeft", movement + "px");
 				props.targetBlock.setStyle("paddingRight", movement + "px");
 			}
-		} else if (mouseMoveEvent.shiftKey) {
-			props.targetBlock.setStyle("paddingTop", movement + "px");
-			props.targetBlock.setStyle("paddingBottom", movement + "px");
-			props.targetBlock.setStyle("paddingLeft", movement + "px");
-			props.targetBlock.setStyle("paddingRight", movement + "px");
-		}
 
-		mouseMoveEvent.preventDefault();
-		mouseMoveEvent.stopPropagation();
-	};
-	document.addEventListener("mousemove", mousemove);
-	document.addEventListener(
-		"mouseup",
-		(mouseUpEvent) => {
-			ownerDocument.body.style.cursor = docCursor;
-			document.removeEventListener("mousemove", mousemove);
+			event.preventDefault();
+			event.stopPropagation();
+		},
+		onEnd: (event) => {
 			updating.value = false;
-			mouseUpEvent.preventDefault();
+			event.preventDefault();
 		},
-		{ once: true },
-	);
+	});
 };
 
 let showToast = () =>
diff --git a/frontend/src/components/TextBlock.vue b/frontend/src/components/TextBlock.vue
index 98c509d4a..9f08fbdd4 100644
--- a/frontend/src/components/TextBlock.vue
+++ b/frontend/src/components/TextBlock.vue
@@ -2,11 +2,11 @@
 	<component :is="block.getTag()" ref="component" :key="editor" class="__text_block__">
 		<div v-html="textContent" v-show="!editor && textContent" @click="handleClick"></div>
 		<TextBlockBubbleMenu
-			v-if="editor && canvasOverlayElement"
+			v-if="editor && canvasRoot"
 			:block="block"
 			:editor="editor"
 			:canvas-props="canvasProps"
-			:overlay-element="canvasOverlayElement"
+			:overlay-element="canvasRoot"
 			:is-editable="isEditable"
 			ref="bubbleMenu" />
 		<editor-content
@@ -41,7 +41,7 @@ import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { StarterKit } from "@tiptap/starter-kit";
 import { Editor, EditorContent, Extension } from "@tiptap/vue-3";
 import { vOnClickOutside } from "@vueuse/components";
-import { Ref, computed, inject, onBeforeMount, onBeforeUnmount, ref, watch } from "vue";
+import { Ref, computed, inject, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 const canvasStore = useCanvasStore();
 
@@ -70,7 +70,7 @@ const props = withDefaults(
 );
 
 const canvasProps = !props.preview ? (inject("canvasProps") as CanvasProps) : null;
-const canvasOverlayElement = computed(() => canvasProps?.frameRoots?.get(props.breakpoint) || null);
+const canvasRoot = computed(() => canvasProps?.frameRoots?.get(props.breakpoint) || null);
 
 const FontFamilyPasteRule = Extension.create({
 	name: "fontFamilyPasteRule",
@@ -182,7 +182,7 @@ const showEditor = computed(() => {
 	return !((props.block.isLink() || props.block.isButton()) && props.block.hasChildren());
 });
 
-onBeforeMount(() => {
+onMounted(() => {
 	let html = props.block.getInnerHTML() || "";
 	setFontFromHTML(html, component.value?.ownerDocument || document);
 });
diff --git a/frontend/src/types/Builder/BuilderCanvas.ts b/frontend/src/types/Builder/BuilderCanvas.ts
index 558a83ceb..ba72c3194 100644
--- a/frontend/src/types/Builder/BuilderCanvas.ts
+++ b/frontend/src/types/Builder/BuilderCanvas.ts
@@ -11,7 +11,6 @@ export interface BreakpointConfig {
 }
 
 export interface CanvasProps {
-	overlayElement: HTMLElement | null;
 	background: string;
 	scale: number;
 	translateX: number;
@@ -20,7 +19,6 @@ export interface CanvasProps {
 	scaling: boolean;
 	panning: boolean;
 	breakpoints: BreakpointConfig[];
-	frameDocuments?: Map<string, Document>;
 	frameRoots?: Map<string, HTMLElement>;
 }
 
diff --git a/frontend/src/utils/canvasFrameDom.ts b/frontend/src/utils/canvasFrameDom.ts
index a6dbb2960..679250c0e 100644
--- a/frontend/src/utils/canvasFrameDom.ts
+++ b/frontend/src/utils/canvasFrameDom.ts
@@ -3,6 +3,20 @@ export type CanvasFramePoint = {
 	y: number;
 };
 
+type CanvasDragMove = {
+	event: MouseEvent;
+	point: CanvasFramePoint;
+	startPoint: CanvasFramePoint;
+	movementX: number;
+	movementY: number;
+};
+
+type CanvasDragOptions = {
+	cursor?: string;
+	onMove: (move: CanvasDragMove) => void;
+	onEnd?: (event: MouseEvent) => void;
+};
+
 const forwardedEventSources = new WeakMap<Event, Event>();
 
 export function getElementDocument(element: Element | null): Document {
@@ -90,6 +104,43 @@ export function getEventPointInDocument(event: MouseEvent, doc: Document): Canva
 	return frame ? editorPointToFrame(frame, point) : point;
 }
 
+export function startCanvasDrag(
+	startEvent: MouseEvent,
+	target: Element,
+	{ cursor, onMove, onEnd }: CanvasDragOptions,
+) {
+	const targetDocument = getElementDocument(target);
+	const listenerDocument = getFrameElement(targetDocument)?.ownerDocument || targetDocument;
+	const startPoint = getEventPointInDocument(startEvent, targetDocument);
+	const previousCursor = targetDocument.body.style.cursor;
+
+	if (cursor) targetDocument.body.style.cursor = cursor;
+
+	const stop = () => {
+		listenerDocument.removeEventListener("mousemove", handleMove);
+		listenerDocument.removeEventListener("mouseup", handleEnd);
+		if (cursor) targetDocument.body.style.cursor = previousCursor;
+	};
+	const handleMove = (event: MouseEvent) => {
+		const point = getEventPointInDocument(event, targetDocument);
+		onMove({
+			event,
+			point,
+			startPoint,
+			movementX: point.x - startPoint.x,
+			movementY: point.y - startPoint.y,
+		});
+	};
+	const handleEnd = (event: MouseEvent) => {
+		stop();
+		onEnd?.(event);
+	};
+
+	listenerDocument.addEventListener("mousemove", handleMove);
+	listenerDocument.addEventListener("mouseup", handleEnd);
+	return stop;
+}
+
 export function elementFromEditorPoint(x: number, y: number): Element | null {
 	const outerElement = document.elementFromPoint(x, y);
 	if (!(outerElement instanceof HTMLIFrameElement)) return outerElement;
@@ -161,7 +212,7 @@ export function forwardFrameEvents(doc: Document, iframe: HTMLIFrameElement) {
 	const forward = (source: Event, forwarded: Event) => {
 		forwardedEventSources.set(forwarded, source);
 		if (source.target) {
-			// Keep target-based guards working as if the iframe were part of the editor's DOM tree.
+			// Outer listeners and third-party shortcuts should still see the original editable target.
 			Object.defineProperty(forwarded, "target", {
 				configurable: true,
 				value: source.target,
@@ -171,7 +222,6 @@ export function forwardFrameEvents(doc: Document, iframe: HTMLIFrameElement) {
 	};
 
 	const forwardMouse = (event: MouseEvent) => {
-		console.log(99, event.type)
 		forward(event, new MouseEvent(event.type, getForwardedMouseEventInit(event, doc)));
 	};
 
@@ -230,27 +280,23 @@ export function forwardFrameEvents(doc: Document, iframe: HTMLIFrameElement) {
 		);
 	};
 
-	bubblingMouseEventTypes.forEach((type) =>
-		frameTarget.addEventListener(type, forwardMouse as EventListener),
-	);
-	frameTarget.addEventListener("wheel", forwardWheel as EventListener, { passive: false });
-	dragEventTypes.forEach((type) => frameTarget.addEventListener(type, forwardDrag as EventListener));
-	keyboardEventTypes.forEach((type) => frameTarget.addEventListener(type, forwardKeyboard as EventListener));
-	clipboardEventTypes.forEach((type) =>
-		frameTarget.addEventListener(type, forwardClipboard as EventListener),
-	);
+	const listeners: Array<
+		[types: readonly string[], listener: EventListener, options?: AddEventListenerOptions]
+	> = [
+		[bubblingMouseEventTypes, forwardMouse as EventListener],
+		[["wheel"], forwardWheel as EventListener, { passive: false }],
+		[dragEventTypes, forwardDrag as EventListener],
+		[keyboardEventTypes, forwardKeyboard as EventListener],
+		[clipboardEventTypes, forwardClipboard as EventListener],
+	];
+
+	listeners.forEach(([types, listener, options]) => {
+		types.forEach((type) => frameTarget.addEventListener(type, listener, options));
+	});
 
 	return () => {
-		bubblingMouseEventTypes.forEach((type) =>
-			frameTarget.removeEventListener(type, forwardMouse as EventListener),
-		);
-		frameTarget.removeEventListener("wheel", forwardWheel as EventListener);
-		dragEventTypes.forEach((type) => frameTarget.removeEventListener(type, forwardDrag as EventListener));
-		keyboardEventTypes.forEach((type) =>
-			frameTarget.removeEventListener(type, forwardKeyboard as EventListener),
-		);
-		clipboardEventTypes.forEach((type) =>
-			frameTarget.removeEventListener(type, forwardClipboard as EventListener),
-		);
+		listeners.forEach(([types, listener, options]) => {
+			types.forEach((type) => frameTarget.removeEventListener(type, listener, options));
+		});
 	};
 }
diff --git a/frontend/src/utils/scriptSandbox.ts b/frontend/src/utils/scriptSandbox.ts
index a15436790..2b02d93cd 100644
--- a/frontend/src/utils/scriptSandbox.ts
+++ b/frontend/src/utils/scriptSandbox.ts
@@ -42,6 +42,40 @@ function createScriptFunction(userScript: string, targetWindow: Window) {
 	);
 }
 
+function createScriptCleanup(
+	result: unknown,
+	thisArg: unknown,
+	mode: "restricted" | "unrestricted",
+	onDispose: () => void = () => {},
+): ScriptCleanup {
+	let disposed = false;
+	let resolvedCleanup: unknown;
+
+	const runCleanup = (cleanup: unknown) => {
+		if (typeof cleanup !== "function") return;
+		try {
+			cleanup.call(thisArg);
+		} catch (error) {
+			console.error(`Error cleaning up user script (${mode}):`, error);
+		}
+	};
+
+	Promise.resolve(result).then(
+		(value) => {
+			resolvedCleanup = value;
+			if (disposed) runCleanup(value);
+		},
+		(error) => console.error(`Error in user script (${mode}):`, error),
+	);
+
+	return () => {
+		if (disposed) return;
+		disposed = true;
+		onDispose();
+		runCleanup(resolvedCleanup);
+	};
+}
+
 function executeClientScriptUnrestricted(
 	thisElement: HTMLElement | null,
 	userScript: string,
@@ -60,20 +94,7 @@ function executeClientScriptUnrestricted(
 			props,
 			thisRef: thisElement,
 		});
-		let disposed = false;
-		let resolvedCleanup: unknown;
-		Promise.resolve(cleanup).then((value) => {
-			resolvedCleanup = value;
-			if (disposed && typeof value === "function") value.call(thisElement);
-		});
-		return () => {
-			disposed = true;
-			try {
-				if (typeof resolvedCleanup === "function") resolvedCleanup.call(thisElement);
-			} catch (error) {
-				console.error("Error cleaning up user script (unrestricted):", error);
-			}
-		};
+		return createScriptCleanup(cleanup, thisElement, "unrestricted");
 	} catch (error) {
 		console.error("Error in user script (unrestricted):", error);
 		return () => {};
@@ -231,25 +252,11 @@ function executeClientScriptRestricted(
 	try {
 		const fn = createScriptFunction(userScript, targetWindow);
 		const userCleanup = fn(context);
-		let disposed = false;
-		let resolvedCleanup: unknown;
-		Promise.resolve(userCleanup).then((value) => {
-			resolvedCleanup = value;
-			if (disposed && typeof value === "function") value.call(proxiedThis);
-		});
-		return () => {
-			disposed = true;
+		return createScriptCleanup(userCleanup, proxiedThis, "restricted", () => {
 			eventListeners.forEach(({ target, type, listener, options }) => {
 				target.removeEventListener(type, listener, options);
 			});
-			if (typeof resolvedCleanup === "function") {
-				try {
-					resolvedCleanup.call(proxiedThis);
-				} catch (error) {
-					console.error("Error cleaning up user script (restricted):", error);
-				}
-			}
-		};
+		});
 	} catch (error) {
 		console.error("Error in user script (restricted):", error);
 		return () => {
diff --git a/frontend/src/utils/useBlockEventHandlers.ts b/frontend/src/utils/useBlockEventHandlers.ts
index 15dffa57d..344e18343 100644
--- a/frontend/src/utils/useBlockEventHandlers.ts
+++ b/frontend/src/utils/useBlockEventHandlers.ts
@@ -2,7 +2,7 @@ import useBuilderStore from "@/stores/builderStore";
 import useCanvasStore from "@/stores/canvasStore";
 import getBlockTemplate from "@/utils/blockTemplate";
 import { getBlock, getBlockInfo, isBlock } from "@/utils/helpers";
-import { getEventPointInEditor } from "@/utils/canvasFrameDom";
+import { getEventDocument, getEventPointInDocument } from "@/utils/canvasFrameDom";
 import { nextTick } from "vue";
 
 const builderStore = useBuilderStore();
@@ -53,9 +53,11 @@ export function handleBlockDoubleClick(e: MouseEvent) {
 	// dblclick on container adds text block or selects text block if only one child
 	let children = block.getChildren();
 	if (block.isHTML()) {
-		document
+		const eventDocument = getEventDocument(e);
+		const EventConstructor = eventDocument.defaultView?.MouseEvent || MouseEvent;
+		eventDocument
 			.querySelector(`.editor[data-block-id="${block.blockId}"]`)
-			?.dispatchEvent(new MouseEvent("dblclick", { bubbles: true, cancelable: true }));
+			?.dispatchEvent(new EventConstructor("dblclick", { bubbles: true, cancelable: true }));
 		e.stopPropagation();
 	} else if (block.isContainer()) {
 		if (!children.length) {
@@ -80,10 +82,12 @@ export function handleBlockContextMenu(e: MouseEvent) {
 	e.stopPropagation();
 	e.preventDefault();
 	selectBlock(e);
-	const point = getEventPointInEditor(e);
+	const eventDocument = getEventDocument(e);
+	const point = getEventPointInDocument(e, eventDocument);
+	const EventConstructor = eventDocument.defaultView?.MouseEvent || MouseEvent;
 	nextTick(() => {
-		document.querySelector(`.editor[data-block-id="${blockId}"]`)?.dispatchEvent(
-			new MouseEvent("contextmenu", {
+		eventDocument.querySelector(`.editor[data-block-id="${blockId}"]`)?.dispatchEvent(
+			new EventConstructor("contextmenu", {
 				bubbles: true,
 				cancelable: true,
 				clientX: point.x,
diff --git a/frontend/src/utils/useBuilderEvents.ts b/frontend/src/utils/useBuilderEvents.ts
index a30615e03..f5a117dd7 100644
--- a/frontend/src/utils/useBuilderEvents.ts
+++ b/frontend/src/utils/useBuilderEvents.ts
@@ -361,7 +361,6 @@ export function useBuilderEvents(
 			description: "Undo",
 			group: "Edit",
 			handler: () => {
-				console.log(canvasStore.activeCanvas?.history?.canUndo())
 				if (canvasStore.activeCanvas?.history?.canUndo) {
 					canvasStore.activeCanvas?.history.undo();
 				}
diff --git a/frontend/src/utils/useCanvasEvents.ts b/frontend/src/utils/useCanvasEvents.ts
index 963d129bb..39cf6c95c 100644
--- a/frontend/src/utils/useCanvasEvents.ts
+++ b/frontend/src/utils/useCanvasEvents.ts
@@ -7,7 +7,7 @@ import {
 	getComputedStyleFor,
 	getEventDocument,
 	getEventPointInDocument,
-	getEventPointInEditor,
+	startCanvasDrag,
 } from "@/utils/canvasFrameDom";
 import {
 	addPxToNumber,
@@ -62,7 +62,10 @@ export function useCanvasEvents(
 			const parentElement = ownerDocument.body.querySelector(
 				`.canvas [data-block-id="${parentBlock.blockId}"]`,
 			) as HTMLElement;
-			if (!parentElement) return;
+			if (!parentElement) {
+				pauseId && canvasHistory.value?.resume(pauseId);
+				return;
+			}
 			const parentOldPosition = parentBlock.getStyle("position");
 			if (parentOldPosition === "static" || parentOldPosition === "inherit" || !parentOldPosition) {
 				parentBlock.setBaseStyle("position", "relative");
@@ -83,27 +86,19 @@ export function useCanvasEvents(
 				counter++;
 			}
 
-			const mouseMoveHandler = (mouseMoveEvent: MouseEvent) => {
-				if (builderStore.mode === "text") {
-					return;
-				} else {
-					mouseMoveEvent.preventDefault();
-					const point = getEventPointInDocument(mouseMoveEvent, ownerDocument);
-					let width = point.x - initialPoint.x;
-					let height = point.y - initialPoint.y;
+			startCanvasDrag(ev, parentElement, {
+				onMove: ({ event, movementX, movementY }) => {
+					if (builderStore.mode === "text") return;
+					event.preventDefault();
+					let width = movementX;
+					let height = movementY;
 					width = clamp(width, 0, parentWidth);
 					height = clamp(height, 0, parentHeight);
 					const setFullWidth = width === parentWidth;
 					childBlock.setBaseStyle("width", setFullWidth ? "100%" : addPxToNumber(width));
 					childBlock.setBaseStyle("height", addPxToNumber(height));
-				}
-			};
-			useEventListener(document, "mousemove", mouseMoveHandler);
-			useEventListener(
-				document,
-				"mouseup",
-				() => {
-					document.removeEventListener("mousemove", mouseMoveHandler);
+				},
+				onEnd: () => {
 					parentBlock.setBaseStyle("position", parentOldPosition || "static");
 					childBlock.setBaseStyle("position", "static");
 					childBlock.setBaseStyle("top", "auto");
@@ -133,35 +128,25 @@ export function useCanvasEvents(
 						builderStore.openImageUpload = true;
 					}
 				},
-				{ once: true },
-			);
+			});
 		}
 	});
 
 	useEventListener(container, "mousedown", (ev: MouseEvent) => {
 		if (builderStore.mode === "move") {
 			container.value.style.cursor = "grabbing";
-			const initialPoint = getEventPointInEditor(ev);
 			const initialTranslateX = canvasProps.translateX;
 			const initialTranslateY = canvasProps.translateY;
-			const mouseMoveHandler = (mouseMoveEvent: MouseEvent) => {
-				mouseMoveEvent.preventDefault();
-				const point = getEventPointInEditor(mouseMoveEvent);
-				const diffX = (point.x - initialPoint.x) / canvasProps.scale;
-				const diffY = (point.y - initialPoint.y) / canvasProps.scale;
-				canvasProps.translateX = initialTranslateX + diffX;
-				canvasProps.translateY = initialTranslateY + diffY;
-			};
-			useEventListener(document, "mousemove", mouseMoveHandler);
-			useEventListener(
-				document,
-				"mouseup",
-				() => {
-					document.removeEventListener("mousemove", mouseMoveHandler);
+			startCanvasDrag(ev, container.value, {
+				onMove: ({ event, movementX, movementY }) => {
+					event.preventDefault();
+					canvasProps.translateX = initialTranslateX + movementX / canvasProps.scale;
+					canvasProps.translateY = initialTranslateY + movementY / canvasProps.scale;
+				},
+				onEnd: () => {
 					container.value.style.cursor = "grab";
 				},
-				{ once: true },
-			);
+			});
 			ev.stopPropagation();
 			ev.preventDefault();
 		}
diff --git a/frontend/src/utils/useCanvasMarqueeSelection.ts b/frontend/src/utils/useCanvasMarqueeSelection.ts
index 3c86c64ca..24e011a00 100644
--- a/frontend/src/utils/useCanvasMarqueeSelection.ts
+++ b/frontend/src/utils/useCanvasMarqueeSelection.ts
@@ -238,7 +238,7 @@ export function useCanvasMarqueeSelection(options: UseCanvasMarqueeSelectionOpti
 		if (builderStore.readOnlyMode) return false;
 		if (canvasStore.isDragging || canvasProps.panning || canvasProps.scaling) return false;
 
-		const target = ev.target as HTMLElement | null;
+		const target = getEventTarget(ev) as HTMLElement | null;
 		if (!target) return false;
 
 		if (target.closest("input, textarea, select, button, a, [contenteditable='true']")) {

From 58a713a3ee0f32d8718b95bffa33eb45cc416714 Mon Sep 17 00:00:00 2001
From: stravo1 <stravoone@gmail.com>
Date: Thu, 2 Jul 2026 23:18:09 +0530
Subject: [PATCH 5/9] fix: block editor styles

---
 frontend/src/components/BlockEditor.vue         | 2 +-
 frontend/src/components/BorderRadiusHandler.vue | 2 +-
 frontend/src/components/BoxResizer.vue          | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/BlockEditor.vue b/frontend/src/components/BlockEditor.vue
index ef8687177..e31570a26 100644
--- a/frontend/src/components/BlockEditor.vue
+++ b/frontend/src/components/BlockEditor.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="editor pointer-events-none fixed box-content select-none ring-2 ring-inset"
+		class="editor pointer-events-none fixed box-content select-none ring-4 ring-inset"
 		ref="editor"
 		:selected="isBlockSelected"
 		@click.stop="handleClick"
diff --git a/frontend/src/components/BorderRadiusHandler.vue b/frontend/src/components/BorderRadiusHandler.vue
index b6ed41cda..2d93ff50a 100644
--- a/frontend/src/components/BorderRadiusHandler.vue
+++ b/frontend/src/components/BorderRadiusHandler.vue
@@ -1,7 +1,7 @@
 <template>
 	<div
 		ref="handler"
-		class="border-radius-resize pointer-events-auto absolute h-[10px] w-[10px] cursor-pointer rounded-full border-2 border-blue-400 bg-white"
+		class="border-radius-resize pointer-events-auto absolute h-[12px] w-[12px] cursor-pointer rounded-full border-2 border-blue-400 bg-white"
 		:class="{
 			hidden: !isHandlerVisible,
 			'border-purple-400': targetBlock.isExtendedFromComponent(),
diff --git a/frontend/src/components/BoxResizer.vue b/frontend/src/components/BoxResizer.vue
index 6d15a0b7d..3b9f25232 100644
--- a/frontend/src/components/BoxResizer.vue
+++ b/frontend/src/components/BoxResizer.vue
@@ -24,7 +24,7 @@
 		:class="{ 'cursor-ns-resize': true }"
 		@mousedown.stop="handleBottomResize" />
 	<div
-		class="pointer-events-auto absolute bottom-[-5px] right-[-5px] h-[12px] w-[12px] cursor-nwse-resize rounded-full border-[2.5px] border-blue-400 bg-white"
+		class="pointer-events-auto absolute bottom-[-5px] right-[-5px] h-[14px] w-[14px] cursor-nwse-resize rounded-full border-[2.5px] border-blue-400 bg-white"
 		:class="{
 			'border-purple-400': targetBlock.isExtendedFromComponent(),
 		}"

From 5ea21abf016ada28fc7d9caa6a44082a4ed043f5 Mon Sep 17 00:00:00 2001
From: stravo1 <stravoone@gmail.com>
Date: Thu, 2 Jul 2026 23:34:34 +0530
Subject: [PATCH 6/9] feat: emulate page client scripts in editor canvas

Execute attached page-level JavaScript and CSS inside each rendered
breakpoint iframe.

- apply page CSS continuously in attachment order
- run page JavaScript through the existing restricted or unrestricted
  canvas sandbox
- expose iframe document, window, events, and page_data where allowed
- reuse the existing Run, Stop, and Refresh canvas controls
- recreate frames when scripts, page data, settings, or pages change
- preserve script ordering when loading page client scripts
- synchronize attached scripts after create, attach, update, rename,
  remove, and reorder operations
- keep the existing execute_block_scripts_in_editor field for
  compatibility while updating its label to cover all client scripts
- retain existing block and component script behavior
---
 .../builder_settings/builder_settings.json    |  2 +-
 frontend/src/components/BuilderCanvas.vue     | 93 ++++++++++++++++--
 .../components/PageClientScriptManager.vue    | 83 ++++++++--------
 .../components/Settings/GlobalDeveloper.vue   |  4 +-
 frontend/src/stores/pageStore.ts              |  7 +-
 frontend/src/types/doctypes.ts                |  2 +-
 frontend/src/utils/scriptSandbox.ts           | 96 +++++++++++++++----
 7 files changed, 209 insertions(+), 78 deletions(-)

diff --git a/builder/builder/doctype/builder_settings/builder_settings.json b/builder/builder/doctype/builder_settings/builder_settings.json
index bb1cbc2f7..6e6d34be8 100644
--- a/builder/builder/doctype/builder_settings/builder_settings.json
+++ b/builder/builder/doctype/builder_settings/builder_settings.json
@@ -109,7 +109,7 @@
    "default": "Restricted",
    "fieldname": "execute_block_scripts_in_editor",
    "fieldtype": "Select",
-   "label": "Execute Block Scripts in Editor",
+   "label": "Execute Client Scripts in Editor",
    "options": "Don't Execute\nRestricted\nUnrestricted"
   },
   {
diff --git a/frontend/src/components/BuilderCanvas.vue b/frontend/src/components/BuilderCanvas.vue
index 97dd45346..c1e25c207 100644
--- a/frontend/src/components/BuilderCanvas.vue
+++ b/frontend/src/components/BuilderCanvas.vue
@@ -108,6 +108,11 @@
 					:dark="builderStore.canvasDarkMode"
 					@ready="registerFrame"
 					@dispose="unregisterFrame">
+					<component
+						:is="'style'"
+						v-if="pageClientStyles"
+						data-builder-page-client-styles
+						v-text="pageClientStyles" />
 					<component
 						:is="'style'"
 						v-if="blockClientStyles"
@@ -166,6 +171,8 @@ import {
 	type BlockClientScriptRuntime,
 	executeClientScriptRestricted,
 	executeClientScriptUnrestricted,
+	executePageClientScriptRestricted,
+	executePageClientScriptUnrestricted,
 } from "@/utils/scriptSandbox";
 import { useBlockEventHandlers } from "@/utils/useBlockEventHandlers";
 import { useBlockSelection } from "@/utils/useBlockSelection";
@@ -236,6 +243,20 @@ const blockClientStyles = computed(() => {
 	const css = Array.from(blockStyles.values()).filter(Boolean).join("\n");
 	return css ? `@layer builder-authored {\n${css}\n}` : "";
 });
+const pageClientStyles = computed(() =>
+	pageStore.activePageScripts
+		.filter((script) => script.script_type === "CSS")
+		.map((script) => script.script)
+		.filter(Boolean)
+		.join("\n"),
+);
+const pageJavaScripts = computed(() =>
+	pageStore.activePageScripts.filter((script) => script.script_type === "JavaScript"),
+);
+const pageJavaScriptSignature = computed(() =>
+	JSON.stringify(pageJavaScripts.value.map(({ name, script }) => [name, script])),
+);
+const pageDataSignature = computed(() => JSON.stringify(pageStore.pageData));
 const scriptsDisabled = computed(
 	() => builderSettings.doc?.execute_block_scripts_in_editor === "Don't Execute",
 );
@@ -370,15 +391,23 @@ function registerFrame(breakpoint: string, doc: Document, root: HTMLElement, ifr
 	frameRoots.set(breakpoint, root);
 
 	const scope = effectScope();
-	scope.run(() => {
-		const { isOverDropZone } = useCanvasDropZone(ref(doc.body), block, findBlock);
-		watch(isOverDropZone, (isOver) => root.toggleAttribute("data-drop-active", isOver), { immediate: true });
-	});
 	frameRegistrations.set(breakpoint, {
 		document: doc,
 		scope,
 		stopForwarding: forwardFrameEvents(doc, iframe),
 	});
+	scope.run(() => {
+		const { isOverDropZone } = useCanvasDropZone(ref(doc.body), block, findBlock);
+		watch(isOverDropZone, (isOver) => root.toggleAttribute("data-drop-active", isOver), { immediate: true });
+		watch(
+			[() => builderStore.runCanvasScripts, () => pageStore.settingPage],
+			([runScripts, settingPage], _, onCleanup) => {
+				if (!runScripts || settingPage || scriptsDisabled.value) return;
+				onCleanup(executePageClientScripts(root));
+			},
+			{ immediate: true, flush: "post" },
+		);
+	});
 	nextTick(setScaleAndTranslate);
 }
 
@@ -475,11 +504,42 @@ watch(
 	},
 );
 
-watch(scriptsDisabled, (disabled) => {
-	if (!disabled || !builderStore.runCanvasScripts) return;
-	builderStore.runCanvasScripts = false;
-	frameEpoch.value++;
-});
+watch(
+	() => builderSettings.doc?.execute_block_scripts_in_editor,
+	(mode, previousMode) => {
+		const scriptsWereRunning = builderStore.runCanvasScripts;
+		if (mode === "Don't Execute" && scriptsWereRunning) {
+			builderStore.runCanvasScripts = false;
+		}
+		if (previousMode && mode !== previousMode && scriptsWereRunning) {
+			frameEpoch.value++;
+		}
+	},
+);
+
+watch(
+	[pageJavaScriptSignature, pageDataSignature],
+	([scriptSignature, dataSignature], [previousScriptSignature, previousDataSignature]) => {
+		if (
+			(scriptSignature === previousScriptSignature && dataSignature === previousDataSignature) ||
+			!pageJavaScripts.value.length ||
+			!builderStore.runCanvasScripts ||
+			pageStore.settingPage ||
+			scriptsDisabled.value
+		)
+			return;
+		frameEpoch.value++;
+	},
+);
+
+watch(
+	() => pageStore.settingPage,
+	(settingPage, wasSettingPage) => {
+		if (!settingPage && wasSettingPage && builderStore.runCanvasScripts && !scriptsDisabled.value) {
+			frameEpoch.value++;
+		}
+	},
+);
 
 provide("canvasProps", canvasProps);
 provide("emulateBlockClientScript", emulateBlockClientScript);
@@ -586,7 +646,7 @@ function emulateBlockClientScript(script: BlockClientScriptRuntime) {
 						frameRoots.get(script.breakpoint) || null,
 						script.javascript,
 						context,
-					);
+				  );
 	}
 
 	return () => {
@@ -598,6 +658,19 @@ function emulateBlockClientScript(script: BlockClientScriptRuntime) {
 	};
 }
 
+function executePageClientScripts(root: HTMLElement) {
+	const mode = builderSettings.doc?.execute_block_scripts_in_editor ?? "Restricted";
+	const cleanups = pageJavaScripts.value.map(({ script }) =>
+		mode === "Unrestricted"
+			? executePageClientScriptUnrestricted(root, script, pageStore.pageData)
+			: executePageClientScriptRestricted(root, script, pageStore.pageData),
+	);
+
+	return () => {
+		cleanups.reverse().forEach((cleanup) => cleanup());
+	};
+}
+
 const renderedBreakpoints = computed(() => canvasProps.breakpoints.filter((bp) => bp.renderedOnce));
 </script>
 <style>
diff --git a/frontend/src/components/PageClientScriptManager.vue b/frontend/src/components/PageClientScriptManager.vue
index bbf39790b..645d1eb6f 100644
--- a/frontend/src/components/PageClientScriptManager.vue
+++ b/frontend/src/components/PageClientScriptManager.vue
@@ -52,7 +52,7 @@
 										},
 										{
 											label: 'Remove Script',
-											onClick: () => deleteScript(script.name),
+											onClick: () => deleteScript(script),
 											icon: 'lucide-trash',
 										},
 									]">
@@ -161,6 +161,19 @@ const props = defineProps<{
 	page: BuilderPage;
 }>();
 
+function syncActivePageScripts(scripts: attachedScript[]) {
+	const currentScripts = new Map(pageStore.activePageScripts.map((script) => [script.name, script]));
+	pageStore.activePageScripts = scripts.map(
+		({ script_name, script, script_type }) =>
+			({
+				...currentScripts.get(script_name),
+				name: script_name,
+				script,
+				script_type,
+			} as BuilderClientScript),
+	);
+}
+
 const attachedScriptResource = createListResource({
 	doctype: "Builder Page Client Script",
 	parent: "Builder Page",
@@ -176,6 +189,7 @@ const attachedScriptResource = createListResource({
 	orderBy: "`tabBuilder Page Client Script`.idx asc",
 	auto: true,
 	onSuccess: (data: attachedScript[]) => {
+		syncActivePageScripts(data || []);
 		if (data && data.length > 0 && !activeScript.value) {
 			selectScript(data[0]);
 		}
@@ -204,13 +218,6 @@ const updateScript = (value: string) => {
 		return;
 	}
 
-	pageStore.activePageScripts = pageStore.activePageScripts.map((script: BuilderClientScript) => {
-		if (script.name === activeScript.value?.script_name) {
-			script.script = value;
-		}
-		return script;
-	});
-
 	clientScriptResource.setValue
 		.submit({
 			name: activeScript.value.script_name,
@@ -257,7 +264,6 @@ const addScript = (scriptType: "JavaScript" | "CSS") => {
 							selectScript(script);
 						}
 					});
-					pageStore.activePageScripts.push(res);
 				});
 		});
 };
@@ -283,44 +289,32 @@ const attachScript = (builder_script_name: string) => {
 		});
 };
 
-const deleteScript = (scriptName: string) => {
+const deleteScript = async (script: attachedScript) => {
 	if (builderStore.readOnlyMode) return;
 
 	activeScript.value = null;
-	attachedScriptResource.delete.submit(scriptName).then(() => {
-		attachedScriptResource.reload();
-	});
-	pageStore.activePageScripts = pageStore.activePageScripts.filter(
-		(script: BuilderClientScript) => script.name !== scriptName,
-	);
+	await attachedScriptResource.delete.submit(script.name);
+	await attachedScriptResource.reload();
 };
 
 const updateScriptName = async (newName: string, script: attachedScript) => {
 	if (!newName || builderStore.readOnlyMode) return;
 	script.editable = false;
-	pageStore.activePageScripts = pageStore.activePageScripts.map((_script: BuilderClientScript) => {
-		if (_script.name === script.name) {
-			script.name = newName;
-		}
-		return script;
-	});
+	const oldName = script.script_name;
 	return createResource({
 		url: "frappe.client.rename_doc",
 	})
 		.submit({
 			doctype: "Builder Client Script",
-			old_name: script?.script_name,
+			old_name: oldName,
 			new_name: newName,
 		})
 		.then(async () => {
-			attachedScriptResource.data = attachedScriptResource.data.map(
-				(s: { script_name: string; script: string }) => {
-					if (s.script_name === script.script_name) {
-						s.script_name = newName;
-					}
-					return s;
-				},
+			await Promise.all([attachedScriptResource.reload(), clientScriptResource.reload()]);
+			const renamedScript = attachedScriptResource.data?.find(
+				(attached: attachedScript) => attached.script_name === newName,
 			);
+			if (renamedScript) selectScript(renamedScript);
 		});
 };
 
@@ -331,26 +325,27 @@ const clientScriptOptions = computed(() =>
 	})),
 );
 
-const onScriptReorder = () => {
+const onScriptReorder = async () => {
 	if (!attachedScriptResource.data) return;
 
 	const scriptOrder = attachedScriptResource.data.map((script: attachedScript) => script.name);
 
-	createResource({
-		url: "builder.api.reorder_client_scripts",
-	})
-		.submit({
+	try {
+		await createResource({
+			url: "builder.api.reorder_client_scripts",
+		}).submit({
 			script_order: scriptOrder,
-		})
-		.then(() => {
-			toast.success("Script order updated");
-		})
-		.catch((e: { message: string; exc: string }) => {
-			const error_message = e.exc.split("\n").slice(-2)[0];
-			toast.error("Failed to update script order", {
-				description: error_message,
-			});
 		});
+		syncActivePageScripts(attachedScriptResource.data);
+		toast.success("Script order updated");
+	} catch (e) {
+		await attachedScriptResource.reload();
+		const error_message =
+			(e as { exc?: string }).exc?.split("\n").slice(-2)[0] || "Could not save script order";
+		toast.error("Failed to update script order", {
+			description: error_message,
+		});
+	}
 };
 
 watch(
diff --git a/frontend/src/components/Settings/GlobalDeveloper.vue b/frontend/src/components/Settings/GlobalDeveloper.vue
index f71221124..1cb5ba797 100644
--- a/frontend/src/components/Settings/GlobalDeveloper.vue
+++ b/frontend/src/components/Settings/GlobalDeveloper.vue
@@ -2,7 +2,7 @@
 	<div class="flex flex-col gap-5">
 		<div class="flex justify-between">
 			<label class="text-p-base-medium w-fit shrink-0 text-ink-gray-8">
-				Execute Block Client Scripts in Editor
+				Execute Client Scripts in Editor
 			</label>
 			<Select
 				class="!w-[200px]"
@@ -28,7 +28,7 @@
 			" />
 		<div class="flex flex-col gap-2">
 			<p class="text-p-sm text-ink-gray-7">
-				Note: Block Scripts are executed in a sandboxed environment. This may have limitations and might not
+				Note: Client scripts are executed in a sandboxed environment. This may have limitations and might not
 				perfectly replicate live site behavior. Executing untrusted scripts could be unsafe.
 			</p>
 		</div>
diff --git a/frontend/src/stores/pageStore.ts b/frontend/src/stores/pageStore.ts
index 0b8796500..390bc0a20 100644
--- a/frontend/src/stores/pageStore.ts
+++ b/frontend/src/stores/pageStore.ts
@@ -81,7 +81,12 @@ const usePageStore = defineStore("pageStore", {
 				});
 
 				await scriptsResource.list.promise;
-				this.activePageScripts = scriptsResource.data as BuilderClientScript[];
+				const scriptsByName = new Map(
+					((scriptsResource.data || []) as BuilderClientScript[]).map((script) => [script.name, script]),
+				);
+				this.activePageScripts = page.client_scripts
+					.map(({ builder_script }) => scriptsByName.get(builder_script))
+					.filter((script): script is BuilderClientScript => Boolean(script));
 			} else {
 				this.activePageScripts = [];
 			}
diff --git a/frontend/src/types/doctypes.ts b/frontend/src/types/doctypes.ts
index f768d96c0..308a4b9a7 100644
--- a/frontend/src/types/doctypes.ts
+++ b/frontend/src/types/doctypes.ts
@@ -37,7 +37,7 @@ export interface BuilderSettings extends DocType {
   head_html?: string;
   /** Body HTML: Code */
   body_html?: string;
-  /** Execute Block Scripts in Editor: Select */
+  /** Execute Client Scripts in Editor: Select */
   execute_block_scripts_in_editor?: 'Don\'t Execute' | 'Restricted' | 'Unrestricted';
   /** Restrict Click Handlers: Check */
   restrict_click_handlers: 0 | 1;
diff --git a/frontend/src/utils/scriptSandbox.ts b/frontend/src/utils/scriptSandbox.ts
index 2b02d93cd..d8fab1518 100644
--- a/frontend/src/utils/scriptSandbox.ts
+++ b/frontend/src/utils/scriptSandbox.ts
@@ -17,6 +17,10 @@ type ScriptContext = {
 	props?: Record<string, any>;
 };
 
+type PageScriptContext = {
+	pageData?: Record<string, any>;
+};
+
 function createEvents(defaultTarget: EventTarget, targetWindow: Window) {
 	const CustomEventConstructor = (targetWindow as any).CustomEvent as typeof CustomEvent;
 	return {
@@ -31,13 +35,15 @@ function createEvents(defaultTarget: EventTarget, targetWindow: Window) {
 	};
 }
 
-function createScriptFunction(userScript: string, targetWindow: Window) {
+function createScriptFunction(userScript: string, targetWindow: Window, pageScript = false) {
 	const FunctionConstructor = (targetWindow as any).Function as FunctionConstructor;
+	const parameters = pageScript ? "" : "component_data, props";
+	const callArguments = pageScript ? "thisRef" : "thisRef, component_data, props";
 	return new FunctionConstructor(
 		"context",
 		`with (context) {
-			return (async function(component_data, props) { ${userScript} })
-				.call(thisRef, component_data, props);
+			return (async function(${parameters}) { ${userScript} })
+				.call(${callArguments});
 		}`,
 	);
 }
@@ -80,21 +86,41 @@ function executeClientScriptUnrestricted(
 	thisElement: HTMLElement | null,
 	userScript: string,
 	{ componentData = {}, props = {} }: ScriptContext = {},
+	pageContext: PageScriptContext | null = null,
 ): ScriptCleanup {
 	if (!thisElement || !userScript.trim()) return () => {};
 
 	try {
 		const targetDocument = thisElement.ownerDocument;
 		const targetWindow = targetDocument.defaultView || window;
-		const fn = createScriptFunction(userScript, targetWindow);
-		const cleanup = fn({
-			component_data: componentData,
-			document: targetDocument,
-			events: createEvents(targetDocument, targetWindow),
-			props,
-			thisRef: thisElement,
-		});
-		return createScriptCleanup(cleanup, thisElement, "unrestricted");
+		const events = createEvents(targetDocument, targetWindow);
+		const isPageScript = pageContext !== null;
+		const thisRef = isPageScript ? targetWindow : thisElement;
+		const context = isPageScript
+			? {
+					document: targetDocument,
+					events,
+					page_data: pageContext.pageData ?? {},
+					thisRef,
+			  }
+			: {
+					component_data: componentData,
+					document: targetDocument,
+					events,
+					props,
+					thisRef,
+			  };
+
+		if (isPageScript) {
+			Object.assign(targetWindow, {
+				events,
+				page_data: pageContext.pageData ?? {},
+			});
+		}
+
+		const fn = createScriptFunction(userScript, targetWindow, isPageScript);
+		const cleanup = fn(context);
+		return createScriptCleanup(cleanup, thisRef, "unrestricted");
 	} catch (error) {
 		console.error("Error in user script (unrestricted):", error);
 		return () => {};
@@ -110,6 +136,7 @@ function executeClientScriptRestricted(
 	sandboxRoot: HTMLElement | null,
 	userScript: string,
 	{ componentData = {}, props = {} }: ScriptContext = {},
+	pageContext: PageScriptContext | null = null,
 ): ScriptCleanup {
 	if (!thisElement || !sandboxRoot || !userScript.trim()) return () => {};
 	const targetDocument = thisElement.ownerDocument;
@@ -233,13 +260,13 @@ function executeClientScriptRestricted(
 
 	const proxiedRoot = wrap(sandboxRoot);
 	const proxiedThis = wrap(thisElement);
+	const isPageScript = pageContext !== null;
+	const thisRef = isPageScript ? proxiedRoot : proxiedThis;
 
-	const context = {
+	const restrictedGlobals = {
 		document: proxiedRoot,
 		events: createEvents(proxiedRoot, targetWindow),
-		thisRef: proxiedThis,
-		props,
-		component_data: componentData,
+		thisRef,
 		// Escape hatches blocked
 		window: undefined,
 		globalThis: undefined,
@@ -248,11 +275,21 @@ function executeClientScriptRestricted(
 		setTimeout: undefined,
 		setInterval: undefined,
 	};
+	const context = isPageScript
+		? {
+				...restrictedGlobals,
+				page_data: pageContext.pageData ?? {},
+		  }
+		: {
+				...restrictedGlobals,
+				props,
+				component_data: componentData,
+		  };
 
 	try {
-		const fn = createScriptFunction(userScript, targetWindow);
+		const fn = createScriptFunction(userScript, targetWindow, isPageScript);
 		const userCleanup = fn(context);
-		return createScriptCleanup(userCleanup, proxiedThis, "restricted", () => {
+		return createScriptCleanup(userCleanup, thisRef, "restricted", () => {
 			eventListeners.forEach(({ target, type, listener, options }) => {
 				target.removeEventListener(type, listener, options);
 			});
@@ -267,4 +304,25 @@ function executeClientScriptRestricted(
 	}
 }
 
-export { executeClientScriptRestricted, executeClientScriptUnrestricted };
+function executePageClientScriptUnrestricted(
+	canvasRoot: HTMLElement | null,
+	userScript: string,
+	pageData: Record<string, any>,
+) {
+	return executeClientScriptUnrestricted(canvasRoot, userScript, {}, { pageData });
+}
+
+function executePageClientScriptRestricted(
+	canvasRoot: HTMLElement | null,
+	userScript: string,
+	pageData: Record<string, any>,
+) {
+	return executeClientScriptRestricted(canvasRoot, canvasRoot, userScript, {}, { pageData });
+}
+
+export {
+	executeClientScriptRestricted,
+	executeClientScriptUnrestricted,
+	executePageClientScriptRestricted,
+	executePageClientScriptUnrestricted,
+};

From ff48a7e822e6ad2b985d1ab3baf1b2dccb552ce7 Mon Sep 17 00:00:00 2001
From: stravo1 <stravoone@gmail.com>
Date: Fri, 3 Jul 2026 09:06:27 +0530
Subject: [PATCH 7/9] fix: remove restricted emulation as we now have DOM
 isolation

---
 .../builder_settings/builder_settings.json    |  13 +-
 .../builder_settings/builder_settings.py      |   3 +-
 ...migrate_client_script_emulation_setting.py |  16 +
 builder/patches.txt                           |   3 +-
 frontend/src/components/BuilderBlock.vue      |   8 +-
 frontend/src/components/BuilderCanvas.vue     |  65 ++--
 .../components/Settings/GlobalDeveloper.vue   |  24 +-
 frontend/src/types/doctypes.ts                |   6 +-
 frontend/src/utils/scriptEmulation.ts         | 129 +++++++
 frontend/src/utils/scriptSandbox.ts           | 328 ------------------
 10 files changed, 190 insertions(+), 405 deletions(-)
 create mode 100644 builder/builder/patches/migrate_client_script_emulation_setting.py
 create mode 100644 frontend/src/utils/scriptEmulation.ts
 delete mode 100644 frontend/src/utils/scriptSandbox.ts

diff --git a/builder/builder/doctype/builder_settings/builder_settings.json b/builder/builder/doctype/builder_settings/builder_settings.json
index 6e6d34be8..cc9776850 100644
--- a/builder/builder/doctype/builder_settings/builder_settings.json
+++ b/builder/builder/doctype/builder_settings/builder_settings.json
@@ -19,7 +19,6 @@
   "home_page",
   "developer_options_section",
   "execute_block_scripts_in_editor",
-  "restrict_click_handlers",
   "ai_section",
   "ai_api_key",
   "persona_survey_done"
@@ -106,17 +105,11 @@
    "label": "Developer Options"
   },
   {
-   "default": "Restricted",
+   "default": "Enable",
    "fieldname": "execute_block_scripts_in_editor",
    "fieldtype": "Select",
-   "label": "Execute Client Scripts in Editor",
-   "options": "Don't Execute\nRestricted\nUnrestricted"
-  },
-  {
-   "default": "1",
-   "fieldname": "restrict_click_handlers",
-   "fieldtype": "Check",
-   "label": "Restrict Click Handlers"
+   "label": "Client Script Emulation",
+   "options": "Enable\nDisable"
   },
   {
    "fieldname": "ai_section",
diff --git a/builder/builder/doctype/builder_settings/builder_settings.py b/builder/builder/doctype/builder_settings/builder_settings.py
index c28489429..a57074f5c 100644
--- a/builder/builder/doctype/builder_settings/builder_settings.py
+++ b/builder/builder/doctype/builder_settings/builder_settings.py
@@ -23,11 +23,10 @@ class BuilderSettings(Document):
 		body_html: DF.Code | None
 		default_language: DF.Data | None
 		disable_auto_dark_mode: DF.Check
-		execute_block_scripts_in_editor: DF.Literal["Don't Execute", "Restricted", "Unrestricted"]
+		execute_block_scripts_in_editor: DF.Literal["Disable", "Enable"]
 		favicon: DF.AttachImage | None
 		head_html: DF.Code | None
 		home_page: DF.Data | None
-		restrict_click_handlers: DF.Check
 		script: DF.Code | None
 		script_public_url: DF.ReadOnly | None
 		style: DF.Code | None
diff --git a/builder/builder/patches/migrate_client_script_emulation_setting.py b/builder/builder/patches/migrate_client_script_emulation_setting.py
new file mode 100644
index 000000000..557a6b82d
--- /dev/null
+++ b/builder/builder/patches/migrate_client_script_emulation_setting.py
@@ -0,0 +1,16 @@
+import frappe
+
+
+def execute():
+	current_value = frappe.db.get_single_value(
+		"Builder Settings",
+		"execute_block_scripts_in_editor",
+	)
+	value = "Disable" if current_value in {"Don't Execute", "Disable"} else "Enable"
+	frappe.db.set_value(
+		"Builder Settings",
+		None,
+		"execute_block_scripts_in_editor",
+		value,
+		update_modified=False,
+	)
diff --git a/builder/patches.txt b/builder/patches.txt
index 392fc318d..7c3fc0321 100644
--- a/builder/patches.txt
+++ b/builder/patches.txt
@@ -13,5 +13,6 @@ builder.builder.doctype.builder_client_script.patches.trigger_asset_compression
 builder.builder.patches.add_composite_index_to_web_page_view
 builder.builder.patches.refactor_builder_variables
 builder.builder.patches.reset_builder_page_clicks
+builder.builder.patches.migrate_client_script_emulation_setting
 execute:frappe.call("builder.builder_analytics.enqueue_web_page_view_ingesion")
-execute:frappe.call("builder.builder_analytics.setup_duckdb_table")
\ No newline at end of file
+execute:frappe.call("builder.builder_analytics.setup_duckdb_table")
diff --git a/frontend/src/components/BuilderBlock.vue b/frontend/src/components/BuilderBlock.vue
index 0cf8a5149..513e5d68a 100644
--- a/frontend/src/components/BuilderBlock.vue
+++ b/frontend/src/components/BuilderBlock.vue
@@ -50,7 +50,7 @@ import usePageStore from "@/stores/pageStore";
 import { setFont } from "@/utils/fontManager";
 import { extractComponentId, getDataForKey, getParentProps, getPropValue } from "@/utils/helpers";
 import { isElementLike } from "@/utils/canvasFrameDom";
-import type { BlockClientScriptEmulator } from "@/utils/scriptSandbox";
+import type { BlockClientScriptEmulator } from "@/utils/scriptEmulation";
 import { useDraggableBlock } from "@/utils/useDraggableBlock";
 import {
 	computed,
@@ -180,16 +180,16 @@ const getComponentDataValue = (path: string): any => {
 };
 
 const attributes = computed(() => {
-	const RESTRICTED_ATTRIBS = ["data-block-id", "data-block-uid", "data-breakpoint"];
+	const RESERVED_ATTRIBUTES = ["data-block-id", "data-block-uid", "data-breakpoint"];
 	let additionalAttributes: Record<string, any> = {};
 
-	if (builderSettings.doc?.execute_block_scripts_in_editor !== "Don't Execute") {
+	if (builderSettings.doc?.execute_block_scripts_in_editor !== "Disable") {
 		additionalAttributes = props.block.getCustomAttributes();
 	}
 
 	Object.keys(additionalAttributes).forEach((key) => {
 		const trimmedKey = key.trim();
-		if (RESTRICTED_ATTRIBS.includes(trimmedKey) || trimmedKey === "") {
+		if (RESERVED_ATTRIBUTES.includes(trimmedKey) || trimmedKey === "") {
 			delete additionalAttributes[key];
 		} else if (trimmedKey !== key) {
 			additionalAttributes[trimmedKey] = additionalAttributes[key];
diff --git a/frontend/src/components/BuilderCanvas.vue b/frontend/src/components/BuilderCanvas.vue
index c1e25c207..4e4d176c4 100644
--- a/frontend/src/components/BuilderCanvas.vue
+++ b/frontend/src/components/BuilderCanvas.vue
@@ -22,13 +22,17 @@
 			}">
 			<div class="absolute right-0 top-[-60px] flex rounded-md bg-surface-base px-3">
 				<Tooltip
-					:text="scriptsDisabled ? 'Scripts are disabled in Builder Settings' : 'Run scripts in canvas'"
+					:text="
+						emulationDisabled
+							? 'Client script emulation is disabled in Builder Settings'
+							: 'Run scripts in canvas'
+					"
 					:hoverDelay="0.6">
 					<div
 						data-testid="run-canvas-scripts"
 						v-show="!canvasProps.scaling && !canvasProps.panning"
 						class="w-auto p-2"
-						:class="scriptsDisabled ? 'cursor-not-allowed opacity-40' : 'cursor-pointer'"
+						:class="emulationDisabled ? 'cursor-not-allowed opacity-40' : 'cursor-pointer'"
 						@click.stop="toggleCanvasScripts">
 						<span
 							:class="[
@@ -43,7 +47,7 @@
 						data-testid="refresh-canvas-scripts"
 						v-show="
 							builderStore.runCanvasScripts &&
-							!scriptsDisabled &&
+							!emulationDisabled &&
 							!canvasProps.scaling &&
 							!canvasProps.panning
 						"
@@ -169,11 +173,9 @@ import { elementFromEditorPoint, forwardFrameEvents } from "@/utils/canvasFrameD
 import { getBlockObject, isCtrlOrCmd } from "@/utils/helpers";
 import {
 	type BlockClientScriptRuntime,
-	executeClientScriptRestricted,
-	executeClientScriptUnrestricted,
-	executePageClientScriptRestricted,
-	executePageClientScriptUnrestricted,
-} from "@/utils/scriptSandbox";
+	executeClientScript,
+	executePageClientScript,
+} from "@/utils/scriptEmulation";
 import { useBlockEventHandlers } from "@/utils/useBlockEventHandlers";
 import { useBlockSelection } from "@/utils/useBlockSelection";
 import { useBuilderVariable } from "@/utils/useBuilderVariable";
@@ -239,17 +241,19 @@ const props = withDefaults(
 
 const block = ref(props.blockData) as Ref<Block>;
 const history = ref(null) as Ref<null> | CanvasHistory;
+const emulationDisabled = computed(() => builderSettings.doc?.execute_block_scripts_in_editor === "Disable");
 const blockClientStyles = computed(() => {
 	const css = Array.from(blockStyles.values()).filter(Boolean).join("\n");
 	return css ? `@layer builder-authored {\n${css}\n}` : "";
 });
-const pageClientStyles = computed(() =>
-	pageStore.activePageScripts
+const pageClientStyles = computed(() => {
+	if (!builderStore.runCanvasScripts || emulationDisabled.value) return "";
+	return pageStore.activePageScripts
 		.filter((script) => script.script_type === "CSS")
 		.map((script) => script.script)
 		.filter(Boolean)
-		.join("\n"),
-);
+		.join("\n");
+});
 const pageJavaScripts = computed(() =>
 	pageStore.activePageScripts.filter((script) => script.script_type === "JavaScript"),
 );
@@ -257,9 +261,6 @@ const pageJavaScriptSignature = computed(() =>
 	JSON.stringify(pageJavaScripts.value.map(({ name, script }) => [name, script])),
 );
 const pageDataSignature = computed(() => JSON.stringify(pageStore.pageData));
-const scriptsDisabled = computed(
-	() => builderSettings.doc?.execute_block_scripts_in_editor === "Don't Execute",
-);
 
 const activeBreakpoint = ref("desktop") as Ref<string | null>;
 const hoveredBreakpoint = ref("desktop") as Ref<string | null>;
@@ -402,7 +403,7 @@ function registerFrame(breakpoint: string, doc: Document, root: HTMLElement, ifr
 		watch(
 			[() => builderStore.runCanvasScripts, () => pageStore.settingPage],
 			([runScripts, settingPage], _, onCleanup) => {
-				if (!runScripts || settingPage || scriptsDisabled.value) return;
+				if (!runScripts || settingPage || emulationDisabled.value) return;
 				onCleanup(executePageClientScripts(root));
 			},
 			{ immediate: true, flush: "post" },
@@ -508,7 +509,7 @@ watch(
 	() => builderSettings.doc?.execute_block_scripts_in_editor,
 	(mode, previousMode) => {
 		const scriptsWereRunning = builderStore.runCanvasScripts;
-		if (mode === "Don't Execute" && scriptsWereRunning) {
+		if (mode === "Disable" && scriptsWereRunning) {
 			builderStore.runCanvasScripts = false;
 		}
 		if (previousMode && mode !== previousMode && scriptsWereRunning) {
@@ -525,7 +526,7 @@ watch(
 			!pageJavaScripts.value.length ||
 			!builderStore.runCanvasScripts ||
 			pageStore.settingPage ||
-			scriptsDisabled.value
+			emulationDisabled.value
 		)
 			return;
 		frameEpoch.value++;
@@ -535,7 +536,7 @@ watch(
 watch(
 	() => pageStore.settingPage,
 	(settingPage, wasSettingPage) => {
-		if (!settingPage && wasSettingPage && builderStore.runCanvasScripts && !scriptsDisabled.value) {
+		if (!settingPage && wasSettingPage && builderStore.runCanvasScripts && !emulationDisabled.value) {
 			frameEpoch.value++;
 		}
 	},
@@ -610,13 +611,13 @@ function selectBreakpoint(ev: MouseEvent, breakpoint: BreakpointConfig) {
 }
 
 function toggleCanvasScripts() {
-	if (scriptsDisabled.value) return;
+	if (emulationDisabled.value) return;
 	builderStore.runCanvasScripts = !builderStore.runCanvasScripts;
 	frameEpoch.value++;
 }
 
 function refreshCanvasScripts() {
-	if (!builderStore.runCanvasScripts || scriptsDisabled.value) return;
+	if (!builderStore.runCanvasScripts || emulationDisabled.value) return;
 	frameEpoch.value++;
 }
 
@@ -629,24 +630,17 @@ function emulateBlockClientScript(script: BlockClientScriptRuntime) {
 	const selector = `[data-builder-canvas="${canvasId}"] [data-block-uid="${escapeAttributeValue(
 		script.key,
 	)}"][data-breakpoint="${escapeAttributeValue(script.breakpoint)}"]`;
-	blockStyles.set(registrationKey, script.css ? `${selector} { ${script.css} }` : "");
 
-	const mode = builderSettings.doc?.execute_block_scripts_in_editor ?? "Restricted";
+	const shouldEmulate = builderStore.runCanvasScripts && !emulationDisabled.value;
+	blockStyles.set(registrationKey, shouldEmulate && script.css ? `${selector} { ${script.css} }` : "");
+
 	let cleanup = () => {};
-	if (builderStore.runCanvasScripts && mode !== "Don't Execute" && script.javascript.trim()) {
+	if (shouldEmulate && script.javascript.trim()) {
 		const context = {
 			componentData: script.componentData,
 			props: script.props,
 		};
-		cleanup =
-			mode === "Unrestricted"
-				? executeClientScriptUnrestricted(script.element, script.javascript, context)
-				: executeClientScriptRestricted(
-						script.element,
-						frameRoots.get(script.breakpoint) || null,
-						script.javascript,
-						context,
-				  );
+		cleanup = executeClientScript(script.element, script.javascript, context);
 	}
 
 	return () => {
@@ -659,11 +653,8 @@ function emulateBlockClientScript(script: BlockClientScriptRuntime) {
 }
 
 function executePageClientScripts(root: HTMLElement) {
-	const mode = builderSettings.doc?.execute_block_scripts_in_editor ?? "Restricted";
 	const cleanups = pageJavaScripts.value.map(({ script }) =>
-		mode === "Unrestricted"
-			? executePageClientScriptUnrestricted(root, script, pageStore.pageData)
-			: executePageClientScriptRestricted(root, script, pageStore.pageData),
+		executePageClientScript(root, script, pageStore.pageData),
 	);
 
 	return () => {
diff --git a/frontend/src/components/Settings/GlobalDeveloper.vue b/frontend/src/components/Settings/GlobalDeveloper.vue
index 1cb5ba797..cde8c9e9a 100644
--- a/frontend/src/components/Settings/GlobalDeveloper.vue
+++ b/frontend/src/components/Settings/GlobalDeveloper.vue
@@ -1,9 +1,7 @@
 <template>
 	<div class="flex flex-col gap-5">
 		<div class="flex justify-between">
-			<label class="text-p-base-medium w-fit shrink-0 text-ink-gray-8">
-				Execute Client Scripts in Editor
-			</label>
+			<label class="text-p-base-medium w-fit shrink-0 text-ink-gray-8">Client Script Emulation</label>
 			<Select
 				class="!w-[200px]"
 				:modelValue="builderSettings.doc?.execute_block_scripts_in_editor"
@@ -11,25 +9,13 @@
 					(value) => builderStore.updateBuilderSettings('execute_block_scripts_in_editor', value)
 				"
 				:options="[
-					{ label: 'Don\'t Execute', value: 'Don\'t Execute' },
-					{ label: 'Restricted', value: 'Restricted' },
-					{ label: 'Unrestricted', value: 'Unrestricted' },
+					{ label: 'Enable', value: 'Enable' },
+					{ label: 'Disable', value: 'Disable' },
 				]" />
 		</div>
-		<Switch
-			size="sm"
-			label="Prevent Click Emulation"
-			description="Prevents click events from being emulated in the editor for blocks with Block Client Scripts."
-			:modelValue="Boolean(builderSettings.doc?.restrict_click_handlers)"
-			@update:modelValue="
-				(val: Boolean) => {
-					builderStore.updateBuilderSettings('restrict_click_handlers', val);
-				}
-			" />
 		<div class="flex flex-col gap-2">
 			<p class="text-p-sm text-ink-gray-7">
-				Note: Client scripts are executed in a sandboxed environment. This may have limitations and might not
-				perfectly replicate live site behavior. Executing untrusted scripts could be unsafe.
+				Client scripts run inside the isolated canvas document. Only enable emulation for scripts you trust.
 			</p>
 		</div>
 	</div>
@@ -37,7 +23,7 @@
 <script setup lang="ts">
 import { builderSettings } from "@/data/builderSettings";
 import useBuilderStore from "@/stores/builderStore";
-import { Select, Switch } from "frappe-ui";
+import { Select } from "frappe-ui";
 
 const builderStore = useBuilderStore();
 </script>
diff --git a/frontend/src/types/doctypes.ts b/frontend/src/types/doctypes.ts
index 308a4b9a7..9d529e989 100644
--- a/frontend/src/types/doctypes.ts
+++ b/frontend/src/types/doctypes.ts
@@ -37,10 +37,8 @@ export interface BuilderSettings extends DocType {
   head_html?: string;
   /** Body HTML: Code */
   body_html?: string;
-  /** Execute Client Scripts in Editor: Select */
-  execute_block_scripts_in_editor?: 'Don\'t Execute' | 'Restricted' | 'Unrestricted';
-  /** Restrict Click Handlers: Check */
-  restrict_click_handlers: 0 | 1;
+  /** Client Script Emulation: Select */
+  execute_block_scripts_in_editor?: 'Enable' | 'Disable';
   /** AI API Key: Password */
   ai_api_key?: string;
 }
diff --git a/frontend/src/utils/scriptEmulation.ts b/frontend/src/utils/scriptEmulation.ts
new file mode 100644
index 000000000..3e3908586
--- /dev/null
+++ b/frontend/src/utils/scriptEmulation.ts
@@ -0,0 +1,129 @@
+export type ScriptCleanup = () => void;
+export type BlockClientScriptRuntime = {
+	key: string;
+	element: HTMLElement;
+	breakpoint: string;
+	css: string;
+	javascript: string;
+	componentData: Record<string, any>;
+	props: Record<string, any>;
+};
+export type BlockClientScriptEmulator = (script: BlockClientScriptRuntime) => ScriptCleanup;
+
+type ScriptContext = {
+	componentData?: Record<string, any>;
+	props?: Record<string, any>;
+};
+
+type PageScriptContext = {
+	pageData?: Record<string, any>;
+};
+
+function createEvents(defaultTarget: EventTarget, targetWindow: Window) {
+	const CustomEventConstructor = (targetWindow as any).CustomEvent as typeof CustomEvent;
+	return {
+		dispatch(name: string, data: any, target: EventTarget = defaultTarget) {
+			target.dispatchEvent(new CustomEventConstructor(name, { detail: data }));
+		},
+		listen(name: string, callback: (data: any, event: Event) => void, target: EventTarget = defaultTarget) {
+			const handler = (event: Event) => callback((event as CustomEvent).detail, event);
+			target.addEventListener(name, handler);
+			return () => target.removeEventListener(name, handler);
+		},
+	};
+}
+
+function createScriptFunction(userScript: string, targetWindow: Window, pageScript = false) {
+	const FunctionConstructor = (targetWindow as any).Function as FunctionConstructor;
+	const parameters = pageScript ? "" : "component_data, props";
+	const callArguments = pageScript ? "thisRef" : "thisRef, component_data, props";
+	return new FunctionConstructor(
+		"context",
+		`with (context) {
+			return (async function(${parameters}) { ${userScript} })
+				.call(${callArguments});
+		}`,
+	);
+}
+
+function createScriptCleanup(result: unknown, thisArg: unknown): ScriptCleanup {
+	let disposed = false;
+	let resolvedCleanup: unknown;
+
+	const runCleanup = (cleanup: unknown) => {
+		if (typeof cleanup !== "function") return;
+		try {
+			cleanup.call(thisArg);
+		} catch (error) {
+			console.error("Error cleaning up client script:", error);
+		}
+	};
+
+	Promise.resolve(result).then(
+		(value) => {
+			resolvedCleanup = value;
+			if (disposed) runCleanup(value);
+		},
+		(error) => console.error("Error executing client script:", error),
+	);
+
+	return () => {
+		if (disposed) return;
+		disposed = true;
+		runCleanup(resolvedCleanup);
+	};
+}
+
+function executeClientScript(
+	thisElement: HTMLElement | null,
+	userScript: string,
+	{ componentData = {}, props = {} }: ScriptContext = {},
+	pageContext: PageScriptContext | null = null,
+): ScriptCleanup {
+	if (!thisElement || !userScript.trim()) return () => {};
+
+	try {
+		const targetDocument = thisElement.ownerDocument;
+		const targetWindow = targetDocument.defaultView || window;
+		const events = createEvents(targetDocument, targetWindow);
+		const isPageScript = pageContext !== null;
+		const thisRef = isPageScript ? targetWindow : thisElement;
+		const context = isPageScript
+			? {
+					document: targetDocument,
+					events,
+					page_data: pageContext.pageData ?? {},
+					thisRef,
+			  }
+			: {
+					component_data: componentData,
+					document: targetDocument,
+					events,
+					props,
+					thisRef,
+			  };
+
+		if (isPageScript) {
+			Object.assign(targetWindow, {
+				events,
+				page_data: pageContext.pageData ?? {},
+			});
+		}
+
+		const fn = createScriptFunction(userScript, targetWindow, isPageScript);
+		return createScriptCleanup(fn(context), thisRef);
+	} catch (error) {
+		console.error("Error executing client script:", error);
+		return () => {};
+	}
+}
+
+function executePageClientScript(
+	canvasRoot: HTMLElement | null,
+	userScript: string,
+	pageData: Record<string, any>,
+) {
+	return executeClientScript(canvasRoot, userScript, {}, { pageData });
+}
+
+export { executeClientScript, executePageClientScript };
diff --git a/frontend/src/utils/scriptSandbox.ts b/frontend/src/utils/scriptSandbox.ts
deleted file mode 100644
index d8fab1518..000000000
--- a/frontend/src/utils/scriptSandbox.ts
+++ /dev/null
@@ -1,328 +0,0 @@
-import { builderSettings } from "@/data/builderSettings";
-
-export type ScriptCleanup = () => void;
-export type BlockClientScriptRuntime = {
-	key: string;
-	element: HTMLElement;
-	breakpoint: string;
-	css: string;
-	javascript: string;
-	componentData: Record<string, any>;
-	props: Record<string, any>;
-};
-export type BlockClientScriptEmulator = (script: BlockClientScriptRuntime) => ScriptCleanup;
-
-type ScriptContext = {
-	componentData?: Record<string, any>;
-	props?: Record<string, any>;
-};
-
-type PageScriptContext = {
-	pageData?: Record<string, any>;
-};
-
-function createEvents(defaultTarget: EventTarget, targetWindow: Window) {
-	const CustomEventConstructor = (targetWindow as any).CustomEvent as typeof CustomEvent;
-	return {
-		dispatch(name: string, data: any, target: EventTarget = defaultTarget) {
-			target.dispatchEvent(new CustomEventConstructor(name, { detail: data }));
-		},
-		listen(name: string, callback: (data: any, event: Event) => void, target: EventTarget = defaultTarget) {
-			const handler = (event: Event) => callback((event as CustomEvent).detail, event);
-			target.addEventListener(name, handler);
-			return () => target.removeEventListener(name, handler);
-		},
-	};
-}
-
-function createScriptFunction(userScript: string, targetWindow: Window, pageScript = false) {
-	const FunctionConstructor = (targetWindow as any).Function as FunctionConstructor;
-	const parameters = pageScript ? "" : "component_data, props";
-	const callArguments = pageScript ? "thisRef" : "thisRef, component_data, props";
-	return new FunctionConstructor(
-		"context",
-		`with (context) {
-			return (async function(${parameters}) { ${userScript} })
-				.call(${callArguments});
-		}`,
-	);
-}
-
-function createScriptCleanup(
-	result: unknown,
-	thisArg: unknown,
-	mode: "restricted" | "unrestricted",
-	onDispose: () => void = () => {},
-): ScriptCleanup {
-	let disposed = false;
-	let resolvedCleanup: unknown;
-
-	const runCleanup = (cleanup: unknown) => {
-		if (typeof cleanup !== "function") return;
-		try {
-			cleanup.call(thisArg);
-		} catch (error) {
-			console.error(`Error cleaning up user script (${mode}):`, error);
-		}
-	};
-
-	Promise.resolve(result).then(
-		(value) => {
-			resolvedCleanup = value;
-			if (disposed) runCleanup(value);
-		},
-		(error) => console.error(`Error in user script (${mode}):`, error),
-	);
-
-	return () => {
-		if (disposed) return;
-		disposed = true;
-		onDispose();
-		runCleanup(resolvedCleanup);
-	};
-}
-
-function executeClientScriptUnrestricted(
-	thisElement: HTMLElement | null,
-	userScript: string,
-	{ componentData = {}, props = {} }: ScriptContext = {},
-	pageContext: PageScriptContext | null = null,
-): ScriptCleanup {
-	if (!thisElement || !userScript.trim()) return () => {};
-
-	try {
-		const targetDocument = thisElement.ownerDocument;
-		const targetWindow = targetDocument.defaultView || window;
-		const events = createEvents(targetDocument, targetWindow);
-		const isPageScript = pageContext !== null;
-		const thisRef = isPageScript ? targetWindow : thisElement;
-		const context = isPageScript
-			? {
-					document: targetDocument,
-					events,
-					page_data: pageContext.pageData ?? {},
-					thisRef,
-			  }
-			: {
-					component_data: componentData,
-					document: targetDocument,
-					events,
-					props,
-					thisRef,
-			  };
-
-		if (isPageScript) {
-			Object.assign(targetWindow, {
-				events,
-				page_data: pageContext.pageData ?? {},
-			});
-		}
-
-		const fn = createScriptFunction(userScript, targetWindow, isPageScript);
-		const cleanup = fn(context);
-		return createScriptCleanup(cleanup, thisRef, "unrestricted");
-	} catch (error) {
-		console.error("Error in user script (unrestricted):", error);
-		return () => {};
-	}
-}
-
-/**
- * Executes a user script with the canvas exposed as document and proxies DOM values
- * to restrict common escape hatches into the broader editor document.
- */
-function executeClientScriptRestricted(
-	thisElement: HTMLElement | null,
-	sandboxRoot: HTMLElement | null,
-	userScript: string,
-	{ componentData = {}, props = {} }: ScriptContext = {},
-	pageContext: PageScriptContext | null = null,
-): ScriptCleanup {
-	if (!thisElement || !sandboxRoot || !userScript.trim()) return () => {};
-	const targetDocument = thisElement.ownerDocument;
-	const targetWindow = targetDocument.defaultView || window;
-	const FrameNode = targetWindow.Node;
-	const FrameNamedNodeMap = targetWindow.NamedNodeMap;
-	const FrameDOMTokenList = targetWindow.DOMTokenList;
-	const FrameCSSStyleDeclaration = targetWindow.CSSStyleDeclaration;
-	const FrameNodeList = targetWindow.NodeList;
-	const FrameHTMLCollection = targetWindow.HTMLCollection;
-
-	const cache = new WeakMap<object, any>();
-	const rawValues = new WeakMap<object, object>();
-	const eventListeners: Array<{
-		target: Element;
-		type: string;
-		listener: EventListenerOrEventListenerObject;
-		options?: boolean | AddEventListenerOptions;
-	}> = [];
-
-	const BLOCKED_GET = new Set([
-		"ownerDocument",
-		"document",
-		"defaultView",
-		"window",
-		"globalThis",
-		"parentElement",
-		"parentNode",
-		"innerHTML",
-		"outerHTML",
-	]);
-
-	const BLOCKED_SET = new Set(["innerHTML", "outerHTML"]);
-
-	function wrap(value: any): any {
-		if (value === null || typeof value !== "object") return value;
-		if (cache.has(value)) return cache.get(value);
-
-		const proxy = new Proxy(value, handler);
-		cache.set(value, proxy);
-		rawValues.set(proxy, value);
-		return proxy;
-	}
-
-	function unwrap(value: any) {
-		return value !== null && typeof value === "object" ? rawValues.get(value) || value : value;
-	}
-
-	const handler = {
-		get(target: Element, prop: string | symbol) {
-			if (typeof prop === "string" && BLOCKED_GET.has(prop)) return undefined;
-
-			// Always pass `target` (not the proxy) as the receiver so that native DOM
-			// getters (e.g. tagName, nodeType, children) run with the correct `this`.
-			// Passing the Proxy as receiver causes "Illegal invocation" in those cases.
-			const val = Reflect.get(target, prop, target);
-
-			// Wrap DOM returns
-			if (val instanceof FrameNode) return wrap(val);
-			if (
-				val instanceof FrameNamedNodeMap ||
-				val instanceof FrameDOMTokenList ||
-				val instanceof FrameCSSStyleDeclaration
-			)
-				return wrap(val as any);
-
-			if (val instanceof FrameNodeList || val instanceof FrameHTMLCollection) {
-				return Array.from(val, wrap);
-			}
-
-			// Wrap functions (methods)
-			if (typeof val === "function") {
-				if (prop === "addEventListener" || prop === "removeEventListener") {
-					return (
-						type: string,
-						listener: EventListenerOrEventListenerObject,
-						options?: boolean | AddEventListenerOptions,
-					) => {
-						if (builderSettings.doc?.restrict_click_handlers && (type === "click" || type === "dblclick")) {
-							throw new Error(`Blocked: cannot add/remove ${type} event listeners`);
-						}
-						const realListener = unwrap(listener);
-						const result = val.call(target, type, realListener, options);
-						if (prop === "addEventListener") {
-							eventListeners.push({ target, type, listener: realListener, options });
-						}
-						return result;
-					};
-				}
-				return (...args: any[]) => {
-					const realArgs = args.map(unwrap);
-
-					// Do not allow inserting nodes outside the sandbox
-					for (const a of realArgs) {
-						if (a instanceof FrameNode && !sandboxRoot.contains(a)) {
-							throw new Error("Blocked: external node insertion");
-						}
-					}
-
-					const result = val.apply(target, realArgs);
-					return wrap(result);
-				};
-			}
-
-			return val; // primitive allowed
-		},
-
-		set(target: Element, prop: string | symbol, value: any) {
-			if (typeof prop === "string" && BLOCKED_SET.has(prop)) {
-				throw new Error(`Blocked: cannot set ${String(prop)}`);
-			}
-
-			// Allow normal DOM props like src, value, className, id, etc.
-			try {
-				return Reflect.set(target, prop, unwrap(value), target);
-			} catch {
-				return false;
-			}
-		},
-	};
-
-	const proxiedRoot = wrap(sandboxRoot);
-	const proxiedThis = wrap(thisElement);
-	const isPageScript = pageContext !== null;
-	const thisRef = isPageScript ? proxiedRoot : proxiedThis;
-
-	const restrictedGlobals = {
-		document: proxiedRoot,
-		events: createEvents(proxiedRoot, targetWindow),
-		thisRef,
-		// Escape hatches blocked
-		window: undefined,
-		globalThis: undefined,
-		eval: undefined,
-		Function: undefined,
-		setTimeout: undefined,
-		setInterval: undefined,
-	};
-	const context = isPageScript
-		? {
-				...restrictedGlobals,
-				page_data: pageContext.pageData ?? {},
-		  }
-		: {
-				...restrictedGlobals,
-				props,
-				component_data: componentData,
-		  };
-
-	try {
-		const fn = createScriptFunction(userScript, targetWindow, isPageScript);
-		const userCleanup = fn(context);
-		return createScriptCleanup(userCleanup, thisRef, "restricted", () => {
-			eventListeners.forEach(({ target, type, listener, options }) => {
-				target.removeEventListener(type, listener, options);
-			});
-		});
-	} catch (error) {
-		console.error("Error in user script (restricted):", error);
-		return () => {
-			eventListeners.forEach(({ target, type, listener, options }) => {
-				target.removeEventListener(type, listener, options);
-			});
-		};
-	}
-}
-
-function executePageClientScriptUnrestricted(
-	canvasRoot: HTMLElement | null,
-	userScript: string,
-	pageData: Record<string, any>,
-) {
-	return executeClientScriptUnrestricted(canvasRoot, userScript, {}, { pageData });
-}
-
-function executePageClientScriptRestricted(
-	canvasRoot: HTMLElement | null,
-	userScript: string,
-	pageData: Record<string, any>,
-) {
-	return executeClientScriptRestricted(canvasRoot, canvasRoot, userScript, {}, { pageData });
-}
-
-export {
-	executeClientScriptRestricted,
-	executeClientScriptUnrestricted,
-	executePageClientScriptRestricted,
-	executePageClientScriptUnrestricted,
-};

From 54429e48048046e41a4e034572869650e65bfd94 Mon Sep 17 00:00:00 2001
From: stravo1 <stravoone@gmail.com>
Date: Fri, 3 Jul 2026 09:21:17 +0530
Subject: [PATCH 8/9] fix: retain canvas scale and position while toggling
 script emulation

---
 frontend/src/components/BuilderCanvas.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/BuilderCanvas.vue b/frontend/src/components/BuilderCanvas.vue
index 4e4d176c4..64de9158e 100644
--- a/frontend/src/components/BuilderCanvas.vue
+++ b/frontend/src/components/BuilderCanvas.vue
@@ -409,7 +409,9 @@ function registerFrame(breakpoint: string, doc: Document, root: HTMLElement, ifr
 			{ immediate: true, flush: "post" },
 		);
 	});
-	nextTick(setScaleAndTranslate);
+	if (canvasProps.settingCanvas) {
+		nextTick(setScaleAndTranslate);
+	}
 }
 
 function unregisterFrame(breakpoint: string, doc: Document | null = null) {

From db411ed4694533904f002c92d8ceb1a0f3ffd681 Mon Sep 17 00:00:00 2001
From: stravo1 <stravoone@gmail.com>
Date: Fri, 3 Jul 2026 09:21:35 +0530
Subject: [PATCH 9/9] fix: delete cypress test

---
 frontend/cypress/e2e/canvas_iframe.cy.js | 25 ------------------------
 1 file changed, 25 deletions(-)
 delete mode 100644 frontend/cypress/e2e/canvas_iframe.cy.js

diff --git a/frontend/cypress/e2e/canvas_iframe.cy.js b/frontend/cypress/e2e/canvas_iframe.cy.js
deleted file mode 100644
index 525806ecd..000000000
--- a/frontend/cypress/e2e/canvas_iframe.cy.js
+++ /dev/null
@@ -1,25 +0,0 @@
-describe("Iframe canvas", () => {
-	before(() => {
-		cy.login();
-	});
-
-	it("renders the page tree inside a replaceable breakpoint frame", () => {
-		cy.visit("builder/page/new");
-
-		cy.get('iframe[data-canvas-breakpoint="desktop"]')
-			.should("be.visible")
-			.then(($frame) => {
-				const firstFrame = $frame[0];
-				const frameDocument = firstFrame.contentDocument;
-
-				expect(frameDocument?.body.querySelector(".canvas[data-breakpoint='desktop']")).to.exist;
-				expect(frameDocument?.body.querySelector(".__builder_component__")).to.exist;
-				expect(firstFrame.ownerDocument.body.querySelector(".__builder_component__")).not.to.exist;
-
-				cy.get('[data-testid="run-canvas-scripts"]').click();
-				cy.get('iframe[data-canvas-breakpoint="desktop"]').should(($replacement) => {
-					expect($replacement[0]).not.to.equal(firstFrame);
-				});
-			});
-	});
-});