@inditextech/weave-sdk 0.58.0 → 0.60.0

package/dist/sdk.cjs

@@ -18256,13 +18256,6 @@ function getVisibleNodesInViewport(stage, referenceLayer) {
 	});
 	return visibleNodes;
 }
-function getClosestParentWithId(el) {
-	while (el) {
-		if (el.id) return el;
-		el = el.parentElement;
-	}
-	return null;
-}
 function isInShadowDOM(el) {
 	return el?.getRootNode() instanceof ShadowRoot;
 }
@@ -20334,7 +20327,6 @@ var WeaveNode = class {
 				}
 			});
 			node.on("pointerover", (e) => {
-				e.cancelBubble = true;
 				const stage = this.instance.getStage();
 				const activeAction = this.instance.getActiveAction();
 				const isNodeSelectionEnabled = this.getSelectionPlugin()?.isEnabled();
@@ -20345,16 +20337,22 @@ var WeaveNode = class {
 				if (isNodeSelectionEnabled && this.isSelecting() && !this.isNodeSelected(realNode) && !this.isPasting() && isLocked$1) {
 					const stage$1 = this.instance.getStage();
 					stage$1.container().style.cursor = "default";
+					e.cancelBubble = true;
 				}
 				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";
 					this.setHoverState(realNode);
+					e.cancelBubble = true;
+				}
+				if (!isTargetable) {
+					this.hideHoverState();
+					e.cancelBubble = true;
 				}
-				if (!isTargetable) this.hideHoverState();
 				if (this.isPasting()) {
 					const stage$1 = this.instance.getStage();
 					stage$1.container().style.cursor = "crosshair";
+					e.cancelBubble = true;
 				}
 			});
 		}
@@ -22023,7 +22021,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.58.0";
+var version = "0.60.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -22559,6 +22557,17 @@ var Weave = class {
 	getContainerNodes() {
 		return this.stageManager.getContainerNodes();
 	}
+	getClosestParentWithWeaveId(el) {
+		const weaveContainer = this.getStageConfiguration().container;
+		let weaveId = void 0;
+		if (weaveContainer instanceof HTMLElement) weaveId = weaveContainer.id;
+		if (typeof weaveContainer === "string") weaveId = weaveContainer;
+		while (el) {
+			if (el.id && el.id === weaveId) return el;
+			el = el.parentElement;
+		}
+		return null;
+	}
 	getRegisterManager() {
 		return this.registerManager;
 	}
@@ -23728,15 +23737,17 @@ var WeaveImageToolAction = class extends WeaveAction {
 				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();
-		stage.container().addEventListener("keydown", (e) => {
+		window.addEventListener("keydown", (e) => {
 			if (e.key === "Escape" && this.instance.getActiveAction() === IMAGE_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
@@ -23755,13 +23766,13 @@ var WeaveImageToolAction = class extends WeaveAction {
 			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") {
-				stage.container().style.cursor = "crosshair";
-				stage.container().focus();
 				const mousePos = stage.getRelativePointerPosition();
 				this.tempImageNode.setAttrs({
 					x: (mousePos?.x ?? 0) + this.cursorPadding,
@@ -23779,13 +23790,12 @@ var WeaveImageToolAction = class extends WeaveAction {
 		this.state = state;
 	}
 	loadImage(imageURL, options, position) {
-		const stage = this.instance.getStage();
 		const imageOptions = {
 			crossOrigin: "anonymous",
 			...options
 		};
-		stage.container().style.cursor = "crosshair";
-		stage.container().focus();
+		this.setCursor();
+		this.setFocusStage();
 		this.imageId = v4_default();
 		this.imageURL = imageURL;
 		this.preloadImgs[this.imageId] = new Image();
@@ -23812,8 +23822,8 @@ var WeaveImageToolAction = class extends WeaveAction {
 	}
 	addImageNode(position) {
 		const stage = this.instance.getStage();
-		stage.container().style.cursor = "crosshair";
-		stage.container().focus();
+		this.setCursor();
+		this.setFocusStage();
 		if (position) {
 			this.setState(IMAGE_TOOL_STATE.SELECTED_POSITION);
 			this.handleAdding(position);
@@ -23890,6 +23900,7 @@ var WeaveImageToolAction = class extends WeaveAction {
 		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;
@@ -23918,6 +23929,16 @@ var WeaveImageToolAction = class extends WeaveAction {
 		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
@@ -24276,6 +24297,7 @@ const WEAVE_IMAGE_CROP_END_TYPE = {
 	["ACCEPT"]: "accept",
 	["CANCEL"]: "cancel"
 };
+const WEAVE_IMAGE_DEFAULT_CONFIG = { crossOrigin: "anonymous" };
 
 //#endregion
 //#region src/nodes/image/image.ts
@@ -24290,16 +24312,15 @@ var WeaveImageNode = class extends WeaveNode {
 			time: 0
 		};
 		this.lastTapTime = 0;
-		this.config = {
-			crossOrigin: config?.crossOrigin ?? "anonymous",
-			transform: { ...config?.transform }
-		};
+		this.config = (0, import_lodash.merge)(WEAVE_IMAGE_DEFAULT_CONFIG, config);
 		this.imageCrop = null;
 		this.cachedCropInfo = {};
 		this.imageLoaded = false;
 	}
 	triggerCrop(imageNode) {
 		const stage = this.instance.getStage();
+		if (imageNode.getAttrs().cropping ?? false) return;
+		if (!(this.isSelecting() && this.isNodeSelected(imageNode))) return;
 		stage.mode("cropping");
 		const image = stage.findOne(`#${imageNode.getAttrs().id}`);
 		const internalImage = image?.findOne(`#${image.getAttrs().id}-image`);
@@ -24431,10 +24452,7 @@ var WeaveImageNode = class extends WeaveNode {
 		image.add(cropGroup);
 		this.setupDefaultNodeEvents(image);
 		image.dblClick = () => {
-			if (image.getAttrs().cropping ?? false) return;
-			if (!internalImage.getAttr("image")) return;
-			if (!(this.isSelecting() && this.isNodeSelected(image))) return;
-			this.triggerCrop(image);
+			this.config.onDblClick?.(this, image);
 		};
 		const imageActionTool = this.getImageToolAction();
 		const preloadImg = imageActionTool.getPreloadedImage(imageProps.id);
@@ -25406,6 +25424,706 @@ var WeaveStrokeNode = class extends WeaveNode {
 	}
 };
 
+//#endregion
+//#region src/nodes/comment/constants.ts
+const WEAVE_COMMENT_STATUS = {
+	PENDING: "pending",
+	RESOLVED: "resolved"
+};
+const WEAVE_COMMENT_CREATE_ACTION = {
+	CREATE: "create",
+	CLOSE: "close"
+};
+const WEAVE_COMMENT_VIEW_ACTION = {
+	REPLY: "reply",
+	MARK_RESOLVED: "markResolved",
+	EDIT: "edit",
+	DELETE: "delete",
+	CLOSE: "close"
+};
+const WEAVE_COMMENT_NODE_ACTION = {
+	IDLE: "idle",
+	CREATING: "creating",
+	VIEWING: "viewing"
+};
+const WEAVE_COMMENT_NODE_TYPE = "comment";
+const WEAVE_COMMENT_NODE_DEFAULTS = {
+	style: {
+		stroke: "#000000",
+		strokeWidth: 0,
+		shadowColor: "rgba(0,0,0,0.25)",
+		shadowBlur: 4,
+		shadowOffsetX: 0,
+		shadowOffsetY: 0,
+		shadowOpacity: .8,
+		contracted: {
+			width: 40,
+			height: 40,
+			circlePadding: 2,
+			userName: {
+				fontFamily: "arial, sans-serif",
+				fontSize: 14,
+				fontStyle: "normal"
+			}
+		},
+		expanded: {
+			width: 250,
+			userNameLeftMargin: 8,
+			dateLeftMargin: 8,
+			contentTopMargin: 8,
+			contentBottomMargin: 12,
+			userName: {
+				fontFamily: "arial, sans-serif",
+				fontSize: 12,
+				fontStyle: "bold",
+				color: "#000000"
+			},
+			date: {
+				fontFamily: "arial, sans-serif",
+				fontSize: 12,
+				fontStyle: "normal",
+				color: "#757575"
+			},
+			content: {
+				fontFamily: "arial, sans-serif",
+				fontSize: 12,
+				maxLines: 3,
+				fontStyle: "normal",
+				color: "#000000"
+			}
+		},
+		creating: {
+			paddingX: 8,
+			paddingY: -4,
+			stroke: "#1a1aff",
+			strokeWidth: 2
+		},
+		viewing: {
+			paddingX: 8,
+			paddingY: -18,
+			stroke: "#1a1aff",
+			strokeWidth: 2
+		}
+	},
+	formatDate: (date) => date
+};
+
+//#endregion
+//#region src/nodes/comment/text-max-lines.ts
+var TextWithMaxLines = class extends konva.default.Text {
+	constructor(config) {
+		super(config);
+		this._maxLines = config.maxLines;
+		this._fullText = config.text?.toString() ?? "";
+		this.on("textChange widthChange fontSizeChange fontFamilyChange fontStyleChange paddingChange alignChange letterSpacingChange lineHeightChange wrapChange", () => this._applyTruncation());
+		this._applyTruncation();
+	}
+	get maxLines() {
+		return this._maxLines;
+	}
+	set maxLines(v) {
+		this._maxLines = v;
+		this._applyTruncation();
+	}
+	setText(text) {
+		if (typeof text === "undefined") return this;
+		this._fullText = text ?? "";
+		super.setText(this._fullText);
+		this._applyTruncation();
+		return this;
+	}
+	_applyTruncation() {
+		if (!this._maxLines || this._maxLines <= 0) {
+			super.setText(this._fullText);
+			return;
+		}
+		super.setText(this._fullText);
+		const selfAny = this;
+		if (typeof selfAny._setTextData === "function") selfAny._setTextData();
+		let textArr = selfAny.textArr || [];
+		if (textArr.length > this._maxLines) {
+			const visible = textArr.slice(0, this._maxLines).map((l) => l.text);
+			const candidate = visible[visible.length - 1] + "…";
+			super.setText([...visible.slice(0, -1), candidate].join("\n"));
+			if (typeof selfAny._setTextData === "function") selfAny._setTextData();
+			textArr = selfAny.textArr || [];
+		}
+		const lines = textArr.length;
+		const fontSize = this.fontSize();
+		const lineHeight = this.lineHeight() || 1;
+		this.height(fontSize * lineHeight * lines);
+	}
+};
+
+//#endregion
+//#region src/nodes/comment/comment.ts
+var WeaveCommentNode = class extends WeaveNode {
+	nodeType = WEAVE_COMMENT_NODE_TYPE;
+	constructor(params) {
+		super();
+		this.config = (0, import_lodash.merge)(WEAVE_COMMENT_NODE_DEFAULTS, params.config);
+		this.commentDomVisibleId = null;
+		this.commentDomVisible = false;
+		this.commentDomAction = null;
+		this.showResolved = false;
+	}
+	onRender(props) {
+		const { id } = props;
+		const commentParams = { ...props };
+		delete commentParams.zIndex;
+		const widthContracted = this.config.style.contracted.width;
+		const heightContracted = this.config.style.contracted.height;
+		const circlePaddingContracted = this.config.style.contracted.circlePadding;
+		const widthExpanded = this.config.style.expanded.width;
+		const userNameLeftMargin = this.config.style.expanded.userNameLeftMargin;
+		const dateLeftMargin = this.config.style.expanded.dateLeftMargin;
+		const contentTopMargin = this.config.style.expanded.contentTopMargin;
+		const contentBottomMargin = this.config.style.expanded.contentBottomMargin;
+		const userNameShortFontFamily = this.config.style.contracted.userName.fontFamily;
+		const userNameShortFontSize = this.config.style.contracted.userName.fontSize;
+		const userNameShortFontStyle = this.config.style.contracted.userName.fontStyle;
+		const userNameFontFamily = this.config.style.expanded.userName.fontFamily;
+		const userNameFontSize = this.config.style.expanded.userName.fontSize;
+		const userNameFontStyle = this.config.style.expanded.userName.fontStyle;
+		const userNameColor = this.config.style.expanded.userName.color;
+		const dateFontFamily = this.config.style.expanded.date.fontFamily;
+		const dateFontSize = this.config.style.expanded.date.fontSize;
+		const dateFontStyle = this.config.style.expanded.date.fontStyle;
+		const dateColor = this.config.style.expanded.date.color;
+		const contentMaxLines = this.config.style.expanded.content.maxLines;
+		const contentFontFamily = this.config.style.expanded.content.fontFamily;
+		const contentFontSize = this.config.style.expanded.content.fontSize;
+		const contentFontStyle = this.config.style.expanded.content.fontStyle;
+		const contentColor = this.config.style.expanded.content.color;
+		const commentNode = new konva.default.Group({
+			...commentParams,
+			name: "comment",
+			isTargetable: false,
+			isExpanded: false,
+			commentAction: null,
+			listening: true,
+			draggable: this.config.model.canUserDrag(commentParams.commentModel)
+		});
+		this.setupDefaultNodeAugmentation(commentNode);
+		const background = new konva.default.Shape({
+			id: `${id}-bg`,
+			x: 0,
+			y: -heightContracted,
+			isTargetable: false,
+			fill: commentParams.userBackgroundColor ?? "#0000FF",
+			stroke: this.config.style.stroke,
+			strokeWidth: this.config.style.strokeWidth,
+			width: widthContracted,
+			height: heightContracted,
+			shadowColor: this.config.style.shadowColor,
+			shadowBlur: this.config.style.shadowBlur,
+			shadowOffsetX: this.config.style.shadowOffsetX,
+			shadowOffsetY: this.config.style.shadowOffsetY,
+			shadowOpacity: this.config.style.shadowOpacity,
+			strokeScaleEnabled: false,
+			listening: true,
+			draggable: false,
+			hitFunc: (ctx, shape) => {
+				ctx.beginPath();
+				ctx.rect(0, 0, shape.width(), shape.height());
+				ctx.closePath();
+				ctx.fillStrokeShape(shape);
+			},
+			sceneFunc: (ctx, shape) => {
+				ctx.imageSmoothingEnabled = false;
+				const w = shape.width();
+				const h = shape.height();
+				const rWant = shape.getParent()?.getAttrs().isExpanded ? widthContracted / 2 : shape.width() / 2;
+				const r = Math.min(rWant, w / 2, h / 2);
+				ctx.beginPath();
+				ctx.moveTo(r, 0);
+				ctx.lineTo(w - r, 0);
+				ctx.arcTo(w, 0, w, r, r);
+				ctx.lineTo(w, h - r);
+				ctx.arcTo(w, h, w - r, h, r);
+				ctx.lineTo(0, h);
+				ctx.lineTo(0, r);
+				ctx.arcTo(0, 0, r, 0, r);
+				ctx.closePath();
+				ctx.fillStrokeShape(shape);
+			}
+		});
+		commentNode.add(background);
+		const internalCircleBigName = new konva.default.Circle({
+			id: `${id}-circle-big-name`,
+			x: widthContracted / 2,
+			y: -(heightContracted / 2),
+			fill: commentParams.userBackgroundColor ?? "#0000FF",
+			radius: widthContracted / 2 - 2 * circlePaddingContracted,
+			listening: false,
+			draggable: false
+		});
+		internalCircleBigName.hide();
+		commentNode.add(internalCircleBigName);
+		const internalBigName = new konva.default.Text({
+			id: `${id}-big-name`,
+			x: circlePaddingContracted,
+			y: -(heightContracted - circlePaddingContracted),
+			text: this.config.model.getUserShortName(commentParams.commentModel),
+			fontFamily: userNameShortFontFamily,
+			fontSize: userNameShortFontSize,
+			fontStyle: userNameShortFontStyle,
+			fill: commentParams.userForegroundColor ?? "#FFFFFF",
+			align: "center",
+			verticalAlign: "middle",
+			width: widthContracted - 2 * circlePaddingContracted,
+			height: heightContracted - 2 * circlePaddingContracted,
+			listening: false,
+			draggable: false
+		});
+		internalBigName.hide();
+		commentNode.add(internalBigName);
+		const internalUserName = new konva.default.Text({
+			id: `${id}-user-name`,
+			x: widthContracted - 2 * circlePaddingContracted + userNameLeftMargin,
+			text: this.config.model.getUserFullName(commentParams.commentModel),
+			wrap: "none",
+			ellipsis: true,
+			fontFamily: userNameFontFamily,
+			fontSize: userNameFontSize,
+			fontStyle: userNameFontStyle,
+			fill: userNameColor,
+			align: "left",
+			verticalAlign: "middle",
+			width: (widthExpanded - (widthContracted - 2 * circlePaddingContracted) - 8) / 2,
+			height: heightContracted - 2 * circlePaddingContracted,
+			listening: false,
+			draggable: false
+		});
+		internalUserName.hide();
+		commentNode.add(internalUserName);
+		const commentDate = this.config.formatDate(this.config.model.getDate(commentParams.commentModel));
+		const internalDate = new konva.default.Text({
+			id: `${id}-date`,
+			x: widthContracted - 2 * circlePaddingContracted + userNameLeftMargin + (widthExpanded - (widthContracted - 2 * circlePaddingContracted) - 8) / 2,
+			text: commentDate,
+			ellipsis: true,
+			fontFamily: dateFontFamily,
+			fontStyle: dateFontStyle,
+			fontSize: dateFontSize,
+			fill: dateColor,
+			align: "left",
+			verticalAlign: "middle",
+			width: (widthExpanded - (widthContracted - 2 * circlePaddingContracted) - 8) / 2,
+			height: heightContracted - 2 * circlePaddingContracted,
+			listening: false,
+			draggable: false
+		});
+		internalDate.hide();
+		commentNode.add(internalDate);
+		const dateWidth = internalDate.measureSize(commentDate);
+		internalDate.setAttrs({
+			x: widthExpanded - circlePaddingContracted - dateWidth.width - userNameLeftMargin,
+			width: dateWidth.width
+		});
+		internalUserName.setAttrs({ width: widthExpanded - (widthContracted - 2 * circlePaddingContracted) - userNameLeftMargin - dateLeftMargin - dateWidth.width });
+		const commentContent = this.config.model.getContent(commentParams.commentModel);
+		const internalComment = new TextWithMaxLines({
+			id: `${id}-comment`,
+			x: widthContracted - 2 * circlePaddingContracted + userNameLeftMargin,
+			text: commentContent,
+			wrap: "word",
+			ellipsis: true,
+			fontFamily: contentFontFamily,
+			fontSize: contentFontSize,
+			maxLines: contentMaxLines,
+			fontStyle: contentFontStyle,
+			lineHeight: 1.2,
+			fill: contentColor,
+			align: "left",
+			verticalAlign: "top",
+			width: widthExpanded - (widthContracted - 2 * circlePaddingContracted) - userNameLeftMargin - dateLeftMargin,
+			height: heightContracted - 2 * circlePaddingContracted,
+			listening: false,
+			draggable: false
+		});
+		internalComment.hide();
+		commentNode.add(internalComment);
+		const expandedHeight = internalCircleBigName.getClientRect().height + internalComment.getClientRect().height + contentBottomMargin;
+		internalUserName.setAttrs({ y: -expandedHeight + circlePaddingContracted });
+		internalDate.setAttrs({ y: -expandedHeight + circlePaddingContracted });
+		internalComment.setAttrs({ y: -expandedHeight + circlePaddingContracted + heightContracted - contentTopMargin });
+		commentNode.getTransformerProperties = () => {
+			const baseConfig = this.defaultGetTransformerProperties({});
+			return {
+				...baseConfig,
+				resizeEnabled: false,
+				rotateEnabled: false,
+				enabledAnchors: [],
+				borderStrokeWidth: 0,
+				padding: 0
+			};
+		};
+		commentNode.allowedAnchors = () => {
+			return [];
+		};
+		commentNode.on("dragstart", (e) => {
+			this.contractNode(e.target);
+			e.target.setAttrs({ isDragging: true });
+			this.onUpdate(e.target, {});
+		});
+		commentNode.on("dragend", (e) => {
+			e.target.setAttrs({ isDragging: false });
+			this.onUpdate(e.target, {});
+			this.normalizeNodeSize(e.target);
+			this.instance.emitEvent("onCommentDragEnd", { node: e.target });
+		});
+		commentNode.on("pointerup", (e) => {
+			const node = e.target.getParent();
+			if (this.commentDomVisible) {
+				const nodeToClose = this.instance.getStage().findOne(`#${this.commentDomVisibleId}`);
+				if (nodeToClose) {
+					this.closeCommentDOM(nodeToClose);
+					this.contractNode(nodeToClose);
+				}
+			}
+			this.openCommentDOM(node);
+		});
+		commentNode.on("pointermove", (e) => {
+			const stage$1 = this.instance.getStage();
+			stage$1.container().style.cursor = "pointer";
+			e.cancelBubble = true;
+		});
+		commentNode.on("pointerenter", (e) => {
+			const node = e.target.getParent();
+			const commentAction = node.getAttrs().commentAction;
+			if (commentAction !== WEAVE_COMMENT_NODE_ACTION.IDLE) return;
+			if (this.commentDomVisible && this.commentDomVisibleId === node.getAttrs().id) return;
+			node.setAttrs({ isHovered: true });
+			this.expandNode(node);
+		});
+		commentNode.on("pointerleave", (e) => {
+			const node = e.target.getParent();
+			const commentAction = node.getAttrs().commentAction;
+			if (commentAction !== WEAVE_COMMENT_NODE_ACTION.IDLE) return;
+			if (this.commentDomVisible && this.commentDomVisibleId === node.getAttrs().id) return;
+			node.setAttrs({ isHovered: false });
+			this.contractNode(node);
+		});
+		const stage = this.instance.getStage();
+		stage?.on("scaleXChange scaleYChange", () => {
+			this.normalizeNodeSize(commentNode);
+		});
+		return commentNode;
+	}
+	onUpdate(nodeInstance, nextProps) {
+		const commentNode = nodeInstance;
+		commentNode.setAttrs({ ...nextProps });
+		const commentAction = commentNode.getAttrs().commentAction;
+		if (this.config.model.getStatus(commentNode.getAttrs()?.commentModel) === "resolved" && !commentNode.getAttrs().isExpanded && commentNode.getAttrs().commentAction !== WEAVE_COMMENT_NODE_ACTION.VIEWING) commentNode.setAttrs({ opacity: .5 });
+		else commentNode.setAttrs({ opacity: 1 });
+		if (this.showResolved && this.config.model.getStatus(commentNode.getAttrs()?.commentModel) === WEAVE_COMMENT_STATUS.RESOLVED) commentNode.show();
+		if (!this.showResolved && this.config.model.getStatus(commentNode.getAttrs()?.commentModel) === WEAVE_COMMENT_STATUS.RESOLVED) commentNode.hide();
+		const background = commentNode.findOne(`#${commentNode.id()}-bg`);
+		if (background && commentNode.getAttrs().commentAction === WEAVE_COMMENT_NODE_ACTION.VIEWING) background.setAttrs({
+			stroke: this.config.style.viewing.stroke,
+			strokeWidth: this.config.style.viewing.strokeWidth
+		});
+		if (background && commentNode.getAttrs().commentAction === WEAVE_COMMENT_NODE_ACTION.CREATING) background.setAttrs({
+			stroke: this.config.style.creating.stroke,
+			strokeWidth: this.config.style.creating.strokeWidth
+		});
+		if (background && commentNode.getAttrs().commentAction === WEAVE_COMMENT_NODE_ACTION.IDLE) background.setAttrs({
+			stroke: this.config.style.stroke,
+			strokeWidth: this.config.style.strokeWidth
+		});
+		if (background && commentNode.getAttrs().isDragging) background.setAttrs({
+			stroke: this.config.style.viewing.stroke,
+			strokeWidth: this.config.style.viewing.strokeWidth
+		});
+		if (commentAction === WEAVE_COMMENT_NODE_ACTION.CREATING) {
+			const commentDomElement = this.createCommentDOM(commentNode);
+			commentNode.setAttrs({ commentAction: WEAVE_COMMENT_NODE_ACTION.CREATING });
+			this.commentDomAction = WEAVE_COMMENT_NODE_ACTION.CREATING;
+			this.commentDomVisibleId = commentNode.id();
+			this.commentDomVisible = true;
+			this.config.createComment(commentDomElement, commentNode, (node, content, action) => {
+				this.finishCreateCommentDOM(node);
+				if (action === WEAVE_COMMENT_CREATE_ACTION.CLOSE) {
+					this.onDestroy(node);
+					this.instance.emitEvent("onCommentFinishCreate", {
+						node,
+						action
+					});
+					return;
+				}
+				if (action === WEAVE_COMMENT_CREATE_ACTION.CREATE && content !== "") {
+					this.instance.emitEvent("onCommentCreate", {
+						node,
+						position: {
+							x: node.x(),
+							y: node.y()
+						},
+						content
+					});
+					this.onUpdate(node, {
+						commentModel: this.config.model.setContent(node.getAttrs().commentModel ?? {}, content),
+						commentAction: WEAVE_COMMENT_NODE_ACTION.IDLE
+					});
+					this.contractNode(node);
+					this.instance.emitEvent("onCommentFinishCreate", {
+						node,
+						action
+					});
+				}
+			});
+			this.normalizeNodeSize(commentNode);
+			return;
+		}
+		if (commentAction === WEAVE_COMMENT_NODE_ACTION.IDLE) {
+			const internalRect = commentNode.findOne(`#${commentNode.id()}-bg`);
+			internalRect?.setAttrs({ fill: "#FFFFFF" });
+			const internalCircleBigName = commentNode.findOne(`#${commentNode.id()}-circle-big-name`);
+			internalCircleBigName?.show();
+			const internalBigName = commentNode.findOne(`#${commentNode.id()}-big-name`);
+			internalBigName?.show();
+			this.normalizeNodeSize(commentNode);
+			return;
+		}
+		this.normalizeNodeSize(commentNode);
+	}
+	onDestroy(nodeInstance) {
+		nodeInstance.destroy();
+	}
+	expandNode(commentNode) {
+		const widthExpanded = this.config.style.expanded.width;
+		const circlePaddingContracted = this.config.style.contracted.circlePadding;
+		const internalCircleBigName = commentNode.findOne(`#${commentNode.id()}-circle-big-name`);
+		const internalComment = commentNode.findOne(`#${commentNode.id()}-comment`);
+		const heightExpanded = (internalCircleBigName?.getClientRect().height ?? 0) + (internalComment?.getClientRect().height ?? 0) + 12;
+		const background = commentNode.findOne(`#${commentNode.id()}-bg`);
+		background?.setAttrs({
+			y: -heightExpanded,
+			width: widthExpanded,
+			height: heightExpanded
+		});
+		internalCircleBigName?.setAttrs({ y: -heightExpanded + circlePaddingContracted * 2 + internalCircleBigName.radius() });
+		const internalBigName = commentNode.findOne(`#${commentNode.id()}-big-name`);
+		internalBigName?.setAttrs({ y: -heightExpanded + circlePaddingContracted });
+		const internalUserName = commentNode.findOne(`#${commentNode.id()}-user-name`);
+		internalUserName?.show();
+		const internalDateName = commentNode.findOne(`#${commentNode.id()}-date`);
+		internalDateName?.show();
+		internalComment?.show();
+		commentNode.setAttrs({
+			isExpanded: true,
+			opacity: 1
+		});
+		const actualZIndex = commentNode.zIndex();
+		commentNode.setAttrs({ contractedZIndex: actualZIndex });
+		commentNode.moveToTop();
+		this.normalizeNodeSize(commentNode);
+	}
+	contractNode(commentNode) {
+		const widthContracted = this.config.style.contracted.width;
+		const heightContracted = this.config.style.contracted.height;
+		const circlePaddingContracted = this.config.style.contracted.circlePadding;
+		const background = commentNode.findOne(`#${commentNode.id()}-bg`);
+		background?.setAttrs({
+			y: -heightContracted,
+			width: widthContracted,
+			height: heightContracted
+		});
+		const internalCircleBigName = commentNode.findOne(`#${commentNode.id()}-circle-big-name`);
+		internalCircleBigName?.setAttrs({ y: -(heightContracted / 2) });
+		const internalBigName = commentNode.findOne(`#${commentNode.id()}-big-name`);
+		internalBigName?.setAttrs({ y: -(heightContracted - circlePaddingContracted) });
+		const internalUserName = commentNode.findOne(`#${commentNode.id()}-user-name`);
+		internalUserName?.hide();
+		const internalDateName = commentNode.findOne(`#${commentNode.id()}-date`);
+		internalDateName?.hide();
+		const internalComment = commentNode.findOne(`#${commentNode.id()}-comment`);
+		internalComment?.hide();
+		if (this.config.model.getStatus(commentNode.getAttrs()?.commentModel) === WEAVE_COMMENT_STATUS.RESOLVED && commentNode.getAttrs().commentAction !== WEAVE_COMMENT_NODE_ACTION.VIEWING) commentNode.setAttrs({ opacity: .5 });
+		commentNode.setAttrs({ isExpanded: false });
+		if (commentNode.getAttrs().contractedZIndex) {
+			commentNode.zIndex(commentNode.getAttrs().contractedZIndex);
+			commentNode.setAttrs({ contractedZIndex: void 0 });
+		}
+		this.normalizeNodeSize(commentNode);
+	}
+	finishCreateCommentDOM(commentNode) {
+		this.instance.removeEventListener("onZoomChange", this.onZoomChangeHandler(commentNode).bind(this));
+		this.instance.removeEventListener("onStageMove", this.onStageMoveHandler(commentNode).bind(this));
+		const superContainer = document.getElementById(`${commentNode.id()}_supercontainer`);
+		if (!superContainer) return;
+		superContainer.remove();
+		this.commentDomAction = null;
+		this.commentDomVisibleId = null;
+		this.commentDomVisible = false;
+	}
+	setCommentDOMPosition(commentNode, commentAction) {
+		const stage = this.instance.getStage();
+		const rect = commentNode.getClientRect({ relativeTo: stage });
+		const scaleX = stage.scaleX();
+		const scaleY = stage.scaleY();
+		const stagePos = stage.position();
+		let paddingX = 8;
+		let paddingY = 0;
+		if (commentAction === WEAVE_COMMENT_NODE_ACTION.CREATING) {
+			paddingX = this.config.style.creating.paddingX;
+			paddingY = this.config.style.creating.paddingY;
+		}
+		if (commentAction === WEAVE_COMMENT_NODE_ACTION.VIEWING) {
+			paddingX = this.config.style.viewing.paddingX;
+			paddingY = this.config.style.viewing.paddingY;
+		}
+		const x = stagePos.x + rect.x * scaleX + rect.width * scaleX + paddingX;
+		const y = stagePos.y + rect.y * scaleY + paddingY;
+		const position = {
+			x,
+			y
+		};
+		const container = document.getElementById(`${commentNode.id()}_container`);
+		if (!container) return;
+		container.style.position = "absolute";
+		container.style.top = position.y + "px";
+		container.style.left = position.x + "px";
+	}
+	createCommentDOM(commentNode) {
+		const stage = this.instance.getStage();
+		const superContainer = document.createElement("div");
+		superContainer.id = `${commentNode.id()}_supercontainer`;
+		superContainer.style.position = "absolute";
+		superContainer.style.top = "0px";
+		superContainer.style.left = "0px";
+		superContainer.style.bottom = "0px";
+		superContainer.style.right = "0px";
+		superContainer.style.overflow = "hidden";
+		superContainer.style.pointerEvents = "none";
+		const container = document.createElement("div");
+		container.id = `${commentNode.id()}_container`;
+		superContainer.appendChild(container);
+		stage.container().appendChild(superContainer);
+		this.setCommentDOMPosition(commentNode, commentNode.getAttrs().commentAction);
+		this.instance.addEventListener("onZoomChange", this.onZoomChangeHandler(commentNode).bind(this));
+		this.instance.addEventListener("onStageMove", this.onStageMoveHandler(commentNode).bind(this));
+		return container;
+	}
+	onZoomChangeHandler = (commentNode) => () => {
+		if (!this.commentDomVisible) return;
+		const node = this.instance.getStage().findOne(`#${commentNode.id()}`);
+		if (node) this.setCommentDOMPosition(node, commentNode.getAttrs().commentAction);
+	};
+	normalizeNodeSize(node) {
+		const abs = node.getAbsoluteScale();
+		node.scale({
+			x: node.scaleX() / abs.x,
+			y: node.scaleY() / abs.y
+		});
+		if (node instanceof konva.default.Group) node.getChildren().forEach((child) => this.normalizeNodeSize(child));
+	}
+	onStageMoveHandler = (commentNode) => () => {
+		if (!this.commentDomVisible) return;
+		const node = this.instance.getStage().findOne(`#${commentNode.id()}`);
+		if (node) this.setCommentDOMPosition(node, commentNode.getAttrs().commentAction);
+	};
+	openCommentDOM(commentNode) {
+		this.contractNode(commentNode);
+		commentNode.setAttrs({ commentAction: WEAVE_COMMENT_NODE_ACTION.VIEWING });
+		this.onUpdate(commentNode, { commentAction: WEAVE_COMMENT_NODE_ACTION.VIEWING });
+		this.commentDomAction = WEAVE_COMMENT_NODE_ACTION.VIEWING;
+		this.commentDomVisibleId = commentNode.id();
+		this.commentDomVisible = true;
+		const commentDomElement = this.createCommentDOM(commentNode);
+		this.instance.emitEvent("onCommentView", { node: commentNode });
+		this.config.viewComment(commentDomElement, commentNode, (nodeF, content, action) => {
+			switch (action) {
+				case WEAVE_COMMENT_VIEW_ACTION.REPLY: break;
+				case WEAVE_COMMENT_VIEW_ACTION.MARK_RESOLVED: {
+					this.finishCreateCommentDOM(nodeF);
+					this.onUpdate(nodeF, { commentModel: this.config.model.setMarkResolved(nodeF.getAttrs().commentModel ?? {}) });
+					break;
+				}
+				case WEAVE_COMMENT_VIEW_ACTION.EDIT: {
+					nodeF.setAttrs({ content });
+					this.onUpdate(nodeF, { commentAction: WEAVE_COMMENT_NODE_ACTION.IDLE });
+					break;
+				}
+				case WEAVE_COMMENT_VIEW_ACTION.DELETE: {
+					this.finishCreateCommentDOM(nodeF);
+					nodeF.destroy();
+					break;
+				}
+				case WEAVE_COMMENT_VIEW_ACTION.CLOSE: {
+					this.finishCreateCommentDOM(nodeF);
+					this.contractNode(nodeF);
+					nodeF.setAttrs({ commentAction: WEAVE_COMMENT_NODE_ACTION.IDLE });
+					this.onUpdate(nodeF, { commentAction: WEAVE_COMMENT_NODE_ACTION.IDLE });
+					this.instance.emitEvent("onCommentFinishCreate", {
+						node: nodeF,
+						action
+					});
+					break;
+				}
+				default: break;
+			}
+		});
+	}
+	closeCommentDOM(commentNode) {
+		this.finishCreateCommentDOM(commentNode);
+		if (commentNode.getAttrs().isHovered) this.expandNode(commentNode);
+		commentNode.setAttrs({ commentAction: WEAVE_COMMENT_NODE_ACTION.IDLE });
+		this.onUpdate(commentNode, { commentAction: WEAVE_COMMENT_NODE_ACTION.IDLE });
+	}
+	afterCreatePersist(commentNode, comment) {
+		commentNode.setAttrs({ commentModel: comment });
+		this.normalizeNodeSize(commentNode);
+	}
+	open(commentNode) {
+		this.openCommentDOM(commentNode);
+	}
+	focusOn(nodeId, duration = .5) {
+		if (this.commentDomVisible && this.commentDomVisibleId) {
+			const commentNode = this.instance.getStage().findOne(`#${this.commentDomVisibleId}`);
+			if (commentNode) {
+				this.closeCommentDOM(commentNode);
+				this.contractNode(commentNode);
+			}
+		}
+		const node = this.instance.getStage().findOne(`#${nodeId}`);
+		if (node) {
+			const stage = this.instance.getStage();
+			const stageWidth = stage.width();
+			const stageHeight = stage.height();
+			const scale = stage.scaleX();
+			const box = node.getClientRect({ relativeTo: stage });
+			const nodeCenterX = box.x + box.width / 2;
+			const nodeCenterY = box.y + box.height / 2;
+			const targetX = stageWidth / 2 - nodeCenterX * scale;
+			const targetY = stageHeight / 2 - nodeCenterY * scale;
+			const tween = new konva.default.Tween({
+				node: stage,
+				duration,
+				x: targetX,
+				y: targetY,
+				easing: konva.default.Easings.EaseInOut,
+				onFinish: () => {
+					this.openCommentDOM(node);
+				}
+			});
+			tween.play();
+		}
+	}
+	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/plugins/stage-zoom/constants.ts
 const WEAVE_STAGE_ZOOM_TYPE = {
@@ -25817,7 +26535,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 				const shadowHost = getTopmostShadowHost(stage.container());
 				if (shadowHost) elementUnderMouse = shadowHost.elementFromPoint(mouseX, mouseY);
 			}
-			if (!this.enabled || !performZoom || getClosestParentWithId(elementUnderMouse) !== stage.container()) return;
+			if (!this.enabled || !performZoom || this.instance.getClosestParentWithWeaveId(elementUnderMouse) !== stage.container()) return;
 			e.preventDefault();
 			const delta = e.deltaY > 0 ? 1 : -1;
 			this.zoomVelocity += delta;
@@ -26029,7 +26747,7 @@ var WeaveMoveToolAction = class extends WeaveAction {
 	}
 	setupEvents() {
 		const stage = this.instance.getStage();
-		stage.container().addEventListener("keydown", (e) => {
+		window.addEventListener("keydown", (e) => {
 			if (e.key === "Escape" && this.instance.getActiveAction() === MOVE_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
@@ -26165,6 +26883,10 @@ var WeaveEraserToolAction = class extends WeaveAction {
 	}
 	setupEvents() {
 		const stage = this.instance.getStage();
+		stage.on("pointermove", () => {
+			if (this.state === ERASER_TOOL_STATE.IDLE) return;
+			this.setCursor();
+		});
 		stage.on("pointerclick", () => {
 			if (!this.erasing) return;
 			const nodeIntersected = this.instance.pointIntersectsElement();
@@ -26180,7 +26902,7 @@ var WeaveEraserToolAction = class extends WeaveAction {
 				}
 			}
 		});
-		stage.container().addEventListener("keydown", (e) => {
+		window.addEventListener("keydown", (e) => {
 			if (e.key === "Escape" && this.instance.getActiveAction() === ERASER_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
@@ -26192,9 +26914,8 @@ var WeaveEraserToolAction = class extends WeaveAction {
 		this.state = state;
 	}
 	setEraser() {
-		const stage = this.instance.getStage();
-		stage.container().style.cursor = "crosshair";
-		stage.container().focus();
+		this.setCursor();
+		this.setFocusStage();
 		this.erasing = true;
 		this.setState(ERASER_TOOL_STATE.ERASING);
 	}
@@ -26223,6 +26944,16 @@ var WeaveEraserToolAction = class extends WeaveAction {
 		}
 		this.setState(ERASER_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
@@ -26269,7 +27000,7 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 	}
 	setupEvents() {
 		const stage = this.instance.getStage();
-		stage.container().addEventListener("keydown", (e) => {
+		window.addEventListener("keydown", (e) => {
 			if (e.key === "Enter" && this.instance.getActiveAction() === RECTANGLE_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
@@ -26279,6 +27010,10 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 				return;
 			}
 		});
+		stage.on("pointermove", () => {
+			if (this.state === RECTANGLE_TOOL_STATE.IDLE) return;
+			this.setCursor();
+		});
 		stage.on("pointerdown", (e) => {
 			this.setTapStart(e);
 			this.pointers.set(e.evt.pointerId, {
@@ -26292,6 +27027,8 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 			if (this.state === RECTANGLE_TOOL_STATE.ADDING) this.handleAdding();
 		});
 		stage.on("pointermove", (e) => {
+			if (this.state === RECTANGLE_TOOL_STATE.IDLE) return;
+			this.setCursor();
 			if (!this.isPressed(e)) return;
 			if (!this.pointers.has(e.evt.pointerId)) return;
 			if (this.pointers.size === 2 && this.instance.getActiveAction() === RECTANGLE_TOOL_ACTION_NAME) {
@@ -26312,9 +27049,8 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 		this.state = state;
 	}
 	addRectangle() {
-		const stage = this.instance.getStage();
-		stage.container().style.cursor = "crosshair";
-		stage.container().focus();
+		this.setCursor();
+		this.setFocusStage();
 		this.instance.emitEvent("onAddingRectangle");
 		this.clickPoint = null;
 		this.setState(RECTANGLE_TOOL_STATE.ADDING);
@@ -26417,6 +27153,16 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 		this.clickPoint = null;
 		this.setState(RECTANGLE_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
@@ -26463,7 +27209,7 @@ var WeaveEllipseToolAction = class extends WeaveAction {
 	}
 	setupEvents() {
 		const stage = this.instance.getStage();
-		stage.container().addEventListener("keydown", (e) => {
+		window.addEventListener("keydown", (e) => {
 			if (e.key === "Enter" && this.instance.getActiveAction() === ELLIPSE_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
@@ -26489,6 +27235,8 @@ var WeaveEllipseToolAction = class extends WeaveAction {
 			}
 		});
 		stage.on("pointermove", (e) => {
+			if (this.state === ELLIPSE_TOOL_STATE.IDLE) return;
+			this.setCursor();
 			if (!this.isPressed(e)) return;
 			if (!this.pointers.has(e.evt.pointerId)) return;
 			if (this.pointers.size === 2 && this.instance.getActiveAction() === ELLIPSE_TOOL_ACTION_NAME) {
@@ -26515,9 +27263,8 @@ var WeaveEllipseToolAction = class extends WeaveAction {
 		this.state = state;
 	}
 	addEllipse() {
-		const stage = this.instance.getStage();
-		stage.container().style.cursor = "crosshair";
-		stage.container().focus();
+		this.setCursor();
+		this.setFocusStage();
 		this.instance.emitEvent("onAddingEllipse");
 		this.clickPoint = null;
 		this.setState(ELLIPSE_TOOL_STATE.ADDING);
@@ -26623,6 +27370,16 @@ var WeaveEllipseToolAction = class extends WeaveAction {
 		this.clickPoint = null;
 		this.setState(ELLIPSE_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
@@ -26670,7 +27427,7 @@ var WeavePenToolAction = class extends WeaveAction {
 	}
 	setupEvents() {
 		const stage = this.instance.getStage();
-		stage.container().addEventListener("keydown", (e) => {
+		window.addEventListener("keydown", (e) => {
 			if (e.key === "Enter" && this.instance.getActiveAction() === PEN_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
@@ -26694,6 +27451,8 @@ var WeavePenToolAction = class extends WeaveAction {
 			if (this.tempMainLineNode && this.state === PEN_TOOL_STATE.ADDING) this.state = PEN_TOOL_STATE.DEFINING_SIZE;
 		});
 		stage.on("pointermove", () => {
+			if (this.state === PEN_TOOL_STATE.IDLE) return;
+			this.setCursor();
 			if (this.pointers.size === 2 && this.instance.getActiveAction() === PEN_TOOL_ACTION_NAME) {
 				this.state = PEN_TOOL_STATE.ADDING;
 				return;
@@ -26710,9 +27469,8 @@ var WeavePenToolAction = class extends WeaveAction {
 		this.state = state;
 	}
 	addLine() {
-		const stage = this.instance.getStage();
-		stage.container().style.cursor = "crosshair";
-		stage.container().focus();
+		this.setCursor();
+		this.setFocusStage();
 		this.instance.emitEvent("onAddingPen");
 		this.tempPoint = void 0;
 		this.tempNextPoint = void 0;
@@ -26865,6 +27623,16 @@ var WeavePenToolAction = class extends WeaveAction {
 		this.clickPoint = null;
 		this.setState(PEN_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
@@ -26910,9 +27678,7 @@ var WeaveBrushToolAction = class extends WeaveAction {
 	}
 	setupEvents() {
 		const stage = this.instance.getStage();
-		stage.container().tabIndex = 1;
-		stage.container().focus();
-		stage.container().addEventListener("keydown", (e) => {
+		window.addEventListener("keydown", (e) => {
 			if (e.key === "Enter" && this.instance.getActiveAction() === BRUSH_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
@@ -26931,9 +27697,10 @@ var WeaveBrushToolAction = class extends WeaveAction {
 		};
 		stage.on("pointerdown", handlePointerDown);
 		const handlePointerMove = (e) => {
+			if (this.state === BRUSH_TOOL_STATE.INACTIVE) return;
+			this.setCursor();
 			if (this.state !== BRUSH_TOOL_STATE.DEFINE_STROKE) return;
 			if (this.getZoomPlugin()?.isPinching()) return;
-			stage.container().style.cursor = "crosshair";
 			const pointPressure = this.getEventPressure(e);
 			this.handleMovement(pointPressure);
 			e.evt.stopPropagation();
@@ -27027,7 +27794,6 @@ var WeaveBrushToolAction = class extends WeaveAction {
 		}
 	}
 	handleEndStroke() {
-		const stage = this.instance.getStage();
 		const tempStroke = this.instance.getStage().findOne(`#${this.strokeId}`);
 		if (tempStroke) {
 			const nodeHandler = this.instance.getNodeHandler("stroke");
@@ -27051,9 +27817,8 @@ var WeaveBrushToolAction = class extends WeaveAction {
 				if (tempStroke.getAttrs().strokeElements.length >= 3) this.instance.addNode(nodeHandler.serialize(tempStroke), this.container?.getAttrs().id);
 			}
 			this.clickPoint = null;
-			stage.container().style.cursor = "crosshair";
-			stage.container().tabIndex = 1;
-			stage.container().focus();
+			this.setCursor();
+			this.setFocusStage();
 			this.setState(BRUSH_TOOL_STATE.IDLE);
 		}
 	}
@@ -27073,7 +27838,8 @@ var WeaveBrushToolAction = class extends WeaveAction {
 		this.props = this.initProps();
 		this.setState(BRUSH_TOOL_STATE.IDLE);
 		this.instance.emitEvent("onAddingBrush");
-		stage.container().style.cursor = "crosshair";
+		this.setCursor();
+		this.setFocusStage();
 	}
 	cleanup() {
 		const stage = this.instance.getStage();
@@ -27092,6 +27858,16 @@ var WeaveBrushToolAction = class extends WeaveAction {
 		const zoomPlugin = this.instance.getPlugin("stageZoom");
 		return zoomPlugin;
 	}
+	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
@@ -27127,12 +27903,16 @@ var WeaveTextToolAction = class extends WeaveAction {
 	}
 	setupEvents() {
 		const stage = this.instance.getStage();
-		stage.container().addEventListener("keydown", (e) => {
+		window.addEventListener("keydown", (e) => {
 			if (e.key === "Escape" && this.instance.getActiveAction() === TEXT_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
 			}
 		});
+		stage.on("pointermove", () => {
+			if (this.state === TEXT_TOOL_STATE.IDLE) return;
+			this.setCursor();
+		});
 		stage.on("pointerclick", () => {
 			if (this.state === TEXT_TOOL_STATE.IDLE) return;
 			if (this.state === TEXT_TOOL_STATE.ADDING) {
@@ -27146,14 +27926,13 @@ var WeaveTextToolAction = class extends WeaveAction {
 		this.state = state;
 	}
 	addText() {
-		const stage = this.instance.getStage();
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
 		if (selectionPlugin) {
 			const tr = selectionPlugin.getTransformer();
 			tr.hide();
 		}
-		stage.container().style.cursor = "crosshair";
-		stage.container().focus();
+		this.setCursor();
+		this.setFocusStage();
 		this.instance.emitEvent("onAddingText");
 		this.clickPoint = null;
 		this.setState(TEXT_TOOL_STATE.ADDING);
@@ -27203,6 +27982,16 @@ var WeaveTextToolAction = class extends WeaveAction {
 		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
@@ -27250,7 +28039,7 @@ var WeaveStarToolAction = class extends WeaveAction {
 	}
 	setupEvents() {
 		const stage = this.instance.getStage();
-		stage.container().addEventListener("keydown", (e) => {
+		window.addEventListener("keydown", (e) => {
 			if (e.key === "Enter" && this.instance.getActiveAction() === STAR_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
@@ -27276,6 +28065,8 @@ var WeaveStarToolAction = class extends WeaveAction {
 			}
 		});
 		stage.on("pointermove", (e) => {
+			if (this.state === STAR_TOOL_STATE.IDLE) return;
+			this.setCursor();
 			if (!this.isPressed(e)) return;
 			if (!this.pointers.has(e.evt.pointerId)) return;
 			if (this.pointers.size === 2 && this.instance.getActiveAction() === STAR_TOOL_ACTION_NAME) {
@@ -27302,9 +28093,8 @@ var WeaveStarToolAction = class extends WeaveAction {
 		this.state = state;
 	}
 	addStar() {
-		const stage = this.instance.getStage();
-		stage.container().style.cursor = "crosshair";
-		stage.container().focus();
+		this.setCursor();
+		this.setFocusStage();
 		this.instance.emitEvent("onAddingStar");
 		this.clickPoint = null;
 		this.setState(STAR_TOOL_STATE.ADDING);
@@ -27411,6 +28201,16 @@ var WeaveStarToolAction = class extends WeaveAction {
 		this.clickPoint = null;
 		this.setState(STAR_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
@@ -27463,7 +28263,7 @@ var WeaveArrowToolAction = class extends WeaveAction {
 	}
 	setupEvents() {
 		const stage = this.instance.getStage();
-		stage.container().addEventListener("keydown", (e) => {
+		window.addEventListener("keydown", (e) => {
 			if (e.key === "Enter" && this.instance.getActiveAction() === ARROW_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
@@ -27487,6 +28287,8 @@ var WeaveArrowToolAction = class extends WeaveAction {
 			if (this.tempMainArrowNode && this.state === ARROW_TOOL_STATE.ADDING) this.state = ARROW_TOOL_STATE.DEFINING_SIZE;
 		});
 		stage.on("pointermove", () => {
+			if (this.state === ARROW_TOOL_STATE.IDLE) return;
+			this.setCursor();
 			if (this.pointers.size === 2 && this.instance.getActiveAction() === ARROW_TOOL_ACTION_NAME) {
 				this.state = ARROW_TOOL_STATE.ADDING;
 				return;
@@ -27503,9 +28305,8 @@ var WeaveArrowToolAction = class extends WeaveAction {
 		this.state = state;
 	}
 	addArrow() {
-		const stage = this.instance.getStage();
-		stage.container().style.cursor = "crosshair";
-		stage.container().focus();
+		this.setCursor();
+		this.setFocusStage();
 		this.instance.emitEvent("onAddingArrow");
 		this.tempPoint = void 0;
 		this.tempNextPoint = void 0;
@@ -27658,6 +28459,16 @@ var WeaveArrowToolAction = class extends WeaveAction {
 		this.clickPoint = null;
 		this.setState(ARROW_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
@@ -27703,7 +28514,7 @@ var WeaveRegularPolygonToolAction = class extends WeaveAction {
 	}
 	setupEvents() {
 		const stage = this.instance.getStage();
-		stage.container().addEventListener("keydown", (e) => {
+		window.addEventListener("keydown", (e) => {
 			if (e.key === "Enter" && this.instance.getActiveAction() === REGULAR_POLYGON_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
@@ -27729,6 +28540,8 @@ var WeaveRegularPolygonToolAction = class extends WeaveAction {
 			}
 		});
 		stage.on("pointermove", (e) => {
+			if (this.state === REGULAR_POLYGON_TOOL_STATE.IDLE) return;
+			this.setCursor();
 			if (!this.isPressed(e)) return;
 			if (!this.pointers.has(e.evt.pointerId)) return;
 			if (this.pointers.size === 2 && this.instance.getActiveAction() === REGULAR_POLYGON_TOOL_ACTION_NAME) {
@@ -27755,9 +28568,8 @@ var WeaveRegularPolygonToolAction = class extends WeaveAction {
 		this.state = state;
 	}
 	addRegularPolygon() {
-		const stage = this.instance.getStage();
-		stage.container().style.cursor = "crosshair";
-		stage.container().focus();
+		this.setCursor();
+		this.setFocusStage();
 		this.instance.emitEvent("onAddingRegularPolygon");
 		this.clickPoint = null;
 		this.setState(REGULAR_POLYGON_TOOL_STATE.ADDING);
@@ -27857,6 +28669,16 @@ var WeaveRegularPolygonToolAction = class extends WeaveAction {
 		this.clickPoint = null;
 		this.setState(REGULAR_POLYGON_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
@@ -27894,12 +28716,16 @@ var WeaveFrameToolAction = class extends WeaveAction {
 	}
 	setupEvents() {
 		const stage = this.instance.getStage();
-		stage.container().addEventListener("keydown", (e) => {
+		window.addEventListener("keydown", (e) => {
 			if (e.key === "Escape" && this.instance.getActiveAction() === FRAME_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
 			}
 		});
+		stage.on("pointermove", () => {
+			if (this.state === FRAME_TOOL_STATE.IDLE) return;
+			this.setCursor();
+		});
 		stage.on("pointerclick", () => {
 			if (this.state === FRAME_TOOL_STATE.IDLE) return;
 			if (this.state === FRAME_TOOL_STATE.ADDING) {
@@ -27913,9 +28739,8 @@ var WeaveFrameToolAction = class extends WeaveAction {
 		this.state = state;
 	}
 	addFrame() {
-		const stage = this.instance.getStage();
-		stage.container().style.cursor = "crosshair";
-		stage.container().focus();
+		this.setCursor();
+		this.setFocusStage();
 		this.instance.emitEvent("onAddingFrame");
 		this.frameId = null;
 		this.clickPoint = null;
@@ -27968,6 +28793,16 @@ var WeaveFrameToolAction = class extends WeaveAction {
 		this.clickPoint = null;
 		this.setState(FRAME_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
@@ -28315,6 +29150,271 @@ var WeaveAlignNodesToolAction = class extends WeaveAction {
 	}
 };
 
+//#endregion
+//#region src/actions/comment-tool/constants.ts
+const WEAVE_COMMENT_TOOL_ACTION_NAME = "commentTool";
+const WEAVE_COMMENT_TOOL_LAYER_NAME = "commentsLayer";
+const WEAVE_COMMENT_TOOL_STATE = {
+	["IDLE"]: "idle",
+	["ADDING"]: "adding",
+	["SELECTED_POSITION"]: "selectedPosition",
+	["CREATING_COMMENT"]: "creatingComment",
+	["ADDED"]: "added"
+};
+const WEAVE_COMMENT_TOOL_DEFAULT_CONFIG = { style: { cursor: {
+	add: "crosshair",
+	block: "not-allowed"
+} } };
+
+//#endregion
+//#region src/plugins/comments-renderer/constants.ts
+const WEAVE_COMMENTS_RENDERER_KEY = "commentsRenderer";
+
+//#endregion
+//#region src/actions/comment-tool/comment-tool.ts
+var WeaveCommentToolAction = class extends WeaveAction {
+	initialized = false;
+	onPropsChange = void 0;
+	constructor(params) {
+		super();
+		const { config } = params ?? {};
+		this.config = (0, import_lodash.merge)(WEAVE_COMMENT_TOOL_DEFAULT_CONFIG, config);
+		this.pointers = new Map();
+		this.initialized = false;
+		this.state = WEAVE_COMMENT_TOOL_STATE.IDLE;
+		this.commentId = null;
+		this.clickPoint = null;
+	}
+	getName() {
+		return WEAVE_COMMENT_TOOL_ACTION_NAME;
+	}
+	initProps() {
+		return {
+			colorToken: "#000000",
+			width: 300,
+			height: 300,
+			opacity: 1
+		};
+	}
+	extractCursorUrl(cursor) {
+		const lower = cursor.toLowerCase();
+		const start = lower.indexOf("url(");
+		if (start === -1) return null;
+		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 null;
+		return this.isAllowedUrl(url) ? url : null;
+	}
+	isAllowedUrl(value) {
+		if (/^https?:\/\//i.test(value)) return true;
+		if (/^(javascript|data|blob|ftp):/i.test(value)) return false;
+		return true;
+	}
+	preloadCursors() {
+		const stage = this.instance.getStage();
+		const cursorUrls = [{
+			src: this.extractCursorUrl(this.config.style.cursor.add) ?? "",
+			cursor: this.config.style.cursor.add
+		}, {
+			src: this.extractCursorUrl(this.config.style.cursor.block) ?? "",
+			cursor: this.config.style.cursor.block
+		}];
+		const actualCursor = stage.container().style.cursor;
+		cursorUrls.forEach(({ src, cursor }) => {
+			const img = new Image();
+			img.onload = () => {
+				stage.container().style.cursor = cursor;
+				stage.container().style.cursor = actualCursor;
+			};
+			img.src = src;
+		});
+	}
+	onInit() {
+		this.preloadCursors();
+		const stage = this.instance.getStage();
+		stage.on("pointermove", () => {
+			if (this.state === WEAVE_COMMENT_TOOL_STATE.IDLE) return;
+			this.setCursor();
+		});
+		this.instance.addEventListener("onCommentView", () => {
+			if (this.instance.getActiveAction() !== WEAVE_COMMENT_TOOL_ACTION_NAME) return;
+			this.setState(WEAVE_COMMENT_TOOL_STATE.ADDING);
+		});
+		this.instance.addEventListener("onCommentFinishCreate", ({ action }) => {
+			if (this.instance.getActiveAction() !== WEAVE_COMMENT_TOOL_ACTION_NAME) return;
+			if (this.state !== WEAVE_COMMENT_TOOL_STATE.CREATING_COMMENT) {
+				this.setCursor();
+				return;
+			}
+			if (action !== "create") {
+				this.setState(WEAVE_COMMENT_TOOL_STATE.ADDING);
+				this.setCursor();
+				return;
+			}
+			this.setCursor();
+			this.commentId = null;
+			this.clickPoint = null;
+			this.setState(WEAVE_COMMENT_TOOL_STATE.ADDING);
+		});
+	}
+	setupEvents() {
+		const stage = this.instance.getStage();
+		const commentNodeHandler = this.instance.getNodeHandler("comment");
+		window.addEventListener("keydown", (e) => {
+			if (this.instance.getActiveAction() !== WEAVE_COMMENT_TOOL_ACTION_NAME) return;
+			if (commentNodeHandler?.isCommentViewing()) return;
+			if (e.key === "Escape" && this.state == WEAVE_COMMENT_TOOL_STATE.ADDING) {
+				this.cancelAction();
+				return;
+			}
+			if (e.key === "Escape" && this.state === WEAVE_COMMENT_TOOL_STATE.CREATING_COMMENT) this.setState(WEAVE_COMMENT_TOOL_STATE.ADDING);
+		});
+		stage.on("pointermove", (e) => {
+			if (this.state === WEAVE_COMMENT_TOOL_STATE.IDLE) return;
+			if (commentNodeHandler?.isCommentViewing()) {
+				this.setCursorBlock();
+				return;
+			}
+			if (commentNodeHandler?.isCommentCreating()) {
+				this.setCursorBlock();
+				return;
+			}
+			const isCommentNode = this.isCommentNode(e.target);
+			if (isCommentNode) return;
+			this.setCursor();
+		});
+		stage.on("pointerdown", (e) => {
+			this.setTapStart(e);
+			this.pointers.set(e.evt.pointerId, {
+				x: e.evt.clientX,
+				y: e.evt.clientY
+			});
+			if (this.state === WEAVE_COMMENT_TOOL_STATE.IDLE) return;
+			if (commentNodeHandler?.isCommentViewing()) return;
+			if (commentNodeHandler?.isCommentCreating()) return;
+			const isCommentNode = this.isCommentNode(e.target);
+			if (!isCommentNode && this.pointers.size === 1 && this.instance.getActiveAction() === WEAVE_COMMENT_TOOL_ACTION_NAME && this.state === WEAVE_COMMENT_TOOL_STATE.ADDING) {
+				this.setCursor();
+				this.setState(WEAVE_COMMENT_TOOL_STATE.SELECTED_POSITION);
+				return;
+			}
+			if (isCommentNode && this.instance.getActiveAction() === WEAVE_COMMENT_TOOL_ACTION_NAME) this.setState(WEAVE_COMMENT_TOOL_STATE.ADDING);
+		});
+		stage.on("pointerup", (e) => {
+			this.pointers.delete(e.evt.pointerId);
+			if (this.state === WEAVE_COMMENT_TOOL_STATE.IDLE) return;
+			if (commentNodeHandler?.isCommentViewing()) return;
+			const isCommentNode = this.isCommentNode(e.target);
+			if (!isCommentNode && this.state === WEAVE_COMMENT_TOOL_STATE.SELECTED_POSITION) {
+				this.handleAdding();
+				e.cancelBubble = true;
+			}
+			if (isCommentNode && this.instance.getActiveAction() === WEAVE_COMMENT_TOOL_ACTION_NAME) this.setState(WEAVE_COMMENT_TOOL_STATE.ADDING);
+		});
+		this.initialized = true;
+	}
+	setState(state) {
+		this.state = state;
+	}
+	enableAddingComment() {
+		const commentNodeHandler = this.instance.getNodeHandler("comment");
+		if (commentNodeHandler) {
+			const commentVisible = commentNodeHandler?.isCommentViewing() || commentNodeHandler?.isCommentCreating();
+			if (commentVisible) this.setCursorBlock();
+			if (!commentVisible) this.setCursor();
+		} else this.setCursor();
+		this.instance.emitEvent("onStartAddingComment");
+		this.commentId = null;
+		this.clickPoint = null;
+		this.setState(WEAVE_COMMENT_TOOL_STATE.ADDING);
+	}
+	handleAdding() {
+		const { mousePoint } = this.instance.getMousePointer();
+		this.clickPoint = mousePoint;
+		this.commentId = v4_default();
+		const nodeHandler = this.instance.getNodeHandler("comment");
+		if (nodeHandler) {
+			const node = nodeHandler.onRender({
+				id: this.commentId,
+				x: this.clickPoint.x,
+				y: this.clickPoint.y,
+				userForegroundColor: this.config.getUserForegroundColor(this.config.getUser()),
+				userBackgroundColor: this.config.getUserBackgroundColor(this.config.getUser()),
+				content: "",
+				commentModel: this.config.model.getCreateModel()
+			});
+			node.moveToTop();
+			this.getCommentsLayer()?.add(node);
+			nodeHandler.onUpdate(node, { commentAction: WEAVE_COMMENT_NODE_ACTION.CREATING });
+			this.setState(WEAVE_COMMENT_TOOL_STATE.CREATING_COMMENT);
+		}
+	}
+	trigger(cancelAction) {
+		if (!this.instance) throw new Error("Instance not defined");
+		if (!this.initialized) this.setupEvents();
+		const stage = this.instance.getStage();
+		stage.container().tabIndex = 1;
+		stage.container().focus();
+		this.cancelAction = cancelAction;
+		this.props = this.initProps();
+		this.enableAddingComment();
+	}
+	cleanup() {
+		const stage = this.instance.getStage();
+		stage.container().style.cursor = "default";
+		this.instance.emitEvent("onFinishAddingComment");
+		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (selectionPlugin) {
+			const node = stage.findOne(`#${this.commentId}`);
+			if (node) selectionPlugin.setSelectedNodes([node]);
+			this.instance.triggerAction("selectionTool");
+		}
+		this.commentId = null;
+		this.clickPoint = null;
+		this.setState(WEAVE_COMMENT_TOOL_STATE.IDLE);
+	}
+	getCommentsLayer() {
+		const commentsRendererPlugin = this.instance.getPlugin(WEAVE_COMMENTS_RENDERER_KEY);
+		if (commentsRendererPlugin) return commentsRendererPlugin.getCommentsLayer();
+		return null;
+	}
+	isCommentNode(node) {
+		if (node.getAttrs().name?.includes("comment")) return true;
+		if (node.getParent() && node.getParent() === this.instance.getStage()) return false;
+		if (node.getParent() && node.getParent() !== this.instance.getStage()) return this.isCommentNode(node.getParent());
+		return false;
+	}
+	setCursor() {
+		const stage = this.instance.getStage();
+		stage.container().style.cursor = this.config.style.cursor.add;
+	}
+	setCursorBlock() {
+		const stage = this.instance.getStage();
+		stage.container().style.cursor = this.config.style.cursor.block;
+	}
+};
+
 //#endregion
 //#region src/plugins/stage-grid/stage-grid.ts
 var WeaveStageGridPlugin = class extends WeavePlugin {
@@ -28707,7 +29807,7 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 				const shadowHost = getTopmostShadowHost(stage.container());
 				if (shadowHost) elementUnderMouse = shadowHost.elementFromPoint(mouseX, mouseY);
 			}
-			if (!this.enabled || this.isCtrlOrMetaPressed || e.buttons === 4 || !performPanning || getClosestParentWithId(elementUnderMouse) !== stage.container()) return;
+			if (!this.enabled || this.isCtrlOrMetaPressed || e.buttons === 4 || !performPanning || this.instance.getClosestParentWithWeaveId(elementUnderMouse) !== stage.container()) return;
 			this.getContextMenuPlugin()?.cancelLongPressTimer();
 			stage.x(stage.x() - e.deltaX);
 			stage.y(stage.y() - e.deltaY);
@@ -30083,6 +31183,95 @@ var WeaveNodesDistanceSnappingPlugin = class extends WeavePlugin {
 	}
 };
 
+//#endregion
+//#region src/plugins/comments-renderer/comments-renderer.ts
+var WeaveCommentsRendererPlugin = class extends WeavePlugin {
+	comments = [];
+	getLayerName = void 0;
+	constructor(params) {
+		super();
+		const { config } = params ?? {};
+		this.config = config;
+		this.comments = [];
+	}
+	getName() {
+		return WEAVE_COMMENTS_RENDERER_KEY;
+	}
+	onInit() {}
+	setComments(comments) {
+		this.comments = comments;
+	}
+	initCommentsLayer() {
+		const stage = this.instance.getStage();
+		const commentsLayer = new konva.default.Layer({ id: WEAVE_COMMENT_TOOL_LAYER_NAME });
+		stage.add(commentsLayer);
+		const selectionLayer = this.instance.getSelectionLayer();
+		if (selectionLayer) {
+			const selectionLayerZIndex = selectionLayer.getZIndex();
+			commentsLayer.setZIndex(selectionLayerZIndex + 1);
+		}
+		return commentsLayer;
+	}
+	deleteComments() {
+		const commentsLayer = this.getCommentsLayer();
+		if (commentsLayer) commentsLayer.destroyChildren();
+	}
+	render() {
+		if (!this.isEnabled()) return;
+		this.deleteComments();
+		const resolved = this.comments.filter((comment) => this.config.model.getStatus(comment) === WEAVE_COMMENT_STATUS.RESOLVED);
+		for (let i = 0; i < resolved.length; i++) {
+			const comment = resolved[i];
+			const commentsNodeHandler = this.instance.getNodeHandler(WEAVE_COMMENT_NODE_TYPE);
+			if (commentsNodeHandler) {
+				const node = commentsNodeHandler.onRender({
+					id: this.config.model.getId(comment),
+					x: this.config.model.getPosition(comment).x,
+					y: this.config.model.getPosition(comment).y,
+					userForegroundColor: this.config.getUserForegroundColor(this.config.model.getUser(comment)),
+					userBackgroundColor: this.config.getUserBackgroundColor(this.config.model.getUser(comment)),
+					commentModel: comment
+				});
+				node.moveToBottom();
+				this.getCommentsLayer()?.add(node);
+				commentsNodeHandler.onUpdate(node, { commentAction: "idle" });
+			}
+		}
+		const pending = this.comments.filter((comment) => this.config.model.getStatus(comment) === WEAVE_COMMENT_STATUS.PENDING);
+		for (let i = 0; i < pending.length; i++) {
+			const comment = pending[i];
+			const commentsNodeHandler = this.instance.getNodeHandler(WEAVE_COMMENT_NODE_TYPE);
+			if (commentsNodeHandler) {
+				const node = commentsNodeHandler.onRender({
+					id: this.config.model.getId(comment),
+					x: this.config.model.getPosition(comment).x,
+					y: this.config.model.getPosition(comment).y,
+					userForegroundColor: this.config.getUserForegroundColor(this.config.model.getUser(comment)),
+					userBackgroundColor: this.config.getUserBackgroundColor(this.config.model.getUser(comment)),
+					commentModel: comment
+				});
+				node.moveToTop();
+				this.getCommentsLayer()?.add(node);
+				commentsNodeHandler.onUpdate(node, { commentAction: "idle" });
+			}
+		}
+	}
+	getCommentsLayer() {
+		const commentsLayerId = `#${WEAVE_COMMENT_TOOL_LAYER_NAME}`;
+		const commentLayer = this.instance.getStage()?.findOne(commentsLayerId);
+		if (!commentLayer) return this.initCommentsLayer();
+		return commentLayer;
+	}
+	enable() {
+		this.enabled = true;
+		this.render();
+	}
+	disable() {
+		this.enabled = false;
+		this.deleteComments();
+	}
+};
+
 //#endregion
 exports.ALIGN_NODES_ALIGN_TO = ALIGN_NODES_ALIGN_TO
 exports.ALIGN_NODES_TOOL_ACTION_NAME = ALIGN_NODES_TOOL_ACTION_NAME
@@ -30130,6 +31319,17 @@ exports.TEXT_LAYOUT = TEXT_LAYOUT
 exports.TEXT_TOOL_ACTION_NAME = TEXT_TOOL_ACTION_NAME
 exports.TEXT_TOOL_STATE = TEXT_TOOL_STATE
 exports.WEAVE_ARROW_NODE_TYPE = WEAVE_ARROW_NODE_TYPE
+exports.WEAVE_COMMENTS_RENDERER_KEY = WEAVE_COMMENTS_RENDERER_KEY
+exports.WEAVE_COMMENT_CREATE_ACTION = WEAVE_COMMENT_CREATE_ACTION
+exports.WEAVE_COMMENT_NODE_ACTION = WEAVE_COMMENT_NODE_ACTION
+exports.WEAVE_COMMENT_NODE_DEFAULTS = WEAVE_COMMENT_NODE_DEFAULTS
+exports.WEAVE_COMMENT_NODE_TYPE = WEAVE_COMMENT_NODE_TYPE
+exports.WEAVE_COMMENT_STATUS = WEAVE_COMMENT_STATUS
+exports.WEAVE_COMMENT_TOOL_ACTION_NAME = WEAVE_COMMENT_TOOL_ACTION_NAME
+exports.WEAVE_COMMENT_TOOL_DEFAULT_CONFIG = WEAVE_COMMENT_TOOL_DEFAULT_CONFIG
+exports.WEAVE_COMMENT_TOOL_LAYER_NAME = WEAVE_COMMENT_TOOL_LAYER_NAME
+exports.WEAVE_COMMENT_TOOL_STATE = WEAVE_COMMENT_TOOL_STATE
+exports.WEAVE_COMMENT_VIEW_ACTION = WEAVE_COMMENT_VIEW_ACTION
 exports.WEAVE_COPY_PASTE_CONFIG_DEFAULT = WEAVE_COPY_PASTE_CONFIG_DEFAULT
 exports.WEAVE_COPY_PASTE_NODES_KEY = WEAVE_COPY_PASTE_NODES_KEY
 exports.WEAVE_COPY_PASTE_PASTE_CATCHER_ID = WEAVE_COPY_PASTE_PASTE_CATCHER_ID
@@ -30153,6 +31353,7 @@ exports.WEAVE_GRID_LAYER_ID = WEAVE_GRID_LAYER_ID
 exports.WEAVE_GRID_TYPES = WEAVE_GRID_TYPES
 exports.WEAVE_GROUP_NODE_TYPE = WEAVE_GROUP_NODE_TYPE
 exports.WEAVE_IMAGE_CROP_END_TYPE = WEAVE_IMAGE_CROP_END_TYPE
+exports.WEAVE_IMAGE_DEFAULT_CONFIG = WEAVE_IMAGE_DEFAULT_CONFIG
 exports.WEAVE_IMAGE_NODE_TYPE = WEAVE_IMAGE_NODE_TYPE
 exports.WEAVE_LAYER_NODE_TYPE = WEAVE_LAYER_NODE_TYPE
 exports.WEAVE_LINE_NODE_TYPE = WEAVE_LINE_NODE_TYPE
@@ -30181,6 +31382,9 @@ exports.WeaveAlignNodesToolAction = WeaveAlignNodesToolAction
 exports.WeaveArrowNode = WeaveArrowNode
 exports.WeaveArrowToolAction = WeaveArrowToolAction
 exports.WeaveBrushToolAction = WeaveBrushToolAction
+exports.WeaveCommentNode = WeaveCommentNode
+exports.WeaveCommentToolAction = WeaveCommentToolAction
+exports.WeaveCommentsRendererPlugin = WeaveCommentsRendererPlugin
 exports.WeaveConnectedUsersPlugin = WeaveConnectedUsersPlugin
 exports.WeaveContextMenuPlugin = WeaveContextMenuPlugin
 exports.WeaveCopyPasteNodesPlugin = WeaveCopyPasteNodesPlugin
@@ -30230,7 +31434,6 @@ exports.clearContainerTargets = clearContainerTargets
 exports.containerOverCursor = containerOverCursor
 exports.containsNodeDeep = containsNodeDeep
 exports.getBoundingBox = getBoundingBox
-exports.getClosestParentWithId = getClosestParentWithId
 exports.getExportBoundingBox = getExportBoundingBox
 exports.getSelectedNodesMetadata = getSelectedNodesMetadata
 exports.getTargetAndSkipNodes = getTargetAndSkipNodes