@inditextech/weave-sdk 0.37.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,9 +15782,14 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 	initLayer = void 0;
 	constructor(params) {
 		super();
-		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 = {
@@ -15673,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) {
@@ -15727,46 +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("onDrag", (node) => {
-			if (node) this.dragging = true;
-			else this.dragging = false;
-		});
-		this.instance.addEventListener("onTransform", (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;
-				if (this.touchTimer && (this.dragging || this.transforming)) {
-					clearTimeout(this.touchTimer);
-					return;
-				}
-				this.triggerContextMenu(e.target);
+				const actualActions = this.instance.getActiveAction();
+				if (actualActions !== "selectionTool") return;
+				delete this.pointers[e.evt.pointerId];
+				const selectedGroup = getTargetedNode(this.instance);
+				this.triggerContextMenu(e.target, selectedGroup);
 			}, this.tapHoldTimeout);
 		});
-		stage.on("pointermove", (e) => {
-			if (e.evt.pointerType === "mouse") 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;
@@ -15799,115 +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) {
-	const nodeIntersected = instance.pointIntersectsContainerElement();
-	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 {
@@ -15933,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);
@@ -15960,6 +15995,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 					}
 				},
 				borderStroke: "#0074ffcc",
+				borderStrokeWidth: 3,
 				...config?.transformer
 			},
 			transformations: {
@@ -15978,10 +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.selecting = false;
-		this.dragging = false;
 		this.initialized = false;
 		this.enabled = false;
 		this.pointers = {};
@@ -16032,73 +16075,105 @@ 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()) {
 				e.cancelBubble = true;
 				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(e.target.getAbsolutePosition());
+				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;
 				e.target.stopDrag();
 				return;
 			}
+			this.didMove = true;
+			e.cancelBubble = true;
 			const selectedNodes = tr.nodes();
+			let hasFrames = false;
 			for (let i = 0; i < selectedNodes.length; i++) {
 				const node = selectedNodes[i];
-				node.updatePosition(e.target.getAbsolutePosition());
+				if (node.getAttrs().nodeType === "frame") hasFrames = hasFrames || true;
+				node.updatePosition(node.getAbsolutePosition());
 			}
-			e.cancelBubble = true;
 			if (this.isSelecting() && selectedNodes.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 });
+				if (layerToMove && !hasFrames) layerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
 			}
 			tr.forceUpdate();
 		};
-		tr.on("dragmove", (0, import_lodash.throttle)(handleDragMove, 50));
+		tr.on("dragmove", handleDragMove);
 		tr.on("dragend", (e) => {
-			this.dragging = false;
+			if (!this.didMove) return;
 			e.cancelBubble = true;
 			const selectedNodes = tr.nodes();
+			let hasFrames = false;
 			for (let i = 0; i < selectedNodes.length; i++) {
 				const node = selectedNodes[i];
-				node.updatePosition(e.target.getAbsolutePosition());
+				if (node.getAttrs().nodeType === "frame") hasFrames = hasFrames || true;
+				node.updatePosition(node.getAbsolutePosition());
 			}
 			if (this.isSelecting() && tr.nodes().length > 1) {
 				const actualCursor = stage.container().style.cursor;
 				stage.container().style.cursor = "wait";
 				clearContainerTargets(this.instance);
+				const toSelect = [];
 				const toUpdate = [];
 				const nodeUpdatePromise = (node) => {
 					return new Promise((resolve) => {
 						setTimeout(() => {
-							const layerToMove = moveNodeToContainer(this.instance, node);
-							if (layerToMove) return resolve();
+							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 ?? "");
 							toUpdate.push(nodeHandler.serialize(node));
 							resolve();
 						}, 0);
@@ -16110,18 +16185,21 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 					if (results.length > 0) this.instance.updateNodes(toUpdate);
 					stage.container().style.cursor = actualCursor;
 				});
+				setTimeout(() => {
+					const finalSelectedNodes = [];
+					toSelect.forEach((nodeId) => {
+						const actNode = this.instance.getStage().findOne(`#${nodeId}`);
+						if (actNode) finalSelectedNodes.push(actNode);
+					});
+					tr.nodes(finalSelectedNodes);
+					tr.forceUpdate();
+				}, 0);
 			}
 			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) => {
@@ -16173,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;
@@ -16184,13 +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;
@@ -16201,25 +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);
-			if (!(e.target instanceof konva.default.Stage)) this.cameFromSelectingMultiple = true;
 		});
 		const handleMouseMove = (e) => {
+			const moved = this.checkMoved(e);
+			if (e.evt.buttons === 0) return;
 			if (!this.initialized) return;
 			if (!this.active) 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),
@@ -16228,30 +16383,61 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				height: Math.abs(y2 - y1)
 			});
 		};
-		stage.on("pointermove", (0, import_lodash.throttle)(handleMouseMove, 50));
+		stage.on("pointermove", handleMouseMove);
 		stage.on("pointerup", (e) => {
+			const moved = this.checkMoved(e);
+			this.checkDoubleTap(e);
 			delete this.pointers[e.evt.pointerId];
-			if (!this.initialized) return;
-			if (!this.active) return;
-			if (!this.selecting) 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;
+			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 (contextMenuPlugin && contextMenuPlugin.isContextMenuVisible()) {
+				this.selecting = false;
+				return;
+			}
 			if (!this.selectionRectangle.visible()) {
-				this.cameFromSelectingMultiple = false;
+				this.hideSelectorArea();
 				return;
 			}
-			this.tr.nodes([]);
-			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}`);
@@ -16265,118 +16451,148 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				return false;
 			});
 			const selectedNodes = new Set();
-			const framesNodes = selected.filter((shape) => {
-				return shape.getAttrs().nodeType === "frame";
+			const containerNodes = selected.filter((node) => {
+				return typeof node.getAttrs().isContainerPrincipal !== "undefined" && node.getAttrs().isContainerPrincipal;
 			});
-			const 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 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);
 			});
-			this.tr.nodes([...selectedNodes]);
+			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(nodesArray);
 			this.triggerSelectedNodesEvent();
 			stage.container().tabIndex = 1;
 			stage.container().focus();
 		});
-		stage.on("pointerclick", (e) => {
-			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 inter = stage.getIntersection(mousePos);
-				if (inter) selectedGroup = this.instance.getInstanceRecursive(inter);
-			}
-			if (!this.initialized) return;
-			if (e.evt.button && e.evt.button !== 0) return;
-			if (this.selectionRectangle.visible()) return;
-			if (e.target instanceof konva.default.Stage && !selectedGroup) {
-				this.tr.nodes([]);
-				this.triggerSelectedNodesEvent();
-				if (contextMenuPlugin && !contextMenuPlugin.isTapHold()) this.instance.emitEvent("onStageSelection");
-				return;
-			}
-			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.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();
@@ -16413,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
@@ -16484,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);
@@ -16497,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
@@ -16530,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);
@@ -16542,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);
 			}
@@ -16582,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);
 		}
@@ -16593,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
@@ -16651,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) {
@@ -16667,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() {
@@ -16688,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()));
@@ -16698,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)) {
@@ -16747,7 +16982,17 @@ var WeaveNode = class {
 				if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(node$1));
 			});
 			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) {
+					e.target.stopDrag();
+					return;
+				}
 				this.instance.emitEvent("onDrag", e.target);
 				if (stage.isMouseWheelPressed()) {
 					e.cancelBubble = true;
@@ -16755,24 +17000,38 @@ 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";
+				if (isErasing) {
+					e.target.stopDrag();
+					return;
+				}
 				if (stage.isMouseWheelPressed()) {
 					e.cancelBubble = true;
 					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 });
-					const nodeHandler = this.instance.getNodeHandler(node.getAttrs().nodeType);
-					if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(node));
 				}
 			};
 			node.on("dragmove", (0, import_lodash.throttle)(handleDragMove, 100));
 			node.on("dragend", (e) => {
+				if (!this.didMove) return;
+				const isErasing = this.instance.getActiveAction() === "eraseTool";
+				if (isErasing) {
+					e.target.stopDrag();
+					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();
@@ -16781,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";
 				}
 			});
 		}
@@ -16874,14 +17139,19 @@ var WeaveNode = class {
 	}
 	unlock(instance) {
 		if (instance.getAttrs().nodeType !== this.getNodeType()) return;
-		instance.setAttrs({ locked: false });
-		this.instance.updateNode(this.serialize(instance));
-		this.setupDefaultNodeEvents(instance);
+		let realInstance = instance;
+		if (instance.getAttrs().nodeId) realInstance = this.instance.getStage().findOne(`#${instance.getAttrs().nodeId}`);
+		if (!realInstance) return;
+		realInstance.setAttrs({ locked: false });
+		this.instance.updateNode(this.serialize(realInstance));
+		this.setupDefaultNodeEvents(realInstance);
 		const stage = this.instance.getStage();
 		stage.container().style.cursor = "default";
 	}
 	isLocked(instance) {
-		return instance.getAttrs().locked ?? false;
+		let realInstance = instance;
+		if (instance.getAttrs().nodeId === false) realInstance = this.instance.getInstanceRecursive(instance);
+		return realInstance.getAttrs().locked ?? false;
 	}
 };
 
@@ -16889,6 +17159,11 @@ var WeaveNode = class {
 //#region src/actions/action.ts
 var WeaveAction = class {
 	constructor() {
+		this.tapStart = {
+			x: 0,
+			y: 0,
+			time: 0
+		};
 		return new Proxy(this, { set: (target, key, value) => {
 			Reflect.set(target, key, value);
 			this.onPropsChange?.();
@@ -16920,6 +17195,26 @@ var WeaveAction = class {
 	getProps() {
 		return this.props;
 	}
+	isPressed(e) {
+		return e.evt.buttons > 0;
+	}
+	setTapStart(e) {
+		this.tapStart = {
+			x: e.evt.clientX,
+			y: e.evt.clientY,
+			time: performance.now()
+		};
+	}
+	isTap(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 dt = performance.now() - this.tapStart.time;
+		const TAP_DISTANCE = 10;
+		const TAP_TIME = 300;
+		return (e.evt.pointerType === "pen" || e.evt.pointerType === "touch") && dist < TAP_DISTANCE && dt < TAP_TIME;
+	}
 };
 
 //#endregion
@@ -17515,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 intersections = this.instance.getMainLayer()?.getAllIntersections(relativeMousePointer);
+		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
+		};
+	}
+	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;
 			}
 		}
@@ -17542,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
 		};
@@ -17550,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;
@@ -17570,6 +17919,7 @@ var WeaveTargetingManager = class {
 			y: 0
 		};
 		if (nodesSelection) nodesSelection.enable();
+		dummyRect.destroy();
 		return {
 			mousePoint: relativeMousePointer,
 			container,
@@ -17975,23 +18325,30 @@ var WeaveZIndexManager = class {
 			this.instance.moveNode(node, __inditextech_weave_types.WEAVE_NODE_POSITION.DOWN);
 		}
 	}
-	sendToBack(instance) {
-		this.logger.debug(`Moving instance with id [${instance.getAttrs().id}], to bottom of z-index`);
-		instance.moveToBottom();
-		const handler = this.instance.getNodeHandler(instance.getAttrs().nodeType);
-		if (handler) {
-			const node = handler.serialize(instance);
-			this.instance.moveNode(node, __inditextech_weave_types.WEAVE_NODE_POSITION.BACK);
+	sendToBack(instances) {
+		const nodes = Array.isArray(instances) ? instances : [instances];
+		const nodesDescending = nodes.toSorted((a, b) => b.zIndex() - a.zIndex());
+		for (const node of nodesDescending) {
+			node.moveToBottom();
+			const handler = this.instance.getNodeHandler(node.getAttrs().nodeType);
+			if (handler) {
+				const nodeState = handler.serialize(node);
+				this.instance.updateNode(nodeState);
+				this.instance.moveNode(nodeState, __inditextech_weave_types.WEAVE_NODE_POSITION.BACK);
+			}
 		}
 	}
-	bringToFront(instance) {
-		this.logger.debug(`Moving instance with id [${instance.getAttrs().id}], to top of z-index`);
-		instance.moveToTop();
-		const handler = this.instance.getNodeHandler(instance.getAttrs().nodeType);
-		if (handler) {
-			const node = handler.serialize(instance);
-			this.instance.updateNode(node);
-			this.instance.moveNode(node, __inditextech_weave_types.WEAVE_NODE_POSITION.FRONT);
+	bringToFront(instances) {
+		const nodes = Array.isArray(instances) ? instances : [instances];
+		const nodesAscending = nodes.toSorted((a, b) => a.zIndex() - b.zIndex());
+		for (const node of nodesAscending) {
+			node.moveToTop();
+			const handler = this.instance.getNodeHandler(node.getAttrs().nodeType);
+			if (handler) {
+				const nodeState = handler.serialize(node);
+				this.instance.updateNode(nodeState);
+				this.instance.moveNode(nodeState, __inditextech_weave_types.WEAVE_NODE_POSITION.FRONT);
+			}
 		}
 	}
 };
@@ -18063,7 +18420,7 @@ var WeaveStateManager = class {
 		};
 		return this.findNodeById(state, nodeKey);
 	}
-	addNode(node, parentId = "mainLayer", index = void 0, doRender = true) {
+	addNode(node, parentId = "mainLayer", index = void 0) {
 		const userName = this.instance.getStore().getUser().name;
 		this.instance.getStore().getDocument().transact(() => {
 			const state = this.instance.getStore().getState();
@@ -18071,8 +18428,7 @@ var WeaveStateManager = class {
 				const msg = `State is empty, cannot add the node`;
 				this.logger.warn({
 					node,
-					parentId,
-					doRender
+					parentId
 				}, msg);
 				return;
 			}
@@ -18081,8 +18437,7 @@ var WeaveStateManager = class {
 				const msg = `Node with key [${node.key}] already exists, cannot add it`;
 				this.logger.warn({
 					node,
-					parentId,
-					doRender
+					parentId
 				}, msg);
 				return;
 			}
@@ -18091,8 +18446,7 @@ var WeaveStateManager = class {
 				const msg = `Parent container with key [${node.key}] doesn't exists, cannot add it`;
 				this.logger.warn({
 					node,
-					parentId,
-					doRender
+					parentId
 				}, msg);
 				return;
 			}
@@ -18122,28 +18476,21 @@ var WeaveStateManager = class {
 				parent.props.children.push(finalNode);
 			}
 			this.instance.emitEvent("onNodeAdded", node);
-			if (doRender) this.instance.render();
 		}, userName);
 	}
-	updateNode(node, doRender = true) {
+	updateNode(node) {
 		const userName = this.instance.getStore().getUser().name;
 		this.instance.getStore().getDocument().transact(() => {
 			const state = this.instance.getStore().getState();
 			if ((0, import_lodash.isEmpty)(state.weave)) {
 				const msg = `State is empty, cannot update the node`;
-				this.logger.warn({
-					node,
-					doRender
-				}, msg);
+				this.logger.warn({ node }, msg);
 				return;
 			}
 			const { node: nodeState } = this.findNodeById(state.weave, node.key);
 			if (!nodeState) {
 				const msg = `Node with key [${node.key}] doesn't exists, cannot update it`;
-				this.logger.warn({
-					node,
-					doRender
-				}, msg);
+				this.logger.warn({ node }, msg);
 				return;
 			}
 			const nodeNew = JSON.parse(JSON.stringify({
@@ -18152,28 +18499,21 @@ var WeaveStateManager = class {
 			}));
 			nodeState.props = { ...nodeNew };
 			this.instance.emitEvent("onNodeUpdated", node);
-			if (doRender) this.instance.render();
 		}, userName);
 	}
-	removeNode(node, doRender = true) {
+	removeNode(node) {
 		const userName = this.instance.getStore().getUser().name;
 		this.instance.getStore().getDocument().transact(() => {
 			const state = this.instance.getStore().getState();
 			if ((0, import_lodash.isEmpty)(state.weave)) {
 				const msg = `State is empty, cannot update the node`;
-				this.logger.warn({
-					node,
-					doRender
-				}, msg);
+				this.logger.warn({ node }, msg);
 				return;
 			}
 			const { node: nodeState, parent: parentState } = this.findNodeById(state.weave, node.key);
 			if (!nodeState) {
 				const msg = `Node with key [${node.key}] doesn't exists, cannot remove it`;
-				this.logger.warn({
-					node,
-					doRender
-				}, msg);
+				this.logger.warn({ node }, msg);
 				return;
 			}
 			if (parentState) {
@@ -18182,32 +18522,24 @@ var WeaveStateManager = class {
 				parentState.props.children = filteredChildren;
 			}
 			this.instance.emitEvent("onNodeRemoved", node);
-			if (doRender) this.instance.render();
 		}, userName);
 	}
-	removeNodes(nodes, doRender = true) {
-		for (const node of nodes) this.removeNode(node, false);
-		if (doRender) this.instance.render();
+	removeNodes(nodes) {
+		for (const node of nodes) this.removeNode(node);
 	}
-	moveNode(node, position, doRender = true) {
+	moveNode(node, position) {
 		const userName = this.instance.getStore().getUser().name;
 		this.instance.getStore().getDocument().transact(() => {
 			const state = this.instance.getStore().getState();
 			if ((0, import_lodash.isEmpty)(state.weave)) {
 				const msg = `State is empty, cannot update the node`;
-				this.logger.warn({
-					node,
-					doRender
-				}, msg);
+				this.logger.warn({ node }, msg);
 				return;
 			}
 			const { node: nodeState, parent: nodeParent } = this.findNodeById(state.weave, node.key);
 			if (!nodeState) {
 				const msg = `Node with key [${node.key}] doesn't exists, cannot update it`;
-				this.logger.warn({
-					node,
-					doRender
-				}, msg);
+				this.logger.warn({ node }, msg);
 				return;
 			}
 			if (nodeParent) {
@@ -18231,7 +18563,6 @@ var WeaveStateManager = class {
 				});
 				if (!nodeParent.props.children) nodeParent.props.children = [];
 				nodeParent.props.children = nodeParentNewChildren;
-				if (doRender) this.instance.render();
 			}
 		}, userName);
 	}
@@ -18317,7 +18648,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.37.0";
+var version = "0.39.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -18389,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}`);
@@ -18764,6 +19099,9 @@ var Weave = class {
 	getMainLayer() {
 		return this.stageManager.getMainLayer();
 	}
+	getSelectionLayer() {
+		return this.stageManager.getSelectionLayer();
+	}
 	getUtilityLayer() {
 		return this.stageManager.getUtilityLayer();
 	}
@@ -18859,31 +19197,27 @@ var Weave = class {
 	getNode(nodeKey) {
 		return this.stateManager.getNode(nodeKey);
 	}
-	addNode(node, parentId = "mainLayer", index = void 0, doRender = true) {
-		this.stateManager.addNode(node, parentId, index, doRender);
+	addNode(node, parentId = "mainLayer", index = void 0) {
+		this.stateManager.addNode(node, parentId, index);
 	}
-	updateNode(node, doRender = true) {
-		this.stateManager.updateNode(node, doRender);
+	updateNode(node) {
+		this.stateManager.updateNode(node);
 	}
-	updateNodes(nodes, doRender = true) {
-		for (const node of nodes) this.updateNode(node, false);
-		const selectionPlugin = this.getPlugin("nodesSelection");
-		if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
-		if (doRender) this.render();
+	updateNodes(nodes) {
+		for (const node of nodes) this.updateNode(node);
 	}
-	removeNode(node, doRender = true) {
-		this.stateManager.removeNode(node, doRender);
+	removeNode(node) {
+		this.stateManager.removeNode(node);
 		const selectionPlugin = this.getPlugin("nodesSelection");
 		if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
 	}
-	removeNodes(nodes, doRender = true) {
-		for (const node of nodes) this.removeNode(node, false);
+	removeNodes(nodes) {
+		for (const node of nodes) this.removeNode(node);
 		const selectionPlugin = this.getPlugin("nodesSelection");
 		if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
-		if (doRender) this.render();
 	}
-	moveNode(node, position, doRender = true) {
-		this.stateManager.moveNode(node, position, doRender);
+	moveNode(node, position) {
+		this.stateManager.moveNode(node, position);
 	}
 	getElementsTree() {
 		return this.stateManager.getElementsTree();
@@ -18897,11 +19231,11 @@ var Weave = class {
 	moveDown(node) {
 		this.zIndexManager.moveDown(node);
 	}
-	sendToBack(node) {
-		this.zIndexManager.sendToBack(node);
+	sendToBack(nodes) {
+		this.zIndexManager.sendToBack(nodes);
 	}
-	bringToFront(node) {
-		this.zIndexManager.bringToFront(node);
+	bringToFront(nodes) {
+		this.zIndexManager.bringToFront(nodes);
 	}
 	group(nodes) {
 		this.groupsManager.group(nodes);
@@ -18917,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);
@@ -18931,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);
@@ -19039,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 {
@@ -19062,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;
@@ -19074,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();
@@ -19084,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;
 		});
@@ -19152,6 +19493,7 @@ var WeaveGroupNode = class extends WeaveNode {
 	onRender(props) {
 		const group = new konva.default.Group({
 			...props,
+			isContainerPrincipal: true,
 			name: "node"
 		});
 		this.setupDefaultNodeAugmentation(group);
@@ -19368,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();
@@ -19429,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();
@@ -19440,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({
@@ -19506,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 () => {
@@ -19539,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";
@@ -19623,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;
@@ -19656,11 +20004,11 @@ 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();
-		const py = 2 * (measures.fontBoundingBoxAscent - measures.hangingBaseline - measures.fontBoundingBoxDescent) * stage.scaleY();
+		const py = measures.actualBoundingBoxDescent * stage.scaleY();
 		let transform = "";
 		transform += "translateX(" + px + "px)";
 		transform += "translateY(" + py + "px)";
@@ -19673,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));
@@ -19686,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);
@@ -19718,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");
@@ -19776,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();
@@ -19848,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
@@ -19924,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) {
@@ -20170,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);
 		});
@@ -20204,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();
@@ -20224,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;
@@ -20376,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: {
@@ -20389,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;
@@ -20426,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();
@@ -20486,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({
@@ -20499,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) {
@@ -20962,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`,
@@ -21029,97 +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: false
-		});
-		selectorArea.getTransformerProperties = () => {
+		frame.getTransformerProperties = () => {
 			return this.config.transform;
 		};
-		selectorArea.updatePosition = (position) => {
-			frame.setAbsolutePosition(position);
-			selectorArea.setAttrs({
-				x: 0,
-				y: 0
-			});
-			this.instance.updateNode(this.serialize(selectorArea));
-		};
-		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,
@@ -21128,17 +21406,65 @@ var WeaveFrameNode = class extends WeaveNode {
 			width: props.frameWidth - borderWidth * 2,
 			height: props.frameHeight - borderWidth * 2,
 			strokeScaleEnabled: true,
-			draggable: false
+			clipFunc: (ctx) => {
+				const width = (frameInternal.width() + borderWidth) * frameInternal.scaleX();
+				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
 		});
-		frameInternal.clipFunc((ctx) => {
-			const width = (frameInternal.width() + borderWidth) * frameInternal.scaleX();
-			const height = (frameInternal.height() + borderWidth) * frameInternal.scaleY();
-			ctx.rect(-(borderWidth / 2) * frameInternal.scaleX(), -(borderWidth / 2) * frameInternal.scaleY(), width, height);
+		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.on("dragmove", () => {});
-		frame.on("dragend", () => {});
+		frame.off("pointerover");
 		frame.on(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, () => {
 			background.setAttrs({
 				stroke: onTargetLeaveBorderColor,
@@ -21156,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");
@@ -21217,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()];
@@ -21246,10 +21541,125 @@ var WeaveFrameNode = class extends WeaveNode {
 	}
 };
 
+//#endregion
+//#region src/nodes/stroke/constants.ts
+const WEAVE_STROKE_NODE_TYPE = "stroke";
+
+//#endregion
+//#region src/nodes/stroke/stroke.ts
+var WeaveStrokeNode = class extends WeaveNode {
+	nodeType = WEAVE_STROKE_NODE_TYPE;
+	constructor(params) {
+		super();
+		const { config } = params ?? {};
+		this.config = { transform: {
+			...__inditextech_weave_types.WEAVE_DEFAULT_TRANSFORM_PROPERTIES,
+			...config?.transform
+		} };
+	}
+	drawStroke(strokeElements, context, shape) {
+		context.strokeStyle = shape.getAttrs().stroke ?? "black";
+		context.lineCap = "round";
+		context.lineJoin = "round";
+		const l = strokeElements.length - 1;
+		if (strokeElements.length >= 3) {
+			const xc = (strokeElements[l].x + strokeElements[l - 1].x) / 2;
+			const yc = (strokeElements[l].y + strokeElements[l - 1].y) / 2;
+			context.lineWidth = strokeElements[l - 1].lineWidth;
+			context.quadraticCurveTo(strokeElements[l - 1].x, strokeElements[l - 1].y, xc, yc);
+			context.stroke();
+			context.beginPath();
+			context.moveTo(xc, yc);
+		} else {
+			const point = strokeElements[l];
+			context.lineWidth = point.lineWidth;
+			context.beginPath();
+			context.moveTo(point.x, point.y);
+			context.stroke();
+		}
+	}
+	onRender(props) {
+		const stroke = new konva.default.Shape({
+			...props,
+			name: "node",
+			sceneFunc: (context, shape) => {
+				context.beginPath();
+				const strokeElements = shape.getAttrs().strokeElements;
+				const strokePath = [];
+				strokeElements.forEach((point) => {
+					strokePath.push(point);
+					this.drawStroke(strokePath, context, shape);
+				});
+			},
+			hitFunc: (context, shape) => {
+				context.beginPath();
+				context.rect(0, 0, shape.width(), shape.height());
+				context.closePath();
+				context.fillStrokeShape(shape);
+			}
+		});
+		this.setupDefaultNodeAugmentation(stroke);
+		stroke.getTransformerProperties = () => {
+			return this.config.transform;
+		};
+		this.setupDefaultNodeEvents(stroke);
+		return stroke;
+	}
+	onUpdate(nodeInstance, nextProps) {
+		nodeInstance.setAttrs({ ...nextProps });
+		const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer().forceUpdate();
+	}
+	scaleReset(node) {
+		const strokeNode = node;
+		const oldPoints = [...strokeNode.getAttrs().strokeElements];
+		const newPoints = [];
+		for (const actPoint of oldPoints) {
+			const point = {
+				...actPoint,
+				x: actPoint.x * strokeNode.scaleX(),
+				y: actPoint.y * strokeNode.scaleY()
+			};
+			newPoints.push(point);
+		}
+		strokeNode.setAttrs({ strokeElements: newPoints });
+		node.width(Math.max(5, node.width() * node.scaleX()));
+		node.height(Math.max(5, node.height() * node.scaleY()));
+		node.scaleX(1);
+		node.scaleY(1);
+	}
+	serialize(instance) {
+		const attrs = instance.getAttrs();
+		const cleanedAttrs = { ...attrs };
+		delete cleanedAttrs.draggable;
+		delete cleanedAttrs.sceneFunc;
+		delete cleanedAttrs.hitFunc;
+		return {
+			key: attrs.id ?? "",
+			type: attrs.nodeType,
+			props: {
+				...cleanedAttrs,
+				id: attrs.id ?? "",
+				nodeType: attrs.nodeType,
+				children: []
+			}
+		};
+	}
+};
+
 //#endregion
 //#region src/plugins/stage-zoom/constants.ts
+const WEAVE_STAGE_ZOOM_TYPE = {
+	MOUSE_WHEEL: "mouseWheel",
+	PINCH_ZOOM: "pinchZoom"
+};
 const WEAVE_STAGE_ZOOM_KEY = "stageZoom";
 const WEAVE_STAGE_ZOOM_DEFAULT_CONFIG = {
+	zoomInertia: {
+		friction: .9,
+		mouseWheelStep: .01,
+		trackpadStep: .005
+	},
 	zoomSteps: [
 		.01,
 		.05,
@@ -22953,15 +23363,23 @@ var import_hammer = __toESM(require_hammer(), 1);
 var WeaveStageZoomPlugin = class extends WeavePlugin {
 	getLayerName = void 0;
 	initLayer = void 0;
+	zooming = false;
+	isTrackpad = false;
+	zoomVelocity = 0;
+	zoomInertiaType = WEAVE_STAGE_ZOOM_TYPE.MOUSE_WHEEL;
+	initialScale = 0;
+	lastTime = 0;
+	center = {
+		x: 0,
+		y: 0
+	};
 	defaultStep = 3;
 	constructor(params) {
 		super();
 		const { config } = params ?? {};
-		this.config = {
-			...WEAVE_STAGE_ZOOM_DEFAULT_CONFIG,
-			...config
-		};
+		this.config = (0, import_lodash.merge)(WEAVE_STAGE_ZOOM_DEFAULT_CONFIG, config);
 		if (!this.config.zoomSteps.includes(this.config.defaultZoom)) throw new Error(`Default zoom ${this.config.defaultZoom} is not in zoom steps`);
+		this.isTrackpad = false;
 		this.isCtrlOrMetaPressed = false;
 		this.updatedMinimumZoom = false;
 		this.actualStep = this.config.zoomSteps.findIndex((step) => step === this.config.defaultZoom);
@@ -23100,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();
@@ -23140,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;
@@ -23214,38 +23636,68 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 			threshold: 0,
 			pointers: 2
 		}));
-		let initialScale = null;
-		let center = {
-			x: 0,
-			y: 0
-		};
-		sc.on("pinchstart", (ev) => {
-			initialScale = stage.scaleX();
-			center = {
-				x: ev.center.x,
-				y: ev.center.y
+		sc.on("pinchstart", (e) => {
+			this.initialScale = this.instance.getStage().scaleX();
+			this.center = {
+				x: e.center.x,
+				y: e.center.y
 			};
+			this.lastTime = performance.now();
+		});
+		sc.on("pinchmove", (e) => {
+			const now = performance.now();
+			const newScale = Math.max(this.config.zoomSteps[0], Math.min(this.config.zoomSteps[this.config.zoomSteps.length - 1], this.initialScale * e.scale));
+			this.setZoom(newScale, false, this.center);
+			const dt = now - this.lastTime;
+			this.zoomVelocity = (newScale - 1) / (dt * 16.6);
+			this.lastTime = now;
 		});
-		sc.on("pinchmove", (ev) => {
-			if (!initialScale) return;
-			const newScale = initialScale * ev.scale;
-			this.setZoom(newScale, false, center);
+		sc.on("pinchend", () => {
+			this.zooming = true;
+			this.zoomInertiaType = WEAVE_STAGE_ZOOM_TYPE.PINCH_ZOOM;
+			requestAnimationFrame(this.zoomTick.bind(this));
 		});
 		const handleWheel = (e) => {
 			e.evt.preventDefault();
 			const stage$1 = this.instance.getStage();
 			const performZoom = this.isCtrlOrMetaPressed || !this.isCtrlOrMetaPressed && e.evt.ctrlKey && e.evt.deltaMode === 0;
 			if (!this.enabled || !stage$1.isFocused() || !performZoom) return;
-			const oldScale = stage$1.scaleX();
-			const pointer = stage$1.getPointerPosition();
-			if (!pointer) return;
-			const scaleBy = 1.025;
-			const direction = e.evt.deltaY > 0 ? 1 : -1;
-			const newScale = direction > 0 ? oldScale / scaleBy : oldScale * scaleBy;
-			this.setZoom(newScale, false, pointer);
+			const delta = e.evt.deltaY > 0 ? 1 : -1;
+			this.zoomVelocity += delta;
+			this.isTrackpad = Math.abs(e.evt.deltaY) < 15 && e.evt.deltaMode === 0;
+			if (!this.zooming) {
+				this.zooming = true;
+				this.zoomInertiaType = WEAVE_STAGE_ZOOM_TYPE.MOUSE_WHEEL;
+				requestAnimationFrame(this.zoomTick.bind(this));
+			}
 		};
 		stage.on("wheel", handleWheel);
 	}
+	getInertiaScale() {
+		const stage = this.instance.getStage();
+		let step = 1;
+		if (this.zoomInertiaType === WEAVE_STAGE_ZOOM_TYPE.MOUSE_WHEEL && !this.isTrackpad) step = this.config.zoomInertia.mouseWheelStep;
+		if (this.zoomInertiaType === WEAVE_STAGE_ZOOM_TYPE.MOUSE_WHEEL && this.isTrackpad) step = this.config.zoomInertia.trackpadStep;
+		const oldScale = stage.scaleX();
+		let newScale = oldScale * (1 - this.zoomVelocity * step);
+		newScale = Math.max(this.config.zoomSteps[0], Math.min(this.config.zoomSteps[this.config.zoomSteps.length - 1], newScale));
+		return newScale;
+	}
+	zoomTick() {
+		if (Math.abs(this.zoomVelocity) < .001) {
+			this.zooming = false;
+			return;
+		}
+		let pointer = this.center;
+		if (this.zoomInertiaType === WEAVE_STAGE_ZOOM_TYPE.MOUSE_WHEEL) {
+			const stage = this.instance.getStage();
+			pointer = stage.getPointerPosition();
+		}
+		if (!pointer) return;
+		this.setZoom(this.getInertiaScale(), false, pointer);
+		this.zoomVelocity *= this.config.zoomInertia.friction;
+		requestAnimationFrame(this.zoomTick.bind(this));
+	}
 };
 
 //#endregion
@@ -23570,7 +24022,10 @@ var WeaveEraserToolAction = class extends WeaveAction {
 		stage.container().focus();
 		this.cancelAction = cancelAction;
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
-		if (selectionPlugin) selectionPlugin.disable();
+		if (selectionPlugin) {
+			selectionPlugin.setSelectedNodes([]);
+			selectionPlugin.disable();
+		}
 		this.setEraser();
 	}
 	cleanup() {
@@ -23638,19 +24093,23 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 				return;
 			}
 		});
-		stage.on("pointerdown", () => {
+		stage.on("pointerdown", (e) => {
+			this.setTapStart(e);
 			if (this.state === RECTANGLE_TOOL_STATE.ADDING) {
 				this.creating = true;
 				this.handleAdding();
 			}
 		});
-		stage.on("pointermove", () => {
+		stage.on("pointermove", (e) => {
+			if (!this.isPressed(e)) return;
 			if (this.state === RECTANGLE_TOOL_STATE.DEFINING_SIZE) {
 				this.moved = true;
 				this.handleMovement();
 			}
 		});
-		stage.on("pointerup", () => {
+		stage.on("pointerup", (e) => {
+			const isTap = this.isTap(e);
+			if (isTap) this.moved = false;
 			if (this.state === RECTANGLE_TOOL_STATE.DEFINING_SIZE) {
 				this.creating = false;
 				this.handleSettingSize();
@@ -23813,19 +24272,23 @@ var WeaveEllipseToolAction = class extends WeaveAction {
 				return;
 			}
 		});
-		stage.on("pointerdown", () => {
+		stage.on("pointerdown", (e) => {
+			this.setTapStart(e);
 			if (this.state === ELLIPSE_TOOL_STATE.ADDING) {
 				this.creating = true;
 				this.handleAdding();
 			}
 		});
-		stage.on("pointermove", () => {
+		stage.on("pointermove", (e) => {
+			if (!this.isPressed(e)) return;
 			if (this.state === ELLIPSE_TOOL_STATE.DEFINING_SIZE) {
 				this.moved = true;
 				this.handleMovement();
 			}
 		});
-		stage.on("pointerup", () => {
+		stage.on("pointerup", (e) => {
+			const isTap = this.isTap(e);
+			if (isTap) this.moved = false;
 			if (this.state === ELLIPSE_TOOL_STATE.DEFINING_SIZE) {
 				this.creating = false;
 				this.handleSettingSize();
@@ -24195,11 +24658,13 @@ const BRUSH_TOOL_STATE = {
 //#region src/actions/brush-tool/brush-tool.ts
 var WeaveBrushToolAction = class extends WeaveAction {
 	initialized = false;
+	lineWidth = 0;
 	onPropsChange = void 0;
 	onInit = void 0;
 	constructor() {
 		super();
 		this.initialized = false;
+		this.lineWidth = 0;
 		this.state = BRUSH_TOOL_STATE.INACTIVE;
 		this.strokeId = null;
 		this.clickPoint = null;
@@ -24217,6 +24682,11 @@ var WeaveBrushToolAction = class extends WeaveAction {
 			opacity: 1
 		};
 	}
+	getPointPressure(e) {
+		let pressure = 1;
+		if (e.evt instanceof PointerEvent && e.evt.pointerType === "pen") pressure = e.evt.pressure;
+		return pressure;
+	}
 	setupEvents() {
 		const stage = this.instance.getStage();
 		stage.container().tabIndex = 1;
@@ -24231,75 +24701,132 @@ var WeaveBrushToolAction = class extends WeaveAction {
 				return;
 			}
 		});
-		stage.on("pointerdown", (e) => {
+		const handlePointerDown = (e) => {
 			if (this.state !== BRUSH_TOOL_STATE.IDLE) return;
+			const pointPressure = this.getPointPressure(e);
+			this.lineWidth = Math.log(pointPressure + 1) * this.props.strokeWidth;
 			this.handleStartStroke();
 			e.evt.stopPropagation();
-		});
-		stage.on("pointermove", (e) => {
+		};
+		stage.on("pointerdown touchstart", handlePointerDown);
+		const handlePointerMove = (e) => {
 			if (this.state !== BRUSH_TOOL_STATE.DEFINE_STROKE) return;
+			const pointPressure = this.getPointPressure(e);
+			this.lineWidth = Math.log(pointPressure + 1) * this.props.strokeWidth * .2 + this.lineWidth * .8;
 			this.handleMovement();
 			e.evt.stopPropagation();
-		});
-		stage.on("pointerup", (e) => {
+		};
+		stage.on("pointermove touchmove", handlePointerMove);
+		const handlePointerUp = (e) => {
 			if (this.state !== BRUSH_TOOL_STATE.DEFINE_STROKE) return;
 			this.handleEndStroke();
 			e.evt.stopPropagation();
-		});
+		};
+		stage.on("pointerup touchend", handlePointerUp);
 		this.initialized = true;
 	}
 	setState(state) {
 		this.state = state;
 	}
+	getBoundingBox(strokeElements) {
+		if (strokeElements.length === 0) return {
+			x: 0,
+			y: 0,
+			width: 0,
+			height: 0
+		};
+		let minX = strokeElements[0].x;
+		let maxX = strokeElements[0].x;
+		let minY = strokeElements[0].y;
+		let maxY = strokeElements[0].y;
+		strokeElements.forEach((point) => {
+			minX = Math.min(minX, point.x);
+			maxX = Math.max(maxX, point.x);
+			minY = Math.min(minY, point.y);
+			maxY = Math.max(maxY, point.y);
+		});
+		return {
+			x: minX,
+			y: minY,
+			width: maxX - minX,
+			height: maxY - minY
+		};
+	}
 	handleStartStroke() {
 		const { mousePoint, container, measureContainer } = this.instance.getMousePointer();
 		this.clickPoint = mousePoint;
 		this.container = container;
 		this.measureContainer = measureContainer;
 		this.strokeId = v4_default();
-		const nodeHandler = this.instance.getNodeHandler("line");
+		const nodeHandler = this.instance.getNodeHandler("stroke");
 		if (nodeHandler) {
 			const node = nodeHandler.create(this.strokeId, {
 				...this.props,
 				strokeScaleEnabled: true,
-				x: this.clickPoint?.x ?? 0,
-				y: this.clickPoint?.y ?? 0,
-				points: [0, 0]
+				x: 0,
+				y: 0,
+				width: 0,
+				height: 0,
+				strokeElements: []
 			});
-			this.instance.addNode(node, this.container?.getAttrs().id);
+			const nodeInstance = nodeHandler.onRender(node.props);
+			this.measureContainer?.add(nodeInstance);
 		}
 		this.setState(BRUSH_TOOL_STATE.DEFINE_STROKE);
 	}
+	handleMovement() {
+		if (this.state !== BRUSH_TOOL_STATE.DEFINE_STROKE) return;
+		const tempStroke = this.instance.getStage().findOne(`#${this.strokeId}`);
+		if (this.measureContainer && tempStroke) {
+			const { mousePoint } = this.instance.getMousePointerRelativeToContainer(this.measureContainer);
+			const newStrokeElements = [...tempStroke.getAttrs().strokeElements];
+			newStrokeElements.push({
+				x: mousePoint.x - tempStroke.x(),
+				y: mousePoint.y - tempStroke.y(),
+				lineWidth: this.lineWidth
+			});
+			const box = this.getBoundingBox(newStrokeElements);
+			tempStroke.setAttrs({
+				width: box.width,
+				height: box.height,
+				x: 0,
+				y: 0,
+				strokeElements: newStrokeElements
+			});
+			const nodeHandler = this.instance.getNodeHandler("stroke");
+			if (nodeHandler) nodeHandler.onUpdate(tempStroke, tempStroke.getAttrs());
+		}
+	}
 	handleEndStroke() {
 		const stage = this.instance.getStage();
 		const tempStroke = this.instance.getStage().findOne(`#${this.strokeId}`);
 		if (tempStroke) {
-			const nodeHandler = this.instance.getNodeHandler("line");
-			tempStroke.setAttrs({
-				...this.props,
-				hitStrokeWidth: 10
-			});
-			if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(tempStroke));
+			const nodeHandler = this.instance.getNodeHandler("stroke");
+			if (nodeHandler) {
+				const box = this.getBoundingBox(tempStroke.getAttrs().strokeElements);
+				let newStrokeElements = [...tempStroke.getAttrs().strokeElements];
+				newStrokeElements = newStrokeElements.map((point) => ({
+					...point,
+					x: point.x - box.x,
+					y: point.y - box.y
+				}));
+				tempStroke.setAttrs({
+					width: box.width,
+					height: box.height,
+					x: box.x,
+					y: box.y,
+					strokeElements: newStrokeElements
+				});
+				const realNode = this.instance.getStage().findOne(`#${tempStroke.getAttrs().id}`);
+				if (realNode) realNode.destroy();
+				this.instance.addNode(nodeHandler.serialize(tempStroke), this.container?.getAttrs().id);
+			}
 			this.clickPoint = null;
 			stage.container().tabIndex = 1;
 			stage.container().focus();
 			this.setState(BRUSH_TOOL_STATE.IDLE);
 		}
 	}
-	handleMovement() {
-		if (this.state !== BRUSH_TOOL_STATE.DEFINE_STROKE) return;
-		const tempStroke = this.instance.getStage().findOne(`#${this.strokeId}`);
-		if (this.measureContainer && tempStroke) {
-			const { mousePoint } = this.instance.getMousePointerRelativeToContainer(this.measureContainer);
-			tempStroke.points([
-				...tempStroke.points(),
-				mousePoint.x - tempStroke.x(),
-				mousePoint.y - tempStroke.y()
-			]);
-			const nodeHandler = this.instance.getNodeHandler("line");
-			if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(tempStroke));
-		}
-	}
 	trigger(cancel) {
 		if (!this.instance) throw new Error("Instance not defined");
 		if (!this.initialized) this.setupEvents();
@@ -24493,19 +25020,23 @@ var WeaveStarToolAction = class extends WeaveAction {
 				return;
 			}
 		});
-		stage.on("pointerdown", () => {
+		stage.on("pointerdown", (e) => {
+			this.setTapStart(e);
 			if (this.state === STAR_TOOL_STATE.ADDING) {
 				this.creating = true;
 				this.handleAdding();
 			}
 		});
-		stage.on("pointermove", () => {
+		stage.on("pointermove", (e) => {
+			if (!this.isPressed(e)) return;
 			if (this.state === STAR_TOOL_STATE.DEFINING_SIZE) {
 				this.moved = true;
 				this.handleMovement();
 			}
 		});
-		stage.on("pointerup", () => {
+		stage.on("pointerup", (e) => {
+			const isTap = this.isTap(e);
+			if (isTap) this.moved = false;
 			if (this.state === STAR_TOOL_STATE.DEFINING_SIZE) {
 				this.creating = false;
 				this.handleSettingSize();
@@ -24931,19 +25462,23 @@ var WeaveRegularPolygonToolAction = class extends WeaveAction {
 				return;
 			}
 		});
-		stage.on("pointerdown", () => {
+		stage.on("pointerdown", (e) => {
+			this.setTapStart(e);
 			if (this.state === REGULAR_POLYGON_TOOL_STATE.ADDING) {
 				this.creating = true;
 				this.handleAdding();
 			}
 		});
-		stage.on("pointermove", () => {
+		stage.on("pointermove", (e) => {
+			if (!this.isPressed(e)) return;
 			if (this.state === REGULAR_POLYGON_TOOL_STATE.DEFINING_SIZE) {
 				this.moved = true;
 				this.handleMovement();
 			}
 		});
-		stage.on("pointerup", () => {
+		stage.on("pointerup", (e) => {
+			const isTap = this.isTap(e);
+			if (isTap) this.moved = false;
 			if (this.state === REGULAR_POLYGON_TOOL_STATE.DEFINING_SIZE) {
 				this.creating = false;
 				this.handleSettingSize();
@@ -25593,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;
@@ -26360,12 +26894,16 @@ var WeaveStageDropAreaPlugin = class extends WeavePlugin {
 	initEvents() {
 		const stage = this.instance.getStage();
 		stage.container().addEventListener("dragover", (e) => {
+			e.preventDefault();
 			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;
@@ -26544,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");
@@ -26559,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,
@@ -26806,8 +27363,10 @@ 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
 exports.WEAVE_TEXT_NODE_TYPE = WEAVE_TEXT_NODE_TYPE
 exports.WEAVE_USERS_POINTERS_KEY = WEAVE_USERS_POINTERS_KEY
 exports.WEAVE_USERS_SELECTION_KEY = WEAVE_USERS_SELECTION_KEY
@@ -26857,6 +27416,7 @@ exports.WeaveStageZoomPlugin = WeaveStageZoomPlugin
 exports.WeaveStarNode = WeaveStarNode
 exports.WeaveStarToolAction = WeaveStarToolAction
 exports.WeaveStore = WeaveStore
+exports.WeaveStrokeNode = WeaveStrokeNode
 exports.WeaveTextNode = WeaveTextNode
 exports.WeaveTextToolAction = WeaveTextToolAction
 exports.WeaveUsersPointersPlugin = WeaveUsersPointersPlugin
@@ -26867,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