@nkzw/codiff-core 1.11.1 → 1.12.0

package/dist/lib/narrative-walkthrough-diff.d.ts

@@ -26,6 +26,7 @@ declare const extractPatchHunks: (patch: string) => {
     added: number;
     deleted: number;
     header: string;
+    patch: string;
 }[];
 /** @param {ReadonlyArray<{added: number; deleted: number}>} hunks */
 declare const sumHunkLineCounts: (hunks: ReadonlyArray<{
@@ -95,6 +96,7 @@ declare const getSectionWalkthroughHunks: (file: {
     added: number;
     deleted: number;
     header: string;
+    patch: string;
     id: string;
     index: number;
     kind: string;

package/dist/lib/narrative-walkthrough-diff.mjs

@@ -102,6 +102,7 @@ const extractPatchHunks = (patch) => {
 			index += 1;
 			continue;
 		}
+		const hunkStart = index;
 		let additions = 0;
 		let deletions = 0;
 		index += 1;
@@ -115,7 +116,8 @@ const extractPatchHunks = (patch) => {
 			...parsed,
 			added: additions,
 			deleted: deletions,
-			header
+			header,
+			patch: lines.slice(hunkStart, index).join("\n")
 		});
 	}
 	return hunks;

package/dist/lib/review-comments.d.ts

@@ -1,7 +1,7 @@
 import type { ChangedFile, PullRequestExistingReviewComment, PullRequestReviewComment, RepositoryState } from '../types.ts';
 import type { CodeViewInstance, ReviewComment } from './app-types.ts';
 export declare const isInteractiveReviewEvent: (event: PointerEvent) => boolean;
-export declare const hasActiveTextSelection: () => boolean;
+export declare const hasActiveTextSelection: (target?: Node | null) => boolean;
 export declare const isFileReviewComment: (comment: Pick<ReviewComment, 'anchor' | 'lineNumber' | 'side'>) => boolean;
 export declare const isLineReviewComment: (comment: ReviewComment) => comment is ReviewComment & {
     lineNumber: number;

package/dist/react.mjs

@@ -44,7 +44,6 @@ import { ArrowRightIcon } from "@phosphor-icons/react/ArrowRight";
 import { CaretLeftIcon } from "@phosphor-icons/react/CaretLeft";
 import { CaretRightIcon } from "@phosphor-icons/react/CaretRight";
 import { ArrowsClockwiseIcon } from "@phosphor-icons/react/ArrowsClockwise";
-import { Terminal, init } from "ghostty-web";
 //#region app/components/Button.tsx
 const buttonVariants = cva("codiff-button", {
 	defaultVariants: {
@@ -2380,9 +2379,31 @@ function MergeRequestCommentsView({ canComment, commenting, draft, editDraft, ed
 //#endregion
 //#region lib/review-comments.ts
 const isInteractiveReviewEvent = (event) => event.composedPath().some((target) => target instanceof HTMLElement && (target.closest("button, textarea, input, select, a") || target.closest(".review-comment-thread")));
-const hasActiveTextSelection = () => {
+const rangeIntersectsTarget = (range, target) => {
+	const targetRoot = target.getRootNode();
+	if (range.startContainer.getRootNode() !== targetRoot || range.endContainer.getRootNode() !== targetRoot) return false;
+	const selectionRange = (target.ownerDocument ?? document).createRange();
+	selectionRange.setStart(range.startContainer, range.startOffset);
+	selectionRange.setEnd(range.endContainer, range.endOffset);
+	return selectionRange.intersectsNode(target);
+};
+const isExpandedSelection = (selection, target) => {
+	if (selection == null || selection.rangeCount === 0) return false;
+	const range = selection.getRangeAt(0);
+	return (!selection.isCollapsed || selection.toString().length > 0 || !range.collapsed) && (!target || rangeIntersectsTarget(range, target));
+};
+const isExpandedRange = (range, target) => range != null && !range.collapsed && (!target || rangeIntersectsTarget(range, target));
+const hasActiveTextSelection = (target) => {
 	const selection = window.getSelection();
-	return selection != null && selection.rangeCount > 0 && !selection.isCollapsed;
+	const root = target?.getRootNode();
+	const shadowRoot = root && "host" in root ? root : null;
+	if (shadowRoot) {
+		const composedRange = selection?.getComposedRanges?.({ shadowRoots: [shadowRoot] })[0];
+		if (isExpandedRange(composedRange, target)) return true;
+		const shadowSelection = shadowRoot.getSelection?.();
+		if (isExpandedSelection(shadowSelection, target)) return true;
+	}
+	return isExpandedSelection(selection, target);
 };
 const isFileReviewComment = (comment) => comment.anchor === "file" || comment.lineNumber == null || comment.side == null;
 const isLineReviewComment = (comment) => !isFileReviewComment(comment);
@@ -5957,8 +5978,9 @@ function ReviewCommentEditor({ agentId, agentLabel, comment, displayName, focusC
 		onSaveCommentEdit
 	]);
 	const handleBlur = useCallback(() => {
-		onCommentBlur(flushDraft(), draft);
+		onCommentBlur(comment, draft, flushDraft);
 	}, [
+		comment,
 		draft,
 		flushDraft,
 		onCommentBlur
@@ -6590,6 +6612,10 @@ function ReviewCodeView({ activeSearchMatch, agentId, agentLabel, allowViewedTog
 	const handledScrollRequestRef = useRef(null);
 	const handledHunkNavRef = useRef(hunkNavigation?.request ?? null);
 	const emptyCommentDeleteTimersRef = useRef(/* @__PURE__ */ new Map());
+	const activePointerIdsRef = useRef(/* @__PURE__ */ new Set());
+	const pendingCommentBlursRef = useRef(/* @__PURE__ */ new Map());
+	const pendingCommentBlurTimerRef = useRef(null);
+	const focusedCommentEditorIdRef = useRef(null);
 	const definitionHighlightFrameRef = useRef(null);
 	const highlightFrameRef = useRef(null);
 	const ignoreNextLineSelectionEndRef = useRef(false);
@@ -6939,6 +6965,66 @@ function ReviewCodeView({ activeSearchMatch, agentId, agentLabel, allowViewedTog
 		}
 		emptyCommentDeleteTimersRef.current.clear();
 	}, []);
+	const flushPendingCommentBlurs = useCallback(() => {
+		if (activePointerIdsRef.current.size > 0) return;
+		const callbacks = [...pendingCommentBlursRef.current.values()];
+		pendingCommentBlursRef.current.clear();
+		for (const callback of callbacks) callback();
+	}, []);
+	const schedulePendingCommentBlurFlush = useCallback(() => {
+		if (activePointerIdsRef.current.size > 0 || pendingCommentBlursRef.current.size === 0 || pendingCommentBlurTimerRef.current != null) return;
+		const timer = window.setTimeout(() => {
+			deferredTimersRef.current.delete(timer);
+			pendingCommentBlurTimerRef.current = null;
+			flushPendingCommentBlurs();
+		}, 0);
+		pendingCommentBlurTimerRef.current = timer;
+		deferredTimersRef.current.add(timer);
+	}, [flushPendingCommentBlurs]);
+	useEffect(() => {
+		const activePointerIds = activePointerIdsRef.current;
+		const deferredTimers = deferredTimersRef.current;
+		const pendingCommentBlurs = pendingCommentBlursRef.current;
+		const handlePointerDown = (event) => {
+			const timer = pendingCommentBlurTimerRef.current;
+			if (timer != null) {
+				window.clearTimeout(timer);
+				deferredTimers.delete(timer);
+				pendingCommentBlurTimerRef.current = null;
+			}
+			activePointerIds.add(event.pointerId);
+		};
+		const handlePointerEnd = (event) => {
+			activePointerIds.delete(event.pointerId);
+			schedulePendingCommentBlurFlush();
+		};
+		const handleWindowBlur = () => {
+			activePointerIds.clear();
+			schedulePendingCommentBlurFlush();
+		};
+		window.addEventListener("pointerdown", handlePointerDown, true);
+		window.addEventListener("pointercancel", handlePointerEnd, true);
+		window.addEventListener("pointerup", handlePointerEnd, true);
+		window.addEventListener("blur", handleWindowBlur);
+		return () => {
+			window.removeEventListener("pointerdown", handlePointerDown, true);
+			window.removeEventListener("pointercancel", handlePointerEnd, true);
+			window.removeEventListener("pointerup", handlePointerEnd, true);
+			window.removeEventListener("blur", handleWindowBlur);
+			activePointerIds.clear();
+			pendingCommentBlurs.clear();
+			const timer = pendingCommentBlurTimerRef.current;
+			if (timer != null) {
+				window.clearTimeout(timer);
+				deferredTimers.delete(timer);
+				pendingCommentBlurTimerRef.current = null;
+			}
+		};
+	}, [schedulePendingCommentBlurFlush]);
+	const deferCommentBlurUntilPointerEnd = useCallback((commentId, callback) => {
+		if (activePointerIdsRef.current.size > 0 || pendingCommentBlurTimerRef.current != null) pendingCommentBlursRef.current.set(commentId, callback);
+		else callback();
+	}, []);
 	const scrollFileItemToTop = useCallback((itemId) => {
 		const handle = codeViewRef.current;
 		const viewer = handle?.getInstance();
@@ -7034,10 +7120,10 @@ function ReviewCodeView({ activeSearchMatch, agentId, agentLabel, allowViewedTog
 			createCommentForRange(range, context);
 		},
 		onLineClick: (line, context) => {
+			const lineElement = "lineElement" in line ? line.lineElement : null;
 			if (isPrimaryModifier(line.event) && onFindDefinitions) {
 				line.event.preventDefault();
 				line.event.stopPropagation();
-				const lineElement = "lineElement" in line ? line.lineElement : null;
 				const identifier = lineElement ? getIdentifierFromPointerEvent(line.event, lineElement) : null;
 				const meta = itemMetadata.get(context.item.id);
 				const side = "annotationSide" in line ? line.annotationSide : null;
@@ -7086,7 +7172,7 @@ function ReviewCodeView({ activeSearchMatch, agentId, agentLabel, allowViewedTog
 				onLoadSection(meta.file, meta.section);
 				return;
 			}
-			if (hasActiveTextSelection()) return;
+			if (hasActiveTextSelection(lineElement)) return;
 			const side = "annotationSide" in line ? line.annotationSide : null;
 			if (!side) return;
 			cancelPendingEmptyCommentDeletes();
@@ -7147,6 +7233,8 @@ function ReviewCodeView({ activeSearchMatch, agentId, agentLabel, allowViewedTog
 		wordWrap
 	]);
 	const focusComment = useCallback((comment) => {
+		focusedCommentEditorIdRef.current = comment.id;
+		pendingCommentBlursRef.current.delete(comment.id);
 		onCommentDraftChange?.({
 			body: comment.body,
 			id: comment.id
@@ -7157,25 +7245,32 @@ function ReviewCodeView({ activeSearchMatch, agentId, agentLabel, allowViewedTog
 		deferredTimersRef.current.delete(timer);
 		emptyCommentDeleteTimersRef.current.delete(comment.id);
 	}, [onCommentDraftChange]);
-	const blurComment = useCallback((comment, body) => {
-		onCommentDraftChange?.(null);
-		clearCommentLineHighlight();
-		if (!comment.isReadOnly && body.trim().length === 0) {
-			const existingTimer = emptyCommentDeleteTimersRef.current.get(comment.id);
-			if (existingTimer != null) {
-				window.clearTimeout(existingTimer);
-				deferredTimersRef.current.delete(existingTimer);
+	const blurComment = useCallback((comment, body, flushDraft) => {
+		deferCommentBlurUntilPointerEnd(comment.id, () => {
+			if (focusedCommentEditorIdRef.current === comment.id) {
+				focusedCommentEditorIdRef.current = null;
+				onCommentDraftChange?.(null);
 			}
-			const timer = window.setTimeout(() => {
-				deferredTimersRef.current.delete(timer);
-				emptyCommentDeleteTimersRef.current.delete(comment.id);
-				onDeleteComment(comment.id);
-			}, 120);
-			deferredTimersRef.current.add(timer);
-			emptyCommentDeleteTimersRef.current.set(comment.id, timer);
-		}
+			flushDraft();
+			clearCommentLineHighlight();
+			if (!comment.isReadOnly && body.trim().length === 0) {
+				const existingTimer = emptyCommentDeleteTimersRef.current.get(comment.id);
+				if (existingTimer != null) {
+					window.clearTimeout(existingTimer);
+					deferredTimersRef.current.delete(existingTimer);
+				}
+				const timer = window.setTimeout(() => {
+					deferredTimersRef.current.delete(timer);
+					emptyCommentDeleteTimersRef.current.delete(comment.id);
+					onDeleteComment(comment.id);
+				}, 120);
+				deferredTimersRef.current.add(timer);
+				emptyCommentDeleteTimersRef.current.set(comment.id, timer);
+			}
+		});
 	}, [
 		clearCommentLineHighlight,
+		deferCommentBlurUntilPointerEnd,
 		onCommentDraftChange,
 		onDeleteComment
 	]);
@@ -7883,6 +7978,12 @@ function resolveBackdrop(element) {
 	}
 	return "#00000000";
 }
+let ghosttyModule = null;
+const loadGhostty = async () => {
+	const ghostty = await (ghosttyModule ??= import("ghostty-web"));
+	await ghostty.init();
+	return ghostty;
+};
 /**
 * Read-only ghostty-web terminal that replays the streamed commit output, so
 * ANSI colors and cursor movement from pre-commit hooks render as they would
@@ -7897,7 +7998,7 @@ function CommitLogTerminal({ output }) {
 		if (!container) return;
 		let disposed = false;
 		let instance = null;
-		init().then(() => {
+		loadGhostty().then(({ Terminal }) => {
 			if (disposed) return;
 			const style = getComputedStyle(container);
 			instance = new Terminal({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nkzw/codiff-core",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "description": "A fast diff viewer.",
   "license": "MIT",
   "author": {
@@ -51,7 +51,7 @@
     }
   },
   "dependencies": {
-    "@nkzw/mdx-editor": "^0.2.2",
+    "@nkzw/mdx-editor": "^1.0.1",
     "@nkzw/use-relative-time": "^1.2.3",
     "@phosphor-icons/react": "^2.1.10",
     "@pierre/diffs": "1.3.6",
@@ -59,7 +59,7 @@
     "@radix-ui/react-slot": "^1.3.3",
     "class-variance-authority": "^0.7.1",
     "ghostty-web": "^0.4.0",
-    "lucide-react": "^1.34.0",
+    "lucide-react": "^1.39.0",
     "valibot": "^1.4.2"
   },
   "peerDependencies": {