@inditextech/weave-sdk 0.38.0 → 0.39.0

package/dist/sdk.cjs

@@ -29,6 +29,7 @@ require("konva/lib/types");
 const __inditextech_weave_types = __toESM(require("@inditextech/weave-types"));
 const __syncedstore_core = __toESM(require("@syncedstore/core"));
 const yjs = __toESM(require("yjs"));
+const konva_lib_shapes_Transformer = __toESM(require("konva/lib/shapes/Transformer"));
 const react = __toESM(require("react"));
 const react_reconciler = __toESM(require("react-reconciler"));
 
@@ -15648,6 +15649,132 @@ const WEAVE_CONTEXT_MENU_X_OFFSET_DEFAULT = 4;
 const WEAVE_CONTEXT_MENU_Y_OFFSET_DEFAULT = 4;
 const WEAVE_CONTEXT_MENU_TAP_HOLD_TIMEOUT = 500;
 
+//#endregion
+//#region src/utils.ts
+function resetScale(node) {
+	node.width(Math.round((Math.max(1, node.width() * node.scaleX()) + Number.EPSILON) * 100) / 100);
+	node.height(Math.round((Math.max(1, node.height() * node.scaleY()) + Number.EPSILON) * 100) / 100);
+	node.scaleX(1);
+	node.scaleY(1);
+	node.x(Math.round((node.x() + Number.EPSILON) * 100) / 100);
+	node.y(Math.round((node.y() + Number.EPSILON) * 100) / 100);
+	node.rotation(Math.round((node.rotation() + Number.EPSILON) * 100) / 100);
+}
+function clearContainerTargets(instance) {
+	const containers = instance.getContainerNodes();
+	for (const container of containers) container.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, { bubbles: true });
+}
+function checkIfOverContainer(instance, node) {
+	if (node instanceof konva.default.Transformer) {
+		const transformerNodes = node.nodes();
+		const containersInSelection = [];
+		for (const actualNode of transformerNodes) if (typeof actualNode.getAttrs().isContainerPrincipal !== "undefined" && actualNode.getAttrs().isContainerPrincipal) containersInSelection.push(actualNode);
+		const containersInSelectionSet = new Set(containersInSelection);
+		const uniqueContainersInSelection = Array.from(containersInSelectionSet);
+		if (uniqueContainersInSelection.length > 0) return void 0;
+	}
+	const intersectedNode = instance.nodeIntersectsContainerElement(node);
+	let nodeActualContainer = node.getParent();
+	if (nodeActualContainer?.getAttrs().nodeId) nodeActualContainer = instance.getStage().findOne(`#${nodeActualContainer.getAttrs().nodeId}`);
+	let layerToMove = void 0;
+	if (!node.getAttrs().containerId && intersectedNode && nodeActualContainer?.getAttrs().id !== intersectedNode.getAttrs().id) layerToMove = intersectedNode;
+	return layerToMove;
+}
+function moveNodeToContainer(instance, node) {
+	const stage = instance.getStage();
+	const nodeIntersected = instance.nodeIntersectsContainerElement(node);
+	const isLocked = instance.allNodesLocked([node]);
+	if (isLocked) return;
+	let nodeActualContainer = node.getParent();
+	if (nodeActualContainer.getAttrs().nodeId) {
+		const realParent = stage.findOne(`#${nodeActualContainer.getAttrs().nodeId}`);
+		if (realParent) nodeActualContainer = realParent;
+	}
+	if (!nodeActualContainer) return void 0;
+	const actualContainerAttrs = nodeActualContainer.getAttrs();
+	let layerToMove = void 0;
+	if (nodeIntersected && actualContainerAttrs.id !== nodeIntersected.getAttrs().id && !node.getAttrs().isContainerPrincipal) layerToMove = nodeIntersected;
+	if (!nodeIntersected && actualContainerAttrs.id !== __inditextech_weave_types.WEAVE_NODE_LAYER_ID) layerToMove = instance.getMainLayer();
+	if (layerToMove && actualContainerAttrs.id !== layerToMove.getAttrs().id && actualContainerAttrs.id !== layerToMove.getAttrs().containerId) {
+		const layerToMoveAttrs = layerToMove.getAttrs();
+		const nodePos = node.getAbsolutePosition();
+		const nodeRotation = node.getAbsoluteRotation();
+		node.moveTo(layerToMove);
+		node.setAbsolutePosition(nodePos);
+		node.rotation(nodeRotation);
+		node.x(node.x() - (layerToMoveAttrs.containerOffsetX ?? 0));
+		node.y(node.y() - (layerToMoveAttrs.containerOffsetY ?? 0));
+		node.movedToContainer(layerToMove);
+		const nodeHandler = instance.getNodeHandler(node.getAttrs().nodeType);
+		if (nodeHandler) {
+			const actualNode = nodeHandler.serialize(node);
+			instance.removeNode(actualNode);
+			instance.addNode(actualNode, layerToMoveAttrs.id);
+			return layerToMove;
+		}
+	}
+	return void 0;
+}
+function getContrastTextColor(hex) {
+	const cleaned = hex.replace(/^#/, "");
+	const r = parseInt(cleaned.slice(0, 2), 16);
+	const g = parseInt(cleaned.slice(2, 4), 16);
+	const b = parseInt(cleaned.slice(4, 6), 16);
+	const luminance = (.299 * r + .587 * g + .114 * b) / 255;
+	return luminance > .5 ? "black" : "white";
+}
+function stringToColor(str) {
+	let hash = 0;
+	str.split("").forEach((char) => {
+		hash = char.charCodeAt(0) + ((hash << 5) - hash);
+	});
+	let color = "#";
+	for (let i = 0; i < 3; i++) {
+		const value = hash >> i * 8 & 255;
+		color += value.toString(16).padStart(2, "0");
+	}
+	return color;
+}
+function getBoundingBox(stage, nodes) {
+	if (nodes.length === 0) return {
+		x: 0,
+		y: 0,
+		width: 0,
+		height: 0
+	};
+	let minX = Infinity;
+	let minY = Infinity;
+	let maxX = -Infinity;
+	let maxY = -Infinity;
+	for (const node of nodes) {
+		const box = node.getRealClientRect({ skipTransform: false });
+		minX = Math.min(minX, box.x);
+		minY = Math.min(minY, box.y);
+		maxX = Math.max(maxX, box.x + box.width);
+		maxY = Math.max(maxY, box.y + box.height);
+	}
+	return {
+		x: minX,
+		y: minY,
+		width: maxX - minX,
+		height: maxY - minY
+	};
+}
+function getTargetedNode(instance) {
+	const stage = instance.getStage();
+	let selectedGroup = void 0;
+	const mousePos = stage.getPointerPosition();
+	if (mousePos) {
+		const allInter = stage.getAllIntersections(mousePos);
+		if (allInter.length === 1) selectedGroup = instance.getInstanceRecursive(allInter[0]);
+		else {
+			const allInterContainersFiltered = allInter.filter((ele) => typeof ele.getAttrs().containerElement === "undefined");
+			if (allInterContainersFiltered.length > 0) selectedGroup = instance.getInstanceRecursive(allInterContainersFiltered[0]);
+		}
+	}
+	return selectedGroup;
+}
+
 //#endregion
 //#region src/plugins/context-menu/context-menu.ts
 var WeaveContextMenuPlugin = class extends WeavePlugin {
@@ -15655,12 +15782,14 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 	initLayer = void 0;
 	constructor(params) {
 		super();
-		this.onAction = void 0;
-		this.dragging = false;
-		this.transforming = false;
-		this.touchTimer = void 0;
+		this.timer = null;
 		this.tapHold = false;
 		this.contextMenuVisible = false;
+		this.tapStart = {
+			x: 0,
+			y: 0,
+			time: 0
+		};
 		this.tapHoldTimeout = WEAVE_CONTEXT_MENU_TAP_HOLD_TIMEOUT;
 		const { config } = params ?? {};
 		this.config = {
@@ -15676,34 +15805,40 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 	onInit() {
 		this.initEvents();
 	}
-	triggerContextMenu(target) {
+	isPressed(e) {
+		return e.evt.buttons > 0;
+	}
+	setTapStart(e) {
+		this.tapStart = {
+			x: e.evt.clientX,
+			y: e.evt.clientY,
+			time: performance.now()
+		};
+	}
+	triggerContextMenu(eventTarget, target) {
 		const stage = this.instance.getStage();
-		const selectionPlugin = this.instance.getPlugin(WEAVE_NODES_SELECTION_KEY);
-		let clickOnTransformer = false;
-		if (selectionPlugin) {
-			const transformer = selectionPlugin.getTransformer();
-			const box = transformer.getClientRect();
-			const mousePos = stage.getPointerPosition();
-			if (mousePos && mousePos.x >= box.x && mousePos.x <= box.x + box.width && mousePos.y >= box.y && mousePos.y <= box.y + box.height) clickOnTransformer = true;
-		}
+		const selectionPlugin = this.getSelectionPlugin();
 		let nodes = [];
-		if (target !== stage && clickOnTransformer && selectionPlugin) {
-			const transformer = selectionPlugin.getTransformer();
-			nodes = transformer.getNodes().map((node) => {
-				const nodeHandler = this.instance.getNodeHandler(node.getAttrs().nodeType);
-				return {
-					instance: node,
-					node: nodeHandler?.serialize(node)
-				};
-			}).filter((node) => typeof node !== "undefined");
-		}
-		if (target !== stage && !clickOnTransformer) {
+		if (target && target !== stage) {
 			const nodeHandler = this.instance.getNodeHandler(target.getAttrs().nodeType);
 			nodes = [{
 				instance: target,
 				node: nodeHandler?.serialize(target)
 			}];
 		}
+		const eventTargetParent = eventTarget.getParent();
+		if (eventTargetParent instanceof konva.default.Transformer) nodes = eventTargetParent.nodes().map((node) => {
+			const nodeHandler = this.instance.getNodeHandler(node.getAttrs().nodeType);
+			return {
+				instance: node,
+				node: nodeHandler?.serialize(node)
+			};
+		});
+		if (this.contextMenuVisible) this.closeContextMenu();
+		if (selectionPlugin && !(eventTarget.getParent() instanceof konva_lib_shapes_Transformer.Transformer && selectionPlugin.getSelectedNodes().length > 0)) {
+			selectionPlugin.setSelectedNodes([...nodes.map((node) => node.instance)]);
+			selectionPlugin.getHoverTransformer().nodes([]);
+		}
 		const containerRect = stage.container().getBoundingClientRect();
 		const pointerPos = stage.getPointerPosition();
 		if (containerRect && pointerPos) {
@@ -15730,58 +15865,49 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 			visible: false
 		});
 	}
+	getSelectionPlugin() {
+		const selectionPlugin = this.instance.getPlugin(WEAVE_NODES_SELECTION_KEY);
+		return selectionPlugin;
+	}
+	cancelLongPressTimer() {
+		if (this.timer) {
+			clearTimeout(this.timer);
+			this.timer = null;
+		}
+	}
 	initEvents() {
 		const stage = this.instance.getStage();
-		this.instance.addEventListener("onActiveActionChange", (activeAction) => {
-			this.onAction = activeAction;
-		});
-		this.instance.addEventListener("onDrag", (node) => {
-			this.actualNode = node;
-			if (node) this.dragging = true;
-			else this.dragging = false;
-		});
-		this.instance.addEventListener("onTransform", (node) => {
-			this.actualNode = node;
-			if (node) this.transforming = true;
-			else this.transforming = false;
-		});
 		stage.on("pointerdown", (e) => {
+			this.setTapStart(e);
 			this.pointers[e.evt.pointerId] = e.evt;
+			if (e.evt.buttons === 0) return;
 			if (e.evt.pointerType === "mouse") return;
 			if (e.evt.pointerType === "touch" && Object.keys(this.pointers).length > 1) return;
-			this.touchTimer = setTimeout(() => {
+			if (this.timer) return;
+			this.timer = setTimeout(() => {
 				this.tapHold = true;
 				const actualActions = this.instance.getActiveAction();
 				if (actualActions !== "selectionTool") return;
-				const shouldKillLongPressTimer = this.touchTimer && (typeof this.onAction === "undefined" || typeof this.onAction !== "undefined" && ["selectionTool"].includes(this.onAction)) && (typeof this.dragging !== "undefined" && this.dragging || typeof this.transforming !== "undefined" && this.transforming);
-				if (shouldKillLongPressTimer) {
-					clearTimeout(this.touchTimer);
-					return;
-				}
-				this.actualNode?.stopDrag();
 				delete this.pointers[e.evt.pointerId];
-				this.triggerContextMenu(e.target);
+				const selectedGroup = getTargetedNode(this.instance);
+				this.triggerContextMenu(e.target, selectedGroup);
 			}, this.tapHoldTimeout);
 		});
-		stage.on("pointermove", (e) => {
-			if (["mouse"].includes(e.evt.pointerType)) return;
-			if (["pen"].includes(e.evt.pointerType) && e.evt.pressure === 0) return;
-			if (["pen"].includes(e.evt.pointerType) && (e.evt.movementX >= -1 && e.evt.movementX <= 1 || e.evt.movementY >= -1 && e.evt.movementY >= 1)) return;
-			if (this.touchTimer) clearTimeout(this.touchTimer);
-		});
 		stage.on("pointerup", (e) => {
 			delete this.pointers[e.evt.pointerId];
 			if (e.evt.pointerType === "mouse") return;
 			if (e.evt.pointerType === "touch" && Object.keys(this.pointers).length + 1 > 1) return;
-			if (this.touchTimer) {
-				clearTimeout(this.touchTimer);
+			if (this.timer) {
+				clearTimeout(this.timer);
+				this.timer = null;
 				this.tapHold = false;
 			}
 		});
 		stage.on("contextmenu", (e) => {
 			e.evt.preventDefault();
 			if (!this.enabled) return;
-			this.triggerContextMenu(e.target);
+			const selectedGroup = getTargetedNode(this.instance);
+			this.triggerContextMenu(e.target, selectedGroup);
 		});
 		this.instance.addEventListener("onStageSelection", () => {
 			if (this.tapHold) return;
@@ -15814,118 +15940,19 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 	}
 };
 
-//#endregion
-//#region src/utils.ts
-function resetScale(node) {
-	node.width(Math.round((Math.max(1, node.width() * node.scaleX()) + Number.EPSILON) * 100) / 100);
-	node.height(Math.round((Math.max(1, node.height() * node.scaleY()) + Number.EPSILON) * 100) / 100);
-	node.scaleX(1);
-	node.scaleY(1);
-	node.x(Math.round((node.x() + Number.EPSILON) * 100) / 100);
-	node.y(Math.round((node.y() + Number.EPSILON) * 100) / 100);
-	node.rotation(Math.round((node.rotation() + Number.EPSILON) * 100) / 100);
-}
-function clearContainerTargets(instance) {
-	const getContainers = instance.getContainerNodes();
-	for (const container of getContainers) container.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, { bubbles: true });
-}
-function checkIfOverContainer(instance, node) {
-	const nodesIntersected = instance.pointIntersectsContainerElement(node.getParent());
-	let nodeActualContainer = node.getParent();
-	if (nodeActualContainer?.getAttrs().nodeId) nodeActualContainer = instance.getStage().findOne(`#${nodeActualContainer.getAttrs().nodeId}`);
-	let layerToMove = void 0;
-	if (!node.getAttrs().containerId && nodesIntersected && nodeActualContainer?.getAttrs().id !== nodesIntersected.getAttrs().id) layerToMove = nodesIntersected;
-	return layerToMove;
-}
-function moveNodeToContainer(instance, node, ignoreContainers = []) {
-	const nodeIntersected = instance.pointIntersectsContainerElement();
-	let realNodeIntersected = nodeIntersected;
-	if (realNodeIntersected && realNodeIntersected.getAttrs().nodeType === "frame" && !realNodeIntersected.getAttrs().nodeId) realNodeIntersected = instance.getStage().findOne(`#${realNodeIntersected.getAttrs().id}-selector-area`);
-	if (realNodeIntersected && ignoreContainers.includes(realNodeIntersected)) return void 0;
-	const isLocked = instance.allNodesLocked([node]);
-	if (isLocked) return;
-	let nodeActualContainer = node.getParent();
-	if (!nodeActualContainer) return void 0;
-	const actualContainerAttrs = nodeActualContainer.getAttrs();
-	const nodeAttrs = node.getAttrs();
-	if (actualContainerAttrs.nodeId) nodeActualContainer = instance.getStage().findOne(`#${actualContainerAttrs.nodeId}`);
-	let layerToMove = void 0;
-	if (!nodeAttrs.containerId && nodeIntersected && actualContainerAttrs.id !== nodeIntersected.getAttrs().id) layerToMove = nodeIntersected;
-	if (!nodeIntersected && actualContainerAttrs.id !== __inditextech_weave_types.WEAVE_NODE_LAYER_ID) layerToMove = instance.getMainLayer();
-	if (layerToMove && actualContainerAttrs.id !== layerToMove.getAttrs().id && actualContainerAttrs.id !== layerToMove.getAttrs().containerId) {
-		const layerToMoveAttrs = layerToMove.getAttrs();
-		const nodePos = node.getAbsolutePosition();
-		const nodeRotation = node.getAbsoluteRotation();
-		node.moveTo(layerToMove);
-		node.setAbsolutePosition(nodePos);
-		node.rotation(nodeRotation);
-		node.x(node.x() - (layerToMoveAttrs.containerOffsetX ?? 0));
-		node.y(node.y() - (layerToMoveAttrs.containerOffsetY ?? 0));
-		node.movedToContainer(layerToMove);
-		const nodeHandler = instance.getNodeHandler(node.getAttrs().nodeType);
-		if (nodeHandler) {
-			const actualNode = nodeHandler.serialize(node);
-			instance.removeNode(actualNode);
-			instance.addNode(actualNode, layerToMoveAttrs.id);
-			return layerToMove;
-		}
-	}
-	return void 0;
-}
-function getContrastTextColor(hex) {
-	const cleaned = hex.replace(/^#/, "");
-	const r = parseInt(cleaned.slice(0, 2), 16);
-	const g = parseInt(cleaned.slice(2, 4), 16);
-	const b = parseInt(cleaned.slice(4, 6), 16);
-	const luminance = (.299 * r + .587 * g + .114 * b) / 255;
-	return luminance > .5 ? "black" : "white";
-}
-function stringToColor(str) {
-	let hash = 0;
-	str.split("").forEach((char) => {
-		hash = char.charCodeAt(0) + ((hash << 5) - hash);
-	});
-	let color = "#";
-	for (let i = 0; i < 3; i++) {
-		const value = hash >> i * 8 & 255;
-		color += value.toString(16).padStart(2, "0");
-	}
-	return color;
-}
-function getBoundingBox(stage, nodes) {
-	if (nodes.length === 0) return {
-		x: 0,
-		y: 0,
-		width: 0,
-		height: 0
-	};
-	let minX = Infinity;
-	let minY = Infinity;
-	let maxX = -Infinity;
-	let maxY = -Infinity;
-	for (const node of nodes) {
-		let realNode = node;
-		if (realNode.getAttrs().containerId) realNode = stage.findOne(`#${realNode.getAttrs().containerId}`);
-		if (!realNode) continue;
-		const box = node.getRealClientRect({ skipTransform: false });
-		minX = Math.min(minX, box.x);
-		minY = Math.min(minY, box.y);
-		maxX = Math.max(maxX, box.x + box.width);
-		maxY = Math.max(maxY, box.y + box.height);
-	}
-	return {
-		x: minX,
-		y: minY,
-		width: maxX - minX,
-		height: maxY - minY
-	};
-}
-
 //#endregion
 //#region src/plugins/users-selection/constants.ts
 const WEAVE_USERS_SELECTION_KEY = "usersSelection";
 const WEAVE_USER_SELECTION_KEY = "userSelection";
 
+//#endregion
+//#region src/nodes/stage/constants.ts
+const WEAVE_STAGE_NODE_TYPE = "stage";
+const WEAVE_STAGE_MODE = {
+	["normal"]: "normal",
+	["cropping"]: "cropping"
+};
+
 //#endregion
 //#region src/plugins/nodes-selection/nodes-selection.ts
 var WeaveNodesSelectionPlugin = class extends WeavePlugin {
@@ -15951,16 +15978,6 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				keepRatio: false,
 				useSingleNodeRotation: true,
 				shouldOverdrawWholeArea: true,
-				enabledAnchors: [
-					"top-left",
-					"top-center",
-					"top-right",
-					"middle-right",
-					"middle-left",
-					"bottom-left",
-					"bottom-center",
-					"bottom-right"
-				],
 				anchorStyleFunc: (anchor) => {
 					anchor.stroke("#27272aff");
 					anchor.cornerRadius(12);
@@ -15978,6 +15995,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 					}
 				},
 				borderStroke: "#0074ffcc",
+				borderStrokeWidth: 3,
 				...config?.transformer
 			},
 			transformations: {
@@ -15996,12 +16014,17 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			"bottom-center",
 			"bottom-right"
 		];
+		this.taps = 0;
+		this.isDoubleTap = false;
+		this.tapStart = {
+			x: 0,
+			y: 0,
+			time: 0
+		};
+		this.lastTapTime = 0;
 		this.active = false;
-		this.cameFromSelectingMultiple = false;
 		this.didMove = false;
-		this.selectionTriggered = false;
 		this.selecting = false;
-		this.dragging = false;
 		this.initialized = false;
 		this.enabled = false;
 		this.pointers = {};
@@ -16052,18 +16075,34 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			...this.config.transformer
 		});
 		selectionLayer?.add(tr);
+		const trHover = new konva.default.Transformer({
+			id: "hoverTransformer",
+			...this.config.transformer,
+			borderStrokeWidth: 3,
+			rotateEnabled: false,
+			resizeEnabled: false,
+			enabledAnchors: [],
+			listening: false
+		});
+		selectionLayer?.add(trHover);
 		tr.on("transformstart", () => {
 			this.triggerSelectedNodesEvent();
 		});
-		const handleTransform = () => {
+		const handleTransform = (e) => {
+			const moved = this.checkMoved(e);
+			if (moved) this.getContextMenuPlugin()?.cancelLongPressTimer();
 			this.triggerSelectedNodesEvent();
 		};
 		tr.on("transform", (0, import_lodash.throttle)(handleTransform, 50));
 		tr.on("transformend", () => {
 			this.triggerSelectedNodesEvent();
 		});
+		let initialPos = null;
 		tr.on("dragstart", (e) => {
-			this.dragging = true;
+			initialPos = {
+				x: e.target.x(),
+				y: e.target.y()
+			};
 			this.didMove = false;
 			const stage$1 = this.instance.getStage();
 			if (stage$1.isMouseWheelPressed()) {
@@ -16071,15 +16110,23 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				e.target.stopDrag();
 				return;
 			}
+			e.cancelBubble = true;
 			const selectedNodes = tr.nodes();
 			for (let i = 0; i < selectedNodes.length; i++) {
 				const node = selectedNodes[i];
 				node.updatePosition(node.getAbsolutePosition());
 			}
 			tr.forceUpdate();
-			e.cancelBubble = true;
 		});
 		const handleDragMove = (e) => {
+			const actualPos = {
+				x: e.target.x(),
+				y: e.target.y()
+			};
+			if (initialPos) {
+				const moved = this.checkMovedDrag(initialPos, actualPos);
+				if (moved) this.getContextMenuPlugin()?.cancelLongPressTimer();
+			}
 			const stage$1 = this.instance.getStage();
 			if (stage$1.isMouseWheelPressed()) {
 				e.cancelBubble = true;
@@ -16105,7 +16152,6 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		tr.on("dragmove", handleDragMove);
 		tr.on("dragend", (e) => {
 			if (!this.didMove) return;
-			this.dragging = false;
 			e.cancelBubble = true;
 			const selectedNodes = tr.nodes();
 			let hasFrames = false;
@@ -16123,7 +16169,8 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				const nodeUpdatePromise = (node) => {
 					return new Promise((resolve) => {
 						setTimeout(() => {
-							moveNodeToContainer(this.instance, node, selectedNodes);
+							clearContainerTargets(this.instance);
+							if (!hasFrames) moveNodeToContainer(this.instance, node);
 							const nodeHandler = this.instance.getNodeHandler(node.getAttrs().nodeType);
 							if (!nodeHandler) return resolve();
 							toSelect.push(node.getAttrs().id ?? "");
@@ -16151,14 +16198,8 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			tr.forceUpdate();
 		});
 		this.tr = tr;
+		this.trHover = trHover;
 		this.selectionRectangle = selectionRectangle;
-		this.tr.on("pointerdblclick", (e) => {
-			e.cancelBubble = true;
-			if (this.tr.getNodes().length === 1) {
-				const node = this.tr.getNodes()[0];
-				node.fire("pointerdblclick");
-			}
-		});
 		this.initEvents();
 		this.initialized = true;
 		this.instance.addEventListener("onActiveActionChange", (activeAction) => {
@@ -16210,6 +16251,63 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		this.tr.nodes([]);
 		this.triggerSelectedNodesEvent();
 	}
+	setTapStart(e) {
+		this.tapStart = {
+			x: e.evt.clientX,
+			y: e.evt.clientY,
+			time: performance.now()
+		};
+	}
+	checkMovedDrag(init, actual) {
+		if (!this.tapStart) return false;
+		const dx = actual.x - init.x;
+		const dy = actual.y - init.y;
+		const dist = Math.sqrt(dx * dx + dy * dy);
+		const MOVED_DISTANCE = 5;
+		if (dist <= MOVED_DISTANCE) return false;
+		return true;
+	}
+	checkMoved(e) {
+		if (!this.tapStart) return false;
+		const dx = e.evt.clientX - this.tapStart.x;
+		const dy = e.evt.clientY - this.tapStart.y;
+		const dist = Math.sqrt(dx * dx + dy * dy);
+		const MOVED_DISTANCE = 5;
+		if (dist <= MOVED_DISTANCE) return false;
+		return true;
+	}
+	checkDoubleTap(e) {
+		if (!this.tapStart) return;
+		const now = performance.now();
+		const dx = e.evt.clientX - this.tapStart.x;
+		const dy = e.evt.clientY - this.tapStart.y;
+		const dist = Math.sqrt(dx * dx + dy * dy);
+		const DOUBLE_TAP_DISTANCE = 10;
+		const DOUBLE_TAP_TIME = 300;
+		this.isDoubleTap = false;
+		if (this.taps >= 1 && now - this.lastTapTime < DOUBLE_TAP_TIME && dist < DOUBLE_TAP_DISTANCE) {
+			this.taps = 0;
+			this.lastTapTime = 0;
+			this.tapStart = {
+				x: 0,
+				y: 0,
+				time: 0
+			};
+			this.isDoubleTap = true;
+		} else {
+			this.setTapStart(e);
+			this.taps = this.taps + 1;
+			this.lastTapTime = now;
+			this.isDoubleTap = false;
+		}
+	}
+	hideSelectorArea() {
+		this.selectionRectangle.setAttrs({
+			width: 0,
+			height: 0,
+			visible: false
+		});
+	}
 	initEvents() {
 		let x1, y1, x2, y2;
 		this.selecting = false;
@@ -16221,14 +16319,31 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			}
 		});
 		stage.on("pointerdown", (e) => {
+			this.setTapStart(e);
 			this.pointers[e.evt.pointerId] = e.evt;
 			if (!this.initialized) return;
 			if (!this.active) return;
 			if (e.evt.pointerType === "mouse" && e.evt.button !== 0) return;
 			if (e.evt.pointerType === "pen" && e.evt.pressure <= .05) return;
 			if (e.evt.pointerType === "touch" && Object.keys(this.pointers).length > 1) return;
-			const selectedGroup = this.instance.getInstanceRecursive(e.target);
-			if (!(e.target instanceof konva.default.Stage) && !(selectedGroup && selectedGroup.getAttrs().nodeType === "frame")) return;
+			if (stage.mode() !== WEAVE_STAGE_MODE.normal) return;
+			const selectedGroup = getTargetedNode(this.instance);
+			if (selectedGroup?.getParent() instanceof konva.default.Transformer) {
+				this.selecting = false;
+				this.hideSelectorArea();
+				return;
+			}
+			const isStage = e.target instanceof konva.default.Stage;
+			const isTransformer = e.target?.getParent() instanceof konva.default.Transformer;
+			const isTargetable = e.target.getAttrs().isTargetable !== false;
+			const isContainerEmptyArea = typeof e.target.getAttrs().isContainerPrincipal !== "undefined" && !e.target.getAttrs().isContainerPrincipal;
+			if (isTransformer) return;
+			if (!isStage && !isContainerEmptyArea && isTargetable) {
+				this.selecting = false;
+				this.hideSelectorArea();
+				this.handleClickOrTap(e);
+				return;
+			}
 			const intStage = this.instance.getStage();
 			x1 = intStage.getRelativePointerPosition()?.x ?? 0;
 			y1 = intStage.getRelativePointerPosition()?.y ?? 0;
@@ -16239,30 +16354,27 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			this.selectionRectangle.width(0);
 			this.selectionRectangle.height(0);
 			this.selecting = true;
+			this.tr.nodes([]);
 			this.instance.emitEvent("onSelectionState", true);
 		});
 		const handleMouseMove = (e) => {
-			if (this.selectionTriggered) {
-				this.selectionTriggered = false;
-				this.selectionRectangle.setAttrs({ visible: false });
-				return;
-			}
+			const moved = this.checkMoved(e);
+			if (e.evt.buttons === 0) return;
 			if (!this.initialized) return;
 			if (!this.active) return;
-			if (e.evt.pointerType === "pen" && e.evt.pressure <= .05) return;
 			if (e.evt.pointerType === "touch" && Object.keys(this.pointers).length > 1) return;
-			const contextMenuPlugin = this.instance.getPlugin("contextMenu");
+			const contextMenuPlugin = this.getContextMenuPlugin();
+			if (moved) contextMenuPlugin?.cancelLongPressTimer();
+			else this.hideSelectorArea();
 			if (contextMenuPlugin && contextMenuPlugin.isContextMenuVisible()) {
 				this.selecting = false;
 				return;
 			}
-			if (!this.selecting) {
-				this.cameFromSelectingMultiple = false;
-				return;
-			}
+			if (!this.selecting) return;
 			const intStage = this.instance.getStage();
 			x2 = intStage.getRelativePointerPosition()?.x ?? 0;
 			y2 = intStage.getRelativePointerPosition()?.y ?? 0;
+			this.getTransformer().nodes([]);
 			this.selectionRectangle.setAttrs({
 				visible: true,
 				x: Math.min(x1, x2),
@@ -16273,33 +16385,59 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		};
 		stage.on("pointermove", handleMouseMove);
 		stage.on("pointerup", (e) => {
+			const moved = this.checkMoved(e);
+			this.checkDoubleTap(e);
 			delete this.pointers[e.evt.pointerId];
-			if (this.selectionTriggered) {
-				this.selectionTriggered = false;
-				this.selectionRectangle.setAttrs({ visible: false });
+			this.getSnappingPlugin()?.cleanupEvaluateGuidelines();
+			const contextMenuPlugin = this.getContextMenuPlugin();
+			if (!this.initialized) {
+				this.hideSelectorArea();
+				return;
+			}
+			if (!this.active) {
+				this.hideSelectorArea();
+				return;
+			}
+			this.selecting = false;
+			this.instance.emitEvent("onSelectionState", false);
+			if (this.isDoubleTap) {
+				this.taps = 0;
+				this.lastTapTime = 0;
+				this.tapStart = {
+					x: 0,
+					y: 0,
+					time: 0
+				};
+				this.isDoubleTap = true;
+				this.hideSelectorArea();
+				this.handleClickOrTap(e);
+				return;
+			}
+			const isStage = e.target instanceof konva.default.Stage;
+			const isContainerEmptyArea = typeof e.target.getAttrs().isContainerPrincipal !== "undefined" && !e.target.getAttrs().isContainerPrincipal;
+			if ((isStage || isContainerEmptyArea) && !moved) {
+				this.selecting = false;
+				this.hideSelectorArea();
+				this.getSelectionPlugin()?.setSelectedNodes([]);
+				return;
+			}
+			if (e.evt.pointerType === "touch" && Object.keys(this.pointers).length + 1 > 1) {
+				this.hideSelectorArea();
 				return;
 			}
-			if (!this.initialized) return;
-			if (!this.active) return;
-			if (!this.selecting) return;
-			if (e.evt.pointerType === "pen" && e.evt.pressure > 0) return;
-			if (e.evt.pointerType === "touch" && Object.keys(this.pointers).length + 1 > 1) return;
-			const contextMenuPlugin = this.instance.getPlugin("contextMenu");
 			if (contextMenuPlugin && contextMenuPlugin.isContextMenuVisible()) {
 				this.selecting = false;
 				return;
 			}
-			this.selecting = false;
-			this.instance.emitEvent("onSelectionState", false);
 			if (!this.selectionRectangle.visible()) {
-				this.cameFromSelectingMultiple = false;
+				this.hideSelectorArea();
 				return;
 			}
-			this.selectionRectangle.visible(false);
 			const shapes = stage.find((node) => {
 				return ["Shape", "Group"].includes(node.getType()) && typeof node.getAttrs().id !== "undefined";
 			});
 			const box = this.selectionRectangle.getClientRect();
+			this.selectionRectangle.visible(false);
 			const selected = shapes.filter((shape) => {
 				let parent = this.instance.getInstanceRecursive(shape.getParent());
 				if (parent.getAttrs().nodeId) parent = this.instance.getStage().findOne(`#${parent.getAttrs().nodeId}`);
@@ -16313,124 +16451,148 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				return false;
 			});
 			const selectedNodes = new Set();
-			const framesNodes = selected.filter((shape) => {
-				return shape instanceof konva.default.Rect && shape.getAttrs().nodeType === "frame";
+			const containerNodes = selected.filter((node) => {
+				return typeof node.getAttrs().isContainerPrincipal !== "undefined" && node.getAttrs().isContainerPrincipal;
 			});
-			let framesNodesIds = framesNodes.map((shape) => {
-				if (shape.getAttrs().nodeType === "frame" && shape.getAttrs().nodeId) return stage.findOne(`#${shape.getAttrs().nodeId}`);
-				return shape;
-			}).filter((shape) => {
-				return shape.getAttrs().nodeType === "frame";
-			}).map((shape) => {
-				return shape.getAttrs().id;
+			let containerNodesIds = containerNodes.map((node) => {
+				return node.getAttrs().id;
 			});
-			const uniqueFramesNodesIds = new Set(framesNodesIds);
-			framesNodesIds = Array.from(uniqueFramesNodesIds);
-			const otherNodes = selected.filter((shape) => shape.getAttrs().nodeType !== "frame");
+			const uniqueContainerNodesIds = new Set(containerNodesIds);
+			containerNodesIds = Array.from(uniqueContainerNodesIds);
+			const otherNodes = selected.filter((shape) => typeof shape.getAttrs().isContainerPrincipal === "undefined" || typeof shape.getAttrs().isContainerPrincipal !== "undefined" && !shape.getAttrs().isContainerPrincipal);
 			otherNodes.forEach((node) => {
 				let parent = this.instance.getInstanceRecursive(node.getParent());
 				if (parent?.getAttrs().nodeId) parent = this.instance.getStage().findOne(`#${parent.getAttrs().nodeId}`);
-				if (parent && !framesNodesIds.includes(parent?.getAttrs().id) && !node.getAttrs().locked) selectedNodes.add(node);
+				if (parent && !containerNodesIds.includes(parent?.getAttrs().id) && !node.getAttrs().locked) selectedNodes.add(node);
 			});
-			framesNodes.forEach((node) => {
+			containerNodes.forEach((node) => {
 				const frameNode = node;
-				if (!frameNode.getAttrs().locked) selectedNodes.add(frameNode);
+				if (!frameNode.getAttrs().locked) selectedNodes.add(node);
 			});
+			const nodesArray = [...selectedNodes];
+			if (nodesArray.length > 1 && !this.config.transformations.multipleSelection.enabled || nodesArray.length === 1 && !this.config.transformations.singleSelection.enabled) this.tr.enabledAnchors([]);
+			if (nodesArray.length > 1 && this.config.transformations.multipleSelection.enabled || nodesArray.length === 1 && this.config.transformations.singleSelection.enabled) this.tr.enabledAnchors(this.defaultEnabledAnchors);
+			if (nodesArray.length === 1) {
+				this.tr.setAttrs({
+					...this.config.transformer,
+					...nodesArray[0].getTransformerProperties()
+				});
+				this.tr.forceUpdate();
+			} else {
+				this.tr.setAttrs({ ...this.config.transformer });
+				this.tr.forceUpdate();
+			}
 			this.selecting = false;
-			this.tr.nodes([...selectedNodes]);
+			this.tr.nodes(nodesArray);
 			this.triggerSelectedNodesEvent();
 			stage.container().tabIndex = 1;
 			stage.container().focus();
 		});
-		stage.on("pointerclick", (e) => {
-			e.cancelBubble = true;
-			this.selectionTriggered = false;
-			if (!this.enabled) return;
-			if (this.instance.getActiveAction() !== "selectionTool") return;
-			if (this.dragging) return;
-			const contextMenuPlugin = this.instance.getPlugin("contextMenu");
-			if (contextMenuPlugin && contextMenuPlugin.isContextMenuVisible()) {
-				this.selecting = false;
-				return;
-			}
-			if (this.cameFromSelectingMultiple) {
-				this.cameFromSelectingMultiple = false;
-				return;
-			}
-			let selectedGroup = void 0;
+	}
+	getSelectionPlugin() {
+		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		return selectionPlugin;
+	}
+	hideHoverState() {
+		const selectionPlugin = this.getSelectionPlugin();
+		if (!selectionPlugin) return;
+		selectionPlugin.getHoverTransformer().nodes([]);
+	}
+	handleClickOrTap(e) {
+		const stage = this.instance.getStage();
+		e.cancelBubble = true;
+		if (!this.enabled) return;
+		if (this.instance.getActiveAction() !== "selectionTool") return;
+		const contextMenuPlugin = this.getContextMenuPlugin();
+		if (contextMenuPlugin && contextMenuPlugin.isContextMenuVisible()) {
+			this.selecting = false;
+			return;
+		}
+		this.hideHoverState();
+		const selectedGroup = getTargetedNode(this.instance);
+		if (!this.initialized) return;
+		if (e.evt.pointerType === "mouse" && e.evt.button && e.evt.button !== 0) return;
+		let areNodesSelected = false;
+		let nodeTargeted = selectedGroup && !(selectedGroup.getAttrs().active ?? false) ? selectedGroup : e.target;
+		if (nodeTargeted.getParent() instanceof konva.default.Transformer) {
 			const mousePos = stage.getPointerPosition();
-			if (mousePos) {
-				const allInter = stage.getAllIntersections(mousePos);
-				if (allInter && allInter.length === 1) selectedGroup = this.instance.getInstanceRecursive(allInter[0]);
-			}
-			if (!this.initialized) return;
-			if (e.evt.pointerType === "mouse" && e.evt.button && e.evt.button !== 0) return;
-			if (e.target instanceof konva.default.Stage && !selectedGroup) {
-				e.evt.preventDefault();
-				this.tr.nodes([]);
-				this.triggerSelectedNodesEvent();
-				if (contextMenuPlugin && !contextMenuPlugin.isTapHold()) this.instance.emitEvent("onStageSelection");
-				return false;
-			}
-			let areNodesSelected = false;
-			let nodeTargeted = selectedGroup && !(selectedGroup.getAttrs().active ?? false) ? selectedGroup : e.target;
-			if (nodeTargeted.getParent() instanceof konva.default.Transformer) {
-				const intersections = stage.getAllIntersections(mousePos);
-				const nodesIntersected = intersections.filter((ele) => ele.getAttrs().nodeType);
-				let targetNode = null;
-				if (nodesIntersected.length > 0) targetNode = this.instance.getInstanceRecursive(nodesIntersected[nodesIntersected.length - 1]);
-				if (targetNode && targetNode.getAttrs().nodeType) nodeTargeted = targetNode;
-			}
-			if (!nodeTargeted.getAttrs().nodeType) return;
-			let nodesSelected = 0;
-			const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
-			const nodeSelectedIndex = this.tr.nodes().findIndex((node) => {
-				return node.getAttrs().id === nodeTargeted.getAttrs().id;
-			});
-			const isSelected = nodeSelectedIndex !== -1;
-			if (nodeTargeted.getAttrs().locked) return;
-			if (!metaPressed) {
-				this.tr.nodes([nodeTargeted]);
-				nodesSelected = this.tr.nodes().length;
-				this.tr.show();
-				areNodesSelected = true;
-			} else if (metaPressed && isSelected) {
-				const nodes = this.tr.nodes().slice();
-				nodes.splice(nodes.indexOf(nodeTargeted), 1);
-				this.tr.nodes(nodes);
-				nodesSelected = this.tr.nodes().length;
-				areNodesSelected = true;
-			} else if (metaPressed && !isSelected) {
-				const nodes = this.tr.nodes().concat([nodeTargeted]);
-				this.tr.nodes(nodes);
-				nodesSelected = this.tr.nodes().length;
-				areNodesSelected = true;
-			}
-			if (nodesSelected > 1 && !this.config.transformations.multipleSelection.enabled || nodesSelected === 1 && !this.config.transformations.singleSelection.enabled) this.tr.enabledAnchors([]);
-			if (nodesSelected > 1 && this.config.transformations.multipleSelection.enabled || nodesSelected === 1 && this.config.transformations.singleSelection.enabled) this.tr.enabledAnchors(this.defaultEnabledAnchors);
-			if (nodesSelected === 1) {
-				this.tr.setAttrs({ ...nodeTargeted.getTransformerProperties() });
-				this.tr.forceUpdate();
-			}
-			if (areNodesSelected) {
-				stage.container().tabIndex = 1;
-				stage.container().focus();
-				stage.container().style.cursor = "grab";
-			}
-			this.selectionTriggered = true;
-			this.triggerSelectedNodesEvent();
+			const intersections = stage.getAllIntersections(mousePos);
+			const nodesIntersected = intersections.filter((ele) => ele.getAttrs().nodeType);
+			let targetNode = null;
+			if (nodesIntersected.length > 0) targetNode = this.instance.getInstanceRecursive(nodesIntersected[nodesIntersected.length - 1]);
+			if (targetNode && targetNode.getAttrs().nodeType) nodeTargeted = targetNode;
+		}
+		if (!nodeTargeted.getAttrs().nodeType) return;
+		let nodesSelected = 0;
+		const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
+		const nodeSelectedIndex = this.tr.nodes().findIndex((node) => {
+			return node.getAttrs().id === nodeTargeted.getAttrs().id;
 		});
+		const isSelected = nodeSelectedIndex !== -1;
+		if (nodeTargeted.getAttrs().locked) return;
+		if (nodeTargeted.getAttrs().nodeId) {
+			const realNode = stage.findOne(`#${nodeTargeted.getAttrs().nodeId}`);
+			if (realNode) nodeTargeted = realNode;
+		}
+		if (typeof nodeTargeted.getAttrs().isContainerPrincipal !== "undefined" && !nodeTargeted.getAttrs().isContainerPrincipal) return;
+		if (this.isDoubleTap && !metaPressed) {
+			nodeTargeted.dblClick();
+			return;
+		}
+		if (!metaPressed) {
+			this.tr.nodes([nodeTargeted]);
+			nodesSelected = this.tr.nodes().length;
+			this.tr.show();
+			areNodesSelected = true;
+		}
+		if (metaPressed && isSelected) {
+			const nodes = this.tr.nodes().slice();
+			nodes.splice(nodes.indexOf(nodeTargeted), 1);
+			this.tr.nodes(nodes);
+			nodesSelected = this.tr.nodes().length;
+			areNodesSelected = true;
+		}
+		if (metaPressed && !isSelected) {
+			const nodes = this.tr.nodes().concat([nodeTargeted]);
+			this.tr.nodes(nodes);
+			nodesSelected = this.tr.nodes().length;
+			areNodesSelected = true;
+		}
+		if (nodesSelected > 1 && !this.config.transformations.multipleSelection.enabled || nodesSelected === 1 && !this.config.transformations.singleSelection.enabled) this.tr.enabledAnchors([]);
+		if (nodesSelected > 1 && this.config.transformations.multipleSelection.enabled || nodesSelected === 1 && this.config.transformations.singleSelection.enabled) this.tr.enabledAnchors(this.defaultEnabledAnchors);
+		if (nodesSelected === 1) {
+			this.tr.setAttrs({
+				...this.config.transformer,
+				...nodeTargeted.getTransformerProperties()
+			});
+			this.tr.forceUpdate();
+		}
+		if (areNodesSelected) {
+			stage.container().tabIndex = 1;
+			stage.container().focus();
+			stage.container().style.cursor = "grab";
+		}
+		this.triggerSelectedNodesEvent();
 	}
 	getTransformer() {
 		return this.tr;
 	}
+	getHoverTransformer() {
+		return this.trHover;
+	}
 	setSelectedNodes(nodes) {
 		this.tr.setNodes(nodes);
 		const nodesSelected = nodes.length;
 		if (nodesSelected > 1 && !this.config.transformations.multipleSelection.enabled || nodesSelected === 1 && !this.config.transformations.singleSelection.enabled) this.tr.enabledAnchors([]);
 		if (nodesSelected > 1 && this.config.transformations.multipleSelection.enabled || nodesSelected === 1 && this.config.transformations.singleSelection.enabled) this.tr.enabledAnchors(this.defaultEnabledAnchors);
 		if (nodesSelected === 1) {
-			this.tr.setAttrs({ ...nodes[0].getTransformerProperties() });
+			this.tr.setAttrs({
+				...this.config.transformer,
+				...nodes[0].getTransformerProperties()
+			});
+			this.tr.forceUpdate();
+		} else if (nodesSelected > 1) {
+			this.tr.setAttrs({ ...this.config.transformer });
 			this.tr.forceUpdate();
 		}
 		this.triggerSelectedNodesEvent();
@@ -16467,6 +16629,14 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		this.getLayer()?.hide();
 		this.enabled = false;
 	}
+	getContextMenuPlugin() {
+		const contextMenuPlugin = this.instance.getPlugin("contextMenu");
+		return contextMenuPlugin;
+	}
+	getSnappingPlugin() {
+		const snappingPlugin = this.instance.getPlugin("nodesSnapping");
+		return snappingPlugin;
+	}
 };
 
 //#endregion
@@ -16538,11 +16708,8 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 				try {
 					const continueToPaste = await this.readClipboardData();
 					if (continueToPaste) {
-						const position = this.instance.getStage().getPointerPosition();
-						if (position) {
-							this.state = COPY_PASTE_NODES_PLUGIN_STATE.PASTING;
-							this.handlePaste(position);
-						}
+						this.state = COPY_PASTE_NODES_PLUGIN_STATE.PASTING;
+						this.handlePaste();
 					}
 				} catch (ex) {
 					this.instance.emitEvent("onPaste", ex);
@@ -16551,7 +16718,7 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 					const items = await navigator.clipboard.read();
 					if (items && items.length === 1) {
 						const item = items[0];
-						const position = this.instance.getStage().getPointerPosition();
+						const position = this.instance.getStage().getRelativePointerPosition();
 						if (position) this.instance.emitEvent("onPasteExternal", {
 							position,
 							item
@@ -16584,9 +16751,9 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 			if (child.props.children) this.recursivelyUpdateKeys(child.props.children);
 		}
 	}
-	handlePaste(position) {
+	handlePaste() {
 		if (this.toPaste) {
-			const { mousePoint, container } = this.instance.getMousePointer(position);
+			const { mousePoint, container } = this.instance.getMousePointer();
 			for (const element of Object.keys(this.toPaste.weave)) {
 				const node = this.toPaste.weave[element];
 				if (node.props.children) this.recursivelyUpdateKeys(node.props.children);
@@ -16596,7 +16763,7 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 				node.props.id = newNodeId;
 				node.props.x = mousePoint.x + (node.props.x - this.toPaste.weaveMinPoint.x);
 				node.props.y = mousePoint.y + (node.props.y - this.toPaste.weaveMinPoint.y);
-				this.instance.addNode(node, container?.getAttr("id"));
+				this.instance.addNode(node, container?.getAttrs().id);
 				this.instance.emitEvent("onPaste");
 				this.instance.emitEvent("onPaste", void 0);
 			}
@@ -16636,10 +16803,10 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 	async copy() {
 		await this.performCopy();
 	}
-	async paste(position) {
+	async paste() {
 		try {
 			const continueToPaste = await this.readClipboardData();
-			if (continueToPaste) this.handlePaste(position);
+			if (continueToPaste) this.handlePaste();
 		} catch (ex) {
 			this.instance.emitEvent("onPaste", ex);
 		}
@@ -16647,6 +16814,7 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 			const items = await navigator.clipboard.read();
 			if (items && items.length === 1) {
 				const item = items[0];
+				const position = this.instance.getStage().getRelativePointerPosition();
 				if (position) this.instance.emitEvent("onPasteExternal", {
 					position,
 					item
@@ -16705,6 +16873,7 @@ const augmentKonvaNodeClass = (config) => {
 	konva.default.Node.prototype.triggerCrop = function() {};
 	konva.default.Node.prototype.closeCrop = function() {};
 	konva.default.Node.prototype.resetCrop = function() {};
+	konva.default.Node.prototype.dblClick = function() {};
 };
 var WeaveNode = class {
 	register(instance) {
@@ -16721,7 +16890,6 @@ var WeaveNode = class {
 	}
 	getSelectionPlugin() {
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
-		if (!selectionPlugin) throw new Error("WeaveNodesSelectionPlugin plugin not found");
 		return selectionPlugin;
 	}
 	isSelecting() {
@@ -16742,9 +16910,8 @@ var WeaveNode = class {
 	}
 	isNodeSelected(ele) {
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
-		let selected = false;
-		if (selectionPlugin && selectionPlugin.getSelectedNodes().length === 1 && selectionPlugin.getSelectedNodes()[0].getAttrs().id === ele.getAttrs().id) selected = true;
-		return selected;
+		if (selectionPlugin?.getSelectedNodes().map((node) => node.getAttrs().id).includes(ele.getAttrs().id)) return true;
+		return false;
 	}
 	scaleReset(node) {
 		node.width(Math.max(5, node.width() * node.scaleX()));
@@ -16752,6 +16919,20 @@ var WeaveNode = class {
 		node.scaleX(1);
 		node.scaleY(1);
 	}
+	setHoverState(node) {
+		const selectionPlugin = this.getSelectionPlugin();
+		if (!selectionPlugin) return;
+		if (selectionPlugin.isAreaSelecting()) {
+			this.hideHoverState();
+			return;
+		}
+		selectionPlugin.getHoverTransformer().nodes([node]);
+	}
+	hideHoverState() {
+		const selectionPlugin = this.getSelectionPlugin();
+		if (!selectionPlugin) return;
+		selectionPlugin.getHoverTransformer().nodes([]);
+	}
 	setupDefaultNodeEvents(node) {
 		this.instance.addEventListener("onNodesChange", () => {
 			if (!this.isLocked(node) && this.isSelecting() && this.isNodeSelected(node)) {
@@ -16802,6 +16983,10 @@ var WeaveNode = class {
 			});
 			node.on("dragstart", (e) => {
 				this.didMove = false;
+				if (e.evt?.buttons === 0) {
+					e.target.stopDrag();
+					return;
+				}
 				const stage = this.instance.getStage();
 				const isErasing = this.instance.getActiveAction() === "eraseTool";
 				if (isErasing) {
@@ -16815,6 +17000,10 @@ var WeaveNode = class {
 				}
 			});
 			const handleDragMove = (e) => {
+				if (e.evt?.buttons === 0) {
+					e.target.stopDrag();
+					return;
+				}
 				this.didMove = true;
 				const stage = this.instance.getStage();
 				const isErasing = this.instance.getActiveAction() === "eraseTool";
@@ -16827,7 +17016,7 @@ var WeaveNode = class {
 					e.target.stopDrag();
 					return;
 				}
-				if (this.isSelecting() && this.isNodeSelected(node)) {
+				if (this.isSelecting() && this.isNodeSelected(node) && this.getSelectionPlugin()?.getSelectedNodes().length === 1) {
 					clearContainerTargets(this.instance);
 					const layerToMove = checkIfOverContainer(this.instance, e.target);
 					if (layerToMove) layerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
@@ -16842,7 +17031,7 @@ var WeaveNode = class {
 					return;
 				}
 				this.instance.emitEvent("onDrag", null);
-				if (this.isSelecting() && this.isNodeSelected(node)) {
+				if (this.isSelecting() && this.isNodeSelected(node) && this.getSelectionPlugin()?.getSelectedNodes().length === 1) {
 					clearContainerTargets(this.instance);
 					const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
 					if (nodesSnappingPlugin) nodesSnappingPlugin.cleanupEvaluateGuidelines();
@@ -16851,19 +17040,25 @@ var WeaveNode = class {
 					this.instance.updateNode(this.serialize(node));
 				}
 			});
-			node.on("pointerenter", (e) => {
+			node.on("pointerover", (e) => {
+				e.cancelBubble = true;
+				const stage = this.instance.getStage();
 				const realNode = this.instance.getInstanceRecursive(node);
+				const isTargetable = e.target.getAttrs().isTargetable !== false;
 				const isLocked$1 = realNode.getAttrs().locked ?? false;
-				if (this.isSelecting() && !this.isNodeSelected(realNode) && !this.isPasting()) {
-					const stage = this.instance.getStage();
-					stage.container().style.cursor = !isLocked$1 ? "pointer" : "default";
-					e.cancelBubble = true;
-					return;
+				if (this.isSelecting() && !this.isNodeSelected(realNode) && !this.isPasting() && isLocked$1) {
+					const stage$1 = this.instance.getStage();
+					stage$1.container().style.cursor = "default";
 				}
+				if (this.isSelecting() && !this.isNodeSelected(realNode) && !this.isPasting() && isTargetable && !isLocked$1 && stage.mode() === WEAVE_STAGE_MODE.normal) {
+					const stage$1 = this.instance.getStage();
+					stage$1.container().style.cursor = "pointer";
+					this.setHoverState(realNode);
+				}
+				if (!isTargetable) this.hideHoverState();
 				if (this.isPasting()) {
-					const stage = this.instance.getStage();
-					stage.container().style.cursor = "crosshair";
-					e.cancelBubble = true;
+					const stage$1 = this.instance.getStage();
+					stage$1.container().style.cursor = "crosshair";
 				}
 			});
 		}
@@ -17615,24 +17810,77 @@ var WeaveTargetingManager = class {
 		const intersectedNode = mainLayer.getIntersection(relativeMousePointer);
 		return intersectedNode;
 	}
-	pointIntersectsContainerElement(actualLayer, point) {
+	isBoundingBoxIntersecting(nodeA, nodeB) {
 		const stage = this.instance.getStage();
-		const relativeMousePointer = point ? point : stage.getPointerPosition() ?? {
+		const a = nodeA.getClientRect({ relativeTo: stage });
+		const b = nodeB.getClientRect({ relativeTo: stage });
+		return !(a.x + a.width < b.x || a.x > b.x + b.width || a.y + a.height < b.y || a.y > b.y + b.height);
+	}
+	isNodesBoundingBoxIntersecting(nodes, nodeB) {
+		const stage = this.instance.getStage();
+		const a = this.getBoundingBoxOfNodes(nodes);
+		const b = nodeB.getClientRect({ relativeTo: stage });
+		return !(a.x + a.width < b.x || a.x > b.x + b.width || a.y + a.height < b.y || a.y > b.y + b.height);
+	}
+	getBoundingBoxOfNodes(nodes) {
+		const stage = this.instance.getStage();
+		if (!nodes || nodes.length === 0) return {
 			x: 0,
-			y: 0
+			y: 0,
+			width: 0,
+			height: 0
+		};
+		const rects = nodes.map((node) => node.getClientRect({ relativeTo: stage }));
+		const minX = Math.min(...rects.map((r) => r.x));
+		const minY = Math.min(...rects.map((r) => r.y));
+		const maxX = Math.max(...rects.map((r) => r.x + r.width));
+		const maxY = Math.max(...rects.map((r) => r.y + r.height));
+		return {
+			x: minX,
+			y: minY,
+			width: maxX - minX,
+			height: maxY - minY
 		};
-		const intersections = this.instance.getMainLayer()?.getAllIntersections(relativeMousePointer);
+	}
+	nodeIntersectsContainerElement(node, actualLayer) {
+		const stage = this.instance.getStage();
+		const containers = stage.find(".containerCapable");
+		const intersections = [];
+		if (node instanceof konva.default.Transformer) {
+			const transformerNodes = node.nodes();
+			const containersInSelection = [];
+			for (const actualNode of transformerNodes) if (actualNode.getParent()?.getAttrs().nodeId) {
+				const realParent = stage.findOne(`#${actualNode.getParent()?.getAttrs().nodeId}`);
+				if (realParent) containersInSelection.push(realParent.getAttrs().id ?? "");
+			}
+			const containersInSelectionSet = new Set(containersInSelection);
+			const uniqueContainersInSelection = Array.from(containersInSelectionSet);
+			for (const container of containers) {
+				const intersects = this.isNodesBoundingBoxIntersecting(transformerNodes, container);
+				if (intersects && !uniqueContainersInSelection.includes(container.getAttrs().id ?? "")) intersections.push(container);
+			}
+		} else {
+			let nodeActualContainer = node.getParent();
+			if (nodeActualContainer.getAttrs().nodeId) {
+				const realParent = stage.findOne(`#${nodeActualContainer.getAttrs().nodeId}`);
+				if (realParent) nodeActualContainer = realParent;
+			}
+			for (const container of containers) {
+				const intersects = this.isBoundingBoxIntersecting(node, container);
+				if (intersects && container.getAttrs().id !== node.getAttrs().id) intersections.push(container);
+			}
+		}
 		let intersectedNode = void 0;
-		if (intersections) for (const node of intersections) {
-			if (node.getAttrs().nodeId) {
-				const parent = stage.findOne(`#${node.getAttrs().nodeId}`);
+		for (const node$1 of intersections) {
+			if (node$1.getAttrs().nodeId) {
+				const parent = stage.findOne(`#${node$1.getAttrs().nodeId}`);
 				if (!parent) continue;
 				const resolvedNode = this.resolveNode(parent);
-				if (resolvedNode && resolvedNode.getAttrs().containerId && resolvedNode.getAttrs().id !== actualLayer?.getAttrs().id) intersectedNode = parent;
+				if (resolvedNode && resolvedNode.getAttrs().id !== actualLayer?.getAttrs().id) intersectedNode = parent;
 				continue;
 			}
-			if (node.getAttrs().containerId && node.getAttrs().id !== actualLayer?.getAttrs().id) {
-				intersectedNode = node;
+			if (node$1.getAttrs().id !== actualLayer?.getAttrs().id) {
+				intersectedNode = node$1;
 				continue;
 			}
 		}
@@ -17642,7 +17890,7 @@ var WeaveTargetingManager = class {
 		this.logger.debug({ point }, "getMousePointer");
 		const stage = this.instance.getStage();
 		const mainLayer = this.instance.getMainLayer();
-		let relativeMousePointer = point ? point : stage.getPointerPosition() ?? {
+		let relativeMousePointer = point ? point : mainLayer?.getRelativePointerPosition() ?? {
 			x: 0,
 			y: 0
 		};
@@ -17650,18 +17898,19 @@ var WeaveTargetingManager = class {
 		let container = mainLayer;
 		const nodesSelection = this.instance.getPlugin("nodesSelection");
 		if (nodesSelection) nodesSelection.disable();
-		const intersectedNode = stage.getIntersection(relativeMousePointer);
+		const dummyRect = new konva.default.Rect({
+			width: 10,
+			height: 10,
+			x: relativeMousePointer.x,
+			y: relativeMousePointer.y
+		});
+		mainLayer?.add(dummyRect);
+		const intersectedNode = this.nodeIntersectsContainerElement(dummyRect);
 		if (intersectedNode) {
-			const node = this.instance.getInstanceRecursive(intersectedNode, ["group"]);
-			let nodeParent = null;
-			if (node.getParent()) nodeParent = this.instance.getInstanceRecursive(node.getParent(), ["group"]);
-			if (node && node instanceof konva.default.Group && node.getAttrs().containerId) {
-				measureContainer = node.findOne(`#${node.getAttrs().containerId}`);
-				container = node;
-			}
-			if (nodeParent && nodeParent instanceof konva.default.Group && nodeParent.getAttrs().containerId) {
-				measureContainer = nodeParent.findOne(`#${nodeParent.getAttrs().containerId}`);
-				container = nodeParent;
+			const containerOfNode = stage.findOne(`#${intersectedNode.getAttrs().containerId}`);
+			if (containerOfNode) {
+				container = intersectedNode;
+				measureContainer = containerOfNode;
 			}
 		}
 		if (container?.getAttrs().nodeType !== "layer") relativeMousePointer = measureContainer?.getRelativePointerPosition() ?? relativeMousePointer;
@@ -17670,6 +17919,7 @@ var WeaveTargetingManager = class {
 			y: 0
 		};
 		if (nodesSelection) nodesSelection.enable();
+		dummyRect.destroy();
 		return {
 			mousePoint: relativeMousePointer,
 			container,
@@ -18398,7 +18648,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.38.0";
+var version = "0.39.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -18470,6 +18720,10 @@ var WeaveStageManager = class {
 		const stage = this.getStage();
 		return stage.findOne(`#${__inditextech_weave_types.WEAVE_NODE_LAYER_ID}`);
 	}
+	getSelectionLayer() {
+		const stage = this.getStage();
+		return stage.findOne(`#${WEAVE_NODES_SELECTION_LAYER_ID}`);
+	}
 	getUtilityLayer() {
 		const stage = this.getStage();
 		return stage.findOne(`#${__inditextech_weave_types.WEAVE_UTILITY_LAYER_ID}`);
@@ -18845,6 +19099,9 @@ var Weave = class {
 	getMainLayer() {
 		return this.stageManager.getMainLayer();
 	}
+	getSelectionLayer() {
+		return this.stageManager.getSelectionLayer();
+	}
 	getUtilityLayer() {
 		return this.stageManager.getUtilityLayer();
 	}
@@ -18994,8 +19251,8 @@ var Weave = class {
 	pointIntersectsElement(point) {
 		return this.targetingManager.pointIntersectsElement(point);
 	}
-	pointIntersectsContainerElement(actualLayer, point) {
-		return this.targetingManager.pointIntersectsContainerElement(actualLayer, point);
+	nodeIntersectsContainerElement(node, actualLayer) {
+		return this.targetingManager.nodeIntersectsContainerElement(node, actualLayer);
 	}
 	getMousePointer(point) {
 		return this.targetingManager.getMousePointer(point);
@@ -19008,8 +19265,7 @@ var Weave = class {
 		if (selectionPlugin) {
 			const stage = this.getStage();
 			const instanceNodes = nodesIds.map((nodeId) => {
-				let nodeInstance = stage.findOne(`#${nodeId}`);
-				if (nodeInstance && nodeInstance.getAttrs().nodeType === "frame") nodeInstance = stage.findOne(`#${nodeId}-selector-area`);
+				const nodeInstance = stage.findOne(`#${nodeId}`);
 				return nodeInstance;
 			});
 			selectionPlugin.setSelectedNodes(instanceNodes);
@@ -19116,10 +19372,6 @@ var Weave = class {
 	}
 };
 
-//#endregion
-//#region src/nodes/stage/constants.ts
-const WEAVE_STAGE_NODE_TYPE = "stage";
-
 //#endregion
 //#region src/nodes/stage/stage.ts
 var WeaveStageNode = class extends WeaveNode {
@@ -19139,6 +19391,10 @@ var WeaveStageNode = class extends WeaveNode {
 		stage.container().addEventListener("blur", () => {
 			this.stageFocused = false;
 		});
+		konva.default.Stage.prototype.mode = function(mode) {
+			if (typeof mode !== "undefined") this._mode = mode;
+			return this._mode;
+		};
 		konva.default.Stage.prototype.allowActions = function(actions) {
 			if (typeof actions !== "undefined") this._allowActions = actions;
 			return this._allowActions;
@@ -19151,6 +19407,7 @@ var WeaveStageNode = class extends WeaveNode {
 			if (typeof allowSelection !== "undefined") this._allowSelection = allowSelection;
 			return this._allowSelection;
 		};
+		stage.mode(WEAVE_STAGE_MODE.normal);
 		stage.on("pointermove", (e) => {
 			if (stage.allowSelection() && !stage.allowActions().includes(this.instance.getActiveAction() ?? "") && !stage.allowSelectNodes().includes(e.target.getAttrs()?.nodeType ?? "")) {
 				const stage$1 = this.instance.getStage();
@@ -19161,6 +19418,13 @@ var WeaveStageNode = class extends WeaveNode {
 				stage$1.container().style.cursor = "default";
 			}
 		});
+		stage.on("pointerover", (e) => {
+			if (e.target !== stage && !e.target.getAttrs().nodeId) return;
+			const parent = e.target.getParent();
+			if (parent && parent instanceof konva.default.Transformer) return;
+			this.hideHoverState();
+			stage.container().style.cursor = "default";
+		});
 		stage.on("pointerdown", (e) => {
 			if (e.evt.button === 1) this.wheelMousePressed = true;
 		});
@@ -19229,6 +19493,7 @@ var WeaveGroupNode = class extends WeaveNode {
 	onRender(props) {
 		const group = new konva.default.Group({
 			...props,
+			isContainerPrincipal: true,
 			name: "node"
 		});
 		this.setupDefaultNodeAugmentation(group);
@@ -19445,6 +19710,8 @@ const TEXT_LAYOUT = {
 var WeaveTextNode = class extends WeaveNode {
 	nodeType = WEAVE_TEXT_NODE_TYPE;
 	editing = false;
+	textAreaSuperContainer = null;
+	textAreaContainer = null;
 	textArea = null;
 	constructor(params) {
 		super();
@@ -19506,8 +19773,7 @@ var WeaveTextNode = class extends WeaveNode {
 				}
 			}
 		});
-		text.on("pointerdblclick", (e) => {
-			e.cancelBubble = true;
+		text.dblClick = () => {
 			if (this.editing) return;
 			if (!(this.isSelecting() && this.isNodeSelected(text))) return;
 			const stage = this.instance.getStage();
@@ -19517,7 +19783,7 @@ var WeaveTextNode = class extends WeaveNode {
 				const onlyTextElements = elements.filter((ele) => ele.getAttrs().nodeType === WEAVE_TEXT_NODE_TYPE);
 				if (onlyTextElements.length > 0) this.triggerEditMode(onlyTextElements[0]);
 			}
-		});
+		};
 		text.on("transform", (e) => {
 			if (this.isSelecting() && this.isNodeSelected(text)) {
 				text.setAttrs({
@@ -19583,19 +19849,20 @@ var WeaveTextNode = class extends WeaveNode {
 		if (!this.editing) return;
 		this.updateTextAreaDOM(textNode);
 	};
-	textAreaDomResize(textAreaContainer, textArea, textNode) {
+	textAreaDomResize(textNode) {
+		if (!this.textArea || !this.textAreaContainer) return;
 		if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL) {
-			const { width: textAreaWidth } = this.textRenderedSize(textArea.value, textNode);
-			textAreaContainer.style.width = textAreaWidth * textNode.getAbsoluteScale().x + 2 + "px";
+			const { width: textAreaWidth } = this.textRenderedSize(this.textArea.value, textNode);
+			this.textAreaContainer.style.width = textAreaWidth * textNode.getAbsoluteScale().x + 2 + "px";
 		}
-		if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT) textAreaContainer.style.height = "auto";
+		if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT) this.textAreaContainer.style.height = "auto";
 		if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT) {
-			textAreaContainer.style.height = "auto";
-			textAreaContainer.style.height = textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().y + "px";
+			this.textAreaContainer.style.height = "auto";
+			this.textAreaContainer.style.height = this.textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().y + "px";
 		}
-		textArea.style.height = "auto";
-		textArea.style.height = textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
-		textArea.rows = textArea.value.split("\n").length;
+		this.textArea.style.height = "auto";
+		this.textArea.style.height = this.textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
+		this.textArea.rows = this.textArea.value.split("\n").length;
 	}
 	measureMultilineText(textNode) {
 		return () => {
@@ -19616,73 +19883,74 @@ var WeaveTextNode = class extends WeaveNode {
 			height
 		};
 	}
-	mimicTextNode(textNode, textArea) {
-		textArea.style.fontSize = textNode.fontSize() * textNode.getAbsoluteScale().x + "px";
-		textArea.rows = textNode.text().split("\n").length;
-		textArea.style.letterSpacing = `${textNode.letterSpacing()}`;
-		textArea.style.opacity = `${textNode.getAttrs().opacity}`;
-		textArea.style.lineHeight = `${textNode.lineHeight()}`;
-		textArea.style.fontFamily = textNode.fontFamily();
+	mimicTextNode(textNode) {
+		if (!this.textArea) return;
+		this.textArea.style.fontSize = textNode.fontSize() * textNode.getAbsoluteScale().x + "px";
+		this.textArea.rows = textNode.text().split("\n").length;
+		this.textArea.style.letterSpacing = `${textNode.letterSpacing()}`;
+		this.textArea.style.opacity = `${textNode.getAttrs().opacity}`;
+		this.textArea.style.lineHeight = `${textNode.lineHeight()}`;
+		this.textArea.style.fontFamily = textNode.fontFamily();
 		let fontWeight = "normal";
 		let fontStyle = "normal";
 		if ((textNode.fontStyle() ?? "normal").indexOf("bold") !== -1) fontWeight = "bold";
 		if ((textNode.fontStyle() ?? "normal").indexOf("italic") !== -1) fontStyle = "italic";
-		textArea.style.fontWeight = fontWeight;
-		textArea.style.backgroundColor = "transparent";
-		textArea.style.fontStyle = fontStyle;
-		textArea.style.fontVariant = textNode.fontVariant();
-		textArea.style.textDecoration = textNode.textDecoration();
-		textArea.style.textAlign = textNode.align();
-		textArea.style.color = `${textNode.fill()}`;
+		this.textArea.style.fontWeight = fontWeight;
+		this.textArea.style.backgroundColor = "transparent";
+		this.textArea.style.fontStyle = fontStyle;
+		this.textArea.style.fontVariant = textNode.fontVariant();
+		this.textArea.style.textDecoration = textNode.textDecoration();
+		this.textArea.style.textAlign = textNode.align();
+		this.textArea.style.color = `${textNode.fill()}`;
 	}
 	createTextAreaDOM(textNode, position) {
 		const stage = this.instance.getStage();
-		const textAreaSuperContainer = document.createElement("div");
-		textAreaSuperContainer.id = `${textNode.id()}_supercontainer`;
-		textAreaSuperContainer.style.position = "absolute";
-		textAreaSuperContainer.style.top = "0px";
-		textAreaSuperContainer.style.left = "0px";
-		textAreaSuperContainer.style.bottom = "0px";
-		textAreaSuperContainer.style.right = "0px";
-		textAreaSuperContainer.style.overflow = "hidden";
-		textAreaSuperContainer.style.pointerEvents = "none";
-		const textAreaContainer = document.createElement("div");
-		textAreaContainer.id = `${textNode.id()}_container`;
+		this.textAreaSuperContainer = document.createElement("div");
+		this.textAreaSuperContainer.id = `${textNode.id()}_supercontainer`;
+		this.textAreaSuperContainer.style.position = "absolute";
+		this.textAreaSuperContainer.style.top = "0px";
+		this.textAreaSuperContainer.style.left = "0px";
+		this.textAreaSuperContainer.style.bottom = "0px";
+		this.textAreaSuperContainer.style.right = "0px";
+		this.textAreaSuperContainer.style.overflow = "hidden";
+		this.textAreaSuperContainer.style.pointerEvents = "none";
+		this.textAreaContainer = document.createElement("div");
+		this.textAreaContainer.id = `${textNode.id()}_container`;
 		this.textArea = document.createElement("textarea");
 		this.textArea.id = textNode.id();
-		textAreaContainer.appendChild(this.textArea);
-		textAreaSuperContainer.appendChild(textAreaContainer);
-		stage.container().appendChild(textAreaSuperContainer);
-		textAreaContainer.style.pointerEvents = "auto";
-		textAreaContainer.style.backgroundColor = "transparent";
+		this.textAreaContainer.appendChild(this.textArea);
+		this.textAreaSuperContainer.appendChild(this.textAreaContainer);
+		stage.container().appendChild(this.textAreaSuperContainer);
+		this.textAreaContainer.style.pointerEvents = "auto";
+		this.textAreaContainer.style.backgroundColor = "transparent";
 		this.textArea.style.pointerEvents = "auto";
 		this.instance.addEventListener("onZoomChange", this.onZoomChangeHandler(textNode).bind(this));
 		this.instance.addEventListener("onStageMove", this.onStageMoveHandler(textNode).bind(this));
 		window.weaveTextEditing[textNode.id()] = "editing";
 		this.textArea.value = textNode.text();
 		this.textArea.id = textNode.id();
-		textAreaContainer.style.overflow = "hidden";
-		textAreaContainer.style.display = "flex";
-		textAreaContainer.style.justifyContent = "start";
-		if (textNode.getAttrs().verticalAlign === "top") textAreaContainer.style.alignItems = "start";
-		if (textNode.getAttrs().verticalAlign === "middle") textAreaContainer.style.alignItems = "center";
-		if (textNode.getAttrs().verticalAlign === "bottom") textAreaContainer.style.alignItems = "end";
-		textAreaContainer.style.position = "absolute";
-		textAreaContainer.style.top = position.y + "px";
-		textAreaContainer.style.left = position.x + "px";
+		this.textAreaContainer.style.overflow = "hidden";
+		this.textAreaContainer.style.display = "flex";
+		this.textAreaContainer.style.justifyContent = "start";
+		if (textNode.getAttrs().verticalAlign === "top") this.textAreaContainer.style.alignItems = "start";
+		if (textNode.getAttrs().verticalAlign === "middle") this.textAreaContainer.style.alignItems = "center";
+		if (textNode.getAttrs().verticalAlign === "bottom") this.textAreaContainer.style.alignItems = "end";
+		this.textAreaContainer.style.position = "absolute";
+		this.textAreaContainer.style.top = position.y + "px";
+		this.textAreaContainer.style.left = position.x + "px";
 		if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL) {
-			textAreaContainer.style.width = this.textArea.scrollWidth + "px";
-			textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + 2 + "px";
+			this.textAreaContainer.style.width = this.textArea.scrollWidth + "px";
+			this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + 2 + "px";
 		}
 		if (textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT) {
-			textAreaContainer.style.width = (textNode.width() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
-			textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + 2 + "px";
+			this.textAreaContainer.style.width = (textNode.width() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
+			this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + 2 + "px";
 		}
 		if (textNode.getAttrs().layout === TEXT_LAYOUT.FIXED) {
-			textAreaContainer.style.width = (textNode.width() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
-			textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + 2 + "px";
+			this.textAreaContainer.style.width = (textNode.width() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
+			this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + 2 + "px";
 		}
-		textAreaContainer.style.border = "solid 1px #1e40af";
+		this.textAreaContainer.style.border = "solid 1px #1e40af";
 		this.textArea.style.position = "absolute";
 		this.textArea.style.top = "0px";
 		this.textArea.style.left = "0px";
@@ -19700,30 +19968,33 @@ var WeaveTextNode = class extends WeaveNode {
 		this.textArea.style.outline = "none";
 		this.textArea.style.resize = "none";
 		this.textArea.style.backgroundColor = "transparent";
-		textAreaContainer.style.transformOrigin = "left top";
-		this.mimicTextNode(textNode, this.textArea);
+		this.textAreaContainer.style.transformOrigin = "left top";
+		this.mimicTextNode(textNode);
 		this.textArea.onfocus = () => {
-			this.textAreaDomResize(textAreaContainer, this.textArea, textNode);
+			this.textAreaDomResize(textNode);
 		};
 		this.textArea.onkeydown = () => {
-			this.textAreaDomResize(textAreaContainer, this.textArea, textNode);
+			this.textAreaDomResize(textNode);
 		};
 		this.textArea.onkeyup = () => {
-			this.textAreaDomResize(textAreaContainer, this.textArea, textNode);
+			this.textAreaDomResize(textNode);
 		};
 		this.textArea.onpaste = () => {
-			this.textAreaDomResize(textAreaContainer, this.textArea, textNode);
+			this.textAreaDomResize(textNode);
 		};
 		this.textArea.oninput = () => {
-			this.textAreaDomResize(textAreaContainer, this.textArea, textNode);
+			this.textAreaDomResize(textNode);
 		};
-		textAreaSuperContainer.addEventListener("scroll", () => {
-			textAreaSuperContainer.scrollTop = 0;
-			textAreaSuperContainer.scrollLeft = 0;
+		this.textAreaSuperContainer.addEventListener("scroll", () => {
+			if (this.textAreaSuperContainer) {
+				this.textAreaSuperContainer.scrollTop = 0;
+				this.textAreaSuperContainer.scrollLeft = 0;
+			}
 		});
-		textAreaContainer.addEventListener("scroll", () => {
-			textAreaContainer.scrollTop = 0;
-			textAreaContainer.scrollLeft = 0;
+		this.textAreaContainer.addEventListener("scroll", () => {
+			if (!this.textAreaContainer) return;
+			this.textAreaContainer.scrollTop = 0;
+			this.textAreaContainer.scrollLeft = 0;
 		});
 		this.textArea.addEventListener("scroll", () => {
 			if (!this.textArea) return;
@@ -19733,7 +20004,7 @@ var WeaveTextNode = class extends WeaveNode {
 		const rotation = textNode.getAbsoluteRotation();
 		if (rotation) {
 			const transform$1 = "rotate(" + rotation + "deg)";
-			textAreaContainer.style.transform = transform$1;
+			this.textAreaContainer.style.transform = transform$1;
 		}
 		const measures = textNode.measureSize(textNode.text());
 		const px = 0 * stage.scaleX();
@@ -19750,6 +20021,7 @@ var WeaveTextNode = class extends WeaveNode {
 					textNode.width(textAreaWidth + 3.2);
 				}
 				if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL) textNode.height((this.textArea.scrollHeight + 1.6) * (1 / textNode.getAbsoluteScale().x));
+				console.log({ text: this.textArea.value });
 				textNode.text(this.textArea.value);
 				this.removeTextAreaDOM(textNode);
 				this.instance.removeEventListener("onZoomChange", this.onZoomChangeHandler(textNode).bind(this));
@@ -19763,10 +20035,12 @@ var WeaveTextNode = class extends WeaveNode {
 			textNode.text(this.textArea.value);
 			if (this.textArea && textNode) {
 				if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT) {
-					textAreaContainer.style.height = "auto";
-					textAreaContainer.style.height = this.textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
+					if (this.textAreaContainer) {
+						this.textAreaContainer.style.height = "auto";
+						this.textAreaContainer.style.height = this.textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
+					}
 				}
-				this.textAreaDomResize(textAreaContainer, this.textArea, textNode);
+				this.textAreaDomResize(textNode);
 			}
 		};
 		this.textArea.addEventListener("keydown", handleKeyDown);
@@ -19795,52 +20069,47 @@ var WeaveTextNode = class extends WeaveNode {
 		this.editing = true;
 	}
 	updateTextAreaDOM(textNode) {
-		const textAreaContainer = document.getElementById(`${textNode.id()}_container`);
-		const textArea = document.getElementById(textNode.id());
-		if (!textAreaContainer || !textArea) return;
+		if (!this.textAreaContainer || !this.textArea) return;
 		const stage = this.instance.getStage();
 		const textPosition = textNode.getClientRect();
 		const position = {
 			x: textPosition.x,
 			y: textPosition.y
 		};
-		textAreaContainer.style.top = position.y + "px";
-		textAreaContainer.style.left = position.x + "px";
-		if (textNode.getAttrs().verticalAlign === "top") textAreaContainer.style.alignItems = "start";
-		if (textNode.getAttrs().verticalAlign === "middle") textAreaContainer.style.alignItems = "center";
-		if (textNode.getAttrs().verticalAlign === "bottom") textAreaContainer.style.alignItems = "end";
-		this.mimicTextNode(textNode, textArea);
-		this.textAreaDomResize(textAreaContainer, textArea, textNode);
-		this.textAreaDomResize(textAreaContainer, textArea, textNode);
+		this.textAreaContainer.style.top = position.y + "px";
+		this.textAreaContainer.style.left = position.x + "px";
+		if (textNode.getAttrs().verticalAlign === "top") this.textAreaContainer.style.alignItems = "start";
+		if (textNode.getAttrs().verticalAlign === "middle") this.textAreaContainer.style.alignItems = "center";
+		if (textNode.getAttrs().verticalAlign === "bottom") this.textAreaContainer.style.alignItems = "end";
+		this.mimicTextNode(textNode);
+		this.textAreaDomResize(textNode);
+		this.textAreaDomResize(textNode);
 		const rotation = textNode.getAbsoluteRotation();
 		if (rotation) {
 			const transform$1 = "rotate(" + rotation + "deg)";
-			textAreaContainer.style.transform = transform$1;
+			this.textAreaContainer.style.transform = transform$1;
 		}
 		const px = 0;
 		const py = -3 * stage.scaleY();
 		let transform = "";
 		transform += "translateX(" + px + "px)";
 		transform += "translateY(" + py + "px)";
-		textArea.style.transform = transform;
+		this.textArea.style.transform = transform;
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
 		if (selectionPlugin) {
 			const tr = selectionPlugin.getTransformer();
 			this.instance.disablePlugin("nodesSelection");
 			tr.hide();
 		}
+		console.log(`Updating text area for text node ${textNode.id()}`, this.editing);
 		if (this.editing) textNode.visible(false);
 		else textNode.visible(true);
 	}
 	removeTextAreaDOM(textNode) {
+		this.editing = false;
 		const stage = this.instance.getStage();
 		delete window.weaveTextEditing[textNode.id()];
-		const textAreaSuperContainer = document.getElementById(`${textNode.id()}_supercontainer`);
-		if (textAreaSuperContainer) textAreaSuperContainer.remove();
-		const textAreaContainer = document.getElementById(`${textNode.id()}_container`);
-		if (textAreaContainer) textAreaContainer.remove();
-		const textArea = document.getElementById(textNode.id());
-		if (textArea) textArea.remove();
+		if (this.textAreaSuperContainer) this.textAreaSuperContainer.remove();
 		textNode.visible(true);
 		this.updateNode(textNode);
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
@@ -19853,7 +20122,6 @@ var WeaveTextNode = class extends WeaveNode {
 			}
 			this.instance.triggerAction("selectionTool");
 		}
-		this.editing = false;
 		stage.container().tabIndex = 1;
 		stage.container().click();
 		stage.container().focus();
@@ -19925,7 +20193,7 @@ var WeaveImageToolAction = class extends WeaveAction {
 		this.instance.addEventListener("onStageDrop", (e) => {
 			if (window.weaveDragImageURL) {
 				this.instance.getStage().setPointersPositions(e);
-				const position = this.instance.getStage().getPointerPosition();
+				const position = this.instance.getStage().getRelativePointerPosition();
 				this.instance.triggerAction("imageTool", {
 					imageURL: window.weaveDragImageURL,
 					position
@@ -20001,8 +20269,8 @@ var WeaveImageToolAction = class extends WeaveAction {
 		stage.container().style.cursor = "crosshair";
 		stage.container().focus();
 		if (position) {
-			this.handleAdding(position);
 			this.setState(IMAGE_TOOL_STATE.ADDING);
+			this.handleAdding(position);
 			return;
 		}
 		if (this.imageId) {
@@ -20247,6 +20515,14 @@ var WeaveImageCrop = class WeaveImageCrop {
 			});
 			this.drawGridLines(cropRect$1.x, cropRect$1.y, cropRect$1.width, cropRect$1.height);
 		};
+		this.instance.getStage().on("pointerdown", (e) => {
+			const isStage = e.target instanceof konva.default.Stage;
+			const isContainerEmptyArea = typeof e.target.getAttrs().isContainerPrincipal !== "undefined" && !e.target.getAttrs().isContainerPrincipal;
+			if (isStage || isContainerEmptyArea) this.cancel();
+		});
+		this.instance.addEventListener("onActiveActionChange", (activeAction) => {
+			if (typeof activeAction !== "undefined") this.cancel();
+		});
 		this.cropRect.on("dragstart", (e) => {
 			this.instance.emitEvent("onDrag", e.target);
 		});
@@ -20281,6 +20557,7 @@ var WeaveImageCrop = class WeaveImageCrop {
 		if (!["Enter", "Escape"].includes(e.key)) return;
 		this.image.setAttrs({ cropping: false });
 		if (e.key === "Enter") this.handleClipEnd();
+		const stage = this.instance.getStage();
 		this.onClose();
 		const utilityLayer = this.instance.getUtilityLayer();
 		utilityLayer?.destroyChildren();
@@ -20301,6 +20578,8 @@ var WeaveImageCrop = class WeaveImageCrop {
 				selectionTransformer.forceUpdate();
 			}, 0);
 		}
+		stage.mode(WEAVE_STAGE_MODE.normal);
+		this.instance.emitEvent("onImageCropEnd", { instance: this.image });
 	}
 	drawGridLines(x, y, width, height) {
 		if (!this.image.getAttrs().cropping) return;
@@ -20453,6 +20732,12 @@ var WeaveImageNode = class extends WeaveNode {
 	constructor(params) {
 		super();
 		const { config } = params ?? {};
+		this.tapStart = {
+			x: 0,
+			y: 0,
+			time: 0
+		};
+		this.lastTapTime = 0;
 		this.config = {
 			crossOrigin: config?.crossOrigin ?? "anonymous",
 			transform: {
@@ -20466,17 +20751,40 @@ var WeaveImageNode = class extends WeaveNode {
 	}
 	triggerCrop(imageNode) {
 		const stage = this.instance.getStage();
+		stage.mode(WEAVE_STAGE_MODE.cropping);
 		const image = stage.findOne(`#${imageNode.getAttrs().id}`);
 		const internalImage = image?.findOne(`#${image.getAttrs().id}-image`);
 		const cropGroup = image?.findOne(`#${image.getAttrs().id}-cropGroup`);
 		if (!image || !internalImage || !cropGroup) return;
 		this.imageCrop = new WeaveImageCrop(this.instance, this, image, internalImage, cropGroup);
 		this.imageCrop.show(() => {
+			stage.mode(WEAVE_STAGE_MODE.normal);
 			this.instance.emitEvent("onImageCropEnd", { instance: image });
 			this.imageCrop = null;
 		});
 		this.instance.emitEvent("onImageCropStart", { instance: image });
 	}
+	closeCrop = (imageNode, type) => {
+		if (!this.imageCrop) return;
+		const stage = this.instance.getStage();
+		stage.mode(WEAVE_STAGE_MODE.normal);
+		if (type === WEAVE_IMAGE_CROP_END_TYPE.ACCEPT) {
+			this.imageCrop.accept();
+			this.instance.emitEvent("onImageCropEnd", { instance: imageNode });
+		}
+		if (type === WEAVE_IMAGE_CROP_END_TYPE.CANCEL) {
+			this.imageCrop.cancel();
+			this.instance.emitEvent("onImageCropEnd", { instance: imageNode });
+		}
+	};
+	resetCrop = (imageNode) => {
+		const internalImage = imageNode.findOne(`#${imageNode.getAttrs().id}-image`);
+		const cropGroup = imageNode.findOne(`#${imageNode.getAttrs().id}-cropGroup`);
+		if (!internalImage || !cropGroup) return;
+		const imageCrop = new WeaveImageCrop(this.instance, this, imageNode, internalImage, cropGroup);
+		imageCrop.unCrop();
+		this.cachedCropInfo[imageNode.getAttrs().id ?? ""] = void 0;
+	};
 	onRender(props) {
 		const imageProperties = props.imageProperties;
 		const imageProps = props;
@@ -20503,23 +20811,10 @@ var WeaveImageNode = class extends WeaveNode {
 			this.cachedCropInfo[image$1.getAttrs().id ?? ""] = void 0;
 		};
 		image.triggerCrop = () => {
-			const stage = this.instance.getStage();
-			const image$1 = stage.findOne(`#${id}`);
-			if (!image$1) return;
-			this.triggerCrop(image$1);
+			this.triggerCrop(image);
 		};
 		image.closeCrop = (type) => {
-			const stage = this.instance.getStage();
-			const image$1 = stage.findOne(`#${id}`);
-			if (!image$1 || !this.imageCrop) return;
-			if (type === WEAVE_IMAGE_CROP_END_TYPE.ACCEPT) {
-				this.imageCrop.accept();
-				this.instance.emitEvent("onImageCropEnd", { instance: image$1 });
-			}
-			if (type === WEAVE_IMAGE_CROP_END_TYPE.CANCEL) {
-				this.imageCrop.cancel();
-				this.instance.emitEvent("onImageCropEnd", { instance: image$1 });
-			}
+			this.closeCrop(image, type);
 		};
 		image.resetCrop = () => {
 			const stage = this.instance.getStage();
@@ -20563,7 +20858,8 @@ var WeaveImageNode = class extends WeaveNode {
 			height: 0,
 			strokeScaleEnabled: true,
 			draggable: false,
-			visible: false
+			visible: false,
+			name: void 0
 		});
 		image.add(internalImage);
 		const cropGroup = new konva.default.Group({
@@ -20576,13 +20872,12 @@ var WeaveImageNode = class extends WeaveNode {
 		});
 		image.add(cropGroup);
 		this.setupDefaultNodeEvents(image);
-		image.on("pointerdblclick", (evt) => {
-			evt.cancelBubble = true;
+		image.dblClick = () => {
 			if (image.getAttrs().cropping ?? false) return;
 			if (!internalImage.getAttr("image")) return;
 			if (!(this.isSelecting() && this.isNodeSelected(image))) return;
 			this.triggerCrop(image);
-		});
+		};
 		const imageActionTool = this.getImageToolAction();
 		const preloadImg = imageActionTool.getPreloadedImage(imageProps.id);
 		if (preloadImg) {
@@ -21039,30 +21334,18 @@ var WeaveFrameNode = class extends WeaveNode {
 		const frame = new konva.default.Group({
 			...frameParams,
 			id,
+			isContainerPrincipal: true,
 			containerId: `${id}-group-internal`,
+			measureContainerId: `${id}-selection-area`,
 			containerOffsetX: 0,
 			containerOffsetY: borderWidth,
 			width: props.frameWidth,
 			height: props.frameHeight,
 			fill: "transparent",
-			draggable: false,
-			clip: void 0
+			draggable: true,
+			clip: void 0,
+			name: "node containerCapable"
 		});
-		frame.getRealClientRect = function(config) {
-			const node = frame.getStage()?.findOne(`#${`${id}-selector-area`}`);
-			const nodeTitle = frame.getStage()?.findOne(`#${`${id}-title`}`);
-			if (!node || !nodeTitle) return {
-				x: 0,
-				y: 0,
-				width: 0,
-				height: 0
-			};
-			const rectContainer = node.getClientRect(config);
-			const rectTitle = nodeTitle.getClientRect(config);
-			rectContainer.y = rectContainer.y - rectTitle.height - titleMargin;
-			rectContainer.height = rectContainer.height + rectTitle.height + titleMargin;
-			return rectContainer;
-		};
 		this.setupDefaultNodeAugmentation(frame);
 		const frameInternalGroup = new konva.default.Group({
 			id: `${id}-selector`,
@@ -21106,117 +21389,15 @@ var WeaveFrameNode = class extends WeaveNode {
 			draggable: false
 		});
 		const textMeasures = text.measureSize(text.getAttrs().text ?? "");
+		const textWidth = textMeasures.width;
 		const textHeight = textMeasures.height;
 		text.y(-textHeight - titleMargin);
+		text.width(textWidth);
 		text.height(textHeight);
 		frameInternalGroup.add(text);
-		const selectorArea = new konva.default.Rect({
-			...frameParams,
-			id: `${id}-selector-area`,
-			name: "node",
-			nodeId: id,
-			containerId: `${id}-group-internal`,
-			x: 0,
-			y: 0,
-			strokeWidth: 0,
-			strokeScaleEnabled: false,
-			width: props.frameWidth,
-			height: props.frameHeight,
-			fill: "transparent",
-			draggable: true
-		});
-		selectorArea.on("dragmove", () => {
-			if (this.isSelecting() && this.isNodeSelected(selectorArea)) {
-				clearContainerTargets(this.instance);
-				frame.setAbsolutePosition(selectorArea.getAbsolutePosition());
-				selectorArea.setAttrs({
-					x: 0,
-					y: 0
-				});
-			}
-		});
-		selectorArea.on("dragend", () => {
-			if (this.isSelecting() && this.isNodeSelected(selectorArea)) {
-				clearContainerTargets(this.instance);
-				frame.setAbsolutePosition(selectorArea.getAbsolutePosition());
-				selectorArea.setAttrs({
-					x: 0,
-					y: 0
-				});
-				this.instance.updateNode(this.serialize(selectorArea));
-			}
-		});
-		selectorArea.getTransformerProperties = () => {
+		frame.getTransformerProperties = () => {
 			return this.config.transform;
 		};
-		selectorArea.updatePosition = (position) => {
-			frame.setAbsolutePosition(position);
-			selectorArea.setAttrs({
-				x: 0,
-				y: 0
-			});
-		};
-		const updateFrame = (e) => {
-			const selectorArea$1 = e.target;
-			const stage = selectorArea$1.getStage();
-			if (!stage) return;
-			const absPos = selectorArea$1.getAbsolutePosition();
-			const absRot = selectorArea$1.getAbsoluteRotation();
-			const scaleX = selectorArea$1.scaleX();
-			const scaleY = selectorArea$1.scaleY();
-			selectorArea$1.x(0);
-			selectorArea$1.y(0);
-			frame.setAbsolutePosition(absPos);
-			frame.rotation(absRot);
-			frame.width(selectorArea$1.width());
-			frame.height(selectorArea$1.height());
-			frameInternalGroup.width(Math.max(5, selectorArea$1.width() * scaleX));
-			frameInternalGroup.height(Math.max(5, selectorArea$1.height() * scaleY));
-			background.width(Math.max(5, selectorArea$1.width() * scaleX));
-			background.height(Math.max(5, selectorArea$1.height() * scaleY));
-			text.width(Math.max(5, selectorArea$1.width() * scaleX));
-			const textMeasures$1 = text.measureSize(text.getAttrs().text ?? "");
-			const textHeight$1 = textMeasures$1.height;
-			text.height(textHeight$1 * scaleY);
-			frameInternal.width(Math.max(5, selectorArea$1.width() * scaleX));
-			frameInternal.height(Math.max(5, selectorArea$1.height() * scaleY));
-		};
-		const handleSelectorAreaTransform = (e) => {
-			updateFrame(e);
-			const node = e.target;
-			const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
-			if (nodesSnappingPlugin && this.isSelecting() && this.isNodeSelected(node)) nodesSnappingPlugin.evaluateGuidelines(e);
-			const clonedSA = selectorArea.clone();
-			const scaleX = clonedSA.scaleX();
-			const scaleY = clonedSA.scaleY();
-			clonedSA.x(0);
-			clonedSA.y(0);
-			clonedSA.width(Math.max(5, clonedSA.width() * scaleX));
-			clonedSA.height(Math.max(5, clonedSA.height() * scaleY));
-			clonedSA.scaleX(1);
-			clonedSA.scaleY(1);
-			e.cancelBubble = true;
-		};
-		selectorArea.on("transformend", (e) => {
-			this.instance.emitEvent("onTransform", e.target);
-		});
-		selectorArea.on("transform", (0, import_lodash.throttle)(handleSelectorAreaTransform, 50));
-		selectorArea.on("transformend", (e) => {
-			this.instance.emitEvent("onTransform", null);
-			const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
-			if (nodesSnappingPlugin) nodesSnappingPlugin.cleanupEvaluateGuidelines();
-			const scaleX = selectorArea.scaleX();
-			const scaleY = selectorArea.scaleY();
-			selectorArea.x(0);
-			selectorArea.y(0);
-			selectorArea.width(Math.max(5, selectorArea.width() * scaleX));
-			selectorArea.height(Math.max(5, selectorArea.height() * scaleY));
-			selectorArea.scaleX(1);
-			selectorArea.scaleY(1);
-			updateFrame(e);
-			this.instance.updateNode(this.serialize(selectorArea));
-		});
-		frameInternalGroup.add(selectorArea);
 		const frameInternal = new konva.default.Group({
 			id: `${id}-group-internal`,
 			nodeId: id,
@@ -21230,13 +21411,60 @@ var WeaveFrameNode = class extends WeaveNode {
 				const height = (frameInternal.height() + borderWidth) * frameInternal.scaleY();
 				ctx.rect(-(borderWidth / 2) * frameInternal.scaleX(), -(borderWidth / 2) * frameInternal.scaleY(), width, height);
 			},
+			listening: true,
+			draggable: false,
+			isTargetable: false
+		});
+		frame.add(frameInternal);
+		const selectionArea = new konva.default.Rect({
+			...frameParams,
+			x: 0,
+			y: 0,
+			width: props.frameWidth,
+			height: props.frameHeight,
+			hitFunc: function(ctx, shape) {
+				ctx.beginPath();
+				ctx.rect(0, -textHeight - titleMargin, textWidth, textHeight);
+				ctx.fillStrokeShape(shape);
+			},
+			fill: "transparent",
+			id: `${id}-selection-area`,
+			listening: true,
+			draggable: true,
+			isContainerPrincipal: void 0,
+			name: void 0
+		});
+		const containerArea = new konva.default.Rect({
+			x: 0,
+			y: 0,
+			width: props.frameWidth,
+			height: props.frameHeight,
+			hitFunc: function(ctx, shape) {
+				ctx.beginPath();
+				ctx.rect(0, 0, props.frameWidth, props.frameHeight);
+				ctx.fillStrokeShape(shape);
+			},
+			fill: "transparent",
+			id: `${id}-container-area`,
+			listening: false,
 			draggable: false
 		});
-		frameInternalGroup.add(frameInternal);
+		frame.getClientRect = (config) => {
+			return containerArea.getClientRect(config);
+		};
+		frame.add(containerArea);
+		frame.add(selectionArea);
+		selectionArea.moveToTop();
+		frameInternal.moveToTop();
+		this.setupDefaultNodeEvents(selectionArea);
+		selectionArea.off("transformstart");
+		selectionArea.off("transform");
+		selectionArea.off("transformend");
+		selectionArea.off("dragstart");
+		selectionArea.off("dragmove");
+		selectionArea.off("dragend");
 		this.setupDefaultNodeEvents(frame);
-		frame.off("dragstart");
-		frame.off("dragmove");
-		frame.off("dragend");
+		frame.off("pointerover");
 		frame.on(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, () => {
 			background.setAttrs({
 				stroke: onTargetLeaveBorderColor,
@@ -21254,59 +21482,30 @@ var WeaveFrameNode = class extends WeaveNode {
 		return frame;
 	}
 	onUpdate(nodeInstance, nextProps) {
-		const { id } = nextProps;
-		const frameNode = nodeInstance;
+		const stage = this.instance.getStage();
 		const newProps = { ...nextProps };
 		const { titleMargin, borderWidth } = this.config;
 		nodeInstance.setAttrs({
 			...newProps,
+			name: "node containerCapable",
 			containerOffsetX: 0,
 			containerOffsetY: borderWidth,
 			clip: void 0
 		});
-		const selectorArea = frameNode.findOne(`#${id}-selector-area`);
-		if (selectorArea) {
-			const resizable = this.config.transform?.resizeEnabled ?? false;
-			const width = !resizable ? nextProps.frameWidth : nextProps.width;
-			const height = !resizable ? nextProps.frameHeight : nextProps.height;
-			selectorArea.setAttrs({
-				x: 0,
-				y: 0,
-				width,
-				height
-			});
-			const frameInternalGroup = frameNode.findOne(`#${id}-selector`);
-			if (frameInternalGroup) frameInternalGroup.setAttrs({
-				x: 0,
-				y: 0,
-				width: width * selectorArea.scaleX(),
-				height: height * selectorArea.scaleY()
-			});
-			const background = frameNode.findOne(`#${id}-bg`);
-			if (background) background.setAttrs({
-				x: 0,
-				y: 0,
-				width: width * selectorArea.scaleX(),
-				height: height * selectorArea.scaleY()
-			});
-			const text = frameNode.findOne(`#${id}-title`);
-			if (text) {
-				text.setAttrs({
-					x: 0,
-					text: nextProps.title,
-					width: width * selectorArea.scaleX()
-				});
-				const textMeasures = text.measureSize(text.getAttrs().text ?? "");
-				const textHeight = textMeasures.height;
-				text.y(-textHeight - titleMargin);
-				text.height(textHeight * selectorArea.scaleY());
-			}
-			const frameInternal = frameNode.findOne(`#${id}-group-internal`);
-			if (frameInternal) frameInternal.setAttrs({
-				x: borderWidth,
-				y: borderWidth,
-				width: (width - borderWidth * 2) * selectorArea.scaleX(),
-				height: (height - borderWidth * 2) * selectorArea.scaleY()
+		const title = stage.findOne(`#${newProps.id}-title`);
+		const selectionArea = stage.findOne(`#${newProps.id}-selection-area`);
+		if (title && selectionArea) {
+			title.text(newProps.title);
+			const textMeasures = title.measureSize(title.getAttrs().text ?? "");
+			const textWidth = textMeasures.width;
+			const textHeight = textMeasures.height;
+			title.y(-textHeight - titleMargin);
+			title.width(textWidth);
+			title.height(textHeight);
+			selectionArea.hitFunc(function(ctx, shape) {
+				ctx.beginPath();
+				ctx.rect(0, -textHeight - titleMargin, textWidth, textHeight);
+				ctx.fillStrokeShape(shape);
 			});
 		}
 		const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
@@ -21315,10 +21514,8 @@ var WeaveFrameNode = class extends WeaveNode {
 	serialize(instance) {
 		const stage = this.instance.getStage();
 		const attrs = instance.getAttrs();
-		let mainNode = instance;
-		if (attrs.id?.indexOf("-selector-area") !== -1) mainNode = stage.findOne(`#${attrs.nodeId}`);
-		let frameInternal = stage.findOne(`#${attrs.containerId}`);
-		if (attrs.id?.indexOf("-selector-area") !== -1) frameInternal = stage.findOne(`#${attrs.containerId}`);
+		const mainNode = instance;
+		const frameInternal = stage.findOne(`#${attrs.containerId}`);
 		const childrenMapped = [];
 		if (frameInternal) {
 			const children = [...frameInternal.getChildren()];
@@ -23321,6 +23518,10 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 		const scale = Math.min(scaleX, scaleY);
 		return scale;
 	}
+	getSelectionPlugin() {
+		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		return selectionPlugin;
+	}
 	fitToScreen() {
 		if (!this.enabled) return;
 		const mainLayer = this.instance.getMainLayer();
@@ -23361,7 +23562,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 	fitToSelection() {
 		if (!this.enabled) return;
 		const stage = this.instance.getStage();
-		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		const selectionPlugin = this.getSelectionPlugin();
 		if (!selectionPlugin) return;
 		const nodes = selectionPlugin.getTransformer().getNodes();
 		if (nodes.length === 0) return;
@@ -24569,7 +24770,7 @@ var WeaveBrushToolAction = class extends WeaveAction {
 				strokeElements: []
 			});
 			const nodeInstance = nodeHandler.onRender(node.props);
-			this.container?.add(nodeInstance);
+			this.measureContainer?.add(nodeInstance);
 		}
 		this.setState(BRUSH_TOOL_STATE.DEFINE_STROKE);
 	}
@@ -25927,8 +26128,7 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 		};
 		stage.on("pointermove", (0, import_lodash.throttle)(handleMouseMove, 50));
 		stage.on("pointermove", () => {
-			if (!this.enabled) return;
-			this.onRender();
+			if (this.enabled) this.onRender();
 		});
 		window.addEventListener("wheel", () => {
 			if (!this.enabled || this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed) return;
@@ -26698,9 +26898,12 @@ var WeaveStageDropAreaPlugin = class extends WeavePlugin {
 			e.stopPropagation();
 		});
 		stage.container().addEventListener("drop", (e) => {
+			e.preventDefault();
 			e.stopPropagation();
 			this.instance.emitEvent("onStageDrop", e);
 		});
+		window.addEventListener("dragover", (e) => e.preventDefault(), { passive: false });
+		window.addEventListener("drop", (e) => e.preventDefault(), { passive: false });
 	}
 	enable() {
 		this.enabled = true;
@@ -26879,6 +27082,22 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 			});
 		}
 	}
+	nodeIntersectsViewport(node) {
+		const stage = this.instance.getStage();
+		const scale = stage.scaleX();
+		const stageWidth = stage.width() / scale;
+		const stageHeight = stage.height() / scale;
+		const viewportRect = {
+			x: -stage.x() / scale,
+			y: -stage.y() / scale,
+			width: stageWidth,
+			height: stageHeight
+		};
+		if (!node.isVisible()) return false;
+		const box = node.getClientRect({ relativeTo: stage });
+		const intersects = box.x + box.width > viewportRect.x && box.x < viewportRect.x + viewportRect.width && box.y + box.height > viewportRect.y && box.y < viewportRect.y + viewportRect.height;
+		return intersects;
+	}
 	getLineGuideStops(skipNodes) {
 		const stage = this.instance.getStage();
 		const nodesSelection = this.instance.getPlugin("nodesSelection");
@@ -26894,7 +27113,10 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 			stage.height()
 		];
 		stage.find(".node").forEach((guideItem) => {
+			if (guideItem.getParent()?.getAttrs().nodeType === "group") return;
+			if (skipNodes.includes(guideItem.getParent()?.getAttrs().nodeId)) return;
 			if (skipNodes.includes(guideItem.getAttrs().id ?? "")) return;
+			if (!this.nodeIntersectsViewport(guideItem)) return;
 			const box = guideItem.getClientRect({ skipStroke: true });
 			vertical.push([
 				box.x,
@@ -27141,6 +27363,7 @@ exports.WEAVE_NODES_SNAPPING_KEY = WEAVE_NODES_SNAPPING_KEY
 exports.WEAVE_RECTANGLE_NODE_TYPE = WEAVE_RECTANGLE_NODE_TYPE
 exports.WEAVE_REGULAR_POLYGON_NODE_TYPE = WEAVE_REGULAR_POLYGON_NODE_TYPE
 exports.WEAVE_STAGE_GRID_KEY = WEAVE_STAGE_GRID_KEY
+exports.WEAVE_STAGE_MODE = WEAVE_STAGE_MODE
 exports.WEAVE_STAGE_NODE_TYPE = WEAVE_STAGE_NODE_TYPE
 exports.WEAVE_STAR_NODE_TYPE = WEAVE_STAR_NODE_TYPE
 exports.WEAVE_STROKE_NODE_TYPE = WEAVE_STROKE_NODE_TYPE
@@ -27204,6 +27427,7 @@ exports.checkIfOverContainer = checkIfOverContainer
 exports.clearContainerTargets = clearContainerTargets
 exports.getBoundingBox = getBoundingBox
 exports.getContrastTextColor = getContrastTextColor
+exports.getTargetedNode = getTargetedNode
 exports.moveNodeToContainer = moveNodeToContainer
 exports.resetScale = resetScale
 exports.stringToColor = stringToColor