@inditextech/weave-sdk 5.0.0-SNAPSHOT.345.1 → 5.0.0-SNAPSHOT.366.1

package/dist/types.js

@@ -1157,8 +1157,8 @@ var require_isArray = __commonJS({ "../../node_modules/lodash/isArray.js"(export
 	* _.isArray(_.noop);
 	* // => false
 	*/
-	var isArray$14 = Array.isArray;
-	module.exports = isArray$14;
+	var isArray$13 = Array.isArray;
+	module.exports = isArray$13;
 } });
 
 //#endregion
@@ -1383,7 +1383,7 @@ var require_isTypedArray = __commonJS({ "../../node_modules/lodash/isTypedArray.
 //#endregion
 //#region ../../node_modules/lodash/isEmpty.js
 var require_isEmpty = __commonJS({ "../../node_modules/lodash/isEmpty.js"(exports, module) {
-	var baseKeys$1 = require__baseKeys(), getTag$1 = require__getTag(), isArguments$3 = require_isArguments(), isArray$13 = require_isArray(), isArrayLike$6 = require_isArrayLike(), isBuffer$3 = require_isBuffer(), isPrototype$2 = require__isPrototype(), isTypedArray$3 = require_isTypedArray();
+	var baseKeys$1 = require__baseKeys(), getTag$1 = require__getTag(), isArguments$3 = require_isArguments(), isArray$12 = require_isArray(), isArrayLike$6 = require_isArrayLike(), isBuffer$3 = require_isBuffer(), isPrototype$2 = require__isPrototype(), isTypedArray$3 = require_isTypedArray();
 	/** `Object#toString` result references. */
 	var mapTag$1 = "[object Map]", setTag$1 = "[object Set]";
 	/** Used for built-in method references. */
@@ -1425,7 +1425,7 @@ var require_isEmpty = __commonJS({ "../../node_modules/lodash/isEmpty.js"(export
 	*/
 	function isEmpty(value) {
 		if (value == null) return true;
-		if (isArrayLike$6(value) && (isArray$13(value) || typeof value == "string" || typeof value.splice == "function" || isBuffer$3(value) || isTypedArray$3(value) || isArguments$3(value))) return !value.length;
+		if (isArrayLike$6(value) && (isArray$12(value) || typeof value == "string" || typeof value.splice == "function" || isBuffer$3(value) || isTypedArray$3(value) || isArguments$3(value))) return !value.length;
 		var tag = getTag$1(value);
 		if (tag == mapTag$1 || tag == setTag$1) return !value.size;
 		if (isPrototype$2(value)) return !baseKeys$1(value).length;
@@ -1752,13 +1752,6 @@ const WEAVE_NODES_SELECTION_DEFAULT_CONFIG = {
 	style: { dragOpacity: .75 }
 };
 
-//#endregion
-//#region src/plugins/context-menu/constants.ts
-const WEAVE_CONTEXT_MENU_PLUGIN_KEY = "contextMenu";
-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 ../../node_modules/lodash/_listCacheClear.js
 var require__listCacheClear = __commonJS({ "../../node_modules/lodash/_listCacheClear.js"(exports, module) {
@@ -2865,7 +2858,7 @@ var require__isIndex = __commonJS({ "../../node_modules/lodash/_isIndex.js"(expo
 //#endregion
 //#region ../../node_modules/lodash/_arrayLikeKeys.js
 var require__arrayLikeKeys = __commonJS({ "../../node_modules/lodash/_arrayLikeKeys.js"(exports, module) {
-	var baseTimes = require__baseTimes(), isArguments$2 = require_isArguments(), isArray$12 = require_isArray(), isBuffer$2 = require_isBuffer(), isIndex$2 = require__isIndex(), isTypedArray$2 = require_isTypedArray();
+	var baseTimes = require__baseTimes(), isArguments$2 = require_isArguments(), isArray$11 = require_isArray(), isBuffer$2 = require_isBuffer(), isIndex$2 = require__isIndex(), isTypedArray$2 = require_isTypedArray();
 	/** Used for built-in method references. */
 	var objectProto$4 = Object.prototype;
 	/** Used to check objects for own properties. */
@@ -2879,7 +2872,7 @@ var require__arrayLikeKeys = __commonJS({ "../../node_modules/lodash/_arrayLikeK
 	* @returns {Array} Returns the array of property names.
 	*/
 	function arrayLikeKeys$2(value, inherited) {
-		var isArr = isArray$12(value), isArg = !isArr && isArguments$2(value), isBuff = !isArr && !isArg && isBuffer$2(value), isType = !isArr && !isArg && !isBuff && isTypedArray$2(value), skipIndexes = isArr || isArg || isBuff || isType, result = skipIndexes ? baseTimes(value.length, String) : [], length = result.length;
+		var isArr = isArray$11(value), isArg = !isArr && isArguments$2(value), isBuff = !isArr && !isArg && isBuffer$2(value), isType = !isArr && !isArg && !isBuff && isTypedArray$2(value), skipIndexes = isArr || isArg || isBuff || isType, result = skipIndexes ? baseTimes(value.length, String) : [], length = result.length;
 		for (var key in value) if ((inherited || hasOwnProperty$3.call(value, key)) && !(skipIndexes && (key == "length" || isBuff && (key == "offset" || key == "parent") || isType && (key == "buffer" || key == "byteLength" || key == "byteOffset") || isIndex$2(key, length)))) result.push(key);
 		return result;
 	}
@@ -3000,7 +2993,7 @@ var require_toPlainObject = __commonJS({ "../../node_modules/lodash/toPlainObjec
 //#endregion
 //#region ../../node_modules/lodash/_baseMergeDeep.js
 var require__baseMergeDeep = __commonJS({ "../../node_modules/lodash/_baseMergeDeep.js"(exports, module) {
-	var assignMergeValue$1 = require__assignMergeValue(), cloneBuffer = require__cloneBuffer(), cloneTypedArray = require__cloneTypedArray(), copyArray = require__copyArray(), initCloneObject = require__initCloneObject(), isArguments$1 = require_isArguments(), isArray$11 = require_isArray(), isArrayLikeObject = require_isArrayLikeObject(), isBuffer$1 = require_isBuffer(), isFunction = require_isFunction(), isObject$7 = require_isObject(), isPlainObject = require_isPlainObject(), isTypedArray$1 = require_isTypedArray(), safeGet$1 = require__safeGet(), toPlainObject = require_toPlainObject();
+	var assignMergeValue$1 = require__assignMergeValue(), cloneBuffer = require__cloneBuffer(), cloneTypedArray = require__cloneTypedArray(), copyArray = require__copyArray(), initCloneObject = require__initCloneObject(), isArguments$1 = require_isArguments(), isArray$10 = require_isArray(), isArrayLikeObject = require_isArrayLikeObject(), isBuffer$1 = require_isBuffer(), isFunction = require_isFunction(), isObject$7 = require_isObject(), isPlainObject = require_isPlainObject(), isTypedArray$1 = require_isTypedArray(), safeGet$1 = require__safeGet(), toPlainObject = require_toPlainObject();
 	/**
 	* A specialized version of `baseMerge` for arrays and objects which performs
 	* deep merges and tracks traversed objects enabling objects with circular
@@ -3025,9 +3018,9 @@ var require__baseMergeDeep = __commonJS({ "../../node_modules/lodash/_baseMergeD
 		var newValue = customizer ? customizer(objValue, srcValue, key + "", object, source, stack) : void 0;
 		var isCommon = newValue === void 0;
 		if (isCommon) {
-			var isArr = isArray$11(srcValue), isBuff = !isArr && isBuffer$1(srcValue), isTyped = !isArr && !isBuff && isTypedArray$1(srcValue);
+			var isArr = isArray$10(srcValue), isBuff = !isArr && isBuffer$1(srcValue), isTyped = !isArr && !isBuff && isTypedArray$1(srcValue);
 			newValue = srcValue;
-			if (isArr || isBuff || isTyped) if (isArray$11(objValue)) newValue = objValue;
+			if (isArr || isBuff || isTyped) if (isArray$10(objValue)) newValue = objValue;
 			else if (isArrayLikeObject(objValue)) newValue = copyArray(objValue);
 			else if (isBuff) {
 				isCommon = false;
@@ -3703,223 +3696,6 @@ function isNumber(value) {
 	return typeof value === "number" && !Number.isNaN(value);
 }
 
-//#endregion
-//#region src/actions/selection-tool/constants.ts
-const SELECTION_TOOL_ACTION_NAME = "selectionTool";
-const SELECTION_TOOL_STATE = {
-	["IDLE"]: "idle",
-	["SELECTING"]: "selection"
-};
-
-//#endregion
-//#region src/plugins/context-menu/context-menu.ts
-var WeaveContextMenuPlugin = class extends WeavePlugin {
-	getLayerName = void 0;
-	initLayer = void 0;
-	constructor(params) {
-		super();
-		const { config } = params ?? {};
-		this.config = {
-			xOffset: WEAVE_CONTEXT_MENU_X_OFFSET_DEFAULT,
-			yOffset: WEAVE_CONTEXT_MENU_Y_OFFSET_DEFAULT,
-			...config
-		};
-		this.initialize();
-	}
-	initialize() {
-		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;
-		this.pointers = {};
-	}
-	getName() {
-		return WEAVE_CONTEXT_MENU_PLUGIN_KEY;
-	}
-	onInit() {
-		this.initEvents();
-	}
-	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.getSelectionPlugin();
-		let nodes = [];
-		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.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();
-		let allNodesMutexUnlocked = true;
-		let allNodesUnlocked = true;
-		const actUser = this.instance.getStore().getUser();
-		for (const node of nodes) {
-			const locked = node.instance.getAttrs().locked;
-			const mutexInfo = this.instance.getNodeMutexLock(node.node?.key ?? "");
-			if (locked) {
-				allNodesUnlocked = false;
-				break;
-			}
-			if (mutexInfo && mutexInfo.user.id !== actUser.id) {
-				allNodesMutexUnlocked = false;
-				break;
-			}
-		}
-		if (!allNodesMutexUnlocked || !allNodesUnlocked) return;
-		if (selectionPlugin && !(eventTarget.getParent() instanceof Konva.Transformer && selectionPlugin.getSelectedNodes().length > 0)) {
-			selectionPlugin.setSelectedNodes([...nodes.map((node) => node.instance)]);
-			selectionPlugin.getHoverTransformer().nodes([]);
-		}
-		const containerRect = stage.container().getBoundingClientRect();
-		const pointerPos = stage.getPointerPosition();
-		const relativeClickPoint = stage.getRelativePointerPosition();
-		if (containerRect && pointerPos && relativeClickPoint && allNodesUnlocked) {
-			const contextMenuPoint = {
-				x: containerRect.left + pointerPos.x + (this.config.xOffset ?? 4),
-				y: containerRect.top + pointerPos.y + (this.config.yOffset ?? 4)
-			};
-			const stageClickPoint = this.getStageClickPoint(pointerPos);
-			this.contextMenuVisible = true;
-			this.instance.emitEvent("onNodeContextMenu", {
-				selection: nodes,
-				contextMenuPoint,
-				clickPoint: pointerPos,
-				stageClickPoint,
-				visible: true
-			});
-		}
-	}
-	closeContextMenu() {
-		this.contextMenuVisible = false;
-		this.instance.emitEvent("onNodeContextMenu", {
-			selection: [],
-			contextMenuPoint: {
-				x: 0,
-				y: 0
-			},
-			clickPoint: {
-				x: 0,
-				y: 0
-			},
-			stageClickPoint: {
-				x: 0,
-				y: 0
-			},
-			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();
-		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;
-			if (this.timer) return;
-			this.timer = setTimeout(() => {
-				this.tapHold = true;
-				const actualActions = this.instance.getActiveAction();
-				if (actualActions !== SELECTION_TOOL_ACTION_NAME) return;
-				delete this.pointers[e.evt.pointerId];
-				const selectedGroup = getTargetedNode(this.instance);
-				this.triggerContextMenu(e.target, selectedGroup);
-			}, this.tapHoldTimeout);
-		});
-		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.timer) {
-				clearTimeout(this.timer);
-				this.timer = null;
-				this.tapHold = false;
-			}
-		});
-		stage.on("contextmenu", (e) => {
-			e.evt.preventDefault();
-			if (!this.enabled) return;
-			const selectedGroup = getTargetedNode(this.instance);
-			this.triggerContextMenu(e.target, selectedGroup);
-		});
-		this.instance.addEventListener("onStageSelection", () => {
-			if (this.tapHold) return;
-			const containerRect = stage.container().getBoundingClientRect();
-			const pointerPos = stage.getPointerPosition();
-			if (containerRect && pointerPos) {
-				const contextMenuPoint = {
-					x: containerRect.left + pointerPos.x + (this.config.xOffset ?? 4),
-					y: containerRect.top + pointerPos.y + (this.config.yOffset ?? 4)
-				};
-				const stageClickPoint = this.getStageClickPoint(pointerPos);
-				this.instance.emitEvent("onNodeContextMenu", {
-					selection: [],
-					contextMenuPoint,
-					clickPoint: pointerPos,
-					stageClickPoint,
-					visible: false
-				});
-			}
-		});
-	}
-	getStageClickPoint(pointerPos) {
-		const stage = this.instance.getStage();
-		const scale = stage.scale();
-		const position = stage.position();
-		const stageClickPoint = {
-			x: (pointerPos.x - position.x) / scale.x,
-			y: (pointerPos.y - position.y) / scale.y
-		};
-		return stageClickPoint;
-	}
-	isContextMenuVisible() {
-		return this.contextMenuVisible;
-	}
-	isTapHold() {
-		return this.tapHold;
-	}
-	enable() {
-		this.enabled = true;
-	}
-	disable() {
-		this.enabled = false;
-	}
-};
-
 //#endregion
 //#region src/plugins/users-selection/constants.ts
 const WEAVE_USERS_SELECTION_KEY = "usersSelection";
@@ -4077,7 +3853,7 @@ var require_toNumber = __commonJS({ "../../node_modules/lodash/toNumber.js"(expo
 var require_debounce = __commonJS({ "../../node_modules/lodash/debounce.js"(exports, module) {
 	var isObject$3 = require_isObject(), now = require_now(), toNumber = require_toNumber();
 	/** Error message constants. */
-	var FUNC_ERROR_TEXT$3 = "Expected a function";
+	var FUNC_ERROR_TEXT$2 = "Expected a function";
 	var nativeMax = Math.max, nativeMin = Math.min;
 	/**
 	* Creates a debounced function that delays invoking `func` until after `wait`
@@ -4135,7 +3911,7 @@ var require_debounce = __commonJS({ "../../node_modules/lodash/debounce.js"(expo
 	*/
 	function debounce$1(func, wait, options) {
 		var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
-		if (typeof func != "function") throw new TypeError(FUNC_ERROR_TEXT$3);
+		if (typeof func != "function") throw new TypeError(FUNC_ERROR_TEXT$2);
 		wait = toNumber(wait) || 0;
 		if (isObject$3(options)) {
 			leading = !!options.leading;
@@ -4210,7 +3986,7 @@ var require_debounce = __commonJS({ "../../node_modules/lodash/debounce.js"(expo
 var require_throttle = __commonJS({ "../../node_modules/lodash/throttle.js"(exports, module) {
 	var debounce = require_debounce(), isObject$2 = require_isObject();
 	/** Error message constants. */
-	var FUNC_ERROR_TEXT$2 = "Expected a function";
+	var FUNC_ERROR_TEXT$1 = "Expected a function";
 	/**
 	* Creates a throttled function that only invokes `func` at most once per
 	* every `wait` milliseconds. The throttled function comes with a `cancel`
@@ -4257,7 +4033,7 @@ var require_throttle = __commonJS({ "../../node_modules/lodash/throttle.js"(expo
 	*/
 	function throttle(func, wait, options) {
 		var leading = true, trailing = true;
-		if (typeof func != "function") throw new TypeError(FUNC_ERROR_TEXT$2);
+		if (typeof func != "function") throw new TypeError(FUNC_ERROR_TEXT$1);
 		if (isObject$2(options)) {
 			leading = "leading" in options ? !!options.leading : leading;
 			trailing = "trailing" in options ? !!options.trailing : trailing;
@@ -4278,170 +4054,310 @@ const WEAVE_STAGE_NODE_TYPE = "stage";
 const WEAVE_STAGE_DEFAULT_MODE = "default";
 
 //#endregion
-//#region src/plugins/stage-grid/constants.ts
-const WEAVE_STAGE_GRID_PLUGIN_KEY = "stageGrid";
-const WEAVE_GRID_TYPES = {
-	["LINES"]: "lines",
-	["DOTS"]: "dots"
+//#region src/actions/selection-tool/constants.ts
+const SELECTION_TOOL_ACTION_NAME = "selectionTool";
+const SELECTION_TOOL_STATE = {
+	["IDLE"]: "idle",
+	["SELECTING"]: "selection"
 };
-const WEAVE_GRID_DOT_TYPES = {
-	["SQUARE"]: "square",
-	["CIRCLE"]: "circle"
+
+//#endregion
+//#region src/constants.ts
+const DEFAULT_THROTTLE_MS = 50;
+const DEFAULT_ADD_NODE_OPTIONS = { emitUserChangeEvent: false };
+const DEFAULT_UPDATE_NODE_OPTIONS = { emitUserChangeEvent: false };
+const DEFAULT_REMOVE_NODE_OPTIONS = { emitUserChangeEvent: false };
+const DEFAULT_MOVE_NODE_OPTIONS = { emitUserChangeEvent: false };
+const WEAVE_DEFAULT_CONFIG = {
+	behaviors: { axisLockThreshold: 5 },
+	performance: { upscale: { enabled: false } }
 };
-const WEAVE_GRID_DEFAULT_CONFIG = {
-	type: WEAVE_GRID_TYPES.LINES,
-	gridColor: "#b3b3b3",
-	gridMajorColor: "#b3b3b3",
-	gridOriginColor: "#ff746c",
-	gridSize: 20,
-	gridMajorEvery: 10,
-	gridMajorRatio: 2,
-	gridStroke: 1,
-	gridDotType: WEAVE_GRID_DOT_TYPES.CIRCLE,
-	gridDotRadius: 1,
-	gridDotRectSize: 2
-};
-const WEAVE_GRID_LAYER_ID = "gridLayer";
 
 //#endregion
-//#region src/plugins/stage-panning/constants.ts
-const WEAVE_STAGE_PANNING_KEY = "stagePanning";
-const WEAVE_STAGE_PANNING_THROTTLE_MS = 20;
-const WEAVE_STAGE_PANNING_DEFAULT_CONFIG = { edgePan: {
-	offset: 25,
-	speed: 20
-} };
-
-//#endregion
-//#region src/plugins/nodes-multi-selection-feedback/constants.ts
-const WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_KEY = "nodesMultiSelectionFeedback";
-const WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_LAYER_ID = "selectionLayer";
-const WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_DEFAULT_CONFIG = { style: {
-	stroke: "#ff2c2cff",
-	strokeWidth: 2,
-	fill: "transparent"
-} };
-
-//#endregion
-//#region src/constants.ts
-const DEFAULT_THROTTLE_MS = 50;
-const DEFAULT_ADD_NODE_OPTIONS = { emitUserChangeEvent: false };
-const DEFAULT_UPDATE_NODE_OPTIONS = { emitUserChangeEvent: false };
-const DEFAULT_REMOVE_NODE_OPTIONS = { emitUserChangeEvent: false };
-const DEFAULT_MOVE_NODE_OPTIONS = { emitUserChangeEvent: false };
-const WEAVE_DEFAULT_CONFIG = {
-	behaviors: { axisLockThreshold: 5 },
-	performance: { upscale: { enabled: false } }
+//#region src/plugins/nodes-selection/gesture-detector.ts
+const MOVED_DISTANCE = 5;
+const DOUBLE_TAP_DISTANCE = 10;
+const DOUBLE_TAP_TIME = 300;
+/**
+* Tracks single-tap, double-tap, and drag-move gesture state for the
+* nodes-selection plugin. Has no dependency on Weave or Konva internals.
+*/
+var GestureDetector = class {
+	taps = 0;
+	tapStart = null;
+	previousTap = null;
+	tapTimeoutId = null;
+	isDoubleTap = false;
+	/** Call on every pointerdown to record the tap origin. */
+	setTapStart(clientX, clientY) {
+		this.taps += 1;
+		this.tapStart = {
+			x: clientX,
+			y: clientY,
+			time: performance.now()
+		};
+	}
+	/** Returns true if the pointer moved more than the move threshold since tap start. */
+	checkMoved(clientX, clientY) {
+		if (!this.tapStart) return false;
+		const dist = Math.hypot(clientX - this.tapStart.x, clientY - this.tapStart.y);
+		return dist > MOVED_DISTANCE;
+	}
+	/** Returns true if a drag moved further than the move threshold between two stage positions. */
+	checkMovedDrag(init, actual) {
+		if (!this.tapStart) return false;
+		const dist = Math.hypot(actual.x - init.x, actual.y - init.y);
+		return dist > MOVED_DISTANCE;
+	}
+	/**
+	* Call on pointerup after setTapStart to detect a double-tap.
+	* Sets isDoubleTap = true when two taps occur close in time and space.
+	*/
+	checkDoubleTap(clientX, clientY) {
+		if (!this.previousTap) return;
+		const now$2 = performance.now();
+		const dist = Math.hypot(clientX - this.previousTap.x, clientY - this.previousTap.y);
+		if (this.tapTimeoutId) clearTimeout(this.tapTimeoutId);
+		this.tapTimeoutId = setTimeout(() => {
+			this.taps = 0;
+		}, DOUBLE_TAP_TIME + 5);
+		if (this.taps > 1 && now$2 - this.previousTap.time < DOUBLE_TAP_TIME && dist < DOUBLE_TAP_DISTANCE) {
+			this.taps = 0;
+			this.tapStart = null;
+			this.isDoubleTap = true;
+		}
+	}
+	/** Call after checkDoubleTap on pointerup to advance the tap history. */
+	commitTap() {
+		this.previousTap = this.tapStart;
+	}
+	resetDoubleTap() {
+		this.isDoubleTap = false;
+	}
+	reset() {
+		this.taps = 0;
+		this.tapStart = null;
+		this.previousTap = null;
+		this.isDoubleTap = false;
+		if (this.tapTimeoutId) {
+			clearTimeout(this.tapTimeoutId);
+			this.tapTimeoutId = null;
+		}
+	}
 };
 
 //#endregion
-//#region src/plugins/users-presence/constants.ts
-const WEAVE_USER_PRESENCE_KEY = "userPresence";
-const WEAVE_USERS_PRESENCE_PLUGIN_KEY = "usersPresence";
-const WEAVE_USERS_PRESENCE_CONFIG_DEFAULT_PROPS = { awarenessThrottleMs: DEFAULT_THROTTLE_MS };
-
-//#endregion
-//#region src/plugins/nodes-selection/nodes-selection.ts
-var WeaveNodesSelectionPlugin = class extends WeavePlugin {
-	selectionStart = null;
-	panSpeed = {
+//#region src/plugins/nodes-selection/edge-panning.ts
+/**
+* Handles the rAF-driven auto-pan loop that scrolls the canvas when the
+* pointer is held near an edge during area selection.
+*/
+var EdgePanning = class {
+	panLoopId = null;
+	direction = {
 		x: 0,
 		y: 0
 	};
-	panDirection = {
+	speed = {
 		x: 0,
 		y: 0
 	};
-	panLoopId = null;
-	prevSelectedNodes = [];
-	handledClickOrTap = false;
-	dragInProcess = false;
-	dragSelectedNodes = [];
-	transformInProcess = false;
-	serializedSelectedNodes = [];
-	constructor(params) {
-		super();
-		this.config = mergeExceptArrays(WEAVE_NODES_SELECTION_DEFAULT_CONFIG, params?.config ?? {});
-		this.initialize();
+	constructor(config, callbacks) {
+		this.config = config;
+		this.callbacks = callbacks;
 	}
-	initialize() {
-		this.defaultEnabledAnchors = this.config.selection?.enabledAnchors ?? [
-			"top-left",
-			"top-center",
-			"top-right",
-			"middle-right",
-			"middle-left",
-			"bottom-left",
-			"bottom-center",
-			"bottom-right"
-		];
-		this.taps = 0;
-		this.isSpaceKeyPressed = false;
-		this.isDoubleTap = false;
-		this.tapStart = null;
-		this.previousTap = null;
-		this.active = false;
-		this.didMove = false;
-		this.selecting = false;
-		this.initialized = false;
-		this.enabled = false;
-		this.pointers = {};
-		this.panLoopId = null;
-		this.tapTimeoutId = null;
-		this.dragSelectedNodes = [];
-		this.dragInProcess = false;
+	/** Start the panning rAF loop. */
+	start() {
+		this.panLoopId = requestAnimationFrame(() => this.loop());
 	}
-	getName() {
-		return WEAVE_NODES_SELECTION_KEY;
+	/** Stop the panning rAF loop. */
+	stop() {
+		if (this.panLoopId !== null) {
+			cancelAnimationFrame(this.panLoopId);
+			this.panLoopId = null;
+		}
 	}
-	getLayerName() {
-		return WEAVE_NODES_SELECTION_LAYER_ID;
+	/** Reset direction and speed vectors to zero. */
+	reset() {
+		this.direction.x = 0;
+		this.direction.y = 0;
+		this.speed = {
+			x: 0,
+			y: 0
+		};
 	}
-	getConfiguration() {
-		return this.config;
+	/**
+	* Recalculate pan direction and speed based on current pointer position.
+	* Should be called on every pointermove during area selection.
+	*/
+	updateDirection() {
+		const stage = this.callbacks.getStage();
+		const pos = stage.getPointerPosition();
+		const viewWidth = stage.width();
+		const viewHeight = stage.height();
+		if (!pos) return;
+		const distLeft = pos.x;
+		const distRight = viewWidth - pos.x;
+		const distTop = pos.y;
+		const distBottom = viewHeight - pos.y;
+		this.direction.x = 0;
+		this.direction.y = 0;
+		this.speed = {
+			x: 0,
+			y: 0
+		};
+		if (distLeft < this.config.edgeThreshold) {
+			this.direction.x = 1;
+			this.speed.x = this.getSpeedFromEdge(distLeft);
+		} else if (distRight < this.config.edgeThreshold) {
+			this.direction.x = -1;
+			this.speed.x = this.getSpeedFromEdge(distRight);
+		}
+		if (distTop < this.config.edgeThreshold) {
+			this.direction.y = 1;
+			this.speed.y = this.getSpeedFromEdge(distTop);
+		} else if (distBottom < this.config.edgeThreshold) {
+			this.direction.y = -1;
+			this.speed.y = this.getSpeedFromEdge(distBottom);
+		}
 	}
-	initLayer() {
-		const stage = this.instance.getStage();
-		const layer = new Konva.Layer({ id: this.getLayerName() });
-		stage.add(layer);
+	getSpeedFromEdge(distanceFromEdge) {
+		const stage = this.callbacks.getStage();
+		const scaledDistance = distanceFromEdge / stage.scaleX();
+		if (scaledDistance < this.config.edgeThreshold) {
+			const factor = 1 - scaledDistance / this.config.edgeThreshold;
+			return this.config.minScrollSpeed + (this.config.maxScrollSpeed - this.config.minScrollSpeed) * factor;
+		}
+		return 0;
 	}
-	isPasting() {
-		const copyPastePlugin = this.instance.getPlugin("copyPasteNodes");
-		if (!copyPastePlugin) return false;
-		return copyPastePlugin.isPasting();
+	loop() {
+		const stage = this.callbacks.getStage();
+		if (this.callbacks.isSelecting() && (this.direction.x !== 0 || this.direction.y !== 0)) {
+			const scale = stage.scaleX();
+			const stepX = (this.speed.x || 0) / scale;
+			const stepY = (this.speed.y || 0) / scale;
+			stage.x(stage.x() + this.direction.x * stepX);
+			stage.y(stage.y() + this.direction.y * stepY);
+			this.callbacks.onTick(this.direction.x * stepX, this.direction.y * stepY);
+		}
+		if (this.callbacks.isSelecting()) this.panLoopId = requestAnimationFrame(() => this.loop());
 	}
-	isAreaSelecting() {
-		return this.selecting;
+};
+
+//#endregion
+//#region src/plugins/nodes-selection/area-selection.ts
+/**
+* Manages the visual selection-rectangle drawn while the user drags an area
+* selection, plus the coordinate state (x1/y1/x2/y2) that tracks its bounds.
+*/
+var AreaSelector = class {
+	x1 = 0;
+	y1 = 0;
+	x2 = 0;
+	y2 = 0;
+	/** The stage-space anchor point when area selection started (updated by edge panning). */
+	selectionStart = null;
+	/**
+	* Create and add the selection Konva.Rect to the given layer.
+	* Must be called once during plugin initialisation.
+	*/
+	init(layer, config, scaleX) {
+		this.rect = new Konva.Rect({
+			...config,
+			...config.strokeWidth && { strokeWidth: config.strokeWidth / scaleX },
+			...config.dash && { dash: config.dash.map((d) => d / scaleX) },
+			visible: false,
+			listening: false
+		});
+		layer.add(this.rect);
 	}
-	isSelecting() {
-		return this.instance.getActiveAction() === SELECTION_TOOL_ACTION_NAME;
+	getRect() {
+		return this.rect;
 	}
-	isNodeSelected(ele) {
-		let selected = false;
-		if (this.getSelectedNodes().length === 1 && this.getSelectedNodes()[0].getAttrs().id === ele.getAttrs().id) selected = true;
-		return selected;
+	/** Returns the screen-space bounding box of the selection rectangle. */
+	getBox() {
+		return this.rect.getClientRect();
 	}
-	onInit() {
-		const stage = this.instance.getStage();
-		const selectionLayer = this.getLayer();
-		stage.container().tabIndex = 1;
-		stage.container().focus();
-		const selectionRectangle = new Konva.Rect({
-			...this.config.selectionArea,
-			...this.config.selectionArea.strokeWidth && { strokeWidth: this.config.selectionArea.strokeWidth / stage.scaleX() },
-			...this.config.selectionArea.dash && { dash: this.config.selectionArea.dash.map((d) => d / stage.scaleX()) },
-			visible: false,
-			listening: false
+	/** Set the anchor corner when area selection begins. */
+	setStart(x, y) {
+		this.x1 = x;
+		this.y1 = y;
+		this.x2 = x;
+		this.y2 = y;
+		this.selectionStart = {
+			x,
+			y
+		};
+	}
+	/**
+	* Adjust stroke and dash to compensate for stage scale, reset dimensions.
+	* Call when area selection starts so the rect looks pixel-perfect at any zoom.
+	*/
+	resetForScale(scaleX, config) {
+		this.rect.strokeWidth(config.strokeWidth / scaleX);
+		this.rect.dash(config.dash?.map((d) => d / scaleX) ?? []);
+		this.rect.width(0);
+		this.rect.height(0);
+	}
+	/**
+	* Recalculate x2/y2 from the current pointer position and repaint the rect.
+	* @param selectNone — Callback that clears the transformer selection; called
+	*   before updating the rect so previously selected nodes are deselected.
+	*/
+	update(stage, selectNone) {
+		this.x2 = stage.getRelativePointerPosition()?.x ?? 0;
+		this.y2 = stage.getRelativePointerPosition()?.y ?? 0;
+		selectNone();
+		this.rect.setAttrs({
+			visible: true,
+			x: Math.min(this.x1, this.x2),
+			y: Math.min(this.y1, this.y2),
+			width: Math.abs(this.x2 - this.x1),
+			height: Math.abs(this.y2 - this.y1)
 		});
-		selectionLayer?.add(selectionRectangle);
-		const tr = new Konva.Transformer({
+	}
+	hide() {
+		this.rect.setAttrs({
+			width: 0,
+			height: 0,
+			visible: false
+		});
+	}
+};
+
+//#endregion
+//#region src/plugins/nodes-selection/transformer-controller.ts
+/**
+* Creates and owns both Konva.Transformer instances (selection + hover) and
+* registers all transformer-level event handlers. Business-logic callbacks are
+* injected to keep this class decoupled from WeaveNodesSelectionPlugin internals.
+*/
+var TransformerController = class {
+	dragInProcess = false;
+	transformInProcess = false;
+	didMove = false;
+	initialPos = null;
+	originalNodes = {};
+	originalContainers = {};
+	currentDragSelectedNodes = [];
+	/** Mirrors the previous transformer node list for undo/redo handling. */
+	prevSelectedNodes = [];
+	constructor(instance, config, gesture, callbacks) {
+		this.instance = instance;
+		this.config = config;
+		this.gesture = gesture;
+		this.callbacks = callbacks;
+	}
+	/** Create transformers, add to layer, and register all events. Must be called once during onInit. */
+	setup(layer) {
+		this.tr = new Konva.Transformer({
 			id: "selectionTransformer",
 			...this.config.selection,
 			listening: true,
 			shouldOverdrawWholeArea: true
 		});
-		selectionLayer?.add(tr);
-		const trHover = new Konva.Transformer({
+		layer.add(this.tr);
+		this.trHover = new Konva.Transformer({
 			id: "hoverTransformer",
 			...this.config.hover,
 			ignoreStroke: true,
@@ -4450,94 +4366,87 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			enabledAnchors: [],
 			listening: false
 		});
-		selectionLayer?.add(trHover);
+		layer.add(this.trHover);
+		this.registerStagePointerMove();
+		this.registerTransformerEvents();
+		this.registerInstanceEvents();
+	}
+	getTransformer() {
+		return this.tr;
+	}
+	getHoverTransformer() {
+		return this.trHover;
+	}
+	isDragging() {
+		return this.dragInProcess;
+	}
+	isTransforming() {
+		return this.transformInProcess;
+	}
+	getStage() {
+		return this.instance.getStage();
+	}
+	registerStagePointerMove() {
+		const stage = this.getStage();
 		const handlePointerMoveInit = () => {
 			if (this.dragInProcess) return;
-			if (tr.nodes().length === 1 && tr.nodes()[0].getAttrs().isContainerPrincipal) {
+			if (this.tr.nodes().length === 1 && this.tr.nodes()[0].getAttrs().isContainerPrincipal) {
 				const pos = stage.getPointerPosition();
 				if (!pos) return;
 				const shapeUnder = stage.getIntersection(pos);
 				if (!shapeUnder) {
-					tr.setAttrs({ listening: true });
-					tr.forceUpdate();
+					this.tr.setAttrs({ listening: true });
+					this.tr.forceUpdate();
 				}
-				if (shapeUnder && tr.getChildren().includes(shapeUnder) && shapeUnder.name() === "back") {
-					tr.setAttrs({ listening: false });
-					tr.forceUpdate();
+				if (shapeUnder && this.tr.getChildren().includes(shapeUnder) && shapeUnder.name() === "back") {
+					this.tr.setAttrs({ listening: false });
+					this.tr.forceUpdate();
 				}
-				if (shapeUnder && tr.nodes()[0].getChildren().includes(shapeUnder)) {
-					tr.setAttrs({ listening: false });
-					tr.forceUpdate();
+				if (shapeUnder && this.tr.nodes()[0].getChildren().includes(shapeUnder)) {
+					this.tr.setAttrs({ listening: false });
+					this.tr.forceUpdate();
 				}
-				if (shapeUnder && !tr.getChildren().includes(shapeUnder) && tr.nodes()[0].getChildren().includes(shapeUnder)) {
-					tr.setAttrs({ listening: true });
-					tr.forceUpdate();
+				if (shapeUnder && !this.tr.getChildren().includes(shapeUnder) && this.tr.nodes()[0].getChildren().includes(shapeUnder)) {
+					this.tr.setAttrs({ listening: true });
+					this.tr.forceUpdate();
 				}
 			}
 		};
 		stage.on("pointermove", (0, import_throttle.default)(handlePointerMoveInit, DEFAULT_THROTTLE_MS));
-		tr.on("transformstart", (e) => {
+	}
+	registerTransformerEvents() {
+		const stage = this.getStage();
+		let nodeHovered = void 0;
+		this.tr.on("transformstart", (e) => {
 			this.transformInProcess = true;
-			this.triggerSelectedNodesEvent();
-			const selectedNodes$1 = tr.nodes();
-			for (const node of selectedNodes$1) node.handleMouseout(e);
-			if (this.getSelectedNodes().length > 1) this.instance.setMutexLock({
-				nodeIds: selectedNodes$1.map((node) => node.id()),
+			this.callbacks.triggerSelectedNodesEvent();
+			const selectedNodes = this.tr.nodes();
+			for (const node of selectedNodes) node.handleMouseout(e);
+			if (selectedNodes.length > 1) this.instance.setMutexLock({
+				nodeIds: selectedNodes.map((node) => node.id()),
 				operation: "nodes-transform"
 			});
 			this.instance.getHooks().callHook("weave:onTransformerTransformStart", {
 				e,
-				nodes: selectedNodes$1
+				nodes: selectedNodes
 			});
 		});
-		let nodeHovered = void 0;
-		tr.on("mousemove", (e) => {
-			if (this.dragInProcess) return;
-			const pointerPos = stage.getPointerPosition();
-			if (!pointerPos) return;
-			this.disable();
-			const shape = stage.getIntersection(pointerPos);
-			this.enable();
-			if (shape) {
-				const targetNode = this.instance.getInstanceRecursive(shape);
-				if (targetNode && targetNode !== nodeHovered) {
-					this.instance.getStage().handleMouseover(e);
-					nodeHovered?.handleMouseout?.(e);
-					targetNode?.handleMouseover?.(e);
-					nodeHovered = targetNode;
-				}
-				targetNode?.handleMouseover?.(e);
-			} else nodeHovered?.handleMouseout?.(e);
-		});
-		tr.on("mouseover", () => {
-			const nodesSelected = tr.nodes();
-			if (nodesSelected.length > 1) stage.container().style.cursor = "grab";
-		});
-		tr.on("mouseout", (e) => {
-			this.instance.getStage().handleMouseover?.(e);
-			nodeHovered = void 0;
-		});
-		window.addEventListener("mouseout", (e) => {
-			if (nodeHovered) {
-				nodeHovered.handleMouseout?.(e);
-				nodeHovered = void 0;
-			}
-			this.instance.getStage().handleMouseover?.(e);
-		}, { signal: this.instance.getEventsController()?.signal });
 		const handleTransform = (e) => {
-			const moved = this.checkMoved(e);
-			if (moved) this.getContextMenuPlugin()?.cancelLongPressTimer();
-			this.triggerSelectedNodesEvent();
+			const moved = this.gesture.checkMoved(e.evt.clientX, e.evt.clientY);
+			if (moved) this.callbacks.getContextMenuPlugin()?.cancelLongPressTimer();
+			this.callbacks.triggerSelectedNodesEvent();
+			const selectedNodes = this.tr.nodes();
 			this.instance.getHooks().callHook("weave:onTransformerTransform", {
 				e,
 				nodes: selectedNodes
 			});
-			if (this.getUsersPresencePlugin()) {
-				for (const node of tr.nodes()) {
+			const usersPresence = this.callbacks.getUsersPresencePlugin();
+			if (usersPresence) {
+				for (const node of this.tr.nodes()) {
 					let parentId = node.getParent()?.id() ?? "";
 					const parent = node.getParent();
 					if (parent?.getAttrs().nodeId) parentId = parent.getAttrs().nodeId;
-					this.getUsersPresencePlugin()?.setPresence(node.id(), parentId, {
+					usersPresence.setPresence(node.id(), parentId, {
 						x: node.x(),
 						y: node.y(),
 						width: node.width(),
@@ -4548,65 +4457,92 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 						strokeScaleEnabled: false
 					}, false);
 				}
-				this.getUsersPresencePlugin()?.forceSendPresence();
+				usersPresence.forceSendPresence();
 			}
 		};
-		tr.on("transform", (0, import_throttle.default)(handleTransform, DEFAULT_THROTTLE_MS));
-		tr.on("transformend", (e) => {
+		this.tr.on("transform", (0, import_throttle.default)(handleTransform, DEFAULT_THROTTLE_MS));
+		this.tr.on("transformend", (e) => {
 			this.transformInProcess = false;
-			if (this.getSelectedNodes().length > 1) this.instance.releaseMutexLock();
-			const selectedNodes$1 = tr.nodes();
-			for (const node of selectedNodes$1) {
+			const selectedNodes = this.tr.nodes();
+			if (selectedNodes.length > 1) this.instance.releaseMutexLock();
+			for (const node of selectedNodes) {
 				node.handleDeselectNode();
 				node.handleSelectNode();
 			}
-			tr.forceUpdate();
-			this.triggerSelectedNodesEvent();
+			this.tr.forceUpdate();
+			this.callbacks.triggerSelectedNodesEvent();
 			this.instance.getHooks().callHook("weave:onTransformerTransformEnd", {
 				e,
-				nodes: selectedNodes$1
+				nodes: selectedNodes
 			});
 		});
-		let initialPos = null;
-		let originalNodes = {};
-		let originalContainers = {};
-		let selectedNodes = [];
-		tr.on("dragstart", (e) => {
+		this.tr.on("mousemove", (e) => {
+			if (this.dragInProcess) return;
+			const pointerPos = stage.getPointerPosition();
+			if (!pointerPos) return;
+			this.callbacks.disablePlugin();
+			const shape = stage.getIntersection(pointerPos);
+			this.callbacks.enablePlugin();
+			if (shape) {
+				const targetNode = this.instance.getInstanceRecursive(shape);
+				if (targetNode && targetNode !== nodeHovered) {
+					this.instance.getStage().handleMouseover(e);
+					nodeHovered?.handleMouseout?.(e);
+					targetNode?.handleMouseover?.(e);
+					nodeHovered = targetNode;
+				}
+				targetNode?.handleMouseover?.(e);
+			} else nodeHovered?.handleMouseout?.(e);
+		});
+		this.tr.on("mouseover", () => {
+			const nodesSelected = this.tr.nodes();
+			if (nodesSelected.length > 1) stage.container().style.cursor = "grab";
+		});
+		this.tr.on("mouseout", (e) => {
+			this.instance.getStage().handleMouseover?.(e);
+			nodeHovered = void 0;
+		});
+		window.addEventListener("mouseout", (e) => {
+			if (nodeHovered) {
+				nodeHovered.handleMouseout?.(e);
+				nodeHovered = void 0;
+			}
+			this.instance.getStage().handleMouseover?.(e);
+		}, { signal: this.instance.getEventsController().signal });
+		this.tr.on("dragstart", (e) => {
 			this.dragInProcess = true;
 			if (!e?.evt) return;
-			let isWheelMousePressed = false;
-			if (e.evt?.button === 1) isWheelMousePressed = true;
+			const isWheelMousePressed = e.evt?.button === 1;
 			const mainLayer = this.instance.getMainLayer();
 			if (!mainLayer) return;
-			initialPos = {
+			this.initialPos = {
 				x: e.target.x(),
 				y: e.target.y()
 			};
 			this.didMove = false;
-			const stage$1 = this.instance.getStage();
-			this.saveDragSelectedNodes();
-			this.setNodesOpacityOnDrag();
-			selectedNodes = tr.nodes();
+			this.callbacks.saveDragSelectedNodes();
+			this.callbacks.setNodesOpacityOnDrag();
+			this.currentDragSelectedNodes = this.tr.nodes();
 			if (isWheelMousePressed) {
 				e.cancelBubble = true;
 				e.target.stopDrag();
 				return;
 			}
-			for (const node of selectedNodes) {
+			for (const node of this.currentDragSelectedNodes) {
 				const originalNode = node.clone();
 				let originalContainer = node.getParent();
-				if (originalContainer?.getAttrs().nodeId) originalContainer = stage$1.findOne(`#${originalContainer.getAttrs().nodeId}`);
-				originalNodes[node.getAttrs().id ?? ""] = originalNode;
-				originalContainers[node.getAttrs().id ?? ""] = originalContainer;
+				if (originalContainer?.getAttrs().nodeId) originalContainer = stage.findOne(`#${originalContainer.getAttrs().nodeId}`);
+				this.originalNodes[node.getAttrs().id ?? ""] = originalNode;
+				this.originalContainers[node.getAttrs().id ?? ""] = originalContainer;
 			}
 			e.cancelBubble = true;
 			this.instance.getHooks().callHook("weave:onTransformerDragStart", {
 				e,
-				nodes: selectedNodes
+				nodes: this.currentDragSelectedNodes
 			});
-			tr.forceUpdate();
-			if (selectedNodes.length > 1) this.instance.setMutexLock({
-				nodeIds: selectedNodes.map((node) => node.id()),
+			this.tr.forceUpdate();
+			if (this.currentDragSelectedNodes.length > 1) this.instance.setMutexLock({
+				nodeIds: this.currentDragSelectedNodes.map((node) => node.id()),
 				operation: "nodes-drag"
 			});
 		});
@@ -4615,16 +4551,15 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				x: e.target.x(),
 				y: e.target.y()
 			};
-			let isWheelMousePressed = false;
-			if (e.evt?.button === 1) isWheelMousePressed = true;
+			const isWheelMousePressed = e.evt?.button === 1;
 			e.cancelBubble = true;
 			this.instance.getHooks().callHook("weave:onTransformerDragMove", {
 				e,
-				nodes: selectedNodes
+				nodes: this.currentDragSelectedNodes
 			});
-			if (initialPos) {
-				const moved = this.checkMovedDrag(initialPos, actualPos);
-				if (moved) this.getContextMenuPlugin()?.cancelLongPressTimer();
+			if (this.initialPos) {
+				const moved = this.gesture.checkMovedDrag(this.initialPos, actualPos);
+				if (moved) this.callbacks.getContextMenuPlugin()?.cancelLongPressTimer();
 			}
 			if (isWheelMousePressed) {
 				e.cancelBubble = true;
@@ -4633,64 +4568,65 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			}
 			this.didMove = true;
 			let selectionContainsFrames = false;
-			for (let i = 0; i < selectedNodes.length; i++) {
-				const node = selectedNodes[i];
+			for (let i = 0; i < this.currentDragSelectedNodes.length; i++) {
+				const node = this.currentDragSelectedNodes[i];
 				selectionContainsFrames = selectionContainsFrames || hasFrames(node);
 				node.updatePosition(node.getAbsolutePosition());
 			}
-			if (selectedNodes.length === 1) {
-				originalNodes = {};
-				originalContainers = {};
+			if (this.currentDragSelectedNodes.length === 1) {
+				this.originalNodes = {};
+				this.originalContainers = {};
 			}
-			if (this.isSelecting() && selectedNodes.length > 1) {
+			if (this.callbacks.isSelecting() && this.currentDragSelectedNodes.length > 1) {
 				clearContainerTargets(this.instance);
-				const layerToMove = containerOverCursor(this.instance, selectedNodes);
-				if (this.getUsersPresencePlugin() && this.dragInProcess) {
-					for (const node of selectedNodes) {
+				const layerToMove = containerOverCursor(this.instance, this.currentDragSelectedNodes);
+				const usersPresence = this.callbacks.getUsersPresencePlugin();
+				if (usersPresence && this.dragInProcess) {
+					for (const node of this.currentDragSelectedNodes) {
 						let parentId = node.getParent()?.id() ?? "";
 						const parent = node.getParent();
 						if (parent?.getAttrs().nodeId) parentId = parent.getAttrs().nodeId;
-						this.getUsersPresencePlugin()?.setPresence(node.id(), parentId, {
+						usersPresence.setPresence(node.id(), parentId, {
 							x: node.x(),
 							y: node.y()
 						}, false);
 					}
-					this.getUsersPresencePlugin()?.forceSendPresence();
+					usersPresence.forceSendPresence();
 				}
 				if (layerToMove && !selectionContainsFrames) layerToMove.fire(WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
 			}
-			tr.forceUpdate();
+			this.tr.forceUpdate();
 		};
-		tr.on("dragmove", handleDragMove);
-		tr.on("dragend", (e) => {
+		this.tr.on("dragmove", handleDragMove);
+		this.tr.on("dragend", (e) => {
 			this.dragInProcess = false;
 			const mainLayer = this.instance.getMainLayer();
 			if (!mainLayer) return;
 			this.instance.getSelectionLayer()?.hitGraphEnabled(true);
 			this.instance.getMainLayer()?.hitGraphEnabled(true);
 			if (!this.didMove) return;
-			if (selectedNodes.length > 1) this.instance.releaseMutexLock();
+			if (this.currentDragSelectedNodes.length > 1) this.instance.releaseMutexLock();
 			e.cancelBubble = true;
 			this.instance.getHooks().callHook("weave:onTransformerDragEnd", {
 				e,
-				nodes: selectedNodes
+				nodes: this.currentDragSelectedNodes
 			});
 			this.instance.getCloningManager().cleanupClones();
-			this.getStagePanningPlugin()?.cleanupEdgeMoveIntervals();
+			this.callbacks.getStagePanningPlugin()?.cleanupEdgeMoveIntervals();
 			let selectionContainsFrames = false;
-			for (let i = 0; i < selectedNodes.length; i++) {
-				const node = selectedNodes[i];
+			for (let i = 0; i < this.currentDragSelectedNodes.length; i++) {
+				const node = this.currentDragSelectedNodes[i];
 				selectionContainsFrames = selectionContainsFrames || hasFrames(node);
 				node.updatePosition(node.getAbsolutePosition());
 			}
-			if (this.isSelecting() && selectedNodes.length > 1) {
+			if (this.callbacks.isSelecting() && this.currentDragSelectedNodes.length > 1) {
 				const toSelect = [];
 				const toUpdate = [];
 				this.instance.stateTransactional(() => {
 					const actualCursor = stage.container().style.cursor;
 					stage.container().style.cursor = "wait";
 					clearContainerTargets(this.instance);
-					const layerToMove = containerOverCursor(this.instance, selectedNodes);
+					const layerToMove = containerOverCursor(this.instance, this.currentDragSelectedNodes);
 					const nodeUpdate = (node) => {
 						const isLockedToContainer = node.getAttrs().lockToContainer;
 						let moved = false;
@@ -4700,18 +4636,17 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 							let containerToMove = this.instance.getMainLayer();
 							if (layerToMove) containerToMove = layerToMove;
 							if (containerToMove && !selectionContainsFrames) {
-								moved = moveNodeToContainerNT(this.instance, node, containerToMove, originalNodes[node.getAttrs().id ?? ""], originalContainers[node.getAttrs().id ?? ""]);
+								moved = moveNodeToContainerNT(this.instance, node, containerToMove, this.originalNodes[node.getAttrs().id ?? ""], this.originalContainers[node.getAttrs().id ?? ""]);
 								if (moved) this.instance.emitEvent("onNodeChangedContainer", {
-									originalNode: originalNodes[node.getAttrs().id ?? ""] ?? null,
-									originalContainer: originalContainers[node.getAttrs().id ?? ""] ?? null,
+									originalNode: this.originalNodes[node.getAttrs().id ?? ""] ?? null,
+									originalContainer: this.originalContainers[node.getAttrs().id ?? ""] ?? null,
 									newNode: node,
 									newContainer: containerToMove
 								});
 								toSelect.push(node.getAttrs().id ?? "");
-								delete originalNodes[node.getAttrs().id ?? ""];
-								delete originalContainers[node.getAttrs().id ?? ""];
-							} else if (node.getAttrs().nodeId) toSelect.push(node.getAttrs().nodeId ?? "");
-							else toSelect.push(node.getAttrs().id ?? "");
+								delete this.originalNodes[node.getAttrs().id ?? ""];
+								delete this.originalContainers[node.getAttrs().id ?? ""];
+							} else toSelect.push(node.getAttrs().nodeId ? node.getAttrs().nodeId ?? "" : node.getAttrs().id ?? "");
 							if (containerToMove) containerToMove.fire(WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, { bubbles: true });
 							if (!nodeHandler) return;
 							if (!moved) toUpdate.push(nodeHandler.serialize(node));
@@ -4723,14 +4658,14 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 							toUpdate.push(nodeHandler.serialize(node));
 						}
 					};
-					for (let i = 0; i < selectedNodes.length; i++) nodeUpdate(selectedNodes[i]);
+					for (let i = 0; i < this.currentDragSelectedNodes.length; i++) nodeUpdate(this.currentDragSelectedNodes[i]);
 					if (toUpdate.length > 0) this.instance.updateNodesNT(toUpdate);
 					this.instance.runPhaseHooks("onMoveNodesToContainer", (hook) => {
-						hook({ nodes: selectedNodes });
+						hook({ nodes: this.currentDragSelectedNodes });
 					});
 					stage.container().style.cursor = actualCursor;
 				});
-				for (const node of selectedNodes) node.setAttrs({ isCloned: void 0 });
+				for (const node of this.currentDragSelectedNodes) node.setAttrs({ isCloned: void 0 });
 				const finalSelectedNodes = [];
 				for (const nodeId of toSelect) {
 					const actNode = this.instance.getStage().findOne(`#${nodeId}`);
@@ -4740,17 +4675,19 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 						actNode.handleSelectNode();
 					}
 				}
-				this.setSelectedNodes(finalSelectedNodes);
-				tr.forceUpdate();
+				this.callbacks.setSelectedNodes(finalSelectedNodes);
+				this.tr.forceUpdate();
 			}
 		});
+	}
+	registerInstanceEvents() {
 		this.instance.addEventListener("onNodesChange", () => {
-			const currentSelectedNodes = tr.nodes();
+			const currentSelectedNodes = this.tr.nodes();
 			const unselectedNodes = this.prevSelectedNodes.filter((node) => !currentSelectedNodes.map((node1) => node1.getAttrs().id).includes(node.getAttrs().id));
 			if (currentSelectedNodes.length > 1) for (const node of currentSelectedNodes) node.handleSelectNode();
 			if (currentSelectedNodes.length === 1) currentSelectedNodes[0]?.handleDeselectNode?.();
 			for (const node of unselectedNodes) node.handleDeselectNode();
-			this.prevSelectedNodes = tr.nodes();
+			this.prevSelectedNodes = this.tr.nodes();
 		});
 		this.instance.addEventListener("onUndoChange", () => {
 			this.handleUndoRedoSelectionChange();
@@ -4758,9 +4695,541 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		this.instance.addEventListener("onRedoChange", () => {
 			this.handleUndoRedoSelectionChange();
 		});
-		this.tr = tr;
-		this.trHover = trHover;
-		this.selectionRectangle = selectionRectangle;
+	}
+	handleUndoRedoSelectionChange() {
+		const selectionLayer = this.instance.getSelectionLayer();
+		const selectionFeedbackPlugin = this.callbacks.getNodesSelectionFeedbackPlugin();
+		if (selectionLayer && selectionFeedbackPlugin) {
+			selectionLayer.find(`.selection-halo`).forEach((node) => node.destroy());
+			selectionFeedbackPlugin.cleanupSelectedHalos();
+			const currentSelectedNodes = this.tr.nodes();
+			if (currentSelectedNodes.length > 1) for (const node of currentSelectedNodes) node.handleSelectNode();
+			if (currentSelectedNodes.length === 1) currentSelectedNodes[0].handleDeselectNode();
+			this.prevSelectedNodes = currentSelectedNodes;
+		}
+	}
+};
+
+//#endregion
+//#region src/plugins/context-menu/constants.ts
+const WEAVE_CONTEXT_MENU_PLUGIN_KEY = "contextMenu";
+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/plugins/stage-grid/constants.ts
+const WEAVE_STAGE_GRID_PLUGIN_KEY = "stageGrid";
+const WEAVE_GRID_TYPES = {
+	["LINES"]: "lines",
+	["DOTS"]: "dots"
+};
+const WEAVE_GRID_DOT_TYPES = {
+	["SQUARE"]: "square",
+	["CIRCLE"]: "circle"
+};
+const WEAVE_GRID_DEFAULT_CONFIG = {
+	type: WEAVE_GRID_TYPES.LINES,
+	gridColor: "#b3b3b3",
+	gridMajorColor: "#b3b3b3",
+	gridOriginColor: "#ff746c",
+	gridSize: 20,
+	gridMajorEvery: 10,
+	gridMajorRatio: 2,
+	gridStroke: 1,
+	gridDotType: WEAVE_GRID_DOT_TYPES.CIRCLE,
+	gridDotRadius: 1,
+	gridDotRectSize: 2
+};
+const WEAVE_GRID_LAYER_ID = "gridLayer";
+
+//#endregion
+//#region src/plugins/stage-panning/constants.ts
+const WEAVE_STAGE_PANNING_KEY = "stagePanning";
+const WEAVE_STAGE_PANNING_THROTTLE_MS = 20;
+const WEAVE_STAGE_PANNING_DEFAULT_CONFIG = { edgePan: {
+	offset: 25,
+	speed: 20
+} };
+
+//#endregion
+//#region src/plugins/nodes-multi-selection-feedback/constants.ts
+const WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_KEY = "nodesMultiSelectionFeedback";
+const WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_LAYER_ID = "selectionLayer";
+const WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_DEFAULT_CONFIG = { style: {
+	stroke: "#ff2c2cff",
+	strokeWidth: 2,
+	fill: "transparent"
+} };
+
+//#endregion
+//#region src/plugins/users-presence/constants.ts
+const WEAVE_USER_PRESENCE_KEY = "userPresence";
+const WEAVE_USERS_PRESENCE_PLUGIN_KEY = "usersPresence";
+const WEAVE_USERS_PRESENCE_CONFIG_DEFAULT_PROPS = { awarenessThrottleMs: DEFAULT_THROTTLE_MS };
+
+//#endregion
+//#region src/plugins/nodes-selection/plugin-accessors.ts
+function getContextMenuPlugin(instance) {
+	return instance.getPlugin(WEAVE_CONTEXT_MENU_PLUGIN_KEY);
+}
+function getStageGridPlugin(instance) {
+	return instance.getPlugin(WEAVE_STAGE_GRID_PLUGIN_KEY);
+}
+function getStagePanningPlugin(instance) {
+	return instance.getPlugin(WEAVE_STAGE_PANNING_KEY);
+}
+function getNodesSelectionFeedbackPlugin(instance) {
+	return instance.getPlugin(WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_KEY);
+}
+function getUsersPresencePlugin(instance) {
+	return instance.getPlugin(WEAVE_USERS_PRESENCE_PLUGIN_KEY);
+}
+
+//#endregion
+//#region src/plugins/nodes-selection/events/click-tap.ts
+/**
+* Handles a single click or tap on the canvas: resolves the targeted node,
+* applies single/multi-selection logic, and triggers the selection-change
+* event. Called from both pointerdown (immediate click) and pointerup
+* (after area-selection ends with a tap).
+*/
+function handleClickOrTap(ctx, e) {
+	const weave = ctx.getWeaveInstance();
+	const stage = weave.getStage();
+	const tr = ctx.getTransformerController().getTransformer();
+	ctx.setClickOrTapHandled(true);
+	e.cancelBubble = true;
+	if (!ctx.isEnabled()) return;
+	if (weave.getActiveAction() !== SELECTION_TOOL_ACTION_NAME) return;
+	const contextMenuPlugin = ctx.getContextMenuPlugin();
+	if (contextMenuPlugin?.isContextMenuVisible()) ctx.getEdgePanning().stop();
+	ctx.hideHoverState();
+	const selectedGroup = getTargetedNode(weave);
+	if (!ctx.isInitialized()) 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 (e.target === weave.getStage()) {
+		ctx.getGesture().resetDoubleTap();
+		ctx.getNodesSelectionFeedbackPlugin()?.cleanupSelectedHalos();
+		return;
+	}
+	nodeTargeted = weave.getRealSelectedNode(nodeTargeted);
+	if (!nodeTargeted.getAttrs().nodeType) {
+		ctx.getGesture().resetDoubleTap();
+		return;
+	}
+	const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
+	const nodeSelectedIndex = tr.nodes().findIndex((node) => {
+		return node.getAttrs().id === nodeTargeted.getAttrs().id;
+	});
+	const isSelected = nodeSelectedIndex !== -1;
+	const user = weave.getStore().getUser();
+	const isLocked = nodeTargeted.getAttrs().locked ?? false;
+	const isMutexLocked = nodeTargeted.getAttrs().mutexLocked && nodeTargeted.getAttrs().mutexUserId !== user.id;
+	if (isLocked || isMutexLocked) {
+		const parent = weave.getInstanceRecursive(nodeTargeted.getParent());
+		const mainLayer = weave.getMainLayer();
+		const isStage = parent instanceof Konva.Stage;
+		const isMainLayer = parent === mainLayer;
+		const isContainerEmptyArea = e.target.getAttrs().isContainerPrincipal !== void 0 && !e.target.getAttrs().isContainerPrincipal;
+		if (isStage || isMainLayer || isContainerEmptyArea) ctx.setSelectedNodes([]);
+		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 (ctx.getGesture().isDoubleTap && !metaPressed) {
+		ctx.getGesture().resetDoubleTap();
+		nodeTargeted.dblClick();
+		return;
+	}
+	const isCtrlOrCmdPressed = e.evt.ctrlKey || e.evt.metaKey;
+	if (isCtrlOrCmdPressed) return;
+	if (!metaPressed) {
+		tr.nodes([nodeTargeted]);
+		tr.show();
+		areNodesSelected = true;
+	}
+	if (metaPressed && isSelected) {
+		const nodes = tr.nodes().slice();
+		nodes.splice(nodes.indexOf(nodeTargeted), 1);
+		tr.nodes(nodes);
+		areNodesSelected = true;
+	}
+	if (metaPressed && !isSelected) {
+		tr.nodes(tr.nodes().concat([nodeTargeted]));
+		areNodesSelected = true;
+	}
+	ctx.handleMultipleSelectionBehavior();
+	ctx.handleBehaviors();
+	if (areNodesSelected) {
+		stage.container().tabIndex = 1;
+		stage.container().focus();
+		stage.container().style.cursor = (typeof nodeTargeted?.defineMousePointer === "function" ? nodeTargeted.defineMousePointer() : null) ?? "grab";
+	}
+	ctx.triggerSelectedNodesEvent();
+}
+
+//#endregion
+//#region src/plugins/nodes-selection/events/keyboard.ts
+/**
+* Registers keydown/keyup listeners on the stage container.
+* Space key toggles the panning-override flag; Backspace/Delete removes
+* the currently selected nodes.
+*/
+function registerKeyboardHandlers(ctx) {
+	const stage = ctx.getWeaveInstance().getStage();
+	const signal = ctx.getWeaveInstance().getEventsController().signal;
+	stage.container().addEventListener("keydown", (e) => {
+		if (e.code === "Space") ctx.setSpaceKeyPressed(true);
+		if (e.code === "Backspace" || e.code === "Delete") {
+			Promise.resolve().then(() => {
+				ctx.removeSelectedNodes();
+			});
+			return;
+		}
+	}, { signal });
+	stage.container().addEventListener("keyup", (e) => {
+		if (e.code === "Space") ctx.setSpaceKeyPressed(false);
+	}, { signal });
+}
+
+//#endregion
+//#region src/plugins/nodes-selection/events/pointer-down.ts
+/**
+* Handles the stage `pointerdown` event: records pointer state, decides
+* whether to start an area-selection or delegate to a click/tap handler.
+*/
+function handlePointerDown(ctx, e) {
+	ctx.getGesture().setTapStart(e.evt.clientX, e.evt.clientY);
+	if (e.target.getClassName().includes("custom-snap-guide")) return;
+	ctx.setClickOrTapHandled(false);
+	ctx.registerPointer(e.evt.pointerId, e.evt);
+	if (e.evt.pointerType === "touch" && ctx.getPointerCount() > 1) return;
+	if (e.evt.pointerType === "mouse" && e.evt?.button !== 0) return;
+	if (e.evt.pointerType === "pen" && e.evt?.pressure <= .05) return;
+	if (!ctx.isInitialized()) return;
+	if (!ctx.isActive()) return;
+	const stage = ctx.getWeaveInstance().getStage();
+	if (stage.mode() !== WEAVE_STAGE_DEFAULT_MODE) return;
+	const selectedGroup = getTargetedNode(ctx.getWeaveInstance());
+	if (selectedGroup?.getParent() instanceof Konva.Transformer) {
+		ctx.setAreaSelecting(false);
+		ctx.getEdgePanning().stop();
+		ctx.getAreaSelector().hide();
+		return;
+	}
+	const isStage = e.target instanceof Konva.Stage;
+	const isTransformer = e.target?.getParent() instanceof Konva.Transformer;
+	const canBeTargeted = e.target.getAttrs().canBeTargeted !== false;
+	const isContainerEmptyArea = e.target.getAttrs().isContainerPrincipal !== void 0 && !e.target.getAttrs().isContainerPrincipal;
+	if (isTransformer) return;
+	if (!isStage && !isContainerEmptyArea && canBeTargeted) {
+		ctx.setAreaSelecting(false);
+		ctx.getEdgePanning().stop();
+		ctx.getAreaSelector().hide();
+		handleClickOrTap(ctx, e);
+		return;
+	}
+	ctx.getEdgePanning().reset();
+	const relPos = stage.getRelativePointerPosition() ?? {
+		x: 0,
+		y: 0
+	};
+	ctx.getAreaSelector().setStart(relPos.x, relPos.y);
+	ctx.getAreaSelector().resetForScale(stage.scaleX(), ctx.getConfiguration().selectionArea);
+	ctx.setAreaSelecting(true);
+	const isCtrlOrMetaPressed = e.evt.ctrlKey || e.evt.metaKey;
+	if (isCtrlOrMetaPressed) {
+		const tr = ctx.getTransformerController().getTransformer();
+		const nodesSelected = tr.nodes();
+		for (const node of nodesSelected) node.fire("onSelectionCleared", { bubbles: true });
+	}
+	ctx.selectNone();
+	ctx.getWeaveInstance().emitEvent("onSelectionState", true);
+	ctx.getEdgePanning().start();
+}
+
+//#endregion
+//#region src/plugins/nodes-selection/events/pointer-move.ts
+/**
+* Handles the stage `pointermove` event: cancels long-press timers when
+* the pointer moves, hides the selection rect when no movement, and
+* updates the area-selection rectangle and edge-panning direction while
+* a selection drag is in progress.
+*/
+function handlePointerMove(ctx, e) {
+	if (!e?.evt) return;
+	const moved = ctx.getGesture().checkMoved(e.evt.clientX, e.evt.clientY);
+	if (e.evt?.buttons === 0) return;
+	if (e.evt.pointerType === "touch" && ctx.getPointerCount() > 1) return;
+	if (!ctx.isInitialized()) return;
+	if (!ctx.isActive()) return;
+	const contextMenuPlugin = ctx.getContextMenuPlugin();
+	if (moved) contextMenuPlugin?.cancelLongPressTimer();
+	else ctx.getAreaSelector().hide();
+	if (contextMenuPlugin?.isContextMenuVisible()) ctx.getEdgePanning().stop();
+	if (ctx.getSpaceKeyPressedState()) return;
+	if (!ctx.isAreaSelecting()) return;
+	ctx.getAreaSelector().update(ctx.getWeaveInstance().getStage(), () => ctx.selectNone());
+	ctx.getEdgePanning().updateDirection();
+}
+
+//#endregion
+//#region src/plugins/nodes-selection/events/pointer-up.ts
+/**
+* Handles the stage `pointerup` event: ends any in-progress area-selection
+* (including the node-filtering/commit step), or delegates to the click/tap
+* handler for point interactions.
+*/
+function handlePointerUp(ctx, e) {
+	const weave = ctx.getWeaveInstance();
+	const stage = weave.getStage();
+	const store = weave.getStore();
+	const actUser = store.getUser();
+	const tr = ctx.getTransformerController().getTransformer();
+	tr.setAttrs({ listening: true });
+	ctx.setAreaSelecting(false);
+	ctx.getEdgePanning().stop();
+	const moved = ctx.getGesture().checkMoved(e.evt.clientX, e.evt.clientY);
+	ctx.getGesture().checkDoubleTap(e.evt.clientX, e.evt.clientY);
+	ctx.unregisterPointer(e.evt.pointerId);
+	ctx.getGesture().commitTap();
+	if (stage.mode() !== WEAVE_STAGE_DEFAULT_MODE) return;
+	const contextMenuPlugin = ctx.getContextMenuPlugin();
+	if (!ctx.isInitialized()) {
+		ctx.getAreaSelector().hide();
+		return;
+	}
+	if (!ctx.isActive()) {
+		ctx.getAreaSelector().hide();
+		return;
+	}
+	weave.emitEvent("onSelectionState", false);
+	if (ctx.getGesture().isDoubleTap) {
+		ctx.getAreaSelector().hide();
+		handleClickOrTap(ctx, e);
+		return;
+	}
+	const isStage = e.target instanceof Konva.Stage;
+	const isContainerEmptyArea = e.target.getAttrs().isContainerPrincipal !== void 0 && !e.target.getAttrs().isContainerPrincipal;
+	if ((isStage || isContainerEmptyArea) && !moved) {
+		ctx.setAreaSelecting(false);
+		ctx.getEdgePanning().stop();
+		ctx.getAreaSelector().hide();
+		ctx.setSelectedNodes([]);
+		return;
+	}
+	if (e.evt.pointerType === "touch" && ctx.getPointerCount() + 1 > 1) {
+		ctx.getAreaSelector().hide();
+		return;
+	}
+	if (contextMenuPlugin?.isContextMenuVisible()) ctx.getEdgePanning().stop();
+	const selectedGroup = getTargetedNode(weave);
+	if (!moved && selectedGroup?.getParent() instanceof Konva.Transformer && !ctx.wasClickOrTapHandled()) {
+		ctx.setAreaSelecting(false);
+		ctx.getEdgePanning().stop();
+		ctx.getAreaSelector().hide();
+		handleClickOrTap(ctx, e);
+		return;
+	}
+	if (!ctx.getAreaSelector().getRect().visible()) {
+		ctx.getAreaSelector().hide();
+		return;
+	}
+	const shapes = stage.find((node) => {
+		return ["Shape", "Group"].includes(node.getType()) && typeof node.getAttrs().id !== "undefined";
+	});
+	const box = ctx.getAreaSelector().getBox();
+	ctx.getAreaSelector().getRect().visible(false);
+	const selected = shapes.filter((shape) => {
+		const shapeMutex = weave.getNodeMutexLock(shape.id());
+		if (shapeMutex && shapeMutex.user.id !== actUser.id) return false;
+		let parent = weave.getInstanceRecursive(shape.getParent());
+		if (parent.getAttrs().nodeId) parent = stage.findOne(`#${parent.getAttrs().nodeId}`);
+		if (shape.getAttrs().nodeType && shape.getAttrs().nodeType === "frame") {
+			const frameBox = shape.getClientRect();
+			return frameBox.x >= box.x && frameBox.y >= box.y && frameBox.x + frameBox.width <= box.x + box.width && frameBox.y + frameBox.height <= box.y + box.height;
+		}
+		if (shape.getAttrs().nodeType && shape?.getAttrs().nodeType === "group" && ["layer", "frame"].includes(parent?.getAttrs().nodeType)) return shape.getAttrs().nodeType && Konva.Util.haveIntersection(box, shape.getClientRect());
+		if (shape.getAttrs().nodeType && shape.getAttrs().nodeType !== "group" && ["layer", "frame"].includes(parent?.getAttrs().nodeType)) return shape.getAttrs().nodeType && Konva.Util.haveIntersection(box, shape.getClientRect());
+		return false;
+	});
+	const selectedNodes = new Set();
+	const containerNodesIds = [];
+	const otherNodes = [];
+	for (const node of selected) {
+		let realNode = node;
+		if (node.getAttrs().nodeId) realNode = stage.findOne(`#${node.getAttrs().nodeId}`);
+		if (!realNode) continue;
+		const isContainer = typeof realNode.getAttrs().isContainerPrincipal !== "undefined" && realNode.getAttrs().isContainerPrincipal;
+		if (isContainer) {
+			containerNodesIds.push(realNode.getAttrs().id ?? "");
+			if (!realNode.getAttrs().locked) selectedNodes.add(realNode);
+		} else otherNodes.push(realNode);
+	}
+	for (const node of otherNodes) {
+		let parent = weave.getInstanceRecursive(node.getParent());
+		if (parent?.getAttrs().nodeId) parent = stage.findOne(`#${parent.getAttrs().nodeId}`);
+		if (parent && !containerNodesIds.includes(parent?.getAttrs().id ?? "") && !node.getAttrs().locked) selectedNodes.add(node);
+	}
+	ctx.setAreaSelecting(false);
+	ctx.getEdgePanning().stop();
+	tr.nodes([...selectedNodes]);
+	ctx.handleMultipleSelectionBehavior();
+	ctx.handleBehaviors();
+	if (tr.nodes().length > 0) {
+		stage.container().tabIndex = 1;
+		stage.container().focus();
+	}
+	ctx.triggerSelectedNodesEvent();
+}
+
+//#endregion
+//#region src/plugins/nodes-selection/nodes-selection.ts
+var WeaveNodesSelectionPlugin = class extends WeavePlugin {
+	gesture = new GestureDetector();
+	_handledClickOrTap = false;
+	dragSelectedNodes = [];
+	constructor(params) {
+		super();
+		this.config = mergeExceptArrays(WEAVE_NODES_SELECTION_DEFAULT_CONFIG, params?.config ?? {});
+		this.initialize();
+	}
+	initialize() {
+		this._defaultEnabledAnchors = this.config.selection?.enabledAnchors ?? [
+			"top-left",
+			"top-center",
+			"top-right",
+			"middle-right",
+			"middle-left",
+			"bottom-left",
+			"bottom-center",
+			"bottom-right"
+		];
+		this.gesture.reset();
+		this._isSpaceKeyPressed = false;
+		this.active = false;
+		this.selecting = false;
+		this.initialized = false;
+		this.enabled = false;
+		this.pointers = {};
+		this.dragSelectedNodes = [];
+	}
+	getName() {
+		return WEAVE_NODES_SELECTION_KEY;
+	}
+	getLayerName() {
+		return WEAVE_NODES_SELECTION_LAYER_ID;
+	}
+	getConfiguration() {
+		return this.config;
+	}
+	getWeaveInstance() {
+		return this.instance;
+	}
+	getGesture() {
+		return this.gesture;
+	}
+	getAreaSelector() {
+		return this.areaSelector;
+	}
+	getEdgePanning() {
+		return this.edgePanning;
+	}
+	getTransformerController() {
+		return this.transformerCtrl;
+	}
+	getDefaultEnabledAnchors() {
+		return this._defaultEnabledAnchors;
+	}
+	isInitialized() {
+		return this.initialized;
+	}
+	isActive() {
+		return this.active;
+	}
+	getSpaceKeyPressedState() {
+		return this._isSpaceKeyPressed;
+	}
+	setSpaceKeyPressed(val) {
+		this._isSpaceKeyPressed = val;
+	}
+	getPointerCount() {
+		return Object.keys(this.pointers).length;
+	}
+	registerPointer(id, evt) {
+		this.pointers[id] = evt;
+	}
+	unregisterPointer(id) {
+		delete this.pointers[id];
+	}
+	wasClickOrTapHandled() {
+		return this._handledClickOrTap;
+	}
+	setClickOrTapHandled(val) {
+		this._handledClickOrTap = val;
+	}
+	setAreaSelecting(val) {
+		this.selecting = val;
+	}
+	initLayer() {
+		const stage = this.instance.getStage();
+		const layer = new Konva.Layer({ id: this.getLayerName() });
+		stage.add(layer);
+	}
+	isPasting() {
+		const copyPastePlugin = this.instance.getPlugin("copyPasteNodes");
+		if (!copyPastePlugin) return false;
+		return copyPastePlugin.isPasting();
+	}
+	isAreaSelecting() {
+		return this.selecting;
+	}
+	isSelecting() {
+		return this.instance.getActiveAction() === SELECTION_TOOL_ACTION_NAME;
+	}
+	isNodeSelected(ele) {
+		return this.getSelectedNodes().length === 1 && this.getSelectedNodes()[0].getAttrs().id === ele.getAttrs().id;
+	}
+	onInit() {
+		const stage = this.instance.getStage();
+		const selectionLayer = this.getLayer();
+		stage.container().tabIndex = 1;
+		stage.container().focus();
+		this.areaSelector = new AreaSelector();
+		this.areaSelector.init(selectionLayer, this.config.selectionArea, stage.scaleX());
+		this.edgePanning = new EdgePanning(this.config.panningWhenSelection, {
+			getStage: () => this.instance.getStage(),
+			isSelecting: () => this.isAreaSelecting(),
+			onTick: (dx, dy) => {
+				if (this.areaSelector.selectionStart) {
+					this.areaSelector.selectionStart.x += dx;
+					this.areaSelector.selectionStart.y += dy;
+				}
+				this.getStageGridPlugin()?.onRender();
+				this.areaSelector.update(this.instance.getStage(), () => this.selectNone());
+			}
+		});
+		const callbacks = {
+			isSelecting: () => this.isSelecting(),
+			setSelectedNodes: (nodes) => this.setSelectedNodes(nodes),
+			triggerSelectedNodesEvent: () => this.triggerSelectedNodesEvent(),
+			saveDragSelectedNodes: () => this.saveDragSelectedNodes(),
+			setNodesOpacityOnDrag: () => this.setNodesOpacityOnDrag(),
+			disablePlugin: () => this.disable(),
+			enablePlugin: () => this.enable(),
+			getContextMenuPlugin: () => this.getContextMenuPlugin(),
+			getUsersPresencePlugin: () => this.getUsersPresencePlugin(),
+			getStagePanningPlugin: () => this.getStagePanningPlugin(),
+			getNodesSelectionFeedbackPlugin: () => this.getNodesSelectionFeedbackPlugin()
+		};
+		this.transformerCtrl = new TransformerController(this.instance, this.config, this.gesture, callbacks);
+		this.transformerCtrl.setup(selectionLayer);
 		this.initEvents();
 		this.initialized = true;
 		this.instance.addEventListener("onActiveActionChange", (activeAction) => {
@@ -4771,39 +5240,21 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			this.active = true;
 		});
 		this.instance.addEventListener("onNodeRemoved", (node) => {
-			const selectedNodes$1 = this.getSelectedNodes();
-			const newSelectedNodes = selectedNodes$1.filter((actNode) => {
-				return actNode.getAttrs().id !== node.id;
-			});
+			const selectedNodes = this.getSelectedNodes();
+			const newSelectedNodes = selectedNodes.filter((actNode) => actNode.getAttrs().id !== node.id);
 			this.setSelectedNodes(newSelectedNodes);
 			stage.container().tabIndex = 1;
 			stage.container().focus();
-			stage.container().style.cursor = "default";
-		});
-	}
-	handleUndoRedoSelectionChange() {
-		const selectionLayer = this.instance.getSelectionLayer();
-		const selectionFeedbackPlugin = this.getNodesSelectionFeedbackPlugin();
-		if (selectionLayer && selectionFeedbackPlugin) {
-			selectionLayer.find(`.selection-halo`).forEach((node) => node.destroy());
-			selectionFeedbackPlugin.cleanupSelectedHalos();
-			const currentSelectedNodes = this.tr.nodes();
-			if (currentSelectedNodes.length > 1) for (const node of currentSelectedNodes) node.handleSelectNode();
-			if (currentSelectedNodes.length === 1) currentSelectedNodes[0].handleDeselectNode();
-			this.prevSelectedNodes = currentSelectedNodes;
-		}
+			stage.container().style.cursor = "default";
+		});
 	}
 	getLayer() {
 		const stage = this.instance.getStage();
 		return stage.findOne(`#${this.getLayerName()}`);
 	}
 	triggerSelectedNodesEvent() {
-		this.serializeSelectedNodes();
-		this.triggerSelectionAwarenessEvent();
-		this.triggerOnNodesChangeEvent();
-	}
-	serializeSelectedNodes() {
-		const selectedNodes = this.tr.getNodes().map((node) => {
+		const tr = this.transformerCtrl.getTransformer();
+		const selectedNodes = tr.getNodes().map((node) => {
 			const nodeType = node.getAttr("nodeType");
 			const nodeHandler = this.instance.getNodeHandler(nodeType);
 			return {
@@ -4811,17 +5262,12 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				node: nodeHandler?.serialize(node)
 			};
 		});
-		this.serializedSelectedNodes = selectedNodes;
-	}
-	triggerSelectionAwarenessEvent() {
 		const usersSelectionPlugin = this.instance.getPlugin(WEAVE_USERS_SELECTION_KEY);
 		if (usersSelectionPlugin) requestAnimationFrame(() => {
-			usersSelectionPlugin.sendSelectionAwarenessInfo(this.tr);
+			usersSelectionPlugin.sendSelectionAwarenessInfo(tr);
 		});
-	}
-	triggerOnNodesChangeEvent() {
 		requestAnimationFrame(() => {
-			this.instance.emitEvent("onNodesChange", this.serializedSelectedNodes);
+			this.instance.emitEvent("onNodesChange", selectedNodes);
 		});
 	}
 	removeElement(element) {
@@ -4841,334 +5287,13 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		this.selectNone();
 		this.triggerSelectedNodesEvent();
 	}
-	updateSelectionRect() {
-		const stage = this.instance.getStage();
-		this.x2 = stage.getRelativePointerPosition()?.x ?? 0;
-		this.y2 = stage.getRelativePointerPosition()?.y ?? 0;
-		this.selectNone();
-		this.selectionRectangle.setAttrs({
-			visible: true,
-			x: Math.min(this.x1, this.x2),
-			y: Math.min(this.y1, this.y2),
-			width: Math.abs(this.x2 - this.x1),
-			height: Math.abs(this.y2 - this.y1)
-		});
-	}
-	getSpeedFromEdge(distanceFromEdge) {
-		const stage = this.instance.getStage();
-		const scaledDistance = distanceFromEdge / stage.scaleX();
-		if (scaledDistance < this.config.panningWhenSelection.edgeThreshold) {
-			const factor = 1 - scaledDistance / this.config.panningWhenSelection.edgeThreshold;
-			return this.config.panningWhenSelection.minScrollSpeed + (this.config.panningWhenSelection.maxScrollSpeed - this.config.panningWhenSelection.minScrollSpeed) * factor;
-		}
-		return 0;
-	}
-	updatePanDirection() {
-		const stage = this.instance.getStage();
-		const pos = stage.getPointerPosition();
-		const viewWidth = stage.width();
-		const viewHeight = stage.height();
-		if (!pos) return;
-		const distLeft = pos.x;
-		const distRight = viewWidth - pos.x;
-		const distTop = pos.y;
-		const distBottom = viewHeight - pos.y;
-		this.panDirection.x = 0;
-		this.panDirection.y = 0;
-		this.panSpeed = {
-			x: 0,
-			y: 0
-		};
-		if (distLeft < this.config.panningWhenSelection.edgeThreshold) {
-			this.panDirection.x = 1;
-			this.panSpeed.x = this.getSpeedFromEdge(distLeft);
-		} else if (distRight < this.config.panningWhenSelection.edgeThreshold) {
-			this.panDirection.x = -1;
-			this.panSpeed.x = this.getSpeedFromEdge(distRight);
-		}
-		if (distTop < this.config.panningWhenSelection.edgeThreshold) {
-			this.panDirection.y = 1;
-			this.panSpeed.y = this.getSpeedFromEdge(distTop);
-		} else if (distBottom < this.config.panningWhenSelection.edgeThreshold) {
-			this.panDirection.y = -1;
-			this.panSpeed.y = this.getSpeedFromEdge(distBottom);
-		}
-	}
-	stopPanLoop() {
-		if (this.panLoopId) {
-			cancelAnimationFrame(this.panLoopId);
-			this.panLoopId = null;
-		}
-	}
-	panLoop() {
-		const stage = this.instance.getStage();
-		if (this.isAreaSelecting() && (this.panDirection.x !== 0 || this.panDirection.y !== 0)) {
-			const scale = stage.scaleX();
-			const stepX = (this.panSpeed.x || 0) / scale;
-			const stepY = (this.panSpeed.y || 0) / scale;
-			stage.x(stage.x() + this.panDirection.x * stepX);
-			stage.y(stage.y() + this.panDirection.y * stepY);
-			if (this.selectionStart) {
-				this.selectionStart.x += this.panDirection.x * stepX;
-				this.selectionStart.y += this.panDirection.y * stepY;
-			}
-			this.getStageGridPlugin()?.onRender();
-			this.updateSelectionRect();
-		}
-		if (this.isAreaSelecting()) this.panLoopId = requestAnimationFrame(() => this.panLoop());
-	}
-	setTapStart(e) {
-		this.taps = this.taps + 1;
-		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.hypot(dx, 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.hypot(dx, dy);
-		const MOVED_DISTANCE = 5;
-		if (dist <= MOVED_DISTANCE) return false;
-		return true;
-	}
-	checkDoubleTap(e) {
-		if (!this.previousTap) return;
-		const now$2 = performance.now();
-		const dx = e.evt.clientX - this.previousTap.x;
-		const dy = e.evt.clientY - this.previousTap.y;
-		const dist = Math.hypot(dx, dy);
-		const DOUBLE_TAP_DISTANCE = 10;
-		const DOUBLE_TAP_TIME = 300;
-		if (this.tapTimeoutId) clearTimeout(this.tapTimeoutId);
-		this.tapTimeoutId = setTimeout(() => {
-			this.taps = 0;
-		}, DOUBLE_TAP_TIME + 5);
-		if (this.taps > 1 && now$2 - this.previousTap.time < DOUBLE_TAP_TIME && dist < DOUBLE_TAP_DISTANCE) {
-			this.taps = 0;
-			this.tapStart = null;
-			this.isDoubleTap = true;
-		}
-	}
-	hideSelectorArea() {
-		this.selectionRectangle.setAttrs({
-			width: 0,
-			height: 0,
-			visible: false
-		});
-	}
 	initEvents() {
 		this.selecting = false;
 		const stage = this.instance.getStage();
-		stage.container().addEventListener("keydown", (e) => {
-			if (e.code === "Space") this.isSpaceKeyPressed = true;
-			if (e.code === "Backspace" || e.code === "Delete") {
-				Promise.resolve().then(() => {
-					this.removeSelectedNodes();
-				});
-				return;
-			}
-		}, { signal: this.instance.getEventsController()?.signal });
-		stage.container().addEventListener("keyup", (e) => {
-			if (e.code === "Space") this.isSpaceKeyPressed = false;
-		}, { signal: this.instance.getEventsController()?.signal });
-		stage.on("pointerdown", (e) => {
-			this.setTapStart(e);
-			if (e.target.getClassName().includes("custom-snap-guide")) return;
-			this.handledClickOrTap = false;
-			this.pointers[e.evt.pointerId] = e.evt;
-			if (e.evt.pointerType === "touch" && Object.keys(this.pointers).length > 1) return;
-			if (e.evt.pointerType === "mouse" && e.evt?.button !== 0) return;
-			if (e.evt.pointerType === "pen" && e.evt?.pressure <= .05) return;
-			if (!this.initialized) return;
-			if (!this.active) return;
-			if (stage.mode() !== WEAVE_STAGE_DEFAULT_MODE) return;
-			const selectedGroup = getTargetedNode(this.instance);
-			if (selectedGroup?.getParent() instanceof Konva.Transformer) {
-				this.selecting = false;
-				this.stopPanLoop();
-				this.hideSelectorArea();
-				return;
-			}
-			const isStage = e.target instanceof Konva.Stage;
-			const isTransformer = e.target?.getParent() instanceof Konva.Transformer;
-			const canBeTargeted = e.target.getAttrs().canBeTargeted !== false;
-			const isContainerEmptyArea = e.target.getAttrs().isContainerPrincipal !== void 0 && !e.target.getAttrs().isContainerPrincipal;
-			if (isTransformer) return;
-			if (!isStage && !isContainerEmptyArea && canBeTargeted) {
-				this.selecting = false;
-				this.stopPanLoop();
-				this.hideSelectorArea();
-				this.handleClickOrTap(e);
-				return;
-			}
-			if (isStage || isContainerEmptyArea) {
-				this.setSelectedNodes([]);
-				this.serializeSelectedNodes();
-				this.triggerOnNodesChangeEvent();
-			}
-			this.panDirection.x = 0;
-			this.panDirection.y = 0;
-			this.panSpeed = {
-				x: 0,
-				y: 0
-			};
-			const intStage = this.instance.getStage();
-			this.x1 = intStage.getRelativePointerPosition()?.x ?? 0;
-			this.y1 = intStage.getRelativePointerPosition()?.y ?? 0;
-			this.x2 = intStage.getRelativePointerPosition()?.x ?? 0;
-			this.y2 = intStage.getRelativePointerPosition()?.y ?? 0;
-			this.selectionStart = {
-				x: this.x1,
-				y: this.y1
-			};
-			this.selectionRectangle.strokeWidth(this.config.selectionArea.strokeWidth / stage.scaleX());
-			this.selectionRectangle.dash(this.config.selectionArea.dash?.map((d) => d / stage.scaleX()) ?? []);
-			this.selectionRectangle.width(0);
-			this.selectionRectangle.height(0);
-			this.selecting = true;
-			const isCtrlOrMetaPressed = e.evt.ctrlKey || e.evt.metaKey;
-			if (isCtrlOrMetaPressed) {
-				const nodesSelected = this.tr.nodes();
-				for (const node of nodesSelected) node.fire("onSelectionCleared", { bubbles: true });
-			}
-			this.selectNone();
-			this.instance.emitEvent("onSelectionState", true);
-			this.panLoopId = requestAnimationFrame(() => this.panLoop());
-		});
-		const handleMouseMove = (e) => {
-			if (!e?.evt) return;
-			const moved = this.checkMoved(e);
-			if (e.evt?.buttons === 0) return;
-			if (e.evt.pointerType === "touch" && Object.keys(this.pointers).length > 1) return;
-			if (!this.initialized) return;
-			if (!this.active) return;
-			const contextMenuPlugin = this.getContextMenuPlugin();
-			if (moved) contextMenuPlugin?.cancelLongPressTimer();
-			else this.hideSelectorArea();
-			if (contextMenuPlugin?.isContextMenuVisible()) this.stopPanLoop();
-			if (this.isSpaceKeyPressed) return;
-			if (!this.selecting) return;
-			this.updateSelectionRect();
-			this.updatePanDirection();
-		};
-		stage.on("pointermove", (0, import_throttle.default)(handleMouseMove, DEFAULT_THROTTLE_MS));
-		this.panLoop();
-		stage.on("pointerup", (e) => {
-			const store = this.instance.getStore();
-			const actUser = store.getUser();
-			this.tr.setAttrs({ listening: true });
-			this.selecting = false;
-			this.stopPanLoop();
-			const moved = this.checkMoved(e);
-			this.checkDoubleTap(e);
-			delete this.pointers[e.evt.pointerId];
-			this.previousTap = this.tapStart;
-			if (stage.mode() !== WEAVE_STAGE_DEFAULT_MODE) return;
-			const contextMenuPlugin = this.getContextMenuPlugin();
-			if (!this.initialized) {
-				this.hideSelectorArea();
-				return;
-			}
-			if (!this.active) {
-				this.hideSelectorArea();
-				return;
-			}
-			this.instance.emitEvent("onSelectionState", false);
-			if (this.isDoubleTap) {
-				this.hideSelectorArea();
-				this.handleClickOrTap(e);
-				return;
-			}
-			const isStage = e.target instanceof Konva.Stage;
-			const isContainerEmptyArea = e.target.getAttrs().isContainerPrincipal !== void 0 && !e.target.getAttrs().isContainerPrincipal;
-			if ((isStage || isContainerEmptyArea) && !moved) {
-				this.selecting = false;
-				this.stopPanLoop();
-				this.hideSelectorArea();
-				this.getSelectionPlugin()?.setSelectedNodes([]);
-				return;
-			}
-			if (e.evt.pointerType === "touch" && Object.keys(this.pointers).length + 1 > 1) {
-				this.hideSelectorArea();
-				return;
-			}
-			if (contextMenuPlugin?.isContextMenuVisible()) this.stopPanLoop();
-			const selectedGroup = getTargetedNode(this.instance);
-			if (!moved && selectedGroup?.getParent() instanceof Konva.Transformer && !this.handledClickOrTap) {
-				this.selecting = false;
-				this.stopPanLoop();
-				this.hideSelectorArea();
-				this.handleClickOrTap(e);
-				return;
-			}
-			if (!this.selectionRectangle.visible()) {
-				this.hideSelectorArea();
-				return;
-			}
-			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) => {
-				const shapeMutex = this.instance.getNodeMutexLock(shape.id());
-				if (shapeMutex && shapeMutex.user.id !== actUser.id) return false;
-				let parent = this.instance.getInstanceRecursive(shape.getParent());
-				if (parent.getAttrs().nodeId) parent = this.instance.getStage().findOne(`#${parent.getAttrs().nodeId}`);
-				if (shape.getAttrs().nodeType && shape.getAttrs().nodeType === "frame") {
-					const frameBox = shape.getClientRect();
-					const isContained = frameBox.x >= box.x && frameBox.y >= box.y && frameBox.x + frameBox.width <= box.x + box.width && frameBox.y + frameBox.height <= box.y + box.height;
-					return isContained;
-				}
-				if (shape.getAttrs().nodeType && shape?.getAttrs().nodeType === "group" && ["layer", "frame"].includes(parent?.getAttrs().nodeType)) return shape.getAttrs().nodeType && Konva.Util.haveIntersection(box, shape.getClientRect());
-				if (shape.getAttrs().nodeType && shape.getAttrs().nodeType !== "group" && ["layer", "frame"].includes(parent?.getAttrs().nodeType)) return shape.getAttrs().nodeType && Konva.Util.haveIntersection(box, shape.getClientRect());
-				return false;
-			});
-			const selectedNodes = new Set();
-			const uniqueContainerNodesIds = new Set();
-			const containerNodesIds = [];
-			const containerNodes = [];
-			const otherNodes = [];
-			for (const node of selected) {
-				let realNode = node;
-				if (node.getAttrs().nodeId) realNode = stage.findOne(`#${node.getAttrs().nodeId}`);
-				if (!realNode) continue;
-				const isContainer = typeof realNode.getAttrs().isContainerPrincipal !== "undefined" && realNode.getAttrs().isContainerPrincipal;
-				if (isContainer) {
-					containerNodes.push(realNode);
-					containerNodesIds.push(realNode.getAttrs().id ?? "");
-					uniqueContainerNodesIds.add(realNode.getAttrs().id ?? "");
-					if (!realNode.getAttrs().locked) selectedNodes.add(realNode);
-				} else otherNodes.push(realNode);
-			}
-			for (const node of otherNodes) {
-				let parent = this.instance.getInstanceRecursive(node.getParent());
-				if (parent?.getAttrs().nodeId) parent = this.instance.getStage().findOne(`#${parent.getAttrs().nodeId}`);
-				if (parent && !containerNodesIds.includes(parent?.getAttrs().id ?? "") && !node.getAttrs().locked) selectedNodes.add(node);
-			}
-			this.selecting = false;
-			this.stopPanLoop();
-			this.tr.nodes([...selectedNodes]);
-			this.handleMultipleSelectionBehavior();
-			this.handleBehaviors();
-			if (this.tr.nodes().length > 0) {
-				stage.container().tabIndex = 1;
-				stage.container().focus();
-			}
-			this.triggerSelectedNodesEvent();
-		});
+		registerKeyboardHandlers(this);
+		stage.on("pointerdown", (e) => handlePointerDown(this, e));
+		stage.on("pointermove", (0, import_throttle.default)((e) => handlePointerMove(this, e), DEFAULT_THROTTLE_MS));
+		stage.on("pointerup", (e) => handlePointerUp(this, e));
 		this.instance.addEventListener("onStateChange", () => {
 			requestAnimationFrame(() => {
 				this.syncSelection();
@@ -5181,129 +5306,53 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		});
 	}
 	handleMultipleSelectionBehavior() {
-		if (this.tr.nodes().length > 1 && this.config.behaviors?.onMultipleSelection) {
-			const selectionBehavior = this.config.behaviors?.onMultipleSelection?.(this.tr.nodes());
-			this.tr.setAttrs(selectionBehavior);
-			this.tr.forceUpdate();
+		const tr = this.transformerCtrl.getTransformer();
+		if (tr.nodes().length > 1 && this.config.behaviors?.onMultipleSelection) {
+			const selectionBehavior = this.config.behaviors.onMultipleSelection(tr.nodes());
+			tr.setAttrs(selectionBehavior);
+			tr.forceUpdate();
 		}
 	}
 	syncSelection() {
 		const stageMode = this.instance.getStage().mode();
 		if (![WEAVE_STAGE_DEFAULT_MODE].includes(stageMode)) return;
+		const tr = this.transformerCtrl.getTransformer();
 		const newSelectedNodes = [];
-		const actualSelectedNodes = this.tr.nodes();
+		const actualSelectedNodes = tr.nodes();
 		for (const node of actualSelectedNodes) {
 			const existNode = this.instance.getStage().findOne(`#${node.getAttrs().id}`);
 			if (existNode) newSelectedNodes.push(existNode);
 		}
-		this.tr.nodes([...newSelectedNodes]);
-		if (newSelectedNodes.length > 0) this.tr.forceUpdate();
+		tr.nodes([...newSelectedNodes]);
+		if (newSelectedNodes.length > 0) tr.forceUpdate();
 		this.triggerSelectedNodesEvent();
 	}
 	getSelectionPlugin() {
-		const selectionPlugin = this.instance.getPlugin("nodesSelection");
-		return selectionPlugin;
+		return this.instance.getPlugin("nodesSelection");
 	}
 	hideHoverState() {
 		const selectionPlugin = this.getSelectionPlugin();
 		if (!selectionPlugin) return;
 		selectionPlugin.getHoverTransformer().nodes([]);
 	}
-	handleClickOrTap(e) {
-		const stage = this.instance.getStage();
-		this.handledClickOrTap = true;
-		e.cancelBubble = true;
-		if (!this.enabled) return;
-		if (this.instance.getActiveAction() !== SELECTION_TOOL_ACTION_NAME) return;
-		const contextMenuPlugin = this.getContextMenuPlugin();
-		if (contextMenuPlugin?.isContextMenuVisible()) this.stopPanLoop();
-		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 (e.target === this.instance.getStage()) {
-			this.isDoubleTap = false;
-			this.getNodesSelectionFeedbackPlugin()?.cleanupSelectedHalos();
-			return;
-		}
-		nodeTargeted = this.instance.getRealSelectedNode(nodeTargeted);
-		if (!nodeTargeted.getAttrs().nodeType) {
-			this.isDoubleTap = false;
-			return;
-		}
-		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;
-		const user = this.instance.getStore().getUser();
-		const isLocked = nodeTargeted.getAttrs().locked ?? false;
-		const isMutexLocked = nodeTargeted.getAttrs().mutexLocked && nodeTargeted.getAttrs().mutexUserId !== user.id;
-		if (isLocked || isMutexLocked) {
-			const parent = this.instance.getInstanceRecursive(nodeTargeted.getParent());
-			const mainLayer = this.instance.getMainLayer();
-			const isStage = parent instanceof Konva.Stage;
-			const isMainLayer = parent === mainLayer;
-			const isContainerEmptyArea = e.target.getAttrs().isContainerPrincipal !== void 0 && !e.target.getAttrs().isContainerPrincipal;
-			if (isStage || isMainLayer || isContainerEmptyArea) this.getSelectionPlugin()?.setSelectedNodes([]);
-			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) {
-			this.isDoubleTap = false;
-			nodeTargeted.dblClick();
-			return;
-		}
-		const isCtrlOrCmdPressed = e.evt.ctrlKey || e.evt.metaKey;
-		if (isCtrlOrCmdPressed) return;
-		if (!metaPressed) {
-			this.tr.nodes([nodeTargeted]);
-			this.tr.show();
-			areNodesSelected = true;
-		}
-		if (metaPressed && isSelected) {
-			const nodes = this.tr.nodes().slice();
-			nodes.splice(nodes.indexOf(nodeTargeted), 1);
-			this.tr.nodes(nodes);
-			areNodesSelected = true;
-		}
-		if (metaPressed && !isSelected) {
-			const nodes = this.tr.nodes().concat([nodeTargeted]);
-			this.tr.nodes(nodes);
-			areNodesSelected = true;
-		}
-		this.handleMultipleSelectionBehavior();
-		this.handleBehaviors();
-		if (areNodesSelected) {
-			stage.container().tabIndex = 1;
-			stage.container().focus();
-			stage.container().style.cursor = (typeof nodeTargeted?.defineMousePointer === "function" ? nodeTargeted.defineMousePointer() : null) ?? "grab";
-		}
-		this.triggerSelectedNodesEvent();
-	}
 	getTransformer() {
-		return this.tr;
+		return this.transformerCtrl.getTransformer();
 	}
 	getHoverTransformer() {
-		return this.trHover;
+		return this.transformerCtrl.getHoverTransformer();
 	}
 	handleBehaviors() {
+		const tr = this.transformerCtrl.getTransformer();
 		const nodes = this.getSelectedNodes();
 		const nodesSelected = nodes.length;
-		if (nodesSelected > 1 && !this.config.behaviors.multipleSelection.enabled || nodesSelected === 1 && !this.config.behaviors.singleSelection.enabled) this.tr.enabledAnchors([]);
-		if (nodesSelected > 1 && this.config.behaviors.multipleSelection.enabled || nodesSelected === 1 && this.config.behaviors.singleSelection.enabled) this.tr.enabledAnchors(this.defaultEnabledAnchors);
+		if (nodesSelected > 1 && !this.config.behaviors.multipleSelection.enabled || nodesSelected === 1 && !this.config.behaviors.singleSelection.enabled) tr.enabledAnchors([]);
+		if (nodesSelected > 1 && this.config.behaviors.multipleSelection.enabled || nodesSelected === 1 && this.config.behaviors.singleSelection.enabled) tr.enabledAnchors(this._defaultEnabledAnchors);
 		let transformerAttrs = { ...this.config.selection };
-		if (this.tr && this.tr.nodes().length > 0) {
-			const currentAttrs = this.tr.getAttrs();
+		if (tr && tr.nodes().length > 0) {
+			const currentAttrs = tr.getAttrs();
 			Object.keys(currentAttrs).forEach((key) => {
-				if (["rotationSnaps", "enabledAnchors"].includes(key)) this.tr.setAttr(key, []);
-				else this.tr.setAttr(key, void 0);
+				if (["rotationSnaps", "enabledAnchors"].includes(key)) tr.setAttr(key, []);
+				else tr.setAttr(key, void 0);
 			});
 		}
 		if (nodesSelected === 1) {
@@ -5313,31 +5362,32 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		if (nodesSelected > 1) {
 			const anchorsArrays = [];
 			for (const node of nodes) anchorsArrays.push(node?.allowedAnchors?.() ?? []);
-			const enabledAnchors = intersectArrays(anchorsArrays);
-			transformerAttrs.enabledAnchors = enabledAnchors;
+			transformerAttrs.enabledAnchors = intersectArrays(anchorsArrays);
 		}
-		if (this.tr && this.tr.nodes().length > 0) {
+		if (tr && tr.nodes().length > 0) {
 			if (transformerAttrs.enabledAnchors?.length === 0) transformerAttrs.resizeEnabled = false;
-			this.tr.setAttrs(transformerAttrs);
-			this.tr.forceUpdate();
-			this.tr.getLayer()?.batchDraw();
+			tr.setAttrs(transformerAttrs);
+			tr.forceUpdate();
+			tr.getLayer()?.batchDraw();
 		}
 	}
 	setSelectedNodes(nodes) {
-		this.tr.setNodes(nodes);
+		const tr = this.transformerCtrl.getTransformer();
+		tr.setNodes(nodes);
 		this.handleBehaviors();
 		if (nodes.length === 0) this.getNodesSelectionFeedbackPlugin()?.cleanupSelectedHalos();
 		const usersSelectionPlugin = this.instance.getPlugin(WEAVE_USERS_SELECTION_KEY);
 		if (usersSelectionPlugin) requestAnimationFrame(() => {
-			usersSelectionPlugin.sendSelectionAwarenessInfo(this.tr);
+			usersSelectionPlugin.sendSelectionAwarenessInfo(tr);
 		});
 	}
 	getSelectedNodes() {
-		if (!this.tr) return [];
-		return this.tr.nodes();
+		if (!this.transformerCtrl) return [];
+		return this.transformerCtrl.getTransformer().nodes();
 	}
 	getSelectedNodesExtended() {
-		const selectedNodes = this.tr.getNodes().map((node) => {
+		const tr = this.transformerCtrl.getTransformer();
+		return tr.getNodes().map((node) => {
 			const nodeType = node.getAttr("nodeType");
 			const nodeHandler = this.instance.getNodeHandler(nodeType);
 			return {
@@ -5345,17 +5395,13 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				node: nodeHandler?.serialize(node)
 			};
 		});
-		return selectedNodes;
 	}
 	selectAll() {
 		const mainLayer = this.instance.getMainLayer();
-		if (mainLayer) {
-			const nodes = mainLayer.getChildren();
-			this.tr.nodes(nodes);
-		}
+		if (mainLayer) this.transformerCtrl.getTransformer().nodes(mainLayer.getChildren());
 	}
 	selectNone() {
-		this.tr.nodes([]);
+		this.transformerCtrl.getTransformer().nodes([]);
 	}
 	enable() {
 		this.getLayer()?.show();
@@ -5366,36 +5412,31 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		this.enabled = false;
 	}
 	getNodesSelectionFeedbackPlugin() {
-		const selectionFeedbackPlugin = this.instance.getPlugin(WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_KEY);
-		return selectionFeedbackPlugin;
+		return getNodesSelectionFeedbackPlugin(this.instance);
 	}
 	getContextMenuPlugin() {
-		const contextMenuPlugin = this.instance.getPlugin(WEAVE_CONTEXT_MENU_PLUGIN_KEY);
-		return contextMenuPlugin;
+		return getContextMenuPlugin(this.instance);
 	}
 	getStageGridPlugin() {
-		const gridPlugin = this.instance.getPlugin(WEAVE_STAGE_GRID_PLUGIN_KEY);
-		return gridPlugin;
+		return getStageGridPlugin(this.instance);
 	}
 	getStagePanningPlugin() {
-		const stagePanning = this.instance.getPlugin(WEAVE_STAGE_PANNING_KEY);
-		return stagePanning;
+		return getStagePanningPlugin(this.instance);
 	}
 	getUsersPresencePlugin() {
-		const usersPresencePlugin = this.instance.getPlugin(WEAVE_USERS_PRESENCE_PLUGIN_KEY);
-		return usersPresencePlugin;
+		return getUsersPresencePlugin(this.instance);
 	}
 	isTransforming() {
-		return this.transformInProcess;
+		return this.transformerCtrl.isTransforming();
 	}
 	isDragging() {
-		return this.dragInProcess;
+		return this.transformerCtrl.isDragging();
 	}
 	getSelectorConfig() {
 		return this.config.selection;
 	}
 	saveDragSelectedNodes() {
-		this.dragSelectedNodes = this.tr.nodes();
+		this.dragSelectedNodes = this.transformerCtrl.getTransformer().nodes();
 	}
 	getDragSelectedNodes() {
 		return this.dragSelectedNodes;
@@ -5473,30 +5514,30 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 		this.initEvents();
 	}
 	writeClipboardImage(base64Data) {
-		return new Promise((resolve, reject$1) => {
+		return new Promise((resolve, reject) => {
 			setTimeout(async () => {
-				if (navigator.clipboard === void 0) return reject$1(new Error("Clipboard API not supported"));
+				if (navigator.clipboard === void 0) return reject(new Error("Clipboard API not supported"));
 				const res = await fetch(base64Data);
 				const imageBlob = await res.blob();
 				const item = new ClipboardItem({ [imageBlob.type]: imageBlob });
 				navigator.clipboard.write([item]).then(() => {
 					resolve();
 				}).catch((error) => {
-					reject$1(error);
+					reject(error);
 				});
 			});
 		});
 	}
 	writeClipboardData(data) {
-		return new Promise((resolve, reject$1) => {
+		return new Promise((resolve, reject) => {
 			setTimeout(async () => {
-				if (navigator.clipboard === void 0) return reject$1(new Error("Clipboard API not supported"));
+				if (navigator.clipboard === void 0) return reject(new Error("Clipboard API not supported"));
 				const textBlob = new Blob([data], { type: "text/plain" });
 				const item = new ClipboardItem({ [textBlob.type]: textBlob });
 				navigator.clipboard.write([item]).then(() => {
 					resolve();
 				}).catch((error) => {
-					reject$1(error);
+					reject(error);
 				});
 			});
 		});
@@ -5566,7 +5607,7 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 				this.focusPasteCatcher();
 				if (!this.enabled) return;
 			}
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		if (catcher) catcher.addEventListener("paste", async (e) => {
 			e.preventDefault();
 			let items = void 0;
@@ -5585,7 +5626,7 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 				return;
 			}
 			this.sendExternalPasteEvent(void 0, items);
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 	}
 	sendExternalPasteEvent(dataList, items) {
 		const stage = this.instance.getStage();
@@ -6828,7 +6869,7 @@ var require__arrayMap = __commonJS({ "../../node_modules/lodash/_arrayMap.js"(ex
 //#endregion
 //#region ../../node_modules/lodash/_isKey.js
 var require__isKey = __commonJS({ "../../node_modules/lodash/_isKey.js"(exports, module) {
-	var isArray$10 = require_isArray(), isSymbol$3 = require_isSymbol();
+	var isArray$9 = require_isArray(), isSymbol$3 = require_isSymbol();
 	/** Used to match property names within property paths. */
 	var reIsDeepProp = /\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/, reIsPlainProp = /^\w*$/;
 	/**
@@ -6840,7 +6881,7 @@ var require__isKey = __commonJS({ "../../node_modules/lodash/_isKey.js"(exports,
 	* @returns {boolean} Returns `true` if `value` is a property name, else `false`.
 	*/
 	function isKey$3(value, object) {
-		if (isArray$10(value)) return false;
+		if (isArray$9(value)) return false;
 		var type = typeof value;
 		if (type == "number" || type == "symbol" || type == "boolean" || value == null || isSymbol$3(value)) return true;
 		return reIsPlainProp.test(value) || !reIsDeepProp.test(value) || object != null && value in Object(object);
@@ -6853,7 +6894,7 @@ var require__isKey = __commonJS({ "../../node_modules/lodash/_isKey.js"(exports,
 var require_memoize = __commonJS({ "../../node_modules/lodash/memoize.js"(exports, module) {
 	var MapCache$1 = require__MapCache();
 	/** Error message constants. */
-	var FUNC_ERROR_TEXT$1 = "Expected a function";
+	var FUNC_ERROR_TEXT = "Expected a function";
 	/**
 	* Creates a function that memoizes the result of `func`. If `resolver` is
 	* provided, it determines the cache key for storing the result based on the
@@ -6899,7 +6940,7 @@ var require_memoize = __commonJS({ "../../node_modules/lodash/memoize.js"(export
 	* _.memoize.Cache = WeakMap;
 	*/
 	function memoize$2(func, resolver) {
-		if (typeof func != "function" || resolver != null && typeof resolver != "function") throw new TypeError(FUNC_ERROR_TEXT$1);
+		if (typeof func != "function" || resolver != null && typeof resolver != "function") throw new TypeError(FUNC_ERROR_TEXT);
 		var memoized = function() {
 			var args = arguments, key = resolver ? resolver.apply(this, args) : args[0], cache = memoized.cache;
 			if (cache.has(key)) return cache.get(key);
@@ -6968,7 +7009,7 @@ var require__stringToPath = __commonJS({ "../../node_modules/lodash/_stringToPat
 //#endregion
 //#region ../../node_modules/lodash/_baseToString.js
 var require__baseToString = __commonJS({ "../../node_modules/lodash/_baseToString.js"(exports, module) {
-	var Symbol$2 = require__Symbol(), arrayMap$1 = require__arrayMap(), isArray$9 = require_isArray(), isSymbol$2 = require_isSymbol();
+	var Symbol$2 = require__Symbol(), arrayMap$1 = require__arrayMap(), isArray$8 = require_isArray(), isSymbol$2 = require_isSymbol();
 	/** Used as references for various `Number` constants. */
 	var INFINITY$1 = Infinity;
 	/** Used to convert symbols to primitives and strings. */
@@ -6983,7 +7024,7 @@ var require__baseToString = __commonJS({ "../../node_modules/lodash/_baseToStrin
 	*/
 	function baseToString$1(value) {
 		if (typeof value == "string") return value;
-		if (isArray$9(value)) return arrayMap$1(value, baseToString$1) + "";
+		if (isArray$8(value)) return arrayMap$1(value, baseToString$1) + "";
 		if (isSymbol$2(value)) return symbolToString ? symbolToString.call(value) : "";
 		var result = value + "";
 		return result == "0" && 1 / value == -INFINITY$1 ? "-0" : result;
@@ -7025,7 +7066,7 @@ var require_toString = __commonJS({ "../../node_modules/lodash/toString.js"(expo
 //#endregion
 //#region ../../node_modules/lodash/_castPath.js
 var require__castPath = __commonJS({ "../../node_modules/lodash/_castPath.js"(exports, module) {
-	var isArray$8 = require_isArray(), isKey$2 = require__isKey(), stringToPath = require__stringToPath(), toString = require_toString();
+	var isArray$7 = require_isArray(), isKey$2 = require__isKey(), stringToPath = require__stringToPath(), toString = require_toString();
 	/**
 	* Casts `value` to a path array if it's not one.
 	*
@@ -7035,7 +7076,7 @@ var require__castPath = __commonJS({ "../../node_modules/lodash/_castPath.js"(ex
 	* @returns {Array} Returns the cast property path array.
 	*/
 	function castPath$2(value, object) {
-		if (isArray$8(value)) return value;
+		if (isArray$7(value)) return value;
 		return isKey$2(value, object) ? [value] : stringToPath(toString(value));
 	}
 	module.exports = castPath$2;
@@ -7362,7 +7403,7 @@ var require__arrayPush = __commonJS({ "../../node_modules/lodash/_arrayPush.js"(
 //#endregion
 //#region ../../node_modules/lodash/_baseGetAllKeys.js
 var require__baseGetAllKeys = __commonJS({ "../../node_modules/lodash/_baseGetAllKeys.js"(exports, module) {
-	var arrayPush = require__arrayPush(), isArray$7 = require_isArray();
+	var arrayPush = require__arrayPush(), isArray$6 = require_isArray();
 	/**
 	* The base implementation of `getAllKeys` and `getAllKeysIn` which uses
 	* `keysFunc` and `symbolsFunc` to get the enumerable property names and
@@ -7376,7 +7417,7 @@ var require__baseGetAllKeys = __commonJS({ "../../node_modules/lodash/_baseGetAl
 	*/
 	function baseGetAllKeys$1(object, keysFunc, symbolsFunc) {
 		var result = keysFunc(object);
-		return isArray$7(object) ? result : arrayPush(result, symbolsFunc(object));
+		return isArray$6(object) ? result : arrayPush(result, symbolsFunc(object));
 	}
 	module.exports = baseGetAllKeys$1;
 } });
@@ -7393,7 +7434,7 @@ var require__arrayFilter = __commonJS({ "../../node_modules/lodash/_arrayFilter.
 	* @param {Function} predicate The function invoked per iteration.
 	* @returns {Array} Returns the new filtered array.
 	*/
-	function arrayFilter$2(array, predicate) {
+	function arrayFilter$1(array, predicate) {
 		var index = -1, length = array == null ? 0 : array.length, resIndex = 0, result = [];
 		while (++index < length) {
 			var value = array[index];
@@ -7401,7 +7442,7 @@ var require__arrayFilter = __commonJS({ "../../node_modules/lodash/_arrayFilter.
 		}
 		return result;
 	}
-	module.exports = arrayFilter$2;
+	module.exports = arrayFilter$1;
 } });
 
 //#endregion
@@ -7434,7 +7475,7 @@ var require_stubArray = __commonJS({ "../../node_modules/lodash/stubArray.js"(ex
 //#endregion
 //#region ../../node_modules/lodash/_getSymbols.js
 var require__getSymbols = __commonJS({ "../../node_modules/lodash/_getSymbols.js"(exports, module) {
-	var arrayFilter$1 = require__arrayFilter(), stubArray = require_stubArray();
+	var arrayFilter = require__arrayFilter(), stubArray = require_stubArray();
 	/** Used for built-in method references. */
 	var objectProto$2 = Object.prototype;
 	/** Built-in value references. */
@@ -7450,7 +7491,7 @@ var require__getSymbols = __commonJS({ "../../node_modules/lodash/_getSymbols.js
 	var getSymbols$1 = !nativeGetSymbols ? stubArray : function(object) {
 		if (object == null) return [];
 		object = Object(object);
-		return arrayFilter$1(nativeGetSymbols(object), function(symbol) {
+		return arrayFilter(nativeGetSymbols(object), function(symbol) {
 			return propertyIsEnumerable.call(object, symbol);
 		});
 	};
@@ -7574,7 +7615,7 @@ var require__equalObjects = __commonJS({ "../../node_modules/lodash/_equalObject
 //#endregion
 //#region ../../node_modules/lodash/_baseIsEqualDeep.js
 var require__baseIsEqualDeep = __commonJS({ "../../node_modules/lodash/_baseIsEqualDeep.js"(exports, module) {
-	var Stack$1 = require__Stack(), equalArrays = require__equalArrays(), equalByTag = require__equalByTag(), equalObjects = require__equalObjects(), getTag = require__getTag(), isArray$6 = require_isArray(), isBuffer = require_isBuffer(), isTypedArray = require_isTypedArray();
+	var Stack$1 = require__Stack(), equalArrays = require__equalArrays(), equalByTag = require__equalByTag(), equalObjects = require__equalObjects(), getTag = require__getTag(), isArray$5 = require_isArray(), isBuffer = require_isBuffer(), isTypedArray = require_isTypedArray();
 	/** Used to compose bitmasks for value comparisons. */
 	var COMPARE_PARTIAL_FLAG$2 = 1;
 	/** `Object#toString` result references. */
@@ -7598,7 +7639,7 @@ var require__baseIsEqualDeep = __commonJS({ "../../node_modules/lodash/_baseIsEq
 	* @returns {boolean} Returns `true` if the objects are equivalent, else `false`.
 	*/
 	function baseIsEqualDeep$1(object, other, bitmask, customizer, equalFunc, stack) {
-		var objIsArr = isArray$6(object), othIsArr = isArray$6(other), objTag = objIsArr ? arrayTag : getTag(object), othTag = othIsArr ? arrayTag : getTag(other);
+		var objIsArr = isArray$5(object), othIsArr = isArray$5(other), objTag = objIsArr ? arrayTag : getTag(object), othTag = othIsArr ? arrayTag : getTag(other);
 		objTag = objTag == argsTag ? objectTag : objTag;
 		othTag = othTag == argsTag ? objectTag : othTag;
 		var objIsObj = objTag == objectTag, othIsObj = othTag == objectTag, isSameTag = objTag == othTag;
@@ -7834,7 +7875,7 @@ var require__baseHasIn = __commonJS({ "../../node_modules/lodash/_baseHasIn.js"(
 //#endregion
 //#region ../../node_modules/lodash/_hasPath.js
 var require__hasPath = __commonJS({ "../../node_modules/lodash/_hasPath.js"(exports, module) {
-	var castPath = require__castPath(), isArguments = require_isArguments(), isArray$5 = require_isArray(), isIndex = require__isIndex(), isLength = require_isLength(), toKey$2 = require__toKey();
+	var castPath = require__castPath(), isArguments = require_isArguments(), isArray$4 = require_isArray(), isIndex = require__isIndex(), isLength = require_isLength(), toKey$2 = require__toKey();
 	/**
 	* Checks if `path` exists on `object`.
 	*
@@ -7854,7 +7895,7 @@ var require__hasPath = __commonJS({ "../../node_modules/lodash/_hasPath.js"(expo
 		}
 		if (result || ++index != length) return result;
 		length = object == null ? 0 : object.length;
-		return !!length && isLength(length) && isIndex(key, length) && (isArray$5(object) || isArguments(object));
+		return !!length && isLength(length) && isIndex(key, length) && (isArray$4(object) || isArguments(object));
 	}
 	module.exports = hasPath$1;
 } });
@@ -7991,7 +8032,7 @@ var require_property = __commonJS({ "../../node_modules/lodash/property.js"(expo
 //#endregion
 //#region ../../node_modules/lodash/_baseIteratee.js
 var require__baseIteratee = __commonJS({ "../../node_modules/lodash/_baseIteratee.js"(exports, module) {
-	var baseMatches = require__baseMatches(), baseMatchesProperty = require__baseMatchesProperty(), identity$1 = require_identity(), isArray$4 = require_isArray(), property = require_property();
+	var baseMatches = require__baseMatches(), baseMatchesProperty = require__baseMatchesProperty(), identity$1 = require_identity(), isArray$3 = require_isArray(), property = require_property();
 	/**
 	* The base implementation of `_.iteratee`.
 	*
@@ -7999,13 +8040,13 @@ var require__baseIteratee = __commonJS({ "../../node_modules/lodash/_baseIterate
 	* @param {*} [value=_.identity] The value to convert to an iteratee.
 	* @returns {Function} Returns the iteratee.
 	*/
-	function baseIteratee$2(value) {
+	function baseIteratee$1(value) {
 		if (typeof value == "function") return value;
 		if (value == null) return identity$1;
-		if (typeof value == "object") return isArray$4(value) ? baseMatchesProperty(value[0], value[1]) : baseMatches(value);
+		if (typeof value == "object") return isArray$3(value) ? baseMatchesProperty(value[0], value[1]) : baseMatches(value);
 		return property(value);
 	}
-	module.exports = baseIteratee$2;
+	module.exports = baseIteratee$1;
 } });
 
 //#endregion
@@ -8062,14 +8103,14 @@ var require__baseEach = __commonJS({ "../../node_modules/lodash/_baseEach.js"(ex
 	* @param {Function} iteratee The function invoked per iteration.
 	* @returns {Array|Object} Returns `collection`.
 	*/
-	var baseEach$2 = createBaseEach(baseForOwn);
-	module.exports = baseEach$2;
+	var baseEach$1 = createBaseEach(baseForOwn);
+	module.exports = baseEach$1;
 } });
 
 //#endregion
 //#region ../../node_modules/lodash/_baseMap.js
 var require__baseMap = __commonJS({ "../../node_modules/lodash/_baseMap.js"(exports, module) {
-	var baseEach$1 = require__baseEach(), isArrayLike = require_isArrayLike();
+	var baseEach = require__baseEach(), isArrayLike = require_isArrayLike();
 	/**
 	* The base implementation of `_.map` without support for iteratee shorthands.
 	*
@@ -8080,7 +8121,7 @@ var require__baseMap = __commonJS({ "../../node_modules/lodash/_baseMap.js"(expo
 	*/
 	function baseMap$1(collection, iteratee) {
 		var index = -1, result = isArrayLike(collection) ? Array(collection.length) : [];
-		baseEach$1(collection, function(value, key, collection$1) {
+		baseEach(collection, function(value, key, collection$1) {
 			result[++index] = iteratee(value, key, collection$1);
 		});
 		return result;
@@ -8170,7 +8211,7 @@ var require__compareMultiple = __commonJS({ "../../node_modules/lodash/_compareM
 //#endregion
 //#region ../../node_modules/lodash/_baseOrderBy.js
 var require__baseOrderBy = __commonJS({ "../../node_modules/lodash/_baseOrderBy.js"(exports, module) {
-	var arrayMap = require__arrayMap(), baseGet = require__baseGet(), baseIteratee$1 = require__baseIteratee(), baseMap = require__baseMap(), baseSortBy = require__baseSortBy(), baseUnary = require__baseUnary(), compareMultiple = require__compareMultiple(), identity = require_identity(), isArray$3 = require_isArray();
+	var arrayMap = require__arrayMap(), baseGet = require__baseGet(), baseIteratee = require__baseIteratee(), baseMap = require__baseMap(), baseSortBy = require__baseSortBy(), baseUnary = require__baseUnary(), compareMultiple = require__compareMultiple(), identity = require_identity(), isArray$2 = require_isArray();
 	/**
 	* The base implementation of `_.orderBy` without param guards.
 	*
@@ -8182,14 +8223,14 @@ var require__baseOrderBy = __commonJS({ "../../node_modules/lodash/_baseOrderBy.
 	*/
 	function baseOrderBy$1(collection, iteratees, orders) {
 		if (iteratees.length) iteratees = arrayMap(iteratees, function(iteratee) {
-			if (isArray$3(iteratee)) return function(value) {
+			if (isArray$2(iteratee)) return function(value) {
 				return baseGet(value, iteratee.length === 1 ? iteratee[0] : iteratee);
 			};
 			return iteratee;
 		});
 		else iteratees = [identity];
 		var index = -1;
-		iteratees = arrayMap(iteratees, baseUnary(baseIteratee$1));
+		iteratees = arrayMap(iteratees, baseUnary(baseIteratee));
 		var result = baseMap(collection, function(value, key, collection$1) {
 			var criteria = arrayMap(iteratees, function(iteratee) {
 				return iteratee(value);
@@ -8210,7 +8251,7 @@ var require__baseOrderBy = __commonJS({ "../../node_modules/lodash/_baseOrderBy.
 //#endregion
 //#region ../../node_modules/lodash/orderBy.js
 var require_orderBy = __commonJS({ "../../node_modules/lodash/orderBy.js"(exports, module) {
-	var baseOrderBy = require__baseOrderBy(), isArray$2 = require_isArray();
+	var baseOrderBy = require__baseOrderBy(), isArray$1 = require_isArray();
 	/**
 	* This method is like `_.sortBy` except that it allows specifying the sort
 	* orders of the iteratees to sort by. If `orders` is unspecified, all values
@@ -8242,9 +8283,9 @@ var require_orderBy = __commonJS({ "../../node_modules/lodash/orderBy.js"(export
 	*/
 	function orderBy(collection, iteratees, orders, guard) {
 		if (collection == null) return [];
-		if (!isArray$2(iteratees)) iteratees = iteratees == null ? [] : [iteratees];
+		if (!isArray$1(iteratees)) iteratees = iteratees == null ? [] : [iteratees];
 		orders = guard ? void 0 : orders;
-		if (!isArray$2(orders)) orders = orders == null ? [] : [orders];
+		if (!isArray$1(orders)) orders = orders == null ? [] : [orders];
 		return baseOrderBy(collection, iteratees, orders);
 	}
 	module.exports = orderBy;
@@ -8323,8 +8364,7 @@ var WeaveGroupsManager = class {
 				tr.hide();
 				selectionPlugin.setSelectedNodes([]);
 			}
-			let parentNodeId = parentId ?? WEAVE_NODE_LAYER_ID;
-			if (typeof parentNodeId === "undefined") parentNodeId = WEAVE_NODE_LAYER_ID;
+			const parentNodeId = parentId ?? WEAVE_NODE_LAYER_ID;
 			const parentLayer = stage.findOne(`#${parentNodeId}`);
 			const groupId = v4_default();
 			const groupInstance = new Konva.Group({
@@ -9453,7 +9493,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "5.0.0-SNAPSHOT.345.1";
+var version = "5.0.0-SNAPSHOT.366.1";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -9650,143 +9690,34 @@ var WeaveActionsManager = class {
 		actionsHandlers[actionName].cleanup?.();
 		this.instance.emitEvent("onActiveActionChange", this.activeAction);
 	}
-	cancelActionCallback(actionName) {
-		return () => {
-			this.cancelAction(actionName);
-		};
-	}
-};
-
-//#endregion
-//#region src/managers/store.ts
-var WeaveStoreManager = class {
-	constructor(instance) {
-		this.instance = instance;
-		this.logger = this.instance.getChildLogger("store-manager");
-		this.logger.debug("Store manager created");
-	}
-	getStore() {
-		return this.store;
-	}
-	registerStore(store) {
-		if (typeof this.store !== "undefined") {
-			const msg = `Store already registered`;
-			this.logger.error(msg);
-			throw new Error(msg);
-		}
-		const storeInstance = store.register(this.instance);
-		this.store = storeInstance;
-	}
-};
-
-//#endregion
-//#region ../../node_modules/lodash/_baseFilter.js
-var require__baseFilter = __commonJS({ "../../node_modules/lodash/_baseFilter.js"(exports, module) {
-	var baseEach = require__baseEach();
-	/**
-	* The base implementation of `_.filter` without support for iteratee shorthands.
-	*
-	* @private
-	* @param {Array|Object} collection The collection to iterate over.
-	* @param {Function} predicate The function invoked per iteration.
-	* @returns {Array} Returns the new filtered array.
-	*/
-	function baseFilter$1(collection, predicate) {
-		var result = [];
-		baseEach(collection, function(value, index, collection$1) {
-			if (predicate(value, index, collection$1)) result.push(value);
-		});
-		return result;
-	}
-	module.exports = baseFilter$1;
-} });
-
-//#endregion
-//#region ../../node_modules/lodash/negate.js
-var require_negate = __commonJS({ "../../node_modules/lodash/negate.js"(exports, module) {
-	/** Error message constants. */
-	var FUNC_ERROR_TEXT = "Expected a function";
-	/**
-	* Creates a function that negates the result of the predicate `func`. The
-	* `func` predicate is invoked with the `this` binding and arguments of the
-	* created function.
-	*
-	* @static
-	* @memberOf _
-	* @since 3.0.0
-	* @category Function
-	* @param {Function} predicate The predicate to negate.
-	* @returns {Function} Returns the new negated function.
-	* @example
-	*
-	* function isEven(n) {
-	*   return n % 2 == 0;
-	* }
-	*
-	* _.filter([1, 2, 3, 4, 5, 6], _.negate(isEven));
-	* // => [1, 3, 5]
-	*/
-	function negate$1(predicate) {
-		if (typeof predicate != "function") throw new TypeError(FUNC_ERROR_TEXT);
-		return function() {
-			var args = arguments;
-			switch (args.length) {
-				case 0: return !predicate.call(this);
-				case 1: return !predicate.call(this, args[0]);
-				case 2: return !predicate.call(this, args[0], args[1]);
-				case 3: return !predicate.call(this, args[0], args[1], args[2]);
-			}
-			return !predicate.apply(this, args);
-		};
-	}
-	module.exports = negate$1;
-} });
-
-//#endregion
-//#region ../../node_modules/lodash/reject.js
-var require_reject = __commonJS({ "../../node_modules/lodash/reject.js"(exports, module) {
-	var arrayFilter = require__arrayFilter(), baseFilter = require__baseFilter(), baseIteratee = require__baseIteratee(), isArray$1 = require_isArray(), negate = require_negate();
-	/**
-	* The opposite of `_.filter`; this method returns the elements of `collection`
-	* that `predicate` does **not** return truthy for.
-	*
-	* @static
-	* @memberOf _
-	* @since 0.1.0
-	* @category Collection
-	* @param {Array|Object} collection The collection to iterate over.
-	* @param {Function} [predicate=_.identity] The function invoked per iteration.
-	* @returns {Array} Returns the new filtered array.
-	* @see _.filter
-	* @example
-	*
-	* var users = [
-	*   { 'user': 'barney', 'age': 36, 'active': false },
-	*   { 'user': 'fred',   'age': 40, 'active': true }
-	* ];
-	*
-	* _.reject(users, function(o) { return !o.active; });
-	* // => objects for ['fred']
-	*
-	* // The `_.matches` iteratee shorthand.
-	* _.reject(users, { 'age': 40, 'active': true });
-	* // => objects for ['barney']
-	*
-	* // The `_.matchesProperty` iteratee shorthand.
-	* _.reject(users, ['active', false]);
-	* // => objects for ['fred']
-	*
-	* // The `_.property` iteratee shorthand.
-	* _.reject(users, 'active');
-	* // => objects for ['barney']
-	*/
-	function reject(collection, predicate) {
-		var func = isArray$1(collection) ? arrayFilter : baseFilter;
-		return func(collection, negate(baseIteratee(predicate, 3)));
-	}
-	module.exports = reject;
-} });
-var import_reject = __toESM(require_reject(), 1);
+	cancelActionCallback(actionName) {
+		return () => {
+			this.cancelAction(actionName);
+		};
+	}
+};
+
+//#endregion
+//#region src/managers/store.ts
+var WeaveStoreManager = class {
+	constructor(instance) {
+		this.instance = instance;
+		this.logger = this.instance.getChildLogger("store-manager");
+		this.logger.debug("Store manager created");
+	}
+	getStore() {
+		return this.store;
+	}
+	registerStore(store) {
+		if (typeof this.store !== "undefined") {
+			const msg = `Store already registered`;
+			this.logger.error(msg);
+			throw new Error(msg);
+		}
+		const storeInstance = store.register(this.instance);
+		this.store = storeInstance;
+	}
+};
 
 //#endregion
 //#region src/managers/export/export.ts
@@ -9796,6 +9727,155 @@ var WeaveExportManager = class {
 		this.logger = this.instance.getChildLogger("export-manager");
 		this.logger.debug("Export manager created");
 	}
+	parseExportOptions(options) {
+		return {
+			format: options.format ?? WEAVE_EXPORT_FORMATS.PNG,
+			padding: options.padding ?? 0,
+			pixelRatio: options.pixelRatio ?? 1,
+			backgroundColor: options.backgroundColor ?? WEAVE_EXPORT_BACKGROUND_COLOR
+		};
+	}
+	saveAndDisablePlugins() {
+		const nodesSelectionPluginPrev = this.getNodesSelectionPlugin()?.isEnabled();
+		const nodesStageGridPluginPrev = this.getStageGridPlugin()?.isEnabled();
+		this.getNodesSelectionPlugin()?.disable();
+		this.getStageGridPlugin()?.disable();
+		return {
+			nodesSelectionPluginPrev,
+			nodesStageGridPluginPrev
+		};
+	}
+	restorePlugins(nodesSelectionPluginPrev, nodesStageGridPluginPrev) {
+		if (nodesSelectionPluginPrev) this.getNodesSelectionPlugin()?.enable();
+		if (nodesStageGridPluginPrev) this.getStageGridPlugin()?.enable();
+	}
+	saveAndResetStage(resetPosition = false) {
+		const stage = this.instance.getStage();
+		const originalPosition = {
+			x: stage.x(),
+			y: stage.y()
+		};
+		const originalScale = {
+			x: stage.scaleX(),
+			y: stage.scaleY()
+		};
+		stage.scale({
+			x: 1,
+			y: 1
+		});
+		if (resetPosition) stage.position({
+			x: 0,
+			y: 0
+		});
+		return {
+			stage,
+			originalPosition,
+			originalScale
+		};
+	}
+	restoreStage(stage, originalPosition, originalScale) {
+		stage.position(originalPosition);
+		stage.scale(originalScale);
+		stage.batchDraw();
+	}
+	buildNodesExportGroup(nodes, boundingNodes, stage, mainLayer, padding, backgroundColor) {
+		const bounds = getExportBoundingBox(boundingNodes(nodes));
+		const scaleX = stage.scaleX();
+		const scaleY = stage.scaleY();
+		const unscaledBounds = {
+			x: bounds.x / scaleX,
+			y: bounds.y / scaleY,
+			width: bounds.width / scaleX,
+			height: bounds.height / scaleY
+		};
+		const exportGroup = new Konva.Group();
+		const background = new Konva.Rect({
+			x: unscaledBounds.x - padding,
+			y: unscaledBounds.y - padding,
+			width: unscaledBounds.width + 2 * padding,
+			height: unscaledBounds.height + 2 * padding,
+			strokeWidth: 0,
+			fill: backgroundColor
+		});
+		exportGroup.add(background);
+		for (const node of nodes) {
+			const clonedNode = node.clone({ id: v4_default() });
+			const absPos = node.getAbsolutePosition();
+			clonedNode.absolutePosition({
+				x: absPos.x / scaleX,
+				y: absPos.y / scaleY
+			});
+			exportGroup.add(clonedNode);
+		}
+		mainLayer.add(exportGroup);
+		const backgroundRect = background.getClientRect();
+		stage.batchDraw();
+		return {
+			exportGroup,
+			background,
+			backgroundRect
+		};
+	}
+	buildAreaBackground(area, stage, mainLayer, padding, backgroundColor, relativeToStage = false) {
+		const bounds = area;
+		const scaleX = stage.scaleX();
+		const scaleY = stage.scaleY();
+		const unscaledBounds = {
+			x: bounds.x / scaleX,
+			y: bounds.y / scaleY,
+			width: bounds.width / scaleX,
+			height: bounds.height / scaleY
+		};
+		const background = new Konva.Rect({
+			x: unscaledBounds.x - padding,
+			y: unscaledBounds.y - padding,
+			width: unscaledBounds.width + 2 * padding,
+			height: unscaledBounds.height + 2 * padding,
+			strokeWidth: 0,
+			fill: backgroundColor
+		});
+		mainLayer.add(background);
+		background.moveToBottom();
+		stage.batchDraw();
+		const backgroundRect = relativeToStage ? background.getClientRect({ relativeTo: stage }) : background.getClientRect();
+		return {
+			background,
+			backgroundRect
+		};
+	}
+	async renderTiles(source, backgroundRect, format, pixelRatio, quality) {
+		const composites = [];
+		const imageWidth = Math.round(backgroundRect.width);
+		const imageHeight = Math.round(backgroundRect.height);
+		const maxRenderSize = 1920;
+		const cols = Math.ceil(imageWidth / maxRenderSize);
+		const rows = Math.ceil(imageHeight / maxRenderSize);
+		const tileWidth = Math.floor(imageWidth / cols);
+		const tileHeight = Math.floor(imageHeight / rows);
+		for (let y = 0; y < imageHeight; y += tileHeight) for (let x = 0; x < imageWidth; x += tileWidth) {
+			const width = Math.min(tileWidth, imageWidth - x);
+			const height = Math.min(tileHeight, imageHeight - y);
+			const canvas = await source.toCanvas({
+				x: Math.round(backgroundRect.x) + x,
+				y: Math.round(backgroundRect.y) + y,
+				width,
+				height,
+				mimeType: format,
+				pixelRatio,
+				quality
+			});
+			let buffer = null;
+			if (globalThis._weave_serverSideBackend === WEAVE_KONVA_BACKEND.CANVAS) buffer = canvas.toBuffer();
+			if (globalThis._weave_serverSideBackend === WEAVE_KONVA_BACKEND.SKIA) buffer = await canvas.toBuffer();
+			if (!buffer) throw new Error("Failed to generate image buffer");
+			composites.push({
+				top: y * pixelRatio,
+				left: x * pixelRatio,
+				input: buffer
+			});
+		}
+		return { composites };
+	}
 	fitKonvaPixelRatio(sw, sh, targetPR = 1, maxArea = 16777216) {
 		if (sw <= 0 || sh <= 0) return {
 			pixelRatio: 0,
@@ -9905,7 +9985,7 @@ var WeaveExportManager = class {
 		});
 	}
 	exportNodesAsBlob(nodes, boundingNodes, options) {
-		return new Promise((resolve) => {
+		return new Promise((resolve, reject) => {
 			const { format = WEAVE_EXPORT_FORMATS.PNG } = options;
 			const { stage, mainLayer, originalScale: { scaleX, scaleY } } = this.cloneStageForExport();
 			if (mainLayer) {
@@ -9931,7 +10011,7 @@ var WeaveExportManager = class {
 						exportGroup.destroy();
 						stage.destroy();
 						if (!blob) {
-							(0, import_reject.default)(new Error("Failed to generate image blob"));
+							reject(new Error("Failed to generate image blob"));
 							return;
 						}
 						resolve(blob);
@@ -10004,7 +10084,7 @@ var WeaveExportManager = class {
 		});
 	}
 	exportAreaAsBlob(area, options) {
-		return new Promise((resolve) => {
+		return new Promise((resolve, reject) => {
 			const { format = WEAVE_EXPORT_FORMATS.PNG } = options;
 			const { stage, mainLayer, originalScale: { scaleX, scaleY } } = this.cloneStageForExport();
 			if (mainLayer) {
@@ -10029,7 +10109,7 @@ var WeaveExportManager = class {
 					callback: (blob) => {
 						stage.destroy();
 						if (!blob) {
-							(0, import_reject.default)(new Error("Failed to generate image blob"));
+							reject(new Error("Failed to generate image blob"));
 							return;
 						}
 						resolve(blob);
@@ -10070,24 +10150,11 @@ var WeaveExportManager = class {
 		});
 	}
 	async exportNodesServerSide(nodes, boundingNodes, options) {
-		const { format = WEAVE_EXPORT_FORMATS.PNG, padding = 0, pixelRatio = 1, backgroundColor = WEAVE_EXPORT_BACKGROUND_COLOR } = options;
-		this.getNodesSelectionPlugin()?.disable();
-		this.getStageGridPlugin()?.disable();
-		const stage = this.instance.getStage();
+		const { format, padding, pixelRatio, backgroundColor } = this.parseExportOptions(options);
+		const { nodesSelectionPluginPrev, nodesStageGridPluginPrev } = this.saveAndDisablePlugins();
+		const { stage, originalPosition, originalScale } = this.saveAndResetStage();
 		const mainLayer = this.instance.getMainLayer();
 		if (!mainLayer) throw new Error("Main layer not found");
-		const originalPosition = {
-			x: stage.x(),
-			y: stage.y()
-		};
-		const originalScale = {
-			x: stage.scaleX(),
-			y: stage.scaleY()
-		};
-		stage.scale({
-			x: 1,
-			y: 1
-		});
 		let realNodes = [...nodes];
 		if (nodes.length === 0) realNodes = mainLayer.getChildren().map((node) => node.getAttrs().id ?? "") ?? [];
 		const konvaNodes = [];
@@ -10095,153 +10162,32 @@ var WeaveExportManager = class {
 			const node = stage.findOne(`#${nodeId}`);
 			if (node) konvaNodes.push(node);
 		}
-		const bounds = getExportBoundingBox(boundingNodes(konvaNodes));
-		const scaleX = stage.scaleX();
-		const scaleY = stage.scaleY();
-		const unscaledBounds = {
-			x: bounds.x / scaleX,
-			y: bounds.y / scaleY,
-			width: bounds.width / scaleX,
-			height: bounds.height / scaleY
-		};
-		const exportGroup = new Konva.Group();
-		const background = new Konva.Rect({
-			x: unscaledBounds.x - padding,
-			y: unscaledBounds.y - padding,
-			width: unscaledBounds.width + 2 * padding,
-			height: unscaledBounds.height + 2 * padding,
-			strokeWidth: 0,
-			fill: backgroundColor
-		});
-		exportGroup.add(background);
-		for (const node of konvaNodes) {
-			const clonedNode = node.clone({ id: v4_default() });
-			const absPos = node.getAbsolutePosition();
-			clonedNode.absolutePosition({
-				x: absPos.x / scaleX,
-				y: absPos.y / scaleY
-			});
-			exportGroup.add(clonedNode);
-		}
-		mainLayer.add(exportGroup);
-		const backgroundRect = background.getClientRect();
-		const composites = [];
+		const { exportGroup, backgroundRect } = this.buildNodesExportGroup(konvaNodes, boundingNodes, stage, mainLayer, padding, backgroundColor);
+		const { composites } = await this.renderTiles(exportGroup, backgroundRect, format, pixelRatio, options.quality ?? 1);
 		const imageWidth = Math.round(backgroundRect.width);
 		const imageHeight = Math.round(backgroundRect.height);
-		const maxRenderSize = 1920;
-		const cols = Math.ceil(imageWidth / maxRenderSize);
-		const rows = Math.ceil(imageHeight / maxRenderSize);
-		const tileWidth = Math.floor(imageWidth / cols);
-		const tileHeight = Math.floor(imageHeight / rows);
-		for (let y = 0; y < imageHeight; y += tileHeight) for (let x = 0; x < imageWidth; x += tileWidth) {
-			const width = Math.min(tileWidth, imageWidth - x);
-			const height = Math.min(tileHeight, imageHeight - y);
-			const canvas = await exportGroup.toCanvas({
-				x: Math.round(backgroundRect.x) + x,
-				y: Math.round(backgroundRect.y) + y,
-				width,
-				height,
-				mimeType: format,
-				pixelRatio,
-				quality: options.quality ?? 1
-			});
-			let buffer = null;
-			if (globalThis._weave_serverSideBackend === WEAVE_KONVA_BACKEND.CANVAS) buffer = canvas.toBuffer();
-			if (globalThis._weave_serverSideBackend === WEAVE_KONVA_BACKEND.SKIA) buffer = await canvas.toBuffer();
-			if (!buffer) throw new Error("Failed to generate image buffer");
-			composites.push({
-				top: y * pixelRatio,
-				left: x * pixelRatio,
-				input: buffer
-			});
-		}
 		exportGroup.destroy();
-		stage.position(originalPosition);
-		stage.scale(originalScale);
-		stage.batchDraw();
-		this.getNodesSelectionPlugin()?.enable();
-		this.getStageGridPlugin()?.enable();
-		return {
-			composites,
-			width: imageWidth * pixelRatio,
-			height: imageHeight * pixelRatio
-		};
-	}
-	async exportAreaServerSide(area, options) {
-		const { format = WEAVE_EXPORT_FORMATS.PNG, padding = 0, pixelRatio = 1, backgroundColor = WEAVE_EXPORT_BACKGROUND_COLOR } = options;
-		this.getNodesSelectionPlugin()?.disable();
-		this.getStageGridPlugin()?.disable();
-		const stage = this.instance.getStage();
-		const mainLayer = this.instance.getMainLayer();
-		if (!mainLayer) throw new Error("Main layer not found");
-		const originalPosition = {
-			x: stage.x(),
-			y: stage.y()
-		};
-		const originalScale = {
-			x: stage.scaleX(),
-			y: stage.scaleY()
-		};
-		stage.scale({
-			x: 1,
-			y: 1
-		});
-		const bounds = area;
-		const scaleX = stage.scaleX();
-		const scaleY = stage.scaleY();
-		const unscaledBounds = {
-			x: bounds.x / scaleX,
-			y: bounds.y / scaleY,
-			width: bounds.width / scaleX,
-			height: bounds.height / scaleY
+		this.restoreStage(stage, originalPosition, originalScale);
+		this.restorePlugins(nodesSelectionPluginPrev, nodesStageGridPluginPrev);
+		return {
+			composites,
+			width: imageWidth * pixelRatio,
+			height: imageHeight * pixelRatio
 		};
-		const background = new Konva.Rect({
-			x: unscaledBounds.x - padding,
-			y: unscaledBounds.y - padding,
-			width: unscaledBounds.width + 2 * padding,
-			height: unscaledBounds.height + 2 * padding,
-			strokeWidth: 0,
-			fill: backgroundColor
-		});
-		mainLayer.add(background);
-		background.moveToBottom();
-		const backgroundRect = background.getClientRect({ relativeTo: stage });
-		const composites = [];
+	}
+	async exportAreaServerSide(area, options) {
+		const { format, padding, pixelRatio, backgroundColor } = this.parseExportOptions(options);
+		const { nodesSelectionPluginPrev, nodesStageGridPluginPrev } = this.saveAndDisablePlugins();
+		const { stage, originalPosition, originalScale } = this.saveAndResetStage();
+		const mainLayer = this.instance.getMainLayer();
+		if (!mainLayer) throw new Error("Main layer not found");
+		const { background, backgroundRect } = this.buildAreaBackground(area, stage, mainLayer, padding, backgroundColor, true);
+		const { composites } = await this.renderTiles(mainLayer, backgroundRect, format, pixelRatio, options.quality ?? 1);
 		const imageWidth = Math.round(backgroundRect.width);
 		const imageHeight = Math.round(backgroundRect.height);
-		const maxRenderSize = 1920;
-		const cols = Math.ceil(imageWidth / maxRenderSize);
-		const rows = Math.ceil(imageHeight / maxRenderSize);
-		const tileWidth = Math.floor(imageWidth / cols);
-		const tileHeight = Math.floor(imageHeight / rows);
-		for (let y = 0; y < imageHeight; y += tileHeight) for (let x = 0; x < imageWidth; x += tileWidth) {
-			const width = Math.min(tileWidth, imageWidth - x);
-			const height = Math.min(tileHeight, imageHeight - y);
-			const canvas = await mainLayer.toCanvas({
-				x: Math.round(backgroundRect.x) + x,
-				y: Math.round(backgroundRect.y) + y,
-				width,
-				height,
-				mimeType: format,
-				pixelRatio,
-				quality: options.quality ?? 1
-			});
-			let buffer = null;
-			if (globalThis._weave_serverSideBackend === WEAVE_KONVA_BACKEND.CANVAS) buffer = canvas.toBuffer();
-			if (globalThis._weave_serverSideBackend === WEAVE_KONVA_BACKEND.SKIA) buffer = await canvas.toBuffer();
-			if (!buffer) throw new Error("Failed to generate image buffer");
-			composites.push({
-				top: y * pixelRatio,
-				left: x * pixelRatio,
-				input: buffer
-			});
-		}
 		background.destroy();
-		stage.position(originalPosition);
-		stage.scale(originalScale);
-		stage.batchDraw();
-		this.getNodesSelectionPlugin()?.enable();
-		this.getStageGridPlugin()?.enable();
+		this.restoreStage(stage, originalPosition, originalScale);
+		this.restorePlugins(nodesSelectionPluginPrev, nodesStageGridPluginPrev);
 		return {
 			composites,
 			width: imageWidth * pixelRatio,
@@ -10269,10 +10215,10 @@ var WeaveExportManager = class {
 		return gridPlugin;
 	}
 	blobToDataURL(blob) {
-		return new Promise((resolve, reject$1) => {
+		return new Promise((resolve, reject) => {
 			const reader = new FileReader();
 			reader.onloadend = () => resolve(reader.result);
-			reader.onerror = () => reject$1(new Error("Failed to convert blob to data URL"));
+			reader.onerror = () => reject(new Error("Failed to convert blob to data URL"));
 			reader.readAsDataURL(blob);
 		});
 	}
@@ -11519,6 +11465,7 @@ var Weave = class {
 		return this.dragAndDropManager.getDragProperties();
 	}
 	getEventsController() {
+		if (!this.eventsController) throw new Error("Events controller not initialized");
 		return this.eventsController;
 	}
 	getHooks() {
@@ -11537,14 +11484,14 @@ var Weave = class {
 //#endregion
 //#region src/utils/image.ts
 function loadImageSource(image, options) {
-	return new Promise((resolve, reject$1) => {
+	return new Promise((resolve, reject) => {
 		const { crossOrigin } = mergeExceptArrays({ crossOrigin: "anonymous" }, options);
 		const reader = new FileReader();
 		reader.onloadend = () => {
 			const imageSource = Konva.Util.createImageElement();
 			imageSource.crossOrigin = crossOrigin;
 			imageSource.onerror = () => {
-				reject$1(new Error("Failed to load image source"));
+				reject(new Error("Failed to load image source"));
 			};
 			imageSource.onload = async () => {
 				resolve(imageSource);
@@ -11552,7 +11499,7 @@ function loadImageSource(image, options) {
 			imageSource.src = reader.result;
 		};
 		reader.onerror = () => {
-			reject$1(new Error("Failed to read image file"));
+			reject(new Error("Failed to read image file"));
 		};
 		reader.readAsDataURL(image);
 	});
@@ -11573,12 +11520,12 @@ async function downscaleImageFile(file, ratio) {
 	});
 }
 function getImageSizeFromFile(file) {
-	return new Promise((resolve, reject$1) => {
+	return new Promise((resolve, reject) => {
 		const img = new Image();
 		const url = URL.createObjectURL(file);
 		img.onload = () => {
 			if (img.naturalWidth === 0) {
-				reject$1(new Error("Invalid image", { cause: "InvalidImage" }));
+				reject(new Error("Invalid image", { cause: "InvalidImage" }));
 				return;
 			}
 			resolve({
@@ -11588,7 +11535,7 @@ function getImageSizeFromFile(file) {
 			URL.revokeObjectURL(url);
 		};
 		img.onerror = () => {
-			reject$1(new Error("Invalid image", { cause: "InvalidImage" }));
+			reject(new Error("Invalid image", { cause: "InvalidImage" }));
 		};
 		img.src = url;
 	});
@@ -11603,7 +11550,7 @@ function getDownscaleRatio(width, height, options) {
 	return Math.min(widthRatio, heightRatio, 1);
 }
 const downscaleImageFromURL = (url, options) => {
-	return new Promise((resolve, reject$1) => {
+	return new Promise((resolve, reject) => {
 		const { type, crossOrigin, maxWidth, maxHeight } = mergeExceptArrays({
 			type: "image/png",
 			crossOrigin: "anonymous",
@@ -11614,7 +11561,7 @@ const downscaleImageFromURL = (url, options) => {
 		img.crossOrigin = crossOrigin;
 		img.onload = () => {
 			if (img.naturalWidth === 0) {
-				reject$1(new Error("Invalid image", { cause: "InvalidImage" }));
+				reject(new Error("Invalid image", { cause: "InvalidImage" }));
 				return;
 			}
 			const ratio = Math.min(maxWidth / img.width, maxHeight / img.height, 1);
@@ -11630,7 +11577,7 @@ const downscaleImageFromURL = (url, options) => {
 			resolve(dataURL);
 		};
 		img.onerror = () => {
-			reject$1(new Error("Invalid image", { cause: "InvalidImage" }));
+			reject(new Error("Invalid image", { cause: "InvalidImage" }));
 		};
 		img.src = url;
 	});
@@ -11747,10 +11694,10 @@ var WeaveStageNode = class extends WeaveNode {
 			container.setAttribute("tabindex", "0");
 			stage.container().addEventListener("focus", () => {
 				this.stageFocused = true;
-			}, { signal: this.instance.getEventsController()?.signal });
+			}, { signal: this.instance.getEventsController().signal });
 			stage.container().addEventListener("blur", () => {
 				this.stageFocused = false;
-			}, { signal: this.instance.getEventsController()?.signal });
+			}, { signal: this.instance.getEventsController().signal });
 		}
 		Konva.Stage.prototype.mode = function(mode) {
 			if (typeof mode !== "undefined") this._mode = mode;
@@ -11817,7 +11764,7 @@ var WeaveStageNode = class extends WeaveNode {
 				const selectedNode = transformer.nodes()[0];
 				selectedNode.fire("onCmdCtrlPressed");
 			}
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		window.addEventListener("keyup", (e) => {
 			if (!(e.ctrlKey || e.metaKey)) {
 				this.instance.getStage().container().style.cursor = "default";
@@ -11827,7 +11774,7 @@ var WeaveStageNode = class extends WeaveNode {
 				const selectedNode = transformer.nodes()[0];
 				selectedNode.fire("onCmdCtrlReleased");
 			}
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		this.globalEventsInitialized = true;
 	}
 	isOnlyCtrlOrMeta(event) {
@@ -12839,7 +12786,7 @@ var WeaveTextNode = class extends WeaveNode {
 	onAdd() {
 		if (!this.instance.isServerSide() && !this.keyPressHandler) {
 			this.keyPressHandler = this.handleKeyPress.bind(this);
-			window.addEventListener("keypress", this.keyPressHandler, { signal: this.instance.getEventsController()?.signal });
+			window.addEventListener("keypress", this.keyPressHandler, { signal: this.instance.getEventsController().signal });
 		}
 	}
 	onRender(props) {
@@ -12998,7 +12945,7 @@ var WeaveTextNode = class extends WeaveNode {
 		});
 		if (!this.instance.isServerSide() && !this.keyPressHandler) {
 			this.keyPressHandler = this.handleKeyPress.bind(this);
-			window.addEventListener("keypress", this.keyPressHandler, { signal: this.instance.getEventsController()?.signal });
+			window.addEventListener("keypress", this.keyPressHandler, { signal: this.instance.getEventsController().signal });
 		}
 		return text;
 	}
@@ -13246,17 +13193,17 @@ var WeaveTextNode = class extends WeaveNode {
 				this.textAreaSuperContainer.scrollTop = 0;
 				this.textAreaSuperContainer.scrollLeft = 0;
 			}
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		this.textAreaContainer.addEventListener("scroll", () => {
 			if (!this.textAreaContainer) return;
 			this.textAreaContainer.scrollTop = 0;
 			this.textAreaContainer.scrollLeft = 0;
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		this.textArea.addEventListener("scroll", () => {
 			if (!this.textArea) return;
 			this.textArea.scrollTop = 0;
 			this.textArea.scrollLeft = 0;
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		const rotation = textNode.getAbsoluteRotation();
 		if (rotation) {
 			const transform = "rotate(" + rotation + "deg)";
@@ -13306,8 +13253,8 @@ var WeaveTextNode = class extends WeaveNode {
 				this.textAreaDomResize(textNode);
 			}
 		};
-		this.textArea.addEventListener("keydown", handleKeyDown, { signal: this.instance.getEventsController()?.signal });
-		this.textArea.addEventListener("keyup", handleKeyUp, { signal: this.instance.getEventsController()?.signal });
+		this.textArea.addEventListener("keydown", handleKeyDown, { signal: this.instance.getEventsController().signal });
+		this.textArea.addEventListener("keyup", handleKeyUp, { signal: this.instance.getEventsController().signal });
 		this.textArea.tabIndex = 1;
 		this.textArea.focus();
 		const handleOutsideClick = (e) => {
@@ -13333,7 +13280,7 @@ var WeaveTextNode = class extends WeaveNode {
 			}
 		};
 		setTimeout(() => {
-			window.addEventListener("pointerup", handleOutsideClick, { signal: this.instance.getEventsController()?.signal });
+			window.addEventListener("pointerup", handleOutsideClick, { signal: this.instance.getEventsController().signal });
 		}, 0);
 		this.instance.getStage().mode(WEAVE_STAGE_TEXT_EDITION_MODE);
 		this.editing = true;
@@ -13793,7 +13740,7 @@ var WeaveImageCrop = class WeaveImageCrop {
 		utilityLayer?.add(this.transformer);
 		this.transformer?.forceUpdate();
 		this.cropGroup.show();
-		window.addEventListener("keydown", this.handleHide, { signal: this.instance.getEventsController()?.signal });
+		if (!this.instance.isServerSide()) window.addEventListener("keydown", this.handleHide, { signal: this.instance.getEventsController().signal });
 		if (options.cmdCtrl.triggered) {
 			utilityLayer?.hide();
 			const stage = this.instance.getStage();
@@ -16895,10 +16842,10 @@ var WeaveStrokeSingleNode = class extends WeaveNode {
 		if (this.eventsInitialized) return;
 		window.addEventListener("keydown", (e) => {
 			if (e.key === "Shift") this.shiftPressed = true;
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		window.addEventListener("keyup", (e) => {
 			if (e.key === "Shift") this.shiftPressed = false;
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		this.eventsInitialized = true;
 	}
 	onRender(props) {
@@ -20985,7 +20932,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 			}
 		}, {
 			passive: false,
-			signal: this.instance.getEventsController()?.signal
+			signal: this.instance.getEventsController().signal
 		});
 		stage.getContent().addEventListener("touchmove", (e) => {
 			e.preventDefault();
@@ -21028,7 +20975,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 			}
 		}, {
 			passive: false,
-			signal: this.instance.getEventsController()?.signal
+			signal: this.instance.getEventsController().signal
 		});
 		stage.getContent().addEventListener("touchend", () => {
 			this.pinching = false;
@@ -21036,7 +20983,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 			lastCenter = null;
 		}, {
 			passive: false,
-			signal: this.instance.getEventsController()?.signal
+			signal: this.instance.getEventsController().signal
 		});
 		let doZoom = false;
 		const handleWheelImmediate = (e) => {
@@ -21057,7 +21004,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 			doZoom = true;
 		};
 		window.addEventListener("wheel", handleWheelImmediate, {
-			signal: this.instance.getEventsController()?.signal,
+			signal: this.instance.getEventsController().signal,
 			passive: false
 		});
 		const handleWheel = (e) => {
@@ -21073,7 +21020,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 		};
 		const throttledHandleWheel = (0, import_throttle.default)(handleWheel, DEFAULT_THROTTLE_MS);
 		window.addEventListener("wheel", throttledHandleWheel, {
-			signal: this.instance.getEventsController()?.signal,
+			signal: this.instance.getEventsController().signal,
 			passive: true
 		});
 	}
@@ -21301,7 +21248,7 @@ var WeaveMoveToolAction = class extends WeaveAction {
 				this.cancelAction();
 				return;
 			}
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		stage.on("pointerdown", () => {
 			if ([MOVE_TOOL_ACTION_NAME].includes(this.instance.getActiveAction() ?? "")) stage.container().style.cursor = "grabbing";
 		});
@@ -21462,7 +21409,7 @@ var WeaveEraserToolAction = class extends WeaveAction {
 				this.cancelAction();
 				return;
 			}
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		this.initialized = true;
 	}
 	setState(state) {
@@ -21567,7 +21514,7 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 				this.cancelAction();
 				return;
 			}
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		stage.on("pointermove", () => {
 			if (this.state === RECTANGLE_TOOL_STATE.IDLE) return;
 			this.setCursor();
@@ -21788,7 +21735,7 @@ var WeaveEllipseToolAction = class extends WeaveAction {
 				this.cancelAction();
 				return;
 			}
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		stage.on("pointerdown", (e) => {
 			this.setTapStart(e);
 			this.pointers.set(e.evt.pointerId, {
@@ -22007,7 +21954,7 @@ var WeavePenToolAction = class extends WeaveAction {
 				this.cancelAction();
 				return;
 			}
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		stage.on("pointerdown", (e) => {
 			this.setTapStart(e);
 			this.pointers.set(e.evt.pointerId, {
@@ -22291,13 +22238,13 @@ var WeaveLineToolAction = class extends WeaveAction {
 				this.snappedAngle = null;
 				this.shiftPressed = true;
 			}
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		window.addEventListener("keyup", (e) => {
 			if (e.key === "Shift" && this.instance.getActiveAction() === LINE_TOOL_ACTION_NAME) {
 				this.snappedAngle = null;
 				this.shiftPressed = false;
 			}
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		stage.on("pointerdown", (e) => {
 			this.setTapStart(e);
 			this.pointers.set(e.evt.pointerId, {
@@ -22566,7 +22513,7 @@ var WeaveBrushToolAction = class extends WeaveAction {
 		stage.container().style.touchAction = "none";
 		window.addEventListener("keyup", (e) => {
 			if (e.code === "Space" && this.instance.getActiveAction() === BRUSH_TOOL_ACTION_NAME) this.isSpacePressed = false;
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		window.addEventListener("keydown", (e) => {
 			if (e.code === "Enter" && this.instance.getActiveAction() === BRUSH_TOOL_ACTION_NAME) {
 				e.stopPropagation();
@@ -22582,8 +22529,8 @@ var WeaveBrushToolAction = class extends WeaveAction {
 				e.stopPropagation();
 				this.cancelAction();
 			}
-		}, { signal: this.instance.getEventsController()?.signal });
-		const handlePointerDown = (e) => {
+		}, { signal: this.instance.getEventsController().signal });
+		const handlePointerDown$1 = (e) => {
 			if (this.state === BRUSH_TOOL_STATE.INACTIVE) return;
 			if (this.state !== BRUSH_TOOL_STATE.IDLE) return;
 			if (this.getZoomPlugin()?.isPinching()) return;
@@ -22595,8 +22542,8 @@ var WeaveBrushToolAction = class extends WeaveAction {
 			this.handleStartStroke(pointPressure);
 			e.evt.stopPropagation();
 		};
-		stage.on("pointerdown", handlePointerDown);
-		const handlePointerMove = (e) => {
+		stage.on("pointerdown", handlePointerDown$1);
+		const handlePointerMove$1 = (e) => {
 			if (this.state === BRUSH_TOOL_STATE.INACTIVE) return;
 			this.setCursor();
 			if (this.state !== BRUSH_TOOL_STATE.DEFINE_STROKE) return;
@@ -22619,15 +22566,15 @@ var WeaveBrushToolAction = class extends WeaveAction {
 			}
 			e.evt.stopPropagation();
 		};
-		stage.on("pointermove", handlePointerMove);
-		const handlePointerUp = (e) => {
+		stage.on("pointermove", handlePointerMove$1);
+		const handlePointerUp$1 = (e) => {
 			this.penActive = false;
 			if (this.state !== BRUSH_TOOL_STATE.DEFINE_STROKE) return;
 			if (this.getZoomPlugin()?.isPinching()) return;
 			this.handleEndStroke();
 			e.evt.stopPropagation();
 		};
-		stage.on("pointerup", handlePointerUp);
+		stage.on("pointerup", handlePointerUp$1);
 		this.initialized = true;
 	}
 	setState(state) {
@@ -22859,7 +22806,7 @@ var WeaveTextToolAction = class extends WeaveAction {
 				this.cancelAction();
 				return;
 			}
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		stage.on("pointermove", () => {
 			if (this.state === TEXT_TOOL_STATE.IDLE) return;
 			this.setCursor();
@@ -23035,7 +22982,7 @@ var WeaveImageToolAction = class extends WeaveAction {
 				this.cancelAction();
 				return;
 			}
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		stage.on("pointerdown", (e) => {
 			this.setTapStart(e);
 			if (this.ignorePointerEvents) return;
@@ -23358,10 +23305,10 @@ var WeaveImageToolAction = class extends WeaveAction {
 		return this.state;
 	}
 	loadImageDataURL(imageDataURL) {
-		return new Promise((resolve, reject$1) => {
+		return new Promise((resolve, reject) => {
 			const imageEle = Konva.Util.createImageElement();
 			imageEle.onerror = (error) => {
-				reject$1(error);
+				reject(error);
 			};
 			imageEle.onload = async () => {
 				resolve(imageEle);
@@ -23370,13 +23317,13 @@ var WeaveImageToolAction = class extends WeaveAction {
 		});
 	}
 	getDataURL(blob) {
-		return new Promise((resolve, reject$1) => {
+		return new Promise((resolve, reject) => {
 			const reader = new FileReader();
 			reader.onloadend = () => {
 				resolve(reader.result);
 			};
 			reader.onerror = () => {
-				reject$1(new Error("Failed to generate dataURL from file"));
+				reject(new Error("Failed to generate dataURL from file"));
 			};
 			reader.readAsDataURL(blob);
 		});
@@ -23495,7 +23442,7 @@ var WeaveImagesToolAction = class extends WeaveAction {
 		const stage = this.instance.getStage();
 		stage.container().addEventListener("keydown", (e) => {
 			if (e.key === "Escape" && this.instance.getActiveAction() === WEAVE_IMAGES_TOOL_ACTION_NAME) this.cancelAction();
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		stage.on("pointerdown", (e) => {
 			this.setTapStart(e);
 			this.pointers.set(e.evt.pointerId, {
@@ -23913,7 +23860,7 @@ var WeaveStarToolAction = class extends WeaveAction {
 				this.cancelAction();
 				return;
 			}
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		stage.on("pointerdown", (e) => {
 			this.setTapStart(e);
 			this.pointers.set(e.evt.pointerId, {
@@ -24136,7 +24083,7 @@ var WeaveArrowToolAction = class extends WeaveAction {
 				return;
 			}
 			if (e.code === "Escape" && this.instance.getActiveAction() === WEAVE_ARROW_TOOL_ACTION_NAME) this.cancelAction();
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		stage.on("pointerdown", (e) => {
 			this.setTapStart(e);
 			this.pointers.set(e.evt.pointerId, {
@@ -24427,10 +24374,10 @@ var WeaveStrokeToolAction = class extends WeaveAction {
 				return;
 			}
 			if (e.key === "Shift" && this.getNames().includes(this.instance.getActiveAction() ?? "")) this.shiftPressed = true;
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		window.addEventListener("keyup", (e) => {
 			if (e.key === "Shift" && this.getNames().includes(this.instance.getActiveAction() ?? "")) this.shiftPressed = false;
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		stage.on("pointerdown", (e) => {
 			this.setTapStart(e);
 			this.pointers.set(e.evt.pointerId, {
@@ -24660,7 +24607,7 @@ var WeaveRegularPolygonToolAction = class extends WeaveAction {
 				this.cancelAction();
 				return;
 			}
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		stage.on("pointerdown", (e) => {
 			this.setTapStart(e);
 			this.pointers.set(e.evt.pointerId, {
@@ -24864,7 +24811,7 @@ var WeaveFrameToolAction = class extends WeaveAction {
 				this.cancelAction();
 				return;
 			}
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		stage.on("pointermove", () => {
 			if (this.state === FRAME_TOOL_STATE.IDLE) return;
 			this.setCursor();
@@ -25405,7 +25352,7 @@ var WeaveCommentToolAction = class extends WeaveAction {
 				return;
 			}
 			if (e.code === "Escape" && this.state === WEAVE_COMMENT_TOOL_STATE.CREATING_COMMENT) this.setState(WEAVE_COMMENT_TOOL_STATE.ADDING);
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		stage.on("pointermove", (e) => {
 			if (this.state === WEAVE_COMMENT_TOOL_STATE.IDLE) return;
 			if (commentNodeHandler?.isCommentViewing()) {
@@ -25607,7 +25554,7 @@ var WeaveVideoToolAction = class extends WeaveAction {
 				this.cancelAction();
 				return;
 			}
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		stage.on("pointerdown", (e) => {
 			this.setTapStart(e);
 			this.pointers.set(e.evt.pointerId, {
@@ -25770,7 +25717,7 @@ var WeaveMeasureToolAction = class extends WeaveAction {
 		const stage = this.instance.getStage();
 		window.addEventListener("keydown", (e) => {
 			if (e.code === "Escape" && this.instance.getActiveAction() === MEASURE_TOOL_ACTION_NAME) this.cancelAction();
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		stage.on("pointermove", () => {
 			if (this.state === MEASURE_TOOL_STATE.IDLE) return;
 			if (this.state === MEASURE_TOOL_STATE.SET_TO) {
@@ -26081,7 +26028,7 @@ var WeaveConnectorToolAction = class extends WeaveAction {
 				return;
 			}
 			if (e.code === "Escape" && this.instance.getActiveAction() === CONNECTOR_TOOL_ACTION_NAME) this.cancelAction();
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		let nodeHovered = void 0;
 		stage.on("pointermove", () => {
 			if (!(this.state === CONNECTOR_TOOL_STATE.SELECTING_INITIAL || this.state === CONNECTOR_TOOL_STATE.SELECTING_FINAL)) return;
@@ -26897,7 +26844,7 @@ var WeaveGuideToolAction = class extends WeaveAction {
 		window.addEventListener("keyup", (e) => {
 			const isOptionAltPressed = e.key === "Alt" || e.key === "Option";
 			if (isOptionAltPressed) this.guideDistanceToTargetInfo.cleanup();
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		window.addEventListener("keydown", (e) => {
 			const isOptionAltPressed = e.key === "Alt" || e.key === "Option";
 			if (isOptionAltPressed && this.instance.getActiveAction() === GUIDE_TOOL_ACTION_NAME && this.state === GUIDE_TOOL_STATE.ADDING) this.moveGuide(true);
@@ -26917,7 +26864,7 @@ var WeaveGuideToolAction = class extends WeaveAction {
 					this.cancelAction();
 				}
 			}
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		stage.on("pointermove", (e) => {
 			if (this.state === GUIDE_TOOL_STATE.IDLE) return;
 			this.setCursor();
@@ -27189,10 +27136,10 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 		const stage = this.instance.getStage();
 		window.addEventListener("keydown", (e) => {
 			if (e.code === "Space") this.isSpaceKeyPressed = true;
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		window.addEventListener("keyup", (e) => {
 			if (e.code === "Space") this.isSpaceKeyPressed = false;
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		this.instance.addEventListener("onStageMove", () => {
 			this.onRender();
 		});
@@ -27509,7 +27456,7 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 				this.isSpaceKeyPressed = true;
 				this.setCursor();
 			}
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		window.addEventListener("keyup", (e) => {
 			if (e.code === "Space") {
 				this.getContextMenuPlugin()?.enable();
@@ -27517,7 +27464,7 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 				this.isSpaceKeyPressed = false;
 				this.disableMove();
 			}
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		let lastPos = null;
 		stage.on("pointerdown", (e) => {
 			this.pointers.set(e.evt.pointerId, {
@@ -27593,7 +27540,7 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 		const handleWheelThrottled = (0, import_throttle.default)(handleWheel, WEAVE_STAGE_PANNING_THROTTLE_MS);
 		window.addEventListener("wheel", handleWheelThrottled, {
 			passive: true,
-			signal: this.instance.getEventsController()?.signal
+			signal: this.instance.getEventsController().signal
 		});
 		stage.on("dragstart", (e) => {
 			const duration = 1e3 / 60;
@@ -27645,7 +27592,7 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 			e.preventDefault();
 		}, {
 			passive: false,
-			signal: this.instance.getEventsController()?.signal
+			signal: this.instance.getEventsController().signal
 		});
 	}
 	isPanning() {
@@ -27931,7 +27878,7 @@ var WeaveStageResizePlugin = class extends WeavePlugin {
 		}, DEFAULT_THROTTLE_MS);
 		window.addEventListener("resize", () => {
 			throttledResize();
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		const resizeObserver = new ResizeObserver(() => {
 			throttledResize();
 		});
@@ -28655,6 +28602,215 @@ var WeaveUsersPresencePlugin = class extends WeavePlugin {
 	}
 };
 
+//#endregion
+//#region src/plugins/context-menu/context-menu.ts
+var WeaveContextMenuPlugin = class extends WeavePlugin {
+	getLayerName = void 0;
+	initLayer = void 0;
+	constructor(params) {
+		super();
+		const { config } = params ?? {};
+		this.config = {
+			xOffset: WEAVE_CONTEXT_MENU_X_OFFSET_DEFAULT,
+			yOffset: WEAVE_CONTEXT_MENU_Y_OFFSET_DEFAULT,
+			...config
+		};
+		this.initialize();
+	}
+	initialize() {
+		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;
+		this.pointers = {};
+	}
+	getName() {
+		return WEAVE_CONTEXT_MENU_PLUGIN_KEY;
+	}
+	onInit() {
+		this.initEvents();
+	}
+	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.getSelectionPlugin();
+		let nodes = [];
+		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.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();
+		let allNodesMutexUnlocked = true;
+		let allNodesUnlocked = true;
+		const actUser = this.instance.getStore().getUser();
+		for (const node of nodes) {
+			const locked = node.instance.getAttrs().locked;
+			const mutexInfo = this.instance.getNodeMutexLock(node.node?.key ?? "");
+			if (locked) {
+				allNodesUnlocked = false;
+				break;
+			}
+			if (mutexInfo && mutexInfo.user.id !== actUser.id) {
+				allNodesMutexUnlocked = false;
+				break;
+			}
+		}
+		if (!allNodesMutexUnlocked || !allNodesUnlocked) return;
+		if (selectionPlugin && !(eventTarget.getParent() instanceof Konva.Transformer && selectionPlugin.getSelectedNodes().length > 0)) {
+			selectionPlugin.setSelectedNodes([...nodes.map((node) => node.instance)]);
+			selectionPlugin.getHoverTransformer().nodes([]);
+		}
+		const containerRect = stage.container().getBoundingClientRect();
+		const pointerPos = stage.getPointerPosition();
+		const relativeClickPoint = stage.getRelativePointerPosition();
+		if (containerRect && pointerPos && relativeClickPoint && allNodesUnlocked) {
+			const contextMenuPoint = {
+				x: containerRect.left + pointerPos.x + (this.config.xOffset ?? 4),
+				y: containerRect.top + pointerPos.y + (this.config.yOffset ?? 4)
+			};
+			const stageClickPoint = this.getStageClickPoint(pointerPos);
+			this.contextMenuVisible = true;
+			this.instance.emitEvent("onNodeContextMenu", {
+				selection: nodes,
+				contextMenuPoint,
+				clickPoint: pointerPos,
+				stageClickPoint,
+				visible: true
+			});
+		}
+	}
+	closeContextMenu() {
+		this.contextMenuVisible = false;
+		this.instance.emitEvent("onNodeContextMenu", {
+			selection: [],
+			contextMenuPoint: {
+				x: 0,
+				y: 0
+			},
+			clickPoint: {
+				x: 0,
+				y: 0
+			},
+			stageClickPoint: {
+				x: 0,
+				y: 0
+			},
+			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();
+		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;
+			if (this.timer) return;
+			this.timer = setTimeout(() => {
+				this.tapHold = true;
+				const actualActions = this.instance.getActiveAction();
+				if (actualActions !== SELECTION_TOOL_ACTION_NAME) return;
+				delete this.pointers[e.evt.pointerId];
+				const selectedGroup = getTargetedNode(this.instance);
+				this.triggerContextMenu(e.target, selectedGroup);
+			}, this.tapHoldTimeout);
+		});
+		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.timer) {
+				clearTimeout(this.timer);
+				this.timer = null;
+				this.tapHold = false;
+			}
+		});
+		stage.on("contextmenu", (e) => {
+			e.evt.preventDefault();
+			if (!this.enabled) return;
+			const selectedGroup = getTargetedNode(this.instance);
+			this.triggerContextMenu(e.target, selectedGroup);
+		});
+		this.instance.addEventListener("onStageSelection", () => {
+			if (this.tapHold) return;
+			const containerRect = stage.container().getBoundingClientRect();
+			const pointerPos = stage.getPointerPosition();
+			if (containerRect && pointerPos) {
+				const contextMenuPoint = {
+					x: containerRect.left + pointerPos.x + (this.config.xOffset ?? 4),
+					y: containerRect.top + pointerPos.y + (this.config.yOffset ?? 4)
+				};
+				const stageClickPoint = this.getStageClickPoint(pointerPos);
+				this.instance.emitEvent("onNodeContextMenu", {
+					selection: [],
+					contextMenuPoint,
+					clickPoint: pointerPos,
+					stageClickPoint,
+					visible: false
+				});
+			}
+		});
+	}
+	getStageClickPoint(pointerPos) {
+		const stage = this.instance.getStage();
+		const scale = stage.scale();
+		const position = stage.position();
+		const stageClickPoint = {
+			x: (pointerPos.x - position.x) / scale.x,
+			y: (pointerPos.y - position.y) / scale.y
+		};
+		return stageClickPoint;
+	}
+	isContextMenuVisible() {
+		return this.contextMenuVisible;
+	}
+	isTapHold() {
+		return this.tapHold;
+	}
+	enable() {
+		this.enabled = true;
+	}
+	disable() {
+		this.enabled = false;
+	}
+};
+
 //#endregion
 //#region src/plugins/stage-drop-area/constants.ts
 const WEAVE_STAGE_DROP_AREA_KEY = "stageDropArea";
@@ -28682,18 +28838,18 @@ var WeaveStageDropAreaPlugin = class extends WeavePlugin {
 		stage.container().addEventListener("dragover", (e) => {
 			e.preventDefault();
 			e.stopPropagation();
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		stage.container().addEventListener("drop", (e) => {
 			e.preventDefault();
 			e.stopPropagation();
 			this.instance.emitEvent("onStageDrop", e);
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		window.addEventListener("dragover", (e) => e.preventDefault(), {
-			signal: this.instance.getEventsController()?.signal,
+			signal: this.instance.getEventsController().signal,
 			passive: false
 		});
 		window.addEventListener("drop", (e) => e.preventDefault(), {
-			signal: this.instance.getEventsController()?.signal,
+			signal: this.instance.getEventsController().signal,
 			passive: false
 		});
 	}
@@ -28861,7 +29017,7 @@ var WeaveStageKeyboardMovePlugin = class extends WeavePlugin {
 			if (e.code === "ArrowLeft") this.handleNodesMovement(WEAVE_STAGE_KEYBOARD_MOVE_ORIENTATION.LEFT, { isShiftPressed });
 			if (e.code === "ArrowRight") this.handleNodesMovement(WEAVE_STAGE_KEYBOARD_MOVE_ORIENTATION.RIGHT, { isShiftPressed });
 			if (e.code === "ArrowDown") this.handleNodesMovement(WEAVE_STAGE_KEYBOARD_MOVE_ORIENTATION.DOWN, { isShiftPressed });
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 	}
 	enable() {
 		this.enabled = true;
@@ -28929,18 +29085,18 @@ var WeaveNodesSnappingCustomGuides = class {
 			const isOptionAltPressed = e.altKey;
 			this.cleanupDistanceGuide();
 			if (isOptionAltPressed && this.isDragging) this.handleDistanceGuide(isOptionAltPressed);
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		window.addEventListener("keyup", (e) => {
 			const isOptionAltPressed = e.key === "Alt" || e.key === "Option";
 			if (isOptionAltPressed) this.cleanupDistanceGuide();
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 		window.addEventListener("keydown", (e) => {
 			const isOptionAltPressed = e.key === "Alt" || e.key === "Option";
 			if (isOptionAltPressed && this.isDragging) {
 				this.cleanupDistanceGuide();
 				this.handleDistanceGuide(isOptionAltPressed);
 			}
-		}, { signal: this.instance.getEventsController()?.signal });
+		}, { signal: this.instance.getEventsController().signal });
 	}
 	getAllCustomGuides() {
 		return this.customGuides;
@@ -29139,7 +29295,7 @@ var WeaveNodesSnappingCustomGuides = class {
 			this.setupEvents = false;
 		}
 		if (!this.noGuidesVisible() && !this.setupEvents) {
-			stage.container().addEventListener("keydown", this.handleArrowKeys, { signal: this.instance.getEventsController()?.signal });
+			stage.container().addEventListener("keydown", this.handleArrowKeys, { signal: this.instance.getEventsController().signal });
 			stage.on("pointerclick", this.handlePointerClick);
 			this.instance.addEventListener("onNodesChange", this.handleOnNodesSelectedChange);
 			this.instance.addEventListener("onStageMove", this.handleStagePanChange);