@inditextech/weave-sdk 3.1.0 → 3.2.0-SNAPSHOT.112.1

package/dist/sdk.node.js

@@ -4,6 +4,7 @@ import pino from "pino";
 import { WEAVE_ASYNC_STATUS, WEAVE_AWARENESS_LAYER_ID, WEAVE_EXPORT_BACKGROUND_COLOR, WEAVE_EXPORT_FORMATS, WEAVE_INSTANCE_STATUS, WEAVE_KONVA_BACKEND, WEAVE_LOG_LEVEL, WEAVE_NODE_CHANGE_TYPE, WEAVE_NODE_CUSTOM_EVENTS, WEAVE_NODE_LAYER_ID, WEAVE_NODE_POSITION, WEAVE_STORE_CONNECTION_STATUS, WEAVE_UTILITY_LAYER_ID } from "@inditextech/weave-types";
 import { getYjsDoc, getYjsValue, observeDeep, syncedStore } from "@syncedstore/core";
 import * as Y from "yjs";
+import "konva/lib/types";
 
 //#region rolldown:runtime
 var __create = Object.create;
@@ -15150,6 +15151,7 @@ var WeaveStore = class {
 				});
 			}
 			if (!this.isRoomLoaded && !(0, import_lodash.isEmpty)(this.state.weave)) {
+				this.instance.checkForAsyncElements();
 				this.instance.setupRenderer();
 				this.isRoomLoaded = true;
 				this.emitOnRoomLoadedEvent();
@@ -17603,7 +17605,7 @@ var require_mergeWith = __commonJS({ "../../node_modules/lodash/mergeWith.js"(ex
 var import_mergeWith = __toESM(require_mergeWith(), 1);
 
 //#endregion
-//#region src/utils.ts
+//#region src/utils/utils.ts
 function resetScale(node) {
 	node.width(Math.round((Math.max(1, node.width() * node.scaleX()) + Number.EPSILON) * 100) / 100);
 	node.height(Math.round((Math.max(1, node.height() * node.scaleY()) + Number.EPSILON) * 100) / 100);
@@ -17816,7 +17818,7 @@ function getTargetAndSkipNodes(instance, e, forceTransformer = false) {
 	};
 	let skipNodes = [];
 	let node = void 0;
-	if (e.type === "dragmove" && nodesSelectionPlugin && nodesSelectionPlugin.getTransformer().nodes().length === 1) {
+	if (e.type === "dragmove" && nodesSelectionPlugin?.getTransformer().nodes().length === 1) {
 		node = nodesSelectionPlugin.getTransformer().nodes()[0];
 		skipNodes.push(node.getAttrs().id ?? "");
 		if (node.getAttr("eventTarget")) {
@@ -17922,7 +17924,7 @@ const getPositionRelativeToContainerOnPosition = (instance) => {
 };
 const canComposite = (node) => {
 	const parent = node.getParent();
-	return parent && parent.getClassName() === "Group" && parent.getAttrs().nodeType !== "frame" && parent.getAttrs().nodeId === void 0;
+	return parent?.getClassName() === "Group" && parent?.getAttrs().nodeType !== "frame" && parent?.getAttrs().nodeId === void 0;
 };
 function mergeExceptArrays(object, source) {
 	return (0, import_mergeWith.default)({}, object, source, (objValue, srcValue) => {
@@ -18790,7 +18792,11 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			} else nodeHovered?.handleMouseout?.();
 		});
 		tr.on("mouseover", () => {
-			stage.container().style.cursor = "grab";
+			const nodesSelected = tr.nodes();
+			if (nodesSelected.length === 1) {
+				const node = nodesSelected[0];
+				stage.container().style.cursor = node.defineMousePointer() ?? "grab";
+			} else stage.container().style.cursor = "grab";
 		});
 		tr.on("mouseout", () => {
 			this.instance.getStage().handleMouseover?.();
@@ -19513,7 +19519,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		if (areNodesSelected) {
 			stage.container().tabIndex = 1;
 			stage.container().focus();
-			stage.container().style.cursor = "grab";
+			stage.container().style.cursor = nodeTargeted.defineMousePointer() ?? "grab";
 		}
 		this.triggerSelectedNodesEvent();
 	}
@@ -19787,32 +19793,25 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 				if (!this.enabled) return;
 			}
 		});
-		if (catcher) {
-			document.addEventListener("paste", async (e) => {
-				const dataList = e.clipboardData?.items;
-				if (!dataList) return;
-				if (dataList?.length > 0) this.sendExternalPasteEvent(dataList);
-			});
-			catcher.addEventListener("paste", async (e) => {
-				e.preventDefault();
-				let items = void 0;
-				let hasWeaveData = false;
-				if (!items) {
-					if (this.isClipboardAPIAvailable()) items = await navigator.clipboard.read();
-				}
-				if (!items || items.length === 0) return;
-				if (this.isClipboardAPIAvailable()) {
-					const readText = await navigator.clipboard.readText();
-					const continueToPaste = this.isWeaveData(readText);
-					if (continueToPaste) hasWeaveData = true;
-				}
-				if (hasWeaveData) {
-					this.handlePaste();
-					return;
-				}
-				this.sendExternalPasteEvent(void 0, items);
-			});
-		}
+		if (catcher) catcher.addEventListener("paste", async (e) => {
+			e.preventDefault();
+			let items = void 0;
+			let hasWeaveData = false;
+			if (!items) {
+				if (this.isClipboardAPIAvailable()) items = await navigator.clipboard.read();
+			}
+			if (!items || items.length === 0) return;
+			if (this.isClipboardAPIAvailable()) {
+				const readText = await navigator.clipboard.readText();
+				const continueToPaste = this.isWeaveData(readText);
+				if (continueToPaste) hasWeaveData = true;
+			}
+			if (hasWeaveData) {
+				this.handlePaste();
+				return;
+			}
+			this.sendExternalPasteEvent(void 0, items);
+		});
 	}
 	sendExternalPasteEvent(dataList, items) {
 		const stage = this.instance.getStage();
@@ -20148,10 +20147,10 @@ const augmentKonvaNodeClass = (config) => {
 	Konva.Node.prototype.dblClick = function() {};
 };
 var WeaveNode = class {
-	register(instance) {
+	async register(instance) {
 		this.instance = instance;
 		this.logger = this.instance.getChildLogger(this.getNodeType());
-		this.onRegister();
+		await this.onRegister();
 		this.instance.getChildLogger(`node-${this.getNodeType()}`).debug(`Node with type [${this.getNodeType()}] registered`);
 		return this;
 	}
@@ -20197,6 +20196,11 @@ var WeaveNode = class {
 		node.handleMouseout = function() {};
 		node.handleSelectNode = function() {};
 		node.handleDeselectNode = function() {};
+		node.defineMousePointer = () => {
+			const selectedNodes = this.getSelectionPlugin()?.getSelectedNodes() ?? [];
+			if (this.isSelecting() && selectedNodes.includes(node)) return "grab";
+			return "pointer";
+		};
 		node.canBeHovered = function() {
 			return true;
 		};
@@ -20683,12 +20687,12 @@ var WeaveNode = class {
 		}
 		if (isNodeSelectionEnabled && this.isSelecting() && !this.isNodeSelected(realNode) && !this.isPasting() && isTargetable && !(isLocked || isMutexLocked) && stage.mode() === WEAVE_STAGE_DEFAULT_MODE) {
 			showHover = true;
-			stage.container().style.cursor = "pointer";
+			stage.container().style.cursor = realNode?.defineMousePointer() ?? "pointer";
 			cancelBubble = true;
 		}
 		if (isNodeSelectionEnabled && this.isSelecting() && this.isNodeSelected(realNode) && !this.isPasting() && isTargetable && !(isLocked || isMutexLocked) && stage.mode() === WEAVE_STAGE_DEFAULT_MODE) {
 			showHover = true;
-			stage.container().style.cursor = "grab";
+			stage.container().style.cursor = realNode?.defineMousePointer() ?? "grab";
 			cancelBubble = true;
 		}
 		if (!isTargetable) cancelBubble = true;
@@ -20718,7 +20722,9 @@ var WeaveNode = class {
 			}
 		};
 	}
-	onRegister() {}
+	async onRegister() {
+		return Promise.resolve();
+	}
 	onAdd(nodeInstance) {}
 	onDestroy(nodeInstance) {
 		nodeInstance.destroy();
@@ -20874,6 +20880,9 @@ var WeaveAction = class {
 	hasAliases() {
 		return false;
 	}
+	setForceExecution(forceExecution) {
+		this.forceExecution = forceExecution;
+	}
 	getAliases() {
 		return [];
 	}
@@ -21351,8 +21360,10 @@ var WeaveTargetingManager = class {
 		};
 		let measureContainer = mainLayer;
 		let container = mainLayer;
+		const utilityLayer = this.instance.getUtilityLayer();
+		if (utilityLayer) utilityLayer.visible(false);
 		const nodesSelection = this.instance.getPlugin("nodesSelection");
-		if (nodesSelection) nodesSelection.disable();
+		if (nodesSelection) nodesSelection.getTransformer().visible(false);
 		const dummyRect = new Konva.Rect({
 			width: 10,
 			height: 10,
@@ -21373,7 +21384,8 @@ var WeaveTargetingManager = class {
 			x: 0,
 			y: 0
 		};
-		if (nodesSelection) nodesSelection.enable();
+		if (utilityLayer) utilityLayer.visible(true);
+		if (nodesSelection) nodesSelection.getTransformer().visible(true);
 		dummyRect.destroy();
 		return {
 			mousePoint: relativeMousePointer,
@@ -21777,13 +21789,13 @@ var WeaveStateManager = class {
 	updateNodes(nodes) {
 		for (const node of nodes) this.updateNode(node);
 	}
-	stateTransactional(callback) {
+	stateTransactional(callback, origin) {
 		const state = this.instance.getStore().getState();
 		const doc = getYjsDoc(state);
-		const userId = this.instance.getStore().getUser().id;
+		const transactionOrigin = origin ?? this.instance.getStore().getUser().id;
 		doc.transact(() => {
 			callback();
-		}, userId);
+		}, transactionOrigin);
 	}
 	removeNode(node) {
 		const state = this.instance.getStore().getState();
@@ -21900,25 +21912,24 @@ var WeaveRegisterManager = class {
 		plugin.register(this.instance);
 		this.plugins[pluginName] = plugin;
 	}
-	registerNodesHandlers() {
+	async registerNodesHandlers() {
 		const config = this.instance.getConfiguration();
-		if (config.nodes) for (const node of config.nodes) this.registerNodeHandler(node);
+		if (config.nodes) for (const node of config.nodes) await this.registerNodeHandler(node);
 		this.logger.info(`Nodes handlers registered`);
 	}
-	registerNodeHandler(node) {
+	async registerNodeHandler(node) {
 		const nodeType = node.getNodeType();
 		if (this.nodesHandlers[nodeType]) {
 			const msg = `Node handler with type [${nodeType}] already exists`;
 			this.logger.error(msg);
 			throw new Error(msg);
 		}
-		node.register(this.instance);
+		await node.register(this.instance);
 		this.nodesHandlers[nodeType] = node;
 	}
 	registerActionsHandlers() {
 		const config = this.instance.getConfiguration();
 		if (config.actions) for (const action of config.actions) this.registerActionHandler(action);
-		this.logger.info(`Actions handlers registered`);
 	}
 	registerActionHandler(action) {
 		const actionName = action.getName();
@@ -21945,7 +21956,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "3.1.0";
+var version = "3.2.0-SNAPSHOT.112.1";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -22085,14 +22096,15 @@ var WeaveActionsManager = class {
 	getActiveAction() {
 		return this.activeAction;
 	}
-	triggerAction(actionName, params) {
+	triggerAction(actionName, params, forceExecution = false) {
 		const actionsHandlers = this.instance.getActionsHandlers();
 		if (typeof actionName === "undefined") throw new Error("Action name is required");
 		if (actionName && !actionsHandlers[actionName]) throw new Error(`Action handler with name [${actionName}] not registered`);
-		if (typeof this.activeAction !== "undefined") this.cancelAction(this.activeAction);
-		this.activeAction = actionName;
+		if (this.activeAction !== void 0 && !forceExecution) this.cancelAction(this.activeAction);
+		if (!forceExecution) this.activeAction = actionName;
+		actionsHandlers[actionName].setForceExecution(forceExecution);
 		const payload = actionsHandlers[actionName].trigger(this.cancelActionCallback(actionName), params);
-		this.instance.emitEvent("onActiveActionChange", this.activeAction);
+		if (!forceExecution) this.instance.emitEvent("onActiveActionChange", this.activeAction);
 		return payload;
 	}
 	updatePropsAction(actionName, props) {
@@ -22592,7 +22604,7 @@ var WeaveMutexManager = class {
 };
 
 //#endregion
-//#region src/utils/watch-map.ts
+//#region src/internal-utils/watch-map.ts
 function watchMap(onChange, map = new Map()) {
 	const handler = { get(target, prop, receiver) {
 		if (prop === "set") return (key, value$1) => {
@@ -22647,14 +22659,13 @@ var WeaveAsyncManager = class {
 		this.asyncElements = watchMap(() => {
 			this.instance.emitEvent("onAsyncElementChange");
 		}, new Map());
-		this.instance.addEventListener("onRoomLoaded", (isRoomLoaded) => {
-			if (!isRoomLoaded) return;
-			const roomHasResourcesToLoad = this.roomHasResourcesToLoad();
-			if (!roomHasResourcesToLoad && !this.asyncElementsLoadedEventEmitted) {
-				this.instance.emitEvent("onAsyncElementsLoaded");
-				this.asyncElementsLoadedEventEmitted = true;
-			}
-		});
+	}
+	checkForAsyncElements(elements) {
+		const amountAsyncResourcesExtracted = this.extractAsyncResources(elements);
+		if (amountAsyncResourcesExtracted === 0 && !this.asyncElementsLoadedEventEmitted) {
+			this.instance.emitEvent("onAsyncElementsLoaded");
+			this.asyncElementsLoadedEventEmitted = true;
+		}
 	}
 	extractAsyncElements(state) {
 		const asyncElements = [];
@@ -22670,11 +22681,20 @@ var WeaveAsyncManager = class {
 		} else for (const element of Object.values(state.weave)) traverse(element);
 		return asyncElements;
 	}
-	roomHasResourcesToLoad() {
+	extractAsyncResources(elements) {
 		const roomData = this.instance.getStore().getState();
-		const jsonRoomData = JSON.parse(JSON.stringify(roomData));
+		let jsonRoomData = JSON.parse(JSON.stringify(roomData));
+		if (elements) jsonRoomData = elements;
 		const asyncElements = this.extractAsyncElements(jsonRoomData);
-		return asyncElements.length > 0;
+		for (const element of asyncElements) {
+			const elementId = element.props?.id;
+			if (!elementId) continue;
+			if (!this.asyncElements.has(elementId)) this.asyncElements.set(elementId, {
+				type: element.type,
+				status: WEAVE_ASYNC_STATUS.NOT_LOADED
+			});
+		}
+		return asyncElements.length;
 	}
 	asyncElementsLoaded() {
 		return [...this.asyncElements.values()].every((el) => el.status === WEAVE_ASYNC_STATUS.LOADED);
@@ -22909,7 +22929,7 @@ var Weave = class {
 		this.emitEvent("onRoomLoaded", false);
 		this.status = WEAVE_INSTANCE_STATUS.STARTING;
 		this.emitEvent("onInstanceStatus", this.status);
-		this.registerManager.registerNodesHandlers();
+		await this.registerManager.registerNodesHandlers();
 		this.augmentKonvaStageClass();
 		this.augmentKonvaNodeClass();
 		this.registerManager.registerPlugins();
@@ -23120,8 +23140,8 @@ var Weave = class {
 	getActiveAction() {
 		return this.actionsManager.getActiveAction();
 	}
-	triggerAction(actionName, params) {
-		return this.actionsManager.triggerAction(actionName, params);
+	triggerAction(actionName, params, forceExecution = false) {
+		return this.actionsManager.triggerAction(actionName, params, forceExecution);
 	}
 	getPropsAction(actionName) {
 		return this.actionsManager.getPropsAction(actionName);
@@ -23153,9 +23173,10 @@ var Weave = class {
 		return this.stateManager.getNode(nodeKey);
 	}
 	addNode(node, parentId = "mainLayer", options = DEFAULT_ADD_NODE_OPTIONS) {
+		const { origin,...restOptions } = options;
 		this.stateTransactional(() => {
-			this.addNodeNT(node, parentId, options);
-		});
+			this.addNodeNT(node, parentId, restOptions);
+		}, origin);
 	}
 	addNodeNT(node, parentId = "mainLayer", options = DEFAULT_ADD_NODE_OPTIONS) {
 		const { index, emitUserChangeEvent, overrideUserChangeType } = mergeExceptArrays(DEFAULT_ADD_NODE_OPTIONS, options);
@@ -23176,9 +23197,10 @@ var Weave = class {
 		}
 	}
 	updateNode(node, options = DEFAULT_UPDATE_NODE_OPTIONS) {
+		const { origin,...restOptions } = options;
 		this.stateTransactional(() => {
-			this.updateNodeNT(node, options);
-		});
+			this.updateNodeNT(node, restOptions);
+		}, origin);
 	}
 	updateNodeNT(node, options = DEFAULT_UPDATE_NODE_OPTIONS) {
 		const { emitUserChangeEvent } = mergeExceptArrays(DEFAULT_UPDATE_NODE_OPTIONS, options);
@@ -23196,9 +23218,10 @@ var Weave = class {
 		}
 	}
 	updateNodes(nodes, options = DEFAULT_UPDATE_NODE_OPTIONS) {
+		const { origin,...restOptions } = options;
 		this.stateTransactional(() => {
-			this.updateNodesNT(nodes, options);
-		});
+			this.updateNodesNT(nodes, restOptions);
+		}, origin);
 	}
 	updateNodesNT(nodes, options = DEFAULT_UPDATE_NODE_OPTIONS) {
 		const { emitUserChangeEvent } = mergeExceptArrays(DEFAULT_UPDATE_NODE_OPTIONS, options);
@@ -23222,9 +23245,10 @@ var Weave = class {
 		}
 	}
 	removeNode(node, options = DEFAULT_REMOVE_NODE_OPTIONS) {
+		const { origin,...restOptions } = options;
 		this.stateTransactional(() => {
-			this.removeNodeNT(node, options);
-		});
+			this.removeNodeNT(node, restOptions);
+		}, origin);
 	}
 	removeNodeNT(node, options = DEFAULT_REMOVE_NODE_OPTIONS) {
 		const { emitUserChangeEvent } = mergeExceptArrays(DEFAULT_REMOVE_NODE_OPTIONS, options);
@@ -23256,9 +23280,10 @@ var Weave = class {
 		if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
 	}
 	removeNodes(nodes, options = DEFAULT_REMOVE_NODE_OPTIONS) {
+		const { origin,...restOptions } = options;
 		this.stateTransactional(() => {
-			this.removeNodesNT(nodes, options);
-		});
+			this.removeNodesNT(nodes, restOptions);
+		}, origin);
 	}
 	removeNodesNT(nodes, options = DEFAULT_REMOVE_NODE_OPTIONS) {
 		for (const node of nodes) this.removeNodeNT(node, options);
@@ -23266,9 +23291,10 @@ var Weave = class {
 		if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
 	}
 	zMoveNode(node, position, options = DEFAULT_MOVE_NODE_OPTIONS) {
+		const { origin,...restOptions } = options;
 		this.stateTransactional(() => {
-			this.zMoveNodeNT(node, position, options);
-		});
+			this.zMoveNodeNT(node, position, restOptions);
+		}, origin);
 	}
 	zMoveNodeNT(node, position, options = DEFAULT_MOVE_NODE_OPTIONS) {
 		const { emitUserChangeEvent } = mergeExceptArrays(DEFAULT_MOVE_NODE_OPTIONS, options);
@@ -23322,8 +23348,8 @@ var Weave = class {
 	getBoundingBox(nodes, config) {
 		return getBoundingBox(nodes, config);
 	}
-	stateTransactional(callback) {
-		this.stateManager.stateTransactional(callback);
+	stateTransactional(callback, origin) {
+		this.stateManager.stateTransactional(callback, origin);
 	}
 	moveUp(node) {
 		this.zIndexManager.moveUp(node);
@@ -23487,6 +23513,9 @@ var Weave = class {
 			nodeHandler.show(node);
 		}
 	}
+	checkForAsyncElements(elements) {
+		this.asyncManager.checkForAsyncElements(elements);
+	}
 	asyncElementsLoaded() {
 		return this.asyncManager.asyncElementsLoaded();
 	}
@@ -23557,7 +23586,93 @@ var Weave = class {
 };
 
 //#endregion
-//#region src/utils/upscale.ts
+//#region src/utils/image.ts
+function loadImageSource(image, options) {
+	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();
+			};
+			imageSource.onload = async () => {
+				resolve(imageSource);
+			};
+			imageSource.src = reader.result;
+		};
+		reader.onerror = () => {
+			reject(new Error("Failed to read image file"));
+		};
+		reader.readAsDataURL(image);
+	});
+}
+async function downscaleImageFile(file, ratio) {
+	const bitmap = await createImageBitmap(file);
+	const width = Math.round(bitmap.width * ratio);
+	const height = Math.round(bitmap.height * ratio);
+	const canvas = document.createElement("canvas");
+	canvas.width = width;
+	canvas.height = height;
+	const ctx = canvas.getContext("2d");
+	ctx.drawImage(bitmap, 0, 0, width, height);
+	return new Promise((resolve) => {
+		canvas.toBlob((blob) => resolve(blob), file.type, .9);
+	});
+}
+function getImageSizeFromFile(file) {
+	return new Promise((resolve, reject) => {
+		const img = new Image();
+		const url = URL.createObjectURL(file);
+		img.onload = () => {
+			resolve({
+				width: img.naturalWidth,
+				height: img.naturalHeight
+			});
+			URL.revokeObjectURL(url);
+		};
+		img.onerror = reject;
+		img.src = url;
+	});
+}
+function getDownscaleRatio(width, height, options) {
+	const { maxWidth, maxHeight } = mergeExceptArrays({
+		maxWidth: 200,
+		maxHeight: 200
+	}, options);
+	const widthRatio = maxWidth / width;
+	const heightRatio = maxHeight / height;
+	return Math.min(widthRatio, heightRatio, 1);
+}
+const downscaleImageFromURL = (url, options) => {
+	return new Promise((resolve, reject) => {
+		const { type, crossOrigin, maxWidth, maxHeight } = mergeExceptArrays({
+			type: "image/png",
+			crossOrigin: "anonymous",
+			maxWidth: 200,
+			maxHeight: 200
+		}, options);
+		const img = new Image();
+		img.crossOrigin = crossOrigin;
+		img.onload = () => {
+			const ratio = Math.min(maxWidth / img.width, maxHeight / img.height, 1);
+			const width = Math.round(img.width * ratio);
+			const height = Math.round(img.height * ratio);
+			const canvas = document.createElement("canvas");
+			canvas.width = width;
+			canvas.height = height;
+			const ctx = canvas.getContext("2d");
+			ctx.drawImage(img, 0, 0, width, height);
+			resolve(canvas.toDataURL(type));
+		};
+		img.onerror = reject;
+		img.src = url;
+	});
+};
+
+//#endregion
+//#region src/internal-utils/upscale.ts
 const setupUpscaleStage = (instance, stage) => {
 	const config = instance.getConfiguration();
 	const doUpscale = config.performance?.upscale?.enabled ?? false;
@@ -23991,7 +24106,7 @@ const WEAVE_LINE_NODE_DEFAULT_CONFIG = { snapAngles: {
 } };
 
 //#endregion
-//#region src/utils/greedy-snapper.ts
+//#region src/internal-utils/greedy-snapper.ts
 var GreedySnapper = class {
 	snappedAngle = null;
 	constructor(config) {
@@ -25007,8 +25122,16 @@ const WEAVE_IMAGE_CROP_ANCHOR_POSITION = {
 };
 const WEAVE_IMAGE_DEFAULT_CONFIG = {
 	performance: { cache: { enabled: false } },
-	style: { placeholder: { fill: "#aaaaaa" } },
+	style: {
+		placeholder: { fill: "#aaaaaa" },
+		cursor: { loading: "wait" }
+	},
+	imageLoading: {
+		maxRetryAttempts: 15,
+		retryDelayMs: 2e3
+	},
 	crossOrigin: "anonymous",
+	useFallbackImage: true,
 	cropMode: {
 		gridLines: { enabled: true },
 		overlay: { fill: "rgba(0,0,0,0.2)" },
@@ -25578,8 +25701,10 @@ var WeaveImageCrop = class WeaveImageCrop {
 var WeaveImageNode = class extends WeaveNode {
 	imageBitmapCache = {};
 	imageSource = {};
+	imageFallback = {};
 	imageState = {};
-	imageIconSource = null;
+	imageTryoutAttempts = {};
+	imageTryoutIds = {};
 	nodeType = WEAVE_IMAGE_NODE_TYPE;
 	constructor(params) {
 		super();
@@ -25589,14 +25714,50 @@ var WeaveImageNode = class extends WeaveNode {
 			y: 0,
 			time: 0
 		};
-		this.lastTapTime = 0;
 		this.config = mergeExceptArrays(WEAVE_IMAGE_DEFAULT_CONFIG, config);
 		this.imageCrop = null;
+		this.imageBitmapCache = {};
+		this.imageSource = {};
+		this.imageState = {};
+		this.imageTryoutIds = {};
+		this.imageTryoutAttempts = {};
+		this.imageFallback = {};
+	}
+	preloadCursors() {
+		return new Promise((resolve) => {
+			(async () => {
+				const cursors = Object.keys(this.config.style.cursor);
+				const cursorUrls = [];
+				const cursorFallback = { loading: "wait" };
+				for (const cursorKey of cursors) {
+					const cursorValue = this.config.style.cursor[cursorKey];
+					const { preload, cursor } = this.extractCursorUrl(cursorValue, cursorFallback[cursorKey]);
+					if (preload) cursorUrls.push({ src: cursor });
+				}
+				if (cursorUrls.length > 0) {
+					const promises = cursorUrls.map(({ src }) => {
+						new Promise((resolveInt, rejectInt) => {
+							const img = Konva.Util.createImageElement();
+							img.onload = () => {
+								resolveInt();
+							};
+							img.onerror = () => {
+								rejectInt();
+							};
+							img.src = src;
+						});
+					});
+					await Promise.allSettled(promises);
+				}
+				resolve();
+			})();
+		});
 	}
 	getConfiguration() {
 		return this.config;
 	}
-	onRegister() {
+	async onRegister() {
+		await this.preloadCursors();
 		this.logger.info(`image caching enabled: ${this.config.performance.cache.enabled}`);
 	}
 	triggerCrop(imageNode, options) {
@@ -25672,6 +25833,12 @@ var WeaveImageNode = class extends WeaveNode {
 			cropping: false
 		});
 		this.setupDefaultNodeAugmentation(image);
+		image.defineMousePointer = () => {
+			if (this.imageState[id]?.status === "loading") return this.config.style.cursor.loading;
+			const selectedNodes = this.getSelectionPlugin()?.getSelectedNodes() ?? [];
+			if (this.isSelecting() && selectedNodes.includes(image)) return "grab";
+			return "pointer";
+		};
 		image.movedToContainer = () => {
 			const stage = this.instance.getStage();
 			const image$1 = stage.findOne(`#${id}`);
@@ -25750,8 +25917,8 @@ var WeaveImageNode = class extends WeaveNode {
 		image.dblClick = () => {
 			if (this.imageState[id]?.loaded && !this.imageState[id]?.error) this.config.onDblClick?.(this, image);
 		};
-		if (this.imageSource[id]) {
-			imagePlaceholder.destroy();
+		if (this.imageSource[id] && imageProps.imageURL) {
+			imagePlaceholder?.destroy();
 			const imageSource = this.imageSource[id];
 			internalImage.setAttrs({
 				image: imageSource,
@@ -25776,13 +25943,14 @@ var WeaveImageNode = class extends WeaveNode {
 				height: sourceImageHeight
 			});
 			this.imageState[id] = {
+				status: "loaded",
 				loaded: true,
 				error: false
 			};
 			this.updateImageCrop(image);
 		} else {
 			this.updatePlaceholderSize(image, imagePlaceholder);
-			this.loadImage(imageProps, image);
+			this.loadImage(imageProps, image, true);
 		}
 		if (this.config.performance.cache.enabled) image.on("transformend", () => {
 			this.cacheNode(image);
@@ -26013,7 +26181,7 @@ var WeaveImageNode = class extends WeaveNode {
 				scaleY: 1,
 				rotation: 0,
 				visible: true,
-				fill: "#ccccccff",
+				fill: this.config.style.placeholder.fill,
 				strokeWidth: 0,
 				draggable: false,
 				zIndex: 0
@@ -26047,7 +26215,7 @@ var WeaveImageNode = class extends WeaveNode {
 				scaleY: 1,
 				rotation: 0,
 				visible: true,
-				fill: "#ccccccff",
+				fill: this.config.style.placeholder.fill,
 				strokeWidth: 0,
 				draggable: false,
 				zIndex: 0
@@ -26089,59 +26257,113 @@ var WeaveImageNode = class extends WeaveNode {
 		}
 		this.cacheNode(nodeInstance);
 	}
-	preloadImage(imageId, imageURL, { onLoad, onError }) {
+	preloadFallbackImage(imageId, imageURL, { onLoad, onError }) {
+		const imageURLToLoad = imageURL ?? "http://localhost/false-image";
+		this.imageFallback[imageId] = Konva.Util.createImageElement();
+		this.imageFallback[imageId].crossOrigin = this.config.crossOrigin;
+		this.imageFallback[imageId].onerror = (error) => {
+			this.imageState[imageId] = {
+				status: "error-fallback",
+				loaded: false,
+				error: true
+			};
+			onError(error);
+		};
+		this.imageFallback[imageId].onload = async () => {
+			this.imageState[imageId] = {
+				status: "loading",
+				loaded: true,
+				error: false
+			};
+			onLoad();
+		};
+		this.imageState[imageId] = {
+			status: "loading",
+			loaded: false,
+			error: false
+		};
+		try {
+			this.imageFallback[imageId].src = imageURLToLoad;
+		} catch (ex) {
+			console.error(ex);
+		}
+	}
+	preloadImage(imageId, imageURL, { onLoad, onError }, loadingTryout = false) {
+		const imageURLToLoad = imageURL ?? "http://localhost/false-image";
 		this.imageSource[imageId] = Konva.Util.createImageElement();
 		this.imageSource[imageId].crossOrigin = this.config.crossOrigin;
 		this.imageSource[imageId].onerror = (error) => {
-			this.imageState[imageId] = {
+			if (!loadingTryout) this.imageState[imageId] = {
+				status: "error",
 				loaded: false,
 				error: true
 			};
 			delete this.imageSource[imageId];
-			delete this.imageState[imageId];
 			onError(error);
 		};
 		this.imageSource[imageId].onload = async () => {
+			const stage = this.instance.getStage();
+			stage.container().style.cursor = "pointer";
 			this.imageState[imageId] = {
+				status: "loaded",
 				loaded: true,
 				error: false
 			};
 			onLoad();
 		};
-		this.imageState[imageId] = {
+		if (this.imageState[imageId]) this.imageState[imageId].status = "loading";
+		else this.imageState[imageId] = {
+			status: "loading",
 			loaded: false,
 			error: false
 		};
 		try {
-			if (imageURL) this.imageSource[imageId].src = imageURL;
+			this.imageSource[imageId].src = imageURLToLoad;
 		} catch (ex) {
 			console.error(ex);
 		}
 	}
-	loadImage(params, image) {
+	loadImage(params, image, useFallback = false, loadTryout = false) {
 		const imageProps = params;
 		const { id } = imageProps;
 		const imagePlaceholder = image.findOne(`#${id}-placeholder`);
 		const internalImage = image.findOne(`#${id}-image`);
-		const realImageURL = this.config.urlTransformer?.(imageProps.imageURL ?? "", image) ?? imageProps.imageURL;
+		let realImageURL = this.config.urlTransformer?.(imageProps.imageURL ?? "", image) ?? imageProps.imageURL;
+		let preloadFunction = this.preloadImage.bind(this);
+		const loadFallback = useFallback && imageProps.imageFallback && this.config.useFallbackImage;
+		if (loadFallback) {
+			preloadFunction = this.preloadFallbackImage.bind(this);
+			realImageURL = imageProps.imageFallback;
+		}
 		this.loadAsyncElement(id);
-		this.preloadImage(id, realImageURL ?? "", {
+		preloadFunction(id, realImageURL ?? "", {
 			onLoad: () => {
-				if (image && imagePlaceholder && internalImage) {
+				if (useFallback) this.imageTryoutIds[id] = setTimeout(() => {
+					const node = this.instance.getStage().findOne(`#${id}`);
+					if (node) {
+						this.imageTryoutAttempts[id] = (this.imageTryoutAttempts[id] ?? 0) + 1;
+						this.loadImage(node.getAttrs(), node, false, true);
+					}
+				}, this.config.imageLoading.retryDelayMs);
+				if (useFallback && loadTryout && this.imageTryoutIds[id]) {
+					clearTimeout(this.imageTryoutIds[id]);
+					delete this.imageTryoutIds[id];
+				}
+				if (image && internalImage) {
 					image.setAttrs({
 						width: imageProps.width ? imageProps.width : this.imageSource[id].width,
 						height: imageProps.height ? imageProps.height : this.imageSource[id].height
 					});
-					imagePlaceholder.destroy();
-					const imageSource = this.imageSource[id];
+					imagePlaceholder?.destroy();
+					const imageSource = loadFallback ? this.imageFallback[id] : this.imageSource[id];
 					internalImage.setAttrs({
 						width: imageProps.width ? imageProps.width : this.imageSource[id].width,
 						height: imageProps.height ? imageProps.height : this.imageSource[id].height,
 						image: imageSource,
 						visible: true
 					});
-					let sourceImageWidth = this.imageSource[id].width;
-					let sourceImageHeight = this.imageSource[id].height;
+					let sourceImageWidth = imageProps.width ? imageProps.width : this.imageSource[id].width;
+					let sourceImageHeight = imageProps.height ? imageProps.height : this.imageSource[id].height;
 					if (image.getAttrs().imageInfo) {
 						sourceImageWidth = image.getAttrs().imageInfo.width;
 						sourceImageHeight = image.getAttrs().imageInfo.height;
@@ -26160,7 +26382,8 @@ var WeaveImageNode = class extends WeaveNode {
 						width: imageRect.width,
 						height: imageRect.height
 					});
-					this.imageState[id] = {
+					if (!loadFallback) this.imageState[id] = {
+						status: "loaded",
 						loaded: true,
 						error: false
 					};
@@ -26170,40 +26393,45 @@ var WeaveImageNode = class extends WeaveNode {
 				}
 			},
 			onError: (error) => {
+				if (!this.config.useFallbackImage) this.imageTryoutIds[id] = setTimeout(() => {
+					const node = this.instance.getStage().findOne(`#${id}`);
+					if (node) {
+						this.imageTryoutAttempts[id] = (this.imageTryoutAttempts[id] ?? 0) + 1;
+						this.loadImage(node.getAttrs(), node, false, true);
+					}
+				}, this.config.imageLoading.retryDelayMs);
+				if (loadTryout) {
+					const tryoutAttempts = this.imageTryoutAttempts[id] ?? 0;
+					if (tryoutAttempts < this.config.imageLoading.maxRetryAttempts) this.imageTryoutIds[id] = setTimeout(() => {
+						const node = this.instance.getStage().findOne(`#${id}`);
+						if (node) {
+							this.imageTryoutAttempts[id] = tryoutAttempts + 1;
+							this.loadImage(node.getAttrs(), node, false, true);
+						}
+					}, this.config.imageLoading.retryDelayMs);
+					return;
+				}
+				if (this.config.useFallbackImage && !useFallback && !loadTryout && imageProps.imageFallback) {
+					this.loadImage({ ...params }, image, true);
+					return;
+				}
 				this.imageState[id] = {
+					status: "error",
 					loaded: false,
 					error: true
 				};
-				image.setAttrs({
-					image: void 0,
-					width: 100,
-					height: 100,
-					imageInfo: {
-						width: 100,
-						height: 100
-					},
-					uncroppedImage: {
-						width: 100,
-						height: 100
-					}
-				});
+				image.setAttrs({ image: void 0 });
 				this.resolveAsyncElement(id);
 				console.error("Error loading image", realImageURL, error);
 				imagePlaceholder?.setAttrs({ visible: true });
 				internalImage?.setAttrs({ visible: false });
 				this.cacheNode(image);
 			}
-		});
+		}, loadTryout);
 	}
 	updatePlaceholderSize(image, imagePlaceholder) {
 		const imageAttrs = image.getAttrs();
 		if (!this.imageState[imageAttrs.id ?? ""]?.loaded) return;
-		if (!imageAttrs.adding && imageAttrs.cropInfo) {
-			const actualScale = imageAttrs.uncroppedImage.width / imageAttrs.imageInfo.width;
-			const cropScale = imageAttrs.cropInfo ? imageAttrs.cropInfo.scaleX : actualScale;
-			imagePlaceholder.width(imageAttrs.cropSize.width * (actualScale / cropScale));
-			imagePlaceholder.height(imageAttrs.cropSize.height * (actualScale / cropScale));
-		}
 		if (!imageAttrs.adding && !imageAttrs.cropInfo) {
 			imagePlaceholder.width(imageAttrs.uncroppedImage.width);
 			imagePlaceholder.height(imageAttrs.uncroppedImage.height);
@@ -26214,8 +26442,16 @@ var WeaveImageNode = class extends WeaveNode {
 		const internalImage = image?.findOne(`#${imageAttrs.id}-image`);
 		if (!this.imageState[imageAttrs.id ?? ""]?.loaded) return;
 		if (image && internalImage && !imageAttrs.adding && imageAttrs.cropInfo && imageAttrs.uncroppedImage) {
+			const imageId = imageAttrs.id ?? "";
 			const originalImageInfo = imageAttrs.imageInfo;
-			const actualImageInfo = this.imageSource[imageAttrs.id ?? ""];
+			let actualImageInfo = {
+				width: this.imageSource[imageId]?.width ?? 0,
+				height: this.imageSource[imageId]?.height ?? 0
+			};
+			if (actualImageInfo.width === 0 && actualImageInfo.height === 0 && this.imageFallback[imageId]) actualImageInfo = {
+				width: this.imageFallback[imageId].width,
+				height: this.imageFallback[imageId].height
+			};
 			const originalActualDiffScale = originalImageInfo ? actualImageInfo.width / originalImageInfo.width : 1;
 			const actualScale = imageAttrs.uncroppedImage.width / imageAttrs.imageInfo.width;
 			const cropScale = imageAttrs.cropInfo ? imageAttrs.cropInfo.scaleX : actualScale;
@@ -26244,6 +26480,9 @@ var WeaveImageNode = class extends WeaveNode {
 			internalImage.height(imageAttrs.uncroppedImage.height);
 		}
 	}
+	getFallbackImageSource(imageId) {
+		return this.imageFallback[imageId];
+	}
 	getImageSource(imageId) {
 		return this.imageSource[imageId];
 	}
@@ -26295,6 +26534,71 @@ var WeaveImageNode = class extends WeaveNode {
 	getIsAsync() {
 		return true;
 	}
+	forceLoadImage(nodeInstance) {
+		const nodeId = nodeInstance.getAttrs().id ?? "";
+		const node = this.instance.getStage().findOne(`#${nodeId}`);
+		if (this.imageTryoutIds[nodeId]) {
+			clearTimeout(this.imageTryoutIds[nodeId]);
+			delete this.imageTryoutIds[nodeId];
+		}
+		if (node) this.loadImage(node.getAttrs(), node, false, false);
+	}
+	onDestroy(nodeInstance) {
+		const nodeId = nodeInstance.getAttrs().id ?? "";
+		delete this.imageSource[nodeId];
+		delete this.imageState[nodeId];
+		delete this.imageTryoutAttempts[nodeId];
+		delete this.imageFallback[nodeId];
+		nodeInstance.destroy();
+	}
+	extractCursorUrl(cursor, fallback) {
+		const lower = cursor.toLowerCase();
+		const start = lower.indexOf("url(");
+		if (start === -1) return {
+			preload: false,
+			cursor
+		};
+		let i = start + 4;
+		const len = cursor.length;
+		while (i < len && /\s/.test(cursor[i])) i++;
+		let quote = null;
+		if (cursor[i] === "\"" || cursor[i] === "'") {
+			quote = cursor[i];
+			i++;
+		}
+		let buf = "";
+		for (; i < len; i++) {
+			const ch = cursor[i];
+			if (quote) {
+				if (ch === quote) {
+					i++;
+					break;
+				}
+				buf += ch;
+			} else {
+				if (ch === ")") break;
+				buf += ch;
+			}
+		}
+		const url = buf.trim();
+		if (!url) return {
+			preload: false,
+			cursor: fallback
+		};
+		if (!this.isAllowedUrl(url)) return {
+			preload: false,
+			cursor: fallback
+		};
+		return {
+			preload: true,
+			cursor: url
+		};
+	}
+	isAllowedUrl(value) {
+		if (/^https?:\/\//i.test(value)) return true;
+		if (/^(javascript|data|blob|ftp):/i.test(value)) return false;
+		return true;
+	}
 };
 
 //#endregion
@@ -28658,7 +28962,7 @@ var WeaveVideoNode = class extends WeaveNode {
 			videoIconGroup.x(videoWidth - videoIconGroupWidth - this.config.style.icon.external.paddingX);
 			videoIconGroup.y(videoHeight - videoIconGroupHeight - this.config.style.icon.external.paddingY);
 			const nodesSelectionPlugin = this.getNodeSelectionPlugin();
-			if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer().forceUpdate();
+			if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer()?.forceUpdate();
 			this.resolveAsyncElement(id);
 		};
 	}
@@ -29051,7 +29355,7 @@ var WeaveVideoNode = class extends WeaveNode {
 		videoIconGroup.x(videoWidth - videoIconGroupWidth - this.config.style.icon.external.paddingX);
 		videoIconGroup.y(videoHeight - videoIconGroupHeight - this.config.style.icon.external.paddingY);
 		const nodesSelectionPlugin = this.getNodeSelectionPlugin();
-		if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer().forceUpdate();
+		if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer()?.forceUpdate();
 	}
 	getNodeSelectionPlugin() {
 		const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
@@ -33018,14 +33322,19 @@ var WeaveBrushToolAction = class extends WeaveAction {
 		});
 		window.addEventListener("keydown", (e) => {
 			if (e.code === "Enter" && this.instance.getActiveAction() === BRUSH_TOOL_ACTION_NAME) {
+				e.stopPropagation();
 				this.cancelAction();
 				return;
 			}
 			if (e.code === "Space" && this.instance.getActiveAction() === BRUSH_TOOL_ACTION_NAME) {
+				e.stopPropagation();
 				this.isSpacePressed = true;
 				return;
 			}
-			if (e.code === "Escape" && this.instance.getActiveAction() === BRUSH_TOOL_ACTION_NAME) this.cancelAction();
+			if (e.code === "Escape" && this.instance.getActiveAction() === BRUSH_TOOL_ACTION_NAME) {
+				e.stopPropagation();
+				this.cancelAction();
+			}
 		});
 		const handlePointerDown = (e) => {
 			if (this.state === BRUSH_TOOL_STATE.INACTIVE) return;
@@ -33352,42 +33661,62 @@ var WeaveTextToolAction = class extends WeaveAction {
 
 //#endregion
 //#region src/actions/image-tool/constants.ts
-const IMAGE_TOOL_ACTION_NAME = "imageTool";
-const IMAGE_TOOL_STATE = {
+const WEAVE_IMAGE_TOOL_ACTION_NAME = "imageTool";
+const WEAVE_IMAGE_TOOL_UPLOAD_TYPE = {
+	["FILE"]: "file",
+	["IMAGE_URL"]: "imageURL"
+};
+const WEAVE_IMAGE_TOOL_STATE = {
 	["IDLE"]: "idle",
 	["DEFINING_POSITION"]: "definingPosition",
 	["SELECTED_POSITION"]: "selectedPosition",
 	["ADDING"]: "adding",
 	["FINISHED"]: "finished"
 };
-const IMAGE_TOOL_LOAD_FROM = {
-	["DATAURL"]: "dataURL",
-	["URL"]: "url"
-};
+const WEAVE_IMAGE_TOOL_CONFIG_DEFAULT = { style: { cursor: {
+	padding: 5,
+	imageThumbnail: {
+		width: 250,
+		height: 250,
+		shadowColor: "#aaaaaa",
+		shadowBlur: 10,
+		shadowOffset: {
+			x: 2,
+			y: 2
+		},
+		shadowOpacity: .5
+	}
+} } };
 
 //#endregion
 //#region src/actions/image-tool/image-tool.ts
 var WeaveImageToolAction = class extends WeaveAction {
 	initialized = false;
 	initialCursor = null;
-	cursorPadding = 5;
+	imageFile = null;
+	imageURL = null;
 	forceMainContainer = false;
+	ignoreKeyboardEvents = false;
+	ignorePointerEvents = false;
+	uploadType = null;
 	onPropsChange = void 0;
 	update = void 0;
-	constructor() {
+	constructor(params) {
 		super();
+		this.config = mergeExceptArrays(WEAVE_IMAGE_TOOL_CONFIG_DEFAULT, params?.config ?? {});
 		this.pointers = new Map();
 		this.initialized = false;
-		this.state = IMAGE_TOOL_STATE.IDLE;
+		this.state = WEAVE_IMAGE_TOOL_STATE.IDLE;
 		this.imageId = null;
 		this.tempImageId = null;
 		this.tempImageNode = null;
 		this.container = void 0;
 		this.imageURL = null;
+		this.uploadType = null;
 		this.clickPoint = null;
 	}
 	getName() {
-		return IMAGE_TOOL_ACTION_NAME;
+		return WEAVE_IMAGE_TOOL_ACTION_NAME;
 	}
 	initProps() {
 		return {
@@ -33401,14 +33730,15 @@ var WeaveImageToolAction = class extends WeaveAction {
 		this.instance.addEventListener("onStageDrop", (e) => {
 			const dragId = this.instance.getDragStartedId();
 			const dragProperties = this.instance.getDragProperties();
-			if (dragProperties && dragId === IMAGE_TOOL_ACTION_NAME) {
+			if (dragProperties && dragId === WEAVE_IMAGE_TOOL_ACTION_NAME) {
 				this.instance.getStage().setPointersPositions(e);
 				const position = getPositionRelativeToContainerOnPosition(this.instance);
-				this.instance.triggerAction(IMAGE_TOOL_ACTION_NAME, {
-					imageURL: dragProperties.imageURL,
-					...dragProperties.imageId && { imageId: dragProperties.imageId },
-					...dragProperties.imageWidth && { imageWidth: dragProperties.imageWidth },
-					...dragProperties.imageHeight && { imageHeight: dragProperties.imageHeight },
+				if (!position) return;
+				this.instance.triggerAction(WEAVE_IMAGE_TOOL_ACTION_NAME, {
+					type: WEAVE_IMAGE_TOOL_UPLOAD_TYPE.IMAGE_URL,
+					image: dragProperties.imageURL,
+					...dragProperties.imageId ? { imageId: dragProperties.imageId } : {},
+					...dragProperties.forceMainContainer && { forceMainContainer: dragProperties.forceMainContainer },
 					position
 				});
 			}
@@ -33417,87 +33747,93 @@ var WeaveImageToolAction = class extends WeaveAction {
 	setupEvents() {
 		const stage = this.instance.getStage();
 		window.addEventListener("keydown", (e) => {
-			if (e.code === "Escape" && this.instance.getActiveAction() === IMAGE_TOOL_ACTION_NAME) {
+			if (e.code === "Escape" && this.instance.getActiveAction() === WEAVE_IMAGE_TOOL_ACTION_NAME && !this.ignoreKeyboardEvents) {
 				this.cancelAction();
 				return;
 			}
 		});
 		stage.on("pointerdown", (e) => {
 			this.setTapStart(e);
+			if (this.ignorePointerEvents) return;
 			this.pointers.set(e.evt.pointerId, {
 				x: e.evt.clientX,
 				y: e.evt.clientY
 			});
-			if (this.pointers.size === 2 && this.instance.getActiveAction() === IMAGE_TOOL_ACTION_NAME) {
-				this.state = IMAGE_TOOL_STATE.DEFINING_POSITION;
+			if (this.pointers.size === 2 && this.instance.getActiveAction() === WEAVE_IMAGE_TOOL_ACTION_NAME) {
+				this.state = WEAVE_IMAGE_TOOL_STATE.DEFINING_POSITION;
 				return;
 			}
-			if (this.state === IMAGE_TOOL_STATE.DEFINING_POSITION) this.state = IMAGE_TOOL_STATE.SELECTED_POSITION;
+			if (this.state === WEAVE_IMAGE_TOOL_STATE.DEFINING_POSITION) this.state = WEAVE_IMAGE_TOOL_STATE.SELECTED_POSITION;
 		});
 		stage.on("pointermove", (e) => {
-			if (this.state === IMAGE_TOOL_STATE.IDLE) return;
+			if (this.ignorePointerEvents) return;
+			if (this.state === WEAVE_IMAGE_TOOL_STATE.IDLE) return;
 			this.setCursor();
-			if (this.pointers.size === 2 && this.instance.getActiveAction() === IMAGE_TOOL_ACTION_NAME) {
-				this.state = IMAGE_TOOL_STATE.DEFINING_POSITION;
+			if (this.pointers.size === 2 && this.instance.getActiveAction() === WEAVE_IMAGE_TOOL_ACTION_NAME) {
+				this.state = WEAVE_IMAGE_TOOL_STATE.DEFINING_POSITION;
 				return;
 			}
-			if ([IMAGE_TOOL_STATE.DEFINING_POSITION, IMAGE_TOOL_STATE.SELECTED_POSITION].includes(this.state) && this.tempImageNode && this.instance.getActiveAction() === IMAGE_TOOL_ACTION_NAME && e.evt.pointerType === "mouse") {
+			if ([WEAVE_IMAGE_TOOL_STATE.DEFINING_POSITION, WEAVE_IMAGE_TOOL_STATE.SELECTED_POSITION].includes(this.state) && this.tempImageNode && this.instance.getActiveAction() === WEAVE_IMAGE_TOOL_ACTION_NAME && e.evt.pointerType === "mouse") {
 				const mousePos = stage.getRelativePointerPosition();
+				const cursorPadding = this.config.style.cursor.padding;
 				this.tempImageNode.setAttrs({
-					x: (mousePos?.x ?? 0) + this.cursorPadding,
-					y: (mousePos?.y ?? 0) + this.cursorPadding
+					x: (mousePos?.x ?? 0) + cursorPadding / stage.scaleX(),
+					y: (mousePos?.y ?? 0) + cursorPadding / stage.scaleX()
 				});
 			}
 		});
 		stage.on("pointerup", (e) => {
+			if (this.ignorePointerEvents) return;
 			this.pointers.delete(e.evt.pointerId);
-			if (this.state === IMAGE_TOOL_STATE.SELECTED_POSITION) this.handleAdding();
+			if (this.state === WEAVE_IMAGE_TOOL_STATE.SELECTED_POSITION) this.handleAdding();
 		});
 		this.initialized = true;
 	}
 	setState(state) {
 		this.state = state;
 	}
-	loadImage(imageData, kind, position) {
+	async loadImage(params) {
 		this.setCursor();
 		this.setFocusStage();
 		if (!this.imageId) {
 			this.cancelAction();
 			return;
 		}
-		this.imageURL = kind === IMAGE_TOOL_LOAD_FROM.DATAURL ? "not-defined" : imageData;
 		const imageNodeHandler = this.getImageNodeHandler();
-		if (!imageNodeHandler) {
-			this.cancelAction();
-			return;
-		}
-		if (IMAGE_TOOL_LOAD_FROM.URL === kind) {
-			this.props = {
-				...this.props,
-				imageURL: this.imageURL,
-				width: this.props.loadImageWidth,
-				height: this.props.loadImageHeight
+		if (!imageNodeHandler) return;
+		const actualImageId = this.imageId;
+		if (params.type === WEAVE_IMAGE_TOOL_UPLOAD_TYPE.FILE) {
+			const image = params.image;
+			const realImageSize = await getImageSizeFromFile(image.file);
+			const downscaledImage = await downscaleImageFile(image.file, image.downscaleRatio);
+			const reader = new FileReader();
+			reader.onloadend = () => {
+				imageNodeHandler.preloadFallbackImage(actualImageId, reader.result, {
+					onLoad: () => {
+						this.props = {
+							...this.props,
+							imageFallback: reader.result,
+							imageURL: void 0,
+							width: realImageSize.width,
+							height: realImageSize.height
+						};
+						this.addImageNode(params?.position);
+					},
+					onError: () => {
+						this.cancelAction();
+					}
+				});
 			};
-			this.addImageNode(position);
+			reader.onerror = () => {};
+			reader.readAsDataURL(downscaledImage);
+		}
+		if (params.type === WEAVE_IMAGE_TOOL_UPLOAD_TYPE.IMAGE_URL) {
+			const image = params.image;
+			setTimeout(() => {
+				this.saveImageUrl(actualImageId, image.url);
+			}, 0);
+			this.addImageNode(params?.position);
 		}
-		imageNodeHandler.preloadImage(this.imageId, imageData, {
-			onLoad: () => {
-				this.instance.emitEvent("onImageLoadEnd", void 0);
-				const imageSource = imageNodeHandler.getImageSource(this.imageId);
-				if (imageSource && this.imageId) this.props = {
-					...this.props,
-					imageURL: this.imageURL,
-					width: imageSource.width,
-					height: imageSource.height
-				};
-				this.addImageNode(position);
-			},
-			onError: () => {
-				this.instance.emitEvent("onImageLoadEnd", new Error("Error loading image"));
-				this.cancelAction();
-			}
-		});
-		this.instance.emitEvent("onImageLoadStart");
 	}
 	isTouchDevice() {
 		return window.matchMedia("(pointer: coarse)").matches;
@@ -33507,54 +33843,67 @@ var WeaveImageToolAction = class extends WeaveAction {
 		this.setCursor();
 		this.setFocusStage();
 		if (position) {
-			this.setState(IMAGE_TOOL_STATE.SELECTED_POSITION);
+			this.setState(WEAVE_IMAGE_TOOL_STATE.SELECTED_POSITION);
 			this.handleAdding(position);
 			return;
 		}
+		const imageNodeHandler = this.getImageNodeHandler();
+		if (!imageNodeHandler) {
+			this.cancelAction();
+			return;
+		}
 		if (this.imageId) {
 			const mousePos = stage.getRelativePointerPosition();
 			this.tempImageId = v4_default();
-			const imageNodeHandler = this.getImageNodeHandler();
-			if (!imageNodeHandler) {
-				this.cancelAction();
-				return;
-			}
-			const imageSource = imageNodeHandler.getImageSource(this.imageId);
+			let imageSource = imageNodeHandler.getImageSource(this.imageId);
+			if (this.uploadType === "file") imageSource = imageNodeHandler.getFallbackImageSource(this.imageId);
 			if (!imageSource) {
 				this.cancelAction();
 				return;
 			}
 			const aspectRatio = imageSource.width / imageSource.height;
 			if (!this.tempImageNode && this.tempImageId && !this.isTouchDevice()) {
+				const cursorPadding = this.config.style.cursor.padding;
+				const imageThumbnailWidth = this.config.style.cursor.imageThumbnail.width;
+				const imageThumbnailHeight = this.config.style.cursor.imageThumbnail.height;
+				const shadowColor = this.config.style.cursor.imageThumbnail.shadowColor;
+				const shadowBlur = this.config.style.cursor.imageThumbnail.shadowBlur;
+				const shadowOffset = this.config.style.cursor.imageThumbnail.shadowOffset;
+				const shadowOpacity = this.config.style.cursor.imageThumbnail.shadowOpacity;
 				this.tempImageNode = new Konva.Image({
 					id: this.tempImageId,
-					x: (mousePos?.x ?? 0) + this.cursorPadding,
-					y: (mousePos?.y ?? 0) + this.cursorPadding,
-					width: 240 * aspectRatio * (1 / stage.scaleX()),
-					height: 240 * (1 / stage.scaleY()),
+					x: (mousePos?.x ?? 0) + cursorPadding / stage.scaleX(),
+					y: (mousePos?.y ?? 0) + cursorPadding / stage.scaleY(),
+					width: imageThumbnailWidth * aspectRatio * (1 / stage.scaleX()),
+					height: imageThumbnailHeight * (1 / stage.scaleY()),
 					opacity: 1,
 					adding: true,
 					image: imageSource,
 					stroke: "#000000ff",
 					strokeWidth: 0,
 					strokeScaleEnabled: true,
-					listening: false
+					listening: false,
+					shadowColor,
+					shadowBlur,
+					shadowOffset,
+					shadowOpacity
 				});
 				this.instance.getMainLayer()?.add(this.tempImageNode);
 			}
 			this.instance.emitEvent("onAddingImage", { imageURL: this.props.imageURL });
 		}
 		this.clickPoint = null;
-		this.setState(IMAGE_TOOL_STATE.DEFINING_POSITION);
+		this.setState(WEAVE_IMAGE_TOOL_STATE.DEFINING_POSITION);
 	}
 	handleAdding(position) {
+		const imageNodeHandler = this.getImageNodeHandler();
+		if (!imageNodeHandler) {
+			this.cancelAction();
+			return;
+		}
 		if (this.imageId) {
-			const imageNodeHandler = this.getImageNodeHandler();
-			if (!imageNodeHandler) {
-				this.cancelAction();
-				return;
-			}
-			const imageSource = imageNodeHandler.getImageSource(this.imageId);
+			let imageSource = imageNodeHandler.getImageSource(this.imageId);
+			if (this.uploadType === WEAVE_IMAGE_TOOL_UPLOAD_TYPE.FILE) imageSource = imageNodeHandler.getFallbackImageSource(this.imageId);
 			if (!imageSource && !position) {
 				this.cancelAction();
 				return;
@@ -33563,8 +33912,10 @@ var WeaveImageToolAction = class extends WeaveAction {
 			this.clickPoint = mousePoint;
 			this.container = container;
 			const nodeHandler = this.instance.getNodeHandler("image");
-			const imageWidth = this.props.loadImageWidth ? this.props.loadImageWidth : imageSource?.width;
-			const imageHeight = this.props.loadImageHeight ? this.props.loadImageHeight : imageSource?.height;
+			const imageWidth = this.props.width ? this.props.width : imageSource?.width;
+			const imageHeight = this.props.height ? this.props.height : imageSource?.height;
+			let realImageURL = void 0;
+			if (this.uploadType === WEAVE_IMAGE_TOOL_UPLOAD_TYPE.IMAGE_URL && this.imageURL) realImageURL = this.imageURL?.url;
 			if (nodeHandler) {
 				const node = nodeHandler.create(this.imageId, {
 					...this.props,
@@ -33572,7 +33923,7 @@ var WeaveImageToolAction = class extends WeaveAction {
 					y: this.clickPoint?.y ?? 0,
 					opacity: 1,
 					adding: false,
-					imageURL: this.imageURL,
+					imageURL: realImageURL,
 					stroke: "#000000ff",
 					strokeWidth: 0,
 					strokeScaleEnabled: true,
@@ -33581,15 +33932,32 @@ var WeaveImageToolAction = class extends WeaveAction {
 					imageInfo: {
 						width: imageWidth,
 						height: imageHeight
+					},
+					uncroppedImage: {
+						width: imageWidth,
+						height: imageHeight
 					}
 				});
 				this.instance.addNode(node, this.forceMainContainer ? this.instance.getMainLayer()?.getAttrs().id : this.container?.getAttrs().id);
-				this.instance.emitEvent("onAddedImage", {
-					imageURL: this.props.imageURL,
-					nodeId: this.imageId
-				});
+				this.instance.emitEvent("onAddedImage", { nodeId: this.imageId });
+				if (this.uploadType === WEAVE_IMAGE_TOOL_UPLOAD_TYPE.FILE) {
+					const uploadImageFunctionInternal = async () => {
+						const nodeId = this.imageId ?? "";
+						try {
+							const imageURL = await this.uploadImageFunction(this.imageFile.file);
+							this.saveImageUrl(nodeId, imageURL);
+							this.instance.emitEvent("onImageUploaded", {
+								imageURL,
+								nodeId
+							});
+						} catch (error) {
+							this.instance.emitEvent("onImageUploadedError", { error });
+						}
+					};
+					uploadImageFunctionInternal();
+				}
 			}
-			this.setState(IMAGE_TOOL_STATE.FINISHED);
+			this.setState(WEAVE_IMAGE_TOOL_STATE.FINISHED);
 		}
 		this.cancelAction();
 	}
@@ -33599,55 +33967,507 @@ var WeaveImageToolAction = class extends WeaveAction {
 		this.cancelAction = cancelAction;
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
 		if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
+		this.ignorePointerEvents = false;
+		this.ignoreKeyboardEvents = false;
 		this.forceMainContainer = params?.forceMainContainer ?? false;
+		this.imageFile = null;
+		this.imageURL = null;
 		this.imageId = v4_default();
 		this.props = this.initProps();
 		if (params?.imageId) this.updateProps({ imageId: params.imageId });
-		if (params?.imageId) this.updateProps({ loadImageWidth: params.imageWidth });
-		if (params?.imageId) this.updateProps({ loadImageHeight: params.imageHeight });
-		if (params.imageData) this.loadImage(params.imageData, IMAGE_TOOL_LOAD_FROM.DATAURL, params?.position ?? void 0);
-		if (params.imageURL) this.loadImage(params.imageURL, IMAGE_TOOL_LOAD_FROM.URL, params?.position ?? void 0);
-		return {
-			nodeId: this.imageId,
-			finishUploadCallback: (nodeId, imageURL) => {
-				return this.saveImageUrl.bind(this)(nodeId, imageURL);
+		if (this.forceExecution) {
+			this.ignorePointerEvents = true;
+			this.ignoreKeyboardEvents = true;
+		}
+		if (params?.position) this.setState(WEAVE_IMAGE_TOOL_STATE.SELECTED_POSITION);
+		if (params.type === WEAVE_IMAGE_TOOL_UPLOAD_TYPE.FILE && params.image) {
+			this.uploadType = WEAVE_IMAGE_TOOL_UPLOAD_TYPE.FILE;
+			this.imageFile = params.image;
+			this.uploadImageFunction = params.uploadImageFunction;
+			this.loadImage({
+				type: WEAVE_IMAGE_TOOL_UPLOAD_TYPE.FILE,
+				image: params.image,
+				position: params?.position
+			});
+		}
+		if (params.type === WEAVE_IMAGE_TOOL_UPLOAD_TYPE.IMAGE_URL && params.image) {
+			this.uploadType = WEAVE_IMAGE_TOOL_UPLOAD_TYPE.IMAGE_URL;
+			this.imageURL = params.image;
+			this.updateProps({
+				imageFallback: params.image.fallback,
+				width: params.image.width,
+				height: params.image.height
+			});
+			this.loadImage({
+				type: WEAVE_IMAGE_TOOL_UPLOAD_TYPE.IMAGE_URL,
+				image: params.image,
+				position: params?.position
+			});
+		}
+		return { nodeId: this.imageId };
+	}
+	saveImageUrl(nodeId, imageURL) {
+		const stage = this.instance.getStage();
+		const nodeHandler = this.instance.getNodeHandler("image");
+		const node = stage.findOne(`#${nodeId}`);
+		if (nodeHandler && node) {
+			node.setAttr("imageURL", imageURL);
+			nodeHandler.forceLoadImage(node);
+			this.instance.updateNode(nodeHandler.serialize(node), { origin: "system" });
+		}
+	}
+	cleanup() {
+		const stage = this.instance.getStage();
+		if (this.tempImageNode) this.tempImageNode.destroy();
+		if (!this.forceExecution) {
+			const selectionPlugin = this.instance.getPlugin("nodesSelection");
+			if (selectionPlugin) {
+				const node = stage.findOne(`#${this.imageId}`);
+				if (node) selectionPlugin.setSelectedNodes([node]);
+				this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
+			}
+			stage.container().style.cursor = "default";
+			this.instance.endDrag(WEAVE_IMAGE_TOOL_ACTION_NAME);
+		}
+		this.initialCursor = null;
+		this.forceMainContainer = false;
+		this.container = void 0;
+		this.tempImageNode = null;
+		this.imageURL = null;
+		this.clickPoint = null;
+		this.setState(WEAVE_IMAGE_TOOL_STATE.IDLE);
+	}
+	getImageNodeHandler() {
+		return this.instance.getNodeHandler("image");
+	}
+	setCursor() {
+		const stage = this.instance.getStage();
+		stage.container().style.cursor = "crosshair";
+	}
+	setFocusStage() {
+		const stage = this.instance.getStage();
+		stage.container().tabIndex = 1;
+		stage.container().blur();
+		stage.container().focus();
+	}
+	setDragAndDropProperties(properties) {
+		this.instance.startDrag(WEAVE_IMAGE_TOOL_ACTION_NAME);
+		this.instance.setDragProperties(properties);
+	}
+	getActualState() {
+		return this.state;
+	}
+};
+
+//#endregion
+//#region src/actions/images-tool/constants.ts
+const WEAVE_IMAGES_TOOL_ACTION_NAME = "imagesTool";
+const WEAVE_IMAGES_TOOL_UPLOAD_TYPE = {
+	["FILE"]: "file",
+	["IMAGE_URL"]: "imageURL"
+};
+const WEAVE_IMAGES_TOOL_STATE = {
+	["IDLE"]: "idle",
+	["UPLOADING"]: "uploading",
+	["DEFINING_POSITION"]: "definingPosition",
+	["SELECTED_POSITION"]: "selectedPosition",
+	["ADDING"]: "adding",
+	["FINISHED"]: "finished"
+};
+const WEAVE_IMAGES_TOOL_DEFAULT_CONFIG = {
+	style: {
+		cursor: {
+			padding: 5,
+			imageThumbnails: {
+				padding: 15,
+				width: 250,
+				height: 250,
+				shadowColor: "#aaaaaa",
+				shadowBlur: 10,
+				shadowOffset: {
+					x: 2,
+					y: 2
+				},
+				shadowOpacity: .5
 			}
+		},
+		moreImages: {
+			paddingX: 12,
+			paddingY: 8,
+			fontSize: 16,
+			fontFamily: "Arial",
+			textColor: "#000000",
+			backgroundColor: "#FFFFFF",
+			backgroundOpacity: 1
+		},
+		images: { padding: 20 }
+	},
+	layout: { columns: 4 }
+};
+
+//#endregion
+//#region src/internal-utils/generic.ts
+function sleep(ms) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+//#endregion
+//#region src/actions/images-tool/images-tool.ts
+var WeaveImagesToolAction = class extends WeaveAction {
+	initialized = false;
+	initialCursor = null;
+	nodesIds = [];
+	imagesFile = [];
+	imagesURL = [];
+	forceMainContainer = false;
+	uploadType = null;
+	onPropsChange = void 0;
+	update = void 0;
+	constructor(params) {
+		super();
+		this.config = mergeExceptArrays(WEAVE_IMAGES_TOOL_DEFAULT_CONFIG, params ?? {});
+		this.pointers = new Map();
+		this.initialized = false;
+		this.tempPointerFeedbackNode = null;
+		this.state = WEAVE_IMAGES_TOOL_STATE.IDLE;
+		this.imagesFile = [];
+		this.imagesURL = [];
+		this.container = void 0;
+		this.preloadImgs = {};
+		this.uploadType = null;
+		this.clickPoint = null;
+	}
+	getName() {
+		return WEAVE_IMAGES_TOOL_ACTION_NAME;
+	}
+	getPreloadedImage(imageId) {
+		return this.preloadImgs?.[imageId];
+	}
+	initProps() {
+		return {
+			width: 100,
+			height: 100,
+			scaleX: 1,
+			scaleY: 1
 		};
 	}
+	onInit() {
+		this.instance.addEventListener("onStageDrop", (e) => {
+			const dragId = this.instance.getDragStartedId();
+			const dragProperties = this.instance.getDragProperties();
+			if (dragProperties && dragId === WEAVE_IMAGES_TOOL_ACTION_NAME) {
+				this.instance.getStage().setPointersPositions(e);
+				const position = getPositionRelativeToContainerOnPosition(this.instance);
+				if (!position) return;
+				this.instance.triggerAction(WEAVE_IMAGES_TOOL_ACTION_NAME, {
+					type: WEAVE_IMAGES_TOOL_UPLOAD_TYPE.IMAGE_URL,
+					images: dragProperties.imagesURL,
+					position,
+					...dragProperties.forceMainContainer && { forceMainContainer: dragProperties.forceMainContainer }
+				});
+			}
+		});
+	}
+	setupEvents() {
+		const stage = this.instance.getStage();
+		stage.container().addEventListener("keydown", (e) => {
+			if (e.key === "Escape" && this.instance.getActiveAction() === WEAVE_IMAGES_TOOL_ACTION_NAME) this.cancelAction();
+		});
+		stage.on("pointerdown", (e) => {
+			this.setTapStart(e);
+			this.pointers.set(e.evt.pointerId, {
+				x: e.evt.clientX,
+				y: e.evt.clientY
+			});
+			if (this.pointers.size === 2 && this.instance.getActiveAction() === WEAVE_IMAGES_TOOL_ACTION_NAME) {
+				this.state = WEAVE_IMAGES_TOOL_STATE.DEFINING_POSITION;
+				return;
+			}
+			if (this.state === WEAVE_IMAGES_TOOL_STATE.DEFINING_POSITION) this.state = WEAVE_IMAGES_TOOL_STATE.SELECTED_POSITION;
+		});
+		stage.on("pointermove", (e) => {
+			if (this.state === WEAVE_IMAGES_TOOL_STATE.IDLE) return;
+			this.setCursor();
+			this.setFocusStage();
+			if (this.pointers.size === 2 && this.instance.getActiveAction() === WEAVE_IMAGES_TOOL_ACTION_NAME) {
+				this.state = WEAVE_IMAGES_TOOL_STATE.DEFINING_POSITION;
+				return;
+			}
+			if ([WEAVE_IMAGES_TOOL_STATE.DEFINING_POSITION, WEAVE_IMAGES_TOOL_STATE.SELECTED_POSITION].includes(this.state) && this.tempPointerFeedbackNode && this.instance.getActiveAction() === WEAVE_IMAGES_TOOL_ACTION_NAME && e.evt.pointerType === "mouse") {
+				const mousePos = stage.getRelativePointerPosition();
+				const cursorPadding = this.config.style.cursor.padding;
+				this.tempPointerFeedbackNode.setAttrs({
+					x: (mousePos?.x ?? 0) + cursorPadding / stage.scaleX(),
+					y: (mousePos?.y ?? 0) + cursorPadding / stage.scaleY()
+				});
+			}
+		});
+		stage.on("pointerup", (e) => {
+			this.pointers.delete(e.evt.pointerId);
+			if (this.state === WEAVE_IMAGES_TOOL_STATE.SELECTED_POSITION) this.handleAdding();
+		});
+		this.initialized = true;
+	}
+	setState(state) {
+		this.state = state;
+	}
+	async addImages(position) {
+		const stage = this.instance.getStage();
+		this.setCursor();
+		this.setFocusStage();
+		if (position) {
+			this.setState(WEAVE_IMAGES_TOOL_STATE.SELECTED_POSITION);
+			this.handleAdding(position);
+			return;
+		}
+		if (!this.tempPointerFeedbackNode && !this.isTouchDevice() && this.imagesFile && this.uploadType === WEAVE_IMAGES_TOOL_UPLOAD_TYPE.FILE) {
+			const mousePos = stage.getRelativePointerPosition();
+			const cursorPadding = this.config.style.cursor.padding;
+			const imageThumbnailsPadding = this.config.style.cursor.imageThumbnails.padding;
+			this.tempPointerFeedbackNode = new Konva.Group({
+				x: (mousePos?.x ?? 0) + cursorPadding / stage.scaleX(),
+				y: (mousePos?.y ?? 0) + cursorPadding / stage.scaleY(),
+				listening: false
+			});
+			const imagesTop3 = this.imagesFile.slice(0, 3) ?? [];
+			let maxWidth = 0;
+			let maxHeight = 0;
+			let position$1 = {
+				x: 0,
+				y: 0
+			};
+			for (const image of imagesTop3) {
+				const imageSource = await loadImageSource(image.file);
+				const maxImageWidth = this.config.style.cursor.imageThumbnails.width;
+				const maxImageHeight = this.config.style.cursor.imageThumbnails.height;
+				const shadowColor = this.config.style.cursor.imageThumbnails.shadowColor;
+				const shadowBlur = this.config.style.cursor.imageThumbnails.shadowBlur;
+				const shadowOffset = this.config.style.cursor.imageThumbnails.shadowOffset;
+				const shadowOpacity = this.config.style.cursor.imageThumbnails.shadowOpacity;
+				const aspectRatio = imageSource.width / imageSource.height || 1;
+				const imageWidth = maxImageWidth * aspectRatio * (1 / stage.scaleX());
+				const imageHeight = maxImageHeight * (1 / stage.scaleY());
+				const imageNode = new Konva.Image({
+					x: position$1.x,
+					y: position$1.y,
+					width: imageWidth,
+					height: imageHeight,
+					opacity: 1,
+					adding: true,
+					image: imageSource,
+					stroke: "#000000ff",
+					strokeWidth: 0,
+					strokeScaleEnabled: true,
+					listening: false,
+					shadowColor,
+					shadowBlur,
+					shadowOffset,
+					shadowOpacity
+				});
+				maxWidth = position$1.x + imageWidth;
+				maxHeight = Math.max(maxHeight, position$1.y + imageHeight);
+				position$1 = {
+					x: position$1.x + imageThumbnailsPadding / stage.scaleX(),
+					y: position$1.y + imageThumbnailsPadding / stage.scaleY()
+				};
+				this.tempPointerFeedbackNode.add(imageNode);
+				imageNode.moveToBottom();
+			}
+			if (this.imagesFile.length > 3) {
+				const paddingX = this.config.style.moreImages.paddingX;
+				const paddingY = this.config.style.moreImages.paddingY;
+				const fontSize = this.config.style.moreImages.fontSize;
+				const fontFamily = this.config.style.moreImages.fontFamily;
+				const textColor = this.config.style.moreImages.textColor;
+				const backgroundColor = this.config.style.moreImages.backgroundColor;
+				const backgroundOpacity = this.config.style.moreImages.backgroundOpacity;
+				const text = `and ${this.imagesFile.length - 3} more image(s)`;
+				const textNode = new Konva.Text({
+					x: maxWidth + paddingX / stage.scaleX() + cursorPadding / stage.scaleX(),
+					y: position$1.y,
+					fontFamily,
+					fontSize: fontSize / stage.scaleX(),
+					text,
+					fill: textColor,
+					listening: false
+				});
+				const textSize = textNode.measureSize(text);
+				textNode.y((maxHeight - textSize.height) / 2);
+				this.tempPointerFeedbackNode.add(textNode);
+				const textBg = new Konva.Rect({
+					x: textNode.x() - paddingX / stage.scaleX(),
+					y: textNode.y() - paddingY / stage.scaleY(),
+					width: textNode.width() + 2 * paddingX / stage.scaleX(),
+					height: textNode.height() + 2 * paddingY / stage.scaleY(),
+					fill: backgroundColor,
+					opacity: backgroundOpacity
+				});
+				this.tempPointerFeedbackNode.add(textBg);
+				textBg.moveToBottom();
+				textNode.moveToTop();
+			}
+			this.instance.getUtilityLayer()?.add(this.tempPointerFeedbackNode);
+			this.instance.emitEvent("onAddingImages");
+		}
+		this.clickPoint = null;
+		this.setState(WEAVE_IMAGES_TOOL_STATE.DEFINING_POSITION);
+	}
+	async handleAdding(position) {
+		const stage = this.instance.getStage();
+		this.tempPointerFeedbackNode?.destroy();
+		this.tempPointerFeedbackNode = null;
+		this.instance.getUtilityLayer()?.batchDraw();
+		stage.container().style.cursor = "default";
+		const { mousePoint, container } = this.instance.getMousePointer(position);
+		this.clickPoint = mousePoint;
+		this.container = container;
+		const originPoint = {
+			x: this.clickPoint?.x ?? 0,
+			y: this.clickPoint?.y ?? 0
+		};
+		if (!this.imagesFile && !this.imagesURL) return;
+		const imageToolActionHandler = this.instance.getActionHandler(WEAVE_IMAGE_TOOL_ACTION_NAME);
+		if (!imageToolActionHandler) return;
+		const imagesPadding = this.config.style.images.padding;
+		const layoutColumns = this.config.layout.columns;
+		let imagePositionX = originPoint.x;
+		let imagePositionY = originPoint.y;
+		let maxHeight = 0;
+		if (this.uploadType === WEAVE_IMAGES_TOOL_UPLOAD_TYPE.FILE && this.imagesFile) {
+			const imagesToUpload = this.imagesFile.length;
+			let imagesUploaded = 0;
+			await this.onStartUploading();
+			const handleUploadImage = async () => {
+				imagesUploaded++;
+				if (imagesUploaded >= imagesToUpload) {
+					await this.onFinishedUploading();
+					this.instance.removeEventListener("onImageUploaded", handleUploadImage);
+				}
+			};
+			this.instance.addEventListener("onImageUploaded", handleUploadImage);
+			for (let i = 0; i < this.imagesFile.length; i++) {
+				const imageFile = this.imagesFile[i];
+				const { imageId, width, height,...restImageFile } = imageFile;
+				const uploadImageFunctionInternal = async () => {
+					const imageURL = await this.uploadImageFunction(imageFile.file);
+					return imageURL;
+				};
+				const { nodeId } = this.instance.triggerAction(WEAVE_IMAGE_TOOL_ACTION_NAME, {
+					type: WEAVE_IMAGE_TOOL_UPLOAD_TYPE.FILE,
+					image: restImageFile,
+					uploadImageFunction: uploadImageFunctionInternal,
+					...imageId && { imageId },
+					position: {
+						x: imagePositionX,
+						y: imagePositionY
+					},
+					forceMainContainer: this.forceMainContainer
+				}, true);
+				this.nodesIds.push(nodeId);
+				maxHeight = Math.max(maxHeight, height);
+				imagePositionX += imagesPadding + width;
+				if ((i + 1) % layoutColumns === 0) {
+					imagePositionX = originPoint.x;
+					imagePositionY = imagePositionY + maxHeight + imagesPadding;
+					maxHeight = 0;
+				}
+				while (imageToolActionHandler.getActualState() !== WEAVE_IMAGES_TOOL_STATE.IDLE) await sleep(10);
+			}
+			this.instance.emitEvent("onAddedImages", { nodesIds: this.nodesIds });
+		}
+		if (this.uploadType === WEAVE_IMAGES_TOOL_UPLOAD_TYPE.IMAGE_URL && this.imagesURL) {
+			for (let i = 0; i < this.imagesURL.length; i++) {
+				const imageURL = this.imagesURL[i];
+				const { imageId, options,...restImageURL } = imageURL;
+				const imageURLElement = restImageURL;
+				const { nodeId } = this.instance.triggerAction(WEAVE_IMAGE_TOOL_ACTION_NAME, {
+					type: WEAVE_IMAGE_TOOL_UPLOAD_TYPE.IMAGE_URL,
+					image: imageURLElement,
+					...imageId && { imageId },
+					...options && { options },
+					position: {
+						x: imagePositionX,
+						y: imagePositionY
+					},
+					forceMainContainer: this.forceMainContainer
+				}, true);
+				this.nodesIds.push(nodeId);
+				maxHeight = Math.max(maxHeight, imageURL.height);
+				imagePositionX += imagesPadding + imageURL.width;
+				if ((i + 1) % layoutColumns === 0) {
+					imagePositionX = originPoint.x;
+					imagePositionY = imagePositionY + maxHeight + imagesPadding;
+					maxHeight = 0;
+				}
+				while (imageToolActionHandler.getActualState() !== WEAVE_IMAGES_TOOL_STATE.IDLE) await sleep(10);
+			}
+			this.instance.emitEvent("onAddedImages", { nodesIds: this.nodesIds });
+		}
+		this.setState(WEAVE_IMAGES_TOOL_STATE.FINISHED);
+		this.cancelAction();
+	}
+	trigger(cancelAction, params) {
+		if (!this.instance) throw new Error("Instance not defined");
+		if (!this.initialized) this.setupEvents();
+		this.cancelAction = cancelAction;
+		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
+		if (params?.position) this.setState(WEAVE_IMAGES_TOOL_STATE.SELECTED_POSITION);
+		this.forceMainContainer = params.forceMainContainer ?? false;
+		if (params.type === WEAVE_IMAGES_TOOL_UPLOAD_TYPE.FILE) {
+			this.uploadType = WEAVE_IMAGES_TOOL_UPLOAD_TYPE.FILE;
+			this.onStartUploading = params.onStartUploading;
+			this.onFinishedUploading = params.onFinishedUploading;
+			this.uploadImageFunction = params.uploadImageFunction;
+			this.nodesIds = [];
+			this.imagesFile = params.images;
+		}
+		if (params.type === WEAVE_IMAGES_TOOL_UPLOAD_TYPE.IMAGE_URL) {
+			this.uploadType = WEAVE_IMAGES_TOOL_UPLOAD_TYPE.IMAGE_URL;
+			this.nodesIds = [];
+			this.imagesURL = params.images;
+		}
+		if (![WEAVE_IMAGES_TOOL_UPLOAD_TYPE.FILE, WEAVE_IMAGES_TOOL_UPLOAD_TYPE.IMAGE_URL].includes(params.type)) {
+			this.cancelAction();
+			return;
+		}
+		this.addImages(params?.position);
+	}
 	saveImageUrl(nodeId, imageURL) {
-		this.imageURL = imageURL;
-		if (this.state !== IMAGE_TOOL_STATE.DEFINING_POSITION) {
+		if (this.state !== WEAVE_IMAGES_TOOL_STATE.DEFINING_POSITION) {
 			const stage = this.instance.getStage();
 			const nodeHandler = this.instance.getNodeHandler("image");
 			const node = stage.findOne(`#${nodeId}`);
 			if (nodeHandler && node) {
 				node.setAttr("imageURL", imageURL);
-				this.instance.updateNode(nodeHandler.serialize(node));
+				nodeHandler.forceLoadImage(node);
+				this.instance.updateNode(nodeHandler.serialize(node), { origin: "system" });
 			}
 		}
 	}
 	cleanup() {
 		const stage = this.instance.getStage();
-		if (this.tempImageNode) this.tempImageNode.destroy();
+		this.tempPointerFeedbackNode?.destroy();
+		this.tempPointerFeedbackNode = null;
+		this.instance.getUtilityLayer()?.batchDraw();
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
 		if (selectionPlugin) {
-			const node = stage.findOne(`#${this.imageId}`);
-			if (node) selectionPlugin.setSelectedNodes([node]);
+			const addedNodes = [];
+			for (const nodeId of this.nodesIds) {
+				const node = stage.findOne(`#${nodeId}`);
+				if (node) addedNodes.push(node);
+			}
+			selectionPlugin.setSelectedNodes(addedNodes);
 			this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
 		}
+		this.instance.endDrag(WEAVE_IMAGES_TOOL_ACTION_NAME);
 		stage.container().style.cursor = "default";
-		this.instance.endDrag(IMAGE_TOOL_ACTION_NAME);
-		this.initialCursor = null;
-		this.imageId = null;
+		this.uploadType = null;
 		this.forceMainContainer = false;
+		this.initialCursor = null;
 		this.container = void 0;
-		this.tempImageNode = null;
-		this.imageURL = null;
 		this.clickPoint = null;
-		this.setState(IMAGE_TOOL_STATE.IDLE);
-	}
-	getImageNodeHandler() {
-		return this.instance.getNodeHandler("image");
+		this.setState(WEAVE_IMAGES_TOOL_STATE.IDLE);
 	}
 	setCursor() {
 		const stage = this.instance.getStage();
@@ -33659,8 +34479,11 @@ var WeaveImageToolAction = class extends WeaveAction {
 		stage.container().blur();
 		stage.container().focus();
 	}
+	isTouchDevice() {
+		return window.matchMedia("(pointer: coarse)").matches;
+	}
 	setDragAndDropProperties(properties) {
-		this.instance.startDrag(IMAGE_TOOL_ACTION_NAME);
+		this.instance.startDrag(WEAVE_IMAGES_TOOL_ACTION_NAME);
 		this.instance.setDragProperties(properties);
 	}
 };
@@ -38894,4 +39717,4 @@ const setupCanvasBackend = async () => {
 };
 
 //#endregion
-export { ALIGN_NODES_ALIGN_TO, ALIGN_NODES_TOOL_ACTION_NAME, ALIGN_NODES_TOOL_STATE, ARROW_TOOL_ACTION_NAME, ARROW_TOOL_STATE, BRUSH_TOOL_ACTION_NAME, BRUSH_TOOL_DEFAULT_CONFIG, BRUSH_TOOL_STATE, CONNECTOR_TOOL_ACTION_NAME, CONNECTOR_TOOL_DEFAULT_CONFIG, CONNECTOR_TOOL_STATE, COPY_PASTE_NODES_PLUGIN_STATE, ELLIPSE_TOOL_ACTION_NAME, ELLIPSE_TOOL_STATE, ERASER_TOOL_ACTION_NAME, ERASER_TOOL_STATE, FRAME_TOOL_ACTION_NAME, FRAME_TOOL_STATE, GUIDE_DISTANCE_LINE_DEFAULT_CONFIG, GUIDE_ENTER_SNAPPING_TOLERANCE, GUIDE_EXIT_SNAPPING_TOLERANCE, GUIDE_HORIZONTAL_LINE_NAME, GUIDE_LINE_DEFAULT_CONFIG, GUIDE_LINE_DRAG_SNAPPING_THRESHOLD, GUIDE_LINE_NAME, GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD, GUIDE_ORIENTATION, GUIDE_VERTICAL_LINE_NAME, IMAGE_TOOL_ACTION_NAME, IMAGE_TOOL_LOAD_FROM, IMAGE_TOOL_STATE, LINE_TOOL_ACTION_NAME, LINE_TOOL_DEFAULT_CONFIG, LINE_TOOL_STATE, MEASURE_TOOL_ACTION_NAME, MEASURE_TOOL_STATE, MOVE_TOOL_ACTION_NAME, MOVE_TOOL_STATE, NODE_SNAP, NODE_SNAP_HORIZONTAL, NODE_SNAP_VERTICAL, PEN_TOOL_ACTION_NAME, PEN_TOOL_STATE, RECTANGLE_TOOL_ACTION_NAME, RECTANGLE_TOOL_STATE, REGULAR_POLYGON_TOOL_ACTION_NAME, REGULAR_POLYGON_TOOL_STATE, SELECTION_TOOL_ACTION_NAME, SELECTION_TOOL_STATE, STAGE_MINIMAP_DEFAULT_CONFIG, STAR_TOOL_ACTION_NAME, STAR_TOOL_STATE, TEXT_LAYOUT, TEXT_TOOL_ACTION_NAME, TEXT_TOOL_STATE, VIDEO_TOOL_ACTION_NAME, VIDEO_TOOL_STATE, WEAVE_ARROW_NODE_TYPE, WEAVE_COMMENTS_RENDERER_KEY, WEAVE_COMMENTS_TOOL_LAYER_ID, WEAVE_COMMENT_CREATE_ACTION, WEAVE_COMMENT_NODE_ACTION, WEAVE_COMMENT_NODE_DEFAULTS, WEAVE_COMMENT_NODE_TYPE, WEAVE_COMMENT_STATUS, WEAVE_COMMENT_TOOL_ACTION_NAME, WEAVE_COMMENT_TOOL_DEFAULT_CONFIG, WEAVE_COMMENT_TOOL_STATE, WEAVE_COMMENT_VIEW_ACTION, WEAVE_CONNECTOR_NODE_ANCHOR_ORIGIN, WEAVE_CONNECTOR_NODE_DECORATOR_TYPE, WEAVE_CONNECTOR_NODE_DEFAULT_CONFIG, WEAVE_CONNECTOR_NODE_LINE_ORIGIN, WEAVE_CONNECTOR_NODE_LINE_TYPE, WEAVE_CONNECTOR_NODE_TYPE, WEAVE_COPY_PASTE_CONFIG_DEFAULT, WEAVE_COPY_PASTE_NODES_KEY, WEAVE_COPY_PASTE_PASTE_CATCHER_ID, WEAVE_COPY_PASTE_PASTE_MODES, WEAVE_DEFAULT_USER_INFO_FUNCTION, WEAVE_ELLIPSE_NODE_TYPE, WEAVE_FRAME_DEFAULT_BACKGROUND_COLOR, WEAVE_FRAME_NODE_DEFAULT_CONFIG, WEAVE_FRAME_NODE_DEFAULT_PROPS, WEAVE_FRAME_NODE_TYPE, WEAVE_GRID_DEFAULT_COLOR, WEAVE_GRID_DEFAULT_DOT_MAX_DOTS_PER_AXIS, WEAVE_GRID_DEFAULT_MAJOR_DOT_RATIO, WEAVE_GRID_DEFAULT_MAJOR_EVERY, WEAVE_GRID_DEFAULT_MAJOR_LINE_RATIO, WEAVE_GRID_DEFAULT_ORIGIN_COLOR, WEAVE_GRID_DEFAULT_RADIUS, WEAVE_GRID_DEFAULT_SIZE, WEAVE_GRID_DEFAULT_STROKE, WEAVE_GRID_DEFAULT_TYPE, WEAVE_GRID_LAYER_ID, WEAVE_GRID_TYPES, WEAVE_GROUP_NODE_TYPE, WEAVE_IMAGE_CROP_ANCHOR_POSITION, WEAVE_IMAGE_CROP_END_TYPE, WEAVE_IMAGE_DEFAULT_CONFIG, WEAVE_IMAGE_NODE_TYPE, WEAVE_LAYER_NODE_TYPE, WEAVE_LINE_NODE_DEFAULT_CONFIG, WEAVE_LINE_NODE_TYPE, WEAVE_MEASURE_NODE_DEFAULT_CONFIG, WEAVE_MEASURE_NODE_TYPE, WEAVE_MEASURE_TOOL_DEFAULT_CONFIG, WEAVE_NODES_DISTANCE_SNAPPING_PLUGIN_KEY, WEAVE_NODES_EDGE_SNAPPING_PLUGIN_KEY, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_DEFAULT_CONFIG, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_KEY, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_LAYER_ID, WEAVE_NODES_SELECTION_DEFAULT_CONFIG, WEAVE_NODES_SELECTION_KEY, WEAVE_NODES_SELECTION_LAYER_ID, WEAVE_RECTANGLE_NODE_TYPE, WEAVE_REGULAR_POLYGON_NODE_TYPE, WEAVE_STAGE_DEFAULT_MODE, WEAVE_STAGE_GRID_PLUGIN_KEY, WEAVE_STAGE_IMAGE_CROPPING_MODE, WEAVE_STAGE_KEYBOARD_MOVE_DEFAULT_CONFIG, WEAVE_STAGE_KEYBOARD_MOVE_KEY, WEAVE_STAGE_MINIMAP_KEY, WEAVE_STAGE_NODE_TYPE, WEAVE_STAGE_PANNING_DEFAULT_CONFIG, WEAVE_STAGE_PANNING_KEY, WEAVE_STAGE_PANNING_THROTTLE_MS, WEAVE_STAGE_TEXT_EDITION_MODE, WEAVE_STAR_NODE_TYPE, WEAVE_STROKE_NODE_DEFAULT_CONFIG, WEAVE_STROKE_NODE_TYPE, WEAVE_STROKE_SINGLE_NODE_DEFAULT_CONFIG, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE, WEAVE_STROKE_SINGLE_NODE_TIP_TYPE, WEAVE_STROKE_SINGLE_NODE_TYPE, WEAVE_STROKE_TOOL_ACTION_NAME, WEAVE_STROKE_TOOL_ACTION_NAME_ALIASES, WEAVE_STROKE_TOOL_DEFAULT_CONFIG, WEAVE_STROKE_TOOL_STATE, WEAVE_TEXT_NODE_DEFAULT_CONFIG, WEAVE_TEXT_NODE_TYPE, WEAVE_USERS_POINTERS_CONFIG_DEFAULT_PROPS, WEAVE_USERS_POINTERS_KEY, WEAVE_USERS_PRESENCE_CONFIG_DEFAULT_PROPS, WEAVE_USERS_PRESENCE_PLUGIN_KEY, WEAVE_USERS_SELECTION_KEY, WEAVE_USER_POINTER_KEY, WEAVE_USER_PRESENCE_KEY, WEAVE_USER_SELECTION_KEY, WEAVE_VIDEO_DEFAULT_CONFIG, WEAVE_VIDEO_NODE_TYPE, Weave, WeaveAction, WeaveAlignNodesToolAction, WeaveArrowNode, WeaveArrowToolAction, WeaveBrushToolAction, WeaveCommentNode, WeaveCommentToolAction, WeaveCommentsRendererPlugin, WeaveConnectedUsersPlugin, WeaveConnectorNode, WeaveConnectorToolAction, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveEllipseNode, WeaveEllipseToolAction, WeaveEraserToolAction, WeaveExportNodesToolAction, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToSelectionToolAction, WeaveFrameNode, WeaveFrameToolAction, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveLayerNode, WeaveLineNode, WeaveLineToolAction, WeaveMeasureNode, WeaveMeasureToolAction, WeaveMoveToolAction, WeaveNode, WeaveNodesDistanceSnappingPlugin, WeaveNodesEdgeSnappingPlugin, WeaveNodesMultiSelectionFeedbackPlugin, WeaveNodesSelectionPlugin, WeavePenToolAction, WeavePlugin, WeaveRectangleNode, WeaveRectangleToolAction, WeaveRegularPolygonNode, WeaveRegularPolygonToolAction, WeaveRenderer, WeaveSelectionToolAction, WeaveStageDropAreaPlugin, WeaveStageGridPlugin, WeaveStageKeyboardMovePlugin, WeaveStageMinimapPlugin, WeaveStageNode, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomPlugin, WeaveStarNode, WeaveStarToolAction, WeaveStore, WeaveStrokeNode, WeaveStrokeSingleNode, WeaveStrokeToolAction, WeaveTextNode, WeaveTextToolAction, WeaveUsersPointersPlugin, WeaveUsersPresencePlugin, WeaveUsersSelectionPlugin, WeaveVideoNode, WeaveVideoToolAction, WeaveZoomInToolAction, WeaveZoomOutToolAction, canComposite, clearContainerTargets, containerOverCursor, containsNodeDeep, defaultInitialState, getBoundingBox, getExportBoundingBox, getPositionRelativeToContainerOnPosition, getSelectedNodesMetadata, getStageClickPoint, getTargetAndSkipNodes, getTargetedNode, getTopmostShadowHost, getVisibleNodes, getVisibleNodesInViewport, hasFrames, hasImages, intersectArrays, isIOS, isInShadowDOM, isNodeInSelection, isServer, memoize, mergeExceptArrays, moveNodeToContainer, moveNodeToContainerNT, resetScale, setupCanvasBackend, setupSkiaBackend };
+export { ALIGN_NODES_ALIGN_TO, ALIGN_NODES_TOOL_ACTION_NAME, ALIGN_NODES_TOOL_STATE, ARROW_TOOL_ACTION_NAME, ARROW_TOOL_STATE, BRUSH_TOOL_ACTION_NAME, BRUSH_TOOL_DEFAULT_CONFIG, BRUSH_TOOL_STATE, CONNECTOR_TOOL_ACTION_NAME, CONNECTOR_TOOL_DEFAULT_CONFIG, CONNECTOR_TOOL_STATE, COPY_PASTE_NODES_PLUGIN_STATE, ELLIPSE_TOOL_ACTION_NAME, ELLIPSE_TOOL_STATE, ERASER_TOOL_ACTION_NAME, ERASER_TOOL_STATE, FRAME_TOOL_ACTION_NAME, FRAME_TOOL_STATE, GUIDE_DISTANCE_LINE_DEFAULT_CONFIG, GUIDE_ENTER_SNAPPING_TOLERANCE, GUIDE_EXIT_SNAPPING_TOLERANCE, GUIDE_HORIZONTAL_LINE_NAME, GUIDE_LINE_DEFAULT_CONFIG, GUIDE_LINE_DRAG_SNAPPING_THRESHOLD, GUIDE_LINE_NAME, GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD, GUIDE_ORIENTATION, GUIDE_VERTICAL_LINE_NAME, LINE_TOOL_ACTION_NAME, LINE_TOOL_DEFAULT_CONFIG, LINE_TOOL_STATE, MEASURE_TOOL_ACTION_NAME, MEASURE_TOOL_STATE, MOVE_TOOL_ACTION_NAME, MOVE_TOOL_STATE, NODE_SNAP, NODE_SNAP_HORIZONTAL, NODE_SNAP_VERTICAL, PEN_TOOL_ACTION_NAME, PEN_TOOL_STATE, RECTANGLE_TOOL_ACTION_NAME, RECTANGLE_TOOL_STATE, REGULAR_POLYGON_TOOL_ACTION_NAME, REGULAR_POLYGON_TOOL_STATE, SELECTION_TOOL_ACTION_NAME, SELECTION_TOOL_STATE, STAGE_MINIMAP_DEFAULT_CONFIG, STAR_TOOL_ACTION_NAME, STAR_TOOL_STATE, TEXT_LAYOUT, TEXT_TOOL_ACTION_NAME, TEXT_TOOL_STATE, VIDEO_TOOL_ACTION_NAME, VIDEO_TOOL_STATE, WEAVE_ARROW_NODE_TYPE, WEAVE_COMMENTS_RENDERER_KEY, WEAVE_COMMENTS_TOOL_LAYER_ID, WEAVE_COMMENT_CREATE_ACTION, WEAVE_COMMENT_NODE_ACTION, WEAVE_COMMENT_NODE_DEFAULTS, WEAVE_COMMENT_NODE_TYPE, WEAVE_COMMENT_STATUS, WEAVE_COMMENT_TOOL_ACTION_NAME, WEAVE_COMMENT_TOOL_DEFAULT_CONFIG, WEAVE_COMMENT_TOOL_STATE, WEAVE_COMMENT_VIEW_ACTION, WEAVE_CONNECTOR_NODE_ANCHOR_ORIGIN, WEAVE_CONNECTOR_NODE_DECORATOR_TYPE, WEAVE_CONNECTOR_NODE_DEFAULT_CONFIG, WEAVE_CONNECTOR_NODE_LINE_ORIGIN, WEAVE_CONNECTOR_NODE_LINE_TYPE, WEAVE_CONNECTOR_NODE_TYPE, WEAVE_COPY_PASTE_CONFIG_DEFAULT, WEAVE_COPY_PASTE_NODES_KEY, WEAVE_COPY_PASTE_PASTE_CATCHER_ID, WEAVE_COPY_PASTE_PASTE_MODES, WEAVE_DEFAULT_USER_INFO_FUNCTION, WEAVE_ELLIPSE_NODE_TYPE, WEAVE_FRAME_DEFAULT_BACKGROUND_COLOR, WEAVE_FRAME_NODE_DEFAULT_CONFIG, WEAVE_FRAME_NODE_DEFAULT_PROPS, WEAVE_FRAME_NODE_TYPE, WEAVE_GRID_DEFAULT_COLOR, WEAVE_GRID_DEFAULT_DOT_MAX_DOTS_PER_AXIS, WEAVE_GRID_DEFAULT_MAJOR_DOT_RATIO, WEAVE_GRID_DEFAULT_MAJOR_EVERY, WEAVE_GRID_DEFAULT_MAJOR_LINE_RATIO, WEAVE_GRID_DEFAULT_ORIGIN_COLOR, WEAVE_GRID_DEFAULT_RADIUS, WEAVE_GRID_DEFAULT_SIZE, WEAVE_GRID_DEFAULT_STROKE, WEAVE_GRID_DEFAULT_TYPE, WEAVE_GRID_LAYER_ID, WEAVE_GRID_TYPES, WEAVE_GROUP_NODE_TYPE, WEAVE_IMAGES_TOOL_ACTION_NAME, WEAVE_IMAGES_TOOL_DEFAULT_CONFIG, WEAVE_IMAGES_TOOL_STATE, WEAVE_IMAGES_TOOL_UPLOAD_TYPE, WEAVE_IMAGE_CROP_ANCHOR_POSITION, WEAVE_IMAGE_CROP_END_TYPE, WEAVE_IMAGE_DEFAULT_CONFIG, WEAVE_IMAGE_NODE_TYPE, WEAVE_IMAGE_TOOL_ACTION_NAME, WEAVE_IMAGE_TOOL_CONFIG_DEFAULT, WEAVE_IMAGE_TOOL_STATE, WEAVE_IMAGE_TOOL_UPLOAD_TYPE, WEAVE_LAYER_NODE_TYPE, WEAVE_LINE_NODE_DEFAULT_CONFIG, WEAVE_LINE_NODE_TYPE, WEAVE_MEASURE_NODE_DEFAULT_CONFIG, WEAVE_MEASURE_NODE_TYPE, WEAVE_MEASURE_TOOL_DEFAULT_CONFIG, WEAVE_NODES_DISTANCE_SNAPPING_PLUGIN_KEY, WEAVE_NODES_EDGE_SNAPPING_PLUGIN_KEY, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_DEFAULT_CONFIG, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_KEY, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_LAYER_ID, WEAVE_NODES_SELECTION_DEFAULT_CONFIG, WEAVE_NODES_SELECTION_KEY, WEAVE_NODES_SELECTION_LAYER_ID, WEAVE_RECTANGLE_NODE_TYPE, WEAVE_REGULAR_POLYGON_NODE_TYPE, WEAVE_STAGE_DEFAULT_MODE, WEAVE_STAGE_DROP_AREA_KEY, WEAVE_STAGE_GRID_PLUGIN_KEY, WEAVE_STAGE_IMAGE_CROPPING_MODE, WEAVE_STAGE_KEYBOARD_MOVE_DEFAULT_CONFIG, WEAVE_STAGE_KEYBOARD_MOVE_KEY, WEAVE_STAGE_MINIMAP_KEY, WEAVE_STAGE_NODE_TYPE, WEAVE_STAGE_PANNING_DEFAULT_CONFIG, WEAVE_STAGE_PANNING_KEY, WEAVE_STAGE_PANNING_THROTTLE_MS, WEAVE_STAGE_TEXT_EDITION_MODE, WEAVE_STAR_NODE_TYPE, WEAVE_STROKE_NODE_DEFAULT_CONFIG, WEAVE_STROKE_NODE_TYPE, WEAVE_STROKE_SINGLE_NODE_DEFAULT_CONFIG, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE, WEAVE_STROKE_SINGLE_NODE_TIP_TYPE, WEAVE_STROKE_SINGLE_NODE_TYPE, WEAVE_STROKE_TOOL_ACTION_NAME, WEAVE_STROKE_TOOL_ACTION_NAME_ALIASES, WEAVE_STROKE_TOOL_DEFAULT_CONFIG, WEAVE_STROKE_TOOL_STATE, WEAVE_TEXT_NODE_DEFAULT_CONFIG, WEAVE_TEXT_NODE_TYPE, WEAVE_USERS_POINTERS_CONFIG_DEFAULT_PROPS, WEAVE_USERS_POINTERS_KEY, WEAVE_USERS_PRESENCE_CONFIG_DEFAULT_PROPS, WEAVE_USERS_PRESENCE_PLUGIN_KEY, WEAVE_USERS_SELECTION_KEY, WEAVE_USER_POINTER_KEY, WEAVE_USER_PRESENCE_KEY, WEAVE_USER_SELECTION_KEY, WEAVE_VIDEO_DEFAULT_CONFIG, WEAVE_VIDEO_NODE_TYPE, Weave, WeaveAction, WeaveAlignNodesToolAction, WeaveArrowNode, WeaveArrowToolAction, WeaveBrushToolAction, WeaveCommentNode, WeaveCommentToolAction, WeaveCommentsRendererPlugin, WeaveConnectedUsersPlugin, WeaveConnectorNode, WeaveConnectorToolAction, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveEllipseNode, WeaveEllipseToolAction, WeaveEraserToolAction, WeaveExportNodesToolAction, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToSelectionToolAction, WeaveFrameNode, WeaveFrameToolAction, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveImagesToolAction, WeaveLayerNode, WeaveLineNode, WeaveLineToolAction, WeaveMeasureNode, WeaveMeasureToolAction, WeaveMoveToolAction, WeaveNode, WeaveNodesDistanceSnappingPlugin, WeaveNodesEdgeSnappingPlugin, WeaveNodesMultiSelectionFeedbackPlugin, WeaveNodesSelectionPlugin, WeavePenToolAction, WeavePlugin, WeaveRectangleNode, WeaveRectangleToolAction, WeaveRegularPolygonNode, WeaveRegularPolygonToolAction, WeaveRenderer, WeaveSelectionToolAction, WeaveStageDropAreaPlugin, WeaveStageGridPlugin, WeaveStageKeyboardMovePlugin, WeaveStageMinimapPlugin, WeaveStageNode, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomPlugin, WeaveStarNode, WeaveStarToolAction, WeaveStore, WeaveStrokeNode, WeaveStrokeSingleNode, WeaveStrokeToolAction, WeaveTextNode, WeaveTextToolAction, WeaveUsersPointersPlugin, WeaveUsersPresencePlugin, WeaveUsersSelectionPlugin, WeaveVideoNode, WeaveVideoToolAction, WeaveZoomInToolAction, WeaveZoomOutToolAction, canComposite, clearContainerTargets, containerOverCursor, containsNodeDeep, defaultInitialState, downscaleImageFile, downscaleImageFromURL, getBoundingBox, getDownscaleRatio, getExportBoundingBox, getImageSizeFromFile, getPositionRelativeToContainerOnPosition, getSelectedNodesMetadata, getStageClickPoint, getTargetAndSkipNodes, getTargetedNode, getTopmostShadowHost, getVisibleNodes, getVisibleNodesInViewport, hasFrames, hasImages, intersectArrays, isIOS, isInShadowDOM, isNodeInSelection, isServer, loadImageSource, memoize, mergeExceptArrays, moveNodeToContainer, moveNodeToContainerNT, resetScale, setupCanvasBackend, setupSkiaBackend };