@stll/folio-react 0.0.1-placeholder.0 → 0.1.1

package/dist/CommentsSidebar-BsYOInaX.js

@@ -0,0 +1,823 @@
+import { t as containedHandler } from "./contained-handler-4uiqUVRn.js";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { CheckIcon, MoreVerticalIcon } from "lucide-react";
+import { useLocale, useTranslations } from "use-intl";
+import { closestHtmlElement, queryHtmlElement } from "@stll/folio-core/utils/domGuards";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/CommentsSidebar.tsx
+/**
+* Comments Sidebar
+*
+* Floating cards positioned relative to their anchored text in the document.
+* Cards appear at the Y position of their corresponding text.
+* Clicking a card expands it to show reply input and action buttons.
+*
+* Tracked changes are rendered purely inline (Word-style) and do not appear
+* in this sidebar.
+*/
+/** Extract plain text from a Comment's paragraph content */
+function getCommentText(paragraphs) {
+	if (!paragraphs?.length) return "";
+	return paragraphs.flatMap((p) => p.content.filter((c) => c.type === "run").flatMap((r) => "content" in r ? r.content : []).filter((c) => c.type === "text").map((t) => "text" in t ? t.text : "")).join("");
+}
+function formatDate(dateStr, locale) {
+	if (!dateStr) return "";
+	const d = new Date(dateStr);
+	if (Number.isNaN(d.getTime())) return dateStr;
+	return new Intl.DateTimeFormat(locale, {
+		hour: "numeric",
+		minute: "2-digit",
+		month: "short",
+		day: "numeric"
+	}).format(d);
+}
+function getInitials(name) {
+	return name.split(/\s+/u).map((w) => w[0]).join("").toUpperCase().slice(0, 2);
+}
+function getCommentParentId(comment) {
+	return comment.parentId;
+}
+const AVATAR_COLORS = [
+	"#6DCCB1",
+	"#79AAD9",
+	"#EE789D",
+	"#A987D1",
+	"#E6A85F",
+	"#F2CC8F",
+	"#68B3A2",
+	"#B07AA1",
+	"#59A14F",
+	"#FF9DA7",
+	"#E15759",
+	"#76B7B2"
+];
+function getAvatarColor(name) {
+	let hash = 0;
+	for (let i = 0; i < name.length; i++) hash = (name.codePointAt(i) ?? 0) + ((hash << 5) - hash);
+	return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+}
+const MIN_CARD_GAP = 6;
+const DEFAULT_CARD_HEIGHT = 64;
+const DEFAULT_INPUT_HEIGHT = 104;
+function arePositionMapsEqual(a, b) {
+	if (a.size !== b.size) return false;
+	for (const [key, value] of b) if (a.get(key) !== value) return false;
+	return true;
+}
+const ICON_BUTTON_STYLE = {
+	background: "none",
+	border: "none",
+	cursor: "pointer",
+	padding: 4,
+	color: "var(--doc-text-muted)",
+	display: "flex",
+	borderRadius: "50%"
+};
+const CANCEL_BUTTON_STYLE = {
+	minHeight: 28,
+	padding: "5px 10px",
+	fontSize: 12,
+	border: "1px solid transparent",
+	borderRadius: 6,
+	background: "transparent",
+	color: "var(--muted-foreground, var(--doc-text-muted))",
+	cursor: "pointer",
+	fontWeight: 500,
+	fontFamily: "inherit"
+};
+const CommentsSidebar = ({ comments, onCommentClick, activeCommentId = null, onCommentReply, onCommentResolve, onCommentDelete, onAddComment, onCancelAddComment, onAcceptChange: _onAcceptChange, onRejectChange: _onRejectChange, onTrackedChangeReply: _onTrackedChangeReply, topOffset = 0, showResolved = false, isAddingComment = false, addCommentYPosition = null, pageWidth = 816, editorContainerRef, anchorPositions }) => {
+	const t = useTranslations("folio");
+	const locale = useLocale();
+	const [replyingTo, setReplyingTo] = useState(null);
+	const [replyText, setReplyText] = useState("");
+	const [newCommentText, setNewCommentText] = useState("");
+	const [expandedCard, setExpandedCard] = useState(null);
+	const [menuOpenFor, setMenuOpenFor] = useState(null);
+	const [cardPositions, setCardPositions] = useState(/* @__PURE__ */ new Map());
+	const [measuredLeft, setMeasuredLeft] = useState(null);
+	const [initialPositionsDone, setInitialPositionsDone] = useState(false);
+	const knownCardsRef = useRef(/* @__PURE__ */ new Set());
+	const lastKnownCardPositionsRef = useRef(/* @__PURE__ */ new Map());
+	const sidebarRef = useRef(null);
+	const cardRefs = useRef(/* @__PURE__ */ new Map());
+	const updateSidebarLeft = useCallback(() => {
+		const scrollEl = editorContainerRef?.current;
+		const sidebarEl = sidebarRef.current;
+		const pageEl = scrollEl ? queryHtmlElement(scrollEl, ".layout-page") : null;
+		const offsetParentRaw = sidebarEl?.offsetParent;
+		const offsetParent = offsetParentRaw instanceof HTMLElement ? offsetParentRaw : null;
+		if (!scrollEl || !pageEl || !offsetParent) {
+			setMeasuredLeft(null);
+			return;
+		}
+		const parentRect = offsetParent.getBoundingClientRect();
+		const rawLeft = pageEl.getBoundingClientRect().right - parentRect.left + 12;
+		const maxVisibleLeft = Math.max(8, parentRect.width - 280 - 8);
+		setMeasuredLeft(Math.max(8, Math.min(rawLeft, maxVisibleLeft)));
+	}, [editorContainerRef]);
+	useLayoutEffect(() => {
+		updateSidebarLeft();
+	}, [
+		updateSidebarLeft,
+		pageWidth,
+		isAddingComment,
+		comments.length
+	]);
+	useEffect(() => {
+		const scrollEl = editorContainerRef?.current;
+		if (!scrollEl) return;
+		const resizeObserver = new ResizeObserver(updateSidebarLeft);
+		resizeObserver.observe(scrollEl);
+		const handleScroll = () => updateSidebarLeft();
+		scrollEl.addEventListener("scroll", handleScroll, { passive: true });
+		window.addEventListener("resize", handleScroll);
+		return () => {
+			resizeObserver.disconnect();
+			scrollEl.removeEventListener("scroll", handleScroll);
+			window.removeEventListener("resize", handleScroll);
+		};
+	}, [editorContainerRef, updateSidebarLeft]);
+	const visibleComments = useMemo(() => comments.filter((c) => {
+		const parentId = getCommentParentId(c);
+		if (parentId !== null && parentId !== void 0) return false;
+		if (c.done && !showResolved) return false;
+		return true;
+	}), [comments, showResolved]);
+	const repliesByParent = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const c of comments) {
+			const parentId = getCommentParentId(c);
+			if (parentId !== null && parentId !== void 0) {
+				const arr = map.get(parentId);
+				if (arr) arr.push(c);
+				else map.set(parentId, [c]);
+			}
+		}
+		return map;
+	}, [comments]);
+	const getReplies = (commentId) => repliesByParent.get(commentId) ?? [];
+	const updateCardPositions = useCallback(() => {
+		const container = editorContainerRef?.current;
+		if (!container) return;
+		const pagesEl = container.querySelector(".paged-editor__pages");
+		if (!pagesEl) return;
+		const containerRect = container.getBoundingClientRect();
+		const scrollTop = container.scrollTop;
+		const positions = [];
+		const pushPosition = (id, targetY, height) => {
+			lastKnownCardPositionsRef.current.set(id, targetY);
+			positions.push({
+				id,
+				targetY,
+				height
+			});
+		};
+		for (const comment of visibleComments) {
+			const cardId = `comment-${comment.id}`;
+			const el = pagesEl.querySelector(`[data-comment-id="${comment.id}"]`);
+			if (el) {
+				pushPosition(cardId, el.getBoundingClientRect().top - containerRect.top + scrollTop, cardRefs.current.get(cardId)?.offsetHeight || DEFAULT_CARD_HEIGHT);
+				continue;
+			}
+			const layoutY = anchorPositions?.get(cardId);
+			if (layoutY !== void 0) {
+				pushPosition(cardId, layoutY, cardRefs.current.get(cardId)?.offsetHeight || DEFAULT_CARD_HEIGHT);
+				continue;
+			}
+			const lastKnownY = lastKnownCardPositionsRef.current.get(cardId);
+			if (lastKnownY !== void 0 && activeCommentId === comment.id) {
+				positions.push({
+					id: cardId,
+					targetY: lastKnownY,
+					height: cardRefs.current.get(cardId)?.offsetHeight || DEFAULT_CARD_HEIGHT
+				});
+				continue;
+			}
+			const newCommentY = lastKnownCardPositionsRef.current.get("new-comment-input");
+			if (activeCommentId === comment.id && newCommentY !== void 0) {
+				pushPosition(cardId, newCommentY, cardRefs.current.get(cardId)?.offsetHeight || DEFAULT_CARD_HEIGHT);
+				continue;
+			}
+		}
+		if (isAddingComment && addCommentYPosition !== null) {
+			positions.push({
+				id: "new-comment-input",
+				targetY: addCommentYPosition,
+				height: cardRefs.current.get("new-comment-input")?.offsetHeight || DEFAULT_INPUT_HEIGHT
+			});
+			lastKnownCardPositionsRef.current.set("new-comment-input", addCommentYPosition);
+		}
+		positions.sort((a, b) => a.targetY - b.targetY);
+		const resolvedPositions = /* @__PURE__ */ new Map();
+		let lastBottom = 0;
+		for (const pos of positions) {
+			const y = Math.max(pos.targetY, lastBottom + MIN_CARD_GAP);
+			resolvedPositions.set(pos.id, y);
+			lastBottom = y + pos.height;
+		}
+		setCardPositions((prev) => arePositionMapsEqual(prev, resolvedPositions) ? prev : resolvedPositions);
+		const visiblePositionIds = new Set(resolvedPositions.keys());
+		for (const key of lastKnownCardPositionsRef.current.keys()) if (!visiblePositionIds.has(key) && key !== "new-comment-input") lastKnownCardPositionsRef.current.delete(key);
+	}, [
+		visibleComments,
+		editorContainerRef,
+		isAddingComment,
+		addCommentYPosition,
+		anchorPositions,
+		activeCommentId
+	]);
+	useEffect(() => {
+		const container = editorContainerRef?.current;
+		if (!container) return;
+		const pagesEl = container.querySelector(".paged-editor__pages");
+		if (!pagesEl) return;
+		const handleDocClick = (e) => {
+			const target = e.target;
+			if (!(target instanceof Element)) return;
+			if (sidebarRef.current?.contains(target)) return;
+			if (pagesEl.contains(target)) {
+				const commentEl = closestHtmlElement(target, "[data-comment-id]");
+				if (commentEl?.dataset["commentId"]) {
+					setExpandedCard(`comment-${commentEl.dataset["commentId"]}`);
+					onCommentClick?.(Number(commentEl.dataset["commentId"]));
+					return;
+				}
+			}
+			setExpandedCard(null);
+			setMenuOpenFor(null);
+		};
+		container.addEventListener("click", handleDocClick);
+		return () => container.removeEventListener("click", handleDocClick);
+	}, [editorContainerRef, onCommentClick]);
+	useEffect(() => {
+		const container = editorContainerRef?.current;
+		if (!container) return;
+		const timerQuick = setTimeout(updateCardPositions, 50);
+		const timerFull = setTimeout(() => {
+			updateCardPositions();
+			setInitialPositionsDone(true);
+		}, 400);
+		const resizeObserver = new ResizeObserver(() => {
+			requestAnimationFrame(updateCardPositions);
+		});
+		resizeObserver.observe(container);
+		return () => {
+			clearTimeout(timerQuick);
+			clearTimeout(timerFull);
+			resizeObserver.disconnect();
+		};
+	}, [updateCardPositions, editorContainerRef]);
+	useEffect(() => {
+		const container = editorContainerRef?.current;
+		if (!container) return;
+		let rafId = null;
+		const scheduleUpdate = () => {
+			if (rafId !== null) return;
+			rafId = requestAnimationFrame(() => {
+				rafId = null;
+				updateCardPositions();
+			});
+		};
+		container.addEventListener("scroll", scheduleUpdate, { passive: true });
+		return () => {
+			if (rafId !== null) cancelAnimationFrame(rafId);
+			container.removeEventListener("scroll", scheduleUpdate);
+		};
+	}, [editorContainerRef, updateCardPositions]);
+	useEffect(() => {
+		const raf = requestAnimationFrame(updateCardPositions);
+		return () => cancelAnimationFrame(raf);
+	}, [
+		expandedCard,
+		isAddingComment,
+		updateCardPositions
+	]);
+	useEffect(() => {
+		const targets = [];
+		if (expandedCard) {
+			const el = cardRefs.current.get(expandedCard);
+			if (el) targets.push(el);
+		}
+		const addEl = cardRefs.current.get("new-comment-input");
+		if (addEl) targets.push(addEl);
+		if (targets.length === 0) return;
+		let rafId;
+		const observer = new ResizeObserver(() => {
+			cancelAnimationFrame(rafId);
+			rafId = requestAnimationFrame(updateCardPositions);
+		});
+		for (const el of targets) observer.observe(el);
+		return () => {
+			cancelAnimationFrame(rafId);
+			observer.disconnect();
+		};
+	}, [expandedCard, updateCardPositions]);
+	const handleNewCommentSubmit = () => {
+		if (newCommentText.trim()) {
+			if (onAddComment?.(newCommentText.trim()) !== false) setNewCommentText("");
+		}
+	};
+	useEffect(() => {
+		if (activeCommentId === null) return;
+		setExpandedCard(`comment-${activeCommentId}`);
+	}, [activeCommentId]);
+	const handleCardClick = (cardId, commentId) => {
+		const nextExpandedCard = expandedCard === cardId ? null : cardId;
+		setExpandedCard(nextExpandedCard);
+		setMenuOpenFor(null);
+		if (commentId !== void 0) onCommentClick?.(nextExpandedCard === null && activeCommentId === commentId ? null : commentId);
+	};
+	const hasPositions = cardPositions.size > 0;
+	const avatarStyle = (name, size = 28) => ({
+		width: size,
+		height: size,
+		borderRadius: "50%",
+		backgroundColor: getAvatarColor(name),
+		color: "var(--doc-canvas-text)",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		fontSize: size === 28 ? 12 : 10,
+		fontWeight: 500,
+		flexShrink: 0
+	});
+	const submitButtonStyle = (enabled) => ({
+		minHeight: 28,
+		padding: "5px 12px",
+		fontSize: 12,
+		border: enabled ? "1px solid var(--primary, var(--doc-primary))" : "1px solid var(--border, var(--doc-border))",
+		borderRadius: 6,
+		background: enabled ? "var(--primary, var(--doc-primary))" : "var(--muted, var(--doc-bg))",
+		color: enabled ? "var(--primary-foreground, var(--doc-page))" : "var(--muted-foreground, var(--doc-text-muted))",
+		cursor: enabled ? "pointer" : "default",
+		fontWeight: 500,
+		fontFamily: "inherit"
+	});
+	const cardContainerStyle = (cardId, isExpanded, yPos) => {
+		const isKnown = knownCardsRef.current.has(cardId);
+		if (yPos !== void 0) knownCardsRef.current.add(cardId);
+		const isNewCard = !isKnown && yPos !== void 0;
+		const noPosition = hasPositions && yPos === void 0;
+		const positionStyle = (() => {
+			if (!hasPositions) return { marginBottom: 6 };
+			if (yPos !== void 0) return {
+				position: "absolute",
+				top: yPos,
+				left: 0,
+				right: 0,
+				opacity: 1
+			};
+			return {
+				position: "absolute",
+				top: 0,
+				left: 0,
+				right: 0,
+				opacity: 0,
+				visibility: "hidden"
+			};
+		})();
+		let transition = "none";
+		if (!noPosition && isNewCard) transition = "opacity 0.2s ease, box-shadow 0.2s ease";
+		else if (!noPosition && initialPositionsDone) transition = "opacity 0.2s ease, box-shadow 0.2s ease, top 0.15s ease";
+		return {
+			...positionStyle,
+			padding: isExpanded ? "8px 10px" : "7px 9px",
+			borderRadius: 6,
+			backgroundColor: "var(--doc-page)",
+			cursor: "pointer",
+			boxShadow: isExpanded ? "0 1px 2px rgba(60,64,67,0.22), 0 3px 8px rgba(60,64,67,0.12)" : "0 1px 2px rgba(60,64,67,0.16), 0 2px 5px rgba(60,64,67,0.08)",
+			transition
+		};
+	};
+	const renderReplies = (replies, isExpanded) => {
+		if (replies.length === 0) return null;
+		return /* @__PURE__ */ jsxs("div", {
+			style: { marginTop: 8 },
+			children: [(isExpanded ? replies : replies.slice(-1)).map((reply) => /* @__PURE__ */ jsxs("div", {
+				style: {
+					marginBottom: isExpanded ? 6 : 0,
+					paddingTop: 6,
+					borderTop: "1px solid var(--doc-border)"
+				},
+				children: [/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "flex-start",
+						gap: 8
+					},
+					children: [/* @__PURE__ */ jsx("div", {
+						style: avatarStyle(reply.author || "U", 22),
+						children: getInitials(reply.author || "U")
+					}), /* @__PURE__ */ jsxs("div", {
+						style: {
+							flex: 1,
+							minWidth: 0
+						},
+						children: [/* @__PURE__ */ jsx("div", {
+							style: {
+								fontSize: 12,
+								fontWeight: 600,
+								color: "var(--doc-text)"
+							},
+							children: reply.author || "Unknown"
+						}), /* @__PURE__ */ jsx("div", {
+							style: {
+								fontSize: 10,
+								color: "var(--doc-text-muted)"
+							},
+							children: formatDate(reply.date, locale)
+						})]
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: 12,
+						color: "var(--doc-text)",
+						lineHeight: "17px",
+						marginTop: 4,
+						...!isExpanded ? {
+							overflow: "hidden",
+							display: "-webkit-box",
+							WebkitLineClamp: 2,
+							WebkitBoxOrient: "vertical"
+						} : {}
+					},
+					children: getCommentText(reply.content)
+				})]
+			}, reply.id)), !isExpanded && replies.length > 1 && /* @__PURE__ */ jsx("div", {
+				style: {
+					fontSize: 11,
+					color: "var(--doc-text-muted)",
+					marginTop: 4
+				},
+				children: t("comments.moreReplies", { count: String(replies.length - 1) })
+			})]
+		});
+	};
+	const renderReplySection = (replyKey, submitFn) => /* @__PURE__ */ jsx("div", {
+		onClick: (e) => e.stopPropagation(),
+		role: "presentation",
+		onKeyDown: (e) => e.stopPropagation(),
+		style: { marginTop: 8 },
+		children: replyingTo === replyKey ? /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("input", {
+			ref: (el) => el?.focus({ preventScroll: true }),
+			type: "text",
+			value: replyText,
+			onChange: (e) => setReplyText(e.target.value),
+			onMouseDown: (e) => e.stopPropagation(),
+			onKeyDown: (e) => {
+				e.stopPropagation();
+				if (e.key === "Enter") {
+					e.preventDefault();
+					if (replyText.trim() && submitFn) submitFn(replyKey, replyText.trim());
+					setReplyText("");
+					setReplyingTo(null);
+				}
+				if (e.key === "Escape") {
+					setReplyingTo(null);
+					setReplyText("");
+				}
+			},
+			placeholder: t("comments.replyPlaceholder"),
+			style: {
+				width: "100%",
+				border: "1px solid var(--doc-primary)",
+				borderRadius: 6,
+				outline: "none",
+				fontSize: 12,
+				padding: "7px 10px",
+				boxSizing: "border-box",
+				color: "var(--doc-text)",
+				backgroundColor: "var(--doc-page)"
+			}
+		}), /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				justifyContent: "flex-end",
+				gap: 8,
+				marginTop: 8
+			},
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: (e) => {
+					e.stopPropagation();
+					setReplyingTo(null);
+					setReplyText("");
+				},
+				style: CANCEL_BUTTON_STYLE,
+				children: t("comments.cancel")
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: (e) => {
+					e.stopPropagation();
+					if (replyText.trim() && submitFn) submitFn(replyKey, replyText.trim());
+					setReplyText("");
+					setReplyingTo(null);
+				},
+				disabled: !replyText.trim(),
+				style: submitButtonStyle(!!replyText.trim()),
+				children: t("comments.reply")
+			})]
+		})] }) : /* @__PURE__ */ jsx("input", {
+			readOnly: true,
+			onMouseDown: (e) => e.stopPropagation(),
+			onClick: (e) => {
+				e.stopPropagation();
+				setReplyingTo(replyKey);
+			},
+			placeholder: t("comments.replyPlaceholder"),
+			style: {
+				width: "100%",
+				border: "1px solid var(--doc-border)",
+				borderRadius: 6,
+				outline: "none",
+				fontSize: 12,
+				padding: "7px 10px",
+				color: "var(--doc-text-subtle)",
+				cursor: "text",
+				backgroundColor: "var(--doc-page)",
+				boxSizing: "border-box"
+			}
+		})
+	});
+	const renderCommentCard = (comment) => {
+		const replies = getReplies(comment.id);
+		const cardId = `comment-${comment.id}`;
+		const isExpanded = expandedCard === cardId;
+		const isActive = activeCommentId === comment.id;
+		const yPos = cardPositions.get(cardId) ?? lastKnownCardPositionsRef.current.get(cardId);
+		const cardRef = { get current() {
+			return cardRefs.current.get(cardId) ?? null;
+		} };
+		return /* @__PURE__ */ jsxs("div", {
+			ref: (el) => {
+				if (el) cardRefs.current.set(cardId, el);
+				else cardRefs.current.delete(cardId);
+			},
+			"data-comment-id": comment.id,
+			className: "docx-comment-card",
+			onClick: containedHandler(cardRef, () => handleCardClick(cardId, comment.id)),
+			onKeyDown: (e) => {
+				if (e.key === "Enter" || e.key === " ") handleCardClick(cardId, comment.id);
+			},
+			onMouseDown: containedHandler(cardRef, (e) => e.stopPropagation()),
+			style: {
+				...cardContainerStyle(cardId, isExpanded, yPos),
+				opacity: comment.done ? .6 : 1,
+				outline: isActive ? "2px solid var(--doc-primary, var(--primary))" : "none",
+				outlineOffset: 2
+			},
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "flex-start",
+						gap: 8
+					},
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							style: avatarStyle(comment.author || "U"),
+							children: getInitials(comment.author || "U")
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							style: {
+								flex: 1,
+								minWidth: 0
+							},
+							children: [/* @__PURE__ */ jsx("div", {
+								style: {
+									fontSize: 12,
+									fontWeight: 600,
+									color: "var(--doc-text)"
+								},
+								children: comment.author || "Unknown"
+							}), /* @__PURE__ */ jsx("div", {
+								style: {
+									fontSize: 10,
+									color: "var(--doc-text-muted)"
+								},
+								children: formatDate(comment.date, locale)
+							})]
+						}),
+						isExpanded && /* @__PURE__ */ jsxs("div", {
+							style: {
+								display: "flex",
+								gap: 2,
+								marginTop: 1,
+								position: "relative"
+							},
+							children: [
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									onClick: (e) => {
+										e.stopPropagation();
+										onCommentResolve?.(comment.id);
+									},
+									title: "Resolve",
+									style: ICON_BUTTON_STYLE,
+									children: /* @__PURE__ */ jsx(CheckIcon, { size: 16 })
+								}),
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									onClick: (e) => {
+										e.stopPropagation();
+										setMenuOpenFor(menuOpenFor === cardId ? null : cardId);
+									},
+									title: "More options",
+									style: ICON_BUTTON_STYLE,
+									children: /* @__PURE__ */ jsx(MoreVerticalIcon, { size: 16 })
+								}),
+								menuOpenFor === cardId && /* @__PURE__ */ jsx("div", {
+									onClick: (e) => e.stopPropagation(),
+									onKeyDown: (e) => e.stopPropagation(),
+									onMouseDown: (e) => e.stopPropagation(),
+									role: "menu",
+									tabIndex: -1,
+									style: {
+										position: "absolute",
+										top: 28,
+										right: 0,
+										background: "var(--doc-page)",
+										borderRadius: 6,
+										boxShadow: "0 2px 6px var(--doc-shadow-md, rgba(60,64,67,0.3)), 0 1px 2px var(--doc-shadow-sm, rgba(60,64,67,0.15))",
+										zIndex: 100,
+										minWidth: 120,
+										padding: "4px 0"
+									},
+									children: /* @__PURE__ */ jsx("button", {
+										type: "button",
+										onClick: () => {
+											setMenuOpenFor(null);
+											onCommentDelete?.(comment.id);
+										},
+										style: {
+											display: "block",
+											width: "100%",
+											padding: "7px 12px",
+											border: "none",
+											background: "none",
+											textAlign: "left",
+											fontSize: 12,
+											color: "var(--doc-text)",
+											cursor: "pointer",
+											fontFamily: "inherit"
+										},
+										onMouseOver: (e) => {
+											e.currentTarget.style.backgroundColor = "var(--doc-primary-light)";
+										},
+										onFocus: (e) => {
+											e.currentTarget.style.backgroundColor = "var(--doc-primary-light)";
+										},
+										onMouseOut: (e) => {
+											e.currentTarget.style.backgroundColor = "transparent";
+										},
+										onBlur: (e) => {
+											e.currentTarget.style.backgroundColor = "transparent";
+										},
+										children: "Delete"
+									})
+								})
+							]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: 12,
+						color: "var(--doc-text)",
+						lineHeight: "17px",
+						marginTop: 5
+					},
+					children: getCommentText(comment.content)
+				}),
+				renderReplies(replies, isExpanded),
+				isExpanded && !comment.done && renderReplySection(comment.id, onCommentReply)
+			]
+		}, comment.id);
+	};
+	return /* @__PURE__ */ jsx("aside", {
+		ref: sidebarRef,
+		className: "docx-comments-sidebar",
+		"aria-label": "Comments",
+		style: {
+			position: "absolute",
+			top: topOffset,
+			left: measuredLeft ?? `calc(50% - 120px + ${pageWidth / 2 + 12}px)`,
+			bottom: 0,
+			width: 280,
+			fontFamily: "inherit",
+			zIndex: 40,
+			backgroundColor: "transparent",
+			overflowY: "visible",
+			overflowX: "visible",
+			opacity: initialPositionsDone || cardPositions.size > 0 ? 1 : 0,
+			pointerEvents: initialPositionsDone || cardPositions.size > 0 ? "auto" : "none",
+			transition: "opacity 0.15s ease"
+		},
+		onMouseDown: containedHandler(sidebarRef, (e) => e.stopPropagation()),
+		children: /* @__PURE__ */ jsxs("div", {
+			style: { position: "relative" },
+			children: [
+				isAddingComment && /* @__PURE__ */ jsxs("div", {
+					ref: (el) => {
+						if (el) cardRefs.current.set("new-comment-input", el);
+						else cardRefs.current.delete("new-comment-input");
+					},
+					style: {
+						...(() => {
+							const yPos = cardPositions.get("new-comment-input");
+							if (!hasPositions) return { marginBottom: 8 };
+							if (yPos !== void 0) return {
+								position: "absolute",
+								top: yPos,
+								left: 0,
+								right: 0
+							};
+							return {
+								position: "relative",
+								marginBottom: 8
+							};
+						})(),
+						padding: 10,
+						borderRadius: 6,
+						border: "1px solid var(--border, var(--doc-border))",
+						backgroundColor: "var(--popover, var(--doc-page))",
+						color: "var(--popover-foreground, var(--doc-text))",
+						boxShadow: "0 12px 36px var(--doc-shadow-md, rgba(0,0,0,0.28))",
+						zIndex: 50
+					},
+					children: [/* @__PURE__ */ jsx("textarea", {
+						ref: (el) => el?.focus({ preventScroll: true }),
+						value: newCommentText,
+						onChange: (e) => setNewCommentText(e.target.value),
+						onMouseDown: (e) => e.stopPropagation(),
+						onKeyDown: (e) => {
+							e.stopPropagation();
+							if (e.key === "Enter" && !e.shiftKey) {
+								e.preventDefault();
+								handleNewCommentSubmit();
+							}
+							if (e.key === "Escape") {
+								onCancelAddComment?.();
+								setNewCommentText("");
+							}
+						},
+						placeholder: t("comments.addPlaceholder"),
+						style: {
+							width: "100%",
+							border: "1px solid var(--input, var(--doc-border-input))",
+							borderRadius: 6,
+							outline: "none",
+							resize: "none",
+							fontSize: 13,
+							lineHeight: "18px",
+							padding: "8px 9px",
+							fontFamily: "inherit",
+							minHeight: 64,
+							boxSizing: "border-box",
+							color: "var(--foreground, var(--doc-text))",
+							background: "var(--background, var(--doc-page))"
+						}
+					}), /* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							justifyContent: "flex-end",
+							gap: 8,
+							marginTop: 8
+						},
+						children: [/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: (e) => {
+								e.stopPropagation();
+								onCancelAddComment?.();
+								setNewCommentText("");
+							},
+							style: CANCEL_BUTTON_STYLE,
+							children: t("comments.cancel")
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: (e) => {
+								e.stopPropagation();
+								handleNewCommentSubmit();
+							},
+							disabled: !newCommentText.trim(),
+							style: submitButtonStyle(!!newCommentText.trim()),
+							children: t("comment")
+						})]
+					})]
+				}),
+				visibleComments.map((comment) => renderCommentCard(comment)),
+				visibleComments.length === 0 && !isAddingComment && /* @__PURE__ */ jsx("div", {
+					style: {
+						padding: "24px 16px",
+						textAlign: "center",
+						color: "var(--doc-text-subtle)",
+						fontSize: 13
+					},
+					children: t("comments.noComments")
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { CommentsSidebar };