@inditextech/weave-sdk 0.72.1 → 0.73.1

package/dist/sdk.cjs

@@ -18320,6 +18320,7 @@ function memoize(fn) {
 function isIOS() {
 	return /iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.userAgent.includes("Mac") && "ontouchend" in document;
 }
+const isServer = () => typeof window === "undefined";
 
 //#endregion
 //#region src/actions/selection-tool/constants.ts
@@ -19074,6 +19075,27 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		tr.on("transformstart", () => {
 			this.triggerSelectedNodesEvent();
 		});
+		let nodeHovered = void 0;
+		tr.on("mousemove", () => {
+			const pointerPos = stage.getPointerPosition();
+			if (!pointerPos) return;
+			this.disable();
+			const shape = stage.getIntersection(pointerPos);
+			this.enable();
+			if (shape) {
+				const targetNode = this.instance.getInstanceRecursive(shape);
+				this.instance.getStage().handleMouseout();
+				if (targetNode?.handleMouseover) {
+					targetNode?.handleMouseover();
+					nodeHovered = targetNode;
+				}
+			}
+		});
+		tr.on("mouseout", () => {
+			this.instance.getStage().handleMouseover();
+			nodeHovered?.handleMouseout();
+			nodeHovered = void 0;
+		});
 		const handleTransform = (e) => {
 			const moved = this.checkMoved(e);
 			if (moved) this.getContextMenuPlugin()?.cancelLongPressTimer();
@@ -19453,11 +19475,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			const contextMenuPlugin = this.getContextMenuPlugin();
 			if (moved) contextMenuPlugin?.cancelLongPressTimer();
 			else this.hideSelectorArea();
-			if (contextMenuPlugin && contextMenuPlugin.isContextMenuVisible()) {
-				this.selecting = false;
-				this.stopPanLoop();
-				return;
-			}
+			if (contextMenuPlugin?.isContextMenuVisible()) this.stopPanLoop();
 			if (this.isSpaceKeyPressed) return;
 			if (!this.selecting) return;
 			this.updateSelectionRect();
@@ -19511,11 +19529,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				this.hideSelectorArea();
 				return;
 			}
-			if (contextMenuPlugin && contextMenuPlugin.isContextMenuVisible()) {
-				this.selecting = false;
-				this.stopPanLoop();
-				return;
-			}
+			if (contextMenuPlugin?.isContextMenuVisible()) this.stopPanLoop();
 			if (!this.selectionRectangle.visible()) {
 				this.hideSelectorArea();
 				return;
@@ -19606,11 +19620,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		if (!this.enabled) return;
 		if (this.instance.getActiveAction() !== SELECTION_TOOL_ACTION_NAME) return;
 		const contextMenuPlugin = this.getContextMenuPlugin();
-		if (contextMenuPlugin?.isContextMenuVisible()) {
-			this.selecting = false;
-			this.stopPanLoop();
-			return;
-		}
+		if (contextMenuPlugin?.isContextMenuVisible()) this.stopPanLoop();
 		this.hideHoverState();
 		const selectedGroup = getTargetedNode(this.instance);
 		if (!this.initialized) return;
@@ -20251,6 +20261,8 @@ var WeaveNode = class {
 		node.movedToContainer = function() {};
 		node.updatePosition = function() {};
 		node.resetCrop = function() {};
+		node.handleMouseover = function() {};
+		node.handleMouseout = function() {};
 	}
 	isNodeSelected(ele) {
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
@@ -20389,6 +20401,31 @@ var WeaveNode = class {
 					if (!moved) this.instance.updateNode(this.serialize(node));
 				}
 			});
+			node.handleMouseover = () => {
+				const stage = this.instance.getStage();
+				const activeAction = this.instance.getActiveAction();
+				const isNodeSelectionEnabled = this.getSelectionPlugin()?.isEnabled();
+				const realNode = this.instance.getInstanceRecursive(node);
+				const isTargetable = realNode.getAttrs().isTargetable !== false;
+				const isLocked$1 = realNode.getAttrs().locked ?? false;
+				if ([MOVE_TOOL_ACTION_NAME].includes(activeAction ?? "")) return;
+				if (isNodeSelectionEnabled && this.isSelecting() && !this.isNodeSelected(realNode) && !this.isPasting() && isLocked$1) {
+					const stage$1 = this.instance.getStage();
+					stage$1.container().style.cursor = "default";
+				}
+				if (isNodeSelectionEnabled && this.isSelecting() && !this.isNodeSelected(realNode) && !this.isPasting() && isTargetable && !isLocked$1 && stage.mode() === WEAVE_STAGE_DEFAULT_MODE) {
+					const stage$1 = this.instance.getStage();
+					stage$1.container().style.cursor = "pointer";
+				}
+				if (isNodeSelectionEnabled && this.isSelecting() && this.isNodeSelected(realNode) && !this.isPasting() && isTargetable && !isLocked$1 && stage.mode() === WEAVE_STAGE_DEFAULT_MODE) {
+					const stage$1 = this.instance.getStage();
+					stage$1.container().style.cursor = "grab";
+				}
+				if (this.isPasting()) {
+					const stage$1 = this.instance.getStage();
+					stage$1.container().style.cursor = "crosshair";
+				}
+			};
 			node.on("pointerover", (e) => {
 				const stage = this.instance.getStage();
 				const activeAction = this.instance.getActiveAction();
@@ -21914,7 +21951,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.72.1";
+var version = "0.73.1";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -22965,6 +23002,10 @@ var WeaveStageNode = class extends WeaveNode {
 			if (typeof allowSelection !== "undefined") this._allowSelection = allowSelection;
 			return this._allowSelection;
 		};
+		stage.handleMouseover = function() {
+			stage.container().style.cursor = "default";
+		};
+		stage.handleMouseout = function() {};
 		stage.mode(WEAVE_STAGE_DEFAULT_MODE);
 		stage.on("pointerdown", (e) => {
 			if (e.evt.button === 1) this.wheelMousePressed = true;
@@ -23783,395 +23824,136 @@ var WeaveTextNode = class extends WeaveNode {
 };
 
 //#endregion
-//#region src/actions/image-tool/constants.ts
-const IMAGE_TOOL_ACTION_NAME = "imageTool";
-const IMAGE_TOOL_STATE = {
-	["IDLE"]: "idle",
-	["UPLOADING"]: "uploading",
-	["DEFINING_POSITION"]: "definingPosition",
-	["SELECTED_POSITION"]: "selectedPosition",
-	["ADDING"]: "adding",
-	["FINISHED"]: "finished"
-};
-
-//#endregion
-//#region src/actions/image-tool/image-tool.ts
-var WeaveImageToolAction = class extends WeaveAction {
-	initialized = false;
-	initialCursor = null;
-	cursorPadding = 5;
-	forceMainContainer = false;
-	onPropsChange = void 0;
-	update = void 0;
-	constructor() {
-		super();
-		this.pointers = new Map();
-		this.initialized = false;
-		this.state = IMAGE_TOOL_STATE.IDLE;
-		this.imageId = null;
-		this.tempImageId = null;
-		this.tempImageNode = null;
-		this.container = void 0;
-		this.imageURL = null;
-		this.preloadImgs = {};
-		this.clickPoint = null;
-	}
-	getName() {
-		return IMAGE_TOOL_ACTION_NAME;
-	}
-	getPreloadedImage(imageId) {
-		return this.preloadImgs?.[imageId];
+//#region src/nodes/image/crop.ts
+var WeaveImageCrop = class WeaveImageCrop {
+	constructor(instance, node, image, internalImage, clipGroup) {
+		this.instance = instance;
+		this.node = node;
+		this.image = image;
+		this.internalImage = internalImage;
+		this.cropGroup = clipGroup;
+		this.cropping = false;
+		this.onClose = () => {};
+		this.handleHide = this.hide.bind(this);
 	}
-	initProps() {
-		return {
-			width: 100,
-			height: 100,
+	show(onClose) {
+		this.onClose = onClose;
+		this.cropping = true;
+		const nodeEdgeSnappingPlugin = this.getNodesEdgeSnappingPlugin();
+		if (nodeEdgeSnappingPlugin) nodeEdgeSnappingPlugin.disable();
+		const nodeDistanceSnappingPlugin = this.getNodesDistanceSnappingPlugin();
+		if (nodeDistanceSnappingPlugin) nodeDistanceSnappingPlugin.disable();
+		const nodesSelectionPlugin = this.getNodesSelectionPlugin();
+		if (nodesSelectionPlugin) nodesSelectionPlugin.disable();
+		this.image.setAttrs({ cropping: true });
+		const imageAttrs = this.image.getAttrs();
+		this.internalImage.hide();
+		this.cropGroup.destroyChildren();
+		const actualScale = imageAttrs.uncroppedImage.width / imageAttrs.imageInfo.width;
+		const cropScale = imageAttrs.cropInfo ? imageAttrs.cropInfo.scaleX : actualScale;
+		const realScale = actualScale / cropScale;
+		this.cropImage = new konva.default.Image({
+			x: imageAttrs.cropInfo ? -imageAttrs.cropInfo.x * realScale : 0,
+			y: imageAttrs.cropInfo ? -imageAttrs.cropInfo.y * realScale : 0,
+			width: imageAttrs.uncroppedImage.width,
+			height: imageAttrs.uncroppedImage.height,
 			scaleX: 1,
-			scaleY: 1
-		};
-	}
-	onInit() {
-		this.instance.addEventListener("onStageDrop", (e) => {
-			if (window.weaveDragImageURL) {
-				this.instance.getStage().setPointersPositions(e);
-				const position = this.instance.getStage().getRelativePointerPosition();
-				this.instance.triggerAction(IMAGE_TOOL_ACTION_NAME, {
-					imageURL: window.weaveDragImageURL,
-					imageId: window.weaveDragImageId,
-					position
-				});
-				window.weaveDragImageURL = void 0;
-				window.weaveDragImageId = void 0;
-			}
-		});
-	}
-	setupEvents() {
-		const stage = this.instance.getStage();
-		window.addEventListener("keydown", (e) => {
-			if (e.key === "Escape" && this.instance.getActiveAction() === IMAGE_TOOL_ACTION_NAME) {
-				this.cancelAction();
-				return;
-			}
+			scaleY: 1,
+			image: this.internalImage.image(),
+			crop: void 0,
+			visible: true,
+			listening: false,
+			draggable: false
 		});
-		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() === IMAGE_TOOL_ACTION_NAME) {
-				this.state = IMAGE_TOOL_STATE.DEFINING_POSITION;
-				return;
-			}
-			if (this.state === IMAGE_TOOL_STATE.DEFINING_POSITION) this.state = IMAGE_TOOL_STATE.SELECTED_POSITION;
+		this.imageOffsetX = imageAttrs.cropInfo ? imageAttrs.cropInfo.x * realScale : 0;
+		this.imageOffsetY = imageAttrs.cropInfo ? imageAttrs.cropInfo.y * realScale : 0;
+		this.cropRect = new konva.default.Rect({
+			x: 0,
+			y: 0,
+			width: imageAttrs.cropInfo ? imageAttrs.cropInfo.width * realScale : imageAttrs.uncroppedImage.width,
+			height: imageAttrs.cropInfo ? imageAttrs.cropInfo.height * realScale : imageAttrs.uncroppedImage.height,
+			fill: "rgba(0,0,0,0.2)",
+			stroke: "#ff0000ff",
+			strokeWidth: 0,
+			strokeScaleEnabled: true,
+			draggable: true,
+			rotation: 0
 		});
-		stage.on("pointermove", (e) => {
-			if (this.state === 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;
-				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") {
-				const mousePos = stage.getRelativePointerPosition();
-				this.tempImageNode.setAttrs({
-					x: (mousePos?.x ?? 0) + this.cursorPadding,
-					y: (mousePos?.y ?? 0) + this.cursorPadding
+		this.transformer = new konva.default.Transformer({
+			id: `${this.image.getAttrs().id}_transformer`,
+			x: 0,
+			y: 0,
+			flipEnabled: false,
+			keepRatio: false,
+			ignoreStroke: false,
+			rotateEnabled: false,
+			enabledAnchors: [
+				"top-left",
+				"top-center",
+				"top-right",
+				"middle-right",
+				"bottom-left",
+				"middle-left",
+				"bottom-right",
+				"bottom-center"
+			],
+			anchorDragBoundFunc: (_, newPos) => {
+				let closestSnap = newPos;
+				let minDist = 10;
+				const nodeRotation = this.image.getAbsoluteRotation();
+				const stage = this.instance.getStage();
+				const rotation = nodeRotation * (Math.PI / 180);
+				const center = this.cropImage.getAbsolutePosition();
+				const width = this.cropImage.width() * stage.scaleX();
+				const height = this.cropImage.height() * stage.scaleY();
+				const offset = this.cropImage.offset();
+				const corners = [
+					{
+						x: -offset.x,
+						y: -offset.y
+					},
+					{
+						x: width - offset.x,
+						y: -offset.y
+					},
+					{
+						x: width - offset.x,
+						y: height - offset.y
+					},
+					{
+						x: -offset.x,
+						y: height - offset.y
+					}
+				].map((pt) => {
+					const cos = Math.cos(rotation);
+					const sin = Math.sin(rotation);
+					return {
+						x: center.x + pt.x * cos - pt.y * sin,
+						y: center.y + pt.x * sin + pt.y * cos
+					};
 				});
-			}
+				const edges = [
+					[corners[0], corners[1]],
+					[corners[1], corners[2]],
+					[corners[2], corners[3]],
+					[corners[3], corners[0]]
+				];
+				for (const [a, b] of edges) {
+					const candidate = this.closestPointOnLine(newPos, a, b);
+					const dist = Math.hypot(newPos.x - candidate.x, newPos.y - candidate.y);
+					if (dist < minDist) {
+						closestSnap = candidate;
+						minDist = dist;
+					}
+				}
+				return closestSnap;
+			},
+			rotation: 0
 		});
-		stage.on("pointerup", (e) => {
-			this.pointers.delete(e.evt.pointerId);
-			if (this.state === IMAGE_TOOL_STATE.SELECTED_POSITION) this.handleAdding();
-		});
-		this.initialized = true;
-	}
-	setState(state) {
-		this.state = state;
-	}
-	loadImage(imageURL, options, position) {
-		const imageOptions = {
-			crossOrigin: "anonymous",
-			...options
-		};
-		this.setCursor();
-		this.setFocusStage();
-		this.imageId = v4_default();
-		this.imageURL = imageURL;
-		this.preloadImgs[this.imageId] = new Image();
-		this.preloadImgs[this.imageId].crossOrigin = imageOptions.crossOrigin;
-		this.preloadImgs[this.imageId].onerror = () => {
-			this.instance.emitEvent("onImageLoadEnd", new Error("Error loading image"));
-			this.cancelAction();
-		};
-		this.preloadImgs[this.imageId].onload = () => {
-			this.instance.emitEvent("onImageLoadEnd", void 0);
-			if (this.imageId) this.props = {
-				...this.props,
-				imageURL: this.imageURL,
-				width: this.preloadImgs[this.imageId].width,
-				height: this.preloadImgs[this.imageId].height
-			};
-			this.addImageNode(position);
-		};
-		this.preloadImgs[this.imageId].src = imageURL;
-		this.instance.emitEvent("onImageLoadStart");
-	}
-	isTouchDevice() {
-		return window.matchMedia("(pointer: coarse)").matches;
-	}
-	addImageNode(position) {
-		const stage = this.instance.getStage();
-		this.setCursor();
-		this.setFocusStage();
-		if (position) {
-			this.setState(IMAGE_TOOL_STATE.SELECTED_POSITION);
-			this.handleAdding(position);
-			return;
-		}
-		if (this.imageId) {
-			const mousePos = stage.getRelativePointerPosition();
-			this.tempImageId = v4_default();
-			const aspectRatio = this.preloadImgs[this.imageId].width / this.preloadImgs[this.imageId].height;
-			if (!this.tempImageNode && this.tempImageId && !this.isTouchDevice()) {
-				this.tempImageNode = new konva.default.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()),
-					opacity: 1,
-					adding: true,
-					image: this.preloadImgs[this.imageId],
-					stroke: "#000000ff",
-					strokeWidth: 0,
-					strokeScaleEnabled: true,
-					listening: false
-				});
-				this.instance.getMainLayer()?.add(this.tempImageNode);
-			}
-			this.instance.emitEvent("onAddingImage", { imageURL: this.props.imageURL });
-		}
-		this.clickPoint = null;
-		this.setState(IMAGE_TOOL_STATE.DEFINING_POSITION);
-	}
-	addImage(position) {
-		if (position) this.clickPoint = position;
-		this.setState(IMAGE_TOOL_STATE.UPLOADING);
-	}
-	handleAdding(position) {
-		if (this.imageId && this.imageURL && this.preloadImgs[this.imageId]) {
-			const { mousePoint, container } = this.instance.getMousePointer(position);
-			this.clickPoint = mousePoint;
-			this.container = container;
-			const nodeHandler = this.instance.getNodeHandler("image");
-			if (nodeHandler) {
-				const node = nodeHandler.create(this.imageId, {
-					...this.props,
-					x: this.clickPoint?.x ?? 0,
-					y: this.clickPoint?.y ?? 0,
-					opacity: 1,
-					adding: false,
-					imageURL: this.imageURL,
-					stroke: "#000000ff",
-					strokeWidth: 0,
-					strokeScaleEnabled: true,
-					imageWidth: this.preloadImgs[this.imageId].width,
-					imageHeight: this.preloadImgs[this.imageId].height,
-					imageInfo: {
-						width: this.preloadImgs[this.imageId].width,
-						height: this.preloadImgs[this.imageId].height
-					}
-				});
-				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.setState(IMAGE_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([]);
-		this.forceMainContainer = params?.forceMainContainer ?? false;
-		if (params?.imageId) this.updateProps({ imageId: params.imageId });
-		if (params?.imageURL) {
-			this.loadImage(params.imageURL, params?.options ?? void 0, params?.position ?? void 0);
-			return;
-		}
-		this.props = this.initProps();
-		this.addImage();
-		return { finishUploadCallback: this.loadImage.bind(this) };
-	}
-	cleanup() {
-		const stage = this.instance.getStage();
-		if (this.imageId) delete this.preloadImgs[this.imageId];
-		if (this.tempImageNode) this.tempImageNode.destroy();
-		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.initialCursor = null;
-		this.imageId = null;
-		this.forceMainContainer = false;
-		this.container = void 0;
-		this.tempImageNode = null;
-		this.imageURL = null;
-		this.clickPoint = null;
-		this.setState(IMAGE_TOOL_STATE.IDLE);
-	}
-	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();
-	}
-};
-
-//#endregion
-//#region src/nodes/image/crop.ts
-var WeaveImageCrop = class WeaveImageCrop {
-	constructor(instance, node, image, internalImage, clipGroup) {
-		this.instance = instance;
-		this.node = node;
-		this.image = image;
-		this.internalImage = internalImage;
-		this.cropGroup = clipGroup;
-		this.cropping = false;
-		this.onClose = () => {};
-		this.handleHide = this.hide.bind(this);
-	}
-	show(onClose) {
-		this.onClose = onClose;
-		this.cropping = true;
-		const nodeEdgeSnappingPlugin = this.getNodesEdgeSnappingPlugin();
-		if (nodeEdgeSnappingPlugin) nodeEdgeSnappingPlugin.disable();
-		const nodeDistanceSnappingPlugin = this.getNodesDistanceSnappingPlugin();
-		if (nodeDistanceSnappingPlugin) nodeDistanceSnappingPlugin.disable();
-		const nodesSelectionPlugin = this.getNodesSelectionPlugin();
-		if (nodesSelectionPlugin) nodesSelectionPlugin.disable();
-		this.image.setAttrs({ cropping: true });
-		const imageAttrs = this.image.getAttrs();
-		this.internalImage.hide();
-		this.cropGroup.destroyChildren();
-		const actualScale = imageAttrs.uncroppedImage.width / imageAttrs.imageInfo.width;
-		const cropScale = imageAttrs.cropInfo ? imageAttrs.cropInfo.scaleX : actualScale;
-		const realScale = actualScale / cropScale;
-		this.cropImage = new konva.default.Image({
-			x: imageAttrs.cropInfo ? -imageAttrs.cropInfo.x * realScale : 0,
-			y: imageAttrs.cropInfo ? -imageAttrs.cropInfo.y * realScale : 0,
-			width: imageAttrs.uncroppedImage.width,
-			height: imageAttrs.uncroppedImage.height,
-			scaleX: 1,
-			scaleY: 1,
-			image: this.internalImage.image(),
-			crop: void 0,
-			visible: true,
-			listening: false,
-			draggable: false
-		});
-		this.imageOffsetX = imageAttrs.cropInfo ? imageAttrs.cropInfo.x * realScale : 0;
-		this.imageOffsetY = imageAttrs.cropInfo ? imageAttrs.cropInfo.y * realScale : 0;
-		this.cropRect = new konva.default.Rect({
-			x: 0,
-			y: 0,
-			width: imageAttrs.cropInfo ? imageAttrs.cropInfo.width * realScale : imageAttrs.uncroppedImage.width,
-			height: imageAttrs.cropInfo ? imageAttrs.cropInfo.height * realScale : imageAttrs.uncroppedImage.height,
-			fill: "rgba(0,0,0,0.2)",
-			stroke: "#ff0000ff",
-			strokeWidth: 0,
-			strokeScaleEnabled: true,
-			draggable: true,
-			rotation: 0
-		});
-		this.transformer = new konva.default.Transformer({
-			id: `${this.image.getAttrs().id}_transformer`,
-			x: 0,
-			y: 0,
-			flipEnabled: false,
-			keepRatio: false,
-			ignoreStroke: false,
-			rotateEnabled: false,
-			enabledAnchors: [
-				"top-left",
-				"top-center",
-				"top-right",
-				"middle-right",
-				"bottom-left",
-				"middle-left",
-				"bottom-right",
-				"bottom-center"
-			],
-			anchorDragBoundFunc: (_, newPos) => {
-				let closestSnap = newPos;
-				let minDist = 10;
-				const nodeRotation = this.image.getAbsoluteRotation();
-				const stage = this.instance.getStage();
-				const rotation = nodeRotation * (Math.PI / 180);
-				const center = this.cropImage.getAbsolutePosition();
-				const width = this.cropImage.width() * stage.scaleX();
-				const height = this.cropImage.height() * stage.scaleY();
-				const offset = this.cropImage.offset();
-				const corners = [
-					{
-						x: -offset.x,
-						y: -offset.y
-					},
-					{
-						x: width - offset.x,
-						y: -offset.y
-					},
-					{
-						x: width - offset.x,
-						y: height - offset.y
-					},
-					{
-						x: -offset.x,
-						y: height - offset.y
-					}
-				].map((pt) => {
-					const cos = Math.cos(rotation);
-					const sin = Math.sin(rotation);
-					return {
-						x: center.x + pt.x * cos - pt.y * sin,
-						y: center.y + pt.x * sin + pt.y * cos
-					};
-				});
-				const edges = [
-					[corners[0], corners[1]],
-					[corners[1], corners[2]],
-					[corners[2], corners[3]],
-					[corners[3], corners[0]]
-				];
-				for (const [a, b] of edges) {
-					const candidate = this.closestPointOnLine(newPos, a, b);
-					const dist = Math.hypot(newPos.x - candidate.x, newPos.y - candidate.y);
-					if (dist < minDist) {
-						closestSnap = candidate;
-						minDist = dist;
-					}
-				}
-				return closestSnap;
-			},
-			rotation: 0
-		});
-		this.grid = new konva.default.Group();
-		const cropRect = this.cropRect.getClientRect({
-			relativeTo: this.cropGroup,
-			skipStroke: true
+		this.grid = new konva.default.Group();
+		const cropRect = this.cropRect.getClientRect({
+			relativeTo: this.cropGroup,
+			skipStroke: true
 		});
 		this.drawGridLines(0, 0, cropRect.width, cropRect.height);
 		const handleGridLines = () => {
@@ -24402,6 +24184,8 @@ const WEAVE_IMAGE_DEFAULT_CONFIG = { crossOrigin: "anonymous" };
 //#endregion
 //#region src/nodes/image/image.ts
 var WeaveImageNode = class extends WeaveNode {
+	imageSource = {};
+	imageState = {};
 	nodeType = WEAVE_IMAGE_NODE_TYPE;
 	constructor(params) {
 		super();
@@ -24560,31 +24344,29 @@ var WeaveImageNode = class extends WeaveNode {
 		image.dblClick = () => {
 			this.config.onDblClick?.(this, image);
 		};
-		const imageActionTool = this.getImageToolAction();
-		const preloadImg = imageActionTool.getPreloadedImage(imageProps.id);
-		if (preloadImg) {
+		if (this.imageSource[id]) {
 			imagePlaceholder?.setAttrs({
-				width: imageProps.width ? imageProps.width : preloadImg.width,
-				height: imageProps.height ? imageProps.height : preloadImg.height,
+				width: imageProps.width ? imageProps.width : this.imageSource[id].width,
+				height: imageProps.height ? imageProps.height : this.imageSource[id].height,
 				visible: false
 			});
 			internalImage?.setAttrs({
-				width: imageProps.width ? imageProps.width : preloadImg.width,
-				height: imageProps.height ? imageProps.height : preloadImg.height,
-				image: preloadImg,
+				width: imageProps.width ? imageProps.width : this.imageSource[id].width,
+				height: imageProps.height ? imageProps.height : this.imageSource[id].height,
+				image: this.imageSource[id],
 				visible: true
 			});
 			this.imageLoaded = true;
-			image.setAttr("width", image.width() ? image.width() : preloadImg.width);
-			image.setAttr("height", image.height() ? image.height() : preloadImg.height);
+			image.setAttr("width", image.width() ? image.width() : this.imageSource[id].width);
+			image.setAttr("height", image.height() ? image.height() : this.imageSource[id].height);
 			image.setAttr("cropInfo", void 0);
 			image.setAttr("uncroppedImage", {
-				width: image.width() ? image.width() : preloadImg.width,
-				height: image.height() ? image.height() : preloadImg.height
+				width: image.width() ? image.width() : this.imageSource[id].width,
+				height: image.height() ? image.height() : this.imageSource[id].height
 			});
 			image.setAttr("imageInfo", {
-				width: preloadImg.width,
-				height: preloadImg.height
+				width: this.imageSource[id].width,
+				height: this.imageSource[id].height
 			});
 			this.instance.updateNode(this.serialize(image));
 		} else this.loadImage(imageProps, image);
@@ -24656,64 +24438,96 @@ var WeaveImageNode = class extends WeaveNode {
 			this.updateImageCrop(nextProps);
 		}
 	}
+	preloadImage(imageId, imageURL, { onLoad, onError }) {
+		const realImageURL = this.config.urlTransformer?.(imageURL ?? "") ?? imageURL;
+		this.imageSource[imageId] = new Image();
+		this.imageSource[imageId].crossOrigin = this.config.crossOrigin;
+		this.imageSource[imageId].onerror = (error) => {
+			this.imageState[imageId] = {
+				loaded: false,
+				error: true
+			};
+			onError(error);
+		};
+		this.imageSource[imageId].onload = () => {
+			this.imageState[imageId] = {
+				loaded: true,
+				error: false
+			};
+			onLoad();
+		};
+		this.imageState[imageId] = {
+			loaded: false,
+			error: false
+		};
+		if (realImageURL) this.imageSource[imageId].src = realImageURL;
+	}
 	loadImage(params, image) {
 		const imageProps = params;
-		const imagePlaceholder = image.findOne(`#${imageProps.id}-placeholder`);
-		const internalImage = image.findOne(`#${imageProps.id}-image`);
+		const { id } = imageProps;
+		const imagePlaceholder = image.findOne(`#${id}-placeholder`);
+		const internalImage = image.findOne(`#${id}-image`);
 		const realImageURL = this.config.urlTransformer?.(imageProps.imageURL ?? "") ?? imageProps.imageURL;
-		this.loadAsyncElement(imageProps.id);
-		const imageObj = new Image();
-		imageObj.crossOrigin = this.config.crossOrigin;
-		imageObj.onerror = (error) => {
-			this.resolveAsyncElement(imageProps.id);
-			console.error("Error loading image", realImageURL, error);
-			imagePlaceholder?.setAttrs({ visible: true });
-			internalImage?.setAttrs({ visible: false });
-		};
-		imageObj.onload = () => {
-			if (image && imagePlaceholder && internalImage) {
-				image.setAttrs({
-					width: imageProps.width ? imageProps.width : imageObj.width,
-					height: imageProps.height ? imageProps.height : imageObj.height
-				});
-				imagePlaceholder.destroy();
-				internalImage.setAttrs({
-					width: imageProps.width ? imageProps.width : imageObj.width,
-					height: imageProps.height ? imageProps.height : imageObj.height,
-					image: imageObj,
-					visible: true
-				});
-				internalImage.setAttr("imageInfo", {
-					width: imageObj.width,
-					height: imageObj.height
-				});
-				internalImage.zIndex(0);
-				this.imageLoaded = true;
-				image.setAttrs({
-					width: imageProps.width ? imageProps.width : imageObj.width,
-					height: imageProps.height ? imageProps.height : imageObj.height
-				});
-				image.setAttr("imageInfo", {
-					width: imageObj.width,
-					height: imageObj.height
-				});
-				this.scaleReset(image);
-				const imageRect = image.getClientRect({ relativeTo: this.instance.getStage() });
-				if (imageProps.cropInfo && imageProps.uncroppedImage) image.setAttr("uncroppedImage", {
-					width: imageProps.uncroppedImage.width,
-					height: imageProps.uncroppedImage.height
-				});
-				if (!imageProps.cropInfo) image.setAttr("uncroppedImage", {
-					width: imageRect.width,
-					height: imageRect.height
-				});
-				this.updateImageCrop(imageProps);
-				this.resolveAsyncElement(imageProps.id);
-				const nodeHandler = this.instance.getNodeHandler(image.getAttrs().nodeType);
-				if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(image));
+		this.loadAsyncElement(id);
+		this.preloadImage(id, realImageURL ?? "", {
+			onLoad: () => {
+				if (image && imagePlaceholder && internalImage) {
+					image.setAttrs({
+						width: imageProps.width ? imageProps.width : this.imageSource[id].width,
+						height: imageProps.height ? imageProps.height : this.imageSource[id].height
+					});
+					imagePlaceholder.destroy();
+					internalImage.setAttrs({
+						width: imageProps.width ? imageProps.width : this.imageSource[id].width,
+						height: imageProps.height ? imageProps.height : this.imageSource[id].height,
+						image: this.imageSource[id],
+						visible: true
+					});
+					internalImage.setAttr("imageInfo", {
+						width: this.imageSource[id].width,
+						height: this.imageSource[id].height
+					});
+					internalImage.zIndex(0);
+					this.imageLoaded = true;
+					image.setAttrs({
+						width: imageProps.width ? imageProps.width : this.imageSource[id].width,
+						height: imageProps.height ? imageProps.height : this.imageSource[id].height
+					});
+					image.setAttr("imageInfo", {
+						width: this.imageSource[id].width,
+						height: this.imageSource[id].height
+					});
+					this.scaleReset(image);
+					const imageRect = image.getClientRect({ relativeTo: this.instance.getStage() });
+					if (imageProps.cropInfo && imageProps.uncroppedImage) image.setAttr("uncroppedImage", {
+						width: imageProps.uncroppedImage.width,
+						height: imageProps.uncroppedImage.height
+					});
+					if (!imageProps.cropInfo) image.setAttr("uncroppedImage", {
+						width: imageRect.width,
+						height: imageRect.height
+					});
+					this.updateImageCrop(imageProps);
+					this.imageState[id] = {
+						loaded: true,
+						error: false
+					};
+					this.resolveAsyncElement(id);
+					const nodeHandler = this.instance.getNodeHandler(image.getAttrs().nodeType);
+					if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(image));
+				}
+			},
+			onError: (error) => {
+				this.imageState[id] = {
+					loaded: false,
+					error: true
+				};
+				this.resolveAsyncElement(id);
+				console.error("Error loading image", realImageURL, error);
+				imagePlaceholder?.setAttrs({ visible: true });
+				internalImage?.setAttrs({ visible: false });
 			}
-		};
-		if (realImageURL) imageObj.src = realImageURL;
+		});
 	}
 	updateImageCrop(nextProps) {
 		const imageAttrs = nextProps;
@@ -24750,24 +24564,23 @@ var WeaveImageNode = class extends WeaveNode {
 			this.cachedCropInfo[imageAttrs.id ?? ""] = void 0;
 		}
 	}
-	getImageToolAction() {
-		const imageToolAction = this.instance.getActionHandler(IMAGE_TOOL_ACTION_NAME);
-		if (!imageToolAction) throw new Error("Image Tool action not found");
-		return imageToolAction;
+	getImageSource(imageId) {
+		return this.imageSource[imageId];
 	}
 	scaleReset(node) {
 		const scale = node.scale();
+		const nodeAttrs = node.getAttrs();
 		const widthNotNormalized = node.width();
 		const heightNotNormalized = node.height();
-		const uncroppedWidth = node.getAttrs().uncroppedImage ? node.getAttrs().uncroppedImage.width : widthNotNormalized;
-		const uncroppedHeight = node.getAttrs().uncroppedImage ? node.getAttrs().uncroppedImage.height : heightNotNormalized;
+		const uncroppedWidth = nodeAttrs.uncroppedImage ? nodeAttrs.uncroppedImage.width : widthNotNormalized;
+		const uncroppedHeight = nodeAttrs.uncroppedImage ? nodeAttrs.uncroppedImage.height : heightNotNormalized;
 		node.setAttrs({ uncroppedImage: {
 			width: uncroppedWidth * node.scaleX(),
 			height: uncroppedHeight * node.scaleY()
 		} });
-		const placeholder = node.findOne(`#${node.getAttrs().id}-placeholder`);
-		const internalImage = node.findOne(`#${node.getAttrs().id}-image`);
-		const cropGroup = node.findOne(`#${node.getAttrs().id}-cropGroup`);
+		const placeholder = node.findOne(`#${nodeAttrs.id}-placeholder`);
+		const internalImage = node.findOne(`#${nodeAttrs.id}-image`);
+		const cropGroup = node.findOne(`#${nodeAttrs.id}-cropGroup`);
 		if (placeholder) {
 			placeholder.width(Math.max(5, placeholder.width() * placeholder.scaleX()));
 			placeholder.height(Math.max(5, placeholder.height() * placeholder.scaleY()));
@@ -24798,7 +24611,6 @@ var WeaveImageNode = class extends WeaveNode {
 			x: 1,
 			y: 1
 		});
-		this.instance.getMainLayer()?.batchDraw();
 	}
 };
 
@@ -26227,25 +26039,530 @@ var WeaveCommentNode = class extends WeaveNode {
 					this.openCommentDOM(node);
 				}
 			});
-			tween.play();
+			tween.play();
+		}
+	}
+	setCommentViewing(commentId) {
+		this.commentDomAction = commentId ? "viewing" : "idle";
+		this.commentDomVisible = !!commentId;
+		this.commentDomVisibleId = commentId;
+	}
+	isCommentViewing() {
+		return this.commentDomAction === WEAVE_COMMENT_NODE_ACTION.VIEWING && this.commentDomVisible;
+	}
+	isCommentCreating() {
+		return this.commentDomAction === WEAVE_COMMENT_NODE_ACTION.CREATING && this.commentDomVisible;
+	}
+	getCommentId(node) {
+		return this.config.model.getId(node.getAttrs().commentModel);
+	}
+	setShowResolved(show) {
+		this.showResolved = show;
+	}
+};
+
+//#endregion
+//#region src/nodes/video/constants.ts
+const WEAVE_VIDEO_NODE_TYPE = "video";
+const WEAVE_VIDEO_DEFAULT_CONFIG = {
+	crossOrigin: "anonymous",
+	style: {
+		playPauseOnDblClick: true,
+		background: {
+			color: "#C9C9C9FF",
+			strokeWidth: 0,
+			strokeColor: "#000000FF"
+		},
+		track: {
+			resetOnEnd: true,
+			onlyOnHover: false,
+			color: "#FF0033FF",
+			height: 5
+		},
+		iconBackground: {
+			color: "#FFFFFFFF",
+			strokeWidth: 0,
+			strokeColor: "#000000FF"
+		},
+		icon: {
+			internal: {
+				paddingX: 12,
+				paddingY: 8
+			},
+			external: {
+				paddingX: 20,
+				paddingY: 20
+			},
+			width: 24,
+			height: 24,
+			color: "#FFFFFFFF",
+			dataURL: "data:image/png;base64,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"
+		}
+	}
+};
+
+//#endregion
+//#region src/nodes/video/video.ts
+var WeaveVideoNode = class extends WeaveNode {
+	videoState = {};
+	videoSourceFrameId = {};
+	videoSource = {};
+	videoPlaceholder = {};
+	nodeType = WEAVE_VIDEO_NODE_TYPE;
+	constructor(params) {
+		super();
+		const { config } = params ?? {};
+		this.config = (0, import_lodash.merge)(WEAVE_VIDEO_DEFAULT_CONFIG, config);
+	}
+	initVideoIcon() {
+		if (!this.videoIconImage) {
+			this.videoIconImage = new Image();
+			this.videoIconImage.src = this.config.style.icon.dataURL;
+		}
+	}
+	async loadPlaceholder(params, video) {
+		const videoProps = params;
+		const { id } = videoProps;
+		const videoPlaceholder = video.findOne(`#${id}-video-placeholder`);
+		const videoIconGroup = video.findOne(`#${id}-video-icon-group`);
+		if (!videoPlaceholder || !videoIconGroup) return;
+		const realVideoPlaceholderURL = this.config.urlTransformer?.(videoProps.videoPlaceholderURL ?? "") ?? videoProps.videoPlaceholderURL;
+		this.videoPlaceholder[id] = new Image();
+		this.videoPlaceholder[id].crossOrigin = this.config.crossOrigin;
+		this.videoPlaceholder[id].src = realVideoPlaceholderURL;
+		this.videoPlaceholder[id].onerror = (error) => {
+			console.error("Error loading video placeholder", realVideoPlaceholderURL, error);
+			this.resolveAsyncElement(id);
+		};
+		this.videoPlaceholder[id].onload = () => {
+			videoPlaceholder.setAttrs({ image: this.videoPlaceholder[id] });
+			const videoWidth = video.getAttrs().width ?? 0;
+			const videoHeight = video.getAttrs().height ?? 0;
+			const videoIconGroupWidth = this.config.style.icon.internal.paddingX * 2 + this.config.style.icon.width;
+			const videoIconGroupHeight = this.config.style.icon.internal.paddingY * 2 + this.config.style.icon.height;
+			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();
+			this.resolveAsyncElement(id);
+		};
+	}
+	loadVideo(params, video) {
+		const videoProps = params;
+		const { id } = videoProps;
+		const videoSource = document.createElement("video");
+		videoSource.crossOrigin = this.config.crossOrigin;
+		videoSource.preload = "auto";
+		const bg = video.findOne(`#${id}-bg`);
+		const videoProgress = video.findOne(`#${id}-video-progress`);
+		const videoIconGroup = video.findOne(`#${id}-video-icon-group`);
+		const videoPlaceholder = video.findOne(`#${id}-video-placeholder`);
+		const videoPlayer = video.findOne(`#${id}-video`);
+		if (!bg || !videoIconGroup || !videoProgress || !videoPlayer || !videoPlaceholder) return;
+		const realVideoURL = this.config.urlTransformer?.(videoProps.videoURL ?? "") ?? videoProps.videoURL;
+		if (realVideoURL) videoSource.src = realVideoURL;
+		videoSource.addEventListener("loadeddata", () => {
+			videoSource.currentTime = 0;
+			this.videoState[id] = {
+				...this.videoState[id],
+				loaded: true,
+				playing: false,
+				paused: false
+			};
+		});
+		const onFrame = () => {
+			const progress = this.videoSource[id].duration ? Math.max(this.videoSource[id].currentTime / this.videoSource[id].duration, 0) : 0;
+			videoProgress.setAttrs({ width: (video.getAttrs().width ?? 0) * progress });
+			this.videoSourceFrameId[id] = videoSource.requestVideoFrameCallback(onFrame);
+		};
+		videoSource.addEventListener("play", () => {
+			const videoProgress$1 = video.findOne(`#${id}-video-progress`);
+			if (videoProgress$1 && !this.config.style.track.onlyOnHover) videoProgress$1.show();
+			this.videoSourceFrameId[id] = videoSource.requestVideoFrameCallback(onFrame);
+		});
+		videoSource.addEventListener("stop", () => {
+			if (this.videoSourceFrameId[id]) videoSource.cancelVideoFrameCallback(this.videoSourceFrameId[id]);
+		});
+		videoSource.addEventListener("ended", () => {
+			videoProgress.setAttrs({ width: video.getAttrs().width ?? 0 });
+			if (this.config.style.track.resetOnEnd) this.stop(id);
+		});
+		videoSource.addEventListener("error", (error) => {
+			console.error("Error loading image", realVideoURL, error);
+		});
+		videoSource.addEventListener("loadedmetadata", () => {
+			const videoSource$1 = this.videoSource[id];
+			const videoWidth = video.getAttrs().width ?? 0;
+			const videoHeight = video.getAttrs().height ?? 0;
+			videoPlayer.setAttrs({ image: videoSource$1 });
+			videoProgress.width(0);
+			videoProgress.y(videoHeight - this.config.style.track.height / this.instance.getStage().scaleY());
+			const videoIconGroupWidth = this.config.style.icon.internal.paddingX * 2 + this.config.style.icon.width;
+			const videoIconGroupHeight = this.config.style.icon.internal.paddingY * 2 + this.config.style.icon.height;
+			videoIconGroup.x(videoWidth - videoIconGroupWidth - this.config.style.icon.external.paddingX);
+			videoIconGroup.y(videoHeight - videoIconGroupHeight - this.config.style.icon.external.paddingY);
+		});
+		videoPlayer.setAttrs({ image: videoSource });
+		this.videoSource[id] = videoSource;
+	}
+	onRender(props) {
+		this.initVideoIcon();
+		const videoProperties = props.videoProperties ?? {};
+		const videoProps = props;
+		const { id } = videoProps;
+		const groupVideoProps = { ...videoProps };
+		delete groupVideoProps.children;
+		delete groupVideoProps.imageProperties;
+		delete groupVideoProps.zIndex;
+		const internalVideoProps = { ...props };
+		delete internalVideoProps.videoProperties;
+		delete internalVideoProps.videoPlaceholderURL;
+		delete internalVideoProps.videoURL;
+		delete internalVideoProps.zIndex;
+		const videoGroup = new konva.default.Group({
+			...groupVideoProps,
+			...internalVideoProps,
+			id,
+			name: "node",
+			strokeScaleEnabled: true
+		});
+		const bg = new konva.default.Rect({
+			...groupVideoProps,
+			x: 0,
+			y: 0,
+			id: `${id}-bg`,
+			fill: this.config.style.background.color,
+			stroke: this.config.style.background.strokeColor,
+			strokeWidth: this.config.style.background.strokeWidth
+		});
+		videoGroup.add(bg);
+		if (!isServer()) {
+			const video = new konva.default.Image({
+				...groupVideoProps,
+				...videoProperties,
+				id: `${id}-video`,
+				x: 0,
+				y: 0,
+				draggable: false,
+				image: void 0,
+				name: void 0
+			});
+			video.hide();
+			videoGroup.add(video);
+			const videoProgress = new konva.default.Rect({
+				...groupVideoProps,
+				...videoProperties,
+				id: `${id}-video-progress`,
+				x: 0,
+				y: 0,
+				height: this.config.style.track.height / this.instance.getStage().scaleY(),
+				strokeWidth: 0,
+				fill: this.config.style.track.color,
+				name: void 0
+			});
+			this.instance.addEventListener("onZoomChange", () => {
+				videoProgress.height(this.config.style.track.height / this.instance.getStage().scaleY());
+				videoProgress.y((videoGroup.getAttrs().height ?? 0) - videoProgress.height());
+			});
+			videoProgress.hide();
+			videoGroup.add(videoProgress);
+		}
+		const videoPlaceholder = new konva.default.Image({
+			...groupVideoProps,
+			id: `${id}-video-placeholder`,
+			x: 0,
+			y: 0,
+			draggable: false,
+			image: void 0,
+			name: void 0
+		});
+		videoPlaceholder.show();
+		videoGroup.add(videoPlaceholder);
+		const videoIconGroup = new konva.default.Group({
+			id: `${id}-video-icon-group`,
+			x: 0,
+			y: 0
+		});
+		const videoIconBg = new konva.default.Rect({
+			...groupVideoProps,
+			id: `${id}-video-icon-bg`,
+			x: 0,
+			y: 0,
+			width: this.config.style.icon.internal.paddingX * 2 + this.config.style.icon.width,
+			height: this.config.style.icon.internal.paddingY * 2 + this.config.style.icon.height,
+			strokeWidth: this.config.style.iconBackground.strokeWidth,
+			stroke: this.config.style.iconBackground.strokeColor,
+			fill: this.config.style.iconBackground.color
+		});
+		videoIconGroup.add(videoIconBg);
+		const videoIcon = new konva.default.Image({
+			...groupVideoProps,
+			id: `${id}-video-icon`,
+			x: this.config.style.icon.internal.paddingX,
+			y: this.config.style.icon.internal.paddingY,
+			width: this.config.style.icon.width,
+			height: this.config.style.icon.height,
+			fill: "transparent",
+			image: this.videoIconImage
+		});
+		videoIconGroup.add(videoIcon);
+		videoGroup.add(videoIconGroup);
+		this.setupDefaultNodeAugmentation(videoGroup);
+		const defaultTransformerProperties = this.defaultGetTransformerProperties(this.config.transform);
+		videoGroup.getTransformerProperties = function() {
+			return defaultTransformerProperties;
+		};
+		if (!this.anim) this.anim = new konva.default.Animation(() => {
+			this.instance.getMainLayer()?.batchDraw();
+		}, this.instance.getMainLayer());
+		this.setupDefaultNodeEvents(videoGroup);
+		videoGroup.allowedAnchors = function() {
+			return [
+				"top-left",
+				"top-right",
+				"bottom-left",
+				"bottom-right"
+			];
+		};
+		let videoWasPlaying = false;
+		let videoProgressWasVisible = false;
+		const handleTransformStart = (e) => {
+			const node = e.target;
+			const videoProgress = node.findOne(`#${id}-video-progress`);
+			if (videoProgress && videoProgress.isVisible()) {
+				videoProgressWasVisible = true;
+				videoProgress.hide();
+			}
+			if (this.videoState[id]?.playing) {
+				videoWasPlaying = true;
+				this.pause(id);
+			}
+			const videoIconGroup$1 = node.findOne(`#${id}-video-icon-group`);
+			if (videoIconGroup$1) videoIconGroup$1.hide();
+		};
+		videoGroup.on("transformstart", handleTransformStart);
+		const handleTransformEnd = (e) => {
+			const node = e.target;
+			const videoProgress = node.findOne(`#${id}-video-progress`);
+			if (videoProgress && videoProgressWasVisible) videoProgress.show();
+			const videoIconGroup$1 = node.findOne(`#${id}-video-icon-group`);
+			if (videoIconGroup$1) videoIconGroup$1.show();
+			if (this.videoState[id]?.paused && videoWasPlaying) this.play(id);
+			videoProgressWasVisible = false;
+			videoWasPlaying = false;
+		};
+		videoGroup.on("transformend", handleTransformEnd);
+		const videoWidth = videoGroup.getAttrs().width ?? 0;
+		const videoHeight = videoGroup.getAttrs().height ?? 0;
+		const videoIconGroupWidth = this.config.style.icon.internal.paddingX * 2 + this.config.style.icon.width;
+		const videoIconGroupHeight = this.config.style.icon.internal.paddingY * 2 + this.config.style.icon.height;
+		videoIconGroup.x(videoWidth - videoIconGroupWidth - this.config.style.icon.external.paddingX);
+		videoIconGroup.y(videoHeight - videoIconGroupHeight - this.config.style.icon.external.paddingY);
+		this.loadAsyncElement(id);
+		this.loadPlaceholder(props, videoGroup);
+		const isLoaded = typeof this.videoSource[id] !== "undefined";
+		if (!isLoaded && !isServer()) {
+			this.videoState[id] = {
+				placeholderLoaded: false,
+				loaded: false,
+				playing: false,
+				paused: false
+			};
+			this.loadVideo(props, videoGroup);
+		}
+		if (isLoaded && !isServer()) {
+			videoGroup.setAttr("videoInfo", {
+				width: this.videoSource[id].videoWidth,
+				height: this.videoSource[id].videoHeight
+			});
+			this.instance.updateNode(this.serialize(videoGroup));
 		}
+		if (isServer()) this.instance.updateNode(this.serialize(videoGroup));
+		const defaultHandleMouseover = videoGroup.handleMouseover;
+		videoGroup.handleMouseover = () => {
+			defaultHandleMouseover.call(this);
+			if (this.config.style.track.onlyOnHover && this.videoState[id].loaded) {
+				const videoProgress = videoGroup.findOne(`#${id}-video-progress`);
+				videoProgress?.show();
+			}
+		};
+		const defaultHandleMouseout = videoGroup.handleMouseout;
+		videoGroup.handleMouseout = () => {
+			defaultHandleMouseout.call(this);
+			if (this.config.style.track.onlyOnHover && this.videoState[id].loaded && !this.videoState[id].paused) {
+				const videoProgress = videoGroup.findOne(`#${id}-video-progress`);
+				videoProgress?.hide();
+			}
+		};
+		videoGroup.on("mouseover", () => {
+			videoGroup.handleMouseover();
+		});
+		videoGroup.on("mouseout", () => {
+			videoGroup.handleMouseout();
+		});
+		videoGroup.dblClick = () => {
+			if (this.config.style.playPauseOnDblClick && this.videoState[id].loaded && !this.videoState[id].playing) {
+				this.play(id);
+				return;
+			}
+			if (this.config.style.playPauseOnDblClick && this.videoState[id].loaded && this.videoState[id].playing) {
+				this.pause(id);
+				return;
+			}
+		};
+		return videoGroup;
 	}
-	setCommentViewing(commentId) {
-		this.commentDomAction = commentId ? "viewing" : "idle";
-		this.commentDomVisible = !!commentId;
-		this.commentDomVisibleId = commentId;
+	loadAsyncElement(nodeId) {
+		this.instance.loadAsyncElement(nodeId, "video");
 	}
-	isCommentViewing() {
-		return this.commentDomAction === WEAVE_COMMENT_NODE_ACTION.VIEWING && this.commentDomVisible;
+	resolveAsyncElement(nodeId) {
+		this.instance.resolveAsyncElement(nodeId, "video");
+	}
+	getVideoState(nodeInstance) {
+		return this.videoState[nodeInstance.getAttrs().id ?? ""];
+	}
+	play(videoId) {
+		const video = this.instance.getStage().findOne(`#${videoId}`);
+		if (!video) return;
+		const videoPlaceholderNode = video.findOne(`#${videoId}-video-placeholder`);
+		if (videoPlaceholderNode) videoPlaceholderNode.hide();
+		const videoIconGroup = video.findOne(`#${videoId}-video-icon-group`);
+		if (videoIconGroup) videoIconGroup.hide();
+		const videoNode = video.findOne(`#${videoId}-video`);
+		if (videoNode && this.videoSource[videoId]) {
+			videoNode.show();
+			this.videoState[videoId] = {
+				...this.videoState[videoId],
+				playing: true,
+				paused: false
+			};
+			this.videoSource[videoId].play();
+			this.anim.start();
+			this.instance.emitEvent("onVideoPlay", { nodeId: videoId });
+		}
+	}
+	pause(videoId) {
+		const video = this.instance.getStage().findOne(`#${videoId}`);
+		if (!video) return;
+		const videoIconGroup = video.findOne(`#${videoId}-video-icon-group`);
+		if (videoIconGroup) videoIconGroup.show();
+		const videoNode = video.findOne(`#${videoId}-video`);
+		if (videoNode && this.videoSource[videoId]) {
+			this.videoSource[videoId].pause();
+			this.videoState[videoId] = {
+				...this.videoState[videoId],
+				playing: false,
+				paused: true
+			};
+			this.instance.emitEvent("onVideoPause", { nodeId: videoId });
+		}
+	}
+	stop(videoId) {
+		const video = this.instance.getStage().findOne(`#${videoId}`);
+		if (!video) return;
+		const videoPlaceholderNode = video.findOne(`#${videoId}-video-placeholder`);
+		if (videoPlaceholderNode) videoPlaceholderNode.show();
+		const videoProgress = video.findOne(`#${videoId}-video-progress`);
+		if (videoProgress && !this.config.style.track.onlyOnHover) videoProgress.hide();
+		const videoIconGroup = video.findOne(`#${videoId}-video-icon-group`);
+		if (videoIconGroup) videoIconGroup.show();
+		const videoNode = video.findOne(`#${videoId}-video`);
+		if (videoNode && this.videoSource[videoId]) {
+			this.videoSource[videoId].currentTime = 0;
+			this.videoState[videoId] = {
+				...this.videoState[videoId],
+				playing: false,
+				paused: false
+			};
+			videoNode.hide();
+			this.videoSource[videoId].pause();
+			if (!this.areVideosPlaying()) this.anim.stop();
+			this.instance.emitEvent("onVideoStop", { nodeId: videoId });
+		}
 	}
-	isCommentCreating() {
-		return this.commentDomAction === WEAVE_COMMENT_NODE_ACTION.CREATING && this.commentDomVisible;
+	areVideosPlaying() {
+		return Object.values(this.videoState).some((state) => state.playing);
 	}
-	getCommentId(node) {
-		return this.config.model.getId(node.getAttrs().commentModel);
+	getVideoSource(videoId) {
+		return this.videoSource[videoId];
 	}
-	setShowResolved(show) {
-		this.showResolved = show;
+	onUpdate(nodeInstance, nextProps) {
+		nodeInstance.setAttrs({ ...nextProps });
+		const id = nodeInstance.getAttrs().id ?? "";
+		const node = nodeInstance;
+		const nodeAttrs = node.getAttrs();
+		const internalVideoProps = { ...nodeAttrs };
+		delete internalVideoProps.nodeType;
+		delete internalVideoProps.videoProperties;
+		delete internalVideoProps.videoPlaceholderURL;
+		delete internalVideoProps.videoURL;
+		delete internalVideoProps.zIndex;
+		const bg = node.findOne(`#${id}-bg`);
+		const videoIconGroup = node.findOne(`#${id}-video-icon-group`);
+		const videoPlaceholder = node.findOne(`#${id}-video-placeholder`);
+		if (!bg || !videoIconGroup || !videoPlaceholder) return;
+		const videoWidth = node.getAttrs().width ?? 0;
+		const videoHeight = node.getAttrs().height ?? 0;
+		bg.setAttrs({
+			...internalVideoProps,
+			id: `${id}-bg`,
+			x: 0,
+			y: 0
+		});
+		const video = node.findOne(`#${id}-video`);
+		if (!isServer() && video) video.setAttrs({
+			...internalVideoProps,
+			id: `${id}-video`,
+			x: 0,
+			y: 0
+		});
+		videoPlaceholder.setAttrs({
+			...internalVideoProps,
+			id: `${id}-video-placeholder`,
+			x: 0,
+			y: 0
+		});
+		const videoIconGroupWidth = this.config.style.icon.internal.paddingX * 2 + this.config.style.icon.width;
+		const videoIconGroupHeight = this.config.style.icon.internal.paddingY * 2 + this.config.style.icon.height;
+		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();
+	}
+	getNodeSelectionPlugin() {
+		const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
+		return nodesSelectionPlugin;
+	}
+	scaleReset(node) {
+		const scale = node.scale();
+		const id = node.getAttr("id");
+		const videoProgress = node.findOne(`#${id}-video-progress`);
+		const videoIconGroup = node.findOne(`#${id}-video-icon-group`);
+		if (videoIconGroup && videoProgress) {
+			videoIconGroup.scaleX(1);
+			videoIconGroup.scaleY(1);
+			const videoIconGroupWidth = this.config.style.icon.internal.paddingX * 2 + this.config.style.icon.width;
+			const videoIconGroupHeight = this.config.style.icon.internal.paddingY * 2 + this.config.style.icon.height;
+			const stage = this.instance.getStage();
+			const videoWidth = (node.getAttrs().width ?? 0) * stage.scaleX();
+			const videoHeight = (node.getAttrs().height ?? 0) * stage.scaleY();
+			videoIconGroup.x(videoWidth - videoIconGroupWidth - this.config.style.icon.external.paddingX);
+			videoIconGroup.y(videoHeight - videoIconGroupHeight - this.config.style.icon.external.paddingY);
+		}
+		node.width(Math.max(5, node.width() * scale.x));
+		node.height(Math.max(5, node.height() * scale.y));
+		if (videoProgress) {
+			videoProgress.scaleX(1);
+			videoProgress.scaleY(1);
+			const progress = this.videoSource[id].duration ? Math.min(this.videoSource[id].currentTime / this.videoSource[id].duration, 1) : 0;
+			videoProgress.width((node.getAttrs().width ?? 0) * progress);
+			videoProgress.height(this.config.style.track.height / this.instance.getStage().scaleY());
+			videoProgress.y((node.getAttrs().height ?? 0) - videoProgress.height());
+		}
+		node.scale({
+			x: 1,
+			y: 1
+		});
 	}
 };
 
@@ -28043,67 +28360,345 @@ var WeaveTextToolAction = class extends WeaveAction {
 				return;
 			}
 		});
-		this.initialized = true;
+		this.initialized = true;
+	}
+	setState(state) {
+		this.state = state;
+	}
+	addText() {
+		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (selectionPlugin) {
+			const tr = selectionPlugin.getTransformer();
+			tr.hide();
+		}
+		this.setCursor();
+		this.setFocusStage();
+		this.instance.emitEvent("onAddingText");
+		this.clickPoint = null;
+		this.setState(TEXT_TOOL_STATE.ADDING);
+	}
+	handleAdding() {
+		const { mousePoint, container } = this.instance.getMousePointer();
+		this.clickPoint = mousePoint;
+		this.container = container;
+		this.textId = v4_default();
+		const nodeHandler = this.instance.getNodeHandler("text");
+		if (nodeHandler) {
+			const node = nodeHandler.create(this.textId, {
+				...this.props,
+				x: this.clickPoint?.x ?? 0,
+				y: this.clickPoint?.y ?? 0,
+				draggable: true
+			});
+			this.instance.addNode(node, this.container?.getAttrs().id);
+			this.instance.emitEvent("onAddedArrow");
+		}
+		this.setState(TEXT_TOOL_STATE.FINISHED);
+		this.cancelAction();
+	}
+	trigger(cancelAction) {
+		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([]);
+		this.props = this.initProps();
+		this.addText();
+	}
+	cleanup() {
+		const stage = this.instance.getStage();
+		stage.container().style.cursor = "default";
+		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (selectionPlugin) {
+			const node$1 = stage.findOne(`#${this.textId}`);
+			if (node$1) selectionPlugin.setSelectedNodes([node$1]);
+			this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
+		}
+		const node = stage.findOne(`#${this.textId}`);
+		if (node) node.getAttr("triggerEditMode")(node);
+		this.initialCursor = null;
+		this.textId = null;
+		this.container = void 0;
+		this.clickPoint = null;
+		this.setState(TEXT_TOOL_STATE.IDLE);
+	}
+	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();
+	}
+};
+
+//#endregion
+//#region src/actions/image-tool/constants.ts
+const IMAGE_TOOL_ACTION_NAME = "imageTool";
+const IMAGE_TOOL_STATE = {
+	["IDLE"]: "idle",
+	["UPLOADING"]: "uploading",
+	["DEFINING_POSITION"]: "definingPosition",
+	["SELECTED_POSITION"]: "selectedPosition",
+	["ADDING"]: "adding",
+	["FINISHED"]: "finished"
+};
+
+//#endregion
+//#region src/actions/image-tool/image-tool.ts
+var WeaveImageToolAction = class extends WeaveAction {
+	initialized = false;
+	initialCursor = null;
+	cursorPadding = 5;
+	forceMainContainer = false;
+	onPropsChange = void 0;
+	update = void 0;
+	constructor() {
+		super();
+		this.pointers = new Map();
+		this.initialized = false;
+		this.state = IMAGE_TOOL_STATE.IDLE;
+		this.imageId = null;
+		this.tempImageId = null;
+		this.tempImageNode = null;
+		this.container = void 0;
+		this.imageURL = null;
+		this.clickPoint = null;
+	}
+	getName() {
+		return IMAGE_TOOL_ACTION_NAME;
+	}
+	initProps() {
+		return {
+			width: 100,
+			height: 100,
+			scaleX: 1,
+			scaleY: 1
+		};
+	}
+	onInit() {
+		this.instance.addEventListener("onStageDrop", (e) => {
+			if (window.weaveDragImageURL) {
+				this.instance.getStage().setPointersPositions(e);
+				const position = this.instance.getStage().getRelativePointerPosition();
+				this.instance.triggerAction(IMAGE_TOOL_ACTION_NAME, {
+					imageURL: window.weaveDragImageURL,
+					imageId: window.weaveDragImageId,
+					position
+				});
+				window.weaveDragImageURL = void 0;
+				window.weaveDragImageId = void 0;
+			}
+		});
+	}
+	setupEvents() {
+		const stage = this.instance.getStage();
+		window.addEventListener("keydown", (e) => {
+			if (e.key === "Escape" && this.instance.getActiveAction() === IMAGE_TOOL_ACTION_NAME) {
+				this.cancelAction();
+				return;
+			}
+		});
+		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() === IMAGE_TOOL_ACTION_NAME) {
+				this.state = IMAGE_TOOL_STATE.DEFINING_POSITION;
+				return;
+			}
+			if (this.state === IMAGE_TOOL_STATE.DEFINING_POSITION) this.state = IMAGE_TOOL_STATE.SELECTED_POSITION;
+		});
+		stage.on("pointermove", (e) => {
+			if (this.state === 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;
+				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") {
+				const mousePos = stage.getRelativePointerPosition();
+				this.tempImageNode.setAttrs({
+					x: (mousePos?.x ?? 0) + this.cursorPadding,
+					y: (mousePos?.y ?? 0) + this.cursorPadding
+				});
+			}
+		});
+		stage.on("pointerup", (e) => {
+			this.pointers.delete(e.evt.pointerId);
+			if (this.state === IMAGE_TOOL_STATE.SELECTED_POSITION) this.handleAdding();
+		});
+		this.initialized = true;
+	}
+	setState(state) {
+		this.state = state;
+	}
+	loadImage(imageURL, options, position) {
+		this.setCursor();
+		this.setFocusStage();
+		this.imageId = v4_default();
+		this.imageURL = imageURL;
+		const imageNodeHandler = this.getImageNodeHandler();
+		if (!imageNodeHandler) {
+			this.cancelAction();
+			return;
+		}
+		imageNodeHandler.preloadImage(this.imageId, imageURL, {
+			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");
 	}
-	setState(state) {
-		this.state = state;
+	isTouchDevice() {
+		return window.matchMedia("(pointer: coarse)").matches;
 	}
-	addText() {
-		const selectionPlugin = this.instance.getPlugin("nodesSelection");
-		if (selectionPlugin) {
-			const tr = selectionPlugin.getTransformer();
-			tr.hide();
-		}
+	addImageNode(position) {
+		const stage = this.instance.getStage();
 		this.setCursor();
 		this.setFocusStage();
-		this.instance.emitEvent("onAddingText");
+		if (position) {
+			this.setState(IMAGE_TOOL_STATE.SELECTED_POSITION);
+			this.handleAdding(position);
+			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);
+			if (!imageSource) {
+				this.cancelAction();
+				return;
+			}
+			const aspectRatio = imageSource.width / imageSource.height;
+			if (!this.tempImageNode && this.tempImageId && !this.isTouchDevice()) {
+				this.tempImageNode = new konva.default.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()),
+					opacity: 1,
+					adding: true,
+					image: imageSource,
+					stroke: "#000000ff",
+					strokeWidth: 0,
+					strokeScaleEnabled: true,
+					listening: false
+				});
+				this.instance.getMainLayer()?.add(this.tempImageNode);
+			}
+			this.instance.emitEvent("onAddingImage", { imageURL: this.props.imageURL });
+		}
 		this.clickPoint = null;
-		this.setState(TEXT_TOOL_STATE.ADDING);
+		this.setState(IMAGE_TOOL_STATE.DEFINING_POSITION);
 	}
-	handleAdding() {
-		const { mousePoint, container } = this.instance.getMousePointer();
-		this.clickPoint = mousePoint;
-		this.container = container;
-		this.textId = v4_default();
-		const nodeHandler = this.instance.getNodeHandler("text");
-		if (nodeHandler) {
-			const node = nodeHandler.create(this.textId, {
-				...this.props,
-				x: this.clickPoint?.x ?? 0,
-				y: this.clickPoint?.y ?? 0,
-				draggable: true
-			});
-			this.instance.addNode(node, this.container?.getAttrs().id);
-			this.instance.emitEvent("onAddedArrow");
+	addImage(position) {
+		if (position) this.clickPoint = position;
+		this.setState(IMAGE_TOOL_STATE.UPLOADING);
+	}
+	handleAdding(position) {
+		if (this.imageId) {
+			const imageNodeHandler = this.getImageNodeHandler();
+			if (!imageNodeHandler) {
+				this.cancelAction();
+				return;
+			}
+			const imageSource = imageNodeHandler.getImageSource(this.imageId);
+			if (!imageSource) {
+				this.cancelAction();
+				return;
+			}
+			const { mousePoint, container } = this.instance.getMousePointer(position);
+			this.clickPoint = mousePoint;
+			this.container = container;
+			const nodeHandler = this.instance.getNodeHandler("image");
+			if (nodeHandler) {
+				const node = nodeHandler.create(this.imageId, {
+					...this.props,
+					x: this.clickPoint?.x ?? 0,
+					y: this.clickPoint?.y ?? 0,
+					opacity: 1,
+					adding: false,
+					imageURL: this.imageURL,
+					stroke: "#000000ff",
+					strokeWidth: 0,
+					strokeScaleEnabled: true,
+					imageWidth: imageSource.width,
+					imageHeight: imageSource.height,
+					imageInfo: {
+						width: imageSource.width,
+						height: imageSource.height
+					}
+				});
+				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.setState(IMAGE_TOOL_STATE.FINISHED);
 		}
-		this.setState(TEXT_TOOL_STATE.FINISHED);
 		this.cancelAction();
 	}
-	trigger(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([]);
+		this.forceMainContainer = params?.forceMainContainer ?? false;
+		if (params?.imageId) this.updateProps({ imageId: params.imageId });
+		if (params?.imageURL) {
+			this.loadImage(params.imageURL, params?.options ?? void 0, params?.position ?? void 0);
+			return;
+		}
 		this.props = this.initProps();
-		this.addText();
+		this.addImage();
+		return { finishUploadCallback: this.loadImage.bind(this) };
 	}
 	cleanup() {
 		const stage = this.instance.getStage();
-		stage.container().style.cursor = "default";
+		if (this.tempImageNode) this.tempImageNode.destroy();
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
 		if (selectionPlugin) {
-			const node$1 = stage.findOne(`#${this.textId}`);
-			if (node$1) selectionPlugin.setSelectedNodes([node$1]);
+			const node = stage.findOne(`#${this.imageId}`);
+			if (node) selectionPlugin.setSelectedNodes([node]);
 			this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
 		}
-		const node = stage.findOne(`#${this.textId}`);
-		if (node) node.getAttr("triggerEditMode")(node);
+		stage.container().style.cursor = "default";
 		this.initialCursor = null;
-		this.textId = null;
+		this.imageId = null;
+		this.forceMainContainer = false;
 		this.container = void 0;
+		this.tempImageNode = null;
+		this.imageURL = null;
 		this.clickPoint = null;
-		this.setState(TEXT_TOOL_STATE.IDLE);
+		this.setState(IMAGE_TOOL_STATE.IDLE);
+	}
+	getImageNodeHandler() {
+		return this.instance.getNodeHandler("image");
 	}
 	setCursor() {
 		const stage = this.instance.getStage();
@@ -29527,6 +30122,182 @@ var WeaveCommentToolAction = class extends WeaveAction {
 	}
 };
 
+//#endregion
+//#region src/actions/video-tool/constants.ts
+const VIDEO_TOOL_ACTION_NAME = "videoTool";
+const VIDEO_TOOL_STATE = {
+	["IDLE"]: "idle",
+	["UPLOADING"]: "uploading",
+	["DEFINING_POSITION"]: "definingPosition",
+	["SELECTED_POSITION"]: "selectedPosition",
+	["ADDING"]: "adding",
+	["FINISHED"]: "finished"
+};
+
+//#endregion
+//#region src/actions/video-tool/video-tool.ts
+var WeaveVideoToolAction = class extends WeaveAction {
+	initialized = false;
+	initialCursor = null;
+	cursorPadding = 5;
+	forceMainContainer = false;
+	onPropsChange = void 0;
+	update = void 0;
+	constructor() {
+		super();
+		this.pointers = new Map();
+		this.initialized = false;
+		this.state = VIDEO_TOOL_STATE.IDLE;
+		this.videoId = null;
+		this.container = void 0;
+		this.videoParams = null;
+		this.clickPoint = null;
+	}
+	getName() {
+		return VIDEO_TOOL_ACTION_NAME;
+	}
+	getVideoSource(videoId) {
+		const nodeHandler = this.instance.getNodeHandler("video");
+		if (!nodeHandler) return void 0;
+		return nodeHandler.getVideoSource(videoId);
+	}
+	initProps() {
+		return {
+			width: 100,
+			height: 100,
+			scaleX: 1,
+			scaleY: 1
+		};
+	}
+	onInit() {
+		this.instance.addEventListener("onStageDrop", (e) => {
+			if (window.weaveDragVideoId && window.weaveDragVideoParams) {
+				this.instance.getStage().setPointersPositions(e);
+				const position = this.instance.getStage().getRelativePointerPosition();
+				this.instance.triggerAction(VIDEO_TOOL_ACTION_NAME, {
+					videoId: window.weaveDragVideoId,
+					videoParams: window.weaveDragVideoParams,
+					position
+				});
+				window.weaveDragVideoParams = void 0;
+				window.weaveDragVideoId = void 0;
+			}
+		});
+	}
+	setupEvents() {
+		const stage = this.instance.getStage();
+		window.addEventListener("keydown", (e) => {
+			if (e.key === "Escape" && this.instance.getActiveAction() === VIDEO_TOOL_ACTION_NAME) {
+				this.cancelAction();
+				return;
+			}
+		});
+		stage.on("pointerdown", (e) => {
+			this.setTapStart(e);
+			this.pointers.set(e.evt.pointerId, {
+				x: e.evt.clientX,
+				y: e.evt.clientY
+			});
+			if (this.state === VIDEO_TOOL_STATE.DEFINING_POSITION) this.state = VIDEO_TOOL_STATE.SELECTED_POSITION;
+		});
+		stage.on("pointermove", () => {
+			if (this.state === VIDEO_TOOL_STATE.IDLE) return;
+			this.setCursor();
+		});
+		stage.on("pointerup", (e) => {
+			this.pointers.delete(e.evt.pointerId);
+			if (this.state === VIDEO_TOOL_STATE.SELECTED_POSITION) this.handleAdding();
+		});
+		this.initialized = true;
+	}
+	setState(state) {
+		this.state = state;
+	}
+	doVideoAdding(videoParams, position) {
+		this.videoId = v4_default();
+		this.videoParams = videoParams;
+		this.setState(VIDEO_TOOL_STATE.DEFINING_POSITION);
+		if (!position) {
+			this.clickPoint = null;
+			this.instance.emitEvent("onAddingVideo", { videoURL: this.videoParams.url });
+		} else this.handleAdding(position);
+	}
+	addVideo(position) {
+		if (position) this.clickPoint = position;
+		this.setState(VIDEO_TOOL_STATE.UPLOADING);
+	}
+	handleAdding(position) {
+		if (this.videoId && this.videoParams) {
+			const { mousePoint, container } = this.instance.getMousePointer(position);
+			this.clickPoint = mousePoint;
+			this.container = container;
+			const nodeHandler = this.instance.getNodeHandler("video");
+			if (nodeHandler) {
+				const node = nodeHandler.create(this.videoId, {
+					...this.props,
+					x: this.clickPoint?.x ?? 0,
+					y: this.clickPoint?.y ?? 0,
+					opacity: 1,
+					adding: false,
+					videoPlaceholderURL: this.videoParams.placeholderUrl,
+					videoURL: this.videoParams.url,
+					stroke: "#000000ff",
+					strokeWidth: 0,
+					strokeScaleEnabled: true
+				});
+				this.instance.addNode(node, this.forceMainContainer ? this.instance.getMainLayer()?.getAttrs().id : this.container?.getAttrs().id);
+				this.instance.emitEvent("onAddedVideo", {
+					videoURL: this.videoParams.url,
+					nodeId: this.videoId
+				});
+			}
+			this.setState(VIDEO_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([]);
+		this.forceMainContainer = params?.forceMainContainer ?? false;
+		if (params?.videoId) this.updateProps({ videoId: params.videoId });
+		if (params?.videoParams) {
+			this.updateProps({
+				width: params.videoParams.width,
+				height: params.videoParams.height
+			});
+			this.doVideoAdding(params.videoParams, params?.position ?? void 0);
+			return;
+		}
+		this.props = this.initProps();
+		this.addVideo();
+		return { finishUploadCallback: this.doVideoAdding.bind(this) };
+	}
+	cleanup() {
+		const stage = this.instance.getStage();
+		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (selectionPlugin) {
+			const node = stage.findOne(`#${this.videoId}`);
+			if (node) selectionPlugin.setSelectedNodes([node]);
+			this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
+		}
+		stage.container().style.cursor = "default";
+		this.initialCursor = null;
+		this.videoId = null;
+		this.forceMainContainer = false;
+		this.container = void 0;
+		this.videoParams = null;
+		this.clickPoint = null;
+		this.setState(VIDEO_TOOL_STATE.IDLE);
+	}
+	setCursor() {
+		const stage = this.instance.getStage();
+		stage.container().style.cursor = "crosshair";
+	}
+};
+
 //#endregion
 //#region src/plugins/stage-grid/stage-grid.ts
 var WeaveStageGridPlugin = class extends WeavePlugin {
@@ -31761,6 +32532,8 @@ exports.STAR_TOOL_STATE = STAR_TOOL_STATE
 exports.TEXT_LAYOUT = TEXT_LAYOUT
 exports.TEXT_TOOL_ACTION_NAME = TEXT_TOOL_ACTION_NAME
 exports.TEXT_TOOL_STATE = TEXT_TOOL_STATE
+exports.VIDEO_TOOL_ACTION_NAME = VIDEO_TOOL_ACTION_NAME
+exports.VIDEO_TOOL_STATE = VIDEO_TOOL_STATE
 exports.WEAVE_ARROW_NODE_TYPE = WEAVE_ARROW_NODE_TYPE
 exports.WEAVE_COMMENTS_RENDERER_KEY = WEAVE_COMMENTS_RENDERER_KEY
 exports.WEAVE_COMMENTS_TOOL_LAYER_ID = WEAVE_COMMENTS_TOOL_LAYER_ID
@@ -31821,6 +32594,8 @@ exports.WEAVE_USERS_POINTERS_KEY = WEAVE_USERS_POINTERS_KEY
 exports.WEAVE_USERS_SELECTION_KEY = WEAVE_USERS_SELECTION_KEY
 exports.WEAVE_USER_POINTER_KEY = WEAVE_USER_POINTER_KEY
 exports.WEAVE_USER_SELECTION_KEY = WEAVE_USER_SELECTION_KEY
+exports.WEAVE_VIDEO_DEFAULT_CONFIG = WEAVE_VIDEO_DEFAULT_CONFIG
+exports.WEAVE_VIDEO_NODE_TYPE = WEAVE_VIDEO_NODE_TYPE
 exports.Weave = Weave
 exports.WeaveAction = WeaveAction
 exports.WeaveAlignNodesToolAction = WeaveAlignNodesToolAction
@@ -31875,6 +32650,8 @@ exports.WeaveTextNode = WeaveTextNode
 exports.WeaveTextToolAction = WeaveTextToolAction
 exports.WeaveUsersPointersPlugin = WeaveUsersPointersPlugin
 exports.WeaveUsersSelectionPlugin = WeaveUsersSelectionPlugin
+exports.WeaveVideoNode = WeaveVideoNode
+exports.WeaveVideoToolAction = WeaveVideoToolAction
 exports.WeaveZoomInToolAction = WeaveZoomInToolAction
 exports.WeaveZoomOutToolAction = WeaveZoomOutToolAction
 exports.clearContainerTargets = clearContainerTargets
@@ -31894,6 +32671,7 @@ exports.intersectArrays = intersectArrays
 exports.isIOS = isIOS
 exports.isInShadowDOM = isInShadowDOM
 exports.isNodeInSelection = isNodeInSelection
+exports.isServer = isServer
 exports.memoize = memoize
 exports.moveNodeToContainer = moveNodeToContainer
 exports.resetScale = resetScale